/* =========================================================
   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: #2DD4C8;
  --turquoise: #1CADA8;

  --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: 8px;
  --radius-card: 14px;
  --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); }
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; }
/* Halves just the top padding, for a section stacked directly on another
   same-background (.on-raised) section, where the two sections' combined
   default padding otherwise reads as one oversized empty gap. */
.section-tighter-top { padding-top: clamp(12px, 2vw, 28px); }

/* ===== 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(--ink); }
.btn-mint:hover { background: #5EE5DB; 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: var(--paper-raised); border-bottom: 1px solid var(--line); position: relative; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); grid-column: 1; }
.brand:hover { color: var(--ink); }
.logo-img { height: 34px; width: auto; display: block; }
footer .logo-img { height: 24px; }

/* Row 1: brand | centered search | lang switch + CTA + hamburger toggle */
.nav-row1 { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: clamp(12px, 2vw, 28px); padding-top: 14px; padding-bottom: 14px; }
.nav-search-desktop { grid-column: 2; justify-self: center; width: 100%; max-width: 440px; }
.nav-row1-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 14px; }

/* Row 2: text nav links */
.nav-row2 { background: var(--paper-raised); border-top: 1px solid var(--line); position: relative; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); list-style: none; margin: 0; padding: 10px 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); }

/* Disabled/"coming soon" nav item (e.g. Reisebüro) — not a link, no click target */
.nav-disabled { color: var(--slate-light); font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; cursor: not-allowed; user-select: none; }

/* Small bordered "frame" grouping related nav-links pills together */
.nav-group { display: flex; }
.nav-subgroup { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); list-style: none; margin: 0; padding: 6px 16px; border: 1px solid var(--line); border-radius: 999px; }
.nav-group-turquoise .nav-subgroup { border-color: var(--turquoise); }
.nav-group-mint .nav-subgroup { border-color: var(--mint); }
.nav-group-gold .nav-subgroup { border-color: var(--cta); }

/* "Tätigkeiten"/"Ergebnisse" mega-panels — reuse the real homepage
   .pillar/.bubble-list/.btn-* card component verbatim, just sized down
   for the nav context. Only "Tätigkeiten" gets the colored pill border
   (nav-mega-pill); other nav-links are plain text, no background bar. */
/* NOT position:relative here on purpose: .nav-mega-panel's containing
   block must be the full-width .nav-row2 (see above), not this narrow
   trigger <li> — otherwise the panel is only as wide as the "Tätigkeiten"
   button, cards visually overflow it, and hovering the gaps BETWEEN cards
   lands on whatever page content is actually there, closing the menu. */
.nav-mega { }
.nav-mega-trigger { font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; background: none; border: none; color: var(--slate); cursor: pointer; padding: 6px 2px; }
.nav-mega-trigger:hover { color: var(--ink); }
.nav-mega.open .nav-mega-trigger { color: var(--ink); }
/* Vertical padding sums to 6px/side (outer 1 + border 1 + inner 4), matching
   plain .nav-links a's 6px/side padding, so the pill sits at the same
   height as the surrounding text items instead of visibly taller. */
.nav-mega-pill { border: 1px solid var(--turquoise); border-radius: 999px; padding: 1px 4px; }
.nav-mega-pill .nav-mega-trigger { padding: 4px 14px; }
.nav-mega-panel { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 60; background: var(--paper-raised); border-top: 1px solid var(--line); box-shadow: 0 16px 32px rgba(10,31,40,0.14); padding: 28px 0; }
/* Opened/closed purely via JS (.open) — see initNavPanels() in main.js.
   A pure CSS :hover rule closed the panel instantly the moment the mouse
   left the trigger <li>, including while crossing the row's own padding
   on the way down to the panel; JS adds a short close-delay that tolerates it. */
.nav-mega.open .nav-mega-panel { display: block; }
.nav-mega-panel .pillar { padding: 22px 20px 24px; }
.nav-mega-panel .pillar h3 { font-size: 1.05rem; }
.nav-mega-panel .pillar > p { font-size: 0.86rem; }
.nav-mega-panel .pillar-index { font-size: 0.68rem; }
.nav-mega-panel .bubble { font-size: 0.78rem; padding: 5px 12px; }
.nav-mega-panel .pillar .btn { font-size: 0.82rem; padding: 9px 14px; }
/* .nav-links a { color: var(--slate) } outranks .btn-blue/-mint/-red on
   specificity alone (extra element selector), silently graying out these
   buttons' text — restore each variant's real (contrast-checked) color. */
.nav-mega-panel .btn-blue, .nav-mega-panel .btn-red { color: var(--paper); }
.nav-mega-panel .btn-mint { color: var(--ink); }
/* 4 cols (3 pillars + CTA) in one row; below that, a clean 2x2 grid (no
   column-spanning CTA) instead of an uneven 2+1-plus-full-width-CTA split.
   Compound-selected with the base class (.pillars-structure.pillars-
   structure-3cta) — a bare .pillars-structure-3cta rule ties in specificity
   with the later base .pillars-structure rule and loses on source order. */
.pillars-structure.pillars-structure-3cta { grid-template-columns: repeat(3, 1fr) 220px; }
@media (max-width: 1080px) {
  .pillars-structure.pillars-structure-3cta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .pillars-structure.pillars-structure-3cta { grid-template-columns: 1fr; }
}
.nav-mega-cta { background: var(--ink); color: var(--paper); border-radius: var(--radius-card); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.nav-mega-cta-kicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cta); }
.nav-mega-cta .btn { font-size: 0.82rem; padding: 10px 14px; justify-content: center; }

/* "Unternehmen" nav dropdown */
.nav-dropdown { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-dropdown-toggle { display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--slate); cursor: pointer; padding: 4px; }
.nav-dropdown-toggle:hover { color: var(--ink); }
.nav-dropdown-toggle svg { transition: transform .15s ease; }
.nav-dropdown-menu { display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; margin: 0; padding: 8px; 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: 200px; }
.nav-dropdown-menu li { padding: 0; }
.nav-dropdown-menu a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--slate); font-size: 0.92rem; font-weight: 500; }
.nav-dropdown-menu a:hover { background: var(--paper); color: var(--ink); }
/* Opened/closed purely via JS (.open) — see initNavPanels() in main.js. */
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown.open .nav-dropdown-toggle svg { transform: rotate(180deg); }

/* ---------- Site search (shared by the row-1 + mobile dropdown copies) ---------- */
.search-field { position: relative; display: flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; color: var(--slate); }
.search-field:focus-within { border-color: var(--slate-light); }
.search-field input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: var(--font-body); font-size: 0.92rem; color: var(--ink); }
.search-field .search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 70; 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); max-height: 60vh; overflow-y: auto; }
.search-field .search-results:empty { display: none; }
.search-result { display: block; padding: 10px 12px; border-radius: 6px; text-decoration: none; }
.search-result:hover, .search-result.active { background: var(--paper); }
.search-result-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.search-result-desc { display: block; font-size: 0.82rem; color: var(--slate); margin-top: 2px; }
.search-empty { padding: 14px 12px; font-size: 0.88rem; color: var(--slate-light); }
mark.search-hit { background: rgba(245,166,35,0.35); color: inherit; border-radius: 2px; }

/* ---------- Login/account switcher ---------- */
.login-switch { position: relative; }
.login-trigger { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; background: none; border: 1px solid var(--line); color: var(--ink); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.login-trigger:hover { border-color: var(--slate-light); }
.login-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; margin: 0; padding: 14px; 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: 280px; }
.login-label { display: block; font-family: var(--font-body); font-size: 0.78rem; color: var(--slate); margin-bottom: 8px; }
.login-form-row { display: flex; gap: 8px; }
.login-email { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-btn); padding: 8px 10px; font-family: var(--font-body); font-size: 0.9rem; color: var(--ink); }
.login-email:focus { outline: none; border-color: var(--slate-light); }
.login-submit { padding: 8px 14px; font-size: 0.85rem; white-space: nowrap; }
.login-error { margin: 10px 0 0; font-size: 0.8rem; color: var(--red); }

/* ---------- Language switcher ---------- */
.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; }

/* ---------- Graduated nav collapse ----------
   Row 1 sheds items into a hamburger dropdown one at a time as space runs
   out: search first (<1180px), then the CTA (<860px), then the language
   switch (<640px). Below 640px the dropdown and row 2 (nav-links) merge
   into one full-screen scrollable panel. Each collapsible item exists as a
   desktop (row 1) copy and a mobile (dropdown) copy; main.js wires up
   every instance it finds, so both stay fully functional.
   NOTE: .nav-collapsible lives OUTSIDE <header class="nav"> (a sibling,
   both direct children of #site-nav) — .nav's `backdrop-filter` would
   otherwise create a containing block for fixed-position descendants and
   break the full-screen panel below. */
.nav-collapsible { display: contents; }
.mobile-extras { display: none; flex-direction: column; gap: 16px; }
.nav-search-mobile, .nav-cta-mobile, .nav-lang-mobile, .nav-login-mobile { display: none; }

@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  .nav-search-desktop { display: none; }
  .nav-search-mobile { display: block; }
  .mobile-extras {
    position: fixed; top: 64px; left: 0; right: 0; z-index: 55;
    background: var(--paper-raised); border-top: 1px solid var(--line);
    padding: 18px var(--gutter) 20px; box-shadow: 0 8px 24px rgba(10,31,40,0.14);
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  #site-nav.menu-open .mobile-extras { display: flex; }
  .nav-lang-mobile .lang-menu { position: static; box-shadow: none; border: none; padding: 0; margin-top: 8px; }
  .nav-login-mobile .login-menu { position: static; box-shadow: none; border: none; padding: 0; margin-top: 8px; min-width: 0; }
}

@media (max-width: 860px) {
  .nav-cta-desktop { display: none; }
  .nav-cta-mobile { display: inline-flex; }
}

@media (max-width: 640px) {
  .nav-lang-desktop { display: none; }
  .nav-lang-mobile { display: block; }
  .nav-login-desktop { display: none; }
  .nav-login-mobile { display: block; }
  .nav-row2 { display: none; }

  #site-nav.menu-open .nav-collapsible {
    display: flex; flex-direction: column; gap: 24px;
    position: fixed; inset: 64px 0 0 0; z-index: 60;
    background: var(--paper); padding: 24px var(--gutter); overflow-y: auto;
  }
  #site-nav.menu-open .nav-collapsible .mobile-extras {
    position: static; max-height: none; box-shadow: none; border: none; padding: 0; background: none;
  }
  #site-nav.menu-open .nav-row2 { display: block; padding: 0; border-top: none; }
  #site-nav.menu-open .nav-links { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 18px; padding: 0; }
  #site-nav.menu-open .nav-subgroup { border: none; padding: 0; flex-wrap: wrap; }
  #site-nav.menu-open .nav-dropdown { flex-direction: column; align-items: flex-start; width: 100%; gap: 0; }
  #site-nav.menu-open .nav-dropdown-toggle { position: absolute; right: 0; top: 0; }
  #site-nav.menu-open .nav-dropdown-menu {
    display: block; position: static; box-shadow: none; border: none; padding: 8px 0 0 4px;
    background: none; min-width: 0; width: 100%;
  }
  #site-nav.menu-open .nav-mega { width: 100%; }
  #site-nav.menu-open .nav-mega-trigger { display: block; width: 100%; text-align: left; padding: 0; }
  #site-nav.menu-open .nav-mega-pill { border: none; padding: 0; }
  #site-nav.menu-open .nav-mega-pill .nav-mega-trigger { padding: 0; }
  #site-nav.menu-open .nav-mega-panel {
    display: none; position: static; box-shadow: none; border: none; padding: 12px 0 0;
  }
  #site-nav.menu-open .nav-mega.open .nav-mega-panel { display: block; }
  #site-nav.menu-open .nav-mega-panel .container { padding: 0; }
}


/* ---------- 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, 3fr) minmax(0, 2fr); 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; }

/* Was min(90%, 1040px) — silently capped every divider/lede narrower than
   the container regardless of any inline max-width removal on the page. */
.intro-divider { max-width: 100%; }
.status-quo { border-top: 6px solid var(--ink); }
@media (max-width: 960px) {
  .status-quo .page-header-flex { text-align: center; }
  .status-quo .page-header-flex .lede { margin-left: auto; margin-right: auto; }
}

/* ---------- 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-radius: var(--radius-card); 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; text-decoration: none; }
a.bubble:hover { background: var(--paper-raised); border-color: var(--slate-light); }

/* Four-column pillars variant (Reisebüro "Leistungen") */
.pillars-structure-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); align-items: stretch; }
@media (max-width: 960px) { .pillars-structure-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pillars-structure-4 { grid-template-columns: 1fr; } }
.pillar:nth-child(4) { border-top-color: var(--turquoise); }

/* Checklist bullets with a green checkmark — used inside cards, article bodies and standalone sections */
ul.check-list { margin: 1em 0 0; padding: 0; list-style: none; }
ul.check-list li { padding-left: 22px; position: relative; margin-bottom: 0.55em; color: var(--slate); font-size: 0.92rem; }
ul.check-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--mint); font-weight: 700; }

/* ---------- Stakeholder tabs (readable without JS via the print override) ---------- */
.tab-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 2em; }
.tab-btn { font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; background: var(--paper-raised); border: 1px solid var(--line); color: var(--slate); padding: 10px 18px; border-radius: 999px; cursor: pointer; }
.tab-btn.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
@media print {
  .tab-nav { display: none; }
  .tab-panel { display: block !important; margin-bottom: 2em; }
}

/* ---------- Axis diagram (Servicetiefe × Selbstbedienung quadrant) ---------- */
.axis-diagram { max-width: 760px; margin: 2.4em auto 0; }
.axis-diagram svg { width: 100%; height: auto; }
.axis-diagram-card { background: var(--paper-raised); border-radius: var(--radius-card); padding: clamp(20px, 3vw, 36px); box-shadow: 0 24px 60px rgba(0,0,0,0.28); }

/* ---------- Betriebsmodell-Kompass (interactive tool) ---------- */
.compass-widget { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(22px, 4vw, 44px); max-width: 760px; margin: 2.4em auto 0; text-align: left; }
.compass-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 2em; }
.compass-progress-track { flex: 1; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.compass-progress-fill { height: 100%; width: 0%; background: var(--mint); border-radius: 999px; transition: width .25s ease; }
.compass-progress-label { font-family: var(--font-mono); font-size: 0.76rem; color: var(--slate); white-space: nowrap; }
.compass-question h3 { margin-bottom: 0.3em; }
.compass-question-hint { color: var(--slate); font-size: 0.88rem; margin-bottom: 1.2em; }
.compass-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 2em; list-style: none; padding: 0; }
.compass-option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; text-align: left; background: none; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); width: 100%; }
.compass-option:hover { border-color: var(--mint); }
.compass-option.selected { border-color: var(--mint); background: rgba(45,212,200,0.08); }
.compass-option input { margin-top: 3px; accent-color: var(--mint); flex-shrink: 0; }
.compass-nav { display: flex; justify-content: space-between; gap: 12px; }
.compass-result-headline { margin-bottom: 0.3em; }
.compass-result-bars { display: flex; flex-direction: column; gap: 14px; margin: 1.6em 0; }
.compass-bar-head { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; }
.compass-bar-track { height: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.compass-bar-fill { height: 100%; width: 0%; background: var(--mint); border-radius: 999px; transition: width .6s ease; }
.compass-bar-row.zero .compass-bar-fill { background: var(--slate-light); }
.compass-bar-row.zero .compass-bar-head { color: var(--slate-light); }
.compass-bar-note { font-size: 0.78rem; color: var(--slate-light); margin-top: 4px; }
.compass-reasoning ul, .compass-next-steps ul { margin: 0.6em 0 0; padding: 0; list-style: none; }
.compass-reasoning li, .compass-next-steps li { padding-left: 22px; position: relative; margin-bottom: 0.5em; color: var(--slate); }
.compass-reasoning li::before, .compass-next-steps li::before { content: "\2713"; position: absolute; left: 0; color: var(--mint); font-weight: 700; }
.compass-disclaimer { font-size: 0.85rem; color: var(--slate); background: var(--paper); border-left: 3px solid var(--cta); padding: 12px 16px; margin: 1.6em 0; }
.compass-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }
.compass-secondary-model { margin-top: 1.6em; padding-top: 1.6em; border-top: 1px dashed var(--line); }
.compass-share-note { font-size: 0.82rem; color: var(--slate); margin-top: 10px; }
.compass-noscript { padding: 24px; text-align: center; color: var(--slate); }


/* ---------- 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); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 24px); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } }
.card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 30px 26px; }
.card .num { font-family: var(--font-mono); color: var(--cta-ink); font-size: 0.8rem; letter-spacing: 0.08em; }
a.card { display: block; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.text-mint { color: var(--mint); }
#modelle .grid-2 .card { display: flex; flex-direction: column; }
#modelle .grid-2 .card .faq-item:last-of-type { margin-top: auto; }
a.card:hover { border-color: var(--slate-light); transform: translateY(-2px); }
.card .tag { display: inline-block; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); margin: 0.4em 0 0.6em; }

/* Problem/solution cards (e.g. Reisekosten "Herausforderungen"): red X badge
   next to the heading, dashed divider, green arrow leading into the fix. */
.card:has(.problem) h4 { display: flex; align-items: center; gap: 10px; }
.card:has(.problem) h4::before {
  content: "\2715"; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%; background: rgba(139,40,40,0.12); color: var(--red); font-size: 0.8rem; font-weight: 700;
}
.card .problem { color: var(--slate); font-size: 0.9rem; margin: 0 0 0.9em; padding-bottom: 0.9em; min-height: 2.6em; border-bottom: 1px dashed var(--line); }
.card .solution { color: var(--blue-ink); font-weight: 600; margin: 0; display: flex; align-items: flex-start; gap: 8px; }
.card .solution::before { content: "\2713"; color: var(--mint); font-weight: 700; flex-shrink: 0; }

.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: 200px; height: 200px; 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; }
.capture-error { margin: 10px auto 0; color: var(--red); font-size: 0.86rem; text-align: center; }

/* ---------- Two-step lead form (toggled in, no page reload) ---------- */
.lead-form-panel { text-align: left; max-width: 640px; margin: 28px auto 0; padding: 28px clamp(20px, 4vw, 36px); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-card); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 6px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field-wide { grid-column: 1 / -1; }
.form-field label { font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; color: var(--ink); }
.form-field input, .form-field textarea { padding: 0.8em 0.9em; border: 1px solid var(--line); background: var(--paper); font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); border-radius: var(--radius-btn); }
.form-field input:focus-visible, .form-field textarea:focus-visible { outline: 3px solid var(--cta-ink); outline-offset: 1px; }
.form-field textarea { resize: vertical; }
.phone-group { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.phone-group select { padding: 0.8em 0.6em; border: 1px solid var(--line); background: var(--paper); font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); border-radius: var(--radius-btn); }
.phone-group select:focus-visible { outline: 3px solid var(--cta-ink); outline-offset: 1px; }
.form-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: var(--slate); margin: 16px 0 0; cursor: pointer; }
.form-checkbox input { margin-top: 3px; flex-shrink: 0; }
.callback-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0 0 26px; }
.callback-fields[hidden] { display: none; }
.lead-form-error { margin: 16px 0 0; color: var(--red); font-size: 0.86rem; }
.lead-form-submit { margin-top: 22px; width: 100%; justify-content: center; }
.lead-form-success h4 { margin: 0 0 8px; }
.lead-form-success p { color: var(--slate); margin: 0 0 8px; }
@media (max-width: 640px) {
  .lead-form-grid, .callback-fields { grid-template-columns: 1fr; }
  .callback-fields { margin-left: 0; }
}

/* ---------- 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); }
.partner-logos { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; align-items: center; }
.partner-logos a { display: block; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px; padding: 12px 18px; }
.partner-logos img { height: 120px; width: auto; display: block; }
.footer-top .partner-logos { padding-top: 32px; border-top: 1px solid var(--line); }

/* Homepage "Kommt Ihnen das bekannt vor?" problem/solution list */
.qa-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; }
@media (max-width: 860px) { .qa-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .qa-list { grid-template-columns: 1fr; } }
.qa-q { font-family: var(--font-display); font-weight: 600; margin: 0 0 4px; }
.qa-a { color: var(--slate); margin: 0; }
/* 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; }
/* Global rule: any text+image split (hero-flex/page-header-flex) uses a
   consistent 60/40 ratio; sections with no image use the full container
   width instead of an arbitrary narrow max-width (see intro blocks below). */
.page-header-flex { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); 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-radius: var(--radius-card); border-top: 4px solid var(--cta); background: var(--paper); padding: 8px; overflow: hidden; }
.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; }

/* Navy/mint hero variant (Reisekosten, Reisebüro — matches the reference
   product-microsite look: dark navy gradient, mint eyebrow, white type). */
.hero-navy { background: linear-gradient(135deg, var(--ink) 0%, var(--deep) 100%); border-bottom-color: var(--mint); color: var(--paper); }
.hero-navy h1 { color: var(--paper); }
.hero-navy h1 em { color: var(--mint); }
.hero-navy p.lede { color: #CBD9DE; }
.hero-navy .eyebrow { color: var(--mint); }
.hero-navy .breadcrumb { color: #9FC9D6; }
.hero-navy .breadcrumb a { color: var(--paper); }
.hero-navy .hero-stat b { color: var(--paper); }
.hero-navy .hero-stat span { color: #CBD9DE; }

/* Hero illustration: a small "expense captured" mock card (Reisekosten hero) */
.hero-expense-card { background: var(--paper-raised); color: var(--ink); border-radius: 14px; padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,0.28); }
.expense-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.expense-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; background: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.expense-row strong { display: block; font-family: var(--font-display); font-size: 0.98rem; }
.expense-tag { display: block; font-size: 0.78rem; color: var(--slate); margin-top: 2px; }
.expense-amount-row { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 16px; }
.expense-amount { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.expense-status { font-size: 0.85rem; color: var(--slate); }

/* Savings-preview mockup (index.html #einsparrechner) — replaces the old
   interactive ROI calculator with a static illustrative card; figures are
   deliberately redacted (asterisks), not real example numbers. */
.savings-preview { display: flex; justify-content: center; margin-top: 40px; }
.savings-card { max-width: 380px; width: 100%; }
.savings-card-label { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 14px; }
.savings-card-highlight { color: var(--mint); }
.savings-card-bar { height: 8px; border-radius: 999px; background: var(--paper); overflow: hidden; margin: 16px 0; }
.savings-card-bar-fill { height: 100%; width: 68%; border-radius: 999px; background: var(--mint); }
.savings-card-footnote { font-size: 0.78rem; color: var(--slate); margin: 14px 0 0; }
.expense-badge { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; padding: 10px 14px; border-radius: 999px; }
.expense-badge-approved { background: rgba(63,191,149,0.15); color: var(--mint); }
.expense-badge-sync { background: rgba(28,173,168,0.15); color: var(--turquoise); }

/* Page-scoped mint accent theme (Reisekosten, Reisebüro): eyebrows + dark-section
   stat numbers use mint instead of the sitewide gold/cta accent. Main CTA buttons
   are unaffected — only opted-in secondary buttons use .btn-mint explicitly. */
body.theme-mint .eyebrow { color: var(--mint); }
body.theme-mint .surface-dark .hero-stat b,
body.theme-mint .surface-deep .hero-stat b { color: var(--mint); }

/* ---------- 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; }