/* Hookmind · Layout: Redaktionsplan als Bühne. Dunkle Tinte wie Belfast, Michroma als Wortmarke, Köder-Pink als einziger Akzent. */
@font-face{font-family:'Michroma';font-weight:400;font-display:swap;src:url('fonts/michroma-400.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-weight:400;font-display:swap;src:url('fonts/schibsted-400.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-weight:500;font-display:swap;src:url('fonts/schibsted-500.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-weight:600;font-display:swap;src:url('fonts/schibsted-600.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-weight:700;font-display:swap;src:url('fonts/schibsted-700.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url('fonts/jetbrains-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url('fonts/jetbrains-500.woff2') format('woff2')}

:root{
  --ink:#131412;
  --panel:#1B1D1A;
  --raise:#232622;
  --line:#2D302C;
  --paper:#F3F1EA;
  --mut:#A9A69D;
  --koeder:#FF4F7B;
  --koeder-soft:rgba(255,79,123,.12);
  --on-koeder:#131412;
  --display:'Michroma','Eurostile','Arial Black',sans-serif;
  --text:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --r:18px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--text);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:var(--paper)}
a:hover{color:var(--koeder)}
:focus-visible{outline:2px solid var(--koeder);outline-offset:3px;border-radius:6px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--koeder);color:var(--on-koeder);padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{left:max(16px,env(safe-area-inset-left,0px))}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.eyebrow b{color:var(--koeder);font-weight:500}
.h2{font-family:var(--display);font-weight:400;font-size:clamp(25px,3.3vw,40px);line-height:1.22;letter-spacing:-.01em}
.h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--mut);max-width:62ch}
.sec{padding-block:clamp(72px,9vw,116px)}
.sec.tight{padding-top:0}
.sec.band{background:var(--panel);border-block:1px solid var(--line)}
.sec-head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(36px,5vw,56px)}
.note{font-size:13px;color:var(--mut)}
.cur{font-family:var(--text);font-weight:700;font-size:.5em;letter-spacing:0}

/* Buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font:600 16px/1 var(--text);text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:transform .15s ease,background-color .15s ease,color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-koeder{background:var(--koeder);color:var(--on-koeder)}
.btn-koeder:hover{color:var(--on-koeder);background:#FF6B90}
.btn-line{border-color:var(--line);color:var(--paper);background:transparent}
.btn-line:hover{border-color:var(--paper);color:var(--paper)}
.btn svg{width:18px;height:18px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper)}
.logo svg{width:34px;height:34px;flex:0 0 auto}
.logo-wm{font-family:var(--display);font-size:17px;letter-spacing:.1em}
.mk-bg{fill:var(--koeder)}
.mk-s{stroke:var(--ink);fill:none}
.mk-f{fill:var(--ink)}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(19,20,18,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.nav{display:flex;align-items:center;gap:6px 26px;font-size:15px}
.nav a{text-decoration:none;color:var(--mut);padding:10px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--paper)}
.top-r{display:flex;align-items:center;gap:10px}
.top .btn{min-height:42px;padding:0 18px;font-size:15px}
.menu-btn{display:none;min-height:42px;min-width:42px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--paper);cursor:pointer;align-items:center;justify-content:center}
.menu-btn svg{width:20px;height:20px}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--ink);border-bottom:1px solid var(--line);padding:8px max(20px,env(safe-area-inset-right,0px)) 16px max(20px,env(safe-area-inset-left,0px))}
  .top.open .nav{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
}
.nav .nav-cta{display:none}
@media (max-width:900px){.nav .nav-cta{display:block;color:var(--koeder);font-weight:700;border-bottom:0}}
@media (max-width:520px){.logo svg{width:30px;height:30px}.logo{gap:10px}.logo-wm{font-size:14px;letter-spacing:.08em}.top-r .btn{display:none}}

/* Breadcrumbs */
.crumbs{font-size:13.5px;color:var(--mut)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li{display:flex;align-items:center;gap:6px}
.crumbs li+li::before{content:"/";color:#5E5C55}
.crumbs a{color:var(--mut);text-decoration:none}
.crumbs a:hover{color:var(--paper)}

/* Startseiten-Hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
#plan{position:absolute;inset:0;width:100%;height:100%;display:block}
.veil{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(90% 85% at 18% 45%,rgba(19,20,18,.97) 0%,rgba(19,20,18,.9) 42%,rgba(19,20,18,.5) 72%,rgba(19,20,18,.25) 100%),
  linear-gradient(180deg,rgba(19,20,18,.6) 0%,rgba(19,20,18,0) 18%,rgba(19,20,18,0) 78%,rgba(19,20,18,.95) 100%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding-block:clamp(64px,8vw,112px)}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.2vw,54px);line-height:1.14;letter-spacing:-.02em;margin-top:22px}
.hero h1 em,.phero h1 em{font-style:normal;color:var(--koeder)}
.hero .lede{margin-top:26px}
.hero .ctas{margin-top:36px}
.hero-note{margin-top:18px;font-size:14px;color:var(--mut)}
@media (max-width:940px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}

/* Unterseiten-Hero */
.phero{border-bottom:1px solid var(--line);background:radial-gradient(70% 120% at 100% 0%,rgba(255,79,123,.10) 0%,rgba(255,79,123,0) 60%),var(--ink)}
.phero .wrap{padding-block:clamp(40px,6vw,80px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.phero .wrap.single{grid-template-columns:minmax(0,1fr)}
.phero-txt{display:flex;flex-direction:column;gap:20px;min-width:0}
.phero h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.8vw,48px);line-height:1.16;letter-spacing:-.015em}
@media (max-width:940px){.phero .wrap{grid-template-columns:minmax(0,1fr)}}

/* App-Mockup */
.app{background:rgba(27,29,26,.95);border:1px solid var(--line);border-radius:22px;box-shadow:0 40px 80px -40px rgba(0,0,0,.85);overflow:hidden;min-width:0}
.app-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.app-title{font-weight:700;font-size:19px;margin-top:4px}
.app-tabs{display:flex;gap:6px;padding:12px 20px 0;flex-wrap:wrap}
.app-tabs span{font-size:13px;padding:6px 12px;border-radius:999px;color:var(--mut);border:1px solid var(--line)}
.app-tabs span.on{background:var(--paper);color:var(--ink);border-color:var(--paper);font-weight:600}
.rows{list-style:none;margin:0;padding:8px 20px 6px}
.rows li{display:grid;grid-template-columns:94px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.rows li:last-child{border-bottom:0}
.rows .ch{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--mut)}
.rows .tx{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{font-family:var(--mono);font-size:11.5px;padding:5px 9px;border-radius:999px;border:1px solid var(--line);color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.pill.ok{background:var(--koeder);border-color:var(--koeder);color:var(--on-koeder)}
.pill.draft{border-style:dashed}
.app-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mut)}
.app-body{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
@media (max-width:440px){.rows li{grid-template-columns:minmax(0,1fr) auto}.rows .ch{grid-column:1/-1}}

/* Kleine Mockup-Bausteine */
.kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px 14px;font-size:14.5px}
.kv dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding-top:3px}
.kv dd{margin:0}
.slider{display:flex;flex-direction:column;gap:6px}
.slider-l{display:flex;justify-content:space-between;font-size:13px;color:var(--mut)}
.slider-t{position:relative;height:6px;border-radius:999px;background:var(--line)}
.slider-t span{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--paper)}
.slider-t i{position:absolute;top:-5px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--koeder);border:3px solid var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:13px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--mut)}
.chip.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.chip.no{text-decoration:line-through}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:16px 20px 18px}
.week .d{display:flex;flex-direction:column;gap:6px;min-width:0}
.week .dn{font-family:var(--mono);font-size:11px;color:var(--mut);letter-spacing:.1em}
.week .p{font-size:11.5px;line-height:1.25;padding:7px 6px;border-radius:8px;background:var(--raise);border:1px solid var(--line);overflow:hidden;text-overflow:ellipsis}
.week .p.k{border-color:var(--koeder);background:var(--koeder-soft)}
.week .p.m{border-style:dashed;color:var(--mut)}
@media (max-width:520px){.week{grid-template-columns:repeat(4,minmax(0,1fr))}}
.post{background:var(--raise);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.post-top{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:11.5px;color:var(--mut);letter-spacing:.06em}
.post p{font-size:15px}
.post .t{font-weight:700;font-size:16px}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.checks li{display:flex;gap:10px;font-size:14.5px}
.checks svg{flex:0 0 auto;width:18px;height:18px;stroke:var(--koeder);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}

/* Ticker */
.ticker{border-bottom:1px solid var(--line);overflow:hidden;background:var(--ink)}
.ticker-track{display:flex;width:max-content;animation:tick 40s linear infinite}
.ticker-track span{display:inline-flex;align-items:center;padding:18px 14px;font-family:var(--display);font-size:13px;letter-spacing:.18em;color:var(--mut);white-space:nowrap}
.ticker-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--koeder);margin-left:28px}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;flex-wrap:wrap;width:auto}}

/* Schritte */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.step{padding:28px 26px 30px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:12px;background:var(--panel)}
.step:last-child{border-right:0}
.step-n{font-family:var(--display);font-size:13px;color:var(--koeder);letter-spacing:.1em}
.step h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
.step p{font-size:15.5px;color:var(--mut)}
@media (max-width:900px){.steps,.steps.three{grid-template-columns:minmax(0,1fr)}.step{border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}}

/* Funktionsraster */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.feat > *{background:var(--panel);padding:28px 26px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--paper)}
a.fi:hover{background:var(--raise);color:var(--paper)}
a.fi:hover h3{color:var(--koeder)}
.feat-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.feat svg,.ico{width:26px;height:26px;stroke:var(--koeder);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-size:19px;font-weight:700}
.feat p{font-size:15.5px;color:var(--mut)}
.more{margin-top:auto;font-size:14px;font-weight:600;color:var(--koeder)}
.only{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:4px 9px;border-radius:999px;background:var(--koeder);color:var(--on-koeder);white-space:nowrap}
@media (max-width:900px){.feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.feat{grid-template-columns:minmax(0,1fr)}}

/* Zweispalter */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.split.flip > :first-child{order:2}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}.split.flip > :first-child{order:0}}
.split-txt{display:flex;flex-direction:column;gap:18px;min-width:0}
.bul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.bul li{position:relative;padding-left:22px;font-size:16.5px}
.bul li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--koeder)}

/* Kampagnen-Demo */
.bench{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;align-items:start}
@media (max-width:900px){.bench{grid-template-columns:minmax(0,1fr)}}
.idea{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:14px}
.idea-text{font-size:21px;line-height:1.4;font-weight:600}
.brandline{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mut)}
.brandline i{width:26px;height:26px;border-radius:50%;background:#3A3F37;flex:0 0 auto}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--mut);font:600 15px/1 var(--text);cursor:pointer}
.tab:hover{color:var(--paper);border-color:var(--mut)}
.tab[aria-selected="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.result{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:18px;min-height:380px}
.result-top{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.result-ch{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--koeder)}
.result-meta{font-family:var(--mono);font-size:12px;color:var(--mut)}
.result-title{font-size:21px;font-weight:700;line-height:1.3}
.result-body{font-size:17px;line-height:1.6;white-space:pre-line}
.info{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.info ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.info li{display:flex;gap:10px;font-size:15px}
.info li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--koeder);margin-top:8px}
.when{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--mut)}
.when svg{width:16px;height:16px;stroke:var(--koeder);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Spy */
.spy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px){.spy{grid-template-columns:minmax(0,1fr)}}
.adlist{display:flex;flex-direction:column;gap:10px}
.adbtn{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--ink)}
.adbtn:hover{border-color:var(--mut)}
.adbtn:focus-visible{outline:2px solid var(--koeder);outline-offset:3px}
.adbtn[aria-pressed="true"]{border-color:var(--koeder);background:var(--koeder-soft)}
.adbtn .nm{font-weight:700;font-size:16px}
.adbtn .hk{grid-column:1/-1;font-size:15px;color:var(--mut);line-height:1.45}
.adbtn .d{font-family:var(--mono);font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.bar{grid-column:1/-1;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.bar span{display:block;height:100%;border-radius:999px;background:var(--koeder)}
.analysis{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:16px}
.analysis dl{margin:0;display:flex;flex-direction:column}
.analysis dl div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.analysis dt{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding-top:3px}
.analysis dd{margin:0;font-size:15.5px}
.verdict{font-size:14.5px;color:var(--mut)}
.look{border:1.5px solid var(--koeder);background:var(--koeder-soft);border-radius:16px;padding:18px}
.look-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--koeder)}
.look p{margin-top:8px;font-size:19px;font-weight:600;line-height:1.4}

/* Experte */
.expert{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:48px;align-items:center}
@media (max-width:900px){.expert{grid-template-columns:minmax(0,1fr)}}
.photo{aspect-ratio:4/5;max-width:100%;border-radius:22px;border:1px dashed #4A4E46;background:repeating-linear-gradient(135deg,var(--panel) 0 14px,var(--raise) 14px 28px);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--mut)}
.badge{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--koeder);color:var(--on-koeder);font-weight:700;font-size:14px}
.quote{margin:0;border-top:1px solid var(--line);padding-top:24px}
.quote blockquote{margin:0;font-family:var(--display);font-size:clamp(17px,1.8vw,21px);line-height:1.5}
.quote figcaption{margin-top:12px;font-size:14.5px;color:var(--mut)}

/* Rechner */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
@media (max-width:860px){.calc{grid-template-columns:minmax(0,1fr)}}
.sliders{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:26px}
.sl{display:flex;flex-direction:column;gap:10px}
.sl-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sl label{font-weight:600;font-size:15.5px}
.sl output{font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--koeder);height:28px}
.res{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.res .eyebrow{color:#5E5C55}
.big{display:flex;flex-direction:column;gap:6px}
.big strong{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.6vw,52px);line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.big .lbl{font-size:15px;color:#4A4842}
.res-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.res .small{font-size:15px;color:#3B3A35}

/* Preise */
.prices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
@media (max-width:1060px){.prices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.prices{grid-template-columns:minmax(0,1fr)}}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:16px}
.band .plan{background:var(--ink)}
.plan.hot{border:1.5px solid var(--koeder);background:linear-gradient(180deg,var(--koeder-soft),var(--panel) 60%)}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:nowrap;min-height:28px}
.plan h3{font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.06em}
.plan .for{font-size:14.5px;color:var(--mut);margin-top:-6px}
.tag{font-family:var(--mono);font-size:11px;padding:5px 9px;border-radius:999px;background:var(--koeder);color:var(--on-koeder)}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.price strong{font-family:var(--display);font-weight:400;font-size:32px;letter-spacing:-.02em}
.price .per{color:var(--mut);font-size:14.5px}
.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;flex:1 1 auto}
.plan li{display:flex;gap:10px;font-size:15px}
.plan li::before,.tick::before{content:"";flex:0 0 auto;width:15px;height:15px;margin-top:4px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF4F7B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E")}
.plan .btn{width:100%}
.trial{display:flex;align-items:center;justify-content:space-between;gap:18px 32px;flex-wrap:wrap;border:1px dashed var(--line);border-radius:var(--r);padding:22px 26px;margin-bottom:14px}
.trial-txt{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 420px}
.trial-h{font-family:var(--display);font-size:20px;letter-spacing:-.01em}
.trial-sub{color:var(--mut);font-size:14.5px;max-width:72ch}
.trial .btn{flex:0 0 auto}
.price .anfrage{font-size:26px;line-height:1.25}
.abg{align-self:flex-start;font-family:var(--mono);font-size:11.5px;line-height:1.5;padding:5px 9px;border-radius:8px;border:1px solid var(--line);color:var(--paper);margin-top:-4px}
table.cmp.cmp-5{min-width:860px}
table.cmp.cmp-5 td{font-size:14px}
.plan-ch{display:flex;flex-direction:column;gap:9px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ch-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.plan .chips{gap:4px}
.plan .chip{font-size:11.5px;padding:3px 8px;color:var(--paper)}
.plan .plus{font-size:14px;font-weight:600;margin-bottom:-4px}
.plan ul{gap:11px}
.plan .ft{display:flex;flex-direction:column;gap:2px;min-width:0}
.plan .ft strong{font-weight:600;font-size:15px;line-height:1.35}
.plan .ft span{font-size:13px;color:var(--mut);line-height:1.45}

/* Tabellen */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table.cmp{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
table.cmp th,table.cmp td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.cmp thead th{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);background:var(--panel)}
table.cmp tbody tr:last-child td,table.cmp tbody tr:last-child th{border-bottom:0}
table.cmp tbody th{font-weight:600}
.tick{display:inline-flex}
.tick span{position:absolute;left:-9999px}
.dash{color:#5E5C55}

/* FAQ */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-weight:700;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:20px;color:var(--koeder);flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:22px;color:var(--mut);max-width:65ch}

/* Weiterführend */
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.related{grid-template-columns:minmax(0,1fr)}}
.related a{display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);text-decoration:none;color:var(--paper)}
.related a:hover{border-color:var(--koeder);color:var(--paper)}
.related strong{font-size:17px}
.related span{font-size:14.5px;color:var(--mut)}

/* CTA-Band */
.start{border:1px solid var(--line);border-radius:28px;background:radial-gradient(120% 140% at 100% 0%,rgba(255,79,123,.18) 0%,rgba(255,79,123,0) 55%),var(--panel);padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
@media (max-width:900px){.start{grid-template-columns:minmax(0,1fr)}}
.start h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.6vw,44px);line-height:1.18}
.start-txt{display:flex;flex-direction:column;gap:16px;min-width:0}
.form{display:flex;flex-direction:column;gap:12px}
.form label{font-weight:600;font-size:15px}
.form-row{display:flex;gap:10px;flex-wrap:wrap}
.form input{flex:1 1 220px;min-width:0;min-height:52px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--ink);color:var(--paper);font:500 16px var(--text)}
.form input::placeholder{color:#8C897F}
.form input:focus{border-color:var(--koeder);outline:none}
.form .btn{min-height:52px}
.status{font-size:14px;color:var(--mut);min-height:1.5em}

/* Ratgeber */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.posts{grid-template-columns:minmax(0,1fr)}}
.posts a{display:flex;flex-direction:column;gap:12px;padding:26px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);text-decoration:none;color:var(--paper)}
.posts a:hover{border-color:var(--koeder);color:var(--paper)}
.posts h2{font-size:21px;font-weight:700;line-height:1.3}
.posts p{font-size:15.5px;color:var(--mut)}
.meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--mono);font-size:12.5px;color:var(--mut)}
.article{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:start}
@media (max-width:980px){.article{grid-template-columns:minmax(0,1fr)}}
.toc{position:sticky;top:96px;border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--panel)}
.toc ol{margin:12px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.toc a{color:var(--mut);text-decoration:none}
.toc a:hover{color:var(--paper)}
@media (max-width:980px){.toc{position:static;order:-1}}
.prose{max-width:70ch;font-size:18px;line-height:1.7}
.prose > * + *{margin-top:1.1em}
.prose h2{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.4vw,28px);line-height:1.3;margin-top:2.2em;scroll-margin-top:96px}
.prose h3{font-size:20px;font-weight:700;margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.45em}
.prose a{color:var(--koeder)}
.prose strong{color:var(--paper)}
.prose blockquote{margin-left:0;padding:16px 20px;border-radius:14px;background:var(--panel);border:1px solid var(--line);color:var(--mut)}
.prose .tip{padding:18px 20px;border-radius:14px;background:var(--koeder-soft);border:1px solid rgba(255,79,123,.4)}
.prose .tip p::before{content:"Praxis-Tipp";display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--koeder);margin-bottom:6px}
.prose .tbl{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.prose table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.prose th,.prose td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose thead th{background:var(--panel);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.prose tbody tr:last-child td{border-bottom:0}

/* Rechtliches */
.legal{max-width:760px;display:flex;flex-direction:column;gap:18px}
.legal h2{font-size:20px;font-weight:700;margin-top:18px}
.legal p,.legal li{color:var(--mut)}
.ph{display:inline-block;font-family:var(--mono);font-size:14px;color:var(--koeder)}

/* Footer */
.foot{border-top:1px solid var(--line);background:var(--ink)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:32px;padding-block:56px 32px}
@media (max-width:980px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@media (max-width:480px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.foot-brand{display:flex;flex-direction:column;gap:14px}
.foot-brand p{font-size:14.5px;color:var(--mut);max-width:34ch}
.foot h2{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.foot ul a{display:inline-block;padding:6px 0;font-size:15px;color:var(--paper);text-decoration:none;opacity:.86}
.foot ul a:hover{color:var(--koeder);opacity:1}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:20px 32px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mut)}
@media (min-width:1061px){.plan .for{min-height:2lh}}
.person{margin:0;display:flex;flex-direction:column;gap:12px;max-width:440px;width:100%}
.person img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:22px;border:1px solid var(--line);background:var(--panel)}
.person figcaption{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--mut)}
.person figcaption strong{font-size:15.5px;color:var(--paper);font-weight:600}
@media (max-width:900px){.expert .person{max-width:360px}}
.ref{position:relative;margin:0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:clamp(26px,4vw,44px);display:flex;flex-direction:column;gap:20px;max-width:900px}
.ref-zeichen{display:block;font-family:var(--display);font-size:84px;line-height:1;height:46px;overflow:hidden;color:var(--koeder);margin-bottom:-6px}
.ref blockquote{margin:0;font-family:var(--display);font-size:clamp(18px,2vw,23px);line-height:1.5;letter-spacing:-.005em}
.ref blockquote .ph{font-size:14px;line-height:1.6}
.ref figcaption{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--mut);border-top:1px solid var(--line);padding-top:16px}
.ref figcaption strong{font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:.04em;color:var(--paper)}
.ref-hinweis{font-size:12.5px}