/* ═══ IV Site 2 (Social Responsibility) shared styles ═══
   Extracted from inline <style> blocks 2026-05-09 (S11 production refactor)
   Canonical source: impact/seed-prep.html (correct IV color on calculator selectors) */
/* ═══ IV SITE 2 SHARED STYLES — /impact/ ═══
   Brand Spec v1.1 — light mode for content, dark nav anchor preserved.
   Calculator section retains dark mode treatment (intentional editorial contrast).
*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Core palette */
  --dark-marble:#1a1225;--deep-surface:#2a1d3d;--tyrian:#3d2855;
  --bronze:#c4956a;--marble:#e8e4de;--deep-red:#e07070;
  --alert-red:#7a3a3a;--ash:#aea2bc;--warm-stone:#b89776;
  --healthy:#5ab478;--mid-purple:#a08cba;--deep-nav:#140e1e;
  /* Light-mode structural */
  --light-marble:#f2efea;--warm-white:#f5f2ed;--warm-gray:#d4cfc6;
  --deep-purple-text:#5a4e64;--alert-light:#c47070;--cal-purple:#a08cba;
  /* Typography */
  --serif:Georgia,'Times New Roman',serif;
  --sans:Arial,'Helvetica Neue',Helvetica,sans-serif;
  /* Parchment family (Ludus-style accents, used sparingly) */
  --parchment-bg:#e5dac6;--parchment-light:#ede4d3;--parchment-card:#f0e8d8;
  --parchment-rule:#c4b8a0;--ink-primary:#2a1f15;--ink-secondary:#5a4e3d;
  --ink-muted:#8a7e6a;--sepia:#8a6d4a;
  /* Domain accents */
  --leaf-green:#4a7a3a;--earth:#8a6a3a;
  /* Verdeckter Bereich am Viewport-Oberrand: fixe Nav + sticky Storybar.
     Speist scroll-padding-top (US-17). Werte identisch zu iv-shared.css. */
  --iv-nav-h:54px;--iv-storybar-h:50px;--iv-scroll-gap:16px;
}
/* scroll-padding-top gilt fuer JEDE Fragment-Navigation im Dokument und
   deckt damit alle Sprungmarken dieser Seiten auf einmal ab (US-17).
   Wirkt NICHT auf window.scrollTo() mit festem Wert, die Role Tour springt
   deshalb unveraendert korrekt (kein doppelter Offset). */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--iv-nav-h) + var(--iv-storybar-h) + var(--iv-scroll-gap))}
h1,h2,h3,h4{font-family:var(--serif)}
h1{font-weight:700}h2{font-weight:500}h3{font-weight:600}

body{font-family:var(--sans);background:var(--dark-marble);color:var(--marble);font-size:17px;line-height:1.7;font-weight:400}
.iv-name{color:var(--deep-red);font-family:var(--serif);font-weight:700}
.iv-red{color:var(--deep-red)}

/* ═══ NAV (always dark, both modes — brand spec §7.3) ═══ */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--deep-nav);display:flex;align-items:center;padding:0 2.5rem;height:54px;border-bottom:1px solid rgba(61,40,85,0.3)}
.nav-brand{display:flex;align-items:baseline;gap:0.6rem;margin-right:auto;text-decoration:none}
.nav-iv{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:2px;color:var(--deep-red)}
.nav-tagline{font-size:9px;letter-spacing:1px;color:var(--warm-stone);opacity:0.7;text-transform:uppercase}
.nav-links{display:flex;gap:0;list-style:none;align-items:center}
.nav-links a{color:var(--ash);text-decoration:none;font-size:12px;letter-spacing:0.5px;transition:color 0.3s,border-color 0.3s;font-weight:400;padding:17px 1rem;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--marble)}
.nav-links a.active{color:var(--bronze);border-bottom-color:var(--bronze)}
/* Sprachumschalter im Menue (US-14.1). Zeigt die jeweils ANDERE Sprache.
   Wird von build.py nur eingesetzt, wenn die Gegenseite existiert. */
.nav-links a.nav-lang{color:var(--warm-stone);font-weight:500;letter-spacing:1.5px;font-size:11px}
.nav-links a.nav-lang:hover{color:var(--bronze)}


/* Mega-menu — Site 2 sub-page nav under "Impact" */
/* display:flex und align-items:stretch sind funktional zwingend, nicht kosmetisch:
   .nav-links erbt align-items:center; ohne Stretch ist die Hover-Zeile nur 29px hoch
   statt 54 (gemessen 12..41 statt -2..55). Das Dropdown haengt per top:54px dann 25px
   UNTER der Zeile, und die Maus verlaesst auf dem Weg dorthin den :hover-Bereich, das
   Menue klappt zu und ist unerreichbar. In iv-shared.css stand die Angabe von Anfang an,
   deshalb trat der Fehler ausschliesslich auf den Research- und Impact-Seiten auf
   (Meldung Ben, 06.08.2026). Alle drei Stylesheets sind hier jetzt identisch. */
.has-mega{position:relative;display:flex;align-items:stretch}
.mega{position:absolute;top:54px;left:50%;transform:translateX(-50%);background:var(--deep-nav);border:1px solid var(--tyrian);border-top:none;min-width:280px;padding:0.75rem 0;display:none;box-shadow:0 6px 20px rgba(0,0,0,0.4)}
.has-mega:hover .mega,.has-mega:focus-within .mega{display:block}
/* Letztes Dropdown rechts ausrichten statt zentriert, sonst ragt es 50px aus dem Bild
   (gemessen bei 1440/1280/1024px). Siehe iv-shared.css, dort ausfuehrlich begruendet. */
@media (min-width:900px){
  /* :last-of-type statt :last-child (korrigiert 14.08.2026). Der Selektor hing an
     der Annahme, dass die Research-Gruppe das letzte Kind von .nav-links ist. Das
     stimmte, bis der Sprachumschalter (<a class="nav-lang">) und der Prinzipien-Block
     fuer die Schublade (<div class="nav-mobile-only">) dahinter kamen. Damit griff die
     Rechtsausrichtung nicht mehr, und das Dropdown lief auf der ENGLISCHEN Site bei
     jeder gemessenen Breite (900 bis 1440px) 2px ueber den rechten Rand; auf der
     deutschen fehlte 1px, also reiner Zufall. :last-of-type meint das letzte
     span.has-mega und damit weiter genau die Research-Gruppe. */
  .nav-links > .has-mega:last-of-type .mega{left:auto;right:0;transform:none}
}
.mega a{display:block;padding:10px 1.25rem;border:none;color:var(--ash);font-size:12px;letter-spacing:0.5px}
.mega a:hover{color:var(--bronze);background:rgba(196,149,106,0.06)}
.mega-numeral{font-family:var(--serif);color:var(--bronze);font-weight:700;margin-right:0.5rem;display:inline-block;width:22px}

/* ═══ FADE-IN ═══ */


/* ═══ SHARED LAYOUT ═══ */
.section-inner{max-width:960px;margin:0 auto}
.section-divider{width:60px;height:1px;background:linear-gradient(90deg,var(--warm-stone),transparent);margin-bottom:2rem}

/* ═══ /IMPACT/ HERO + LIGHT SURFACE ═══ */
.iv-principle-hero{padding:8.5rem 2rem 3rem;text-align:center;background:var(--dark-marble);position:relative;overflow:hidden}
.iv-principle-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 30%,rgba(61,40,85,0.18),transparent);pointer-events:none}
.iv-principle-hero-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.iv-principle-numeral{font-family:var(--serif);font-size:clamp(64px,10vw,104px);font-weight:700;letter-spacing:4px;color:var(--bronze);opacity:0.9;line-height:1;margin-bottom:1.25rem}
.iv-principle-name{font-family:var(--serif);font-size:clamp(30px,4.5vw,46px);font-weight:400;color:var(--marble);letter-spacing:1px;margin-top:0.5rem;line-height:1.2}
.iv-principle-hero .zone-label{font-size:11px;text-transform:uppercase;letter-spacing:4px;color:var(--bronze);margin-bottom:0.5rem;font-weight:500}
.impact-hero{padding:7rem 2rem 3rem;text-align:center;background:var(--dark-marble)}
.ag-label{font-size:11px;text-transform:uppercase;letter-spacing:4px;color:var(--warm-stone);margin-bottom:0.5rem}
.ag-divider{width:60px;height:1px;background:linear-gradient(90deg,var(--warm-stone),transparent);margin:0 auto 2rem}
.ag-title{font-size:clamp(28px,4vw,40px);font-weight:500;color:var(--marble);line-height:1.2;margin-bottom:1rem}
.ag-sub{font-size:17px;color:var(--ash);max-width:620px;margin:0 auto;line-height:1.7}

/* ═══ SEED TREE / IMAGE WRAP ═══ */
.seed-tree-wrap{display:flex;justify-content:center;padding:2rem 2rem 1rem}
.seed-tree-wrap img{width:100%;max-width:480px;border-radius:8px}
.seed-label{text-align:center;margin-bottom:3rem}
.seed-label h2{font-family:var(--serif);font-size:clamp(24px,3vw,32px);color:var(--marble);font-weight:700;margin-bottom:0.25rem}
.seed-label p{font-size:13px;color:var(--ash);letter-spacing:1px}

/* ═══ DOMAINS GRID ═══ */
.domains-section{max-width:800px;margin:0 auto;padding:0 2rem 4rem}
.domains-section h2{font-size:clamp(20px,2.5vw,26px);font-weight:500;color:var(--marble);text-align:center;margin-bottom:0.75rem}
.domains-intro{text-align:center;font-size:15px;color:var(--ash);max-width:560px;margin:0 auto 2.5rem;line-height:1.7}
.domain-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.domain-card{background:rgba(61,40,85,0.35);border:1px solid var(--tyrian);border-radius:4px;padding:1.75rem;transition:border-color 0.3s;position:relative;overflow:hidden}
.domain-card:hover{border-color:var(--warm-stone)}
.domain-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%}
.domain-card:nth-child(1)::before{background:var(--bronze)}
.domain-card:nth-child(2)::before{background:var(--leaf-green)}
.domain-card:nth-child(3)::before{background:var(--warm-stone)}
.domain-card:nth-child(4)::before{background:var(--mid-purple)}
.dc-title{font-size:16px;font-weight:500;color:var(--marble);margin-bottom:0.5rem}
.dc-desc{font-size:14px;color:var(--ash);line-height:1.7}

/* ═══ PROGRAM CARDS ═══ */
.programs-section{background:rgba(61,40,85,0.35);border-top:1px solid var(--tyrian);border-bottom:1px solid var(--tyrian);padding:4rem 2rem}
.programs-inner{max-width:800px;margin:0 auto}
.programs-inner h2{font-size:clamp(20px,2.5vw,26px);font-weight:500;color:var(--marble);text-align:center;margin-bottom:2.5rem}
.program-cards{display:grid;grid-template-columns:1fr;gap:1.5rem}
.prog-card{display:grid;grid-template-columns:120px 1fr;gap:1.5rem;align-items:start;padding:1.75rem;border:1px solid var(--tyrian);border-radius:4px;transition:border-color 0.3s,background 0.3s;text-decoration:none;color:inherit;background:transparent}
.prog-card:hover{border-color:var(--warm-stone);background:rgba(154,123,90,0.04)}
.pc-abbr{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--bronze);line-height:1}
.pc-abbr.compact{font-size:20px}
.pc-full{font-size:10px;color:var(--ash);letter-spacing:1px;margin-top:0.25rem;line-height:1.4}
.pc-body h3{font-size:16px;font-weight:500;color:var(--marble);margin-bottom:0.5rem}
.pc-body p{font-size:14px;color:var(--ash);line-height:1.7}
.pc-cta{display:inline-block;margin-top:0.75rem;font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--bronze);font-weight:500}

/* ═══ SUB-PAGE PROSE BLOCKS ═══ */
.l-container{max-width:800px;margin:0 auto;padding:3rem 2rem}
.l-container .l-label{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--sepia);margin-bottom:0.75rem}
.l-container .l-heading{font-family:var(--serif);font-size:clamp(22px,3vw,28px);font-weight:500;color:var(--marble);margin-bottom:1.5rem;line-height:1.4}
.l-container p{font-size:15px;color:var(--ash);line-height:1.8;margin-bottom:1rem}
.l-container p strong{color:var(--marble);font-weight:500}
.l-callout{background:rgba(61,40,85,0.35);border:1px solid var(--tyrian);border-left:3px solid var(--deep-red);padding:2rem 2.5rem;border-radius:2px;margin:2rem 0}
.l-callout .lead{font-size:18px;font-style:italic;color:var(--marble);line-height:1.8;margin-bottom:1rem}
.l-callout .body{font-size:15px;color:var(--ash);line-height:1.8;margin:0}

/* ═══ STAGE/PHASE GRID (used for SEED methodology, GAP delivers, CTP components) ═══ */
.phase-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:1.5rem 0}
.phase-card{background:rgba(61,40,85,0.35);border:1px solid var(--tyrian);border-left:3px solid var(--bronze);padding:1.5rem;border-radius:2px}
.phase-card h4{font-size:15px;font-weight:500;color:var(--marble);margin-bottom:0.5rem}
.phase-card .phase-letter{font-family:var(--serif);font-size:11px;letter-spacing:3px;color:var(--sepia);margin-bottom:0.5rem;text-transform:uppercase}
.phase-card p{font-size:13px;line-height:1.6;color:var(--ash);margin:0}
.phase-card.full-width{grid-column:1/-1}

/* ═══ SEED MATRIX TABLE ═══ */
.matrix-wrap{overflow-x:auto;margin:1.5rem 0}
.seed-matrix{width:100%;border-collapse:collapse;font-size:13px;background:rgba(61,40,85,0.35);border:1px solid var(--tyrian)}
.seed-matrix th,.seed-matrix td{padding:10px 12px;border:1px solid var(--tyrian);text-align:left;vertical-align:top}
.seed-matrix th{background:var(--dark-marble);color:var(--marble);font-weight:500;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.seed-matrix td.phase{background:var(--dark-marble);font-weight:500;color:var(--marble)}
.seed-matrix td.empty{color:var(--ink-muted);font-style:italic;opacity:0.6}

/* ═══ TRELIS BLOCK (on adaptr page) ═══ */
.trelis-block{background:rgba(61,40,85,0.35);border:1px solid var(--tyrian);border-left:3px solid var(--bronze);padding:2rem 2.5rem;border-radius:2px;margin:2.5rem 0}
.trelis-block .trelis-label{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--sepia);margin-bottom:0.5rem}
.trelis-block h3{font-family:var(--serif);font-size:20px;font-weight:500;color:var(--marble);margin-bottom:0.75rem}
.trelis-block p{font-size:14px;color:var(--ash);line-height:1.8;margin-bottom:0.75rem}
.trelis-block .trelis-status{font-size:11px;color:var(--sepia);font-style:italic;letter-spacing:1px;margin-top:1rem}

/* ═══ CTA BUTTONS ═══ */
.impact-cta{background:rgba(61,40,85,0.35);padding:3rem 2rem;border-top:1px solid var(--tyrian);text-align:center;margin-top:3rem}
.impact-cta-inner{max-width:640px;margin:0 auto}
.impact-cta-inner h2{font-size:clamp(20px,2.5vw,24px);font-weight:500;color:var(--marble);margin-bottom:1rem}
.impact-cta-inner p{font-size:14px;color:var(--ash);line-height:1.8;margin-bottom:1.5rem}
.cta-button{display:inline-block;font-size:12px;text-transform:uppercase;letter-spacing:3px;color:var(--bronze);border:1px solid rgba(196,149,106,0.6);padding:12px 32px;border-radius:3px;cursor:pointer;transition:background 0.3s,border-color 0.3s;text-decoration:none;font-weight:500;background:transparent}
.cta-button:hover{background:rgba(196,149,106,0.1);border-color:var(--bronze)}

/* ═══ CLOSING MOTTO ═══ */
.agora-close{text-align:center;padding:4rem 2rem 5rem;max-width:640px;margin:0 auto}
.agora-close p{font-size:16px;color:var(--ash);line-height:1.8;margin-bottom:1.5rem}

/* ═══ FOOTER ═══ */
footer{background:var(--deep-nav);padding:2rem;text-align:center;border-top:1px solid rgba(61,40,85,0.3)}
footer .f-iv{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:2px;color:var(--deep-red);margin-bottom:0.25rem}
footer p{color:var(--ash);font-size:11px;letter-spacing:1px;margin-bottom:0.3rem}
.f-motto{color:var(--warm-stone);font-style:italic;font-size:11px;margin-top:0.6rem;letter-spacing:2px}
footer a{color:var(--ash);text-decoration:none}
footer a:hover{color:var(--bronze)}

/* ═══ DISPLACEMENT CALCULATOR (carried forward from v4 — dark mode editorial contrast) ═══ */
.wdc-transition{height:80px;background:linear-gradient(180deg,var(--deep-surface) 0%,var(--dark-marble) 100%)}
.wdc-section{background:var(--dark-marble);padding:3rem 2rem 4rem;color:var(--marble)}
.wdc-inner{max-width:720px;margin:0 auto}
.wdc-header{text-align:center;margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid rgba(61,40,85,0.3)}
.wdc-header .wdc-iv{font-family:var(--serif);font-size:36px;font-weight:700;letter-spacing:4px;color:var(--deep-red);opacity:0.95}
.wdc-header .wdc-brand{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:6px;color:var(--deep-red);margin:4px 0 12px}
.wdc-header h2{font-size:20px;font-weight:500;color:var(--marble);margin-bottom:4px}
.wdc-header .wdc-tagline{font-size:11px;color:var(--warm-stone);font-style:italic;letter-spacing:2px}
.wdc-essay{max-width:600px;margin:0 auto 2.5rem;line-height:1.8;font-size:13px;color:var(--marble)}
.wdc-essay p{margin-bottom:16px}
.wdc-essay .wdc-highlight{color:var(--bronze);font-weight:500;font-size:14px}
.wdc-tool-header{display:flex;align-items:baseline;gap:0;margin-bottom:4px}
.wdc-tool-header .wdc-logo{font-family:var(--serif);font-size:28px;font-weight:700;letter-spacing:2px;color:var(--deep-red);display:inline}
.wdc-tool-header .wdc-title{font-size:16px;font-weight:500;color:var(--marble);margin-left:12px}
.wdc-sub{font-size:11px;color:var(--ash);margin-bottom:20px}
.wdc-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.wdc-card{background:var(--deep-surface);border-radius:8px;padding:10px 14px}
.wdc-card-label{font-size:11px;color:var(--ash);margin-bottom:3px}
.wdc-card-val{font-size:20px;font-weight:500;color:var(--marble)}
.wdc-card-sub{font-size:10px;color:var(--ash);margin-top:2px}
.wdc-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:0.5px solid var(--tyrian)}
.wdc-tab{padding:6px 12px;font-size:12px;border:none;cursor:pointer;background:transparent;color:var(--ash);font-weight:400;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit}
.wdc-tab.active{color:var(--bronze);font-weight:500;border-bottom-color:var(--bronze)}
.wdc-tab:hover{color:var(--marble)}
.wdc-tab-content{display:none}
.wdc-tab-content.active{display:block}
.wdc-section-head{font-size:12px;font-weight:500;color:var(--bronze);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;padding-bottom:5px;border-bottom:0.5px solid var(--tyrian);margin-top:20px}
.wdc-section-head:first-child{margin-top:0}
.wdc-slider-row{margin-bottom:14px}
.wdc-slider-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px}
.wdc-slider-label{font-size:13px;color:var(--marble)}
.wdc-slider-sub{font-size:11px;color:var(--ash);margin-left:6px}
.wdc-slider-val{font-size:13px;font-weight:500;color:var(--bronze);min-width:70px;text-align:right}
.wdc-slider-row input[type=range]{width:100%;accent-color:var(--bronze);height:4px}
.wdc-slider-range{display:flex;justify-content:space-between;font-size:10px;color:var(--ash);margin-top:1px}
.wdc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.wdc-toggle-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.wdc-toggle-label{font-size:12px;color:var(--ash)}
.wdc-toggle{width:36px;height:20px;border-radius:10px;cursor:pointer;position:relative;transition:background 0.2s}
.wdc-toggle .wdc-thumb{width:16px;height:16px;border-radius:8px;background:var(--marble);position:absolute;top:2px;transition:left 0.2s}
.wdc-legend{display:flex;gap:16px;margin-top:8px;flex-wrap:wrap;font-size:11px}
.wdc-legend-item{display:flex;align-items:center;gap:5px;color:var(--ash)}
.wdc-legend-line{width:20px;height:2.5px;border-radius:1px}
.wdc-legend-fill{width:14px;height:10px;border-radius:2px}
.wdc-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:16px}
.wdc-table th{text-align:left;padding:5px 8px;color:var(--ash);font-weight:500;border-bottom:0.5px solid var(--tyrian)}
.wdc-table th.right{text-align:right}
.wdc-table td{padding:4px 8px;color:var(--marble);border-bottom:0.5px solid var(--tyrian)}
.wdc-table td.right{text-align:right}
.wdc-job-card{background:var(--deep-surface);padding:12px 14px;margin-bottom:8px;border-left:3px solid var(--bronze)}
.wdc-job-card.emerging{border-left-color:var(--healthy)}
.wdc-job-top{display:flex;justify-content:space-between;align-items:baseline}
.wdc-job-name{font-size:13px;font-weight:500;color:var(--marble)}
.wdc-job-horizon{font-size:11px;color:var(--bronze);font-weight:500}
.wdc-job-demand{font-size:10px;color:var(--healthy);font-weight:500;background:rgba(90,180,120,0.12);padding:2px 8px;border-radius:4px}
.wdc-job-desc{font-size:11px;color:var(--ash);margin-top:4px;line-height:1.5}
.wdc-caveat{background:var(--tyrian);border-radius:8px;padding:12px 14px;margin-top:16px}
.wdc-caveat-title{font-size:11px;color:var(--bronze);font-weight:500;margin-bottom:4px}
.wdc-caveat-text{font-size:11px;color:var(--warm-stone);line-height:1.6}
.wdc-about-box{background:var(--deep-surface);border-radius:8px;padding:12px 14px;margin-top:12px}
.wdc-about-title{font-size:11px;color:var(--bronze);font-weight:500;margin-bottom:6px}
.wdc-about-text{font-size:11px;color:var(--ash);line-height:1.6}
.wdc-intro-text{font-size:12px;color:var(--ash);margin-bottom:16px;line-height:1.6}
.wdc-return-band{height:80px;background:linear-gradient(180deg,var(--dark-marble) 0%,var(--deep-surface) 100%)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){.domain-grid,.phase-grid{grid-template-columns:1fr}}
@media(max-width:768px){nav{padding:0 1rem}.nav-tagline{display:none}.nav-links a{padding:17px 0.5rem;font-size:10px;letter-spacing:0}.prog-card{grid-template-columns:80px 1fr}.l-container{padding:2rem 1.25rem}}
@media(max-width:640px){.wdc-cards{grid-template-columns:1fr 1fr}.wdc-grid2{grid-template-columns:1fr}}
@media(max-width:580px){.nav-links a{padding:17px 0.35rem;font-size:9px}}


/* ═══ Products mega-menu (replicated from iv-shared.css for cross-site nav consistency) ═══ */
.nav-links{position:relative}
.products-trigger{display:flex;align-items:center;gap:0.4rem;color:var(--ash);text-decoration:none;font-size:12px;letter-spacing:0.5px;transition:color 0.3s,border-color 0.3s;font-weight:400;padding:17px 1rem;border-bottom:2px solid transparent;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--sans)}
.products-trigger:hover,.products-trigger.pm-open{color:var(--marble)}
.products-trigger.pm-open{border-bottom-color:var(--bronze);color:var(--bronze)}
.products-trigger.active{color:var(--bronze);border-bottom-color:var(--bronze)}
.pm-caret{display:inline-block;font-size:9px;transition:transform 0.25s;line-height:1;margin-top:1px}
.products-trigger.pm-open .pm-caret{transform:rotate(180deg)}

.pm-panel{position:fixed;top:54px;left:0;right:0;background:var(--deep-surface);border-bottom:1px solid var(--tyrian);border-top:1px solid rgba(196,149,106,0.2);box-shadow:0 8px 24px rgba(0,0,0,0.4);z-index:99;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity 0.25s ease,transform 0.25s ease}
.pm-panel.pm-open{opacity:1;pointer-events:auto;transform:translateY(0)}
.pm-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--bronze),transparent)}
.pm-inner{max-width:1100px;margin:0 auto;padding:2.5rem 2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.pm-header{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;padding-bottom:1.25rem;border-bottom:1px solid rgba(61,40,85,0.5);margin-bottom:0.5rem}
.pm-header-label{font-size:10px;text-transform:uppercase;letter-spacing:3px;color:var(--bronze);font-weight:500}
.pm-header-tag{font-size:11px;color:var(--ash);font-style:italic}

.pm-card{display:block;text-decoration:none;padding:1.5rem 1.5rem 1.75rem;border:1px solid var(--tyrian);border-radius:4px;background:rgba(20,14,30,0.4);transition:border-color 0.3s,transform 0.2s,background 0.3s;position:relative;overflow:hidden}
.pm-card:hover{border-color:var(--bronze);transform:translateY(-2px);background:rgba(20,14,30,0.7)}
.pm-card-numeral{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--bronze);letter-spacing:2px;line-height:1;margin-bottom:0.5rem;display:block}
.pm-card-name{font-family:var(--serif);font-size:18px;color:var(--marble);font-weight:700;letter-spacing:0.5px;margin-bottom:0.4rem}
.pm-card-tag{font-size:11px;color:var(--bronze);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:0.75rem;font-weight:500}
.pm-card-desc{font-size:13px;color:var(--ash);line-height:1.6;margin-bottom:1.25rem;min-height:54px}
.pm-card-status{display:inline-flex;align-items:center;gap:0.5rem;font-size:10px;text-transform:uppercase;letter-spacing:2px;font-weight:500;padding:4px 10px;border-radius:2px}
.pm-status-live{color:var(--healthy);background:rgba(90,180,120,0.1);border:1px solid rgba(90,180,120,0.25)}
.pm-status-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--healthy);animation:pmpulse 2s infinite}
@keyframes pmpulse{0%,100%{opacity:1}50%{opacity:0.5}}
.pm-status-soon{color:var(--warm-stone);background:rgba(154,123,90,0.1);border:1px solid rgba(154,123,90,0.25)}


/* ═══ MOBILE BURGER + DRAWER (≤899px) ═══ */
.nav-mobile-only { display: none; }
.nav-burger { display: none; background: transparent; border: none; cursor: pointer; padding: 11px 10px; margin-left: auto; width: 44px; height: 44px; flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; }
.nav-burger span { display: block; width: 100%; height: 2px; background: var(--bronze); border-radius: 2px; transition: transform 0.3s ease, opacity 0.2s ease; transform-origin: center; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 899px) {
  .nav-burger { display: flex; }
  /* ═══ Burger-Menue: flache Liste mit Gruppen-Labels ═══
     Struktur auf Wunsch Ben (14.08.2026), Vorbild sincera-tech.com: durchgehende
     Liste, Gruppen durch kleine graue Labels getrennt, duenne Trennlinien,
     Grossbuchstaben mit weiter Laufweite.
     Das ERSETZT das Akkordeon vom 06.08.2026 (Untermenues zu, ein Tap oeffnet
     eines). Bewusste Umkehr einer frueheren Entscheidung von Ben: das Akkordeon
     hielt die Schublade kurz, versteckte aber die Struktur hinter Taps. Die
     Schublade ist jetzt wieder lang und wird gescrollt, genau wie beim Vorbild.
     Neu darin: die sieben Prinzipien, die auf Mobil komplett fehlten, weil die
     Storybar unter 900px ausgeblendet ist. */
  .nav-links { position: fixed; top: 54px; left: 0; right: 0; bottom: 0; background: var(--deep-nav); border-top: 1px solid var(--tyrian); flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 5rem; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform 0.3s ease; z-index: 999; }
  body.nav-mobile-open .nav-links { transform: translateX(0); }
  body.nav-mobile-open { overflow: hidden; }

  /* Eintraege der obersten Ebene */
  .nav-links > a, .nav-links > button.products-trigger {
    width: 100%; padding: 14px 1.5rem; font-size: 12px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--marble); text-align: left;
    justify-content: flex-start; border-bottom: 1px solid rgba(196, 149, 106, 0.12);
  }
  .nav-links > button.products-trigger { border-top: none; }

  /* Gruppen-Label. Zwei Elementarten, ein Aussehen:
     - .has-mega > a ist der Elternlink der Desktop-Dropdowns (Module, Soziale
       Verantwortung, Forschung). Auf Mobil ist er das Label der Gruppe und
       bewusst NICHT klickbar (pointer-events:none), weil das Ziel als
       "Uebersicht" der erste Eintrag der Gruppe darunter ist. Ein klickbares
       Label neben einem gleichnamigen Eintrag waere doppelt.
     - .nav-group ist das Label des reinen Mobil-Blocks mit den Prinzipien. */
  .nav-links .has-mega > a, .nav-links .nav-group {
    display: block; width: 100%; padding: 26px 1.5rem 10px; font-size: 10px;
    letter-spacing: 3px; text-transform: uppercase; color: var(--warm-stone);
    opacity: 0.6; border-bottom: none; pointer-events: none; font-weight: 400;
  }
  /* Der Pfeil verspricht ein Aufklappen, das es hier nicht gibt. Genau dieser
     Fehler stand vor dem Akkordeon schon einmal in der Schublade. */
  .mega-caret { display: none; }

  .nav-links .has-mega { display: flex; flex-direction: column; align-items: stretch; position: static; width: 100%; }
  .nav-links .has-mega .mega { position: static; display: block; transform: none; background: transparent; border: none; box-shadow: none; min-width: 0; padding: 0; }
  .nav-links .has-mega .mega a,
  .nav-mobile-only > a {
    display: flex; align-items: center; width: 100%; padding: 14px 1.5rem;
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--marble); border-bottom: 1px solid rgba(196, 149, 106, 0.12);
  }
  /* Aktive Seite: Marker links statt bronzener Unterkante. Die Basisregel
     .nav-links a.active setzt border-bottom-color auf Bronze; im Spalten-Modus
     wird daraus eine durchgehende Linie ueber die ganze Breite, die wie ein
     Trenner aussieht und nicht wie eine Markierung. */
  .nav-links .has-mega .mega a.active, .nav-mobile-only > a.active {
    color: var(--bronze); border-bottom-color: rgba(196, 149, 106, 0.12);
    box-shadow: inset 3px 0 0 var(--bronze); background: rgba(196, 149, 106, 0.04);
  }
  .nav-links .mega-numeral, .nav-mobile-only .mega-numeral { width: 34px; flex-shrink: 0; color: var(--bronze); font-size: 12px; }

  /* Der Prinzipien-Block existiert nur in der Schublade. Auf dem Desktop
     tragen die sieben Prinzipien die Storybar, dort waere er ein neunter
     Nav-Eintrag und wuerde die Leiste sprengen. */
  .nav-mobile-only { display: flex; flex-direction: column; width: 100%; }

  /* ═══ Reihenfolge in der Schublade ═══
     Die DOM-Reihenfolge ist fuer die Desktop-Leiste gewaehlt (Research MUSS das
     letzte .has-mega bleiben, daran haengt die Rechtsausrichtung seines
     Dropdowns). Auf Mobil zaehlt eine andere Ordnung: erst die einzelnen
     Eintraege, dann die Gruppen, wie beim Vorbild. Deshalb hier flex-order
     statt einer Umsortierung im HTML.
     ACHTUNG bei neuen Nav-Eintraegen: ohne eigenen order-Wert ist der
     Standard 0 und der Eintrag springt in der Schublade nach ganz oben. */
  .nav-links > button.products-trigger { order: 1; }
  .nav-links > a[data-rt-trigger] { order: 2; }
  .nav-links > a[data-zone="founders"] { order: 3; }
  .nav-links > a[data-zone="articles"] { order: 4; }
  .nav-mobile-only { order: 5; }
  .nav-links > .has-mega:nth-of-type(1) { order: 6; }   /* Module */
  .nav-links > .has-mega:nth-of-type(2) { order: 7; }   /* Soziale Verantwortung */
  .nav-links > .has-mega:nth-of-type(3) { order: 8; }   /* Forschung */
  .nav-links > a.nav-lang { order: 9; }

  .nav-links a.nav-lang { padding: 22px 1.5rem; font-size: 12px; letter-spacing: 3px; color: var(--bronze); border-bottom: none; }
  .pm-panel { top: 54px !important; }
}

/* ═══ MOBILE FALLBACK (desktop-only tools) ═══ */
.mobile-fallback { display: none; }
@media (max-width: 899px) {
  .desktop-only-tool { display: none !important; }
  .mobile-fallback { display: block; }
}
.mobile-fallback { text-align: center; padding: 4rem 1.5rem 5rem; color: var(--marble); max-width: 560px; margin: 0 auto; }
.mf-icon { font-size: 46px; color: var(--bronze); margin-bottom: 1.6rem; line-height: 1; font-family: var(--serif); }
.mf-title { font-family: var(--serif); font-size: 30px; color: var(--bronze); font-weight: 500; margin: 0 0 1.2rem; letter-spacing: 0.3px; }
.mf-desc { font-size: 14px; color: var(--ash); line-height: 1.85; margin: 0 auto 2.2rem; }
.mf-cta { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: var(--bronze); border: 1px solid rgba(196, 149, 106, 0.5); padding: 14px 26px; border-radius: 3px; font-weight: 500; }

/* ── Live body text color: warm cream, no lilac (em stays lilac) ── */
p,li,.zone-subtitle,.pdr-intro,.hmac-desc,.cvr-desc,.lifecycle-desc,.deploy-desc,.gov-gap-header p,.gov-gap-cta,.who-content p,.armory-cta-inner p,.cip-feat p,.cip-cta p,.vigil-feat p,.vigil-cta p,.research-cta-inner p,.impact-cta-inner p,.iv-legal p,.iv-legal li,.principal-bio,.principal-affil,.article-excerpt,.feat-excerpt,.trust-claim p,.inv-path-body,.inv-paths-close,.l-container p,.l-callout .body,.problem-card p,.psych-card .desc{color:rgb(232,228,222)}
em,i,article.inv p em{color:rgb(174,162,188)}

.f-links{display:flex;gap:2rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}
.f-links a{color:rgb(174,162,188);font-size:11px;letter-spacing:1px;text-decoration:none;transition:color 0.3s;text-transform:uppercase;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-weight:400}
.f-links a:hover{color:rgb(196,149,106)}
.f-legal{display:flex;gap:1.25rem;justify-content:center;margin-top:1.1rem;padding-top:0.9rem;flex-wrap:wrap;border-top:1px solid rgba(196,149,106,0.15)}
.f-legal a{position:relative;color:rgba(232,228,222,0.6);font-size:10px;letter-spacing:0.5px;text-decoration:none;transition:color 0.3s ease;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-weight:400}
.f-legal a:not(:last-child)::after{content:'·';position:absolute;right:-0.7rem;color:rgba(232,228,222,0.3)}
.f-legal a:hover{color:rgb(196,149,106)}
@media(prefers-reduced-motion:reduce){.f-legal a{transition:none}}


/* ═══ STORY BAR — the eight-principle sequence (I–VIII) ═══ */
.iv-storybar{position:sticky;top:54px;z-index:80;background:var(--deep-nav);border-bottom:1px solid rgba(61,40,85,0.4)}
.iv-storybar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(196,149,106,0.5),transparent)}
.iv-storybar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:0.4rem;padding:0 2rem}
.iv-storybar-inner::-webkit-scrollbar{display:none}
.iv-storybar-lead{flex-shrink:0;font-size:9px;text-transform:uppercase;letter-spacing:3px;color:var(--warm-stone);opacity:0.7;padding-right:1.5rem;margin-right:0.5rem;border-right:1px solid rgba(61,40,85,0.5)}
.iv-story-step{flex-shrink:0;display:flex;align-items:baseline;gap:0.5rem;text-decoration:none;padding:14px 1rem;border-bottom:2px solid transparent;transition:color 0.3s,border-color 0.3s}
.iv-story-num{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--bronze);letter-spacing:1px;line-height:1}
.iv-story-name{font-size:11px;letter-spacing:0.5px;color:var(--ash);white-space:nowrap}
.iv-story-step:hover .iv-story-name{color:var(--marble)}
.iv-story-step.active{border-bottom-color:var(--bronze)}
.iv-story-step.active .iv-story-name{color:var(--bronze)}
@media(max-width:1200px){
  .iv-storybar-inner{padding:0 1.25rem}
  .iv-story-step{padding:12px 0.55rem;gap:0.4rem}
  .iv-story-name{font-size:10px;letter-spacing:0.3px}
  .iv-storybar-lead{padding-right:1rem;margin-right:0.25rem;letter-spacing:2px}
}
@media(max-width:1040px){
  .iv-storybar-lead{display:none}
  .iv-story-step{padding:12px 0.4rem}
  .iv-story-num{font-size:13px}
}
@media(max-width:899px){.iv-storybar{display:none}}
/* Unter 900px ist die Storybar ausgeblendet (Regel direkt darueber), es
   verdeckt also nur noch die Nav. Ohne diese Zeile waere der Sprung-Offset
   auf Mobil um die volle Storybar-Hoehe zu gross. */
@media(max-width:899px){:root{--iv-storybar-h:0px}}

.iv-principle-hero--full{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:0;padding-bottom:0}


/* Die Fly-in- und Fade-in-Regeln sind am 14.08.2026 entfallen (Ansage Ben:
   keine Einblend-Effekte mehr). Diese Zeile bleibt, sie ist keine Animation,
   sondern verhindert horizontales Scrollen. */
html{overflow-x:clip}


/* ═══ Footer animation guard — footer never animates/fades (global) ═══ */
footer, footer * {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}


/* Hier standen die Standby-Regeln fuer .fly, die Neutralisierung von .fade-in
   und der Karten-Reveal .iv-reveal. Alles entfernt am 14.08.2026.
   Achtung fuer spaeter: .iv-reveal startete auf opacity:0 und wurde erst per
   JavaScript sichtbar geschaltet. Wer so etwas wieder einbaut, muss CSS und
   Skript zusammen liefern, sonst bleiben die Karten dauerhaft unsichtbar. */

/* Active-role label in nav "Personalize" trigger — brand bronze */
.nav-links [data-rt-trigger].rt-has-role{color:#C4956A !important}

/* Personalized Tour: HIDE – zum Reaktivieren entfernen */
.nav-links [data-rt-trigger],
footer [data-rt-trigger],
.rt-banner { display: none !important; }