/* ============================================================
   VERSO GROUP — Nachhaltigkeitsbericht 2025
   Design system: Museo Sans + serif accent, warm neutrals,
   Inside (green) / Outside (terracotta), data-strand graphics.
   ============================================================ */

/* ---------- FONTS: Museo Sans (kit 324A62) ---------- */
@font-face{ font-family:'Museo Sans'; font-weight:300; font-style:normal;
  src:url('assets/fonts/324A62_4_0.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Museo Sans'; font-weight:300; font-style:italic;
  src:url('assets/fonts/324A62_7_0.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Museo Sans'; font-weight:400 500; font-style:normal;
  src:url('assets/fonts/324A62_1_0.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Museo Sans'; font-weight:400 500; font-style:italic;
  src:url('assets/fonts/324A62_6_0.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Museo Sans'; font-weight:700; font-style:normal;
  src:url('assets/fonts/324A62_3_0.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Museo Sans'; font-weight:700; font-style:italic;
  src:url('assets/fonts/324A62_2_0.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Museo Sans'; font-weight:800; font-style:normal;
  src:url('assets/fonts/324A62_0_0.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Museo Sans'; font-weight:800; font-style:italic;
  src:url('assets/fonts/324A62_8_0.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Museo Sans'; font-weight:900; font-style:normal;
  src:url('assets/fonts/324A62_9_0.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Museo Sans'; font-weight:900; font-style:italic;
  src:url('assets/fonts/324A62_5_0.woff2') format('woff2'); font-display:swap; }


/* Newsreader (Production Type, SIL OFL 1.1) — lokal gehostet.
   Variable Font: Achsen opsz 6..72 und wght 200..800.
   Lizenztext: assets/fonts/Newsreader-OFL.txt */
@font-face{ font-family:'Newsreader'; font-style:italic; font-weight:200 800;
  src:url('assets/fonts/newsreader-italic-latin-ext.woff2') format('woff2-variations'),
      url('assets/fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Newsreader'; font-style:italic; font-weight:200 800;
  src:url('assets/fonts/newsreader-italic-latin.woff2') format('woff2-variations'),
      url('assets/fonts/newsreader-italic-latin.woff2') format('woff2');
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Newsreader'; font-style:normal; font-weight:200 800;
  src:url('assets/fonts/newsreader-normal-latin-ext.woff2') format('woff2-variations'),
      url('assets/fonts/newsreader-normal-latin-ext.woff2') format('woff2');
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Newsreader'; font-style:normal; font-weight:200 800;
  src:url('assets/fonts/newsreader-normal-latin.woff2') format('woff2-variations'),
      url('assets/fonts/newsreader-normal-latin.woff2') format('woff2');
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ---------- TOKENS ---------- */
:root{
  --sans:'Museo Sans', system-ui, sans-serif;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  /* Campaign Serif (ps Type) via Adobe Fonts Kit poa3pmn;
     'Campaign Serif' = lokal per Creative Cloud installierte Desktop-Variante */
  --serif-campaign:'campaign-serif', 'Campaign Serif', 'Newsreader', Georgia, 'Times New Roman', serif;

  /* paper / neutrals */
  --paper:#f4f3f0;
  --paper-2:#ebeae5;
  --paper-3:#e4e2db;
  --paper-deep:#d9d7ce;
  --line:#e0dfd9;
  --line-strong:#c9c7bd;

  /* ink */
  --ink:#23231f;
  --ink-2:#43423c;
  --ink-3:#57564f;
  --muted:#8a897f;
  --night:#1b1b18;

  /* inside (green) */
  --in-deep:#0f6e56;
  --in-ink:#06382c;
  --in-mid:#5dcaa5;
  --in-tint:#e3f4ec;
  --in-tint-2:#d2ecdf;

  /* outside (terracotta) */
  --out-deep:#b8501f;
  --out-ink:#5a2310;
  --out-mid:#ef9b73;
  --out-tint:#fbeee5;
  --out-tint-2:#f7ddcd;

  /* data-strand accent palette */
  --c-teal:#1f9c8b;
  --c-green:#5bbf8a;
  --c-lime:#b6cf6b;
  --c-amber:#f0b450;
  --c-terra:#e8814e;
  --c-rose:#df6f7a;
  --c-plum:#8d6fb0;
  --c-blue:#4f97c9;

  /* highlighter */
  --marker:#ffd45e;
  --marker-green:#a7e0c4;

  --maxw:1200px;
  --maxw-narrow:1136px;
  --flow:56px;
  --flow-tight:12px;
  --shadow-card:0 1px 2px rgba(35,35,31,.04), 0 8px 26px rgba(35,35,31,.06);
  --shadow-pop:0 18px 50px rgba(35,35,31,.16);
  --radius:14px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

/* Normales Scrollen (kein Section-Snap). scroll-padding hält Sprungziele
   unter dem Sticky-Header. */
html{ scroll-padding-top:128px; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:500;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--marker); color:var(--ink); }

/* ---------- TYPE SCALE ---------- */
/* Kicker — Museo Sans, kursiv, kein Versal/Tracking.
   Gewicht 500 (Figma-Vorlage sah 300 vor, bewusst abgeändert). */
.kicker{
  font:italic 500 18px/1.6 var(--sans); letter-spacing:-.01em; text-transform:none;
  color:var(--muted);
}
.kicker.in{ color:var(--in-deep); }
.kicker.out{ color:var(--out-deep); }

.display{
  font:900 clamp(48px, 9vw, 132px)/0.94 var(--sans);
  letter-spacing:-.02em; text-transform:uppercase; margin:0;
}
.h1{ font:900 clamp(34px,5vw,60px)/1.02 var(--sans); letter-spacing:-.02em; text-transform:uppercase; margin:0; }
.h2{ font:900 clamp(38px,4.2vw,52px)/1.1 var(--sans); letter-spacing:-.01em; text-transform:uppercase; margin:0; }
.h3{ font:700 clamp(20px,2vw,26px)/1.15 var(--sans); text-transform:uppercase; margin:0; }
.h4{ font:700 clamp(16px,1.4vw,19px)/1.2 var(--sans); text-transform:uppercase; margin:0; }
/* Headline serif accent — Figma second phrase: Campaign Serif, 300 italic, +.06em */
.h-serif{ display:inline-block; font-family:var(--serif-campaign); font-weight:300; font-style:italic; letter-spacing:.06em; }
.lead{ font:300 clamp(19px,1.7vw,24px)/1.55 var(--sans); color:var(--ink-2); margin:0; }
.body{ font:500 16.5px/1.66 var(--sans); color:var(--ink-2); margin:0; }
/* scroll-fill text (litebox-style): per-word brighten from black → white on scroll (color set in JS w/ !important) */
.sfill{ margin-top:18px; }
.sfill .sfw{ color:#fff; -webkit-text-fill-color:#fff; }.small{ font:400 16px/1.4 var(--sans); color:var(--ink-3); margin:0; }

/* serif accents — the "driven by purpose" / human voice */
.serif{ font-family:var(--serif); }
.purpose{ font-family:var(--serif); font-weight:500; font-style:italic; }

/* highlighter underline (third headline hierarchy / textmarker) */
.mark{
  display:inline; background-image:linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%);
  padding:0 .06em; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.mark.green{ background-image:linear-gradient(transparent 58%, var(--marker-green) 58%, var(--marker-green) 92%, transparent 92%); }

/* ---------- LAYOUT ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.wrap-n{ max-width:var(--maxw-narrow); margin:0 auto; padding:0 32px; }
/* ---------- GLOBAL VERTICAL RHYTHM ---------- */
/* uniform 56px between stacked content blocks, section-wide, on every page */
.flow{ display:flex; flex-direction:column; gap:var(--flow); align-items:stretch; }
/* tight header cluster (kicker → heading → intro) reads as one block */
.flow-head{ display:flex; flex-direction:column; align-items:flex-start; }
.flow-head > *{ margin:0 !important; }
/* kicker → H2 = 32px, H2 → text = 56px (Text → Button = 56px via .flow gap) */
.flow-head > .h2{ margin-top:32px !important; }
.flow-head > .body, .flow-head > p{ margin-top:56px !important; }
/* In Kürze section: bespoke rhythm */
.ik-flow{ gap:0 !important; }
.ik-flow > .lead{ margin-top:32px !important; }
.ik-flow > .quotecard{ margin-top:72px !important; }
.ik-flow > .report-swap{ margin-top:72px !important; }
.ik-flow > .ik-btns{ margin-top:72px !important; }
.ik-flow > .h2{ margin-top:112px !important; }
.ik-flow > .infobox-grid{ margin-top:56px !important; }
.ik-flow > .footnote{ margin-top:56px !important; }
/* "auf einen Blick" als eigene Section — h2 führt, kein Zusatzabstand */
.ik-flow2{ gap:0 !important; }
.ik-flow2 > .infobox-grid{ margin-top:56px !important; }
.ik-flow2 > .footnote{ margin-top:56px !important; }
section{ position:relative; }
.pad{ padding:clamp(72px,8vh,112px) 0; }
.pad-s{ padding:clamp(56px,6vh,80px) 0; }
.bg-paper{ background:var(--paper); }
.bg-paper2{ background:var(--paper-2); }
.bg-white{ background:#fff; }
.divide-t{ border-top:1px solid var(--line); }
.divide-b{ border-bottom:1px solid var(--line); }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font:500 14.5px/1 var(--sans); text-decoration:none; white-space:nowrap;
  padding:13px 28px; border-radius:999px; border:1.2px solid var(--ink); color:var(--ink);
  background:transparent; transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn .ar{ transition:transform .2s ease; }
.btn:hover .ar{ transform:translateX(3px); }
.btn.ghost{ border-color:var(--line-strong); color:var(--ink-3); }
.btn.ghost:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn.solid{ background:var(--ink); color:#fff; }
.btn.solid:hover{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn.lg{ padding:16px 34px; font-size:15.5px; }

/* ---------- POST-IT (key figures, "driven by purpose") ---------- */
.postit{
  position:relative; padding:24px 22px 22px; border-radius:3px;
  background:var(--marker);
  box-shadow:0 12px 24px rgba(35,35,31,.12);
  transform:rotate(-1.4deg);
  transition:transform .25s ease, box-shadow .25s ease;
}
.postit:nth-child(even){ transform:rotate(1.6deg); }
.postit:hover{ transform:rotate(0deg) translateY(-3px); box-shadow:var(--shadow-pop); }
.postit .pi-num{ font:900 clamp(30px,3.4vw,46px)/0.95 var(--sans); letter-spacing:-.02em; color:var(--ink); }
.postit .pi-lab{ font:600 13.5px/1.45 var(--sans); color:rgba(35,35,31,.74); margin-top:8px; }
.postit.green{ background:var(--marker-green); }
.postit.mint{ background:#cdeede; }
.postit.peach{ background:#ffcdb2; }
.postit.sky{ background:#bfe0f0; }

/* ---------- KPI tile (flat, for data tables of stats) ---------- */
.kpi{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 20px; }
.kpi.flat{ background:var(--paper-2); border-color:transparent; }
.kpi .k-num{ font:900 clamp(26px,2.6vw,34px)/1 var(--sans); letter-spacing:-.02em; color:var(--ink); }
.kpi .k-lab{ font:600 13px/1.45 var(--sans); color:var(--muted); margin-top:7px; }

/* ---------- CARDS ---------- */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-card); }

/* ---------- HERO / DIVIDER STRAND CANVAS ---------- */
.strand-stage{ position:relative; overflow:hidden; }
.strand-stage .blend-field svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.strand-stage .strand-content{ position:relative; z-index:2; }

@keyframes drift { from{ transform:translateX(0); } to{ transform:translateX(-8.3333%); } }
@keyframes nodepulse { 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.strand-flow{ animation:drift 26s linear infinite; }
.strand-flow.slow{ animation-duration:42s; }
.node-pulse{ animation:nodepulse 4.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .strand-flow, .node-pulse{ animation:none !important; }
}

/* ---------- INSIDE / OUTSIDE panels (main-page cream box style) ---------- */
.io-wrap{ display:flex; gap:18px; align-items:stretch; }
.io{ flex:1; min-width:0; padding:30px 28px; position:relative; overflow:hidden;
  transition:flex-grow .4s cubic-bezier(.2,.7,.2,1);
  background:#edebe4; color:#0b0b0b;
  clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 42px, 100% 100%, 0 100%); }
.io::before{ content:""; position:absolute; top:0; right:0; width:42px; height:42px;
  background:rgb(0,246,4); clip-path: polygon(0 0, 0 100%, 100% 100%); z-index:3; }
.io.inside, .io.outside{ background:#edebe4; }
.io-tag{ display:inline-block; font:800 10.5px/1 var(--sans); letter-spacing:.14em; padding:6px 11px; border-radius:5px; margin-bottom:14px; }
.io.inside .io-tag{ background:var(--in-deep); color:#fff; }
.io.outside .io-tag{ background:var(--out-deep); color:#fff; }
.io-title{ font:800 clamp(20px,2vw,27px)/1.1 var(--sans); margin:0 0 4px; color:#0b0b0b; }
.io.inside .io-title, .io.outside .io-title{ color:#0b0b0b; }
.io-body{ overflow:hidden; transition:opacity .3s ease, max-height .4s cubic-bezier(.2,.7,.2,1); }
.io.inside .io-body p, .io.outside .io-body p{ color:#2a2a26; }
.io-body p{ font:400 16px/1.4 var(--sans); margin:14px 0 0; }

/* ---------- STATUS pills ---------- */
.statusrow{ display:flex; gap:8px; flex-wrap:wrap; }
.spill{ font:700 11.5px/1 var(--sans); letter-spacing:.04em; padding:7px 12px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; }
.spill .dot{ width:8px; height:8px; border-radius:50%; }
.spill.planned{ background:var(--paper-2); color:var(--ink-3); }
.spill.planned .dot{ background:var(--muted); }
.spill.progress{ background:#fff3d6; color:#8a6400; }
.spill.progress .dot{ background:var(--c-amber); }
.spill.done{ background:var(--in-tint-2); color:var(--in-deep); }
.spill.done .dot{ background:var(--in-deep); }

/* code-style tags (Pflichtangaben) */
.tagcode{ font:600 13px/1 ui-monospace,'Courier New',monospace; padding:8px 12px; background:var(--paper-2); border-radius:6px; color:var(--ink-2); }
/* subtle Pflichtangaben tags: no fill, muted, less present */
.pflicht-block .kicker{ opacity:.75; }
.tagcode.subtle{ background:transparent; border:1px solid var(--line); color:var(--muted); font-weight:500; }
[data-grad="brand"] .tagcode.subtle, [data-grad="teal"] .tagcode.subtle, [data-grad="ocean"] .tagcode.subtle{
  background:transparent !important; border:1px solid rgba(255,255,255,.22) !important; color:rgba(255,255,255,.62) !important;
}

/* ---------- HEADER ---------- */
.hdr{ position:sticky; top:0; z-index:60; background:rgba(0,56,56,.75); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.4); }
.hdr-in{ max-width:var(--maxw); margin:0 auto; padding:0 32px; height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logos{ display:flex; align-items:center; gap:18px; }
.logos img{ height:24px; width:auto; filter:brightness(0) invert(1); }
.logos .sep{ width:1px; height:26px; background:rgba(255,255,255,.55); }
.hdr-right{ display:flex; align-items:center; gap:20px; }
.hdr-title{ font:700 16px/1 var(--sans); letter-spacing:.01em; text-decoration:none; color:#fff; cursor:pointer; }
.burger-wrap{ position:relative; align-self:stretch; display:flex; align-items:center; }
.subnav{ position:sticky; top:76px; z-index:55; background:rgba(0,56,56,.75); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.4); overflow-x:auto; }
.subnav-in{ max-width:var(--maxw); margin:0 auto; padding:0 32px; height:52px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.subnav-link{ font:700 13px/1 var(--sans); letter-spacing:.01em; color:rgba(255,255,255,.68); text-decoration:none; white-space:nowrap; padding:8px 0; border-bottom:2px solid transparent; transition:color .15s ease,border-color .15s ease; }
.subnav-link:hover{ color:#fff; }
.subnav-link.active{ color:rgb(0,246,4); border-bottom-color:transparent; }
.subnav-home{ display:flex; align-items:center; }
/* burger (mobile only) */
.subnav-burger{ display:none; align-items:center; gap:12px; background:none; border:0; padding:8px 0; cursor:pointer; color:#fff; font:700 13px/1 var(--sans); letter-spacing:.01em; }
.sb-bars{ display:flex; flex-direction:column; justify-content:center; gap:4px; width:20px; height:14px; }
.sb-bars i{ display:block; height:2px; width:100%; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.subnav.is-open .sb-bars i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.subnav.is-open .sb-bars i:nth-child(2){ opacity:0; }
.subnav.is-open .sb-bars i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.subnav.is-open .sb-label{ color:rgb(0,246,4); }
.subnav-sheet{ display:none; }
.subnav-scrim-host{ display:none; }
.subnav-scrim{ display:none; }
.rightnav{ display:none; position:fixed; top:370px; left:28px; bottom:264px; z-index:45; flex-direction:column; align-items:flex-start; }
@media (min-width:1560px){ .rightnav{ display:flex; } }
.rightnav.rightnav-empty{ opacity:0; pointer-events:none; }
.rightnav-link{ font:700 12px/1.3 var(--sans); letter-spacing:.01em; color:rgba(255,255,255,.7); text-decoration:none; text-align:left; white-space:nowrap; transition:color .15s ease; text-shadow:0 1px 4px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.35); }
.rightnav-link:hover{ color:#fff; }
.rightnav-link.active{ color:rgb(0,246,4); }
.rightnav-dots{ flex:1; width:0; border-left:1.5px dotted rgba(255,255,255,.5); margin:6px 1px; filter:drop-shadow(0 0 3px rgba(0,0,0,.5)); }
@media (max-width:900px){ .sidenav{ display:none; } }
.burger{ display:inline-flex; align-items:center; gap:10px; background:none; border:1.5px solid rgba(255,255,255,.6); border-radius:8px; padding:9px 14px; cursor:pointer; font:700 13px/1 var(--sans); color:#fff; transition:border-color .18s, background .18s; }
.burger:hover{ border-color:#fff; }
.menu{ position:absolute; top:100%; left:0; width:300px; max-width:calc(100vw - 32px); background:#003838; border:1px solid rgba(255,255,255,.16); border-radius:0 0 14px 14px; box-shadow:var(--shadow-pop); overflow:hidden; }
.menu a{ display:flex; align-items:center; justify-content:space-between; padding:15px 20px; font:600 15px/1.2 var(--sans); color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.10); cursor:pointer; border:1.5px solid transparent; border-bottom:1px solid rgba(255,255,255,.10); transition:border-color .15s, background .15s; }
.menu a:last-child{ border-bottom:1.5px solid transparent; }
.menu a:hover{ background:rgba(255,255,255,.06); border-color:#fff; }

/* ---------- FOOTER ---------- */
/* transparent — sits on the page background; colours flip per preset */
.ftr{ background:transparent; color:#cfcec6; border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); }
.ftr-in{ max-width:var(--maxw); margin:0 auto; padding:54px 32px; }
.ftr a{ color:#cfcec6; text-decoration:none; }
.ftr a:hover{ color:#fff; font-weight:700; }
.ftr-logo{ filter:invert(1); }
.ftr-sep{ background:rgba(255,255,255,.28); }
/* minimal (light) preset: dark text + non-inverted logos */
[data-grad="minimal"] .ftr{ color:var(--ink-2); border-top-color:rgba(0,0,0,.15); border-bottom-color:rgba(0,0,0,.15); }
[data-grad="minimal"] .ftr a{ color:var(--ink-2); }
[data-grad="minimal"] .ftr a:hover{ color:var(--ink); }
[data-grad="minimal"] .ftr-logo{ filter:none; }
[data-grad="minimal"] .ftr-sep{ background:rgba(0,0,0,.22); }

/* ---------- side prev/next nav ---------- */
.sidenav{ position:fixed; right:24px; top:50%; transform:translateY(-50%); z-index:50; display:flex; flex-direction:column; gap:14px; }
.navball{
  display:flex; align-items:center; justify-content:center; width:62px; height:62px;
  border-radius:50%; text-decoration:none; color:#fff;
  border:1px solid rgba(255,255,255,.85); background:transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.navball:hover{ background:#fff; color:#0b0b0b; border-color:#fff; }
[data-grad="minimal"] .navball{ color:var(--ink); border-color:rgba(0,0,0,.55); }
[data-grad="minimal"] .navball:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* global "scroll to top" — visible on every page */
.scrolltop{ position:fixed; right:24px; bottom:24px; z-index:55; width:56px; height:56px; }

/* ---------- misc ---------- */
.eyebrow-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pill-int{ font:800 10px/1 var(--sans); letter-spacing:.12em; background:var(--ink); color:#fff; padding:5px 10px; border-radius:5px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.fade-up{ opacity:0; transform:translateY(18px); }
[data-inview] .fade-up, .fade-up.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }

@media (max-width:920px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .io-wrap{ flex-direction:column; }
  .hdr-title{ display:none; }
  .sidenav{ display:none; }
}

/* ============================================================
   GRADIENT BACKGROUNDS (tweakable presets)
   ============================================================ */
/* Hero / divider meshes — the prominent, expressive gradient */
[data-grad="brand"] .hero-stage{
  background:
    radial-gradient(55% 55% at 86% 14%, rgba(93,221,167,.50), transparent 62%),
    radial-gradient(46% 42% at 52% 44%, rgba(93,221,167,.22), transparent 60%),
    radial-gradient(48% 60% at 1% 84%, rgba(214,40,180,.42), transparent 60%),
    radial-gradient(85% 92% at 26% 114%, rgba(7,64,89,.85), transparent 72%),
    linear-gradient(135deg, #003838 0%, #06324a 55%, #053246 100%);
}
[data-grad="teal"] .hero-stage{
  background:
    radial-gradient(55% 55% at 85% 12%, rgba(93,221,167,.55), transparent 62%),
    radial-gradient(52% 52% at 28% 84%, rgba(31,156,139,.45), transparent 64%),
    radial-gradient(64% 72% at 60% 50%, rgba(93,221,167,.16), transparent 60%),
    linear-gradient(140deg, #013a3a 0%, #064a55 60%, #053f4a 100%);
}
[data-grad="ocean"] .hero-stage{
  background:
    radial-gradient(60% 55% at 82% 16%, rgba(93,221,167,.38), transparent 62%),
    radial-gradient(72% 82% at 18% 104%, rgba(7,64,89,.92), transparent 70%),
    linear-gradient(160deg, #063a45 0%, #07273f 100%);
}
[data-grad="minimal"] .hero-stage{ background:transparent; }

/* light content on dark heroes */
.on-dark .kicker{ color:rgba(255,255,255,.72); }
.on-dark .display, .on-dark .h1, .on-dark h1, .on-dark .h2{ color:#fff; }
.on-dark .lead{ color:rgba(255,255,255,.84); }
.on-dark .purpose{ color:#fff; }
.on-dark .mark{ background-image:linear-gradient(transparent 56%, rgba(255,212,94,.9) 56%, rgba(255,212,94,.9) 92%, transparent 92%); }
.on-dark .btn.ghost{ border-color:rgba(255,255,255,.45); color:#fff; }
.on-dark .btn.ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.on-dark .btn.solid{ background:#fff; color:var(--ink); }
.on-dark .btn.solid:hover{ background:rgba(255,255,255,.88); }

/* subtle whole-page tint behind light content */
[data-tint="on"]:not([data-grad="minimal"]) .bg-paper{
  background-image:radial-gradient(46% 62% at 102% -8%, rgba(45,180,150,.11), transparent 60%);
}
[data-tint="on"]:not([data-grad="minimal"]) .bg-paper2{
  background-image:radial-gradient(52% 70% at -6% 110%, rgba(31,156,139,.13), transparent 62%);
}
[data-tint="on"]:not([data-grad="minimal"]) .bg-white{
  background-image:radial-gradient(60% 82% at 110% -22%, rgba(45,180,150,.07), transparent 60%);
}

/* ============================================================
   FULL DARK THEME — whole-page gradient, white text, neon boxes
   (active for every preset except "minimal")
   ============================================================ */
[data-grad]{ min-height:100vh; }

[data-grad="brand"]{
  background:url('assets/hero-gradient.png') center top / 100% 100% no-repeat, #04283c;
  background-attachment: scroll;
}
/* ESG chapter pages (Umwelt / Soziales / Governance) — dedicated gradient */
/* Per-page background variation — each subpage shows a distinct slice / gradient (viewport-fixed cover, page-height independent) */
[data-page="Allgemeine"]:not([data-grad="minimal"]){ background:url('assets/hero-gradient.png') center 12% / cover no-repeat fixed, #04283c !important; }
[data-page="Wesentlich"]:not([data-grad="minimal"]){ background:url('assets/hero-gradient.png') center 80% / cover no-repeat fixed, #04283c !important; }
[data-page="Umwelt"]:not([data-grad="minimal"]){ background:url('assets/gradient-esg.jpg') center 6% / cover no-repeat fixed, #04283c !important; }
[data-page="Soziales"]:not([data-grad="minimal"]){ background:url('assets/gradient-esg.jpg') center 48% / cover no-repeat fixed, #05283a !important; }
[data-page="Governance"]:not([data-grad="minimal"]){ background:url('assets/gradient-esg.jpg') center 92% / cover no-repeat fixed, #06243a !important; }
[data-grad="teal"]{
  background:
    radial-gradient(40% 40% at 85% 6%, rgba(93,221,167,.46), transparent 60%),
    radial-gradient(44% 44% at 22% 96%, rgba(31,156,139,.36), transparent 62%),
    radial-gradient(60% 64% at 60% 46%, rgba(93,221,167,.12), transparent 60%),
    linear-gradient(150deg, #013a3a 0%, #064a55 60%, #053f4a 100%);
  background-attachment: fixed; background-size: cover;
}
[data-grad="ocean"]{
  background:
    radial-gradient(48% 44% at 82% 8%, rgba(93,221,167,.34), transparent 62%),
    radial-gradient(64% 70% at 18% 116%, rgba(7,64,89,.85), transparent 70%),
    linear-gradient(160deg, #063a45 0%, #07273f 100%);
  background-attachment: fixed; background-size: cover;
}
[data-grad="minimal"]{ background:var(--paper); }

/* dark-theme scope: every non-minimal preset */
[data-grad="brand"], [data-grad="teal"], [data-grad="ocean"]{
  --ink:#ffffff; --ink-2:rgba(255,255,255,.88); --ink-3:rgba(255,255,255,.76);
  --muted:rgba(255,255,255,.64); --line:rgba(255,255,255,.16); --line-strong:rgba(255,255,255,.32);
  --paper:transparent; --paper-2:rgba(255,255,255,.10); --paper-3:rgba(255,255,255,.08); --paper-deep:rgba(255,255,255,.22);
  color:#fff;
}

/* heroes show the page gradient (no separate mesh) */
[data-grad="brand"] .hero-stage,
[data-grad="teal"] .hero-stage,
[data-grad="ocean"] .hero-stage{ background:transparent !important; }

/* delete section backgrounds */
[data-grad="brand"] .bg-white, [data-grad="brand"] .bg-paper, [data-grad="brand"] .bg-paper2,
[data-grad="teal"] .bg-white, [data-grad="teal"] .bg-paper, [data-grad="teal"] .bg-paper2,
[data-grad="ocean"] .bg-white, [data-grad="ocean"] .bg-paper, [data-grad="ocean"] .bg-paper2{
  background-color:transparent !important; background-image:none !important;
}

/* all boxes → neon green, white text */
[data-grad="brand"] .card, [data-grad="brand"] .postit, [data-grad="brand"] .kpi, [data-grad="brand"] .tagcode,
[data-grad="teal"] .card, [data-grad="teal"] .postit, [data-grad="teal"] .kpi, [data-grad="teal"] .tagcode,
[data-grad="ocean"] .card, [data-grad="ocean"] .postit, [data-grad="ocean"] .kpi, [data-grad="ocean"] .tagcode{
  background:#00ff00 !important; color:#fff !important;
  border-color:rgba(255,255,255,.5) !important; box-shadow:none !important;
}
[data-grad="brand"] .postit, [data-grad="teal"] .postit, [data-grad="ocean"] .postit{ transform:none; }

/* white text inside boxes */
[data-grad="brand"] .card *, [data-grad="brand"] .postit *, [data-grad="brand"] .kpi *, [data-grad="brand"] .tagcode,
[data-grad="teal"] .card *, [data-grad="teal"] .postit *, [data-grad="teal"] .kpi *, [data-grad="teal"] .tagcode,
[data-grad="ocean"] .card *, [data-grad="ocean"] .postit *, [data-grad="ocean"] .kpi *, [data-grad="ocean"] .tagcode{
  color:#fff !important;
}

/* Cards on dark match the LANDING neon pillarbox: neon-green box with BLACK text.
   Reset local tokens so component inline var(--ink)/--muted/--line render dark & legible. */
[data-grad="brand"] .card, [data-grad="teal"] .card, [data-grad="ocean"] .card{
  --ink:#0b0b0b; --ink-2:#1c1c18; --ink-3:#2c2c27; --muted:#4a4a42;
  --line:rgba(0,0,0,.16); --line-strong:rgba(0,0,0,.28);
  --paper:#00e600; --paper-2:rgba(0,0,0,.06); --paper-3:rgba(0,0,0,.05);
  color:#0b0b0b !important;
}
[data-grad="brand"] .card *, [data-grad="teal"] .card *, [data-grad="ocean"] .card *{ color:#0b0b0b !important; }
/* status pills sit on neon → dark chip, dark label (dots keep their status colour).
   Target the status class too so this beats the later .spill.planned/.progress/.done rules. */
[data-grad="brand"] .card .spill.planned, [data-grad="brand"] .card .spill.progress, [data-grad="brand"] .card .spill.done,
[data-grad="teal"] .card .spill.planned, [data-grad="teal"] .card .spill.progress, [data-grad="teal"] .card .spill.done,
[data-grad="ocean"] .card .spill.planned, [data-grad="ocean"] .card .spill.progress, [data-grad="ocean"] .card .spill.done{
  background:rgba(0,0,0,.10) !important; color:#0b0b0b !important;
}
[data-grad="brand"] .card .spill.planned .dot, [data-grad="teal"] .card .spill.planned .dot, [data-grad="ocean"] .card .spill.planned .dot{ background:#5a5a52 !important; }
[data-grad="brand"] .card .spill.progress .dot, [data-grad="teal"] .card .spill.progress .dot, [data-grad="ocean"] .card .spill.progress .dot{ background:#8a6400 !important; }
[data-grad="brand"] .card .spill.done .dot, [data-grad="teal"] .card .spill.done .dot, [data-grad="ocean"] .card .spill.done .dot{ background:var(--in-deep) !important; }
/* Inside/Outside keep the cream main-page box look on dark presets */
[data-grad="brand"] .io, [data-grad="teal"] .io, [data-grad="ocean"] .io{ background:#edebe4 !important; border:none !important; box-shadow:none !important; }

/* buttons on dark */
[data-grad="brand"] .btn, [data-grad="teal"] .btn, [data-grad="ocean"] .btn{ border-color:rgba(255,255,255,.55); color:#fff; }
[data-grad="brand"] .btn:hover, [data-grad="teal"] .btn:hover, [data-grad="ocean"] .btn:hover{ background:#fff; color:#04283c; border-color:#fff; }
[data-grad="brand"] .btn.solid, [data-grad="teal"] .btn.solid, [data-grad="ocean"] .btn.solid{ background:#fff; color:#04283c; }
[data-grad="brand"] .btn.solid:hover, [data-grad="teal"] .btn.solid:hover, [data-grad="ocean"] .btn.solid:hover{ background:rgba(255,255,255,.86); }
[data-grad="brand"] .pill-int, [data-grad="teal"] .pill-int, [data-grad="ocean"] .pill-int{ background:#00ff00; color:#fff; }

/* header is transparent with white marks on every preset; dropdown menu keeps its dark-green look */
[data-grad="brand"] .hdr, [data-grad="teal"] .hdr, [data-grad="ocean"] .hdr{ background:rgba(0,56,56,.75); border-bottom-color:rgba(255,255,255,.4); }
[data-grad="brand"] .logos img, [data-grad="teal"] .logos img, [data-grad="ocean"] .logos img{ filter:brightness(0) invert(1); }

/* minimal (light) preset: header keeps the dark-green bar, so white marks stay */
[data-grad="minimal"] .hdr{ background:rgba(0,56,56,.75); border-bottom-color:rgba(255,255,255,.4); }

/* continuous gradient: drop all section divider lines on dark presets */
[data-grad="brand"] section, [data-grad="teal"] section, [data-grad="ocean"] section,
[data-grad="brand"] .divide-t, [data-grad="teal"] .divide-t, [data-grad="ocean"] .divide-t,
[data-grad="brand"] .divide-b, [data-grad="teal"] .divide-b, [data-grad="ocean"] .divide-b{
  border-top:none !important; border-bottom:none !important;
}

/* ============================================================
   FIGMA HERO — "Guided by Data / Driven by Purpose"
   ============================================================ */
.hero-blend{ position:relative; }
.hero-claim{ display:flex; flex-direction:column; }
/* subpage title variant — same stroke/serif format AND size as the landing claim */
.hero-claim.sub .hc-guided{ font-size:clamp(48px,10vw,152px); -webkit-text-stroke-width:.9px; text-stroke-width:.9px; }
.hero-claim.sub .hc-driven{ font-size:clamp(48px,10vw,152px); }
.hero-claim.sub.hero-claim-152 .hc-guided, .hero-claim.sub.hero-claim-152 .hc-driven{ font-size:clamp(48px,10vw,152px); }
.hero-claim .hc-guided, .hero-claim .hc-driven{ align-self:flex-start; }
.hero-claim .hc-guided{ margin-left:-0.055em; }
.hero-claim .hc-guided{
  font:900 clamp(72px,12.5vw,176px)/0.86 var(--sans);
  text-transform:uppercase; letter-spacing:-.01em;
  color:transparent;
  -webkit-text-stroke:2.5px rgb(0,246,4);
  text-stroke:2.5px rgb(0,246,4);
}
.hero-claim .hc-guided-svg{
  display:block; align-self:flex-start;
  width:clamp(300px,58vw,760px); height:auto; margin-left:-0.04em; overflow:visible;
}
.hero-claim .hc-guided-t{
  font-family:var(--sans); font-weight:900; font-size:150px;
  text-transform:uppercase; letter-spacing:-1.5px;
  fill:none; stroke:url(#guidedGrad); stroke-width:2px;
  vector-effect:non-scaling-stroke;
  paint-order:stroke;
}
.hero-claim .hc-driven{
  font-family:var(--serif-campaign);
  font-weight:300; font-style:italic;
  font-size:clamp(72px,12.5vw,176px); line-height:0.86;
  text-transform:uppercase; letter-spacing:.01em; color:rgb(0,246,4);
  margin-top:.08em; margin-left:-0.03em;
}
.hero-sub{
  font:300 16px/1.2 var(--sans); letter-spacing:.06em; color:#fff;
  margin:30px 0 0;
}
/* keep the headline readable on every preset */
[data-grad="minimal"] .hero-sub{ color:var(--ink-3); }

/* ============================================================
   FIGMA INFOBOX ("In Kürze") — cream card, folded neon corner
   ============================================================ */
.infobox{
  position:relative; background:#fff; color:#000;
  padding:40px 26px 32px; text-align:center; min-height:236px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 0 100%);
}
.infobox .fold{
  position:absolute; top:0; right:0; width:46px; height:46px; background:rgb(0,246,4);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.infobox .ib-num{
  font-family:var(--serif-campaign); font-style:italic; font-weight:400;
  color:#003838; font-size:clamp(44px,4.6vw,72px); line-height:.9; letter-spacing:.02em;
  max-width:100%; overflow-wrap:break-word;
}
@media (prefers-reduced-motion: reduce){ .infobox .ib-num{ opacity:1; transform:none; animation:none; } }
.infobox .ib-unit{ font-style:italic; font-size:.3em; margin-left:.1em; }
.infobox-grid > *{ min-width:0; }
.infobox .ib-lab{ font:300 16px/1.5 var(--sans); color:#000; max-width:32ch; }
.fn-mark{ font-size:.55em; vertical-align:super; color:var(--ink-3); margin-left:.06em; }
.footnote{ font:400 13px/1.5 var(--sans); color:var(--ink-3); }
.quote-left .quotecard{ align-items:flex-start; text-align:left; }
.quote-left .quotecard .qc-box{ text-align:left; }

/* ---- Old & New report covers (landing) — neon outline, bold shadow on hover ---- */
.report-swap{ position:relative; width:100%; max-width:1000px; margin:0; aspect-ratio:1000 / 244; }
.report-cover{
  position:absolute; top:0; height:100%; display:block; overflow:hidden;
  box-shadow:0 0 0 1px rgb(0,246,4);
  transition:box-shadow .22s ease, transform .22s ease;
}
.report-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.report-cover.left{ left:0; width:34.5%; }
.report-cover.right{ left:65.5%; width:34.5%; }
.report-cover:hover{ box-shadow:0 0 0 1px rgb(0,246,4), 11px 11px 0 0 rgb(0,246,4); }
.report-squiggle{ position:absolute; left:36.4%; top:36.9%; width:27.2%; height:auto; pointer-events:none; }

/* ---- Wesentlich: DWA table + doppelte-Wesentlichkeit diagram ---- */
.dwa-table-wrap{ width:100%; overflow-x:auto; }
.dwa-table{ width:100%; border-collapse:collapse; }
.dwa-table th{ text-align:left; font:700 12px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:0 20px 14px 0; border-bottom:1.5px solid var(--ink); }
.dwa-table td{ padding:18px 20px 18px 0; border-bottom:1px solid var(--line); vertical-align:top; font:500 15px/1.4 var(--sans); color:var(--ink); }
.dwa-table td:first-child{ white-space:nowrap; }
.dwa-bereich{ font-weight:700 !important; }
.dwa-italic{ font-style:italic; color:var(--muted); }

.dwa-matrix{ position:relative; width:100%; max-width:760px; aspect-ratio:860/700; margin:0 auto; }
.dwa-matrix-svg{ position:absolute; inset:0; width:100%; height:100%; }
.dwa-matrix-kicker{ position:absolute; top:5%; left:0; width:100%; text-align:center; font:700 italic 20px/1.2 var(--sans); background:rgb(0,246,4); color:#000; padding:.14em .3em; display:inline; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.dwa-matrix-title{ position:absolute; top:17%; left:0; width:100%; text-align:center; font:italic 400 30px/1 var(--serif); color:var(--ink); }
.dwa-matrix-half{ position:absolute; top:58%; width:26%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.dwa-matrix-half b{ font:700 16px/1.25 var(--sans); color:var(--ink); }
.dwa-matrix-half span{ font:400 13px/1.3 var(--sans); color:var(--ink-2); }
.dwa-matrix-left{ left:23%; }
.dwa-matrix-right{ left:51%; }
.dwa-matrix-side{ position:absolute; top:58%; width:22%; transform:translateY(-50%); font:400 13px/1.35 var(--sans); color:var(--muted); text-align:center; }
.dwa-matrix-side-l{ left:0%; }
.dwa-matrix-side-r{ right:0%; }
@media (max-width:720px){
  .dwa-matrix-side{ position:static; width:100%; margin-top:10px; }
}

/* ---- Wesentlich: IRO tabs (3 categories) ---- */
.iro-slider{ position:relative; padding:clamp(96px,12vh,168px) 0; }
.iro-slider .kicker{ color:rgba(255,255,255,.72); }
.iro-slide-in{ width:100%; }
.iro-tabs{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.iro-tab{ font:600 14.5px/1 var(--sans); color:rgba(255,255,255,.7); background:transparent; border:1.2px solid rgba(255,255,255,.35); border-radius:999px; padding:13px 28px; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.iro-tab:hover{ border-color:rgba(255,255,255,.7); color:#fff; }
.iro-tab.active{ background:rgb(0,246,4); border-color:rgb(0,246,4); color:#04283c; }
.iro-dots{ display:flex; justify-content:center; gap:10px; margin-top:40px; }
.iro-dotnav{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.35); cursor:pointer; transition:background .2s; }
.iro-dotnav.active{ background:rgb(0,246,4); }
.iro-table-wrap{ width:100%; overflow-x:auto; margin-top:36px; }
.iro-table td, .iro-table th, .dwa-table td, .dwa-table th{ overflow-wrap:break-word; hyphens:auto; }
.iro-table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.iro-table th:nth-child(1), .iro-table td:nth-child(1){ width:12%; }
.iro-table th:nth-child(2), .iro-table td:nth-child(2){ width:16%; }
.iro-table th:nth-child(3), .iro-table td:nth-child(3){ width:44%; }
.iro-table th:nth-child(4), .iro-table td:nth-child(4){ width:19%; }
.iro-table th:nth-child(5), .iro-table td:nth-child(5){ width:9%; }
.iro-table th{ text-align:left; font:700 13px/1.3 var(--sans); color:#fff; padding:0 20px 14px 0; border-bottom:2px solid rgba(255,255,255,.7); }
.iro-table td{ padding:16px 20px 16px 0; border-bottom:1px solid rgba(255,255,255,.18); vertical-align:top; font:400 16px/1.4 var(--sans); color:rgba(255,255,255,.92); }
.iro-thema, .iro-unter{ font-weight:700; color:#fff; white-space:normal; overflow-wrap:break-word; word-break:break-word; vertical-align:top; }
.iro-dot{ display:inline-block; width:16px; height:16px; border-radius:50%; border:1.5px solid rgb(0,246,4); }
.iro-dot.filled{ background:rgb(0,246,4); }
.iro-legend{ margin-top:18px; font:500 13px var(--sans); color:rgba(255,255,255,.85); display:flex; align-items:center; gap:8px; }
.iro-legend .iro-dot{ margin-right:0; }
.iro-placeholder{ margin-top:28px; padding:60px; border:1.5px dashed rgba(255,255,255,.3); border-radius:16px; text-align:center; font:600 15px var(--sans); color:rgba(255,255,255,.6); }
.iro-table-wrap{ margin-top:28px; }
.zms-status{ display:inline-flex; align-items:center; gap:8px; color:rgb(0,246,4); font:600 14.5px var(--sans); }
.zms-status .zms-ico-img{ width:18px; height:18px; flex:0 0 18px; display:block; }
.vsme-table{ min-width:0; table-layout:fixed; }
.vsme-table th:first-child, .vsme-table td:first-child{ width:65% !important; }
.vsme-table th:last-child, .vsme-table td:last-child{ width:25% !important; text-align:right; }
.vsme-table tr.vsme-row-module td, .vsme-table tr.vsme-row-cat td{ text-align:left; }
.vsme-row-spacer td{ height:20px; padding:0; border-bottom:none; }
.vsme-table td{ padding:13px 20px 13px 14px; hyphens:manual; }
.vsme-row-module td{ background:rgb(0,246,4); color:#000; font:800 12px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; padding:11px 14px; border-bottom:none; }
.vsme-row-cat td{ background:rgba(255,255,255,.08); color:#fff; font:700 14px/1.3 var(--sans); padding:11px 14px; border-bottom:2px solid rgba(255,255,255,.4); }
.vsme-row-group td{ font-weight:700; color:#fff; padding-top:20px; }
.vsme-row-item td{ color:rgba(255,255,255,.92); }
.vsme-code{ font-weight:700; color:#fff; margin-right:8px; white-space:nowrap; }
.vsme-link{ color:rgb(0,246,4); text-decoration:none; font-weight:700; }
.vsme-link:hover{ text-decoration:underline; }
image-slot.slot-on-dark{ color:rgba(255,255,255,.6); }
image-slot.slot-on-dark::part(frame){ background:rgba(255,255,255,.06); }
image-slot.slot-on-dark::part(ring){ border-color:rgba(255,255,255,.28); }
image-slot#illu-inside-Umwelt::part(frame), image-slot#illu-outside-Umwelt::part(frame), image-slot#illu-inside-Soziales::part(frame), image-slot#illu-outside-Soziales::part(frame){ background:transparent; }
.io-illu-scale{ transform:scale(1.4); transform-origin:center; }
.io-headline{ position:absolute; top:6%; left:50%; transform:translateX(-50%); width:88%; text-align:center; z-index:2; pointer-events:none; }
.io-headline .tag{ display:block; font-family:var(--serif-campaign); font-weight:700; font-style:italic; text-transform:uppercase; letter-spacing:.02em; color:#fff; margin-bottom:4px; font-size:clamp(20px,3vw,38px); line-height:1.1; }
.io-headline .main{ display:block; font-family:"Museo Sans",var(--sans); font-weight:100; text-transform:uppercase; letter-spacing:-.005em; color:#fff; font-size:clamp(20px,3vw,38px); line-height:1.15; }
.io-caption{ text-align:center; font:600 14px var(--sans); color:var(--muted); margin-top:18px; }
.map-headline{ text-align:center; }
.map-headline .tag{ display:block; font-family:var(--serif-campaign); font-weight:700; font-style:italic; text-transform:uppercase; letter-spacing:.02em; color:var(--ink); margin-bottom:4px; font-size:clamp(20px,3vw,38px); line-height:1.1; }
.map-headline .main{ display:block; font-family:"Museo Sans",var(--sans); font-weight:100; text-transform:uppercase; letter-spacing:-.005em; color:var(--ink); font-size:clamp(20px,3vw,38px); line-height:1.15; }

/* ---- Zertifizierungen: einfache Aufzählung ---- */
.zert-list{ list-style:disc; margin:0; padding:0 0 0 20px; display:flex; flex-direction:column; gap:8px; }
.zert-list li{ font:400 16px/1.4 var(--sans); color:var(--ink); }
/* ---- Zertifizierungen tags (legacy) ---- */
.zert-tag{ font:500 13px/1.2 var(--sans); padding:8px 14px; border-radius:999px; border:1.2px solid var(--ink); color:var(--ink); background:transparent; display:inline-flex; transition:background .2s ease, color .2s ease; }
.zert-tag:hover{ background:rgb(0,246,4); color:#000; border-color:rgb(0,246,4); }
/* ---- Products & Services graphic: interactive nodes + explain box ---- */
.ps-node{ position:relative; }
.ps-node:hover{ background:color-mix(in srgb, var(--pc) 12%, transparent) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--pc) 30%, transparent) !important; transform:translateY(-2px); }
.ps-node:active{ transform:translateY(0); }
.ps-pill{ transition:box-shadow .18s, transform .18s; }
.ps-pill:hover{ box-shadow:0 0 0 4px color-mix(in srgb, var(--pc) 22%, transparent); transform:translateY(-1px); }
.ps-explain{
  margin-top:32px; width:100%; box-sizing:border-box;
  border:1.5px solid; border-radius:16px; padding:28px 32px;
  background:rgba(255,255,255,.05); backdrop-filter:blur(2px);
  transition:border-color .2s;
}

/* ---- Stacked report covers (Allgemeine / Über diesen Bericht) — old offset behind new (smaller), grey year labels turning neon on hover, green shadow on hover ---- */
.report-stack{ position:relative; width:100%; max-width:520px; aspect-ratio:100 / 95; margin-left:auto; align-self:center; transform:translate(-18px,-18px); }
.report-stack .rs-cover{ position:absolute; display:block; overflow:hidden; transition:box-shadow .22s ease; }
.report-stack .rs-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.report-stack .rs-old{ top:calc(11% + 10px); left:-50px; width:66%; z-index:1; }
.report-stack .rs-new{ top:31%; left:22%; width:78%; z-index:2; }
.report-stack .rs-cover:hover{ box-shadow:14px 14px 0 0 rgb(0,246,4); z-index:3; }
.report-stack .rs-year{
  position:absolute; z-index:4;
  font-family:var(--serif-campaign); font-style:italic; font-weight:400;
  line-height:.9; letter-spacing:.02em; transition:color .2s ease;
}
.foldcard .report-stack .rs-year{ color:#edebe4 !important; }
.report-stack .rs-year.y-old{ bottom:calc(89% + 3px); top:auto; left:-50px; font-size:clamp(26px,2.8vw,40px); }
.report-stack .rs-year.y-new{ top:calc(89% + 30px); bottom:auto; left:22%; font-size:clamp(34px,3.6vw,54px); }
.foldcard .report-stack:has(.rs-old:hover) .y-old, .foldcard .report-stack .y-old:hover{ color:#00F604 !important; }
.foldcard .report-stack:has(.rs-new:hover) .y-new, .foldcard .report-stack .y-new:hover{ color:#00F604 !important; }

/* ---- Werte headline: neon-green highlight behind black caps ---- */
.hl-green{ background:rgb(0,246,4); color:#000; padding:.09em .18em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
/* Werte value titles — small neon-green highlight, black 900 caps, size preserved */
.werte-t{ text-align:center; margin-bottom:12px; }
.werte-t span{ font:900 15px/1.1 var(--sans); text-transform:uppercase; background:rgb(0,246,4); color:#000; padding:.32em .16em .18em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
/* ---- Quote: photo sits behind box, box in front (centering for quote-left contexts) ---- */
.qc-behind .quotecard{ align-items:center; text-align:center; }
.qc-behind .quotecard .qc-box{ text-align:center; }
@media (max-width:560px){
  .report-cover:hover{ box-shadow:0 0 0 1px rgb(0,246,4), 6px 6px 0 0 rgb(0,246,4); }
}

/* ============================================================
   FIGMA QUOTE ("Zitat") — portrait over cream box, neon inset
   ============================================================ */
.quotecard{ display:flex; flex-direction:column; align-items:center; margin:0; }
.quotecard .qc-photo{
  width:330px; max-width:74%; height:auto; position:relative; z-index:0; margin-bottom:-22px;
}
image-slot.qc-photo{ aspect-ratio:4/5; height:auto; }
.quotecard .qc-box{
  background:#ffffff; box-shadow:inset 0 0 0 6px rgb(0,246,4);
  padding:52px 42px 36px; text-align:center; width:100%; max-width:620px; position:relative; z-index:2;
}
.quotecard.no-photo .qc-box{ padding-top:42px; }
.quotecard .qc-text{ margin:0; font:300 clamp(18px,1.5vw,22.4px)/1.48 var(--sans); color:#111; }
.quotecard .qc-name{ display:block; margin-top:20px; font:600 15px var(--sans); color:#111; }
.quotecard .qc-role{ font-weight:300; color:#555; }

/* ---- Download box: white card, folded green corner, black text ---- */
.dlbox{
  position:relative; background:#fff; color:#000;
  padding:28px; min-height:200px;
  clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 0 100%);
}
.dlbox .fold-dark{
  position:absolute; top:0; right:0; width:46px; height:46px; background:rgb(0,246,4);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.dlbox .btn{ border-color:#000; color:#000; align-self:flex-start; }
.dlbox .btn:hover{ background:rgb(0,246,4); color:#000; border-color:rgb(0,246,4); }
.dlbox .h3{ font-weight:900; }
/* keep the white download box out of the dark neon-box override */
[data-grad="brand"] .dlbox, [data-grad="teal"] .dlbox, [data-grad="ocean"] .dlbox{
  background:#fff !important; color:#000 !important; box-shadow:none !important; border:none !important;
}
[data-grad="brand"] .dlbox *, [data-grad="teal"] .dlbox *, [data-grad="ocean"] .dlbox *{ color:inherit !important; }
[data-grad="brand"] .dlbox .btn, [data-grad="teal"] .dlbox .btn, [data-grad="ocean"] .dlbox .btn{ color:#000 !important; border-color:#000 !important; }
[data-grad="brand"] .dlbox .btn:hover, [data-grad="teal"] .dlbox .btn:hover, [data-grad="ocean"] .dlbox .btn:hover{ background:rgb(0,246,4) !important; color:#000 !important; border-color:rgb(0,246,4) !important; }

/* ---- Pillar box ("Wesentliche Themen"): cream, folded neon corner ---- */
.pillarbox{
  position:relative; display:flex; flex-direction:column;
  background:rgb(0,246,4); color:#000; text-decoration:none;
  padding:30px 28px 28px; min-height:300px;
  clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 0 100%);
  transition:transform .18s ease, box-shadow .18s ease;
}
.pillarbox:hover{ transform:translateY(-4px); }
.pillarbox .fold{
  position:absolute; top:0; right:0; width:46px; height:46px; background:#fff;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.pillarbox .pb-letter{
  font-family:var(--serif-campaign); font-style:italic; font-weight:400;
  color:#FFFFFF; font-size:clamp(44px,4.6vw,72px); line-height:.9; margin-bottom:14px;
}
.pillarbox .pb-wesentlich{ font:italic 300 16px/1.6 var(--sans); letter-spacing:-.01em; color:#000; margin-bottom:12px; }
.pillarbox .h3{ color:#000; font-weight:900; }
.pillarbox .pb-cta{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font:500 14.5px/1 var(--sans);
  padding:13px 28px; border-radius:999px; border:1.2px solid #000; color:#000; background:transparent;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.pillarbox p + .pb-cta{ margin-top:auto; }
.pillarbox p:has(+ .pb-cta){ margin-bottom:44px; }
.pillarbox .pb-cta:hover{ background:#fff; color:#000; border-color:#fff; text-decoration:none; }
/* out of the dark neon-box override */
[data-grad="brand"] .pillarbox, [data-grad="teal"] .pillarbox, [data-grad="ocean"] .pillarbox{
  background:rgb(0,246,4) !important; color:#000 !important; box-shadow:none !important; border:none !important;
}
[data-grad="brand"] .pillarbox .h3, [data-grad="teal"] .pillarbox .h3, [data-grad="ocean"] .pillarbox .h3{ color:#000 !important; }

/* ---- Foldcard: reusable main-page signature box (cream + folded neon corner) ---- */
.foldcard{
  position:relative; background:#fff; color:#000;
  --ink:#0b0b0b; --ink-2:#222; --ink-3:#333; --muted:#5a5a52;
  --line:rgba(0,0,0,.14); --line-strong:rgba(0,0,0,.3); --paper:#e3e0d7; --paper-2:#e3e0d7;
  clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 42px, 100% 100%, 0 100%);
}
.foldcard::before{
  content:""; position:absolute; top:0; right:0; width:42px; height:42px;
  background:rgb(0,246,4); clip-path: polygon(0 0, 0 100%, 100% 100%); z-index:2;
}
.foldcard .h3, .foldcard h3, .foldcard .h2{ color:#0b0b0b; }
.foldcard.sm{ clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); }
.foldcard.sm::before{ width:30px; height:30px; }
/* keep foldcards out of the dark neon-box override */
[data-grad="brand"] .foldcard, [data-grad="teal"] .foldcard, [data-grad="ocean"] .foldcard{
  background:#fff !important; box-shadow:none !important; border:none !important;
}
[data-grad="brand"] .foldcard-white, [data-grad="teal"] .foldcard-white, [data-grad="ocean"] .foldcard-white{
  background:#fff !important;
}
[data-grad="brand"] .foldcard *, [data-grad="teal"] .foldcard *, [data-grad="ocean"] .foldcard *{ color:inherit !important; }
[data-grad="brand"] .foldcard .tagcode, [data-grad="teal"] .foldcard .tagcode, [data-grad="ocean"] .foldcard .tagcode{
  background:#fff !important; color:#0b0b0b !important; border:1px solid rgba(0,0,0,.14) !important;
}
[data-grad="brand"] .foldcard .btn, [data-grad="teal"] .foldcard .btn, [data-grad="ocean"] .foldcard .btn{ border-color:#003838 !important; color:#003838 !important; }
[data-grad="brand"] .foldcard .btn:hover, [data-grad="teal"] .foldcard .btn:hover, [data-grad="ocean"] .foldcard .btn:hover{ background:#003838 !important; color:rgb(0,246,4) !important; }

/* button hover inside neon boxes stays legible */
[data-grad="brand"] .card .btn:hover, [data-grad="teal"] .card .btn:hover, [data-grad="ocean"] .card .btn:hover{ color:#04283c !important; }
/* status pills on dark */
[data-grad="brand"] .spill.planned, [data-grad="teal"] .spill.planned, [data-grad="ocean"] .spill.planned{ background:rgba(255,255,255,.18) !important; color:#fff !important; }
[data-grad="brand"] .spill.progress, [data-grad="teal"] .spill.progress, [data-grad="ocean"] .spill.progress{ background:rgba(240,180,80,.28) !important; color:#ffe1a6 !important; }
[data-grad="brand"] .spill.done, [data-grad="teal"] .spill.done, [data-grad="ocean"] .spill.done{ background:rgba(93,221,167,.26) !important; color:#aef0d0 !important; }

.pdf-table-btn{ display:none; }

/* ---- Inside / Outside diagram (Wesentlich) ---- */
.io-diagram{ margin-top:96px; }
.iod-title{ margin:0 0 34px; text-align:center; font-family:var(--serif-campaign); font-style:italic; font-weight:500; font-size:clamp(20px,2vw,26px); color:inherit; }
.iod-axis{ display:grid; grid-template-columns:minmax(0,1fr) minmax(60px,2fr) auto minmax(60px,2fr) minmax(0,1fr); align-items:center; justify-items:center; gap:16px; }
.iod-tag{ position:relative; display:inline-block; padding:2px 16px; font-family:var(--serif-campaign); font-style:italic; font-weight:500; font-size:clamp(22px,2.4vw,30px); color:#000; background:rgb(0,246,4); transform:skewX(-8deg); }
.iod-tag > *{ display:inline-block; transform:skewX(8deg); }
.iod-vs{ font-family:var(--serif-campaign); font-style:italic; font-size:clamp(18px,1.8vw,24px); color:inherit; }
.iod-arrow{ position:relative; width:100%; height:2px; background:#ff00ff; }
.iod-arrow::after{ content:""; position:absolute; top:50%; width:11px; height:11px; border-top:2px solid #ff00ff; border-right:2px solid #ff00ff; }
.iod-arrow.left::after{ left:0; transform:translateY(-50%) rotate(-135deg); }
.iod-arrow.right::after{ right:0; transform:translateY(-50%) rotate(45deg); }
.iod-stems{ display:grid; grid-template-columns:1fr 1fr; gap:40px; height:44px; }
.iod-stems i{ display:block; justify-self:center; width:1.5px; height:100%; background:currentColor; opacity:.6; }
.iod-cards{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.iod-card{ margin:0; border:1.5px solid currentColor; padding:28px 26px; text-align:center; font:400 16px/1.5 var(--sans); color:inherit; text-wrap:pretty; }

/* ============================================================
   MOBILE / RESPONSIVE — smartphone + tablet
   Keeps the desktop look; only reflows what cannot fit.
   ============================================================ */
@media (max-width:900px){
  html{ scroll-padding-top:112px; }
  .wrap, .wrap-n{ padding:0 20px; width:100% !important; max-width:100% !important; box-sizing:border-box; min-width:0; }
  .wrap *, .wrap-n *{ min-width:0; }
  .iro-table-wrap, .dwa-table-wrap, .vsme-table-wrap{ max-width:100%; min-width:0; }
  .hdr-in, .subnav-in{ padding:0 20px; }
  .pad{ padding:clamp(56px,9vh,96px) 0; }
  .pad-s{ padding:clamp(40px,6vh,72px) 0; }
  :root{ --flow:40px; }
  .scrolltop{ right:14px; bottom:14px; width:46px; height:46px; }
}
@media (max-width:720px){
  .hdr-in{ height:64px; }
  .subnav{ top:64px; }
  html{ scroll-padding-top:120px; }
  .subnav{ overflow:visible; z-index:70; background:rgba(0,56,56,.94); }
  .hdr{ background:rgba(0,56,56,.94); }
  .subnav-in{ height:52px; gap:0; justify-content:flex-start; }
  .subnav-in .subnav-link{ display:none; }
  .subnav-burger{ display:flex; }
  .subnav-sheet{ display:flex; flex-direction:column; position:absolute; left:0; right:0; top:100%; z-index:56; background:rgba(0,56,56,.94); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.4); padding:6px 20px 14px; max-height:calc(100svh - 116px); overflow-y:auto; overscroll-behavior:contain; }
  .subnav-sheet[hidden]{ display:none; }
  .sheet-link{ font:700 15px/1.3 var(--sans); color:rgba(255,255,255,.78); text-decoration:none; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.14); min-height:44px; display:flex; align-items:center; }
  .sheet-link:last-child{ border-bottom:0; }
  .sheet-link.active{ color:rgb(0,246,4); }
  .subnav-scrim-host{ display:block; position:absolute; inset:0; }
  .subnav-scrim-host[hidden]{ display:none; }
  .subnav-scrim{ display:block; position:absolute; top:52px; left:-50vw; width:150vw; height:200svh; z-index:54; background:rgba(0,20,20,.42); touch-action:none; }
  html{ scroll-padding-top:96px; }
  .h1{ font-size:clamp(28px,8.5vw,40px); }
  .h1, .h2, .h3, .lead, .body, .small, .kicker{ overflow-wrap:break-word; hyphens:auto; }
  .h2{ font-size:clamp(28px,8vw,40px); }
  .h3{ font-size:clamp(19px,5vw,24px); }
  .lead{ font-size:17px; }
  /* stacked KPI / stat grids */
  .infobox-grid{ grid-template-columns:1fr !important; gap:18px !important; }
  .werte-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:22px !important; }
  .grid-3, .grid-2{ grid-template-columns:1fr !important; gap:20px; align-items:start; }
  .pillarbox{ height:auto; min-height:0; }
  /* products & services: two columns → one, hub row stays 3-up but tighter */
  .ps-cols{ grid-template-columns:1fr !important; gap:44px !important; }
  .ps-node{ padding:12px 8px !important; }
  .ps-explain{ padding:20px 18px; }
  /* Inside/Outside diagram stacks */
  .iod-axis{ grid-template-columns:auto minmax(28px,1fr) auto minmax(28px,1fr) auto; gap:10px; }
  .iod-title{ margin-bottom:26px; }
  .iod-stems{ grid-template-columns:1fr; gap:0; height:26px; }
  .iod-stems i:last-child{ display:none; }
  .iod-cards{ grid-template-columns:1fr; gap:26px; }
  .iod-card{ padding:22px 18px; text-align:left; }
  /* tables → PDF button */
  .tbl-desk{ display:none !important; }
  .pdf-table-btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:16px; width:100%; margin-top:28px; padding:16px 20px; min-height:56px; box-sizing:border-box; border:1.5px solid currentColor; border-radius:999px; font:700 15px/1.25 var(--sans); text-decoration:none; }
  .pdf-table-btn{ color:rgb(0,246,4); }
  .iro-table-wrap{ -webkit-overflow-scrolling:touch; }
  .iro-table{ min-width:640px; }
  .dwa-table{ min-width:560px; }
  .vsme-table{ min-width:0; }
  /* Germany map: full width */
  .de-karte{ width:124% !important; max-width:none !important; margin:8px -12% 0 !important; }
  /* stacked report covers: keep the offset look, inside the viewport */
  .report-stack{ max-width:340px; margin:0 auto; transform:none; }
  .report-stack .rs-old{ left:-4%; width:60%; }
  .report-stack .rs-new{ left:26%; width:74%; }
  .report-stack .rs-year.y-old{ left:-4%; }
  .report-stack .rs-year.y-new{ left:26%; }
  /* quotes */
  .quotecard .qc-photo{ width:220px; max-width:62%; }
  .quotecard .qc-box{ padding:38px 22px 28px; }
  .quotecard .qc-text{ font-size:17px; }
  /* inside/outside panels */
  .io{ padding:22px 18px; }
  .io-illu-scale{ transform:scale(1.1); }
  .io-headline{ width:94%; }
  /* post-its keep their tilt but need room */
  .postit{ padding:20px 18px 18px; }
  /* dwa matrix labels */
  .dwa-matrix-kicker{ font-size:15px; }
  /* footer link row must wrap */
  .ftr-in{ padding:40px 20px; }
  .ftr-in .small{ flex-wrap:wrap !important; gap:14px 18px !important; }
  /* hero claim: lower the clamp floors so the words fit the viewport */
  .hero-claim .hc-guided, .hero-claim .hc-driven{ font-size:clamp(40px,13vw,72px) !important; }
  .hero-claim.sub .hc-guided, .hero-claim.sub .hc-driven,
  .hero-claim.sub.hero-claim-152 .hc-guided, .hero-claim.sub.hero-claim-152 .hc-driven{ font-size:clamp(28px,9vw,64px) !important; }
  .hero-claim .hc-guided{ -webkit-text-stroke-width:1.4px; text-stroke-width:1.4px; }
  .hero-claim .hc-guided-svg{ width:min(100%,58vw); min-width:0; }
  .hero-claim .hc-driven{ line-height:1.02; }
}
@media (max-width:480px){
  .werte-grid{ grid-template-columns:1fr !important; }
  .subnav-link{ font-size:12px; }
  .logos{ gap:12px; }
  .logos img{ height:20px; }
  .hero-claim .hc-guided, .hero-claim .hc-driven{ font-size:clamp(34px,12.5vw,54px) !important; }
  .hero-claim.sub .hc-guided, .hero-claim.sub .hc-driven,
  .hero-claim.sub.hero-claim-152 .hc-guided, .hero-claim.sub.hero-claim-152 .hc-driven{ font-size:clamp(24px,8vw,48px) !important; }
  .hero-claim .hc-guided-svg{ width:100%; }
}
@media (max-width:900px){
  /* chapter heroes (E Umwelt …): word fills the column width */
  .ch-hero{ align-self:stretch; width:100%; }
  .ch-hero-word{ width:100% !important; height:auto !important; max-width:100% !important; }
  .ch-hero-e{ font-size:clamp(72px,18vw,150px) !important; }
}