/* ==========================================================================
   werwichteltwen.de – Gestaltung

   Farben und Figuren stammen aus dem Maskottchen-Entwurf „Die Raschels“.
   Grundsätze: ruhige Typografie, wenig Rahmen, viel Luft – und die Figuren
   übernehmen die Rolle, die sonst Symbole und Kästchen spielen.
   ========================================================================== */

:root {
    color-scheme: light;

    --papier:        #F4EBDC;
    --papier-hell:   #FBF6EE;
    --weiss:         #FFFDF8;
    --tinte:         #17302A;
    --tinte-70:      rgba(23, 48, 42, 0.74);
    --tinte-55:      rgba(23, 48, 42, 0.58);
    --linie:         rgba(23, 48, 42, 0.12);
    --linie-stark:   rgba(23, 48, 42, 0.24);
    --zinnober:      #CE3F2B;
    --zinnober-tief: #B1311F;
    --tanne:         #3E6B54;
    --tanne-tief:    #2C4F3D;
    --tanne-nacht:   #1E3A2F;
    --messing:       #DDA33E;
    --messing-text:  #8C601B;

    /* Schriften: Die erste Familie greift nur, wenn die Schriften selbst
       gehostet werden (config: 'webfonts' => true). Sonst die Systemschrift –
       ohne Anfrage an einen fremden Server. */
    --schrift-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --schrift-text:    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --schrift-akzent:  'Newsreader', 'Iowan Old Style', Charter, Georgia, serif;

    --radius:    10px;
    --radius-gr: 18px;
    --breite:    74rem;
    --rand:      clamp(1.25rem, 4vw, 2.5rem);
}

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

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

body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: var(--schrift-text);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
svg { height: auto; }
svg.figur, svg.signet, svg.icon { flex-shrink: 0; }
/* Figuren dürfen beim Hüpfen und Winken über ihren Rahmen hinaus */
svg.figur, svg.szene { overflow: visible; }

/* --- Typografie ---------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--schrift-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.022em;
    margin: 0 0 0.6em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 4.4vw, 3.45rem); line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.35rem); letter-spacing: -0.012em; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--tanne-tief); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--zinnober); }

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

code {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: rgba(23, 48, 42, 0.06);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

.lead { font-size: clamp(1.1rem, 2vw, 1.28rem); line-height: 1.55; color: var(--tinte-70); max-width: 38em; }
.leise { color: var(--tinte-55); }
.weich { color: var(--tinte-70); }
.zentriert { text-align: center; }
.klein { font-size: 0.9rem; }
.akzent { font-family: var(--schrift-akzent); font-style: italic; font-weight: 400; }

/* Früher als Etikett über jeder Überschrift – jetzt nur noch dezent. */
.kicker {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tanne);
    margin: 0 0 0.75rem;
}

/* --- Gerüst -------------------------------------------------------------- */

.huelle {
    width: 100%;
    max-width: var(--breite);
    margin-inline: auto;
    padding-inline: var(--rand);
}
.huelle--schmal { max-width: 52rem; }
.huelle--text   { max-width: 44rem; }

.band { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.band--eng { padding-block: clamp(2rem, 5vw, 3.25rem); }
.band--hell { background: var(--papier-hell); }
.band--tanne { background: var(--tanne-tief); color: var(--papier); }
.band--tanne a { color: #FFE2B8; }
.band--tanne .weich, .band--tanne .leise { color: rgba(244, 235, 220, 0.78); }

/* Gerissene Papierkante oben – das wiederkehrende Motiv der Loszettel */
.band--riss {
    margin-top: -14px;
    padding-top: calc(clamp(3.5rem, 8vw, 6.5rem) + 14px);
    clip-path: polygon(0 10px, 3% 3px, 7% 11px, 11% 4px, 15% 12px, 20% 5px, 24% 13px, 29% 4px, 33% 10px, 38% 2px,
        42% 11px, 47% 5px, 51% 13px, 56% 4px, 60% 11px, 65% 3px, 69% 12px, 74% 5px, 78% 13px, 83% 4px, 87% 10px,
        92% 3px, 96% 11px, 100% 5px, 100% 100%, 0 100%);
}

.abschnitt { padding-block: clamp(2.5rem, 6vw, 4rem); }
.abschnitt--eng { padding-block: clamp(1.5rem, 4vw, 2.25rem); }

.stapel > * + * { margin-top: 1rem; }

.raster-2 { display: grid; gap: 1rem 1.25rem; }
@media (min-width: 40rem) { .raster-2 { grid-template-columns: 1fr 1fr; } }

/* --- Kopf ---------------------------------------------------------------- */

.kopf { background: var(--papier); border-bottom: 1px solid var(--linie); }

.kopf__inhalt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    min-height: 4.5rem;
    flex-wrap: wrap;
    padding-block: 0.6rem;
}

.marke {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--tinte);
    text-decoration: none;
    font-family: var(--schrift-display);
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: -0.02em;
}
.marke:hover { color: var(--tinte); }
.marke__tld { color: var(--tinte-55); font-weight: 600; }

.kopf__nav { display: flex; align-items: center; gap: 0.35rem 1.4rem; flex-wrap: wrap; }
.kopf__nav a:not(.knopf) {
    color: var(--tinte-70);
    text-decoration: none;
    font-size: 0.97rem;
    font-weight: 500;
}
.kopf__nav a:not(.knopf):hover { color: var(--tinte); text-decoration: underline; }

@media (max-width: 34rem) {
    .kopf__nav { gap: 0.35rem 1rem; }
    .kopf__nav .nur-breit { display: none; }
}

/* --- Schaltflächen ------------------------------------------------------- */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.55rem 1.35rem;
    border: 1.5px solid var(--linie-stark);
    border-radius: var(--radius);
    background: transparent;
    color: var(--tinte);
    font: 600 1rem/1.2 var(--schrift-text);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.knopf:hover { background: rgba(23, 48, 42, 0.05); border-color: var(--tinte-55); color: var(--tinte); }

.knopf--haupt { background: var(--zinnober); border-color: var(--zinnober); color: #FFFFFF; }
.knopf--haupt:hover { background: var(--zinnober-tief); border-color: var(--zinnober-tief); color: #FFFFFF; }

.knopf--tanne { background: var(--tanne); border-color: var(--tanne); color: #FFFFFF; }
.knopf--tanne:hover { background: var(--tanne-tief); border-color: var(--tanne-tief); color: #FFFFFF; }

.knopf--hell { background: var(--papier); border-color: var(--papier); color: var(--tinte); }
.knopf--hell:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--tinte); }

.knopf--leise { border-color: var(--linie-stark); }

.knopf--gross { min-height: 3.4rem; padding-inline: 1.75rem; font-size: 1.05rem; }
.knopf--klein { min-height: 2.5rem; padding: 0.35rem 0.9rem; font-size: 0.92rem; }

.knopf--gefahr { color: var(--zinnober-tief); border-color: rgba(206, 63, 43, 0.4); }
.knopf--gefahr:hover { background: var(--zinnober); border-color: var(--zinnober); color: #FFFFFF; }

.knopf[disabled], .knopf[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }

.textlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--tinte);
    text-decoration: none;
    min-height: 2.75rem;
}
.textlink:hover { color: var(--zinnober); }
.textlink .icon { transition: transform 0.15s ease; }
.textlink:hover .icon { transform: translateX(3px); }

/* --- Flächen ------------------------------------------------------------- */

.karte {
    position: relative;
    background: var(--papier-hell);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gr);
    padding: clamp(1.25rem, 3.2vw, 2rem);
}
.karte + .karte { margin-top: 1.25rem; }
.karte--weiss { background: var(--weiss); }

.karte__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.karte__kopf h2, .karte__kopf h3 { margin: 0 0 0.25rem; }
.karte__kopf h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); }

.trenner { border: none; border-top: 1px solid var(--linie); margin: 1.75rem 0; }

/* Eine Figur lugt über die Oberkante einer Karte */
.lugt { position: relative; padding-top: 4.5rem; }
.lugt__figur {
    position: absolute;
    top: 0;
    right: clamp(1rem, 6vw, 3rem);
    z-index: 0;
    line-height: 0;
}
.lugt > .karte { z-index: 1; }
.lugt--links .lugt__figur { right: auto; left: clamp(1rem, 6vw, 3rem); }

/* Bühne: helle Fläche, auf deren Unterkante eine Figur steht und oben herausragt */
.buehne {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 13rem;
    padding: 0 1rem 1.25rem;
    background: var(--papier-hell);
    border-radius: 28px;
}
.buehne .figur, .buehne .szene { position: relative; margin-top: -3rem; }

/* Figur mit Sprechblase */
.sagt { display: flex; align-items: flex-end; gap: 0.9rem; }
.sagt__figur { line-height: 0; }
.sagt__blase {
    position: relative;
    margin: 0 0 1.5rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 16px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    line-height: 1.45;
    max-width: 18rem;
}
.sagt__blase::before {
    content: "";
    position: absolute;
    left: -7px;
    bottom: 16px;
    width: 12px;
    height: 12px;
    background: var(--weiss);
    border-left: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
    transform: rotate(45deg);
}
.band--tanne .sagt__blase { color: var(--tinte); }

/* --- Formulare ----------------------------------------------------------- */

.feld { margin-bottom: 1.25rem; }
.feld:last-child { margin-bottom: 0; }

.feld__label, .label {
    display: block;
    font-weight: 600;
    font-size: 0.97rem;
    margin-bottom: 0.4rem;
}
.feld__label .leise { font-weight: 400; }

.feld__hinweis { display: block; font-size: 0.88rem; color: var(--tinte-55); margin-top: 0.4rem; line-height: 1.45; }
.feld__fehler { display: block; margin-top: 0.4rem; font-size: 0.9rem; font-weight: 500; color: var(--zinnober-tief); }

input[type="text"], input[type="email"], input[type="url"], input[type="date"],
input[type="search"], textarea, select {
    width: 100%;
    min-height: 3rem;
    padding: 0.65rem 0.85rem;
    font: 400 1rem/1.4 var(--schrift-text);
    color: var(--tinte);
    background: var(--weiss);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea { min-height: 7rem; line-height: 1.55; resize: vertical; }
input::placeholder, textarea::placeholder { color: rgba(23, 48, 42, 0.42); }

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--tanne);
    box-shadow: 0 0 0 3px rgba(62, 107, 84, 0.18);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--zinnober); }

.kasten-frage {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius);
    background: var(--weiss);
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.kasten-frage:hover { border-color: var(--tanne); }
.kasten-frage input[type="checkbox"] {
    width: 1.25rem; height: 1.25rem;
    margin: 0.15rem 0 0;
    flex: 0 0 auto;
    accent-color: var(--tanne);
}
.kasten-frage span { font-size: 0.97rem; }

.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Hinweis auf personenbezogene Daten */
.personenbezogen {
    background: rgba(221, 163, 62, 0.09);
    border-radius: 14px;
    padding: 1rem 1.1rem 1.1rem;
}
.personenbezogen__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--messing-text);
    margin-bottom: 0.65rem;
}

/* --- Rückmeldungen ------------------------------------------------------- */

.hinweis {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    background: var(--papier-hell);
    border: 1px solid var(--linie);
    margin-bottom: 1rem;
    font-size: 0.97rem;
}
.hinweis p { margin: 0; }
.hinweis__zeichen { flex: 0 0 auto; line-height: 0; padding-top: 0.1rem; }
.hinweis--erfolg  { background: #EAF3EC; border-color: rgba(62, 107, 84, 0.3); }
.hinweis--erfolg .hinweis__zeichen { color: var(--tanne); }
.hinweis--fehler  { background: #FBECE8; border-color: rgba(206, 63, 43, 0.3); }
.hinweis--fehler .hinweis__zeichen { color: var(--zinnober); }
.hinweis--warnung { background: #FAF1DE; border-color: rgba(221, 163, 62, 0.45); }
.hinweis--warnung .hinweis__zeichen { color: var(--messing-text); }

.marke-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}
.marke-chip--fertig { color: var(--tanne-tief); background: rgba(62, 107, 84, 0.13); }
.marke-chip--offen  { color: var(--messing-text); background: rgba(221, 163, 62, 0.18); }
.marke-chip--wartet { color: var(--tinte-55); background: rgba(23, 48, 42, 0.07); }

/* --- Kopfbereich der Unterseiten ----------------------------------------- */

.seitenkopf {
    display: grid;
    gap: 1.5rem 3rem;
    align-items: end;
    padding-block: clamp(2rem, 5vw, 3.5rem) clamp(0.25rem, 1.5vw, 1rem);
}
.seitenkopf h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); margin-bottom: 0.4em; }
.seitenkopf__figur { display: none; line-height: 0; }
@media (min-width: 48rem) {
    .seitenkopf { grid-template-columns: 1fr auto; }
    .seitenkopf__figur { display: block; }
}

/* Formularseiten: Formular links, Figur mit Tipps rechts */
.mit-seite { display: grid; gap: 2rem 3rem; align-items: start; }
@media (min-width: 60rem) {
    .mit-seite { grid-template-columns: minmax(0, 1fr) 17rem; }
    .mit-seite__rand { position: sticky; top: 2rem; }
}
.mit-seite__rand .sagt { flex-direction: column; align-items: flex-start; }
.mit-seite__rand .sagt__blase { margin: 0; max-width: none; }
.mit-seite__rand .sagt__blase::before {
    left: 2.2rem; bottom: auto; top: -7px;
    border-left: 1px solid var(--linie); border-bottom: none; border-top: 1px solid var(--linie);
}
@media (max-width: 59.99rem) {
    .mit-seite__rand { order: -1; }
    .mit-seite__rand .sagt { flex-direction: row; align-items: flex-end; }
    .mit-seite__rand .sagt .figur { height: 96px; width: auto; }
    .mit-seite__rand .sagt__blase { margin-bottom: 1rem; }
    .mit-seite__rand .sagt__blase::before { left: -7px; top: auto; bottom: 16px; border-top: none; border-bottom: 1px solid var(--linie); }
}

/* ==========================================================================
   Startseite
   ========================================================================== */

.held {
    display: grid;
    gap: 2rem 3rem;
    align-items: center;
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
}
@media (min-width: 58rem) {
    .held { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
}
.held h1 { margin-bottom: 0.45em; }
.held__aktionen { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; margin-top: 2rem; }
.held__bild { margin-inline: -0.5rem; }
.szene--automat { display: block; width: 100%; max-width: 640px; margin-inline: auto; overflow: visible; }

.fakten {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    font-size: 0.93rem;
    color: var(--tinte-70);
}
.fakten li { display: inline-flex; align-items: center; gap: 0.4rem; }
.fakten .icon { color: var(--tanne); }

/* So läuft es ab */
.schritte {
    list-style: none;
    padding: 0;
    margin: 3rem 0 0;
    display: grid;
    gap: 2.5rem 2rem;
}
@media (min-width: 36rem) { .schritte { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .schritte { grid-template-columns: repeat(4, 1fr); } }

.schritt__bild {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 8.25rem;
    background: var(--papier);
    border-radius: 22px 22px 0 0;
    padding-bottom: 0.75rem;
    overflow: visible;
}
.schritt__bild .figur { position: relative; }
.schritt__text {
    position: relative;
    border-top: 2px dashed var(--linie-stark);
    padding-top: 1.4rem;
}
.schritt__nr {
    position: absolute;
    top: -1.2rem;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--papier-hell);
    border: 2px solid var(--zinnober);
    color: var(--zinnober);
    font-family: var(--schrift-display);
    font-weight: 700;
    font-size: 1.05rem;
}
.schritt h3 { margin: 0.4rem 0 0.35rem; }
.schritt p { color: var(--tinte-70); font-size: 0.98rem; margin: 0; }

/* Geheim bleibt geheim */
.geheim { display: grid; gap: 2rem 4rem; align-items: center; }
@media (min-width: 52rem) { .geheim { grid-template-columns: auto 1fr; } }
.geheim__figur { display: flex; align-items: flex-end; gap: 0.5rem; justify-content: center; }
.geheim__figur .sagt__blase {
    font-family: var(--schrift-akzent);
    font-style: italic;
    font-size: 1.5rem;
    padding: 0.4rem 1.1rem;
    margin-bottom: 7rem;
}
.geheim__punkte {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 40rem) { .geheim__punkte { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
.geheim__punkte li { border-top: 1px solid rgba(244, 235, 220, 0.25); padding-top: 1rem; }
.geheim__punkte strong { display: block; font-family: var(--schrift-display); font-size: 1.05rem; margin-bottom: 0.3rem; color: #FFFFFF; }

/* Merkmale im Wechsel links/rechts */
.merkmale { display: grid; gap: clamp(3.5rem, 8vw, 6rem); margin-top: clamp(2.5rem, 6vw, 4rem); }
.merkmal { display: grid; gap: 2rem 4rem; align-items: center; }
@media (min-width: 52rem) {
    .merkmal { grid-template-columns: 1fr 1fr; }
    .merkmal--gespiegelt .merkmal__bild { order: 2; }
}
.merkmal__text { max-width: 30rem; }
.merkmal__text p { color: var(--tinte-70); }
.merkmal .buehne { min-height: 10.5rem; margin-top: 3.5rem; }

.beispiel-regel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.85rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 999px;
    font-size: 0.92rem;
}
.beispiel-regel s { text-decoration-color: var(--zinnober); text-decoration-thickness: 2px; color: var(--tinte-55); }

.beispiel-liste { list-style: none; padding: 0; margin: 1rem 0 0; counter-reset: bsp; display: grid; gap: 0.4rem; }
.beispiel-liste li {
    counter-increment: bsp;
    display: flex; align-items: center; gap: 0.7rem;
    background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px;
    padding: 0.5rem 0.8rem; font-size: 0.95rem;
}
.beispiel-liste li::before {
    content: counter(bsp);
    display: grid; place-items: center;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--zinnober); color: #FFFFFF; font-weight: 700; font-size: 0.85rem;
}

/* Abschluss */
.abschluss { display: grid; gap: 1.5rem 3rem; align-items: center; }
@media (min-width: 48rem) { .abschluss { grid-template-columns: 1fr auto; } }
.abschluss__figuren { display: flex; align-items: flex-end; gap: 0.75rem; justify-content: center; line-height: 0; }

/* ==========================================================================
   Verwaltung und Wunschseite
   ========================================================================== */

.wichtel-liste { list-style: none; margin: 0; padding: 0; }
.wichtel-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--linie);
}
.wichtel-zeile:first-child { padding-top: 0.25rem; }
.wichtel-zeile:last-child { border-bottom: none; padding-bottom: 0.25rem; }
.wichtel-zeile__wer { flex: 1 1 14rem; min-width: 0; }
.wichtel-zeile__name { font-weight: 600; font-size: 1.02rem; }
.wichtel-zeile__mail { font-size: 0.88rem; color: var(--tinte-55); word-break: break-all; }
.wichtel-zeile__status, .wichtel-zeile__tun { flex: 0 0 auto; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

.fortschritt {
    display: flex;
    gap: 0.4rem 1.5rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--tinte-70);
    font-size: 0.97rem;
}
.fortschritt strong { color: var(--tinte); font-family: var(--schrift-display); font-size: 1.15rem; margin-right: 0.2rem; }

.leer {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    padding: 0.5rem 0 0;
    color: var(--tinte-70);
}
.leer .figur { flex: 0 0 auto; }
.leer p { margin: 0 0 0.75rem; }

.wunsch-zeile {
    display: grid;
    gap: 0.6rem;
    padding: 0.9rem;
    border: 1px solid var(--linie);
    border-radius: 14px;
    background: var(--weiss);
    margin-bottom: 0.75rem;
}
.wunsch-zeile__felder { display: grid; gap: 0.5rem; min-width: 0; }
@media (min-width: 46rem) {
    .wunsch-zeile { grid-template-columns: 2.5rem 1fr auto; align-items: start; }
}
.wunsch-zeile__rang {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-top: 0.35rem;
    border-radius: 50%;
    border: 2px solid var(--zinnober);
    color: var(--zinnober);
    font-family: var(--schrift-display);
    font-weight: 700;
}
.wunsch-zeile__knoepfe { display: flex; gap: 0.35rem; align-items: center; }

.wunsch-anzeige { list-style: none; margin: 0; padding: 0; counter-reset: wunsch; }
.wunsch-anzeige li {
    counter-increment: wunsch;
    display: flex;
    gap: 0.9rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(244, 235, 220, 0.2);
}
.wunsch-anzeige li:last-child { border-bottom: none; }
.wunsch-anzeige li::before {
    content: counter(wunsch);
    flex: 0 0 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--zinnober);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.9rem;
    display: grid;
    place-items: center;
}
.wunsch-anzeige__titel { font-weight: 600; }
.wunsch-anzeige__notiz { font-size: 0.93rem; }

.provision {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--messing-text);
    background: rgba(221, 163, 62, 0.16);
    border-radius: 999px;
    padding: 0.08rem 0.5rem;
    vertical-align: 0.1em;
    white-space: nowrap;
}
.provision-hinweis {
    font-size: 0.86rem;
    color: var(--tinte-55);
    border-top: 1px solid var(--linie);
    padding-top: 0.85rem;
    margin-top: 1.25rem;
}

/* Das Ergebnis: der gezogene Wichtel */
.ergebnis {
    position: relative;
    background: var(--tanne-tief);
    color: var(--papier);
    border-radius: 24px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    overflow: hidden;
}
.ergebnis h2, .ergebnis h3 { color: #FFFFFF; }
.ergebnis a { color: #FFE2B8; }
.ergebnis .weich, .ergebnis .leise { color: rgba(244, 235, 220, 0.78); }
.ergebnis__kopf { display: grid; gap: 1.5rem 2.5rem; align-items: center; }
@media (min-width: 44rem) { .ergebnis__kopf { grid-template-columns: 1fr auto; } }

.los-karte {
    display: inline-block;
    position: relative;
    margin: 0.5rem 0 0.25rem;
    padding: 0.9rem 1.6rem 1.1rem;
    background: var(--papier-hell);
    color: var(--tinte);
    transform: rotate(-2deg);
    border-radius: 4px;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45);
}
.los-karte__name {
    display: block;
    font-family: var(--schrift-akzent);
    font-style: italic;
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1.1;
}
.los-karte::after {
    content: "";
    position: absolute;
    right: -0.9rem;
    top: -0.9rem;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 3px solid var(--zinnober);
    opacity: 0.8;
    transform: rotate(12deg);
}
.ergebnis__figur { line-height: 0; display: flex; justify-content: center; }

.lieferung {
    margin-top: 1.75rem;
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.14);
    display: grid;
    gap: 1rem 1.5rem;
    align-items: center;
}
@media (min-width: 40rem) { .lieferung { grid-template-columns: auto 1fr; } }
.lieferung address { font-style: normal; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.95rem; }

details.aufklapp {
    border: 1px solid var(--linie);
    border-radius: 12px;
    background: var(--papier-hell);
    padding: 0.25rem 1rem;
}
details.aufklapp + details.aufklapp { margin-top: 0.75rem; }
details.aufklapp > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.65rem 0;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    list-style-position: inside;
}
details.aufklapp[open] > summary { border-bottom: 1px solid var(--linie); margin-bottom: 1rem; }
details.aufklapp[open] { padding-bottom: 1rem; }
details.aufklapp--klein { padding: 0 0.6rem; background: transparent; }
details.aufklapp--klein > summary { font-size: 0.9rem; min-height: 2.5rem; padding: 0.35rem 0; }

.kopier-feld { display: flex; gap: 0.5rem; align-items: stretch; flex-wrap: wrap; }
.kopier-feld input { flex: 1 1 16rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; }

table.tabelle { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 1rem 0 1.5rem; }
table.tabelle th, table.tabelle td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.tabelle th { font-weight: 600; font-size: 0.9rem; }
.tabelle-huelle { overflow-x: auto; }
/* Breite Übersichten lieber waagerecht scrollen als Wort für Wort umbrechen */
table.tabelle--breit { min-width: 44rem; }
table.tabelle--breit td:first-child { font-weight: 600; }

/* Textseiten (Datenschutz, Impressum, KI) */
.textseite h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-top: 2.5rem; }
.textseite h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.textseite ul { padding-left: 1.2rem; }
.textseite li { margin-bottom: 0.35rem; }

/* ==========================================================================
   Fuß
   ========================================================================== */

.fuss {
    position: relative;
    margin-top: clamp(6rem, 12vw, 9rem);
    background: var(--tanne-nacht);
    color: rgba(244, 235, 220, 0.82);
    font-size: 0.94rem;
}
.fuss__familie {
    position: absolute;
    left: 50%;
    top: 0;
    width: min(92vw, 30rem);
    transform: translate(-50%, -97%);
    line-height: 0;
    pointer-events: none;
}
.fuss__familie .szene { width: 100%; display: block; overflow: visible; }

.fuss__inhalt { padding-block: clamp(4.5rem, 9vw, 5.5rem) 2rem; }
.fuss__raster { display: grid; gap: 2rem; }
@media (min-width: 40rem) { .fuss__raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .fuss__raster { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.fuss .marke { color: #FFFFFF; }
.fuss .marke__tld { color: rgba(244, 235, 220, 0.6); }
.fuss h2 {
    font-family: var(--schrift-text);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    color: rgba(244, 235, 220, 0.55);
    margin: 0 0 0.75rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.fuss a { color: rgba(244, 235, 220, 0.9); text-decoration: none; }
.fuss a:hover { color: #FFFFFF; text-decoration: underline; }

.fuss__unten {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(244, 235, 220, 0.14);
    display: grid;
    gap: 0.75rem;
    font-size: 0.86rem;
    color: rgba(244, 235, 220, 0.62);
}
.fuss__unten p { margin: 0; max-width: 60rem; }
.fuss .provision { background: rgba(221, 163, 62, 0.22); color: #F2C77A; }
.fuss .hinweis { color: var(--tinte); }

/* ==========================================================================
   Bewegung – die Raschels leben

   Alles hier ist Zugabe. Die beweglichen Teile sind in templates/figuren/
   als Gruppen markiert (fig-auge, fig-bommel, fig-stempel …). Jede Figur
   steckt außerdem in .fig-sprung (für Hüpfer) und .fig-koerper (fürs Atmen),
   ihr Schatten bleibt als .fig-schatten am Boden.
   Mit „Bewegung reduzieren“ im Betriebssystem steht alles still.
   ========================================================================== */

.fig-sprung, .fig-koerper { transform-box: fill-box; transform-origin: 50% 100%; }
.fig-schatten             { transform-box: fill-box; transform-origin: center; }
.szene .fig               { transform-box: fill-box; transform-origin: 50% 100%; }

/* --- Grundhaltung: atmen, blinzeln, Bommel schwingt ------------------------ */

.figur--opa .fig-koerper,       .fig--opa .fig-koerper       { animation: atmen 4.6s ease-in-out infinite; }
.figur--zetti .fig-koerper,     .fig--zetti .fig-koerper     { animation: atmen 4s 0.7s ease-in-out infinite; }
.figur--knick .fig-koerper,     .fig--knick .fig-koerper     { animation: atmen 3.8s 1.3s ease-in-out infinite; }
.figur--schnipsel .fig-koerper, .fig--schnipsel .fig-koerper { animation: atmen 3s 0.4s ease-in-out infinite; }
.figur--klecks .fig-koerper,    .fig--klecks .fig-koerper    { animation: blubbern 3.2s ease-in-out infinite; }
.figur--los .fig-koerper  { transform-origin: center; animation: schweben 3.4s ease-in-out infinite; }
.figur--kopf .fig-koerper { transform-origin: 50% 85%; animation: nicken 5.5s ease-in-out infinite; }
.figur--zetti-hoppla .fig-koerper { animation: zittern 1.8s 0.5s infinite; }
.figur--zetti-schlaf .fig-koerper { animation: atmen-tief 3.6s ease-in-out infinite; }

.fig-auge { transform-box: fill-box; transform-origin: center; animation: blinzeln 5.5s 2s infinite; }
.figur--opa .fig-auge,    .fig--opa .fig-auge    { animation-duration: 6.2s; animation-delay: 1.2s; }
.figur--knick .fig-auge,  .fig--knick .fig-auge  { animation-duration: 4.9s; animation-delay: 2.7s; }
.figur--klecks .fig-auge, .fig--klecks .fig-auge { animation-duration: 7.2s; animation-delay: 3.4s; }
.figur--kopf .fig-auge { animation-duration: 4.6s; animation-delay: 0.9s; }

/* Der Bommel pendelt um einen Punkt links von ihm – dort sitzt die Mützenspitze. */
.fig-bommel { transform-box: fill-box; transform-origin: -60% 60%; animation: bommeln 4.2s ease-in-out infinite; }
.figur--zetti .fig-bommel,     .fig--zetti .fig-bommel     { animation-duration: 3.6s; animation-delay: 0.8s; }
.figur--schnipsel .fig-bommel, .fig--schnipsel .fig-bommel { animation-duration: 2.8s; }
.figur--kopf .fig-bommel { animation-duration: 3.4s; animation-delay: 0.3s; }

/* --- Was jede Figur in der Hand hat --------------------------------------- */

/* Opa stempelt, Zetti kritzelt, Knicks Kranich schwebt, Schnipsel winkt */
.fig-stempel { transform-box: fill-box; transform-origin: 50% 100%; animation: stempeln 6.5s 1.5s infinite; }
.fig-stift   { transform-box: fill-box; transform-origin: 15% 90%; animation: kritzeln 4.2s 0.6s infinite; }
.fig-kranich { transform-box: fill-box; transform-origin: 30% 90%; animation: kranich 3.4s ease-in-out infinite; }
.fig-winken  { transform-box: fill-box; transform-origin: 100% 100%; animation: winken 5s 0.4s ease-in-out infinite; }
.fig-tropfen { animation: tropfen 1.3s ease-in-out infinite alternate; }

/* Zettis Köpfe */
.fig-funkeln path { transform-box: fill-box; transform-origin: center; animation: funkeln 2.4s ease-in-out infinite; }
.fig-funkeln path:nth-child(2) { animation-delay: 0.8s; }
.fig-funkeln path:nth-child(3) { animation-delay: 1.6s; }
.fig-denken circle { animation: denken 3.2s ease-in-out infinite; }
.fig-denken circle:nth-child(2) { animation-delay: 0.3s; }
.fig-denken circle:nth-child(3) { animation-delay: 0.6s; }
.fig-schreck { transform-box: fill-box; transform-origin: center; animation: schreck 1.8s 0.5s infinite; }
.fig-zzz { animation: schnarchen 3.6s ease-in-out infinite; }

/* Das Päckchen ruckelt ab und zu; in der Szene schiebt Klecks es an */
.figur--paket .fig-sprung { animation: wackeln 5s 1s infinite; }
.szene--paket .fig--paket .fig-sprung { animation: schieben 3.6s ease-in-out infinite; }
.szene--paket .fig--klecks { animation: schieben 3.6s ease-in-out infinite; }

/* --- Der Wichtelautomat: ein Durchgang dauert zehn Sekunden ----------------
   Los kommt heraus → Knick nimmt es → Kuppel mischt, Kurbel dreht,
   Lämpchen blinken, Schnipsel und Klecks fiebern mit → nächstes Los. */

.szene--automat .fig-los    { transform-box: fill-box; transform-origin: center; animation: los-zyklus 10s 0.4s infinite both; }
.szene--automat .fig-lose   { transform-box: fill-box; transform-origin: center; animation: lose-mischen 10s 0.4s infinite; }
.szene--automat .fig-kurbel { transform-box: fill-box; transform-origin: 0 0; animation: kurbeln 10s 0.4s infinite; }
.szene--automat .fig-lampen circle { transform-box: fill-box; transform-origin: center; animation: lampe 10s 0.4s infinite; }
.szene--automat .fig-lampen circle:nth-child(2) { animation-delay: 0.65s; }
.szene--automat .fig-lampen circle:nth-child(3) { animation-delay: 0.9s; }
.szene--automat .fig--knick { animation: los-fangen 10s 0.4s infinite; }
.szene--automat .fig--opa   { animation: mitkurbeln 10s 0.4s infinite; }
.szene--automat .fig--schnipsel .fig-sprung,
.szene--automat .fig--klecks .fig-sprung { animation: mitfiebern 10s 0.4s infinite; }
.szene--automat .fig--klecks .fig-sprung { animation-delay: 0.6s; }
.szene .fig-wippen { animation: wippen 4s ease-in-out infinite; }

/* --- Familie im Fuß: ab und zu eine Welle von links nach rechts ------------ */

.szene--familie .fig-sprung { animation: welle 9s 2s infinite; }
.szene--familie .fig:nth-child(2) .fig-sprung { animation-delay: 2.12s; }
.szene--familie .fig:nth-child(3) .fig-sprung { animation-delay: 2.24s; }
.szene--familie .fig:nth-child(4) .fig-sprung { animation-delay: 2.36s; }
.szene--familie .fig:nth-child(5) .fig-sprung { animation-delay: 2.48s; }

/* --- Auftritte beim Scrollen (Klassen setzt app.js) ------------------------ */

.wartet { opacity: 0; }
.tritt-auf { animation: auftritt-hoch 0.7s var(--verzug, 0s) cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.tritt-auf.auftritt--hopser { animation-name: auftritt-hopser; animation-duration: 0.8s; }
.tritt-auf.auftritt--lugen  { animation-name: auftritt-lugen; animation-duration: 0.9s; }
.tritt-auf.auftritt--blase  { transform-origin: 0 100%; animation-name: auftritt-blase; animation-duration: 0.55s; }

/* Die Familie kommt einzeln */
.szene--familie.wartet { opacity: 1; }
.szene--familie.wartet .fig { opacity: 0; }
.szene--familie.tritt-auf { animation: none; }
.szene--familie.tritt-auf .fig { animation: auftritt-figur 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.szene--familie.tritt-auf .fig:nth-child(2) { animation-delay: 0.08s; }
.szene--familie.tritt-auf .fig:nth-child(3) { animation-delay: 0.16s; }
.szene--familie.tritt-auf .fig:nth-child(4) { animation-delay: 0.24s; }
.szene--familie.tritt-auf .fig:nth-child(5) { animation-delay: 0.32s; }

/* --- Antippen oder mit der Maus berühren: ein Hüpfer ----------------------- */

svg.figur.huepft .fig-sprung, .szene .fig.huepft .fig-sprung { animation: huepfer 0.7s ease-out; }
svg.figur.huepft .fig-schatten, .szene .fig.huepft .fig-schatten { animation: schatten-huepfer 0.7s ease-out; }

@media (hover: hover) {
    .marke:hover .signet { animation: signet-wackeln 0.6s ease-in-out; }
}

/* Außerhalb des Bildschirms anhalten (setzt app.js) */
.ruht, .ruht * { animation-play-state: paused !important; }

/* --- Abläufe ---------------------------------------------------------------- */

@keyframes atmen {
    0%, 100% { transform: none; }
    50%      { transform: scale(0.994, 1.014); }
}
@keyframes atmen-tief {
    0%, 100% { transform: none; }
    50%      { transform: scale(1.012, 1.03); }
}
@keyframes blubbern {
    0%, 100% { transform: none; }
    50%      { transform: scale(1.04, 0.95); }
}
@keyframes nicken {
    0%, 100% { transform: none; }
    30%      { transform: rotate(-3deg); }
    65%      { transform: rotate(2deg); }
}
@keyframes schweben {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: translateY(-4px) rotate(4deg); }
}
@keyframes zittern {
    0%, 50%, 100% { transform: none; }
    6%  { transform: translateX(-2px) rotate(-1deg); }
    12% { transform: translateX(2px) rotate(1deg); }
    18% { transform: translateX(-1px); }
    24% { transform: none; }
}
@keyframes blinzeln {
    0%, 94%, 100% { transform: scaleY(1); }
    97%           { transform: scaleY(0.1); }
}
@keyframes bommeln {
    0%, 100% { transform: none; }
    25%      { transform: rotate(10deg); }
    55%      { transform: rotate(-6deg); }
    80%      { transform: rotate(3deg); }
}
@keyframes stempeln {
    0%, 72%, 100% { transform: none; }
    80% { transform: translateY(-16px) rotate(-10deg); animation-timing-function: cubic-bezier(0.7, 0, 1, 0.6); }
    85% { transform: translateY(3px) scale(1.06, 0.9); }
    90% { transform: none; }
}
@keyframes kritzeln {
    0%, 55%, 100% { transform: none; }
    60% { transform: rotate(-12deg); }
    65% { transform: rotate(4deg); }
    70% { transform: rotate(-10deg); }
    75% { transform: rotate(5deg); }
    80% { transform: rotate(-6deg); }
    85% { transform: none; }
}
@keyframes kranich {
    0%, 100% { transform: none; }
    50%      { transform: translate(3px, -8px) rotate(-7deg); }
}
/* Nach außen winken – nach innen verschwände die Hand hinter der Mütze */
@keyframes winken {
    0%, 45%, 100% { transform: none; }
    52% { transform: rotate(-18deg); }
    60% { transform: rotate(4deg); }
    68% { transform: rotate(-18deg); }
    76% { transform: rotate(4deg); }
    84% { transform: none; }
}
@keyframes tropfen {
    from { transform: none; }
    to   { transform: translate(3px, -5px); }
}
@keyframes funkeln {
    0%, 100% { transform: none; }
    50%      { transform: scale(0.45) rotate(45deg); fill-opacity: 0.5; }
}
@keyframes denken {
    0%, 100% { fill-opacity: 0.15; transform: none; }
    40%, 70% { fill-opacity: 1; transform: translateY(-3px); }
}
@keyframes schreck {
    0%, 50%, 100% { transform: none; }
    8%  { transform: scale(1.08); }
    16% { transform: scale(0.97); }
    24% { transform: scale(1.05); }
    32% { transform: none; }
}
@keyframes schnarchen {
    0%   { transform: translate(-6px, 10px); opacity: 0; }
    30%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { transform: translate(8px, -12px); opacity: 0; }
}
@keyframes wackeln {
    0%, 78%, 100% { transform: none; }
    83% { transform: rotate(-5deg); }
    88% { transform: rotate(4deg); }
    93% { transform: rotate(-2deg); }
}
@keyframes schieben {
    0%, 20%, 80%, 100% { transform: none; }
    45%, 60%           { transform: translateX(10px); }
}
@keyframes signet-wackeln {
    0%, 100% { transform: none; }
    25%      { transform: rotate(-12deg); }
    60%      { transform: rotate(8deg); }
}
@keyframes wippen {
    0%, 100% { transform: rotate(-2deg); }
    50%      { transform: rotate(2deg); }
}

@keyframes los-zyklus {
    0%      { transform: translate(14px, -26px); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
    9%, 56% { transform: none; opacity: 1; animation-timing-function: ease-in; }
    64%     { transform: translate(-46px, 8px) rotate(-10deg); opacity: 0; }
    100%    { transform: translate(14px, -26px); opacity: 0; }
}
@keyframes lose-mischen {
    0%, 66%, 88%, 100% { transform: none; }
    70% { transform: translate(-3px, -4px) rotate(-4deg); }
    74% { transform: translate(3px, -2px) rotate(4deg); }
    78% { transform: translate(-2px, -5px) rotate(-3deg); }
    82% { transform: translate(2px, -2px) rotate(3deg); }
    86% { transform: rotate(-1deg); }
}
@keyframes kurbeln {
    0%, 64%   { transform: rotate(0); animation-timing-function: ease-in-out; }
    88%, 100% { transform: rotate(720deg); }
}
@keyframes lampe {
    0%, 70%, 77%, 84%, 100% { transform: none; }
    73%, 80%                { transform: scale(1.7); }
}
@keyframes los-fangen {
    0%, 58%, 72%, 100% { transform: none; }
    63% { transform: translateY(-5%) rotate(2deg); }
    67% { transform: scale(1.03, 0.96); }
}
@keyframes mitkurbeln {
    0%, 64%, 90%, 100% { transform: none; }
    70% { transform: rotate(-3deg); }
    76% { transform: rotate(2deg); }
    82% { transform: rotate(-2deg); }
}
@keyframes mitfiebern {
    0%, 68%, 76%, 84%, 100% { transform: none; }
    72% { transform: translateY(-12%); }
    80% { transform: translateY(-9%); }
}
@keyframes welle {
    0%, 9%, 100% { transform: none; }
    2%   { transform: scale(1.04, 0.94); }
    5%   { transform: translateY(-14%) scale(0.98, 1.03); }
    7.5% { transform: scale(1.03, 0.96); }
}

@keyframes huepfer {
    0%   { transform: none; }
    14%  { transform: scale(1.05, 0.92); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
    45%  { transform: translateY(-16%) scale(0.97, 1.04); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
    72%  { transform: scale(1.05, 0.94); }
    86%  { transform: scale(0.99, 1.01); }
    100% { transform: none; }
}
@keyframes schatten-huepfer {
    0%, 100% { transform: none; }
    45%      { transform: scale(0.65); }
}

@keyframes auftritt-hoch {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
@keyframes auftritt-hopser {
    0%   { opacity: 0; transform: translateY(28px) scale(0.92); }
    55%  { opacity: 1; transform: translateY(-8px) scale(1.02); }
    78%  { transform: translateY(2px) scale(0.99); }
    100% { opacity: 1; transform: none; }
}
@keyframes auftritt-lugen {
    0%   { opacity: 0; transform: translateY(55%); }
    40%  { opacity: 1; }
    75%  { transform: translateY(-6%); }
    100% { opacity: 1; transform: none; }
}
@keyframes auftritt-blase {
    0%   { opacity: 0; transform: scale(0.6); }
    70%  { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: none; }
}
@keyframes auftritt-figur {
    0%   { opacity: 0; transform: translateY(40%); }
    60%  { opacity: 1; transform: translateY(-6%); }
    100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .wartet, .wartet .fig { opacity: 1 !important; }
}
@media print {
    .wartet, .wartet .fig { opacity: 1 !important; }
}

/* --- Kleinkram ----------------------------------------------------------- */

.nur-fuer-screenreader {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.sprungmarke {
    position: absolute; left: 0.5rem; top: -4rem; z-index: 50;
    background: var(--tinte); color: var(--papier-hell);
    padding: 0.6rem 1rem; border-radius: var(--radius);
    transition: top 0.15s ease;
}
.sprungmarke:focus { top: 0.5rem; color: var(--papier-hell); }

@media print {
    .kopf, .fuss, .knopf, .knopfreihe, .fuss__familie { display: none !important; }
    body { background: #FFFFFF; }
    .karte { border: 1px solid #999; }
    .ergebnis { background: #FFFFFF; color: #000000; }
}

/* ==========================================================================
   Ergänzungen für Verwaltung und Textseiten
   ========================================================================== */

.auslosen { display: grid; gap: 1.5rem 2.5rem; align-items: center; }
@media (min-width: 44rem) { .auslosen { grid-template-columns: minmax(10rem, 17rem) 1fr; } }
.auslosen__bild { display: flex; justify-content: center; line-height: 0; }
.auslosen__bild .szene { width: 100%; overflow: visible; }

.aufklapp--klein .stapel { padding-bottom: 0.75rem; }

.textseite { min-width: 0; }
.textseite > * { max-width: 46rem; }
.textseite h1 { font-size: clamp(2rem, 4.5vw, 3rem); }

@media (max-width: 26rem) {
    .marke { font-size: 1rem; gap: 0.5rem; }
    .marke .signet { width: 30px; height: 30px; }
    .kopf__nav .knopf--klein { padding-inline: 0.75rem; font-size: 0.88rem; }
}

/* Mehrere Wichtel auf einmal eintragen */
.neue-wichtel { display: grid; gap: 0.5rem; }
.neuer-wichtel { display: grid; gap: 0.5rem; }
.neue-wichtel__kopf { display: none; }
@media (min-width: 40rem) {
    .neuer-wichtel, .neue-wichtel__kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
    .neue-wichtel__kopf { display: grid; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.4rem; }
}
@media (max-width: 39.99rem) {
    .neuer-wichtel { padding-bottom: 0.75rem; border-bottom: 1px dashed var(--linie-stark); }
}

/* Wunschliste als reine Anzeige auf hellem Grund */
.wunsch-anzeige--hell li { border-bottom-color: var(--linie); }