/* rio-helicopter.com — Stylesheet
 *
 * FARBEN, mit eigener Begruendung (BAUPLAN.md §8 verlangt sie je Region;
 * das NYC-Schema ist dort mit dem Sunset-Flug begruendet und traegt hier
 * nicht):
 *
 *   Rio fliegt tagsueber. Was man von oben sieht, ist immer dieselbe
 *   Kombination — das Gruen des Tijuca-Waldes gegen das Blau der Bucht,
 *   dazwischen die Ziegeldaecher.
 *     --tief    tiefes Atlantikgruen-Blau, die Bergsilhouette
 *     --grund   warmes Off-White, der Dunst ueber der Stadt
 *     --akzent  Terrakotta, die Daecher
 *   Kein Sonnenuntergangsorange: Das waere von NYC geborgt.
 *
 * MOBILE — die Restposten aus BAUPLAN.md §10 vermeiden: keine Sticky-Leiste,
 * Sprachumschalter waagerecht scrollbar statt abgeschnitten, Knoepfe mit
 * Umbruchschutz, Fusszeile umbruchfaehig.
 */

:root {
  --tief:        #0c3538;
  --tief-2:      #10474c;
  --tief-3:      #16606a;
  --grund:       #fbf8f4;
  --flaeche:     #ffffff;
  --flaeche-2:   #f4efe8;
  --text:        #16211f;
  --leise:       #5a6a67;
  --linie:       #e5ded4;
  --linie-2:     #d3c9bb;
  --akzent:      #b8482a;
  --akzent-2:    #97371e;
  --akzent-weich:#fdf0eb;
  --gut:         #1c6b4a;
  --gut-weich:   #eaf4ee;
  --stern:       #d98324;
  --warn:        #8a5a00;
  --warn-grund:  #fdf6e6;

  --r-s: 8px; --r-m: 12px; --r-l: 18px;
  --breite: 68rem;
  --schatten: 0 1px 2px rgba(12,53,56,.06), 0 6px 20px rgba(12,53,56,.07);
  --schatten-2: 0 2px 6px rgba(12,53,56,.10), 0 18px 44px rgba(12,53,56,.12);

  --stern-maske: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0e1413; --flaeche: #16201f; --flaeche-2: #1d2927;
    --text: #ecebe6; --leise: #a4b2ae; --linie: #26332f; --linie-2: #33433e;
    --akzent-weich: #2b1a14; --gut-weich: #14251d; --warn-grund: #251f12;
    --schatten: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
    --schatten-2: 0 2px 8px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.45);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 17px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.15; text-wrap: balance; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.05rem); letter-spacing: -.018em; }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }

a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--akzent-2); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }

.sprungmarke { position: absolute; left: -9999px; background: var(--akzent); color: #fff; padding: .7rem 1.1rem; z-index: 20; border-radius: 0 0 var(--r-s) 0; }
.sprungmarke:focus { left: 0; top: 0; }

.bahn { max-width: var(--breite); margin-inline: auto; padding-inline: 1.25rem; }

/* ================================================================== Kopf */
.kopf {
  background: var(--tief);
  color: #fff;
  position: relative;
}
.kopf-innen {
  max-width: var(--breite); margin-inline: auto; padding: .85rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.6rem;
}
.kopf a { color: #fff; }

.marke { text-decoration: none; margin-right: auto; display: flex; align-items: center; line-height: 1.25; }
/* Logo statt Schriftzug. Hoehe in rem, damit es mit der Schrift skaliert;
   width:auto haelt das Seitenverhaeltnis, width/height im HTML halten den
   Platz frei, bevor die Datei da ist. */
.marke-logo { height: 2.1rem; width: auto; display: block; }

/* NAVIGATION IN DREI GRUPPEN (26.08.2026)
   Aufklappen ohne JavaScript: :hover fuer die Maus, :focus-within fuer die
   Tastatur. Der Gruppenname ist selbst ein Link — wo weder das eine noch das
   andere greift (Touch), kommt man ueber ihn trotzdem an. */
.nav-oben { list-style: none; display: flex; flex-wrap: wrap; gap: .1rem .3rem; margin: 0; padding: 0; }
.nav a {
  display: inline-block; font-size: .88rem; text-decoration: none;
  padding: .38rem .6rem; border-radius: 999px; color: #d6e6e3;
}
.nav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.nav a[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }

.nav-gruppe { position: relative; }
.nav-gruppe--hier > .nav-hub { color: #fff; background: rgba(255,255,255,.10); }
.nav-hub::after { content: "\25be"; font-size: .68em; margin-left: .4em; opacity: .65; }
.nav-unter {
  list-style: none; margin: 0; padding: .3rem; display: none;
  position: absolute; top: 100%; left: 0; z-index: 60; min-width: 15rem;
  background: var(--tief-2); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-m); box-shadow: 0 16px 38px rgba(0,0,0,.35);
}
.nav-gruppe:hover > .nav-unter,
.nav-gruppe:focus-within > .nav-unter { display: block; }
.nav-unter a { display: block; border-radius: var(--r-s); white-space: nowrap; padding: .42rem .65rem; }

/* Sprachwahl als Aufklapper statt Reihe (Anweisung Patrick, 26.08.2026).
   Fuenf Kuerzel nebeneinander waren fuenf gleich laute Knoepfe fuer eine
   Entscheidung, die die meisten Gaeste nie treffen. */
.nav-gruppe--sprache { margin-left: .2rem; }
.sprache-jetzt {
  font: inherit; font-size: .88rem; cursor: pointer;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  color: #d6e6e3; border-radius: 999px; padding: .34rem .6rem;
  display: inline-flex; align-items: center; gap: .4rem;
}
.sprache-jetzt:hover { background: rgba(255,255,255,.18); color: #fff; }
.sprache-kuerzel { font-weight: 700; letter-spacing: .03em; }
.sprache-lang { display: none; }
.nav-unter--rechts { left: auto; right: 0; }
.nav-unter--rechts a { display: flex; gap: .55rem; align-items: baseline; }
.nav-unter--rechts [aria-current="true"] { background: rgba(255,255,255,.16); color: #fff; }

/* Der Burger-Umschalter. Sichtbar nur auf dem Telefon; die Checkbox bleibt
   fuer die Tastatur erreichbar, statt sie mit display:none abzuschalten. */
.menue-schalter { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.menue-knopf { display: none; }
.kopf-menue { display: flex; align-items: center; gap: .7rem 1.4rem; }

/* Waagerecht scrollbar statt abgeschnitten (BAUPLAN §10). */
/* KEIN overflow HIER. Bis zum 26.08.2026 stand hier `overflow-x: auto` — ein
   Rest aus der Zeit, als die Sprachen als Reihe von fuenf Kuerzeln standen und
   waagerecht wischbar sein mussten. Seit die Sprachwahl ein Aufklapper ist,
   schnitt genau diese Zeile das aufgeklappte Menue ab: Ein Element mit
   overflow bildet einen Beschneidungskontext, und ein absolut positioniertes
   Kind darin wird an seiner Kante abgeschnitten. Das Menue war da, sichtbar
   war es nicht. */
.sprachen { display: flex; }
.sprachen a { text-decoration: none; color: #d6e6e3; }

/* -------------------------------------------------------- Vertrauensleiste */
.trustleiste { background: var(--tief-2); color: #cfe4e1; font-size: .82rem; }
.trustleiste ul {
  max-width: var(--breite); margin-inline: auto; padding: .5rem 1.25rem;
  list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.6rem;
}
.trustleiste li { display: flex; align-items: center; gap: .4rem; }
.trustleiste li::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: #6fb3a4; flex: 0 0 auto;
}

/* ================================================================== Hero */
.hero { position: relative; }
.hero-bild { position: relative; }
/* 48vh, nicht 62vh (26.08.2026). Gemessen auf 1360x900: Mit 62vh stand die
   Ueberschrift der Startseite bei y=636 und die Knoepfe bei y=943 — beide
   unter der Falz. Der Gast sah ein Foto, ein Menue und musste scrollen, um
   zu erfahren, wovon die Seite handelt. Die Unterseiten hatten das Problem
   nie, weil .hero--seite schon auf 44vh steht. */
.hero-bild img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; object-position: center 55%; max-height: 48vh; }
.hero-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(12,53,56,.15) 0%, rgba(12,53,56,0) 45%, rgba(12,53,56,.55) 100%);
}
.hero-karte {
  max-width: var(--breite); margin: -5rem auto 0; position: relative; z-index: 1;
  background: var(--flaeche); border-radius: var(--r-l);
  padding: 2rem 1.9rem 1.7rem; box-shadow: var(--schatten-2);
}
.hero-karte h1 { margin-bottom: .35em; max-width: 18ch; }
.hero-karte .vorspann { font-size: 1.1rem; color: var(--leise); max-width: 62ch; margin-bottom: 1.4rem; }

.hero-fakten { display: flex; flex-wrap: wrap; gap: .9rem 2.2rem; border-top: 1px solid var(--linie); padding-top: 1.1rem; }
.hero-fakt { display: flex; flex-direction: column; }
.hero-fakt b { font-size: 1.65rem; letter-spacing: -.02em; line-height: 1.1; }
.hero-fakt span { font-size: .8rem; color: var(--leise); }

.bildunterschrift { max-width: var(--breite); margin: .55rem auto 0; padding-inline: 1.25rem; font-size: .8rem; color: var(--leise); }

/* ------------------------------------------------- Hero der Unterseiten */
.hero--seite .hero-bild img { aspect-ratio: 21/9; max-height: 44vh; }
.hero--seite .hero-karte { margin-top: -4rem; padding-bottom: 1.5rem; }
.hero--seite .hero-karte h1 { max-width: 22ch; }

/* ABSTAND HINTER DEM HERO (26.08.2026)
   Die Hero-Karte wird mit einem negativen Rand ins Bild hineingezogen. Damit
   endet der Hero-Abschnitt genau an ihrer Unterkante — und die erste
   Ueberschrift des Inhalts klebte daran. Die Flugseiten fiel das nicht auf,
   weil dort .abschnitt-kopf einen eigenen Abstand mitbringt; die Guide- und
   Heliport-Seiten beginnen direkt mit <article class="seite">.
   Hier steht deshalb der Abstand am NACHFOLGER, nicht am Hero: Was direkt
   folgt, ist je nach Seitentyp verschieden, aber es folgt immer etwas. */
.hero + .seite,
.hero + .text,
.hero + .vergleich,
.hero + .weiterlesen { margin-top: 2.8rem; }

.hero-knoepfe { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; margin-bottom: 1.3rem; }
/* Beide Knoepfe gleich hoch: der zweite traegt eine zweite Zeile. */
.hero-knoepfe .knopf { white-space: normal; display: flex; flex-direction: column; justify-content: center; }

.hero-fakt--note b { color: var(--stern); }
.hero-fakt--note span { display: flex; align-items: center; gap: .4rem; }

/* ------------------------------------------------------- Gut zu wissen */
.wissen {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-l); padding: 1.4rem 1.5rem 1.5rem;
  margin: 0 auto 2.6rem; box-shadow: var(--schatten); max-width: var(--breite);
}
.wissen h2 { font-size: 1.2rem; margin-bottom: .8rem; }
.wissen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
@media (min-width: 52rem) { .wissen ul { grid-template-columns: 1fr 1fr; gap: .7rem 2rem; } }
.wissen li { position: relative; padding-left: 1.5rem; font-size: .95rem; }
.wissen li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--tief-3);
}

/* ============================================================== Abschnitte */
main { display: block; }
.text, .seite, .vergleich, .cluster { max-width: var(--breite); margin: 0 auto; padding: 0 1.25rem; }
.text { margin-bottom: 2.6rem; }
.text > p { max-width: 68ch; color: var(--text); }
.seite > .vorspann { font-size: 1.14rem; color: var(--leise); max-width: 60ch; }
.klein { font-size: .86rem; color: var(--leise); }
.weiter { font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.weiter:hover { text-decoration: underline; }

.abschnitt-kopf { margin: 3rem auto 1.4rem; }
.abschnitt-kopf h2 { margin-bottom: .25em; }

.seitenbild { margin: 0 0 2rem; }
.seitenbild img { display: block; width: 100%; height: auto; border-radius: var(--r-l); }
figcaption { font-size: .82rem; color: var(--leise); margin-top: .5rem; }
figcaption.ehrlich { border-left: 3px solid var(--linie-2); padding-left: .8rem; }

.warnbox {
  background: var(--warn-grund); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent);
  border-left: 4px solid var(--warn);
  border-radius: var(--r-m); padding: 1.2rem 1.3rem; margin-bottom: 2rem;
}
.warnbox h2 { font-size: 1.15rem; }
.warnbox p { margin-bottom: 0; }
.warnung { color: var(--warn); font-weight: 500; }

/* ============================================================ Flugkarten */
.gruppe { margin-bottom: 2.8rem; }
.gruppe-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--linie); padding-bottom: .45rem; margin-bottom: 1.1rem; }
.gruppe-kopf h3 { margin: 0; font-size: 1.3rem; }
.gruppe-kopf a { text-decoration: none; }

.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-l); margin-bottom: 1.1rem; overflow: hidden;
  box-shadow: var(--schatten);
}
.karte--mit-bild { display: grid; grid-template-columns: 15rem 1fr; }
.karte-bild { position: relative; background: var(--flaeche-2); }
/* Das Foto IST der Buchungslink des Anbieters, von dem es stammt
   (Anweisung Patrick, 26.08.2026). Der Anker muss deshalb die ganze
   Flaeche fuellen, sonst waere nur ein Teil des Bildes anklickbar. */
.karte-bild > a, .topseller-bild > a { display: block; height: 100%; }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 11rem; }
.karte-bild > a:hover img, .topseller-bild > a:hover img { opacity: .92; }
.bildquelle {
  position: absolute; left: 0; bottom: 0; font-size: .66rem; color: #fff;
  background: rgba(12,53,56,.62); padding: .18rem .45rem; border-radius: 0 var(--r-s) 0 0;
}
.karte-inhalt { padding: 1.15rem 1.25rem 1.05rem; min-width: 0; }

.karte-kopf h3 { margin-bottom: .35rem; }
.karte-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 .9rem; font-size: .88rem; color: var(--leise); }
.karte-betreiber { font-weight: 600; color: var(--text); }
.karte-anzahl { margin-left: auto; font-size: .8rem; }

.pille { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; background: var(--flaeche-2); color: var(--leise); }
.pille--stark { background: var(--akzent-weich); color: var(--akzent-2); }

.zeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.zeile {
  display: grid; grid-template-columns: 1fr auto; gap: .6rem 1.2rem; align-items: center;
  padding: .8rem .9rem; border: 1px solid var(--linie); border-radius: var(--r-m);
  background: var(--flaeche);
}
.zeile--top { border-color: color-mix(in srgb, var(--gut) 35%, var(--linie)); background: var(--gut-weich); }
.zeile--transfer { background: var(--flaeche-2); }
.zeile-links { min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.zeile-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }

.verkaeufer { font-weight: 700; font-size: .95rem; }

/* ------------------------------------------------------------ Bewertung */
.bewertung { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--leise); }
.sterne {
  position: relative; display: inline-block; width: 5.4em; height: 1em; flex: 0 0 auto;
  background: var(--linie-2);
  -webkit-mask: var(--stern-maske) repeat-x left center / 1.08em 1em;
          mask: var(--stern-maske) repeat-x left center / 1.08em 1em;
}
.sterne-voll { position: absolute; inset: 0 auto 0 0; background: var(--stern); }
.bewertung-zahl { font-weight: 700; color: var(--text); }
.bewertung-anzahl { color: var(--leise); }
.bewertung--keine { font-style: italic; }

.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip {
  font-size: .74rem; color: var(--leise); background: var(--flaeche-2);
  border: 1px solid var(--linie); border-radius: 999px; padding: .16rem .55rem;
}
.chip--info { color: var(--tief-3); background: color-mix(in srgb, var(--tief-3) 8%, transparent); border-color: color-mix(in srgb, var(--tief-3) 25%, var(--linie)); }
.chip--gut { color: var(--gut); background: var(--gut-weich); border-color: color-mix(in srgb, var(--gut) 28%, var(--linie)); }
/* Der Abflugort ist ein Link auf seine Heliport-Seite. Er soll aussehen wie
   die uebrigen Chips, aber anfassbar wirken — deshalb nur eine gepunktete
   Unterlegung statt einer anderen Farbe. */
a.chip--ort { text-decoration: none; display: inline-block; }
a.chip--ort:hover { border-color: var(--akzent); color: var(--akzent); background: var(--akzent-weich); }

/* ------------------------------------------------------- Weiterlesen / Listen */
.linkliste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .7rem; }
.linkliste a { text-decoration: none; }
.linkliste--karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: .7rem; }
.linkliste--karten a {
  display: flex; flex-direction: column; gap: .2rem; height: 100%;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: .8rem .9rem; color: var(--text);
}
.linkliste--karten a:hover { border-color: var(--akzent); background: var(--akzent-weich); }
.linkliste--karten b { font-weight: 650; font-size: .95rem; text-wrap: pretty; }
.linkliste--karten span { font-size: .82rem; color: var(--leise); }

.weiterlesen { margin-top: 2rem; }
.weiterlesen h2 { font-size: 1.15rem; margin-bottom: .8rem; }
.weiterlinks { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .9rem; font-size: .9rem; }
.betreiber-fakten { font-size: .86rem; color: var(--text); margin: .5rem 0 0; text-wrap: pretty; }
.betreiber-links { font-size: .86rem; color: var(--leise); margin-top: .35rem; }
.betreiber-links a { color: var(--akzent); }

/* Hero ohne Bild: ohne Foto gaebe es nichts, wovor die Karte sitzen koennte.
   Dann traegt der dunkle Grund der Kopfleiste weiter und die Karte sitzt
   darin — derselbe Aufbau, nur ohne Bild. */
.hero--ohne-bild { background: var(--tief); padding-top: 2.6rem; }
.hero--ohne-bild .hero-karte { margin-top: 0; }

/* Anschrift als Kartenlink. Kein Knopf — ein Ort, den man antippen kann. */
/* DER KARTENLINK MUSS WIE EIN LINK AUSSEHEN (28.08.2026, Anweisung Patrick:
   „kaum zu erkennen"). Vorher erbte er die Textfarbe der Anschrift — also das
   gedaempfte --leise — und trug eine gepunktete Linie in --linie-2 plus einen
   Pfeil bei 55 % Deckkraft. Drei Abschwaechungen uebereinander auf einer Zeile,
   die ohnehin schon klein und leise ist. Jetzt in der Akzentfarbe, mit
   durchgezogener Unterkante und sichtbarem Pfeil. */
.anschrift--karte {
  color: var(--akzent); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
}
.anschrift--karte:hover { color: var(--akzent-2); border-bottom-color: var(--akzent-2); }
.anschrift--karte::after { content: " ↗"; font-size: .82em; opacity: .9; }

/* Rechtstexte. Sie sind lang und werden gelesen, nicht ueberflogen: kleinere
   Ueberschriften, engere Zeilen, damit die Gliederung traegt statt zu
   ueberrollen. */
.recht h2 { font-size: 1.25rem; margin-top: 2rem; }
.recht h3 { font-size: 1rem; margin-top: 1.3rem; }
.recht p  { font-size: .93rem; }

.etikett {
  font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: var(--gut); color: #fff; padding: .18rem .5rem; border-radius: 999px;
}
.etikett--rate { background: var(--stern); }

.preis { display: flex; align-items: baseline; gap: .3rem; white-space: nowrap; }
.preis strong { font-size: 1.5rem; letter-spacing: -.02em; }
.preis small { color: var(--leise); font-size: .76rem; }
.ohne-preis { color: var(--leise); font-style: normal; font-size: .92rem; }

.knopf {
  display: inline-block; background: var(--akzent); color: #fff;
  font-weight: 650; font-size: .9rem; padding: .6rem 1.05rem;
  border-radius: var(--r-s); text-decoration: none; text-align: center;
  /* BAUPLAN §10: bei NYC bricht der CTA in der italienischen Fassung. */
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.knopf:hover { background: var(--akzent-2); color: #fff; }

.hinweise { grid-column: 1 / -1; margin-top: .15rem; }
.hinweise summary { cursor: pointer; font-size: .82rem; color: var(--leise); font-weight: 600; }
.hinweise summary::marker { color: var(--akzent); }
.hinweise ul { margin: .5rem 0 0; padding-left: 1.15rem; font-size: .86rem; color: var(--leise); display: grid; gap: .3rem; }

/* =========================================================== Kategorien */
.kategorien { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr)); margin-bottom: 2.5rem; }
.kat {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l);
  padding: 1.3rem 1.35rem 1.2rem; box-shadow: var(--schatten);
  display: flex; flex-direction: column; gap: .8rem;
}
.kat-kopf h3 { margin: 0 0 .25rem; font-size: 1.25rem; }
.kat-kopf h3 a { color: inherit; text-decoration: none; }
.kat-kopf h3 a:hover { color: var(--akzent); }
.kat-zahlen { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0; font-size: .84rem; color: var(--leise); }
.kat-zahlen span + span::before { content: "·"; margin-right: .9rem; color: var(--linie-2); }
/* Rueckfallebene: eine feste Mindesthoehe fuer den Einleitungstext. Sie
   traegt, solange alle Texte aehnlich lang sind — auf Englisch tat sie das.
   Auf Deutsch nicht mehr: „Hubschrauberrundflaege" braucht zwei
   Ueberschriftszeilen, wo „Doors off" eine braucht, und derselbe Absatz
   laeuft ueber vier statt zwei Zeilen. Deshalb steht darunter die echte
   Loesung. */
.kat-text { margin: 0; color: var(--text); font-size: .96rem; min-height: 4.6em; }
.kat > .knopf--sek { margin-top: auto; }

/* DIE ECHTE LOESUNG: SUBGRID (26.08.2026)

   Eine Mindesthoehe raet, wie lang ein Text wird. Subgrid muss nicht raten:
   Die vier Bausteine jeder Kachel — Kopf, Text, Topseller, Link — liegen in
   vier Zeilen des AEUSSEREN Rasters. Damit teilen sich alle Kacheln
   derselben Reihe dieselben Zeilenhoehen, egal wie lang der Text in einer
   einzelnen ist. Das gilt fuer Deutsch genauso wie fuer Portugiesisch, ohne
   dass jemand eine Zahl nachstellt.

   Der letzte Baustein wird ausdruecklich in die letzte Zeile gesetzt: Eine
   Kategorie ohne Topseller hat nur drei statt vier Bausteine, und ohne diese
   Zeile saesse ihr Link eine Reihe zu hoch.

   Browser ohne Subgrid behalten die Mindesthoehe oben — schlechter, aber
   nicht kaputt. */
@supports (grid-template-rows: subgrid) {
  .kategorien { row-gap: 1rem; column-gap: 1.2rem; }
  .kat {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    gap: 0;
  }
  .kat-text { min-height: 0; }
  .kat > *:last-child { grid-row: -2 / -1; align-self: end; }
  /* Abstaende als Rand am Kind, NICHT als gap: Ein eigenes gap im Subgrid
     verschiebt die Kachel gegen die Zeilenkanten des Elternrasters. Raender
     liegen innerhalb der Zeile und lassen die Buendigkeit in Ruhe. */
  .kat > .kat-text  { margin-top: .55rem; }
  .kat > .topseller { margin-top: .85rem; }
  .kat > .knopf--sek { margin-top: .85rem; }
}

.knopf--sek {
  background: transparent; color: var(--akzent);
  border: 1.5px solid color-mix(in srgb, var(--akzent) 40%, transparent);
  font-weight: 650;
}
.knopf--sek:hover { background: var(--akzent-weich); color: var(--akzent-2); }

/* DER ZWEITE HERO-KNOPF IST EIN KAUF-KNOPF (28.08.2026)

   Anweisung Patrick: „Der sekundaere Button ist fuer mich nicht als klickbarer
   Kauf-Button erkennbar."

   Er trug bis heute .knopf--sek — dieselbe Geisterknopf-Optik wie der
   „alle ansehen"-Link in den Kategoriekacheln: weisse Flaeche, duenner Rand in
   40 % Akzentfarbe. Das ist fuer einen INTERNEN Weiterlink richtig und fuer
   einen Klick zum Verkaeufer falsch. Er sah aus wie ein Kasten mit einer
   Bewertung darin, nicht wie etwas, das man drueckt.

   Jetzt gefuellt, in der tiefen Blaugruen-Farbe der Vertrauensleiste. Gefuellt
   heisst Knopf; die andere Farbe haelt ihn hinter dem terrakottafarbenen
   Hauptknopf zurueck, statt zwei gleich laute CTAs nebeneinander zu stellen.

   Warum nicht ein heller Terrakotta-Ton mit vollem Rand: --akzent auf
   --akzent-weich haelt im dunklen Modus den Kontrast nicht (dort ist
   --akzent-weich #2b1a14, --akzent bleibt #b8482a). Weiss auf --tief-2 traegt
   in BEIDEN Modi, weil --tief-2 im dunklen Modus derselbe Wert bleibt.

   Der Pfeil sagt, dass es weitergeht — der Knopf oeffnet die Produktseite des
   Verkaeufers in einem neuen Tab. */
.knopf--kauf {
  background: var(--tief-2); color: #fff;
  border: 1.5px solid var(--tief-2);
  font-weight: 650;
  position: relative; padding-right: 2.2rem;
}
/* Der Pfeil sitzt absolut am rechten Rand, nicht im Textfluss: Die zweite
   Zeile (<small> mit Note und Stimmenzahl) ist ein Block, ein ::after im Fluss
   landete deshalb als DRITTE Zeile darunter. */
.knopf--kauf::after {
  content: "\2192"; font-weight: 700;
  position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
}
.knopf--kauf:hover { background: var(--tief); border-color: var(--tief); color: #fff; }
.knopf--kauf small { opacity: .85; }

/* Der zweite Hero-Knopf traegt eine zweite Zeile: Note und Zahl der
   Bewertungen. Deshalb hier kein Umbruchschutz wie bei .knopf. */
.hero-knoepfe .knopf--kauf { white-space: normal; line-height: 1.25; text-overflow: clip; }
.hero-knoepfe .knopf--kauf small {
  display: block; font-weight: 600; font-size: .78rem; opacity: .85; margin-top: .1rem;
}

/* ------------------------------------------------------------ Topseller */
.topseller {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 0; min-height: 8.5rem;
  border: 1px solid var(--linie); border-radius: var(--r-m); overflow: hidden;
  background: var(--flaeche-2);
}
.topseller--ohne-bild { grid-template-columns: 1fr; }
.topseller-bild { position: relative; }
.topseller-bild img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 8.5rem; }
.topseller-inhalt { padding: .8rem .9rem; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.topseller-titel { margin: 0; font-weight: 650; font-size: .95rem; text-wrap: pretty; }
.topseller-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
.topseller .preis strong { font-size: 1.25rem; }
.topseller .knopf { font-size: .84rem; padding: .48rem .8rem; white-space: normal; }
.etikett--top { background: var(--tief-3); align-self: flex-start; }

@media (max-width: 34rem) {
  .topseller { grid-template-columns: 1fr; }
  .topseller-bild img { min-height: 0; aspect-ratio: 16/9; }
}

/* --------------------------------------------- Beschreibung in der Karte */
.karte-text { margin: 0 0 .9rem; color: var(--text); font-size: .95rem; max-width: 68ch; }

/* ============================================================== Heliports */
.orte { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .7rem; }
.orte li { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); padding: .9rem 1.05rem; display: flex; flex-direction: column; gap: .3rem; box-shadow: var(--schatten); }
.anschrift { font-size: .86rem; color: var(--leise); }


/* ==================================================================== FAQ */
.faq { margin: 0; max-width: 72ch; }
.faq dt { font-weight: 700; margin-top: 1.6rem; font-size: 1.05rem; }
.faq dd { margin: .4rem 0 0; color: var(--leise); }

/* ============================================================== Fusszeile */
.fuss { background: var(--tief); color: #cddfdc; margin-top: 4rem; padding: 2.2rem 1.25rem 2.8rem; }
.fuss a { color: #fff; }
.offenlegung, .fuss-nav, .bildnachweise { max-width: var(--breite); margin-inline: auto; }
.offenlegung { font-size: .9rem; max-width: 62ch; }
.fuss-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .9rem; margin: 1.2rem auto; }
.bildnachweise { font-size: .76rem; color: #8fa9a5; line-height: 1.9; }
.bildnachweise a { color: #bfd6d2; }
.bildnachweis.fehlt { color: #ff9c6b; font-weight: 700; }

/* ================================================================= Mobil */
@media (max-width: 60rem) {
  .karte--mit-bild { grid-template-columns: 11rem 1fr; }
}
@media (max-width: 46rem) {
  /* Neun Menuepunkte brechen sonst auf drei Zeilen um und schieben den Hero
     nach unten. Einzeilig und wischbar wie der Sprachumschalter. */
  .kopf-innen { gap: .55rem 1rem; }
  .marke-logo { height: 1.75rem; }
  /* BURGER-MENUE. Auf dem Telefon steht im Kopf nur die Marke und ein Knopf.
     Alles andere — die drei Gruppen mit ihren Punkten und die Sprachwahl —
     liegt im aufklappbaren Feld darunter. Aufgeklappt wird flach: kein
     zweites Aufklappen im Aufklappen. */
  .menue-knopf {
    display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
    color: #d6e6e3; font-size: .82rem; font-weight: 650; letter-spacing: .02em;
    border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .42rem .7rem;
  }
  .menue-striche, .menue-striche::before, .menue-striche::after {
    display: block; width: 1.05rem; height: 2px; background: currentColor; border-radius: 2px;
  }
  .menue-striche { position: relative; }
  .menue-striche::before, .menue-striche::after { content: ""; position: absolute; left: 0; }
  .menue-striche::before { top: -.34rem; }
  .menue-striche::after  { top:  .34rem; }
  .menue-schalter:focus-visible + .menue-knopf { outline: 2px solid #fff; outline-offset: 2px; }
  .menue-schalter:checked + .menue-knopf { background: rgba(255,255,255,.14); color: #fff; }

  .kopf-menue { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: .2rem; }
  .menue-schalter:checked ~ .kopf-menue { display: flex; }

  .kopf-menue .nav-oben { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav-gruppe { position: static; }
  .nav-hub { font-weight: 700; }
  .nav-hub::after { content: none; }
  .nav-unter {
    display: block; position: static; min-width: 0; padding: 0 0 .4rem .55rem;
    background: none; border: 0; box-shadow: none;
  }
  .nav-unter a { padding: .34rem .6rem; }

  /* Sprachwahl im Menue: flach, mit ausgeschriebenem Namen. */
  .sprachen { border-top: 1px solid rgba(255,255,255,.14); margin-top: .5rem; padding-top: .5rem; }
  .sprache-jetzt { display: none; }
  .nav-gruppe--sprache { margin-left: 0; }
  .nav-unter--rechts { padding-left: 0; }
  .nav-unter--rechts a { display: flex; gap: .55rem; }
  .sprache-lang { display: inline; }

  .hero-karte { margin-top: -2.5rem; border-radius: var(--r-l) var(--r-l) 0 0; padding: 1.5rem 1.25rem 1.3rem; }
  /* 3/2 statt 4/3 (26.08.2026): Auf 390x844 stand der erste Knopf der
     Startseite bei y=855, elf Pixel unter der Falz. Das flachere Bild holt
     ihn darueber. Ein Knopf, den man erst durch Scrollen findet, ist auf
     dem Telefon ein halber Knopf. */
  .hero-bild img { aspect-ratio: 3/2; max-height: 46vh; }
  .karte--mit-bild { grid-template-columns: 1fr; }
  .karte-bild img { min-height: 0; aspect-ratio: 16/9; }
  .zeile { grid-template-columns: 1fr; }
  .zeile-rechts { align-items: stretch; }
  .preis { justify-content: flex-start; }
  .knopf { white-space: normal; }
  .karte-anzahl { margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  a, .knopf, .nav a { transition: background-color .15s, color .15s, border-color .15s; }
}

/* ====================================================== Streckenleiter
   Startseite: was man ab welcher Flugzeit sieht (28.08.2026).

   Drei Stufen, jede mit ihrer Flugzeit links und den Orten rechts, die AB
   dieser Stufe dazukommen. Die senkrechte Linie macht sichtbar, dass die
   Stufen aufeinander aufbauen und nicht nebeneinander stehen.

   Ohne Bild und ohne Skript — eine <ol> mit CSS. Das ueberlebt Screenreader,
   Druck und abgeschaltetes JavaScript. */
.strecke {
  list-style: none; margin: 1.4rem auto 0; padding: 0;
  display: grid; gap: 0;
}
.strecke-stufe {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 1.1rem;
  padding: .95rem 0; position: relative;
}
.strecke-stufe + .strecke-stufe { border-top: 1px solid var(--linie); }
/* Die Linie verbindet die Marken der Stufen. Sie sitzt hinter ihnen und endet
   an der letzten — deshalb :not(:last-child) statt eines Rahmens am Element. */
.strecke-stufe:not(:last-child)::before {
  content: ""; position: absolute; left: 1.55rem; top: 2.6rem; bottom: -.4rem;
  width: 2px; background: var(--linie-2);
}
.strecke-marke { position: relative; }
.strecke-marke a, .strecke-marke span {
  display: inline-block; background: var(--tief-2); color: #fff;
  font-weight: 650; font-size: .84rem; padding: .3rem .7rem;
  border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.strecke-marke a:hover { background: var(--tief); color: #fff; }
.strecke-marke small { display: block; color: var(--leise); font-size: .78rem; margin-top: .35rem; }
.strecke-orte {
  list-style: none; margin: 0; padding: .15rem 0 0;
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
}
.strecke-orte li {
  background: var(--flaeche-2); border: 1px solid var(--linie);
  border-radius: var(--r-s); padding: .28rem .6rem; font-size: .88rem;
}
/* Auf schmalen Schirmen untereinander: 8,5rem Marke plus Ortsnamen wie
   „Lagoa Rodrigo de Freitas" gehen sonst ueber den Rand. */
@media (max-width: 34rem) {
  .strecke-stufe { grid-template-columns: 1fr; gap: .5rem; }
  .strecke-stufe:not(:last-child)::before { display: none; }
  .strecke-marke small { display: inline; margin-left: .5rem; }
}

/* Ein Gruppenname ohne Untermenue braucht kein Aufklapp-Dreieck (28.08.2026).
   Seit die FAQ direkt in der Navigation steht, gibt es solche Punkte. */
.nav-hub--einzeln::after { content: none; }