/* ==========================================================================
   Edlerritter IT-Consulting · Startseite v3 Editorial
   Umsetzung des Claude-Design-Artboards „Startseite v3 Editorial.dc.html“.
   Palette = Variante B (Orangerot / Dunkelgrün), Poppins lokal (DSGVO).
   ========================================================================== */

/* ---------- Schriften (lokal, subset Latin + Latin-Ext) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/poppins-400-subset.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/poppins-500-subset.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/poppins-700-subset.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --accent: #EA4227;        /* Orangerot: Flächenfarbe (Marker, Pills, Ziffern, Fokusring) */
  --accent-hover: #C93318;
  --accent-soft: #FFA391;   /* Label auf dunkler Fläche */
  --accent-ink: #C93318;    /* Abgedunkelter Akzent für kleinen Text auf hellem Grund (AA: 5.29:1 Weiß / 4.68:1 Surface) */
  --accent-surface: #D63A1F; /* Abgedunkelte Akzentfläche für weißen Text darauf (AA: 4.68:1) */
  --dark: #17281E;          /* Dunkelgrün: Text, dunkle Bänder */
  --dark-active: #0D1712;
  --ink: #17281E;
  /* 5.20:1 auf Weiss. Der fruehere Wert #6E7873 lag mit 4.568:1 so knapp
     ueber der AA-Grenze, dass die halbtransparenten .hero__pill-Flaechen
     darunter genuegten, um ihn zu unterschreiten: gemessen 4.31:1 auf
     21 Prozent der Zeile .hero__eyebrow, und zwar im Ruhezustand nach
     Ende der Animation, nicht waehrend der Bewegung. Jetzt 4.91:1 selbst
     ueber dem dunkelsten Punkt einer Pill. Alle --muted-Stellen liegen
     auf hellem Grund, das Abdunkeln verbessert also ueberall. */
  --muted: #656F6A;
  --muted-ink: #67706B;     /* Abgedunkeltes Grau für kleinen Text auf --surface (AA: 4.53:1) */
  --surface: #F1F1F1;
  --page: #F7F7F6;
  --paper: #FFFFFF;
  --line: #D9DBDA;
  --wa: #25D366;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --header-h: 80px;

  /* ---------- Große Bildschirme (ab 1500px, gestuft): Skalierungs-Tokens ----------
     Basiswerte = IST-Zustand bis 1499px (calc(72px * 1) usw. == 72px).
     Drei Stufen (1500 / 2000 / 2800px) heben in den @media-Bloecken am
     Dateiende an, damit auch ein 1920px-Bildschirm schon eine Stufe bekommt
     (vorher erst ab 2000px). Unterseiten mit eigener css/pages.css nutzen
     dieselben Tokens und wachsen mit. */
  --container-max: 1360px;  /* .frame / .site-header__inner */
  --wrap-max: 1080px;       /* .wrap (Ablauf/Person/Referenzen/FAQ/Kontakt) */
  --space-scale: 1;         /* Innenabstand der Hauptabschnitte */
  --fs-bump: 0px;           /* additive Vergrößerung für Lesetext-Absätze: 17px Basis + Bump */
  --h2-scale: 1;            /* multiplikative Vergrößerung große Überschriften */
  /* Die folgenden vier Blöcke haben eigene, engere Maximalbreiten als --container-max.
     Sie MÜSSEN im gleichen Verhältnis mitwachsen, sonst kippt die Größenordnung:
     bei 3840px wäre der Hero (1120px) sonst schmaler als die Abschnitte unter ihm
     (1334px) und der Fuß (1080px) schmaler als der Kopf (1680px). Gemessen. */
  --hero-max: 1120px;       /* .hero__inner */
  --statement-max: 640px;   /* .statement__wrap, bewusst schmale Lesespalte */
  --card-max: 1000px;       /* .angebot__card */
  --footer-max: 1080px;     /* .site-footer__inner, gleich breit wie .wrap */
  --portrait-w: 380px;      /* .person__grid, erste Spalte (Bildquelle ist 760px breit) */
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--page);
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent-ink); }
a:hover { color: var(--accent-hover); }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Fokusring auf Akzentflächen gegen Fläche/Umgebung absetzen (f-54) */
.btn:focus-visible, .ref--accent:focus-visible { outline-color: var(--dark); }
.angebot__card .btn:focus-visible, .kontakt .btn:focus-visible { outline-color: var(--accent); }
/* Auf WhatsApp-Gruen ergibt der orangerote Fokusring nur 2,0:1 und ist
   damit praktisch unsichtbar. Weiss ergibt dort 3,6:1 und erfuellt die
   Vorgabe fuer Nicht-Text-Kontrast (WCAG 1.4.11, 3:1). */
.wa-float:focus-visible, .option--wa:focus-visible { outline-color: #fff; }
/* Links in Adressbloecken hatten 23px Hoehe und lagen damit 1px unter der
   Zielgroesse aus WCAG 2.2 (SC 2.5.8, 24x24 CSS-Pixel). Sie tragen keine
   Knopfklasse und bekamen deshalb kein Innenabstands-Polster. */
address a { display: inline-block; min-height: 24px; line-height: 24px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -120px; z-index: 300;
  background: var(--dark); color: #fff; padding: 12px 16px;
  border-radius: 12px; text-decoration: none; font-weight: 500;
}
.skip-link:focus { top: calc(var(--header-h) + 12px); }

/* ---------- Rahmen ---------- */
.page { min-height: 100vh; background: var(--page); }
.frame {
  position: relative;
  max-width: var(--container-max); margin: 0 auto; min-height: 100vh;
  background: var(--paper);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--paper);
  box-shadow: 0 4px 24px rgba(23, 40, 30, .10);
}
.site-header__inner {
  max-width: var(--container-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 32px;
}
.site-header__logo { flex-shrink: 0; display: inline-flex; }
.site-header__logo img { height: 44px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.nav a {
  font-size: 15px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding: 11px 14px;
  border-radius: 12px; corner-shape: squircle; white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a:active { background: var(--surface); }

/* ---------- Buttons ---------- */
.btn {
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--accent-surface); color: #fff; text-decoration: none;
  font-weight: 500; font-size: 17px; line-height: 1.2; padding: 16px 32px;
  border: 0; border-radius: 16px; corner-shape: squircle; white-space: nowrap;
  transition: background .25s ease, color .25s ease, transform .2s ease;
}
.btn:hover { background: var(--dark); color: #fff; }
.btn:active { background: var(--dark-active); }
.btn--small { font-size: 16px; letter-spacing: -.01em; padding: 13px 22px; border-radius: 14px; gap: 8px; min-height: 44px; }  /* f-14: Tap-Ziel */
.btn--on-dark:hover { background: var(--surface); color: var(--dark); }
.btn--on-dark:active { background: var(--line); }

/* ---------- Typo-Bausteine ---------- */
.eyebrow {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-ink); margin-bottom: 16px;
}
.eyebrow--soft { color: var(--accent-soft); }
.h2 {
  margin: 0; font-weight: 700; font-size: calc(30px * var(--h2-scale)); line-height: 1.05;
  letter-spacing: -.03em; color: var(--ink); text-wrap: pretty;
}
/* Silbentrennung freigeben, damit lange Wörter Karten/Zeilen nicht sprengen (f-01) */
/* overflow-wrap: break-word statt anywhere. Der Unterschied ist nicht
   kosmetisch: "anywhere" laesst Umbruchstellen INNERHALB von Woertern
   auch in die Mindestbreiten-Berechnung einfliessen, wodurch der Browser
   schon bricht, wenn noch Platz waere. Gemessen brach ".door h3" bei
   280px "Softw/are", obwohl das Wort in die Zeile gepasst haette.
   "break-word" verhindert einen Ueberlauf genauso, beeinflusst die
   Mindestbreite aber nicht. */
.h2, .angebot__price, .door h3, .step h3 { hyphens: auto; overflow-wrap: break-word; }
.link-more {
  color: var(--accent-ink); font-weight: 500; font-size: 18px;
  text-decoration: underline; text-underline-offset: 4px;
  display: inline-block; padding: 10px 0; margin: -10px 0;  /* f-14: Tap-Ziel >=44px, Optik unverändert */
}

/* ---------- Layout-Helfer ---------- */
.screen { min-height: min(100vh, 1100px); display: flex; align-items: center; }  /* f-42: Deckel gegen Leerflächen auf 2560px+ */
.wrap { max-width: var(--wrap-max); margin: 0 auto; width: 100%; padding: calc(72px * var(--space-scale)) calc(64px * var(--space-scale)); }
.wrap--tight { padding: calc(48px * var(--space-scale)) calc(64px * var(--space-scale)); }

/* ---------- Hero / Türen ---------- */
.hero {
  position: relative; overflow: hidden; min-height: min(86vh, 950px); /* f-42 */
  display: flex; align-items: center;
}
.hero__pill { position: absolute; pointer-events: none; }
.hero__pill span {
  display: block; border-radius: 999px;
  background: linear-gradient(to right, rgba(234, 66, 39, var(--a)), transparent);
  animation: floaty var(--d) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  /* Endlich statt endlos, landet in Ruheposition (WCAG 2.2.2, f-31) */
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.hero__pill--1 { left: -8%; top: 22%; transform: rotate(-6deg); }
.hero__pill--1 span { width: 560px; height: 130px; --a: .07; --d: 7s; }
.hero__pill--2 { right: -4%; top: 64%; transform: rotate(-18deg); }
.hero__pill--2 span { width: 440px; height: 110px; --a: .05; --d: 8s; --delay: 1.2s; }
.hero__pill--3 { right: 12%; top: 8%; transform: rotate(8deg); }
.hero__pill--3 span { width: 300px; height: 72px; --a: .06; --d: 9s; --delay: .6s; }
.hero__pill--4 { left: 30%; bottom: 6%; transform: rotate(-12deg); }
.hero__pill--4 span { width: 220px; height: 56px; --a: .05; --d: 6.5s; --delay: 2s; }
.hero__pill--5 { left: 52%; top: 38%; transform: rotate(14deg); }
.hero__pill--5 span { width: 160px; height: 44px; --a: .045; --d: 7.5s; --delay: 3.1s; }

.hero__inner { position: relative; max-width: var(--hero-max); margin: 0 auto; width: 100%; padding: calc(100px * var(--space-scale)) calc(64px * var(--space-scale)) calc(36px * var(--space-scale)); }
.hero__eyebrow { margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.hero__title {
  margin: 0 0 40px; font-size: clamp(20px, 2.6vw, calc(30px * var(--h2-scale))); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.3; color: var(--ink);
  white-space: normal; text-wrap: balance;
}
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: stretch; }
.door {
  display: flex; flex-direction: column; border-top: 2px solid var(--ink);
  padding: 28px 0 0; text-decoration: none; color: var(--ink);
}
.door:active { border-top-color: var(--accent); }
.door h3 {
  margin: 0 0 12px; font-weight: 700; font-size: 22px; line-height: 1.15;
  letter-spacing: -.02em; color: var(--ink); transition: color .25s ease;
  text-wrap: balance;  /* f-40: kein Waisenkind in der letzten Zeile */
}
.door:hover h3, .door:focus-visible h3 { color: var(--accent); }
.door p { margin: 0 0 24px; flex: 1; max-width: 44ch; font-size: calc(18px + var(--fs-bump)); line-height: 1.6; color: var(--muted); }
.door__more { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 18px; color: var(--accent-ink); line-height: 1; }
.door__more .arrow { display: inline-block; font-size: 20px; animation: nudge 1.6s ease-in-out infinite; animation-iteration-count: 3; }
.hero__cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 56px; }
.hero__claim { flex: 1; min-width: min(280px, 100%); display: grid; gap: 6px; }
.hero__claim p { margin: 0; font-size: calc(17px + var(--fs-bump)); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.hero__claim em { font-style: normal; color: var(--accent-ink); font-weight: 500; }

/* ---------- Ablauf ---------- */
.ablauf .h2 { margin-bottom: 56px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step { border-top: 1px solid var(--line); padding-top: 24px; }
.step__num {
  display: block; font-weight: 700; font-size: 56px; line-height: .85;
  letter-spacing: -.04em; color: var(--accent); margin-bottom: 20px;
}
.step h3 { margin: 0 0 12px; font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.step p { margin: 0; max-width: 34ch; font-size: calc(16px + var(--fs-bump)); line-height: 1.65; color: var(--muted); text-wrap: pretty; }

/* ---------- Person ---------- */
.person__grid { display: grid; grid-template-columns: var(--portrait-w) 1fr; gap: 64px; align-items: start; }
.person__figure { margin: 0; }
.person__figure img {
  width: 100%; height: auto; display: block; filter: grayscale(1);
  border-radius: 20px; corner-shape: squircle; transition: filter .4s ease;
}
.person__figure:hover img { filter: grayscale(0); }
.person__figure figcaption {
  display: flex; justify-content: space-between; gap: 12px;
  border-top: 2px solid var(--ink); padding-top: 10px; margin-top: 12px;
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.person__title { margin: 0 0 28px; min-height: 46px; }
.tw-cursor { color: var(--accent); animation: twblink 1.1s steps(1) infinite; }
.person__text p { margin: 0 0 20px; max-width: 47ch; font-size: calc(17px + var(--fs-bump)); line-height: 1.65; color: var(--ink); text-wrap: pretty; }
.person__text p:last-of-type { margin-bottom: 28px; }

/* ---------- Statement ---------- */
.statement__wrap { max-width: var(--statement-max); margin: 0 auto; width: 100%; padding: calc(48px * var(--space-scale)) calc(64px * var(--space-scale)) calc(96px * var(--space-scale)); }
.statement p { margin: 0; font-weight: 700; font-size: calc(26px * var(--h2-scale)); line-height: 1.5; letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }
.mark {
  background: var(--accent); color: #fff; padding: 2px 10px;
  border-radius: 10px; corner-shape: squircle;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- Angebot ---------- */
.angebot { background: var(--surface); min-height: min(100vh, 1100px); display: flex; align-items: center; padding: calc(72px * var(--space-scale)) calc(64px * var(--space-scale)); }  /* f-42 */
.angebot__card {
  max-width: var(--card-max); margin: 0 auto; width: 100%; padding: calc(48px * var(--space-scale));
  background: var(--dark); color: #fff; border-radius: 32px; corner-shape: squircle;
}
.angebot__card .h2 { color: #fff; margin-bottom: 16px; }
.angebot__lead { margin: 0 0 48px; font-weight: 500; font-size: calc(19px + var(--fs-bump)); line-height: 1.4; letter-spacing: -.02em; color: #fff; text-wrap: pretty; }
.angebot__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; margin-bottom: 48px; }
.angebot__grid > p { margin: 0; max-width: 47ch; font-size: calc(17px + var(--fs-bump)); line-height: 1.65; color: rgba(255, 255, 255, .8); text-wrap: pretty; }
.angebot__list { display: grid; align-content: start; margin: 0; padding: 0; list-style: none; }
.angebot__list li { border-top: 1px solid rgba(255, 255, 255, .2); padding: 14px 0; font-size: 16px; line-height: 1.4; color: #fff; }
.angebot__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.angebot__list em { font-style: normal; color: var(--accent-soft); }
.angebot__price { margin: 0 0 12px; font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -.03em; color: #fff; text-wrap: pretty; }
.angebot__note { margin: 0 0 36px; max-width: 47ch; font-size: calc(17px + var(--fs-bump)); line-height: 1.65; color: rgba(255, 255, 255, .65); text-wrap: pretty; }
.angebot__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* ---------- Referenzen ---------- */
.referenzen { border-top: 1px solid var(--line); }
.referenzen .h2 { margin-bottom: 48px; }
.refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.refs__stack { display: grid; gap: 24px; align-content: stretch; }
.ref {
  cursor: pointer; display: flex; flex-direction: column; gap: 32px;
  border-radius: 24px; corner-shape: squircle; padding: 32px;
  transition: transform .25s ease;
}
.ref:hover { transform: translateY(-4px); }
.ref--accent { background: var(--accent-surface); color: #fff; }
.ref--dark { background: var(--dark); color: #fff; }
.ref--soft { background: var(--surface); border: 1px solid var(--line); gap: 24px; }
.ref__quote { margin: 0; text-wrap: pretty; }
.ref--accent .ref__quote, .ref--dark .ref__quote { font-weight: 500; font-size: calc(19px + var(--fs-bump)); line-height: 1.4; letter-spacing: -.02em; color: #fff; }
.ref--soft .ref__quote { font-size: calc(17px + var(--fs-bump)); line-height: 1.6; color: var(--ink); }
.ref__meta { display: flex; align-items: center; gap: 14px; margin-top: auto; }
/* .ref__meta ist jetzt ein echtes <button> (a11y-Fix) statt eines div[role=button];
   UA-Button-Optik (Rahmen, Hintergrund, Innenabstand, Zentrierung) zurücksetzen,
   damit die Karte optisch wie vorher aussieht. Fokusring bleibt über :focus-visible erhalten. */
.ref__open {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 0; background: none; margin: 0; padding: 0;
  width: 100%; text-align: left; cursor: pointer;
}
.ref__logo {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; background: #fff; border-radius: 16px; corner-shape: squircle;
  padding: 7px; flex-shrink: 0;
}
.ref__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ref__logo--dark { background: var(--dark); border: 1px solid var(--line); }
.ref__logo--bordered { border: 1px solid var(--line); }
.ref__logo--mono img { filter: grayscale(1) brightness(.45); }
.ref__name { display: grid; gap: 2px; }
.ref__name b { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.ref__name span { font-size: 13px; color: var(--muted); }
.ref--dark .ref__name span { color: rgba(255, 255, 255, .75); }
.ref--accent .ref__name span { color: #fff; }
.ref--soft .ref__name span { color: var(--muted-ink); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); background: var(--surface); }
.faq .h2 { margin-bottom: 40px; }
/* Zeilenweises Grid wie im Design-Artboard (Reihenfolge: 1+2, 3+4, 5+6 …).
   align-items:start verhindert, dass ein geöffneter Eintrag die Nachbarzelle
   in derselben Zeile auf seine Höhe streckt (f-17); border-bottom sitzt auf dem
   Container und damit unabhängig von der Zeilenzahl immer ganz unten. */
.faq__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: start; border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary {
  font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--ink);
  padding: 18px 0; cursor: pointer; min-height: 44px; transition: color .25s ease;
}
.faq summary:hover { color: var(--accent); }
.faq details p { margin: 0 0 20px; max-width: 47ch; font-size: calc(17px + var(--fs-bump)); line-height: 1.65; color: var(--ink); }

/* ---------- Abschluss + Footer ---------- */
.closing { min-height: min(100vh, 1100px); display: flex; flex-direction: column; }  /* f-42 */
.kontakt { background: var(--dark); flex: 1; display: flex; align-items: center; }
.kontakt h2 { margin: 0 0 16px; font-weight: 700; font-size: calc(36px * var(--h2-scale)); line-height: 1; letter-spacing: -.03em; color: #fff; text-wrap: balance; }  /* f-40: kein Waisenkind in der letzten Zeile */
.kontakt__sub { margin: 0 0 40px; font-size: calc(17px + var(--fs-bump)); line-height: 1.65; color: rgba(255, 255, 255, .8); }
.kontakt__row { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.kontakt__row p { margin: 0; font-size: calc(17px + var(--fs-bump)); line-height: 1.6; color: rgba(255, 255, 255, .8); }
.kontakt__row p a { color: #fff; display: inline-block; padding: 10px 0; }  /* f-14: Tap-Ziel >=44px */

.site-footer { border-top: 1px solid var(--line); background: var(--paper); }
.site-footer__inner { max-width: var(--footer-max); margin: 0 auto;
  padding: calc(56px * var(--space-scale)) calc(72px * var(--space-scale)) calc(32px * var(--space-scale)); }
.site-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; flex-wrap: wrap; margin-bottom: 40px; }
.site-footer__logo { display: inline-flex; }
.site-footer__logo img { height: 140px; width: auto; display: block; }
.site-footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.site-footer__col { display: grid; gap: 0; align-content: start; }  /* f-14: gap durch Link-Padding ersetzt */
.footer-label { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.site-footer__col a {
  font-size: 15px; color: var(--ink); text-decoration: none;
  display: inline-block; padding: 11px 0; margin: -5px 0;  /* f-14: Tap-Ziel >=44px, Optik unverändert */
}
.site-footer__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__col .muted { font-size: 15px; color: var(--muted); }
.site-footer__bottom {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.site-footer__bottom p { margin: 0; font-size: 13px; color: var(--muted); }

/* ---------- WhatsApp-Button ---------- */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 150;
  width: 60px; height: 60px; border-radius: 20px; corner-shape: squircle;
  background: var(--wa); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(23, 40, 30, .28);
  transition: background .25s ease, transform .2s ease;
}
.wa-float:hover { transform: scale(1.07); background: var(--dark); }
/* Fixierter WA-Button verdeckt sonst die Footer-Schlusszeile (mobil bis 1120px, f-13) */
@media (max-width: 1120px) {
  .site-footer__inner { padding-bottom: 96px; }
  .site-footer__bottom { padding-right: 88px; }
}

/* ---------- Dialoge (natives <dialog>) ---------- */
dialog.modal {
  border: 0; margin: 0; padding: 24px; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  background: transparent; color: var(--ink);
}
dialog.modal[open] { display: flex; align-items: center; justify-content: center; }
dialog:not([open]) { display: none; }  /* Sicherheitsnetz für Browser ohne <dialog>-UA-Regel (f-60) */
dialog.modal::backdrop { background: rgba(23, 40, 30, .55); }
html:has(dialog[open]) { overflow: hidden; }
/* Breite der verschwundenen Scrollbar ausgleichen, damit Header/WA-Button beim
   Öffnen/Schließen nicht springen (f-23). --sbw wird in js/main.js VOR showModal()
   gesetzt: document.documentElement.style.setProperty('--sbw', (innerWidth - document.documentElement.clientWidth) + 'px').
   Ohne diesen JS-Anteil bleibt --sbw 0px und diese Regeln sind ein No-op. */
html:has(dialog[open]) body { padding-right: var(--sbw, 0px); }
html:has(dialog[open]) .site-header { right: var(--sbw, 0px); }
html:has(dialog[open]) .wa-float { right: calc(24px + var(--sbw, 0px)); }
.modal__box {
  position: relative; background: #fff; border-radius: 24px; corner-shape: squircle;
  padding: 48px; width: 480px; max-width: 100%;
  max-height: 90vh; max-height: min(90dvh, 100dvh - 48px); /* f-41: dvh statt vh gegen Browser-UI-Überlappung */
  overflow: auto;
}
.modal__box--wide { width: 560px; }
.modal__close {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px;
  border-radius: 14px; corner-shape: squircle; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 18px; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.modal__close:active { background: var(--surface); }
.modal h2 {
  margin: 0 0 8px; padding-right: 52px; font-weight: 700; font-size: 28px;
  letter-spacing: -.02em; color: var(--ink); hyphens: auto; overflow-wrap: break-word;
}  /* padding-right f-03: Platz vor dem ✕-Button; hyphens f-01 */
.modal__sub { margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.modal__options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }  /* f-03: verhindert Content-getriebene Mindestbreite */
@media (max-width: 320px) {
  .modal__box { max-width: calc(100vw - 32px); }  /* f-03: 280px-Viewport ohne horizontalen Scroll */
}
.option {
  display: flex; align-items: center; gap: 16px; min-width: 0; text-decoration: none;
  border-radius: 16px; corner-shape: squircle; padding: 18px 22px;
  transition: background .25s ease, color .25s ease, transform .2s ease;
}
.option svg { flex-shrink: 0; }
.option--wa { background: var(--wa); color: var(--dark); }  /* f-09: dunkler Text auf Markengrün statt Weiß, 7.79:1 */
.option--wa svg { fill: var(--dark); }
.option--wa:hover, .option--wa:active { color: #fff; }
.option--wa:hover svg, .option--wa:active svg { fill: #fff; }
.option--wa:hover { background: var(--dark); }
.option--wa:active { background: var(--dark-active); }
.option--mail { border: 1px solid var(--line); color: var(--ink); }
.option--mail:hover { background: var(--dark); color: #fff; border-color: var(--dark); }
.option--mail:hover svg { stroke: #fff; }
.option--mail:active { background: var(--dark-active); }
.option__text { display: grid; gap: 2px; min-width: 0; }
.option__text b { font-weight: 500; font-size: 17px; }
.option__text span { font-size: 14px; overflow-wrap: anywhere; }  /* f-03: unumbrechbare E-Mail-Adresse darf brechen */
.option--wa .option__text span { opacity: 1; }  /* f-09: volle Deckkraft für ausreichenden Kontrast */
.option--mail .option__text span { color: var(--muted); }
.option--mail:hover .option__text span { color: rgba(255, 255, 255, .8); }

.ref-dialog__logo { height: 64px; width: auto; margin-bottom: 24px; display: block; }
.ref-dialog__badge {
  display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); border: 1px solid var(--line); border-radius: 8px; corner-shape: squircle;
  padding: 6px 12px; margin-bottom: 16px;
}
.ref-dialog h2 { margin: 0 0 4px; font-size: 24px; }
.ref-dialog__desg { margin: 0 0 20px; font-size: 14px; color: var(--muted); }
.ref-dialog__service { margin: 0 0 12px; font-weight: 500; font-size: 15px; color: var(--ink); }
.ref-dialog__result { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.ref-dialog__link {
  color: var(--accent-ink); font-weight: 500; font-size: 16px; text-decoration: underline; text-underline-offset: 4px;
  display: inline-block; padding: 10px 0; margin: -10px 0;  /* f-14: Tap-Ziel >=44px, Optik unverändert */
}

/* ---------- Animationen ---------- */
@keyframes reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
/* Eigene Keyframes ohne opacity nur für den Hero: das Element gilt so von Anfang an
   als sichtbar/gemalt und bleibt LCP-fähig, nur die Slide-up-Bewegung bleibt (f-18) */
@keyframes reveal-load { from { transform: translateY(28px); } to { transform: none; } }
@keyframes floaty { from { transform: translateY(-12px); } to { transform: translateY(12px); } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes twblink { 50% { opacity: 0; } }

.reveal-load { animation: reveal-load .7s ease backwards; }  /* f-50: backwards statt both löst den Compositing-Layer nach Ende; f-18: kein opacity-Keyframe mehr */
.reveal { animation: reveal .7s ease both; }
/* Scroll-gesteuert wie im Design, wo der Browser es kann … */
@supports (animation-timeline: view()) {
  .reveal { animation-timeline: view(); animation-range: entry 0% entry 30%; }
}
/* … sonst IntersectionObserver-Fallback (Klasse kommt aus dem Head-Skript). */
.js-reveal .reveal { animation: none; opacity: 0; }
.js-reveal .reveal.is-in { animation: reveal .7s ease both; }

/* Typewriter-Cursor: main.js setzt diese Klasse, sobald die Schreibmaschine fertig
   ist, damit das Blinken nicht endlos weiterläuft (WCAG 2.2.2, f-31). */
.tw-cursor.tw-done { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .js-reveal .reveal, .reveal-load { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Druck ---------- */
@media print {
  /* Scroll-Animationen greifen beim Drucken nie: ohne Reset bleiben 7 von 8
     .reveal-Containern bei opacity:0 hängen, der Ausdruck wirkt leer (f-32). */
  .reveal, .reveal-load, .js-reveal .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .wa-float, .hero__pill, .skip-link, dialog { display: none !important; }
  .site-header { position: static; }
  .page, .frame, .screen, .hero, .angebot, .closing { min-height: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .person__grid { grid-template-columns: 320px 1fr; gap: 48px; }
}
/* Portrait-Tablets (z.B. 1024x1366): Screens sind höher als ihr Inhalt (f-16) */
@media (max-width: 1100px) and (orientation: portrait) {
  .screen, .hero, .angebot, .closing { min-height: auto; }
}
@media (max-width: 1000px) {
  .nav { display: none; }   /* Anker + Unterseiten bleiben über den Footer erreichbar (f-43: ab 1001px passt die Nav) */
}
@media (max-width: 960px) {
  .screen, .hero, .angebot, .closing { min-height: auto; }
  .wrap, .wrap--tight, .hero__inner { padding-left: 32px; padding-right: 32px; }
  .hero__inner { padding-top: 112px; }
  .person__grid { grid-template-columns: 1fr; gap: 40px; }
  .person__figure { max-width: 380px; }
  .doors { grid-template-columns: 1fr; gap: 32px; }   /* f-44: 3 Spalten sind 841-960px zu eng */
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .angebot { padding: 56px 32px; }
  .angebot__grid { grid-template-columns: 1fr; gap: 32px; }
  .refs { grid-template-columns: 1fr 1fr; }
  .refs__stack { display: contents; }
  .faq__grid { grid-template-columns: 1fr; }
  .site-footer__inner { padding: 48px 32px 24px; }
}
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .site-header__inner { padding: 12px 16px; gap: 12px; }
  .site-header__logo img { height: 30px; }
  .btn--small { font-size: 14px; padding: 11px 14px; }
  .wrap, .wrap--tight { padding: 56px 20px; }
  .hero__inner { padding: 96px 20px 32px; }
  .hero__title { font-size: 22px; }
  .hero__cta { gap: 20px; margin-top: 40px; }
  .btn:not(.btn--small) { width: 100%; white-space: normal; text-align: center; }
  .statement__wrap { padding: 32px 20px 64px; }
  .statement p { font-size: 22px; }
  .angebot { padding: 40px 16px; }
  .angebot__card { padding: 32px 24px; border-radius: 24px; }
  .refs { grid-template-columns: 1fr; }
  .ref { padding: 24px; }
  .kontakt h2 { font-size: 30px; }
  .site-footer__inner { padding: 40px 20px 24px; }
  .site-footer__logo img { height: 110px; }
  .site-footer__cols { gap: 32px 48px; }
  .modal__box { padding: 40px 24px 28px; }
  .wa-float { right: 16px; bottom: 16px; width: 56px; height: 56px; }
}

/* Silbentrennung in Ueberschriften nur dort, wo sie einen Ueberlauf
   verhindert. hyphens:auto ist bei schmalen Spalten die Rettung, bei
   breiten erzeugt es Trennstriche mitten im Wort, wo genug Platz waere:
   gemessen brach ".door h3" zwischen 2000 und 2799px "einge-/fuehrt",
   waehrend dieselbe Ueberschrift bei 1999px und ab 2800px sauber lief.
   Ab 700px ist jede dieser Ueberschriften-Spalten breit genug, dass
   Trennung nicht mehr noetig ist. overflow-wrap:anywhere bleibt als
   Notbremse fuer ein wirklich zu langes Wort bestehen. */
@media (min-width: 700px) {
  .h2, .angebot__price, .door h3, .step h3, .modal h2 { hyphens: manual; }
}

/* Der Dialog-Titel "Erstgespraech gratis" brach bei 320 bis 339px in drei
   Zeilen, die erste mit Trennstrich als "Erstge-/spraech". Gleiche Loesung
   wie bei f-40 weiter oben: nicht die Trennung erzwingen, sondern die
   Schrift so weit zuruecknehmen, dass das Wort in eine Zeile passt.
   Per Playwright vermessen: bei 24px passt "Erstgespraech" ab 300px
   ungetrennt in eine Zeile, der Titel wird zweizeilig. */
@media (max-width: 360px) {
  .modal h2 { font-size: 24px; hyphens: manual; }
}
/* f-40: Bei <=364px reicht die Zeilenbreite nicht mehr für „Vom ersten Gespräch“
   in 30px, wodurch hyphens:auto das Wort zu „Ge-/spräch“ trennt bzw. „Umsetzung“
   nach dem harten <br> als Waisenkind in eine eigene Zeile fällt. Den <br> per CSS
   auszublenden ist keine Option: Im Markup steht zwischen „Gespräch“ und „bis“ kein
   Leerzeichen (nur der Zeilenumbruch trennt), display:none auf dem <br> würde die
   Wörter messbar zu „Gesprächbis“ verschmelzen (0px Abstand, per Playwright-Range
   nachgemessen). Stattdessen die Schriftgröße nur dieser Überschrift so weit
   reduzieren, dass beide Hälften bis 280px sauber in zwei Zeilen passen (per
   Playwright/getClientRects vermessen: 22px ist hyphenationsfrei bis 364px, ab
   365px reicht bereits die volle Größe). */
@media (max-width: 364px) {
  #ablauf-title { font-size: 22px; }
}
/* f-02: Logo + Header-CTA kollidieren unter ~400px (Button wird abgeschnitten) */
@media (max-width: 400px) {
  .site-header__inner { padding: 12px 12px; gap: 8px; }
  .site-header__logo { flex: 0 1 auto; min-width: 0; max-width: 140px; }
  .site-header__logo img { max-width: 100%; height: auto; max-height: 28px; }
  .btn--small {
    flex: 0 1 auto; white-space: normal; text-align: center; line-height: 1.1;
    padding: 8px 10px; min-height: 44px; font-size: 13px;
  }
}
/* Niedrige Viewports (Landscape-Handys): Header nimmt sonst >20% der Höhe ein (f-39),
   der Erstgespräch-Dialog braucht internes Scrollen (f-38) */
@media (max-height: 480px) {
  :root { --header-h: 60px; }
  .site-header__inner { padding: 8px 32px; }
  .site-header__logo img { height: 36px; }
  .btn--small { padding: 10px 18px; }
  .hero__inner { padding-top: 84px; }
  .modal__box { padding: 24px 24px 20px; }
  .modal h2 { font-size: 22px; }
  .modal__sub { margin-bottom: 14px; }
  .option { padding: 12px 16px; }
  .modal__close { top: 12px; right: 12px; }
}

/* ---------- Große Bildschirme: gestufte Vergrößerung ----------
   Drei Stufen (1500 / 2000 / 2800px) statt vormals zwei (2000 / 2800px):
   ein 1920px-Bildschirm bekam bisher gar keine Stufe (naechster Sprung erst
   bei 2000px). Alles laeuft ueber die Tokens aus :root (siehe dort).
   Unterhalb von 1500px aendert sich nichts (Tokens dort auf IST-Werte
   gesetzt). Lesetext-Grundgroesse laut 01_DESIGN.md ist 17-18px; --fs-bump
   traegt das zusammen mit den fuenf calc(17px + var(--fs-bump))-Regeln
   (.person__text p, .angebot__grid > p, .angebot__note, .faq details p,
   .kontakt__sub) zu 17/18/19/20px je Stufe. Deren max-width in ch (ebenso
   .door p, das keine eigene fs-bump-Stufung hat) braucht KEINE eigene
   Override-Regel je Stufe mehr: ch skaliert automatisch mit der jeweils
   aktuellen Schriftgroesse des Elements mit, die Zeichenzahl/Zeile bleibt
   dadurch stufenuebergreifend konstant (per Playwright nachgemessen, siehe
   Bericht). --hero-max/--statement-max/--card-max/--footer-max wachsen im
   selben Verhaeltnis wie --container-max (1360 -> 1440/1560/1720) mit,
   --wrap-max ebenso (1080 -> 1144/1239/1366), sonst kippt die
   Groessenordnung zwischen Hero/Abschnitten/Fuss (siehe Kommentar oben
   bei den Tokens). */
@media (min-width: 1500px) {
  :root {
    --container-max: 1440px;
    --wrap-max: 1144px;
    --space-scale: 1.06;
    --fs-bump: 1px;
    --h2-scale: 1.04;
    /* gleiches Verhältnis wie --container-max (1360 -> 1440) */
    --hero-max: 1186px;
    --statement-max: 678px;
    --card-max: 1059px;
    --footer-max: 1144px;
    --portrait-w: 420px;
  }
}
@media (min-width: 2000px) {
  :root {
    --container-max: 1560px;
    --wrap-max: 1239px;
    --space-scale: 1.12;
    --fs-bump: 2px;
    --h2-scale: 1.08;
    /* gleiches Verhältnis wie --container-max (1360 -> 1560) */
    --hero-max: 1285px;
    --statement-max: 734px;
    --card-max: 1147px;
    --footer-max: 1239px;
    --portrait-w: 470px;
  }
}
@media (min-width: 2800px) {
  :root {
    --container-max: 1720px;
    --wrap-max: 1366px;
    --space-scale: 1.25;
    --fs-bump: 3px;
    --h2-scale: 1.16;
    /* gleiches Verhältnis wie --container-max (1360 -> 1720) */
    --hero-max: 1416px;
    --statement-max: 809px;
    --card-max: 1265px;
    --footer-max: 1366px;
    --portrait-w: 520px;
  }
}