/* victoriafalls-helicopter.com — Basis-Stylesheet
 *
 * FARBKONZEPT, eigene Begruendung (BAUPLAN §8 verlangt sie je Region):
 * "Mosi-oa-Tunya — der Rauch, der donnert." Drei Dinge praegen jedes Bild
 * der Faelle: das tiefe Blaugruen des Sambesi in der Batoka-Schlucht
 * (Primaerfarbe), die aufsteigende Gischt (heller Nebelton als Grundflaeche)
 * und der Regenbogen, der bei Sonne permanent in der Gischt steht
 * (warmes Gold als Akzent- und CTA-Farbe).
 * Klassennamen sind im Komponenten-Manifest components.md gefuehrt —
 * neue Klassen zuerst dort eintragen, dann verwenden.
 */

:root {
  --c-wasser:      #0b4f55;   /* Sambesi/Schlucht — Primaer */
  --c-wasser-dkl:  #083b40;
  --c-tinte:       #182b2e;   /* Text */
  --c-grau:        #5a6f72;   /* Nebentext */
  --c-nebel:       #f2f6f6;   /* Gischt — Seitenhintergrund */
  --c-weiss:       #ffffff;
  --c-linie:       #d8e4e4;
  --c-gold:        #e39b2d;   /* Regenbogen-Gold — CTA */
  --c-gold-dkl:    #c9821a;
  --c-warn:        #8a5a00;   /* Gebuehren-Hinweise */
  --c-warn-bg:     #fdf3e0;
  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem;
  --radius: 10px;
  --breite: 1080px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  color: var(--c-tinte);
  background: var(--c-nebel);
  line-height: 1.55;
}
img { max-width: 100%; height: auto; }
a { color: var(--c-wasser); }

.innen, .kopf__innen, .fuss__innen, .held__innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--s-2);
}

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--c-weiss); padding: var(--s-1) var(--s-2); z-index: 10;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- Kopf */
.kopf { background: var(--c-weiss); border-bottom: 1px solid var(--c-linie); }
.kopf__innen {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  padding-top: var(--s-1); padding-bottom: var(--s-1);
}
.kopf__marke {
  font-weight: 700; text-decoration: none; color: var(--c-wasser-dkl);
  font-size: 1.05rem; white-space: nowrap;
}
.kopf__nav { display: flex; flex-wrap: wrap; gap: var(--s-2); flex: 1; }
.kopf__nav a {
  text-decoration: none; color: var(--c-tinte); font-size: .95rem;
  padding: .25rem 0;
}
.kopf__nav a:hover { color: var(--c-wasser); }
.kopf__sprachen { display: flex; gap: .6rem; }
.kopf__sprachen a {
  text-decoration: none; color: var(--c-grau); font-size: .85rem;
  padding: .15rem .35rem; border-radius: 4px;
}
.kopf__sprachen a.aktiv { background: var(--c-wasser); color: var(--c-weiss); }

/* ---------------------------------------------------------------- Held */
.held {
  background: linear-gradient(160deg, var(--c-wasser-dkl), var(--c-wasser) 70%);
  color: var(--c-weiss);
  padding: var(--s-4) 0;
}
.held h1 {
  margin: 0 0 var(--s-2); font-size: 2.1rem; line-height: 1.15;
  text-wrap: balance; max-width: 40rem;
}
.held__intro { max-width: 44rem; margin: 0 0 var(--s-3); color: #e7f1f1; font-size: 1.05rem; }
.held__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.held__preis { font-size: 1.1rem; margin: 0; }
.held__preis strong { color: var(--c-gold); font-size: 1.6rem; }
.held__cta {
  display: inline-block;
  background: var(--c-gold); color: var(--c-tinte);
  text-decoration: none; font-weight: 700; font-size: 1rem;
  padding: .75rem 1.4rem; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.held__cta:hover { background: var(--c-gold-dkl); color: var(--c-weiss); }

/* Hero mit Bild: Foto liegt absolut hinter dem Text, dunkler Verlauf
 * von links sichert die Lesbarkeit. object-position als Sicherheitsnetz
 * gegen abgeschnittene Bildmotive. */
.held--bild { position: relative; overflow: hidden; padding: calc(var(--s-4) * 1.6) 0; }
.held--hoch { padding: calc(var(--s-4) * 2.2) 0; }
.held--bild .held__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  z-index: 0;
}
.held--bild::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(8, 42, 46, .88) 0%,
    rgba(8, 42, 46, .62) 45%,
    rgba(8, 42, 46, .18) 100%);
}
.held--bild .held__innen { position: relative; z-index: 2; }
.held--bild h1 { text-shadow: 0 2px 12px rgba(0,0,0,.35); }

/* ---------------------------------------------------------------- Gebuehr */
.gebuehr { padding: var(--s-3) 0 0; }
.gebuehr .innen {
  background: var(--c-warn-bg);
  border: 1px dashed var(--c-gold-dkl);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  max-width: calc(var(--breite) - 2rem);
}
.gebuehr h2 { margin: 0 0 var(--s-1); font-size: 1.15rem; color: var(--c-warn); }
.gebuehr p { margin: 0; }

/* ---------------------------------------------------------------- Vergleich */
.vergleich { padding: var(--s-3) 0 var(--s-4); }
.vergleich h2 { font-size: 1.5rem; margin: var(--s-2) 0; }
.vergleich__ort {
  font-size: 1.1rem; color: var(--c-wasser-dkl);
  border-bottom: 2px solid var(--c-linie);
  padding-bottom: .35rem; margin: var(--s-3) 0 var(--s-2);
}
.karten { display: grid; gap: var(--s-2); }

.karte {
  background: var(--c-weiss);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  color: var(--c-tinte); /* explizit — Komponente kann auf dunklem Grund landen */
}
.karte__name { margin: 0 0 var(--s-1); font-size: 1.1rem; color: var(--c-tinte); }
.karte__fakten { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.karte__fakten div { display: flex; gap: .4rem; font-size: .88rem; }
.karte__fakten dt { color: var(--c-grau); margin: 0; }
.karte__fakten dt::after { content: ':'; }
.karte__fakten dd { margin: 0; font-weight: 600; }

.karte__zeilen { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.zeile {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--c-linie);
  padding: var(--s-2) 0;
}
.zeile__info { display: flex; flex-direction: column; gap: .2rem; min-width: 15rem; flex: 1; }
.zeile__label { font-weight: 600; }
.zeile__rating { color: var(--c-warn); font-size: .9rem; }
.zeile__storno { color: var(--c-grau); font-size: .85rem; }
.zeile__hinweis {
  color: var(--c-warn); font-size: .85rem;
  background: var(--c-warn-bg); border-radius: 4px;
  padding: .1rem .45rem; align-self: flex-start;
}
.zeile__aktion { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.zeile__preis { font-size: 1.35rem; font-weight: 700; color: var(--c-wasser-dkl); }
.zeile__cta {
  display: inline-block;
  background: var(--c-gold); color: var(--c-tinte);
  text-decoration: none; font-weight: 600; font-size: .92rem;
  padding: .55rem .9rem; border-radius: 6px;
  white-space: nowrap;
}
.zeile__cta:hover { background: var(--c-gold-dkl); color: var(--c-weiss); }

.karte__wissen {
  margin-top: var(--s-2);
  border-top: 1px solid var(--c-linie);
  padding-top: var(--s-2);
}
.karte__wissen h5 { margin: 0 0 .4rem; font-size: .9rem; color: var(--c-grau); }
.karte__wissen ul { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
.karte__wissen li { margin-bottom: .3rem; }

/* ---------------------------------------------------------------- Startseiten-Teaser */
.teaser {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: var(--s-3);
}
.teaser__karte {
  display: flex; flex-direction: column;
  background: var(--c-weiss);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--c-tinte); /* explizit — siehe .karte */
  transition: box-shadow .15s ease, transform .15s ease;
}
.teaser__karte:hover {
  border-color: var(--c-wasser);
  box-shadow: 0 8px 24px rgba(11, 79, 85, .18);
  transform: translateY(-2px);
}
.teaser__bild { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.teaser__inhalt { display: flex; flex-direction: column; gap: .5rem; padding: var(--s-2) var(--s-3); flex: 1; }
.teaser__name { font-weight: 700; font-size: 1.05rem; color: var(--c-wasser-dkl); }
.teaser__text { font-size: .92rem; color: var(--c-grau); flex: 1; }
.teaser__preis { color: var(--c-tinte); }
.teaser__preis strong { color: var(--c-wasser-dkl); font-size: 1.15rem; }

.text { max-width: 46rem; }

/* ---------------------------------------------------------------- Medien-Splits (Bild + Text) */
.medien {
  display: grid; grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: var(--s-3); align-items: center;
  margin: var(--s-4) 0;
}
.medien--getauscht { grid-template-columns: 7fr minmax(280px, 5fr); }
.medien--getauscht .medien__bild { order: 2; }
.medien__bild {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius); display: block;
}
.medien__text h2 { margin-top: 0; }
.medien__text p { margin-bottom: 0; }

/* ---------------------------------------------------------------- Schluss-Band */
.band {
  position: relative; overflow: hidden;
  color: var(--c-weiss);
  margin-top: var(--s-4);
}
.band__bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
}
.band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,42,46,.75), rgba(8,42,46,.35));
}
.band__innen {
  position: relative; z-index: 2;
  max-width: var(--breite); margin: 0 auto;
  padding: calc(var(--s-4) * 1.5) var(--s-2);
  text-align: center;
}
.band__innen h2 { margin: 0 0 var(--s-1); font-size: 1.6rem; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.band__innen p { margin: 0 0 var(--s-3); color: #e7f1f1; }

/* ---------------------------------------------------------------- Karten mit Produktfoto */
.karte--bild {
  display: grid; grid-template-columns: 230px 1fr;
  gap: var(--s-3); align-items: start;
}
.karte__foto {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; display: block;
  grid-row: 1 / span 3;
}
.karte--bild .karte__kopf,
.karte--bild .karte__zeilen,
.karte--bild .karte__wissen { grid-column: 2; }

/* ---------------------------------------------------------------- Uebersichtstabelle */
.vgl-rollen { overflow-x: auto; margin-bottom: var(--s-3); }
.vgl {
  width: 100%; border-collapse: collapse;
  background: var(--c-weiss);
  border: 1px solid var(--c-linie); border-radius: var(--radius);
  font-size: .92rem;
}
.vgl th, .vgl td {
  text-align: left; padding: .65rem .9rem;
  border-bottom: 1px solid var(--c-linie);
  vertical-align: top;
}
.vgl th { background: var(--c-nebel); color: var(--c-wasser-dkl); white-space: nowrap; }
.vgl tbody tr:last-child td { border-bottom: 0; }
.vgl a { font-weight: 600; }
.vgl__preis { white-space: nowrap; font-weight: 700; color: var(--c-wasser-dkl); }
.vgl__hinweis { color: var(--c-warn); font-size: .85rem; max-width: 18rem; }

/* ---------------------------------------------------------------- Redaktionelle Abschnitte + FAQ */
.abschnitte { padding: var(--s-3) 0 0; }
.abschnitt { max-width: 48rem; margin-bottom: var(--s-3); }
.abschnitt h2 { margin: 0 0 var(--s-1); }
.abschnitt p { margin: 0 0 var(--s-2); }

.faq { padding: var(--s-2) 0 var(--s-4); }
.faq h2 { margin: 0 0 var(--s-2); }
.faq__eintrag {
  background: var(--c-weiss);
  border: 1px solid var(--c-linie);
  border-radius: 8px;
  margin-bottom: var(--s-1);
  max-width: 48rem;
}
.faq__eintrag summary {
  cursor: pointer; font-weight: 600;
  padding: .8rem 1rem;
  list-style-position: inside;
}
.faq__eintrag summary:hover { color: var(--c-wasser); }
.faq__eintrag p { margin: 0; padding: 0 1rem .9rem; color: var(--c-tinte); }

/* ---------------------------------------------------------------- Fuss */
.fuss {
  background: var(--c-wasser-dkl); color: #cfe0e0;
  padding: var(--s-3) 0; margin-top: var(--s-4);
  font-size: .88rem;
}
.fuss a { color: var(--c-weiss); }
.fuss__hinweis { max-width: 52rem; }
.fuss__stand { color: #9dbcbc; }
.fuss__nav { display: flex; gap: var(--s-2); margin-top: var(--s-1); }

/* ---------------------------------------------------------------- Mobil */
@media (max-width: 700px) {
  .held h1 { font-size: 1.5rem; }
  .held--bild, .held--hoch { padding: var(--s-4) 0; }
  .kopf__nav { order: 3; width: 100%; }
  .zeile__aktion { align-items: stretch; width: 100%; }
  .zeile__cta { text-align: center; }
  .medien, .medien--getauscht { grid-template-columns: 1fr; }
  .medien--getauscht .medien__bild { order: 0; }
  .karte--bild { grid-template-columns: 1fr; }
  .karte__foto { grid-row: auto; aspect-ratio: 16 / 9; }
  .karte--bild .karte__kopf,
  .karte--bild .karte__zeilen,
  .karte--bild .karte__wissen { grid-column: 1; }
}