/* ==========================================================================
   Detailseiten — Screen 2 des Handoff-Pakets
   Gemeinsame Bausteine stehen in komponenten.css, das vom Layout auf
   jeder Seite geladen wird.
   ========================================================================== */

/* -------------------------------------------------------- Seiten-Hero */

.seiten-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: max(75svh, 420px);
  padding: 40px 0 96px;
  background-color: var(--lagune-dkl);
  background-size: cover;
  background-position: center 60%;
  color: var(--weiss);
}
.seiten-hero-schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 30, 37, .15) 40%, rgba(3, 30, 37, .62) 100%);
}
.seiten-hero-inhalt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}
.seiten-hero h1 { color: var(--weiss); margin-bottom: 0; }

.brotkrumen {
  font-size: .85rem;
  color: #D7E9EC;
  margin-bottom: 14px;
}
.brotkrumen a { color: var(--weiss); font-weight: 600; text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }
.brotkrumen span { margin: 0 6px; }

.hero-aktionen { display: flex; flex-wrap: wrap; gap: 10px; }

.btn.glas {
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .35);
  color: var(--weiss);
}
.btn.glas:hover { background: rgba(255, 255, 255, .28); }

/* ------------------------------------------------- Schnellfakten */

.fakten-huelle { position: relative; z-index: 5; margin-top: -64px; }

/* Die Bewertungskarte steht unter den Merkmalen in der Seitenspalte.

   Zwei Stellen davor haben nicht getragen: als Band unter dem Hero deckte
   die Faktenkarte sie zu -- die zieht sich 64 Pixel nach oben --, und im
   Hero selbst schob sie den Namen des Schiffes nach oben aus dem Bild.
   Hier braucht es keinen Platz, den eine andere Ebene schon belegt.

   Die Karte bringt ihr eigenes Kleid mit (weiss, Rundung, Schatten) und
   steht damit neben der Merkmalkarte, ohne dass wir sie nachbauen. */
.bewertungskarte { margin-top: 18px; }

/* Flexbox statt Grid: die Zahl der Fakten schwankt je Schiff zwischen zwei
   und fünf. Mit repeat(auto-fit, …) liesse sich der Knopf rechts nicht
   anhängen — automatische Wiederholung darf laut Spezifikation nicht mit
   intrinsischen Größen wie auto kombiniert werden, der Browser verwirft
   dann die gesamte Deklaration. */
.fakten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 30px;
  padding: 20px 26px;
  border-radius: var(--radius-lg);
  border-top: 5px solid var(--lagune);
  background: var(--weiss);
  box-shadow: var(--schatten);
}
.fakt { flex: 1 1 140px; }
.fakten .btn { flex: 0 0 auto; margin-left: auto; }
.fakt .wert {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tiefsee);
}
.fakt .label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

/* -------------------------------------------------------- Intro */

.intro {
  position: relative;
  padding: 64px 22px 20px;
}

/* Zweispaltig, sobald eine Seitenspalte mitgegeben wurde. Ohne sie bleibt
   der Text eine einzelne Spalte — dann greift max-width unten. */
.intro.hat-seitenspalte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
}
.intro-text { max-width: 66ch; }
.intro-titel { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .5em; }

/* Wellenlinie vor dem Eyebrow, wie im Handoff fuer Sektionskoepfe. */
.eyebrow.mit-welle::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 8px;
  margin-right: 9px;
  vertical-align: middle;
  background: no-repeat center/28px 8px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 4.5 C 3.5 0.5 7 8 10.5 4.5 C 14 1 17.5 8 21 4.5 C 24.5 1 28 8 31.5 4.5' fill='none' stroke='%23BE8B58' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Anleser: der erste Absatz traegt den Einstieg und bekommt mehr Gewicht.
   Das gliedert lange Fliesstexte, ohne dass dafuer Ueberschriften erfunden
   werden muessten, die es in den Daten nicht gibt. */
.anleser {
  position: relative;
  margin-bottom: 22px;
  padding-left: 22px;
  border-left: 3px solid var(--lagune);
}
.anleser p {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--tiefsee);
}

/* Seitenspalte */
.intro-seite { position: sticky; top: 100px; }
.seitenkarte { padding: 22px 24px; }
.seitenkarte h3 {
  font-size: 1.05rem;
  margin-bottom: .7em;
  padding-bottom: .6em;
  border-bottom: 1px dashed var(--rand-1);
}

.merkmalliste { margin: 0; padding: 0; list-style: none; }
.merkmalliste li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
  font-size: .94rem;
  color: var(--ink);
}
.merkmal-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--riff);
  color: var(--lagune-dkl);
}

.seitenkarte .bewertungen { grid-template-columns: 1fr; gap: 0; }
.seitenkarte .bewertung:last-child { border-bottom: 0; }
.fliesstext { max-width: 76ch; }
.fliesstext p { margin-bottom: 1em; }
.fliesstext ul, .fliesstext ol { max-width: 76ch; padding-left: 1.3em; }
.fliesstext li { margin-bottom: .3em; }

/* ------------------------------------------------ Tab-Navigation */

.tableiste-huelle {
  position: sticky;
  top: 78px;
  z-index: 40;
  display: flex;
  justify-content: center;
  margin-top: 22px;
  padding: 0 22px;
}
.tableiste {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--rand-2);
  border-radius: 999px;
  background: var(--riff);
  box-shadow: var(--schatten-soft);
}
/* Die Tabs sind Links, keine Knoepfe: so bleibt jeder Tab ohne
   JavaScript erreichbar und laesst sich teilen. */
.tableiste [role="tab"] {
  display: block;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--tiefsee);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.tableiste [role="tab"]:hover { background: var(--weiss); color: var(--lagune-dkl); }
.tableiste [role="tab"].an   { background: var(--lagune); color: var(--weiss); }

.tab-panel { padding-top: 30px; }
/* Das Termine-Panel bringt seinen eigenen Wellen-Trenner mit, der die
   weisse Flaeche ohnehin abschliesst — hier braucht es keinen Abstand. */
#tab-termine { padding-top: 8px; }

/* --------------------------------------------------- Leistungen */

.leistungen-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding-bottom: 40px;
}

.karte {
  padding: 26px;
  border: 1px solid var(--rand-1);
  border-radius: var(--radius-lg);
  background: var(--weiss);
}

.leistungen-karte ul { margin: 0; padding: 0; list-style: none; }
.leistungen-karte li {
  position: relative;
  padding: 7px 0 7px 30px;
  border-bottom: 1px dashed #EAF3F4;
}
.leistungen-karte li:last-child { border-bottom: 0; }
.leistungen-karte li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}
.leistungen-karte.inklusive li::before { content: '✓'; color: var(--lagune-dkl); }
.leistungen-karte.exklusive li::before { content: '–'; color: var(--sand); }

.leistungen-karte small {
  display: block;
  margin-top: 3px;
  font-size: .84rem;
  color: var(--ink-soft);
}

/* ------------------------------------------------------- Routen */

.routen-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding-bottom: 40px;
}
.routen-raster .karte-bild { min-height: 230px; }
.routen-raster h3 { font-size: 1.15rem; }

/* ---------------------------------------------------- Akkordeon */

.akkordeon { max-width: 860px; padding-bottom: 40px; }

.akk {
  margin-bottom: 12px;
  border: 1px solid var(--rand-1);
  border-radius: var(--radius);
  background: var(--weiss);
}
.akk summary {
  position: relative;
  padding: 16px 52px 16px 22px;
  font-weight: 700;
  color: var(--tiefsee);
  cursor: pointer;
  list-style: none;
}
.akk summary::-webkit-details-marker { display: none; }
.akk summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  translate: 0 -50%;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--lagune);
  transition: rotate .2s;
}
.akk[open] summary::after { rotate: 45deg; }
.akk-inhalt { padding: 0 22px 18px; }
.akk-inhalt p:last-child { margin-bottom: 0; }

/* ------------------------------------------------ 360° und Video */

.tour-rahmen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--tiefsee);
  margin-bottom: 40px;
}
.tour-rahmen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------- Galerie und Technik */

.galerie-sektion {
  display: grid;
  /* Gleich breit: die technischen Daten sind eine zweispaltige Tabelle und
     brauchen ähnlich viel Platz wie die Bilder. In einer 320px-Spalte
     brechen Werte wie "2x 200 kw, 1x 120 kw Daiwa" über drei Zeilen um.

     minmax(0, 1fr) und nicht 1fr: die Mindestbreite von 1fr ist der
     Mindestinhalt, und der ist hier die Bildergalerie. Die legt mit
     minmax(160px, 1fr) in einer unbestimmt breiten Spalte zwei Kacheln an —
     gemessen 393px in einem 316px breiten Kasten, womit auf dem Handy die
     ganze Seite waagerecht scrollte. Die 0 erlaubt der Spalte, kleiner zu
     werden als ihr Inhalt; die Galerie richtet sich dann danach. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding-top: 32px;
  padding-bottom: 32px;
}
/* Technische Daten.

   Der Bestand liefert sie bei allen 37 Schiffen als CKEditor-Tabelle mit
   border="1". Die Praesentationsattribute entfernt View::html(), das
   Aussehen kommt von hier: keine Rahmen, sondern gestrichelte Trennlinien,
   die Bezeichnung links in der Marken-Farbe. */
.technik { font-size: .94rem; }

.technik table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
}
.technik tr:not(:last-child) td { border-bottom: 1px dashed var(--rand-1); }
.technik td {
  border: 0;
  padding: 9px 0;
  vertical-align: top;
  /* anywhere und nicht break-word: nur anywhere verkleinert auch die
     Mindestbreite der Zelle. Ohne das behielt die Tabelle aus dem Bestand
     ihre Mindestbreite, sprengte auf einem 360px-Gerät den 316px breiten
     Kasten und liess die ganze Seite waagerecht scrollen — Werte wie
     "2x 200 kw, 1x 120 kw Daiwa" brechen sonst nicht um. */
  overflow-wrap: anywhere;
}

/* Erste Spalte ist die Bezeichnung, zweite der Wert. */
.technik td:first-child {
  width: 40%;
  padding-right: 16px;
  font-weight: 600;
  color: var(--tiefsee);
}
.technik td:last-child { color: var(--ink-soft); }

/* Zeilen ohne zweite Spalte sind Zwischenueberschriften der Redaktion. */
.technik td:only-child {
  width: auto;
  padding-top: 18px;
  font-family: var(--font-display);
  font-size: 1.02rem;
}

.newsletter.cta { text-align: center; }

/* ------------------------------------------------- Breakpoints */

@media (max-width: 980px) {
  .tableiste-huelle { position: static; }
  .intro.hat-seitenspalte { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .intro-seite { position: static; }
  .leistungen-raster { grid-template-columns: 1fr; }
  .routen-raster { grid-template-columns: 1fr; }
  .galerie-sektion { grid-template-columns: minmax(0, 1fr); }
  .fakten .btn { width: 100%; margin-left: 0; text-align: center; }
}

@media (max-width: 860px) {
  /* Unter 860px reicht das Suchfeld (560px breit) bis in die Fläche, in der
     die Blasen stehen. Deko, die sich mit Inhalt überlagert, ist keine. */
  .such-kopf .deko-blasen { display: none; }
}

@media (max-width: 640px) {
  /* Ohne Hülle. Vier Tabs passen unter etwa 520px nicht mehr in eine Zeile,
     und die Pillenform um zwei Reihen herum wurde zu einem Oval mit einer
     halbleeren zweiten Zeile darin. Jetzt stehen nur die Knöpfe da; damit
     sie ohne den gemeinsamen Grund noch als Knöpfe zu lesen sind, bekommt
     jeder seinen eigenen Rand. */
  .tableiste {
    justify-content: center;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .tableiste [role="tab"] {
    padding: 9px 16px;
    border: 1px solid var(--rand-2);
    background: var(--weiss);
  }
  .tableiste [role="tab"].an { border-color: var(--lagune); }

  .fakt { flex-basis: 100%; }
  .seiten-hero { padding-bottom: 80px; }
}

/* ------------------------------------------------- Bewertungen */

.bewertungen-titel { margin-top: 32px; font-size: 1.25rem; }

.bewertungen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 40px;
}
.bewertung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px dashed #EAF3F4;
}
.bewertung-name { font-size: .94rem; color: var(--ink); }
.bewertung-skala { display: flex; gap: 4px; flex: 0 0 auto; }
.bewertung-skala .stufe {
  width: 22px;
  height: 7px;
  border-radius: 4px;
  background: var(--riff);
}
.bewertung-skala .stufe.an { background: var(--lagune); }

/* Galerie ohne Technikspalte */
.galerie-sektion.einspaltig { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------- Terminsuche */

.termine-kopf { padding: 48px 22px 24px; }
.termine-kopf h1 { margin-bottom: 0; }

/* Der Einleitungstext, den nur Last Minute hat. Der Abstand steht hier und
   nicht am h1: ohne Text soll der Kopf dicht an der Abfahrtstafel sitzen,
   deshalb hat h1 margin-bottom: 0. */
.termine-kopf .fliesstext { margin-top: 26px; }
.termine-kopf .fliesstext p:last-child { margin-bottom: 0; }

.blaettern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}
.blaettern-stand { color: var(--auf-dunkel-sek); font-size: .9rem; }

/* ------------------------------------------------ Übersichten */

.uebersicht-kopf { padding: 48px 22px 8px; }
.uebersicht      { padding-bottom: 56px; }

.gruppen-titel {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 36px 0 18px;
  font-size: 1.45rem;
  scroll-margin-top: 100px;
}
.gruppen-titel:first-child { margin-top: 40px; }
.gruppen-zahl {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.einstieg-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 22px;
  margin-top: 24px;
}
.einstieg {
  display: block;
  padding: 26px;
  border: 1px solid var(--rand-1);
  border-radius: var(--radius-lg);
  background: var(--weiss);
  box-shadow: var(--schatten-soft);
  text-decoration: none;
  transition: transform .2s;
}
.einstieg:hover { transform: translateY(-4px); }
.einstieg h2 { font-size: 1.3rem; margin-bottom: .3em; }
.einstieg p  { margin: 0; color: var(--ink-soft); font-size: .94rem; }

/* ---------------------------------------------- Text und News */

.textseite { padding: 48px 22px 64px; max-width: 900px; }

/* Hinweisseite: die Aufklapper stehen unter dem Einleitungstext und richten
   sich nach dessen Spaltenbreite, nicht nach dem breiten Seitenraster. */
.hinweis-gruppe { max-width: 900px; }
.hinweis-gruppe .akkordeon { max-width: none; padding-bottom: 0; }
.hinweis-gruppe:last-of-type { padding-bottom: 56px; }
/* Folgen Hinweise, braucht der Einleitungstext unten keinen eigenen Abstand */
main:has(.hinweis-gruppe) .textseite { padding-bottom: 4px; }

/* Die Hinweise sind Downloads. Zwei Spalten, weil die Titel kurz sind und
   einspaltig eine sehr lange, sehr leere Liste entstuende — 25 Blaetter. */
.hinweis-liste {
  display: grid;
  /* min(330px, 100%): auf einem 320px-Gerät ist die feste Untergrenze
     breiter als der Bildschirm, und die Seite scrollte waagerecht. Das
     Muster gilt für jede auto-fill-Spalte, deren Untergrenze in die Nähe
     der Gerätebreite kommt. */
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.hinweis-blatt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border: 1px solid var(--rand-1);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--tiefsee);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.hinweis-blatt:hover {
  border-color: var(--lagune);
  background: var(--riff);
}
.hinweis-name { font-weight: 700; line-height: 1.35; }
.hinweis-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-soft);
}
.hinweis-blatt:hover .hinweis-meta { color: var(--lagune-dkl); }

/* Dasselbe Blatt, aber allein: auf der Schiffsseite steht im Tab "Weitere
   Infos" genau eins. Ohne Breitenbegrenzung liefe es über die ganze Seite
   und sähe wie eine Überschrift aus, nicht wie ein Download. */
.hinweis-blatt.einzeln {
  max-width: 480px;
  margin-bottom: 18px;
  border-left: 3px solid var(--lagune);
}

/* Der aufgeklappte Abschnitt, auf den eine alte Adresse gefuehrt hat, soll
   nicht unter der klebenden Kopfzeile beginnen. */
.akk:target { scroll-margin-top: 100px; }
.textseite h1 { margin-bottom: .5em; }
.brotkrumen.dunkel { color: var(--ink-soft); margin-bottom: 18px; }
.brotkrumen.dunkel a { color: var(--lagune-dkl); }

.news-liste { display: grid; gap: 26px; margin-top: 24px; }
.news-eintrag {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
  padding-bottom: 26px;
  border-bottom: 1px dashed var(--rand-1);
}
.news-eintrag:last-child { border-bottom: 0; }
.news-bild {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background-color: var(--riff);
  background-size: cover;
  background-position: center;
}
.news-text h2 { font-size: 1.3rem; margin-bottom: .3em; }
.news-text h2 a { color: var(--tiefsee); text-decoration: none; }
.news-text h2 a:hover { color: var(--lagune-dkl); }
.news-text p { color: var(--ink-soft); }
.news-datum {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--sand);
  margin-bottom: .3em;
}
.weiterlesen { font-weight: 600; text-decoration: none; }
.weiterlesen:hover { text-decoration: underline; }
.news-teaser { margin: 8px 0 24px; }
.news-teaser img { width: 100%; border-radius: var(--radius-lg); }

.blaettern.hell { margin-top: 32px; }
.blaettern-stand.dunkel { color: var(--ink-soft); }

@media (max-width: 640px) {
  .news-eintrag { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- Suche */

/* Der Bezugsrahmen für die Blasen -- ohne ihn suchten sie sich den nächsten
   positionierten Vorfahren und landeten irgendwo. */
.such-kopf { position: relative; }

/* Etwas schmaler als der Fliesstext sonst: der Satz steht über einem 560px
   breiten Feld und soll mit ihm eine Gruppe bilden, nicht darüber ausufern. */
.such-einleitung { max-width: 58ch; margin-top: 14px; }

.suchform { display: flex; gap: 10px; max-width: 560px; margin: 20px 0 12px; }
.suchform input {
  flex: 1;
  min-width: 0;
  padding: .75em 1em;
  border: 1.5px solid var(--rand-4);
  border-radius: var(--radius);
  font: inherit;
  background: #FBFEFE;
}
.suchform input:focus { border-color: var(--lagune); outline: none; }
.such-zahl { color: var(--ink-soft); font-size: .94rem; }

/* ------------------------------------------------ Anfragekorb */

.anfrage { max-width: 860px; }

.korb-posten {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px dashed var(--rand-1);
}
.korb-info h2 { font-size: 1.15rem; margin-bottom: .2em; }
.korb-meta   { font-family: var(--font-mono); font-size: .84rem; color: var(--ink-soft); margin: 0; }
.korb-kabine { font-size: .9rem; font-weight: 600; color: var(--tiefsee); margin: 4px 0 0; }
/* Der Zusatz in Klammern ist eine Angabe zur Kabine, kein Teil ihres
   Namens -- deshalb leichter und nicht fett. */
.korb-teilen { font-weight: 400; color: var(--ink-soft); }
.korb-warnung { font-size: .84rem; color: #A8433A; margin: 4px 0 0; }

.korb-anzahl label { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.korb-anzahl input {
  width: 72px;
  padding: .5em .6em;
  border: 1.5px solid var(--rand-4);
  border-radius: var(--radius);
  font: inherit;
}
.korb-preis { text-align: right; }
.korb-preis .wert  { display: block; font-weight: 700; color: var(--tiefsee); white-space: nowrap; }
.korb-preis .label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }

/* Die Zeilensumme steht unter dem Preis pro Person und nur, wenn mehr als
   eine Person eingetragen ist -- sonst waere sie dieselbe Zahl zweimal. */
.korb-zeilensumme {
  display: block;
  margin-top: 4px;
  font-size: .82rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* Die Summe aller Posten, abgesetzt unter der Liste. */
.korb-gesamt-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rand-1); }
.korb-gesamt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}
.korb-gesamt .label {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.korb-gesamt .wert {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tiefsee);
  white-space: nowrap;
}
.korb-gesamt-hinweis {
  margin: 8px 0 0;
  max-width: 60ch;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.korb-weg {
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: .86rem;
  text-decoration: underline;
  cursor: pointer;
}
.korb-weg:hover { color: #A8433A; }
.korb-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.anfrage-form { margin-top: 40px; }

/* Der Hinweis aufs Rahmenprogramm steht direkt unter der Überschrift und
   soll gelesen werden, bevor jemand nach unten scrollt. */
.anfrage-rahmen {
  max-width: 62ch;
  margin: 0 0 26px;
  padding: 16px 20px;
  border-left: 4px solid var(--sand);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--riff);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}

/* Zwischentitel im Formular, mit dem Hinweis daneben statt darunter —
   sonst zerfällt der Block in drei Zeilen. */
.anfrage-abschnitt {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 26px 0 12px;
  font-size: 1.1rem;
}
.anfrage-abschnitt span {
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 400;
  color: var(--ink-soft);
}

/* PLZ, Ort und Land laufen im selben Raster wie die Kontaktfelder darueber,
   damit die Spaltenkanten durchgehen. Nur die Strasse nimmt die ganze Zeile. */
.formraster.anschrift .feld-breit { grid-column: 1 / -1; }
.formraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.anfrage-form textarea {
  width: 100%;
  padding: .75em .9em;
  border: 1.5px solid var(--rand-4);
  border-radius: var(--radius);
  background: #FBFEFE;
  font: inherit;
  resize: vertical;
}
.anfrage-form textarea:focus { border-color: var(--lagune); outline: none; }
.feld.ankreuz { margin: 18px 0; }
/* Die Checkbox steht als eigene Spalte neben dem Text, damit umbrechende
   Zeilen einen Haengeeinzug bekommen statt unter das Kaestchen zu laufen.
   Dafuer muss der Text samt Link EIN Kind sein — siehe anfrage.php. */
.feld.ankreuz label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .94rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}
/* Das Kaestchen ist niedriger als die Zeile — ohne den Versatz sitzt es
   oberhalb der Versalhoehe der ersten Textzeile. */
.feld.ankreuz label input { flex: 0 0 auto; margin-top: .25em; }
.feld.hat-fehler input, .feld.hat-fehler textarea { border-color: #C25B4F; }
.feldfehler { margin: 4px 0 0; font-size: .86rem; color: #A8433A; }
.pflichtfeld { font-size: .84rem; color: var(--ink-soft); }

.hinweis { padding: 20px 24px; border-radius: var(--radius); }
.hinweis.erfolg { background: var(--riff); border-left: 5px solid var(--lagune); }
.hinweis.fehler { background: #FBEAE8; border-left: 5px solid #C25B4F; color: #7A2F26; }
/* Weder Erfolg noch Fehler: eine Einschränkung, die man gelesen haben soll,
   bevor man die Liste darunter für eine Zusage hält. Sand statt Lagune --
   die Farbe, die auf dieser Seite überall die Nebenbemerkung trägt. */
.hinweis.merke {
  margin-bottom: 26px;
  background: var(--sand-hell);
  border-left: 5px solid var(--sand);
  color: var(--treibholz);
  max-width: 80ch;
}

@media (max-width: 640px) {
  .korb-posten { grid-template-columns: 1fr auto; }
  .korb-preis  { text-align: left; }
}

.saison-titel {
  margin: 26px 0 14px;
  font-size: 1.2rem;
  color: var(--sand);
}
.saison-titel:first-child { margin-top: 0; }

/* --------------------------------- Seitenkopf ohne Hero-Bild */

/* Das Logo-Bullauge ragt 92px unter die Headerkante (158px Platte bei
   margin-bottom:-92px). Seiten mit Hero fangen das durch das Bild ab;
   Übersichten, Terminsuche und Textseiten brauchen den Abstand explizit,
   sonst liegt die Überschrift hinter dem Logo. */
.uebersicht-kopf,
.termine-kopf,
.textseite {
  padding-top: 116px;
}

@media (max-width: 640px) {
  /* Mobil ist die Platte 96px bei margin-bottom:-44px */
  .uebersicht-kopf,
  .termine-kopf,
  .textseite {
    padding-top: 64px;
  }
}

/* -------------------------------- CTA mit ausgestanzter Wellenkante */

/* Der Rahmen zeigt sich nur dort, wo die Welle den Block ausspart —
   also im Streifen oberhalb der Kurve. Steht darüber eine dunkle
   Sektion, bekommt er deren Farbe, sonst bleibt er weiß. */
.cta-rahmen { line-height: 0; }
.cta-rahmen > .newsletter { line-height: 1.6; }

/* Auf den Tab-Seiten steht die dunkle Abfahrtstafel nur dann unmittelbar
   über dem CTA, wenn ihr Panel offen ist — und welches offen ist, ändert
   das Skript ohne Neuladen. Deshalb hängt die Farbe hier am Zustand des
   Panels und nicht an einem beim Rendern gesetzten Wert: nach einem
   Tabwechsel auf eine helle Ansicht wäre der dunkle Streifen sonst
   stehengeblieben. Liegt eine helle Sektion dazwischen, trägt die Seite
   die Klasse nicht. */
main:has(.tafel-panel:not([hidden])) .cta-rahmen.dunkel-bei-tafel {
  background: #06333B;
}

/* Die Welle ist eine Maske auf dem Block, kein eigenes Element davor.
   Nur so läuft EIN Verlauf durch Kante und Fläche — zwei getrennte
   Verläufe rechnen über verschiedene Höhen und stossen sichtbar
   aneinander.

   Zwei Maskenebenen: oben die 64px hohe Wellenform, darunter eine
   deckende Fläche für den Rest. Die 63px in der zweiten Ebene sind ein
   Pixel Überlappung, damit an der Naht kein Haarriss aufblitzt. */
.newsletter.cta {
  padding-top: 128px;              /* 64 Wellenhöhe + 64 Innenabstand */
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='64' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 36 C 240 64 480 8 720 30 C 960 52 1200 14 1440 40 L 1440 64 L 0 64 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='64' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 36 C 240 64 480 8 720 30 C 960 52 1200 14 1440 40 L 1440 64 L 0 64 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  -webkit-mask-size: 100% 64px, 100% calc(100% - 63px);
  mask-size: 100% 64px, 100% calc(100% - 63px);
  -webkit-mask-position: top left, bottom left;
  mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
}

/* Ohne Maskenunterstützung bleibt der Block ein Rechteck mit Verlauf —
   ohne Welle, aber ohne Bruch. */
@supports not (mask-image: linear-gradient(#000, #000)) {
  .newsletter.cta { padding-top: 64px; }
}

/* Gebiete ohne aktuelle Termine. Bewusst zurückhaltend: keine Karten mit
   Bildern, sonst stehen sie gleichrangig neben den buchbaren. Eine Reihe von
   Namen sagt genug und hält sie verlinkt. */
.weitere-laender {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--rand-1);
}
.weitere-laender h2 {
  font-size: 1.15rem;
  margin-bottom: .4em;
}
.weitere-laender > p {
  max-width: 62ch;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.landmarken {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.landmarken a {
  display: inline-block;
  padding: 7px 15px 8px;
  border: 1px solid var(--rand-1);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--tiefsee);
  font-size: .9rem;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.landmarken a:hover { border-color: var(--lagune); background: var(--riff); }

/* Newsarchiv unter der Liste. Abgelaufene Beiträge -- sie sollen erreichbar
   sein, aber nicht wie aktuelle aussehen: kein Bild, kein Anreisser, nur
   Datum und Titel. */
.news-archiv {
  max-width: 1240px;
  margin: 52px auto 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--rand-1);
}
.news-archiv h2 { font-size: 1.15rem; margin-bottom: .3em; }
.news-archiv > p { color: var(--ink-soft); margin-bottom: 18px; }

.archivliste { list-style: none; margin: 0; padding: 0; }
.archivliste li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--rand-2);
}
.archivliste time {
  flex: 0 0 5.5em;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-soft);
}
.archivliste a { color: var(--tiefsee); text-decoration: none; }
.archivliste a:hover { color: var(--lagune-dkl); text-decoration: underline; }

.archiv-rest { margin-top: 14px; font-size: .9rem; color: var(--ink-soft); }