/* Lohschmidt Homepage-Relaunch 2026 — Build v1
   Farbleitlinie „Bold Green mit Rollen" (Variante C):
   Grün laut nur an großen Momenten (Nav-Kontakt, CTA-Band, 5,0-Banner, Footer),
   dazwischen ruhige neutrale Flächen. Vollgrün nur für große/fette Texte (≥18px),
   Kleingedrucktes auf green-700 (laut tokens/colors.json der Ton für Text auf hellem Grund).
   Motion: nur opacity/transform, 200–700 ms, alles hinter .js + reduced-motion-Fallback. */

@font-face { font-family: 'Hermes Maia'; src: url('assets/fonts/hermes_maia_2_regular.woff2') format('woff2'); font-weight: 300; font-display: fallback; }
@font-face { font-family: 'Hermes Maia'; src: url('assets/fonts/hermes_maia_4_regular.woff2') format('woff2'); font-weight: 400; font-display: fallback; }
@font-face { font-family: 'Hermes Maia'; src: url('assets/fonts/hermes_maia_6_regular.woff2') format('woff2'); font-weight: 600; font-display: fallback; }

:root {
  --green: #39A935;
  --green-50: #EAF8E9;
  --green-400: #4FBA4A;
  --green-700: #246E22;   /* Text auf hellem Grund und Hover — laut tokens/colors.json;
                             als Hover gewählt statt green-600, weil weiße Schrift darauf
                             6,31:1 erreicht statt 4,28:1 */
  --green-800: #1B511A;   /* sehr dunkel, laut CD ausdrücklich selten */
  --black: #000;
  --n50: #FAFAFA;
  --n100: #F4F4F5;
  --n200: #E4E4E7;
  --n300: #D4D4D8;
  --n500: #71717A;
  --n700: #3F3F46;
  --beige: #EFEEEB;
  --schrift: 'Hermes Maia', 'Aptos', 'Calibri', Arial, sans-serif;
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);
  --spalte-max: 1180px;
  --rand: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }
html {
  --kopf-hoehe: 74px;   /* gemessene Höhe der klebenden Kopfzeile */
  scroll-behavior: smooth;
  /* Der Header klebt oben und wäre sonst über dem Ziel: scroll-padding hält den
     Sprung um genau seine Höhe zurück, damit der Abschnitt direkt darunter
     beginnt statt teilweise darunter zu verschwinden. */
  scroll-padding-top: var(--kopf-hoehe);
}
body {
  margin: 0;
  font-family: var(--schrift);
  font-weight: 400;
  color: var(--black);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3, h4, p, ul, figure, blockquote) { margin: 0; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

.spalte { max-width: var(--spalte-max); margin-inline: auto; padding-inline: var(--rand); }

.kicker {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 14px;
}
.sekt-kopf { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.sekt-kopf h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 600; line-height: 1.15; text-wrap: balance; }
.sekt-kopf .einleitung { margin-top: 16px; font-size: clamp(16px, 1.6vw, 19px); color: var(--n700); }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  /* Safari kannte die Eigenschaft bis Version 17 nur mit Präfix. Ohne die erste
     Zeile bliebe die Kopfzeile dort einfach mattweiß statt durchscheinend. */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--n200);
}
.nav-innen {
  display: flex; align-items: center;
  gap: 24px; padding-block: 14px;
}
/* Logo links, alles Übrige rechts — der Knopf ist jetzt ein eigenes Element neben
   der Liste, space-between würde die drei Teile sonst auseinanderziehen. */
.nav-innen > nav { margin-left: auto; }
/* max-width: none hebt die globale Regel aus Zeile 53 auf. Sonst kappt sie in der
   schmalen Kopfzeile die Breite, während die Höhe bei 30px bleibt — das Logo wird
   dann gestaucht statt kleiner. Auf schmalen Geräten sinkt stattdessen die Höhe,
   damit es neben Kontakt-Knopf und Menüsymbol passt. */
.nav-logo img { height: 30px; width: auto; max-width: none; aspect-ratio: 20 / 3; }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 34px); list-style: none; margin: 0; padding: 0; }
/* padding-block vergrößert die Klickfläche auf 40px Höhe, ohne die Optik zu ändern.
   Beim Überfahren wächst eine grüne Linie von links unter dem Wort hervor — ein
   Farbwechsel von Grau nach Schwarz allein war zu unscheinbar. */
.nav-links a {
  position: relative;
  text-decoration: none; font-size: 15.5px; color: var(--n700);
  padding-block: 10px; display: inline-block;
  transition: color 200ms;
}
/* Der Kontakt-Knopf steht außerhalb dieser Liste und ist selbst schon die
   Hervorhebung — er bekommt deshalb keinen Unterstrich. */
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: var(--green); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 260ms var(--kurve);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--black); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .nav-links a::after { transition: none; } }

/* ---------- Menü-Schalter (nur im schmalen Fenster) ----------
   Ohne ihn waren unter 860px alle Navigationspunkte außer „Kontakt" schlicht
   ausgeblendet — auf dem Telefon gab es also gar keine Navigation. */
.nav-schalter {
  display: none;
  width: 44px; height: 44px; padding: 0; margin-right: -10px;
  border: 0; background: none; cursor: pointer;
  align-items: center; justify-content: center;
}

/* iOS legt beim Antippen eine graue Kachel über Schaltflächen. Bei Symbolen und
   Punkten ohne eigene Fläche sieht das nach einem Fehler aus, nicht nach
   Rückmeldung — die geben diese Bedienelemente ohnehin selbst: Das Menüsymbol
   dreht sich zum Kreuz, der aktive Punkt färbt sich, der Schieber bewegt sich.
   Gilt bewusst nur für <button>: Flächige Links wie „Kontakt" oder „Persönliche
   Beratung" dürfen die Kachel behalten, dort wirkt sie wie gewollt.

   Der WhatsApp-Knopf ist zwar ein Link, gehört hier aber dazu: Der erste Tipp
   fährt ihn nur aus, statt zu navigieren. Eine graue Kachel ohne folgenden
   Seitenwechsel sieht aus, als sei etwas schiefgegangen — die Rückmeldung ist
   die Fahrbewegung selbst. */
button, .wa-knopf { -webkit-tap-highlight-color: transparent; }
.nav-schalter:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; border-radius: 6px; }
.nav-balken { position: relative; }
.nav-balken, .nav-balken::before, .nav-balken::after {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--black);
  transition: transform 260ms var(--kurve), background-color 160ms;
}
.nav-balken::before, .nav-balken::after { content: ""; position: absolute; left: 0; }
.nav-balken::before { transform: translateY(-7px); }
.nav-balken::after { transform: translateY(7px); }
.nav.offen .nav-balken { background: transparent; }
.nav.offen .nav-balken::before { transform: rotate(45deg); }
.nav.offen .nav-balken::after { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-balken, .nav-balken::before, .nav-balken::after { transition: none; }
}
.cta-nav {
  background: var(--green); color: #fff !important;
  font-weight: 600; font-size: 15.5px;
  padding: 10px 22px; border-radius: 6px; text-decoration: none;
  transition: background 200ms, transform 200ms var(--kurve);
}
.cta-nav:hover { background: var(--green-700); transform: translateY(-1px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(540px, 78vh, 760px);
  display: flex; align-items: center;
  color: #fff;
  /* Fallback bis das Video lädt: warmes, dunkles Ambiente wie im freigegebenen Mock */
  background: linear-gradient(120deg, #6b6257 0%, #8a7f6e 55%, #a99c86 100%);
  overflow: hidden;
}
/* Das Video blendet erst auf, wenn es wirklich läuft (Klasse .laeuft aus app.js).
   Darunter liegt der Farbverlauf des Hero, dadurch gibt es beim Start keinen harten
   Sprung von Fläche auf Bewegtbild. */
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 900ms ease;
}
.hero-video.laeuft { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-video { transition: none; } }
/* Abdunklungs-Overlay fürs Video (REVIEW A2: Lesbarkeit frameunabhängig, ~30–35 % Schwarz) */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.28));
}
/* Der Kasten spannt über die volle Spaltenbreite, damit seine linke Innenkante mit
   der der Seite zusammenfällt — Logo, Überschriften und Hero-Text stehen dann in
   einer Flucht. width: 100% ist dabei nötig und nicht nur Beiwerk: Der Hero ist ein
   Flex-Container, und margin-inline: auto würde den Kasten sonst auf seiner
   Inhaltsbreite zentrieren statt auf der Spaltenbreite. Die Zeilenlänge begrenzt
   jetzt die Überschrift selbst, damit die Umbrüche unverändert bleiben. */
.hero-innen {
  position: relative; z-index: 2;
  padding-block: clamp(72px, 10vw, 120px);
  max-width: var(--spalte-max); width: 100%;
}
.hero h1 {
  /* Ausgangswert war clamp(38px, 5.6vw, 68px), davon erst 10 %, dann noch einmal
     5 % abgezogen. Alle drei Werte gleich verkleinert, damit das Wachstum über die
     Fensterbreiten dasselbe bleibt. Der Untertitel darunter ist unverändert. */
  font-size: clamp(32px, 4.79vw, 58px);
  /* Begrenzt jetzt die Zeilenlänge, die vorher am Kasten hing */
  max-width: 860px;
  font-weight: 600; line-height: 1.08;
  text-wrap: balance;
}
.hero .sub {
  margin-top: 22px;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 300;
  max-width: 620px;
  color: #f2efe9;
}
.hero .cta {
  display: inline-block; margin-top: 36px;
  background: var(--green); color: #fff;
  font-weight: 600; font-size: 17px;
  padding: 15px 32px; border-radius: 6px; text-decoration: none;
  transition: background 200ms, transform 250ms var(--kurve), box-shadow 250ms;
}
.hero .cta:hover { background: var(--green-400); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }

/* Hero-Einstiegs-Choreographie (nur mit JS) */
.js .hero [data-intro] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--kurve), transform 700ms var(--kurve); }
.js .hero.start [data-intro] { opacity: 1; transform: none; }
.js .hero [data-intro="2"] { transition-delay: 140ms; }
.js .hero [data-intro="3"] { transition-delay: 280ms; }

/* ---------- Zahlen-Leiste ---------- */
.zahlen { background: var(--n100); border-bottom: 1px solid var(--n200); }
.zahlen-innen {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px; padding-block: clamp(26px, 3.5vw, 40px);
  text-align: center;
}
.zahl .wert { font-size: clamp(26px, 3vw, 38px); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.zahl .wert .stern { color: var(--green); }
/* n700 statt n500: Die Leiste liegt auf --n100, dort erreicht n500 nur 4,40:1 und
   verfehlt die geforderten 4,5:1 fuer Normaltext. n700 kommt auf 9,50:1. Auf
   weissem Grund bleibt n500 anderswo unveraendert, dort genuegt es. */
.zahl .label { margin-top: 4px; font-size: 14px; color: var(--n700); }

/* ---------- Sektionen ---------- */
.sekt { padding-block: clamp(64px, 9vw, 110px); }
.sekt.leistungen { background: #fff; }
.sekt.usps { background: var(--beige); }
.sekt.prozess { background: #fff; }
.sekt.ueber { background: var(--n50); }
.sekt.stimmen { background: #fff; padding-top: 0; }
.sekt.kontakt { background: var(--n50); }

/* ---------- Leistungen ---------- */
/* minmax(0, 1fr) statt 1fr: sonst wächst die Spalte auf die intrinsische Breite des
   randlosen Kartenfotos (das max-width:none trägt) und die Seite läuft seitlich über */
.karten-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.karte {
  min-width: 0;
  background: var(--n50); border: 1px solid var(--n200); border-radius: 10px;
  padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 16px;
  transition: transform 300ms var(--kurve), box-shadow 300ms var(--kurve), border-color 300ms;
}
.karte { padding-top: 0; overflow: hidden; }
.karte:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.08); border-color: var(--n300); }
/* Foto randlos: die horizontale Kartenpolsterung wird per negativem Margin ausgeglichen */
/* Die Karte zeigt 16:9 aus einem 3:2-Bild. Bei mittigem Beschnitt fallen oben und
   unten je 57 px weg — das kappt Köpfe. Der Ausschnitt wird deshalb nach oben
   verschoben, unten geht dabei nur Tischfläche verloren. */
.karte-foto {
  width: calc(100% + 2 * clamp(24px, 3vw, 36px)); height: auto;
  aspect-ratio: 16 / 9; object-fit: cover; object-position: center 22%; max-width: none;
  margin: 0 calc(-1 * clamp(24px, 3vw, 36px)) 4px;
  transition: transform 500ms var(--kurve);
}
.karte:hover .karte-foto { transform: scale(1.04); }
/* ---------- Icons (Heroicons Outline, inline eingebunden) ----------
   Inline statt <img>, damit currentColor gegen die CSS-Farbe auflöst und die Icons
   über Hover und Sektionsfarbe steuerbar bleiben.
   Die Strichstärke wird je Anzeigegröße nachgeführt: 1.5 auf 24er-Raster wird bei
   96 px optisch schwer und bei 28 px zu dünn. */
.icon { display: block; }
.icon-leistung { stroke-width: 1.25; color: var(--black); }
.icon-usp      { stroke-width: 1.4;  color: var(--black); }
.icon-schritt  { stroke-width: 1.6;  color: var(--black); }
.icon-kontakt  { stroke-width: 1.7;  color: var(--green-700); }
/* Icon und Überschrift in einer Zeile: spart Höhe und bindet das Symbol an den
   Begriff, statt es freistehend darüber zu setzen. */
.karte-kopf { display: flex; align-items: center; gap: 16px; }
.karte .icon { width: 56px; height: 56px; flex-shrink: 0; }
.karte h3 { font-size: clamp(19px, 1.9vw, 23px); font-weight: 600; line-height: 1.25; }
.karte p { color: var(--n700); font-size: 16px; flex-grow: 1; }
/* Nicht auf .karte einschränken: der Link „Unser Team kennenlernen" steht außerhalb
   einer Karte und blieb deshalb ohne die Pfeilbewegung. */
.lnk {
  font-weight: 600; font-size: 15.5px; color: var(--green-700); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.lnk .pfeil { transition: transform 250ms var(--kurve); }
.lnk:hover .pfeil, .lnk:focus-visible .pfeil { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .lnk .pfeil { transition: none; } }

/* ---------- CTA-Band (großer Grün-Moment) ---------- */
.band { background: var(--green); color: #fff; }
.band-innen {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding-block: clamp(36px, 5vw, 54px); flex-wrap: wrap;
}
.band h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; line-height: 1.25; max-width: 520px; text-wrap: balance; }
.band .btn {
  background: #fff; color: var(--green-700);
  font-weight: 600; font-size: 16.5px;
  padding: 14px 30px; border-radius: 6px; text-decoration: none; text-align: center;
  transition: transform 250ms var(--kurve), box-shadow 250ms;
}
.band .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }

/* ---------- USPs ---------- */
.karten-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.usp {
  background: #fff; border: 1px solid var(--n200); border-radius: 10px;
  padding: clamp(24px, 3vw, 34px);
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: start;
  transition: transform 300ms var(--kurve), box-shadow 300ms var(--kurve);
}
/* Ohne minmax(0, 1fr) oben und die Trennung hier gibt die Textspalte ihre
   Mindestbreite nicht her: „Versicherungsgesellschaft" ist breiter als die Spalte
   bei 300px Fenster, und die Seite lief waagerecht über. */
.usp > div { min-width: 0; -webkit-hyphens: auto; hyphens: auto; }
.usp:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.07); }
.usp .icon { width: 72px; height: 72px; }
.usp h3 { font-size: clamp(18px, 1.8vw, 21px); font-weight: 600; line-height: 1.3; text-wrap: balance; }
.usp p { margin-top: 8px; color: var(--n700); font-size: 15.5px; }

/* ---------- Inline-Zitat mit Rotation ----------
   Alle Stimmen liegen übereinander in einer Bühne; nur die aktive ist sichtbar.
   Die Bühnenhöhe richtet sich nach dem längsten Zitat, damit beim Wechsel nichts springt. */
.zitat { max-width: 780px; margin: clamp(44px, 6vw, 64px) auto 0; text-align: center; }
.zitat .sterne { color: var(--green); font-size: 18px; letter-spacing: 3px; }
.zitat-buehne { position: relative; margin-top: 12px; }
.zitat-text {
  font-size: clamp(17px, 1.9vw, 21px); font-weight: 300; line-height: 1.55;
}
.zitat-text cite {
  display: block; margin-top: 12px; font-size: 14.5px; color: var(--n500); font-style: normal;
}
/* Ohne JavaScript stehen alle Zitate untereinander — sichtbar, nur nicht rotierend */
.js .zitat-buehne { display: grid; }
.js .zitat-text {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity 600ms var(--kurve);
}
.js .zitat-text.ist-da { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .js .zitat-text { transition: none; } }

/* ---------- Prozess ---------- */
/* 4 Spalten; die Verbindungslinie startet in Kreismitte 1 (halbe Kreisbreite = 32px)
   und läuft über den vierten Schritt hinaus in eine Pfeilspitze: die Betreuung endet
   nicht mit Schritt 4, sondern geht weiter. */
.schritte {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 26px; --pfeil: 15px;
}
/* Graue Grundlinie liegt auf Kreismitte (Kreis 64px hoch, Rahmen 2px → Mitte bei 32px) */
.schritte::before {
  content: ""; position: absolute; left: 32px; right: var(--pfeil);
  top: 32px; margin-top: -1px; height: 2px;
  background: var(--n200); z-index: 0;
}
/* Grüne Linie und Pfeilspitze sitzen im selben Element und werden gemeinsam von links
   aufgedeckt (clip-path statt scaleX): so zieht die Spitze die Linie, statt am Ende
   aufzupoppen — und sie wird dabei nicht verzerrt. */
.schritte .linie {
  position: absolute; left: 32px; right: 0; top: 32px;
  height: 14px; margin-top: -7px; z-index: 1;
  color: var(--green);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1600ms var(--kurve) 200ms;
}
.schritte.in .linie { clip-path: inset(0 0 0 0); }
/* Die Linie läuft bis unter den Scheitel des Chevrons: gleiche Farbe, keine Lücke,
   der Pfeil wirkt als Fortsetzung statt als angesetztes Zeichen */
.schritte .linie::before {
  content: ""; position: absolute; left: 0; right: calc(var(--pfeil) * 0.26);
  top: 50%; margin-top: -1px; height: 2px;
  background: currentColor;
}
.linie-pfeil {
  position: absolute; right: 0; top: 50%;
  width: var(--pfeil); height: 14px; margin-top: -7px;
}
/* Alle Schritte teilen dasselbe Zeilenraster, damit Fotos, Überschriften und
   Fließtext nebeneinander auf gleicher Höhe beginnen — auch bei zweizeiliger Überschrift */
.schritt {
  position: relative; z-index: 2; text-align: left;
  display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0;
}
.schritte { grid-template-rows: auto auto auto auto; }
.schritt .nummer {
  width: 64px; height: 64px; border-radius: 50%;
  /* Ringstärke = Strichstärke des Icons (R9): so liest sich beides als ein Formsystem */
  background: #fff; border: 1.6px solid var(--n200);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  transition: border-color 400ms 600ms;
}
.schritte.in .schritt .nummer { border-color: var(--green); }
.schritt .nummer .icon { width: 36px; height: 36px; }
.schritt-foto {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin-bottom: 16px;
  filter: saturate(0.92);
}
.schritt h3 { font-size: 18.5px; font-weight: 600; text-wrap: balance; align-self: start; }
.schritt h3 .nr { color: var(--green-700); margin-right: 6px; }
.schritt p { margin-top: 8px; font-size: 15px; color: var(--n700); }

/* ---------- Über uns ---------- */
.ueber-grid { display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.ueber-text h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 600; line-height: 1.15; margin-bottom: 18px; text-wrap: balance; }
.ueber-text p { font-size: clamp(16px, 1.7vw, 18.5px); color: var(--n700); }
.ueber-text p + p { margin-top: 16px; }
.ueber-text .lnk { display: inline-flex; gap: 6px; margin-top: 22px; font-weight: 600; color: var(--green-700); text-decoration: none; font-size: 16px; }

/* Gegenläufiger Personen-Slider — Adaption des Agentur-Aufschlags (zwei vertikale Spalten,
   Schwarz-Weiß). Verbessert: ~halbes Tempo, und die 13 Porträts sind disjunkt auf die Spalten
   verteilt (7 links / 6 rechts) — dieselbe Person kann nie zweimal gleichzeitig zu sehen sein. */
.team-slider { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: clamp(460px, 58vw, 620px); }
/* Weiche Kanten oben/unten: der Anschnitt der laufenden Spalte liest sich als gewollt,
   nicht als abgeschnittenes Bild */
/* Der Graustufen-Filter sitzt auf der Spalte, nicht auf jedem Bild: sonst müsste der
   Browser bei jedem Frame 26 Einzelfilter neu rechnen — das war die Ruckelursache.
   Beim Überfahren hält die Spalte an und wird farbig. */
.slider-spalte {
  overflow: hidden; border-radius: 10px;
  -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent);
  filter: grayscale(1);
  transition: filter 500ms var(--kurve);
}
/* .zeiger statt :hover — die Klasse setzt app.js erst bei echter Mausbewegung.
   Grund: Browser werten :hover auch dann neu aus, wenn Inhalt unter einem
   stillstehenden Zeiger durchscrollt. */
.team-slider.zeiger .slider-spalte { filter: grayscale(0); }
.slider-spur {
  display: flex; flex-direction: column; gap: 16px;
  will-change: transform;              /* eigener Compositor-Layer, ruhigerer Lauf */
  backface-visibility: hidden;
}
.slider-spur img {
  /* height:auto ist nötig, weil das height-Attribut im Markup sonst aspect-ratio aushebelt */
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px;
}
/* translate3d statt translateY: erzwingt die Bewegung auf der GPU */
/* Die Spuren laufen erst los, wenn alle Porträts geladen sind (.bereit aus app.js) —
   sonst schieben sich leere Plätze durchs Bild. Bis dahin steht die Spur still und
   blendet sanft auf, statt ruckartig zu erscheinen. */
.js .team-slider .slider-spur { opacity: 0; transition: opacity 500ms ease; }
.js .team-slider.bereit .slider-spur { opacity: 1; }
.js .team-slider.bereit .lauf-hoch { animation: lauf-vertikal 80s linear infinite; }
.js .team-slider.bereit .lauf-runter { animation: lauf-vertikal 72s linear infinite reverse; }
@keyframes lauf-vertikal { to { transform: translate3d(0, calc(-50% - 8px), 0); } }
/* Diese Pause war bis zum 11.08.2026 wirkungslos: Mit drei Klassen (0,3,0) verlor
   sie gegen die animation-Kurzform zwei Zeilen darueber (0,4,0), die implizit
   animation-play-state: running mitbringt. Nachgemessen. Jetzt fuenf Klassen. */
.js .team-slider.bereit.zeiger .slider-spur { animation-play-state: paused; }
/* Im Hintergrund-Tab steht die Bewegung ebenfalls still, siehe app.js. */
.js.tab-verborgen .team-slider.bereit .slider-spur { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .slider-spur { animation: none !important; }
  .slider-spalte { overflow-y: auto; }
}
/* ---------- Zertifikate im Footer ----------
   Bewusst dezent: TÜV-Prüfungen und die VEMA-Mitgliedschaft sind Nachweise für
   Fachpublikum, kein Verkaufsargument für Mandanten. Sie stehen deshalb unten,
   monochrom in Weiß auf Grün, und werden erst bei Hover voll deckend. */
/* Zwei getrennte Gruppen: eine Prüfung ist etwas anderes als eine Mitgliedschaft,
   deshalb eigene Beschriftung je Gruppe und eine dezente Trennlinie dazwischen. */
.foot-siegel {
  grid-column: 1 / -1;
  margin-top: 18px;
  /* Eigene dunklere Flaeche statt Vollgruen. Grund ist die Farbleitlinie des
     Projekts: Auf Vollgruen gehoeren nur grosse oder fette Texte ab 18px,
     Kleingedrucktes auf green-800. Die Erklaerungen neben den Pruefzeichen sind
     11,5px — auf Vollgruen kamen sie auf 2,54:1 und waren damit nicht lesbar.
     Auf green-800 sind es 9,38:1. Die Trennlinie wird durch die Flaeche ersetzt,
     sie trennt jetzt von selbst. */
  background: var(--green-800);
  border-radius: 10px;
  padding: 20px 22px;
  display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start;
}
/* Zwei Blöcke nebeneinander, solange Platz ist — mit Text neben dem Zeichen
   brauchen sie deutlich mehr Breite als vorher und rutschen früher untereinander. */
.fs-gruppe { flex: 1 1 380px; min-width: 0; }
.fs-gruppe + .fs-gruppe {
  padding-left: 30px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}
/* Zeichen an der Oberkante des Textes, nicht mittig dazu. Bei mittiger Ausrichtung
   wandert jede Kachel je nach Zeilenzahl ihres Textes anders — bei schmalem Fenster
   standen TÜV und VEMA dadurch auf unterschiedlichen Höhen und das sah nach Fehler
   aus. An der Oberkante beginnen beide immer gleich. */
.fs-inhalt { display: flex; align-items: flex-start; gap: 14px; }
/* min-width: 0 hebt die Vorgabe auf, dass ein Flex-Element mindestens so breit
   sein muss wie sein längstes Wort. Ohne das erzwang „Einkaufsgemeinschaft" neben
   der 150px-Kachel eine Mindestbreite von 294px — bei 320px Fensterbreite lief die
   Seite dadurch waagerecht über. Trennung erlaubt zusätzlich den Umbruch im Wort. */
.fs-inhalt .fs-hinweis { margin-top: 0; max-width: none; min-width: 0; -webkit-hyphens: auto; hyphens: auto; }
.fs-hinweis {
  margin-top: 10px;
  font-size: 11.5px; line-height: 1.5;
  /* Volles Weiss statt 75 Prozent: Auf Vollgruen ergaben 75 Prozent 2,54:1 —
     unlesbar. Traegt aber erst zusammen mit der dunkleren Flaeche, siehe
     .foot-siegel. */
  color: #fff;
}
.fs-hinweis a { color: #fff; text-underline-offset: 2px; }
.fs-titel {
  display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; margin-bottom: 8px;
}
/* Auf schmalen Flächen stehen die Gruppen untereinander — dann trennt eine
   waagerechte Linie, eine senkrechte hinge sonst in der Luft. */
@media (max-width: 640px) {
  .foot-siegel { gap: 20px; }
  .fs-gruppe + .fs-gruppe {
    padding-left: 0; border-left: 0;
    padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.25);
    width: 100%;
  }
}

/* Beide Logos liegen farbig vor und werden im Ruhezustand weiß gerechnet.
   Beim Überfahren erscheinen die Originalfarben — dafür ist eine weiße Fläche
   zwingend: gemessen am 09.08.2026 erreicht das rote V von TÜV Austria auf
   Lohschmidt-Grün nur 1,64:1 und das Blau von TÜV Rheinland 1,70:1. Der Richtwert
   für grafische Elemente liegt bei 3:1 (WCAG 1.4.11). Auf Weiß sind es 4,98:1
   bzw. 5,17:1. Ohne die Fläche wären die Farbfassungen praktisch unlesbar. */
/* Alle drei Felder sind gleich hoch, damit die weißen Flächen beim Überfahren
   eine Linie bilden. Die optische Angleichung passiert über die Bildhöhe INNERHALB
   des Feldes, nicht über das Feld selbst: TÜV Austria ist zweizeilig gesetzt,
   Rheinland trägt einen Claim, VEMA ist eine reine Wortmarke — bei gleicher
   Bildhöhe wirkten sie unterschiedlich groß. */
/* Kachelbreite richtet sich nach dem Zeichen. VEMA ist deutlich breiter als
   TÜV Austria — das ist die Form der Marke und soll so sein; eine erzwungene
   Einheitsbreite hat beide Zeichen nur gestaucht. */
/* Als .foot .fs-marke geschrieben, nicht als .fs-marke: Die allgemeine Regel
   .foot a ist spezifischer und hat sonst display und padding-block überschrieben.
   Die Kachel war dadurch kein Flex-Kasten mehr, align-items blieb wirkungslos und
   das Zeichen klebte an der Oberkante statt in der Mitte. */
.foot .fs-marke {
  display: inline-flex; align-items: center; justify-content: center;
  height: 64px; padding: 10px 16px; border-radius: 8px;
  background: #fff;
}
/* Prüfzeichen stehen dauerhaft in ihren Originalfarben auf weißer Fläche.
   Die frühere Fassung legte sie als weiße Silhouetten bei 72 % Deckkraft an und
   zeigte die Farben erst beim Überfahren. Das ist eine Veränderung des Zeichens
   und nach den Nutzungsbedingungen der Zertifizierer nicht zulässig — TÜV
   Rheinland verlangt ausdrücklich die „unveränderte Form" (APZB Punkt 14). */
/* max-width: none hebt die globale Regel img{max-width:100%} auf. Die griff hier
   und stauchte die Zeichen: Der Flex-Kasten misst sich am Inhalt, der Inhalt
   begrenzt sich am Kasten — die Auflösung dieses Zirkels quetschte das Bild auf
   ein Seitenverhältnis von 1,02 statt 1,77. object-fit: contain hat den Rest
   dann als Leerraum im Kasten dargestellt, deshalb wirkten die Zeichen klein. */
.fs-marke img { width: auto; max-width: none; object-fit: contain; }
/* Das TÜV-Austria-Zeichen ist ein Link auf die Zertifikatsprüfung. Erkennbar wird
   das über die weiße Fläche darunter — das Zeichen selbst bleibt unangetastet. */
a.fs-marke { transition: box-shadow 200ms; }
a.fs-marke:hover, a.fs-marke:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }
a.fs-marke:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { a.fs-marke { transition: none; } }
/* Feste Pixelhöhe statt Prozent: Prozent bezieht sich auf den Inhaltskasten des
   Flex-Elements, und der hing hier von der Bildgröße ab — ein Zirkelbezug, dessen
   Auflösung sich je nach Browser unterscheidet. 44px ist die Innenhöhe der Kachel.
   Beide Zeichen gleich hoch; weil VEMA fast doppelt so breit gebaut ist
   (Seitenverhältnis 3,37 gegenüber 1,77), wird seine Kachel entsprechend breiter. */
/* Geometrisch mittig, ohne Korrekturversatz. Ich hatte hier zwischenzeitlich eine
   optische Mitte über den Farbschwerpunkt gerechnet — das war die Antwort auf eine
   Frage, die sich nicht stellte: Der wahre Grund für den schiefen Sitz war, dass
   .foot a die Kachel vom Flex-Kasten zum inline-block gemacht und align-items
   ausgehebelt hatte. Mit korrektem Kasten sitzt beides sauber in der Mitte. */
.fs-austria img   { height: 35px; }
.fs-vema img      { height: 35px; }

@media (prefers-reduced-motion: reduce) {
}
/* Ohne Hover-Fähigkeit (Touch) bleibt es bei der weißen Fassung — dort gäbe es
   keinen Auslöser für den Farbwechsel und damit auch keine weiße Fläche. */
@media (hover: none) {
}
/* Fehlt die Logodatei, tritt die Wortmarke an ihre Stelle */
.fs-marke i { display: none; }
.fs-marke.fehlt img { display: none; }
.fs-marke.fehlt i {
  display: inline; font-style: normal; font-size: 13.5px; font-weight: 600;
  letter-spacing: .04em; color: rgba(255, 255, 255, 0.85);
}

/* ---------- Rechtstexte (Impressum, Datenschutz) ----------
   Schmale Spalte für Lesbarkeit, ruhige Typografie. Kein Hero — diese Seiten
   werden gezielt aufgesucht, nicht beworben. */
.rechtstext { padding-block: clamp(44px, 6vw, 72px); }
.rechtstext h1 {
  font-size: clamp(30px, 3.6vw, 42px); font-weight: 600; line-height: 1.15;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.rechtstext-inhalt { max-width: 720px; }
.rechtstext-inhalt h2 {
  font-size: clamp(19px, 2vw, 23px); font-weight: 600; line-height: 1.3;
  margin: clamp(28px, 3.5vw, 40px) 0 10px;
}
.rechtstext-inhalt h2:first-child { margin-top: 0; }
/* overflow-wrap: E-Mail-Adressen und Registernummern stehen in den Rechtstexten
   teils als reiner Text. Ohne Umbruchmöglichkeit sprengt zum Beispiel
   „beschwerde@versicherungsombudsmann.de" bei 320px die Spalte. */
.rechtstext-inhalt p { font-size: 16px; line-height: 1.7; color: var(--n700); margin-bottom: 14px; overflow-wrap: anywhere; }
.rechtstext-inhalt ul { margin: 0 0 16px; padding-left: 20px; }
.rechtstext-inhalt li { font-size: 16px; line-height: 1.7; color: var(--n700); margin-bottom: 4px; overflow-wrap: anywhere; }
.rechtstext-inhalt a { color: var(--green-700); word-break: break-word; }

/* ---------- Team-Unterseite ---------- */
/* Rückweg statt zweiter Navigationslogik: die Hauptnavigation führt weiterhin
   ausschließlich zu den Abschnitten der Startseite, diese Zeile zeigt, wo man ist
   und wie man zurückkommt. */
/* Klebt direkt unter der Kopfzeile mit. Sonst ist der Rückweg nach dem ersten
   Scrollen weg und man findet auf der Unterseite nicht mehr zurück.
   z-index knapp unter der Kopfzeile (50), damit sie darüber liegt. */
.zurueck {
  /* Ein Pixel höher als die Kopfzeile hoch ist: Der Balken schiebt sich damit unter
     deren untere Randlinie. Ohne diese Überlappung bleibt bei gebrochenen Höhen ein
     Haarspalt, durch den der scrollende Inhalt durchscheint — und genau das sieht
     nach Fehler aus. Verdeckt wird nichts, die Kopfzeile liegt darüber (z-index 50). */
  position: sticky; top: calc(var(--kopf-hoehe) - 1px); z-index: 49;
  background: var(--n50); border-bottom: 1px solid var(--n200);
}
.zurueck-innen {
  display: flex; align-items: center; gap: 8px;
  padding-block: 12px; font-size: 14px; color: var(--n500);
}
.zurueck a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--green-700); font-weight: 600; text-decoration: none;
  padding-block: 5px;
  transition: color 200ms;
}
.zurueck a:hover { color: var(--black); }
.zurueck a svg { transition: transform 250ms var(--kurve); }
.zurueck a:hover svg { transform: translateX(-3px); }
.zurueck [aria-current="page"] { color: var(--n700); }
@media (prefers-reduced-motion: reduce) { .zurueck a svg { transition: none; } }

/* Das Team-Video ist 16:9, die Köpfe wandern darin von etwa 10 % bis 75 % der
   Bildhöhe. Wäre die Herohöhe an die Fensterhöhe gekoppelt, würde der Container
   bei breiten Fenstern viel flacher als 16:9 — object-fit:cover kappt dann oben
   und unten und damit die Köpfe. Deshalb wächst die Höhe mit der BREITE mit
   (38vw), gedeckelt bei 720px, und der Ausschnitt liegt bei 25 % statt mittig.
   Damit bleiben alle Einstellungen von 430px bis 1920px Fensterbreite vollständig. */
.hero-team { min-height: clamp(440px, 38vw, 720px); }
.hero-team .hero-video { object-position: center 25%; }
.team-sekt { background: #fff; }
/* subgrid: Bild, Name, Funktion, Qualifikation und Kontakt teilen sich über alle
   Karten dieselben Zeilen. Ohne das beginnen die Kontaktzeilen auf verschiedenen
   Höhen, weil Funktionsbezeichnungen unterschiedlich lang umbrechen. */
.team-raster {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.tp {
  display: grid; grid-template-rows: subgrid; grid-row: span 5;
  row-gap: 0;   /* sonst läge zwischen jeder Zeile der Rasterabstand von 18px */
}
.tp figcaption { display: contents; }
.tp-name, .tp-rolle, .tp-quali, .tp-kontakt { align-self: start; }
/* Zwei Aufnahmen je Person, farbig. Standard ist der ruhigere Ausdruck; beim
   Überfahren blendet die lächelnde Aufnahme darüber. Beide Bilder liegen exakt
   deckungsgleich übereinander und wechseln über eine lange, weiche Blende —
   ein harter Schnitt würde als Daumenkino wirken. */
.tp { margin: 0; }
.tp-bild {
  position: relative; border-radius: 10px; overflow: hidden;
  transition: transform 500ms var(--kurve), box-shadow 500ms var(--kurve);
}
.tp-bild img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  display: block;
}
.tp-laechelt {
  position: absolute; inset: 0; height: 100% !important;
  opacity: 0; transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tp:hover .tp-laechelt, .tp:focus-within .tp-laechelt { opacity: 1; }
.tp:hover .tp-bild { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10); }
@media (prefers-reduced-motion: reduce) {
  .tp-laechelt { transition: none; }
  .tp-bild { transition: none; }
}
/* Touch-Geräte kennen kein Hover — dort bleibt die ruhige Aufnahme stehen */
@media (hover: none) { .tp-laechelt { display: none; } }

.tp-name { font-size: 16px; font-weight: 600; line-height: 1.3; padding-top: 12px; }
.tp-rolle { font-size: 14px; color: var(--n700); }
.tp-quali { font-size: 13px; color: var(--n500); }
/* Kolleginnen, für die noch kein Porträt vorliegt: ruhige Fläche mit Initialen,
   damit das Raster geschlossen bleibt und niemand fehlt. Bewusst zurückhaltend —
   ein Platzhalter soll nicht mit den echten Porträts konkurrieren. */
.tp-ohne-bild {
  aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--n100); border: 1px dashed var(--n300);
}
.tp-initialen {
  font-size: clamp(30px, 3.4vw, 42px); font-weight: 600;
  color: var(--n300); letter-spacing: .04em; line-height: 1;
}
.tp-hinweis { font-size: 12px; color: var(--n700); }   /* liegt auf --n100, siehe .zahl .label */

.tp-kontakt { margin-top: 6px; display: flex; flex-direction: column; }
.tp-kontakt a {
  font-size: 13px; color: var(--green-700); text-decoration: none;
  padding-block: 3px; width: fit-content;
}
.tp-kontakt a:hover { text-decoration: underline; }
.standorte { background: var(--n50); }

/* ---------- Kundenstimmen ---------- */
.rating-banner { background: var(--green); color: #fff; }
.rating-banner-innen {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding-block: clamp(26px, 3.5vw, 38px); flex-wrap: wrap; text-align: center;
}
.rating-banner .wert { font-size: clamp(34px, 4vw, 48px); font-weight: 600; line-height: 1; }
.rating-banner .sterne { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: 4px; }
.rating-banner .quelle { font-size: 16px; font-weight: 600; }
.stimmen-innen { padding-top: clamp(48px, 6vw, 72px); }

/* Nur die Spur wird beschnitten. Läge die Punktnavigation mit im overflow:hidden,
   würde der vergrößerte aktive Punkt an den Rändern abgeschnitten. */
/* pan-y sagt dem Browser: senkrechtes Scrollen gehört ihm, waagrechte Gesten
   gehören uns. Ohne das übernimmt iOS den waagrechten Zug selbst und die
   pointermove-Ereignisse hören mitten in der Bewegung auf. */
.karussell { position: relative; touch-action: pan-y; }
.karussell-fenster { overflow: hidden; }
.karussell-spur { display: flex; transition: transform 600ms var(--kurve); }
.stimme { flex: 0 0 100%; padding-inline: 2px; }
@media (min-width: 861px) { .stimme { flex-basis: 33.3333%; } }
.stimme-karte {
  height: 100%; margin: 0 9px;
  background: var(--n50); border: 1px solid var(--n200); border-radius: 10px;
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
}
.stimme-karte .sterne { color: var(--green); letter-spacing: 3px; font-size: 15px; }
.stimme-karte blockquote { font-size: 15.5px; line-height: 1.55; color: var(--n700); flex-grow: 1; }
.stimme-karte figcaption { font-size: 14px; color: var(--n500); }
.stimme-karte figcaption b { color: var(--black); font-weight: 600; }
.karussell-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; padding-block: 4px; }
/* Klickfläche 24px (Fitts), sichtbarer Punkt per ::before — so bleibt genug Luft,
   damit der vergrößerte aktive Punkt nirgends anstößt */
.punkt {
  width: 24px; height: 24px; border: 0; padding: 0; background: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.punkt::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--n300); transition: background 250ms, transform 250ms var(--kurve);
}
.punkt:hover::before { background: var(--n500); }
.punkt[aria-current="true"]::before { background: var(--green); transform: scale(1.35); }
.punkt:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; border-radius: 50%; }
.stimmen-fuss { text-align: center; margin-top: 22px; }
.stimmen-fuss a { font-weight: 600; font-size: 15.5px; color: var(--green-700); text-decoration: none; }
.stimmen-fuss .lnk { display: inline-flex; }
/* Herkunftshinweis zu den Bewertungen (§ 5b Abs. 3 UWG). Bewusst kleiner und ruhiger
   als der Rest — er muss auffindbar sein, nicht laut. */
.stimmen-herkunft {
  max-width: 62ch; margin: 14px auto 0; text-align: center;
  font-size: 12.5px; line-height: 1.55; color: var(--n500);
}

/* ---------- Kontakt ---------- */
.kontakt-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 72px); }
.kontakt-foto { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.kontakt-liste { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.kontakt-liste li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.kontakt-liste .icon { width: 28px; height: 28px; margin-top: 2px; }
.kontakt-liste .t { font-size: 15.5px; color: var(--n700); }
.kontakt-liste .t b { color: var(--black); font-weight: 600; display: block; }
.kontakt-liste a { color: var(--green-700); font-weight: 600; text-decoration: none; }
.formular { display: grid; gap: 14px; }
.feld { display: grid; gap: 6px; }
.feld label { font-size: 14px; font-weight: 600; }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 15.5px;
  border: 1px solid var(--n300); border-radius: 6px;
  padding: 12px 14px; background: #fff; color: var(--black);
  transition: border-color 200ms, box-shadow 200ms;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-50);
}
/* Honigtopf-Feld: aus dem Sichtfeld geschoben statt display:none, damit Bots es
   im Quelltext finden und ausfüllen. Menschen sehen und erreichen es nicht. */
.honigtopf {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.feld-einwilligung {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: start; margin-top: 4px;
}
/* 24px ist die Untergrenze aus WCAG 2.2 (SC 2.5.8 Target Size Minimum) — 18px
   war für einen Daumen zu klein. Die Beschriftung schaltet ebenfalls um. */
.feld-einwilligung input {
  width: 24px; height: 24px; margin: 0; accent-color: var(--green);
  flex: none; cursor: pointer;
}
.feld-einwilligung input:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}
.feld-einwilligung label {
  font-size: 13.5px; line-height: 1.5; color: var(--n700); cursor: pointer;
}
.feld-einwilligung a { color: var(--green-700); text-underline-offset: 2px; }

/* Fehlende Einwilligung sichtbar machen — die Sprechblase des Browsers allein
   wird leicht übersehen. */
.feld-einwilligung.fehlt input { outline: 2px solid #b3261e; outline-offset: 2px; }
.feld-fehler {
  margin: 8px 0 0; font-size: 13.5px; line-height: 1.5;
  color: #b3261e; font-weight: 600;
}
.feld-fehler[hidden] { display: none; }

.formular .senden {
  margin-top: 6px; justify-self: start;
  background: var(--green); color: #fff; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 16.5px;
  padding: 14px 32px; border-radius: 6px;
  transition: background 200ms, transform 250ms var(--kurve);
}
.formular .senden:hover { background: var(--green-700); transform: translateY(-1px); }
/* Touch kennt kein Hover, und die graue iOS-Kachel ist auf Schaltflächen
   abgeschaltet — ohne diese Zeile bliebe der Druck auf „Nachricht senden" ganz
   ohne Rückmeldung. */
.formular .senden:active { background: var(--green-700); transform: translateY(1px); }
.formular .hinweis { font-size: 13.5px; color: var(--n500); }

/* ---------- Footer (großer Grün-Moment) ---------- */
.foot { background: var(--green); color: #fff; }
/* Drei Spalten: Adresse, Seiten, Rechtliches. Die Adressspalte bleibt breiter,
   die beiden Linklisten laufen rechts aus, damit keine Lücke entsteht. */
.foot-innen {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(20px, 3vw, 40px); padding-block: clamp(32px, 3.6vw, 44px);
}
.foot-logo img { height: 30px; width: auto; max-width: none; aspect-ratio: 20 / 3; }
.foot-firma { margin-top: 12px; font-weight: 600; font-size: 15.5px; }
.foot-adresse { margin-top: 4px; }
.foot p, .foot li { font-size: 15px; line-height: 1.55; }
.foot ul { list-style: none; margin: 0; padding: 0; }
/* Klickfläche auf 40px Höhe bringen (Touch-Ziel), ohne die Optik zu verändern */
.foot a { color: #fff; text-decoration: none; display: inline-block; padding-block: 6px; }
.foot li { line-height: 1.1; }
.foot a:hover { text-decoration: underline; }
/* Kontakt- und Textlinks im Inhalt ebenso */
.kontakt-liste a, .stimmen-fuss a { display: inline-block; padding-block: 9px; }
.foot .titel { font-weight: 600; font-size: 15.5px; margin-bottom: 10px; display: block; }
/* Der Schatten trägt die Farbe drei Pixel über die Unterkante hinaus. Grund: Die
   Unterkante liegt bei 7897,992px, das Dokument ist 7898px hoch — durch diesen
   Rundungsrest schien der weiße Seitenhintergrund als feine helle Linie durch.
   Ein Schatten ändert kein Layout, verlängert also nur die Farbe. */
.fsub { background: var(--green-800); color: #fff; box-shadow: 0 3px 0 var(--green-800); }
.fsub-innen {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 12px; font-size: 13px;
}

/* ---------- Fester WhatsApp-Kontakt (rechter Rand, scrollt mit) ---------- */
/* Der Knopf ist am rechten Rand fixiert und im Ruhezustand nur so breit wie das
   Logo. Beim Überfahren gibt clip-path die Beschriftung frei, die dabei an ihrem
   Platz stehen bleibt — sie wird enthüllt, nicht hereingeschoben.

   Der Schatten sitzt auf der Hülle, nicht auf dem Knopf: clip-path schneidet
   alles außerhalb der Box weg, ein box-shadow am Knopf wäre also unsichtbar.
   drop-shadow auf dem Elternelement wird nach dem Beschneiden angewandt und
   folgt deshalb der tatsächlich sichtbaren Silhouette. */
.wa-huelle {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 60;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.22));
  pointer-events: none;   /* nur der Knopf selbst reagiert, nicht die Hülle */
}
.wa-knopf {
  pointer-events: auto;
  display: flex; align-items: center;
  width: max-content; padding-right: 24px;
  border-radius: 8px 0 0 8px;
  /* Lohschmidt-Grün statt WhatsApp-Grün (#25D366): zwei Grüntöne auf einer Seite
     beißen sich, und der Knopf gehört zur Marke, nicht zum Dienst */
  background: var(--green); color: #fff; text-decoration: none;

  /* Ruhelage: der Knopf steht so weit rechts, dass nur das Logo am Rand hängt.
     Beim Zeigen fährt er nach links herein — das Logo führt die Bewegung an und
     zieht den Text hinter sich her. Über transform statt über Breite oder
     clip-path: transform läuft auf der Grafikkarte, kostet kein neues Layout und
     der herausstehende Teil liegt außerhalb des Sichtfelds, kann also auch nicht
     versehentlich getroffen werden. */
  transform: translateX(calc(100% - var(--wa-logo)));
  transition: transform 560ms var(--kurve);
}
.wa-knopf:hover, .wa-knopf:focus-visible { transform: translateX(0); }
/* Auf Touch gibt es kein Hover. Dort setzt das Skript diese Klasse — durch
   Antippen oder durch Ziehen nach links. Erst dann führt ein weiterer Tipp zu
   WhatsApp; so öffnet niemand versehentlich einen Chat, nur weil er den Rand
   gestreift hat. Ziehen nach rechts fährt ihn wieder ein. */
.wa-knopf.offen { transform: translateX(0); }
.wa-huelle { touch-action: pan-y; }

.wa-huelle { --wa-logo: 62px; }
.wa-logo {
  flex-shrink: 0; width: var(--wa-logo); height: var(--wa-logo);
  display: flex; align-items: center; justify-content: center;
}
.wa-logo svg { width: 36px; height: 36px; }
/* flex-shrink: 0, damit die Schrift beim Hereinfahren nicht gestaucht wird oder umbricht */
.wa-text { flex-shrink: 0; white-space: nowrap; font-weight: 600; font-size: 17px; padding-left: 4px; }

.wa-knopf:focus-visible { outline: 3px solid var(--green-700); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .wa-knopf { transition: none; } }
@media (max-width: 480px) {
  /* Position über einen Prozentwert statt über den unteren Rand.
     Vorgeschichte: bottom sprang, weil es gegen das Layout-Fenster misst, dessen
     Unterkante mit der Browserleiste wandert. Dann svh — das half in Safari, aber
     Firefox auf iOS behandelt svh wie die große Fensterhöhe, dort saß der Knopf
     wieder zu tief und sprang weiter.
     Ein Prozentwert bei position: fixed bezieht sich auf das Layout-Fenster, und
     dessen Höhe ist auf iOS konstant — unabhängig davon, ob Leisten sichtbar sind.
     72 Prozent setzen den Knopf in die untere Bildschirmhälfte, in Daumenreichweite,
     aber mit sicherem Abstand über jeder Browserleiste. */
  .wa-huelle {
    top: 72%; bottom: auto; transform: none; --wa-logo: 55px;
  }
  .wa-logo svg { width: 32px; height: 32px; }

}

/* ---------- Scroll-Reveals (nur mit JS, Learning InvestANT) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--kurve), transform 700ms var(--kurve); }
.js [data-reveal].in { opacity: 1; transform: none; }
/* Der Slider blendet nur auf, ohne Verschiebung. Ein sich veraendernder Transform
   auf dem Vorfahren zwingt die laufenden Spuren beim Abbau des Layers zum
   Neuaufbau — ein sichtbarer Ruckler, genau einmal je Seitenaufruf beim ersten
   Hereinscrollen. */
.js .team-slider[data-reveal] { transform: none; }
.js .karten-3 > :nth-child(2), .js .karten-2 > :nth-child(2) { transition-delay: 70ms; }
.js .karten-3 > :nth-child(3), .js .karten-2 > :nth-child(3) { transition-delay: 140ms; }
.js .karten-2 > :nth-child(4) { transition-delay: 210ms; }
.js .schritte > .schritt:nth-child(3) { transition-delay: 100ms; }
.js .schritte > .schritt:nth-child(4) { transition-delay: 200ms; }
.js .schritte > .schritt:nth-child(5) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js .hero [data-intro] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .schritte .linie { transition: none; }
  .karussell-spur { transition: none; }
}

/* ---------- Einwilligungs-Banner ----------
   Leiste am unteren Rand statt Vollbild-Overlay: Sie verdeckt die Seite nicht und
   sperrt niemanden aus. Beide Knöpfe sind absichtlich in Größe, Farbe und Form
   identisch — Ablehnen darf optisch nicht schwächer sein als Annehmen
   (DSK-Orientierungshilfe; OLG Köln, Urteil vom 19.01.2024). */
.einwilligung {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: #fff; border-top: 3px solid var(--green);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.13);
  animation: einw-herein 320ms var(--kurve) both;
}
.einwilligung[hidden] { display: none; }
@keyframes einw-herein { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .einwilligung { animation: none; } }

.einw-innen {
  max-width: 1180px; margin: 0 auto; padding: 22px clamp(18px, 4vw, 40px) 24px;
  display: grid; gap: 12px;
}
.einw-innen h2 { font-size: 17px; font-weight: 600; margin: 0; }
.einw-innen p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--n700); max-width: 78ch; }
.einw-innen a { color: var(--green-700); text-underline-offset: 2px; }

.einw-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2px; }
.einw-knopf {
  font: inherit; font-weight: 600; font-size: 15px;
  padding: 12px 26px; min-width: 200px;
  background: var(--green); color: #fff; border: 0; border-radius: 6px;
  cursor: pointer; transition: background 200ms;
}
.einw-knopf:hover { background: var(--green-700); }
.einw-knopf:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

.einw-mehr {
  justify-self: start; font: inherit; font-size: 13.5px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--green-700); text-decoration: underline; text-underline-offset: 2px;
}
.einw-mehr[hidden] { display: none; }

.einw-dienste { display: grid; gap: 12px; padding: 4px 0 2px; }
.einw-dienste[hidden] { display: none; }
.einw-dienst { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.einw-dienst input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green); cursor: pointer; }
.einw-dienst label { font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.einw-dienst label strong { display: block; font-weight: 600; }
.einw-dienst label span { color: var(--n500); }

@media (max-width: 480px) {
  .einw-knoepfe { flex-direction: column; }
  .einw-knopf { width: 100%; min-width: 0; }
}

/* ---------- Touch: größere Trefferflächen ----------
   Eine Maus trifft 24px zuverlässig, ein Daumen nicht — dafür gelten 44px (Apple
   Human Interface Guidelines). Nur auf Geräten ohne Hover, damit die Maus-Ansicht
   kompakt bleibt; im Fußbereich war Kompaktheit ausdrücklich gewünscht.
   Rein optische Hover-Effekte (Pfeil, Unterstrich, Porträtwechsel) haben auf Touch
   keine Entsprechung — sie tragen aber auch keine Information, die sonst fehlen würde. */
@media (hover: none) {
  .nav-logo { display: inline-flex; align-items: center; padding-block: 7px; }
  .foot a { padding-block: 14px; }
  /* In der Anschrift stehen Telefon und E-Mail durch <br> untereinander. Dort
     schiebt das Polster oben die Zeilen auseinander — es sah aus wie eine
     Leerzeile. Der gleich große negative Außenabstand nimmt dem Polster die
     Wirkung auf den Umbruch, die Trefferfläche bleibt aber 44px hoch. */
  .foot-adresse a { margin-block: -14px; }
  /* Wie im Fußbereich: Das Polster macht die Trefferfläche 44px hoch, schiebt in
     der Flex-Spalte aber E-Mail und Telefon um 24px auseinander statt der 6px vom
     Schreibtisch. Der negative Außenabstand nimmt ihm die Wirkung auf den Abstand
     (12+12−9−9 = 6px), die Trefferfläche bleibt unverändert. */
  .tp-kontakt a { padding-block: 12px; margin-block: -9px; }
  .zurueck a { padding-block: 11px; }
  .lnk, .stimmen-fuss a { padding-block: 11px; }
  /* Sichtbarer Punkt bleibt 9px, nur die Trefferfläche wächst */
  .punkt { width: 44px; height: 44px; }

  /* Am Handy wird geflickt statt gerollt: 700ms Einblenden bedeutet, dass ein
     Element noch aufbaut, während man längst vorbei ist. Kürzere Dauer und
     kürzere Staffelung lassen die Seite beim schnellen Scrollen fertig wirken.
     Am Schreibtisch bleibt es beim ruhigeren Original. */
  .js [data-reveal] { transition-duration: 380ms; }
  .js .karten-3 > :nth-child(2), .js .karten-2 > :nth-child(2) { transition-delay: 40ms; }
  .js .karten-3 > :nth-child(3), .js .karten-2 > :nth-child(3) { transition-delay: 80ms; }
  .js .karten-2 > :nth-child(4) { transition-delay: 120ms; }
  .js .schritte > .schritt:nth-child(3) { transition-delay: 60ms; }
  .js .schritte > .schritt:nth-child(4) { transition-delay: 120ms; }
  .js .schritte > .schritt:nth-child(5) { transition-delay: 180ms; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-schalter { display: flex; }
  /* Ausklapptafel unter der Kopfzeile. Ohne JavaScript bleibt die Liste sichtbar
     stehen (umbrechend), damit die Navigation auch dann erreichbar ist. */
  .js .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--n200);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.10);
    padding-block: 4px;
  }
  .js .nav.offen .nav-links { display: flex; }
  .nav-links li + li { border-top: 1px solid var(--n100); }
  .nav-links a { display: block; padding: 15px clamp(18px, 5vw, 40px); font-size: 16px; }
  .nav-links a::after { display: none; }   /* Unterstrich ergibt in der Liste keinen Sinn */
  .no-js .nav-links { flex-wrap: wrap; gap: 14px; }
  .karten-3 { grid-template-columns: minmax(0, 1fr); }
  .karten-2 { grid-template-columns: minmax(0, 1fr); }
  .zahlen-innen { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  /* Der Pfad kippt auf die Senkrechte: Kreise links untereinander, Text rechts
     daneben. Waagerecht bliebe im schmalen Fenster nur ein kurzer Strich zwischen
     gestapelten Blöcken übrig — als Weg wäre das nicht mehr lesbar. */
  .schritte { grid-template-columns: 1fr; grid-template-rows: none; gap: 0; }
  .schritt {
    grid-row: auto;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 20px; padding-bottom: 36px;
  }
  .schritt .nummer { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; }
  .schritt h3      { grid-column: 2; grid-row: 1; }
  .schritt p       { grid-column: 2; grid-row: 2; }
  .schritt-foto    { grid-column: 2; grid-row: 3; margin: 14px 0 0; }

  /* Graue Grundlinie: senkrecht auf Kreismitte (64px Kreis → 32px) */
  .schritte::before {
    left: 32px; right: auto; top: 32px; bottom: var(--pfeil);
    width: 2px; height: auto; margin-top: 0; margin-left: -1px;
  }
  /* Grüne Linie deckt jetzt von oben nach unten auf statt von links nach rechts */
  .schritte .linie {
    left: 32px; right: auto; top: 32px; bottom: 0;
    width: 14px; height: auto; margin-top: 0; margin-left: -7px;
    clip-path: inset(0 0 100% 0);
  }
  .schritte.in .linie { clip-path: inset(0 0 0 0); }
  /* Die Linie endet zwischen den Schenkeln des Chevrons, nicht an dessen Spitze.
     Waagerecht ging das noch auf; senkrecht lief die Linie bis in den Scheitel und
     legte ihre runde Kappe auf die Spitze — die Spitze wirkte dadurch stumpf. */
  .schritte .linie::before {
    left: 50%; right: auto; top: 0; bottom: calc(var(--pfeil) * 0.46);
    width: 2px; height: auto; margin-top: 0; margin-left: -1px;
  }
  /* Chevron zeigt nach unten statt nach rechts.
     Zentriert über translateX(-50%) statt über einen festen negativen Rand: Der Rand
     müsste die halbe Kastenbreite treffen, und die stimmte um einen halben Pixel nicht
     mit --pfeil überein — die Spitze saß dadurch neben der Linie. translateX rechnet
     immer mit der tatsächlichen Breite und geht auch dann noch auf, wenn sich die
     Größe später ändert. */
  .linie-pfeil {
    left: 50%; right: auto; top: auto; bottom: 0;
    margin: 0;
    transform: translateX(-50%) rotate(90deg);
  }
  .kontakt-grid { grid-template-columns: 1fr; }
  .ueber-grid { grid-template-columns: 1fr; }
  .team-slider { order: 2; height: 420px; }
  .foot-innen { grid-template-columns: 1fr 1fr; }
  .band-innen { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  /* Bei 390px bleiben neben Kontakt-Knopf und Menüsymbol keine 200px für das
     Logo. Statt es zu stauchen, wird es proportional kleiner. */
  .nav-logo img { height: 24px; }
  /* Fünf Zahlen gehen in zwei Spalten nicht auf — die fünfte bliebe allein in der
     Schlusszeile stehen. Deshalb ein Raster aus sechs Spalten: oben zwei Zahlen
     über je drei Spalten, unten drei über je zwei. Beide Zeilen sind damit
     vollständig gefüllt, und die beiden längsten Angaben (3.323 Mandanten,
     Seit 1969) bekommen oben den meisten Platz.
     Der Spaltenabstand sinkt auf 10px, weil fünf Lücken bei 390px sonst zu viel
     der Breite auffressen würden. */
  .zahlen-innen {
    grid-template-columns: repeat(6, 1fr);
    column-gap: 10px; row-gap: 22px;
  }
  .zahlen-innen .zahl:nth-child(-n+2) { grid-column: span 3; }
  .zahlen-innen .zahl:nth-child(n+3)  { grid-column: span 2; }
  /* Gemessen in Hermes Maia: "Partner am Markt" ist bei 14px genau 110px breit —
     exakt die Zellenbreite, also Umbruch. Bei 13px sind es 102px. */
  .zahlen-innen .label { font-size: 13px; }
  /* Navigation und Rechtliches sind kurze Listen — nebeneinander verkürzen sie
     den Fußbereich am Telefon spürbar. Anschrift und Prüfsiegel bleiben über die
     volle Breite; das Siegel bringt sein grid-column: 1 / -1 schon mit. */
  .foot-innen { grid-template-columns: 1fr 1fr; }
  .foot-innen > :first-child { grid-column: 1 / -1; }
}

/* Einziger eigener Baustein der Stellenseite: der Kasten mit dem aktuellen Stand.
   Er muss sich vom Fliesstext abheben, weil er die Frage beantwortet, wegen der
   die meisten die Seite ueberhaupt aufrufen. */
.stellen-stand {
  background: var(--n100); border-left: 3px solid var(--green);
  padding: 16px 18px; border-radius: 0 8px 8px 0;
  margin-bottom: clamp(28px, 3.5vw, 40px);
}

/* Stand-Datum am Ende der Rechtstexte */
.stand { margin-top: 28px; font-size: 13.5px; color: var(--n500); }

/* ---------- Danke-Seite ---------- */
.danke-sekt { min-height: 62vh; display: flex; align-items: center; }
.danke-innen { max-width: 680px; text-align: center; margin-inline: auto; }
.danke-haken {
  width: 64px; height: 64px; margin: 0 auto 22px;
  color: var(--green);
}
.fehler-nummer {
  margin: 0 0 8px; font-size: clamp(52px, 9vw, 92px); font-weight: 600;
  line-height: 1; color: var(--green); letter-spacing: -0.02em;
}
.danke-innen h1 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 600; line-height: 1.15; text-wrap: balance; }
.danke-text { margin-top: 16px; font-size: clamp(16px, 1.7vw, 18.5px); color: var(--n700); }
.danke-wege {
  list-style: none; margin: 18px 0 30px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  font-weight: 600;
}
.danke-wege a { color: var(--green-700); text-decoration: none; display: inline-block; padding-block: 9px; }
.danke-wege a:hover { text-decoration: underline; }





/* Nachweis unter der Kartenreihe. Prüfzeichen in Originalfarben auf weißer
   Fläche — die Nutzungsbedingungen verlangen die unveränderte Form. */
.leistung-nachweis {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 36px);
  font-size: 14px; line-height: 1.6; color: var(--n500);
}
.ln-marke {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 6px 10px; border-radius: 6px;
  background: #fff; border: 1px solid var(--n200);
}
.ln-marke img { height: 100%; width: auto; object-fit: contain; }
/* Das Zeichen ist jetzt ein Link — er muss als solcher erkennbar und bedienbar
   sein, ohne dass das Zeichen selbst verändert wird. Deshalb reagiert nur die
   weiße Fläche darunter, nicht das Bild. */
a.ln-marke { transition: border-color 200ms, box-shadow 200ms; }
a.ln-marke:hover, a.ln-marke:focus-visible {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-50);
}
a.ln-marke:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { a.ln-marke { transition: none; } }
.leistung-nachweis > span:last-child { flex: 1 1 340px; min-width: 0; }