/* ==========================================================
   ValueBoard Signal - Stylesheet
   Design-Tokens nach valueboard.app
   ========================================================== */
:root{
  --font-head:"Sora","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --blue:#2563EB;
  --blue-dark:#1D4ED8;
  --cyan:#22D3EE;

  /* Bewertungsskala 1 bis 6. Jede Stufe hat eine eigene Farbe.
     Die hellen Varianten stehen weiter unten je Farbmodus. */
  --maxw:1200px;
  --readw:70ch;
  --pad:clamp(16px,4vw,34px);
}

html[data-theme="dark"]{
  --bg:#060E1E;
  --bg-2:#0A1628;
  --surface:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.025);
  --card-grad:linear-gradient(to bottom right, rgba(34,211,238,.10), rgba(37,99,235,.07));
  --line:rgba(120,180,255,.16);
  --line-2:rgba(120,180,255,.09);
  --text:#FFFFFF;
  --t-70:rgba(255,255,255,.70);
  --t-55:rgba(255,255,255,.55);
  --t-40:rgba(255,255,255,.40);
  --chip:rgba(255,255,255,.05);
  --track:rgba(255,255,255,.10);
  --grid:rgba(120,180,255,.055);
  --glow-1:rgba(37,99,235,.40);
  --glow-2:rgba(34,211,238,.20);
  --accent-text:#60A5FA;
  --shadow:0 20px 60px rgba(0,0,0,.5);

  --s1:#15803D;
  --s2:#4ADE80;
  --s3:#FACC15;
  --s4:#FB923C;
  --s5:#F87171;
  --s6:#C084FC;
}

html[data-theme="light"]{
  --bg:#F8FAFF;
  --bg-2:#F0F4FF;
  --surface:#FFFFFF;
  --surface-2:rgba(37,99,235,.03);
  --card-grad:linear-gradient(to bottom right, rgba(34,211,238,.07), rgba(37,99,235,.05));
  --line:rgba(13,31,60,.12);
  --line-2:rgba(13,31,60,.07);
  --text:#0D1F3C;
  --t-70:rgba(13,31,60,.72);
  --t-55:rgba(13,31,60,.58);
  --t-40:rgba(13,31,60,.45);
  --chip:rgba(13,31,60,.045);
  --track:rgba(13,31,60,.10);
  --grid:rgba(37,99,235,.05);
  --glow-1:rgba(37,99,235,.16);
  --glow-2:rgba(34,211,238,.13);
  --accent-text:#1D4ED8;
  --shadow:0 16px 44px rgba(13,31,60,.09);

  /* Auf hellem Grund dunklere Varianten, sonst kippt der Kontrast. */
  --s1:#166534;
  --s2:#16A34A;
  --s3:#CA8A04;
  --s4:#EA580C;
  --s5:#DC2626;
  --s6:#9333EA;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .3s ease,color .3s ease;
}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:800; line-height:1.14; letter-spacing:-.025em; margin:0}
p{margin:0 0 1em}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px}
.skip{position:absolute; left:-9999px; top:0}
.skip:focus{left:8px; top:8px; z-index:99; background:var(--blue); color:#fff; padding:10px 16px; border-radius:8px}

/* Hintergrund-Dekor ---------------------------------------- */
.decor{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.decor .g{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 30%,transparent 78%);
}
.decor .b{position:absolute; border-radius:50%; filter:blur(100px)}
.decor .b1{width:min(74vw,820px); height:min(74vw,820px); top:-32vh; left:-16vw; background:var(--glow-1)}
.decor .b2{width:min(56vw,600px); height:min(56vw,600px); top:4vh; right:-18vw; background:var(--glow-2)}

.wrap{position:relative; z-index:1}
.shell{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}

/* Kopf ----------------------------------------------------- */
.masthead{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line-2);
}
.mast-in{display:flex; align-items:center; gap:14px; height:66px}
.logo{display:flex; align-items:center; gap:9px; margin-right:auto; min-width:0}
.logo img{height:26px; width:auto; display:block}
html[data-theme="light"] .logo .lg-dunkel{display:none}
html[data-theme="dark"]  .logo .lg-hell{display:none}
.logo .sig{
  font-family:var(--font-head); font-weight:700; font-size:15px; letter-spacing:-.02em;
  color:var(--t-40); padding-left:9px; border-left:1px solid var(--line); white-space:nowrap;
}

.mast-nav{display:none; gap:2px; align-items:center; margin-left:8px}
@media(min-width:1080px){.mast-nav{display:flex}}
.mast-nav a{
  font-size:13.5px; font-weight:600; color:var(--t-55);
  padding:8px 12px; border-radius:8px; transition:color .16s,background .16s; white-space:nowrap;
}
.mast-nav a:hover{color:var(--text); background:var(--chip)}
.mast-nav a[aria-current="true"]{color:var(--text); background:var(--chip)}

.mast-cta{
  display:none; flex:none; white-space:nowrap;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff;
  border-radius:999px; padding:9px 18px; font-size:13.5px; font-weight:600;
  box-shadow:0 4px 20px rgba(37,99,235,.4); transition:transform .14s;
}
.mast-cta:hover{transform:translateY(-1px)}
@media(min-width:700px){.mast-cta{display:inline-flex; align-items:center}}

.tgl{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; border:1px solid var(--line); background:var(--chip);
  border-radius:999px; transition:border-color .18s,transform .12s;
}
.tgl:hover{border-color:var(--blue); transform:translateY(-1px)}
.tgl svg{width:15px; height:15px; display:block}

/* Kopfband ------------------------------------------------- */
.band{
  background:linear-gradient(180deg,transparent 0%,var(--bg-2) 60%,transparent 100%);
  border-bottom:1px solid var(--line-2);
  padding:clamp(30px,5vw,60px) 0 clamp(26px,4vw,42px);
}
.kicker-pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:var(--chip); border-radius:999px;
  padding:6px 14px; font-size:11.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--t-70); margin-bottom:20px;
}
.kicker-pill .d{width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 10px var(--blue)}
.band h1{font-size:clamp(30px,5.4vw,53px); max-width:19ch}
.band h1 em{font-style:normal; color:var(--accent-text)}
.band .lead{font-size:clamp(16px,2.1vw,19px); line-height:1.62; color:var(--t-55); max-width:66ch; margin-top:18px}

.twocol{display:grid; gap:12px; margin-top:28px}
@media(min-width:780px){.twocol{grid-template-columns:1fr 1fr}}
.note{
  border:1px solid var(--line); border-radius:16px; padding:18px 20px;
  background:var(--surface); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
html[data-theme="light"] .note{box-shadow:var(--shadow)}
.note h2{font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; display:flex; align-items:center; gap:9px; margin-bottom:12px}
.note h2 .ic{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none}
.note h2 .ic svg{width:12px; height:12px; display:block}
.note.yes h2{color:var(--s2)} .note.yes .ic{background:rgba(74,222,128,.14); border:1px solid rgba(74,222,128,.35)}
.note.no  h2{color:var(--s5)} .note.no  .ic{background:rgba(248,113,113,.14); border:1px solid rgba(248,113,113,.35)}
.note ul{margin:0; padding-left:18px; font-size:14.5px; color:var(--t-55)}
.note li{margin-bottom:6px} .note li:last-child{margin-bottom:0}

.band.klein{padding:clamp(22px,3.5vw,38px) 0 clamp(18px,2.5vw,26px)}
.band.klein h1{font-size:clamp(26px,4vw,40px)}
.band.klein .lead{font-size:clamp(15px,1.9vw,17px); margin-top:12px; max-width:72ch}
.band.klein .kicker-pill{margin-bottom:14px}

/* Zielgruppen-Abschnitte ------------------------------------ */
.zg{margin-top:34px; scroll-margin-top:120px}
.zg:first-of-type{margin-top:24px}
.zg-kopf{display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line-2)}
.zg-ic{
  width:42px; height:42px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(34,211,238,.13));
  border:1px solid var(--line); color:var(--accent-text);
}
.zg-ic svg{width:22px; height:22px; display:block}
.zg-kopf h2{font-size:clamp(20px,2.6vw,26px); letter-spacing:-.03em}
.zg-kopf p{font-size:14px; color:var(--t-40); margin:3px 0 0}
.zg-zahl{
  margin-left:auto; flex:none; font-family:var(--font-head); font-weight:800; font-size:15px;
  color:var(--t-55); border:1px solid var(--line); border-radius:999px; padding:5px 13px;
}
.leer{font-size:14.5px; color:var(--t-40); border:1px dashed var(--line); border-radius:14px; padding:22px; margin:0}

/* Download-Band --------------------------------------------- */
.dl{margin:44px 0; padding-inline:var(--pad)}
.dl-in{
  max-width:var(--maxw); margin:0 auto; border-radius:20px; padding:clamp(24px,3.5vw,36px);
  background:linear-gradient(120deg,var(--blue),var(--blue-dark) 62%,#1E3A8A);
  display:flex; flex-wrap:wrap; align-items:center; gap:22px;
  box-shadow:0 18px 50px rgba(37,99,235,.32); position:relative; overflow:hidden;
}
.dl-in::after{
  content:""; position:absolute; right:-90px; top:-120px; width:340px; height:340px;
  border-radius:50%; background:rgba(34,211,238,.28); filter:blur(70px); pointer-events:none;
}
.dl-txt{flex:1; min-width:260px; position:relative}
.dl-txt h2{color:#fff; font-size:clamp(20px,2.6vw,27px); letter-spacing:-.03em}
.dl-txt p{color:rgba(255,255,255,.82); font-size:15px; line-height:1.6; margin:10px 0 0; max-width:62ch}
.dl-btn{
  position:relative; flex:none; display:inline-flex; align-items:center; gap:9px;
  background:#fff; color:#1D4ED8; border-radius:999px; padding:14px 24px;
  font-size:15px; font-weight:700; box-shadow:0 8px 26px rgba(0,0,0,.22); transition:transform .14s;
}
.dl-btn:hover{transform:translateY(-2px)}
.dl-btn svg{width:17px; height:17px; display:block}

/* Ressortleiste -------------------------------------------- */
.ressorts{
  position:sticky; top:66px; z-index:50;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2);
}
.ressorts-in{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding-block:8px}
.ressorts-in::-webkit-scrollbar{display:none}
.ressort{
  white-space:nowrap; font-size:13.5px; font-weight:700; color:var(--t-55);
  padding:8px 14px; border-radius:10px; transition:all .16s; flex:none;
}
.ressort:hover{color:var(--text); background:var(--chip)}
.ressort[aria-current="page"]{color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); box-shadow:0 4px 18px rgba(37,99,235,.35)}

/* Bereichsfilter ------------------------------------------- */
.subfilter{padding:18px 0 4px; display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start}
.subfilter .lab{font-size:11.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--t-40); padding-top:9px; flex:none}
.chips{display:flex; flex-wrap:wrap; gap:7px; flex:1; min-width:0}
@media(max-width:620px){
  .subfilter{flex-direction:column; gap:8px}
  .subfilter .lab{padding-top:0}
  .chips{width:100%}
}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); background:var(--chip); border-radius:999px;
  padding:7px 13px; font-size:13px; font-weight:600; color:var(--t-55); transition:all .16s;
}
.chip svg{width:14px; height:14px; display:block}
.chip:hover{color:var(--text); border-color:var(--blue)}
.chip[aria-current="page"]{background:linear-gradient(135deg,var(--blue),var(--blue-dark)); border-color:transparent; color:#fff; box-shadow:0 4px 16px rgba(37,99,235,.32)}
.resultline{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:16px 0; font-size:13px; color:var(--t-40); border-bottom:1px solid var(--line-2)}
.resultline b{color:var(--t-70)}

/* Artikelliste --------------------------------------------- */
.sec-title{font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--t-40); margin:28px 0 14px; display:flex; align-items:center; gap:12px}
.sec-title::after{content:""; flex:1; height:1px; background:var(--line-2)}

.teaser{
  display:block; border:1px solid var(--line); border-radius:16px; background:var(--card-grad);
  padding:20px; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
html[data-theme="light"] .teaser{background:var(--surface); box-shadow:var(--shadow)}
.teaser:hover{transform:translateY(-3px); border-color:rgba(96,165,250,.5); box-shadow:0 14px 40px rgba(37,99,235,.18)}
.teaser .kick{display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:11px}
.teaser .kick .cl{color:var(--accent-text)}
.teaser .kick .dt{color:var(--t-40); font-weight:600; letter-spacing:.04em}
.teaser h3{font-size:19px; letter-spacing:-.03em}
.teaser .dek{font-size:14.5px; color:var(--t-55); margin:9px 0 0}
.teaser .meta{margin-top:14px; padding-top:13px; border-top:1px solid var(--line-2); display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.tag{font-size:11px; font-weight:600; color:var(--t-40); border:1px solid var(--line-2); border-radius:999px; padding:3px 9px}
.more{margin-left:auto; font-size:13px; font-weight:700; color:var(--accent-text); display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.more svg{width:13px; height:13px; transition:transform .18s; display:block}
.teaser:hover .more svg{transform:translateX(3px)}

.lead-story{display:grid; gap:0; padding:0}
@media(min-width:900px){.lead-story{grid-template-columns:1.4fr .9fr}}
.lead-story .body{padding:clamp(22px,3vw,32px)}
.lead-story h3{font-size:clamp(23px,3.4vw,33px); letter-spacing:-.035em}
.lead-story .dek{font-size:16px; margin-top:12px}
.lead-story .side{
  border-left:1px solid var(--line-2); padding:clamp(22px,3vw,30px);
  display:flex; flex-direction:column; gap:16px; justify-content:center;
  background:var(--surface-2); border-radius:0 15px 15px 0;
}
@media(max-width:899px){.lead-story .side{border-left:0; border-top:1px solid var(--line-2); border-radius:0 0 15px 15px}}
.side-lab{font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--t-40)}
.side-val{font-size:14px; color:var(--t-70); margin-top:4px}

.grid3{display:grid; gap:14px}
@media(min-width:680px){.grid3{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.grid3{grid-template-columns:1fr 1fr 1fr}}

.empty{border:1px dashed var(--line); border-radius:16px; padding:46px 24px; text-align:center; color:var(--t-55); margin-top:20px}
.empty h2{font-size:18px; color:var(--text); margin-bottom:8px}

/* Druckanzeige --------------------------------------------- */
.druck{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.bars{display:flex; gap:3px}
.bars i{display:block; width:15px; height:6px; border-radius:2px; background:var(--track)}
.bars.lg i{width:34px; height:10px; border-radius:3px}
@media(max-width:460px){.bars.lg{width:100%} .bars.lg i{flex:1; width:auto}}
.dword{font-size:12.5px; font-weight:700}

/* Artikelseite --------------------------------------------- */
/* Auf Artikelseiten steht die Lesespalte mittig, sonst klebt der Text
   am linken Rand und die rechte Bildschirmhaelfte bleibt leer. */
.article{padding-top:28px; padding-bottom:10px}
.article .crumbs,
.article .head,
.article .byline,
.article .prose,
.article .disclaimer{margin-inline:auto}
.crumbs{font-size:12.5px; color:var(--t-40); display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:20px; max-width:var(--readw)}
.crumbs a{color:var(--t-55)}
.crumbs a:hover{color:var(--accent-text)}
.crumbs .sep{opacity:.5}

.head{max-width:var(--readw)}
/* Ohne Trennpunkte, sonst haengen sie beim Umbruch am Zeilenende. */
.head .kick{display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap; font-size:12px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; margin-bottom:16px}
.head .kick .cl{color:var(--accent-text)}
.head .kick .dt{color:var(--t-40); font-weight:600; letter-spacing:.04em}
.head h1{font-size:clamp(28px,4.9vw,45px); letter-spacing:-.035em}
.head .standfirst{font-size:clamp(17px,2.2vw,19.5px); line-height:1.6; color:var(--t-70); margin-top:18px}

.byline{
  display:flex; flex-wrap:wrap; margin-top:26px; max-width:var(--readw);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:14px 0;
}
.byline div{font-size:12.5px; color:var(--t-70); padding-right:18px; margin-right:18px; border-right:1px solid var(--line-2)}
.byline div:last-child{border-right:0; margin-right:0; padding-right:0}
.byline b{display:block; font-size:10.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--t-40); margin-bottom:2px}
@media(max-width:760px){
  .byline{flex-direction:column; gap:9px}
  .byline div{border-right:0; margin-right:0; padding-right:0; display:flex; gap:8px; align-items:baseline}
  .byline b{margin-bottom:0}
}

.prose{max-width:var(--readw); margin-top:28px; margin-inline:auto}
.prose h2{
  font-size:clamp(20px,2.8vw,25px); letter-spacing:-.03em; margin:36px 0 14px;
  display:flex; align-items:center; gap:11px;
}
.prose h2 .ic{
  width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,rgba(37,99,235,.22),rgba(34,211,238,.16));
  border:1px solid var(--line); color:var(--accent-text);
}
.prose h2 .ic svg{width:16px; height:16px; display:block}
.prose > p{font-size:17px; line-height:1.78; color:var(--t-70); margin-bottom:1.05em}

.panel{border:1px solid var(--line); border-radius:16px; background:var(--card-grad); padding:20px; margin:18px 0}
html[data-theme="light"] .panel{background:var(--surface); box-shadow:var(--shadow)}
@media(min-width:640px){.panel{padding:24px}}
.druckrow{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:13px}
.druckrow .w{font-family:var(--font-head); font-weight:800; font-size:20px; letter-spacing:-.02em}
.panel p{font-size:15px; line-height:1.7; color:var(--t-70); margin-bottom:.7em}
.panel p:last-child{margin-bottom:0}
.panel .fine{font-size:13px; color:var(--t-40)}

/* Lebensbereiche ------------------------------------------- */
.areas{display:grid; gap:10px}
@media(min-width:620px){.areas{grid-template-columns:1fr 1fr}}
.area{
  display:flex; gap:12px; border:1px solid var(--line-2); border-radius:13px;
  padding:13px 14px; background:var(--surface-2);
  color:inherit; text-decoration:none; transition:border-color .16s, background .16s;
}
.area:hover{border-color:var(--line); background:var(--chip)}
.area .nm span{color:var(--text)}
.area .ic{width:32px; height:32px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--chip); border:1px solid var(--line-2)}
.area .ic svg{width:16px; height:16px; display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.area .bd{min-width:0; flex:1}
.area .nm{font-size:13.5px; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:8px}
.dots{display:flex; gap:3px; flex:none}
.dots i{width:13px; height:4px; border-radius:2px; background:var(--track)}
.area .lv{font-size:11.5px; font-weight:700; margin-top:3px}
.area .wy{font-size:13px; color:var(--t-40); margin-top:3px; line-height:1.5}

/* Massnahmen ----------------------------------------------- */
.horizon{margin-top:22px}
.horizon:first-child{margin-top:0}
.horizon .ht{display:flex; align-items:center; gap:10px; margin-bottom:4px}
.horizon .ht h3{font-size:15.5px; letter-spacing:-.02em}
.horizon .ht .bg{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; border-radius:999px; padding:4px 10px; border:1px solid var(--line); color:var(--t-40); flex:none}
.horizon .hn{font-size:13.5px; color:var(--t-40); margin:0 0 11px}

.acc{border:1px solid var(--line-2); border-radius:13px; overflow:hidden; background:var(--surface-2)}
.acc + .acc{margin-top:8px}
.acc-btn{width:100%; text-align:left; display:flex; align-items:center; gap:11px; padding:13px 14px; font-size:15px; font-weight:600; transition:background .16s}
.acc-btn:hover{background:var(--chip)}
.acc-btn .pl{width:21px; height:21px; flex:none; border-radius:7px; border:1px solid var(--line); display:grid; place-items:center; transition:background .22s,border-color .22s}
.acc-btn .pl svg{width:11px; height:11px; display:block}
.acc-btn .pl .minus{display:none}
.acc[data-open="true"] .pl{background:linear-gradient(135deg,var(--blue),var(--blue-dark)); border-color:transparent; color:#fff}
.acc[data-open="true"] .pl .plus{display:none}
.acc[data-open="true"] .pl .minus{display:block}
.acc-panel{padding:2px 14px 15px; border-top:1px solid var(--line-2)}
.acc[data-open="false"] .acc-panel{display:none}
.who{margin-top:13px}
.who h4{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--t-40); display:flex; align-items:center; gap:7px; margin-bottom:5px}
.who h4 .d{width:5px; height:5px; border-radius:50%; background:var(--blue)}
.who p{font-size:14.5px; line-height:1.68; color:var(--t-70); margin:0}

.disclaimer{border:1px solid var(--line-2); border-radius:14px; padding:17px 19px; background:var(--surface-2); margin-top:26px; max-width:var(--readw)}
.disclaimer h2{font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--t-40); margin-bottom:9px}
.disclaimer p{font-size:13px; line-height:1.65; color:var(--t-40); margin-bottom:0}

.readnext{margin-top:34px}
.readnext .grid{display:grid; gap:12px; margin-top:12px}
@media(min-width:760px){.readnext .grid{grid-template-columns:1fr 1fr}}

/* Fuss ----------------------------------------------------- */
.site-foot{margin-top:56px; border-top:1px solid var(--line-2); background:linear-gradient(180deg,transparent,var(--bg-2)); padding:28px 0 34px}
.foot-top{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:baseline; justify-content:space-between}
.foot-claim{font-size:13.5px; color:var(--t-55); margin:0; max-width:52ch}
.foot-nav{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px}
.foot-nav a{color:var(--t-55)}
.foot-nav a:hover{color:var(--accent-text)}
.foot-bereiche{margin-top:20px; padding-top:16px; border-top:1px solid var(--line-2); display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px}
.foot-bereiche a{color:var(--t-40)}
.foot-bereiche a:hover{color:var(--accent-text)}
.site-foot .fine{margin:16px 0 0; font-size:12px; color:var(--t-40)}

/* Skala auf der Ueber-Seite --------------------------------- */
.skala{display:flex; flex-direction:column; gap:13px}
.skala-zeile{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap}
.skala-zeile .bars{flex:none; padding-top:3px}
/* Ohne feste Basis entscheidet die Textlaenge, ob die Zeile umbricht.
   Dann steht die Beschreibung mal neben und mal unter den Balken. */
.skala-zeile>div{flex:1 1 260px; min-width:0}
.skala-zeile b{font-size:14px; display:block}
/* Nur die Beschreibung im rechten Block, nicht der Balken selbst.
   Ein Regelsatz auf .skala-zeile span wuerde .bars ueberschreiben,
   weil er spezifischer ist, und die Segmente wuerden stapeln. */
.skala-zeile div span{font-size:13.5px; color:var(--t-55); display:block; margin-top:2px}
/* Nur Verweise im Fliesstext unterstreichen. Die Karten unter
   "Wen es wo trifft" sind ebenfalls Verweise und behalten ihr
   eigenes Aussehen. */
.prose p a{color:var(--accent-text); text-decoration:underline; text-underline-offset:3px}

/* Zielgruppe in der Artikelkopfzeile ------------------------ */
.head .kick .zg{display:inline-flex; align-items:center; gap:6px; color:var(--t-55)}
.head .kick .zg svg{width:14px; height:14px; display:block}

/* Fehlerseite ---------------------------------------------- */
.err{padding:clamp(50px,10vw,110px) 0; max-width:60ch}
.err h1{font-size:clamp(30px,6vw,52px)}
.err p{font-size:17px; color:var(--t-55); margin-top:16px}
.err .btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:24px;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff;
  border-radius:999px; padding:11px 20px; font-size:14px; font-weight:700;
  box-shadow:0 4px 20px rgba(37,99,235,.4);
}
.err .btn svg{width:15px; height:15px; display:block}

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


/* ===========================================================
   Nachtrag 2026-08-28: Artikel-Layout.

   Ein Grundsatz: Alles auf der Seite hat dieselbe Breite.
   Kopfzeile, Fliesstext, die Bausteine, der Rechtshinweis und
   die Quellen stehen auf derselben Kante, links wie rechts.
   Vorher lag der Text in einer schmalen Spalte, waehrend die
   Bausteine daneben ausbrachen. Das sah unruhig aus.

   Weil der Text damit breiter wird, ist die Schrift groesser
   und der Zeilenabstand hoeher. Ohne das waeren die Zeilen zu
   lang zum Lesen.
   =========================================================== */

:root{ --maxw:1040px; }

/* --- Eine Kante fuer alles ---------------------------------
   Diese Bausteine hatten vorher eigene Hoechstbreiten. Sie
   richten sich jetzt nach dem Rahmen der Seite. */
.crumbs,
.head,
.byline,
.teilen,
.ki-hinweis,
.prose,
.quellen,
.disclaimer{
  max-width:none;
  width:100%;
  margin-inline:0;
}
.disclaimer p{ max-width:none; }
.head .standfirst{ max-width:none; }

/* Auf dem Rechner groessere Schrift, damit die breiteren
   Zeilen lesbar bleiben. */
@media(min-width:1000px){
  .prose > p{ font-size:19.5px; line-height:1.74; }
  .head .standfirst{ font-size:20.5px; line-height:1.6; }
  .head h1{ letter-spacing:-.04em; }
}

/* --- Wen es wo trifft --------------------------------------
   Vorher lagen acht Karten in zwei sehr schmalen Spalten, in
   denen schon zwei Woerter umbrachen. */
@media(min-width:900px){ .areas{ grid-template-columns:repeat(3,1fr); gap:12px; } }

.area{ padding:15px 16px; align-items:flex-start; }
.area .nm{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; font-size:14px; line-height:1.3;
}
.area .nm > span:first-child{ min-width:0; }
.dots{ margin-top:4px; }
.area .lv{ margin-top:5px; }
.area .wy{ font-size:13px; line-height:1.5; margin-top:5px; }

/* --- Massnahmen: die drei Zeitraeume nebeneinander --------- */
@media(min-width:1000px){
  .prose .panel:has(> .horizon){
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start;
  }
  .prose .panel:has(> .horizon) > .horizon{ margin-top:0; }
}

/* --- Teilen-Leiste -----------------------------------------
   Steht jetzt direkt unter der Kopfzeile, wo man sie beim
   Lesen zuerst sieht, nicht erst ganz unten. */
.teilen{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  margin:18px 0 0;
}
.teilen .tl{
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--t-40); margin-right:4px;
}
.teilen a, .teilen button{
  display:inline-flex; align-items:center; gap:7px;
  font: inherit; font-size:13px; font-weight:600; line-height:1;
  padding:8px 13px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--t-70);
  cursor:pointer; transition:border-color .15s, color .15s, transform .15s;
}
.teilen a:hover, .teilen button:hover{
  border-color:var(--blue); color:var(--blue); transform:translateY(-1px);
}
.teilen svg{ width:15px; height:15px; display:block; }
.teilen .fertig{ color:var(--blue); border-color:var(--blue); }
@media(max-width:520px){ .teilen .tl{ width:100%; margin-bottom:2px; } }

/* --- Herkunft des Artikels --------------------------------- */
.ki-hinweis{
  display:flex; align-items:flex-start; gap:9px;
  margin-top:14px;
  font-size:12.5px; line-height:1.55; color:var(--t-40);
}
.ki-hinweis svg{ width:15px; height:15px; flex:none; margin-top:1px; }

/* --- Quellen ----------------------------------------------- */
.quellen{ margin-top:34px; padding-top:20px; border-top:1px solid var(--line); }
.quellen h2{
  display:inline-block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 9px; border:1px solid var(--line-2); border-radius:999px;
  color:var(--t-40); margin-bottom:12px;
}
.quellen ol{ margin:0; padding:0; list-style:none; display:grid; gap:8px; }
@media(min-width:820px){ .quellen ol{ grid-template-columns:1fr 1fr; gap:8px 30px; } }
.quellen li{ font-size:13px; line-height:1.5; color:var(--t-55); display:flex; gap:9px; }
.quellen li .n{ color:var(--t-40); font-variant-numeric:tabular-nums; flex:none; }
.quellen a{ color:var(--t-70); text-decoration:none; border-bottom:1px solid var(--line); }
.quellen a:hover{ color:var(--accent-text); border-bottom-color:currentColor; }
.quellen .fine{ font-size:12px; color:var(--t-40); margin:12px 0 0; }

/* --- Rechtshinweis ----------------------------------------- */
.disclaimer{
  margin-top:26px;
  padding:16px 18px; border-radius:12px;
  background:transparent; border:1px solid var(--line);
}
.disclaimer h2{
  display:inline-block; font-size:10.5px; letter-spacing:.12em;
  padding:3px 9px; border:1px solid var(--line-2); border-radius:999px;
  color:var(--t-40); margin-bottom:8px;
}
.disclaimer p{ font-size:12.5px; line-height:1.6; color:var(--t-40); }

/* Die allgemeine Regel .zg (Abstand ueber einem Abschnitt) trifft auch
   die Marke "Fuer dich privat" in der Kopfzeile. Dort gehoert kein
   Abstand hin, sonst rutscht sie in eine eigene Zeile. */
.head .kick .zg{ margin-top:0; }