/* ══════════════════════════════════════════════════════════════════════════
   GRUNOW CONSULTING — Design System
   Editorial, data-driven, dark anthracite/copper/gold. No templates.
   ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Surfaces */
  --bg:            #0a0a0b;
  --bg-1:          #111113;
  --bg-2:          #18181b;
  --bg-3:          #202023;
  --glass:         rgba(255,255,255,0.035);
  --glass-strong:  rgba(255,255,255,0.06);
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);

  /* Brand */
  --copper:        #b8733f;
  --copper-light:  #d99a5f;
  --copper-dim:    #7a4c2a;
  --gold:          #d9b169;
  --gold-light:    #edd39a;
  --gold-dim:      #8a7145;

  /* Text */
  --text-0:  #f6f5f2;
  --text-1:  #c9c7c1;
  --text-2:  #8f8d87;
  --text-3:  #5e5c58;

  /* Status (used sparingly, KPI panels only) */
  --ok:     #7fae86;
  --warn:   #cf9f4c;
  --crit:   #b3624f;

  --radius-lg: 28px;
  --radius:    18px;
  --radius-sm: 11px;
  --max-w:     1360px;
  --max-w-text: 640px;
  --nav-h:     76px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

html { scroll-behavior: auto; font-size: 16px; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Ambient noise + vignette, applied once to body for the whole page */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(184,115,63,0.08), transparent 60%),
              radial-gradient(ellipse 60% 50% at 100% 100%, rgba(217,177,105,0.05), transparent 60%);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--text-0); letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; background: none; border: none; color: inherit; cursor: pointer; }

::selection { background: var(--copper); color: #0a0a0b; }

.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; }
@media (max-width: 720px) { .container { padding: 0 22px; } }

/* ── Fluid type scale ─────────────────────────────────────────────────── */
.t-hero    { font-size: clamp(2.8rem, 6.2vw, 6.4rem); line-height: 0.98; letter-spacing: -0.02em; }
.t-hero-long { font-size: clamp(2.2rem, 4.4vw, 4.6rem); line-height: 1.06; } /* für längere Hero-Zeilen ohne harte Umbrüche */
.t-display { font-size: clamp(2.2rem, 4.4vw, 4.2rem); line-height: 1.03; letter-spacing: -0.02em; }
.t-h2      { font-size: clamp(1.9rem, 3.2vw, 3.1rem); line-height: 1.08; letter-spacing: -0.015em; }
.t-h3      { font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.2; }
.t-lead    { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.55; color: var(--text-2); font-weight: 400; }
.t-body    { font-size: 1rem; line-height: 1.7; color: var(--text-1); }
.t-mono    { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }

.text-max { max-width: var(--max-w-text); }

/* ── Kicker / eyebrow ─────────────────────────────────────────────────── */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--copper-light); margin-bottom: 20px;
}
.kicker::before { content: ''; width: 22px; height: 1px; background: linear-gradient(90deg, var(--copper), transparent); }

/* ── USP-Leiste ───────────────────────────────────────────────────────── */
.usp-bar { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-2); }
.usp-bar-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 16px; padding: 18px 40px;
}
.usp-item {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2); white-space: nowrap;
}
.usp-sep { color: var(--copper-light); font-size: 0.8rem; }
@media (max-width: 640px) { .usp-sep { display: none; } .usp-bar-inner { padding: 16px 22px; } }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: 100px;
  font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--copper-light), var(--copper));
  color: #0d0904;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 12px 30px -10px rgba(184,115,63,0.55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 18px 40px -10px rgba(184,115,63,0.7); }
.btn-ghost {
  background: var(--glass); border: 1px solid var(--border); color: var(--text-0);
  backdrop-filter: blur(20px);
}
.btn-ghost:hover { background: var(--glass-strong); border-color: var(--border-strong); transform: translateY(-2px); }
.btn-arrow { display: inline-block; transition: transform 0.35s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ── Glass panel ──────────────────────────────────────────────────────── */
.glass {
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(24px) saturate(140%);
  border-radius: var(--radius);
}

/* ── Navigation (floating) ────────────────────────────────────────────── */
.nav-wrap { position: fixed; top: 18px; left: 0; right: 0; z-index: 200; display: flex; justify-content: center; padding: 0 20px; pointer-events: none; }
nav {
  pointer-events: auto;
  width: 100%; max-width: 1180px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 10px 10px 10px 22px;
  background: rgba(14,14,16,0.6);
  border: 1px solid var(--border);
  border-radius: 100px;
  backdrop-filter: blur(22px) saturate(160%);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}
nav.nav-scrolled { background: rgba(10,10,11,0.86); border-color: var(--border-strong); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6); }

.nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--text-0); }
.nav-logo-icon { width: 26px; height: 26px; object-fit: contain; }
.nav-logo .dot { color: var(--copper-light); margin: 0 2px; }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a, .nav-links .nav-dd-toggle {
  display: flex; align-items: center; gap: 5px;
  padding: 9px 15px; border-radius: 100px;
  font-size: 0.87rem; font-weight: 500; color: var(--text-2);
  transition: color 0.25s ease, background 0.25s ease;
  cursor: pointer;
}
.nav-links a:hover, .nav-links .nav-dd-toggle:hover, .nav-links a.nav-active { color: var(--text-0); background: var(--glass-strong); }
.nav-dd { position: relative; }
.nav-dd-menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 240px; padding: 10px; list-style: none;
  background: rgba(16,16,18,0.94); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  backdrop-filter: blur(24px);
  opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dd-menu a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; color: var(--text-1); }
.nav-dd-menu a:hover { background: var(--glass-strong); color: var(--text-0); }

.nav-cta { padding: 10px 20px; font-size: 0.85rem; }
.nav-mobile-btn { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 100px; background: var(--glass-strong); }

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-mobile-btn { display: flex; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: calc(var(--nav-h) + 40px) 0 100px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center; padding-top: 96px; /* Headline+Logo in die Viewport-Mitte rücken */ }
@media (max-width: 980px) { .hero-grid { padding-top: 0; } }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero-logo-wrap { order: -1; min-height: 300px; } .hero-logo-stage, .hero-logo-reflection { width: min(230px, 62%); } .hero-logo-reflection { height: 70px; } .hero-logo-halo { width: 340px; height: 340px; } }

.hero-kicker-row { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.hero-live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--copper-light); }
.hero-live-dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--copper-light); animation: livePulse 2.4s var(--ease-in-out) infinite; }
@keyframes livePulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }

.hero h1 { margin-bottom: 26px; }
.hero h1 em { font-style: italic; color: var(--copper-light); font-weight: 400; }
.hero-sub { max-width: 520px; margin-bottom: 40px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; }

.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.hero-stat-num { font-family: var(--font-display); font-size: 1.9rem; color: var(--text-0); font-weight: 500; }
.hero-stat-num .unit { font-size: 1.1rem; color: var(--copper-light); }
.hero-stat-label { font-size: 0.78rem; color: var(--text-3); margin-top: 2px; }

/* ── Hero-Intro: "Was wäre, wenn…"-Sequenz vor dem Willkommen-Panel ────────
   Ohne JS/GSAP (oder bei reduced-motion) bleibt .hero-intro im normalen
   Textfluss — alle vier Panels stehen einfach untereinander, nichts ist
   verborgen. Erst app.js schaltet mit .is-pinned in den überlagerten,
   scroll-gekoppelten Modus (siehe Kommentar dort). */
.hero-intro { position: relative; }
.hero-intro-panel:not(:last-child) { margin-bottom: 44px; }
.hero-intro-q {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.9rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--text-1);
  max-width: 600px;
}
.hero-intro-q em { font-style: italic; color: var(--copper-light); font-weight: 400; }
.hero-intro.is-pinned { min-height: 440px; }
.hero-intro.is-pinned .hero-intro-panel {
  position: absolute; inset: 0; margin-bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0;
}
.hero-intro.is-pinned .hero-intro-panel[data-panel="0"] { opacity: 1; }
@media (max-width: 980px) { .hero-intro.is-pinned { min-height: 380px; } }

/* Hero-Logo: großes Metall-Oktaeder mit Scroll-Sheen und Spiegelung */
/* Logo-Mitte optisch an der Hero-Headline ausgerichtet (statt Spaltenmitte) */
.hero-logo-wrap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 480px; transform: translateY(-96px); }
@media (max-width: 980px) { .hero-logo-wrap { transform: none; } }
.hero-logo-halo {
  position: absolute; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184,115,63,0.22) 0%, rgba(217,177,105,0.08) 40%, transparent 68%);
  filter: blur(10px); pointer-events: none;
}
.hero-logo-stage {
  position: relative; width: min(380px, 82%);
  animation: heroLogoFloat 8s ease-in-out infinite;
  will-change: transform;
}
@keyframes heroLogoFloat {
  0%, 100% { transform: translateY(12px); }
  50%      { transform: translateY(-10px); }
}
.hero-logo-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55)) drop-shadow(0 0 40px rgba(184,115,63,0.25)); user-select: none; }
.hero-logo-sheen {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: url('logo-icon.png?v=2'); mask-image: url('logo-icon.png?v=2');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,244,224,0.0) 42%,
    rgba(255,244,224,0.75) 50%,
    rgba(255,244,224,0.0) 58%,
    transparent 70%);
  background-size: 300% 300%;
  background-position: 120% 0;
  mix-blend-mode: screen;
}
/* Angedeuteter Boden: elliptischer Glanz + feine Bodenlinie mit wanderndem
   Lichtreflex ("schimmerndes Wasser"). */
.hero-logo-floor {
  position: absolute; left: 50%; bottom: 110px;
  width: min(400px, 86%); height: 84px; pointer-events: none;
  background: radial-gradient(ellipse 50% 46% at 50% 50%, rgba(217,154,95,0.38), rgba(184,115,63,0.10) 58%, transparent 76%);
  filter: blur(14px);
  transform: translateX(-50%) scaleX(1.08);
  opacity: 0.95;
}
/* Wasserlinie: feine Kante, deren Lichtreflex per animiertem background-position
   über die Kante wandert (zweite Ebene — die feste Randabblendung — bleibt fix,
   deshalb bekommt sie in der Animation immer denselben "0 0"-Wert mit). */
.hero-logo-floor::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(237,211,154,0.55) 18%, rgba(217,154,95,0.2) 30%, rgba(217,154,95,0.2) 70%, rgba(237,211,154,0.55) 82%, transparent),
    linear-gradient(90deg, transparent, rgba(217,154,95,0.35) 30%, rgba(217,154,95,0.35) 70%, transparent);
  background-size: 300% 100%, 100% 100%;
  background-position: 200% 0, 0 0;
  animation: waterlineSweep 6s linear infinite;
}
@keyframes waterlineSweep {
  0%   { background-position: 200% 0, 0 0; }
  100% { background-position: -200% 0, 0 0; }
}

/* Spiegelung: bewegt sich gegenläufig zum Logo (Mirror-Physik — steigt das
   Logo, "sinkt" die Spiegelung optisch tiefer ins Wasser, und umgekehrt),
   selbe Dauer wie .hero-logo-stage, damit beide synchron bleiben. */
.hero-logo-reflection {
  position: relative; width: min(380px, 82%); height: 150px; overflow: hidden; margin-top: 2px; pointer-events: none;
  animation: heroLogoReflectionFloat 8s ease-in-out infinite;
  will-change: transform;
  /* Ausblendung liegt bewusst auf dem ungespiegelten Container: auf dem
     geflippten SVG würde der Verlauf mitgespiegelt und liefe nach oben aus
     (das erzeugte die harte Unterkante). */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.55) 45%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.55) 45%, transparent 92%);
}
@keyframes heroLogoReflectionFloat {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(5px); }
}
/* Spiegelung als SVG-Bild: der Wellenfilter läuft SVG-intern und damit
   zuverlässig — ein fehlschlagender CSS-url()-Filter hätte das Element
   sonst komplett unsichtbar gemacht (genau das war der Bug).
   translateY(10.75%): kompensiert den transparenten Unterrand des PNGs
   (Inhalt endet bei y=714/800), damit die gespiegelte Unterkante des
   Oktaeders direkt an der Wasserlinie beginnt. Unter scaleY(-1) wirkt
   positives translateY visuell nach oben. */
.hero-reflection-svg {
  display: block; width: 100%; height: auto;
  transform: scaleY(-1) translateY(calc(10.75% + 12px));
  opacity: 0.52;
}

/* Scroll cue */
.scroll-cue { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0.6; }
.scroll-cue-line { width: 1px; height: 34px; background: linear-gradient(var(--copper-light), transparent); animation: cueFlow 1.8s var(--ease-in-out) infinite; }
@keyframes cueFlow { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.01% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION SCAFFOLDING
   ══════════════════════════════════════════════════════════════════════════ */
section { position: relative; padding: 150px 0; }
@media (max-width: 720px) { section { padding: 100px 0; } }
.section-head { max-width: 780px; margin-bottom: 80px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal-mask { clip-path: inset(0 0 100% 0); opacity: 0; transform: translateY(16px); transition: clip-path 0.9s var(--ease-out), opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }

.reveal-up.is-in { opacity: 1; transform: translateY(0); }
.reveal-mask.is-in { clip-path: inset(0 0 0% 0); opacity: 1; transform: translateY(0); }
.reveal-scale.is-in { opacity: 1; transform: scale(1); }

/* ══════════════════════════════════════════════════════════════════════════
   GOS SHOWCASE
   ══════════════════════════════════════════════════════════════════════════ */
.gos-section { background: var(--bg-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.gos-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: end; margin-bottom: 70px; }
@media (max-width: 900px) { .gos-head { grid-template-columns: 1fr; gap: 24px; } }

.gos-lead { display: flex; flex-direction: column; gap: 14px; }
.gos-lead-strong { color: var(--text-1); font-weight: 500; }

.gos-panel {
  position: relative; border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: linear-gradient(165deg, var(--bg-2) 0%, var(--bg) 100%);
  overflow: hidden; padding: 4px;
}
.gos-panel-inner { position: relative; border-radius: calc(var(--radius-lg) - 4px); background: var(--bg); padding: 32px; overflow: hidden; }
.gos-panel-glow { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(184,115,63,0.16), transparent 70%); top: -200px; right: -150px; pointer-events: none; }

.gos-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.gos-topbar-left { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }
.gos-dot-row { display: flex; gap: 6px; }
.gos-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }

.gos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
@media (max-width: 720px) { .gos-grid { grid-template-columns: repeat(2, 1fr); } }
.gos-kpi { background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; }
.gos-kpi-label { font-size: 0.7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.gos-kpi-val { font-family: var(--font-display); font-size: 1.7rem; color: var(--text-0); display: flex; align-items: baseline; gap: 4px; }
.gos-kpi-val .kpi-unit { font-size: 0.9rem; color: var(--copper-light); }
.gos-kpi-bar { height: 3px; background: var(--bg-3); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.gos-kpi-bar-fill { height: 100%; background: linear-gradient(90deg, var(--copper), var(--gold)); border-radius: 3px; width: 0%; transition: width 1.4s var(--ease-out); }

.gos-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
@media (max-width: 720px) { .gos-row { grid-template-columns: 1fr; } }
.gos-card { background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px; }
.gos-card-title { font-size: 0.78rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; display: flex; justify-content: space-between; }

.gos-heat { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.gos-heat-cell { aspect-ratio: 1; border-radius: 3px; background: var(--bg-3); }

.gos-doc-lines { display: flex; flex-direction: column; gap: 11px; }
.gos-doc-line { height: 7px; border-radius: 4px; background: var(--bg-3); position: relative; overflow: hidden; }
.gos-doc-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(217,177,105,0.35), transparent); transform: translateX(-100%); animation: docScan 3.2s var(--ease-in-out) infinite; }
.gos-doc-lines.motion-paused .gos-doc-line::after { animation-play-state: paused; }
.gos-doc-line.w60 { width: 60%; } .gos-doc-line.w70 { width: 70%; } .gos-doc-line.w75 { width: 75%; }
.gos-doc-line.w85 { width: 85%; } .gos-doc-line.w90 { width: 90%; } .gos-doc-line.w95 { width: 95%; }
@keyframes docScan { to { transform: translateX(220%); } }
.gos-doc-hl {
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--gold-light);
  border-left: 2px solid var(--copper); padding: 8px 12px; margin: 4px 0;
  background: linear-gradient(90deg, rgba(184,115,63,0.12), transparent 80%);
  border-radius: 0 6px 6px 0;
}

/* GOS-Bühne: Fragmente als gestaltete Collage — echte Überlappung,
   Ebenen-Schatten und minimale Rotationen, damit der Versatz eindeutig
   als Komposition liest (nicht als Ausrichtungsfehler). */
.gos-stage {
  position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr;
  align-items: start; padding: 18px 0 26px;
}
.gos-stage-glow {
  position: absolute; width: 640px; height: 640px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(184,115,63,0.09), transparent 65%);
  top: -160px; left: 32%; filter: blur(20px);
}
.gos-frag {
  --rot: 0deg;
  position: relative; border: 1px solid var(--border); border-radius: var(--radius);
  background: rgba(20, 20, 23, 0.82); padding: 26px 28px;
  backdrop-filter: blur(18px);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  transform: rotate(var(--rot));
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.gos-frag:hover {
  transform: rotate(var(--rot)) translateY(-4px);
  border-color: var(--copper-light);
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, 0.9), 0 0 32px -14px rgba(184, 115, 63, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.gos-frag-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; }

/* Ebene 1: das Dokument als ruhige Basis, ungedreht.
   Unten Platz lassen, damit die aufliegende Risikoampel Raum hat. */
.gos-frag-doc { grid-column: 1; grid-row: 1 / span 2; z-index: 1; padding-bottom: 150px; }
.gos-stage { margin-bottom: 64px; } /* Raum für die nach unten überstehende Ampel */

/* Ebene 3: die Zusammenfassung liegt oben auf — deutlich über die Kante gezogen */
.gos-frag-summary {
  --rot: 0deg;
  grid-column: 2; grid-row: 1; z-index: 3;
  margin: 38px 0 0 -84px;
  background: rgba(20, 20, 23, 0.82);
  backdrop-filter: blur(18px);
  border-color: rgba(217, 177, 105, 0.28);
  box-shadow: 0 44px 90px -36px rgba(0, 0, 0, 0.9), 0 0 40px -18px rgba(184, 115, 63, 0.35), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.gos-summary-text { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.45; color: var(--text-0); font-style: italic; }

/* Ebene 2: Prioritäten schieben sich von rechts unter die Zusammenfassung */
.gos-frag-prio {
  --rot: 1deg;
  grid-column: 2; grid-row: 2; z-index: 2;
  margin: 30px -14px 0 -40px;
}
.gos-prio-list { list-style: none; counter-reset: prio; display: flex; flex-direction: column; gap: 12px; }
.gos-prio-list li { counter-increment: prio; display: flex; align-items: baseline; gap: 14px; color: var(--text-1); font-size: 0.92rem; }
.gos-prio-list li::before { content: counter(prio, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.72rem; color: var(--copper-light); }

/* Ebene 2: die Risikoampel ist am Dokument verankert und liegt garantiert
   auf dessen unterer Kante — unabhängig von Texthöhen der rechten Spalte. */
.gos-frag-risk {
  --rot: -0.9deg;
  position: absolute; left: 44px; bottom: -44px; z-index: 2;
  width: min(400px, 72%);
  background: rgba(23, 23, 26, 0.82);
}
.gos-risk-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--text-1); font-size: 0.92rem; border-bottom: 1px solid var(--border); }
.gos-risk-row:last-child { border-bottom: none; }
.gos-risk-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gos-risk-dot.ok { background: var(--ok); box-shadow: 0 0 10px rgba(127,174,134,0.4); }
.gos-risk-dot.warn { background: var(--warn); box-shadow: 0 0 10px rgba(207,159,76,0.4); }
.gos-risk-dot.crit { background: var(--crit); box-shadow: 0 0 10px rgba(179,98,79,0.4); }

/* Mobil: saubere Stapelung ohne Versatz und Rotation */
@media (max-width: 900px) {
  .gos-stage { grid-template-columns: 1fr; gap: 18px; margin-bottom: 0; }
  .gos-frag { --rot: 0deg; }
  .gos-frag-doc { grid-column: auto; grid-row: auto; padding-bottom: 26px; }
  .gos-frag-summary, .gos-frag-prio { grid-column: auto; grid-row: auto; margin: 0; }
  .gos-frag-risk { position: static; width: auto; margin-top: 18px; background: rgba(20,20,23,0.88); }
}

.gos-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-top: 40px; }
@media (max-width: 900px) { .gos-features { grid-template-columns: repeat(2, 1fr); } }
.gos-feature { background: var(--bg); padding: 26px 22px; }
.gos-feature-num { font-family: var(--font-mono); font-size: 0.72rem; color: var(--copper-light); margin-bottom: 12px; }
.gos-feature-title { font-family: var(--font-display); font-size: 1.05rem; color: var(--text-0); margin-bottom: 8px; }
.gos-feature-desc { font-size: 0.85rem; color: var(--text-2); line-height: 1.55; }

/* ══════════════════════════════════════════════════════════════════════════
   EXECUTIVE ASSESSMENT
   ══════════════════════════════════════════════════════════════════════════ */
.ea-section { }
.ea-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 70px; align-items: start; }
@media (max-width: 980px) { .ea-grid { grid-template-columns: 1fr; } }

.ea-steps { display: flex; flex-direction: column; }
.ea-step { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--border); position: relative; }
.ea-step:first-child { padding-top: 0; }
.ea-step-num { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-3); padding-top: 3px; }
.ea-step-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--text-0); margin-bottom: 6px; }
.ea-step-desc { font-size: 0.9rem; color: var(--text-2); max-width: 420px; }
.ea-step-line { position: absolute; left: 21px; top: 100%; width: 1px; height: 26px; background: linear-gradient(var(--copper-dim), transparent); }

.ea-visual { position: sticky; top: 110px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: linear-gradient(165deg, var(--bg-2), var(--bg)); padding: 4px; }
.ea-visual-inner { border-radius: calc(var(--radius-lg) - 4px); background: var(--bg); padding: 30px; }
.ea-visual-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.ea-visual-title { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-0); }
.ea-visual-badge { font-family: var(--font-mono); font-size: 0.66rem; padding: 5px 10px; border-radius: 100px; background: rgba(127,174,134,0.12); color: var(--ok); border: 1px solid rgba(127,174,134,0.3); text-transform: uppercase; letter-spacing: 0.06em; }
.ea-score-ring-wrap { display: flex; align-items: center; gap: 24px; margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--border); }
.ea-score-ring { width: 92px; height: 92px; flex-shrink: 0; }
.ea-score-num { font-family: var(--font-display); font-size: 2.2rem; color: var(--text-0); }
.ea-score-sub { font-size: 0.8rem; color: var(--text-2); margin-top: 2px; }
.ea-risk-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.ea-risk-row:last-child { border-bottom: none; }
.ea-risk-label { font-size: 0.87rem; color: var(--text-1); }
.ea-risk-tag { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 9px; border-radius: 100px; }
.ea-risk-tag.crit { background: rgba(179,98,79,0.14); color: var(--crit); border: 1px solid rgba(179,98,79,0.3); }
.ea-risk-tag.warn { background: rgba(207,159,76,0.14); color: var(--warn); border: 1px solid rgba(207,159,76,0.3); }

/* ══════════════════════════════════════════════════════════════════════════
   LEISTUNGEN — editorial rows
   ══════════════════════════════════════════════════════════════════════════ */
.leist-row {
  display: grid; grid-template-columns: 90px 1fr 1.1fr; gap: 40px; align-items: start;
  padding: 44px 0; border-top: 1px solid var(--border);
  transition: background 0.4s ease;
}
.leist-row:last-child { border-bottom: 1px solid var(--border); }
.leist-num { font-family: var(--font-mono); font-size: 0.9rem; color: var(--copper-light); padding-top: 8px; }
.leist-title-wrap { display: flex; align-items: center; }
.leist-title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: var(--text-0); transition: color 0.35s ease, transform 0.35s var(--ease-out); }
.leist-row:hover .leist-title { color: var(--copper-light); transform: translateX(6px); }
.leist-body { display: flex; flex-direction: column; gap: 14px; }
.leist-desc { color: var(--text-2); font-size: 0.95rem; max-width: 480px; }
.leist-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.leist-tag { font-size: 0.72rem; padding: 5px 11px; border-radius: 100px; background: var(--glass); border: 1px solid var(--border); color: var(--text-2); }
.leist-more { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-0); width: fit-content; }
.leist-more .btn-arrow { transition: transform 0.35s var(--ease-out); }
.leist-row:hover .leist-more .btn-arrow { transform: translateX(4px); }

@media (max-width: 780px) {
  .leist-row { grid-template-columns: 1fr; gap: 14px; }
  .leist-num { padding-top: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BRANCHEN
   ══════════════════════════════════════════════════════════════════════════ */
.branche-panel {
  position: relative; border-radius: var(--radius-lg); border: 1px solid var(--border);
  background:
    radial-gradient(ellipse 90% 130% at 0% 0%, rgba(184,115,63,0.10), transparent 55%),
    radial-gradient(ellipse 70% 100% at 100% 100%, rgba(184,115,63,0.07), transparent 60%),
    linear-gradient(165deg, var(--bg-2), var(--bg) 70%);
  padding: 60px; overflow: hidden; margin-bottom: 26px;
  box-shadow: 0 44px 90px -44px rgba(0,0,0,0.85), 0 1px 0 rgba(255,255,255,0.05) inset;
}
.branche-panel:last-child { margin-bottom: 0; }
/* Kupfer-Kantenlicht an der linken Panelkante */
.branche-panel::before {
  content: ''; position: absolute; left: -2px; top: 10%; bottom: 10%; width: 3px;
  background: linear-gradient(180deg, transparent, rgba(217,154,95,0.9) 30%, rgba(184,115,63,0.55) 70%, transparent);
  filter: blur(1.5px);
  box-shadow: 0 0 28px 5px rgba(184,115,63,0.35), 0 0 70px 18px rgba(184,115,63,0.12);
  pointer-events: none; z-index: 0;
}
/* Atmosphärische Lichtstreifen im rechten Panelbereich */
.branche-panel::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 58%;
  background:
    linear-gradient(112deg, transparent 28%, rgba(184,115,63,0.12) 44%, transparent 54%),
    linear-gradient(112deg, transparent 56%, rgba(217,177,105,0.08) 68%, transparent 78%),
    linear-gradient(112deg, transparent 76%, rgba(184,115,63,0.10) 90%, transparent 98%),
    radial-gradient(ellipse 80% 70% at 100% 30%, rgba(184,115,63,0.10), transparent 65%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%);
  mask-image: linear-gradient(90deg, transparent, #000 50%);
  pointer-events: none; z-index: 0;
}
.branche-panel.b::after {
  background:
    linear-gradient(68deg, transparent 30%, rgba(184,115,63,0.11) 46%, transparent 56%),
    linear-gradient(68deg, transparent 58%, rgba(217,177,105,0.08) 70%, transparent 80%),
    radial-gradient(ellipse 80% 70% at 100% 70%, rgba(184,115,63,0.10), transparent 65%);
}
.branche-panel-glow { position: absolute; width: 460px; height: 460px; border-radius: 50%; filter: blur(10px); opacity: 0.5; pointer-events: none; }
.branche-panel.a .branche-panel-glow { background: radial-gradient(circle, rgba(184,115,63,0.22), transparent 70%); top: -180px; left: -120px; }
.branche-panel.b .branche-panel-glow { background: radial-gradient(circle, rgba(217,177,105,0.18), transparent 70%); bottom: -180px; right: -120px; }
.branche-content { display: grid; grid-template-columns: 1fr 0.85fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
@media (max-width: 900px) { .branche-content { grid-template-columns: 1fr; } .branche-panel { padding: 36px 26px; } }
.branche-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; color: var(--copper-light); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; }
.branche-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.08; color: var(--text-0); margin-bottom: 18px; }
.branche-desc { color: var(--text-2); margin-bottom: 30px; max-width: 460px; }
.branche-kpis { display: flex; gap: 34px; margin-bottom: 10px; flex-wrap: wrap; }
.branche-kpi-val { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-0); }
.branche-kpi-label { font-size: 0.74rem; color: var(--text-3); margin-top: 2px; }
.branche-kpi-disclaimer { font-size: 0.68rem; color: var(--text-3); margin-bottom: 20px; }
.branche-quote { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 12px 0 12px 40px; border-left: 1px solid rgba(122, 76, 42, 0.55); align-self: center; }
.branche-quote::before {
  content: '\201C';
  font-family: var(--font-display); font-weight: 600;
  font-size: 4.6rem; line-height: 0.55;
  color: var(--copper); opacity: 0.9;
  display: block; margin-bottom: 2px;
  text-shadow: 0 0 30px rgba(184, 115, 63, 0.35);
}
.branche-quote p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.4; color: var(--text-0); }
.branche-quote-src { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }

/* ══════════════════════════════════════════════════════════════════════════
   METHODIK — horizontal step track
   ══════════════════════════════════════════════════════════════════════════ */
.methodik-track { position: relative; margin-top: 70px; }
.methodik-line-bg { position: absolute; top: 27px; left: 0; right: 0; height: 1px; background: var(--border); }
.methodik-line-fill { position: absolute; top: 27px; left: 0; height: 1px; width: 0%; background: linear-gradient(90deg, var(--copper), var(--gold)); box-shadow: 0 0 12px rgba(184,115,63,0.6); transition: width 1.6s var(--ease-out); }
.methodik-steps { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 980px) { .methodik-steps { grid-template-columns: repeat(2, 1fr); } .methodik-line-bg, .methodik-line-fill { display: none; } }
.methodik-step { display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; }
.methodik-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--border-strong); margin-bottom: 20px; transition: all 0.4s var(--ease-out); position: relative; z-index: 1; }
.methodik-step.is-active .methodik-dot { background: var(--copper); border-color: var(--copper-light); box-shadow: 0 0 0 5px rgba(184,115,63,0.16); }
.methodik-step-title { font-family: var(--font-display); font-size: 1rem; color: var(--text-2); margin-bottom: 8px; transition: color 0.3s ease; }
.methodik-step.is-active .methodik-step-title { color: var(--text-0); }
.methodik-step-desc { font-size: 0.8rem; color: var(--text-3); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════════
   AUS DER PRAXIS — journal
   ══════════════════════════════════════════════════════════════════════════ */
.journal-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 50px; }
.journal-filter { padding: 9px 18px; border-radius: 100px; font-size: 0.82rem; font-weight: 500; border: 1px solid var(--border); color: var(--text-2); background: var(--glass); transition: all 0.3s ease; cursor: pointer; }
.journal-filter:hover { color: var(--text-0); border-color: var(--border-strong); }
.journal-filter.active { background: var(--copper); border-color: var(--copper); color: #0d0904; }

.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 980px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .journal-grid { grid-template-columns: 1fr; } }
.journal-card { background: var(--bg-1); padding: 32px 28px; display: flex; flex-direction: column; min-height: 240px; transition: background 0.35s ease; }
.journal-card:hover { background: var(--bg-2); }
.journal-cat { font-family: var(--font-mono); font-size: 0.66rem; color: var(--copper-light); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.journal-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--text-0); line-height: 1.3; margin-bottom: 12px; }
.journal-desc { font-size: 0.85rem; color: var(--text-2); line-height: 1.6; flex-grow: 1; }
.journal-read { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--text-0); margin-top: 20px; }

/* content-visibility: Browser überspringt Layout/Paint für diese Sektion, solange sie weit
   außerhalb des sichtbaren Bereichs liegt — spart laufend Renderzeit auf einer langen Seite.
   contain-intrinsic-size gibt vorab eine Höhenschätzung, damit die Scrollbar nicht springt.
   Nur auf eindeutig unterhalb des ersten Bildschirms liegende Sektionen angewendet (praxis,
   kontakt, footer) — bei den frühen Sektionen (hero/gos/assessment/leistungen/branchen/
   methodik) bewusst nicht, da deren viele `.reveal-*`-Elemente sich auf präzise
   getBoundingClientRect()-Werte des bestehenden Scroll-Reveal-Systems verlassen und zu nah
   am ersten Bildschirm liegen, um das Risiko zu rechtfertigen. */
#praxis { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ══════════════════════════════════════════════════════════════════════════
   KONTAKT
   ══════════════════════════════════════════════════════════════════════════ */
.kontakt-section { background: var(--bg-1); border-top: 1px solid var(--border); content-visibility: auto; contain-intrinsic-size: auto 900px; }
.kontakt-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; align-items: start; }
@media (max-width: 980px) { .kontakt-grid { grid-template-columns: 1fr; } }
.kontakt-info-row { padding: 20px 0; border-top: 1px solid var(--border); }
.kontakt-info-row:last-child { border-bottom: 1px solid var(--border); }
.kontakt-info-label { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.kontakt-info-val { font-size: 1rem; color: var(--text-0); }

.kontakt-form { display: flex; flex-direction: column; gap: 18px; }
.kf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .kf-row { grid-template-columns: 1fr; } }
.kf-field label { display: block; font-size: 0.78rem; color: var(--text-2); margin-bottom: 8px; }
.kf-field input, .kf-field select, .kf-field textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--glass); border: 1px solid var(--border); color: var(--text-0);
  font-family: inherit; font-size: 0.92rem; transition: border-color 0.3s ease, background 0.3s ease;
}
.kf-field input:focus, .kf-field select:focus, .kf-field textarea:focus { outline: none; border-color: var(--copper); background: var(--glass-strong); }
/* Das <select> selbst nutzt den (fast transparenten) --glass-Hintergrund + helle Schrift für
   den GESCHLOSSENEN Zustand — funktioniert nur, weil der dunkle Seitenhintergrund durchscheint.
   Die aufgeklappte Optionsliste rendert der Browser aber nativ und OHNE Seitenhintergrund
   dahinter; ohne eigene Hintergrundfarbe fällt sie auf Weiß zurück → helle Schrift auf Weiß,
   praktisch unsichtbar bis zum Hover (Nutzer-Fund 2026-08-10). Feste, deckende Hintergrundfarbe
   auf den <option>-Elementen behebt das. */
.kf-field select option { background: var(--bg-2); color: var(--text-0); }
.kf-field textarea { resize: vertical; min-height: 110px; }

/* ── Footer ───────────────────────────────────────────────────────────── */
footer { padding: 70px 0 40px; border-top: 1px solid var(--border); content-visibility: auto; contain-intrinsic-size: auto 500px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: 50px; flex-wrap: wrap; }
.footer-logo { font-family: var(--font-display); font-size: 1.2rem; color: var(--text-0); margin-bottom: 10px; }
.footer-tag { color: var(--text-3); font-size: 0.87rem; max-width: 320px; }
.footer-links { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-col-title { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.footer-col a { display: block; font-size: 0.87rem; color: var(--text-2); padding: 6px 0; transition: color 0.25s ease; }
.footer-col a:hover { color: var(--text-0); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-3); flex-wrap: wrap; gap: 10px; }

/* ── Utility reveal helpers used by JS/GSAP ─────────────────────────────── */
.will-fade { opacity: 0; }

/* ── Scroll progress ─────────────────────────────────────────────────── */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--copper-dim), var(--gold)); z-index: 300; box-shadow: 0 0 10px rgba(217,177,105,0.5); }

/* ── Cookie banner ────────────────────────────────────────────────────── */
.cookie-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 400; max-width: 640px; margin: 0 auto; background: rgba(14,14,16,0.94); border: 1px solid var(--border-strong); border-radius: var(--radius); backdrop-filter: blur(24px); padding: 24px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); }
.cookie-banner-inner { display: flex; flex-direction: column; gap: 18px; }
.cookie-banner-title { font-family: var(--font-display); font-size: 1.05rem; color: var(--text-0); margin-bottom: 6px; }
.cookie-banner-text p { font-size: 0.85rem; color: var(--text-2); line-height: 1.55; }
.cookie-banner-text a { color: var(--copper-light); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-btn { padding: 10px 18px; border-radius: 100px; font-size: 0.82rem; font-weight: 600; border: 1px solid var(--border); background: var(--glass); color: var(--text-1); }
.cookie-btn:hover { border-color: var(--border-strong); color: var(--text-0); }
.cookie-btn-accept { background: linear-gradient(135deg, var(--copper-light), var(--copper)); color: #0d0904; border: none; }
.cookie-settings-panel { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.cookie-setting-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cookie-setting-title { font-size: 0.88rem; color: var(--text-0); font-weight: 600; }
.cookie-setting-desc { font-size: 0.78rem; color: var(--text-3); margin-top: 2px; }
.cookie-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.cookie-toggle input { opacity: 0; width: 0; height: 0; }
.cookie-toggle span { position: absolute; inset: 0; background: var(--bg-3); border-radius: 100px; transition: background 0.3s ease; }
.cookie-toggle span::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--text-2); border-radius: 50%; transition: transform 0.3s ease, background 0.3s ease; }
.cookie-toggle input:checked + span { background: var(--copper-dim); }
.cookie-toggle input:checked + span::before { transform: translateX(18px); background: var(--copper-light); }
.cookie-toggle.disabled { opacity: 0.5; }
.cookie-btn-save { margin-top: 4px; align-self: flex-start; }

#form-feedback.success { background: rgba(127,174,134,0.12); border: 1px solid rgba(127,174,134,0.3); color: var(--ok); }
#form-feedback.error { background: rgba(179,98,79,0.12); border: 1px solid rgba(179,98,79,0.3); color: var(--crit); }

@media (max-width: 600px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 20px; }
}


/* ── Dauerhafte Hero-Animationen pausieren, sobald der Hero nicht mehr im
   sichtbaren Bereich ist — sonst laufen 8 infinite-Animationen (Logo-Schweben,
   Bodenglanz, Wasserlinie, Spiegelung, Live-Dot-Puls, Scroll-Cue, 16 Partikel)
   für den Rest der Seite unsichtbar im Hintergrund weiter und kosten laufend
   Compositing-Zeit. `.hero.motion-paused` wird per IntersectionObserver in
   app.js gesetzt — gleiches Muster wie `.motion-paused` in mandate-pages.css
   auf den Unterseiten (dort bereits erprobt zuverlässig). Die Wasser-Kräuselung
   (feTurbulence/SMIL <animate> im SVG) läuft außerhalb von CSS und wird separat
   in app.js über svg.pauseAnimations()/unpauseAnimations() an denselben
   Sichtbarkeits-Trigger gekoppelt. ─────────────────────────────────────────── */
.hero.motion-paused .hero-logo-stage,
.hero.motion-paused .hero-logo-floor,
.hero.motion-paused .hero-logo-floor::after,
.hero.motion-paused .hero-logo-reflection,
.hero.motion-paused .hero-live-dot::after,
.hero.motion-paused .scroll-cue-line,
.hero.motion-paused .hero-particle {
  animation-play-state: paused;
}
/* will-change reserviert dauerhaft eine eigene Compositing-Ebene, auch während pausiert —
   während der Hero unsichtbar ist, gibt es dafür keinen Grund (s. .hero-particle weiter
   unten, das will-change sonst permanent deklariert). */
.hero.motion-paused .hero-particle,
.hero.motion-paused .hero-logo-stage,
.hero.motion-paused .hero-logo-reflection {
  will-change: auto;
}

/* ── Aufsteigende Kupfer-Partikel im Hero (per app.js injiziert) ───────────── */
.hero-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hero > .container { position: relative; z-index: 1; }
.hero-particle {
  position: absolute; bottom: -12px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-light) 0%, var(--copper) 70%, transparent 100%);
  box-shadow: 0 0 8px rgba(217,177,105,0.5);
  opacity: 0;
  animation-name: particleRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
@keyframes particleRise {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: var(--po, 0.4); }
  85%  { opacity: var(--po, 0.4); }
  100% { transform: translateY(-820px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-particle { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   LEISTUNGEN — Methodik-Case-Panels
   Fünf Schritte einer Methodik, keine Dienstleistungsliste. Panel 01 volle
   Breite als Einstieg, danach 2×2. Tiefe über Licht, Schatten, Kantenlicht.
   ══════════════════════════════════════════════════════════════════════════ */
.case-intro { max-width: 620px; margin-top: 10px; }

.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.case-wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .case-grid { grid-template-columns: 1fr; gap: 20px; } }

.case-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: 30px; border: 1px solid var(--border-strong);
  padding: 54px 56px 44px;
  background:
    radial-gradient(ellipse 85% 95% at 10% 0%, rgba(184,115,63,0.085), transparent 55%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(184,115,63,0.05), transparent 62%),
    linear-gradient(165deg, var(--bg-2), var(--bg) 75%);
  box-shadow: 0 64px 120px -52px rgba(0,0,0,0.9), 0 34px 90px -36px rgba(184,115,63,0.28), 0 1px 0 rgba(255,255,255,0.06) inset;
  overflow: hidden;
}
@media (max-width: 760px) { .case-card { padding: 36px 28px 32px; border-radius: 24px; } }

/* Hover: Kupfer-Kantenlicht rundum statt nur der beiden statischen Linien
   (::before/::after) — border-color/box-shadow sind bereits oben in
   .reveal-case als Transition hinterlegt, hier nur der Ziel-Zustand. */
.case-card:hover {
  border-color: rgba(217, 154, 95, 0.5);
  box-shadow: 0 70px 130px -50px rgba(0,0,0,0.95), 0 40px 100px -32px rgba(184,115,63,0.4),
              0 0 0 1px rgba(217,154,95,0.22), 0 1px 0 rgba(255,255,255,0.08) inset;
}
/* Hover setzt Delay auf 0: die Stagger-Verzögerung der zweiten Karte einer
   Reihe (siehe .reveal-case:nth-child(odd) unten) ist nur für die
   Scroll-Reveal-Animation gedacht — beim Hover soll das Kantenlicht sofort
   reagieren, nicht mit 0.12s Verzögerung hinterherhinken. */
.case-grid .reveal-case:hover { transition-delay: 0s; }

/* Vertikaler Kupferstreifen links */
.case-card::before {
  content: ''; position: absolute; left: 0; top: 14%; bottom: 14%; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(217,154,95,0.9) 35%, rgba(184,115,63,0.5) 70%, transparent);
  filter: blur(1px);
  box-shadow: 0 0 22px 4px rgba(184,115,63,0.3);
  pointer-events: none;
}
/* Dünne Kupferlinie oben */
.case-card::after {
  content: ''; position: absolute; top: 0; left: 7%; right: 7%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,154,95,0.7), transparent);
  pointer-events: none;
}

.case-num {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em;
  color: var(--copper-light); margin-bottom: 30px; display: inline-block;
}
.case-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.08;
  color: var(--text-0); margin-bottom: 16px;
}
.case-statement {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.42;
  color: var(--gold-light); margin-bottom: 22px; max-width: 34ch;
}
.case-wide .case-statement { max-width: 44ch; }
.case-desc { color: var(--text-2); line-height: 1.7; max-width: 56ch; margin-bottom: 38px; }

.case-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.case-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.case-badges span {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 100px;
  border: 1px solid rgba(184,115,63,0.45); background: rgba(184,115,63,0.06); color: var(--text-1);
}
.case-more { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: var(--text-0); white-space: nowrap; }

/* — Scroll-Reveal: Karte mit Blur, Inhalte gestaffelt — */
.reveal-case {
  opacity: 0; transform: translateY(46px); filter: blur(10px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out), filter 0.75s var(--ease-out),
              box-shadow 0.55s var(--ease-out), border-color 0.4s ease;
}
.reveal-case.is-in { opacity: 1; transform: none; filter: blur(0); }
/* zweite Karte einer Reihe leicht versetzt (Hover setzt Delay auf 0) */
.case-grid .reveal-case:nth-child(odd):not(.case-wide) { transition-delay: 0.12s; }

.reveal-case .case-num,
.reveal-case .case-title,
.reveal-case .case-statement,
.reveal-case .case-desc,
.reveal-case .case-foot { opacity: 0; transform: translateY(14px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
.reveal-case.is-in .case-num       { opacity: 1; transform: none; transition-delay: 0.15s; }
.reveal-case.is-in .case-title     { opacity: 1; transform: none; transition-delay: 0.24s; }
.reveal-case.is-in .case-statement { opacity: 1; transform: none; transition-delay: 0.34s; }
.reveal-case.is-in .case-desc      { opacity: 1; transform: none; transition-delay: 0.44s; }
.reveal-case.is-in .case-foot      { opacity: 1; transform: none; transition-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-case, .reveal-case .case-num, .reveal-case .case-title, .reveal-case .case-statement,
  .reveal-case .case-desc, .reveal-case .case-foot { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GOS-SCREENSHOTS — Glass-Frames mit 3D-Tiefe (Stil der Branchen-Panels)
   Inhalte sind bereits im Bild geblurrt; hier nur die Inszenierung.
   ══════════════════════════════════════════════════════════════════════════ */
.ea-visual--shots { background: none; border: none; padding: 0; }

.gos-shot-stack { position: relative; perspective: 1400px; }
.gos-shot {
  position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border-strong);
  background: rgba(20, 20, 23, 0.85); backdrop-filter: blur(14px);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,0.9), 0 24px 70px -30px rgba(184,115,63,0.18), 0 1px 0 rgba(255,255,255,0.06) inset;
}
.gos-shot img { display: block; width: 100%; height: auto; opacity: 0.94; }

/* Kupfer-Kantenlicht links — wie bei den Branchen-Panels */
.gos-shot::before {
  content: ''; position: absolute; left: 0; top: 10%; bottom: 10%; width: 2px; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(217,154,95,0.9) 35%, rgba(184,115,63,0.5) 70%, transparent);
  filter: blur(1px); box-shadow: 0 0 24px 4px rgba(184,115,63,0.35);
  pointer-events: none;
}
/* Glass-Reflex in der oberen Ecke */
.gos-shot::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.07), transparent 34%);
}
.gos-shot-label {
  position: absolute; z-index: 3; top: 12px; right: 14px;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2); background: rgba(10,10,11,0.6);
  border: 1px solid var(--border); border-radius: 100px; padding: 5px 11px;
  backdrop-filter: blur(10px);
}

.gos-shot-main { transform: rotateY(-7deg) rotateX(1.5deg); transition: transform 0.6s var(--ease-out); }
.gos-shot-stack:hover .gos-shot-main { transform: rotateY(-2deg) rotateX(0.5deg); }
.gos-shot-over {
  position: absolute; right: -34px; bottom: -38px; width: 64%;
  transform: rotateY(-7deg) rotateX(1.5deg) translateZ(60px);
  border-color: rgba(217,177,105,0.3);
  transition: transform 0.6s var(--ease-out);
}
.gos-shot-stack:hover .gos-shot-over { transform: rotateY(-2deg) rotateX(0.5deg) translateZ(70px); }

.gos-shot-note {
  margin-top: 62px; text-align: right;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3);
}
@media (max-width: 980px) { .gos-shot-over { right: 0; bottom: -30px; width: 70%; } }
@media (prefers-reduced-motion: reduce) {
  .gos-shot-main, .gos-shot-over { transition: none; }
}

/* ── Vertrauenssignale: EU/DSGVO/ISO-Chips + Diskretions-Statements ────────── */
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.trust-chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2); padding: 9px 16px; border-radius: 100px;
  background: var(--glass); border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.trust-chip:hover { border-color: rgba(184,115,63,0.4); color: var(--text-1); }
.trust-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--copper-light);
  box-shadow: 0 0 8px rgba(217,154,95,0.6);
}

.ea-trust {
  margin-top: 14px; text-align: right;
  font-size: 0.78rem; line-height: 1.6; color: var(--text-3);
}

.branchen-erfahrung { max-width: 720px; margin-top: 18px; }
.erfahrung-diskret { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper-light); }
/* ══════════════════════════════════════════════════════════════════════════
   WARUM — Golden-Circle-Sektion (Überzeugung → Konsequenz → Fokus)
   ══════════════════════════════════════════════════════════════════════════ */
.warum-statement {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.22; letter-spacing: -0.015em;
  color: var(--text-0); max-width: 26ch;
}
.warum-statement em { font-style: italic; color: var(--copper-light); }
.warum-lead { margin-top: 26px; max-width: 640px; display: flex; flex-direction: column; gap: 14px; }
.warum-lead-strong { color: var(--text-1); font-weight: 500; }
.warum-chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 72px; }
@media (max-width: 900px) { .warum-chain { grid-template-columns: 1fr; } }
.warum-block { padding: 30px 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass); }
.warum-block-num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--copper-light); margin-bottom: 16px; }
.warum-block-title { font-size: 1.25rem; margin-bottom: 10px; }
.warum-block-desc { font-size: 0.94rem; line-height: 1.7; color: var(--text-2); }

/* ── Executive Assessment: Einstiegs-CTA unter den Schritten ─────────────── */
.ea-cta { margin-top: 40px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ea-cta-note { font-size: 0.85rem; color: var(--text-3); }

/* ══════════════════════════════════════════════════════════════════════════
   FALLSTUDIE — Media-Slot (Video/Slideshow folgt) + Ablauf-Skelett
   ══════════════════════════════════════════════════════════════════════════ */
.fall-section { background: var(--bg-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fall-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .fall-grid { grid-template-columns: 1fr; gap: 36px; } }
.fall-media {
  position: relative; min-height: 380px; aspect-ratio: 3 / 2; border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong); overflow: hidden;
  background: radial-gradient(circle at 20% 15%, rgba(184,115,63,0.10), transparent 55%),
              linear-gradient(155deg, var(--bg-3), var(--bg-2));
  box-shadow: 0 50px 100px -40px rgba(0,0,0,0.85);
  cursor: pointer; display: block; padding: 0; text-align: left;
  transition: box-shadow 0.4s var(--ease-out);
}
.fall-media:hover { box-shadow: 0 50px 100px -40px rgba(0,0,0,0.85), 0 0 0 1px var(--copper-dim); }
.fall-media:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 3px; }
.fall-media-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.9s var(--ease-in-out), transform 8s var(--ease-out);
  transform: scale(1.03);
}
.fall-media-img.is-active { opacity: 1; transform: scale(1); }
.fall-media-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(10,10,11,0.82) 0%, rgba(10,10,11,0.32) 38%, transparent 62%);
}
.fall-media-caption {
  position: absolute; left: 22px; right: 22px; bottom: 20px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  pointer-events: none;
}
.fall-media-count { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--gold-light); }
.fall-media-next { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-1); opacity: 0.85; transition: opacity 0.3s ease, transform 0.3s var(--ease-out); }
.fall-media:hover .fall-media-next { opacity: 1; transform: translateX(3px); }
.fall-media-dots { position: absolute; top: 20px; right: 22px; display: flex; gap: 6px; pointer-events: none; }
.fall-media-dot { width: 14px; height: 2px; border-radius: 1px; background: rgba(255,255,255,0.22); transition: background 0.4s var(--ease-out), width 0.4s var(--ease-out); }
.fall-media-dot.is-active { background: var(--copper-light); width: 22px; }

.fall-steps { display: flex; flex-direction: column; }
.fall-step {
  padding: 26px 4px; border-top: 1px solid var(--border); text-align: left;
  background: none; border-left: none; border-right: none; border-bottom: none;
  width: 100%; cursor: pointer; font: inherit; color: inherit;
  transition: padding-left 0.35s var(--ease-out);
}
.fall-step:last-child { border-bottom: 1px solid var(--border); }
.fall-step-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); transition: color 0.35s ease; }
.fall-step-desc {
  /* Nur die aktive Station zeigt ihren Text — sonst würde die Sektion mit allen 6
     Fließtexten gleichzeitig sichtbar viel zu hoch werden (Nutzer-Feedback 2026-08-06).
     max-height statt display:none, damit es sich weich auf-/zuklappen lässt; JS misst
     scrollHeight und setzt den Pixelwert inline (gleiches Muster wie .faq-item in
     mandate-pages.css/.js — reine CSS-Transition auf eine geschätzte max-height wirkt
     entweder abgehackt oder lässt zu viel Leerraum). */
  font-size: 0.97rem; line-height: 1.7; color: var(--text-2); max-width: 52ch;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.5s var(--ease-out), opacity 0.4s ease 0.05s, color 0.35s ease;
}
.fall-step:hover { padding-left: 12px; }
.fall-step.is-active { padding-left: 12px; }
.fall-step.is-active .fall-step-label { color: var(--copper-light); margin-bottom: 10px; }
.fall-step.is-active .fall-step-desc { color: var(--text-1); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fall-step-desc { transition: none; } }
@media (max-width: 900px) { .fall-media-dots { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   GESCHÄFTSFÜHRUNG — bewusst schlankes Band, kein Personenkult
   ══════════════════════════════════════════════════════════════════════════ */
.gf-section { padding: 70px 0; }
.gf-band { display: flex; align-items: center; gap: 28px; padding: 30px 34px; }
@media (max-width: 720px) { .gf-band { flex-direction: column; align-items: flex-start; gap: 18px; } }
.gf-avatar {
  width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: #0d0904;
  background: linear-gradient(135deg, var(--copper-light), var(--copper));
  box-shadow: 0 10px 26px -8px rgba(184,115,63,0.5);
}
.gf-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--text-0); margin-bottom: 8px; }
.gf-role { color: var(--text-3); font-size: 0.95rem; font-family: var(--font-body); }
.gf-bio { font-size: 0.92rem; line-height: 1.7; color: var(--text-2); max-width: 74ch; }