@font-face{font-family:"RH Display";font-weight:600;font-display:swap;src:url(/assets/fonts/BarlowCondensed-SemiBold.woff2) format("woff2")}
@font-face{font-family:"RH Display";font-weight:500;font-display:swap;src:url(/assets/fonts/BarlowCondensed-Medium.woff2) format("woff2")}
@font-face{font-family:"RH Sans";font-weight:400;font-display:swap;src:url(/assets/fonts/IBMPlexSans-Regular.woff2) format("woff2")}
@font-face{font-family:"RH Sans";font-weight:600;font-display:swap;src:url(/assets/fonts/IBMPlexSans-SemiBold.woff2) format("woff2")}
@font-face{font-family:"RH Mono";font-weight:500;font-display:swap;src:url(/assets/fonts/IBMPlexMono-Medium.woff2) format("woff2")}
:root{--paper:#f4f4f1;--raised:#fff;--line:#d9dad6;--ink:#16181b;--muted:#5b5f66;--case:#1b1d21;--on-case:#f4f4f1;--congo:#2b2f9e;--congo-l:#8f95ff;--spike:#f2b01e;
--display:"RH Display","Barlow Condensed","Arial Narrow",sans-serif;--sans:"RH Sans","IBM Plex Sans",system-ui,-apple-system,sans-serif;--mono:"RH Mono",ui-monospace,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans)}
a{color:var(--congo)}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
header.site{background:var(--case);color:var(--on-case)}
header.site .wrap{display:flex;align-items:center;gap:14px;padding-block:14px}
header.site img{height:40px}
header.site .brand{font:600 24px/1 var(--display);letter-spacing:.05em;color:var(--on-case);text-decoration:none}
header.site .brand small{display:block;font:500 11px var(--display);letter-spacing:.18em;color:var(--congo-l);margin-top:3px}
header.site nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
header.site nav a{color:var(--on-case);text-decoration:none;font:500 15px var(--display);letter-spacing:.1em}
header.site nav a:hover{color:var(--spike)}
.hero{background:var(--case);color:var(--on-case);padding-block:56px 72px;overflow:hidden;position:relative}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center}
.hero h1{font:600 clamp(40px,7vw,76px)/.95 var(--display);letter-spacing:.02em;margin:0 0 18px;text-wrap:balance}
.hero p{font-size:18px;color:#c9ccd2;max-width:34em;margin:0 0 26px}
.tape{display:inline-block;background:#ecebe4;color:var(--ink);font:600 15px var(--display);letter-spacing:.12em;padding:6px 14px;transform:rotate(-2deg);margin-bottom:22px}
.btn{display:inline-block;background:var(--spike);color:#16181b;font:600 18px var(--display);letter-spacing:.08em;padding:13px 22px;border-radius:4px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--on-case);border:1px solid #4a4f5a;margin-left:10px}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--spike);outline-offset:3px}
.hero .pass{justify-self:center;width:min(300px,70%);transform:rotate(-6deg)}
section{padding-block:56px}
h2{font:600 34px/1 var(--display);letter-spacing:.04em;margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 28px;max-width:40em}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--raised);border:1px solid var(--line);border-radius:4px;padding:22px}
.card h3{font:600 22px/1.1 var(--display);letter-spacing:.04em;margin:0 0 8px}
.card p{margin:0 0 14px;color:var(--muted)}
.card .tag{font:500 12px var(--mono);color:var(--congo);letter-spacing:.04em}
.about{background:var(--raised);border-block:1px solid var(--line)}
.about .wrap{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:start}
.roles{display:flex;flex-direction:column;gap:6px;font:600 20px var(--display);letter-spacing:.06em}
.roles span{border-bottom:1px solid var(--line);padding-bottom:6px}
footer{background:var(--case);color:#a3a7ae;font-size:14px;padding-block:28px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer a{color:#a3a7ae}
footer .sp{margin-left:auto}
.legal{max-width:760px}
.legal h1{font:600 44px/1 var(--display);letter-spacing:.03em;margin:0 0 20px}
.legal h2{font-size:24px;margin-top:28px}
@media (max-width:820px){.hero .wrap,.about .wrap{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.hero .pass{width:180px;order:-1}.btn.ghost{margin:10px 0 0}}
@media (prefers-reduced-motion:no-preference){.btn{transition:transform .15s}.btn:hover{transform:translateY(-1px)}}

.nlw{padding-block:0 56px}
.nl{background:var(--raised);border:1px solid var(--line);border-left:4px solid var(--spike);border-radius:4px;padding:22px 26px;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,380px);gap:24px;align-items:center}
.nl-cover{width:64px;height:auto;display:block;filter:drop-shadow(0 6px 10px rgba(22,24,27,.14));transform:rotate(-4deg)}
.nl .kick{font:500 12px var(--mono);letter-spacing:.06em;color:var(--congo);margin-bottom:4px}
.nl h2{font:600 26px/1.05 var(--display);letter-spacing:.02em;margin:0 0 6px;text-wrap:balance}
.nl p{color:var(--muted);margin:0;font-size:15px}
.nl form{display:flex;flex-wrap:wrap;gap:8px}
.nl input{flex:1 1 180px;min-width:0;font:400 16px var(--sans);padding:11px 12px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink)}
.nl input:focus{outline:none;border-color:var(--congo)}
.nl .btn{border:0;cursor:pointer;font-size:17px;padding:11px 18px}
.nl .btn:disabled{opacity:.6;cursor:default}
.nl .small{flex-basis:100%;font-size:12.5px;margin:2px 0 0}
.nl .small a{color:var(--muted)}
.nl .ok{margin:0;font-size:15px;color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.check{max-width:760px}
.check h1{font:600 clamp(36px,6vw,54px)/1 var(--display);letter-spacing:.02em;margin:0 0 16px}
@media (max-width:900px){.nl{grid-template-columns:auto minmax(0,1fr)}.nl form{grid-column:1/-1}}
@media (max-width:520px){.nl{padding:18px}.nl-cover{width:50px}.nl h2{font-size:22px}.nl .btn{width:100%}}

.faq{padding-block:8px 56px}
.faq details{background:var(--raised);border:1px solid var(--line);border-radius:4px;margin-top:10px}
.faq summary{cursor:pointer;list-style:none;padding:15px 44px 15px 18px;font:600 19px/1.2 var(--display);letter-spacing:.03em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:12px;font:600 22px var(--display);color:var(--congo)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 18px 16px;color:var(--muted);max-width:52em}
.faq h2{margin-bottom:14px}
header.site nav{align-items:center}
header.site nav a.lang{display:inline-flex;align-items:center;gap:5px;border:1px solid #3a3f4a;border-radius:4px;padding:3px 8px}
header.site nav a.lang:hover{border-color:var(--spike)}
footer .sp+span{margin-left:0}
.narrow{max-width:800px}
.post{padding-block:40px 64px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:18px}.crumbs a{color:var(--muted)}
.post .kick{font:500 13px var(--mono);color:var(--congo);letter-spacing:.06em;margin-bottom:8px}
.post h1{font:600 clamp(34px,5vw,52px)/1 var(--display);letter-spacing:.02em;margin:0 0 12px;text-wrap:balance}
.post .meta{color:var(--muted);font-size:14px;margin:0 0 22px}
.post .intro{font-size:19px;line-height:1.55;margin:0 0 26px}
.post h2{font-size:32px;margin:44px 0 12px;scroll-margin-top:20px}
.post p,.post li{font-size:17px}
.post a{color:var(--congo)}
.toc{background:var(--raised);border:1px solid var(--line);border-radius:4px;padding:16px 20px}
.toc ol{margin:6px 0 0;padding-left:20px}.toc li{font-size:16px;margin:3px 0}
.setups li,.tips li{margin-bottom:8px}
h3.tier{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font:600 22px var(--display);letter-spacing:.03em;margin:30px 0 10px}
h3.tier small{font:400 14px var(--sans);color:var(--muted);letter-spacing:0}
.tb{display:inline-block;padding:3px 10px;border-radius:3px;font-size:16px;letter-spacing:.08em}
.tb-budget{background:#e3e4f6;color:var(--congo)}.tb-mid{background:var(--spike);color:#16181b}.tb-high{background:var(--case);color:#fff}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--raised)}
table.mics{width:100%;border-collapse:collapse;font-size:15px;min-width:620px}
table.mics th{text-align:left;font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:2px solid var(--ink)}
table.mics td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
table.mics td:first-child{font:600 16px var(--display);letter-spacing:.03em;color:var(--ink);white-space:nowrap}
table.mics td:nth-child(2) a{font-weight:600;color:var(--ink);text-decoration-color:var(--spike);text-decoration-thickness:2px;text-underline-offset:3px}
table.mics td.pr{font:500 13px var(--mono);white-space:nowrap;color:var(--ink)}
table.mics tr:last-child td{border-bottom:0}
.tip{background:#fff8e6;border-left:4px solid var(--spike);border-radius:3px;padding:14px 18px;margin:22px 0;font-size:16px}
.post details{border-top:1px solid var(--line);padding:12px 0}.post details summary{cursor:pointer;font:600 19px var(--display);letter-spacing:.03em}.post details p{margin:8px 0 0;color:var(--muted)}
.aff{font-size:13px!important;color:var(--muted);margin-top:30px}
.cta-box{background:var(--case);color:var(--on-case);border-radius:4px;padding:26px;margin-top:18px}.cta-box h2{margin:0 0 8px;font-size:26px}.cta-box p{color:#c9ccd2;margin:0 0 16px}
.bh{font:600 clamp(34px,5vw,48px)/1 var(--display);letter-spacing:.02em;margin:6px 0 10px}
a.post-card{text-decoration:none;color:inherit;display:block;transition:border-color .15s}a.post-card:hover{border-color:var(--congo)}
a.post-card .more{color:var(--congo);font-weight:600}
@media (max-width:820px){header.site nav{gap:12px}.post .intro{font-size:17px}}
/* ---- Mobile kompakt ---- */
.hero .pass{height:auto}
@media (max-width:820px){
  header.site .wrap{flex-wrap:wrap;gap:0 10px;padding-block:10px 0}
  header.site img{height:30px;width:auto}
  header.site .brand{font-size:20px}
  header.site .brand small{font-size:9px;margin-top:2px}
  header.site nav{order:3;flex:0 0 100%;margin:8px -20px 0;padding:0 20px;gap:18px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-top:1px solid #2e323a;height:40px}
  header.site nav::-webkit-scrollbar{display:none}
  header.site nav a{font-size:14px;white-space:nowrap}
  header.site nav a.lang{margin-left:auto;padding:2px 7px}
  .hero{padding-block:28px 36px}
  .hero .pass{display:none}
  .hero h1{font-size:40px;margin-bottom:12px}
  .hero p{font-size:16px;margin-bottom:20px}
  .tape{font-size:12px;padding:4px 10px;margin-bottom:16px}
  .btn{font-size:16px;padding:12px 18px}
  section{padding-block:40px}
  h2{font-size:28px}
  .post{padding-block:24px 48px}
  .post h1{font-size:32px}
}

.post .nlw{padding:0;margin:36px 0}.post .nlw .wrap{padding:0;max-width:none}.post .nl{grid-template-columns:auto minmax(0,1fr)}.post .nl form{grid-column:1/-1}.post .nl h2{margin-top:0}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.btns .btn,.btns .btn.ghost{margin:0}
section.homeblog{padding-top:8px}

.post ul.plain{padding-left:22px;margin:0 0 18px}.post ul.plain li{margin:6px 0}

/* v17 – modernere Optik, Abschnitte mit Hintergrundtönen */
.card{border-radius:10px;transition:transform .18s,box-shadow .18s,border-color .18s}
a.post-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(22,24,27,.10)}
.btn{border-radius:8px}
.nl{border-radius:10px}
.faq details{border-radius:8px}
.cta-box{border-radius:12px}
.kick{font:500 12px var(--mono);letter-spacing:.14em;color:var(--congo);margin-bottom:8px}
section.tone{padding-block:72px}
.tone-paper{background:var(--paper)}
.tone-white{background:var(--raised);border-block:1px solid var(--line)}
.tone-spike{background:#fbf1d3}
.tone-spike .nl{box-shadow:0 18px 40px rgba(22,24,27,.08)}
section.nlw.tone{padding-block:56px}
.tone-congo{background:var(--congo);color:#fff;position:relative;overflow:hidden}
.tone-congo::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 10%,rgba(143,149,255,.35),transparent 45%),radial-gradient(circle at 5% 100%,rgba(242,176,30,.18),transparent 40%);pointer-events:none}
.tone-congo .wrap{position:relative}
.tone-congo .kick{color:var(--spike)}
.tone-congo h2{color:#fff}
.tone-congo .lead{color:#d5d8ff}
.tone-congo .card{border-color:transparent;box-shadow:0 10px 26px rgba(10,12,40,.25)}
.tone-dark{background:var(--case);color:var(--on-case);border:0}
.tone-dark h2{color:#fff}.tone-dark p{color:#c9ccd2}
.tone-dark .roles span{border-color:#353941;color:var(--spike)}
.tone-dark a{color:var(--spike)}
.homeblog .kick,.s-what .kick{color:var(--congo)}
@media (max-width:820px){section.tone{padding-block:52px}}
.tone-congo .card{color:var(--ink)}
.tone-congo p>a{color:#fff!important}
.tone-white .card{background:var(--paper)}
.tone-dark a{color:var(--spike)!important}
footer{border-top:1px solid #2c3038}
.fig{margin:24px 0 28px}.fig svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:12px}
.fig img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line);background:#fff}
.fig figcaption{font-size:14px;color:var(--muted);margin-top:8px}
/* v18 – Tonbänder auf Unterseiten */
.post.rh-t{padding:0}
.band{padding-block:56px}
.band.phead{background:#eef0ff;background-image:radial-gradient(circle at 90% 0,rgba(143,149,255,.35),transparent 45%),radial-gradient(circle at 0 100%,rgba(242,176,30,.14),transparent 40%);border-bottom:1px solid #dfe2fb;padding-block:40px 44px}
.band.phead .intro{margin-bottom:0}.band.phead .lead{margin-bottom:0}
.band.phead h1{color:var(--ink)}
.post .band.pbody{background:var(--paper)}
.post .band.pnl{padding-block:48px}
.post .band.pnl .nlw{margin:0}
.post .band.pfaq h2:first-child{margin-top:0}
.post .band.pbody>.wrap>h2:first-child{margin-top:0}
.pcta.tone-congo .cta-box{background:none;padding:0;margin:0;color:#fff}
.pcta.tone-congo .cta-box h2{font-size:clamp(28px,4vw,38px);color:#fff}
.pcta.tone-congo .cta-box p{color:#d5d8ff;font-size:17px}
.pcta.tone-congo .btn{background:var(--spike);color:var(--ink);border-color:var(--spike)}
.pcta.tone-congo a{color:#fff}
.pcards{padding-block:48px 64px}
.pcards .cards{margin-top:0}
.tone-white .tool{background:#fff}
@media (max-width:820px){.band{padding-block:40px}.band.phead{padding-block:28px 32px}.post .band.pnl{padding-block:36px}}
/* v19: 4 Tool-Karten */
.cards.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.cards.c4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards.c4{grid-template-columns:1fr}}

/* v20 – Sticky Header mit Dropdown + Mobil-Menü, aufgeräumte Startseite */
header.site{position:sticky;top:0;z-index:60;background:rgba(27,29,33,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid #2c3038}
header.site .wrap{flex-wrap:nowrap;gap:12px;padding-block:12px}
header.site .mainnav{margin-left:auto;display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
header.site .mainnav>a,header.site .ddt{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:8px;color:var(--on-case);text-decoration:none;font:500 15px var(--display);letter-spacing:.1em}
header.site .mainnav>a:hover,.dd:hover .ddt,.dd:focus-within .ddt{background:#262a31;color:var(--spike)}
.dd{position:relative}
.ddt svg{transition:transform .15s}.dd:hover .ddt svg,.dd:focus-within .ddt svg{transform:rotate(180deg)}
.ddm{position:absolute;top:100%;left:-8px;width:310px;padding:8px;margin-top:8px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 48px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s}
.ddm::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dd:hover .ddm,.dd:focus-within .ddm{opacity:1;visibility:visible;transform:none}
.ddm a{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ink)}
.ddm a:hover{background:var(--paper)}
.ddm .ic,.mpanel .ic{flex:0 0 36px;height:36px;border-radius:9px;background:#eef0ff;color:var(--congo);display:grid;place-items:center}
.ddm b{display:block;font:600 18px/1.1 var(--display);letter-spacing:.03em}
.ddm .d{display:block;font-size:13px;color:var(--muted);line-height:1.3;margin-top:1px}
.ddm a.all{display:block;border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:6px;padding-top:11px;font:600 14px var(--sans);color:var(--congo)}
header.site a.lang{display:inline-flex;align-items:center;gap:5px;color:var(--on-case);text-decoration:none;font:500 14px var(--display);letter-spacing:.1em;border:1px solid #3a3f4a;border-radius:8px;padding:6px 10px}
header.site a.lang:hover{border-color:var(--spike);color:var(--spike)}
header.site .hcta{font-size:15px;padding:9px 16px;white-space:nowrap}
.mnav{display:none}
@media (max-width:920px){
  header.site .wrap{flex-wrap:nowrap;gap:10px;padding-block:10px}
  header.site .mainnav,header.site a.lang{display:none}
  header.site .hcta{margin-left:auto;font-size:14px;padding:9px 12px}
  .mnav{display:block}
  .mnav summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:10px;border:1px solid #3a3f4a;display:grid;place-items:center}
  .mnav summary::-webkit-details-marker{display:none}
  .mnav summary span,.mnav summary span::before,.mnav summary span::after{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,background .2s}
  .mnav summary span{position:relative}
  .mnav summary span::before,.mnav summary span::after{content:"";position:absolute;left:0}
  .mnav summary span::before{top:-6px}.mnav summary span::after{top:6px}
  .mnav[open] summary span{background:transparent}
  .mnav[open] summary span::before{transform:translateY(6px) rotate(45deg)}
  .mnav[open] summary span::after{transform:translateY(-6px) rotate(-45deg)}
  .mpanel{position:absolute;left:0;right:0;top:100%;background:var(--case);border-bottom:1px solid #2c3038;padding:6px 20px 22px;max-height:calc(100vh - 62px);overflow:auto;box-shadow:0 24px 40px rgba(0,0,0,.35)}
  .mpanel .mh{font:500 11px var(--mono);letter-spacing:.16em;color:var(--congo-l);margin:16px 0 2px}
  .mpanel a{display:flex;align-items:center;gap:12px;padding:11px 0;color:var(--on-case);text-decoration:none;font:600 20px/1.1 var(--display);letter-spacing:.04em;border-bottom:1px solid #2c3038}
  .mpanel a b{font-weight:600}.mpanel a .d{display:block;font:400 13px var(--sans);letter-spacing:0;color:#a3a7ae;margin-top:2px}
  .mpanel .ic{background:#262a31;color:var(--spike)}
  .mpanel a.btn{display:block;text-align:center;margin-top:20px;border:0;color:#16181b;font-size:18px;padding:13px}
}
@media (max-width:440px){header.site .hcta{display:none}header.site .mnav{margin-left:auto}}
/* Hero */
.hero.home{background:radial-gradient(circle at 85% 20%,rgba(43,47,158,.55),transparent 50%),radial-gradient(circle at 0 100%,rgba(242,176,30,.10),transparent 40%),var(--case);padding-block:64px 80px}
.hero.home .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px}
.hero.home h1{font-size:clamp(40px,6vw,68px)}
.hero-vis{position:relative}
.hero-vis .shot{display:block;width:100%;height:auto;border-radius:14px;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)}
.hero .hero-vis .pass{position:absolute;width:110px;right:-14px;bottom:-46px;transform:rotate(-8deg);filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;padding:0;margin:22px 0 0;font:500 13px var(--mono);color:#b7bbc3}
.trust li::before{content:"✓";color:var(--spike);margin-right:7px;font-weight:700}
@media (max-width:820px){.hero.home{padding-block:30px 44px}.hero.home .wrap{grid-template-columns:1fr;gap:30px}.hero .hero-vis .pass{display:none}.hero.home .btn.ghost{margin:0 0 0 8px}}
@media (max-width:420px){.hero.home .btn.ghost{margin:10px 0 0}}
/* Abschnittskopf mit Link rechts */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.shead .lead{margin-bottom:0}
.slink{font-weight:600;text-decoration:none;white-space:nowrap;border-bottom:2px solid currentColor;padding-bottom:2px}
.tone-congo .slink{color:#fff}.tone-white .slink{color:var(--congo)}
@media (max-width:600px){.shead{flex-direction:column;align-items:flex-start;gap:12px}}
.tcard .ic{width:42px;height:42px;border-radius:11px;background:#eef0ff;color:var(--congo);display:grid;place-items:center;margin-bottom:14px}
.tcard{display:flex!important;flex-direction:column}.tcard p{flex:1}
/* Vorlagen-Block */
.tpl{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.tpl-img img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--line);box-shadow:0 24px 50px rgba(22,24,27,.12);background:#fff}
.hometpl .kick{color:var(--congo)}
.ticks{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.ticks li{position:relative;padding-left:30px;font-weight:600}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--spike) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/13px no-repeat}
.soon{color:var(--muted);font-size:14px;margin:0 0 22px}
.btn.ghost.dark{color:var(--ink);border-color:var(--line);background:#fff}
.btn.ghost.dark:hover{border-color:var(--ink)}
@media (max-width:820px){.tpl{grid-template-columns:1fr;gap:28px}.tpl-img{max-width:420px}}
header.site .ddm a{color:var(--ink);font:400 15px/1.3 var(--sans);letter-spacing:0}
header.site .ddm a b{font:600 18px/1.1 var(--display);letter-spacing:.03em;color:var(--ink)}
header.site .ddm a.all{color:var(--congo);font:600 14px var(--sans)}
.post .ex{border-left:4px solid var(--spike);background:var(--raised);padding:14px 18px;border-radius:0 8px 8px 0;margin:0 0 18px;color:var(--ink)}
/* v30 – Makeover: Banner mit wechselnden Slides, Bild-Karten, Vorlagen-Regal, neuer Footer, Bewegung */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:84px}
.post h2{scroll-margin-top:84px}
header.site{transition:box-shadow .25s}
header.site.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.3)}
.rp{position:fixed;left:0;top:0;right:0;height:3px;background:var(--spike);transform-origin:0 50%;transform:scaleX(0);z-index:80;pointer-events:none}
.cb .more::after,.slink::after{content:"→";display:inline-block;margin-left:.4em;transition:translate .2s}
a:hover>.cb .more::after,a.slink:hover::after{translate:4px 0}

/* ---- Banner ---- */
.hero.hs{padding-block:60px 30px}
.hero.hs.has-bg{background:linear-gradient(90deg,rgba(27,29,33,.96) 30%,rgba(27,29,33,.5) 68%,rgba(27,29,33,.34)),var(--hero-bg) center/cover no-repeat,var(--case)}
.hero.hs .wrap{display:block}
.hs-stack{display:grid}
.hs-slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;min-width:0;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.hs-slide.on{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s}
.hero.hs h1,.hero .hs-h{font:600 clamp(40px,5.4vw,66px)/.95 var(--display);letter-spacing:.02em;margin:0 0 18px;text-wrap:balance;color:#fff}
.hs-txt p{font-size:18px;color:#c9ccd2;max-width:30em;margin:0 0 26px}
.hs-txt .btns{margin:0}
.hs-vis{--vh:400px;height:var(--vh);display:grid;place-items:center;position:relative;min-width:0}
.hs-vis img{display:block}
.hs-shot img{max-width:100%;max-height:var(--vh);width:auto;height:auto;border-radius:14px;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)}
.hs-paper img{height:calc(var(--vh) - 16px);width:auto;border-radius:5px;rotate:3deg;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.hs-fan img{position:absolute;width:47%;height:auto;top:50%;border-radius:12px;box-shadow:0 26px 50px rgba(0,0,0,.5)}
.hs-fan img:nth-child(1){left:2%;transform:translateY(-50%) rotate(-9deg)}
.hs-fan img:nth-child(2){left:26.5%;transform:translateY(-54%);z-index:2}
.hs-fan img:nth-child(3){right:2%;transform:translateY(-50%) rotate(9deg)}
@keyframes hsIn{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes hsVis{from{opacity:0;translate:26px 0;scale:.97}to{opacity:1;translate:0 0;scale:1}}
.hs-slide.on .hs-txt>*{animation:hsIn .6s cubic-bezier(.2,.8,.2,1) both}
.hs-slide.on .hs-txt>:nth-child(2){animation-delay:.07s}
.hs-slide.on .hs-txt>:nth-child(3){animation-delay:.14s}
.hs-slide.on .hs-txt>:nth-child(4){animation-delay:.21s}
.hs-slide.on .hs-vis>*{animation:hsVis .7s cubic-bezier(.2,.8,.2,1) .1s both}
.hs-slide.on .hs-fan>:nth-child(1){animation-delay:.16s}
.hs-slide.on .hs-fan>:nth-child(3){animation-delay:.24s}
/* Leiste unter dem Banner: beschriftet wie die Kanalzüge am Pult */
.hs-nav{display:flex;align-items:center;gap:8px;margin-top:40px;padding-top:18px;border-top:1px solid #2e323a}
.hs-tab{appearance:none;border:0;cursor:pointer;position:relative;overflow:hidden;background:#262a31;color:#b7bbc3;font:600 15px/1 var(--display);letter-spacing:.12em;padding:11px 14px 13px;border-radius:4px;display:inline-flex;gap:9px;align-items:center;transition:background .2s,color .2s}
.hs-tab .n{color:var(--spike)}
.hs-tab:hover{background:#2f343c;color:#fff}
.hs-tab.on{background:#ecebe4;color:var(--ink)}
.hs-tab.on .n{color:var(--congo)}
.hs-tab i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--spike);transform:scaleX(0);transform-origin:0 50%}
@keyframes hsBar{to{transform:scaleX(1)}}
.hs.ready .hs-tab.on i{animation:hsBar 7s linear forwards}
.hs.ready.paused .hs-tab.on i{animation-play-state:paused}
.hs-tab:focus-visible,.hs-pause:focus-visible,.chipf:focus-visible{outline:2px solid var(--spike);outline-offset:3px}
.hs-pause{margin-left:auto;width:38px;height:38px;flex:none;border-radius:50%;border:1px solid #3a3f4a;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.hs-pause:hover{border-color:var(--spike)}
.hs-pause span{display:block;width:10px;height:12px;border-inline:3px solid #c9ccd2}
.hs-pause.is-paused span{width:0;height:0;border:0;border-left:11px solid #c9ccd2;border-block:7px solid transparent;margin-left:3px}
.hs:not(.ready) .hs-nav{display:none}
@media (max-width:820px){
  .hero.hs{padding-block:28px 22px}
  .hs-slide{grid-template-columns:1fr;gap:22px}
  .hero.hs h1,.hero .hs-h{font-size:40px;margin-bottom:12px}
  .hs-txt p{font-size:16px;margin-bottom:18px}
  .hs-vis{--vh:230px}
  .hs-nav{margin-top:24px;padding-top:14px;gap:6px}
  .hs-tab{padding:10px 12px 12px;font-size:14px}
  .hs-tab .l{display:none}.hs-tab.on .l{display:inline}
  .hero.hs .btn.ghost{margin:0}
}

/* ---- Karten mit Bild ---- */
.card.icard{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card.icard[hidden]{display:none}
.thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:#14161a;border-bottom:1px solid var(--line)}
.thumb.t32{aspect-ratio:3/2}
.thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:scale .6s cubic-bezier(.2,.8,.2,1)}
a.icard:hover .thumb img{scale:1.045}
.thumb.ph{display:grid;place-items:center;background:radial-gradient(#31353e 1.4px,transparent 1.6px) 0 0/22px 22px,radial-gradient(circle at 85% 0,rgba(43,47,158,.75),transparent 55%),radial-gradient(circle at 0 100%,rgba(242,176,30,.22),transparent 45%),var(--case)}
.thumb.ph b{background:#ecebe4;color:var(--ink);font:600 20px/1 var(--display);letter-spacing:.14em;padding:8px 16px;rotate:-3deg}
.cb{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.cb .tag{display:block;margin-bottom:8px}
.cb h3{margin:0 0 8px}
.cb p{flex:1}
.cb .more{margin-top:auto}
.hometools .cb p{font-size:15px}

/* ---- Vorlagen-Regal ---- */
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 18px}
.pcard{display:block;text-decoration:none;color:var(--ink);min-width:0}
.pcard img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 14px 30px rgba(22,24,27,.10);transition:translate .25s,rotate .25s,box-shadow .25s}
.pcard:hover img{translate:0 -5px;rotate:-1.2deg;box-shadow:0 24px 44px rgba(22,24,27,.18)}
.pcard>b{display:block;font:600 21px/1.1 var(--display);letter-spacing:.03em;margin-top:12px}
.pcard>span{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.pcard.all .sq{aspect-ratio:1;border-radius:12px;background:var(--congo);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;transition:background .2s}
.pcard.all:hover .sq{background:#22267f}
.pcard.all .sq b{font:600 30px/1 var(--display);letter-spacing:.03em}
.pcard.all .sq span{color:#d5d8ff;font-size:14px;margin-top:6px}
.pcard.all .sq span::after{content:" →"}
.hometpl .slink{color:var(--congo)}
@media (max-width:900px){.shelf{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .shelf{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;scroll-padding-inline:20px;margin-inline:-20px;padding:4px 20px 10px;scrollbar-width:none}
  .shelf::-webkit-scrollbar{display:none}
  .pcard{flex:0 0 58%;scroll-snap-align:start}
}

/* ---- Einblenden beim Scrollen (nur wenn site.js läuft und Bewegung erlaubt ist) ---- */
.rv-on [data-rv]{opacity:0;translate:0 22px}
.rv-on [data-rv].in{opacity:1;translate:0 0;transition:opacity .6s ease calc(var(--i,0)*80ms),translate .7s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*80ms),transform .18s,box-shadow .18s,border-color .18s}

/* ---- Blog: Filter ---- */
.fbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.chipf{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);font:600 15px/1 var(--display);letter-spacing:.06em;padding:9px 14px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.chipf:hover{border-color:var(--ink)}
.chipf.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- FAQ zweispaltig auf großen Bildschirmen ---- */
@media (min-width:900px){
  section.faq.tone>.wrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);column-gap:56px}
  section.faq.tone>.wrap>h2{grid-column:1;grid-row:1/span 30;font-size:38px;line-height:1.02;text-wrap:balance}
  section.faq.tone>.wrap>details{grid-column:2}
  section.faq.tone>.wrap>details:first-of-type{margin-top:0}
}
.faq summary{transition:color .15s}
.faq details[open] summary{color:var(--congo)}

/* ---- Über: optionales Foto ---- */
.about-img img{display:block;width:100%;height:auto;border-radius:14px}
@media (min-width:821px){.about .wrap:has(.about-img){grid-template-columns:1.15fr .8fr 1.6fr}}

/* ---- Footer ---- */
footer{padding-block:52px 26px}
footer .wrap.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;align-items:start}
footer .fbrand a{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
footer .fbrand img{height:36px;width:auto}
footer .fbrand b{font:600 24px/1 var(--display);letter-spacing:.05em;color:#fff}
footer .fbrand p{margin:12px 0 0;max-width:22em}
footer h4{font:500 12px var(--mono);letter-spacing:.14em;color:var(--congo-l);margin:6px 0 12px;text-transform:uppercase}
footer nav{display:flex;flex-direction:column;gap:8px}
footer nav a{color:#d6d8dd;text-decoration:none}
footer nav a:hover{color:var(--spike)}
footer .wrap.fbot{margin-top:38px;padding-top:18px;border-top:1px solid #2c3038}
@media (max-width:820px){footer .wrap.fgrid{grid-template-columns:1fr 1fr;gap:28px 20px}footer .fbrand{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hs-slide,.hs-slide.on{transition:none}
  .hs-slide.on .hs-txt>*,.hs-slide.on .hs-vis>*,.hs.ready .hs-tab.on i{animation:none}
  .thumb img,.pcard img,.more::after,.slink::after{transition:none}
}

/* Handy: Tools zweispaltig, Blog-Karten als kompakte Liste */
@media (max-width:600px){
  .hometools .cards.c4{grid-template-columns:1fr 1fr;gap:12px}
  .hometools .cb{padding:12px 13px 14px}
  .hometools .cb h3{font-size:19px}
  .hometools .cb p{display:none}
  .homeblog .cards{gap:12px}
  .homeblog .card.icard{flex-direction:row}
  .homeblog .thumb{flex:0 0 108px;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}
  .homeblog .thumb.ph b{font-size:13px;padding:5px 8px;letter-spacing:.1em}
  .homeblog .cb{padding:13px 14px 14px}
  .homeblog .cb h3{font-size:19px}
}

/* v30c – Tool-Szenen im Banner: transparentes Bild, Schatten ist im Bild */
.hs-scene img{max-width:112%;max-height:calc(var(--vh) + 44px);width:auto;height:auto;margin-inline:-6%}
@media (max-width:820px){.hs-scene img{max-width:104%;max-height:calc(var(--vh) + 20px);margin-inline:-2%}}

/* v30e – SEO-Feinschliff: Foto oben im Artikel, Karten-Überschriften als h2, Footer-Spaltentitel */
.post .leadimg{margin:0 0 30px}
.post .leadimg img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;background:#14161a}
.card .cb h2{font:600 22px/1.1 var(--display);letter-spacing:.04em;margin:0 0 8px}
footer .fh{font:500 12px var(--mono);letter-spacing:.14em;color:var(--congo-l);margin:6px 0 12px;text-transform:uppercase}

/* v30f – verwandte Artikel am Artikelende */
section.related{padding-block:52px 60px;background:var(--paper);border-top:1px solid var(--line)}
section.related h2{margin:0 0 22px}