/* ===================================================================
   DIE STARTSEITE — DIE BAUTEILE IN DEN ABSCHNITTEN

   Drei Karten unter „Und das hier funktioniert nicht", drei
   Festlegungen, drei Wege am Schluss. Der gemeinsame Aufbau der
   Abschnitte — Überschrift, Unterzeile, Fließtext, der Weg weiter —
   steht in `start-abschnitte.css`.

   Geteilt wurde, als die Datei die dreihundert Zeilen erreichte, an
   der Naht: **wie ein Abschnitt gebaut ist** gegen **was darin steht**
   (Regel 03). Dieselbe Naht hatte auch das alte Stilblatt, aus
   demselben Grund.

   Keines der drei Bauteile ist neu. Ihre Kanten, ihr Schatten und ihr
   Ring kommen aus `glas.css`, wo dieselben Scheiben schon
   beschrieben sind; hier stehen nur Maße und Aufbau.
   =================================================================== */

:root[data-thema] .offen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

:root[data-thema] .offen-karte {
    position: relative;
    display: block;
    padding: 1.7rem 1.6rem;
    background: var(--k-vertieft);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-gross);
    text-decoration: none;
    min-width: 0;
    overflow: visible;
    transition: none;
}

:root[data-thema] .offen-karte:hover,
:root[data-thema] .offen-karte:focus-visible {
    transform: none;
    outline: none;
}

:root[data-thema] .offen-karte > .fenster__ring,
:root[data-thema] .ende-weg > .fenster__ring,
:root[data-thema] .ende-weg > .fenster__zeichen-pixel,
:root[data-thema] .fest-punkt > .fenster__zeichen-pixel {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
}

:root[data-thema] .offen-karte__zahl {
    color: var(--k-punkt-weg);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.6rem;
}

:root[data-thema] .offen-karte h3 {
    color: var(--k-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.55rem;
}

:root[data-thema] .offen-karte p {
    color: var(--k-text-leise);
    font-size: 0.89rem;
    line-height: 1.75;
}

:root[data-thema] .fest-liste {
    display: grid;
    gap: 0.8rem;
}

:root[data-thema] .fest-punkt {

    position: relative;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    padding: 1.5rem 1.6rem;
    background: var(--k-vertieft);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
}

:root[data-thema] .fest-punkt > i {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--k-rund-klein);
    background: var(--k-vertieft);
    font-size: 1rem;
}

:root[data-thema] .fest-punkt > i::before {
    background-image: var(--k-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

:root[data-thema] .fest-punkt > i.zeichen--zerfaellt::before {
    visibility: hidden;
}

:root[data-thema] .fest-punkt h3 {
    color: var(--k-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.4rem;
}

:root[data-thema] .fest-punkt p {
    color: var(--k-text-leise);
    font-size: 0.9rem;
    line-height: 1.75;
}

:root[data-thema] .fest-punkt p a {
    color: var(--k-text);
    text-decoration: none;
    padding-bottom: 2px;
    background-image: linear-gradient(90deg,
            var(--k-vertieft-kante), var(--k-vertieft-kante));
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
}

:root[data-thema] .fest-punkt p a:hover,
:root[data-thema] .fest-punkt p a:focus-visible {
    background-image: var(--k-verlauf);
    outline: none;
}

:root[data-thema] .ende-wege {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.8rem;
}

:root[data-thema] .ende-weg {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.2rem 1.4rem;
    background: var(--k-vertieft);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    color: var(--k-text-leise);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    min-width: 0;
    transition: color var(--bew-schnell) var(--bew-beides);
}

:root[data-thema] .ende-weg:hover,
:root[data-thema] .ende-weg:focus-visible {
    color: var(--k-text);
    outline: none;
}

:root[data-thema] .ende-weg i {
    flex-shrink: 0;
    color: var(--k-text-still);
}

:root[data-thema] .ende-weg:hover i,
:root[data-thema] .ende-weg:focus-visible i {
    background-image: var(--k-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

:root[data-thema] .ende-weg > i.zeichen--zerfaellt::before {
    visibility: hidden;
}