/* ==========================================================================
   abschiedszeitung.de — flow.css
   --------------------------------------------------------------------------
   Ergaenzungen zu site.css fuer den eigentlichen Ablauf: Startseite und
   Anlass-Seiten, Konfigurator, Beitragsformular, Dashboard und Vorschau.
   site.css bleibt die gemeinsame Basis — hier steht nur, was dort fehlt.

   Alle Farben, Abstaende und Schriften kommen aus den Token in site.css.
   Mobile first; Breakpoints bei 30em, 40em und 56em wie in site.css.

   Inhalt
     1  Buehne und Abschluss
     2  Musterblatt (verkleinerte Zeitungsseite)
     3  Fragenlisten und Ablauf
     4  FAQ, Kacheln, Kaufkarten
     5  Vorlagen-Seite
     6  Konfigurator
     7  Beitragsformular
     8  Danke-Seite
     9  Dashboard
    10  Vorschau
    11  Korrekturschleife
    11b Preisstufen (vier Auflagen als Karten)
    12  Breakpoints
   ========================================================================== */


/* ==========================================================================
   1  Buehne und Abschluss
   ========================================================================== */

.hero {
    position: relative;
    padding-block: var(--raum-6) var(--raum-7);
    /* Lichtschein statt Flaeche: warmes Licht oben rechts hinter der Zeitung,
       ein blasserer Schein links auf halber Hoehe, darunter ein ruhiger
       Verlauf, der unten genau im Papierweiss endet. Deshalb braucht die
       Buehne auch keine Abschlusslinie mehr — sie geht nahtlos ueber.
       Alles als background: nichts davon beschneidet die gedrehte
       Titelseite. */
    border-bottom: 0;
    background:
        radial-gradient(46% 62% at 76% -4%, rgba(249, 205, 180, .60) 0%, rgba(249, 205, 180, 0) 70%),
        radial-gradient(46% 46% at -4% 42%, rgba(255, 232, 216, .55) 0%, rgba(255, 232, 216, 0) 72%),
        linear-gradient(180deg, var(--papier-warm) 0%, var(--papier) 78%, var(--papier) 100%);
}

.hero--schlank {
    padding-block: var(--raum-5) var(--raum-6);
}

.hero__innen {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-6);
    align-items: start;
}

.hero__text h1 {
    margin-bottom: var(--raum-4);
    letter-spacing: -.022em;
    text-wrap: balance;
}

.hero__text .vorspann {
    max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Die Preiszeile — ein kleines weisses Schild, kein Kleingedrucktes.
   Der Preis steht offen da, in der Hausschrift, mit Ziffern in fester Breite.
   -------------------------------------------------------------------------- */
.hero__preiszeile {
    display: inline-block;
    max-width: 100%;
    margin-top: var(--raum-5);
    padding: .7rem 1.1rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius-weit);
    background: var(--weiss);
    box-shadow: var(--schatten-zart);
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--tinte-weich);
}

.hero__preiszeile strong {
    color: var(--tinte);
    font-family: var(--sans);
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Vertrauenszeilen — vier kurze Zusagen mit rundem Haken davor.
   -------------------------------------------------------------------------- */
.hero__signale {
    list-style: none;
    margin: var(--raum-5) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-3) var(--raum-5);
    font-size: .875rem;
    color: var(--tinte-weich);
}

.hero__signale li {
    position: relative;
    padding-left: 1.7rem;
    line-height: 1.45;
}

.hero__signale li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: .05em;
    display: grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--erfolg-blass);
    color: var(--erfolg);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}

.hero__bildunterschrift {
    margin-top: var(--raum-4);
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--muted);
    text-align: center;
    max-width: none;
}


/* --------------------------------------------------------------------------
   1b  Die aufgelegte Zeitung

   Die Titelseite liegt nicht im Rahmen, sie liegt auf dem Tisch: ein paar
   Grad nach rechts gedreht, mit weichem Schlagschatten darunter, und sie
   atmet ganz langsam. Wer sie mit der Maus beruehrt, richtet sie auf — die
   Drehung geht gegen null, das Blatt hebt sich an.

   Der Aufbau ist bewusst zweistoeckig:
     .hero__blatt         traegt das Schweben  (nur translate)
     .hero__blatt-flaeche traegt Drehung, Schatten und den Hover
   Eine Animation ueberschreibt transform vollstaendig; Drehung und Schweben
   auf demselben Element wuerden einander ausloeschen.
   -------------------------------------------------------------------------- */

.hero__bild {
    position: relative;
    /* Reserve fuer Drehung und Schatten. Nichts darf beschnitten werden. */
    padding: clamp(.4rem, 1.4vw, 1.1rem);
}

/* Der Lichtschein hinter dem Blatt. Rein dekorativ, deshalb ohne Inhalt und
   ohne Zeigerereignisse. */
.hero__bild::before {
    content: "";
    position: absolute;
    inset: 2% -4% 6%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(199, 154, 94, .30) 0%,
        rgba(199, 154, 94, .12) 55%,
        rgba(199, 154, 94, 0) 100%);
    pointer-events: none;
}

.hero__blatt {
    position: relative;
    z-index: 1;
    animation: abz-blatt-schwebt 11s var(--ease-weich) infinite;
}

@keyframes abz-blatt-schwebt {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -6px, 0); }
}

.hero__blatt-flaeche {
    --blatt-drehung: 1deg;

    display: block;
    border-radius: 4px;
    box-shadow: var(--schatten-weich);
    transform: rotate(var(--blatt-drehung)) translateY(0);
    transform-origin: 50% 55%;
    transition:
        transform  var(--dauer-mittel) var(--ease),
        box-shadow var(--dauer-mittel) var(--ease);
}

.hero__blatt-flaeche:hover,
.hero__blatt-flaeche:focus-within {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: var(--schatten-heben);
}

/* Die Titelseite selbst: der Schatten sitzt am Traeger, das Bild bringt nur
   noch die Haarlinie mit, damit weisses Papier auf hellem Grund eine Kante
   behaelt. */
.hero__musterlink {
    display: block;
    line-height: 0;
    border-radius: 4px;
}

.hero__musterbild {
    display: block;
    width: 100%;
    height: auto;
    background: var(--weiss);
    border: 1px solid var(--linie-kraeftig);
    border-radius: 3px;
    box-shadow: none;
}

.hero__blatt-flaeche:hover .hero__musterbild,
.hero__blatt-flaeche:focus-within .hero__musterbild {
    border-color: var(--akzent-rand);
}

/* Der handgesetzte Ersatz, falls keine Musterausgabe vorliegt: Drehung und
   Schatten kommen jetzt vom Traeger, nicht mehr vom Musterblatt selbst. */
.hero__blatt-flaeche .musterblatt {
    transform: none;
    box-shadow: none;
    border-radius: 3px;
}

.abschluss {
    border-top: 1px solid var(--linie);
    padding-block: var(--raum-7);
}

.abschluss h2 {
    margin-top: 0;
}


/* ==========================================================================
   2  Musterblatt — eine Zeitungsseite in klein
      Markup erzeugt Abz\Controller\Site::musterblattHtml()
   ========================================================================== */

/* SERIF IST HIER ABSICHT.
   Grundregel seit dem Design-Umbau: Die WEBSITE ist serifenlos (Figtree),
   die ZEITUNG ist Serifensatz. Ueberall dort, wo auf einer Website-Seite
   Zeitungsinhalt oder ein Zitat woertlich wiedergegeben wird, gilt der
   Zeitungssatz — genau dieser Unterschied ist der Punkt: aussen die
   Website, innen die Zeitung. Alles andere (Ueberschriften, Zahlen,
   Formularbeschriftungen, Kachelwerte) steht auf var(--sans). */
.musterblatt {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 4px;
    box-shadow: var(--schatten);
    padding: var(--raum-4);
    font-family: var(--serif);
    color: var(--tinte);
    line-height: 1.35;
    overflow: hidden;
    transform: rotate(-.4deg);
}

.musterblatt--klein {
    transform: none;
    padding: var(--raum-3);
}

.musterblatt__kopf {
    text-align: center;
    padding-bottom: var(--raum-2);
    border-bottom: 3px double var(--tinte);
    margin-bottom: var(--raum-3);
}

.musterblatt__titel {
    font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.05;
    margin: 0;
}

.musterblatt__zeile {
    font-family: var(--sans);
    font-size: .5625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

.musterblatt__zeile--oben {
    margin-bottom: .2em;
    border-bottom: 1px solid var(--linie);
    padding-bottom: .3em;
}

.musterblatt__kopf .musterblatt__zeile:last-child {
    margin-top: .35em;
    padding-top: .3em;
    border-top: 1px solid var(--linie);
}

.musterblatt__aufmacher {
    text-align: center;
    margin-bottom: var(--raum-3);
}

.musterblatt__dach {
    font-family: var(--sans);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--akzent);
    margin: 0 0 .3em;
}

.musterblatt__schlagzeile {
    font-size: clamp(1.15rem, .9rem + 1.5vw, 1.75rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 .35em;
    text-wrap: balance;
}

.musterblatt__vorspann {
    font-size: .75rem;
    color: var(--tinte-weich);
    margin: 0;
    font-style: italic;
}

.musterblatt__satz {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--raum-3);
    padding-top: var(--raum-3);
    border-top: 1px solid var(--linie);
}

.musterblatt__spalte {
    font-size: .625rem;
    line-height: 1.5;
    text-align: justify;
    hyphens: auto;
}

.musterblatt__spalte + .musterblatt__spalte {
    border-left: 1px solid var(--linie-zart);
    padding-left: var(--raum-3);
}

.musterblatt__spalte p {
    margin: 0 0 .6em;
}

.musterblatt__spalte--bild {
    display: none;
}

.musterblatt__bild {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background:
        repeating-linear-gradient(-45deg, var(--papier-tief) 0 6px, var(--linie-zart) 6px 12px);
    border: 1px solid var(--linie);
    margin-bottom: .3em;
    font-family: var(--sans);
    font-size: .5625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.musterblatt__bildunterschrift {
    font-family: var(--sans);
    font-size: .5rem;
    color: var(--muted);
    margin: 0 0 .8em;
    line-height: 1.4;
}

.musterblatt__fuss {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--raum-3);
    margin-top: var(--raum-3);
    padding-top: var(--raum-3);
    border-top: 1px solid var(--linie);
}

.musterblatt__kasten {
    border: 1px solid var(--linie);
    padding: var(--raum-2);
    font-size: .5625rem;
    line-height: 1.45;
}

.musterblatt__kasten p {
    margin: 0;
}

.musterblatt__kastentitel {
    font-family: var(--sans);
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--akzent);
    margin-bottom: .25em !important;
}

.musterblatt-buehne {
    background: var(--papier-tief);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: var(--raum-4);
}


/* ==========================================================================
   3  Fragenlisten und Ablauf
   ========================================================================== */

.fragenliste {
    list-style: none;
    counter-reset: frage;
    margin: 0 0 var(--raum-5);
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-3);
}

.fragenliste__eintrag {
    counter-increment: frage;
    position: relative;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: var(--raum-4) var(--raum-4) var(--raum-4) 3.4rem;
}

.fragenliste__eintrag::before {
    content: counter(frage);
    position: absolute;
    left: var(--raum-4);
    top: var(--raum-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--akzent-blass);
    color: var(--akzent-tief);
    font-family: var(--sans);
    font-size: .8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fragenliste__frage {
    font-family: var(--sans);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 var(--raum-2);
}

.fragenliste__beispiel {
    font-size: .9375rem;
    color: var(--tinte-weich);
    font-style: italic;
    margin: 0;
    padding-left: var(--raum-3);
    border-left: 2px solid var(--linie);
}

.fragenliste__marke {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .15em;
}

.fragenliste__hinweis {
    margin: var(--raum-3) 0 0;
    font-size: .8125rem;
    color: var(--muted);
}

.ablauf {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-3);
    padding-block: var(--raum-6);
    border-top: 1px solid var(--linie);
}

.ablauf:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.ablauf__nummer {
    font-family: var(--sans);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
    color: var(--linie);
    font-variant-numeric: tabular-nums;
}

.ablauf__text h2 {
    margin-top: 0;
}

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

.zeitplan {
    font-size: .9375rem;
}

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

.zeitplan th {
    width: 7.5rem;
    white-space: nowrap;
    font-family: var(--sans);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--akzent);
}

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

.anleitung {
    counter-reset: schritt;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--raum-5);
}

.anleitung li {
    counter-increment: schritt;
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: var(--raum-4);
}

.anleitung li::before {
    content: counter(schritt) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--akzent);
}

.liste-punkte {
    padding-left: 1.2em;
}

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


/* ==========================================================================
   4  FAQ, Kacheln, Kaufkarten
   ========================================================================== */

.faq {
    border-top: 1px solid var(--linie);
}

.faq__eintrag {
    padding-block: var(--raum-4);
    border-bottom: 1px solid var(--linie);
}

.faq__frage {
    font-size: 1.0625rem;
    margin: 0 0 var(--raum-2);
}

.faq__antwort {
    margin: 0;
    color: var(--tinte-weich);
    max-width: var(--lesebreite);
}

.anlasskachel {
    display: flex;
    flex-direction: column;
    gap: var(--raum-1);
    padding: var(--raum-4);
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--tinte);
    transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

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

.anlasskachel__titel {
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 600;
}

.anlasskachel__text {
    font-size: .875rem;
    color: var(--tinte-weich);
}

.preiskarte {
    display: flex;
    flex-direction: column;
}

.preiskarte__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-2);
    font-family: var(--sans);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinte-weich);
    margin: 0 0 var(--raum-3);
}

.preiskarte .preis {
    margin-bottom: var(--raum-4);
}

.preiskarte .liste-check {
    flex: 1 1 auto;
}

.rubrikkarte h3 {
    margin: 0 0 var(--raum-2);
    font-size: 1.0625rem;
}

.rubrikkarte p {
    margin: 0;
    font-size: .9375rem;
    color: var(--tinte-weich);
}

.tonkarte__probe {
    margin-top: var(--raum-4);
    padding: var(--raum-4);
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
}

.tonkarte__dach {
    font-family: var(--sans);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--akzent);
    margin: 0 0 .25em;
}

/* Tonprobe = ein Stueck Zeitungsprosa. Serif ist Absicht, siehe oben. */
.tonkarte__kopf {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 var(--raum-2);
    text-wrap: balance;
}

.tonkarte__text {
    font-family: var(--serif);
    font-size: .9375rem;
    color: var(--tinte-weich);
    margin: 0;
}


/* ==========================================================================
   5  Vorlagen-Seite
   ========================================================================== */

.downloads {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-3);
    margin-block: var(--raum-5);
}

.download {
    display: block;
    padding: var(--raum-4);
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-left: 4px solid var(--akzent);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--tinte);
    transition: background-color .15s ease, border-color .15s ease;
}

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

.download__label {
    display: block;
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: .15em;
}

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

.download__meta {
    display: block;
    margin-top: var(--raum-2);
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}


/* ==========================================================================
   6  Konfigurator
   ========================================================================== */

.feldgruppe {
    margin-bottom: var(--raum-7);
    padding-top: var(--raum-2);
    border-top: 1px solid var(--linie);
}

.feldgruppe:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.feldgruppe__titel {
    display: block;
    width: 100%;
    font-family: var(--sans);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: var(--raum-4);
}

.pillwahl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-2);
}

.pillwahl__eintrag {
    position: relative;
}

.pillwahl__eintrag input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.pillwahl__eintrag span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .4em 1.1em;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: var(--weiss);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--tinte-weich);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.pillwahl__eintrag input:checked + span {
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--weiss);
}

.pillwahl__eintrag input:focus-visible + span {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
}

/* Honigtopf: fuer Menschen unsichtbar, fuer Bots verlockend.
   Kein display:none — manche Bots ignorieren genau das. */
.honigtopf {
    position: absolute !important;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ==========================================================================
   7  Beitragsformular
   ========================================================================== */

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

.beitrag__kopf {
    margin-bottom: var(--raum-6);
}

.beitrag__frist {
    margin-top: var(--raum-4);
    padding: var(--raum-3) var(--raum-4);
    background: var(--papier-tief);
    border-left: 4px solid var(--akzent);
    border-radius: var(--radius-klein);
    font-size: .9375rem;
    color: var(--tinte-weich);
}

.beitrag__block {
    margin-bottom: var(--raum-7);
}

.beitrag__blocktitel {
    font-size: 1.3rem;
    margin: 0 0 var(--raum-2);
    padding-bottom: var(--raum-2);
    border-bottom: 1px solid var(--linie);
}

.beitrag__blocktext {
    font-size: .9375rem;
    color: var(--tinte-weich);
    margin-bottom: var(--raum-4);
}

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

.frageblock {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: var(--raum-3);
    padding: var(--raum-4) 0;
    border-bottom: 1px solid var(--linie-zart);
}

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

.frageblock__nummer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--papier-tief);
    border: 1px solid var(--linie);
    color: var(--tinte-weich);
    font-family: var(--sans);
    font-size: .9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Beantwortet? Dann wird die Nummer gruen. Reine CSS-Rueckmeldung,
   funktioniert auch ohne JavaScript. */
.frageblock:has(textarea:not(:placeholder-shown)) .frageblock__nummer {
    background: var(--erfolg);
    border-color: var(--erfolg);
    color: var(--weiss);
}

.frageblock--fehler .frageblock__nummer {
    background: var(--fehler);
    border-color: var(--fehler);
    color: var(--weiss);
}

.frageblock__frage {
    display: block;
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: var(--raum-1);
}

.frageblock__hinweis {
    font-size: .8125rem;
    color: var(--muted);
    margin: 0 0 var(--raum-3);
}

.frageblock textarea {
    background: var(--weiss);
}

.beitrag__absenden {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: var(--raum-4) 0 var(--raum-3);
    background: linear-gradient(to bottom, rgba(251, 248, 243, 0) 0%, var(--papier) 22%);
}

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


/* ==========================================================================
   8  Danke-Seite
   ========================================================================== */

.danke {
    text-align: center;
    padding-block: var(--raum-5) var(--raum-2);
}

.danke__zeichen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto var(--raum-4);
    border-radius: 50%;
    background: var(--erfolg-blass);
    color: var(--erfolg);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.danke .vorspann {
    margin-inline: auto;
}

.kennzahl {
    display: flex;
    align-items: baseline;
    gap: var(--raum-2);
    margin: 0 0 var(--raum-2);
}

.kennzahl__wert {
    font-family: var(--sans);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.kennzahl__label {
    font-size: .9375rem;
    color: var(--tinte-weich);
}

/* Kopierfelder mit mehrzeiligem Text (Einladung, Erinnerung) */
.kopierfeld textarea {
    flex: 1 1 100%;
    font-family: var(--mono);
    font-size: .8125rem;
    line-height: 1.55;
    background: var(--papier-tief);
    min-height: 6rem;
}


/* ==========================================================================
   9  Dashboard
   ========================================================================== */

.dashboard__kopfbereich {
    padding-bottom: var(--raum-5);
    border-bottom: 1px solid var(--linie);
}

.dashboard__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--raum-4);
    margin-bottom: var(--raum-5);
}

.dashboard__status {
    flex: 0 0 auto;
}

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

.kachel {
    display: flex;
    flex-direction: column;
    gap: var(--raum-1);
    padding: var(--raum-4);
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    text-align: center;
}

.kachel__wert {
    font-family: var(--sans);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.kachel__wert--klein {
    font-size: 1.0625rem;
    line-height: 1.3;
    padding-block: .35em;
}

.kachel__label {
    font-family: var(--sans);
    font-size: .75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.3;
}

.datenliste {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--raum-2) var(--raum-4);
    margin: 0;
    font-size: .875rem;
}

.datenliste dt {
    color: var(--muted);
    white-space: nowrap;
}

.datenliste dd {
    margin: 0;
    font-weight: 600;
}

.erzeugen {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-5);
    align-items: center;
}

.erzeugen__aktionen {
    display: flex;
    flex-direction: column;
    gap: var(--raum-3);
}

.erzeugen__aktionen .btn {
    width: 100%;
}

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

.beitragskarte {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: var(--raum-4);
    scroll-margin-top: var(--raum-6);
}

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

.beitragskarte__autor {
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
}

.beitragskarte__meta {
    margin: 0;
    font-size: .8125rem;
    color: var(--muted);
}

.beitragskarte__antworten {
    margin: 0;
}

.beitragskarte__antworten dt {
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--akzent);
    margin-bottom: var(--raum-1);
}

.beitragskarte__antworten dd {
    margin: 0 0 var(--raum-4);
    font-size: .9375rem;
    color: var(--tinte-weich);
}

.beitragskarte__antworten dd:last-child {
    margin-bottom: 0;
}

.beitragskarte__antworten dd p {
    margin: 0 0 var(--raum-2);
}

.beitragskarte__foto {
    margin: var(--raum-3) 0 0;
    padding-top: var(--raum-3);
    border-top: 1px solid var(--linie-zart);
}


/* ==========================================================================
   10  Vorschau
   ========================================================================== */

.vorschau__kopfbereich {
    padding-bottom: var(--raum-5);
    border-bottom: 1px solid var(--linie);
}

.kaufbox {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-5);
    align-items: center;
}

.kaufbox__preis {
    text-align: center;
}

.kaufbox__preis .preis {
    margin-bottom: var(--raum-2);
}

.kaufbox__preis .btn {
    margin-top: var(--raum-4);
}

/* --------------------------------------------------------------------------
   Blaetterstapel — die Zeitung als Seitenbilder

   Die Vorschau zeigt die gesetzten Seiten nicht mehr als HTML, sondern als
   PNG je Seite (Renderer::seitenbilder). Sonst laesst sich der komplette
   Redaktionstext vor dem Kauf markieren und mitnehmen.

   Titelseite gross, Folgeseiten als Raster daneben. Zum Vergroessern reicht
   der Anker :target — kein JavaScript, keine fremde Bibliothek, funktioniert
   auch mit abgeschalteten Skripten.
   -------------------------------------------------------------------------- */
.blaetterstapel {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-5);
}

.blaetterstapel__folge {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: var(--raum-4);
}

.blatt {
    margin: 0;
    position: relative;
}

.blatt__flaeche {
    display: block;
    border-radius: var(--radius-klein);
    overflow: hidden;
    background: var(--weiss);
    box-shadow: var(--schatten-zart);
    border: 1px solid var(--linie);
    transition: box-shadow .15s ease, transform .15s ease;
}

.blatt__flaeche:hover,
.blatt__flaeche:focus-visible {
    box-shadow: var(--schatten);
    transform: translateY(-2px);
}

.blatt__bild {
    display: block;
    width: 100%;
    height: auto;
    /* Ein Rasterbild ist nichts zum Herumziehen. */
    -webkit-user-drag: none;
    user-select: none;
}

.blatt--titel {
    max-width: 30rem;
    margin-inline: auto;
}

.blatt__marke {
    margin-top: var(--raum-2);
    font-family: var(--sans);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

/* Der Schliessen-Knopf existiert nur in der Vergroesserung. */
.blatt__zu {
    display: none;
}

/* --- Vergroesserung ------------------------------------------------------ */
.blatt:target {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--raum-3);
    padding: var(--raum-4);
    background: rgba(31, 27, 24, .93);
}

.blatt:target .blatt__flaeche {
    order: 2;
    max-height: 84vh;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    transform: none;
}

.blatt:target .blatt__bild {
    max-height: 84vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.blatt:target .blatt__marke {
    color: rgba(255, 255, 255, .78);
    margin: 0;
    order: 3;
}

.blatt:target .blatt__zu {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    order: 1;
    align-self: flex-end;
    padding: .45rem .9rem;
    border-radius: var(--radius-klein);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-family: var(--sans);
    font-size: .8125rem;
    letter-spacing: .04em;
    text-decoration: none;
}

.blatt:target .blatt__zu:hover,
.blatt:target .blatt__zu:focus-visible {
    background: rgba(255, 255, 255, .22);
}

.rubrikliste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.artikelkarte {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: var(--raum-5);
    margin-bottom: var(--raum-4);
    scroll-margin-top: var(--raum-6);
}

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

.artikelkarte__marken {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-2);
}

.artikelkarte__dach {
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--akzent);
    margin: 0 0 var(--raum-2);
}

.artikelkarte__schlagzeile {
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
    line-height: 1.15;
    margin: 0 0 var(--raum-3);
}

/* Artikelvorspann, Artikeltext und Anriss sind der Zeitungstext selbst.
   Serif ist Absicht, siehe oben. */
.artikelkarte__vorspann {
    font-family: var(--serif);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--tinte-weich);
    margin-bottom: var(--raum-4);
}

.artikelkarte__text {
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: var(--lesebreite);
}

/* Anriss vor dem Kauf: hoechstens 180 Zeichen, serverseitig gekuerzt. */
.artikelkarte__anriss {
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: var(--lesebreite);
    margin: 0 0 var(--raum-3);
}

.artikelkarte__gesperrt {
    margin: 0;
    padding-left: var(--raum-3);
    border-left: 2px solid var(--linie);
}

.artikelkarte__text p {
    margin: 0 0 var(--raum-4);
}

.artikelkarte__herkunft {
    margin: var(--raum-4) 0 0;
    padding-top: var(--raum-3);
    border-top: 1px solid var(--linie-zart);
}

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

.artikelkarte__bearbeiten > summary {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    cursor: pointer;
    font-family: var(--sans);
    font-size: .9375rem;
    font-weight: 650;
    color: var(--akzent);
    padding: .35em .1em;
    list-style: none;
}

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

.artikelkarte__bearbeiten > summary::before {
    content: "▸";
    display: inline-block;
    transition: transform .15s ease;
}

.artikelkarte__bearbeiten[open] > summary::before {
    transform: rotate(90deg);
}

.artikelkarte__bearbeiten[open] > summary {
    margin-bottom: var(--raum-4);
}


/* ==========================================================================
   11  Korrekturschleife

   Die Ansicht nach der Zahlung. Anders als die frühere Vorschau verbirgt sie
   nichts: kein Wasserzeichen, keine Rasterbilder, keine gekürzten Anrisse.
   Sie soll sich deshalb auch so anfühlen — ruhig, lesbar, mit viel Weißraum
   und Werkzeugen, die danebenstehen statt davor.

   Die Artikelkarten aus Abschnitt 10 werden weiterverwendet; hier steht nur,
   was zusätzlich gebraucht wird.
   ========================================================================== */

.korrektur__kopfbereich {
    padding-bottom: var(--raum-5);
    border-bottom: 1px solid var(--linie);
}

/* Der Zähler wird auffällig, sobald das Kontingent aufgebraucht ist —
   gesperrt wird trotzdem nichts. */
.kachel--warn {
    border-color: var(--warn);
    background: var(--warn-blass);
}

.kachel--warn .kachel__wert {
    color: var(--warn);
}

/* --------------------------------------------------------------------------
   Werkzeugkasten
   -------------------------------------------------------------------------- */
.werkzeuge {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-4);
}

.werkzeug {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: var(--raum-5);
    scroll-margin-top: var(--raum-6);
}

.werkzeug__titel {
    font-size: 1.125rem;
    margin: 0 0 var(--raum-2);
}

.werkzeug__text {
    color: var(--tinte-weich);
    font-size: .9375rem;
    line-height: 1.6;
    margin: 0 0 var(--raum-4);
    max-width: var(--lesebreite);
}

.werkzeug .aktionen {
    margin-top: var(--raum-4);
    flex-wrap: wrap;
    align-items: center;
}

.werkzeug .aktionen form {
    display: inline-flex;
}

/* --------------------------------------------------------------------------
   Tonwahl — dieselbe Idee wie die Pillwahl im Konfigurator, nur mit
   Erklärung unter dem Namen: Ein Tonwechsel schreibt die ganze Zeitung neu,
   das soll niemand versehentlich anklicken.
   -------------------------------------------------------------------------- */
.tonwahl {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-2);
}

.tonwahl__eintrag {
    position: relative;
    display: block;
    cursor: pointer;
}

.tonwahl__eintrag input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.tonwahl__eintrag span {
    display: block;
    padding: var(--raum-3) var(--raum-4);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--papier);
    transition: border-color .12s ease, background .12s ease;
}

.tonwahl__eintrag strong {
    display: block;
    font-family: var(--sans);
    font-size: .9375rem;
}

.tonwahl__eintrag small {
    display: block;
    margin-top: .15rem;
    color: var(--muted);
    font-size: .8125rem;
    line-height: 1.45;
}

.tonwahl__eintrag input:checked + span {
    border-color: var(--akzent);
    background: var(--akzent-blass);
}

.tonwahl__eintrag input:focus-visible + span {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Artikel: die Werkzeuge unter dem Text
   -------------------------------------------------------------------------- */
.artikelkarte__werkzeuge {
    margin-top: var(--raum-4);
    border-top: 1px solid var(--linie-zart);
    padding-top: var(--raum-2);
}

.artikelkarte__werkzeuge .artikelkarte__bearbeiten {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

.artikelkarte__werkzeuge .artikelkarte__bearbeiten + .artikelkarte__bearbeiten {
    border-top: 1px solid var(--linie-zart);
    padding-top: var(--raum-2);
    margin-top: var(--raum-2);
}

/* --------------------------------------------------------------------------
   Rubriken
   -------------------------------------------------------------------------- */
.rubrikbloecke {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-4);
}

.rubrikblock {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: var(--raum-5);
}

.rubrikblock__titel {
    font-size: 1.125rem;
    margin: 0 0 var(--raum-3);
    padding-bottom: var(--raum-2);
    border-bottom: 1px solid var(--linie-zart);
}

/* Rubriken, Interview, Zitate, Anzeigen und Gruesse sind Zeitungsinhalt.
   Serif ist Absicht, siehe oben. */
.rubrikblock__einleitung {
    font-family: var(--serif);
    color: var(--tinte-weich);
    margin: 0 0 var(--raum-3);
}

.rubrikblock p {
    margin: 0 0 var(--raum-3);
}

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

.interview {
    margin: 0;
}

.interview dt {
    font-family: var(--sans);
    font-weight: 650;
    font-size: .9375rem;
    color: var(--akzent);
    margin-top: var(--raum-3);
}

.interview dt:first-child {
    margin-top: 0;
}

.interview dd {
    margin: var(--raum-1) 0 0;
    font-family: var(--serif);
    line-height: 1.65;
}

.quizliste {
    margin: 0;
    padding-left: 1.25rem;
}

.quizliste > li + li {
    margin-top: var(--raum-3);
}

.quizliste__optionen {
    list-style: none;
    margin: var(--raum-2) 0 0;
    padding: 0;
}

.quizliste__optionen li {
    padding: .15rem 0 .15rem var(--raum-4);
    position: relative;
    font-size: .9375rem;
}

.quizliste__optionen li::before {
    content: "○";
    position: absolute;
    left: 0;
    color: var(--muted);
}

.quizliste__optionen li.ist-loesung::before {
    content: "●";
    color: var(--erfolg);
}

.zitatliste,
.anzeigenliste,
.grussliste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zitatliste li + li,
.anzeigenliste li + li,
.grussliste li + li {
    margin-top: var(--raum-3);
    padding-top: var(--raum-3);
    border-top: 1px solid var(--linie-zart);
}

.zitatliste blockquote {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.zitatliste cite {
    display: block;
    margin-top: .2rem;
    font-family: var(--sans);
    font-size: .8125rem;
    font-style: normal;
    color: var(--muted);
}

.anzeigenliste strong,
.grussliste__autor {
    display: block;
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--akzent);
    margin-bottom: .15rem;
}

.anzeigenliste li,
.grussliste li {
    font-family: var(--serif);
    line-height: 1.6;
}


/* ==========================================================================
   11b  Preisstufen — die vier Auflagen als Karten
        Markup:
          <div class="stufen">                       (Preisseite, vier volle Karten)
          <div class="stufen stufen--knapp">          (Startseite, Dashboard)
            <article class="karte stufe">
              <header class="stufe__kopf">
                <p class="stufe__label">…</p>
                <p class="stufe__kurz">…</p>
              </header>
              <p class="preis preis--knapp">…</p>
              <p class="stufe__prokopf">…</p>     (nur Dashboard)
              <p class="stufe__stueck">…</p>
              <ul class="liste-check">…</ul>
              <a class="btn …">…</a>
            </article>

        Vier Karten nebeneinander sind schmal. Deshalb bekommt .stufe eine
        eigene, engere Polsterung als .karte und der Preis eine eigene, etwas
        kleinere Stufe (.preis--knapp) — sonst bricht der Betrag um.

        Kein .hebt-an auf diesen Karten: Sie tragen .reveal, und beide
        setzen transition. Das spaetere gewinnt und der Auftritt verliert
        sein Ueberblenden.
   ========================================================================== */

.stufen {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-4);
    align-items: stretch;
    /* Die Fahne ragt ueber die obere Kartenkante hinaus. */
    padding-top: .75rem;
}

.stufe {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--raum-3);
    padding: var(--raum-5);
}

/* site.css setzt ".karte + .karte { margin-top }" fuer gestapelte Karten.
   Im Raster wuerde das jede Karte ausser der ersten nach unten schieben —
   die Oberkanten laegen dann nicht mehr auf einer Linie. */
.stufen .karte + .karte {
    margin-top: 0;
}

.stufe--hervor {
    box-shadow: var(--schatten-heben);
}

/* Auszeichnung als Fahne auf der oberen Kartenkante — bewusst absolut
   positioniert, damit sie keine Zeile kostet. Sonst waere genau die
   hervorgehobene Karte hoeher und die Preise der vier Stufen laegen nicht
   mehr auf einer Linie. Der Abstand darueber kommt aus dem Raster-Gap. */
.stufe__marke {
    position: absolute;
    top: 0;
    left: var(--raum-5);
    right: var(--raum-4);
    transform: translateY(-50%);
    margin: 0;
    line-height: 1;
}

.stufe__marke .badge {
    background: var(--weiss);
}

.stufe__kopf {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.stufe__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-family: var(--sans);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    line-height: 1.25;
    color: var(--tinte);
    margin: 0;
}

.stufe__kurz {
    font-family: var(--sans);
    font-size: .9375rem;
    line-height: 1.35;
    color: var(--tinte-weich);
    margin: 0;
}

/* Der Betrag darf in der schmalen Vierer-Reihe nicht umbrechen — sonst
   faellt das Eurozeichen in die naechste Zeile. Der Zusatz darunter darf
   und soll umbrechen, deshalb bekommt er eine eigene Zeile. */
.stufe .preis {
    flex-wrap: wrap;
    white-space: nowrap;
}

.stufe .preis__zusatz {
    flex-basis: 100%;
    white-space: normal;
}

.preis--knapp {
    font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.3rem);
}

/* Preis je Exemplar bzw. der Hinweis beim reinen PDF. */
.stufe__stueck {
    display: block;
    font-family: var(--sans);
    font-size: .9375rem;
    line-height: 1.4;
    color: var(--tinte-weich);
    margin: 0;
}

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

/* --------------------------------------------------------------------------
   Der Betrag pro Kopf — nur im Dashboard, weil nur dort bekannt ist, wie
   viele Menschen mitgeschrieben haben. Er ist das ehrlichste Argument der
   Seite und bekommt deshalb ein eigenes, ruhig getoentes Feld statt einer
   weiteren Zeile Kleingedrucktem.
   -------------------------------------------------------------------------- */
.stufe__prokopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    margin: 0;
    padding: var(--raum-3);
    background: var(--akzent-weich);
    border: 1px solid var(--akzent-rand);
    border-radius: var(--radius-weit);
    font-family: var(--sans);
    font-size: .9375rem;
    color: var(--akzent-tief);
}

.stufe__prokopf strong {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--akzent-tief);
}

.stufe__rechnung {
    flex-basis: 100%;
    font-size: .8125rem;
    color: var(--tinte-weich);
}

/* Der Knopf sitzt immer unten, egal wie lang die Aufzaehlung darueber ist. */
.stufe .liste-check {
    margin-bottom: 0;
}

.stufe .btn--block {
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   Die Stufenwahl im Dashboard: Ueberschrift, Empfehlungssatz, Karten.
   Die Empfehlung ist eine Empfehlung — kein Countdown, kein
   durchgestrichener Preis, keine Vorauswahl.
   -------------------------------------------------------------------------- */
.stufenwahl__kopf {
    margin-bottom: var(--raum-4);
}

.stufenwahl__empfehlung {
    margin: var(--raum-2) 0 0;
    padding: var(--raum-3) var(--raum-4);
    background: var(--papier-warm);
    border-left: 4px solid var(--akzent);
    border-radius: 0 var(--radius-weit) var(--radius-weit) 0;
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.45;
    color: var(--tinte);
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Vergleichstabelle auf der Preisseite. Die erste Spalte benennt die Zeile
   und darf nicht umbrechen wie die Werte daneben.
   -------------------------------------------------------------------------- */
.tabelle--vergleich {
    min-width: 34rem;
}

.tabelle--vergleich th[scope="row"] {
    font-family: var(--sans);
    font-weight: 600;
    color: var(--tinte-weich);
    text-align: left;
    white-space: normal;
}

.tabelle--vergleich thead th {
    font-family: var(--sans);
    font-size: .9375rem;
    line-height: 1.25;
    vertical-align: bottom;
}

.tabelle--vergleich td {
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   12  Breakpoints
   ========================================================================== */

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

    /* Zwei Stufen nebeneinander — auf dem Handy bleibt es einspaltig,
       weil vier untereinander sonst zu weit auseinanderfallen. */
    .stufen {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .erzeugen__aktionen {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .erzeugen__aktionen .btn {
        width: auto;
    }
}

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

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

    .musterblatt__spalte--bild {
        display: block;
    }

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

    .ablauf {
        grid-template-columns: 4rem 1fr;
        gap: var(--raum-5);
    }

    .frageblock {
        grid-template-columns: 2.75rem 1fr;
        gap: var(--raum-4);
    }

    .frageblock__nummer {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.0625rem;
    }

    /* Die Aktionsspalte ist "auto" — sie wird so breit, wie ihr laengster
       Knopf. Seit auf dem Knopf ein Preis steht ("Zeitung bestellen —
       ab 49,90 €"), kann sie die Textspalte auf min-content zusammendruecken.
       Deshalb bekommt der Text eine Untergrenze; darunter bricht das Raster
       lieber einspaltig um, als eine Buchstabensaeule zu setzen. */
    .erzeugen {
        grid-template-columns: minmax(20rem, 1fr) auto;
    }

    .kaufbox {
        grid-template-columns: 1fr 18rem;
    }

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

    /* Das Wunschfeld ist das wichtigste Werkzeug und bekommt die ganze
       Breite — es steht deshalb allein in der ersten Zeile. */
    .werkzeug--breit {
        grid-column: 1 / -1;
    }

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

    .rubrikblock--breit {
        grid-column: 1 / -1;
    }

    .grussliste {
        columns: 2;
        column-gap: var(--raum-6);
    }

    .grussliste li {
        break-inside: avoid;
    }

    .grussliste li + li {
        border-top: 0;
        padding-top: 0;
    }
}

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

    /* Ab hier stehen alle vier Stufen nebeneinander — genau darum geht es
       auf der Preisseite: der Unterschied auf einen Blick. */
    .stufen {
        grid-template-columns: repeat(4, 1fr);
    }

    .stufe {
        padding: var(--raum-5);
    }

    .hero__innen {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--raum-8);
        align-items: center;
    }

    /* Erst wenn die Zeitung neben dem Text steht und Platz um sich hat,
       bekommt sie die volle Drehung. Darunter liegt sie fast gerade — sonst
       drueckt die gedrehte Ecke gegen den Bildschirmrand. */
    .hero__blatt-flaeche {
        --blatt-drehung: 2.4deg;
    }

    /* Ab hier steht die Titelseite neben dem Raster der Folgeseiten. */
    .blaetterstapel {
        grid-template-columns: minmax(16rem, 22rem) 1fr;
        align-items: start;
        gap: var(--raum-6);
    }

    .blatt--titel {
        max-width: none;
    }

    .blaetterstapel__folge {
        grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    }
}

/* --------------------------------------------------------------------------
   Sehr schmale Geraete
   -------------------------------------------------------------------------- */
@media (max-width: 22.5em) {
    .frageblock {
        grid-template-columns: 1.85rem 1fr;
        gap: var(--raum-2);
    }

    .frageblock__nummer {
        width: 1.85rem;
        height: 1.85rem;
        font-size: .8125rem;
    }

    .fragenliste__eintrag {
        padding-left: 3rem;
    }

    .musterblatt__fuss {
        grid-template-columns: 1fr;
    }

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

/* ==========================================================================
   13  Bewegung

   Dieser Abschnitt steht bewusst am Ende der Datei. Er muss nach allen
   Bausteinen kommen, die eine eigene transition mitbringen (.karte,
   .anlasskachel, .stepper__schritt): Eine spaetere Regel gleicher
   Spezifitaet gewinnt, und nur so bekommt der Auftritt seine Blende zurueck,
   ohne dass der Hover traege wird.

   Die Grundlage — .reveal, .hebt-an, die Kurven und Dauern — steht in
   site.css. Hier stehen nur die Ergaenzungen fuer den Ablauf.
   ========================================================================== */

/* Alle Eigenschaften, die auf einem .reveal-Element ueberhaupt wandern
   koennen, in einer Liste. opacity und transform machen den Auftritt, der
   Rest gehoert zum Hover — deshalb kurz. */
.reveal {
    transition:
        opacity          var(--dauer-eingang) var(--ease),
        transform        var(--dauer-mittel)  var(--ease),
        box-shadow       var(--dauer-schnell) var(--ease),
        border-color     var(--dauer-schnell) var(--ease),
        background-color var(--dauer-schnell) var(--ease),
        color            var(--dauer-schnell) var(--ease);
}

/* --------------------------------------------------------------------------
   Auftritt der Buehne

   Was ueber der Falz steht, wartet nicht auf das Scrollen: Es kommt beim
   Laden herein, Zeile fuer Zeile. Das laeuft ueber die Klassen .anim-auf und
   .anim-heran aus site.css — reine CSS-Animationen, die auch ohne
   JavaScript ablaufen und bei reduzierter Bewegung dort abgeschaltet werden,
   ohne etwas zu verstecken.
   -------------------------------------------------------------------------- */
.hero__takt-1 { animation-delay: 0s;    }
.hero__takt-2 { animation-delay: .07s;  }
.hero__takt-3 { animation-delay: .14s;  }
.hero__takt-4 { animation-delay: .21s;  }
.hero__takt-5 { animation-delay: .28s;  }
.hero__takt-6 { animation-delay: .35s;  }

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

   site.css schaltet .reveal, .anim-* und .schwebt bereits ab. Hier kommt
   dazu, was diese Datei selbst an Bewegung mitbringt: das Schweben der
   Zeitung, ihre Drehung und das Anheben beim Zeigen. Die Zeitung bleibt
   sichtbar, sie liegt nur still und gerade.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero__blatt {
        animation: none !important;
        transform: none !important;
    }

    .hero__blatt-flaeche,
    .hero__blatt-flaeche:hover,
    .hero__blatt-flaeche:focus-within {
        transform: none !important;
        transition: none !important;
    }

    .anlasskachel:hover {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   Druck
   -------------------------------------------------------------------------- */
@media print {
    .beitrag__absenden,
    .blaetterstapel,
    .kaufbox,
    .erzeugen__aktionen,
    .werkzeuge,
    .artikelkarte__werkzeuge,
    .artikelkarte__bearbeiten {
        display: none !important;
    }

    .musterblatt {
        transform: none;
        box-shadow: none;
    }

    /* Auf Papier gibt es keinen Auftritt: Alles steht sofort da, gerade und
       ohne Schatten. */
    .reveal,
    .anim-auf,
    .anim-fallen,
    .anim-heran {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .hero__blatt {
        animation: none !important;
    }

    .hero__blatt-flaeche {
        transform: none !important;
        box-shadow: none !important;
    }

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