:root{
  --ink:#14181C; --accent:#12324F; --accent2:#0E2740; --muted:#5A6672;
  --rule:#C9CFD6; --faint:#EEF1F4; --bg:#FFFFFF; --wash:#F5F7F9;
  --ph-bg:#FFF4D6; --ph-ink:#7A5B00; --maxw:1120px; --measure:70ch;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);
     background:var(--bg);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Vorschau-Banner: vor Livegang entfernen */
.preview{background:#B3261E;color:#fff;font-size:12.5px;letter-spacing:.04em;
         text-align:center;padding:6px 12px;text-transform:uppercase}

/* Header */
header.site{border-bottom:1px solid var(--rule);background:var(--bg);position:sticky;top:0;z-index:50}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:24px}
.wordmark{font-weight:700;letter-spacing:.18em;font-size:14.5px;color:var(--accent);white-space:nowrap}
nav.main{display:flex;gap:4px;align-items:center}
nav.main>div{position:relative}
nav.main a.top{display:block;padding:20px 14px;font-size:15px;color:var(--ink)}
nav.main a.top:hover{color:var(--accent);text-decoration:none}
nav.main a.top.aktiv{color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
nav.main .drop{display:none;position:absolute;left:0;top:100%;background:#fff;border:1px solid var(--rule);
               min-width:230px;box-shadow:0 8px 24px rgba(20,24,28,.08);padding:6px 0}
nav.main div:hover .drop{display:block}
nav.main .drop a{display:block;padding:9px 16px;font-size:14.5px;color:var(--ink)}
nav.main .drop a:hover{background:var(--wash);text-decoration:none;color:var(--accent)}
details.mnav{display:none}
@media(max-width:920px){
  nav.main{display:none}
  details.mnav{display:block}
  details.mnav summary{list-style:none;cursor:pointer;font-size:15px;padding:8px 0;color:var(--accent)}
  details.mnav summary::-webkit-details-marker{display:none}
  .mlist{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--rule);padding:8px 24px 16px}
  .mlist a{display:block;padding:10px 0;border-bottom:1px solid var(--faint);font-size:15.5px}
  .mlist a.sub{padding-left:18px;font-size:14.5px;color:var(--muted)}
}

/* Breadcrumb */
.crumbs{font-size:13px;color:var(--muted);padding:14px 0}
.crumbs a{color:var(--muted)}
.crumbs span{color:var(--ink)}

/* Hero */
.hero{background:linear-gradient(160deg,var(--accent) 0%,var(--accent2) 100%);color:#fff;
      padding:96px 0 88px}
.hero h1{font-size:clamp(34px,5vw,56px);line-height:1.12;letter-spacing:-.01em;font-weight:700;max-width:18ch}
.hero p.sub{font-size:clamp(17px,2.2vw,21px);margin-top:18px;max-width:46ch;color:#D7E0EA}
.btn{display:inline-block;margin-top:30px;background:#fff;color:var(--accent);font-weight:600;
     padding:13px 26px;font-size:15.5px;border:1px solid #fff}
.btn:hover{background:transparent;color:#fff;text-decoration:none}

/* Seitenkopf innen */
.pagehead{padding:56px 0 8px}
.pagehead h1{font-size:clamp(30px,4vw,44px);line-height:1.15;letter-spacing:-.01em}
.pagehead p.lede{font-size:19px;color:var(--muted);margin-top:14px;max-width:var(--measure)}

/* Sektionen */
section.sek{padding:40px 0}
section.sek.wash{background:var(--wash)}
.kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
        border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:26px}
.prose{max-width:var(--measure)}
.prose p{margin-bottom:16px}
.prose p:last-child{margin-bottom:0}

/* Kacheln */
.tiles{display:grid;gap:20px}
.tiles.c2{grid-template-columns:repeat(2,1fr)}
.tiles.c3{grid-template-columns:repeat(3,1fr)}
.tiles.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:920px){.tiles.c3,.tiles.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tiles.c2,.tiles.c3,.tiles.c4{grid-template-columns:1fr}}
.tile{border:1px solid var(--rule);padding:24px;background:#fff;display:flex;flex-direction:column;gap:10px}
.tile h3{font-size:17.5px}
.tile p{font-size:15px;color:var(--muted);flex-grow:1}
.tile a.more{font-size:14.5px;font-weight:600}
a.tilelink{display:block;color:inherit}
a.tilelink:hover{text-decoration:none;outline:1px solid var(--accent)}

/* Stat-Band */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule);background:#fff}
.stats>div{padding:26px 24px;border-left:1px solid var(--rule)}
.stats>div:first-child{border-left:none}
.stats .n{font-size:30px;font-weight:700;color:var(--accent);letter-spacing:-.01em}
.stats .c{font-size:14px;color:var(--muted);margin-top:6px}
@media(max-width:700px){.stats{grid-template-columns:1fr}.stats>div{border-left:none;border-top:1px solid var(--rule)}.stats>div:first-child{border-top:none}}

/* Sequenz */
.seq{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:920px){.seq{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.seq{grid-template-columns:1fr}}
.step{border-top:3px solid var(--accent);padding-top:14px}
.step .no{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.08em}
.step h3{font-size:16.5px;margin:6px 0 6px}
.step p{font-size:14.5px;color:var(--muted)}
.treppe{font-weight:700;color:var(--accent);font-size:18px;margin-bottom:26px}

/* Zitat */
.quote{background:var(--wash);border-left:4px solid var(--accent);padding:32px 36px;max-width:820px}
.quote p.q{font-size:20px;line-height:1.5;font-weight:500}
.quote p.who{margin-top:16px;font-size:14.5px;color:var(--muted)}

/* Akkordeon */
details.akk{border:1px solid var(--rule);border-bottom:none;background:#fff}
details.akk:last-of-type{border-bottom:1px solid var(--rule)}
details.akk summary{cursor:pointer;padding:18px 22px;font-weight:600;font-size:16.5px;list-style:none;position:relative}
details.akk summary::-webkit-details-marker{display:none}
details.akk summary:after{content:"+";position:absolute;right:22px;top:14px;font-size:22px;color:var(--accent)}
details.akk[open] summary:after{content:"\2212"}
details.akk .inner{padding:0 22px 20px;max-width:var(--measure)}
details.akk .inner p{margin-bottom:12px;font-size:15.5px}

/* Anker-Nav */
.anker{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 0;margin:8px 0 8px}
.anker a{font-size:14px;padding:6px 12px;background:var(--wash);color:var(--ink)}
.anker a:hover{background:var(--faint);text-decoration:none}

/* Personen */
.person{border:1px solid var(--rule);padding:28px;background:#fff}
.person h3{font-size:19px}
.person .rolle{color:var(--muted);font-size:15px;margin-top:2px;margin-bottom:14px}

/* Fussnoten */
.fns{border-top:1px solid var(--rule);margin-top:48px;padding:22px 0 8px}
.fns h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.fns ol{list-style:none;counter-reset:fn}
.fns li{counter-increment:fn;font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:6px;padding-left:26px;position:relative}
.fns li:before{content:counter(fn);position:absolute;left:0;top:0;font-weight:700;color:var(--accent)}
sup.fn{font-size:11px;line-height:0}
sup.fn a{color:var(--accent)}

/* Platzhalter */
.ph{background:var(--ph-bg);color:var(--ph-ink);padding:1px 6px;font-size:.86em;border:1px dashed #D9B44A}

/* Teaser */
.teaser{background:var(--accent);color:#fff;padding:44px 0}
.teaser .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.teaser p{font-size:19px;font-weight:600;max-width:60ch}
.teaser a{color:#fff;border:1px solid #fff;padding:11px 22px;font-size:15px;font-weight:600;white-space:nowrap}
.teaser a:hover{background:#fff;color:var(--accent);text-decoration:none}

/* Footer */
footer.site{border-top:1px solid var(--rule);margin-top:64px;background:var(--wash)}
.f1{display:flex;justify-content:space-between;gap:32px;padding:36px 0;flex-wrap:wrap}
.f1 nav{display:flex;gap:22px;flex-wrap:wrap}
.f1 a{color:var(--ink);font-size:14.5px}
.f1 .kontaktcol{font-size:14.5px;color:var(--muted)}
.f2{border-top:1px solid var(--rule);padding:16px 0;font-size:13px;color:var(--muted);
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.f2 a{color:var(--muted)}

/* Struktur-Diagramm */
.orgbox{border:1px solid var(--rule);background:#fff;padding:22px 26px;max-width:640px}
.orgbox h3{font-size:16.5px}
.orgbox p{font-size:14.5px;color:var(--muted);margin-top:4px}
.orgline{width:2px;height:26px;background:var(--rule);margin-left:44px}

/* Kontakt */
.adresse{font-style:normal;font-size:17px;line-height:1.7}

/* ---------- Design v2 ---------- */
:root{--navy:#0B1F33;--mid:#3D6489;--sky:#7FA6C9;--paper:#F2F5F8}
.preview{background:#8A5A00}
::selection{background:var(--accent);color:#fff}
h1,h2,h3{letter-spacing:-.012em}
.wordmark{display:flex;align-items:center;gap:10px}
.mark{width:18px;height:18px;display:inline-block;flex:none;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path fill="%2312324F" d="M0 13h4v5H0z M5 9h4v9H5z M10 5h4v13h-4z M15 1h3v17h-3z"/></svg>') no-repeat center/contain}
.hero{background:radial-gradient(1100px 640px at 82% -12%,#1C4066 0%,var(--navy) 58%);
  position:relative;overflow:hidden;padding:118px 0 102px}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="900"><g fill="none" stroke="%23FFFFFF" stroke-opacity="0.05" stroke-width="1.6"><circle cx="1080" cy="60" r="150"/><circle cx="1080" cy="60" r="280"/><circle cx="1080" cy="60" r="410"/><circle cx="1080" cy="60" r="540"/><circle cx="1080" cy="60" r="670"/><circle cx="1080" cy="60" r="800"/></g></svg>') right top no-repeat}
.hero h1{font-size:clamp(38px,5.4vw,64px);letter-spacing:-.02em}
.hero p.sub{color:#B9C9D9}
.btn{transition:background .18s,color .18s}
.pagehead{padding:64px 0 10px}
.pagehead h1{font-size:clamp(34px,4.4vw,50px)}
.pagehead h1:after{content:"";display:block;width:56px;height:4px;background:var(--accent);margin-top:18px}
section.sek.wash{background:var(--paper)}
.tile{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
a.tilelink:hover{outline:none}
a.tilelink:hover .tile{transform:translateY(-3px);box-shadow:0 10px 28px rgba(11,31,51,.10);border-color:var(--accent)}
.stats .n{font-size:34px}
.treppe{font-size:19px}
details.akk summary:hover{color:var(--accent)}
.teaser{background:linear-gradient(120deg,var(--navy),#1C4066);padding:56px 0}
footer.site{background:var(--navy);border-top:none;margin-top:72px}
.f1 a{color:#D7E2EC}
.f1 .kontaktcol{color:#9FB8CE}
.f2{border-top:1px solid #24466A;color:#9FB8CE}
.f2 a{color:#9FB8CE}
/* Infografiken */
.fig{border:1px solid var(--rule);background:#fff;padding:26px 26px 18px;margin:0}
.fig svg{width:100%;height:auto;display:block}
.fig figcaption{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.55}
.figs .fig{height:100%}
.figwrap{margin-bottom:26px}

/* ---------- Design v3: Start nach BHP-Muster ---------- */
.preview{background:#0E5A46}
.topbar{background:var(--navy);position:relative}
.tbrow{display:flex;align-items:center;justify-content:space-between;min-height:56px;position:static}
.wm-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;z-index:2}
.markw,.wm-center .mark{filter:brightness(0) invert(1)}
.tbutil{display:flex;gap:18px;align-items:center;font-size:13.5px;z-index:2}
.tbutil a{color:#fff}
.lang{color:#9FB8CE;letter-spacing:.06em}
details.drawer summary{list-style:none;cursor:pointer;padding:14px 10px 14px 0;display:flex;align-items:center;z-index:2}
details.drawer summary::-webkit-details-marker{display:none}
.burger{display:inline-block;width:22px;height:2px;background:#fff;position:relative}
.burger:before,.burger:after{content:"";position:absolute;left:0;width:22px;height:2px;background:#fff}
.burger:before{top:-7px}.burger:after{top:7px}
.dpanel{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--rule);box-shadow:0 18px 40px rgba(11,31,51,.16);z-index:70}
.dgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;padding:30px 24px 34px}
@media(max-width:820px){.dgrid{grid-template-columns:repeat(2,1fr)}}
.dhead{font-weight:700;color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:15.5px}
.dhead svg{width:20px;height:20px;flex:none}
.dgrid a{display:block;padding:5px 0;color:var(--ink);font-size:14.5px}
.dgrid a:hover{color:var(--accent);text-decoration:none}
header.site{border-bottom:none}
/* Statement-Band */
.statement{background:#fff;border-bottom:1px solid var(--rule);position:relative;z-index:3}
.strow{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:36px 0 28px;flex-wrap:wrap}
.statement h1{font-size:clamp(30px,3.8vw,46px);letter-spacing:-.015em}
.statement h1:after{display:none}
.stkick{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;display:block}
svg.ic{width:26px;height:26px;flex:none}
.ich{display:flex;align-items:center;gap:12px;margin-bottom:12px;color:var(--accent)}
.ich h2{font-size:clamp(24px,3vw,32px);color:var(--ink)}
.mcard .cicon{color:var(--accent);display:inline-flex;margin-bottom:2px}
.m-tall .cicon,.m-acc .cicon,.m-data .cicon{color:#9FB8CE}
a.more,.stlink{display:inline-flex;align-items:center;gap:8px}
a.more:after,.stlink:after{content:"\2192";transition:transform .18s ease;font-weight:700}
a.more:hover:after,.stlink:hover:after{transform:translateX(4px)}
a.more:hover,.stlink:hover{text-decoration:none}
.totop{left:22px;right:auto}
.tanband .more{color:var(--accent)}
.supply{background:var(--navy);color:#fff;padding:64px 0;text-align:center}
.supply-claim{font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-.01em}
.supply-sub{max-width:60ch;margin:16px auto 0;color:#B9C9D9;font-size:16.5px;line-height:1.6}
/* v5-Design: Bildrhythmus für Unterseiten */
.phero{line-height:0;background:var(--navy)}
.phero img{width:100%;height:clamp(260px,42vh,480px);object-fit:cover;display:block}
.phero figcaption{line-height:1.5;font-size:12.5px;color:var(--muted);padding:10px 24px;background:#fff;text-align:right}
.pull{background:radial-gradient(900px 480px at 80% -10%,#1C4066 0%,var(--navy) 60%);color:#fff;padding:64px 0;text-align:center}
.pull p{font-size:clamp(24px,3.4vw,40px);font-weight:700;max-width:28ch;margin:0 auto;letter-spacing:-.012em;line-height:1.25}
.pull .pquelle{font-size:13.5px;color:#9FB8CE;margin-top:16px;font-weight:400;letter-spacing:.06em}
.regionfig{border:1px solid var(--rule);background:#fff;padding:24px;max-width:640px}
.regionfig svg{width:100%;height:auto;display:block}
.regionfig figcaption{font-size:13px;color:var(--muted);margin-top:10px}
/* ---------- v4: 1:1 BHP-Maximaltest ---------- */
.preview{background:#5B2E8E}
.bslot{position:relative;background:repeating-linear-gradient(45deg,#E9EEF3,#E9EEF3 12px,#E2E8EE 12px,#E2E8EE 24px);border:1.5px dashed #9FB0C0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#5A6672;font-size:12.5px;text-align:center;padding:14px;width:100%}
.bslot b{font-size:14px;color:#12324F;letter-spacing:.08em}
.media .bslot{border-left:none;border-right:none}
.slottag{position:absolute;top:10px;right:12px;font-size:11px;color:#8AA5BF;border:1px dashed #4A6E93;padding:2px 8px;letter-spacing:.06em;z-index:3}
.quoteband{position:relative}
.avatar{position:relative}
.avtag{top:auto;bottom:-26px;right:50%;transform:translateX(50%);white-space:nowrap}
.ttabs{display:flex;gap:2px;margin-bottom:12px}
.tt{flex:1;text-align:center;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:7px 4px;background:#24466A;color:#9FB8CE}
.tt.aktiv{background:var(--accent);color:#fff}
.tbig{font-size:33px;font-weight:700;letter-spacing:-.01em}
.tsub{font-size:13px;color:#9FB8CE;margin-bottom:10px}
.tprow{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:start}
@media(max-width:760px){.tprow{grid-template-columns:1fr}}
.tprow .bslot{aspect-ratio:16/10}
.ein{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:920px){.ein{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ein{grid-template-columns:1fr}}
.ecard{border:1px solid var(--rule);background:#fff;display:flex;flex-direction:column;position:relative;color:inherit;transition:transform .18s ease,box-shadow .18s ease}
.ecard:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(11,31,51,.12);text-decoration:none}
.ecard .bslot{aspect-ratio:16/10;border-width:0 0 1.5px 0}
.badge{position:absolute;top:12px;left:12px;background:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:var(--rad);box-shadow:0 2px 8px rgba(11,31,51,.14);z-index:2}
.ecard h3{font-size:16px;padding:16px 18px 6px;flex-grow:1}
.ecard .more{padding:0 18px 18px;font-size:14px}
.tanrow{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
@media(max-width:820px){.tanrow{grid-template-columns:1fr}}
.tanrow .bslot{aspect-ratio:16/9}
.evrow{display:grid;grid-template-columns:auto 1fr 1fr;gap:20px;align-items:stretch}
@media(max-width:920px){.evrow{grid-template-columns:1fr}}
.evhead h2{font-size:clamp(22px,2.6vw,30px);border-left:4px solid var(--accent);padding-left:16px}
.evhead .more{margin-top:12px;margin-left:20px}
.ev{background:#fff;border:1px solid var(--rule);display:flex;align-items:stretch}
.evd{border-right:1px solid var(--rule);padding:20px 18px;text-align:center;min-width:112px;display:flex;flex-direction:column;justify-content:center}
.evd b{font-size:14px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.evd span{font-size:25px;font-weight:700;color:var(--accent)}
.evt{padding:18px 20px}
.evt h3{font-size:17px}
.evt p{font-size:14px;color:var(--muted);margin-top:4px}
.tbsearch{display:inline-flex;color:#fff;opacity:.85}
.tbsearch svg{width:19px;height:19px}
.social{display:flex;align-items:center;gap:10px}
.soc{display:inline-flex;width:30px;height:30px;border:1px solid #24466A;border-radius:50%;align-items:center;justify-content:center;color:#9FB8CE}
.soc svg{width:15px;height:15px}
img.bimg{display:block;width:100%;object-fit:cover}
.logo{display:block;height:40px;width:auto}
.topbar .logo{height:44px}
.hero-video{position:relative;line-height:0;background:#0B1F33}
.hv-video{display:block;width:100%;height:clamp(360px,60vh,660px);object-fit:cover}
.tpanel{max-width:74ch}
.media img.bimg{aspect-ratio:auto !important;height:clamp(320px,54vh,580px)}
.mx-imgzone img.bimg{aspect-ratio:auto !important;height:100%;min-height:300px;flex-grow:1}
.ecard img.bimg{border-bottom:1.5px solid #C9CFD6}
/* v4b: Referenz-Mosaik und Vertikale */
.m-tall{background:#E8EEF4;color:var(--ink);border:none;justify-content:flex-start;min-height:520px}
.m-tall h3{color:var(--ink)}
.m-tall p{color:var(--muted)}
.m-tall .more,.m-tall .cicon{color:var(--accent)}
.m-tall .bslot{margin:18px -28px -28px;width:auto;flex-grow:1;aspect-ratio:auto;min-height:280px;border-width:1.5px 0 0 0}
.m-tan{background:#EFEAE2;border:none}
.m-tan p{color:#5A5648}
.hbin{padding:40px 0 8px;margin-top:26px;border-top:1px solid var(--rule)}
.seq3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.seq3{grid-template-columns:1fr}}
/* v4c: Referenz-Mosaik exakt */
.mosaic{grid-template-columns:1.05fr 1fr 1fr;gap:18px;grid-auto-rows:minmax(280px,auto)}
.mcard{padding:34px 32px}
.mhead{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.mhead h3{font-size:22px;line-height:1.25}
.mhead .cicon svg{width:30px;height:30px}
.mcard p{font-size:15px;line-height:1.65}
.arrw{font-size:23px;font-weight:700;color:var(--accent);margin-top:16px;display:inline-block;transition:transform .18s ease}
.mcard:hover .arrw{transform:translateX(6px)}
.m-acc .arrw{color:#fff}
.m-tall{min-height:580px;padding-bottom:0}
.m-tall .arrw{color:var(--accent)}
.m-tall .bslot{margin:20px -32px 0;width:auto;flex-grow:1;aspect-ratio:auto;min-height:300px;border-width:1.5px 0 0 0}
.m-data{padding:0;overflow:hidden}
.m-data .ttabs{margin:0}
.tt{padding:13px 6px}
.tkr{padding:28px 24px;text-align:center;display:flex;flex-direction:column;gap:9px;justify-content:center;flex-grow:1}
.tbig{font-size:46px;text-align:center;letter-spacing:-.02em}
.tsub{text-align:center;margin:0;font-size:13.5px}
.tdelta{color:#7FA6C9;font-weight:700;font-size:17.5px}
.tstamp{color:#9FB8CE;font-size:12.5px}
.tanlede{font-weight:700;font-size:19px;color:#2E2A1F}
/* Fussnoten als ruhiges, aufklappbares Modul */
sup.fn a{color:var(--muted)}
.fnbox{border-top:1px solid var(--rule);margin-top:56px}
.fnbox summary{cursor:pointer;padding:18px 0;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);list-style:none;display:flex;align-items:center;gap:10px}
.fnbox summary::-webkit-details-marker{display:none}
.fnbox summary:after{content:"+";font-size:16px;color:var(--accent)}
.fnbox[open] summary:after{content:"\2212"}
.fnbox summary:hover{color:var(--accent)}
.fnl{list-style:none;counter-reset:fn;padding:2px 0 20px}
.fnl li{counter-increment:fn;font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:6px;padding-left:26px;position:relative}
.fnl li:before{content:counter(fn);position:absolute;left:0;top:0;font-weight:700;color:var(--accent)}
/* ---------- MX: isolierte Mosaik-Komponente ---------- */
.mx{padding:44px 0;background:#F2F5F8}
.mx-grid{display:grid;grid-template-columns:1.05fr 1fr 1fr;grid-template-rows:repeat(2,minmax(300px,auto));gap:16px}
@media(max-width:920px){.mx-grid{grid-template-columns:1fr 1fr;grid-template-rows:none}}
@media(max-width:600px){.mx-grid{grid-template-columns:1fr}}
.mx-card{position:relative;display:flex;flex-direction:column;padding:34px 32px;background:#fff;border:1px solid #C9CFD6;color:#14181C}
.mx-cover{position:absolute;inset:0;z-index:2}
.mx-card:hover{box-shadow:0 10px 28px rgba(11,31,51,.12)}
.mx-card p{font-size:15px;line-height:1.65;color:#5A6672;margin:0;text-decoration:none}
.mx-h{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.mx-h svg{width:30px;height:30px;flex:none;color:#12324F}
.mx-h h3{font-size:22px;line-height:1.25;margin:0;color:#14181C}
.mx-arr{font-size:23px;font-weight:700;color:#12324F;margin-top:16px;transition:transform .18s ease;display:inline-block}
.mx-card:hover .mx-arr{transform:translateX(6px)}
.mx-tall{grid-row:1/3;background:#E8EEF4;border:none;padding-bottom:0}
@media(max-width:920px){.mx-tall{grid-row:auto}}
.mx-imgzone{margin:20px -32px 0;flex-grow:1;display:flex}
.mx-imgzone .bslot{border-width:1.5px 0 0 0;aspect-ratio:auto;min-height:300px}
.mx-acc{background:#12324F;border:none}
.mx-acc .mx-h h3,.mx-acc .mx-arr{color:#fff}
.mx-acc .mx-h svg{color:#fff}
.mx-acc p{color:#CBD9E6}
.mx-tan{background:#EFEAE2;border:none}
.mx-tan p{color:#5A5648}
.mx-tick{padding:0;background:#0B1F33;border:none;color:#fff;overflow:hidden}
.mx-tabs{display:flex}
.mx-tabs span{flex:1;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:14px 6px;background:#2A3540;color:#B9C2CC}
.mx-tabs .on{background:#12324F;color:#fff}
.mx-tbody{flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:10px;text-align:center;padding:32px 24px}
.mx-num{font-size:48px;font-weight:700;letter-spacing:-.02em}
.mx-lbl{font-size:13.5px;color:#9FB8CE}
.mx-up{font-size:20px;font-weight:700;color:#fff}
.mx-tri{color:#3AA35C;font-size:14px}
.mx-asof{font-size:12.5px;color:#9FB8CE}
.mx-band{margin-top:16px;background:#E8EBEF;padding:48px 40px 56px;position:relative;overflow:hidden;min-height:380px}
.mx-btxt{position:relative;z-index:2;max-width:46ch}
.mx-band h2{font-size:clamp(24px,3vw,32px);margin:0;color:#14181C}
.mx-band p{color:#5A6672;margin:14px 0}
.mx-band svg{position:absolute;right:3%;bottom:-52%;width:min(54vw,640px);opacity:.95}
@media(max-width:820px){.mx-band{min-height:0;padding-bottom:40px}.mx-band svg{position:static;width:78%;max-width:330px;margin-top:22px;display:block}}
.mx-link{font-weight:700;color:#12324F}
.mx-acc sup.fn a,.mx-tick sup.fn a{color:#9FB8CE}
/* v5: Header rechts, ruhiger Fliesstext */
.topbar .wordmark{color:#fff}
.wm-left{position:static;transform:none}
details.drawer summary{padding:14px 0 14px 12px;display:flex;gap:11px;align-items:center;color:#fff}
.mtxt{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#D7E2EC}
p sup.fn{display:none}
.statement p.sub2{color:var(--muted);font-size:17.5px;margin-top:10px}
.stlink{font-weight:700;white-space:nowrap;font-size:15.5px}
.notch{position:absolute;left:7%;bottom:-10px;width:20px;height:20px;background:#fff;transform:rotate(45deg);box-shadow:2px 2px 0 rgba(20,24,28,.06)}
/* Medienband */
.media{background:var(--navy);overflow:hidden;line-height:0}
.media svg{width:100%;height:auto;display:block}
/* Zentrierter Fokusblock */
.centerblock{padding:68px 0 64px;text-align:center}
.centerblock h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.015em}
.centerblock p{color:var(--muted);max-width:66ch;margin:14px auto 0;font-size:16.5px}
.btn-o{display:inline-block;border:1.5px solid var(--accent);color:var(--accent);padding:11px 26px;font-weight:600;font-size:15px;margin-top:26px;transition:background .18s,color .18s}
.btn-o:hover{background:var(--accent);color:#fff;text-decoration:none}
/* Zitatband */
.quoteband{background:linear-gradient(100deg,rgba(11,31,51,.95) 0%,rgba(11,31,51,.82) 55%,rgba(23,58,92,.6) 100%),url('img/bild-01.jpg') center/cover no-repeat;color:#fff;padding:76px 0}
.qrow{display:flex;gap:44px;align-items:center}
@media(max-width:760px){.qrow{flex-direction:column;align-items:flex-start}}
.avatar{width:148px;height:148px;border-radius:50%;background:#24466A;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:700;color:#D7E2EC;flex:none;letter-spacing:.02em}
.qmark{font-size:60px;color:var(--sky);line-height:.5;display:block;margin-bottom:16px;font-weight:700}
.quoteband p.q{font-size:clamp(19px,2.3vw,25px);font-weight:600;line-height:1.5;max-width:36ch}
.qwho{margin-top:20px;font-size:15px;color:#B9C9D9}
.qwho b{display:block;color:#fff;font-size:16.5px}
.quoteband a.qlink{color:#fff;font-weight:600;display:inline-block;margin-top:14px;border-bottom:1px solid var(--sky)}
/* Mosaik */
.mosaic{display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-auto-rows:minmax(200px,auto);gap:16px}
@media(max-width:920px){.mosaic{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.mosaic{grid-template-columns:1fr}}
.mcard{padding:28px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--rule);background:#fff;position:relative;transition:transform .18s ease,box-shadow .18s ease}
.mcard:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(11,31,51,.12)}
.mcard h3{font-size:19px}
.mcard p{font-size:14.5px;color:var(--muted);flex-grow:1}
.mcard .more{font-weight:700;font-size:14.5px}
.m-tall{grid-row:span 2;background:var(--navy) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="800"><g fill="none" stroke="%23FFFFFF" stroke-opacity=".07" stroke-width="1.4"><circle cx="520" cy="120" r="90"/><circle cx="520" cy="120" r="180"/><circle cx="520" cy="120" r="270"/><circle cx="520" cy="120" r="360"/><circle cx="520" cy="120" r="450"/><circle cx="520" cy="120" r="540"/></g></svg>') right top no-repeat;border:none;color:#fff;justify-content:flex-end;min-height:430px}
.m-tall p{color:#B9C9D9}
.m-tall .more,.m-acc .more{color:#fff}
.m-tall .mkick,.m-acc .mkick{color:#9FB8CE}
.mkick{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.m-acc{background:var(--accent);border:none;color:#fff}
.m-acc p{color:#CBD9E6}
.m-data{background:var(--navy);border:none;color:#fff}
.m-data .drow{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #24466A;padding:9px 0;font-size:13.5px;color:#9FB8CE}
.m-data .drow b{color:#fff;font-size:17px;font-weight:700}
.m-data .drow:last-of-type{border-bottom:none}
.m-data a{color:#fff;font-weight:600;font-size:14px}
.m-data .fns-inline a{color:#9FB8CE}
/* Regions-Band mit Punktglobus */
.halfband{background:var(--paper)}
.hbrow{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center;padding:56px 0}
@media(max-width:820px){.hbrow{grid-template-columns:1fr}}
.hbrow h2{font-size:clamp(24px,3vw,32px)}
.hbrow p{color:var(--muted);margin-top:12px;font-size:16px;max-width:56ch}
.hbrow svg{width:100%;height:auto;max-width:420px;justify-self:end}
@media(max-width:820px){.hbrow svg{justify-self:start;max-width:320px}}
/* Tabs */
.tabsek{padding:56px 0}
.tabs input{position:absolute;opacity:0;pointer-events:none}
.tabbox{background:#fff;border:1px solid var(--rule)}
.tablist{display:flex;gap:28px;border-bottom:1px solid var(--rule);padding:0 24px;flex-wrap:wrap}
.tablist label{padding:16px 2px 13px;cursor:pointer;font-weight:600;font-size:15px;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.tablist label:hover{color:var(--accent)}
.tpanel{display:none;padding:28px 24px;font-size:16px;max-width:70ch}
.tpanel p{color:var(--ink)}
.tpanel .more{display:inline-block;margin-top:14px;font-weight:700;font-size:14.5px}
#ta1:checked ~ .tabbox label[for=ta1],#ta2:checked ~ .tabbox label[for=ta2],#ta3:checked ~ .tabbox label[for=ta3],#ta4:checked ~ .tabbox label[for=ta4]{color:var(--accent);border-color:var(--accent)}
#ta1:checked ~ .tabbox .tp1,#ta2:checked ~ .tabbox .tp2,#ta3:checked ~ .tabbox .tp3,#ta4:checked ~ .tabbox .tp4{display:block}
/* Dokumente-Band */
.tanband{background:#EFEAE2;padding:58px 0}
.tanband h2{font-size:clamp(24px,3vw,32px)}
.tanband p{color:#5A5648;margin-top:12px;max-width:62ch;font-size:16px}
.tanband .more{font-weight:700;display:inline-block;margin-top:16px}
/* Helium-Brief-Band */
.nlband{background:var(--paper);padding:54px 0}
.nlrow{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.nlrow h2{font-size:clamp(22px,2.6vw,30px)}
.nlrow p{color:var(--muted);margin-top:8px;max-width:52ch;font-size:15.5px}
.nlform{display:flex;gap:12px;flex-wrap:wrap}
.nlform input{border:1px solid var(--rule);padding:12px 14px;min-width:260px;font-size:15px;background:#fff}
/* Footer v3 */
.fwrap{display:flex;justify-content:space-between;gap:44px;padding:46px 0;flex-wrap:wrap}
.fbrand .wordmark{color:#fff}
.fcopy{color:#9FB8CE;font-size:13px;margin-top:14px}
.fcols{display:flex;gap:72px}
.fcols a{display:block;color:#D7E2EC;padding:6px 0;font-size:14.5px}
.fcols a:hover{color:#fff}
.fbot{border-top:1px solid #24466A;padding:16px 0;display:flex;justify-content:space-between;color:#9FB8CE;font-size:13px;flex-wrap:wrap;gap:10px}
.fbot a{color:#9FB8CE}
.totop{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:19px;box-shadow:0 6px 18px rgba(11,31,51,.14);z-index:60}
.totop:hover{text-decoration:none;background:var(--accent);color:#fff}

/* ============================================================
   DESIGN-DIREKTIVE v1.1 · Stufenskala 72 / 44 / 24 / 18 / 13
   Scope: body.pg-v2. Nach Abnahme global ziehen.
   ============================================================ */
.pg-v2 .pagehead{padding:92px 0 0}
.pg-v2 .pagehead h1{font-size:clamp(40px,5vw,72px);line-height:1.04;letter-spacing:-.025em}
.pg-v2 .pagehead p.lede{font-size:21px;line-height:1.5;margin-top:24px;max-width:58ch;padding-bottom:72px}

/* Stufe 3: Sektionstitel ersetzt das 13px-Versallabel */
.pg-v2 .kicker{font-size:24px;font-weight:700;letter-spacing:-.012em;text-transform:none;color:var(--navy);margin-bottom:22px}

/* Stufe 4: Fliesstext, eine Zeilenhoehe */
.pg-v2 .prose{max-width:66ch}
.pg-v2 .prose p{font-size:18px;line-height:1.6}
.pg-v2 .sek > .wrap > p{max-width:66ch}
.pg-v2 .tile h3{font-size:18px;letter-spacing:-.01em}
.pg-v2 .tile p{font-size:16px;line-height:1.55}

/* Regel 2: Sektionen atmen */
.pg-v2 .sek{padding:84px 0}

/* Regel 4: ein bildschirmfuellendes Bild */
.pg-v2 .phero img{height:min(90vh,900px)}

/* Statement-Archetyp, Stufe 2, eigener Screen */
.pg-v2 .supply{padding:0;display:flex;align-items:center;min-height:94vh}
.pg-v2 .supply > .wrap{width:100%}
.pg-v2 .supply-claim{font-size:clamp(32px,4.8vw,64px);line-height:1.06;max-width:18ch;margin:0 auto}
.pg-v2 .supply-sub{font-size:18px;line-height:1.6;max-width:62ch;margin-top:30px}

/* Statement im Fliess: Stufe 2 */
.pg-v2 .claimsek{min-height:88vh;display:flex;align-items:center;padding:84px 0}
.pg-v2 .claimsek > .wrap{width:100%}
.pg-v2 .lead-claim{font-size:clamp(28px,3.6vw,44px);font-weight:700;letter-spacing:-.018em;line-height:1.16;color:var(--navy);max-width:24ch;margin-bottom:40px}

/* Regel 5: Zahlen auf Stufe 2 */
.pg-v2 .stats > div{padding:44px 30px}
.pg-v2 .stats .n{font-size:44px;letter-spacing:-.02em;line-height:1.05}
.pg-v2 .stats .c{font-size:15.5px;line-height:1.55;margin-top:14px}

@media (max-width:780px){
  .pg-v2 .sek{padding:56px 0}
  .pg-v2 .claimsek{min-height:auto;padding:56px 0}
  .pg-v2 .supply{min-height:auto;padding:64px 0}
  .pg-v2 .lead-claim{max-width:none;margin-bottom:28px}
}
@media (prefers-reduced-motion:reduce){
  .pg-v2 *{animation:none!important;transition:none!important}
}

/* Skala schliessen: genau fuenf Stufen 72/44/24/18/13 */
.pg-v2 .supply-claim{font-size:clamp(34px,5vw,72px)}
.pg-v2 .pagehead p.lede{font-size:24px;line-height:1.45}
.pg-v2 .tile p{font-size:18px;line-height:1.6}
.pg-v2 .step h3{font-size:24px;letter-spacing:-.012em;margin-bottom:8px}
.pg-v2 .step p{font-size:18px;line-height:1.6}
.pg-v2 .teaser p{font-size:24px;line-height:1.35;letter-spacing:-.01em}
.pg-v2 .teaser a{font-size:18px}
.pg-v2 .anker a{font-size:13px}
.pg-v2 .bslot b{font-size:13px}
.pg-v2 .bslot span{font-size:13px}
.pg-v2 .stats .c{font-size:18px;line-height:1.6}
.pg-v2 .supply-sub{line-height:1.6}
.pg-v2 .prose p,.pg-v2 .tile p,.pg-v2 .step p,.pg-v2 .stats .c,.pg-v2 .supply-sub{line-height:1.6}

/* Regel 6 scharf stellen: Satzspiegel und letzte Streugroesse */
.pg-v2 .prose{max-width:60ch}
.pg-v2 .sek > .wrap > p{max-width:60ch}
.pg-v2 .supply-sub{max-width:56ch}
.pg-v2 .prose a,.pg-v2 .prose a strong{font-size:18px}

.pg-v2 .sek > .wrap > p{font-size:18px;line-height:1.6}

/* ============================================================
   HERO-KOMPONENTE nach Draft 25.07.2026
   Gilt fuer alle Seiten mit Hero. Stufe 1 = 104 px bei 1440.
   Variante .on-dark fuer dunkle Bilder (weisse Headline).
   ============================================================ */
.pagehero{position:relative;background:var(--navy)}
.pagehero-media{position:relative;line-height:0}
.pagehero-media img,.pagehero-media video{width:100%;height:clamp(360px,55vw,820px);object-fit:cover;display:block}
.pagehero.on-dark .pagehero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,18,31,.62) 0%,rgba(6,18,31,.18) 34%,rgba(6,18,31,0) 62%)}
.pagehero-title{position:absolute;left:0;right:0;bottom:clamp(24px,3.6vw,52px);z-index:2}
.pagehero-title h1{font-size:clamp(44px,7.2vw,104px);line-height:.96;letter-spacing:-.032em;
  color:var(--navy);margin:0}
.pagehero.on-dark .pagehero-title h1{color:#fff}

.pagehero-lede{background:#fff}
.pagehero-lede > .wrap{padding-top:clamp(38px,4.8vw,72px);padding-bottom:clamp(30px,3.6vw,54px)}
.pagehero-lede p{font-size:clamp(24px,3vw,44px);font-weight:700;letter-spacing:-.02em;
  line-height:1.28;color:var(--navy);max-width:30ch;margin:0}
.pagehero-lede p .fn a{font-size:.42em;font-weight:400;vertical-align:super}
.pagehero-lede .subline{font-size:18px;font-weight:400;line-height:1.6;color:var(--muted);
  max-width:60ch;margin-top:22px;letter-spacing:0}

/* Kopfleiste: Wortmarke links, Burger rechts, kein Textlabel */
.topbar .mtxt{display:none}
.drawer > summary{gap:0}

@media (max-width:780px){
  .pagehero-media img,.pagehero-media video{height:clamp(300px,72vw,520px)}
  .pagehero-lede p{max-width:none}
}

/* Regel-Anpassung: Fliesstext unter dem Statement auf Stufe 3, halbfett */
.pg-v2 .supply-sub{font-size:24px;font-weight:600;line-height:1.45;max-width:44ch;letter-spacing:-.008em}

/* Kopfleiste auf Draft-Hoehe 70 px */
.topbar .tbrow{min-height:70px}

/* Rundungsartefakt schliessen: Hero-Lede exakt auf Stufe 3 (44) */
.pagehero-lede p{font-size:clamp(24px,3.1vw,44px)}

/* Eine Zeilenhoehe je Stufe: Stufe 3 (44px) einheitlich 1.3 */
.pagehero-lede p{line-height:1.3}
.pg-v2 .lead-claim{line-height:1.3}

/* ============================================================
   HERO v2 (25.07.2026): weisser Verlauf ueber dem Bild,
   unten deckend, bei 60 Prozent Hoehe transparent.
   Titel dadurch in Navy, Uebergang in die weisse Lede-Flaeche.
   ============================================================ */
.pagehero .pagehero-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.97) 10%,
    rgba(255,255,255,.72) 28%,
    rgba(255,255,255,.34) 44%,
    rgba(255,255,255,0) 60%)}
.pagehero .pagehero-title h1{color:var(--navy)}
/* Variante fuer Bilder, die keinen Verlauf tragen */
.pagehero.on-dark .pagehero-media::after{
  background:linear-gradient(to top,rgba(6,18,31,.62) 0%,rgba(6,18,31,.18) 34%,rgba(6,18,31,0) 62%)}
.pagehero.on-dark .pagehero-title h1{color:#fff}

/* Kopfleiste: Wortmarke auf 60 Prozent, Menue als zwei Balken */
.topbar .logo{height:26px}
.burger{width:24px}
.burger:before{top:-6px}
.burger:after{content:none;display:none}

/* Hero v3: Verlauf unten auf 60 Prozent Deckung, oben null, Reichweite auf 72 Prozent */
.pagehero .pagehero-media::after{
  background:linear-gradient(to top,
    rgba(255,255,255,.60) 0%,
    rgba(255,255,255,.58) 12%,
    rgba(255,255,255,.45) 34%,
    rgba(255,255,255,.22) 54%,
    rgba(255,255,255,0) 72%)}

/* Hero v4: untere Kante auf 75 Prozent Deckung */
.pagehero .pagehero-media::after{
  background:linear-gradient(to top,
    rgba(255,255,255,.75) 0%,
    rgba(255,255,255,.72) 12%,
    rgba(255,255,255,.56) 34%,
    rgba(255,255,255,.27) 54%,
    rgba(255,255,255,0) 72%)}

/* Pull-Zitat als bildschirmfuellendes Statement, Stufe 2 */
.pg-v2 .pull{padding:0;display:flex;align-items:center;min-height:94vh;background:var(--navy);color:#fff}
.pg-v2 .pull > .wrap{width:100%}
.pg-v2 .pull p{font-size:clamp(34px,5vw,72px);font-weight:700;letter-spacing:-.022em;
  line-height:1.06;max-width:18ch;margin:0 auto;color:#fff}
.pg-v2 .pull .pquelle{font-size:18px;font-weight:600;line-height:1.45;color:#B9C9D9;
  max-width:44ch;margin:30px auto 0;letter-spacing:0}
/* Diagrammsektion: Figur bekommt Luft */
.pg-v2 .figwrap{margin:28px 0 34px}
.pg-v2 .step .no{font-size:13px;letter-spacing:.14em}

/* Zahlenband: eigener Screen, Kennzahlen auf Stufe 2 */
.pg-v2 .arch-zahlen .stats{margin-top:34px}
.pg-v2 .arch-zahlen .stats > div{padding:48px 30px}

.pg-v2 .inner p{font-size:18px;line-height:1.6}

/* Text-Hero fuer Rechtsseiten: kein Bild, Titel auf Stufe 1 */
.pagehero-text{background:#fff;padding:clamp(72px,9vw,140px) 0 clamp(38px,4.6vw,68px)}
.pagehero-text h1{font-size:clamp(44px,7.2vw,104px);line-height:.96;letter-spacing:-.032em;color:var(--navy);margin:0}

/* Personen- und Organisationskarten auf die Skala */
.pg-v2 .person h3{font-size:24px;letter-spacing:-.012em}
.pg-v2 .person .rolle{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pg-v2 .person p{font-size:18px;line-height:1.6}
.pg-v2 .orgbox h3{font-size:24px;letter-spacing:-.012em}
.pg-v2 .orgbox p{font-size:18px;line-height:1.6;max-width:60ch}

/* Kachelraster als Index bekommt Luft */
.pg-v2 .arch-tiles{padding:116px 0}

/* Startseite: nur der Hero folgt der Komponente, der Rest bleibt unangetastet */
.pg-home .pagehero-lede .stlink{font-size:18px;font-weight:600}
.pg-home .pagehero-lede .subline{margin-top:18px}

/* ============================================================
   HERO v5, Test 25.07.2026: kein Verlauf, weisse Schrift.
   Bild bleibt unverfaelscht, Titel steht direkt darauf.
   ============================================================ */
.pagehero .pagehero-media::after{background:none}
.pagehero .pagehero-title h1{color:#fff}

/* ============================================================
   HERO v6, verbindlich ab 25.07.2026
   Kein weisser Verlauf. Bild bleibt unverfaelscht sichtbar.
   Titel in Weiss, darunter eine dezente Abdunklung nur im
   unteren Viertel, damit der Titel auf jedem Motiv traegt.
   ============================================================ */
.pagehero .pagehero-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(6,18,31,.72) 0%,
    rgba(6,18,31,.58) 10%,
    rgba(6,18,31,.30) 22%,
    rgba(6,18,31,.08) 34%,
    rgba(6,18,31,0) 46%)}
.pagehero .pagehero-title h1{color:#fff}
.pagehero.on-dark .pagehero-media::after{background:linear-gradient(to top,
    rgba(6,18,31,.72) 0%,rgba(6,18,31,.30) 22%,rgba(6,18,31,0) 46%)}

/* ============================================================
   KOPFLEISTE v2: transparent, ueber dem Inhalt, invertiert
   automatisch je nach Helligkeit des Abschnitts dahinter.
   Wortmarke links, Menue rechts als zwei Striche.
   ============================================================ */
header.site{position:fixed;top:0;left:0;right:0;z-index:80;background:none;border-bottom:none;
  pointer-events:none;transition:background-color .25s ease}
header.site .topbar{background:none;position:static}
header.site .tbrow{min-height:70px}
header.site a,header.site summary,header.site .dpanel{pointer-events:auto}

/* Wortmarke: beide Fassungen liegen uebereinander, eine wird eingeblendet */
.wordmark{position:relative;display:inline-flex;align-items:center}
.wordmark .logo{height:26px;display:block;transition:opacity .25s ease}
.wordmark .logo-dunkel{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
header.site.tone-light .wordmark .logo-hell{opacity:0}
header.site.tone-light .wordmark .logo-dunkel{opacity:1}

/* Menue als zwei Striche */
.burger{display:inline-block;width:26px;height:2px;background:#fff;position:relative;
  transition:background-color .25s ease}
.burger:before{content:"";position:absolute;left:0;top:-7px;width:26px;height:2px;background:#fff;
  transition:background-color .25s ease}
.burger:after{content:none;display:none}
header.site.tone-light .burger,header.site.tone-light .burger:before{background:var(--navy)}
.drawer > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;padding:10px 0}
.drawer > summary::-webkit-details-marker{display:none}
.mtxt{display:none}

/* Erste Sektion laeuft unter die Leiste, Text-Hero braucht Platz */
.pagehero-text{padding-top:clamp(132px,12vw,190px)}
@media (prefers-reduced-motion:reduce){
  header.site,.wordmark .logo,.burger,.burger:before{transition:none}
}


/* ===== 26.07.2026 · Hero vollflaechig, Kopfleiste, Menue ===== */
.pagehero-full .pagehero-media{height:100vh;height:100svh;min-height:520px}
.pagehero-full .pagehero-media video,.pagehero-full .pagehero-media img{width:100%;height:100%;object-fit:cover;display:block}
.pagehero-full .pagehero-title{bottom:clamp(48px,7vh,110px)}
.pagehero-full .pagehero-title h1{font-size:clamp(40px,6.4vw,92px);color:#fff}
.pagehero-claim{color:#fff;font-size:clamp(20px,2.5vw,34px);font-weight:700;letter-spacing:-.018em;
  line-height:1.22;max-width:22ch;margin-top:clamp(14px,1.6vw,22px)}
.pagehero-claim sup.fn a{color:#B9C9D9}
.pagehero-sub{color:#D7E2EC;font-size:clamp(15px,1.35vw,19px);margin-top:14px;max-width:46ch;font-weight:400}
.hero-cta{display:inline-block;margin-top:clamp(20px,2.4vw,32px);border:1.5px solid rgba(255,255,255,.85);
  color:#fff;font-weight:600;font-size:15px;padding:12px 26px;transition:background .18s,color .18s}
.hero-cta:hover{background:#fff;color:var(--navy);text-decoration:none}
@media(max-width:700px){.pagehero-full .pagehero-media{height:86vh;height:86svh}}

/* Kopfleiste: eigene Flaeche statt transparent, Menue im gleichen Register */
header.site{background:transparent}
.topbar{background:linear-gradient(to bottom,rgba(11,31,51,.92),rgba(11,31,51,.55) 70%,rgba(11,31,51,0));
  backdrop-filter:saturate(1.1) blur(2px);-webkit-backdrop-filter:saturate(1.1) blur(2px)}
header.site.tone-light .topbar{background:var(--navy)}
.dpanel{background:var(--navy);border-bottom:none;box-shadow:0 26px 60px rgba(11,31,51,.35)}
.dgrid{padding:38px 24px 44px}
.dhead{color:#fff;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:10px}
.dhead svg{color:var(--sky)}
.dgrid a{color:#B9C9D9}
.dgrid a:hover{color:#fff}

/* Zitatband mit Motiv hinter dem Navy-Verlauf */
.quoteband{position:relative;background:linear-gradient(100deg,rgba(11,31,51,.94) 0%,rgba(11,31,51,.78) 55%,rgba(23,58,92,.55) 100%),
  url('img/serie/anl-06-night-compressor-station.jpg') center/cover no-repeat}
.quoteband .avatar .slottag{display:none}

/* Augenbraue im Hero, Rest-Lede, Marktsignal-Beitraege */
.hero-augenbraue{display:block;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#B9C9D9;margin-bottom:clamp(10px,1.4vw,18px)}
.pagehero-title h1{font-size:clamp(30px,4.6vw,64px);line-height:1.06}
.pagehero-full .pagehero-title h1{font-size:clamp(40px,6.4vw,92px)}
.lede-rest{font-size:clamp(18px,1.7vw,24px);line-height:1.5;color:var(--ink);max-width:62ch}
.meta-datum{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.tprow{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:start}
@media(max-width:760px){.tprow{grid-template-columns:1fr}}


/* ===== 26.07.2026 Runde 2 · Kopfleiste kompakt, Menue, Baender, Formular ===== */
/* Kopfleiste: schlank, ruhig, ohne Kasten */
.topbar{background:linear-gradient(to bottom,rgba(11,31,51,.78),rgba(11,31,51,.28) 60%,rgba(11,31,51,0));backdrop-filter:none;-webkit-backdrop-filter:none}
header.site.tone-light .topbar{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid rgba(11,31,51,.08)}
.tbrow{min-height:56px}
.topbar .logo{height:26px}
.mtxt{display:none}
.burger,.burger:before,.burger:after{width:24px;height:1.5px;transition:transform .3s ease,opacity .2s ease}
details.drawer summary{padding:16px 0 16px 14px}
details[open].drawer .burger{background:transparent}
details[open].drawer .burger:before{transform:translateY(6px) rotate(45deg)}
details[open].drawer .burger:after{transform:translateY(-6px) rotate(-45deg)}

/* Menue: ruhiges Raster, keine Icons, klare Spalten */
.dpanel{background:rgba(11,31,51,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:none;border-top:1px solid rgba(255,255,255,.1)}
.dgrid{grid-template-columns:repeat(4,1fr);gap:40px 32px;padding:48px 24px 56px;max-width:var(--maxw);margin:0 auto}
.dhead{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8AA5BF;font-weight:700;
  border-bottom:none;padding-bottom:0;margin-bottom:14px}
.dhead svg,.dgrid svg{display:none}
.dgrid a:not(.dhead){font-size:19px;font-weight:600;color:#fff;padding:7px 0;letter-spacing:-.01em}
.dgrid a:not(.dhead):hover{color:var(--sky)}
.dcol--solo .dhead{color:#fff}

/* Weiterfuehrung: Box statt Vollbreiten-Streifen, zwei Wege */
.teaser{background:none;padding:56px 0}
.teaser .wrap{display:block}
.weiter{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.weiter{grid-template-columns:1fr}}
.weiter-karte{border:1px solid var(--rule);background:#fff;padding:30px 32px;display:flex;flex-direction:column;gap:8px}
.weiter-karte .wk-kick{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.weiter-karte h3{font-size:21px;letter-spacing:-.01em}
.weiter-karte p{font-size:15px;color:var(--muted)}
.weiter-karte a{font-weight:700;margin-top:6px}
.weiter-karte:hover{border-color:var(--accent)}

/* Helium-Brief: ruhiges Formular */
.nlform{gap:0;align-items:stretch}
.nlform input{border:1px solid var(--rule);border-right:none;padding:14px 16px;min-width:280px;font-size:15px;background:#fff}
.nlform input:focus{outline:none;border-color:var(--accent)}
.nlform .btn-o{margin-top:0;border-left-width:1.5px;padding:14px 28px;white-space:nowrap;background:var(--navy);color:#fff;border-color:var(--navy)}
.nlform .btn-o:hover{background:#fff;color:var(--navy)}

/* Bild neben Text */
.textbild{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media(max-width:820px){.textbild{grid-template-columns:1fr;gap:26px}}
.textbild img{width:100%;height:100%;max-height:520px;object-fit:cover}

/* Modal fuer Beitraege */
.modal{position:fixed;inset:0;z-index:200;display:none;background:rgba(11,31,51,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal:target{display:block}
.modal-karte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(880px,92vw);max-height:86vh;
  overflow-y:auto;background:#fff;padding:0 0 44px}
.modal-karte img{width:100%;height:min(320px,34vh);object-fit:cover;display:block}
.modal-inhalt{padding:32px clamp(24px,4vw,56px) 0}
.modal-inhalt h2{font-size:clamp(24px,3vw,38px);letter-spacing:-.015em;margin-bottom:10px}
.modal-inhalt p{margin-bottom:14px;max-width:64ch}
.modal-zu{position:sticky;top:0;float:right;margin:14px 14px 0 0;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--navy);z-index:3}
.modal-zu:hover{text-decoration:none;background:#fff}
.atomwrap{border:1px solid var(--rule);background:#F7F9FB;padding:clamp(18px,3vw,44px)}
.atomfig{width:100%;height:auto;display:block}
@media(max-width:820px){.atomfig{min-width:0}.atomwrap{overflow-x:auto}}
.fadresse{text-align:right}
.adresse-f{font-style:normal;font-size:14.5px;line-height:1.7;color:#B9C9D9}
@media(max-width:700px){.fadresse{text-align:left}}


/* ===== Menue final · 26.07.2026 ===== */
/* Leiste im Dunkelzustand: kraeftiger Verlauf, damit weisses Logo immer traegt */
.topbar{background:linear-gradient(to bottom,rgba(11,31,51,.92) 0%,rgba(11,31,51,.72) 45%,rgba(11,31,51,.28) 78%,rgba(11,31,51,0) 100%)}
header.site.tone-light .topbar{background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(11,31,51,.08)}
/* Geoeffnetes Menue: Leiste behaelt ihren Verlauf, Panel setzt ihn nach unten fort */
header.site:has(details[open]) .topbar{background:linear-gradient(to bottom,rgba(11,31,51,.97),rgba(11,31,51,.92))}
header.site.tone-light:has(details[open]) .topbar{background:linear-gradient(to bottom,rgba(11,31,51,.97),rgba(11,31,51,.92));border-bottom:none}
header.site:has(details[open]) .logo-dunkel{opacity:0}
header.site:has(details[open]) .logo-hell{opacity:1}
.dpanel{background:linear-gradient(to bottom,rgba(11,31,51,.97) 0%,rgba(11,31,51,.93) 55%,rgba(11,31,51,.86) 100%);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-top:none;box-shadow:0 30px 60px rgba(11,31,51,.28)}
/* Vier Spalten: Ueber uns, Plattform, Stakeholder, Kontakt */
.dgrid{grid-template-columns:repeat(4,1fr);gap:44px 36px;padding:44px 24px 56px}
.dcol--solo{align-self:start}


/* ===== Kopfleiste und Menue: eine Flaeche, starker Blur · 26.07.2026 ===== */
/* Geschlossen: Blur ueber dem Motiv, minimaler Tint nur fuer Lesbarkeit */
.topbar{background:linear-gradient(to bottom,rgba(11,31,51,.42),rgba(11,31,51,.18) 70%,rgba(11,31,51,0));
  backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35)}
header.site.tone-light .topbar{background:rgba(255,255,255,.55);
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border-bottom:none}

/* Geoeffnet: das Panel traegt die Flaeche und reicht bis unter die Leiste, keine Kante */
.dpanel{top:0;padding-top:56px;background:rgba(11,31,51,.34);
  backdrop-filter:blur(42px) saturate(1.5);-webkit-backdrop-filter:blur(42px) saturate(1.5);
  box-shadow:0 30px 70px rgba(11,31,51,.22);border-top:none}
header.site:has(details[open]) .topbar,
header.site.tone-light:has(details[open]) .topbar{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:none}
.tbrow{position:relative;z-index:80}
details.drawer summary{position:relative;z-index:80}
.dgrid{padding-top:34px}


/* ===== Weiterfuehrung: ohne Augenbraue, Icon unten links · 26.07.2026 ===== */
.weiter-karte{display:flex;flex-direction:column;min-height:210px;padding:30px 32px 26px;
  border:1px solid var(--rule);background:#fff;color:inherit;transition:border-color .18s ease,transform .18s ease}
.weiter-karte:hover{border-color:var(--accent);transform:translateY(-2px);text-decoration:none}
.weiter-karte h3{font-size:22px;letter-spacing:-.012em;margin-bottom:10px;color:var(--ink)}
.weiter-karte p{font-size:15px;color:var(--muted);line-height:1.6;max-width:44ch}
/* Icon-Slot unten links; Inhalt folgt mit dem Icon-Set, bis dahin traegt der Pfeil */
.wk-icon{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;justify-content:flex-start;
  width:28px;height:28px;color:var(--accent)}
.wk-icon:after{content:"\2192";font-size:23px;font-weight:700;line-height:1;transition:transform .18s ease}
.weiter-karte:hover .wk-icon:after{transform:translateX(5px)}
.wk-icon svg{width:28px;height:28px}
.wk-icon:has(svg):after{content:none}


/* ===== Korrektur 26.07.2026: Header bleibt, Menue oeffnet darunter, eine Anmutung ===== */
/* Panel wieder unter die Leiste, Leiste bleibt sichtbar */
.dpanel{top:100%;padding-top:0}
/* Geoeffnet: Leiste und Panel identisch eingefaerbt und geblurrt, dadurch kein Bruch */
header.site:has(details[open]) .topbar,
header.site.tone-light:has(details[open]) .topbar{
  background:rgba(11,31,51,.88);
  backdrop-filter:blur(30px) saturate(1.45);-webkit-backdrop-filter:blur(30px) saturate(1.45);
  border-bottom:none}
header.site:has(details[open]) .dpanel{
  background:rgba(11,31,51,.88);
  backdrop-filter:blur(30px) saturate(1.45);-webkit-backdrop-filter:blur(30px) saturate(1.45);
  box-shadow:0 26px 60px rgba(11,31,51,.20)}
/* Logo und Menuetaste immer ueber der Flaeche */
.tbrow,details.drawer summary{position:relative;z-index:90}
.dpanel{z-index:70}
.dgrid{padding:40px 24px 52px}


/* Startseiten-Hero: eine Aussage */
.pagehero-full .pagehero-title h1.hero-eins{font-size:clamp(30px,4.4vw,64px);line-height:1.1;max-width:20ch;color:#fff;letter-spacing:-.022em}
.hero-eins sup.fn a{color:#B9C9D9;font-size:.42em}
.pagehero-full .hero-cta{margin-top:clamp(24px,3vw,40px)}
/* Hero-Unterzeile, eingefuehrt mit v10 */
.hero-zwei{font-size:clamp(16px,1.5vw,21px);line-height:1.45;color:#D7E2EC;max-width:46ch;margin-top:clamp(14px,1.6vw,20px)}
@media (max-width:720px){.hero-zwei{font-size:16px;max-width:100%}}


.sek-lede{font-size:clamp(18px,1.7vw,24px);line-height:1.5;color:var(--ink);max-width:62ch}

/* ===== Menue: volle Bildschirmbreite, reiner Blur ohne Farbflaeche · 26.07.2026 ===== */
/* Bezugsrahmen zuruecknehmen, sonst endet das Panel an der Containerbreite */
.tbrow{position:static}
.wordmark,details.drawer{position:relative;z-index:90}
/* Panel spannt ueber den ganzen Viewport, direkt unter der Leiste */
.dpanel{position:fixed;left:0;right:0;top:56px;width:100vw}
/* Kein Farbton, nur Filter: Blur plus leichte Abdunklung des Untergrunds */
header.site:has(details[open]) .topbar,
header.site.tone-light:has(details[open]) .topbar,
header.site:has(details[open]) .dpanel{
  background:transparent;
  backdrop-filter:blur(44px) saturate(1.3) brightness(.62);
  -webkit-backdrop-filter:blur(44px) saturate(1.3) brightness(.62);
  box-shadow:none;border:none}


/* ===== Fix: EINE Blur-Flaeche fuer Leiste und Menue · 26.07.2026 ===== */
/* Das Panel traegt den Blur allein und reicht vom Bildschirmrand bis unter die Leiste */
.dpanel{position:fixed;left:0;right:0;top:0;width:100vw;padding-top:56px;z-index:60}
header.site:has(details[open]) .dpanel{
  background:transparent;
  backdrop-filter:blur(44px) saturate(1.3) brightness(.62);
  -webkit-backdrop-filter:blur(44px) saturate(1.3) brightness(.62);
  box-shadow:none;border:none}
/* Leiste selbst bekommt beim offenen Menue keinen eigenen Filter, sonst kappt sie den Backdrop */
header.site:has(details[open]) .topbar,
header.site.tone-light:has(details[open]) .topbar{
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:none}
/* Logo und Menuetaste immer oben */
.wordmark{position:relative;z-index:100}
details.drawer summary{position:relative;z-index:100}
details.drawer{position:static}


/* Menue: ohne jede Einfaerbung, reiner Blur */
header.site:has(details[open]) .dpanel{
  background:transparent;
  backdrop-filter:blur(48px) saturate(1.2);
  -webkit-backdrop-filter:blur(48px) saturate(1.2)}

/* ============================================================
   KONSOLIDIERUNG 26.07.2026
   Zweck: eine einzige Typo-Skala 104 / 72 / 44 / 24 / 18 / 13
   ueber alle 20 Seiten. Dieser Block steht bewusst am Ende und
   setzt die Skala gegen die vorherigen Patch-Bloecke durch.
   ============================================================ */

/* Stufe 1: Seitentitel. Vorher 64 auf 16 Seiten und 104 auf zwei
   Rechtsseiten, dadurch war die Hierarchie zwischen Titel und
   Statement invertiert. */
.pagehero .pagehero-title h1,
.pagehero-full .pagehero-title h1,
.pagehero-full .pagehero-title h1.hero-eins,
.pagehero-text h1{
  font-size:clamp(44px,7.2vw,104px);
  line-height:.96;
  letter-spacing:-.032em;
  max-width:none}

/* Stufe 2: bildschirmfuellendes Statement, bleibt unter Stufe 1 */
.pg-v2 .supply-claim,.pg-v2 .pull p{font-size:clamp(34px,5vw,72px);line-height:1.06}

/* Stufe 3: Statement im Fliess. War auf 18 zurueckgefallen. */
.pg-v2 .lead-claim,.pg-home .lead-claim{
  font-size:clamp(28px,3.06vw,44px)!important;
  font-weight:700;letter-spacing:-.018em;line-height:1.3;color:var(--navy)}

/* Stufe 3: Lede unter dem Hero */
.pagehero-lede > .wrap > p:first-child{font-size:clamp(24px,3.06vw,44px);line-height:1.3;font-weight:700}

/* Neue Bausteine aus v7 auf die Skala holen */
.weiter-karte h3{font-size:24px;letter-spacing:-.012em;line-height:1.25}
.weiter-karte p{font-size:18px;line-height:1.6}
.ecard h3{font-size:24px;letter-spacing:-.012em;line-height:1.25}
.ecard p{font-size:18px;line-height:1.6}
.ecard .more,.more{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ecard .badge,.badge{font-size:13px;font-weight:700;letter-spacing:.14em}
.tanlede{font-size:18px;line-height:1.6}

/* Startseite auf dieselbe Skala */
.pg-home main h2{font-size:44px;line-height:1.15;letter-spacing:-.02em}
.pg-home .mx-h h2,.pg-home .ich h2{font-size:44px}
.pg-home .mx-h h3,.pg-home .ich h3{font-size:24px;letter-spacing:-.012em}
.pg-home main p,.pg-home main li{font-size:18px;line-height:1.6}
.pg-home .modal-inhalt h2{font-size:44px;line-height:1.15}
.pg-home .modal-inhalt h3{font-size:24px}
.pg-home .modal-inhalt p{font-size:18px;line-height:1.6}
.pg-home .step h3{font-size:24px}
.pg-home .step p{font-size:18px;line-height:1.6}
.pg-home .qlink,.pg-home .mx-link,.pg-home a.more{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* Regel 8: ruhige Kanten, site-weit. Seit 28.07.2026 keine
   Null-Ecke mehr, sondern durchgehend 3 px. */
.pg-v2 main *,.pg-home main *{box-shadow:none!important}

/* Satzspiegel */
.pg-home main p{max-width:60ch}
.pg-home .modal-inhalt p{max-width:66ch}

/* Konsolidierung, Nachtrag */
/* Regel 8: Abzeichen werden eckig. Runde Steuerelemente und Avatare
   bleiben rund, das ist Bedienlogik und keine Dekoration. */
.badge,.ecard .badge{border-radius:3px!important}
.pg-v2 main .soc,.pg-home main .avatar,.pg-home main .modal-zu,.totop{border-radius:50%!important}

/* Regel 6: Satzspiegel auch fuer Absaetze ohne Klasse */
.pg-home main .wrap > p,.pg-home main .wrap p:not([class]){max-width:60ch}

/* Regel 2: die drei duennsten Baender der Startseite atmen */
.pg-home .centerblock{padding:clamp(72px,8vw,132px) 0}
.pg-home .sek,.pg-home .tabsek{padding:clamp(64px,7vw,112px) 0}
.pg-home .quoteband{padding:clamp(72px,8vw,128px) 0}

/* Konsolidierung, Nachtrag 2 */
.pg-home .q{font-size:44px;line-height:1.3;font-weight:700;letter-spacing:-.018em}
.pg-home main .wrap p{max-width:60ch}
.pg-home .modal-inhalt p{max-width:66ch}

/* Konsolidierung, Nachtrag 3: Spezifitaet und Inline-Styles schlagen */
.pg-home .quoteband p.q{font-size:24px;line-height:1.45;font-weight:600;max-width:44ch;letter-spacing:-.008em}
.pg-home main .wrap > p[style]{max-width:60ch!important}
.pg-home main .prose p[style]{max-width:60ch!important}

/* ============================================================
   DESIGN-PASS 27.07.2026
   1 Quellenblock in Footer-Farbe, Hairline zum Footer
   2 Menue: 10 Prozent Schwarz, Text 100 Prozent weiss
   3 Anwendungs-Tabs: Bild rechts vollflaechig
   4 Hero: kleiner, maximal drei Zeilen; Pfeil unten links weg
   ============================================================ */

/* 1 · Quellen und Einordnung: eigenes dunkles Band, seitenuebergreifend */
.wrap:has(> .fnbox){
  max-width:none;width:100%;padding:0;
  background:var(--navy)}
.fnbox{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  border-top:none;
  border-bottom:1px solid rgba(255,255,255,.14)}
.fnbox summary{color:#8AA5BF;padding:20px 0}
.fnbox summary:hover{color:#fff}
.fnbox summary:after{color:var(--sky)}
.fnbox[open] summary{color:#fff}
.fnl{padding:2px 0 26px}
.fnl li{color:#9FB6CC}
.fnl li:before{color:var(--sky)}
.fnl li a{color:var(--sky)}
/* Der Footer schliesst ohne zweite Kante direkt an, nur wo das Band steht */
body:has(.fnbox) footer.site{margin-top:0;border-top:none}

/* 2 · Menue: reiner Blur plus zehn Prozent Schwarz */
header.site:has(details[open]) .dpanel{
  background:rgba(0,0,0,.10);
  backdrop-filter:blur(48px) saturate(1.2);
  -webkit-backdrop-filter:blur(48px) saturate(1.2)}
/* Menuetext voll weiss, beim Hover zehn Prozent zurueck */
.dgrid a,.dgrid a.dhead,.dgrid a:not(.dhead),.dcol--solo .dhead{color:#fff}
.dgrid a:hover,.dgrid a.dhead:hover,.dgrid a:not(.dhead):hover,.dcol--solo .dhead:hover{
  color:rgba(255,255,255,.9);text-decoration:none}

/* 3 · Anwendungs-Tabs: Bild rechts stossend, oben, unten und rechts */
.tabsek .tpanel{max-width:none;padding:0}
.tabsek .tprow{grid-template-columns:1.15fr 1fr;gap:0;align-items:stretch}
.tabsek .tprow > div{
  padding:34px 30px 34px 24px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.tabsek .tprow > div p{margin:0}
.tabsek .tprow > img.bimg{
  aspect-ratio:auto!important;
  width:100%;height:100%;min-height:280px;
  object-fit:cover;align-self:stretch;display:block}
@media(max-width:760px){
  .tabsek .tprow{grid-template-columns:1fr}
  .tabsek .tprow > img.bimg{aspect-ratio:16/9!important;min-height:0;height:auto;order:-1}
  .tabsek .tprow > div{padding:26px 24px 30px}}

/* 4 · Hero: maximal drei Zeilen */
.pg-home .pagehero-full .pagehero-title h1.hero-eins,
.pagehero-full .pagehero-title h1.hero-eins{
  font-size:clamp(27px,3.7vw,54px);
  line-height:1.08;
  letter-spacing:-.024em;
  text-wrap:balance;
  max-width:min(100%,34ch)}
@media(max-width:700px){
  .pagehero-full .pagehero-title h1.hero-eins{font-size:clamp(25px,6.4vw,34px);max-width:min(100%,26ch)}}

/* 4 · Sprungpfeil unten links entfaellt */
.totop{display:none!important}

/* ============================================================
   WEITERFUEHRUNGS-KACHELN 27.07.2026
   Fehler: .teaser a setzte white-space:nowrap, Rahmen und Polster
   auf die Karte; dadurch lief der Text aus dem Raster.
   Neu: randlos, leicht graue Flaeche, Abdunklung beim Hover.
   ============================================================ */

/* Erblast aus dem alten Vollbreiten-Streifen zuruecknehmen */
.teaser a.weiter-karte{
  white-space:normal;
  border:none;
  padding:32px 34px 28px;
  color:inherit;
  background:var(--wash)}
.teaser a.weiter-karte:hover{
  background:#E7ECF1;
  color:inherit;
  transform:none;
  text-decoration:none}

/* Raster haelt die Spalten, auch wenn der Inhalt breiter waere */
.weiter{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.weiter > *{min-width:0}
@media(max-width:760px){.weiter{grid-template-columns:1fr}}

/* Schriftgroessen der Karte gegen .pg-v2 .teaser p durchsetzen */
.pg-v2 .teaser .weiter-karte h3,
.weiter-karte h3{font-size:24px;line-height:1.25;letter-spacing:-.012em;color:var(--ink);margin-bottom:10px}
.pg-v2 .teaser .weiter-karte p,
.weiter-karte p{font-size:18px;line-height:1.6;color:var(--muted);max-width:34ch;font-weight:400}

/* Pfeil: wandert beim Hover, Farbe bleibt */
.weiter-karte{transition:background-color .18s ease}
.weiter-karte .wk-icon{color:var(--accent)}
.weiter-karte:hover .wk-icon:after{transform:translateX(6px)}



/* Kontaktkarten: Adresse und Antwortzeile */
.tile .tile-mail{font-size:15px;font-weight:700;color:var(--accent);margin-top:12px;overflow-wrap:anywhere}
.tile .tile-note{font-size:15px;color:var(--muted);margin-top:10px;line-height:1.55}
.tiles.c3 .tile{display:flex;flex-direction:column}
.tiles.c3 .tile .more{margin-top:auto;padding-top:18px}

/* Menuekopf ohne Ziel bleibt weiss wie die uebrigen Eintraege */
.dgrid .dhead,.dgrid span.dhead{color:#fff}

/* Footer: Unterzeile lag ausserhalb des Satzspiegels */
footer.site > .wrap > .fbot{max-width:none}

/* Fusszeile v8: Rechtshinweis unter der Anschrift */
.fadresse .fhinweis{font-size:13px;line-height:1.55;color:#8AA5BF;margin-top:14px;max-width:44ch;margin-left:auto}
@media(max-width:820px){.fadresse .fhinweis{margin-left:0}}

/* Einspaltiges Kachelraster */
.tiles.c1{grid-template-columns:1fr}

/* ============================================================
   MOBILOPTIMIERUNG 28.07.2026
   1 Icon links neben einer Ueberschrift wandert auf dem Telefon
     ueber die Ueberschrift, damit der Titel die volle Breite hat
   2 Hero: auf dem Telefon das groesste Element der Seite
   3 Hero-Schaltflaeche im Milchglas
   ============================================================ */

/* 1 · Regel fuer alle Icon-Ueberschriften */
@media(max-width:760px){
  .ich,.mx-h{flex-direction:column;align-items:flex-start;gap:10px}
  .ich svg,.mx-h svg{width:26px;height:26px}
  .ich h2,.ich h3,.mx-h h2,.mx-h h3{max-width:none}
  .pg-home .mx-h h2,.pg-home .ich h2{font-size:clamp(28px,7.2vw,40px);line-height:1.15}
  .pg-home .mx-h h3,.pg-home .ich h3{font-size:22px}
}

/* 2 · Hero traegt auf dem Telefon die groesste Schrift */
@media(max-width:760px){
  .pagehero-full .pagehero-title h1.hero-eins{
    font-size:clamp(34px,9.4vw,52px)!important;
    line-height:1.04;
    letter-spacing:-.028em;
    max-width:none!important}
  .pagehero-full .pagehero-title{bottom:clamp(28px,7vw,56px)}
}

/* 3 · Hero-Schaltflaeche: Milchglas statt Rahmen auf dunklem Grund */
.hero-cta{
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  color:#fff}
.hero-cta:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.55);
  color:#fff;text-decoration:none}

/* Portraet auf der Unternehmensfuehrung */
.person .portrait{width:100%;max-width:340px;aspect-ratio:1/1;object-fit:cover;display:block;filter:grayscale(1)}
@media(max-width:760px){.person .portrait{max-width:none}}

/* ============================================================
   KRUEMELPFAD IM HERO 28.07.2026
   Der Pfad steht ueber dem Seitentitel, buendig an derselben
   Schriftlinie. Keine eigene Zeile mehr unter dem Hero.
   ============================================================ */
.crumbs{
  font-size:13px;
  letter-spacing:.02em;
  line-height:1.4;
  margin:0 0 clamp(10px,1.2vw,18px);
  padding:0;
  border:none;
  display:block;
  color:rgba(255,255,255,.62)}
.crumbs a{color:rgba(255,255,255,.62)}
.crumbs a:hover{color:#fff;text-decoration:none}
.crumbs span{color:#fff}
/* Rechtsseiten haben einen weissen Kopf, dort dunkler Pfad */
.pagehero-text .crumbs{color:var(--muted)}
.pagehero-text .crumbs a{color:var(--muted)}
.pagehero-text .crumbs a:hover{color:var(--accent)}
.pagehero-text .crumbs span{color:var(--ink)}
@media(max-width:700px){.crumbs{font-size:12px;margin-bottom:8px}}

/* ============================================================
   ECKENRADIUS 28.07.2026, bindend
   Keine harte Null-Ecke mehr. Alles traegt 3 px, ausser den
   bewusst runden Steuerelementen und Avataren.
   ============================================================ */
:root{--rad:3px}

/* Der Radius liegt nicht mehr global auf allem: Elemente mit nur einer
   Borderkante bekamen dadurch runde Linienenden. Die Liste weiter unten
   setzt die 3 px gezielt auf Flaechen, Kacheln und Bilder. */

/* Flaechen, die den ganzen Bildschirm oder ein Band fuellen,
   bleiben ohne Radius, sonst blitzt der Hintergrund an den Ecken */
html,body,header.site,.topbar,.dpanel,footer.site,
section,main,.pagehero,.pagehero-media,.pagehero-title,.pagehero-lede,
.teaser,.tanband,.nlband,.sek,.mx,.tabsek,.centerblock,.quoteband,
.pull,.supply,.media,.phero,.wrap,.modal{border-radius:0}

/* Bewusst rund */
.soc,.avatar,.modal-zu,.totop,
.pg-v2 main .soc,.pg-home main .avatar,.pg-home main .modal-zu{border-radius:50%!important}

/* Alles Uebrige auf 3 px, auch gegen die Konsolidierungsregeln */
.tile,.ecard,.weiter-karte,.mx-card,.tabbox,.fnbox,.step,.person,
.bimg,img.bimg,.portrait,.hero-cta,.btn-o,.badge,.nlform input,.nlform a,
input,button,select,textarea,figure,.fig,.orgbox,.tilelink,
.pg-v2 main .tile,.pg-v2 main .ecard,.pg-v2 main img,
.pg-home main .tile,.pg-home main .ecard,.pg-home main img,
.pg-v2 main .tabbox,.pg-home main .tabbox{border-radius:var(--rad)!important}

/* Videos und Vollbild-Motive im Kopf bleiben kantenbuendig */
.pagehero-media img,.pagehero-media video,.hero-video,
.mx-imgzone img,.mx-imgzone{border-radius:0!important}


/* ============================================================
   LAYOUT-PASS 09.08.2026 · Rhythmus statt Fliesstext
   Nur bestehende Farben, Stufen und Abstaende der Skala.
   ============================================================ */

/* 1 · Nummeriertes Kriterienraster: Kacheln werden zur Liste mit Haarlinie */
.tiles.zaehl{counter-reset:kr;gap:0;border-top:1px solid var(--rule)}
.tiles.zaehl .tile{counter-increment:kr;background:none;border:none;border-bottom:1px solid var(--rule);
  padding:32px 0 34px;gap:0}
.tiles.zaehl .tile:before{content:counter(kr,decimal-leading-zero);display:block;font-size:13px;font-weight:700;
  letter-spacing:.14em;color:var(--mid);margin-bottom:14px}
.tiles.zaehl .tile h3{margin-bottom:10px}
@media(min-width:601px){
  .tiles.zaehl.c2 .tile:nth-child(odd){padding-right:56px;border-right:1px solid var(--rule)}
  .tiles.zaehl.c2 .tile:nth-child(even){padding-left:44px}
}

/* 2 · Bildkacheln: Motiv randlos ueber dem Titel */
.tiles.bild .tile{padding:24px}
.tiles.bild .tile img{margin:-24px -24px 16px;width:calc(100% + 48px);max-width:none;
  aspect-ratio:16/10;object-fit:cover}

/* 3 · Statement und Fliesstext nebeneinander */
.claimsplit{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.pg-v2 .claimsplit .lead-claim{margin-bottom:0;max-width:16ch}
@media(max-width:860px){.claimsplit{grid-template-columns:1fr;gap:28px}}

/* 4 · Argument links, Kennzahlen rechts */
.statsplit{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.statsplit .stats{grid-template-columns:1fr;border:none;border-top:2px solid var(--rule-stark);background:none}
.statsplit .stats > div{border-left:none;border-top:1px solid var(--rule);padding:26px 0}
.statsplit .stats > div:first-child{border-top:none}
@media(max-width:860px){.statsplit{grid-template-columns:1fr;gap:30px}}

/* 5 · Definitionsraster: drei kurze Textblöcke nebeneinander statt untereinander */
.defgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--rule-stark)}
.defgrid > div{padding:34px 40px 6px 0;border-right:1px solid var(--rule)}
.defgrid > div:last-child{border-right:none}
.defgrid > div + div{padding-left:40px}
.defgrid h3{font-size:24px;letter-spacing:-.012em;margin-bottom:14px}
.defgrid p{font-size:18px;line-height:1.6;color:var(--muted);margin-bottom:16px;max-width:none}
.defgrid p strong{color:var(--ink)}
@media(max-width:1060px){
  .defgrid{grid-template-columns:1fr}
  .defgrid > div,.defgrid > div + div{border-right:none;border-bottom:1px solid var(--rule);padding:30px 0}
  .defgrid > div:last-child{border-bottom:none}
}

/* 6 · Sequenz als Zeitstrahl */
.seq.linie .step{border-top:1px solid var(--rule);position:relative;padding-top:22px}
.seq.linie .step:before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--accent)}
.seq.linie .step .no{color:var(--mid)}

/* 7 · Vier Stufen als vertikaler Weg (Seite plattform/vier-stufen) */
.arch-weg .tiles{display:block;border-top:2px solid var(--rule-stark)}
.arch-weg .tile.step{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 32px;align-items:start;
  background:none;border:none;border-bottom:1px solid var(--rule);padding:34px 0;border-top:none}
.arch-weg .tile.step > .stufe{grid-column:1;grid-row:1 / -1;font-size:44px;font-weight:700;line-height:1;
  letter-spacing:-.02em;color:var(--sky)}
.arch-weg .tile.step > :not(.stufe){grid-column:2}
.arch-weg .tile.step p{max-width:60ch}
@media(max-width:700px){
  .arch-weg .tile.step{grid-template-columns:1fr}
  .arch-weg .tile.step > .stufe{grid-row:auto;font-size:24px;margin-bottom:8px}
  .arch-weg .tile.step > :not(.stufe){grid-column:1}
}

/* 8 · Zahlenband: offene Haarlinien statt Kasten */
.arch-zahlen .stats{background:none;border:none;border-top:2px solid var(--rule-stark)}
.arch-zahlen .stats > div{border-left:1px solid var(--rule)}
.arch-zahlen .stats > div:first-child{padding-left:0}
@media(max-width:700px){.arch-zahlen .stats > div{padding-left:0}}

/* 9 · Personen: Portrait links, Text rechts */
.arch-person .person,.person:has(.portrait){background:none;border:none;border-top:1px solid var(--rule);
  padding:34px 0 0;display:grid;grid-template-columns:300px minmax(0,1fr);gap:36px;align-items:start}
.person:has(.portrait) > .portrait{grid-row:1 / -1}
.person:has(.portrait) > :not(.portrait){grid-column:2}
@media(max-width:820px){
  .arch-person .person,.person:has(.portrait){grid-template-columns:1fr}
  .person:has(.portrait) > .portrait{grid-row:auto}
  .person:has(.portrait) > :not(.portrait){grid-column:1}
}

/* 10 · Bild-Text-Split: Bild fuellt die Spalte, Wechsel der Seite moeglich */
.textbild.dreh > img,.textbild.dreh > picture{order:-1}
.textbild img{align-self:stretch}


/* 11 · Führung: Personen als offene Blöcke mit Kopflinie statt Kasten */
.arch-personen .person{background:none;border:none;border-top:2px solid var(--rule-stark);padding:30px 0 0}
.arch-personen .tiles.c2{gap:40px}

/* 12 · Bild im Split fuellt die Spalte, ohne den Satzspiegel zu sprengen */
.textbild > img.bimg{width:100%;height:100%;max-height:520px;object-fit:cover}
.tiles.zaehl.c3 .tile:before{color:var(--mid)}
@media(min-width:921px){
  .tiles.zaehl.c3 .tile{padding-right:36px;border-right:1px solid var(--rule)}
  .tiles.zaehl.c3 .tile:nth-child(3n){border-right:none;padding-right:0}
  .tiles.zaehl.c3 .tile:nth-child(3n+2){padding-left:36px}
  .tiles.zaehl.c3 .tile:nth-child(3n){padding-left:36px}
}


/* ============================================================
   FEINSCHLIFF 10.08.2026 · Linienführung sauber schliessen
   Trennlinien laufen jetzt als durchgehende Spaltenlinien,
   nicht mehr als Kanten einzelner Kacheln. Keine Rahmen,
   keine offenen Enden, keine doppelten Linien.
   ============================================================ */

/* Nummerierte Raster: Spaltenlinien aus dem Container, Zeilenlinien nur innen */
.tiles.zaehl{position:relative}
.tiles.zaehl .tile{border:none;padding:34px 0;gap:0}
.tiles.zaehl .tile:before{margin-bottom:12px}
.tiles.zaehl .tile h3{margin-bottom:10px}
.tiles.zaehl .tile p{margin:0}

@media(min-width:601px){
  .tiles.zaehl.c2 .tile:nth-child(odd){padding-right:44px}
  .tiles.zaehl.c2 .tile:nth-child(even){padding-left:44px}
  .tiles.zaehl.c2 .tile:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media(min-width:921px){
  .tiles.zaehl.c3 .tile{padding-left:36px;padding-right:36px;border-right:none}
  .tiles.zaehl.c3 .tile:nth-child(3n+1){padding-left:0}
  .tiles.zaehl.c3 .tile:nth-child(3n){padding-right:0}
  .tiles.zaehl.c3 .tile:nth-child(n+4){border-top:1px solid var(--rule)}
}
@media(min-width:601px) and (max-width:920px){
  .tiles.zaehl.c3 .tile:nth-child(odd){padding-right:40px}
  .tiles.zaehl.c3 .tile:nth-child(even){padding-left:40px}
  .tiles.zaehl.c3 .tile:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media(min-width:921px){
  .tiles.zaehl.c4 .tile{padding-left:28px;padding-right:28px;border-right:none}
  .tiles.zaehl.c4 .tile:nth-child(4n+1){padding-left:0}
  .tiles.zaehl.c4 .tile:nth-child(4n){padding-right:0}
  .tiles.zaehl.c4 .tile:nth-child(n+5){border-top:1px solid var(--rule)}
}
@media(min-width:601px) and (max-width:920px){
  .tiles.zaehl.c4 .tile:nth-child(odd){padding-right:40px}
  .tiles.zaehl.c4 .tile:nth-child(even){padding-left:40px}
  .tiles.zaehl.c4 .tile:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media(max-width:600px){
  .tiles.zaehl .tile:nth-child(n+2){border-top:1px solid var(--rule)}
}

/* Definitionsraster: gleiche Logik, Linien laufen über die volle Höhe */
.defgrid > div{border-right:none;padding:34px 36px 34px 36px}
.defgrid > div:first-child{padding-left:0}
.defgrid > div:last-child{padding-right:0}
.defgrid > div + div{padding-left:36px}
.defgrid p:last-child{margin-bottom:0}
@media(max-width:1060px){
  .defgrid > div{border-bottom:1px solid var(--rule);padding:30px 0}
  .defgrid > div + div{padding-left:0}
  .defgrid > div:last-child{border-bottom:none;padding-bottom:0}
}

/* Vier Stufen und Zeitstrahl: letzte Zeile schliesst ohne Kante */
.arch-weg .tile.step:last-child{border-bottom:none;padding-bottom:0}
.arch-personen .person + .person{margin-top:0}
.statsplit .stats > div:last-child{padding-bottom:0}

/* Bild-Text-Split: gleiche Höhe, gleicher Beschnitt auf allen Seiten */
.textbild{align-items:stretch}
.textbild > .prose{align-self:center}
.textbild > img.bimg{max-height:none;min-height:320px;height:100%}
@media(max-width:820px){.textbild > img.bimg{min-height:0;aspect-ratio:16/10}}

/* Bildkacheln: Motive einheitlich, Text auf gleicher Linie */
.tiles.bild .tile{gap:0}
.tiles.bild .tile h3{margin-bottom:8px}
.tiles.bild .tile p{margin:0}


/* Eine Linie pro Sektionskopf: wo unmittelbar ein Raster mit eigener
   Oberkante folgt, entfällt die Kicker-Linie. */
.kicker:has(+ .tiles.zaehl),
.kicker:has(+ .defgrid),
.arch-weg .kicker,
.arch-zahlen .kicker{border-bottom:none;padding-bottom:0;margin-bottom:18px}


/* Zahlenband: erste Zelle ohne Senkrechte, Zellenabstand auf die 36er-Logik */
.arch-zahlen .stats > div:first-child{border-left:none;padding-left:0}
.arch-zahlen .stats > div{padding-left:36px;padding-right:36px}
.arch-zahlen .stats > div:last-child{padding-right:0}
@media(max-width:700px){
  .arch-zahlen .stats > div{border-left:none;padding-left:0;padding-right:0}
}



/* ============================================================
   LINIENFÜHRUNG FINAL 10.08.2026
   Spaltenlinien wieder an der Zelle statt am Container: Grid-Zellen
   sind innerhalb einer Reihe gleich hoch, die Linie läuft dadurch
   durchgehend – und hört bei unvollständigen Reihen dort auf,
   wo die letzte belegte Zelle endet.
   ============================================================ */
.tiles.zaehl .tile{border:none}
@media(min-width:601px){
  .tiles.zaehl.c2 .tile:nth-child(odd){border-right:1px solid var(--rule)}
  .tiles.zaehl.c2 .tile:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media(min-width:921px){
  .tiles.zaehl.c3 .tile{border-right:1px solid var(--rule)}
  .tiles.zaehl.c3 .tile:nth-child(3n){border-right:none}
  .tiles.zaehl.c3 .tile:nth-child(n+4){border-top:1px solid var(--rule)}
}
@media(min-width:601px) and (max-width:920px){
  .tiles.zaehl.c3 .tile:nth-child(odd){border-right:1px solid var(--rule)}
  .tiles.zaehl.c3 .tile:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media(max-width:600px){
  .tiles.zaehl .tile{border-right:none}
  .tiles.zaehl .tile:nth-child(n+2){border-top:1px solid var(--rule)}
}

/* Definitionsraster nach derselben Logik */
@media(min-width:1061px){
  .defgrid > div{border-right:1px solid var(--rule)}
  .defgrid > div:last-child{border-right:none}
}

/* Unvollständige letzte Reihe: keine Senkrechte ins Leere */
.tiles.zaehl .tile:last-child{border-right:none}


/* ============================================================
   SEKTIONSKOPF FINAL 10.08.2026
   Ursache der doppelten Linien: die neuen Raster brachten je eine
   eigene Oberkante mit, während die Basisregel .kicker weiterhin
   ihre Linie zeichnete – zwei Regeln fuer dieselbe Aufgabe.
   Ab hier gilt: die Linie gehoert zum Sektionskopf, die Raster
   selbst tragen keine Oberkante.
   ============================================================ */
.wrap:has(.tiles.zaehl) > .kicker,
.wrap:has(.defgrid) > .kicker,
.arch-weg .kicker,
.arch-zahlen .kicker{
  border-bottom:2px solid var(--rule-stark);
  padding-bottom:14px;
  margin-bottom:0}
.tiles.zaehl,
.defgrid,
.arch-weg .tiles,
.arch-zahlen .stats{border-top:none}
.arch-zahlen .stats{margin-top:0}

/* Alternierender Split: Text bleibt in beiden Reihen die breitere Spalte */
.textbild.dreh{grid-template-columns:.95fr 1.05fr}


/* ============================================================
   SEKTIONSKOPF, EINE FASSUNG · 10.08.2026
   Ursache der zwei Fassungen: der Kopf wurde in Sonderselektoren
   neu definiert statt in der Basisregel. Ab hier gilt eine
   Deklaration für alle Sektionsköpfe der Website.
   ============================================================ */
.kicker,
.pg-v2 .kicker,
.pg-home .kicker,
.wrap:has(.tiles.zaehl) > .kicker,
.wrap:has(.defgrid) > .kicker,
.arch-weg .kicker,
.arch-zahlen .kicker{
  border-bottom:2px solid var(--rule-stark);
  padding-bottom:14px;
  margin-bottom:26px}

/* Der Abstand kommt vom Kopf, nicht vom Folgeelement: erste Rasterzeile ohne Polster */
.tiles.zaehl .tile{padding-top:0}
.defgrid > div{padding-top:0}
.arch-weg .tiles > .tile.step:first-child{padding-top:0}
@media(min-width:601px){
  .tiles.zaehl.c2 .tile:nth-child(n+3){padding-top:34px}
}
@media(min-width:921px){
  .tiles.zaehl.c3 .tile:nth-child(n+4){padding-top:34px}
}
@media(min-width:601px) and (max-width:920px){
  .tiles.zaehl.c3 .tile:nth-child(n+3){padding-top:34px}
}
@media(max-width:600px){
  .tiles.zaehl .tile:nth-child(n+2){padding-top:34px}
}
@media(max-width:1060px){
  .defgrid > div + div{padding-top:30px}
}

/* Tote Deklaration entfernt: das Zahlenband behält sein 30er-Polster aus .pg-v2 */
.arch-zahlen .stats > div{padding-left:30px;padding-right:30px}
.arch-zahlen .stats > div:first-child{padding-left:0}
.arch-zahlen .stats > div:last-child{padding-right:0}


/* ============================================================
   LAYOUT-PASS II · 10.08.2026 · mehr Kontrast im Raster
   Logo, Kopfleiste und Fusszeile bleiben unberuehrt.
   ============================================================ */

/* 1 · Ziffern werden zum Bildelement statt zur Beschriftung */
.tiles.zaehl .tile:before{
  font-size:clamp(40px,4.2vw,64px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--sky);
  margin-bottom:16px}
.tiles.zaehl .tile h3{font-size:24px}

/* 2 · Vier Stufen: die Stufennummer traegt die Sektion */
.arch-weg .tile.step{grid-template-columns:170px minmax(0,1fr);padding:40px 0}
.arch-weg .tile.step > .stufe{font-size:clamp(56px,6.6vw,96px);letter-spacing:-.03em}
@media(max-width:700px){
  .arch-weg .tile.step > .stufe{font-size:44px}
}

/* 3 · Kennzahlen auf eigenem Band: eine Stufe groesser */
.pg-v2 .arch-zahlen .stats .n{font-size:clamp(40px,4.6vw,64px);line-height:1}

/* 4 · Beitragsraster: der erste Beitrag laeuft ueber die volle Breite */
@media(min-width:921px){
  .ein{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .ein > .ecard:first-child{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:stretch}
  .ein > .ecard:first-child img.bimg{
    grid-row:1 / -1;
    aspect-ratio:auto!important;
    width:100%;height:100%;min-height:300px;object-fit:cover;
    border-bottom:none;border-right:1.5px solid var(--rule)}
  .ein > .ecard:first-child h3{
    align-self:end;
    font-size:clamp(28px,3vw,44px);
    line-height:1.15;
    padding:36px 36px 10px}
  .ein > .ecard:first-child .more{padding:0 36px 36px}
}

/* 5 · Anwendungskacheln: zwei grosse Motive fuehren, vier folgen kleiner */
@media(min-width:1000px){
  .tiles.bild{grid-template-columns:repeat(12,minmax(0,1fr))}
  .tiles.bild > .tile{grid-column:span 3}
  .tiles.bild > .tile:nth-child(-n+2){grid-column:span 6}
  .tiles.bild > .tile:nth-child(-n+2) h3{font-size:24px}
  .tiles.bild > .tile:nth-child(n+3) h3{font-size:18px}
  .tiles.bild > .tile:nth-child(n+3) p{font-size:16px;line-height:1.55}
}

@media(min-width:921px){
  .ein > .ecard:first-child{grid-template-rows:1fr auto}
  .ein > .ecard:first-child img.bimg{grid-row:1 / span 2;align-self:stretch;height:auto}
}

/* Split-Regel am Ursprung: der Text ist immer die breitere Spalte,
   auch wenn das Bild ueber die Quelltext-Reihenfolge links steht. */
.textbild:has(> img:first-child){grid-template-columns:.95fr 1.05fr}


/* ============================================================
   ART-DIRECTION-PASS 10.08.2026
   Befund: Bildbaender schwebten im Satzspiegel statt zu tragen,
   Rasterloecher entstanden aus erzwungener Sektionshoehe, die
   Ankerzeile folgte keiner Stufe der Skala, und erklaerende
   Einzelsaetze standen in eigenen Vollhoehen-Sektionen.
   Dieser Block schliesst diese vier Punkte ab.
   ============================================================ */

/* 1 · Baender laufen randlos ueber die volle Breite */
html{overflow-x:clip}
.bleed{width:100vw;margin-left:calc(50% - 50vw);border-radius:0!important}
.bleed img,.bleed > img.bimg{width:100%;height:clamp(260px,40vw,600px);
  object-fit:cover;aspect-ratio:auto!important;border-radius:0!important;display:block}

/* 2 · Das Statement steht im Bild, nicht daneben: ein Hoehepunkt je Seite */
.claimband{position:relative;width:100vw;margin-left:calc(50% - 50vw);background:var(--navy);
  display:flex;align-items:flex-end;min-height:clamp(400px,54vw,680px);overflow:hidden}
.claimband > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0!important}
.claimband:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,
  rgba(6,18,31,.88) 0%,rgba(6,18,31,.60) 30%,rgba(6,18,31,.14) 64%,rgba(6,18,31,0) 100%)}
.claimband > .wrap{position:relative;z-index:2;width:100%;
  padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(36px,4.6vw,68px)}
.claimband p{font-size:clamp(28px,3.06vw,44px);font-weight:700;letter-spacing:-.018em;
  line-height:1.3;color:#fff;max-width:22ch;margin:0}

/* 3 · Rasterloch: die erzwungene Schirmhoehe gilt nur fuer das reine Statement */
.pg-v2 .claimsek:has(.claimsplit){min-height:0;padding:clamp(72px,8vw,112px) 0}
.claimsplit,.statsplit{align-items:start}
.claimsplit .prose p:last-child,.statsplit .prose p:last-child{margin-bottom:0}

/* 4 · Der erklaerende Satz gehoert unter den Sektionstitel */
.kopfsatz{font-size:18px;line-height:1.6;color:var(--muted);max-width:60ch;margin:0 0 36px}

/* 5 · Ankerzeile auf der 13er-Stufe, zwei Haarlinien statt Kaestchen */
.anker{gap:14px 34px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:18px 0;margin:0}
.anker a{background:none;padding:0;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.anker a:hover{background:none;color:var(--accent);text-decoration:none}

/* 6 · Eigenschaftenraster: zweite Reihe schliesst an einer Haarlinie an */
.defgrid.stoff{border-top:1px solid var(--rule)}
.defgrid.stoff > div{padding-top:32px}
@media(min-width:1061px){
  .defgrid > div:nth-child(3n+1){padding-left:0}
  .defgrid > div:nth-child(3n){padding-right:0;border-right:none}
  .defgrid.stoff > div:nth-child(n+4){border-top:1px solid var(--rule)}
}
@media(max-width:1060px){.defgrid.stoff > div{padding-top:30px}}


/* ============================================================
   NACHTRAG 10.08.2026
   Befund 1: sh-logo-weiss.svg traegt keine Farbdefinition. Alle
   Pfade referenzieren .st0, die Regel fehlt in der Datei; die
   weisse Fassung lief deshalb schwarz aus - im Fuss auf Navy
   und in der Kopfleiste ueber dunklen Motiven. Korrektur ohne
   Eingriff in die Logodateien.
   Befund 2: die zweispaltigen Bloecke rissen unter der kuerzeren
   Spalte ein Loch auf. Die Trennlinie laeuft jetzt durch, das
   Weiss wird dadurch zur Spalte statt zur Luecke.
   ============================================================ */

/* Der Notbehelf entfaellt: beide Logofassungen tragen ihre Farbe wieder
   selbst, die Kopfleiste wechselt dadurch zwischen Farbe und Weiss. */

@media(min-width:861px){
  .claimsplit{grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
  .claimsplit > .lead-claim{padding-right:52px;border-right:1px solid var(--rule)}
  .claimsplit > .prose{padding-left:52px}
  .statsplit{grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch}
  .statsplit > .prose{padding-right:52px;border-right:1px solid var(--rule)}
  .statsplit > .stats{padding-left:52px;border-top:none;margin-top:0}
  .statsplit > .stats > div:first-child{border-top:none;padding-top:0}
}

/* Der Claim fuellt seine Spalte, damit die Trennlinie an der Spaltenkante
   steht und nicht frei im Weiss haengt. */
@media(min-width:861px){
  .pg-v2 .claimsplit > .lead-claim,.claimsplit > .lead-claim{max-width:none;text-wrap:balance}
}

/* Der Sektionskopf las sich auf der Startseite als 13-px-Versallabel,
   auf allen Unterseiten als 24-px-Titel. Eine Fassung, site-weit. */
.pg-home .kicker{font-size:24px;font-weight:700;letter-spacing:-.012em;text-transform:none;color:var(--navy)}


/* ============================================================
   LAYOUT-BIBLIOTHEK v6 · 10.08.2026
   Sieben Archetypen, abgeleitet aus den Referenzen. Farben,
   Stufen (104/72/44/24/18/13), Haarlinien und die 3-px-Ecke
   bleiben unveraendert - neu ist allein die Komposition.
   ============================================================ */

/* A · EINSTIEGSKARTE - haengt in die Unterkante des Heros und
   ersetzt die einsame Lede-Zeile durch drei kurze Spalten. */
.heroband{position:relative;z-index:4;margin-top:clamp(-124px,-7.5vw,-56px)}
.heroband .karte{background:#fff;border:1px solid var(--rule);display:grid;
  grid-template-columns:1.2fr 1fr 1fr}
.heroband .karte > div{padding:34px 36px}
.heroband .karte > div + div{border-left:1px solid var(--rule)}
.heroband .karte h2{font-size:24px;letter-spacing:-.012em;line-height:1.25;max-width:15ch;margin:0}
.heroband .karte p{font-size:18px;line-height:1.6;color:var(--muted);margin:0;max-width:34ch}
.pagehero:has(+ .heroband) .pagehero-title{bottom:clamp(96px,11vw,152px)}
@media(max-width:860px){
  .heroband{margin-top:0}
  .heroband .karte{grid-template-columns:1fr}
  .heroband .karte > div + div{border-left:none;border-top:1px solid var(--rule)}
  .pagehero:has(+ .heroband) .pagehero-title{bottom:clamp(24px,3.6vw,52px)}
}

/* B · BILDRASTER - randlose Motivflaeche, Beschriftung steht im
   Bild, eine Zelle traegt als dunkle Kachel den Verweis. */
.bildraster{width:100vw;margin-left:calc(50% - 50vw);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.bildraster > *{position:relative;overflow:hidden;min-height:clamp(210px,21vw,310px);
  color:#fff;display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px 30px;border-radius:0!important}
.bildraster > * > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:0!important;z-index:0}
.bildraster a:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,
  rgba(6,18,31,.78) 0%,rgba(6,18,31,.34) 40%,rgba(6,18,31,.04) 74%,rgba(6,18,31,0) 100%)}
.bildraster h3,.bildraster p,.bildraster .more{position:relative;z-index:2}
.bildraster h3{font-size:24px;letter-spacing:-.012em;line-height:1.25;color:#fff}
.bildraster p{font-size:18px;line-height:1.6;color:#CBD9E6;margin-top:8px;max-width:30ch}
.bildraster a:hover{text-decoration:none}
.bildraster a:hover h3{color:#fff}
.bildraster .br-text{background:var(--navy);justify-content:space-between;padding:34px 32px}
.bildraster .br-text .more{color:var(--sky);margin-top:24px}
@media(max-width:900px){.bildraster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bildraster{grid-template-columns:1fr}}

/* C · BENTO - ungleich grosse Kacheln in einem Vierer-Raster.
   Grosse Kachel traegt das Motiv, kleine tragen den Text. */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(186px,auto);gap:16px}
.bento > *{position:relative;overflow:hidden;border:1px solid var(--rule);background:#fff;
  display:flex;flex-direction:column;color:inherit}
.bento a:hover{text-decoration:none;border-color:var(--accent)}
.bento .b-gross{grid-column:span 2;grid-row:span 2}
.bento .b-breit{grid-column:span 2}
.bento .b-hoch{grid-row:span 2}
.bento .b-foto{border:none;justify-content:flex-end;padding:30px 32px;color:#fff;min-height:0}
.bento .b-foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border-radius:0!important}
.bento .b-foto:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,
  rgba(6,18,31,.80) 0%,rgba(6,18,31,.34) 44%,rgba(6,18,31,0) 78%)}
.bento .b-foto h3,.bento .b-foto p{position:relative;z-index:2;color:#fff}
.bento .b-foto p{color:#CBD9E6}
.bento .b-text{padding:30px 32px;justify-content:space-between}
.bento h3{font-size:24px;letter-spacing:-.012em;line-height:1.25}
.bento p{font-size:18px;line-height:1.6;color:var(--muted);margin-top:10px;max-width:36ch}
.bento .b-oben{flex-grow:0}
.bento .b-bild-oben > img{position:relative;width:100%;height:clamp(140px,14vw,190px);
  object-fit:cover;display:block;border-radius:0!important}
.bento .b-bild-oben{padding:0}
.bento .b-bild-oben .b-inner{padding:24px 26px}
.bento .b-acc{background:var(--navy);border:none;color:#fff}
.bento .b-acc h3{color:#fff}
.bento .b-acc p{color:#CBD9E6}
.bento .b-acc .more{color:var(--sky)}
@media(max-width:940px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento .b-gross,.bento .b-breit{grid-column:span 2}
  .bento .b-hoch{grid-row:auto}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr}
  .bento .b-gross,.bento .b-breit{grid-column:auto;grid-row:auto}
}

/* D · ZAHLBAND - Zahl, Bezeichnung, Erlaeuterung. Drei Zeilen
   statt zwei, dadurch traegt das Band auch ohne Fliesstext. */
.zahlband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule)}
.zahlband > div{padding:34px 24px 0;border-left:1px solid var(--rule);min-width:0}
.zahlband > div:first-child{border-left:none;padding-left:0}
.zahlband > div:last-child{padding-right:0}
/* Die Zahl richtet sich nach der Spaltenbreite, nicht nach dem Bildschirm.
   Die Einheit steht als eigene, kleinere Marke daneben und bricht mit. */
.zahlband .zb-n{font-size:clamp(34px,3.4vw,48px);font-weight:700;letter-spacing:-.022em;
  line-height:1;color:var(--navy);display:flex;align-items:baseline;gap:.14em;flex-wrap:wrap}
.zahlband .zb-e{font-size:.52em;font-weight:700;letter-spacing:-.01em;color:var(--mid)}
.zahlband .zb-l{font-size:18px;font-weight:700;line-height:1.4;margin-top:16px;color:var(--ink)}
.zahlband .zb-t{font-size:13px;line-height:1.6;color:var(--muted);margin-top:10px;max-width:28ch}
@media(max-width:999px){
  .zahlband{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zahlband > div{padding:30px 26px 0}
  .zahlband > div:nth-child(odd){border-left:none;padding-left:0}
  .zahlband > div:nth-child(n+3){margin-top:30px;border-top:1px solid var(--rule);padding-top:30px}
}
@media(max-width:560px){
  .zahlband{grid-template-columns:1fr}
  .zahlband > div{border-left:none;padding:0}
  .zahlband > div + div{margin-top:28px;border-top:1px solid var(--rule);padding-top:28px}
}

/* E · SCHRITTLISTE - Motiv links, nummerierte Stufen rechts.
   Die Ziffer haengt aus, die Haarlinie fuehrt das Auge. */
.schrittliste{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:stretch}
.schrittliste > img{width:100%;height:100%;min-height:clamp(340px,34vw,520px);object-fit:cover}
.schrittliste > ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.schrittliste li{display:flex;gap:22px;padding:26px 0;border-bottom:1px solid var(--rule)}
.schrittliste .sl-n{flex:0 0 56px;font-size:13px;font-weight:700;letter-spacing:.14em;
  color:var(--sky);padding-top:6px}
.schrittliste .sl-t{flex:1 1 auto;min-width:0}
.schrittliste h3{font-size:24px;letter-spacing:-.012em;line-height:1.25;margin-bottom:8px}
.schrittliste p{font-size:18px;line-height:1.6;color:var(--muted);margin:0;max-width:46ch}
@media(max-width:860px){
  .schrittliste{grid-template-columns:1fr;gap:30px}
  .schrittliste > img{min-height:0;aspect-ratio:16/10}
}

/* F · NAMENSBAND - Portrait vor uebergrossem Namenszug.
   Nur fuer die Unternehmensfuehrung. */
.namensband{position:relative;overflow:hidden;background:var(--paper);width:100vw;
  margin-left:calc(50% - 50vw);display:flex;justify-content:center;align-items:flex-end;
  min-height:clamp(340px,40vw,540px)}
.namensband .nb-schrift{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:clamp(56px,11.5vw,180px);font-weight:700;letter-spacing:-.04em;line-height:1;
  color:var(--navy);opacity:.11;white-space:nowrap;user-select:none;z-index:0}
.namensband > img{position:relative;z-index:2;height:clamp(300px,36vw,480px);width:auto;
  object-fit:cover;filter:grayscale(1);border-radius:0!important}
.namensband .nb-rolle{position:absolute;z-index:3;right:8%;bottom:12%;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);
  border:1px solid var(--rule);background:#fff;padding:8px 16px;border-radius:999px!important}
@media(max-width:700px){.namensband .nb-rolle{right:auto;left:6%;bottom:6%}}

/* G · PUNKTLABEL - leises Label mit vorangestelltem Punkt,
   wo die 2-px-Linie des Sektionskopfs zu laut waere. */
.punktlabel{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin-bottom:18px}
.punktlabel:before{content:"";width:6px;height:6px;background:var(--sky);border-radius:50%!important;flex:none}


/* ============================================================
   LAYOUT-BIBLIOTHEK v7 · 10.08.2026
   Fuenf Archetypen nach den Markierungen des Auftraggebers:
   Katalogzeile, Leistungskarten, Faktenkreise, Streumosaik,
   Glaskarte im Motiv. Farben und Stufen unveraendert.
   ============================================================ */

/* H · KATALOGZEILE - Titel links, drei Bildkacheln rechts.
   Die Ueberschrift traegt die Spalte, die Motive stehen im Hochformat. */
.katalog{display:grid;grid-template-columns:.74fr 2.26fr;gap:48px;align-items:start}
.katalog-kopf h2{font-size:clamp(28px,3.06vw,44px);letter-spacing:-.018em;line-height:1.15;margin:0}
.katalog-kopf p{font-size:18px;line-height:1.6;color:var(--muted);margin-top:16px;max-width:26ch}
.katalog-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.katalog-reihe a{display:block;color:inherit}
.katalog-reihe a:hover{text-decoration:none}
.katalog-reihe img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.katalog-reihe h3{font-size:18px;font-weight:700;line-height:1.4;margin-top:16px}
.katalog-reihe p{font-size:13px;line-height:1.6;color:var(--muted);margin-top:4px}
@media(max-width:900px){
  .katalog{grid-template-columns:1fr;gap:30px}
  .katalog-reihe{gap:14px}
}
@media(max-width:560px){.katalog-reihe{grid-template-columns:1fr}.katalog-reihe img{aspect-ratio:16/10}}

/* I · LEISTUNGSKARTEN - fuenf hohe Motivkarten nebeneinander,
   Ziffer oben, Titel und Verweis unten im Bild. */
.leistung{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.leistung > a{position:relative;overflow:hidden;min-height:clamp(300px,31vw,430px);
  display:flex;flex-direction:column;justify-content:space-between;padding:22px 22px 24px;color:#fff}
.leistung > a > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.leistung > a:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,
  rgba(6,18,31,.84) 0%,rgba(6,18,31,.42) 42%,rgba(6,18,31,.06) 78%,rgba(6,18,31,0) 100%)}
.leistung .ls-n,.leistung .ls-u{position:relative;z-index:2}
.leistung .ls-n{font-size:13px;font-weight:700;letter-spacing:.14em;color:#fff;opacity:.82}
.leistung h3{font-size:24px;letter-spacing:-.012em;line-height:1.2;color:#fff;margin:0}
.leistung .more{color:#fff;margin-top:12px;opacity:.86}
.leistung > a:hover{text-decoration:none}
.leistung > a:hover .more{opacity:1}
@media(max-width:1000px){.leistung{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:660px){.leistung{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leistung > a{min-height:240px}.leistung h3{font-size:18px}}

/* J · FAKTENKREISE - ineinandergreifende Kreise unterschiedlicher
   Groesse. Nur fuer drei bis vier Zahlen, sonst wird es unruhig. */
.kreise{display:flex;align-items:center;flex-wrap:wrap;padding:8px 0}
/* Das Innenpolster waechst mit der Flaeche und ist immer groesser als
   der Versatz. Der Textkasten erreicht die Ueberlappungszone dadurch nie. */
.kreis{aspect-ratio:1;border-radius:50%!important;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(24px,2.8vw,40px);flex:none}
.kreis + .kreis{margin-left:clamp(-34px,-2vw,-14px)}
.kreis--gross{width:clamp(190px,21vw,290px)}
.kreis--mittel{width:clamp(160px,17vw,240px)}
.kreis--klein{width:clamp(130px,14vw,196px)}
.kreis .k-n{font-size:clamp(26px,3vw,44px);font-weight:700;letter-spacing:-.022em;line-height:1}
.kreis .k-t{font-size:13px;line-height:1.5;margin-top:10px;max-width:14ch}
.k-sky{background:#DBE6F1;color:var(--navy)}
.k-sky .k-t{color:var(--mid)}
.k-paper{background:#fff;color:var(--navy)}
.k-paper .k-t{color:var(--muted)}
.k-navy{background:var(--navy);color:#fff}
.k-navy .k-t{color:#9FB8CE}
.kreise-text{font-size:18px;line-height:1.6;color:var(--muted);max-width:30ch;margin-left:clamp(16px,3vw,44px)}
@media(max-width:760px){
  .kreise{gap:14px}
  .kreis + .kreis{margin-left:-14px}
  .kreise-text{margin:20px 0 0}
}

/* K · STREUMOSAIK - versetzte Kaertchen auf ruhigem Verlauf.
   Gibt der Flaeche Luft, ohne dass sie leer wirkt. */
.streu{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  background:linear-gradient(148deg,#E4EDF5 0%,#F6F9FC 52%,#E8F0F7 100%);
  padding:clamp(56px,7vw,104px) 0}
/* Der Versatz kommt aus margin-top, nicht aus festen Zeilenspannen: der
   Inhalt bestimmt die Hoehe, und zwischen den Kaertchen bleibt Luft. */
.streu-innen{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start}
.streu-k{background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.86);
  backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
  padding:22px 24px 24px;display:flex;flex-direction:column;justify-content:space-between}
.streu-k .s-n{font-size:clamp(26px,2.9vw,42px);font-weight:700;letter-spacing:-.022em;
  line-height:1;color:var(--navy)}
.streu-k .s-t{font-size:13px;line-height:1.6;color:var(--mid);margin-top:auto;padding-top:16px}
.streu-k:nth-child(1){grid-column:1 / span 3;grid-row:1;margin-top:0}
.streu-k:nth-child(2){grid-column:4 / span 3;grid-row:1;margin-top:54px}
.streu-k:nth-child(3){grid-column:7 / span 3;grid-row:1;margin-top:0}
.streu-k:nth-child(4){grid-column:10 / span 3;grid-row:1;margin-top:108px}
.streu-k:nth-child(5){grid-column:4 / span 3;grid-row:2;margin-top:24px}
.streu-kopf{max-width:var(--maxw);margin:0 auto clamp(28px,4vw,52px);padding:0 24px}
.streu-kopf h2{font-size:clamp(28px,3.06vw,44px);letter-spacing:-.018em;line-height:1.15;margin:0;color:var(--navy)}
@media(max-width:900px){
  .streu-innen{grid-template-columns:1fr;gap:14px}
  .streu-k{grid-column:1 / -1 !important;grid-row:auto !important;min-height:0;margin-top:0!important}
}

/* L · GLASKARTE IM MOTIV - Aussage in einer Milchglasflaeche,
   die auf dem vollflaechigen Bild liegt. */
.glasbild{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
  min-height:clamp(380px,46vw,640px);display:flex;align-items:flex-end}
.glasbild > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border-radius:0!important}
.glasbild:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,
  rgba(6,18,31,.42) 0%,rgba(6,18,31,.12) 40%,rgba(6,18,31,0) 72%)}
.glaswrap{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 24px clamp(30px,4vw,56px)}
.glaskarte{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);
  padding:30px 34px 32px;max-width:44ch;color:#fff}
.glaskarte h3{font-size:24px;letter-spacing:-.012em;line-height:1.3;color:#fff;margin:0}
.glaskarte p{font-size:18px;line-height:1.6;color:#DCE6EF;margin-top:10px}
.glaskarte .more{color:#fff;margin-top:20px;display:inline-flex}
.glaskarte .more:hover{color:#fff}
@media(max-width:560px){.glaskarte{padding:24px 24px 26px}}


/* ============================================================
   M · RASTERMOSAIK IM MOTIV · 10.08.2026
   Die Kaertchen aus K liegen auf einem vollflaechigen Bild.
   Startspalten bleiben 1, 4, 7 und 10; versetzt wird nur in
   der Hoehe. Dadurch wirkt die Flaeche luftig, ohne beliebig
   zu werden.
   ============================================================ */
.streu--bild{background:var(--navy);overflow:hidden}
.streu--bild > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;border-radius:0!important}
.streu--bild:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,
  rgba(6,18,31,.34) 0%,rgba(6,18,31,.12) 34%,rgba(6,18,31,.30) 100%)}
.streu--bild .streu-kopf,.streu--bild .streu-innen{position:relative;z-index:2}
.streu--bild .streu-kopf h2{color:#fff}
.streu--bild .streu-k{background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.7)}
.streu--bild .streu-k:nth-child(2n){background:rgba(18,50,79,.80);border-color:rgba(255,255,255,.22)}
.streu--bild .streu-k:nth-child(2n) .s-n{color:#fff}
.streu--bild .streu-k:nth-child(2n) .s-t{color:#CBD9E6}


/* ============================================================
   STREUMOSAIK: Belegung fuer drei und sechs Kaertchen
   Die Startspalten bleiben Vielfache des Rasters; verteilt wird
   nur, damit keine Spalte leer ins Nichts laeuft.
   ============================================================ */
@media(min-width:861px){
  .streu-innen--drei .streu-k:nth-child(1){grid-column:1 / span 4;grid-row:1;margin-top:0}
  .streu-innen--drei .streu-k:nth-child(2){grid-column:5 / span 4;grid-row:1;margin-top:64px}
  .streu-innen--drei .streu-k:nth-child(3){grid-column:9 / span 4;grid-row:1;margin-top:24px}
  .streu-innen--sechs .streu-k:nth-child(1){grid-column:1 / span 3;grid-row:1;margin-top:0}
  .streu-innen--sechs .streu-k:nth-child(2){grid-column:4 / span 3;grid-row:1;margin-top:54px}
  .streu-innen--sechs .streu-k:nth-child(3){grid-column:7 / span 3;grid-row:1;margin-top:0}
  .streu-innen--sechs .streu-k:nth-child(4){grid-column:10 / span 3;grid-row:1;margin-top:108px}
  .streu-innen--sechs .streu-k:nth-child(5){grid-column:1 / span 3;grid-row:2;margin-top:40px}
  .streu-innen--sechs .streu-k:nth-child(6){grid-column:7 / span 3;grid-row:2;margin-top:0}
}

/* Breite Bento-Kachel: der Satzspiegel darf die Flaeche nutzen */
.bento .b-breit p{max-width:58ch}


/* ============================================================
   DEUTSCHE KOMPOSITA · 10.08.2026
   Ursache: Wörter wie Genehmigungen oder Halbleiterfertigung sind
   breiter als eine schmale Rasterspalte und brechen ohne Anweisung
   nicht. Das trifft jede neue Redaktion, nicht einzelne Wörter.
   Die Seiten tragen lang="de-CH", die Silbentrennung greift also.
   ============================================================ */
.streu-k,.streu-k .s-n,.streu-kopf h2,
.bento h3,.bento p,.zahlband .zb-l,.zahlband .zb-t,
.bildraster h3,.katalog h3,.leistung h3,.kreis .k-t,.glaskarte h3{
  overflow-wrap:normal}

/* Sechser-Fassung des Streumosaiks auf dieselbe Spaltenbreite wie die
   Dreier-Fassung: drei Kärtchen je Reihe, versetzt wird nur in der Höhe. */
@media(min-width:861px){
  .streu-innen--sechs .streu-k:nth-child(1){grid-column:1 / span 4;grid-row:1;margin-top:0}
  .streu-innen--sechs .streu-k:nth-child(2){grid-column:5 / span 4;grid-row:1;margin-top:64px}
  .streu-innen--sechs .streu-k:nth-child(3){grid-column:9 / span 4;grid-row:1;margin-top:24px}
  .streu-innen--sechs .streu-k:nth-child(4){grid-column:1 / span 4;grid-row:2;margin-top:40px}
  .streu-innen--sechs .streu-k:nth-child(5){grid-column:5 / span 4;grid-row:2;margin-top:0}
  .streu-innen--sechs .streu-k:nth-child(6){grid-column:9 / span 4;grid-row:2;margin-top:72px}
}


/* ============================================================
   IKONEN IM VERHAELTNIS ZUR UEBERSCHRIFT · 10.08.2026
   Die Marke stand bisher kleiner als die Zeile daneben und wirkte
   dadurch angeheftet. Ab hier ist sie eine Spur groesser als die
   Zeilenhoehe der Ueberschrift, an der sie steht.
   ============================================================ */
.pg-home .mx-h svg{width:38px;height:38px;margin-top:-4px}
.pg-home .ich svg{width:52px;height:52px}
@media(max-width:760px){
  .pg-home .mx-h svg{width:34px;height:34px;margin-top:0}
  .pg-home .ich svg{width:42px;height:42px}
}


/* ============================================================
   NACHRICHTENRASTER UND OVERLAY · 10.08.2026 (Seite Aktuelles)
   Aufmacher plus Raster, beides in der Linienfuehrung der Site.
   Die Beitraege oeffnen zentral ueber stark geblurrtem Grund;
   jeder Beitrag bleibt zusaetzlich als eigene Seite erreichbar.
   ============================================================ */
.nmeta{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mid);margin-bottom:12px;display:block}

/* Aufmacher: Motiv links, Text rechts */
.news-lead{display:grid;grid-template-columns:1.12fr .88fr;align-items:stretch;
  border-top:2px solid var(--rule-stark);color:inherit}
.news-lead img{width:100%;height:100%;min-height:360px;object-fit:cover;display:block}
.news-lead .nl-txt{padding:38px 0 34px 44px;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;min-width:0}
.news-lead h2{font-size:clamp(28px,3.2vw,44px);line-height:1.15;letter-spacing:-.02em;margin-bottom:14px}
.news-lead p{font-size:18px;line-height:1.6;color:var(--muted);max-width:44ch;margin-bottom:22px}
.news-lead:hover h2{color:var(--accent)}
@media(max-width:860px){
  .news-lead{grid-template-columns:1fr}
  .news-lead img{min-height:0;aspect-ratio:16/10}
  .news-lead .nl-txt{padding:28px 0 30px}
}

/* Raster: Haarlinien statt Kaesten, gleiche Logik wie die uebrigen Raster */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--rule);margin-top:0}
.nkarte{padding:34px 30px 0;border-left:1px solid var(--rule);color:inherit;min-width:0;
  display:flex;flex-direction:column}
.nkarte img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;margin-bottom:18px}
.nkarte h3{font-size:24px;line-height:1.25;letter-spacing:-.012em;margin-bottom:10px}
.nkarte p{font-size:18px;line-height:1.6;color:var(--muted);margin-bottom:18px;flex-grow:1}
.nkarte .more{margin-top:auto}
.nkarte:hover{text-decoration:none}
.nkarte:hover h3{color:var(--accent)}
@media(max-width:860px){
  .news-grid{grid-template-columns:1fr}
  .nkarte{border-left:none;padding:30px 0 0}
  .nkarte + .nkarte{border-top:1px solid var(--rule)}
}

/* Overlay: zentral, Grund massiv geblurrt */
.nmodal{position:fixed;inset:0;z-index:300;display:none;border-radius:0}
.nmodal:target{display:block}
html:has(.nmodal:target){overflow:hidden}
.nmodal-hg{position:absolute;inset:0;display:block;border-radius:0;
  background:rgba(11,31,51,.30);
  backdrop-filter:blur(46px) saturate(1.25) brightness(.88);
  -webkit-backdrop-filter:blur(46px) saturate(1.25) brightness(.88)}
.nmodal-karte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(760px,92vw);max-height:88vh;overflow-y:auto;background:#fff;
  box-shadow:0 40px 90px rgba(11,31,51,.30)}
.nmodal-karte img{width:100%;height:min(300px,32vh);object-fit:cover;display:block;border-radius:0!important}
.nmodal-zu{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%!important;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  font-size:19px;line-height:1;color:var(--navy);z-index:3}
.nmodal-zu:hover{background:#fff;text-decoration:none}
.nmodal-inhalt{padding:34px clamp(24px,4vw,52px) 44px}
.nmodal-inhalt h2{font-size:clamp(26px,3vw,38px);line-height:1.18;letter-spacing:-.018em;margin-bottom:16px}
.nmodal-inhalt p{font-size:18px;line-height:1.6;margin-bottom:16px;max-width:62ch}
.nmodal-inhalt p:last-of-type{margin-bottom:0}
.nmodal-fuss{border-top:1px solid var(--rule);margin-top:26px;padding-top:20px}
@media(max-width:700px){
  .nmodal-karte{width:94vw;max-height:92vh}
  .nmodal-karte img{height:min(210px,26vh)}
}
@media (prefers-reduced-motion:reduce){.nmodal-hg{transition:none}}


/* ============================================================
   LINIEN 10.08.2026
   Trennlinien tragen hoechstens die halbe Deckkraft, damit sie
   den Inhalt fuehren statt ihn zu zerschneiden. Enden laufen
   wieder rechtwinklig aus.
   ============================================================ */
:root{--rule:rgba(11,31,51,.18);--rule-stark:rgba(11,31,51,.42)}
.kicker,.tiles.zaehl .tile,.defgrid > div,.arch-weg .tile.step,.stats > div,
.arch-zahlen .stats > div,.zahlband > div,.person,.fnbox,.fbot,
.schrittliste,.schritt,.tablist label,.evd,.step,
.pagehero-lede,.statement,.m-data .drow,.nmodal-fuss{border-radius:0}


/* ============================================================
   BEITRAGSLISTE 10.08.2026 · Karten statt Haarlinien
   Der Einstieg lag als zweiter Textblock lose unter der Lede;
   er steht jetzt als Unterzeile im Kopf. Die Beitraege sind
   echte Kaesten in einem Raster mit zwei Spalten, gleicher
   Kantenlaenge und der Eckenrundung der uebrigen Website.
   ============================================================ */

/* Aufmacher: ein Kasten, Motiv buendig in der Kante */
.news-lead{grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--rule);
  border-top:1px solid var(--rule);border-radius:var(--rad);overflow:hidden;background:#fff;
  transition:border-color .18s ease}
.news-lead:hover{border-color:var(--accent);text-decoration:none}
.pg-dok main .news-lead img{min-height:340px;border-radius:0!important}
.news-lead .nl-txt{padding:clamp(30px,3.4vw,46px)}
.news-lead p{max-width:42ch}

/* Raster: zwei Spalten, gleiche Kaesten, Abstand statt Trennlinie */
.news-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;border-top:none;margin-top:20px}
.nkarte{border:1px solid var(--rule);border-radius:var(--rad);overflow:hidden;background:#fff;
  padding:0 0 clamp(24px,2.6vw,30px);transition:border-color .18s ease}
.nkarte:hover{border-color:var(--accent)}
.pg-dok main .nkarte img{aspect-ratio:16/9;margin-bottom:clamp(22px,2.4vw,28px);border-radius:0!important}
.nkarte .nmeta,.nkarte h3,.nkarte p,.nkarte .more{padding-left:clamp(24px,2.6vw,30px);padding-right:clamp(24px,2.6vw,30px)}
.nkarte p{max-width:46ch}

@media(max-width:860px){
  .news-lead{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr;gap:18px;margin-top:18px}
  .nkarte{border-left:1px solid var(--rule);padding:0 0 26px}
  .nkarte + .nkarte{border-top:1px solid var(--rule)}
}

/* Der Kopf traegt den Abstand; die Liste setzt direkt darunter an */
.pg-dok .sek#aktuell{padding-top:clamp(30px,3.4vw,46px)}


/* ============================================================
   ABSATZRHYTHMUS AUSSERHALB VON .prose · 10.08.2026
   Der Abstand zwischen Absaetzen war allein in .prose definiert.
   Bausteine mit mehreren Absaetzen standen dadurch als Textwand.
   Gleiche 16er-Stufe wie im Fliesstext, ohne Rand am Ende.
   ============================================================ */
/* Nur Bausteine ohne eigenen Absatzabstand; .defgrid, .tanband und
   .hbrow bringen ihren Rhythmus bereits mit. */
.person p + p,.orgbox p + p,.tile p + p,.weiter-karte p + p,
.mx-card p + p{margin-top:16px}


/* ============================================================
   KONTAKTBAND · 10.08.2026
   Ein Kanal, eine Adresse. Die Adresse selbst ist der Hoehepunkt
   der Seite und traegt Stufe 2. Die Linie laeuft beim Zeigen ein.
   ============================================================ */
.kontaktband{background:var(--paper)}
.kontaktband .punktlabel{display:flex;width:fit-content}
.kb-mail{display:inline-block;max-width:100%;font-size:clamp(26px,5.2vw,72px);font-weight:700;
  letter-spacing:-.03em;line-height:1.04;color:var(--navy);overflow-wrap:anywhere}
.kb-mail:hover{color:var(--accent);text-decoration:none}
.kb-mail:after{content:"";display:block;height:2px;background:var(--accent);margin-top:clamp(10px,1.2vw,18px);
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.kb-mail:hover:after{transform:scaleX(1)}
.kb-zusage{font-size:18px;line-height:1.6;color:var(--muted);max-width:52ch;margin-top:clamp(20px,2.4vw,32px)}
@media (prefers-reduced-motion:reduce){.kb-mail:after{transition:none}}

/* Betreffzeilen im Definitionsraster: der Verweis sitzt unten buendig */
.defgrid > div{display:flex;flex-direction:column}
.defgrid .more{margin-top:auto;padding-top:20px}


/* ============================================================
   LAYOUT-BIBLIOTHEK v8 · Neufassung der Texte, 10.08.2026
   Drei Bausteine, die die neue Redaktion braucht: numerierter
   Stufenkopf, zweispaltiges Definitionsraster, Themenliste.
   Farben, Stufen und Haarlinien bleiben unveraendert.
   ============================================================ */

/* Stufenkopf: die Ziffer steht neben dem Sektionstitel, nicht darueber */
.stufe{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 26px;align-items:baseline;
  border-top:2px solid var(--rule-stark);padding-top:24px;margin-bottom:30px}
.stufe .st-n{font-size:clamp(34px,3.4vw,48px);font-weight:700;letter-spacing:-.022em;
  line-height:1;color:var(--sky)}
.stufe h2{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.014em;line-height:1.2;margin:0}
@media(max-width:600px){.stufe{grid-template-columns:1fr;gap:8px}}

/* Definitionsraster in zwei Spalten, fuer vier gleichrangige Bloecke */
.defgrid--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.defgrid--zwei > div:nth-child(2n){border-left:1px solid var(--rule)}
.defgrid--zwei > div:nth-child(n+3){border-top:1px solid var(--rule)}
@media(max-width:820px){
  .defgrid--zwei{grid-template-columns:1fr}
  .defgrid--zwei > div:nth-child(2n){border-left:none}
}

/* Themenliste: Titel und Einordnung in einer Haarlinienreihe.
   Fuer Uebersichten ohne Datum und ohne Motiv. */
.themenliste{border-top:2px solid var(--rule-stark)}
.themenliste a{display:grid;grid-template-columns:56px minmax(0,1.05fr) minmax(0,1fr) 34px;
  gap:0 28px;align-items:start;padding:30px 4px;border-bottom:1px solid var(--rule);color:inherit}
.themenliste a:hover{text-decoration:none;background:var(--paper)}
.themenliste .th-n{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--sky);padding-top:7px}
.themenliste h2{font-size:24px;letter-spacing:-.012em;line-height:1.3;margin:0}
.themenliste p{font-size:18px;line-height:1.6;color:var(--muted);margin:0}
.themenliste .th-pfeil{font-size:23px;font-weight:700;color:var(--accent);line-height:1.3;
  justify-self:end;transition:transform .18s ease}
.themenliste a:hover .th-pfeil{transform:translateX(5px)}
@media(max-width:860px){
  .themenliste a{grid-template-columns:44px minmax(0,1fr);gap:10px 14px;padding:24px 0}
  .themenliste p{grid-column:2}
  .themenliste .th-pfeil{display:none}
}

/* Belegmarken: die Neufassung belegt im Fliesstext, nicht nur am Fuss.
   Die alte Regel "p sup.fn{display:none}" stammt aus einer Fassung ohne
   Quellenapparat und wird hier zurueckgenommen. */
p sup.fn{display:inline}
sup.fn{font-size:11px;line-height:0}
sup.fn a{color:var(--mid)}
sup.fn a:hover{color:var(--accent)}
sup.fn + sup.fn{margin-left:2px}
.b-acc sup.fn a,.glaskarte sup.fn a,.streu--bild sup.fn a,.bildraster sup.fn a{color:var(--sky)}

/* Quellenliste im dunklen Band: die Belege tragen jetzt echte Verweise */
.fnbox summary{cursor:pointer}
.fnl li{padding-left:28px}
.fnl li a{color:var(--sky);border-bottom:1px solid rgba(127,166,201,.42)}
.fnl li a:hover{color:#fff;text-decoration:none;border-bottom-color:#fff}
.fnl li i{font-style:italic}
.fnl li{font-size:13px}
.pg-home main .fnl li,.pg-v2 main .fnl li{font-size:13px;line-height:1.55}

/* Faktenkreise: die Einheit steht als eigene, kleinere Marke in der Zahl.
   Dieselbe Logik wie zb-e im Zahlband; die Beschriftung bleibt dadurch
   auf den 14 Zeichen, fuer die der Kreis gebaut ist. */
.kreis .k-n{display:flex;align-items:baseline;justify-content:center;gap:.14em;flex-wrap:wrap}
.kreis .k-e{font-size:.42em;font-weight:700;letter-spacing:-.01em;opacity:.78}

/* Lede-Augenbraue unter dem Hero: das Punktlabel steht ueber der Stufe 3 */
.pagehero-lede .punktlabel{margin-bottom:16px}


/* ============================================================
   FASSUNG v9 · 11.08.2026
   Drei Anmerkungen aus der Abnahme, in dieser Reihenfolge:
   1 · Der Satz laeuft rund, darf aber zehn Prozent kleiner sein.
   2 · Die Abschnitte brauchen deutlich mehr Luft.
   3 · Die Seite lehnt nach links. Rechts fehlt ein Gegengewicht.
   Farben, Archetypen und Raster bleiben unveraendert.
   ============================================================ */

/* --- 1 · Stufenskala minus zehn Prozent -------------------- */
/* Stufe 1 */
.pagehero .pagehero-title h1,
.pagehero-full .pagehero-title h1,
.pagehero-full .pagehero-title h1.hero-eins,
.pagehero-text h1{font-size:clamp(40px,6.5vw,94px)}
.pg-home .pagehero-full .pagehero-title h1.hero-eins,
.pagehero-full .pagehero-title h1.hero-eins{font-size:clamp(25px,3.35vw,49px)}
@media(max-width:760px){
  .pagehero-full .pagehero-title h1.hero-eins{font-size:clamp(31px,8.5vw,47px)!important}
}
/* Stufe 2 */
.pg-v2 .lead-claim,.lead-claim{font-size:clamp(26px,3.24vw,40px)}
.streu-kopf h2,.katalog-kopf h2{font-size:clamp(26px,2.76vw,40px)}
.zahlband .zb-n,.stufe .st-n{font-size:clamp(31px,3.06vw,43px)}
.streu-k .s-n{font-size:clamp(24px,2.6vw,38px)}
.kreis .k-n{font-size:clamp(24px,2.7vw,40px)}
/* Stufe 3 */
.pagehero-lede p,.pagehero-lede > .wrap > p:first-child{font-size:clamp(22px,2.8vw,40px)}
.pg-v2 .kicker,.kicker{font-size:22px}
.ich h2,.sek-titel{font-size:clamp(22px,2.7vw,29px)}
.stufe h2,.mx-band h2{font-size:clamp(22px,2.7vw,29px)}
.tile h3,.bento h3,.weiter-karte h3,.ecard h3,.themenliste h2,
.defgrid h3,.schrittliste h3,.bildraster h3,.glaskarte h3,
.heroband .karte h2,.leistung h3,.mx-h h3,
.pg-v2 .teaser .weiter-karte h3{font-size:22px}
/* Stufe 4 */
body{font-size:15.5px}
.pg-v2 .prose p,.prose p,.pg-v2 .sek > .wrap > p,.pg-v2 .tile p{font-size:16.5px}
.kopfsatz,.pagehero-lede .subline,.hero-zwei,
.tile p,.bento p,.weiter-karte p,.ecard p,.defgrid p,.schrittliste p,
.bildraster p,.glaskarte p,.themenliste p,.kreise-text,
.heroband .karte p,.kb-zusage,.nlrow p,.zahlband .zb-l,.tanlede,
.pg-v2 .teaser .weiter-karte p,.katalog-reihe h3,.adresse{font-size:16.5px}
.hero-zwei{font-size:clamp(15px,1.32vw,19px)}
.mx-card p{font-size:14px}
/* Stufe 5 */
.more,.ecard .more,.punktlabel,.badge,.crumbs,.meta-datum,.nmeta,
.themenliste .th-n,.schrittliste .sl-n,.hero-augenbraue,.zahlband .zb-t,
.streu-k .s-t,.kreis .k-t,.katalog-reihe p,.fhinweis,
.fnl li,.pg-home main .fnl li,.pg-v2 main .fnl li,.fnbox summary{font-size:12px}
.btn-o,.hero-cta,.teaser a,.nlform input,.nlform button{font-size:14px}

/* --- 2 · Mehr Luft ---------------------------------------- */
section.sek,.pg-v2 .sek,.pg-home .sek{padding:clamp(84px,9.4vw,132px) 0}
.pagehero-lede > .wrap{padding-top:clamp(46px,5.4vw,84px);padding-bottom:clamp(40px,4.6vw,70px)}
.textbild{gap:clamp(44px,4.8vw,68px)}
.schrittliste{gap:clamp(40px,4.6vw,64px)}
.schrittliste li{padding:30px 0}
.bento,.tiles,.weiter{gap:22px}
.teaser{padding:clamp(72px,8vw,116px) 0}
.mx{padding:clamp(80px,9vw,124px) 0}
.streu{padding:clamp(76px,8.6vw,124px) 0}
.nlband{padding:clamp(72px,8vw,116px) 0}
.defgrid > div{padding:40px 40px}
.defgrid > div:first-child{padding-left:0}
.defgrid > div:last-child{padding-right:0}
.zahlband > div{padding:40px 26px 0}
.zahlband > div:first-child{padding-left:0}
.kopfsatz{margin-bottom:44px}
.ich,.sek-titel{margin-bottom:26px}
.stufe{margin-bottom:38px}
.glasbild,.streu{margin-top:0}

/* --- 3 · Masslinie am rechten Rand ------------------------ */
/* Haarlinie und stehende Marke im Aussenraum: 19.08.2026 entfernt. */
.sek[data-marke],[data-marke]{position:relative}
@media(min-width:1220px){
  [data-marke]::before,[data-marke]::after{content:none;display:none}
}

/* --- Mosaik auf der Startseite: sechs Kacheln statt fuenf -- */
.pg-home .mx-grid{grid-template-rows:none;grid-auto-rows:minmax(268px,auto)}
.pg-home .mx-tall{grid-row:1 / 3}
.mx-breit{grid-column:1 / -1;min-height:0;flex-direction:row;align-items:flex-start;
  gap:clamp(28px,3.4vw,52px)}
.mx-breit .mx-h{margin-bottom:0;flex:0 0 32%}
.mx-breit p{flex:1 1 auto;max-width:64ch}
@media(max-width:920px){
  .pg-home .mx-tall{grid-row:auto}
  .mx-breit{flex-direction:column;gap:14px}
  .mx-breit .mx-h{flex:none}
}
/* Ohne Ikone traegt die Zeile allein; das Polster entfaellt */
.pg-home .mx-h{gap:0}

/* --- Helium-Brief im Streumosaik auf dem Bergmotiv -------- */
@media(min-width:861px){
  .streu-innen--brief .streu-k:nth-child(1){grid-column:1 / span 3;grid-row:1;margin-top:0}
  .streu-innen--brief .streu-k:nth-child(2){grid-column:4 / span 3;grid-row:1;margin-top:56px}
  .streu-innen--brief .streu-k:nth-child(3){grid-column:7 / span 6;grid-row:1;margin-top:16px}
}
.streu-k--brief{gap:20px}
.streu-k--brief .nlform{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.streu-k--brief .nlform input{flex:1 1 240px;min-width:0;border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.14);color:#fff;padding:13px 15px;font-family:inherit}
.streu-k--brief .nlform input::placeholder{color:#CBD9E6}
.streu-k--brief .nlform button{border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.16);
  color:#fff;font-weight:700;padding:13px 26px;cursor:pointer;font-family:inherit;
  transition:background .18s ease,border-color .18s ease}
.streu-k--brief .nlform button:hover{background:#fff;color:var(--navy);border-color:#fff}
.streu--bild .streu-k--brief{background:rgba(18,50,79,.82);border-color:rgba(255,255,255,.24)}
.streu--bild .streu-k--brief .s-n{color:#fff}
.streu--bild .streu-k--brief .s-t{color:#CBD9E6}

/* Zitatband: eine Spur ruhiger, damit es neben dem Mosaik traegt */
.quoteband{padding:clamp(76px,8.6vw,120px) 0}
.quoteband .q,.pg-home .quoteband p.q{font-size:clamp(20px,2.42vw,29px);line-height:1.42;max-width:40ch}

/* --- Startseite: dieselbe Skala gegen den alten pg-home-Block ---
   Die Regeln aus der v10-Fassung greifen mit ".pg-home main" und
   schlagen jede einstufige Angabe. Deshalb steht die Skala hier
   noch einmal auf derselben Stufe. */
.pg-home main h2,.pg-home .sek-titel,.pg-home main .ich h2{font-size:clamp(22px,2.7vw,29px)}
.pg-home main .streu-kopf h2{font-size:clamp(26px,2.76vw,40px)}
.pg-home main .mx-band h2{font-size:clamp(22px,2.7vw,29px)}
.pg-home main p,.pg-home main li,.pg-home main .prose p,
.pg-home main .kopfsatz{font-size:16.5px}
.pg-home main .mx-card p{font-size:14px}
.pg-home main h3,.pg-home .mx-h h3,.pg-home .ich h3,
.pg-home main .bento h3,.pg-home main .ecard h3,
.pg-home main .schrittliste h3,.pg-home main .glaskarte h3,
.pg-home main .weiter-karte h3,.pg-home .teaser .weiter-karte h3{font-size:22px}
.pg-home main .kicker,.pg-home .kicker{font-size:22px}
.pg-home a.more,.pg-home .more,.pg-home main .more,
.pg-home main .punktlabel,.pg-home main .hero-augenbraue,
.pg-home main .schrittliste .sl-n,.pg-home main .zahlband .zb-t,
.pg-home main .streu-k .s-t{font-size:12px}
.pg-home main .zahlband .zb-l,.pg-home main .weiter-karte p,
.pg-home main .bento p,.pg-home main .ecard p,
.pg-home main .glaskarte p,.pg-home main .schrittliste p{font-size:16.5px}
.pg-home main .zahlband .zb-n{font-size:clamp(31px,3.06vw,43px)}
.pg-home main .streu-k .s-n{font-size:clamp(24px,2.6vw,38px)}
.pg-home main .hero-zwei{font-size:clamp(15px,1.32vw,19px)}
.pg-home main .btn-o,.pg-home main .hero-cta,.pg-home .teaser a,
.pg-home main .nlform input,.pg-home main .nlform button{font-size:14px}
.pg-home .fnl li{font-size:12px}


/* Vier-Grundlagen-Mosaik: die breite Karte schliesst die zweite Zeile */
.pg-home .mx-grid--vier .mx-breit{grid-column:2 / -1}
@media(max-width:920px){.pg-home .mx-grid--vier .mx-breit{grid-column:1 / -1}}

/* Strukturliste: nummerierte Zeilen an Haarlinien */
.strukturliste{border-top:1px solid var(--rule)}
.strukturliste > div{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,44px);
  padding:20px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.strukturliste .st-i{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--muted);
  font-variant-numeric:tabular-nums}
.strukturliste p{margin:0;font-size:18px;line-height:1.55;color:var(--ink);max-width:none}
@media(max-width:600px){.strukturliste > div{grid-template-columns:1fr;gap:4px}}

/* Bento: Kachel ueber die ganze Rasterbreite */
.bento .b-voll{grid-column:1 / -1}


/* ============================================================
   MOBIL-FASSUNG · 15.08.2026
   Befund aus der Durchsicht am Telefon, in dieser Reihenfolge:
   1 · Das Menue lag als zweispaltiges Raster im Panel und war
       bei geringer Bauhoehe nicht vollstaendig erreichbar.
   2 · Der Satz stand auf 15.5 px, die Abschnitte trugen 84 px
       Luft. Auf 390 px Breite ist das zu klein und zu weit.
   3 · Formularfelder unter 16 px loesen in iOS Safari den
       Zoom beim Antippen aus.
   4 · Deutsche Komposita brachen in Ueberschriften nicht.
   5 · Bedienflaechen lagen unter 44 px.
   Farben, Archetypen und Raster bleiben unveraendert.
   ============================================================ */

/* --- 1 · Menue: eine Spalte, scrollbar, groessere Flaechen --- */
@media(max-width:700px){
  .dpanel{max-height:calc(100svh - 56px);overflow-y:auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .dgrid{grid-template-columns:1fr!important;gap:26px;padding:26px 20px 40px}
  .dhead{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    padding-bottom:12px;margin-bottom:4px}
  .dgrid a:not(.dhead){font-size:18px;padding:11px 0}
  .dcol--solo .dhead{padding:11px 0;border-bottom:none}
  details.drawer summary{padding:16px 0 16px 18px}
}

/* --- 2 · Satz und Rhythmus auf Telefonmass ------------------ */
@media(max-width:700px){
  body{font-size:16px}
  section.sek,.pg-v2 .sek,.pg-home .sek{padding:60px 0}
  .mx{padding:60px 0}
  .streu{padding:56px 0}
  .teaser,.nlband{padding:56px 0}
  .quoteband{padding:56px 0}
  .kopfsatz{margin-bottom:30px}
  .ich,.sek-titel{margin-bottom:20px}
  .stufe{margin-bottom:28px}
  .pg-v2 .kicker,.kicker,.pg-home .kicker,.pg-home main .kicker{font-size:19px;margin-bottom:20px}
  .mx-card p,.pg-home main .mx-card p{font-size:15.5px}
  .textbild{gap:26px}
  .schrittliste{gap:28px}
  .bento,.tiles,.weiter{gap:16px}
  .fnbox{margin-top:40px}
}

/* --- 3 · Formularfelder ohne iOS-Zoom ----------------------- */
@media(max-width:700px){
  input,select,textarea,
  .nlform input,.pg-home main .nlform input,
  .streu-k--brief .nlform input{font-size:16px}
  .nlform{flex-wrap:wrap;gap:10px}
  .nlform input{min-width:0;flex:1 1 100%;border-right:1px solid var(--rule)}
  .nlform .btn-o,.nlform button,.streu-k--brief .nlform button{flex:1 1 100%;text-align:center}
}

/* --- 4 · Komposita brechen auch in Ueberschriften ----------- */
@media(max-width:700px){
  h1,h2,h3,.sek-titel,.lead-claim,.pagehero-lede p,.kb-mail,
  .streu-kopf h2,.katalog-kopf h2,.news-lead h2,.nkarte h3{
    overflow-wrap:normal}
}

/* --- 5 · Bedienflaechen auf 44 px --------------------------- */
@media(max-width:700px){
  .btn-o,.hero-cta{padding:14px 24px}
  .more,a.more,.stlink,.qlink,.mx-link{padding:6px 0;display:inline-block}
  .fcols a,.fbot a,.dgrid a{min-height:0}
  .fnbox summary{padding:20px 0}
}

/* --- 6 · Hero: Titelblock etwas hoeher, Unterzeile knapper -- */
@media(max-width:700px){
  .pagehero-full .pagehero-title{bottom:clamp(30px,5.5vh,64px)}
  .hero-augenbraue{margin-bottom:10px;letter-spacing:.14em}
  .hero-zwei,.pg-home main .hero-zwei{font-size:16px;line-height:1.5;margin-top:14px}
  .hero-cta{margin-top:22px}
}

/* --- 7 · Zitatband: Signet kleiner, Text fuehrt ------------- */
@media(max-width:700px){
  .qrow{gap:24px}
  .avatar{width:84px;height:84px;font-size:26px}
  .quoteband .q,.pg-home .quoteband p.q{font-size:21px;line-height:1.4;max-width:none}
}

/* --- 8 · Mosaikkarten: Polster auf Telefonmass -------------- */
@media(max-width:700px){
  .mx-card{padding:26px 24px}
  .mx-imgzone{margin:18px -24px 0}
  .mx-imgzone .bslot,.mx-imgzone img.bimg{min-height:220px}
  .mx-tall{padding-bottom:0}
  .weiter-karte{padding:26px 24px}
  .streu-k{padding:20px 22px 22px}
}

/* --- 9 · Faktenkreise: versetzte Kette statt gedraengter Reihe */
@media(max-width:560px){
  .kreise{flex-direction:column;align-items:flex-start;gap:0}
  .kreis + .kreis{margin-left:clamp(26px,9vw,52px);margin-top:-20px}
  .kreis--gross{width:min(62vw,240px)}
  .kreis--mittel{width:min(54vw,210px)}
  .kreis--klein{width:min(46vw,180px)}
  .kreise-text{margin:24px 0 0;max-width:none}
}

/* --- 10 · Satzspiegel auf schmalen Geraeten ----------------- */
@media(max-width:420px){
  .wrap,.streu-innen,.streu-kopf,.fnbox{padding-left:20px;padding-right:20px}
  .glaswrap{padding-left:20px;padding-right:20px}
  .fwrap{gap:26px;padding:36px 0}
  .glaskarte{padding:22px 20px 24px}
}

/* Datumsstempel im Fussbereich */
.fstand{margin-top:12px;font-weight:700}


/* ============================================================
   BEITRAGSFENSTER · Ein Beitrag liest sich wie eine Seite der
   Website: dunkler Kopf mit Motiv, Lede, Auf einen Blick als
   Strukturliste, Fliesstext im Satzspiegel, Quellen im Fussblock.
   ============================================================ */
.beitraege{display:none}
html.bm-offen,html.bm-offen body{overflow:hidden}
.bmodal{position:fixed;inset:0;z-index:300;display:flex;justify-content:center;align-items:center;
  padding:clamp(18px,3.4vh,44px) clamp(16px,3vw,40px)}
.bmodal[hidden]{display:none}
.bm-backdrop{position:absolute;inset:0;background:rgba(11,31,51,.7);cursor:pointer}
.bm-panel{position:relative;background:#fff;width:min(1080px,100%);max-height:100%;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 40px 110px rgba(11,31,51,.5)}
.bm-inhalt{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.bm-zu{position:absolute;top:16px;right:16px;width:44px;height:44px;background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.5);border-radius:0;font-size:24px;line-height:1;color:var(--ink);
  cursor:pointer;z-index:4;transition:background .15s ease}
.bm-zu:hover{background:#fff}

/* Kopf mit Motiv, Titel steht im Bild wie auf den Seitenkoepfen */
.b-kopf{position:relative;isolation:isolate}
.b-kopf-bild{position:absolute;inset:0;overflow:hidden}
.b-kopf-bild img{width:100%;height:100%;object-fit:cover;display:block}
.b-kopf-bild:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,
  rgba(6,18,31,.92) 0%,rgba(6,18,31,.7) 42%,rgba(6,18,31,.42) 74%,rgba(6,18,31,.3) 100%)}
.b-kopf-text{position:relative;z-index:1;min-height:clamp(300px,34vh,420px);display:flex;
  flex-direction:column;justify-content:flex-end;color:#fff;
  padding:clamp(90px,12vw,140px) clamp(24px,5vw,72px) clamp(28px,3.4vw,44px)}
.b-kopf-text .b-marke{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#9FC3E4;margin-bottom:14px}
.b-kopf-text h2{font-size:clamp(27px,3.5vw,44px);line-height:1.13;letter-spacing:-.018em;
  color:#fff;margin:0;max-width:26ch;text-wrap:pretty}

/* Lede unter dem Kopf, wie pagehero-lede */
.b-lede{border-bottom:1px solid var(--rule);padding:clamp(26px,3vw,40px) clamp(24px,5vw,72px)}
.b-lede .punktlabel{margin-bottom:12px}
.b-lede p{font-size:clamp(18px,1.7vw,22px);line-height:1.5;letter-spacing:-.006em;margin:0;max-width:60ch}

.b-body{padding:clamp(30px,4vw,52px) clamp(24px,5vw,72px) clamp(56px,7vw,96px);max-width:940px}
.b-body > h3{font-size:clamp(20px,1.9vw,26px);line-height:1.28;letter-spacing:-.01em;
  margin:42px 0 14px;padding-top:20px;border-top:1px solid var(--rule);max-width:34ch}
.b-body > h3:first-child{border-top:none;padding-top:0;margin-top:0}
.b-body p{font-size:17.5px;line-height:1.7;color:var(--ink);margin:0 0 17px;max-width:68ch;text-wrap:pretty}
.b-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.b-body a:hover{color:var(--accent2)}
.b-body > ul{list-style:none;margin:4px 0 24px;padding:0;border-top:1px solid var(--rule);max-width:72ch}
.b-body > ul > li{border-bottom:1px solid var(--rule);padding:12px 0 12px 24px;position:relative;
  font-size:16.5px;line-height:1.6}
.b-body > ul > li:before{content:"";position:absolute;left:0;top:23px;width:12px;height:1px;background:var(--accent)}

/* Auf einen Blick */
.b-blick{background:var(--wash);padding:clamp(22px,2.6vw,32px);margin:0 0 38px}
.b-blick .kicker{margin-bottom:18px}
.b-blick .strukturliste > div{grid-template-columns:minmax(120px,auto) 1fr;padding:14px 0;
  border-bottom-color:#D8DEE5;align-items:baseline}
.b-blick .strukturliste{border-top-color:#D8DEE5}
.b-blick .strukturliste > div:last-child{border-bottom:none;padding-bottom:0}
.b-blick .st-i{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.b-blick .strukturliste p{font-size:16.5px;line-height:1.6}

/* Was daraus folgt */
.b-folgt{background:var(--accent);color:#fff;padding:clamp(24px,3vw,38px);margin:46px 0 0}
.b-folgt .kicker{color:#9FC3E4;border-bottom-color:rgba(255,255,255,.28);margin-bottom:18px}
.b-folgt p{color:#fff;font-size:18px;line-height:1.65;max-width:62ch}
.b-folgt p:last-child{margin-bottom:0}
.b-folgt a{color:#fff}

/* Quellen und Fuss */
.b-quellen{margin-top:34px}
.b-quellen .fnl li{font-size:14px;line-height:1.6}
.b-fuss{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  margin-top:38px;padding-top:20px;border-top:1px solid var(--rule);
  font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.b-zurueck{background:none;border:1px solid var(--rule);padding:11px 20px;font-size:14px;font-weight:600;
  color:var(--accent);cursor:pointer;transition:border-color .15s ease}
.b-zurueck:hover{border-color:var(--accent)}

/* ============================================================
   BEITRAGSFENSTER · SATZRASTER 17.08.2026
   Der Fliesstext stand in vier verschiedenen Streubreiten
   (68ch, 34ch, 72ch, 62ch) in einem 940er Kasten: rechts blieb
   eine unregelmaessige Leerspalte. Jetzt ein 12-Spalten-Raster
   ueber die volle Panelbreite, Zwischenkoepfe haengen links.
   ============================================================ */
.b-kopf-text,.b-lede,.b-body{padding-left:clamp(24px,5vw,64px);padding-right:clamp(24px,5vw,64px)}
.b-lede p{max-width:76ch}

.b-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(22px,2.6vw,40px);row-gap:18px;max-width:none;
  padding-top:clamp(34px,4vw,56px);padding-bottom:clamp(48px,6vw,80px)}
.b-body > *{grid-column:1 / -1}
.b-body > p{margin:0;max-width:none}
.b-body > h3{max-width:none;margin:clamp(24px,2.8vw,36px) 0 0;padding-top:22px}
.b-body > h3:first-child{margin-top:0;padding-top:0;border-top:none}
.b-body > ul{margin:6px 0 0;max-width:none}

@media(min-width:900px){
  .b-body > h3{grid-column:1 / span 4;align-self:start}
  .b-body > p,.b-body > ul{grid-column:5 / -1}
  /* Der Kopf und sein erster Absatz teilen eine Zeile, also auch die Linie */
  .b-body > h3 + p{grid-column:5 / -1;border-top:1px solid var(--rule);
    margin-top:clamp(24px,2.8vw,36px);padding-top:22px}
  .b-body > h3:first-child + p{margin-top:0;padding-top:0;border-top:none}
}

/* Der Quellenblock kommt aus dem Vollbreiten-Band und traegt dort margin:0 auto
   samt 24px Polster. Als Grid-Item schrumpfen die Auto-Margins ihn auf max-content. */
.b-body > .fnbox{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}

/* Tabellen im Beitrag */
.b-tab{overflow-x:auto;margin:6px 0 28px}
.b-tab table{border-collapse:collapse;width:100%;font-size:15.5px}
.b-tab th,.b-tab td{text-align:left;padding:12px 18px 12px 0;border-bottom:1px solid var(--rule);
  vertical-align:top;line-height:1.5}
.b-tab th{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

@media(max-width:620px){
  .b-body p{font-size:16.5px}
  .b-blick .strukturliste > div{grid-template-columns:1fr;gap:6px}
}


/* ============================================================
   SEITENSCHLUSS · 16.08.2026
   Befund der Durchsicht: die Seiten liefen nach unten auseinander.
   1 Die Weiterfuehrung trug drei verschiedene Koepfe, lief einmal
     als .sek statt als .teaser und stand meist ganz ohne Kopf.
   2 Vor ihr stand auf fuenf Seiten eine zweite Wegweiserzeile aus
     Schaltflaechen: zwei Navigationsangebote hintereinander.
   3 Schaltflaechenzeilen trugen 20, 34, 38, 42, 44 und 46 px als
     Inline-Mass statt einer Stufe.
   4 Vor der Fusszeile lagen Sektionspolster und Fussrand
     uebereinander, auf Seiten ohne Quellenband doppelt.
   5 Der Quellenblock im Beitragsfenster trug die Farben des
     dunklen Bandes und lief dadurch hell auf Weiss.
   6 Das Minuszeichen des geoeffneten Quellenblocks war eine
     verlorene Escape-Sequenz und stand als Ziffer da.
   ============================================================ */

/* 1 · Weiterfuehrung: ein Kopf, ein Raster, zwei bis vier Karten */
.teaser .punktlabel{display:flex;width:fit-content;margin-bottom:26px}
.weiter:has(> :nth-child(3)):not(:has(> :nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){
  .weiter:has(> :nth-child(3)):not(:has(> :nth-child(4))){grid-template-columns:1fr}
}

/* 3 · Schaltflaechenzeile: ein Abstand, echtes Raster statt Wortzwischenraum */
.btnzeile{display:flex;flex-wrap:wrap;gap:14px;margin:clamp(30px,3.4vw,44px) 0 0}
.btnzeile .btn-o{margin-top:0}
.prose > .btnzeile:last-child{margin-bottom:0}
.prose > .lead-claim{margin:clamp(30px,3.4vw,40px) 0}
.nach-adresse{margin-top:22px}

/* Vollbild-Band im Abschnitt: ein Abstand, auf jeder Seite derselbe */
/* Ein Band schliesst den Abschnitt ab: es steht in einer zweiten Spaltenbreite
   innerhalb derselben Sektion. Der Abstand gehoert an diese zweite Spalte. */
.sek > .wrap + .wrap:has(> .glasbild),.sek > .wrap + .wrap:has(> .streu),
.sek > .wrap + .wrap:has(> .bildraster),.sek > .wrap + .wrap:has(> .claimband){margin-top:clamp(34px,3.8vw,52px)}
.sek .wrap > * + .zahlband,.sek .wrap > * + .schrittliste,
.sek .wrap > * + .glasbild,.sek .wrap > * + .streu{margin-top:clamp(34px,3.8vw,52px)}

/* Zwischenkopf im Fliesstext der Rechtsseiten */
.prose > .kicker{margin-top:clamp(34px,3.4vw,48px)}
.prose > .kicker:first-child{margin-top:0}

/* Datumsstempel am Seitenende, gleiche Stufe wie im Beitragsfuss */
.prose > p.seitenstand,.prose .seitenstand,.seitenstand{font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:clamp(34px,3.4vw,48px)}

/* 4 · Ein Abstand vor der Fusszeile, und er kommt aus dem letzten Abschnitt */
footer.site{margin-top:0}

/* 5 · Quellenblock auf hellem Grund: eigene Farben statt der des Bandes */
.b-quellen{border-top:1px solid var(--rule);border-bottom:none}
.b-quellen summary{color:var(--muted)}
.b-quellen summary:hover,.b-quellen[open] summary{color:var(--accent)}
.b-quellen summary:after{color:var(--accent)}
.b-quellen .fnl li{color:var(--muted)}
.b-quellen .fnl li:before{color:var(--accent)}
.b-quellen .fnl li a{color:var(--accent);border-bottom-color:rgba(18,50,79,.30)}
.b-quellen .fnl li a:hover{color:var(--accent2);border-bottom-color:var(--accent2)}

/* ============================================================
   RECHTSSEITEN · SATZSPIEGEL 17.08.2026
   Impressum, Datenschutz und Nutzungsbedingungen sind reine
   Textseiten ohne Bild oder zweite Spalte. Der 60ch-Satzspiegel
   des Fliesstexts liess rechts die halbe Breite leer stehen.
   Diese drei Seiten laufen auf rund drei Viertel der Spalte.
   ============================================================ */
.pg-impressum .prose,
.pg-datenschutz .prose,
.pg-nutzung .prose{max-width:min(78%,86ch)}
@media(max-width:820px){
  .pg-impressum .prose,
  .pg-datenschutz .prose,
  .pg-nutzung .prose{max-width:none}
}


/* ============================================================
   AUFTRAGBAND · Mission direkt unter dem Hero
   Ein einzelnes Statement auf Stufe 2, kein Fliesstext.
   ============================================================ */
.auftragband .punktlabel{display:flex;width:fit-content}
.auftragband .auftrag{font-size:clamp(23px,2.5vw,35px);font-weight:700;letter-spacing:-.018em;
  line-height:1.32;color:var(--navy);max-width:44ch;margin:0;text-wrap:pretty}
@media(max-width:720px){.auftragband .auftrag{max-width:none;font-size:21px;line-height:1.36}}


/* ============================================================
   STARTSEITEN-HERO · dichterer Scrim
   Das Wetterballon-Motiv ist im Textbereich hell. Der Scrim
   traegt H1 und CTA auf 4.5:1, ohne die uebrigen Seitenkoepfe
   zu beruehren.
   ============================================================ */
.pg-home .pagehero-full .pagehero-media::after{
  background:
    linear-gradient(to right,rgba(6,18,31,.52) 0%,rgba(6,18,31,.30) 46%,rgba(6,18,31,0) 74%),
    linear-gradient(to top,
      rgba(6,18,31,.86) 0%,
      rgba(6,18,31,.72) 22%,
      rgba(6,18,31,.46) 44%,
      rgba(6,18,31,.20) 62%,
      rgba(6,18,31,0) 82%)}


/* Fussbereich: das Sozialsymbol ist jetzt ein Verweis und behaelt die Farbe
   des umgebenden Textes, damit der Fussbereich ruhig bleibt. */
.social a.soc{color:inherit;text-decoration:none}
.social a.soc:hover{color:#fff}

/* Bildhinweis: Wo ein Motiv fuer eine reale Anlage oder einen realen Standort
   gehalten werden koennte, traegt es den Hinweis sichtbar unter dem Bild.
   Die Figur nimmt im Split den Platz des Bildes ein. */
.textbild > figure.bildfig{margin:0;display:flex;flex-direction:column;min-width:0}
.textbild > figure.bildfig > img.bimg{width:100%;flex:1 1 auto;min-height:320px;
  max-height:none;height:auto;object-fit:cover}
.textbild.dreh > figure.bildfig{order:-1}
.textbild:has(> figure.bildfig:first-child){grid-template-columns:.95fr 1.05fr}
figure.bildfig figcaption{font-size:12.5px;line-height:1.5;color:var(--muted);
  margin-top:10px;letter-spacing:.02em}
@media(max-width:820px){
  .textbild > figure.bildfig > img.bimg{min-height:0;aspect-ratio:16/10}
}


/* ===== Marktsignale mit Motiven und Helium-Brief-Band · 18.08.2026 ===== */
.ein .ecard .more{color:var(--accent);display:inline-flex;align-items:center;gap:8px}
.ein .ecard:hover .more{text-decoration:none}
.ein .ecard h3{padding:20px 22px 8px}
.ein .ecard .more{padding:0 22px 22px}
.ein .ecard img.bimg{aspect-ratio:16/10;height:auto}
.nlband .nlrow{align-items:flex-end}
.nlband .nlrow > div{max-width:62ch}
.nlband h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.018em;line-height:1.2;margin-top:10px}
.nlband .nlrow p{font-size:18px;line-height:1.6;max-width:56ch}
.nlband .nlhinweis{font-size:15px;margin-top:14px}
.nlband .btnzeile{margin:0}

/* ===== Portraets 18.08.2026 ===== */
.personen{display:grid;gap:clamp(36px,4.2vw,60px)}
.textbild > figure.bildfig > img.portraitfoto{aspect-ratio:1/1;flex:0 0 auto;min-height:0;height:auto;
  align-self:start;object-fit:cover;object-position:50% 28%;filter:grayscale(1)}
.person .portrait{filter:grayscale(1)}
.portrait.leer{width:100%;max-width:340px;aspect-ratio:1/1;background:var(--wash);
  border:1px dashed var(--rule-stark);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:20px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.02em}
@media(max-width:760px){.portrait.leer{max-width:none}}

/* ===== Helium-Brief · 18.08.2026 =====
   Zwei Merkmalskärtchen führen, die Anmeldung folgt darunter als breite Karte:
   links Titel und Einordnung, rechts Feld, Knopf, Einwilligung, Kleingedrucktes.
   Eigene Klassen, damit die Regeln des alten Briefbands nicht hineinwirken.
   Hausskala: Titel 42/26, Einordnung 18, Einwilligung 13, Kleingedrucktes 12. */
.brief-karte{display:block;padding:clamp(28px,3.4vw,38px) clamp(26px,3.2vw,38px)}
/* Claim der Briefkarte: eigener Grad, damit ein Satz mit Durchschuss umbricht. */
.brief-claim,
.pg-home main .brief-claim{font-size:clamp(23px,2.1vw,30px);line-height:1.14;
  letter-spacing:-.02em;font-weight:700;color:var(--navy);max-width:22ch}
.brief-lede,
.pg-home main .brief-lede{font-size:18px;line-height:1.6;color:var(--mid);margin:14px 0 0;max-width:42ch}
.brief-form{display:flex;flex-direction:column;gap:13px;margin-top:22px}
.brief-lab{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:block}
/* Vier Felder auf zwei Spalten: Namen nebeneinander, Unternehmen und Adresse durchgehend. */
.brief-gitter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 12px}
.brief-fg{display:flex;flex-direction:column;gap:5px;min-width:0}
.brief-fg--weit{grid-column:1 / -1}
.brief-reihe{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.brief-fg .brief-reihe{margin-top:0}
.brief-feld{width:100%;min-width:0;border:1px solid rgba(18,50,79,.30);background:#fff;
  color:var(--ink);padding:11px 14px;font-size:16px;font-family:inherit;line-height:1.3}
.brief-feld::placeholder{color:#8B98A6}
.brief-feld:focus{outline:none;border-color:var(--accent)}
.brief-knopf{border:1px solid var(--navy);background:var(--navy);color:#fff;font-weight:700;
  font-size:14px;padding:11px 26px;cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:background .18s ease,color .18s ease}
.brief-knopf:hover{background:#fff;color:var(--navy)}
.brief-knopf[disabled]{opacity:.55;cursor:default}
.brief-knopf[disabled]:hover{background:var(--navy);color:#fff}
.brief-ok{display:grid;grid-template-columns:16px minmax(0,1fr);gap:11px;align-items:start;
  font-size:13px;line-height:1.55;color:var(--mid);cursor:pointer}
.brief-ok input{width:16px;height:16px;min-width:0;margin:1px 0 0;padding:0;
  accent-color:var(--accent);border-radius:2px}
.brief-fein,
.pg-home main .brief-fein{font-size:12px;line-height:1.55;color:var(--muted);margin:0;max-width:56ch}
.nl-status,
.pg-home main .nl-status{font-size:13px;line-height:1.5;color:var(--accent);margin:0}
.nl-status:empty{display:none}
.nl-status--fehler,
.pg-home main .nl-status--fehler{color:#A81E28}
@media(min-width:901px){
  .streu--brief .streu-innen--brief .streu-k:nth-child(1){grid-column:1 / span 6;grid-row:1;margin-top:0}
  .streu--brief .streu-innen--brief .streu-k:nth-child(2){grid-column:7 / span 6;grid-row:1;margin-top:40px}
  .streu--brief .streu-innen--brief .brief-karte{grid-column:1 / -1;grid-row:2;margin-top:22px;
    display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    column-gap:clamp(36px,4.4vw,72px);align-items:start}
  .streu--brief .streu-innen--brief .brief-form{margin-top:4px}
}
@media(max-width:540px){
  .brief-gitter{grid-template-columns:1fr}
  .brief-reihe{grid-template-columns:1fr}
  .brief-knopf{width:100%}
}
.streu--brief .streu-k .s-t,
.pg-home main .streu--brief .streu-k .s-t{font-size:15px;line-height:1.62}

/* Einordnungszeile unter dem Titel; die Formularkarte steht allein. */
.streu-kopf .streu-lede,
.pg-home main .streu-kopf .streu-lede{max-width:46em;margin:14px 0 0;font-size:17px;
  line-height:1.62;color:var(--muted)}
@media(min-width:901px){
  .streu--brief .streu-innen--brief .brief-karte:only-child{
    grid-column:1 / -1;grid-row:1;margin-top:0}
}


/* ============================================================
   Sprachwahl in der Kopfleiste · 18.08.2026
   Rechte Gruppe: Sprachpaar und Menue in einer Zeile.
   ============================================================ */
.tbright{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px)}
.langsw{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;white-space:nowrap}
.langsw a{color:rgba(255,255,255,.62);text-decoration:none;padding:6px 0;transition:color .2s ease}
.langsw a:hover{color:#fff;text-decoration:none}
.langsw .aktiv{color:#fff}
.langsw .trenn{color:rgba(255,255,255,.36)}
header.site.tone-light .langsw a{color:rgba(11,31,51,.52)}
header.site.tone-light .langsw a:hover{color:var(--navy)}
header.site.tone-light .langsw .aktiv{color:var(--navy)}
header.site.tone-light .langsw .trenn{color:rgba(11,31,51,.28)}
header.site:has(details[open]) .langsw a,
header.site.tone-light:has(details[open]) .langsw a{color:rgba(255,255,255,.62)}
header.site:has(details[open]) .langsw a:hover,
header.site.tone-light:has(details[open]) .langsw a:hover{color:#fff}
header.site:has(details[open]) .langsw .aktiv,
header.site.tone-light:has(details[open]) .langsw .aktiv{color:#fff}
header.site:has(details[open]) .langsw .trenn,
header.site.tone-light:has(details[open]) .langsw .trenn{color:rgba(255,255,255,.36)}
@media(max-width:600px){.langsw{font-size:11.5px;letter-spacing:.1em}}


/* ===== Bio-Auftakt Fuehrungsseite 18.08.2026 =====
   Zwei Zeilen als typografischer Kontrast, ohne Zierrat. */
.pg-v2 .prose p.bio-auftakt,.prose p.bio-auftakt{
  font-size:clamp(19px,1.75vw,23px);line-height:1.42;letter-spacing:-.005em;
  color:var(--muted);max-width:34ch;margin:0 0 30px;text-wrap:pretty}
.prose p.bio-auftakt b{display:block;color:var(--ink);font-weight:600}
.pg-v2 .prose p.bio-beat,.prose p.bio-beat{color:var(--accent);font-weight:600}
@media(max-width:820px){
  .pg-v2 .prose p.bio-auftakt,.prose p.bio-auftakt{font-size:19px;margin-bottom:24px}
}

/* Fortsetzung der Biografie unter dem Portraetsplit */
.prose.bio-fort{margin-top:clamp(26px,3vw,40px)}


/* ============================================================
   19.08.2026 · Startseiten-Hero
   1 · Schriftgrad wie auf den uebrigen Heros
   2 · Textblock bis rund 60 Prozent der Bildschirmbreite
   3 · Milchglas in den Buchstaben selbst: die Zeichen tragen eine
        weich gezeichnete, milchige Fuellung, dazu eine helle Kante
        und ein weicher Schlagschatten. Kein Kasten.
   ============================================================ */
.pg-home .pagehero-full .pagehero-title h1.hero-eins,
.pagehero-full .pagehero-title h1.hero-eins{
  font-size:clamp(40px,6.5vw,94px);
  line-height:1.04;
  letter-spacing:-.03em;
  max-width:min(60vw,100%);
  display:table;
  padding:0;
  border:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.14)),
    url(img/serie/hero-frost.jpg) center center / cover fixed,
    linear-gradient(180deg,rgba(239,246,251,.95),rgba(206,223,237,.92));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.62);
  paint-order:stroke fill;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  filter:drop-shadow(0 2px 1px rgba(6,18,31,.32)) drop-shadow(0 14px 34px rgba(6,18,31,.42))}
/* Browser ohne background-clip:text bekommen weisse Schrift */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .pagehero-full .pagehero-title h1.hero-eins{
    background:none;color:#fff;-webkit-text-fill-color:#fff;-webkit-text-stroke:0}
}
@media(max-width:760px){
  .pg-home .pagehero-full .pagehero-title h1.hero-eins,
  .pagehero-full .pagehero-title h1.hero-eins{
    font-size:clamp(34px,9vw,48px)!important;
    line-height:1.06;
    max-width:100%!important;
    background-attachment:scroll;
    -webkit-text-stroke-width:.7px}
}


/* ============================================================
   19.08.2026 · Hero-Feinschliff
   1 · Startseite: Schaltflaeche rechts, auf der unteren
        Schriftlinie des Titels
   2 · Heros der Unterseiten: gleiche Milchglasschrift wie die
        Startseite, Grad um zwanzig Prozent kleiner
   ============================================================ */
.pg-home .pagehero-full .pagehero-title .wrap{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(24px,4vw,72px);flex-wrap:wrap}
.pg-home .pagehero-full .hero-cta{margin:0 0 .1em}

.pagehero .pagehero-title h1,
.pagehero-full .pagehero-title h1,
.pagehero-text h1{
  font-size:clamp(32px,5.2vw,75px);
  background:
    linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.14)),
    url(img/serie/hero-frost.jpg) center center / cover fixed,
    linear-gradient(180deg,rgba(239,246,251,.95),rgba(206,223,237,.92));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.62);
  paint-order:stroke fill;
  filter:drop-shadow(0 2px 1px rgba(6,18,31,.32)) drop-shadow(0 14px 34px rgba(6,18,31,.42))}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .pagehero .pagehero-title h1,
  .pagehero-full .pagehero-title h1,
  .pagehero-text h1{background:none;color:#fff;-webkit-text-fill-color:#fff;-webkit-text-stroke:0}
}
@media(max-width:760px){
  .pg-home .pagehero-full .pagehero-title .wrap{display:block}
  .pg-home .pagehero-full .hero-cta{margin:22px 0 0}
  .pagehero .pagehero-title h1,
  .pagehero-full .pagehero-title h1,
  .pagehero-text h1{
    font-size:clamp(30px,7.6vw,44px);
    background-attachment:scroll;
    -webkit-text-stroke-width:.7px}
}


/* 19.08.2026 · Startseiten-Hero: Schrift durchsichtiger, das Bild
   soll durch die Buchstaben hindurch sichtbar bleiben. */
.pg-home .pagehero-full .pagehero-title h1.hero-eins{
  opacity:.68;
  -webkit-text-stroke:1px rgba(255,255,255,.80)}
@media(max-width:760px){
  .pg-home .pagehero-full .pagehero-title h1.hero-eins{opacity:.82}
}


/* ===== Zitatband: Porträt im Signet 19.08.2026 ===== */
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;display:block;object-fit:cover;
  filter:grayscale(1);transform:scale(1.26);transform-origin:50% 20%}


/* ===== Wortglatter Umbruch, keine Silbentrennung 19.08.2026 ===== */
html{hyphens:none;-webkit-hyphens:none}
body,h1,h2,h3,h4,p,li,td,th,figcaption,blockquote,.sek-titel,.kopfsatz,.lead-claim,
.subline,.prose,.tile,.b-text,.b-inner,.streu-k,.glaskarte,.mx-card,.weiter-karte{
  hyphens:none;-webkit-hyphens:none;word-break:normal}

/* ===== Menue 20.08.2026 ===== */
/* Kontakt steht allein und tritt darum als Kategorie auf, in derselben
   Typografie wie die uebrigen Spaltenkoepfe. */
.dgrid .dcol--solo .dhead{margin-bottom:14px}
@media(max-width:700px){
  .dgrid .dcol--solo .dhead{padding:0 0 12px;margin-bottom:4px}
}

/* ============================================================
   20.08.2026 · Hero-Titel: Artefakt unter den Unterlaengen
   Ursache war die Kombination aus einer im Viewport verankerten
   Bildebene (background-attachment:fixed) im auf den Text
   beschnittenen Hintergrund und dem filter:drop-shadow. Der Filter
   legt seinen Schatten um den Textkasten, nicht um die Buchstaben;
   darum stand unter dem p ein dunkles Rechteck und die Unterlaengen
   brachen ab. Die Anmutung bleibt, der Schatten kommt jetzt aus
   text-shadow und folgt der Buchstabenform.
   ============================================================ */
.pagehero .pagehero-title h1,
.pagehero-full .pagehero-title h1,
.pagehero-full .pagehero-title h1.hero-eins,
.pg-home .pagehero-full .pagehero-title h1.hero-eins,
.pagehero-text h1{
  background-attachment:scroll,scroll,scroll;
  filter:none;
  text-shadow:0 2px 1px rgba(6,18,31,.32),0 14px 34px rgba(6,18,31,.42);
  padding-bottom:.08em}
@media(max-width:760px){
  .pagehero .pagehero-title h1,
  .pagehero-full .pagehero-title h1,
  .pagehero-full .pagehero-title h1.hero-eins,
  .pg-home .pagehero-full .pagehero-title h1.hero-eins,
  .pagehero-text h1{
    text-shadow:0 1px 1px rgba(6,18,31,.34),0 10px 24px rgba(6,18,31,.40)}
}

/* ============================================================
   20.08.2026 · Heros: Titel weiss. Das Frostglas im Text bleibt
   allein dem Startseiten-Hero (h1.hero-eins) vorbehalten.
   ============================================================ */
.pagehero .pagehero-title h1:not(.hero-eins),
.pagehero-full .pagehero-title h1:not(.hero-eins),
.pagehero-text h1:not(.hero-eins){
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:#fff;
  -webkit-text-fill-color:#fff;
  -webkit-text-stroke:0;
  filter:none;
  text-shadow:0 2px 6px rgba(6,18,31,.36),0 16px 40px rgba(6,18,31,.34);
  padding-bottom:.04em}
@media(max-width:760px){
  .pagehero .pagehero-title h1:not(.hero-eins),
  .pagehero-full .pagehero-title h1:not(.hero-eins),
  .pagehero-text h1:not(.hero-eins){
    text-shadow:0 1px 4px rgba(6,18,31,.40),0 10px 26px rgba(6,18,31,.34)}
}

/* ============================================================
   20.08.2026 · Layoutpruefung, zwei Befunde
   Die randlosen Baender (.glasbild, .streu) sprengen den .wrap
   absichtlich; das ist kein Befund. Geblieben ist:
   Lange Komposita («Rechte und Genehmigungen») ragten aus den
       Karten, weil word-break:normal keinen Umbruch zulaesst. Der Grad
       wird ruhiger, und ein Umbruch ohne Trennstrich greift als letzte
       Rettung.
   ============================================================ */
.streu-k .s-n,
.pg-home main .streu-k .s-n{font-size:clamp(20px,2.05vw,30px)}
.streu-k,.streu-k .s-n,.streu-k .s-t{overflow-wrap:break-word}