/* ==========================================================================
   Eberhard Media — Prototyp einer Agentur-Website für Handwerksbetriebe.
   Eine Welt, eine Datei. Der Richtungsvertrag steht am Kopf von index.html.

   DIE WELT      „Schwarz auf Weiß": Die Bautafel ist ein Aushang geworden —
                 Schrift, Linien, Fotos, sonst nichts. Was drauf steht, bleibt
                 konkret (was gebaut wird, von wem, bis wann, für wie viel);
                 wie es aussieht, ist auf drei Farben und eine Linie reduziert.
   MATERIAL      Weiß als Grund, Schwarz für Schrift, Knöpfe und die dunklen
                 Bänder, dazwischen Grau in vier Stufen. Keine Akzentfarbe:
                 Die einzige Farbe auf der Seite kommt aus den Fotos.
                 Keine Karten, keine Kacheln, kein Glas, keine Schatten, keine
                 Rundungen. Ordnung entsteht durch Haarlinien (1 px), Nummern,
                 Spalten und Weißraum — wie auf einer Zeitungsseite, nicht wie
                 in einer App. Fotos stehen randlos und eckig.
   SCHRIFT       Archivo trägt alles Große: sehr schmal (74 %) und fett in den
                 Schlagzeilen, breit (116 %) in den Kickern. Inter im Lauftext.
                 Ohne Farbe muss die Schrift den Kontrast machen — deshalb ist
                 die Spanne zwischen groß und klein bewusst weit.
   BEWEGUNG      Der Held: Wörter steigen aus der Zeile, ein Wort der Schlag-
                 zeile rollt alle paar Sekunden weiter, und das Foto dahinter
                 blendet synchron zum nächsten Motiv um. Danach: alles
                 erscheint beim Scrollen (`.zeig`), Zahlen zählen hoch
                 (`data-zaehl`), Fotos laufen langsamer als die Seite
                 (`.parallax`), das Telefon der Anleitung wechselt den
                 Bildschirm, die Screenshots der Designideen scrollen beim
                 Zeigen. Ohne Skript steht alles da, nur still.
                 `prefers-reduced-motion` schaltet alles ab.
   LINIE         Die Haarlinie ist das einzige Ordnungsmittel: oben an jedem
                 Abschnitt, zwischen Zeilen einer Liste, zwischen Spalten.
                 Wer eine Fläche braucht, nimmt ein ganzes Band (Weiß, Grau,
                 Schwarz) — nie eine Fläche innerhalb einer Fläche.

   TRANSFORM-REGEL: Erscheinen benutzt `translate` und `opacity`, die Parallaxe
   `transform` auf dem Bild, das Rollen im Held `translate` auf dem Wort. So
   überschreibt sich nichts. Seit dem 2026-09-07 dazu: Magnetknöpfe ziehen an
   `translate` des Knopfs, Zoom und Zeiger-Parallaxe im Held an `scale` und
   `translate` des Motiv-Halters (`.held__motive`), die Überblendung an
   `opacity`/`transform` des einzelnen Motivs. Die Teile einer Staffel
   (`.teil`) erscheinen per Animation, nicht per Übergang — und die wird nach
   dem Ende weggenommen (`ist-fertig`), damit Hover-Übergänge auf denselben
   Elementen wieder greifen.

   SEIT DEM 2026-09-07: mehr Bewegung, mehr zum Anfassen. Überschriften steigen
   Wort für Wort, jede Zeile kommt in Teilen (Nummer, Titel, Text — `.zeig--
   staffel`), Haarlinien zeichnen sich, Fotos werden beim Erscheinen farbig
   (`.zeig--bild`), das Laufband läuft gleichmäßig durch (seit dem 2026-09-10
   ohne Scroll-Schub), und
   mit feinem Zeiger gibt es Magnetknöpfe und ein Held-Foto, das der Maus
   folgt (den eigenen Zeiger `.zeiger` gab es bis zum 2026-09-11, siehe unten
   bei „404"). Auf der Preisseite: Paketfinder und Raten-Umschalter.

   AM 2026-09-07, ZWEITER SCHRITT: vier Abschnitte, vier Ordnungen. Die ersten
   vier Abschnitte der Startseite zählten alle gleich — Zeilen mit 01 bis 04.
   Seither hat jeder sein eigenes Mittel: die Checkliste zum Ankreuzen
   (`.check`), das klebende Telefon, das die Seite wechselt (`.schau`, `.tel`).

   AM 2026-09-07, DRITTER SCHRITT: die Journey. Sechs Abschnitte statt neun —
   Leistungen, Anleitung, Designideen, Preise, Stimmen, Kontakt. Der Held ist
   ein Vollbild mit den Fotos im Hintergrund (kein gepinntes Foto, kein
   Vorhang, kein Ticker mehr); die Leistungen sind sechs Spalten
   (`.leistungen`), die Anleitung ist das Schaufenster in groß mit sechs
   Schritten (`.schau--gross`, `.schritte`), die Designideen sind vier
   Browser-Rahmen im Raster (`.ideen`). Die Checkliste eröffnet jetzt die
   Leistungsseite; Referenzzeilen (`.faelle`) und Bauzeitenplan (`.plan`) sind
   weg — der Plan ist in den Schritten aufgegangen, die Referenzen haben ihre
   eigene Seite. Die Zeile mit Nummer (`.liste`) gibt es weiter.
   ========================================================================== */

/* --- Schriften (selbst gehostet, CSP font-src 'self') ---------------------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Werte ------------------------------------------------------------------ */
:root {
  --weiss: #FFFFFF;
  --schwarz: #0B0B0C;
  --grau-95: #F4F4F4;   /* das helle Band */
  --grau-90: #E4E4E4;   /* die Haarlinie auf Weiß */
  --grau-80: #C9C9C9;   /* Formularlinien, Ränder */
  --grau-60: #8A8A8A;   /* Nummern, Nebensächliches — nur groß */
  --grau-50: #6B6B6B;   /* Beschriftung klein: 5,5:1 auf Weiß */
  --grau-40: #565656;   /* Fließtext zweiter Ordnung: 7,3:1 */
  --grau-20: #2B2B2B;
  --linie: var(--grau-90);
  --linie-dunkel: rgba(255, 255, 255, .18);
  --hell-dunkel: #B8B8B8;   /* zweiter Text auf Schwarz: 9:1 */
  --gedaempft-dunkel: #8F8F8F;

  --schrift-titel: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --mass: 1360px;
  --rand: clamp(1.25rem, 4vw, 3rem);
  --kopf: 76px;
  --dauer: .3s;
  --kurve: cubic-bezier(.22, 1, .36, 1);
  --zeig-dauer: 1s;
  /* Die Haarlinie des jeweiligen Bandes — die sich zeichnenden Linien lesen
     sie, statt für jedes Band eine eigene Regel zu brauchen. */
  --linie-hier: var(--linie);
}
.dunkel, .abschnitt--dunkel { --linie-hier: var(--linie-dunkel); }
.abschnitt--grau { --linie-hier: var(--grau-80); }

/* Seitenwechsel: die alte Seite hebt leicht ab, die neue kommt von unten
   (Chromium; andere Browser wechseln hart). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: seite-raus .4s var(--kurve) both; }
  ::view-transition-new(root) { animation: seite-rein .65s var(--kurve) both; }
  @keyframes seite-raus { to { opacity: 0; translate: 0 -2vh; } }
  @keyframes seite-rein { from { opacity: 0; translate: 0 5vh; } }
}

/* --- Grundlagen ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--schwarz);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--grau-60); transition: text-decoration-color var(--dauer), color var(--dauer); }
a:hover { text-decoration-color: currentColor; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--schrift-titel);
  font-stretch: 80%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 8vw, 8.2rem); line-height: .92; letter-spacing: -.035em; font-stretch: 74%; }
h2 { font-size: clamp(2.1rem, 4.6vw, 4.4rem); line-height: .96; letter-spacing: -.03em; font-stretch: 76%; }
h3 { font-size: 1.45rem; font-stretch: 88%; line-height: 1.1; letter-spacing: -.015em; }
h4 { font-size: 1rem; font-stretch: 100%; letter-spacing: 0; }
strong, b { font-weight: 700; }
small { font-size: .875em; }
::selection { background: var(--schwarz); color: var(--weiss); }
.dunkel ::selection { background: var(--weiss); color: var(--schwarz); }
:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 3px; }
.dunkel :focus-visible { outline-color: var(--weiss); }

.sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--schwarz); color: var(--weiss); padding: .6rem 1rem;
  font-weight: 700; text-decoration: none;
}
.sprung:focus { top: 1rem; }

.mass { width: min(100% - 2 * var(--rand), var(--mass)); margin-inline: auto; }
.mass--schmal { max-width: 800px; }
.mass--mittel { max-width: 1040px; }

.sichtbar-nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kicker: eine Zeile in breiter Versalschrift, davor die Nummer des Abschnitts. */
.kicker {
  display: flex; align-items: baseline; gap: .9em;
  margin: 0 0 1.25rem;
  font-family: var(--schrift-titel);
  font-stretch: 116%;
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grau-50);
}
.kicker b { font-weight: 700; color: var(--schwarz); font-variant-numeric: tabular-nums; }
.dunkel .kicker { color: var(--hell-dunkel); }
.dunkel .kicker b { color: var(--weiss); }

.lead { font-size: clamp(1.125rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--grau-40); max-width: 40rem; }
.dunkel .lead { color: var(--hell-dunkel); }

/* --- Knöpfe: eckig, schwarz, und beim Zeigen füllen sie sich von unten ----- */
.knopf {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 1.05em 1.6em;
  background: var(--schwarz);
  color: var(--weiss);
  border: 1px solid var(--schwarz);
  border-radius: 0;
  font-family: var(--schrift-titel);
  font-stretch: 100%;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dauer), border-color var(--dauer), translate .5s var(--kurve);
}
/* Magnet: mit feinem Zeiger zieht der Knopf ein paar Pixel zum Zeiger hin
   (das Skript setzt --mx/--my), beim Verlassen federt er zurück. */
.zeiger-fein .knopf { translate: var(--mx, 0px) var(--my, 0px); }
.knopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--weiss);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .45s var(--kurve);
}
.knopf:hover { color: var(--schwarz); }
.knopf:hover::before { transform: scaleY(1); }
.knopf svg { width: 1.1em; height: 1.1em; flex: none; transition: transform .4s var(--kurve); }
.knopf:hover svg { transform: translateX(4px); }
.knopf--leer { background: transparent; color: var(--schwarz); }
.knopf--leer::before { background: var(--schwarz); }
.knopf--leer:hover { color: var(--weiss); }
.knopf--klein { padding: .8em 1.2em; font-size: .88rem; }
.knopf--breit { width: 100%; }
.dunkel .knopf { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); }
.dunkel .knopf::before { background: var(--schwarz); }
.dunkel .knopf:hover { color: var(--weiss); }
.dunkel .knopf--leer { background: transparent; color: var(--weiss); border-color: rgba(255, 255, 255, .55); }
.dunkel .knopf--leer::before { background: var(--weiss); }
.dunkel .knopf--leer:hover { color: var(--schwarz); border-color: var(--weiss); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.knopfreihe--mitte { justify-content: center; }

.pfeillink {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--schrift-titel); font-weight: 600; font-size: 1rem; text-decoration: none;
}
.pfeillink svg { width: 1.1em; height: 1.1em; transition: transform .4s var(--kurve); }
.pfeillink:hover svg { transform: translateX(6px); }
.pfeillink span { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%; padding-bottom: .15em; transition: background-size .4s var(--kurve); }
.pfeillink:hover span { background-size: 0% 1px; }

/* --- Fortschritt: der Faden oben --------------------------------------------- */
.fortschritt { position: fixed; left: 0; top: 0; z-index: 60; height: 2px; width: 100%; background: var(--schwarz); transform-origin: left; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .js .fortschritt { animation: wachsen linear both; animation-timeline: scroll(root); }
  @keyframes wachsen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@supports not (animation-timeline: scroll()) {
  .js .fortschritt { transform: scaleX(var(--fortschritt, 0)); }
}

/* --- Kopf: eine weiße Leiste mit Haarlinie ---------------------------------------
   Beim Lesen verschwindet sie nach oben (über `top`, nicht über translate: eine
   Transform-Eigenschaft machte den Kopf zum Bezugsrahmen für das fixierte
   Menü auf dem Telefon) und kommt beim Hochscrollen zurück. */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--weiss);
  border-bottom: 1px solid transparent;
  transition: top .55s var(--kurve), border-color var(--dauer), margin-bottom .45s var(--kurve);
}
.kopf.ist-gescrollt { border-bottom-color: var(--linie); }
.kopf.ist-versteckt { top: calc(-1 * var(--kopf) - 2px); }
.kopf.ist-offen { top: 0; }
.kopf__innen { height: var(--kopf); display: flex; align-items: center; gap: 2.5rem; transition: height .45s var(--kurve); }
/* Beim Lesen wird die Leiste schlanker; auf dem Telefon bleibt sie, wie sie ist.
   Der untere Rand wächst um dieselben 14 px, damit die Fließhöhe gleich bleibt
   und die Seite darunter nicht springt (Firefox schaltete sonst das
   Scroll-Anchoring ab). */
@media (min-width: 861px) {
  .kopf.ist-gescrollt { margin-bottom: 14px; }
  .kopf.ist-gescrollt .kopf__innen { height: calc(var(--kopf) - 14px); }
}
.marke {
  position: relative; z-index: 10;
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--schrift-titel); font-stretch: 84%; font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em;
  text-decoration: none; line-height: 1;
}
.marke svg { width: 30px; height: 30px; flex: none; }
.marke span { font-weight: 500; font-stretch: 92%; letter-spacing: -.01em; color: var(--grau-40); }
.dunkel .marke span { color: var(--hell-dunkel); }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 2rem; list-style: none; }
.nav ul a {
  position: relative; display: block; padding: .4rem 0; white-space: nowrap;
  font-family: var(--schrift-titel); font-weight: 500; font-size: .98rem; text-decoration: none;
}
.nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 1px; background: var(--schwarz); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--kurve); }
.nav ul a:hover::after, .nav ul a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.kopf__aktion { position: relative; z-index: 10; display: flex; align-items: center; gap: 1.5rem; }
.kopf__tel { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--schrift-titel); font-weight: 600; font-size: .98rem; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kopf__tel svg { width: 1em; height: 1em; }
.kopf__tel:hover { text-decoration: underline; text-underline-offset: .25em; }
.burger {
  display: none; width: 44px; height: 44px; padding: 0; margin-right: -.5rem;
  background: none; border: 0; cursor: pointer; position: relative;
}
.burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--schwarz); transition: transform .45s var(--kurve), opacity var(--dauer), top .45s var(--kurve); }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

@media (max-width: 1100px) {
  .kopf__tel { display: none; }
  .nav ul { gap: 1.4rem; }
}
@media (max-width: 860px) {
  :root { --kopf: 64px; }
  .kopf__innen { gap: 1rem; }
  .burger { display: block; }
  .kopf__aktion .knopf { display: none; }
  /* Das Menü: eine weiße Seite über der ganzen Seite, Zeile für Zeile. */
  .nav {
    position: fixed; inset: 0; z-index: 5;
    padding: calc(var(--kopf) + 1rem) var(--rand) 2.5rem;
    background: var(--weiss);
    display: none; overflow: auto; margin: 0;
  }
  .kopf.ist-offen .nav { display: block; animation: seite-rein .5s var(--kurve); }
  @keyframes seite-rein { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
  .nav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--linie); }
  .nav li { opacity: 0; translate: 0 14px; animation: menue-rein .6s var(--kurve) forwards; border-bottom: 1px solid var(--linie); }
  .nav li:nth-child(1) { animation-delay: .08s; } .nav li:nth-child(2) { animation-delay: .14s; } .nav li:nth-child(3) { animation-delay: .2s; } .nav li:nth-child(4) { animation-delay: .26s; } .nav li:nth-child(5) { animation-delay: .32s; }
  @keyframes menue-rein { to { opacity: 1; translate: 0 0; } }
  .nav ul a { font-size: clamp(2rem, 9vw, 2.8rem); font-stretch: 76%; font-weight: 800; letter-spacing: -.03em; padding: 1rem 0; display: flex; justify-content: space-between; align-items: center; }
  .nav ul a::after { display: none; }
  .nav ul a[aria-current="page"] { color: var(--grau-50); }
  .nav__extra { display: grid; gap: .6rem; margin-top: 1.5rem; opacity: 0; translate: 0 14px; animation: menue-rein .6s var(--kurve) .4s forwards; }
  .nav__extra .knopf { width: 100%; }
}
@media (min-width: 861px) { .nav__extra { display: none; } }

/* --- Dock: die schwarze Leiste unten auf dem Telefon -----------------------------
   Anrufen, WhatsApp, Rückruf — sobald der Held vorbei ist. Ein Handwerker
   liest abends auf dem Handy; der Knopf zum Anrufen darf nie weiter als einen
   Daumen entfernt sein. */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none;
  background: var(--schwarz); color: var(--weiss);
  border-top: 1px solid var(--linie-dunkel);
  translate: 0 110%;
  transition: translate .6s var(--kurve);
}
.dock.ist-da { translate: 0 0; }
.dock__knopf {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  padding: 1.05em .5em; padding-bottom: calc(1.05em + env(safe-area-inset-bottom, 0px));
  color: var(--weiss); font-family: var(--schrift-titel); font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap;
  border-left: 1px solid var(--linie-dunkel);
}
.dock__knopf:first-child { border-left: 0; }
.dock__knopf svg { width: 1.1em; height: 1.1em; flex: none; }
.dock__knopf--voll { background: var(--weiss); color: var(--schwarz); }
@media (max-width: 860px) {
  .js .dock { display: flex; }
  .kopf.ist-offen ~ .dock { translate: 0 110%; }
  .cookie:not([hidden]) ~ .dock { translate: 0 110%; } /* solange das Banner offen ist, bleibt das Dock unten — sonst überlappen beide zwischen 700 und 860 px */
  .fuss { padding-bottom: 5.5rem; }
}

/* --- Abschnitte ---------------------------------------------------------------
   Jeder Abschnitt beginnt mit einer Haarlinie. Innen ein Raster aus zwei
   Spalten: links die Beschriftung (Nummer und Kicker), rechts alles andere.
   Bänder gibt es in Weiß, Grau und Schwarz — nie eine Fläche in einer Fläche. */
.abschnitt { position: relative; z-index: 1; background: var(--weiss); padding-block: clamp(3rem, 6vw, 5.5rem); }
.abschnitt__korpus h2 { font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
.kontakt h2 { font-size: clamp(1.9rem, 3.2vw, 3.2rem); }
.kontakt h2 + .lead { margin-top: 1.25rem; } /* außerhalb von .abschnitt__kopf hat .lead sonst keinen Abstand nach oben */
.abschnitt--eng { padding-block: clamp(2.5rem, 5vw, 4rem); }
.abschnitt--grau { background: var(--grau-95); }
.abschnitt--dunkel { background: var(--schwarz); color: var(--weiss); }
.abschnitt--dunkel + .abschnitt--dunkel { padding-top: 0; }
.abschnitt__kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.abschnitt__kopf .kicker { margin: .4rem 0 0; }
.abschnitt__kopf .lead { margin-top: 1.5rem; }
.abschnitt__kopf .knopfreihe { margin-top: 2rem; }
.abschnitt__kopf--mitte { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.abschnitt__kopf--mitte .kicker { justify-content: center; }
.abschnitt__kopf--mitte h2 { max-width: 22ch; }
.abschnitt__kopf--mitte .lead { margin-inline: auto; }
.abschnitt__kopf--mitte .knopfreihe { justify-content: center; }
.abschnitt__korpus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); }
.abschnitt__korpus > :first-child { position: sticky; top: calc(var(--kopf) + 1.5rem); align-self: start; }
@media (max-width: 860px) {
  .abschnitt__kopf, .abschnitt__korpus { grid-template-columns: 1fr; gap: .75rem; }
  .abschnitt__korpus > :first-child { position: static; }
}
.linie-oben { border-top: 1px solid var(--linie); padding-top: clamp(2.5rem, 5vw, 4rem); }
.dunkel .linie-oben { border-top-color: var(--linie-dunkel); }
.abschnitt--dunkel .linie-oben { border-top-color: var(--linie-dunkel); }
.abschnitt--grau .linie-oben { border-top-color: var(--grau-80); }

/* ==========================================================================
   HELD (Startseite)
   Ein Vollbild: Die drei Motive liegen als Hintergrund übereinander, das
   aktive sichtbar, der Wechsel eine Überblendung — synchron zum rollenden
   Wort der Schlagzeile. Darüber ein Verlauf von unten und ein flächiges
   Abdunkeln, damit die weiße Tafel auf jedem Motiv lesbar bleibt (auch auf
   dem hellsten, dem Transporter der Azubis) — kein Weichzeichner, kein Glas.
   Die Tafel: Kopfzeile mit Haarlinie, Schlagzeile über die volle Breite,
   unten links der Vorspann mit Knopf und Telefonnummer, unten rechts klein
   der Takt mit der Legende. Seit dem 2026-09-07; davor stand das Foto
   unter der Tafel, gepinnt, mit Vorhang (README).
   ========================================================================== */
.held { position: relative; z-index: 0; min-height: calc(100svh - var(--kopf)); display: grid; background: var(--schwarz); color: var(--weiss); overflow: hidden; isolation: isolate; }
.held__motive { position: absolute; inset: 0; z-index: -1; transform-origin: 50% 40%; }
.zeiger-fein .held__motive { scale: 1.04; translate: calc(var(--mx, 0) * 1.2%) calc(var(--my, 0) * 1.2%); transition: translate 1.2s var(--kurve); }
.held__motiv {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%;
  opacity: 0; transform: scale(1.06); transform-origin: 60% 50%;
  transition: opacity .9s var(--kurve), transform 1.6s var(--kurve);
}
.held__motiv.ist-aktiv { opacity: 1; transform: scale(1); z-index: 2; }
.held__motiv.war-aktiv { opacity: 1; z-index: 1; transition: none; }
/* Das Abdunkeln liegt auf den Motiven, nicht auf der Tafel: erst flächig
   (45 %), dann von unten ein Verlauf (70 % → 0), damit Vorspann, Knopf und
   Legende auf jedem Foto stehen können. */
.held__motive::before { content: ""; position: absolute; inset: 0; z-index: 3; background: rgba(0, 0, 0, .45); }
.held__motive::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 3; background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); }
.held__tafel {
  min-height: calc(100svh - var(--kopf));
  display: grid; grid-template-rows: auto 1fr auto; gap: clamp(1.25rem, 2.5vh, 2rem);
  padding-block: clamp(1rem, 2vh, 1.5rem) clamp(1.75rem, 3.5vh, 2.5rem);
}
.held__kopfzeile {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-bottom: .9rem; position: relative;
  font-family: var(--schrift-titel); font-stretch: 116%; font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.held__kopfzeile b { color: var(--weiss); font-weight: 700; }
.held__kopfzeile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .55); transform-origin: left; }
.held h1 { align-self: center; max-width: 100%; color: var(--weiss); }
.held h1 .zeile { display: block; }
/* Das rollende Wort: eine Zeile mit eigenem Fenster; das Skript tauscht den
   Text und lässt das alte Wort nach oben hinaus- und das neue von unten
   hereinfahren. Ohne Skript steht das erste Wort still da. */
.rolle { overflow: hidden; padding: .04em 0 .16em; margin: -.04em 0 -.16em; }
.rolle__wort { display: inline-block; transition: translate .6s var(--kurve), opacity .45s var(--kurve); }
.rolle--raus .rolle__wort { translate: 0 -110%; opacity: 0; }
.rolle--rein .rolle__wort { translate: 0 110%; opacity: 0; transition: none; }
.held__unten { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 7rem); align-items: end; }
.held__text .lead { max-width: 36rem; color: rgba(255, 255, 255, .88); }
.held__text .knopfreihe { margin-top: 1.75rem; gap: .75rem 1.75rem; }
/* Die Telefonnummer neben dem Knopf: Text, kein zweiter Knopf. */
.held__tel { display: inline-flex; align-items: center; gap: .55em; font-family: var(--schrift-titel); font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; color: var(--weiss); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%; padding-bottom: .1em; transition: background-size .4s var(--kurve); }
.held__tel:hover { background-size: 0% 1px; }
.held__tel svg { width: 1.05em; height: 1.05em; }
.vertrauen {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: 1.25rem;
  list-style: none; font-size: .9rem; color: rgba(255, 255, 255, .72);
}
/* `baseline` statt `center`: bricht der Satz neben dem fetten Wort um — auf
   dem Telefon tut „Festpreis. Sie zahlen erst, wenn die Seite online ist."
   das —, dann schöbe `center` das Wort auf halbe Höhe zwischen die zwei
   Zeilen, und aus einem Satz würden zwei Fetzen nebeneinander. Auf der
   Grundlinie liest es sich weiter als ein Satz. */
.vertrauen li { display: inline-flex; align-items: baseline; gap: .45rem; }
.vertrauen li .sterne { align-self: center; }
.vertrauen strong { color: var(--weiss); }
.sterne { display: inline-flex; gap: 1px; color: var(--weiss); }
.sterne svg { width: .95em; height: .95em; fill: currentColor; }

/* Die Legende: der Takt (drei Striche, einer je Motiv), die Nummer und der
   Motivtitel — klein, unten rechts. Der aktive Strich füllt sich in der Zeit
   bis zum nächsten Wechsel; jeder Strich ist ein Knopf und springt zu seinem
   Motiv. */
.held__legende { justify-self: end; text-align: right; max-width: 22rem; }
.held__legende .kicker { justify-content: flex-end; color: rgba(255, 255, 255, .72); margin: 0 0 .5rem; }
.held__legende .kicker .held__nr { color: var(--weiss); font-weight: 700; font-variant-numeric: tabular-nums; }
.held__takt { display: flex; gap: .4rem; width: min(200px, 40vw); margin: 0 0 .9rem auto; }
.held__takt button { flex: 1; display: block; padding: .6rem 0; margin: -.6rem 0; background: none; border: 0; cursor: pointer; }
.held__takt i { display: block; position: relative; height: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.held__takt i::after { content: ""; position: absolute; inset: 0; background: var(--weiss); transform: scaleX(0); transform-origin: left; }
.held__takt button.war-aktiv i::after { transform: scaleX(1); }
.held__takt button.ist-aktiv i::after { animation: takt var(--takt, 4.6s) linear forwards; }
.held.steht .held__takt button.ist-aktiv i::after { animation-play-state: paused; }
@keyframes takt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.held__takt button:hover i { background: rgba(255, 255, 255, .6); }
.held__takt button:focus-visible { outline-offset: -2px; }
.held__motivtitel { overflow: hidden; }
.held__motivtitel span { display: block; font-family: var(--schrift-titel); font-stretch: 80%; font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.1; letter-spacing: -.01em; color: rgba(255, 255, 255, .92); transition: translate .6s var(--kurve), opacity .45s var(--kurve); }
.held.wechselt .held__motivtitel span { translate: 0 -105%; opacity: 0; }
.held.kommt .held__motivtitel span { translate: 0 105%; opacity: 0; transition: none; }

/* Auftritt beim Laden — nur mit Skript, damit ohne Skript nichts wartet. */
.js .held__kopfzeile { animation: auftritt .9s var(--kurve) both; }
.js .held__kopfzeile::after { animation: linie-ziehen 1.1s var(--kurve) .15s both; }
@keyframes linie-ziehen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.js .held__text > * { animation: auftritt 1s var(--kurve) both; }
.js .held__text > :nth-child(1) { animation-delay: .55s; }
.js .held__text > :nth-child(2) { animation-delay: .7s; }
.js .held__text > :nth-child(3) { animation-delay: .85s; }
.js .held__legende { animation: auftritt 1s var(--kurve) 1s both; }
.js .held__motive { animation: foto-auf 1.6s var(--kurve) both; }
@keyframes auftritt { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes foto-auf { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 860px) {
  .held__tafel { min-height: calc(100svh - var(--kopf)); gap: 1.75rem; }
  .held__kopfzeile > span:last-child { display: none; }
  .held__unten { grid-template-columns: 1fr; gap: 1.75rem; }
  .held h1 { font-size: clamp(2.7rem, 11.6vw, 5rem); }
  .held__legende { justify-self: start; text-align: left; }
  .held__legende .kicker { justify-content: flex-start; }
  .held__takt { margin-left: 0; margin-bottom: .75rem; }
  .held__text .knopfreihe .knopf { flex: 1 1 auto; }
  .held__motiv { object-position: 55% 35%; }
}

/* --- Laufband der Gewerke: ein schwarzes Band --------------------------------- */
.laufband {
  position: relative; z-index: 1;
  background: var(--schwarz); color: var(--weiss);
  overflow: hidden; padding: 1.1rem 0;
  font-family: var(--schrift-titel); font-stretch: 108%; font-weight: 600; font-size: .86rem; letter-spacing: .1em; text-transform: uppercase;
}
/* Drei Kopien der Liste; die Animation läuft von der zweiten zur dritten, so
   bleibt links wie rechts eine Kopie Spielraum.

   Das Band läuft gleichmäßig und unabhängig vom Scrollen — es ist eine Uhr,
   kein Messgerät. Bis zum 2026-09-10 gab ihm das Skript beim Scrollen einen
   Schub in Scrollrichtung (--schub) und neigte die Schrift (--neig); beides
   federte zurück. Das las sich als Ruckeln, nicht als Antwort (Entscheidung
   Maxim). Auch die Pause beim Zeigen ist weg: „durchgehend“ heißt
   durchgehend. */
.laufband__spur { display: flex; width: max-content; }
.laufband ul { display: flex; list-style: none; }
.laufband li { display: inline-flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem; white-space: nowrap; }
.laufband li::after { content: ""; width: .32rem; height: .32rem; background: var(--weiss); }
.laufband__vor { text-transform: none; letter-spacing: .02em; font-weight: 500; font-stretch: 100%; color: var(--hell-dunkel); }
.js .laufband__spur { animation: laufen 70s linear infinite; }
@keyframes laufen { from { transform: translateX(-33.3333%); } to { transform: translateX(-66.6667%); } }

/* --- Listen: die Zeile ist der Baustein ----------------------------------------
   Nummer, Titel, Text nebeneinander; eine Haarlinie darüber; die letzte Zeile
   hat auch eine darunter. Das ersetzt Karten in jeder Größe. */
.liste { list-style: none; border-bottom: 1px solid var(--linie); }
.dunkel .liste, .abschnitt--dunkel .liste { border-bottom-color: var(--linie-dunkel); }
.abschnitt--grau .liste { border-bottom-color: var(--grau-80); }
.liste__zeile {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.5fr); gap: .75rem clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
  border-top: 1px solid var(--linie);
}
.dunkel .liste__zeile, .abschnitt--dunkel .liste__zeile { border-top-color: var(--linie-dunkel); }
.abschnitt--grau .liste__zeile { border-top-color: var(--grau-80); }
.liste__nr { font-family: var(--schrift-titel); font-stretch: 76%; font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -.03em; color: var(--grau-60); transition: color var(--dauer); font-variant-numeric: tabular-nums; }
.liste__zeile:hover .liste__nr { color: currentColor; }
.liste__zeile h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); transition: transform .5s var(--kurve); }
.liste__zeile:hover h3 { transform: translateX(6px); }
/* Die Haarlinie über der Zeile zeichnet sich von links, wenn die Zeile
   erscheint; die letzte Zeile zeichnet auch die Linie darunter. Gilt ebenso
   für Referenzzeilen, Kontaktwege und die Fragen. */
.js :is(.liste__zeile, .check__zeile, .fall, .weg, .faq details) { position: relative; border-top-color: transparent; }
.js :is(.liste, .check__liste, .faelle, .kontakt__wege, .faq) { border-bottom-color: transparent; }
.js :is(.liste__zeile, .check__zeile, .fall, .weg, .faq details)::before,
.js :is(.liste__zeile, .check__zeile, .fall, .weg, .faq details):last-child::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; z-index: 1;
  background: var(--linie-hier); transform: scaleX(0); transform-origin: left;
  transition: transform 1.3s var(--kurve);
}
.js :is(.liste__zeile, .check__zeile, .fall, .weg, .faq details):last-child::after { top: auto; bottom: -1px; transition-delay: .25s; }
.js :is(.liste__zeile.ist-da, .check__zeile.ist-da, .fall.ist-da, .zeig.ist-da .weg, .faq.ist-da details)::before,
.js :is(.liste__zeile.ist-da, .check__zeile.ist-da, .fall.ist-da, .zeig.ist-da .weg, .faq.ist-da details):last-child::after { transform: scaleX(1); }
.js .zeig.ist-da .weg:nth-child(2)::before, .js .faq.ist-da details:nth-child(2)::before { transition-delay: .1s; }
.js .zeig.ist-da .weg:nth-child(3)::before, .js .faq.ist-da details:nth-child(3)::before { transition-delay: .2s; }
.js .zeig.ist-da .weg:nth-child(4)::before, .js .faq.ist-da details:nth-child(4)::before { transition-delay: .3s; }
.js .faq.ist-da details:nth-child(5)::before { transition-delay: .4s; }
.js .faq.ist-da details:nth-child(6)::before { transition-delay: .5s; }
.js .zeig.ist-da .weg:last-child::after, .js .faq.ist-da details:last-child::after { transition-delay: .6s; }
.liste__zeile p { color: var(--grau-40); }
.dunkel .liste__zeile p, .abschnitt--dunkel .liste__zeile p { color: var(--hell-dunkel); }
.liste__ikone { width: 1.6rem; height: 1.6rem; margin-bottom: .75rem; }
.liste__ikone svg { width: 100%; height: 100%; }
@media (max-width: 700px) {
  .liste__zeile { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .liste__zeile p { grid-column: 2; }
  .liste__nr { font-size: 1.4rem; padding-top: .2rem; }
}
/* Die Spaltenfassung: vier nebeneinander, getrennt durch senkrechte Linien. */
.spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; border-top: 1px solid var(--linie); }
.spalten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spalten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dunkel .spalten, .abschnitt--dunkel .spalten { border-top-color: var(--linie-dunkel); }
.spalten > li, .spalten > article, .spalten > div { padding: 1.75rem clamp(1rem, 2vw, 2rem) 2rem 0; margin-right: clamp(1rem, 2vw, 2rem); border-right: 1px solid var(--linie); display: flex; flex-direction: column; gap: .6rem; }
.spalten > :last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.dunkel .spalten > *, .abschnitt--dunkel .spalten > * { border-right-color: var(--linie-dunkel); }
.spalten .liste__nr { margin-bottom: .5rem; }
.spalten h3 { font-size: 1.5rem; }
.spalten p { color: var(--grau-40); font-size: .98rem; }
.dunkel .spalten p, .abschnitt--dunkel .spalten p { color: var(--hell-dunkel); }
@media (max-width: 900px) {
  .spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spalten--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spalten > :nth-child(2n) { border-right: 0; margin-right: 0; padding-right: 0; }
  .spalten--3 > :nth-child(2n) { border-right: 0; margin-right: 0; padding-right: 0; }
  .spalten--3 > :nth-child(3n) { border-right: 1px solid var(--linie); margin-right: clamp(1rem, 2vw, 2rem); padding-right: clamp(1rem, 2vw, 2rem); }
  .spalten--3 > :last-child { border-right: 0; margin-right: 0; padding-right: 0; }
}
@media (max-width: 560px) {
  .spalten, .spalten--3, .spalten--2 { grid-template-columns: 1fr; }
  .spalten > *, .spalten--3 > * { border-right: 0 !important; margin-right: 0 !important; padding-right: 0 !important; border-bottom: 1px solid var(--linie); padding-block: 1.5rem; }
  .spalten > :last-child { border-bottom: 0; }
  .dunkel .spalten > *, .abschnitt--dunkel .spalten > * { border-bottom-color: var(--linie-dunkel); }
}
/* Die senkrechten Linien zwischen Spalten zeichnen sich von oben — nur in der
   Spaltenansicht; sobald die Spalten untereinander stehen, gelten die
   gewöhnlichen Ränder. */
@media (min-width: 901px) {
  .js :is(.spalten > *, .stimme) { position: relative; border-right-color: transparent; }
  .js :is(.spalten > *, .stimme)::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: var(--linie-hier); transform: scaleY(0); transform-origin: top; transition: transform 1.3s var(--kurve) .2s; }
  .js :is(.spalten > :last-child, .stimme:last-child)::after { display: none; }
  .js :is(.spalten > .ist-da, .stimme.ist-da)::after { transform: scaleY(1); }
}
@media (min-width: 981px) {
  .js .paket { border-right-color: transparent; }
  .js .paket::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: var(--linie-hier); transform: scaleY(0); transform-origin: top; transition: transform 1.3s var(--kurve) .2s; }
  .js .paket:last-child::after { display: none; }
  .js .paket.ist-da::after { transform: scaleY(1); }
}
@media (min-width: 761px) {
  .js .kennzahlen li { position: relative; border-right-color: transparent; }
  .js .kennzahlen li::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: var(--linie-hier); transform: scaleY(0); transform-origin: top; transition: transform 1.3s var(--kurve) .2s; }
  .js .kennzahlen li:last-child::after { display: none; }
  .js .kennzahlen li.ist-da::after { transform: scaleY(1); }
}

.haken { list-style: none; display: grid; gap: .55rem; }
.haken li { display: flex; gap: .75rem; align-items: flex-start; }
.haken li > span { min-width: 0; } /* eine Zeile, die mit <b> beginnt, steht in einem span — sonst werden <b> und Text zwei Flex-Spalten, auf dem Telefon ein Wort je Zeile */
.haken li::before {
  content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-top: .3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-size: 100%; background-position: center; background-repeat: no-repeat;
}
.dunkel .haken li::before, .abschnitt--dunkel .haken li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); }
.haken li.fehlt { color: var(--grau-50); }
.haken li.fehlt::before { background-image: none; height: 1px; margin-top: .85rem; background-color: var(--grau-80); }
.js .zeig .haken li { opacity: 0; translate: -8px 0; transition: opacity .6s var(--kurve), translate .6s var(--kurve); }
.js .zeig.ist-da .haken li { opacity: 1; translate: 0 0; }
.js .zeig.ist-da .haken li:nth-child(1) { transition-delay: .2s; } .js .zeig.ist-da .haken li:nth-child(2) { transition-delay: .26s; } .js .zeig.ist-da .haken li:nth-child(3) { transition-delay: .32s; } .js .zeig.ist-da .haken li:nth-child(4) { transition-delay: .38s; } .js .zeig.ist-da .haken li:nth-child(5) { transition-delay: .44s; } .js .zeig.ist-da .haken li:nth-child(6) { transition-delay: .5s; } .js .zeig.ist-da .haken li:nth-child(7) { transition-delay: .56s; } .js .zeig.ist-da .haken li:nth-child(8) { transition-delay: .62s; } .js .zeig.ist-da .haken li:nth-child(9) { transition-delay: .68s; }

/* --- Die Checkliste (Startseite, 01): Kästchen statt Nummern -----------------
   Vier Zeilen, jede die Beschriftung eines echten Kontrollkästchens; das
   Kästchen selbst ist eine SVG-Zeichnung. Beim Erscheinen zeichnet sich sein
   Rahmen (stroke-dashoffset), beim Zeigen liegt das Kreuz grau darin, beim
   Ankreuzen wird es schwarz — zwei Striche, einer nach dem anderen. Darunter
   zählt die Summe mit; ab dem ersten Kreuz steht der Link daneben. Das Skript
   liest nur die Kästchen und schreibt den Satz. */
.check__liste { list-style: none; border-bottom: 1px solid var(--linie); }
.check__zeile { border-top: 1px solid var(--linie); }
.check__label {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.5fr); gap: .75rem clamp(1.5rem, 4vw, 4rem);
  align-items: start; padding: clamp(1.5rem, 2.5vw, 2.25rem) var(--rand); margin-inline: calc(-1 * var(--rand));
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.check__kasten { width: 2.6rem; height: 2.6rem; margin-top: .1rem; color: var(--schwarz); }
.check__kasten svg { width: 100%; height: 100%; overflow: visible; }
.check__rand { stroke-width: 1.4; stroke-dasharray: 152; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--kurve); }
.js .check__zeile .check__rand { stroke-dashoffset: 152; }
.js .check__zeile.ist-da .check__rand { stroke-dashoffset: 0; transition-delay: calc(var(--v, 0s) + .15s); }
.check__kreuz { stroke-width: 2.6; stroke-linecap: square; stroke-dasharray: 29; stroke-dashoffset: 29; transition: stroke-dashoffset .28s var(--kurve), stroke .3s var(--kurve); }
.check__kreuz + .check__kreuz { transition-delay: .14s, 0s; }
.check__label:hover .check__feld:not(:checked) ~ .check__kasten .check__kreuz { stroke-dashoffset: 0; stroke: var(--grau-80); }
.check__feld:checked ~ .check__kasten .check__kreuz { stroke-dashoffset: 0; stroke: currentColor; }
.check__feld:focus-visible ~ .check__kasten { outline: 2px solid var(--schwarz); outline-offset: 4px; }
.check__titel { font-family: var(--schrift-titel); font-stretch: 88%; font-weight: 800; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.1; letter-spacing: -.015em; transition: transform .5s var(--kurve); }
.check__label:hover .check__titel { transform: translateX(6px); }
.check__text { color: var(--grau-40); }
.check__stand { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem clamp(1.5rem, 4vw, 4rem); align-items: start; padding-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.check__summe { display: flex; align-items: baseline; font-family: var(--schrift-titel); font-stretch: 74%; font-weight: 800; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.check__summe small { font-size: .5em; color: var(--grau-60); font-weight: 700; letter-spacing: -.02em; }
.check__summe.springt > span { animation: springen .5s var(--kurve); }
@keyframes springen { 30% { translate: 0 -.12em; } }
.check__antwort p { max-width: 40rem; margin: 0; color: var(--grau-40); font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.check__antwort b { color: var(--schwarz); }
.check__link { margin-top: .9rem; }
.js .check:not(.hat-kreuz) .check__link { display: none; }
.js .check.hat-kreuz .check__link { animation: auftauchen .6s var(--kurve) both; }
@media (max-width: 700px) {
  .check__label { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .check__text { grid-column: 2; }
  .check__kasten { width: 2rem; height: 2rem; margin-top: .15rem; }
  .check__stand { grid-template-columns: 3.25rem minmax(0, 1fr); }
}

/* --- Das Schaufenster: ein Telefon, das beim Scrollen die Seite wechselt ------
   Links ein Telefon, das stehen bleibt (sticky); rechts die vier Punkte. Wer
   die Mitte des Telefons passiert, ist dran — das Skript setzt `ist-aktiv`
   auf Punkt und Bildschirm (Seiten, die schon dran waren: `ist-vorbei`); mit
   feinem Zeiger reicht Zeigen. Die vier Bildschirme sind Attrappen aus
   Schrift und Linien in Container-Einheiten; Farbe haben nur Google und
   WhatsApp — wie die Browser-Attrappen der Referenzseite die Farben der
   Betriebe tragen. Auf dem Telefon klebt das Gerät oben unter dem Kopf. */
.schau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
.schau__geraet { position: sticky; top: calc(var(--kopf) + 1.5rem); }
/* Seit dem 2026-09-11 ein iPhone statt eines Rechtecks (Wunsch Maxim): Ecken
   mit 14 % Radius wie beim Gerät, ein Rahmen, der Bildschirm mit derselben
   Rundung nach innen versetzt, oben die Dynamic Island, unten der
   Home-Balken, seitlich Aktionstaste, Lautstärke und Seitentaste. Der Radius
   steht in Prozent (waagerecht 14 % der Breite, senkrecht 14 % × 9 / 18,5 der
   Höhe), damit er bei jeder Größe gleich aussieht; der Bildschirm rechnet ihn
   in Container-Einheiten nach — `--tel-rand` ist die Breite des Rahmens. */
.tel { --tel-rand: 10px; --tel-kante: var(--hell-dunkel); position: relative; width: min(100%, 280px, (100vh - 11rem) * 9 / 18.5); aspect-ratio: 9 / 18.5; padding: var(--tel-rand); border: 1px solid var(--tel-kante); border-radius: 14% / 6.81%; background: #0B0B0C; container-type: inline-size; }
/* Die Tasten: links Aktionstaste und zweimal Lautstärke als ein Streifen mit
   Lücken (ein Verlauf statt drei Elementen), rechts die Seitentaste. */
.tel::before, .tel::after { content: ""; position: absolute; width: 3px; background: var(--tel-kante); }
.tel::before { left: -4px; top: 17%; height: 25%; border-radius: 2px 0 0 2px; background: linear-gradient(var(--tel-kante) 0 16%, transparent 16% 36%, var(--tel-kante) 36% 64%, transparent 64% 72%, var(--tel-kante) 72%); }
.tel::after { right: -4px; top: 27%; height: 12%; border-radius: 0 2px 2px 0; }
.tel__schirm { position: relative; height: 100%; overflow: hidden; border-radius: calc(14cqw - .72 * var(--tel-rand) - .72px); background: var(--weiss); color: var(--schwarz); font-family: var(--schrift-text); font-size: clamp(8px, 4.9cqw, 13.5px); line-height: 1.35; }
/* Dynamic Island und Home-Balken liegen über allen fünf Seiten. */
.tel__schirm::after { content: ""; position: absolute; z-index: 5; top: 3cqw; left: 50%; width: 30cqw; height: 8.8cqw; translate: -50% 0; border-radius: 999px; background: #000; pointer-events: none; }
.tel__griff { position: absolute; z-index: 5; left: 50%; bottom: 2.2cqw; width: 34cqw; height: max(3px, 1.3cqw); translate: -50% 0; border-radius: 999px; background: var(--schwarz); transition: background-color .45s var(--kurve); pointer-events: none; }
.ist-dunkel .tel__griff { background: #fff; }
.tel__seite { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; translate: 0 9%; transition: opacity .45s var(--kurve), translate .65s var(--kurve); }
.tel__seite.ist-aktiv { opacity: 1; translate: 0 0; }
.tel__seite.ist-vorbei { translate: 0 -9%; }
/* Die Statusleiste liegt über allen fünf Seiten und ist der billigste Trick,
   der die Attrappe zum Telefon macht. Ihre Farbe folgt der aktiven Seite: das
   Skript setzt `ist-dunkel`, sobald die Seite `data-schirm="dunkel"` trägt
   (Anruf und WhatsApp). Jede Seite hält den Platz oben selbst frei. */
.tel__leiste { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: 14.8cqw; padding: 0 8.5cqw 0 10.5cqw; color: var(--schwarz); transition: color .45s var(--kurve); pointer-events: none; }
.ist-dunkel .tel__leiste { color: #fff; }
.tel__uhr { font-weight: 700; font-size: .82em; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.tel__zeichen { display: flex; align-items: center; gap: .45em; }
.tel__zeichen svg { height: .72em; width: auto; fill: currentColor; }
.tel__zeichen svg:nth-child(3) { height: .78em; }
/* Die Startseite eines Betriebs: Kopf, Foto mit Schlagzeile, Bewertung, zwei
   Knöpfe, die Leistungen als Marken, das Formular, unten der Notdienst. */
.tw__kopf { display: flex; justify-content: space-between; align-items: center; gap: .5em; padding: 2.9em 1em .8em; border-bottom: 1px solid var(--linie); font-family: var(--schrift-titel); font-stretch: 80%; font-weight: 800; font-size: 1.05em; letter-spacing: -.01em; }
.tw__kopf i { flex: none; width: 1.3em; height: .8em; border-top: 2px solid; border-bottom: 2px solid; }
.tw__kopf span { font-family: var(--schrift-text); font-size: .78em; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.tw__held { flex: none; position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .3em; padding: .9em 1em .8em; aspect-ratio: 16 / 10; color: #fff; overflow: hidden; }
.tw__held img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tw__held::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .1) 62%); }
.tw__held > :not(img) { position: relative; z-index: 1; }
.tw__marke { align-self: flex-start; margin-bottom: auto; padding: .3em .6em; background: rgba(255, 255, 255, .92); color: var(--schwarz); font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .6em; letter-spacing: .1em; text-transform: uppercase; }
.tw__held b { font-family: var(--schrift-titel); font-stretch: 76%; font-weight: 800; font-size: 1.72em; line-height: .95; letter-spacing: -.02em; }
.tw__ort { font-size: .76em; opacity: .88; }
.tw__wertung { display: flex; align-items: center; gap: .4em; padding: .7em 1em .1em; font-size: .8em; }
.tw__sterne { display: inline-flex; gap: .1em; }
.tw__sterne svg { width: .95em; height: .95em; fill: #F4B400; }
.tw__wertung b { font-weight: 700; }
.tw__wertung small { color: var(--grau-50); }
.tw__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; padding: .7em 1em .4em; }
.tw__knoepfe span { padding: .65em .3em; border: 1px solid var(--schwarz); text-align: center; font-weight: 700; font-size: .9em; }
.tw__knoepfe span:first-child { background: var(--schwarz); color: #fff; }
.tw__chips { display: flex; flex-wrap: wrap; gap: .35em; list-style: none; padding: .5em 1em .1em; }
.tw__chips li { padding: .3em .65em; border: 1px solid var(--grau-80); font-size: .74em; color: var(--grau-40); }
.tw__formular { display: grid; gap: .8em; padding: .6em 1em 1em; }
.tw__formular small { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .66em; letter-spacing: .12em; text-transform: uppercase; color: var(--grau-50); }
.tw__formular i { padding-bottom: .35em; border-bottom: 1px solid var(--grau-80); font-style: normal; font-size: .85em; color: var(--grau-50); }
.tw__formular span { margin-top: .2em; padding: .7em; background: var(--schwarz); color: #fff; text-align: center; font-weight: 700; font-size: .9em; }
/* Die Leiste unten klebt am Fuß des Bildschirms — hell, damit sie nicht mit
   dem Absenden-Knopf darüber zu einem schwarzen Block verschmilzt. */
/* Die Leiste hängt an der Unterkante des Schirms, nicht am Ende des Inhalts: die
   Seite ist ~15 % höher als der Schirm, und im Fluss ragte die Leiste 99 px unten
   heraus — sichtbar blieb eine halbe Buchstabenzeile (2026-09-12). Was hinter ihr
   liegt, ist wie auf jedem Telefon weiter unten. */
.tw__leiste { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .65em 1em 1.1em; border-top: 1px solid var(--linie); background: var(--weiss); }
.tw__leiste b { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .66em; letter-spacing: .1em; text-transform: uppercase; }
.tw__leiste span { padding: .45em .9em; background: var(--schwarz); color: #fff; font-weight: 700; font-size: .82em; }
.js .tel__seite .tw__held img { scale: 1.08; transition: scale 7s linear; }
.js .tel__seite.ist-aktiv .tw__held img { scale: 1; }
.js .tel__seite .tw__formular > *, .js .tel__seite .tw__knoepfe > *, .js .tel__seite .tw__chips li { opacity: 0; translate: 0 6px; transition: opacity .5s var(--kurve), translate .5s var(--kurve); }
.js .tel__seite.ist-aktiv .tw__formular > *, .js .tel__seite.ist-aktiv .tw__knoepfe > *, .js .tel__seite.ist-aktiv .tw__chips li { opacity: 1; translate: 0 0; }
.js .tel__seite.ist-aktiv :is(.tw__knoepfe, .tw__formular, .tw__chips) > :nth-child(1) { transition-delay: .35s; }
.js .tel__seite.ist-aktiv :is(.tw__knoepfe, .tw__formular, .tw__chips) > :nth-child(2) { transition-delay: .45s; }
.js .tel__seite.ist-aktiv :is(.tw__knoepfe, .tw__formular, .tw__chips) > :nth-child(3) { transition-delay: .55s; }
.js .tel__seite.ist-aktiv :is(.tw__knoepfe, .tw__formular, .tw__chips) > :nth-child(4) { transition-delay: .65s; }
.js .tel__seite.ist-aktiv :is(.tw__knoepfe, .tw__formular, .tw__chips) > :nth-child(5) { transition-delay: .75s; }
.tw__zeiten { margin: auto 0 0; padding: .3em 1em .8em; font-size: .74em; color: var(--grau-50); }
.js .tel__seite .tw__leiste { translate: 0 100%; transition: translate .6s var(--kurve); }
.js .tel__seite.ist-aktiv .tw__leiste { translate: 0 0; transition-delay: .9s; }
/* Die Google-Suche: Suchzeile, Reiter, Karte, der erste Treffer als Karte
   mit Bildern und Knöpfen, zwei blasse dahinter. */
.tel__seite--google { padding-bottom: 1.2em; }
.tg__suche { display: flex; align-items: center; gap: .6em; margin: 2.9em .8em .5em; padding: .55em .9em; border: 1px solid var(--grau-80); border-radius: 999px; font-size: .95em; }
.tg__suche svg { flex: none; width: 1.1em; height: 1.1em; color: var(--grau-50); }
.tg__suche span { flex: 1; overflow: hidden; white-space: nowrap; }
.tg__mikro { color: #1A5EBB !important; }
/* `flex: none`, weil `overflow: hidden` die Mindesthöhe auf null setzt: bis zum
   2026-09-11 drückte die Seite darunter die Reiterzeile auf 7 px zusammen. */
.tg__reiter { flex: none; display: flex; gap: 1.05em; margin: 0 .9em; padding-bottom: .5em; border-bottom: 1px solid var(--linie); font-size: .78em; color: var(--grau-50); overflow: hidden; }
.tg__reiter .ist-an { position: relative; color: #1A5EBB; font-weight: 600; }
.tg__reiter .ist-an::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.55em; height: 2px; background: #1A5EBB; }
.tg__karte { flex: none; position: relative; height: 7.5em; margin: .7em .8em .2em; overflow: hidden; background:
    linear-gradient(#E9EDE4, #E9EDE4);
}
.tg__karte::before { content: ""; position: absolute; inset: 0; background:
    repeating-linear-gradient(90deg, transparent 0 3.6em, rgba(255, 255, 255, .75) 3.6em 4.1em),
    repeating-linear-gradient(0deg, transparent 0 2.9em, rgba(255, 255, 255, .75) 2.9em 3.3em);
}
.tg__strasse { position: absolute; background: #fff; }
.tg__strasse--1 { left: -10%; right: -10%; top: 38%; height: .5em; rotate: -6deg; }
.tg__strasse--2 { top: -10%; bottom: -10%; left: 26%; width: .42em; rotate: 4deg; }
.tg__strasse--3 { left: -10%; right: -10%; bottom: 16%; height: .32em; rotate: 3deg; background: #F6E9B8; }
.tg__pin { position: absolute; left: 56%; top: 30%; width: 1.35em; height: 1.35em; background: #C0392B; border: 2px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.tg__pin::after { content: ""; position: absolute; inset: -.55em; border: 2px solid rgba(192, 57, 43, .5); border-radius: 50%; }
.js .tel__seite--google.ist-aktiv .tg__pin::after { animation: pinRing 2.4s var(--kurve) .9s infinite; }
@keyframes pinRing { from { opacity: .9; scale: .5; } to { opacity: 0; scale: 1.5; } }
.tg__pin--neben { background: var(--grau-50); opacity: .55; width: .95em; height: .95em; }
.tg__pin--neben::after { display: none; }
.tg__pin--a { left: 22%; top: 58%; }
.tg__pin--b { left: 76%; top: 66%; }
.tg__treffer { position: relative; padding: .65em .8em; border-top: 1px solid var(--linie); }
.tg__treffer b { display: block; font-size: 1.05em; line-height: 1.2; }
.tg__treffer small { display: block; color: var(--grau-40); font-size: .82em; }
.tg__treffer--eins { padding-top: .8em; border-top: 0; }
.tg__wertung { display: block; font-size: .85em; color: #F4B400; }
.tg__wertung em { font-style: normal; color: var(--schwarz); font-weight: 600; }
.tg__wertung small { display: inline; color: var(--grau-50); }
.tg__offen { color: #1B7F3B !important; }
.tg__bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3em; margin-top: .55em; }
.tg__bilder img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tg__knoepfe { display: flex; gap: .4em; margin-top: .55em; }
.tg__knoepfe span { padding: .35em .8em; border: 1px solid var(--grau-80); border-radius: 999px; font-size: .8em; font-weight: 600; color: #1A5EBB; }
.tg__knoepfe span:first-child { background: #1A5EBB; color: #fff; border-color: #1A5EBB; }
.tg__aehnlich { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: .8em .8em 1.2em; border-top: 1px solid var(--linie); background: var(--weiss); } /* an der Unterkante, wie .tw__leiste — sonst 68 px unter dem Schirm */
.tg__aehnlich small { display: block; margin-bottom: .45em; font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .6em; letter-spacing: .12em; text-transform: uppercase; color: var(--grau-50); }
.tg__aehnlich ul { list-style: none; display: flex; flex-wrap: wrap; gap: .35em; }
.tg__aehnlich li { padding: .3em .7em; border: 1px solid var(--grau-80); border-radius: 999px; font-size: .74em; color: var(--grau-40); }
.tg__platz { position: absolute; right: .8em; top: .8em; padding: .3em .6em; background: var(--schwarz); color: #fff; font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .62em; letter-spacing: .12em; text-transform: uppercase; }
.js .tel__seite .tg__pin { translate: 0 -2em; opacity: 0; transition: translate .6s var(--kurve), opacity .4s var(--kurve); }
.js .tel__seite.ist-aktiv .tg__pin { translate: 0 0; opacity: 1; transition-delay: .5s; }
.js .tel__seite.ist-aktiv .tg__pin--a { transition-delay: .68s; }
.js .tel__seite.ist-aktiv .tg__pin--b { transition-delay: .8s; }
.js .tel__seite .tg__platz { scale: 0; transition: scale .5s var(--kurve); transform-origin: right top; }
.js .tel__seite.ist-aktiv .tg__platz { scale: 1; transition-delay: .9s; }
.js .tel__seite .tg__bilder img { opacity: 0; translate: 0 6px; transition: opacity .5s var(--kurve), translate .5s var(--kurve); }
.js .tel__seite.ist-aktiv .tg__bilder img { opacity: 1; translate: 0 0; }
.js .tel__seite.ist-aktiv .tg__bilder img:nth-child(1) { transition-delay: 1s; }
.js .tel__seite.ist-aktiv .tg__bilder img:nth-child(2) { transition-delay: 1.1s; }
.js .tel__seite.ist-aktiv .tg__bilder img:nth-child(3) { transition-delay: 1.2s; }
/* Die Stellenanzeige: Foto mit Titel, der Lohn als Zahl, vier Fakten, die
   Bewerbung mit einem Fortschritt, der sich auf ein Drittel füllt. */
.tj__held { flex: none; position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .15em; padding: .9em 1em .8em; aspect-ratio: 16 / 9; color: #fff; overflow: hidden; }
.tj__held img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tj__held::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .15) 70%); }
.tj__held > :not(img) { position: relative; z-index: 1; }
.tj__held small { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .62em; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.tj__held b { font-family: var(--schrift-titel); font-stretch: 76%; font-weight: 800; font-size: 1.6em; line-height: .95; letter-spacing: -.02em; }
.tj__held span { font-size: .76em; opacity: .88; }
.tj__lohn { display: grid; gap: .1em; padding: .75em 1em .6em; border-bottom: 1px solid var(--linie); }
.tj__lohn small { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .62em; letter-spacing: .12em; text-transform: uppercase; color: var(--grau-50); }
.tj__lohn b { font-family: var(--schrift-titel); font-stretch: 76%; font-weight: 800; font-size: 2.1em; line-height: 1; letter-spacing: -.03em; }
.tj__lohn span { font-size: .78em; color: var(--grau-40); }
.tj__fakten { list-style: none; padding: .6em 1em .3em; display: grid; gap: .28em; font-size: .84em; }
.tj__fakten li { padding-left: 1.1em; position: relative; }
.tj__fakten li::before { content: ""; position: absolute; left: 0; top: .5em; width: .5em; height: .5em; background: var(--schwarz); }
.tj__wer { margin: auto 0 0; padding: .5em 1em .2em; font-size: .78em; color: var(--grau-40); }
.tj__formular { gap: .6em; padding-bottom: 1.3em; }
.tj__weg { display: grid; gap: .4em; }
.tj__weg i { display: block; height: 3px; background: var(--grau-80); }
.tj__weg i::after { content: ""; display: block; height: 100%; width: 33.3%; background: var(--schwarz); transform-origin: left; }
.js .tel__seite .tj__weg i::after { transform: scaleX(0); transition: transform .9s var(--kurve); }
.js .tel__seite.ist-aktiv .tj__weg i::after { transform: scaleX(1); transition-delay: .7s; }
.tj__hinweis { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--schrift-text) !important; font-size: .76em !important; font-weight: 400 !important; }
/* WhatsApp: Kopf, Tagestrenner, Haken, ein Bild in der Blase und die drei
   Punkte, die tippen — sie kommen und gehen, wie es sich gehört. */
.tc__kopf { display: flex; align-items: center; gap: .6em; padding: 2.7em 1em .7em; background: #075E54; color: #fff; }
.tc__zurueck { flex: none; width: 1.1em; height: 1.1em; }
.tc__anruf { flex: none; width: 1.05em; height: 1.05em; margin-left: auto; }
.tc__kopf i { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #075E54; font-family: var(--schrift-titel); font-stretch: 100%; font-weight: 800; font-size: .78em; font-style: normal; letter-spacing: .02em; }
.tc__kopf b { display: block; line-height: 1.2; }
.tc__kopf small { font-size: .78em; opacity: .85; }
.tc__verlauf { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .45em; padding: .8em .8em 1em; background: #ECE5DD; overflow: hidden; }
.tc__tag { align-self: center; padding: .2em .8em; border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--grau-40); font-size: .72em; }
.tc__verlauf p { position: relative; max-width: 84%; margin: 0; padding: .55em .7em 1.15em; font-size: .88em; line-height: 1.3; background: #fff; }
.tc__verlauf p time { position: absolute; right: .6em; bottom: .3em; display: inline-flex; align-items: center; gap: .25em; font-size: .72em; color: var(--grau-50); }
.tc__verlauf p time svg { width: 1.15em; height: auto; fill: none; stroke: #34B7F1; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tc__aus { align-self: flex-end; background: #DCF8C6 !important; }
.tc__foto { padding-top: .35em; }
.tc__foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 0; margin-bottom: .4em; }
.tc__tippt { display: flex; align-items: center; gap: .28em; padding: .7em .8em; background: #fff; }
.tc__tippt i { width: .38em; height: .38em; border-radius: 50%; background: var(--grau-50); }
.tc__eingabe { display: flex; align-items: center; gap: .6em; padding: .55em .8em 1.2em; background: #F0F0F0; }
.tc__eingabe span { flex: 1; padding: .5em .9em; border-radius: 999px; background: #fff; color: var(--grau-50); font-size: .88em; }
.tc__eingabe i { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #128C7E; }
.tc__eingabe i svg { width: 1.05em; height: 1.05em; fill: #fff; }
.js .tel__seite .tc__verlauf p, .js .tel__seite .tc__tag { opacity: 0; translate: 0 8px; transition: opacity .45s var(--kurve), translate .45s var(--kurve); }
.js .tel__seite.ist-aktiv .tc__verlauf p, .js .tel__seite.ist-aktiv .tc__tag { opacity: 1; translate: 0 0; }
.js .tel__seite.ist-aktiv .tc__tag { transition-delay: .2s; }
.js .tel__seite.ist-aktiv .tc__verlauf p:nth-of-type(1) { transition-delay: .4s; }
.js .tel__seite.ist-aktiv .tc__verlauf p:nth-of-type(2) { transition-delay: .85s; }
.js .tel__seite.ist-aktiv .tc__verlauf p:nth-of-type(3) { transition-delay: 2.1s; }
.js .tel__seite.ist-aktiv .tc__verlauf p:nth-of-type(4) { transition-delay: 2.6s; }
.js .tel__seite .tc__verlauf p time svg { stroke: var(--grau-50); }
.js .tel__seite.ist-aktiv .tc__verlauf p time svg { stroke: #34B7F1; transition: stroke .4s linear 3.1s; }
/* Die drei Punkte tippen zwischen der Antwort und dem Bild und räumen sich
   danach selbst weg — deshalb schrumpft die Höhe mit, sonst bliebe eine Lücke. */
.js .tel__seite .tc__tippt { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; }
.js .tel__seite.ist-aktiv .tc__tippt { animation: tippt 2.1s var(--kurve) 1.15s both; }
.js .tel__seite.ist-aktiv .tc__tippt i { animation: tippPunkt 1.1s ease-in-out infinite; }
.js .tel__seite.ist-aktiv .tc__tippt i:nth-child(2) { animation-delay: .18s; }
.js .tel__seite.ist-aktiv .tc__tippt i:nth-child(3) { animation-delay: .36s; }
@keyframes tippt {
  0% { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; }
  14% { opacity: 1; height: 1.8em; padding-top: .7em; padding-bottom: .7em; }
  76% { opacity: 1; height: 1.8em; padding-top: .7em; padding-bottom: .7em; }
  100% { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; }
}
@keyframes tippPunkt { 0%, 100% { opacity: .35; translate: 0 0; } 50% { opacity: 1; translate: 0 -.22em; } }
/* Die vier Punkte: eine Haarlinie darüber, der aktive in Weiß und mit einem
   Strich am linken Rand, die anderen gedämpft. Die ganze Zeile ist ein Knopf. */
.schau__punkte { list-style: none; border-bottom: 1px solid var(--linie-dunkel); }
.punkt { position: relative; box-sizing: border-box; padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2.5rem); border-top: 1px solid var(--linie-dunkel); color: var(--gedaempft-dunkel); cursor: pointer; transition: color .5s var(--kurve); }
.punkt::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--weiss); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--kurve); }
.punkt.ist-aktiv { color: var(--weiss); }
.punkt.ist-aktiv::after { transform: scaleY(1); }
.punkt__wo { display: block; margin-bottom: .6rem; font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.punkt h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); }
.punkt p { margin-top: .6rem; max-width: 40rem; }
.js .punkt::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--linie-hier); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--kurve); }
.js .punkt.ist-da::before { transform: scaleX(1); }
.js .schau__punkte { border-bottom-color: transparent; }
.js .punkt:last-child.ist-da { border-bottom: 1px solid var(--linie-dunkel); }
@media (min-width: 861px) { .punkt { min-height: 38vh; } }
@media (max-width: 860px) {
  .schau { grid-template-columns: 1fr; gap: 0; }
  /* Das Gerät klebt unter dem Kopf — und rückt auf 0, sobald der Kopf sich
     beim Lesen zurückzieht (`.kopf.ist-versteckt`, Skript), mit derselben
     Dauer und Kurve wie der Kopf, damit zwischen beiden keine Lücke aufgeht.
     Bis zum 2026-09-12 blieb es bei `top: var(--kopf)` stehen und deckte die
     Lücke mit einem schwarzen ::before ab — 76 px totes Schwarz über dem
     Gerät, sobald der Kopf weg war, und davor ein `margin-top` in Kopfhöhe,
     damit jener Deckel nicht den Abschnittskopf schluckte. Beides weg.
     `.js .zeig` setzt auf demselben Element eine Transition für Opazität und
     Versatz; die hier nennt alle drei, sonst überschriebe eine die andere. */
  .schau__geraet, .js .zeig.schau__geraet { position: sticky; top: var(--kopf); z-index: 2; padding: .75rem 0; background: var(--schwarz); display: flex; justify-content: center; transition: top .55s var(--kurve), opacity var(--zeig-dauer) var(--kurve), translate var(--zeig-dauer) var(--kurve); }
  .kopf.ist-versteckt ~ main .schau__geraet { top: 0; }
  .tel { --tel-rand: 6px; width: auto; height: 44svh; aspect-ratio: 9 / 18.5; }
  .punkt { padding-left: 1rem; }
}
@media (max-width: 860px) and (max-height: 640px) { .tel { height: 50svh; } }

/* --- 01 Die sechs Leistungen: drei Spalten, zwei Reihen ---------------------
   `.spalten--3` mit senkrechten Haarlinien; zwischen den Reihen eine
   waagerechte. Nummer, Titel, ein Satz, der Pfeil auf den Anker der
   Leistungsseite. */
.leistungen { border-bottom: 1px solid var(--linie); }
.leistung { position: relative; }
.leistung h3 { font-size: clamp(1.35rem, 1.9vw, 1.75rem); }
.leistung p { flex: 1; }
.leistung .pfeillink { margin-top: .5rem; font-size: .95rem; }
@media (min-width: 901px) {
  .leistungen > :nth-child(n + 4) { border-top: 1px solid var(--linie); }
  .leistungen > :nth-child(3n) { border-right: 0; margin-right: 0; padding-right: 0; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .leistungen > :nth-child(n + 3) { border-top: 1px solid var(--linie); }
}
@media (max-width: 560px) { .leistungen { border-bottom: 0; } }

/* --- 02 Die Anleitung: das große Telefon und die sechs Schritte -------------
   Dieselbe Mechanik wie das Schaufenster (`.schau`), nur größer: die Spalte
   des Geräts ist die Hälfte, das Gerät 76 svh hoch. Rechts sechs Schritte
   als Zeilen mit Nummer, Titel, Tag und den zwei Zeilen „Ihr Teil" / „Unser
   Teil"; links daneben eine senkrechte Haarlinie, die sich bis zum aktiven
   Schritt weiß füllt (--f, vom Skript). Jeder Schritt ist ein Knopf. */
.schau--gross { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 6rem); }
.schau--gross .schau__geraet { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.schau--gross .tel { --tel-rand: 12px; --tel-kante: rgba(255, 255, 255, .55); width: auto; height: min(76svh, 820px); max-width: 100%; aspect-ratio: 9 / 18.5; }
.schau--gross .tel__schirm { font-size: clamp(9px, 4.9cqw, 17px); }
.schau__weiter { display: inline-flex; align-items: center; gap: .6em; padding: .7em 1.1em; background: none; border: 1px solid rgba(255, 255, 255, .45); color: var(--weiss); font-family: var(--schrift-titel); font-weight: 600; font-size: .9rem; cursor: pointer; transition: border-color var(--dauer), background var(--dauer), color var(--dauer); }
.schau__weiter svg { width: 1em; height: 1em; transition: transform .4s var(--kurve); }
.schau__weiter:hover { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); }
.schau__weiter:hover svg { transform: translateX(4px); }
.schritte { position: relative; margin: 0; padding: 0; list-style: none; }
/* Die Linie: grau über die ganze Liste, weiß bis zum aktiven Schritt. */
.js .schritte::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--weiss); transform: scaleY(var(--f, 0)); transform-origin: top; transition: transform .7s var(--kurve); z-index: 1; }
.schritte::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--linie-dunkel); }
/* Wie lang der Abschnitt scrollt, entscheidet allein diese Zeile: Das Gerät
   klebt genau so lange, wie die Liste höher ist als es selbst — und das
   Skript verteilt jene Strecke gleichmäßig auf die fünf Schritte. Bis zum
   2026-09-10 stand hier `min-height: 0`; die Liste war dann 1040 px hoch, das
   Gerät 749 — 291 px Weg für fünf Schritte, also 58 px je Schritt. Eine
   einzige Radumdrehung sprang damit von Schritt 1 auf Schritt 5. Mit
   min-height sind es rund 300 px je Schritt, und die Schritte kommen der
   Reihe nach. Wer die Zahl ändert, ändert das Tempo des ganzen Abschnitts. */
.schritte .punkt { padding-left: 0; min-height: 0; display: flex; align-items: center; }
@media (min-width: 861px) { .schritte .punkt { min-height: 52vh; } }
/* Auf dem Telefon ist ein Schritt so hoch wie das Lesefeld unter dem Gerät:
   100 svh minus Gerät (48 svh + 1,5 rem Rand) minus Dock (rund 3,5 rem). So
   steht in Ruhe genau ein Schritt unter dem Telefon, mittig, und der nächste
   kommt erst beim Weiterscrollen. Auf kurzen Bildschirmen wird das Gerät
   kleiner, damit das Feld nicht unter den Text rutscht. Bis zum 2026-09-12
   waren es 34 svh — die Schritte waren höher als das Feld, und wer las, sah
   den Schwanz des einen und den Kopf des nächsten. */
@media (max-width: 860px) { .schritte .punkt { min-height: calc(52svh - 5rem); } }
.schritte .punkt::after { display: none; }
.schritt__knopf { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .5rem clamp(1rem, 2vw, 1.75rem); width: 100%; padding: 0 0 0 clamp(1.25rem, 2.5vw, 2.5rem); background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.schritt__knopf:focus-visible { outline: 2px solid var(--weiss); outline-offset: 6px; }
.schritt__nr { grid-row: 1 / 3; font-family: var(--schrift-titel); font-stretch: 76%; font-weight: 800; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; letter-spacing: -.03em; color: var(--gedaempft-dunkel); transition: color .5s var(--kurve); font-variant-numeric: tabular-nums; }
.punkt.ist-aktiv .schritt__nr { color: var(--weiss); }
.schritt__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.schritt__titel { font-family: var(--schrift-titel); font-stretch: 80%; font-weight: 800; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -.025em; line-height: 1.05; transition: transform .5s var(--kurve); }
.punkt:hover .schritt__titel { transform: translateX(6px); }
.schritt__tag { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; white-space: nowrap; }
.schritt__text, .schritt__zeilen { display: block; font-size: .98rem; line-height: 1.55; max-width: 34rem; }
.schritt__zeilen span { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; }
.schritt__zeilen b { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding-top: .3em; opacity: .75; }
.punkt.ist-aktiv .schritt__zeilen b { opacity: 1; }
/* Steht neben dem Raster (siehe Kommentar im HTML), nicht darin. */
.schau__summe { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: 1.75rem; border-top: 1px solid var(--linie-dunkel); color: var(--hell-dunkel); }
.schau__summe p { margin: 0; font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.schau__summe b { color: var(--weiss); }
/* Der Anruf: Kürzel im Kreis mit pulsendem Ring, Name, laufende Zeit, ein
   Ausschlag, der mitspricht, die drei Themen des Erstgesprächs, die sich der
   Reihe nach abhaken, sechs Knöpfe und auflegen. Die drei Themen sind
   dieselben drei, die im Schritt daneben unter „Ihr Teil“ stehen. */
.tel__seite--anruf { background: #0F1214; color: #fff; align-items: center; padding: 3.1em 1em 1.4em; text-align: center; }
.ta__oben { display: grid; justify-items: center; }
.ta__oben small { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .62em; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.ta__bild { position: relative; display: grid; place-items: center; width: 4em; height: 4em; margin: .8em 0 .7em; border-radius: 50%; background: #fff; color: #0F1214; }
.ta__bild b { font-family: var(--schrift-titel); font-stretch: 100%; font-weight: 800; font-size: 1.25em; letter-spacing: .02em; }
.ta__bild::after { content: ""; position: absolute; inset: -.35em; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; }
.js .tel__seite--anruf.ist-aktiv .ta__bild::after { animation: anrufRing 2.6s var(--kurve) infinite; }
@keyframes anrufRing { from { opacity: .8; scale: .92; } to { opacity: 0; scale: 1.45; } }
.ta__oben b { display: block; font-family: var(--schrift-titel); font-stretch: 78%; font-weight: 800; font-size: 1.85em; line-height: 1; letter-spacing: -.02em; }
.ta__ort { margin-top: .3em; font-size: .78em; opacity: .55; }
.ta__zeit { display: block; margin-top: .5em; font-size: 1em; font-variant-numeric: tabular-nums; opacity: .8; }
.ta__wellen { display: flex; align-items: center; justify-content: center; gap: .26em; height: 2.6em; margin: auto 0; }
.ta__wellen i { width: .26em; height: 1em; background: #fff; border-radius: .13em; opacity: .8; }
.js .tel__seite--anruf.ist-aktiv .ta__wellen i { animation: welle 1.1s ease-in-out infinite alternate; }
/* Negative Verzögerungen über die volle Periode (2 × 1,1 s, weil `alternate`):
   so steht schon im ersten Bild ein Ausschlag da und nicht dreizehn gleich
   lange Striche.

   Der lange Vorsatz ist Pflicht, kein Stil: Die Regel darüber setzt die
   Kurzform `animation`, und die enthält `animation-delay: 0s`. Ein knappes
   `.ta__wellen i:nth-child(2)` ist schwächer und wurde davon überschrieben —
   deshalb standen die Balken bis zum 2026-09-10 alle im Gleichschritt und die
   Welle sah aus wie eine Reihe gleich langer Striche. */
.js .tel__seite--anruf.ist-aktiv .ta__wellen i:nth-child(2) { animation-delay: -0.17s; }
.js .tel__seite--anruf.ist-aktiv .ta__wellen i:nth-child(3) { animation-delay: -0.34s; }
.js .tel__seite--anruf.ist-aktiv .ta__wellen i:nth-child(4) { animation-delay: -0.51s; }
.js .tel__seite--anruf.ist-aktiv .ta__wellen i:nth-child(5) { animation-delay: -0.68s; }
.js .tel__seite--anruf.ist-aktiv .ta__wellen i:nth-child(6) { animation-delay: -0.85s; }
.js .tel__seite--anruf.ist-aktiv .ta__wellen i:nth-child(7) { animation-delay: -1.02s; }
.js .tel__seite--anruf.ist-aktiv .ta__wellen i:nth-child(8) { animation-delay: -1.19s; }
.js .tel__seite--anruf.ist-aktiv .ta__wellen i:nth-child(9) { animation-delay: -1.36s; }
.js .tel__seite--anruf.ist-aktiv .ta__wellen i:nth-child(10) { animation-delay: -1.53s; }
.js .tel__seite--anruf.ist-aktiv .ta__wellen i:nth-child(11) { animation-delay: -1.70s; }
.js .tel__seite--anruf.ist-aktiv .ta__wellen i:nth-child(12) { animation-delay: -1.87s; }
.js .tel__seite--anruf.ist-aktiv .ta__wellen i:nth-child(13) { animation-delay: -2.04s; }
@keyframes welle { from { height: .5em; } to { height: 2.4em; } }
.ta__themen { width: 100%; margin-bottom: 1.1em; padding: .7em .85em .75em; text-align: left; background: rgba(255, 255, 255, .07); }
.ta__themen small { display: block; margin-bottom: .45em; font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .6em; letter-spacing: .12em; text-transform: uppercase; opacity: .5; }
.ta__themen ul { list-style: none; display: grid; gap: .3em; font-size: .82em; }
.ta__themen li { display: flex; align-items: center; gap: .5em; opacity: .45; transition: opacity .5s var(--kurve); }
.ta__themen svg { flex: none; width: .95em; height: .95em; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18; stroke-dashoffset: 18; }
.js .tel__seite--anruf.ist-aktiv .ta__themen li { animation: themaAn .6s var(--kurve) both; }
.js .tel__seite--anruf.ist-aktiv .ta__themen svg { animation: themaHaken .5s var(--kurve) both; }
.js .tel__seite--anruf.ist-aktiv .ta__themen li:nth-child(1), .js .tel__seite--anruf.ist-aktiv .ta__themen li:nth-child(1) svg { animation-delay: .9s; }
.js .tel__seite--anruf.ist-aktiv .ta__themen li:nth-child(2), .js .tel__seite--anruf.ist-aktiv .ta__themen li:nth-child(2) svg { animation-delay: 1.6s; }
.js .tel__seite--anruf.ist-aktiv .ta__themen li:nth-child(3), .js .tel__seite--anruf.ist-aktiv .ta__themen li:nth-child(3) svg { animation-delay: 2.3s; }
@keyframes themaAn { to { opacity: 1; } }
@keyframes themaHaken { to { stroke-dashoffset: 0; } }
.ta__knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55em; width: 100%; font-size: .66em; opacity: .85; }
.ta__knoepfe span { display: grid; justify-items: center; gap: .45em; }
.ta__knoepfe i { display: grid; place-items: center; width: 3.1em; height: 3.1em; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.ta__knoepfe i svg { width: 1.5em; height: 1.5em; fill: currentColor; }
.ta__knoepfe .ist-an i { background: #fff; color: #0F1214; }
.ta__aus { display: grid; justify-items: center; gap: .5em; margin-top: 1.1em; }
.ta__aus i { display: grid; place-items: center; width: 3.8em; height: 3.8em; border-radius: 50%; background: #E0443E; }
.ta__aus i svg { width: 1.5em; height: 1.5em; rotate: 135deg; }
.ta__aus small { font-size: .66em; opacity: .55; }
/* Auf dem Telefon: das Gerät klebt oben, die Schritte laufen darunter durch;
   „Weiter" fällt weg, weil der Scroll ohnehin schaltet. Höhe des Geräts und
   des Lesefelds darunter gehören zusammen — siehe `.schritte .punkt` oben. */
@media (max-width: 860px) {
  .schau--gross { grid-template-columns: 1fr; gap: 0; }
  .schau--gross .schau__geraet { gap: 0; }
  .schau--gross .tel { --tel-rand: 6px; height: 48svh; }
  .schau__weiter { display: none; }
  .schritte { margin-top: 1rem; }
  .schritt__knopf { grid-template-columns: 2.25rem minmax(0, 1fr); padding-left: 1rem; }
  .schritt__zeilen span { grid-template-columns: 1fr; gap: .1rem; }
  .schau__summe { flex-direction: column; align-items: flex-start; }
}
/* Kurze Bildschirme (alte iPhones, Querformat): Gerät kleiner, Lesefeld
   entsprechend höher. Steht nach dem Block darüber, weil dieselbe Spezifität
   sonst die 48 svh gewinnen lässt. */
@media (max-width: 860px) and (max-height: 720px) { .schau--gross .tel { height: 42svh; } .schritte .punkt { min-height: calc(58svh - 5rem); } }

/* --- 03 Die Designideen: vier Vorschauen im 2 × 2-Raster ----------------------
   Je eine Browser-Attrappe (`.mock__leiste` mit der Adresse) mit dem
   Desktop-Screenshot; unten rechts überlappt der Telefon-Screenshot (28 %).
   Beim Zeigen scrollt der Desktop-Screenshot langsam im Rahmen nach unten —
   das sagt „echte Seite" ohne Worte. Haarlinien zwischen den vier, keine
   Karten. Die Screenshots sind 1440 × 900 und 390 × 844 (Phase 2 tauscht
   nur die Dateien). */
.ideen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.idee { display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 3rem) clamp(1.75rem, 3vw, 2.75rem) 0; border-right: 1px solid var(--linie); }
.idee:nth-child(2n) { border-right: 0; padding-right: 0; padding-left: clamp(1.5rem, 3vw, 3rem); }
.idee:nth-child(n + 3) { border-top: 1px solid var(--linie); }
.idee__schau { position: relative; display: block; margin-bottom: clamp(2.75rem, 5vw, 4rem); text-decoration: none; color: inherit; }
.idee__desktop { display: block; }
.idee__fenster { display: block; overflow: hidden; aspect-ratio: 16 / 8.5; background: var(--grau-95); }
.idee__fenster img { display: block; width: 100%; height: auto; transition: translate 6s linear, filter 1.6s var(--kurve) .45s; }
.idee__schau:hover .idee__fenster img, .idee__schau:focus-visible .idee__fenster img { translate: 0 -15%; }
.idee__mobil { position: absolute; right: clamp(.75rem, 2vw, 1.5rem); bottom: calc(-1 * clamp(1.75rem, 3.5vw, 3rem)); width: 28%; max-width: 150px; display: block; background: var(--weiss); border: 1px solid var(--grau-80); padding: 4px; transition: translate .6s var(--kurve); }
.idee__mobil img { display: block; width: 100%; height: auto; }
.idee__schau:hover .idee__mobil { translate: 0 -6px; }
.idee__name { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.idee__wo { margin: .35rem 0 0; font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grau-50); }
.idee__satz { margin-top: .9rem; color: var(--grau-40); max-width: 34rem; }
.idee__link { margin-top: 1.25rem; align-self: flex-start; }
.js .zeig--staffel.ist-da .teil.idee__schau { animation-name: teil-rein; }
@media (max-width: 760px) {
  .ideen { grid-template-columns: 1fr; }
  .idee, .idee:nth-child(2n) { border-right: 0; padding-inline: 0; }
  .idee:nth-child(n + 2) { border-top: 1px solid var(--linie); }
}

/* --- Referenzseite: Vorher/Nachher als Schieber, Browser-Attrappen ------------ */
.referenzen-liste { display: grid; gap: 0; border-bottom: 1px solid var(--linie); }
.referenz--gross { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--linie); }
.referenz__buehne { display: grid; gap: 1rem; align-content: start; }
.referenz__buehne .mock[hidden] { display: none; }
.referenz__buehne-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.referenz__ort { margin: 0; font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grau-50); }
.referenz__text { display: flex; flex-direction: column; gap: 1rem; }
.referenz__text h3 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.referenz__text > p { color: var(--grau-40); }
.referenz__zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.zahl { display: flex; flex-direction: column; gap: .2rem; }
.zahl b { font-family: var(--schrift-titel); font-stretch: 78%; font-weight: 800; font-size: 2.4rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.zahl span { font-size: .88rem; color: var(--grau-40); line-height: 1.35; }
.referenz__zitat { margin: .5rem 0 0; padding-left: 1rem; border-left: 2px solid var(--schwarz); color: var(--grau-40); font-size: 1rem; }
.referenz__zitat footer { margin-top: .35rem; font-size: .84rem; font-weight: 600; color: var(--schwarz); }
.referenz__foto { aspect-ratio: 16 / 9; overflow: hidden; }
.referenz__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .referenz--gross { grid-template-columns: 1fr; } }

/* Browser-Attrappe: skaliert mit ihrer Breite (Container-Einheiten). Sie zeigt
   die Website eines Betriebs — deshalb darf sie Farbe tragen: Es ist seine. */
.mock {
  container-type: inline-size;
  --m-akzent: #0B0B0C; --m-dunkel: #1E2A38; --m-text: #1a1a1a;
  background: var(--weiss); overflow: hidden; border: 1px solid var(--grau-80);
  font-family: var(--schrift-titel); color: var(--m-text);
}
.mock__innen { font-size: 2.55cqw; line-height: 1.25; }
.mock__leiste { display: flex; align-items: center; gap: .3em; padding: .45em .6em; background: #EDEDED; border-bottom: 1px solid #D6D6D6; }
.mock__leiste i { width: .55em; height: .55em; border-radius: 50%; background: #B5B5B5; }
.mock__url { flex: 1; margin-left: .4em; height: 1.05em; border-radius: .5em; background: #fff; font-size: .75em; line-height: 1.4em; padding: 0 .7em; color: #777; overflow: hidden; white-space: nowrap; }
.mock__nav { display: flex; align-items: center; justify-content: space-between; padding: .5em .8em; font-size: .85em; }
.mock__nav b { font-weight: 800; }
.mock__nav b i { display: inline-block; width: .7em; height: .7em; background: var(--m-akzent); margin-right: .3em; vertical-align: -.05em; }
.mock__nav span { display: flex; gap: .7em; color: #555; font-weight: 500; }
.mock__nav em { font-style: normal; background: var(--m-akzent); color: #111; padding: .15em .5em; font-weight: 700; }
.mock__held { position: relative; aspect-ratio: 16 / 7.5; background-size: cover; background-position: center; padding: .8em; display: flex; flex-direction: column; justify-content: flex-end; gap: .35em; color: #fff; }
.mock__held::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.05) 70%); }
.mock__held > * { position: relative; }
.mock__held b { font-size: 1.25em; font-weight: 800; font-stretch: 90%; line-height: 1.05; max-width: 80%; }
.mock__held small { font-size: .72em; opacity: .9; }
.mock__held em { font-style: normal; font-size: .72em; background: var(--m-akzent); color: #111; padding: .25em .6em; font-weight: 700; width: max-content; }
.mock__karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; padding: .7em .8em .8em; }
.mock__karten span { display: block; border: 1px solid #DDD; padding: .5em .5em; font-size: .72em; font-weight: 600; color: #333; }
.mock__karten span::before { content: ""; display: block; width: 1.2em; height: 1.2em; background: var(--m-akzent); margin-bottom: .35em; }
.mock--rot { --m-akzent: #D64545; --m-akzent-text: #fff; }
.mock--blau { --m-akzent: #2F6FD6; --m-akzent-text: #fff; }
.mock--gruen { --m-akzent: #2E8B4F; --m-akzent-text: #fff; }
.mock--moos { --m-akzent: #5F8F2E; --m-akzent-text: #fff; }
.mock--gelb { --m-akzent: #F2C230; }
.mock--holz { --m-akzent: #B5702F; --m-akzent-text: #fff; }
.mock__nav em, .mock__held em { color: var(--m-akzent-text, #111); }
.mock--dach .mock__held, .mock--dach .mock__alt-bild { background-image: url("/assets/img/ref-dachdecker.webp"); }
.mock--elektro .mock__held, .mock--elektro .mock__alt-bild { background-image: url("/assets/img/ref-elektro.webp"); }
.mock--shk .mock__held, .mock--shk .mock__alt-bild { background-image: url("/assets/img/ref-shk.webp"); }
.mock--maler .mock__held, .mock--maler .mock__alt-bild { background-image: url("/assets/img/ref-maler.webp"); }
.mock--tischler .mock__held, .mock--tischler .mock__alt-bild { background-image: url("/assets/img/ref-tischler.webp"); }
.mock--galabau .mock__held, .mock--galabau .mock__alt-bild { background-image: url("/assets/img/ref-galabau.webp"); }

/* „Vorher": die Seite von 2011. Bewusst hässlich und bewusst vertraut. */
.mock--vorher { --m-akzent: #0000EE; font-family: "Times New Roman", Times, serif; background: #D4D0C8; }
.mock--vorher .mock__leiste { background: #C0C0C0; }
.mock--vorher .mock__innen { padding: .5em; }
.mock--vorher .mock__alt { background: #FFFFFF; border: .1em inset #999; padding: .5em; }
.mock--vorher .mock__alt-kopf { background: #000080; color: #FFFF00; font-weight: 700; padding: .3em .5em; font-size: .95em; text-align: center; margin-bottom: .4em; font-family: Arial, sans-serif; }
.mock--vorher .mock__alt-nav { display: flex; gap: .6em; font-size: .75em; color: #0000EE; text-decoration: underline; margin-bottom: .4em; flex-wrap: wrap; }
.mock--vorher .mock__alt-koerper { display: grid; grid-template-columns: 1fr 1.4fr; gap: .5em; align-items: start; }
.mock--vorher .mock__alt-bild { aspect-ratio: 4 / 3; background-size: cover; background-position: center; filter: saturate(.55) contrast(1.15); image-rendering: pixelated; border: .1em solid #808080; }
.mock--vorher .mock__alt-text { font-size: .72em; line-height: 1.3; }
.mock--vorher .mock__alt-text b { color: #FF0000; font-family: Arial, sans-serif; display: block; margin-bottom: .3em; font-size: 1.05em; }
.mock--vorher .mock__alt-fuss { margin-top: .5em; padding-top: .3em; border-top: .1em solid #999; font-size: .62em; color: #555; display: flex; justify-content: space-between; gap: .5em; flex-wrap: wrap; font-family: Arial, sans-serif; }
.mock--vorher .mock__alt-fuss span { background: #000; color: #0F0; font-family: monospace; padding: 0 .3em; }

/* Vorher/Nachher als Schieber: beide Attrappen liegen übereinander; die alte
   Seite ist bis --x sichtbar. Der Regler ist ein echter <input type=range>,
   unsichtbar über der ganzen Bühne: ziehen mit der Maus, wischen mit dem
   Daumen, Pfeiltasten mit der Tastatur. */
/* --stand ist registriert, damit es sich animieren lässt: Beim Erscheinen wackelt
   der Schieber einmal (42 → 58 → 42 %) und verrät, dass man ihn ziehen kann.
   Sobald jemand anfasst, nimmt das Skript die Animation weg (ist-beruehrt). */
/* `inherits: true` ist hier Pflicht, keine Feinheit: gesetzt wird --stand auf
   der Bühne, gebraucht wird es auf ihren Kindern (Clip der alten Seite, Ort
   des Griffs). Mit `false` bekamen die beiden statt des gesetzten Werts den
   initial-value — der Schieber ließ sich ziehen, die Zahl änderte sich, das
   Bild stand still, und auch das Wackeln beim Erscheinen war unsichtbar. */
@property --stand { syntax: "<percentage>"; inherits: true; initial-value: 42%; }
.vergleich-buehne { position: relative; --stand: 42%; aspect-ratio: 16 / 11; overflow: hidden; border: 1px solid var(--grau-80); background: var(--grau-95); }
.js .zeig.ist-da .vergleich-buehne:not(.ist-beruehrt) { animation: wackeln 1.8s var(--kurve) .7s 1 backwards; }
@keyframes wackeln { 0% { --stand: 42%; } 45% { --stand: 58%; } 100% { --stand: 42%; } }
.vergleich-buehne .mock { position: absolute; inset: 0; height: 100%; border: 0; display: flex; flex-direction: column; }
.vergleich-buehne .mock__innen { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.vergleich-buehne .mock__held { flex: 1; aspect-ratio: auto; }
.vergleich-buehne .mock--vorher .mock__alt { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.vergleich-buehne .mock--vorher .mock__alt-koerper { flex: 1; min-height: 0; align-items: stretch; }
.vergleich-buehne .mock--vorher .mock__alt-bild { aspect-ratio: auto; height: 100%; }
.vergleich-buehne__vorher { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 calc(100% - var(--stand)) 0 0); }
.vergleich-buehne.gleitet .vergleich-buehne__vorher { transition: clip-path .7s var(--kurve); }
.vergleich-buehne.gleitet .vergleich-buehne__griff { transition: left .7s var(--kurve); }
.vergleich-buehne__griff { position: absolute; top: 0; bottom: 0; left: var(--stand); z-index: 3; width: 0; pointer-events: none; }
.vergleich-buehne__griff::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.vergleich-buehne__griff i {
  position: absolute; top: 50%; left: 0; width: 44px; height: 44px; translate: -50% -50%;
  border-radius: 50%; background: var(--weiss); border: 1px solid var(--schwarz);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E");
  background-size: 22px; background-position: center; background-repeat: no-repeat;
  transition: scale .3s var(--kurve);
}
.vergleich-buehne:hover .vergleich-buehne__griff i, .vergleich-buehne:has(:focus-visible) .vergleich-buehne__griff i { scale: 1.1; }
.vergleich-buehne__griff span { position: absolute; top: .6em; font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; padding: .3em .6em; background: var(--schwarz); color: var(--weiss); white-space: nowrap; }
.vergleich-buehne__griff span:first-child { right: .6em; }
.vergleich-buehne__griff span:last-of-type { left: .6em; background: var(--weiss); color: var(--schwarz); }
.vergleich-buehne__regler { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.vergleich-buehne:has(.vergleich-buehne__regler:focus-visible) { outline: 2px solid var(--schwarz); outline-offset: 3px; }

/* Umschalter und Filter: Text mit Unterstrich, kein Chip. */
.umschalter { display: inline-flex; gap: 1.25rem; }
.umschalter button, .filter button {
  padding: .35em 0; background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; cursor: pointer;
  font-family: var(--schrift-titel); font-weight: 600; font-size: .9rem; color: var(--grau-50);
  transition: color var(--dauer), border-color var(--dauer);
}
.umschalter button:hover, .filter button:hover { color: var(--schwarz); }
.umschalter button[aria-pressed="true"], .filter button[aria-pressed="true"] { color: var(--schwarz); border-bottom-color: var(--schwarz); }
.filter { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.filter button { font-size: 1rem; }
.js .referenz.taucht-auf { animation: auftauchen .7s var(--kurve) both; }
@keyframes auftauchen { from { opacity: 0; translate: 0 14px; } }

/* --- Preise: Spalten, durch Linien getrennt — zwei Website-Pakete, drei Betreuungen */
.pakete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie); }
.pakete--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.paket { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 2rem clamp(1.25rem, 2.5vw, 2.5rem) 2.25rem 0; margin-right: clamp(1.25rem, 2.5vw, 2.5rem); border-right: 1px solid var(--linie); }
.paket:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.paket--beliebt::before { content: ""; position: absolute; left: 0; right: clamp(1.25rem, 2.5vw, 2.5rem); top: -1px; height: 3px; background: var(--schwarz); }
/* Der Stempel steht über genau einem der Pakete. Stünde er im Fluss,
   begänne diese eine Spalte um seine Zeile tiefer als die beiden anderen —
   Preis, Satz und Haken lägen quer zur Reihe. Also steht er außerhalb des
   Flusses, und alle Spalten halten seinen Platz oben frei. */
.pakete:has(.paket__stempel) .paket { padding-top: calc(2rem + 1.3rem); }
/* Die letzte Spalte hat keinen rechten Innenabstand — die Kante läuft bis an den Rand. */
:is(.paket--beliebt, .paket--vorschlag):last-child::before { right: 0; }
.paket__stempel { position: absolute; left: 0; top: 1.75rem; margin: 0; font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grau-50); }
.paket__name { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grau-50); }
.paket__preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; font-family: var(--schrift-titel); font-stretch: 76%; font-weight: 800; font-size: clamp(2.6rem, 3.8vw, 3.6rem); line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.paket__preis small { font-family: var(--schrift-text); font-stretch: 100%; font-weight: 500; font-size: .95rem; letter-spacing: 0; color: var(--grau-50); }
/* Zahlweise: Einmalig oder in drei Raten. Der Umschalter tauscht die Zahl
   im Preis wie das rollende Wort im Held — die alte fährt oben hinaus, die
   neue kommt von unten. */
.zahlweise { display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.zahlweise > span { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grau-50); }
.paket__preis { overflow: hidden; padding: .08em 0; margin: -.08em 0; }
.paket__preis > * { transition: translate .5s var(--kurve), opacity .35s var(--kurve); }
.paket__preis.wechselt > * { translate: 0 -110%; opacity: 0; }
.paket__preis.kommt > * { translate: 0 110%; opacity: 0; transition: none; }
/* Der Paketfinder: drei Fragen als Umschalter, darunter die Antwort. Das
   empfohlene Paket bekommt die schwarze Kante und den Vermerk. */
.finder { margin-bottom: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--linie); }
.finder__fragen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 3vw, 3rem); }
.finder__frage { display: flex; flex-direction: column; gap: .5rem; }
.finder__frage > span { font-family: var(--schrift-titel); font-stretch: 88%; font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.finder__frage .umschalter { flex-wrap: wrap; gap: .25rem .6rem; }
.finder__frage .umschalter button { font-size: 1rem; padding: .45em .7em; border-bottom-color: var(--grau-80); } /* „Ja" war 18 px breit und sah aus wie Fließtext */
.finder__frage .umschalter button[aria-pressed="true"] { border-bottom-color: var(--schwarz); }
.finder__antwort { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); color: var(--grau-40); font-size: 1rem; min-height: 2.6em; }
.finder__antwort b { display: block; font-family: var(--schrift-titel); font-stretch: 80%; font-weight: 800; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -.025em; line-height: 1.1; color: var(--schwarz); margin-bottom: .25rem; }
.js .finder__antwort > span { display: block; animation: auftauchen .6s var(--kurve) both; }
.paket__vorschlag { display: none; position: absolute; left: 0; top: 0; translate: 0 -50%; padding: .3em .7em; background: var(--schwarz); color: var(--weiss); font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.paket--vorschlag .paket__vorschlag { display: block; animation: auftauchen .6s var(--kurve) both; }
.paket--vorschlag::before { content: ""; position: absolute; left: 0; right: clamp(1.25rem, 2.5vw, 2.5rem); top: -1px; height: 3px; background: var(--schwarz); }
.pakete.hat-vorschlag .paket:not(.paket--vorschlag) { opacity: .55; }
.pakete .paket { transition: opacity .5s var(--kurve); }
@media (max-width: 900px) { .finder__fragen { grid-template-columns: 1fr; } }
.paket__fuer { color: var(--grau-40); font-size: .98rem; min-height: 3.1em; }
.paket .haken { margin-block: .5rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.paket .haken li { font-size: .95rem; }
.paket .knopf { margin-top: auto; }
.preishinweis { margin-top: 1.5rem; color: var(--grau-50); font-size: .9rem; }
.betreuung { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 2rem; align-items: center; padding-block: 1.75rem; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.betreuung p { color: var(--grau-40); }
.betreuung p + p { margin-top: .5rem; }
.betreuung h3 + p { margin-top: .6rem; }
.abschnitt--grau :is(.pakete, .paket, .betreuung, .paket .haken) { border-color: var(--grau-80); }
@media (max-width: 980px) {
  .pakete { grid-template-columns: 1fr; border-top: 0; }
  .paket { border-right: 0; margin-right: 0; padding-right: 0; border-top: 1px solid var(--linie); }
  .paket--beliebt::before, .paket--vorschlag::before { right: 0; }
}
@media (max-width: 700px) { .betreuung { grid-template-columns: 1fr; } }

/* Vergleichstabelle: Haarlinien, sonst nichts. */
.tabelle-huelle { overflow-x: auto; }
.vergleich { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
.vergleich th, .vergleich td { padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.vergleich thead th { font-family: var(--schrift-titel); font-stretch: 84%; font-weight: 800; font-size: 1.15rem; border-bottom: 1px solid var(--schwarz); padding-bottom: 1rem; }
.vergleich thead th:not(:first-child), .vergleich td:not(:first-child) { text-align: center; width: 19%; padding-inline: 1rem; }
.vergleich tbody th { font-weight: 500; }
.vergleich thead th small { display: block; margin-top: .3rem; font-family: var(--schrift-text); font-stretch: 100%; font-weight: 500; font-size: .85rem; color: var(--grau-50); }
.vergleich--zwei thead th:not(:first-child), .vergleich--zwei td:not(:first-child) { width: 26%; }
.vergleich .ja { display: inline-block; width: 1.1rem; height: 1.1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); background-size: 100%; background-repeat: no-repeat; vertical-align: middle; }
.vergleich .ja svg { display: none; }
.vergleich .nein { color: var(--grau-60); }
.vergleich .gruppe td { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grau-50); padding-top: 1.75rem; padding-bottom: .5rem; border-bottom-color: var(--schwarz); }

/* --- Kundenstimmen: drei Spalten, große Anführung ----------------------------- */
.stimmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie-dunkel); }
.stimme { display: flex; flex-direction: column; gap: 1.5rem; padding: 2rem clamp(1.25rem, 2.5vw, 2.5rem) 2rem 0; margin-right: clamp(1.25rem, 2.5vw, 2.5rem); border-right: 1px solid var(--linie-dunkel); }
.stimme:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.stimme blockquote { margin: 0; font-family: var(--schrift-titel); font-stretch: 90%; font-weight: 500; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.35; letter-spacing: -.01em; text-wrap: pretty; }
.stimme blockquote p::before { content: "„"; }
.stimme blockquote p::after { content: "“"; }
.stimme__wer { display: flex; align-items: center; gap: .9rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--linie-dunkel); }
.stimme__wer img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.stimme__wer b { display: block; font-family: var(--schrift-titel); font-weight: 600; }
.stimme__wer span { font-size: .86rem; color: var(--hell-dunkel); }
@media (max-width: 900px) {
  .stimmen { grid-template-columns: 1fr; }
  .stimme { border-right: 0; margin-right: 0; padding-right: 0; border-bottom: 1px solid var(--linie-dunkel); }
  .stimme:last-child { border-bottom: 0; }
}

/* --- Zweispalter (Text + Bild) ---------------------------------------------- */
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.zwei--umgekehrt > :first-child { order: 2; }
.zwei__bild { position: relative; overflow: hidden; }
.zwei__bild img { width: 100%; height: auto; object-fit: cover; }
.zwei__text .kicker { margin-bottom: 1rem; }
.zwei__text .lead { margin-top: 1.25rem; }
.zwei__text .haken { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); }
.abschnitt--dunkel .zwei__text .haken { border-top-color: var(--linie-dunkel); }
.zwei__text .knopfreihe, .zwei__text .pfeillink { margin-top: 1.75rem; }
@media (max-width: 860px) {
  .zwei { grid-template-columns: 1fr; }
  .zwei--umgekehrt > :first-child { order: 0; }
}

/* Parallaxe: das Bild läuft langsamer als die Seite. Mit Scroll-Timeline im
   Browser, sonst setzt das Skript --p (−1 … 1) beim Scrollen. */
.parallax { overflow: hidden; }
.parallax > img { scale: 1.14; }
@supports (animation-timeline: view()) {
  .js .parallax > img { animation: parallaxe linear both; animation-timeline: view(); }
  @keyframes parallaxe { from { transform: translate3d(0, -6%, 0); } to { transform: translate3d(0, 6%, 0); } }
}
@supports not (animation-timeline: view()) {
  .js .parallax > img { transform: translate3d(0, calc(var(--p, 0) * 6%), 0); }
}

/* --- FAQ: Zeilen mit Plus ---------------------------------------------------- */
.faq { border-bottom: 1px solid var(--linie); }
.abschnitt--grau .faq { border-bottom-color: var(--grau-80); }
.faq details { border-top: 1px solid var(--linie); }
.abschnitt--grau .faq details { border-top-color: var(--grau-80); }
.faq summary {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-family: var(--schrift-titel); font-stretch: 88%; font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.015em;
  transition: color var(--dauer);
}
.faq summary:hover { color: var(--grau-40); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 1.1rem; height: 1.1rem;
  background:
    linear-gradient(var(--schwarz), var(--schwarz)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--schwarz), var(--schwarz)) center / 1.5px 100% no-repeat;
  transition: transform .5s var(--kurve);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details > div { padding: 0 0 1.5rem; color: var(--grau-40); max-width: 64ch; }
.faq details > div p + p { margin-top: .6em; }
/* Auf- und Zuklappen als Höhe (0fr → 1fr); das Skript schaltet .ist-offen und
   wartet mit dem Schließen, bis die Höhe weg ist. Ohne Skript klappt es hart. */
.js .faq details > div { display: grid; grid-template-rows: 0fr; padding-bottom: 0; transition: grid-template-rows .55s var(--kurve), padding-bottom .55s var(--kurve); }
.js .faq details.ist-offen > div { grid-template-rows: 1fr; padding-bottom: 1.5rem; }
.js .faq .faq__innen { min-height: 0; overflow: hidden; opacity: 0; translate: 0 -6px; transition: opacity .4s var(--kurve), translate .4s var(--kurve); }
.js .faq details.ist-offen .faq__innen { opacity: 1; translate: 0 0; transition-delay: .15s; }

/* --- Kontakt: Wege links als Zeilen, Formular rechts mit Linien statt Feldern --- */
.kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
@media (max-width: 860px) { .kontakt { grid-template-columns: minmax(0, 1fr); } }
.kontakt__wege { list-style: none; margin-top: 2rem; border-bottom: 1px solid var(--linie); }
.weg { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .25rem 1.5rem; padding: 1.35rem 0; border-top: 1px solid var(--linie); }
.weg b { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grau-50); padding-top: .55rem; }
.weg div { display: flex; flex-direction: column; gap: .25rem; }
.weg a { font-family: var(--schrift-titel); font-stretch: 80%; font-weight: 800; font-size: clamp(1.5rem, 2.2vw, 2.1rem); letter-spacing: -.025em; text-decoration: none; line-height: 1.1; width: max-content; max-width: 100%; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%; padding-bottom: .1em; transition: background-size .4s var(--kurve); }
.weg a:hover { background-size: 100% 2px; }
.weg span, .weg small { display: block; color: var(--grau-40); font-size: .92rem; }
.weg strong { font-family: var(--schrift-titel); font-stretch: 80%; font-weight: 800; font-size: clamp(1.5rem, 2.2vw, 2.1rem); letter-spacing: -.025em; line-height: 1.1; }
/* `1fr` hieße hier `minmax(auto, 1fr)`, und `auto` ist die Breite des
   längsten unteilbaren Stücks — das ist „hallo@eberhard-media-demo.de" in
   24 px. Auf einem 320-px-Telefon macht das die Spalte breiter als den
   Bildschirm und die ganze Seite fährt seitwärts. Also minmax(0, …), dazu
   min-width: 0 in der Kette darunter, und die Adresse darf notfalls im Wort
   umbrechen. */
@media (max-width: 500px) {
  .weg { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .weg b { padding-top: 0; }
  .weg > div { min-width: 0; }
  .weg a { overflow-wrap: anywhere; }
}

.formular h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin-bottom: .5rem; }
.formular > p { color: var(--grau-40); font-size: .98rem; margin-bottom: 1.5rem; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.feld { display: grid; gap: .25rem; }
.feld--voll { grid-column: 1 / -1; }
.feld label { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grau-50); }
.feld label small { font-weight: 500; letter-spacing: .06em; text-transform: none; font-stretch: 100%; }
.feld input, .feld select, .feld textarea {
  width: 100%; padding: .7rem 0; font: inherit; font-size: 1.05rem; color: var(--schwarz);
  background: transparent; border: 0; border-bottom: 1px solid var(--grau-80); border-radius: 0;
  transition: border-color var(--dauer), box-shadow var(--dauer);
}
.feld select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; background-size: 1rem; padding-right: 1.75rem; cursor: pointer; }
.feld textarea { min-height: 5.5rem; resize: vertical; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--grau-60); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 0; }
/* Beim Fokus zeichnet sich die schwarze Linie von links über die graue. */
.feld { position: relative; }
.feld::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--schwarz); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--kurve); pointer-events: none; }
.feld:focus-within::after, .feld:has(:user-invalid)::after { transform: scaleX(1); }
/* Beim Erscheinen zeichnen sich die grauen Linien der Felder nacheinander. */
.js .zeig .feld :is(input, select, textarea) { border-bottom-color: transparent; }
.js .zeig .feld::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--grau-80); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--kurve); pointer-events: none; }
.js .zeig.ist-da .feld::before { transform: scaleX(1); }
.js .zeig.ist-da .feld:nth-child(2)::before { transition-delay: .1s; } .js .zeig.ist-da .feld:nth-child(3)::before { transition-delay: .2s; } .js .zeig.ist-da .feld:nth-child(4)::before { transition-delay: .3s; } .js .zeig.ist-da .feld:nth-child(5)::before { transition-delay: .4s; } .js .zeig.ist-da .feld:nth-child(6)::before { transition-delay: .5s; } .js .zeig.ist-da .feld:nth-child(7)::before { transition-delay: .6s; }
.feld input:user-invalid, .feld select:user-invalid { border-bottom-color: var(--schwarz); box-shadow: 0 1px 0 0 var(--schwarz), 0 3px 0 0 var(--weiss), 0 4px 0 0 var(--schwarz); }
.formular .knopf { margin-top: 2rem; }
.formular.sendet .knopf { pointer-events: none; color: var(--weiss); }
.formular.sendet .knopf::before { transform: scaleY(0); }
.formular.sendet .knopf svg { animation: kreisen .9s linear infinite; }
@keyframes kreisen { to { transform: rotate(360deg); } }
.formular__hinweis { margin-top: 1rem; font-size: .85rem; color: var(--grau-50); }
.formular__antwort { display: none; margin-top: 1.5rem; padding: .25rem 0 .25rem 1.25rem; border-left: 2px solid var(--schwarz); font-size: .95rem; color: var(--grau-40); }
.formular__antwort.ist-da { display: block; animation: auftauchen .6s var(--kurve) both; }
.formular__antwort b { display: block; font-family: var(--schrift-titel); color: var(--schwarz); margin-bottom: .25rem; }
@media (max-width: 560px) { .felder { grid-template-columns: 1fr; } }

/* --- Unterseiten-Kopf: Schlagzeile, Vorspann, Haarlinie ----------------------- */
.seitenkopf { position: relative; z-index: 1; background: var(--weiss); padding-block: clamp(3rem, 7vh, 6rem) clamp(2.5rem, 5vw, 4.5rem); }
.seitenkopf .mass { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 1rem clamp(2rem, 5vw, 5rem); }
.seitenkopf .kicker { margin: .6rem 0 0; }
.seitenkopf h1 { font-size: clamp(2.7rem, 7vw, 7rem); max-width: 16ch; }
.seitenkopf .lead { margin-top: 1.5rem; grid-column: 2; }
.seitenkopf .knopfreihe { margin-top: 1.75rem; grid-column: 2; }
.seitenkopf__linie { grid-column: 1 / -1; height: 1px; background: var(--schwarz); margin-top: clamp(1.5rem, 3vw, 2.5rem); transform-origin: left; }
.js .seitenkopf .lead, .js .seitenkopf .knopfreihe { animation: auftritt 1s var(--kurve) .5s both; }
.js .seitenkopf .kicker { animation: auftritt .9s var(--kurve) both; }
.js .seitenkopf__linie { animation: linie-ziehen 1.2s var(--kurve) .6s both; }
@media (max-width: 860px) {
  .seitenkopf .mass { grid-template-columns: 1fr; }
  .seitenkopf .lead, .seitenkopf .knopfreihe { grid-column: 1; }
}

/* --- Team / Über uns --------------------------------------------------------- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 860px) { .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .team { grid-template-columns: 1fr; } }
.person { display: flex; flex-direction: column; gap: .3rem; }
.person__foto { overflow: hidden; margin-bottom: 1rem; }
.person__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--kurve), filter 1.6s var(--kurve) .45s; }
.person:hover .person__foto img { transform: scale(1.04); }
.person b { font-family: var(--schrift-titel); font-stretch: 84%; font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; }
.person span { color: var(--grau-50); font-size: .9rem; }
.person p { margin-top: .5rem; color: var(--grau-40); font-size: .95rem; }
.team--klein { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); gap: 0; }
@media (max-width: 560px) { .team--klein { grid-template-columns: 1fr; } }
.person--platzhalter { flex-direction: row; align-items: flex-start; gap: 1.5rem; padding: 1.75rem clamp(1.25rem, 2.5vw, 2.5rem) 1.75rem 0; margin-right: clamp(1.25rem, 2.5vw, 2.5rem); border-right: 1px solid var(--linie); }
.person--platzhalter:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
@media (max-width: 560px) { .person--platzhalter { border-right: 0; margin-right: 0; padding-right: 0; } .person--platzhalter + .person--platzhalter { border-top: 1px solid var(--linie); } }
.person--platzhalter .person__bild { flex: none; font-family: var(--schrift-titel); font-stretch: 74%; font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: -.04em; color: var(--grau-80); }
.person--platzhalter p { margin-top: .35rem; }

.kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.kennzahlen li { padding: 2rem clamp(1rem, 2vw, 2rem) 2rem 0; margin-right: clamp(1rem, 2vw, 2rem); border-right: 1px solid var(--linie); }
.kennzahlen li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.kennzahlen b { display: block; font-family: var(--schrift-titel); font-stretch: 74%; font-weight: 800; font-size: clamp(3rem, 5.5vw, 5.5rem); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.kennzahlen span { display: block; margin-top: .75rem; color: var(--grau-40); font-size: .92rem; line-height: 1.35; }
@media (max-width: 760px) {
  .kennzahlen { grid-template-columns: 1fr 1fr; }
  .kennzahlen li:nth-child(2n) { border-right: 0; margin-right: 0; padding-right: 0; }
  .kennzahlen li:nth-child(-n+2) { border-bottom: 1px solid var(--linie); }
}

.prosa { max-width: 68ch; font-size: 1.1rem; }
.prosa p + p { margin-top: 1.1em; }
.prosa h2 { margin: 3rem 0 1rem; font-size: 2rem; }
.prosa h3 { margin: 2.25rem 0 .75rem; font-size: 1.3rem; }
.prosa ul { padding-left: 1.3rem; }
.prosa li + li { margin-top: .4em; }
.hinweis-prototyp { padding: .25rem 0 .25rem 1.5rem; margin-bottom: 2.5rem; border-left: 2px solid var(--schwarz); }
.hinweis-prototyp p { font-size: 1rem; color: var(--grau-40); }
.hinweis-prototyp b { color: var(--schwarz); }

/* --- Google-Profil-Attrappe (Leistungen) -------------------------------------
   Eine fremde Oberfläche wie die Browser-Attrappen: Weiß, mit Haarlinie.
   Beim Erscheinen tippt das Skript die Suche ein; danach kommt der Rest. */
.gprofil { container-type: inline-size; color: var(--schwarz); background: var(--weiss); border: 1px solid var(--linie-dunkel); overflow: hidden; font-family: var(--schrift-text); }
.gprofil__innen { font-size: clamp(11px, 3.2cqw, 16px); }
.gprofil__suche { display: flex; align-items: center; gap: .6em; padding: .8em 1em; border-bottom: 1px solid var(--linie); background: var(--grau-95); }
.gprofil__suche span { flex: 1; padding: .5em .9em; border: 1px solid var(--grau-80); border-radius: 999px; background: var(--weiss); color: var(--schwarz); font-size: .95em; min-height: 2.2em; }
.gprofil__suche span.tippt::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -.15em; background: var(--schwarz); animation: blinken .9s steps(2) infinite; }
@keyframes blinken { to { opacity: 0; } }
.gprofil__suche svg { width: 1.2em; height: 1.2em; color: var(--grau-50); }
.hat-io.js .gprofil:not(.ist-fertig) :is(.gprofil__karte, .gprofil__kopf, .gprofil__knoepfe, .gprofil__zeilen) { opacity: 0; translate: 0 10px; }
.gprofil :is(.gprofil__karte, .gprofil__kopf, .gprofil__knoepfe, .gprofil__zeilen) { transition: opacity .6s var(--kurve), translate .6s var(--kurve); }
.gprofil.ist-fertig .gprofil__kopf { transition-delay: .1s; } .gprofil.ist-fertig .gprofil__knoepfe { transition-delay: .2s; } .gprofil.ist-fertig .gprofil__zeilen { transition-delay: .3s; }
.gprofil__karte { height: 6.5em; background:
  linear-gradient(90deg, transparent 49%, #fff 49% 51%, transparent 51%),
  linear-gradient(0deg, transparent 39%, #fff 39% 41%, transparent 41%),
  linear-gradient(35deg, #E3EAD9, #DDE6D3 45%, #E8E4D8 46%, #E8E4D8 55%, #D6DFCB 56%);
  position: relative; border-bottom: 1px solid var(--linie); }
.gprofil__pin { position: absolute; left: 58%; top: 40%; width: 1.4em; height: 1.4em; background: #C0392B; border: 2px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.gprofil.ist-fertig .gprofil__pin { animation: pin-fallen .7s var(--kurve) .2s both; }
@keyframes pin-fallen { from { translate: 0 -2em; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.gprofil__kopf { padding: 1em 1.2em .6em; }
.gprofil__kopf b { font-size: 1.35em; line-height: 1.15; display: block; }
.gprofil__kopf small { color: var(--grau-40); font-size: .85em; }
.gprofil__wertung { display: flex; align-items: center; gap: .4em; margin-top: .3em; font-size: .9em; }
.gprofil__wertung .sterne { color: #F4B400; }
.gprofil__wertung b { font-weight: 600; }
.gprofil__knoepfe { display: flex; gap: .5em; padding: .5em 1.2em .9em; flex-wrap: wrap; }
.gprofil__knoepfe span { padding: .4em .9em; border: 1px solid var(--grau-80); border-radius: 999px; font-size: .85em; font-weight: 600; color: #1A5EBB; }
.gprofil__knoepfe span:first-child { background: #1A5EBB; color: #fff; border-color: #1A5EBB; }
.gprofil__zeilen { padding: .8em 1.2em 1em; display: grid; gap: .4em; font-size: .88em; color: var(--grau-40); border-top: 1px solid var(--linie); }
.gprofil__zeilen span b { color: #2E8B4F; font-weight: 600; }

/* QR-Karte für die Baustelle: eine Zeile mit Haarlinie */
.qrkarte { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--linie-dunkel); max-width: 480px; }
.qrkarte img { width: 72px; height: 72px; background: var(--weiss); padding: 4px; }
.qrkarte b { display: block; font-family: var(--schrift-titel); font-stretch: 88%; font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.qrkarte span { display: block; font-size: .88rem; color: var(--hell-dunkel); margin-top: .3rem; }
.qrkarte { border-top-color: var(--linie-hier); }
.qrkarte span { color: var(--grau-40); }
.dunkel .qrkarte span { color: var(--hell-dunkel); }

/* --- Leistungsseite: „Was es bringt" / „Was es kostet" als zwei Zeilen ---------
   Eine Definitionsliste mit Haarlinien; links das Etikett in Versalien,
   rechts der Satz. Die Zahlen sind erfunden (PROTOTYP.md), die Preise
   PLATZHALTER. */
.fakten { margin: 1.75rem 0 0; padding: 0; border-top: 1px solid var(--linie-hier); }
.fakten > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--linie-hier); }
.fakten dt { margin: 0; padding-top: .25em; font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grau-50); }
.dunkel .fakten dt { color: var(--hell-dunkel); }
.fakten dd { margin: 0; font-size: .98rem; line-height: 1.5; }
.fakten dd a { font-weight: 600; }
@media (max-width: 560px) { .fakten > div { grid-template-columns: 1fr; gap: .25rem; } }

/* Eine gemeldete Bewertung: Kopf, Text, Stand. Attrappe aus Schrift. */
.bewertung { max-width: 480px; padding: 1.25rem 1.5rem; border: 1px solid var(--grau-80); background: var(--weiss); }
.bewertung__kopf { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; }
.bewertung__kopf > i { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--grau-80); }
.bewertung__kopf b { display: block; font-family: var(--schrift-titel); font-weight: 600; line-height: 1.2; }
.bewertung__sterne { color: #F4B400; font-size: .85rem; letter-spacing: .05em; }
.bewertung__kopf small { color: var(--grau-50); font-size: .82rem; }
.bewertung p { margin: .9rem 0 0; color: var(--grau-40); text-decoration: line-through; text-decoration-color: var(--grau-60); }
.bewertung__stand { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linie); font-size: .84rem; color: var(--grau-50); }
.bewertung__stand b { padding: .3em .7em; background: var(--schwarz); color: var(--weiss); font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }

/* Eine Anzeige: Suche, der gesponserte Treffer, die Kosten des Monats. */
.anzeige { max-width: 480px; border: 1px solid var(--grau-80); background: var(--weiss); }
.anzeige__suche { display: flex; align-items: center; gap: .6em; padding: .8em 1em; border-bottom: 1px solid var(--linie); background: var(--grau-95); }
.anzeige__suche svg { flex: none; width: 1.1em; height: 1.1em; color: var(--grau-50); }
.anzeige__suche span { flex: 1; padding: .5em .9em; border: 1px solid var(--grau-80); border-radius: 999px; background: var(--weiss); font-size: .95em; }
.anzeige__treffer { display: grid; gap: .3rem; padding: 1rem 1.25rem; }
.anzeige__treffer small { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grau-50); }
.anzeige__treffer b { color: #1A0DAB; font-size: 1.05rem; line-height: 1.3; }
.anzeige__treffer span { color: var(--grau-40); font-size: .9rem; }
.anzeige__treffer em { font-style: normal; margin-top: .3rem; padding: .5em .9em; justify-self: start; border: 1px solid var(--grau-80); border-radius: 999px; font-size: .84rem; font-weight: 600; color: #1A5EBB; }
.anzeige__kosten { display: flex; align-items: baseline; gap: 1rem; padding: .9rem 1.25rem; border-top: 1px solid var(--linie); font-size: .84rem; color: var(--grau-50); }
.anzeige__kosten b { font-family: var(--schrift-titel); font-stretch: 78%; font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; color: var(--schwarz); }

/* --- Fuß: schwarz, mit der Wortmarke am Grund --------------------------------- */
.fuss { position: relative; z-index: 1; overflow: hidden; background: var(--schwarz); color: var(--weiss); padding-top: clamp(3.5rem, 7vw, 6rem); }
.fuss__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem 2rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--linie-dunkel); }
@media (max-width: 900px) { .fuss__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fuss__raster { grid-template-columns: 1fr; } }
.fuss .marke { color: var(--weiss); }
.fuss__claim { margin-top: 1.25rem; color: var(--hell-dunkel); max-width: 30ch; }
.fuss h4 { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gedaempft-dunkel); margin-bottom: 1.25rem; }
.fuss ul { list-style: none; display: grid; gap: .55rem; }
.fuss a { text-decoration: none; color: var(--weiss); }
.fuss a:hover { text-decoration: underline; text-underline-offset: .25em; }
.fuss address { font-style: normal; color: var(--hell-dunkel); line-height: 1.7; }
.fuss address a { font-weight: 600; }
.fuss__unten { padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; align-items: center; font-size: .88rem; color: var(--gedaempft-dunkel); }
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.fuss__unten li { white-space: nowrap; } /* „Nach oben" war auf dem Telefon 41 px breit und zweizeilig */
.fuss__demo { flex-basis: 100%; font-size: .85rem; color: var(--gedaempft-dunkel); }
.fuss__demo b { color: var(--hell-dunkel); font-weight: 600; }
.fuss__wortmarke { display: block; margin: 1rem 0 -.22em; font-family: var(--schrift-titel); font-stretch: 74%; font-weight: 800; font-size: clamp(3rem, 15vw, 15rem); line-height: 1; letter-spacing: -.045em; white-space: nowrap; color: var(--weiss); user-select: none; overflow: hidden; }
/* Die Wortmarke steigt aus dem Grund, sobald der Fuß im Bild ist (das Skript
   legt den inneren Span an). */
.js .fuss__wortmarke > span { display: block; translate: 0 100%; transition: translate 1.3s var(--kurve); }
.js .fuss__wortmarke.ist-da > span { translate: 0 0; }
.hoch { display: inline-flex; align-items: center; gap: .4em; }
.hoch svg { width: .9em; height: .9em; transition: transform .4s var(--kurve); }
.hoch:hover svg { transform: translateY(-3px); }

/* --- Erscheinen beim Scrollen ------------------------------------------------
   `.zeig` fährt von unten und blendet ein; `--links`/`--rechts` kommen von der
   Seite. Kein Weichzeichner: Text bleibt scharf, auch in Firefox. */
.js .zeig { opacity: 0; translate: 0 32px; transition: opacity var(--zeig-dauer) var(--kurve), translate var(--zeig-dauer) var(--kurve); }
.js .zeig--links { translate: calc(-1 * min(48px, var(--rand) - 2px)) 0; }
.js .zeig--rechts { translate: min(48px, var(--rand) - 2px) 0; }
.js .zeig.ist-da { opacity: 1; translate: 0 0; }
.js .zeig--2 { transition-delay: .1s; --v: .1s; }
.js .zeig--3 { transition-delay: .2s; --v: .2s; }
.js .zeig--4 { transition-delay: .3s; --v: .3s; }
.js .zeig--5 { transition-delay: .4s; --v: .4s; }
.js .zeig--6 { transition-delay: .5s; --v: .5s; }
[data-zaehl] { font-variant-numeric: tabular-nums; }

/* Die Staffel: Der Rahmen steht, seine Teile kommen nacheinander — Nummer,
   Titel, Text; Kicker, Überschrift, Vorspann. Das Skript gibt jedem Teil die
   Klasse `teil` und seinen Platz (--k); bis dahin bleibt der Rahmen
   unsichtbar (ist-vorbereitet), damit nichts aufblitzt. Die Teile erscheinen
   per Animation und legen sie danach ab (ist-fertig), damit ihre eigenen
   Hover-Übergänge (Nummer, Titel, Knopf) wieder greifen. --v ist der
   Vorlauf des Rahmens (.zeig--2 …), damit Zeilen, die gemeinsam im Bild
   sind, versetzt kommen. */
.js .zeig--staffel { translate: 0 0; transition: opacity .5s var(--kurve); }
.js .zeig--staffel.ist-vorbereitet { opacity: 1; }
.js .zeig--staffel .teil { opacity: 0; }
.js .zeig--staffel.ist-da .teil { animation: teil-rein .9s var(--kurve) both; animation-delay: calc(var(--v, 0s) + var(--k, 0) * var(--staffel, .09s)); }
.tabelle-huelle { --staffel: .045s; }
.fuss__raster { --staffel: .12s; }
.js .zeig--staffel.ist-da .teil.kicker { animation-name: teil-links; }
.js .zeig--staffel.ist-da .teil:is(.person__foto, .referenz__foto, .zwei__bild) { animation-name: teil-bild; animation-duration: 1.2s; }
.js .zeig--staffel.ist-da .teil.ist-gesplittet, .js .zeig--staffel.ist-da .teil.ist-fertig { animation: none; opacity: 1; }
@keyframes teil-rein { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes teil-links { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes teil-bild { from { opacity: 1; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0); } }
/* Fotos kommen grau und werden farbig, sobald sie da sind — die Farbe der
   Seite kommt aus den Fotos, und sie kommt beim Scrollen an. */
.js :is(.zeig--staffel .teil, .zeig--bild) img { filter: grayscale(1); }
/* Die Übergangszeit steht bewusst in einer eigenen, gewichtslosen Regel
   (`:where()` drückt sie auf 0,0,1). `transition` ist eine Kurzform: die alte
   gemeinsame Regel hatte 0,3,1 und warf damit jede eigene `transition` eines
   Bildes weg — die Kamerafahrt in 03 und das Heranfahren im Team sprangen
   deshalb, statt zu laufen. Wer hier überschreibt, nimmt `filter 1.6s
   var(--kurve) .45s` in seine eigene Liste auf, sonst springt die Farbe. */
:where(.js) :where(.zeig--staffel .teil, .zeig--bild) img { transition: filter 1.6s var(--kurve) .45s; }
.js :is(.zeig--staffel.ist-da .teil, .zeig--bild.ist-da) img { filter: grayscale(0); }
/* Das große Foto eines Zweispalters: der Rahmen steht, das Bild hebt sich
   von unten aus (clip-path). Der Clip liegt auf dem Bild, nicht auf dem
   beobachteten Rahmen — Chromium rechnet den clip-path eines Elements in
   dessen Sichtbarkeit ein, und ein ganz weggeschnittener Rahmen käme nie
   „in den Sichtbereich". */
.js .zeig--bild { opacity: 1; translate: 0 0; }
.js .zeig--bild > img { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--kurve), filter 1.6s var(--kurve) .45s; }
.js .zeig--bild.ist-da > img { clip-path: inset(0); }

/* --- Wörter: die Überschrift steigt Wort für Wort aus der Zeile ---------------
   Die Schlagzeilen (h1) sofort beim Laden; die Abschnittstitel (h2, `wartet`)
   erst, wenn ihr Rahmen (.zeig) erschienen ist. */
.js .ist-gesplittet .wort { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .05em .06em .16em; margin: -.05em -.06em -.16em; }
.js .ist-gesplittet .wort > span { display: inline-block; translate: 0 112%; opacity: 0; }
.js .ist-gesplittet:not(.wartet) .wort > span,
.js .zeig.ist-da .wartet .wort > span,
.js .wartet.ist-da .wort > span { animation: wort-rein 1.1s var(--kurve) forwards; animation-delay: calc(.12s + var(--v, 0s) + var(--i, 0) * .055s); }
.js .ist-gesplittet .rolle:not(.ist-bereit) .rolle__wort { translate: 0 112%; opacity: 0; animation: wort-rein 1.1s var(--kurve) forwards; animation-delay: calc(.12s + var(--i, 0) * .055s); }
@keyframes wort-rein { to { translate: 0 0; opacity: 1; } }

/* Den eigenen Zeiger (Punkt und Ring in `mix-blend-mode: difference`, dazu
   `cursor: none` auf der ganzen Seite) gab es vom 2026-09-07 bis zum
   2026-09-11. Auf Wunsch von Maxim zeigt die Seite wieder den Zeiger des
   Systems; Stil und Skript sind mitsamt den `data-zeiger`-Wörtern entfernt. */

/* --- 404 --------------------------------------------------------------------- */
.fehler { position: relative; z-index: 1; min-height: calc(100vh - var(--kopf)); display: grid; align-items: center; padding-block: 3rem; }
.fehler .mass { display: grid; gap: 1.5rem; }
.fehler__nr { font-family: var(--schrift-titel); font-stretch: 74%; font-weight: 800; font-size: clamp(6rem, 24vw, 22rem); line-height: .85; letter-spacing: -.06em; color: var(--grau-90); }
.js .fehler__nr { animation: auftritt 1.2s var(--kurve) both; }
.js .fehler .lead, .js .fehler .knopfreihe { animation: auftritt 1s var(--kurve) .5s both; }
.fehler h1 { font-size: clamp(2.2rem, 5.5vw, 5rem); max-width: 18ch; }

/* --- Ruhe -------------------------------------------------------------------
   Wer keine Bewegung will, bekommt die fertige Seite: alles sichtbar, nichts
   fährt, nichts rollt, nichts zählt (das Skript liest dieselbe Abfrage). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .js .zeig, .js .zeig > * { opacity: 1 !important; translate: 0 0 !important; }
  .js .ist-gesplittet .wort > span, .js .ist-gesplittet .rolle .rolle__wort { translate: 0 0; opacity: 1; animation: none; }
  .js .held__kopfzeile, .js .held__kopfzeile::after, .js .held__text > *, .js .held__legende, .js .held__motive, .js .seitenkopf .lead, .js .seitenkopf .knopfreihe, .js .seitenkopf .kicker, .js .seitenkopf__linie { animation: none; }
  .js .laufband__spur { animation: none; }
  .held__motiv { transition: none; transform: none; }
  .js .parallax > img { animation: none !important; transform: none; }
  .js .check__zeile .check__rand { stroke-dashoffset: 0; transition: none; }
  .check__kreuz { transition: none; }
  .check__summe.springt > span { animation: none; }
  .tel__seite { transition: none; }
  .js .tel__seite :is(.tw__formular > *, .tw__knoepfe > *, .tw__chips li, .tg__pin, .tg__bilder img, .tc__verlauf p, .tc__tag) { opacity: 1; translate: 0 0; scale: 1; transition: none; }
  .js .tel__seite :is(.tw__leiste, .tw__held img) { translate: 0 0; scale: 1; transition: none; }
  .js .tel__seite--anruf.ist-aktiv .ta__wellen i { animation: none; }
  .js .tel__seite--anruf.ist-aktiv .ta__bild::after { animation: none; }
  .js .tel__seite--google.ist-aktiv .tg__pin::after { animation: none; }
  .js .tel__seite--anruf.ist-aktiv .ta__themen li { animation: none; opacity: 1; }
  .js .tel__seite--anruf.ist-aktiv .ta__themen svg { animation: none; stroke-dashoffset: 0; }
  .js .tel__seite .tj__weg i::after { transform: none; transition: none; }
  /* Die drei tippenden Punkte sind reine Bewegung — ohne sie bleibt nur eine
     leere Blase übrig, also fällt sie ganz weg. */
  .tc__tippt { display: none; }
  .js .tel__seite .tc__verlauf p time svg, .js .tel__seite.ist-aktiv .tc__verlauf p time svg { stroke: #34B7F1; transition: none; }
  .js .schritte::before { transition: none; }
  .idee__fenster img, .idee__mobil { transition: none; }
  .js .tel__seite .tg__platz { scale: 1; transition: none; }
  .js .punkt::before { transform: none; transition: none; }
  .js .zeig .haken li { opacity: 1; translate: 0 0; }
  .hat-io.js .gprofil:not(.ist-fertig) :is(.gprofil__karte, .gprofil__kopf, .gprofil__knoepfe, .gprofil__zeilen) { opacity: 1; translate: 0 0; }
  .js .zeig--staffel, .js .zeig--staffel .teil, .js .zeig--bild { opacity: 1 !important; animation: none !important; clip-path: none !important; }
  .js :is(.zeig--staffel .teil, .zeig--bild) img { filter: none; }
  .js :is(.liste__zeile, .check__zeile, .fall, .weg, .faq details)::before, .js :is(.liste__zeile, .check__zeile, .fall, .weg, .faq details):last-child::after,
  .js :is(.spalten > *, .stimme, .paket, .kennzahlen li)::after { transform: none; transition: none; }
  .js .zeig .feld::before { transform: none; }
  .js .fuss__wortmarke > span { translate: 0 0; }
  .js .zeig.ist-da .vergleich-buehne { animation: none; }
  .zeiger-fein .held__motive { translate: 0 0; scale: 1; }
  .held__motiv { opacity: 0; }
  .held__motiv.ist-aktiv { opacity: 1; }
  .zeiger-fein .knopf { translate: 0 0; }
  .held__takt button i::after { animation: none; transform: scaleX(0); }
  .held__takt button.ist-aktiv i::after { transform: scaleX(1); }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* --- Cookie-Banner (seit 2026-09-11) ---------------------------------------
   Das Markup baut cookies.js — dieselbe Datei auf allen fünf Handwerk-Seiten.
   Hier nur das Aussehen, in der Sprache dieser Seite: eine schwarze Fläche
   ohne Rundung und ohne Schatten, Archivo schmal im Titel, weiße Knöpfe.
   „Alle akzeptieren" und „Nur notwendige" sind gleich stark — Ablehnen darf
   nicht mühsamer sein als Zustimmen. Unten links, auf dem Telefon unten über
   die volle Breite. `[hidden]` braucht bei `.cookie__details` eine eigene
   Regel, weil `display: grid` die des Browsers schlägt. */
.cookie { position: fixed; z-index: 300; left: var(--rand); bottom: 1.25rem; width: min(31rem, calc(100% - 2 * var(--rand))); background: var(--schwarz); color: var(--weiss); border: 1px solid var(--linie-dunkel); font-family: var(--schrift-text); opacity: 0; translate: 0 1rem; transition: opacity .35s var(--kurve), translate .35s var(--kurve); }
.cookie--da { opacity: 1; translate: 0 0; }
/* Die Absatzabstände der Seite gelten hier nicht — das Raster setzt sie. */
.cookie p { margin: 0; }
/* Spalte, in der allein die Details schrumpfen und scrollen: bei 360 × 740 lag
   „Auswahl speichern" sonst unter dem Bildschirmrand, erreichbar nur, wer erriet,
   dass das Banner innen scrollt (2026-09-12). */
.cookie__innen { display: flex; flex-direction: column; gap: .9rem; padding: 1.4rem 1.5rem 1.2rem; max-height: calc(100svh - 2.5rem); }
.cookie__innen > * { flex: none; }
.cookie__titel { font-family: var(--schrift-titel); font-stretch: 80%; font-weight: 800; font-size: 1.45rem; line-height: 1; letter-spacing: -.01em; }
.cookie__text { font-size: .9rem; line-height: 1.55; color: var(--hell-dunkel); }
.cookie__text a { color: var(--weiss); text-underline-offset: .2em; }
.cookie__details { display: grid; flex: 0 1 auto; min-height: 0; overflow-y: auto; border-top: 1px solid var(--linie-dunkel); }
.cookie__details[hidden] { display: none; }
.cookie__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding-block: .8rem; border-bottom: 1px solid var(--linie-dunkel); }
label.cookie__zeile { cursor: pointer; }
.cookie__art b { display: block; font-size: .9rem; }
.cookie__art span { display: block; margin-top: .15rem; font-size: .8rem; line-height: 1.45; color: var(--gedaempft-dunkel); }
.cookie__immer { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hell-dunkel); }
.cookie__schalter { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 2.6rem; height: 1.4rem; margin: 0; border: 1px solid var(--hell-dunkel); background: transparent; cursor: pointer; transition: background-color .2s var(--kurve), border-color .2s var(--kurve); }
.cookie__schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.4rem - 8px); height: calc(1.4rem - 8px); background: var(--hell-dunkel); transition: translate .2s var(--kurve), background-color .2s var(--kurve); }
.cookie__schalter:checked { background: var(--weiss); border-color: var(--weiss); }
.cookie__schalter:checked::after { translate: 1.2rem 0; background: var(--schwarz); }
.cookie__schalter:focus-visible, .cookie__knopf:focus-visible, .cookie__text a:focus-visible { outline: 2px solid var(--weiss); outline-offset: 3px; }
.cookie__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.cookie__knopf { flex: 1 1 9rem; padding: .85em 1em; border: 1px solid var(--weiss); background: var(--weiss); color: var(--schwarz); font-family: var(--schrift-titel); font-weight: 600; font-size: .88rem; cursor: pointer; transition: background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve); }
.cookie__knopf:hover { background: transparent; color: var(--weiss); }
.cookie__knopf--leise { flex: 0 0 auto; border-color: transparent; background: transparent; color: var(--weiss); text-decoration: underline; text-underline-offset: .25em; }
.cookie--offen .cookie__knopf--leise { flex: 1 1 100%; border-color: var(--weiss); text-decoration: none; }
.cookie__prototyp { font-size: .74rem; line-height: 1.45; color: var(--gedaempft-dunkel); }
@media (max-width: 600px) {
  .cookie { left: 0; right: 0; bottom: 0; width: auto; border-width: 1px 0 0; }
  .cookie__innen { padding: 1.2rem var(--rand) 1rem; max-height: 85svh; }
}
.cookie-link { appearance: none; padding: 0; border: 0; background: none; font: inherit; color: var(--weiss); cursor: pointer; }
.cookie-link:hover { text-decoration: underline; text-underline-offset: .25em; }