/* ATMOSPHERES — shared design system for the QI site rebuild.
   Distilled from the chosen registers: landing-4 (morning), landing-8
   (ridgeline), landing-10 (signal field), landing-18 (private office).
   One atmosphere per page · headline = argument · ledgers, not cards ·
   one metallic accent · one ask per page. */

:root {
  --night: #0A141C; --deep: #0B161E; --navy: #0F2D3A; --teal: #1C637E;
  --paper: #F8F7F3; --panel: #FFFFFF;
  --ink: #14232C; --mut: #5A686F; --faint: #8B979C;
  --ivory: #EAE5D9; --ivory-mut: #9AA5A8; --ivory-dim: #6E7A7E;
  --gold: #C9A35C; --champagne: #E8D9B5; --bronze: #8A6D3B; --signal: #7FB4CC;
  --hair-l: #E0DDD3; --hair-d: rgba(234,229,217,0.13); --hair-gold: rgba(201,163,92,0.28);
  --serif: "Source Serif 4", Georgia, serif;
  --sans: Inter, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); line-height: 1.65; -webkit-font-smoothing: antialiased;
  background: var(--paper); color: var(--ink); }
body.night { background: var(--deep); color: var(--ivory); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--gold); color: var(--night); padding: 10px 18px; z-index: 99; font-weight: 600; }
.skip:focus { left: 12px; top: 12px; }

/* the stationery frame (dusk/night relationship pages) */
body.framed::after { content: ""; position: fixed; inset: 14px; border: 1px solid var(--hair-gold); pointer-events: none; z-index: 50; }
@media (max-width: 720px) { body.framed::after { display: none; } }

/* ---------- type ---------- */
.kicker { font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.k-gold { color: var(--bronze); }
body.night .k-gold, .on-dark .k-gold { color: var(--champagne); }
.k-rule { display: inline-flex; align-items: center; gap: 13px; }
.k-rule::after { content: ""; width: 46px; height: 1px; background: var(--gold); }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }

/* ---------- header ---------- */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 40; transition: background-color .25s ease, box-shadow .25s ease; }
.hd.scrolled { background: rgba(248,247,243,0.96); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--hair-l), 0 10px 30px rgba(20,35,44,0.06); }
.hd.scrolled .bar { padding: 12px 0; }
.hd.on-dark.scrolled { background: rgba(11,22,30,0.94); box-shadow: 0 1px 0 var(--hair-d), 0 10px 30px rgba(4,10,15,0.4); }
.hd .bar { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; transition: padding .25s ease; }
.hd .logo img { height: 100px; margin: -12px 0; } /* wie auf qi-investment.com */
.hd nav { display: flex; gap: 28px; align-items: baseline; }
.hd nav a { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); opacity: 0.85; }
.hd nav a:hover { opacity: 1; color: var(--bronze); }
.hd.on-dark nav a { color: rgba(234,229,217,0.85); }
.hd.on-dark nav a:hover { color: var(--champagne); }
/* aktueller Menüpunkt: leuchtend hervorgehoben (per atmos.js gesetzt) */
.hd nav a.active, .hd .dd > a.active { opacity: 1; color: #B8860B; font-weight: 700; }
.hd.on-dark nav a.active, .hd.on-dark .dd > a.active { color: #FFD98E; }
.hd .dd-menu a.active { color: #B8860B; }
.hd.on-dark .dd-menu a.active { color: #FFD98E; }
.mnav a.active { color: #B8860B; }
.hd.on-dark .mnav a.active { color: #FFD98E; }
.hd.on-dark .logo img { filter: brightness(0) invert(0.92); }
@media (max-width: 780px) { .hd nav a:not(.keep) { display: none; } }

/* ---------- atmosphere hero ---------- */
.hero { position: relative; min-height: 78svh; display: flex; flex-direction: column; justify-content: flex-end; }
.hero.tall { min-height: 92svh; }
.hero .ph { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero > .wrap, .hero > .hero-foot { position: relative; z-index: 1; }
/* light morning: image dissolves down into paper */
.hero.morning .grade { position: absolute; inset: 0; background:
  radial-gradient(90% 80% at 30% 78%, rgba(248,247,243,0.72) 0%, rgba(248,247,243,0.28) 55%, transparent 100%),
  linear-gradient(to bottom, rgba(248,247,243,0.32) 0%, rgba(248,247,243,0.10) 32%, rgba(248,247,243,0.72) 68%, var(--paper) 96%); }
/* dark: image sinks into the night ground */
.hero.dark .grade { position: absolute; inset: 0; background:
  linear-gradient(to bottom, rgba(11,22,30,0.60) 0%, rgba(11,22,30,0.16) 34%, rgba(11,22,30,0.55) 66%, var(--deep) 97%); }
.hero-body { padding: 130px 0 64px; }
.hero-inner { max-width: 720px; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.2rem); line-height: 1.1; letter-spacing: -0.01em; margin: 22px 0 20px; }
.hero h1 em { font-style: italic; }
.hero.morning h1 { color: var(--ink); }
.hero.morning h1 em { color: var(--teal); }
.hero.dark h1 { color: #fff; }
.hero.dark h1 em { color: var(--champagne); }
.hero .lede { font-size: 1.04rem; max-width: 56ch; margin: 0; }
.hero.morning .lede { color: var(--mut); }
.hero.dark .lede { color: rgba(234,229,217,0.82); }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

.hero-foot { border-top: 1px solid var(--hair-d); }
.hero.morning + .hero-foot, .hero.morning .hero-foot { border-top-color: var(--hair-l); }
.hero-foot .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 16px 28px; }
.hero-foot span { font-family: var(--sans); font-size: 0.67rem; letter-spacing: 0.18em; text-transform: uppercase; }
.hero.dark .hero-foot span { color: var(--ivory-mut); }
.hero.dark .hero-foot b { color: var(--champagne); font-weight: 600; }
.hero.morning .hero-foot span { color: var(--faint); }
.hero.morning .hero-foot b { color: var(--ink); font-weight: 600; }

/* ---------- buttons ---------- */
.btn { display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 34px; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--teal); }
.btn-gold { border: 1px solid var(--gold); color: var(--bronze); }
body.night .btn-gold, .on-dark .btn-gold { color: var(--champagne); }
.btn-gold:hover { background: var(--gold); color: var(--night); }
.btn-quiet { font-size: 0.72rem; letter-spacing: 0.18em; align-self: center; padding: 16px 8px; color: var(--mut); }
body.night .btn-quiet { color: var(--ivory-mut); }
.btn-quiet:hover { color: var(--bronze); }
body.night .btn-quiet:hover { color: var(--champagne); }

/* ---------- section scaffolding: numbered margins ---------- */
.ch { padding: 88px 0 0; }
.ch:last-of-type { padding-bottom: 40px; }
.ch .grid { display: grid; grid-template-columns: 150px 1fr; gap: 50px; }
.ch .no { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--gold); line-height: 1.2; }
.ch .no small { display: block; font-style: normal; font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; margin-top: 10px; color: var(--faint); }
body.night .ch .no small { color: var(--ivory-dim); }
@media (max-width: 780px) { .ch .grid { grid-template-columns: 1fr; gap: 20px; } }

.prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.55rem, 1.25rem + 1.5vw, 2.25rem); line-height: 1.3; margin: 0 0 24px; }
.prose h2 em { font-style: italic; color: var(--teal); }
body.night .prose h2 em { color: var(--champagne); }
.prose p { font-family: var(--serif); font-size: 1.05rem; max-width: 64ch; margin: 0 0 18px; }
body.night .prose p { color: rgba(234,229,217,0.88); }
.prose p.sans { font-family: var(--sans); font-size: 0.92rem; color: var(--mut); }
body.night .prose p.sans { color: var(--ivory-mut); }
.prose .fine { font-family: var(--sans); font-size: 0.8rem; color: var(--mut); }
body.night .prose .fine { color: var(--ivory-mut); }

/* ---------- ledger rows ---------- */
.ledger .row { display: grid; grid-template-columns: 220px 1fr auto; gap: 30px; align-items: baseline; padding: 28px 0; border-top: 1px solid var(--hair-l); }
body.night .ledger .row { border-top-color: var(--hair-d); }
.ledger .row:first-child { border-top: 1px solid var(--ink); }
body.night .ledger .row:first-child { border-top-color: var(--hair-gold); }
.ledger .row:last-child { border-bottom: 1px solid var(--ink); }
body.night .ledger .row:last-child { border-bottom-color: var(--hair-gold); }
.ledger h3 { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; margin: 0; }
.ledger h3 i { font-style: italic; color: var(--gold); font-weight: 400; font-size: 0.95rem; margin-right: 13px; }
.ledger p { font-family: var(--sans); font-size: 0.9rem; color: var(--mut); margin: 0; max-width: 62ch; line-height: 1.65; }
body.night .ledger p { color: var(--ivory-mut); }
.ledger p b { color: var(--ink); font-weight: 600; }
body.night .ledger p b { color: rgba(234,229,217,0.92); }
.ledger .go { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); white-space: nowrap; }
body.night .ledger .go { color: var(--champagne); }
a.row:hover h3 { color: var(--bronze); }
body.night a.row:hover h3 { color: var(--champagne); }
@media (max-width: 780px) { .ledger .row { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- register table ---------- */
.register table { width: 100%; border-collapse: collapse; }
.register th, .register td { text-align: left; vertical-align: top; padding: 16px 0; border-top: 1px solid var(--hair-l); }
body.night .register th, body.night .register td { border-top-color: var(--hair-d); }
.register tr:first-child th, .register tr:first-child td { border-top: 2px solid var(--ink); }
body.night .register tr:first-child th, body.night .register tr:first-child td { border-top-color: var(--hair-gold); }
.register tr:last-child th, .register tr:last-child td { border-bottom: 2px solid var(--ink); }
body.night .register tr:last-child th, body.night .register tr:last-child td { border-bottom-color: var(--hair-gold); }
.register th { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); width: 230px; padding-right: 30px; }
body.night .register th { color: var(--ivory-dim); }
.register td { font-family: var(--serif); font-size: 0.99rem; }
.register td b { font-weight: 600; }
.register td .sub { display: block; font-family: var(--sans); font-size: 0.78rem; color: var(--mut); }
body.night .register td .sub { color: var(--ivory-mut); }
@media (max-width: 640px) { .register th { width: 130px; } }

/* ---------- share-class / comparison columns ---------- */
.classes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.class { border: 1px solid var(--hair-l); border-top: 3px solid var(--navy); background: var(--panel); padding: 26px 28px; }
body.night .class { background: rgba(255,255,255,0.03); border-color: var(--hair-d); border-top-color: var(--gold); }
.class .name { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; margin: 2px 0 2px; }
.class .for { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); }
body.night .class .for { color: var(--champagne); }
.class dl { margin: 16px 0 0; }
.class .kv { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--hair-l); }
body.night .class .kv { border-top-color: var(--hair-d); }
.class dt { font-family: var(--sans); font-size: 0.76rem; color: var(--mut); margin: 0; }
body.night .class dt { color: var(--ivory-mut); }
.class dd { font-family: var(--mono); font-size: 0.8rem; margin: 0; text-align: right; }
@media (max-width: 720px) { .classes { grid-template-columns: 1fr; } }

/* ---------- facts panel ---------- */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hair-l); }
body.night .facts { border-color: var(--hair-d); }
.facts .f { padding: 24px 26px; border-left: 1px solid var(--hair-l); }
body.night .facts .f { border-left-color: var(--hair-d); }
.facts .f:first-child { border-left: none; }
.facts .f .k { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); }
body.night .facts .f .k { color: var(--champagne); }
.facts .f b { display: block; font-family: var(--serif); font-size: 1.08rem; font-weight: 600; margin-top: 6px; }
.facts .f span { font-family: var(--sans); font-size: 0.8rem; color: var(--mut); }
body.night .facts .f span { color: var(--ivory-mut); }
@media (max-width: 720px) { .facts { grid-template-columns: 1fr; } .facts .f { border-left: none; border-top: 1px solid var(--hair-l); } body.night .facts .f { border-top-color: var(--hair-d); } .facts .f:first-child { border-top: none; } }

/* ---------- plates (framed images) ---------- */
.plates { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.plate { border: 1px solid var(--hair-gold); padding: 12px; }
.plate .im { overflow: hidden; }
.plate img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: grayscale(0.3) sepia(0.12) brightness(0.86); transition: filter .5s ease; }
.plate:hover img { filter: none; }
body:not(.night) .plate img { filter: none; }
.plate .cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 6px 3px; }
.plate .cap b { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; }
.plate .cap span { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); }
body.night .plate .cap span { color: var(--gold); }
.plate p { font-family: var(--sans); font-size: 0.84rem; color: var(--mut); margin: 2px 6px 8px; line-height: 1.6; }
body.night .plate p { color: var(--ivory-mut); }
@media (max-width: 720px) { .plates { grid-template-columns: 1fr; } }

/* ---------- people ---------- */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.person { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center; border: 1px solid var(--hair-l); padding: 20px; background: var(--panel); }
body.night .person { background: rgba(255,255,255,0.03); border-color: var(--hair-d); }
.person img { width: 120px; height: 142px; object-fit: cover; border: 1px solid var(--hair-gold); filter: grayscale(1) sepia(0.14) brightness(0.96); }
.person b { display: block; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; }
.person .role { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); }
body.night .person .role { color: var(--gold); }
.person p { font-family: var(--sans); font-size: 0.8rem; color: var(--mut); margin: 7px 0 0; line-height: 1.6; }
body.night .person p { color: var(--ivory-mut); }
@media (max-width: 860px) { .people { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .person { grid-template-columns: 1fr; } .person img { width: 100%; height: auto; aspect-ratio: 1; } }

/* ---------- audience doors ---------- */
.doors { border-top: 1px solid var(--ink); }
body.night .doors { border-top-color: var(--hair-gold); }
.doors a { display: grid; grid-template-columns: 46px 240px 1fr auto; gap: 26px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--hair-l); }
body.night .doors a { border-bottom-color: var(--hair-d); }
.doors a:last-child { border-bottom: 1px solid var(--ink); }
body.night .doors a:last-child { border-bottom-color: var(--hair-gold); }
.doors .rn { font-family: var(--serif); font-style: italic; color: var(--gold); }
.doors h3 { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin: 0; }
.doors p { font-family: var(--sans); font-size: 0.86rem; color: var(--mut); margin: 0; max-width: 58ch; }
body.night .doors p { color: var(--ivory-mut); }
.doors .go { font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); white-space: nowrap; }
body.night .doors .go { color: var(--champagne); }
.doors a:hover h3 { color: var(--bronze); }
body.night .doors a:hover h3 { color: var(--champagne); }
@media (max-width: 780px) { .doors a { grid-template-columns: 30px 1fr; } .doors p, .doors .go { grid-column: 2; } }

/* ---------- status band (subscription window) ---------- */
.status { border: 1px solid var(--hair-gold); background: linear-gradient(100deg, rgba(201,163,92,0.10), rgba(201,163,92,0.03)); padding: 22px 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.status .t { font-family: var(--serif); font-size: 1.05rem; }
.status .t b { font-weight: 600; }
.status .t .sub { display: block; font-family: var(--sans); font-size: 0.76rem; color: var(--mut); margin-top: 2px; }
body.night .status .t .sub { color: var(--ivory-mut); }
.status .mono { color: var(--bronze); font-size: 0.82rem; }
body.night .status .mono { color: var(--champagne); }

/* ---------- notice / legal fine print ---------- */
.notice { border-top: 1px solid var(--hair-l); margin-top: 70px; }
body.night .notice { border-top-color: var(--hair-d); }
.notice .wrap { padding: 26px 28px 6px; }
.notice p { font-family: var(--sans); font-size: 0.94rem; line-height: 1.7; color: var(--mut); margin: 0 0 12px; }
body.night .notice p { color: var(--ivory-mut); }
.notice a { color: inherit; text-decoration: underline; }

/* Verweis auf die Chancen-&-Risiken-Seite (Compliance-Review 07/2026, repositioniert 08/2026):
   sitzt jetzt unter dem Abschlussstrich der jeweiligen Tabelle und übernimmt deren Tonfall. */
.risklink { font-family: var(--sans); font-size: 0.86rem; line-height: 1.6; margin: 18px 0 0; color: var(--mut); }
.risklink a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.risklink a:hover { color: var(--bronze); }
body.night .risklink { color: var(--ivory-mut); }
body.night .risklink a:hover { color: var(--champagne); }
/* Querverweis innerhalb einer Register-Tabelle (Fondsseite, Wesentliche Risiken) */
.register td a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.register td a:hover { color: var(--bronze); }
body.night .register td a:hover { color: var(--champagne); }

/* ---------- closing ---------- */
.closing { padding: 100px 0 90px; text-align: center; }
.closing::before { content: "· · ·"; display: block; color: var(--gold); letter-spacing: 0.6em; margin-bottom: 38px; font-size: 0.9rem; }
.closing h2 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(1.6rem, 1.25rem + 1.9vw, 2.6rem); line-height: 1.35; margin: 0 auto 32px; max-width: 26ch; }
.closing .fine { display: block; margin-top: 18px; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
body.night .closing .fine { color: var(--ivory-dim); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--hair-l); }
body.night footer { border-top-color: var(--hair-d); }
footer .wrap { padding: 24px 28px 40px; font-family: var(--sans); font-size: 0.7rem; color: var(--faint); }
body.night footer .wrap { color: var(--ivory-dim); }
/* Pflichthinweise (KVG-Review 08/2026): laufen über die volle Satzbreite und enden
   rechts bündig mit den Tabellen des Hauptteils. */
footer .f-legal { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--hair-l); }
body.night footer .f-legal { border-bottom-color: var(--hair-d); }
footer .f-legal p { margin: 0 0 10px; font-size: 0.72rem; line-height: 1.7; }
footer .f-legal p:last-child { margin-bottom: 0; }
footer .f-bar { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
footer a { color: inherit; }
footer a:hover { color: var(--ink); }
body.night footer a:hover { color: var(--ivory); }

/* ---------- charts ---------- */
.chart-card { background: var(--panel); border: 1px solid var(--hair-l); border-top: 3px solid var(--navy); padding: 28px 28px 20px; }
body.night .chart-card { background: rgba(255,255,255,0.03); border-color: var(--hair-d); border-top-color: var(--gold); }
.chart-card .t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.chart-card .t b { font-family: var(--serif); font-size: 0.98rem; font-weight: 600; }
.chart-card .t span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.chart-card svg { width: 100%; height: auto; display: block; }
.chart-card .axis { stroke: var(--hair-l); stroke-width: 1; }
body.night .chart-card .axis { stroke: var(--hair-d); }
.chart-card .lbl { font-family: var(--mono); font-size: 11px; fill: var(--faint); }
.chart-card .curve { stroke: var(--gold); stroke-width: 2.4; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart-card .dot { fill: var(--navy); }
body.night .chart-card .dot { fill: var(--champagne); }
.chart-card .callout { font-family: var(--sans); font-size: 12px; font-weight: 600; fill: var(--ink); }
body.night .chart-card .callout { fill: var(--ivory); }
.chart-card .src { font-family: var(--sans); font-size: 0.68rem; color: var(--faint); margin: 10px 0 0; }

/* ---------- paper documents (legal pages) ---------- */
.doc-mast { border-bottom: 3px double var(--ink); position: sticky; top: 0; background: var(--paper); z-index: 40; }
.doc-mast .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px 28px; }
.doc-mast .l, .doc-mast .r { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); }
.doc-mast .r { text-align: right; }
.doc-mast img { height: 50px; margin: 0 auto; }
@media (max-width: 720px) { .doc-mast .wrap { grid-template-columns: 1fr; gap: 8px; text-align: center; } .doc-mast .r { text-align: center; } }
.doc { max-width: 820px; margin: 0 auto; padding: 64px 28px 40px; }
.doc h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); margin: 0 0 8px; }
.doc .sub { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze); margin: 0 0 40px; display: block; }
.doc h2 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin: 44px 0 14px; padding-top: 22px; border-top: 1px solid var(--ink); }
.doc h3 { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; margin: 28px 0 10px; }
.doc p, .doc li { font-family: var(--serif); font-size: 1rem; line-height: 1.75; margin: 0 0 14px; color: var(--ink); }
.doc ul { padding-left: 22px; margin: 0 0 14px; }
.doc a { color: var(--bronze); }
.doc a:hover { text-decoration: underline; }
.doc strong { font-weight: 600; }


/* ---------- reveals ---------- */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .75s ease, transform .75s ease; }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- nav dropdown (Insights) ---------- */
.hd .dd { position: relative; display: inline-block; }
.hd .dd > a { cursor: pointer; }
.hd .dd-menu { position: absolute; top: 100%; left: -18px; padding-top: 12px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease, visibility .22s; z-index: 60; }
.hd .dd:hover .dd-menu, .hd .dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: none; }
.hd .dd-menu .box { background: #FFFFFF; border: 1px solid var(--hair-l); box-shadow: 0 14px 40px rgba(20,35,44,0.14); min-width: 250px; padding: 8px 0; }
.hd.on-dark .dd-menu .box { background: #10202B; border-color: var(--hair-d); box-shadow: 0 14px 40px rgba(4,10,15,0.5); }
.hd .dd-menu a { display: block; padding: 11px 20px; font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: none; color: var(--ink); opacity: 0.9; }
.hd.on-dark .dd-menu a { color: var(--ivory); }
.hd .dd-menu a:hover { color: var(--bronze); background: rgba(201,163,92,0.08); opacity: 1; }
.hd.on-dark .dd-menu a:hover { color: var(--champagne); }

/* ---------- mobile nav + refinements (desktop unchanged) ---------- */
.menu-btn { display: none; background: none; border: 0; padding: 10px 4px; cursor: pointer; flex-direction: column; gap: 5px; }
.menu-btn span { display: block; width: 24px; height: 2px; background: var(--ink); transition: transform .25s ease, opacity .25s ease; }
.hd.on-dark .menu-btn span { background: var(--ivory); }
.hd.open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd.open .menu-btn span:nth-child(2) { opacity: 0; }
.hd.open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mnav { display: none; position: fixed; top: 76px; left: 0; right: 0; bottom: 0; overflow-y: auto; padding: 10px 28px 60px; background: #F8F7F3; border-top: 1px solid var(--hair-l); }
.hd.on-dark .mnav { background: #0E1B26; border-top-color: var(--hair-d); }
.hd.open .mnav { display: block; }
.mnav a { display: block; padding: 15px 0; font-family: var(--sans); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--hair-l); }
.hd.on-dark .mnav a { color: var(--ivory); border-bottom-color: var(--hair-d); }
.mnav .grp { padding: 18px 0 4px; }
.mnav .grp .glabel { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); }
.hd.on-dark .mnav .grp .glabel { color: var(--champagne); }
.mnav .grp a { font-size: 0.8rem; font-weight: 500; text-transform: none; letter-spacing: 0.04em; padding: 12px 0 12px 14px; }
body.menu-open { overflow: hidden; }
.hd.open { background: rgba(248,247,243,0.99); box-shadow: 0 1px 0 var(--hair-l); }
.hd.on-dark.open { background: rgba(11,22,30,0.99); box-shadow: 0 1px 0 var(--hair-d); }

@media (max-width: 780px) {
  .menu-btn { display: flex; }
  .hd .bar { padding: 16px 0; }
  .hd .logo img { height: 64px; margin: -8px 0; }
  .hero-body { padding: 104px 0 40px; }
  .hero .lede { font-size: 0.95rem; }
  .hero .actions { margin-top: 24px; }
  .actions .btn:not(.btn-quiet) { width: 100%; text-align: center; }
  .hero-foot .wrap { padding: 12px 28px; gap: 8px 20px; }
  .hero-foot span { font-size: 0.6rem; letter-spacing: 0.14em; }
  .ch { padding: 56px 0 0; }
  .ch .no { font-size: 1.25rem; }
  .status { flex-direction: column; align-items: stretch; }
  .status .btn { text-align: center; }
  .closing { padding: 76px 0 64px; }
  .closing .btn { display: block; margin: 0 16px; }
  footer .f-bar { flex-direction: column; gap: 10px; }
  .partners .logos { gap: 26px; }
  .partners img { height: 22px; }
  .doc { padding: 44px 22px 32px; }
}

/* ---------- mobile audit r2 ---------- */
.ch .grid > * { min-width: 0; }
.register td { overflow-wrap: break-word; }
@media (max-width: 780px) {
  .hd .bar nav .dd { display: none; }
  .mnav { top: 78px; }
}
@media (max-width: 480px) {
  .person { grid-template-columns: 96px 1fr; }
  .person img { width: 96px; height: 118px; aspect-ratio: auto; }
}

/* ---------- mobile: stacked register tables ---------- */
@media (max-width: 640px) {
  .register table, .register tbody { display: block; width: 100%; }
  .register tr { display: block; padding: 14px 0; border-top: 1px solid var(--hair-l); }
  body.night .register tr { border-top-color: var(--hair-d); }
  .register tr:first-child { border-top: 2px solid var(--ink); }
  body.night .register tr:first-child { border-top-color: var(--hair-gold); }
  .register tr:last-child { border-bottom: 2px solid var(--ink); }
  body.night .register tr:last-child { border-bottom-color: var(--hair-gold); }
  .register th, .register td { display: block; width: auto; border: 0; padding: 0; }
  .register th { margin-bottom: 4px; }
  .register td { overflow-wrap: anywhere; }
}


/* ===== Fund-page legal gate (Vorschaltseite) ===== */
.gate { position:fixed; inset:0; z-index:11000; background:radial-gradient(120% 120% at 20% 0%, #10303F 0%, #0A1F2B 60%, #081820 100%); display:flex; align-items:center; justify-content:center; padding:24px; }
.gate-card { width:min(760px, 100%); max-height:min(88vh, 100%); background:#F8F7F3; border-top:3px solid #C9A35C; padding:34px 38px 26px; display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,0.45); }
.gate-card .gk { font-size:0.68rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:#8A6D3B; margin-bottom:8px; }
.gate-card h2 { font-family:"Source Serif 4",Georgia,serif; font-weight:600; font-size:1.45rem; color:#14232C; margin:0 0 14px; }
.gate-scroll { overflow-y:auto; border:1px solid #E0DDD3; background:#fff; padding:16px 18px; font-size:0.8rem; line-height:1.65; color:#5A686F; flex:1 1 auto; min-height:120px; }
.gate-scroll h3 { font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#8A6D3B; margin:14px 0 6px; }
.gate-scroll h3:first-child { margin-top:0; }
.gate-scroll p { margin:0 0 10px; }
.gate-scroll a { color:#1C637E; }
.gate-consent { font-size:0.78rem; line-height:1.55; color:#14232C; margin:14px 0 4px; }
.gate-check { display:flex; gap:10px; align-items:flex-start; margin:14px 0 6px; cursor:pointer; }
.gate-check input { margin-top:3px; width:16px; height:16px; accent-color:#C9A35C; flex:0 0 auto; cursor:pointer; }
.gate-check span { font-size:0.78rem; line-height:1.55; color:#14232C; }
.gate-actions { display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; }
.gate-actions button { font-family:Inter,system-ui,sans-serif; font-size:0.82rem; font-weight:600; letter-spacing:0.04em; padding:12px 22px; cursor:pointer; border-radius:2px; }
.gate-accept { background:#C9A35C; border:1px solid #C9A35C; color:#0F2D3A; }
.gate-accept:disabled { opacity:0.35; cursor:not-allowed; }
.gate-decline, .gate-back { background:none; border:1px solid #B9C2C6; color:#5A686F; }
.gate-notice { font-size:0.86rem; line-height:1.7; color:#5A686F; padding:6px 0 4px; }
.gate-notice b { color:#14232C; }
html.gate-lock, html.gate-lock body { overflow:hidden !important; }
@media (max-width: 620px) { .gate { padding:10px; } .gate-card { padding:22px 18px 18px; max-height:96vh; } }


/* ===== alternating media rows (insights, old-site visuals) ===== */
.mrows { display: grid; gap: 54px; }
.mrow { display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: center; }
.mrow .pic { margin: 0; }
.mrow .pic img { width: 100%; display: block; border-radius: 6px; box-shadow: 0 22px 54px rgba(10, 25, 35, 0.22); }
.mrow.flip .pic { order: -1; }
/* Baustein-Überschriften im Stil der Equity-Guard-Ledger (Serif 1.25rem, goldene Ordnungszahl) */
.mrow h3 { font-family: "Source Serif 4", Georgia, serif; font-size: 1.25rem; font-weight: 600; margin: 0 0 10px; }
.mrow h3 i { font-style: italic; color: var(--gold); font-weight: 400; font-size: 0.95rem; margin-right: 13px; }
/* Baustein-Fließtexte im Stil der Equity-Guard-Ledger (sans, gedämpfte Farbe) */
.mrow p { margin: 0 0 12px; font-family: var(--sans); font-size: 0.9rem; color: var(--mut); line-height: 1.65; }
body.night .mrow p { color: var(--ivory-mut); }
.mrow p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .mrow, .mrow.flip { grid-template-columns: 1fr; gap: 18px; } .mrow.flip .pic { order: 0; } }


/* ---------- mobile audit r3 (Aug 2026) ----------
   Alle Regeln sind auf Mobile-Breakpoints beschraenkt (max-width <= 780px bzw.
   max-height <= 460px im Querformat). Die Desktop-Darstellung ab 1120px bleibt
   unveraendert. Ausnahmen (ausserhalb einer Media Query) sind unten einzeln
   kommentiert und wurden bei 1440px vorher/nachher geprueft. */

/* iOS: verhindert das automatische Aufblasen der Schrift beim Drehen ins
   Querformat. Ohne Auswirkung auf Desktop-Browser (dort ist der Wert wirkungslos). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 780px) {
  /* --- Hero: .hero-body ueberschreibt mit "padding: Xpx 0 Ypx" die seitlichen
     28px von .wrap. Auf schmalen Viewports klebte dadurch der komplette
     Hero-Text (Kicker, H1, Lede, CTA) am Displayrand. Nur der Innenabstand
     wird zurueckgeholt, die vertikalen Werte bleiben wie gehabt. */
  .hero-body { padding-left: 28px; padding-right: 28px; }

  /* --- Kopfzeile: Tap-Targets auf >= 44px bringen. */
  .menu-btn { padding: 14px 10px; }
  .hd nav a.keep { display: inline-block; padding: 13px 10px; margin: 0 -10px; }

  /* --- Fusszeile: Pflichthinweise waren mit 0.72rem (11.5px) zu klein;
     die Fussnavigation war rechtsbuendig und damit gegen die uebrige
     Fusszeile ausgerichtet und die Links nur ~18px hoch. */
  footer .f-legal p { font-size: 0.82rem; line-height: 1.75; }
  footer nav { margin-left: 0; justify-content: flex-start; gap: 2px 20px; }
  footer nav a { display: inline-block; padding: 13px 0; }

  /* --- .notice: 70px Abstand sind auf dem Telefon unnoetig viel Leerraum. */
  .notice { margin-top: 48px; }
}

/* --- Tuerenliste: 30px Spalte + 26px Gap frassen bei 320px ein Drittel der
   Textbreite, der Zeilenabstand von 26px blies die Zeilen auf. */
@media (max-width: 480px) {
  .doors a { grid-template-columns: 22px 1fr; gap: 8px 12px; padding: 20px 0; }
  .doors p { max-width: none; }
}

/* --- Dokumentenkopf der Rechts-/Glossarseiten: 148px sticky Masthead sind auf
   einem 568px hohen Display ein Viertel des Viewports. Nur verkleinert,
   nichts ausgeblendet (Pflichtkennzeichnung "Marketingmitteilung"). */
@media (max-width: 720px) {
  .doc-mast .wrap { padding: 6px 20px; gap: 0; }
  .doc-mast img { height: 30px; }
  .doc-mast .l, .doc-mast .r { font-size: 0.6rem; letter-spacing: 0.1em; line-height: 1.5; }
  /* Logo- und Sprachlinks auf Fingergroesse bringen, ohne den Kopf zu strecken. */
  .doc-mast .wrap > a { display: block; padding: 7px 0; }
  .doc-mast .r a { display: inline-block; padding: 8px 2px; }
}

/* --- Compliance-Gate auf Telefonen: .gate-scroll hatte min-height:120px und
   konnte deshalb nicht schrumpfen; die Buttons rutschten aus der Karte und bei
   320px sogar aus dem (scroll-gesperrten) Viewport — "Ablehnen" war nicht
   erreichbar. Jetzt scrollt die Karte als Ganzes, der Rechtstext laeuft im
   normalen Fluss (dadurch deutlich besser lesbar) und die Buttons kleben als
   sticky Leiste am unteren Kartenrand. */
@media (max-width: 620px) {
  .gate { padding: 0; align-items: stretch; justify-content: stretch; }
  .gate-card { width: 100%; max-height: none; height: 100%; overflow-y: auto;
    -webkit-overflow-scrolling: touch; padding: 20px 18px 0; }
  .gate-scroll { flex: 0 0 auto; min-height: 0; overflow: visible; }
  .gate-actions { position: sticky; bottom: 0; z-index: 2; flex-direction: column;
    gap: 10px; margin-top: 14px; padding: 12px 0 16px; background: #F8F7F3;
    box-shadow: 0 -10px 16px -8px rgba(248,247,243,0.95); }
  .gate-actions button { width: 100%; }
}

/* ---------- Telefon im Querformat ----------
   Bei 844x390 (iPhone quer) greift der 780px-Breakpoint nicht: es lief das
   volle Desktop-Layout mit 100px-Logo (120px Kopfzeile = 31% des Viewports),
   88px Abschnittsabstaenden und 130px Hero-Innenabstand. Die Abfrage kann
   keinen Desktop treffen, da sie eine Viewport-Hoehe <= 460px voraussetzt. */
@media (orientation: landscape) and (max-height: 460px) {
  .hd .bar { padding: 8px 0; }
  .hd .logo img { height: 48px; margin: -6px 0; }
  .hero, .hero.tall { min-height: 0; }
  .hero-body { padding-top: 74px; padding-bottom: 26px; }
  .hero-foot .wrap { padding-top: 10px; padding-bottom: 10px; }
  .ch { padding-top: 48px; }
  .closing { padding: 52px 0 44px; }
  .notice { margin-top: 40px; }
  .doc-mast .wrap { padding: 8px 20px; gap: 2px; }
  .doc-mast img { height: 26px; }
  /* Gate: die Karte passte im Querformat nicht in 390px Hoehe. */
  .gate { padding: 0; align-items: stretch; justify-content: stretch; }
  .gate-card { width: 100%; max-height: none; height: 100%; overflow-y: auto;
    -webkit-overflow-scrolling: touch; padding: 16px 22px 0; }
  .gate-scroll { flex: 0 0 auto; min-height: 0; overflow: visible; }
  .gate-actions { position: sticky; bottom: 0; z-index: 2; margin-top: 12px;
    padding: 10px 0 12px; background: #F8F7F3; }
}

/* Touch-Feedback: das voreingestellte blaue Blinken passt nicht zum
   Gold/Navy-Schema. Wirkt ausschliesslich auf Touch-Geraeten. */
@media (hover: none) {
  a, button, .btn, summary { -webkit-tap-highlight-color: rgba(201,163,92,0.22); }
}

/* ---------- r3: lange deutsche Komposita (Querlauf bei 320/360px) ----------
   Messung bei 320px: "Aktienpartizipation," laeuft in der H1 (36.8px) 312px
   breit, die Textspalte ist 264px — das Dokument wurde dadurch 368px breit und
   liess sich seitlich schieben. Gleiches Muster bei "Kapitaleffizientes"
   (266px), "Aufwaertspotenzial" (269px) und der Google-Opt-out-URL auf den
   Datenschutzseiten (343px). Behandelt wird das hier mit break-word/anywhere
   (greift nur bei echtem Ueberlauf, aendert sonst nichts am Umbruch); echte
   Silbentrennung kommt weiter unten nur fuer <=380px auf den DE-Seiten dazu. */
@media (max-width: 780px) {
  /* Ueberschriften: break-word greift ausschliesslich dann, wenn ein Wort
     breiter als die Spalte ist — sonst aendert sich am Umbruch nichts. */
  .hero h1, .hero h1 em,
  .prose h2, .prose h2 em,
  .closing h2, .ledger h3, .doors h3, .mrow h3,
  .doc h1, .doc h2, .doc h3,
  .person b, .class .name, .facts .f b {
    overflow-wrap: break-word;
  }
  /* Fliesstext bleibt ungetrennt (das Schriftbild des Rechtstextes soll sich
     nicht aendern); break-word greift nur bei echtem Ueberlauf. */
  .doc p, .doc li, .person p, .notice p, footer .f-legal p {
    overflow-wrap: break-word;
  }
  /* URLs und Mail-Adressen im Rechtstext haben keine Trennstellen. */
  .doc a, .notice a, .risklink a, footer a { overflow-wrap: anywhere; }
  /* Die 1fr-Spur der Personenkarte konnte wegen min-width:auto nicht unter die
     Breite ihres laengsten Wortes schrumpfen. */
  .person { grid-template-columns: 96px minmax(0, 1fr); }

  /* Kern des Querlaufs: .wrap hat margin:0 auto und ist damit im
     Column-Flexbox des .hero ein shrink-to-fit-Element. Es wuchs deshalb auf
     die min-content-Breite seines laengsten Wortes (bis 285px) an, statt sich
     auf die Viewportbreite zu begrenzen — das Dokument wurde breiter als das
     Display. Eine definierte Breite beendet das Shrink-to-fit-Verhalten. */
  .hero > .wrap { width: 100%; }

  /* Die goldene 46px-Linie des Kickers ist ein nicht schrumpfbares Flex-Item.
     Zusammen mit "Forschungsschwerpunkt" ergab das 270px min-content in einer
     264px breiten Spalte; umbrechen laesst die Linie notfalls in die
     naechste Zeile rutschen. */
  .hero .kicker.k-rule { flex-wrap: wrap; }
}

/* Sehr schmale Geraete (320/360/375): 36.8px Schlagzeilen in einer 264px
   breiten Spalte ergeben selbst mit Trennung fast nur Ein-Wort-Zeilen. */
@media (max-width: 380px) {
  .hero h1 { font-size: 2.05rem; }
  .doc h1 { font-size: 1.7rem; }
  /* Silbentrennung bewusst nur hier und nur auf den deutschen Seiten:
     "Aktienpartizipation," misst bei 320px 271px in einer 264px breiten
     Spalte und wuerde sonst hart mitten im Wort umbrechen. Ab 390px passen
     auch die langen Komposita in die Zeile, und auf den englischen Seiten
     wuerde hyphens:auto nur unnoetig trennen ("eq-uity"). */
  html[lang="de"] .hero h1, html[lang="de"] .hero h1 em,
  html[lang="de"] .prose h2, html[lang="de"] .prose h2 em,
  html[lang="de"] .doc h1, html[lang="de"] .doc h2, html[lang="de"] .doc h3,
  html[lang="de"] .ledger h3, html[lang="de"] .doors h3 {
    -webkit-hyphens: auto; hyphens: auto;
  }
}

/* Personenkarten: bei 320px blieben neben dem 96px-Portraet nur 146px Text-
   spalte — Rolle ("Geschaeftsfuehrer") lief aus der Karte und lange Woerter
   wurden mitten im Wort gebrochen. Unter 400px steht das Bild deshalb ueber
   dem Text, der damit die volle Spaltenbreite bekommt. */
@media (max-width: 400px) {
  .person { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .person img { width: 132px; height: 158px; aspect-ratio: auto; }
}