/* ============================================================
   Gemeinsames Stylesheet — Ausgangspunkt, pro Projekt anpassen
   Used by: index.html, handwerk.html, kontakt.html,
            impressum.html, datenschutz.html, cookies.html, agb.html
   ============================================================ */

/* Werte per Pixel-Probe aus dem Figma-PDF-Export gemessen (nicht geschaetzt).
   --navy bleibt die normale dunkle Textfarbe (Nav-Links, Labels, Namen,
   Tabellenkoepfe — im Export durchweg schwarz/fast schwarz, KEIN Blauton).
   Ueberschriften, Buttons und grossflaechige Farbflaechen (Pain-Band,
   Opt-in) sind dagegen durchgehend RGB(2,88,193) = --blue — dafuer an den
   jeweiligen Stellen explizit var(--blue) statt var(--navy) verwenden.
   Der Footer ist nochmal dunkler, RGB(0,69,154) = --navy-deep. */
:root{
  --navy:#14181F;
  --navy-deep:#00459A;  /* nur Footer/Cookie-Banner */
  --blue:#0258C1;
  --teal:#71C7D4;        /* zweite Akzentfarbe: Icons, Rahmen, Opt-in-Button */
  --bg-blue-light:#EEF4FC; /* Stat-Kacheln "Ueber mich" */
  --bg-tag:#F6F6F6;         /* Tag-Chips "Ueber mich" */
  --bg-card:#F7FAFD;        /* Pain-Point-Karten */
  --gray-label:#646464;     /* Logo-Leiste Ueberschrift */
  --gray-note:#737373;      /* Logo-Leiste Disclaimer */
  --paper:#FFFFFF;
  --paper-2:#F5F7FA;
  --line:#E3E8EF;
  --text:#14181F;
  --text-2:#5B6472;
  --green:#2E9E5B;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
/* Montserrat ueberall, statt Inter aus der Vorlage — per CSS-Export der
   Live-Seite bestaetigt (siehe SCHRIFT_ACHSEN-Kommentar in site_config.py). */
body{
  background:var(--paper); color:var(--navy);
  font-family:'Montserrat', sans-serif; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* height:auto ist hier nicht Kosmetik, sondern Pflicht. Jedes <img> traegt
   width- und height-Attribute (gegen CLS). Wird die Breite dann per CSS
   beschnitten — hier durch max-width:100% —, bleibt die Hoehe aus dem Attribut
   stehen und das Bild wird verzerrt. Genau das passierte mit dem
   KI-Agenten-Banner: 1100x634 in einem 320 px breiten Viewport, die Hoehe blieb
   bei 634 px und das Motiv war senkrecht gestreckt. Auf dem Desktop fiel es
   nicht auf, weil der Container dort fast der natuerlichen Breite entspricht.
   Regeln mit absichtlich fester Hoehe (.logo-img) sind spezifischer und
   gewinnen weiterhin. */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
/* <button> erbt Schrift/Farbe in keinem Browser automatisch vom Body —
   ohne diese Regel faellt jeder Button (CTA, Dialog-Submit, Menu-Toggle)
   auf die UI-Systemschrift zurueck statt Montserrat zu zeigen. */
button{ font-family:inherit; color:inherit; }

/* Ueberschriften: Montserrat 700, Farbe --blue — per CSS-Export der
   Live-Seite bestaetigt (nicht Source Serif 4 der Vorlage, nicht --navy).
   Ausnahme: die Hero-H1 nutzt Geologica 500, siehe .hero h1 weiter unten. */
h1,h2,h3{
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  color:var(--blue);
  line-height:1.15;
  letter-spacing:-0.01em;
}

/* Diese Vorlage hatte hyphens:auto als Schutz gegen lange deutsche
   Komposita ("Vermoegensschadenhaftpflichtversicherung"), die in einer
   schmalen Spalte sonst die ganze Seite verschieben. Auf DIESER Seite
   kommen solche Woerter nicht vor — stattdessen trennte hyphens:auto
   ganz gewoehnliche kurze Woerter mitten im Satz ("zu-stande",
   "kon-kreten", "Ge-danke", "Ver-käufe" auf Deutsch; "сла-бые" auf
   Russisch, seit Chrome auch kyrillisch trennt) und wurde vom Kunden per
   PDF-Annotation ("Bitte keine Trennung") global fuer beide Sprachen
   abgelehnt. overflow-wrap:break-word bleibt als stiller Auffangnetz
   gegen echtes Ueberlaufen bestehen — trennt notfalls ohne sichtbaren
   Bindestrich, aendert aber bei normaler Breite nichts am Schriftbild. */
h1,h2,h3,h4,summary{ overflow-wrap:break-word; hyphens:none; }
p,li,td,th,dd,figcaption{ overflow-wrap:break-word; }

:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* 1440px Inhaltsbreite = Figma-Desktop-Frame (1600px) minus 80px Rand
   auf jeder Seite, durchgehend so gemessen (z. B. "Компании..."-Gruppe:
   left:80px, width:1439.55px). 1120px war ein Vorlagenwert. */
.wrap{ max-width:1440px; margin:0 auto; padding:0 28px; }
.wrap-narrow{ max-width:820px; margin:0 auto; padding:0 28px; }
section{ padding:100px 0; }
@media (max-width:720px){ section{ padding:60px 0; } }

/* Farbe/Groesse laut CSS-Export der Live-Seite: auf hellem Grund schwarz
   (--navy), nicht --blue; auf dem blauen Opt-in-Hintergrund dagegen Teal
   (siehe .optin .eyebrow weiter unten). */
.eyebrow{
  font-size:clamp(15px,3.5vw,18px); color:var(--navy); font-weight:600;
  text-transform:uppercase; letter-spacing:0.02em;
  margin-bottom:16px;
}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1120px; margin:0 auto; padding:18px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
/* Der Logo-Link darf nicht schrumpfen. Ohne flex-shrink:0 gibt im Header
   ausgerechnet er nach, sobald die Navigation eng wird — das Logo wurde so
   bis auf 36 px zusammengedrueckt statt der vorgesehenen 87 px. */
.header-inner > a{ flex-shrink:0; }
.logo-img{ height:32px; width:auto; display:block; }
nav{ display:flex; align-items:center; gap:36px; }
.nav-links{ display:flex; align-items:center; gap:28px; }
/* WhatsApp-Direktlink in der Navigation: Hoerer-Icon + Wort, damit der
   Punkt sich optisch von den Anker-Links abhebt, ohne ein zweiter Button
   neben dem CTA zu sein. */
.nav-chat{ display:inline-flex; align-items:center; gap:7px; }
.nav-chat svg{ width:18px; height:18px; flex-shrink:0; }
.mobile-nav .nav-chat{ display:flex; }
/* Sechs Menuepunkte plus CTA brauchen mehr Platz als die frueheren fuenf.
   Unterhalb dieser Breite uebernimmt das Burger-Menue.
   1400px statt frueher 1000px: seit der Menuepunkt "Chat" auf
   "WhatsApp Chat" heisst (Kundenvorgabe 27.08.2026), ist der Punkt 162px
   statt 66px breit. Gemessen auf der russischen Startseite — die hat die
   laengsten Beschriftungen — braucht die Navigation dadurch rund 1372px;
   bei 1280px und 1366px stand sie vorher ueber dem Viewportrand und die
   Seite scrollte waagerecht. Der Wert gilt fuer BEIDE Sprachen, die
   deutsche Fassung ist 62px schmaler und wuerde auch frueher passen. */
@media (max-width:1400px){ .nav-links{ display:none; } }
/* Auf schmalen Geraeten passen Logo, CTA-Button und Burger nicht nebeneinander
   — der Header schob die Seite um rund 80 px nach rechts. Der CTA entfaellt
   hier, im Burger-Menue steht derselbe Button weiterhin bereit. */
@media (max-width:600px){ header nav > .btn-primary{ display:none; } }
nav a{ text-decoration:none; font-size:17px; color:var(--navy); font-weight:500; white-space:nowrap; }
/* Bewusst NUR :hover — der aktive Menuepunkt wird nicht dauerhaft
   eingefaerbt (Wunsch des Kunden). Die .active-Klasse wird weiterhin
   gesetzt, damit sie fuer aria-/Analysezwecke verfuegbar bleibt, sie
   faerbt aber nichts mehr ein. */
nav a:hover{ color:var(--blue); }

/* Sprachumschalter. Erscheint nur, wenn in site_config.py mehr als eine
   Sprache steht — bei einer Sprache erzeugt shell.py den Block gar nicht. */
.lang-switch{ display:flex; align-items:center; gap:2px; flex-shrink:0; }
.lang-switch a{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13px; font-weight:600; letter-spacing:0.04em; line-height:1;
  color:var(--text-2); padding:6px 9px; border-radius:6px;
  transition:color 0.15s ease, background 0.15s ease;
}
.lang-switch a:hover{ color:var(--blue); background:var(--paper-2); }
/* Flaggen-SVG statt Emoji (siehe FLAG_SVG in shell.py) — 3:2-Seitenverhaeltnis,
   leicht gerundet, mit duennem Rahmen gegen den weissen RU-Streifen auf
   hellem Hintergrund. */
.flag-icon{ display:inline-flex; width:16px; height:11px; border-radius:2px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,0.12); flex-shrink:0; }
.flag-icon svg{ width:100%; height:100%; display:block; }
/* aria-current markiert die laufende Sprache. Dieselbe Angabe liest auch ein
   Screenreader vor — eine zusaetzliche Klasse waere doppelt gepflegt. */
.lang-switch a[aria-current]{ color:var(--navy); background:var(--paper-2); }
/* Unter 600 px entfaellt bereits der CTA-Button aus Platzgruenden; hier
   zusaetzlich den Umschalter, sonst draengt sich der Header wieder. Der
   :not() nimmt die eigene Kopie direkt neben dem Logo aus (siehe unten) —
   die soll bei <600px gerade erst erscheinen, nicht verschwinden. */
@media (max-width:600px){ header .lang-switch:not(.lang-switch-header-mobile){ display:none; } }
/* Kopie des Umschalters direkt neben dem Logo, nur <600px sichtbar: dort
   verschwindet der normale Umschalter aus der Nav (Zeile drueber), soll
   aber nicht nur im aufgeklappten Menue erreichbar sein. */
.lang-switch-header-mobile{ display:none; margin-left:8px; flex-shrink:0; }
@media (max-width:600px){
  .lang-switch-header-mobile{ display:flex; }
  /* header-inner nutzt justify-content:space-between fuer den Normalfall
     "Logo links, Nav rechts" (zwei Kinder). Mit dem Umschalter als drittem
     sichtbaren Kind wuerde space-between ihn mittig auf die Zeile verteilen
     statt neben dem Logo zu lassen — margin-left:auto auf nav frisst den
     gesamten Rest-Platz rechts und gewinnt dabei gegen space-between. */
  .header-inner nav{ margin-left:auto; }
}
/* Die Flaggen-Emoji brauchen etwas mehr Breite als die reinen Kuerzel
   vorher — Schrift und Polster hier knapper, sonst schob der Umschalter
   den Burger-Button 5px ueber den 375px-Viewport hinaus. */
.lang-switch-header-mobile a{ font-size:11px; padding:4px 5px; gap:3px; }
/* Im Burger-Menue: die Regel fuer .mobile-nav a macht Links zu Bloecken mit
   Trennlinie — fuer zwei nebeneinanderstehende Sprachkuerzel zuruecknehmen. */
.mobile-nav .lang-switch{ margin-top:24px; justify-content:center; }
.mobile-nav .lang-switch a{
  display:inline-flex; border-bottom:none; font-size:15px; padding:10px 16px;
}

.btn{
  /* Figma zeigt durchgehend pillenfoermige Schaltflaechen (Nav-CTA,
     Hero-CTA, Formular-Submit) — nicht die 8px der Ausgangsvorlage. */
  font-weight:600; font-size:15px; padding:13px 24px; border-radius:100px;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid transparent; cursor:pointer;
  transition:background 0.15s ease, transform 0.15s ease;
}
.btn-primary{ background:var(--blue); color:#fff; }
/* Der Kopfzeilen-CTA sitzt in einem eng bemessenen Flex-Item und brach
   ohne diese Regel in zwei Zeilen um ("Получить руководство" wurde zu
   hoch statt breiter) — hier darf der Knopf in der Breite wachsen. */
header nav > .btn-primary{ white-space:nowrap; }
.btn-primary:hover{ background:#1c6cab; transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line); color:var(--navy); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
/* Blauer Outline-Button laut Figma (z. B. unter "Was Sie erwartet") —
   .btn-ghost ist dafuer zu neutral (grauer Rahmen statt blauem). */
.btn-outline-blue{ border-color:var(--blue); color:var(--blue); background:transparent; }
.btn-outline-blue:hover{ background:var(--blue); color:#fff; }
.btn:disabled{ opacity:0.6; cursor:not-allowed; }

.menu-btn{
  display:none; background:none; border:none; cursor:pointer;
  width:40px; height:40px; padding:0; align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.menu-btn span{ display:block; width:22px; height:2px; background:var(--navy); transition:transform 0.25s ease, opacity 0.25s ease; }
/* Muss zur Breite bei .nav-links passen — sonst ist entweder beides
   gleichzeitig sichtbar oder gar nichts. */
@media (max-width:1400px){ .menu-btn{ display:flex; } }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-nav{ display:none; position:fixed; top:65px; left:0; right:0; bottom:0; background:#fff; z-index:49; padding:12px 28px 40px; overflow-y:auto; }
.mobile-nav.open{ display:block; }
.mobile-nav a{ display:block; padding:14px 0; font-size:18px; font-weight:600; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line); }
.mobile-nav .btn{ display:block; text-align:center; margin-top:24px; }

/* ---------- Hero (home) ---------- */
.hero{ padding:96px 0 90px; }
/* Mobil laut Figma-Export nur ~46px zwischen Header-Unterkante (top:15+
   height:60) und Bild-Oberkante (top:121) — 96px war reiner Vorlagenwert. */
@media (max-width:900px){ .hero{ padding:32px 0 56px; } }
/* Bildspalte bewusst breiter als die Textspalte (0.9fr/1.1fr statt vorher
   umgekehrt) — der Kunde wollte das Laptop-Mockup so gross wie moeglich;
   die Textspalte reicht dank clamp()-Groessen trotzdem. */
.hero-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  /* Laut Figma-Mobilversion steht das Laptop-Mockup ÜBER dem Text, nicht
     darunter (anders als am Desktop, wo es rechts neben dem Text sitzt). */
  .hero-art{ order:-1; }
}
/* Grid-Kinder haben von Haus aus min-width:auto und koennen daher nicht
   unter die Breite ihres Inhalts schrumpfen. Auf 320 px erzwang der lange
   CTA-Text so eine 302 px breite Spalte in einem 264 px breiten Raster —
   die Seite lief um 10 px ueber. */
.hero-grid > *{ min-width:0; }
.hero-copy > *{ animation:fadeUp 0.7s ease both; }
.hero-copy > *:nth-child(1){ animation-delay:0.05s; }
.hero-copy > *:nth-child(2){ animation-delay:0.15s; }
.hero-copy > *:nth-child(3){ animation-delay:0.25s; }
.hero-copy > *:nth-child(4){ animation-delay:0.35s; }
.hero-copy > *:nth-child(5){ animation-delay:0.45s; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
/* Einzige Stelle im ganzen Projekt mit Geologica — laut Live-Seite nur fuer
   die Hero-Ueberschrift verwendet, ueberall sonst Montserrat (Basisregel
   oben). Groesse 32px am Mobil-Frame (Figma-Export), 50px am Desktop
   (Live-Seite, computed style). */
/* weight:500 laut CSS-Export (mobil UND Desktop identisch bestaetigt) —
   nicht die geerbten 700 der h1,h2,h3-Basisregel. */
.hero h1{ font-family:'Geologica', sans-serif; font-weight:500; font-size:clamp(32px, 4vw, 50px); margin:16px 0 24px; }
.hero h1 .hi{ color:var(--blue); }
.hero p.lede{ font-size:clamp(18px,1.8vw,24px); color:var(--text); max-width:600px; margin-bottom:34px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }
.hero-meta{ display:flex; gap:24px; flex-wrap:wrap; font-size:13.5px; color:var(--text-2); }
.hero-meta b{ color:var(--navy); font-weight:600; }

.hero-art{ display:flex; justify-content:center; animation:fadeUp 0.9s ease 0.3s both; }
.hero-photo-frame{ position:relative; width:100%; border-radius:20px; overflow:hidden; box-shadow:0 24px 60px rgba(0,28,69,0.18), 0 4px 14px rgba(0,28,69,0.10); }
.hero-photo-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,28,69,0) 55%, rgba(0,28,69,0.26) 100%); pointer-events:none; }
.hero-photo-frame img{ width:100%; height:auto; display:block; }
.hero-badge{ position:absolute; left:20px; bottom:20px; z-index:2; background:rgba(255,255,255,0.94); backdrop-filter:blur(4px); border-radius:10px; padding:10px 16px; font-size:13px; font-weight:600; color:var(--navy); box-shadow:0 6px 18px rgba(0,28,69,0.16); }

/* ---------- Page header (inner pages) ---------- */
.page-hero{ padding:64px 0 48px; border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:clamp(28px,4vw,42px); margin-top:12px; }
.page-hero p{ color:var(--text-2); font-size:16px; max-width:640px; margin-top:14px; }
.breadcrumb{ font-size:13px; color:var(--text-2); margin-bottom:10px; }
.breadcrumb a{ color:var(--blue); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }

/* ---------- Trust bar ---------- */
.trust{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:40px 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
@media (max-width:760px){ .trust-grid{ grid-template-columns:1fr 1fr; } }
.trust-grid .n{ font-family:'Montserrat', sans-serif; font-size:32px; font-weight:700; color:var(--navy); }
.trust-grid .l{ font-size:13px; color:var(--text-2); margin-top:4px; }
.trust-grid .reveal:nth-child(2){ transition-delay:0.08s; }
.trust-grid .reveal:nth-child(3){ transition-delay:0.16s; }
.trust-grid .reveal:nth-child(4){ transition-delay:0.24s; }

/* ---------- Services list ---------- */
.services-list{ display:flex; flex-direction:column; margin-top:48px; }
.service-row{ display:grid; grid-template-columns:44px 1fr 1fr; gap:32px; padding:34px 0; border-top:1px solid var(--line); align-items:start; transition:background 0.25s ease, padding-left 0.25s ease; }
.service-row:last-child{ border-bottom:1px solid var(--line); }
.service-row:hover{ background:var(--paper-2); padding-left:16px; margin-left:-16px; padding-right:16px; margin-right:-16px; border-radius:8px; }
@media (max-width:820px){ .service-row{ grid-template-columns:1fr; gap:10px; } }
.service-row .idx{ width:44px; height:44px; border-radius:50%; background:var(--paper-2); color:var(--blue); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; transition:background 0.25s ease, color 0.25s ease; }
.service-row:hover .idx{ background:var(--blue); color:#fff; }
.service-row h3{ font-size:21px; margin-bottom:8px; }
.service-row p{ color:var(--text-2); font-size:15px; }
.service-row a.more{ font-size:13.5px; font-weight:600; color:var(--blue); text-decoration:none; }
.service-row a.more:hover{ text-decoration:underline; }
.services-list .reveal:nth-child(2){ transition-delay:0.05s; }
.services-list .reveal:nth-child(3){ transition-delay:0.10s; }
.services-list .reveal:nth-child(4){ transition-delay:0.15s; }
.services-list .reveal:nth-child(5){ transition-delay:0.20s; }
.services-list .reveal:nth-child(6){ transition-delay:0.25s; }
.services-list .reveal:nth-child(7){ transition-delay:0.30s; }
.services-list .reveal:nth-child(8){ transition-delay:0.35s; }
.services-list .reveal:nth-child(9){ transition-delay:0.40s; }

/* ---------- KI spotlight ---------- */
.ki-spot{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ki-photo{ border-radius:16px; overflow:hidden; box-shadow:0 16px 40px rgba(0,28,69,0.14); margin-top:40px; }
.ki-photo img{ width:100%; display:block; }

/* ---------- Nearshore ---------- */
.nearshore-grid{ display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:center; }
@media (max-width:860px){ .nearshore-grid{ grid-template-columns:1fr; } }
.nearshore-photo{ border-radius:16px; overflow:hidden; box-shadow:0 16px 40px rgba(0,28,69,0.14); }
.nearshore-list{ list-style:none; margin-top:24px; }
.nearshore-list li{ padding:10px 0 10px 28px; position:relative; font-size:15px; color:var(--text-2); border-top:1px solid var(--line); }
.nearshore-list li:first-child{ border-top:none; }
.nearshore-list li::before{ content:"✓"; position:absolute; left:0; color:var(--blue); font-weight:700; }
/* wrap ist Pflicht: ohne es sprengen mehrere Tags die Kartenbreite und die
   ganze Seite scrollt horizontal */
.flags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; font-size:13px; color:var(--text-2); }
.flag-tag{ background:var(--paper-2); border:1px solid var(--line); border-radius:20px; padding:6px 14px; }

/* ---------- Digitalbonus banner ---------- */
.bonus{ background:var(--navy); color:#fff; border-radius:20px; margin:0 28px; padding:72px 48px; }
@media (max-width:720px){ .bonus{ margin:0 16px; padding:48px 28px; } }
.bonus-inner{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }
@media (max-width:760px){ .bonus-inner{ grid-template-columns:1fr; text-align:center; } }
.bonus .eyebrow{ color:#8FB4E6; }
.bonus h2{ color:#fff; font-size:clamp(26px,3.4vw,38px); margin-bottom:14px; }
.bonus p{ color:#B9CBE8; max-width:480px; font-size:16px; }
.bonus-figure{ font-size:clamp(64px,8vw,96px); font-weight:800; text-align:center; line-height:0.9; color:var(--blue); font-family:'Montserrat',sans-serif; }
.bonus-figure small{ display:block; font-size:13px; font-weight:500; color:#B9CBE8; margin-top:8px; text-transform:uppercase; letter-spacing:0.06em; }

/* ---------- Referenzen ---------- */
.ref-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
@media (max-width:900px){ .ref-grid{ grid-template-columns:1fr; } }
/* Grid-Kinder haben per Default min-width:auto und koennen dadurch nicht
   unter ihre Inhaltsbreite schrumpfen — ohne min-width:0 laeuft die Spur
   ueber und die Seite bekommt einen horizontalen Scrollbalken. */
.ref-card{ min-width:0; border:1px solid var(--line); border-radius:12px; padding:28px 24px; transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
/* Screenshot der umgesetzten Website, randlos oben in der Karte. Die negativen
   Margins heben das Kartenpolster auf; der Radius ist 11px statt 12px, damit das
   Bild innerhalb des 1px-Rahmens sitzt und nicht darueber. */
.ref-shot{
  display:block; margin:-28px -24px 20px; overflow:hidden;
  border-radius:11px 11px 0 0; border-bottom:1px solid var(--line);
  background:var(--paper-2);
}
.ref-shot img{ display:block; width:100%; height:auto; }
/* Der Screenshot ist ein zweiter Link auf dasselbe Ziel wie "Zur Website" und
   traegt aria-hidden + tabindex=-1: fuer die Tastatur und Screenreader waere er
   eine reine Dopplung. Der Hover-Effekt bleibt als visueller Hinweis. */
.ref-shot img{ transition:transform 0.4s ease; }
.ref-card:hover .ref-shot img{ transform:scale(1.03); }
@media (prefers-reduced-motion: reduce){
  .ref-card:hover .ref-shot img{ transform:none; }
}
.ref-card .flags{ gap:8px; font-size:12px; }
.ref-card .flag-tag{ padding:4px 11px; }
.ref-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,28,69,0.08); border-color:#C7D6EA; }
.ref-card .client{ font-weight:700; font-size:19px; color:var(--navy); margin-bottom:4px; font-family:'Montserrat',sans-serif; }
.ref-card .sector{ font-size:12.5px; color:var(--blue); font-weight:600; margin-bottom:16px; display:block; text-transform:uppercase; letter-spacing:0.04em; }
.ref-card p{ font-size:14px; color:var(--text-2); margin-bottom:14px; }
/* margin-top fehlte: die Trennlinie sass ohne Abstand direkt unter der letzten
   Leistungsmarke. padding-top wirkt nur unterhalb der Linie, oberhalb braucht
   es einen eigenen Abstand. */
.ref-card .proof{ font-size:13px; color:var(--navy); font-weight:600; border-top:1px solid var(--line); margin-top:28px; padding-top:16px; }
/* Die Marken sind Flex-Elemente mit Zeilenumbruch. Ihre Unterkante ist nicht
   automatisch die Unterkante des Containers, sobald die letzte Zeile nur teilweise
   gefuellt ist — deshalb hier zusaetzlich Luft unter dem Markenblock statt sich
   allein auf das margin des naechsten Elements zu verlassen. */
.ref-card .flags{ margin-bottom:4px; }
.ref-grid .reveal:nth-child(2){ transition-delay:0.08s; }
.ref-grid .reveal:nth-child(3){ transition-delay:0.16s; }

/* ---------- FAQ ---------- */
.faq-list{ margin-top:40px; }
details{ border-bottom:1px solid var(--line); padding:22px 0; }
details:first-child{ border-top:1px solid var(--line); }
summary{ cursor:pointer; font-size:17px; color:var(--navy); font-weight:700; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; letter-spacing:-0.01em; font-family:'Montserrat',sans-serif; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; font-size:20px; color:var(--blue); font-weight:400; flex-shrink:0; transition:transform 0.2s ease; font-family:'Montserrat',sans-serif; }
details[open] summary::after{ transform:rotate(45deg); }
details p{ margin-top:14px; font-size:14.5px; color:var(--text-2); max-width:680px; }
.faq-list details:nth-child(2){ transition-delay:0.05s; }
.faq-list details:nth-child(3){ transition-delay:0.10s; }
.faq-list details:nth-child(4){ transition-delay:0.15s; }

/* ---------- Process flow diagram ---------- */
.flow{ margin-top:56px; position:relative; }
.flow-line{ position:absolute; top:23px; left:0; right:0; height:2px; background:var(--line); z-index:0; }
.flow-line-fill{ position:absolute; top:0; left:0; height:100%; width:0%; background:var(--blue); transition:width 1.4s cubic-bezier(0.4,0,0.2,1) 0.2s; }
.flow.in-view .flow-line-fill{ width:100%; }
.flow-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; z-index:1; }
.flow-step{ text-align:center; }

/* Unter 760 px bricht das Raster auf zwei Spalten um. Die durchgehende
   .flow-line liegt aber absolut auf top:23px und trifft damit nur noch die
   erste Zeile — bei 03 und 04 fehlte die Verbindung ganz. Statt einer Linie
   fuer alles bekommt hier jeder Schritt seinen eigenen Verbinder nach rechts,
   und der letzte je Zeile keinen.

   Die Breite: Abstand zwischen zwei Punktmitten ist Spaltenbreite + 20 px Gap,
   davon gehen zweimal 24 px Punktradius ab — bleibt calc(100% - 28px). */
@media (max-width:760px){
  .flow-steps{ grid-template-columns:1fr 1fr; row-gap:36px; }
  .flow-line{ display:none; }
  .flow-step{ position:relative; }
  .flow-step::after{
    content:""; position:absolute; top:23px; left:calc(50% + 24px);
    width:calc(100% - 28px); height:2px; background:var(--line);
    transition:background-color 0.5s ease;
  }
  /* Jeder zweite Schritt schliesst eine Zeile ab und braucht keinen Verbinder. */
  .flow-step:nth-child(2n)::after{ content:none; }
  .flow.in-view .flow-step::after{ background:var(--blue); }
  .flow.in-view .flow-step:nth-child(1)::after{ transition-delay:0.3s; }
  .flow.in-view .flow-step:nth-child(3)::after{ transition-delay:1.1s; }
}
.flow-dot{ width:48px; height:48px; border-radius:50%; background:#fff; border:2px solid var(--line); color:var(--text-2); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-weight:700; font-family:'Montserrat',sans-serif; font-size:17px; transition:border-color 0.5s ease, color 0.5s ease, background 0.5s ease, transform 0.4s ease; }
.flow.in-view .flow-dot{ border-color:var(--blue); color:#fff; background:var(--blue); }
.flow-step:nth-child(1) .flow-dot{ transition-delay:0.1s; }
.flow-step:nth-child(2) .flow-dot{ transition-delay:0.5s; }
.flow-step:nth-child(3) .flow-dot{ transition-delay:0.9s; }
.flow-step:nth-child(4) .flow-dot{ transition-delay:1.3s; }
.flow-step h3{ font-family:'Montserrat',sans-serif; font-size:16px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.flow-step p{ font-size:13px; color:var(--text-2); }

/* ---------- Final CTA ---------- */
.cta-final{ text-align:center; }
.cta-final h2{ font-size:clamp(28px,4vw,42px); margin-bottom:16px; }
.cta-final p{ color:var(--text-2); max-width:480px; margin:0 auto 34px; font-size:16px; }
.cta-final .hero-ctas{ justify-content:center; }

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-size:13.5px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:8px;
  font-family:'Montserrat',sans-serif; font-size:15px; color:var(--navy); background:#fff;
  transition:border-color 0.15s ease;
}
/* Maus-/Touch-Fokus: nur die Rahmenfarbe, kein Outline-Ring. */
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--blue); outline:none; }
/* Tastaturfokus braucht einen sichtbaren Ring (WCAG 2.4.7). Ohne diese Regel
   gewinnt das obige outline:none durch hoehere Spezifitaet gegen :focus-visible. */
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}
.form-field textarea{ resize:vertical; min-height:130px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.form-consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--text-2); margin:18px 0 22px; }
.form-consent input{ margin-top:3px; }
.form-consent a{ color:var(--blue); text-decoration:underline; }
.form-note{ font-size:12.5px; color:var(--text-2); margin-top:10px; }
.form-status{ padding:14px 16px; border-radius:8px; font-size:14px; margin-bottom:20px; display:none; }
.form-status.show{ display:block; }
.form-status.success{ background:#E7F6EC; color:var(--green); border:1px solid #BEE6CB; }
.form-status.error{ background:#FBE9E9; color:#B3261E; border:1px solid #F3C6C6; }

.contact-info-card{ background:var(--paper-2); border-radius:16px; padding:32px; border:1px solid var(--line); }
.contact-info-card h2{ font-size:19px; margin-bottom:18px; }
.contact-info-row{ display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line); font-size:14.5px; }
.contact-info-row:first-of-type{ border-top:none; padding-top:0; }
.contact-info-row .label{ color:var(--text-2); min-width:90px; }
.contact-info-row a{ color:var(--navy); text-decoration:none; font-weight:600; }
.contact-info-row a:hover{ color:var(--blue); }

/* ---------- Legal / content pages (Impressum, Datenschutz, Cookies, AGB) ---------- */
.legal-content{ max-width:820px; }
.legal-content h2{ font-size:22px; margin-top:44px; margin-bottom:14px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ font-size:17px; margin-top:26px; margin-bottom:10px; }
.legal-content p{ font-size:15.5px; color:var(--text-2); margin-bottom:14px; }
.legal-content ul, .legal-content ol{ margin:0 0 16px 22px; color:var(--text-2); font-size:15.5px; }
.legal-content li{ margin-bottom:8px; }
.legal-content a{ color:var(--blue); text-decoration:underline; }
/* Vierspaltige Tabelle mit langen Zellinhalten (Cookie-Richtlinie): unter
   600 px passte sie nicht mehr und schob die Seite um bis zu 299 px nach
   rechts. Tabellen schrumpfen nicht unter ihre Mindestbreite, deshalb darf
   hier nur die Tabelle selbst scrollen, nie die Seite. display:block ist
   noetig, damit overflow an einem <table> ueberhaupt wirkt. */
.legal-content table{
  width:100%; border-collapse:collapse; margin:18px 0; font-size:14.5px;
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
/* Ab dieser Breite passt die Tabelle wieder und soll sich normal verhalten,
   damit die Spalten gleichmaessig ueber die volle Breite verteilt werden. */
@media (min-width:640px){
  .legal-content table{ display:table; overflow-x:visible; }
}
.legal-content th, .legal-content td{ text-align:left; padding:10px 12px; border:1px solid var(--line); vertical-align:top; }
.legal-content th{ background:var(--paper-2); color:var(--navy); font-weight:600; }
.legal-toc{ background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:20px 24px; margin-bottom:36px; }
.legal-toc p{ font-weight:700; color:var(--navy); margin-bottom:10px; font-size:14px; }
.legal-toc ol{ margin-left:18px; font-size:14px; }
.legal-toc a{ color:var(--navy); text-decoration:none; }
.legal-toc a:hover{ color:var(--blue); text-decoration:underline; }
.company-box{ background:var(--paper-2); border-radius:12px; padding:24px 28px; margin-bottom:32px; border:1px solid var(--line); }
.company-box p{ margin-bottom:4px; color:var(--navy); font-size:15.5px; }
.company-box .muted{ color:var(--text-2); font-size:14px; }

/* ---------- Cookie banner ---------- */
#cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:var(--navy-deep); color:#fff; padding:20px 28px;
  display:none; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  box-shadow:0 -8px 24px rgba(0,0,0,0.18);
}
#cookie-banner.show{ display:flex; }
#cookie-banner p{ font-size:13.5px; color:#CBD8EC; max-width:640px; margin:0; }
#cookie-banner a{ color:#fff; text-decoration:underline; }
#cookie-banner .cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-cookie-accept{ background:var(--blue); color:#fff; border:none; padding:11px 20px; border-radius:8px; font-weight:600; font-size:13.5px; cursor:pointer; }
.btn-cookie-decline{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.4); padding:11px 20px; border-radius:8px; font-weight:600; font-size:13.5px; cursor:pointer; }

/* ---------- 404 page ---------- */
.error-page{ min-height:60vh; display:flex; align-items:center; }
.error-code{ font-family:'Montserrat', sans-serif; font-size:clamp(80px,14vw,160px); font-weight:700; color:var(--blue); line-height:0.9; margin-bottom:8px; }
.error-page h1{ font-size:clamp(24px,3.4vw,32px); margin-bottom:14px; }
.error-page p.lede{ color:var(--text-2); font-size:16px; max-width:480px; margin-bottom:32px; }
.error-links{ display:flex; flex-direction:column; gap:10px; margin-bottom:36px; }
.error-links a{ color:var(--blue); font-weight:600; text-decoration:none; font-size:15px; }
.error-links a:hover{ text-decoration:underline; }

/* ---------- Footer ----------
   Mobil laut Figma gestapelt und zentriert (Logo/Telefon/Icons unterei-
   nander) — Desktop dagegen eine Zeile: Logo links, Telefon mittig, Icons
   rechts (Positionen im CSS-Export: Logo left:80, Icons right am Rand).
   Rechtstexte (Impressum etc.) bleiben trotzdem verlinkt: Pflichtangabe,
   auch wenn das Figma-Mock sie nicht zeigt. */
footer{ padding:56px 0 32px; font-size:13px; color:#C7D6EA; background:var(--navy-deep); text-align:center; }
.footer-inner{ display:flex; flex-direction:column; align-items:center; }
.footer-logo{ margin-bottom:24px; }
.footer-logo img{ height:34px; width:auto; }
.footer-contact{ display:flex; align-items:center; gap:16px; font-family:'Montserrat',sans-serif; font-size:clamp(16px,2vw,20px); font-weight:500; color:#fff; margin-bottom:28px; }
.footer-contact a{ display:inline-flex; align-items:center; gap:9px; color:#fff; text-decoration:none; }
.footer-contact svg{ width:19px; height:19px; flex-shrink:0; }
.footer-contact a:hover{ text-decoration:underline; }
.footer-social{ display:flex; gap:16px; margin-bottom:40px; }
@media (min-width:860px){
  .footer-top{ display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:40px; }
  .footer-logo, .footer-contact, .footer-social{ margin-bottom:0; }
}
.footer-social-icon{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:#fff; border:1px solid rgba(255,255,255,0.3); border-radius:50%; transition:background 0.15s ease, border-color 0.15s ease; }
.footer-social-icon svg{ width:18px; height:18px; }
.footer-social-icon:hover{ background:rgba(255,255,255,0.12); border-color:#fff; }
.footer-bottom{ display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.16); width:100%; }
.footer-bottom > span a{ text-decoration:underline; }
.footer-bottom > span a:hover{ color:#fff; }
.footer-links{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.footer-links a{ color:#C7D6EA; text-decoration:none; }
/* Der Widerruf der Einwilligung ist ein <button>, weil er keine Seite
   aufruft. Optisch soll er sich aber nicht von den Footer-Links abheben. */
.footer-links .footer-linkbtn{
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  font:inherit; color:#C7D6EA; text-decoration:none;
}
.footer-links .footer-linkbtn:hover{ color:#fff; text-decoration:underline; }
.footer-links a:hover{ color:#fff; text-decoration:underline; }

/* Bild im Textfluss der Leistungs- und Branchenseiten. Bricht bewusst aus der
   Lesespalte aus (.legal-content ist schmal), bleibt aber innerhalb des wrap. */
.prose-img{ margin:32px 0; }
.prose-img img{
  display:block; width:100%; height:auto;
  border-radius:12px; border:1px solid var(--line);
}
.prose-img figcaption{ margin-top:10px; font-size:13.5px; color:var(--text-2); }

/* ---------- Accessibility: Skip-Link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px;
  font-size:14px; font-weight:600; text-decoration:none; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* <picture> muss sich wie das <img> darin verhalten (WebP-Fallback-Markup) */
picture{ display:block; }

/* Ergebnissatz auf Referenzkarten — das Wichtigste der Karte */
.ref-result{ margin-top:12px; padding-left:12px; border-left:3px solid var(--blue);
  font-size:15px; color:var(--navy); font-weight:500; }

/* ---------- Reveal-on-scroll (shared JS hook) ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.in-view{ opacity:1; transform:none; }


/* ============================================================
   Projektspezifisch: ar-sales-experts.de (Lead-Magnet-Onepager)
   ============================================================ */

/* Hero-Bild ohne den dunklen Farbverlauf der Vorlage — das Figma-Motiv
   (Laptop-Mockup) ist bereits fertig freigestellt und braucht keinen
   zusaetzlichen Rahmen-Schatten. */
/* max-width knapp unter der nativen Aufloesung des Mockups (682px) —
   groesser gaebe nur Hochskalierungs-Unschaerfe, kleiner liesse die
   breitere Spalte (siehe .hero-grid) ungenutzt. */
.hero-plain-img{ width:100%; max-width:660px; height:auto; display:block; margin:0 auto; }

/* Groesse laut CSS-Export: mobil 20px, Desktop 30px. */
.eyebrow-fire{ font-size:clamp(18px,2.2vw,30px); font-weight:600; color:var(--navy); margin-bottom:16px; display:flex; align-items:center; gap:8px; }

/* Abschnitts-Ueberschriften ohne eigene Klasse (Pain-Points, Benefit-Liste,
   Testimonials) hatten keine Groessenbeschraenkung und erbten nur die
   Basiswerte aus h1,h2,h3 — line-height:1.15 ist fuer eine dreizeilige
   Ueberschrift auf 320-375px zu eng und wirkt gestaucht/schwer lesbar,
   auch ohne dass sie technisch ueberlaeuft. clamp() haelt sie ausserdem im
   Rahmen der uebrigen Section-Ueberschriften (.bonus h2, .cta-final h2). */
/* mobil 28px, Desktop 50px laut CSS-Export (Pain-Points-, Benefit- und
   Testimonial-Ueberschrift identisch). */
.section-h2{ font-size:clamp(24px, 5vw, 50px); line-height:1.3; }

/* ---------- Logo-Leiste ("Unternehmen, mit denen ich zusammengearbeitet habe") ---------- */
.logo-strip{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:48px 0; text-align:center; }
.logo-strip h2{ font-family:'Montserrat',sans-serif; font-size:clamp(18px,2.2vw,32px); font-weight:600; color:var(--gray-label); margin-bottom:32px; }
.logo-strip-row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px 40px; margin-bottom:24px; }
/* Mobil laut Figma EINE Zeile, die seitlich weiterlaeuft (dort ist die
   Logo-Gruppe 784px breit in einem 430px-Rahmen) — also horizontal
   scrollbar statt umzubrechen. Umgebrochen sah es unruhig aus, weil die
   Logos unterschiedlich breit sind und die letzte Zeile halb leer blieb.
   WICHTIG: der Streifen scrollt in sich selbst, nie die Seite — deshalb
   overflow-x nur hier und der negative Aussenrand exakt so gross wie das
   Polster von .wrap, damit die Zeile bis an den Bildschirmrand laeuft und
   trotzdem keine Seitenbreite hinzukommt. */
@media (max-width:900px){
  .logo-strip-row{
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:28px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    margin-left:-28px; margin-right:-28px;
    padding-left:28px; padding-right:28px;
    scrollbar-width:none;              /* Firefox */
  }
  .logo-strip-row::-webkit-scrollbar{ display:none; }
  /* flex-shrink:0 ist Pflicht: sonst quetscht Flexbox die Logos zusammen,
     statt sie ueberlaufen und scrollen zu lassen. */
  .logo-strip-row img{ flex:0 0 auto; height:63px; scroll-snap-align:center; }
}
/* Hoehe laut Figma: 83px am Desktop, 63px mobil (die Logos sind dort
   deutlich groesser als die 34px, die vorher hier standen).
   Graustufen als Standard, volle Farbe beim Hover/Fokus — klassisches
   Logo-Cloud-Muster.
   ACHTUNG: die aktuell ausgelieferten Dateien sind bereits graustufig
   (aus dem Figma-PDF-Export geschnitten, Farb-Originale existieren weder
   auf der Live-Seite noch im WordPress-Backup). grayscale(0) hat deshalb
   noch keinen sichtbaren Effekt — sobald echte Farbdateien unter
   assets/images/logo-*.png liegen, greift der Hover ohne weitere
   Aenderung. */
.logo-strip-row img{ height:clamp(42px,6vw,83px); width:auto; opacity:0.65; filter:grayscale(1); transition:filter 0.25s ease, opacity 0.25s ease; }
.logo-strip-row img:hover, .logo-strip-row img:focus-visible{ filter:grayscale(0); opacity:1; }
.logo-strip-note{ font-size:12.5px; color:var(--gray-note); max-width:640px; margin:0 auto; line-height:1.5; }

/* ---------- Ueber mich ---------- */
.about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
.about-grid > *{ min-width:0; }
.about-photo{ width:100%; height:auto; border-radius:20px; display:block; }
.about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0; }
@media (max-width:560px){ .about-stats{ grid-template-columns:1fr; } }
.about-stat{ background:var(--bg-blue-light); border-radius:12px; padding:18px 14px; text-align:center; }
.about-stat b{ display:block; font-family:'Montserrat',sans-serif; font-size:24px; color:var(--blue); }
.about-name{ font-size:clamp(26px,4vw,40px); }
.about-stat span{ font-size:13px; color:var(--blue); }
.about-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.about-tags span{ background:var(--bg-tag); border:none; border-radius:20px; padding:7px 16px; font-size:13.5px; color:var(--blue); font-weight:500; }

/* Buch-Promo (nur RU, siehe build_about() in seiten.py). Zwei Ebenen Flex:
   die AEUSSERE (.book-promo) darf umbrechen, wenn der Knopf keinen Platz
   mehr neben Cover+Text findet — die INNERE (.book-promo-info) nicht, denn
   Bild und Text sollen nie getrennt uebereinander landen (Kundenwunsch).
   Erst wenn selbst Cover+Text allein nicht mehr nebeneinander passen
   (sehr schmale Handys), greift die eigene, viel kleinere Grenze unten. */
.book-promo{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; margin-top:22px; padding:16px 20px; background:var(--bg-blue-light); border-radius:16px; }
.book-promo-info{ display:flex; align-items:center; gap:16px; flex:1 1 260px; min-width:0; }
.book-promo-cover{ flex-shrink:0; width:90px; height:auto; border-radius:4px; }
@media (max-width:480px){ .book-promo-cover{ width:78px; } }
.book-promo-body{ flex:1 1 auto; min-width:0; }
.book-promo-body b{ display:block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px; color:var(--navy); margin-bottom:4px; }
.book-promo-body p{ font-size:14px; color:var(--text-2); }
.book-promo-cta{ flex-shrink:0; text-decoration:underline; }
@media (max-width:480px){
  .book-promo-cta{ width:100%; justify-content:center; }
}
@media (max-width:360px){
  .book-promo-info{ flex-wrap:wrap; }
}

/* ---------- "Erkennen Sie sich wieder?" — Pain Points ---------- */
.pain-band{ background:var(--blue); color:#fff; border-radius:20px; padding:44px 40px; margin-bottom:0; }
@media (max-width:720px){ .pain-band{ padding:32px 24px; } }
.pain-band h2{ color:#fff; font-size:clamp(26px,4vw,40px); margin-bottom:40px; text-align:center; }
/* Zwei geteilte Zeilen (Ueberschrift / Beschreibung): die Spalten geben ihre
   Zeilenhoehen per subgrid an die Items weiter. Dadurch beginnt die
   Beschreibung in ALLEN vier Spalten auf derselben Linie — egal ob die
   Ueberschrift ein-, zwei- oder dreizeilig umbricht (im Figma stehen sie auf
   einer Linie). Eine feste min-height waere hier untauglich: die Zeilenzahl
   haengt an Spaltenbreite UND Sprache (DE bricht anders um als RU). */
.pain-band-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:auto auto; gap:32px 24px; align-items:start; }
@media (max-width:820px){ .pain-band-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .pain-band-grid{ grid-template-columns:1fr; } }
/* Icon steht laut Figma NEBEN dem Text (Icon 45x45 auf left:80, Text auf
   left:140), nicht darueber. */
/* row-gap:0 ist Pflicht: ein subgrid uebernimmt sonst den row-gap des
   Elterngitters (hier 32px) auch ZWISCHEN Ueberschrift und Beschreibung —
   die 32px sollen aber nur zwischen den Eintraegen stehen, innerhalb eines
   Eintrags regelt das margin-bottom der Ueberschrift den Abstand. */
.pain-band-item{ display:grid; grid-template-columns:45px 1fr; column-gap:15px; row-gap:0; grid-row:span 2; grid-template-rows:subgrid; }
.pain-band-icon{ grid-column:1; grid-row:1; display:flex; align-items:flex-start; justify-content:center; }
.pain-band-icon img{ width:auto; height:auto; }
.pain-band-item b{ grid-column:2; grid-row:1; font-size:clamp(18px,1.6vw,24px); font-weight:600; line-height:1.25; margin-bottom:8px; }
.pain-band-item p{ grid-column:2; grid-row:2; font-size:clamp(15px,1.4vw,20px); line-height:1.25; color:#fff; margin:0; }
/* Fallback fuer Browser ohne subgrid: normales Flex-Layout, dann steht die
   Beschreibung wieder je Spalte unterschiedlich hoch — funktional, nur
   nicht auf einer Linie. */
@supports not (grid-template-rows: subgrid){
  .pain-band-item{ display:flex; gap:15px; align-items:flex-start; flex-wrap:wrap; }
  .pain-band-icon{ flex-shrink:0; }
  .pain-band-item b{ flex:1 1 100%; }
  .pain-band-item p{ flex:1 1 100%; padding-left:60px; }
}
/* Ohne Trennlinie und in Teal, 24px — laut Figma (die border-top hier war
   eine Zutat aus der Vorlage, im Design gibt es sie nicht). */
.pain-band-note{ text-align:center; margin-top:40px; font-size:clamp(17px,1.7vw,24px); color:var(--teal); }

/* Zwei Spalten: links Eyebrow + Ueberschrift + Karten, rechts das Foto
   (Figma: Foto auf left:911 NEBEN der Ueberschrift auf left:79, nicht
   darunter). Mobil laut Figma umgekehrt gestapelt: Foto zuerst. */
.pain-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media (max-width:860px){
  .pain-grid{ grid-template-columns:1fr; gap:32px; }
  .pain-photo{ order:-1; }
}
.pain-grid > *{ min-width:0; }
.pain-cards{ display:flex; flex-direction:column; gap:20px; margin-top:32px; }
/* border-radius laut Figma auf ALLEN Ecken 25px — auch links, wo die
   5px-Teal-Kante sitzt (vorher waren die linken Ecken eckig). */
.pain-card{ background:var(--bg-card); border-left:5px solid var(--teal); border-radius:25px; padding:20px; }
.pain-card h3{ font-size:clamp(18px,1.6vw,24px); font-weight:600; color:var(--blue); margin-bottom:10px; line-height:1.25; }
.pain-card p{ font-size:clamp(15px,1.4vw,20px); color:var(--text); margin:0; line-height:1.25; }
.pain-photo{ border-radius:25px; overflow:hidden; }
.pain-photo img{ width:100%; display:block; }
/* Kein Kasten mehr: laut Figma freistehender, zentrierter Text —
   Aussage fett (24px/600), Nachsatz normal (20px/400) darunter. */
.pain-stat{ margin-top:56px; text-align:center; font-size:clamp(18px,1.7vw,24px); color:var(--text); font-weight:600; line-height:1.25; }
.pain-stat-sub{ margin-top:12px; text-align:center; font-size:clamp(15px,1.4vw,20px); color:var(--text); font-weight:400; }

/* ---------- "Was Sie erwartet" — Benefit-Checkliste ---------- */
.benefit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px; }
@media (max-width:760px){ .benefit-grid{ grid-template-columns:1fr; } }
.benefit-card{ background:var(--blue); color:#fff; border-radius:14px; padding:22px 24px; display:flex; gap:14px; }
.benefit-card .check{ flex-shrink:0; width:24px; height:24px; border-radius:50%; border:2px solid var(--teal); color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.benefit-card h3{ color:#fff; font-size:16px; margin-bottom:5px; font-family:'Montserrat',sans-serif; font-weight:700; }
.benefit-card p{ color:#DCE9FB; font-size:14px; margin:0; }
.benefit-proof{ text-align:center; margin-top:40px; font-size:16px; color:var(--navy); font-weight:600; max-width:640px; margin-left:auto; margin-right:auto; }

/* ---------- Testimonials ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{ min-width:0; border:1px solid var(--line); border-radius:12px; padding:26px 24px; display:flex; flex-direction:column; }
.testi-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.testi-stars{ color:#F5A623; font-size:15px; letter-spacing:2px; }
.testi-card p{ font-size:14.5px; color:var(--text-2); flex-grow:1; margin-bottom:20px; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-avatar{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; flex-shrink:0; }
.testi-name{ font-weight:700; color:var(--navy); font-size:14.5px; }
.testi-role{ font-size:12.5px; color:var(--text); }

/* ---------- Opt-in / Lead-Magnet CTA (Teaser auf der Seite; das Formular
   selbst steckt im Dialog weiter unten, siehe .guide-modal) ---------- */
/* Vollbreite Farbflaeche laut Figma (Rectangle 3125 ueber die ganze
   Frame-Breite), nicht die abgerundete Karte mit Rand der Vorlage.
   Die umgebende <section> darf dann kein eigenes Polster mehr beisteuern,
   sonst steht die Flaeche in einem weissen Rahmen. */
.optin-section{ padding:0; }
.optin{ background:var(--blue); color:#fff; margin:0; padding:80px 0; text-align:center; }
@media (max-width:720px){ .optin{ padding:56px 0; } }
.optin .eyebrow{ color:var(--teal); font-size:clamp(17px,1.7vw,24px); }
.optin h2{ color:#fff; font-size:clamp(26px,4vw,50px); line-height:1.5; margin-bottom:24px; max-width:1120px; margin-left:auto; margin-right:auto; }
.optin > .wrap > p{ color:#fff; max-width:1000px; margin:0 auto 40px; font-size:clamp(15px,1.5vw,20px); font-weight:500; }
/* Laut Figma steht dieser Zwischentitel in Grossbuchstaben (text-transform),
   nicht nur normaler Satz. */
.optin-uppercase{ text-transform:uppercase; letter-spacing:0.02em; }
.optin-boxes{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:1200px; margin:0 auto 40px; text-align:left; }
@media (max-width:820px){ .optin-boxes{ grid-template-columns:1fr; } }
/* Kasten laut Figma: 2px Teal-Rand, radius 25, Icon links NEBEN dem Text. */
.optin-box{ display:flex; gap:12px; align-items:flex-start; border:2px solid var(--teal); border-radius:25px; padding:20px; }
.optin-box-icon{ flex-shrink:0; width:26px; height:26px; color:var(--teal); }
.optin-box-icon svg{ width:100%; height:100%; }
.optin-box b{ display:block; color:#fff; font-size:clamp(17px,1.6vw,24px); font-weight:600; margin-bottom:10px; line-height:1.25; }
.optin-box span{ color:#fff; font-size:clamp(15px,1.4vw,20px); line-height:1.25; }
/* Knopf: 510x60 laut Figma, Pillenform. */
.optin > .wrap > .btn-primary{ display:block; width:100%; max-width:510px; margin:0 auto; padding:17px 24px; font-size:clamp(16px,1.4vw,20px); justify-content:center; }
/* Kleine Zusicherung unter dem Knopf (16px laut Figma). */
.optin-note{ margin-top:20px; font-size:16px; font-weight:500; color:#fff; }
/* Der CTA-Button in diesem Abschnitt ist laut Live-Seite teal statt blau —
   einzige Stelle im Projekt mit dieser Variante. */
.optin .btn-primary{ background:var(--teal); }
.optin .btn-primary:hover{ background:#5cb3c0; }

/* ---------- Leitfaden-Dialog (natives <dialog>) ----------
   Helles Formular laut Figma (weiss, schwarze Labels, umrandete Felder) —
   nutzt dieselben .form-field/.form-consent-Klassen wie eine klassische
   Kontaktseite, nicht die dunkle .optin-Optik der Teaser-Section auf der
   Seite selbst. dialog[open] zentriert sich per UA-Stylesheet selbst
   (position:fixed, inset:0, margin:auto) — "position" hier NICHT
   ueberschreiben. margin:auto aber explizit wiederholen: der globale
   Reset oben (*{margin:0}) hat eine Author-Regel und schlaegt die
   UA-Regel gleicher Spezifitaet, sonst rutscht der Dialog nach oben links. */
dialog.guide-modal{
  margin:auto; border:none; border-radius:20px; padding:40px 36px;
  background:#fff; color:var(--text); max-width:440px; width:92vw;
  box-shadow:0 24px 60px rgba(0,28,69,0.28);
}
dialog.guide-modal::backdrop{ background:rgba(0,28,69,0.55); }
@media (max-width:480px){ dialog.guide-modal{ padding:36px 24px; } }
.guide-modal-title{ font-size:22px; margin:0 40px 24px 0; }
.guide-modal-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px;
  border-radius:50%; border:none; background:var(--paper-2);
  color:var(--navy); font-size:20px; line-height:1; cursor:pointer;
}
.guide-modal-close:hover{ background:var(--line); }
.guide-modal .req{ color:#B3261E; margin-left:2px; }
.guide-modal .form-consent{ font-size:12.5px; }
.guide-modal button[type="submit"]{ width:100%; justify-content:center; margin-top:4px; }