/* LID Group — Revolut design system.
 * Two-mode canvas: .band-light (white) for catalogue; default = true black.
 * Buttons: 4px corner radius on all CTAs.
 * Primary CTA on dark = white pill with black text.
 * Primary CTA on light = black pill with white text.
 * Cobalt violet (#494fdf) reserved for featured elements only.
 * Display font: Aeonik Pro (proprietary) → Satoshi from Fontshare as working substitute.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-body); font-size: var(--text-base);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background: var(--bg);
}

/* Available to assistive tech, absent from the page. Used where the
   visual design already conveys structure that the markup otherwise
   leaves implicit — a wordmark that is also the page title, and the
   numbered value cards, which read as one block to the eye but as four
   unrelated headings to a screen reader. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — off-screen until focused. Without it a keyboard user tabs
   the whole nav before reaching content, on every page. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--fg);
  color: var(--bg-light);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  transition: top var(--motion-base) var(--ease-out);
}
.skip-link:focus { top: 16px; outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─── dark islands on the light canvas ──────────────────────────
   The canvas is off-white now, so the light palette is :root. This is
   the escape hatch for the pieces that stay dark — the one black card,
   the footer, the mobile drawer, and the video hero. */
.on-dark,
.section-dark,
.pagefoot,
.mobile-drawer,
.hero-fullvh,
.vision {
  --bg: var(--bg-dark);
  --surface: #171716;
  --surface-soft: #171716;
  --surface-deep: #000000;
  --fg: #ffffff;
  --fg-2: rgba(255,255,255,0.68);
  --fg-light: #ffffff;
  --fg-light-2: rgba(255,255,255,0.62);
  --fg-dim: rgba(255,255,255,0.34);
  --border: rgba(255,255,255,0.12);
  --border-light: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.28);
  --divider-soft: rgba(255,255,255,0.06);
  color: var(--fg);
}

/* ─── two-tone headline — the reference's clearest signature ─────
   The sentence starts in ink and fades to near-canvas grey partway
   through, so one thought reads as foreground and afterthought at
   once. Wrap the trailing clause in .dim. */
.dim { color: var(--fg-dim); }

/* Inline chrome pill — the glossy orange lozenge set inside headline
   text. Sized in em so it scales with whatever heading holds it. */
.chrome-pill {
  display: inline-block;
  vertical-align: baseline;
  width: 1.6em; height: 0.66em;
  margin: 0 0.12em;
  border-radius: var(--radius-pill);
  background: var(--gradient-chrome);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.45), 0 2px 8px rgba(176,40,0,0.35);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
p { text-wrap: pretty; }
h1 { text-wrap: balance; }
h2, h3, h4 { text-wrap: pretty; }
h1, h2, h3, p, .lead, .eyebrow { overflow-wrap: break-word; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ─── two-mode canvas scopes ─────────────────────────────────── */
.band-light { background: var(--bg-light); color: var(--fg-light); }
.band-light .eyebrow { color: var(--fg-light-2); }
.band-light .lead, .band-light p { color: var(--fg-light-2); }
.band-light .hl { color: var(--accent); }
/* ─── .hl is now the two-tone fade, not a gradient fill ───────────
   Every headline already wraps its trailing clause in .hl, so
   redefining it here turns the site two-tone with no markup change:
   "Vertrauen braucht -> Beweise." reads as statement then afterthought.
   The gradient-clip fill must be unset explicitly, or
   -webkit-text-fill-color keeps winning over `color`. */
.hl {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--fg-dim);
  -webkit-text-fill-color: var(--fg-dim);
}

/* ─── layout primitives ──────────────────────────────────────── */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
@media (max-width: 1024px) { .container { padding-inline: var(--container-gutter-tablet); } }
@media (max-width: 600px)  { .container { padding-inline: var(--container-gutter-phone); } }
.section { position: relative; padding-block: var(--section-y-desktop); }
@media (max-width: 1024px) { .section { padding-block: var(--section-y-tablet); } }
@media (max-width: 600px)  { .section { padding-block: var(--section-y-phone); } }
.section + .section { margin-top: 0; padding-top: var(--section-y-desktop); }
@media (max-width: 1024px) { .section + .section { padding-top: var(--section-y-tablet); } }
@media (max-width: 600px)  { .section + .section { padding-top: var(--section-y-phone); } }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--space-5); }
.row { display: flex; align-items: center; gap: var(--space-5); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-12); align-items: start; }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-12); align-items: start; }
@media (max-width: 920px) { .grid-2,.grid-3,.grid-4,.grid-2-1,.grid-1-2 { grid-template-columns: 1fr; } }

/* ─── typography — headings are LARGE AND LIGHT, not heavy and loud.
   Weight dropped 700 → 500 and the uppercase removed: size and space
   carry the hierarchy instead of weight and caps. Uppercase is now
   reserved for mono micro-labels, which is what gives it meaning. */
.h1, h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 400; line-height: var(--display-leading); letter-spacing: var(--display-tracking); margin: 0; }
.h2, h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; line-height: var(--display-leading); letter-spacing: var(--display-tracking); margin: 0; }
.h3, h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.28; letter-spacing: -0.012em; margin: 0; }
/* 68ch measure: past ~70 characters the eye loses the line return. */
.lead { font-size: var(--text-lg); font-weight: 400; line-height: 1.62; color: var(--fg-2); max-width: 68ch; margin: 0; }


/* Uppercase mono micro-labels — Hobro's metadata voice ("EST. 2023",
   "CANADA", "(01)", "BRANDING (7)"). */
.eyebrow, .label-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
}
.label-mono { margin: 0; }
.meta { font-size: var(--text-xs); color: var(--muted); }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ─── nav — always true black per Revolut spec ────────────────── */
.topnav { position: fixed; top: 0; left: 0; width: 100%; z-index: 30; background: rgba(0,0,0,0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); height: 64px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.06); }
/* Every anchor target must clear the 64px fixed nav */
#leistungen, #karriere, #open-roles, #team, #kontakt { scroll-margin-top: 88px; }
.topnav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; padding-inline: var(--container-gutter-desktop); }
@media (max-width: 1024px) { .topnav-inner { padding-inline: var(--container-gutter-tablet); } }
@media (max-width: 600px)  { .topnav-inner { padding-inline: var(--container-gutter-phone); } }
/* Wordmark is just "LID", set heavy and tight. The mark is positioned
   as an exponent: flex-start pins it to the top of the line box so it
   rides at cap height, like LID raised to the power of the mark. */
.logo { display: inline-flex; align-items: flex-start; gap: 3px; font-family: var(--font-wordmark); font-size: 26px; line-height: 1; font-weight: 700; color: var(--fg); letter-spacing: -0.01em; }
.logo .logo-lid { font-weight: 700; }

/* ─── Logo hovers — each extends the motif it already owns ────────
   Nothing invented: the hero wordmark already glitches, the nav mark
   already pulses. Hover just quickens each. Neither touches layout —
   no letter-spacing or size change — so nothing reflows under the
   cursor, which is what makes big-type hovers feel cheap. */

/* Nav logo. It is a link and had no hover at all, which is the real
   gap here: no affordance that it was clickable. */
.topnav .logo { transition: opacity var(--motion-base) var(--ease-out); }
.topnav .logo:hover { opacity: 0.86; }
.topnav .logo:hover .lid-signal-ring {
  animation-duration: 0.85s;      /* signal quickens — from 1.9s */
}
.topnav .logo:hover .lid-signal-ring--outer { animation-delay: 0.14s; }

/* Hero wordmark. Not a link, so this is a flourish rather than an
   affordance: hovering fires the glitch it already runs on a slow
   loop. Scoped to :hover so the resting cadence is untouched. */
.had-wordmark:hover .glitch-text,
.had-wordmark:hover .glitch-text::before,
.had-wordmark:hover .glitch-text::after {
  animation-duration: 0.65s !important;
}
@media (prefers-reduced-motion: reduce) {
  .topnav .logo:hover .lid-signal-ring,
  .had-wordmark:hover .glitch-text,
  .had-wordmark:hover .glitch-text::before,
  .had-wordmark:hover .glitch-text::after { animation: none !important; }
}

/* Original animated mark: a solid core with two concentric rings that
   pulse outward in sequence — a signal leaving the switchboard. Keeps
   the circular footprint of the reference; the motion is what carries
   the call-centre meaning. */
/* Sized as an exponent against the 26px wordmark. The scroll transform
   below is in SVG user units, not rendered px, so the loop stays
   seamless at any rendered size. */
/* Inherits the wordmark's colour instead of the accent: white while
   the nav is dark over the hero, ink once it flips light. A literal
   always-white would vanish against the light bar. */
.logo-mark-anim { display: inline-flex; width: 13px; height: 13px; flex: none; color: inherit; margin-top: 1px; }
.logo-mark-anim svg { display: block; width: 13px; height: 13px; }
/* transform-box: fill-box makes transform-origin resolve against the
   ring's own bounding box, so the pulse scales from its centre rather
   than the SVG viewport origin. */
.lid-signal-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: lid-signal 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.lid-signal-ring--outer { animation-delay: 0.32s; }
@keyframes lid-signal {
  0%   { opacity: 0.2; transform: scale(0.72); }
  40%  { opacity: 1;   transform: scale(1); }
  100% { opacity: 0.2; transform: scale(0.72); }
}
/* Static but still legible: rings hold at full opacity and full size. */
@media (prefers-reduced-motion: reduce) {
  .lid-signal-ring { animation: none; opacity: 0.75; }
}
/* flex:1 hands the nav all the space left over by the logo and actions,
   so its pills stretch across the bar rather than clustering centre. */
.topnav nav { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; }
.nav-actions { display: flex; align-items: center; gap: 10px; }

/* ─── Nav language dropdown ────────────────────────────────────────
   Trigger matches the nav's glass-pill geometry (40px / 10px radius)
   so it sits in the same system as the links and the CTA. */
.lang-select { position: relative; flex: none; }
.lang-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 12px;
  border-radius: var(--radius-sm);
  background: rgba(14,14,13,0.045);
  border: 1px solid rgba(14,14,13,0.09);
  color: var(--fg);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: var(--tracking-label);
  transition: background var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
.lang-trigger:hover { background: rgba(14,14,13,0.08); border-color: rgba(14,14,13,0.16); }
.lang-caret { width: 11px; height: 11px; opacity: 0.6; transition: transform var(--motion-base) var(--ease-out); }
.lang-select.is-open .lang-caret { transform: rotate(180deg); }

/* Flags render at a fixed box with the SVG cropped to fill, so the 5:3
   German flag and 2:1 Union Jack read as the same size chip. */
.lang-flag {
  display: inline-flex; flex: none;
  width: 20px; height: 14px;
  border-radius: 2px; overflow: hidden;
  box-shadow: var(--hairline-ink);
}
.lang-flag .flag-svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 168px; margin: 0; padding: 6px;
  list-style: none;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(14,14,13,0.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  /* Animate out of flow-free space rather than display:none, so the
     open/close eases instead of snapping. */
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out), visibility var(--motion-base) var(--ease-out);
  z-index: 40;
}
.lang-select.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu li { margin: 0; }
.lang-menu [data-lang] {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: rgba(14,14,13,0.78);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  text-align: left;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.lang-menu [data-lang]:hover { background: rgba(14,14,13,0.06); color: var(--fg); }
.lang-menu [data-lang].is-active { background: rgba(14,14,13,0.09); color: var(--fg); }

@media (max-width: 760px) { .topnav .nav-actions .lang-select { display: none; } }

.lang-toggle {
  position: relative;
  display: inline-flex;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-pill);
  padding: 3px;
  overflow: hidden;
}
/* Sliding indicator — JS moves this via transform */
.lang-indicator {
  position: absolute;
  top: 3px; left: 3px;
  height: calc(100% - 6px);
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: transform var(--motion-slow) var(--ease-out), width var(--motion-slow) var(--ease-out);
  pointer-events: none;
  z-index: 0;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 42%, transparent);
}
.lang-toggle button {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.45);
  padding: 5px 12px;
  min-width: 38px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: var(--radius-pill);
  transition: color var(--motion-base) var(--ease-out);
}
.lang-toggle button.is-active { color: #ffffff; background: transparent; }
.nav-toggle { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: #ffffff; }
.nav-toggle svg { width: 18px; height: 18px; }
.mobile-drawer { display: none; position: fixed; inset: 0; z-index: 40; background: #141414; padding: 88px var(--container-gutter-phone) var(--space-12); }
.mobile-drawer.is-open { display: block; }
.mobile-drawer nav { display: flex; flex-direction: column; gap: var(--space-8); }
.mobile-drawer nav a { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: #ffffff; }
.mobile-drawer .lang-toggle { margin-top: var(--space-12); align-self: flex-start; }
.drawer-close { position: absolute; top: 22px; right: var(--container-gutter-phone); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: #ffffff; }
@media (max-width: 760px) { .topnav nav, .topnav .nav-actions .lang-toggle, .topnav .btn-primary { display: none; } .nav-toggle { display: flex; } }

/* Opaque, not translucent: a 0.88-alpha dark footer over the white
   canvas washes out to grey. No backdrop blur needed now either. */
.pagefoot { padding-block: var(--space-12); color: var(--fg-2); font-size: var(--text-sm); background: var(--bg); border-top: 1px solid var(--divider-soft); }
.pagefoot .row-between { flex-wrap: wrap; gap: var(--space-5); }
.pagefoot a:hover { color: #ffffff; }

/* ─── buttons — 4px corner radius on all CTAs ─ */
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 48px;
  padding: 0 28px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  transition: transform var(--motion-press) var(--ease-out), background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
  cursor: pointer; white-space: nowrap; position: relative; overflow: hidden;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); color: #ffffff; border-color: transparent; }
.btn-primary:hover { background: var(--accent-deep); }
.btn-dark { background: var(--fg); color: var(--bg-light); }
.btn-dark:hover { background: #262625; }
.btn-outline-dark { background: transparent; color: #ffffff; border-color: #ffffff; }
.btn-outline-dark:hover { background: rgba(255,255,255,0.08); }
.btn-secondary { background: #ffffff; color: var(--fg-light); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-soft); }
.btn-soft { background: var(--surface-soft); color: var(--fg-light); }
/* Hero secondary. .btn-glass was a 0.10 white wash with a 0.15 border —
   on the dark video that is barely a shape. A proper ghost button reads
   as a real second option next to the solid white primary, without
   competing with it. */
.btn-ghost-light {
  background: transparent;
  /* 2px, not 1.5 — a hairline outline reads lighter than a solid
     fill of the same height, so the pair looked mismatched. */
  border: 2px solid rgba(255,255,255,0.68);
  color: #ffffff;
  transition: background var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
.btn-ghost-light:hover {
  background: rgba(255,255,255,0.12);
  border-color: #ffffff;
}
/* Arrows sit slightly further out at hero scale, and travel further */
.had-btn.btn-arrow::after { margin-left: 10px; }
.had-btn.btn-arrow:hover::after { transform: translateX(5px); }

.btn-glass { background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.15); color: #ffffff; }
.btn-glass:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); }
.btn-ghost { background: transparent; border: 0; padding: 0; height: auto; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.btn-ghost:hover { opacity: 0.72; }
.btn-arrow::after { content: '→'; margin-left: 4px; transition: transform var(--motion-fast) var(--ease-out); }
.btn-arrow:hover::after { transform: translateX(3px); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ─── card ────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: transform var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out); }
.card:hover { transform: translateY(-4px); border-color: rgba(14,14,13,0.14); }
.on-dark .card:hover, .section-dark .card:hover { border-color: rgba(255,255,255,0.22); }
/* Card internals — these were six copies of the same inline style block. */
.card-stage {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
}
.card-note { margin: var(--space-3) 0 0; color: var(--fg-2); font-size: var(--text-sm); }
.card-cta  { margin-top: var(--space-6); }
.card-flat { background: transparent; border: 0; padding: 0; }
.section-light .card { background: #ffffff; border-color: rgba(25,28,31,0.12); color: var(--fg); }

/* ─── pill / tag / badge ─────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.72); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; }
.band-light .pill, .section-light .pill { background: var(--surface-soft); color: var(--fg-light-2); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 400; }
.tag svg { width: 12px; height: 12px; flex-shrink: 0; stroke-width: 2; }
.section-light .tag { border-color: rgba(25,28,31,0.2); color: var(--muted); }
.badge-tag { display: inline-flex; padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; }
.badge-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.72); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-5); }
.badge-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.badge-eyebrow .badge-tag { color: #ffffff; }
.eyebrow.with-icon { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow.with-icon svg { width: 14px; height: 14px; color: var(--muted); }

/* ─── forms ──────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--fg-light-2); }
.field-required::after { content: ' *'; color: var(--danger); }
.input, .textarea, .select { width: 100%; padding: 14px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: #ffffff; color: var(--fg-light); font: inherit; font-size: var(--text-base); height: 56px; }
.textarea { height: auto; min-height: 110px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 20px) center,calc(100% - 15px) center; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.input:focus,.textarea:focus,.select:focus { outline: none; border-color: var(--accent); border-width: 2px; box-shadow: var(--focus-ring); }
.field-error { font-size: 12px; color: var(--danger); min-height: 16px; }
.input.has-error,.textarea.has-error,.select.has-error { border-color: var(--danger); }
.form-banner { display: none; padding: 16px 18px; border-radius: var(--radius-md); font-size: var(--text-sm); margin-bottom: var(--space-8); }
.form-banner.is-success { display: block; background: color-mix(in oklab,var(--success) 12%,#ffffff); border: 1px solid color-mix(in oklab,var(--success) 35%,var(--border-light)); color: var(--fg-light); }

/* ─── image placeholder ───────────────────────────────────────── */
.ph-img { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); aspect-ratio: 16/10; display: grid; place-items: center; color: var(--fg-2); font-size: 12px; letter-spacing: 0.04em; position: relative; overflow: hidden; }
.ph-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.section-light .ph-img { background: var(--surface-soft); border-color: rgba(25,28,31,0.12); color: var(--fg-light-2); }
.ph-img.square { aspect-ratio: 1/1; }
.ph-img.portrait { aspect-ratio: 3/4; }
.ph-img.wide { aspect-ratio: 16/9; }

/* ─── hero ─────────────────────────────────────────────────────── */
.section.hero-section { padding-block: var(--hero-y); }
@media (max-width: 1024px) { .section.hero-section { padding-block: 80px; } }
@media (max-width: 600px)  { .section.hero-section { padding-block: 56px 48px; } }
.hero { display: flex; flex-direction: column; justify-content: center; min-height: min(72vh, 680px); }
.hero-content { width: 100%; }
.hero h1 { max-width: 14ch; margin: 0 0 var(--space-6); }
.hero .lead { margin: 0 0 var(--space-8); }
.hero-cta { display: inline-flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-index { display: none; }
.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
@media (max-width: 920px) { .hero-split { grid-template-columns: 1fr; } }
.band-photo-overlay { position: relative; }
.band-photo-overlay::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.82) 100%); }
.band-photo-overlay > * { position: relative; z-index: 1; }
.hero-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* ─── hero entrance animations ─────────────────────────────────── */
.hero-enter { animation: hero-slide-up 0.9s var(--ease-out) both; }
.hero-enter:nth-child(2) { animation-delay:  80ms; }
.hero-enter:nth-child(3) { animation-delay: 160ms; }
.hero-enter:nth-child(4) { animation-delay: 240ms; }
.hero-enter:nth-child(5) { animation-delay: 320ms; }
@keyframes hero-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-enter { animation: none; } }

/* ─── section-light — light band on the white canvas ──────────── */
.section-light {
  background: transparent;
  color: var(--fg);
}
.section-light .hl {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--fg-dim);
  -webkit-text-fill-color: var(--fg-dim);
}
.section-light .eyebrow { color: var(--muted); }
.section-light .lead    { color: var(--fg-2); }
.section-light .card { background: var(--surface); border-color: var(--border); color: var(--fg); }
.section-light strong { color: var(--fg); }

/* ─── tab strip ────────────────────────────────────────────────── */
.tab-strip { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center; }
.tab-item { display: flex; flex-direction: column; align-items: center; gap: 8px; background: transparent; border: 0; color: var(--fg-2); padding: 0; min-width: 72px; cursor: pointer; }
.tab-item .tab-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); color: var(--fg-2); transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); }
.tab-item .tab-mark svg { width: 22px; height: 22px; }
.tab-item .tab-label { font-size: 12px; font-weight: 600; }
.tab-item.is-active { color: var(--fg); }
.tab-item.is-active .tab-mark { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.tab-item:hover .tab-mark { border-color: var(--fg-2); }
.tab-panels { margin-top: var(--space-8); }
.tab-panel { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 26px; align-items: center; justify-content: space-between; gap: var(--space-5); }
.tab-panel.is-active { display: flex; }
.tab-panel-head { display: flex; align-items: center; gap: 16px; }
.tab-panel-head .tab-mark { width: 44px; height: 44px; background: var(--accent); border-color: var(--accent); color: #ffffff; border-radius: var(--radius-md); }
.tab-panel-head .tab-mark svg { width: 20px; height: 20px; }
.tab-panel h4 { margin: 0; font-size: var(--text-base); font-weight: 600; }
.tab-panel p { margin: 2px 0 0; color: var(--fg-2); font-size: var(--text-sm); }
.tab-panel .live-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-label); color: var(--success); white-space: nowrap; }
.tab-panel .live-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
@media (max-width: 600px) { .tab-panel { flex-direction: column; align-items: flex-start; } }

/* ─── image-bleed cards ───────────────────────────────────────── */
.card-photo { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: transform var(--motion-base) var(--ease-out); }
.card-photo:hover { transform: translateY(-6px); }
.card-photo .card-photo-img { position: relative; aspect-ratio: 4/5; background-size: cover; background-position: center; }
.card-photo .card-photo-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.78) 100%); }
.card-photo .card-photo-text { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; }
.card-photo .card-photo-text h3 { color: #ffffff; font-size: var(--text-base); margin-bottom: 4px; }
.card-photo .card-photo-text p { color: rgba(255,255,255,0.78); font-size: 13px; margin: 0; }
.card-photo-foot { background: var(--bg); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
.card-photo-foot svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--motion-fast) var(--ease-out); }
.card-photo:hover .card-photo-foot svg { transform: translateX(3px); }

/* ─── photo widget frame ──────────────────────────────────────── */
.photo-widget-frame { position: relative; }
.photo-widget-frame .frame-photo { width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-lg); display: block; background-size: cover; background-position: center; }
.widget-card { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 14px 16px; min-width: 172px; }
.widget-card .widget-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); color: var(--muted); }
.widget-card .widget-value { font-size: 22px; font-weight: 700; color: var(--fg); margin-top: 2px; }
.widget-card .widget-value span { font-size: 12px; font-weight: 500; color: var(--muted); }
.widget-card .widget-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.widget-card .widget-list li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-2); }
.widget-card .widget-list .swatch { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.widget-top-right { top: -18px; right: -18px; }
.widget-bottom-left { bottom: -18px; left: -18px; }
@media (max-width: 760px) { .widget-card { position: static; margin-top: 12px; box-shadow: none; } .widget-top-right, .widget-bottom-left { margin: 12px 0 0; } }

/* ─── ICP grid ────────────────────────────────────────────────── */
.icp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
@media (max-width: 820px) { .icp-grid { grid-template-columns: 1fr; } }
.icp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.icp-list li { display: flex; gap: 10px; font-size: var(--text-base); color: var(--fg); align-items: baseline; }
.icp-list .mark { font-family: var(--font-mono); font-size: 13px; flex-shrink: 0; width: 16px; }
.section-light .icp-list li { color: var(--fg-light); }

/* ─── value row (about.html) ──────────────────────────────────── */
.value-row { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-8); padding-block: var(--space-8); border-top: 1px solid var(--border); }
.value-row:first-child { border-top: 0; }
.value-row h3 { font-size: var(--text-base); }
.value-row p { margin: 0; color: var(--muted); }
@media (max-width: 700px) { .value-row { grid-template-columns: 1fr; gap: 6px; } }

/* ─── quote / manifesto ───────────────────────────────────────── */
.quote { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: 1.2; letter-spacing: var(--display-tracking); max-width: 30ch; }
.quote-author { color: var(--fg-2); font-size: var(--text-sm); margin-top: var(--space-5); }
.quote-mark { font-family: var(--font-display); font-size: 140px; line-height: 0.7; color: var(--fg); opacity: 0.14; margin-bottom: -28px; }

/* ─── log row (ds-table support) ─────────────────────────────── */
.log-row { display: grid; grid-template-columns: 120px 1fr 100px; gap: var(--space-8); padding: 22px 0; border-top: 1px solid var(--border); align-items: baseline; }
.log-row .meta { color: var(--muted); }
.log-row .pull { text-align: right; }
@media (max-width: 600px) { .log-row { grid-template-columns: 1fr; gap: 6px; } .log-row .pull { text-align: left; } }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ds-table th, .ds-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.ds-table th { color: var(--muted); font-weight: 600; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-label); }

/* ─── scroll animations ───────────────────────────────────────── */
.fade-up   { opacity: 0; transform: translateY(36px); transition: opacity var(--motion-reveal) var(--ease-out), transform var(--motion-reveal) var(--ease-out); }
.fade-in   { opacity: 0; transition: opacity var(--motion-reveal) var(--ease-out); }
.fade-left { opacity: 0; transform: translateX(-32px); transition: opacity var(--motion-reveal) var(--ease-out), transform var(--motion-reveal) var(--ease-out); }
.fade-right{ opacity: 0; transform: translateX(32px);  transition: opacity var(--motion-reveal) var(--ease-out), transform var(--motion-reveal) var(--ease-out); }
.fade-up.is-visible, .fade-in.is-visible, .fade-left.is-visible, .fade-right.is-visible { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: 100ms; }
[data-delay="2"] { transition-delay: 200ms; }
[data-delay="3"] { transition-delay: 300ms; }
[data-delay="4"] { transition-delay: 400ms; }
[data-delay="5"] { transition-delay: 500ms; }
@media (prefers-reduced-motion: reduce) { .fade-up, .fade-in, .fade-left, .fade-right { opacity: 1; transform: none; transition: none var(--ease-out); } }
.stat-counter { display: inline-block; font-weight: 500; }

/* ─── marquee ─────────────────────────────────────────────── */
/* Tighter now the pills carry their own 20px of internal padding —
   32px of gap on top of that read as too loose. */
.marquee-track { display:inline-flex; align-items:center; gap:var(--space-3); animation:marquee-scroll 40s linear infinite; white-space:nowrap; }
/* Segments are outlined pills, not dot-separated text. Outline rather
   than fill: twenty filled chips on the hero video would read as a
   toolbar. */
.marquee-track a {
  display:inline-flex; align-items:center;
  padding:9px 20px;
  border:1px solid rgba(255,255,255,0.20);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.04);
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:500;
  letter-spacing:0.01em; color:rgba(255,255,255,0.72);
  transition: background var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
}
.marquee-track a:hover { background:rgba(255,255,255,0.11); border-color:rgba(255,255,255,0.34); color:#ffffff; }
@keyframes marquee-scroll { from{transform:translateX(0)} to{transform:translateX(-25%)} }
@media (prefers-reduced-motion:reduce) { .marquee-track { animation:none; } }

/* ─── funnel two-column card ────────────────────────────────── */
.funnel-card-inner {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 72px;
  align-items: start;
}
.funnel-header {
  position: sticky;
  top: 100px;
}
.funnel-header h2 { margin: var(--space-3) 0 0; }

/* ─── vertical accordion ─────────────────────────────────────── */
.funnel-accordion { display: flex; flex-direction: column; }
.funnel-item { border-top: 1px solid rgba(255,255,255,0.08); }
.funnel-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }

.funnel-item-head {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
}
.funnel-item-head:hover .funnel-item-title h4 { color: var(--accent); }

.funnel-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  flex-shrink: 0;
  width: 28px;
}
.funnel-item-title { flex: 1; }
.funnel-item-title h4 {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
  color: var(--fg);
  transition: color var(--motion-base) var(--ease-out);
}
.funnel-item-title p {
  font-size: 13px;
  color: var(--fg-2);
  margin: 3px 0 0;
}
.funnel-chevron {
  width: 18px; height: 18px;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
  transition: transform var(--motion-slow) var(--ease-out), color var(--motion-base) var(--ease-out);
}
.funnel-item.is-active .funnel-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Inline body — height transition */
.funnel-item-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--motion-slow) var(--ease-out), opacity var(--motion-slow) var(--ease-out);
}
.funnel-item.is-active .funnel-item-body {
  max-height: 240px;
  opacity: 1;
}
.funnel-item-body .channel-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-bottom: 24px;
}
.funnel-item-body .tag {
  padding: 7px 15px;
  font-size: 13px;
  border-radius: var(--radius-pill);
  border-color: rgba(255,255,255,0.14);
  color: var(--fg-2);
  background: transparent;
  transition: border-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out);
}
.funnel-item-body .tag:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232,80,2,0.1);
  cursor: default;
}

@media (max-width: 860px) {
  .funnel-card-inner { grid-template-columns: 1fr; gap: 40px; }
  /* NOTE: the real un-sticking lives in the responsive block at the end of
     this file — it has to come after #leistungen.funnel-reveal .funnel-header
     to win on source order. This line alone never applied. */
  .funnel-header { position: static; }
}

/* ─── Funnel reveal panel — light "curtain" that rises over the hero,
   editorial mark + corner label treatment ──────────────────────── */
/* Square corners and no shadow. The rounded top was a leftover of the
   old curtain treatment from when this panel rose over a black page;
   now that the statement above it is the same off-white, the radius
   only cut two notches out of the corners and let the dark hero show
   through behind them. The section reads as continuous canvas. */
#leistungen.funnel-reveal {
  position: relative;
  z-index: 3;
  background: var(--bg);
  color: var(--fg-light);
}
#leistungen.funnel-reveal .funnel-card {
  background: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
/* sticky, not relative. This was `relative` — which silently disabled
   the base rule's sticky and left the column stranded at the top while
   five cards scrolled past it, producing the dead space below. Sticky
   still establishes a containing block, so the absolutely-positioned
   mark and eyebrow below keep working. */
#leistungen.funnel-reveal .funnel-header {
  position: sticky;
  top: 124px;
}
/* Gives the column a job at the bottom instead of trailing into space */
.funnel-cta { margin-top: 36px; }
/* Plain label, left aligned. Was absolutely positioned top-right, then a
   bordered pill; now plain text in flow, matching the eyebrows in
   Kennzahlen, Karriere and the client block. position:static still has
   to override the absolute positioning it inherits. */
#leistungen.funnel-reveal .eyebrow {
  position: static;
  margin: 0 0 22px;
  text-align: left;
  color: var(--fg-2);
}
#leistungen.funnel-reveal h2 {
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  color: var(--fg);
}
#leistungen.funnel-reveal h2 .dim { color: var(--muted); }
/* Was forcing .hl back to inherit — that existed to strip the old
   gradient fill. .hl is the two-tone fade now, so let it through. */
#leistungen.funnel-reveal h2 .hl {
  background: none;
  color: var(--fg-dim);
  -webkit-text-fill-color: var(--fg-dim);
}
#leistungen.funnel-reveal .lead {
  color: var(--fg-light-2);
  font-size: var(--text-sm);
  max-width: 42ch;
}
/* ─── Funnel steps as elevated cards ──────────────────────────────
   Was five hairline-separated rows: identical bars with no hierarchy,
   which is what made this read as a table rather than a journey. Each
   step is now a card that lifts on hover and lifts further when open,
   so the accordion has visible state instead of just a chevron. */
#leistungen.funnel-reveal .funnel-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#leistungen.funnel-reveal .funnel-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 2px 26px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out), border-color var(--motion-slow) var(--ease-out);
}
#leistungen.funnel-reveal .funnel-item:last-child { border-bottom-color: var(--border); }
#leistungen.funnel-reveal .funnel-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* Open step sits highest — elevation carries the state, not just colour */
#leistungen.funnel-reveal .funnel-item.is-active {
  border-color: rgba(14,14,13,0.14);
  box-shadow: var(--shadow-lg);
}
/* Oversized dim numerals — the reference treats step numbers as
   typographic furniture, which also gives the eye a vertical rhythm. */
#leistungen.funnel-reveal .funnel-num {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--fg-dim);
  width: 52px;
  transition: color var(--motion-slow) var(--ease-out);
}
#leistungen.funnel-reveal .funnel-item.is-active .funnel-num { color: var(--accent); }
#leistungen.funnel-reveal .funnel-item-head { padding: 26px 0; }
#leistungen.funnel-reveal .funnel-item-body .channel-tags { padding-bottom: 26px; }

#leistungen.funnel-reveal .funnel-item { border-top-color: var(--border-light); }
#leistungen.funnel-reveal .funnel-item:last-child { border-bottom-color: var(--border-light); }
#leistungen.funnel-reveal .funnel-item-head { color: var(--fg-light); }
#leistungen.funnel-reveal .funnel-item-title h4 { color: var(--fg-light); }
#leistungen.funnel-reveal .funnel-item-title p { color: var(--fg-light-2); }
#leistungen.funnel-reveal .funnel-chevron { color: var(--fg-light-2); }
#leistungen.funnel-reveal .funnel-item-body .tag {
  border-color: var(--border-light);
  color: var(--fg-light-2);
}

/* ─── channel grid ─────────────────────────────────────────── */
.channel-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-8); }
.channel-group h5 { font-size:var(--text-sm); font-weight:600; letter-spacing:0.01em; color:var(--accent); margin:0 0 var(--space-3); }
.channel-tags { display:flex; flex-wrap:wrap; gap:8px; }
.section-light .channel-group .tag { border-color:rgba(25,28,31,0.2); color:var(--fg-light-2); }
@media (max-width:700px) { .channel-grid{grid-template-columns:1fr;} }

/* ─── premium video hero ─────────────────────────────────────── */
.hero-section { position: relative; overflow: hidden; }
.hero-video-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 60%;
  z-index: 0;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    165deg,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0.82) 100%
  );
}
.hero-section > * { position: relative; z-index: 2; }
.hero-section > .hero-video-bg { z-index: 0; }
.hero-section > .hero-overlay  { z-index: 1; }


/* Cards on light sections */
.section-light .card,
.band-light .card {
  box-shadow: var(--shadow-sm);
  border-color: rgba(25,28,31,0.08);
}
.section-light .card:hover,
.band-light .card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: rgba(25,28,31,0.14);
}

/* --shadow-dark-card is a white hairline — right on a dark surface, and
   invisible on a white one. This selector used to be unscoped, so any card
   NOT inside .section-light picked it up and lost its elevation while
   looking, on inspection, like it had a shadow. Scope it to dark contexts
   and let light cards use the real scale. */
.card { box-shadow: var(--shadow-sm); }
.on-dark .card, .section-dark .card, .hero-fullvh .card { box-shadow: var(--shadow-dark-card); }

/* Nav — replace border with shadow for more premium feel */
/* superseded by the frosted .topnav rule below, which forces none */
.topnav { border-bottom: none; }

/* ─── Funnel dark card container ────────────────────────────────── */
.funnel-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 56px 64px;
  margin: var(--space-12) 0;
}

/* ═══════════════════════════════════════════════════════════════════
   CORRECT video-behind-text hero — all layers absolutely positioned
   within an explicit 100vh container. This is the pattern used by
   aglet.co.za and similar premium video-hero sites.
═══════════════════════════════════════════════════════════════════ */
/* Perspective lives on the hero so the video plane can pivot in 3-D.
   1000px is shallow enough to feel like a screen you are close to. */
.hero-fullvh {
  perspective: 1000px;
  perspective-origin: 50% 50%;
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  /* Remove the old padding-block from .section that was pushing content out */
  padding-block: 0 !important;
}

/* ─── Hero pin-and-reveal: hero stays pinned in place while the next
   section rises over it like a curtain (rounded top + shadow). Extra
   wrapper height = scroll "slack" the hero remains stuck for. Pure
   CSS — no scroll-driven JS needed. ──────────────────────────────── */
/* Full bleed: no inset, no radius. The hero runs edge to edge and
   pins flush to the top of the viewport. */
/* isolation: isolate is load-bearing. Without a stacking context here,
   the sticky hero's z-index:1 escapes to the root and paints above every
   later section (all z-index:auto). The wrap is 175vh but the statement's
   -60vh rise only covers it to ~168vh, so the last stripe of pinned hero
   — which is where the segment ticker lives — showed through on top of
   whatever section came next. .statement carries z-index:3 for this same
   reason; isolating the wrap fixes it for everything downstream at once
   instead of stacking every section by hand. */
.hero-pin-wrap { position: relative; isolation: isolate; height: 175vh; background: var(--bg); }
.hero-pin-wrap .hero-fullvh { position: sticky; top: 0; z-index: 1; }
@media (max-width: 760px) {
  .hero-pin-wrap { height: 135vh; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pin-wrap { height: auto; }
  .hero-pin-wrap .hero-fullvh { position: relative; }
}

/* ─── Statement — the centred manifesto line directly below the hero.
   It is now the first panel to rise over the pinned hero, so it needs
   its own background and a z-index above the hero's sticky layer;
   without both, the video shows through as you scroll past. ──────── */
/* Rises over the pinned hero. z-index 3 clears the hero's sticky
   layer (1); the rounded top is what makes it read as a panel lifting
   rather than a flat edge sliding up. No scale — the rise is pure
   scroll, so it tracks the wheel exactly and cannot desync.
   No drop shadow either: at this point the iris has closed the hero to
   near-black, so a dark shadow would be invisible against it and would
   only smudge once the panel clears the hero. */
.statement {
  position: relative;
  z-index: 3;
  background: var(--bg);
  text-align: center;
  padding-block: 132px;
  /* THE RISE. Without this there is none: the wrap is 175vh and the
     hero 100vh, so the hero unsticks at scrollY 75vh — and in normal
     flow the statement's top edge also reaches the viewport at exactly
     75vh. Same instant, so they scrolled up together and the panel
     never crossed a stationary hero.
     Pulling it up 60vh makes it enter at 15vh instead, giving ~60vh of
     scroll where it climbs over a still-pinned hero. It also covers the
     wrap's own light background, which used to show below the hero. */
  margin-top: -60vh;
}
@media (max-width: 760px) {
  /* wrap is 135vh here, so the hero unsticks at 35vh — overlap scales down */
  .statement { margin-top: -45vh; }
}
.statement-h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5.4vw, 76px);
  font-weight: 500;
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  color: var(--fg);
  max-width: 22ch;
  margin: 0 auto;
}
.statement-lead {
  max-width: 62ch;
  margin: var(--space-8) auto 0;
  font-size: var(--text-lg);
  line-height: 1.62;
  color: var(--fg-2);
}
/* Shared setup for the two audience columns below it */
.dual-intro {
  text-align: center;
  margin-bottom: var(--space-12);
}
.dual-intro .lead {
  max-width: 54ch;
  margin-inline: auto;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.45;
  color: var(--fg);
}
@media (max-width: 760px) { .statement { padding-block: 72px; } }

/* Layer 0 — the video itself fills the full section */
.hero-vid {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
  display: block;
  /* Rounded like a CRT bezel, and scaled up so the 3-D rotation never
     swings a corner into frame. */
  border-radius: 3vw;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Registered so calc() can rely on it being a number, and so it has a
   defined initial value before the scroll handler first runs. */
@property --iris {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* ─── Concave screen + iris close ─────────────────────────────────
   Two overlapping falloffs: a broad radial darkening toward the
   perimeter, plus a tight inset shadow that turns hard in the last few
   percent. Real curved screens lose light abruptly at the rim, not
   gradually — that hard second stop is what stops this reading as an
   ordinary vignette.

   --iris is driven by scroll (0 at rest, 1 when the hero is leaving).
   Every stop position is pulled inward by it, so the clear centre
   shrinks and the darkness closes over the frame like a CRT powering
   down. The aperture shuts rather than the layer simply fading. */
.hero-curve {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 3vw;
  background: radial-gradient(ellipse 82% 78% at 50% 50%,
      transparent            0    calc(38%  - 38% * var(--iris)),
      rgba(0,0,0,0.22)            calc(66%  - 46% * var(--iris)),
      rgba(0,0,0,0.62)            calc(88%  - 52% * var(--iris)),
      rgba(0,0,0,0.97)            calc(100% - 55% * var(--iris)));
  box-shadow: inset 0 0 120px 40px rgba(0,0,0,0.55);
}

/* Layer 1 — dark gradient veil for text legibility */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    160deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.20) 40%,
    rgba(0,0,0,0.50) 100%
  );
  pointer-events: none;
}

/* Layer 2 — text content, centered vertically */
.hero-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-top: 64px; /* clear the sticky nav */
}
.hero-body .container { width: 100%; }
.hero-body h1         { max-width: 14ch; margin: 0 0 var(--space-6); }
.hero-body .lead      { max-width: 52ch; margin: 0 0 var(--space-5); }
.hero-body .hero-cta  { display: inline-flex; gap: var(--space-4); flex-wrap: wrap; }

/* Layer 2 — segment ticker pinned to the hero bottom */
.hero-ticker {
  position: absolute;
  bottom: 32px;
  left: 0; right: 0;
  z-index: 2;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

/* ─── Hero type scale ─────────────────────────────────────────────
   The old `.hero-fullvh h1 { font-size: clamp(32px,5vw,64px) }` lived
   here to keep a former hero headline clear of the ticker. Its
   descendant specificity (0,1,1) outranked .had-wordmark (0,1,0), so
   it silently capped the wordmark at 64px no matter what that rule
   asked for. The hero's only h1 is now the wordmark, which sizes
   itself, so the cap is removed rather than fought with !important. */
.hero-fullvh .lead {
  font-size: var(--text-base);
  margin: 0 0 var(--space-4);
  max-width: 46ch;
}
.hero-fullvh .eyebrow {
  margin: 0 0 var(--space-4);
}
/* Push hero text block up so it never reaches the ticker zone (≈72px) */
.hero-body {
  padding-bottom: 80px;
}


/* ═══════════════════════════════════════════════════════════════════
   AGLET-STYLE NAV — transparent over hero, blurs in on scroll,
   cobalt CTA, lowercase links, compact mobile pill
═══════════════════════════════════════════════════════════════════ */

/* Frosted glass bar (Brik pattern): the whole nav is one translucent
   panel, with the pills reading as lighter panels inside it. This was
   previously forced transparent with the blur cleared — that existed
   only because the inset hero put a white gutter behind the bar and a
   live blur smeared it. The hero is full-bleed on black now, so the
   blur has nothing to smear. */
.topnav {
  background: rgba(245,245,244,0.72) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  border-bottom: 1px solid rgba(14,14,13,0.07) !important;
  box-shadow: none !important;
  transition: background var(--motion-slow) var(--ease-out), backdrop-filter var(--motion-slow) var(--ease-out), box-shadow var(--motion-slow) var(--ease-out) !important;
}

/* Scrolled state: frosted dark bar */
/* Scrolled: the same frosted panel, darkened so page content passing
   underneath doesn't wash it out. Blur radius stays matched to the rest
   state so only the tint animates, not the glass itself. */
.topnav.is-scrolled {
  background: rgba(245,245,244,0.88) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  /* Bar edge, not a card: a hairline plus a soft cast. Deliberately
     outside the sm/md/lg card scale. */
  box-shadow: var(--shadow-md) !important;
}

/* ─── Nav dark theme — applied by initNavTheme when a dark section is
   passing beneath the fixed bar. The light treatment is the default;
   this inverts every piece of chrome. Colours are explicit rather than
   token-driven because the nav sits outside .on-dark, so --fg here
   still resolves to ink. ────────────────────────────────────────── */
.topnav.is-over-dark {
  background: rgba(11,11,11,0.52) !important;
  border-bottom-color: rgba(255,255,255,0.10) !important;
}
.topnav.is-over-dark.is-scrolled {
  background: rgba(11,11,11,0.80) !important;
  box-shadow: var(--shadow-dark-raised) !important;
}
.topnav.is-over-dark .logo { color: #ffffff !important; }
.topnav.is-over-dark nav a {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92) !important;
}
.topnav.is-over-dark nav a:hover,
.topnav.is-over-dark nav a.is-active {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.26);
  color: #ffffff !important;
}
/* Primary flips polarity: ink-on-light becomes white-on-dark, so it
   stays the highest-contrast element in either theme. */
.topnav.is-over-dark .btn-primary {
  background: #ffffff !important;
  color: #0E0E0D !important;
  border-color: #ffffff !important;
}
.topnav.is-over-dark .btn-primary:hover {
  background: #E4E4E2 !important;
  border-color: #E4E4E2 !important;
  box-shadow: var(--shadow-dark-raised) !important;
}
.topnav.is-over-dark .lang-trigger {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.16);
  color: #ffffff;
}
.topnav.is-over-dark .lang-trigger:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.26);
}
.topnav.is-over-dark .lang-flag { box-shadow: var(--hairline-light); }
.topnav.is-over-dark .lang-menu {
  background: rgba(16,16,16,0.94);
  border-color: rgba(255,255,255,0.14);
  box-shadow: var(--shadow-dark-raised);
}
.topnav.is-over-dark .lang-menu [data-lang] { color: rgba(255,255,255,0.82); }
.topnav.is-over-dark .lang-menu [data-lang]:hover { background: rgba(255,255,255,0.10); color: #ffffff; }
.topnav.is-over-dark .lang-menu [data-lang].is-active { background: rgba(255,255,255,0.14); color: #ffffff; }
.topnav.is-over-dark .nav-toggle { color: #ffffff; border-color: rgba(255,255,255,0.22); }

/* Cross-fade rather than snap as the theme flips mid-scroll. */
.topnav .logo,
.topnav nav a,
.topnav .btn-primary,
.topnav .lang-trigger { transition: background var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out); }

/* ─── Nav links as flexing glass pills (Brik pattern) ──────────────
   Each item is its own translucent panel that grows to share the bar's
   free width, with the label set left inside rather than centred —
   that off-centre label is what makes the row read as panels rather
   than buttons. flex:1 + min-width:0 lets them shrink below their
   content width instead of overflowing at narrow desktop sizes. */
.topnav nav a {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  /* Lifted clear of the bar's own 0.06 tint — at 0.07 the pills were
     indistinguishable from the panel they sit on. */
  background: rgba(14,14,13,0.045);
  border: 1px solid rgba(14,14,13,0.09);
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(14,14,13,0.78) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out) !important;
}
.topnav nav a:hover,
.topnav nav a.is-active {
  background: rgba(14,14,13,0.08);
  border-color: rgba(14,14,13,0.16);
  color: var(--fg) !important;
}

/* CTA: solid white against the frosted bar, matched to the pill
   geometry beside it. White is the strongest value available on this
   canvas, so it outranks the glass pills without spending the accent. */
.topnav .btn-primary {
  background: var(--fg) !important;
  color: #ffffff !important;
  border-color: var(--fg) !important;
  font-size: 14px !important;
  padding: 0 20px !important;
  height: 40px !important;
  border-radius: var(--radius-sm) !important;
  /* .btn's transition omits box-shadow, so the hover shadow would pop in
     instantly while the lift and colour eased. Restated here to include
     it — and transform stays on --motion-press so this button's press
     feedback matches every other button on the site. */
  transition: transform var(--motion-press) var(--ease-out), background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-base) var(--ease-out) !important;
}
/* A white button can't get much lighter, so the hover reads as a step
   DOWN in value plus a lift. The previous rgba(255,255,255,0.86) was
   only a few percent off #ffffff over dark glass — effectively no feedback. */
.topnav .btn-primary:hover {
  background: #2A2A28 !important;
  border-color: #2A2A28 !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md) !important;
}
/* Overrides .btn:active's scale(0.97), which would otherwise drop the
   translateY and make the press jump back down a pixel. */
.topnav .btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none !important;
}

/* Logo — heavy and tightly tracked, per the HD-style monogram. The old
   rules here set weight 400 / +0.12em for a light spaced wordmark and
   styled .logo-mark / .logo-group, which no longer exist. */
.topnav .logo     { font-weight: 700 !important; letter-spacing: -0.01em !important; }
.topnav .logo-lid { font-weight: 700 !important; }

/* ─── Mobile nav: compact pill like Aglet (left pill + right CTA) ─ */
@media (max-width: 760px) {
  .topnav { height: 56px !important; }
  .topnav nav,
  .topnav .nav-actions .lang-toggle { display: none !important; }

  /* Show the hamburger pill */
  .nav-toggle {
    display: flex !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: var(--radius-pill) !important;
    width: auto !important;
    padding: 0 14px !important;
    gap: 10px !important;
    height: 36px !important;
  }
  .nav-toggle svg { width: 16px !important; height: 16px !important; }

  /* Show mobile CTA as blue pill */
  .topnav .nav-actions { display: flex !important; }
  .topnav .btn-primary { display: inline-flex !important; height: 36px !important; padding: 0 16px !important; font-size: 13px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   TEXT GLITCH — chromatic aberration on "Kein Kontakt zu früh."
   Two clip-path slices (::before top / ::after bottom) shift in
   opposite directions with red/cyan channel offsets, firing for
   ~400ms every 8s to mirror the gorilla video's end-glitch feel.
═══════════════════════════════════════════════════════════════════ */
.glitch-text {
  position: relative;
  display: inline-block;
  animation: glitch-body 8s infinite;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-glitch);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  color: var(--accent); /* cobalt violet, same as .hl */
  pointer-events: none;
  line-height: inherit;
  font: inherit;
  letter-spacing: inherit;
}

/* Upper slice — red channel, shifts left */
.glitch-text::before {
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%);
  text-shadow: -4px 0 rgba(255, 20, 60, 0.9), 1px 0 rgba(0, 220, 255, 0.3);
  animation: glitch-top 8s infinite;
}

/* Lower slice — cyan channel, shifts right */
.glitch-text::after {
  clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%);
  text-shadow: 4px 0 rgba(0, 220, 255, 0.9), -1px 0 rgba(255, 20, 60, 0.3);
  animation: glitch-bot 8s infinite;
}

/* Main element: brief jitter + brightness flash */
@keyframes glitch-body {
  0%, 85%, 100% { transform: none; filter: none; }
  86%   { transform: translateX(-3px) skewX(-0.5deg); filter: brightness(1.2); }
  86.8% { transform: translateX(3px)  skewX(0.5deg);  filter: brightness(0.85); }
  87.5% { transform: translateX(-1px); filter: none; }
  88%   { transform: none; }
  90%   { transform: translateX(2px); filter: brightness(1.1); }
  90.5% { transform: translateX(-2px); }
  91%   { transform: none; filter: none; }
}

/* Top slice animation */
@keyframes glitch-top {
  0%, 85%, 100% { opacity: 0; transform: none; clip-path: polygon(0 0,100% 0,100% 0,0 0); }
  86%   { opacity: 1; transform: translateX(-5px); clip-path: polygon(0 0,100% 0,100% 38%,0 38%); }
  86.8% { transform: translateX(4px); clip-path: polygon(0 5%,100% 5%,100% 42%,0 42%); }
  87.5% { transform: translateX(-2px); clip-path: polygon(0 0,100% 0,100% 30%,0 30%); }
  88%   { opacity: 0; transform: none; clip-path: polygon(0 0,100% 0,100% 0,0 0); }
  90%   { opacity: 1; transform: translateX(6px); clip-path: polygon(0 0,100% 0,100% 45%,0 45%); }
  90.5% { transform: translateX(-4px); clip-path: polygon(0 10%,100% 10%,100% 35%,0 35%); }
  91%   { opacity: 0; transform: none; clip-path: polygon(0 0,100% 0,100% 0,0 0); }
}

/* Bottom slice animation */
@keyframes glitch-bot {
  0%, 85%, 100% { opacity: 0; transform: none; clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); }
  86%   { opacity: 1; transform: translateX(5px); clip-path: polygon(0 62%,100% 62%,100% 100%,0 100%); }
  86.8% { transform: translateX(-4px); clip-path: polygon(0 58%,100% 58%,100% 95%,0 95%); }
  87.5% { transform: translateX(2px); clip-path: polygon(0 65%,100% 65%,100% 100%,0 100%); }
  88%   { opacity: 0; transform: none; clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); }
  90%   { opacity: 1; transform: translateX(-6px); clip-path: polygon(0 55%,100% 55%,100% 100%,0 100%); }
  90.5% { transform: translateX(4px); clip-path: polygon(0 68%,100% 68%,100% 90%,0 90%); }
  91%   { opacity: 0; transform: none; clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .glitch-text, .glitch-text::before, .glitch-text::after { animation: none !important; }
}

/* ─── Glitch cycle: 3 seconds ─────────────────────────────── */
.glitch-text,
.glitch-text::before,
.glitch-text::after { animation-duration: 3s !important; }

/* ─── Werte stacking cards ───────────────────────────────── */
.werte-stack { position: relative; }

/* ─── Werte cards — structural, not illustrated ───────────────────
   Was a glowing amber diagram on a hardcoded navy panel: a different
   visual language from everything else, and two colours (#0c0e1c,
   #F59E0B) that exist nowhere in the palette. Stripped to composition
   only — oversized index numeral, outlined mono tag, hairline-ruled
   sub-points. Brutalist by construction: exposed grid and type doing
   the work, no decoration to fall out of step with the rest. */
.werte-card {
  position: sticky;
  top: 64px;
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  padding-block: 80px;
  border-radius: 0;           /* square, matching the other sections */
  border-top: 1px solid rgba(255,255,255,0.14);
  overflow: hidden;
}

/* Numeral column is fixed-width so all four align on the same axis
   regardless of how wide the text runs. */
.werte-grid {
  display: grid;
  grid-template-columns: minmax(120px, 18%) 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.werte-index {
  /* Wordmark face, not the heading face. Clash Display was reserved for
     the logo to stop it becoming a texture across every heading — but
     oversized index numerals are display furniture, not headings, so
     this is a second controlled role rather than a return to scattering
     it. Weight stays 400: the logo's 700 is far too heavy at 132px. */
  font-family: var(--font-wordmark);
  font-size: clamp(56px, 9vw, 132px);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.werte-body { max-width: 62ch; }

/* Same outlined-pill component as the funnel label, inverted for dark */
.werte-tag.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  margin: 0 0 22px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(255,255,255,0.72);
}

/* Rules rather than gaps — the structure is the ornament */
.werte-points { margin-top: var(--space-8); }
.werte-point {
  padding: var(--space-5) 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.werte-point:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.werte-point strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}
.werte-point p {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--text-sm);
  line-height: 1.6;
}

@media (max-width: 860px) {
  .werte-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .werte-index { font-size: clamp(44px, 14vw, 72px); }
}
/* grid columns stretch — image top/bottom flush with text top/bottom */
.werte-card .hero-split { align-items: stretch !important; }
.werte-card .ph-img.wide {
  aspect-ratio: unset !important;
  align-self: stretch !important;
  height: 100% !important;
  min-height: 300px;
  border: none;
}
/* illustration container: fill the full cell, centre the SVG */
.werte-illus { display: flex !important; align-items: center !important; justify-content: center !important; }

/* Was transparent — these relied on the body's dark gradient showing
   through. On the white canvas they must paint their own surface, or
   they render as white text on white. */
.section-dark { background: var(--bg); }

@media (max-width: 860px) {
  .werte-card { position: relative; top: 0; min-height: auto; border-radius: 0; padding: 48px 0; }
}

/* ─── Klick-Puls ────────────────────────────────────────────
   Einziges verbliebenes Cursor-Element: ein Ring pro Klick, der
   sich selbst wieder entfernt. Der Gorilla-Cursor selbst wird
   nativ per CSS gezeichnet (siehe Performance-Pass am Dateiende). */
@media (pointer: fine) {
  .cursor-ripple {
    position: fixed;
    pointer-events: none;
    z-index: 999998;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.95;
    animation: cursor-ripple 0.45s var(--ease-out) forwards;
  }
  @keyframes cursor-ripple {
    to { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
  }
}


/* ─── Team cards — 4-up Apple-style portrait overlay ────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  align-items: start;
}
/* Staggered offsets: the reference drops alternate cards so the row
   reads as scattered objects rather than a table. margin-top rather
   than transform, because .team-card:hover already uses translateY
   and a transform here would be cancelled by it. */
@media (min-width: 921px) {
  .team-grid > *:nth-child(even) { margin-top: 52px; }
}

.team-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-5);
  transition: transform var(--motion-slow) var(--ease-out);
}
.team-card:hover { transform: translateY(-4px); }

.team-card-body { flex: 1; }

.team-card-role {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin: 0 0 6px;
}
.team-card-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 500;
  color: #ffffff;
  margin: 0;
  line-height: 1.15;
}
.team-card-quote {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.65);
  font-style: italic;
  margin: 0;
}

@media (max-width: 920px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-card  { aspect-ratio: 4 / 3; }
}

/* ─── Team card hover ─────────────────────────────────────
   Chromatic glitch removed: three competing glitch systems read as
   noise. The hero headline keeps the effect as a single signature
   moment; everything else moves quietly. */
.team-card:hover {
  transform: translateY(-4px);
}

/* ─── Inline SVG tag icons ───────────────────────────────── */
.tag-icon { width: 12px; height: 12px; flex-shrink: 0; overflow: visible; display: inline-block; vertical-align: middle; }

/* ─── Werte SVG illustrations ────────────────────────────── */
.werte-illus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-size: unset !important;
}
.werte-illus-svg { width: 78%; height: auto; }

/* ─── Ambient orb glow — slow breathing animation ────────── */
@keyframes orb-breathe {
  0%, 100% {
    background-position: 0% 50%;
    background-size: 100% 100%;
  }
  50% {
    background-position: 5% 55%;
    background-size: 108% 108%;
  }
}



/* ─── Hero layout — one block, bottom-left ────────────────────────
   Was a 3-column grid with content in each corner: no reading order,
   and the primary CTA sat ~215px diagonally from the headline it was
   meant to follow. Everything now stacks in a single column so the eye
   runs eyebrow → wordmark → claim → action without jumping. */
.had-layout {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 40px 104px;
  overflow: hidden;
  /* Gives the parallax layers a shared vanishing point, so the
     wordmark's rotateX/rotateY reads as depth rather than skew. */
  perspective: 1100px;
  perspective-origin: 50% 50%;
  /* Shared by the CTA pair and the scroll cue so their top edges stay
     aligned — change the offset once and both follow. */
  --hero-cta-bottom: 104px;
  --hero-cue-h: 42px;
}
.had-block { max-width: 100%; margin-inline: auto; }

.had-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  color: rgba(255,255,255,0.68);
  margin: 0;
}
/* Wordmark demoted from 176px. It is the company name — it identifies,
   it does not persuade, so it should not be the largest thing here. */
/* Sized in vw so it fills the viewport width at any size, the way the
   reference does — a fixed px clamp would leave gutters on wide screens. */
.had-wordmark {
  font-family: var(--font-wordmark);
  font-size: clamp(44px, 13.2vw, 232px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.88;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 18px;
  white-space: nowrap;
}
.had-wordmark .hl {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: none;
}

/* In flow directly beneath the claim, not pinned to the far corner */
/* Pinned bottom-right, clear of the centred wordmark block. Sits
   above the ticker rather than overlapping it. */
/* Wrapper carries the positioning now, so note and buttons move as a
   unit and share the same right edge. The pair keeps the same bottom
   offset the scroll cue reads, so their baselines stay locked. */
.had-cta-block {
  position: absolute;
  right: 40px;
  bottom: var(--hero-cta-bottom);
  z-index: 3;
  text-align: right;
}
.had-cta-note {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  color: rgba(255,255,255,0.6);
}
.had-cta-pair {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  /* nowrap keeps the pair a single row — wrapping would break the
     scroll cue's baseline alignment */
  flex-wrap: nowrap;
}
@media (max-width: 860px) {
  .had-layout { --hero-cta-bottom: 96px; }
  .had-cta-block { right: 20px; }
}

/* 3 — hero primary goes white. Orange is now spent only on the nav CTA,
   and white is the strongest value available against the video. */
.had-btn.btn-primary {
  background: #ffffff !important;
  color: #0E0E0D !important;
  border-color: #ffffff !important;
}
.had-btn.btn-primary:hover {
  background: #E4E4E2 !important;
  border-color: #E4E4E2 !important;
}
.had-btn { height: 56px; padding: 0 36px; font-size: var(--text-base); white-space: nowrap; }

/* ─── Vision — statement over video ───────────────────────────────
   The Hobro treatment: large centred type sitting on footage, no card
   or panel between them. Uses hero-bg.mp4, an asset already in the
   repo that nothing referenced.

   The section is a dark island on the light canvas, so it carries the
   .on-dark scope's tokens via the selector list in that rule. The veil
   is what makes the type legible — the footage brightness varies frame
   to frame, and white text straight onto it fails the moment a light
   frame comes round. */
.vision {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  padding-block: clamp(120px, 16vw, 220px);
  isolation: isolate;       /* keeps the veil out of the page stacking context */
}
.vision-vid {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  /* The clip is cool blue-teal — the only blue on a site whose palette
     is warm off-white, ink and signal orange, which is exactly why this
     section read as imported. Stripping the colour makes it a neutral
     dark texture, the same treatment the hero video already gets. */
  /* Grauton ist fest ins JPEG gerechnet — kein Laufzeit-Filter mehr. */
}
.vision-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Darker at the edges than the middle so the type sits in the clear
     part and the frame still reads as an image, not a flat wash. */
  background:
    radial-gradient(ellipse 90% 80% at 50% 50%, rgba(11,11,11,0.42) 0%, rgba(11,11,11,0.72) 70%, rgba(11,11,11,0.86) 100%),
    linear-gradient(180deg, rgba(11,11,11,0.5) 0%, transparent 30%, transparent 70%, rgba(11,11,11,0.5) 100%);
}
.vision-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
.vision-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  margin: 0 0 var(--space-8);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: var(--radius-pill);
  color: rgba(255,255,255,0.72);
}
.vision-statement {
  max-width: 20ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(32px, 5.6vw, 84px);
  /* 400 was the odd one out — every other display line on the site is
     500 (statement, talk, contact heading, careers). */
  font-weight: 500;
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  color: var(--fg);
  text-wrap: balance;
}
/* The shared --fg-dim (0.34 white) is tuned for flat dark surfaces. Over
   video the backdrop luminance moves with the footage, and on the clip's
   brighter frames the dimmed clause measures 2.58:1 — under the 3:1 floor
   for large text. 0.46 holds 3.45–4.68:1 across the whole range, without
   darkening the veil, which would flatten the image behind it. */
.vision-statement .dim { color: rgba(255,255,255,0.46); }
@media (prefers-reduced-motion: reduce) {
  .vision-vid { display: none; }
}

/* ─── Let's talk ──────────────────────────────────────────────────
   Light-mode take on the reference: question, pill CTA, oversized
   letterforms drifting beneath, flanked by concentric arcs. The arcs
   are deliberate reuse — they are the nav's signal mark blown up, so
   the section extends the brand rather than importing a new idea. */
.talk {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding-block: clamp(72px, 9vw, 120px) clamp(110px, 15vw, 186px);
  text-align: center;
}
.talk-inner { position: relative; z-index: 2; }

/* Arcs — pinned to each edge of the stage, mirrored, so they centre on
   the wordmark rather than on the whole section (the reference's sit on
   its Lottie, not on the question above it). Hidden on narrow screens
   where they would crowd the type rather than frame it. */
.talk-signal {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(90px, 11vw, 150px);
  /* Measured against the reference: theirs are solid white on black —
     full contrast, not a watermark. At 0.20 on our light canvas they
     were invisible, which is why the section read as empty. */
  color: rgba(14,14,13,0.72);
  z-index: 1;
  pointer-events: none;
}
.talk-signal svg { width: 100%; height: auto; display: block; }
.talk-signal--l { left: 0; }
.talk-signal--r { right: 0; transform: translateY(-50%) scaleX(-1); }
/* Staggered so the pulse reads as travelling outward, like the nav mark */
.talk-arc { opacity: 0.22; animation: talk-arc-pulse 3.2s ease-in-out infinite; }
.talk-arc:nth-child(1) { animation-delay: 0s; }
.talk-arc:nth-child(2) { animation-delay: 0.22s; }
.talk-arc:nth-child(3) { animation-delay: 0.44s; }
.talk-arc:nth-child(4) { animation-delay: 0.66s; }
@keyframes talk-arc-pulse {
  0%, 100% { opacity: 0.18; }
  45%      { opacity: 0.85; }
}

.talk-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  margin: 0 0 var(--space-6);
  border: 1px solid rgba(14,14,13,0.16);
  border-radius: var(--radius-pill);
  background: var(--bg-light);
  color: var(--fg-2);
}
.talk-h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}

/* Stage — one big pale line with the button riding on it, the way the
   reference stacks its Lottie under the question. Height is pinned to
   the reference's 176px graphic so the proportions carry over. */
.talk-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(24px, 3.4vw, 44px);
  min-height: clamp(84px, 12.2vw, 176px);
}
/* Display face, sentence case — NOT the wordmark face. Clash Display is
   reserved for the logo, and caps are gone site-wide, so this stays type
   rather than becoming a second mark. */
.talk-shout {
  font-family: var(--font-display);
  font-size: clamp(54px, 12.8vw, 184px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.04em;
  /* Pale enough that a solid black pill sitting on it still reads. */
  color: rgba(14,14,13,0.13);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

/* Pill CTA, centred on the line. Hover keeps the box still and moves
   only colour and the arrow — the label must not shift under the
   cursor, so the lift is folded into the centring transform. */
/* Composed on .btn — this used to re-declare height, padding, radius, face,
   weight and transition, and had drifted to a pill with mono type at 60px.
   Only the centring and the accent hover are specific to it. */
.talk-cta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-sm);
}
/* The one button on the page that flips to the accent: it is the single
   closing ask, and hover is transient so it does not spend the accent. */
.talk-cta:hover {
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: var(--shadow-md);
  transform: translate(-50%, calc(-50% - 2px));
}
.talk-cta:active { transform: translate(-50%, -50%) scale(0.97); }

@media (max-width: 760px) {
  .talk-signal { display: none; }
  .talk-cta { position: static; transform: none; }
  .talk-cta:hover { transform: translateY(-2px); }
  .talk-cta:active { transform: scale(0.97); }
  .talk-stage { flex-direction: column; gap: var(--space-6); }
  .talk-shout { font-size: clamp(40px, 13vw, 72px); }
}
@media (prefers-reduced-motion: reduce) {
  .talk-arc { animation: none; opacity: 0.4; }
}

/* ─── Contact section ─────────────────────────────────────────────
   Migrated out of contact.html's inline <style> when the site became a
   single page. Rewritten for the light canvas: the original assumed a
   dark page and used rgba(255,255,255,…) throughout, which would have
   put white-on-white fields on the off-white background. Also picked up
   --gradient-brand for the submit button — the old rule referenced
   --gradient-sunset, a token that no longer exists, so the button was
   rendering with no background at all. */
.contact-section { background: var(--bg); }
.form-banner {
  display: none;
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
}
.form-banner.is-success {
  display: block;
  background: rgba(0,168,126,0.10);
  border: 1px solid rgba(0,168,126,0.30);
  color: #00815f;
}

/* ─── Scroll cue — capsule with a travelling dot ─────────────────
   The previous version was a 1px hairline with a moving gradient: too
   thin to notice against video, and it read as a stray rule rather
   than a control. A bordered capsule is a recognised affordance. */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  /* Shares the CTA pair's baseline — same offset, so the bottoms meet */
  bottom: var(--hero-cta-bottom);
  transform: translateX(-50%);
  width: 26px;
  height: var(--hero-cue-h);
  border: 1.5px solid rgba(255,255,255,0.42);
  border-radius: var(--radius-pill);
  display: flex;
  justify-content: center;
  z-index: 3;
  transition: border-color var(--motion-base) var(--ease-out);
}
.hero-scroll-cue:hover { border-color: rgba(255,255,255,0.8); }
.hero-scroll-dot {
  width: 5px; height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: #ffffff;
  animation: hero-scroll-dot 1.9s cubic-bezier(0.45,0,0.25,1) infinite;
}
/* Fades in at the top, travels down, fades before the base — so it
   never appears to collide with the capsule wall. */
@keyframes hero-scroll-dot {
  0%   { transform: translateY(0);    opacity: 0; }
  18%  { opacity: 1; }
  68%  { transform: translateY(17px); opacity: 1; }
  100% { transform: translateY(21px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-dot { animation: none; opacity: 0.9; }
}

/* Ticker segments are links now — they answer "do you serve my
   industry?", which is the first question a visitor has. */

@media (max-width: 860px) {
  .had-layout { padding: 92px 20px 96px; }
  .had-block { max-width: none; }
}

/* ─── Contact page (kontakt.html) ────────────────────────────────
   A questionnaire, not a form. Each field is a card whose prompt is a
   half-finished sentence the visitor completes, so the page reads as a
   conversation rather than a database row.

   Structure follows the reference: sticky detail rail on the left, a
   grid of prompt cards on the right, one full-bleed bar across the
   base. The voice stays ours — sentence case, not the reference's
   all-caps (caps were removed site-wide), mono kept for micro-labels
   only, and the signal mark instead of their globe.

   The inputs carry no chrome of their own: the CARD is the field. A
   bordered input inside a bordered card is two boxes doing one job,
   and it is what makes most "designed" forms still look like forms. */
.kontakt-page {
  /* The page is a single view, not a scroll. Every vertical metric is
     driven off viewport HEIGHT rather than width, so the whole form
     lands inside the fold on a laptop and simply relaxes on a large
     display — instead of fitting at one guessed size and overflowing
     everywhere else. Widths stay vw-based; only the vertical rhythm
     compresses. The clamp floors mean a genuinely short window scrolls
     rather than clipping anything. */
  --k-pad:    clamp(10px, 1.4vh, 20px);   /* card padding        */
  --k-gap:    clamp(8px, 1.2vh, 16px);    /* grid gap            */
  --k-type:   clamp(14px, 1.75vh, 18px);  /* prompts and inputs  */
  /* Die Zeilenhoehen kommen jetzt aus dem Inhalt, nicht aus drei fest
     gesetzten Slot-Hoehen. Nur das Textfeld bekommt eine Mindesthoehe —
     es ist das einzige Feld, das ohne eine sichtbar zu klein waere. */
  --k-note:   clamp(104px, 14vh, 176px);   /* Hoehe des Freitextfeldes */
  /* Clears the fixed bar, then a MINIMUM of breathing room. Anything
     beyond that comes from the centring below, not from a fixed value. */
  padding-block: calc(var(--nav-h) + clamp(12px, 2vh, 40px)) clamp(12px, 2vh, 40px);
  background: var(--bg);
}
/* This page ignores --container-max. The reference runs the grid almost
   edge to edge with ~5% gutters; capping it at 1200px squeezes five
   columns of content into the middle of the screen and the cards stop
   being able to hold a sentence. The legal strip below shares the same
   gutters so its left edge lines up with the rail. */
.kontakt-page .container,
.k-legal .container { max-width: none; padding-inline: clamp(20px, 3.2vw, 56px); }
.kontakt-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(32px, 8.5vw, 130px);
  align-items: start;
}

/* ── left rail ── */
.k-rail {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.9vh, 20px);
}
.k-rail-mark { width: clamp(26px, 3.4vh, 34px); height: auto; color: var(--fg); }
.k-rail-mark svg { width: 100%; height: auto; display: block; }
.k-rail-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  margin: 0 0 8px;
}
.k-rail-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.85;
  color: var(--fg);
  margin: 0;
}
.k-rail-value a:hover { color: var(--accent); }
/* Bullet separators, as in the reference — a rule would be heavier than
   the rail's own weight and would fight the mono text. */
.k-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg); }
/* Composed on .btn; only its placement in the rail is specific. */
.k-rail-cta { align-self: flex-start; }
.k-rail-cta:hover { background: #262625; }
.k-rail-cta svg { width: 14px; height: 14px; flex: none; }
/* .k-social ist entfallen: die Profile gibt es noch nicht, und Icons auf
   href="#" sind schlimmer als gar keine. Kommt zurueck, sobald die
   Kanaele wirklich stehen. */

/* ── heading ── */
.k-h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, min(6.4vw, 6vh), 92px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: 0 0 clamp(8px, 1.6vh, 32px);
}

/* ── mode toggle ──
   Two pills in a frosted capsule, the same control language as the nav.
   Sits under the headline so the heading reads as a response to the
   choice rather than a label above a control. */
.k-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 clamp(8px, 1.6vh, 40px);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-light);
  box-shadow: var(--shadow-sm);
}
.k-switch button {
  appearance: none;
  border: 0;
  cursor: pointer;
  height: clamp(30px, 4.4vh, 42px);
  padding: 0 22px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
  transition: background var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
}
.k-switch button:hover { color: var(--fg); }
.k-switch button[aria-selected="true"] { background: var(--fg); color: var(--bg-light); }
.k-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── prompt-card grid ── */
.k-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-gap); }
.k-card {
  display: flex;
  flex-direction: column;
  padding: var(--k-pad) calc(var(--k-pad) + 2px) calc(var(--k-pad) - 2px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: transparent;
  transition: border-color var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
/* The active card lifts off the canvas. Focus lives on the card, not on
   a ring around a borderless input — there is nothing there to ring. */
.k-card:focus-within {
  border-color: rgba(14,14,13,0.34);
  background: var(--bg-light);
  box-shadow: var(--shadow-sm);
}
/* Slots, not fields. Both modes fill die gleichen fuenf Positionen, so the
   toggle swaps the questions without the grid reflowing under the
   cursor — the page stays put and only the wording changes.

   Vorher lagen Volumen, Einverstaendnis und Absenden alle drei unter der
   Erreichbarkeits-Karte in Spalte 3. Die Spalte wurde dadurch fuenf Zeilen
   hoch, Spalte 1 und 2 nur zwei — links unten stand ein leeres Viertel der
   Seite. Jetzt ist es ein sauberes Rechteck: eine Zeile Kurzangaben, eine
   Zeile Freitext, darunter eine Leiste ueber die volle Breite. */
.k-slot-1 { grid-column: 1;          grid-row: 1; }   /* Name              */
.k-slot-2 { grid-column: 2;          grid-row: 1; }   /* Firma bzw. Rolle  */
.k-slot-4 { grid-column: 3;          grid-row: 1; }   /* Erreichbarkeit    */
.k-slot-3 { grid-column: 1 / span 2; grid-row: 2; }   /* Freitext          */
.k-slot-5 { grid-column: 3;          grid-row: 2; }   /* Volumen bzw. Start*/
.k-foot   { grid-column: 1 / span 3; grid-row: 3; }

/* Die Karten einer Zeile sind gleich hoch (Grid streckt sie). Damit das
   nicht nach zufaellig verteilten Feldern aussieht, haengen die Felder
   unten: die letzte Eingabezeile jeder Karte liegt auf einer Linie. */
.k-card > .field:first-of-type,
.k-card > .k-fields { margin-top: auto; }

/* Mode switch — only one set is in the layout at a time. display:none
   rather than visibility, so the hidden set contributes nothing to the
   grid; its controls are also disabled in JS so they neither validate
   nor submit. */
.k-grid[data-mode="projekt"] .k-only-job,
.k-grid[data-mode="job"] .k-only-projekt { display: none; }

.k-prompt {
  font-family: var(--font-body);
  font-size: var(--k-type);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg-dim);
  margin: 0 0 clamp(6px, 1.1vh, 14px);
}
/* Leading asterisk marks required, as in the reference — quieter than a
   trailing red star and it reads as part of the sentence. */
.k-prompt.is-required::before { content: '*'; color: var(--accent); margin-right: 1px; }
.k-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--fg-2);
  margin: 0 0 clamp(3px, 0.5vh, 6px);
}

.k-card .field { display: flex; flex-direction: column; gap: 2px; }
.k-card .input,
.k-card .select,
.k-card .textarea {
  width: 100%;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: var(--k-type);
  font-weight: 500;
  line-height: 1.45;
  color: var(--fg);
  caret-color: var(--accent);
  /* A writing line, not a box. Transparent at rest so the card looks
     exactly as designed, but an empty borderless input gives no cue
     where to type — the line appears the moment a pointer is near. */
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: border-color var(--motion-base) var(--ease-out);
}
.k-card:hover .input,
.k-card:hover .select,
.k-card:hover .textarea { border-bottom-color: var(--divider-soft); }
.k-card .input:focus,
.k-card .select:focus,
.k-card .textarea:focus {
  outline: none;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
}
.k-card .input::placeholder,
.k-card .textarea::placeholder { color: var(--muted); }
.k-card .textarea { min-height: 0; resize: none; }
.k-card .select {
  cursor: pointer;
  padding-right: 22px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fg-2) 50%),
    linear-gradient(135deg, var(--fg-2) 50%, transparent 50%);
  background-position: calc(100% - 7px) center, calc(100% - 3px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.k-card .field-error {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--danger);
  min-height: clamp(9px, 1.4vh, 15px);
}
.k-card .input.has-error,
.k-card .select.has-error,
.k-card .textarea.has-error { border: 0; }
/* The card carries the error state, since the input has no border to
   turn red. */
.k-card:has(.has-error) { border-color: rgba(226,59,74,0.55); }

/* Project card: the answer should fill whatever height the left column
   sets, so the textarea flexes rather than sitting at a fixed height. */
.k-card--project .field { flex: 1; }
.k-card--project .textarea { flex: 1; }
/* Company card: the website line sits at the foot, a quieter second ask */
/* Firmenname und Website als Paar unten in der Karte — nicht mit
   margin-top:auto auseinandergezogen, sonst klebt das eine oben und das
   andere unten und die Karte wirkt leer. */
.k-card--company .k-field-site { margin-top: clamp(8px, 1.3vh, 16px); }
.k-card--company .k-field-site .input { font-size: var(--text-base); }
/* Reach card: two labelled fields pushed apart down the card */
.k-card--reach .k-fields { display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(8px, 1.3vh, 16px); }

/* ── consent ── */
.k-consent { padding: 0 2px; }
.k-consent-row { display: flex; align-items: flex-start; gap: 12px; }
.k-consent input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  margin: 1px 0 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: background var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
.k-consent input:checked { background: var(--fg); border-color: var(--fg); }
.k-consent input:checked::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  margin: 2px auto 0;
  border: solid var(--bg-light);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.k-consent input.has-error { border-color: var(--danger); }
.k-consent label {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.5vh, 12px);
  line-height: 1.5;
  letter-spacing: var(--tracking-label);
  color: var(--fg-2);
  cursor: pointer;
}
.k-consent label a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.k-consent label a:hover { color: var(--accent); }
.k-consent .field-error {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--danger);
  min-height: 15px;
  margin-left: 32px;
}

/* ── submit ──
   The reference ends on a full-bleed black bar. Ours uses the site's
   primary CTA instead — same pill, weight, radius and travelling arrow
   as every other "Anfrage stellen" on the site — sitting at the foot of
   the third column, where the questionnaire actually ends. */
/* Abschlussleiste: Einverstaendnis links, Absenden rechts, eine Haarlinie
   darueber. Sie schliesst das Raster unten sauber ab — vorher endete das
   Formular mit einem einzelnen orangen Knopf, der rechts in der Luft hing. */
.k-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px clamp(20px, 4vw, 48px);
  margin-top: clamp(4px, 1vh, 14px);
  padding-top: clamp(10px, 1.6vh, 20px);
  border-top: 1px solid var(--border);
}
.k-submit { flex: none; }
.k-submit[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Das Freitextfeld ist das einzige, das ohne Mindesthoehe zu klein waere;
   es bestimmt damit die Hoehe der zweiten Zeile. */
.k-card--project .textarea { min-height: var(--k-note); }

@media (max-width: 1080px) {
  .k-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-slot-1 { grid-column: 1;          grid-row: 1; }
  .k-slot-2 { grid-column: 2;          grid-row: 1; }
  .k-slot-3 { grid-column: 1 / span 2; grid-row: 2; }
  .k-slot-4 { grid-column: 1;          grid-row: 3; }
  .k-slot-5 { grid-column: 2;          grid-row: 3; }
  .k-foot   { grid-column: 1 / span 2; grid-row: 4; }
  .k-card--reach .k-fields { flex-direction: row; gap: 24px; }
  .k-card--reach .k-fields > * { flex: 1; }
}
@media (max-width: 860px) {
  .kontakt-layout { grid-template-columns: 1fr; }
  .k-main { order: 1; }
  .k-rail { position: static; order: 2; margin-top: var(--space-12); }
  .k-grid { grid-template-columns: 1fr; }
  .k-grid > * { grid-column: 1 !important; grid-row: auto !important; }
  .k-card--project .textarea { min-height: 132px; }
  .k-card--reach .k-fields { flex-direction: column; gap: 18px; }
  .k-foot { flex-direction: column; align-items: stretch; }
  .k-submit { width: 100%; justify-content: center; }
}


/* Contact page keeps only a legal strip in place of the site footer —
   see the note in kontakt.html. */
.k-legal { background: var(--bg); padding-block: clamp(4px, 1.2vh, 26px) clamp(6px, 1.5vh, 36px); }
.k-legal-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  color: var(--fg-2);
}
.k-legal-links { display: flex; gap: 22px; }
/* Der schwebende WhatsApp-Knopf sitzt unten rechts. Auf jeder anderen
   Seite schwebt er ueber einem hohen dunklen Footer, hier ueber einer
   duennen Zeile — ohne diesen Freiraum liegt er auf "Datenschutz". */
@media (min-width: 861px) { .k-legal .k-legal-inner { padding-right: 76px; } }
.k-legal a { color: var(--fg-2); }
.k-legal a:hover { color: var(--accent); }

/* Section intro block — eyebrow above a heading, held to a readable
   measure. NOT sized in ch: this wrapper carries no font-size of its
   own, so ch resolves against the inherited 16px body text rather than
   the ~79px heading inside it. The previous `max-width: 40ch` therefore
   computed to 369px inside a 1200px container and broke the heading
   one word per line. ch only means what you expect on the element that
   actually sets the type size. */
.section-head { max-width: min(720px, 62%); margin-bottom: var(--space-12); }
@media (max-width: 860px) { .section-head { max-width: none; } }

/* ─── Careers / client blocks ─────────────────────────────────────
   Heading beside its proof-list. Both blocks used to be columns of a
   two-up whose other half has moved, so they share one layout rather
   than each inventing a grid. */
.careers-stack { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 88px); }
.careers-head {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.careers-lead { margin-top: var(--space-5); max-width: 46ch; }
.careers-cta  { margin-top: var(--space-8); }
/* Sits under the section h2, so it steps down rather than competing. */
.careers-roles-h {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 var(--space-8);
}

/* Was ten copies of the same inline style block across two lists. */
.benefit-title { font-weight: 600; color: var(--fg); margin: 0 0 var(--space-4); }
.benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.benefit-list li { display: flex; gap: 10px; color: var(--fg-2); }
.benefit-arrow { color: var(--muted); flex-shrink: 0; }

@media (max-width: 920px) {
  .careers-head { grid-template-columns: 1fr; }
}

/* ─── Contact page: one full viewport ─────────────────────────────
   The form is meant to be a single view, so the page claims the whole
   viewport and the legal strip sits on the floor of it. Without this
   the strip stopped wherever the form happened to end and left a band
   of dead canvas beneath it. main takes the slack, which also means
   any leftover height lands BELOW the form rather than above it. */
.page-kontakt { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
/* The fixed nav and the drawer are out of flow, so they are not flex
   items and this does not disturb them.

   Centring rather than a fixed top gap: whatever height is left over
   after the form and the strip gets split above and below the form, so
   a tall window opens up and a short one packs down to the padding
   minimum on its own. flex-grow with basis:auto means the page never
   ends up SHORTER than its content, so centring can't clip the top. */
.page-kontakt .kontakt-page {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-kontakt .k-legal { flex: none; margin-top: auto; }

/* Short windows: the form's intrinsic height plus a 64px fixed bar plus
   the legal strip is very close to 720px once the type floors bind, so
   any breathing room at all tips it into a scrollbar for ~14px. Below
   this height the optional padding goes to almost nothing — the type and
   card padding stay put, only the air around the block gives way. */
@media (max-height: 780px) {
  .page-kontakt .kontakt-page { padding-block: calc(var(--nav-h) + 8px) 4px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE + TABLET
   Consolidated here rather than adding to the ten ad-hoc breakpoints
   scattered above. Three real bugs and two layout improvements.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tablet: 768–920px was collapsing three columns straight to one,
      wasting most of the width. Two columns fit comfortably. ────── */
@media (min-width: 601px) and (max-width: 920px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 860px) {
  .k-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-grid > * { grid-column: auto !important; grid-row: auto !important; }
  .k-slot-3, .k-slot-4 { grid-column: span 2 !important; }
}

/* ── BUG: the hero CTA pair is nowrap, so at 375px it measured 400px
      and the primary button was clipped off the left edge. Below 560
      the pair stacks; the note and buttons go full width so nothing
      is cut. ─────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* Stays absolutely positioned — .had-layout is a centred flex row, so
     making this static turns it into a sibling of the wordmark and the
     two get squeezed side by side. Span it instead. */
  .had-cta-block {
    left: var(--container-gutter-phone);
    right: var(--container-gutter-phone);
    text-align: left;
  }
  .had-cta-pair { flex-wrap: wrap; }
  .had-cta-pair .btn { flex: 1 1 100%; justify-content: center; }
  .had-cta-note { text-align: left; }
  /* The cue sat on top of the stacked buttons; it is decorative and the
     page is obviously scrollable on a phone. */
  .hero-scroll-cue { display: none; }
}

/* ── BUG: every form control computed to 14.2px. iOS Safari zooms the
      viewport whenever a focused input is under 16px, which throws the
      user out of the layout mid-form. 16px is the threshold, not a
      preference. ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .kontakt-page { --k-type: 16px; }
  .input, .textarea, .select { font-size: 16px; }
}

/* ── Touch targets. Pointer-coarse only, so the desktop sizing that the
      design was tuned around is untouched. 44px is the Apple HIG
      minimum; the checkbox goes to 24px, the WCAG 2.5.8 floor, because
      a 44px checkbox would dwarf its own label. ─────────────────── */
@media (pointer: coarse) {
  .nav-toggle { min-width: 44px; min-height: 44px; }
  .topnav .btn-primary { min-height: 44px !important; }
  .k-switch button { min-height: 44px; }
  .k-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -10px;          /* keep the visual gap while growing the hit area */
  }
  .k-consent input { width: 24px; height: 24px; }
  .k-rail-value a, .k-legal-links a { display: inline-block; padding: 10px 6px; margin: -10px -6px; }
  /* The privacy link sits inline inside the consent label, so it needs
     vertical room without breaking the sentence it lives in. */
  .k-consent label a { display: inline-block; padding-block: 5px; }
  /* Standalone navigation link on the legal pages. Inline prose links
     there are left alone — WCAG 2.5.8 exempts targets constrained by the
     line-height of surrounding text. */
  .legal-back { display: inline-block; padding-block: 11px; }
  /* A custom cursor on a touch device tracks nothing. */
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ── BUG: the funnel heading stayed sticky once the two columns stacked,
      so the accordion cards scrolled underneath it and the text overlapped
      the cards. The override at the 860px block above could never work:
      `.funnel-header` is (0,1,0) and `#leistungen.funnel-reveal
      .funnel-header` is (1,2,0), so the desktop rule won on specificity —
      and matching the specificity there still lost, because that block sits
      earlier in the file. It has to be both as specific AND later. ───── */
@media (max-width: 860px) {
  #leistungen.funnel-reveal .funnel-header,
  .funnel-header { position: static; top: auto; }
}


/* ─── LID additions (Aug 2026) ────────────────────────────────────
   Appended block: hero claim line and clickable service cards.
   The mobile CTA overflow is already fixed above (flex-wrap pass). */

.had-claim {
  font-family: var(--font-display, inherit);
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 6px 0 0;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}

/* Service link cards on the home page */
.svc-card { display: block; text-decoration: none; color: inherit; }
.svc-card:hover { transform: translateY(-3px); }
.svc-more {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
}


/* ─── Round 3 (Aug 2026): text-link nav + tighter section rhythm ──
   The nav pills read as input fields — visitors tried to type into
   them. Overridden to plain text links. Section padding trimmed by
   roughly a third; the reveal animations were stretching the page. */

.topnav nav a {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  padding: 0 18px;
  border-radius: 0;
  font-weight: 500;
}
.topnav nav a:hover { background: transparent; text-decoration: underline; text-underline-offset: 6px; }

:root {
  --section-y-desktop: clamp(72px, 9vw, 128px);
  --section-y-tablet: 64px;
  --section-y-phone: 48px;
}


/* Stats row: four real figures instead of three offer restatements */
.stats-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stats-grid { grid-template-columns: 1fr; } }


/* ──────────────────────────────────────────────────────────────
   Redesign-Paket 08/2026: Hero-Pay-Zeile, Logo-Strip, Callcenter-
   Breite, Coaching-Band, Testimonials, Karriere-Badge, Vision-Fix.
   Bewusst als Anhang: spätere Regeln gewinnen bei gleicher
   Spezifität, so bleibt der Diff klein und rückbaubar.
   ────────────────────────────────────────────────────────────── */

/* Hero: Risikoumkehr-Pille unter dem Claim */
.had-pay {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-4);
  padding: 10px 20px;
  border: 1px solid rgba(245, 95, 25, 0.45);
  border-radius: var(--radius-pill);
  background: rgba(245, 95, 25, 0.14);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-sm);
}
.had-pay-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

/* Logo-Strip: ruhige graue Wortmarken im Endloslauf */
.logo-strip { background: var(--surface); border-top: 1px solid var(--surface-deep); border-bottom: 1px solid var(--surface-deep); padding: 30px 0 38px; overflow: hidden; }
.logo-strip-label { text-align: center; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.logo-marquee { overflow: hidden; }
.logo-track { display: flex; gap: 56px; align-items: center; width: max-content; animation: logo-roll 30s linear infinite; }
.logo-track .lgbox { flex: none; display: flex; align-items: center; height: 48px; opacity: 0.8; text-decoration: none; transition: opacity var(--motion-base) var(--ease-out); }
.logo-track a.lgbox:hover, .logo-track a.lgbox:focus-visible { opacity: 1; }
/* Beim Drueberfahren stoppt das Band — sonst wandert das Logo unter
   dem Mauszeiger weg und niemand trifft es. */
.logo-marquee:hover .logo-track, .logo-marquee:focus-within .logo-track { animation-play-state: paused; }
.logo-track .lgbox svg { overflow: visible; }
@keyframes logo-roll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* Callcenter-Sektion: Referenzkarte rechts */
.ref-card { background: var(--surface); border: 1px solid var(--surface-deep); border-radius: var(--radius-lg); padding: var(--space-6); }
.ref-card-logo { height: 30px; margin-bottom: var(--space-4); }

/* Coaching-Band: dunkle Sektion mit Beweis */
.coach-band { background: var(--bg-dark); color: #fff; }
.coach-band h2 { color: #fff; }
.coach-band .careers-lead { color: rgba(255,255,255,0.6); }
.coach-proof { border-left: 4px solid var(--accent); padding: 6px 0 6px 24px; margin: var(--space-8) 0; }
.coach-proof-big { font-size: clamp(18px, 2.2vw, 24px); font-weight: 700; line-height: 1.35; max-width: 680px; margin: 0; }
.coach-proof-src { font-size: var(--text-sm); color: rgba(255,255,255,0.45); margin: 8px 0 0; }

/* Testimonials: Schmerz → Skepsis → Ergebnis */
.tstm-card { display: flex; flex-direction: column; gap: var(--space-4); }
.tstm-logo { height: 26px; }
.tstm-logo svg { height: 26px; }
.tstm-q { margin: 0; font-size: 15px; line-height: 1.6; font-weight: 500; }
.tstm-q::before { content: "„"; color: var(--accent); font-weight: 800; }
.tstm-q::after { content: '"'; }
.tstm-who { margin-top: auto; font-size: var(--text-sm); color: var(--fg-2); }
.tstm-who b { color: var(--fg); display: block; }

/* Karriere: Jugendwort-Badge — nur hier, der B2B-Teil bleibt slangfrei */
.lit-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--surface-deep); border-radius: var(--radius-pill); padding: 7px 16px; font-size: 13px; font-weight: 700; margin: 0 0 var(--space-4); }
.lit-badge span { filter: none; }

/* Vision-Band-Fix: Gorilla sichtbar machen. Bild heller, Abdunklung
   nur noch rechts hinter dem Text, Text rechts statt mittig auf dem
   Gesicht. Der Gorilla steht links im Bild — jetzt sieht man ihn. */
/* Helligkeit ist fest ins JPEG gerechnet — ein CSS-Filter auf einem
   grossen Bild kostet bei jedem Scroll-Repaint Leistung. */
.vision-veil {
  background:
    linear-gradient(270deg, rgba(11,11,11,0.82) 18%, rgba(11,11,11,0.35) 52%, rgba(11,11,11,0.05) 80%),
    linear-gradient(180deg, rgba(11,11,11,0.35) 0%, transparent 25%, transparent 75%, rgba(11,11,11,0.35) 100%);
}
.vision-inner { text-align: left; max-width: 640px; margin-left: auto; margin-right: 0; }
.vision-statement {
  text-align: left;
  max-width: none;
  margin: 0;
  font-size: clamp(26px, 3.2vw, 48px);
  line-height: 1.15;
}
.vision-statement .hl { color: var(--accent); -webkit-text-fill-color: var(--accent); }


/* Hero 2.0: linksbündiger Claim-Aufbau statt zentrierter Wortmarke —
   So entschieden nach Live-Vergleich mit dem Preview-Entwurf.   */
.had-layout { justify-content: flex-start; text-align: left; align-items: center; }
.hero2 { max-width: 820px; margin-inline: 0; }
.hero2-kicker { color: var(--accent); }
.hero2-h1 {
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 88px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.02;
  color: #ffffff;
  margin: 0 0 var(--space-5);
}
.hero2-h1 .hl { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.hero2-sub { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: rgba(255,255,255,0.72); max-width: 660px; margin: 0; }
.hero2 .had-pay { margin-top: var(--space-5); }
.hero2-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--space-6); }
.hero2-note { margin-top: var(--space-4); font-family: var(--font-mono, monospace); font-size: 12px; color: rgba(255,255,255,0.5); }
@media (max-width: 640px) { .hero2-h1 { font-size: clamp(34px, 10vw, 48px); } }

/* Globale Beruhigung: die Riesen-Typo eine Stufe runter, Sektionen
   dichter — die Seite soll verkaufen, nicht nur beeindrucken. */
:root { --section-y-desktop: clamp(56px, 7vw, 96px); }
.section h2 { font-size: clamp(26px, 3vw, 44px); }
.careers-head h2 { font-size: clamp(26px, 3vw, 44px); }
.statement-h2 { font-size: clamp(28px, 3.8vw, 56px); }
.section .lead { font-size: clamp(15px, 1.25vw, 18px); }


/* Leistungs-Grid (4 Karten) + Abschluss-Band aus dem Entwurf */
.svc4-grid { grid-template-columns: repeat(4, 1fr); }
/* Drei statt vier Spalten — vorher ein Inline-Style auf der Seite, den
   keine Media Query erreichen konnte: das Raster blieb auch auf dem
   Handy dreispaltig und schob die Seite aus dem Bildschirm. */
.svc4-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .svc4-grid, .svc4-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc4-grid, .svc4-grid--3 { grid-template-columns: 1fr; } }
.svc4-card { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: inherit; position: relative; transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out); }
.svc4-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 14px 34px rgba(14,14,13,0.10)); }
.svc4-card h3 { font-size: 17px; margin: 0; }
.svc4-num { font-family: var(--font-mono, monospace); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); margin: 0; }
.svc4-more { margin-top: auto; font-size: var(--text-sm); font-weight: 600; color: var(--accent); }
.svc4-card--dark { background: var(--bg-dark); border-color: #262625; color: #ffffff; }
.svc4-card--dark .card-note { color: #9a9a97; }
.svc4-card--dark h3 { color: #ffffff; }
.svc4-flag { position: absolute; top: -11px; right: 14px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; border-radius: var(--radius-pill); padding: 4px 12px; }

.cta-final { background: var(--accent); color: #ffffff; }
.cta-final h2 { color: #ffffff; }
.cta-final .lead { color: rgba(255,255,255,0.85); margin-top: var(--space-3); }
.cta-final-mark { margin-bottom: var(--space-4); }
.cta-final-btn { background: #ffffff; color: var(--accent); margin-top: var(--space-6); }
.cta-final-btn:hover { background: var(--bg); }

/* Highlights in Überschriften sind ab jetzt konsequent orange —
   das halbtransparente Grau las sich wie ein Renderfehler. */
h1 .hl, h2 .hl,
.section-light h1 .hl, .section-light h2 .hl,
.coach-band .hl, .cta-final .hl {
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}


/* Stats-Reihe und nummerierte Schritte — von den Leistungsseiten
   genutzt (Callcenter, Coaching). Zahlen im Akzent, Schritte mit
   automatischer Nummerierung, damit Umstellungen nichts kaputt machen. */
.stats { display: flex; gap: var(--space-10, 52px); flex-wrap: wrap; }
.stats .num { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1; color: var(--accent); }
.stats .lbl { font-size: var(--text-sm); color: rgba(255,255,255,0.55); margin-top: 6px; max-width: 190px; }
.section-light .stats .lbl, .section:not(.coach-band) .stats .lbl { color: var(--fg-2); }

.steps { counter-reset: lidstep; margin-top: var(--space-4); }
.steps .step { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--surface-deep); }
.steps .step:last-child { border-bottom: 1px solid var(--surface-deep); }
.steps .step::before {
  counter-increment: lidstep;
  content: counter(lidstep, decimal-leading-zero);
  font-family: var(--font-mono, monospace);
  font-size: 14px; font-weight: 700; color: var(--accent);
  min-width: 38px;
}
.steps .step h3 { font-size: 16px; margin: 0; }
.steps .step p { font-size: var(--text-sm); color: var(--fg-2); margin: 4px 0 0; }


/* Branchenzeile im Hero: ersetzt das umlaufende Segment-Band.
   Zwei Laufbänder direkt hintereinander (Segmente + Logo-Strip) waren
   zu viel Bewegung, und die sichtbare Wiederholung las sich wie ein
   Fehler. Jetzt eine ruhige Faktenzeile in der Textspalte — sie folgt
   dem linksbündigen Hero, statt quer darunter zu laufen. */
.hero2-segs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.14);
  max-width: 680px;
  font-size: 14px;
  color: rgba(255,255,255,0.68);
}
.hero2-segs .dim { color: rgba(255,255,255,0.38); }
.hero2-segs-label {
  display: inline-block;
  margin-right: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero2-segs-label { flex: 0 0 auto; margin-right: 0; }


/* Hero-Pin abgeschafft. Der Hero klebte 175vh lang fest, damit die
   Iris-Blende zulaufen und das alte Manifest-Statement darüber
   aufsteigen konnte. Das Statement gibt es nicht mehr, also kostete
   der Pin nur noch drei Umdrehungen am Mausrad, bevor sich überhaupt
   etwas bewegte. Jetzt scrollt die Seite ab der ersten Umdrehung.
   Die Iris-JS steigt bei slack <= 0 sauber selbst aus. */
.hero-pin-wrap { height: auto; }
.hero-pin-wrap .hero-fullvh { position: relative; }
@media (max-width: 760px) { .hero-pin-wrap { height: auto; } }


/* Sektions-Rhythmus: sieben helle Sektionen hintereinander lagen alle
   auf demselben Grau (.section-light ist transparent), dadurch floss
   ein Thema ins naechste und die Abstaende dazwischen sahen aus wie
   Fehler. Jetzt wechseln helle Sektionen zwischen Seitengrau und
   Weiss — jede Sektion liest sich als eigenes Kapitel, ohne dass wir
   Trennlinien brauchen. Reihenfolge: Grau, Weiss, Grau, Dunkel, Weiss,
   Bild, Grau, Weiss, Grau, Weiss, Orange. */
.section--paper { background: var(--surface); }
/* Karten auf Weiss brauchen eine andere Fuellung, sonst verschwinden
   sie im Untergrund — leicht zurueckgesetzt statt erhoben. */
.section--paper .card,
.section--paper .ref-card { background: var(--bg); border-color: var(--surface-deep); }
.section--paper .svc4-card--dark { background: var(--bg-dark); border-color: #262625; }


/* Hero auf dem Handy: seit der Pin weg ist, sitzt der Hero direkt unter
   der festen Kopfleiste — bei viel Text lief die erste Zeile darunter.
   Auf schmalen Schirmen waechst der Hero jetzt mit dem Inhalt statt auf
   100vh festgenagelt zu sein, und der Inhalt beginnt unter der Leiste. */
@media (max-width: 760px) {
  .hero-fullvh { height: auto; min-height: 100svh; }
  .had-layout {
    position: relative;
    inset: auto;
    padding: 104px 24px 56px;
    min-height: 100svh;
  }
  .hero2 { max-width: none; }
  .hero2-ctas .btn { width: 100%; justify-content: center; }
  .hero2-segs { gap: 6px 16px; font-size: 13px; }
}


/* Coaching-Band zweispaltig: die rechte Haelfte stand leer und liess
   die Sektion kahl wirken. Statt Deko stehen dort jetzt die Zahlen,
   die das Angebot verkaufen. */
.coach-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-10, 56px); align-items: center; }
.coach-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5, 22px); }
.coach-figures > div { border-top: 1px solid rgba(255,255,255,0.18); padding-top: var(--space-4, 18px); }
.coach-figures .num { font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 54px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--accent); }
.coach-figures .lbl { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.55); margin-top: 10px; }
.coach-roi { margin-top: var(--space-6, 28px); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.72); }
.coach-roi strong { color: #fff; }
@media (max-width: 900px) {
  .coach-split { grid-template-columns: 1fr; gap: var(--space-8, 40px); }
  .coach-figures { margin-top: 0; }
}
@media (max-width: 620px) { .coach-figures { grid-template-columns: 1fr; } }


/* Markenzeichen im Coaching-Band: der echte Hero-Gorilla, rechts
   eingeblendet und nach links weich auslaufend. Wiedererkennung mit
   dem Motiv, das die Seite oben etabliert — nicht die Cursor-Zeichnung. */
.coach-band { position: relative; overflow: hidden; }
.coach-band::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 46%;
  background: url("../assets/gorilla-face.jpg") right center / cover no-repeat;
  opacity: 0.38;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%, #000 100%);
  pointer-events: none;
  z-index: 0;
}
.coach-band .container { position: relative; z-index: 1; }
.coach-figures .lbl { text-shadow: 0 1px 12px rgba(0,0,0,.7); }
@media (max-width: 900px) {
  .coach-band::after { width: 100%; opacity: 0.20;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 70%); }
}


/* Über uns: Gründerkarten mit Porträt und Textspalte, dazu das
   Glaubenssatz-Feld im Silberrücken-Band. */
.founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6, 28px); }
.founder-card { background: var(--bg); border: 1px solid var(--surface-deep); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.founder-photo { aspect-ratio: 4 / 3; background-size: cover; background-position: center 22%; background-color: #0e1020; }
.founder-body { padding: var(--space-6, 28px); display: flex; flex-direction: column; gap: var(--space-3, 14px); }
.founder-role { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0; }
.founder-card h3 { font-size: 22px; margin: 0; }
.founder-body p { font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0; }
.founder-quote { border-left: 3px solid var(--accent); padding-left: 16px; font-style: italic; color: var(--fg) !important; margin-top: var(--space-2, 10px) !important; }
@media (max-width: 860px) { .founder-grid { grid-template-columns: 1fr; } }

.creed { border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-lg); padding: var(--space-7, 34px); background: rgba(255,255,255,0.03); }
.creed-line { font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); font-weight: 600; color: var(--accent); margin: 0 0 var(--space-4, 18px); line-height: 1.1; }
.creed-note { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.62); margin: 0; }
.creed-note strong { color: #fff; }


/* Karriere-Teaser: die rechte Haelfte stand leer. Jetzt die drei
   Einstiege als klickbare Zeilen — Bewerber sehen sofort, was es
   ueberhaupt gibt, statt erst auf die Karriereseite wechseln zu muessen. */
.role-list { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-4, 18px); }
.role {
  display: grid;
  grid-template-columns: 40px 1fr 20px;
  align-items: center;
  gap: var(--space-4, 18px);
  padding: var(--space-4, 18px);
  background: var(--surface);
  border: 1px solid var(--surface-deep);
  border-radius: var(--radius-md, 12px);
  text-decoration: none;
  color: inherit;
  transition: transform var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
.role:hover { transform: translateX(3px); border-color: var(--accent); }
.role-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(245,95,25,0.10); color: var(--accent); }
.role-ico svg { width: 20px; height: 20px; }
.role-txt { display: flex; flex-direction: column; gap: 3px; }
.role-txt strong { font-size: 15px; }
.role-txt span { font-size: 13.5px; color: var(--fg-2); line-height: 1.5; }
.role-go { color: var(--accent); font-size: 18px; }
.role-foot { margin-top: var(--space-4, 18px); font-size: 13.5px; color: var(--fg-2); font-style: italic; }


/* FAQ als Aufklapp-Liste statt Kartenwand. Bewusst mit <details>:
   die Antworten bleiben vollstaendig im Quelltext, also lesen Google
   und KI-Suchen sie weiter — nur der Leser sieht erst die Fragen. */
.faq-list { border-top: 1px solid var(--surface-deep); max-width: 900px; }
.faq-item { border-bottom: 1px solid var(--surface-deep); }
.faq-item summary {
  display: flex; align-items: flex-start; gap: var(--space-4, 18px);
  padding: var(--space-5, 22px) 0;
  font-size: 17px; font-weight: 600; line-height: 1.4;
  list-style: none; cursor: pointer;
  transition: color var(--motion-base) var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--font-mono, monospace); font-size: 22px; font-weight: 400;
  line-height: 1; color: var(--accent);
  transition: transform var(--motion-base) var(--ease-out);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--accent); }
.faq-item > p {
  margin: 0 0 var(--space-5, 22px);
  padding-right: 48px;
  font-size: 15.5px; line-height: 1.7; color: var(--fg-2);
  max-width: 760px;
}
@media (max-width: 560px) {
  .faq-item summary { font-size: 16px; }
  .faq-item > p { padding-right: 24px; }
}


/* Referenz-Karten: Ziel der Karussell-Links. scroll-margin, damit die
   Karte nicht unter der festen Kopfleiste landet. */
/* align-items:start — sonst strecken sich kurze Karten auf die Hoehe
   der laengsten in der Reihe und sehen aus wie Loecher. */
.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4, 18px); align-items: start; }
@media (max-width: 980px) { .ref-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ref-grid { grid-template-columns: 1fr; } }
.ref-card {
  scroll-margin-top: 96px;
  background: var(--bg);
  border: 1px solid var(--surface-deep);
  border-radius: var(--radius-lg);
  padding: var(--space-5, 22px);
  display: flex; flex-direction: column; gap: var(--space-3, 14px);
  transition: border-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
.ref-card.ref--quote { grid-column: span 1; background: var(--surface); }
.ref-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,95,25,0.14); }
.ref-logo { height: 26px; display: flex; align-items: center; }
.ref-logo svg { height: 26px; width: auto; }
.ref-meta { margin: 0; font-size: 13.5px; color: var(--fg-2); line-height: 1.5; }
.ref-branche { display: block; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.ref-quote { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--fg); }
.ref-quote::before { content: "„"; color: var(--accent); font-weight: 800; }
.ref-quote::after { content: '"'; }

.ref-desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.ref-card.ref--quote .ref-desc { display: none; }


/* Performance: Der Cursor wird jetzt per transform bewegt (JS, einmal
   pro Frame). Deshalb hier keine Uebergaenge mehr auf width/height —
   die haben bei jeder Mausbewegung ein neues Layout erzwungen.
   Das Logo-Band bekommt eine eigene Compositing-Ebene, damit die
   zwanzig Inline-Logos nicht in jedem Frame neu gezeichnet werden. */
.logo-track { will-change: transform; backface-visibility: hidden; }


/* ── Performance-Pass ─────────────────────────────────────────────
   Die Seite ruckelte, weil mehrere teure Effekte gleichzeitig liefen.
   Entfernt bzw. entschaerft:
   - 3D-Parallaxe auf dem Hero-VIDEO (rotateX/rotateY + scale). Ein
     laufendes Video in 3D zu drehen zwingt den Compositor, in jedem
     Frame eine neue Textur zu bauen. Das war der groesste Posten.
   - mask-image auf dem Coaching-Band: Masken erzwingen einen eigenen
     Rendering-Durchgang. Ersetzt durch einen normalen Verlauf.
   - will-change nur noch dort, wo wirklich dauerhaft animiert wird.
   ───────────────────────────────────────────────────────────────── */
.hero-fullvh { perspective: none; }
.hero-vid { will-change: auto !important; }

.coach-band::after {
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 0.5;
  background-position: right center;
}
/* Weicher Uebergang jetzt per Verlauf statt Maske — gleicher Look,
   ein Bruchteil der Rechenzeit. */
.coach-band::before {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; width: 46%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--bg-dark) 0%, rgba(11,11,11,0.72) 45%, rgba(11,11,11,0.35) 100%);
}
@media (max-width: 900px) {
  .coach-band::after { opacity: 0.22; }
  .coach-band::before { width: 100%; background: linear-gradient(180deg, var(--bg-dark) 0%, rgba(11,11,11,0.6) 60%, rgba(11,11,11,0.4) 100%); }
}

/* Kuerzere Zitate, ruhigere Karten: gleichmaessige Hoehen ohne
   Textwand, damit das Raster beim Ueberfliegen nicht erschlaegt. */
.ref-quote { font-size: 14px; line-height: 1.6; }
.ref-card { padding: var(--space-5, 22px) var(--space-5, 22px) var(--space-6, 26px); }




/* ── Gorilla-Cursor, nativ vom Betriebssystem gezeichnet ──────────
   Kein JavaScript, kein nachgezogenes Element: der Zeiger selbst IST
   der Gorilla. Deshalb sitzt er exakt auf dem Punkt und kostet nichts.
   Wichtig: `cursor` wird zwar vererbt, aber jedes Element mit eigener
   cursor-Regel (button, .btn, .tab-item, Formularfelder ...) muss
   ausdruecklich mitgenannt werden — sonst blitzt dort der System-
   pfeil bzw. die Hand durch. Genau das war der Fehler zuvor.
   ────────────────────────────────────────────────────────────────── */
@media (pointer: fine) {
  html, body, *, *::before, *::after {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2228%22%20height%3D%2228%22%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23F55F19%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M16%201.5%20C%2018.5%201.5%2C%2020.5%203%2C%2021.5%205.3%20C%2026%206.3%2C%2029.5%209.8%2C%2029.5%2014%20C%2029.5%2016.5%2C%2028.5%2018.5%2C%2027%2020%20C%2027%2024.8%2C%2022.5%2028.5%2C%2016%2028.5%20C%209.5%2028.5%2C%205%2024.8%2C%205%2020%20C%203.5%2018.5%2C%202.5%2016.5%2C%202.5%2014%20C%202.5%209.8%2C%206%206.3%2C%2010.5%205.3%20C%2011.5%203%2C%2013.5%201.5%2C%2016%201.5%20Z%22%2F%3E%20%3Cpath%20d%3D%22M9.5%2012.2%20C%2011.5%2011.5%2C%2014%2011.3%2C%2016%2011.3%20C%2018%2011.3%2C%2020.5%2011.5%2C%2022.5%2012.2%22%2F%3E%20%3Cpath%20d%3D%22M9.8%2022.4%20C%209.8%2020.1%2C%2012.4%2018.9%2C%2016%2018.9%20C%2019.6%2018.9%2C%2022.2%2020.1%2C%2022.2%2022.4%20C%2022.2%2024.7%2C%2019.4%2026.2%2C%2016%2026.2%20C%2012.6%2026.2%2C%209.8%2024.7%2C%209.8%2022.4%20Z%22%2F%3E%20%3Cpath%20d%3D%22M13.7%2021.6%20L%2015.1%2020.9%22%2F%3E%20%3Cpath%20d%3D%22M18.3%2021.6%20L%2016.9%2020.9%22%2F%3E%20%3C%2Fg%3E%20%3Ccircle%20cx%3D%2212.5%22%20cy%3D%2214.2%22%20r%3D%221.1%22%20fill%3D%22%23F55F19%22%2F%3E%20%3Ccircle%20cx%3D%2219.5%22%20cy%3D%2214.2%22%20r%3D%221.1%22%20fill%3D%22%23F55F19%22%2F%3E%20%3C%2Fsvg%3E") 14 14, auto;
  }
  /* Klickbares: helleres Orange */
  a, a *, button, button *, [role="button"], summary, summary *, label,
  .btn, .btn *, .btn-ghost, .card, .role, .role *, .svc4-card, .svc4-card *,
  .lgbox, .lgbox *, .tab-item, .tab-item *, .lang-trigger, .lang-trigger *,
  .nav-toggle, .nav-toggle *, .k-switch button, .k-consent label,
  input, select, textarea, .faq-item summary, .faq-item summary * {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2228%22%20height%3D%2228%22%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFA24E%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M16%201.5%20C%2018.5%201.5%2C%2020.5%203%2C%2021.5%205.3%20C%2026%206.3%2C%2029.5%209.8%2C%2029.5%2014%20C%2029.5%2016.5%2C%2028.5%2018.5%2C%2027%2020%20C%2027%2024.8%2C%2022.5%2028.5%2C%2016%2028.5%20C%209.5%2028.5%2C%205%2024.8%2C%205%2020%20C%203.5%2018.5%2C%202.5%2016.5%2C%202.5%2014%20C%202.5%209.8%2C%206%206.3%2C%2010.5%205.3%20C%2011.5%203%2C%2013.5%201.5%2C%2016%201.5%20Z%22%2F%3E%20%3Cpath%20d%3D%22M9.5%2012.2%20C%2011.5%2011.5%2C%2014%2011.3%2C%2016%2011.3%20C%2018%2011.3%2C%2020.5%2011.5%2C%2022.5%2012.2%22%2F%3E%20%3Cpath%20d%3D%22M9.8%2022.4%20C%209.8%2020.1%2C%2012.4%2018.9%2C%2016%2018.9%20C%2019.6%2018.9%2C%2022.2%2020.1%2C%2022.2%2022.4%20C%2022.2%2024.7%2C%2019.4%2026.2%2C%2016%2026.2%20C%2012.6%2026.2%2C%209.8%2024.7%2C%209.8%2022.4%20Z%22%2F%3E%20%3Cpath%20d%3D%22M13.7%2021.6%20L%2015.1%2020.9%22%2F%3E%20%3Cpath%20d%3D%22M18.3%2021.6%20L%2016.9%2020.9%22%2F%3E%20%3C%2Fg%3E%20%3Ccircle%20cx%3D%2212.5%22%20cy%3D%2214.2%22%20r%3D%221.1%22%20fill%3D%22%23FFA24E%22%2F%3E%20%3Ccircle%20cx%3D%2219.5%22%20cy%3D%2214.2%22%20r%3D%221.1%22%20fill%3D%22%23FFA24E%22%2F%3E%20%3C%2Fsvg%3E") 14 14, pointer;
  }
  /* Orange Flaechen: weisser Gorilla, sonst unsichtbar */
  .btn-primary, .btn-primary *, .cta-final, .cta-final *,
  .cta-final-btn, .cta-final-btn *, .tab-mark, .lang-indicator {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2228%22%20height%3D%2228%22%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M16%201.5%20C%2018.5%201.5%2C%2020.5%203%2C%2021.5%205.3%20C%2026%206.3%2C%2029.5%209.8%2C%2029.5%2014%20C%2029.5%2016.5%2C%2028.5%2018.5%2C%2027%2020%20C%2027%2024.8%2C%2022.5%2028.5%2C%2016%2028.5%20C%209.5%2028.5%2C%205%2024.8%2C%205%2020%20C%203.5%2018.5%2C%202.5%2016.5%2C%202.5%2014%20C%202.5%209.8%2C%206%206.3%2C%2010.5%205.3%20C%2011.5%203%2C%2013.5%201.5%2C%2016%201.5%20Z%22%2F%3E%20%3Cpath%20d%3D%22M9.5%2012.2%20C%2011.5%2011.5%2C%2014%2011.3%2C%2016%2011.3%20C%2018%2011.3%2C%2020.5%2011.5%2C%2022.5%2012.2%22%2F%3E%20%3Cpath%20d%3D%22M9.8%2022.4%20C%209.8%2020.1%2C%2012.4%2018.9%2C%2016%2018.9%20C%2019.6%2018.9%2C%2022.2%2020.1%2C%2022.2%2022.4%20C%2022.2%2024.7%2C%2019.4%2026.2%2C%2016%2026.2%20C%2012.6%2026.2%2C%209.8%2024.7%2C%209.8%2022.4%20Z%22%2F%3E%20%3Cpath%20d%3D%22M13.7%2021.6%20L%2015.1%2020.9%22%2F%3E%20%3Cpath%20d%3D%22M18.3%2021.6%20L%2016.9%2020.9%22%2F%3E%20%3C%2Fg%3E%20%3Ccircle%20cx%3D%2212.5%22%20cy%3D%2214.2%22%20r%3D%221.1%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%3Ccircle%20cx%3D%2219.5%22%20cy%3D%2214.2%22%20r%3D%221.1%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%3C%2Fsvg%3E") 14 14, pointer;
  }
  .btn[disabled], .k-submit[disabled] { cursor: not-allowed; }
}


/* Produkttreppe im Coaching-Band: zwei Stufen untereinander. Der
   guenstige Einstieg steht oben und ankert den Preis, die empfohlene
   Stufe darunter traegt den Akzent und den staerkeren Button. */
.tier {
  position: relative;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-lg);
  padding: var(--space-5, 22px);
  background: rgba(255,255,255,0.03);
}
.tier + .tier { margin-top: var(--space-4, 18px); }
.tier--pro { border-color: rgba(245,95,25,0.55); background: rgba(245,95,25,0.07); }
.tier-flag {
  position: absolute; top: -11px; right: 16px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  border-radius: var(--radius-pill); padding: 4px 12px;
}
.tier-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3, 14px); }
.tier-num { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.1em; color: rgba(255,255,255,0.45); }
.tier-price { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; line-height: 1; color: var(--accent); }
.tier h3 { font-size: 17px; color: #fff; margin: var(--space-3, 14px) 0 8px; }
.tier p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.6); margin: 0; }
.tier-cta { display: inline-block; margin-top: var(--space-4, 18px); font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; }
.tier-cta:hover { color: var(--accent-bright); }
.tier-cta--strong { color: #fff; background: var(--accent); border-radius: 8px; padding: 11px 20px; }
.tier-cta--strong:hover { background: var(--accent-bright); color: #fff; }


/* Referenzkarten reagieren auf den Zeiger: leichtes Anheben, Rahmen
   in Akzentfarbe, Logo tritt aus dem Grau hervor. Bewusst nur
   transform/opacity/Farbe — das laeuft auf der Grafikkarte und kostet
   nichts, anders als Effekte, die das Layout neu berechnen. */
.ref-card {
  position: relative;
  overflow: hidden;
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out),
              box-shadow .18s var(--ease-out), background-color .18s var(--ease-out);
}
.ref-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 95, 25, 0.55);
  box-shadow: 0 14px 30px rgba(14, 14, 13, 0.10);
  background: var(--surface);
}
.ref-logo { transition: opacity .18s var(--ease-out); opacity: 0.75; }
.ref-card:hover .ref-logo { opacity: 1; }
/* Akzentstrich links waechst beim Hover ein — kleine Belohnung fuers
   Hinschauen, ohne dass etwas springt. */
.ref-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .22s var(--ease-out);
}
.ref-card:hover::before, .ref-card:target::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .ref-card:hover { transform: none; }
  .ref-card::before { transition: none; }
}


/* Abschluss-Band mittig ausrichten: Der Gorilla stand links, waehrend
   der Text zentriert war — dadurch wirkte der ganze Block verschoben. */
.cta-final-mark { display: flex; justify-content: center; margin-bottom: var(--space-5, 22px); }
.cta-final h2 { max-width: 30ch; margin-inline: auto; line-height: 1.15; }
.cta-final .lead { max-width: 60ch; margin-inline: auto; }
.cta-final .soft { color: rgba(255, 255, 255, 0.62); }


/* ── Leistungen als Aufklapp-Menue ────────────────────────────────
   Sechs Punkte plus Logo, Button und Sprachwahl haben die Leiste
   zugestellt — und mit jeder neuen Leistungsseite waere es schlimmer
   geworden. Jetzt liegen alle Leistungen unter einem Punkt.
   Rein per CSS: :hover fuer die Maus, :focus-within fuer die Tastatur.
   Das Mobil-Menue bleibt bewusst eine flache Liste.
   ────────────────────────────────────────────────────────────────── */
.navdrop { position: relative; display: inline-flex; }
.navdrop-trigger::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--motion-base) var(--ease-out);
}
.navdrop:hover .navdrop-trigger::after,
.navdrop:focus-within .navdrop-trigger::after { transform: translateY(1px) rotate(225deg); }

.navdrop-panel {
  position: absolute;
  top: 100%; left: 0;
  margin-top: 10px;
  min-width: 320px;
  padding: 10px;
  background: var(--bg-dark);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 48px rgba(0,0,0,0.45);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s var(--ease-out), transform .16s var(--ease-out), visibility .16s;
  z-index: 60;
}
.navdrop:hover .navdrop-panel,
.navdrop:focus-within .navdrop-panel { opacity: 1; visibility: visible; transform: translateY(0); }
/* Unsichtbare Bruecke, damit das Menue beim Hinuntergehen nicht zuklappt */
.navdrop-panel::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }

.navdrop-panel a {
  display: block !important;
  margin: 0 !important;
  height: auto !important;
  padding: 11px 14px;
  border-radius: var(--radius-md, 10px);
  text-decoration: none;
  transition: background var(--motion-base) var(--ease-out);
}
.navdrop-panel a:hover { background: rgba(255,255,255,0.07); text-decoration: none; }
.navdrop-panel strong { display: block !important; font-size: 14px; font-weight: 600; color: #fff; }
.navdrop-panel span { display: block !important; font-size: 12.5px; color: rgba(255,255,255,0.52); margin-top: 2px; }
.navdrop-panel a:hover strong { color: var(--accent-bright); }

@media (max-width: 980px) { .navdrop-panel { display: none; } }


/* ── WhatsApp-Direktdraht ─────────────────────────────────────────
   Schwebender Knopf unten rechts. Fuer Handwerker, PV-Chefs und
   Bewerber ist WhatsApp die niedrigste Huerde — niedriger als jedes
   Formular. Reiner Link, kein Fremdskript. Sitzt unter der Kopfleiste
   und ueber dem Inhalt, stoert aber nichts. */
.wa-fab {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.wa-fab svg { width: 30px; height: 30px; display: block; }
.wa-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34); }
.wa-fab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 640px) {
  .wa-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 50px; height: 50px; }
  .wa-fab svg { width: 27px; height: 27px; }
}
@media print { .wa-fab { display: none; } }


/* ── Stellenanzeigen ──────────────────────────────────────────────
   Uebersichtskarten, Eckdaten-Leiste und Bewerbungsformular.
   Die Eckdaten stehen bewusst ganz oben: Verdienst, Vertrag, Ort
   sind das, wonach jeder Bewerber zuerst sucht — wer sie sucht und
   nicht findet, klickt weg.
   ────────────────────────────────────────────────────────────────── */
.job-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4, 18px); }
@media (max-width: 760px) { .job-grid { grid-template-columns: 1fr; } }
.job-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg);
  border: 1px solid var(--surface-deep);
  border-radius: var(--radius-lg);
  padding: var(--space-6, 26px);
  text-decoration: none; color: inherit;
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.job-card:hover { transform: translateY(-4px); border-color: rgba(245,95,25,.55); box-shadow: 0 14px 30px rgba(14,14,13,.10); }
.job-card-stage { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0; }
.job-card h3 { font-size: 21px; margin: 0; }
.job-card-p { font-size: 14.5px; color: var(--fg-2); margin: 0; line-height: 1.6; }
.job-card-pay { margin: 6px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.job-card-pay strong { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--accent); }
.job-card-pay span { font-size: 13px; color: var(--fg-2); }
.job-card-go { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 700; color: var(--accent); }

.job-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5, 22px); margin: var(--space-7, 34px) 0 var(--space-2, 10px); }
.job-facts > div { border-top: 1px solid var(--surface-deep); padding-top: var(--space-4, 16px); }
.job-facts span { display: block; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.job-facts strong { display: block; font-size: 17px; line-height: 1.35; }
.job-facts small { display: block; font-size: 13px; color: var(--fg-2); margin-top: 4px; }
@media (max-width: 760px) { .job-facts { grid-template-columns: 1fr; gap: var(--space-4, 18px); } }

/* Bewerbungsformular */
.apply { max-width: 780px; }
.apply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4, 18px); }
@media (max-width: 640px) { .apply-grid { grid-template-columns: 1fr; } }
.apply-field--full { grid-column: 1 / -1; }
.apply-field { display: flex; flex-direction: column; gap: 7px; }
.apply-field > span { font-size: 13.5px; font-weight: 600; }
.apply-field > span i { color: var(--accent); font-style: normal; }
.apply-field > span em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-left: 4px; }
.apply-field input[type="text"], .apply-field input[type="tel"], .apply-field input[type="email"],
.apply-field select, .apply-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--surface-deep);
  border-radius: var(--radius-md, 10px);
  background: var(--bg);
  color: var(--fg);
  font: inherit; font-size: 15px;
}
.apply-field textarea { resize: vertical; }
.apply-field input:focus, .apply-field select:focus, .apply-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,95,25,.14);
}
.apply-field input[type="file"] { font-size: 14px; padding: 10px 0; }
.apply-field small { font-size: 12.5px; color: var(--fg-2); line-height: 1.5; }
.apply-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--fg-2); line-height: 1.5; }
.apply-consent input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--accent); }
.apply-consent a { color: var(--accent); }
.apply-submit { margin-top: var(--space-6, 26px); }
.apply-note { margin-top: var(--space-4, 16px); font-size: 13.5px; color: var(--fg-2); }
.apply-note a { color: var(--accent); font-weight: 600; }


/* ════════════════════════════════════════════════════════════════════
   RATGEBER — Langtexte fuer Suchmaschinen UND fuer Menschen
   ────────────────────────────────────────────────────────────────────
   Die Ratgeber sind das einzige Format auf der Seite, das jemand liest
   statt ueberfliegt. Deshalb hier andere Regeln als im Rest: schmale
   Zeile (ca. 68 Zeichen), groessere Schrift, viel Luft zwischen den
   Absaetzen. Alles andere waere gegen den Zweck.
   ══════════════════════════════════════════════════════════════════ */

/* Uebersichtsseite: Karten wie im Job-Grid, aber zweispaltig und
   mit Lesezeit statt Gehalt. */
.rt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6, 24px); align-items: start; }
@media (max-width: 860px) { .rt-grid { grid-template-columns: 1fr; } }
.rt-card {
  display: block; padding: var(--space-8, 32px); border-radius: var(--radius-lg, 18px);
  border: 1px solid var(--border); background: #fff; text-decoration: none; color: inherit;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.rt-card:hover { transform: translateY(-3px); border-color: rgba(245,95,25,0.45); box-shadow: 0 14px 34px rgba(11,11,11,0.07); }
.rt-card-meta { font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-3, 12px); }
.rt-card h3 { font-size: clamp(19px, 2vw, 23px); line-height: 1.3; margin: 0 0 var(--space-3, 12px); }
.rt-card-p { font-size: 15px; line-height: 1.65; color: var(--fg-2); margin: 0 0 var(--space-5, 20px); }
.rt-card-go { font-size: 14px; font-weight: 600; color: var(--accent); }

/* Artikelkopf: Kategorie, Lesezeit, Stand. Das Datum ist kein Schmuck —
   Google und KI-Antworten gewichten Aktualitaet. */
.rt-head { max-width: 760px; }
.rt-kicker { font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-4, 16px); }
.rt-h1 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 var(--space-5, 20px); }
.rt-standfirst { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--fg-2); margin: 0 0 var(--space-6, 24px); }
.rt-byline { display: flex; flex-wrap: wrap; gap: var(--space-5, 20px); padding-top: var(--space-5, 20px); border-top: 1px solid var(--border); font-size: 13px; color: var(--fg-2); }
.rt-byline strong { color: var(--fg); font-weight: 600; }

/* Inhaltsverzeichnis: bei 2.000 Woertern kein Luxus, sondern die
   Bedingung dafuer, dass jemand ueberhaupt anfaengt. */
.rt-toc { border-left: 3px solid var(--accent); padding: 2px 0 2px var(--space-5, 20px); margin: var(--space-8, 32px) 0; }
.rt-toc p { font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 var(--space-3, 12px); }
.rt-toc ol { margin: 0; padding-left: 1.15em; display: flex; flex-direction: column; gap: 7px; }
.rt-toc a { color: var(--fg); text-decoration: none; font-size: 15px; line-height: 1.5; border-bottom: 1px solid transparent; }
.rt-toc a:hover { border-bottom-color: var(--accent); }

/* Der Lesekoerper. max-width in ch, damit die Zeile unabhaengig von
   der Schriftgroesse lesbar bleibt. */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--space-5, 20px); }
/* Bewusst dunkler als --fg-2: das Marketing-Grau (#8A8A87) traegt drei
   Saetze, aber keine 2.000 Woerter. Ab hier zaehlt Lesbarkeit vor Look. */
.prose p, .prose li { font-size: 17px; line-height: 1.72; color: #3B3B38; }
.prose .rt-calc-note, .prose .rt-honest p { color: #55554F; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose h2 {
  font-size: clamp(23px, 2.6vw, 32px); line-height: 1.22; letter-spacing: -0.015em;
  color: var(--fg); margin-top: var(--space-12, 48px); scroll-margin-top: 96px;
}
.prose h3 { font-size: clamp(18px, 1.9vw, 21px); line-height: 1.3; color: var(--fg); margin-top: var(--space-8, 32px); }
.prose ul, .prose ol { padding-left: 1.25em; display: flex; flex-direction: column; gap: 10px; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); font-weight: 500; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-12, 48px) 0; }

/* Merksatz. Bewusst sparsam einsetzen — zwei pro Artikel, sonst
   verliert die Auszeichnung ihren Wert. */
.rt-pull {
  border-left: 4px solid var(--accent); padding: var(--space-2, 8px) 0 var(--space-2, 8px) var(--space-5, 22px);
  font-size: clamp(18px, 2vw, 22px); line-height: 1.45; font-weight: 600; color: var(--fg);
  margin-top: var(--space-8, 32px) !important;
}
.prose .rt-pull + * { margin-top: var(--space-8, 32px); }

/* Rechenkasten: die Zahlen sind der Grund, warum jemand den Artikel
   teilt. Deshalb kriegen sie eine eigene Flaeche. */
.rt-calc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); padding: var(--space-8, 32px); }
.rt-calc h3 { margin-top: 0 !important; }
.rt-calc-note { font-size: 13px; color: var(--fg-2); margin-top: var(--space-5, 20px) !important; }
.rt-table { width: 100%; border-collapse: collapse; margin-top: var(--space-5, 20px); font-size: 15px; }
.rt-table th, .rt-table td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
.rt-table th { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); font-weight: 500; }
.rt-table td:last-child, .rt-table th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.rt-table tr:last-child td { border-bottom: 0; font-weight: 700; color: var(--fg); }
.rt-table tr:last-child td:last-child { color: var(--accent); }
@media (max-width: 520px) { .rt-table { font-size: 14px; } .rt-table th, .rt-table td { padding: 9px 8px 9px 0; } }

/* Ehrlichkeits-Kasten: hier steht, wann man uns NICHT braucht. Das
   ist keine Bescheidenheit, das ist das glaubwuerdigste Element
   auf der ganzen Seite. */
.rt-honest { border: 1px dashed rgba(11,11,11,0.22); border-radius: var(--radius-lg, 18px); padding: var(--space-6, 26px); background: transparent; }
.rt-honest p:first-child { margin-top: 0; }
.rt-honest-lbl { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-2); display: block; margin-bottom: var(--space-3, 12px); }

/* E-Book-Band: der Ausweg fuer alle, die noch nicht reden wollen.
   Dunkel, damit es sich vom Artikel loest, ohne ihn zu unterbrechen. */
.ebook { background: var(--bg-dark, #0B0B0B); color: #fff; border-radius: var(--radius-lg, 18px); padding: clamp(28px, 4vw, 48px); position: relative; overflow: hidden; }
.ebook-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 4vw, 48px); align-items: center; position: relative; z-index: 1; }
@media (max-width: 860px) { .ebook-grid { grid-template-columns: 1fr; } }
.ebook h2 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.2; color: #fff; margin: 0 0 var(--space-4, 16px); }
.ebook p { color: rgba(255,255,255,0.68); font-size: 15.5px; line-height: 1.65; margin: 0 0 var(--space-5, 20px); }
.ebook ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ebook li { font-size: 14.5px; color: rgba(255,255,255,0.82); display: flex; gap: 10px; line-height: 1.5; }
.ebook li::before { content: "→"; color: var(--accent); flex: 0 0 auto; }
.ebook-form { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.ebook-form input[type="text"], .ebook-form input[type="email"] {
  width: 100%; padding: 13px 15px; border-radius: 12px; font: inherit; font-size: 15px; color: #fff;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
}
.ebook-form input::placeholder { color: rgba(255,255,255,0.38); }
.ebook-form input:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,0.09); }
.ebook-consent { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.5; }
.ebook-consent input { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--accent); }
.ebook-consent a { color: rgba(255,255,255,0.8); }
.ebook-form button { margin-top: var(--space-2, 8px); }
.ebook-fine { font-size: 12px !important; color: rgba(255,255,255,0.42) !important; margin: var(--space-3, 12px) 0 0 !important; }

/* Weiterlesen-Leiste am Artikelende. Verhindert die Sackgasse. */
.rt-next { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5, 20px); }
@media (max-width: 720px) { .rt-next { grid-template-columns: 1fr; } }
.rt-next a { display: block; padding: var(--space-6, 24px); border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); text-decoration: none; color: inherit; background: #fff; transition: border-color .18s ease, transform .18s ease; }
.rt-next a:hover { border-color: rgba(245,95,25,0.45); transform: translateY(-2px); }
.rt-next span { display: block; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 8px; }
.rt-next strong { font-size: 16px; line-height: 1.35; font-weight: 600; }


/* ════════════════════════════════════════════════════════════════════
   COACHING — Ablauf der zwei Tage
   ────────────────────────────────────────────────────────────────────
   Wer 499 Euro oder mehr ausgibt, will vorher wissen, was passiert.
   Eine Agenda mit Uhrzeiten verkauft besser als jedes Versprechen,
   weil sie zeigt, dass es das Produkt wirklich gibt.
   ══════════════════════════════════════════════════════════════════ */
.agenda { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6, 24px); align-items: start; }
@media (max-width: 860px) { .agenda { grid-template-columns: 1fr; } }
.agenda-day { border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); background: var(--surface); padding: var(--space-8, 32px); }
.agenda-day > h3 { font-size: clamp(19px, 2vw, 23px); margin: 0 0 var(--space-2, 8px); }
.agenda-lbl { font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-3, 12px); }
.agenda-sub { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); margin: 0 0 var(--space-6, 24px); padding-bottom: var(--space-5, 20px); border-bottom: 1px solid var(--border); }
.agenda-row { display: grid; grid-template-columns: 62px 1fr; gap: var(--space-4, 16px); padding: var(--space-4, 16px) 0; border-bottom: 1px solid var(--divider-soft); }
.agenda-row:last-child { border-bottom: 0; padding-bottom: 0; }
.agenda-time { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--muted); padding-top: 3px; }
.agenda-row strong { display: block; font-size: 15.5px; color: var(--fg); margin-bottom: 4px; }
.agenda-row span { font-size: 14px; line-height: 1.6; color: var(--fg-2); }
@media (max-width: 480px) { .agenda-row { grid-template-columns: 54px 1fr; gap: var(--space-3, 12px); } }

/* Was im Koffer liegt, wenn wir wieder weg sind. Konkrete Gegenstaende
   schlagen abstrakte Versprechen. */
.takeaway { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5, 20px); }
@media (max-width: 900px) { .takeaway { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .takeaway { grid-template-columns: 1fr; } }
.takeaway div { border-top: 2px solid var(--accent); padding-top: var(--space-4, 16px); }
.takeaway strong { display: block; font-size: 15.5px; color: var(--fg); margin-bottom: 6px; }
.takeaway span { font-size: 14px; line-height: 1.6; color: var(--fg-2); }

/* Sekundaerbutton auf hellem Grund. .btn-ghost-light gibt es schon,
   aber der ist weiss umrandet und verschwindet auf der Canvas. */
.btn-ghost-dark {
  background: transparent;
  border: 2px solid rgba(14,14,13,0.24);
  color: var(--fg);
  transition: border-color var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out);
}
.btn-ghost-dark:hover { border-color: var(--accent); background: rgba(245,95,25,0.06); }

/* Produktleiter mit vier Stufen: bei zwei Karten reichte ein Zweispalter,
   bei vier braucht es ein eigenes Raster — sonst wird jede Karte so
   schmal, dass der Preis umbricht. */
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4, 16px); align-items: stretch; }
@media (max-width: 1080px) { .ladder { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .ladder { grid-template-columns: 1fr; } }
.ladder .tier { margin: 0 !important; display: flex; flex-direction: column; }
.ladder .tier p:not(.tier-note) { flex: 1 1 auto; }
/* "Auf Anfrage" ist doppelt so breit wie "499 €" — bei vier Karten
   sprengt die Display-Groesse sonst den Kartenrand. */
.ladder .tier-price { font-size: clamp(17px, 1.6vw, 22px); text-align: right; }
.ladder .tier-cta--strong { display: inline-block; white-space: nowrap; }
.tier-note { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.42); margin-top: var(--space-3, 12px) !important; }
.tier--free { border-style: dashed; }
.tier--free .tier-price { color: #fff; }
/* Garantie-Zeile unter der Leiter */
.guarantee { margin-top: var(--space-8); padding: var(--space-6) var(--space-6) var(--space-6) 0;
             border-top: 1px solid rgba(255,255,255,0.14); display: flex; gap: var(--space-5); align-items: flex-start; }
/* Ohne feste Breite dehnt der Flex-Container das Schild auf die halbe
   Sektion — auf der Coaching-Seite faellt das nicht auf, weil dort ein
   width-Attribut am SVG steht. Hier gehoert die Groesse ins CSS. */
.guarantee svg { flex: 0 0 auto; width: 26px; height: 26px; margin-top: 2px; }
.guarantee p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.72); max-width: 76ch; }
.guarantee strong { color: #fff; }


/* ════════════════════════════════════════════════════════════════════
   KLEMMBRETT — die Lead-App
   ────────────────────────────────────────────────────────────────────
   Eigener Funnel-Eingang. Die Seite muss einen Schmerz zeigen, den der
   Leser kennt, bevor sie ein Werkzeug zeigt, das er noch nicht kennt.
   ══════════════════════════════════════════════════════════════════ */

/* Der Bruch: was heute passiert, Schritt fuer Schritt, bis der Lead
   kalt ist. Rot statt orange, weil es der Negativpfad ist. */
.decay { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: var(--space-8); }
@media (max-width: 820px) { .decay { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .decay { grid-template-columns: 1fr; } }
.decay-step { padding: var(--space-6) var(--space-5) var(--space-6) 0; border-top: 3px solid; position: relative; }
.decay-step:nth-child(1) { border-color: rgba(245,95,25,0.85); }
.decay-step:nth-child(2) { border-color: rgba(245,95,25,0.55); }
.decay-step:nth-child(3) { border-color: rgba(245,95,25,0.30); }
.decay-step:nth-child(4) { border-color: rgba(14,14,13,0.16); }
.decay-time { font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: .09em;
              text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.decay-step strong { display: block; font-size: 16px; color: var(--fg); margin-bottom: 6px; }
.decay-step span { font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.decay-step:last-child strong { color: var(--fg-2); }

/* Funktionsliste mit Nummern, zweispaltig */
.feat { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-12); }
@media (max-width: 820px) { .feat { grid-template-columns: 1fr; gap: var(--space-6); } }
.feat-item { display: grid; grid-template-columns: 34px 1fr; gap: var(--space-4); align-items: start; }
.feat-num { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--accent);
            border: 1px solid rgba(245,95,25,0.45); border-radius: 50%; width: 30px; height: 30px;
            display: flex; align-items: center; justify-content: center; }
.feat-item h3 { font-size: 17px; margin: 4px 0 6px; }
.feat-item p { font-size: 14.5px; line-height: 1.65; color: var(--fg-2); margin: 0; }

/* Preisblock: zwei Wege nebeneinander, der rechte gewinnt sichtbar */
.price2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: stretch; }
@media (max-width: 820px) { .price2 { grid-template-columns: 1fr; } }
.pcard { border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); padding: var(--space-8);
         background: var(--surface); display: flex; flex-direction: column; }
.pcard--win { border-color: rgba(245,95,25,0.55); background: rgba(245,95,25,0.05); position: relative; }
.pcard-lbl { font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: .09em;
             text-transform: uppercase; color: var(--fg-2); margin: 0 0 var(--space-4); }
.pcard-price { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px); font-weight: 600;
               line-height: 1; color: var(--fg); margin: 0; letter-spacing: -0.02em; }
.pcard--win .pcard-price { color: var(--accent); }
.pcard-unit { font-size: 14px; color: var(--fg-2); margin: 8px 0 var(--space-6); }
.pcard ul { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: flex;
            flex-direction: column; gap: 10px; flex: 1 1 auto; }
.pcard li { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); display: flex; gap: 10px; }
.pcard li::before { content: "→"; color: var(--accent); flex: 0 0 auto; }
.pcard-strike { font-size: 14px; color: var(--fg-2); margin: 0 0 var(--space-4); }
.pcard-strike s { color: var(--muted); }

/* Das Rechenargument. Steht allein, damit es haengenbleibt. */
.mathline { border-left: 4px solid var(--accent); padding: var(--space-4) 0 var(--space-4) var(--space-6);
            margin-top: var(--space-8); }
.mathline p { font-size: clamp(18px, 2.1vw, 24px); line-height: 1.4; font-weight: 600; color: var(--fg); margin: 0; }
.mathline span { color: var(--fg-2); font-weight: 400; font-size: 15px; display: block; margin-top: 10px; line-height: 1.6; }

/* Telefon-Attrappe fuer den Hero */
.phone-wrap { display: flex; justify-content: center; }
@media (max-width: 900px) { .phone-wrap { margin-top: var(--space-8); } }

/* Das Tempo-Argument auf der Klemmbrett-Seite. Drei Zahlen, die den
   Unterschied zwischen "nett" und "rechnet sich" tragen. */
.speed { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
@media (max-width: 860px) { .speed { grid-template-columns: 1fr; gap: var(--space-5); } }
.speed-card { border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-lg, 18px);
              padding: var(--space-8) var(--space-6); background: rgba(255,255,255,0.03); }
/* Zwei Klassen tief, weil `.speed-card p` sonst die Schriftgroesse
   ueberschreibt und aus der Kennzahl Fliesstext macht. */
.speed-card .speed-num { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); font-weight: 600;
             line-height: 1; color: var(--accent); letter-spacing: -0.03em; margin: 0 0 var(--space-4); }
.speed-card p { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.7); margin: 0; }
.speed-card strong { color: #fff; }
.speed-src { font-size: 12.5px; color: rgba(255,255,255,0.38); margin-top: var(--space-6); line-height: 1.6; }
.speed-src a { color: rgba(255,255,255,0.55); text-decoration: underline; }

/* "Im 499er enthalten" — der Block muss auf der Coaching-Seite laut sein,
   sonst uebersieht man das staerkste Argument der ganzen Leiter. */
.incl { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px,4vw,56px); align-items: center; }
@media (max-width: 900px) { .incl { grid-template-columns: 1fr; } }
.incl-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff;
            font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
            padding: 7px 14px; border-radius: 999px; margin-bottom: var(--space-5); }
.incl-price { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-6) 0; }
.incl-price s { font-family: var(--font-display); font-size: clamp(24px,2.6vw,34px); color: var(--muted); font-weight: 500; }
.incl-price b { font-family: var(--font-display); font-size: clamp(28px,3.2vw,42px); color: var(--accent); font-weight: 600; letter-spacing: -0.02em; }
.incl-price span { font-size: 14px; color: var(--fg-2); }
.incl ul { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: flex; flex-direction: column; gap: 11px; }
.incl li { font-size: 15px; line-height: 1.6; color: var(--fg-2); display: flex; gap: 11px; }
.incl li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: 0 0 auto; }


/* ════════════════════════════════════════════════════════════════════
   LOGO-LEISTE INS SCHWARZE
   ────────────────────────────────────────────────────────────────────
   Vorher ein weisses Band zwischen Hero und Grau — ein drittes Element,
   das den Rhythmus zerhackt. Jetzt laeuft sie optisch im Hero weiter:
   Claim, Buttons und Sozialbeweis liegen im selben Bild.
   Die Sektion bleibt bewusst eigenstaendig im Markup, weil der Hero
   Pin- und Parallax-Logik traegt, die man nicht anfassen will.
   ══════════════════════════════════════════════════════════════════ */
.logo-strip {
  background: var(--bg-dark);
  border-top: 0;
  border-bottom: 0;
  padding: 34px 0 42px;
}
.logo-strip-label { color: rgba(255,255,255,0.38); }
/* Die Wortmarken sind Inline-SVG mit fest verdrahteten Grautoenen. Ein
   Filter macht sie in einem Rutsch hell, ohne jedes fill einzeln zu
   ueberschreiben — und ohne fill="none" kaputtzumachen. */
.logo-strip .lgbox svg { filter: brightness(0) invert(1); }
.logo-strip .lgbox { opacity: 0.52; }
.logo-strip a.lgbox:hover, .logo-strip a.lgbox:focus-visible { opacity: 0.9; }
/* Weiche Kanten links und rechts, damit die Marken nicht abgeschnitten
   aus dem Nichts auftauchen. */
.logo-strip .logo-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}


/* ════════════════════════════════════════════════════════════════════
   REFERENZEN ALS SCHIEBBARE REIHE
   ────────────────────────────────────────────────────────────────────
   Zehn Karten untereinander waren eine sehr lange Strecke. Als Reihe
   kostet es ein Drittel der Hoehe. Bewusst KEIN Autoplay: der Sprung
   vom Partnerlogo zur passenden Referenz braucht eine feste Position,
   und mitlaufenden Fliesstext liest niemand zu Ende.
   ══════════════════════════════════════════════════════════════════ */
.ref-railwrap { position: relative; }
.ref-rail {
  /* Feste Spaltenbreite: minmax() laesst die Karten im Scroll-Container
     schrumpfen, bis alle zehn nebeneinanderpassen — dann gibt es nichts
     mehr zu schieben. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 330px;
  gap: var(--space-4, 18px);
  overflow-x: auto; overflow-y: hidden;
  /* Bewusst KEIN scroll-behavior: smooth — die CSS-Animation wird von
     anderen Scrollvorgaengen auf der Seite abgebrochen, und die Reihe
     springt auf null zurueck. Das Gleiten macht jetzt das Skript. */
  scroll-snap-type: x mandatory;
  padding: 4px 4px var(--space-5); margin: 0 -4px;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.ref-rail::-webkit-scrollbar { display: none; }
.ref-rail > .ref-card { scroll-snap-align: start; scroll-margin-left: 4px; height: 100%; }
@media (max-width: 760px) { .ref-rail { grid-auto-columns: 80vw; } }

.ref-nav { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: var(--space-4); }
.ref-nav button {
  width: 42px; height: 42px; border-radius: 50%; background: transparent;
  border: 1px solid var(--border-strong); color: var(--fg);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out), opacity .2s;
}
.ref-nav button:hover:not(:disabled) { border-color: var(--accent); background: rgba(245,95,25,0.07); }
.ref-nav button:disabled { opacity: 0.28; cursor: default; }
.ref-nav svg { width: 17px; height: 17px; }
/* Zaehler statt Punkte: bei zehn Karten sind Punkte unlesbar klein. */
.ref-count { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--muted);
             align-self: center; margin-right: auto; letter-spacing: .06em; }
/* Angeklickte Karte hervorheben — :target allein reicht nicht, weil der
   Sprung jetzt per JS passiert und die URL nur nachgezogen wird. */
.ref-card.is-picked, .ref-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,95,25,0.14); }

/* Der Hero endet nicht mehr an einer hellen Sektion, sondern an der
   schwarzen Logo-Leiste. Die abgerundeten unteren Ecken lassen dort den
   grauen Seitenhintergrund durchblitzen und schneiden eine sichtbare
   Kante mitten ins Schwarz — unten also gerade abschliessen, oben
   bleibt die Rundung. */
.hero-vid, .hero-curve { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Und der Uebergang wird enger: die Leiste soll wie der Abschluss des
   Heros wirken, nicht wie ein eigenes Band dahinter. Der negative Rand
   holt sie in den toten Raum am Hero-Fuss hinein — moeglich, weil beide
   jetzt dasselbe Schwarz sind, man sieht die Ueberlappung nicht. */
.logo-strip { padding: 22px 0 40px; margin-top: -64px; position: relative; z-index: 2; }
@media (max-width: 760px) { .logo-strip { margin-top: -32px; } }


/* ════════════════════════════════════════════════════════════════════
   KLEMMBRETT-ERKLAERUNG auf der Coaching-Seite
   ────────────────────────────────────────────────────────────────────
   Rueckmeldung: "man versteht nicht, was das Klemmbrett ist."
   Also erst zeigen, dann behaupten — Geraet, Weg des Leads, Rollen.
   ══════════════════════════════════════════════════════════════════ */
.kb-show { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 940px) { .kb-show { grid-template-columns: 1fr; } }
.kb-device { display: flex; justify-content: center; }
.kb-device svg { width: 100%; max-width: 372px; height: auto; filter: drop-shadow(0 26px 60px rgba(0,0,0,0.45)); }

/* Der Weg des Leads: vier Stationen, senkrecht, mit durchgehender Linie. */
.kb-flow { list-style: none; padding: 0; margin: var(--space-8) 0 0; position: relative; }
.kb-flow::before { content: ""; position: absolute; left: 17px; top: 14px; bottom: 22px; width: 2px;
                   background: linear-gradient(180deg, var(--accent), rgba(245,95,25,0.12)); }
.kb-flow li { position: relative; padding: 0 0 var(--space-6) 52px; }
.kb-flow li:last-child { padding-bottom: 0; }
.kb-flow-dot { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
               background: var(--bg-dark); border: 2px solid var(--accent); color: var(--accent);
               display: flex; align-items: center; justify-content: center;
               font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700; }
.kb-flow strong { display: block; font-size: 16.5px; color: #fff; margin-bottom: 5px; }
.kb-flow span { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.62); }
.kb-flow em { font-style: normal; color: var(--accent-bright); }

/* Was im Paket steckt — Wertstapel mit durchgestrichener Summe. */
.stack { border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); background: var(--surface);
         padding: var(--space-8); }
.stack-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5);
             padding: var(--space-4) 0; border-bottom: 1px solid var(--divider-soft); }
.stack-row:last-of-type { border-bottom: 0; }
.stack-row div { flex: 1 1 auto; }
.stack-row strong { display: block; font-size: 16px; color: var(--fg); margin-bottom: 3px; }
.stack-row span { font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.stack-val { flex: 0 0 auto; font-family: var(--font-mono, monospace); font-size: 13.5px; color: var(--fg-2); white-space: nowrap; }
.stack-val b { color: var(--accent); }
.stack-sum { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
             margin-top: var(--space-6); padding-top: var(--space-6); border-top: 2px solid var(--fg); flex-wrap: wrap; }
.stack-sum p { margin: 0; font-size: 15px; color: var(--fg-2); }
.stack-sum s { color: var(--muted); }
.stack-sum b { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 40px); color: var(--accent);
               font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
/* Die Attrappe im Klemmbrett-Hero nutzt jetzt dieselbe Zeichnung wie die
   Coaching-Seite — ein Bild fuer dasselbe Produkt, nicht zwei. */
.phone-wrap svg { width: 100%; max-width: 300px; height: auto; filter: drop-shadow(0 24px 56px rgba(0,0,0,0.30)); }


/* ════════════════════════════════════════════════════════════════════
   EINBLENDUNG FUER DEN LEITFADEN
   ────────────────────────────────────────────────────────────────────
   Bewusst kein Vollbild-Overlay, das die Seite blockiert: eine Karte
   unten rechts, auf dem Handy als Leiste von unten. Sie laesst sich
   wegklicken und kommt in derselben Sitzung nicht wieder.
   ══════════════════════════════════════════════════════════════════ */
.nudge {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: min(392px, calc(100vw - 40px));
  background: var(--bg-dark); color: #fff;
  border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-lg, 20px);
  padding: var(--space-8) var(--space-6) var(--space-6);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  opacity: 0; transform: translateY(18px) scale(0.98); pointer-events: none;
  transition: opacity .34s var(--ease-out), transform .34s var(--ease-out);
  overflow: hidden;
}
.nudge.is-open { opacity: 1; transform: none; pointer-events: auto; }
/* Der WhatsApp-Knopf sitzt unten rechts — die Karte weicht ihm aus. */
@media (min-width: 761px) { .nudge { bottom: 24px; right: 96px; } }
@media (max-width: 760px) {
  .nudge { right: 12px; left: 12px; bottom: 12px; width: auto; border-radius: 20px;
           padding: var(--space-6) var(--space-5) var(--space-5); }
}
/* Weiter raus und schwaecher: vorher kollidierte der Kopf mit dem
   Schliessen-Knopf und sah aus wie ein Fehler statt wie Textur. */
.nudge-mark { position: absolute; right: -40px; bottom: -34px; line-height: 0; opacity: 0.09; pointer-events: none; }
.nudge-mark svg { width: 168px; height: 168px; }
.nudge-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
  transition: background .18s, color .18s;
}
.nudge-close:hover { background: rgba(255,255,255,0.16); color: #fff; }
.nudge-close svg { width: 14px; height: 14px; }
.nudge-kicker { position: relative; z-index: 1; font-family: var(--font-mono, monospace); font-size: 11px;
                letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-3); }
.nudge h3 { position: relative; z-index: 1; font-size: 21px; line-height: 1.25; color: #fff; margin: 0 0 var(--space-3); }
.nudge h3 .hl { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.nudge p { position: relative; z-index: 1; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.66); margin: 0 0 var(--space-5); }
.nudge .btn { width: 100%; justify-content: center; }
.nudge-no {
  display: block; width: 100%; margin-top: var(--space-3); background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: rgba(255,255,255,0.42); text-align: center; padding: 6px;
}
.nudge-no:hover { color: rgba(255,255,255,0.7); }
@media (prefers-reduced-motion: reduce) { .nudge { transition: opacity .2s linear; transform: none; } }
/* Solange die Einblendung offen ist, tritt der WhatsApp-Knopf zurueck —
   auf dem Handy lag er sonst direkt auf dem "Nein danke". */
body.nudge-open .wa-fab { opacity: 0; transform: scale(0.8); pointer-events: none; transition: opacity .25s, transform .25s; }


/* ════════════════════════════════════════════════════════════════════
   HANDY-AKTIONSLEISTE
   ────────────────────────────────────────────────────────────────────
   Auf dem Handy schwebte bisher nur der WhatsApp-Knopf. Wer anrufen
   oder anfragen wollte, musste bis zum Fuss scrollen. Die Leiste
   ERSETZT den Knopf auf kleinen Schirmen — drei schwebende Elemente
   uebereinander waeren eins zu viel.
   ══════════════════════════════════════════════════════════════════ */
.mbar { display: none; }
@media (max-width: 760px) {
  .mbar {
    display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center;
    /* max() statt fester Wert: auf Geraeten mit Gestensteuerung liegt
       sonst der Home-Balken auf den Knoepfen. */
    position: fixed; left: 10px; right: 10px; z-index: 80;
    bottom: max(10px, env(safe-area-inset-bottom));
    background: rgba(11,11,11,0.94); backdrop-filter: saturate(140%) blur(12px);
    border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 9px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.36);
    transition: transform .28s var(--ease-out), opacity .28s var(--ease-out);
  }
  .wa-fab { display: none; }
  /* Platz schaffen, damit die Leiste nichts verdeckt */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .mbar-ico {
    width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #fff; text-decoration: none;
  }
  .mbar-ico svg { width: 21px; height: 21px; }
  .mbar-ico--wa { background: #25D366; border-color: #25D366; color: #0B0B0B; }
  .mbar-cta {
    display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 12px;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
  }
  .mbar-cta:active { background: var(--accent-deep); }
  /* Solange die Leitfaden-Einblendung offen ist, tritt die Leiste weg. */
  body.nudge-open .mbar { transform: translateY(120%); opacity: 0; pointer-events: none; }
}


/* ════════════════════════════════════════════════════════════════════
   KLEMMBRETT-STREIFEN im Coaching-Band der Startseite
   ────────────────────────────────────────────────────────────────────
   Als Textzeile in der Preiskarte hat es niemand gesehen. Hier bekommt
   es ein Bild und eine eigene Flaeche, ohne die Zwei-Spalten-Struktur
   darueber zu sprengen.
   ══════════════════════════════════════════════════════════════════ */
/* Eine durchgehende Haarlinie ueber die volle Breite ist die Sprache von
   "hier faengt ein neuer Abschnitt an" — und genau so las sich der
   Streifen: zweimal Schwarz untereinander, ohne erkennbaren Grund.
   Es ist aber kein neuer Abschnitt, sondern ein zweiter Gegenstand im
   selben Argument (das System — und das Werkzeug dazu). Also eine
   eigene Flaeche INNERHALB des Bandes: leicht aufgehellt, gerundet,
   gerahmt. Eine Karte im Band liest sich als "gehoert dazu", ein
   Trennstrich als "ist etwas anderes". */
.kb-strip {
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(24px, 3.2vw, 44px);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  display: grid; grid-template-columns: 210px 1fr; gap: clamp(28px, 4vw, 60px); align-items: center;
}
@media (max-width: 820px) { .kb-strip { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6); } }
.kb-strip-dev { display: flex; justify-content: center; }
.kb-strip-dev svg { width: 100%; max-width: 210px; height: auto; filter: drop-shadow(0 20px 46px rgba(0,0,0,0.5)); }
@media (max-width: 820px) { .kb-strip-dev svg { max-width: 240px; } }
.kb-strip-tag {
  display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px; margin-bottom: var(--space-4);
}
.kb-strip h3 { font-size: clamp(21px, 2.4vw, 30px); line-height: 1.2; color: #fff; margin: 0 0 var(--space-4); }
.kb-strip h3 .hl { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.kb-strip > div > p { font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,0.66); margin: 0 0 var(--space-5); max-width: 62ch; }
.kb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
@media (max-width: 900px) { .kb-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .kb-steps { grid-template-columns: 1fr; } }
.kb-steps li { border-top: 2px solid rgba(245,95,25,0.55); padding-top: 10px; }
.kb-steps b { display: block; font-size: 14px; color: #fff; margin-bottom: 3px; }
.kb-steps span { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.55); }
.kb-strip-note { font-size: 14px !important; color: rgba(255,255,255,0.5) !important; margin: 0 !important; }
.kb-strip-note a { color: var(--accent); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER-RASTER
   ────────────────────────────────────────────────────────────────────
   Stand vorher als Inline-Style auf jeder Seite: drei feste Spalten,
   2fr 1fr 1fr, ohne Umbruchpunkt. Auf dem Handy blieben fuer die
   Navigationsspalte rund 90 px — "Callcenter & Terminierung" passte
   nicht hinein und schob die ganze Seite dreizehn Pixel nach rechts.
   Man konnte die Startseite seitlich wegschieben.

   Als Klasse statt Inline-Style, weil ein Inline-Style von keiner
   Media Query eingeholt werden kann (ausser mit !important).
   ══════════════════════════════════════════════════════════════════ */
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-8);
}
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1.4fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* Knoepfe tragen white-space:nowrap, damit ein Label wie "Anfrage
   stellen" nie zweizeilig bricht. Auf dem Handy kippt das: der lange
   Download-Knopf ("Tueroeffner-Methode herunterladen (PDF, 17 Seiten)")
   war 538 px breit und schob die ganze Seite nach rechts. Unter 560 px
   darf ein Knopf umbrechen — lieber zwei Zeilen als seitliches Scrollen. */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; line-height: 1.3; }
}

/* ══════════════════════════════════════════════════════════════════
   PREISBLOCK KLEMMBRETT
   ────────────────────────────────────────────────────────────────────
   Die Gewinnerkarte trug im Preisfeld das Wort "Inklusive", waehrend
   die Vergleichskarte 49,99 EUR in 44px zeigte. Damit war die einzige
   grosse Zahl der Seite der Preis des Produkts, das wir NICHT verkaufen
   wollen — und die 499 EUR standen als Listenpunkt in 14,5px daneben.
   Jetzt traegt die Kaufkarte die Zahl, ist breiter und steht links.
   ══════════════════════════════════════════════════════════════════ */
.price2 { grid-template-columns: 1.12fr 0.88fr; }
@media (max-width: 820px) { .price2 { grid-template-columns: 1fr; } }

/* Flagge wie auf der Startseite: sagt vor dem Lesen, welche Karte
   gemeint ist. Sitzt auf der Kante, deshalb .pcard--win position:relative
   (steht schon weiter oben). */
.pcard-flag {
  position: absolute; top: -12px; left: var(--space-8);
  background: var(--accent); color: #fff;
  font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 5px 13px; border-radius: var(--radius-pill);
}
.pcard--win { padding-top: calc(var(--space-8) + 6px); }

/* Die Abo-Karte traegt ihre eigene schlechte Nachricht: nicht 49,99,
   sondern 840 im Jahr, jedes Jahr. Bewusst nicht in Akzentfarbe —
   Orange gehoert auf dieser Seite dem, was wir verkaufen. */
.pcard-warn {
  font-size: 14px; line-height: 1.55; color: var(--fg-2);
  margin: 0 0 var(--space-4);
  padding: 10px 13px;
  background: var(--surface-soft);
  border-left: 3px solid var(--muted);
  border-radius: 0 8px 8px 0;
}
.pcard-warn b { color: var(--fg); }

/* Drei-Jahres-Vergleich. Reine Multiplikation der eigenen Preise —
   840 EUR im Jahr fuer fuenf Nutzer, kumuliert gegen einmalig 499. */
.pyr { margin: 0; }
.pyr svg { width: 100%; height: auto; display: block; }
.pyr figcaption {
  font-size: 15px; line-height: 1.65; color: var(--fg-2);
  max-width: 68ch; margin-top: var(--space-4);
}

/* .guarantee wurde fuer das dunkle Preisband der Coaching-Seite gebaut
   und setzt Weiss fest. Auf der hellen Klemmbrett-Seite waere der Text
   unsichtbar, deshalb hier auf Tokens statt auf feste Farben. */
.section--paper .guarantee,
.section:not(.coach-band):not(.section-dark) .guarantee {
  border-top-color: var(--border);
  color: var(--accent);
}
.section--paper .guarantee p,
.section:not(.coach-band):not(.section-dark) .guarantee p { color: var(--fg-2); }
.section--paper .guarantee strong,
.section:not(.coach-band):not(.section-dark) .guarantee strong {
  color: var(--fg); display: block; font-size: 17px; margin-bottom: 6px;
}

/* Die Abo-Karte darf ihre Zahl nicht so laut sagen wie die Kaufkarte.
   Gleich gross plus schwarz auf weiss hiesse: 49,99 gewinnt den Blick
   gegen ein oranges 499 — genau der Fehler, der behoben werden soll. */
.pcard:not(.pcard--win) .pcard-price {
  font-size: clamp(24px, 2.5vw, 32px);
  color: var(--fg-2);
}

/* Das Diagramm skaliert mit der Breite; auf dem Handy landet die
   17-px-Schrift bei effektiv acht Pixeln. Statt seitlich zu scrollen
   wird die Schrift im viewBox groesser gesetzt — die Balken bleiben
   gleich, nur die Beschriftung waechst mit. */
@media (max-width: 680px) {
  .pyr svg .pyr-num { font-size: 27px; }
  .pyr svg .pyr-yr  { font-size: 19px; }
  .pyr svg .pyr-lg  { font-size: 20px; }
}

/* Stellenuebersicht: (m/w/d) und Vertragsart gehoeren sichtbar auf die
   Karte. (m/w/d) stand vorher nur im <title> — ein Browser-Tab ist keine
   geschlechtsneutrale Ausschreibung. Und die Vertragsart entschied bisher
   erst die Unterseite: wer nur die Uebersicht liest, denkt Anstellung. */
.job-card-mwd { font-weight: 400; color: var(--fg-2); font-size: 0.72em; white-space: nowrap; }
.job-card-contract {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px; letter-spacing: 0.03em; line-height: 1.5;
  color: var(--fg-2);
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════════
   GEBIETSZEILE unter den Referenzen
   ────────────────────────────────────────────────────────────────────
   Zwischen Referenz-Karussell und orangem Abschluss lagen 190 Zeilen
   ohne eine einzige Handlungsmoeglichkeit fuer einen Kaeufer. Genau da
   ist er am waermsten. Die Exklusivitaets-Aussage stand bisher
   zugeklappt in der fuenften FAQ — sie ist der einzige Grund, JETZT
   anzufragen statt irgendwann.
   ══════════════════════════════════════════════════════════════════ */
.gebiet {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-5) var(--space-8);
  margin-top: var(--space-8); padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}
.gebiet h3 { font-size: clamp(20px, 2.2vw, 27px); margin: 0 0 8px; letter-spacing: -0.015em; }
.gebiet p  { margin: 0; color: var(--fg-2); font-size: 15.5px; line-height: 1.65; max-width: 62ch; }
.gebiet .btn { flex: none; }
@media (max-width: 700px) { .gebiet .btn { width: 100%; justify-content: center; } }

/* Nach acht abgeraeumten Einwaenden stand bisher nichts. */
.faq-after {
  margin: var(--space-8) 0 0; font-size: 15.5px; color: var(--fg-2);
  padding-top: var(--space-6); border-top: 1px solid var(--border);
}
.faq-after a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.faq-after a:hover { color: var(--accent); }

/* Die Beschriftungen unter den grossen Zahlen standen auf --muted:
   #A8A8A4 auf Weiss ergibt 2,4:1 und war damit das am schlechtesten
   lesbare Element der Website. Eine Zahl ohne lesbare Einheit ist
   keine Zahl. */
.stat-lbl {
  margin: 8px 0 0;
  color: var(--fg-2);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}
.stats-note {
  margin: var(--space-6) 0 0;
  font-size: 13.5px; line-height: 1.65; color: var(--fg-2);
  max-width: 78ch;
}

/* ══════════════════════════════════════════════════════════════════
   BAUSTEINE FUER DIE LEISTUNGSSEITEN
   ────────────────────────────────────────────────────────────────────
   leadgenerierung.html und vertrieb-auslagern.html waren dieselbe Datei
   mit ausgetauschten Substantiven: 197 Zeilen, drei Abschnitte, kein
   Beweis, kein Preisanker, kein Farbwechsel, ein einziger CTA und kein
   Abschluss. Diese Klassen sind das, was ihnen zum Muster der
   Coaching-Seite gefehlt hat.
   ══════════════════════════════════════════════════════════════════ */

/* hero2-note steht sonst auf dem dunklen Hero. */
.hero2-note--light { color: var(--fg-2); }

/* Ablauf als nummerierte Kette. Die Linie macht aus vier Kaesten eine
   Reihenfolge — genau die Aussage "vier Handgriffe, keine Projektphase". */
.flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
  counter-reset: flowstep;
}
@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  /* Die Verbindungslinie laeuft in die Luecke rechts. Am Zeilenende gibt
     es keine Luecke mehr, dort schiebt sie die Seite nach rechts raus. */
  .flow li:nth-child(2n)::after { display: none; }
}
@media (max-width: 520px) {
  .flow { grid-template-columns: 1fr; }
  .flow li::after { display: none; }
}
.flow li { position: relative; padding-top: 42px; counter-increment: flowstep; }
/* Die durchgehende Linie sitzt auf der Punkthoehe und endet am letzten
   Punkt, nicht am Rand. */
.flow li::after {
  content: ""; position: absolute; top: 13px; left: 28px; right: calc(-1 * var(--space-5));
  height: 2px; background: var(--border);
}
.flow li:last-child::after { display: none; }
.flow li::before {
  content: counter(flowstep, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700;
}
.flow strong { display: block; font-size: 16px; color: var(--fg); margin-bottom: 5px; }
.flow span { font-size: 14px; line-height: 1.6; color: var(--fg-2); }

/* Exklusivitaets-Vergleich: Grafik links, Argument rechts. */
.excl { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px,4vw,56px); align-items: center; }
@media (max-width: 900px) { .excl { grid-template-columns: 1fr; } }
.excl-fig { margin: 0; background: #fff; border-radius: var(--radius-lg); padding: var(--space-5); }
.excl-fig svg { width: 100%; height: auto; display: block; }
.excl p { color: var(--fg-2); font-size: 15.5px; line-height: 1.7; margin: 0 0 var(--space-4); }

/* Preisanker ueber die Alternative. Wir nennen keinen eigenen Preis —
   der Leser bekommt trotzdem eine Bezugsgroesse, und ohne die ruft er
   entweder nicht an oder er ruft an, um zu verhandeln. */
.anchor2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 760px) { .anchor2 { grid-template-columns: 1fr; } }
.anchor2-col {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.anchor2-col--win { border-color: rgba(245,95,25,0.5); background: rgba(245,95,25,0.04); }
.anchor2-lbl {
  font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fg-2); margin: 0 0 var(--space-4);
}
.anchor2-col--win .anchor2-lbl { color: var(--accent); }
.anchor2-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.anchor2-col li { font-size: 15px; line-height: 1.55; color: var(--fg-2); display: flex; gap: 11px; }
.anchor2-col li::before { content: "–"; color: var(--muted); flex: 0 0 auto; }
.anchor2-col--win li::before { content: "✓"; color: var(--accent); font-weight: 700; }

.mathline-p {
  margin: var(--space-6) 0 0; font-size: 15.5px; line-height: 1.7; color: var(--fg-2);
  max-width: 76ch; border-left: 3px solid var(--accent); padding-left: var(--space-5);
}

/* Aufgabenteilung: was beim Auftraggeber bleibt, was wir uebernehmen.
   Der Kontrollverlust-Einwand stand vorher zugeklappt in der dritten
   FAQ-Karte, 39 Zeilen von der zugehoerigen Behauptung entfernt. */
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 560px) { .split2 { grid-template-columns: 1fr; } }
.split2 > div { border-top: 2px solid rgba(255,255,255,0.18); padding-top: var(--space-4); }
.split2 > div + div { border-top-color: var(--accent); }
.split2-lbl {
  font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fg-2); margin: 0 0 var(--space-4);
}
.split2-lbl--us { color: var(--accent); }
.split2 ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.split2 li { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); }

/* Zeitleisten-Vergleich Eigenaufbau gegen gebuchtes Team. */
.cmpfig { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(18px,2.4vw,32px); }
.cmpfig svg { width: 100%; height: auto; display: block; }
.cmpfig figcaption { font-size: 14.5px; line-height: 1.65; color: var(--fg-2); margin-top: var(--space-4); max-width: 78ch; }
@media (max-width: 680px) { .cmpfig svg .cm-t { font-size: 17px; } .cmpfig svg .cm-s { font-size: 18px; } .cmpfig svg .cm-h { font-size: 20px; } }

/* ══════════════════════════════════════════════════════════════════
   DIE ZWEI GESICHTER auf der Startseite
   ────────────────────────────────────────────────────────────────────
   Vorher zwei versetzt haengende Fotokarten (nth-child(even) bekam
   52px margin-top). Das sah nach Magazin aus, sagte aber nichts: ein
   Portraet und ein Zitat beantworten nicht die Frage, wer da an die
   eigene Firma geht. Jetzt liegen beide auf einer Linie, Foto links,
   Herkunft rechts, und jeder hat einen Weg zum Weiterlesen.
   ══════════════════════════════════════════════════════════════════ */
.mates { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.4vw, 52px); align-items: start; }
@media (max-width: 900px) { .mates { grid-template-columns: 1fr; gap: var(--space-8); } }

.mate { display: grid; grid-template-columns: 168px 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 1080px) { .mate { grid-template-columns: 132px 1fr; } }
@media (max-width: 620px)  { .mate { grid-template-columns: 108px 1fr; gap: var(--space-4); } }

.mate-photo {
  aspect-ratio: 4 / 5;
  background-size: cover; background-position: center 18%;
  background-color: #0e1020;
  border-radius: var(--radius-lg);
}
.mate-role {
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 6px;
}
.mate-name { font-size: clamp(19px, 2vw, 24px); margin: 0 0 var(--space-3); letter-spacing: -0.015em; }
.mate-bio  { font-size: 14.5px; line-height: 1.65; color: var(--fg-2); margin: 0 0 var(--space-3); }
.mate-quote {
  font-size: 14.5px; line-height: 1.6; font-style: italic; color: var(--fg);
  margin: 0 0 var(--space-4);
  border-left: 3px solid var(--accent); padding-left: var(--space-4);
}
.mate-go { font-size: 14px; font-weight: 700; color: var(--accent); }
.mate-go:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Zahlenzeile im Callcenter-Band. Das Callcenter ist ein grosser Teil
   des Geschaefts und sah aus wie eine Fussnote zum Photovoltaik-Geschaeft.
   Eigene Zahlen im eigenen dunklen Band — die Termin- und
   Stattfindungsquote gehoert hierher, nicht in die Firmenkennzahlen. */
.ccnums { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--space-5) clamp(22px,3vw,44px); margin: var(--space-6) 0; }
@media (max-width: 520px) { .ccnums { grid-template-columns: repeat(2, auto); } }
.ccnums b {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.02em; color: var(--accent);
}
.ccnums span { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.45; color: var(--fg-2); max-width: 22ch; }

/* ══════════════════════════════════════════════════════════════════
   ORANGE NUR FUER KLICKBARES
   ────────────────────────────────────────────────────────────────────
   Gezaehlt: rund sechzig Orange-Vorkommen auf der Startseite, davon
   zehn klickbar. Kartennummern, Branchenlabels, Anfuehrungszeichen und
   Pfeile trugen dieselbe Farbe wie die Knoepfe. Das Auge lernt in einem
   Durchgang, dass Orange nicht klickbar ist — und genau der Knopf, der
   Geld bringt, verliert damit seine Wirkung.

   Die orangen Ueberschriften-Pointen (.hl) bleiben bewusst unangetastet;
   das ist die Handschrift der Seite, keine Handlungsaufforderung, und
   sie stehen an einer Stelle, an der niemand einen Klick erwartet.
   ══════════════════════════════════════════════════════════════════ */

/* Nummerierung der Leistungskarten: reine Ordnung, kein Ziel. */
.svc4-num { color: var(--fg-dim); }

/* Branchenlabel ueber jedem Referenzzitat — zehnmal auf einer Seite. */
.ref-branche { color: var(--fg-2); }

/* Das oeffnende Anfuehrungszeichen jedes Zitats, ebenfalls zehnmal. */
.ref-quote::before { color: var(--fg-dim); }

/* Die Empfohlen-Karte hatte fuenf Orange-Ebenen uebereinander:
   Hintergrund, Rahmen, Flagge, Preis und darin der Knopf. Der Knopf
   ist das einzige klickbare Element und hob sich nicht mehr ab.
   Flaeche und Rahmen werden neutral, Flagge weiss auf schwarz —
   Preis und Knopf behalten die Farbe. */
.tier--pro { border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.055); }
.tier-flag { background: #ffffff; color: var(--bg-dark); }

/* Zweispaltige Variante der Ablauf-Kette: sie steht in einer Spalte des
   careers-head-Rasters und haette als Viererreihe keinen Platz. */
.flow--2 { grid-template-columns: repeat(2, 1fr); }
.flow--2 li:nth-child(2n)::after { display: none; }
@media (max-width: 620px) { .flow--2 { grid-template-columns: 1fr; } .flow--2 li::after { display: none; } }
/* Zeitmarke ueber dem Schritt — loest das Versprechen "unter zwei Wochen"
   ein, das die Ueberschrift macht und die Schritte bisher schuldig blieben. */
.flow em {
  display: block; font-family: var(--font-mono, monospace); font-style: normal;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   GRAFIKEN CALLCENTER-SEITE
   ────────────────────────────────────────────────────────────────────
   Die Seite war reiner Text, waehrend Klemmbrett und Coaching Bilder
   haben. Das Wallboard ist das Gegenstueck zum Klemmbrett-Handy: es
   zeigt den Betrieb, statt ihn zu behaupten. Zahlen darin sind die-
   selben wie im Text daneben — 250, 90 %+, 12.
   ══════════════════════════════════════════════════════════════════ */
.wallfig svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 22px 44px rgba(0,0,0,0.28)); }
.ringfig { margin: 0 0 var(--space-10); background: var(--surface); border: 1px solid var(--border);
           border-radius: var(--radius-lg); padding: clamp(16px,2.4vw,30px); }
.ringfig svg { width: 100%; max-width: 640px; height: auto; display: block; margin: 0 auto; }
@media (max-width: 680px) {
  .ringfig svg { max-width: 380px; }
  .ringfig svg text { font-size: 15px; }
}

/* Grafiken Klinik-Seite: Kanal-Trichter im dunklen Band, Patienten-
   Zeitleiste im Planbarkeits-Abschnitt. Beide identisch mit dem
   Pitch-Deck — Seite und Deck erzaehlen dieselbe Geschichte. */
.chanfig { margin: var(--space-10) 0 0; }
.chanfig--light { margin: 0 0 var(--space-10); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(16px,2.4vw,28px); }
.chanfig svg { width: 100%; height: auto; display: block; }
.tlfig { margin: var(--space-10) 0 0; background: var(--surface); border: 1px solid var(--border);
         border-radius: var(--radius-lg); padding: clamp(16px,2.4vw,28px) clamp(12px,2vw,24px) clamp(8px,1.4vw,16px); }
.tlfig svg { width: 100%; height: auto; display: block; }
@media (max-width: 680px) {
  .chanfig svg text { font-size: 19px; }
  .tlfig svg text { font-size: 19px; }
}


/* ──────────────────────────────────────────────────────────────
   Feedback-Runde GF, 14.08.2026. Bewusst als Anhang: spaetere
   Regeln gewinnen bei gleicher Spezifitaet, der Diff bleibt klein.
   ────────────────────────────────────────────────────────────── */

/* Nav ueber dunklen Heroes: Die is-over-dark-Regel (hoehere
   Spezifitaet) legte noch die alten Glas-Kaesten ueber die Links —
   mit border-radius:0 aus der Textlink-Runde wurden daraus eckige
   Boxen, die sonst nirgends im Branding vorkommen. Jetzt sind die
   Links in beiden Themes reine Textlinks mit Unterstrich-Hover. */
.topnav.is-over-dark nav a {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.88) !important;
}
.topnav.is-over-dark nav a:hover,
.topnav.is-over-dark nav a.is-active {
  background: transparent;
  border: none;
  color: #ffffff !important;
}

/* Leistungs-Karten: Nummern 01-04 lasen sich wie vier Schritte einer
   Anleitung. Es sind aber vier Angebote — jetzt mit je einem eigenen
   Zeichen statt einer Laufnummer. */
.svc4-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(245,95,25,0.10);
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.svc4-ico svg { width: 28px; height: 28px; }
.svc4-card:hover .svc4-ico { background: rgba(245,95,25,0.16); }

/* Callcenter-Zahlenzeile mit vierter Kennzahl */
.ccnums--4 { grid-template-columns: repeat(4, auto); }
@media (max-width: 900px) { .ccnums--4 { grid-template-columns: repeat(2, auto); } }

/* Gebiets-Kachel mit Beispielkarte: aus der reinen Textzeile wird
   ein zweispaltiger Block — links Aussage und CTA, rechts die Karte
   mit dem orangen 35-km-Ring. */
.gebiet--map {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.gebiet--map .gebiet-copy .btn { margin-top: var(--space-5); }
.gebiet-map svg { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 10px 34px rgba(14,14,13,0.10); }
@media (max-width: 860px) { .gebiet--map { grid-template-columns: 1fr; } }

/* Auftraggeber-Sektion: kleiner Dreischritt als Bild ueber der Liste */
.client-fig { margin-bottom: var(--space-6); }
.client-fig svg { display: block; width: 100%; max-width: 540px; height: auto; }

/* Ueber-uns: Ziele als Fahrplan statt nummerierter Karten. Eine
   orange Leitlinie verbindet die drei Ziele, jedes hat Zeichen und
   Status-Chip — Fahrplan statt Wunschliste. */
.goalsv { position: relative; display: grid; gap: var(--space-6); max-width: 880px; }
.goalv {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-5);
  padding: var(--space-6);
  background: #ffffff;
  border: 1px solid rgba(14,14,13,0.08);
  border-radius: var(--radius-lg, 20px);
  box-shadow: 0 6px 24px rgba(14,14,13,0.05);
}
.goalv + .goalv::before {
  content: "";
  position: absolute;
  left: 55px;
  top: calc(-1 * var(--space-6) - 2px);
  height: var(--space-6);
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--accent) 0 6px, transparent 6px 12px);
}
.goalv-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 18px;
  background: rgba(245,95,25,0.10); color: var(--accent);
}
.goalv-ico svg { width: 32px; height: 32px; }
.goalv h3 { margin: 2px 0 8px; font-size: clamp(19px, 2vw, 24px); }
.goalv p { margin: 0; color: var(--fg-2); font-size: 15.5px; line-height: 1.65; }
.goalv-chip {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(245,95,25,0.10);
  color: var(--accent);
  font-family: var(--font-mono, monospace);
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
.goalv-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@media (max-width: 640px) { .goalv { grid-template-columns: 1fr; } .goalv + .goalv::before { display: none; } }

/* Ueber-uns: virtuelles Office als Bild */
.voffice-fig svg { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 10px 34px rgba(14,14,13,0.28); }

/* Coaching-Seite: interaktiver Lead-Rechner */
.leadcalc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  background: #141413;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  padding: clamp(24px, 4vw, 48px);
}
.leadcalc label { display: block; font-size: 13px; letter-spacing: 0.4px; color: rgba(255,255,255,0.55); margin: 0 0 6px; }
.leadcalc .lc-row { margin-bottom: var(--space-5); }
.leadcalc .lc-val { float: right; font-family: var(--font-mono, monospace); font-size: 13px; color: #fff; }
.leadcalc input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.16); outline: none;
}
.leadcalc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid #141413; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(245,95,25,0.6);
}
.leadcalc input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 3px solid #141413; cursor: pointer;
}
.lc-out { border-left: 1px solid rgba(255,255,255,0.10); padding-left: clamp(20px, 3vw, 48px); }
.lc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.lc-line span { font-size: 14px; color: rgba(255,255,255,0.60); }
.lc-line b { font-family: var(--font-mono, monospace); font-size: 16px; color: #fff; white-space: nowrap; }
.lc-line--big { border-bottom: none; padding-top: 14px; }
.lc-line--big span { color: rgba(255,255,255,0.75); font-weight: 600; }
.lc-line--big b { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); color: var(--accent); font-weight: 600; }
.lc-note { margin-top: var(--space-4); font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.40); }
.lc-cta { margin-top: var(--space-5); }
@media (max-width: 820px) {
  .leadcalc { grid-template-columns: 1fr; }
  .lc-out { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.10); padding-top: var(--space-5); }
}

/* Coaching-Seite: "Fuer wen das nichts ist" endet nicht mehr im Nein,
   sondern im Angebot — Kasten mit Handelsvertreter-Grafik. */
.fitflip {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: var(--space-6);
  padding: clamp(22px, 3.5vw, 40px);
  background: rgba(245,95,25,0.06);
  border: 1px solid rgba(245,95,25,0.30);
  border-radius: 20px;
}
.fitflip h3 { margin: 0 0 10px; font-size: clamp(19px, 2vw, 25px); }
.fitflip p { margin: 0 0 8px; color: var(--fg-2); font-size: 15.5px; line-height: 1.65; }
.fitflip svg { display: block; width: 100%; height: auto; }
.fitflip .btn { margin-top: var(--space-4); }
@media (max-width: 820px) { .fitflip { grid-template-columns: 1fr; } }
.ccnums b { white-space: nowrap; }

/* Gruenderkarten (Rueckmeldung GF): Die 4:3-Kacheln schnitten die
   Portraets so eng, dass nur Gesicht blieb. Auf dem Desktop liegen
   Foto und Text jetzt nebeneinander — das hochformatige Portraet
   wird komplett gezeigt statt beschnitten. */
.founder-photo { aspect-ratio: 1 / 1; background-size: cover; background-position: center 15%; }


/* ── Startseite: Was wir machen — sechs Bereiche als Bento-Karten.
   Ersetzt Problem-Sektion, Callcenter-Band, Coaching-Band und
   Client-Pitch auf der Startseite: eine grafische Übersicht, die
   Details wohnen auf den Unterseiten. ─────────────────────────── */
.hp6-feat { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-5, 20px); margin-bottom: var(--space-5, 20px); }
.hp6-four { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5, 20px); }
.hp6-card { position: relative; display: block; background: #fff; border: 1px solid rgba(14,14,13,0.08); border-radius: 18px; padding: clamp(22px, 2.4vw, 34px); transition: transform .25s ease, box-shadow .25s ease; }
.hp6-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14,14,13,0.10); }
.hp6-card h3 { margin: 0 0 8px; font-size: clamp(18px, 1.6vw, 22px); }
.hp6-card p { margin: 0 0 14px; color: rgba(14,14,13,0.66); font-size: 15px; line-height: 1.55; }
.hp6-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: #FDEBE0; color: var(--accent); margin-bottom: 16px; }
.hp6-ico svg { width: 34px; height: 34px; }
.hp6-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; }
.hp6-chips span { font-family: var(--font-mono, monospace); font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(245,95,25,0.09); color: var(--accent-deep, #B8391F); white-space: nowrap; }
.hp6-kb { background: #0E0E0D; border-color: #0E0E0D; color: #fff; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 12px; overflow: hidden; padding-bottom: 0; }
.hp6-kb h3 { color: #fff; }
.hp6-kb p { color: rgba(255,255,255,0.68); }
.hp6-kb-copy { padding-bottom: clamp(22px, 2.4vw, 34px); }
.hp6-kb-dev { align-self: end; justify-self: center; width: min(220px, 100%); margin-bottom: -130px; filter: drop-shadow(0 18px 34px rgba(0,0,0,0.5)); }
.hp6-kb .svc4-more { color: var(--accent); }
@media (max-width: 980px) {
  .hp6-feat { grid-template-columns: 1fr; }
  .hp6-four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hp6-four { grid-template-columns: 1fr; }
  .hp6-kb { grid-template-columns: 1fr; }
  .hp6-kb-dev { margin-bottom: -150px; }
}


/* Abstand Hero → Logo-Leiste: auf grossen Schirmen endete der Inhalt
   weit ueber der Falz und liess einen halben Bildschirm Dunkelraum.
   Der Hero endet jetzt knapp ueber der Falz, die Logos ruecken nach. */
@media (min-width: 761px) {
  .hero-fullvh { height: 86vh; min-height: 620px; }
}


/* ── Digitales Produkt: breite Verkaufs-Karte unter den sechs Kacheln ── */
.hp6-wide { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 3vw, 48px); align-items: center; margin-top: var(--space-5, 20px); background: linear-gradient(120deg, #F55F19 0%, #E63A05 100%); border-radius: 18px; padding: clamp(24px, 3vw, 40px); color: #fff; transition: transform .25s ease, box-shadow .25s ease; }
.hp6-wide:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(230,58,5,0.35); }
.hp6-wide-tag { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.85); margin: 0 0 10px; }
.hp6-wide h3 { margin: 0 0 10px; font-size: clamp(20px, 2vw, 28px); color: #fff; }
.hp6-wide p { margin: 0 0 14px; color: rgba(255,255,255,0.88); font-size: 15px; line-height: 1.55; max-width: 62ch; }
.hp6-wide .svc4-more { color: #fff; }
.hp6-wide-price { text-align: center; background: #fff; color: #E63A05; border-radius: 16px; padding: 22px 28px; min-width: 180px; }
.hp6-wide-price b { display: block; font-family: var(--font-display); font-size: clamp(32px, 3vw, 44px); line-height: 1; }
.hp6-wide-price span { display: block; font-weight: 600; font-size: 13px; margin-top: 4px; letter-spacing: 1px; text-transform: uppercase; }
.hp6-wide-price em { display: block; font-style: normal; font-size: 11.5px; color: rgba(14,14,13,0.6); margin-top: 10px; max-width: 180px; }
@media (max-width: 760px) { .hp6-wide { grid-template-columns: 1fr; } .hp6-wide-price { justify-self: start; } }


/* ── Kennzahlen-Kacheln: Icon, grosse Zahl links, dunkle Hero-Kachel ── */
.statx { text-align: left !important; padding: clamp(22px, 2.4vw, 32px) !important; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.statx:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14,14,13,0.10); }
.statx-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #FDEBE0; color: var(--accent); margin-bottom: 18px; }
.statx-ico svg { width: 28px; height: 28px; }
.statx-num { font-family: var(--font-display); font-size: clamp(44px, 4.5vw, 68px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.statx-num::after { content: ''; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--accent); margin-top: 12px; }
.statx .stat-lbl { margin-top: 12px; text-align: left; }
.statx--dark { background: #0E0E0D !important; border-color: #0E0E0D !important; }
.statx--dark .statx-ico { background: rgba(245,95,25,0.16); }
.statx--dark .statx-num { color: var(--accent); }
.statx--dark .stat-lbl { color: rgba(255,255,255,0.72); }


/* ── Influencer-Seite: Talent-Wand — Namen als Chips ── */
.tal-wall { display: flex; flex-wrap: wrap; gap: 10px; }
.tal-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 11px 18px; border-radius: 999px; background: #fff; border: 1px solid rgba(14,14,13,0.10); font-weight: 600; font-size: clamp(14px, 1.2vw, 16px); transition: transform .2s ease, border-color .2s ease; }
.tal-chip:hover { transform: translateY(-2px); border-color: var(--accent); }
.tal-chip em { font-style: normal; font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-deep, #B8391F); }
.tal-chip--more { background: var(--accent); border-color: var(--accent); color: #fff; }


/* Talent-Karten mit echter Instagram-Reichweite */
.tal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tal-card { background: #fff; border: 1px solid rgba(14,14,13,0.10); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; transition: transform .2s ease, border-color .2s ease; }
.tal-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.tal-card b { font-size: clamp(15px, 1.3vw, 17px); }
.tal-num { font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; color: var(--accent); line-height: 1.1; }
.tal-card em { font-style: normal; font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(14,14,13,0.5); }
@media (max-width: 900px) { .tal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tal-grid { grid-template-columns: 1fr; } }


/* Talent-Profile: Foto, Name, Reichweite, Kurzbio */
.tal-pros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tal-pro { background: #fff; border: 1px solid rgba(14,14,13,0.10); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 6px; transition: transform .2s ease, box-shadow .2s ease; }
.tal-pro:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(14,14,13,0.12); }
.tal-pic { display: block; width: 86px; height: 86px; border-radius: 50%; background-size: cover; background-position: center; background-color: #EDEBE6; border: 3px solid #FDEBE0; margin-bottom: 6px; }
.tal-pro b { font-size: 15.5px; line-height: 1.25; }
.tal-pro .tal-num { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--accent); line-height: 1.1; }
.tal-pro p { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(14,14,13,0.62); }
@media (max-width: 1020px) { .tal-pros { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .tal-pros { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .tal-pros { grid-template-columns: 1fr; } }


/* Talent-Karten sind Links zum jeweiligen Kanal */
a.tal-pro { color: inherit; text-decoration: none; cursor: pointer; }
a.tal-pro:hover .tal-num { text-decoration: underline; }


/* Creator-Seite: Behandlungs-Kacheln auf dunklem Band */
.beh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.beh-tile { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 16px 18px; transition: border-color .2s ease, transform .2s ease; }
.beh-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.beh-ico { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 12px; background: rgba(245,95,25,0.16); color: var(--accent); }
.beh-ico svg { width: 26px; height: 26px; }
.beh-tile b { font-size: 13.5px; line-height: 1.35; color: #fff; font-weight: 600; }
@media (max-width: 1020px) { .beh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .beh-grid { grid-template-columns: 1fr; } }