/* ═══ hetito — geteilte Styles für Unterseiten (Magazin, Rechtliches) ═══
   Tokens & Komponenten identisch zur Landingpage (index.html). */

@font-face{ font-family:'Bricolage Grotesque'; font-style:normal; font-weight:500 800; font-stretch:100%; font-display:swap;
  src:url("/assets/fonts/bricolage-latin.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:500 800; font-stretch:100%; font-display:swap;
  src:url("/assets/fonts/bricolage-latin-ext.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:'Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/assets/fonts/hanken-latin.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:'Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/assets/fonts/hanken-latin-ext.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:'Newsreader'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url("/assets/fonts/newsreader-latin.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:'Newsreader'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url("/assets/fonts/newsreader-latin-ext.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:'Newsreader'; font-style:italic; font-weight:400; font-display:swap;
  src:url("/assets/fonts/newsreader-italic-latin.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:'Newsreader'; font-style:italic; font-weight:400; font-display:swap;
  src:url("/assets/fonts/newsreader-italic-latin-ext.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; }

:root{
  --bg: oklch(0.984 0.008 72); --surface: oklch(0.997 0.003 80); --surface-2: oklch(0.965 0.011 72);
  --ink: oklch(0.29 0.022 58); --ink-2: oklch(0.475 0.022 60); --ink-3: oklch(0.62 0.018 62);
  --line: oklch(0.915 0.012 72); --line-2: oklch(0.945 0.009 72);
  --accent: #C56B4D;
  --accent-soft: color-mix(in oklch, var(--accent) 15%, var(--surface));
  --accent-tint: color-mix(in oklch, var(--accent) 8%, var(--surface));
  --co: oklch(0.605 0.052 158); --co-soft: color-mix(in oklch, var(--co) 16%, var(--surface));
  --partner: oklch(0.585 0.058 252); --kid-1: oklch(0.72 0.105 68);
  --ink-dark: oklch(0.255 0.018 56);
  --r-lg: 22px; --r-md: 15px; --r-pill: 999px;
  --font-head: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --shadow-card: 0 1px 2px rgba(60,40,25,.04), 0 6px 18px -8px rgba(60,40,25,.10);
  --shadow-pop: 0 22px 60px -18px rgba(50,30,15,.32);
  --wrap: 1120px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{ font-family:var(--font-body); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.55; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:color-mix(in oklch, var(--accent) 78%, black); }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; letter-spacing:-.02em; line-height:1.08; color:var(--ink); }
::selection{ background:var(--accent-soft); }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.kicker{ font-family:var(--font-head); font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-body);
  font-weight:600; font-size:15.5px; border:none; cursor:pointer; border-radius:var(--r-pill); height:52px; padding:0 26px;
  transition:transform .14s, background .2s, box-shadow .2s; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 10px 24px -10px color-mix(in oklch, var(--accent) 75%, transparent); }
.btn-ghost{ background:var(--surface); color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--ink-3); color:var(--ink); }
.btn-sm{ height:44px; padding:0 20px; font-size:14.5px; }
.btn-onlight{ background:#fff; color:var(--ink-dark); }
.btn-light{ background:rgba(255,255,255,.14); color:#fff; }
.btn-light:hover{ background:rgba(255,255,255,.22); color:#fff; }

/* Nav */
header.nav{ position:sticky; top:0; z-index:50; background:color-mix(in oklch, var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:28px; height:76px; }
.logo{ display:inline-flex; align-items:center; gap:9px; color:var(--ink); }
.logo b{ font-family:var(--font-head); font-weight:700; font-size:22px; letter-spacing:-.03em; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ color:var(--ink-2); font-weight:500; font-size:15px; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
@media (max-width:1080px){ .nav-links{ display:none; } }

/* Footer */
footer{ background:var(--ink-dark); color:oklch(0.82 0.01 72); padding:56px 0 36px; margin-top:80px; }
footer .logo, footer .logo b{ color:#fff; }
.foot-simple{ display:flex; justify-content:space-between; align-items:flex-start; gap:28px; flex-wrap:wrap;
  padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.1); }
.foot-simple p{ font-size:14px; color:oklch(0.74 0.01 72); margin-top:12px; max-width:34ch; }
.foot-links{ display:flex; gap:26px; flex-wrap:wrap; }
.foot-links a{ color:oklch(0.78 0.01 72); font-size:14.5px; font-weight:500; }
.foot-links a:hover{ color:#fff; }
.foot-bottom{ display:flex; justify-content:space-between; padding-top:24px; font-size:13px; color:oklch(0.66 0.01 72); flex-wrap:wrap; gap:12px; }

/* ── Artikel (Magazin-Posts) ─────────────────────────────────────────────── */
.post-hero{ padding:56px 0 0; }
.post-hero .crumbs{ font-size:13.5px; color:var(--ink-3); margin-bottom:22px; }
.post-hero .crumbs a{ color:var(--ink-2); }
.post-hero h1{ font-size:clamp(34px, 4.6vw, 54px); max-width:20em; margin:14px 0 18px; }
.post-hero .lead{ font-size:19px; color:var(--ink-2); max-width:38em; }
.post-meta{ display:flex; align-items:center; gap:14px; margin:26px 0 0; flex-wrap:wrap; }
.post-meta .ava{ display:inline-grid; place-items:center; border-radius:50%; color:#fff; width:44px; height:44px;
  font-family:var(--font-head); font-weight:600; font-size:17px; background:var(--accent); flex-shrink:0; }
.post-meta .who b{ display:block; font-size:14.5px; font-family:var(--font-head); }
.post-meta .who span{ font-size:13px; color:var(--ink-3); }
.post-meta .upd{ margin-left:auto; font-size:13px; color:var(--ink-3); background:var(--surface-2);
  padding:7px 14px; border-radius:999px; }
.post-figure{ margin:36px 0 0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.post-figure img{ width:100%; max-height:520px; object-fit:cover; }
.post-figure figcaption{ font-size:13px; color:var(--ink-3); padding:10px 4px 0; }

article.prose{ max-width:760px; margin:0 auto; padding:48px 28px 20px; font-size:17px; line-height:1.7; }
.prose > p{ margin:0 0 22px; color:var(--ink); }
.prose h2{ font-size:clamp(24px, 3vw, 32px); margin:52px 0 16px; }
.prose h3{ font-size:20px; margin:34px 0 12px; }
.prose ul, .prose ol{ margin:0 0 24px 22px; display:flex; flex-direction:column; gap:9px; }
.prose li{ padding-left:4px; }
.prose strong{ font-weight:650; }
.prose em{ font-family:var(--font-serif); }
.prose blockquote{ border-left:3px solid var(--accent); background:var(--accent-tint); border-radius:0 var(--r-md) var(--r-md) 0;
  padding:20px 26px; margin:0 0 24px; font-family:var(--font-serif); font-size:18.5px; }
.prose blockquote p{ margin:0; }
.prose blockquote cite{ display:block; margin-top:10px; font-family:var(--font-body); font-style:normal; font-size:13.5px; color:var(--ink-3); }
/* Direktantwort-Box (GEO: „Direct-Answer Lead“) */
.prose .answer{ background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:var(--r-md); padding:22px 26px; margin:0 0 34px; box-shadow:var(--shadow-card); }
.prose .answer p{ margin:0; font-size:17.5px; }
/* Tabellen (GEO: 2,1× höhere Extraktionswahrscheinlichkeit) */
.prose .tbl{ overflow-x:auto; margin:0 0 28px; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-card); }
.prose table{ width:100%; border-collapse:collapse; font-size:15px; background:var(--surface); min-width:560px; }
.prose th{ font-family:var(--font-head); font-weight:600; text-align:left; background:var(--surface-2);
  padding:13px 16px; border-bottom:1.5px solid var(--line); white-space:nowrap; }
.prose td{ padding:13px 16px; border-bottom:1px solid var(--line-2); vertical-align:top; }
.prose tr:last-child td{ border-bottom:none; }
.prose .src{ font-size:13.5px; color:var(--ink-3); margin-top:-16px; margin-bottom:28px; }

/* FAQ im Artikel */
.prose details.faq{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:12px; overflow:hidden; }
.prose details.faq summary{ list-style:none; cursor:pointer; padding:18px 22px; font-family:var(--font-head); font-weight:600; font-size:16.5px; }
.prose details.faq summary::-webkit-details-marker{ display:none; }
.prose details.faq .ans{ padding:0 22px 20px; font-size:15.5px; color:var(--ink-2); }

/* CTA-Box im/unter Artikel */
.post-cta{ max-width:760px; margin:36px auto 0; padding:0 28px; }
.post-cta .box{ background:radial-gradient(120% 120% at 50% 0%, var(--accent), color-mix(in oklch, var(--accent) 72%, black));
  border-radius:var(--r-lg); padding:38px 34px; color:#fff; text-align:center; box-shadow:var(--shadow-pop); }
.post-cta h2{ color:#fff; font-size:clamp(24px,3vw,32px); margin-bottom:10px; }
.post-cta p{ color:rgba(255,255,255,.92); margin-bottom:22px; font-size:16px; }
.post-cta .note{ margin-top:14px; font-size:12.5px; color:rgba(255,255,255,.75); }

/* Weiterlesen */
.more-grid{ max-width:var(--wrap); margin:64px auto 0; padding:0 28px; }
.more-grid h2{ font-size:24px; margin-bottom:22px; }
.mag-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.mag-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-card); transition:transform .16s, box-shadow .16s; display:flex; flex-direction:column; }
.mag-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-pop); }
.mag-thumb{ aspect-ratio:16/10; overflow:hidden; }
.mag-thumb img{ width:100%; height:100%; object-fit:cover; }
.mag-body{ padding:22px 22px 24px; flex:1; display:flex; flex-direction:column; }
.mag-tag{ font-size:12px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; }
.mag-body h3{ font-size:20px; margin:10px 0 9px; line-height:1.18; }
.mag-body h3 a{ color:inherit; }
.mag-body p{ font-size:14.5px; color:var(--ink-2); flex:1; }
.mag-body .rm{ margin-top:16px; font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:6px; }
.mag-body .date{ font-size:12.5px; color:var(--ink-3); margin-top:14px; }
@media (max-width:900px){ .mag-grid{ grid-template-columns:1fr; } }

/* Magazin-Index-Kopf */
.mag-head{ padding:64px 0 12px; }
.mag-head h1{ font-size:clamp(36px,5vw,56px); margin:14px 0 16px; }
.mag-head p{ font-size:18px; color:var(--ink-2); max-width:36em; }

/* ── Rechtsseiten ────────────────────────────────────────────────────────── */
.legal{ max-width:760px; margin:0 auto; padding:56px 28px 20px; font-size:16px; line-height:1.7; }
.legal h1{ font-size:clamp(32px,4vw,44px); margin-bottom:10px; }
.legal .stand{ font-size:13.5px; color:var(--ink-3); margin-bottom:36px; }
.legal h2{ font-size:22px; margin:40px 0 12px; }
.legal h3{ font-size:17.5px; margin:26px 0 8px; }
.legal p, .legal ul{ margin-bottom:16px; color:var(--ink); }
.legal ul{ margin-left:22px; }
.legal .todo{ background:var(--accent-tint); border:1px dashed var(--accent); border-radius:var(--r-md);
  padding:14px 18px; font-size:14.5px; color:var(--ink-2); margin-bottom:24px; }
.legal .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:20px 24px; margin-bottom:20px; }