@font-face {
    font-family: "Figtree";
    src: url(/assets/fonts/figtree.woff2) format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Space Grotesk";
    src: url(/assets/fonts/space-grotesk.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  :root {
    --page: #F4F7F9;
    --card: #FFFFFF;
    --ink: #1D232A;
    --slate: #5C6B7A;
    --mist: #DFE6EC;
    --brand: #4478AD;
    --brand-deep: #35608F;
    --accent: #D96B35;
    --accent-btn: #B9531F;
    --accent-btn-hover: #D96B35;
    --accent-ink: #B9531F;
    --night: #10151C;
    --night-ink: #EDF1F5;
    --night-slate: #97A5B4;
    --shadow-rest: 0 1px 2px rgba(16, 21, 28, 0.04), 0 6px 20px rgba(16, 21, 28, 0.06);
    --shadow-hover: 0 24px 60px rgba(16, 21, 28, 0.14);
    --radius: 14px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --page: #11161C;
      --card: #171E27;
      --ink: #E8EDF3;
      --slate: #9AA9BC;
      --mist: #2B3543;
      --brand: #6B9CC9;
      --brand-deep: #8FB6DA;
      --accent-ink: #E58A5C;
      --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35);
      --shadow-hover: 0 24px 60px rgba(0, 0, 0, 0.5);
    }
  }
  :root[data-theme="dark"] {
    --page: #11161C;
    --card: #171E27;
    --ink: #E8EDF3;
    --slate: #9AA9BC;
    --mist: #2B3543;
    --brand: #6B9CC9;
    --brand-deep: #8FB6DA;
    --accent-ink: #E58A5C;
    --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 24px 60px rgba(0, 0, 0, 0.5);
  }
  :root[data-theme="light"] {
    --page: #F4F7F9;
    --card: #FFFFFF;
    --ink: #1D232A;
    --slate: #5C6B7A;
    --mist: #DFE6EC;
    --brand: #4478AD;
    --brand-deep: #35608F;
    --accent-ink: #B9531F;
    --shadow-rest: 0 1px 2px rgba(16, 21, 28, 0.04), 0 6px 20px rgba(16, 21, 28, 0.06);
    --shadow-hover: 0 24px 60px rgba(16, 21, 28, 0.14);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 96px; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  body {
    background: var(--page);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 16.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  .display, h1, h2, h3 {
    font-family: "Figtree", -apple-system, "Segoe UI", sans-serif;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  .mono {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
  }
  a { color: var(--brand); }
  a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
  }
  img { max-width: 100%; display: block; }

  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

  /* ---------- Header (transparent, beim Scrollen weiss, Zermatt-Prinzip) ---------- */
  .site-header {
    position: fixed; inset: 0 0 auto 0; z-index: 60;
    background: transparent; color: #fff;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  }
  .site-header .bar {
    display: flex; align-items: center; gap: 28px;
    max-width: 1360px; margin: 0 auto; padding: 12px 28px;
    /* Ueber dem Mobil-Menue-Overlay (beide leben im Header-Stacking-Context) */
    position: relative; z-index: 2;
  }
  /* Unterseiten: das Bild bleibt UNANGETASTET. Damit Logo und Menue trotzdem
     lesbar sind, traegt der Header selbst einen kurzen Verlauf, der nur so hoch
     ist wie die Leiste (73px) und beim Scrollen dem weissen Balken weicht.
     Startseite ausgenommen, ihr Hero hat eigene Verlaeufe. */
  body:not(.seite-start) .site-header:not(.scrolled) {
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.34) 55%, rgba(0,0,0,0) 100%);
  }
  .site-header.scrolled {
    background: #FFFFFF; color: #1D232A;
    box-shadow: 0 1px 0 rgba(16, 21, 28, 0.08), 0 6px 24px rgba(16, 21, 28, 0.08);
  }
  .logo { display: block; flex-shrink: 0; }
  .logo img { height: 40px; width: auto; display: block; }
  @media (max-width: 520px) { .logo img { height: 34px; } }
  .logo .logo-on-light { display: none; }
  .site-header.scrolled .logo-on-dark { display: none; }
  .site-header.scrolled .logo-on-light { display: block; }
  .main-nav { display: flex; gap: 26px; margin-left: auto; }
  .main-nav a {
    color: inherit; text-decoration: none; font-size: 0.95rem; font-weight: 500;
    opacity: 0.92; padding: 4px 0; border-bottom: 2px solid transparent;
  }
  .main-nav a:hover { border-bottom-color: var(--accent); opacity: 1; }
  .btn {
    display: inline-block; border: 0; cursor: pointer; text-decoration: none;
    font-family: "Figtree", sans-serif; font-weight: 700; font-size: 0.98rem;
    padding: 12px 26px; border-radius: 999px;
    background: var(--accent-btn); color: #fff;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .btn:hover { background: var(--accent-btn-hover); transform: translateY(-1px); }
  .btn-ghost {
    background: transparent; color: inherit;
    box-shadow: inset 0 0 0 1.5px currentColor;
  }
  .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
  .header-cta { margin-left: 8px; }
  /* Burger + Mobil-Menue: Desktop unsichtbar, unter 901px ersetzt es die Nav */
  .menu-toggle { display: none; }
  .m-nav { display: none; }
  @media (max-width: 900px) {
    .main-nav { display: none; }
    .menu-toggle {
      display: grid; place-items: center; flex-shrink: 0;
      width: 44px; height: 44px; padding: 0; border: 0;
      background: transparent; color: inherit; cursor: pointer;
    }
    .menu-icon { display: grid; gap: 5px; width: 22px; }
    .menu-icon span { height: 2px; border-radius: 2px; background: currentColor;
      transition: transform 0.3s ease, opacity 0.2s ease; }
    html.m-open .menu-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    html.m-open .menu-icon span:nth-child(2) { opacity: 0; }
    html.m-open .menu-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    html.m-open { overflow: hidden; }
    /* Overlay unter der Headerleiste (Header z-index 60): Nachtblau-Verlauf */
    .m-nav {
      position: fixed; inset: 0; z-index: 1;
      display: flex; flex-direction: column; justify-content: center; gap: 26px;
      background: linear-gradient(180deg, #10151C 0%, #1C3049 100%); color: #fff;
      padding: 96px 32px calc(40px + env(safe-area-inset-bottom));
      opacity: 0; visibility: hidden; transform: translateY(-10px);
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    }
    html.m-open .m-nav { opacity: 1; visibility: visible; transform: none;
      transition: opacity 0.3s ease, transform 0.3s ease; }
    /* Menue offen: Leiste immer im Hell-auf-Dunkel-Zustand, egal ob gescrollt */
    html.m-open .site-header { background: transparent; color: #fff; box-shadow: none; }
    html.m-open .site-header .logo-on-light { display: none; }
    html.m-open .site-header .logo-on-dark { display: block; }
    .m-nav-links { display: grid; }
    .m-nav-links a {
      color: #fff; text-decoration: none;
      font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.55rem;
      padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .m-nav-links a:first-child { border-top: 1px solid rgba(255, 255, 255, 0.1); }
    .m-nav-cta { align-self: flex-start; font-size: 1.02rem; padding: 14px 30px; }
    .m-nav-kontakt { display: flex; gap: 10px; align-items: center;
      color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; }
    .m-nav-kontakt a { color: #fff; text-decoration: none; font-weight: 600; }
    /* Offenes Menue: schwebende Knoepfe treten zurueck (eigene Links im Menue) */
    html.m-open .wa-float, html.m-open .sticky-cta { opacity: 0 !important; pointer-events: none !important; }
  }
  /* Telefone: Header-CTA weicht dem Burger - die Buchung uebernehmen
     Hero-Karte und Sticky-Leiste, sonst sprengt die Leiste 390px-Displays */
  @media (max-width: 700px) {
    .header-cta { display: none; }
  }
  @media (max-width: 900px) {
    .main-nav { display: none; }
    .site-header .bar { padding: 14px 20px; }
    /* Ohne die (ausgeblendete) Nav traegt niemand mehr den Auto-Margin:
       der muss jetzt am Werkzeug-Wrapper selbst haengen, sonst kleben
       Fahne und Knopf links am Logo (Review 2026-07-30). */
    .header-tools { margin-left: auto; }
    /* «Jetzt buchen» darf neben dem Fahnenkaestchen nie zweizeilig werden. */
    .header-cta { white-space: nowrap; }
  }

  /* ---------- Hero ---------- */
  .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; }
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes heroZoom { from { transform: scale(1.05); } to { transform: scale(1); } }
  .hero h1, .hero .booking {
    animation: rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .hero .booking { animation-delay: 0.18s; }
  .hero-media img { animation: heroZoom 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .hero-media { position: absolute; inset: 0; overflow: hidden; background: #232C36; }
  .hero-media img, .hero-media video {
    width: 100%; height: 100%; object-fit: cover; object-position: 42% 30%;
  }
  .hero-scrim {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 16%, rgba(0,0,0,0) 34%),
      linear-gradient(4deg, rgba(16,21,28,0.78) 0%, rgba(16,21,28,0.25) 44%, rgba(16,21,28,0) 68%);
  }
  .hero-inner {
    position: relative; width: 100%;
    padding: 120px 28px 40px;
  }
  @media (min-width: 901px) {
    .hero-inner { padding-left: 44px; padding-right: 44px; }
  }
  .eyebrow {
    font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.22em; opacity: 0.9;
  }
  .hero h1 {
    font-size: clamp(2.3rem, 5.2vw, 3.9rem); font-weight: 800;
    max-width: 13ch; margin: 0 0 10px;
  }
  /* Social Proof direkt unter der Headline: 5.0 Sterne sichtbar, bevor
     irgendjemand scrollen muss */
  .hero-trust {
    display: inline-flex; align-items: center; gap: 8px;
    color: #fff; text-decoration: none; font-size: 0.95rem; font-weight: 600;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    animation: rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both 0.1s;
  }
  .hero-trust .ht-stars { color: #F5B942; letter-spacing: 2px; font-size: 1.02rem; }
  .hero-trust b { font-weight: 800; }
  .hero-trust:hover { text-decoration: underline; }

  /* ---------- Buchungsleiste (diskret am unteren Rand, Zermatt-Stil) ---------- */
  .booking {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; z-index: 5;
    width: max-content; max-width: calc(100% - 48px);
  }
  .booking-card {
    background: #FFFFFF; color: #1D232A;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -14px 44px rgba(16, 21, 28, 0.22);
    padding: 14px 20px 16px;
    display: flex; align-items: flex-end;
  }
  .field { display: grid; gap: 6px; min-width: 0; padding: 0 18px; }
  .booking-card .field:first-child { padding-left: 0; }
  .booking-card .field + .field { border-left: 1px solid #E4E9EE; }
  .field label { font-size: 0.78rem; font-weight: 700; color: #1D232A; }
  .field select, .field input {
    appearance: none; -webkit-appearance: none;
    background: #FFFFFF; color: #1D232A;
    border: 1px solid #D8DEE5; border-radius: 8px; padding: 10px 12px;
    font: inherit; font-size: max(16px, 0.92rem); min-width: 0;
  }
  .field-flight select { width: 290px; }
  .field-date input { width: 175px; }
  .field-guests select { width: 135px; }
  .field select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231D232A' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
  }
  /* Datumsfeld exakt wie die Selects: gleiche Hoehe, linksbuendig (iOS zentriert
     den Wert sonst und laesst das Feld niedriger kollabieren) */
  .field select, .field input { min-height: 46px; }
  .field input[type="date"] { display: flex; align-items: center; text-align: left; }
  .field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
  .field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; }
  .bk-go {
    margin-left: 18px; width: 46px; height: 46px; flex-shrink: 0;
    border: 0; border-radius: 10px; cursor: pointer;
    background: var(--night); color: #fff;
    display: grid; place-items: center;
    transition: background 0.2s ease;
  }
  .bk-go:hover { background: var(--accent-btn); }
  .bk-go svg { width: 20px; height: 20px; }
  .bk-go-text { display: none; }
  @media (min-width: 901px) {
    .hero-inner { padding-bottom: 290px; }
  }
  @media (max-width: 900px) {
    .booking { position: static; width: auto; max-width: none; margin: 30px 0 0; }
    .booking-card { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-radius: 14px; padding: 16px; }
    .booking-card .field, .booking-card .field:first-child { padding: 0; }
    .booking-card .field + .field { border-left: 0; }
    .field-flight { grid-column: 1 / -1; }
    .field-flight select, .field-date input, .field-guests select { width: 100%; }
    .bk-go {
      grid-column: 1 / -1; width: 100%; height: 48px; margin-left: 0;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      background: var(--accent-btn);
    }
    .bk-go:hover { background: var(--accent-btn-hover); }
    .bk-go-text { display: inline; font-family: "Figtree", sans-serif; font-weight: 700; font-size: 1rem; }
  }
  @media (max-width: 520px) {
    .hero-inner { padding-top: 96px; }
  }

  /* ---------- Höhenlinie (Sektionstrenner) ---------- */
  .altline { border: 0; margin: 0; }
  .altline .wrap {
    display: flex; align-items: center; gap: 18px;
    padding-top: 20px; padding-bottom: 20px;
    color: var(--slate); font-size: 0.72rem;
  }
  .altline .rule { flex: 1; height: 1px; background: var(--mist); }
  .altline span { white-space: nowrap; }
  @media (max-width: 700px) {
    .altline span.hide-s { display: none; }
    /* Die zwei nowrap-Zeilen sind zusammen breiter als 390px und dehnten den
       Layout-Viewport auf ~421px (Seite wackelte seitlich). Auf Telefonen
       duerfen sie umbrechen, die Linie dazwischen entfaellt. */
    .altline .wrap { flex-wrap: wrap; row-gap: 2px; }
    .altline .rule { display: none; }
  }

  /* ---------- Sektionen ---------- */
  section { padding: clamp(72px, 9vw, 128px) 0; }
  .section-head { max-width: 780px; margin-bottom: clamp(44px, 6vw, 72px); }
  .section-head .eyebrow { color: var(--accent-ink); opacity: 1; }
  .section-head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 10px 0 14px; }
  .section-head p { color: var(--slate); font-size: 1.05rem; max-width: 62ch; }
  .section-head p + p { margin-top: 12px; }
  /* Fakten-Abschnitt: Text ueber die volle Inhaltsbreite (Martin 2026-08-03,
     «warum geht der text nicht ueber die ganze seite») statt der 62ch-Lesebreite. */
  /* Gleiches gilt fuer Mountain Adventures (Martin 2026-08-11). */
  .wissen .section-head, .wissen .section-head p,
  .adventures .section-head, .adventures .section-head p { max-width: none; }

  /* USP */
  .usps { padding: 56px 0 8px; }
  .usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .usp h3 { font-size: 1.06rem; margin-bottom: 6px; }
  .usp p { color: var(--slate); font-size: 0.93rem; }
  .usp .tick {
    width: 26px; height: 26px; border-radius: 50%; margin-bottom: 12px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-ink); display: grid; place-items: center; font-weight: 700;
  }
  @media (max-width: 900px) { .usp-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .usp-grid { grid-template-columns: 1fr; } }

  /* Flüge (Porsche-Showcase: weiss, dunkelt beim Hineinfahren ab) */
  .flights {
    background: var(--page); color: var(--ink);
    --fly-sub: var(--slate);
    --fly-eyebrow: var(--accent-ink);
    --fly-go-bg: #10151C;
    --fly-go-ink: #FFFFFF;
    --fly-shadow: 0 18px 50px rgba(16, 21, 28, 0.16);
    transition: background 0.6s ease, color 0.6s ease;
  }
  @media (hover: hover) and (min-width: 701px) {
    .flights:hover, .flights.is-dark {
      background: #1C3049; color: #fff;
      --fly-sub: var(--night-slate);
      --fly-eyebrow: #E58A5C;
      --fly-go-bg: #FFFFFF;
      --fly-go-ink: #10151C;
      --fly-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    }
  }
  .flights .section-head { max-width: none; }
  .flights .section-head p { max-width: none; }
  .flights .section-head h2 { color: inherit; }
  .flights .section-head p { color: var(--fly-sub); transition: color 0.6s ease; }
  .flights .section-head .eyebrow { color: var(--fly-eyebrow); transition: color 0.6s ease; }
  .flights-grid { display: flex; flex-wrap: wrap; gap: 44px 26px; }
  .show-card {
    display: block; text-decoration: none; color: inherit;
    flex: 1 1 40%; min-width: 0;
  }
  .show-card .panel { position: relative; aspect-ratio: 7 / 5; }
  .show-card .frame {
    position: absolute; inset: 0; z-index: 0;
    border-radius: 18px; overflow: hidden; background: #1A222C;
    box-shadow: var(--fly-shadow);
    transition: transform 0.85s cubic-bezier(0.3, 0.7, 0.2, 1), box-shadow 0.6s ease;
    will-change: transform;
  }
  .show-card .inner {
    position: absolute; inset: 0;
    transition: transform 0.85s cubic-bezier(0.3, 0.7, 0.2, 1);
    will-change: transform;
  }
  .flights-grid .show-card:nth-child(odd) .frame,
  .flights-grid .show-card:nth-child(odd) .inner { transform-origin: left center; }
  .flights-grid .show-card:nth-child(even) .frame,
  .flights-grid .show-card:nth-child(even) .inner { transform-origin: right center; }
  .show-card .inner img {
    position: absolute; top: 0; bottom: 0; left: -9%; width: 118%; max-width: none; height: 100%; object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.33, 1, 0.68, 1), filter 0.9s cubic-bezier(0.33, 1, 0.68, 1);
  }
  .show-card .bdesc {
    text-align: left; font-size: 0.95rem; line-height: 1.45;
    color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  }
  .show-card .frame::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.42) 12%, rgba(0,0,0,0.18) 24%, rgba(0,0,0,0) 38%),
      linear-gradient(0deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.36) 14%, rgba(0,0,0,0.14) 27%, rgba(0,0,0,0) 42%);
  }
  .flights {
    --colw: calc((min(1152px, 100vw - 48px) - 26px) / 2);
    --grow: calc(var(--colw) * 0.08);
    --shrink: calc(var(--colw) * 0.07);
  }
  .show-card .panel h3 {
    transition: transform 0.85s cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  .show-card .go {
    transition: background 0.45s ease, color 0.45s ease, transform 0.85s cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  @media (hover: hover) and (min-width: 701px) {
    .show-card:hover .frame { transform: scaleX(1.08); }
    .show-card:hover .inner { transform: scaleX(0.9259); }
    .show-card:nth-child(odd):hover + .show-card .frame { transform: scaleX(0.93); }
    .show-card:nth-child(odd):hover + .show-card .inner { transform: scaleX(1.0753); }
    .show-card:has(+ .show-card:nth-child(even):hover) .frame { transform: scaleX(0.93); }
    .show-card:has(+ .show-card:nth-child(even):hover) .inner { transform: scaleX(1.0753); }
    .show-card:hover .inner img {
      transform: scale(1.16);
      filter: brightness(1.04);
      transition: transform 3.4s cubic-bezier(0.19, 1, 0.22, 1), filter 3.4s cubic-bezier(0.19, 1, 0.22, 1);
    }

    /* Texte wandern mit den Rahmenkanten mit (linke Karte waechst nach rechts) */
    .show-card:nth-child(odd):hover .panel h3 { transform: translateX(calc(var(--grow) / 2)); }
    .show-card:nth-child(odd):hover .go { transform: translateX(var(--grow)); }
    /* rechter Nachbar weicht: linke Kante rueckt nach rechts */
    .show-card:nth-child(odd):hover + .show-card .panel h3 { transform: translateX(calc(var(--shrink) / 2)); }
    .show-card:nth-child(odd):hover + .show-card .caption { transform: translateX(var(--shrink)); }
    /* rechte Karte waechst nach links */
    .show-card:nth-child(even):hover .panel h3 { transform: translateX(calc(-1 * var(--grow) / 2)); }
    .show-card:nth-child(even):hover .caption { transform: translateX(calc(-1 * var(--grow))); }
    /* linker Nachbar weicht: rechte Kante rueckt nach links */
    .show-card:has(+ .show-card:nth-child(even):hover) .panel h3 { transform: translateX(calc(-1 * var(--shrink) / 2)); }
    .show-card:has(+ .show-card:nth-child(even):hover) .go { transform: translateX(calc(-1 * var(--shrink))); }
  }
  .show-card .panel h3 {
    position: absolute; top: 18px; left: 20px; right: 20px; z-index: 3;
    color: #fff; text-align: center;
    font-family: "Space Grotesk", sans-serif; font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw, 2.1rem); letter-spacing: 0.01em; line-height: 1.15;
    text-shadow: 0 3px 26px rgba(0, 0, 0, 0.55);
  }
  .show-card .caption {
    position: absolute; left: 20px; right: 180px; bottom: 18px; z-index: 3;
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    transition: transform 0.85s cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  .show-card .chips { display: flex; gap: 8px; align-items: center; }
  .show-card .pill {
    color: #fff;
    font-family: ui-monospace, Menlo, monospace; font-size: 0.68rem; letter-spacing: 0.1em;
    background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: 7px 13px; border-radius: 999px; white-space: nowrap;
  }
  .badge {
    background: var(--accent-btn); color: #fff;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  }
  .show-card .go {
    position: absolute; bottom: 16px; right: 16px; z-index: 3;
    display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
    background: var(--fly-go-bg); color: var(--fly-go-ink);
    border-radius: 999px; padding: 10px 16px;
    font-family: "Figtree", sans-serif; font-weight: 700; font-size: 0.95rem;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    transition: background 0.45s ease, color 0.45s ease, transform 0.85s cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  .show-card .go:hover { background: var(--accent-btn); color: #fff; }
  .show-card .go svg { width: 16px; height: 16px; transition: transform 0.35s ease; }
  .show-card:hover .go svg { transform: translateX(3px); }
  /* Einspaltig = sofort Karten-Layout (Martin 2026-08-11): der Zwischen-
     schritt mit seitenbreitem Bild und Text-Overlay entfaellt. */
  @media (max-width: 1000px), ((pointer: coarse) and (max-height: 500px)) {
    .show-card { flex-basis: 100%; }
    /* Flugkarten: Bild oben frei sichtbar, Text darunter auf der Karte
       (statt Overlay ueber dem ganzen Bild) */
    .flights-grid { gap: 22px; }
    .show-card {
      background: var(--card); border: 1px solid var(--mist);
      border-radius: 18px; overflow: hidden;
      box-shadow: 0 10px 28px rgba(16, 21, 28, 0.08);
      /* Die Karte bleibt hell, auch wenn die .flights-Sektion gerade
         abgedunkelt ist. Sonst erbt sie deren weisse Schrift und der Titel
         steht weiss auf weisser Karte (2026-08-11 auf /fluege/ aufgefallen,
         seit der Karten-Modus bis 1000px reicht und sich mit dem
         Abdunkel-Effekt ab 701px ueberschneidet). */
      color: var(--ink);
      --fly-go-bg: #10151C;
      --fly-go-ink: #FFFFFF;
    }
    .show-card .panel { height: auto; aspect-ratio: auto; display: flex; flex-direction: column; }
    .show-card .frame {
      position: relative; inset: auto; z-index: auto;
      height: 54vw; max-height: 250px;
      border-radius: 0; box-shadow: none;
    }
    .show-card .frame::before { display: none; }
    .show-card .inner img { left: 0; width: 100%; }
    .show-card .panel h3 {
      position: static; text-align: left; color: inherit; text-shadow: none;
      font-size: 1.3rem; padding: 14px 16px 0;
    }
    .show-card .caption {
      position: static; padding: 8px 16px 0; transform: none;
    }
    .show-card .bdesc { color: var(--slate); text-shadow: none; }
    .show-card .pill {
      background: #EDF1F5; color: #46535F; border-color: transparent;
      -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .show-card .badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
    .show-card .go {
      position: static; align-self: flex-end; margin: 12px 16px 16px;
    }
    /* Im Karten-Modus saemtliche Desktop-Hover-Effekte stilllegen (Martin
       2026-08-11): das Aufziehen (scaleX auf frame/inner) und die
       translateX-Verschiebungen von Titel/Text schieben sonst das Bild
       ueber den danebenstehenden Text. */
    .show-card .frame, .show-card .inner, .show-card .panel h3,
    .show-card .caption, .show-card .go, .show-card .inner img {
      transform: none !important; transition: none !important;
    }
  }
  /* 701-1000px: genug Platz, Bild links und Text daneben */
  @media (min-width: 701px) and (max-width: 1000px) {
    .show-card .panel { display: grid; grid-template-columns: 44% 1fr; grid-template-rows: auto auto 1fr; }
    .show-card .frame { grid-column: 1; grid-row: 1 / -1; height: 100%; max-height: none; }
    .show-card .panel h3 { grid-column: 2; }
    .show-card .caption { grid-column: 2; }
    .show-card .go { grid-column: 2; justify-self: end; align-self: end; }
  }
  .show-card .chips { flex-wrap: wrap; }

  /* Winter */
  .winter { position: relative; color: #fff; padding: 0; }
  .winter .media { position: absolute; inset: 0; overflow: hidden; }
  .winter .media img { width: 100%; height: 100%; object-fit: cover; }
  .winter .media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(16,21,28,0.72) 0%, rgba(16,21,28,0.2) 60%, rgba(16,21,28,0) 100%);
  }
  /* Mobile: Bild und Text stapeln statt ueberlagern - das Bild bleibt frei
     sichtbar, der Text steht darunter auf eigenem dunklem Panel.
     Gilt auch fuer Telefone im Querformat (Touch + niedrige Hoehe). */
  @media (max-width: 700px), ((pointer: coarse) and (max-height: 500px)) {
    .winter { background: #10151C; }
    .winter .media { position: relative; inset: auto; height: 62vw; max-height: 300px; }
    .winter .media img { object-position: 70% 45%; }
    .winter .media::after {
      background: linear-gradient(180deg, rgba(16,21,28,0) 68%, rgba(16,21,28,0.9) 100%);
    }
  }
  .winter .wrap { position: relative; z-index: 1; padding-top: clamp(110px, 16vw, 200px); padding-bottom: clamp(110px, 16vw, 200px); }
  .winter .eyebrow { color: #fff; }
  .winter h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 10px 0 14px; max-width: 15ch; }
  .winter p { max-width: 46ch; opacity: 0.94; margin-bottom: 22px; }
  .winter-cta { display: flex; flex-wrap: wrap; gap: 12px; }

  /* Gutschein */
  .voucher .flex { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; }
  .voucher img { border-radius: var(--radius); box-shadow: var(--shadow-rest); border: 1px solid var(--mist); }
  .voucher h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 10px 0 14px; }
  .voucher p { color: var(--slate); margin-bottom: 12px; max-width: 54ch; }
  .voucher .btn { margin-top: 10px; }
  @media (max-width: 860px) { .voucher .flex { grid-template-columns: 1fr; } }

  /* Ablauf */
  /* Intro der Ablauf-Sektion: Text links, quadratisches Flugbild rechts.
     Unter 860px stapelt es (gleiche Schwelle wie beim Gutschein-Block). */
  .ablauf-intro {
    display: grid; grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(32px, 5vw, 56px); align-items: center;
    margin-bottom: clamp(44px, 6vw, 72px);
  }
  .ablauf-intro .section-head { margin-bottom: 0; }
  .ablauf-bild { margin: 0; }
  .ablauf-bild img {
    display: block; width: 100%; height: auto;
    border-radius: var(--radius); box-shadow: var(--shadow-rest); border: 1px solid var(--mist);
  }
  @media (max-width: 860px) { .ablauf-intro { grid-template-columns: 1fr; } }
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
  .step {
    background: var(--card); border-radius: var(--radius); padding: 22px;
    border: 1px solid var(--mist); box-shadow: var(--shadow-rest); position: relative;
  }
  .step::before {
    counter-increment: step; content: counter(step, decimal-leading-zero);
    font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem;
    color: var(--accent-ink); letter-spacing: 0.12em; display: block; margin-bottom: 10px;
  }
  .step h3 { font-size: 1.04rem; margin-bottom: 6px; }
  .step p { color: var(--slate); font-size: 0.9rem; }
  .steps-note { margin-top: 24px; color: var(--slate); font-size: 0.95rem; }
  @media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }


  /* Naht-Regel: Folgt eine Sektion auf eine GLEICHFARBIGE, addieren sich deren
     Polster (bis 2x 128px) zu einer Leerflaeche ohne sichtbare Kante. Bei diesen
     Uebergaengen traegt nur noch die obere Sektion ihren Abstand. Naehte mit
     Farbwechsel (flights, winter, reviews) behalten das volle Polster als Bruch. */
  .seite-start .ablauf, .seite-start .team, .seite-start .adventures, .seite-start .wissen, .seite-start .faq { padding-top: 0; }
  /* Die Fakten-Sektion besteht NUR aus dem section-head; dessen Abstand nach unten
     (bis 72px, gedacht als Trenner zum Inhaltsraster) waere dort tote Flaeche. */
  .seite-start .wissen .section-head { margin-bottom: 0; }
  /* Zwei Saison-Bloecke stehen direkt uebereinander; der Abstand gehoert zwischen
     sie, nicht an einen festen Block (build.py dreht die Reihenfolge je Saison). */
  .seite-start .wissen .section-head + .section-head { margin-top: 48px; }
  /* Team-Kopf über die volle Inhaltsbreite, kein Umbruch mittendrin (Martin 2026-08-12). */
  .team .section-head, .team .section-head p { max-width: none; }
  .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .pilot {
    background: var(--card); border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--mist); box-shadow: var(--shadow-rest);
    display: flex; flex-direction: column;
  }
  .pilot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
  .pilot .pbody { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
  .pilot h3 { font-size: 1.04rem; }
  .pilot .prole {
    font-family: ui-monospace, Menlo, monospace; font-size: 0.7rem; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--accent-ink);
  }
  .pilot p { color: var(--slate); font-size: 0.88rem; line-height: 1.5; }
  .team-cta { margin-top: 28px; }
  .team-cta a {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--brand-deep); font-weight: 700; text-decoration: none;
  }
  .team-cta a:hover { text-decoration: underline; }
  .team-cta svg { width: 16px; height: 16px; }
  @media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }

  /* Stimmen (Google-Karussell) */
  .reviews { background: var(--night); color: var(--night-ink); }
  .rv-grid { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: center; }
  .rv-summary { text-align: center; display: grid; gap: 10px; justify-items: center; }
  .rv-summary .exc {
    font-family: "Space Grotesk", sans-serif; font-weight: 700;
    font-size: 1.55rem; letter-spacing: 0.05em; text-transform: uppercase;
  }
  .stars { color: #F5B942; display: inline-flex; gap: 3px; }
  .stars svg { width: 16px; height: 16px; }
  .rv-summary .stars svg { width: 27px; height: 27px; }
  .rv-summary .basis { color: var(--night-slate); font-size: 0.95rem; }
  .rv-summary .basis b { color: var(--night-ink); }
  .g-word { font-size: 1.8rem; font-weight: 600; text-decoration: none; letter-spacing: -0.02em; }
  .rv-carousel { position: relative; min-width: 0; padding: 0 58px; }
  .rv-track {
    display: flex; gap: 34px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; padding: 4px 2px;
  }
  .rv-track::-webkit-scrollbar { display: none; }
  .rvc { width: 290px; flex-shrink: 0; scroll-snap-align: start; }
  .rvc header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
  .rvc header img { border-radius: 50%; }
  .rvc header .who { display: grid; line-height: 1.35; flex: 1; min-width: 0; }
  .rvc header .who b { font-size: 0.98rem; }
  .rvc header .who span { color: var(--night-slate); font-size: 0.8rem; }
  .gg { width: 20px; height: 20px; flex-shrink: 0; }
  .rvc .row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .verified { width: 16px; height: 16px; flex-shrink: 0; }
  .rvc p {
    color: rgba(255, 255, 255, 0.88); font-size: 0.94rem; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .rv-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    background: #FFFFFF; color: #10151C; display: grid; place-items: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, background 0.2s ease;
  }
  .rv-nav:hover { transform: translateY(-50%) scale(1.08); }
  .rv-nav svg { width: 18px; height: 18px; }
  .rv-prev { left: 0; }
  .rv-next { right: 0; }
  @media (max-width: 860px) {
    .rv-grid { grid-template-columns: 1fr; gap: 34px; }
    .rv-carousel { padding: 0 48px; }
  }

  /* Community */
  .soc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .soc {
    display: flex; align-items: center; gap: 18px;
    background: var(--card); border: 1px solid var(--mist); border-radius: 16px;
    padding: 24px 26px; text-decoration: none; color: var(--ink);
    box-shadow: var(--shadow-rest);
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  }
  .soc:hover { transform: translateY(-4px); background: #1C3049; color: #fff; box-shadow: var(--shadow-hover); }
  .soc .ic {
    width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
    background: #1C3049; color: #fff; display: grid; place-items: center;
    transition: background 0.3s ease, color 0.3s ease;
  }
  .soc:hover .ic { background: #fff; color: #1C3049; }
  .soc .ic svg { width: 24px; height: 24px; }
  .soc b { font-family: "Figtree", sans-serif; font-size: 1.05rem; display: block; }
  .soc span { color: var(--slate); font-size: 0.88rem; transition: color 0.3s ease; }
  .soc:hover span { color: rgba(255, 255, 255, 0.75); }
  @media (max-width: 860px) { .soc-grid { grid-template-columns: 1fr; } }

  /* Mountain Adventures (Block von der alten Startseite uebernommen, Martin 2026-08-11):
     Panoramabild oben, darunter der Text; Bild stammt 1:1 von der alten Site (1200px). */
  .adventures-bild { margin: 0 0 clamp(32px, 5vw, 48px); }
  .adventures-bild img {
    display: block; width: 100%; height: auto;
    border-radius: var(--radius); box-shadow: var(--shadow-rest); border: 1px solid var(--mist);
  }
  .adventures .section-head { margin-bottom: 0; }

  /* FAQ */
  /* Der FAQ-Kopf hat keinen Einleitungstext; der volle section-head-Abstand
     (bis 72px) wirkt dort zu gross (Martin 2026-08-11). */
  .faq .section-head { margin-bottom: clamp(24px, 3.5vw, 40px); }
  .faq details {
    background: var(--card); border-radius: 12px;
    border: 1px solid var(--mist); box-shadow: var(--shadow-rest);
    margin-bottom: 12px; overflow: hidden;
  }
  .faq summary {
    cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px;
    padding: 18px 22px; font-family: "Figtree", sans-serif; font-weight: 600; font-size: 1.02rem;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+" / ""; color: var(--accent-ink); font-weight: 700; font-size: 1.2rem; line-height: 1.2;
    transition: transform 0.25s ease;
  }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq .a { padding: 0 22px 20px; color: var(--slate); font-size: 0.95rem; max-width: 70ch; }

  /* Footer */
  .site-footer { background: var(--night); color: var(--night-ink); padding: 64px 0 32px; }
  .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 30px; }
  .site-footer h4 {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--night-slate); margin-bottom: 14px; font-weight: 600;
  }
  .site-footer a { color: var(--night-ink); text-decoration: none; }
  .site-footer a:hover { text-decoration: underline; }
  .site-footer ul { list-style: none; display: grid; gap: 8px; font-size: 0.94rem; }
  .site-footer .addr { font-style: normal; font-size: 0.94rem; line-height: 1.7; color: var(--night-slate); }
  .site-footer .addr b { color: var(--night-ink); }
  /* Seitenlinks in der untersten Leiste statt eigener Liste/Zeile (Martin
     2026-08-12, zweistufig eingedampft: erst Zeile, dann ganz in die Leiste). */
  .footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .footer-links a, .footer-links button {
    color: var(--night-slate); background: none; border: 0; padding: 0;
    font: inherit; cursor: pointer; text-decoration: none;
  }
  .footer-links a:hover, .footer-links button:hover { color: var(--night-ink); text-decoration: underline; }
  .footer-base {
    border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 22px;
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
    font-size: 0.8rem; color: var(--night-slate);
  }
  @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

  /* WhatsApp-Kontakt (schwebend) */
  .wa-float {
    position: fixed; right: 22px; bottom: 22px; z-index: 70;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25D366; color: #fff; display: grid; place-items: center;
    box-shadow: 0 12px 30px rgba(16, 21, 28, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 18px 40px rgba(16, 21, 28, 0.35); }
  .wa-float svg { width: 30px; height: 30px; }
  @media (max-width: 700px) { .wa-float { bottom: 84px; right: 16px; width: 54px; height: 54px; } }

  /* Sticky Mobile CTA */
  .sticky-cta {
    position: fixed; left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 55;
    display: none; text-align: center;
    box-shadow: 0 10px 30px rgba(16, 21, 28, 0.35);
  }
  @media (max-width: 700px) {
    .sticky-cta.visible { display: block; }
    body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  }

  /* WhatsApp-Button erst nach dem Hero einblenden, solange die Buchungskarte
     unten im Hero liegt (bis 900px sowie Telefon-Querformat); nur mit JS. */
  @media (max-width: 900px), ((pointer: coarse) and (max-height: 500px)) {
    .js .wa-float { opacity: 0; pointer-events: none; transform: translateY(10px);
      transition: opacity 0.25s ease, transform 0.25s ease; }
    .js .wa-float.visible { opacity: 1; pointer-events: auto; transform: none; }
    .js .wa-float.visible:hover { transform: translateY(-3px) scale(1.05); }
  }

  /* ---------- Mobile-Layout (Telefone): Buchung zuerst, Bilder frei ----------
     Gilt auch fuer Telefone im Querformat (Touch + niedrige Hoehe). */
  @media (max-width: 700px), ((pointer: coarse) and (max-height: 500px)) {
    /* Hero kompakter: Buchungskarte sicher im ersten Screen */
    .hero h1 { font-size: 2.1rem; margin-bottom: 4px; }
    .booking { margin-top: 16px; }
    .hero-inner { padding-bottom: 24px; }

    /* Sektionen dichter */
    section { padding: 56px 0; }
    /* Naht-Regel auch schmal halten (setzt das padding oben sonst wieder) */
    .seite-start .ablauf, .seite-start .team, .seite-start .adventures, .seite-start .wissen, .seite-start .faq { padding-top: 0; }

    /* USPs: kompakter Swipe-Streifen statt langer Liste - die Fluege ruecken
       nach vorn, die Verkaufsargumente bleiben als Karten zum Wischen. */
    .usps { padding: 32px 0 8px; }
    .usp-grid {
      display: flex; gap: 12px; overflow-x: auto;
      scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
      padding: 4px 4px 16px; margin: 0 -4px;
      scrollbar-width: none;
    }
    .usp-grid::-webkit-scrollbar { display: none; }
    .usp {
      flex: 0 0 76%; scroll-snap-align: start;
      background: var(--card); border: 1px solid var(--mist); border-radius: 14px;
      padding: 16px 18px;
    }
    .usp-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .usp .tick { width: 24px; height: 24px; margin-bottom: 12px; flex-shrink: 0; }
    .usp-kopf .tick { margin-bottom: 0; }
    .usp-kopf h3 { margin-bottom: 0; }

    /* Pilotenteam: Swipe-Reihe statt acht gestapelter Karten (spart ~2700px
       Scrollweg); die Karten behalten Bild + Kurztext, wie der USP-Streifen */
    .team-grid {
      display: flex; gap: 14px; overflow-x: auto;
      scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
      padding: 4px 4px 16px; margin: 0 -4px;
      scrollbar-width: none;
    }
    .team-grid::-webkit-scrollbar { display: none; }
    .pilot { flex: 0 0 74%; scroll-snap-align: start; }

    /* Winter: Textpanel unter dem Bild (Media-Regeln beim Winter-Abschnitt) */
    .winter .wrap { padding-top: 30px; padding-bottom: 54px; }
    .winter h2 { max-width: none; }
    .winter p { max-width: none; }
  }

  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .js .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

  /* Sprachschalter im GoPro-Stil (Martin 2026-07-30, Variante 13 der
     Auswahlseite): kleine 4:3-Fahne (24x18, flag-icons, MIT-Lizenz) plus
     fettes Sprachkuerzel als Text. Kein Kreis, kein Kasten; die Textfarbe
     folgt dem Header (weiss ueber Bild, dunkel auf dem gescrollten Header). */
  .header-tools { display: flex; align-items: center; gap: 14px; }
  .lang-switch {
    display: inline-flex; align-items: center; gap: 7px;
    color: inherit; text-decoration: none;
    flex-shrink: 0; /* im engen Mobil-Header sonst zusammengequetscht */
    transition: opacity 0.15s ease;
  }
  .lang-switch img { width: 24px; height: 18px; display: block; }
  .lang-switch .lang-code {
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1;
  }
  .lang-switch:hover { opacity: 0.8; }
  /* Schmale Telefone: Leiste kompakter, sonst ragt der Buchen-Knopf ueber den
     rechten Rand (gemessen: rechte Kante 364.6px, haeufigste Android-Breite
     360px). WICHTIG: Diese Bloecke muessen NACH den .header-tools-/.bar-
     Basisregeln stehen, gleiche Spezifitaet - weiter oben verlieren sie die
     Kaskade (so geschehen am 2026-07-30). */
  @media (max-width: 460px) {
    .site-header .bar { gap: 12px; }
    .header-tools { gap: 10px; }
    .header-cta { padding: 11px 16px; font-size: 0.92rem; }
  }
  @media (max-width: 380px) {
    .logo img { height: 30px; }
  }

  /* Seitenkopf der Unterseiten: Titel steht UNTER dem Bild (Stumboeck-Muster,
     Martin 2026-07-27). Startseite behaelt ihren Vollbild-Hero mit Text im Bild. */
  .seitenkopf { padding: clamp(30px, 4.5vw, 52px) 0 6px; max-width: 860px; }
  .seitenkopf .eyebrow { color: var(--accent-ink); opacity: 1; }
  .seitenkopf h1 {
    font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800;
    margin: 8px 0 0; line-height: 1.12; color: var(--ink);
    text-wrap: balance; max-width: 24ch;
  }
  .seitenkopf-mehr { margin-top: 14px; }
  .seitenkopf-mehr p { color: var(--slate); max-width: 62ch; font-size: 1.05rem; }
  .seitenkopf-mehr p + p { margin-top: 10px; }
  .seitenkopf-mehr .fl-cta { margin-top: 16px; }
  /* Band-CTA-Zeilen waren fuer dunklen Grund gestylt; im hellen Seitenkopf umfaerben */
  .seitenkopf-mehr .fl-nebencta { color: var(--slate); opacity: 1; }
  .seitenkopf-mehr .fl-nebencta a { color: var(--brand-deep); }

  /* ---------------- Consent-Banner (Eigenbau 2026-07-31) ----------------
     Feste Karte unten links, blockiert keinen Inhalt (EDOEB/EDPB), beide
     Entscheidungs-Buttons GLEICHWERTIG gestaltet (kein Dark Pattern). */
  .cb { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; }
  @media (min-width: 640px) { .cb { right: auto; max-width: 420px; } }
  .cb-karte {
    /* Bewusst feste helle Optik: die Theme-Variablen kippen im Dark Mode
       (helle Schrift) und die Karte bleibt so in beiden Themes lesbar. */
    background: #fff; color: #1D232A;
    border-radius: 14px; padding: 18px 20px;
    box-shadow: 0 6px 30px rgba(16, 21, 28, 0.25), 0 0 0 1px rgba(16, 21, 28, 0.06);
  }
  .cb-titel { font-size: 1.02rem; font-weight: 800; margin: 0 0 6px; }
  .cb-text { font-size: 0.86rem; line-height: 1.5; color: #444e58; margin: 0 0 12px; }
  .cb-text a { color: #35608F; }
  .cb-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .cb-btn {
    flex: 1 1 auto; cursor: pointer; border: 0; border-radius: 999px;
    background: #35608F; color: #fff;
    font-family: inherit; font-weight: 700; font-size: 0.88rem;
    padding: 10px 14px;
  }
  .cb-btn:hover { opacity: 0.9; }
  .cb-link {
    cursor: pointer; border: 0; background: none; color: #35608F;
    font-family: inherit; font-size: 0.85rem; text-decoration: underline; padding: 8px 4px;
  }
  .cb-btn:focus-visible, .cb-link:focus-visible {
    outline: 3px solid #C05621; outline-offset: 2px;
  }
  .cb-dialog-hintergrund {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(16, 21, 28, 0.5);
    display: flex; align-items: center; justify-content: center; padding: 16px;
  }
  /* display:flex wuerde sonst das hidden-Attribut ueberstimmen (UA-Regel
     [hidden]{display:none} hat gleiche Spezifitaet und verliert) - der Dialog
     stand dadurch beim ersten Test dauerhaft offen (2026-07-31). */
  .cb[hidden], .cb-dialog-hintergrund[hidden] { display: none; }
  .cb-dialog {
    background: #fff; color: #1D232A;
    border-radius: 14px; padding: 22px 24px; max-width: 460px; width: 100%;
    max-height: 90vh; overflow-y: auto;
  }
  .cb-kategorie { border-top: 1px solid #E3E8ED; padding: 10px 0; }
  .cb-kategorie label { display: flex; gap: 8px; align-items: center; font-size: 0.92rem; cursor: pointer; }
  .cb-kategorie input { width: 17px; height: 17px; accent-color: #35608F; }
  .cb-kategorie p { font-size: 0.82rem; color: #5B6B7A; margin: 4px 0 0 25px; }
  .cb-dialog .cb-aktionen { margin-top: 14px; }
  .cb-fuss { margin: 10px 0 0; font-size: 0.8rem; }
  .cb-fuss a { color: #35608F; }
  /* Footer-Zeile mit Rechtslinks */
  .footer-base .recht a, .footer-base .recht button {
    color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; text-decoration: underline; text-underline-offset: 2px;
  }
  .footer-base .recht { display: flex; gap: 14px; flex-wrap: wrap; }

  /* Datenschutz: Textseite ohne Bild-Band - der Header ist hier von Anfang an
     weiss, sonst schwebt der helle Schriftzug auf hellem Grund. */
  /* Gleiche Spezifitaet wie die Verlaufs-Regel (body:not(...):not(...)),
     steht spaeter in der Datei und gewinnt darum die Kaskade. */
  body.seite-datenschutz .site-header:not(.scrolled) {
    background: #fff; color: #1D232A;
    box-shadow: 0 1px 0 rgba(16, 21, 28, 0.08);
  }
  body.seite-datenschutz .site-header .logo-on-dark { display: none; }
  body.seite-datenschutz .site-header .logo-on-light { display: block; }
  .seite-datenschutz main { padding-top: 86px; }