/* keytos.de/neu/kontakt · nur diese Seite (Jonas, 16.10.2026).
   Aufbau und Maße wie /neu/team, /neu/automatisierung, /neu/angebote: weißer Kopf über den ganzen Bildschirm, Zweizeiler (zweite
   Zeile grau), helle Farbkreise (gleiche Pastelltöne wie dort), Flächen randlos über die ganze Fensterbreite. Schrift und Grautöne
   aus dem Theme squarespace. Keine Schatten, keine Linien, keine Überzeilen. */

.kontakt {
  --rand: var(--grid-gutter-width);
  --flaeche: #f4f4f4;                 /* Grau der Flächen wie /neu/team */
  --abstand: clamp(72px, 9vw, 136px);
  padding: 0 var(--rand);
  overflow-x: clip;
}
.kontakt :is(h1, h2, h3, p, ul) { margin: 0; }
/* Sprung auf #email-bestaetigen („Projekt anfragen“ in der Notch und auf /neu/konzept): Fläche genau am oberen Fensterrand. Das Theme
   hält sonst 68–80 px für eine feste Kopfleiste frei, die es auf /neu nicht gibt (die Notch schwebt über dem Inhalt). */
html:has(#email-bestaetigen) { scroll-padding-top: 0; }
.kt-farbe--blau { --farbe: #dbe8ff; }
.kt-farbe--mint { --farbe: #d7f0e3; }
.kt-farbe--butter { --farbe: #fbefc8; }
.kt-farbe--apricot { --farbe: #fde4d3; }
.kt-farbe--rose { --farbe: #fbdde4; }
.kt-pfeil { display: inline-block; transition: transform .3s var(--ease-quart-out); }

/* Schrift */
.kt-klein { font-size: 15px; line-height: 1.45; color: var(--color-gray-800); }
.kt-klein a { color: inherit; text-underline-offset: 3px; }

/* Knopf wie /neu/automatisierung: schwarz, 56 px */
.kt-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 56px; padding: 0 26px 0 28px; border: 0; 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; cursor: pointer; transition: background-color .18s ease, transform 140ms var(--ease-quart-out); }
@media (hover: hover) { .kt-knopf:hover { background: var(--color-gray-800); } .kt-knopf:hover .kt-pfeil { transform: translateX(5px); } }
@media (prefers-reduced-motion: no-preference) { .kt-knopf:active { transform: scale(.97); } }

/* ── Kopf ───────────────────────────────────────────────────────────────────── */
.kt-kopf { display: flex; flex-direction: column; justify-content: center; gap: 48px; min-height: 100vh; min-height: 100lvh; padding: calc(62px + 32px) 0 48px; } /* taste-skill-ignore: 100vh nur Rückfall für Browser ohne lvh */
.kt-kopf__titel { font-weight: var(--weight-light); font-size: clamp(30px, 9.6vw, 128px); line-height: 1.04; letter-spacing: -.05em; }
.kt-kopf__leise { color: var(--color-gray-500); } /* große Schrift: 3,5:1 reicht ab 24 px (WCAG AA groß), wie auf /neu/team */
.kt-zeile { display: block; overflow: hidden; padding: .02em 0 .1em; margin-bottom: -.1em; }
.kt-zeile > span { display: block; text-wrap: balance; }
.kt-kreise { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.kt-kreise__liste { display: flex; margin: 0; padding: 0 0 0 12px; list-style: none; }
.kt-kreise__liste li { margin-left: -12px; }
.kt-kreis { display: grid; place-items: center; width: 72px; height: 72px; border: 4px solid var(--primitive-white); border-radius: 50%; background: var(--farbe); color: var(--primitive-black); transition: transform var(--dur-fast) var(--ease-cubic-in-out); }
.kt-kreis svg { width: 26px; height: 26px; fill: currentColor; }
.kt-kreis:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .kt-kreis:hover { transform: translateY(-4px); } }
.kt-kreise__text { max-width: 26em; font-size: 17px; font-weight: var(--weight-bold); line-height: 1.35; }
.kt-kreise__info { display: grid; gap: 4px; }
.kt-direkt { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 24px; font-size: 17px; line-height: 1.35; } /* E-Mail und Telefon als Text wie keytos.de/#kontakt – auf /kontakt/ unter dem Feld */
.kt-direkt a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primitive-black); text-underline-offset: 4px; }
.kt-direkt a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (min-width: 1020px) {
  .kt-kopf { gap: 80px; padding-bottom: 64px; }
  .kt-kreise__liste { padding-left: 20px; }
  .kt-kreise__liste li { margin-left: -20px; }
  .kt-kreis { width: 128px; height: 128px; border-width: 6px; }
  .kt-kreis svg { width: 44px; height: 44px; }
  .kt-kreise__text { font-size: 20px; }
}
/* Auftritt beim Laden wie /neu/automatisierung: Zeilen steigen aus ihrer Maske, der Rest folgt. Ohne Skript sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-zeile] { transform: translateY(105%); animation: kt-hoch 1s var(--ease-quart-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js [data-steig] { opacity: 0; transform: translateY(18px); animation: kt-steig .8s var(--ease-quart-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 450ms); }
  @keyframes kt-hoch { to { transform: none; } }
  @keyframes kt-steig { to { opacity: 1; transform: none; } }
  /* E-Mail-Feld (22.10.2026): kurzer Auftritt nur nach Zeit, fertig nach höchstens 0,8 s; „backwards“ statt „forwards“, damit nach
     dem Auftritt kein Animations-Endzustand die GSAP-Szene beim Absenden überdeckt. Ohne Skript (.js fehlt) sofort sichtbar. */
  .js [data-ein] { animation: kt-ein .5s var(--ease-quart-out) backwards; animation-delay: calc(var(--i, 0) * 60ms + 150ms); }
  @keyframes kt-ein { from { opacity: 0; transform: translateY(14px); } }
}

/* ── /kontakt/ (22.10.2026): E-Mail-Feld und Knopf im Erstbild (390×844 bis 1920×1080), nichts hängt am Scrollen. Nur für diese Seite
   (Modifikatoren --kontakt) – /kontakt/anfrage/ und /kontakt/danke/ nutzen dieselben Grundregeln und bleiben, wie sie sind.
   Kopf ohne Bildschirmhöhe und enger, Kreise am Handy 56 px (Trefffläche ≥ 44), die Fläche ohne Bildschirmhöhe mit dem Feld oben in
   seiner Hälfte; E-Mail und Telefon direkt stehen jetzt unter dem Feld. Die Sprungmarke landet direkt unter der Notch. ── */
.kt-kopf--kontakt { justify-content: flex-start; gap: 24px; min-height: 0; padding: calc(12px + var(--notch-h) + 28px) 0 28px; }
.kt-kopf--kontakt .kt-kreis { width: 56px; height: 56px; border-width: 3px; }
.kt-kopf--kontakt .kt-kreis svg { width: 22px; height: 22px; }
.kt-kopf--kontakt .kt-kreise__liste { padding-left: 10px; }
.kt-kopf--kontakt .kt-kreise__liste li { margin-left: -10px; }
.kt-kopf--kontakt .kt-kreise__text { font-size: 16px; }
.kt-buehne--kontakt { scroll-margin-top: calc(12px + var(--notch-h) + 8px); }
.kt-buehne--kontakt .kt-buehne__innen { grid-template-rows: none; min-height: 0; }
.kt-buehne--kontakt .kt-buehne__eingabe { justify-items: center; align-content: start; gap: 20px; padding: 32px var(--rand) 36px; } /* Feld oben, nicht senkrecht mittig */
.kt-buehne--kontakt .kt-buehne__eingabe > * { grid-area: auto; }
.kt-buehne--kontakt .kt-buehne__text { padding: 56px var(--rand); }
.kt-eingabe__stapel { display: grid; justify-items: center; width: 100%; }
.kt-eingabe__stapel > * { grid-area: 1 / 1; } /* Feld und „Mail ist raus“ in derselben Zelle */
@media (min-width: 744px) {
  .kt-kopf--kontakt .kt-kreis { width: 72px; height: 72px; border-width: 4px; }
  .kt-kopf--kontakt .kt-kreis svg { width: 26px; height: 26px; }
  .kt-kopf--kontakt .kt-kreise__liste { padding-left: 12px; }
  .kt-kopf--kontakt .kt-kreise__liste li { margin-left: -12px; }
  .kt-kopf--kontakt .kt-kreise__text { font-size: 17px; }
}
@media (min-width: 1020px) {
  .kt-kopf--kontakt { gap: 36px; padding: calc(12px + var(--notch-h) + 40px) 0 44px; }
  .kt-kopf--kontakt .kt-kreise__liste { padding-left: 16px; }
  .kt-kopf--kontakt .kt-kreise__liste li { margin-left: -16px; }
  .kt-kopf--kontakt .kt-kreis { width: 96px; height: 96px; border-width: 5px; }
  .kt-kopf--kontakt .kt-kreis svg { width: 34px; height: 34px; }
  .kt-buehne--kontakt .kt-buehne__eingabe { padding: 48px 48px 56px; }
  .kt-buehne--kontakt .kt-buehne__text { padding: 56px var(--rand) 56px 64px; }
}

/* ── E-Mail-Fläche (Jonas, 16.10.2026): ganzer Bildschirm, zweigeteilt – links mittig nur das Feld (auf Blau), rechts die
   Schritte nach der Bestätigung (auf Grau). Seit 18.10.2026 keine Scroll-Bühne mehr: die Schritte stehen da, sobald die Fläche
   erreicht ist; ein kurzer Auftritt und eine Ruhe-Welle durch die Farbkreise (GSAP, index.php) machen sie lebendig. ── */
.kt-buehne { margin: 0 calc(var(--rand) * -1); }
.kt-buehne__innen { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; min-height: 100lvh; } /* Spalte nie breiter als der Bildschirm (Eingabefeld hat eine Eigenbreite) */ /* taste-skill-ignore: 100vh nur Rückfall für Browser ohne lvh */
.kt-buehne__eingabe { display: grid; place-items: center; padding: calc(12px + var(--notch-h) + 40px) var(--rand) 56px; background: var(--farbe); }
.kt-buehne__text { display: grid; align-content: center; gap: 40px; padding: 56px var(--rand); background: var(--flaeche); }
.kt-buehne__titel { font-weight: var(--weight-light); font-size: clamp(34px, 4.2vw, 64px); letter-spacing: -.05em; line-height: 1.04; }
.kt-buehne__titel > span { display: block; }
@media (min-width: 1020px) {
  .kt-buehne__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
  .kt-buehne__eingabe { padding: 64px 48px; } /* gleich oben und unten: Feld genau in der Mitte seiner Hälfte */
  .kt-buehne__text { padding: calc(12px + var(--notch-h) + 32px) var(--rand) 56px 64px; }
}

/* Linke Hälfte: Beschriftung, das Feld als weiße Pille mit eingesetztem runden Knopf und zwei Haken-Vorteile – alles mittig
   (Jonas, 16.10.2026: „Neue Anfrage“-Karte entfernt, Inhalt zentriert). */
.kt-mail { display: grid; gap: 16px; width: 100%; max-width: 520px; text-align: center; }
.kt-mail__titel { font-weight: var(--weight-light); font-size: clamp(30px, 3vw, 44px); letter-spacing: -.04em; line-height: 1.1; }
.kt-mail__zeile { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: var(--primitive-white); }
.kt-mail__zeile:focus-within { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.kt-mail__zeile:has([aria-invalid="true"]) { outline: 2px solid #a3201a; outline-offset: 3px; }
.kt-mail__feld { flex: 1; width: 0; min-width: 0; min-height: 56px; padding: 0 8px 0 18px; text-align: left; border: 0; background: transparent; color: var(--primitive-black); font: 18px/1.3 var(--font-sans); }
.kt-mail__feld:focus-visible { outline: none; }
.kt-mail__feld::placeholder { color: var(--color-gray-800); }
.kt-mail__knopf { flex: none; min-height: 56px; padding: 0 22px 0 24px; }
.kt-mail__vorteile { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 16px; font-weight: var(--weight-bold); }
.kt-mail__vorteile li { position: relative; padding-left: 30px; }
.kt-mail__vorteile li::before { content: ""; position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; background: var(--primitive-white); }
.kt-mail__vorteile li::after { content: ""; position: absolute; left: 7px; top: 6px; width: 8px; height: 4px; border-left: 2px solid var(--primitive-black); border-bottom: 2px solid var(--primitive-black); transform: rotate(-45deg); }
@media (max-width: 374.98px) { .kt-mail__knopf { padding: 0 16px; } .kt-mail__feld { padding-left: 12px; font-size: 16px; } }
.kt-karte__status { min-height: 1.45em; font-size: 15px; line-height: 1.45; }
.kt-karte__status:empty { min-height: 0; margin-top: -16px; } /* keine Lücke, solange nichts zu sagen ist */
.kt-karte__status.ist-fehler { color: #a3201a; } /* 6,4:1 auf dem Blau */
.kt-karte__status a { color: inherit; text-underline-offset: 3px; }
.kt-mail__knopf:disabled { cursor: progress; opacity: .6; } /* während die Mail rausgeht */

/* Mail ist raus (Jonas, 18.10.2026): an der Stelle des Feldes (gleiche Zelle) der Brief im weißen Kreis mit schwarzem Haken, der
   Zweizeiler wie überall (zweite Zeile grau), die Adresse als weiße Pille, „Andere Adresse eingeben“ als weiße Pille. Ruhezustand =
   Endbild (Brief im Umschlag, Klappe zu); die Szene dorthin spielt GSAP (index.php). */
.kt-buehne__eingabe > * { grid-area: 1 / 1; }
.kt-gesendet { display: grid; justify-items: center; gap: 20px; width: 100%; max-width: 560px; text-align: center; }
.kt-gesendet[hidden], .kt-mail[hidden] { display: none; }
.kt-gesendet:focus { outline: none; } /* bekommt nach dem Wechsel den Fokus (Vorlesen), ohne Rahmen */
.kt-gesendet__bild { position: relative; display: grid; place-items: center; width: 140px; height: 140px; margin-bottom: 4px; border-radius: 50%; background: var(--primitive-white); }
.kt-brief { width: 94px; height: 94px; overflow: visible; fill: none; stroke: var(--primitive-black); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.kt-brief__hinten, .kt-brief__klappe-auf { fill: #b8cdf2; }
.kt-brief__blatt rect { fill: var(--primitive-white); }
.kt-brief__vorne { fill: var(--farbe); }
.kt-brief__klappe-zu { fill: #c9dafa; }
.kt-brief__klappe-auf { visibility: hidden; } /* nur während der Szene offen */
.kt-gesendet__haken { position: absolute; right: -6px; bottom: -2px; display: grid; place-items: center; width: 50px; height: 50px; border: 5px solid var(--farbe); border-radius: 50%; background: var(--primitive-black); }
.kt-gesendet__haken svg { width: 26px; height: 26px; fill: none; stroke: var(--primitive-white); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.kt-gesendet__haken path { stroke-dasharray: 18; }
.kt-gesendet__titel { font-weight: var(--weight-light); font-size: clamp(28px, 3vw, 44px); letter-spacing: -.04em; line-height: 1.1; }
.kt-gesendet__titel .kt-kopf__leise { color: #6e6e73; } /* Grau der zweiten Zeile, auf dem Blau dunkler (4:1 statt 2,8:1) */
@media (max-width: 374.98px) { .kt-gesendet__titel { font-size: 25px; } } /* zweite Zeile bleibt auch auf 320 px einzeilig */
.kt-gesendet__text { max-width: 30em; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.kt-gesendet__adresse { display: inline-block; max-width: 100%; margin: 2px 0; padding: 0 12px; border-radius: 999px; background: var(--primitive-white); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.kt-gesendet__zurueck { display: inline-flex; align-items: center; min-height: 52px; margin-top: 4px; padding: 0 24px; border-radius: 999px; background: var(--primitive-white); color: var(--primitive-black); font-size: 16px; font-weight: var(--weight-bold); text-decoration: none; transition: background-color .18s ease, transform 140ms var(--ease-quart-out); }
.kt-gesendet__zurueck:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (hover: hover) { .kt-gesendet__zurueck:hover { background: #f1f5fd; } }
@media (prefers-reduced-motion: no-preference) { .kt-gesendet__zurueck:active { transform: scale(.97); } }
.kt-falle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* Bot-Falle, für Menschen unsichtbar */

/* ── Anfrage (/neu/kontakt/anfrage/, Jonas 16.10.2026): dieselbe Fläche – links auf Blau ein Schritt nach dem anderen, rechts
   alle Schritte, erledigte mit Haken im Farbkreis (anklickbar zum Ändern), der aktuelle mit schwarzem Ring. ── */
.kt-schritt { display: grid; gap: 16px; scroll-margin-top: calc(12px + var(--notch-h) + 16px); } /* beim Schrittwechsel nicht unter die Notch rollen */
.kt-schritt[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .kt-schritt.ist-neu { animation: kt-rein .6s var(--ease-quart-out); }
  .kt-schritt.ist-wackeln :is(.kt-mail__zeile, .kt-nachricht, .kt-pakete__liste) { animation: kt-wackel .5s var(--ease-quart-out); }
  @keyframes kt-rein { from { opacity: 0; transform: translateY(18px); } }
  @keyframes kt-wackel { 20% { transform: translateX(-9px); } 45% { transform: translateX(7px); } 70% { transform: translateX(-4px); } 90% { transform: translateX(2px); } }
}
.kt-schritt__weiter { justify-self: center; }
/* Abschnitte mit mehreren Fragen (Inhalte wie /kontaktformular/): je Frage eine kleine Überschrift über dem gewohnten Feld */
.kt-feld { display: grid; gap: 10px; min-width: 0; margin: 8px 0 0; padding: 0; border: 0; }
.kt-feld[hidden] { display: none; }
.kt-frage, .kt-pakete legend.kt-frage { margin: 0 0 10px; padding: 0; font-size: 17px; font-weight: var(--weight-bold); line-height: 1.35; }
.kt-feld > .kt-frage { margin: 0; }
.kt-frage small { font-size: 15px; font-weight: var(--weight-regular); color: var(--color-gray-800); }
.kt-mail__titel:focus { outline: none; } /* bekommt beim Schrittwechsel den Fokus (Vorlesen), ohne Rahmen */
.kt-mail__feld[readonly] { color: var(--color-gray-800); }
/* Paket: sechs Angebote als weiße Felder, das gewählte schwarz */
.kt-pakete { display: grid; min-width: 0; margin: 0; padding: 0; border: 0; }
.kt-pakete legend { width: 100%; margin-bottom: 16px; padding: 0; }
.kt-pakete__liste { display: grid; gap: 8px; }
@media (min-width: 480px) { .kt-pakete__liste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kt-paket { position: relative; display: grid; align-content: center; gap: 2px; min-height: 64px; padding: 12px 18px; border-radius: 24px; background: var(--primitive-white); text-align: left; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.kt-paket input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.kt-paket__name { font-size: 17px; font-weight: var(--weight-bold); line-height: 1.25; }
.kt-paket__preis { font-size: 15px; line-height: 1.35; color: var(--color-gray-800); }
.kt-paket:has(input:checked) { background: var(--primitive-black); color: var(--primitive-white); }
.kt-paket:has(input:checked) .kt-paket__preis { color: #d4d4d4; }
.kt-paket:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (hover: hover) { .kt-paket:not(:has(input:checked)):hover { background: #eef3fc; } }
/* Nachricht: weißes Feld mit Wortzähler und eingesetztem Knopf */
.kt-nachricht { display: grid; gap: 8px; padding: 8px; border-radius: 28px; background: var(--primitive-white); text-align: left; }
.kt-nachricht:focus-within { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.kt-nachricht:has([aria-invalid="true"]) { outline: 2px solid #a3201a; outline-offset: 3px; }
.kt-nachricht__feld { width: 100%; min-height: 168px; padding: 12px 14px 0; border: 0; resize: vertical; background: transparent; color: var(--primitive-black); font: 18px/1.45 var(--font-sans); }
.kt-nachricht__feld:focus-visible { outline: none; }
.kt-nachricht__feld::placeholder { color: var(--color-gray-800); }
.kt-nachricht__fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 14px; }
.kt-nachricht__zaehler { font-size: 15px; color: var(--color-gray-800); font-variant-numeric: tabular-nums; }
.kt-nachricht__zaehler.ist-fehler { color: #a3201a; }
/* Rechts: Stand der Schritte */
.kt-stand__ziel { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.kt-stand__ziel[href] { cursor: pointer; }
.kt-stand__ziel:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; border-radius: 8px; }
@media (hover: hover) { .kt-stand__ziel[href]:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } }
.kt-stand .kt-folge__schritt::before { box-sizing: border-box; background: #e2e2e2; transition: background-color .35s var(--ease-quart-out); }
.kt-stand .kt-folge__schritt::after { opacity: 0; transform: rotate(-45deg) scale(.3); transition: opacity .2s ease, transform .4s var(--ease-quart-out); }
.kt-stand .kt-folge__schritt:not(.ist-erledigt):not(.ist-aktuell) h3 { color: var(--color-gray-800); }
.kt-stand .ist-aktuell::before { border: 2px solid var(--primitive-black); background: var(--primitive-white); }
.kt-stand .ist-erledigt::before { background: var(--farbe); }
.kt-stand .ist-erledigt::after { opacity: 1; transform: rotate(-45deg); }
.kt-stand .ist-erledigt p { color: var(--primitive-black); overflow-wrap: anywhere; }

/* Die Schritte nach der Bestätigung: Haken im Farbkreis wie die Punkte auf /neu/angebote */
.kt-folge { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.kt-folge__schritt { position: relative; display: grid; gap: 6px; padding-left: 48px; }
.kt-folge__schritt::before { content: ""; position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%; background: var(--farbe); transform: scale(var(--kreis, 1)); } /* --kreis/--haken: Bewegung aus GSAP */
.kt-folge__schritt::after { content: ""; position: absolute; left: 11px; top: 9px; width: 11px; height: 6px; border-left: 2px solid var(--primitive-black); border-bottom: 2px solid var(--primitive-black); transform: rotate(-45deg) scale(var(--haken, 1)); }
.kt-folge__schritt h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: var(--weight-bold); letter-spacing: -.02em; line-height: 1.2; }
.kt-folge__schritt p { max-width: 34em; font-size: 17px; line-height: 1.5; color: var(--color-gray-800); text-wrap: pretty; }