/* Whiteboard nach dem Sparring: Rasterplatte, Marker in vier Farben, Post-its und Magnete. Bewusst ein festes helles Farbschema. */
:root{
  color-scheme: light;
  --bg:#f5f5ef; --grid:#e7e7df; --ink:#1c1e24; --blue:#1f4bd6; --red:#c62a14; --green:#0f6e3c;
  --post:#ffe96b; --post2:#ffa8cf; --post3:#a6e8ff; --frame:#c9c9c0; --card:#ffffff; --hl:rgba(255,233,107,.9);
  --bar:#1c1e24; --bar-fg:#f5f5ef;
  --f-marker:"Permanent Marker", "Comic Sans MS", cursive;
  --f-hand:"Caveat", "Bradley Hand", cursive;
  --f-body:"Karla", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.5; overflow-x:hidden}
img{max-width:100%; display:block}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit; cursor:pointer; color:inherit}
:focus-visible{outline:3px dashed var(--blue); outline-offset:3px}
h1,h2,h3{text-wrap:balance; margin:0}
p{margin:0}
section[id]{scroll-margin-top:60px}
.wrap{width:100%; max-width:1180px; margin-inline:auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}

.demo-bar{background:var(--bar); color:var(--bar-fg); font-size:12px; letter-spacing:.04em; text-align:center; padding-block:6px; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}

.board{background-color:var(--bg); background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:32px 32px; border-inline:10px solid var(--frame); max-width:1240px; margin-inline:auto; box-shadow:0 0 0 1px #b5b5ab}

/* Kopf */
.nav{display:flex; align-items:center; gap:20px; padding-block:18px; flex-wrap:wrap}
.logo{font-family:var(--f-marker); font-size:32px; text-decoration:none; line-height:1}
.logo span{color:var(--red)}
.nav nav{display:flex; gap:18px; font-family:var(--f-hand); font-size:24px; flex-wrap:wrap}
.nav nav a{text-decoration:none}
.nav nav a:hover{text-decoration:underline wavy var(--blue)}
.btn{display:inline-block; font-family:var(--f-marker); font-size:18px; text-decoration:none; color:var(--ink); border:3px solid var(--ink); border-radius:255px 15px 225px 15px/15px 225px 15px 255px; padding:10px 18px; background:var(--post); transition:transform .15s}
.btn:hover{transform:rotate(-2deg) scale(1.03)}
.nav .btn{margin-left:auto}

/* Einstieg */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; padding-block:28px 40px}
.hero-text{display:grid; gap:18px; min-width:0}
.strike{font-family:var(--f-hand); font-size:clamp(26px,3.2vw,38px); position:relative; display:inline-block; justify-self:start; opacity:.75}
.strike::after{content:""; position:absolute; left:-4px; right:-4px; top:52%; height:5px; background:var(--red); border-radius:4px; transform:rotate(-2deg) scaleX(0); transform-origin:left; animation:strike .7s .5s ease-out forwards}
.strike .nope{position:absolute; right:-10px; top:-28px; font-family:var(--f-marker); color:var(--red); font-size:20px; transform:rotate(8deg)}
@keyframes strike{to{transform:rotate(-2deg) scaleX(1)}}
h1{font-family:var(--f-marker); font-weight:400; font-size:clamp(46px,7vw,92px); line-height:.98; letter-spacing:-.01em}
h1 .circ{position:relative; white-space:nowrap; color:var(--blue)}
h1 .circ svg{position:absolute; left:-8%; top:-14%; width:116%; height:130%; overflow:visible; pointer-events:none}
.lead{font-size:clamp(18px,1.6vw,21px); max-width:38ch}
.ctas{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.ctas .btn{font-size:21px; padding:14px 24px}
.scrib{font-family:var(--f-hand); font-size:24px; color:var(--green); transform:rotate(-3deg)}
.hero-fig{position:relative; margin:0; min-width:0}
.hero-fig img{mix-blend-mode:multiply; width:100%}
.hero-fig .lab{position:absolute; font-family:var(--f-hand); font-weight:700; line-height:1.05; color:var(--red)}
.hero-fig .lab1{right:-2%; top:4%; font-size:clamp(22px,2.4vw,30px); max-width:9.5em; text-align:right; transform:rotate(6deg)}
.hero-fig .lab1 svg{display:block; margin:6px 30% 0 auto; width:70px; height:80px}
.hero-fig .lab2{left:0; top:28%; font-size:26px; color:var(--blue); transform:rotate(-8deg)}
.hero-fig .lab3{right:4%; bottom:-5%; font-size:26px; color:var(--green); transform:rotate(-4deg)}
.wipe{background:var(--card); border:2px solid var(--ink); border-radius:6px; padding:6px 12px; font-family:var(--f-hand); font-size:20px; display:inline-flex; gap:8px; align-items:center; box-shadow:3px 3px 0 var(--ink)}
.wipe .sponge{width:22px; height:14px; background:var(--post); border:2px solid var(--ink); border-radius:3px}
.wipeable{transition:opacity .5s}
.wiped .wipeable{opacity:0}
.wipemsg{font-family:var(--f-hand); font-size:24px; color:var(--blue); min-height:1.3em}

/* Abschnitte */
.sec{padding-block:48px}
.sec h2{font-family:var(--f-marker); font-weight:400; font-size:clamp(34px,4.6vw,56px); line-height:1.05}
.sec h2 u{text-decoration:underline; text-decoration-color:var(--red); text-decoration-thickness:5px; text-underline-offset:8px}
.sec .sub{font-family:var(--f-hand); font-size:26px; color:var(--blue); margin-top:6px}

/* Post-its */
.posts{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:32px}
.postit{perspective:900px; background:none; border:0; padding:0; text-align:left; min-height:230px}
.postit .in{position:relative; display:block; width:100%; height:100%; min-height:230px; transform-style:preserve-3d; transition:transform .5s}
.postit.flipped .in{transform:rotateY(180deg)}
.postit .face{position:absolute; inset:0; backface-visibility:hidden; padding:22px 18px 16px; background:var(--post); box-shadow:0 10px 18px -10px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:10px}
.postit:nth-child(2) .face{background:var(--post2)}
.postit:nth-child(3) .face{background:var(--post3)}
.postit:nth-child(odd) .in{rotate:-2deg}
.postit:nth-child(even) .in{rotate:2.5deg}
.postit .front q{font-family:var(--f-marker); font-size:22px; line-height:1.15; quotes:"„" "“"}
.postit .front .turn{margin-top:auto; font-family:var(--f-hand); font-size:20px}
.postit .back{transform:rotateY(180deg); background:var(--card)!important; border:2px solid var(--ink)}
.postit .back b{font-family:var(--f-hand); font-size:24px; color:var(--red)}
.postit .back p{font-size:16px}

/* Bullshit-Bingo */
.bingo-row{display:grid; grid-template-columns:minmax(0,720px) minmax(0,1fr); gap:44px; align-items:center; margin-top:30px}
.bingo{display:grid; grid-template-columns:repeat(3,1fr); position:relative}
.bingo button{background:transparent; border:0; border-right:3px solid var(--ink); border-bottom:3px solid var(--ink); aspect-ratio:1.55; font-family:var(--f-marker); font-size:clamp(15px,1.9vw,22px); line-height:1.1; padding:10px; position:relative; max-width:100%; min-width:0; overflow-wrap:anywhere}
.bingo button:nth-child(3n){border-right:0}
.bingo button:nth-child(n+7){border-bottom:0}
.bingo button:nth-child(2){border-bottom-left-radius:4px 10px}
.bingo button:nth-child(5){border-right-width:4px}
.bingo button:hover{color:var(--blue)}
.bingo button::after{content:""; position:absolute; inset:12% 8%; border:4px solid var(--red); border-radius:58% 42% 55% 45%/50% 60% 40% 50%; rotate:-6deg; opacity:0; scale:.7; transition:opacity .15s, scale .2s}
.bingo button[aria-pressed="true"]::after{opacity:1; scale:1}
.bingo button.win{background:linear-gradient(transparent 22%, var(--hl) 22%, var(--hl) 78%, transparent 78%)}
.result{background:var(--post); padding:24px 22px; box-shadow:0 12px 22px -10px rgba(0,0,0,.35); rotate:2deg; display:grid; gap:10px; align-content:start; max-width:380px}
.result strong{font-family:var(--f-marker); font-weight:400; font-size:38px; line-height:1}
.result p{font-size:17px}
.result .count{font-family:var(--f-hand); font-size:22px; color:var(--blue)}
.result .reset{justify-self:start; background:var(--card); border:2px solid var(--ink); border-radius:6px; padding:4px 12px; font-family:var(--f-hand); font-size:20px}
.result.won{background:var(--post3)}
.result .btn{justify-self:start}

/* Ablauf */
.flow{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:34px}
.step{display:grid; gap:8px; align-content:start}
.step .num{width:64px; height:64px; display:grid; place-items:center; font-family:var(--f-marker); font-size:30px; border:3px solid var(--blue); border-radius:52% 48% 55% 45%/48% 55% 45% 52%; color:var(--blue)}
.step h3{font-family:var(--f-marker); font-weight:400; font-size:28px}
.step p{max-width:30ch}
.step .aside{font-family:var(--f-hand); font-size:22px; color:var(--green)}

/* Foto */
.proof{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.photo{background:var(--card); padding:12px 12px 48px; margin:0; rotate:2.5deg; box-shadow:0 14px 26px -12px rgba(0,0,0,.4); position:relative; min-width:0}
.photo::before{content:""; position:absolute; top:-14px; left:18%; width:100px; height:28px; background:rgba(166,232,255,.8); rotate:-6deg}
.photo img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 40%}
.photo figcaption{position:absolute; left:0; right:0; bottom:10px; text-align:center; font-family:var(--f-hand); font-size:24px; color:var(--red)}
.proof .txt{display:grid; gap:14px; min-width:0}
.proof .txt p{max-width:46ch}

/* Angebote */
.offers{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:34px}
.card{background:var(--card); border:2px solid var(--ink); padding:30px 22px 22px; position:relative; display:grid; gap:10px; align-content:start}
.card::before{content:""; position:absolute; top:-12px; left:50%; width:22px; height:22px; margin-left:-11px; border-radius:50%; background:var(--red); box-shadow:inset -4px -4px 0 rgba(0,0,0,.25)}
.card:nth-child(2)::before{background:var(--blue)}
.card:nth-child(3)::before{background:var(--green)}
.card h3{font-family:var(--f-marker); font-weight:400; font-size:26px}
.card .meta{font-family:var(--f-hand); font-size:22px; color:var(--blue)}

/* Über mich */
.about{display:grid; grid-template-columns:320px 1fr; gap:40px; align-items:center}
.polaroid{background:var(--card); padding:14px 14px 50px; box-shadow:0 14px 26px -12px rgba(0,0,0,.4); rotate:-4deg; position:relative; margin:0}
.polaroid figcaption{position:absolute; left:0; right:0; bottom:10px; text-align:center; font-family:var(--f-hand); font-size:24px}
.polaroid::before{content:""; position:absolute; top:-14px; left:50%; width:110px; height:30px; margin-left:-55px; background:rgba(255,233,107,.75); rotate:3deg}
.about .txt{display:grid; gap:14px; min-width:0}
.about .txt p{max-width:58ch}
.notes{display:flex; gap:22px; flex-wrap:wrap; font-family:var(--f-hand); font-size:24px}
.notes span:nth-child(1){color:var(--red); rotate:-3deg}
.notes span:nth-child(2){color:var(--blue); rotate:2deg}
.notes span:nth-child(3){color:var(--green); rotate:-1deg}
.praxis{border:3px dashed var(--frame); padding:22px; font-family:var(--f-hand); font-size:26px; text-align:center}

/* Kontakt */
.contact{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start}
.contact .txt{display:grid; gap:14px; min-width:0}
.sheet{background:var(--card); border:2px solid var(--ink); padding:26px 24px; rotate:-1deg; box-shadow:6px 6px 0 var(--ink); display:grid; gap:16px; min-width:0}
.sheet label{display:grid; gap:4px; font-family:var(--f-hand); font-size:22px; min-width:0}
.sheet input,.sheet textarea{font:inherit; font-family:var(--f-body); font-size:17px; border:0; border-bottom:2px solid var(--ink); background:transparent; padding:6px 2px; width:100%; color:var(--ink)}
.sheet textarea{min-height:100px; resize:vertical; border:2px solid var(--ink); border-radius:4px; padding:8px}
.sheet .send{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.sheet .msg{font-family:var(--f-hand); font-size:22px; color:var(--green)}

.foot{padding-block:28px 40px; font-family:var(--f-hand); font-size:22px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:2px solid var(--ink)}

@media (max-width: 880px){
  .hero,.bingo-row,.proof,.about,.contact{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr 1fr}
  .flow,.offers{grid-template-columns:1fr}
  .polaroid{max-width:280px}
  .board{border-inline-width:0}
  .nav .btn{margin-left:0}
}
@media (max-width: 520px){
  .posts{grid-template-columns:1fr}
  .nav nav{display:none}
  .bingo button{aspect-ratio:1.1}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .strike::after{transform:rotate(-2deg) scaleX(1)}
}

/* Variante 5: Mix aus werfbaren Zetteln (2), Fotostapel (1) und Mini-Bastian (3c) */
:root{--ease-out:cubic-bezier(0.23, 1, 0.32, 1); --ease-io:cubic-bezier(0.77, 0, 0.175, 1); --ease-spring:cubic-bezier(0.34, 1.45, 0.64, 1); --soft:0 12px 22px -12px rgba(28,30,36,.45)}
.strike{opacity:1; color:#4a4c52}
.btn{transition:transform 160ms var(--ease-out)} .btn:active{transform:scale(.97)}
::selection{background:var(--post); color:var(--ink)}
input,textarea{caret-color:var(--blue)}
/* Werfbare Zettel */
.posts{position:relative}
.postit{position:relative; touch-action:none; user-select:none; z-index:1; transform:rotate(var(--r))}
.postit.dragging{z-index:5}
.postit:nth-child(odd) .in,.postit:nth-child(even) .in{rotate:0deg}
.postit .in{transition:transform 520ms var(--ease-io)}
.postit .face{transition:box-shadow 200ms var(--ease-out)}
.postit.dragging .face{box-shadow:0 26px 34px -14px rgba(28,30,36,.45)}
.postit .front .turn{display:flex; justify-content:space-between; align-items:center}
.postit .grip{width:16px; height:16px}
/* Fotostapel */
.stack-wrap{display:grid; gap:12px; justify-items:center; min-width:0}
.stack{position:relative; width:min(300px, 78vw); aspect-ratio:300/370; touch-action:none; user-select:none}
.card-s{position:absolute; inset:0; margin:0; background:var(--card); padding:12px 12px 46px; box-shadow:0 16px 28px -14px rgba(28,30,36,.5); transition:transform 420ms var(--ease-spring), box-shadow 200ms ease; cursor:grab}
.card-s.dragging{transition:none; cursor:grabbing; box-shadow:0 30px 40px -18px rgba(28,30,36,.55)}
.card-s.flying{transition:transform 260ms var(--ease-out), opacity 260ms ease}
.card-s img{width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none}
.card-s figcaption{position:absolute; left:0; right:0; bottom:10px; text-align:center; font-family:var(--f-hand); font-size:22px}
.card-s.note{background:var(--post); display:grid; place-items:center; padding:28px 24px 46px}
.card-s.note p{font-family:var(--f-marker); font-size:24px; line-height:1.2; text-align:center}
.stack.pulse{animation:pulse 420ms var(--ease-out)}
@keyframes pulse{40%{transform:scale(.96) rotate(-1deg)}}
.stack-ctl{display:flex; gap:10px}
.stack-ctl .reset{background:var(--card); border:2px solid var(--ink); border-radius:6px; padding:4px 12px; font-family:var(--f-hand); font-size:20px; transition:transform 160ms var(--ease-out)}
.stack-ctl .reset:active{transform:scale(.97)}
.stack-hint{font-family:var(--f-hand); font-size:20px; color:var(--blue)}
.about{grid-template-columns:340px 1fr}
/* Mini-Bastian */
.sidekick{position:fixed; z-index:50; right:max(16px, env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); display:flex; align-items:flex-end; gap:10px; pointer-events:none}
.sidekick > *{pointer-events:auto}
.sk-face{width:88px; height:88px; border-radius:50%; overflow:hidden; background:var(--card); border:3px solid var(--ink); box-shadow:var(--soft); flex:none; padding:0; transition:transform 200ms var(--ease-spring)}
.sk-face:active{transform:scale(.94)}
.sk-face.nod{animation:nod 520ms var(--ease-out)}
@keyframes nod{30%{transform:rotate(-10deg) translateY(-6px)} 60%{transform:rotate(6deg)}}
.sk-face img{width:100%; height:100%; object-fit:cover}
.bubble{position:relative; max-width:250px; background:var(--card); border:3px solid var(--ink); border-radius:18px 18px 4px 18px; padding:12px 34px 12px 14px; font-family:var(--f-marker); font-size:17px; line-height:1.25; box-shadow:var(--soft); margin-bottom:40px; transform-origin:100% 100%; transition:transform 240ms var(--ease-out), opacity 200ms ease}
.bubble::after{content:""; position:absolute; right:-14px; bottom:-3px; width:22px; height:18px; background:var(--card); border-right:3px solid var(--ink); border-bottom:3px solid var(--ink); transform:skewX(40deg)}
.bubble.pop{transform:scale(.9) rotate(-3deg); opacity:.3; transition:none}
.sk-close{position:absolute; top:6px; right:6px; width:24px; height:24px; border:0; background:transparent; padding:0; display:grid; place-items:center}
.sk-close svg{width:14px; height:14px}
.sidekick.hidden .bubble{display:none}
@media (max-width: 880px){ .about{grid-template-columns:1fr} }
@media (max-width: 520px){ .sk-face{width:64px; height:64px} .bubble{max-width:200px; font-size:15px; margin-bottom:28px} }
@media (prefers-reduced-motion: reduce){ .postit .in,.card-s,.bubble{transition:none} .sk-face.nod{animation:none} }


/* ===== Mehrseiten-Bausteine ===== */
html,body{margin:0}
body{-webkit-text-size-adjust:100%}
.nav nav a[aria-current="page"]{text-decoration:underline; text-decoration-color:var(--red); text-decoration-thickness:3px; text-underline-offset:6px}
.menu{display:none; margin-left:auto}
.menu summary{list-style:none; cursor:pointer; font-family:var(--f-marker); font-size:18px; border:2px solid var(--ink); border-radius:8px; padding:6px 12px; background:var(--card)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--post)}
.menu .menu-list{position:absolute; left:max(16px, env(safe-area-inset-left,0px)); right:max(16px, env(safe-area-inset-right,0px)); margin-top:10px; z-index:40; background:var(--card); border:2px solid var(--ink); border-radius:10px; padding:14px 18px; display:grid; gap:10px; box-shadow:0 18px 30px -16px rgba(28,30,36,.5)}
.menu .menu-list a{font-family:var(--f-marker); font-size:22px; text-decoration:none}
.menu .menu-list a[aria-current="page"]{color:var(--red)}
@media (max-width: 880px){ .nav nav{display:none} .menu{display:block; position:static} .nav{position:relative} .nav > .btn{display:none} }

.crumbs{font-family:var(--f-hand); font-size:20px; color:var(--blue); padding-top:4px}
.crumbs a{text-decoration:none} .crumbs a:hover{text-decoration:underline}
.hero-photo{position:relative; margin:0; background:var(--card); padding:12px 12px 46px; transform:rotate(2.5deg); box-shadow:0 18px 30px -16px rgba(28,30,36,.5); min-width:0}
.hero-photo img{width:100%; aspect-ratio:4/3; object-fit:cover}
.hero-photo figcaption{position:absolute; left:0; right:0; bottom:10px; text-align:center; font-family:var(--f-hand); font-size:22px; color:var(--red)}
.hero-photo::before{content:""; position:absolute; top:-14px; left:24%; width:110px; height:28px; background:rgba(255,233,107,.85); transform:rotate(-5deg); z-index:1}
.badges{display:flex; flex-wrap:wrap; gap:10px}
.badges span{font-family:var(--f-hand); font-size:21px; background:var(--card); border:2px solid var(--ink); border-radius:999px; padding:2px 12px; transform:rotate(-1deg)}
.badges span:nth-child(2){transform:rotate(1.5deg); background:var(--post)}

/* Türen zu den Unterseiten */
.doors{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:34px}
.door{position:relative; display:grid; gap:10px; align-content:start; text-decoration:none; color:var(--ink); background:var(--post); padding:30px 22px 24px; box-shadow:0 14px 24px -14px rgba(28,30,36,.45); transition:transform 220ms var(--ease-out)}
.door:nth-child(1){transform:rotate(-1.5deg)} .door:nth-child(2){transform:rotate(1.2deg); background:var(--post3)} .door:nth-child(3){transform:rotate(-.6deg); background:var(--post2)}
.door::before{content:""; position:absolute; top:-11px; left:50%; width:22px; height:22px; margin-left:-11px; border-radius:50%; background:var(--red); box-shadow:inset -4px -4px 0 rgba(0,0,0,.25), 0 4px 6px -2px rgba(28,30,36,.4)}
.door:nth-child(2)::before{background:var(--blue)} .door:nth-child(3)::before{background:var(--green)}
@media (hover:hover) and (pointer:fine){ .door:hover{transform:rotate(0deg) translateY(-6px)} }
.door:active{transform:scale(.98)}
.door .tag{font-family:var(--f-hand); font-size:22px; color:var(--blue)}
.door h3{font-family:var(--f-marker); font-weight:400; font-size:28px; line-height:1.1}
.door .go{font-family:var(--f-marker); font-size:17px; margin-top:6px; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px}
.door .price{font-family:var(--f-hand); font-size:22px; font-weight:700}

/* Preis-Zettel */
.pricebox{background:var(--card); border:2px solid var(--ink); padding:28px 24px; display:grid; gap:12px; transform:rotate(-1.2deg); box-shadow:0 18px 30px -16px rgba(28,30,36,.5); position:relative; max-width:420px}
.pricebox::before{content:""; position:absolute; top:-12px; left:50%; width:24px; height:24px; margin-left:-12px; border-radius:50%; background:var(--blue); box-shadow:inset -4px -4px 0 rgba(0,0,0,.25)}
.pricebox h3{font-family:var(--f-marker); font-weight:400; font-size:28px}
.pricebox .row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-bottom:2px dotted var(--ink); padding-bottom:6px}
.pricebox .row b{font-family:var(--f-marker); font-weight:400; font-size:30px; color:var(--red); white-space:nowrap}
.pricebox small{color:#4a4c52}
.checks{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.checks li{position:relative; padding-left:34px}
.checks li::before{content:""; position:absolute; left:4px; top:5px; width:16px; height:9px; border-left:4px solid var(--green); border-bottom:4px solid var(--green); transform:rotate(-45deg)}
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center}

/* Praxisbeispiele */
.cases{display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:34px}
.case{background:var(--card); border:2px solid var(--ink); padding:30px 24px 24px; display:grid; gap:12px; position:relative; box-shadow:0 14px 24px -16px rgba(28,30,36,.45)}
.case:nth-child(1){transform:rotate(-.8deg)} .case:nth-child(2){transform:rotate(.8deg)}
.case::before{content:""; position:absolute; top:-14px; left:30%; width:100px; height:26px; background:rgba(166,232,255,.85); transform:rotate(-4deg)}
.case .who{font-family:var(--f-hand); font-size:22px; color:var(--blue)}
.case h3{font-family:var(--f-marker); font-weight:400; font-size:26px}
.case .out{background:var(--post); padding:12px 14px; font-size:16px}
.case .out b{font-family:var(--f-hand); font-size:20px; display:block}

/* Häufige Fragen */
.faq{display:grid; gap:14px; margin-top:30px; max-width:860px}
.faq details{background:var(--card); border:2px solid var(--ink); border-radius:8px; padding:0 18px}
.faq details[open]{background:#fffdf0}
.faq summary{cursor:pointer; list-style:none; font-family:var(--f-marker); font-size:20px; padding:14px 30px 14px 0; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:4px; top:50%; width:12px; height:12px; border-right:3px solid var(--red); border-bottom:3px solid var(--red); transform:translateY(-70%) rotate(45deg); transition:transform 200ms var(--ease-out)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding-bottom:16px; max-width:70ch}

/* Bildergalerie im Stapel mit breiten Fotos */
.stack.wide{aspect-ratio:4/3.6; width:min(440px, 86vw)}
.split-stack{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center}

/* Formular: E-Mail-Entwurf */
.sheet select{font:inherit; font-family:var(--f-body); font-size:17px; border:0; border-bottom:2px solid var(--ink); background:transparent; padding:6px 2px; width:100%; color:var(--ink)}
.sheet .two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.sheet .hint{font-size:14px; color:#4a4c52}
.mail-out{display:grid; gap:12px; background:var(--post); padding:18px; margin-top:6px}
.mail-out b{font-family:var(--f-marker); font-weight:400; font-size:20px}
.mail-out textarea{font-family:var(--f-body); font-size:15px; min-height:180px; border:2px solid var(--ink); border-radius:4px; padding:10px; background:var(--card); width:100%}
.mail-out .acts{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.mail-out .addr{font-family:var(--f-marker); user-select:all}
.small-btn{background:var(--card); border:2px solid var(--ink); border-radius:6px; padding:5px 12px; font-family:var(--f-hand); font-size:20px; text-decoration:none; color:var(--ink); transition:transform 160ms var(--ease-out)}
.small-btn:active{transform:scale(.97)}

/* Prompt-Bibliothek */
.lib-hero-note{background:var(--post2); padding:22px 20px; transform:rotate(2deg); box-shadow:0 14px 24px -14px rgba(28,30,36,.45); display:grid; gap:8px; max-width:340px}
.lib-hero-note b{font-family:var(--f-marker); font-weight:400; font-size:26px; line-height:1.1}
.lib-hero-note .tag{font-family:var(--f-hand); font-size:21px; color:var(--blue)}
.lib-controls{display:grid; gap:16px; margin-top:28px}
.lib-search{display:flex; align-items:center; gap:10px; max-width:560px; border-bottom:3px solid var(--ink); padding:4px 2px}
.lib-search svg{width:22px; height:22px; flex:none}
.lib-search input{font:inherit; font-family:var(--f-marker); font-size:22px; border:0; background:transparent; width:100%; padding:6px 0; color:var(--ink)}
.lib-search input:focus{outline:none}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chips button{font-family:var(--f-hand); font-size:21px; background:var(--card); border:2px solid var(--ink); border-radius:999px; padding:2px 14px; transition:transform 160ms var(--ease-out)}
.chips button:active{transform:scale(.96)}
.chips button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.chips button.cafe[aria-pressed="false"]{background:var(--post)}
.lib-count{font-family:var(--f-hand); font-size:22px; color:var(--blue)}
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:8px}
.pcard{position:relative; text-align:left; background:var(--card); border:2px solid var(--ink); padding:26px 20px 18px; display:grid; gap:10px; align-content:start; box-shadow:0 12px 20px -14px rgba(28,30,36,.45); transition:transform 200ms var(--ease-out)}
.pcard:nth-child(3n+1){transform:rotate(-.8deg)} .pcard:nth-child(3n+2){transform:rotate(.6deg)} .pcard:nth-child(3n){transform:rotate(-.3deg)}
@media (hover:hover) and (pointer:fine){ .pcard:hover{transform:translateY(-5px) rotate(0deg)} }
.pcard:active{transform:scale(.98)}
.pcard[aria-expanded="true"]{background:var(--post)}
.pcard .cat{font-family:var(--f-hand); font-size:20px; color:var(--blue)}
.pcard h3{font-family:var(--f-marker); font-weight:400; font-size:22px; line-height:1.15}
.pcard .res{font-size:15px; background:rgba(255,233,107,.5); padding:8px 10px}
.pcard .res b{font-family:var(--f-hand); font-size:18px; display:block}
.pcard .cafe-badge{position:absolute; top:-12px; right:14px; background:var(--red); color:#fff; font-family:var(--f-hand); font-size:18px; padding:0 10px; border-radius:999px; transform:rotate(4deg)}
.pcard .open{font-family:var(--f-marker); font-size:16px; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px}
.pempty{font-family:var(--f-hand); font-size:24px; padding:20px 0}
.pdetail{margin-top:34px; background:#fffdf0; border:3px solid var(--ink); border-radius:10px; padding:28px; display:grid; gap:20px; scroll-margin-top:20px; box-shadow:0 22px 34px -20px rgba(28,30,36,.5)}
.pdetail .head{display:flex; justify-content:space-between; gap:16px; align-items:start}
.pdetail h3{font-family:var(--f-marker); font-weight:400; font-size:clamp(26px,3vw,34px); line-height:1.1}
.pdetail .close{background:var(--card); border:2px solid var(--ink); border-radius:50%; width:40px; height:40px; display:grid; place-items:center; flex:none; padding:0}
.pdetail .close svg{width:16px; height:16px}
.pdetail .cols{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:28px; align-items:start}
.pdetail .fields{display:grid; gap:14px}
.pdetail .fields label{display:grid; gap:4px; font-family:var(--f-hand); font-size:21px}
.pdetail .fields input,.pdetail .fields textarea{font:inherit; font-family:var(--f-body); font-size:16px; border:2px solid var(--ink); border-radius:6px; padding:8px 10px; background:var(--card); width:100%; color:var(--ink)}
.pdetail .fields textarea{min-height:90px; resize:vertical}
.pdetail .fields .missing{border-color:var(--red); background:#fff3f0}
.pdetail .preview{background:var(--ink); color:#f5f5ef; border-radius:8px; padding:18px; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:14px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; max-height:440px; overflow:auto}
.pdetail .preview mark{background:var(--post); color:var(--ink); border-radius:3px; padding:0 3px}
.pdetail .preview .filled{color:#a6e8ff}
.pdetail .acts{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.pdetail .status{font-family:var(--f-hand); font-size:21px; color:var(--green); min-height:1.3em}
.pdetail .status.warn{color:var(--red)}
.pdetail .tips{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.pdetail .tips div{background:var(--post); padding:14px 16px; transform:rotate(-.6deg)}
.pdetail .tips div:nth-child(2){background:var(--post3); transform:rotate(.6deg)}
.pdetail .tips b{font-family:var(--f-hand); font-size:21px; display:block}
.pdetail .privacy{font-size:14px; color:#4a4c52}

/* Fuß */
.site-foot{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:28px; padding-block:34px 44px; border-top:2px solid var(--ink)}
.site-foot b{font-family:var(--f-marker); font-weight:400; font-size:22px}
.site-foot address{font-style:normal; line-height:1.6}
.site-foot nav{display:grid; gap:6px; font-family:var(--f-hand); font-size:21px}
.site-foot nav a{text-decoration:none}
.site-foot .claim{font-family:var(--f-hand); font-size:22px; color:var(--blue)}
.site-foot .legal{grid-column:1/-1; font-size:14px; color:#4a4c52; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

@media (max-width: 880px){
  .doors,.cases,.pgrid,.site-foot,.split,.split-stack,.pdetail .cols,.pdetail .tips{grid-template-columns:1fr}
  .sheet .two{grid-template-columns:1fr}
}
@media (min-width: 881px) and (max-width: 1080px){ .pgrid{grid-template-columns:1fr 1fr} }
.doors.two{grid-template-columns:repeat(2,1fr)}
@media (max-width: 880px){ .doors.two{grid-template-columns:1fr} }
.door:nth-child(3) .tag,.lib-hero-note .tag{color:#17359c}
.posts{grid-template-columns:repeat(auto-fit, minmax(210px, 1fr))}

.logo{display:block; line-height:0}
.logo svg{height:52px; width:auto; display:block}
.foot-logo{display:inline-block; line-height:0; margin-bottom:8px}
.foot-logo svg{height:60px; width:auto}
@media (max-width:520px){ .logo svg{height:42px} }

/* Version 6 "Geprüft": Farbwelt aus dem Logo-Board */
:root{--bg:#f5f4ee; --grid:#e2e1d8; --ink:#1d1d1b; --blue:#2b4fd8; --red:#c23a2b; --orange:#d9662b; --post:#f6e27a}
.logo svg{height:48px}
.foot-logo svg{height:84px}
.hero-fig .seal{position:absolute; left:1%; bottom:5%; width:clamp(96px, 12vw, 148px); transform:rotate(-8deg); z-index:2; filter:drop-shadow(0 6px 8px rgba(29,29,27,.18))}
.hero-fig .seal svg{width:100%; height:auto; display:block}
.site-foot{position:relative; padding-top:48px; border-top:0}
.site-foot::before{content:""; position:absolute; left:max(16px, env(safe-area-inset-left,0px)); right:max(16px, env(safe-area-inset-right,0px)); top:0; height:14px; border-block:2px solid var(--ink); background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14'%3E%3Cpath d='M0 7L10 0L20 7L10 14Z' fill='%232b4fd8'/%3E%3C/svg%3E") repeat-x}
.site-foot .legal{gap:10px 24px}
.site-foot .joke{grid-column:1/-1; font-family:var(--f-hand); font-size:24px; color:var(--blue); text-align:center; transform:rotate(-1deg); margin-top:6px}
@media (max-width:520px){ .logo svg{height:40px} }

.site-foot .slogan{font-family:var(--f-hand); font-size:26px; color:var(--blue); transform:rotate(-2deg); margin:2px 0 6px}
.logo svg{height:50px}
@media (max-width:520px){ .logo svg{height:40px} }

/* Annotationen in Blau (Wunsch 21.10.2026) */
.strike::after{background:var(--blue)}
.strike .nope{color:var(--blue)}
.sec h2 u{text-decoration-color:var(--blue)}
h1 .circ{color:var(--ink)}
h1 .circ svg path{stroke:var(--blue)}
.hero-fig .lab1{color:var(--blue)}
.hero-fig .lab1 svg path{stroke:var(--blue)}
.bingo button::after{border-color:var(--blue)}
.photo figcaption,.hero-photo figcaption{color:var(--blue)}

/* Rechtstexte und Fehlerseite (22.10.2026) */
.legal-page{display:grid; gap:18px; max-width:760px}
.legal-page h1{font-family:var(--f-marker); font-weight:400; font-size:clamp(38px,6vw,60px); line-height:1.02; margin:0}
.legal-page .lead{font-family:var(--f-hand); font-size:26px; color:var(--blue); transform:rotate(-1deg); margin:0}
.legal-page h2{font-family:var(--f-marker); font-weight:400; font-size:24px; margin:14px 0 0}
.legal-page p,.legal-page li{max-width:68ch; margin:0}
.legal-page ul{margin:0; padding-left:1.2em; display:grid; gap:6px}
.legal-page a{text-decoration-color:var(--blue); text-underline-offset:3px; overflow-wrap:anywhere}
.legal-page .entwurf{border:3px dashed var(--red); background:var(--card); padding:12px 16px; font-weight:700}
.fehlt{background:var(--post); padding:0 4px; font-weight:700}
.site-foot .legal a{color:inherit}

/* Kein seitliches Scrollen durch gedrehte Karten auf schmalen Bildschirmen */
html{overflow-x:clip}

:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}