/* ==========================================================================
   Omneia Safari Fleet

   Die Reederei, nicht der Veranstalter. Verwandt mit omneia.de — dieselben
   Schriften, dieselbe Sandfarbe, dieselbe Abfahrtstafel —, aber dunkel statt
   hell und mit sehr viel mehr Luft.

   Der Grund dafür steht im Inhalt: die Hauptseite führt vierzig Schiffe und
   muss vergleichbar machen. Hier sind es zwei, und sie sind das Produkt. Was
   dort eine Kachel unter vielen ist, darf hier eine Seite füllen.

   Dieses Stylesheet liegt ÜBER omneia.css und komponenten.css. Es dreht den
   Grund ins Dunkle und setzt die eigenen Bausteine darauf; die Tokens, die
   Grundtypografie und die Abfahrtstafel kommen von dort.
   ========================================================================== */

:root {
  /* Eigene Grundfarben. Dunkler als --tiefsee (#06333B), damit Fotos davor
     leuchten und der Übergang vom Hero in den Text nicht springt. */
  --f-grund:     #05191F;
  --f-grund-2:   #0A2830;
  --f-grund-3:   #0E323C;
  --f-text:      #E4F1F3;
  --f-text-sek:  #9CB9BF;
  --f-linie:     rgba(255, 255, 255, .10);
  --f-linie-2:   rgba(255, 255, 255, .18);

  /* Der Sand der Hauptseite, eine Spur wärmer für den dunklen Grund. */
  --f-akzent:    #D2A265;
  --f-akzent-2:  #F0D9B8;

  --f-luft:      clamp(64px, 9vw, 64px);
}

body.fleet {
  background: var(--f-grund);
  color: var(--f-text);
}

body.fleet h1,
body.fleet h2,
body.fleet h3 { color: var(--f-text); }

body.fleet a { color: var(--f-akzent-2); }

/* Ein schmalerer Satzspiegel für Fließtext. Die 70 Zeichen sind keine
   Marotte: der Beschreibungstext der Soul ist 1.683 Zeichen lang, und über
   die volle Breite eines Monitors wären das Zeilen, die man verliert. */
.wrap.schmal { max-width: 720px; }

/* ------------------------------------------------------------------ Kopf */

.fleet-kopf {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 14px 0;
  /* Zunächst durchsichtig: das Hero-Foto beginnt am oberen Bildschirmrand.
     Der Farbverlauf hält die weisse Schrift über hellem Himmel lesbar --
     aber nur so viel wie nötig: .78 legte einen sichtbaren Balken über die
     obere Bildkante. */
  background: linear-gradient(to bottom, rgba(5, 25, 31, .52) 0%, rgba(5, 25, 31, .22) 55%, rgba(5, 25, 31, 0) 100%);
  transition: background .25s ease, backdrop-filter .25s ease;
}
.fleet-kopf.gescrollt {
  background: rgba(5, 25, 31, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--f-linie);
}

.fleet-kopf-inhalt {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Das Zeichen ist oben gross und schrumpft beim Scrollen -- wie auf der
   Hauptseite, nur ohne deren weisse Bullaugenplatte: die gehört zum hellen
   Kopf dort, auf dem dunklen Grund hier stünde sie wie ein Aufkleber. */
.fleet-marke {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--f-text);
  margin-right: auto;
}
.fleet-marke img {
  display: block;
  width: 72px;
  height: auto;
  transition: width .25s ease;
}
.fleet-kopf.gescrollt .fleet-marke img { width: 42px; }

.fleet-marke span { display: block; line-height: 1.15; }
.fleet-marke strong {
  display: block;
  font-family: var(--font-titel, inherit);
  font-size: 1.34rem;
  letter-spacing: .01em;
  transition: font-size .25s ease;
}
.fleet-marke em {
  display: block;
  font-style: normal;
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--f-akzent);
  transition: font-size .25s ease, letter-spacing .25s ease;
}
.fleet-kopf.gescrollt .fleet-marke strong { font-size: 1.08rem; }
.fleet-kopf.gescrollt .fleet-marke em    { font-size: .66rem; letter-spacing: .18em; }

.fleet-nav { display: flex; gap: 26px; }
.fleet-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--f-text);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
}
.fleet-nav a:hover { border-bottom-color: var(--f-linie-2); }
.fleet-nav a[aria-current="page"] { border-bottom-color: var(--f-akzent); }

/* Breit trägt die Beschriftung, das Zeichen bleibt weg -- zwei Wörter sagen
   mehr als zwei Symbole, solange Platz ist. */
.fleet-nav-zeichen { display: none; }

.fleet-knopf {
  padding: .62em 1.5em;
  border-radius: 999px;
  background: var(--f-akzent);
  color: #12242A;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  white-space: nowrap;
}
.fleet-knopf:hover { background: var(--f-akzent-2); color: #12242A; }

/* Sprachumschalter: zwei Fahnen, die aktive hervorgehoben. Er steht
   zwischen Navigation und Anfrageknopf -- der Knopf ist oft gar nicht da,
   und dann soll die Zeile nicht springen. */
.fleet-sprachwahl { display: flex; gap: 8px; align-items: center; }
.fleet-sprachwahl a {
  display: block;
  padding: 4px;
  border-radius: 4px;
  line-height: 0;
  opacity: .55;
  transition: opacity .15s ease;
  height: 24px;
}
.fleet-sprachwahl a:hover { opacity: 1; }
.fleet-sprachwahl a.an { opacity: 1; box-shadow: 0 0 0 1.5px var(--f-linie-2); }
.fleet-sprachwahl .fahne { display: block; width: 22px; height: 15px; }

.fleet-knopf-zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  height: 1.35em;
  margin-left: .5em;
  padding: 0 .3em;
  border-radius: 999px;
  background: rgba(18, 36, 42, .22);
  font-size: .82em;
  font-weight: 700;
}

/* Schmal: Zeichen statt Beschriftung.

   Die Navigation ganz auszublenden -- so war es -- heisst, dass sie auf dem
   Telefon nicht existiert, und ein Hamburgermenü für zwei Punkte ist
   Aufwand für nichts. Zwei Symbole passen in dieselbe Zeile wie Logo,
   Sprachwahl und Anfrageknopf.

   Der Text wird dabei nicht entfernt, sondern nur optisch versteckt: für
   Vorleseprogramme bleibt „Unsere Schiffe" stehen, wo die Maus einen title
   bekommt. */
@media (max-width: 760px) {
  .fleet-kopf-inhalt { gap: 12px; }
  .fleet-nav { gap: 4px; }
  .fleet-nav a { padding: 8px; border-bottom: 0; border-radius: 8px; }
  .fleet-nav a[aria-current="page"] { background: rgba(255, 255, 255, .10); }
  .fleet-nav a:hover { background: rgba(255, 255, 255, .06); }
  .fleet-nav-zeichen { display: block; }
  .fleet-nav-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Das Zeichen bleibt auch schmal gross und schrumpft mit -- nur eine
     Stufe kleiner, damit die Zeile nicht zu hoch wird. */
  .fleet-marke { gap: 10px; }
  .fleet-marke img { width: 56px; }
  .fleet-kopf.gescrollt .fleet-marke img { width: 36px; }
  .fleet-marke strong { font-size: 1.12rem; }
  .fleet-kopf.gescrollt .fleet-marke strong { font-size: .98rem; }

  /* „Safari Fleet" bleibt stehen, nur enger gesetzt: ausgeschrieben und
     weit gesperrt war die Zeile breiter als der Name darüber und nahm den
     Symbolen den Platz. */
  .fleet-marke em { font-size: .58rem; letter-spacing: .10em; }
  .fleet-kopf.gescrollt .fleet-marke em { font-size: .54rem; letter-spacing: .08em; }

  /* Der Anfrageknopf entfällt schmal: derselbe Weg steht unten rechts als
     schwebender Knopf, sobald etwas in der Liste liegt (components/korbknopf).
     Zweimal dasselbe Ziel in einer Zeile, die ohnehin eng ist. */
  .fleet-knopf { display: none; }
}

/* Rechtstexte sind lang und gegliedert -- Überschriften brauchen Luft, und
   Adressen dürfen nicht umbrechen. */
.fleet-rechtstext h2,
.fleet-rechtstext h3 {
  margin: 2em 0 .6em;
  font-size: 1.18rem;
  color: var(--f-text);
}
.fleet-rechtstext h2:first-child,
.fleet-rechtstext h3:first-child { margin-top: 0; }
.fleet-rechtstext a { overflow-wrap: anywhere; }
.fleet-rechtstext ul { margin: 0 0 1.15em; }

/* ------------------------------------------------------------- Anfrage

   Die Anfrageseite ist dieselbe wie auf der Hauptseite -- dieselbe Vorlage,
   dasselbe detail.css. Hier stehen nur die Farben: dort hell auf weiss,
   hier hell auf dunkel. Knapp vierzig Zeilen gegen eine Kopie von 223
   Zeilen Formular. */

/* Der Kopf der Flotte ist fest positioniert und rund 70 Pixel hoch.
   .textseite bringt aus detail.css nur 48 Pixel Abstand nach oben mit --
   dort steht der Kopf im Fluss, hier darüber. Ohne das läge die
   Überschrift unter dem Logo. */
.fleet .textseite { padding-top: clamp(126px, 12vw, 168px); }

.fleet .anfrage h1,
.fleet .anfrage h2 { color: var(--f-text); }
.fleet .anfrage .fliesstext,
.fleet .anfrage .hinweis { color: var(--f-text-sek); }

/* Die Posten der Anfrageliste */
.fleet .korb-posten { border-color: var(--f-linie); }
.fleet .korb-info h2 { color: var(--f-text); }
.fleet .korb-meta,
.fleet .korb-teilen { color: var(--f-text-sek); }
.fleet .korb-kabine { color: var(--f-text); }
/* Die Farbe muss an .wert und .label selbst, nicht an die Huelle: detail.css
   faerbt die beiden einzeln (--tiefsee und --ink-soft), und eine geerbte
   Farbe kommt gegen eine gesetzte nicht an. Der Preis stand deshalb in
   Dunkeltuerkis auf dunklem Grund -- Kontrast 1,33, praktisch unsichtbar. */
.fleet .korb-preis { color: var(--f-akzent-2); }
.fleet .korb-preis .wert  { color: var(--f-akzent-2); }
.fleet .korb-preis .label { color: var(--f-text-sek); }
.fleet .korb-anzahl label { color: var(--f-text-sek); }
/* Auch hier an die inneren Elemente und nicht an die Huelle -- detail.css
   faerbt jedes einzeln, und eine geerbte Farbe kommt gegen eine gesetzte
   nicht an. Dieselbe Falle wie beim Preis oben. */
.fleet .korb-zeilensumme { color: var(--f-text-sek); }
.fleet .korb-gesamt-block { border-top-color: var(--f-linie); }
.fleet .korb-gesamt .label { color: var(--f-text-sek); }
.fleet .korb-gesamt .wert { color: var(--f-akzent-2); }
.fleet .korb-gesamt-hinweis { color: var(--f-text-sek); }
.fleet .korb-weg { color: var(--f-text-sek); }
.fleet .korb-weg:hover { color: var(--f-akzent-2); }

/* Formularfelder: dunkle Fläche, heller Text, sichtbarer Rand. Ein
   Eingabefeld, das auf dunklem Grund weiss bleibt, sieht aus wie ein Loch. */
.fleet .anfrage input[type="text"],
.fleet .anfrage input[type="email"],
.fleet .anfrage input[type="tel"],
.fleet .anfrage input[type="number"],
.fleet .anfrage textarea,
.fleet .anfrage select {
  background: rgba(255, 255, 255, .05);
  border-color: var(--f-linie-2);
  color: var(--f-text);
}
.fleet .anfrage input::placeholder,
.fleet .anfrage textarea::placeholder { color: #6F8E95; }
.fleet .anfrage input:focus,
.fleet .anfrage textarea:focus,
.fleet .anfrage select:focus {
  border-color: var(--f-akzent);
  background: rgba(255, 255, 255, .08);
}
.fleet .anfrage label,
.fleet .anfrage .ankreuz { color: var(--f-text); }
.fleet .anfrage .pflichtfeld { color: var(--f-akzent); }

/* Knöpfe: der Sandton der Flotte statt des Lagunenblaus der Hauptseite */
.fleet .anfrage .btn {
  background: var(--f-akzent);
  border-color: var(--f-akzent);
  color: #12242A;
}
.fleet .anfrage .btn:hover { background: var(--f-akzent-2); border-color: var(--f-akzent-2); }
.fleet .anfrage .btn.ghost {
  background: transparent;
  border-color: var(--f-linie-2);
  color: var(--f-text);
}
.fleet .anfrage .btn.ghost:hover { border-color: var(--f-akzent); color: var(--f-akzent-2); }

/* Meldungen */
.fleet .anfrage .hinweis.erfolg {
  background: rgba(47, 143, 107, .16);
  border-color: rgba(78, 208, 165, .45);
  color: var(--f-text);
}
.fleet .anfrage .feldfehler,
.fleet .anfrage .korb-warnung { color: #F2A19A; }

/* Der Fehlerkasten hatte dasselbe Problem wie der Preis, nur andersherum:
   er bringt aus detail.css einen hellen Grund mit, und die dunkle Fassung
   oben (.fleet .anfrage .hinweis) faerbte seinen Text hellgrau -- 1,78 auf
   Rosa. Der Erfolgskasten hatte seine dunkle Fassung schon, dieser fehlte. */
.fleet .anfrage .hinweis.fehler {
  background: rgba(194, 91, 79, .16);
  border-color: rgba(228, 117, 107, .5);
  color: #F2A19A;
}
.fleet .anfrage .anfrage-rahmen {
  background: rgba(255, 255, 255, .05);
  border-color: var(--f-linie);
  color: var(--f-text-sek);
}

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

.fleet-hero {
  position: relative;
  /* Nicht 100vh: ein Bildschirm voll Foto ohne jeden Hinweis, dass darunter
     etwas kommt, liest sich wie eine Sackgasse. 92 lässt den nächsten
     Abschnitt gerade eben anklingen und gibt dem Schiff trotzdem die volle
     Höhe. */
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Wenig Luft nach unten: der Name soll tief sitzen, aber ohne Scrollen
     sichtbar bleiben -- samt der Merkmale darunter.
     Die vier Pixel sind kein Versehen. Der Block liegt am unteren Rand
     (justify-content: flex-end), also ist dieses Polster die einzige
     Stellschraube fuer seine Hoehe -- 44 hiessen 44 Pixel hoeher. Und der
     Rand selbst ist unsichtbar: der Schleier endet dort in derselben Farbe,
     die der naechste Abschnitt als Grund traegt. */
  padding: 132px 0 4px;
  background-size: cover;
  background-position: center;
  background-color: var(--f-grund-2);
}

/* Der Schleier hat genau eine Aufgabe: die Schrift unten lesbar machen.
   Vorher lag er wie ein Grauschleier über dem ganzen Bild -- bei 42 % Höhe
   schon 55 % Deckung, und damit auch über dem Schiff, das die Mitte füllt.
   Das Foto wirkte düster, obwohl es in praller Sonne aufgenommen ist.
   Jetzt bleibt die obere Hälfte nahezu unberührt, und die Deckung steigt
   erst dort, wo Text steht. */
.fleet-hero-schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    var(--f-grund)        0%,
    rgba(5, 25, 31, .86)  9%,
    rgba(5, 25, 31, .58) 20%,
    rgba(5, 25, 31, .26) 33%,
    rgba(5, 25, 31, .06) 48%,
    rgba(5, 25, 31, 0)   62%);
}

.fleet-hero-inhalt { position: relative; }

.fleet-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono, monospace);
  font-size: .70rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--f-akzent);
}

.fleet-hero h1 {
  margin: 0;
  font-size: clamp(2.8rem, 8.5vw, 6.4rem);
  line-height: .96;
  letter-spacing: -.02em;
}

.fleet-hero-zeile {
  max-width: 620px;
  margin: 20px 0 0;
  font-size: clamp(1.02rem, 1.9vw, 1.28rem);
  line-height: 1.55;
  color: var(--f-text);
}

.fleet-merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.fleet-merkmale li {
  padding: .42em 1em;
  border: 1px solid var(--f-linie-2);
  border-radius: 999px;
  background: rgba(5, 25, 31, .45);
  backdrop-filter: blur(4px);
  font-size: .80rem;
  letter-spacing: .02em;
}

/* Der Preis sitzt rechts unten am Hero und nicht im Textfluss: er ist eine
   Angabe zum Angebot, nicht zum Schiff. */
.fleet-hero-preis {
  position: absolute;
  right: max(24px, calc((100vw - 1180px) / 2));
  bottom: 4px;   /* auf derselben Grundlinie wie der Textblock links */
  z-index: 1;
  text-align: right;
  line-height: 1.25;
}
.fleet-hero-preis span {
  display: block;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--f-text-sek);
}
.fleet-hero-preis strong {
  display: block;
  font-family: var(--font-titel, inherit);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  color: var(--f-akzent-2);
}
@media (max-width: 860px) {
  /* Der Preis steht als Geschwister des .wrap im Abschnitt, nicht darin --
     breit braucht er das nicht, dort liegt er absolut am rechten Rand. Wird
     er schmal zum gewoehnlichen Absatz, fehlt ihm damit der Seitenrand, und
     er klebte an der Bildschirmkante. Dieselbe Polsterung wie .wrap bringt
     ihn auf die Fluchtlinie von Ueberschrift und Merkmalen. */
  .fleet-hero-preis {
    position: static;
    text-align: left;
    margin-top: 26px;
    padding-inline: var(--pad);
  }

  /* Dasselbe Problem wie beim Starthero, nur mit einem CSS-Hintergrund
     statt einem <picture>: ein bildschirmhoher Rahmen und ein quer
     aufgenommenes Schiff ergeben mit `cover` einen Ausschnitt aus der
     Schiffsmitte. Deshalb schmal kein `cover`, sondern volle Breite in
     eigener Höhe -- das Schiff bleibt ganz.

     70vw ist der reservierte Platz dafür (die Teaserbilder sind quer, meist
     3:2 = 67vw). Ist ein Bild höher, reicht es hinter den Text, wo der
     Schleier es deckt; ist es flacher, bleibt ein Streifen Grund, den
     derselbe Schleier deckt. */
  .fleet-hero {
    min-height: 0;
    padding-top: calc(84px + 70vw);
    /* Schmal steht der Text nicht mehr am unteren Rand, sondern unter dem
       Foto auf dem Grund -- hier braucht es das gewohnte Polster zurueck,
       sonst klebt er am naechsten Abschnitt. */
    padding-bottom: clamp(26px, 4vw, 40px);
    background-size: 100% auto;
    /* 84px und nicht `top`: das Foto beginnt unter dem Kopf, nicht hinter
       ihm. So macht es die Startseite auch -- dort schiebt das margin-top
       am <picture> das Bild nach unten -- und der Kopf steht auf dem Grund
       der Seite statt auf dem Foto. Ueber einem hellen Himmel war er sonst
       kaum als eigene Zeile zu erkennen. */
    background-position: center 84px;
    background-repeat: no-repeat;
    /* Derselbe Grund wie bei der Startseite, damit der Streifen hinter dem
       Kopf auf beiden Seiten gleich aussieht. */
    background-color: var(--f-grund);
  }
  /* Der Schleier beginnt jetzt erst in der unteren Bildhälfte und ist ab
     der Bildkante voll gedeckt -- er trägt den Übergang vom Foto zum
     Grund, auf dem Name und Preis stehen. */
  .fleet-hero-schleier {
    top: calc(84px + 46vw);
    background: linear-gradient(to bottom,
      rgba(5, 25, 31, 0)    0%,
      rgba(5, 25, 31, .55) 34%,
      var(--f-grund)       64%,
      var(--f-grund)      100%);
  }
}

/* ------------------------------------------------------------ Starthero */

/* Anders als der Schiffs-Hero kein CSS-Hintergrund, sondern ein <picture>.
   Der Grund liegt im Motiv: die Spirit sitzt am rechten Bildrand und fiele
   bei `cover` auf dem Handy als erstes heraus. Über das Manifest bekommt
   das schmale Format einen eigenen Zuschnitt -- siehe config/medien.php. */
.fleet-starthero {
  position: relative;
  min-height: 94vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Wenig Luft nach unten: der Block sitzt tief, bleibt aber samt
     Anreisser ohne Scrollen sichtbar. */
  padding: 132px 0 clamp(18px, 2vw, 30px);
  overflow: hidden;
  background: var(--f-grund);
}
.fleet-starthero-bild,
.fleet-starthero picture {
  position: absolute;
  inset: 0;
}
.fleet-starthero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fleet-starthero-schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    var(--f-grund)        0%,
    rgba(5, 25, 31, .88)  8%,
    rgba(5, 25, 31, .60) 19%,
    rgba(5, 25, 31, .28) 31%,
    rgba(5, 25, 31, .06) 46%,
    rgba(5, 25, 31, 0)   60%);
}
.fleet-starthero-inhalt { position: relative; }
/* Eine Zeile, und sie soll eine bleiben: kein max-width, dafür etwas
   kleiner gesetzt als der Schiffsname auf der Detailseite -- dort ist der
   Name das Motiv, hier ist es das Foto. */
.fleet-starthero h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* Schmal: das Foto bekommt einen eigenen Rahmen im Verhältnis 7:5, der Text
   steht darunter.

   Vorher füllte das Bild einen bildschirmhohen Rahmen (94vh). Auf einem
   Telefon ist der hochkant, das Foto quer -- `cover` schnitt also links und
   rechts über die Hälfte weg, übrig blieben ein Bug und ein Heck. 7:5 ist
   genau der Zuschnitt der schmalen Variante aus config/medien.php: beide
   Schiffe ganz im Bild, nichts wird beschnitten.

   Das Verhältnis stand anfangs auf 4:3 und musste weichen, als oben Himmel
   wegfiel: ein festes Verhältnis koppelt Höhe und Breite, und bei 4:3 wäre
   der Rumpf der Soul auf der Kante gelandet. Die Begründung steht
   ausführlich im Manifest -- wer hier etwas ändert, muss dort nachziehen.

   Dass der Text dabei unter das Bild rutscht, ist die Folge davon: über
   einem 4:3-Bild hätte er entweder die Schiffe verdeckt oder das Bild auf
   Briefmarkengrösse gedrückt.

   860 und nicht 760: bei 861 Pixeln wechselt das <picture> auf den breiten
   Zuschnitt (media-Bedingung im Manifest), und der ist deutlich flacher.
   Beide Grenzen müssen dieselbe sein, sonst zeigt ein Rahmen ein Bild mit
   dem falschen Verhältnis. */
@media (max-width: 860px) {
  .fleet-starthero {
    display: block;
    min-height: 0;
    padding: 0 0 clamp(30px, 8vw, 48px);
    overflow: visible;
  }
  /* Der Kopf liegt fest über der Seite und ist ungescrollt rund 84 Pixel
     hoch (56 Zeichen + 2 × 14 Polster). Beim Landen steht man oben, also
     gilt die grosse Fassung. */
  .fleet-starthero picture {
    position: relative;
    inset: auto;
    display: block;
    margin-top: 84px;
  }
  .fleet-starthero-bild {
    position: static;
    inset: auto;
    height: auto;
    aspect-ratio: 7 / 5;
  }
  /* Der Schleier lag über dem ganzen Abschnitt und hätte jetzt auch den
     Text darunter gedeckt. Es reicht ein Saum an der unteren Bildkante,
     der das Foto in den Grund übergehen lässt. */
  .fleet-starthero-schleier { display: none; }
  .fleet-starthero picture::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 34%;
    background: linear-gradient(to top,
      var(--f-grund)        0%,
      rgba(5, 25, 31, .62) 38%,
      rgba(5, 25, 31, 0)  100%);
  }
  /* Ein Stück Überlappung, damit Bild und Text zusammengehören: die
     Augenbraue sitzt noch auf dem dunklen Saum. */
  .fleet-starthero-inhalt { margin-top: -18px; }
}

/* ------------------------------------------------------------ Seitenkopf

   Für Seiten ohne Foto -- die Terminliste etwa. Der Kopf der Seite ist fest
   positioniert und liegt über dem Inhalt; ohne diesen Block klebte die
   Überschrift darunter und wurde vom Logo überschritten.

   Ein flacher, etwas hellerer Streifen statt eines leeren Heros in
   Bildhöhe: die Seite soll zur Sache kommen, nicht erst einen Bildschirm
   Luft zeigen. */
/* Der Abstand nach oben muss den ungescrollten Kopf freihalten, und der ist
   seit dem grossen Zeichen rund 96 Pixel hoch (72 Zeichen + 2 × 14 Polster).
   Beim Landen auf einer Seite steht man oben, also gilt die grosse Fassung. */
.fleet-seitenkopf {
  padding: calc(96px + clamp(28px, 5vw, 64px)) 0 clamp(26px, 4vw, 48px);
  background: var(--f-grund-2);
  border-bottom: 1px solid var(--f-linie);
}
.fleet-seitenkopf h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
}
.fleet-seitenkopf .fleet-hero-zeile { margin-top: 16px; }

/* Direkt danach braucht der nächste Abschnitt weniger Luft -- der Streifen
   bringt schon welche mit. */
.fleet-seitenkopf + .fleet-abschnitt { padding-top: clamp(34px, 5vw, 62px); }

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

   Die Ordnung steht in komponenten.css, hier nur die Farbe: der Grund der
   Seite selbst. Das abgesetzte Tuerkis der Streifen machte daraus einen
   eigenen Baustein, und das ist es nicht -- die Bewertung soll unter dem
   Hero stehen, nicht in einem Kasten darunter.

   Ohne eigene Farbe braucht es auch keine Abschlusslinie mehr: sie liefe
   quer durch eine Flaeche, die durchgehend dieselbe ist. Die beiden
   Haarlinien neben dem Zeichen halten es schon. */
.fleet .bewertungsband {
  background: var(--f-grund);
  color: var(--f-text-sek);
  /* Der Hero ist 92vh hoch, das Band begann also acht Prozent ueber der
     unteren Bildschirmkante -- und wurde von ihr mitten durchgeschnitten.
     Ein halbes Zeichen ist schlechter als keines.

     Vier Prozent genuegen dafuer: das Band bringt oben eigenes Polster mit,
     und die Merkmale enden vier Pixel ueber der Hero-Kante. Nachgesehen,
     nicht gerechnet -- acht waren gutgemeint und kosteten nur Weg. */
  margin-top: 4vh;
}

/* Danach reicht wenig Luft. Ein Abschnitt bringt sonst --f-luft mit, auf
   einem breiten Schirm 132 Pixel -- zusammen mit dem Polster des Bandes
   klaffte zwischen Sternen und Text eine leere Handbreit. Das Band ist ein
   schmaler Streifen, kein eigenes Kapitel. */
.fleet .bewertungsband + .fleet-abschnitt { padding-top: clamp(28px, 3.5vw, 48px); }

/* Schmal gilt das nicht: dort ist der Hero nicht bildschirmhoch (siehe
   .fleet-hero weiter oben), es gibt also keine Kante zu umgehen -- und ein
   Loch von acht Prozent Bildschirmhoehe mitten auf der Seite. */
@media (max-width: 860px) {
  .fleet .bewertungsband { margin-top: 0; }
}

/* ---------------------------------------------------------- Die zwei Schiffe */

.fleet-flotte .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 800px) {
  .fleet-flotte .wrap { grid-template-columns: 1fr; }
}
/* Das Foto füllt die Kachel (cover), der Verlauf dunkelt nur den unteren
   Rand ab -- dort steht der Name.

   16:9 und nicht höher: mit `cover` wird die überschüssige Achse
   beschnitten, und bei einer Kachel, die höher ist als das Foto quer, ist
   das die Breite. Also Bug und Heck. Breiter als das Foto beschneidet
   dagegen oben und unten -- Himmel und Wasser. */
.fleet-schiffkarte {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 9;
  /* So knapp nach unten, wie die Schrift es verträgt: sie soll im Wasser
     unter dem Rumpf sitzen und nicht auf dem Schiff. */
  padding: 26px 26px 14px;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: var(--f-text);
}
/* Nur das untere knappe Drittel. Darüber bleibt das Foto unberührt -- die
   Schiffe liegen in der Bildmitte, und die soll niemand durch einen
   Grauschleier ansehen. */
.fleet-schiffkarte .fleet-geschwister-schleier {
  background: linear-gradient(to top,
    rgba(5, 25, 31, .88)  0%,
    rgba(5, 25, 31, .70) 11%,
    rgba(5, 25, 31, .34) 22%,
    rgba(5, 25, 31, .08) 29%,
    rgba(5, 25, 31, 0)   34%);
}
.fleet-schiffkarte:hover .fleet-geschwister-schleier {
  background: linear-gradient(to top,
    rgba(5, 25, 31, .92)  0%,
    rgba(5, 25, 31, .76) 13%,
    rgba(5, 25, 31, .42) 25%,
    rgba(5, 25, 31, .14) 34%,
    rgba(5, 25, 31, 0)   42%);
}
/* Name links, Preis rechts, auf einer Linie. Untereinander brauchten sie
   zwei Zeilen Höhe und rückten damit weiter ins Bild. */
.fleet-schiffkarte-text {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.fleet-schiffkarte-text strong {
  font-family: var(--font-titel, inherit);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.05;
}
.fleet-schiffkarte-zeile {
  display: block;
  margin-top: 8px;
  max-width: 40ch;
  color: var(--f-text-sek);
  font-size: .94rem;
  line-height: 1.5;
}
.fleet-schiffkarte-preis {
  flex: 0 0 auto;
  color: var(--f-akzent-2);
  font-family: var(--font-mono, monospace);
  font-size: .84rem;
  white-space: nowrap;
}

/* Auf schmalen Kacheln passt beides nicht nebeneinander -- dann wieder
   untereinander, aber der Preis bleibt rechtsbündig. */
@media (max-width: 520px) {
  .fleet-schiffkarte-text { flex-direction: column; align-items: stretch; gap: 4px; }
  .fleet-schiffkarte-preis { text-align: right; }
}

/* ----------------------------------------------------------- Die Geschichte */

.fleet-geschichte-raster {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 860px) {
  .fleet-geschichte-raster { grid-template-columns: 1fr; }
  .fleet-portraet { max-width: 340px; }
}

.fleet-portraet { margin: 0; }
.fleet-portraet img,
.fleet-portraet picture {
  display: block;
  width: 100%;
  border-radius: 10px;
}
.fleet-portraet figcaption {
  margin-top: 12px;
  color: var(--f-text-sek);
  font-size: .84rem;
  line-height: 1.45;
}

/* Der Text der Startseite steht in der Datenbank und kommt aus dem Editor --
   die letzte Zeile ist die Unterschrift und darf etwas Abstand haben. */
.fleet-geschichte-text .fleet-fliesstext > p:last-child {
  margin-top: 1.6em;
  color: var(--f-text);
}

/* -------------------------------------------------------------- Abschnitte */

.fleet-abschnitt { padding: var(--f-luft) 0; }
.fleet-abschnitt + .fleet-abschnitt { padding-top: 0; }

.fleet-h2 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  letter-spacing: -.01em;
}

.fleet-vorspann {
  max-width: 620px;
  margin: 0 0 34px;
  color: var(--f-text-sek);
  font-size: 1.02rem;
}

.fleet-fliesstext { font-size: 1.06rem; line-height: 1.75; }
.fleet-fliesstext p { margin: 0 0 1.15em; }
.fleet-fliesstext p:last-child { margin-bottom: 0; }
/* Der erste Absatz trägt den Einstieg — grösser gesetzt, wie im Magazin. */
.fleet-text .fleet-fliesstext > p:first-child {
  font-size: clamp(1.15rem, 2.2vw, 1.42rem);
  line-height: 1.6;
  color: var(--f-text);
}
.fleet-fliesstext { color: var(--f-text-sek); }
.fleet-fliesstext strong { color: var(--f-text); }
.fleet-fliesstext ul { padding-left: 1.1em; }
.fleet-fliesstext li { margin-bottom: .4em; }

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

/* Ausserhalb des Rahmens, über die volle Breite: die Bilder sind seit dem
   Austausch 2000px breit, und das soll man sehen. */
.fleet-galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 28px;
  padding: 0 10px;
}
.fleet-galerie-kachel {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 3;
  background: var(--f-grund-2);
  /* .galerie-link hebt die Kachel beim Überfahren an. Im engen Raster der
     Flotte sieht das unruhig aus -- die Lupe darüber bleibt, sie ist der
     Hinweis, dass sich etwas öffnet. */
  transform: none !important;
}
/* Jede fünfte Kachel über zwei Spalten. Ein gleichmässiges Raster aus 29
   Bildern sieht aus wie eine Kontaktkopie; der Wechsel gibt dem Blick
   Halt. */
.fleet-galerie-kachel.breit { grid-column: span 2; aspect-ratio: 8 / 3; }
.fleet-galerie-kachel img,
.fleet-galerie-kachel picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.fleet-galerie-kachel:hover img { transform: scale(1.035); }

@media (max-width: 700px) {
  .fleet-galerie { grid-template-columns: repeat(2, 1fr); }
  .fleet-galerie-kachel.breit { grid-column: span 2; aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------- Technik */

.fleet-technik { }

/* Die technischen Daten kommen als <table> aus dem Editor. Statt sie
   serverseitig aufzubrechen — was Raten wäre, die Tabellen sind von Hand
   gepflegt — bekommt die Tabelle hier ein Kleid: zwei Spalten, Linien statt
   Rahmen, Zahlen in der Monoschrift. */
.fleet-datenblatt { margin-top: 26px; }
.fleet-datenblatt table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
}
.fleet-datenblatt td {
  padding: 15px 18px 15px 0;
  border: 0;
  border-bottom: 1px solid var(--f-linie);
  vertical-align: top;
  font-size: .98rem;
  line-height: 1.5;
}
.fleet-datenblatt tr td:first-child {
  width: 34%;
  color: var(--f-text-sek);
  font-size: .80rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding-top: 18px;
}
.fleet-datenblatt tr td:last-child { color: var(--f-text); }
.fleet-datenblatt tr:last-child td { border-bottom: 0; }

/* Zweispaltig, sobald Platz ist: 17 Zeilen untereinander sind eine lange
   Wand. Die Tabelle selbst bleibt eine — column-count teilt sie optisch. */
@media (min-width: 900px) {
  .fleet-datenblatt table { display: block; columns: 2; column-gap: 56px; }
  .fleet-datenblatt tbody { display: block; }
  .fleet-datenblatt tr {
    display: block;
    break-inside: avoid;
    border-bottom: 1px solid var(--f-linie);
    padding: 13px 0;
  }
  .fleet-datenblatt td { display: block; border: 0; padding: 0; }
  .fleet-datenblatt tr td:first-child { width: auto; padding: 0 0 3px; }
  .fleet-datenblatt tr:last-child { border-bottom: 1px solid var(--f-linie); }
}

@media (max-width: 560px) {
  .fleet-datenblatt tr td:first-child { width: 42%; }
}

/* ------------------------------------------------------------ Unterlagen

   Drei Verweise auf Merkblaetter, die auf der Hauptseite liegen. Ruhige
   Zeilen statt Knoepfe: sie sollen zu finden sein, aber nicht mit der
   Anfrage um Aufmerksamkeit ringen. */

/* Etwas Luft nach oben zurueckholen -- die Regel fuer aufeinanderfolgende
   Abschnitte nimmt sie weg, und dann klebten die Blaetter am Text der
   Leistungen darueber. */
.fleet-abschnitt.fleet-unterlagen { padding-top: clamp(30px, 4vw, 52px); }

.fleet-blaetter {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.fleet-blaetter a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--f-linie);
  border-radius: 12px;
  color: var(--f-text);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.fleet-blaetter a:hover {
  border-color: var(--f-linie-2);
  background: rgba(255, 255, 255, .04);
}
.fleet-blatt-zeichen { flex: 0 0 auto; color: var(--f-akzent); }
.fleet-blatt-name    { flex: 1 1 auto; }
.fleet-blatt-art {
  flex: 0 0 auto;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--f-text-sek);
}

/* ---------------------------------------------------------------- Rahmen */

.fleet-rahmen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 22px;
  margin-top: 30px;
}
.fleet-rahmen-karte {
  margin: 0;
  border: 1px solid var(--f-linie);
  border-radius: 10px;
  overflow: hidden;
  background: var(--f-grund-2);
}
.fleet-rahmen-buehne {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #000;
}
.fleet-rahmen-buehne iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.fleet-rahmen-karte figcaption { padding: 16px 18px 18px; }
.fleet-rahmen-karte strong { display: block; font-size: 1.02rem; }
.fleet-rahmen-karte span {
  display: block;
  margin-top: 3px;
  color: var(--f-text-sek);
  font-size: .90rem;
}

/* -------------------------------------------------------------- Abfahrten */

/* Die Abfahrtstafel bringt ihr eigenes Kleid mit (komponenten.css) und ist
   für dunklen Grund gebaut. Hier steht nur, was der andere Rahmen braucht. */
.fleet-termine .tafel-rahmen,
.fleet-termine .tafel-karte { background: transparent; }

/* ---------------------------------------------------------- Schwesterschiff */

.fleet-geschwister .wrap { display: grid; gap: 16px; }
.fleet-geschwister-karte {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Wie die Kacheln der Startseite: quer statt hoch, damit das Schiff
     nicht an den Seiten beschnitten wird. */
  aspect-ratio: 21 / 9;
  padding: 34px;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: var(--f-text);
}
.fleet-geschwister-schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(5, 25, 31, .88)  0%,
    rgba(5, 25, 31, .68) 14%,
    rgba(5, 25, 31, .32) 26%,
    rgba(5, 25, 31, .06) 34%,
    rgba(5, 25, 31, 0)   40%);
  transition: background .3s ease;
}
.fleet-geschwister-karte:hover .fleet-geschwister-schleier {
  background: linear-gradient(to top,
    rgba(5, 25, 31, .92)  0%,
    rgba(5, 25, 31, .74) 16%,
    rgba(5, 25, 31, .40) 30%,
    rgba(5, 25, 31, .12) 40%,
    rgba(5, 25, 31, 0)   48%);
}
.fleet-geschwister-text { position: relative; }
.fleet-geschwister-text em {
  display: block;
  font-style: normal;
  font-size: .74rem;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--f-akzent);
}
.fleet-geschwister-text strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-titel, inherit);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.05;
}

/* ------------------------------------------------------------------ Fuss */

.fleet-fuss {
  padding: clamp(20px, 6vw, 20px) 0 34px;
  border-top: 1px solid var(--f-linie);
  background: var(--f-grund-2);
  font-size: .94rem;
}
/* Drei Spalten mit dem Emblem in der Mitte. Die Aussenspalten gleich breit
   (1fr), damit das Emblem wirklich mittig steht und nicht nur dazwischen --
   `auto` in der Mitte laesst ihm genau seine Breite. */
.fleet-fuss-oben {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 900px) {
  /* Untereinander, und das Emblem zuerst: es ist der Anker des Fusses,
     nicht eine Beigabe zwischen zwei Textblöcken. */
  .fleet-fuss-oben { grid-template-columns: 1fr; gap: 30px; justify-items: start; }
  .fleet-emblem { order: -1; justify-self: center; }
}
/* Das Emblem beider Schiffe. Es ist kein Logo in der Kopfzeile, sondern ein
   Siegel -- deshalb gross und mit Luft darum. */
.fleet-emblem { display: flex; justify-content: center; }
.fleet-emblem img {
  display: block;
  width: 280px;
  max-width: 58vw;
  height: auto;
}

.fleet-fuss-marke p { margin: 0; color: var(--f-text-sek); line-height: 1.6; max-width: 46ch; }
/* Zwei Klassen statt einer, sonst gewinnt die Regel darüber: `.fleet-fuss-
   marke p` ist spezifischer als `.fleet-fuss-titel` allein, und die
   Überschrift stünde ohne ihren Abstand direkt auf dem Satz. */
.fleet-fuss-marke .fleet-fuss-titel { margin-bottom: 8px; color: var(--f-akzent);}

.fleet-fuss-titel {
  margin: 0 0 8px;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--f-akzent);
}
.fleet-fuss-kontakt{
  text-align: right;
}

.fleet-fuss-kontakt p { margin: 0 0 10px; line-height: 1.7; }
/* Der Abstand gehört zwischen die Absätze, nicht unter den letzten: die
   Spalten stehen mittig zueinander, und ein Rest darunter schöbe den
   ganzen Block nach oben. */
.fleet-fuss-kontakt p:last-child { margin-bottom: 0; }

.fleet-fuss-unten {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--f-linie);
  color: var(--f-text-sek);
  font-size: .86rem;
}
.fleet-fuss-unten nav { display: flex; gap: 20px; }