/* ==========================================================================
   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); }
.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);
  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;
}

/* 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.

     Die Zellen behalten ihre Reihenfolge im Markup und bekommen ihren Platz
     über grid-area zugewiesen. Damit 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-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .tafel-zeile > td { padding: 0; border: 0; }

  /* Zeile 1 Termin | Preis · Zeile 2 Schiff | Ziel
     Zeile 3 Route über beide Spalten · Zeile 4 Plätze | Knopf */
  .tafel-zeile .td-termin  { grid-area: 1 / 1; }
  .tafel-zeile .td-preis   { grid-area: 1 / 2; text-align: right; }
  .tafel-zeile .td-schiff  { grid-area: 2 / 1; }
  .tafel-zeile .td-plaetze { grid-area: 4 / 1; }
  .tafel-zeile .td-aktion  { grid-area: 4 / 2; }
  .tafel-zeile .td-route   { grid-row: 3; grid-column: 1 / -1; }

  /* Das Ziel entfällt ab 980px aus Platzgründen, nicht aus inhaltlichen —
     neben dem Schiffsnamen ist wieder Raum dafür. Gedeckelt allerdings:
     der längste Ländername hat 27 Zeichen ("Spanien - Kanarische Inseln")
     und würde in der Tafelschrift über 200px belegen, also mehr als die
     Hälfte eines 390px-Geräts. Mit max-width bricht er stattdessen um. */
  .tafel-zeile .spalte-ziel {
    display: block;
    grid-area: 2 / 2;
    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; }

.finder-form {
  display: grid;
  /* minmax(0, …) statt nur fr: die Mindestbreite eines fr-Tracks ist der
     Mindestinhalt, und der ist hier ein <select>, das Chrome nach seiner
     längsten Option bemisst ("Ägypten - Rotes Meer"). Auf einem 320px-Gerät
     sprengte das die Seite. */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}
.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; }

@media (max-width: 980px) {
  .finder-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .finder-form .btn { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .finder-form { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- 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 */

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(3, 30, 37, .92); }

.lightbox-buehne {
  display: grid;
  place-items: center;
  height: 100%;
  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);
}
.lightbox-buehne picture { display: contents; }
.lightbox-buehne img {
  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; }