/* ==========================================================================
   Fahrschule AVL — Akademie für Verkehr & Logistik
   Design system. Dark, cinematic, brand teal on deep blue.
   ========================================================================== */

/* Fonts are served from this domain, not from Google, so no visitor IP is
   handed to a third party on page load (DSGVO). Files live in assets/fonts. */

/* The AVL house face. Uppercase-only geometric with the brand's own slant —
   no synthetic shear needed. Licence: see README. */
@font-face {
  font-family: 'Exima Geometric';
  src: url("../fonts/Exima-Geometric.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/chakrapetch-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/chakrapetch-600-latin.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: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/chakrapetch-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/chakrapetch-700-latin.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: 'Outfit';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/outfit-200-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Outfit';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/outfit-200-latin.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: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/outfit-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/outfit-300-latin.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: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/outfit-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/outfit-400-latin.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: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/outfit-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/outfit-500-latin.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: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/outfit-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/outfit-600-latin.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: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/outfit-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/outfit-700-latin.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;
}

:root {
    /* brand */
    --teal:         #2ec4b6;
    --teal-bright:  #45e0d0;
    --teal-deep:    #12a0a6;
    --blue:         #1b3f7e;
    --blue-mid:     #16305c;
    --blue-deep:    #0b1d3a;
    --ink:          #000000;

    /* surfaces */
    --bg:           #05070b;
    --surface:      #0a1220;
    --surface-2:    #0e1a2c;
    --line:         rgba(255, 255, 255, 0.12);
    --line-soft:    rgba(255, 255, 255, 0.07);

    /* type */
    --fg:           #f2f6fa;
    --fg-soft:      #c3d0dd;
    --fg-muted:     #8698ab;

    /* Exima Geometric is the brand face and already carries the AVL slant.
       Chakra Petch stays as the fallback while the face loads. */
    --display: 'Exima Geometric', 'Chakra Petch', 'Segoe UI', sans-serif;
    --body:    'Outfit', 'Segoe UI', sans-serif;

    --lean: none;

    --gutter: 60px;
    --maxw: 1440px;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; width: 0; }

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--teal); color: #04121a; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.display {
    font-family: var(--display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.14;
    color: #fff;
}

h1.display { font-size: clamp(36px, 6.2vw, 96px); }
h2.display { font-size: clamp(30px, 4.4vw, 62px); }
h3.display { font-size: clamp(19px, 2vw, 28px); }

.eyebrow {
    font-family: var(--body);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--teal);
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.eyebrow::before {
    content: '';
    width: 34px; height: 1px;
    background: var(--teal);
    flex: none;
}
.eyebrow--center { justify-content: center; }

.lede {
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.75;
    color: var(--fg-soft);
    font-weight: 300;
}

p + p { margin-top: 1em; }
strong { font-weight: 600; color: #fff; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; }
.section { padding: clamp(78px, 9vw, 150px) 0; }
.section--tight { padding: clamp(56px, 6vw, 100px) 0; }
/* Der Titel darf die volle Breite nutzen, damit er auf einer Zeile bleibt;
   nur der Begleittext bleibt schmal genug zum Lesen. */
.section-head { margin-bottom: clamp(40px, 5vw, 72px); }
.section-head > p:not(.eyebrow) { max-width: 780px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--body);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.35s var(--ease), background 0.3s, color 0.3s,
                border-color 0.3s, box-shadow 0.4s;
    white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; flex: none; }

.btn--primary { background: var(--teal); color: #04121a; }
.btn--primary:hover {
    background: var(--teal-bright);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px -10px rgba(46, 196, 182, 0.65);
}
.btn--ghost {
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    background: rgba(255, 255, 255, 0.02);
}
.btn--ghost:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); }
.btn--sm { padding: 11px 22px; font-size: 12px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px var(--gutter);
    transition: background 0.5s var(--ease), backdrop-filter 0.5s,
                border-color 0.5s, padding 0.4s var(--ease);
    border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
    background: rgba(5, 8, 13, 0.85);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom-color: var(--line-soft);
    padding-top: 10px;
    padding-bottom: 10px;
}

.brand-mark { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand-mark img { height: 44px; width: auto; transition: height 0.4s var(--ease); }
.site-header.is-stuck .brand-mark img { height: 34px; }

.main-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-item { position: relative; }
.main-nav a {
    display: block;
    padding: 12px 14px;
    font-family: var(--body);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--fg-soft);
    transition: color 0.3s;
    white-space: nowrap;
}
.main-nav a::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: 6px;
    height: 1px;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
}
.main-nav a:hover { color: #fff; }
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: #fff; }

/* dropdown for the course pages */
.nav-item__panel {
    position: absolute;
    top: 100%; left: 0;
    min-width: 280px;
    padding: 10px;
    background: rgba(8, 14, 24, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.nav-item:hover .nav-item__panel,
.nav-item:focus-within .nav-item__panel { opacity: 1; visibility: visible; transform: none; }
.nav-item__panel a {
    padding: 10px 14px;
    border-radius: 5px;
    font-size: 13px;
    letter-spacing: 0.05em;
}
.nav-item__panel a::after { content: none; }
.nav-item__panel a:hover { background: rgba(46, 196, 182, 0.12); color: var(--teal-bright); }

.header-cta { margin-left: 18px; flex: none; }

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex: none;
}
.nav-toggle span { display: block; width: 17px; height: 1.5px; background: currentColor; position: relative; transition: background 0.2s; }
.nav-toggle span::before,
.nav-toggle span::after {
    content: '';
    position: absolute; left: 0;
    width: 17px; height: 1.5px;
    background: #fff;
    transition: transform 0.35s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(5, 8, 13, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 90px var(--gutter) 40px;
    gap: 2px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s var(--ease), visibility 0.45s;
}
body.nav-open .mobile-nav { opacity: 1; visibility: visible; }
.mobile-nav a {
    font-family: var(--body);
    font-size: clamp(22px, 6vw, 34px);
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s;
}
body.nav-open .mobile-nav a { opacity: 1; transform: none; }
.mobile-nav a:hover { color: var(--teal); }
.mobile-nav a.is-sub { font-size: clamp(15px, 3.6vw, 19px); padding-left: 20px; color: var(--fg-soft); }
.mobile-nav a.btn {
    margin-top: 24px;
    align-self: flex-start;
    font-size: 13px;
    padding: 15px 30px;
    border-bottom: 0;
    color: #04121a;
}

/* --------------------------------------------------------------------------
   Sticky booking bar — the page is here to get appointments
   -------------------------------------------------------------------------- */

.book-bar {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%) translateY(140%);
    z-index: 180;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 12px 12px 26px;
    border-radius: 999px;
    background: rgba(9, 16, 27, 0.92);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(46, 196, 182, 0.35);
    box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.9);
    transition: transform 0.6s var(--ease);
    max-width: calc(100vw - 32px);
}
.book-bar.is-on { transform: translateX(-50%) translateY(0); }
.book-bar__text {
    font-family: var(--body);
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}
.book-bar__text small {
    display: block;
    font-family: var(--body);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--teal-bright);
}
.book-bar__close {
    background: none; border: 0; cursor: pointer;
    color: var(--fg-muted); font-size: 18px; line-height: 1;
    padding: 6px 10px 6px 0;
}
.book-bar__close:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Cinematic stage
   -------------------------------------------------------------------------- */

#webgl {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    outline: none;
    display: block;
}

.cinema-spacer { position: relative; height: 640vh; z-index: 2; pointer-events: none; }

.stage { position: fixed; inset: 0; z-index: 10; pointer-events: none; transition: opacity 0.5s ease; }
.stage[hidden] { display: none; }

.stage::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(100deg,
            rgba(2, 5, 9, 0.88) 0%,
            rgba(2, 5, 9, 0.66) 26%,
            rgba(2, 5, 9, 0.22) 50%,
            rgba(2, 5, 9, 0.00) 66%),
        linear-gradient(to top, rgba(2, 5, 9, 0.78) 0%, rgba(2, 5, 9, 0.00) 44%);
}

.grid-rule {
    position: fixed;
    top: 76px; left: 0; right: 0;
    height: 1px;
    background: var(--line-soft);
    z-index: 5;
    pointer-events: none;
}
.grid-lines {
    position: fixed;
    top: 0; left: 40px; right: 40px;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    z-index: 5;
    pointer-events: none;
}
.grid-line { position: relative; width: 1px; height: 100%; background: var(--line-soft); }
.grid-line:nth-child(3) { margin-top: 76px; height: calc(100vh - 76px); }
.grid-dot {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(70, 224, 208, 0.45);
    box-shadow: 0 0 8px rgba(46, 196, 182, 0.4);
}

.story-dashes {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.story-dash { width: 2px; height: 40px; background: rgba(255, 255, 255, 0.16); border-radius: 2px; overflow: hidden; }
.story-dash-fill {
    width: 100%; height: 0%;
    background: var(--teal-bright);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(69, 224, 208, 0.8);
}

.slide { position: absolute; bottom: 14%; pointer-events: none; }
.slide-title {
    font-family: var(--display);
    font-size: clamp(23px, 2.8vw, 42px);
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin-bottom: 22px;
    color: #fff;
    text-shadow: 0 0 60px rgba(0, 0, 0, 0.85);
}

.slide-kicker {
    font-family: var(--body);
    font-size: clamp(17px, 2.1vw, 30px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teal-bright);
    margin: -12px 0 22px;
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.3s;
}
.slide.is-active .slide-kicker { opacity: 1; transform: translateY(0); }
#slide-1 .slide-kicker { margin-left: var(--gutter); }
@media (max-width: 1180px) { #slide-1 .slide-kicker { margin-left: 0; } }

.slide-title .word { display: inline-block; white-space: nowrap; }
.slide-title .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px);
    filter: blur(12px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                filter 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.slide.is-active .slide-title .char { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Arabic: no per-letter split, so the whole title fades in as one block. */
.slide-title.is-plain {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(8px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                filter 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.slide.is-active .slide-title.is-plain { opacity: 1; transform: translateY(0); filter: blur(0); }
.slide-desc {
    font-size: 16.5px;
    line-height: 1.75;
    font-weight: 300;
    color: var(--fg-soft);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.9);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.4s;
}
.slide.is-active .slide-desc { opacity: 1; transform: translateY(0); }
.slide.is-active { pointer-events: auto; }

#slide-1 { left: 0; width: 100%; }
#slide-1 .slide-title { margin-left: var(--gutter); }
#slide-1 .desc-row { position: relative; display: flex; flex-direction: column; gap: 16px; width: 100%; }
#slide-1 .col-1 { margin-left: var(--gutter); width: min(640px, 52vw); max-width: min(640px, 52vw); }
#slide-1 .col-2 { margin-left: var(--gutter); width: min(640px, 52vw); max-width: min(640px, 52vw); transition-delay: 0.55s; }

#slide-2 { left: 0; width: 100%; }
#slide-2 .slide-title { margin-left: calc(25vw + 40px); }
#slide-2 .slide-desc { margin-left: calc(25vw + 40px); width: min(720px, 60vw); max-width: min(720px, 60vw); }

#slide-3 { left: calc(25vw + 40px); width: min(720px, 60vw); max-width: min(720px, 60vw); }
#slide-4 { left: calc(25% + 40px); max-width: min(720px, 60vw); }


.scroll-hint {
    position: fixed;
    bottom: 34px;
    right: calc(var(--gutter) + 34px);
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: var(--body);
    font-size: 12px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--fg-muted);
    pointer-events: none;
}
.scroll-hint .bar {
    width: 1px; height: 42px;
    background: linear-gradient(to bottom, var(--teal), transparent);
    animation: hintDrop 2.2s var(--ease) infinite;
}
@keyframes hintDrop {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
    35%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
    65%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* --------------------------------------------------------------------------
   Page body
   -------------------------------------------------------------------------- */

.site-body { position: relative; z-index: 20; background: var(--bg); }
.site-body::before {
    content: '';
    position: absolute;
    top: -220px; left: 0; right: 0;
    height: 220px;
    background: linear-gradient(to bottom, rgba(5, 7, 11, 0), var(--bg));
    pointer-events: none;
}

.page-hero {
    position: relative;
    padding: clamp(148px, 20vh, 226px) 0 clamp(56px, 7vw, 100px);
    overflow: hidden;
    border-bottom: 1px solid var(--line-soft);
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 78% 0%, rgba(46, 196, 182, 0.18), transparent 58%),
        radial-gradient(110% 95% at 10% 100%, rgba(27, 63, 126, 0.40), transparent 62%),
        var(--bg);
}
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px);
    background-size: 25% 100%;
    opacity: 0.6;
}
.page-hero > .wrap { position: relative; z-index: 2; }
.page-hero .lede { max-width: 660px; margin-top: 22px; }

/* hero with a photograph behind it */
.page-hero--photo::before {
    background:
        linear-gradient(90deg, rgba(5,7,11,0.96) 22%, rgba(5,7,11,0.62) 58%, rgba(5,7,11,0.35) 100%),
        var(--hero-img) center/cover no-repeat,
        var(--bg);
}

/* Kopfbereich mit laufendem Imagefilm im Hintergrund.
   Der Film liegt hinter dem Text, ein Verlauf darueber haelt die Schrift
   lesbar. Bei "Bewegung reduzieren" steht nur das Standbild. */
.page-hero--film { padding-top: clamp(158px, 22vh, 246px); }
.page-hero--film::before { background: var(--bg); }
.page-hero--film::after { opacity: 0.25; z-index: 3; }
.page-hero__video {
    position: absolute;
    inset: 0;
    /* leicht herangezoomt, damit das Logo im Film nicht direkt hinter der
       Ueberschrift sitzt */
    transform: scale(1.25) translateY(6%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    filter: saturate(0.9) contrast(1.05);
}
.page-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(90deg, rgba(5,7,11,0.97) 26%, rgba(5,7,11,0.86) 62%, rgba(5,7,11,0.7) 100%),
        linear-gradient(to top, rgba(5,7,11,0.99) 4%, rgba(5,7,11,0.45) 58%),
        radial-gradient(120% 90% at 78% 0%, rgba(46, 196, 182, 0.16), transparent 60%);
}
@media (prefers-reduced-motion: reduce) {
    .page-hero__video { display: none; }
    .page-hero--film::before {
        background:
            linear-gradient(90deg, rgba(5,7,11,0.94) 20%, rgba(5,7,11,0.7) 60%, rgba(5,7,11,0.5) 100%),
            url('../img/szene-1.jpg') center/cover no-repeat,
            var(--bg);
    }
}

.crumbs {
    font-family: var(--body);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 18px;
}
.crumbs a { text-decoration: none; color: var(--teal); }
.crumbs span { margin: 0 8px; opacity: 0.5; }

/* --------------------------------------------------------------------------
   Reveal
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Ticker + Fuhrpark
   -------------------------------------------------------------------------- */

.ticker {
    position: relative;
    padding: 18px 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(90deg, var(--blue-deep), var(--teal-deep), var(--blue-deep));
    overflow: hidden;
}
.ticker__track { display: flex; width: max-content; animation: slide-left 38s linear infinite; }
.ticker__group { display: flex; align-items: center; flex: none; }
.ticker__item {
    font-family: var(--body);
    font-size: clamp(16px, 1.5vw, 21px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
}
.ticker__item::after { content: ''; width: 7px; height: 7px; background: #fff; border-radius: 50%; opacity: 0.6; }
@keyframes slide-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

.fleet-strip { overflow: hidden; padding: 30px 0; }
.fleet { display: flex; gap: 20px; width: max-content; animation: slide-left 60s linear infinite; }
.fleet-strip:hover .fleet { animation-play-state: paused; }
.fleet figure {
    position: relative;
    width: clamp(250px, 26vw, 400px);
    flex: none;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface);
}
.fleet img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.9s var(--ease);
}
.fleet figure:hover img { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   Klassen — big letter on the left
   -------------------------------------------------------------------------- */

.klassen-stack { display: grid; gap: 18px; }

.klasse-row {
    position: relative;
    display: grid;
    grid-template-columns: clamp(140px, 16vw, 230px) 1fr auto;
    align-items: center;
    gap: clamp(20px, 3vw, 46px);
    padding: clamp(22px, 3vw, 38px) clamp(22px, 3vw, 40px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(105deg, rgba(22, 48, 92, 0.42), rgba(10, 18, 32, 0.55));
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.5s;
}
.klasse-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(46, 196, 182, 0.16), transparent 55%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}
.klasse-row:hover {
    transform: translateX(6px);
    border-color: rgba(46, 196, 182, 0.55);
    box-shadow: 0 26px 60px -34px rgba(46, 196, 182, 0.7);
}
.klasse-row:hover::after { opacity: 1; }

.klasse-row__letter {
    font-family: var(--display);
    font-size: clamp(88px, 12vw, 190px);
    line-height: 0.78;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.8);
    transition: -webkit-text-stroke-color 0.4s, color 0.5s;
    position: relative;
    z-index: 2;
}
.klasse-row:hover .klasse-row__letter {
    -webkit-text-stroke-color: var(--teal-bright);
    color: rgba(46, 196, 182, 0.10);
}

/* Zweistellige Ziffern brauchen weniger Groesse, sonst laufen sie in den
   Text der Stellenanzeige hinein. */
.klasse-row__letter--num {
    font-size: clamp(52px, 6vw, 92px);
    line-height: 1;
    -webkit-text-stroke-width: 1.6px;
}

.klasse-row__body { position: relative; z-index: 2; min-width: 0; }
.klasse-row__body h3 {
    font-family: var(--body);
    font-size: clamp(20px, 2.2vw, 30px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    margin-bottom: 4px;
}
.klasse-row__body .sub {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 14px;
    font-family: var(--body);
}
.klasse-row__body p { color: var(--fg-soft); font-size: 15.5px; margin-bottom: 14px; max-width: 60ch; }

.klasse-list { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.klasse-list li {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--fg-soft);
    background: rgba(0, 0, 0, 0.25);
}

.klasse-row__go {
    position: relative;
    z-index: 2;
    width: 52px; height: 52px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--teal);
    flex: none;
    transition: background 0.4s, color 0.4s, border-color 0.4s, transform 0.4s var(--ease);
}
.klasse-row__go svg { width: 18px; height: 18px; }
.klasse-row:hover .klasse-row__go {
    background: var(--teal);
    border-color: var(--teal);
    color: #04121a;
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Dein Weg — zigzag stations along a scroll-driven road
   -------------------------------------------------------------------------- */

.weg { position: relative; overflow: hidden; }
.weg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 60% at 85% 15%, rgba(18, 160, 166, 0.18), transparent 60%),
        radial-gradient(70% 70% at 8% 85%, rgba(27, 63, 126, 0.30), transparent 65%);
    pointer-events: none;
}
.weg > .wrap { position: relative; z-index: 2; }

.route { position: relative; padding: 10px 0 30px; }

/* the road itself, centred behind the cards */
.route__road {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 210px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
}
.route__road svg { width: 100%; height: 100%; display: block; }

.route__car {
    position: absolute;
    left: 0; top: 0;
    width: 96px;
    /* Der Wagen selbst sitzt in der oberen Haelfte der Grafik, darunter liegt
       der Lichtkegel. Der Versatz stellt die Karosseriemitte auf den Punkt. */
    margin: -68px 0 0 -48px;
    z-index: 3;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.75));
}
.route__car svg { width: 100%; height: auto; display: block; }

.route__steps { position: relative; z-index: 2; display: grid; gap: clamp(40px, 7vw, 96px); }

.route-step { display: grid; grid-template-columns: 1fr 210px 1fr; align-items: center; gap: 0; }
.route-step__card {
    grid-column: 1;
    position: relative;
    padding: clamp(22px, 2.4vw, 34px);
    border: 1px solid var(--line);
    border-radius: 4px;
    background: linear-gradient(150deg, rgba(14, 26, 44, 0.92), rgba(8, 14, 24, 0.92));
    transition: border-color 0.6s var(--ease), box-shadow 0.6s var(--ease),
                transform 0.6s var(--ease), background 0.6s;
}
.route-step:nth-child(even) .route-step__card { grid-column: 3; }

.route-step__card::before {
    /* corner brackets — the panel reads as a station display */
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid transparent;
    border-radius: 2px;
    background:
        linear-gradient(var(--teal), var(--teal)) left top / 18px 1px no-repeat,
        linear-gradient(var(--teal), var(--teal)) left top / 1px 18px no-repeat,
        linear-gradient(var(--teal), var(--teal)) right bottom / 18px 1px no-repeat,
        linear-gradient(var(--teal), var(--teal)) right bottom / 1px 18px no-repeat;
    opacity: 0;
    transition: opacity 0.6s var(--ease);
    pointer-events: none;
}

.route-step.is-here .route-step__card,
.route-step__card:hover {
    border-color: rgba(69, 224, 208, 0.75);
    box-shadow: 0 0 0 1px rgba(69, 224, 208, 0.18),
                0 30px 80px -40px rgba(46, 196, 182, 0.95),
                inset 0 0 60px -30px rgba(46, 196, 182, 0.5);
    transform: translateY(-4px);
    background: linear-gradient(150deg, rgba(18, 40, 62, 0.95), rgba(9, 17, 29, 0.95));
}
.route-step.is-here .route-step__card::before,
.route-step__card:hover::before { opacity: 1; }

.route-step__num {
    font-family: var(--display);
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.35);
    margin-bottom: 10px;
    transition: -webkit-text-stroke-color 0.5s, color 0.5s;
}
.route-step.is-here .route-step__num { -webkit-text-stroke-color: var(--teal-bright); color: rgba(69, 224, 208, 0.12); }

.route-step__card h3 {
    font-family: var(--body);
    font-size: clamp(19px, 2vw, 27px);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    margin-bottom: 12px;
}
.route-step__card p { color: var(--fg-soft); font-size: 15.5px; }

/* the extra copy only unfolds when the car parks at this station */
.route-step__more {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.7s var(--ease), opacity 0.5s ease 0.15s;
}
.route-step.is-open .route-step__more { grid-template-rows: 1fr; opacity: 1; }
.route-step__more > div { overflow: hidden; }
.route-step__more ul { list-style: none; margin-top: 14px; display: grid; gap: 7px; }
.route-step__more li {
    position: relative;
    padding-left: 20px;
    font-size: 14.5px;
    color: var(--fg-soft);
}
.route-step__more li::before {
    content: '';
    position: absolute;
    left: 0; top: 10px;
    width: 9px; height: 1px;
    background: var(--teal);
}

/* the station marker on the road */
.route-step__pin {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: #05070b;
    position: relative;
    transition: border-color 0.5s, box-shadow 0.5s, transform 0.5s var(--ease);
}
.route-step__pin::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--teal-bright);
    opacity: 0;
    transition: opacity 0.5s;
}
.route-step.is-here .route-step__pin {
    border-color: var(--teal-bright);
    box-shadow: 0 0 0 6px rgba(46, 196, 182, 0.14), 0 0 26px rgba(69, 224, 208, 0.7);
    transform: scale(1.15);
}
.route-step.is-here .route-step__pin::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Warum AVL
   -------------------------------------------------------------------------- */

/* Einleitungstexte laufen untereinander, nicht nebeneinander. */
.intro-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 78ch;
}
.intro-stack .lede { margin-bottom: 0; }

.warum-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(38px, 5.5vw, 84px);
    align-items: center;
}

/* framed photograph with a teal edge-light and a slow parallax drift */
.photo-frame {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    isolation: isolate;
}
.photo-frame img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 1.4s var(--ease), filter 1.4s var(--ease);
    filter: saturate(0.9) contrast(1.06);
}
.photo-frame:hover img { transform: scale(1); filter: saturate(1.08) contrast(1.1); }
.photo-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(200deg, rgba(46, 196, 182, 0.16), transparent 45%),
        linear-gradient(0deg, rgba(5, 7, 11, 0.75), transparent 55%);
    pointer-events: none;
}
.photo-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(69, 224, 208, 0.45);
    border-radius: 6px;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 0 60px -24px rgba(69, 224, 208, 0.8);
}
.photo-frame--tall img { aspect-ratio: 3 / 4; }

.photo-frame__tag {
    position: absolute;
    left: 18px; bottom: 16px;
    z-index: 3;
    font-family: var(--body);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.check-list { list-style: none; display: grid; gap: 2px; }
.check-list li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 14px;
    align-items: start;
    padding: 15px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 16px;
    color: var(--fg-soft);
}
.check-list li:first-child { border-top: 1px solid var(--line-soft); }
.check-list svg { width: 19px; height: 19px; color: var(--teal); margin-top: 3px; }

/* --------------------------------------------------------------------------
   Standorte
   -------------------------------------------------------------------------- */

.standort-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.standort {
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(170deg, rgba(22, 48, 92, 0.45), rgba(10, 18, 32, 0.72));
    display: flex;
    flex-direction: column;
    transition: transform 0.5s var(--ease), border-color 0.4s;
}
.standort:hover { transform: translateY(-5px); border-color: rgba(46, 196, 182, 0.5); }
.standort__head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    font-family: var(--body);
    font-size: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    color: #fff;
}
.standort__head small {
    font-family: var(--body);
    font-weight: 400;
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal);
}

.standort__photo { aspect-ratio: 4 / 3; overflow: hidden; }
.standort__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.map-slot {
    position: relative;
    aspect-ratio: 4 / 3;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.028) 0 12px, transparent 12px 24px),
        var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}
.map-slot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-slot__ask { max-width: 260px; }
.map-slot__ask p { font-size: 12.5px; line-height: 1.6; color: var(--fg-muted); margin-bottom: 14px; }

.standort__body { padding: 22px; display: grid; gap: 12px; }
.standort__row {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
    font-size: 15px;
    color: var(--fg-soft);
}
.standort__row svg { width: 16px; height: 16px; color: var(--teal); margin-top: 4px; }
.standort__row a { text-decoration: none; transition: color 0.3s; }
.standort__row a:hover { color: var(--teal); }
.standort__hours { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.standort__hours h4 {
    font-family: var(--body);
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 6px;
}
.standort__hours p { font-size: 15px; color: var(--fg-soft); }

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */

.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.team-card {
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(170deg, rgba(22, 48, 92, 0.38), rgba(10, 18, 32, 0.7));
    transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.5s;
}
.team-card:hover {
    transform: translateY(-6px);
    border-color: rgba(46, 196, 182, 0.5);
    box-shadow: 0 30px 70px -40px rgba(46, 196, 182, 0.8);
}
.team-card__photo { position: relative; overflow: hidden; }
.team-card__photo img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(0.55) contrast(1.05);
    transition: filter 0.6s var(--ease), transform 0.9s var(--ease);
}
.team-card:hover .team-card__photo img { filter: grayscale(0) contrast(1.05); transform: scale(1.04); }
.team-card__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 14, 24, 0.9), transparent 45%);
    pointer-events: none;
}
.team-card__body { padding: 20px 22px 24px; }
.team-card__body h3 {
    font-family: var(--body);
    font-size: 21px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    margin-bottom: 2px;
}
.team-card__role {
    font-family: var(--body);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 14px;
}
.team-card dl { display: grid; gap: 14px; margin: 0; }
.team-card dt {
    /* Die Beschriftungen sind ganze Saetze wie auf avl-group.de, deshalb
       keine Versalien und keine Sperrung. */
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--teal);
    margin-bottom: 2px;
}
.team-card dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--fg); }

/* --------------------------------------------------------------------------
   Video
   -------------------------------------------------------------------------- */

.video-block {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #000;
}
.video-block video { width: 100%; height: auto; display: block; }
.video-block::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    box-shadow: inset 0 0 90px -40px rgba(46, 196, 182, 0.55);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { display: grid; gap: 12px; max-width: 980px; margin: 0 auto; }
.faq-item {
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(10, 18, 32, 0.6);
    transition: border-color 0.4s;
}
.faq-item.is-open { border-color: rgba(46, 196, 182, 0.5); }
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: linear-gradient(120deg, rgba(27, 63, 126, 0.5), rgba(22, 48, 92, 0.3));
    border: 0;
    color: #fff;
    text-align: left;
    cursor: pointer;
    font-family: var(--body);
    font-size: clamp(15px, 1.5vw, 20px);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: background 0.4s;
}
.faq-q:hover { background: linear-gradient(120deg, rgba(27, 63, 126, 0.8), rgba(18, 160, 166, 0.32)); }
.faq-q svg { width: 16px; height: 16px; flex: none; color: var(--teal); transition: transform 0.45s var(--ease); }
.faq-item.is-open .faq-q svg { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a-inner { padding: 20px 24px 24px; color: var(--fg-soft); font-size: 15.5px; }
.faq-a-inner ul { list-style: none; margin-top: 10px; display: grid; gap: 6px; }
.faq-a-inner ul li { padding-left: 18px; position: relative; }
.faq-a-inner ul li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 1px; background: var(--teal); }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    padding: clamp(38px, 4.6vw, 62px);
    background: linear-gradient(115deg, var(--blue-mid), var(--blue), var(--teal-deep));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.cta-band::after {
    content: '';
    position: absolute;
    top: -60%; right: -10%;
    width: 60%; height: 220%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent);
    pointer-events: none;
}
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { margin-bottom: 8px; }
.cta-band p {
    font-family: var(--body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.88);
}
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-band .btn--ghost { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06); }
.cta-band .btn--ghost:hover { background: #fff; color: var(--blue); border-color: #fff; }
.cta-band .btn--primary { background: #fff; color: var(--blue-deep); }
.cta-band .btn--primary:hover { background: #eafffc; }

/* --------------------------------------------------------------------------
   Prose + cards
   -------------------------------------------------------------------------- */

.prose { max-width: 820px; }
.prose h2 {
    font-family: var(--display);
    font-size: clamp(22px, 2.4vw, 32px);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 50px 0 16px;
    color: #fff;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
    font-family: var(--body);
    font-size: 19px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal);
    margin: 30px 0 10px;
}
.prose h4 { font-size: 16px; font-weight: 600; color: #fff; margin: 22px 0 8px; }
.prose p, .prose li { color: var(--fg-soft); }
.prose ul, .prose ol { margin: 12px 0 12px 20px; display: grid; gap: 7px; }
.prose a { color: var(--teal); text-decoration: none; border-bottom: 1px solid rgba(46,196,182,0.4); word-break: break-word; }
.prose a:hover { color: var(--teal-bright); }
.prose hr { border: 0; border-top: 1px solid var(--line-soft); margin: 42px 0; }
.prose .note {
    border-left: 2px solid var(--teal);
    background: rgba(46, 196, 182, 0.06);
    padding: 16px 20px;
    margin: 22px 0;
    font-size: 15px;
    color: var(--fg-soft);
}
.prose .upper { text-transform: none; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.info-card {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 26px;
    background: linear-gradient(165deg, rgba(22, 48, 92, 0.38), rgba(10, 18, 32, 0.6));
    transition: transform 0.5s var(--ease), border-color 0.4s;
}
.info-card:hover { transform: translateY(-4px); border-color: rgba(46, 196, 182, 0.45); }
.info-card h3 {
    font-family: var(--body);
    font-size: 19px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 10px;
}
.info-card p { font-size: 15px; color: var(--fg-soft); }
.info-card ul { list-style: none; display: grid; gap: 6px; margin-top: 10px; }
.info-card ul li { font-size: 14.5px; color: var(--fg-soft); padding-left: 16px; position: relative; }
.info-card ul li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 1px; background: var(--teal); }

/* course card with a lead-in link */
.course-card { display: flex; flex-direction: column; }
.course-card .go {
    margin-top: auto;
    padding-top: 16px;
    font-family: var(--body);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s var(--ease), color 0.3s;
}
.course-card:hover .go { gap: 14px; color: var(--teal-bright); }
.course-card .go svg { width: 14px; height: 14px; }

/* class detail table */
.class-table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.class-table th, .class-table td {
    text-align: left;
    padding: 15px 16px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 15px;
    color: var(--fg-soft);
    vertical-align: top;
}
.class-table th {
    font-family: var(--body);
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal);
    white-space: nowrap;
    width: 130px;
}
.class-table tr:hover td { background: rgba(255, 255, 255, 0.02); }
.class-table ul { list-style: none; display: grid; gap: 5px; }
.class-table ul li { position: relative; padding-left: 16px; }
.class-table ul li::before { content: ''; position: absolute; left: 0; top: 12px; width: 7px; height: 1px; background: var(--teal); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
    font-family: var(--body);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: #fff;
    font-family: var(--body);
    font-size: 15px;
    transition: border-color 0.3s, background 0.3s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--teal); background: rgba(46, 196, 182, 0.06); }
.field select option { background: var(--surface); }
.consent {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
    font-size: 13.5px;
    color: var(--fg-muted);
    line-height: 1.6;
}
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--teal); }
.consent label {
    font-family: var(--body);
    font-size: 13.5px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fg-muted);
}
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: 18px; font-size: 13.5px; color: var(--fg-muted); }
.form-status { margin-top: 16px; font-size: 15px; }
.form-status.is-ok { color: var(--teal-bright); }
.form-status.is-err { color: #ff8080; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    position: relative;
    z-index: 20;
    padding: clamp(56px, 6.5vw, 92px) 0 32px;
    background:
        radial-gradient(90% 120% at 75% 10%, rgba(18, 160, 166, 0.26), transparent 60%),
        linear-gradient(160deg, var(--blue-mid), var(--blue-deep));
    border-top: 1px solid var(--line-soft);
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 54px); }
.footer-brand img { height: 64px; width: auto; margin-bottom: 18px; }
.footer-brand .legal-name {
    font-family: var(--body);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: #fff;
}
.footer-brand p { font-size: 14.5px; color: var(--fg-soft); max-width: 340px; }

.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-soft);
    transition: color 0.3s, border-color 0.3s, transform 0.4s var(--ease), background 0.3s;
}
.socials a:hover { color: #04121a; background: var(--teal); border-color: var(--teal); transform: translateY(-3px); }
.socials svg { width: 17px; height: 17px; }

.footer-col h4 {
    font-family: var(--body);
    font-size: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: #fff;
}
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { text-decoration: none; font-size: 14.5px; color: var(--fg-soft); transition: color 0.3s, padding-left 0.3s; }
.footer-col a:hover { color: var(--teal-bright); padding-left: 5px; }

.footer-base {
    margin-top: clamp(38px, 4.6vw, 60px);
    padding-top: 24px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: var(--fg-muted);
}
.footer-base a { text-decoration: none; }
.footer-base a:hover { color: var(--teal); }

/* --------------------------------------------------------------------------
   Cursor
   -------------------------------------------------------------------------- */

.cursor-inner, .cursor-outer { display: none; }

@media (hover: hover) and (pointer: fine) {
    body.has-cursor, body.has-cursor * { cursor: none !important; }
    .cursor-inner {
        display: block;
        position: fixed; top: 0; left: 0;
        width: 6px; height: 6px;
        border: 2px solid #fff;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 9999;
    }
    .cursor-outer {
        display: block;
        position: fixed; top: 0; left: 0;
        width: 40px; height: 40px;
        border: 1.5px solid rgba(46, 196, 182, 0.75);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 9998;
        transition: width 0.3s, height 0.3s, background 0.3s, border-color 0.3s;
    }
    body.cursor-hot .cursor-outer {
        width: 62px; height: 62px;
        background: rgba(46, 196, 182, 0.14);
        border-color: var(--teal-bright);
    }
}

/* --------------------------------------------------------------------------
   Typografie-Regeln (Stand: Überarbeitung)

   Nur echte Haupttitel tragen die Markenschrift Exima. Alles andere —
   Fließtext, Knöpfe, Navigation, Karten, Formulare, FAQ, Öffnungszeiten —
   läuft in Outfit. Haupttitel sind bewusst klein gehalten, damit sie
   möglichst auf einer Zeile stehen.
   -------------------------------------------------------------------------- */

/* --- Haupttitel: kleiner, damit sie in eine Zeile passen ---------------- */

/* Kein erzwungenes nowrap: das wuerde auf mittleren Schirmen ueberlaufen.
   Die Groesse ist so gewaehlt, dass die Titel von selbst einzeilig bleiben. */
.display { letter-spacing: 0.005em; line-height: 1.1; text-wrap: balance; }

h1.display { font-size: clamp(24px, 2.7vw, 38px); }
h2.display { font-size: clamp(22px, 2.5vw, 35px); }
h3.display { font-size: clamp(17px, 1.6vw, 22px); }
.prose h2  { font-size: clamp(21px, 2.3vw, 31px); letter-spacing: 0.005em; }

/* Die Zeile darf schmaler werden, bevor sie umbricht. */
.section-head .display,
.cta-band .display { max-width: none; }

/* --- Fließtext: einheitlich weiß, eine Schrift -------------------------- */

body,
p, li, dd, dt, td, th, label, input, select, textarea, button, small, figcaption {
    font-family: var(--body);
}

body { color: var(--fg); }

p, li, dd,
.lede,
.klasse-row__body p,
.route-step__card p,
.standort__hours p,
.standort p,
.info-card p,
.course-card p,
.team-card dd,
.faq-a p,
.prose p,
.prose li,
.job-card p,
.cta-band p {
    color: var(--fg);
}

/* Labels und Kleinschrift bleiben leicht zurückgenommen, aber nicht grau-matt. */
.field-hint,
.standort__hours h4,
.crumbs,
.scroll-hint,
.site-footer p,
.footer-legal {
    color: var(--fg-soft);
}

/* --- Untertitel und Karten: Outfit, dafür etwas kräftiger --------------- */

.eyebrow            { font-weight: 600; letter-spacing: 0.22em; }
.slide-kicker       { font-weight: 400; letter-spacing: 0.01em; }
.btn                { font-weight: 600; letter-spacing: 0.02em; text-transform: none; font-size: 15px; }
.main-nav a         { font-weight: 500; letter-spacing: 0.02em; text-transform: none; font-size: 15px; }
.mobile-nav a       { font-weight: 500; letter-spacing: 0.01em; text-transform: none; }
.book-bar__text     { font-weight: 500; letter-spacing: 0.01em; text-transform: none; }
.ticker__item       { font-weight: 500; letter-spacing: 0.04em; }
.crumbs             { font-weight: 500; letter-spacing: 0.08em; }
.scroll-hint        { font-weight: 500; letter-spacing: 0.16em; }
.klasse-row__body h3,
.route-step__card h3,
.team-card__body h3,
.info-card h3,
.standort__head,
.prose h3,
.footer-col h4,
.class-table th     { font-weight: 600; letter-spacing: 0.01em; text-transform: none; }
.klasse-row__body .sub,
.team-card__role,
.standort__hours h4,
.photo-frame__tag,
.course-card .go,
.field label        { font-weight: 600; letter-spacing: 0.08em; }
.faq-q              { font-weight: 500; letter-spacing: 0.005em; text-transform: none; }
.cta-band p         { font-weight: 400; letter-spacing: 0; text-transform: none; }
.footer-brand .legal-name { font-weight: 600; letter-spacing: 0.02em; text-transform: none; }

/* Formularfelder komplett in der Fließtextschrift. */
.field input,
.field select,
.field textarea     { font-family: var(--body); font-weight: 400; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
    .main-nav a { padding: 12px 10px; font-size: 13px; }
    .header-cta { margin-left: 10px; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1180px) {
    :root { --gutter: 40px; }
    .standort-grid { grid-template-columns: 1fr 1fr; }
    .grid-line:nth-child(2), .grid-line:nth-child(4) { display: none; }
    .slide { left: var(--gutter) !important; width: auto !important; max-width: min(50ch, 52vw) !important; right: auto; }
    #slide-1 .slide-title, #slide-2 .slide-title { margin-left: 0; }
    #slide-1 .desc-row { flex-direction: column; gap: 14px; }
    #slide-1 .col-1, #slide-1 .col-2, #slide-2 .slide-desc, .slide .slide-desc {
        position: static !important; margin-left: 0 !important; width: 100% !important; max-width: 100% !important;
    }
}

@media (max-width: 1060px) {
    .main-nav, .header-cta { display: none; }
    .nav-toggle { display: flex; }
}

@media (max-width: 960px) {
    .warum-layout { grid-template-columns: 1fr; }
    .standort-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .cinema-spacer { height: 480vh; }
    .grid-lines { left: 20px; right: 20px; }
    .slide { max-width: min(46ch, 78vw) !important; bottom: 16%; }

    .klasse-row { grid-template-columns: clamp(96px, 20vw, 150px) 1fr; }
    .klasse-row__go { display: none; }

    /* the road moves to the left edge and every station lines up beside it */
    .route__road { left: 26px; transform: none; width: 84px; }
    .route-step { grid-template-columns: 84px 1fr; }
    .route-step__card,
    .route-step:nth-child(even) .route-step__card { grid-column: 2; }
    .route-step__pin { grid-column: 1; justify-self: center; }
    .route__car { width: 66px; margin: -47px 0 0 -33px; }
}

@media (max-width: 620px) {
    :root { --gutter: 20px; }
    body { font-size: 15px; }
    /* long labels wrap rather than pushing past the screen edge */
    .btn { white-space: normal; text-align: center; padding: 14px 22px; }
    .form-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
    .cta-band { flex-direction: column; align-items: flex-start; }
    .fleet figure { width: 78vw; }
    .grid-lines { display: none; }
    .cinema-spacer { height: 420vh; }
    .book-bar { gap: 10px; padding: 10px 10px 10px 18px; bottom: 12px; }
    .book-bar__text { font-size: 12px; }
    .book-bar__text small { display: none; }
    .klasse-row { grid-template-columns: 1fr; gap: 12px; }
    .klasse-row__letter { font-size: 84px; }
    .class-table th { width: auto; }
    .class-table th, .class-table td { display: block; padding: 8px 0; border: 0; }
    .class-table tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
}

/* --------------------------------------------------------------------------
   Handy und Tablet: alles linksbündig, lange Titelwörter dürfen trennen
   -------------------------------------------------------------------------- */

/* Ein einzelnes langes Wort wie "Motorradführerschein" passt auf schmalen
   Schirmen nicht in eine Zeile - dort darf getrennt werden. */
.display, .slide-title, .prose h2 {
    overflow-wrap: break-word;
    hyphens: auto;
}

@media (max-width: 900px) {
    /* Auf dem Handy steht alles links, nichts mittig. */
    .section-head--center,
    .eyebrow--center,
    .cta-band {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
    }
    .eyebrow--center { justify-content: flex-start; }
    .cta-band .btn-row { justify-content: flex-start; }
    .faq { margin-left: 0; margin-right: 0; }
}

/* --------------------------------------------------------------------------
   Feinschliff Kleinschrift

   Outfit 300 wirkt auf dem dunklen Grund dünn und flimmert an den Kanten.
   Der Fließtext läuft deshalb in 400, ist eine Spur größer und etwas enger
   gesetzt. Die kleinen Beschriftungen sind kräftiger und weniger gesperrt —
   sie sollen ruhig wirken, nicht auseinandergezogen.
   -------------------------------------------------------------------------- */

body {
    font-weight: 400;
    font-size: 17px;
    line-height: 1.62;
    letter-spacing: 0.004em;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}

p, li, dd, td, .lede { font-weight: 400; }

.lede {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.55;
    letter-spacing: 0;
}

/* Kleinteilige Beschriftungen: lieber kräftig und kompakt als dünn und weit. */
.eyebrow {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
}
.crumbs {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
}
.scroll-hint {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
}
.klasse-row__body .sub,
.team-card__role,
.standort__hours h4,
.photo-frame__tag,
.course-card .go,
.field label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.team-card dt { font-size: 13px; }
.klasse-list li,
.tag {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.class-table th {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.class-table td { font-size: 15px; }

/* Karten- und Abschnittstexte etwas größer, damit sie zum Fließtext passen. */
.klasse-row__body p,
.route-step__card p,
.info-card p,
.course-card p,
.standort p,
.team-card dd,
.faq-a p,
.job-card p { font-size: 15.5px; line-height: 1.62; }

.standort__hours p { font-size: 15px; line-height: 1.75; }

/* Fußzeile: gleiche Ruhe wie im Rest der Seite. */
.site-footer p,
.footer-col a,
.footer-legal { font-size: 14.5px; font-weight: 400; letter-spacing: 0; }
.footer-col h4 { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; }

/* Formular: Eingaben so groß wie der Fließtext, damit nichts zusammenfällt. */
.field input,
.field select,
.field textarea { font-size: 16px; font-weight: 400; }
.field-hint { font-size: 13.5px; }

@media (max-width: 620px) {
    body { font-size: 16px; }
    .eyebrow { font-size: 12px; letter-spacing: 0.13em; }
}

/* --------------------------------------------------------------------------
   Klassen-Icons

   Weisse Fahrzeug-Piktogramme mit Transparenz, direkt aus dem Markenmaterial.
   Auf dem dunklen Grund stehen sie ohne Umfaerbung; beim Ueberfahren einer
   Klassenzeile ziehen sie leicht an.
   -------------------------------------------------------------------------- */

.klasse-icon {
    display: block;
    height: 30px;
    /* Gespanne sind sehr breit; die Deckelung haelt die Reihe in einer Zeile. */
    max-width: 84px;
    width: auto;
    object-fit: contain;
    opacity: 0.92;
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}

/* Icon-Spalte in den Klassentabellen */
.class-table th { vertical-align: top; }
.class-table__key {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.class-table__key .klasse-icon { height: 44px; max-width: 112px; }

/* Icon-Leiste unter jeder Klasse auf der Startseite */
.klasse-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 18px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}
.klasse-icons figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.klasse-icons figcaption {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--fg-soft);
    text-transform: uppercase;
}
.klasse-row:hover .klasse-icon { opacity: 1; transform: translateY(-2px); }

/* Grosses Leit-Icon neben der Ueberschrift einer Klasse */
.klasse-hero-icon {
    height: clamp(46px, 5vw, 76px);
    width: auto;
    opacity: 0.95;
    margin-bottom: 18px;
}

@media (max-width: 620px) {
    .klasse-icons { gap: 14px; }
    .klasse-icon { height: 26px; max-width: 70px; }
    .class-table__key .klasse-icon { height: 32px; }
}

/* --------------------------------------------------------------------------
   Online-Kalender (Kontaktseite)

   Das Buchungswidget bringt seine eigene Innenhöhe mit; der Rahmen sorgt nur
   dafür, dass es sich wie der Rest der Seite anfühlt, statt als Fremdkörper
   auf weißem Grund zu sitzen.
   -------------------------------------------------------------------------- */
.booking-embed {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #fff;
}
.booking-embed iframe { display: block; width: 100%; }

/* --------------------------------------------------------------------------
   Mehrsprachigkeit: Sprachumschalter, arabische Schrift, RTL-Layout

   Deutsch und Englisch sind lateinisch und laufen unveraendert in der
   bestehenden Markenschrift. Arabisch braucht eine eigene Schrift (Cairo,
   lokal gehostet, keine externe Anfrage) und einen rechts-nach-links-Layer.

   Was bewusst NICHT gespiegelt wird: die 3D-Hero-Animation (Kamerafahrt und
   die Position der vier Slide-Texte) und die Straßengrafik bei "Dein Weg".
   Beides sind bewegte, handjustierte Kompositionen ohne eigene Lese-
   richtung; sie liefen in jeder Sprache pixelgenau gleich gut. Text darin
   richtet sich ueber dir="rtl" trotzdem automatisch rechtsbuendig aus.
   -------------------------------------------------------------------------- */

/* ---- Cairo: arabische Hausschrift, als Variable-Font lokal eingebunden --- */

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/cairo-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
                   U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/cairo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/cairo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

html[lang="ar"] {
    --display: 'Cairo', 'Outfit', 'Segoe UI', sans-serif;
    --body: 'Cairo', 'Outfit', 'Segoe UI', sans-serif;
}
/* Cairo läuft nie kursiv-schräg wie Exima; Titel bleiben in normaler Stärke,
   nur kräftiger, damit sie als Marken-Ueberschrift erkennbar bleiben. */
html[lang="ar"] .display,
html[lang="ar"] .slide-title,
html[lang="ar"] .klasse-row__letter,
html[lang="ar"] .route-step__num {
    font-weight: 800;
    letter-spacing: 0;
}
html[lang="ar"] .eyebrow,
html[lang="ar"] .crumbs,
html[lang="ar"] .btn,
html[lang="ar"] .main-nav a,
html[lang="ar"] .ticker__item {
    letter-spacing: 0;
}

/* ---- Sprachumschalter ---------------------------------------------------- */

.lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 6px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    flex: none;
}
.lang-switch a {
    display: block;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--fg-muted);
    transition: color 0.3s, background 0.3s;
    white-space: nowrap;
}
.lang-switch a:hover { color: #fff; }
.lang-switch a.is-active { color: #04121a; background: var(--teal); }

/* mobile drawer: centered, a little larger, sits above the page links */
.mobile-nav .lang-switch {
    margin: 0 auto 22px;
}
.mobile-nav .lang-switch a { padding: 8px 16px; font-size: 14px; }

@media (max-width: 1060px) {
    .site-header .lang-switch { display: none; }   /* the drawer copy takes over below the toggle breakpoint */
}

/* --------------------------------------------------------------------------
   Rechts-nach-links (Arabisch)
   -------------------------------------------------------------------------- */

[dir="rtl"] .main-nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .main-nav a::after { transform-origin: right; }
[dir="rtl"] .nav-item__panel { left: auto; right: 0; }
[dir="rtl"] .header-cta { margin-left: 0; margin-right: 18px; }
[dir="rtl"] .nav-toggle { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mobile-nav a.is-sub { padding-left: 0; padding-right: 20px; }

[dir="rtl"] .route-step__more li { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .route-step__more li::before { left: auto; right: 0; }

[dir="rtl"] .faq-q { text-align: right; }
[dir="rtl"] .faq-a-inner ul li { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .faq-a-inner ul li::before { left: auto; right: 0; }

[dir="rtl"] .prose .note { border-left: none; border-right: 2px solid var(--teal); }
[dir="rtl"] .info-card ul li { padding-left: 0; padding-right: 16px; }
[dir="rtl"] .info-card ul li::before { left: auto; right: 0; }

[dir="rtl"] .class-table th,
[dir="rtl"] .class-table td { text-align: right; }
[dir="rtl"] .class-table ul li { padding-left: 0; padding-right: 16px; }
[dir="rtl"] .class-table ul li::before { left: auto; right: 0; }

[dir="rtl"] .footer-col a:hover { padding-left: 0; padding-right: 5px; }

/* Pfeile, die in Leserichtung zeigen ("weiter"), drehen mit um. Kapitel-
   Chevrons (FAQ, auf/zu) bleiben unveraendert, die klappen vertikal. */
[dir="rtl"] .btn svg,
[dir="rtl"] .klasse-row__go svg,
[dir="rtl"] .course-card .go svg {
    transform: scaleX(-1);
}

@media (max-width: 1280px) {
    [dir="rtl"] .header-cta { margin-right: 10px; margin-left: 0; }
}

@media (max-width: 900px) {
    [dir="rtl"] .section-head--center,
    [dir="rtl"] .eyebrow--center,
    [dir="rtl"] .cta-band {
        text-align: right;
    }
}