/* =============================================================
   GRÜNDER MAGAZIN — Design System
   Zeitungspapier hell, Zinnober als Signalfarbe, Serifen-Display.
   Bewusst anders als die dunklen Schwesterprojekte.
   ============================================================= */

:root{
  /* Flächen — warmes Papier */
  --bg:        #FAF6EF;
  --bg-2:      #F3EDE2;
  --paper:     #FFFDF9;
  --ink-panel: #17140F;
  --line:      rgba(23,20,15,.14);
  --line-soft: rgba(23,20,15,.08);
  /* Schatten in drei Schichten: harte Kante, weiche Nähe, weite Tiefe.
     Das ist der Unterschied zwischen „Kasten" und „liegt auf dem Papier". */
  --shadow:    0 1px 1px rgba(23,20,15,.04),
               0 3px 6px -3px rgba(23,20,15,.08),
               0 12px 28px -14px rgba(23,20,15,.22);
  --shadow-hoch: 0 1px 1px rgba(23,20,15,.04),
               0 6px 12px -4px rgba(23,20,15,.10),
               0 22px 48px -20px rgba(23,20,15,.30);

  /* Text */
  --text:  #17140F;
  --text-2:#4B453B;
  --muted: #7A7266;

  /* Akzente */
  --acc:   #D8412B;   /* Zinnober — Signal, Rubriken, Aktionen */
  --acc-2: #17614F;   /* Tannengrün — zweite Ebene */
  --acc-3: #B5871F;   /* Ocker — Hinweise */
  --acc-4: #2C4C7C;   /* Tinte blau — Wissen */

  /* Phasen im Gründungsradar */
  --ph-idee:   #B5871F;
  --ph-konzept:#2C4C7C;
  --ph-gruend: #D8412B;
  --ph-neu:    #17614F;

  /* Maße */
  --tape-h:  38px;
  --nav-h:   66px;
  --top-h:   calc(var(--tape-h) + var(--nav-h));
  --wrap:    1240px;
  --r:       4px;      /* Zeitung: eckig, nicht verspielt */
  --r-lg:    8px;

  --ease: cubic-bezier(.2,.7,.1,1);

  /* Schriften: Fraunces als eigenwillige Display-Serife über
     Instrument Sans (Bedienung, Lesetext) mit JetBrains Mono
     für Zahlen, Rubriken und Etiketten. */
  --font-d:'Fraunces','Iowan Old Style',Georgia,serif;
  --font-t:'Instrument Sans','Helvetica Neue',system-ui,sans-serif;
  --font-m:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
}

/* ---------- Dunkle Variante (Systemeinstellung + Umschalter) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12100D; --bg-2:#191612; --paper:#1C1915; --ink-panel:#0C0A08;
    --line:rgba(245,240,232,.16); --line-soft:rgba(245,240,232,.08);
    --shadow:0 1px 1px rgba(0,0,0,.3), 0 4px 10px -4px rgba(0,0,0,.5),
             0 16px 40px -20px rgba(0,0,0,.8);
    --shadow-hoch:0 1px 1px rgba(0,0,0,.3), 0 8px 18px -6px rgba(0,0,0,.55),
             0 28px 60px -26px rgba(0,0,0,.9);
    --text:#F4EFE6; --text-2:#C3BAAC; --muted:#8E8577;
    --acc:#FF6A4D; --acc-2:#4FBF9F; --acc-3:#E0AE45; --acc-4:#7FA8E0;
    --ph-idee:#E0AE45; --ph-konzept:#7FA8E0; --ph-gruend:#FF6A4D; --ph-neu:#4FBF9F;
  }
}
:root[data-theme="dark"]{
  --bg:#12100D; --bg-2:#191612; --paper:#1C1915; --ink-panel:#0C0A08;
  --line:rgba(245,240,232,.16); --line-soft:rgba(245,240,232,.08);
  --shadow:0 1px 1px rgba(0,0,0,.3), 0 4px 10px -4px rgba(0,0,0,.5),
           0 16px 40px -20px rgba(0,0,0,.8);
  --shadow-hoch:0 1px 1px rgba(0,0,0,.3), 0 8px 18px -6px rgba(0,0,0,.55),
           0 28px 60px -26px rgba(0,0,0,.9);
  --text:#F4EFE6; --text-2:#C3BAAC; --muted:#8E8577;
  --acc:#FF6A4D; --acc-2:#4FBF9F; --acc-3:#E0AE45; --acc-4:#7FA8E0;
  --ph-idee:#E0AE45; --ph-konzept:#7FA8E0; --ph-gruend:#FF6A4D; --ph-neu:#4FBF9F;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 16px)}
body{
  margin:0; padding-top:var(--top-h);
  background:var(--bg); color:var(--text);
  font-family:var(--font-t); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
/* Muss vor allen display-Regeln stehen: sonst hebelt ein späteres
   display:grid oder display:flex das hidden-Attribut aus. */
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;line-height:1.05;letter-spacing:-.02em;margin:0;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 40;
  /* Verhindert einsame Wörter in der letzten Zeile */
  text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

.wrap{width:min(100% - 2.5rem, var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.5rem, 780px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;left:-999px;top:0;z-index:999;background:var(--acc);color:#fff;padding:.7rem 1.2rem}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}

/* Hintergrund: Millimeterpapier mit langsam steigenden Kurven */
.paperbg{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.9}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.05}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .grain{mix-blend-mode:screen;opacity:.05}
}

/* =============================================================
   KOPFZONE
   ============================================================= */
.topbar{position:fixed;inset:0 0 auto;z-index:100;background:var(--bg);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)}
/* Sobald die Seite gescrollt ist, hebt sich die Kopfzone leicht ab */
body.gescrollt .topbar{box-shadow:0 6px 20px -12px rgba(23,20,15,.35)}

.tickerbar{display:flex;align-items:center;height:var(--tape-h);background:var(--ink-panel);color:#F4EFE6;overflow:hidden}
.tickerbar__badge{display:inline-flex;align-items:center;gap:.5rem;flex:none;height:100%;padding:0 .9rem;
  background:var(--acc);color:#fff;font-family:var(--font-m);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.pulse{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.tickerbar__tape{position:relative;flex:1;overflow:hidden;height:100%}
.tape{display:flex;align-items:center;gap:3rem;height:100%;white-space:nowrap;
  animation:tape 46s linear infinite;padding-left:1.5rem}
.tickerbar:hover .tape{animation-play-state:paused}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tape__item{display:inline-flex;align-items:center;gap:.6rem;font-size:.82rem;color:#D8D1C5}
.tape__tag{font-family:var(--font-m);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acc);border:1px solid rgba(216,65,43,.5);padding:.15rem .4rem}
.tape__item strong{color:#fff;font-weight:600}

.nav{display:flex;align-items:center;gap:1.4rem;height:var(--nav-h);
  width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand__mark{width:34px;height:34px;flex:none;color:var(--acc)}
.brand__text{font-family:var(--font-d);font-size:1.32rem;font-weight:600;letter-spacing:-.03em;line-height:1;
  font-variation-settings:'WONK' 1,'opsz' 30}
.brand__text span{color:var(--acc)}
.brand__at{font-family:var(--font-m);font-size:.6rem;color:var(--muted);letter-spacing:.1em;display:block;margin-top:.2rem}

.nav__links{display:flex;gap:1.5rem;margin-left:auto}
.nav__links a{font-size:.92rem;color:var(--text-2);position:relative;padding:.3rem 0;transition:color .2s}
.nav__links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--acc);
  transition:right .3s var(--ease)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--text)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{right:0}

.nav__side{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.nav__links + .nav__side{margin-left:1.5rem}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:var(--r);color:var(--text-2);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.icon-btn:hover{border-color:var(--text);color:var(--text);background:var(--bg-2)}
.burger{display:none;width:38px;height:38px;flex-direction:column;justify-content:center;gap:5px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r)}
.burger span{width:16px;height:1.5px;background:var(--text);transition:.25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.progress{height:2px;background:transparent}
.progress span{display:block;height:100%;width:0;background:var(--acc);transition:width .1s linear}

.mobilemenu{position:fixed;inset:var(--top-h) 0 auto;z-index:99;background:var(--bg);
  border-bottom:1px solid var(--line);padding:1rem 1.25rem 1.5rem;display:grid;gap:.2rem;box-shadow:var(--shadow)}
.mobilemenu a{padding:.75rem .25rem;border-bottom:1px solid var(--line-soft);font-size:1rem}

/* =============================================================
   BAUSTEINE
   ============================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.3rem;border-radius:var(--r);background:var(--acc);color:#fff;
  font-size:.9rem;font-weight:600;border:1px solid var(--acc);cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),
             transform .12s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{background:transparent;color:var(--acc);
  box-shadow:0 4px 14px -6px color-mix(in srgb, var(--acc) 60%, transparent)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn--ghost:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--sm{padding:.5rem .9rem;font-size:.82rem}
.btn--block{width:100%}

.kicker{font-family:var(--font-m);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);display:inline-flex;align-items:center;gap:.6rem}
.kicker::before{content:'';width:22px;height:2px;background:currentColor;border-radius:1px}

.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  padding-bottom:1.2rem;margin-bottom:2.2rem;border-bottom:2px solid var(--text)}
.sechead__t{max-width:62ch}
.sechead h2{font-size:clamp(1.8rem,3.6vw,2.9rem);margin:.5rem 0 .4rem}
.sechead__note{color:var(--muted);font-size:.92rem;max-width:58ch;margin:0}
.sechead__side{flex:none;font-family:var(--font-m);font-size:.7rem;color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;padding-bottom:.35rem}

section{padding:clamp(3rem,6.5vw,5.5rem) 0}
.section--tint{background:var(--bg-2);border-block:1px solid var(--line-soft)}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hoch);
  border-color:color-mix(in srgb, var(--acc) 25%, var(--line))}

.tag{display:inline-block;font-family:var(--font-m);font-size:.63rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.28rem .55rem;border:1px solid currentColor;border-radius:2px}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-family:var(--font-m);font-size:.72rem;letter-spacing:.06em;padding:.45rem .85rem;
  border:1px solid var(--line);border-radius:100px;color:var(--text-2);transition:.18s;background:var(--paper)}
.chip:hover{border-color:var(--text);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}

.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-family:var(--font-m);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  padding:.75rem .9rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--text);font:inherit;font-size:.92rem;width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 14%, transparent)}

/* =============================================================
   AUFMACHER
   ============================================================= */
.hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem);position:relative}
.hero__grid{display:grid;grid-template-columns:1.35fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:end}
.hero h1{font-size:clamp(2.6rem,6.6vw,5.4rem);letter-spacing:-.038em;margin:1.1rem 0 1.3rem;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 144;line-height:.98}
.hero h1 em{font-style:italic;color:var(--acc);font-variation-settings:'WONK' 1}
.hero__lead{font-size:1.16rem;color:var(--text-2);max-width:54ch;margin-bottom:1.8rem}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap}

.hero__box{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  padding:1.5rem;box-shadow:var(--shadow-hoch)}
.hero__box h3{font-size:.72rem;margin-bottom:1rem;padding-bottom:.8rem;
  font-family:var(--font-m);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line)}
.miniradar{display:grid;gap:.1rem}
.miniradar__row{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;
  padding:.7rem .4rem;margin-inline:-.4rem;border-radius:3px;
  border-bottom:1px solid var(--line-soft);transition:background .2s var(--ease)}
.miniradar__row:hover{background:var(--bg-2)}
.miniradar__row:last-child{border-bottom:0}
.miniradar__dot{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.miniradar__name{font-size:.92rem;font-weight:600;line-height:1.3}
.miniradar__meta{font-family:var(--font-m);font-size:.66rem;color:var(--muted);display:block;margin-top:.15rem}
.miniradar__phase{font-family:var(--font-m);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:2px solid var(--text);margin-top:clamp(2.5rem,5vw,4rem)}
.zahl{padding:1.7rem 1.5rem 1.5rem 0;border-right:1px solid var(--line);
  transition:transform .3s var(--ease)}
.zahl:hover{transform:translateY(-2px)}
.zahl:last-child{border-right:0}
.zahl__wert{font-family:var(--font-d);font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;
  letter-spacing:-.035em;color:var(--acc);font-variation-settings:'WONK' 1,'opsz' 72}
.zahl__label{font-size:.88rem;color:var(--text-2);margin-top:.5rem;line-height:1.4}
.zahl__note{font-family:var(--font-m);font-size:.65rem;color:var(--muted);margin-top:.35rem}

/* =============================================================
   GRÜNDUNGSRADAR
   ============================================================= */
.filterbar{display:flex;flex-wrap:wrap;gap:.9rem;align-items:flex-end;
  padding:1.2rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  box-shadow:var(--shadow);margin-bottom:1.6rem}
.filterbar .field{min-width:150px;flex:1 1 150px}
.filterbar .field--search{flex:2 1 240px}
.filter-reset{font-family:var(--font-m);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:.7rem 0}
.filter-reset:hover{color:var(--acc)}
.resultcount{font-family:var(--font-m);font-size:.72rem;color:var(--muted);margin-bottom:1.2rem;
  letter-spacing:.06em;text-transform:uppercase}

.radar{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1.2rem}
.rc{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem 1.4rem 1.4rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.85rem;
  overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
/* Der Phasenstreifen als eigenes Element — so lässt er sich beim
   Überfahren verbreitern, ohne dass der Inhalt springt. */
.rc::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--ph);
  transition:height .3s var(--ease)}
.rc:hover{transform:translateY(-4px);box-shadow:var(--shadow-hoch);
  border-color:color-mix(in srgb, var(--ph) 40%, var(--line))}
.rc:hover::before{height:5px}
.rc:focus-within{border-color:var(--ph)}
.rc__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.rc__phase{font-family:var(--font-m);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ph);border:1px solid var(--ph);padding:.25rem .5rem;border-radius:2px;flex:none}
.rc h3{font-size:1.3rem;line-height:1.15}
.rc__person{font-size:.88rem;color:var(--text-2);margin-top:.25rem}
.rc__was{font-size:.95rem;color:var(--text-2);margin:0}
.rc__warum{font-size:.9rem;color:var(--muted);border-left:2px solid var(--line);padding-left:.9rem;margin:0}
.rc__facts{display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1rem;font-family:var(--font-m);font-size:.7rem;
  border-top:1px solid var(--line-soft);padding-top:.85rem;margin-top:auto}
.rc__fact{display:flex;justify-content:space-between;gap:.5rem;padding:.25rem 0;color:var(--text-2)}
.rc__fact span:first-child{color:var(--muted)}
.rc__gesucht{display:flex;flex-wrap:wrap;gap:.4rem}
.rc__gesucht .tag{color:var(--acc-2);font-size:.6rem}
.rc__offen{font-size:.82rem;color:var(--muted);background:var(--bg-2);padding:.6rem .8rem;border-radius:2px;
  border-left:2px solid var(--acc-3)}

/* =============================================================
   TIPPS
   ============================================================= */
.tipps{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.2rem}
.tipp{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem 1.6rem;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tipp:hover{transform:translateY(-3px);box-shadow:var(--shadow-hoch)}
.tipp__regel{font-family:var(--font-d);font-size:1.32rem;line-height:1.2;letter-spacing:-.02em;
  font-style:italic;color:var(--acc);font-variation-settings:'WONK' 1,'opsz' 40}
.tipp__regel::before{content:'»';margin-right:.15rem}
.tipp__regel::after{content:'«';margin-left:.15rem}
.tipp h3{font-size:1.08rem;font-family:var(--font-t);font-weight:700;letter-spacing:0;line-height:1.35}
.tipp__text{font-size:.95rem;color:var(--text-2);margin:0}
.tipp__fehler{font-size:.88rem;color:var(--text-2);background:var(--bg-2);padding:.8rem .9rem;
  border-left:2px solid var(--acc);border-radius:0 2px 2px 0;margin:0}
.tipp__fehler b{font-family:var(--font-m);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);display:block;margin-bottom:.3rem;font-weight:700}
.tipp__tun{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.tipp__tun li{font-size:.9rem;color:var(--text-2);padding-left:1.4rem;position:relative}
.tipp__tun li::before{content:'→';position:absolute;left:0;color:var(--acc-2);font-family:var(--font-m)}
.tipp__wer{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem;row-gap:.7rem;
  border-top:1px solid var(--line-soft);padding-top:1rem;margin-top:auto}
.tipp__wer > span:nth-child(2){flex:1 1 8rem;min-width:0}
.tipp__ini{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--text);color:var(--bg);font-family:var(--font-m);font-size:.8rem;font-weight:700}
.tipp__wername{font-size:.92rem;font-weight:600;line-height:1.2}
.tipp__werrolle{font-family:var(--font-m);font-size:.68rem;color:var(--muted);margin-top:.2rem}
.tipp__jahre{margin-left:auto;flex:none;text-align:right;font-family:var(--font-m);font-size:.68rem;color:var(--muted)}
.tipp__jahre b{display:block;font-family:var(--font-d);font-size:1.5rem;color:var(--acc);line-height:1}

/* =============================================================
   FAHRPLAN
   ============================================================= */
.fahrplan{display:grid;gap:0;counter-reset:s;border-top:1px solid var(--line)}
.step{border-bottom:1px solid var(--line)}
.step__head{display:grid;grid-template-columns:auto 1fr auto auto;gap:1.4rem;align-items:center;
  width:100%;padding:1.4rem .8rem;text-align:left;border-radius:var(--r);
  transition:background .2s var(--ease)}
.step__head:hover{background:var(--bg-2)}
.step__head[aria-expanded="true"]{background:var(--bg-2)}
/* Die Nummer wird beim Aufklappen zum gefüllten Kreis */
.step__nr{display:inline-grid;place-items:center;min-width:2.1rem;height:2.1rem;border-radius:50%;
  border:1px solid var(--line);transition:.25s var(--ease)}
.step__head[aria-expanded="true"] .step__nr{background:var(--acc);border-color:var(--acc);color:#fff}
.step__nr{font-family:var(--font-m);font-size:.78rem;color:var(--acc);font-weight:700;flex:none}
.step__t h3{font-size:1.22rem;line-height:1.25}
.step__t p{font-size:.9rem;color:var(--muted);margin:.3rem 0 0}
.step__meta{font-family:var(--font-m);font-size:.68rem;color:var(--muted);text-align:right;flex:none}
.step__meta span{display:block}
.step__toggle{width:30px;height:30px;flex:none;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:50%;color:var(--text-2);transition:.25s var(--ease)}
.step__head[aria-expanded="true"] .step__toggle{transform:rotate(45deg);background:var(--acc);
  border-color:var(--acc);color:#fff}
.step__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.step__body[data-open="1"]{grid-template-rows:1fr}
.step__inner{overflow:hidden}
.step__list{list-style:none;padding:0 0 1.6rem 3.2rem;margin:0;display:grid;gap:.7rem;max-width:75ch}
.step__list li{font-size:.96rem;color:var(--text-2);padding-left:1.3rem;position:relative}
.step__list li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;
  background:var(--acc-2);border-radius:50%}
.step__check{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.6rem 3.2rem;
  font-family:var(--font-m);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.step__check input{width:16px;height:16px;accent-color:var(--acc)}
.step[data-done="1"] .step__t h3{text-decoration:line-through;text-decoration-color:var(--acc);color:var(--muted)}
.fahrplan__stand{display:flex;align-items:center;gap:1rem;margin-top:1.4rem;font-family:var(--font-m);
  font-size:.72rem;color:var(--muted);letter-spacing:.06em}
.fahrplan__bar{flex:1;height:4px;background:var(--line);border-radius:2px;overflow:hidden;max-width:280px}
.fahrplan__bar span{display:block;height:100%;background:var(--acc);width:0;transition:width .4s var(--ease)}

/* =============================================================
   RECHTSFORMEN
   ============================================================= */
.formen{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.2rem}
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1rem}
.form-card__top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.form-card h3{font-size:1.18rem;line-height:1.2}
.form-card__kurz{font-family:var(--font-m);font-size:.72rem;color:#fff;background:var(--text);
  padding:.25rem .5rem;border-radius:2px;flex:none}
.form-card__rows{display:grid;gap:.1rem;font-size:.87rem}
.form-card__row{display:grid;grid-template-columns:9rem 1fr;gap:.8rem;padding:.5rem 0;
  border-bottom:1px solid var(--line-soft)}
.form-card__row dt{font-family:var(--font-m);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0}
.form-card__row dd{margin:0;color:var(--text-2)}
.form-card__passt{display:flex;flex-wrap:wrap;gap:.4rem}
.form-card__passt .tag{color:var(--acc-2);font-size:.6rem}
.form-card__achtung{font-size:.87rem;color:var(--text-2);background:var(--bg-2);padding:.75rem .9rem;
  border-left:2px solid var(--acc-3);margin:0;margin-top:auto}
.form-card__achtung b{font-family:var(--font-m);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc-3);display:block;margin-bottom:.25rem}

/* =============================================================
   STOLPERFALLEN
   ============================================================= */
.fallen{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.2rem}
.falle{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:0 var(--r) var(--r) 0;padding:1.4rem;box-shadow:var(--shadow)}
.falle h3{font-size:1.08rem;font-family:var(--font-t);font-weight:700;letter-spacing:0;line-height:1.3;margin-bottom:.8rem}
.falle dl{margin:0;display:grid;gap:.7rem}
.falle dt{font-family:var(--font-m);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.falle dd{margin:.2rem 0 0;font-size:.9rem;color:var(--text-2)}
.falle dd.is-gut{color:var(--acc-2)}

/* =============================================================
   FÖRDERUNGEN
   ============================================================= */
.foerder{display:grid;gap:0;border-top:2px solid var(--text)}
.foerder__row{display:grid;grid-template-columns:1.1fr .7fr 2fr auto;gap:1.5rem;align-items:start;
  padding:1.4rem .4rem;border-bottom:1px solid var(--line);transition:background .2s}
.foerder__row:hover{background:var(--bg-2)}
.foerder__name{font-family:var(--font-d);font-size:1.1rem;line-height:1.25}
.foerder__traeger{font-family:var(--font-m);font-size:.66rem;color:var(--muted);margin-top:.3rem;display:block}
.foerder__art{font-family:var(--font-m);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acc-4);border:1px solid currentColor;padding:.25rem .5rem;border-radius:2px;justify-self:start}
.foerder__was{font-size:.92rem;color:var(--text-2)}
.foerder__link{font-family:var(--font-m);font-size:.72rem;color:var(--acc);white-space:nowrap}

/* =============================================================
   MAGAZIN-RASTER
   ============================================================= */
.artikel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.art{grid-column:span 1;display:flex;flex-direction:column;gap:.8rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.art:hover{transform:translateY(-4px);box-shadow:var(--shadow-hoch);
  border-color:color-mix(in srgb, var(--acc) 28%, var(--line))}
.art > a:first-child{display:block;overflow:hidden}
.art:hover .art__img{transform:scale(1.03)}
/* Die Überschrift bekommt beim Überfahren einen mitlaufenden Unterstrich */
.art h3 a{background-image:linear-gradient(var(--acc),var(--acc));
  background-size:0 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .35s var(--ease)}
.art:hover h3 a{background-size:100% 1.5px}
.art--lead{grid-column:span 2;grid-row:span 2}
.art--wide{grid-column:span 2}
.art__img{width:100%;aspect-ratio:16/10;background:var(--bg-2);display:block;
  transition:transform .5s var(--ease)}
.art--lead .art__img{aspect-ratio:16/9}
.art__body{padding:0 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.art__cat{font-family:var(--font-m);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.art h3{font-size:1.12rem;line-height:1.2}
.art--lead h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.art--wide h3{font-size:1.35rem}
.art__text{font-size:.92rem;color:var(--text-2);margin:0}
.art__meta{display:flex;gap:.8rem;font-family:var(--font-m);font-size:.66rem;color:var(--muted);
  margin-top:auto;padding-top:.6rem;border-top:1px solid var(--line-soft)}

/* =============================================================
   TERMINE
   ============================================================= */
.termine{display:grid;gap:0;border-top:2px solid var(--text)}
.termin{display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:center;
  padding:1.2rem .4rem;border-bottom:1px solid var(--line);transition:background .2s}
.termin:hover{background:var(--bg-2)}
.termin__date{text-align:center;flex:none;min-width:64px}
.termin__d{font-family:var(--font-d);font-size:1.15rem;line-height:1;letter-spacing:-.02em}
.termin__w{font-family:var(--font-m);font-size:.62rem;color:var(--muted);display:block;margin-top:.3rem}
.termin__t{font-size:1.02rem;font-weight:600}
.termin__x{font-size:.88rem;color:var(--muted);margin:.25rem 0 0}
.termin__o{font-family:var(--font-m);font-size:.68rem;color:var(--acc-2);flex:none}

/* =============================================================
   EINREICHEN + NEWSLETTER
   ============================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.formbox{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;box-shadow:var(--shadow)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.formgrid .field--full{grid-column:1/-1}
.formnote{font-size:.82rem;color:var(--muted);margin:1rem 0 0}
.formmsg{font-size:.88rem;padding:.8rem 1rem;border-radius:var(--r);margin-top:1rem;display:none}
.formmsg[data-state="ok"]{display:block;background:rgba(23,97,79,.1);color:var(--acc-2);border:1px solid currentColor}
.formmsg[data-state="err"]{display:block;background:rgba(216,65,43,.08);color:var(--acc);border:1px solid currentColor}
.formmsg[data-state="laeuft"]{display:block;background:var(--bg-2);color:var(--muted)}

/* Honigtopf gegen Automaten — für Menschen nicht erreichbar */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.zustimmung{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  margin-top:1.1rem;font-size:.86rem;color:var(--text-2);line-height:1.5;cursor:pointer}
.zustimmung input{width:17px;height:17px;margin-top:.15rem;accent-color:var(--acc)}

.newsletter{background:var(--ink-panel);color:#F4EFE6;border-radius:var(--r);padding:2.5rem}
.newsletter h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:.8rem}
.newsletter p{color:#B9B1A4;font-size:.98rem}
.newsletter .field input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
.newsletter .field label{color:#8E8577}

/* =============================================================
   ARTIKELSEITE
   ============================================================= */
.article{padding:3rem 0 2rem}
.article__head{max-width:780px;margin-inline:auto}
.article h1{font-size:clamp(2rem,4.6vw,3.6rem);margin:.8rem 0 1rem;letter-spacing:-.03em;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 100}
.article__lead{font-size:1.2rem;color:var(--text-2);margin-bottom:1.5rem}
.article__meta{display:flex;flex-wrap:wrap;gap:1.2rem;font-family:var(--font-m);font-size:.7rem;
  color:var(--muted);border-block:1px solid var(--line);padding:.9rem 0;letter-spacing:.06em}
.article__hero{width:100%;aspect-ratio:21/9;margin:2rem 0;border-radius:var(--r);background:var(--bg-2)}
.article__body{max-width:720px;margin-inline:auto;font-size:1.08rem;line-height:1.75}
.article__body h2{font-size:1.7rem;margin:2.5rem 0 1rem}
.article__body h3{font-size:1.25rem;margin:2rem 0 .8rem;font-family:var(--font-t);font-weight:700;letter-spacing:0}
.article__body blockquote{margin:2rem 0;padding-left:1.5rem;border-left:3px solid var(--acc);
  font-family:var(--font-d);font-size:1.35rem;font-style:italic;line-height:1.35;color:var(--text);
  font-variation-settings:'WONK' 1,'opsz' 40}
.article__body blockquote cite{display:block;font-family:var(--font-m);font-size:.72rem;font-style:normal;
  color:var(--muted);margin-top:.8rem;letter-spacing:.06em}
.article__body ul,.article__body ol{padding-left:1.3rem;margin:0 0 1.3em}
.article__body li{margin-bottom:.5em}
.infobox{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--acc-4);
  border-radius:0 var(--r) var(--r) 0;padding:1.4rem;margin:2rem 0;font-size:.98rem}
.infobox h4{font-family:var(--font-m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acc-4);margin-bottom:.7rem}
.infobox ul{margin-bottom:0}
.infobox--achtung{border-left-color:var(--acc)}
.infobox--achtung h4{color:var(--acc)}

/* Bilder im Beitrag — aus dem Redaktionssystem */
.beitrag-bild{margin:2rem 0}
.beitrag-bild img{width:100%;border-radius:var(--r)}
.beitrag-bild figcaption,.article__herofig figcaption{
  font-size:.85rem;color:var(--muted);margin-top:.6rem;line-height:1.45}
.bildquelle{display:block;font-family:var(--font-m);font-size:.66rem;margin-top:.25rem;opacity:.8}
.figure--breit{width:min(100vw - 2.5rem,1000px);margin-inline:calc(50% - min(50vw - 1.25rem,500px))}
.figure--voll{width:min(100vw - 2.5rem,var(--wrap));margin-inline:calc(50% - min(50vw - 1.25rem,var(--wrap)/2))}
.article__herofig{margin:2rem 0}
.article__heroimg{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r);background:var(--bg-2)}

/* Trenner */
.beitrag-trenner{border:0;border-top:1px solid var(--line);width:120px;margin:2.5rem auto}

/* Tabelle */
.tabelle-rahmen{margin:2rem 0;overflow-x:auto}
.beitrag-tabelle{width:100%;border-collapse:collapse;font-size:.95rem;min-width:min(100%,480px)}
.beitrag-tabelle th{text-align:left;font-family:var(--font-m);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding:.6rem .8rem;border-bottom:2px solid var(--text);
  white-space:nowrap}
.beitrag-tabelle td{padding:.7rem .8rem;border-bottom:1px solid var(--line-soft);color:var(--text-2);
  vertical-align:top}
.beitrag-tabelle tr:last-child td{border-bottom:0}
.tabelle-quelle{font-family:var(--font-m);font-size:.66rem;color:var(--muted);margin:.6rem 0 0}

/* Zahlenkacheln */
.zahlkacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  border-top:2px solid var(--text);margin:2rem 0}
.zahlkachel{padding:1.2rem 1.2rem 1.2rem 0;border-right:1px solid var(--line)}
.zahlkachel:last-child{border-right:0}
.zahlkachel__w{font-family:var(--font-d);font-size:2rem;line-height:1;letter-spacing:-.03em;color:var(--acc);
  font-variation-settings:'WONK' 1,'opsz' 60}
.zahlkachel__l{font-size:.88rem;color:var(--text-2);margin-top:.45rem;line-height:1.4}
.zahlkachel__n{font-family:var(--font-m);font-size:.64rem;color:var(--muted);margin-top:.3rem}

/* Galerie */
.galerie{margin:2rem 0}
.galerie figure{margin:0}
.galerie img{width:100%;border-radius:var(--r)}
.galerie figcaption{font-size:.82rem;color:var(--muted);margin-top:.4rem}
.galerie--raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem}
.galerie--schieber{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem}
.galerie--schieber figure{flex:0 0 min(78%,420px);scroll-snap-align:start}

/* Video mit Zwei-Klick-Schutz */
.videoblock{margin:2rem 0}
.videoblock__box{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:2rem 1.5rem;text-align:center}
.videoblock__t{font-family:var(--font-d);font-size:1.2rem;margin:0 0 .5rem;letter-spacing:-.02em}
.videoblock__h{font-size:.85rem;color:var(--muted);max-width:46ch;margin:0 auto 1.1rem}
.videoblock iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);display:block}

/* Handlungsaufruf */
.ctablock{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:0 var(--r) var(--r) 0;padding:1.5rem;margin:2rem 0}
.ctablock h4{font-family:var(--font-t);font-size:1.08rem;font-weight:700;letter-spacing:0;margin-bottom:.5rem}
.ctablock p{font-size:.95rem;color:var(--text-2);margin-bottom:1rem}

/* Download */
.downloadblock{display:flex;align-items:center;gap:1rem;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:1.1rem 1.3rem;margin:2rem 0;transition:.2s var(--ease)}
.downloadblock:hover{border-color:var(--acc);transform:translateY(-2px)}
.downloadblock__i{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--acc);color:#fff;font-size:1.1rem}
.downloadblock__t{display:block;font-weight:600;font-size:.98rem}
.downloadblock__x{display:block;font-size:.85rem;color:var(--muted);margin-top:.15rem}

/* Offenlegung */
.offenlegungblock{border-top:1px solid var(--line);padding-top:1.2rem;margin:2.5rem 0 0}
.offenlegungblock h4{font-family:var(--font-m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem}
.offenlegungblock p{font-size:.87rem;color:var(--muted);margin:0}
.offenlegungblock--anzeige{background:var(--bg-2);border:1px solid var(--acc);border-radius:var(--r);
  padding:1.1rem 1.3rem;margin:2rem 0}
.offenlegungblock--anzeige h4{color:var(--acc)}

/* Einbettungen aus Radar, Tipps und Fahrplan */
.einbett{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.4rem;margin:2rem 0;box-shadow:var(--shadow)}
.einbett__label{font-family:var(--font-m);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);display:block;margin-bottom:.8rem}
.einbett__kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.einbett h4{font-family:var(--font-d);font-size:1.25rem;letter-spacing:-.02em;line-height:1.2}
.einbett p{font-size:.94rem;color:var(--text-2);margin:.6rem 0}
.einbett__meta{font-family:var(--font-m);font-size:.7rem;color:var(--muted) !important;margin:.3rem 0 .7rem !important}
.einbett a{font-family:var(--font-m);font-size:.72rem;color:var(--acc)}
.einbett--radar{border-top:3px solid var(--ph)}
.einbett--tipp{border-left:3px solid var(--acc-2)}
.einbett__regel{font-family:var(--font-d);font-size:1.25rem;font-style:italic;line-height:1.25;
  color:var(--acc) !important;letter-spacing:-.02em;margin:0 0 .5rem !important;
  font-variation-settings:'WONK' 1,'opsz' 40}
.einbett__regel::before{content:'»'}
.einbett__regel::after{content:'«'}
.einbett__fehler{font-size:.88rem;background:var(--bg-2);padding:.7rem .85rem;border-radius:2px}
.einbett__fehler b{font-family:var(--font-m);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);display:block;margin-bottom:.25rem}
.einbett__schritte{list-style:none;padding:0;margin:0 0 .9rem}
.einbett__schritte li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;padding:.6rem 0;
  border-bottom:1px solid var(--line-soft)}
.einbett__schritte li:last-child{border-bottom:0}
.einbett__nr{font-family:var(--font-m);font-size:.75rem;color:var(--acc);font-weight:700}
.einbett__schritte b{display:block;font-size:.95rem;font-weight:600}
.einbett__schritte span span{display:block;font-size:.86rem;color:var(--muted);margin-top:.15rem}

@media (max-width:900px){
  .figure--breit,.figure--voll{width:100%;margin-inline:0}
  .zahlkacheln{grid-template-columns:1fr 1fr}
  .zahlkachel{padding-right:1rem}
}
@media (max-width:560px){
  .zahlkacheln{grid-template-columns:1fr}
  .zahlkachel{border-right:0;border-bottom:1px solid var(--line)}
  .zahlkachel:last-child{border-bottom:0}
}

/* =============================================================
   RECHTLICHES
   ============================================================= */
.legal{max-width:760px;margin-inline:auto;font-size:1rem}
.legal h2{font-size:1.6rem;margin:2.5rem 0 .9rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.legal h3{font-size:1.1rem;margin:1.6rem 0 .5rem;font-family:var(--font-t);font-weight:700;letter-spacing:0}
.legal p,.legal li{color:var(--text-2)}
.legal .platzhalter{background:rgba(216,65,43,.1);color:var(--acc);padding:.1rem .35rem;
  border-radius:2px;font-family:var(--font-m);font-size:.85em}

/* =============================================================
   HINWEIS + FUSSZEILE
   ============================================================= */
.disclaimer{background:var(--bg-2);border-top:1px solid var(--line);padding:1.5rem 0;font-size:.85rem;color:var(--muted)}
.disclaimer strong{color:var(--text-2)}

.footer{background:var(--ink-panel);color:#B9B1A4;padding:3.5rem 0 2rem;font-size:.9rem}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.5rem}
.footer h4{font-family:var(--font-m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8E8577;margin-bottom:1rem}
.footer a{color:#B9B1A4;transition:color .2s}
.footer a:hover{color:var(--acc)}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.footer__brand{font-family:var(--font-d);font-size:1.4rem;color:#fff;letter-spacing:-.02em;
  font-variation-settings:'WONK' 1,'opsz' 40}
.footer__brand span{color:var(--acc)}
.footer__claim{margin-top:.8rem;max-width:34ch;color:#8E8577;font-size:.88rem}
.footer__bottom{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.1);margin-top:2.5rem;padding-top:1.5rem;
  font-family:var(--font-m);font-size:.68rem;color:#6E675C;letter-spacing:.06em}

/* =============================================================
   RESPONSIV
   ============================================================= */
@media (max-width:1080px){
  .artikel-grid{grid-template-columns:repeat(2,1fr)}
  .art--lead,.art--wide{grid-column:span 2}
  .art--lead{grid-row:auto}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav__links{display:none}
  .burger{display:flex}
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .zahlen{grid-template-columns:1fr 1fr}
  .zahl{padding-right:1rem}
  .zahl:nth-child(2n){border-right:0}
  .split{grid-template-columns:1fr;gap:2rem}
  .foerder__row{grid-template-columns:1fr;gap:.6rem}
  .step__head{grid-template-columns:auto 1fr auto;gap:1rem}
  .step__meta{display:none}
  .step__list,.step__check{padding-left:2.4rem;margin-left:0}
  .step__check{margin-left:2.4rem;padding-left:0}
}
@media (max-width:640px){
  body{font-size:16px}
  section{padding:3rem 0}
  .artikel-grid{grid-template-columns:1fr}
  .art--lead,.art--wide{grid-column:span 1}
  .zahlen{grid-template-columns:1fr}
  .zahl{border-right:0;border-bottom:1px solid var(--line);padding:1.2rem 0}
  .sechead{flex-direction:column;align-items:flex-start;gap:.8rem}
  .formgrid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:2rem}
  .rc__facts{grid-template-columns:1fr}
  .newsletter{padding:1.8rem}
  .termin{grid-template-columns:auto 1fr;gap:1rem}
  .termin__o{grid-column:2;justify-self:start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

@media print{
  .topbar,.mobilemenu,.footer,.newsletter,.filterbar,.paperbg,.grain{display:none !important}
  body{padding-top:0;background:#fff;color:#000}
}

/* Verweise auf andere Beiträge */
.verweise{background:var(--bg-2);border-left:3px solid var(--acc-4);border-radius:0 var(--r) var(--r) 0;
  padding:1.2rem 1.4rem;margin:2rem 0}
.verweise h4{font-family:var(--font-m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acc-4);margin-bottom:.7rem}
.verweise ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.verweise li{padding-left:1.2rem;position:relative}
.verweise li::before{content:'→';position:absolute;left:0;color:var(--acc-4);font-family:var(--font-m)}
.verweise a{font-weight:600;font-size:.98rem;border-bottom:1px solid transparent}
.verweise a:hover{border-bottom-color:var(--acc)}
.verweise span{display:block;font-size:.85rem;color:var(--muted);margin-top:.1rem}

/* Umfrage */
.umfrage{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.4rem;margin:2rem 0;box-shadow:var(--shadow)}
.umfrage h4{font-family:var(--font-t);font-size:1.08rem;font-weight:700;letter-spacing:0;margin-bottom:1rem}
.umfrage__optionen{display:grid;gap:.5rem}
.umfrage__optionen button{text-align:left;padding:.75rem 1rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg-2);font-size:.95rem;transition:.15s;position:relative;
  overflow:hidden;font-family:var(--font-t)}
.umfrage__optionen button:hover{border-color:var(--acc)}
.umfrage__balken{position:absolute;inset:0 auto 0 0;background:rgba(216,65,43,.16);
  transition:width .5s var(--ease);z-index:0}
.umfrage__optionen button span{position:relative;z-index:1}
.umfrage__anteil{float:right;font-family:var(--font-m);font-size:.8rem;color:var(--muted)}
.umfrage__hinweis{font-size:.8rem;color:var(--muted);margin:.9rem 0 0}
.umfrage.is-ab .umfrage__optionen button{cursor:default}

/* Anzeigenplatz */
.anzeige{margin:2rem 0;text-align:center}
.anzeige__label{display:block;font-family:var(--font-m);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.4rem;text-align:left}
.anzeige img{margin-inline:auto;border-radius:var(--r)}
.anzeige__leer{border:1px dashed var(--line);border-radius:var(--r);padding:2.5rem 1rem;
  color:var(--muted);font-size:.88rem;background:var(--bg-2)}
.anzeige--banner .anzeige__leer{padding:1.6rem 1rem}

/* =============================================================
   LESERKONTO, MERKLISTE UND WEB-APP
   ============================================================= */

/* Zugang in der Kopfzeile */
.nav__konto{font-size:.88rem;color:var(--text-2);padding:.4rem .7rem;border:1px solid var(--line);
  border-radius:var(--r);white-space:nowrap;transition:.2s}
.nav__konto:hover{border-color:var(--text);color:var(--text)}
.icon-btn{position:relative}
.merkzaehler{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 .25rem;
  display:grid;place-items:center;border-radius:9px;background:var(--acc);color:#fff;
  font-family:var(--font-m);font-size:.6rem;font-weight:700}

/* Merken-Knopf */
.merken{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;
  border:1px solid var(--line);border-radius:100px;background:var(--paper);
  font-family:var(--font-m);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);transition:.18s;cursor:pointer}
.merken:hover{border-color:var(--acc);color:var(--acc)}
.merken[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
.merken[aria-pressed="true"] svg{fill:currentColor}
.merken--karte{align-self:flex-start;margin-top:.2rem}
.article__meta .merken{margin-left:auto}

/* Kontoseite */
.kontokopf{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-bottom:1.2rem;margin-bottom:1.6rem;border-bottom:2px solid var(--text);flex-wrap:wrap}
.kontokopf h2{font-size:1.6rem}
.kontokopf p{font-family:var(--font-m);font-size:.72rem;color:var(--muted);margin:.35rem 0 0}
.kontogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.2rem}
.kontokarte{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem;box-shadow:var(--shadow)}
.kontokarte h2{font-family:var(--font-t);font-size:1.08rem;font-weight:700;letter-spacing:0;
  margin-bottom:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line-soft)}
.kontokarte__t{font-size:.92rem;color:var(--text-2)}
.kontokarte__t strong{font-family:var(--font-d);font-size:1.4rem;color:var(--acc);
  letter-spacing:-.02em;vertical-align:-.1em}
.kontokarte--ernst{border-left:3px solid var(--acc-3)}
.kontokarte .field{margin-bottom:.9rem}

.hinweisbox,.leerbox{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:2rem;text-align:center;box-shadow:var(--shadow)}
.hinweisbox h2,.leerbox h2{font-size:1.3rem;margin-bottom:.7rem}
.hinweisbox p,.leerbox p{color:var(--text-2);max-width:52ch;margin-inline:auto}
.leerbox .btn{margin-top:1.2rem}

/* Web-App-Kasten */
.appkasten{background:var(--ink-panel);color:#F4EFE6;border-radius:var(--r);padding:1.8rem;
  margin-top:1.5rem}
.appkasten h2{color:#fff;font-size:1.3rem;margin-bottom:.7rem}
.appkasten p{color:#B9B1A4;font-size:.96rem;max-width:60ch}
.appkasten .btn{margin-top:.6rem}
.appschritte{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12)}
.appschritte p{font-size:.88rem;margin-bottom:.4rem}
.appschritte em{color:#F4EFE6;font-style:normal;font-weight:600}

/* Merkliste */
.merkliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.1rem}
.merkkarte{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.6rem;
  transition:transform .25s var(--ease)}
.merkkarte:hover{transform:translateY(-3px)}
.merkkarte__art{font-family:var(--font-m);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc)}
.merkkarte h3{font-size:1.12rem;line-height:1.25}
.merkkarte__fuss{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-top:auto;padding-top:.8rem;border-top:1px solid var(--line-soft);
  font-family:var(--font-m);font-size:.66rem;color:var(--muted)}
.linkweg{font-family:var(--font-m);font-size:.66rem;color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;padding:0}
.linkweg:hover{color:var(--acc)}
.merkhinweis{font-size:.88rem;color:var(--muted);margin-top:1.5rem}
.merkhinweis a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .nav__konto{display:none}
}

/* Auf Rubrikseiten steht die H1 im Abschnittskopf und soll wie eine H2 wirken */
.sechead h1{font-size:clamp(1.8rem,3.6vw,2.9rem);margin:.5rem 0 .4rem}

/* Hinweisleiste, solange Beispielinhalte gezeigt werden.
   Wird von app.js eingefügt und verschwindet mit den echten Inhalten. */
.demoleiste{background:var(--acc-3);color:#fff;padding:.7rem 0;font-size:.86rem;line-height:1.45}
.demoleiste strong{font-family:var(--font-m);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;margin-right:.5rem}
@media (max-width:640px){
  .demoleiste{font-size:.8rem;padding:.6rem 0}
}

/* Unauffälliger Textknopf, etwa „Passwort vergessen?" */
.linkleicht{display:block;width:100%;margin-top:.8rem;font-size:.85rem;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;text-align:center;padding:.3rem}
.linkleicht:hover{color:var(--acc)}

/* =============================================================
   FEINHEITEN
   ============================================================= */

/* Textauswahl in der Hausfarbe statt Browserblau */
::selection{background:color-mix(in srgb, var(--acc) 22%, transparent);color:var(--text)}

/* Die Anführungszeichen der Praxis-Regel hängen im Rand, damit der
   Text selbst an der Kante bündig steht — klassischer Satzdetail. */
.tipp__regel{position:relative}
.tipp__regel::before{position:absolute;left:-.55em;opacity:.55}

/* Zitate im Beitrag: das Zeichen als stille Marke dahinter */
.article__body blockquote{position:relative}
.article__body blockquote::before{content:'„';position:absolute;left:-.05em;top:-.35em;
  font-size:4rem;line-height:1;color:var(--acc);opacity:.13;pointer-events:none}


/* Links im Fließtext bekommen einen ruhigen Unterstrich statt Blau */
.article__body a:not(.btn),.legal a{color:var(--acc);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .25s var(--ease)}
.article__body a:not(.btn):hover,.legal a:hover{background-size:100% 2px}

/* Bilder im Beitrag bekommen eine feine Kante — sonst „schwimmen"
   helle Motive auf dem hellen Papier. */
.beitrag-bild img,.article__heroimg,.galerie img{
  outline:1px solid var(--line-soft);outline-offset:-1px}

/* Tabellen: die Zeile unter dem Zeiger wird ruhig hervorgehoben */
.beitrag-tabelle tbody tr{transition:background .18s var(--ease)}
.beitrag-tabelle tbody tr:hover{background:var(--bg-2)}

/* Die Fußzeile bekommt oben eine feine Lichtkante */
.footer{position:relative}
.footer::before{content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}

/* Sanftes Erscheinen beim ersten Laden — nur einmal, nicht bei jedem Scrollen */
@media (prefers-reduced-motion:no-preference){
  .hero__grid > *{animation:aufblenden .7s var(--ease) both}
  .hero__grid > *:nth-child(2){animation-delay:.12s}
  @keyframes aufblenden{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:none}
  }
}

/* -------------------------------------------------------------
   Kopfzeile auf schmalen Geräten
   Sobald der Burger erscheint, stehen Anmelden, Merkliste und
   „Vorhaben eintragen" ohnehin im aufklappbaren Menü. In der
   Leiste selbst haben sie keinen Platz mehr und schoben den
   Burger aus dem sichtbaren Bereich.
   ------------------------------------------------------------- */
@media (max-width:900px){
  .nav__side .nav__konto,
  .nav__side > .btn{display:none}
}
@media (max-width:560px){
  .nav__side .icon-btn[href]{display:none}   /* Merkliste — steht im Menü */
  .brand{min-width:0}
  .brand__mark{width:28px;height:28px}
  .brand__text{font-size:1.12rem}
  .brand__at{display:none}
}

/* -------------------------------------------------------------
   Leere Rubriken
   Eine junge Website hat naturgemäß leere Abschnitte. Ein ruhiger
   Kasten sagt, was dort hinkommt — besser als eine weiße Fläche
   unter einer Überschrift.
   ------------------------------------------------------------- */
.leerbox{grid-column:1/-1;display:grid;justify-items:center;gap:1rem;
  padding:2.6rem 1.5rem;text-align:center;
  border:1px dashed var(--line);border-radius:var(--r);background:var(--bg-2)}
.leerbox p{margin:0;max-width:46ch;color:var(--text-2);font-size:1rem;line-height:1.55;
  text-wrap:pretty}
.leerbox .btn{margin:0}
.miniradar__leer{margin:0;padding:1.4rem .2rem;color:var(--muted);font-size:.92rem;text-align:center}