/* ===================================================================
   DER KASTEN ZUR NÄCHSTEN FASSUNG (Startseite)

   Ein Hinweis, der zu lang für eine Zeile und zu wichtig für eine
   Unterseite ist: Die Webseite bleibt eine Weile, wie sie ist, und
   die nächste Fassung ist 10.0. Zugeklappt steht die Nachricht da,
   aufgeklappt die Begründung.

   ## Warum `<details>` und kein eigenes Klappwerk

   Das Haus hat schon eines — die Fragen auf der Hilfeseite
   (`hilfe-teile.css`). `<details>` kann von sich aus, was ein
   nachgebautes Klappwerk erst lernen muss: Tastatur, Vorlesegerät,
   und es funktioniert auch dann, wenn kein Skript geladen ist.

   ⚠️ Die Aufschrift steht in `<span>`s IM `<summary>`, nicht am
   `<summary>` selbst. Stünde `data-i18n` dort, schriebe der
   Übersetzer beim ersten Sprachwechsel den ganzen Inhalt neu — und
   nähme den Pfeil mit. Dieselbe Lehre wie bei den Hilfefragen.

   ## Glas

   Volles Aerona-Glas: Unschärfe, Kante, Tiefe. Nicht zwei davon —
   eine Fläche mit Unschärfe ohne Kante sieht aus wie ein Loch.
   =================================================================== */

.v10-abschnitt {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.5rem 1rem;
}

:root[data-thema] .v10-kasten {
    background: var(--k-platte);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid;
    border-color: var(--k-glas-kante);
    box-shadow: var(--k-glas-tiefe);
    border-radius: var(--k-rund-gross, 18px);
    overflow: hidden;
}

:root[data-thema] .v10-kasten summary {
    display: block;
    padding: 1.5rem 1.7rem;
    cursor: pointer;
    list-style: none;
}

:root[data-thema] .v10-kasten summary::-webkit-details-marker {
    display: none;
}

:root[data-thema] .v10-kasten__marke {
    display: inline-block;
    margin-bottom: 0.6rem;
    color: var(--k-akzent-hell);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

:root[data-thema] .v10-kasten__titel {
    display: block;
    color: var(--k-text);
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
}

:root[data-thema] .v10-kasten__unter {
    display: block;
    margin-top: 0.55rem;
    color: var(--k-text-leise);
    font-size: 0.97rem;
    line-height: 1.6;
}

:root[data-thema] .v10-kasten__mehr {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    color: var(--k-akzent-hell);
    font-size: 0.92rem;
    font-weight: 600;
}

:root[data-thema] .v10-kasten__mehr > i {
    font-size: 0.72rem;
    transition: transform var(--bew-ruhig, 0.35s) var(--bew-feder, ease);
}

:root[data-thema] .v10-kasten[open] .v10-kasten__mehr > i {
    transform: rotate(180deg);
}

:root[data-thema] .v10-kasten summary:hover .v10-kasten__mehr,
:root[data-thema] .v10-kasten summary:focus-visible .v10-kasten__mehr {
    color: var(--k-text);
}

:root[data-thema] .v10-kasten__text {
    padding: 0.2rem 1.7rem 1.6rem;
    border-block-start: 1px solid var(--k-rand-seite);
    margin-inline: 1.7rem;
    padding-inline: 0;
}

:root[data-thema] .v10-kasten__text p {
    margin: 1rem 0 0;
    color: var(--k-text-leise);
    font-size: 0.97rem;
    line-height: 1.75;
}

:root[data-thema] .v10-kasten__text p:first-child {
    margin-top: 1.1rem;
}

:root[data-thema] .v10-kasten__text strong {
    color: var(--k-text);
    font-weight: 600;
}

@media (max-width: 700px) {
    .v10-abschnitt {
        padding-inline: 1rem;
    }

    :root[data-thema] .v10-kasten summary {
        padding: 1.2rem 1.2rem;
    }

    :root[data-thema] .v10-kasten__text {
        margin-inline: 1.2rem;
        padding-bottom: 1.3rem;
    }
}