/* =========================================================================
   Wiesenbunt & Waldgruen - Ghost theme

   The rack is dark (the wood), the packets are paper with a coloured head
   field (the print), and reading happens on paper. Colour never carries small
   text: the head field is the colour, the copy sits on paper underneath, which
   is both how a real seed packet is printed and what keeps contrast high for
   an older readership.

   Every colour is a token. A value written straight into a rule is how a
   palette drifts apart later, so there are none below :root.
   ========================================================================= */

:root {
    /* Ground */
    --wald: #17301E;
    --wald-tief: #101F14;
    --wald-hell: #21402A;
    --papier: #F4F3EE;
    --papier-tief: #E7E4D9;

    /* Ink on paper */
    --tinte: #1B2A20;
    --tinte-weich: #35453A;
    --tinte-leise: #4A5B4F;
    --linie: #8F8977;        /* dashed tear line, >=3:1 against paper */

    /* Paper on wood */
    --papier-weich: #E4E7DF;
    --papier-leise: #A7B8A9;
    --papier-leiser: #B9C6BB;
    --papier-leisest: #93A395;
    --papier-rand: #6E8272;

    /* The rack's six varieties */
    --zinnober: #C8442B;
    --zinnober-tief: #8A3520;   /* links on paper */
    --zinnober-dunkel: #A9351F; /* pressed */
    --kornblume: #35619A;
    --blatt: #5F8A2E;
    --senf: #D08A16;            /* accent on the dark ground */
    --senf-hell: #E9A833;
    --senf-tief: #A76E0F;       /* head field: the paper motif needs >=3:1 */
    --krapp: #A83D5B;
    --holunder: #63508A;
    --rinde: #7A5B3A;

    /* Focus ring: senf reads on the dark ground but fails on paper (2.6:1),
       so the ring is a token each surface overrides. */
    --fokus: var(--senf);

    /* Type */
    --schrift-display: 'Alfa Slab One', Rockwell, Georgia, serif;
    --schrift-text: 'Alegreya', Georgia, 'Times New Roman', serif;
    --schrift-sans: 'Alegreya Sans', system-ui, -apple-system, sans-serif;

    /* Rhythm. --mass is measured in the real face: 68ch of Alegreya rendered
       84 characters per line, well past the readable band, so it is 56ch. */
    --mass: 56ch;
    --breite: 76rem;
    --rand: clamp(1.25rem, 4vw, 3rem);
    --kante: 2px;
    --ziel: 44px;   /* minimum touch target */

    /* Drawn motifs. The paper colour is baked in: they are printed onto the
       colour field, not masked out of it. */
    --motiv-apfel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23F4F3EE'%3E%3Cpath d='M24 12c-3-4-9-5-13-2-5 4-5 13-1 20 3 5 7 9 10 9 2 0 3-1 4-1s2 1 4 1c3 0 7-4 10-9 4-7 4-16-1-20-4-3-10-2-13 2z'/%3E%3Cpath d='M24 12c0-4 1-7 3-9 1 3 1 6-1 8z'/%3E%3Cpath d='M26 6c3-3 7-4 10-3-1 4-5 6-9 6z'/%3E%3C/svg%3E");
    --motiv-birne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23F4F3EE'%3E%3Cpath d='M24 14c-4 0-7 3-8 7-1 3-3 5-5 8-3 5-2 12 4 15 3 2 6 2 9 2s6 0 9-2c6-3 7-10 4-15-2-3-4-5-5-8-1-4-4-7-8-7z'/%3E%3Cpath d='M23 13c0-4 0-8 2-11 1 4 1 8 0 11z'/%3E%3Cpath d='M26 5c3-2 7-2 10 0-2 3-6 4-10 3z'/%3E%3C/svg%3E");
    --motiv-margerite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23F4F3EE'%3E%3Cg%3E%3Cellipse cx='24' cy='9' rx='4.5' ry='10'/%3E%3Cellipse cx='24' cy='9' rx='4.5' ry='10' transform='rotate(45 24 24)'/%3E%3Cellipse cx='24' cy='9' rx='4.5' ry='10' transform='rotate(90 24 24)'/%3E%3Cellipse cx='24' cy='9' rx='4.5' ry='10' transform='rotate(135 24 24)'/%3E%3Cellipse cx='24' cy='9' rx='4.5' ry='10' transform='rotate(180 24 24)'/%3E%3Cellipse cx='24' cy='9' rx='4.5' ry='10' transform='rotate(225 24 24)'/%3E%3Cellipse cx='24' cy='9' rx='4.5' ry='10' transform='rotate(270 24 24)'/%3E%3Cellipse cx='24' cy='9' rx='4.5' ry='10' transform='rotate(315 24 24)'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='7'/%3E%3C/svg%3E");
    --motiv-klee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23F4F3EE'%3E%3Cellipse cx='24' cy='13' rx='9' ry='8'/%3E%3Cellipse cx='15' cy='24' rx='8' ry='8'/%3E%3Cellipse cx='33' cy='24' rx='8' ry='8'/%3E%3Cpath d='M22.5 28h3v16h-3z'/%3E%3Cpath d='M24 38c-4 0-8-2-10-6 5-1 9 1 10 6z'/%3E%3C/svg%3E");
    --motiv-kornblume: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23F4F3EE'%3E%3Cpath d='M24 6l4 10 6-7 1 10 9-4-6 8 10 2-9 5 7 7-10-1 3 10-8-6-3 10-3-10-8 6 3-10-10 1 7-7-9-5 10-2-6-8 9 4 1-10 6 7z'/%3E%3C/svg%3E");
    --motiv-aehre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23F4F3EE'%3E%3Cpath d='M22.5 20h3v24h-3z'/%3E%3Cellipse cx='24' cy='9' rx='5' ry='9'/%3E%3Cellipse cx='15' cy='19' rx='4.5' ry='8' transform='rotate(-25 15 19)'/%3E%3Cellipse cx='33' cy='19' rx='4.5' ry='8' transform='rotate(25 33 19)'/%3E%3Cellipse cx='16' cy='30' rx='4' ry='7' transform='rotate(-25 16 30)'/%3E%3Cellipse cx='32' cy='30' rx='4' ry='7' transform='rotate(25 32 30)'/%3E%3C/svg%3E");
}

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

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

body {
    margin: 0;
    background: var(--wald);
    color: var(--papier);
    font-family: var(--schrift-text);
    font-size: 1.1875rem;   /* 19px: the readership skews older */
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--papier);
    color: var(--tinte);
    padding: 0.75rem 1.25rem;
    font-family: var(--schrift-sans);
    z-index: 10;
    --fokus: var(--tinte);
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

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

/* Paper surfaces flip the ring to ink; senf on paper is 2.6:1 and fails. */
.blatt,
.packerl__flaeche { --fokus: var(--tinte); }

/* On the senf button the ring would be its own colour, so it goes to ink. */
.knopf:not(.knopf--leise) { --fokus: var(--tinte); }

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

.kopf {
    background: var(--wald-tief);
    border-bottom: var(--kante) solid var(--wald-hell);
}

.kopf__innen {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 1.25rem var(--rand);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    align-items: center;
    justify-content: space-between;
}

.marke { text-decoration: none; display: block; }

.marke__zeile {
    display: block;
    font-family: var(--schrift-sans);
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--senf);
    margin-bottom: 0.35rem;
}

.marke__name {
    display: block;
    font-family: var(--schrift-display);
    font-size: clamp(1.5rem, 3.4vw, 2.125rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.navi__liste {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    margin: 0;
    padding: 0;
    font-family: var(--schrift-sans);
    font-size: 1.0625rem;
}

.navi__punkt a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    /* 44px minimum: this readership taps with imprecise fingers. */
    min-height: var(--ziel);
    padding: 0 0.25rem;
    border-bottom: var(--kante) solid transparent;
}

.navi__punkt a:hover,
.navi__punkt--hier a {
    border-bottom-color: var(--senf);
}

/* ---------- Auftakt -------------------------------------------------- */

.auftakt {
    max-width: var(--breite);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) var(--rand) clamp(1.5rem, 4vw, 2.5rem);
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: 1fr;
    align-items: center;
}

.auftakt__titel {
    font-family: var(--schrift-display);
    font-size: clamp(2.25rem, 6vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
    /* 15ch still forced "wurde" onto a line of its own; 18ch lets the
       second line hold "wurde kein Acker." and the claim reads in two. */
    max-width: 18ch;
    text-wrap: balance;
}

.auftakt__text {
    font-size: clamp(1.1875rem, 2vw, 1.4375rem);
    line-height: 1.55;
    max-width: 34ch;
    margin: 0 0 2rem;
    color: var(--papier-weich);
}

.auftakt__handlung {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin: 0;
}

.motiv { width: 100%; height: auto; }

/* ---------- Knopf ---------------------------------------------------- */

.knopf {
    display: inline-flex;
    align-items: center;
    min-height: var(--ziel);
    font-family: var(--schrift-sans);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    padding: 0.7rem 1.6rem;
    background: var(--senf);
    color: var(--tinte);
    border: var(--kante) solid var(--senf);
    transition: background 180ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

.knopf--leise {
    background: transparent;
    color: var(--papier);
    border-color: var(--papier-rand);
}

.knopf--leise:hover { background: var(--wald-hell); border-color: var(--papier); }

/* ---------- Auslage --------------------------------------------------- */

.auslage {
    max-width: var(--breite);
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem) var(--rand) clamp(3.5rem, 8vw, 6rem);
}

.auslage__titel {
    font-family: var(--schrift-sans);
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--papier-leise);
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: var(--kante) solid var(--wald-hell);
}

.regal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.leer {
    max-width: 46ch;
    color: var(--papier-leiser);
    font-size: 1.1875rem;
    margin: 2rem 0 0;
}

/* ---------- Packerl ---------------------------------------------------- */

.packerl { display: flex; }

.packerl__flaeche {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--papier);
    color: var(--tinte);
    text-decoration: none;
    border: var(--kante) solid var(--tinte);
    /* The variety colour also rides on the top edge, so a packet carrying a
       photograph still belongs to the same rack. */
    border-top: 6px solid var(--zinnober);
    box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.55);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.packerl__flaeche:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px -14px rgb(0 0 0 / 0.65);
}

/* The head field: the packet's printed colour area with its drawn motif. */
.packerl__flaeche::before {
    content: "";
    display: block;
    height: 8.5rem;
    background-color: var(--zinnober);
    background-image: var(--motiv-apfel);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 4.75rem;
    border-bottom: var(--kante) solid var(--tinte);
}

/* --- Variety by position: the fallback for untagged posts --------------- */
.packerl:nth-child(6n+2) .packerl__flaeche { border-top-color: var(--kornblume); }
.packerl:nth-child(6n+2) .packerl__flaeche::before {
    background-color: var(--kornblume);
    background-image: var(--motiv-kornblume);
}
.packerl:nth-child(6n+3) .packerl__flaeche { border-top-color: var(--blatt); }
.packerl:nth-child(6n+3) .packerl__flaeche::before {
    background-color: var(--blatt);
    background-image: var(--motiv-klee);
}
.packerl:nth-child(6n+4) .packerl__flaeche { border-top-color: var(--senf-tief); }
.packerl:nth-child(6n+4) .packerl__flaeche::before {
    background-color: var(--senf-tief);
    background-image: var(--motiv-aehre);
}
.packerl:nth-child(6n+5) .packerl__flaeche { border-top-color: var(--krapp); }
.packerl:nth-child(6n+5) .packerl__flaeche::before {
    background-color: var(--krapp);
    background-image: var(--motiv-margerite);
}
.packerl:nth-child(6n+6) .packerl__flaeche { border-top-color: var(--holunder); }
.packerl:nth-child(6n+6) .packerl__flaeche::before {
    background-color: var(--holunder);
    background-image: var(--motiv-birne);
}

/* --- Variety by tag: what the post is actually about --------------------
   A tag in Ghost's sidebar (apfel, birne, blume, klee, gras, kornblume) beats
   the position, so the motif stops contradicting the text. These rules sit
   after the nth-child block on purpose.                                    */
.packerl--apfel .packerl__flaeche { border-top-color: var(--zinnober); }
.packerl--apfel .packerl__flaeche::before {
    background-color: var(--zinnober);
    background-image: var(--motiv-apfel);
}
.packerl--birne .packerl__flaeche { border-top-color: var(--holunder); }
.packerl--birne .packerl__flaeche::before {
    background-color: var(--holunder);
    background-image: var(--motiv-birne);
}
.packerl--blume .packerl__flaeche { border-top-color: var(--krapp); }
.packerl--blume .packerl__flaeche::before {
    background-color: var(--krapp);
    background-image: var(--motiv-margerite);
}
.packerl--klee .packerl__flaeche { border-top-color: var(--blatt); }
.packerl--klee .packerl__flaeche::before {
    background-color: var(--blatt);
    background-image: var(--motiv-klee);
}
.packerl--gras .packerl__flaeche { border-top-color: var(--senf-tief); }
.packerl--gras .packerl__flaeche::before {
    background-color: var(--senf-tief);
    background-image: var(--motiv-aehre);
}
.packerl--kornblume .packerl__flaeche { border-top-color: var(--kornblume); }
.packerl--kornblume .packerl__flaeche::before {
    background-color: var(--kornblume);
    background-image: var(--motiv-kornblume);
}

/* A photograph takes the head field's place. The coloured top edge stays, so
   a rack that is half drawn and half photographed still reads as one rack. */
.packerl--mit-bild .packerl__flaeche::before { display: none; }

.packerl__bild {
    display: block;
    border-bottom: var(--kante) solid var(--tinte);
    background: var(--papier-tief);
}

.packerl__bild img {
    width: 100%;
    height: 11rem;
    object-fit: cover;
}

.packerl__zeit {
    display: block;
    font-family: var(--schrift-sans);
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tinte-leise);
    padding: 1.125rem 1.25rem 0;
}

.packerl__titel {
    font-family: var(--schrift-display);
    font-size: 1.4375rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0.5rem 0 0;
    padding: 0 1.25rem;
    text-wrap: balance;
}

.packerl__text {
    margin: 0.75rem 0 0;
    padding: 0 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--tinte-weich);
    flex: 1 1 auto;
}

.packerl__fuss {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 0.875rem 1.25rem;
    border-top: var(--kante) dashed var(--linie);
    font-family: var(--schrift-sans);
    font-size: 0.9375rem;
}

.packerl__weiter { font-weight: 700; }
.packerl__flaeche:hover .packerl__weiter { text-decoration: underline; text-underline-offset: 3px; }

/* Where a real packet prints its sowing window. Reading time was the most
   template-generic thing on the page and sat in its most structural slot. */
.packerl__saison { color: var(--tinte-leise); }

/* ---------- Blatt: reading happens on paper --------------------------- */

.blatt {
    background: var(--papier);
    color: var(--tinte);
    max-width: var(--breite);
    margin: 0 auto clamp(3rem, 7vw, 5rem);
    padding: clamp(2rem, 5vw, 4rem) var(--rand) clamp(2.5rem, 6vw, 4rem);
    border: var(--kante) solid var(--tinte);
    /* Carries the variety colour of the packet the reader came from. */
    border-top: 6px solid var(--blatt);
}

.blatt__kopf { max-width: var(--mass); }

.blatt__zeit {
    font-family: var(--schrift-sans);
    font-size: 0.875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tinte-leise);
    margin: 0 0 0.75rem;
}

.blatt__titel {
    font-family: var(--schrift-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
}

.blatt__vorsatz {
    font-size: 1.3125rem;
    line-height: 1.5;
    color: var(--tinte-weich);
    margin: 1.25rem 0 0;
    font-style: italic;
}

.blatt__bild {
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    max-width: 60rem;
}

.blatt__bild img {
    border: var(--kante) solid var(--tinte);
    /* Reserves the space before the file arrives, so nothing jumps. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
}

.blatt__bild figcaption {
    font-family: var(--schrift-sans);
    font-size: 0.9375rem;
    color: var(--tinte-leise);
    margin-top: 0.625rem;
}

.blatt__inhalt {
    max-width: var(--mass);
    margin-top: clamp(2rem, 4vw, 2.75rem);
    font-size: 1.1875rem;
}

.blatt__inhalt > * + * { margin-top: 1.35rem; }

.blatt__inhalt h2,
.blatt__inhalt h3 {
    font-family: var(--schrift-display);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-top: 2.75rem;   /* more space above a heading than below it */
    margin-bottom: 0.85rem;
    text-wrap: balance;
}

.blatt__inhalt h2 { font-size: 1.75rem; }
.blatt__inhalt h3 { font-size: 1.375rem; }

.blatt__inhalt a {
    color: var(--zinnober-tief);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.blatt__inhalt a:hover { color: var(--zinnober); }

.blatt__inhalt ul,
.blatt__inhalt ol { padding-left: 1.4rem; }
.blatt__inhalt li + li { margin-top: 0.5rem; }

.blatt__inhalt blockquote {
    margin-left: 0;
    margin-right: 0;
    padding: 1.25rem 0;
    /* The packet's tear line, not a coloured side tab. */
    border-top: var(--kante) dashed var(--linie);
    border-bottom: var(--kante) dashed var(--linie);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--tinte-weich);
}

.blatt__inhalt blockquote p:first-child { margin-top: 0; }
.blatt__inhalt blockquote p:last-child { margin-bottom: 0; }

.blatt__inhalt hr {
    border: none;
    border-top: var(--kante) dashed var(--linie);
    margin: 2.5rem 0;
}

.blatt__inhalt figure { margin-left: 0; margin-right: 0; }
.blatt__inhalt figcaption {
    font-family: var(--schrift-sans);
    font-size: 0.9375rem;
    color: var(--tinte-leise);
    margin-top: 0.5rem;
}

.blatt__inhalt img { border: var(--kante) solid var(--tinte); }

/* Ghost editor cards */
.blatt__inhalt .kg-width-wide { max-width: min(100%, 52rem); }
.blatt__inhalt .kg-width-full { max-width: 100%; }
.blatt__inhalt .kg-gallery-row { display: flex; gap: 0.75rem; }
.blatt__inhalt .kg-gallery-image { flex: 1 1 0; }

/* The rule used to run a full container wide under a much narrower column. */
.blatt__fuss {
    max-width: var(--mass);
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 1.75rem;
    border-top: var(--kante) solid var(--tinte);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.blatt__fuss .knopf {
    background: var(--zinnober);
    border-color: var(--zinnober);
    color: var(--papier);
    --fokus: var(--tinte);
}

.blatt__fuss .knopf:hover {
    background: var(--zinnober-dunkel);
    border-color: var(--zinnober-dunkel);
}

/* The session ends here, so it ends pointing somewhere. */
.blatt__weiter {
    font-family: var(--schrift-sans);
    font-size: 1rem;
    color: var(--tinte-leise);
    margin: 0;
    max-width: 30ch;
}

.blatt__weiter a { color: var(--zinnober-tief); text-underline-offset: 3px; }

/* ---------- Blaettern ------------------------------------------------- */

.blaettern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: clamp(2rem, 5vw, 3rem);
    padding-top: 1.5rem;
    border-top: var(--kante) solid var(--wald-hell);
    font-family: var(--schrift-sans);
}

.blaettern a {
    text-decoration: none;
    border-bottom: var(--kante) solid var(--senf);
    display: inline-flex;
    align-items: center;
    min-height: var(--ziel);
}

.blaettern__stand { color: var(--papier-leise); }

/* ---------- Fuss ------------------------------------------------------ */

.fuss {
    background: var(--wald-tief);
    border-top: var(--kante) solid var(--wald-hell);
    padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem;
}

.fuss__innen {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 var(--rand);
    display: grid;
    gap: 2rem clamp(2rem, 5vw, 4rem);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.fuss__name {
    font-family: var(--schrift-display);
    font-size: 1.375rem;
    margin: 0 0 0.5rem;
}

.fuss__satz { margin: 0; color: var(--papier-leiser); max-width: 30ch; }

.fuss__ueberschrift {
    font-family: var(--schrift-sans);
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--senf);
    margin: 0 0 0.5rem;
}

.fuss__spalte p { margin: 0; }

.fuss a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Footer links measured 26px high; they carry the same target as the rest. */
.fuss__post a,
.fuss__spalte--navi .navi__punkt a {
    display: inline-flex;
    align-items: center;
    min-height: var(--ziel);
}

.fuss__spalte--navi .navi__liste {
    display: block;
    font-family: var(--schrift-sans);
    font-size: 1rem;
}

.fuss__spalte--navi .navi__punkt a {
    padding: 0;
    border-bottom: 1px solid transparent;
}

.fuss__spalte--navi .navi__punkt a:hover { border-bottom-color: var(--senf); }

.fuss__zeile {
    max-width: var(--breite);
    margin: clamp(2rem, 5vw, 3rem) auto 0;
    padding: 1.25rem var(--rand) 0;
    border-top: var(--kante) solid var(--wald-hell);
    font-family: var(--schrift-sans);
    font-size: 0.9375rem;
    color: var(--papier-leisest);
}

/* ---------- Breiter Bildschirm ---------------------------------------- */

@media (min-width: 56rem) {
    .auftakt {
        /* The claim needs room for "Diese Wiese wurde" on one line; at an
           even split the grid column cut it and left "wurde" orphaned. */
        grid-template-columns: 1.3fr 0.7fr;
        padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 4vw, 3rem);
    }
}

/* On a phone the drawing ate a whole screen between the buttons and the
   first packet. */
@media (max-width: 55.999rem) {
    .auftakt__motiv { max-width: 24rem; margin: 0 auto; }
}

/* ---------- Bewegung --------------------------------------------------
   One authored moment: the packets settle onto the rack in reading order,
   from an already-visible state. Nothing else animates on load.            */

@media (prefers-reduced-motion: no-preference) {
    .packerl {
        animation: legen 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: calc(var(--verzug, 0) * 55ms);
    }
    .packerl:nth-child(1)  { --verzug: 0; }
    .packerl:nth-child(2)  { --verzug: 1; }
    .packerl:nth-child(3)  { --verzug: 2; }
    .packerl:nth-child(4)  { --verzug: 3; }
    .packerl:nth-child(5)  { --verzug: 4; }
    .packerl:nth-child(6)  { --verzug: 5; }
    .packerl:nth-child(7)  { --verzug: 6; }
    .packerl:nth-child(8)  { --verzug: 7; }
    .packerl:nth-child(n+9) { --verzug: 8; }
}

@keyframes legen {
    from { opacity: 0.35; transform: translateY(10px) rotate(-0.4deg); }
    to   { opacity: 1; transform: none; }
}

@media print {
    body { background: #fff; color: #000; }
    .kopf, .fuss, .auftakt__handlung, .blatt__fuss { display: none; }
    .blatt { border: none; }
}