/* ══ ANMELDUNG ALS BRIEFBOGEN MIT SIEGEL (Platzanfrage) ══
   Modul: _anmeldung.php + css/anmeldung.css + js/anmeldung.js
   Zwei Instanzen: .sg--page (index.php, #anmeldung) und .sg--modal
   (footer.php, #anfrageModal). data-perf-eigen auf .sg hält die
   Viewport-Engine von js/pages/index.js fern; die einzige Endlos-Animation
   (Ladepunkte im Knopf) pausiert über .js-paused auf .sg (perfObs-Muster in
   js/anmeldung.js).

   Komponenten-Einheit: .sg ist ein Größen-Container (Breite des Briefbogens).
   Bezug ist der Bogen auf dem Smartphone mit 430px: 380px breit (430 minus
   Seitenrand px-6 und 1px Rand der Glaskarte; das Polster der Spalte p-5 und
   der Glaskarte hebt das Modul auf). --k (Geometrie) = Bogenbreite / 380 mit
   den Grenzen 0,6 und 1,3,
   --t (Schrift) dieselbe Basis mit 0,86 und 1,1: Unter 0,86 würden die
   Feldtitel kleiner als 10,75px, über 1,1 wirkt der Bogen am Desktop
   aufgebläht. Eingabefelder bleiben mindestens 16px groß (darunter zoomt iOS
   beim Antippen), Bedienflächen mindestens 44px.
   --k und --t sind bewusst nicht per @property registriert: Eine Registrierung
   gilt für das ganze Dokument und zwingt jedes andere Modul mit eigenem --k
   (z. B. Platz-Modul) auf dieselbe Syntax. Unregistriert lösen sich 100cqi in
   den Nachfahren gegen .sg auf, den einzigen Container im Modul.

   Absenden (js/anmeldung.js setzt die Zustände nacheinander):
   is-siegel → is-falten → is-klappe → is-zu → is-flug → is-fertig */

.sg { --blue: #48A0D6; --pink: #D55A92; --green: #7FB14E; --yellow: #F59E0B; --dark: #1E293B; --papier: #fffdf8; --fehler: #8a2f5a; --bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6); position: relative; z-index: 3; container-type: inline-size; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #1E293B; text-align: left; -webkit-font-smoothing: antialiased }
.sg *, .sg *::before, .sg *::after { box-sizing: border-box }
.sg [hidden]:not([hidden="until-found"]) { display: none !important }
.sg a { color: #2c5f80 } .sg a:hover { color: #1E293B }
.sg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.sg-form { --k: clamp(0.6px, 100cqi / 380, 1.3px); --t: clamp(0.86px, 100cqi / 380, 1.1px); margin: 0 }

/* Seite: Unter 768px nutzt das Modul die volle Innenbreite der Glaskarte. Es hebt dazu das
   p-5 der Spalte und das Polster von .glass-morph auf (css/pages/index.css: 16px unter
   1024px). Weiter nach außen geht es nicht: .glass-morph schneidet mit overflow: hidden
   an seiner Innenkante ab. Ab 768px füllt der Bogen die Spaltenbreite. */
@media (max-width: 767px) {
    .sg--page { margin-inline: calc(var(--spacing, .25rem) * -5 - 16px) }
}
/* Ab 768px steht die Spalte allein (einspaltiges Raster bis 1024px): Der Bogen bleibt in
   Briefproportion, höchstens 600px breit, auf der Kante der Überschrift. */
@media (min-width: 768px) {
    .sg--page { max-width: 600px }
}
/* Sehr schmaler Bogen (unter 300px, Smartphones mit 320px): Das Kalenderzeichen entfällt,
   damit das Datum in voller Größe neben dem zweiten Feld Platz hat. */
@container (max-width: 299.98px) {
    .sg-kal { display: none }
    .sg-anzeige { padding-right: 0 }
}

/* ── Bühne: Bogen, Kuvert und Abschluss liegen übereinander ── */
.sg-buehne { position: relative }
.sg-bogen { position: relative; z-index: 2 }
.sg-papier { position: absolute; inset: 0; border-radius: calc(var(--k) * 8); background: var(--papier); box-shadow: 0 0 0 1px rgba(30,41,59,.05), 0 1px 0 rgba(30,41,59,.05), 0 calc(var(--k) * 22) calc(var(--k) * 48) calc(var(--k) * -20) rgba(30,41,59,.32); transform-origin: 50% 100% }
.sg-papier::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--k) * 5); border-radius: calc(var(--k) * 8) calc(var(--k) * 8) 0 0; background: linear-gradient(90deg, var(--blue), var(--pink)) }
/* Unten 58 Einheiten Luft: Das Siegel (84) sitzt mit seiner Mitte auf der Unterkante */
.sg-inhalt { position: relative; padding: calc(var(--k) * 22) calc(var(--k) * 18) calc(var(--k) * 58) }

/* Briefkopf */
.sg-kopf { display: flex; align-items: center; gap: calc(var(--k) * 12); padding-bottom: calc(var(--k) * 14); border-bottom: 1px solid rgba(30,41,59,.1) }
.sg-mono { flex: none; width: calc(var(--k) * 46); height: calc(var(--k) * 46) }
.sg-absender { margin: 0; line-height: 1.25 }
.sg-absender b { display: block; font-size: calc(var(--t) * 15.5); font-weight: 900; letter-spacing: -.01em }
.sg-absender span { display: block; margin-top: 2px; font-size: calc(var(--t) * 12); font-weight: 600; color: #475569; letter-spacing: .02em }
.sg-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--k) * 4) calc(var(--k) * 12); margin: calc(var(--k) * 16) 0 0; font-size: calc(var(--t) * 13); color: #475569 }
.sg-meta b { color: var(--dark); font-weight: 800 }

/* Passepartouts: Rubrik auf der oberen Linie, beginnend am Ende der Eckrundung (12);
   ihr Polster (6) bringt den Text auf die gemeinsame Kante mit den Feldern (18). */
.sg-pp { position: relative; margin-top: calc(var(--k) * 32); border-radius: calc(var(--k) * 12); padding: calc(var(--k) * 26) calc(var(--k) * 18) calc(var(--k) * 18); background: #fff; box-shadow: 0 0 0 1px var(--rand), 0 calc(var(--k) * 10) calc(var(--k) * 26) calc(var(--k) * -14) var(--glow) }
.sg-pp--kind { --rand: rgba(213,90,146,.6); --glow: rgba(213,90,146,.35); --linie: var(--pink); --rub: #8a2f5a }
.sg-pp--eltern { --rand: rgba(72,160,214,.6); --glow: rgba(72,160,214,.35); --linie: var(--blue); --rub: #2c5f80 }
.sg-rub { position: absolute; left: calc(var(--k) * 12); top: 0; margin: 0; padding: 0 calc(var(--k) * 6); transform: translateY(-50%); background: linear-gradient(var(--papier) 50%, #fff 50%); font-size: calc(var(--t) * 11.5); font-weight: 800; line-height: 1.6; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; color: var(--rub) }
.sg-pp > * + * { margin-top: calc(var(--k) * 18) }
.sg-pp > .sg-rub + * { margin-top: 0 }

/* Felder */
.sg-feld { position: relative; min-width: 0 }
.sg-lab { display: block; padding: 0; font-size: calc(var(--t) * 12.5); font-weight: 700; line-height: 1.3; color: #475569 }
.sg-eingabe { position: relative }
.sg-in { display: block; width: 100%; min-height: 44px; margin: 0; padding: calc(var(--k) * 6) calc(var(--k) * 28) calc(var(--k) * 7) 0; border: 0; border-radius: 0; outline: 0; background: transparent; font: 600 max(16px, calc(var(--t) * 18))/1.3 'Inter', system-ui, -apple-system, sans-serif; color: var(--dark); -webkit-appearance: none; appearance: none }
.sg-in:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: var(--dark) }
.sg-ok { position: absolute; right: 0; top: 50%; width: calc(var(--k) * 18); height: calc(var(--k) * 18); margin-top: calc(var(--k) * -9); opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .45s cubic-bezier(.34,1.56,.64,1); pointer-events: none }
.sg-feld.is-ok .sg-ok { opacity: 1; transform: none }
.sg-linie { position: relative; display: block; height: 1px; background: rgba(30,41,59,.18) }
.sg-linie::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; border-radius: 2px; background: var(--linie); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .3s ease }
.sg-feld:focus-within .sg-linie::after { transform: scaleX(1) }
.sg-feld.is-ok .sg-linie::after { transform: scaleX(1); opacity: .4 }
.sg-feld.is-ok:focus-within .sg-linie::after { opacity: 1 }
.sg-feld.is-err .sg-linie { background: #b8457b }
.sg-feld.is-err .sg-linie::after { background: #b8457b; transform: scaleX(1); opacity: 1 }
.sg-fehler { margin: calc(var(--k) * 6) 0 0; font-size: calc(var(--t) * 13); font-weight: 700; line-height: 1.45; color: var(--fehler) }
.sg-fehler:empty { display: none }

/* ── Querformat: Bogen in zwei Schritten (js/anmeldung.js setzt is-geteilt nur auf der Seite
   ab 1024px). Beide Teile liegen nebeneinander auf dem Gleis; is-schritt2 fährt es um eine
   Teilbreite plus Fuge weiter (nur transform). Das Fenster (.sg-schritte) reicht seitlich bis
   an die Papierkante (hebt das Polster von .sg-inhalt auf, 18) und unten 24 Einheiten weiter,
   damit Rubrik und Leuchten der Passepartouts nicht abgeschnitten werden. Die Höhe folgt dem
   längeren Teil. Der verdeckte Teil ist inert. ── */
.sg-tabs { display: flex; align-items: center; gap: calc(var(--k) * 10); margin-top: calc(var(--k) * 18) }
.sg-tab { display: inline-flex; flex: none; align-items: center; gap: calc(var(--k) * 8); min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: calc(var(--t) * 13); font-weight: 700; color: #64748b; cursor: pointer; transition: color .3s ease }
.sg-tab-n { display: grid; place-items: center; width: calc(var(--k) * 26); height: calc(var(--k) * 26); border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; font-size: calc(var(--t) * 12); font-weight: 800; transition: transform .45s var(--bounce) }
.sg-tab.is-aktiv { color: var(--dark) }
.sg-tab.is-aktiv .sg-tab-n { color: #fff; box-shadow: none; transform: scale(1.08) }
.sg-tab[data-tab="1"].is-aktiv .sg-tab-n { background: var(--pink) }
.sg-tab[data-tab="2"].is-aktiv .sg-tab-n { background: #2c5f80 }
.sg-tab.is-fertig .sg-tab-n { color: #fff; background: #5d8a36; box-shadow: none }
.sg-tab:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 9999px }
.sg-tab-linie { position: relative; flex: 1; min-width: calc(var(--k) * 16); height: 2px; border-radius: 1px; background: rgba(30,41,59,.12); overflow: hidden }
.sg-tab-linie i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--pink), var(--blue)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.65,0,.35,1) }
.sg.is-schritt2 .sg-tab-linie i { transform: scaleX(1) }
.sg.is-geteilt .sg-schritte { margin: 0 calc(var(--k) * -18) calc(var(--k) * -24); padding: 0 calc(var(--k) * 18) calc(var(--k) * 24); overflow: hidden }
.sg.is-geteilt .sg-gleis { display: grid; grid-template-columns: 100% 100%; column-gap: calc(var(--k) * 36); align-items: start; transition: transform .7s cubic-bezier(.65,0,.35,1) }
.sg.is-geteilt.is-schritt2 .sg-gleis { transform: translateX(calc(-100% - var(--k) * 36)) }
.sg.is-geteilt .sg-schritt { min-width: 0; transition: opacity .5s ease }
/* Zweiter Schritt: kurze Rückschau auf die Angaben zum Kind, „Ändern“ führt zurück */
.sg-rueck { display: flex; align-items: center; gap: calc(var(--k) * 10); margin-top: calc(var(--k) * 20); padding: calc(var(--k) * 4) calc(var(--k) * 6) calc(var(--k) * 4) calc(var(--k) * 14); border-radius: calc(var(--k) * 12); background: rgba(213,90,146,.06); box-shadow: inset 0 0 0 1px rgba(213,90,146,.25) }
.sg-rueck-t { flex: 1; min-width: 0; margin: 0; font-size: calc(var(--t) * 13.5); font-weight: 600; line-height: 1.45; color: var(--dark) }
.sg-rueck-t b { font-weight: 800 }
.sg-rueck-b { flex: none; min-height: 44px; padding: 0 calc(var(--k) * 10); border: 0; background: none; font: inherit; font-size: calc(var(--t) * 13); font-weight: 800; color: #8a2f5a; text-decoration: underline; text-underline-offset: 3px; cursor: pointer }
.sg-rueck-b:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px }
.sg.is-geteilt:not(.is-schritt2) .sg-schritt[data-schritt="2"], .sg.is-geteilt.is-schritt2 .sg-schritt[data-schritt="1"] { opacity: 0 }

/* Datumsreihe: zwei Spalten mit gemeinsamen Zeilen (subgrid), so stehen Titel,
   Eingabe und Linie beider Felder exakt auf einer Höhe, auch wenn ein Titel umbricht. */
.sg-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: calc(var(--k) * 14) }
.sg-feld--datum { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-items: end }
.sg-datum { position: relative }
/* Das Datumsfeld liegt unsichtbar über der Anzeige: Antippen öffnet den Wähler des Systems,
   die Anzeige zeigt TT.MM.JJJJ in jedem Browser gleich. */
.sg-datum .sg-in { position: absolute; inset: 0; z-index: 1; height: 100%; padding: 0; opacity: 0; cursor: pointer }
.sg-anzeige { display: flex; align-items: center; min-height: 44px; padding: calc(var(--k) * 6) calc(var(--k) * 24) calc(var(--k) * 7) 0; font-size: calc(var(--t) * 17); font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--dark); font-variant-numeric: tabular-nums }
.sg-anzeige.is-leer { font-weight: 500; color: #64748b }
.sg-kal { position: absolute; right: 0; top: 50%; width: calc(var(--k) * 18); height: calc(var(--k) * 18); margin-top: calc(var(--k) * -9); color: #64748b; pointer-events: none }
.sg-feld--datum.is-ok .sg-kal { color: var(--green) }
.sg-datum:has(.sg-in:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px }

/* Altersband: 0 bis 6,5 Jahre (78 Monate). Fenster 10 bis 72 Monate. Positionen als Anteil
   von 78; die Marken laufen per transform (translateX der ganzen Spurbreite). */
.sg-alter { margin-top: calc(var(--k) * 16) }
.sg-band { padding-top: calc(var(--k) * 6) }
.sg-spur { position: relative; height: calc(var(--k) * 8) }
.sg-zone { position: absolute; top: 0; height: 100% }
.sg-zone--frueh { left: 0; width: calc(100% * 10 / 78); border-radius: calc(var(--k) * 4) 0 0 calc(var(--k) * 4); background: repeating-linear-gradient(90deg, rgba(30,41,59,.16) 0 calc(var(--k) * 3), transparent calc(var(--k) * 3) calc(var(--k) * 6)) }
.sg-zone--fenster { left: calc(100% * 10 / 78); width: calc(100% * 62 / 78); background: linear-gradient(90deg, rgba(72,160,214,.28), rgba(213,90,146,.28)) }
.sg-zone--spaet { left: calc(100% * 72 / 78); width: calc(100% * 6 / 78); border-radius: 0 calc(var(--k) * 4) calc(var(--k) * 4) 0; background: repeating-linear-gradient(90deg, rgba(30,41,59,.16) 0 calc(var(--k) * 3), transparent calc(var(--k) * 3) calc(var(--k) * 6)) }
.sg-weg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, var(--blue), var(--pink)); transform-origin: 0 50%; transform: translateX(calc(var(--a, 0) * 100%)) scaleX(var(--b, 0)); opacity: 0; transition: transform .9s cubic-bezier(.34,1.2,.64,1), opacity .3s ease }
.sg-alter.has-start .sg-weg { opacity: 1 }
.sg-pin { position: absolute; inset: 0; pointer-events: none; transform: translateX(calc(var(--p, 0) * 100%)); transition: transform .9s cubic-bezier(.34,1.2,.64,1), opacity .3s ease }
.sg-pin i { position: absolute; left: calc(var(--k) * -8); top: 50%; width: calc(var(--k) * 16); height: calc(var(--k) * 16); margin-top: calc(var(--k) * -8); border-radius: 50%; box-shadow: 0 0 0 calc(var(--k) * 3) #fff, 0 calc(var(--k) * 3) calc(var(--k) * 8) rgba(30,41,59,.28) }
.sg-pin--heute i { background: var(--blue) }
.sg-pin--start i { background: var(--pink) }
.sg-pin--start { opacity: 0 }
.sg-alter.has-start .sg-pin--start { opacity: 1 }
.sg-alter.is-aus .sg-pin--heute i, .sg-alter.is-aus-start .sg-pin--start i { background: #b8457b; box-shadow: 0 0 0 calc(var(--k) * 3) #fff, 0 0 0 calc(var(--k) * 5) rgba(184,69,123,.35) }
.sg-skala { position: relative; height: calc(var(--t) * 16); margin-top: calc(var(--k) * 8); font-size: calc(var(--t) * 11); font-weight: 600; line-height: calc(var(--t) * 16); color: #64748b; white-space: nowrap }
.sg-skala span { position: absolute; top: 0; transform: translateX(-50%) }
.sg-skala-10 { left: calc(100% * 10 / 78) }
.sg-skala-36 { left: calc(100% * 36 / 78) }
.sg-skala-72 { left: calc(100% * 72 / 78) }
.sg-alter-z { position: relative; margin: calc(var(--k) * 10) 0 0; padding-left: calc(var(--k) * 17); font-size: calc(var(--t) * 13.5); font-weight: 600; line-height: 1.45; color: var(--dark) }
/* Punkt mittig zur ersten Zeile: halbe Zeilenhöhe minus halber Punkt */
.sg-alter-z::before { content: ""; position: absolute; left: 0; top: calc(var(--t) * 13.5 * 1.45 / 2 - var(--k) * 9 / 2); width: calc(var(--k) * 9); height: calc(var(--k) * 9); border-radius: 50% }
.sg-alter-z--heute::before { background: var(--blue) }
.sg-alter-z--start::before { background: var(--pink) }
.sg-alter-z + .sg-alter-z { margin-top: calc(var(--k) * 4) }
.sg-alter-z b { font-weight: 800 }
.sg-alter-z .sg-gruppe { font-weight: 600; color: #475569 }
.sg-alter.is-ein .sg-band, .sg-alter.is-ein .sg-alter-z { animation: sg-ein .5s cubic-bezier(.16,1,.3,1) both }
@keyframes sg-ein { from { opacity: 0; transform: translateY(calc(var(--k) * 8)) } }
.sg-fehler--datum { margin-top: calc(var(--k) * 10) }
.sg-fehler--datum:not(:has([data-fehler-text]:not(:empty))) { display: none }
.sg-fix { display: inline-flex; align-items: center; min-height: 44px; margin-top: calc(var(--k) * 8); padding: 0 calc(var(--k) * 16); border: 0; border-radius: 9999px; background: linear-gradient(110deg, rgba(255,255,255,.5), rgba(213,90,146,.14)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: inherit; font-size: calc(var(--t) * 13.5); font-weight: 800; color: #8a2f5a; cursor: pointer; transition: transform .45s var(--bounce) }
.sg-fix:hover, .sg-fix:focus-visible { transform: translateY(-2px) scale(1.02) }
.sg-fix:active { transform: scale(.96) }
.sg-fix:focus-visible, .sg-vorschlag:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px }
.sg-vorschlag { display: inline-flex; align-items: center; min-height: 44px; margin-top: calc(var(--k) * 4); padding: 0; border: 0; background: none; font: inherit; font-size: calc(var(--t) * 13.5); font-weight: 600; color: #2c5f80; text-align: left; cursor: pointer }
.sg-vorschlag b { font-weight: 800; text-decoration: underline; text-underline-offset: 3px }

/* Betreuungsumfang: drei Uhren */
.sg-umf { min-width: 0; margin-inline: 0; margin-bottom: 0; padding: 0; border: 0 }
.sg-umf > legend { float: left; width: 100% }
.sg-uhren { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--k) * 8); padding-top: calc(var(--k) * 10) }
.sg-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--k) * 5); min-width: 0; min-height: max(44px, calc(var(--k) * 112)); padding: calc(var(--k) * 12) calc(var(--k) * 4) calc(var(--k) * 10); border-radius: calc(var(--k) * 14); text-align: center; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(30,41,59,.12); transition: transform .35s cubic-bezier(.34,1.56,.64,1) }
.sg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer }
.sg-opt:active { transform: scale(.96) }
.sg-opt:has(input:checked) { background: rgba(213,90,146,.1); box-shadow: inset 0 0 0 2px var(--pink) }
.sg-opt:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px }
/* Fehler (nichts gewählt): gestrichelt, damit er sich von der rosa Auswahl unterscheidet */
.sg-umf.is-err .sg-opt { outline: 2px dashed #b8457b; outline-offset: -2px }
.sg-uhr { width: calc(var(--k) * 44); height: calc(var(--k) * 44); overflow: visible }
.sg-zeiger { transform-box: view-box; transform-origin: 22px 22px; transition: transform 1.6s cubic-bezier(.45,0,.2,1) }
.sg-zeiger--std { transform: rotate(225deg) }
.sg-zeiger--min { transform: rotate(180deg) }
.sg-opt:has(input:checked) .sg-zeiger--std { transform: rotate(var(--std)) }
.sg-opt:has(input:checked) .sg-zeiger--min { transform: rotate(var(--min)) }
/* Untertitel in Kategorie-Tinte: Rosa zu 50 % mit #1E293B (#7a4266) */
.sg-opt-t { display: block; font-size: calc(var(--t) * 14); font-weight: 800; line-height: 1.2; color: var(--dark) }
.sg-opt-s { display: block; font-size: calc(var(--t) * 11.5); font-weight: 600; color: color-mix(in srgb, var(--pink) 50%, var(--dark)) }


/* ── Kuvert: Rückseite (hinten), Taschen (vorne), Klappe und Siegel. Die Spitze der Klappe
   (140 | 97 von 280 × 174) liegt auf der Unterkante des Bogens: genau dort drückt das Siegel.
   .sg-kuvert bildet bis zum Flug keinen Stapelkontext, damit der Bogen zwischen Rückseite
   und Taschen gleiten kann. ── */
.sg-kuvert { position: absolute; left: 50%; top: calc(100% - var(--k) * 97); width: calc(var(--k) * 280); height: calc(var(--k) * 174); margin-left: calc(var(--k) * -140); pointer-events: none }
.sg-kv { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; opacity: 0 }
.sg-kv--hinten { z-index: 1; border-radius: calc(var(--k) * 10); box-shadow: 0 calc(var(--k) * 20) calc(var(--k) * 40) calc(var(--k) * -18) rgba(30,41,59,.4) }
.sg-kv--vorne { z-index: 3 }
.sg-kv--klappe { z-index: 1; height: calc(var(--k) * 97); transform-origin: 50% 0; transform: perspective(calc(var(--k) * 700)) rotateX(180deg) }
.sg-siegel { position: absolute; z-index: 5; left: calc(var(--k) * 98); top: calc(var(--k) * 55); width: calc(var(--k) * 84); height: calc(var(--k) * 84); overflow: visible; opacity: 0; transform: scale(1.9) rotate(-26deg); filter: drop-shadow(0 calc(var(--k) * 6) calc(var(--k) * 8) rgba(138,47,90,.35)) }
.sg-siegel-ring { opacity: 0; transform-box: fill-box; transform-origin: center }

/* Abschluss: steht erst nach dem Zusammenfalten in der Bühne */
.sg-fertig { display: none; padding: calc(var(--k) * 26) calc(var(--k) * 8) calc(var(--k) * 8); text-align: center }
.sg-fertig-h { margin: 0 0 calc(var(--k) * 6); font-size: calc(var(--t) * 26); font-weight: 900; line-height: 1.15; letter-spacing: -.01em; outline: 0 }
.sg-fertig-p { margin: 0; font-size: calc(var(--t) * 17); font-weight: 500; line-height: 1.5; color: #475569 }
.sg-fertig-mail { margin: calc(var(--k) * 8) 0 calc(var(--k) * 20); font-size: calc(var(--t) * 14); line-height: 1.5; color: #475569; overflow-wrap: anywhere }
.sg-fertig-mail b { color: var(--dark) }

/* ── Unterer Bereich ── */
.sg-unten { margin-top: calc(var(--k) * 56) }
.sg-summe { margin: 0 0 calc(var(--k) * 14); font-size: calc(var(--t) * 13.5); font-weight: 700; line-height: 1.45; color: var(--fehler); text-align: center }
.sg-summe:empty { display: none }
.sg-privacy { margin: 0 calc(var(--k) * 4) calc(var(--k) * 16); font-size: calc(var(--t) * 13); line-height: 1.55; color: #475569; text-align: center }
.sg-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--k) * 12) }
.sg-small { margin: calc(var(--k) * 10) 0 0; font-size: calc(var(--t) * 12); color: #475569; text-align: center }

/* Glas-Knöpfe mit Liquid-Hover (nur transform), Touch: :active */
.sg-btn { position: relative; display: flex; align-items: center; gap: calc(var(--k) * 10); min-width: 0; min-height: max(44px, calc(var(--k) * 60)); padding: calc(var(--k) * 8) calc(var(--k) * 14) calc(var(--k) * 8) calc(var(--k) * 8); border: 0; border-radius: 9999px; font: inherit; text-decoration: none; cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .5s var(--bounce), opacity .5s ease }
.sg-btn:hover, .sg-btn:focus-visible { transform: translateY(-3px) scale(1.03) }
.sg-btn:active { transform: scale(.96); transition-duration: .15s }
.sg-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px }
.sg-btn--blau { background: linear-gradient(110deg, rgba(255,255,255,.5), rgba(72,160,214,.16)); color: #2c5f80 }
.sg-btn--rosa { background: linear-gradient(110deg, rgba(255,255,255,.5), rgba(213,90,146,.18)); color: #8a2f5a }
.sg-btn--schmal { display: inline-flex; padding: calc(var(--k) * 8) calc(var(--k) * 22) }
.sg-btn-ic { position: relative; display: grid; place-items: center; flex: none; width: calc(var(--k) * 44); height: calc(var(--k) * 44); border-radius: 50%; background: rgba(255,255,255,.8); transition: transform .5s var(--bounce) }
.sg-btn:hover .sg-btn-ic, .sg-btn:focus-visible .sg-btn-ic { transform: rotate(-8deg) scale(1.08) }
.sg-btn-l { display: block; font-size: calc(var(--t) * 16); font-weight: 800; line-height: 1.2; text-align: left }
.sg-btn-s { display: block; margin-top: 2px; font-size: calc(var(--t) * 12); font-weight: 600; text-align: left }
.sg-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; opacity: 0 }
.sg-busy i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: sg-punkt 1s ease-in-out infinite }
.sg-busy i:nth-child(2) { animation-delay: .15s } .sg-busy i:nth-child(3) { animation-delay: .3s }
@keyframes sg-punkt { 0%, 80%, 100% { transform: scale(.5); opacity: .4 } 40% { transform: scale(1); opacity: 1 } }
.sg-btn.is-busy .sg-btn-svg { opacity: 0 }
.sg-btn.is-busy .sg-busy { opacity: 1 }
.sg-btn.is-busy { cursor: progress }

/* Gestaffelte Einblendung der Knöpfe, sobald der untere Bereich ins Bild kommt (nur mit JS) */
.sg.is-js .sg-cta .sg-btn { opacity: 0; transform: translateY(calc(var(--k) * 14)) }
.sg.is-js.is-cta .sg-cta .sg-btn { opacity: 1; transform: none }
.sg.is-js.is-cta .sg-cta .sg-btn:nth-child(n+2) { transition-delay: .12s }
.sg.is-js.is-cta .sg-cta .sg-btn:hover, .sg.is-js.is-cta .sg-cta .sg-btn:focus-visible { transform: translateY(-3px) scale(1.03); transition-delay: 0s }
.sg.is-js.is-cta .sg-cta .sg-btn:active { transform: scale(.96); transition-delay: 0s }

/* ── Absenden ── */
.sg-unten { transition: opacity .3s ease }
.sg.is-siegel .sg-unten { opacity: 0; pointer-events: none }
.sg.is-siegel .sg-siegel { opacity: 1; transform: none; transition: transform .45s cubic-bezier(.5,1.6,.6,1), opacity .12s ease }
.sg.is-siegel .sg-siegel-ring { animation: sg-ring .7s cubic-bezier(.16,1,.3,1) .3s both }
@keyframes sg-ring { from { opacity: .7; transform: scale(1) } to { opacity: 0; transform: scale(1.55) } }
.sg-inhalt { transition: opacity .3s ease }
.sg.is-falten .sg-inhalt { opacity: 0 }
.sg.is-falten .sg-papier { transition: transform .85s cubic-bezier(.6,0,.25,1) .05s }
.sg.is-falten .sg-kv { opacity: 1; transition: opacity .4s ease .3s }
.sg.is-klappe .sg-kv--klappe { z-index: 4; transform: perspective(calc(var(--k) * 700)) rotateX(0deg); transition: transform .55s cubic-bezier(.5,0,.3,1) }
.sg.is-zu .sg-bogen, .sg.is-zu .sg-unten { display: none }
.sg.is-zu .sg-fertig { display: block; min-height: calc(var(--k) * 214); opacity: 0; visibility: hidden; transform: translateY(calc(var(--k) * 16)) }
.sg.is-zu .sg-kuvert { top: calc(50% - var(--k) * 87) }
.sg.is-zu .sg-kv { opacity: 1 }
.sg.is-zu .sg-kv--klappe { z-index: 4; transform: perspective(calc(var(--k) * 700)) rotateX(0deg) }
.sg.is-zu .sg-siegel { opacity: 1; transform: none }
.sg-kuvert.is-flip { transition: transform .4s cubic-bezier(.16,1,.3,1) }
.sg.is-flug .sg-kuvert { opacity: 0; transform: translate(calc(var(--k) * 170), calc(var(--k) * -260)) rotate(-14deg) scale(.42); transition: transform .9s cubic-bezier(.55,0,.2,1), opacity .45s ease .45s }
.sg.is-fertig .sg-fertig { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1) }
.sg.is-fertig .sg-kuvert { visibility: hidden }
/* Geschwisterkind: Zustände ohne Rückwärts-Animation zurücksetzen, dann blendet der Bogen ein */
.sg.is-ruhe *, .sg.is-ruhe *::before, .sg.is-ruhe *::after { transition: none !important }
.sg-bogen.is-wieder { animation: sg-ein .6s cubic-bezier(.16,1,.3,1) both }

/* ── Modal (footer.php) ──
   Oben steht das Platz-Fenster neben dem Schließen-Knopf (global.css: 44px, oben und rechts
   1.25rem, unter 640px oben safe-area + 1rem). Es ist 56px hoch und beginnt 6px über dem
   Knopf, so liegen beide Mitten auf einer Höhe. Rechts hält es Knopfbreite plus 10px
   Abstand frei. Der Bogen scrollt in .modal-scroll-area. */
.sg-modal-area { --sg-oben: 1.25rem; padding: calc(var(--sg-oben) - 6px) 16px 24px }
@media (max-width: 640px) {
    .sg-modal-area { --sg-oben: calc(env(safe-area-inset-top, 1rem) + 1rem); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) }
}
.sg-banner { display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0 calc(1.25rem + 44px + 10px - 16px) 16px 0; padding: 6px 16px 6px 10px; border-radius: 9999px; background: linear-gradient(110deg, rgba(255,255,255,.78), rgba(245,158,11,.12)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 12px 28px -14px rgba(245,158,11,.55) }
.sg-strasse { flex: none; width: 88px; height: calc(88px * 30 / 92); overflow: visible }
.sg-banner-t { min-width: 0; margin: 0; line-height: 1.25 }
.sg-banner-t b { display: block; font-size: 15.5px; font-weight: 900; letter-spacing: -.01em; color: var(--dark) }
.sg-banner-t span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: #475569 }
/* Schmale Modals (320px-Geräte): Fenster und Überschrift etwas kleiner, damit beide Zeilen
   einzeilig bleiben und das Platz-Fenster seine 56px Höhe hält */
@container (max-width: 300px) {
    .sg-banner { gap: 8px; padding-inline: 8px 12px }
    .sg-strasse { width: 64px; height: calc(64px * 30 / 92) }
    .sg-banner-t b { font-size: 14px }
    .sg-banner-t span { font-size: 11.5px }
}
/* Beim Öffnen gehen die Lichter der freien Gruppen nacheinander an. js/anmeldung.js setzt
   dafür Inline-Übergänge auf opacity; ihr Ziel ist immer 1, die Lichter bleiben also an,
   auch wenn ein Übergang ausfällt. Ohne Skript stehen sie sofort an. */

/* ── Ohne JavaScript: Der Browser prüft (required, minlength, min/max, pattern), das Formular
   sendet klassisch an senden.php. Datumsfelder zeigen das Systemfeld. ── */
@media (scripting: none) {
    /* index.php: .reveal blendet die Sektion sonst nur per JavaScript ein */
    #anmeldung.reveal { opacity: 1; transform: none }
    /* Systemfelder brauchen ihre eigene Breite: die beiden Daten stehen untereinander */
    .sg-reihe { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--k) * 18) }
    .sg-feld--datum { display: block; grid-row: auto }
    .sg-datum .sg-in { position: static; width: 100%; min-width: 0; height: auto; padding: calc(var(--k) * 6) 0 calc(var(--k) * 7); opacity: 1; cursor: text }
    .sg-datum .sg-in::-webkit-date-and-time-value { text-align: left }
    .sg-anzeige, .sg-kal, .sg-kuvert { display: none }
    .sg-feld:has(.sg-in:user-invalid) .sg-linie { background: #b8457b; height: 2px }
    .sg-umf:has(input:user-invalid) .sg-opt { outline: 2px dashed #b8457b; outline-offset: -2px }
}

/* Außerhalb des Bildes und im Hintergrund-Tab pausiert die Endlos-Animation */
.sg.js-paused .sg-busy i { animation-play-state: paused }
@media (prefers-reduced-motion: reduce) {
    .sg *, .sg *::before, .sg *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important }
}