/* 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:64px}
.hrf-logo{display:flex;align-items:center}
.hrf-logo img{display:block;width:auto;height:38px}

.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)}
.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:var(--c-line)}

/* ---------------------------------------------------------- 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:80px}
.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}
.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}
.hrf-uebersicht td.r,.hrf-tabelle td.r{text-align:right;white-space:nowrap}
.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:80px;
}
.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)}
.hrf-flug__media{margin:0;position:relative;border-radius:8px;overflow:hidden}
.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__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}
.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)}
.hrf-vergleich__cta{white-space:nowrap}

/* ---------------------------------------------------------- Sterne */
.hrf-stars{display:inline-block;position:relative;width:5.2em;height:1em;flex:0 0 auto;
  font-size:.85em;line-height:1;vertical-align:-.08em}
.hrf-stars::before,.hrf-stars::after{
  content:"★★★★★";position:absolute;left:0;top:0;letter-spacing:.06em;
}
.hrf-stars::before{color:#dce3ec}
.hrf-stars::after{color:#e8a020;overflow:hidden;white-space:nowrap;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}
.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 */
.hrf-intro{background:linear-gradient(160deg,var(--c-brand),#1d4e78);color:#fff;padding:var(--s-5) 0}
.hrf-intro .hrf-h1{color:#fff}
.hrf-intro__text{max-width:60ch;color:#e5edf5}
.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%}
.hrf-kachel a:hover{border-color:var(--c-cta)}
.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)}
.hrf-kachel__meta{display:block;font-size:.82rem;color:var(--c-ink-2)}

/* ---------------------------------------------------------- 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}
  /* Vergleichszeile einzeilig: Anbieter | Preis | Bewertung | Storno | Button */
  .hrf-vergleich__zeile{
    grid-template-columns:minmax(9rem,1fr) auto minmax(9rem,auto) minmax(0,1fr) auto;
  }
}
@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}
  .hrf-vergleich__zeile{grid-template-columns:1fr auto}
  .hrf-vergleich__shop{grid-column:1}
  .hrf-vergleich__preis{grid-column:2;text-align:right}
  .hrf-vergleich__bewertung,.hrf-vergleich__storno{grid-column:1 / -1}
  .hrf-vergleich__cta{grid-column:1 / -1;text-align:center;margin-top:.3rem}
}
@media (max-width:560px){
  .hrf-menu__grid{grid-template-columns:1fr}
  .hrf-btn{display:block;width:100%;text-align:center}
  .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)}