/* ============================================================
   Self-hosted fonts - Inter + Playfair Display
   Subsets: latin, latin-ext
   Downloaded from fonts.bunny.net (EU-hosted, DSGVO-konform)
   Do not edit - regenerate from fonts.bunny.net if needed.
   ============================================================ */

/* ── INTER - latin-ext ─────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/inter-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/inter-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── INTER - latin ─────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/inter-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/inter-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── PLAYFAIR DISPLAY - latin-ext ──────────────────────────── */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/playfair-display-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/playfair-display-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/playfair-display-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/playfair-display-latin-ext-700-italic.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── PLAYFAIR DISPLAY - latin ──────────────────────────────── */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/playfair-display-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/playfair-display-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/playfair-display-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/playfair-display-latin-700-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ================================================================
   HANDWERKSMUSEUM OVELGÖNNE - Global Stylesheet
   Basiert auf dem Design der index.html (Master-Referenz)
   ================================================================ */

/* ================================================================
   DESIGN TOKENS
   ================================================================ */
:root {
    --ci-teal:        #699a97;
    --ci-teal-dark:   #4d7572;
    --ci-teal-light:  #f0f5f4;
    --ci-yellow:      #edc50f;
    --bg-color:       #ffffff;
    --bg-secondary:   #f9fafa;
    --text-main:      #1a1a1a;
    --text-light:     #555555;
    --text-muted:     #888888;
    --line-color:     #e5e5e5;
    --font-body:      'Inter', sans-serif;
    --font-display:   'Playfair Display', serif;
    --page-padding:   6vw;
    --section-spacing: 120px;
    --radius:         8px;
    --radius-sm:      4px;
    --radius-md:      12px;
    --radius-btn:     50px;
    --radius-card:    12px;
}

/* ================================================================
   BASE & TYPOGRAPHY
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--bg-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; }

h1, h2, h3, h4, h5 { font-family: var(--font-display); line-height: 1.1; margin-top: 0; }
h1 { font-size: clamp(3.5rem, 8vw, 6.5rem); font-weight: 700; margin-bottom: 20px; letter-spacing: -1px; }
h2 { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 400; margin-bottom: 30px; color: var(--text-main); }
h3 { font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--ci-teal); margin-bottom: 15px; display: block; }
p { margin-bottom: 25px; color: var(--text-light); font-weight: 300; font-size: 1.15rem; line-height: 1.7; max-width: 800px; }
a { text-decoration: none; color: inherit; transition: color .3s ease, opacity .3s ease, transform .3s ease, background .3s ease, border-color .3s ease; }
img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }

/* ================================================================
   GLOBAL UTILITIES
   ================================================================ */
#scroll-progress {
    position: fixed; top: 0; left: 0; width: 0%; height: 4px;
    background: linear-gradient(90deg, var(--ci-teal), var(--ci-yellow));
    z-index: 10000; transition: width 0.1s ease-out; border-radius: 0 2px 2px 0;
}

#preloader {
    position: fixed; inset: 0; background: var(--bg-color); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s;
}
.spinner {
    width: 50px; height: 50px; border: 3px solid var(--line-color);
    border-top-color: var(--ci-teal-dark); border-right-color: var(--ci-teal);
    border-radius: 50%; animation: spin 1s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

#back-to-top {
    position: fixed; bottom: 32px; right: 32px;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--ci-teal-dark); color: white; border: none;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(16px);
    transition: opacity .3s, transform .3s, background .2s;
    z-index: 500; box-shadow: 0 6px 24px rgba(0,0,0,.22);
}
#back-to-top.visible { opacity: 1; transform: translateY(0); }
#back-to-top:hover { background: var(--ci-teal); }

.skip-link {
    position: absolute; top: -100px; left: 20px;
    background: var(--ci-yellow); color: var(--text-main);
    padding: 10px 20px; border-radius: 0 0 8px 8px;
    font-weight: 700; font-size: .9rem; z-index: 9999;
    transition: top .2s; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fadeUp  { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn  { to { opacity: 1; } }
@keyframes pulseGreen {
    0%   { box-shadow: 0 0 0 0   rgba(16,185,129,.4); }
    70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0   rgba(16,185,129,0); }
}

.animate-up { opacity: 0; transform: translateY(30px); animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: scale(0.95); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-scale.active { opacity: 1; transform: scale(1); }

/* ================================================================
   HEADER
   ================================================================ */
header {
    padding: 28px var(--page-padding);
    display: flex; justify-content: space-between; align-items: center;
    position: fixed; top: 0; width: 100%; z-index: 2000;
    background: transparent;
    transition: background .4s cubic-bezier(.16,1,.3,1), backdrop-filter .4s, padding .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s;
}
header.scrolled {
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(12px);
    padding: 14px var(--page-padding);
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    border-bottom: 1px solid var(--line-color);
}

/* Logo */
.logo {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.1rem; color: white; z-index: 2001;
    position: relative; letter-spacing: .5px; transition: color .4s;
    flex-shrink: 0;
}
header.scrolled .logo { color: var(--text-main); }
.theme-dark-nav .logo { color: var(--text-main); }

/* Rechter Wrapper */
.header-right { display: flex; align-items: center; gap: 0; }

/* Desktop Nav */
.nav-desktop { display: flex; gap: 28px; align-items: center; margin-right: 24px; }
.nav-desktop a {
    font-size: .78rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: white; position: relative; transition: color .4s;
}
header.scrolled .nav-desktop a,
.theme-dark-nav .nav-desktop a { color: var(--text-main); }
.nav-desktop a::after {
    content: ''; position: absolute; bottom: -5px; left: 0;
    width: 0%; height: 2px; background: var(--ci-yellow); transition: width .3s;
}
.nav-desktop a:hover::after,
.nav-desktop a.active::after { width: 100%; }

/* Header Aktionen */
.header-actions { display: flex; align-items: center; gap: 6px; }

.header-icon-btn {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; transition: background .2s, color .2s;
    position: relative; text-decoration: none;
}
.header-icon-btn svg { width: 17px; height: 17px; }
.header-icon-btn:hover { background: rgba(255,255,255,.15); }
header.scrolled .header-icon-btn { color: var(--text-main); }
header.scrolled .header-icon-btn:hover { background: var(--bg-secondary); }
.theme-dark-nav .header-icon-btn { color: var(--text-main); }

/* Grüner Pip wenn geöffnet */
.header-icon-btn.is-open::after {
    content: ''; position: absolute; top: 6px; right: 6px;
    width: 7px; height: 7px; border-radius: 50%; background: #10b981;
    border: 1.5px solid white;
}
header.scrolled .header-icon-btn.is-open::after { border-color: white; }

.header-sep {
    width: 1px; height: 16px; background: rgba(255,255,255,.25);
    margin: 0 8px;
}
header.scrolled .header-sep { background: var(--line-color); }

/* Sprach-Switch */
.lang-switch {
    font-family: var(--font-body) !important;
    font-size: .72rem !important; font-weight: 800 !important;
    letter-spacing: 1px; color: white;
    border: 1.5px solid rgba(255,255,255,.5) !important;
    border-radius: 4px; padding: 3px 8px;
    transition: background .2s, color .2s, border-color .2s;
}
.lang-switch::after { display: none !important; }
.lang-switch:hover {
    background: var(--ci-yellow) !important;
    color: var(--text-main) !important;
    border-color: var(--ci-yellow) !important;
}
header.scrolled .lang-switch,
.theme-dark-nav .lang-switch {
    color: var(--text-main) !important;
    border-color: var(--line-color) !important;
}

/* Burger - 44×44 touch target, 28×18 visual centered within */
.menu-trigger {
    display: none; cursor: pointer; z-index: 2001;
    width: 44px; height: 44px; position: relative;
    background: none; border: none; padding: 0; margin-left: 4px;
    flex-shrink: 0;
}
.menu-trigger span {
    display: block; width: 28px; height: 2px; background: white;
    position: absolute; left: 8px; /* (44-28)/2 */
    transition: top .32s cubic-bezier(.16,1,.3,1),
                opacity .32s cubic-bezier(.16,1,.3,1),
                transform .32s cubic-bezier(.16,1,.3,1),
                background .2s;
}
header.scrolled .menu-trigger span,
.theme-dark-nav .menu-trigger span { background: var(--text-main); }
/* Visual centered: (44-18)/2 = 13px offset */
.menu-trigger span:nth-child(1) { top: 13px; }
.menu-trigger span:nth-child(2) { top: 21px; }
.menu-trigger span:nth-child(3) { top: 29px; }
.menu-trigger.open span { background: var(--text-main) !important; }
/* X at vertical center (21px) */
.menu-trigger.open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-trigger.open span:nth-child(2) { opacity: 0; transform: translateX(-16px); }
.menu-trigger.open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ================================================================
   MOBILE NAVIGATION OVERLAY
   ================================================================ */
.mobile-nav-overlay {
    position: fixed; inset: 0; background: white; z-index: 2002;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity .38s ease;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: all; }

/* X-Schließen-Button */
.mobile-nav-close {
    position: absolute; top: 24px; right: var(--page-padding);
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--bg-secondary); border: 1px solid var(--line-color);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-main);
    transition: background .2s, color .2s;
}
.mobile-nav-close:hover { background: var(--ci-teal-dark); color: white; border-color: var(--ci-teal-dark); }
.mobile-nav-close svg { width: 22px; height: 22px; }

/* Nav-Links */
.mobile-nav-overlay a.mob-link {
    font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3rem);
    margin: 10px 0; color: var(--text-main);
    transform: translateY(20px); opacity: 0;
    transition: color .3s, transform .5s, opacity .5s;
    text-decoration: none; position: relative;
}
.mobile-nav-overlay a.mob-link::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 2px; background: var(--ci-yellow);
    transition: width .3s;
}
.mobile-nav-overlay a.mob-link:hover { color: var(--ci-teal-dark); }
.mobile-nav-overlay a.mob-link:hover::after { width: 100%; }
.mobile-nav-overlay.open a.mob-link { transform: translateY(0); opacity: 1; }

/* Staggered delays */
.mobile-nav-overlay a.mob-link:nth-child(2)  { transition-delay: .04s; }
.mobile-nav-overlay a.mob-link:nth-child(3)  { transition-delay: .08s; }
.mobile-nav-overlay a.mob-link:nth-child(4)  { transition-delay: .12s; }
.mobile-nav-overlay a.mob-link:nth-child(5)  { transition-delay: .16s; }
.mobile-nav-overlay a.mob-link:nth-child(6)  { transition-delay: .20s; }
.mobile-nav-overlay a.mob-link:nth-child(7)  { transition-delay: .24s; }
.mobile-nav-overlay a.mob-link:nth-child(8)  { transition-delay: .28s; }

/* Untere Info-Leiste im Mobile-Menü */
.mobile-nav-footer {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 24px var(--page-padding);
    border-top: 1px solid var(--line-color);
    display: flex; justify-content: space-between; align-items: center;
    opacity: 0; transition: opacity .4s .3s;
}
.mobile-nav-overlay.open .mobile-nav-footer { opacity: 1; }
.mob-footer-info { font-size: .8rem; color: var(--text-light); line-height: 1.7; }
.mob-footer-info strong { color: var(--text-main); display: block; font-size: .85rem; }
.mob-footer-lang a {
    font-weight: 800; font-size: .8rem; letter-spacing: 1px;
    color: var(--text-main); border: 1.5px solid var(--line-color);
    padding: 6px 14px; border-radius: 4px; display: block;
}
.mob-footer-lang a:hover { background: var(--ci-yellow); border-color: var(--ci-yellow); }

/* ================================================================
   FOOTER
   ================================================================ */
#page-footer { background: #111; border-top: 4px solid var(--ci-yellow); }

.footer-top {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 56px; padding: 88px var(--page-padding) 68px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.fc h5 {
    font-family: var(--font-body); text-transform: uppercase;
    letter-spacing: 2px; color: rgba(255,255,255,.35);
    margin-bottom: 22px; font-weight: 700; font-size: .7rem;
}
.fc h5.brand { color: white; letter-spacing: .5px; font-size: .85rem; }
.fc a {
    display: block; color: rgba(255,255,255,.55); margin-bottom: 11px;
    font-size: .9rem; transition: color .2s, padding-left .2s;
    max-width: none;
}
.fc a:hover { color: var(--ci-yellow); padding-left: 6px; }
.footer-addr { color: rgba(255,255,255,.45); font-size: .88rem; line-height: 1.9; margin-bottom: 18px; }
.footer-hours-tag {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-btn);
    padding: 8px 16px; font-size: .8rem; color: rgba(255,255,255,.55);
}
.footer-hours-tag svg { width: 14px; height: 14px; color: var(--ci-yellow); }
.footer-social { display: flex; gap: 10px; margin-top: 26px; }
.footer-social a {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.55); margin: 0; padding: 0;
    transition: background .2s, border-color .2s, color .2s;
    max-width: none;
}
.footer-social a:hover {
    background: var(--ci-yellow); border-color: var(--ci-yellow);
    color: var(--text-main); padding-left: 0;
}
.footer-social a svg { width: 16px; height: 16px; }
.footer-bottom {
    padding: 22px var(--page-padding);
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
}
.footer-copy { font-size: .78rem; color: rgba(255,255,255,.25); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-legal a {
    font-size: .78rem; color: rgba(255,255,255,.32);
    transition: color .2s; max-width: none; margin-bottom: 0;
}
.footer-legal a:hover { color: rgba(255,255,255,.65); padding-left: 0; }

/* ================================================================
   COOKIE BANNER
   ================================================================ */
#cookie-banner {
    position: fixed;
    bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    left: 16px; right: 16px; z-index: 8000;
    background: #1a1a1a; padding: 20px 24px;
    display: flex; align-items: center;
    gap: 20px; flex-wrap: wrap;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 40px rgba(0,0,0,.55);
    transform: translateY(calc(100% + 40px)); transition: transform .4s cubic-bezier(.16,1,.3,1);
}
#cookie-banner::before {
    content: ''; position: absolute; top: 0; left: 20px; right: 20px;
    height: 3px; border-radius: 0 0 3px 3px;
    background: var(--ci-yellow); pointer-events: none;
}
#cookie-banner.show { transform: translateY(0); }
.cookie-text p { margin: 0; font-size: .88rem; color: rgba(255,255,255,.8); max-width: 660px; }
.cookie-btns { display: flex; gap: 10px; flex-shrink: 0; }
.btn-ck {
    padding: 9px 22px; font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    border-radius: var(--radius-btn); cursor: pointer; border: 1.5px solid;
    transition: all .2s;
}
.btn-ck-no  { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.35); }
.btn-ck-no:hover  { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ck-yes { background: var(--ci-yellow); color: var(--text-main); border-color: var(--ci-yellow); }
.btn-ck-yes:hover { background: #d4ad0b; border-color: #d4ad0b; }
@media (max-width: 600px) {
    #cookie-banner {
        top: max(12px, calc(env(safe-area-inset-top, 0px) + 10px));
        bottom: auto;
        left: 12px; right: 12px;
        flex-direction: column; align-items: stretch;
        padding: 18px 20px; gap: 14px;
        transform: translateY(calc(-100% - 40px));
    }
    #cookie-banner.show { transform: translateY(0); }
    .cookie-text p { font-size: .82rem; }
    .cookie-btns { flex-direction: row; }
    .btn-ck { flex: 1; text-align: center; padding: 12px 16px; font-size: .82rem; }
}

/* ================================================================
   BUTTONS (global)
   ================================================================ */
.btn-solid {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--ci-yellow); color: var(--text-main);
    padding: 14px 28px; font-weight: 700; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 1.5px;
    border: 2px solid var(--ci-yellow);
    border-radius: var(--radius-btn);
    transition: background .25s, color .25s, transform .2s;
    white-space: nowrap; cursor: pointer; text-decoration: none;
}
.btn-solid:hover { background: transparent; color: var(--ci-yellow); transform: translateY(-2px); }
.btn-solid:active { transform: scale(0.97); }

.btn-outline {
    display: inline-flex; align-items: center; gap: 10px;
    background: transparent; color: var(--text-main);
    padding: 14px 28px; font-weight: 700; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 1.5px;
    border: 2px solid currentColor;
    border-radius: var(--radius-btn);
    transition: background .25s, color .25s, transform .2s;
    white-space: nowrap; cursor: pointer; text-decoration: none;
}
.btn-outline:hover { background: var(--text-main); color: white; transform: translateY(-2px); }
.btn-outline:active { transform: scale(0.97); }

.btn-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; min-height: 44px;
    font-size: .82rem; font-weight: 700; letter-spacing: .02em;
    background: var(--ci-teal); color: white; border-radius: 100px;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background .25s, transform .25s;
}
@media (hover: hover) { .btn-pill:hover { background: var(--ci-teal-dark); } }
.btn-pill:active { transform: scale(0.97); }

.btn-white-outline {
    color: white !important; border-color: rgba(255,255,255,.45) !important;
}
.btn-white-outline:hover {
    background: white !important; color: var(--ci-teal-dark) !important;
    border-color: white !important;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1300px) {
    header .nav-desktop { gap: 18px; }
}

@media (max-width: 1024px) {
    :root { --page-padding: 5vw; --section-spacing: 80px; }
    .nav-desktop { display: none; }
    .menu-trigger { display: block; }
    .header-icon-btn:not(.lang-switch) { display: none; }
    .header-sep { display: none; }
    h1 { font-size: 3.5rem; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; padding: 56px var(--page-padding) 48px; }
}

@media (max-width: 600px) {
    :root { --page-padding: 5vw; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 480px) {
    header .logo { font-size: .88rem; letter-spacing: 0; }
}

/* ================================================================
   NAVIGATION (Kopfzeile + Menue), Stand 2026-10-09
   Alle Selektoren haben das Praefix "html ", damit sie die in einzelne
   Seiten eingebetteten aelteren Kopien dieser Stile sicher ueberschreiben.
   ================================================================ */

/* Sandwich-Symbol: einheitliche Groesse und Linien auf allen Seiten (44 px Tippflaeche).
   Einzelne Seiten hatten eigene, kleinere Varianten. */
html .menu-trigger { height: 44px; margin-left: 4px; }
html .menu-trigger span { left: 8px; width: 28px; }
html .menu-trigger span:nth-child(1) { top: 13px; }
html .menu-trigger span:nth-child(2) { top: 21px; }
html .menu-trigger span:nth-child(3) { top: 29px; }
html .menu-trigger.open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
html .menu-trigger.open span:nth-child(2) { opacity: 0; transform: translateX(-16px); }
html .menu-trigger.open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
@media (max-width: 1399px) { html .menu-trigger { width: 44px; } }

/* Sandwich-Symbol ist immer sichtbar (auch auf dem Desktop) */
html .menu-trigger { display: block; }

/* "Digital" ist hervorgehoben: kleiner gelber Punkt vor dem Wort */
html .nav-desktop a.nav-digital { display: inline-flex; align-items: center; gap: 7px; }
html .nav-desktop a.nav-digital::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--ci-yellow, #edc50f); flex-shrink: 0;
}

/* Klickflaeche der Menuepunkte: 44 px hoch, ohne dass sich das Aussehen aendert
   (Polster und gleich grosser negativer Rand heben sich auf) */
html .nav-desktop a { padding: 12px 0; margin: -12px 0; }
html .nav-desktop a::after { bottom: 7px; }

/* Tastaturfokus: nur sichtbar, wenn mit Tab navigiert wird.
   Zweifarbiger Ring (dunkel innen, gelb aussen), damit er auf Fotos und auf Weiss lesbar ist. */
html .nav-desktop a:focus-visible,
html header .logo:focus-visible {
    outline: 3px solid var(--ci-yellow, #edc50f); outline-offset: 5px;
    box-shadow: 0 0 0 2px #1a1a1a; border-radius: 4px;
}
html .header-icon-btn:focus-visible,
html .menu-trigger:focus-visible {
    outline: 3px solid var(--ci-yellow, #edc50f); outline-offset: 4px;
    box-shadow: 0 0 0 2px #1a1a1a;
}

/* "Menue"-Beschriftung neben dem Sandwich-Symbol (nur auf breiten Bildschirmen, wo Platz ist) */
html .menu-trigger .menu-trigger-label { display: none; }
@media (min-width: 1400px) {
    html .menu-trigger { width: auto; display: flex; align-items: center; padding-right: 6px; }
    html .menu-trigger .menu-trigger-label {
        display: block; margin-left: 44px;
        font-family: var(--font-body, 'Inter', sans-serif); font-size: .78rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 1px; color: #fff; transition: color .4s;
    }
    html header.scrolled .menu-trigger .menu-trigger-label,
    html .theme-dark-nav .menu-trigger .menu-trigger-label { color: var(--text-main, #1a1a1a); }
}

/* Kopfzeile: je schmaler der Bildschirm, desto weniger Nebensachen in der Leiste.
   Alles Weggelassene steht im Menue (Sandwich-Symbol). */
@media (max-width: 1600px) {
    html .header-icon-btn.hide-md { display: none; }
    html header .logo { font-size: 1rem; }
}
@media (max-width: 1500px) {
    html header .nav-desktop { gap: 22px; margin-right: 16px; }
}
@media (max-width: 1300px) {
    html header .nav-desktop { gap: 18px; margin-right: 12px; }
    html header .logo { font-size: .95rem; letter-spacing: .2px; }
    html header .nav-desktop a { letter-spacing: .6px; }
}
@media (max-width: 1260px) {
    html .nav-desktop a.nav-extra { display: none; }
}
@media (max-width: 1180px) {
    html .nav-desktop { display: none; }
}
@media (max-width: 480px) {
    html header .logo { font-size: .88rem; letter-spacing: 0; }
}

/* Dunkle Kopfzeile fuer die digitalen Angebote (Digital und Zeitkurbel, deutsch und englisch):
   Beim Scrollen aus dem Titelbereich wird die Leiste schwarz, Text und Symbole werden weiss. */
html body.header-dark header.scrolled {
    background: rgba(10,11,14,.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 8px 32px rgba(0,0,0,.6); border-bottom: 1px solid rgba(255,255,255,.08);
}
html body.header-dark header.scrolled .logo,
html body.header-dark header.scrolled .nav-desktop a,
html body.header-dark header.scrolled .header-icon-btn,
html body.header-dark header.scrolled .menu-trigger .menu-trigger-label { color: #fff; }
html body.header-dark header.scrolled .header-icon-btn:hover { background: rgba(255,255,255,.14); }
html body.header-dark header.scrolled .header-sep { background: rgba(255,255,255,.25); }
html body.header-dark header.scrolled .lang-switch { color: #fff !important; border-color: rgba(255,255,255,.45) !important; }
html body.header-dark header.scrolled .lang-switch:hover { color: var(--text-main, #1a1a1a) !important; border-color: var(--ci-yellow, #edc50f) !important; }
html body.header-dark header.scrolled .menu-trigger span { background: #fff; }
html body.header-dark header.scrolled .menu-trigger.open span { background: var(--text-main, #1a1a1a) !important; }

/* ---------------- Menue-Overlay ---------------- */
html .mobile-nav-overlay {
    position: fixed; inset: 0; background: white; z-index: 2002;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 104px var(--page-padding) 160px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .38s ease, visibility 0s linear .38s;
}
html .mobile-nav-overlay.open {
    opacity: 1; visibility: visible; pointer-events: all;
    transition: opacity .38s ease, visibility 0s;
}
/* Inhalt: auf hohen Bildschirmen senkrecht mittig, auf niedrigen von oben */
html .mob-inner { width: 100%; max-width: 1240px; margin: auto; display: block; }

/* X-Schliessen-Button (bleibt beim Scrollen sichtbar) */
html .mobile-nav-close {
    position: fixed; top: 24px; right: var(--page-padding); z-index: 3;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--bg-secondary); border: 1px solid var(--line-color);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-main);
    transition: background .2s, color .2s;
}
html .mobile-nav-close:hover { background: var(--ci-teal-dark); color: white; border-color: var(--ci-teal-dark); }
html .mobile-nav-close svg { width: 22px; height: 22px; }

/* Fokusringe im Menue (zweifarbig, auf Weiss und auf der dunklen Karte lesbar) */
html .mobile-nav-close:focus-visible,
html .mobile-nav-overlay a.mob-feature:focus-visible,
html .mobile-nav-overlay .mob-group a.mob-link:focus-visible,
html .mob-group-toggle:focus-visible,
html .mob-tile:focus-visible,
html .mob-quick-btn:focus-visible,
html .mob-footer-lang a:focus-visible {
    outline: 3px solid var(--ci-yellow, #edc50f); outline-offset: 3px;
    box-shadow: 0 0 0 2px #1a1a1a;
}

/* Hervorgehobene Karte: Digitales Museum (dunkel wie die Digital-Bereiche, mit Foto) */
html .mobile-nav-overlay a.mob-feature {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 30px 32px; min-height: 124px; border-radius: var(--radius-card);
    background: #101315; color: #fff; text-decoration: none;
    margin: 0 0 48px;
    transition: transform .35s cubic-bezier(.16,1,.3,1);
}
html .mobile-nav-overlay a.mob-feature::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background: var(--mob-photo, none) center / cover no-repeat;
    opacity: 0; transform: scale(1.04);
    transition: opacity .7s ease, transform 1.2s cubic-bezier(.16,1,.3,1);
}
html .mobile-nav-overlay a.mob-feature.has-photo::before { opacity: 1; transform: scale(1); }
html .mobile-nav-overlay a.mob-feature::after {
    content: ''; position: absolute; inset: 0; z-index: -1; display: block; width: auto; height: auto;
    background: linear-gradient(90deg, rgba(16,19,21,.95) 0%, rgba(16,19,21,.78) 46%, rgba(16,19,21,.16) 100%);
}
html .mobile-nav-overlay a.mob-feature:hover { color: #fff; transform: translateY(-2px); }
html .mobile-nav-overlay a.mob-feature:hover::before { transform: scale(1.03); }
html .mobile-nav-overlay a.mob-feature.active { box-shadow: inset 0 0 0 2px var(--ci-yellow); }
html .mob-feature-text { display: flex; flex-direction: column; gap: 4px; }
html .mob-feature-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ci-yellow); }
html .mob-feature-title { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.15; }
html .mob-feature-sub { font-size: 1rem; color: rgba(255,255,255,.82); }
html .mob-feature-arrow {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
    background: var(--ci-yellow); color: #101315;
    display: flex; align-items: center; justify-content: center;
    transition: transform .35s cubic-bezier(.16,1,.3,1);
}
html .mobile-nav-overlay a.mob-feature:hover .mob-feature-arrow { transform: translateX(4px); }
html .mob-feature-arrow svg { width: 22px; height: 22px; }

/* Gruppen */
html .mob-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 56px; }
html .mob-group-title {
    font-family: var(--font-body); font-size: .8125rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ci-teal-dark);
    margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--ci-yellow);
    display: inline-block;
}
html .mob-group ul { list-style: none; margin: 0; padding: 0; }
html .mob-group li { margin: 0; }
html .mobile-nav-overlay .mob-group a.mob-link {
    position: relative; display: block; margin: 0; padding: 9px 0;
    font-family: var(--font-display); font-size: 1.3rem; line-height: 1.3;
    color: var(--text-main); text-decoration: none;
    transform: none; opacity: 1; transition: color .25s;
}
html .mobile-nav-overlay .mob-group a.mob-link::after { display: none; }
html .mobile-nav-overlay .mob-group a.mob-link:hover { color: var(--ci-teal-dark); text-decoration: underline; text-decoration-color: var(--ci-yellow); text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* Aktuelle Seite: Farbe, Fettdruck UND gelber Punkt (nicht nur Farbe) */
html .mobile-nav-overlay .mob-group a.mob-link.active { color: var(--ci-teal-dark); font-weight: 700; }
html .mobile-nav-overlay .mob-group a.mob-link.active::before {
    content: ''; position: absolute; left: -16px; top: 50%;
    width: 8px; height: 8px; border-radius: 50%; background: var(--ci-yellow); transform: translateY(-50%);
}
@media (min-width: 981px) {
    html .mobile-nav-overlay .mob-group a.mob-link { font-size: 1.5rem; padding: 8px 0; }
    html .mobile-nav-overlay a.mob-feature { margin-bottom: 40px; }
}

/* Einblenden */
html .mob-feature, html .mob-group { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
html .mobile-nav-overlay.open .mob-feature,
html .mobile-nav-overlay.open .mob-group { opacity: 1; transform: none; }
html .mobile-nav-overlay.open .mob-feature { transition-delay: .05s; }
html .mobile-nav-overlay.open .mob-group:nth-child(1) { transition-delay: .10s; }
html .mobile-nav-overlay.open .mob-group:nth-child(2) { transition-delay: .15s; }
html .mobile-nav-overlay.open .mob-group:nth-child(3) { transition-delay: .20s; }
html .mobile-nav-overlay.open .mob-group:nth-child(4) { transition-delay: .25s; }
/* die Karte darf beim Hover animieren, auch wenn sie "eingeblendet" ist */
html .mobile-nav-overlay.open a.mob-feature { transition: opacity .5s ease .05s, transform .35s cubic-bezier(.16,1,.3,1); }

/* Untere Leiste: Oeffnungsstatus und Schnellaktionen */
html .mobile-nav-footer {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 2;
    padding: 16px var(--page-padding); background: white;
    border-top: 1px solid var(--line-color);
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 28px;
    opacity: 0; transition: opacity .4s .3s;
}
html .mobile-nav-overlay.open .mobile-nav-footer { opacity: 1; }
html .mob-status { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html .mob-status-row { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 700; color: var(--text-main); }
html .mob-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15); flex-shrink: 0; }
html .mob-status.is-open .mob-status-dot { background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.2); }
html .mob-status-sub { font-size: .82rem; color: var(--text-light); padding-left: 20px; }
html .mob-quick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html .mob-quick-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px; border-radius: 50px;
    border: 1.5px solid var(--line-color); background: #fff; color: var(--text-main);
    font-size: .85rem; font-weight: 700; text-decoration: none;
    transition: background .25s, border-color .25s, transform .25s;
}
html .mob-quick-btn:hover { background: var(--ci-yellow); border-color: var(--ci-yellow); }
html .mob-quick-btn:active { transform: scale(.97); }
html .mob-quick-btn svg { width: 16px; height: 16px; }
html .mob-footer-lang a {
    font-weight: 800; font-size: .8rem; letter-spacing: 1px;
    color: var(--text-main); border: 1.5px solid var(--line-color);
    min-height: 44px; min-width: 52px; padding: 0 14px; border-radius: 50px;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
}
html .mob-footer-lang a:hover { background: var(--ci-yellow); border-color: var(--ci-yellow); }

/* Aufklapper und Schnellkacheln (nur Handy und Tablet; auf dem Desktop bleiben die 4 Spalten) */
html .mob-group-toggle, html .mob-tiles { display: none; }
html .mob-group-panel-inner { min-width: 0; }
@media (max-width: 980px) {
    html .mob-inner { margin: 0 auto; max-width: 720px; }
    html .mobile-nav-overlay a.mob-feature { margin-bottom: 12px; }
    html .mob-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 22px; }
    html .mob-tile {
        display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
        min-height: 84px; padding: 14px; border-radius: var(--radius-card);
        background: var(--ci-teal-light); border: 1px solid #dfe9e7; color: #2f4f4c;
        font-size: .95rem; font-weight: 600; line-height: 1.25; text-decoration: none;
        transition: background .25s, transform .25s;
    }
    html .mob-tile svg { width: 22px; height: 22px; color: var(--ci-teal-dark); }
    html .mob-tile:hover { background: #e6efed; }
    html .mob-tile:active { transform: scale(.98); }
    html .mob-groups { grid-template-columns: minmax(0, 1fr); gap: 0; }
    html .mob-group { border-bottom: 1px solid var(--line-color); transition: border-color .3s; }
    html .mob-group.is-open { border-bottom: 2px solid var(--ci-yellow); }
    html .mob-group-title { display: none; }
    html .mob-group-toggle {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        width: 100%; min-height: 58px; padding: 0 2px; margin: 0;
        background: none; border: none; border-radius: 0; cursor: pointer; text-align: left;
        font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; color: var(--text-main);
        -webkit-tap-highlight-color: transparent;
    }
    html .mob-group-toggle svg {
        width: 22px; height: 22px; flex-shrink: 0; color: var(--ci-teal-dark);
        transition: transform .3s cubic-bezier(.16,1,.3,1);
    }
    html .mob-group.is-open .mob-group-toggle svg { transform: rotate(180deg); }
    html .mob-group-panel {
        display: grid; grid-template-rows: 0fr; visibility: hidden;
        transition: grid-template-rows .35s cubic-bezier(.16,1,.3,1), visibility 0s linear .35s;
    }
    html .mob-group.is-open .mob-group-panel {
        grid-template-rows: 1fr; visibility: visible;
        transition: grid-template-rows .35s cubic-bezier(.16,1,.3,1), visibility 0s;
    }
    html .mob-group-panel-inner { overflow: hidden; }
    html .mob-group ul { padding: 0 0 12px 12px; }
}
@media (max-width: 560px) {
    html .mobile-nav-overlay { padding-top: 92px; padding-bottom: 190px; }
    html .mobile-nav-overlay a.mob-feature { padding: 22px 20px; min-height: 108px; }
    html .mob-feature-arrow { width: 42px; height: 42px; }
    html .mobile-nav-overlay .mob-group a.mob-link { font-size: 1.2rem; padding: 11px 0; }
    html .mobile-nav-footer { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; padding-bottom: 14px; }
    html .mob-quick { flex-wrap: nowrap; }
    html .mob-quick-btn { flex: 1; padding: 0 10px; }
    html .mob-status-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html .mobile-nav-overlay, html .mobile-nav-overlay.open { transition: none; }
    html .mob-feature, html .mob-group { transition: none; transform: none; }
    html .mobile-nav-overlay a.mob-feature::before { transition: none; transform: none; }
    html .mobile-nav-overlay.open a.mob-feature, html .mob-feature-arrow { transition: none; }
    html .mob-group-panel, html .mob-group.is-open .mob-group-panel, html .mob-group-toggle svg { transition: none; }
}

/* ============================================================
   ANPASSUNG AN ALLE BILDSCHIRMGROESSEN (Pruefung 2026-10-10)
   ============================================================ */

/* Lange Woerter brechen statt ueber den Rand zu laufen oder Raster aufzuweiten */
html body { overflow-wrap: break-word; }
@media (max-width: 1024px) {
    html body h1, html body h2, html body h3 { -webkit-hyphens: auto; hyphens: auto; }
}
@media (max-width: 640px) {
    html .page-hero h1, html .page-header h1 { font-size: clamp(1.6rem, 6.6vw, 2.4rem); }
}

/* Kopfzeile auf sehr schmalen Telefonen (320 bis 400 px) */
@media (max-width: 400px) {
    html header .logo { font-size: .8rem; }
    html header .header-actions { gap: 2px; }
    html header .lang-switch { box-sizing: border-box; width: 36px; min-width: 36px; padding: 3px 0; text-align: center; }
}
@media (max-width: 350px) {
    html header .logo { font-size: .84rem; }
    html header .lang-switch { display: none; }
}

/* Archiv: Zahlenleiste und Shop: Knopf auf Tablets */
@media (max-width: 900px) {
    html .archive-stats-inner { flex-wrap: wrap; }
    html .a-stat { flex: 1 1 40%; min-width: 0; }
    html .a-stat-sep { display: none; }
}
@media (max-width: 1100px) {
    html .btn-ts-start { padding: 14px 22px; }
}

/* Tippflaechen: Links mindestens 24 px hoch (WCAG 2.5.8) */
html a { min-height: 26px; }

/* Lange Knopfbeschriftungen duerfen auf dem Telefon umbrechen */
@media (max-width: 480px) {
    html a[class*="btn"], html button[class*="btn"] { white-space: normal; max-width: 100%; }
}
html header .logo { padding: 10px 0; margin: -10px 0; }

/* Eingabefeld im Kurator-Chat darf auf schmalen Telefonen schrumpfen */
html .chat-input { min-width: 0; }

/* Cookie-Banner auf niedrigen Bildschirmen (Handy im Querformat): schlanker, am unteren Rand */
@media (max-height: 500px) and (orientation: landscape) {
    html #cookie-banner {
        top: auto;
        bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 8px));
        left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
        flex-direction: row; flex-wrap: nowrap; align-items: center;
        padding: 10px 16px; gap: 16px;
        transform: translateY(calc(100% + 30px));
    }
    html #cookie-banner.show { transform: translateY(0); }
    html #cookie-banner::before { left: 16px; right: 16px; }
    html .cookie-text p { font-size: .74rem; line-height: 1.35; max-width: none; }
    html .cookie-btns { flex-direction: row; flex-shrink: 0; gap: 8px; }
    html .btn-ck { flex: none; padding: 7px 14px; font-size: .72rem; }
}

/* Handy im Querformat: Kopfzeile niedriger, Titeltext rutscht nicht mehr hinter die Kopfzeile */
@media (max-height: 500px) and (orientation: landscape) {
    html header { padding-top: 12px; padding-bottom: 12px; }
    html .hero-content { padding-top: 80px; }
}

/* Sprachwahl "EN": Buchstaben bleiben in einer Zeile (die Regel zum Umbrechen langer Woerter darf sie nicht trennen) */
html header .lang-switch { white-space: nowrap; width: auto; min-width: 36px; text-align: center; }

/* Sehr schmale Telefone (bis 360 px): Textbloecke und Tabellenzellen brechen zu lange Woerter ab, damit einspaltige Raster nicht breiter werden als der Bildschirm */
@media (max-width: 360px) {
    html main :is(p, li, h1, h2, h3, h4, blockquote, figcaption, dd, dt), html td, html th, html .stat-num, html .stat-label { overflow-wrap: anywhere !important; }
}
/* E-Mail-Adressen und lange Handles duerfen immer umbrechen */
html a[href^="mailto:"], html .contact-link-detail, html .material-btn { overflow-wrap: anywhere; }
html .stat-item { min-width: 0; }

/* Tabellen und Kontaktzeilen duerfen auf schmalen Telefonen schrumpfen (lange Woerter, E-Mail-Adressen) */
html table { max-width: 100%; }
@media (max-width: 360px) {
    html .lp-tl-item { grid-template-columns: 58px 14px minmax(0, 1fr); gap: 0 10px; }
    html .qr-visual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    html .qr-demo-card { min-width: 0; }
    html .register-block { grid-template-columns: 64px minmax(0, 1fr); }
    html .reg-entries-col { min-width: 0; }
}

/* Technik-Tabelle in den Meldungen: auf Telefonen darf sie lange Woerter umbrechen (sonst ist sie breiter als der Bildschirm) */
@media (max-width: 430px) {
    html .tech-table td, html .tech-table th { overflow-wrap: anywhere !important; }
}

/* Barrierefreiheit: Kleingedrucktes im Footer mit ausreichendem Kontrast (WCAG 1.4.3, mind. 4,5:1) */
html footer .footer-copy, html footer #footer-year { color: rgba(255,255,255,.64); }
html footer .footer-legal a { color: rgba(255,255,255,.72); }
html footer .footer-legal a:hover { color: #fff; }
/* Barrierefreiheit: kleine Beschriftungen in Teal auf Weiss mit mind. 4,5:1 (WCAG 1.4.3) */
html .toc-title, html .legal-section h3 { color: var(--ci-teal-dark); }
html .fc h5 { color: rgba(255,255,255,.62); }
html .fc h5.brand { color: #fff; }