/* ==========================================================================
   Fahrschul-App V5.6.5 — premium layer (loaded after style.css, themes.css
   and site-v14.css on every public page).
   1 palettes · 2 base · 3 top bar · 4 header (menu mode, all widths) ·
   5 hero · 6 components · 7 light mode polish · 8 dark mode · 9 RTL · 10 motion
   The one-row desktop header lives in site-v565-desktop.css, which every page
   links with a language-specific min-width media query.
   ========================================================================== */

/* ---------- 1. Palettes: deep, saturated darks and vivid accents ---------- */
html[data-theme] {
  --v5-ink: #0b0f17;
  --v5-white: #ffffff;
  --v5-text-on-dark: #f3f6fb;
  --v5-muted-on-dark: #c9d2e1;
  --c-light: #f7f9fc;
  --c-light-2: #c9d2e1;
  --c-ink: #0b1220;
  --c-ink-2: #3b4556;
  --topbar-h: 30px;
  --hdr-gap: 10px;
  --hdr-card-h: 62px;
  --hdr-inset: clamp(10px, 2.4vw, 46px);
  --header-total: calc(var(--topbar-h) + var(--hdr-gap) + var(--hdr-card-h) + var(--hdr-gap));
  --header-h: var(--header-total);
  --btn-radius: 10px;
}
html[data-theme="1"] {
  --c-graphite-950: #05070c; --c-graphite-900: #0a0f18; --c-graphite-800: #0e1522; --c-graphite-700: #152033; --c-graphite-600: #1e2c44; --c-graphite-500: #2d3d59;
  --c-terra-300: #ffe08a; --c-terra-400: #ffd240; --c-terra-500: #ffc414; --c-terra-600: #f0ae00; --c-terra-700: #b98400;
  --c-cream-50: #fffdf7; --c-cream-100: #f7f1e3; --c-sand-200: #ead9b6;
  --pv-dark-rgb: 10 15 24; --v5-accent-ink-light: #7a5700; --accent-on: #0b0f17; --v5-glow: 255 196 20;
}
html[data-theme="2"] {
  --c-graphite-950: #0b0706; --c-graphite-900: #120c0a; --c-graphite-800: #1a110d; --c-graphite-700: #261912; --c-graphite-600: #352419; --c-graphite-500: #4b3425;
  --c-terra-300: #ffb988; --c-terra-400: #ff9147; --c-terra-500: #ff7a1f; --c-terra-600: #e66100; --c-terra-700: #b44b00;
  --c-cream-50: #fffaf6; --c-cream-100: #f8ece2; --c-sand-200: #efd6c2;
  --pv-dark-rgb: 18 12 10; --v5-accent-ink-light: #8f3c00; --accent-on: #0b0f17; --v5-glow: 255 122 31;
}
html[data-theme="3"] {
  --c-graphite-950: #0c0708; --c-graphite-900: #140c0e; --c-graphite-800: #1c1114; --c-graphite-700: #29181c; --c-graphite-600: #382227; --c-graphite-500: #4e3137;
  --c-terra-300: #ffa493; --c-terra-400: #ff7d63; --c-terra-500: #ff5f3f; --c-terra-600: #e84626; --c-terra-700: #b3331a;
  --c-cream-50: #fffaf8; --c-cream-100: #f9ece8; --c-sand-200: #efd3cb;
  --pv-dark-rgb: 20 12 14; --v5-accent-ink-light: #9a2c16; --accent-on: #0b0f17; --v5-glow: 255 95 63;
}
html[data-theme="4"] {
  --c-graphite-950: #0b0608; --c-graphite-900: #130a0e; --c-graphite-800: #1b0f15; --c-graphite-700: #28151e; --c-graphite-600: #371e2a; --c-graphite-500: #4d2b3b;
  --c-terra-300: #ff97a8; --c-terra-400: #ff5f79; --c-terra-500: #f23a5a; --c-terra-600: #d61f43; --c-terra-700: #a51333;
  --c-cream-50: #fffafb; --c-cream-100: #f9ebef; --c-sand-200: #efd1d9;
  --pv-dark-rgb: 19 10 14; --v5-accent-ink-light: #a51333; --accent-on: #ffffff; --v5-glow: 242 58 90;
}
html[data-theme="5"] {
  --c-graphite-950: #040810; --c-graphite-900: #08101d; --c-graphite-800: #0c1628; --c-graphite-700: #122139; --c-graphite-600: #1a2e4f; --c-graphite-500: #273f69;
  --c-terra-300: #8fc2ff; --c-terra-400: #5aa2ff; --c-terra-500: #2f86ff; --c-terra-600: #1669e6; --c-terra-700: #0f4fb3;
  --c-cream-50: #f9fbff; --c-cream-100: #eaf1fb; --c-sand-200: #d3e0f3;
  --pv-dark-rgb: 8 16 29; --v5-accent-ink-light: #0f4fb3; --accent-on: #ffffff; --v5-glow: 47 134 255;
}
html[data-theme="6"] {
  --c-graphite-950: #030a0d; --c-graphite-900: #061218; --c-graphite-800: #091a22; --c-graphite-700: #0e2531; --c-graphite-600: #153343; --c-graphite-500: #1f465b;
  --c-terra-300: #8ef0ff; --c-terra-400: #45dcf7; --c-terra-500: #12c4ea; --c-terra-600: #00a4cc; --c-terra-700: #007a99;
  --c-cream-50: #f7fdff; --c-cream-100: #e8f5f8; --c-sand-200: #cfe8ee;
  --pv-dark-rgb: 6 18 24; --v5-accent-ink-light: #00627b; --accent-on: #0b0f17; --v5-glow: 18 196 234;
}
html[data-theme="7"] {
  --c-graphite-950: #030b0a; --c-graphite-900: #061412; --c-graphite-800: #0a1c19; --c-graphite-700: #0f2824; --c-graphite-600: #173731; --c-graphite-500: #224a42;
  --c-terra-300: #8af0dc; --c-terra-400: #3fdcbc; --c-terra-500: #14c4a2; --c-terra-600: #00a386; --c-terra-700: #007a64;
  --c-cream-50: #f7fdfb; --c-cream-100: #e8f6f1; --c-sand-200: #cfe9e0;
  --pv-dark-rgb: 6 20 18; --v5-accent-ink-light: #006352; --accent-on: #0b0f17; --v5-glow: 20 196 162;
}
html[data-theme="8"] {
  --c-graphite-950: #040a05; --c-graphite-900: #08120a; --c-graphite-800: #0c1a0f; --c-graphite-700: #122617; --c-graphite-600: #1a3521; --c-graphite-500: #26492f;
  --c-terra-300: #a4f59a; --c-terra-400: #6fe35f; --c-terra-500: #46cc36; --c-terra-600: #2fae20; --c-terra-700: #218317;
  --c-cream-50: #f9fdf6; --c-cream-100: #edf6e8; --c-sand-200: #d6eacb;
  --pv-dark-rgb: 8 18 10; --v5-accent-ink-light: #1b6a13; --accent-on: #0b0f17; --v5-glow: 70 204 54;
}
html[data-theme="9"] {
  --c-graphite-950: #07050d; --c-graphite-900: #0e0a18; --c-graphite-800: #140f22; --c-graphite-700: #1d1631; --c-graphite-600: #291f44; --c-graphite-500: #3a2d5e;
  --c-terra-300: #cdb4ff; --c-terra-400: #a883ff; --c-terra-500: #8b5cff; --c-terra-600: #7040f0; --c-terra-700: #5327c4;
  --c-cream-50: #fbf9ff; --c-cream-100: #f1ecfa; --c-sand-200: #ddd2f1;
  --pv-dark-rgb: 14 10 24; --v5-accent-ink-light: #5327c4; --accent-on: #ffffff; --v5-glow: 139 92 255;
}
html[data-theme="10"] {
  --c-graphite-950: #0b050a; --c-graphite-900: #140912; --c-graphite-800: #1c0d19; --c-graphite-700: #291325; --c-graphite-600: #381b33; --c-graphite-500: #4e2748;
  --c-terra-300: #ffa6dc; --c-terra-400: #ff6cc3; --c-terra-500: #f43fa8; --c-terra-600: #d8228b; --c-terra-700: #a8166b;
  --c-cream-50: #fffafd; --c-cream-100: #f9ebf4; --c-sand-200: #efd0e3;
  --pv-dark-rgb: 20 9 18; --v5-accent-ink-light: #a8166b; --accent-on: #ffffff; --v5-glow: 244 63 168;
}
/* the preview palette of themes.css follows the premium values */
html[data-theme] {
  --preview-accent-300: var(--c-terra-300); --preview-accent-400: var(--c-terra-400); --preview-accent-500: var(--c-terra-500);
  --preview-accent-600: var(--c-terra-600); --preview-accent-700: var(--c-terra-700);
  --preview-dark-950: var(--c-graphite-950); --preview-dark-900: var(--c-graphite-900); --preview-dark-800: var(--c-graphite-800);
  --preview-dark-700: var(--c-graphite-700); --preview-dark-600: var(--c-graphite-600);
  --preview-cream-50: var(--c-cream-50); --preview-cream-100: var(--c-cream-100);
}

/* ---------- 2. Base ---------- */
html[data-theme] { background: var(--c-graphite-900); }
html[data-theme] body { background: var(--c-graphite-900); color: var(--v5-text-on-dark); }
.tone-dark { --bg: var(--c-graphite-800); --bg-raised: var(--c-graphite-700); }
.tone-dark-2 { --bg: var(--c-graphite-700); --bg-raised: var(--c-graphite-600); }
.tone-deep { --bg: var(--c-graphite-950); --bg-raised: var(--c-graphite-800); }
.tone-dark, .tone-dark-2, .tone-deep { --fg: var(--v5-text-on-dark); --fg-2: var(--v5-muted-on-dark); --accent-ink: var(--c-terra-400); --focus: var(--c-terra-300); }
.tone-cream, .tone-warm { --fg: var(--c-ink); --fg-2: var(--c-ink-2); --accent-ink: var(--v5-accent-ink-light); --focus: var(--v5-accent-ink-light); }
html[data-theme] .tone-dark-2 { --accent-ink: var(--c-terra-300); }
html[data-theme] .tone-cream, html[data-theme] .tone-warm { --accent-ink: var(--v5-accent-ink-light); --focus: var(--v5-accent-ink-light); }
html[data-theme] { scroll-padding-top: calc(var(--header-total) + 0.5rem); }
::selection { background: var(--c-terra-400); color: var(--v5-ink); }

/* ---------- 3. Top information bar ---------- */
.topbar {
  position: relative;
  z-index: 2;
  height: var(--topbar-h);
  background: linear-gradient(180deg, rgb(3 5 9 / 0.9), rgb(3 5 9 / 0.72));
  border-bottom: 1px solid color-mix(in srgb, var(--c-terra-500) 22%, transparent);
  color: var(--v5-muted-on-dark);
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.01em;
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
}
.topbar__inner {
  width: min(100% - 2 * var(--hdr-inset), 100rem);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.topbar__info {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
}
.topbar__city {
  color: var(--v5-white);
  font-weight: 650;
  letter-spacing: 0.02em;
}
.topbar__part {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.topbar__part::before {
  content: "·";
  margin-inline: 0.55rem;
  color: var(--c-terra-400);
  font-weight: 800;
}
.topbar__time,
.topbar__temp {
  color: var(--v5-white);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.topbar__date,
.topbar__time,
.topbar__temp { unicode-bidi: isolate; }
.topbar__time,
.topbar__temp { direction: ltr; }
.topbar__wicon {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--c-terra-400);
  stroke-width: 1.9;
}
.topbar__stale {
  color: var(--v5-muted-on-dark);
  font-size: 0.75rem;
  opacity: 0.9;
}
.topbar__mode {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  color: var(--c-terra-400);
  cursor: pointer;
  transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease;
}
.topbar__mode:hover { background: rgb(255 255 255 / 0.1); border-color: color-mix(in srgb, var(--c-terra-400) 60%, transparent); }
.topbar__mode .icon { grid-area: 1 / 1; width: 1rem; height: 1rem; }
.topbar__mode-light { display: none; }
html[data-mode="dark"] .topbar__mode-dark { display: none; }
html[data-mode="dark"] .topbar__mode-light { display: block; }
@media (max-width: 599px) {
  html[data-theme] { --topbar-h: 28px; --hdr-gap: 6px; --hdr-card-h: 58px; }
  .topbar { font-size: 0.75rem; }
  .topbar__part::before { margin-inline: 0.4rem; }
  .topbar__part--date .topbar__date { font-size: 0.72rem; }
}
@media (max-width: 379px) {
  .topbar__part--date { display: none; }
}

/* ---------- 4. Header: floating glass card (menu mode on every width;
   site-v565-desktop.css switches to the one-row desktop header) ---------- */
.site-header {
  position: sticky;
  top: 0;
  height: auto;
  margin-bottom: calc(-1 * var(--header-total));
  pointer-events: none;
  --panel-top: var(--header-total);
}
.site-header > * { pointer-events: auto; }
html[data-theme] .site-header::before,
html.menu-open .site-header::before {
  content: none !important;
  display: none !important;
}
.site-header .header-bar {
  position: relative;
  isolation: isolate;
  width: min(100% - 2 * var(--hdr-inset), 100rem);
  height: var(--hdr-card-h);
  margin: var(--hdr-gap) auto 0;
  padding-inline: clamp(0.75rem, 0.4rem + 1.2vw, 1.4rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 16px;
}
/* glass + gold hairline on a pseudo element: a backdrop-filter on the bar itself would become the
   containing block of the fixed menu panel */
.site-header .header-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0) 60%),
    linear-gradient(180deg, rgb(var(--pv-dark-rgb) / 0.9), rgb(var(--pv-dark-rgb) / 0.82));
  border: 1px solid color-mix(in srgb, var(--c-terra-500) 55%, transparent);
  box-shadow:
    0 18px 48px -18px rgb(0 0 0 / 0.72),
    0 0 0 1px rgb(0 0 0 / 0.25),
    inset 0 1px 0 rgb(255 255 255 / 0.07),
    0 0 42px -22px rgb(var(--v5-glow) / 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
}
.site-header .brand { margin-inline-end: auto; }
.site-header .brand img {
  width: auto;
  height: clamp(36px, 30px + 1vw, 44px);
}
/* menu mode: the menu button and the language switch stay in the bar, the rest lives in the panel */
.site-header .menu-toggle {
  position: relative;
  order: 3;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.05);
  color: var(--v5-white);
}
.site-header .menu-toggle:hover { border-color: color-mix(in srgb, var(--c-terra-400) 55%, transparent); }
.site-header .menu-toggle__bars,
.site-header .menu-toggle__bars::before,
.site-header .menu-toggle__bars::after {
  display: block;
  width: 1.3rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) ease, background-color var(--dur-2) ease;
}
.site-header .menu-toggle__bars { position: relative; }
.site-header .menu-toggle__bars::before,
.site-header .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.site-header .menu-toggle__bars::before { transform: translateY(-7px); }
.site-header .menu-toggle__bars::after { transform: translateY(7px); width: 0.85rem; }
.site-header .menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.site-header .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: rotate(45deg); }
.site-header .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: rotate(-45deg); width: 1.3rem; }
.site-header .header-bar > .lang-switch { order: 2; }
.site-header .header-bar > .header-social { display: none; }

.site-header .nav-panel {
  position: fixed;
  inset: calc(var(--panel-top) - var(--hdr-gap) + 6px) var(--hdr-inset) auto;
  z-index: 49;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-height: calc(100svh - var(--panel-top) - 12px - var(--dock-h));
  padding: 1.1rem clamp(1rem, 3vw, 1.5rem) calc(1.25rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--c-terra-500) 45%, transparent);
  border-radius: 16px;
  background: linear-gradient(180deg, rgb(var(--pv-dark-rgb) / 0.985), rgb(var(--pv-dark-rgb) / 0.97));
  box-shadow: 0 28px 64px -24px rgb(0 0 0 / 0.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
}
.site-header .nav-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s;
}
.site-header .nav-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.site-header .nav-list li + li { border-top: 1px solid rgb(255 255 255 / 0.08); }
.site-header .nav-list a {
  display: flex;
  justify-content: space-between;
  min-height: 3.25rem;
  padding-inline-start: 0.85rem;
  color: var(--v5-text-on-dark);
  font-size: 1.1875rem;
  font-weight: 620;
}
.site-header .nav-list a::after {
  left: 0;
  right: auto;
  top: 50%;
  bottom: auto;
  width: 3px;
  height: 1.4rem;
  margin: 0;
  transform: translateY(-50%) scaleY(0);
}
.site-header .nav-list a[aria-current="page"] { color: var(--c-terra-400); }
.site-header .nav-list a[aria-current="page"]::after,
.site-header .nav-list a:hover::after { transform: translateY(-50%) scaleY(1); }
.site-header .nav-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
}
.site-header .nav-actions .btn { min-height: 3.1rem; font-size: 1.0625rem; }
.site-header .nav-phone {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.1rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--btn-radius);
  color: var(--v5-white);
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.site-header .nav-phone .icon { color: var(--c-terra-400); }
.site-header .nav-panel__contact {
  display: grid;
  gap: 0.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / 0.08);
  color: var(--v5-muted-on-dark);
  font-size: var(--fs-small);
}
html.menu-open, html.menu-open body { overflow: hidden; }

/* navigation typography shared by both modes */
.site-header .nav-list a { text-decoration: none; letter-spacing: 0.005em; transition: color var(--dur-2) ease; }
.site-header .nav-list a::after {
  background: linear-gradient(90deg, var(--c-terra-400), var(--c-terra-500)) !important;
  box-shadow: 0 0 12px rgb(var(--v5-glow) / 0.6);
}

/* language switch */
.site-header .lang-switch__toggle {
  height: 2.75rem;
  padding-inline: 0.7rem 0.6rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.05);
  color: var(--v5-white);
  font-weight: 650;
}
.site-header .lang-switch__toggle .icon { color: var(--c-terra-400); }
.site-header .lang-switch__toggle:hover { border-color: color-mix(in srgb, var(--c-terra-400) 55%, transparent); }
.site-header .lang-switch__menu {
  border: 1px solid color-mix(in srgb, var(--c-terra-500) 40%, transparent);
  border-radius: 14px;
  background: rgb(var(--pv-dark-rgb) / 0.98);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.8);
}
.site-header .lang-switch__menu a { color: var(--v5-text-on-dark); }
.site-header .lang-switch__menu a[aria-current] { color: var(--c-terra-400); }

/* social tiles: the official marks in their platform colours */
.header-social,
.nav-social { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.header-social .social-link,
.nav-social .social-link {
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  text-decoration: none;
}
.header-social .social-link .icon,
.nav-social .social-link .icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.44rem;
  border-radius: 10px;
}
.nav-social .social-link { gap: 0.6rem; grid-auto-flow: column; color: var(--v5-text-on-dark); font-weight: 600; }
.social-link--facebook .icon,
.footer-social--facebook .icon {
  background: #ffffff !important;
  color: #0866ff !important;
  border-radius: 50% !important;
  padding: 0.12rem !important;
}
.social-link--instagram .icon,
.footer-social--instagram .icon {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%) !important;
  color: #ffffff !important;
}
.social-link--tiktok .icon,
.footer-social--tiktok .icon { background: #000000 !important; color: #ffffff !important; }
.header-social .social-link:hover .icon,
.nav-social .social-link:hover .icon { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.7); }

/* ---------- 5. Hero (home) ---------- */
html[data-theme] .hero__media img { filter: saturate(1.12) contrast(1.06) brightness(1.02) !important; }
.hero__title .hero__accent { color: var(--c-terra-500); }
.hero__title {
  color: var(--v5-white);
  font-weight: 800;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.35);
}
.hero__tagline { color: var(--v5-white) !important; font-weight: 720; }
.hero__tagline::before { width: 2.25rem; height: 3px; background: var(--c-terra-500); box-shadow: 0 0 12px rgb(var(--v5-glow) / 0.6); }
.hero__content .lead { color: #e2e8f1; }
.hero .hero__inner { padding-top: calc(var(--header-total) + 1.5rem); }
@media (max-width: 899px) {
  .hero__media { margin-top: 0; max-height: none; aspect-ratio: 4 / 3.3; }
  .hero__media::after { background: linear-gradient(180deg, rgb(var(--pv-dark-rgb) / 0.55) 0%, rgb(var(--pv-dark-rgb) / 0) 32%, rgb(var(--pv-dark-rgb) / 0) 55%, var(--c-graphite-800) 100%) !important; }
  .hero .hero__inner { padding-top: 0; }
}
@media (min-width: 900px) {
  .hero { min-height: clamp(640px, 100svh, 1000px); }
  .hero__media { inset: 0 !important; }
  .hero__media img { object-position: 64% 55%; }
  html[data-theme] .hero__media::after {
    background:
      linear-gradient(90deg, rgb(var(--pv-dark-rgb) / 0.96) 0%, rgb(var(--pv-dark-rgb) / 0.82) 24%, rgb(var(--pv-dark-rgb) / 0.35) 50%, rgb(var(--pv-dark-rgb) / 0) 72%),
      linear-gradient(180deg, rgb(3 5 9 / 0.55) 0%, rgb(3 5 9 / 0) 22%),
      linear-gradient(0deg, var(--c-graphite-800) 0%, rgb(var(--pv-dark-rgb) / 0) 30%) !important;
  }
  .hero .display.hero__title { font-size: clamp(3.25rem, 1.6rem + 3.6vw, 6rem); line-height: 1.02; letter-spacing: -0.035em; }
  .hero__content { max-width: 46rem; }
  .hero__content .lead { font-size: clamp(1.125rem, 1rem + 0.3vw, 1.35rem); max-width: 38rem; }
}
/* sub page heroes: content clears the floating header */
.photo-hero .photo-hero__content,
.page-hero > .wrap:first-child { padding-top: calc(var(--header-total) + 0.5rem); }
main > section:first-child:not(.hero):not(.photo-hero):not(.page-hero) { padding-top: calc(var(--header-total) + var(--section-y) * 0.5); }
.page-hero { padding-top: calc(var(--header-total) + clamp(1.5rem, 1rem + 2vw, 3rem)); }
.page-hero > .wrap:first-child { padding-top: 0; }
.photo-hero__media::after { background: linear-gradient(90deg, rgb(var(--pv-dark-rgb) / 0.92) 0%, rgb(var(--pv-dark-rgb) / 0.6) 45%, rgb(var(--pv-dark-rgb) / 0.2) 100%), linear-gradient(180deg, rgb(3 5 9 / 0.6) 0%, rgb(3 5 9 / 0) 30%) !important; }

/* ---------- 6. Components ---------- */
.btn { border-radius: var(--btn-radius); font-weight: 700; }
html[data-theme] .btn:not(.btn--secondary):not(.btn--light) {
  --btn-bg: var(--c-terra-500);
  --btn-fg: var(--accent-on);
  background: linear-gradient(180deg, var(--c-terra-400), var(--c-terra-500) 55%, var(--c-terra-600)) !important;
  color: var(--accent-on) !important;
  border-color: color-mix(in srgb, var(--c-terra-300) 55%, transparent) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 12px 30px -12px rgb(var(--v5-glow) / 0.65) !important;
}
html[data-theme="4"] .btn:not(.btn--secondary):not(.btn--light),
html[data-theme="5"] .btn:not(.btn--secondary):not(.btn--light),
html[data-theme="9"] .btn:not(.btn--secondary):not(.btn--light),
html[data-theme="10"] .btn:not(.btn--secondary):not(.btn--light) {
  background: linear-gradient(180deg, var(--c-terra-500), var(--c-terra-600) 55%, var(--c-terra-700)) !important;
  text-shadow: 0 1px 0 rgb(0 0 0 / 0.25);
}
html[data-theme] .btn:not(.btn--secondary):not(.btn--light):hover { filter: brightness(1.06) saturate(1.05); }
html[data-theme] .tone-dark .btn--secondary,
html[data-theme] .tone-dark-2 .btn--secondary,
html[data-theme] .tone-deep .btn--secondary,
html[data-theme] .hero .btn--secondary,
html[data-theme] .photo-hero .btn--secondary {
  background: rgb(4 7 12 / 0.55) !important;
  border-color: color-mix(in srgb, var(--c-terra-500) 70%, transparent) !important;
  color: var(--v5-white) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html[data-theme] .tone-dark .btn--secondary:hover,
html[data-theme] .tone-deep .btn--secondary:hover,
html[data-theme] .hero .btn--secondary:hover,
html[data-theme] .photo-hero .btn--secondary:hover { background: rgb(4 7 12 / 0.75) !important; border-color: var(--c-terra-400) !important; }
html[data-theme] .tone-cream .btn--secondary,
html[data-theme] .tone-warm .btn--secondary {
  background: #ffffff !important;
  border-color: color-mix(in srgb, var(--c-ink) 22%, transparent) !important;
  color: var(--c-ink) !important;
}
.eyebrow { font-weight: 720; }

/* home: the facts bar as dark glass with gold icons */
html[data-theme] .hero-facts {
  background: linear-gradient(180deg, rgb(var(--pv-dark-rgb) / 0.94), rgb(var(--pv-dark-rgb) / 0.9)) !important;
  border: 1px solid color-mix(in srgb, var(--c-terra-500) 42%, transparent);
  box-shadow: 0 28px 60px -30px rgb(0 0 0 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.06) !important;
  --fg: var(--v5-text-on-dark);
  --fg-2: var(--v5-muted-on-dark);
  --line: rgb(255 255 255 / 0.1);
  color: var(--v5-text-on-dark);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
html[data-theme] .hero-facts__icon {
  background: color-mix(in srgb, var(--c-terra-500) 16%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--c-terra-500) 45%, transparent) !important;
  color: var(--c-terra-400) !important;
}
html[data-theme] .hero-facts small { color: var(--c-terra-300); }

/* cards in dark sections */
html[data-theme] .tone-dark .class-tile,
html[data-theme] .tone-dark .future-card,
html[data-theme] .tone-dark .google-card,
html[data-theme] .tone-deep .class-tile {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-graphite-700) 92%, var(--c-terra-500)), var(--c-graphite-700)) !important;
  box-shadow: 0 24px 54px -30px rgb(0 0 0 / 0.8), 0 0 0 1px color-mix(in srgb, var(--c-terra-500) 22%, transparent) !important;
}
html[data-theme] .class-tile:hover { box-shadow: 0 30px 60px -28px rgb(0 0 0 / 0.85), 0 0 0 1px color-mix(in srgb, var(--c-terra-500) 55%, transparent), 0 0 36px -18px rgb(var(--v5-glow) / 0.55) !important; }

/* Apps and cancellation terms (api/_v715_public_page.php) */
.v565-apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem;
}
.v565-app {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.35rem;
  border-radius: 16px;
  background: var(--bg-raised);
  box-shadow: 0 22px 50px -32px rgb(11 18 32 / 0.45), 0 0 0 1px color-mix(in srgb, var(--c-terra-600) 24%, rgb(11 18 32 / 0.08));
}
.v565-app__icon {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
}
.v565-app__icon--text {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--c-terra-400), var(--c-terra-600));
  color: var(--accent-on);
  font-weight: 800;
  font-size: 1.35rem;
  text-transform: uppercase;
}
.v565-app__body { display: grid; gap: 0.5rem; min-width: 0; }
.v565-app__body p { margin: 0; color: var(--fg-2); }
.v565-app__meta { font-size: var(--fs-small); }
.v565-app__body .btn { justify-self: start; margin-top: 0.35rem; }
.v565-empty,
.v565-policy {
  max-width: 48rem;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  border-radius: 18px;
  background: var(--bg-raised);
  box-shadow: 0 22px 50px -32px rgb(11 18 32 / 0.45), 0 0 0 1px color-mix(in srgb, var(--c-terra-600) 24%, rgb(11 18 32 / 0.08));
}
.v565-policy { display: grid; gap: 1rem; font-size: var(--fs-lead); line-height: 1.65; }
.v565-policy p { margin: 0; }
.v565-policy__version { font-size: var(--fs-small); color: var(--fg-2); }
html[data-mode="dark"] .v565-app,
html[data-mode="dark"] .v565-empty,
html[data-mode="dark"] .v565-policy {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-graphite-700) 90%, var(--c-terra-500)), var(--c-graphite-700));
  box-shadow: 0 24px 54px -30px rgb(0 0 0 / 0.9), 0 0 0 1px color-mix(in srgb, var(--c-terra-500) 26%, transparent);
}

/* footer */
html[data-theme] .site-footer.tone-deep { background: radial-gradient(900px 260px at 12% 0%, rgb(var(--v5-glow) / 0.08), transparent 70%), var(--c-graphite-950); }
html[data-theme] .site-footer h2 { color: var(--c-terra-400); }

/* quick contact: bottom bar below 1200px, floating rail above */
html[data-theme] .dock .icon { color: var(--c-terra-400); }
@media (max-width: 1199.98px) {
  html[data-theme] .dock { background: rgb(var(--pv-dark-rgb) / 0.96); border-top: 1px solid color-mix(in srgb, var(--c-terra-500) 35%, transparent); }
}
@media (min-width: 1200px) {
  html[data-theme] .dock { background: none; border: 0; }
  html[data-theme] .dock a {
    background: rgb(var(--pv-dark-rgb) / 0.92);
    border-color: color-mix(in srgb, var(--c-terra-500) 45%, transparent);
    box-shadow: 0 12px 28px -12px rgb(0 0 0 / 0.75), 0 0 22px -12px rgb(var(--v5-glow) / 0.6);
  }
  html[data-theme] .dock a:hover,
  html[data-theme] .dock a:focus-visible { background: var(--c-terra-500); border-color: var(--c-terra-400); }
  html[data-theme] .dock a:hover .icon,
  html[data-theme] .dock a:focus-visible .icon { color: var(--accent-on); }
  html[data-theme] .dock__label { background: #ffffff; color: var(--v5-ink); }
}

/* ---------- 7. Light mode: crisp paper sections ---------- */
html[data-theme] .tone-cream { --bg: var(--c-cream-100); --bg-raised: #ffffff; }
html[data-theme] .tone-warm { --bg: var(--c-cream-50); --bg-raised: #ffffff; }
html[data-theme] .tone-cream h2,
html[data-theme] .tone-warm h2,
html[data-theme] .tone-cream h3,
html[data-theme] .tone-warm h3 { color: #070b14; }
html[data-theme] .tone-cream .class-tile,
html[data-theme] .tone-warm .class-tile,
html[data-theme] .tone-cream .form-card,
html[data-theme] .tone-warm .form-card,
html[data-theme] .tone-cream .google-card,
html[data-theme] .tone-warm .google-card,
html[data-theme] .tone-cream .future-card,
html[data-theme] .tone-warm .future-card {
  background: #ffffff !important;
  box-shadow: 0 22px 50px -32px rgb(11 18 32 / 0.45), 0 0 0 1px color-mix(in srgb, var(--c-terra-600) 24%, rgb(11 18 32 / 0.08)) !important;
}

/* accent text and icons on paper sections: the deep accent tone (themes.css forces the light one) */
html[data-theme] .tone-cream .text-link,
html[data-theme] .tone-warm .text-link,
html[data-theme] .tone-cream .contact-action__icon,
html[data-theme] .tone-warm .contact-action__icon,
html[data-theme] .tone-cream .faq__icon,
html[data-theme] .tone-warm .faq__icon,
html[data-theme] .tone-cream .hero-facts__icon,
html[data-theme] .tone-warm .hero-facts__icon { color: var(--v5-accent-ink-light) !important; }
html[data-theme] .journey-step:last-child .journey-node { color: var(--accent-on) !important; }

/* call-to-action band: vivid accent surface with guaranteed ink contrast (AA) in every theme */
html[data-theme] .cta-band.tone-terra {
  --fg: var(--v5-ink);
  --fg-2: rgb(11 15 23 / 0.9);
  --line: rgb(11 15 23 / 0.2);
  --accent-ink: var(--v5-ink);
  color: var(--v5-ink);
  background-image:
    radial-gradient(900px 300px at 85% 0%, rgb(255 255 255 / 0.28), transparent 60%),
    linear-gradient(135deg, var(--c-terra-300) 0%, var(--c-terra-400) 38%, var(--c-terra-500) 100%) !important;
}
html[data-theme] .cta-band.tone-terra h2,
html[data-theme] .cta-band.tone-terra p { color: inherit; }
html[data-theme] .cta-band.tone-terra .btn--secondary {
  background: rgb(255 255 255 / 0.6) !important;
  border-color: rgb(11 15 23 / 0.32) !important;
  color: var(--v5-ink) !important;
}
html[data-theme="4"] .cta-band.tone-terra,
html[data-theme="5"] .cta-band.tone-terra,
html[data-theme="9"] .cta-band.tone-terra,
html[data-theme="10"] .cta-band.tone-terra {
  --fg: #ffffff;
  --fg-2: rgb(255 255 255 / 0.94);
  --line: rgb(255 255 255 / 0.28);
  --accent-ink: #ffffff;
  color: #ffffff;
  background-image:
    radial-gradient(900px 300px at 85% 0%, rgb(255 255 255 / 0.16), transparent 60%),
    linear-gradient(135deg, var(--c-terra-600) 0%, var(--c-terra-700) 55%, color-mix(in srgb, var(--c-terra-700) 70%, #000) 100%) !important;
}
html[data-theme="4"] .cta-band.tone-terra .btn--secondary,
html[data-theme="5"] .cta-band.tone-terra .btn--secondary,
html[data-theme="9"] .cta-band.tone-terra .btn--secondary,
html[data-theme="10"] .cta-band.tone-terra .btn--secondary {
  background: rgb(0 0 0 / 0.2) !important;
  border-color: rgb(255 255 255 / 0.6) !important;
  color: #ffffff !important;
}
html[data-theme] .tone-dark .text-link,
html[data-theme] .tone-dark-2 .text-link,
html[data-theme] .tone-deep .text-link { color: var(--c-terra-400) !important; }

/* ---------- 8. Dark mode: deep navy/black, bright accents, no grey ---------- */
html[data-mode="dark"][data-theme] .tone-cream .text-link,
html[data-mode="dark"][data-theme] .tone-warm .text-link,
html[data-mode="dark"][data-theme] .tone-cream .contact-action__icon,
html[data-mode="dark"][data-theme] .tone-warm .contact-action__icon,
html[data-mode="dark"][data-theme] .tone-cream .faq__icon,
html[data-mode="dark"][data-theme] .tone-warm .faq__icon { color: var(--c-terra-400) !important; }
html[data-mode="dark"] { color-scheme: dark; }
html[data-mode="dark"] .tone-cream,
html[data-mode="dark"] .tone-warm {
  --fg: var(--v5-text-on-dark);
  --fg-2: var(--v5-muted-on-dark);
  --line: rgb(255 255 255 / 0.1);
  --line-strong: rgb(255 255 255 / 0.24);
  --accent-ink: var(--c-terra-400);
  --focus: var(--c-terra-300);
  --field-bg: var(--c-graphite-950);
  color-scheme: dark;
}
html[data-mode="dark"] .tone-cream { --bg: var(--c-graphite-900); --bg-raised: var(--c-graphite-700); }
html[data-mode="dark"] .tone-warm { --bg: var(--c-graphite-950); --bg-raised: var(--c-graphite-800); }
html[data-mode="dark"][data-theme] .tone-cream,
html[data-mode="dark"][data-theme] .tone-warm {
  background-image: radial-gradient(1100px 280px at 85% 0%, rgb(var(--v5-glow) / 0.07), transparent 70%) !important;
}
html[data-mode="dark"][data-theme] .tone-cream h2,
html[data-mode="dark"][data-theme] .tone-warm h2,
html[data-mode="dark"][data-theme] .tone-cream h3,
html[data-mode="dark"][data-theme] .tone-warm h3 { color: var(--v5-white); }
html[data-mode="dark"][data-theme] .tone-cream .class-tile,
html[data-mode="dark"][data-theme] .tone-warm .class-tile,
html[data-mode="dark"][data-theme] .tone-cream .form-card,
html[data-mode="dark"][data-theme] .tone-warm .form-card,
html[data-mode="dark"][data-theme] .tone-cream .google-card,
html[data-mode="dark"][data-theme] .tone-warm .google-card,
html[data-mode="dark"][data-theme] .tone-cream .future-card,
html[data-mode="dark"][data-theme] .tone-warm .future-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-graphite-700) 90%, var(--c-terra-500)), var(--c-graphite-700)) !important;
  box-shadow: 0 24px 54px -30px rgb(0 0 0 / 0.9), 0 0 0 1px color-mix(in srgb, var(--c-terra-500) 26%, transparent) !important;
}
html[data-mode="dark"][data-theme] .tone-cream .btn--secondary,
html[data-mode="dark"][data-theme] .tone-warm .btn--secondary {
  background: rgb(255 255 255 / 0.04) !important;
  border-color: color-mix(in srgb, var(--c-terra-500) 60%, transparent) !important;
  color: var(--v5-white) !important;
}
html[data-mode="dark"] .tone-cream .input,
html[data-mode="dark"] .tone-warm .input,
html[data-mode="dark"] .tone-cream select,
html[data-mode="dark"] .tone-warm select,
html[data-mode="dark"] .tone-cream textarea,
html[data-mode="dark"] .tone-warm textarea {
  background-color: var(--c-graphite-950);
  color: var(--v5-text-on-dark);
  border-color: rgb(255 255 255 / 0.2);
}
html[data-mode="dark"] .tone-cream .input::placeholder,
html[data-mode="dark"] .tone-warm .input::placeholder { color: rgb(201 210 225 / 0.7); }
html[data-mode="dark"] .tone-dark { --bg: var(--c-graphite-900); --bg-raised: var(--c-graphite-700); }
html[data-mode="dark"] .tone-dark-2 { --bg: var(--c-graphite-800); }
html[data-mode="dark"][data-theme] .section.after-hero { background-image: radial-gradient(1200px 320px at 18% 0%, rgb(var(--v5-glow) / 0.12), transparent 60%) !important; }
html[data-mode="dark"] .legal-table th,
html[data-mode="dark"] .legal-table td { border-color: rgb(255 255 255 / 0.12); }
html[data-mode="dark"] .consent-dialog__panel { background: var(--c-graphite-800); color: var(--v5-text-on-dark); }
html[data-mode="dark"][data-theme] body { background: var(--c-graphite-950); }
html[data-mode="dark"][data-theme] { background: var(--c-graphite-950); }

/* ---------- 9. RTL ---------- */
[dir="rtl"] .site-header .brand { margin-left: 0; }
[dir="rtl"] .site-header .nav-list a::after { left: auto; right: 0; }
[dir="rtl"] .topbar__part::before { margin-inline: 0.55rem; }
[dir="rtl"] .hero__tagline::before { transform: none; }
/* RTL: the photo is not mirrored (the car lettering would read backwards); it occupies the
   left part and the text column the right part, like a mirror image of the layout. */
@media (min-width: 900px) {
  [dir="rtl"] .hero__media { inset: 0 36% 0 0 !important; }
  [dir="rtl"] .hero__media img { object-position: 88% 55%; }
  [dir="rtl"][data-theme] .hero__media::after {
    background:
      linear-gradient(270deg, var(--c-graphite-800) 0%, rgb(var(--pv-dark-rgb) / 0.55) 12%, rgb(var(--pv-dark-rgb) / 0) 34%),
      linear-gradient(180deg, rgb(3 5 9 / 0.55) 0%, rgb(3 5 9 / 0) 22%),
      linear-gradient(0deg, var(--c-graphite-800) 0%, rgb(var(--pv-dark-rgb) / 0) 30%) !important;
  }
  [dir="rtl"] .hero__content { max-width: min(40rem, 34vw); }
  [dir="rtl"] .hero .display.hero__title { font-size: clamp(2.75rem, 1.4rem + 2.6vw, 4.75rem); }
}

/* ---------- 10. Motion ---------- */
html[data-mode] body,
html[data-mode] .tone-cream,
html[data-mode] .tone-warm,
html[data-mode] .tone-dark { transition: background-color 0.25s ease, color 0.25s ease; }
@media (prefers-reduced-motion: reduce) {
  .site-header, .topbar__mode, html[data-mode] body, html[data-mode] .tone-cream, html[data-mode] .tone-warm { transition: none !important; }
}