/* Leseretter: Risograph-Zine, zwei Druckfarben auf Papierton */

@font-face{
  font-family:"Bricolage Grotesque";
  src:url("../assets/fonts/bricolage.woff2") format("woff2-variations"),url("../assets/fonts/bricolage.woff2") format("woff2");
  font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Special Elite";
  src:url("../assets/fonts/special-elite.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --paper:#F1EBDD; --ink:#0E3B2E; --pink:#FF4F7B; --pink-soft:#FFC2D1; --card:#FBF7EE; --mute:#3F5A50;
  --pink-ink:#C81E4E; /* Pink für kleine Schrift auf Papier, Kontrast 4,7:1 */
  --alert:#A3203F;
  --disp:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --type:"Special Elite","Courier New",ui-monospace,monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--disp);font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--pink-ink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--ink);color:var(--paper);padding:10px 14px;font-weight:800}
.skip:focus{top:12px}

/* Druckkorn über allem */
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.2  0 0 0 0 0.15  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.wrap{max-width:620px;margin:0 auto;padding:0 20px 130px;position:relative}
.wrap.short{padding-bottom:56px}

/* Kopf */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(16px + env(safe-area-inset-top,0px)) 0 8px}
.by{display:flex;align-items:center;gap:10px;font-size:12px;line-height:1.3;color:var(--mute);text-decoration:none}
.by img{height:30px;width:auto;border-radius:3px;display:block}
.by a{color:inherit;text-decoration:none;display:block}
.by a:hover,.sender a:hover{text-decoration:underline}
.sender a{flex-shrink:0;display:block}
.mark{font-weight:800;font-size:19px;letter-spacing:-.4px;font-variation-settings:"wdth" 80;text-decoration:none;white-space:nowrap}
.mark span{background:var(--pink);padding:0 .14em}

/* Hero */
.hero{position:relative;padding-top:18px}
.stamp{display:inline-block;font-family:var(--type);font-size:14px;color:var(--pink-ink);border:2.5px solid var(--pink);padding:4px 10px;transform:rotate(-4deg);border-radius:4px;letter-spacing:.5px}
.big{position:relative;margin:6px 0 0;line-height:.78;font-weight:800;font-stretch:75%;font-variation-settings:"wdth" 75,"opsz" 96;letter-spacing:-4px;font-size:clamp(120px,36vw,220px)}
.big .ink{position:relative;color:var(--ink);mix-blend-mode:multiply;z-index:2}
.big .pinklayer{position:absolute;left:10px;top:8px;color:var(--pink);z-index:1;white-space:nowrap}
.fact{font-size:19px;line-height:1.35;font-weight:600;max-width:24ch;margin:16px 0 0}
.fact small{font-family:var(--type);font-size:13px;font-weight:400;display:block;margin-top:6px;color:var(--mute)}
.turn{margin:44px 0 0;font-weight:800;font-variation-settings:"wdth" 80,"opsz" 96;font-size:clamp(44px,13vw,72px);line-height:.92;letter-spacing:-1.5px}
.turn em{font-style:normal;background:var(--pink);color:var(--ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Beitragsblock */
.give{margin:26px -4px 0;background:var(--card);border:2px solid var(--ink);padding:18px 16px;box-shadow:6px 6px 0 var(--pink)}
.appeal{font-family:var(--type);font-size:15px;line-height:1.55;margin:0}
.appeal b{font-family:var(--disp);font-weight:800;font-size:17px}
.mode{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);margin-top:16px}
.mode button{min-height:46px;border:none;background:transparent;font-weight:600;font-size:16px}
.mode button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.opt{min-height:58px;border:2px solid var(--ink);background:transparent;font-weight:800;font-size:23px;letter-spacing:-.5px;font-variation-settings:"wdth" 85}
.opt[aria-pressed="true"]{background:var(--pink);box-shadow:3px 3px 0 var(--ink)}
.own{margin-top:10px;width:100%;min-height:54px;border:2px solid var(--ink);background:transparent;font-weight:600;font-size:17px}
.own[aria-pressed="true"]{background:var(--pink-soft)}
.own-field{display:none;margin-top:10px;align-items:center;gap:8px;border:2px solid var(--ink);background:#fff;padding:0 14px;min-height:58px}
.own-field.show{display:flex}
.own-field:focus-within{outline:3px solid var(--pink-ink);outline-offset:3px}
.own-field input{flex:1;border:none;outline:none;font:inherit;font-weight:800;font-size:26px;background:transparent;color:var(--ink);min-width:0}
.own-field span{font-weight:800;font-size:26px}
.hint{font-family:var(--type);font-size:13px;margin:8px 0 0;min-height:1.2em;color:var(--alert)}
.next{margin-top:12px}
.next[aria-disabled="true"]{background:#B9B3A6;color:#4A463F;box-shadow:none;cursor:not-allowed}
.secure{font-family:var(--type);font-size:12px;line-height:1.5;color:var(--mute);margin:12px 0 0}

/* Hauptbutton */
.cta{width:100%;min-height:58px;border:none;background:var(--ink);color:var(--paper);font-weight:800;font-size:20px;font-variation-settings:"wdth" 90;letter-spacing:-.2px;box-shadow:5px 5px 0 var(--pink);display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;text-align:center;padding:0 14px;transition:transform .12s,box-shadow .12s}
.cta:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--pink)}

/* Drei Schritte */
.steps3{margin:56px 0 0;display:grid;gap:22px;padding:0;list-style:none}
.steps3 li{display:grid;grid-template-columns:62px 1fr;gap:12px;align-items:start}
.steps3 .n{font-weight:800;font-size:52px;line-height:.8;color:var(--pink);-webkit-text-stroke:1.5px var(--ink);font-variation-settings:"wdth" 75}
.steps3 h3{margin:0;font-size:21px;font-weight:800;font-variation-settings:"wdth" 90}
.steps3 p{margin:4px 0 0;font-size:16px;line-height:1.45}

/* Überschriften der Abschnitte */
.ask,.people{margin-top:64px}
.h2{margin:0;font-weight:800;font-variation-settings:"wdth" 80,"opsz" 96;font-size:clamp(34px,9.5vw,50px);line-height:.95;letter-spacing:-1px}

/* Wer hat dir vorgelesen */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chip{min-height:46px;padding:0 16px;border-radius:999px;border:2px solid var(--ink);background:transparent;font-weight:600;font-size:16px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.answer{font-size:17px;line-height:1.5;margin:16px 0 0;min-height:3em;max-width:38ch}
.answer b{background:var(--pink-soft)}

/* Vorbilder */
.people p{font-size:17px;line-height:1.5;margin:12px 0 0;max-width:36ch}
.shelf{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:20px -20px 0;padding:10px 20px 18px;scrollbar-width:none;list-style:none}
.shelf::-webkit-scrollbar{display:none}
.pol{flex:0 0 68%;scroll-snap-align:start;background:var(--card);padding:10px 10px 14px;border:2px solid var(--ink);margin:0}
.pol:nth-child(1){transform:rotate(-2deg)}.pol:nth-child(2){transform:rotate(1.5deg)}.pol:nth-child(3){transform:rotate(-1deg)}
.duo{position:relative;aspect-ratio:3/4;background:var(--pink);overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.duo img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.25) brightness(1.05);mix-blend-mode:multiply}
.duo::after{content:"";position:absolute;inset:0;background:var(--ink);mix-blend-mode:lighten;opacity:.9;pointer-events:none}
.duo svg{width:78%;height:auto;display:block}
.pol figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:10px}
.pol figcaption b{font-weight:800;font-size:20px;font-variation-settings:"wdth" 85}
.pol figcaption span{font-family:var(--type);font-size:12px}

/* Bleib dabei */
.stay{margin-top:56px;background:var(--ink);color:var(--paper);padding:22px 18px;box-shadow:6px 6px 0 var(--pink)}
.stay h2{margin:0;font-weight:800;font-variation-settings:"wdth" 80,"opsz" 96;font-size:clamp(30px,8.5vw,44px);line-height:.95;letter-spacing:-1px}
.stay p{font-size:16px;line-height:1.5;margin:10px 0 0}
.nl{display:flex;gap:8px;margin-top:16px}
.nl input{flex:1;min-width:0;min-height:52px;border:2px solid var(--paper);background:var(--paper);color:var(--ink);font:inherit;font-size:16px;padding:0 12px}
.nl button{min-height:52px;padding:0 16px;border:2px solid var(--pink);background:var(--pink);color:var(--ink);font-weight:800;font-size:19px}
.wa{margin-top:10px;width:100%;min-height:50px;border:2px solid var(--paper);background:transparent;color:var(--paper);font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}
.ok{font-family:var(--type);font-size:14px;margin:10px 0 0;min-height:1.2em;color:var(--pink-soft)}
.fine{font-family:var(--type);font-size:13px;line-height:1.5;margin-top:14px}
.stay .fine{color:#CFDCCF}

/* Fuß */
.sender{margin-top:56px;padding-top:18px;border-top:2px solid var(--ink);display:flex;gap:14px;align-items:center;font-size:13px;line-height:1.45}
.sender img{height:40px;width:auto;border-radius:3px}
.src{font-family:var(--type);font-size:11px;line-height:1.5;color:var(--mute);margin-top:14px}
.legal{display:flex;gap:18px;margin-top:12px;font-size:14px}
.legal a{min-height:24px;display:inline-flex;align-items:center}

/* Fixierter Button */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(241,235,221,0),var(--paper) 40%);transition:transform .25s,opacity .25s}
.dock.away{transform:translateY(110%);opacity:0;pointer-events:none}
.dock-in{max-width:580px;margin:0 auto}

/* Hinweis-Toast */
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:45;transform:translate(-50%,20px);max-width:calc(100% - 40px);width:440px;background:var(--ink);color:var(--paper);padding:14px 16px;font-size:16px;line-height:1.4;box-shadow:5px 5px 0 var(--pink);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast b{display:block;font-weight:800;font-size:18px}

/* Unterseiten: danke, Impressum, Datenschutz */
.page h1{font-weight:800;font-variation-settings:"wdth" 80,"opsz" 96;font-size:clamp(40px,11vw,64px);line-height:.95;letter-spacing:-1px;margin:28px 0 8px}
.page h2{font-weight:800;font-size:20px;margin:28px 0 6px;font-variation-settings:"wdth" 90}
.page h3{font-weight:800;font-size:17px;margin:18px 0 4px}
.page p,.page li,.page address{font-size:16px;line-height:1.55;font-style:normal}
.page p,.page address{margin:0 0 10px}
.page ul{padding-left:20px;margin:0 0 10px}
.back{font-family:var(--type);font-size:14px;display:inline-block;margin-top:8px}
.draft{font-family:var(--type);font-size:14px;line-height:1.5;color:var(--alert);border:2.5px solid var(--alert);padding:10px 12px;margin:16px 0 0;transform:rotate(-.6deg)}
.todo{background:var(--pink-soft);padding:0 .2em}
.page ul.board{list-style:none;padding:0;margin:14px 0 0;border-top:2px solid var(--ink)}
.board li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:2px solid var(--ink)}
.board b{font-weight:800;font-size:18px;font-variation-settings:"wdth" 90}
.board span{font-family:var(--type);font-size:14px;color:var(--mute)}

/* danke.html */
.yes{display:inline-block;margin:28px 0 4px;font-weight:800;font-size:clamp(40px,11vw,58px);line-height:1;letter-spacing:-1px;background:var(--pink);padding:4px 10px;transform:rotate(-2deg);font-variation-settings:"wdth" 85}
.lead{font-size:17px;line-height:1.5;margin:14px 0 0;max-width:36ch}
.sticker-card{margin-top:28px;background:var(--card);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--pink);padding:18px 16px}
.sticker-card h2{margin:0;font-weight:800;font-size:24px;font-variation-settings:"wdth" 85}
.sticker-prev{display:flex;justify-content:center;margin:16px 0 8px}
.sticker-prev canvas{width:min(240px,70%);height:auto;display:block}
.sticker-btns{display:grid;gap:10px;margin-top:12px}
.ghost{width:100%;min-height:50px;border:2px solid var(--ink);background:transparent;font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;text-decoration:none;text-align:center;padding:0 12px}
.thanks-to{margin-top:40px;border-top:2px dashed var(--ink);padding-top:18px}
.thanks-to p{font-size:19px;line-height:1.4;font-weight:600;margin:0 0 14px;max-width:30ch}

/* Tablet: breitere Spalte, Schritte und Polaroids nebeneinander */
@media (min-width:700px){
  .wrap{max-width:760px;padding-left:32px;padding-right:32px}
  .page .wrap.short{max-width:680px}
  .fact{font-size:22px}
  /* 1/3 und Satz nebeneinander, damit die Zahl groß werden darf */
  .hero{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:32px;align-items:end}
  .hero .stamp,.hero .turn{grid-column:1/-1;justify-self:start}
  .hero .big{font-size:clamp(200px,32vw,280px)}
  .hero .fact{margin:0 0 18px}
  .give{margin-left:0;margin-right:0;padding:24px 24px}
  .appeal{font-size:16px}
  .steps3{grid-template-columns:repeat(3,1fr);gap:28px}
  .steps3 li{grid-template-columns:1fr;gap:8px;align-content:start}
  .shelf{overflow:visible;margin:24px 0 0;padding:10px 0 18px}
  .pol{flex:1 1 0}
  .stay{padding:30px 28px}
}

/* Desktop: Hero links, Beitragsblock rechts */
@media (min-width:1000px){
  .wrap{max-width:1120px;padding-left:48px;padding-right:48px}
  .top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center;padding-top:24px}
  .hero{padding-top:0;display:block}
  .hero .big{font-size:clamp(200px,20vw,280px)}
  .hero .fact{margin:16px 0 0}
  .turn{font-size:clamp(56px,5.2vw,76px);margin-top:36px}
  .give{margin-top:0}
  .steps3{margin-top:96px;gap:48px}
  .ask{margin-top:96px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 64px;align-items:start}
  .ask .h2{grid-row:span 2}
  .ask .chips{margin-top:0}
  .people{margin-top:96px}
  .people>p{max-width:52ch}
  .shelf{gap:32px;max-width:900px}
  .stay{margin-top:96px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:40px}
  .stay .nl{margin-top:0}
  .stay h2{font-size:52px}
  .sender{margin-top:80px}
  /* fixierter Button wird zum schwebenden Knopf unten rechts */
  .dock{left:auto;right:32px;bottom:28px;padding:0;background:none}
  .dock-in{max-width:none}
  .dock .cta{width:auto;min-width:240px;padding:0 28px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{ .grain,.dock,.toast{display:none} }