/* capetown-helicopter.com — Grundgerüst
 *
 * FARBEN, und warum diese:
 *   Das NYC-Schema (Navy, Creme, Sonnenuntergangsorange) ist dort mit dem
 *   Sunset-Flug begründet. Für Kapstadt trägt diese Begründung nicht.
 *
 *   Hier stehen zwei Farben für die zwei Dinge, um die jede Route geht:
 *     --c-ozean   das tiefe Blaugrün der beiden Ozeane. Die meistgebuchte
 *                 Route heisst "Two Oceans", die längste endet am Kap.
 *     --c-sand    der Sandstein des Tafelbergs und der Flechten auf dem Fels
 *                 am Cape Point. Auf sieben der zehn eigenen Fotos zu sehen.
 *   Dazu ein warmes Off-White, damit die Luftaufnahmen nicht gegen ein
 *   grelles Weiss antreten müssen.
 */

:root {
  --c-ozean:      #0d3b52;
  --c-ozean-tief: #082a3b;
  --c-sand:       #c07d33;
  --c-sand-hell:  #f3e4d0;
  --c-creme:      #faf7f2;
  --c-ink:        #17242b;
  --c-grau:       #5d6b73;
  --c-linie:      #e2dcd2;
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem;
  --radius: 10px;
  --breite: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-creme); color: var(--c-ink);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s2); letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 var(--s2); }
a  { color: var(--c-ozean); }
img, picture { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--breite); margin-inline: auto; padding-inline: var(--s2); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--s2); top: var(--s2); background: #fff; padding: var(--s1) var(--s2); z-index: 9; }

/* --- Kopf ---------------------------------------------------------------- */
.kopf { background: var(--c-ozean); color: #fff; }
.kopf a { color: #fff; text-decoration: none; }
.kopf-in { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding-block: var(--s2); }
.marke { font-weight: 700; letter-spacing: -.02em; }
.nav { display: flex; gap: var(--s3); margin-inline-start: auto; flex-wrap: wrap; }
.nav a { opacity: .9; }
.nav a:hover, .kopf a:focus-visible { opacity: 1; text-decoration: underline; }
.sprachwahl select {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4);
  border-radius: 6px; padding: 4px 6px; font: inherit; font-size: .85rem;
}
.sprachwahl option { color: var(--c-ink); }

/* --- Kopfbereich der Seite ----------------------------------------------- */
.kopfbereich { background: #fff; border-bottom: 1px solid var(--c-linie); }
.kopfbereich-in { display: grid; gap: var(--s4); padding-block: var(--s4);
                  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.krume { font-size: .85rem; margin-bottom: var(--s1); }
.lead { font-size: 1.15rem; color: var(--c-grau); }
.abpreis { font-size: 1.1rem; margin-top: var(--s3); }
.abpreis strong { font-size: 1.6rem; color: var(--c-ozean-tief); }
.abpreis span { color: var(--c-grau); }
.meta { font-size: .9rem; color: var(--c-grau); }
.kopfbereich-bild { margin: 0; }
.kopfbereich-bild picture img { border-radius: var(--radius); }
/* Hochformat-Bilder duerfen den Textblock nicht ueberragen. */
.kopfbereich-bild picture img { max-height: 460px; width: 100%; object-fit: cover; object-position: center 45%; }

/* --- Abschnitte ---------------------------------------------------------- */
section { padding-block: var(--s5); }
.kopfbereich { padding-block: 0; }

/* --- Vergleichstabelle --------------------------------------------------- */
.tabellenrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.verkaeufer { width: 100%; border-collapse: collapse; background: #fff;
                   border: 1px solid var(--c-linie); border-radius: var(--radius); }
table.verkaeufer th, table.verkaeufer td {
  padding: var(--s2); border-bottom: 1px solid var(--c-linie); vertical-align: top; text-align: left;
}
table.verkaeufer th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
                      color: var(--c-grau); font-weight: 600; }
table.verkaeufer tr:last-child td { border-bottom: 0; }
table.verkaeufer .r { text-align: right; }
table.verkaeufer .klein, .klein { font-size: .85rem; color: var(--c-grau); }
tr.beste { background: var(--c-sand-hell); }
.preis strong { display: block; white-space: nowrap; font-size: 1.05rem; color: var(--c-ozean-tief); }
.vorbehalt { display: block; font-size: .78rem; color: var(--c-grau); margin-top: 2px; }
.etikett { display: inline-block; margin-top: var(--s1); background: var(--c-sand); color: #fff;
           font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
           padding: 2px 8px; border-radius: 999px; }
.unbelegt { color: var(--c-grau); font-style: italic; }

.cta { display: inline-block; background: var(--c-sand); color: #fff !important; text-decoration: none;
       padding: .6rem 1rem; border-radius: 8px; font-weight: 600; white-space: nowrap; font-size: .9rem; }
.cta:hover, .cta:focus-visible { background: #a86a26; }

.hinweiskasten { background: #fff; border: 1px dashed var(--c-sand); border-radius: var(--radius);
                 padding: var(--s2) var(--s3); color: var(--c-ink); }

/* --- Betreiberkarten ------------------------------------------------------ */
.karten { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          margin-bottom: var(--s3); }
.karte { background: #fff; border: 1px solid var(--c-linie); border-radius: var(--radius); padding: var(--s3); }
.karte dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s2); margin: 0 0 var(--s2); font-size: .9rem; }
.karte dt { color: var(--c-grau); }
.karte dd { margin: 0; }
.karte ul { margin: 0; padding-inline-start: 1.1rem; }

/* --- Bildnachweis --------------------------------------------------------- */
.bildnachweis { font-size: .75rem; color: var(--c-grau); margin: var(--s1) 0 0; }
.bildnachweis a { color: var(--c-grau); }
figcaption { margin: 0; }

/* --- Fuss ----------------------------------------------------------------- */
.fuss { background: var(--c-ozean-tief); color: #cfd9df; padding-block: var(--s4); margin-top: var(--s5); }
.fuss a { color: #fff; }
.fuss-hinweis { font-size: .85rem; max-width: 62ch; }
.fuss-nav { display: flex; gap: var(--s3); flex-wrap: wrap; font-size: .85rem; margin-top: var(--s2); }

/* --- Mobil ---------------------------------------------------------------- */
@media (max-width: 899px) {
  .kopfbereich-in { grid-template-columns: 1fr; }
  /* Der Text steht zuerst. Ein Hochformat-Bild vor der Ueberschrift schiebt auf
     dem Handy die ganze Seite unter die Falz — genau der Fehler, den NYC bei
     seinem Hero macht. */
  .kopfbereich-bild picture img { max-height: 260px; }
  .nav { margin-inline-start: 0; width: 100%; gap: var(--s2); font-size: .95rem; }

  /* Die Vergleichstabelle wird zu Karten. Seitwaerts scrollen heisst sonst:
     der Preis, also die wichtigste Spalte, ist unsichtbar. */
  .tabellenrahmen { overflow-x: visible; }
  table.verkaeufer, table.verkaeufer tbody, table.verkaeufer tr, table.verkaeufer td { display: block; width: 100%; }
  table.verkaeufer thead { display: none; }
  table.verkaeufer { border: 0; background: transparent; }
  table.verkaeufer tr {
    background: #fff; border: 1px solid var(--c-linie); border-radius: var(--radius);
    padding: var(--s2); margin-bottom: var(--s2);
  }
  table.verkaeufer tr.beste { border-color: var(--c-sand); }
  table.verkaeufer td { border: 0; padding: 4px 0; text-align: left !important; }
  table.verkaeufer td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-grau);
  }
  table.verkaeufer td.preis { border-top: 1px solid var(--c-linie); margin-top: var(--s1); padding-top: var(--s2); }
  .preis strong { font-size: 1.25rem; }
  .cta { display: block; text-align: center; margin-top: var(--s2); }
}

/* --- Startseite und Hubs -------------------------------------------------- */
.kopfbereich-in.einspaltig { grid-template-columns: 1fr; }
.kopfbereich .cta { margin-top: var(--s2); }

/* Die Routenübersicht ist schmaler als die Verkäufertabelle: fünf Spalten,
   kein Buchungsknopf. Sie darf deshalb auf dem Handy Tabelle bleiben —
   die Kartenregeln greifen trotzdem, weil sie an .verkaeufer hängen. */
table.routen td.preis strong { font-size: 1rem; }

/* Der Ehrlichkeitsblock. Kein Kasten, keine Warnfarbe — er trägt das
   Versprechen der Site und soll gelesen, nicht überblättert werden. */
.ehrlichkeit { background: #fff; border-block: 1px solid var(--c-linie); }
.ehrlich-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3);
                 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ehrlich-liste li { border-inline-start: 3px solid var(--c-sand); padding-inline-start: var(--s2);
                    color: var(--c-ink); }

/* Hochformat neben kurzem Text: kleiner deckeln, sonst klafft die Textspalte.
   Aufgefallen am 24.08.2026 im Wetterabschnitt der Startseite. */
.kopfbereich-in.schmalbild { grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr); }
.kopfbereich-in.schmalbild .kopfbereich-bild picture img { max-height: 320px; }

/* --- Kennzahlen im Seitenkopf --------------------------------------------- */
.intro { max-width: 62ch; }
.kennzahlen { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s3);
              padding-top: var(--s3); border-top: 1px solid var(--c-linie); }
.kz-wert  { display: block; font-size: 1.5rem; font-weight: 700; color: var(--c-ozean-tief);
            line-height: 1.1; }
.kz-label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
            color: var(--c-grau); margin-top: 2px; }

/* --- Produktfoto in der Tabelle ------------------------------------------- */
th.sp-bild, td.sp-bild { width: 132px; }
.produktbild { width: 116px; height: 78px; object-fit: cover; border-radius: 8px; display: block; }
/* Fehlt das Foto, bleibt der Platz gleich gross — sonst rutschen die Spalten
   je Zeile um, und die Tabelle wirkt kaputt statt unvollstaendig. */
.bild-fehlt { display: block; width: 116px; height: 78px; border-radius: 8px;
              background: repeating-linear-gradient(45deg, #f0ebe3, #f0ebe3 6px, #e7e0d5 6px, #e7e0d5 12px); }

/* --- Badges ---------------------------------------------------------------- */
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.badge { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
         padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.badge--stark { background: var(--c-ozean); color: #fff; }
.badge--leise { background: var(--c-sand-hell); color: #7a4f16; }
.bewertung { display: block; margin-top: 6px; font-size: .85rem; color: var(--c-ink); }
.badge-erklaerung { margin-top: var(--s2); max-width: 70ch; }

/* --- Buchungsknopf: immer gleich breit ------------------------------------- */
/* „Book at GetYourGuide" ist zehn Zeichen laenger als „Book at Viator". Ohne
   feste Breite sieht die Spalte aus, als waeren die Angebote verschieden viel
   wert. Sie sind es nicht. */
th.sp-cta, td.sp-cta { width: 190px; }
.cta { min-width: 174px; text-align: center; }

/* --- Streckenkarten -------------------------------------------------------- */
.karte.strecke h3 { font-size: 1rem; }
.ortsliste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ortsliste li { background: var(--c-creme); border: 1px solid var(--c-linie); border-radius: 999px;
                padding: 3px 10px; font-size: .85rem; }

/* --- FAQ ------------------------------------------------------------------- */
.faq { background: #fff; border-block: 1px solid var(--c-linie); }
.faq-liste { max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--c-linie); }
.faq summary { cursor: pointer; padding: var(--s2) 0; font-weight: 600; list-style: none;
               display: flex; justify-content: space-between; gap: var(--s2); align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--c-sand); font-weight: 700; font-size: 1.2rem; }
.faq details[open] summary::after { content: '–'; }
.faq-antwort { padding-bottom: var(--s2); }
.faq-antwort p { margin: 0; max-width: 72ch; }
.faq-antwort em { font-style: normal; background: var(--c-sand-hell); padding: 1px 4px; border-radius: 3px; }

@media (max-width: 899px) {
  th.sp-bild, td.sp-bild, th.sp-cta, td.sp-cta { width: auto; }
  td.sp-bild::before { content: none; }
  .produktbild, .bild-fehlt { width: 100%; height: 160px; }
  .cta { min-width: 0; width: 100%; }
  .kennzahlen { gap: var(--s3); }
}

/* --- Fliesstext-Abschnitte auf der Startseite ------------------------------ */
.fliesstext { background: #fff; border-block: 1px solid var(--c-linie); }
.fliesstext p { max-width: 72ch; }
.fliesstext h2 { margin-top: var(--s4); }
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext em { font-style: normal; background: var(--c-sand-hell); padding: 1px 4px; border-radius: 3px; }
table.routen .badges { margin-top: 4px; }
/* Ein 72-Zeichen-Textblock in einem 1120er Container sieht unfertig aus.
   Der Abschnitt bekommt deshalb seine eigene, schmalere Breite. */
.fliesstext .wrap, .faq .wrap { max-width: 840px; }

/* --- Routenkarten auf der Startseite --------------------------------------- */
.routenkarten { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rk { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-linie);
      border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--c-ink);
      transition: border-color .15s, transform .15s; }
.rk:hover, .rk:focus-visible { border-color: var(--c-sand); transform: translateY(-2px); }
.rk-bild { position: relative; background: var(--c-ozean); }
.rk-bild .rk-foto, .rk-kein-foto { display: block; width: 100%; height: 170px; object-fit: cover; }
/* Keine Route ohne belegtes Foto bekommt ein fremdes untergeschoben. */
.rk-kein-foto { background:
    linear-gradient(160deg, var(--c-ozean) 0%, var(--c-ozean-tief) 60%, #0a3247 100%); }
.rk-dauer { position: absolute; left: 12px; bottom: 12px; background: rgba(8,42,59,.86); color: #fff;
            padding: 4px 10px; border-radius: 8px; font-weight: 700; font-size: 1.05rem; }
.rk-dauer small { font-weight: 400; font-size: .72rem; opacity: .85; }
.rk-text { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.rk-text h3 { margin: 0; font-size: 1.15rem; }
.rk-sub { margin: 0; color: var(--c-grau); font-size: .9rem; }
.ortsliste--klein li { font-size: .78rem; padding: 2px 8px; }
.rk-fuss { margin: auto 0 0; display: flex; align-items: baseline; gap: var(--s2);
           flex-wrap: wrap; padding-top: var(--s2); border-top: 1px solid var(--c-linie); }
.rk-preis strong { font-size: 1.2rem; color: var(--c-ozean-tief); }
.rk-fuss .klein { color: var(--c-grau); }

/* Orte-Chips im Seitenkopf einer Route */
.orte { margin-top: var(--s3); }
.orte-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-grau);
          margin-bottom: var(--s1); font-weight: 600; }

/* --- Betreiberstreifen ----------------------------------------------------- */
.betreiberstreifen { padding-block: var(--s4); }
.streifen { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-wrap: wrap;
            gap: var(--s2) var(--s4); }
.streifen li { display: flex; flex-direction: column; }
.streifen a { font-weight: 600; }
.orte-hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--c-grau); }
.orte-hint::before { content: '— '; }

/* --- Marke in der Kopfleiste ---------------------------------------------- */
/* Das Zeichen steht auf einer hellen Kachel: Der Berg im Logo ist navy und
   wuerde auf der navy Kopfleiste verschwinden. */
.marke { display: flex; align-items: center; gap: .6rem; }
.marke-icon { width: 40px; height: 40px; border-radius: 9px; flex: none; }
.marke-text { display: flex; flex-direction: column; line-height: 1.05; }
.marke-1 { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em;
           font-weight: 600; color: var(--c-sand-hell); }
.marke-2 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.015em; color: #fff; }
@media (max-width: 899px) {
  .marke-icon { width: 34px; height: 34px; border-radius: 8px; }
  .marke-2 { font-size: 1rem; }
}

/* --- Faktenliste auf Betreiberseiten -------------------------------------- */
.fakten { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: var(--s1) var(--s3);
          margin: 0 0 var(--s3); }
.fakten dt { color: var(--c-grau); font-size: .9rem; }
.fakten dd { margin: 0; }
.zitat { display: block; color: var(--c-grau); font-size: .85rem; margin-top: 2px; }
.zitat-block { border-inline-start: 3px solid var(--c-sand); padding-inline-start: var(--s2);
               color: var(--c-grau); max-width: 66ch; }
table.verkaeufer td .klein { display: block; margin-top: 3px; }

/* --- Fliesstextseiten: Bild ueber die volle Breite, Weiterlink ------------- */
/* Gebraucht auf /best-time-to-fly/ und /credits/. Das Bild traegt seinen
   Nachweis wie ueberall sonst mit — deshalb ist es eine <figure> und kein
   nacktes <img>. */
.breitbild { margin: 0; }
.breitbild picture img { width: 100%; height: auto; max-height: 420px;
                         object-fit: cover; border-radius: var(--radius); display: block; }
.breitbild figcaption { margin-top: .4rem; }
.weiterlink { margin-top: var(--s3); font-weight: 600; }

/* --- Bildnachweisseite ---------------------------------------------------- */
.nachweise { display: grid; gap: var(--s3); }
.nachweis { display: grid; grid-template-columns: 220px 1fr; gap: var(--s3);
            align-items: start; padding-bottom: var(--s3); border-bottom: 1px solid var(--c-linie); }
.nachweis:last-child { border-bottom: 0; }
.nachweis img { width: 100%; height: 150px; object-fit: cover;
                border-radius: var(--radius); display: block; }
.nachweis dl { display: grid; grid-template-columns: minmax(110px, auto) 1fr;
               gap: .35rem var(--s2); margin: 0; }
.nachweis dt { color: var(--c-grau); font-size: .9rem; }
.nachweis dd { margin: 0; }
.nachweis .beschreibung { color: var(--c-grau); margin: var(--s2) 0 0; max-width: 60ch; }
@media (max-width: 699px) { .nachweis { grid-template-columns: 1fr; } }

/* --- 404 ------------------------------------------------------------------ */
.fehler { text-align: center; padding-block: var(--s5); }
.fehler .routenliste { list-style: none; padding: 0; margin: var(--s3) auto 0; max-width: 40ch;
                       text-align: start; display: grid; gap: .5rem; }

/* --- FAQ-Seite: Fragen nach Route gruppiert ------------------------------- */
.faq-routen { background: var(--c-creme); }
.faq-gruppe { margin-top: var(--s4); }
.faq-gruppe:first-of-type { margin-top: var(--s3); }
.faq-gruppe h3 { margin: 0 0 var(--s2); font-size: 1.15rem; }
.faq-gruppe .weiterlink { margin-top: var(--s2); font-size: .95rem; }

/* --- Rechtstexte ---------------------------------------------------------- */
/* Impressum und Datenschutz: eine Spalte, enger Satzspiegel, kein Bild. */
.rechtstext h2 { margin-top: var(--s4); font-size: 1.2rem; }
.rechtstext p { max-width: 68ch; }
.rechtstext .krume { margin-bottom: var(--s2); }
.faq-gruppe h3 { display: flex; align-items: baseline; gap: .6rem; padding-bottom: .4rem;
                 border-bottom: 2px solid var(--c-sand); font-size: 1.25rem; }
.faq-gruppe .gruppe-zeit { font-size: .85rem; font-weight: 400; color: var(--c-grau); }

/* --- Auskappmenue „Flights" im Kopf --------------------------------------- */
/* Oeffnet bei :hover und bei :focus-within. Der zweite Selektor ist kein
   Beiwerk: Ohne ihn ist das Menue mit der Tastatur unerreichbar. */
.nav-gruppe { position: relative; }
.nav-gruppe-kopf { display: inline-flex; align-items: center; gap: .35rem; }
.nav-pfeil { width: 0; height: 0; border-inline: 4px solid transparent;
             border-block-start: 5px solid currentColor; opacity: .75;
             transition: transform .12s ease; }
.nav-gruppe:hover .nav-pfeil, .nav-gruppe:focus-within .nav-pfeil { transform: rotate(180deg); }

.nav-menue {
  position: absolute; inset-inline-start: 0; top: 100%;
  /* Der Abstand ist bewusst 0 und die Flaeche stattdessen oben gepolstert:
     Eine Luecke zwischen Knopf und Menue laesst es zuklappen, sobald die Maus
     sie ueberquert. */
  margin: 0; padding: .5rem 0; list-style: none;
  min-width: 268px; z-index: 20;
  background: #fff; color: var(--c-ink);
  border: 1px solid var(--c-linie); border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(8, 42, 59, .18);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.nav-gruppe:hover .nav-menue, .nav-gruppe:focus-within .nav-menue {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-menue a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  padding: .5rem var(--s2); color: var(--c-ink); opacity: 1; white-space: nowrap;
}
.nav-menue a:hover, .nav-menue a:focus-visible { background: var(--c-creme); text-decoration: none; }
.nav-menue a[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--c-sand); }
.nav-menue-zeit { font-size: .82rem; color: var(--c-grau); }

@media (max-width: 899px) {
  /* Kein hover auf dem Handy — dort ist „Flights" schlicht ein Link auf den
     Routenabschnitt der Startseite, wo dieselben sechs Routen als Karten
     stehen. Ein aufklappbares Menue waere hier ein zweiter Weg zum selben
     Ziel, der nur Platz kostet. */
  .nav-menue { display: none; }
  .nav-pfeil { display: none; }
}
/* Der Vorbehalt unter einer Bewertung, die zum ganzen Listing gehoert und
   nicht zu diesem einen Flug. Steht klein darunter, nicht als Tooltip:
   Ein Tooltip ist auf dem Handy unsichtbar. */
.bewertung-vorbehalt { display: block; font-size: .78rem; color: var(--c-grau);
                       line-height: 1.3; margin-top: 2px; max-width: 26ch; }

/* --- Preisanker im Hero der Startseite ------------------------------------ */
/* Dieselben Kacheln wie auf den Routenseiten, aber ueber dem Knopf statt
   darunter: Der Preis soll VOR der Aufforderung stehen, nicht dahinter.
   Die erste Kachel traegt den Preis und wird deshalb hervorgehoben. */
.kennzahlen-hero { margin-bottom: var(--s3); }
.kennzahlen-hero div:first-child .kz-wert { color: var(--c-sand); }
@media (max-width: 480px) {
  .kennzahlen-hero { gap: var(--s3); }
  .kennzahlen-hero .kz-wert { font-size: 1.25rem; }
}

/* --- Mitlaufende Buchleiste (nur Handy, nur Routenseiten) ----------------- */
/* Auf grossen Bildschirmen gibt es sie nicht: Dort steht die Tabelle nach
   einem kurzen Wischen im Bild, und eine feste Leiste waere ein Balken ohne
   Anlass. Deshalb ist sie hier ausgeblendet und wird unten eingeschaltet. */
.buchleiste { display: none; }

/* Der Sprung auf #vergleich landet sonst unter der Kopfleiste. */
#vergleich { scroll-margin-top: var(--s2); }

@media (max-width: 899px) {
  .buchleiste {
    display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
    /* Deckend, nicht durchscheinend: Bei .97 schimmerte der Text darunter
       durch und die Leiste sah nach Fehler aus. */
    background: #fff; border-top: 1px solid var(--c-linie);
    box-shadow: 0 -6px 20px rgba(8, 42, 59, .12);
    /* Auf iPhones liegt unten der Streifen fuer die Gestensteuerung. Ohne
       diese Zeile klebt der Knopf darunter und ist schwer zu treffen. */
    padding: .55rem var(--s2) calc(.55rem + env(safe-area-inset-bottom, 0px));
  }
  .buchleiste-in { display: flex; align-items: center; justify-content: space-between;
                   gap: var(--s2); max-width: var(--breite); margin-inline: auto; }
  /* „from" steht VOR dem Preis in derselben Zeile, „per person" darunter.
     Untereinander gesetzt brauchte der Block drei Zeilen und drueckte den
     Knopf an den Rand. */
  .buchleiste-preis { line-height: 1.2; white-space: nowrap; }
  .buchleiste-preis strong { font-size: 1.2rem; color: var(--c-ozean-tief); }
  .bl-von { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
            color: var(--c-grau); margin-inline-end: .25rem; }
  .bl-je  { display: block; font-size: .72rem; text-transform: uppercase;
            letter-spacing: .05em; color: var(--c-grau); }
  .buchleiste .cta { min-width: 0; padding-inline: var(--s3); white-space: nowrap; }

  /* Damit die Leiste nichts verdeckt — auch nicht die letzte Fusszeile. */
  body:has(.buchleiste) .fuss { padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px)); }
}