/* Anmeldeseite als Bühne (#6505). Farben nur über --marke-*, Schrift nur geerbt. */
body.buehne{margin:0;max-width:none;padding:0;min-height:100vh;min-height:100dvh;box-sizing:border-box;display:grid;grid-template-rows:1fr auto;overflow-x:hidden;background:var(--marke-hintergrund,var(--bg));color:var(--marke-hintergrund-text,var(--text))}
/* Raster (AK 1): links clamp(430px,38%,540px), rechts der Rest, beide Spalten senkrecht mittig */
/* Platz für die Welle (#6505 Runde 2): unten bleibt Wellenhöhe + 24 px frei, damit keine Welle hinter Text liegt */
.braster{--welle-h:clamp(90px,16vh,150px);position:relative;display:grid;grid-template-columns:clamp(430px,38%,540px) minmax(0,1fr);align-items:center;min-height:0;padding-bottom:calc(var(--welle-h) + 24px)}
/* Formularspalte (AK 2): ohne Rahmen, Fläche und Schatten, höchstens 400 px */
/* #6612: linker Innenabstand wächst, das Formular rückt zur Mitte (Kriterium 6); die Formularbreite bleibt bei 400 px */
.bform{box-sizing:border-box;position:relative;z-index:1;padding:32px 0 32px clamp(96px,9vw,184px);min-width:0}
.buehne .mkarte{width:100%;max-width:400px;box-sizing:border-box;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;font-size:16px;line-height:1.5;color:inherit}
/* Typostufen (AK 3): (a) Markenzeile mit Logo, (b) gesperrter Kleintext, (c) Überschrift */
.buehne .mkopf{display:flex;align-items:center;gap:.6rem;margin:0 0 44px;padding:0;border:0}
.buehne .mkopf a{display:flex;align-items:center;gap:.6rem;color:inherit;text-decoration:none}
.buehne .mkopf b{font-size:15px;font-weight:600;letter-spacing:.2em;color:inherit}
.buehne .kicker{margin:0 0 16px;font-family:inherit;font-size:10px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:inherit}
.buehne .mtitel{margin:0 0 40px;font-family:inherit;font-size:clamp(40px,3.5vw,54px);font-weight:300;line-height:1.04;letter-spacing:0;text-transform:none;color:inherit}
.buehne .card{position:relative;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.buehne .card::after{display:none}
.buehne .vorschlag{margin:0 0 22px;padding:0;border:0;background:none;font-size:13px;color:inherit}
.buehne label{display:block;margin:0 0 8px;font-size:13px;color:inherit}
/* Felder (AK 4): 13 px Rundung, 17 px Innenabstand, 22 px Abstand, Fokus mit 4 px Schein in der Akzentfarbe */
.buehne input[type=email],.buehne input[type=password]{display:block;box-sizing:border-box;width:100%;margin:0 0 22px;padding:17px;border:1px solid color-mix(in srgb,var(--marke-hintergrund-text,var(--text)) 45%,transparent);border-radius:13px;background:transparent;color:inherit;font:inherit;font-size:16px}
.buehne input[type=email]:focus-visible,.buehne input[type=password]:focus-visible{outline:2px solid transparent;border-color:var(--marke-akzent,var(--akzent));box-shadow:0 0 0 4px color-mix(in srgb,var(--marke-akzent,var(--akzent)) 40%,transparent)}
.buehne form p{margin:0}
/* Knopf (AK 5): volle Breite, 14 px Rundung, Verlauf aus der Akzentfarbe, Schein darunter.
   Bewusste Abweichung von AK 5 (heller nach dunkler): bei hellem Knopftext läuft der Verlauf zum Dunklen, bei
   dunklem zum Hellen – Kontrast (AK 10) geht vor Richtung, reines CSS kann nicht nach Texthelligkeit wählen.
   Das Ende des Verlaufs mischt zur Gegenfarbe des Knopftextes: der Kontrast wächst dort, er sinkt nie unter den
   der Akzentfläche (der Text liegt auf --marke-akzent-text, AA gegen den Akzent). Browser ohne relative Farben
   behalten die glatte Akzentfläche der Zeile davor. */
.buehne button{display:block;box-sizing:border-box;width:100%;margin:0;padding:17px;border:0;border-radius:14px;cursor:pointer;font:inherit;font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--marke-akzent-text,var(--bg));background:var(--marke-akzent,var(--akzent));background:linear-gradient(180deg,var(--marke-akzent,var(--akzent)),color-mix(in srgb,var(--marke-akzent,var(--akzent)) 88%,rgb(from var(--marke-akzent-text,var(--bg)) calc(255 - r) calc(255 - g) calc(255 - b))));box-shadow:0 12px 28px -10px color-mix(in srgb,var(--marke-akzent,var(--akzent)) 70%,transparent)}
.buehne button:hover{filter:brightness(1.06)}
.buehne button:focus-visible{outline:2px solid var(--marke-hintergrund-text,var(--text));outline-offset:3px}
.buehne .klein{margin:22px 0 0;font-size:13px;line-height:1.55;color:inherit}
.buehne .klein a,.buehne .mfuss a{color:inherit;text-decoration:underline}
.buehne .fehler{margin:0 0 22px;padding-left:10px;border-left:3px solid var(--fehler,currentcolor);font-weight:600;color:inherit}
/* Karte (#6612, AK 1, 2, 7): rechte Spalte, 40 px Abstand zur Formularspalte. Die Fläche ist 78,3 vh hoch und steht
   10,85 vh unter der Fensteroberkante (also mittig im Fenster, je 10,85 vh Luft); das Skript setzt den Umriss mit
   dem Faktor 0,92 hinein: 0,92 × 78,3 = 72 % der Fensterhöhe – verkleinert sich von selbst, wenn die Breite nicht
   reicht (min aus Breite und Höhe, nie beschnitten). Der negative untere Rand hebt die Höhe wieder auf, damit die
   Karte die Zeilenhöhe des Rasters nicht bestimmt (sonst scrollt die Seite). z-index 1: die Karte liegt über der Welle. */
.bkarte{position:relative;z-index:1;isolation:isolate;align-self:start;height:78.3vh;margin:10.85vh 0 -89.15vh 40px;min-width:0}
.bkarte .anmeldung-netz{z-index:-1}
/* #6612: in Ruhelage volle Deckkraft (Kriterium 4: Einflug blendet von 0,1 auf 1,0; das Skript setzt sie nur während der Fahrt) */
.buehne .bkarte .anmeldung-netz{opacity:1}
/* Licht hinter der Karte; nach außen dunkelt die Seite ab, weil es nur in der Mitte der Fläche liegt */
.bkarte::before{content:'';position:absolute;inset:-14% -12%;z-index:-2;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--marke-akzent,var(--akzent)) 26%,transparent),transparent);animation:buehne-licht 16s ease-in-out infinite alternate}
@keyframes buehne-licht{from{opacity:.65}to{opacity:1}}
/* Punktwelle (AK 7, 8): vom Skript erzeugte Leinwand am unteren Rand des Rasters, 24 px über der Fußzeile */
.bwelle{position:absolute;left:0;right:0;bottom:24px;width:100%;height:var(--welle-h);z-index:0;pointer-events:none;color:var(--marke-akzent,var(--akzent))}
/* Fußzeile (AK 8, 10): Text in der Hintergrund-Textfarbe, nie überlagert (eigene Grid-Zeile) */
.buehne .mfuss{position:relative;z-index:1;padding:16px clamp(24px,5.5vw,104px) 22px;font-size:12px;line-height:1.7;text-align:left;color:var(--marke-hintergrund-text,var(--text))}
/* Handybreite (AK 13): Formular allein, keine Karte, flachere Welle */
@media(max-width:640px){
.braster{grid-template-columns:minmax(0,1fr);--welle-h:clamp(48px,8vh,80px)}
.bform{padding:32px 24px}
.bkarte{display:none}
.buehne .mfuss{padding:12px 24px 18px}
}
/* Bewegungsarmut (AK 11): der Lichtverlauf steht still; die Welle zeichnet das Skript dann einmal */
@media(prefers-reduced-motion:reduce){
.bkarte::before{animation:none}
.buehne button:hover{filter:none}
}