/* ==========================================================================
   Fuchs Bingo
   Farben stammen aus dem Maskottchen: Kobaltblauer Himmel, Fuchsorange,
   Zungenrosa. Die Karte selbst ist warmes Papier – wie im Bingosaal.
   ========================================================================== */

@font-face {
    font-family: 'Archivo';
    src: url('fonts/archivo-var-latin.woff2') format('woff2-variations');
    font-weight: 400 800;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}

@font-face {
    font-family: 'Atkinson';
    src: url('fonts/atkinson-400-latin.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}

@font-face {
    font-family: 'Atkinson';
    src: url('fonts/atkinson-400-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Atkinson';
    src: url('fonts/atkinson-700-latin.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}

@font-face {
    font-family: 'Atkinson';
    src: url('fonts/atkinson-700-latin-ext.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --nacht: #141230;
    --tief: #0D0B1F;
    --kobalt: #2D5090;
    --kobalt-tief: #1C3068;
    --fuchs: #EE9036;
    --fuchs-hell: #FFB863;
    --zunge: #F2809B;
    --papier: #F8F1E3;
    --papier-tief: #EADFC8;
    --tinte: #2B2139;
    --tinte-blass: rgba(43, 33, 57, .16);
    --kreide: #9DB4DC;

    --anzeige: 'Archivo', system-ui, sans-serif;
    --lesen: 'Atkinson', 'Atkinson Hyperlegible', system-ui, sans-serif;

    --rund: 18px;
    --rand: clamp(1rem, 4vw, 2.5rem);
    --kante: 0 3px 0 rgba(13, 11, 31, .55);
}

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

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

body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--lesen);
    font-size: 16px;
    line-height: 1.45;
    color: var(--papier);
    background-color: var(--nacht);
    /* Konfetti-Himmel wie auf dem Original-Wallpaper des Fuchses. */
    background-image:
        radial-gradient(circle at 22% 12%, rgba(45, 80, 144, .55), transparent 55%),
        radial-gradient(circle at 84% 4%, rgba(45, 80, 144, .38), transparent 45%),
        radial-gradient(circle at 50% 120%, rgba(238, 144, 54, .10), transparent 60%);
    background-attachment: fixed;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
    background-image:
        radial-gradient(circle, rgba(157, 180, 220, .5) 1.2px, transparent 1.4px),
        radial-gradient(circle, rgba(157, 180, 220, .34) 1px, transparent 1.2px);
    background-size: 137px 121px, 89px 173px;
    background-position: 0 0, 43px 61px;
    mask-image: linear-gradient(to bottom, #000, transparent 68%);
}

a {
    color: var(--fuchs-hell);
    text-underline-offset: 3px;
}

.visuell-versteckt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.honigtopf {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

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

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */

.kopf {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 1.75rem) var(--rand) 0;
}

.marke {
    display: grid;
    text-decoration: none;
    line-height: .84;
    color: inherit;
}

.marke__oben {
    font-family: var(--anzeige);
    font-weight: 600;
    font-stretch: 125%;
    font-size: clamp(.66rem, 2vw, .8rem);
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--kreide);
    padding-left: .2em;
}

.marke__unten {
    font-family: var(--anzeige);
    font-weight: 800;
    font-stretch: 125%;
    font-size: clamp(2rem, 8vw, 3.1rem);
    text-transform: uppercase;
    color: var(--fuchs);
    letter-spacing: -.005em;
    text-shadow: 0 3px 0 rgba(13, 11, 31, .5);
}

.marke:hover .marke__unten {
    color: var(--fuchs-hell);
}

.kopf__aktionen {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-top: .5rem;
}

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */

.knopf {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .62em 1.15em;
    border: 1.5px solid rgba(157, 180, 220, .32);
    border-radius: 999px;
    background: rgba(28, 48, 104, .5);
    color: var(--papier);
    font-family: var(--anzeige);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .12s, background .18s, border-color .18s;
}

.knopf:hover {
    background: rgba(45, 80, 144, .8);
    border-color: rgba(157, 180, 220, .6);
}

.knopf:active {
    transform: translateY(1px);
}

.knopf--haupt {
    background: var(--fuchs);
    border-color: var(--fuchs);
    color: #2A1A08;
    box-shadow: var(--kante);
}

.knopf--haupt:hover {
    background: var(--fuchs-hell);
    border-color: var(--fuchs-hell);
}

.knopf--haupt:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(13, 11, 31, .55);
}

.knopf__zahl {
    padding: .05em .5em;
    border-radius: 999px;
    background: rgba(13, 11, 31, .38);
    font-size: .82em;
    font-variant-numeric: tabular-nums;
}

/* ── Größenmenü ──────────────────────────────────────────────────────────── */

.menue {
    position: relative;
}

.menue > summary {
    list-style: none;
}

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

.menue > summary::after {
    content: "";
    width: .42em;
    height: .42em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.15em) rotate(45deg);
    transition: transform .18s;
}

.menue[open] > summary::after {
    transform: translateY(.1em) rotate(-135deg);
}

.menue__blatt {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    z-index: 20;
    min-width: 13rem;
    padding: .5rem;
    border: 1.5px solid rgba(157, 180, 220, .28);
    border-radius: 14px;
    background: #1A1740;
    box-shadow: 0 18px 40px rgba(6, 5, 18, .6);
    animation: blatt-auf .16s ease-out;
}

@keyframes blatt-auf {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

.menue__titel {
    margin: .2rem .55rem .45rem;
    font-family: var(--anzeige);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kreide);
}

.menue__eintrag {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: .55rem .55rem;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--papier);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.menue__eintrag:hover:not(:disabled) {
    background: rgba(45, 80, 144, .55);
}

.menue__eintrag:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.menue__eintrag[aria-current] {
    color: var(--fuchs-hell);
}

.menue__mass {
    font-family: var(--anzeige);
    font-weight: 700;
    font-stretch: 110%;
    font-size: 1.05rem;
}

.menue__note {
    font-size: .78rem;
    color: var(--kreide);
}

/* ── Spieltisch ──────────────────────────────────────────────────────────── */

.tisch {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(2.5rem, 7vw, 4rem) var(--rand) clamp(2rem, 6vw, 3.5rem);
}

.karte {
    position: relative;
    width: min(100%, 40rem);
    padding: clamp(.7rem, 2.5vw, 1.1rem);
    border-radius: var(--rund);
    background:
        linear-gradient(168deg, var(--papier), var(--papier-tief));
    box-shadow:
        0 2px 0 rgba(255, 255, 255, .5) inset,
        0 22px 50px -18px rgba(6, 5, 18, .85),
        0 0 0 1px rgba(43, 33, 57, .18);
}

.maskottchen {
    position: absolute;
    top: clamp(-3.4rem, -7vw, -2.2rem);
    right: clamp(-.5rem, 1vw, .6rem);
    z-index: 2;
    width: clamp(4.6rem, 13vw, 7rem);
    height: auto;
    border-radius: 50%;
    border: 4px solid var(--papier);
    box-shadow: 0 10px 22px -8px rgba(6, 5, 18, .8);
    transform: rotate(6deg);
    pointer-events: none;
}

.karte__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .15rem .45rem .75rem;
}

.karte__code {
    font-family: var(--anzeige);
    font-weight: 700;
    font-stretch: 125%;
    font-size: clamp(.85rem, 3vw, 1.05rem);
    letter-spacing: .3em;
    color: rgba(43, 33, 57, .62);
    cursor: help;
}

.teilen {
    margin-right: clamp(3.6rem, 12vw, 6rem);
    padding: .3em .1em;
    border: 0;
    background: none;
    color: rgba(43, 33, 57, .58);
    font-family: var(--anzeige);
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    border-bottom: 1.5px solid rgba(43, 33, 57, .28);
}

.teilen:hover {
    color: var(--tinte);
    border-bottom-color: var(--fuchs);
}

.teilen[data-fertig] {
    color: #1F7A4D;
    border-bottom-color: #1F7A4D;
}

/* ── Raster ──────────────────────────────────────────────────────────────── */

.raster {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--spalten, 4), 1fr);
    gap: 2px;
    padding: 2px;
    border-radius: 10px;
    background: rgba(43, 33, 57, .34);
    overflow: hidden;
}

.karte[data-groesse="3"] .raster { --spalten: 3; }
.karte[data-groesse="4"] .raster { --spalten: 4; }
.karte[data-groesse="5"] .raster { --spalten: 5; }

.feld {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    margin: 0;
    padding: .5em .4em;
    border: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: inherit;
    font-weight: 700;
    line-height: 1.18;
    text-align: center;
    hyphens: auto;
    hyphenate-limit-chars: 9 4 4;
    overflow-wrap: anywhere;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .16s;
}

.feld:hover {
    background: #FDF8ED;
}

.feld:active .feld__text {
    transform: scale(.94);
}

.feld__text {
    position: relative;
    z-index: 1;
    display: block;
    max-height: 100%;
    transition: transform .14s;
}

/* Schriftgrad nach Satzlänge – lange Sprüche müssen trotzdem lesbar bleiben. */
.feld--kurz   { font-size: clamp(.82rem, 3.1vw, 1.22rem); }
.feld--mittel { font-size: clamp(.7rem, 2.5vw, 1rem); }
.feld--lang   { font-size: clamp(.6rem, 2.05vw, .85rem); }
.feld--xlang  { font-size: clamp(.52rem, 1.75vw, .74rem); }

.karte[data-groesse="3"] .feld { font-size: clamp(.95rem, 4vw, 1.5rem); }
.karte[data-groesse="3"] .feld--lang,
.karte[data-groesse="3"] .feld--xlang { font-size: clamp(.7rem, 2.8vw, 1.05rem); }
.karte[data-groesse="5"] .feld--kurz   { font-size: clamp(.66rem, 2.4vw, .98rem); }
.karte[data-groesse="5"] .feld--mittel { font-size: clamp(.58rem, 2vw, .82rem); }
.karte[data-groesse="5"] .feld--lang   { font-size: clamp(.5rem, 1.7vw, .7rem); }
.karte[data-groesse="5"] .feld--xlang  { font-size: clamp(.45rem, 1.5vw, .62rem); }

/* Signatur: der Stempel. Wie ein Bingo-Dauber – die Farbe legt sich über
   das Feld, der Satz bleibt darunter lesbar. */
.feld::after {
    content: "";
    position: absolute;
    inset: 8%;
    /* Unregelmäßige Form: ein Klecks, kein Kreis. */
    border-radius: 63% 37% 56% 44% / 42% 58% 41% 59%;
    background:
        radial-gradient(76% 76% at 38% 32%,
            rgba(255, 172, 86, .9),
            rgba(233, 128, 42, .88) 56%,
            rgba(198, 90, 20, .92));
    box-shadow: inset 0 0 16px rgba(140, 58, 8, .35);
    opacity: 0;
    transform: scale(.15) rotate(var(--dreh, 0deg));
    transition: transform .34s cubic-bezier(.18, 1.5, .4, 1), opacity .16s;
}

.feld[aria-pressed="true"]::after {
    opacity: 1;
    transform: scale(1) rotate(var(--dreh, 0deg));
}

/* Beim Seitenaufbau liegen gespeicherte Stempel sofort da, ohne Animation. */
.karte--laden .feld::after {
    transition: none;
}

.feld[aria-pressed="true"] {
    background: #FBF4E7;
}

.feld[aria-pressed="true"] .feld__text {
    color: #3B1B06;
    text-shadow: 0 1px 0 rgba(255, 226, 186, .45);
}

/* Das Freifeld hat der Fuchs schon für dich gestempelt. */
.feld--frei {
    flex-direction: column;
    gap: .35em;
    cursor: default;
    background:
        radial-gradient(72% 72% at 50% 46%, rgba(242, 128, 155, .3), rgba(238, 144, 54, .22)),
        var(--papier);
}

.feld__fuchs {
    width: 62%;
    max-width: 5rem;
    height: auto;
    border-radius: 50%;
    border: 2.5px solid rgba(248, 241, 227, .9);
    box-shadow: 0 4px 10px -4px rgba(43, 33, 57, .6);
    transform: rotate(-6deg);
}

.feld--frei .feld__text {
    font-family: var(--anzeige);
    font-weight: 700;
    font-stretch: 125%;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: clamp(.5rem, 1.6vw, .68rem);
    color: rgba(43, 33, 57, .5);
}

/* Striche durch fertige Linien */
.striche {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.striche line {
    stroke: #3A1B4D;
    stroke-width: 6;
    stroke-linecap: round;
    opacity: .74;
    stroke-dasharray: var(--laenge);
    stroke-dashoffset: var(--laenge);
    animation: strich-ziehen .5s cubic-bezier(.5, 0, .2, 1) forwards;
}

@keyframes strich-ziehen {
    to {
        stroke-dashoffset: 0;
    }
}

/* ── Fuß der Karte ───────────────────────────────────────────────────────── */

.karte__fuss {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    padding: .8rem .5rem .15rem;
}

.stand {
    margin: 0;
    font-size: .9rem;
    color: rgba(43, 33, 57, .68);
}

.stand b {
    color: var(--tinte);
    font-variant-numeric: tabular-nums;
}

.stand--heiss b {
    color: #C0531A;
}

.zuruecksetzen {
    padding: .3em .1em;
    border: 0;
    background: none;
    color: rgba(43, 33, 57, .5);
    font-family: var(--anzeige);
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
    border-bottom: 1.5px solid transparent;
    white-space: nowrap;
}

.zuruecksetzen:hover {
    color: #A33B2A;
    border-bottom-color: #A33B2A;
}

/* ── Jubel ───────────────────────────────────────────────────────────────── */

.jubel {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.jubel[hidden] {
    display: none;
}

/* Dunkler Schleier, damit der Stempel auch über der Karte trägt. */
.jubel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(closest-side at 50% 50%, rgba(13, 11, 31, .58), rgba(13, 11, 31, 0) 78%);
    animation: schleier-auf .3s ease-out both;
}

@keyframes schleier-auf {
    from {
        opacity: 0;
    }
}

.jubel__konfetti {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.jubel__stempel {
    position: relative;
    margin: 0;
    font-family: var(--anzeige);
    font-weight: 800;
    font-stretch: 125%;
    font-size: clamp(3.5rem, 18vw, 9rem);
    text-transform: uppercase;
    letter-spacing: -.02em;
    color: var(--fuchs);
    -webkit-text-stroke: 4px #17142B;
    paint-order: stroke fill;
    text-shadow:
        0 7px 0 rgba(13, 11, 31, .6),
        0 26px 60px rgba(6, 5, 18, .7);
    animation: stempel-drauf .55s cubic-bezier(.2, 1.6, .35, 1) both;
}

.jubel[data-art="voll"] .jubel__stempel {
    color: var(--zunge);
}

@keyframes stempel-drauf {
    0% {
        opacity: 0;
        transform: scale(2.4) rotate(-9deg);
    }
    60% {
        opacity: 1;
        transform: scale(.94) rotate(-3deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(-3deg);
    }
}

.jubel[data-weg] .jubel__stempel {
    animation: stempel-weg .4s ease-in forwards;
}

@keyframes stempel-weg {
    to {
        opacity: 0;
        transform: scale(1.15) rotate(-3deg);
    }
}

/* ── Leerer Zustand ──────────────────────────────────────────────────────── */

.leer {
    max-width: 32rem;
    padding: clamp(2rem, 6vw, 3rem);
    border-radius: var(--rund);
    background: rgba(28, 48, 104, .38);
    border: 1.5px solid rgba(157, 180, 220, .22);
    text-align: center;
}

.leer__fuchs {
    width: 6.5rem;
    height: auto;
    border-radius: 50%;
    border: 4px solid rgba(248, 241, 227, .85);
    transform: rotate(-5deg);
}

.leer__titel {
    margin: 1.2rem 0 .5rem;
    font-family: var(--anzeige);
    font-weight: 800;
    font-stretch: 112%;
    font-size: clamp(1.4rem, 5vw, 2rem);
    line-height: 1.1;
}

.leer__text {
    margin: 0 0 1.6rem;
    color: var(--kreide);
}

/* ── Wortliste ───────────────────────────────────────────────────────────── */

.werkstatt {
    position: relative;
    z-index: 1;
    width: min(100%, 46rem);
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 3rem) var(--rand) 4rem;
}

.werkstatt__titel {
    margin: 0;
    font-family: var(--anzeige);
    font-weight: 800;
    font-stretch: 118%;
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    line-height: 1.05;
}

.werkstatt__vor {
    margin: .6rem 0 0;
    max-width: 34rem;
    color: var(--kreide);
}

.feldbeschriftung {
    display: block;
    margin-bottom: .45rem;
    font-family: var(--anzeige);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kreide);
}

.eingabe {
    width: 100%;
    padding: .8em 1em;
    border: 1.5px solid rgba(157, 180, 220, .3);
    border-radius: 12px;
    background: rgba(13, 11, 31, .45);
    color: var(--papier);
    font-family: var(--lesen);
    font-size: 1rem;
    line-height: 1.4;
}

.eingabe::placeholder {
    color: rgba(157, 180, 220, .55);
}

.eingabe:focus {
    border-color: var(--fuchs);
    outline: none;
    box-shadow: 0 0 0 3px rgba(238, 144, 54, .25);
}

.eingabe--mehrzeilig {
    resize: vertical;
    min-height: 3.6rem;
}

.sammler {
    margin: clamp(1.6rem, 5vw, 2.4rem) 0 0;
    padding: clamp(1.1rem, 3vw, 1.5rem);
    border-radius: var(--rund);
    background: rgba(28, 48, 104, .34);
    border: 1.5px solid rgba(157, 180, 220, .2);
}

.sammler__leiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .8rem;
    flex-wrap: wrap;
}

.sammler__tipp {
    margin: 0;
    font-size: .82rem;
    color: rgba(157, 180, 220, .8);
}

.meldung {
    margin: .9rem 0 0;
    padding: .7em 1em;
    border-radius: 10px;
    border-left: 4px solid var(--fuchs);
    background: rgba(238, 144, 54, .14);
    font-size: .92rem;
}

.meldung--fehler {
    border-left-color: var(--zunge);
    background: rgba(242, 128, 155, .16);
}

.liste {
    margin-top: clamp(1.8rem, 5vw, 2.6rem);
}

.liste__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}

.liste__titel {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font-family: var(--anzeige);
    font-weight: 700;
    font-stretch: 110%;
    font-size: 1.1rem;
}

.liste__zahl {
    padding: .1em .6em;
    border-radius: 999px;
    background: var(--fuchs);
    color: #2A1A08;
    font-size: .85em;
    font-variant-numeric: tabular-nums;
}

.suche {
    flex: 1 1 12rem;
    max-width: 18rem;
}

.eingabe--suche {
    padding: .55em .9em;
    font-size: .92rem;
}

.liste__inhalt {
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: var(--rund);
    overflow: hidden;
    border: 1.5px solid rgba(157, 180, 220, .18);
}

.zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .72rem 1rem;
    background: rgba(28, 48, 104, .26);
    border-bottom: 1px solid rgba(157, 180, 220, .12);
}

.zeile:last-child {
    border-bottom: 0;
}

.zeile:nth-child(even) {
    background: rgba(28, 48, 104, .38);
}

.zeile:hover {
    background: rgba(45, 80, 144, .5);
}

.zeile--neu {
    animation: zeile-rein .4s ease-out;
    box-shadow: inset 3px 0 0 var(--fuchs);
}

@keyframes zeile-rein {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.zeile--weg {
    opacity: .35;
    pointer-events: none;
}

.zeile__wort {
    overflow-wrap: anywhere;
}

.zeile__weg {
    flex: none;
    padding: .25em .7em;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: none;
    color: rgba(157, 180, 220, .75);
    font-family: var(--anzeige);
    font-weight: 600;
    font-size: .8rem;
    cursor: pointer;
}

.zeile__weg:hover {
    border-color: var(--zunge);
    color: var(--zunge);
}

.liste__leer,
.liste__nichts {
    margin: 1.2rem 0 0;
    color: var(--kreide);
    text-align: center;
}

.schloss {
    max-width: 24rem;
    margin: 3rem auto;
    text-align: center;
}

.schloss__form {
    display: grid;
    gap: .7rem;
    margin: 1.6rem 0 0;
    text-align: left;
}

.schloss__form .knopf {
    justify-content: center;
}

.schloss__note {
    margin-top: 1.6rem;
    font-size: .88rem;
    color: var(--kreide);
}

/* ── Kleine Schirme ──────────────────────────────────────────────────────── */

@media (max-width: 30rem) {
    .kopf {
        align-items: center;
    }

    .kopf__aktionen {
        padding-top: 0;
    }

    .knopf {
        padding: .55em .9em;
        font-size: .88rem;
    }

    .karte__kopf {
        padding-bottom: .6rem;
    }

    .feld {
        padding: .35em .25em;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .striche line {
        stroke-dashoffset: 0;
    }
}