/* ==========================================================================
   Gemeinsame Bausteine
   Alles, was mehr als eine Seite braucht: Wellen-Trenner,
   Sektionskoepfe, Bildkarten, die Abfahrtstafel, Newsletter-Block und
   die Dekoelemente. Wird vom Layout auf jeder Seite geladen.
   Seitenspezifisches steht in start.css bzw. detail.css.
   ========================================================================== */

/* ------------------------------------------------------ Wellen-Trenner */

.welle { line-height: 0; }
.welle svg { display: block; width: 100%; height: 64px; margin-bottom: -1px; }

/* ------------------------------------------------------------- Sektion */

.sek-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
}
.sek-kopf h2 { margin-bottom: 0; }
.sek-kopf.hell h2 { color: var(--weiss); }
.eyebrow.sand { color: var(--auf-dunkel-sand); }


/* -------------------------------------------------------- Bildkarten */

.specials-raster {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 22px;
}
.specials-klein { display: grid; gap: 22px; }

.karte-bild {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 158px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background-color: #0E5B66;
  background-size: cover;
  background-position: center;
  color: var(--weiss);
  text-decoration: none;
  overflow: hidden;
  transition: transform .2s;
}
.karte-bild.gross { min-height: 340px; }

/* Die zwei kleinen Specials teilen sich die Zeile der grossen Karte und sind
   damit so hoch, wie diese es zulaesst. Mit 158px ergab das bei 474px Breite
   ein Verhaeltnis von 3:1 -- ein Briefschlitz, in dem vom Bild nichts zu
   erkennen war. 230px ist die Hoehe, die jede andere Bildkarte der Seite hat
   (Specials-Uebersicht, Reiselaender, Suche); die grosse Karte waechst
   dadurch von selbst mit, weil die Zeile sich nach der hoeheren Spalte
   richtet. */
.specials-klein .karte-bild { min-height: 230px; }
.karte-bild:hover { transform: translateY(-4px); }

.karte-bild .schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 51, 59, 0) 30%, rgba(6, 51, 59, .88) 100%);
}
.karte-text { position: relative; z-index: 1; }
.karte-text h3 { color: var(--weiss); margin-bottom: .3em; }
.karte-bild.gross .karte-text h3 { font-size: 1.6rem; }
.karte-text p { font-size: .92rem; margin-bottom: .5em; }
.karte-text .meta {
  display: block;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--auf-dunkel-sand);
}
.badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: .3em .9em;
  border-radius: 999px;
  background: var(--sand);
  color: var(--weiss);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* ---------------------------------------------------- Abfahrtstafel */

.tafel-sektion {
  position: relative;
  background: var(--tiefsee);
  color: var(--auf-dunkel-text);
  padding: 52px 0 72px;
  scroll-margin-top: 90px;
}

.tiefenskala {
  position: absolute;
  left: 26px;
  top: 170px;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 12px;
  border-left: 1.5px dashed rgba(255, 255, 255, .18);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .28);
}
.tiefenskala span::before { content: '– '; }

.tafel-huelle { overflow-x: auto; }

.tafel {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: .92rem;
}
.tafel th {
  padding: 0 14px 12px;
  text-align: left;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--auf-dunkel-sek);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  white-space: nowrap;
}
.tafel td {
  padding: 15px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  vertical-align: top;
}
.tafel-zeile:hover > td { background: rgba(255, 255, 255, .05); }
.tafel-zeile.hat-kabinen { cursor: pointer; }

.td-schiff a { color: var(--weiss); font-weight: 600; text-decoration: none; }
.td-schiff a:hover { text-decoration: underline; }
.td-route a { color: var(--auf-dunkel-text); text-decoration: none; }
.td-route a:hover { text-decoration: underline; }
.td-preis { color: var(--auf-dunkel-sand); font-weight: 600; white-space: nowrap; }
.td-termin { white-space: nowrap; }
.td-aktion { white-space: nowrap; text-align: right; }

/* Beschriftungen, die erst die Karte braucht — auf dem Desktop steht sie
   in der Spaltenüberschrift. */
.nur-karte { display: none; }

.punkt {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: baseline;
}
.punkt.gut    { background: var(--status-gut); }
.punkt.wenige { background: var(--status-wenige); }
.punkt.voll   { background: var(--status-voll); }

.pille {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--sand);
  color: var(--weiss);
  font-size: .7rem;
  vertical-align: middle;
}

/* Die Special-Pille ist ein Link. Sie steht in .td-route, deren Linkfarbe
   sonst gewinnen würde — darum die Farbe hier erneut, und statt der
   Unterstreichung ein Aufhellen: ein Unterstrich unter einem farbigen
   Kästchen sieht nach Versehen aus. */
a.pille {
  text-decoration: none;
  transition: background-color .15s ease;
}
.td-route a.pille { color: var(--weiss); }
.td-route a.pille:hover,
.td-route a.pille:focus-visible { background: #D2A473; text-decoration: none; }

.btn-anfrage {
  display: inline-block;
  padding: .4em 1em;
  border: 0;
  font-family: var(--font-body);
  border-radius: 999px;
  background: var(--auf-dunkel-hell);
  color: var(--tiefsee);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn-anfrage:hover { background: var(--weiss); }
.btn-anfrage.gross { padding: .6em 1.4em; font-size: .92rem; }

/* Der Pfeil dreht sich, sobald der Kabinenblock offen ist. */
.btn-anfrage .pfeil {
  display: inline-block;
  margin-left: 2px;
  transition: rotate .2s;
}
.btn-anfrage[aria-expanded="true"] .pfeil { rotate: 180deg; }

.kabinen-zeile > td { background: rgba(255, 255, 255, .04); }
.kabinen-kopf { font-size: .82rem; color: var(--auf-dunkel-sek); margin-bottom: 10px; }
.kabinen-kopf strong { color: var(--weiss); font-weight: 600; }

.kabinen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.kabine {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  font-size: .84rem;
}
.kabine.aus { opacity: .4; }
.kabine-name {
  color: var(--weiss);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kabine-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.kabine-frei  { color: var(--auf-dunkel-sek); }

/* Mars- oder Venuszeichen beim letzten Platz einer Kabine: scubadates sagt
   dann, mit wem er zu teilen ist. Zwei Farben und nicht eine, weil die
   Zeichen auf 18 Pixel einander aehnlich sehen -- ein Kreis mit Anhang.
   Beide sind auf dem dunklen Grund der Tafel geprueft. */
.kabine-teilen {
  display: inline-flex;
  align-items: center;
  /* Der Kreis des Zeichens sitzt tiefer als die Schriftmitte. */
  margin-top: -1px;
  cursor: help;
}
.kabine-teilen.mann { color: #8FC8E8; }
.kabine-teilen.frau { color: #E9B6C8; }

.kabine-preis { color: var(--auf-dunkel-sand); margin-left: auto; }
.kabine-anfrage {
  padding: .2em .7em;
  border-radius: 999px;
  background: var(--auf-dunkel-hell);
  color: var(--tiefsee) !important;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
}

.tafel-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  margin-top: 18px;
  font-size: .82rem;
  color: var(--auf-dunkel-sek);
}
.legende { display: flex; flex-wrap: wrap; gap: 18px; }
.tafel-leer {
  padding: 28px 0;
  color: var(--auf-dunkel-text);
  max-width: 62ch;
}

/* Der Knopf unter der Tafel: „Weitere Termine", „Mehr Sonderangebote", der
   Weg aus einem leeren Filter und das Blättern.

   Stand in detail.css und war damit auf der Startseite unsichtbar -- die
   lädt nur omneia, komponenten und start. Die Abfahrtstafel gehört zu den
   Komponenten und braucht ihre Regeln dort, wo sie überall gelten. */
.tafel-mehr { text-align: center; margin: 22px 0 0; }
/* Der Weg von der Seite steht unter der Legende und braucht mehr Luft: die
   Legende ist eine Fusszeile, der Knopf darunter ein neuer Gedanke. */
.tafel-mehr.weiter { margin-top: 30px; }
.btn-mehr {
  padding: .6em 1.6em;
  border: 1px solid var(--auf-dunkel-hell);
  border-radius: 999px;
  background: none;
  color: var(--auf-dunkel-hell);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn-mehr:hover { background: rgba(191, 220, 226, .12); }
a.btn-mehr { display: inline-block; text-decoration: none; }

/* ------------------------------------------------------------ Newsletter */

.newsletter {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--lagune-dkl), var(--lagune));
  color: var(--weiss);
  padding: 64px 0;
  text-align: center;
}
.newsletter h2 { color: var(--weiss); }
.newsletter-inhalt { position: relative; z-index: 1; }
.newsletter p { max-width: 56ch; margin-inline: auto; }
.btn.dunkel { background: var(--tiefsee); }
.btn.dunkel:hover { background: #052a31; }

.newsletter-form {
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin: 24px auto 0;
}
.newsletter-form input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: .72em 1.2em;
  border: 0;
  border-radius: 999px;
  font: inherit;
  color: var(--ink);
}
.newsletter-form input[type="email"]:focus {
  outline: 3px solid var(--tiefsee);
  outline-offset: 2px;
}
.newsletter-form .btn { flex: 0 0 auto; }

.newsletter-hinweis {
  max-width: 52ch;
  margin: 16px auto 0;
  font-size: .82rem;
  color: #E4F3F5;
}
.newsletter-hinweis a { color: var(--weiss); }

/* ------------------------------------------------------------ Dekoration */

.deko-blasen {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle 13px at 30% 75%, rgba(101, 165, 178, .25) 98%, transparent 100%),
    radial-gradient(circle  7px at 62% 48%, rgba(101, 165, 178, .20) 98%, transparent 100%),
    radial-gradient(circle  4px at 45% 22%, rgba(101, 165, 178, .17) 98%, transparent 100%),
    radial-gradient(circle 2.5px at 70% 8%, rgba(101, 165, 178, .14) 98%, transparent 100%);
}
.deko-blasen.hell {
  background-image:
    radial-gradient(circle 13px at 30% 75%, rgba(255, 255, 255, .20) 98%, transparent 100%),
    radial-gradient(circle  7px at 62% 48%, rgba(255, 255, 255, .16) 98%, transparent 100%),
    radial-gradient(circle  4px at 45% 22%, rgba(255, 255, 255, .13) 98%, transparent 100%),
    radial-gradient(circle 2.5px at 70% 8%, rgba(255, 255, 255, .10) 98%, transparent 100%);
}

.bild-platzhalter { background: linear-gradient(135deg, var(--riff), #DCEBED); }

/* Nur für Screenreader.

   Bewusst OHNE position: absolute. Absolut positionierte Elemente beziehen
   sich auf den naechsten positionierten Vorfahren — bei der Beschriftung in
   der Tabellen-Kopfzeile ist das .tafel-sektion, also ein Element AUSSERHALB
   des Scroll-Containers .tafel-huelle. Damit entkommt die Beschriftung dem
   Scroller, landet an der Position der letzten Spalte und verbreitert auf
   schmalen Geraeten das gesamte Dokument. In der Fliessrichtung belegt der
   1x1-Kasten mit overflow:hidden nichts Nennenswertes und kann nirgends
   ausbrechen. */
.nur-sr {
  display: inline-block;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------- Band mit der Bewertung

   Ein schmaler Streifen, in der Mitte das Zeichen von scuba-advisor.com,
   nach links und rechts je eine Haarlinie bis zum Rand.

   Das Zeichen bringt seine Masse selbst mit -- Schriftzug 250 Pixel,
   Sterne 24 -- und ist weiss. Der Streifen braucht also einen dunklen
   Grund, und den setzt die Seite, die ihn zeigt; hier steht nur die
   Ordnung. */
.bewertungsband { padding: clamp(14px, 2vw, 22px) 0; }
.bewertungsband .wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 40px);
}
/* Die Linien laufen nach aussen aus. Durchgezogen bis zum Rand wirkten sie
   wie eine Trennung der Seite; ausgefadet fuehren sie zum Zeichen hin und
   hoeren dort auf, wo sie nichts mehr zu sagen haben. */
.bewertungsband .wrap::before,
.bewertungsband .wrap::after {
  content: '';
  flex: 1 1 0;
  height: 1px;
  opacity: .3;
}
.bewertungsband .wrap::before { background: linear-gradient(to right, transparent, currentColor); }
.bewertungsband .wrap::after  { background: linear-gradient(to left,  transparent, currentColor); }
/* Sonst zaehlte der versteckte Satz als Flex-Element mit und schoebe das
   Zeichen um seine Breite plus einen Abstand aus der Mitte. */
.bewertungsband .nur-sr { position: absolute; }

/* Schriftzug und Sterne enger zusammen, sobald sie untereinander stehen.
   Das Zeichen ist rund 440 Pixel breit und bricht darunter von selbst um
   (flex-wrap in seinem eigenen Markup); dann standen zwischen beiden 35
   Pixel -- 20 aus dem gap und 15 aus dem Polster der Sternenspalte, das
   nebeneinander die Sterne auf die Mitte des Schriftzugs hebt.

   row-gap trifft nur die umgebrochene Lage, die Spalte daneben bleibt bei
   ihren 20 Pixeln. Beides braucht !important: die Masse stehen als
   style-Attribut im fremden Markup, und daran kommt sonst nichts heran. */
.bewertungsband a > div { row-gap: 0 !important; }

/* 480 ist der Punkt, an dem der Umbruch faellt: 440 Pixel Zeichen plus
   zweimal 22 Pixel Satzspiegel. Erst hier stoert das Polster, vorher
   richtet es die Sterne aus. */
@media (max-width: 480px) {
  .bewertungsband a > div > div + div { padding-top: 4px !important; }
}

/* Schmal wird jeder Punkt gebraucht: das Zeichen bricht dann von selbst um
   -- sein eigenes Markup steht auf flex-wrap --, und die Linien haetten
   daneben nichts mehr zu halten. */
@media (max-width: 760px) {
  .bewertungsband .wrap::before,
  .bewertungsband .wrap::after { display: none; }
}


/* Aktionsreihe unter einem Textblock — auch im CTA der Detailseiten. */
.ueberuns-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 0; }

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

@media (max-width: 1420px) {
  /* Die Tiefenskala braucht Rand neben dem 1180px-Container. */
  .tiefenskala { display: none; }
}

@media (max-width: 980px) {
  /* Die Zielspalte ist auf der Detailseite ohnehin redundant und
     auf schmalen Geraeten die erste, die entfallen kann. */
  .tafel .spalte-ziel { display: none; }
  .specials-raster { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* Die Tafel als Zeile ist hier nicht zu halten. Termin, Preis und der
     Knopf tragen nowrap und belegen mit den Zellenpolstern zusammen schon
     rund 560px — bevor der erste Buchstabe Routenname gesetzt ist. Und die
     sind lang: im Schnitt 30 Zeichen, der längste 88. Kleiner setzen hilft
     dagegen nicht, also wird jede Abfahrt zur Karte.

     700px und nicht früher: darüber bleibt die Tabelle. Sie braucht gemessen
     829px, aber .tafel-huelle ist ein eigener waagerechter Scroller — die
     Seite wandert dabei nicht mit, und die dichte Tabelle liest sich auf
     einem Tablet besser als eine sehr breite Karte mit viel Leerraum.

     Oben zwei Spalten: Termin und Schiff links, Preis und Knopf rechts.
     Darunter geht es über die ganze Breite weiter. Die Zellen behalten ihre
     Reihenfolge im Markup, und welche Reihe die unteren bekommen, vergibt
     das Raster selbst — so sieht die Karte gleich aus, ob die Zielspalte
     mitkommt oder nicht; auf den Detailseiten fehlt sie. */
  .tafel,
  .tafel thead,
  .tafel tbody,
  .tafel tr,
  .tafel th,
  .tafel td { display: block; }

  /* Die Kopfzeile ist ohne Spalten darunter nichts wert, darf aber nicht
     verschwinden: nur solange sie im Baum steht, behalten die Zellen ihre
     Spaltenzuordnung für Screenreader. Also wegklippen, nicht ausblenden. */
  .tafel thead {
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* `.tafel tr` als Selektor davor -- sonst gewinnt `.tafel tr {display:block}`
     ein paar Zeilen höher. Klasse plus Element schlägt Klasse allein, und
     die Karte war damit nie in Kraft: alle Zellen standen untereinander,
     jede Abfahrt brauchte sieben Zeilen. */
  .tafel tr.tafel-zeile {
    display: grid;
    /* Links so viel wie da ist, rechts so wenig wie nötig: `auto` bemisst
       sich am Knopf, der breitesten Sache in der Spalte. */
    grid-template-columns: minmax(0, 1fr) auto;
    /* Feste Reihen, weil die Aufteilung an einer bestimmten Zeile beginnt.
       Fehlt die Zielspalte -- auf den Detailseiten -- bleibt Reihe 4 leer
       und ist damit null hoch; sichtbar bleibt nur ihr Zeilenabstand. */
    grid-template-rows: repeat(6, auto);
    align-items: start;
    gap: 3px 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  /* Erst einspaltig, dann zweispaltig: Termin, Schiff, Route und Ziel nehmen
     die ganze Breite. Ab den freien Plätzen teilt sich die Zeile -- links
     die Verfügbarkeit, rechts der Preis und darunter der Knopf.

     Zwei frühere Fassungen waren unruhig. Stand der Preis neben dem Termin,
     blieb unter dem Datum eine Leerzeile, weil der Preis mit dem alten
     darüber zwei Zeilen hoch ist und die Reihe streckte. Und stand der
     Schiffsname in einer linken Spalte, brach er neben dem Knopf um und es
     entstand eine Treppe aus drei Anfangshöhen. Jetzt gehört alles
     Beschreibende einer Kante, und Preis und Knopf stehen als Block
     zusammen -- was zusammengehört, steht auch zusammen. */
  .tafel-zeile > td { padding: 0; border: 0; grid-column: 1 / -1; }

  .tafel-zeile .td-termin   { grid-row: 1; }
  .tafel-zeile .td-schiff   { grid-row: 2; }
  .tafel-zeile .td-route    { grid-row: 3; }
  .tafel-zeile .spalte-ziel { grid-row: 4; }
  .tafel-zeile .td-plaetze  { grid-column: 1; grid-row: 5; }

  .tafel-zeile .td-preis {
    grid-column: 2;
    grid-row: 5;
    text-align: right;
  }
  .tafel-zeile .td-aktion {
    grid-column: 2;
    grid-row: 6;
    justify-self: end;
  }

  /* Schiff und Route dürfen umbrechen -- links ist der Platz dafür da, und
     nowrap zwang die rechte Spalte sonst schmaler, als der Knopf braucht.
     Routennamen werden bis 88 Zeichen lang. */
  .tafel-zeile .td-schiff,
  .tafel-zeile .td-route { white-space: normal; }

  /* Das Ziel entfällt ab 980px aus Platzgründen, nicht aus inhaltlichen. */
  .tafel-zeile .spalte-ziel {
    display: block;
    font-size: .74rem;
    line-height: 1.35;
    white-space: normal;
    color: var(--auf-dunkel-sek);
  }

  .tafel-zeile .td-termin,
  .tafel-zeile .td-preis { font-size: 1rem; }
  .tafel-zeile .td-termin { color: var(--weiss); }

  /* Ohne Zellenraster gäbe das Aufhellen einzelner Zellen ein Flickenbild.
     Auf Fingergeräten gibt es ohnehin kein Überfahren. */
  .tafel-zeile:hover > td { background: none; }

  .nur-karte { display: inline; }

  /* Kabinen einspaltig: die Namen werden bis 51 Zeichen lang. */
  .kabinen-zeile > td { padding: 0 0 16px; border: 0; }
  .kabinen-raster { grid-template-columns: 1fr; }
  .kabine-name { white-space: normal; }
}

@media (max-width: 640px) {
  .tafel { font-size: .82rem; }
}

/* --------------------------------------------------------- Reisefinder */

.finder {
  background: var(--weiss);
  border-radius: var(--radius-lg);
  border-top: 5px solid var(--lagune);
  box-shadow: var(--schatten);
  padding: 26px 26px 20px;
}

.finder-titel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  margin-bottom: .8em;
}
.finder-titel svg { color: var(--lagune); flex: 0 0 auto; }

/* Flex und kein Raster, weil die Zahl der Felder wechselt: die Startseite
   zeigt drei (Ziel, Start, Ende), die Sonderangebote drei andere (Schiff,
   Start, Ende), die Terminsuche vier. Ein festes Raster aus vier Spalten
   passte für drei Felder plus Knopf -- beim vierten Feld rutschte der Knopf
   in eine zweite Zeile. Flex verteilt, was da ist, und bricht erst um, wenn
   es zu eng wird. */
.finder-form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
}
/* Wachsen ja, schrumpfen nein: mit erlaubtem Schrumpfen quetschten sich vier
   Felder auf 117px zusammen und schoben stattdessen den Knopf um. So bleibt
   150px die Untergrenze, und wenn es nicht reicht, wird umgebrochen. */
.finder-form .feld { flex: 1 0 150px; }
/* Das erste Feld trägt die längsten Namen ("Ägypten - Rotes Meer (1.760)")
   und bekommt entsprechend mehr vom Überschuss. */
.finder-form .feld:first-child { flex-grow: 1.4; }
/* Der Knopf nimmt seine Textbreite und wächst nicht mit. */
.finder-form .btn { flex: 0 1 auto; }
.feld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.feld label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.feld select,
.feld input {
  font: inherit;
  /* Dasselbe eine Ebene tiefer: ohne min-width bleibt das Feld so breit wie
     seine längste Option, auch wenn die Spalte schmaler ist. */
  min-width: 0;
  max-width: 100%;
  padding: .75em .9em;
  border: 1.5px solid var(--rand-4);
  border-radius: var(--radius);
  background: #FBFEFE;
  color: var(--ink);
}
.feld select:focus,
.feld input:focus { border-color: var(--lagune); outline: none; }

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.chips-label { font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.chip {
  padding: .35em 1em;
  border: 1px solid #EADDC8;
  border-radius: 999px;
  background: var(--sand-hell);
  color: var(--treibholz);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
}
.chip:hover, .chip.an { background: var(--sand); border-color: var(--sand); color: var(--weiss); }
.chip.zuruecksetzen { background: none; border-style: dashed; }

/* Bis 640px untereinander. Zwei Felder nebeneinander wären mit 150px Basis
   noch möglich, aber ein <select> mit Ländernamen und ein Datumsfeld sind
   dort beide zu schmal, um sie zu lesen. */
@media (max-width: 640px) {
  .finder-form { flex-direction: column; align-items: stretch; }
  /* Basis und Wachstum zurücknehmen: in der Spalte ist die Basis die HÖHE,
     nicht die Breite. Die 150px von oben machten jedes Feld 150 Pixel hoch,
     und das Wachstum verteilte den Rest der Karte noch darauf. */
  .finder-form .feld,
  .finder-form .btn { flex: 0 0 auto; }
}

/* ------------------------------------------------------------- Galerie */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.galerie picture { display: block; }

.galerie-link {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s;
}
.galerie-link:hover { transform: translateY(-3px); }

.galeriebild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Lupe beim Überfahren — der Hinweis, dass sich etwas öffnet. */
.galerie-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 51, 59, .28)
    no-repeat center/26px 26px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity: 0;
  transition: opacity .2s;
}
.galerie-link:hover::after,
.galerie-link:focus-visible::after { opacity: 1; }

/* ------------------------------------------------------------ Lightbox */

/* Der Dialog wird ueber inset aufgespannt und nicht ueber eine Hoehe.
   Vorher stand hier height/max-height: 100dvh -- und wenn eine Zahl daneben
   liegt, liegt alles daneben, was sich auf sie bezieht: die Buehne misst
   sich in Prozent daran, das Bild misst sich an der Buehne. Auf dem Telefon
   sass das Bild deshalb nicht in der Mitte, sondern klebte unten.

   Ein modaler Dialog ist von sich aus fest positioniert (position: fixed im
   Stylesheet des Browsers). inset: 0 mit auto-Massen spannt ihn damit genau
   ueber den sichtbaren Bereich -- ohne dvh, lvh oder svh und ohne die Frage,
   welches davon gerade gilt, waehrend die Adressleiste ein- und ausfaehrt.

   Die max-*-Vorgaben des Browsers muessen mit weg: ein Dialog ist sonst nur
   `calc(100% - 6px - 2em)` gross und liesse einen Rand stehen. */
.lightbox {
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(3, 30, 37, .92); }

.lightbox-buehne {
  /* Absolut und ueber inset, aus demselben Grund wie oben: eine Hoehe in
     Prozent braucht eine Hoehe zum Rechnen. So fuellt die Buehne den Dialog,
     was immer er misst. */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 64px 72px 88px;
  /* Eine Zeile mit fester Hoehe, nicht die automatische. Sonst waechst die
     Zeile mit dem Bild, und `max-height: 100%` am Bild bezieht sich auf die
     schon gewachsene Zeile -- also auf sich selbst und damit auf nichts. Ein
     Hochkantbild von 285x800 rendert dann 1136x3186 in einer 800 Pixel hohen
     Buehne, und die untere Haelfte liegt aussserhalb. minmax(0, 1fr) gibt der
     Zeile die Hoehe des Inhaltsbereichs, und erst dagegen kann das Bild
     gemessen werden. */
  grid-template-rows: minmax(0, 1fr);
}
/* `display: contents` loest das <picture> auf, damit das <img> selbst das
   Rasterelement wird -- nur so misst sich max-height an der Zeile und nicht
   am Bildkasten.

   Damit werden aber auch die beiden <source> zu Rasterelementen. Sie zeigen
   nichts, belegen aber je eine Zeile: das Raster hat eine Zeile (1fr) und
   legt fuer den Rest automatische an. Erstes <source> in Zeile 1, zweites in
   Zeile 2, das Bild in Zeile 3 -- und Zeile 1 nimmt sich als 1fr allen
   freien Platz. Genau deshalb klebte das Bild unten, und genau deshalb fiel
   es auf dem Telefon auf: dort ist bei einem Querformat viel Platz uebrig,
   auf dem Monitor fast keiner. */
.lightbox-buehne picture { display: contents; }
.lightbox-buehne source  { display: none; }
.lightbox-buehne img {
  /* Ausdruecklich in die erste Zelle. Die Zeile darueber raeumt die
     <source> aus dem Weg; das hier haelt das Bild auch dann an seinem
     Platz, wenn spaeter ein weiteres Element in der Buehne landet. */
  grid-area: 1 / 1;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* min-height: 0 gehoert dazu. Ein Rasterelement hat als automatische
     Mindesthoehe seine Inhaltsgroesse -- bei einem Bild also die eigene
     Hoehe. Damit setzt es sich gegen die Zeile durch, und max-height bleibt
     wirkungslos, obwohl die Zeile richtig bemessen ist. */
  min-width: 0;
  min-height: 0;

  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.lightbox-bildtext,
.lightbox-zaehler {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: #D9EEF1;
}
.lightbox-bildtext { bottom: 46px; padding: 0 72px; font-size: .95rem; }
.lightbox-zaehler  { bottom: 20px; font-family: var(--font-mono); font-size: .8rem; color: #8FBFC6; }

.lightbox-knopf {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
  color: var(--weiss);
  cursor: pointer;
  transition: background .18s;
}
.lightbox-knopf:hover { background: rgba(255, 255, 255, .26); }
.lightbox-knopf:disabled { opacity: .3; cursor: default; }

.lightbox-zu      { top: 18px; right: 18px; }
.lightbox-zurueck { left: 14px;  top: 50%; translate: 0 -50%; }
.lightbox-weiter  { right: 14px; top: 50%; translate: 0 -50%; }

@media (max-width: 640px) {
  .lightbox-buehne { padding: 60px 12px 92px; }
  .lightbox-bildtext { padding: 0 16px; font-size: .88rem; }
  .lightbox-zurueck { left: 10px; }
  .lightbox-weiter  { right: 10px; }
}

/* „+N"-Feld auf der letzten Kachel, wenn mehr Bilder da sind als gezeigt. */
.galerie-rest {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: rgba(6, 51, 59, .72);
  color: var(--weiss);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}
/* Die Lupe würde sich mit der Zahl überlagern. */
.galerie-link.hat-rest::after { content: none; }
.galerie-link.hat-rest:hover .galerie-rest { background: rgba(6, 51, 59, .58); }

.galerie-titel {
  font-size: 1.25rem;
  margin-bottom: .7em;
}

/* --------------------------------------------------- Rückweg zur Anfrage */

/* Schwebend unten rechts, nicht im Kopf: die Kopfzeile belegt gemessen
   1.170 der 1.180 Pixel des Inhaltsbereichs, ein weiterer Knopf dort würde
   sie wieder umbrechen lassen. Unten rechts ist ausserdem die Stelle, an
   der ein Warenkorb erwartet wird. */
.korbknopf {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--tiefsee);
  color: var(--weiss);
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(6, 51, 59, .3);
  transition: background .15s, transform .15s;
}
.korbknopf:hover,
.korbknopf:focus-visible {
  background: var(--lagune-dkl);
  color: var(--weiss);
  transform: translateY(-2px);
}
.korbknopf svg { flex: 0 0 auto; }

.korbknopf-zahl {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--sand);
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 500;
}

/* Der Knopf schwebt über dem Seiteninhalt. Am Fuss der Seite läge er sonst
   auf der letzten Zeile — das Polster hält sie frei. */
body:has(.korbknopf) .fuss { padding-bottom: 84px; }

@media (max-width: 640px) {
  /* Auf schmalen Geräten nur Symbol und Zahl: die Beschriftung würde ein
     Drittel der Zeilenbreite belegen, und das Wagensymbol ist eindeutig. */
  .korbknopf { right: 14px; bottom: 14px; padding: 12px 14px; }
  .korbknopf-text { display: none; }
  body:has(.korbknopf) .fuss { padding-bottom: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .korbknopf:hover,
  .korbknopf:focus-visible { transform: none; }
}

/* -------------------------------------------------- Angebote in der Tafel */

/* Der Preis vor dem Angebot, durchgestrichen ueber dem neuen. Kleiner und
   blasser: er ist die Vergleichsgroesse, nicht die Aussage. */
.preis-vorher {
  display: block;
  font-size: .8em;
  font-weight: 400;
  color: var(--ink-soft);
  text-decoration: line-through;
}
/* Der Angebotspreis bleibt in der Textfarbe der Spalte, nur fetter. Eine
   eigene Farbe braucht er nicht: der durchgestrichene Preis darueber und die
   Pille an der Route sagen schon, dass hier etwas nachgelassen ist -- und
   jede neue Farbe muesste sich erst am Kontrast messen lassen. */
.td-preis .preis-jetzt { display: block; font-weight: 700; }

/* In der Kabinenkarte stehen beide Preise uebereinander, nicht nebeneinander:
   nebeneinander wurde die Karte zu eng und das Euro-Zeichen rutschte in die
   naechste Zeile. Uebereinander braucht es keinen Millimeter mehr Breite. */
.kabine-preis { white-space: nowrap; text-align: right; }
.kabine-preis .preis-vorher { line-height: 1.15; }

/* Die Prozentpille faellt auf, die anderen Pillen nicht: sie ist die einzige,
   die eine Zahl traegt, und Schnaeppchenjaeger suchen genau die. */
.pille.angebot {
  background: var(--sand);
  color: var(--weiss);
  font-variant-numeric: tabular-nums;
}

/* Zwei Wege aus dem Angebotsblock: einer in die Sonderangebote, einer in alle
   Termine. Gleich gross und gleich gewichtet -- die Startseite soll nicht nur
   in den Rabatttisch fuehren. */
.tafel-wege {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pille-weg {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: var(--weiss);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease;
}
.pille-weg:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .6);
}
.pille-zahl {
  padding: 1px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 500;
}

/* Der Weg aus einem leeren Filter, direkt unter dem Satz. */
.tafel-leer-weg { padding-bottom: 28px; }