/* =========================================================
   Travexis — Stylesheet
   Brand colors: Travexis Blau #007AA3, Travexis Rot #8B2828,
   plus a gold/orange CTA accent chosen to pair with both.

   ARCHITECTURE NOTE (accessibility):
   Every dark section carries one of two surface classes —
   .surface-dark (near-black navy: hero, CTA bands, page headers)
   or .surface-deep (brand-blue-derived dark: calculator, quotes,
   values). Both classes set light text as the DEFAULT for every
   heading/paragraph inside them in one place, so no individual
   component can "forget" to override dark-on-dark text again.
   Component-level color rules only ever apply on TOP of that
   default — they never need to re-establish light-vs-dark.
   ========================================================= */

:root {
  --ink: #0A1F28;
  --deep: #0C3A4D;
  --paper: #F4F7F8;
  --paper-raised: #FFFFFF;
  --slate: #49575F;
  --slate-light: #90A0A8;
  --line: #D9E1E4;
  --line-dark: #1E3A46;

  --blue: #007AA3;
  --blue-ink: #045873;
  --blue-bright: #4FC3E8;
  --red: #8B2828;
  --red-bright: #E58888;

  --cta: #F5A623;
  --cta-ink: #92600D;
  --mint: #3FBF95;

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --step-1: clamp(0.85rem, 0.81rem + 0.15vw, 0.95rem);
  --step0: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --step1: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step2: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --step3: clamp(2rem, 1.6rem + 1.6vw, 2.8rem);
  --step4: clamp(2.6rem, 1.9rem + 3vw, 4.2rem);
  --step5: clamp(2.2rem, 1.8rem + 2.6vw, 3.6rem);

  --maxw: 1440px;
  --gutter: clamp(18px, 3vw, 40px);
  --radius: 2px;
  --radius-btn: 10px;
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * , *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1 { font-size: var(--step5); }
/* All H1s are two-line, two-color statements: default ink line, accent <em> line. */
h1 em, h2 em, h3 em { font-style: normal; color: var(--cta-ink); }
.surface-dark h1 em, .surface-deep h1 em,
.surface-dark h2 em, .surface-deep h2 em,
.surface-dark h3 em, .surface-deep h3 em { color: var(--cta); }
h2 { font-size: var(--step3); }
h3 { font-size: var(--step2); }
h4 { font-size: var(--step1); }
p { margin: 0 0 1.1em; color: var(--ink); }
p.lede { font-size: var(--step1); color: var(--slate); max-width: 46ch; }
a { color: var(--blue-ink); }
a:hover { color: var(--blue); }
img, svg { display: block; max-width: 100%; }

.mono { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--step-1); }
.eyebrow {
  font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; font-size: var(--step-1);
  font-weight: 500; color: var(--blue-ink); display: inline-flex; align-items: center; gap: 0.6em; margin-bottom: 1em;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; display: inline-block; }

.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
section { padding: clamp(40px, 6vw, 88px) 0; position: relative; }
.section-tight { padding: clamp(28px, 4vw, 56px) 0; }

/* ===== DARK SURFACES — single source of truth for light text ===== */
.surface-dark, .surface-deep { color: var(--paper); }
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4,
.surface-deep h1, .surface-deep h2, .surface-deep h3, .surface-deep h4 { color: var(--paper); }
.surface-dark p, .surface-deep p { color: #CBD9DE; }
.surface-dark p.lede, .surface-deep p.lede { color: #CBD9DE; }
.surface-dark a, .surface-deep a { color: var(--blue-bright); }
/* Buttons must always control their own text color, regardless of which
   surface they sit inside — the generic "a" rule above was winning by
   specificity and turning primary-CTA text into pale blue (illegible on
   an orange button). These two-class selectors outrank it. */
.surface-dark .btn-primary, .surface-deep .btn-primary { color: var(--ink); }
.surface-dark .btn-ghost, .surface-deep .btn-ghost { color: var(--paper); }
.surface-dark .eyebrow, .surface-deep .eyebrow { color: var(--cta); }
.surface-dark hr.hair, .surface-deep hr.hair { border-top-color: var(--line-dark); }
.surface-dark { background: var(--ink); }
.surface-deep { background: var(--deep); }
.surface-dark .card, .surface-deep .card { color: var(--ink); }
.surface-dark .card h1, .surface-dark .card h2, .surface-dark .card h3, .surface-dark .card h4,
.surface-deep .card h1, .surface-deep .card h2, .surface-deep .card h3, .surface-deep .card h4 { color: var(--ink); }
.surface-dark .card p, .surface-deep .card p { color: var(--slate); }

.on-raised { background: var(--paper-raised); }
hr.hair { border: none; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); letter-spacing: 0.02em; padding: 0.95em 1.6em; border-radius: var(--radius-btn);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color .15s ease;
}
.btn:focus-visible { outline: 3px solid var(--cta-ink); outline-offset: 3px; }
.surface-dark .btn:focus-visible, .surface-deep .btn:focus-visible { outline-color: var(--cta); }
.btn-primary { background: var(--cta); color: var(--ink); }
.btn-primary:hover { background: #F8BC5A; transform: translateY(-1px); }
/* Secondary "read more" buttons take their area's own color, keeping the gelb-orange CTA reserved for the one real call to action. */
.btn-blue { background: var(--blue); color: var(--paper); }
.btn-blue:hover { background: #1D95BC; transform: translateY(-1px); }
.btn-mint { background: var(--mint); color: var(--paper); }
.btn-mint:hover { background: #6ED3AE; transform: translateY(-1px); }
.btn-red { background: var(--red); color: var(--paper); }
.btn-red:hover { background: #A83636; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost:hover { background: rgba(10,31,40,0.06); }
.surface-dark .btn-ghost:hover, .surface-deep .btn-ghost:hover { background: rgba(244,247,248,0.1); }
.btn-white { background: var(--paper-raised); color: var(--ink); border-color: var(--paper-raised); }
.btn-white:hover { background: var(--paper); color: var(--ink); transform: translateY(-1px); }
.btn-arrow { transition: transform .15s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Nav ---------- */
/* #site-nav (not .nav) is sticky: its height matches .nav exactly, so .nav
   itself would run out of containing-block room after ~85px of scroll and
   drift away with the page. The wrapper spans the full <body>, giving the
   sticky box room to stay pinned for the whole page. */
#site-nav { position: sticky; top: 0; z-index: 50; }
.nav { background: rgba(244,247,248,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav .container { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.logo-img { height: 34px; width: auto; display: block; }
footer .logo-img { height: 24px; }

.nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; color: var(--slate); font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; padding: 6px 2px; position: relative; }
.nav-links a.active, .nav-links a:hover { color: var(--ink); }
.nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--blue); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.lang-switch { position: relative; }
.lang-trigger { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; background: none; border: 1px solid var(--line); color: var(--ink); padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.lang-trigger:hover { border-color: var(--slate-light); }
.lang-flag { width: 18px; height: 12px; flex-shrink: 0; border-radius: 2px; outline: 1px solid rgba(10,31,40,0.12); outline-offset: -1px; }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; margin: 0; padding: 6px; list-style: none; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(10,31,40,0.14); min-width: 168px; }
.lang-menu-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-family: var(--font-body); font-size: 0.9rem; color: var(--ink); border-radius: 6px; }
.lang-menu-item-current { font-weight: 700; background: var(--paper); }
.lang-option { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; color: var(--slate-light); padding: 0; cursor: not-allowed; font-family: var(--font-body); font-size: 0.9rem; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .2s ease, opacity .2s ease; }

@media (max-width: 880px) {
  .nav-links { position: fixed; inset: 64px 0 0 0; background: var(--paper); flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 24px var(--gutter); gap: 20px; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; }
  .nav-links.open { transform: translateX(0); }
  .nav-toggle { display: block; }
}

/* ---------- Hero ---------- */
/* Text column is the dominant element (50–66% of the width), image takes
   the remainder. A solid navy bar divides the hero from the next section. */
/* Bottom padding reset to 0: the generic `section` rule's clamp(56–128px)
   bottom padding would otherwise stack on top of hero-text-col/hero-image-col's
   own internal padding, doubling up into a large empty gap before the divider. */
.hero { padding: 0; overflow: hidden; background: var(--paper-raised); border-bottom: 6px solid var(--ink); }
.hero-flex { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(28px, 5vw, 72px); min-height: 620px; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.hero-text-col { padding: clamp(32px,6vw,64px) 0; text-align: center; }
.hero-text-col .lede { margin-left: auto; margin-right: auto; }
.hero-image-col { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.hero-actions, .hero-stats { justify-content: center; }
@media (max-width: 960px) {
  .hero-flex { grid-template-columns: 1fr; min-height: 0; }
  .hero-text-col { padding: 32px clamp(20px,5vw,64px) 0; }
  .hero-image-col { padding: 24px clamp(20px,5vw,64px) 40px; }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 2em; }
.hero-highlights { display: flex; flex-wrap: nowrap; gap: clamp(12px, 3vw, 48px); margin-top: 2em; padding-top: 24px; border-top: 1px solid var(--line); justify-content: center; }
.hero-highlight { flex: 1 1 0; min-width: 0; text-align: left; }
.hero-highlight h4 { font-size: 1.02rem; margin-bottom: 0.3em; }
.hero-highlight p { color: var(--slate); font-size: 0.92rem; margin: 0; }
.hero-stats { display: flex; flex-wrap: nowrap; gap: clamp(10px, 3vw, 48px); margin-top: 3em; }
.hero-stats-divider { border-top: 1px solid rgba(244,247,248,0.18); padding-top: 32px; }
.hero-stat { flex: 1 1 0; min-width: 0; }
.hero-stat b { display: block; font-family: var(--font-display); font-size: var(--step2); color: var(--cta-ink); }
.hero-stat span { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.surface-dark .hero-stat b, .surface-deep .hero-stat b { color: var(--cta); }
.surface-dark .hero-stat span, .surface-deep .hero-stat span { color: #CBD9DE; }
.beam-wrap { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.hero-photo-frame { background: var(--paper); padding: 8px; border: 1px solid var(--line); border-top: 4px solid var(--cta); }
.hero-photo-frame img { width: 100%; height: auto; display: block; }
.beam-caption { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); display: flex; justify-content: space-between; margin-top: 10px; }
.beam-caption, .wissen-graphic-caption { display: none; }

.intro-divider { max-width: min(90%, 1040px); }
.status-quo { border-top: 6px solid var(--ink); }

/* ---------- Pillars ---------- */
.pillars-structure { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 32px); align-items: stretch; }
@media (max-width: 860px) { .pillars-structure { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pillars-structure { grid-template-columns: 1fr; } }
.pillar { background: var(--paper-raised); border: 1px solid var(--line); border-top: 6px solid var(--blue); padding: 36px 30px 40px; position: relative; display: flex; flex-direction: column; height: 100%; }
.pillar > p:last-child { margin-top: auto; padding-top: 1.4em; }
.pillar:nth-child(2) { border-top-color: var(--mint); }
.pillar:nth-child(3) { border-top-color: var(--red); }
.pillar-index { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--slate); text-transform: uppercase; }
.pillar h3 { margin-top: 0.3em; }
.pillar ul { margin: 1.2em 0 0; padding: 0; list-style: none; }
.pillar li { padding-left: 18px; position: relative; margin-bottom: 0.6em; color: var(--slate); font-size: 0.96rem; }
.pillar li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 2px; background: var(--blue); }
.bubble-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2em 0 0; }
.bubble { background: var(--paper); border: 1px solid var(--line); color: var(--ink); font-size: 0.84rem; padding: 7px 14px; border-radius: 999px; }


/* ---------- Calculator ---------- */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }
.calc-field { margin-bottom: 28px; }
.calc-field label { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: #CBD9DE; margin-bottom: 10px; }
.calc-field output { color: var(--cta); font-family: var(--font-display); font-size: 1rem; }
input[type="range"] { width: 100%; appearance: none; height: 3px; background: #23515F; border-radius: 2px; outline: none; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--cta); border: 3px solid var(--ink); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--cta); border: 3px solid var(--ink); cursor: pointer; }
.calc-result { background: rgba(244,247,248,0.06); border: 1px solid rgba(244,247,248,0.18); padding: clamp(24px, 4vw, 40px); }
.calc-result .amount { font-family: var(--font-display); font-size: clamp(2.4rem, 3vw + 1rem, 4rem); color: var(--cta); margin: 0.15em 0; }
.calc-result .range-label { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9FC9D6; }
.calc-footnote { font-size: 0.85rem; color: #9FC9D6; margin-top: 18px; }

/* ---------- ROI-Rechner ---------- */
.roi-section { background: var(--paper-raised); }
.roi-mode-switch { display: flex; gap: 8px; margin-top: 0; margin-bottom: 40px; }
.roi-mode-btn { min-height: 44px; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; background: transparent; border: 1px solid var(--line); color: var(--ink); padding: 10px 18px; cursor: pointer; border-radius: var(--radius-btn); }
.roi-mode-btn.active { background: var(--cta); border-color: var(--cta); color: var(--ink); font-weight: 600; }
.roi-mode-btn:focus-visible, .roi-band-btn:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; }
.roi-content { background: var(--paper-raised); padding: clamp(56px, 8vw, 112px) 0; }
.roi-inputs { background: var(--paper-raised); color: var(--ink); }
.roi-content .roi-field label { color: var(--slate); }
.roi-content .roi-field output { color: var(--cta-ink); }
.roi-content .roi-group { border-color: var(--line); }
.roi-content .roi-group legend, .roi-content .roi-subfield label { color: var(--slate); }
.roi-content .roi-subfield output { color: var(--cta-ink); }
.roi-content input[type="range"] { background: var(--line); }
.roi-content input[type="range"]::-webkit-slider-thumb { border-color: var(--paper-raised); }
.roi-content input[type="range"]::-moz-range-thumb { border-color: var(--paper-raised); }
.roi-quick-only { display: none; }
.roi-content.quick-mode .roi-quick-only { display: block; }
.roi-content.quick-mode .roi-advanced { display: none; }
.roi-content.quick-mode .roi-inputs { max-width: 720px; }
/* Scoped to the white input column only — the navy .roi-result panel needs its own light footnote color. */
.roi-content .roi-inputs .calc-footnote { color: var(--slate); }
.roi-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .roi-grid { grid-template-columns: 1fr; } }
.roi-field { margin-bottom: 22px; }
.roi-field label { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: #CBD9DE; margin-bottom: 10px; }
.roi-field output { color: var(--cta); font-family: var(--font-display); font-size: 1rem; white-space: nowrap; }
.roi-group { border: 1px solid rgba(244,247,248,0.18); border-radius: var(--radius); padding: 18px 18px 4px; margin: 0 0 22px; }
.roi-group legend { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9FC9D6; padding: 0 6px; }
.roi-subfield { margin-bottom: 16px; }
.roi-subfield label { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; color: #CBD9DE; margin-bottom: 8px; }
.roi-subfield output { color: var(--cta); font-family: var(--font-mono); font-size: 0.85rem; }
.roi-toggles { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; }
.roi-toggle { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: #E7EFF1; cursor: pointer; }
.roi-toggle input { width: 18px; height: 18px; accent-color: var(--cta); flex-shrink: 0; }
.roi-toggle-tag { margin-left: auto; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: #9FC9D6; border: 1px solid rgba(244,247,248,0.25); padding: 2px 8px; border-radius: 999px; }

.roi-result { position: sticky; top: 24px; background: var(--deep); color: var(--paper); padding: clamp(24px, 4vw, 40px); }
.roi-band-switch { display: flex; gap: 8px; margin-bottom: 20px; }
.roi-band-btn { flex: 1; min-height: 44px; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; background: transparent; border: 1px solid rgba(244,247,248,0.25); color: #CBD9DE; padding: 9px 6px; cursor: pointer; border-radius: var(--radius); }
.roi-band-btn.active { background: var(--cta); border-color: var(--cta); color: var(--ink); font-weight: 600; }

.roi-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0; }
@media (max-width: 560px) { .roi-groups { grid-template-columns: 1fr; } }
.roi-groupbox-amount { font-family: var(--font-display); font-size: 1.5rem; color: var(--paper); margin: 6px 0 10px; }
.roi-benchmark { position: relative; height: 8px; background: rgba(244,247,248,0.15); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.roi-benchmark-band { position: absolute; left: 40%; width: 27%; top: 0; bottom: 0; background: rgba(244,247,248,0.28); }
.roi-benchmark-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--cta); transition: width 0.15s ease; }
.roi-benchmark-label { font-size: 0.76rem; color: #9FC9D6; margin: 0; }

.roi-hebel { margin: 18px 0 6px; display: flex; flex-direction: column; gap: 12px; }
.roi-hebel-item .roi-hebel-head { display: flex; justify-content: space-between; font-size: 0.84rem; color: #E7EFF1; margin-bottom: 6px; }
.roi-hebel-bar { height: 8px; border-radius: 999px; background: rgba(244,247,248,0.15); overflow: hidden; }
.roi-hebel-bar-fill { height: 100%; border-radius: 999px; }
.roi-hebel-einkauf .roi-hebel-bar-fill { background: var(--blue-bright); }
.roi-hebel-compliance .roi-hebel-bar-fill { background: var(--cta); }
.roi-hebel-effizienz .roi-hebel-bar-fill { background: var(--red-bright); }
.roi-hebel-hotel .roi-hebel-bar-fill { background: #A6E3D4; }

.roi-gate { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(244,247,248,0.18); }
.roi-gate-label { display: block; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: #9FC9D6; margin-bottom: 10px; }
.roi-gate-row { display: flex; gap: 10px; flex-wrap: wrap; }
.roi-gate-row input { flex: 1 1 200px; padding: 11px 14px; border: 1px solid rgba(244,247,248,0.3); background: rgba(244,247,248,0.06); color: var(--paper); border-radius: var(--radius); font-family: var(--font-body); }
.roi-gate-consent { font-size: 0.74rem; color: #9FC9D6; margin: 10px 0 0; }
.roi-gate-consent a { color: #9FC9D6; }
.roi-gate-success { margin-top: 14px; font-size: 0.86rem; color: var(--paper); background: rgba(244,247,248,0.08); border: 1px solid rgba(244,247,248,0.2); padding: 12px 14px; border-radius: var(--radius); }

/* ---------- Cards / grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 28px); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .grid-3 { grid-template-columns: 1fr; } }
.card { background: var(--paper-raised); border: 1px solid var(--line); padding: 30px 26px; }
.card .num { font-family: var(--font-mono); color: var(--cta-ink); font-size: 0.8rem; letter-spacing: 0.08em; }

.approach-row { display: grid; grid-template-columns: 90px 1fr; gap: 22px; padding: 26px 0; border-top: 1px solid var(--line); }
.approach-row:last-child { border-bottom: 1px solid var(--line); }
.approach-row .step-num { font-family: var(--font-mono); font-size: 0.9rem; color: var(--slate); }
.approach-row h4 { margin-bottom: 0.35em; }

/* ---------- Team ---------- */
.team-card { background: var(--paper-raised); border: 1px solid var(--line); padding: 22px 20px; text-align: center; }
.team-avatar { width: 112px; height: 112px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); overflow: hidden; margin: 0 auto 14px; }
.team-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.team-card h4 { margin-bottom: 0.1em; font-size: 1.05rem; }
.team-card .role { color: var(--slate); font-size: 0.88rem; margin-bottom: 0.6em; }
.team-card .city { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-ink); }
.team-card a.li { display: inline-flex; margin-top: 12px; font-size: 0.8rem; color: var(--blue-ink); text-decoration: none; }
.team-card a.li:hover { color: var(--blue); }

/* ---------- Logo row / anbieter ---------- */
.logo-slot { height: 56px; border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); padding: 4px 10px; text-align: center; }
.logo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 700px) { .logo-row { grid-template-columns: repeat(2, 1fr); } }

/* ---------- FAQ ---------- */
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.faq-q:focus-visible { outline: 3px solid var(--cta-ink); outline-offset: 2px; }
.faq-q .plus { font-family: var(--font-mono); font-size: 1.3rem; color: var(--cta-ink); transition: transform .2s ease; flex-shrink: 0; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-item.open .faq-a { max-height: 400px; }
.faq-a p { padding-bottom: 22px; color: var(--slate); max-width: 68ch; }
/* Defensive: keep FAQ text legible if this component is ever placed on a dark surface. */
.surface-dark .faq-q, .surface-deep .faq-q { color: var(--paper); }
.surface-dark .faq-item, .surface-deep .faq-item { border-top-color: var(--line-dark); }
.surface-dark .faq-a p, .surface-deep .faq-a p { color: #CBD9DE; }

/* ---------- Email capture (end of every page) ---------- */
.email-capture-section { border-top: 1px solid var(--line); padding-bottom: 32px; }
.divider-navy { height: 6px; background: var(--ink); }
.guided-steps { display: flex; gap: clamp(16px, 3vw, 32px); margin: 2em 0; text-align: left; }
@media (max-width: 700px) { .guided-steps { flex-direction: column; } }
.guided-step { flex: 1 1 0; position: relative; padding-top: 8px; }
.guided-step:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: calc(50% + 30px); right: calc(-50% + 30px); height: 1px; background: var(--line); }
@media (max-width: 700px) { .guided-step:not(:last-child)::after { display: none; } }
.guided-step-num { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cta); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 14px; }
.guided-step h4 { font-size: 1rem; margin-bottom: 0.3em; }
.guided-step p { color: var(--slate); font-size: 0.9rem; margin: 0; }
.email-capture-form { display: flex; gap: 12px; margin-top: 1.6em; flex-wrap: wrap; justify-content: center; }
.email-capture-form input[type="email"] {
  flex: 1 1 260px; max-width: 340px; padding: 0.95em 1.1em; border: 1px solid var(--line);
  background: var(--paper-raised); font-family: var(--font-body); font-size: 1rem; color: var(--ink);
}
.email-capture-form input[type="email"]:focus-visible { outline: 3px solid var(--cta-ink); outline-offset: 1px; }
.consent-note { margin: 14px auto 0; color: var(--slate); font-size: 0.82rem; max-width: 58ch; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .btn-primary { margin-top: 0.6em; }
.cta-band .eyebrow::before { display: none; }

/* ---------- Footer ---------- */
/* Light zone above the divider: logos + link columns, dark text. */
.footer-top { background: var(--paper); color: var(--ink); padding: 56px 0 40px; border-bottom: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-top h4 { color: var(--ink); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-mono); font-weight: 500; margin-bottom: 1em; }
.footer-top ul { list-style: none; padding: 0; margin: 0; }
.footer-top li { margin-bottom: 0.6em; }
.footer-top a { text-decoration: none; color: var(--ink); }
.footer-top a:hover { color: var(--blue-ink); }
.footer-top .partner-logos { display: flex; gap: 24px; padding-top: 32px; border-top: 1px solid var(--line); flex-wrap: wrap; justify-content: center; align-items: center; }
.footer-top .partner-logos a { display: block; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px; padding: 12px 18px; }
.footer-top .partner-logos img { height: 120px; width: auto; display: block; }
/* Dark bar below the divider: copyright + legal links, unchanged. */
footer.site { background: var(--ink); color: #9FB3BC; padding: 24px 0 28px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; }
.footer-bottom a { color: #9FB3BC; margin-left: 18px; text-decoration: none; }
.footer-bottom a:hover { color: var(--paper); }

/* ---------- Page header ---------- */
/* White like the hero, with the same navy divider bar. */
.page-header { padding: clamp(64px, 10vw, 120px) 0 clamp(40px, 6vw, 64px); background: var(--paper-raised); border-bottom: 6px solid var(--ink); }
.page-header h1 { max-width: 18ch; }
.page-header-flex { display: grid; grid-template-columns: minmax(50%, 66%) 1fr; align-items: center; gap: clamp(24px, 4vw, 64px); }
@media (max-width: 960px) { .page-header-flex { grid-template-columns: 1fr; } }
.page-header-photo { border: 1px solid var(--line); border-top: 4px solid var(--cta); background: var(--paper); padding: 8px; }
.page-header-photo img { width: 100%; height: auto; display: block; }
.breadcrumb { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 1.4em; }
.breadcrumb a { color: var(--blue-ink); text-decoration: none; }

/* ---------- Legal pages ---------- */
.legal { max-width: 74ch; }
.legal h2 { font-size: var(--step2); margin-top: 1.6em; }
.legal h3 { font-size: var(--step1); margin-top: 1.2em; }
.legal p, .legal li { color: var(--slate); }
.legal ul { padding-left: 1.2em; }

/* ---------- Wissen (hub + articles) ---------- */
.wissen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .wissen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .wissen-grid { grid-template-columns: 1fr; } }
.wissen-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.wissen-card-tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cta-ink); margin-bottom: 10px; }
.wissen-card h3 { font-size: 1.15rem; color: var(--ink); margin: 0 0 10px; }
.wissen-card p { color: var(--slate); font-size: 0.92rem; flex-grow: 1; }
.wissen-card .wissen-card-more { margin-top: 16px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--blue-ink); }
.wissen-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.wissen-card-actions .btn { padding: 0.6em 1.1em; font-size: 0.82rem; }
.wissen-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.wissen-filter-btn { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em; background: var(--paper-raised); border: 1px solid var(--line); color: var(--slate); padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.wissen-filter-btn.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.article-meta { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: #9FB3BC; margin-bottom: 0.6em; }
.article-disclaimer { margin-top: 3em; padding-top: 1.6em; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--slate-light); }

/* ---------- Wissen: custom SVG stat graphics (Referenzen + topic icons) ---------- */
.wissen-graphic { position: relative; overflow: hidden; background: var(--ink); border-radius: 14px; padding: 26px 30px; margin: 6px 0 32px; }
.wissen-graphic::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(224,147,46,0.22) 1.4px, transparent 1.4px); background-size: 22px 22px; opacity: 0.6; pointer-events: none; }
.wissen-graphic-inner { position: relative; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.wissen-graphic svg { display: block; flex-shrink: 0; }
.wissen-graphic-caption { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cta); margin: 0 0 6px; }
.wissen-graphic-label { color: var(--paper); font-size: 0.95rem; max-width: 46ch; margin: 0; }
.stat-ring-value { font-family: var(--font-display); font-weight: 600; fill: var(--paper); }
.stat-ring-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; fill: #CBD9DE; }
.stat-bar-track { fill: rgba(255,255,255,0.14); }
.stat-bar-fill { fill: var(--cta); }
.stat-bar-fill.alt { fill: #5FA0B0; }
.stat-bar-label { font-family: var(--font-mono); font-size: 10px; fill: #CBD9DE; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-bar-value { font-family: var(--font-display); font-size: 13px; fill: var(--paper); font-weight: 600; }
.process-node circle { fill: var(--ink); stroke: var(--cta); stroke-width: 2; }
.process-node text { font-family: var(--font-mono); font-size: 11px; fill: var(--paper); }
.process-line { stroke: rgba(255,255,255,0.28); stroke-width: 2; stroke-dasharray: 3 4; }
.topic-icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--paper-raised); border: 2px solid var(--cta); margin-bottom: 16px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Utility ---------- */
.center { text-align: center; margin-left: auto; margin-right: auto; }
.small { font-size: 0.9rem; color: var(--slate); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--cta); color: var(--ink); padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 16px; top: 16px; }