/* keytos.de/neu/konzept · nur diese Seite (Jonas, 16.10.2026). Kopf: großer Zweizeiler zentriert oben (zweite Zeile grau),
   darunter mittig iPhone, iPad und MacBook mit der Demo Atelier Schnitt. Dreischritt Problem → Lösung → Ergebnis mit EINEM iPad (quer), das aus dem Kopf in die Abschnitte gleitet.
   Danach nur noch der Fuß. Schrift Inter 300/400/500, keine Linien. Außenrand links = rechts (--kz-m). */

:root {
  --kz-m: max(clamp(56px, 7vw, 128px), calc((100vw - 1680px) / 2)); /* Außenrand, links und rechts gleich */
  --kz-textb: clamp(420px, 34vw, 600px);                              /* Textspalte rechts */
  --kz-luft: clamp(64px, 6vw, 112px);                                 /* Abstand iPad ↔ Text */
  --kz-nav: calc(24px + var(--notch-h));                              /* Platz unter der Notch */
}


main :is(.kz-kopf, .kz-show, .kz-ruhig) :is(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
.kz-leise { color: var(--color-gray-500); } /* große Schrift: 3,5:1 reicht ab 24 px (WCAG AA groß), wie auf /neu/team */

/* ── Kopf: großer Titel zentriert oben, darunter mittig die drei Geräte (Anordnung und Maße wie im Apple-Bild) ── */
:root { --kz-f: clamp(40px, 12vw, 64px); } /* Titelgröße */
@media (min-width: 744px) { :root { --kz-f: clamp(56px, min(8vw, 13vh), 150px); } }
.kz-kopf { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; min-height: 100vh; min-height: 100lvh; padding: calc(var(--kz-nav) + 28px) var(--grid-gutter-width) 40px; text-align: center; overflow-x: clip; } /* taste-skill-ignore: 100vh nur Rückfall */
.kz-kopf__text { display: grid; justify-items: center; }
.kz-kopf__titel { font-weight: var(--weight-light); font-size: var(--kz-f); line-height: 1.04; letter-spacing: -.05em; }
.kz-zeile { display: block; overflow: hidden; padding: .02em 0 .1em; margin-bottom: -.1em; }
.kz-zeile > span { display: block; }
/* Gerätegruppe: --gw = Breite der Gruppe (iPhone links bis MacBook-Unterteil rechts); alles relativ dazu, Maße aus dem Bild:
   iPhone 11,8 %, iPad ab 7,66 % mit 41,1 %, MacBook-Unterteil ab 37,27 % mit 62,7 %; Höhe 37,9 %. Mittig im freien Raum. */
.kz-kopf__mitte { --gw: calc(100vw - 2 * var(--grid-gutter-width)); position: relative; flex: none; display: grid; justify-items: center; gap: 34px; margin: auto 0; }
.kz-kopf__geraete { position: relative; width: var(--gw); height: calc(var(--gw) * .379); }
.kz-kopf__geraete::before { content: ""; position: absolute; left: 3%; right: 1%; bottom: -16px; height: 28px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.16), transparent); filter: blur(6px); } /* Schatten unter der Gruppe */
.kz-geraete__mac, .kz-geraete__ipad, .kz-geraete__iphone { position: absolute; bottom: 0; }
.kz-geraete__mac { z-index: 1; left: 37.27%; bottom: calc(var(--gw) * .627 * .0055); }
.kz-geraete__ipad { z-index: 2; left: 7.66%; }
.kz-geraete__iphone { z-index: 3; left: 0; }
.kz-geraete__mac .kz-mac { --w: calc(var(--gw) * .627); }
.kz-geraete__ipad .kz-ipad { --w: calc(var(--gw) * .411); box-shadow: inset 0 0 0 1.5px #3a3a3e, inset 0 0 0 3px #0d0d0f, 0 30px 50px -30px rgba(0,0,0,.45); }
.kz-geraete__iphone .kz-iphone { --w: calc(var(--gw) * .118); }
@media (min-width: 744px) {
  /* so groß, wie unter den Titel passt: Höhe = 100vh − Notch-Abstand − Titel − Abstände − Schatten */
  /* Höhe = 100vh − Notch-Abstand − Titel − Demo-Zeile mit Knopf (≈ 70 px) − Abstände − Schatten */
  .kz-kopf__mitte { --gw: min(92vw, 1500px, calc((100vh - 280px - 2.12 * var(--kz-f)) / .379)); }
}

/* Demo-Hinweis unter den Geräten mit „Ansehen“ (gleicher Knopf wie „Projekt anfragen“, kleiner) */
.kz-demo__innen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; margin: 0; font-size: 14px; line-height: 1.4; color: var(--color-gray-800); }
.kz-demo__innen b { color: var(--primitive-black); font-weight: var(--weight-bold); }
main .kz-demo .kz-knopf { margin-top: 0; }
/* so groß wie die Beschreibung daneben: gleiche Schrift (14 px), flache Pille; Trefferfläche 32 px hoch (WCAG 2.2: ≥ 24 px) */
main .kz-knopf.kz-knopf--klein { min-height: 32px; gap: 8px; padding: 0 4px 0 14px; font-size: 14px; } /* „main“: schlägt die allgemeine Knopf-Regel weiter unten */
main .kz-knopf--klein .kz-knopf__kreis { width: 24px; height: 24px; }
main .kz-knopf--klein .kz-pfeil-zeichen { font-size: 13px; }
/* „Projekt anfragen“ im Erstbild unter 1020 px (dort steckt er sonst im eingeklappten Menü; ab 1020 px zeigt ihn die Notch), voller
   Knopf (56 px hoch), Auftritt über data-steig. Handy: unter der Überschrift (bei der Demo-Zeile läge er in Safari mit Leiste unter der
   Kante – der Kopf ist auf 100lvh ausgelegt); Tablet: zentriert unter der Demo-Zeile. */
.kz-kopf__cta, .kz-demo__cta { display: flex; justify-content: center; }
.kz-kopf__cta { margin-top: 24px; }
.kz-demo__cta { margin-top: 14px; }
main .kz-kopf__cta .kz-knopf { margin-top: 0; }
@media (min-width: 744px) { .kz-kopf__cta { display: none; } }
@media (max-width: 743.98px), (min-width: 1020px) { .kz-demo__cta { display: none; } }
/* Café-Demo im Ergebnis: dieselbe Zeile wie im Kopf, linksbündig unter dem iPad (Szene: frei unter dem Gerät, links – rechts liegt die Karte „Geprüft“) */
.kz-demo__innen--ergebnis { justify-content: flex-start; }
main .kz-demo__innen--ergebnis { white-space: normal; } /* schmale Handys: der Text darf umbrechen, der Knopf bleibt daneben (sonst zu breit) */
.kz-demo__innen--ergebnis > span { min-width: 0; }
main .kz-demo__innen--ergebnis .kz-knopf { margin-top: 0; }
.kz-szene .kz-demo__innen--ergebnis { position: absolute; left: 0; top: calc(100% + 46px); white-space: nowrap; }

/* Anzeigen: kleine Kärtchen in dezenten Pastelltönen mit farbigem Punkt; li = Lage (+ Abgang in der Szene), __k = Auftritt (CSS),
   __box = Schweben (GSAP). Auf dem Handy eine Reihe über den Geräten, ab 744 px frei um die Geräte verteilt (% der Gruppe). */
.kz-anzeigen { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 10px; margin: 0; padding: 0; list-style: none; order: -1; }
.kz-anzeige { --farbe: #d7f0e3; --punkt: #2f9e6a; }
.kz-anzeige--butter { --farbe: #fbefc8; --punkt: #c99a14; }
.kz-anzeige--apricot { --farbe: #fde4d3; --punkt: #e07b3c; }
.kz-anzeige--rose { --farbe: #fbdde4; --punkt: #d9506f; }
.kz-anzeige--salbei { --farbe: #e3ecd2; --punkt: #6b8f3a; }
.kz-anzeige__k, .kz-anzeige__box { display: block; }
.kz-anzeige__box { display: grid; grid-template-columns: auto auto; column-gap: 9px; align-items: center; padding: 9px 14px 10px 12px; border-radius: 14px; background: var(--farbe); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 16px 30px -18px rgba(0,0,0,.32); text-align: left; white-space: nowrap; will-change: transform; } /* taste-skill-ignore: schwebt wirklich */
.kz-anzeige__box i { grid-row: span 2; width: 8px; height: 8px; border-radius: 50%; background: var(--punkt); box-shadow: 0 0 0 3px rgba(255,255,255,.6); }
.kz-anzeige__box b { font-size: 17px; font-weight: var(--weight-bold); letter-spacing: -.02em; line-height: 1.15; color: var(--primitive-black); }
.kz-anzeige__box span { grid-column: 2; font-size: 12px; line-height: 1.3; color: var(--color-gray-800); }
@media (max-width: 743.98px) { .kz-anzeige:nth-child(n+5) { display: none; } } /* Handy: vier reichen */
/* Handy: Zeile und Knopf in einer Reihe. QA 23.10.2026 (Fix 26.10.): mit nowrap war die Kopf-Zeile 389 px breit und zog
   .kz-kopf__mitte samt Anzeigen mit – bei 375 px ragte beides 7 px, bei 320 px 34 px je Seite über den Rand. Jetzt bricht nur der
   Text um (Kopf: Name oben, „Demo · …“ darunter, Gedankenstrich weg), der Knopf bleibt daneben und schrumpft nicht. */
@media (max-width: 413.98px) {
  .kz-demo__innen { flex-wrap: nowrap; font-size: 13px; }
  .kz-demo__innen > span { min-width: 0; }
  main .kz-knopf.kz-knopf--klein { flex: none; align-self: center; font-size: 13px; padding-left: 12px; white-space: nowrap; }
  .kz-kopf .kz-demo__innen > span { text-align: left; }
  .kz-kopf .kz-demo__innen b { display: block; }
  .kz-demo__strich { display: none; }
}
@media (min-width: 744px) {
  .kz-anzeigen { position: absolute; z-index: 3; left: 0; top: 0; width: var(--gw); height: calc(var(--gw) * .379); display: block; pointer-events: none; }
  .kz-anzeige { position: absolute; }
  .kz-anzeige__box b { font-size: clamp(17px, 1.35vw, 22px); }
  .kz-anzeige__box span { font-size: clamp(12px, .9vw, 14px); }
  /* Lage in % der Gerätegruppe (freie Stellen: links/rechts daneben, über dem iPad, unten zwischen iPad und MacBook);
     --rand hält Anzeigen am Bildschirmrand fest, wenn die Gruppe fast so breit ist wie der Bildschirm (Tablet) */
  .kz-anzeigen { --rand: calc((var(--gw) - 100vw) / 2 + 12px); }
  .kz-anzeige:nth-child(1) { left: max(-9%, var(--rand)); top: 2%; }    /* links oben, über dem iPhone */
  .kz-anzeige:nth-child(2) { right: max(-9%, var(--rand)); top: 6%; }   /* rechts oben am MacBook */
  .kz-anzeige:nth-child(3) { left: 21%; top: -1%; }                     /* über dem iPad */
  .kz-anzeige:nth-child(4) { right: max(-10%, var(--rand)); top: 54%; } /* rechts am MacBook */
  .kz-anzeige:nth-child(5) { left: max(-10%, var(--rand)); top: 60%; }  /* links am iPhone */
  .kz-anzeige:nth-child(6) { left: 46%; top: 82%; }                     /* unten zwischen iPad und MacBook */
}

/* ── iPad im Querformat (nach Jonas' Bild) ────────────────────────────────────
   Außen 1,398 : 1, Rand 4,86 % der kurzen Seite, Ecken 8,8 %, Bildschirm-Ecken 4,2 %; Kamera an der kurzen Kante, obere Taste
   links oben, Lautstärke oben links. --w = Breite des Geräts. Bildschirm-Inhalte in cqw (Bezug: Bildschirmbreite). */
.kz-ipad { --h: calc(var(--w) / 1.398); --rand: calc(var(--h) * .0486);
  position: relative; width: var(--w); height: var(--h); padding: var(--rand); border-radius: calc(var(--h) * .088);
  background: #0d0d0f; box-shadow: inset 0 0 0 1.5px #3a3a3e, inset 0 0 0 3px #0d0d0f, 0 2px 4px rgba(0,0,0,.1); }
.kz-ipad::before { content: ""; position: absolute; left: calc(var(--rand) / 2 - 3px); top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #26262a; } /* Kamera */
.kz-ipad__tasten { position: absolute; inset: 0; pointer-events: none; }
.kz-ipad__tasten::before { content: ""; position: absolute; left: -3px; top: 8.3%; width: 4px; height: 7.2%; border-radius: 2px 0 0 2px; background: #2a2a2e; }
.kz-ipad__tasten::after { content: ""; position: absolute; top: -3px; left: 7.6%; width: 3.7%; height: 4px; border-radius: 2px 2px 0 0; background: #2a2a2e; box-shadow: calc(var(--w) * .048) 0 0 #2a2a2e; }
.kz-ipad__bildschirm { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--h) * .042); background: #fff; container-type: inline-size; }
.kz-screen { position: absolute; inset: 0; z-index: 0; } /* eigene Stapelebene: Reihenfolge = Reihenfolge im HTML */
.kz-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.kz-boden { position: absolute; left: 8%; right: 8%; bottom: -34px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.2), transparent); filter: blur(6px); } /* Schatten unter dem schwebenden Gerät */

/* iPhone (hochkant) nach dem Bild: Ecken 19 %, Rand 4,5 %, dunkler Rahmen; Leiste nur mit Dynamic Island (ohne Uhr und Akku),
   unten der Home-Strich. --w = Breite. */
.kz-iphone { --h: calc(var(--w) * 2.06); --rand: calc(var(--w) * .045); position: relative; width: var(--w); height: var(--h); padding: var(--rand); border-radius: calc(var(--w) * .19); background: #0b0b0c; box-shadow: inset 0 0 0 1.5px #3c3c3f, inset 0 0 0 3px #0b0b0c, 0 30px 50px -30px rgba(0,0,0,.45); }
.kz-iphone::before, .kz-iphone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2a2a2e; }
.kz-iphone::before { left: -2px; top: 20%; height: 7%; box-shadow: 0 calc(var(--h) * .09) 0 #2a2a2e; } /* Lautstärke */
.kz-iphone::after { right: -2px; top: 26%; height: 11%; } /* Seitentaste */
.kz-iphone__bildschirm { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: calc(var(--w) * .155); background: #fff; container-type: inline-size; }
.kz-iphone__leiste { flex: none; height: 12cqw; }
.kz-iphone__insel { position: absolute; top: 2.6cqw; left: 50%; width: 32cqw; height: 9cqw; margin-left: -16cqw; border-radius: 99px; background: #000; }
.kz-iphone__bildschirm img { display: block; flex: 1; width: 100%; min-height: 0; object-fit: cover; object-position: top; }
.kz-iphone__heim { position: absolute; bottom: 2.2cqw; left: 50%; width: 36cqw; height: 1.4cqw; margin-left: -18cqw; border-radius: 99px; background: #111; }

/* MacBook nach dem Bild. --w = Breite des Unterteils (vorn breiter als der Deckel: Deckel 82,4 %).
   Deckel 1,463 : 1, Rand oben 1,9 %, seitlich 1,67 %, unten 3,1 %, Ecken oben 2,4 %; Bildschirm: die Website füllt ihn ganz
   (1,526 : 1), oben mittig liegt die Notch darüber (12,4 % breit, 2 % der Deckelbreite hoch, mit Kamera).
   Unterteil: 3,5 % hoch, gerade Enden (oben fast eckig, unten r ≈ 1 %), Griffmulde vorn mittig, zwei Füße. */
.kz-mac { --lw: calc(var(--w) * .824); position: relative; width: var(--w); }
.kz-mac__deckel { position: relative; width: var(--lw); height: calc(var(--lw) / 1.463); margin: 0 auto; padding: calc(var(--lw) * .019) calc(var(--lw) * .0167) calc(var(--lw) * .031); border-radius: calc(var(--lw) * .024) calc(var(--lw) * .024) calc(var(--lw) * .004) calc(var(--lw) * .004); background: #0b0b0c; box-shadow: inset 0 0 0 1.5px #3a3a3d, inset 0 0 0 3px #0b0b0c, 0 30px 60px -36px rgba(0,0,0,.45); }
.kz-mac__bildschirm { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: calc(var(--lw) * .011) calc(var(--lw) * .011) calc(var(--lw) * .004) calc(var(--lw) * .004); background: #fff; container-type: inline-size; }
.kz-mac__notch { position: absolute; z-index: 1; top: 0; left: 50%; width: 12.4cqw; height: calc(var(--lw) * .02); margin-left: -6.2cqw; border-radius: 0 0 .9cqw .9cqw; background: #0b0b0c; }
.kz-mac__notch::after { content: ""; position: absolute; left: 50%; top: 50%; width: .6cqw; height: .6cqw; margin: -.3cqw 0 0 -.3cqw; border-radius: 50%; background: #1b1f2b; box-shadow: inset 0 0 0 .12cqw #2d3446; } /* Kamera */
.kz-mac__bildschirm img { display: block; flex: 1; width: 100%; min-height: 0; object-fit: cover; object-position: top; }
.kz-mac__basis { position: relative; width: 100%; height: calc(var(--w) * .035); border-radius: .2% .2% 1% 1% / 5% 5% 28% 28%; background: linear-gradient(90deg, rgba(255,255,255,.07), transparent 1.4%, transparent 98.6%, rgba(255,255,255,.09)), linear-gradient(#4b4b4e, #333336 22%, #2b2b2e 62%, #1c1c1e); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 3px rgba(0,0,0,.35); } /* taste-skill-ignore: Metallkante des Geräts */
.kz-mac__basis::after { content: ""; position: absolute; left: 50%; top: 0; width: 18%; height: 34%; margin-left: -9%; border-radius: 0 0 2.4% 2.4% / 0 0 70% 70%; background: linear-gradient(#a4a4a7, #6f6f72); box-shadow: inset 0 1px 1px rgba(0,0,0,.35); } /* Griffmulde */
.kz-mac__fuss { position: absolute; bottom: calc(var(--w) * -.0055); width: 6.6%; height: calc(var(--w) * .0055); background: #1f1f21; clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); }
.kz-mac__fuss--l { left: 5.5%; }
.kz-mac__fuss--r { right: 5.5%; }

/* Problem: typisch KI-generierte Seite (Funkeln, Floskel, Verlauf, Glaskugel, drei gleiche Karten) – bewusst das Klischee */
.kz-ki { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 88% 12%, rgba(184,168,255,.42), transparent 34%), radial-gradient(circle at 4% 96%, rgba(158,186,255,.34), transparent 38%), #fbfaff; color: #14112b; font-family: var(--font-sans); }
.kz-ki p { margin: 0; }
.kz-ki__funkel { display: block; width: 2.6cqw; aspect-ratio: 1; background: linear-gradient(135deg, #8b6cff, #5f8dff); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.kz-ki__nav { position: absolute; top: 3cqw; left: 4cqw; right: 4cqw; display: flex; justify-content: space-between; align-items: center; }
.kz-ki__menue { display: flex; align-items: center; gap: 2.2cqw; padding: .7cqw .8cqw; border-radius: 99px; background: rgba(255,255,255,.8); box-shadow: 0 0 0 1px rgba(80,60,200,.08); color: #4a4763; font-size: 1.35cqw; }
.kz-ki__menue b { padding: .5cqw 1.3cqw; border-radius: 99px; background: #ece8ff; color: #14112b; font-weight: 600; }
.kz-ki__menue span:last-child { padding-right: 1.2cqw; }
.kz-ki__profil { width: 3cqw; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(80,60,200,.14); }
.kz-ki__held { position: absolute; left: 7cqw; top: 12cqw; width: 48cqw; }
.kz-ki__badge { display: inline-flex; align-items: center; gap: .8cqw; height: 3.6cqw; padding: 0 1.6cqw 0 1.2cqw; border-radius: 99px; background: #f0edff; box-shadow: 0 0 0 1px rgba(110,90,255,.14); color: #5b4bd6; font-size: 1.45cqw; font-weight: 600; }
.kz-ki__badge .kz-ki__funkel { width: 1.6cqw; }
.kz-ki .kz-ki__titel { margin-top: 2.4cqw; font-size: 6.4cqw; font-weight: 800; letter-spacing: -.045em; line-height: 1.02; }
.kz-ki__titel em { font-style: normal; background: linear-gradient(90deg, #7b5cff, #4f8bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kz-ki .kz-ki__text { margin-top: 2cqw; color: #5d5a75; font-size: 1.9cqw; }
.kz-ki .kz-ki__knoepfe { display: flex; gap: 1.4cqw; margin-top: 2.4cqw; }
.kz-ki__start, .kz-ki__mehr { display: inline-flex; align-items: center; height: 4.4cqw; padding: 0 2.4cqw; border-radius: 99px; font-size: 1.55cqw; font-weight: 600; }
.kz-ki__start { background: linear-gradient(90deg, #8a5cff, #5f7dff); color: #fff; box-shadow: 0 1cqw 2.4cqw -1cqw rgba(110,80,255,.7); }
.kz-ki__mehr { background: #fff; box-shadow: 0 0 0 1px rgba(80,60,200,.14); }
.kz-ki__kugel { position: absolute; left: 61cqw; top: 15cqw; width: 26cqw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 33% 27%, #fff 0 5%, rgba(255,255,255,0) 20%), radial-gradient(circle at 62% 68%, #6f7bff 0, #9b7dff 34%, #d7c8ff 62%, #f4f0ff 80%);
  box-shadow: inset -2cqw -2.4cqw 4cqw rgba(70,60,200,.32), 0 3cqw 6cqw -2cqw rgba(110,90,255,.5); }
.kz-ki__kugel::before { content: ""; position: absolute; inset: 34% -24%; border-radius: 50%; box-shadow: 0 0 0 .25cqw rgba(140,120,255,.5); transform: rotate(-16deg); }
.kz-ki__kugel .kz-ki__funkel { position: absolute; width: 2.2cqw; }
.kz-ki__kugel .kz-ki__funkel:nth-child(1) { left: -12%; top: 12%; }
.kz-ki__kugel .kz-ki__funkel:nth-child(2) { right: -14%; top: 58%; width: 1.6cqw; }
.kz-ki__kugel .kz-ki__funkel:nth-child(3) { left: 8%; bottom: -10%; width: 1.4cqw; }
.kz-ki__karten { position: absolute; left: 7cqw; right: 7cqw; top: 54cqw; height: 12.4cqw; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; }
.kz-ki__karte { display: grid; justify-items: center; align-content: center; gap: .5cqw; padding: 0 2cqw; border-radius: 1.6cqw; background: rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(80,60,200,.08), 0 1cqw 2cqw -1.2cqw rgba(80,60,200,.3); color: #6b6880; font-size: 1.15cqw; line-height: 1.35; text-align: center; }
.kz-ki__karte > i { display: grid; place-items: center; width: 3.2cqw; height: 3.2cqw; margin-bottom: .3cqw; border-radius: .9cqw; background: #efeaff; }
.kz-ki__karte .kz-ki__funkel { width: 1.6cqw; }
.kz-ki__karte b { color: #14112b; font-size: 1.5cqw; font-weight: 700; }

/* Pfeile: Linie vom Schild (außerhalb des Geräts) zum Ziel, dort ein roter Punkt. oben/unten senkrecht, „ecke“ von unten am linken
   Rand hoch, runde Ecke, dann nach rechts. Koordinaten (--x, --y, --x0) in % des Bildschirms; --lang = Linie außerhalb des Geräts. */
.kz-pfeile { --lang: 26px; --rot: #e5484d; --tinte: #1d1d1f; position: absolute; z-index: 1; inset: var(--rand); pointer-events: none; }
.kz-pfeil { position: absolute; left: var(--x); width: 0; }
.kz-pfeil--oben { top: calc(-1 * (var(--rand) + var(--lang))); height: calc(var(--rand) + var(--lang) + var(--y)); }
.kz-pfeil--unten, .kz-pfeil--ecke { top: var(--y); bottom: calc(-1 * (var(--rand) + var(--lang))); }
.kz-pfeil--ecke { --r: 10px; left: var(--x0); width: calc(var(--x) - var(--x0)); }
.kz-pfeil__linie { position: absolute; left: -.75px; top: 0; bottom: 0; width: 1.5px; border-radius: 1px; background: var(--tinte); transform-origin: 50% 0; }
.kz-pfeil--unten .kz-pfeil__linie, .kz-pfeil--ecke .kz-pfeil__linie { transform-origin: 50% 100%; }
.kz-pfeil--ecke .kz-pfeil__linie { top: var(--r); }
.kz-pfeil__ecke { position: absolute; left: -.75px; top: -.75px; width: var(--r); height: var(--r); border: 0 solid var(--tinte); border-width: 1.5px 0 0 1.5px; border-top-left-radius: var(--r); }
.kz-pfeil__arm { position: absolute; left: calc(var(--r) - .75px); right: 0; top: -.75px; height: 1.5px; border-radius: 1px; background: var(--tinte); transform-origin: 0 50%; }
/* Ziel: roter Punkt mit weißem Rand und zartem Hof; der Ring (i) läuft beim Erscheinen einmal nach außen */
.kz-pfeil__ziel { position: absolute; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(229,72,77,.2), 0 2px 6px rgba(0,0,0,.22); }
.kz-pfeil--oben .kz-pfeil__ziel { top: 100%; }
.kz-pfeil--unten .kz-pfeil__ziel { top: 0; }
.kz-pfeil--ecke .kz-pfeil__ziel { top: 0; left: 100%; }
.kz-pfeil__ziel i { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--rot); opacity: 0; }
/* Schild: weiß und schwebend wie die Ergebnis-Karten, mit rotem Punkt – die Linie setzt genau unter bzw. über dem Punkt an */
.kz-pfeil__text { position: absolute; left: -18px; width: max-content; padding: 9px 16px 9px 30px; white-space: nowrap; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 14px 30px -16px rgba(0,0,0,.35); color: var(--primitive-black); font-size: 14px; font-weight: var(--weight-bold); line-height: 1.3; }
.kz-pfeil__text::before { content: ""; position: absolute; left: 14px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 3px rgba(229,72,77,.18); }
.kz-pfeil--oben .kz-pfeil__text { bottom: 100%; }
.kz-pfeil--unten .kz-pfeil__text, .kz-pfeil--ecke .kz-pfeil__text { top: 100%; }
@media (max-width: 743.98px) {
  /* schmal: Schilder kleiner; oben gestaffelt und das rechte rechtsbündig, damit sich die beiden nicht überdecken */
  .kz-pfeile { --lang: 14px; }
  .kz-pfeil__text { padding: 8px 12px 8px 26px; font-size: 13px; }
  .kz-pfeil__text::before { left: 12px; top: 13px; }
  .kz-pfeil:nth-child(1) { --lang: 64px; }
  .kz-pfeil:nth-child(1) .kz-pfeil__text, .kz-pfeil:nth-child(3) .kz-pfeil__text, .kz-pfeil:nth-child(4) .kz-pfeil__text { left: -16px; }
  .kz-pfeil:nth-child(2) .kz-pfeil__text { left: auto; right: -16px; padding: 8px 26px 8px 12px; text-align: right; }
  .kz-pfeil:nth-child(2) .kz-pfeil__text::before { left: auto; right: 12px; }
}

/* Lösung: kleine Keytos-Seite (Café Brühwerk) im Querformat – links Text, rechts Bild, unten drei Hinweise */
.kz-mini { --akzent: #1c1814; position: absolute; inset: 0; overflow: hidden; background: #fff; color: #1c1814; font-family: 'DM Sans', var(--font-sans); }
.kz-mini__inhalt, .kz-mini__skizze { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 5cqw; padding: 3.4cqw 5.5cqw 3.8cqw; }
.kz-mini__inhalt { grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto; }
.kz-mini__inhalt > * { grid-column: 1; }
.kz-mini .kz-mini__nav { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-bottom: 3cqw; padding-bottom: 1.8cqw; border-bottom: 1px solid rgba(28,24,20,.12); font-size: 1.5cqw; }
.kz-mini__logo { color: var(--akzent); font-size: 1.9cqw; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.kz-mini__menue { display: flex; gap: 2.4cqw; color: #6f655b; }
.kz-mini__menue i { font-style: normal; }
.kz-mini .kz-mini__ueber { font-size: 1.3cqw; letter-spacing: .2em; text-transform: uppercase; color: #6f655b; }
.kz-mini .kz-mini__titel { display: grid; margin-top: 1.4cqw; font-size: 4.6cqw; line-height: 1.06; letter-spacing: -.01em; }
.kz-mini__titel > span { grid-area: 1 / 1; }
.kz-mini__v1 { font-weight: 600; letter-spacing: -.03em; }
.kz-mini__v2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; visibility: hidden; }
.kz-mini__v2 em { color: #8f6418; font-style: italic; } /* Gold der Café-Demo, dunkler: 4,7:1 auf Creme */
.kz-mini .kz-mini__text { max-width: 40cqw; margin-top: 1.8cqw; font-size: 1.75cqw; line-height: 1.6; color: #6f655b; }
.kz-mini__knopf { justify-self: start; margin-top: 2.4cqw; padding: 1.5cqw 2.8cqw; background: var(--akzent); color: #f5f1ea; font-size: 1.4cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.kz-mini .kz-mini__bild { grid-column: 2; grid-row: 2 / 7; min-height: 0; overflow: hidden; }
.kz-mini__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kz-mini .kz-mini__karten { grid-column: 1 / -1; grid-row: 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqw; margin-top: 2.8cqw; color: #6f655b; font-size: 1.3cqw; }
.kz-mini__karten span { display: grid; gap: .4cqw; padding-top: 1.4cqw; border-top: 1px solid rgba(28,24,20,.12); }
.kz-mini__karten b { color: #1c1814; font-size: 1.6cqw; font-weight: 600; }
/* Skizze: graue Balken an den Stellen der späteren Inhalte */
.kz-mini__skizze { z-index: 1; grid-template-rows: repeat(8, auto) minmax(0, 1fr) auto; background: #fff; }
.kz-mini__skizze i { display: block; grid-column: 1; align-self: start; height: 1.8cqw; border-radius: .6cqw; background: #e9e9ec; }
.kz-mini__skizze .s-nav { grid-column: 1 / -1; height: 2.6cqw; margin-bottom: 4.4cqw; }
.kz-mini__skizze .s-ueber { width: 40%; height: 1.3cqw; }
.kz-mini__skizze .s-titel { width: 92%; height: 4.2cqw; margin-top: 1.6cqw; }
.kz-mini__skizze .s-text { width: 86%; margin-top: 1.3cqw; }
.kz-mini__skizze .s-titel.s-kurz { margin-top: .8cqw; }
.kz-mini__skizze .s-kurz { width: 56%; }
.kz-mini__skizze .s-text:nth-child(5) { margin-top: 2.4cqw; }
.kz-mini__skizze .s-knopf { width: 28%; height: 4.4cqw; margin-top: 2.4cqw; }
.kz-mini__skizze .s-bild { grid-column: 2; grid-row: 2 / 10; align-self: stretch; height: auto; }
.kz-mini__skizze .s-karten { grid-column: 1 / -1; grid-row: 10; height: 5cqw; margin-top: 2.8cqw; }
/* Fertiger Zustand (ruhige Fassung): angepasst, ohne Skizze */
.kz-mini--fertig .kz-mini { --akzent: #8f6418; background: #f5f1ea; } /* dunkles Gold: 4,7:1 auf Creme */
.kz-mini--fertig .kz-mini__skizze, .kz-mini--fertig .kz-mini__v1 { visibility: hidden; }
.kz-mini--fertig .kz-mini__v2 { visibility: visible; }

/* Anpassungs-Karte */
.kz-regler { display: grid; gap: 14px; width: 220px; padding: 18px 20px; border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 40px -18px rgba(0,0,0,.25); }
.kz-regler__titel { font-size: 14px; font-weight: var(--weight-bold); }
.kz-regler__zeile { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--color-gray-800); }
.kz-regler__wahl { position: relative; display: flex; gap: 8px; }
.kz-regler__wahl i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c, #f4f4f5); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); font-style: normal; font-size: 13px; color: var(--primitive-black); }
.kz-regler__sans { font-family: 'DM Sans', var(--font-sans); font-weight: 600; }
.kz-regler__serif { font-family: 'Playfair Display', Georgia, serif; }
.kz-regler__ring { position: absolute; left: -3px; top: -3px; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--primitive-black); pointer-events: none; }
.kz-block .kz-regler__ring { transform: translateX(36px); }

/* Ergebnis-Karten: weiß, je ein farbiger Punkt. Ladezeit (Orange) und Geprüft (Türkis) heben sich mit farbigem Wert und zartem
   farbigem Rand stärker ab; Wertfarben 5,2:1 bzw. 5,5:1 auf Weiß. */
.kz-karten { display: flex; flex-wrap: wrap; gap: 10px; }
.kz-karte { --punkt: #34c759; --hof: rgba(52,199,89,.18); --rand-farbe: transparent; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--rand-farbe), 0 1px 2px rgba(0,0,0,.06), 0 18px 40px -18px rgba(0,0,0,.28); font-size: 13px; line-height: 1.35; color: var(--color-gray-800); }
.kz-karte b { display: block; color: var(--primitive-black); font-size: 15px; font-weight: var(--weight-bold); }
.kz-karte__punkt { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--punkt); box-shadow: 0 0 0 4px var(--hof); }
.kz-karte--tempo { --punkt: #ff9500; --hof: rgba(255,149,0,.2); --rand-farbe: rgba(255,149,0,.32); }
.kz-karte--geraete { --punkt: #14b8a6; --hof: rgba(20,184,166,.2); --rand-farbe: rgba(20,184,166,.34); }
.kz-karte--tempo b, .kz-karte--geraete b { font-size: 21px; letter-spacing: -.02em; line-height: 1.15; }
.kz-karte--tempo b { color: #c2410c; }
.kz-karte--geraete b { color: #0f766e; }

/* Texte (Szene und ruhige Fassung) */
.kz-text__wort { font-weight: var(--weight-light); font-size: clamp(40px, 4.4vw, 72px); letter-spacing: -.05em; line-height: 1; }
.kz-text__titel { margin-top: 14px !important; font-weight: var(--weight-bold); font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.kz-text__satz { margin-top: 12px !important; max-width: 34em; font-size: 17px; line-height: 1.5; color: var(--color-gray-800); text-wrap: pretty; }
.kz-punkte { display: grid; gap: 14px; margin-top: 28px !important; padding: 0; list-style: none; }
.kz-punkt { position: relative; display: grid; gap: 3px; padding-left: 38px; }
.kz-punkt::before { content: ""; position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; background: var(--primitive-white); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.kz-punkte--haken .kz-punkt::after { content: ""; position: absolute; left: 8px; top: 7px; width: 10px; height: 5px; border-left: 2px solid var(--primitive-black); border-bottom: 2px solid var(--primitive-black); transform: rotate(-45deg); }
.kz-punkte--kreuz .kz-punkt::after, .kz-punkte--kreuz .kz-punkt__titel::before { content: ""; position: absolute; left: 7px; top: 11px; width: 12px; height: 2px; background: var(--primitive-black); transform: rotate(45deg); }
.kz-punkte--kreuz .kz-punkt__titel::before { transform: rotate(-45deg); }
.kz-punkt__titel { font-size: 17px; font-weight: var(--weight-bold); line-height: 1.3; }
.kz-punkt__text { font-size: 15px; line-height: 1.45; color: var(--color-gray-800); }
.kz-knopf { display: inline-flex; align-self: flex-start; align-items: center; gap: 18px; margin-top: 32px; min-height: 56px; padding: 0 9px 0 28px; border-radius: var(--radius-button); background: var(--primitive-black); color: var(--primitive-white); font: var(--weight-bold) 17px/1 var(--font-sans); text-decoration: none; transition: background-color .18s ease, transform 140ms var(--ease-quart-out); }
.kz-knopf__kreis { position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; background: var(--primitive-white); color: var(--primitive-black); } /* Pfeil-Knopf im Knopf */
.kz-pfeil-zeichen { grid-area: 1 / 1; font-size: 17px; line-height: 1; }
.kz-pfeil-zeichen--neu { visibility: hidden; } /* zweiter Pfeil nur mit Skript (fliegt beim Hover herein) */
.js .kz-pfeil-zeichen--neu { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .js .kz-pfeil-zeichen--neu { visibility: hidden; } }
@media (hover: hover) { .kz-knopf:hover { background: var(--color-gray-800); } }
@media (prefers-reduced-motion: no-preference) { .kz-knopf:active { transform: scale(.97); } }

/* ── Ruhige Fassung: drei Blöcke, dezente Grautöne ─────────────────────────── */
.kz-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 64px var(--grid-gutter-width); background: #f4f4f5; }
.kz-block--loesung { background: #f6f4ef; }
.kz-block--ergebnis { background: #f2f4f7; }
.kz-block__bild { position: relative; display: grid; justify-items: start; gap: 20px; }
.kz-block .kz-ipad { --w: min(calc(100vw - 2 * var(--grid-gutter-width)), 640px); }
.kz-block--problem .kz-block__bild { padding: 134px 0 88px; } /* Platz für die Pfeil-Schilder über und unter dem Gerät */
@media (max-width: 599.98px) { .kz-knopf { align-self: stretch; justify-content: space-between; display: flex; } }
@media (min-width: 744px) { .kz-block--problem .kz-block__bild { padding: 108px 0; } }
@media (min-width: 1020px) {
  .kz-block { grid-template-columns: minmax(0, 1fr) var(--kz-textb); column-gap: var(--kz-luft); align-items: center; min-height: 100vh; padding: 96px var(--kz-m); }
  .kz-block .kz-ipad { --w: min(calc(100vw - 2 * var(--kz-m) - var(--kz-textb) - var(--kz-luft)), 760px); }
  .kz-block--loesung .kz-regler { position: relative; justify-self: end; margin-top: -120px; margin-right: -12px; } /* schwebt über der rechten unteren Ecke */
}

/* ── Szene (große Bildschirme mit Skript) ────────────────────────────────────
   .kz-show beginnt oben auf der Seite (unter dem Kopf, der darüber liegt und wegscrollt); das iPad startet am Platzhalter im Kopf.
   Ruhelage: links in der Zone zwischen Außenrand und Textspalte, mittig unter der Notch. */
.kz-show { display: none; }
.kz-szene-an .kz-ruhig { display: none; }
.kz-szene-an .kz-kopf { position: relative; z-index: 2; height: 100vh; height: 100lvh; pointer-events: none; }
.kz-szene-an .kz-kopf a { pointer-events: auto; }
.kz-szene-an .kz-kopf .kz-kopf__geraete[data-steig] { visibility: hidden; animation: none; opacity: 1; transform: none; } /* Platzhalter: Lage messen, Geräte der Szene liegen darüber */
.kz-szene-an .kz-show { position: relative; z-index: 1; display: block; margin-top: -100vh; margin-top: -100lvh; height: calc(100vh + 17 * 40vh); height: calc(100lvh + 17 * 40svh); }
.kz-szene { --zone: calc(100vw - 2 * var(--kz-m) - var(--kz-textb) - var(--kz-luft));
  --iw: min(var(--zone), calc((100svh - var(--kz-nav) - 230px) * 1.398)); --ih: calc(var(--iw) / 1.398);
  --il: calc(var(--kz-m) + (var(--zone) - var(--iw)) / 2); --it: calc((100svh + var(--kz-nav)) / 2 - var(--ih) / 2);
  position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: #fff; }
.kz-geraet { position: absolute; z-index: 2; left: var(--il); top: var(--it); width: var(--iw); height: var(--ih); }
.kz-szene__mac, .kz-szene__iphone { position: absolute; z-index: 1; will-change: transform, opacity; pointer-events: none; } /* Deko: das weggeflogene, unsichtbare MacBook lag sonst über „Projekt anfragen“ und fing den Klick ab */ /* Lage und --w setzt das Skript (Platzhalter im Kopf) */
.kz-szene__iphone { z-index: 3; }
.kz-geraet__auftritt { position: relative; width: 100%; height: 100%; }
/* kein will-change am iPad: die 3D-Drehungen heben es beim Animieren ohnehin auf eine eigene Ebene, und so rastert der Browser
   es nach jeder Größenänderung (Kopf → Szene) neu – Bilder und Schrift bleiben scharf */
.kz-szene .kz-ipad { --w: var(--iw); box-shadow: inset 0 0 0 1.5px #3a3a3e, inset 0 0 0 3px #0d0d0f, 0 50px 80px -40px rgba(0,0,0,.45); }
.kz-screen--ki, .kz-screen--kopf { will-change: opacity; }
.kz-szene .kz-regler { position: absolute; z-index: 4; left: min(calc(var(--il) + var(--iw) * .86 - 110px), calc(100vw - var(--kz-m) - var(--kz-textb) - 40px - 220px)); top: calc(var(--it) + var(--ih) * .5 - 30px); } /* mind. 40 px Luft zum Text */
.kz-szene .kz-karten { position: absolute; inset: 0; pointer-events: none; }
.kz-szene .kz-karte { position: absolute; }
.kz-szene .kz-karte--anfrage { right: -28px; top: -34px; white-space: nowrap; }
.kz-szene .kz-karte--tempo { left: -40px; bottom: 16%; }
.kz-szene .kz-karte--geraete { right: -40px; bottom: -30px; }
.kz-szene__rechts { position: absolute; top: var(--kz-nav); bottom: 0; right: var(--kz-m); width: var(--kz-textb); }
.kz-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
@media (max-height: 860px) {
  .kz-szene .kz-text__satz { font-size: 16px; }
  .kz-szene .kz-punkte { gap: 10px; margin-top: 20px !important; }
  .kz-szene .kz-punkt__text { font-size: 14px; }
  .kz-szene .kz-knopf { min-height: 48px; margin-top: 22px; padding-left: 24px; }
  .kz-szene .kz-knopf__kreis { width: 34px; height: 34px; }
}

/* ── Bewegung (nur mit Skript, ohne reduzierte Bewegung) ───────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .kz-kopf [data-zeile] { transform: translateY(105%); animation: kz-hoch 1s var(--ease-quart-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js .kz-kopf .kz-anzeige__k { opacity: 0; transform: translateY(14px) scale(.8); animation: kz-steig .7s var(--ease-quart-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 900ms); }
  .js .kz-kopf [data-steig] { opacity: 0; transform: translateY(18px); animation: kz-steig .8s var(--ease-quart-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 450ms); }
  .kz-szene-an :is(.kz-geraet__auftritt, .kz-szene__auftritt) { opacity: 0; transform: translateY(28px); animation: kz-steig 1s var(--ease-quart-out) .5s forwards; }
  @keyframes kz-hoch { to { transform: none; } }
  @keyframes kz-steig { to { opacity: 1; transform: none; } }
}

/* ── Ablauf wie keytos.de/#ablauf (Jonas, 18.10.2026: Abgleich mit keytos.de): Zweizeiler, vier Schritte als Farbkreise mit
   schwarzer Verbindung (füllt sich beim Auftritt, --linie), darunter die zwei Preise und „Projekt anfragen“. Keine Karten, keine Linien
   außer den Verbindungen. Handy: zwei Spalten, ganz schmal untereinander mit Kreis links. */
.kz-ablauf { display: grid; gap: clamp(40px, 5vw, 72px); padding: clamp(96px, 11vw, 176px) var(--grid-gutter-width); }
@media (min-width: 1020px) { .kz-ablauf { padding-inline: var(--kz-m); } } /* Außenrand wie die Szene; auf Handy/Tablet der normale Seitenrand */
.kz-ablauf :is(h2, h3, p, dl, dd) { margin: 0; }
.kz-ablauf__kopf { display: grid; gap: 16px; }
.kz-ablauf__titel { font-weight: var(--weight-light); font-size: clamp(40px, 5.6vw, 88px); line-height: 1.02; letter-spacing: -.05em; }
.kz-ablauf__zeile { display: block; overflow: hidden; padding: .02em 0 .1em; margin-bottom: -.1em; }
.kz-ablauf__zeile > span { display: block; }
.kz-ablauf__leise { color: var(--color-gray-500); }
.kz-ablauf__satz { max-width: 34em; font-size: 19px; line-height: 1.45; text-wrap: pretty; }
.kz-ablauf__schritte { --d: clamp(64px, 6.4vw, 104px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 0; margin: 0; padding: 0; list-style: none; }
.kz-ablauf__schritt { --linie: 1; position: relative; display: grid; align-content: start; gap: 6px; padding-right: 28px; }
.kz-ablauf__schritt:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--d) / 2 - 1px); left: calc(var(--d) + 14px); right: 14px; height: 2px; border-radius: 1px; background: var(--primitive-black); transform: scaleX(var(--linie)); transform-origin: left; }
.kz-ablauf__kreis { display: grid; place-items: center; width: var(--d); height: var(--d); margin-bottom: 14px; border-radius: 50%; background: var(--farbe); color: var(--primitive-black); }
.kz-ablauf__kreis svg { width: 42%; height: 42%; fill: currentColor; }
.kz-ablauf__schritt h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: var(--weight-bold); letter-spacing: -.02em; line-height: 1.2; }
.kz-ablauf__schritt p { max-width: 16em; font-size: 17px; line-height: 1.45; color: var(--color-gray-800); text-wrap: pretty; }
.kz-ablauf__fuss { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 56px; }
.kz-ablauf__preise { display: flex; flex-wrap: wrap; gap: 24px 64px; margin: 0; }
.kz-ablauf__preise > div { display: grid; gap: 6px; }
.kz-ablauf__preise dt { font-size: 15px; line-height: 1.4; color: var(--color-gray-800); }
.kz-ablauf__preise dd { margin: 0; font-weight: var(--weight-light); font-size: clamp(36px, 3.6vw, 56px); letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.kz-ablauf__preise dd small { font-size: .45em; letter-spacing: -.01em; }
@media (max-width: 899.98px) {
  .kz-ablauf__schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz-ablauf__schritt:nth-child(2)::after { display: none; } /* Zeilenende: keine Verbindung ins Leere */
}
@media (max-width: 479.98px) {
  .kz-ablauf__titel { font-size: clamp(26px, 7.6vw, 34px); } /* „In zwei bis drei Wochen“ bleibt einzeilig */
  .kz-ablauf__schritte { --d: 56px; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .kz-ablauf__schritt { grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; padding-right: 0; }
  .kz-ablauf__kreis { grid-row: span 2; margin-bottom: 0; }
  .kz-ablauf__schritt:not(:last-child)::after, .kz-ablauf__schritt:nth-child(2)::after { display: block; top: calc(var(--d) + 4px); bottom: -16px; left: calc(var(--d) / 2 - 1px); right: auto; width: 2px; height: auto; transform: scaleY(var(--linie)); transform-origin: top; }
}