/* Layout: comic panel strip. Paper ground, ink outlines, one live phone as the hero; sections read like panels in a row. */
:root{
  --paper:#F3F6F4; --panel:#FFFFFF; --ink:#141B2E; --soft:#55607A; --line:#141B2E;
  --red:#D93A35; --sun:#FFC53D; --lake:#2C8FB8; --moss:#3E8C5A; --tint:#E3ECF2;
  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --body:'Nunito Sans',ui-sans-serif,system-ui,sans-serif;
  --comic:'Bangers',Impact,'Arial Black',sans-serif;
  --shadow:4px 4px 0 var(--line);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#10172A;--panel:#18213A;--ink:#EEF2F8;--soft:#A7B2C8;--line:#05080F;--tint:#1F2B47;--lake:#58B4DA;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#10172A;--panel:#18213A;--ink:#EEF2F8;--soft:#A7B2C8;--line:#05080F;--tint:#1F2B47;--lake:#58B4DA;color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55}
.wrap{max-width:1140px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.08;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,5vw,58px);letter-spacing:-.02em}
h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.015em}
h3{font-size:21px}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--lake);outline-offset:3px;border-radius:6px}

header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:3px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--paper)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.mark{font-family:var(--comic);font-size:32px;letter-spacing:.04em;color:var(--red);text-decoration:none;-webkit-text-stroke:1px var(--line);text-shadow:2px 2px 0 var(--line)}
.bar nav{display:flex;gap:22px;font-weight:800;font-size:15px}
.bar nav a{text-decoration:none}.bar nav a:hover{color:var(--red)}
@media (max-width:760px){.bar nav{display:none}}

.btn{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 24px;border:3px solid var(--line);border-radius:14px;font:800 17px var(--body);text-decoration:none;cursor:pointer;box-shadow:var(--shadow);transition:translate .12s,box-shadow .12s;color:#141B2E}
.btn:hover{translate:-1px -1px;box-shadow:5px 5px 0 var(--line)}
.btn:active{translate:2px 2px;box-shadow:2px 2px 0 var(--line)}
.btn.red{background:var(--red);color:#fff}.btn.sun{background:var(--sun)}.btn.ghost{background:var(--panel);color:var(--ink)}

.hero{padding-block:48px 56px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.kick{display:inline-block;font-weight:800;font-size:14px;letter-spacing:.03em;background:var(--sun);color:#141B2E;border:2px solid var(--line);border-radius:999px;padding:4px 14px;margin-bottom:18px}
.lead{font-size:20px;color:var(--soft);margin:20px 0 28px;max-width:34em}
.ctas{display:flex;flex-wrap:wrap;gap:14px}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font-weight:700;font-size:15px;color:var(--soft)}
.facts span::before{content:"✓ ";color:var(--moss);font-weight:900}

.phone{justify-self:center;position:relative;width:min(360px,100%);aspect-ratio:9/18.5;border:10px solid #141B2E;border-radius:44px;background:#141B2E;box-shadow:10px 10px 0 var(--red);overflow:hidden}
.phone iframe{width:100%;height:100%;border:0;display:block;border-radius:32px;background:#1d2a48}
.phone-cap{text-align:center;font-size:14px;color:var(--soft);margin-top:18px;font-weight:600}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.phone{width:min(340px,100%)}}

section.band{padding-block:64px;border-top:3px solid var(--line)}
section.band.tint{background:var(--tint)}
.head{max-width:44em;margin-bottom:34px;display:grid;gap:12px}
.head p{color:var(--soft);font-size:18px}

.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.panel{background:var(--panel);border:3px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.panel img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:3px solid var(--line)}
.panel .in{padding:18px 20px 22px;display:grid;gap:8px}
.panel .when{font-family:var(--comic);font-size:20px;letter-spacing:.05em;color:var(--red)}
.panel p{color:var(--soft);font-size:16px}
@media (max-width:860px){.strip{grid-template-columns:1fr}}

.seasons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.season{padding:24px;display:grid;gap:14px;align-content:start}
.season .tag{font-family:var(--comic);font-size:28px;letter-spacing:.05em}
.season.s .tag{color:var(--moss)}.season.w .tag{color:var(--lake)}
.season ul{margin:0;padding-left:20px;display:grid;gap:6px}
.season .note{font-size:15px;color:var(--soft);border-top:2px dashed var(--soft);padding-top:12px}
@media (max-width:760px){.seasons{grid-template-columns:1fr}}

/* personal route */
.route{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.tabs{display:inline-flex;border:3px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow)}
.tabs button{font:800 16px var(--body);padding:10px 20px;border:0;background:var(--panel);color:var(--ink);cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.stops{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:st}
.stops li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;padding-bottom:20px;counter-increment:st}
.stops li::before{content:counter(st);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;font:900 19px var(--body);border:3px solid var(--line);z-index:1}
.stops li:not(:last-child)::after{content:"";position:absolute;left:20px;top:44px;bottom:0;border-left:4px dotted var(--soft)}
.stops li.home::before{content:"⌂";background:var(--sun);color:#141B2E}
.stops li{grid-template-rows:auto 1fr;row-gap:2px}.stops li::before{grid-row:1/3}.stops li>*{grid-column:2;min-width:0}.stops b{display:block;font-size:17px;padding-top:9px}.stops span{color:var(--soft);font-size:15px}
.figcard{padding:24px;display:grid;gap:12px}
.figcard .who{font-family:var(--comic);font-size:30px;letter-spacing:.04em;color:var(--red)}
@media (max-width:760px){.route{grid-template-columns:1fr}}

.gets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px;margin:0;padding:0;list-style:none}
.gets li{display:grid;grid-template-columns:28px 1fr;gap:12px}
.gets li::before{content:"";width:22px;height:22px;margin-top:3px;border:3px solid var(--line);border-radius:6px;background:var(--sun)}
.gets b{display:block}.gets span{color:var(--soft);font-size:16px}
@media (max-width:760px){.gets{grid-template-columns:1fr}}

.report{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.funnel{padding:24px;display:grid;gap:14px}
.frow{display:grid;gap:6px}
.frow .lab{display:flex;justify-content:space-between;gap:12px;font-weight:700;font-size:15px}
.frow .lab b{font-variant-numeric:tabular-nums}
.frow .track{height:18px;border:2px solid var(--line);border-radius:6px;background:var(--paper);overflow:hidden}
.frow .fill{height:100%;background:var(--lake)}
.frow:nth-child(3) .fill{background:var(--moss)}.frow:nth-child(4) .fill{background:var(--sun)}
.funnel .src{font-size:13px;color:var(--soft)}
@media (max-width:760px){.report{grid-template-columns:1fr}}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:8px;align-content:start}
.steps li::before{content:counter(s);font-family:var(--comic);font-size:44px;line-height:1;color:var(--red);-webkit-text-stroke:1px var(--line)}
.steps b{font-size:17px}.steps span{color:var(--soft);font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.price{padding:24px;display:grid;gap:12px;align-content:start}
.price .amt{font-family:var(--display);font-weight:800;font-size:32px;font-variant-numeric:tabular-nums}
.price .per{color:var(--soft);font-size:15px}
.price.pilot{background:var(--sun);color:#141B2E}.price.pilot .amt{color:#141B2E}.price.pilot .per{color:#3a3a2a}
.price ul{margin:0;padding-left:20px;display:grid;gap:4px;font-size:15px}
@media (max-width:860px){.prices{grid-template-columns:1fr}}

.privacy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.privacy div{display:grid;gap:6px}.privacy span{color:var(--soft);font-size:15px}
@media (max-width:860px){.privacy{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.privacy{grid-template-columns:1fr}}

.contact{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:center}
.card{padding:26px;display:grid;gap:12px}
.mail{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mail code{font:700 17px var(--body);background:var(--paper);border:2px solid var(--line);border-radius:10px;padding:8px 12px;user-select:all;overflow-wrap:anywhere}
.mail button{font:800 14px var(--body);padding:9px 14px;border:2px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);cursor:pointer}
@media (max-width:760px){.contact{grid-template-columns:1fr}}

footer{border-top:3px solid var(--line);padding-block:28px;color:var(--soft);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

.list-all{columns:3 220px;padding-left:20px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* demo variants, akten, bande */
.vtabs{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
.vtabs button{font:800 14px var(--body);border:2px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);padding:7px 16px;cursor:pointer}
.vtabs button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.phone-cap a{color:var(--red);font-weight:800}
.folgen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1000px){.folgen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.folgen{grid-template-columns:1fr}}
.folge{display:flex;flex-direction:column}
.folge img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:3px solid var(--line)}
.folge .in{padding:14px 16px 16px;display:grid;gap:8px;align-content:start;flex:1}
.folge .when{font-weight:800;font-size:13px;color:var(--red);margin:0}
.folge h3{margin:0}
.folge p{margin:0;font-size:15px}
.folge .ort{color:var(--soft)}
.folge .btn{justify-self:start;margin-top:auto}
.btn.sm{height:40px;padding:0 14px;font-size:14px}
.variants{margin-top:22px;padding:18px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.variants>div{display:grid;gap:6px;font-size:15px}
.variants span{color:var(--soft)}
@media (max-width:860px){.variants{grid-template-columns:1fr}}
.bandenr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:860px){.bandenr{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bandenr .panel{padding:16px;display:grid;gap:6px;justify-items:center;text-align:center;align-content:start}
.bandenr img{width:104px;height:104px;border-radius:50%;border:3px solid var(--line);object-fit:cover}
.bandenr b{font-family:var(--display);font-size:19px}
.bandenr span{color:var(--soft);font-size:15px}

/* Bande: main characters */
.bande .kick{margin-bottom:8px}
.lineup{margin:0 0 26px;position:relative;border:3px solid var(--line);border-radius:22px;overflow:hidden;background:#FBF8EC;box-shadow:var(--shadow)}
.lineup img{display:block;width:100%}
.lineup figcaption span{position:absolute;bottom:12px;translate:-50% 0;font-family:var(--comic);font-size:clamp(18px,2.6vw,30px);letter-spacing:.04em;color:#fff;background:var(--red);border:3px solid #141B2E;border-radius:12px;padding:2px 12px;rotate:-3deg}
.lineup figcaption span:nth-child(2n){rotate:2deg}
.heroes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:860px){.heroes{grid-template-columns:1fr}}
.hero-card{display:grid;grid-template-columns:42% 1fr;overflow:hidden}
@media (max-width:480px){.hero-card{grid-template-columns:1fr}.hero-card .pic{aspect-ratio:4/3}}
.hero-card .pic{background:var(--cc);display:grid;place-items:end center;border-right:3px solid var(--line);min-height:100%}
@media (max-width:480px){.hero-card .pic{border-right:0;border-bottom:3px solid var(--line)}}
.hero-card .pic img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;mix-blend-mode:multiply}
.hero-card .in{padding:18px 20px;display:grid;gap:8px;align-content:start}
.hero-card .nm{font-family:var(--comic);font-size:40px;letter-spacing:.04em;line-height:1;margin:0;color:var(--ink)}
.hero-card .nm small{font-family:var(--body);font-weight:800;font-size:16px;letter-spacing:0;color:var(--soft);margin-left:4px}
.hero-card .role{margin:0;font-weight:800;color:var(--red)}
.hero-card dl{margin:4px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:15px}
.hero-card dt{font-weight:800}
.hero-card dd{margin:0;color:var(--soft)}
.hero-card q{font-family:var(--comic);font-size:24px;letter-spacing:.03em;justify-self:start;background:#fff;color:#141B2E;border:3px solid #141B2E;border-radius:18px;padding:4px 14px;margin-top:6px;quotes:none}
.c-romy{--cc:#E9DDF5}.c-lotti{--cc:#FCE3CF}.c-theo{--cc:#D8E8F7}.c-kruemel{--cc:#E3E6E8}
.why{margin-top:22px;padding:18px 20px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.why>div{display:grid;gap:6px;font-size:15px;align-content:start}.why span{color:var(--soft)}.why a{font-weight:800;color:var(--red)}
@media (max-width:760px){.why{grid-template-columns:1fr}}
.bande .head .kick{display:inline-block;justify-self:start}
.hero-card .pic img{max-height:340px}
.hero-card q{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:0}
@media (max-width:480px){.lineup figcaption span{font-size:14px;padding:1px 7px;bottom:6px;border-width:2px}}

/* Ausbaustufen */
.stufen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.stufen{grid-template-columns:1fr}}
.stufe{padding:20px;display:grid;gap:8px;align-content:start}
.stufe .nr{margin:0;font-family:var(--comic);font-size:22px;letter-spacing:.05em;color:var(--red)}
.stufe .sub{margin:0;font-weight:800;color:var(--soft)}
.stufe ul{margin:4px 0 0;padding-left:18px;display:grid;gap:4px;font-size:15px}
.stufe .note{margin:6px 0 0;font-size:14px;color:var(--soft);border-top:2px dashed var(--line);padding-top:8px}
/* region picture in personal preview */
.rroute:has(.rpic:not([hidden])){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.rroute>div{display:grid;gap:18px;align-content:start}
.rpic{margin:0;border:3px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:var(--panel);align-self:start}
.rpic img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 45%}
.rpic figcaption{padding:10px 14px;font-size:14px;color:var(--soft);font-weight:600}
@media (max-width:860px){.rroute:has(.rpic:not([hidden])){grid-template-columns:1fr}}

.rbox{position:relative}
.rsay{position:absolute;left:12px;right:12px;top:12px;margin:0;background:#FBEFC0;color:#1E2440;border:3px solid #1E2440;box-shadow:3px 3px 0 #1E2440;padding:8px 12px;font-family:var(--display);font-weight:800;font-size:17px;line-height:1.3}

/* demo entry: phone frame on desktop, fullscreen start on mobile */
.mstart,.mcap{display:none}
.qr{display:flex;gap:14px;align-items:center;margin:16px auto 0;max-width:360px;background:var(--panel);border:3px solid var(--line);border-radius:16px;padding:10px 14px 10px 10px}
.qr canvas{width:110px;height:110px;flex:none;border-radius:8px}
.qr div{display:grid;gap:4px;font-size:14px}.qr span{color:var(--soft)}.qr a{color:var(--red);font-weight:800}
@media (max-width:860px){
  .phone,.phone-cap,.qr{display:none!important}
  .mstart{display:block;position:relative;border:3px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:6px 6px 0 var(--red);max-width:420px;margin:0 auto;aspect-ratio:4/5}
  .mstart img{width:100%;height:100%;object-fit:cover;object-position:50% 72%;display:block}
  .mbtn{position:absolute;left:16px;right:16px;bottom:16px;text-align:center;background:var(--red);color:#fff;font:800 20px var(--body);padding:14px;border:3px solid #141B2E;border-radius:16px;box-shadow:0 4px 0 #141B2E}
  .mcap{display:block;text-align:center;font-size:14px;color:var(--soft);margin:14px auto 0;max-width:40ch}
}

/* wer dahinter steht */
.who{display:grid;grid-template-columns:140px 1fr;gap:28px;align-items:center;max-width:900px}
.avatar{position:relative;width:140px;height:140px;border-radius:50%;border:3px solid var(--line);background:var(--sun);display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow)}
.avatar span{font-family:var(--comic);font-size:52px;color:#141B2E}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.who h2{margin:6px 0 10px}.who p{margin:0}
@media (max-width:640px){.who{grid-template-columns:1fr;justify-items:start}.avatar{width:110px;height:110px}}
/* faq */
.faq{display:grid;gap:10px;max-width:820px}
.faq details{background:var(--panel);border:3px solid var(--line);border-radius:14px;padding:14px 18px}
.faq summary{font-weight:800;cursor:pointer;font-size:17px}
.faq details p{margin:10px 0 0;color:var(--soft)}
.faq a{color:var(--red)}
/* Handy: Bande-Karten und Folgen als wischbare Reihe statt endloser Liste */
@media (max-width:640px){
  .heroes,.folgen{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -16px;padding:4px 16px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .heroes::-webkit-scrollbar,.folgen::-webkit-scrollbar{display:none}
  .heroes>*,.folgen>*{flex:0 0 84%;scroll-snap-align:center}
  .swipe-hint{display:block;font-size:13px;font-weight:800;color:var(--soft);margin:-6px 0 6px}
}
.swipe-hint{display:none}
.plink{display:inline-block;margin-top:12px;font-weight:800;color:var(--ink);text-decoration:underline;text-underline-offset:3px}