/* ==========================================================================
   M/S Thalassa — Designsystem

   Zwei Gruende (dunkel/hell), zwei Schriften, ein Messington als einzige
   Farbe. Alles andere ist Foto.

   Die Regel, die alles zusammenhaelt: Cinzel steht nur in Versalien und nur
   kurz — Wortmarke, Sektionstitel, Stichworte. Der Satz, der etwas behauptet,
   steht in Inter Tight. Damit rutscht die Aussage von "dekoriert" nach
   "gesagt", und die Textmenge sinkt von selbst.
   ========================================================================== */

:root {
    --tiefsee: #06131b;
    --nacht: #0b1f2a;
    --creme: #f3ecde;
    --papier: #f6f2e8;
    --tinte: #0a1d27;

    /* Messing in zwei Helligkeiten — auf dunklem Grund heller, damit es auf
       beiden Gruenden ueber 4.5:1 bleibt. */
    --messing-hell: #cfae68;
    --messing-dunkel: #8a6a22;

    /* Wird pro Sektion umgesetzt (siehe .grund-*) */
    --grund: var(--tiefsee);
    --text: var(--creme);
    --dunst: rgba(243, 236, 222, 0.68);
    --linie: rgba(243, 236, 222, 0.16);
    --messing: var(--messing-hell);
    --feld: rgba(243, 236, 222, 0.05);

    --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --text-schrift: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --radius: 28px;
    --rand: 10px;
    --kopfhoehe: 78px;
    --leiste: 78px;
    --bahn: 1220px;

    /* transitions.dev — der Kalender ist ein am Datumsfeld verankertes
       Dropdown. Die Werte bleiben zentral, damit Oeffnen und Schliessen in
       CSS und JavaScript denselben Takt verwenden. */
    --dropdown-open-dur: 250ms;
    --dropdown-close-dur: 150ms;
    --dropdown-pre-scale: 0.97;
    --dropdown-closing-scale: 0.99;
    --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--tiefsee);
    color: var(--creme);
    font-family: var(--text-schrift);
    /* Zielgruppe 50-60: darunter faengt das Zusammenkneifen der Augen an. */
    font-size: 19px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--messing);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Sprunglink: unsichtbar, bis jemand mit der Tastatur ankommt. Bei fester
   Kopfleiste und acht Sektionen ist das der Unterschied zwischen zwei
   Tastendruecken und dreissig. */
.sprunglink {
    position: fixed;
    left: 16px;
    top: -80px;
    z-index: 70;
    background: var(--messing-hell);
    color: #10202b;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 22px;
    border-radius: 999px;
    transition: top 0.2s ease;
}

.sprunglink:focus {
    top: 16px;
}

/* Preis auf Anfrage — die Zahl steht nirgends, die Frage beantwortet die
   Zeile trotzdem. */
.preis-hinweis {
    margin-top: clamp(20px, 3vh, 34px);
    text-align: center;
    font-size: 16px;
    color: var(--dunst);
}

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */

.wortmarke,
h1,
.titel {
    font-family: var(--display);
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
}

h1 {
    font-size: clamp(40px, 7.4vw, 90px);
    line-height: 1.05;
    letter-spacing: 0.2em;
    /* Sperrung haengt rechts eine Leerstelle an — die holen wir zurueck. */
    margin-right: -0.2em;
}

.titel {
    font-size: clamp(20px, 2.3vw, 27px);
    line-height: 1.3;
    letter-spacing: 0.2em;
    margin-right: -0.2em;
    color: var(--messing);
}

/* Der Satz, der frueher als Serifen-Ueberschrift dastand. */
h2,
.satz {
    font-family: var(--text-schrift);
    font-weight: 300;
    font-size: clamp(27px, 3.3vw, 40px);
    line-height: 1.24;
    letter-spacing: -0.01em;
    margin: 0;
    text-wrap: balance;
    max-width: 22ch;
}

h3 {
    font-family: var(--text-schrift);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    margin: 0;
}

p {
    margin: 0;
}

.vorlauf {
    font-family: var(--display);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.26em;
    margin-right: -0.26em;
    text-transform: uppercase;
    color: var(--messing);
}

.lead {
    font-size: clamp(19px, 1.4vw, 21px);
    line-height: 1.62;
    max-width: 54ch;
}

.klein {
    font-size: 16px;
    line-height: 1.6;
    color: var(--dunst);
}

.zahl {
    font-variant-numeric: lining-nums tabular-nums;
}

/* Textlink mit Messingstrich — ersetzt die frueheren Knopfpaare. */
.weiterlink {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--messing);
    padding-bottom: 2px;
    /* In Rastern wuerde der Link sonst die ganze Spalte breit — und der
       Messingstrich liefe quer durchs Bild. */
    width: fit-content;
    justify-self: start;
    align-self: start;
    transition: gap 0.25s ease, color 0.2s;
}

.weiterlink:hover {
    gap: 16px;
    color: var(--messing);
}

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

.kopf {
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 40;
    height: var(--kopfhoehe);
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 clamp(16px, 3vw, 40px);
    color: var(--creme);
    transition: background-color 0.4s ease, border-color 0.4s ease;
    border-bottom: 1px solid transparent;
}

.kopf.gesetzt {
    background: rgba(6, 19, 27, 0.95);
    border-bottom-color: rgba(243, 236, 222, 0.14);
}

.kopf .wortmarke {
    font-size: 20px;
    letter-spacing: 0.3em;
    margin-right: -0.3em;
    text-decoration: none;
    white-space: nowrap;
}

.kopf-nav {
    display: flex;
    gap: 26px;
    margin-left: auto;
    align-items: center;
    order: 1;
}

.kopf-nav a {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(243, 236, 222, 0.8);
    padding: 12px 2px;
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.kopf-nav a:hover,
.kopf-nav a[aria-current='true'] {
    color: var(--creme);
    border-bottom-color: var(--messing-hell);
}

.kopf-schalter {
    display: none;
    order: 3;
    width: 48px;
    height: 48px;
    background: none;
    border: 1px solid rgba(243, 236, 222, 0.34);
    border-radius: 999px;
    color: var(--creme);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.kopf-sprache {
    order: 2;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    border: 1px solid rgba(243, 236, 222, 0.34);
    border-radius: 999px;
    background: rgba(6, 19, 27, 0.18);
}

.sprach-auswahl summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 62px;
    min-height: 44px;
    padding: 0 12px;
    color: var(--creme);
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 999px;
}

.sprach-auswahl summary::-webkit-details-marker { display: none; }
.sprach-auswahl summary::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.sprach-auswahl[open] summary::after { transform: translateY(2px) rotate(225deg); }
.sprach-auswahl summary:focus-visible {
    outline: 2px solid var(--messing-hell);
    outline-offset: 3px;
}
.sprach-liste {
    position: absolute;
    z-index: 10;
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    width: 180px;
    padding: 6px;
    border: 1px solid rgba(243, 236, 222, 0.25);
    border-radius: 16px;
    background: #0a202a;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.kopf-sprache a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 30px;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    color: rgba(243, 236, 222, 0.76);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
}

.kopf-sprache a[aria-current='true']::after { content: '✓'; }

.kopf-sprache a[aria-current='true'] {
    color: var(--tinte);
    background: var(--messing-hell);
}

.kopf-sprache a:hover,
.kopf-sprache a:focus-visible {
    color: var(--creme);
    background: rgba(243, 236, 222, 0.12);
}

/* --------------------------------------------------------------------------
   Aktionsleiste
   Ein Hauptknopf, immer erreichbar. Erscheint erst nach dem Hero und
   verschwindet ueber der Anfrage — sonst stuende der Knopf ueber seinem
   eigenen Ziel.
   -------------------------------------------------------------------------- */

.aktionsleiste {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    height: var(--leiste);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 clamp(16px, 3vw, 40px);
    background: rgba(6, 19, 27, 0.95);
    border-top: 1px solid rgba(243, 236, 222, 0.16);
    color: var(--creme);
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.aktionsleiste.da {
    transform: none;
}

.leiste-marke {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.leiste-marke strong {
    font-family: var(--display);
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.18em;
    margin-right: -0.18em;
    text-transform: uppercase;
}

.leiste-marke span {
    font-size: 13.5px;
    color: var(--dunst);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leiste-rechts {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.leiste-tel {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid rgba(243, 236, 222, 0.3);
    border-radius: 999px;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
    transition: border-color 0.2s, background-color 0.2s;
}

.leiste-tel:hover {
    border-color: var(--messing-hell);
    background: rgba(207, 174, 104, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .aktionsleiste {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Knopf
   -------------------------------------------------------------------------- */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 56px;
    padding: 16px 32px;
    border-radius: 999px;
    border: 1px solid var(--messing);
    background: var(--messing);
    color: #0d1b24;
    font-family: var(--text-schrift);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.08s;
}

.knopf .pfeil {
    transition: transform 0.25s ease;
}

.knopf:hover .pfeil {
    transform: translateX(4px);
}

.knopf:hover {
    background: transparent;
    color: var(--messing);
}

/* Sichtbarer Druckzustand — sonst weiss niemand, ob der Klick ankam. */
.knopf:active {
    transform: translateY(1px);
}

.knopf[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.knopf-still {
    background: transparent;
    color: inherit;
    border-color: var(--linie);
    font-weight: 600;
}

.knopf-still:hover {
    background: rgba(243, 236, 222, 0.1);
    color: inherit;
    border-color: var(--messing);
}

.grund-hell .knopf-still:hover {
    background: rgba(10, 29, 39, 0.06);
}

@media (prefers-reduced-motion: reduce) {
    .knopf,
    .knopf .pfeil {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Deck = Snap-Behaelter, Szene = eine Sektion
   -------------------------------------------------------------------------- */

.deck {
    height: 100vh;
    height: 100svh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.deck::-webkit-scrollbar {
    display: none;
}

.deck.gesperrt {
    overflow: hidden;
}

.szene {
    padding: var(--rand);
    scroll-snap-align: start;
}

.szene-innen {
    position: relative;
    min-height: calc(100vh - 2 * var(--rand));
    min-height: calc(100svh - 2 * var(--rand));
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--grund);
    color: var(--text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Unten Platz fuer die Aktionsleiste, sonst verdeckt sie den Inhalt. */
    padding: calc(var(--kopfhoehe) + 28px) clamp(20px, 5vw, 72px)
        calc(var(--leiste) + 32px);
}

/* Der Snap greift nur, wo er niemanden einsperrt: breite UND hohe Fenster. */
@media (min-width: 1000px) and (min-height: 720px) {
    .deck {
        scroll-snap-type: y mandatory;
    }
}

@media (prefers-reduced-motion: reduce) {
    .deck {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }
}

.grund-dunkel {
    --grund: var(--nacht);
    --text: var(--creme);
    --dunst: rgba(243, 236, 222, 0.68);
    --linie: rgba(243, 236, 222, 0.16);
    --messing: var(--messing-hell);
    --feld: rgba(243, 236, 222, 0.05);
}

.grund-hell {
    --grund: var(--papier);
    --text: var(--tinte);
    --dunst: rgba(10, 29, 39, 0.72);
    --linie: rgba(10, 29, 39, 0.14);
    --messing: var(--messing-dunkel);
    --feld: rgba(10, 29, 39, 0.035);
}

.bahn {
    width: 100%;
    max-width: var(--bahn);
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   1 — Ankunft
   -------------------------------------------------------------------------- */

#start .szene-innen {
    padding: 0;
    justify-content: flex-end;
    background: #04101a;
}

.hero-bild {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Das Bild ist absichtlich hoeher als 16:9 — unten wurde offenes Wasser
       angesetzt. Erst dadurch schneidet der Browser vertikal, und erst
       dadurch wirkt object-position ueberhaupt. */
    object-position: 50% 6%;
}

.hero-schleier {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
        to bottom,
        rgba(4, 16, 26, 0.5) 0%,
        rgba(4, 16, 26, 0) 24%,
        rgba(4, 16, 26, 0.18) 42%,
        rgba(4, 16, 26, 0.62) 60%,
        rgba(4, 16, 26, 0.88) 78%,
        rgba(4, 16, 26, 0.97) 100%
    );
}

.hero-text {
    position: relative;
    text-align: center;
    padding: 0 clamp(20px, 5vw, 72px) clamp(46px, 8vh, 84px);
    display: grid;
    justify-items: center;
    gap: 20px;
}

.hero-text h1 {
    color: #f7f2e7;
    text-shadow: 0 2px 40px rgba(4, 16, 26, 0.5);
}

.hero-zeile {
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(247, 242, 231, 0.84);
    margin-right: -0.32em;
}

.hero-ort {
    font-family: var(--display);
    font-size: clamp(15px, 1.5vw, 19px);
    letter-spacing: 0.18em;
    margin-right: -0.18em;
    text-transform: uppercase;
    color: var(--messing-hell);
}

.hero-preis {
    font-size: clamp(12px, 1.15vw, 14px);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(247, 242, 231, 0.9);
}

/* Der Hinweis steht im Fluss unter dem Textblock, nicht am unteren Rand
   festgenagelt. Vorher hing er unter der Aktionsleiste — die auf dem Hero
   aber gar nicht da ist — und rutschte damit fast aus dem Bild. */
.hero-hinweis {
    position: relative;
    margin-top: clamp(20px, 4vh, 44px);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(247, 242, 231, 0.55);
    display: grid;
    justify-items: center;
    gap: 8px;
    pointer-events: none;
}

.hero-hinweis svg {
    display: block;
    animation: sinken 2.4s ease-in-out infinite;
}

/* Der Pfeil steht UNTER dem Wort — er zeigt, wohin, nicht nur dass. */
@keyframes sinken {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.55;
    }
    50% {
        transform: translateY(7px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-hinweis svg {
        animation: none;
        opacity: 0.8;
    }
}

/* --------------------------------------------------------------------------
   2 — Das Schiff
   Bild randabfallend ueber die halbe Szene, Text daneben. Drei Zahlen statt
   einer Datentabelle — der Rest steht auf der Unterseite.
   -------------------------------------------------------------------------- */

#schiff .szene-innen {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.halbbild {
    position: relative;
    overflow: hidden;
}

.halbbild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.halbtext {
    display: grid;
    align-content: center;
    gap: 26px;
    padding: calc(var(--kopfhoehe) + 28px) clamp(24px, 4.5vw, 72px)
        calc(var(--leiste) + 32px);
}


/* Handy liest Bilder. Der Fliesstext der Schiffssektion und die halbe
   Kennzahlenliste verlaengern auf schmalen Fenstern nur den Daumenweg —
   wer die Details will, tippt auf "Alle Schiffsdaten". Ab Tabletbreite
   steht wieder alles da. */
.drei-zahlen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
}

.drei-zahlen div {
    padding: 20px 18px 20px 0;
}

/* Trennlinie und Einzug bekommt jede Zelle ausser der ersten ihrer Zeile.

   Vorher stand hier "div + div", und das trifft alles ausser der allerersten
   Zelle ueberhaupt. Bei sechs Zahlen in drei Spalten heisst das: "Crew" steht
   in Spalte eins, wird aber wie eine Folgezelle behandelt — 22px eingerueckt
   und mit einer Linie am linken Rand, die ins Leere zeigt. Die zweite Zeile
   lag dadurch sichtbar neben der ersten. */
.drei-zahlen div:not(:nth-child(3n + 1)) {
    padding-left: 22px;
    border-left: 1px solid var(--linie);
}

.drei-zahlen dt {
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.2em;
    margin-right: -0.2em;
    text-transform: uppercase;
    color: var(--dunst);
    margin-bottom: 6px;
}

.drei-zahlen dd {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 31px);
    font-weight: 300;
    line-height: 1.1;
    font-variant-numeric: lining-nums tabular-nums;
}

/* --------------------------------------------------------------------------
   3 — An Bord
   -------------------------------------------------------------------------- */

.galerie {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
    height: min(48vh, 440px);
}

.galerie figure {
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.galerie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.galerie figure:hover img {
    transform: scale(1.04);
}

.galerie figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 18px 14px;
    font-family: var(--display);
    font-size: 12.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #f7f2e7;
    background: linear-gradient(to top, rgba(4, 16, 26, 0.84), rgba(4, 16, 26, 0));
}

.gross {
    grid-column: span 2;
    grid-row: span 2;
}

@media (prefers-reduced-motion: reduce) {
    .galerie img {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   4 — Der Rundgang (Bildband, Tour oeffnet als Overlay)
   -------------------------------------------------------------------------- */

#rundgang .szene-innen {
    padding: 0;
    justify-content: center;
    background: #04101a;
}

.band-bild {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.42;
}

.band-text {
    position: relative;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 20px;
    padding: calc(var(--kopfhoehe) + 28px) clamp(20px, 5vw, 72px)
        calc(var(--leiste) + 32px);
    color: #f7f2e7;
}

.band-text .satz {
    max-width: 18ch;
}

/* --------------------------------------------------------------------------
   Tour-Overlay
   Die fremde Tour laeuft auf fullpage.js mit autoScrolling und kapert das
   Mausrad. Deshalb liegt sie nicht mehr IN der Seite, sondern DARUEBER: man
   ist bewusst drin und kommt mit Escape oder Kreuz bewusst wieder raus.
   -------------------------------------------------------------------------- */

.tour-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    background: #04101a;
    display: grid;
    grid-template-rows: auto 1fr;
}

.tour-overlay[hidden] {
    display: none;
}

.tour-kopf {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px clamp(14px, 3vw, 28px);
    border-bottom: 1px solid rgba(243, 236, 222, 0.16);
    color: var(--creme);
}

.tour-titel {
    font-family: var(--display);
    font-size: 15px;
    letter-spacing: 0.2em;
    margin-right: -0.2em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tour-raeume {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tour-raeume button {
    font-family: var(--text-schrift);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(243, 236, 222, 0.78);
    background: none;
    border: 1px solid rgba(243, 236, 222, 0.22);
    border-radius: 999px;
    min-height: 42px;
    padding: 0 16px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.tour-raeume button:hover {
    color: var(--creme);
    border-color: var(--messing-hell);
}

.tour-raeume button[aria-pressed='true'] {
    background: var(--messing-hell);
    border-color: var(--messing-hell);
    color: #0d1b24;
}

.tour-zu {
    margin-left: auto;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(243, 236, 222, 0.3);
    background: none;
    color: var(--creme);
    cursor: pointer;
}

.tour-zu:hover {
    border-color: var(--messing-hell);
    color: var(--messing-hell);
}

.tour-hilfe {
    width: 100%;
    font-size: 14px;
    color: rgba(243, 236, 222, 0.6);
}

.tour-buehne {
    position: relative;
    background: #04101a;
}

.tour-buehne iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Auf schmalen Handys darf die Raumwahl nicht nach Wortlaenge umbrechen.
   Ein festes Raster wirkt ruhig, der siebte Punkt sitzt bewusst mittig und
   der Schliessen-Knopf bleibt neben dem Titel statt in einer eigenen Zeile. */
@media (max-width: 560px) {
    .tour-kopf {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px 12px;
        padding: 12px 14px 14px;
    }

    .tour-titel {
        grid-column: 1;
        grid-row: 1;
    }

    .tour-zu {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0;
        width: 42px;
        height: 42px;
    }

    .tour-raeume {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        width: 100%;
    }

    .tour-raeume button {
        width: 100%;
        min-width: 0;
        min-height: 36px;
        padding: 0 5px;
        font-size: 11px;
        letter-spacing: 0.055em;
    }

    .tour-raeume button:nth-child(7) {
        grid-column: 2;
    }

    .tour-hilfe {
        grid-column: 1 / -1;
        font-size: 12.5px;
        line-height: 1.45;
    }
}

/* --------------------------------------------------------------------------
   5 — Die Woche
   -------------------------------------------------------------------------- */

.punkte-liste {
    display: grid;
    gap: 0;
    margin-top: 32px;
    border-top: 1px solid var(--linie);
}

.punkte-liste > div {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: clamp(16px, 3vw, 44px);
    align-items: baseline;
    padding: 22px 0;
    border-bottom: 1px solid var(--linie);
}

.punkte-liste dt {
    font-family: var(--display);
    font-size: clamp(15px, 1.5vw, 18px);
    letter-spacing: 0.18em;
    margin-right: -0.18em;
    text-transform: uppercase;
    color: var(--messing);
}

.punkte-liste dd {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: var(--dunst);
}

/* --------------------------------------------------------------------------
   6 — Die Crew
   -------------------------------------------------------------------------- */

.crew-raster {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.crew-karte figure {
    margin: 0 0 14px;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--feld);
}

.crew-karte img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
}

.crew-rolle {
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.2em;
    margin-right: -0.2em;
    text-transform: uppercase;
    color: var(--messing);
    margin-bottom: 3px;
}

.crew-karte h3 {
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 5px;
}

.crew-karte p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--dunst);
}

/* --------------------------------------------------------------------------
   7 — Anfrage: ein Schritt, eine Frage
   -------------------------------------------------------------------------- */

#anfrage .szene-innen {
    background: var(--nacht);
}

.fluss {
    max-width: 780px;
    margin-top: 26px;
}

.fluss-balken {
    height: 2px;
    background: var(--linie);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 30px;
}

.fluss-balken i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--messing);
    transition: width 0.4s ease;
}

/* Ohne Javascript stehen alle Schritte untereinander und das Formular
   funktioniert vollstaendig. Erst das Skript setzt .gefuehrt und blendet
   alles ausser dem aktuellen Schritt aus. */
.fluss.gefuehrt .schritt {
    display: none;
}

.fluss.gefuehrt .schritt.aktiv {
    display: grid;
}

.schritt {
    display: grid;
    gap: 14px;
    margin-bottom: 26px;
}

.schritt-nr {
    font-family: var(--display);
    font-size: 11.5px;
    letter-spacing: 0.22em;
    margin-right: -0.22em;
    text-transform: uppercase;
    color: var(--messing);
}

.schritt label,
.schritt legend {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 300;
    line-height: 1.25;
    padding: 0;
    color: var(--text);
}

.schritt .hinweis {
    font-size: 15.5px;
    color: var(--dunst);
    margin-top: -6px;
}

.schritt fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.datumsfelder,
.fluss-kontaktfelder {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* Eigene Datumsauswahl. Ohne JavaScript bleiben die nativen date-Felder im
   Markup erhalten; kalender.js ersetzt nur ihre sichtbare Bedienoberflaeche. */
.datumsfelder.datum-custom {
    position: relative;
    align-items: start;
}

.datum-trigger {
    appearance: none;
    width: 100%;
    min-height: 68px;
    padding: 11px 48px 11px 16px;
    border: 1px solid var(--linie);
    border-radius: 14px;
    background: rgba(243, 236, 222, 0.06);
    color: var(--text);
    font-family: var(--text-schrift);
    text-align: left;
    cursor: pointer;
    position: relative;
    display: grid;
    gap: 2px;
    transition: border-color 0.2s, background-color 0.2s;
}

.datum-trigger:hover,
.datum-trigger[aria-expanded='true'] {
    border-color: var(--messing);
    background: rgba(243, 236, 222, 0.09);
}

.datum-trigger-klein {
    color: var(--messing);
    font-family: var(--display);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.datum-trigger-wert {
    font-size: 17px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.datum-trigger:not(.hat-wert) .datum-trigger-wert {
    color: var(--dunst);
    font-weight: 400;
}

.datum-trigger svg {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 19px;
    height: 19px;
    transform: translateY(-50%);
    color: var(--messing);
}

/* transitions.dev: menu-dropdown */
.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; }
}

.datum-kalender {
    grid-column: 1 / -1;
    width: 100%;
    padding: 18px;
    border: 1px solid rgba(207, 174, 104, 0.42);
    border-radius: 18px;
    background: #0a202b;
    color: var(--creme);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.32);
    position: relative;
    z-index: 8;
}

.datum-kalender[hidden] {
    display: none;
}

.datum-kalender-kopf {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.datum-kalender-kopf h4 {
    margin: 0;
    color: var(--messing-hell);
    font-family: var(--display);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}

.datum-monat-knopf {
    appearance: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: rgba(243, 236, 222, 0.04);
    color: var(--creme);
    font-size: 20px;
    cursor: pointer;
}

.datum-monat-knopf:hover:not(:disabled) {
    border-color: var(--messing-hell);
}

.datum-monat-knopf:disabled {
    opacity: 0.25;
    cursor: default;
}

.datum-wochentage,
.datum-tage {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.datum-wochentage {
    margin-bottom: 5px;
}

.datum-wochentage span {
    color: var(--dunst);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.datum-tag {
    appearance: none;
    aspect-ratio: 1;
    min-width: 0;
    min-height: 38px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--creme);
    font-family: var(--text-schrift);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    position: relative;
}

.datum-tag:hover:not(:disabled) {
    border-color: var(--messing-hell);
    background: rgba(207, 174, 104, 0.08);
}

.datum-tag.aussen {
    color: rgba(243, 236, 222, 0.34);
}

.datum-tag:disabled {
    color: rgba(243, 236, 222, 0.2);
    cursor: default;
}

.datum-tag.ist-heute {
    border-color: rgba(243, 236, 222, 0.45);
}

.datum-tag.freitag:not(.ist-start):not(.ist-ende)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: var(--messing-hell);
    transform: translateX(-50%);
}

.datum-tag.im-bereich {
    background: rgba(207, 174, 104, 0.14);
    border-radius: 10px;
}

.datum-tag.ist-start,
.datum-tag.ist-ende {
    border-color: var(--messing-hell);
    background: var(--messing-hell);
    color: #10202b;
    font-weight: 700;
}

.datum-status {
    min-height: 20px;
    margin: 12px 0 0;
    color: var(--dunst);
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.datum-kalender-fuss {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--linie);
}

.datum-textknopf {
    appearance: none;
    min-height: 40px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--messing-hell);
    font-family: var(--text-schrift);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.datum-textknopf:hover {
    color: var(--creme);
}

.fluss-kontaktfelder > div {
    display: grid;
    gap: 7px;
}

.schritt .fluss-feldlabel {
    font-family: var(--display);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--messing);
}

input,
textarea {
    font-family: var(--text-schrift);
    font-size: 20px;
    color: var(--text);
    background: rgba(243, 236, 222, 0.06);
    border: 1px solid var(--linie);
    border-radius: 14px;
    padding: 16px 18px;
    min-height: 60px;
    width: 100%;
    transition: border-color 0.2s, background-color 0.2s;
}

textarea {
    resize: vertical;
    min-height: 120px;
    font-size: 18px;
    line-height: 1.6;
}

input:hover,
textarea:hover {
    border-color: rgba(243, 236, 222, 0.3);
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--messing);
    background: rgba(243, 236, 222, 0.09);
}

.fluss-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.fluss-zurueck {
    background: none;
    border: 0;
    color: var(--dunst);
    font-family: var(--text-schrift);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 44px;
    padding: 0 4px;
}

.fluss-zurueck:hover {
    color: var(--text);
}

.meldung {
    font-size: 16px;
    line-height: 1.5;
    min-height: 24px;
    margin-top: -12px;
}

.meldung.gut {
    color: #8fd1a3;
}

.meldung.schlecht {
    color: #e6a09a;
}

/* Honigtopf: fuer Menschen unsichtbar, fuer einfache Bots verfuehrerisch. */
.honig {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Wochenband — erscheint erst im Zeitraum-Schritt. Wochencharter heisst:
   nicht Tage waehlen, sondern eine Woche. */
.wochenband {
    display: grid;
    gap: 22px;
    max-height: min(38vh, 320px);
    overflow-y: auto;
    padding-right: 6px;
}

.wochen-monat h4 {
    font-family: var(--display);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0 0 10px;
    text-transform: uppercase;
    color: var(--dunst);
}

.wochen-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.woche {
    font-family: var(--text-schrift);
    font-size: 15px;
    font-variant-numeric: lining-nums tabular-nums;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid var(--linie);
    background: rgba(243, 236, 222, 0.04);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: border-color 0.2s, background-color 0.2s;
}

.woche:hover {
    border-color: var(--messing);
}

.woche[aria-pressed='true'] {
    background: var(--messing);
    border-color: var(--messing);
    color: #0d1b24;
    font-weight: 600;
}

.woche[disabled] {
    opacity: 0.32;
    cursor: not-allowed;
    text-decoration: line-through;
}

.woche .marke {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(90, 150, 110, 0.9);
}

.woche.option .marke {
    background: rgba(197, 158, 62, 0.95);
}

.woche.belegt .marke {
    background: rgba(168, 74, 62, 0.9);
}

/* Uebersicht vor dem Absenden */
.uebersicht {
    display: grid;
    gap: 2px;
    border-top: 1px solid var(--linie);
}

.uebersicht > div {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--linie);
    align-items: baseline;
}

.uebersicht dt {
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.18em;
    margin-right: -0.18em;
    text-transform: uppercase;
    color: var(--dunst);
}

.uebersicht dd {
    margin: 0;
    font-size: 18px;
}

/* Kontaktspalte neben dem Fluss */
.anfrage-raster {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.kontakt-block {
    display: grid;
    gap: 24px;
    align-content: start;
    border-left: 1px solid var(--linie);
    padding-left: clamp(24px, 3vw, 44px);
}

.kontakt-block a {
    text-decoration: none;
    border-bottom: 1px solid var(--linie);
}

.kontakt-block a:hover {
    border-bottom-color: var(--messing);
}

.kontakt-gross {
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
}

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

.fuss {
    margin-top: 40px;
    border-top: 1px solid var(--linie);
    padding: 24px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    align-items: baseline;
    font-size: 15px;
    color: var(--dunst);
}

.fuss nav {
    display: flex;
    gap: 22px;
    margin-left: auto;
    flex-wrap: wrap;
}

.fuss a {
    text-decoration: none;
}

.fuss a:hover {
    color: var(--text);
}

/* Vertraglich zugesicherter Urheberhinweis. Eigene Zeile unter Copyright und
   Seitenliste, damit er nicht mit der Navigation um den Platz ringt. */
.fuss .gemacht-von {
    flex: 0 0 100%;
    margin: 0;
    font-size: 13px;
    color: var(--dunst);
    opacity: .75;
}

.fuss .gemacht-von .herz { color: #b4533f; }

.fuss .gemacht-von a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Punktnavigation
   -------------------------------------------------------------------------- */

.punkte {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    display: grid;
    gap: 14px;
}

.punkte a {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    position: relative;
}

.punkte a::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(243, 236, 222, 0.42);
    transition: background-color 0.25s, transform 0.25s;
}

.punkte a[aria-current='true']::after {
    background: var(--messing-hell);
    transform: scale(1.6);
}

.punkte a span {
    position: absolute;
    right: 34px;
    white-space: nowrap;
    font-family: var(--display);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(243, 236, 222, 0.86);
    background: rgba(6, 19, 27, 0.86);
    border-radius: 999px;
    padding: 6px 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.punkte a:hover span,
.punkte a:focus-visible span {
    opacity: 1;
}

.punkte.auf-hell a::after {
    background: rgba(10, 29, 39, 0.4);
}

.punkte.auf-hell a[aria-current='true']::after {
    background: var(--messing-dunkel);
}

/* --------------------------------------------------------------------------
   Auftauchen beim Scrollen
   -------------------------------------------------------------------------- */

/* Sichtbar ist der Normalfall. Verborgen wird nur, solange das Skript
   nachweislich laeuft (Klasse am <html>) — sonst haengt der Inhalt an einer
   Bedingung, die auch scheitern kann, und die Seite bliebe leer. */
.taucht {
    opacity: 1;
    transform: none;
}

.fx-an .taucht {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fx-an .taucht.da {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .fx-an .taucht {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Schmale Fenster
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .crew-raster {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1000px) {
    .galerie {
        height: auto;
        grid-template-rows: auto;
        grid-template-columns: repeat(2, 1fr);
    }

    .galerie figure {
        aspect-ratio: 4 / 3;
    }

    .gross {
        grid-column: span 2;
        grid-row: span 1;
    }
}

@media (max-width: 900px) {
    :root {
        --radius: 22px;
        --kopfhoehe: 68px;
        --leiste: 72px;
    }

    body {
        font-size: 18px;
    }

    .kopf {
        gap: 10px;
    }

    .kopf-nav {
        display: none;
    }

    .kopf-sprache {
        margin-left: auto;
    }

    .kopf-schalter {
        display: inline-flex;
        margin-left: 0;
    }

    .kopf.offen {
        background: rgba(6, 19, 27, 0.98);
    }

    .kopf.offen .kopf-nav {
        display: grid;
        position: fixed;
        top: var(--kopfhoehe);
        right: 0;
        bottom: auto;
        left: 0;
        background: rgba(6, 19, 27, 0.98);
        padding: 20px clamp(16px, 5vw, 40px) 28px;
        gap: 2px;
        border-bottom: 1px solid rgba(243, 236, 222, 0.14);
    }

    .kopf.offen .kopf-nav a {
        font-size: 16px;
        padding: 15px 0;
        border-bottom: 1px solid rgba(243, 236, 222, 0.1);
    }

    .punkte {
        display: none;
    }

    .szene-innen {
        min-height: auto;
        padding: calc(var(--kopfhoehe) + 36px) 20px calc(var(--leiste) + 28px);
    }

    #start .szene-innen {
        min-height: calc(100vh - 2 * var(--rand));
        min-height: calc(100svh - 2 * var(--rand));
        padding: 0;
    }

    #schiff .szene-innen,
    #rundgang .szene-innen {
        padding: 0;
        grid-template-columns: 1fr;
    }

    .halbbild {
        aspect-ratio: 3 / 2;
    }

    .halbtext {
        padding: 34px 20px calc(var(--leiste) + 28px);
    }

    .drei-zahlen {
        grid-template-columns: 1fr;
    }

    .drei-zahlen div {
        padding: 15px 0;
    }

    .drei-zahlen div + div {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--linie);
    }

    .punkte-liste > div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .crew-raster {
        grid-template-columns: repeat(2, 1fr);
    }

    .anfrage-raster {
        grid-template-columns: 1fr;
    }

    .kontakt-block {
        border-left: 0;
        border-top: 1px solid var(--linie);
        padding-left: 0;
        padding-top: 28px;
    }

    .uebersicht > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .fuss nav {
        margin-left: 0;
    }

    /* Aktionsleiste: Knopf ueber die volle Breite, Telefon als Kreis. */
    .leiste-marke {
        display: none;
    }

    .leiste-rechts {
        width: 100%;
        margin-left: 0;
        gap: 10px;
    }

    .leiste-rechts .knopf {
        flex: 1;
        padding: 14px 18px;
        min-height: 52px;
        font-size: 13px;
    }

    .leiste-tel {
        width: 52px;
        min-height: 52px;
        padding: 0;
        justify-content: center;
    }

    .leiste-tel span {
        display: none;
    }
}

@media (max-width: 560px) {
    .datumsfelder,
    .fluss-kontaktfelder {
        grid-template-columns: 1fr;
    }

    .datum-trigger {
        min-height: 62px;
    }

    .datum-kalender {
        padding: 15px 12px;
    }

    .datum-wochentage,
    .datum-tage {
        gap: 3px;
    }

    .datum-tag {
        min-height: 0;
        font-size: 12px;
    }

    h1 {
        letter-spacing: 0.14em;
        margin-right: -0.14em;
    }

    .hero-zeile {
        letter-spacing: 0.2em;
        margin-right: -0.2em;
        font-size: 11.5px;
    }

    .crew-raster {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}


/* --------------------------------------------------------------------------
   Rueckfallebene fuer aeltere Browser
   aspect-ratio kennt Safari erst ab 15 (iOS 15). Ohne sie fallen Bildkacheln
   auf Hoehe null zusammen — die Crew und die Galerie waeren schlicht
   unsichtbar, und das sieht aus wie "laedt nicht". Feste Hoehen sind eine
   Naeherung, aber sie zeigen den Inhalt.
   -------------------------------------------------------------------------- */

@supports not (aspect-ratio: 1 / 1) {
    .crew-karte figure {
        height: 240px;
    }

    .blase {
        height: 200px;
    }
}

@supports not (aspect-ratio: 1 / 1) {
    @media (max-width: 1000px) {
        .galerie figure {
            height: 210px;
        }
    }

    @media (max-width: 900px) {
        .halbbild {
            height: 260px;
        }
    }

    @media (max-width: 560px) {
        .blase {
            height: 160px;
        }
    }
}


/* --------------------------------------------------------------------------
   Der Film
   Die Aufnahme liegt beim Rundgang-Anbieter und wiegt 90 MB. Deshalb steht im
   HTML `preload="none"` mit Standbild: geladen wird erst, wenn jemand auf
   Abspielen drueckt. Hier nur der Rahmen — Seitenverhaeltnis fest, damit beim
   Laden nichts springt.
   -------------------------------------------------------------------------- */
.filmtext {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 18px;
    /* Bewusst NICHT .band-text: die Klasse traegt 106 px Polster oben und 110
       unten, weil sie fuer Text UEBER einem Vollbild gebaut ist. Hier liegt
       kein Bild darunter — dieselben Werte wuerden den Abschnitt nur
       auseinanderziehen. */
    /* Kein eigener Abstand nach oben: .szene-innen polstert bereits um die
       Kopfhoehe. Beides zusammen hat den Abschnitt aufgeblaeht. */
    padding: 0 clamp(20px, 5vw, 72px);
}

.filmrahmen {
    margin: clamp(16px, 2.6vh, 30px) auto 0;
    /* Ebenso unten: .szene-innen laesst der Aktionsleiste schon Platz. */
    padding: 0 clamp(20px, 5vw, 72px);
    width: 100%;
    max-width: calc(var(--bahn) + 2 * 72px);
}

.film {
    display: block;
    /* Hier fuehrt die Hoehe, nicht die Breite.

       Vorher war nur die Breite begrenzt und die Hoehe folgte dem
       Seitenverhaeltnis — bei einem breiten Fenster wurde das Video 637px
       hoch und der Abschnitt 1242px statt 900px. Alle anderen Abschnitte sind
       genau eine Fensterhoehe, dieser fiel also aus dem Raster: das Rad
       rastete dreimal, bevor der naechste Abschnitt kam.

       Der Abzug deckt Kopfleiste, Ueberschrift und Fussleiste ab. */
    height: min(calc(100svh - 460px), 620px);
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    border: 1px solid var(--linie);
    background: #000;
    /* Das Standbild fuellt den Rahmen, statt mit Balken zu stehen. */
    object-fit: cover;
}

/* Schmal fuehrt wieder die Breite: sonst bliebe seitlich die Haelfte des
   Rahmens leer, waehrend das Video als schmaler Streifen in der Mitte steht. */
@media (max-width: 900px) {
    .film {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 560px) {
    .filmrahmen { margin-top: 24px; }
    .film { border-radius: 18px; }
}

.hero-cta {
    display: none;
}

@media (max-width: 900px) {
    /* Die Vorlage zeigt unter dem Knopf nur den Pfeil, kein Wort. Der Text
       bleibt im Markup (Vorlesbarkeit), nur die Anzeige versteckt ihn. */
    .hero-hinweis {
        font-size: 0;
        letter-spacing: 0;
    }

    .hero-hinweis svg {
        margin-top: 4px;
    }

    .hero-cta {
        display: inline-flex;
        margin-top: 22px;
    }
}

/* Handy nach der Design-Vorlage: dunkler Grund, helle Karten, wenig Text.
   Der Fliesstext der Schiffssektion zeigt nur seine ersten Zeilen, die
   sechs Kennzahlen ruecken in ein kompaktes Zweispaltraster, die Crew wird
   zur Avatar-Reihe und der Hero traegt den goldenen Anfrage-Knopf. */
@media (max-width: 560px) {
    #schiff .drei-zahlen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border: 1px solid var(--linie);
        border-radius: 14px;
        overflow: hidden;
    }

    #schiff .drei-zahlen div {
        padding: 12px 14px;
        border-top: 0;
        border-left: 0;
    }

    #schiff .drei-zahlen div:nth-child(n + 3) {
        border-top: 1px solid var(--linie);
    }

    #schiff .drei-zahlen div:nth-child(2n) {
        border-left: 1px solid var(--linie);
    }

    #schiff .drei-zahlen dt {
        font-size: 10px;
    }

    #schiff .drei-zahlen dd {
        font-size: 17px;
    }

    /* Crew: alle sechs Personen direkt sichtbar. Die fruehere horizontale,
       scrollbarlose Reihe schnitt den Rest ab und gab keinen Hinweis aufs
       Wischen. Zwei Spalten lassen auch laengeren Rollen genug Luft. */
    .crew-raster {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
        overflow: visible;
        padding-bottom: 0;
    }

    .crew-karte {
        min-width: 0;
        text-align: center;
    }

    .crew-karte figure {
        width: 72px;
        height: 72px;
        margin: 0 auto;
        border-radius: 999px;
        overflow: hidden;
    }

    .crew-karte img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .crew-karte h3 {
        font-size: 13px;
        margin-top: 8px;
    }

    .crew-karte .crew-rolle {
        order: 3;
        font-size: 10px;
        line-height: 1.35;
        letter-spacing: 0.08em;
        margin-right: 0;
        margin-top: 2px;
        opacity: 0.7;
    }

    .crew-karte {
        display: flex;
        flex-direction: column;
    }

    .crew-karte p:not(.crew-rolle) {
        display: none;
    }
}

/* ══ Sichtweichen: was nur das Handy sieht und was nur der Schreibtisch.
   Die Vorlage erzaehlt auf dem Handy eine knappere Geschichte — dieselben
   Inhalte, andere Saetze. ══ */
.handy-nur {
    display: none;
}

@media (max-width: 560px) {
    .handy-nur {
        display: block;
    }

    .schreibtisch-nur {
        display: none;
    }

    /* ── Die Schiffskarte nach Vorlage: Abzeichen, Kurztext, Iconraster. ── */
    .schiff-abzeichen {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 999px;
        background: var(--nacht);
        color: var(--messing-hell, #cfae68);
        /* Wie in der Vorlage: das Abzeichen sitzt LINKS NEBEN der Zeile
           "DAS SCHIFF". Der Textblock ist ein Raster, floats verpuffen —
           also absolut in die Ecke, und die Zeile rueckt ein. */
        position: absolute;
        top: 26px;
        left: 20px;
        margin: 0;
    }

    #schiff .halbtext {
        position: relative;
    }

    #schiff .halbtext .titel {
        padding-left: 58px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    #schiff .halbbild {
        display: none;
    }

    #schiff .halbtext {
        padding-top: 26px;
    }

    #schiff .drei-zahlen {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #schiff .drei-zahlen div {
        padding: 12px 8px 12px 10px;
        border-left: 0;
    }

    #schiff .drei-zahlen div:nth-child(n + 4) {
        border-top: 1px solid var(--linie);
    }

    #schiff .drei-zahlen div:nth-child(3n + 2),
    #schiff .drei-zahlen div:nth-child(3n) {
        border-left: 1px solid var(--linie);
    }

    #schiff .drei-zahlen dt {
        font-size: 9px;
        letter-spacing: 0.1em;
    }

    #schiff .drei-zahlen dd {
        font-size: 16px;
    }

    /* Die kleinen Zeichen vor jeder Kennzahl — eingebettet, damit kein
       Icon-Font noetig ist. Farbe = Messing der hellen Flaeche. */
    #schiff .drei-zahlen dt::before {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        margin-bottom: 6px;
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.85;
    }

    #schiff .drei-zahlen div:nth-child(1) dt::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a22' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 17 17 3l4 4L7 21zM7 13l2 2M10 10l2 2M13 7l2 2'/%3E%3C/svg%3E");
    }

    #schiff .drei-zahlen div:nth-child(2) dt::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a22' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 18v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6M3 18h18M5 10V7h6v3'/%3E%3C/svg%3E");
    }

    #schiff .drei-zahlen div:nth-child(3) dt::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a22' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c.5-3.5 3-5 6-5s5.5 1.5 6 5M16 5a3 3 0 0 1 0 6M18 15c2 .6 3 2 3.3 4.6'/%3E%3C/svg%3E");
    }

    #schiff .drei-zahlen div:nth-child(4) dt::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a22' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7' r='3.2'/%3E%3Cpath d='M5 21c.6-4.2 3.4-6.2 7-6.2s6.4 2 7 6.2'/%3E%3C/svg%3E");
    }

    #schiff .drei-zahlen div:nth-child(5) dt::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a22' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 13 16 8M4 15a8 8 0 1 1 16 0M2 19h20'/%3E%3C/svg%3E");
    }

    #schiff .drei-zahlen div:nth-child(6) dt::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a22' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 21s-6-5.5-6-10a6 6 0 1 1 12 0c0 4.5-6 10-6 10z'/%3E%3Ccircle cx='12' cy='10.5' r='2'/%3E%3C/svg%3E");
    }

    /* ── An Bord nach Vorlage: ein breites Bild, darunter zwei mal zwei. ── */
    .anbord-hinweis {
        display: none;
    }

    .galerie {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .galerie .gross {
        grid-column: 1 / -1;
    }

    /* ── Die Crew: nur Zeile und Gesichter, kein Satz dazwischen. ── */
    #crew .satz {
        display: none;
    }
}