/* Tap and Fill · Aussehen „Durchschlag“ (Entwurf C, E10).
   Quittungsblock: Formularblau, Nummernrot, Durchschläge in Rosa, Gelb, Hellblau.
   Kleine rote Schrift nur in --rot-text. Keine Stile in den Seiten selbst (Kopfzeile style-src 'self'). */

@font-face{font-family:"Barlow Condensed";font-weight:500;font-style:normal;font-display:swap;src:url("/schriften/barlow-condensed-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url("/schriften/barlow-condensed-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url("/schriften/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-style:normal;font-display:swap;src:url("/schriften/ibm-plex-mono-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-style:normal;font-display:swap;src:url("/schriften/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-style:normal;font-display:swap;src:url("/schriften/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Kalam";font-weight:400;font-style:normal;font-display:swap;src:url("/schriften/kalam-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Kalam";font-weight:700;font-style:normal;font-display:swap;src:url("/schriften/kalam-latin-700-normal.woff2") format("woff2")}

:root{
  --papier:#F5F1E8;
  --weiss:#FFFDF8;
  --blau:#17357F;
  --rot:#D0342C;
  --rot-text:#A81E18;
  --rosa:#F4C9CF;
  --gelb:#F6E27A;
  --hellblau:#CFE0F2;
  --text:#1E1E1C;
  --linie:rgba(23,53,127,.38);
  --kopf:"Barlow Condensed","Arial Narrow",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --lauf:"Atkinson Hyperlegible",Verdana,sans-serif;
  --hand:"Kalam","Comic Sans MS",cursive;
  --rand:clamp(16px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{
  margin:0;background:var(--papier);color:var(--text);
  font-family:var(--lauf);font-size:1.0625rem;line-height:1.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23k)'/%3E%3C/svg%3E");
}
img,svg{max-width:100%}
h1,h2,h3,p{margin:0}
a{color:var(--blau)}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
.innen{max-width:1240px;margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
.innen.schmal{max-width:820px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sprung{position:absolute;left:8px;top:-80px;background:var(--blau);color:var(--weiss);padding:12px 16px;z-index:50;font-family:var(--kopf);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.sprung:focus{top:8px;outline-color:var(--rot)}
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Kopf ---------- */
.kopf{background:var(--weiss);border-bottom:2px solid var(--blau);position:relative}
.kopf::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:8px;
  background:radial-gradient(circle,var(--blau) 1.6px,transparent 2px) 0 0/12px 8px repeat-x;opacity:.55}
.kopf-oben{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:10px}
.marke{display:inline-flex;align-items:center;gap:.28em;font-family:var(--kopf);font-weight:700;text-transform:uppercase;
  letter-spacing:.035em;color:var(--blau);font-size:1.9rem;line-height:1;text-decoration:none;white-space:nowrap}
.marke svg{width:1.05em;height:1.05em;flex:none;margin-top:-.12em}
.marke-zeile{display:flex;flex-direction:column;gap:0;min-width:0}
a.marke{min-height:44px}
.unterzeile{font-family:var(--kopf);font-weight:500;text-transform:uppercase;letter-spacing:.09em;font-size:.86rem;color:var(--text)}
.kopf-rechts{display:flex;align-items:center;gap:18px}
.blocknr{font-family:var(--mono);font-weight:600;color:var(--rot-text);font-size:1.15rem;letter-spacing:.06em;white-space:nowrap}

/* Flaggen (E11): eigene Sprache markiert, die andere führt auf dieselbe Seite der anderen Domain. */
.flaggen{display:flex;gap:2px;flex:none}
.flagge{display:inline-flex;align-items:center;justify-content:center;width:46px;height:44px;position:relative;text-decoration:none}
.flagge .fl{display:block;width:30px;height:20px;box-shadow:0 0 0 1.5px var(--blau)}
.flagge.ist-da::after{content:"";position:absolute;left:8px;right:8px;bottom:3px;height:3px;background:var(--rot)}
a.flagge .fl{opacity:.72;transition:opacity .12s,transform .12s}
a.flagge:hover .fl,a.flagge:focus-visible .fl{opacity:1;transform:translateY(-1px)}

.nav{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linie)}
.nav a{display:flex;align-items:flex-end;min-height:52px;padding:18px 12px 8px;position:relative;
  font-family:var(--kopf);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem;line-height:1.1;
  text-decoration:none;color:var(--blau);border-left:1px solid var(--linie)}
.nav a:last-child{border-right:1px solid var(--linie);background:var(--gelb)}
.nav a::before{content:attr(data-nr);position:absolute;left:12px;top:5px;font-family:var(--mono);font-weight:400;font-size:.68rem;letter-spacing:.05em;color:var(--blau)}
.nav a:hover{background:var(--hellblau)}
.nav a:last-child:hover{background:var(--rosa)}
.nav a:focus-visible{outline-offset:-4px}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:10px 24px;
  font-family:var(--kopf);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:1.3rem;line-height:1.1;
  text-decoration:none;cursor:pointer;border:2px solid var(--blau);background:var(--weiss);color:var(--blau);border-radius:0;
  box-shadow:5px 5px 0 var(--blau);transition:transform .12s,box-shadow .12s}
.knopf:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--blau)}
.knopf:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--blau)}
.knopf.rot{background:var(--rot);color:var(--weiss)}
.knopf.klein{min-height:44px;font-size:1.08rem;padding:6px 16px;box-shadow:3px 3px 0 var(--blau)}
.knopf.klein:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--blau)}
.knoepfe{display:flex;flex-wrap:wrap;gap:18px 20px;margin-top:30px}

/* ---------- Abschnittskopf ---------- */
.abschnitt{padding:clamp(44px,7vw,104px) 0;position:relative}
.abschnitt.nah{padding-top:clamp(24px,4vw,56px)}
.abschnitt.letzter,.seitenkopf.letzter{padding-bottom:clamp(64px,9vw,120px)}
.kopfzeile{display:flex;align-items:stretch;border:2px solid var(--blau);background:var(--weiss);margin-bottom:clamp(22px,4vw,52px)}
.feldnr{flex:none;display:flex;align-items:center;justify-content:center;min-width:clamp(52px,8vw,96px);
  font-family:var(--mono);font-weight:600;font-size:clamp(1.3rem,3vw,2.1rem);color:var(--rot-text);border-right:2px solid var(--blau);background:var(--papier)}
.kopfzeile h2{font-family:var(--kopf);font-weight:700;text-transform:uppercase;color:var(--blau);
  font-size:clamp(2rem,6vw,4.4rem);line-height:.95;letter-spacing:.01em;padding:.22em .32em .2em;text-wrap:balance}

/* ---------- Zettel allgemein ---------- */
.zettel{background:var(--c,var(--weiss));position:relative;box-shadow:0 1px 0 rgba(30,30,28,.2),0 14px 26px -16px rgba(30,30,28,.45)}
.perf{position:relative;padding-top:26px}
.perf::before{content:"";position:absolute;left:0;right:0;top:9px;height:8px;
  background:radial-gradient(circle,var(--papier) 2.6px,transparent 3px) 2px 0/13px 8px repeat-x;
  filter:drop-shadow(0 .6px 0 rgba(30,30,28,.35))}
.loch{position:absolute;width:15px;height:15px;border-radius:50%;background:var(--papier);box-shadow:inset 0 1.5px 2px rgba(30,30,28,.4)}
.loch.l1{top:32%}.loch.l2{top:68%}
.feldname{font-family:var(--kopf);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;line-height:1.2;color:var(--blau)}
.nr-rot{font-family:var(--mono);font-weight:600;color:var(--rot-text);letter-spacing:.05em}

/* ---------- Stempel ---------- */
.stempel{display:inline-flex;flex-direction:column;align-items:center;font-family:var(--kopf);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;line-height:1;color:var(--sf,var(--rot));border:.13em solid currentColor;padding:.2em .42em .16em;
  outline:.045em solid currentColor;outline-offset:-.22em;
  transform:rotate(var(--dreh,-8deg));filter:url(#tinte);white-space:nowrap}
.stempel small{font-family:var(--mono);font-weight:600;font-size:.3em;letter-spacing:.08em;margin-top:.35em;text-transform:none}

/* ---------- Einstieg ---------- */
.einstieg{padding:clamp(32px,6vw,84px) 0 clamp(44px,8vw,104px);overflow:clip;
  background-image:linear-gradient(var(--linie) 1px,transparent 1px),linear-gradient(90deg,var(--linie) 1px,transparent 1px);
  background-size:100% 56px,56px 100%;background-position:0 28px,var(--rand) 0}
.einstieg .innen{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.einstieg-text{background:var(--papier);padding:clamp(14px,2vw,24px) clamp(10px,2vw,24px) clamp(14px,2vw,24px) 0;position:relative}
.ueberzeile{display:inline-block;font-family:var(--kopf);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(.95rem,1.6vw,1.15rem);
  color:var(--blau);border:1.5px solid var(--blau);background:var(--weiss);padding:5px 10px 3px;margin-bottom:18px}
h1{font-family:var(--kopf);font-weight:700;text-transform:uppercase;color:var(--blau);
  font-size:clamp(3.3rem,9.4vw,8.4rem);line-height:.88;letter-spacing:-.005em;text-wrap:balance}
h1 mark{background:linear-gradient(transparent 12%,var(--gelb) 12%,var(--gelb) 88%,transparent 88%);color:inherit;padding:0 .08em;margin:0 -.08em}
p.lauf{font-size:clamp(1.1rem,1.7vw,1.32rem);max-width:34em}
.einstieg-text>p.lauf{margin-top:24px}
.sorten{margin-top:30px;padding-top:12px;border-top:1.5px solid var(--blau);font-family:var(--hand);font-weight:400;color:var(--blau);font-size:1.18rem;line-height:1.4;max-width:32em}

.block{position:relative;width:min(100%,440px);margin:0 auto;transform:rotate(-3deg)}
.block .lage-u{position:absolute;inset:0}
.block .lage-u.g{background:var(--gelb);transform:translate(26px,30px) rotate(5deg);box-shadow:0 14px 26px -14px rgba(30,30,28,.5)}
.block .lage-u.r{background:var(--rosa);transform:translate(13px,15px) rotate(2.4deg);box-shadow:0 2px 0 rgba(30,30,28,.12)}
.block .oben{position:relative;background:var(--weiss);padding:30px 24px 30px 44px;box-shadow:0 1px 0 rgba(30,30,28,.2)}
.block .oben::before{content:"";position:absolute;left:0;right:0;top:10px;height:8px;background:radial-gradient(circle,var(--papier) 2.6px,transparent 3px) 2px 0/13px 8px repeat-x;filter:drop-shadow(0 .6px 0 rgba(30,30,28,.35))}
.block .loch{left:14px}
.block-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:2px solid var(--blau);padding-bottom:6px}
.block-kopf .marke{font-size:clamp(1.05rem,4.4vw,1.35rem)}
.block-kopf .nr-rot{font-size:clamp(.9rem,3.6vw,1.2rem);white-space:nowrap}
.druck{margin-top:14px}
.kaestchen{display:grid;grid-template-columns:repeat(8,1fr);margin-top:6px;border-left:1.5px solid var(--blau)}
.kaestchen+.kaestchen{margin-top:8px}
.kaestchen span{aspect-ratio:1/1.12;border:1.5px solid var(--blau);border-left:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--hand);font-weight:700;color:var(--blau);font-size:clamp(1.3rem,5.4vw,1.9rem);line-height:1;padding-top:.16em}
.kaestchen span i{font-style:normal;display:block;transform:rotate(var(--w,0deg)) translateY(var(--y,0))}
.kaestchen span:nth-child(4n+1) i{--w:-4deg}
.kaestchen span:nth-child(4n+2) i{--w:3deg;--y:1px}
.kaestchen span:nth-child(4n+3) i{--w:-2deg;--y:-1px}
.kaestchen span:nth-child(4n) i{--w:5deg;--y:2px}
.kritzel{display:block;width:100%;height:auto;margin-top:14px}
.block .stempel{position:absolute;right:-14px;bottom:20px;font-size:clamp(1.5rem,5vw,2.1rem);--dreh:-11deg;--sf:var(--rot);background:transparent}

/* ---------- Vorher Nachher ---------- */
.vergleich{background:var(--hellblau);border-top:2px solid var(--blau);border-bottom:2px solid var(--blau)}
.vgl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,348px) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center}
.vgl-notiz{background:var(--c);padding:22px 22px 20px;position:relative;font-size:1.12rem;box-shadow:0 1px 0 rgba(30,30,28,.2),0 12px 20px -14px rgba(30,30,28,.5);max-width:340px}
.vgl-notiz.vor{--c:var(--rosa);transform:rotate(-2deg);justify-self:end}
.vgl-notiz.nach{--c:var(--gelb);transform:rotate(1.6deg)}
.vgl-notiz p{font-family:var(--kopf);font-weight:700;text-transform:uppercase;font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.08;color:var(--blau);letter-spacing:.015em}
.mitte{width:100%;max-width:348px;justify-self:center}
.buehne{--pos:50%;position:relative;width:100%;height:664px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.lage{position:absolute;inset:0;background:var(--hellblau)}
.lage.handy-lage{clip-path:inset(0 0 0 var(--pos))}
.schild{position:absolute;top:-13px;z-index:3;font-family:var(--kopf);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;
  background:var(--blau);color:var(--weiss);padding:4px 10px 2px}
.schild.l{left:-6px}.schild.r{right:-6px;background:var(--rot-text)}
.griff{position:absolute;top:-6px;bottom:-6px;left:var(--pos);width:4px;margin-left:-2px;background:var(--rot);z-index:4;pointer-events:none}
.griff::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--rot);border:3px solid var(--weiss);
  background-image:linear-gradient(90deg,transparent 13px,var(--weiss) 13px,var(--weiss) 15px,transparent 15px,transparent 23px,var(--weiss) 23px,var(--weiss) 25px,transparent 25px);box-shadow:0 2px 6px rgba(30,30,28,.4)}

/* Papier-Zettel */
.pz{position:absolute;inset:10px 8px 14px 6px;background:var(--weiss);transform:rotate(-1.1deg);padding:16px 14px 10px 16px;
  box-shadow:0 1px 0 rgba(30,30,28,.2),0 12px 20px -12px rgba(30,30,28,.5);overflow:hidden}
.pz::after{content:"";position:absolute;right:-26px;top:118px;width:92px;height:92px;border-radius:50%;border:5px solid rgba(120,80,30,.16);box-shadow:inset 0 0 0 2px rgba(120,80,30,.07)}
.pz-kopf{border-bottom:2.5px solid var(--blau);padding-bottom:6px;margin-bottom:0}
.pz-kopf .verein{font-family:var(--kopf);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--blau)}
.pz-kopf .titel{font-family:var(--kopf);font-weight:700;text-transform:uppercase;font-size:1.75rem;line-height:1;color:var(--blau);margin-top:2px}
.pz-raster{display:grid;grid-template-columns:1.25fr 1fr;border-left:1px solid var(--blau)}
.pf{border-right:1px solid var(--blau);border-bottom:1px solid var(--blau);padding:4px 6px 0;height:77px;position:relative;overflow:visible;min-width:0}
.pf.ganz{grid-column:1/-1}
.pf .feldname{font-size:.72rem;letter-spacing:.08em;display:block}
.hs{font-family:var(--hand);font-weight:700;color:#1D3C97;display:block;white-space:nowrap;transform-origin:left center;line-height:1.1}
.hs s{text-decoration-thickness:2px}
.hs-1{font-size:1.5rem;transform:rotate(-3deg) translateY(4px)}
.hs-2{font-size:1.3rem;transform:rotate(2.5deg) translate(2px,8px)}
.hs-3{font-size:1.42rem;transform:rotate(-1.4deg) translate(6px,9px);letter-spacing:-.02em}
.hs-4{font-size:1.22rem;transform:rotate(1.8deg) translate(3px,5px);letter-spacing:-.01em}
.hs-5{font-size:1.6rem;transform:rotate(-2.6deg) translate(10px,6px)}
.hs-6{font-size:1.08rem;transform:rotate(1.2deg) translate(0,10px);letter-spacing:-.03em}
.hs-7{font-size:1.12rem;transform:rotate(-3.4deg) translate(0,10px);letter-spacing:-.03em}
.pz-box{display:flex;gap:10px;flex-wrap:nowrap;margin-top:7px;font-size:.78rem;line-height:1;white-space:nowrap}
.pz-box span{display:inline-flex;align-items:center;gap:4px}
.pz-box b{width:15px;height:15px;border:1.5px solid var(--blau);display:inline-block;position:relative;flex:none}
.pz-box b.x::after{content:"";position:absolute;left:-5px;top:-9px;width:28px;height:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 26'%3E%3Cpath d='M4 5 C10 11 16 17 24 23 M23 3 C17 9 10 16 3 24' fill='none' stroke='%231D3C97' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
.unterschrift{display:block;width:100%;height:40px;margin-top:-2px}

/* Handy */
.hy{position:absolute;inset:4px 14px 6px 14px;background:var(--text);border-radius:36px;padding:10px;box-shadow:0 16px 24px -14px rgba(30,30,28,.6)}
.hy-schirm{background:var(--weiss);border-radius:27px;height:100%;overflow:hidden;position:relative;display:flex;flex-direction:column}
.hy-kopf{background:var(--blau);color:var(--weiss);padding:26px 16px 10px}
.hy-kopf::before{content:"";position:absolute;top:8px;left:50%;width:64px;height:10px;margin-left:-32px;border-radius:6px;background:var(--text)}
.hy-kopf .verein{font-size:.74rem;letter-spacing:.02em}
.hy-kopf .titel{font-family:var(--kopf);font-weight:700;text-transform:uppercase;font-size:1.5rem;line-height:1;letter-spacing:.02em}
.hy-felder{padding:10px 14px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.hf{min-width:0}
.hf.ganz{grid-column:1/-1}
.hf .n{display:block;font-weight:700;font-size:.72rem;line-height:1.25;color:var(--text)}
.hf .w{display:flex;align-items:center;height:34px;border:1.5px solid var(--blau);border-radius:5px;padding:0 8px;font-size:.84rem;background:#fff;white-space:nowrap;overflow:hidden;color:var(--text)}
.hf .w.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:-.01em}
.hf .w.eng{font-size:.74rem;padding:0 5px}
.chips{display:flex;gap:5px}
.chips span{flex:1;display:flex;align-items:center;justify-content:center;height:34px;border:1.5px solid var(--blau);border-radius:5px;font-size:.74rem;color:var(--blau);background:#fff;min-width:0}
.chips span.an{background:var(--blau);color:var(--weiss);font-weight:700}
.hf .w.sig{height:34px;padding:0 4px}
.hy-senden{margin:12px 14px 0;height:42px;display:flex;align-items:center;justify-content:center;background:var(--rot);color:var(--weiss);
  font-family:var(--kopf);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1.1rem;border-radius:5px}

.regler{margin-top:26px}
.regler label{display:block;text-align:center;font-family:var(--kopf);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:1rem;color:var(--blau);margin-bottom:2px}
input[type=range].schieber{-webkit-appearance:none;appearance:none;width:100%;height:48px;background:transparent;margin:0;cursor:pointer;display:block}
.schieber::-webkit-slider-runnable-track{height:10px;background:var(--weiss);border:2px solid var(--blau)}
.schieber::-moz-range-track{height:6px;background:var(--weiss);border:2px solid var(--blau)}
.schieber::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:44px;margin-top:-19px;background:var(--rot);border:2px solid var(--blau);border-radius:0;box-shadow:3px 3px 0 var(--blau)}
.schieber::-moz-range-thumb{width:40px;height:40px;background:var(--rot);border:2px solid var(--blau);border-radius:0;box-shadow:3px 3px 0 var(--blau)}
.schieber:focus-visible{outline:3px solid var(--blau);outline-offset:4px}

/* ---------- So läuft es ---------- */
.schritte{list-style:none;margin:0;padding:0 0 70px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.schritt{--c:var(--weiss);padding:34px 26px 30px 54px;min-height:280px}
.schritt:nth-child(1){transform:rotate(-1.6deg);z-index:3;margin-right:-18px}
.schritt:nth-child(2){--c:var(--rosa);transform:translateY(34px) rotate(.8deg);z-index:2;margin:0 -6px}
.schritt:nth-child(3){--c:var(--gelb);transform:translateY(68px) rotate(2.2deg);z-index:1;margin-left:-18px}
.schritt .loch{left:18px}
.schritt .zahl{font-family:var(--mono);font-weight:600;font-size:clamp(4rem,7vw,6rem);line-height:.9;color:var(--rot-text);display:block}
.schritt h3{font-family:var(--kopf);font-weight:700;text-transform:uppercase;color:var(--blau);font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1;margin:14px 0 10px;border-bottom:2px solid var(--blau);padding-bottom:8px}
.schritt p{font-size:1.08rem}

/* ---------- Beispiele ---------- */
.karten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.karte{--c:var(--weiss);padding:26px 20px 20px;display:grid;grid-template-columns:66px minmax(0,1fr);gap:6px 14px;align-content:start;border:2px solid var(--blau);box-shadow:6px 6px 0 var(--s,var(--rosa)),6px 6px 0 2px var(--blau)}
.karte:nth-child(2){--c:var(--rosa);--s:var(--gelb)}
.karte:nth-child(3){--c:var(--gelb);--s:var(--hellblau)}
.karte:nth-child(4){--c:var(--hellblau);--s:var(--weiss)}
.karte:nth-child(5){--s:var(--gelb)}
.karte:nth-child(6){--c:var(--rosa);--s:var(--hellblau)}
.karte .bild{grid-row:1/4;width:66px;height:85px;background:var(--weiss);border:1.5px solid var(--blau);transform:rotate(-3deg);margin-top:4px}
.karte .bild svg{display:block;width:100%;height:100%}
.karte .knr{font-family:var(--mono);font-weight:600;font-size:.82rem;color:var(--rot-text);letter-spacing:.06em}
.karte h3{font-family:var(--kopf);font-weight:700;text-transform:uppercase;color:var(--blau);font-size:clamp(1.5rem,1.9vw,1.68rem);line-height:1;overflow-wrap:anywhere}
.karte p{font-size:1rem;line-height:1.45}
.karte .knopf{grid-column:1/-1;justify-self:start;margin-top:12px}
.karte .folgt{grid-column:1/-1;justify-self:start;margin-top:12px;font-family:var(--kopf);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:.86rem;color:var(--text);
  border:1.5px dashed var(--blau);padding:5px 10px 3px}

/* ---------- Muster ---------- */
.muster{background:var(--rosa);border-top:2px solid var(--blau);border-bottom:2px solid var(--blau);overflow:clip}
.muster .kopfzeile{max-width:660px;margin-left:auto;margin-right:auto}
.satz{position:relative;max-width:620px;margin:0 auto}
.satz::before,.satz::after{content:"";position:absolute;inset:0;box-shadow:0 1px 0 rgba(30,30,28,.2)}
.satz::before{background:var(--hellblau);transform:translate(16px,18px) rotate(1.8deg);box-shadow:0 16px 28px -16px rgba(30,30,28,.55)}
.satz::after{background:var(--gelb);transform:translate(8px,9px) rotate(.9deg)}
.mz{position:relative;z-index:1;background:var(--weiss);padding:34px clamp(16px,4vw,34px) 24px clamp(40px,7vw,58px);box-shadow:0 1px 0 rgba(30,30,28,.25)}
.mz::before{content:"";position:absolute;left:0;right:0;top:11px;height:8px;background:radial-gradient(circle,var(--rosa) 2.6px,transparent 3px) 2px 0/13px 8px repeat-x;filter:drop-shadow(0 .6px 0 rgba(30,30,28,.35))}
.mz .loch{left:clamp(12px,2.4vw,20px);background:var(--rosa)}
.mz.ruck{animation:ruck .34s .16s both}
.mz-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;border-bottom:3px solid var(--blau);padding-bottom:8px}
.mz-kopf h3{font-family:var(--kopf);font-weight:700;text-transform:uppercase;color:var(--blau);font-size:clamp(1.7rem,5vw,2.5rem);line-height:1}
.mz-kopf .nr-rot{font-size:clamp(.95rem,2.6vw,1.2rem);white-space:nowrap;padding-bottom:3px}
.mz form{margin:0}
.feld{border:1.5px solid var(--blau);border-top:0;position:relative;padding:6px 12px 4px;background:var(--weiss)}
.feld:focus-within{background:#FFF9D6;box-shadow:inset 0 0 0 2px var(--blau)}
.feld label.feldname,.feld legend.feldname{display:block;font-size:.92rem;padding:0;cursor:pointer}
.feld legend.feldname{float:left;width:100%}
.feld .hinweis{float:right;font-family:var(--kopf);font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.feld input[type=text],.feld input[type=email]{display:block;width:100%;border:0;border-bottom:1.5px dotted var(--blau);background:transparent;
  font-family:var(--hand);font-weight:400;font-size:1.5rem;line-height:1.2;color:var(--blau);padding:6px 0 0;min-height:44px;border-radius:0}
.feld input[type=text]:focus,.feld input[type=email]:focus{outline:none}
fieldset.feld{margin:0;min-width:0}
.wahl{clear:both;display:flex;flex-wrap:wrap;gap:2px 22px;margin-top:2px}
.wahl label,.zusage label{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:1.05rem;position:relative}
.wahl input,.zusage input{position:absolute;opacity:0;width:26px;height:26px;margin:0;left:0;top:50%;transform:translateY(-50%)}
.box{flex:none;width:26px;height:26px;border:2px solid var(--blau);background:var(--weiss);position:relative}
.box::after{content:"";position:absolute;left:-6px;top:-11px;width:44px;height:40px;opacity:0;transform:scale(.4) rotate(-12deg);transform-origin:30% 70%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'%3E%3Cpath d='M8 12 C14 19 22 27 34 37 M35 7 C27 15 17 26 6 36' fill='none' stroke='%2317357F' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform .16s cubic-bezier(.3,1.5,.5,1),opacity .1s}
input:checked+.box::after{opacity:1;transform:scale(1) rotate(0)}
input:focus-visible+.box{outline:3px solid var(--blau);outline-offset:3px}
.zusage label{align-items:flex-start;padding:9px 0}
.zusage .box{margin-top:1px}
.mz-knoepfe{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px}
.mz-knoepfe .knopf{flex:1 1 auto}
.meldung{min-height:1.6em;margin-top:14px;font-size:.98rem}
.meldung strong{font-family:var(--kopf);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.1rem;color:var(--blau)}
.stempelplatz{position:absolute;right:clamp(8px,4vw,40px);top:33%;pointer-events:none}
.stempelplatz .stempel{font-size:clamp(2.5rem,10.5vw,4.6rem);--dreh:-9deg;mix-blend-mode:multiply;opacity:0}
.stempelplatz.gesetzt .stempel{opacity:1;animation:stempeln .46s cubic-bezier(.2,.9,.25,1) both}
.stempelplatz::after{content:"";position:absolute;inset:-10% -6%;border:3px solid var(--rot);border-radius:50%;opacity:0;transform:rotate(-9deg) scale(.6)}
.stempelplatz.gesetzt::after{animation:spritzer .5s .2s ease-out both}
.muster-weiter{max-width:620px;margin:44px auto 0;text-align:right;position:relative;z-index:2}
@keyframes stempeln{
  0%{opacity:0;transform:rotate(-24deg) scale(3)}
  48%{opacity:1;transform:rotate(-8deg) scale(.9)}
  68%{transform:rotate(-9.6deg) scale(1.05)}
  100%{opacity:1;transform:rotate(-9deg) scale(1)}
}
@keyframes spritzer{0%{opacity:.55;transform:rotate(-9deg) scale(.7)}100%{opacity:0;transform:rotate(-9deg) scale(1.35)}}
@keyframes ruck{0%{transform:none}35%{transform:translateY(5px) rotate(-.5deg)}70%{transform:translateY(-1px) rotate(.2deg)}100%{transform:none}}

/* ---------- Preise ---------- */
.quittungen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px;align-items:start}
.quittung{--c:var(--weiss);background:var(--c);position:relative;padding:28px 18px 20px 20px;filter:drop-shadow(0 1px 0 rgba(30,30,28,.25)) drop-shadow(0 12px 12px rgba(30,30,28,.16))}
.quittung::before{content:"";position:absolute;left:0;right:0;top:10px;height:8px;background:radial-gradient(circle,var(--papier) 2.6px,transparent 3px) 2px 0/13px 8px repeat-x}
.quittung::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;
  background:linear-gradient(135deg,var(--c) 50%,transparent 50%) 0 0/14px 10px repeat-x,linear-gradient(225deg,var(--c) 50%,transparent 50%) 0 0/14px 10px repeat-x}
.quittung:nth-child(1){transform:rotate(-1.2deg)}
.quittung:nth-child(2){--c:var(--rosa);transform:rotate(.9deg) translateY(14px)}
.quittung:nth-child(3){--c:var(--gelb);transform:rotate(-.7deg)}
.quittung:nth-child(4){--c:var(--hellblau);transform:rotate(1.3deg) translateY(14px)}
.q-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:2px solid var(--blau);padding-bottom:6px}
.q-kopf .nr-rot{font-size:1.02rem;white-space:nowrap}
.quittung h3{font-family:var(--kopf);font-weight:700;text-transform:uppercase;color:var(--blau);font-size:clamp(1.7rem,2.3vw,2.1rem);line-height:1;margin-top:14px}
.preis{font-family:var(--mono);font-weight:600;color:var(--text);margin:10px 0 12px;padding:8px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);line-height:1.2}
.preis b{display:block;font-size:clamp(2.5rem,3.6vw,3.2rem);font-weight:600;letter-spacing:-.03em;color:var(--blau);white-space:nowrap}
.preis span{font-size:.92rem;font-weight:400}
.q-text{font-size:1rem;line-height:1.45}
.nicht{margin-top:56px;border:2px solid var(--blau);background:var(--weiss);padding:18px 20px 16px 62px;position:relative;max-width:820px;font-size:1.08rem}
.nicht::before{content:"";position:absolute;left:18px;top:18px;width:28px;height:28px;border:2px solid var(--blau);
  background:linear-gradient(45deg,transparent 46%,var(--rot-text) 46%,var(--rot-text) 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,var(--rot-text) 46%,var(--rot-text) 54%,transparent 54%)}
.steuer{margin-top:14px;font-size:.95rem;max-width:820px}

/* ---------- Fragen und „Wer das baut“ ---------- */
.fragen-reihe{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.fragen{border-top:2px solid var(--blau)}
.frage{border-bottom:1.5px solid var(--blau);background:var(--weiss)}
.frage summary{display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 14px;cursor:pointer;list-style:none;
  font-family:var(--kopf);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.1;color:var(--blau)}
.frage summary::-webkit-details-marker{display:none}
.frage summary::before{content:"";flex:none;width:24px;height:24px;border:2px solid var(--blau);background:var(--weiss)
  linear-gradient(var(--blau),var(--blau)) center/12px 2px no-repeat;
  background-image:linear-gradient(var(--blau),var(--blau)),linear-gradient(var(--blau),var(--blau));background-size:12px 2px,2px 12px;background-position:center;background-repeat:no-repeat}
.frage[open] summary::before{background-image:linear-gradient(var(--rot-text),var(--rot-text));background-size:12px 2px}
.frage[open] summary{background:var(--gelb)}
.frage summary:hover{background:var(--hellblau)}
.frage summary:focus-visible{outline-offset:-4px}
.frage p{padding:12px 16px 18px 52px;max-width:44em}
.wer{--c:var(--gelb);padding:22px 22px 18px;transform:rotate(1.4deg);max-width:420px}
.wer h2{font-size:.92rem;margin-bottom:8px}
.wer p{font-size:1.05rem}
.wer .wer-name{font-family:var(--hand);font-weight:700;color:var(--blau);font-size:1.6rem;line-height:1.1;margin-top:10px;transform:rotate(-3deg);transform-origin:left center}

/* ---------- Abschluss ---------- */
.abschluss{background:var(--gelb);border-top:2px solid var(--blau);position:relative;overflow:clip;padding:clamp(52px,9vw,128px) 0}
.abschluss::before{content:"";position:absolute;left:0;right:0;top:12px;height:10px;background:radial-gradient(circle,var(--papier) 3.4px,transparent 3.9px) 3px 0/18px 10px repeat-x;filter:drop-shadow(0 .6px 0 rgba(30,30,28,.4))}
.abschluss .innen{position:relative}
.abschluss h2{font-family:var(--kopf);font-weight:700;text-transform:uppercase;color:var(--blau);font-size:clamp(3.4rem,11vw,9.5rem);line-height:.86;max-width:8em}
.abschluss p{font-size:clamp(1.15rem,1.9vw,1.4rem);max-width:28em;margin:22px 0 32px}
.abschluss .stempel{position:absolute;right:calc(var(--rand) + 2%);top:auto;bottom:4%;font-size:clamp(2rem,5vw,3.5rem);--dreh:10deg;--sf:var(--rot-text)}

/* ---------- Fuß ---------- */
.fuss{background:var(--weiss);border-top:2px solid var(--blau);padding:18px 0}
.fuss .innen{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px}
.fuss .marke{font-size:1.4rem}
.fuss nav{display:flex;gap:6px 22px;flex-wrap:wrap;margin-right:auto;margin-left:12px}
.fuss nav a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--kopf);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1.08rem;color:var(--blau)}

/* ---------- Unterseiten: ruhiger gesetzt (E10) ---------- */
.seitenkopf{padding:clamp(32px,5vw,64px) 0 clamp(24px,4vw,44px)}
.seite-unter h1{font-size:clamp(2.6rem,7vw,5rem);line-height:.92}
.seitenkopf p.lauf{margin-top:18px}
.randnotiz{margin-top:18px;padding-top:10px;border-top:1.5px solid var(--blau);font-family:var(--hand);color:var(--blau);font-size:1.15rem;line-height:1.4;max-width:34em}
.seite-unter .kopfzeile h2{font-size:clamp(1.7rem,4.4vw,2.8rem)}
.seite-unter .kopfzeile{margin-bottom:clamp(18px,3vw,30px)}
.seite-unter .nicht{margin-top:26px}
.dazu{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:2px solid var(--blau);background:var(--weiss)}
.dazu li{padding:16px 18px 18px;border-left:1.5px solid var(--blau)}
.dazu li:first-child{border-left:0}
.dazu li:nth-child(2){background:var(--rosa)}
.dazu li:nth-child(3){background:var(--gelb)}
.dazu h3{font-family:var(--kopf);font-weight:700;text-transform:uppercase;color:var(--blau);font-size:1.5rem;line-height:1;margin-bottom:6px}
.dazu p{font-size:1rem;line-height:1.45}
.adresse{margin-top:30px;padding:36px clamp(16px,4vw,30px) 22px clamp(44px,7vw,58px);max-width:620px;border:2px solid var(--blau);box-shadow:6px 6px 0 var(--rosa),6px 6px 0 2px var(--blau)}
.adresse .loch{left:clamp(14px,2.4vw,20px)}
.adresse-wert{display:block;font-family:var(--hand);font-weight:700;color:var(--blau);font-size:clamp(1.55rem,6.4vw,2.6rem);line-height:1.15;margin-top:4px;
  border-bottom:1.5px dotted var(--blau);padding:6px 0 4px;text-decoration:none;overflow-wrap:anywhere;min-height:44px}
.adresse .knoepfe{margin-top:22px}
.hinein{margin:0;padding:0;list-style:none;counter-reset:n;border:2px solid var(--blau);background:var(--weiss)}
.hinein li{counter-increment:n;display:flex;align-items:center;gap:16px;padding:12px 16px;border-top:1.5px solid var(--blau);font-size:1.12rem}
.hinein li:first-child{border-top:0}
.hinein li::before{content:counter(n);flex:none;font-family:var(--mono);font-weight:600;font-size:1.7rem;line-height:1;color:var(--rot-text);min-width:1.2em}
.fliesstext{margin-top:22px;max-width:44em}
.fliesstext h2{font-family:var(--kopf);font-weight:700;text-transform:uppercase;color:var(--blau);font-size:1.6rem;line-height:1.1;margin:28px 0 8px}
.fliesstext p{margin-bottom:12px}
.fliesstext ul{margin:0 0 12px;padding-left:1.3em}
.fliesstext li{margin-bottom:6px}
.fliesstext a{overflow-wrap:anywhere}
.fliesstext .anschrift{line-height:1.5}
/* Lange Textseiten ruhiger setzen (E10): kleinere Hauptüberschrift, mehr Luft zwischen den Abschnitten. */
.seite-text h1{font-size:clamp(2.2rem,5.5vw,3.6rem);line-height:1}
.seite-text .fliesstext h2{font-size:1.35rem;margin-top:34px}

/* ---------- Formular-Spieler im Marken-Look (Beispiel-Seiten) ---------- */
.spielplatz{background:var(--rosa);border-top:2px solid var(--blau);border-bottom:2px solid var(--blau);padding:clamp(22px,4vw,48px) 0 clamp(32px,5vw,60px)}
.zettelspieler.tf{
  --tf-flaeche:transparent;--tf-papier:var(--weiss);--tf-tinte:var(--blau);--tf-akzent:var(--rot-text);--tf-text:var(--text);--tf-text-leise:#3F3F3A;
  --tf-linie:var(--blau);--tf-linie-staerke:1.5px;--tf-radius:0px;--tf-fehler:var(--rot-text);--tf-feld:#fff;
  --tf-schatten:0 1px 0 rgba(30,30,28,.2),0 14px 26px -16px rgba(30,30,28,.45);
  --tf-schrift:var(--lauf);--tf-schrift-kopf:var(--kopf);--tf-breite:44rem;
  min-height:0;padding:0;background:transparent;font-size:1.0625rem}
/* Platz freihalten, bis der Zettel geladen ist: sonst springen die Abschnitte darunter (Lighthouse CLS 0,2). */
.zettelspieler:empty,.zettelspieler.tf:has(> .tf-laden:not(.tf-meldung-fehler)){min-height:100vh}
.zettelspieler .tf-kopf{background:var(--weiss);border:2px solid var(--blau);padding:18px 18px 12px;box-shadow:6px 6px 0 var(--gelb),6px 6px 0 2px var(--blau)}
.zettelspieler .tf-kopf h1{text-transform:uppercase;font-size:clamp(2rem,6vw,3rem);line-height:.95;letter-spacing:.01em}
.zettelspieler .tf-absender{font-family:var(--kopf);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;color:var(--text)}
.zettelspieler .tf-demo-band{font-family:var(--kopf);letter-spacing:.14em;font-size:.95rem;border-radius:0;background:var(--weiss)}
.zettelspieler .tf-demo-hinweis{background:var(--papier);border-left-color:var(--rot-text)}
.zettelspieler .tf-blatt{border:2px solid var(--blau);margin:22px 0;padding:18px 16px 20px}
.zettelspieler .tf-blatt:nth-of-type(3n+1){box-shadow:6px 6px 0 var(--hellblau),6px 6px 0 2px var(--blau)}
.zettelspieler .tf-blatt:nth-of-type(3n+2){box-shadow:6px 6px 0 var(--gelb),6px 6px 0 2px var(--blau)}
.zettelspieler .tf-blatt:nth-of-type(3n){box-shadow:6px 6px 0 var(--weiss),6px 6px 0 2px var(--blau)}
.zettelspieler .tf-blatt h2{text-transform:uppercase;font-size:1.7rem;line-height:1;letter-spacing:.02em}
.zettelspieler .tf-frage{font-family:var(--kopf);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:.98rem;line-height:1.25;color:var(--blau)}
.zettelspieler.tf input[type="text"],.zettelspieler.tf input[type="email"],.zettelspieler.tf input[type="tel"],.zettelspieler.tf input[type="date"],.zettelspieler.tf textarea,.zettelspieler.tf select{
  font-family:var(--hand);font-size:1.3rem;line-height:1.25;color:var(--blau);padding:.45rem .7rem .3rem}
.zettelspieler.tf select{font-family:var(--lauf);font-size:1.05rem;color:var(--text)}
.zettelspieler .tf-option{font-size:1.05rem}
.zettelspieler .tf-knopf{font-family:var(--kopf);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:1.15rem;line-height:1.1;border-width:2px;
  box-shadow:4px 4px 0 var(--blau);transition:transform .12s,box-shadow .12s}
.zettelspieler .tf-knopf:hover:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 var(--blau)}
.zettelspieler .tf-knopf.tf-haupt{background:var(--rot);color:var(--weiss);font-size:1.3rem}
.zettelspieler .tf-knopf.tf-klein{font-size:1rem;box-shadow:3px 3px 0 var(--blau)}
.zettelspieler .tf-leeren{border-color:var(--blau);color:var(--blau)}
.zettelspieler .tf-knoepfe{gap:14px 16px;margin-top:18px}
.zettelspieler .tf-abschluss{background:var(--weiss);border:2px solid var(--blau);padding:14px 16px 12px}
.zettelspieler .tf-stempel{border-radius:0;letter-spacing:.09em}
.zettelspieler .tf-danke{background:var(--weiss);border:2px solid var(--blau);padding:22px 18px}
.zettelspieler .tf-fuss{display:none}
.zettelspieler .tf-demo-fenster h2{text-transform:uppercase;font-size:1.8rem;line-height:1}
.zettelspieler .tf-laden{margin:1rem auto}

/* ---------- Breiten ---------- */
@media (max-width:1080px){
  .quittungen{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
  .karten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .einstieg .innen{grid-template-columns:minmax(0,1fr)}
  .einstieg-text{padding-right:0}
  .block{margin-top:8px;width:min(86%,380px)}
  .vgl{grid-template-columns:minmax(0,1fr);justify-items:center}
  .vgl-notiz.vor{justify-self:center}
  .vgl-notiz{max-width:348px;width:100%}
  .schritte{grid-template-columns:minmax(0,1fr);padding-bottom:10px;max-width:520px;margin:0 auto}
  .schritt{min-height:0;padding-bottom:36px}
  .schritt:nth-child(1){margin:0 14px 0 0;transform:rotate(-1.2deg)}
  .schritt:nth-child(2){margin:-16px 4px 0 10px;transform:rotate(.9deg)}
  .schritt:nth-child(3){margin:-16px 0 0 18px;transform:rotate(-.6deg)}
  .schritt .zahl{float:right;font-size:3.6rem;margin-left:10px}
  .schritt h3{margin-top:0;overflow:hidden}
  .abschluss .stempel{position:static;margin:0 0 26px 4px}
  .fragen-reihe{grid-template-columns:minmax(0,1fr)}
  .wer{justify-self:start}
}
/* Handy: alles enger, damit die Startseite nicht zu lang wird (E13). */
@media (max-width:700px){
  body{font-size:1rem}
  .kopf-oben{align-items:flex-start}
  .blocknr{display:none}
  .marke{font-size:1.65rem}
  .unterzeile{font-size:.78rem;letter-spacing:.07em}
  .nav{grid-template-columns:repeat(2,1fr)}
  .nav a{border-bottom:1px solid var(--linie);font-size:1.08rem;min-height:46px;padding-top:16px;padding-bottom:6px}
  .nav a:nth-child(2n){border-right:1px solid var(--linie)}
  .nav a:nth-child(n+3){border-bottom:0}
  .knoepfe{margin-top:22px;gap:14px}
  .knoepfe .knopf{flex:1 1 100%}
  .einstieg-text>p.lauf{margin-top:16px}
  .sorten{margin-top:22px;font-size:1.08rem}
  .block{display:none}

  .vgl{gap:14px}
  .vgl-notiz{padding:10px 14px 8px;transform:none}
  .vgl-notiz.vor,.vgl-notiz.nach{transform:none}
  .vgl-notiz p{font-size:1.18rem}
  .vgl-notiz.vor{margin-bottom:10px}
  .regler{margin-top:16px}

  .schritt{padding:26px 18px 18px 46px}
  .schritt:nth-child(n){padding-bottom:26px}
  .schritt .zahl{font-size:2.8rem}
  .schritt h3{font-size:1.7rem;margin-bottom:6px;padding-bottom:5px}
  .schritt p{font-size:1rem}

  .karten{grid-template-columns:minmax(0,1fr);gap:14px}
  .karte{grid-template-columns:44px minmax(0,1fr) auto;gap:2px 12px;padding:12px 12px 12px 12px;align-items:start;box-shadow:4px 4px 0 var(--s,var(--rosa)),4px 4px 0 2px var(--blau)}
  .karte .bild{grid-row:1/3;width:44px;height:57px;margin-top:2px}
  .karte .knr{display:none}
  .karte h3{grid-column:2/-1;font-size:1.45rem}
  .karte p{grid-column:2/-1;font-size:.95rem;line-height:1.35}
  .karte .knopf{grid-column:2/-1;justify-self:start;margin-top:8px}
  .karte .folgt{display:none}

  .mz-knoepfe{gap:12px;margin-top:18px}
  .mz-knoepfe .knopf{font-size:1.12rem;padding:8px 12px;min-height:48px}
  .muster-weiter{margin-top:34px}

  /* Preise als ein Durchschlag-Satz: vier Streifen übereinander statt vier einzelner Quittungen. */
  .quittungen{grid-template-columns:minmax(0,1fr);gap:0;border:2px solid var(--blau);box-shadow:5px 5px 0 var(--blau)}
  .quittung:nth-child(n){transform:none;filter:none;padding:12px 14px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline;border-top:1.5px dashed var(--blau)}
  .quittung:first-child{border-top:0}
  .quittung::before,.quittung::after{display:none}
  .q-kopf{display:none}
  .quittung h3{margin-top:0;font-size:1.6rem}
  .preis{margin:0;padding:0;border:0;text-align:right}
  .preis b{font-size:1.9rem;display:inline}
  .preis span{display:block;font-size:.8rem}
  .q-text{grid-column:1/-1;font-size:.95rem;line-height:1.4}
  .nicht{margin-top:28px;padding:14px 14px 12px 54px;font-size:1rem}
  .nicht::before{left:14px;top:16px}

  .frage summary{min-height:52px;padding:8px 12px;gap:12px}
  .frage p{padding:10px 14px 14px 14px}
  .wer{transform:rotate(.8deg);padding:16px 16px 12px}

  .abschluss .knopf{width:100%}
  .abschluss p{margin:16px 0 24px}
  .fuss nav{margin-left:0}
  .dazu{grid-template-columns:minmax(0,1fr)}
  .dazu li{border-left:0;border-top:1.5px solid var(--blau);padding:12px 14px 14px}
  .dazu li:first-child{border-top:0}
  .hinein li{font-size:1.05rem;padding:10px 12px;gap:12px}
  .zettelspieler .tf-kopf,.zettelspieler .tf-blatt{box-shadow:4px 4px 0 var(--gelb),4px 4px 0 2px var(--blau)}
  .zettelspieler .tf-blatt:nth-of-type(n){box-shadow:4px 4px 0 var(--hellblau),4px 4px 0 2px var(--blau)}
  .zettelspieler .tf-blatt{padding:14px 12px 16px;margin:18px 0}
}
@media (max-width:380px){
  .hf .w{font-size:.8rem}
  .pz-box{gap:7px;font-size:.74rem}
  .karte .knopf{font-size:1rem;padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .stempelplatz.gesetzt .stempel{opacity:1;transform:rotate(-9deg)}
}
@media print{
  body{background:#fff}
  .kein-druck{display:none !important}
  .seite-start main>*{display:none}
  .seite-start main>.muster{display:block;background:#fff;border:0;padding:0}
  .seite-start .muster .kopfzeile,.seite-start .mz-knoepfe,.seite-start .satz::before,.seite-start .satz::after{display:none}
  .seite-start .mz{box-shadow:none}
  .spielplatz{background:#fff;border:0;padding:0}
}