/* PypeCloud — Anfrage „Rückruf anfordern“: das Formular, die Ansicht nach dem Absenden, der Weg in drei Schritten und seine
   zwei Orte: die Schublade (Startseite, Impressum, Datenschutz; am Handy von unten, am Rechner von rechts) und die eigene
   Seite /anfrage (Ziel des QR-Codes im Brief). Der Ort steht als data-anfrage an <html> (schublade oder seite), gesetzt von
   js/anfrage-start.js noch vor dem ersten Bild; das Formular steht fest in der Seite, darum verschiebt beim Laden nichts die
   Seite. Ohne Skript bleibt es verborgen: Dann führen die Knöpfe auf /anfrage, dort stehen E-Mail und Telefon. Bewegung nur
   über transform und opacity; bei „weniger Bewegung“ und in der Stufe „aus“ nur Einblenden der Deckkraft. */

:root{--af-rot:#B42318;--af-gruen:#0C7A56;--af-gruen-hell:#E1F6EE}
/* hidden gilt immer, auch wo eine Regel unten display setzt */
.af-karte [hidden],.af-karte[hidden],.af-weg [hidden]{display:none!important}

/* ─────────── Mit und ohne Skript, mit und ohne Code ─────────── */
/* ohne Skript (kein data-anfrage an <html>) weder Formular noch Weg */
html:not([data-anfrage]) [data-af-ort],html:not([data-anfrage]) [data-af-weg]{display:none}
/* Ohne Code (data-af-brief) das kurze Formular mit Name, Telefon und E-Mail und dem Knopf für den Code aus dem Brief; mit
   Code nur Telefon und E-Mail: der Name erscheint nur über „Nicht der Empfänger?“ (data-af-anders), eine Firma fragt das
   Formular nie. */
html:not([data-af-brief]) .af-brief,html:not([data-af-brief]) .af-anders,html:not([data-af-brief]) .af-nur-brief{display:none}
html[data-af-brief] .af-codekasten,html[data-af-brief] .af-ohne-brief{display:none}
html[data-af-brief]:not([data-af-anders]) .af-feld-name{display:none}
/* Rückruf oder Termin: ist die Buchung eingeschaltet, bucht der Besucher mit Code den Termin selbst (data-af-termin); sonst
   bittet er um einen Rückruf */
html:not([data-af-termin]) .af-nur-termin,html[data-af-termin] .af-ohne-termin,html:not([data-af-termin]) .af-termin{display:none}
.af-danke-weg:empty,.af-wahl:empty{display:none}

/* ─────────── Die Karte mit dem Formular ─────────── */
/* Die Karte ist ein Container: Ort und Uhrzeiten richten sich nach ihrer Breite, nicht nach dem Fenster */
.af-karte{position:relative;background:#fff;color:var(--ink);border-radius:20px;padding:30px 30px 28px;box-shadow:var(--schatten);
  container:af/inline-size}
/* Überschriften der Karte sind h2 (unter der h1 von /anfrage, neben der h2 des Kontakts); die Regel für h2 in der blauen
   Kontaktkarte (weiß, schmal) gilt hier nicht: gleiche Spezifität, diese Datei lädt danach */
.af-karte h2{color:var(--ink);max-width:none}
.af-titel{font-size:24px;letter-spacing:-.025em;line-height:1.15;outline:none}
.af-unter{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--slate)}
.af{display:flex;flex-direction:column;gap:18px}
.af-felder{display:grid;gap:14px;margin-top:4px}
.af-feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.af-feld label{font-size:15px;font-weight:600;color:var(--ink)}
.af-feld label span{font-weight:400;color:var(--leise)}
.af-feld input{width:100%;height:48px;padding:0 14px;border:1.5px solid var(--linie);border-radius:10px;background:#fff;color:var(--ink);
  font:400 17px/1.2 var(--font);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.af-feld input:hover{border-color:#C9D4EA}
.af-feld input:focus{outline:none;border-color:var(--blau-text);box-shadow:0 0 0 3px rgba(45,95,227,.18)}
.af-feld input[aria-invalid="true"]{border-color:var(--af-rot)}
.af-feld input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(180,35,24,.16)}
.af-fehler{font-size:14.5px;line-height:1.4;color:var(--af-rot)}
/* jedes Feld in eigener Zeile: neben einem zweiten Feld passt eine längere E-Mail-Adresse nicht */

.af-brief{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:12px 8px 12px 14px;border-radius:12px;
  background:var(--mist);border:1px solid var(--linie)}
.af-brief>svg.i{color:var(--blau-text)}
@media (max-width:440px){
  .af-brief{grid-template-columns:auto minmax(0,1fr);align-items:start;padding-bottom:4px}
  .af-brief>svg.i{margin-top:1px}
  .af-brief button{grid-column:2;justify-self:start;margin-left:-10px}
}
.af-brief p{min-width:0;font-size:15px;line-height:1.4;color:var(--ink)}
.af-brief strong{font:600 15px/1 var(--mono);letter-spacing:.02em;color:var(--ink)}
.af-brief small{display:block;margin-top:2px;font-size:13.5px;color:var(--leise)}
.af-brief button{min-height:44px;padding:0 10px;font-size:15px;font-weight:500;color:var(--blau-text);text-decoration:underline;text-underline-offset:3px;border-radius:8px}
.af-brief button:hover{color:var(--blau-tief)}
/* „Nicht der Empfänger des Briefs?“: ein Textknopf unter dem Hinweis, der das Namensfeld darunter auf- und zuklappt */
.af-anders{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:44px;margin:-8px 0 -10px -4px;padding:0 4px;
  font-size:15px;font-weight:500;line-height:1.3;text-align:left;color:var(--blau-text);text-decoration:underline;text-underline-offset:3px;border-radius:8px}
.af-anders:hover{color:var(--blau-tief)}
/* der Pfeil steht vorn (bricht der Text am Handy um, bleibt er beim Anfang) und dreht beim Aufklappen nach unten */
.af-anders svg.i{flex:none;order:-1;width:16px;height:16px}
.af-anders[aria-expanded="true"] svg.i{rotate:90deg}

/* unsichtbares Feld für Bots */
.af-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.af-hinweis{font-size:15px;line-height:1.5;color:var(--slate)}
.af-hinweis a{color:var(--blau-text);text-decoration:underline;text-underline-offset:3px}
.af-senden{justify-content:center;height:52px;font-size:16.5px;width:100%}
/* ausgegraut, bis der Haken gesetzt ist; bleibt antippbar und zeigt dann den Hinweis dazu */
.af:not([aria-busy="true"]) .af-senden[aria-disabled="true"]{background:var(--linie);color:var(--slate);box-shadow:none;transform:none;cursor:not-allowed}
/* beim Senden: Wartezeiger */
.af[aria-busy="true"] .af-senden{cursor:wait;opacity:.85}
.af-fehlschlag{padding:14px 16px;border-radius:12px;background:#FFF5F3;border:1px solid #F4C7C0;font-size:15px;line-height:1.5;color:var(--ink)}
/* Buchen geht gerade nicht (zu viele Buchungen, Kalender gestört, keine Zeit frei): Telefon und Rückruf, ruhig statt rot */
.af-ausweg{padding:14px 16px;border-radius:12px;background:#F4F7FF;border:1px solid #DCE5FB;font-size:15px;line-height:1.5;color:var(--slate)}
.af-ausweg strong{display:block;margin-bottom:2px;font-weight:600;color:var(--ink)}
.af-ausweg a{color:var(--blau-text);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.af-ausweg:focus{outline:none}
.af-ausweg:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
.af-fehlschlag strong{display:block;margin-bottom:2px}
.af-fehlschlag a{color:var(--blau-text);font-weight:500;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.af-senden-w{font-weight:500}

/* ─────────── Der Code aus dem Brief, getippt ─────────── */
/* das Feld selbst: kurz, in Großbuchstaben und mit Abstand zwischen den Zeichen, wie der Code im Brief steht */
.af-feld input.af-code{max-width:220px;font:500 18px/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase}
/* unter dem Formular: ein Textknopf, der das Feld mit „Weiter“ aufklappt */
.af-codekasten{display:flex;flex-direction:column;gap:14px}
.af-codeweg{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;margin:-6px 0 -6px -4px;padding:0 4px;
  font-size:15px;font-weight:500;line-height:1.3;text-align:left;color:var(--blau-text);text-decoration:underline;text-underline-offset:3px;border-radius:8px}
.af-codeweg:hover{color:var(--blau-tief)}
.af-codeweg svg.i{width:18px;height:18px}
.af-codeweg .af-pfeil{width:16px;height:16px;margin-left:-2px}
.af-codeweg[aria-expanded="true"] .af-pfeil{rotate:90deg}
.af-code-zeile{display:flex;gap:10px;align-items:flex-start}
.af-code-zeile input.af-code{flex:1 1 auto;min-width:0;max-width:220px}
.af-code-weiter{flex:none;height:48px;padding:0 18px;font-size:16px}
@media (max-width:380px){.af-code-zeile{flex-wrap:wrap}.af-code-zeile input.af-code{max-width:none;flex-basis:100%}.af-code-weiter{width:100%;justify-content:center}}

/* ─────────── Einwilligung ─────────── */
.af-einw{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start}
.af-einw input{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin:0;border:1.5px solid #AEBBD6;border-radius:7px;background:#fff center/16px 16px no-repeat;
  cursor:pointer;transition:background-color .2s,border-color .2s,box-shadow .2s}
.af-einw input:hover{border-color:var(--blau-text)}
.af-einw input:checked{background-color:var(--blau-text);border-color:var(--blau-text);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.af-einw input:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
.af-einw input[aria-invalid="true"]{border-color:var(--af-rot);box-shadow:0 0 0 3px rgba(180,35,24,.12)}
.af-einw label{font-size:15px;line-height:1.5;color:var(--ink);cursor:pointer;padding-top:1px}
.af-einw .af-fehler{grid-column:2}

/* ─────────── Termin: Ort, Tag und Uhrzeit ─────────── */
.af-termin{display:flex;flex-direction:column;gap:22px}
.af-termin fieldset{border:0;min-width:0;margin:0;padding:0}
.af-termin legend{padding:0;margin-bottom:10px;font-size:15px;font-weight:600;color:var(--ink)}
.af-termin fieldset>.af-fehler{margin-top:8px}
.tz-opt{position:relative;display:block}

/* Ort: zwei Kacheln, schmal untereinander */
.af-ort-wahl{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@container af (max-width:400px){.af-ort-wahl{grid-template-columns:1fr}}
.af-ort-wahl label{display:flex;align-items:center;gap:12px;height:100%;min-height:64px;padding:11px 14px;border:1.5px solid var(--linie);border-radius:14px;background:#fff;
  cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.af-ort-wahl label:hover{border-color:#C9D4EA}
.af-ort-i{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--mist);color:var(--blau-text);transition:background .25s,color .25s}
.af-ort-t strong{display:block;font-size:15.5px;font-weight:600;line-height:1.25;color:var(--ink)}
.af-ort-t small{display:block;margin-top:2px;font-size:13.5px;line-height:1.35;color:var(--leise)}
.af-ort-wahl input:checked+label{border-color:var(--blau-text);background:#F4F7FF;box-shadow:0 0 0 3px rgba(45,95,227,.12)}
.af-ort-wahl input:checked+label .af-ort-i{background:var(--blau-text);color:#fff}
.af-ort-wahl input:focus-visible+label,.af-zeit input:focus-visible+label{outline:2px solid var(--blau);outline-offset:2px}
.af-termin fieldset[data-fehler="true"] .af-ort-wahl label{border-color:#E6B4AE}

/* gemeinsam: Wochentag, Tag, Monat; der Name des gewählten Tags über den Uhrzeiten */
.tz-wt{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.tz-nr{font-size:22px;font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.tz-mo{font-size:12.5px;color:var(--leise)}
.tz-tagname{margin-top:16px;margin-bottom:10px;font-size:14.5px;font-weight:500;color:var(--slate)}

/* Uhrzeiten als Kacheln */
.tz-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.tz-kacheln label{display:flex;align-items:center;justify-content:center;height:46px;border:1.5px solid var(--linie);border-radius:12px;background:#fff;
  font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.tz-kacheln label:hover{border-color:#C9D4EA;background:var(--mist)}
.tz-kacheln input:checked+label{background:var(--blau-text);border-color:var(--blau-text);color:#fff}

/* Tagesleiste: zum Wischen; der blaue Grund gleitet zum Tag, der an ist */
.tz-band{position:relative}
/* unten mehr Innenabstand: Die Leiste rollt und schneidet sonst den Schatten des gewählten Tags ab */
.tz-tage{position:relative;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:3px 3px 16px;margin:-3px -3px -16px;overscroll-behavior-x:contain}
.tz-tage::-webkit-scrollbar{display:none}
.tz-tage .tz-opt{flex:none;scroll-snap-align:start}
.tz-tage label{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:62px;height:80px;
  border:1.5px solid var(--linie);border-radius:14px;cursor:pointer;transition:border-color .25s}
.tz-tage label:hover{border-color:#C9D4EA}
.tz-tage label .tz-nr{margin:3px 0 2px}
.tz-tage input:checked+label{border-color:transparent}
.tz-tage input:checked+label span{color:#fff}
.tz-tage label span{transition:color .25s}
/* --x ist der Abstand der gewählten Hülle vom Rand der Leiste (offsetLeft, samt Innenabstand); oben derselbe Innenabstand */
.tz-gleiter{position:absolute;left:0;top:3px;width:62px;height:80px;border-radius:14px;background:var(--blau-text);box-shadow:0 10px 22px -10px rgba(45,95,227,.85);
  opacity:0;transform:translateX(var(--x,0px));pointer-events:none}
.tz-gleiter.da{opacity:1}
.tz-blaettern{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:36px;height:36px;margin-top:-18px;border-radius:50%;background:#fff;color:var(--ink);
  box-shadow:0 2px 6px rgba(11,27,63,.12),0 8px 20px -8px rgba(11,27,63,.3)}
.tz-blaettern svg.i{width:16px;height:16px;stroke-width:2}
.tz-zurueck{left:-10px}.tz-zurueck svg.i{rotate:180deg}
.tz-vor{right:-10px}
@media (hover:none){.tz-blaettern{display:none}}
/* Knöpfe zum Blättern (nur mit Maus) liegen nie über Schrift: Rechts endet die Leiste vor dem Knopf, er steht im eigenen Rand.
   Links deckt nach dem Blättern eine weiße Fläche, breiter als Knopf und Schatten, den Anfang der Leiste ab; die Kachel darunter endet an ihrer Kante. */
@media (hover:hover){
  .tz-tage{margin-right:32px}
  .tz-band:has(> .tz-zurueck:not([hidden]))::before{content:"";position:absolute;z-index:2;top:-4px;bottom:-14px;left:-10px;width:52px;background:#fff}
}

/* die Wahl in einem Satz, über dem Knopf */
.af-wahl{padding:12px 14px;border-radius:12px;background:#F4F7FF;border:1px solid #DCE5FB;font-size:15px;line-height:1.45;color:var(--slate)}
.af-wahl strong{font-weight:600;color:var(--ink)}

/* ─────────── Nach dem Absenden ─────────── */
.af-danke{outline:none}
.af-haken{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--af-gruen-hell);color:var(--af-gruen)}
.af-haken svg.i{width:28px;height:28px;stroke-width:2.4}
.af-danke h2{margin-top:18px;font-size:24px;letter-spacing:-.025em;line-height:1.2}
.af-danke>p{margin-top:8px;font-size:16px;line-height:1.5;color:var(--slate)}
.af-danke .af-mail,.af-danke .af-tel{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.af-danke .af-klein{margin-top:18px;font-size:14.5px;color:var(--leise)}
.af-danke .af-klein a{color:var(--blau-text);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.af-danke .af-weg{margin-top:22px}
/* beim Termin: Tag, Uhrzeit und Ort auf einen Blick */
.af-danke-termin{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 16px;border:1px solid var(--linie);border-radius:14px;background:var(--mist)}
.af-dt-i{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:#fff;color:var(--blau-text);box-shadow:0 1px 2px rgba(11,27,63,.08)}
.af-danke-termin p{font-size:15px;line-height:1.45;color:var(--slate)}
.af-dt-wann{display:block;font-size:16px;font-weight:600;color:var(--ink)}

/* ─────────── Der Weg in drei Schritten ─────────── */
.af-weg{list-style:none;display:grid;gap:18px}
.af-weg li{position:relative;display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start}
/* Linie von Punkt zu Punkt je Schritt (100 % der Zeile plus Abstand), darüber der Fortschritt von Schritt 1 nach 2 */
.af-weg li:not(:last-child)::before,.af-weg li:first-child::after{content:"";position:absolute;left:15px;top:16px;width:2px;height:calc(100% + 18px);border-radius:2px}
.af-weg li:not(:last-child)::before{background:var(--linie)}
.af-weg li:first-child::after{background:var(--af-gruen);transform-origin:top;transform:scaleY(0)}
.af-weg .af-nr{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;border:1.5px solid var(--linie);
  font:600 14px/1 var(--font);color:var(--blau-text)}
.af-weg .af-nr svg.i{width:17px;height:17px;stroke-width:2.6;display:none}
.af-weg strong{display:block;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.af-weg p{margin-top:3px;font-size:15px;line-height:1.45;color:var(--slate)}
.af-weg .af-jetzt{display:none;margin-left:8px;vertical-align:1px}
.af-weg .af-nach{display:none}
.af-weg[data-stand="gesendet"] li:first-child::after{transform:scaleY(1)}
.af-weg[data-stand="gesendet"] li:first-child .af-nr{background:var(--af-gruen);border-color:var(--af-gruen);color:#fff}
.af-weg[data-stand="gesendet"] li:first-child .af-nr span{display:none}
.af-weg[data-stand="gesendet"] li:first-child .af-nr svg.i{display:block}
.af-weg[data-stand="gesendet"] li:first-child .af-vor{display:none}
.af-weg[data-stand="gesendet"] li:first-child .af-nach{display:block}
.af-weg[data-stand="gesendet"] li:nth-child(2) .af-nr{border-color:var(--blau-text)}
.af-weg[data-stand="gesendet"] li:nth-child(2) .af-jetzt{display:inline-flex}

@media (max-width:640px){
  .af-karte{padding:24px 20px 22px;border-radius:18px}
}

/* ─────────── Die Schublade ─────────── */
.af-schub{position:fixed;inset:0 0 0 auto;width:min(480px,100vw);height:100%;max-width:100vw;max-height:100%;margin:0;padding:0;border:0;
  background:#fff;color:var(--ink);border-radius:22px 0 0 22px;box-shadow:-30px 0 80px -30px rgba(11,27,63,.45);overflow:hidden;
  transform:translateX(104%);transition:transform .42s var(--ease)}
.af-schub.auf{transform:none}
.af-schub::backdrop{background:rgba(11,27,63,.46);opacity:0;transition:opacity .35s}
.af-schub.auf::backdrop{opacity:1}
/* Innenabstand oben und seitlich als Variable: der Kopf darunter braucht dieselben Werte.
   Abstand beim Rollen: ein Feld, das ins Bild rückt, steht unter dem Kopf, nicht dahinter (--af-kopf misst das Skript). */
.af-schub-in{--af-oben:28px;--af-seite:32px;height:100%;overflow:auto;overscroll-behavior:contain;
  padding:var(--af-oben) var(--af-seite) calc(28px + env(safe-area-inset-bottom,0px));scroll-padding:calc(var(--af-kopf,140px) + 12px) 0 20px}
.af-schub .af-karte{padding:0;box-shadow:none;border-radius:0}
/* Der Kopf (Überschrift und Unterzeile) bleibt beim Rollen oben stehen, deckend und mit einer Haarlinie darunter; der Inhalt
   läuft darunter durch, das Kreuz liegt darauf. Er reicht über den Innenabstand bis an die Ränder der Schublade. Ein klebendes
   Element hält zum Innenabstand des rollenden Kastens Abstand, nicht zu seiner Kante: darum klebt es beim negativen
   Innenabstand, sonst schiene oben ein Streifen Inhalt durch und der Kopf läge schon ohne Rollen über dem ersten Feld. */
.af-schub .af-kopf{position:sticky;top:calc(-1 * var(--af-oben));z-index:1;margin:calc(-1 * var(--af-oben)) calc(-1 * var(--af-seite)) 0;
  padding:var(--af-oben) var(--af-seite) 16px;background:#fff;border-bottom:1px solid var(--linie)}
.af-zu{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink);background:#fff;
  transition:background .2s}
.af-zu:hover{background:var(--mist)}
.af-schub .af-titel{padding-right:48px}
.af-griff{display:none;z-index:2}
/* die Seite dahinter rollt nicht; der Platz der Scrollleiste bleibt, sonst spränge die Seite mit klassischen Leisten zur Seite */
html.af-offen{overflow:hidden;scrollbar-gutter:stable}
@media (max-width:640px){
  .af-schub{inset:auto 0 0 0;width:100%;height:auto;max-height:92dvh;border-radius:22px 22px 0 0;transform:translateY(104%);
    box-shadow:0 -24px 60px -20px rgba(11,27,63,.4)}
  .af-schub-in{--af-oben:30px;--af-seite:20px;max-height:92dvh;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
    scroll-padding-top:calc(var(--af-kopf,180px) + 12px)}
  .af-schub .af-kopf{padding-bottom:14px}
  .af-griff{display:block;position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:var(--linie)}
  .af-zu{top:12px;right:10px}
}

/* ─────────── Die Seite /anfrage ─────────── */
/* Die Farbfläche (::before) reicht über den rechten Rand. overflow:clip schneidet sie ab, ohne den Abschnitt zum
   Scroll-Container zu machen: Fokus, scrollIntoView oder die Suche im Browser können ihn so nicht seitlich verschieben.
   overflow:hidden davor gilt nur in Browsern ohne clip. */
.ac{padding:calc(120px + var(--sicher-oben)) 0 110px;background:linear-gradient(180deg,#EEF3FF 0%,#F7F9FF 46%,#fff 100%);position:relative;overflow:hidden;overflow:clip;isolation:isolate}
.ac::before{content:"";position:absolute;z-index:-1;width:760px;height:760px;right:-260px;top:-320px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(108,213,255,.38),rgba(138,120,255,.22) 55%,rgba(255,163,200,0) 100%)}
.ac-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,500px);gap:72px;align-items:start}
.ac h1{font-size:clamp(36px,4.2vw,56px);max-width:12em}
.ac h1 .t2{display:block;margin-top:10px;font-size:.5em;letter-spacing:-.02em;line-height:1.3;color:var(--slate);max-width:22em}
.ac-weg{margin-top:44px;max-width:30em}
.ac-direkt{margin-top:38px;font-size:15.5px;color:var(--slate)}
/* Reihenfolge beim Aufbau der Seite: Überschrift, Formular, Weg, Telefon */
.ac-form{--i:1}.ac-weg{--i:2}.ac-direkt{--i:3}
/* die Überschrift der Seite trägt schon „Rückruf anfordern“: in der Karte nur für Screenreader und als Sprungziel */
.ac-form .af-kopf{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ac-direkt a{color:var(--blau-text);font-weight:500;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media (max-width:980px){
  .ac{padding-top:calc(104px + var(--sicher-oben));padding-bottom:80px}
  /* kleiner und höher: in einer Spalte läge der Fleck sonst hinter dem Satz unter der Überschrift (4,08:1 bei 390 px) */
  .ac::before{width:480px;height:480px;right:-220px;top:-300px}
  .ac-g{grid-template-columns:1fr;gap:30px}
  .ac-text{display:contents}
  .ac h1{order:1}.ac-form{order:2}.ac-weg{order:3;margin-top:14px}.ac-direkt{order:4;margin-top:6px}
}

/* ─────────── Bewegung ─────────── */
@media (prefers-reduced-motion:no-preference){
  html:not([data-bewegung="aus"]) .af-anders svg.i,html:not([data-bewegung="aus"]) .af-codeweg .af-pfeil{transition:rotate .2s var(--ease)}
  /* Termin: die Möglichkeiten kommen gestaffelt, der Grund gleitet zum Tag, die Wahl springt kurz an */
  html:not([data-bewegung="aus"]) .af-zeit-wahl.kommt .tz-tage label,html:not([data-bewegung="aus"]) .tz-gruppe.kommt label{animation:af-kommen .45s var(--ease) both;animation-delay:calc(var(--i,0) * 32ms + 40ms)}
  html:not([data-bewegung="aus"]) .tz-gleiter.da{transition:transform .5s var(--ease),opacity .2s}
  html:not([data-bewegung="aus"]) .tz-kacheln input:checked+label{animation:tz-tipp .38s cubic-bezier(.3,1.6,.5,1)}
  html:not([data-bewegung="aus"]) .af-ort-wahl input:checked+label .af-ort-i{animation:tz-tipp .42s cubic-bezier(.3,1.6,.5,1)}
  html:not([data-bewegung="aus"]) .af-wahl.neu{animation:af-kommen .4s var(--ease) both}
  html:not([data-bewegung="aus"]) .af-danke.zeigt .af-danke-termin .af-dt-i{animation:tz-tipp .5s cubic-bezier(.3,1.6,.5,1) both .35s}
  html:not([data-bewegung="aus"]) .af-karte .af-kommt{animation:af-kommen .55s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms + 60ms)}
  html:not([data-bewegung="aus"]) .af-danke.zeigt .af-haken{animation:af-haken .6s cubic-bezier(.3,1.6,.5,1) both .05s}
  html:not([data-bewegung="aus"]) .af-danke.zeigt>*:not(.af-haken){animation:af-kommen .5s var(--ease) both;animation-delay:calc(var(--i,1) * 55ms + 20ms)}
  html:not([data-bewegung="aus"]) .af-weg[data-stand="gesendet"] li:first-child::after{transition:transform .9s var(--ease) .35s}
  html:not([data-bewegung="aus"]) .af-weg[data-stand="gesendet"] li:first-child .af-nr svg.i{animation:af-haken .5s cubic-bezier(.3,1.6,.5,1) both .2s}
  html:not([data-bewegung="aus"]) .ac .ac-text>*,html:not([data-bewegung="aus"]) .ac .ac-form{animation:af-kommen .7s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 80ms)}
}
@media (prefers-reduced-motion:reduce){
  .af-schub,.af-schub::backdrop{transition:opacity .25s}
  .af-schub{transform:none;opacity:0}
  .af-schub.auf{opacity:1}
  .af-danke.zeigt{animation:af-blenden .3s both}
}
html[data-bewegung="aus"] .af-schub{transition:none}
@keyframes af-kommen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes af-blenden{from{opacity:0}to{opacity:1}}
@keyframes af-haken{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes tz-tipp{from{transform:scale(.86)}to{transform:none}}