/* helikopter-rundflug.com
   Klassennamen stehen vollstaendig in components.md. Wer eine neue braucht:
   erst dort eintragen, dann verwenden. */

:root{
  --c-ink:#132537;          /* Fliesstext */
  --c-ink-2:#51637a;        /* Nebentext */
  --c-line:#dfe6ee;
  --c-bg:#fff;
  --c-band:#f4f7fb;
  --c-brand:#0f2740;        /* Nachtblau — Kopf, Ueberschriften */
  --c-brand-2:#1d4e78;      /* Himmelblau — Links */
  --c-cta:#e0700f;          /* Orange — buchen */
  --c-cta-dark:#b95a08;
  --c-gut:#0f7a52;          /* Preis, guenstigster Anbieter */
  --c-warn:#9a5b00;
  --r:10px;
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2.25rem; --s-5:3.25rem;
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--c-bg);color:var(--c-ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
img{max-width:100%;height:auto}
a{color:var(--c-brand-2)}
a:hover{color:var(--c-cta-dark)}

.hrf-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-2)}
.hrf-prose{max-width:72ch}

.hrf-skip{position:absolute;left:-9999px}
.hrf-skip:focus{left:var(--s-2);top:var(--s-2);z-index:100;background:#fff;padding:var(--s-1) var(--s-2);border-radius:6px}

/* ---------------------------------------------------------- Kopfbereich */
.hrf-header{position:sticky;top:0;z-index:50;background:var(--c-brand);color:#fff}
.hrf-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:86px}
.hrf-logo{display:flex;align-items:center;min-width:0}
/* Der Schriftzug im Logo war bei 38 px kaum lesbar. 58 px sind gut die
   Haelfte mehr; die Kopfzeile waechst entsprechend mit, und die
   scroll-margin der Sprungziele ebenfalls — sonst landet ein Ankersprung
   unter der klebenden Kopfzeile.

   Unterhalb von rund 465 px passten Logo und Menueknopf nebeneinander nicht
   mehr in die Zeile: Das Logo ist 5:1 breit, bei 58 px Hoehe also 290 px, und
   mit dem Knopf zusammen 449 px. Der Kopf schob damit JEDE Seite der Site um
   knapp zwanzig Pixel zur Seite — auf dem Telefon sichtbar als Querscroll.
   Deshalb "max-height" statt "height": Das Bild behaelt sein Seitenverhaeltnis
   und schrumpft, sobald der Platz knapp wird. "min-width:0" erlaubt dem
   Flex-Element ueberhaupt erst zu schrumpfen, "flex:none" am Menue haelt den
   Knopf davon ab, stattdessen selbst schmaler zu werden. */
.hrf-logo img{display:block;width:auto;height:58px}
@media (max-width:520px){ .hrf-logo img{height:clamp(26px,8.5vw,50px)} }
.hrf-nav{flex:none}

.hrf-nav__toggle{
  display:flex;align-items:center;gap:.55rem;cursor:pointer;
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:.45rem .95rem;font:inherit;font-size:.94rem;
}
.hrf-nav__toggle:hover{background:rgba(255,255,255,.18)}
/* Lange Beschriftung am Schreibtisch, kurze auf dem Telefon. Die lange wird
   dort nicht entfernt, sondern nur unsichtbar — sonst verliert der Knopf fuer
   Screenreader seinen Namen. */
.hrf-nav__kurz{display:none}
@media (max-width:560px){
  .hrf-nav__lang{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hrf-nav__kurz{display:inline}
}
.hrf-nav__bars{position:relative;width:16px;height:2px;background:#fff;display:inline-block}
.hrf-nav__bars::before,.hrf-nav__bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:#fff}
.hrf-nav__bars::before{top:-5px}
.hrf-nav__bars::after{top:5px}

.hrf-menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--c-ink);
  border-bottom:1px solid var(--c-line);box-shadow:0 12px 28px rgba(15,39,64,.13)}
.hrf-menu.is-open{display:block}
.hrf-menu__grid{
  list-style:none;margin:0 auto;padding:var(--s-3) var(--s-2);max-width:var(--wrap);
  display:grid;grid-template-columns:repeat(4,1fr);gap:.2rem var(--s-3);
}
.hrf-menu__grid a{display:block;padding:.42rem .2rem;text-decoration:none;color:var(--c-ink);border-radius:6px}
.hrf-menu__grid a:hover{background:var(--c-band);color:var(--c-cta-dark)}
.hrf-menu__grid a[aria-current="page"]{font-weight:700;color:var(--c-cta-dark)}

/* ---------------------------------------------------------- Brotkrume */
.hrf-crumbs{padding-top:var(--s-2)}
.hrf-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;
  font-size:.86rem;color:var(--c-ink-2)}
.hrf-crumbs li+li::before{content:"›";margin-right:.4rem;color:#a9b7c7}

/* ---------------------------------------------------------- Hero */
.hrf-hero{padding:var(--s-3) 0 var(--s-4)}
.hrf-hero__inner{display:grid;gap:var(--s-3);align-items:center}
.hrf-h1{font-size:clamp(1.65rem,4.2vw,2.4rem);line-height:1.2;margin:0 0 var(--s-2);color:var(--c-brand)}
.hrf-hero__sub{font-size:1.06rem;color:var(--c-ink-2);margin:0 0 var(--s-3);max-width:60ch}

.hrf-hero__fakten{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-3);margin:0 0 var(--s-3);padding:0}
.hrf-hero__fakten li{display:flex;flex-direction:column}
.hrf-hero__fakten strong{font-size:1.2rem;color:var(--c-brand);display:flex;align-items:center;gap:.4rem}
.hrf-hero__fakten span{font-size:.82rem;color:var(--c-ink-2)}
.hrf-hero__cta{margin:0 0 var(--s-2)}
.hrf-hero__note{font-size:.8rem;color:var(--c-ink-2);margin:0}

.hrf-hero__media{margin:0;position:relative;border-radius:var(--r);overflow:hidden}
.hrf-hero__media img{display:block;width:100%}
.hrf-hero__media figcaption,
.hrf-figure figcaption,
.hrf-flug__media figcaption,
.hrf-kachel__credit{
  position:absolute;right:0;bottom:0;background:rgba(19,37,55,.62);color:#fff;
  font-size:.68rem;line-height:1.4;padding:.15rem .45rem;border-top-left-radius:5px;
}

/* ---------------------------------------------------------- Text */
.hrf-content{padding-bottom:var(--s-5)}
.hrf-h2{font-size:clamp(1.3rem,3vw,1.7rem);color:var(--c-brand);margin:var(--s-5) 0 var(--s-2);scroll-margin-top:102px}
.hrf-h3{font-size:1.18rem;color:var(--c-brand);margin:var(--s-4) 0 var(--s-1)}
.hrf-h4{font-size:1.02rem;color:var(--c-brand);margin:var(--s-3) 0 var(--s-1)}
.hrf-text{max-width:72ch}
.hrf-text p{margin:0 0 var(--s-2)}
.hrf-text ul,.hrf-text ol{margin:0 0 var(--s-2);padding-left:1.3rem}
.hrf-text li{margin-bottom:.3rem}

.hrf-figure{margin:var(--s-3) 0;position:relative;width:fit-content;max-width:100%;border-radius:var(--r);overflow:hidden}
.hrf-figure img{display:block}

.hrf-toc{background:var(--c-band);border-radius:var(--r);padding:var(--s-2) var(--s-3);margin:var(--s-3) 0;max-width:72ch}
.hrf-toc__title{margin:0 0 .5rem;font-weight:700;color:var(--c-brand)}
.hrf-toc ol{margin:0;padding-left:1.2rem}
.hrf-toc li{margin-bottom:.25rem}

.hrf-hinweis{border:1px dashed #d9c49a;background:#fdf8ee;border-radius:var(--r);
  padding:var(--s-2) var(--s-3);margin:var(--s-3) 0;max-width:72ch;color:var(--c-ink)}
.hrf-hinweis__title{margin:0 0 .4rem;font-weight:700;color:var(--c-warn)}
.hrf-hinweis__body p{margin:0 0 .6rem}
.hrf-hinweis__body p:last-child{margin-bottom:0}

/* ---------------------------------------------------------- Tabellen */
.hrf-uebersicht,.hrf-tabelle{margin:var(--s-3) 0;overflow-x:auto}
/* Nach der Uebersicht folgt unmittelbar die erste Flugkarte. Bei je 1,5 rem
   fallen die beiden Abstaende zusammen — Tabelle und Karte klebten aneinander,
   obwohl das eine der Fahrplan und das andere schon das Angebot ist. */
.hrf-uebersicht{margin-bottom:var(--s-5)}

/* Gruppenzeile — bildet die Abschnitte der Seite in der Tabelle ab.
   Ohne sie stand in Barcelona hinter drei Rundfluegen unvermittelt ein
   Kombi-Angebot, und niemand sah den Unterschied. */
.hrf-uebersicht__gruppe th{
  text-align:left;background:#eef3f9;color:var(--c-brand);font-weight:700;
  font-size:.88rem;padding:.5rem .7rem;border-top:2px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
}

/* Abflugort mit farbiger Marke. Die Farbe steht fuer den Ort, nicht fuer eine
   Wertung — sie macht nur sichtbar, welche Zeilen vom selben Punkt starten. */
.hrf-ort{display:inline-flex;align-items:baseline;gap:.45rem}
.hrf-ort::before{
  content:"";flex:0 0 auto;width:.6rem;height:.6rem;border-radius:50%;
  background:var(--ort,#7d93ab);transform:translateY(-.05em);
}
.hrf-ort--0{--ort:#1d5081}
.hrf-ort--1{--ort:#0f7a52}
.hrf-ort--2{--ort:#b8621a}
.hrf-ort--3{--ort:#6b4fa0}
.hrf-ort--4{--ort:#0d7d8c}
.hrf-ort--5{--ort:#9a2f4e}
.hrf-uebersicht__title,.hrf-tabelle__title{margin:0 0 .6rem;font-weight:700;color:var(--c-brand)}
.hrf-uebersicht table,.hrf-tabelle table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:560px}
.hrf-uebersicht th,.hrf-tabelle th{
  text-align:left;background:var(--c-band);color:var(--c-brand);font-weight:700;
  padding:.55rem .7rem;border-bottom:1px solid var(--c-line);white-space:nowrap;
}
.hrf-uebersicht td,.hrf-tabelle td{padding:.6rem .7rem;border-bottom:1px solid var(--c-line);vertical-align:top}
/* Kopfzelle und Datenzellen einer Spalte muessen dieselbe Ausrichtung haben.
   Vorher standen "Dauer" und "ab" links, ihre Werte rechts — die Spalte sah
   aus, als gehoerten Kopf und Inhalt nicht zusammen. */
.hrf-uebersicht th.r,.hrf-tabelle th.r,
.hrf-uebersicht td.r,.hrf-tabelle td.r{text-align:right;white-space:nowrap}
.hrf-uebersicht th.p,.hrf-tabelle th.p{text-align:right}
.hrf-uebersicht td.p,.hrf-tabelle td.p{text-align:right;white-space:nowrap;font-weight:700;color:var(--c-gut)}
.hrf-uebersicht__shops{display:block;font-size:.76rem;color:var(--c-ink-2)}
.hrf-uebersicht__einheit{display:block;font-size:.72rem;font-weight:400;color:var(--c-ink-2)}
.hrf-tabelle__quelle{margin:.4rem 0 0;font-size:.76rem;color:var(--c-ink-2)}

/* ---------------------------------------------------------- Flugkarte */
/* Setzt Textfarben ausdruecklich selbst: die Karte darf auch auf farbigem
   Grund stehen, ohne dass geerbtes Weiss den Text unsichtbar macht. */
.hrf-flug{
  color:var(--c-ink);background:#fff;border:1px solid var(--c-line);border-radius:var(--r);
  padding:var(--s-3);margin:var(--s-3) 0 var(--s-4);scroll-margin-top:102px;
}
.hrf-flug__titel{display:flex;align-items:flex-start;gap:.6rem;margin:0 0 var(--s-2);
  font-size:1.2rem;color:var(--c-brand)}
.hrf-flug__num{
  flex:0 0 auto;display:grid;place-items:center;width:1.85rem;height:1.85rem;border-radius:50%;
  background:var(--c-brand);color:#fff;font-size:.9rem;font-weight:700;
}
.hrf-flug__grid{display:grid;gap:var(--s-3)}
.hrf-flug__body{color:var(--c-ink)}
.hrf-flug__fakten{list-style:none;margin:0 0 var(--s-2);padding:0;display:grid;gap:.28rem}
.hrf-fakt{display:flex;gap:.5rem;font-size:.93rem;color:var(--c-ink)}
.hrf-fakt__label{flex:0 0 7.4rem;color:var(--c-ink-2)}
.hrf-fakt__wert{font-weight:600}
.hrf-flug__desc{color:var(--c-ink)}
.hrf-flug__desc p{margin:0 0 .7rem}
.hrf-flug__hinweise{list-style:none;margin:var(--s-2) 0 0;padding:0;font-size:.87rem;color:var(--c-ink-2)}
.hrf-flug__hinweise li{padding-left:1.1rem;position:relative;margin-bottom:.28rem}
.hrf-flug__hinweise li::before{content:"›";position:absolute;left:.2rem;color:var(--c-cta)}
/* align-self:start ist hier keine Feinheit: Als Rasterfeld wurde die figure
   auf die volle Zeilenhoehe gedehnt — bei einer langen Beschreibung ueber
   500 Pixel. Der Bildnachweis klebt per position:absolute am unteren Rand der
   figure und stand dadurch dreihundert Pixel unter seinem Bild, mitten im
   Weissraum. */
.hrf-flug__media{margin:0;position:relative;border-radius:8px;overflow:hidden;align-self:start}
.hrf-flug__media img{display:block;width:100%}
.hrf-flug__media img.is-foto{aspect-ratio:3/2;object-fit:cover}

/* ------------------------------------------------------- Preisvergleich */
.hrf-vergleich{margin-top:var(--s-3);border-top:1px solid var(--c-line);padding-top:var(--s-2)}
.hrf-vergleich__titel{margin:0 0 .7rem;font-size:.9rem;font-weight:700;color:var(--c-brand);
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline}
.hrf-vergleich__einheit{font-weight:400;color:var(--c-ink-2);font-size:.82rem}
.hrf-vergleich__warnung{margin:0 0 .6rem;font-size:.82rem;line-height:1.45;color:var(--c-ink-2);
  border-left:3px solid #e6b800;padding-left:.6rem}
.hrf-vergleich__liste{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}

.hrf-vergleich__zeile{
  display:grid;gap:.35rem .9rem;align-items:center;color:var(--c-ink);
  border:1px solid var(--c-line);border-radius:8px;padding:.7rem .85rem;background:#fff;
}
.hrf-vergleich__zeile.is-guenstigst{border-color:#b7e0cd;background:#f4fbf8}
.hrf-vergleich__shop{font-weight:700;color:var(--c-ink)}
.hrf-vergleich__badge{
  display:inline-block;margin-left:.4rem;background:var(--c-gut);color:#fff;
  font-size:.68rem;font-weight:700;padding:.1rem .4rem;border-radius:4px;vertical-align:middle;
}
.hrf-vergleich__preis{font-size:1.16rem;font-weight:700;color:var(--c-gut);white-space:nowrap}
/* Zuschlag, der vor Ort dazukommt — steht unter dem Preis, nicht daneben.
   `white-space:normal` hebt das nowrap des Preises wieder auf: "zzgl. 63–72 $
   Gebuehr vor Ort" darf umbrechen, der Betrag darueber nicht. */
.hrf-vergleich__zuschlag{display:block;margin-top:.1rem;font-size:.72rem;font-weight:600;
  line-height:1.25;color:var(--c-ink-2);white-space:normal}
.hrf-vergleich__bewertung{font-size:.85rem;color:var(--c-ink-2);display:flex;align-items:center;gap:.35rem}
.hrf-vergleich__ohne{font-style:italic}
.hrf-vergleich__storno{font-size:.8rem;color:var(--c-ink-2)}
/* Die Spalte hat keine Ueberschrift — sie traegt ihre Beschriftung selbst.
   "kostenlos bis 12 Stunden vorher" allein liess offen, wovon die Rede ist. */
.hrf-vergleich__storno-label{display:block;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:#8496a9;margin-bottom:.08rem}
/* Datum statt des Wortes "live" — siehe flug-karte.php. */
.hrf-vergleich__stand{font-weight:400;color:var(--c-ink-2);font-size:.82rem}
.hrf-vergleich__cta{text-align:center}

/* ---------------------------------------------------------- Sterne */
/* Teilgefuellte Sterne.
   Wichtig — und lange falsch: Die Breite von ::after ist ein Prozentwert des
   Elternelements. Solange .hrf-stars eine feste Breite (5.2em) hatte, war die
   breiter als die fuenf Zeichen tatsaechlich laufen (rund 4.8em). 4,6 von 5
   ergaben dann 93 % von 5.2em = mehr als die Glyphen breit sind — der
   Beschnitt griff nie, und jede Bewertung zeigte fuenf volle Sterne.
   Deshalb steht ::before jetzt im Fluss und gibt die Breite vor: 100 % ist
   damit exakt die Breite der fuenf Sterne. */
.hrf-stars{display:inline-block;position:relative;height:1em;flex:0 0 auto;
  font-size:.85em;line-height:1;vertical-align:-.08em}
.hrf-stars::before,.hrf-stars::after{content:"★★★★★";letter-spacing:.06em;white-space:nowrap}
.hrf-stars::before{display:block;color:#dce3ec}
.hrf-stars::after{position:absolute;left:0;top:0;color:#e8a020;
  overflow:hidden;width:calc(var(--v,0) / 5 * 100%)}

/* ---------------------------------------------------------- Live-Werte */
.hrf-live{font-variant-numeric:tabular-nums}
.hrf-live:not(.is-filled){display:inline-block;min-width:3.2em;height:1em;
  background:linear-gradient(90deg,#eef2f7,#f7fafd,#eef2f7);border-radius:3px;vertical-align:-.1em}
.hrf-option-tot{display:none}

/* ---------------------------------------------------------- Buttons */
.hrf-cta-wrap{margin:var(--s-3) 0;text-align:center}
/* Direktbuchung beim Veranstalter — bewusst anders als die Vergleichszeilen.
   Kein Preis, keine Bewertung, kein Orange: Der Kasten soll erkennbar NICHT
   Teil des Preisvergleichs sein, sondern ein zusaetzlicher Weg. */
.hrf-direkt{margin-top:var(--s-2);padding:.85rem 1rem;border:1px dashed var(--c-line);
  border-radius:8px;background:#fbfcfd;display:flex;flex-wrap:wrap;align-items:center;
  gap:.75rem;justify-content:space-between}
.hrf-direkt__text{margin:0;font-size:.88rem;color:var(--c-ink-2);flex:1 1 20rem}
.hrf-direkt__text strong{color:var(--c-ink)}
.hrf-direkt__cta{flex:0 0 auto}

.hrf-btn{
  display:inline-block;background:#fff;color:var(--c-brand-2);border:1px solid var(--c-brand-2);
  border-radius:999px;padding:.6rem 1.25rem;font-weight:700;font-size:.94rem;text-decoration:none;
}
.hrf-btn:hover{background:var(--c-band);color:var(--c-brand-2)}
.hrf-btn--primary{background:var(--c-cta);border-color:var(--c-cta);color:#fff}
.hrf-btn--primary:hover{background:var(--c-cta-dark);border-color:var(--c-cta-dark);color:#fff}

/* ---------------------------------------------------------- FAQ */
.hrf-faq{margin:var(--s-3) 0;max-width:72ch}
.hrf-faq__item{border-bottom:1px solid var(--c-line)}
.hrf-faq__item summary{cursor:pointer;padding:.75rem 0;font-weight:700;color:var(--c-brand);list-style:none}
.hrf-faq__item summary::-webkit-details-marker{display:none}
.hrf-faq__item summary::before{content:"+";display:inline-block;width:1.1em;color:var(--c-cta);font-weight:700}
.hrf-faq__item[open] summary::before{content:"–"}
.hrf-faq__a{padding:0 0 var(--s-2) 1.1em}
.hrf-faq__a p{margin:0 0 .6rem}

/* ---------------------------------------------------------- Startseite */
/* Der Kopfbereich war fast schwarz (Verlauf von #0f2740) und trug nur zwei
   Zeilen Text auf viel Flaeche. Jetzt startet der Verlauf beim Himmelblau der
   Kopfzeile und hellt nach unten auf, dazu ein weicher Lichtpunkt oben rechts.
   Der Uebergang zur klebenden Kopfzeile bleibt sichtbar, aber die Flaeche
   wirkt nicht mehr wie ein Loch. Geaendert am 16.08.2026. */
.hrf-intro{
  position:relative;overflow:hidden;color:#fff;
  padding:var(--s-4) 0 var(--s-5);
  background:
    radial-gradient(900px 420px at 82% -10%, rgba(120,190,245,.30), transparent 62%),
    linear-gradient(168deg,#14314f 0%,#1d5081 52%,#276ea6 100%);
}

/* Mit Kopfbild: Das Foto liegt in einer eigenen Ebene hinter dem Inhalt, der
   Farbverlauf des Kastens bleibt darunter als Rueckfall stehen — laedt das Bild
   nicht, sieht der Kopfbereich aus wie vorher.
   Die Datei ist 1000 px breit und wird am Schreibtisch hochskaliert; unter den
   Verlaeufen ist das nicht zu sehen, sie traegt dort nur noch Stimmung. */
.hrf-intro.has-bild::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--bild);background-size:cover;background-position:50% 38%;
}
/* Zwei Schleier: einer von links, damit die Schrift auf jeder Bildstelle
   lesbar bleibt, einer von unten in das Weiss der Seite. */
/* Der Schleier muss kraeftig sein, und zwar wegen dieses Bildes: Die Sonne
   steht darin genau dort, wo die Ueberschrift sitzt. Beim ersten Versuch lag
   er bei 60 bis 90 Prozent — die H1 war im Gegenlicht schlicht nicht zu lesen.
   Jetzt: links rund 96 Prozent, rechts rund 80. Das Foto traegt damit
   Stimmung, keine Bilddetails, und das ist hier auch seine einzige Aufgabe. */
.hrf-intro.has-bild::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, rgba(8,24,42,.95) 0%, rgba(9,28,48,.90) 32%, rgba(11,36,60,.56) 58%, rgba(12,42,70,.32) 100%),
    linear-gradient(rgba(10,28,48,.26), rgba(10,28,48,.26));
}
.hrf-intro > *{position:relative;z-index:2}
/* Einspaltig laeuft der Text ueber die ganze Breite — auch dorthin, wo der
   Schleier fuer das zweispaltige Layout absichtlich duenn ist. Gemessen waren
   das 4,1:1 fuer Weiss und 3,3:1 fuer den Vorspann, beides unter der Schwelle.
   Unter 900 px deckt deshalb ein gleichmaessiger Schleier alles ab. */
@media (max-width:899px){
  .hrf-intro.has-bild::after{
    background:linear-gradient(rgba(8,24,42,.90), rgba(10,32,54,.82));
  }
}

/* Bildnachweis — dieselbe Marke wie bei jedem anderen Motiv der Website. */
.hrf-intro__credit{
  position:absolute;right:0;bottom:0;z-index:3;margin:0;
  background:rgba(19,37,55,.62);color:#fff;font-size:.68rem;line-height:1.4;
  padding:.15rem .45rem;border-top-left-radius:5px;
}
/* Feine Kante nach unten — sonst stossen Blau und Weiss hart aufeinander.
   Frueher stand hier ein eigenes ::after mit height:1px. Das war dasselbe
   Pseudoelement, das mit Kopfbild den Schleier traegt: Die spaetere Regel gab
   ihm eine Hoehe von einem Pixel, und der Schleier schrumpfte auf einen
   Streifen am oberen Rand — sichtbar wurde es erst daran, dass die
   Ueberschrift im Gegenlicht unlesbar blieb, obwohl die berechneten Stile
   richtig aussahen. Als Rahmen kommt sich nichts mehr in die Quere. */
.hrf-intro{border-bottom:1px solid rgba(255,255,255,.18)}
.hrf-intro__inner{display:grid;gap:var(--s-3);align-items:center}
.hrf-intro .hrf-h1{color:#fff;margin-bottom:var(--s-2)}
.hrf-intro__text{max-width:56ch;color:#dce9f6;font-size:1.08rem}
.hrf-intro__text p{margin:0}
.hrf-intro__cta{margin:var(--s-3) 0 0}

/* Die Zahlen als abgesetzte Flaeche rechts. Auf dem Telefon steht sie unter
   dem Text und verliert Rahmen und Hintergrund nicht — sie traegt dort die
   Aufgabe, den langen Vorspann von den Kacheln zu trennen. */
/* Die Flaeche traegt ihren eigenen dunklen Grund statt einer weissen Aufhellung.
   Damit haengt die Lesbarkeit der Zahlen nicht daran, was im Kopfbild gerade
   hinter ihnen liegt — rechts ist der Schleier bewusst duenn, damit das Foto
   ueberhaupt noch zu erkennen ist. */
.hrf-intro__panel{
  background:rgba(8,24,42,.62);border:1px solid rgba(255,255,255,.20);
  border-radius:var(--r);padding:var(--s-3);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.hrf-intro__fakten{
  list-style:none;display:grid;gap:var(--s-2);margin:0;padding:0;
}
.hrf-intro__fakten li{display:flex;flex-direction:column}
.hrf-intro__fakten strong{font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.1;font-weight:700;color:#fff}
.hrf-intro__fakten span{font-size:.84rem;color:#b9d0e6;margin-top:.1rem}

/* Die vier Haendler als Zeile statt im Fliesstext: Sie sind das
   Qualitaetsversprechen der Seite und gehen in einem Satz unter. */
.hrf-intro__quellen{
  margin:var(--s-3) 0 0;padding-top:var(--s-2);font-size:.8rem;color:#b9d0e6;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
}
.hrf-intro__quellen-label{flex:0 0 100%;margin-bottom:.15rem}
.hrf-intro__quellen span:not(.hrf-intro__quellen-label){
  display:inline-block;padding:.16rem .5rem;border-radius:5px;
  background:rgba(255,255,255,.13);color:#fff;font-weight:600;
}

/* Die erste Ueberschrift nach dem Kopfbereich braucht nicht den vollen
   Abstand von --s-5 — darueber steht schon eine ganze Farbflaeche. */
.hrf-h2--erste{margin-top:var(--s-4)}

.hrf-kacheln{list-style:none;margin:var(--s-3) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s-2)}
.hrf-kachel a{display:block;text-decoration:none;color:var(--c-ink);
  border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden;background:#fff;height:100%;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.hrf-kachel a:hover{border-color:var(--c-cta);box-shadow:0 6px 18px rgba(15,39,64,.13);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){ .hrf-kachel a{transition:none} .hrf-kachel a:hover{transform:none} }
.hrf-kachel__img{display:block;position:relative}
.hrf-kachel__img img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.hrf-kachel__body{display:block;padding:.7rem .85rem}
.hrf-kachel__city{display:block;font-weight:700;color:var(--c-brand);font-size:1.02rem}
.hrf-kachel__meta{display:block;font-size:.82rem;color:var(--c-ink-2);margin-top:.1rem}
/* Der Preis ist die Zahl, wegen der die Kachel angeklickt wird — er bekommt
   dieselbe Farbe wie in jeder Vergleichszeile. */
.hrf-kachel__ab{color:var(--c-gut);font-weight:700}

/* ------------------------------------------------ Weitere Reiseziele */
/* Bewusst ohne Bilder: Der Block steht am Ende einer sehr langen Seite und
   soll den Aufbau nicht noch einmal um zwoelf Motive verlaengern. */
.hrf-weitere{list-style:none;margin:var(--s-2) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem}
.hrf-weitere a{display:block;text-decoration:none;color:var(--c-ink);background:var(--c-band);
  border:1px solid var(--c-line);border-radius:var(--r);padding:.7rem .85rem;
  transition:border-color .15s,background .15s}
.hrf-weitere a:hover{border-color:var(--c-cta);background:#fff}
.hrf-weitere__city{display:block;font-weight:700;color:var(--c-brand)}
.hrf-weitere__meta{display:block;font-size:.82rem;color:var(--c-ink-2);margin-top:.1rem}
.hrf-weitere__ab{color:var(--c-gut);font-weight:700}

/* ---------------------------------------------------------- Footer */
.hrf-footer{background:var(--c-brand);color:#c8d6e4;padding:var(--s-4) 0 var(--s-3);margin-top:var(--s-5)}
.hrf-footer a{color:#fff}
.hrf-footer__title{margin:0 0 .5rem;font-weight:700;color:#fff;font-size:.92rem}
.hrf-footer__ziele ul{list-style:none;margin:0 0 var(--s-3);padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.25rem .8rem;font-size:.9rem}
.hrf-footer__note{font-size:.84rem;margin:0 0 var(--s-2);max-width:70ch}
.hrf-footer__links{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 .6rem;padding:0;font-size:.88rem}
.hrf-footer__copy{margin:0;font-size:.8rem;color:#9db2c8}

/* ---------------------------------------------------------- Breakpoints */
@media (min-width:900px){
  .hrf-hero__inner{grid-template-columns:1.15fr .85fr}
  .hrf-flug__grid{grid-template-columns:1.35fr .65fr}
  .hrf-intro__inner{grid-template-columns:1.35fr .65fr;gap:var(--s-5)}
}

/* Vergleichszeile einzeilig: Anbieter | Preis | Bewertung | Storno | Button.
   Feste Spaltenbreiten, keine inhaltsabhaengigen.
   Der Grund: Jede Zeile ist ein eigenes Raster. Mit `auto`/`max-content`
   berechnet jede Zeile ihre Spalten selbst — dann standen Preis, Sterne und
   Button jeder Zeile woanders, und eine Zeile ohne Stornoregel schob den
   Button eine Spalte nach links. Feste Breiten sind in allen Zeilen gleich,
   also stehen die Spalten untereinander. Erst ab 1080 px, weil darunter
   vier feste Spalten den Anbieternamen zerquetschen. */
@media (min-width:1080px){
  .hrf-vergleich__zeile{
    /* Die Preisspalte ist breiter als der Preis braucht: Unter ihm steht in
       New York der Zuschlag vor Ort, und "zzgl. 63–72 $ Gebuehr vor Ort" in
       6,4 rem waere ein vierzeiliger Turm. */
    grid-template-columns:minmax(0,1fr) 9.4rem 13.6rem 11.4rem 13.2rem;
  }
  .hrf-vergleich__preis{text-align:right}
  /* Ein Button je Zeile, alle gleich breit — „Bei Tiqets buchen" und
     „Bei GetYourGuide buchen" sollen dieselbe Flaeche haben. */
  .hrf-vergleich__cta{display:block;width:100%;padding-left:.5rem;padding-right:.5rem}
}
@media (max-width:1079px){
  /* Gestapelt: Anbieter und Preis in einer Zeile, der Rest darunter. */
  .hrf-vergleich__zeile{grid-template-columns:1fr auto}
  .hrf-vergleich__shop{grid-column:1}
  /* Gedeckelt, weil die zweite Spalte `auto` ist: Ohne Deckel zoege der
     Zuschlagstext die Preisspalte breit und quetschte den Anbieternamen. */
  .hrf-vergleich__preis{grid-column:2;text-align:right;max-width:11rem}
  .hrf-vergleich__bewertung,.hrf-vergleich__storno{grid-column:1 / -1}
  .hrf-vergleich__storno:empty{display:none}
  /* Nach rechts gebunden wie der Preis darueber — und gedeckelt, damit der
     Button auf dem Tablet nicht ueber neunhundert Pixel breit wird. Auf dem
     Telefon greift der Deckel nicht, dort bleibt er volle Breite. */
  .hrf-vergleich__cta{grid-column:1 / -1;display:block;width:100%;max-width:22rem;
    justify-self:end;margin-top:.4rem}
}
@media (max-width:899px){
  .hrf-menu__grid{grid-template-columns:repeat(2,1fr)}
  /* Bild ueber den Text — sonst steht das Motiv unter dem Buchungsbereich */
  .hrf-flug__grid{display:flex;flex-direction:column}
  .hrf-flug__media{order:-1}
}
@media (max-width:560px){
  .hrf-menu__grid{grid-template-columns:1fr}
  .hrf-btn{display:block;width:100%;text-align:center}
  /* Drei Kennzahlen nebeneinander werden auf dem Telefon zu drei Spalten
     mit je einem Wort Umbruch. Zwei sind lesbar, die dritte rutscht darunter. */
  .hrf-intro__fakten{gap:var(--s-2) var(--s-3)}
  .hrf-intro__fakten strong{font-size:1.45rem}
  .hrf-hero__fakten{gap:var(--s-2) var(--s-3)}
  .hrf-fakt{flex-direction:column;gap:0}
  .hrf-fakt__label{flex:none;font-size:.8rem}
}

/* Variantenzusatz in der Vergleichszeile — siehe components.md */
.hrf-vergleich__variante{display:block;font-weight:400;font-size:.82rem;color:var(--c-ink-2)}

/* Uebersichtstabelle auf schmalen Schirmen: Veranstalter und Abflugort
   entfallen. Sie standen bisher zwar in der Zeile, aber die Spalte "ab" war
   dadurch aus dem sichtbaren Bereich geschoben — ausgerechnet die, wegen der
   die Tabelle da ist. Beide Angaben stehen unverkuerzt auf der Flugkarte. */
@media (max-width:640px){
  .hrf-nur-breit{display:none}
  .hrf-uebersicht table{min-width:0}
}

/* Die Fluglinks in der Uebersicht waren 16 Pixel hoch. Padding statt
   groesserer Schrift — die Tabelle bleibt kompakt. */
.hrf-uebersicht td a{display:inline-block;padding:.2rem 0}

/* Fehlende Angabe in der Uebersicht — siehe components.md */
.hrf-leer{color:var(--c-ink-2);cursor:help}
.hrf-uebersicht__fussnote{margin:.5rem 0 0;font-size:.8rem;color:var(--c-ink-2)}

/* ------------------------------------------------- Fingerfreundliche Ziele
   Die Fusszeilen-Links sassen bei 16 Pixel Hoehe. Padding statt groesserer
   Schrift: die Zeile bleibt optisch gleich, die Trefferflaeche waechst. */
.hrf-footer__ziele a,
.hrf-footer__links a{display:inline-block;padding:.45rem 0;line-height:1.3}
/* In der Brotkrume bekommt auch die aktuelle Seite (ein span, kein Link) das
   Polster — sonst sitzt sie hoeher als der Link daneben: ein inline-block mit
   Polster wird an einer anderen Grundlinie ausgerichtet als reiner Text. */
.hrf-crumbs li{display:flex;align-items:center}
.hrf-crumbs li > a,
.hrf-crumbs li > span{display:inline-block;padding:.45rem 0;line-height:1.3}
.hrf-footer__ziele ul{gap:0 .8rem}
.hrf-footer__links{gap:.1rem var(--s-2)}
.hrf-crumbs{padding-top:calc(var(--s-2) - .45rem)}

/* ------------------------------------------------------------ Sprungleiste
   Nur auf schmalen Schirmen. Am Schreibtisch steht die Uebersicht ohnehin
   nach zwei Radumdrehungen wieder oben. */
.hrf-sprung{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:#fff;border-top:1px solid var(--c-line);
  box-shadow:0 -6px 18px rgba(15,39,64,.12);
  padding:.5rem var(--s-2) calc(.5rem + env(safe-area-inset-bottom));
}
.hrf-sprung[hidden]{display:none}
.hrf-sprung__inner{display:flex;align-items:center;gap:.7rem;max-width:var(--wrap);margin:0 auto}
.hrf-sprung__text{flex:1 1 auto;min-width:0;line-height:1.2}
.hrf-sprung__zahl{display:block;font-size:.76rem;color:var(--c-ink-2)}
.hrf-sprung__preis{display:block;font-size:1.02rem;color:var(--c-gut);white-space:nowrap}
.hrf-sprung__btn{flex:0 0 auto;padding:.6rem .85rem;font-size:.88rem;white-space:nowrap}
@media (min-width:900px){ .hrf-sprung{display:none} }
@media (max-width:560px){
  /* Der Sammelstil macht jeden Button blockbreit — hier stoert das. */
  .hrf-sprung__btn{display:inline-block;width:auto}
}