/* VUCA Blaster – Design D3 „Whiteboard nach dem Workshop“
   Farben nur aus diesen Tokens. Keine Schatten, keine Verläufe. */

/* ---------- Schriften (lokal, OFL / Apache 2.0, Lizenzen in assets/fonts/) ---------- */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2-variations"),url("../fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2") format("woff2-variations"),url("../fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Permanent Marker";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/permanent-marker-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Andika";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/andika-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Andika";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/andika-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  color-scheme: light;
  --c-page:#FAFAF7; --c-board:#FFFFFF; --c-frame:#D9D6CF; --c-dot:#E4E1DA;
  --c-tape:#EDE8DA; --c-archive:#F1EFE9; --c-hatch:#DEDAD2;
  --c-ink:#161414; --c-petrol:#046464; --c-violet:#80027D;
  --c-rose:#F5D7D7; --c-aqua:#7AE7F2; --c-teal:#04B8B2; --c-red:#E9022C;
  --c-muted:#5E5A55; --c-dashed:#8D877E;

  /* Typo fluid 390 → 1440 px */
  --fs-h1: clamp(4.5rem, min(22.5vw, 3.921rem + 6.476vw), 9.75rem);
  --fs-ep: clamp(2.5rem, 1.757rem + 3.048vw, 4.5rem);
  --fs-h2: clamp(3.125rem, 2.429rem + 2.857vw, 5rem);
  --fs-claim: clamp(2rem, 1.489rem + 2.095vw, 3.375rem);
  --fs-ipa: clamp(1.312rem, 1.104rem + .8571vw, 1.875rem);
  --fs-marker: clamp(1.5rem, 1.314rem + .7619vw, 2rem);
  --fs-sticky-no: clamp(2.25rem, 2.064rem + .7619vw, 2.75rem);
  --fs-sticky: clamp(1.5rem, 1.384rem + .4762vw, 1.8125rem);
  --fs-body: clamp(1.0625rem, .9929rem + .2857vw, 1.25rem);
  --fs-label: clamp(1rem, .9536rem + .1905vw, 1.125rem);

  --gut: 16px;
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%23E4E1DA'/%3E%3C/svg%3E");
  --hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M-2 2l4-4M0 20L20 0M18 22l4-4' stroke='%23DEDAD2' stroke-width='2'/%3E%3C/svg%3E");
}
@media (min-width:768px){
  :root{--gut:32px;
    --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.6' fill='%23E4E1DA'/%3E%3C/svg%3E")}
}
@media (min-width:1024px){ :root{--gut:64px} }

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--c-page);color:var(--c-ink);
  font-family:"Bricolage Grotesque","Trebuchet MS",sans-serif;font-size:var(--fs-body);line-height:1.5;
  hyphens:manual;overflow-wrap:break-word}
img{display:block;max-width:100%}
a{color:var(--c-ink)}
a:hover{color:var(--c-petrol)}
:focus-visible{outline:3px solid var(--c-petrol);outline-offset:3px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-200px;z-index:10;background:var(--c-ink);color:#FFFFFF;padding:12px 16px;border-radius:4px;font-weight:700;text-decoration:none}
.skip:focus{top:12px;color:#FFFFFF}
.page{max-width:1440px;margin-inline:auto}
[id]{scroll-margin-top:12px}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* ---------- Header ---------- */
.site-head{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;padding:8px var(--gut) 4px}
.wordmark{display:inline-flex;align-items:center;min-height:44px;font-size:22px;font-weight:800;letter-spacing:-.03em;text-decoration:none}
.site-nav{flex-basis:100%}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;font-size:16px;font-weight:700}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.site-nav .guest-li{position:absolute;right:var(--gut);top:8px}
.guest-note{padding:0 12px;background:var(--c-rose);transform:rotate(-2deg)}
@media (min-width:768px){
  .site-head{padding:18px var(--gut)}
  .wordmark{font-size:26px}
  .site-nav{flex-basis:auto}
  .site-nav ul{gap:0 30px;font-size:18px;font-weight:600}
  .site-nav .guest-li{position:static}
  .guest-note{padding:0 16px}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:15px 4px;border:0;border-radius:4px;
  background:var(--c-ink);color:#FFFFFF;font:inherit;font-size:18px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--c-petrol);color:#FFFFFF}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:11px 18px;border:2px solid var(--c-ink);border-radius:4px;
  background:var(--c-board);color:var(--c-ink);font:inherit;font-size:17px;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}
.btn-outline:hover{border-color:var(--c-petrol);color:var(--c-petrol)}
.btn-outline svg{flex:none;fill:currentColor}
.btn-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:768px){
  .btn{padding:17px 28px;font-size:20px}
  .btn-outline{font-size:18px}
  .btn-row{display:flex;flex-wrap:wrap;gap:12px}
}
@media (prefers-reduced-motion:no-preference){
  .btn,.btn-outline,a{transition:background-color .12s ease,color .12s ease,border-color .12s ease}
}

/* ---------- Hero-Board ---------- */
.hero{position:relative;margin:4px 10px 0;border:8px solid var(--c-frame);border-bottom:0;background:var(--c-board) var(--dots)}
.hero-in{display:grid;gap:40px;padding:36px 16px 32px}
.hero h1{margin:0;font-size:var(--fs-h1);font-weight:800;line-height:.86;letter-spacing:-.05em}
.ipa{margin:14px 0 0;font-family:"Andika","Trebuchet MS",sans-serif;font-size:var(--fs-ipa);color:var(--c-petrol)}
.claim{margin:22px 0 0;max-width:860px;font-size:var(--fs-claim);font-weight:700;line-height:1.08;letter-spacing:-.025em}
.kringel{position:relative;display:inline-block;white-space:nowrap}
.kringel svg{position:absolute;left:-.74em;top:-.555em;width:8.7em;height:2.22em;overflow:visible;pointer-events:none}
.kringel path{fill:none;stroke:var(--c-red);stroke-width:4.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.listen{position:relative;margin-top:70px}
.marker-note{position:absolute;left:130px;top:-58px;margin:0;font-family:"Permanent Marker","Comic Sans MS",cursive;font-size:var(--fs-marker);line-height:1.2;color:var(--c-petrol);transform:rotate(-5deg);white-space:nowrap}
.arrow{position:absolute;left:56px;top:-52px;width:80px;height:54px;overflow:visible}
.arrow path{fill:none;stroke:var(--c-petrol);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.arrow--wide{display:none}
@media (max-width:379px){
  .marker-note{left:72px;font-size:20px}
  .arrow--narrow{left:8px}
}
.hero-meta{margin:16px 0 0;font-size:15px;font-weight:500;color:var(--c-muted)}
.hero-note{display:none}
.magnet{position:absolute;left:50%;top:-14px;width:36px;height:36px;margin-left:-18px;border-radius:50%;background:var(--c-teal);border:3px solid var(--c-ink)}
.tray{height:18px;margin:0 -8px;padding-left:28px;background:var(--c-frame);display:flex;align-items:center;gap:8px}
.tray span{display:block;width:60px;height:8px;border-radius:4px;background:var(--c-ink)}
.tray span:nth-child(2){background:var(--c-petrol)}
.tray span:nth-child(3){background:var(--c-red)}
@media (min-width:768px){
  .hero{margin:8px 24px 0;border-width:12px;border-bottom-width:0}
  .hero-in{padding:56px 40px}
  .ipa{margin-top:22px}
  .claim{margin-top:40px}
  .listen{margin-top:88px}
  .hero-meta{margin-top:22px;font-size:18px}
  .tray{height:26px;margin:0 -12px;padding-left:80px;gap:12px}
  .tray span{width:110px;height:12px;border-radius:6px}
}
@media (min-width:1024px){
  .hero{margin:8px 40px 0}
  .hero-in{grid-template-columns:minmax(0,1fr) 340px;padding:80px 60px 72px}
  .hero-note{position:relative;align-self:start;margin-top:40px;display:flex;flex-direction:column;gap:14px;width:320px;height:320px;padding:40px 30px 28px;background:var(--c-aqua);text-decoration:none;transform:rotate(3.5deg)}
  .hero-note:hover{color:var(--c-ink)}
  .hero-note:hover .n-guest{text-decoration:underline}
  .n-kick{font-size:18px;font-weight:700;color:var(--c-petrol)}
  .n-title{font-size:30px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
  .n-guest{margin-top:auto;font-size:18px;font-weight:600}
}
@media (min-width:1280px){
  .marker-note{left:470px;top:-84px}
  .arrow--narrow{display:none}
  .arrow--wide{display:block;left:330px;top:-64px;width:160px;height:80px}
  .arrow--wide path{stroke-width:4}
}
.draw{stroke-dasharray:1000;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .draw{animation:draw 1.1s ease-out .4s 1 both}
}
@keyframes draw{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}

/* ---------- Abschnitte ---------- */
.section{padding:44px var(--gut) 56px;border-top:2px solid var(--c-ink)}
.kicker{margin:0;font-size:var(--fs-label);font-weight:700;color:var(--c-muted)}
.section-title{margin:6px 0 0;font-size:var(--fs-h2);font-weight:800;line-height:.95;letter-spacing:-.045em}
.label{margin:0;font-size:var(--fs-label);font-weight:700}
@media (min-width:1024px){
  .section{padding:88px var(--gut) 96px}
  .section-title{margin-top:8px}
}

/* ---------- Foto-Abzug ---------- */
.print{position:relative;margin:0;padding:14px;background:var(--c-board);border:1.5px solid var(--c-frame)}
.print::before{content:"";position:absolute;z-index:1;left:36%;top:-14px;width:110px;height:28px;background:var(--c-tape);transform:rotate(-4deg)}
.photo{position:relative;width:100%;height:100%;overflow:hidden;background:var(--c-archive) var(--hatch)}
.photo img{width:100%;height:100%;object-fit:cover}

/* ---------- Aktuelle Folge ---------- */
.current{border-top:0;padding-top:44px}
.current-grid{display:grid;gap:30px}
.current-main{display:flex;flex-direction:column;align-items:flex-start}
.ep-meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:var(--fs-label);font-weight:700}
.chip{padding:5px 10px;border-radius:4px;background:var(--c-ink);color:#FFFFFF}
.ep-meta .muted{color:var(--c-muted);font-weight:600}
.ep-title{margin:20px 0 0;font-size:var(--fs-ep);font-weight:800;line-height:1.02;letter-spacing:-.035em}
.guest{display:flex;align-items:center;gap:14px;margin-top:22px}
.thumb{flex:none;width:76px;height:76px;padding:6px;background:var(--c-board);border:1.5px solid var(--c-frame);transform:rotate(-3deg)}
.guest-name{margin:0;font-size:21px;font-weight:700;line-height:1.25}
.guest-role{margin:2px 0 0;font-size:15px;line-height:1.35;color:var(--c-muted)}
.values{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.value{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:2px solid var(--c-petrol);border-radius:4px;color:var(--c-petrol);font-size:16px;font-weight:700;line-height:1.25}
.value .dot{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--c-petrol)}
.value--main{background:var(--c-petrol);color:#FFFFFF}
.value--main .dot{background:var(--c-aqua);border-color:var(--c-aqua)}
.listen-label{margin:30px 0 10px}
.current-main .btn-row{align-self:stretch}
.hint{margin:10px 0 0;font-size:15px;line-height:1.45;color:var(--c-muted)}
.print--guest{display:none}
.player{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 18px 18px;background:var(--c-board);border:1.5px solid var(--c-frame);transform:rotate(-.8deg)}
.player::before,.player::after{content:"";position:absolute;top:-8px;width:64px;height:22px;background:var(--c-tape)}
.player::before{left:-12px;transform:rotate(-30deg)}
.player::after{right:-12px;transform:rotate(30deg)}
.player-title{margin:0;font-size:16px;font-weight:700}
.player p{margin:0;font-size:15px;line-height:1.5}
.player audio{display:block;width:100%}
.learnings{margin-top:40px}
.learnings .label{margin-bottom:18px}
.stickies{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sticky{display:flex;flex-direction:column;gap:10px;width:min(270px,100%);min-height:230px;padding:24px;background:var(--c-rose);transform:rotate(-2.5deg)}
.sticky:nth-child(2){background:var(--c-aqua);transform:rotate(2deg);margin:-18px 0 0 clamp(0px, calc(100% - 270px), 88px)}
.sticky:nth-child(3){transform:rotate(-1.2deg);margin:-14px 0 0 clamp(0px, calc(100% - 270px), 20px)}
.sticky-no{font-size:var(--fs-sticky-no);font-weight:800;line-height:1;color:var(--c-petrol)}
.sticky-text{font-size:var(--fs-sticky);font-weight:700;line-height:1.15;letter-spacing:-.015em}
@media (min-width:768px){
  .chip{padding:6px 12px}
  .guest-name{font-size:24px}
  .guest-role{font-size:17px}
  .value{font-size:17px}
  .listen-label{margin:44px 0 12px}
  .hint{margin-top:12px;font-size:16px;line-height:1.5}
  .player{align-self:start;width:min(100%,470px);padding:26px 24px 24px;gap:16px}
  .player::before,.player::after{top:-10px;width:80px;height:26px}
  .player::before{left:-16px}
  .player::after{right:-16px}
  .player-title{font-size:17px}
  .player p{font-size:17px}
  .player .btn-outline{align-self:flex-start}
  .learnings{margin-top:64px}
  .learnings .label{margin-bottom:28px}
  .stickies{flex-direction:row;align-items:flex-start;padding-bottom:36px}
  .sticky{flex:0 1 330px;width:auto;min-height:clamp(230px,30vw,330px);padding:clamp(22px,2.5vw,30px);gap:14px;transform:rotate(-3deg)}
  .sticky:nth-child(2){position:relative;margin:0 0 0 -18px;transform:rotate(2deg) translateY(36px)}
  .sticky:nth-child(3){margin:0 0 0 28px;transform:rotate(-1.2deg) translateY(8px)}
}
@media (min-width:1024px){
  .current{padding:104px var(--gut) 88px}
  .current-grid{grid-template-columns:minmax(0,1fr) clamp(340px,33vw,470px);gap:clamp(40px,5vw,72px)}
  .current-side{display:flex;flex-direction:column;gap:40px;padding-top:16px}
  .ep-title{margin-top:28px;line-height:1}
  .thumb{display:none}
  .guest{display:block;margin-top:28px}
  .guest-name{font-size:26px}
  .guest-role{margin-top:4px;font-size:19px}
  .values{margin-top:24px;gap:10px}
  .print--guest{display:block;height:300px;margin:0 0 0 40px;transform:rotate(2deg)}
  .player{width:auto;align-self:stretch}
}

/* ---------- Über uns ---------- */
.about-grid{display:grid;gap:44px;margin-top:28px}
.lex{max-width:760px;padding:24px 20px 26px;background:var(--c-board);border:2px solid var(--c-ink);transform:rotate(-1deg)}
.lex-word{margin:0;font-size:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);font-weight:800;line-height:1;letter-spacing:-.03em}
.lex-pos{margin:6px 0 0;font-size:var(--fs-label);font-weight:600;color:var(--c-petrol)}
.lex-def{margin:16px 0 0;font-size:clamp(1.25rem,1.157rem + .381vw,1.5rem);font-weight:500;line-height:1.4;text-align:justify;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3}
.about-text{margin:32px 0 0;max-width:68ch}
.print--cover{width:min(100%,320px);aspect-ratio:1;justify-self:center;transform:rotate(2deg)}
@media (min-width:768px){
  .lex{padding:34px 40px 36px}
}
@media (min-width:1024px){
  .about-grid{grid-template-columns:minmax(0,1fr) clamp(300px,30vw,420px);gap:clamp(48px,6vw,88px);align-items:start;margin-top:44px}
  .about-text{margin-top:44px}
  .print--cover{width:100%;justify-self:stretch;margin-top:12px}
}

/* ---------- Hosts ---------- */
.host-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:56px}
.print--host{width:min(100%,380px);aspect-ratio:4/5;margin:0 0 28px;transform:rotate(-2deg)}
.host:nth-child(2) .print--host{transform:rotate(2deg)}
.host-name{margin:0;font-size:clamp(1.625rem,1.39rem + .95vw,2.125rem);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.host-role{margin:6px 0 0;font-weight:600;color:var(--c-muted)}
.host-bio{margin:14px 0 0;max-width:60ch}
.host-link{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-weight:700}
@media (min-width:768px){
  .host-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px clamp(28px,5vw,88px);margin-top:44px}
}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;gap:22px;margin-top:22px}
.contact-grid p{margin:0;max-width:52ch}
.contact-grid .btn{justify-self:start;padding-inline:28px}
.mail{font-weight:700}
@media (min-width:1024px){
  .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 88px;align-items:start;margin-top:0}
  .contact-grid > p:first-of-type{margin-top:12px}
  .contact-grid > .section-title{grid-row:1 / span 4;margin-top:0}
}

/* ---------- Footer ---------- */
.site-foot{display:grid;gap:28px;padding:44px var(--gut) 28px;border-top:2px solid var(--c-ink)}
.foot-top{display:grid;gap:10px}
.foot-mark{margin:0;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.foot-claim{margin:0;color:var(--c-muted)}
.foot-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.foot-legal{margin:0;padding-top:12px;border-top:1.5px solid var(--c-frame);font-size:15px;color:var(--c-muted)}
.foot-legal a{display:inline-block;padding-block:10px;color:var(--c-muted)}
.foot-legal a:hover{color:var(--c-petrol)}
@media (min-width:1024px){
  .site-foot{padding-top:56px}
  .foot-top{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 44px}
  .foot-links{grid-column:2;grid-row:1 / span 2}
}

/* ---------- Unterseiten ---------- */
.board-sm{margin:4px 10px 0;padding:36px 16px 32px;border:8px solid var(--c-frame);background:var(--c-board) var(--dots)}
.board-sm h1{margin:0;font-size:var(--fs-h2);font-weight:800;line-height:.95;letter-spacing:-.045em}
.legal{padding:44px var(--gut) 88px}
.legal-body{max-width:68ch}
.legal-body > :first-child{margin-top:0}
.legal-body h2{margin:44px 0 12px;font-size:clamp(1.5rem,1.36rem + .57vw,1.875rem);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.legal-body p{margin:0 0 16px}
.legal-body a{overflow-wrap:anywhere}
.notfound-note{margin:18px 0 0;font-family:"Permanent Marker","Comic Sans MS",cursive;font-size:var(--fs-marker);color:var(--c-petrol);transform:rotate(-5deg);transform-origin:left center}
.notfound-body{padding:44px var(--gut) 88px}
@media (min-width:768px){
  .board-sm{margin:8px 40px 0;padding:56px 60px;border-width:12px}
}