/* Unterseiten.
   Kein Snap, keine Vollbild-Sektionen — diese Seiten werden gelesen. Sie erben
   Farben, Schriften und Knoepfe aus yacht.css.

   Leitregel gegen die Bleiwueste: jeder Abschnitt bekommt ein Bild oder eine
   Zahl, und alles, was Nachschlagewerk ist, steckt in <details>. */

body.seite {
    background: var(--papier);
    color: var(--tinte);
    /* Platz fuer die Aktionsleiste am Fuss. */
    padding-bottom: var(--leiste);
}

.seiten-kopfband {
    position: relative;
    min-height: 56vh;
    min-height: 56svh;
    display: flex;
    align-items: flex-end;
    padding: calc(var(--kopfhoehe) + 40px) clamp(20px, 5vw, 72px) clamp(40px, 6vh, 72px);
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
    background: var(--tiefsee);
    color: var(--creme);
}

.seiten-kopfband img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
}

.seiten-kopfband::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
        to bottom,
        rgba(4, 16, 26, 0.62) 0%,
        rgba(4, 16, 26, 0.24) 34%,
        rgba(4, 16, 26, 0.8) 100%
    );
}

.kopfband-text {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--bahn);
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.kopfband-text h1 {
    font-size: clamp(34px, 5.4vw, 68px);
    letter-spacing: 0.16em;
    margin-right: -0.16em;
}

.kopfband-text p {
    max-width: 52ch;
    color: rgba(243, 236, 222, 0.84);
}

.brotkrume {
    font-family: var(--display);
    font-size: 11.5px;
    letter-spacing: 0.22em;
    margin-right: -0.22em;
    text-transform: uppercase;
    color: rgba(243, 236, 222, 0.74);
}

.brotkrume a {
    text-decoration: none;
    border-bottom: 1px solid rgba(243, 236, 222, 0.3);
}

/* --- Inhalt --------------------------------------------------------- */

.blatt {
    max-width: var(--bahn);
    margin: 0 auto;
    padding: clamp(48px, 8vh, 92px) clamp(20px, 5vw, 72px);
    display: grid;
    gap: clamp(48px, 7vh, 84px);
}

.abschnitt {
    display: grid;
    gap: 20px;
}

/* Rechtsseiten. Kein Kopfband, also braucht das Blatt oben Luft unter der
   fixierten Kopfleiste. Und eine engere Bahn: Impressum und
   Datenschutzerklaerung sind zum Lesen da, nicht zum Ueberfliegen. */
.rechtsblatt {
    max-width: 78ch;
    padding-top: clamp(96px, 15vh, 150px);
    gap: clamp(30px, 4.5vh, 48px);
}

.rechtsblatt h1 {
    margin: 0;
}

.rechtsblatt .abschnitt {
    gap: 14px;
}

.rechtsblatt .titel {
    margin-bottom: 2px;
}

/* Die Kopfleiste ist fuer ein dunkles Kopfband gebaut: cremefarbene Schrift,
   durchsichtiger Grund, erst beim Scrollen faellt Farbe dahinter. Auf einer
   Rechtsseite fehlt das Band, und cremefarbene Schrift auf cremefarbenem
   Papier ist unsichtbar. Hier steht die Leiste deshalb von Anfang an auf
   Grund. Dieselbe Ursache trifft die Brotkrume darunter. */
.recht .kopf {
    background: rgba(6, 19, 27, 0.95);
    border-bottom-color: rgba(243, 236, 222, 0.14);
}

.recht .brotkrume {
    color: rgba(10, 29, 39, 0.62);
}

.recht .brotkrume a {
    color: inherit;
    border-bottom-color: rgba(10, 29, 39, 0.3);
}

.abschnitt p {
    max-width: 66ch;
}

.text-paar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.bild-block {
    border-radius: var(--radius);
    overflow: hidden;
}

.bild-block img {
    width: 100%;
    height: auto;
}

/* Bildraster — jedes Bild behaelt sein eigenes Seitenverhaeltnis. */
.raster-bilder {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.raster-bilder figure {
    margin: 0;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.raster-bilder .breit {
    grid-column: span 2;
    aspect-ratio: 8 / 3;
}

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

.raster-bilder figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 18px 14px;
    font-family: var(--display);
    font-size: 12px;
    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));
}

/* Schiffsdaten: Linien statt Kaesten, Werte in der Textschrift — Cinzel waere
   hier unleserlich, sie hat keine echten Kleinbuchstaben. */
.tabelle {
    width: 100%;
    border-collapse: collapse;
}

.tabelle th,
.tabelle td {
    text-align: left;
    padding: 14px 4px;
    border-bottom: 1px solid var(--linie);
    vertical-align: top;
}

.tabelle th {
    font-family: var(--display);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    margin-right: -0.18em;
    text-transform: uppercase;
    color: var(--dunst);
    width: 40%;
}

.tabelle td {
    font-size: 18px;
    font-variant-numeric: lining-nums tabular-nums;
}

/* Aufzaehlungen mit Messingstrich statt Punkt. */
.strichliste {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 11px;
}

.strichliste li {
    position: relative;
    padding-left: 26px;
    max-width: 64ch;
}

.strichliste li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 15px;
    width: 12px;
    height: 1px;
    background: var(--messing);
}

/* Zeitstrahl (Historie) */
.zeitstrahl {
    display: grid;
    gap: clamp(36px, 6vh, 64px);
}

.station {
    display: grid;
    grid-template-columns: 150px 1fr 1fr;
    gap: clamp(20px, 3vw, 44px);
    align-items: start;
    padding-top: 30px;
    border-top: 1px solid var(--linie);
}

.station-jahr {
    font-family: var(--display);
    font-size: clamp(20px, 2.2vw, 28px);
    letter-spacing: 0.12em;
    margin-right: -0.12em;
    color: var(--messing);
    font-variant-numeric: lining-nums;
}

.station-text {
    display: grid;
    gap: 14px;
}

.station-text p {
    max-width: 46ch;
}

.station .bild-block {
    border-radius: 20px;
}

/* Die Rekonstruktionsjahre haben statt eines Bildes eine Liste in der dritten
   Spalte. Sie sitzt in derselben Zeile wie die Ueberschrift, deshalb der
   Vorschub oben — sonst laeuft sie gegen die Oberkante des Jahres. */
.station > .strichliste {
    padding-top: 6px;
}

.station > .strichliste li {
    font-size: 15px;
    line-height: 1.5;
}

.station > .strichliste li::before {
    top: 12px;
}

/* Crew-Portraets auf der Unterseite */
.portraits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 34px);
    /* Zeilen sind gleich hoch — jede Karte streckt sich auf die Zeile. */
    align-items: stretch;
}

/* Massgleiche Kacheln (Kundendurchsicht): gleiche Bildform haben alle,
   aber die Texte sind verschieden lang — die Falte haengt darum an der
   gemeinsamen Unterkante, und alle Karten einer Zeile enden buendig. */
.portrait {
    display: flex;
    flex-direction: column;
}

.portrait > details {
    margin-top: auto;
    padding-top: 12px;
}

.portrait figure {
    margin: 0 0 16px;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--feld);
}

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

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

.portrait h2 {
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 8px;
    max-width: none;
}

.portrait p {
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--dunst);
    max-width: 42ch;
}

/* Aufklappbares: Zertifikate, Bedingungen, alles Nachschlagewerk. */
.falte {
    border-top: 1px solid var(--linie);
}

.falte:last-of-type {
    border-bottom: 1px solid var(--linie);
}

.falte > summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 40px 18px 0;
    position: relative;
    font-size: 19px;
    font-weight: 500;
}

.falte > summary::-webkit-details-marker {
    display: none;
}

.falte > summary::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    width: 11px;
    height: 11px;
    margin-top: -8px;
    border-right: 1px solid var(--messing);
    border-bottom: 1px solid var(--messing);
    transform: rotate(45deg);
    transition: transform 0.25s;
}

.falte[open] > summary::after {
    transform: rotate(-135deg);
    margin-top: -3px;
}

.falte-inhalt {
    padding: 0 0 24px;
    display: grid;
    gap: 14px;
}

.falte-inhalt p,
.falte-inhalt li {
    color: var(--dunst);
    font-size: 16.5px;
}

/* Abschlussband vor dem Fuss */
.schlussband {
    position: relative;
    margin: 0 var(--rand) var(--rand);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--tiefsee);
    color: var(--creme);
    min-height: 44vh;
    min-height: 44svh;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 18px;
    padding: clamp(56px, 9vh, 100px) clamp(20px, 5vw, 72px);
}

.schlussband img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

/* Ohne diesen Schleier steht helle Schrift auf hellen Segeln. */
.schlussband::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(
        120% 90% at 50% 50%,
        rgba(4, 16, 26, 0.92) 0%,
        rgba(4, 16, 26, 0.74) 55%,
        rgba(4, 16, 26, 0.6) 100%
    );
}

.schlussband > * {
    position: relative;
}

.schlussband p {
    max-width: 46ch;
    color: rgba(243, 236, 222, 0.84);
}

.seiten-fuss {
    background: var(--nacht);
    color: var(--creme);
    margin: 0 var(--rand) var(--rand);
    border-radius: var(--radius);
    padding: clamp(32px, 5vh, 52px) clamp(20px, 5vw, 72px);
}

.seiten-fuss .fuss {
    max-width: var(--bahn);
    margin: 0 auto;
    border-top: 0;
    padding: 0;
    --dunst: rgba(243, 236, 222, 0.68);
    --linie: rgba(243, 236, 222, 0.16);
}

@media (max-width: 1000px) {
    .raster-bilder {
        grid-template-columns: repeat(2, 1fr);
    }

    .raster-bilder .breit {
        grid-column: span 2;
    }

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

@media (max-width: 900px) {
    .text-paar {
        grid-template-columns: 1fr;
    }

    .station {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .seiten-kopfband {
        min-height: 50vh;
        min-height: 50svh;
    }

    .tabelle th {
        width: 48%;
    }
}

@media (max-width: 560px) {
    .portraits {
        grid-template-columns: 1fr;
    }
}


/* Rueckfallebene fuer Browser ohne aspect-ratio (Safari vor 15). */
@supports not (aspect-ratio: 1 / 1) {
    .raster-bilder figure {
        height: 200px;
    }

    .raster-bilder .breit {
        height: 200px;
    }

    .portrait figure {
        height: 380px;
    }

    @media (max-width: 1000px) {
        .raster-bilder figure,
        .raster-bilder .breit {
            height: 230px;
        }
    }
}