/* Wireframe-Stil: von Hand gezeichnet.
   Farbe hat genau drei Aufgaben:
     rot    = Handlung (alles, was Reaktion auslösen soll)
     gelb   = Markierung (was hängen bleiben muss)
     blau   = Anmerkung (die Stimme des Entwerfers, nicht Teil des Entwurfs) */

@font-face{font-family:'Hand';src:url('/assets/fonts/patrickhand-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;font-display:swap}
@font-face{font-family:'Hand';src:url('/assets/fonts/patrickhand-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap}
@font-face{font-family:'Marker';src:url('/assets/fonts/caveat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;font-display:swap}
@font-face{font-family:'Marker';src:url('/assets/fonts/caveat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap}

:root{
  --paper:#fbf8f1;
  --ink:#23262b;
  --ink-2:#797d84;
  --red:#e0432a;
  --red-soft:#fdece8;
  --yellow:#ffdd57;
  --blue:#2f5fc0;
  --blue-soft:#ecf1fb;
  --max:1060px;
  --hand:'Hand',ui-rounded,'Comic Sans MS',cursive;
  --marker:'Marker','Hand',cursive;
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--hand);font-size:18px;line-height:1.45;
  /* Skizzenbuch-Punktraster */
  background-image:radial-gradient(circle,#0000000d 1px,transparent 1px);
  background-size:22px 22px}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 30px}

/* ---------- Kopfzeile des Entwurfs (nicht Teil des Designs) ---------- */
.chrome{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:10px 20px;background:#fffdf8;border-bottom:2px solid var(--ink);font-size:16px}
.chrome b{font-weight:400;border-bottom:2px solid var(--red)}
.chrome .spacer{margin-left:auto}
.chrome a,.chrome button{font:inherit;color:inherit;text-decoration:none;cursor:pointer;
  background:none;border:2px solid var(--ink);border-radius:14px 6px 16px 5px/6px 16px 5px 14px;padding:2px 12px}
.chrome a:hover,.chrome button:hover{background:var(--yellow)}

/* ---------- gezeichnete Grundformen ---------- */
.sk{position:relative;padding:22px}
.sk::before{content:'';position:absolute;inset:0;border:2.5px solid var(--ink);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;filter:url(#rough);pointer-events:none}
.sk.b2::before{border-radius:15px 255px 15px 225px/225px 15px 255px 15px}
.sk.b3::before{border-radius:220px 12px 30px 240px/18px 200px 20px 24px}
.sk.thin::before{border-width:1.8px}
.sk.fill{background:#fff8;border-radius:20px}
.sk.warn::before{border-color:var(--red)}

/* Textplatzhalter: gekritzelte Zeile */
.scribble{height:12px;margin:11px 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='12'%3E%3Cpath d='M0 7q5.5-4 11 0t11 0 11 0 11 0' fill='none' stroke='%2323262b' stroke-opacity='.45' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center}
.scribble.s90{width:90%}.scribble.s80{width:80%}.scribble.s70{width:70%}
.scribble.s60{width:60%}.scribble.s50{width:50%}.scribble.s40{width:40%}

/* Überschriften — echte Worte, von Hand */
h1.hw{font-family:var(--marker);font-size:60px;line-height:.98;margin:0 0 14px;font-weight:700}
h2.hw{font-family:var(--marker);font-size:36px;line-height:1.05;margin:0 0 10px;font-weight:700}
h3.hw{font-family:var(--hand);font-size:22px;margin:0 0 6px}
.sub{font-size:19px;color:#3d4148;max-width:52ch;margin:0}
.small{font-size:15px;color:var(--ink-2)}

/* gelber Marker */
.hl{background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 94%,transparent 94%);
  padding:0 .12em}

/* Handlung = rot */
.cta{display:inline-flex;align-items:center;gap:8px;position:relative;
  background:var(--red);color:#fff;padding:11px 22px;font-size:19px;
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;text-decoration:none}
.cta::after{content:'';position:absolute;inset:-4px;border:2.5px solid var(--red);
  border-radius:15px 225px 15px 255px/255px 15px 225px 15px;filter:url(#rough)}
.cta.ghost{background:none;color:var(--red)}
.cta.ghost::after{border-style:solid}
.cta.quiet{background:none;color:var(--ink)}
.cta.quiet::after{border-color:var(--ink);border-width:2px}

/* Eingabefeld */
.field{position:relative;padding:11px 14px;color:var(--ink-2);font-size:17px;min-height:46px;display:flex;align-items:center}
.field::before{content:'';position:absolute;inset:0;border:2px solid var(--ink);
  border-radius:200px 12px 190px 14px/14px 190px 12px 200px;filter:url(#rough)}
.field.red::before{border-color:var(--red)}

/* Bildplatz — durchgestrichenes Kästchen */
.imgbox{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--ink-2);font-size:16px;padding:12px;min-height:90px}
.imgbox::before{content:'';position:absolute;inset:0;border:2px solid var(--ink);border-radius:6px;filter:url(#rough);
  background:
    linear-gradient(to bottom right,transparent calc(50% - 1px),#23262b40 50%,transparent calc(50% + 1px)),
    linear-gradient(to bottom left,transparent calc(50% - 1px),#23262b40 50%,transparent calc(50% + 1px))}
.imgbox span{position:relative;background:var(--paper);padding:3px 8px;border-radius:4px}

/* Anmerkung = blau, Handschrift, klar außerhalb des Entwurfs */
.note{font-family:var(--marker);font-size:21px;line-height:1.32;color:var(--blue);
  margin:16px 0 0;padding-left:16px;max-width:66ch;border-left:3px solid var(--blue);border-radius:2px}
.note b{font-weight:700}
.note .why{display:inline-block;background:var(--blue-soft);padding:0 6px;border-radius:4px}

/* Abschnittsmarke */
.tag{display:inline-block;font-family:var(--hand);font-size:16px;color:var(--red);
  border:2px solid var(--red);border-radius:200px 12px 190px 14px/14px 190px 12px 200px;
  padding:2px 12px;margin-bottom:16px}

.sec{padding:46px 0;position:relative}
.sec + .sec{border-top:2px dashed #23262b26}

.row{display:flex;gap:24px}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.center{text-align:center}
.stack>*+*{margin-top:12px}

/* Pfeil, der auf etwas zeigt */
.pointer{display:flex;align-items:center;gap:8px;font-family:var(--marker);font-size:20px;color:var(--red)}
.pointer svg{flex:none}

@media (max-width:860px){.g3{grid-template-columns:repeat(2,1fr)}.row{flex-wrap:wrap}h1.hw{font-size:44px}}
@media (max-width:580px){.g2,.g3{grid-template-columns:1fr}.wrap{padding:0 18px}h1.hw{font-size:36px}}