/* =============================================================================
   Startseite - der Abschnitt mit den Bildschirmaufnahmen.

   Reiterspalte, wischbares Band und die aufgelegte Ansicht. Steht in einer
   eigenen Datei, weil startseite-abschnitte.css mit diesem Block die
   Fünfhundert-Zeilen-Grenze überschritten hat. Palette und Grundeinstellungen
   stehen in startseite-grund.css.
   ============================================================================= */

/* --- Die Auswertung: Reiter links, Bildschirmaufnahme rechts ---

   Die Reiterspalte ist bewusst schmal und die Aufnahme groß: Wer hier landet,
   will die Oberfläche sehen und nicht eine Liste lesen. Alle fünf Bilder
   liegen übereinander im selben Kasten, gewechselt wird nur die Deckkraft.
   Damit springt beim Wechsel nichts, und die Höhe steht von Anfang an. */
.auswertung {
    padding: clamp(80px, 12vw, 140px) 0;
    background: var(--papier-tief);
    border-top: 1px solid var(--linie);
}

.auswertung h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    max-width: 22ch;
    margin-bottom: 16px;
}

.schau {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr;
    gap: clamp(20px, 3vw, 42px);
    align-items: start;
}

.schau-reiter {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.schau-knopf {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'nummer wort' 'nummer satz';
    column-gap: 12px;
    padding: 14px 16px 14px 14px;
    border: 0;
    border-radius: var(--rund);
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--tinte-weich);
    transition: background 0.25s var(--kurve), color 0.25s var(--kurve);
}

.schau-knopf::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 2px;
    background: var(--tanne);
    opacity: 0;
    transform: scaleY(0.3);
    transform-origin: center;
    transition: opacity 0.25s var(--kurve), transform 0.25s var(--kurve);
}

.schau-knopf:hover {
    background: rgba(255, 253, 247, 0.6);
}

.schau-knopf:focus-visible {
    outline: 2px solid var(--tanne);
    outline-offset: 2px;
}

.schau-knopf.ist-aktiv {
    background: var(--karte);
    color: var(--tinte);
    box-shadow: var(--schatten-flach);
}

.schau-knopf.ist-aktiv::before {
    opacity: 1;
    transform: scaleY(1);
}

/* Oben bündig mit dem Wort daneben, nicht mittig zum ganzen Knopf: Sonst
   rutscht die Ziffer je nachdem, ob der Satz darunter ein- oder zweizeilig
   umbricht, und die Spalte wirkt schief. */
.schau-nummer {
    grid-area: nummer;
    align-self: start;
    line-height: 1.5;
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--tinte-leise);
}

.schau-knopf.ist-aktiv .schau-nummer {
    color: var(--bernstein-tief);
}

.schau-wort {
    grid-area: wort;
    font-weight: 600;
    font-size: 1rem;
}

.schau-satz {
    grid-area: satz;
    font-size: 0.82rem;
    color: var(--tinte-leise);
    line-height: 1.35;
}

/* Der Stapel. Alle Blätter liegen übereinander, versetzt und verkleinert; das
   vorderste steht gerade. Bewegt wird ausschließlich über `transform` und
   `opacity`, damit der Wechsel auf dem Kompositor läuft und nichts neu
   ausgelegt werden muss.

   Die Höhe des Kastens steht über `aspect-ratio` von Anfang an fest. Die
   Blätter selbst sind absolut gesetzt und tragen deshalb nichts dazu bei -
   ohne das wäre der Kasten null hoch und der Abschnitt darunter würde beim
   Laden nach oben springen. */
.schau-stapel {
    position: relative;
    aspect-ratio: 1280 / 900;
    cursor: pointer;
    /* Platz für die versetzten Blätter rechts und unten. */
    padding: 0 26px 26px 0;
}

.schau-stapel:focus-visible {
    outline: 2px solid var(--tanne);
    outline-offset: 6px;
    border-radius: var(--rund-gross);
}

.schau-blatt {
    position: absolute;
    inset: 0 26px 26px 0;
    margin: 0;
    border: 1px solid var(--linie);
    border-radius: var(--rund-gross);
    background: var(--karte);
    box-shadow: var(--schatten);
    overflow: hidden;
    transform-origin: 100% 100%;
    transition: transform 0.55s var(--kurve), opacity 0.45s var(--kurve);
    will-change: transform;
}

/* Vier Tiefenstufen. Das Blatt an Stelle 0 liegt vorne und gerade, die
   übrigen staffeln sich nach hinten rechts. Mehr als drei sichtbare Kanten
   wirken als Unordnung, deshalb verschwindet ab der vierten alles. */
.schau-blatt[data-tiefe="0"] {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    z-index: 4;
}

.schau-blatt[data-tiefe="1"] {
    transform: translate3d(13px, 13px, 0) scale(0.972);
    opacity: 1;
    z-index: 3;
}

.schau-blatt[data-tiefe="2"] {
    transform: translate3d(26px, 26px, 0) scale(0.944);
    opacity: 1;
    z-index: 2;
}

.schau-blatt[data-tiefe="3"],
.schau-blatt[data-tiefe="4"] {
    transform: translate3d(26px, 26px, 0) scale(0.944);
    opacity: 0;
    z-index: 1;
}

.schau-foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Der Knopf zum Auflegen. Er sitzt auf dem vordersten Blatt, dort wo der
   Daumen ohnehin hintippt, und gehört bewusst nicht zum Stapel: sonst würde
   er beim Blättern mitwandern. */
.schau-lupe {
    position: absolute;
    right: 38px;
    bottom: 38px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(14, 63, 47, 0.9);
    color: #eef4ef;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.25s var(--kurve), opacity 0.25s var(--kurve);
}

.schau-lupe:hover {
    transform: translateY(-2px);
}

.schau-lupe:focus-visible {
    outline: 2px solid var(--karte);
    outline-offset: 2px;
}

.schau-quelle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 2px 0;
    font-size: 0.78rem;
    color: var(--tinte-leise);
}

/* Wo man gerade steht. Nur auf dem Telefon sichtbar, am Schreibtisch sagen
   das die Reiter daneben schon. */
.schau-punkte {
    display: none;
    gap: 6px;
}

.schau-punkte i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--linie);
    transition: transform 0.25s var(--kurve), background 0.25s var(--kurve);
}

.schau-punkte i.ist-aktiv {
    background: var(--tanne);
    transform: scale(1.35);
}

/* --- Die aufgelegte Ansicht --- */
.schau-gross {
    /* Ein modaler `dialog` wird vom Browser über `margin: auto` in beiden
       Richtungen mittig gestellt. Der Grundriss dieser Seite setzt aber
       `* { margin: 0 }`, und das trifft auch ihn - ohne diese zwei Zeilen
       klebt die Aufnahme in der linken oberen Ecke. */
    inset: 0;
    margin: auto;
    width: min(96vw, 1340px);
    max-width: none;
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: var(--rund-gross);
    background: var(--karte);
    box-shadow: 0 40px 90px -30px rgba(29, 43, 37, 0.6);
    overflow: hidden;
}

.schau-gross::backdrop {
    background: rgba(14, 32, 25, 0.72);
}

/* In voller Breite und seitlich schiebbar: Auf ein Telefon passt die Aufnahme
   nie lesbar hinein, also wird sie hier nicht kleingerechnet. */
.schau-gross-lauf {
    overflow: auto;
    max-height: calc(92vh - 46px);
    -webkit-overflow-scrolling: touch;
}

.schau-gross-lauf img {
    display: block;
    width: 1280px;
    max-width: none;
    height: auto;
}

.schau-gross-wort {
    padding: 12px 18px;
    font-size: 0.8rem;
    color: var(--tinte-weich);
    border-top: 1px solid var(--linie);
}

.schau-zu {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(14, 63, 47, 0.9);
    color: #eef4ef;
    cursor: pointer;
}


@media (max-width: 900px) {

    .schau {
        grid-template-columns: 1fr;
    }

    .schau-buehne {
        order: -1;
    }

    .schau-reiter {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .schau-knopf {
        flex: 0 0 auto;
        min-width: 170px;
        scroll-snap-align: start;
        border: 1px solid var(--linie);
    }

    .schau-satz {
        display: none;
    }

    /* Die Punkte sagen auf dem Telefon, wie viele Aufnahmen es sind und wo
       man steht. Am Schreibtisch übernehmen das die Reiter daneben. */
    .schau-punkte {
        display: flex;
    }

    /* Engerer Versatz: Auf 390 Pixel Breite frisst ein Stapel mit 26 Pixel
       Staffelung ein Zehntel des Bildes. */
    .schau-stapel {
        padding: 0 16px 16px 0;
    }

    .schau-blatt {
        inset: 0 16px 16px 0;
    }

    .schau-blatt[data-tiefe="1"] {
        transform: translate3d(8px, 8px, 0) scale(0.975);
    }

    .schau-blatt[data-tiefe="2"],
    .schau-blatt[data-tiefe="3"],
    .schau-blatt[data-tiefe="4"] {
        transform: translate3d(16px, 16px, 0) scale(0.95);
    }

    .schau-lupe {
        right: 24px;
        bottom: 24px;
        padding: 10px 14px;
    }

    .schau-gross {
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    .schau-gross-lauf {
        max-height: calc(100vh - 46px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .schau-knopf,
    .schau-knopf::before,
    .schau-lupe,
    .schau-punkte i,
    .schau-blatt {
        transition: none;
    }
}