/* ==========================================================================
   Mittelstand Media – Stylesheet (Runde 6)
   Reines CSS, kein Framework. Mobile-first. Breakpoints: 640 / 860 / 1024 / 1180.
   Farben, Schriften und Grundstil aus Runde 3 bleiben (Warmweiß, Beige,
   Hellblau, Buttons Blau, Akzent Coral, Oswald + Inter).
   ========================================================================== */

:root {
  --coral: #E86149;
  --coral-dunkel: #cf4c34;
  --coral-text: #b8432c; /* AA-Kontrast für kleinen Text auf Hell */
  --blau: #5273FF;
  --blau-dunkel: #3d5ce0;
  --schwarz: #1A1A1A; /* neutrales Schwarz: Schrift, Fußzeile, dunkle Abschnitte */
  --schwarz-tief: #11141D; /* kühles Blauschwarz für dunkle Karten */
  --grau: #716B64; /* AA auf Warmweiß und Beige */
  --grau-hell: #cfc9c1;
  --warmweiss: #FAF8F5;
  --beige: #F2EFEA;
  --beige-dunkel: #ECE9E4;
  --blau-flaeche: #EEF1FF;
  --hell: #F2EFEA;
  --line: #E2DDD5;
  --line-dunkel: rgba(255,255,255,0.12);
  --weiss: #FFFFFF;
  --font: 'Inter', Arial, Helvetica, sans-serif;
  --font-headline: 'Oswald Variable', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --maxbreite: 1180px;
  --radius: 20px;
  --schatten: 0 30px 70px -20px rgba(43, 41, 38, 0.16);
  --schatten-weich: 0 20px 45px -18px rgba(43, 41, 38, 0.12);
  --dauer-kurz: 0.2s;
  --dauer: 0.45s;
  --kurve: cubic-bezier(0.22, 1, 0.36, 1); /* kräftiges Ausklingen (K018) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px;
  --header-hoehe: 78px;
  --abschnitt: clamp(56px, 8vh, 96px); /* einheitlicher Abstand aller Abschnitte (F14) */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dauer-kurz: 0.001s; --dauer: 0.001s; }
}

/* ---- Fonts (lokal, keine externe Verbindung) ---- */
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oswald Variable'; src: url('/fonts/Oswald-Variable.woff2') format('woff2-variations'); font-weight: 200 700; font-style: normal; font-display: swap; }

/* ---- Reset & Grundlagen ---- */
* { box-sizing: border-box; }
.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; }
/* overflow-x: clip statt hidden: schneidet seitlich ab, macht html/body aber nicht zum
   Scroll-Kasten. Mit hidden blieben mitlaufende Elemente (position: sticky) nicht stehen. */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--schwarz);
  background: var(--warmweiss);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.nav-gesperrt { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-variation-settings: 'wght' 650;
  letter-spacing: 0.005em;
  line-height: 1.14;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 4.4vw, 4.4rem); line-height: 1.18; letter-spacing: 0.01em; }
h2 { font-size: clamp(1.9rem, 2.8vw, 2.7rem); letter-spacing: 0.012em; }
h3 { font-size: 1.35rem; font-variation-settings: 'wght' 600; text-transform: none; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; font-variation-settings: 'wght' 600; text-transform: none; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
button, input, textarea, select { font-family: var(--font); } /* K179 */

/* Fließtext-Links im Inhalt (K103) */
.text-link, .rechtstext a, .karte p a, .kontakt-vertrauen p a, .faq-antwort a { color: var(--coral-text); text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover, .rechtstext a:hover { color: var(--coral-dunkel); }

/* ---- Fokus & Barrierefreiheit ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--schwarz); color: var(--weiss); padding: 12px 20px; z-index: 1000; border-radius: 0 0 6px 0; }
.skip-link:focus { left: 0; }

/* ---- Scroll-Einblendung (K018: gestaffelt in Gruppen, kräftiges Ausklingen) ---- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.reveal.ist-sichtbar { opacity: 1; transform: translateY(0); }
.reveal-verzoegert-1 { transition-delay: 0.06s; }
.reveal-verzoegert-2 { transition-delay: 0.12s; }
.reveal-verzoegert-3 { transition-delay: 0.18s; }
.reveal-verzoegert-4 { transition-delay: 0.24s; }
/* Raster: Kinder um je 60 ms versetzt, höchstens sechs Stufen */
.reveal-gruppe > .reveal:nth-child(2) { transition-delay: 0.06s; }
.reveal-gruppe > .reveal:nth-child(3) { transition-delay: 0.12s; }
.reveal-gruppe > .reveal:nth-child(4) { transition-delay: 0.18s; }
.reveal-gruppe > .reveal:nth-child(5) { transition-delay: 0.24s; }
.reveal-gruppe > .reveal:nth-child(n+6) { transition-delay: 0.30s; }

/* Sofort-Einblendung im Hero (nur Dachzeile, Besetzungsversprechen, Text, Button; die Headline läuft per Zeilen-Maske) */
.hero-eintritt { animation: hero-eintritt 0.7s var(--kurve) both; }
.hero-eintritt.verzoegert { animation-delay: 0.12s; }
.hero-eintritt.verzoegert-2 { animation-delay: 0.24s; }
@keyframes hero-eintritt {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-eintritt { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Feine Körnung für große dunkle Flächen ---- */
.koernung { position: relative; isolation: isolate; }
.koernung::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 2px 2px;
  z-index: 0;
}
.koernung > * { position: relative; z-index: 1; }

/* ---- Layout-Helfer ---- */
.container { max-width: var(--maxbreite); margin: 0 auto; padding: 0 20px; }
section { padding: var(--abschnitt) 0; }
.section-hell { background: var(--hell); }
.section-blau { background: var(--blau-flaeche); }
.section-dunkel { background: var(--schwarz); color: var(--weiss); }
.section-dunkel h2, .section-dunkel h3 { color: var(--weiss); }
.zentriert { text-align: center; }
/* Fließtext nie breiter als gut lesbar (K087) */
.text-block { max-width: 680px; margin: 0 auto; }
.text-block p { color: var(--schwarz); }
.text-zweispalter { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-12); align-items: start; }
.text-zweispalter h2 { margin-bottom: var(--sp-4); }

.problem-abschluss { margin-top: var(--sp-16); padding-top: var(--sp-16); border-top: 1px solid var(--line); text-align: center; }
.grosses-zitat {
  font-family: var(--font-headline);
  font-variation-settings: 'wght' 650; /* K037: wie Überschriften */
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.15;
  text-align: center;
  max-width: 24ch; /* K037: zweizeilig */
  margin: 0 auto var(--sp-6);
  color: var(--schwarz);
}
.section-dunkel .grosses-zitat { color: var(--weiss); }
[data-scroll-text] .st-wort { transition: opacity 0.18s linear; }
.kopf-zentriert { max-width: 680px; margin: 0 auto var(--sp-12); text-align: center; }
.kopf-zentriert p { color: var(--grau); text-wrap: balance; } /* kein einzelnes Wort in der letzten Zeile */
.kopf-zentriert.kopf-kompakt { margin-bottom: var(--sp-8); }

.label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral-text);
  margin-bottom: var(--sp-3);
}
.section-dunkel .label { color: var(--coral); }

/* Schlagwort-Kapseln (K092, Über mich) */
.kapseln { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-6) 0; }
.kapsel {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--schwarz);
  background: var(--weiss);
}
.kapseln-zentriert { justify-content: center; }

/* ---- Buttons (K015: kein Magnet, sauberes Feedback) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s ease, background var(--dauer-kurz) ease, border-color var(--dauer-kurz) ease, color var(--dauer-kurz) ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--blau);
  color: var(--weiss);
  font-size: 1.2rem; /* WCAG-Großtext-Ausnahme für Weiß auf Blau */
  font-weight: 700;
  position: relative;
}
.btn-primary::after { content: "→"; display: inline-block; margin-left: var(--sp-1); transition: transform var(--dauer-kurz) ease; }
.btn-sekundaer { background: transparent; border-color: var(--line); color: var(--schwarz); }
.section-dunkel .btn-sekundaer, .cta-streifen .btn-sekundaer { border-color: rgba(255,255,255,0.35); color: var(--weiss); }
.btn-groß { padding: 16px 34px; font-size: 1.2rem; }
.btn-block { width: 100%; }
.btn-telefon { gap: var(--sp-2); }
.btn-telefon svg { flex-shrink: 0; }

.link-pfeil {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: 600;
  color: var(--coral-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: var(--sp-1);
  transition: gap var(--dauer-kurz) ease, border-color var(--dauer-kurz) ease;
}
.link-pfeil::after { content: "→"; transition: transform var(--dauer-kurz) ease; }
.section-dunkel .link-pfeil { color: var(--weiss); }

/* Hover nur für Geräte mit Maus (K017) */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn:hover:active { transform: scale(0.97); }
  .btn-primary:hover { background: var(--blau-dunkel); }
  .btn-primary:hover::after { transform: translateX(4px); }
  .btn-sekundaer:hover { border-color: var(--schwarz); }
  .section-dunkel .btn-sekundaer:hover, .cta-streifen .btn-sekundaer:hover { border-color: var(--weiss); }
  .link-pfeil:hover { gap: var(--sp-3); border-color: var(--coral-text); }
  .section-dunkel .link-pfeil:hover { border-color: var(--weiss); }
  .krumen a:hover { color: var(--coral-text); text-decoration: underline; }
  .hauptnav a:hover { border-bottom-color: var(--coral); }
  .nav-dropdown-item:hover { background: var(--warmweiss); }
  .branche-kachel:hover img { transform: scale(1.06); }
  .branche-kachel:hover .branche-kachel-pfeil { background: var(--coral); }
  .branche-karte:hover img { transform: scale(1.04); }
  .branche-karte:hover .branche-karte-pfeil { background: var(--coral); color: var(--weiss); }
  .fusszeile a:hover { color: var(--weiss); }
  .hero-demo:not(.ist-raeumlich):hover .browser { transform: translateY(-3px); }
  .marquee-item:hover { color: var(--weiss); text-decoration: underline; text-underline-offset: 4px; }
}

/* ---- Kopfzeile / Navigation ---- */
.kopfleiste {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 500;
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dauer-kurz) ease;
}
.kopfleiste.ist-gescrollt { box-shadow: 0 8px 24px rgba(26,26,26,0.08); }
/* Durchscheinendes Material: der Inhalt läuft weichgezeichnet unter der Kopfzeile durch */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .kopfleiste { background: rgba(255,255,255,0.82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
  .kopfleiste.nav-offen { background: rgba(255,255,255,0.97); }
}
@media (prefers-reduced-transparency: reduce) {
  .kopfleiste { background: var(--weiss); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.kopfleiste-innen {
  max-width: var(--maxbreite);
  margin: 0 auto;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  transition: padding var(--dauer-kurz) ease;
}
.kopfleiste.ist-gescrollt .kopfleiste-innen { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
/* Logo mit Slogan (Runde 6b, Adams Wunsch). Höhe so, dass der Schriftzug so breit bleibt wie vorher ohne Slogan */
.logo { flex-shrink: 0; display: block; height: 40px; }
.logo-img { height: 40px; width: auto; max-width: none; display: block; }
@media (max-width: 640px) {
  .logo, .logo-img { height: 37px; }
}

/* Abstände so, dass die Kopfzeile bei voller Breite im Raster (1180 px) bleibt */
.hauptnav { display: flex; align-items: center; gap: 13px; margin-left: auto; }
.hauptnav a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--schwarz);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--dauer-kurz) ease, border-color var(--dauer-kurz) ease;
}
.hauptnav a[aria-current="page"] { border-bottom-color: var(--coral); }
.hauptnav-mobil-aktionen { display: none; }

/* Leistungen-Dropdown (K001, K002: ohne Bilder, Umbruch erlaubt) */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-dropdown-toggle {
  background: none; border: 0; padding: 6px 4px; margin-left: -2px; cursor: pointer; color: var(--schwarz);
  display: flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px;
}
.nav-dropdown-toggle svg { transition: transform var(--dauer-kurz) ease; }
.nav-item:hover .nav-dropdown-toggle svg, .nav-item:focus-within .nav-dropdown-toggle svg, .nav-dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: 100%; left: 50%;
  margin-top: 14px;
  background: var(--weiss);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--schatten-weich);
  padding: var(--sp-2);
  width: 300px;
  display: grid;
  gap: var(--sp-1);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity var(--dauer-kurz) ease, transform var(--dauer-kurz) ease, visibility var(--dauer-kurz);
  z-index: 20;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.nav-dropdown-offen .nav-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.hauptnav .nav-dropdown-item {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: 10px 12px; border-radius: 10px; color: var(--schwarz); border-bottom: 0; white-space: normal;
  transition: background var(--dauer-kurz) ease;
}
.nav-dropdown-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  background: var(--blau-flaeche); color: var(--coral-text);
  display: flex; align-items: center; justify-content: center;
}
.nav-dropdown-item strong { display: block; font-size: 0.92rem; line-height: 1.3; }
.nav-dropdown-item small { display: block; font-size: 0.8rem; color: var(--grau); margin-top: 2px; line-height: 1.4; }

.kopf-aktionen { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.kopf-telefon {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 600; font-size: 0.95rem; color: var(--schwarz); white-space: nowrap;
  min-height: 44px; padding: 0 var(--sp-2); border-radius: 8px;
}
.kopf-telefon svg { flex-shrink: 0; }
.kopf-aktionen .btn-primary { padding: 12px 16px; font-size: 0.95rem; line-height: 1.2; }

/* Menü-Knopf: 44 px, Striche drehen zum Kreuz (K007, K008) */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--schwarz);
  flex-shrink: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: currentColor; position: relative; border-radius: 2px;
  transition: transform 0.15s ease, opacity 0.15s ease, top 0.15s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.kopfleiste.nav-offen .nav-toggle span { background: transparent; }
.kopfleiste.nav-offen .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.kopfleiste.nav-offen .nav-toggle span::after { top: 0; transform: rotate(-45deg); }
.nav-abdunkler {
  position: fixed; inset: 0; z-index: 490;
  background: rgba(17, 20, 29, 0.35);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
body.nav-gesperrt .nav-abdunkler { opacity: 1; visibility: visible; }

.inhalt-ohne-hero { display: block; padding-top: calc(var(--header-hoehe) + var(--sp-16)); }
#branchen, #ablauf, #faq, #kosten, #statistik { scroll-margin-top: var(--header-hoehe); }

/* ---- Mobile Bottom-CTA (K005: Schatten nur sichtbar, leichter; K031: erst nach dem Hero-Button) ---- */
.mobil-cta {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 480;
  text-align: center;
  background: var(--blau);
  color: var(--weiss);
  font-weight: 700;
  font-size: 1.2rem;
  padding: 14px 16px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 20px rgba(0,0,0,0.12);
  transform: translateY(110%);
  transition: transform 0.25s var(--kurve), box-shadow 0.25s ease;
}
.mobil-cta.ist-sichtbar { transform: translateY(0); }
.mobil-cta:not(.ist-sichtbar) { box-shadow: none; }

/* ---- Breadcrumb-Zeile im Hero (K004) ---- */
.krumen { margin-bottom: var(--sp-4); }
.krumen ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; font-size: 0.8rem; color: var(--grau); line-height: 1.5; }
.krumen li { display: flex; align-items: center; }
.krumen li:not(:last-child)::after { content: "/"; margin: 0 8px; color: var(--line); }
.krumen a { color: var(--grau); padding: 6px 0; }
.krumen [aria-current="page"] { color: var(--schwarz); font-weight: 500; }
.kopf-zentriert .krumen ol { justify-content: center; }

/* ---- Hero ----
   .hero          kompakte Grundform: Kopfzeile + Luft, Höhe = Inhalt (alle Inhaltsseiten)
   .hero-voll     füllt ab 1024 px den Bildschirm (Startseite, Recruiting, Webseiten), Inhalt
                  muss ab 1280 × 720 vollständig sichtbar sein. Höchstens 900 px hoch, damit
                  auf hohen Bildschirmen kein großer Leerraum über dem Inhalt entsteht */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--blau-flaeche) 0%, var(--warmweiss) 70%);
  color: var(--schwarz);
  padding: calc(var(--header-hoehe) + var(--sp-12)) 0 var(--sp-12);
}
.hero-voll { display: flex; flex-direction: column; justify-content: center; padding-bottom: var(--sp-8); }
@media (min-width: 1024px) and (min-height: 700px) {
  .hero-voll { min-height: min(100svh, 900px); padding-top: calc(var(--header-hoehe) + 24px); }
}
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; }
.hero-eyebrow { font-size: 0.95rem; font-weight: 600; color: var(--grau); margin-bottom: clamp(6px, 1.2vh, 12px); letter-spacing: 0.01em; }
.hero h1 { color: var(--schwarz); font-size: clamp(2.2rem, 3vw + 1.2vh, 3.9rem); margin-bottom: clamp(10px, 1.8vh, 18px); }
.hero-kompakt h1 { font-size: clamp(2rem, 3.2vw, 3.4rem); }
.hero h1 .coral { color: var(--coral); }
/* Zeile mit dem Besetzungsversprechen: „Besetzungsversprechen:“ als Marke in Oswald, der Satz dahinter gut lesbar in Inter */
.hero-garantie {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--schwarz);
  border-left: 3px solid var(--coral);
  padding: 2px 0 2px var(--sp-3);
  margin: 0 0 clamp(12px, 2vh, 22px);
  max-width: 46ch;
}
.hero-garantie strong {
  font-family: var(--font-headline); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.03em; font-size: 1.1em; color: var(--coral-text); margin-right: 0.3em;
}
/* Dezenter Link „Bedingungen ansehen“ neben der Kurzform, springt zu /faq#besetzungsversprechen */
.garantie-link, .karte p a.garantie-link { font-size: 0.875em; color: var(--grau); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.garantie-link:hover, .karte p a.garantie-link:hover { color: var(--coral-text); }
.garantie-kasten .garantie-link { font-size: 1em; color: var(--weiss); }
.garantie-kasten .garantie-link:hover { color: var(--coral); }
/* Fußnote unter der Kurzform: eigene Zeile, klein */
.garantie-fussnote { display: block; font-size: 0.875em; color: var(--grau); margin-top: 2px; }
.garantie-fussnote .garantie-link { font-size: 1em; margin-left: 0.4em; }
.hero-text { font-size: 1.125rem; color: var(--schwarz); margin-bottom: clamp(10px, 1.6vh, 16px); max-width: 48ch; line-height: 1.6; } /* K029: 18 px */
.hero-kompakt .hero-text { color: var(--grau); }
.hero-unterzeile { font-size: 0.875rem; color: var(--grau); margin-top: var(--sp-3); max-width: 46ch; } /* 14 px */
.hero-fussnote { font-size: 0.8rem; color: var(--grau); margin-top: var(--sp-4); max-width: 52ch; }
.hero-fussnote-mobil { display: none; }
.hero-cta { margin-top: clamp(12px, 2.2vh, 24px); }
.hero-cta-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); }
.hero-cta-telefon { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--schwarz); min-height: 44px; }
.hero-bild-wrapper { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; }
.hero-bild-wrapper img, .hero-bild-wrapper .bild-platzhalter { border-radius: var(--radius); box-shadow: var(--schatten); width: 100%; }
.hero-bild-wrapper img { filter: saturate(0.93) contrast(1.05) brightness(1.02); }
/* Branchenseiten: Hochformat 4:5, feste Größe, unabhängig von der Headline-Länge (K118, K136) */
.hero-branche-bild { max-width: 440px; margin: 0 auto; width: 100%; }
.hero-branche-bild img, .hero-branche-bild .bild-platzhalter { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.bild-gross { overflow: hidden; border-radius: var(--radius); }
.bild-gross img { width: 100%; }

/* Hero-Beweis der Startseite: Browser + Handy + eine Karte (K025, K026, K032) */
.hero-demo-wrapper { position: relative; width: 100%; max-width: 560px; margin: 0 auto; padding: 0 0 56px; }
.hero-demo-label {
  display: inline-block;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--grau); background: var(--weiss); border: 1px solid var(--line);
  padding: 5px 12px; border-radius: 100px; margin-bottom: var(--sp-3);
}
.hero-demo { position: relative; display: block; }
.hero-demo .browser { width: 84%; transition: transform var(--dauer) var(--kurve); }
.hero-demo .iphone { position: absolute; right: 0; bottom: -44px; width: 30%; }
.hero-demo-karte {
  position: absolute; left: -4%; bottom: -30px;
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--weiss); border-radius: 14px; padding: 10px 14px;
  box-shadow: var(--schatten-weich);
  font-size: 0.8rem; line-height: 1.35; color: var(--schwarz); max-width: 230px;
  z-index: 3;
}
.hero-demo-karte strong { font-weight: 600; }
/* Die Benachrichtigung trifft kurz nach dem Laden ein, mit leichtem Nachfedern wie auf dem Handy */
.hero-demo-karte { animation: karte-ankunft 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s both; }
@keyframes karte-ankunft { from { opacity: 0; transform: translateY(18px) scale(0.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-demo-karte { animation: none; } }
.hero-demo-karte-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--coral); display: flex; align-items: center; justify-content: center; }
@media (min-width: 1024px) {
  .hero-voll .hero-demo-wrapper { max-width: min(560px, 74vh); }
}

/* Recruiting-Hero: großes Handy mit Anzeige, zweites versetzt dahinter (K086) */
/* Zwei gleich große Handys, das hintere nach links und etwas nach unten versetzt.
   Alle Maße beziehen sich auf die Breite von .hero-handys (kein padding in %, das würde sich
   auf die Spalte beziehen und die beiden Handys unterschiedlich groß machen).
   Der Abstand unter dem vorderen Handy fängt den Versatz des hinteren auf. */
.hero-handys { position: relative; display: flow-root; width: 100%; max-width: 460px; margin: 0 auto; }
.hero-handys .iphone-vorn { position: relative; z-index: 2; width: 54%; margin: 0 0 6.5% 33%; }
.hero-handys .iphone-hinten { position: absolute; left: 13%; top: 5.5%; width: 54%; z-index: 1; opacity: 0.92; } /* beide Handys zusammen stehen mittig: 13 % Rand links und rechts */
@media (min-width: 1024px) {
  .hero-voll .hero-handys { max-width: min(460px, 62vh); }
}

/* ---- Platzhalter-Bilder (Bild folgt) ---- */
.bild-platzhalter {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--beige-dunkel);
  border: 1px dashed #d8d2c8;
  border-radius: var(--radius);
  color: var(--grau);
  font-size: 0.85rem; font-weight: 500;
  padding: var(--sp-4);
  width: 100%;
  overflow: hidden;
}
.bild-platzhalter span { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 240px; line-height: 1.3; }
.bild-platzhalter small { font-size: 0.62rem; font-weight: 400; color: #9a938a; word-break: break-all; }
.iphone .bild-platzhalter { border-radius: 0; border: 0; height: 100%; }
.branche-kachel .bild-platzhalter, .branche-karte .bild-platzhalter, .browser .bild-platzhalter, .ig-post-motiv .bild-platzhalter { border-radius: 0; border: 0; }

/* ---- Der eine Handy-Rahmen (iPhone 17 Pro) ----
   Gehäuse 71,9 × 150,0 mm, Bildschirm 1206 × 2622 px. Alle Maße in cqw
   (Prozent der Rahmenbreite): Rand 3,5 %, Gehäuse-Radius 11,5 %, Bildschirm-Radius 8,4 %,
   Dynamic Island 31 % der Bildschirmbreite, Home-Indicator 35 %. */
.iphone { container-type: inline-size; width: 100%; max-width: 320px; margin: 0 auto; }
.iphone-gehaeuse {
  position: relative;
  aspect-ratio: 71.9 / 150;
  padding: 3.5cqw;
  border-radius: 11.5cqw;
  background: linear-gradient(160deg, #4a4744 0%, #26241f 40%, #1b1917 100%);
  box-shadow:
    0 0 0 0.4cqw #0f0e0d,
    inset 0 0 0 0.35cqw rgba(255,255,255,0.10),
    0 30px 70px -22px rgba(43,41,38,0.45);
  box-sizing: border-box;
}
.iphone-bildschirm {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 8.4cqw;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 0.3cqw #000;
}
.iphone-bildschirm > img, .iphone-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.iphone-screen-html { position: absolute; inset: 0; overflow: hidden; background: #fff; display: flex; flex-direction: column; padding-top: 11cqw; }
.iphone-insel {
  position: absolute; top: 3cqw; left: 50%; transform: translateX(-50%);
  width: 28.8cqw; height: 8.4cqw;
  background: #000; border-radius: 100px; z-index: 6;
}
.iphone-home {
  position: absolute; bottom: 2.2cqw; left: 50%; transform: translateX(-50%);
  width: 32.5cqw; height: 1.4cqw;
  background: rgba(0,0,0,0.45); border-radius: 100px; z-index: 6;
}
.iphone-dunkel .iphone-home { background: rgba(255,255,255,0.7); }
/* Heller Auslauf am unteren Bildschirmrand, damit der Balken nicht quer über dem Inhalt liegt */
.iphone-bildschirm::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7cqw; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.96) 60%);
}
/* Statusleiste (9:41, Empfang, WLAN, Akku) für gebaute Ansichten, wie in den Bildschirmfotos */
.iphone-status {
  position: absolute; top: 0; left: 0; right: 0; height: 11cqw; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2.2cqw 8cqw 0 10cqw; color: #111; font: 600 4.4cqw/1 var(--font); letter-spacing: -0.01em;
}
.iphone-status-icons { display: flex; align-items: center; gap: 1.5cqw; }
.iphone-status-icons svg { height: 3.4cqw; width: auto; display: block; }
/* Tasten am Gehäuse (Aktionstaste, Lauter, Leiser links; Seitentaste, Kamerasteuerung rechts) */
.iphone-taste { position: absolute; background: #2a2825; border-radius: 1cqw; box-shadow: inset 0 0 0 0.2cqw rgba(255,255,255,0.08); }
.iphone-taste-aktion { left: -1cqw; top: 18.5%; width: 1.2cqw; height: 4.2%; }
.iphone-taste-lauter { left: -1cqw; top: 25.5%; width: 1.2cqw; height: 7.4%; }
.iphone-taste-leiser { left: -1cqw; top: 34.5%; width: 1.2cqw; height: 7.4%; }
.iphone-taste-seite { right: -1cqw; top: 28%; width: 1.2cqw; height: 11.5%; }
.iphone-taste-kamera { right: -0.8cqw; top: 55%; width: 1cqw; height: 6.5%; }

/* ---- Browser-Rahmen für Desktop-Screenshots ---- */
.browser { background: var(--weiss); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--schatten); }
.browser-leiste { display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: var(--beige); border-bottom: 1px solid var(--line); }
.browser-leiste > span { width: 8px; height: 8px; border-radius: 50%; background: #d8d2c8; }
/* Adressfeld als echte Kapsel (vorher erbte es den runden Punkt der drei Fensterknöpfe) */
.browser-leiste > .browser-adresse {
  margin-left: var(--sp-2); font-size: 0.68rem; line-height: 1; color: var(--grau); background: var(--weiss);
  border: 1px solid var(--line); border-radius: 100px; padding: 0 12px; flex: 1; min-width: 0;
  height: 22px; width: auto; display: flex; align-items: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-inhalt img { width: 100%; display: block; }
.browser-inhalt .bild-platzhalter { border-radius: 0; }

/* Schaufenster: Browser mit Handy rechts unten (Demo-Block, Referenz) */
.demo-schaufenster, .referenz-bild { position: relative; padding: 0 8% 40px 0; }
.demo-schaufenster .iphone, .referenz-bild .iphone { position: absolute; right: 0; bottom: 0; width: 34%; max-width: 200px; }

/* ---- Karten / Grids ---- */
.karten-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); }
.karten-grid-3 { grid-template-columns: repeat(3, 1fr); }
.karten-grid-2 { grid-template-columns: repeat(2, 1fr); }
.karte { background: var(--weiss); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6); }
.karte h3 { margin-bottom: var(--sp-2); }
.karte p { color: var(--grau); }
.karte-nummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--coral); color: var(--weiss); font-weight: 700; font-size: 0.9rem; margin-bottom: var(--sp-4);
}
.karte-liste { margin-top: var(--sp-4); }
.karte-liste li { position: relative; padding-left: var(--sp-6); margin-bottom: var(--sp-2); font-size: 0.95rem; color: var(--schwarz); }
.karte-liste li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.haken-liste li { position: relative; padding-left: 30px; margin-bottom: var(--sp-3); }
.haken-liste li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* Leistungsumfang: Desktop Karten, Handy kompakte Haken-Liste ohne Rahmen (K091) */
.umfang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.umfang-punkt { background: var(--weiss); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6); }
.umfang-punkt h3 { margin-bottom: var(--sp-2); font-size: 1.2rem; }
.umfang-punkt p { color: var(--grau); margin: 0; }

/* Leistungs-Übersicht: zwei gleich gebaute Karten (K080, K081) */
.leistungswahl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.leistungswahl { display: flex; flex-direction: column; }
.leistungswahl-bild { display: flex; align-items: center; justify-content: center; background: var(--beige); border-radius: 14px; height: 360px; margin-bottom: var(--sp-6); overflow: hidden; padding: var(--sp-6); }
.leistungswahl-bild .iphone { max-width: 150px; }
.leistungswahl-bild .browser { width: 100%; max-width: 380px; }
.leistungswahl .karte-liste { margin-bottom: var(--sp-6); }
.leistungswahl > p:last-child { margin-top: auto; }
.leistungswahl-beides { margin-top: var(--sp-6); text-align: center; color: var(--grau); }

/* ---- Branchen ---- */
.branchen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.branche-kachel { position: relative; border-radius: var(--radius); overflow: hidden; display: block; aspect-ratio: 4/3; background: var(--beige-dunkel); }
.branche-kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--kurve); filter: saturate(0.93) contrast(1.05) brightness(1.02); }
.branche-kachel .bild-platzhalter { position: absolute; inset: 0; height: 100%; }
.branche-kachel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,18,20,0.86), rgba(18,18,20,0.04) 60%); z-index: 1; }
.branche-kachel-titel {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  color: var(--weiss); font-family: var(--font-headline); text-transform: uppercase; font-size: 1rem; z-index: 2;
}
.branche-kachel-titel .kurz { display: none; }
/* Pfeil immer sichtbar (K056) */
.branche-kachel-pfeil {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.25s ease;
}
/* Branchen-Übersicht: vier Karten je Reihe, Berufe als Zeile, Pfeil (K107, K108) */
.branchengruppe-titel { font-size: 1.1rem; margin-bottom: var(--sp-6); }
.branchengruppe-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.branchengruppe-zwei .branchengruppe-titel { grid-column: 1 / -1; }
.branchen-liste { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.branchen-liste-zwei { grid-template-columns: repeat(2, 1fr); }
.branche-karte { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; background: var(--weiss); }
.branche-karte-bild { aspect-ratio: 4/3; overflow: hidden; background: var(--beige-dunkel); }
.branche-karte img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.5s var(--kurve); }
.branche-karte .bild-platzhalter { height: 100%; }
.branche-karte-inhalt { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.branche-karte-inhalt h3 { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: 0; font-size: 1.15rem; }
.branche-karte-pfeil { width: 28px; height: 28px; border-radius: 50%; background: var(--blau-flaeche); color: var(--coral-text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.9rem; transition: background 0.25s ease, color 0.25s ease; }
.branche-karte-inhalt p { color: var(--grau); font-size: 0.9rem; margin: 0; }

/* ---- Ablauf (Schritte) ---- */
.ablauf-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: var(--sp-12); align-items: start; }
.ablauf-uebersicht { position: sticky; top: 110px; }
/* Mit Skript wandert die Karte mit dem Fortschritt (js/main.js), sonst klebt sie oben */
.ablauf-uebersicht.wandert { position: static; }
.ablauf-uebersicht.wandert .ablauf-uebersicht-karte { will-change: transform; }
.ablauf-uebersicht-karte { background: var(--weiss); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--schatten-weich); padding: var(--sp-8); }
.ablauf-uebersicht-label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grau); margin-bottom: var(--sp-3); }
.ablauf-uebersicht-nummer { display: block; font-family: var(--font-headline); font-size: 2.6rem; color: var(--coral-text); line-height: 1; margin-bottom: var(--sp-2); }
.ablauf-uebersicht-karte h3 { margin-bottom: var(--sp-3); }
.ablauf-uebersicht-karte p { color: var(--grau); margin-bottom: var(--sp-6); }
.ablauf-uebersicht-karte h3, .ablauf-uebersicht-karte p { transition: height 0.35s var(--kurve); } /* Höhe setzt js/main.js beim Textwechsel */
.ablauf-uebersicht-karte .btn { font-size: 1.05rem; padding-left: 16px; padding-right: 16px; }
.ablauf-aufwand { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 0.85rem; font-weight: 600; color: var(--coral-text); background: var(--blau-flaeche); border-radius: 100px; padding: 4px 12px; margin-top: var(--sp-3); }
.zeitstrahl-inhalt .ablauf-aufwand { margin-top: var(--sp-4); }

/* ---- Über mich ---- */
.ueber-mich-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-12); align-items: center; }
.ueber-mich-foto { position: relative; }
.ueber-mich-foto img { display: block; border-radius: var(--radius); box-shadow: var(--schatten); width: 100%; }
@media (min-width: 1025px) { .ueber-mich-grid .ueber-mich-foto img { max-height: 560px; width: auto; } }
.ueber-mich-badge {
  position: absolute; z-index: 2; right: 16px; bottom: -22px; /* K064: im Raster, unten rechts am Foto */
  width: 132px; background: var(--weiss); border: 1px solid var(--line); border-radius: 10px;
  padding: var(--sp-2); box-shadow: var(--schatten-weich); text-align: center; transform: rotate(3deg);
}
.ueber-mich-badge img { border-radius: 6px; aspect-ratio: 3/4; object-fit: cover; margin-bottom: var(--sp-1); box-shadow: none; }
.ueber-mich-badge span { display: block; font-size: 0.68rem; font-weight: 600; color: var(--schwarz); padding-bottom: var(--sp-1); }
.ueber-mich-seite-hero { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-12); align-items: center; }
.ueber-mich-seite-hero .hero-text { color: var(--schwarz); }
.ueber-mich-seite-foto { position: relative; order: -1; } /* Foto links, Text rechts */
.ueber-mich-seite-foto img { display: block; width: 100%; border-radius: var(--radius); box-shadow: var(--schatten); }
@media (min-width: 1025px) { .ueber-mich-seite-foto img { max-height: 520px; width: auto; margin: 0 auto; } }
.ueber-mich-fakten { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-6) 0; } /* K159 */
.ueber-mich-fakt { border: 1px solid var(--line); border-radius: 100px; padding: 6px 16px; font-size: 0.82rem; font-weight: 600; color: var(--schwarz); background: var(--weiss); }

/* ---- Drei Dinge / USP (K062: Ziffern statt Icons) ---- */
.usp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.usp-grid > div { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 0; }
.usp-grid > div > * { align-self: start; }
.usp-ziffer { font-family: var(--font-headline); font-variation-settings: 'wght' 650; font-size: 3rem; line-height: 1; color: var(--coral); margin-bottom: var(--sp-4); }
.usp-grid h3 { margin-bottom: var(--sp-2); }
.usp-grid p { color: var(--grau); }

/* ---- FAQ (K067, K171: weiche Aufklapp-Animation) ---- */
.faq-grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-12); align-items: start; }
.faq-liste { max-width: 780px; margin: 0 auto; }
.faq-grid .faq-liste { max-width: none; margin: 0; }
.faq-karte { background: var(--weiss); border-radius: var(--radius); padding: 8px 32px; box-shadow: var(--schatten-weich); border: 1px solid var(--line); }
.faq-gruppe-titel { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral-text); margin: var(--sp-8) 0 var(--sp-2); }
.faq-karte .faq-gruppe-titel:first-child { margin-top: var(--sp-4); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-of-type { border-bottom: none; }
.faq-item[id] { scroll-margin-top: calc(var(--header-hoehe) + 16px); }
.faq-item summary {
  padding: 18px 4px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); list-style: none;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-zeichen { position: relative; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--blau-flaeche); }
.faq-zeichen::before, .faq-zeichen::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--coral); border-radius: 2px;
  transition: transform 0.25s var(--kurve), opacity 0.25s ease;
}
.faq-zeichen::before { width: 10px; height: 2px; transform: translate(-50%, -50%); }
.faq-zeichen::after { width: 2px; height: 10px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-zeichen::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item[open] .faq-zeichen::before { transform: translate(-50%, -50%) rotate(180deg); }
.faq-antwort { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.28s var(--kurve), opacity 0.22s ease; }
.faq-antwort-innen { overflow: hidden; }
.faq-antwort p { padding: 0 4px 20px; color: var(--grau); margin: 0; }
.faq-antwort p + p { padding-top: 0; }
.faq-item.ist-offen .faq-antwort { grid-template-rows: 1fr; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .faq-antwort, .faq-zeichen::before, .faq-zeichen::after { transition: none; } }

/* ---- Kosten und Besetzungsversprechen (F2, F4) ---- */
.kosten-garantie-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-bottom: var(--sp-6); }
.kosten-karte { position: relative; }
.kosten-karte-nummer { display: block; font-family: var(--font-headline); font-variation-settings: 'wght' 650; font-size: 2rem; line-height: 1; color: var(--coral); margin-bottom: var(--sp-3); }
.garantie-kasten { background: var(--schwarz-tief); color: var(--weiss); border-radius: var(--radius); padding: var(--sp-8); display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-8); align-items: center; }
.garantie-kasten-kopf { display: flex; flex-direction: column; align-items: center; grid-row: span 2; min-width: 130px; }
.garantie-zahl { font-family: var(--font-headline); font-variation-settings: 'wght' 650; font-size: 4.6rem; line-height: 1; color: var(--coral); }
.garantie-kasten-titel { font-family: var(--font-headline); text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.04em; }
.garantie-kasten-zusatz { margin-top: var(--sp-2); font-size: 0.78rem; line-height: 1.35; color: var(--grau-hell); text-align: center; max-width: 130px; }
.garantie-kasten p { margin: 0; font-size: 1.05rem; }
.garantie-kasten-klein { color: var(--grau-hell); font-size: 0.9rem !important; }
.kosten-garantie-fuss { max-width: 760px; margin: var(--sp-6) auto 0; text-align: center; color: var(--grau); }

/* ---- Referenz ---- */
.referenz-grid { align-items: center; }
.referenz .label { color: var(--coral-text); }

/* ---- Kontaktseite: Formular in Karte, Kasten daneben (K173, K180, K181) ---- */
.hero-kontakt { padding-bottom: var(--sp-16); }
.kontakt-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-12); align-items: start; margin-top: var(--sp-8); }
.kontakt-formular-karte { background: var(--weiss); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-8); box-shadow: var(--schatten-weich); }
.kontakt-vertrauen { background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6); }
.kontakt-vertrauen h3 { margin-bottom: var(--sp-3); }
.kontakt-vertrauen h3 + h3, .kontakt-vertrauen .karte-liste + h3 { margin-top: var(--sp-8); } /* K178 */
.kontakt-vertrauen p { color: var(--grau); }
.kontakt-person { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line); }
.kontakt-person img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex-shrink: 0; } /* K177 */
.kontakt-person strong { display: block; font-size: 0.98rem; }
.kontakt-person span { display: block; font-size: 0.85rem; color: var(--grau); }
.kontakt-anruf { margin: var(--sp-4) 0 0; }
.kontakt-anruf .btn { width: 100%; font-size: 1.05rem; }
.kontakt-anruf-zeiten { display: block; text-align: center; font-size: 0.85rem; color: var(--grau); margin-top: var(--sp-2); }
.kontakt-whatsapp { margin-top: var(--sp-4); }
/* Grüner WhatsApp-Knopf: Dunkelgrün, damit weiße Schrift gut lesbar bleibt */
.btn-whatsapp { background: #0d7a37; border-color: #0d7a37; color: var(--weiss); gap: var(--sp-2); font-size: 1.05rem; }
.btn-whatsapp svg { flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) { .btn-whatsapp:hover { background: #0a652d; border-color: #0a652d; color: var(--weiss); } }
.kontakt-whatsapp-oben { display: none; }
.danke-schnell { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-4); }
.kontakt-person-mobil { display: none; }

/* ---- Formular ---- */
.formular { max-width: 640px; margin: 0 auto; }
.formular-feld { margin-bottom: var(--sp-4); }
.formular-feld label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: var(--sp-1); }
.formular-feld input, .formular-feld textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1px solid #cfc9c1; border-radius: 8px;
  font-family: var(--font); font-size: 1rem; background: var(--weiss); color: var(--schwarz);
  transition: border-color var(--dauer-kurz) ease, box-shadow var(--dauer-kurz) ease;
}
.formular-feld input:focus, .formular-feld textarea:focus { border-color: var(--blau); box-shadow: 0 0 0 1px var(--blau); outline: none; }
.formular-feld input:user-invalid { border-color: var(--coral); }
.formular-hinweis { font-size: 0.85rem; color: var(--grau); margin-top: var(--sp-3); }
.formular-honeypot { position: absolute; left: -9999px; top: -9999px; }
.meldung { padding: 16px 18px; border-radius: 8px; margin-bottom: var(--sp-6); font-size: 0.95rem; scroll-margin-top: calc(var(--header-hoehe) + 16px); }
.meldung-fehler { background: #fdecea; border: 1px solid var(--coral); color: var(--coral-dunkel); }
.meldung-fehler a { color: inherit; text-decoration: underline; }

/* ---- Rechtstexte ---- */
.rechtstext { max-width: 760px; margin: 0 auto; }
.rechtstext h2 { margin-top: var(--sp-8); font-size: 1.3rem; font-family: var(--font); font-weight: 700; text-transform: none; letter-spacing: normal; scroll-margin-top: calc(var(--header-hoehe) + 16px); }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { font-size: 1.05rem; margin-top: var(--sp-6); font-family: var(--font); font-weight: 600; }
.rechtstext p { color: var(--schwarz); }
.rechtstext ul { margin: 0 0 16px; padding-left: var(--sp-4); list-style: disc; }
.rechtstext li { margin-bottom: var(--sp-2); }
.rechtstext .stand { color: var(--grau); font-size: 0.9rem; margin-top: var(--sp-8); }
.rechtstext-kurz { background: var(--blau-flaeche); border-radius: 14px; padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-8); }
.rechtstext-kurz h2 { margin-top: 0; font-size: 1.05rem; }
.rechtstext-kurz ul { margin: 0; }
.sprungmarken { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-8); padding: 0; list-style: none; }
.sprungmarken li { margin: 0; }
.sprungmarken a { display: inline-block; font-size: 0.85rem; padding: 6px 12px; border: 1px solid var(--line); border-radius: 100px; background: var(--weiss); color: var(--schwarz); text-decoration: none; }
.rechtstext-hero { padding-top: calc(var(--header-hoehe) + var(--sp-8)); }

/* ---- CTA-Streifen ---- */
.cta-streifen { position: relative; overflow: hidden; background: var(--schwarz-tief); color: var(--weiss); border-radius: 24px; padding: var(--sp-16) var(--sp-12); text-align: center; isolation: isolate; }
.cta-streifen h2 { color: var(--weiss); position: relative; z-index: 1; }
.cta-streifen p { color: var(--grau-hell); margin-bottom: var(--sp-6); position: relative; z-index: 1; max-width: 56ch; margin-left: auto; margin-right: auto; }
.cta-streifen .btn { position: relative; z-index: 1; }
.cta-streifen-telefon { margin-top: var(--sp-5); margin-bottom: 0 !important; font-size: 0.95rem; }
.cta-streifen-telefon a { color: var(--weiss); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; display: inline-block; min-height: 44px; line-height: 44px; }

/* ---- Footer (K070, K072 bis K075: ruhig, ohne Claim und Button) ---- */
.fusszeile { background: var(--schwarz); color: #cfcfcf; padding: var(--sp-16) 0 var(--sp-6); }
.fusszeile-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--sp-8); padding-bottom: var(--sp-8); border-bottom: 1px solid rgba(255,255,255,0.15); }
.fusszeile-logo { display: inline-block; margin-bottom: var(--sp-4); }
.fusszeile-logo img { width: auto; height: 48px; }
.fusszeile-marke p { font-size: 0.95rem; max-width: 34ch; }
.fusszeile h3 { color: var(--weiss); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-3); }
.fusszeile li { font-size: 0.92rem; }
.fusszeile li a { display: inline-block; padding: 8px 0; } /* K075: 44 px Tippfläche */
.fusszeile li:not(:has(a)) { padding: 6px 0; }
.fusszeile-zeiten { color: var(--grau-hell); font-size: 0.85rem !important; }
.fusszeile-unten { padding-top: var(--sp-6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); font-size: 0.85rem; }
.fusszeile-unten a { color: var(--grau-hell); text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }

/* ---- 404 (K194 bis K196) ---- */
.fehlerseite { padding: var(--sp-16) 0; text-align: center; max-width: 560px; margin: 0 auto; }
.fehlerseite .code { font-family: var(--font-headline); font-variation-settings: 'wght' 650; font-size: 6rem; line-height: 1; color: var(--coral); margin-bottom: var(--sp-2); }
.fehlerseite-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ---- Danke-Seite (K183 bis K185) ---- */
.danke-box { max-width: 600px; margin: 0 auto; text-align: center; padding: var(--sp-12) 0; }
.danke-haken { width: 64px; height: 64px; border-radius: 50%; background: var(--blau); color: var(--weiss); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.danke-weiter { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-8); text-align: left; }
.danke-weiter a { display: block; background: var(--weiss); border: 1px solid var(--line); border-radius: 14px; padding: var(--sp-4); font-size: 0.92rem; }
.danke-weiter a strong { display: block; margin-bottom: 2px; }
.danke-weiter a span { color: var(--grau); font-size: 0.85rem; }

/* ---- Branchen-Laufband (K034, K035: Namen klickbar, keine tote Hover-Regel) ---- */
.marquee-sektion { padding: var(--sp-5) 0; background: var(--blau); border-top: 1px solid var(--line-dunkel); border-bottom: 1px solid var(--line-dunkel); overflow: hidden; }
.marquee-vorwort { display: none; }
.marquee { display: flex; width: max-content; animation: marquee-lauf 38s linear infinite; }
.marquee-gruppe { display: flex; align-items: center; flex-shrink: 0; }
.marquee-item {
  display: inline-flex; align-items: center; gap: var(--sp-3); padding: 8px 30px;
  font-family: var(--font-headline); font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--weiss); white-space: nowrap;
}
.marquee-item .punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); flex-shrink: 0; }
@keyframes marquee-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }

/* ---- Kennzahlen (K045 bis K047): zwei Zusagen, zwei Zahlen mit Quelle ----
   Jede Kennzahl ist eine dunkle Karte mit kleinem Schaubild. Am Desktop stehen vier Karten nebeneinander,
   auf dem Handy werden sie zum Kartenstapel (siehe unten bei max-width 640px). Mit Skript (.kz-bereit)
   füllen sich die Schaubilder passend zum Scrollstand: js/main.js setzt die Klasse .an auf die Teile.
   Ohne Skript und bei reduzierter Bewegung stehen die Karten fertig da. */
.kennzahlen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); counter-reset: kz; }
.kennzahlen-gruppe { display: contents; }
.kennzahl {
  counter-increment: kz;
  position: relative; text-align: center; color: var(--weiss);
  background: radial-gradient(120% 70% at 50% 0%, rgba(232, 97, 73, 0.22), rgba(232, 97, 73, 0) 62%), linear-gradient(180deg, #232838 0%, var(--schwarz-tief) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 24px;
  padding: 20px 18px 26px;
  box-shadow: 0 30px 60px -28px rgba(17, 20, 29, 0.6);
  display: flex; flex-direction: column;
}
.kennzahl-art { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); margin: 0; white-space: nowrap; }
.kennzahl-art::after { content: "0" counter(kz) " / 04"; color: rgba(255, 255, 255, 0.36); font-variant-numeric: tabular-nums; }
.kennzahl-zahl { display: flex; align-items: baseline; justify-content: center; gap: var(--sp-1); font-family: var(--font-headline); font-variation-settings: 'wght' 650; font-size: clamp(3rem, 4.6vw, 4.2rem); font-variant-numeric: tabular-nums; color: var(--coral); line-height: 1; }
.kennzahl-einheit { font-size: 0.42em; font-weight: 600; margin-left: var(--sp-1); }
.kennzahl-label { margin: var(--sp-3) auto 0; color: rgba(255, 255, 255, 0.86); font-size: 0.95rem; line-height: 1.5; max-width: 30ch; }
.kennzahl-quelle { margin-top: var(--sp-8); text-align: center; color: var(--grau); font-size: 0.8rem; max-width: 720px; margin-left: auto; margin-right: auto; }
.kennzahl-quelle a { color: var(--coral-text); text-decoration: underline; text-underline-offset: 3px; }
.kz-bild { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 84px; margin: var(--sp-6) 0 var(--sp-2); }
/* 5–8 Bewerbungen: acht Personen, fünf sicher, drei weitere blasser */
.kz-bewerbungen { flex-direction: row; gap: 5px; }
.kz-person { flex: 0 1 30px; aspect-ratio: 1; border-radius: 50%; background: var(--coral); display: flex; align-items: center; justify-content: center; }
.kz-person svg { width: 62%; height: 62%; fill: var(--weiss); }
.kz-person-bis { background: rgba(232, 97, 73, 0.42); }
/* 60 Tage: zwölf Abschnitte zu je fünf Tagen füllen sich */
.kz-tage { align-items: stretch; width: 100%; max-width: 270px; margin-left: auto; margin-right: auto; }
.kz-tage-balken { display: flex; gap: 4px; }
.kz-tage-balken span { flex: 1; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); position: relative; overflow: hidden; }
.kz-tage-balken span::before { content: ""; position: absolute; inset: 0; background: var(--coral); transform-origin: left center; }
.kz-tage-skala { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.5); }
/* 6-stellig: sechs Stellen eines Euro-Betrags */
.kz-stellen { flex-direction: row; gap: 5px; }
.kz-euro { font-family: var(--font-headline); font-size: 1.9rem; line-height: 1; color: var(--coral); margin-right: 4px; }
.kz-stelle { width: clamp(19px, 1.85vw, 26px); height: 38px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); position: relative; overflow: hidden; }
.kz-stelle::before { content: ""; position: absolute; inset: 0; background: var(--coral); transform-origin: center bottom; }
.kz-trenner { width: 5px; height: 38px; font-size: 0; position: relative; }
.kz-trenner::before { content: ""; position: absolute; left: 0; bottom: 1px; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
/* 27 von 33: Punkteraster */
.kz-punkte { display: grid; grid-template-columns: repeat(11, 13px); gap: 6px; align-content: center; justify-content: center; }
.kz-punkte span { width: 13px; height: 13px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); position: relative; }
.kz-punkte .kz-an::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--coral); }
/* Mit Skript: Karte und Teile hängen am Scrollstand */
.kz-bereit .kennzahl { transition: none; will-change: transform, opacity; }
.kz-bereit .kz-person { transition: opacity 0.35s var(--kurve), transform 0.35s var(--kurve); }
.kz-bereit .kz-tage-balken span::before, .kz-bereit .kz-stelle::before, .kz-bereit .kz-punkte .kz-an::before { transition: opacity 0.3s var(--kurve), transform 0.3s var(--kurve); }
.kz-bereit .kz-person:not(.an) { opacity: 0; transform: translateY(10px) scale(0.9); }
.kz-bereit .kz-tage-balken span:not(.an)::before { transform: scaleX(0); }
.kz-bereit .kz-stelle:not(.an)::before { transform: scaleY(0); }
.kz-bereit .kz-punkte .kz-an:not(.an)::before { opacity: 0; transform: scale(0.9); }

/* Große Fotos fahren beim Scrollen leicht heraus (js/main.js) */
[data-zoom-foto] { overflow: hidden; border-radius: var(--radius); }
[data-zoom-foto] img { will-change: transform; }

/* Hero-Schaufenster am Desktop: neigt sich leicht zur Maus (js/main.js), Handy und Karte stehen räumlich davor */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .hero-demo-wrapper { perspective: 1400px; }
  .hero-demo.ist-raeumlich { transform-style: preserve-3d; will-change: transform; }
  .hero-demo.ist-raeumlich .iphone { transform: translateZ(46px); }
  .hero-demo.ist-raeumlich .hero-demo-karte { transform: translateZ(70px); }
}

/* ---- Instagram-Anzeige als HTML (Ersatz, solange Adams Bild fehlt) ---- */
.ig-post { position: relative; width: 100%; min-width: 220px; background: #fff; font-family: var(--font); color: var(--schwarz); text-align: left; container-type: inline-size; }
.ig-post-beispiel-badge { position: absolute; top: 8px; right: 8px; z-index: 6; background: rgba(255,255,255,0.92); border: 1px solid var(--line); color: var(--grau); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 100px; }
.iphone .ig-post-beispiel-badge { display: none; }
.ig-post-kopf { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 6px; }
.ig-post-wortmarke { font-family: var(--font-headline); font-size: 1rem; letter-spacing: 0.01em; }
.ig-post-kopf-icons { display: flex; gap: 12px; color: var(--schwarz); }
.ig-post-profil { display: flex; align-items: center; gap: 8px; padding: 2px 12px 8px; }
.ig-post-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #23443A, #E39A3B); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-headline); font-size: 0.68rem; }
.ig-post-profil-text { display: flex; flex-direction: column; line-height: 1.25; }
.ig-post-profil-text strong { font-size: 0.78rem; font-weight: 600; }
.ig-post-profil-text span { font-size: 0.68rem; color: var(--grau); }
.ig-post-mehr { margin-left: auto; color: var(--grau); font-size: 1rem; }
.ig-post-motiv { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--schwarz-tief); }
.ig-post-motiv img, .ig-post-motiv .bild-platzhalter { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-post-motiv img { filter: saturate(0.95) contrast(1.05); }
.ig-post-motiv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,14,13,0.72) 0%, rgba(15,14,13,0.05) 45%); pointer-events: none; }
.ig-post-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22%; min-width: 40px; max-width: 58px; aspect-ratio: 1; border-radius: 50%; background: #E39A3B; box-shadow: 0 8px 20px rgba(0,0,0,0.3); z-index: 2; display: flex; align-items: center; justify-content: center; }
.ig-post-headline { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; margin: 0; color: #fff !important; font-family: var(--font-headline); text-transform: uppercase; font-size: clamp(0.68rem, 8.4cqw, 1.2rem); line-height: 1.15; }
.ig-post-cta { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--blau-dunkel); color: #fff; font-weight: 600; font-size: 0.8rem; padding: 10px; text-decoration: none; }
.ig-post-aktionen { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; color: var(--schwarz); }
.ig-post-aktion-icons { display: flex; align-items: center; gap: 13px; }
.ig-post-caption { padding: 0 12px 12px; font-size: 0.76rem; line-height: 1.4; margin: 0; }
.ig-post-caption strong { font-weight: 600; }
.ig-post-karte { width: 100%; max-width: 340px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten-weich); }
.iphone-screen-html .ig-post { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.iphone-screen-html .ig-post-motiv { flex: 1; aspect-ratio: auto; min-height: 0; }
/* Im Handy-Rahmen wächst und schrumpft die Anzeige mit dem Rahmen (cqw = Prozent der
   Bildschirmbreite). So wird in kleinen Rahmen nichts abgeschnitten (K083). */
.iphone-screen-html .ig-post-kopf { padding: 3.6cqw 5cqw 2.5cqw; }
.iphone-screen-html .ig-post-wortmarke { font-size: 6.6cqw; }
.iphone-screen-html .ig-post-kopf-icons { gap: 5cqw; }
.iphone-screen-html .ig-post-kopf-icons svg { width: 7.6cqw; height: auto; }
.iphone-screen-html .ig-post-profil { gap: 3.3cqw; padding: 0.8cqw 5cqw 3.3cqw; }
.iphone-screen-html .ig-post-avatar { width: 12.5cqw; height: 12.5cqw; font-size: 4.4cqw; }
.iphone-screen-html .ig-post-profil-text strong { font-size: 5.2cqw; }
.iphone-screen-html .ig-post-profil-text span { font-size: 4.5cqw; }
.iphone-screen-html .ig-post-mehr { font-size: 6.6cqw; }
.iphone-screen-html .ig-post-play { top: 38%; width: 20%; min-width: 0; }
.iphone-screen-html .ig-post-headline { left: 5.5cqw; right: 5.5cqw; bottom: 5cqw; font-size: 6.9cqw; }
.iphone-screen-html .ig-post-cta { font-size: 5.3cqw; padding: 4cqw; gap: 2.5cqw; }
.iphone-screen-html .ig-post-aktionen { padding: 3.7cqw 5cqw; }
.iphone-screen-html .ig-post-aktion-icons { gap: 5.4cqw; }
.iphone-screen-html .ig-post-aktion-icons svg { width: 8.6cqw; height: auto; }
.iphone-screen-html .ig-post-merken { width: 6.6cqw; height: auto; }
.iphone-screen-html .ig-post-caption { padding: 0 5cqw 5cqw; font-size: 5cqw; }

/* ---- Mail-Ansicht als HTML (Ersatz für Funnel-Schritt 4, K041, K042) ---- */
.mail-app { background: #fff; font-family: var(--font); color: var(--schwarz); text-align: left; }
.mail-app-nav { padding: 8px 16px; border-bottom: 1px solid var(--line); }
.mail-app-zurueck { font-size: 0.85rem; color: var(--blau-dunkel); font-weight: 500; }
.mail-app-kopf { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 8px; }
.mail-app-avatar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--blau-dunkel); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-headline); font-size: 0.9rem; }
.mail-app-kopf-text { min-width: 0; flex: 1; }
.mail-app-absender { font-size: 0.85rem; margin: 0; }
.mail-app-an { font-size: 0.75rem; color: var(--grau); margin: 1px 0 0; }
.mail-app-datum { font-size: 0.72rem; color: var(--grau); white-space: nowrap; }
.mail-app-betreff { font-size: 0.95rem; font-weight: 600; margin: 0; padding: 0 16px 10px; border-bottom: 1px solid var(--line); }
.mail-app-body { padding: 12px 16px 16px; }
.mail-app-body > p { font-size: 0.85rem; margin: 0 0 10px; }
.mail-app-felder { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; }
.mail-app-felder li { font-size: 0.85rem; display: flex; gap: 8px; }
.mail-app-felder span:first-child { color: var(--grau); min-width: 96px; flex-shrink: 0; }
.mail-app-felder span:last-child { font-weight: 600; }
.mail-app-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.mail-app-btn { font-size: 0.8rem; font-weight: 600; padding: 9px 14px; border-radius: 8px; }
.mail-app-btn-anrufen { background: var(--blau-dunkel); color: #fff; }
.mail-app-btn-whatsapp { background: #0d7a37; color: #fff; }
.mail-app-naechste { margin: 14px 12px 0; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--warmweiss); border-radius: 10px 10px 0 0; }
.mail-app-naechste strong { display: block; font-size: 0.82rem; }
.mail-app-naechste span { font-size: 0.75rem; color: var(--grau); }
.mail-app-karte { max-width: 340px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten-weich); }
/* Absender, Betreff und Text der Mail bleiben dunkel, egal in welchem Abschnitt die Mail steht */
.mail-app .mail-app-absender, .mail-app .mail-app-betreff, .mail-app .mail-app-body > p { color: var(--schwarz); }
/* Im Handy-Rahmen skaliert die Mail mit dem Rahmen (cqw = Prozent der Rahmenbreite) */
.iphone-screen-html .mail-app-nav { padding: 3cqw 5.5cqw; }
.iphone-screen-html .mail-app-zurueck { font-size: 4.6cqw; }
.iphone-screen-html .mail-app-kopf { gap: 3.5cqw; padding: 5cqw 5.5cqw 3cqw; }
.iphone-screen-html .mail-app-avatar { width: 13cqw; height: 13cqw; font-size: 4.8cqw; }
.iphone-screen-html .mail-app-absender { font-size: 4.6cqw; }
.iphone-screen-html .mail-app-an { font-size: 4cqw; }
.iphone-screen-html .mail-app-datum { font-size: 3.8cqw; }
.iphone-screen-html .mail-app-betreff { font-size: 5.1cqw; padding: 0 5.5cqw 3.5cqw; }
.iphone-screen-html .mail-app-body { padding: 4cqw 5.5cqw 5.5cqw; }
.iphone-screen-html .mail-app-body > p { font-size: 4.6cqw; margin-bottom: 3.5cqw; }
.iphone-screen-html .mail-app-felder { gap: 2.5cqw; margin-bottom: 5cqw; }
.iphone-screen-html .mail-app-felder li { font-size: 4.6cqw; gap: 3cqw; }
.iphone-screen-html .mail-app-felder span:first-child { min-width: 30cqw; }
.iphone-screen-html .mail-app-aktionen { gap: 3cqw; }
.iphone-screen-html .mail-app-btn { font-size: 4.3cqw; padding: 3.2cqw 5cqw; border-radius: 3cqw; }
.iphone-screen-html .mail-app-naechste { margin: 5cqw 4cqw 0; padding: 4cqw 5cqw; }
.iphone-screen-html .mail-app-naechste strong { font-size: 4.4cqw; }
.iphone-screen-html .mail-app-naechste span { font-size: 4cqw; }

/* ---- Ablauf-Zeitstrahl (G08: Linie exakt synchron zum aktiven Schritt, per JS in px gesetzt) ---- */
.zeitstrahl { position: relative; max-width: 820px; margin: 0 auto; --zs-links: 27px; }
.zeitstrahl::before { content: ""; position: absolute; left: var(--zs-links); top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.zeitstrahl-fortschritt { position: absolute; left: var(--zs-links); top: 8px; width: 2px; height: 0; background: var(--coral); }
.zeitstrahl-schritt { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-6); padding-bottom: var(--sp-12); }
.zeitstrahl-schritt:last-child { padding-bottom: 0; }
.zeitstrahl-punkt {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
  background: var(--weiss); border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-headline); font-size: 1.3rem; color: var(--grau);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.zeitstrahl-schritt.ist-aktiv .zeitstrahl-punkt, .zeitstrahl-schritt.ist-erledigt .zeitstrahl-punkt { border-color: var(--coral); background: var(--coral); color: var(--weiss); }
.zeitstrahl-schritt.ist-aktiv .zeitstrahl-punkt { transform: scale(1.08); }
.zeitstrahl-inhalt { padding-top: var(--sp-2); }
.zeitstrahl-inhalt p { color: var(--grau); }
/* Zeitstrahl mit Skript (.zs-bereit): Ein leuchtender Kopf fährt die Linie entlang. Erreicht er einen Schritt,
   springt der Punkt an (Ring läuft nach außen) und der Inhalt baut sich Zeile für Zeile auf.
   Beim Zurückscrollen läuft alles rückwärts. Ohne Skript und bei reduzierter Bewegung ist alles sichtbar. */
.zeitstrahl-fortschritt { background: linear-gradient(180deg, rgba(232, 97, 73, 0.4) 0, var(--coral) 140px); }
.zeitstrahl-punkt { position: relative; z-index: 1; }
.zeitstrahl-kopf {
  position: absolute; left: calc(var(--zs-links) - 5px); top: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 0 6px rgba(232, 97, 73, 0.16), 0 0 24px 6px rgba(232, 97, 73, 0.5);
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none; will-change: transform;
}
.zeitstrahl-kopf.ist-sichtbar { opacity: 1; }
.zs-bereit .zeitstrahl-punkt { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.zs-bereit .zeitstrahl-schritt:not(.ist-an) .zeitstrahl-punkt { transform: scale(0.86); }
.zs-bereit .zeitstrahl-punkt::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--coral); opacity: 0; pointer-events: none; }
.zs-bereit .zeitstrahl-schritt.ist-an .zeitstrahl-punkt::after { animation: zs-ring 0.8s var(--kurve) 1; }
@keyframes zs-ring { from { opacity: 0.75; transform: scale(1); } to { opacity: 0; transform: scale(2); } }
.zs-bereit .zeitstrahl-inhalt > *, .zs-bereit .zeitstrahl-inhalt .karte-liste li { transition: opacity 0.5s var(--kurve), transform 0.5s var(--kurve); }
.zs-bereit .zeitstrahl-schritt:not(.ist-an) .zeitstrahl-inhalt > * { opacity: 0.26; transform: translateY(12px); }
.zs-bereit .zeitstrahl-schritt:not(.ist-an) .zeitstrahl-inhalt .karte-liste li { opacity: 0; transform: translateX(-8px); }
.zs-bereit .zeitstrahl-schritt.ist-an .zeitstrahl-inhalt > *:nth-child(2) { transition-delay: 60ms; }
.zs-bereit .zeitstrahl-schritt.ist-an .zeitstrahl-inhalt > *:nth-child(3) { transition-delay: 120ms; }
.zs-bereit .zeitstrahl-schritt.ist-an .zeitstrahl-inhalt > *:nth-child(4) { transition-delay: 180ms; }
.zs-bereit .zeitstrahl-schritt.ist-an .zeitstrahl-inhalt .karte-liste li:nth-child(1) { transition-delay: 160ms; }
.zs-bereit .zeitstrahl-schritt.ist-an .zeitstrahl-inhalt .karte-liste li:nth-child(2) { transition-delay: 220ms; }
.zs-bereit .zeitstrahl-schritt.ist-an .zeitstrahl-inhalt .karte-liste li:nth-child(3) { transition-delay: 280ms; }

/* ---- Funnel-Story (K040, G01): Handy mittig gepinnt, Schritt wechselt, wenn der Text in der Bildschirmmitte steht ---- */
.funnel-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-12); }
.funnel-schritte { display: flex; flex-direction: column; gap: var(--sp-16); }
.funnel-schritt-nummer { display: block; font-family: var(--font-headline); font-variation-settings: 'wght' 650; font-size: 2.4rem; line-height: 1; color: var(--coral); margin-bottom: var(--sp-3); }
.funnel-schritt h3 { margin: 0 0 var(--sp-3); font-size: 1.75rem; }
.funnel-schritt p { color: var(--grau); margin: 0; max-width: 40ch; }
.funnel-schritt-bild { margin: var(--sp-6) auto 0; width: 100%; max-width: 300px; }
.funnel-phone-spalte { display: none; }
@media (min-width: 1025px) {
  .funnel-story--pin .funnel-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: start; }
  .funnel-story--pin .funnel-schritt-bild { display: none; }
  .funnel-story--pin .funnel-schritt { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.35; transition: opacity 0.4s ease; }
  /* erster und letzter Schritt so hoch wie der Bildschirm: Text steht mittig, genau auf Höhe des gepinnten Handys */
  .funnel-story--pin .funnel-schritt:first-child, .funnel-story--pin .funnel-schritt:last-child { min-height: 100svh; }
  .funnel-story--pin .funnel-schritt.ist-aktiv { opacity: 1; }
  .funnel-story--pin .funnel-schritte { gap: 0; }
  .funnel-story--pin .funnel-phone-spalte { display: flex; align-items: center; justify-content: center; height: 100svh; }
  .funnel-story--pin .funnel-phone { width: 100%; max-width: min(320px, 44svh); }
}
.funnel-frame { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); transition: opacity 0.45s var(--kurve), transform 0.45s var(--kurve); pointer-events: none; background: #fff; }
.funnel-frame.ist-aktiv { opacity: 1; transform: translateY(0); pointer-events: auto; }
.funnel-frame > img, .funnel-frame .bild-platzhalter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.funnel-frame .iphone-screen-html { padding-top: 12cqw; }
.funnel-frame .mail-app { overflow: hidden; }

/* ---- Feinschliff nach dem Art-Director-Check (Runde 6, B7) ---- */
/* Sprungmarken in Rechtstexten: keine Listenpunkte */
.rechtstext .sprungmarken { list-style: none; padding: 0; }
.rechtstext .sprungmarken li { margin: 0; list-style: none; }
/* Rechtsseiten: weniger Luft zwischen Überschrift und Text */
.hero-kompakt + .abschnitt-rechtstext { padding-top: var(--sp-8); }
/* Branchen-Übersicht: alle acht Karten gleich groß, zwei Zweier-Gruppen nebeneinander */
.branchengruppen-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin-top: var(--sp-12); }
.branchengruppen-zeile .branchengruppe { min-width: 0; display: flex; flex-direction: column; }
/* Karten beider Gruppen gleich hoch, auch wenn die Berufe-Zeile unterschiedlich lang umbricht */
.branchengruppen-zeile .branchen-liste { flex: 1; }
/* FAQ-Seite: Karte auf Lesebreite, Gruppentitel auf der Kante der Fragen */
.faq-karte-seite { max-width: 860px; margin: 0 auto; }
.faq-karte-seite .faq-liste { max-width: none; margin: 0; }
/* Kontaktformular: zwei Felder nebeneinander, damit der Absende-Knopf früher im Bild ist */
.formular-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.formular-feld-hinweis { font-size: 0.82rem; color: var(--grau); margin: calc(var(--sp-2) * -1) 0 var(--sp-4); }
/* Danke-Seite: Label in Inter wie überall, Karten als Links erkennbar */
h2.label, h3.label { font-family: var(--font); }
.danke-weiter a strong::after { content: " →"; color: var(--coral-text); }
/* Telefonnummern brechen nie um, E-Mail-Adressen nur dort, wo es nicht anders geht */
a[href^="tel:"] { white-space: nowrap; }
.cta-streifen a[href^="mailto:"], .danke-box a[href^="mailto:"] { white-space: nowrap; }
/* Über mich: kleines Porträt unter der Überschrift, nur auf Handy und Tablet */
.ueber-mich-seite-foto-mobil { display: none; }

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

/* Kopfzeile: Menüabstände und Telefonnummer weichen, bevor der Button aus dem Bild läuft (K023) */
@media (max-width: 1240px) {
  .kopf-telefon span { display: none; }
  /* Nur das Symbol: als erkennbare Tippfläche wie der Menü-Knopf */
  .kopf-telefon { min-width: 44px; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: var(--weiss); }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hero-bild-wrapper { max-width: 440px; margin: 0 auto; }
  .hero-branche-bild { max-width: 360px; }
  .branchen-grid { grid-template-columns: repeat(2, 1fr); }
  .branchen-liste { grid-template-columns: repeat(2, 1fr); }
  .branchengruppe-zwei { grid-template-columns: 1fr; }
  .usp-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .usp-grid > div { display: block; }
  .ueber-mich-grid { grid-template-columns: 1fr; }
  .ueber-mich-grid .hero-bild-wrapper { max-width: 320px; margin: 0 auto var(--sp-6); }
  .ueber-mich-seite-hero { grid-template-columns: 1fr; }
  /* K162: Erst Überschrift, dann ein kleines Porträt, dann der Text */
  .ueber-mich-seite-foto { display: none; }
  .ueber-mich-seite-foto-mobil { display: block; width: 168px; margin: var(--sp-2) 0 var(--sp-5); }
  .ueber-mich-seite-foto-mobil img { display: block; width: 100%; border-radius: var(--radius); box-shadow: var(--schatten-weich); }
  .branchengruppen-zeile { grid-template-columns: 1fr; gap: var(--sp-12); }
  .fusszeile-grid { grid-template-columns: 1fr 1fr; }
  .kennzahlen-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .kz-stelle { width: 26px; }
  .kontakt-grid { grid-template-columns: 1fr; }
  .kontakt-whatsapp-oben { display: block; text-align: center; margin-top: var(--sp-6); }
  .kontakt-whatsapp-oben p { margin: 0 0 var(--sp-3); }
  .kontakt-whatsapp-oben .btn { width: 100%; max-width: 420px; }
  .kontakt-whatsapp-oder { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); color: var(--grau); font-size: 0.85rem; }
  .kontakt-whatsapp-oder::before, .kontakt-whatsapp-oder::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .kontakt-whatsapp-oben + .kontakt-grid { margin-top: var(--sp-5); }
  .ablauf-grid { grid-template-columns: 1fr; }
  .ablauf-uebersicht { display: none; } /* K155: mobil übernimmt die feste Leiste */
  .umfang-grid { grid-template-columns: repeat(2, 1fr); }
  .kosten-garantie-grid { grid-template-columns: 1fr; }
  .leistungswahl-grid { grid-template-columns: 1fr; }
  .text-zweispalter { grid-template-columns: 1fr; gap: var(--sp-4); }
  .faq-grid { grid-template-columns: 1fr; }
  .hero-demo-wrapper { max-width: 440px; }
  .hero-handys { max-width: 380px; }
  .danke-weiter { grid-template-columns: 1fr; }
  .danke-schnell .btn { width: 100%; }
}

@media (max-width: 1140px) {
  .hauptnav { display: none; }
  .nav-toggle { display: flex; }
  /* Mobil-Menü: gleitet von oben ein, mit Button und Telefon (K006, K008) */
  .kopfleiste .hauptnav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--weiss); border-bottom: 1px solid var(--line);
    padding: 8px 20px 24px;
    max-height: calc(100svh - var(--header-hoehe));
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.2s var(--kurve), transform 0.2s var(--kurve), visibility 0.2s;
    box-shadow: 0 24px 40px -20px rgba(0,0,0,0.25);
  }
  .kopfleiste.nav-offen .hauptnav { opacity: 1; visibility: visible; transform: translateY(0); }
  .kopfleiste .hauptnav > a, .kopfleiste .hauptnav .nav-item > a { padding: 13px 0; width: 100%; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .kopfleiste .hauptnav a[aria-current="page"] { border-bottom-color: var(--coral); }
  .kopfleiste .hauptnav .nav-item { width: 100%; flex-wrap: wrap; }
  .kopfleiste .hauptnav .nav-item > a { flex: 1; }
  /* Trennlinie unter „Leistungen“ über die ganze Breite, auch unter dem Pfeil */
  .kopfleiste .hauptnav .nav-item { border-bottom: 1px solid var(--line); }
  .kopfleiste .hauptnav .nav-item > a { border-bottom: 0; }
  .kopfleiste .hauptnav .nav-item:has(> a[aria-current="page"]) { border-bottom-color: var(--coral); }
  .kopfleiste .hauptnav .nav-item.nav-dropdown-offen { padding-bottom: var(--sp-2); }
  .kopfleiste .nav-dropdown-toggle { color: var(--schwarz); padding: 10px 12px; min-width: 44px; min-height: 44px; }
  .kopfleiste .nav-dropdown { position: static; width: 100%; margin: 0; box-shadow: none; border: 0; background: var(--warmweiss); opacity: 1; visibility: visible; transform: none; display: none; border-radius: 10px; }
  /* transform: none hier wiederholen, sonst gewinnt die Desktop-Regel (translate -50 %) und schiebt das Untermenü halb aus dem Fenster */
  .kopfleiste .nav-item.nav-dropdown-offen .nav-dropdown { display: grid; transform: none; }
  .hauptnav-mobil-aktionen { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
  .hauptnav-mobil-aktionen .btn { font-size: 1.1rem; }
  .hauptnav .hauptnav-mobil-telefon { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); font-weight: 600; font-size: 1.05rem; border: 1px solid var(--line); border-radius: 6px; min-height: 50px; padding: 0 16px; }
  .hauptnav-mobil-zeiten { text-align: center; font-size: 0.85rem; color: var(--grau); }
}

@media (max-width: 640px) {
  :root { --header-hoehe: 70px; --abschnitt: 56px; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.55rem; }
  .hero { padding: calc(var(--header-hoehe) + var(--sp-8)) 0 var(--sp-8); }
  .hero-voll { padding-bottom: var(--sp-8); }
  .hero h1, .hero-kompakt h1 { font-size: clamp(1.95rem, 8.6vw, 2.5rem); }
  .hero-text { font-size: 1.05rem; }
  .hero-garantie { font-size: 0.95rem; max-width: none; }
  .inhalt-ohne-hero { padding-top: calc(var(--header-hoehe) + var(--sp-8)); }
  .hero-cta .btn { width: 100%; }
  /* Große Buttons bleiben auf dem Handy einzeilig (K155) */
  .btn-groß { padding: 15px 16px; font-size: 1.05rem; }
  .cta-streifen .btn { width: 100%; }
  .kontakt-anruf .btn { font-size: 1rem; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
  /* Lange Wörter in schmalen Karten und Überschriften trennen statt überlaufen lassen */
  h1, h2, h3 { overflow-wrap: break-word; }
  /* Branchen-Übersicht auf dem Handy: eine Karte pro Zeile, Bild links, Text rechts.
     So muss kein Beruf getrennt werden. */
  .branchen-liste, .branchen-liste.branchen-liste-zwei { grid-template-columns: 1fr; gap: var(--sp-3); }
  .branche-karte { flex-direction: row; align-items: stretch; }
  .branche-karte-bild { flex: 0 0 112px; aspect-ratio: auto; min-height: 96px; }
  .branche-karte img, .branche-karte .bild-platzhalter { aspect-ratio: auto !important; height: 100%; }
  .branche-karte .bild-platzhalter small { display: none; }
  .branche-karte-inhalt { justify-content: center; min-width: 0; }
  .formular-zeile { grid-template-columns: 1fr; }
  /* Lange Einzelwörter (Datenschutzerklärung, Geschäftsbedingungen) passen in eine Zeile */
  .hero-kompakt .kopf-zentriert h1 { font-size: clamp(1.7rem, 7.6vw, 2.4rem); hyphens: manual; }
  .hero-cta-zeile { flex-direction: column; align-items: stretch; }
  .hero-cta-telefon { justify-content: center; }
  /* K117: Branchenfoto mobil im Querformat unter dem Button */
  .hero-branche-bild { max-width: none; }
  .hero-branche-bild img, .hero-branche-bild .bild-platzhalter { aspect-ratio: 16/9 !important; height: auto; }
  .branchen-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .branche-kachel-titel { padding: 12px 12px; font-size: 0.9rem; }
  .branche-kachel-titel .lang { display: none; }
  .branche-kachel-titel .kurz { display: inline; }
  .branche-karte-inhalt { padding: var(--sp-3); }
  .branche-karte-inhalt h3 { font-size: 1rem; }
  .branche-karte-inhalt p { font-size: 0.8rem; }
  .fusszeile-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .fusszeile-marke { grid-column: 1 / -1; } /* K074 */
  .kopf-aktionen .btn-primary { display: none; }
  .mobil-cta { display: block; }
  body:has(.mobil-cta) { padding-bottom: var(--sp-16); }
  .kennzahlen-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .marquee-item { padding: 8px 20px; }
  .zeitstrahl { --zs-links: 21px; } /* K057, K156: beide Linien auf derselben Kante */
  .zeitstrahl-schritt { grid-template-columns: 44px 1fr; gap: var(--sp-4); }
  .zeitstrahl-punkt { width: 44px; height: 44px; font-size: 1.05rem; }
  .cta-streifen { padding: var(--sp-8) var(--sp-5); border-radius: 18px; }
  .umfang-grid { grid-template-columns: 1fr; gap: 0; }
  .umfang-punkt { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: var(--sp-4) 0 var(--sp-4) 30px; position: relative; }
  .umfang-punkt::before { content: ""; position: absolute; left: 0; top: 22px; width: 18px; height: 18px; border-radius: 50%; background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
  .umfang-punkt h3 { font-size: 1.05rem; }
  .umfang-punkt p { font-size: 0.92rem; }
  .garantie-kasten { grid-template-columns: 1fr; padding: var(--sp-6); }
  .garantie-kasten-kopf { flex-direction: row; gap: var(--sp-3); align-items: baseline; grid-row: auto; }
  .garantie-zahl { font-size: 3.4rem; }
  .garantie-kasten-kopf { flex-wrap: wrap; }
  .garantie-kasten-zusatz { flex-basis: 100%; max-width: none; text-align: left; margin-top: 0; }
  .kontakt-formular-karte { padding: var(--sp-5); }
  .kontakt-person-mobil { display: flex; margin-bottom: var(--sp-4); padding-bottom: 0; border-bottom: 0; }
  .kontakt-vertrauen .kontakt-person { display: none; }
  .hero-demo-wrapper { max-width: 340px; padding-bottom: 60px; }
  .hero-demo-wrapper:has(.hero-fussnote-mobil) { padding-bottom: 0; }
  /* K031: Fußnote mobil unter das Mockup, damit der Beweis früher im Bild ist.
     Abstand so groß, dass das überstehende Handy (54 px) den Text nicht verdeckt. */
  .hero-voll .hero-fussnote { display: none; }
  .hero-fussnote-mobil { display: block; font-size: 0.8rem; color: var(--grau); margin-top: 76px; }
  .hero-demo .browser { width: 88%; }
  .hero-demo .iphone { width: 34%; bottom: -54px; }
  .hero-demo-karte { left: 0; bottom: -20px; font-size: 0.75rem; max-width: 190px; padding: 8px 12px; }
  .faq-karte { padding: 4px 18px; }
  .funnel-schritt h3 { font-size: 1.4rem; }
  .funnel-schritt-nummer { font-size: 1.8rem; }
  .fehlerseite-buttons .btn { width: 100%; }
  .ueber-mich-badge { width: 110px; right: 8px; bottom: -18px; }
  /* ---- Kennzahlen auf dem Handy (K046): Kartenstapel ----
     Die Karten (Aussehen siehe oben) bleiben oben stehen, die nächste schiebt sich darüber. */
  .kennzahlen-mobil .kennzahlen-grid { display: block; }
  .kennzahlen-mobil .kennzahl { padding: 20px 20px 26px; margin-bottom: var(--sp-4); }
  .kennzahlen-mobil .kennzahl-zahl { font-size: 4.6rem; }
  .kennzahlen-mobil .kennzahl-einheit { font-size: 0.5em; }
  .kennzahlen-mobil .kennzahl-label { font-size: 1.02rem; margin: var(--sp-3) auto auto; }
  .kennzahlen-mobil .kz-bild { margin: auto 0 6px; }
  .kennzahlen-mobil .kz-bewerbungen { gap: 6px; }
  .kennzahlen-mobil .kz-stelle { width: 26px; }
  .kennzahlen-mobil.kz-bereit .kennzahl {
    position: sticky; top: calc(var(--header-hoehe) + 14px + var(--kz-nr) * 12px);
    height: min(400px, calc(100vh - var(--header-hoehe) - 130px)); height: min(400px, calc(100svh - var(--header-hoehe) - 130px));
    transform-origin: center top;
  }
  /* zugedeckte Karten treten zurück */
  .kennzahlen-mobil.kz-bereit .kennzahl::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: #000; opacity: var(--kz-dunkel, 0); pointer-events: none; }
}

@media (max-width: 360px) {
  .kopfleiste-innen { padding-left: var(--sp-3); padding-right: var(--sp-3); gap: var(--sp-3); }
  .kopf-aktionen { gap: var(--sp-2); }
  .logo, .logo img { height: 31px; }
}