/*
 * effectum.css — Shared styles for effectumgruppe.de
 * Single source of truth for: variables, reset, nav, footer, buttons,
 * section layouts, typography, common components.
 *
 * Each page file only contains page-specific CSS.
 */

/* ── RESET + VARIABLES ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── SCHRIFT ───────────────────────────────────────────────────────────
 * Figtree als Variable Font, lokal ausgeliefert. Keine Verbindung zu Google.
 * Eine Datei deckt alle Schnitte von 300 bis 900 ab. Zwei Zeichensatz-Bereiche:
 * latin wird immer geladen, latin-ext nur, wenn ein Zeichen daraus vorkommt.
 * Beim Austausch der Dateien neue Namen vergeben — siehe .htaccess (Cache).
 */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --navy:   #0B1F2E;
  /* Schatten-Skala (Standard — Seiten nutzen var(), nie rohe Werte) */
  --shadow-card:       0 2px 16px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 16px 48px rgba(0,0,0,0.09);
  --shadow-soft:       0 4px 32px rgba(0,0,0,0.06);
  /* Blaue Schatten-Skala (Navy-Karten) + Ring.
     ACHTUNG: hier stehen echte Werte, KEINE var()-Selbstreferenz. Eine Variable,
     die sich selbst referenziert, ist ungueltig und laesst jede box-shadow-Regel,
     die sie benutzt, komplett ausfallen. (Gefunden im Audit am 02.09.2026.) */
  --ring:              0 0 0 1px rgba(179,211,230,0.10);
  --ring-hover:        0 0 0 1px rgba(179,211,230,0.18);
  --shadow-navy-soft:  0 8px 28px rgba(11,31,46,0.14);
  --shadow-navy:       0 14px 40px rgba(11,31,46,0.20);
  --shadow-navy-hover: 0 22px 60px rgba(11,31,46,0.28);
  --navy2:  #0F2840;
  --blue:   #02679A;
  --blue2:  #3687B3;
  --gold:   #B29C79;
  /* Dunkleres Gold, ausschliesslich fuer Kleinschrift auf hellem Grund (WCAG AA, 5,2:1) */
  --gold-text: #7F6A42;
  /* Helleres Blau, ausschliesslich fuer Text auf dunklem Grund (WCAG AA) */
  --blue-on-dark: #5AA3C9;
  --text:   #2E2E2E;
  --white:  #FFFFFF;
  --muted:  #B3D3E6;
  --light:  #F2F4F6;
  --border: rgba(179,211,230,0.12);
  /* Rahmen-Skala (Werte-Audit 02.09.2026): zwei Stufen je Grund. */
  --border-stark:      rgba(179,211,230,0.35);
  --border-hell:       rgba(2,103,154,0.10);
  --border-hell-stark: rgba(2,103,154,0.20);
  /* Navy2 halbtransparent — Flaeche von hero-insight-, contact-info-, jump-nav-card. */
  --navy2-90: rgba(15,40,64,0.9);
  /* Eine Sperrung fuer alle Grossbuchstaben-Etiketten. */
  --tracking-label: 3px;
  /* Eine Karten-Geste: Hebung und Uebergang. Knoepfe haben eine eigene Sprache. */
  --hover-lift: translateY(-4px);
  --hover-transition: transform .25s, box-shadow .28s;
}

/* ── SPRUNGLINK (nur bei Tastaturfokus sichtbar) ──────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--blue); color: var(--white);
  padding: 12px 22px; border-radius: 0 0 8px 0;
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }
main:focus { outline: none; }

/* ── BASE ──────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

body {
  font-family: 'Figtree', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  font-size: 18px;
}

/* ── NAV ───────────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--navy);
  padding: 0 max(32px, calc((100% - 1400px) / 2));
  height: 92px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
}

.nav-links {
  display: flex; gap: 40px;
  list-style: none; align-items: center;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  transition: color .2s;
}

.nav-links a:hover  { color: var(--white); }
.nav-links a.active { color: var(--white); }

.nav-cta {
  background: var(--blue) !important;
  color: var(--white) !important;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600 !important;
}
.nav-cta:hover { background: var(--blue2) !important; }

/* ── NAV RIGHT GROUP ───────────────────────────────────────────────── */
.nav-right {
  display: flex; align-items: center; gap: 16px;
}

/* ── HAMBURGER TOGGLE ──────────────────────────────────────────────── */
.nav-toggle {
  display: none;
  background: none; border: none;
  cursor: pointer; padding: 8px 4px;
  flex-direction: column; gap: 5px; align-items: center;
}
.nav-toggle-bar {
  display: block; width: 24px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: transform .25s, opacity .2s;
}

/* ── MOBILE NAV PANEL ──────────────────────────────────────────────── */
.nav-mobile {
  display: none;
  position: fixed; top: 92px; left: 0; right: 0; z-index: 99;
  background: var(--navy);
  border-bottom: 1px solid var(--border);
}
.nav-mobile.open { display: block; }
.nav-mobile ul {
  list-style: none; margin: 0;
  padding: 8px 15% 14px;
  display: flex; flex-direction: column; gap: 0;
}
.nav-mobile ul li a {
  display: block; color: var(--muted);
  text-decoration: none; font-size: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(179,211,230,0.06);
  transition: color .2s;
}
.nav-mobile ul li:last-child a { border-bottom: none; }
.nav-mobile ul li a:hover { color: var(--white); }
.nav-mobile ul li a.nav-cta-mobile {
  color: var(--gold); font-weight: 700;
  background: none; padding: 9px 0; border-radius: 0;
}

/* ── BUTTONS ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; border-radius: 8px;
  font-weight: 600; transition: .2s;
}

.btn-primary {
  background: var(--blue); color: var(--white);
  padding: 18px 36px; font-size: 16px;
}
.btn-primary:hover { background: var(--blue2); transform: translateY(-2px); }

/* Grosser Abschluss-CTA, mittig. Vorher 10x als style= im Markup (Werte-Audit 02.09.2026). */
.btn.btn-gross { margin: 0 auto; font-size: 17px; padding: 20px 48px; }

/* Zentrierter CTA-Block unter einem Leistungsabschnitt. Vorher 6x als style= im Markup. */
.cta-zentriert { margin-top: 28px; text-align: center; }

.btn-primary-dark {
  background: var(--navy); color: var(--white);
  padding: 18px 36px; font-size: 16px;
}
.btn-primary-dark:hover { background: #163650; transform: translateY(-2px); }

.btn-outline {
  border: 1.5px solid var(--border-stark);
  color: var(--white); padding: 18px 36px;
  font-size: 16px; font-weight: 500;
}
.btn-outline:hover { border-color: var(--muted); background: rgba(179,211,230,0.06); }

.btn-outline-light {
  border: 1.5px solid var(--border-stark);
  color: var(--white); padding: 18px 36px;
  font-size: 16px; font-weight: 500;
  border-radius: 8px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; transition: .2s;
}
.btn-outline-light:hover { border-color: var(--muted); background: rgba(179,211,230,0.06); }

/* ── SECTION LAYOUTS ───────────────────────────────────────────────── */
.section      { padding: 88px max(15%, calc((100% - 1400px) / 2)); }
.section-bg   { padding: 88px max(15%, calc((100% - 1400px) / 2)); background: var(--light); }
.section-dark { padding: 88px max(15%, calc((100% - 1400px) / 2)); background: var(--navy); }

/* ── SECTION TYPOGRAPHY ────────────────────────────────────────────── */
.section-label {
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--gold-text);
  margin-bottom: 16px; display: block;
}

.section-label-light {
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: rgba(178,156,121,0.82);
  margin-bottom: 16px; display: block;
}

.section-title {
  font-size: clamp(30px, 3.5vw, 46px); font-weight: 700;
  color: var(--navy); line-height: 1.15; margin-bottom: 20px;
}

.section-title-light {
  font-size: clamp(30px, 3.5vw, 46px); font-weight: 700;
  color: var(--white); line-height: 1.15; margin-bottom: 20px;
}

/* Abschnitts-Ueberschrift OHNE Unterzeile: darunter folgt direkt ein Raster,
   deshalb mehr Luft. Werte-Audit 02.09.2026 — stand vorher 6x als style= im Markup. */
.section-title.ohne-unterzeile,
.section-title-light.ohne-unterzeile { margin-bottom: 52px; }

.section-sub {
  font-size: 19px; color: #666;
  line-height: 1.7; margin-bottom: 56px;
}

/* ── FACTS ROW (Über-mich teaser + Über-mich Seite) ────────────────── */
.facts-row {
  display: flex; flex-wrap: wrap; gap: 36px; padding: 22px 0; margin-bottom: 36px;
  border-top: 1px solid var(--border-hell);
  border-bottom: 1px solid var(--border-hell);
  align-items: flex-start;
}

.fact {
  display: flex; flex-direction: column;
}

.fact-value {
  display: block;
  font-size: 20px; font-weight: 700;
  color: var(--navy); margin-bottom: 4px; line-height: 1.2;
}

.fact-label {
  display: block;
  font-size: 11px; color: #6E6E6E;
  text-transform: uppercase; letter-spacing: var(--tracking-label); line-height: 1.2;
  white-space: nowrap;
}

/* ── GOLD CORNER BRACKETS (shared decoration) ─────────────────────── */
.has-corners {
  position: relative;
}
.has-corners::before {
  content: ''; position: absolute; top: 14px; left: 14px;
  width: 20px; height: 20px;
  border-top: 2.5px solid rgba(178,156,121,0.4);
  border-left: 2.5px solid rgba(178,156,121,0.4);
  pointer-events: none;
}
.has-corners::after {
  content: ''; position: absolute; bottom: 14px; right: 14px;
  width: 20px; height: 20px;
  border-bottom: 2.5px solid rgba(178,156,121,0.4);
  border-right: 2.5px solid rgba(178,156,121,0.4);
  pointer-events: none;
}

/* ── FOOTER ────────────────────────────────────────────────────────── */
footer {
  background: var(--navy);
  padding: 52px max(15%, calc((100% - 1400px) / 2));
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}

.footer-brand {
  color: rgba(255,255,255,0.47);
  font-size: 15px; font-weight: 300;
  letter-spacing: 4px; text-transform: lowercase;
}

.footer-links {
  display: flex; gap: 32px; list-style: none;
}

.footer-links a {
  color: rgba(255,255,255,0.47);
  text-decoration: none; font-size: 14px; transition: color .2s;
}
.footer-links a:hover { color: rgba(255,255,255,0.85); }

.footer-copy {
  font-size: 13px; color: rgba(255,255,255,0.47);
}

/* ── CTA SECTION (shared across pages) ─────────────────────────────── */
.cta-section {
  background: var(--navy); padding: 88px max(15%, calc((100% - 1400px) / 2));
  text-align: center; position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 640px; height: 640px;
  border: 1px solid var(--border-hell); border-radius: 50%;
  pointer-events: none;
}
.cta-section::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 420px; height: 420px;
  border: 1px solid var(--border-hell); border-radius: 50%;
  pointer-events: none;
}
.cta-inner-centered { position: relative; z-index: 1; }
.cta-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--gold); margin-bottom: 24px;
}
.cta-headline {
  font-size: clamp(34px, 4.5vw, 56px); font-weight: 700;
  color: var(--white); margin-bottom: 20px; line-height: 1.12;
}
.cta-body-center {
  font-size: 19px; color: var(--muted); margin-bottom: 52px;
  max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.7;
}
.cta-note {
  margin-top: 20px; font-size: 14px; color: rgba(179,211,230,0.6);
}

/* ── RESPONSIVE ────────────────────────────────────────────────────── */

/* Tablet (≤1000px) */
/* ── NAV-UMSCHALTPUNKT ────────────────────────────────────────────────
   Ab 1200px abwaerts das Menue-Symbol statt der Leiste. Grund: Zwischen
   1001 und 1190px passen Logo + 5 Links + CTA + Flagge nicht mehr in eine
   Zeile, die Punkte brechen zweizeilig um und der CTA ueberlappt (betrifft
   iPads im Querformat). Bewusst ein EIGENER Breakpoint: der 1000px-Block
   steuert das uebrige Layout und bleibt unberuehrt.               */
@media (max-width: 1200px) {
  nav { padding: 0 5%; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-mobile ul { padding: 8px 5% 14px; }
}

@media (max-width: 1000px) {
  .hero-ghost, .page-hero-ghost { display: none !important; }
  .section, .section-bg, .section-dark, .cta-section {
    padding-left: 5%; padding-right: 5%;
    padding-top: 72px; padding-bottom: 72px;
  }
  footer { padding-left: 5%; padding-right: 5%; }
  .section-sub { margin-bottom: 40px; }
}

/* Mobile (≤640px) */
@media (max-width: 640px) {
  body { font-size: 16px; }

  /* Nav */

  /* Sections */
  .section, .section-bg, .section-dark, .cta-section {
    padding-top: 56px; padding-bottom: 56px;
  }

  /* Footer */
  footer {
    flex-direction: column; align-items: center;
    text-align: center; gap: 20px; padding-top: 40px; padding-bottom: 40px;
  }
  .footer-links { gap: 20px; flex-wrap: wrap; justify-content: center; }

  /* Facts row */
  .facts-row { flex-wrap: wrap; gap: 20px; }
  .fact-label { white-space: normal; }

  /* Buttons */
  .btn-primary, .btn-primary-dark, .btn-outline, .btn-outline-light {
    padding: 16px 22px; font-size: 15px;
  }

  /* CTA */
  .cta-body-center { font-size: 17px; margin-bottom: 36px; }
  .section-sub { font-size: 17px; }
}

/* ── LANGUAGE TOGGLE ───────────────────────────────────────────────── */
.lang-btn {
  background: none;
  border: 1.5px solid var(--border-stark);
  color: var(--muted);
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color .2s, opacity .2s;
  opacity: .75;
}
.lang-btn:hover { opacity: 1; border-color: var(--muted); }
.lang-btn svg { display: block; border-radius: 2px; }
.lang-btn .flag-de { display: none; }
html[lang="en"] .lang-btn .flag-uk { display: none; }
html[lang="en"] .lang-btn .flag-de { display: block; }
html[lang="en"] .lang-btn { opacity: 1; border-color: rgba(179,211,230,0.55); }

/* Hide EN by default; hide DE when EN active */
.lang-en { display: none !important; }
html[lang="en"] .lang-de { display: none !important; }
html[lang="en"] .lang-en { display: block !important; }

/* Nav & footer spans MUST stay inline — block display breaks nav height
   and causes all page content to "jump" on language switch             */
html[lang="en"] nav .lang-en,
html[lang="en"] .nav-mobile .lang-en,
html[lang="en"] .footer-links .lang-en { display: inline !important; }

/* Preserve correct display types for other specific revealed elements */
html[lang="en"] .lang-en.btn,
html[lang="en"] .lang-en.weg-cta,
html[lang="en"] .lang-en.leistung-link { display: inline-flex !important; }
html[lang="en"] .lang-en.hero-ctas { display: flex !important; }

/* ═══════════════════════════════════════════════════════════════════
   PAGE-HERO — DER Standard für alle Unterseiten (einmal hier, nirgends
   sonst). Seiten dürfen einzelne Werte gezielt überschreiben (z. B.
   kontakt: min-height 60vh) — aber nie den Block neu definieren.
   ═══════════════════════════════════════════════════════════════════ */
.page-hero {
  background: var(--navy);
  padding: 92px max(15%, calc((100% - 1400px) / 2)) 0;
  min-height: 68vh;
  display: grid; grid-template-columns: 55% 45%;
  align-items: start;   /* fest oben verankert — Karte rechts steht auf JEDER Seite gleich */
  position: relative; overflow: hidden;
}
.page-hero-ghost {
  position: absolute; top: 80px; left: 5%;
  font-size: clamp(110px, 16vw, 200px); font-weight: 800; line-height: 1;
  color: rgba(255,255,255,0.045);
  white-space: nowrap; pointer-events: none; user-select: none;
  letter-spacing: -4px; z-index: 0;
}
.page-hero-content { padding: 224px 24px 80px 0; position: relative; z-index: 1; }
.page-hero-right   { padding: 224px 0 80px 40px; position: relative; z-index: 1; }
.page-hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 28px; display: block;
}
.page-hero-headline {
  font-size: clamp(48px, 7vw, 88px); font-weight: 800;
  color: var(--white); line-height: 0.95; margin-bottom: 12px;
}
.page-hero-headline.force-nowrap { white-space: nowrap; }
.page-hero-gold-line { width: 44px; height: 2px; background: var(--gold); margin: 28px 0; }
.page-hero-sub  { font-size: 20px; color: var(--muted); line-height: 1.7; max-width: 600px; margin-bottom: 40px; }
.page-hero-body { font-size: 17px; color: var(--muted); line-height: 1.85; max-width: 520px; }
.page-hero-sub-xl {
  font-size: clamp(22px, 2.8vw, 34px); font-weight: 300; color: var(--white);
  line-height: 1.3; margin-bottom: 24px; max-width: none;
}

/* Insight-Karte rechts im Hero (Standard-Baustein) */
.hero-insight-card {
  background: var(--navy2-90); border-radius: 24px; padding: 44px 40px;
  border: 1px solid var(--border);
  box-shadow: var(--ring), var(--shadow-navy);
  position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .28s;
}
.hero-insight-card:hover {
  transform: var(--hover-lift);
  box-shadow: var(--ring-hover), var(--shadow-navy-hover);
}
.hero-insight-card::before {
  content: ''; position: absolute; top: 14px; left: 14px;
  width: 20px; height: 20px;
  border-top: 2.5px solid rgba(178,156,121,0.4); border-left: 2.5px solid rgba(178,156,121,0.4);
}
.hero-insight-card::after {
  content: ''; position: absolute; bottom: 14px; right: 14px;
  width: 20px; height: 20px;
  border-bottom: 2.5px solid rgba(178,156,121,0.4); border-right: 2.5px solid rgba(178,156,121,0.4);
}
.hero-insight-label {
  font-size: 10px; font-weight: 800; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 24px;
}
.hero-insight-items { list-style: none; display: flex; flex-direction: column; }
.hero-insight-items li {
  font-size: 16px; color: var(--muted); line-height: 1.7;
  padding: 18px 0; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 14px;
}
.hero-insight-items li:last-child { border-bottom: none; padding-bottom: 0; }
.hero-insight-items li::before { content: '—'; color: var(--blue2); font-weight: 300; flex-shrink: 0; }

/* Anker-Sprungziele nicht unter der fixen Nav verschwinden lassen */
[id] { scroll-margin-top: 116px; }

/* ── AUFKLAPP-DETAILS (Standard-Baustein, springt nicht) ──────────────
   <details class="ef-details"><summary class="ef-toggle">…</summary>…
   Kein transform auf dem Container — Klick verschiebt nichts.        */
.ef-details { border-top: 1px solid var(--border-hell); margin-top: 24px; }
.ef-toggle {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0; font-size: 14px; font-weight: 700; color: var(--blue);
  user-select: none;
}
.ef-toggle::-webkit-details-marker { display: none; }
.ef-toggle-icon {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--border-hell-stark); color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; transition: transform .2s, background .2s;
}
.ef-details[open] .ef-toggle-icon { transform: rotate(45deg); background: rgba(2,103,154,0.06); }
.ef-details-body { padding: 4px 0 12px; }

/* Responsive für den Hero-Standard */
@media (max-width: 1000px) {
  .page-hero { padding: 92px 5% 0; min-height: auto; grid-template-columns: 1fr; }
  .page-hero-content { padding: 64px 0; }
  .page-hero-right { padding: 0 0 64px 0; }
  .page-hero-headline.force-nowrap { white-space: normal; }
}
@media (max-width: 640px) {
  .page-hero-content { padding: 48px 0 40px; }
  .page-hero-right { display: none; }
}

/* ── GETEILTE KOMPONENTEN (auf mehreren Seiten genutzt — nur hier pflegen) ── */
.legal-content { padding: 80px max(15%, calc((100% - 1400px) / 2)) 100px; font-size: 17px; }
.legal-inline { font-size: 16px; color: #555; line-height: 1.9; }
.legal-inline a { color: var(--blue); }
.legal-inline p { margin-bottom: 16px; }
.legal-inline p:last-child { margin-bottom: 0; }
.legal-section { margin-bottom: 56px; }
.legal-section-title { font-size: 13px; font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-text); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border-hell); }
.legal-section:last-child { margin-bottom: 0; }
.muster-closing { font-size: 20px; color: #444; line-height: 1.85; font-weight: 500; padding: 32px 44px; border-left: 3px solid var(--gold); background: rgba(178,156,121,0.05); border-radius: 0 12px 12px 0; }
.muster-dash { color: var(--blue-on-dark); font-weight: 300; font-size: 16px; flex-shrink: 0; line-height: 1.75; margin-top: 1px; }
.muster-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 48px; }
.muster-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 56px; }
.muster-intro-text { font-size: 19px; color: #555; line-height: 1.8; }
.muster-item { background: var(--navy); border-radius: 16px; padding: 24px 28px; display: flex; align-items: flex-start; gap: 16px; position: relative; overflow: hidden; transition: var(--hover-transition); }
.muster-item::after { content: ''; position: absolute; bottom: 14px; right: 14px; width: 20px; height: 20px; border-bottom: 2.5px solid rgba(178,156,121,0.4); border-right: 2.5px solid rgba(178,156,121,0.4); pointer-events: none; }
.muster-item::before { content: ''; position: absolute; top: 14px; left: 14px; width: 20px; height: 20px; border-top: 2.5px solid rgba(178,156,121,0.4); border-left: 2.5px solid rgba(178,156,121,0.4); pointer-events: none; }
.muster-item:hover { transform: var(--hover-lift); box-shadow: var(--ring-hover), var(--shadow-navy-hover); }
.muster-text { font-size: 16px; color: var(--muted); line-height: 1.75; }
.page-header { background: var(--navy); padding: 92px max(15%, calc((100% - 1400px) / 2)) 72px; position: relative; overflow: hidden; }
.page-header-content { position: relative; z-index: 1; padding-top: 48px; }
.page-header-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold); margin-bottom: 20px; display: block; }
.page-header-ghost { position: absolute; top: 80px; left: 5%; font-size: clamp(110px, 16vw, 200px); font-weight: 800; line-height: 1; color: rgba(255,255,255,0.025); white-space: nowrap; pointer-events: none; user-select: none; letter-spacing: -4px; }
.page-header-gold-line { width: 44px; height: 2px; background: var(--gold); margin: 24px 0 0; }
.page-header-title { font-size: clamp(36px, 5vw, 64px); font-weight: 800; color: var(--white); line-height: 1.05; }
.weg-card { border-radius: 24px; padding: 44px 40px; display: flex; flex-direction: column; gap: 20px; position: relative; overflow: hidden; transition: var(--hover-transition); }
.weg-card:hover { transform: var(--hover-lift); box-shadow: var(--ring-hover), var(--shadow-navy-hover); }

/* ── Weitere geteilte Regeln (>=2 Seiten identisch) ── */
.ergebnis-closing { background: var(--navy); border-radius: 24px; padding: 44px 40px; position: relative; overflow: hidden; box-shadow: var(--ring), var(--shadow-navy); transition: transform .25s, box-shadow .28s; }
.ergebnis-closing p { font-size: 18px; color: var(--muted); line-height: 1.8; margin-bottom: 12px; }
.ergebnis-closing p:last-child { margin-bottom: 0; }
.ergebnis-closing strong { color: var(--white); font-weight: 600; }
.ergebnis-closing-label { font-size: 10px; font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold); margin-bottom: 20px; display: block; }
.ergebnis-closing:hover { transform: translateY(-4px); box-shadow: var(--ring-hover), var(--shadow-navy-hover); }
.ergebnis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.ergebnis-icon { width: 28px; height: 28px; flex-shrink: 0; background: rgba(2,103,154,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.ergebnis-icon::after { content: '→'; font-size: 12px; color: var(--blue); font-weight: 700; }
.ergebnis-list { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.ergebnis-list li { display: flex; align-items: flex-start; gap: 16px; font-size: 17px; color: var(--text); line-height: 1.65; padding-bottom: 20px; border-bottom: 1px solid var(--border-hell); }
.ergebnis-list li:last-child { border-bottom: none; padding-bottom: 0; }
.format-body { font-size: 16px; color: #666; line-height: 1.75; flex-grow: 1; }
.format-card { background: var(--white); border-radius: 24px; padding: 44px 40px; border-bottom: 3px solid transparent; box-shadow: var(--shadow-card); transition: border-color .25s, var(--hover-transition); position: relative; display: flex; flex-direction: column; gap: 16px; }
.format-card:hover { border-bottom-color: var(--blue); transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.format-number { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--gold-text); }
.format-title { font-size: 20px; font-weight: 700; color: var(--navy); line-height: 1.25; }
.img-wrap { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--ring), var(--shadow-navy); transition: transform .25s, box-shadow .28s; }
.img-wrap > picture, .hero-photo-wrap picture { display: block; width: 100%; height: 100%; }
.img-wrap::after { content: ''; position: absolute; bottom: 14px; right: 14px; width: 20px; height: 20px; border-bottom: 2.5px solid rgba(178,156,121,0.4); border-right: 2.5px solid rgba(178,156,121,0.4); z-index: 2; pointer-events: none; }
.img-wrap::before { content: ''; position: absolute; top: 14px; left: 14px; width: 20px; height: 20px; border-top: 2.5px solid rgba(178,156,121,0.4); border-left: 2.5px solid rgba(178,156,121,0.4); z-index: 2; pointer-events: none; }
.img-wrap:hover { transform: translateY(-4px); box-shadow: var(--ring-hover), var(--shadow-navy-hover); }
.nicht-big { font-size: clamp(36px, 4.5vw, 56px); font-weight: 800; color: var(--white); line-height: 1.05; margin-bottom: 24px; }
.nicht-big .gold { color: var(--gold); }
.nicht-closer { padding-top: 32px; border-top: 1px solid var(--border); font-size: 20px; color: var(--white); font-weight: 600; line-height: 1.7; }
.nicht-gold-line { width: 44px; height: 2px; background: var(--gold); margin-bottom: 28px; }
.nicht-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-bottom: 40px; }
.nicht-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 17px; color: var(--muted); line-height: 1.65; padding: 18px 0; border-bottom: 1px solid var(--border); }
.nicht-list li::before { content: '×'; color: rgba(178,156,121,0.5); font-weight: 700; font-size: 18px; flex-shrink: 0; line-height: 1.6; }
.nicht-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.nicht-list li a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(178,156,121,0.4); padding-bottom: 1px; transition: border-color .18s, color .18s; }
.nicht-list li a:hover { color: var(--white); border-bottom-color: var(--white); }
.nicht-sub { font-size: 18px; color: var(--muted); line-height: 1.8; max-width: 100%; margin-bottom: 52px; }
.weg-card::after { content: ''; position: absolute; bottom: 14px; right: 14px; width: 20px; height: 20px; border-bottom: 2.5px solid rgba(178,156,121,0.4); border-right: 2.5px solid rgba(178,156,121,0.4); pointer-events: none; }
.weg-card::before { content: ''; position: absolute; top: 14px; left: 14px; width: 20px; height: 20px; border-top: 2.5px solid rgba(178,156,121,0.4); border-left: 2.5px solid rgba(178,156,121,0.4); pointer-events: none; }
.zwei-wege { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.ergebnis-closing::after { content: ''; position: absolute; bottom: 14px; right: 14px; width: 20px; height: 20px; border-bottom: 2.5px solid rgba(178,156,121,0.4); border-right: 2.5px solid rgba(178,156,121,0.4); pointer-events: none; }
.ergebnis-closing::before { content: ''; position: absolute; top: 14px; left: 14px; width: 20px; height: 20px; border-top: 2.5px solid rgba(178,156,121,0.4); border-left: 2.5px solid rgba(178,156,121,0.4); pointer-events: none; }
.format-card::after { content: ''; position: absolute; bottom: 14px; right: 14px; width: 20px; height: 20px; border-bottom: 2.5px solid rgba(178,156,121,0.4); border-right: 2.5px solid rgba(178,156,121,0.4); pointer-events: none; }
.format-card::before { content: ''; position: absolute; top: 14px; left: 14px; width: 20px; height: 20px; border-top: 2.5px solid rgba(178,156,121,0.4); border-left: 2.5px solid rgba(178,156,121,0.4); pointer-events: none; }


/* Roter Faden — ein definierter naechster Schritt je Seite */
.weiter-line { max-width: 1200px; margin: 0 auto; padding: 8px 32px 64px; text-align: center; }
.weiter-line p { font-size: 15px; color: var(--muted); letter-spacing: 0.01em; }
.weiter-line a { color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(2,103,154,0.28); padding-bottom: 2px; transition: border-color .18s, color .18s; }
.weiter-line a:hover { color: var(--blue2); border-bottom-color: var(--blue2); }
.weiter-line-dark { background: var(--navy); max-width: none; margin: 0; padding: 8px max(15%, calc((100% - 1200px) / 2)) 64px; }
.weiter-line-dark p { color: var(--muted); }
.weiter-line-dark a { color: var(--gold); border-bottom-color: rgba(178,156,121,0.4); }
.weiter-line-dark a:hover { color: var(--white); border-bottom-color: var(--white); }
@media (max-width: 720px) { .weiter-line { padding: 8px 20px 48px; } .weiter-line-dark { padding: 8px 20px 48px; } }

/* FAQ zweispaltig auf breiten Screens */
.faq-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
@media (max-width: 900px) { .faq-list { grid-template-columns: 1fr; } }

/* ── REFERENZEN-BAND (Kundenlogos, entfärbt; Farbe bei Hover) ──────── */
.ref-band {
  padding: 56px max(15%, calc((100% - 1400px) / 2));
  background: var(--light); text-align: center;
}
.ref-band-label {
  font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--gold-text);
  margin-bottom: 38px; display: block;
}
.ref-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 40px 44px; align-items: center;
  max-width: 940px; margin: 0 auto;
}
.ref-logo { display: flex; align-items: center; justify-content: center; height: 38px; }
.ref-logo img {
  max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: 4px;
  filter: grayscale(1) contrast(0.5) brightness(0.85);
  opacity: 0.32;
  transition: filter .35s ease, opacity .35s ease;
}
.ref-logo:hover img { filter: none; opacity: 1; }
@media (hover: none) {
  .ref-logo img { filter: grayscale(1) contrast(0.5) brightness(0.85); opacity: 0.48; }
}
@media (max-width: 1000px) {
  .ref-band { padding: 52px 5%; }
  .ref-grid { grid-template-columns: repeat(4, 1fr); gap: 30px 28px; }
  .ref-logo { height: 32px; }
}
@media (max-width: 600px) {
  .ref-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 20px; }
  .ref-logo { height: 28px; }
}

.footer-links a .ico-li {
  width: 14px; height: 14px; margin-right: 7px;
  vertical-align: -2px; fill: currentColor;
}