/* ==========================================================================
   abschiedszeitung.de — Design-System
   --------------------------------------------------------------------------
   Handgeschrieben, kein Framework, keine Utility-Wueste. Diese Datei ist die
   gemeinsame Basis fuer alle Seiten. Spezielles gehoert in flow.css (Ablauf),
   admin.css (Adminbereich) oder zeitung.css (Zeitungssatz im PDF).

   Ton: warm, wuerdevoll, handwerklich — aber leicht und heutig. Weiches
   Papierweiss, Kupferrot als Marke, grosse weiche Schatten mit negativem
   Spread, Pillenknoepfe, ruhige Bewegung.

   WICHTIG — Arbeitsteilung der Schriften:
     Die WEBSITE laeuft komplett serifenlos (Figtree, selbst gehostet).
     Die ZEITUNG bleibt Serifensatz. Ihr Stylesheet ist zeitung.css und wird
     hier nicht angefasst. Die Variable --serif bleibt erhalten, weil einzelne
     Zitate und die Musterzeitungs-Namen sie weiter brauchen.

   Keine externen Ressourcen. Keine Google Fonts, kein CDN, kein Tracker.
   Die Schriftdateien liegen unter assets/fonts/ im Projekt.

   Inhalt
     0  Schriften
     1  Design-Token
     2  Reset
     3  Typografie
     4  Layout und Raster
     5  Bewegung — Grundlage fuer alle Seiten
     6  Schaltflaechen
     7  Formulare
     8  Karten
     9  Hinweisboxen
    10  Tabellen
    11  Badge, Pill, Preis
    12  Stepper (3-Schritte-Ablauf)
    13  Kopfbereich
    14  Fussbereich
    15  Flash-Meldungen und Fehlerseite
    16  Hilfsklassen
    17  Bedienbarkeit und Druck
    18  Breitenstufen
   ========================================================================== */


/* ==========================================================================
   0  Schriften

   Figtree von Erik D. Kennedy — geometrisch-humanistisch, warm, mit hoher
   x-Hoehe und dadurch auch in kleinen Graden gut lesbar. Vier Schnitte als
   woff2, zusammen rund 45 KB. Lizenz: SIL Open Font License 1.1, der
   Lizenztext liegt als assets/fonts/LICENSE daneben.

   font-display: swap — der Text ist sofort da, auch wenn die Datei noch
   laedt. Der 400er-Schnitt wird im Seitenkopf vorgeladen, deshalb ist das
   Umschalten in der Praxis nicht zu sehen.
   ========================================================================== */

@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/figtree-latin-400-normal.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: "Figtree";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/figtree-latin-500-normal.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: "Figtree";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/figtree-latin-600-normal.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: "Figtree";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/figtree-latin-700-normal.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;
}


/* ==========================================================================
   1  Design-Token
   ========================================================================== */

:root {
    /* --- Papier und Tinte ------------------------------------------------
       Gemessene Kontraste (WCAG 2.1, Verhaeltnis zu 1):
         tinte        auf papier      15.07   auf weiss  15.40
         tinte-weich  auf papier       8.05   auf weiss   8.22
         muted        auf papier       4.95   auf weiss   5.05
       Alle drei erfuellen AA (4.5) auch im Fliesstext.
       --------------------------------------------------------------------- */
    --papier:        #FFFCFA;
    --papier-tief:   #FBF3EE;
    --papier-warm:   #FEF7F3;
    --weiss:         #FFFFFF;
    --tinte:         #2B2320;
    --tinte-weich:   #5A4C45;
    --muted:         #7A6C64;
    --linie:         #F2E7DF;
    --linie-zart:    #F8F1EB;
    --linie-kraeftig:#E6D5C8;
    /* Rand von Bedienelementen — Eingaben, Auswahlkarten, Sekundaerknoepfe.
       Sie sind weiss gefuellt und stehen auf hellem Papier; ihre Kante ist
       das Einzige, was sie als bedienbar ausweist. Deshalb erfuellt sie die
       3:1 aus WCAG 1.4.11 (Nicht-Text-Kontrast) statt nur huebsch zu sein:
       auf weiss 3.36, auf papier 3.29, auf papier-tief 3.07. Dekorative
       Haarlinien bleiben --linie und --linie-kraeftig. */
    --feldrand:      #9A897C;

    /* --- Marke -----------------------------------------------------------
       Das Kupferrot bleibt, wird aber heller und waermer gefuehrt.
         akzent       auf papier       4.98   auf weiss   5.09
         weiss        auf akzent       5.09
         akzent-tief  auf akzent-weich 6.64
       --------------------------------------------------------------------- */
    --akzent:        #B4502C;
    --akzent-tief:   #8F3C1F;
    --akzent-hell:   #C9633D;
    --akzent-weich:  #FDF0E8;
    --akzent-blass:  #FDF0E8;   /* Altname, von flow.css und admin.css genutzt */
    --akzent-rand:   #F2D9C9;
    --petrol:        #2C5457;
    --petrol-blass:  #E7EFEF;
    --petrol-rand:   #CFE0E0;
    --gold:          #C79A5E;

    /* --- Statusfarben ----------------------------------------------------
         erfolg auf erfolg-blass  5.60
         warn   auf warn-blass    5.92
         fehler auf fehler-blass  6.16
       --------------------------------------------------------------------- */
    --erfolg:        #2F6B45;
    --erfolg-blass:  #EAF3EC;
    --erfolg-rand:   #CBE0D2;
    --warn:          #7E5410;
    --warn-blass:    #FBF1DE;
    --warn-rand:     #EDDCB8;
    --fehler:        #A32B24;
    --fehler-blass:  #FBEAE8;
    --fehler-rand:   #EDCECB;

    /* --- Form ------------------------------------------------------------
       Pille fuer alles Klickbare, 16 px fuer Karten, 12 px fuer Eingaben.
       --------------------------------------------------------------------- */
    --radius:        12px;
    --radius-klein:  8px;
    --radius-gross:  16px;
    --radius-weit:   22px;
    --radius-pille:  999px;

    /* --- Schatten --------------------------------------------------------
       Gross, weich, mit negativem Spread: Der Schatten sitzt tiefer als das
       Element und faellt zu den Raendern hin aus. Das ist das Merkmal, das
       Flaechen schweben laesst, statt sie zu umranden.
       --------------------------------------------------------------------- */
    --schatten-weich: 0 20px 55px -26px rgba(43, 35, 32, .38);
    --schatten-heben: 0 34px 80px -30px rgba(180, 80, 44, .42);
    --schatten-zart:  0 10px 30px -22px rgba(43, 35, 32, .34);
    --schatten:       var(--schatten-weich);   /* Altname */
    --ring:           0 0 0 4px rgba(180, 80, 44, .20);
    --ring-fehler:    0 0 0 4px rgba(163, 43, 36, .18);

    /* --- Schrift ---------------------------------------------------------
       --serif bleibt als Variable erhalten: Zeitungssatz und einzelne Zitate
       brauchen sie. Im Website-Text kommt sie nicht mehr vor.
       --------------------------------------------------------------------- */
    --sans:  "Figtree", system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
             "Times New Roman", serif;
    --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
             "Liberation Mono", monospace;

    /* --- Bewegung --------------------------------------------------------
       Eine Kurve fuer alles: schnell los, weich aus. Drei Dauern reichen.
       --------------------------------------------------------------------- */
    --ease:          cubic-bezier(.2, .8, .2, 1);
    --ease-weich:    cubic-bezier(.4, 0, .2, 1);
    --dauer-schnell: .2s;
    --dauer-mittel:  .35s;
    --dauer-eingang: .7s;
    --reveal-rettung: 4s;   /* siehe Abschnitt 5, Regel 2 */

    /* --- Abstaende ------------------------------------------------------- */
    --raum-1: .25rem;
    --raum-2: .5rem;
    --raum-3: .75rem;
    --raum-4: 1rem;
    --raum-5: 1.5rem;
    --raum-6: 2rem;
    --raum-7: 3rem;
    --raum-8: 4rem;

    /* --- Breiten --------------------------------------------------------- */
    --huelle-breit:  1120px;
    --huelle-schmal: 720px;
    --lesebreite:    68ch;
}


/* ==========================================================================
   2  Reset
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;   /* der Kopf klebt oben und darf nichts verdecken */
    background: var(--papier);
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--papier);
    /* Zwei sehr flache Lichter, damit das Papier nicht tot wirkt. */
    background-image:
        radial-gradient(58rem 30rem at 88% -6%,  rgba(253, 232, 219, .55), transparent 62%),
        radial-gradient(46rem 26rem at -12% 4%,  rgba(251, 243, 238, .85), transparent 60%);
    background-repeat: no-repeat;
    color: var(--tinte);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

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

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

legend {
    padding: 0;
}

ul,
ol {
    margin: 0 0 var(--raum-4);
    padding-left: 1.35em;
}

hr {
    border: 0;
    border-top: 1px solid var(--linie);
    margin: var(--raum-6) 0;
}

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


/* ==========================================================================
   3  Typografie

   Alle Ueberschriften laufen serifenlos. Die Skala ist fluid: clamp() mit
   einem Sockel fuer 360 px und einer Decke, damit auf grossen Schirmen
   nichts plakatig wird. Je groesser der Grad, desto enger der Buchstaben-
   abstand — sonst faellt eine geometrische Sans bei 3 rem auseinander.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sans);
    color: var(--tinte);
    margin: 0 0 var(--raum-4);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.05rem, 1.45rem + 2.7vw, 3.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.028em;
}

h2 {
    font-size: clamp(1.55rem, 1.22rem + 1.5vw, 2.3rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.022em;
    margin-top: var(--raum-7);
}

h3 {
    font-size: clamp(1.2rem, 1.09rem + .52vw, 1.5rem);
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.014em;
    margin-top: var(--raum-5);
}

h4 {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.008em;
    margin-top: var(--raum-5);
    margin-bottom: var(--raum-2);
}

h5,
h6 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-top: var(--raum-4);
    margin-bottom: var(--raum-2);
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
}

p {
    margin: 0 0 var(--raum-4);
    max-width: var(--lesebreite);
}

/* In Karten, Tabellen und Rastern zaehlt die Spaltenbreite, nicht 68ch —
   dort begrenzt schon die Spalte. Hinweisboxen bekommen die Lesebreite
   ausdruecklich: Sie stehen oft ueber die ganze Seite, und 110 Zeichen
   pro Zeile liest niemand gern. */
.karte p,
.stepper p,
td p,
th p,
figcaption p,
.reihe p,
.fuss p {
    max-width: none;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--akzent);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    transition: color var(--dauer-schnell) var(--ease);
}

a:hover {
    color: var(--akzent-tief);
}

strong,
b {
    font-weight: 700;
}

small,
.klein {
    font-size: .875rem;
    line-height: 1.55;
}

.muted {
    color: var(--tinte-weich);
}

code,
kbd,
samp {
    font-family: var(--mono);
    font-size: .875em;
    background: var(--papier-tief);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    padding: .1em .35em;
    word-break: break-word;
}

pre {
    font-family: var(--mono);
    font-size: .82rem;
    line-height: 1.5;
    background: var(--papier-tief);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: var(--raum-4);
    overflow-x: auto;
}

pre code {
    background: none;
    border: 0;
    padding: 0;
}

/* Zitate duerfen Serifen behalten — sie klingen dann wie aus der Zeitung. */
blockquote {
    position: relative;
    margin: var(--raum-5) 0;
    padding: var(--raum-3) 0 var(--raum-3) var(--raum-5);
    border-left: 3px solid var(--akzent-rand);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--serif);
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--tinte-weich);
}

/* Fliesstext auf Rechtsseiten und in langen Erklaerungen */
.prosa {
    max-width: var(--lesebreite);
}

.prosa h2 {
    padding-top: var(--raum-4);
    border-top: 1px solid var(--linie);
}

.prosa li {
    margin-bottom: var(--raum-2);
}

.prosa dt {
    font-weight: 600;
    margin-top: var(--raum-4);
}

.prosa dd {
    margin: 0 0 var(--raum-3);
}

/* Vorspann direkt unter einer Ueberschrift */
.vorspann {
    font-size: clamp(1.0625rem, 1rem + .45vw, 1.3rem);
    line-height: 1.55;
    font-weight: 400;
    color: var(--tinte-weich);
    max-width: var(--lesebreite);
    margin-bottom: var(--raum-5);
}

/* Dachzeile / Rubrik ueber einer Ueberschrift */
.dachzeile {
    display: block;
    font-family: var(--sans);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--akzent);
    margin-bottom: var(--raum-3);
}


/* ==========================================================================
   4  Layout und Raster
   ========================================================================== */

.huelle {
    width: 100%;
    max-width: var(--huelle-breit);
    margin-inline: auto;
    padding-inline: var(--raum-4);
}

.huelle--schmal {
    max-width: var(--huelle-schmal);
}

.inhalt {
    flex: 1 0 auto;
    padding-block: var(--raum-6);
    outline: none;
}

.abschnitt {
    padding-block: var(--raum-6);
}

.abschnitt--luft {
    padding-block: var(--raum-8);
}

.abschnitt--getoent {
    background: var(--papier-tief);
    border-block: 1px solid var(--linie);
}

.abschnitt__kopf {
    max-width: var(--lesebreite);
    margin-bottom: var(--raum-6);
}

.trenner {
    border: 0;
    border-top: 1px solid var(--linie);
    margin-block: var(--raum-6);
}

/* Raster: mobil einspaltig, ab 640 px mehrspaltig */
.grid {
    display: grid;
    gap: var(--raum-5);
    grid-template-columns: 1fr;
}

.grid--eng {
    gap: var(--raum-4);
}

.grid--weit {
    gap: var(--raum-6);
}

.reihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-3);
    align-items: center;
}

.reihe--mitte {
    justify-content: center;
}

.reihe--verteilt {
    justify-content: space-between;
}

.reihe--oben {
    align-items: flex-start;
}

.stapel > * + * {
    margin-top: var(--raum-4);
}


/* ==========================================================================
   5  Bewegung — Grundlage fuer alle Seiten

   Diese Werkzeuge nutzen die aufbauenden Seiten. Drei Regeln gelten immer:

   1. Ohne JavaScript ist alles sofort sichtbar. Der Startzustand von .reveal
      gilt nur, wenn Skripte ueberhaupt laufen — @media (scripting: enabled).
      Ohne Skript greift keine der Regeln, der Text steht einfach da.
   2. Sollte ein Skript abstuerzen, bevor es .reveal--sichtbar setzt, holt die
      Rettungsleine die Inhalte nach vier Sekunden von selbst herein. Ein
      Skript, das die Steuerung uebernimmt, meldet das mit der Klasse
      .reveal-laeuft am <html>-Element und schaltet die Rettungsleine ab.
   3. Bei prefers-reduced-motion laeuft gar nichts. Kein Einblenden, kein
      Schweben — und nichts bleibt dabei unsichtbar.
   ========================================================================== */

.reveal {
    transition:
        opacity   var(--dauer-eingang) var(--ease),
        transform var(--dauer-eingang) var(--ease);
}

.reveal--sichtbar {
    opacity: 1;
    transform: none;
}

/* Gestaffelter Auftritt fuer Geschwister in einem Raster. */
.reveal--takt-1 { transition-delay: .07s; }
.reveal--takt-2 { transition-delay: .14s; }
.reveal--takt-3 { transition-delay: .21s; }
.reveal--takt-4 { transition-delay: .28s; }
.reveal--takt-5 { transition-delay: .35s; }

@media (scripting: enabled) {
    .reveal:not(.reveal--sichtbar) {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    /* Rettungsleine — siehe Regel 2 oben. Ein Skript, das die Reveals
       tatsaechlich steuert, setzt beim Start
           document.documentElement.classList.add('reveal-laeuft')
       und schaltet sie damit ab. Sonst greift sie nach --reveal-rettung. */
    html:not(.reveal-laeuft) .reveal:not(.reveal--sichtbar) {
        animation: abz-reveal-rettung var(--dauer-eingang) var(--ease)
                   var(--reveal-rettung) forwards;
    }
}

@keyframes abz-reveal-rettung {
    to {
        opacity: 1;
        transform: none;
    }
}

/* Einzelne Auftritte, die eine Seite direkt vergeben kann. */
@keyframes abz-auf {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes abz-fallen {
    from { opacity: 0; transform: translate3d(0, -16px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes abz-heran {
    from { opacity: 0; transform: scale(.965); }
    to   { opacity: 1; transform: none; }
}

@keyframes abz-schweben {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -8px, 0); }
}

@keyframes abz-glanz {
    from { transform: translate3d(-120%, 0, 0); }
    to   { transform: translate3d(220%, 0, 0); }
}

.anim-auf    { animation: abz-auf    var(--dauer-eingang) var(--ease) both; }
.anim-fallen { animation: abz-fallen var(--dauer-eingang) var(--ease) both; }
.anim-heran  { animation: abz-heran  var(--dauer-eingang) var(--ease) both; }

.schwebt {
    animation: abz-schweben 7s var(--ease-weich) infinite;
}

/* Weiches Anheben — fuer alles, was auf Zeigen reagieren soll. */
.hebt-an {
    transition:
        transform  var(--dauer-schnell) var(--ease),
        box-shadow var(--dauer-schnell) var(--ease);
}

.hebt-an:hover,
.hebt-an:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--schatten-heben);
}


/* ==========================================================================
   6  Schaltflaechen

   Pillenform, grosszuegige Trefferflaeche, weiches Anheben bei Hover. Der
   Schatten macht die Bewegung — nicht die Farbe, die bleibt stabil, damit
   der Kontrast in jedem Zustand haelt.
   ========================================================================== */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    min-height: 48px;
    padding: .7em 1.5em;
    border: 1px solid transparent;
    border-radius: var(--radius-pille);
    background: var(--papier-tief);
    color: var(--tinte);
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.006em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--dauer-schnell) var(--ease),
        border-color     var(--dauer-schnell) var(--ease),
        color            var(--dauer-schnell) var(--ease),
        box-shadow       var(--dauer-schnell) var(--ease),
        transform        var(--dauer-schnell) var(--ease);
}

.btn:hover {
    background: var(--linie-zart);
    color: var(--tinte);
    transform: translateY(-2px);
    box-shadow: var(--schatten-zart);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn--primaer {
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--weiss);
    box-shadow: var(--schatten-zart);
}

.btn--primaer:hover {
    background: var(--akzent-tief);
    border-color: var(--akzent-tief);
    color: var(--weiss);
    box-shadow: var(--schatten-heben);
}

.btn--sekundaer {
    background: var(--weiss);
    border-color: var(--feldrand);
    color: var(--tinte);
}

.btn--sekundaer:hover {
    background: var(--weiss);
    border-color: var(--akzent);
    color: var(--akzent-tief);
    box-shadow: var(--schatten-zart);
}

.btn--still {
    background: transparent;
    border-color: transparent;
    color: var(--akzent);
    padding-inline: .9em;
    min-height: 42px;
}

.btn--still:hover {
    background: var(--akzent-weich);
    color: var(--akzent-tief);
    box-shadow: none;
}

.btn--gefahr {
    background: var(--weiss);
    border-color: var(--fehler-rand);
    color: var(--fehler);
}

.btn--gefahr:hover {
    background: var(--fehler-blass);
    border-color: var(--fehler);
    color: var(--fehler);
}

.btn--gross {
    min-height: 58px;
    padding: .9em 2em;
    font-size: 1.0625rem;
    letter-spacing: -0.012em;
}

.btn--klein {
    min-height: 40px;
    padding: .45em 1.1em;
    font-size: .9375rem;
}

.btn--block {
    display: flex;
    width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"],
.btn.ist-gesperrt {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* Gruppe aus Haupt- und Nebenaktion */
.aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-3);
    align-items: center;
    margin-top: var(--raum-5);
}

.aktionen--mitte {
    justify-content: center;
}


/* ==========================================================================
   7  Formulare

   Groessere Trefferflaechen, ruhige Raender, ein weicher Fokusring in der
   Akzentfarbe statt des harten Browser-Rahmens.
   ========================================================================== */

.formular {
    max-width: var(--huelle-schmal);
}

.feld {
    margin-bottom: var(--raum-5);
}

.feld__label,
.feld > label {
    display: block;
    font-weight: 600;
    font-size: .9375rem;
    letter-spacing: -0.004em;
    margin-bottom: var(--raum-2);
    color: var(--tinte);
}

.feld__pflicht {
    color: var(--akzent);
    margin-left: .15em;
}

.feld__hinweis {
    display: block;
    font-size: .875rem;
    color: var(--tinte-weich);
    margin-top: var(--raum-2);
}

.feld__hinweis--vor {
    margin-top: 0;
    margin-bottom: var(--raum-2);
}

.feld__fehler {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--fehler);
    margin-top: var(--raum-2);
}

.feld__zaehler {
    display: block;
    font-size: .8125rem;
    color: var(--muted);
    margin-top: var(--raum-1);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.feld__zaehler.ist-knapp {
    color: var(--warn);
}

.feld__zaehler.ist-voll {
    color: var(--fehler);
    font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="search"],
select,
textarea,
.eingabe {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: .75em .95em;
    background: var(--weiss);
    border: 1px solid var(--feldrand);
    border-radius: var(--radius);
    color: var(--tinte);
    font-size: 1rem;
    line-height: 1.45;
    box-shadow: 0 1px 2px rgba(43, 35, 32, .03);
    transition:
        border-color var(--dauer-schnell) var(--ease),
        box-shadow   var(--dauer-schnell) var(--ease),
        background-color var(--dauer-schnell) var(--ease);
    appearance: none;
}

textarea {
    min-height: 9rem;
    resize: vertical;
    line-height: 1.6;
}

select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--tinte-weich) 50%),
        linear-gradient(135deg, var(--tinte-weich) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) calc(50% + 2px),
        calc(100% - 14px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: 1;
}

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

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--akzent);
    box-shadow: var(--ring);
}

input[type="file"] {
    width: 100%;
    padding: .7em;
    background: var(--papier-tief);
    border: 1px dashed var(--feldrand);
    border-radius: var(--radius);
    font-size: .9375rem;
}

input[type="file"]::file-selector-button {
    margin-right: var(--raum-3);
    padding: .55em 1.2em;
    border: 1px solid var(--feldrand);
    border-radius: var(--radius-pille);
    background: var(--weiss);
    font-weight: 600;
    cursor: pointer;
}

/* Fehlerzustand */
.feld--fehler .feld__label,
.feld.ist-fehlerhaft .feld__label {
    color: var(--fehler);
}

.feld--fehler input,
.feld--fehler select,
.feld--fehler textarea,
.feld.ist-fehlerhaft input,
.feld.ist-fehlerhaft select,
.feld.ist-fehlerhaft textarea,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--fehler);
    background: var(--fehler-blass);
}

.feld--fehler input:focus,
.feld--fehler textarea:focus,
input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
    box-shadow: var(--ring-fehler);
}

/* Kontrollkaestchen und Auswahlknoepfe */
.wahl {
    display: flex;
    align-items: flex-start;
    gap: var(--raum-3);
    padding: var(--raum-4);
    border: 1px solid var(--feldrand);
    border-radius: var(--radius-gross);
    background: var(--weiss);
    cursor: pointer;
    margin-bottom: var(--raum-3);
    transition:
        border-color     var(--dauer-schnell) var(--ease),
        background-color var(--dauer-schnell) var(--ease),
        box-shadow       var(--dauer-schnell) var(--ease),
        transform        var(--dauer-schnell) var(--ease);
}

.wahl:hover {
    border-color: var(--akzent);
    background: var(--weiss);
    transform: translateY(-2px);
    box-shadow: var(--schatten-zart);
}

.wahl input[type="checkbox"],
.wahl input[type="radio"] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    min-height: 0;
    margin: .18em 0 0;
    accent-color: var(--akzent);
    cursor: pointer;
}

.wahl__text {
    flex: 1 1 auto;
    font-size: .9375rem;
    line-height: 1.55;
}

.wahl__titel {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: .1em;
}

.wahl:has(input:checked) {
    border-color: var(--akzent);
    background: var(--akzent-weich);
}

.wahl--fehler {
    border-color: var(--fehler);
    background: var(--fehler-blass);
}

/* Auswahl als Kachelreihe (z. B. Anlass, Tonfall) */
.kachelwahl {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-3);
}

.kachelwahl .wahl {
    margin-bottom: 0;
}

/* Zwei Felder nebeneinander (PLZ / Ort) */
.feldpaar {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-4);
}

.feldpaar > .feld {
    margin-bottom: 0;
}


/* ==========================================================================
   8  Karten
   ========================================================================== */

.karte {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: var(--raum-5);
    box-shadow: var(--schatten-zart);
}

.karte--flach {
    box-shadow: none;
    background: var(--papier-tief);
    border-color: var(--linie);
}

.karte--gehoben {
    box-shadow: var(--schatten-weich);
}

.karte--akzent {
    border-color: var(--akzent-rand);
    border-width: 1px;
    background:
        linear-gradient(180deg, var(--akzent-weich) 0%, var(--weiss) 34%);
    box-shadow: var(--schatten-weich);
}

.karte__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--raum-3);
    padding-bottom: var(--raum-3);
    margin-bottom: var(--raum-4);
    border-bottom: 1px solid var(--linie);
}

.karte__titel {
    font-family: var(--sans);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.018em;
    margin: 0;
}

.karte__inhalt > *:last-child {
    margin-bottom: 0;
}

.karte__fuss {
    padding-top: var(--raum-4);
    margin-top: var(--raum-4);
    border-top: 1px solid var(--linie);
}

.karte + .karte {
    margin-top: var(--raum-4);
}


/* ==========================================================================
   9  Hinweisboxen
   ========================================================================== */

.hinweis {
    position: relative;
    padding: var(--raum-4) var(--raum-5);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    background: var(--papier-tief);
    color: var(--tinte);
    font-size: .9375rem;
    line-height: 1.6;
    margin-bottom: var(--raum-4);
    overflow: hidden;
}

/* Der Farbstreifen sitzt innen statt als dicker Rahmen aussen — dadurch
   bleibt die Kante rund und die Box wirkt leichter. */
.hinweis::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--muted);
}

.hinweis > *:last-child {
    margin-bottom: 0;
}

.hinweis--info {
    background: var(--petrol-blass);
    border-color: var(--petrol-rand);
}

.hinweis--info::before {
    background: var(--petrol);
}

.hinweis--erfolg {
    background: var(--erfolg-blass);
    border-color: var(--erfolg-rand);
}

.hinweis--erfolg::before {
    background: var(--erfolg);
}

.hinweis--warn {
    background: var(--warn-blass);
    border-color: var(--warn-rand);
}

.hinweis--warn::before {
    background: var(--warn);
}

.hinweis--fehler {
    background: var(--fehler-blass);
    border-color: var(--fehler-rand);
}

.hinweis--fehler::before {
    background: var(--fehler);
}

.hinweis__titel {
    display: block;
    font-weight: 700;
    margin-bottom: var(--raum-1);
}


/* ==========================================================================
   10  Tabellen
   ========================================================================== */

.tabelle-huelle {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    background: var(--weiss);
    box-shadow: var(--schatten-zart);
}

.tabelle {
    width: 100%;
    min-width: 32rem;
    font-size: .9375rem;
}

.tabelle th,
.tabelle td {
    padding: var(--raum-3) var(--raum-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--linie);
}

.tabelle thead th {
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tinte-weich);
    background: var(--papier-tief);
    border-bottom: 1px solid var(--linie);
    white-space: nowrap;
}

.tabelle tbody tr:last-child th,
.tabelle tbody tr:last-child td {
    border-bottom: 0;
}

.tabelle tbody tr {
    transition: background-color var(--dauer-schnell) var(--ease);
}

.tabelle tbody tr:hover {
    background: var(--papier-warm);
}

.tabelle .zahl,
.tabelle .betrag {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Summentabelle in der Kasse */
.summen {
    width: 100%;
    font-size: .9375rem;
}

.summen th,
.summen td {
    padding: var(--raum-2) 0;
    text-align: left;
    font-weight: 400;
}

.summen td {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.summen tr.summen__gesamt th,
.summen tr.summen__gesamt td {
    border-top: 1px solid var(--linie-kraeftig);
    padding-top: var(--raum-3);
    font-weight: 700;
    font-size: 1.0625rem;
}


/* ==========================================================================
   11  Badge, Pill, Preis
   ========================================================================== */

.badge {
    display: inline-block;
    padding: .25em .75em;
    border-radius: var(--radius-pille);
    background: var(--papier-tief);
    border: 1px solid var(--linie);
    color: var(--tinte-weich);
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.badge--akzent {
    background: var(--akzent-weich);
    border-color: var(--akzent-rand);
    color: var(--akzent-tief);
}

.badge--erfolg {
    background: var(--erfolg-blass);
    border-color: var(--erfolg-rand);
    color: var(--erfolg);
}

.badge--warn {
    background: var(--warn-blass);
    border-color: var(--warn-rand);
    color: var(--warn);
}

.badge--fehler {
    background: var(--fehler-blass);
    border-color: var(--fehler-rand);
    color: var(--fehler);
}

.badge--still {
    background: transparent;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .4em 1em;
    border-radius: var(--radius-pille);
    background: var(--weiss);
    border: 1px solid var(--feldrand);
    color: var(--tinte-weich);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition:
        border-color     var(--dauer-schnell) var(--ease),
        color            var(--dauer-schnell) var(--ease),
        background-color var(--dauer-schnell) var(--ease),
        box-shadow       var(--dauer-schnell) var(--ease);
}

a.pill:hover {
    border-color: var(--akzent);
    color: var(--akzent-tief);
    box-shadow: var(--schatten-zart);
}

.pill--aktiv {
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--weiss);
}

a.pill--aktiv:hover {
    background: var(--akzent-tief);
    border-color: var(--akzent-tief);
    color: var(--weiss);
}

/* Preisangabe */
.preis {
    display: inline-flex;
    align-items: baseline;
    gap: .3em;
    font-family: var(--sans);
    font-size: clamp(2.2rem, 1.7rem + 1.8vw, 3rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.032em;
    font-variant-numeric: tabular-nums;
    color: var(--tinte);
}

.preis__zusatz {
    font-family: var(--sans);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--tinte-weich);
}

/* Aufzaehlung mit Haken */
.liste-check {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--raum-4);
}

.liste-check li {
    position: relative;
    padding-left: 1.85em;
    margin-bottom: var(--raum-2);
}

.liste-check li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--erfolg);
    font-weight: 700;
}

.liste-check--akzent li::before {
    color: var(--akzent);
}


/* ==========================================================================
   12  Stepper — der 3-Schritte-Ablauf
       Markup:
         <ol class="stepper">
           <li class="stepper__schritt stepper__schritt--erledigt">…</li>
           <li class="stepper__schritt stepper__schritt--aktiv">…</li>
           <li class="stepper__schritt">…</li>
         </ol>
   ========================================================================== */

.stepper {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-4);
    list-style: none;
    counter-reset: schritt;
    margin: 0 0 var(--raum-6);
    padding: 0;
}

.stepper__schritt {
    position: relative;
    counter-increment: schritt;
    padding: var(--raum-5) var(--raum-5) var(--raum-5) 4rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten-zart);
    transition:
        transform  var(--dauer-schnell) var(--ease),
        box-shadow var(--dauer-schnell) var(--ease);
}

.stepper__schritt:hover {
    transform: translateY(-3px);
    box-shadow: var(--schatten-heben);
}

.stepper__schritt::before {
    content: counter(schritt);
    position: absolute;
    left: var(--raum-5);
    top: var(--raum-5);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--akzent-weich);
    border: 1px solid var(--akzent-rand);
    color: var(--akzent-tief);
    font-family: var(--sans);
    font-size: .9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.stepper__titel {
    display: block;
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.018em;
    margin-bottom: var(--raum-2);
}

.stepper__text {
    display: block;
    font-size: .9375rem;
    color: var(--tinte-weich);
    margin: 0;
}

.stepper__schritt--aktiv {
    border-color: var(--akzent-rand);
    box-shadow: var(--schatten-weich);
}

.stepper__schritt--aktiv::before {
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--weiss);
}

.stepper__schritt--erledigt::before {
    content: "✓";
    background: var(--erfolg);
    border-color: var(--erfolg);
    color: var(--weiss);
}

.stepper__schritt--erledigt {
    background: var(--papier-tief);
    box-shadow: none;
}

/* Kompakte Variante als Fortschrittsanzeige im Ablauf */
.stepper--kompakt {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--raum-2);
}

.stepper--kompakt .stepper__schritt {
    padding: var(--raum-3) var(--raum-4) var(--raum-3) 3rem;
    font-size: .875rem;
    box-shadow: none;
}

.stepper--kompakt .stepper__schritt:hover {
    transform: none;
    box-shadow: none;
}

.stepper--kompakt .stepper__schritt::before {
    left: var(--raum-3);
    top: 50%;
    transform: translateY(-50%);
    width: 1.7rem;
    height: 1.7rem;
    font-size: .8125rem;
}

.stepper--kompakt .stepper__titel {
    font-family: var(--sans);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -0.008em;
    margin: 0;
}

/* Fortschrittsbalken (Beitraege gesammelt) */
.fortschritt {
    height: 10px;
    border-radius: var(--radius-pille);
    background: var(--papier-tief);
    border: 1px solid var(--linie);
    overflow: hidden;
}

.fortschritt__balken {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--akzent-hell), var(--akzent));
    border-radius: var(--radius-pille);
    transition: width .6s var(--ease);
}


/* ==========================================================================
   13  Kopfbereich
   ========================================================================== */

.sprunglink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .8em 1.4em;
    background: var(--tinte);
    color: var(--papier);
    border-radius: 0 0 var(--radius-gross) 0;
    font-weight: 600;
    text-decoration: none;
}

.sprunglink:focus {
    left: 0;
    color: var(--papier);
}

.kopf {
    position: sticky;
    top: 0;
    z-index: 40;
    flex: 0 0 auto;
    background: rgba(255, 252, 250, .82);
    border-bottom: 1px solid var(--linie);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .kopf {
        background: var(--papier);
    }
}

.kopf__innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--raum-3);
    padding-block: var(--raum-3);
}

.marke {
    display: inline-flex;
    align-items: center;
    gap: var(--raum-3);
    text-decoration: none;
    color: var(--tinte);
}

.marke:hover {
    color: var(--tinte);
}

.marke__zeichen svg {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    box-shadow: var(--schatten-zart);
    transition: transform var(--dauer-mittel) var(--ease);
}

.marke:hover .marke__zeichen svg {
    transform: rotate(-4deg) scale(1.04);
}

.marke__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.marke__name {
    font-family: var(--sans);
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.026em;
}

.marke__tld {
    color: var(--akzent);
}

.marke__claim {
    font-size: .75rem;
    color: var(--tinte-weich);
}

.kopf__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--raum-1);
    /* Ohne min-width:0 waere die Nav als Flex-Kind so breit wie ihr Inhalt
       und wuerde auf schmalen Geraeten ueber den Rand laufen, statt selbst
       umzubrechen. */
    min-width: 0;
    flex: 1 1 auto;
}

.kopf__link {
    padding: .5em .9em;
    border-radius: var(--radius-pille);
    color: var(--tinte-weich);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        background-color var(--dauer-schnell) var(--ease),
        color            var(--dauer-schnell) var(--ease);
}

.kopf__link:hover {
    background: var(--papier-tief);
    color: var(--tinte);
}

.kopf__link.ist-aktiv {
    color: var(--akzent-tief);
    background: var(--akzent-weich);
}

.kopf__cta {
    margin-left: var(--raum-2);
}


/* ==========================================================================
   14  Fussbereich
   ========================================================================== */

.fuss {
    flex: 0 0 auto;
    margin-top: var(--raum-8);
    padding-block: var(--raum-7) var(--raum-5);
    background: var(--papier-tief);
    border-top: 1px solid var(--linie);
    font-size: .9375rem;
}

.fuss__spalten {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-5);
    margin-bottom: var(--raum-6);
}

.fuss__marke {
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.022em;
    margin-bottom: var(--raum-2);
}

.fuss__text {
    color: var(--tinte-weich);
    max-width: 34ch;
}

.fuss__titel {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinte-weich);
    margin-bottom: var(--raum-3);
}

.fuss__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fuss__liste li {
    margin-bottom: var(--raum-2);
}

.fuss__liste a {
    display: inline-block;
    color: var(--tinte-weich);
    text-decoration: none;
    transition: color var(--dauer-schnell) var(--ease),
                transform var(--dauer-schnell) var(--ease);
}

.fuss__liste a:hover {
    color: var(--akzent-tief);
    text-decoration: underline;
    transform: translateX(2px);
}

.fuss__vertrauen {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-2);
    list-style: none;
    margin: 0 0 var(--raum-5);
    padding: var(--raum-4) 0;
    border-block: 1px solid var(--linie);
}

.vertrauen {
    display: flex;
    align-items: flex-start;
    gap: .55em;
    font-size: .875rem;
    color: var(--tinte-weich);
}

.vertrauen__zeichen {
    flex: 0 0 auto;
    color: var(--erfolg);
    font-weight: 700;
}

.fuss__zeile {
    font-size: .8125rem;
    color: var(--tinte-weich);
    margin: 0;
    max-width: none;
}

.fuss__zeile a {
    color: var(--tinte-weich);
}


/* ==========================================================================
   15  Flash-Meldungen und Fehlerseite
   ========================================================================== */

.flash-bereich {
    padding-top: var(--raum-4);
}

.flash-bereich .hinweis {
    box-shadow: var(--schatten-zart);
}

.flash-bereich .hinweis:last-child {
    margin-bottom: 0;
}

.fehlerseite {
    max-width: var(--huelle-schmal);
    margin-inline: auto;
    text-align: center;
    padding-block: var(--raum-7);
}

.fehlerseite__code {
    font-family: var(--sans);
    font-size: clamp(3.5rem, 2rem + 8vw, 6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--linie-kraeftig);
    margin: 0 0 var(--raum-2);
}

.fehlerseite__titel {
    margin-bottom: var(--raum-3);
}

.fehlerseite__text {
    font-size: 1.0625rem;
    color: var(--tinte-weich);
    margin-inline: auto;
    margin-bottom: var(--raum-5);
}

.fehlerseite__hinweis {
    text-align: left;
    margin-bottom: var(--raum-5);
}

.fehlerseite__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-3);
    justify-content: center;
    margin-bottom: var(--raum-5);
}

.fehlerseite__fuss {
    text-align: left;
}

.fehlerseite__technik {
    text-align: left;
    margin-top: var(--raum-6);
}

.fehlerseite__technik-titel {
    font-weight: 700;
    margin-bottom: var(--raum-2);
}

.fehlerseite__spur {
    max-height: 22rem;
}


/* ==========================================================================
   16  Hilfsklassen
   ========================================================================== */

.mittig      { text-align: center; }
.rechts      { text-align: right; }
.links       { text-align: left; }
.nowrap      { white-space: nowrap; }
.zahlen      { font-variant-numeric: tabular-nums; }
.serif       { font-family: var(--serif); }
.voll        { width: 100%; }
.mitte-block { margin-inline: auto; }
/* Eigene Zeile fuer ein <span> — etwa in den Kacheln der Preisauswahl, wo
   innerhalb eines <label> nur Phrasing-Inhalt stehen darf. */
.block       { display: block; }

/* Zentrierte Absaetze brauchen ihre Zeilenlaengenbegrenzung mittig. */
.mittig p,
.mittig .vorspann {
    margin-inline: auto;
}

.oben-0 { margin-top: 0; }
.oben-2 { margin-top: var(--raum-2); }
.oben-3 { margin-top: var(--raum-3); }
.oben-4 { margin-top: var(--raum-4); }
.oben-5 { margin-top: var(--raum-5); }
.oben-6 { margin-top: var(--raum-6); }

.unten-0 { margin-bottom: 0; }
.unten-2 { margin-bottom: var(--raum-2); }
.unten-3 { margin-bottom: var(--raum-3); }
.unten-4 { margin-bottom: var(--raum-4); }
.unten-5 { margin-bottom: var(--raum-5); }
.unten-6 { margin-bottom: var(--raum-6); }

.lesebreite { max-width: var(--lesebreite); }

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

/* Sichtbar erst ab bestimmten Breiten */
.nur-mobil { display: block; }
.ab-tablet { display: none; }

/* Vorschaubild eines Uploads */
.bildvorschau {
    display: none;
    margin-top: var(--raum-3);
}

.bildvorschau.ist-sichtbar {
    display: block;
}

.bildvorschau img {
    max-height: 12rem;
    width: auto;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    padding: 4px;
    box-shadow: var(--schatten-zart);
}

/* Kopierbares Feld (Sammel-Link) */
.kopierfeld {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-2);
    align-items: stretch;
}

.kopierfeld input {
    flex: 1 1 14rem;
    font-family: var(--mono);
    font-size: .875rem;
    background: var(--papier-tief);
}

.kopierfeld .btn {
    flex: 0 0 auto;
}

.kopierfeld__rueckmeldung {
    flex-basis: 100%;
    font-size: .875rem;
    font-weight: 600;
    color: var(--erfolg);
    min-height: 1.25rem;
}

.kopierfeld__rueckmeldung.ist-fehler {
    color: var(--fehler);
}


/* ==========================================================================
   17  Bedienbarkeit und Druck
   ========================================================================== */

/* Sichtbarer Fokus — Pflicht fuer Tastaturbedienung. */
:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
    border-radius: 3px;
}

.btn:focus-visible,
.pill:focus-visible,
.kopf__link:focus-visible {
    outline: 3px solid var(--akzent-tief);
    outline-offset: 3px;
    border-radius: var(--radius-pille);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
    border-radius: var(--radius);
}

/* Maus- und Touch-Bedienung bekommen keinen Rahmen. */
:focus:not(:focus-visible) {
    outline: none;
}

::selection {
    background: var(--akzent-weich);
    color: var(--tinte);
}

/* --------------------------------------------------------------------------
   Reduzierte Bewegung

   Es laeuft nichts mehr: keine Einblendung, kein Schweben, keine Verschiebung
   bei Hover. Entscheidend ist der zweite Block — .reveal-Elemente muessen
   sofort sichtbar sein, sonst haetten Menschen mit dieser Einstellung eine
   leere Seite vor sich.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }

    .reveal,
    .reveal:not(.reveal--sichtbar),
    html:not(.reveal-laeuft) .reveal:not(.reveal--sichtbar) {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .anim-auf,
    .anim-fallen,
    .anim-heran,
    .schwebt {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .btn:hover,
    .wahl:hover,
    .stepper__schritt:hover,
    .hebt-an:hover,
    .hebt-an:focus-within,
    .fuss__liste a:hover,
    .marke:hover .marke__zeichen svg {
        transform: none !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --linie:          #C9B6A6;
        --linie-zart:     #DFD1C4;
        --linie-kraeftig: #B49B87;
        --feldrand:       #6B5B4F;
        --tinte-weich:    #3A302B;
        --muted:          #574B44;
        --akzent:         #973F20;
    }

    .kopf {
        background: var(--papier);
    }
}


/* ==========================================================================
   18  Breitenstufen
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ab 480 px
   -------------------------------------------------------------------------- */
@media (min-width: 30em) {
    .feldpaar {
        grid-template-columns: 1fr 2fr;
    }

    .kachelwahl {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Ab 640 px
   -------------------------------------------------------------------------- */
@media (min-width: 40em) {
    .huelle {
        padding-inline: var(--raum-5);
    }

    .grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stepper {
        grid-template-columns: repeat(3, 1fr);
    }

    .fuss__spalten {
        grid-template-columns: repeat(2, 1fr);
    }

    .fuss__vertrauen {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--raum-3) var(--raum-5);
    }

    .karte {
        padding: var(--raum-6);
    }
}

/* --------------------------------------------------------------------------
   Ab 900 px
   -------------------------------------------------------------------------- */
@media (min-width: 56em) {
    .inhalt {
        padding-block: var(--raum-7);
    }

    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid--seite {
        grid-template-columns: 2fr 1fr;
        gap: var(--raum-6);
    }

    .fuss__spalten {
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
        gap: var(--raum-6);
    }

    .fuss__vertrauen {
        grid-template-columns: repeat(4, 1fr);
    }

    .nur-mobil { display: none; }
    .ab-tablet { display: block; }
}

/* --------------------------------------------------------------------------
   Sehr schmale Geraete (ab 360 px muss alles bedienbar bleiben)
   -------------------------------------------------------------------------- */
@media (max-width: 22.5em) {
    body {
        font-size: 1rem;
    }

    .huelle {
        padding-inline: var(--raum-3);
    }

    .marke__claim {
        display: none;
    }

    .kopf__link {
        padding: .45em .6em;
        font-size: .875rem;
    }

    .kopf__cta {
        margin-left: 0;
    }

    .btn {
        padding-inline: 1.15em;
    }

    .karte {
        padding: var(--raum-4);
    }

    .stepper__schritt {
        padding: var(--raum-4) var(--raum-4) var(--raum-4) 3.6rem;
    }

    .stepper__schritt::before {
        left: var(--raum-4);
        top: var(--raum-4);
    }

    .stepper--kompakt {
        grid-template-columns: 1fr;
    }
}


/* --------------------------------------------------------------------------
   Druck — die Website selbst, nicht die Zeitung (die hat zeitung.css).
   -------------------------------------------------------------------------- */
@media print {
    body {
        background: #fff;
        background-image: none;
        color: #000;
        font-size: 11pt;
    }

    .kopf {
        position: static;
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .kopf__nav,
    .fuss__spalten,
    .fuss__vertrauen,
    .sprunglink,
    .aktionen,
    .btn {
        display: none !important;
    }

    .karte,
    .hinweis,
    .stepper__schritt,
    .tabelle-huelle {
        border: 1px solid #999;
        box-shadow: none;
        break-inside: avoid;
    }

    .reveal,
    .anim-auf,
    .anim-fallen,
    .anim-heran {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
}


/* --------------------------------------------------------------------------
   Widerrufsknopf im Fussbereich

   Freiwilliger Service, kein Pflichtelement: Der vorgeschriebene Knopf nach
   § 312k BGB ist der Kuendigungsbutton und betrifft nur Dauerschuldverhaeltnisse.
   Bewusst abgesetzt zwischen Linkspalten und Vertrauenszeile, damit er beim
   Ueberfliegen des Fusses auffaellt, ohne wie ein Verkaufsknopf zu wirken.
   -------------------------------------------------------------------------- */

.fuss__widerruf {
    margin: var(--raum-5) 0 var(--raum-4);
    padding-top: var(--raum-4);
    border-top: 1px solid var(--linie);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-3) var(--raum-4);
}

.fuss__widerruf .btn {
    flex: 0 0 auto;
}

.fuss__widerruf p {
    flex: 1 1 22rem;
    margin: 0;
    max-width: 46ch;
}

@media (max-width: 29.99em) {
    .fuss__widerruf .btn {
        width: 100%;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   Honigtopf (Spamschutz)

   Ein Feld, das Menschen nicht sehen und Roboter ausfuellen. Die Regel stand
   bisher nur in flow.css; Seiten, die diese Datei nicht laden — etwa das
   Widerrufsformular —, zeigten das Feld sichtbar an. Deshalb gehoert sie ins
   Grundgeruest.

   Bewusst NICHT display:none oder visibility:hidden: Beides erkennen viele
   Formularroboter und lassen das Feld dann in Ruhe. Aus dem Sichtfeld
   geschoben wird es zuverlaessiger ausgefuellt. Screenreader ueberspringen es
   ueber aria-hidden am Container.
   -------------------------------------------------------------------------- */

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

/* Initiativ-Hinweis im Fussbereich — etwas leiser als der Beschreibungstext. */
.fuss__initiative {
    margin-top: var(--raum-3);
    font-size: .8125rem;
    color: var(--muted);
}

.fuss__initiative a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.fuss__initiative a:hover,
.fuss__initiative a:focus-visible {
    color: var(--akzent-tief);
}