@charset "UTF-8";
/* ==========================================================================
   trash.de – Designsystem
   Eigenes, framework-freies CSS. Farben, Formen und Schrift folgen dem Logo:
   Magenta #C0267E, runde Geometrie, Fredoka als Displayschrift.
   Alle Farbpaare sind gegen WCAG 2.1 AA geprueft (Text 4.5:1, Bedienelemente
   und Rahmen 3:1); die gemessenen Werte stehen an den Tokens.

   Gliederung
     01 Schrift
     02 Tokens
     03 Reset & Basis
     04 Hilfsklassen
     05 Layout (Skip-Link, Header, Main, Footer)
     06 Buttons
     07 Karten & Flaechen
     08 Formulare
     09 Meldungen & Badges
     10 Tabellen
     11 Dialog
     12 Startseite / Hero
     13 Auswahlkarten
     14 Fliesstext
     15 Bewegung, Kontrastmodus, Druck
   ========================================================================== */

/* == 01 Schrift =========================================================== */
/* Fredoka steht unter der SIL Open Font License und liegt lokal im Projekt.
   Bewusst kein Google-Fonts-CDN: so wird keine IP-Adresse an Dritte
   uebertragen (DSGVO). Variable Schrift, Gewichte 400 bis 600. */
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/fonts/fredoka/fredoka-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/fonts/fredoka/fredoka-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* == 02 Tokens ============================================================ */
:root {
    color-scheme: light;

    /* Markenfarben, laut Styleguide unveraenderlich */
    --brand-magenta: #C0267E;
    --brand-black: #141414;
    --brand-dark: #17171B;

    /* Flaechen */
    --bg: #FFFFFF;
    --bg-subtle: #FBF7F9;
    --surface: #FFFFFF;
    --surface-2: #F7F2F5;
    --surface-inset: #FBF7F9;

    /* Text: 18.4:1 bzw. 7.4:1 auf --bg */
    --text: #141414;
    --text-muted: #5E5359;

    /* Rahmen: dekorativ vs. bedienbar (3.4:1 auf --bg, WCAG 1.4.11) */
    --border: #E4D9DF;
    --border-strong: #9C8690;

    /* Primaeraktion: Weiss auf Magenta 5.5:1, Magenta auf Weiss 5.5:1 */
    --primary: #C0267E;
    --primary-hover: #9E1E68;
    --primary-ink: #FFFFFF;
    --primary-tint: #FDF2F8;
    --primary-tint-2: #F7DCEA;

    /* Status: jeweils >= 4.5:1 auf eigener Tint-Flaeche und auf --bg */
    --success: #0B6B45;
    --success-tint: #E7F5EE;
    --warning: #7A4A00;
    --warning-tint: #FDF2DC;
    --danger: #B3182B;
    --danger-tint: #FDECEE;
    --info: #1A5590;
    --info-tint: #E8F1FB;

    --focus-ring: #C0267E;

    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5359' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    /* Schrift */
    --font-display: 'Fredoka', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
        Arial, 'Noto Sans', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;

    /* Fliessende Typo-Skala. Basis bleibt 1rem, damit die Schriftgroesse des
       Browsers wirkt und der Text auf 200 % zoombar bleibt (WCAG 1.4.4). */
    --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
    --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
    --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 1.85rem);
    --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
    --step-4: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);

    /* Abstaende */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4.5rem;

    /* Radien: runde Formensprache des Geist-Icons */
    --r-xs: 0.5rem;
    --r-s: 0.75rem;
    --r-m: 1rem;
    --r-l: 1.5rem;
    --r-xl: 2rem;
    --r-full: 999px;

    --shadow-s: 0 1px 2px rgba(20, 20, 20, 0.05), 0 1px 3px rgba(192, 38, 126, 0.06);
    --shadow-m: 0 4px 12px rgba(20, 20, 20, 0.06), 0 2px 4px rgba(192, 38, 126, 0.05);
    --shadow-l: 0 18px 40px rgba(20, 20, 20, 0.1), 0 4px 12px rgba(192, 38, 126, 0.08);

    --container: 68rem;
    --container-narrow: 42rem;
    --header-h: 4.5rem;

    --logo-word: var(--brand-black);
}

/* Dunkelmodus. Wird automatisch nach Systemeinstellung gesetzt und laesst sich
   im Header uebersteuern. Magenta wird aufgehellt, sonst faellt der Kontrast
   auf dunklem Grund unter 4.5:1. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        color-scheme: dark;

        --bg: #17171B;
        --bg-subtle: #1D1D23;
        --surface: #22222A;
        --surface-2: #2A2A33;
        --surface-inset: #1A1A20;

        --text: #F3EFF1;            /* 15.7:1 */
        --text-muted: #ADA3A9;      /*  7.3:1 */

        --border: #2E2E37;
        --border-strong: #74747F;   /*  3.4:1 auf --surface */

        --primary: #F07CB8;         /*  7.1:1 auf --bg */
        --primary-hover: #F8A5CF;
        --primary-ink: #17171B;     /*  dunkle Schrift auf hellem Magenta, 7.1:1 */
        --primary-tint: #2A1622;
        --primary-tint-2: #3A1E2F;

        --success: #6BD9A8;
        --success-tint: #12251D;
        --warning: #F0BE5E;
        --warning-tint: #2A2015;
        --danger: #FF8A94;
        --danger-tint: #2B1619;
        --info: #82BDF5;
        --info-tint: #141F2B;

        --focus-ring: #F07CB8;

        --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ADA3A9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

        --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.45);
        --shadow-m: 0 4px 12px rgba(0, 0, 0, 0.5);
        --shadow-l: 0 18px 40px rgba(0, 0, 0, 0.55);

        --logo-word: #FFFFFF;
    }
}

:root[data-theme='dark'] {
    color-scheme: dark;

    --bg: #17171B;
    --bg-subtle: #1D1D23;
    --surface: #22222A;
    --surface-2: #2A2A33;
    --surface-inset: #1A1A20;

    --text: #F3EFF1;
    --text-muted: #ADA3A9;

    --border: #2E2E37;
    --border-strong: #74747F;

    --primary: #F07CB8;
    --primary-hover: #F8A5CF;
    --primary-ink: #17171B;
    --primary-tint: #2A1622;
    --primary-tint-2: #3A1E2F;

    --success: #6BD9A8;
    --success-tint: #12251D;
    --warning: #F0BE5E;
    --warning-tint: #2A2015;
    --danger: #FF8A94;
    --danger-tint: #2B1619;
    --info: #82BDF5;
    --info-tint: #141F2B;

    --focus-ring: #F07CB8;

    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ADA3A9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-m: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-l: 0 18px 40px rgba(0, 0, 0, 0.55);

    --logo-word: #FFFFFF;
}

/* == 03 Reset & Basis ===================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

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

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--text);
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p,
li { text-wrap: pretty; }

a {
    color: var(--primary);
    text-decoration-thickness: max(1px, 0.06em);
    text-underline-offset: 0.18em;
}

a:hover { color: var(--primary-hover); }

img,
svg,
video {
    display: block;
    max-width: 100%;
}

img,
video { height: auto; }

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

:target { scroll-margin-top: calc(var(--header-h) + var(--space-m)); }

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin-block: var(--space-l);
}

/* Sichtbarer Fokus auf jedem bedienbaren Element. Der Ring liegt mit Abstand
   auf der Flaeche, damit er auf hell und dunkel erkennbar bleibt
   (WCAG 2.4.7 sowie 2.4.11 Fokus nicht verdeckt). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

::selection {
    background: var(--brand-magenta);
    color: #FFFFFF;
}

/* == 04 Hilfsklassen ====================================================== */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.container {
    width: min(100% - 2 * var(--space-s), var(--container));
    margin-inline: auto;
}

.container--narrow { max-width: var(--container-narrow); }

.stack > * + * { margin-block-start: var(--flow, var(--space-s)); }

.lead {
    font-size: var(--step-1);
    color: var(--text-muted);
    max-width: 52ch;
}

.text-muted { color: var(--text-muted); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
}

.u-mt-s { margin-block-start: var(--space-s); }
.u-mt-m { margin-block-start: var(--space-m); }
.u-mt-l { margin-block-start: var(--space-l); }

code {
    padding: 0.1em 0.4em;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* Nachrichtentext aus einer E-Mail: reiner Text, Umbrueche wie geliefert. */
.mail-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    line-height: 1.7;
}

/* == 05 Layout ============================================================ */
.skip-link {
    position: absolute;
    inset-inline-start: var(--space-s);
    inset-block-start: var(--space-s);
    z-index: 100;
    transform: translateY(calc(-100% - var(--space-2xl)));
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--r-full);
    background: var(--brand-magenta);
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-l);
}

.skip-link:focus {
    transform: translateY(0);
    color: #FFFFFF;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

@supports not (backdrop-filter: blur(1px)) {
    .site-header { background: var(--bg); }
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    min-height: var(--header-h);
    position: relative;
}

.brand {
    display: inline-flex;
    align-items: center;
    border-radius: var(--r-s);
    text-decoration: none;
    flex: none;
}

.brand-logo {
    height: 1.9rem;
    width: auto;
}

.brand-logo__mark,
.brand-logo__tld { fill: var(--brand-magenta); }

.brand-logo__word { fill: var(--logo-word); }

.brand-mark {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--brand-magenta);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    margin-inline-start: auto;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: 2.75rem;
    padding-inline: var(--space-xs);
    border-radius: var(--r-full);
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
    background: var(--surface-2);
    color: var(--text);
}

.nav-link[aria-current='page'] {
    color: var(--primary);
    background: var(--primary-tint);
}

/* Die aktuelle Seite ist zusaetzlich zur Farbe durch einen Punkt markiert,
   damit sie nicht allein ueber Farbe erkennbar ist (WCAG 1.4.1). */
.nav-link[aria-current='page']::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: var(--r-full);
    background: currentColor;
}

.menu { position: relative; }

.menu__panel {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + var(--space-2xs));
    min-width: 16rem;
    padding: var(--space-3xs);
    list-style: none;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-m);
    box-shadow: var(--shadow-l);
}

.menu__panel[hidden] { display: none; }

.menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2xs) var(--space-xs);
    border: 0;
    border-radius: var(--r-s);
    background: none;
    color: var(--text);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.menu__item:hover {
    background: var(--surface-2);
    color: var(--text);
}

.menu__item .icon { color: var(--text-muted); }

.menu__separator {
    height: 1px;
    margin: var(--space-3xs) var(--space-2xs);
    background: var(--border);
}

.credits-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.1em 0.6em;
    border-radius: var(--r-full);
    background: var(--primary-tint);
    color: var(--primary);
    font-size: var(--step--1);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    background: none;
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.icon-button:hover { background: var(--surface-2); }

.nav-toggle { display: none; }

/* Das Mondsymbol erscheint im Hellmodus, die Sonne im Dunkelmodus. */
.theme-toggle__dark { display: none; }

:root[data-theme='dark'] .theme-toggle__dark { display: block; }
:root[data-theme='dark'] .theme-toggle__light { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .theme-toggle__dark { display: block; }
    :root:not([data-theme='light']) .theme-toggle__light { display: none; }
}

@media (max-width: 52rem) {
    .nav-toggle {
        display: inline-flex;
        margin-inline-start: auto;
    }

    .site-nav {
        display: none;
        position: absolute;
        inset-inline: 0;
        inset-block-start: calc(var(--header-h) - var(--space-2xs));
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3xs);
        padding: var(--space-2xs);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-l);
        box-shadow: var(--shadow-l);
        margin-inline-start: 0;
    }

    .site-nav[data-open='true'] { display: flex; }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3xs);
    }

    .nav-link { justify-content: flex-start; }

    .menu,
    .menu__panel {
        position: static;
        min-width: 0;
        border: 0;
        box-shadow: none;
        background: none;
        padding: 0;
    }

    .menu__panel { margin-block-start: var(--space-3xs); }
}

/* Ohne JavaScript gibt es keine Aufklapplogik. Dann bleiben Navigation und
   Nutzermenue dauerhaft offen, damit alle Links erreichbar sind. Die Klasse
   entfernt ein kurzes Skript im Kopf der Seite, sobald JS laeuft. */
.no-js .nav-toggle,
.no-js [data-theme-toggle],
.no-js [data-alert-dismiss],
.no-js [data-copy] {
    display: none;
}

.no-js .menu__panel[hidden] { display: block; }

@media (max-width: 52rem) {
    .no-js .site-nav {
        display: flex;
        position: static;
        box-shadow: none;
        border: 0;
        background: none;
        padding: 0;
    }
}

.site-main {
    flex: 1 0 auto;
    padding-block: var(--space-xl) var(--space-2xl);
}

.site-main:focus { outline: none; }

.page-header { margin-block-end: var(--space-l); }

.page-header__title {
    margin-block-end: var(--space-2xs);
    overflow-wrap: anywhere;
}

.section { margin-block-start: var(--space-xl); }

.section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-end: var(--space-m);
}

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-subtle);
    padding-block: var(--space-l);
    font-size: var(--step--1);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
}

.site-footer__nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-m);
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    color: var(--text);
}

.site-footer a:hover { color: var(--primary); }

.site-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--text-muted);
}

/* == 06 Buttons =========================================================== */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-height: 2.875rem;
    padding: 0.55rem var(--space-m);
    border: 1px solid transparent;
    border-radius: var(--r-full);
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, background-color 0.15s ease,
        border-color 0.15s ease, box-shadow 0.15s ease;
}

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

.button--primary {
    background: var(--primary);
    color: var(--primary-ink);
    box-shadow: var(--shadow-s);
}

.button--primary:hover {
    background: var(--primary-hover);
    color: var(--primary-ink);
    box-shadow: var(--shadow-m);
}

.button--secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
}

.button--secondary:hover {
    background: var(--surface-2);
    color: var(--text);
}

.button--ghost {
    background: none;
    color: var(--primary);
}

.button--ghost:hover { background: var(--primary-tint); }

.button--danger {
    background: none;
    border-color: var(--danger);
    color: var(--danger);
}

.button--danger:hover { background: var(--danger-tint); }

.button--small {
    min-height: 2.25rem;
    padding: 0.3rem var(--space-s);
    font-size: var(--step--1);
}

.button--block { width: 100%; }

.button[disabled],
.button[aria-disabled='true'] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

/* == 07 Karten & Flaechen ================================================= */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-s);
}

.card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding: var(--space-m) var(--space-m) 0;
}

.card__title {
    font-size: var(--step-2);
    margin: 0;
}

.card__body { padding: var(--space-m); }

.card__footer {
    padding: var(--space-s) var(--space-m) var(--space-m);
    border-top: 1px solid var(--border);
}

.panel {
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: var(--r-m);
    padding: var(--space-m);
}

.grid {
    display: grid;
    gap: var(--space-m);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-s);
    padding: var(--space-xl) var(--space-m);
    text-align: center;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-l);
    background: var(--surface-inset);
    color: var(--text-muted);
}

.empty-state .brand-mark {
    width: 3.5rem;
    height: 3.5rem;
    opacity: 0.6;
}

.definition-list {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
}

.definition-list > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    justify-content: space-between;
    padding-block-end: var(--space-xs);
    border-block-end: 1px solid var(--border);
}

.definition-list > div:last-child {
    padding-block-end: 0;
    border-block-end: 0;
}

.definition-list dt {
    color: var(--text-muted);
    margin: 0;
}

.definition-list dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* == 08 Formulare ========================================================= */
.form { max-width: 34rem; }

.form--wide { max-width: none; }

.field + .field,
.field + .button-row,
.fieldset + .button-row { margin-block-start: var(--space-m); }

.field__label {
    display: block;
    margin-block-end: var(--space-3xs);
    font-weight: 600;
}

.field__required { color: var(--danger); }

.field__hint {
    margin-block-end: var(--space-3xs);
    font-size: var(--step--1);
    color: var(--text-muted);
}

.field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3xs);
    margin-block-start: var(--space-3xs);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--danger);
}

.field__error .icon {
    width: 1.1em;
    height: 1.1em;
    margin-block-start: 0.2em;
}

.input,
.select,
.textarea {
    width: 100%;
    min-height: 2.875rem;
    padding: 0.55rem var(--space-s);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-s);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input::placeholder,
.textarea::placeholder { color: var(--text-muted); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--text-muted); }

.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-tint-2);
}

/* Fehler werden zusaetzlich zur Farbe durch den doppelten Rahmen und den
   Fehlertext unter dem Feld ausgewiesen. */
.input[aria-invalid='true'],
.select[aria-invalid='true'],
.textarea[aria-invalid='true'] {
    border-color: var(--danger);
    border-width: 2px;
}

.select {
    appearance: none;
    padding-inline-end: var(--space-xl);
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right var(--space-s) center;
    background-size: 1.1rem;
}

.input-group { display: flex; }

.input-group .input {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.input-group__suffix {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--space-s);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-inline-start: 0;
    border-start-end-radius: var(--r-s);
    border-end-end-radius: var(--r-s);
    color: var(--text-muted);
    white-space: nowrap;
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
}

.fieldset__legend {
    padding: 0;
    margin-block-end: var(--space-s);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
}

/* Fehleruebersicht am Formularanfang: nennt alle Fehler und springt per Link
   direkt zum betroffenen Feld (WCAG 3.3.1). */
.error-summary {
    padding: var(--space-m);
    border: 2px solid var(--danger);
    border-radius: var(--r-m);
    background: var(--danger-tint);
    margin-block-end: var(--space-m);
}

.error-summary__title {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--danger);
}

.error-summary ul {
    margin-block-start: var(--space-2xs);
    padding-inline-start: 1.3em;
}

.error-summary a { color: var(--danger); }

/* == 09 Meldungen & Badges ================================================ */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-s) var(--space-m);
    border: 1px solid;
    border-radius: var(--r-m);
    margin-block-end: var(--space-m);
}

.alert__icon {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    margin-block-start: 0.15rem;
}

.alert__body { flex: 1; }

.alert__title { font-weight: 700; }

.alert p { margin: 0; }

.alert--success { background: var(--success-tint); border-color: var(--success); color: var(--success); }
.alert--warning { background: var(--warning-tint); border-color: var(--warning); color: var(--warning); }
.alert--danger { background: var(--danger-tint); border-color: var(--danger); color: var(--danger); }
.alert--info { background: var(--info-tint); border-color: var(--info); color: var(--info); }

.alert__dismiss {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: -0.25rem -0.5rem -0.25rem 0;
    border: 0;
    border-radius: var(--r-full);
    background: none;
    color: inherit;
    cursor: pointer;
}

.alert__dismiss:hover { background: color-mix(in srgb, currentColor 14%, transparent); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.15em 0.7em;
    border: 1px solid;
    border-radius: var(--r-full);
    font-size: var(--step--1);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.badge .icon {
    width: 1em;
    height: 1em;
}

.badge--success { background: var(--success-tint); border-color: var(--success); color: var(--success); }
.badge--warning { background: var(--warning-tint); border-color: var(--warning); color: var(--warning); }
.badge--danger { background: var(--danger-tint); border-color: var(--danger); color: var(--danger); }
.badge--info { background: var(--info-tint); border-color: var(--info); color: var(--info); }
.badge--neutral { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-muted); }

/* == 10 Tabellen ========================================================== */
/* Der Scroll-Container ist fokussierbar und benannt, damit breite Tabellen
   auch per Tastatur gescrollt werden koennen (WCAG 2.1.1). */
.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-l);
    background: var(--surface);
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table caption {
    padding: var(--space-s) var(--space-m);
    text-align: start;
    color: var(--text-muted);
    font-size: var(--step--1);
}

.table th,
.table td {
    padding: var(--space-xs) var(--space-m);
    text-align: start;
    vertical-align: middle;
    border-block-end: 1px solid var(--border);
}

.table thead th {
    background: var(--surface-2);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.table tbody tr:last-child th,
.table tbody tr:last-child td { border-block-end: 0; }

.table tbody tr:hover { background: var(--surface-inset); }

.table__mono {
    font-family: var(--font-mono);
    font-size: 0.95em;
}

/* In der Tabelle bleiben Adressen auf einer Zeile; zu schmale Bildschirme
   scrollen den Container, statt die Adresse mitten im Wort zu brechen. */
.table th.table__mono,
.table td.table__mono { white-space: nowrap; }

.table__num { font-variant-numeric: tabular-nums; }

.table__actions {
    text-align: end;
    white-space: nowrap;
}

.table__subject {
    font-weight: 600;
    max-width: 32rem;
}

/* == 11 Dialog ============================================================ */
/* Natives <dialog>: Fokusfalle, Escape und Inertheit des Hintergrunds
   liefert der Browser, das muss nicht nachgebaut werden. */
.dialog {
    width: min(100% - 2rem, 48rem);
    max-height: min(85vh, 50rem);
    /* Der Reset weiter oben setzt alle Aussenabstaende auf 0 und nimmt dem
       nativen dialog damit seine Zentrierung. Hier wieder herstellen. */
    margin: auto;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-l);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-l);
}

/* Browser ohne <dialog>-Unterstuetzung kennen die Regel
   dialog:not([open]) { display: none } aus dem Standard-Stylesheet nicht und
   wuerden den geschlossenen Dialog als normalen Kasten anzeigen. */
.dialog:not([open]) {
    display: none;
}

/* Nur im geoeffneten Zustand umschalten: der Browser steuert display sonst
   selbst und ein fester Wert wuerde den Dialog dauerhaft sichtbar machen. */
.dialog[open] {
    display: flex;
    flex-direction: column;
}

.dialog::backdrop {
    background: rgba(20, 20, 20, 0.55);
    backdrop-filter: blur(2px);
}

.dialog__header {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: var(--space-s);
    padding: var(--space-m);
    border-block-end: 1px solid var(--border);
}

.dialog__title {
    flex: 1;
    font-size: var(--step-1);
    margin: 0;
    overflow-wrap: anywhere;
}

.dialog__meta {
    display: block;
    margin-block-start: var(--space-3xs);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 400;
    color: var(--text-muted);
}

.dialog__body {
    flex: 1;
    min-height: 0;
    padding: var(--space-m);
    overflow: auto;
    overflow-wrap: anywhere;
}

.dialog__body > * + * { margin-block-start: var(--space-s); }

.dialog__body img {
    max-width: 100%;
    height: auto;
}

/* == 12 Startseite / Hero ================================================= */
.hero {
    position: relative;
    isolation: isolate;
    padding-block: var(--space-l) var(--space-xl);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset-block-start: -35%;
    inset-inline-start: 50%;
    z-index: -1;
    width: min(70rem, 170%);
    aspect-ratio: 1;
    translate: -50% 0;
    background: radial-gradient(
        circle at center,
        color-mix(in srgb, var(--brand-magenta) 16%, transparent) 0%,
        transparent 62%
    );
}

.hero__grid {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
    .hero__grid { grid-template-columns: 1.1fr 0.9fr; }
}

.hero__title { margin-block: var(--space-s); }

.hero__title .accent { color: var(--primary); }

.hero__actions { margin-block-start: var(--space-l); }

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-l);
    margin-block-start: var(--space-l);
    padding: 0;
    list-style: none;
}

.hero__facts li {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--text-muted);
    font-size: var(--step--1);
}

.hero__facts .icon { color: var(--primary); }

.hero__art {
    display: grid;
    place-items: center;
    padding: var(--space-xl) var(--space-l);
    background: linear-gradient(
        160deg,
        var(--primary-tint) 0%,
        color-mix(in srgb, var(--brand-magenta) 14%, var(--surface)) 100%
    );
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
}

.hero__art .brand-mark {
    width: min(13rem, 70%);
    height: auto;
    filter: drop-shadow(0 12px 24px rgba(192, 38, 126, 0.25));
    animation: trashde-float 6s ease-in-out infinite;
}

@keyframes trashde-float {
    0%,
    100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.feature {
    display: grid;
    gap: var(--space-2xs);
    align-content: start;
    padding: var(--space-m);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-l);
}

.feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--r-m);
    background: var(--primary-tint);
    color: var(--primary);
}

.feature__icon .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.feature__title {
    font-size: var(--step-1);
    margin: 0;
}

.feature p {
    color: var(--text-muted);
    margin: 0;
}

.steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-m);
}

.steps > li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-s);
    align-items: start;
}

.steps > li::before {
    counter-increment: step;
    content: counter(step);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--r-full);
    background: var(--primary);
    color: var(--primary-ink);
    font-family: var(--font-display);
    font-weight: 600;
}

.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
}

.stat {
    flex: 1 1 10rem;
    padding: var(--space-s) var(--space-m);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-m);
}

.stat__value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stat__label {
    display: block;
    margin-block-start: var(--space-3xs);
    font-size: var(--step--1);
    color: var(--text-muted);
}

/* == 13 Auswahlkarten ===================================================== */
.choice-grid {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.choice {
    position: relative;
    display: block;
    padding: var(--space-m);
    padding-inline-end: var(--space-xl);
    background: var(--surface);
    border: 2px solid var(--border-strong);
    border-radius: var(--r-l);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.choice:hover { border-color: var(--primary); }

.choice__input {
    position: absolute;
    inset-block-start: var(--space-m);
    inset-inline-end: var(--space-m);
    width: 1.35rem;
    height: 1.35rem;
    accent-color: var(--primary);
    cursor: pointer;
}

.choice__amount {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 600;
    line-height: 1.1;
    color: var(--primary);
}

.choice__meta {
    display: block;
    margin-block-start: var(--space-3xs);
    color: var(--text-muted);
}

/* Die Auswahl wird durch Rahmen, Flaeche und den Radio-Punkt gezeigt, also
   nicht allein durch Farbe. */
.choice:has(.choice__input:checked) {
    border-color: var(--primary);
    background: var(--primary-tint);
    box-shadow: var(--shadow-m);
}

.choice:has(.choice__input:focus-visible) {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* == 14 Fliesstext ======================================================== */
.prose { max-width: 68ch; }

.prose > * + * { margin-block-start: var(--space-s); }

.prose h2 {
    font-size: var(--step-2);
    margin-block-start: var(--space-l);
}

.prose h3 {
    font-size: var(--step-1);
    margin-block-start: var(--space-m);
}

.prose ul,
.prose ol { padding-inline-start: 1.4em; }

.prose li + li { margin-block-start: var(--space-3xs); }

.prose dl { display: grid; gap: var(--space-2xs); }
.prose dt { font-weight: 600; }
.prose dd { margin: 0; color: var(--text-muted); }

.prose address { font-style: normal; }

/* == 15 Bewegung, Kontrastmodus, Druck ==================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Windows-Kontrastmodus: Systemfarben gewinnen, Rahmen muessen sichtbar
   bleiben, damit Flaechen und Bedienelemente unterscheidbar sind. */
@media (forced-colors: active) {
    .button,
    .card,
    .panel,
    .input,
    .select,
    .textarea,
    .table-scroll,
    .dialog,
    .choice,
    .badge,
    .alert,
    .menu__panel,
    .feature,
    .stat,
    .hero__art {
        border: 1px solid;
    }

    .nav-link[aria-current='page'] { forced-color-adjust: none; }

    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 3px solid Highlight;
    }

    .hero::before { display: none; }
}

@media print {
    .site-header,
    .site-footer,
    .skip-link,
    .button,
    .hero__art,
    .alert__dismiss { display: none !important; }

    body {
        background: #FFFFFF;
        color: #000000;
    }

    .card,
    .panel,
    .table-scroll { border: 1px solid #999999; box-shadow: none; }

    a[href^='http']::after {
        content: ' (' attr(href) ')';
        font-size: 0.85em;
    }
}