/* ==========================================================================
   The Zone Media, Startseite, eigenständige Fassung V2
   Basis Variante B, Hero, Methodik und Menschen aus C, Cases aus A.

   Aufbau
     1  Tokens
     2  Reset und Basis
     3  Bausteine (Wrap, Eyebrow, Buttons, Links, Fokus)
     4  Navigation
     5  Hero (Glow, Copy, Vertrauen, KI-Check, Suchobjekt)
     6  Logowand
     7  Problem
     8  Leistungen
     9  Flächenstapel (Cases, Methodik, Menschen)
     10 Cases
     11 Methodik
     12 Menschen
     13 Einstieg
     14 FAQ
     15 Abschluss
     16 Footer
     17 Bewegung (Hero-Staffelung, Reveal)
     18 Responsive
     19 Reduced Motion
   ========================================================================== */


/* ==========================================================================
   1 Tokens (SPEC 2, Verläufe und Duotone aus brand.md)
   ========================================================================== */

:root {
  --tz-navy: #020A18;
  --tz-orange: #FC4C01;
  --tz-orange-action: #D64000;
  --tz-orange-ink: #C23A01;
  --tz-paper: #FFFFFF;
  --tz-stone: #F5F4F1;
  --tz-muted: #596270;
  --tz-line: #DDE2E9;
  --tz-blue: #315F9D;
  --tz-blue-surface: #F1F6FC;
  --tz-blue-line: #C5D6E9;
  --tz-peach-surface: #FFF0E8;
  --tz-peach-line: #F0C2AF;
  --tz-green: #0A7A54;

  /* auf Navy-Flächen */
  --tz-stage-ink: #E9E9E9;
  --tz-stage-ink-muted: #A9ADB5;
  --tz-stage-line: rgb(233 233 233 / 18%);
  --tz-stage-fill: rgb(233 233 233 / 6%);

  /* Verläufe 1 und 4, nur als Hintergrund */
  --tz-g1-orange: #FC4C01;
  --tz-g1-light: #EBDAD2;
  --tz-g4-light: #FF9D6E;
  --tz-gradient-peach-glow: linear-gradient(135deg, #FFF0E8, #FFFFFF 80%);
  --tz-grid: linear-gradient(rgb(252 76 1 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(252 76 1 / 7%) 1px, transparent 1px);

  --tz-shadow-blue: 0 18px 48px rgb(37 73 120 / 8%);
  --tz-shadow-peach: 0 18px 48px rgb(82 47 30 / 7%);
  --tz-shadow-compact: 0 8px 24px rgb(21 37 57 / 4%);
  --tz-shadow-orange: 0 12px 28px rgb(252 76 1 / 28%);

  --tz-radius-pill: 999px;
  --tz-radius-compact: 14px;
  --tz-radius-panel: 24px;
  --tz-radius-surface: 32px;

  --tz-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --tz-font-body: 'Nunito', ui-sans-serif, system-ui, sans-serif;

  --tz-container: 1280px;
  --tz-gutter: clamp(20px, 5vw, 80px);
  --tz-inset: clamp(8px, 1.1vw, 16px);          /* Randabstand der runden Grossflächen */
  --tz-section: clamp(72px, 8.4vw, 120px);
  --tz-section-tight: clamp(48px, 5.6vw, 80px);

  --tz-h2: clamp(32px, 3.6vw, 52px);

  /* Hero-Oberkante (Audit B1): alle Heros starten mit --tz-hero-top unter der
     Nav. Eine Brotkrume sitzt höher (--tz-hero-top-crumbs), danach folgt die
     Eyebrow mit --tz-crumbs-gap. Ergebnis bei 1440: Eyebrow 166 px ohne,
     208 px mit Brotkrume; bei 390: 106 und 150 px. */
  --tz-hero-top: clamp(48px, 5.6vw, 80px);
  --tz-hero-top-crumbs: clamp(36px, 4.6vw, 64px);
  --tz-crumbs-gap: 14px;

  /* H1 in zwei Stufen (Audit B4): Display für Heros, Text für Lesespalten */
  --tz-h1-display: clamp(38px, 5vw, 72px);
  --tz-h1-text: clamp(32px, 3.9vw, 56px);

  /* Funktionsfarben ausserhalb der Markenpalette (Audit C3) */
  --tz-green-dot: #22C08A;          /* Live-Punkt */
  --tz-error: #B42318;              /* Formularfehler: Text */
  --tz-error-surface: #FEF3F2;      /* Formularfehler: Fläche */
  --tz-error-line: #F3AEAA;         /* Formularfehler: Linie */
  --tz-duotone-shadow: #1B1919;     /* Grund hinter Duotone-Fotos */

  --tz-ease: cubic-bezier(.2, .6, .2, 1);
  --tz-ease-out: cubic-bezier(.16, 1, .3, 1);
  --tz-dur-fast: 180ms;
  --tz-dur-base: 300ms;
  --tz-dur-slow: 600ms;
}


/* ==========================================================================
   2 Reset und Basis
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  position: relative;
  isolation: isolate;
  margin: 0;
  background: var(--tz-paper);
  color: var(--tz-navy);
  font-family: var(--tz-font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote, address { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
strong, b { font-weight: 700; }
main:focus { outline: none; }


/* ==========================================================================
   3 Bausteine
   ========================================================================== */

.wrap { width: min(100% - 2 * var(--tz-gutter), var(--tz-container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nb { white-space: nowrap; }
.accent { color: var(--tz-orange); }

:focus-visible { outline: 3px solid var(--tz-orange); outline-offset: 4px; border-radius: 6px; }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 14px 20px; border-radius: var(--tz-radius-pill);
  background: var(--tz-navy); color: var(--tz-stage-ink);
  font: 700 15px/1 var(--tz-font-display); text-decoration: none;
}
.skip-link:focus { top: 16px; }

.eyebrow {
  font: 500 12px/1.4 var(--tz-font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tz-orange-ink);
}

.h2 {
  font: 700 var(--tz-h2)/1.08 var(--tz-font-display);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lead { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; color: var(--tz-muted); text-wrap: pretty; }

/* Brotkrumen (Audit B2): ein Bauteil für alle Seitentypen. Die alten Typ-Klassen
   laufen über dieselbe Selektorliste, neue Seiten nutzen .crumbs. Die Brotkrume
   ist das erste Element im Hero und ragt um die Differenz der Hero-Tokens nach
   oben, damit die Eyebrow danach überall auf derselben Höhe steht. Eine Zeile,
   die aktuelle Seite wird bei Platzmangel mit Auslassungspunkten gekürzt. */
:is(.crumbs, .article-crumbs, .hub-crumb, .contact-crumb, .legal-crumb, .people-crumbs, .case-crumbs) {
  margin-top: calc(var(--tz-hero-top-crumbs) - var(--tz-hero-top));
  margin-bottom: var(--tz-crumbs-gap);
}
:is(.crumbs, .article-crumbs, .hub-crumb, .contact-crumb, .legal-crumb, .people-crumbs, .case-crumbs) ol {
  display: flex; align-items: center; min-height: 44px;
  font: 500 13px/1.3 var(--tz-font-display); letter-spacing: .04em; color: var(--tz-muted);
}
:is(.crumbs, .article-crumbs, .hub-crumb, .contact-crumb, .legal-crumb, .people-crumbs, .case-crumbs) li { display: block; flex: none; white-space: nowrap; }
:is(.crumbs, .article-crumbs, .hub-crumb, .contact-crumb, .legal-crumb, .people-crumbs, .case-crumbs) li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:is(.crumbs, .article-crumbs, .hub-crumb, .contact-crumb, .legal-crumb, .people-crumbs, .case-crumbs) li:last-child:has(> a) { overflow: visible; }
:is(.crumbs, .article-crumbs, .hub-crumb, .contact-crumb, .legal-crumb, .people-crumbs, .case-crumbs) li + li::before { content: "/"; margin: 0 10px; color: var(--tz-line); }
:is(.crumbs, .article-crumbs, .hub-crumb, .contact-crumb, .legal-crumb, .people-crumbs, .case-crumbs) a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--tz-muted); text-decoration: none;
  transition: color var(--tz-dur-fast) var(--tz-ease);
}
:is(.crumbs, .article-crumbs, .hub-crumb, .contact-crumb, .legal-crumb, .people-crumbs, .case-crumbs) a:hover { color: var(--tz-orange-ink); }
:is(.crumbs, .article-crumbs, .hub-crumb, .contact-crumb, .legal-crumb, .people-crumbs, .case-crumbs) [aria-current="page"] { color: var(--tz-navy); }
.on-dark :is(.crumbs, .article-crumbs, .hub-crumb, .contact-crumb, .legal-crumb, .people-crumbs, .case-crumbs) :is(ol, a) { color: var(--tz-stage-ink-muted); }
.on-dark :is(.crumbs, .article-crumbs, .hub-crumb, .contact-crumb, .legal-crumb, .people-crumbs, .case-crumbs) li + li::before { color: var(--tz-stage-line); }
.on-dark :is(.crumbs, .article-crumbs, .hub-crumb, .contact-crumb, .legal-crumb, .people-crumbs, .case-crumbs) a:hover { color: var(--tz-orange); }
.on-dark :is(.crumbs, .article-crumbs, .hub-crumb, .contact-crumb, .legal-crumb, .people-crumbs, .case-crumbs) [aria-current="page"] { color: var(--tz-stage-ink); }

/* Hero-Textspalte immer an der Oberkante, das Objekt daneben bleibt zentriert
   (Audit A1: center zog die Textspalte nach unten, sobald das Objekt höher war) */
:is(.hero-copy, .hub-hero-copy, .service-hero-copy, .tool-hero-copy, .people-hero-copy, .contact-hero-copy) { align-self: start; }

/* Abstand vor dem Footer an einer Stelle (Audit C17) */
main > :last-child { padding-bottom: var(--tz-section-tight); }

/* Buttons: Navy auf Orange, Hover Navy-Fläche (brand.md 6, Motion) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 17px 30px;
  border-radius: var(--tz-radius-pill);
  font: 700 15px/1 var(--tz-font-display);
  letter-spacing: .02em; text-transform: uppercase; text-align: center; text-decoration: none;
  transition: background-color var(--tz-dur-fast) var(--tz-ease), color var(--tz-dur-fast) var(--tz-ease), box-shadow var(--tz-dur-base) var(--tz-ease), transform var(--tz-dur-base) var(--tz-ease);
}
.btn-primary { background: var(--tz-orange); color: var(--tz-navy); box-shadow: var(--tz-shadow-orange); }
.btn-primary:hover { background: var(--tz-navy); color: var(--tz-stage-ink); transform: translateY(-2px); }
.btn-primary:focus-visible { outline-color: var(--tz-navy); }

/* Textlink: Space Grotesk 700, Hairline-Unterstrich, Hover Orange */
/* inline, damit lange Links sauber umbrechen; Polsterung vergrössert die Trefferfläche auf 44 px */
.tlink {
  display: inline;
  padding-block: 12px;
  font: 700 16px/1.3 var(--tz-font-display);
  color: var(--tz-navy);
  text-decoration: underline 2px var(--tz-line);
  text-underline-offset: 7px;
  transition: color var(--tz-dur-fast) var(--tz-ease), text-decoration-color var(--tz-dur-fast) var(--tz-ease);
}
.tlink:hover { color: var(--tz-orange-ink); text-decoration-color: var(--tz-orange); }
.tlink .arrow { margin-left: 6px; text-decoration: none; }
.arrow { display: inline-block; transition: transform var(--tz-dur-base) var(--tz-ease); }
a:hover .arrow { transform: translateX(3px); }

.on-dark .tlink { color: var(--tz-stage-ink); text-decoration-color: var(--tz-stage-line); }
.on-dark .tlink:hover { color: var(--tz-orange); text-decoration-color: var(--tz-orange); }


/* ==========================================================================
   4 Navigation (helle Pill aus C)
   ========================================================================== */

.nav { position: relative; z-index: 30; padding-top: 16px; }
.nav-bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 10px 10px 10px 28px;
  background: var(--tz-paper);
  border: 1px solid var(--tz-line);
  border-radius: var(--tz-radius-pill);
  box-shadow: var(--tz-shadow-compact);
}
.nav-brand { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.nav-brand img { width: 150px; }
.nav-panel { display: flex; align-items: center; gap: 22px; flex: 1; }
.nav-links { display: flex; gap: 26px; margin-inline: auto; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 14px/1 var(--tz-font-display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--tz-navy); text-decoration: none;
  transition: color var(--tz-dur-fast) var(--tz-ease);
}
.nav-links a:hover { color: var(--tz-orange-ink); }
.nav-cta { min-height: 48px; padding: 15px 22px; font-size: 14px; box-shadow: none; }
.nav-cta:hover { box-shadow: var(--tz-shadow-orange); }
.nav-tel { display: none; }
.nav-toggle {
  display: none; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 18px;
  background: var(--tz-paper); border: 1px solid var(--tz-line); border-radius: var(--tz-radius-pill);
  font: 500 13px/1 var(--tz-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--tz-navy);
  cursor: pointer;
}
.nav-toggle-icon { display: grid; gap: 5px; width: 16px; }
.nav-toggle-icon span { display: block; height: 2px; background: currentColor; transition: transform var(--tz-dur-base) var(--tz-ease); }
.nav.is-open .nav-toggle-icon span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav.is-open .nav-toggle-icon span:last-child { transform: translateY(-3.5px) rotate(-45deg); }


/* ==========================================================================
   5 Hero (C): heller Grund mit Orange-Glow aus Verlauf 1, Blob aus Verlauf 4
   ========================================================================== */

/* Glow liegt hinter Nav und Hero, beschnitten auf den oberen Seitenbereich */
.page-glow {
  position: absolute; inset: 0 0 auto 0; z-index: -1;
  height: 1180px;
  overflow: hidden;
  pointer-events: none;
}
.page-glow-orb {
  position: absolute; top: -440px; right: -470px;
  width: 1560px; height: 1360px;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 84%);
          mask-image: linear-gradient(to bottom, #000 50%, transparent 84%);
  background: radial-gradient(closest-side,
    rgb(252 76 1 / 62%) 0%,
    rgb(252 76 1 / 38%) 22%,
    rgb(235 218 210 / 78%) 52%,
    rgb(235 218 210 / 30%) 76%,
    rgb(235 218 210 / 0%) 100%);
}

.hero { position: relative; padding-bottom: clamp(24px, 3vw, 40px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 450px);
  gap: clamp(40px, 4.6vw, 72px);
  align-items: center;
  padding-top: var(--tz-hero-top);
}
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.hero-copy .eyebrow { margin-bottom: 22px; }
.hero h1 {
  font: 700 var(--tz-h1-display)/1.04 var(--tz-font-display);
  letter-spacing: -0.03em;
}
.h1-line { display: block; }
.h1-first { display: inline; }
.h1-accent { color: var(--tz-orange); }

/* Systemlogo-Pills hinter «mehr» */
.sys { display: inline-flex; align-items: center; vertical-align: middle; margin-left: .16em; position: relative; top: -.06em; }
.sys-pill {
  display: inline-grid; place-items: center;
  width: .66em; height: .66em;
  border-radius: .2em;
  background: var(--tz-paper);
  border: 1px solid rgb(221 226 233 / 70%);
  box-shadow: 0 1px 2px rgb(2 10 24 / 6%), 0 8px 20px rgb(37 73 120 / 12%);
}
.sys-pill + .sys-pill { margin-left: -.1em; }
.sys-pill:nth-child(1) { transform: rotate(-4deg); }
.sys-pill:nth-child(2) { transform: rotate(3deg) translateY(-.03em); }
.sys-pill:nth-child(3) { transform: rotate(-2deg); }
.sys-pill:nth-child(4) { transform: rotate(4deg) translateY(-.02em); }
.sys-pill img { width: .36em; height: .36em; }

.hero-lead { margin-top: 24px; max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }

/* Vertrauenszeile */
.trust {
  display: flex; flex-wrap: wrap; align-items: center;
  margin-top: 28px;
  font: 400 14px/1.3 var(--tz-font-display);
  color: var(--tz-muted);
}
.trust li { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.trust li + li::before { content: ""; flex: none; width: 1px; height: 18px; margin: 0 14px; background: var(--tz-line); }
.trust a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.trust a:hover strong { color: var(--tz-orange-ink); }
.trust strong { color: var(--tz-navy); }
.trust-g { width: 22px; height: 22px; flex: none; }

/* KI-Check als kompaktes Blue-Utility-Element, ganzes Element ein Link */
.kicheck {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  max-width: 100%;
  margin-top: 16px;
  padding: 7px 20px 7px 8px;
  min-height: 50px;
  background: var(--tz-blue-surface);
  border: 1px solid var(--tz-blue-line);
  border-radius: var(--tz-radius-pill);
  text-decoration: none; color: var(--tz-navy);
  transition: transform var(--tz-dur-base) var(--tz-ease), box-shadow var(--tz-dur-base) var(--tz-ease), border-color var(--tz-dur-fast) var(--tz-ease);
}
.kicheck:hover { transform: translateY(-2px); box-shadow: var(--tz-shadow-blue); border-color: var(--tz-blue); }
.kicheck-logos { display: inline-flex; flex: none; }
.kicheck-logos span {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--tz-paper); box-shadow: 0 0 0 1px var(--tz-blue-line);
}
.kicheck-logos span + span { margin-left: -8px; }
.kicheck-logos img { width: 18px; height: 18px; }
.kicheck-label { font: 500 12px/1.3 var(--tz-font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tz-blue); white-space: nowrap; }
.kicheck-q { font: 700 15px/1.3 var(--tz-font-body); }
.kicheck-go { display: inline-block; font: 700 15px/1.3 var(--tz-font-display); white-space: nowrap; color: var(--tz-navy); }
.kicheck-go .arrow { margin-left: 6px; }
.kicheck:hover .kicheck-go { color: var(--tz-orange-ink); }

/* Suchobjekt: hell, gekippt, Ablaufbeispiel */
.search-scene { position: relative; perspective: 1600px; }
.hero-blob {
  position: absolute; z-index: -1; left: -80px; bottom: -40px;
  width: 440px; height: 380px;
  border-radius: 46% 54% 58% 42% / 44% 40% 60% 56%;
  background: linear-gradient(135deg, var(--tz-g4-light), var(--tz-g1-orange));
  filter: blur(80px);
  opacity: .5;
  pointer-events: none;
}
.search {
  position: relative;
  padding: 18px 22px 24px;
  background: var(--tz-paper);
  border-radius: var(--tz-radius-panel);
  box-shadow: var(--tz-shadow-blue), 0 2px 6px rgb(37 73 120 / 6%);
  transform: rotateY(-9deg) rotateX(4deg) rotateZ(-1.5deg);
  transform-origin: 30% 50%;
}
.search-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--tz-line); }
.demo-pill {
  padding: 6px 12px;
  border: 1px solid var(--tz-line); border-radius: var(--tz-radius-pill);
  background: var(--tz-paper);
  font: 500 11px/1.2 var(--tz-font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tz-muted); white-space: nowrap;
}
.search-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--tz-line); border-radius: var(--tz-radius-pill);
  box-shadow: var(--tz-shadow-compact);
}
.search-bar .g { width: 20px; height: 20px; flex: none; }
.search-q { flex: 1; min-width: 0; font-size: 16px; white-space: nowrap; overflow: hidden; }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--tz-orange); opacity: 0; }
.is-typing .caret { opacity: 1; animation: tz-blink .9s steps(1) infinite; }
@keyframes tz-blink { 50% { opacity: 0; } }
.search-bar .mag { width: 18px; height: 18px; flex: none; color: var(--tz-muted); }

.res { margin-top: 14px; }
.res > * + * { margin-top: 10px; }
.res-ad { padding: 16px 18px; border: 1px solid var(--tz-line); border-radius: var(--tz-radius-compact); }
.res-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.res-tag {
  padding: 4px 10px; border-radius: var(--tz-radius-pill);
  background: var(--tz-stone);
  font: 500 11px/1.3 var(--tz-font-display); letter-spacing: .12em; text-transform: uppercase;
}
.res-title { margin-top: 8px; font: 500 20px/1.25 var(--tz-font-display); color: var(--tz-blue); }
.res-links { margin-top: 6px; font-size: 14px; color: var(--tz-muted); }
.res-maps {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-radius: var(--tz-radius-compact);
  background: var(--tz-peach-surface);
  font-size: 15px;
}
.res-maps svg { width: 22px; height: 22px; flex: none; color: var(--tz-orange-ink); }
.res-ai { padding: 16px 18px 18px; border-radius: var(--tz-radius-compact); background: var(--tz-blue-surface); border: 1px solid var(--tz-blue-line); }
.res-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.res-ai-label { font: 500 12px/1.3 var(--tz-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tz-blue); }
.res-ai-logos { display: flex; gap: 6px; }
.res-ai-logos span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--tz-paper); box-shadow: var(--tz-shadow-compact); }
.res-ai-logos img { width: 16px; height: 16px; }
.sk { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.sk + .sk { margin-top: 10px; }
.sk-bar { height: 10px; border-radius: 6px; background: var(--tz-blue-line); opacity: .7; }
.sk-chip {
  flex: none;
  padding: 7px 12px; border-radius: var(--tz-radius-pill);
  background: var(--tz-paper); border: 1px solid var(--tz-peach-line);
  font: 500 13px/1 var(--tz-font-display); color: var(--tz-orange-ink);
}


/* ==========================================================================
   6 Logowand (B): Hairline-Kacheln, Logos in Navy, Case-Chips
   ========================================================================== */

.clients { padding-top: clamp(40px, 4.4vw, 64px); }
.clients-title { margin-bottom: 24px; }
.logo-wall {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--tz-line); border-bottom: 1px solid var(--tz-line);
}
.logo-cell {
  position: relative; display: grid; place-items: center;
  min-height: 160px; padding: 44px 20px 32px;
  color: var(--tz-navy);
}
.logo-cell + .logo-cell { border-left: 1px solid var(--tz-line); }
.logo-cell .logo { height: auto; transition: transform var(--tz-dur-base) var(--tz-ease); }
.logo-cell:hover .logo { transform: scale(1.04); }
.logo--marechaux { width: 160px; }
.logo--ig-arbeit { width: 160px; }
.logo--echojazz { width: 64px; }
.logo--match-maison { width: 118px; }
.logo--card-service { width: 118px; }
.logo--beauty-rocio { width: 164px; }
.case-chip {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 6px 12px;
  border-radius: var(--tz-radius-pill);
  background: var(--tz-peach-surface); box-shadow: inset 0 0 0 1px var(--tz-peach-line);
  font: 500 13px/1 var(--tz-font-display); letter-spacing: .02em; color: var(--tz-navy); text-decoration: none;
  transition: background-color var(--tz-dur-fast) var(--tz-ease), box-shadow var(--tz-dur-fast) var(--tz-ease), transform var(--tz-dur-base) var(--tz-ease);
}
.case-chip::after { content: ""; position: absolute; inset: -8px; }
.case-chip:hover { background: var(--tz-orange); box-shadow: none; transform: translateY(-2px); }
.case-chip:focus-visible { outline-offset: 2px; }


/* ==========================================================================
   7 Problem (B)
   ========================================================================== */

.problem { padding-top: var(--tz-section); }
.problem-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 32px; }
.problem-grid > .eyebrow { padding-top: 16px; }
.problem .h2 { max-width: 18ch; }
.problem-statement { text-wrap: pretty; margin-top: 24px; max-width: 30em; font: 400 clamp(21px, 2.2vw, 30px)/1.42 var(--tz-font-body); }
.pain-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(48px, 5.4vw, 80px); }
.pain { padding-top: 24px; border-top: 1px solid var(--tz-line); }
.pain-num { display: block; margin-bottom: 16px; font: 700 32px/1 var(--tz-font-display); letter-spacing: -0.02em; color: var(--tz-orange); }
.pain h3 { font: 700 22px/1.25 var(--tz-font-display); letter-spacing: -0.01em; }
.pain p { margin-top: 10px; max-width: 34ch; font-size: 16px; line-height: 1.6; color: var(--tz-muted); }
.problem-close {
  display: flex; align-items: center; gap: 18px;
  margin-top: clamp(36px, 4.4vw, 56px);
  font: 700 clamp(20px, 1.8vw, 24px)/1.3 var(--tz-font-display); letter-spacing: -0.01em;
}
.problem-close::before { content: ""; flex: none; width: 40px; height: 3px; border-radius: 2px; background: var(--tz-orange); }


/* ==========================================================================
   8 Leistungen (B): drei getönte Panels, ganze Panels klickbar
   ========================================================================== */

.services { padding-block: var(--tz-section); }
.services-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(36px, 4.4vw, 56px); }
.services-head .eyebrow { margin-bottom: 16px; }
.services .h2 { max-width: 16ch; }
.services-more { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--tz-muted); }
.services-more > span { display: block; }

.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.panels > div { display: flex; }
.panel {
  position: relative; display: flex; flex-direction: column; flex: 1;
  min-height: 480px; padding: 36px;
  border-radius: var(--tz-radius-panel);
  transition: transform var(--tz-dur-base) var(--tz-ease), box-shadow var(--tz-dur-base) var(--tz-ease);
}
.panel--blue { background: var(--tz-blue-surface); }
.panel--stone { background: var(--tz-stone); }
.panel--peach { background: var(--tz-peach-surface); }
.panel:hover { transform: translateY(-4px); box-shadow: var(--tz-shadow-blue); }
.panel:has(.panel-link:focus-visible) { outline: 3px solid var(--tz-orange); outline-offset: 4px; }
.panel-top { display: flex; justify-content: flex-end; min-height: 124px; }
.panel-label { margin-top: 32px; font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tz-muted); }
.panel h3 { margin-top: 10px; font: 700 clamp(26px, 2.2vw, 32px)/1.15 var(--tz-font-display); letter-spacing: -0.015em; }
.panel-sub { margin-top: 12px; font: 700 18px/1.4 var(--tz-font-body); }
.panel-text { margin-top: 10px; font-size: 16px; line-height: 1.65; color: var(--tz-muted); }
.panel-foot { margin-top: auto; padding-top: 28px; }
.panel-link {
  display: inline-block; padding-block: 6px;
  font: 700 15px/1.3 var(--tz-font-display); color: var(--tz-navy); text-decoration: none;
}
.panel-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.panel-link:focus-visible { outline: none; }
.panel-link .arrow {
  display: inline-grid; place-items: center; vertical-align: middle; margin-left: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--tz-navy); color: var(--tz-stage-ink); font-size: 15px;
  transition: transform var(--tz-dur-base) var(--tz-ease), background-color var(--tz-dur-fast) var(--tz-ease), color var(--tz-dur-fast) var(--tz-ease);
}
.panel:hover .panel-link .arrow { transform: translateX(4px); background: var(--tz-orange); color: var(--tz-navy); }

/* UI-Illustrationen (dekorativ) */
.ill { flex: none; position: relative; width: 184px; height: 124px; }
.ill-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 16px;
  background: var(--tz-paper); border-radius: var(--tz-radius-compact);
  box-shadow: inset 0 0 0 1px var(--tz-line);
  transition: transform var(--tz-dur-base) var(--tz-ease);
}
.panel:hover .ill-card { transform: rotate(-2deg) translateY(-2px); }
.ill--blue .ill-card { box-shadow: inset 0 0 0 1px var(--tz-blue-line); }
.ill--peach .ill-card { box-shadow: inset 0 0 0 1px var(--tz-peach-line); }
.ill-pill {
  align-self: flex-start; padding: 4px 9px; border-radius: var(--tz-radius-pill);
  box-shadow: inset 0 0 0 1px var(--tz-navy);
  font: 700 10px/1 var(--tz-font-display); letter-spacing: .08em; text-transform: uppercase;
}
.ill-row { display: flex; align-items: center; gap: 10px; }
.ill-row .g { width: 16px; height: 16px; margin-left: auto; }
.ill-pin { flex: none; width: 34px; height: 44px; }
.ill-bars { flex: 1; display: grid; gap: 8px; }
.ill-logos { display: flex; gap: 6px; }
.ill-logos img { width: 20px; height: 20px; }
.ill-spark { position: absolute; right: -8px; top: -10px; width: 26px; height: 26px; }
.bar { display: block; height: 8px; border-radius: 4px; background: var(--tz-line); }
.bar--ink { background: var(--tz-navy); }
.bar--ink-soft { background: rgb(2 10 24 / 14%); }
.bar--blue { background: var(--tz-blue); height: 10px; }
.bar--orange { background: var(--tz-orange); }


/* ==========================================================================
   9 Flächenstapel: Cases (Navy), Methodik (Stone), Menschen (Navy)
   Drei runde Grossflächen mit gleichem Randabstand, keine harte Kante zur Seite.
   ========================================================================== */

.stack { display: grid; gap: var(--tz-inset); padding-inline: var(--tz-inset); }
.surface {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; max-width: 1760px; margin-inline: auto;
  border-radius: var(--tz-radius-surface);
  padding-block: var(--tz-section);
}
.surface .wrap { width: min(100% - 2 * max(var(--tz-gutter) - var(--tz-inset), 20px), var(--tz-container)); }
.surface--navy { background-color: var(--tz-navy); color: var(--tz-stage-ink); }
.surface--navy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--tz-grid); background-size: 60px 60px; background-position: center -1px;
}
.surface--stone { background: var(--tz-stone); }
.surface--navy .eyebrow { color: var(--tz-orange); }


/* ==========================================================================
   10 Cases (A): Kennzahl gross, zwei kompakte Fälle, Zitat
   ========================================================================== */

.cases::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 720px; height: 720px; left: -220px; top: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tz-g4-light), var(--tz-g1-orange));
  opacity: .28;
  filter: blur(120px);
}
.cases-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px 48px; margin-bottom: clamp(40px, 5vw, 72px); }
.cases-head .eyebrow { margin-bottom: 16px; }
.cases .h2 { font-size: clamp(34px, 4.2vw, 60px); color: var(--tz-stage-ink); }
.case-logo { color: var(--tz-stage-ink); height: auto; flex: none; }
.case-label { font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tz-stage-ink-muted); }
.case-meta { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--tz-stage-ink-muted); }

.case-feature {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px clamp(32px, 5vw, 80px);
  align-items: end;
  padding-bottom: clamp(44px, 5vw, 72px);
  border-bottom: 1px solid var(--tz-stage-line);
}
.case-feature .case-top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-bottom: clamp(16px, 2vw, 24px); }
.case-feature .case-top .case-label { padding-left: 20px; border-left: 1px solid var(--tz-stage-line); }
.case-feature .case-logo { width: 136px; }
.big-number {
  display: flex; align-items: baseline; gap: .08em;
  font: 700 clamp(88px, 12.5vw, 180px)/.9 var(--tz-font-display);
  letter-spacing: -.045em; color: var(--tz-orange); white-space: nowrap;
}
.big-number .cur, .mid-number .cur { font-size: .36em; letter-spacing: -.01em; }
.big-sub { margin-top: 14px; font: 500 clamp(20px, 2vw, 28px)/1.2 var(--tz-font-display); }
.case-text > p:first-child { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }
.case-text .tlink, .case-small .tlink { display: inline-block; margin-top: 8px; }

.case-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--tz-stage-line); }
.case-small { padding: clamp(36px, 4vw, 52px) clamp(24px, 3vw, 48px) clamp(36px, 4vw, 52px) 0; }
.case-small + .case-small { padding-inline: clamp(24px, 3vw, 48px) 0; border-left: 1px solid var(--tz-stage-line); }
.case-small .case-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; min-height: 44px; }
.case-logo--ig-arbeit { width: 118px; }
.case-logo--echojazz { width: 44px; }
.mid-number { margin-top: 22px; font: 700 clamp(44px, 4.4vw, 56px)/1 var(--tz-font-display); letter-spacing: -.035em; color: var(--tz-orange); }
.mid-number .cur { font-size: .5em; letter-spacing: 0; margin-right: .12em; }
.mid-sub { margin-top: 8px; font: 500 18px/1.3 var(--tz-font-display); }
.case-small .txt { margin-top: 12px; max-width: 32em; font-size: 16px; line-height: 1.6; color: var(--tz-stage-ink-muted); }

.quote { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px clamp(20px, 3vw, 40px); max-width: 980px; padding-top: clamp(40px, 5vw, 64px); }
.quote-mark { font: 700 72px/.8 var(--tz-font-display); color: var(--tz-orange); }
.quote blockquote p { font: 400 clamp(18px, 1.7vw, 23px)/1.55 var(--tz-font-body); }
.quote-by { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 24px; }
.quote-by img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--tz-navy), 0 0 0 4px var(--tz-orange); }
.quote-name { display: block; font: 700 17px/1.3 var(--tz-font-display); }
.quote-role { display: block; font-size: 15px; line-height: 1.4; color: var(--tz-stage-ink-muted); }
.quote-by .tlink { margin-left: auto; }


/* ==========================================================================
   11 Methodik (C): vier Schritte links, gekippte Ledger-Tabelle rechts
   ========================================================================== */

.method-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.method-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 48px; align-items: end; margin-bottom: clamp(36px, 4.4vw, 56px); }
.method-head .h2 { margin-top: 16px; max-width: 16ch; }
.steps > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px; padding: 20px 0; border-top: 1px solid var(--tz-line); }
.steps > li:last-child { border-bottom: 1px solid var(--tz-line); }
.step-num { font: 700 28px/1.1 var(--tz-font-display); letter-spacing: -0.02em; color: var(--tz-orange); }
.step-kicker { font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tz-muted); }
.steps h3 { margin-top: 4px; font: 700 clamp(20px, 1.7vw, 24px)/1.2 var(--tz-font-display); letter-spacing: -0.01em; }
.steps p { margin-top: 6px; max-width: 34em; font-size: 16px; line-height: 1.6; color: var(--tz-muted); }
.steps .step-tools { margin-top: 8px; font: 500 14px/1.4 var(--tz-font-display); letter-spacing: .02em; color: var(--tz-navy); }
.step-tools::before { content: ""; display: inline-block; width: 14px; height: 2px; margin-right: 8px; vertical-align: middle; background: var(--tz-orange); }

.ledger-scene { perspective: 1800px; }
.ledger-caption { margin-bottom: 14px; padding-left: 8px; font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tz-muted); }
.ledger {
  padding: 26px 26px 22px;
  background: var(--tz-paper);
  border-radius: var(--tz-radius-panel);
  box-shadow: var(--tz-shadow-blue), 0 2px 6px rgb(37 73 120 / 6%);
  transform: rotateY(8deg) rotateX(3deg) rotateZ(1.2deg);
  transform-origin: 70% 50%;
}
.ledger-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ledger-top :is(h2, h3) { margin-top: 6px; font: 500 22px/1.2 var(--tz-font-display); }
.ledger table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 15px; }
.ledger th {
  padding: 0 10px 10px 0; text-align: left;
  border-bottom: 1px solid var(--tz-line);
  font: 500 11px/1.3 var(--tz-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tz-muted);
}
.ledger td { padding: 14px 10px 14px 0; border-bottom: 1px solid var(--tz-line); vertical-align: middle; }
.ledger tr:last-child td { border-bottom: 0; }
.t-time { font: 500 15px/1.3 var(--tz-font-display); font-variant-numeric: tabular-nums; }
.t-way { font-weight: 700; }
.src { display: inline-flex; align-items: center; gap: 8px; }
.src img { width: 16px; height: 16px; flex: none; }
.status { display: inline-block; padding: 5px 10px; border-radius: var(--tz-radius-pill); font: 500 12px/1.25 var(--tz-font-display); }
.status-ok { color: var(--tz-green); border: 1px solid currentColor; background: var(--tz-paper); }
.status-ai { color: var(--tz-blue); border: 1px solid var(--tz-blue-line); background: var(--tz-blue-surface); }
.ledger-note { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--tz-line); font-size: 14px; line-height: 1.5; color: var(--tz-muted); }
.ledger-link { margin-top: 18px; padding-left: 8px; }

.method-foot { margin: clamp(32px, 3.6vw, 48px) 0 0 8px; padding-top: 20px; border-top: 1px solid var(--tz-line); }
.method-foot p { max-width: 30em; margin-bottom: 4px; font: 700 17px/1.5 var(--tz-font-body); }


/* ==========================================================================
   12 Menschen (C): Navy-Foto-Collage, vier Fakten, Claim
   ========================================================================== */

.collage { position: relative; height: 600px; }
.collage-title { position: absolute; z-index: 2; left: 50%; top: 56%; width: min(100%, 600px); transform: translate(-50%, -50%); text-align: center; }
.collage-title .h2 { margin-top: 18px; font-size: clamp(44px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.03em; color: var(--tz-stage-ink); }
.ph { position: absolute; margin: 0; overflow: hidden; border-radius: var(--tz-radius-panel); background: var(--tz-duotone-shadow); box-shadow: 0 24px 60px rgb(0 0 0 / 35%); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-team { left: 0; top: 0; width: 380px; aspect-ratio: 1425 / 1044; transform: rotate(-2deg); }
.ph-boxe { right: 16px; top: 24px; z-index: 1; width: 260px; aspect-ratio: 4 / 5; transform: rotate(2deg); }
.ph-boxe img { filter: url(#tz-duotone-orange); object-position: 50% 30%; }
.ph-boxe::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--tz-grid); background-size: 60px 60px; }
.people-person { position: absolute; left: 140px; bottom: 0; display: flex; align-items: center; gap: 22px; }
.ph-portrait { position: relative; width: 150px; aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--tz-navy); outline: 1px solid var(--tz-stage-line); transform: rotate(-1deg); }
.ph-portrait img { object-position: 55% 28%; }
.ph-cap { max-width: 260px; font-size: 14px; line-height: 1.5; color: var(--tz-stage-ink-muted); }
.people-lead { max-width: 640px; margin: clamp(32px, 4vw, 52px) auto 0; text-align: center; font-size: clamp(17px, 1.3vw, 20px); color: var(--tz-stage-ink-muted); }
.people-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); max-width: 980px; margin: clamp(36px, 4.4vw, 56px) auto 0; }
.people-facts > div { padding: 24px 0; border-top: 1px solid var(--tz-stage-line); }
.people-facts h3 { font: 500 clamp(20px, 1.8vw, 24px)/1.2 var(--tz-font-display); }
.people-facts p { margin-top: 8px; font-size: 17px; color: var(--tz-stage-ink-muted); }
.people-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 32px; max-width: 980px; margin: 20px auto 0; }
.claim { font: 500 14px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tz-orange); }


/* ==========================================================================
   13 Einstieg (SPEC 3.9)
   ========================================================================== */

.start { padding-top: var(--tz-section); }
.start-head { max-width: 760px; }
.start-head .h2 { margin-top: 16px; }
.start-head .lead { margin-top: 20px; max-width: 640px; }
.start-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; margin-top: clamp(36px, 4.4vw, 56px); align-items: stretch; }
.start-grid > div { display: flex; }
.offer { flex: 1; display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 48px); border-radius: var(--tz-radius-panel); }
.offer--fit { background: var(--tz-gradient-peach-glow); box-shadow: var(--tz-shadow-peach), inset 0 0 0 1px var(--tz-peach-line); }
.offer--plan { background: var(--tz-blue-surface); box-shadow: inset 0 0 0 1px var(--tz-blue-line); }
.offer-label { font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tz-navy); }
.offer--plan .offer-label { color: var(--tz-blue); }
.offer h3 { margin-top: 12px; font: 700 clamp(22px, 2vw, 28px)/1.2 var(--tz-font-display); letter-spacing: -0.01em; text-wrap: balance; }
.offer-text { margin-top: 12px; font-size: 17px; color: var(--tz-muted); }
.offer-sub { margin-top: 24px; font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tz-muted); }
.ticks { margin-top: 10px; display: grid; gap: 8px; }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); font-size: 17px; line-height: 1.5; }
.ticks li::before { content: "→"; font-family: var(--tz-font-display); font-weight: 700; color: var(--tz-orange-ink); }
.offer--plan .ticks li::before { color: var(--tz-blue); }
.offer-foot { margin-top: auto; padding-top: 28px; }
.start-note { margin-top: 24px; max-width: 58em; font-size: 16px; color: var(--tz-muted); }
.start-note strong { color: var(--tz-navy); }

.factbar {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 32px;
  background: var(--tz-stone);
  border-radius: var(--tz-radius-panel);
}
.factbar > div { padding: 24px 28px; }
.factbar > div + div { border-left: 1px solid var(--tz-line); }
.factbar dt { font: 700 22px/1.2 var(--tz-font-display); letter-spacing: -0.01em; }
.factbar dd { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--tz-muted); }

.tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin-top: 28px; }
.tools-row ul { display: flex; flex-wrap: wrap; gap: 0 28px; }


/* ==========================================================================
   14 FAQ
   ========================================================================== */

.faq { padding-block: var(--tz-section); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: start; }
.faq-head .h2 { margin-top: 16px; }
.faq-list { border-top: 1px solid var(--tz-line); }
.faq-item { border-bottom: 1px solid var(--tz-line); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  min-height: 72px; padding: 18px 0;
  font: 700 19px/1.35 var(--tz-font-display);
  cursor: pointer; list-style: none;
  transition: color var(--tz-dur-fast) var(--tz-ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--tz-orange-ink); }
.faq-icon { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--tz-line); transition: transform var(--tz-dur-base) var(--tz-ease), background-color var(--tz-dur-fast) var(--tz-ease), box-shadow var(--tz-dur-fast) var(--tz-ease); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--tz-navy); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item summary:hover .faq-icon { box-shadow: inset 0 0 0 1.5px var(--tz-orange); }
.faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--tz-orange); box-shadow: none; }
.faq-a { padding: 0 64px 24px 0; }
.faq-a p { max-width: 62ch; font-size: 17px; color: var(--tz-muted); }
.faq-item[open] .faq-a { animation: tz-faq-in var(--tz-dur-base) var(--tz-ease); }
@keyframes tz-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }


/* ==========================================================================
   15 Abschluss: Peach-Glow-Panel mit Teamfoto, weiche Maske
   ========================================================================== */

.final { padding-bottom: var(--tz-section-tight); }
.final-panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: end;
  min-height: 400px;
  background: var(--tz-gradient-peach-glow);
  border-radius: var(--tz-radius-surface);
  box-shadow: var(--tz-shadow-peach), inset 0 0 0 1px var(--tz-peach-line);
}
.final-copy { position: relative; z-index: 1; align-self: center; padding: clamp(36px, 4.4vw, 64px); }
.final-copy .h2 { margin-top: 16px; font-size: clamp(36px, 4vw, 56px); text-wrap: wrap; }
.final-copy p.final-text { margin-top: 18px; max-width: 34em; font-size: clamp(17px, 1.3vw, 19px); color: var(--tz-muted); }
.final-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; }
.final-photo { align-self: end; justify-self: end; width: 100%; margin: 0; }
.final-photo img {
  width: 100%; max-height: 300px; object-fit: contain; object-position: right bottom;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 16%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 16%);
          mask-composite: intersect;
}


/* ==========================================================================
   16 Footer (Navy nach brand.md)
   ========================================================================== */

.footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--tz-navy); color: var(--tz-stage-ink);
  border-radius: var(--tz-radius-surface) var(--tz-radius-surface) 0 0;
  padding: clamp(56px, 6vw, 88px) 0 32px;
}
.footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--tz-grid); background-size: 60px 60px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 90%);
          mask-image: linear-gradient(to bottom, #000, transparent 90%);
}
.footer a { color: var(--tz-stage-ink); text-decoration: none; transition: color var(--tz-dur-fast) var(--tz-ease); }
.footer a:hover { color: var(--tz-orange); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 40px 32px; }
.footer-brand img { width: 160px; }
.footer-brand { display: inline-flex; min-height: 44px; align-items: center; }
.footer-claim { margin-top: 16px; max-width: 30em; font-size: 16px; line-height: 1.6; color: var(--tz-stage-ink-muted); }
.coords {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  max-width: 340px; margin-top: 24px; padding: 14px 24px;
  background-color: var(--tz-stage-fill); background-image: var(--tz-grid); background-size: 60px 60px;
  border: 1px solid var(--tz-stage-line); border-radius: var(--tz-radius-pill);
  font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase;
}
.coords span { display: block; }
.coords > span:last-child { text-align: right; }
.footer-utils { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.footer-util {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 18px 8px 10px;
  background: var(--tz-stage-fill); border: 1px solid var(--tz-stage-line); border-radius: var(--tz-radius-pill);
  transition: border-color var(--tz-dur-fast) var(--tz-ease), transform var(--tz-dur-base) var(--tz-ease);
}
.footer-util:hover { border-color: var(--tz-orange); transform: translateY(-2px); }
.footer-util .g { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tz-stage-ink); flex: none; }
.footer-util .g img { width: 18px; height: 18px; }
.footer-util-key { display: block; font: 700 14px/1.25 var(--tz-font-display); }
.footer-util-val { display: block; font-size: 14px; line-height: 1.35; color: var(--tz-stage-ink-muted); }
.footer .footer-util:hover .footer-util-val { color: var(--tz-stage-ink-muted); }

.footer-h { font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tz-orange); margin-bottom: 8px; }
.footer-h + ul { margin-bottom: 0; }
.footer-h--second { margin-top: 24px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 40px; font-size: 16px; line-height: 1.35; }
.fc-grid { display: grid; gap: 14px; }
.fc-a, .fc-b { display: flex; flex-direction: column; align-items: flex-start; }
.footer-tel { display: inline-flex; align-items: center; min-height: 44px; font: 700 22px/1.2 var(--tz-font-display); letter-spacing: -0.01em; }
.footer-contact a.footer-mail { display: inline-flex; align-items: center; min-height: 40px; font-size: 16px; }
.footer-contact .tlink { font-size: 15px; }
.footer-address { font-size: 16px; line-height: 1.55; color: var(--tz-stage-ink-muted); }
.footer-status { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 15px; }
.footer-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tz-green-dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tz-green-dot) 18%, transparent); }
.footer-hours { margin-top: 2px; padding-left: 18px; font-size: 14px; color: var(--tz-stage-ink-muted); }
.footer-meta {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 32px;
  margin-top: clamp(40px, 5vw, 64px); padding-top: 20px;
  border-top: 1px solid var(--tz-stage-line);
  font-size: 14px; color: var(--tz-stage-ink-muted);
}
.footer-meta-claim { font: 700 15px/1.4 var(--tz-font-display); color: var(--tz-stage-ink); }
.footer-legal-links { display: flex; gap: 24px; }
.footer-legal-links a { display: inline-flex; align-items: center; min-height: 44px; }


/* ==========================================================================
   17 Bewegung: ein System
   Hero-Staffelung und Suchobjekt-Aufbau beim Laden, Reveal beim Scrollen
   (opacity, 12 px, 600 ms, einmalig). Ausgangszustände nur mit .js und ohne
   reduced motion, ohne JS ist alles sichtbar. Reveal nutzt die Eigenschaft
   translate, damit Hover-Transforms unabhängig bleiben.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .js [data-hero-step] { opacity: 0; translate: 0 12px; }
  .js .hero-ready [data-hero-step] {
    opacity: 1; translate: 0 0;
    transition: opacity var(--tz-dur-slow) var(--tz-ease), translate var(--tz-dur-slow) var(--tz-ease);
    transition-delay: calc(90ms * var(--i, 0));
  }
  .js .search { opacity: 0; translate: 0 18px; }
  .js .search.is-in { opacity: 1; translate: 0 0; transition: opacity 700ms var(--tz-ease), translate 900ms var(--tz-ease-out); }
  .js .search [data-step] { opacity: 0; translate: 0 10px; }
  .js .search [data-step].is-in { opacity: 1; translate: 0 0; transition: opacity 420ms var(--tz-ease), translate 420ms var(--tz-ease); }

  .js [data-reveal] { opacity: 0; translate: 0 12px; }
  .js [data-reveal].is-in {
    opacity: 1; translate: 0 0;
    transition: opacity var(--tz-dur-slow) var(--tz-ease), translate var(--tz-dur-slow) var(--tz-ease);
    transition-delay: calc(60ms * var(--i, 0));
  }
}


/* ==========================================================================
   18 Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 13px; }
  .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logo-cell + .logo-cell { border-left: 0; }
  .logo-cell:nth-child(3n+2), .logo-cell:nth-child(3n+3) { border-left: 1px solid var(--tz-line); }
  .logo-cell:nth-child(n+4) { border-top: 1px solid var(--tz-line); }
  .panel { padding: 30px; }
}

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    flex-direction: column; align-items: stretch; gap: 12px;
    padding: 12px 20px 20px;
    background: var(--tz-paper); border: 1px solid var(--tz-line); border-radius: var(--tz-radius-panel);
    box-shadow: var(--tz-shadow-blue);
  }
  .js .nav-panel { display: none; }
  .js .nav.is-open .nav-panel { display: flex; }
  html:not(.js) .nav-panel { position: static; margin-top: 8px; }
  html:not(.js) .nav-bar { flex-wrap: wrap; border-radius: var(--tz-radius-panel); }
  .nav-links { flex-direction: column; gap: 0; margin: 0; }
  .nav-links li + li { border-top: 1px solid var(--tz-line); }
  .nav-links a { min-height: 48px; width: 100%; font-size: 15px; }
  .nav-cta { width: 100%; min-height: 52px; }
  .nav-tel { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; font: 700 18px/1 var(--tz-font-display); text-decoration: none; }

  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .search-scene { width: 100%; max-width: 520px; margin-inline: auto; }
  .search { transform: none; }
  .method-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { max-width: 760px; }
  .ledger { transform: none; }
}

@media (max-width: 1023px) {
  .problem-grid { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .problem-grid > .eyebrow { padding-top: 0; }
  .services-head { grid-template-columns: minmax(0, 1fr); }
  .panels { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .panel { min-height: 0; }
  .panel-top { min-height: 0; justify-content: flex-start; }
  .case-feature { grid-template-columns: minmax(0, 1fr); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .method-head { grid-template-columns: minmax(0, 1fr); }
  .start-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .final-panel { grid-template-columns: minmax(0, 1fr); }
  .final-photo img { max-height: 220px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .case-pair { grid-template-columns: minmax(0, 1fr); }
  .case-small, .case-small + .case-small { padding: 32px 0; border-left: 0; }
  .case-small + .case-small { border-top: 1px solid var(--tz-stage-line); }
  .cases::after { width: 480px; height: 480px; left: -200px; top: 80px; filter: blur(90px); }
  .factbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factbar > div:nth-child(3) { border-left: 0; }
  .factbar > div:nth-child(n+3) { border-top: 1px solid var(--tz-line); }
}

@media (max-width: 767px) {
  body { font-size: 16px; line-height: 1.55; }
  :root {
    --tz-radius-surface: 24px; --tz-section: 48px; --tz-section-tight: 32px; --tz-h2: 30px;
    --tz-hero-top: 32px; --tz-hero-top-crumbs: 24px; --tz-crumbs-gap: 8px;
    --tz-h1-display: clamp(34px, 10vw, 44px); --tz-h1-text: clamp(30px, 8.4vw, 40px);
  }
  .lead { font-size: 16px; line-height: 1.55; }

  .nav { padding-top: 12px; }
  .nav-bar { padding: 8px 8px 8px 20px; }
  .nav-brand img { width: 124px; }

  .page-glow { height: 900px; }
  .page-glow-orb { top: -300px; right: -520px; width: 1000px; height: 1000px; }
  .hero-grid { gap: 32px; }
  .hero-copy .eyebrow { margin-bottom: 16px; }
  .hero h1 { display: flex; flex-direction: column; align-items: flex-start; }
  .sys { order: 3; margin: 16px 0 0; top: 0; font-size: 60px; }
  .hero-lead { margin-top: 18px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 28px; }
  .hero-actions .tlink { justify-content: center; align-self: center; }
  .trust { gap: 0 16px; margin-top: 16px; font-size: 14px; }
  .trust li { min-height: 32px; white-space: normal; }
  .trust li:first-child { flex-basis: 100%; }
  .trust li + li::before { display: none; }
  .kicheck { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 12px 18px 12px 12px; border-radius: 20px; }
  .kicheck-logos { grid-row: 1 / span 3; align-self: center; }
  .kicheck-logos span { width: 30px; height: 30px; }
  .search { padding: 12px 12px 14px; }
  .search-head { flex-wrap: wrap; margin-bottom: 10px; }
  .search-bar { padding: 10px 14px; }
  .res { margin-top: 10px; }
  .res > * + * { margin-top: 8px; }
  .res-ad { padding: 12px 14px; }
  .res-title { font-size: 17px; margin-top: 6px; }
  .res-links { margin-top: 2px; }
  .res-maps { padding: 10px 14px; }
  .res-ai { padding: 12px 14px 14px; }
  .hero-blob { width: 300px; height: 260px; left: -40px; }

  .clients-title { margin-bottom: 14px; }
  .logo-cell { min-height: 100px; padding: 38px 8px 16px; }
  .logo--marechaux, .logo--ig-arbeit, .logo--beauty-rocio { width: min(100px, 100%); }
  .logo--match-maison, .logo--card-service { width: min(78px, 100%); }
  .logo--echojazz { width: 42px; }
  .case-chip { top: 6px; right: 6px; min-height: 26px; padding: 4px 9px; font-size: 12px; }

  .problem-statement { margin-top: 18px; }
  .pain-row { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; }
  .pain { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding-top: 18px; }
  .pain-num { font-size: 24px; margin: 0; grid-row: span 2; }
  .pain h3 { font-size: 20px; }
  .pain p { margin-top: 6px; }
  .problem-close { align-items: flex-start; font-size: 19px; }
  .problem-close::before { margin-top: .6em; width: 28px; }

  .services-more { margin-top: 12px; }
  /* Leistungen mobil als Wischreihe mit sichtbarem Anschnitt der nächsten Karte */
  .panels {
    display: grid; grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none;
    gap: 12px;
    margin-inline: calc(-1 * var(--tz-gutter)); padding: 4px var(--tz-gutter) 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--tz-gutter);
    scrollbar-width: none;
  }
  .panels::-webkit-scrollbar { display: none; }
  .panels > div { scroll-snap-align: start; }
  .panel { padding: 22px 20px; border-radius: 20px; }
  .panel:hover { transform: none; box-shadow: none; }
  .panel-text { font-size: 16px; line-height: 1.55; }
  .panel-top { display: none; }
  .panel-label { margin-top: 0; }
  .panel h3 { font-size: 24px; }
  .panel-sub { font-size: 17px; margin-top: 8px; }
  .panel-foot { padding-top: 16px; }

  .cases-head { margin-bottom: 24px; gap: 12px; }
  .case-feature { gap: 20px; padding-bottom: 36px; }
  .case-feature .case-top { margin-bottom: 12px; }
  .case-feature .case-top .case-label { padding-left: 0; border-left: 0; }
  .case-top { flex-wrap: nowrap; }
  .case-top .case-label { font-size: 11px; letter-spacing: .12em; }
  .case-feature .case-logo { width: 104px; }
  .case-logo--ig-arbeit { width: 96px; }
  .case-logo--echojazz { width: 38px; }
  .case-small .case-top { justify-content: flex-start; }
  .big-number { font-size: clamp(72px, 22vw, 96px); }
  .case-text > p:first-child { font-size: 16px; }
  .big-sub { margin-top: 10px; }
  .mid-number { margin-top: 16px; }
  .case-small, .case-small + .case-small { padding: 26px 0; }
  .quote { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: 28px; }
  .quote-mark { font-size: 44px; }
  .quote blockquote p { font-size: 17px; line-height: 1.55; }
  .quote-by { margin-top: 18px; }
  .quote-by .tlink { display: none; }      /* mobil weggelassen: gleicher Link wie im Fall ECHOJAZZ */

  .method-head { margin-bottom: 20px; }
  .steps > li { grid-template-columns: 40px minmax(0, 1fr); gap: 0 8px; padding: 16px 0; }
  .step-num { font-size: 22px; }
  .steps h3 { font-size: 19px; }
  .steps p { font-size: 16px; line-height: 1.5; }
  .steps .step-tools { display: none; }   /* mobil weggelassen: Werkzeugzeilen wiederholen nur Namen */
  .ledger { padding: 20px 16px 18px; }
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger table, .ledger tbody { display: block; }
  .ledger table { margin-top: 12px; font-size: 14px; }
  .ledger tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--tz-line); }
  .ledger tr:last-child { border-bottom: 0; }
  .ledger td { padding: 0; border: 0; }
  .ledger td:nth-child(3) { justify-self: end; text-align: right; }
  .ledger td:nth-child(4) { grid-column: 1 / -1; }
  .ledger-note { font-size: 14px; }
  .ledger-top :is(h2, h3) { font-size: 19px; }

  .collage-title .h2 { font-size: clamp(34px, 10vw, 44px); }
  .people-lead { text-align: left; margin-top: 28px; }
  .people-facts { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .people-facts > div { padding: 18px 0; }
  .people-facts h3 { font-size: 19px; }
  .people-facts p { font-size: 16px; margin-top: 4px; }
  .people-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .people-foot .claim { display: none; }    /* mobil weggelassen: Claim steht in der Footer-Metazeile */

  .offer { padding: 24px 20px; }
  .offer-text { font-size: 16px; }
  .offer h3 { font-size: 21px; }
  .offer-sub { margin-top: 18px; }
  .ticks li { font-size: 16px; }
  .offer-foot { padding-top: 22px; }
  .offer--fit .btn { width: 100%; }
  .start-note { margin-top: 20px; }
  .factbar { margin-top: 24px; }
  .factbar > div { padding: 18px 16px; }
  .factbar dt { font-size: 19px; }
  .factbar dd { font-size: 14px; }
  .tools-row { display: block; margin-top: 24px; }
  .tools-row ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 14px; }
  .tools-row .tlink { font-size: 15px; padding-block: 8px; }

  .faq-item summary { font-size: 17px; min-height: 60px; padding: 12px 0; gap: 16px; }
  .faq-icon { width: 32px; height: 32px; }
  .faq-a { padding-right: 0; }
  .faq-a p { font-size: 16px; }

  .final-copy { padding: 32px 22px 8px; }
  .final-actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .final-actions .tlink { justify-content: center; align-self: center; }
  .final-photo img { max-height: 180px; }

  .footer { padding-top: 40px; }
  .footer-grid { gap: 28px 20px; }
  .footer-contact { grid-column: 1 / -1; }
  .fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .footer-tel { font-size: 20px; }
  .footer-links a { min-height: 34px; font-size: 15px; }
  .footer-meta { margin-top: 32px; }
  .coords { padding: 12px 20px; }
  .footer-utils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .footer-util { padding: 8px 12px 8px 8px; gap: 10px; border-radius: 18px; }
  .footer-util .g { width: 26px; height: 26px; }
  .footer-util-key { font-size: 13px; }
  .footer-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
}


@media (max-width: 359px) {
  .hero-actions .btn, .final-actions .btn { padding-inline: 16px; font-size: 14px; }
  .demo-pill { font-size: 10px; letter-spacing: .08em; padding: 5px 9px; }
  .search-bar { padding: 10px 12px; }
  .footer-grid, .fc-grid, .tools-row ul, .footer-utils { grid-template-columns: minmax(0, 1fr); }
  .factbar > div { padding: 16px 12px; }
  .factbar dt { font-size: 17px; }
  .sk-chip { font-size: 12px; padding: 6px 10px; }
}


/* ==========================================================================
   18b Responsive-Feinschliff (Bericht _berichte/responsive-a.md, 2026-09-23)
   Nur Startseite und gemeinsame Shell (Skip-Link, Footer).
   ========================================================================== */

/* Menschen-Collage: frei positioniert erst ab 1180 px. Darunter überdeckten
   die Fotos Eyebrow und H2 (gemessen bei 1024 und 1100). Gestapelt 768 bis 1179. */
@media (min-width: 1180px) {
  .ph-team { width: clamp(300px, 25vw, 360px); }
  .ph-boxe { width: clamp(220px, 18vw, 260px); }
}
@media (max-width: 1179px) {
  .collage { height: auto; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: stretch; max-width: 880px; margin-inline: auto; }
  .collage-title { position: static; grid-column: 1 / -1; width: auto; transform: none; margin-bottom: 12px; }
  .ph, .people-person { position: relative; inset: auto; }
  .ph-team { width: 100%; transform: rotate(-1deg); }
  .ph-boxe { right: auto; top: auto; width: 100%; height: 100%; aspect-ratio: auto; transform: rotate(1deg); }
  .people-person { grid-column: 1 / -1; left: auto; bottom: auto; margin-top: 8px; gap: 18px; }
  .ph-portrait { width: 96px; transform: none; }
  .ph-cap { max-width: none; }
}

/* Hero-H1: «Kundenanfragen.» war bei 1081 bis 1199 breiter als die Textspalte;
   seit Audit B4 liefert --tz-h1-display dort 5vw, keine eigene Regel mehr. */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Vertrauenszeile: drittes Element brach mit verwaistem Trennstrich um */
  .trust li:first-child { flex-basis: 100%; }
  .trust li:nth-child(2)::before { display: none; }
  /* KI-Check: «Jetzt kostenlos prüfen» brach unter die Logos an den Pillenrand */
  .kicheck { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 10px 22px 10px 10px; border-radius: 22px; }
  .kicheck-logos { grid-row: 1 / span 2; }
  .kicheck-label { grid-column: 2; }
  .kicheck-q { grid-column: 2; }
  .kicheck-go { grid-column: 3; grid-row: 1 / span 2; }
  /* Footer: Kontaktblock über die volle Breite wie mobil, statt allein links */
  .footer-contact { grid-column: 1 / -1; }
  .fc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
}

@media (max-width: 767px) {
  /* Footer-Links: Touch-Ziel 44 px (vorher 34 px) */
  .footer-links a { min-height: 44px; }
  /* Werkzeug-Links: einspaltig, damit «KI-Sichtbarkeit prüfen» nicht zerfällt */
  .tools-row ul { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tools-row .tlink { display: inline-block; min-height: 44px; padding-block: 12px; line-height: 20px; }
  .footer-contact a.footer-mail { min-height: 44px; }
  .footer-contact .tlink { display: inline-block; min-height: 44px; padding-block: 10px; line-height: 24px; }
  .case-chip::after { inset: -10px -6px; }
}

@media (max-width: 359px) {
  .final-copy { padding-inline: 18px; }
  .final-actions .btn, .offer .btn { padding-inline: 12px; font-size: 13px; letter-spacing: 0; line-height: 1.2; }
}


/* ==========================================================================
   18c Design-Audit 23.09.2026 (site-audit/BEFUNDE.md): systemweite Regeln
   ========================================================================== */

@media (max-width: 767px) {
  /* Buttons: eine Grundform. Lange Beschriftungen brechen ausgeglichen in zwei
     Zeilen statt kleinerer Schrift und engerer Polsterung (Audit C1). Einzeilige
     Buttons bleiben 52 px hoch. */
  .btn { padding-block: 15px; line-height: 1.25; text-wrap: balance; }
  /* Textlinks: ein Polster, Trefferfläche mindestens 44 px (Audit C1) */
  main .tlink { padding-block: 13px; }
  /* Orange unter 24 px auf Hell in Orange-Ink (Audit B9, brand.md 4) */
  main :is(.step-num, .tool-formula-num, .hub-card-num .cur, .hub-score-num .cur, .service-proof-num .cur, .problem-close .accent) { color: var(--tz-orange-ink); }
  main .on-dark :is(.step-num, .tool-formula-num, .hub-card-num .cur, .hub-score-num .cur, .problem-close .accent) { color: var(--tz-orange); }
}


/* ==========================================================================
   19 Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mehrseiten-Fassung: aktiver Navigationspunkt. «page» auf der Rubrikseite,
   «true» auf Unterseiten derselben Rubrik (Audit B6). */
.nav-links a:is([aria-current="page"], [aria-current="true"]) { color: var(--tz-orange-ink); text-decoration: underline 2px var(--tz-orange); text-underline-offset: 8px; }
.footer .footer-links a[aria-current="page"] { color: var(--tz-orange); }