/* Krisenfest · Der 10-Tage-Vorsorgeplan
   Redesign 27.10.2026, Richtung „Feldhandbuch“ (Michaels Wahl): Rasterpapier, Olivgrün, schwarze Tinte,
   Schablonenschrift für Überschriften, Schreibmaschine für Formulare und Etiketten, ein Rostrot nur für Stempel.
   Rhythmus: Nacht (Stromausfall, Fotos, Gefühl) wechselt mit Papier (Plan, Ordnung, Abhaken).
   Ein Signalgelb wie Laternenlicht trägt jeden Kaufknopf und sonst fast nichts.
   Mobil zuerst. Breakpoints 720 (Tablet) und 1040 (Desktop). */

:root {
  --papier: #d9d2b6;
  --papier-hell: #efead6;
  --papier-tief: #c9c1a0;
  --tinte: #161712;
  --tinte-leise: #3f4134;
  --oliv: #3f4a1f;
  --oliv-tief: #2c3415;
  --nacht: #14160f;
  --nacht-2: #1e2117;
  --nacht-tief: #0d0e09;
  --creme: #ece6cc;
  --creme-leise: #c3bda3;
  --signal: #f2b33d;
  --signal-tief: #d9961e;
  --rost: #a33a12;
  --rost-text: #8c2f0c;

  --stencil: "Stardos Stencil", Impact, "Arial Narrow Bold", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rand: 16px;
  --breite: 1200px;
  --raster: linear-gradient(rgba(63,74,31,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(63,74,31,.13) 1px, transparent 1px);
  --raster-nacht: linear-gradient(rgba(236,230,204,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(236,230,204,.045) 1px, transparent 1px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } /* hidden für Safari unter 16 */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background-color: var(--papier);
  background-image: var(--raster);
  background-size: 32px 32px;
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
strong, b { font-weight: 700; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.papier :focus-visible, .brief :focus-visible { outline-color: var(--rost); }
[hidden], [data-platzhalter] { display: none !important; }

.rahmen { position: relative; width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.lese { max-width: 760px; margin: 0 auto; padding: 0 var(--rand); }
.mitte { text-align: center; }
.leise { color: var(--tinte-leise); }
.nacht .leise, .hero .leise { color: var(--creme-leise); }
.klein { font-size: .9rem; }
.gross { font-size: 1.16em; line-height: 1.55; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; }
h2 {
  font-family: var(--stencil); text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.75rem, 1.15rem + 2.5vw, 2.85rem); line-height: 1.04;
  margin-bottom: .55em; text-wrap: balance;
}
h3 { font-family: var(--stencil); font-size: 1.3rem; line-height: 1.12; letter-spacing: .01em; margin-bottom: .4em; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 64px 0; position: relative; }
.abschnitt--knapp { padding: 56px 0 24px; }
.abschnitt--ohne-oben { padding-top: 0; }
.abschnitt--brief { padding-top: 8px; }
.papier { background-color: var(--papier); background-image: var(--raster); background-size: 32px 32px; color: var(--tinte); }
.nacht { background-color: var(--nacht); background-image: var(--raster-nacht); background-size: 32px 32px; color: var(--creme); }
.abschnitt__nr {
  font: 700 .74rem/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--rost-text); margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.abschnitt__nr::after { content: ""; flex: 1; max-width: 120px; border-top: 2px solid currentColor; }
.abschnitt__nr--hell { color: var(--signal); }
.kopfzeile-abschnitt { margin: 0 auto 30px; max-width: 1000px; }
.kopfzeile-abschnitt--mitte { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.titel-gross { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem); }

.raster-zwei { display: grid; gap: 40px; align-items: center; }
.spalte-text > p:not(.etikett):not(.abschnitt__nr) { max-width: 36em; }

/* ---------- Etikett (Prägeband) ---------- */
.etikett {
  display: inline-block; margin: 0 0 16px; padding: 6px 10px 5px;
  background: var(--tinte); color: var(--papier-hell);
  font: 600 .74rem/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 3px 3px 0 rgba(22,23,18,.25);
}
.etikett--hell, .hero .etikett { background: var(--creme); color: var(--tinte); box-shadow: 3px 3px 0 rgba(0,0,0,.45); }

/* ---------- Knöpfe ---------- */
.knopf {
  position: relative;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 11px 18px 11px 20px;
  background: var(--signal); color: var(--tinte);
  border: 3px solid var(--tinte);
  box-shadow: 5px 5px 0 var(--tinte);
  font: 700 1rem/1.15 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; text-align: left;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.knopf small { display: block; margin-top: 3px; font: 500 .82rem/1.25 var(--sans); letter-spacing: 0; text-transform: none; }
.knopf__pfeil { flex: none; width: 20px; height: 20px; transition: transform .15s ease; }
.knopf:hover { background: #f6c058; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tinte); }
.knopf:hover .knopf__pfeil { transform: translateX(3px); }
.knopf:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--tinte); }
.nacht .knopf, .hero .knopf, .bildband .knopf { box-shadow: 5px 5px 0 #000, 0 0 46px -6px rgba(242,179,61,.42); }
.nacht .knopf:hover, .hero .knopf:hover { box-shadow: 7px 7px 0 #000, 0 0 52px -4px rgba(242,179,61,.5); }
.knopf--voll { width: 100%; }
@media (max-width: 719px) { .knopf { width: 100%; font-size: .92rem; letter-spacing: .02em; padding-left: 16px; padding-right: 14px; } }

.knopf-zeile { display: grid; gap: 12px; justify-items: start; margin-top: 26px; }
.knopf-zeile--mitte { justify-items: center; text-align: center; margin-top: 36px; }
.sicher { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 .8rem/1.4 var(--mono); color: var(--tinte-leise); }
.sicher svg { flex: none; width: 17px; height: 17px; }
.nacht .sicher, .hero .sicher { color: var(--creme-leise); }

/* ---------- Marke ---------- */
.marke { display: inline-flex; align-items: center; gap: 10px; }
.marke__zeichen { width: 32px; height: 37px; flex: none; }
.marke__text { display: grid; line-height: 1; }
.marke__text b { font: 700 1.3rem/1 var(--stencil); letter-spacing: .07em; text-transform: uppercase; }
.marke__text small { margin-top: 3px; font: 600 .62rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .82; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--nacht); color: var(--creme); }
.hero__foto { position: absolute; z-index: -2; top: 0; left: 0; right: 0; height: 640px; }
.hero__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 30% 22%;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 98%);
          mask-image: linear-gradient(180deg, #000 45%, transparent 98%);
}
.hero::before {
  /* Abdunklung über dem Foto: oben etwas Laternenlicht, unter dem Text fast Nacht */
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,22,15,.28) 0%, rgba(20,22,15,.55) 16%, rgba(20,22,15,.78) 36%, rgba(20,22,15,.86) 60%, var(--nacht) 640px);
}
.kopf { position: relative; z-index: 2; }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; border-bottom: 2px solid rgba(236,230,204,.22); }
.kopf__blatt { display: none; font: 600 .74rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--creme-leise); }

.hero__raster { display: grid; gap: 34px; padding-top: 18px; padding-bottom: 52px; }
.hero .etikett { font-size: .68rem; margin-bottom: 12px; }
.hero h1 {
  font-family: var(--stencil); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.72rem, 1.1rem + 2.9vw, 3.35rem); line-height: 1.02; letter-spacing: .005em;
  margin: 0 0 12px; text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,.65);
}
.hero__sub { font-size: 1.02rem; line-height: 1.45; margin: 0; color: var(--creme); max-width: 32em; text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.hero .knopf-zeile { margin-top: 18px; gap: 10px; }

/* Zahlenreihe: die drei Stufen aus dem Produkt */
.zahlen { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 560px; }
.zahlen li { display: grid; align-content: start; gap: 6px; padding: 0 10px; min-width: 0; }
.zahlen li:first-child { padding-left: 0; }
.zahlen li + li { border-left: 2px dashed rgba(236,230,204,.3); }
.zahlen b { font: 700 2.3rem/1 var(--stencil); color: var(--signal); white-space: nowrap; }
.zahlen b span { font: 600 .78rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--creme); margin-left: 2px; }
.zahlen > li > span { font-size: .8rem; line-height: 1.3; color: var(--creme-leise); }

/* ---------- Produkt im Hero (statt Rechner: der Blick bleibt beim Kauf) ---------- */
.hero__produkt { margin: 0 auto; max-width: 340px; }
.hero__produkt img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.hero__produkt figcaption { margin-top: 10px; text-align: center; font: 600 .7rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--creme); opacity: .85; }
@media (min-width: 1040px) { .hero__produkt { max-width: none; } }

/* ---------- Klemmbrett (Prüfkarte) ---------- */
.klemmbrett, .check, .pruefkarte {
  position: relative; color: var(--tinte);
  background-color: var(--papier-hell); background-image: var(--raster); background-size: 24px 24px;
  border: 3px solid var(--tinte);
}
.klemmbrett { padding: 34px 18px 20px; box-shadow: 10px 10px 0 rgba(0,0,0,.55); }
.klemmbrett__klammer {
  position: absolute; top: -17px; left: 50%; width: 124px; height: 32px; margin-left: -62px; z-index: 2;
  background: linear-gradient(180deg, #d4d3c6 0%, #9c9b8c 55%, #74736a 100%);
  border: 2px solid var(--tinte); border-radius: 8px 8px 4px 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 4px 0 rgba(0,0,0,.35);
}
.klemmbrett__klammer::after { content: ""; position: absolute; left: 50%; top: 7px; width: 34px; height: 9px; margin-left: -17px; border-radius: 6px; background: var(--tinte); }
.klemmbrett__kopf {
  display: flex; justify-content: space-between; gap: 10px;
  padding-bottom: 9px; margin-bottom: 14px; border-bottom: 2px dashed var(--tinte);
  font: 700 .7rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.klemmbrett__titel { font-size: 1.55rem; text-transform: uppercase; line-height: 1.02; margin: 0 0 16px; padding-right: 92px; }
.stempel {
  position: absolute; z-index: 1; pointer-events: none;
  color: var(--rost); border: 4px solid currentColor;
  font-family: var(--stencil); text-transform: uppercase; line-height: 1;
  mix-blend-mode: multiply; opacity: .9;
}
.stempel--rund {
  top: 62px; right: 14px; width: 86px; height: 86px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; font-size: .9rem; letter-spacing: .1em;
  transform: rotate(-14deg);
  box-shadow: inset 0 0 0 3px var(--papier-hell), inset 0 0 0 5px currentColor;
}
.stempel--rund b { display: block; font-size: 2.2rem; letter-spacing: 0; }
.stempel--eckig { top: 16px; right: 16px; padding: 6px 10px 5px; font-size: 1.15rem; letter-spacing: .12em; transform: rotate(7deg); }

.wahl { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.wahl legend { padding: 0; margin-bottom: 8px; font: 700 .72rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.wahl__reihe { display: grid; gap: 6px; }
.wahl--personen .wahl__reihe { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wahl--tage .wahl__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wahl label { position: relative; display: block; cursor: pointer; }
.wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wahl label > span {
  display: grid; place-items: center; align-content: center; min-height: 46px; padding: 4px;
  border: 2.5px solid var(--tinte); background: rgba(255,255,255,.35);
  font: 700 1.35rem/1 var(--stencil); text-align: center;
  transition: background-color .15s ease, color .15s ease;
}
.wahl--tage label > span { font-size: 1.15rem; min-height: 54px; }
.wahl label small { display: block; margin-top: 4px; font: 600 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.wahl label:hover > span { background: rgba(242,179,61,.35); }
.wahl input:checked + span { background: var(--tinte); color: var(--signal); }
.wahl input:focus-visible + span { outline: 3px solid var(--rost); outline-offset: 2px; }

.ergebnis { display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: center; margin: 4px 0 12px; padding: 14px 0; border-top: 2px dashed var(--tinte); border-bottom: 2px dashed var(--tinte); }
.kanister {
  position: relative; width: 54px; height: 72px; margin-top: 8px;
  border: 3px solid var(--tinte); border-radius: 5px 12px 4px 4px; background: rgba(255,255,255,.4);
  background-image: repeating-linear-gradient(180deg, transparent 0 13px, rgba(22,23,18,.35) 13px 15px);
}
.kanister::before { content: ""; position: absolute; top: -11px; left: 6px; width: 16px; height: 8px; background: var(--tinte); border-radius: 2px 2px 0 0; }
.kanister::after { content: ""; position: absolute; top: -10px; right: 6px; width: 20px; height: 7px; border: 3px solid var(--tinte); border-bottom: 0; border-radius: 6px 6px 0 0; }
.kanister__fuellung { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--f, .67) * 100%); background: var(--oliv); transition: height .5s cubic-bezier(.3,.9,.3,1); }
.ergebnis__zahl { margin: 0; font: 700 1.05rem/1 var(--stencil); text-transform: uppercase; letter-spacing: .02em; }
.ergebnis__zahl output { display: block; font-size: 3.2rem; line-height: .95; letter-spacing: 0; color: var(--tinte); }
.ergebnis__rechnung { margin: 6px 0 0; font: 500 .8rem/1.3 var(--mono); color: var(--tinte-leise); }
.klemmbrett__beleg { margin: 0 0 10px; padding-left: 11px; border-left: 4px solid var(--rost); font-size: .9rem; line-height: 1.45; font-style: italic; }
.klemmbrett__hinweis { margin: 0 0 16px; font-size: .8rem; line-height: 1.45; color: var(--tinte-leise); }
.klemmbrett .knopf { box-shadow: 5px 5px 0 var(--tinte); }

/* Kurzer Auftritt nach dem Laden: Stempel drückt auf, das Klemmbrett legt sich hin */
@media (prefers-reduced-motion: no-preference) {
  .hero .stempel--rund { animation: stempeln .5s cubic-bezier(.3,1.6,.5,1) .7s both; }
  .hero__karte .klemmbrett { animation: hinlegen .7s cubic-bezier(.2,.9,.3,1) .15s both; }
}
@keyframes stempeln { from { opacity: 0; transform: rotate(-24deg) scale(1.9); } to { opacity: .9; transform: rotate(-14deg) scale(1); } }
@keyframes hinlegen { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Kaufbox (Bestellschein) ---------- */
.kaufbox {
  position: relative; display: grid; color: var(--tinte);
  background: var(--papier-hell); border: 3px solid var(--tinte);
  box-shadow: 10px 10px 0 var(--tinte);
  scroll-margin-top: 24px;
}
.nacht .kaufbox { box-shadow: 10px 10px 0 #000, 0 30px 80px -30px rgba(242,179,61,.25); }
.kaufbox__streifen {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 14px; background: var(--tinte); color: var(--papier-hell);
  font: 700 .7rem/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.kaufbox__bild { position: relative; overflow: hidden; border-bottom: 3px solid var(--tinte); background: var(--nacht); }
.kaufbox__bild img { width: 100%; height: 250px; object-fit: cover; object-position: 50% 42%; }
.kaufbox__marke {
  position: absolute; left: 12px; bottom: 12px; padding: 5px 9px 4px;
  background: var(--tinte); color: var(--creme);
  font: 700 .68rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.kaufbox__text { padding: 20px 18px 22px; }
.kaufbox__kopf { margin: 0 0 6px; font: 700 .74rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rost-text); }
.kaufbox__titel { margin: 0 0 12px; font: 700 1.6rem/1.04 var(--stencil); text-transform: uppercase; letter-spacing: .01em; }
.kaufbox__zeile { font-size: .98rem; margin-bottom: 16px; }
.preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 12px; }
.preis b { font: 700 3.2rem/1 var(--stencil); }
.preis span { font: 600 .78rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-leise); }
.vertrauen { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.vertrauen li { display: flex; align-items: center; gap: 8px; font: 500 .78rem/1.35 var(--mono); color: var(--tinte-leise); }
.vertrauen svg { flex: none; width: 16px; height: 16px; color: var(--oliv); }
.kaufbox .liste-haken { margin: 4px 0 14px; }
.kaufbox .liste-haken li { font-size: .98rem; }

/* Im Brief: kleiner, Bild als schmale Spalte */
.kaufbox--brief { margin: 34px 0 40px; clear: both; }
.brief h2, .brief figure:not(.seitenbild), .brief .vergleich { clear: both; }
.kaufbox__bild--klein img { height: 170px; }

/* ---------- Haken- und Kreuzlisten ---------- */
.liste-haken, .liste-nicht { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; gap: 11px; }
.liste-haken li, .liste-nicht li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; line-height: 1.45; }
.liste-haken svg, .liste-nicht svg { width: 22px; height: 22px; margin-top: 1px; }
.liste-haken svg { color: var(--oliv); }
.liste-nicht svg { color: var(--rost); }
.liste-haken--hell svg { color: var(--signal); }
.register {
  display: inline-block; margin-left: 4px; padding: 2px 7px 1px; vertical-align: 1px;
  background: var(--oliv); color: var(--creme);
  font: 700 .66rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- Bildband (Problem) ---------- */
.bildband { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; min-height: 600px; background: var(--nacht); color: var(--creme); }
.bildband__foto { position: absolute; inset: 0; z-index: -2; }
.bildband__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.bildband::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,22,15,.1) 0%, rgba(20,22,15,.35) 38%, rgba(20,22,15,.9) 72%, var(--nacht) 100%);
}
.bildband__text { padding-top: 140px; padding-bottom: 56px; }
.bildband__text > * { max-width: 760px; }
.bildband__text h2 { color: var(--creme); }
.bildband__text .gross { font-size: 1.24rem; text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.bildband__text p:last-child { color: var(--creme-leise); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bildband__foto img, .demo__foto img { animation: langsam-ran linear both; animation-timeline: view(); animation-range: entry 0% exit 60%; }
  }
}
@keyframes langsam-ran { from { scale: 1.14; } to { scale: 1; } }

.merksatz { font-size: 1.2rem; line-height: 1.5; }
.merksatz strong { background: linear-gradient(180deg, transparent 56%, rgba(242,179,61,.62) 56%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Vergleich (Zettel gegen Feldblatt) ---------- */
.vergleich { display: grid; gap: 26px; margin: 34px auto 48px; max-width: 980px; }
.vergleich figcaption { grid-column: 1 / -1; margin-top: 18px; text-align: center; font: 600 .82rem/1.4 var(--mono); letter-spacing: .04em; color: var(--tinte-leise); }
.zettel {
  position: relative; padding: 30px 20px 22px 30px;
  background-color: #f3efe0;
  background-image: linear-gradient(90deg, transparent 18px, rgba(163,58,18,.35) 18px 20px, transparent 20px), repeating-linear-gradient(180deg, transparent 0 31px, rgba(63,74,31,.18) 31px 32px);
  box-shadow: 0 22px 34px -22px rgba(0,0,0,.6);
  transform: rotate(-1.6deg);
}
.zettel::before {
  /* Klebestreifen */
  content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 24px; margin-left: -46px;
  background: rgba(239,234,214,.75); border: 1px solid rgba(22,23,18,.12); transform: rotate(3deg);
}
.zettel h3 { font-size: 1.25rem; text-transform: uppercase; }
.zettel .liste-nicht { margin-bottom: 0; }
.vergleich__nachher {
  position: relative; z-index: 1; padding: 26px 22px 24px;
  background-color: var(--oliv); background-image: var(--raster-nacht); background-size: 24px 24px;
  color: var(--creme); border: 3px solid var(--tinte); box-shadow: 10px 10px 0 var(--tinte);
}
.vergleich__nachher h3 { text-transform: uppercase; font-size: 1.25rem; }
.vergleich__marke {
  display: inline-block; margin: 0 0 12px; padding: 3px 8px 2px;
  border: 2px solid currentColor; color: var(--rost-text);
  font: 700 .7rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-2deg);
}
.vergleich__marke--hell { color: var(--signal); }
.vergleich--klein { margin: 28px 0 30px; gap: 20px; }
.vergleich--klein .liste-nicht, .vergleich--klein .liste-haken { margin: 0; }

.stufenleiter { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stufenleiter li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; line-height: 1.4; }
.stufenleiter b {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 2.5px solid currentColor; font: 700 1.35rem/1 var(--stencil);
  transition: background-color .3s ease, color .3s ease;
}
.stufenleiter--papier { margin: 6px 0 22px; gap: 16px; }
.stufenleiter--papier li { align-items: start; }
.stufenleiter--papier b { background: var(--tinte); color: var(--signal); border-color: var(--tinte); }

/* ---------- Foto mit aufgelegtem Blatt ---------- */
.stapel { position: relative; max-width: 520px; margin: 0 auto 24px; width: 100%; }
.stapel__foto { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border: 3px solid var(--tinte); box-shadow: 12px 12px 0 rgba(0,0,0,.5); }
.papier .stapel__foto { box-shadow: 12px 12px 0 var(--tinte); }
.blatt {
  position: absolute; z-index: 1; left: -6px; bottom: -22px; width: 200px;
  padding: 14px 16px 12px; color: var(--tinte);
  background-color: var(--papier-hell); background-image: var(--raster); background-size: 18px 18px;
  border: 2.5px solid var(--tinte); box-shadow: 7px 7px 0 rgba(0,0,0,.5);
  transform: rotate(-3.5deg);
}
.blatt__kopf { margin: 0 0 2px; font: 700 .68rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rost-text); }
.blatt__titel { margin: 0 0 8px; font: 700 1.1rem/1.05 var(--stencil); text-transform: uppercase; }
.blatt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.blatt li { display: flex; align-items: center; gap: 8px; font: 600 .78rem/1.2 var(--mono); }
.blatt li::before { content: ""; flex: none; width: 15px; height: 15px; border: 2px solid var(--tinte); background: center/11px no-repeat; }
.blatt li.ok::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6' fill='none' stroke='%23161712' stroke-width='4' stroke-linecap='square'/%3E%3C/svg%3E"); }
.stapel--regal .stapel__foto { aspect-ratio: 4 / 4.6; object-position: 50% 60%; }
.stapel--regal .blatt { left: auto; right: -6px; transform: rotate(3deg); }

/* ---------- Inventar (Materialliste) ---------- */
.inventar { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; border-bottom: 3px solid var(--tinte); }
.inventar li {
  display: grid; grid-template-columns: 34px 1fr; gap: 6px 14px; align-items: start;
  padding: 20px 0; border-top: 3px solid var(--tinte);
}
.inventar li + li { border-top-width: 1.5px; border-top-style: dashed; }
.inventar__nr { font: 700 1.5rem/1 var(--stencil); color: var(--rost-text); padding-top: 2px; }
.inventar__zeichen { display: none; }
.inventar h3 { font-size: 1.22rem; text-transform: uppercase; margin-bottom: 2px; }
.inventar__format { margin: 0 0 6px; font: 600 .76rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-leise); }
.inventar li p:not(.inventar__format) { font-size: 1rem; }
.inventar__status {
  grid-column: 2; justify-self: start; padding: 4px 9px 3px;
  border: 2px solid var(--oliv); color: var(--oliv);
  font: 700 .68rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  transform: rotate(-2deg);
}

/* ---------- Demo: Strom-Check auf dem Klemmbrett ---------- */
.demo { overflow: hidden; isolation: isolate; }
.demo__foto { position: absolute; inset: 0; z-index: -2; }
.demo__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.demo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,22,15,.7), rgba(20,22,15,.84) 50%, rgba(20,22,15,.95)); }
.demo .kopfzeile-abschnitt { margin-bottom: 44px; }
.check { max-width: 880px; margin: 0 auto; padding: 34px 14px 20px; box-shadow: 12px 12px 0 rgba(0,0,0,.6); }
.check__kopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 0 4px 10px; margin-bottom: 4px; border-bottom: 3px solid var(--tinte); padding-right: 120px; }
.check__kopf b { font: 700 1.45rem/1.05 var(--stencil); text-transform: uppercase; }
.check__kopf span { font: 600 .74rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-leise); }
.check__tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.check__tabelle th { font: 700 .7rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: left; padding: 10px 6px 8px; border-bottom: 2px solid var(--tinte); }
.check__tabelle td { padding: 10px 6px; border-bottom: 1.5px dashed rgba(22,23,18,.45); vertical-align: top; line-height: 1.35; }
.check__tabelle td:first-child { font: 700 1rem/1.2 var(--stencil); text-transform: uppercase; white-space: nowrap; }
.check__zuerst { margin: 18px 4px 12px; padding: 14px 16px; border: 3px solid var(--tinte); background: rgba(242,179,61,.42); }
.check__zuerst h3 { text-transform: uppercase; font-size: 1.15rem; }
.check__zuerst ol { margin: 0; padding-left: 1.3em; font-weight: 600; }
.check__zuerst li::marker { font-family: var(--stencil); }
.check__fuss { margin: 0 4px; font: 500 .78rem/1.4 var(--mono); color: var(--tinte-leise); }
@media (max-width: 719px) {
  /* Handy: jede Zeile als eigener Eintrag statt drei enger Spalten */
  .check__tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .check__tabelle tr { display: grid; gap: 3px; padding: 12px 4px; border-bottom: 1.5px dashed rgba(22,23,18,.45); }
  .check__tabelle td { padding: 0; border: 0; }
  .check__tabelle td:nth-child(2)::before { content: "Hängt am Strom: "; font: 600 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-leise); }
  .check__tabelle td:nth-child(3)::before { content: "Ersatz: "; font: 600 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--oliv); }
}

/* ---------- Weiterlesen ---------- */
.weiterlesen { display: grid; justify-items: center; gap: 6px; margin: 30px 0 0; font: 700 .9rem/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--rost-text); }
.weiterlesen svg { width: 28px; height: 28px; }
@media (prefers-reduced-motion: no-preference) { .weiterlesen svg { animation: wippen 1.8s ease-in-out infinite; } }
@keyframes wippen { 50% { transform: translateY(6px); } }

/* ---------- Der Brief: eine Seite aus dem Ordner ---------- */
.brief {
  position: relative; max-width: 780px; margin: 0 auto;
  padding: 36px 18px 40px 34px;
  background: #f2eddc; color: var(--tinte);
  border: 2px solid rgba(22,23,18,.55);
  box-shadow: 0 40px 70px -40px rgba(0,0,0,.55), 10px 10px 0 rgba(22,23,18,.14);
  font-size: 1.06rem;
}
.brief__loecher i {
  position: absolute; left: 9px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--papier); box-shadow: inset 1px 2px 3px rgba(0,0,0,.45);
}
.brief__loecher i:nth-child(1) { top: 90px; }
.brief__loecher i:nth-child(2) { top: 50%; }
.brief__loecher i:nth-child(3) { bottom: 90px; }
.brief__kopf { margin-bottom: 26px; padding-bottom: 16px; border-bottom: 2px dashed var(--tinte); font: 500 .92rem/1.5 var(--mono); }
.brief__kopf p { margin-bottom: .4em; }
.brief__kopf .anrede { font: 500 1.06rem/1.5 var(--sans); margin-bottom: .8em; }
/* Absender-Ausweis: die Figur gibt der Marke ein Gesicht, liegt wie ein angeheftetes Foto rechts im Briefkopf */
.brief__kopf--absender::after { content: ""; display: block; clear: both; }
.absender { float: right; width: 96px; margin: 0 0 10px 14px; padding: 5px 5px 4px; background: #fff; border: 2px solid var(--tinte);
  box-shadow: 4px 4px 0 rgba(22,23,18,.18); transform: rotate(2deg); }
.absender img { display: block; width: 100%; height: auto; }
.absender figcaption { margin-top: 4px; font: 600 .62rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
@media (min-width: 720px) { .absender { width: 140px; margin-left: 22px; } }
.brief h2 { text-transform: none; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); line-height: 1.12; margin: 1.7em 0 .6em; }
.brief h3 { font-size: 1.35rem; margin: 1.4em 0 .5em; }
.brief .zwischen { font: 700 1.35rem/1.2 var(--stencil); color: var(--rost-text); margin-top: 1.6em; }
.brief .gross { font-size: 1.22rem; font-weight: 600; }
.hinweis { position: relative; margin: 22px 0 24px; padding: 24px 18px 16px; border: 3px solid var(--tinte); background: rgba(217,210,182,.55); }
.hinweis__marke {
  position: absolute; top: -13px; left: 14px; margin: 0; padding: 2px 9px 1px;
  background: #f2eddc; color: var(--rost-text); border: 2px solid currentColor;
  font: 700 .72rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.beleg {
  position: relative; margin: 24px 0 26px; padding: 22px 48px 16px 20px;
  background-color: var(--papier); background-image: var(--raster); background-size: 20px 20px;
  border-left: 7px solid var(--oliv); box-shadow: 0 16px 26px -20px rgba(0,0,0,.5);
}
.beleg::before {
  /* Büroklammer */
  content: ""; position: absolute; top: -14px; right: 26px; width: 16px; height: 44px;
  border: 3px solid #6f6f66; border-radius: 9px; transform: rotate(8deg);
}
.beleg p { font-size: 1.12rem; font-weight: 600; line-height: 1.45; margin-bottom: .5em; }
.beleg cite { display: block; margin-top: 8px; font: 500 .76rem/1.4 var(--mono); font-style: normal; letter-spacing: .02em; color: var(--tinte-leise); }
.fragen-liste { list-style: none; margin: 0 0 1em; padding: 0; }
.fragen-liste li { padding: 12px 0; border-bottom: 1.5px dashed rgba(22,23,18,.4); }
.fragen-liste li:first-child { border-top: 1.5px dashed rgba(22,23,18,.4); }
.fragen-liste strong { display: block; font-family: var(--stencil); font-size: 1.1rem; font-weight: 700; }

/* Elemente, die breiter als der Brief sind */
.brief .ausbruch { width: min(1100px, 100vw - 2 * var(--rand)); margin-left: 50%; margin-right: 0; transform: translateX(-50%); }

/* Kreislauf */
.kreislauf { position: relative; margin: 22px 0 24px; padding: 20px 16px 18px; border: 3px solid var(--tinte); background: rgba(217,210,182,.55); }
.kreislauf__zeichen { position: absolute; top: -27px; right: 16px; width: 54px; height: 54px; padding: 5px; border-radius: 50%; background: #f2eddc; color: var(--rost); }
.kreislauf__liste { list-style: none; counter-reset: k; margin: 0; padding: 0; display: grid; gap: 10px; }
.kreislauf__liste li { counter-increment: k; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; line-height: 1.35; }
.kreislauf__liste li::before {
  content: counter(k); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 2.5px solid var(--tinte); font: 700 .85rem/1 var(--mono);
}
.kreislauf__liste li:last-child { font-weight: 700; color: var(--rost-text); }
.kreislauf__liste li:last-child::before { background: var(--rost); border-color: var(--rost); color: var(--papier-hell); }
@media (prefers-reduced-motion: no-preference) {
  .kreislauf.ist-sichtbar .kreislauf__zeichen { animation: drehen 6s linear infinite; }
}
@keyframes drehen { to { transform: rotate(360deg); } }

/* Sicherungskasten */
.kasten {
  margin: 28px 0 30px; padding: 18px 14px 16px; color: var(--creme);
  background: linear-gradient(180deg, #2b2e23, #1d2017); border: 3px solid var(--tinte);
  box-shadow: 10px 10px 0 rgba(22,23,18,.35), inset 0 0 0 6px rgba(255,255,255,.04);
}
.kasten__kopf { display: flex; align-items: center; gap: 10px; font: 700 .78rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.kasten__kopf svg { width: 26px; height: 26px; flex: none; }
.kasten__unterzeile { margin: 6px 0 14px; font: 700 1.25rem/1.15 var(--stencil); text-transform: uppercase; }
.kasten__reihe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.schalter {
  display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center;
  padding: 12px 8px 12px; background: #e6e1ca; color: var(--tinte); border: 2px solid #0b0c08;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.12);
}
.schalter svg { width: 28px; height: 28px; margin-top: 4px; }
.schalter b { font: 700 1rem/1.1 var(--stencil); text-transform: uppercase; }
.schalter small { font-size: .78rem; line-height: 1.25; color: var(--tinte-leise); }
.schalter--heiz { outline: 3px solid var(--signal); outline-offset: -6px; }
.schalter__hebel { position: relative; margin-top: 14px; width: 26px; height: 42px; background: #111; border-radius: 4px; box-shadow: inset 0 0 0 2px #333; }
.schalter__hebel i { position: absolute; left: 4px; right: 4px; top: 4px; height: 16px; border-radius: 2px; background: var(--signal); transition: top .3s cubic-bezier(.5,0,.3,1.4), background-color .3s ease; }
.schalter__hebel::after { content: "EIN"; position: absolute; left: 50%; top: -15px; transform: translateX(-50%); font: 700 .58rem/1 var(--mono); letter-spacing: .1em; color: var(--tinte-leise); }
.kasten.ist-sichtbar .schalter__hebel i, html:not(.js) .schalter__hebel i { top: 22px; background: #8b8a7b; }
.kasten.ist-sichtbar .schalter__hebel::after, html:not(.js) .schalter__hebel::after { content: "AUS"; color: var(--rost-text); }
.kasten.ist-sichtbar .schalter:nth-child(1) .schalter__hebel i { transition-delay: .3s; }
.kasten.ist-sichtbar .schalter:nth-child(2) .schalter__hebel i { transition-delay: .45s; }
.kasten.ist-sichtbar .schalter:nth-child(3) .schalter__hebel i { transition-delay: .6s; }
.kasten.ist-sichtbar .schalter:nth-child(4) .schalter__hebel i { transition-delay: .75s; }
.kasten.ist-sichtbar .schalter:nth-child(5) .schalter__hebel i { transition-delay: .9s; }
.kasten.ist-sichtbar .schalter:nth-child(6) .schalter__hebel i { transition-delay: 1.05s; }
.kasten.ist-sichtbar .schalter:nth-child(7) .schalter__hebel i { transition-delay: 1.2s; }
.kasten.ist-sichtbar .schalter:nth-child(8) .schalter__hebel i { transition-delay: 1.35s; }
.kasten figcaption { margin-top: 12px; font: 500 .74rem/1.4 var(--mono); color: var(--creme-leise); }

/* Zeitleiste Berlin */
.zeitleiste { margin: 22px 0 24px; padding: 18px 16px 14px; border: 3px solid var(--tinte); background: var(--papier-hell); }
.zeitleiste ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.zeitleiste li { display: grid; gap: 2px; padding-left: 14px; border-left: 4px solid var(--tinte); }
.zeitleiste li:last-child { border-left-color: var(--oliv); }
.zeitleiste b { font: 700 .8rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.zeitleiste span { font-size: 1rem; line-height: 1.35; }
.zeitleiste__balken { height: 16px; margin: 16px 0 10px; border: 2.5px solid var(--tinte); background: #fff; overflow: hidden; }
.zeitleiste__balken i { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(-45deg, var(--rost) 0 7px, #c4572a 7px 14px); transform-origin: left; transition: transform 1.8s cubic-bezier(.3,.6,.3,1) .3s; }
.js .zeitleiste:not(.ist-sichtbar) .zeitleiste__balken i { transform: scaleX(0); }
.zeitleiste figcaption { font: 500 .74rem/1.4 var(--mono); color: var(--tinte-leise); }
.laender { margin: 22px 0 24px; padding: 18px 16px 14px; border: 3px solid var(--tinte); background: var(--papier-hell); }
.laender__titel { margin: 0 0 14px; font: 700 .8rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.laender ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.laender li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.laender b { font-size: .95rem; }
.laender__wert { grid-row: 1; grid-column: 2; font: 600 .8rem/1.3 var(--mono); text-align: right; }
.laender__balken { grid-column: 1 / -1; position: relative; height: 14px; border: 2px solid var(--tinte); background: #fff; overflow: hidden; }
/* Wert bis 14 Tage, bei Spannen (Österreich) der Rest bis --bis schraffiert */
.laender__balken::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--bis, var(--tage)) / 14 * 100%); background: repeating-linear-gradient(-45deg, var(--tinte) 0 3px, transparent 3px 7px); opacity: .35; }
.laender__balken i { position: absolute; inset: 0 auto 0 0; z-index: 1; width: calc(var(--tage) / 14 * 100%); background: var(--tinte); transform-origin: left; transition: transform 1.2s cubic-bezier(.3,.6,.3,1) .2s; }
.laender__ihr { margin-top: 6px; padding-top: 12px; border-top: 2px dashed var(--tinte); }
.laender__ihr .laender__balken i { background: var(--oliv); }
.js .laender:not(.ist-sichtbar) .laender__balken i { transform: scaleX(0); }
.laender figcaption { margin-top: 12px; font: 500 .74rem/1.4 var(--mono); color: var(--tinte-leise); }

.seitenbild { margin: 6px 0 20px; }
.seitenbild img { width: 100%; height: 320px; object-fit: cover; object-position: 50% 40%; border: 3px solid var(--tinte); box-shadow: 8px 8px 0 var(--tinte); }

/* Treppe: drei Kisten, die aufeinander aufbauen */
.treppe { display: grid; gap: 14px; margin: 26px 0 30px; }
.treppe__stufe { position: relative; padding: 18px 18px 18px; border: 3px solid var(--tinte); box-shadow: 7px 7px 0 var(--tinte); }
.treppe__stufe--1 { background: var(--papier-hell); }
.treppe__stufe--2 { background: var(--papier-tief); margin-left: 14px; }
.treppe__stufe--3 { background: var(--oliv); color: var(--creme); margin-left: 28px; }
.treppe__nr { position: absolute; top: 8px; right: 14px; margin: 0; font: 700 3.4rem/1 var(--stencil); color: var(--rost-text); opacity: .9; }
.treppe__stufe--3 .treppe__nr { color: var(--signal); }
.treppe__wann { margin: 0 0 4px; font: 700 .72rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.treppe h3 { text-transform: uppercase; font-size: 1.4rem; padding-right: 50px; }
.treppe__stufe p:last-child { font-size: .98rem; line-height: 1.45; }
.treppe figcaption { font: 600 .8rem/1.4 var(--mono); color: var(--tinte-leise); text-align: center; margin-top: 6px; }

/* Zielbild */
.zielbild { display: grid; gap: 14px; margin: 26px 0 34px; }
.zielbild figure { position: relative; overflow: hidden; border: 3px solid var(--tinte); background: var(--nacht); }
.zielbild img { width: 100%; height: 100%; object-fit: cover; }
.zielbild__gross img { aspect-ratio: 16 / 10; }
.zielbild__hoch img, .zielbild__quadrat img { aspect-ratio: 4 / 4.2; }
.zielbild__hoch img { object-position: 50% 70%; }
.zielbild figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 16px 14px;
  background: linear-gradient(180deg, transparent 0, rgba(13,14,9,.93) 50px, rgba(13,14,9,.95));
  color: var(--creme); font-size: .95rem; line-height: 1.4;
}
.zielbild figcaption b, .zielbild__plan b { display: block; margin-bottom: 3px; font: 700 1.2rem/1.1 var(--stencil); text-transform: uppercase; color: var(--signal); }
.zielbild__plan {
  position: relative; display: grid; align-content: center; gap: 12px; padding: 30px 20px 22px;
  background: linear-gradient(115deg, #eef0ea 0 55%, #dfe2da 70%, #eef0ea 85%); border: 3px solid var(--tinte);
}
.zielbild__plan svg { width: 46px; height: 46px; color: var(--oliv); }
.zielbild__plan p { margin: 0; padding: 14px 14px 12px; background: var(--papier-hell); border: 2px solid var(--tinte); box-shadow: 0 12px 18px -12px rgba(0,0,0,.6); transform: rotate(-2deg); }
.zielbild__plan b { color: var(--tinte); }
.magnet { position: absolute; top: 18px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e0663a, var(--rost)); box-shadow: 0 3px 4px rgba(0,0,0,.35); }

/* Ruhebild */
.ruhebild { position: relative; overflow: hidden; margin: 22px 0 26px; border: 3px solid var(--tinte); background: var(--nacht); }
.ruhebild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 50%; }
.ruhebild--becher img { object-position: 22% 50%; } /* Becher und Hände links im Bild */
.ruhebild figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 18px 18px;
  background: linear-gradient(180deg, transparent 0, rgba(13,14,9,.88) 62px, rgba(13,14,9,.92));
  color: var(--creme); font: 700 clamp(1.35rem, 1rem + 1.8vw, 2.3rem)/1.08 var(--stencil); text-transform: uppercase; text-wrap: balance;
}

/* ---------- Kurz-Inventar (dunkel) ---------- */
.inventar-kurz { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.inventar-kurz li { padding: 16px 14px; border: 2px solid rgba(236,230,204,.35); background: rgba(236,230,204,.04); }
.inventar-kurz svg { width: 32px; height: 32px; color: var(--signal); margin-bottom: 8px; }
.inventar-kurz h3 { font-size: 1.05rem; text-transform: uppercase; margin-bottom: 2px; }
.inventar-kurz .inventar__format { color: var(--creme-leise); }
.inventar-kurz p:last-child { font-size: .92rem; line-height: 1.4; }

/* ---------- 7 Tage ---------- */
.tage { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tage li {
  display: grid; grid-template-columns: 76px 1fr; align-items: stretch;
  background: var(--papier-hell); border: 3px solid var(--tinte); margin-top: -3px;
}
.tage li:nth-child(odd) { transform: rotate(-.5deg); }
.tage li:nth-child(even) { transform: rotate(.4deg) translateX(6px); }
.tage b { display: grid; place-items: center; background: var(--tinte); color: var(--signal); font: 700 1.05rem/1 var(--stencil); text-transform: uppercase; }
.tage span { padding: 12px 14px; line-height: 1.35; }

/* ---------- Ein Blick in den Kurs: Titelfolien der sieben Videos ---------- */
.kursraster { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.kursraster figure { margin: 0; }
.kursraster__bild { position: relative; display: block; border: 3px solid var(--tinte); background: var(--tinte); box-shadow: 6px 6px 0 var(--tinte); }
.kursraster img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.kursraster__bild::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M17 13v18l15-9z' fill='%2314160f'/%3E%3C/svg%3E") center / 100% no-repeat; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.kursraster figcaption { margin-top: 10px; font: 600 .72rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.kursraster figcaption b { display: block; color: var(--rost-text); }
@media (min-width: 720px) { .kursraster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; } }

/* ---------- Prüfkarte ---------- */
.pruefkarte { padding: 30px 20px 20px; box-shadow: 10px 10px 0 var(--tinte); max-width: 480px; }
.pruefkarte__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px dashed var(--tinte); }
.pruefkarte__kopf svg { width: 40px; height: 40px; color: var(--oliv); flex: none; }
.pruefkarte__kopf span { display: grid; }
.pruefkarte__kopf small { font: 700 .7rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rost-text); }
.pruefkarte__kopf b { font: 700 1.4rem/1.1 var(--stencil); text-transform: uppercase; }
.pruefkarte__fuss { font: 500 .82rem/1.45 var(--mono); color: var(--tinte-leise); }

/* ---------- Zitat ---------- */
.zitat { text-align: center; padding: 84px 0; }
.zitat blockquote {
  margin: 0 auto 18px; max-width: 980px;
  font: 700 clamp(1.9rem, 1.1rem + 3.6vw, 4.2rem)/1.02 var(--stencil); text-transform: uppercase; text-wrap: balance;
}
.zitat blockquote span { color: var(--signal); }
.zitat cite { font: 500 .82rem/1.5 var(--mono); font-style: normal; color: var(--creme-leise); }

/* ---------- Kapitel als Register ---------- */
.kapitel { list-style: none; counter-reset: kap; margin: 0 auto 56px; padding: 0; display: grid; gap: 30px 16px; max-width: 1100px; }
.kapitel li {
  counter-increment: kap; position: relative; padding: 22px 18px 18px;
  background: var(--papier-hell); color: var(--tinte); border: 3px solid #000;
}
.kapitel li::before {
  content: counter(kap, decimal-leading-zero); position: absolute; top: -21px; right: 16px;
  padding: 3px 12px 0; background: var(--signal); border: 3px solid #000; border-bottom: 0;
  font: 700 1rem/1.2 var(--stencil);
}
.kapitel h3 { text-transform: uppercase; font-size: 1.15rem; }
.kapitel p { font-size: .98rem; line-height: 1.45; }

/* ---------- Garantie ---------- */
.garantie { display: grid; gap: 26px; max-width: 980px; }
.garantie__stempel { width: 190px; color: var(--rost); justify-self: center; }
.garantie__stempel svg { width: 100%; height: auto; transform: rotate(-10deg); mix-blend-mode: multiply; }
.js .garantie__stempel:not(.ist-sichtbar) svg { opacity: 0; transform: rotate(-22deg) scale(1.8); }
.garantie__stempel svg { transition: opacity .25s ease .2s, transform .45s cubic-bezier(.3,1.6,.5,1) .2s; }

/* ---------- FAQ ---------- */
.faq { margin-top: 26px; }
.faq details { background: var(--papier-hell); border: 3px solid var(--tinte); margin-top: -3px; }
.faq details[open] { background: #f6f2e3; position: relative; z-index: 1; box-shadow: 6px 6px 0 var(--tinte); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 16px 58px 16px 16px; font-weight: 600; font-size: 1.04rem; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  border: 2.5px solid var(--tinte);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23161712' stroke-width='3'/%3E%3C/svg%3E") center/16px no-repeat;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--signal); }
.faq details p { padding: 0 16px 16px; margin: 0; }
.faq details p + p { padding-top: 0; margin-top: -4px; }

/* ---------- Fuß ---------- */
.fuss { background: var(--nacht-tief); color: var(--creme-leise); padding: 44px 0 130px; font-size: .9rem; }
.fuss .marke { color: var(--creme); margin-bottom: 20px; }
.fuss p { max-width: 64em; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0; }
.fuss nav a { color: var(--creme); }

/* ---------- Preisleiste ---------- */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  background: var(--tinte); color: var(--creme); border-top: 3px solid var(--signal);
  transform: translateY(110%); transition: transform .25s ease;
}
.leiste.sichtbar { transform: none; }
.leiste__innen { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.leiste__info { display: none; margin: 0; }
.leiste__info b { display: block; font: 700 1.1rem/1.1 var(--stencil); text-transform: uppercase; }
.leiste__info span { font: 500 .78rem/1.4 var(--mono); color: var(--creme-leise); }
.knopf--leiste { min-height: 50px; width: 100%; box-shadow: none !important; border-color: var(--signal); }
.knopf--leiste:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .leiste { transition: none; } }

/* ---------- Einblendungen beim Scrollen ---------- */
.js [data-zeigen] { opacity: 0; translate: 0 26px; transition: opacity .6s ease, translate .7s cubic-bezier(.2,.8,.2,1); }
.js [data-zeigen].ist-sichtbar { opacity: 1; translate: 0 0; }
/* gestaffelt: Listenpunkte, Stufen, Tage, Kapitel kommen nacheinander */
.js [data-zeigen] .stufenleiter li, .js [data-zeigen] .liste-nicht li, .js [data-zeigen].liste-haken li, .js .tage[data-zeigen] li,
.js .kapitel[data-zeigen] li, .js .inventar[data-zeigen] li, .js .inventar-kurz[data-zeigen] li, .js [data-zeigen] .treppe__stufe,
.js .zielbild[data-zeigen] > *, .js .kreislauf[data-zeigen] li, .js .zeitleiste[data-zeigen] li {
  opacity: 0; translate: 0 14px;
  transition: opacity .45s ease, translate .5s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i, 0) * 110ms + 150ms);
}
.js [data-zeigen].ist-sichtbar .stufenleiter li, .js [data-zeigen].ist-sichtbar .liste-nicht li, .js [data-zeigen].liste-haken.ist-sichtbar li,
.js .tage.ist-sichtbar li, .js .kapitel.ist-sichtbar li, .js .inventar.ist-sichtbar li, .js .inventar-kurz.ist-sichtbar li,
.js [data-zeigen].ist-sichtbar .treppe__stufe, .js .zielbild.ist-sichtbar > *, .js .kreislauf.ist-sichtbar li, .js .zeitleiste.ist-sichtbar li {
  opacity: 1; translate: 0 0;
}
/* Nachher: die Stufen werden der Reihe nach „abgehakt“ */
.js .vergleich.ist-sichtbar .vergleich__nachher .stufenleiter b { background: var(--signal); color: var(--tinte); border-color: var(--signal); transition-delay: calc(var(--i, 0) * 260ms + 700ms); }
html:not(.js) .vergleich__nachher .stufenleiter b { background: var(--signal); color: var(--tinte); border-color: var(--signal); }
.js .treppe[data-zeigen]:not(.ist-sichtbar) .treppe__stufe { translate: 0 34px; }
@media (prefers-reduced-motion: reduce) {
  .js [data-zeigen], .js [data-zeigen] * { opacity: 1 !important; translate: none !important; transition: none !important; }
  .js .zeitleiste .zeitleiste__balken i { transform: none !important; }
  .js .laender .laender__balken i { transform: none !important; }
  .js .garantie__stempel svg { opacity: 1 !important; transform: rotate(-10deg) !important; }
}

/* ---------- Ab 560: Kaufbox im Brief zweispaltig ---------- */
@media (min-width: 560px) {
  .kaufbox--brief { grid-template-columns: 150px 1fr; }
  .kaufbox--brief .kaufbox__bild { border-bottom: 0; border-right: 3px solid var(--tinte); }
  .kaufbox--brief .kaufbox__bild img { height: 100%; min-height: 230px; }
  .tage li { grid-template-columns: 96px 1fr; }
}

/* ---------- Ab Tablet ---------- */
@media (min-width: 720px) {
  :root { --rand: 32px; }
  body { font-size: 1.125rem; }
  .abschnitt { padding: 96px 0; }
  .abschnitt--knapp { padding: 80px 0 32px; }
  .abschnitt--ohne-oben { padding-top: 0; }
  .abschnitt--brief { padding-top: 12px; }
  .kopf__blatt { display: block; }
  .marke__zeichen { width: 38px; height: 44px; }
  .marke__text b { font-size: 1.55rem; }
  .marke__text small { font-size: .68rem; }
  .hero .etikett { font-size: .76rem; }
  .hero__sub { font-size: 1.2rem; }
  .zahlen b { font-size: 3rem; }
  .zahlen > li > span { font-size: .9rem; }
  .zahlen li { padding: 0 18px; }
  .klemmbrett { padding: 38px 28px 26px; }
  .stempel--rund { top: 64px; right: 22px; width: 94px; height: 94px; }
  .vergleich { grid-template-columns: 1fr 1.05fr; gap: 0; align-items: center; }
  .vergleich__vorher { margin-right: -24px; padding-right: 50px; }
  .vergleich--klein { gap: 0; }
  .kaufbox:not(.kaufbox--brief) { grid-template-columns: .85fr 1.15fr; }
  .kaufbox:not(.kaufbox--brief) .kaufbox__bild { border-bottom: 0; border-right: 3px solid var(--tinte); }
  .kaufbox:not(.kaufbox--brief) .kaufbox__bild { min-height: 300px; }
  .kaufbox:not(.kaufbox--brief) .kaufbox__bild img { position: absolute; inset: 0; height: 100%; }
  .kaufbox__text { padding: 26px 26px 26px; }
  .inventar li { grid-template-columns: 50px 44px 1fr 170px; gap: 6px 20px; padding: 24px 0; }
  .inventar__zeichen { display: block; width: 40px; height: 40px; color: var(--oliv); }
  .inventar__status { grid-column: 4; grid-row: 1; justify-self: end; margin-top: 4px; }
  .inventar-kurz { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .inventar-kurz li { padding: 22px 20px; }
  .check { padding: 38px 30px 24px; }
  .brief { padding: 56px 64px 56px; font-size: 1.12rem; }
  .brief__loecher i { left: 22px; width: 18px; height: 18px; }
  .kasten { padding: 24px 24px 20px; }
  .kasten__reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .kreislauf { padding: 26px 26px 22px; }
  .kreislauf__liste { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(4, auto); gap: 12px 26px; }
  .zeitleiste ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seitenbild { float: right; width: 270px; margin: 4px -110px 18px 28px; transform: rotate(2deg); }
  .seitenbild img { height: auto; aspect-ratio: 4 / 5; }
  .treppe { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 16px; }
  .treppe__stufe--1 { margin: 0; }
  .treppe__stufe--2 { margin: 0 0 55px; }
  .treppe__stufe--3 { margin: 0 0 110px; }
  .treppe figcaption { grid-column: 1 / -1; }
  .zielbild { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .zielbild__gross { grid-column: 1 / -1; }
  .zielbild__gross img { aspect-ratio: 16 / 8; }
  .zielbild__gross figcaption { top: 22px; left: 22px; bottom: auto; right: auto; max-width: 440px; padding: 16px 20px 16px; background: rgba(13,14,9,.9); border: 2px solid rgba(236,230,204,.25); }
  .zielbild__hoch, .zielbild__quadrat, .zielbild__plan { margin-top: -90px; z-index: 1; box-shadow: 8px 8px 0 var(--tinte); }
  .zielbild__hoch { margin-left: 22px; }
  .zielbild__plan { margin-right: 22px; }
  .zielbild__hoch img, .zielbild__quadrat img { aspect-ratio: 4 / 4.6; }
  .ruhebild img { aspect-ratio: 16 / 7.5; }
  .ruhebild figcaption { padding: 90px 36px 30px; }
  .ruhebild figcaption p { max-width: 760px; }
  .tage li { grid-template-columns: 110px 1fr; }
  .tage span { padding: 14px 18px; }
  .kapitel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 22px; }
  .garantie { grid-template-columns: 230px 1fr; gap: 50px; align-items: start; }
  .garantie__stempel { width: 230px; position: sticky; top: 40px; }
  .faq summary { font-size: 1.1rem; padding: 18px 64px 18px 20px; }
  .faq details p { padding: 0 20px 18px; }
  .stapel__foto { aspect-ratio: 4 / 4.6; }
  .blatt { left: -30px; bottom: -28px; width: 230px; }
  .stapel--regal .blatt { right: -30px; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1040px) {
  .kopf__innen { padding-top: 22px; padding-bottom: 16px; }

  /* Foto rechts, läuft nach links und unten in die Nacht aus; das Klemmbrett liegt darauf */
  .hero__foto { left: auto; width: 66%; height: 100%; }
  .hero__foto img {
    object-position: 45% 30%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 62%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 62%, transparent 100%);
            mask-composite: intersect;
  }
  .hero::before { background: linear-gradient(90deg, var(--nacht) 0%, rgba(20,22,15,.88) 34%, rgba(20,22,15,.22) 58%, rgba(20,22,15,.06) 100%); }
  .hero__raster {
    grid-template-columns: minmax(0, 1fr) 430px; gap: 64px; align-items: center;
    padding-top: 44px; padding-bottom: 76px; min-height: min(820px, calc(100vh - 80px));
  }
  .hero h1 { margin-bottom: 18px; }
  .hero .knopf-zeile { margin-top: 28px; }
  .hero .knopf { min-width: 380px; }
  .hero__karte { justify-self: end; width: 100%; }
  .hero__karte .klemmbrett { transform: rotate(1deg); }
  .zahlen { margin-top: 40px; }

  .raster-zwei { grid-template-columns: 1fr 1fr; gap: 72px; }
  .raster-zwei--oben { align-items: start; }
  #was-ist-das .raster-zwei { grid-template-columns: 1.05fr .95fr; align-items: start; }
  #was-ist-das .kaufbox { grid-template-columns: 1fr; }
  #was-ist-das .kaufbox .kaufbox__bild { border-right: 0; border-bottom: 3px solid var(--tinte); }
  #was-ist-das .kaufbox .kaufbox__bild { min-height: 0; }
  #was-ist-das .kaufbox .kaufbox__bild img { position: static; height: 300px; }

  .bildband { min-height: 86vh; }
  .bildband__text { padding-bottom: 84px; }

  .kaufbox--breit, .kaufbox--gross { max-width: 1000px; margin: 0 auto; }
  .kaufbox--gross .kaufbox__titel { font-size: 2rem; }
  .kaufbox--gross .kaufbox__text { padding: 34px 36px; }

  .kapitel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leiste__info { display: block; }
  .knopf--leiste { width: auto; min-width: 280px; }
  .stapel { margin: 0; }
}

/* Wörter, die ab Tablet nicht umbrechen sollen */
@media (min-width: 720px) { .nb { white-space: nowrap; } }

/* Splittest: ohne Test und ohne Skript steht nur Fassung a (splittest.js, TRACKING.md) */
[data-test][data-variante]:not([data-variante="a"]) { display: none; }