/* ============================================================
   REDBRIDGE — Zentrales Stylesheet
   ------------------------------------------------------------
   ALLES Design liegt in dieser einen Datei. Wenn du etwas
   ändern willst:
     · Farben        → Block "TOKENS" direkt hier unten
     · Schriftgrößen → Block "TYPOGRAFIE"
     · roter Ton     → Variable --red (eine Zeile)
   Änderungen hier wirken automatisch auf ALLEN Seiten.
   ============================================================ */

/* ---------------- TOKENS (Farben & Maße) ---------------- */
:root{
  --ink:   #101010;   /* Text, Linien, Buttons-Hover */
  --paper: #f5f3ee;   /* warmes Off-White (Hintergrund) */
  --muted: #63605a;   /* Sekundärtext, Labels */
  --hair:  #d9d6ce;   /* feine interne Linien */
  --red:   #c1272d;   /* SIGNATURFARBE — hier den Rot-Ton ändern */
                      /* Alternative (Xiaohongshu-Rot): #ff2442 */

  --pad: clamp(18px, 4.5vw, 56px);

  --font-dot: 'Doto', 'Space Mono', ui-monospace, monospace;   /* Dot-Matrix — nur große Display-Headlines */
  --font-display: 'Space Mono', ui-monospace, 'SF Mono', monospace; /* übrige Überschriften: Mono */
  --font-body: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background-color: var(--paper);
  /* dezentes Dot-Grid — CRT/„altes Internet"-Textur, sehr schwach */
  background-image: radial-gradient(rgba(16,16,16,0.05) 1px, transparent 1.4px);
  background-size: 20px 20px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--red); color: var(--paper); }

a:focus-visible, button:focus-visible, summary:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* ---------------- TRENNLINIEN ---------------- */
.rule-dash{
  border-top: 1px solid transparent;
  border-image: repeating-linear-gradient(to right,
    #aaa 0, #aaa 4px, transparent 4px, transparent 10px) 1;
}
.rule-fine{
  border-top: 1px solid transparent;
  border-image: repeating-linear-gradient(to right,
    #c8c4be 0, #c8c4be 3px, transparent 3px, transparent 8px) 1;
}

/* ---------------- HEADER + NAV ---------------- */
header{
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad);
}
.logo{
  font-family: var(--font-dot);
  font-weight: 700; font-size: 22px;
  letter-spacing: -0.01em;
  text-decoration: none; color: var(--ink);
}
.logo .dot{ color: var(--red); }

nav{ display: flex; gap: clamp(14px, 2.6vw, 30px); align-items: center; }
nav a{
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, color .2s;
  padding-bottom: 2px;
}
nav a:hover{ border-color: var(--ink); }
nav a.active{ color: var(--red); border-color: var(--red); }
nav a.lang{ font-weight: 700; color: var(--muted); }
nav a.lang:hover{ color: var(--ink); }
nav a.lang[aria-current]{ color: var(--ink); border-color: transparent; }
.langset{ display: inline-flex; align-items: center; }
.langset a.lang{ padding: 2px 8px; }
.langset a.lang + a.lang{ border-left: 1px solid var(--hair); }
@media (max-width: 720px){
  nav a:not(.lang):not(.nav-cta){ display: none; }
  /* Header verdichten, damit lange Labels (z. B. "Erstgespräch") ohne Überlauf passen */
  header{ padding: 12px 16px; }
  nav{ gap: 8px; }
  .logo{ font-size: 19px; }
  /* Touch-Targets: min. 44px Höhe für die auf Mobile sichtbaren Nav-Elemente */
  .langset a.lang{ padding: 12px 6px; }
  nav a.nav-cta.btn.small{ padding: 13px 14px; font-size: 12px; }
  nav a.nav-cta{ white-space: nowrap; }
}

/* ---------------- BUTTONS (Rot = Aktion) ---------------- */
.btn{
  display: inline-block;
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  color: var(--paper);
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 2px;
  padding: 13px 28px;
  text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.small{ padding: 9px 18px; font-size: 13px; }

/* ---------------- KLAMMER-TEXT-CTA (sekundäre Links) ---------------- */
.btn-text{
  display: inline-flex; align-items: baseline; overflow: hidden;
  height: 1.4em; line-height: 1.4;
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.03em;
  color: var(--ink); text-decoration: none; vertical-align: bottom;
}
.btn-text::before{ content: "[ "; color: var(--red); }
.btn-text::after{ content: " ]"; color: var(--red); }
.btn-text-inner{
  display: inline-flex; flex-direction: column;
  transition: transform .3s ease;
}
.btn-text:hover .btn-text-inner{ transform: translateY(-1.4em); }

/* ---------------- SECTIONS & LABELS ---------------- */
section{ padding: clamp(64px, 9vw, 140px) var(--pad); }

.label{
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red);                 /* Labels komplett rot */
  display: block;
  margin-bottom: clamp(20px, 3vw, 36px);
}
.label::before{ content: "[ "; }
.label::after{ content: " ]"; }

/* ---------------- PAGE-HERO (Unterseiten) ---------------- */
.page-hero{
  padding-top: clamp(56px, 8vw, 116px);
  padding-bottom: clamp(36px, 5.5vw, 76px);
}
.page-hero h1{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 3.6vw, 48px);
  line-height: 1.12; letter-spacing: 0.01em;
  max-width: 24ch;
}
.page-hero h1 em{ font-family: var(--font-display); font-style: normal; font-weight: 700; color: var(--red); }
.page-hero .lead{
  margin-top: clamp(20px, 3vw, 36px);
  font-size: clamp(16px, 1.6vw, 21px);
  max-width: 58ch; color: var(--ink);
}

/* ---------------- HERO (Startseite) ---------------- */
.hero{ padding-top: clamp(64px, 9vw, 136px); padding-bottom: clamp(46px, 7vw, 96px); }
.hero h1{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 4.4vw, 56px);
  line-height: 1.12; letter-spacing: 0.01em;
  max-width: 22ch;
}
.hero h1 em{ font-family: var(--font-display); font-style: normal; font-weight: 700; color: var(--red); }
/* blinkender Terminal-Block-Cursor nach der Seiten-Headline */
.hero h1::after, .page-hero h1::after{
  content: "\2588"; font-family: var(--font-mono); font-weight: 400;
  color: var(--red); margin-left: 0.08em;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity: 0; } }
.hero .sub{
  margin-top: clamp(24px, 3.5vw, 44px);
  font-size: clamp(16px, 1.5vw, 20px);
  max-width: 56ch;
}
.hero .cta-row{
  margin-top: clamp(34px, 5vw, 60px);
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.hero .cta-note{ font-size: 13px; color: var(--muted); max-width: 34ch; }

/* ---------------- MEDIA-SLOT (Bild-Platzhalter) ---------------- */
.media-slot{
  position: relative; overflow: hidden;
  margin-top: clamp(40px, 6vw, 72px);
  width: 100%;
  aspect-ratio: 21 / 9;
  background: var(--paper);
  border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.media-slot.slim{ aspect-ratio: 21 / 6; margin-top: clamp(32px, 5vw, 56px); }
/* driftende Diagonal-Streifen — Textur statt leerer Kasten */
.media-slot::before{
  content: ""; position: absolute; inset: -30%;
  background: repeating-linear-gradient(135deg, var(--hair) 0, var(--hair) 1px, transparent 1px, transparent 14px);
  animation: slotDrift 6s linear infinite;
}
@keyframes slotDrift{ to{ transform: translate(14px, 14px); } }
/* Shimmer-Sweep — ein Lichtstreifen zieht gelegentlich durch */
.media-slot::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: slotSweep 5s ease-in-out infinite;
}
@keyframes slotSweep{ 0%, 55%{ transform: translateX(-120%); } 100%{ transform: translateX(120%); } }
.media-slot span{
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); background: var(--paper); padding: 4px 10px; border: 1px solid var(--hair);
}
.media-slot span::before{ content: "[ "; color: var(--red); }
.media-slot span::after{ content: " ]"; color: var(--red); }

/* ---------------- HERO + XHS-FEED-BACKDROP (Startseite) ---------------- */
.hero-split{ position: relative; overflow: hidden; }
.hero-text{ position: relative; z-index: 1; }
/* Feed als großer, an den Rändern ausgeblendeter Hintergrund rechts */
.hero-visual{
  position: absolute; top: 0; bottom: 0; right: 0; z-index: 0;
  width: min(46%, 620px); opacity: .6; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(120% 96% at 90% 50%, #000 28%, transparent 74%);
  mask-image: radial-gradient(120% 96% at 90% 50%, #000 28%, transparent 74%);
}
@media (max-width: 900px){
  .hero-split{ display: flex; flex-direction: column; align-items: flex-start; }
  .hero-visual{ position: static; width: 100%; height: clamp(340px, 52vh, 460px); opacity: .9; margin-top: clamp(20px, 5vw, 36px);
    -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent);
    mask-image: linear-gradient(to bottom, #000 66%, transparent); }
}

.xhs-feed{ height: 100%; overflow: hidden; padding: 0 6px; }
.xhs-feed-inner{ display: flex; gap: 13px; animation: feedscroll 58s linear infinite; }
.xhs-col{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
@keyframes feedscroll{ to{ transform: translateY(-50%); } }
.xhs-card{ display: flex; flex-direction: column; margin-bottom: 13px; }
.xhs-cover{ width: 100%; border: 1px solid var(--ink);
  background: repeating-linear-gradient(135deg, var(--hair) 0, var(--hair) 1px, transparent 1px, transparent 9px), var(--paper); }
.xhs-cover.tall{ aspect-ratio: 3 / 4; }
.xhs-cover.med{ aspect-ratio: 1 / 1; }
.xhs-cover.short{ aspect-ratio: 4 / 3; }
.xhs-cover.red{ background: repeating-linear-gradient(135deg, rgba(193,39,45,.28) 0, rgba(193,39,45,.28) 1px, transparent 1px, transparent 9px), rgba(193,39,45,.06); }
.xhs-cap{ font-family: var(--font-mono); font-size: 12px; line-height: 1.35; color: var(--ink); margin: 7px 2px 4px; }
.xhs-meta{ display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); padding: 0 2px; }
.xhs-ava{ width: 16px; height: 16px; border-radius: 50%; background: var(--ink); opacity: .5; flex: none; }
.xhs-user{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xhs-like{ color: var(--red); white-space: nowrap; }

/* ---------------- MARQUEE (rotes Band) ---------------- */
.marquee{
  overflow: hidden;
  background: var(--red);
  color: var(--paper);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 12px 0; white-space: nowrap;
}
.marquee-inner{ display: inline-block; animation: scrollx 26s linear infinite; }
.marquee span{
  font-family: var(--font-dot); font-weight: 700;
  font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0 22px;
}
.marquee span i{ font-style: normal; opacity: .55; padding-left: 22px; }
@keyframes scrollx{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------------- HOOK + STATS ---------------- */
.hook .big{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2.8vw, 38px); line-height: 1.22; max-width: 30ch;
}
.hook p.body{ margin-top: clamp(20px, 3vw, 32px); max-width: 62ch; }
.stats{
  margin-top: clamp(36px, 5.5vw, 64px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 2px solid var(--red);        /* rote Kante über den Zahlen */
}
.stats div{ padding: 20px 24px 4px 0; }
.stats div + div{ padding-left: 24px; }
@media (min-width: 641px){ .stats div + div{ border-left: 1px solid var(--hair); } }
.stats strong{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 44px); display: block; line-height: 1.05;
}
.stats small{ font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ---------------- LEISTUNGEN-GRID ---------------- */
.services-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--ink); border-left: 1px solid var(--ink);
}
.service{
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  padding: clamp(24px, 3vw, 40px); min-height: 220px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
}
.service .num{ font-family: var(--font-mono); font-size: 12px; color: var(--red); }
.service h3{ font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1; }
.service p{ font-size: 15px; max-width: 42ch; }

/* ---------------- LEISTUNGEN-LISTE (editorial, statt Karten-Grid) ---------------- */
.services-list{ border-top: 1px solid var(--ink); }
.services-list .service{
  display: grid; grid-template-columns: 84px 1fr; gap: clamp(16px, 3vw, 32px);
  border: none; border-bottom: 1px solid var(--hair);
  padding: clamp(28px, 4vw, 46px) 0; min-height: 0;
}
.services-list .service .num{ font-size: 13px; padding-top: 2px; }
.services-list .service h3{
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(15px, 1.6vw, 17px); letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.3; margin-bottom: 12px;
}
.services-list .service p{ font-size: clamp(15px, 1.5vw, 17px); max-width: 62ch; }
@media (max-width: 560px){
  .services-list .service{ grid-template-columns: 1fr; }
}

/* ---------------- TRUST-LISTE ---------------- */
.trust h2{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3.6vw, 52px); line-height: 1.05;
  max-width: 22ch; margin-bottom: clamp(30px, 4vw, 54px);
}
.trust-list{ list-style: none; max-width: 76ch; }
.trust-list li{
  padding: clamp(22px, 3vw, 34px) 0;
  display: grid; grid-template-columns: 30px 1fr; gap: 18px; align-items: start;
}
.trust-list li + li{
  border-top: 1px solid transparent;
  border-image: repeating-linear-gradient(to right,
    #c8c4be 0, #c8c4be 3px, transparent 3px, transparent 8px) 1;
}
.trust-list .mark{ color: var(--red); font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; }
.trust-list h3{ font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 24px); margin-bottom: 8px; }

/* ---------------- ABLAUF-SCHRITTE ---------------- */
.steps{
  counter-reset: step;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: 1px solid var(--ink);
}
.step{ counter-increment: step; padding: clamp(24px, 3vw, 38px) clamp(18px, 2vw, 28px) clamp(24px, 3vw, 38px) 0; }
.step + .step{ padding-left: clamp(18px, 2vw, 28px); }
@media (min-width: 641px){ .step + .step{ border-left: 1px solid var(--hair); } }
.step::before{
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 13px; color: var(--red);
  display: block; margin-bottom: 14px;
}
.step h3{ font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.9vw, 23px); margin-bottom: 10px; line-height: 1.15; }
.step p{ font-size: 15px; }

.honest{
  margin-top: clamp(30px, 4vw, 48px); padding-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid transparent;
  border-image: repeating-linear-gradient(to right,
    #aaa 0, #aaa 4px, transparent 4px, transparent 10px) 1;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(17px, 2vw, 24px); max-width: 52ch; line-height: 1.4;
}

/* ---------------- FAQ ---------------- */
.faq{ max-width: 880px; }
.faq details{
  border-top: 1px solid transparent;
  border-image: repeating-linear-gradient(to right,
    #c8c4be 0, #c8c4be 3px, transparent 3px, transparent 8px) 1;
}
.faq details:last-of-type{ border-bottom: 1px solid var(--hair); }
.faq summary{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(16px, 1.8vw, 21px);
  padding: 20px 36px 20px 0; cursor: pointer; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); color: var(--red); font-size: 20px;
}
.faq details[open] summary::after{ content: "–"; }
.faq details p{ padding: 0 0 24px 0; max-width: 66ch; }

/* ---------------- BIG CTA ---------------- */
.bigcta{ border-top: 1px solid var(--ink); }
.bigcta h2{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 5.4vw, 68px); line-height: 1.08; letter-spacing: 0.01em; max-width: 16ch;
}
.bigcta h2 em{ font-family: var(--font-display); font-style: normal; font-weight: 700; color: var(--red); }
.bigcta .cta-row{ margin-top: clamp(36px, 5.5vw, 68px); display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

/* ---------------- KONTAKT-FORM ---------------- */
.form{ max-width: 620px; display: grid; gap: 20px; }
.form label{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; }
.form label .req{ color: var(--red); margin-left: 3px; }
.form-note{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); }
.form input, .form textarea, .form select{
  width: 100%; font-family: var(--font-body); font-size: 16px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 0; padding: 13px 14px;
}
.form input:focus, .form textarea:focus, .form select:focus{ outline: 2px solid var(--red); outline-offset: 0; }
.form textarea{ min-height: 130px; resize: vertical; }

/* ---------------- FOOTER ---------------- */
footer{
  border-top: 1px solid var(--ink); padding: 26px var(--pad);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--muted);
}
footer .zh{ font-family: var(--font-mono); }
footer a{ color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
footer a:hover{ color: var(--ink); border-color: var(--red); }
footer .dot{ color: var(--red); }

/* ---------------- REVEAL ON SCROLL ---------------- */
.reveal{ opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity: 1; transform: translateY(0); }
/* gestaffelt: Kinder von Gruppen kaskadieren nacheinander ein (Delay via JS gesetzt) */
.stg{ transition-delay: var(--d, 0ms); }

/* ---------------- HOVER-MIKROINTERAKTIONEN ---------------- */
.services-list .service .num,
.trust-list .mark{ transition: transform .3s ease; }
.services-list .service:hover .num,
.trust-list li:hover .mark{ transform: translateX(6px); }
.services-list .service h3,
.trust-list li h3,
.step h3{ transition: color .25s ease; }
.services-list .service:hover h3,
.trust-list li:hover h3,
.step:hover h3{ color: var(--red); }

/* ---------------- SKIP-LINK & SR-ONLY (A11y) ---------------- */
.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
  padding: 12px 18px; text-decoration: none;
}
.skip-link:focus{ left: 8px; top: 8px; }
.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;
}

/* ---------------- CYBER-SIGIL-MARKE (Footer) ---------------- */
.sigil{ display: inline-block; width: 20px; height: 20px; margin-right: 10px; vertical-align: -4px; color: var(--ink); }
.sigil svg{ display: block; width: 100%; height: 100%; }

/* ---------------- COLLECTION-LISTEN (News/Cases/Jobs) ---------------- */
.post-list{ list-style: none; border-top: 1px solid var(--ink); max-width: 78ch; }
.post-list li{ border-bottom: 1px solid var(--hair); }
.post-list > li > a{ display: block; padding: clamp(22px, 3vw, 34px) 0; text-decoration: none; color: var(--ink); }
.post-list .meta{ display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.post-list h3{ font-family: var(--font-body); font-weight: 700; font-size: clamp(17px, 2vw, 22px); line-height: 1.25; margin-bottom: 8px; transition: color .25s ease; }
.post-list > li > a:hover h3{ color: var(--red); }
.post-list p{ font-size: 15px; color: var(--muted); max-width: 64ch; }
.post-empty{ font-family: var(--font-mono); color: var(--muted); }

/* Detail-Artikel */
.post{ max-width: 68ch; }
.post-body{ margin-top: clamp(8px, 2vw, 16px); }
.post-body > * + *{ margin-top: 1em; }
.post-body h2, .post-body h3{ font-family: var(--font-body); font-weight: 700; margin-top: 1.5em; }
.post-body a{ color: var(--red); }
.post-body img{ max-width: 100%; border: 1px solid var(--ink); }

/* ---------------- TEAM ---------------- */
.team-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 190px)); justify-content: start; gap: clamp(18px, 2.5vw, 32px); margin-top: clamp(28px, 4vw, 44px); }
.team-member img, .team-photo-ph{ width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--ink); object-fit: cover; display: block;
  background: repeating-linear-gradient(135deg, var(--hair) 0, var(--hair) 1px, transparent 1px, transparent 10px), var(--paper); }
.team-member h3{ font-family: var(--font-body); font-weight: 700; font-size: 15px; margin-top: 12px; }
.team-role{ font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------------- TESTIMONIALS ---------------- */
.testimonials{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: clamp(20px, 3vw, 32px); }
.testimonial{ border-top: 2px solid var(--red); padding-top: clamp(18px, 2.5vw, 26px); }
.testimonial blockquote{ font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 2vw, 22px); line-height: 1.35; }
.testimonial figcaption{ display: flex; align-items: center; gap: 10px; margin-top: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.testimonial figcaption img{ width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }

/* ---------------- EINSTIEGS-LEITER (Readiness-Check / Retainer) ---------------- */
.entry-ladder{ display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); margin-top: clamp(24px, 3vw, 36px); }
.entry{ padding: clamp(24px, 3vw, 38px) clamp(18px, 2vw, 28px) clamp(24px, 3vw, 38px) 0; }
.entry + .entry{ padding-left: clamp(18px, 2vw, 28px); }
@media (min-width: 641px){ .entry + .entry{ border-left: 1px solid var(--hair); } }
@media (max-width: 640px){
  .entry-ladder{ grid-template-columns: 1fr; }
  .entry + .entry{ padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); }
}
.entry-num{ font-family: var(--font-mono); font-size: 13px; color: var(--red); }
.entry h3{ font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.1; margin: 6px 0 10px; }
.entry p{ font-size: clamp(15px, 1.5vw, 16px); max-width: 46ch; margin-bottom: 16px; }

/* ---------------- LEAD-FORMULAR (Checkliste) ---------------- */
.lead-form{ max-width: 58ch; }
.lead-form-label{ display: block; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.lead-form-row{ display: flex; gap: 12px; flex-wrap: wrap; }
.lead-form input[type="email"]{ flex: 1 1 240px; min-width: 0; padding: 14px 16px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 16px; }
.lead-form input[type="email"]:focus{ outline: 2px solid var(--red); outline-offset: 2px; }
.lead-form-note{ font-size: 13px; color: var(--muted); margin-top: 14px; max-width: 52ch; }

/* ---------------- CHECKLISTE ---------------- */
.checklist{ list-style: none; max-width: 72ch; border-top: 1px solid var(--ink); }
.checklist li{ position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid var(--hair); font-size: clamp(15px, 1.5vw, 17px); }
.checklist li::before{ content: "✓"; position: absolute; left: 0; top: 14px; color: var(--red); font-weight: 700; font-family: var(--font-mono); }

/* ---------------- CASE-METRIKEN / -ABSCHNITTE ---------------- */
.case-block{ margin-top: clamp(28px, 4vw, 44px); }
.case-block h2.label{ margin-bottom: 10px; }
.case-block p{ font-size: clamp(15px, 1.6vw, 17px); max-width: 62ch; }

/* ---------------- REDUCED MOTION ---------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .marquee-inner{ animation: none; }
  .media-slot::before, .media-slot::after{ animation: none; }
  .hero h1::after, .page-hero h1::after{ animation: none; }
  .xhs-feed-inner{ animation: none; }
  .reveal{ opacity: 1; transform: none; transition: none; }
  *{ transition: none !important; }
}