@font-face {
  font-family: "DM Serif Display";
  src: url("fonts/dm-serif-display-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var.woff2") format("woff2-variations"), url("fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --beton: #eceeef;
  --white: #ffffff;
  --anthrazit: #262c31;
  --anthrazit-hell: #2f363c;
  --schiefer: #4a535a;
  --text-dunkel: #d5dbdf;
  --meta-dunkel: #bcc4ca;
  --tinte: #171b1e;
  --gelb: #ffc21a;
  --max: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Fensterfläche dunkel wie der Footer: Safari zeigt sie in der runden Fensterecke unter der Scrollleiste.
   body bleibt hell. Kein Gummiband-Effekt, sonst blitzt oben über der hellen Bühne Dunkel auf. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--anthrazit); overscroll-behavior-y: none; }
body {
  background: var(--beton);
  color: var(--tinte);
  font: 400 18px/1.6 "Archivo", system-ui, sans-serif;
  font-stretch: 100%;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }
::selection { background: var(--gelb); color: var(--tinte); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Typo-System: Schrift über Schrift */
.display {
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.03em;
}
.sub {
  font-weight: 600;
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
}
.head { margin-bottom: clamp(40px, 5vw, 64px); }
.head .display { font-size: clamp(48px, 7vw, 96px); }
.head .sub { font-size: clamp(15px, 1.4vw, 19px); color: var(--schiefer); margin-top: 10px; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--schiefer); max-width: 56ch; text-wrap: pretty; }
.muted { color: var(--schiefer); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 26px;
  background: var(--gelb); color: var(--tinte);
  font: 600 16px/1 "Archivo", sans-serif; letter-spacing: -.005em; text-decoration: none;
  border: 0; border-radius: 8px; cursor: pointer;
  transition: transform .1s ease-out, background-color .2s;
}
.btn:hover { background: #ffd04d; }
.btn:active { transform: scale(.97); }
.btn-dark { background: var(--anthrazit); color: var(--white); }
.btn-dark:hover { background: var(--tinte); }
.btn-line { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn-line:hover { background: rgba(255,255,255,.08); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 15px; }

/* Header */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: var(--white);
  transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s;
}
/* Höhe 76 px (zuvor 84, auf Simons Wunsch vom 31.10. rund 10 % flacher) */
.header .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.header.solid, .header.always {
  background: rgba(255,255,255,.72); color: var(--tinte); box-shadow: 0 1px 0 rgba(23,27,30,.06);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
@media (prefers-reduced-transparency: reduce) { .header.solid, .header.always { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.brand {
  font-weight: 900; font-stretch: 125%; font-size: 22px; letter-spacing: -.01em;
  text-transform: uppercase; text-decoration: none; line-height: 1;
}
.brand span { color: var(--gelb); }
.nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.nav a:not(.btn) {
  text-decoration: none; font-weight: 500; font-size: 16px; letter-spacing: -.01em; opacity: .8;
}
.nav a:not(.btn):hover { opacity: 1; }

/* Abschnitte */
.section { padding: clamp(80px, 10vw, 144px) 0; }
.section.white { background: var(--white); }


/* CTA + Footer */
.cta { background: var(--anthrazit); color: var(--white); position: relative; overflow: hidden; }
.cta .wrap { position: relative; }
.cta .display { font-size: clamp(48px, 8vw, 120px); }
.cta .display .y { color: var(--gelb); }
.cta .lead { color: var(--text-dunkel); margin-top: 24px; }
.cta .hero-actions { margin-top: 40px; }
.footer { background: var(--anthrazit); color: var(--meta-dunkel); font-size: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 32px; padding-bottom: 32px; }
.footer .brand { color: var(--white); font-size: 18px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--white); }

/* Unterseiten */
.page-top { padding-top: 76px; }
.page-head { background: var(--anthrazit); color: var(--white); padding: clamp(64px, 8vw, 112px) 0 clamp(48px, 6vw, 80px); }
.page-head .display { font-size: clamp(52px, 8vw, 112px); }
.page-head .display .y { color: var(--gelb); }
.page-head .lead { color: var(--text-dunkel); margin-top: 20px; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 80px); }
.channel { display: block; padding: 24px 0; border-bottom: 2px solid var(--beton); text-decoration: none; }
.channel small { display: block; color: var(--schiefer); font-weight: 500; font-size: 15px; margin-bottom: 4px; }
.channel strong { font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.02em; }
a.channel:hover strong { color: #7a5a00; }
.form { background: var(--beton); border-radius: 4px; padding: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field textarea {
  font: inherit; font-size: 16px; color: var(--tinte); padding: 13px 14px;
  border: 0; border-radius: 2px; background: var(--white); box-shadow: inset 0 0 0 1px #d3d7da;
}
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--anthrazit); }
.field textarea { min-height: 140px; resize: vertical; }
.check { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--schiefer); }
.check input { margin-top: 4px; accent-color: var(--anthrazit); }

.legal { max-width: 68ch; }
.legal h2 { font-weight: 700; font-size: 24px; margin: 40px 0 10px; line-height: 1.2; letter-spacing: -.015em; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: #2f363c; text-wrap: pretty; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; margin-top: 8px; }
.todo { background: #fff1c4; padding: 0 4px; }

/* Reinkommen beim Scrollen */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* Leistungen „Choreografie“: erst die Karten, dann Text, dann Handys, Treffer und Foto einzeln. Ausgelöst über .los (main.js) */
.intro .hl-spur { scroll-snap-type: none; }
#leistungen .hl-steuer { transition: opacity .6s var(--ease) .7s; }
#leistungen:not(.los) .hl-steuer { opacity: 0; }
#leistungen .hl-karte { transition: opacity .7s var(--ease), translate .9s var(--ease); transition-delay: calc(min(var(--i), 2) * 90ms); }
#leistungen .hl-karte:nth-child(1) { --i: 0; }
#leistungen .hl-karte:nth-child(2) { --i: 1; }
#leistungen .hl-karte:nth-child(n+3) { --i: 2; }
#leistungen:not(.los) .hl-karte { opacity: 0; translate: 0 32px; }
#leistungen .hl-text { transition: opacity .8s var(--ease), translate .8s var(--ease); transition-delay: calc(260ms + var(--i) * 90ms); }
#leistungen:not(.los) .hl-text { opacity: 0; translate: 0 18px; }
#leistungen .handy { transition: opacity .6s var(--ease), translate 1.1s cubic-bezier(.16, 1, .3, 1); }
#leistungen .handy:nth-child(1) { transition-delay: 420ms; }
#leistungen .handy:nth-child(2) { transition-delay: 520ms; }
#leistungen .handy:nth-child(3) { transition-delay: 620ms; }
#leistungen:not(.los) .handy { opacity: 0; translate: 0 80px; }
#leistungen .treffer { transition: opacity .7s var(--ease), translate .8s var(--ease); }
#leistungen .treffer:nth-child(1) { transition-delay: 600ms; }
#leistungen .treffer:nth-child(2) { transition-delay: 720ms; }
#leistungen:not(.los) .treffer { opacity: 0; translate: 0 -16px; }
#leistungen .hl-ruhig span { transition: translate 1.1s var(--ease) .5s; }
#leistungen:not(.los) .hl-ruhig span { translate: 0 70%; }
#leistungen .hl-foto img { transition: scale 1.8s var(--ease) .3s; }
#leistungen:not(.los) .hl-foto img { scale: 1.12; }

/* Ablauf „Treppe“: die vier Felder steigen nacheinander auf, die Fotos zoomen dabei sanft zurück */
#ablauf .welle-feld:nth-child(1) { --i: 0; }
#ablauf .welle-feld:nth-child(2) { --i: 1; }
#ablauf .welle-feld:nth-child(3) { --i: 2; }
#ablauf .welle-feld:nth-child(4) { --i: 3; }
#ablauf .welle-feld { transition: opacity .9s var(--ease), translate 1.1s var(--ease); transition-delay: calc(80ms + var(--i) * 110ms); }
#ablauf:not(.los) .welle-feld { opacity: 0; translate: 0 90px; }
#ablauf .welle-bild { transition: scale 1.6s var(--ease); transition-delay: calc(80ms + var(--i) * 110ms); }
#ablauf:not(.los) .welle-bild { scale: 1.12; }

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

@media (max-width: 960px) {
  .contact-grid, .split, .cases { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav a:not(.btn) { display: none; }
  .header .wrap { height: 61px; }
  .page-top { padding-top: 61px; }
  .form { grid-template-columns: 1fr; }
}
.legal h1 { font-weight: 700; font-size: clamp(44px, 6vw, 80px); line-height: 1.02; letter-spacing: -.03em; margin-bottom: 48px; }
.btn { text-align: center; }


/* Navigation: Hover hebt an */
.nav a:not(.btn) { position: relative; display: inline-block; transition: opacity .2s; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--gelb);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav a:not(.btn):hover { opacity: 1; }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
/* Handy: nur Logo und Kontakt. Steht hier, weil die Regel darüber display setzt und sonst die Links aus dem Bild laufen */
@media (max-width: 640px) { .nav a:not(.btn) { display: none; } }

/* Unterseiten: Kopfleiste mit dunkler Schrift */
.header { color: var(--tinte); }

/* ===== Startseite: Fallstudien, Angebot, Ablauf ===== */
.title {
  font-weight: 700;
  font-size: clamp(36px, 4.8vw, 68px); line-height: 1.04; letter-spacing: -.03em;
}
.title em { font-style: normal; color: var(--gelb); }
.night { background: var(--anthrazit); color: var(--white); }
.night .intro { color: var(--text-dunkel); font-size: clamp(18px, 1.5vw, 21px); max-width: 58ch; margin-top: 28px; text-wrap: pretty; }
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); margin-top: clamp(48px, 6vw, 88px); }
.case-shot { display: block; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px rgba(0,0,0,.35); }
.case-shot img, .case-shot video { display: block; aspect-ratio: 16 / 10; width: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.case-shot:hover img, .case-shot:hover video { transform: scale(1.02); }
.case-meta {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 22px;
  font-weight: 500; font-size: 15px; color: var(--meta-dunkel);
}
.case h3 { font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.02em; margin-top: 10px; }
.case p { color: var(--text-dunkel); margin-top: 14px; max-width: 52ch; }
.case-link {
  display: inline-block; margin-top: 18px; font-weight: 600; font-size: 16px;
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: var(--gelb); text-decoration-thickness: 2px; color: var(--white);
}
.case-link:hover { color: var(--gelb); }
.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.offer { list-style: none; }
.offer li { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; padding: 26px 0; border-top: 1px solid rgba(23,27,30,.14); }
.offer li:last-child { border-bottom: 1px solid rgba(23,27,30,.14); }
.offer h3 { font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.offer p { color: var(--schiefer); font-size: 17px; }
.cta .title { font-size: clamp(40px, 6.4vw, 96px); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--anthrazit); }
::-webkit-scrollbar-thumb { background: #4a535a; border-radius: 6px; border: 3px solid var(--anthrazit); }
::-webkit-scrollbar-corner { background: var(--anthrazit); }
.btn:focus-visible { outline-color: var(--white); box-shadow: 0 0 0 6px var(--tinte); }
@media (max-width: 640px) {
  .offer li { grid-template-columns: 1fr; gap: 6px; }
  .case-meta { flex-direction: column; gap: 4px; }
}
.offer p, .case p, .welle-text p { text-wrap: pretty; }
.cta { background: var(--anthrazit); }
/* Helle Strecke: Leistungen, Ablauf, Über mich auf einer Fläche, getrennt durch Haarlinien */
#leistungen, #ablauf, #ueber-mich { background: var(--white); }
#ablauf .wrap, #ueber-mich .wrap { border-top: 1px solid rgba(23,27,30,.1); }
#ablauf .wrap { padding-top: clamp(80px, 10vw, 144px); }
#ablauf { padding-top: 0; }
@media (max-width: 960px) {
  .cases, .split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .cta .title { font-size: 9vw; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 640px) { .legal h1 { font-size: 8.6vw; hyphens: auto; } }

/* ===== Termin buchen (Cal.com) – kontakt.html, Reiter „Termin“ ===== */
.termin-lead { color: var(--schiefer); margin-top: 12px; max-width: 56ch; }
.termin-box { margin-top: clamp(24px, 3vw, 36px); background: var(--beton); border-radius: 12px; min-height: 220px; }
.termin-box.is-live { background: transparent; min-height: 520px; overflow: auto; }
.termin-fallback { padding: clamp(24px, 4vw, 48px); }
.termin-fallback p { max-width: 52ch; font-size: 20px; line-height: 1.45; }
.termin-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
@media (max-width: 640px) { .termin-actions .btn { width: 100%; } }

/* ===== Kontakt: Reiter „Nachricht“ / „Termin“ (kontakt.html) ===== */
.register { min-width: 0; }
.tabs { display: flex; gap: 6px; align-items: flex-end; }
.tab {
  position: relative; flex: 0 1 240px; text-align: left; cursor: pointer;
  font: inherit; color: var(--schiefer); background: var(--beton);
  border: 1px solid transparent; border-bottom: 0; border-radius: 12px 12px 0 0; padding: 16px 20px 14px;
  transition: background-color .2s, color .2s, transform .35s var(--ease);
}
.tab:hover { background: #e4e6e8; color: var(--tinte); }
.tab b { display: block; font-weight: 700; font-size: 19px; letter-spacing: -.015em; line-height: 1.2; color: var(--tinte); }
.tab span { display: block; font-size: 14px; margin-top: 2px; }
/* Aktiver Reiter geht nahtlos ins Blatt über, gelbe Kante wie ein Lesezeichen */
/* Alle Reiter gleich hoch; der inaktive sinkt per transform hinter das Blatt, damit beim Wechsel nichts springt */
.tab:not([aria-selected="true"]) { transform: translateY(6px); }
.tab[aria-selected="true"] { background: var(--white); border-color: #dcdfe1; margin-bottom: -1px; z-index: 2; }
.tab[aria-selected="true"]::before {
  content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 4px;
  background: var(--gelb); border-radius: 0 0 3px 3px;
}
.tab:focus-visible { outline-offset: -4px; }
.sheet {
  position: relative; background: var(--white); border: 1px solid #dcdfe1; border-radius: 0 14px 14px 14px;
  padding: clamp(28px, 4vw, 56px); box-shadow: 0 24px 48px -36px rgba(23,27,30,.28);
}
.panel:focus-visible { outline-offset: 8px; }
/* Beide Panels liegen übereinander in derselben Zelle: das Blatt behält seine Höhe, der Wechsel ist eine Überblendung */
.sheet { display: grid; z-index: 1; }
.panel { grid-area: 1 / 1; transition: opacity .32s var(--ease), transform .32s var(--ease), visibility 0s; }
.panel[hidden] { display: block; visibility: hidden; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s .18s; }
@media (prefers-reduced-motion: reduce) { .panel, .panel[hidden], .tab { transform: none; } }
.kdanke[hidden], .kform[hidden] { display: none; }
.sheet-title {
  font-weight: 700;
  font-size: clamp(26px, 2.5vw, 34px); line-height: 1.15; letter-spacing: -.025em; text-wrap: balance;
}
.kform { display: grid; gap: 22px; margin-top: clamp(24px, 3vw, 36px); }
.kfield { display: grid; gap: 10px; align-content: start; scroll-margin-top: 120px; }
.kfield label { font-size: 17px; font-weight: 500; color: #4a5258; }
.kfield input, .kfield textarea {
  font: inherit; font-size: 17px; color: var(--tinte); width: 100%; padding: 16px 18px;
  background: var(--white); border: 1.5px solid #e2e5e7; border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.kfield textarea { min-height: 168px; resize: vertical; line-height: 1.5; }
.kfield input:hover, .kfield textarea:hover { border-color: #c9ced2; }
.kfield input:focus, .kfield textarea:focus { outline: none; border-color: var(--anthrazit); box-shadow: 0 0 0 4px rgba(38,44,49,.08); }
.kfield [aria-invalid="true"] { border-color: #b3261e; }
.kfehler { color: #b3261e; font-size: 15px; line-height: 1.4; }
.kfehler:empty { display: none; }
.kfield .kcheck { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; color: #565f66; cursor: pointer; }
.kfield .kcheck input[type="checkbox"] { width: 18px; height: 18px; padding: 0; margin: 0; accent-color: var(--anthrazit); cursor: pointer; }
.kfield input:disabled { background: #eef0f1; border-color: #e2e5e7; color: #8a9298; cursor: not-allowed; }
.kfield input::placeholder { color: #6b747b; }
.khp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kturnstile:empty { display: none; }
.khinweis { color: #6b747b; font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.khinweis a { color: #2f5bd3; font-weight: 600; text-underline-offset: 3px; }
.ksenden {
  font: inherit; font-weight: 600; font-size: 18px; cursor: pointer; width: 100%; min-height: 64px;
  background: var(--gelb); color: var(--tinte); border: 0; border-radius: 8px; letter-spacing: -.005em;
  transition: background-color .2s, transform .16s var(--ease);
}
.ksenden:hover { background: #ffd04d; }
.ksenden:active { transform: scale(.98); transition-duration: .08s; }
.ksenden:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
.ksenden[disabled] { opacity: .6; cursor: progress; }
.kstatus { font-size: 16px; color: #b3261e; }
.kstatus:empty { display: none; }
.kdanke p { margin-top: 14px; color: var(--schiefer); }
@media (max-width: 640px) {
  .tabs { gap: 4px; }
  .tab { flex: 1 1 0; padding: 14px 14px 12px; border-radius: 10px 10px 0 0; }
  .tab[aria-selected="true"]::before { left: 14px; right: 14px; }
  .tab b { font-size: 15px; white-space: nowrap; }
  .sheet { border-radius: 0 0 14px 14px; padding: 28px 20px; }
}

/* ===== Kontakt kompakt: alles auf einem Bildschirm, Footer unten (kontakt.html) ===== */
.kontakt-seite { min-height: 100vh; display: flex; flex-direction: column; }
.kontakt-seite main { flex: 1; background: var(--white); display: flex; flex-direction: column; justify-content: center; }
.kontakt-fit { background: var(--white); padding: clamp(28px, 4vh, 48px) 0; }
.kontakt-fit .contact-grid { grid-template-columns: 1fr 1.35fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.kontakt-links .display { font-size: clamp(36px, 3.6vw, 52px); line-height: 1.05; text-wrap: balance; }
.kontakt-links .display .y { color: #8a6400; }
.kontakt-links .lead { font-size: 17px; margin-top: 14px; }
.kontakt-links .channel { padding: 14px 0; border-bottom-width: 1px; }
.kontakt-links .lead + .channel { margin-top: 20px; border-top: 1px solid var(--beton); }
.kontakt-links .channel small { font-size: 14px; margin-bottom: 2px; }
.kontakt-links .channel strong { font-size: clamp(19px, 1.6vw, 22px); }
.kontakt-fit .tab { padding: 12px 18px 10px; }
.kontakt-fit .tab b { font-size: 17px; }
.kontakt-fit .tab span { font-size: 13px; }
.kontakt-fit .sheet { padding: 24px 28px 28px; }
.kontakt-fit .sheet-title { font-size: 24px; }
.kontakt-fit .kform { gap: 14px; margin-top: 18px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kontakt-fit .kform > * { grid-column: 1 / -1; }
/* Zeile 1: Name, E-Mail, Telefon zu je einem Drittel; Zeile 2: Firma und Website je zur Hälfte */
.kontakt-fit .kform > .kfield:nth-child(-n+3) { grid-column: span 2; }
.kontakt-fit .kform > .kfield.khalb { grid-column: span 3; }
.kontakt-fit .kfield { gap: 6px; }
.kontakt-fit .kfield label { font-size: 15px; }
.kontakt-fit .kfield input, .kontakt-fit .kfield textarea { font-size: 16px; padding: 11px 14px; border-radius: 10px; }
.kontakt-fit .kfield textarea { min-height: 104px; }
.kontakt-fit .khinweis { font-size: 14px; }
.kontakt-fit .ksenden { min-height: 52px; font-size: 17px; }
.kontakt-fit .termin-box { margin-top: 18px; }
.kontakt-fit .termin-box.is-live { min-height: 420px; max-height: 60vh; }
@media (max-width: 1100px) {
  .kontakt-fit .kform > .kfield:nth-child(-n+2) { grid-column: span 3; }
  .kontakt-fit .kform > .kfield:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .kontakt-seite main { display: block; }
  .kontakt-fit .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kontakt-fit .kform > .kfield:nth-child(-n+3), .kontakt-fit .kform > .kfield.khalb { grid-column: 1 / -1; }
  .kontakt-fit .sheet { padding: 22px 18px 24px; }
  .kontakt-fit .tab { padding: 14px 12px 12px; }
  .kontakt-fit .tab b { font-size: 15px; }
}

/* ===== Kontakt als Ordner: Reiter mit schräger Schulter wie ein Mac-Ordner; Unterkante bündig mit der letzten Linie links ===== */
.kontakt-fit .contact-grid { align-items: stretch; }
.kontakt-links { display: flex; flex-direction: column; }
.kontakt-links .kanaele { margin-top: auto; padding-top: 20px; }
.kontakt-links .lead + .channel { margin-top: 0; border-top: 0; }
.kontakt-links .kanaele .channel:first-child { border-top: 1px solid var(--beton); }
.kontakt-links .kanaele .channel:last-child { border-bottom: 1px solid #d3d7da; }
.kontakt-fit .register { display: flex; flex-direction: column; }
.kontakt-fit .tabs { gap: 0; }
.kontakt-fit .tab {
  flex: 0 1 220px; margin-right: 36px; z-index: 0;
  background: #e0e3e5; border: 0; border-radius: 14px 0 0 0;
}
/* Schulter: weiche S-Kurve wie beim Mac-Ordner, als Maske, damit sie die Farbe des Reiters übernimmt */
.kontakt-fit .tab::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -40px; width: 41px; z-index: -1;
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H6C14 0 17 5 20 14L26 46C28 55 32 60 40 60H0Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H6C14 0 17 5 20 14L26 46C28 55 32 60 40 60H0Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.kontakt-fit .tab:hover { background: #e6e8ea; }
.kontakt-fit .tab[aria-selected="true"] { background: var(--beton); margin-bottom: 0; z-index: 2; }
.kontakt-fit .tab[aria-selected="true"]::before { display: none; }
.kontakt-fit .sheet {
  flex: 1; background: var(--beton); border: 0; box-shadow: none;
  border-radius: 0 18px 18px 18px;
}
.kontakt-fit .termin-box { background: var(--white); }
@media (max-width: 960px) {
  .kontakt-links .kanaele { margin-top: 0; }
}
@media (max-width: 640px) {
  .kontakt-fit .tab { flex: 1 1 0; margin-right: 24px; border-radius: 12px 0 0 0; }
  .kontakt-fit .sheet { border-radius: 0 14px 14px 14px; }
}
.kontakt-fit .khinweis { color: #565f66; }
/* Schulter des letzten Reiters (40 px) muss innerhalb des Seitenrands bleiben */
.kontakt-fit .tab:last-of-type { margin-right: 40px; }
/* Reiter ragen 2 px ins Blatt, damit an der Unterkante keine helle Haarlinie durchscheint */
.kontakt-fit .tab { margin-bottom: -2px; }
.kontakt-fit .tab[aria-selected="true"] { margin-bottom: -2px; }
/* Inaktiver Reiter liegt sichtbar weiter hinten: dunkler, unten im Schatten, Schrift bleibt klar lesbar */
.kontakt-fit .tab:not([aria-selected="true"]) { background: linear-gradient(#d9dde0, #cdd2d6); }
.kontakt-fit .tab:not([aria-selected="true"]):hover { background: linear-gradient(#e0e3e6, #d5d9dc); }
.kontakt-fit .tab:not([aria-selected="true"]) b { color: #2f363b; }
/* Nachrichtenfeld wächst mit, bis das Blatt so hoch ist wie die linke Spalte: unter „Nachricht senden“ bleibt kein Leerraum */
@media (min-width: 961px) {
  .kontakt-fit .panel { display: flex; flex-direction: column; }
  .kontakt-fit .kform { flex: 1; grid-template-rows: auto auto 1fr; }
  .kontakt-fit .kfield:has(textarea) { grid-template-rows: auto 1fr; }
  .kontakt-fit .kfield textarea { min-height: 150px; resize: none; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .kontakt-fit .kform { grid-template-rows: auto auto auto 1fr; }
}
/* Kontakt-Einleitung: zweite Zeile bleibt am Stück, solange sie in die Spalte passt */
@media (min-width: 420px) { .kontakt-links .lead .nobr { white-space: nowrap; } }
.kontakt-links .lead .nobr .nobr { white-space: nowrap; }
/* Kontaktwege füllen die linke Spalte bis zur Unterkante von „Nachricht senden“: größere Schrift, Zeilen teilen den Platz gleichmäßig */
@media (min-width: 961px) {
  .kontakt-links .kanaele { flex: 1; display: flex; flex-direction: column; margin-top: 36px; padding-top: 0; }
  .kontakt-links .kanaele .channel { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 18px 0; }
  .kontakt-links .channel small { font-size: 16px; margin-bottom: 6px; }
  .kontakt-links .channel strong { font-size: clamp(22px, 2.15vw, 32px); }
}
/* Datenschutz-Link wie der Text: schwarz und fett, ohne blauen Unterstrich */
.kontakt-fit .khinweis a { color: var(--tinte, #171b1e); font-weight: 700; text-decoration: none; }
.kontakt-fit .khinweis a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Reiter umschalten (01.11.2026): aktive Fläche gleitet wie ein umgelegter Schalter, Inhalt blendet über, Seite springt nicht ===== */
.kontakt-fit .register { position: relative; isolation: isolate; }
.kontakt-fit .tabs { position: relative; }
/* Reiter bilden keine eigene Ebene (top statt transform), damit ihre Schrift über der gleitenden Fläche liegt.
   Alle Reiter tragen den hinteren Ton; „vorne“ zeigt allein die Fläche .reiter-marke */
.kontakt-fit .tab,
.kontakt-fit .tab[aria-selected="true"] {
  z-index: auto; transform: none; top: 0;
  background: linear-gradient(#d9dde0, #cdd2d6);
  transition: color .2s ease, top .3s cubic-bezier(.23, 1, .32, 1);
}
.kontakt-fit .tab:not([aria-selected="true"]) { top: 6px; }
.kontakt-fit .tab b { position: relative; z-index: 3; transition: color .2s ease; }
.kontakt-fit .reiter-marke {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  background: var(--beton); border-radius: 14px 0 0 0;
}
.kontakt-fit .reiter-marke::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -40px; width: 41px;
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H6C14 0 17 5 20 14L26 46C28 55 32 60 40 60H0Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H6C14 0 17 5 20 14L26 46C28 55 32 60 40 60H0Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
/* Erst nach dem ersten Setzen gleiten, sonst fährt die Fläche beim Laden von links herein */
.kontakt-fit .tabs.ist-bereit .reiter-marke { transition: transform .3s cubic-bezier(.23, 1, .32, 1), width .3s cubic-bezier(.23, 1, .32, 1); }
@media (max-width: 640px) { .kontakt-fit .reiter-marke { border-radius: 12px 0 0 0; } }
/* Fokusrahmen an der Schrift, weil die Fläche den Reiter selbst überdeckt */
.kontakt-fit .tab:focus-visible { outline: none; }
.kontakt-fit .tab:focus-visible b { outline: 3px solid var(--gelb); outline-offset: 4px; border-radius: 4px; }
/* Inhalt: kurz überblenden, neues Blatt kommt etwas langsamer als das alte geht; Höhe bleibt fest (beide Blätter liegen in einer Zelle) */
.kontakt-fit .panel { transition: opacity .24s cubic-bezier(.23, 1, .32, 1), transform .24s cubic-bezier(.23, 1, .32, 1), visibility 0s; }
.kontakt-fit .panel[hidden] { transform: translateY(4px); transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s .15s; }
/* Kalender scrollt im Kasten: schmaler, heller Balken statt des dunklen Standardbalkens */
.kontakt-fit .termin-box.is-live { scrollbar-width: thin; scrollbar-color: #c3c8cc transparent; }
@media (prefers-reduced-motion: reduce) {
  .kontakt-fit .tabs.ist-bereit .reiter-marke, .kontakt-fit .tab { transition: none; }
  .kontakt-fit .panel, .kontakt-fit .panel[hidden] { transform: none; }
}

/* ===== Schriften (30.10.2026): Überschriften Golos Text, Fließtext Onest; Hero-Überschrift und Logo bleiben Archivo ===== */
@font-face {
  font-family: "Golos Text";
  src: url("fonts/golos-text-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("fonts/onest-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
body, .btn, button, input, textarea { font-family: "Onest", system-ui, sans-serif; font-stretch: normal; }
h1, h2, h3, h4, .display, .title, .sheet-title, .sub { font-family: "Golos Text", system-ui, sans-serif; font-stretch: normal; }
.brand { font-family: "Archivo", system-ui, sans-serif; }

/* ===== Startseite, Auswahl vom 30.10.2026 ===== */



/* Leistungen: Highlights zum Durchklicken */
/* Überschrift 10 % kleiner als die übrigen; Karte richtet sich nach der Fensterhöhe, damit Überschrift und Pfeile zugleich sichtbar sind */
#leistungen { padding-top: clamp(56px, 6vw, 88px); }
#leistungen .title { font-size: clamp(32px, 4.32vw, 61px); margin-bottom: clamp(24px, 3vw, 40px); }
.hl { --karte: min(880px, calc(100vw - 2 * var(--gutter) - 48px)); }
.hl-spur {
  list-style: none; display: flex; gap: clamp(14px, 1.6vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  scroll-padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  scrollbar-width: none; scroll-behavior: smooth;
}
.hl-spur::-webkit-scrollbar { display: none; }
.hl-spur:focus-visible { outline-offset: -3px; }
.hl-karte {
  position: relative; flex: 0 0 var(--karte); height: clamp(460px, min(46vw, 100svh - 320px), 620px); scroll-snap-align: start;
  border-radius: 22px; overflow: hidden; display: flex; flex-direction: column;
}
.hl-hell { background: #f2f3f4; color: var(--tinte); }
.hl-dunkel { background: var(--anthrazit); color: var(--white); }
.hl-text {
  padding: clamp(28px, 3.4vw, 48px) clamp(28px, 3.4vw, 48px) 0; max-width: 30ch;
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1.3; letter-spacing: -.012em; font-weight: 500; color: #6b747b; text-wrap: pretty;
}
.hl-dunkel .hl-text { color: #9aa3aa; }
/* Titel der Karte in eigener Zeile, der Satz beginnt darunter */
.hl-text b { display: block; margin-bottom: 4px; font-family: "Golos Text", system-ui, sans-serif; font-weight: 700; color: var(--tinte); }
.hl-dunkel .hl-text b { color: var(--white); }
/* Zwei, drei Schlüsselwörter pro Karte kräftig hervorgehoben */
.hl-text strong { font-weight: 650; color: var(--tinte); }
.hl-dunkel .hl-text strong { color: var(--white); }
.hl-bild { position: relative; flex: 1; min-height: 0; margin-top: clamp(24px, 3vw, 40px); }
/* Website: Ausschnitt ragt unten aus der Karte, wie ein Bildschirm */
.hl-browser { margin-left: clamp(28px, 3.4vw, 48px); margin-right: clamp(28px, 3.4vw, 48px); }
.hl-browser img {
  width: 100%; height: 100%; object-fit: cover; object-position: top left;
  border-radius: 12px 12px 0 0; box-shadow: 0 0 0 1px rgba(23,27,30,.08), 0 24px 48px -20px rgba(23,27,30,.35);
}
/* Betreuung: großes Foto rechts neben dem Text, randlos bis an die Kartenkanten */
.hl-foto { position: absolute; top: 0; right: 0; bottom: 0; left: 48%; margin: 0; }
.hl-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
/* Karriere: ruhige Fläche, nur Schrift */
.hl-ruhig { display: flex; align-items: flex-end; padding: 0 clamp(20px, 3vw, 40px) clamp(8px, 1vw, 16px); overflow: hidden; }
.hl-ruhig span {
  font-family: "Golos Text", system-ui, sans-serif; font-weight: 700; letter-spacing: -.05em; line-height: .78;
  font-size: clamp(88px, 13vw, 184px); color: #6f787f; white-space: nowrap;
}
/* Google: echte Suchtreffer-Texte, ohne fremde Logos */
.hl-treffer { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; overflow: hidden; container-type: size; padding: 0 clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 40px); }
.treffer { background: var(--white); border-radius: 14px; padding: 14px 20px; box-shadow: 0 1px 2px rgba(23,27,30,.06), 0 16px 32px -24px rgba(23,27,30,.3); }
.treffer small { display: block; font-size: 13px; color: #5f676d; }
.treffer strong { display: block; margin-top: 4px; font-weight: 500; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.3; color: #1f4fbf; }
/* Wenig Platz (niedriges Fenster): Beschreibung weglassen statt abschneiden */
@container (max-height: 290px) { .treffer span { display: none; } }
.treffer span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--schiefer); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Website: drei echte Handys rechts neben dem Text, Bildschirm im Seitenverhältnis des iPhones, nichts beschnitten */
.hl-handys {
  position: absolute; top: clamp(28px, 3.4vw, 48px); bottom: clamp(28px, 3.4vw, 48px); left: 45%; right: clamp(28px, 3.4vw, 48px);
  margin: 0; container-type: size; display: flex; justify-content: flex-end; align-items: center; gap: 4cqw;
}
.handy {
  --b: min(calc((100cqw - 8cqw - 24px) / 3), calc(90cqh * .488));
  position: relative; flex: none; width: var(--b); aspect-ratio: 71.6 / 146.6; padding: calc(var(--b) * .035);
  border-radius: calc(var(--b) * .17); background: #0c0d0e;
  box-shadow: 0 0 0 1.5px #9aa0a6, 0 0 0 3px #3a3f44, 0 30px 50px -24px rgba(23,27,30,.55);
}
/* Text schmaler, damit er neben Handys oder Foto Platz hat */
.hl-karte:has(.hl-handys, .hl-foto) .hl-text { max-width: 20ch; }
/* Leicht versetzt, damit die drei nicht wie eine Reihe Kacheln wirken */
.handy:nth-child(1) { transform: translateY(4cqh); }
.handy:nth-child(2) { transform: translateY(-4cqh); }
.handy:nth-child(3) { transform: translateY(4cqh); }
.handy img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--b) * .135); padding-top: calc(var(--b) * .15); background: var(--leiste, #fff); }
/* Dynamic Island und Seitentaste */
.handy::before {
  content: ""; position: absolute; z-index: 1; left: 50%; top: calc(var(--b) * .075); transform: translateX(-50%);
  width: calc(var(--b) * .3); height: calc(var(--b) * .085); border-radius: 999px; background: #000;
}
/* Tasten: rechts Seitentaste, links Aktionstaste und Lautstärke (lauter, leiser) */
.handy-taste { position: absolute; right: -4px; top: 27%; width: 3px; height: 13%; border-radius: 0 2px 2px 0; background: #6f757b; }
.handy::after {
  content: ""; position: absolute; left: -4px; top: 17%; width: 3px; height: 5.5%; border-radius: 2px 0 0 2px; background: #6f757b;
  box-shadow: 0 calc(var(--b) * .2) 0 0 #6f757b, 0 calc(var(--b) * .36) 0 0 #6f757b;
}
.hl-steuer { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.hl-punkte { display: flex; gap: 8px; }
.hl-punkte i { width: 8px; height: 8px; border-radius: 50%; background: #c9ced2; transition: background-color .3s, width .3s var(--ease); }
.hl-punkte i.an { width: 28px; border-radius: 4px; background: var(--tinte); }
.hl-pfeile { display: flex; gap: 12px; }
.hl-pfeil {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: #e4e7e9; color: var(--tinte); transition: background-color .2s, opacity .2s, transform .12s ease-out;
}
.hl-pfeil:hover { background: #d6dadd; }
.hl-pfeil:active { transform: scale(.94); }
.hl-pfeil[disabled] { opacity: .35; cursor: default; }
.hl-pfeil svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* Ablauf: vier Felder als ein Körper. Die Breiten folgen der Maus fließend (main.js), das Feld unter der Maus zeigt Text */
.welle { list-style: none; display: flex; gap: clamp(8px, 1vw, 14px); height: clamp(460px, 40vw, 560px); margin-top: clamp(41px, 5.1vw, 68px); }
.welle-feld {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 22px;
  display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 2vw, 28px);
  background: var(--anthrazit); color: var(--white); isolation: isolate;
}
.welle-bild {
  position: absolute; left: 50%; top: 50%; width: max(100%, 760px); height: max(100%, 560px); max-width: none; object-fit: cover;
  transform: translate(-50%, -50%);
  filter: grayscale(calc(.75 - .75 * var(--o, 0))) brightness(calc(.5 + .5 * var(--o, 0)));
}
/* Abdunklung unten, damit der Text auf jedem Foto lesbar bleibt */
.welle-feld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,27,30,.9), rgba(23,27,30,.5) 38%, rgba(23,27,30,0) 70%); pointer-events: none; }
.welle-kopf, .welle-text { position: relative; z-index: 1; }
.welle-kopf button {
  all: unset; cursor: pointer; display: block; white-space: nowrap;
  font-family: "Golos Text", system-ui, sans-serif; font-weight: 700; font-size: clamp(17px, 1.6vw, 22px); letter-spacing: -.015em;
}
/* Ganzes Feld klickbar */
.welle-kopf button::before { content: ""; position: absolute; inset: -100vh -100vw; }
.welle-kopf button:focus-visible { outline: none; }
.welle-feld:has(button:focus-visible) { outline: 3px solid var(--gelb); outline-offset: 3px; }
.welle-nr {
  display: block; margin-bottom: 12px;
  font-family: "Archivo", system-ui, sans-serif; font-weight: 700; font-size: clamp(44px, 4.4vw, 64px); line-height: .9; letter-spacing: -.04em;
  color: color-mix(in srgb, var(--gelb) calc(var(--o, 0) * 100%), rgba(255,255,255,.55));
}
.welle-text {
  width: min(420px, 100%); overflow: hidden;
  max-height: calc(var(--t, 0) * 220px); opacity: var(--t, 0);
}
.welle-text p { margin-top: 10px; color: var(--white); font-size: 17px; }
.welle-text .welle-hinweis { color: var(--gelb); font-weight: 600; font-size: 16px; }
.welle-grau { display: none; }
@media (max-width: 960px) {
  .welle { flex-direction: column; height: 760px; }
  .welle-text { width: 100%; }
}

/* Bühne (Handy, Tablet): Felder untereinander in voller Höhe. Das Feld, das die Bildschirmmitte kreuzt, wird groß und
   farbig (Klasse .an aus main.js), die anderen sind kleiner und grau. Ausgelöst statt an den Finger gekoppelt: Die Übergänge
   laufen als CSS-Transition auf transform und opacity im Grafikchip, damit nichts hakt, egal wie schnell man wischt.
   Grau ist eine fertig graue Bilddatei (…-grau.jpg), die ausgeblendet wird; kein Filter im Browser.
   Selektoren mit #ablauf, damit die „Treppe“ oben (gleiche Stärke) hier nicht hineinfunkt: auf dem Handy keine Treppe,
   Bilder genau in Feldgröße (kleine Ebenen, nichts muss beim ersten Aufgehen neu gezeichnet werden). */
@media (max-width: 960px) {
  #ablauf .welle { display: grid; height: auto; gap: 14px; }
  #ablauf .welle-feld, #ablauf:not(.los) .welle-feld {
    height: min(62svh, 540px); opacity: 1; translate: none; transform: scale(.86); will-change: transform;
    transition: transform .75s var(--ease); transition-delay: 0s;
  }
  #ablauf .welle-feld.an { transform: scale(1); }
  #ablauf .welle-bild, #ablauf:not(.los) .welle-bild, #ablauf .welle-grau {
    left: 0; top: 0; width: 100%; height: 100%; transform: none; scale: none; filter: none;
  }
  #ablauf .welle-bild { transition: none; }
  #ablauf .welle-grau { display: block; position: absolute; max-width: none; object-fit: cover; opacity: 1; transition: opacity .6s ease-out; }
  #ablauf .welle-feld.an .welle-grau { opacity: 0; }
  #ablauf .welle-nr { position: relative; color: var(--gelb); }
  #ablauf .welle-nr::after { content: attr(data-nr); position: absolute; inset: 0; color: #8d9296; transition: opacity .5s ease-out; }
  #ablauf .welle-feld.an .welle-nr::after { opacity: 0; }
  #ablauf .welle-text { max-height: none; opacity: 0; transform: translateY(14px); transition: opacity .35s ease-out, transform .5s var(--ease); }
  #ablauf .welle-feld.an .welle-text { opacity: 1; transform: none; transition-delay: .12s; }
  #ablauf .welle-kopf button { cursor: default; }
}
/* Neuere Browser (Safari 26, Chrome): Die Bühne hängt direkt an der Scrollspur statt an einem Auslöser. Safari rechnet
   solche Animationen auf transform und opacity in der Scroll-Spur selbst, dadurch läuft Größe und Farbe exakt mit dem
   Finger mit, auch beim schnellen Wischen (kein Nachziehen wie bei der Transition). Ältere Browser behalten den Auslöser. */
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    #ablauf .welle-feld { view-timeline: --karte block; }
    #ablauf .welle-feld, #ablauf .welle-grau, #ablauf .welle-nr::after, #ablauf .welle-text {
      transition: none; animation-duration: 1ms; animation-fill-mode: both; animation-timing-function: linear;
      animation-timeline: --karte; animation-range: cover 0% cover 100%;
    }
    #ablauf .welle-feld { animation-name: buehne-karte; }
    #ablauf .welle-grau, #ablauf .welle-nr::after { animation-name: buehne-grau; }
    #ablauf .welle-text { animation-name: buehne-text; }
  }
}
@keyframes buehne-karte {
  0%, 18% { transform: scale(.86); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  38%, 62% { transform: scale(1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  82%, 100% { transform: scale(.86); }
}
@keyframes buehne-grau {
  0%, 20% { opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  38%, 62% { opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  80%, 100% { opacity: 1; }
}
@keyframes buehne-text {
  0%, 26% { opacity: 0; transform: translateY(14px); animation-timing-function: ease-out; }
  40%, 60% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  74%, 100% { opacity: 0; transform: translateY(-8px); }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  #ablauf .welle-feld, #ablauf .welle-feld .welle-text { transform: none; opacity: 1; }
  #ablauf .welle-grau { display: none; }
  #ablauf .welle-nr::after { content: none; }
}

@media (prefers-reduced-motion: reduce) {
}

/* Footer (Startseite): Leitsatz oben, Name riesig über die volle Breite */
.footer-gross { overflow: hidden; }
.footer-gross .fg-oben {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; flex-wrap: wrap;
  padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(48px, 6vw, 80px);
}
.fg-satz { font-family: "Golos Text", system-ui, sans-serif; font-weight: 700; color: var(--white); font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.025em; }
.fg-spalten { display: flex; gap: clamp(32px, 5vw, 80px); flex-wrap: wrap; }
.fg-spalten nav { display: grid; gap: 10px; align-content: start; }
.fg-kontakt { display: grid; gap: 10px; align-content: start; }
.fg-kontakt a { color: var(--white); font-weight: 600; transition: color .2s ease-out; }
.footer .fg-kontakt a:hover { color: var(--gelb); }
.fg-marke {
  display: block; text-align: center; text-decoration: none; color: var(--white);
  font-family: "Archivo", system-ui, sans-serif; font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  font-size: 12.8vw; line-height: .74; letter-spacing: -.02em; white-space: nowrap;
  margin-bottom: -.02em; padding-top: .06em;
}
/* Schriftzug: gelbe Kopie des Namens liegt darüber; sichtbar nur in einem weichen, federnden Fleck um die Maus.
   Die Form (Polygon) rechnet main.js jedes Bild neu: dehnt sich in Bewegungsrichtung, wabert leicht. */
.fg-marke { position: relative; }
.fg-marke::after {
  content: "Bischkopf"; position: absolute; inset: 0; padding-top: inherit; color: var(--gelb); pointer-events: none;
  clip-path: var(--fleck, circle(0));
}
.footer .fg-marke:hover { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .hl-spur { scroll-behavior: auto; }
  .hl-punkte i { transition: none; }
}

@media (max-width: 640px) {
  .hl-karte { height: 540px; }
  .hl-karte:has(.hl-handys, .hl-foto) .hl-text { max-width: 30ch; }
  .hl-foto { position: relative; inset: auto; flex: 1; min-height: 0; margin-top: 24px; }
  .hl-handys { position: relative; inset: auto; flex: 1; min-height: 0; justify-content: center; margin: 20px 0 28px; padding: 0 24px; }
  .footer-gross .fg-oben { flex-direction: column; gap: 36px; }
}
.cta .cta-anruf { margin-top: 28px; font-family: "Golos Text", system-ui, sans-serif; font-weight: 700; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.015em; color: var(--white); }
.cta .cta-anruf + .hero-actions { margin-top: 20px; }

/* ===== Startseite: Hero „Riesenname mit Code“ (v8, 31.10.2026) und Übergang „Blatt“ zu den Projekten =====
   Eigenes Präfix hv-, damit Kopfleiste und Abschnitte der Unterseiten unberührt bleiben. Bewegung nur über transform und opacity */

/* Kopfleiste fest, in Maßen und Schrift genau wie auf den Unterseiten (76 px hoch, Logo 22 px, Links 16 px, Knopf 40 px).
   Ganz oben durchsichtig mit Textlinks; beim Scrollen wird sie dunkles Glas und „Kontakt“ wird ein gelber Knopf.
   Sobald die Oberkante der Projekte die Unterkante der Leiste berührt, wird sie weißes Glas mit dunkler Schrift (hero.js, Klasse „hell“) */
.hv-kopf {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 18px 32px; padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); color: var(--white);
  transition: color .25s var(--ease);
}
/* Fläche und Trennlinie liegen als eigene Ebene darunter; fest wird die Leiste 14 px niedriger (90 → 76 px).
   Logo und Links sitzen von Anfang an mittig in den 76 px (oben 18, unten 32 px), damit beim Scrollen nichts springt (Simon, 01.11.) */
.hv-kopf::before {
  content: ""; position: absolute; inset: 0 0 14px; z-index: -1;
  background: rgb(28 33 37 / .72); box-shadow: 0 1px 0 rgb(255 255 255 / .08);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  opacity: 0; transition: opacity .35s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.hv-kopf.fest::before { opacity: 1; }
.hv-kopf.hell { color: var(--tinte); }
/* Weißes Glas wie auf den Unterseiten (72 % Weiß). Solange unter der Leiste noch dunkler Hero liegt, ist die Milch dichter,
   sonst schimmert das Dunkel grau durch; --milch kommt aus hero.js und sinkt auf .72, sobald das Weiß ganz darunter liegt */
.hv-kopf.hell::before { background: rgb(255 255 255 / var(--milch, .72)); box-shadow: 0 1px 0 rgba(23,27,30,.06); }
@media (prefers-reduced-transparency: reduce) {
  .hv-kopf::before { background: #1c2125; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hv-kopf.hell::before { background: var(--white); }
}
.hv-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); font: 500 16px/1.6 "Onest", system-ui, sans-serif; letter-spacing: -.01em; }
.hv-nav a { position: relative; text-decoration: none; opacity: .8; transition: opacity .2s var(--ease), color .25s var(--ease), transform .35s var(--ease); }
.hv-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--gelb);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.hv-nav a:hover { opacity: 1; }
.hv-nav a:hover::after { transform: scaleX(1); }
/* Kontakt nimmt schon ganz oben den vollen Platz des Knopfs ein (wie .btn-sm: 40 px, 18 px Innenabstand, 8 px Radius);
   feste Breite, damit der fettere Knopftext die Links nicht verschiebt. So bleibt beim Scrollen alles an seinem Platz */
.hv-nav .hv-kontakt { display: inline-flex; align-items: center; justify-content: center; min-width: 102px; min-height: 40px; padding: 0 18px; border-radius: 8px; font-size: 15px; isolation: isolate; }
.hv-nav .hv-kontakt::after { left: 18px; right: 18px; bottom: 1px; }
.hv-nav .hv-kontakt::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 8px; background: var(--gelb); opacity: 0; transition: opacity .3s var(--ease), background-color .2s var(--ease); }
.hv-kopf.fest .hv-nav .hv-kontakt { opacity: 1; color: var(--tinte); font-weight: 600; letter-spacing: -.005em; }
.hv-kopf.fest .hv-kontakt::before { opacity: 1; }
.hv-kopf.fest .hv-kontakt::after { display: none; }
.hv-kopf.fest .hv-kontakt:hover::before { background: #ffd04d; }
.hv-kopf.fest .hv-kontakt:active { transform: scale(.97); }

.hv-stapel { position: relative; background: var(--anthrazit); }
.hv-hero {
  position: relative; min-height: 100svh; overflow: hidden; background: #1c2125; color: var(--white);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; isolation: isolate;
}
.hv-stapel > .hv-hero { position: sticky; top: 0; z-index: 0; transform-origin: 50% 30%; will-change: transform; }
.hv-kopf-platz { height: 90px; }

/* Code hinter Riffelglas: Streifen mit leicht versetztem Bildausschnitt, im Skript erzeugt.
   Die Fläche ist so hoch wie das Bild und gleitet langsam auf und ab */
.hv-glas { position: absolute; inset: 0 0 auto; z-index: -2; display: flex; height: calc(var(--bb, 0px) * 1468 / 2200); opacity: .5;
  transform: translateY(calc(var(--weg, 0px) * .3)); animation: hv-fliessen 60s linear infinite alternate; }
@keyframes hv-fliessen { from { transform: translateY(calc(var(--weg, 0px) * .15)); } to { transform: translateY(calc(var(--weg, 0px) * .85)); } }
.hv-glas span { position: relative; flex: 1 0 0; height: 100%; overflow: hidden; }
.hv-glas i { position: absolute; inset: 0 auto 0 0; width: var(--bb); background: url("media/hero/code-zeilen.jpg") 0 0 / 100% auto no-repeat; transform: translateX(var(--bx, 0px)); }
.hv-glas span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / .1), transparent 28%, transparent 62%, rgb(0 0 0 / .38)); }
.hv-glas--ohne { height: 100%; transform: none; animation: none; background: url("media/hero/code-zeilen.jpg") center 30% / cover; }
/* Warmer Schein als Tönung des Fotos, wandert langsam */
.hv-schein { position: absolute; z-index: -1; top: 0; left: 0; width: 160%; height: 160%; mix-blend-mode: color;
  background: linear-gradient(118deg, #ffb21a 0%, #d8641a 34%, rgb(28 33 37 / 0) 62%);
  opacity: .28; animation: hv-wandern 22s ease-in-out infinite alternate; }
@keyframes hv-wandern { to { transform: translate(-22.5%, -15%); } }
.hv-schatten { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgb(28 33 37 / .35), rgb(28 33 37 / .82) 34%, rgb(28 33 37 / .82) 62%, #1c2125 86%); }
.hv-schleier { position: absolute; inset: 0; z-index: 5; background: #101315; opacity: 0; pointer-events: none; will-change: opacity; }

.hv-mitte { display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; align-items: center; align-content: center; padding: 0 var(--gutter); }
.hv-satz { text-align: center; color: var(--white); font: 600 clamp(30px, 3.2vw, 46px)/1.1 "Golos Text", sans-serif; letter-spacing: -.02em; text-wrap: balance; }
.hv-aktion { text-align: center; margin-top: 27px; }
.hv-knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 30px; border-radius: 4px;
  background: var(--gelb); color: var(--tinte); font: 600 17px/1 "Archivo", sans-serif; text-decoration: none;
  transition: background-color .2s var(--ease), transform .16s var(--ease);
}
.hv-knopf:hover { background: #ffd04d; }
.hv-knopf:active { transform: scale(.97); }
/* Eine leise Zeile unter dem Knopf, sonst nichts in der Mitte */
.hv-hinweis { margin-top: 14px; text-align: center; font: 400 13px/1.4 "Onest", sans-serif; letter-spacing: .01em; color: #a9b2b9; }

/* Der Schriftzug: gelbes WEBSYSTEME über dem Namen, der Name füllt die Breite (hero.js) */
.hv-unten { padding: 0 var(--gutter); }
.hv-zug { font-family: "Archivo", sans-serif; text-transform: uppercase; line-height: .86; font-weight: 400; }
.hv-zug__ws { display: block; font-weight: 800; font-stretch: 75%; color: var(--gelb); letter-spacing: 0; font-size: clamp(38px, 5.2vw, 84px); margin-left: .01em; }
.hv-zug__name { display: block; font-weight: 900; font-stretch: 125%; letter-spacing: -.02em; font-size: 21.6vw; line-height: .74; margin: .04em 0 -.07em -.03em; white-space: nowrap; color: var(--white); }

/* Einstieg: Elemente gleiten beim Laden einmal herein */
@keyframes hv-herein { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hv-herein { animation: hv-herein .9s var(--ease) both; animation-delay: calc(var(--n, 0) * 90ms + 120ms); }

/* Ab Tablet steht die Mitte genau in der Bildschirmmitte: sie spannt über alle Zeilen des Heros */
@media (min-width: 761px) {
  .hv-mitte { grid-row: 1 / -1; grid-column: 1; z-index: 1; }
  .hv-unten { grid-row: 3; grid-column: 1; }
  .hv-kopf-platz { grid-row: 1; grid-column: 1; }
}
@media (max-width: 760px) {
  .hv-mitte { grid-template-columns: minmax(0, 1fr); padding-block: 24px; }
  .hv-satz { font-size: clamp(30px, 8.4vw, 36px); }
  .hv-aktion { margin-top: 24px; }
  .hv-zug__ws { font-size: 12vw; }
}
/* Handy wie die Unterseiten: Leiste fest 61 px hoch (oben 68 px), nur Logo und Kontakt */
@media (max-width: 640px) {
  .hv-nav a:not(:last-child) { display: none; }
  .hv-kopf { padding-block: 10.5px 17.5px; }
  .hv-kopf::before { bottom: 7px; }
  .hv-kopf-platz { height: 68px; }
}

/* Projekte als helles Blatt: runde Oberkanten und weicher Schatten; die Ecken werden flach, sobald es oben anliegt (hero.js).
   Fläche und Schatten sind eigene Ebenen, damit die Ecken per clip-path statt per Radius wandern */
.hv-blatt { position: relative; z-index: 1; color: var(--tinte); padding: clamp(64px, 8vw, 120px) var(--gutter) clamp(96px, 12vw, 160px); }
.hv-blatt::before { content: ""; position: absolute; inset: 0 0 -1px; z-index: -1; background: var(--white); clip-path: inset(0 round var(--ecke, 28px) var(--ecke, 28px) 0 0); }
.hv-blatt::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px -20px rgba(10, 12, 14, .35); pointer-events: none; }
.hv-ruhig .hv-blatt { --ecke: 0px; }
.hv-blatt__kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.4vw, 36px); align-items: start; max-width: 1280px; margin: 0 auto; will-change: transform; }
.hv-blatt h2 { font: 800 clamp(40px, 12.4vw, 200px)/.86 "Archivo", sans-serif; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; }
.hv-blatt__intro { max-width: 38ch; justify-self: end; font: 500 clamp(20px, 2.1vw, 32px)/1.24 "Golos Text", sans-serif; letter-spacing: -.015em; color: var(--tinte); text-indent: 3.2em; text-wrap: pretty; }
/* Fallstudien auf hellem Grund */
.hv-blatt .cases { max-width: 1280px; margin: clamp(48px, 6vw, 88px) auto 0; }
.hv-blatt .case-shot { box-shadow: 0 0 0 1px rgba(23,27,30,.08), 0 30px 60px -28px rgba(23,27,30,.4); }
.hv-blatt .case-meta { color: #5b6369; }
.hv-blatt .case p { color: #4a5258; }
.hv-blatt .case-link { color: var(--tinte); }
.hv-blatt .case-link:hover { color: #7a5a00; }
@media (max-width: 760px) { .hv-blatt__intro { justify-self: start; text-indent: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hv-glas, .hv-schein, .hv-herein { animation: none; }
  .hv-kopf, .hv-kopf::before, .hv-kopf > *, .hv-nav a, .hv-nav a::after, .hv-nav .hv-kontakt::before, .hv-knopf { transition: none; }
}

/* ===== Ein Ansprechpartner (01.11.2026, Vorbild Monopo London): Satz mit Pfeil, Porträt in gelbem Licht, Name und Kontakt unter Linien ===== */
#ueber-mich.ap14 { padding: 0; }
#ueber-mich.ap14 .wrap { padding-top: clamp(36px, 4.5vh, 44px); padding-bottom: clamp(36px, 4.5vh, 44px); }
.ap14-raster {
  display: grid; column-gap: clamp(32px, 4.5vw, 72px);
  grid-template-columns: minmax(0, 1.25fr) clamp(260px, 21vw, 304px) minmax(0, 1fr);
  grid-template-areas: "satz foto text" "satz name kontakt";
}
/* Überschrift: Schrift und Größe kommen von .title wie bei den anderen Abschnitten */
.ap14-satz { grid-area: satz; align-self: start; }

/* Porträt in gelbem Licht: Foto in Graustufen, darüber Gelb multipliziert */
.ap14-foto { grid-area: foto; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--gelb); }
.ap14-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: grayscale(1) contrast(1.08); }
.ap14-licht { position: absolute; inset: 0; background: var(--gelb); mix-blend-mode: multiply; }

/* Name und Kontakt: Linie, groß in Versalien, darunter kleine Zeilen mit Dreieck */
.ap14-name, .ap14-kontakt { border-top: 1px solid var(--tinte); margin-top: 20px; padding-top: 18px; }
.ap14-name { grid-area: name; }
.ap14-kontakt { grid-area: kontakt; }
.ap14-gross { font-family: "Golos Text", system-ui, sans-serif; font-weight: 400; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.1; text-transform: uppercase; letter-spacing: -.005em; }
.ap14-gross a { text-decoration: none; }
.ap14-rollen { list-style: none; margin-top: 12px; display: grid; gap: 5px; }
.ap14-rollen li { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--schiefer); }
.ap14-rollen li::before { content: "▸"; margin-right: 6px; font-size: 9px; }
.ap14-rollen .ap14-mail { text-decoration: none; text-transform: none; letter-spacing: .04em; font-size: 13px; color: var(--tinte); }
.ap14-kontakt a:hover { color: #7a5a00; }
/* Termin-Link: in Ruhe nur Text. Bei Maus oder Fokus zieht sich die gelbe Linie von links bis unter den Pfeil,
   der Pfeil fliegt von links herein; beim Verlassen fährt beides wieder zurück. */
.ap14-termin {
  --pfeil: 26px;
  position: relative; display: inline-flex; align-items: center; margin-top: 16px; padding-bottom: 6px;
  font-weight: 600; font-size: 16px; color: var(--tinte); text-decoration: none;
}
.ap14-termin::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--gelb);
  transition: width .4s var(--ease);
}
.ap14-termin-pfeil { width: 18px; height: 20px; margin-left: calc(var(--pfeil) - 18px); overflow: hidden; }
.ap14-termin-pfeil svg {
  display: block; width: 18px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
  transform: translateX(-110%); transition: transform .4s var(--ease);
}
.ap14-termin:hover::after, .ap14-termin:focus-visible::after { width: 100%; }
.ap14-termin:hover .ap14-termin-pfeil svg, .ap14-termin:focus-visible .ap14-termin-pfeil svg { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ap14-termin::after { transition: none; }
  .ap14-termin-pfeil svg { transform: none; opacity: 0; transition: opacity .2s; }
  .ap14-termin:hover .ap14-termin-pfeil svg, .ap14-termin:focus-visible .ap14-termin-pfeil svg { opacity: 1; }
}

.ap14-text { grid-area: text; align-self: end; }
.ap14-zitat { font-family: "Golos Text", system-ui, sans-serif; font-size: clamp(22px, 2vw, 28px); line-height: 1.22; letter-spacing: -.015em; color: var(--tinte); max-width: 20ch; text-wrap: balance; }
.ap14-ich { margin-top: 18px; font-size: 16px; line-height: 1.55; color: var(--schiefer); max-width: 38ch; text-wrap: pretty; }

/* Handy und schmale Fenster: untereinander */
@media (max-width: 900px) {
  #ueber-mich.ap14 .wrap { padding-bottom: 72px; }
  .ap14-raster { grid-template-columns: 1fr; grid-template-areas: "satz" "foto" "name" "text" "kontakt"; }
  .ap14-satz { margin-bottom: 32px; }
  .ap14-foto { width: min(100%, 420px); }
  .ap14-text { margin-top: 40px; }
  .ap14-kontakt { margin-top: 32px; }
}

/* ===== FAQ „Große Fragen“ (Vorlage v07, 01.11.2026) ===== */
/* Titel bewusst rechtsbündig: Taktwechsel zu den sonst linksbündigen Überschriften */
#faq { background: var(--white); padding-top: 0; }
#faq .wrap { border-top: 1px solid rgba(23,27,30,.1); padding-top: clamp(80px, 10vw, 144px); }
#faq .title { text-align: right; margin-bottom: clamp(40px, 5vw, 72px); }
.faq-liste { display: grid; gap: clamp(6px, 1vw, 14px); }
#faq h3 { font-weight: 500; font-size: clamp(28px, 3.7vw, 54px); line-height: 1.08; letter-spacing: -.03em; }
#faq .faq-q { display: inline; width: auto; font: inherit; color: var(--schiefer); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; transition: color .3s var(--ease); }
#faq .faq-q:hover, #faq .offen .faq-q { color: var(--tinte); }
#faq .faq-q:focus-visible { outline: 3px solid var(--gelb); outline-offset: 4px; }
/* Gelber Strich wächst beim Öffnen von links nach rechts, auch über Zeilenumbrüche */
#faq .faq-t { background: linear-gradient(var(--gelb), var(--gelb)) no-repeat 0 92% / 0% .08em; transition: background-size .7s var(--ease); }
#faq .offen .faq-t { background-size: 100% .08em; }
/* Aufklappen ohne feste Höhe (0fr → 1fr); zu = unsichtbar und nicht per Tab erreichbar */
#faq .faq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .5s var(--ease), visibility 0s .5s; }
#faq .faq-a[data-offen] { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
#faq .faq-a > div { overflow: hidden; min-height: 0; padding-left: 40%; }
#faq .faq-a p { padding: clamp(16px, 2vw, 28px) 0 clamp(24px, 3vw, 44px); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 46ch; text-wrap: pretty; color: var(--tinte); }
/* Antwort wird Wort für Wort scharf eingeblendet, nur über opacity (Spans setzt main.js) */
#faq .faq-w { opacity: 0; transition: opacity .3s ease; transition-delay: 0s; }
/* --w = Anteil 0…1 im Satz: letztes Wort startet nach .4 s und ist mit dem Strich (.7 s) fertig */
#faq .faq-a[data-offen] .faq-w { opacity: 1; transition-delay: calc(var(--w) * .4s); }
@media (max-width: 760px) {
  #faq .title { margin-bottom: 32px; }
  #faq .faq-a > div { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #faq *, #faq *::before, #faq *::after { transition: none !important; }
}