(hier „Zurück zur
Anmeldung" in auth/callback.html) verlor beim Hover seine Schriftfarbe, weil
`a:hover{color:var(--text-link-hover)}` (tokens/base.css) spezifischer ist
als die Variantenregel `.ab-btn--secondary{color:…}`. DS-CSS ist unantastbar,
deshalb hier: dieselben Farbwerte wie in components/core/core.css. */
a.ab-btn--primary:hover,
a.ab-btn--agent:hover,
a.ab-btn--destructive:hover{color:var(--text-on-accent)}
a.ab-btn--secondary:hover,
a.ab-btn--ghost:hover{color:var(--text-primary)}
a.ab-btn--tertiary:hover{color:var(--text-accent)}
body{-webkit-text-size-adjust:100%}
img{max-width:100%}
.auth-shell{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(380px,42%) minmax(0,1fr);background:var(--surface-card)}
.auth-brand{background:var(--surface-page);border-right:1px solid var(--border-default);padding:56px 56px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.auth-brand__top{display:flex;align-items:center;gap:10px}
.auth-brand__word{font-size:19px;font-weight:600;letter-spacing:-.025em}
.auth-brand__badge{margin-left:8px;padding-left:10px;border-left:1px solid var(--border-default)}
.auth-brand__mid{display:flex;flex-direction:column;gap:24px}
.auth-brand__claim{max-width:24ch;font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.auth-brand__meta{max-width:460px}
/* Marken-Spalte: zweizeiliger Claim, gestapelte Zielgruppen, Häkchen-Liste.
DS-CSS bleibt unberührt — die Spaltenteilung von .ab-meta__row wird nur
INNERHALB von .auth-brand__meta zugunsten der Wertspalte verschoben (92 px
tragen die längste Beschriftung MATERIALIEN), damit die Häkchen-Zeilen ab
~1100 px Fensterbreite ohne Umbruch stehen. */
.auth-brand__claim-sub{display:block;margin-top:8px;font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);font-weight:var(--weight-medium);color:var(--text-secondary)}
.auth-brand__meta .ab-meta__row{grid-template-columns:minmax(92px,26%) 1fr;gap:12px;padding:11px 0}
.auth-brand__lines,.auth-brand__checks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.auth-brand__checks li{display:flex;align-items:flex-start;gap:8px}
.auth-brand__checks .ab-icon{margin-top:2px;color:var(--success-600)}
.auth-formcol{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 40px;min-width:0}
.auth-form{display:flex;flex-direction:column;gap:20px}
.auth-form--login{width:100%;max-width:var(--container-form)}
.auth-form--register{width:100%;max-width:520px}
/* Code-Bestätigung und Passwort-Reset: gleiche Spaltenbreite wie der Login. */
.auth-form--narrow{width:100%;max-width:var(--container-form)}
.auth-form__head{display:flex;flex-direction:column;gap:6px}
.auth-form__title{font-size:var(--fs-h4);line-height:var(--lh-h4)}
.auth-muted{color:var(--text-secondary)}
.auth-form__row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.auth-form__grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.auth-form__checks{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--border-subtle);padding-top:16px}
.auth-form__switch{display:flex;align-items:center;gap:8px;justify-content:center}
.auth-form__switch--login{padding-top:4px}
/* Trenner zwischen Passwort-Login und Google-Button. */
.auth-form__or{display:flex;align-items:center;gap:12px;color:var(--text-secondary);font-size:var(--fs-body-sm)}
.auth-form__or::before,.auth-form__or::after{content:"";flex:1;height:1px;background:var(--border-subtle)}
/* Steht an ihrer beider Stelle, wenn Google im In-App-Browser ausfaellt. */
.auth-inapp-note{color:var(--text-secondary)}
/* ============================================================================
ABSICHTS-KARTE ueber dem Formular (Modus A: der Besucher kam ueber
„Buch sichern" von der Marketing-Site). Sie steht ausserhalb der
[data-auth-view]-Bloecke und bleibt deshalb in jeder Ansicht stehen; die
Breite folgt dem Login-Formular (--container-form), damit beide Kanten
fluchten. Sichtbar wird sie erst, wenn auth.js das `hidden` nimmt.
============================================================================ */
/* Die Breite folgt .auth-form--register (520 px), NICHT --container-form:
Modus A startet in der Registrierung, und eine Karte, die 40 px schmaler ist
als das Formular darunter, liest sich als Layout-Fehler. Wechselt der
Besucher auf „Anmelden" (440 px), steht sie etwas breiter da — das ist die
verträglichere Hälfte des Kompromisses. Beide Werte ziehen zusammen. */
.auth-intent{display:flex;gap:16px;width:100%;max-width:520px;padding:16px;margin-bottom:24px}
/* Die Kachel traegt das Mini-Cover — und ohne Bild die Buch-Nummer, damit die
Karte nie als leeres Rechteck dasteht (fail-soft wie renderCover in ds.js).
align-self haelt das Buchformat: ohne das streckt die Flex-Zeile die Kachel
auf ihre volle Hoehe und aspect-ratio bleibt wirkungslos.
Das Verhaeltnis kommt wie in app.css aus --cover-ratio; hier bleibt es
praktisch immer beim Fallback 1024 / 1448 — dem Spiegel der
brand-portal-Leinwand (DIN 1:√2, `cover_typeset.py` CANVAS_ASPECT) —, denn
der oeffentliche Endpunkt hinter dieser 56-px-Kachel liefert keine Masse und
auth.js rendert sie ohne renderCover. Die Konstante steht an beiden Stellen
und zieht bei einem Formatwechsel gemeinsam um. */
.auth-intent__cover{flex:none;align-self:flex-start;width:56px;aspect-ratio:var(--cover-ratio,1024 / 1448);border-radius:var(--radius-cover);background:var(--surface-sunken);overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;line-height:1.2;color:var(--text-tertiary)}
.auth-intent__cover img{width:100%;height:100%;object-fit:cover;display:block}
/* min-width:0 — ohne das sprengt ein langer Titel die Flex-Zeile, statt zu
kuerzen. */
.auth-intent__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.auth-intent__title{font-weight:var(--weight-semibold);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.auth-intent__text{margin-top:6px}
/* ============================================================================
RECHTSZEILE unter dem Formular. Die Anbieterkennzeichnung muss staendig
verfuegbar sein — also in jeder der fuenf Ansichten und auf jeder Breite.
Die Fusszeile der Marken-Spalte kann das nicht leisten, sie ist unter 860 px
ausgeblendet. Optik wie ebenjene Fusszeile (ab-metadata); die Links tragen
jedoch --text-secondary statt des geerbten --text-tertiary, weil #767c88 bei
12 px unter der AA-Kontrastschwelle liegt (4,2:1 statt 4,5:1).
.auth-formcol hat kein gap — der Abstand kommt aus margin-top.
============================================================================ */
.auth-legal{margin-top:32px;text-align:center}
.auth-legal a{color:var(--text-secondary);text-decoration:none}
.auth-legal a:hover{color:var(--text-primary);text-decoration:underline}
/* § 356a Abs. 1 verlangt den Weg zum Widerruf „hervorgehoben" — die
Zeile fuehrt sonst nur Pflichtlinks gleichen Gewichts. */
.auth-legal a.auth-legal__withdraw{font-weight:600;color:var(--text-primary)}
/* ============================================================================
ZUSTIMMUNGSZEILE — Fehlerzustand analog .ab-field--error im DS.
Der Container ist ein (die Links dürfen die Checkbox nicht umschalten),
deshalb korrigiert cursor:default die vom DS geerbte cursor:pointer.
Die Links brauchen KEINE eigene Farbregel: a{color:var(--text-link)} aus
tokens/base.css ist spezifischer als das color von .ab-check__desc.
============================================================================ */
.auth-consent{cursor:default}
.auth-consent--error input[type="checkbox"]{border-color:var(--error-600);box-shadow:0 0 0 3px var(--error-50)}
.auth-consent--error .ab-check__label{color:var(--error-700)}
/* ============================================================================
„PASSWORT ANZEIGEN"-KNOPF im Trail-Slot des DS-Inputs.
Die Augen-SVGs tragen bewusst KEINE ab-icon-Klasse: .ab-input-wrap .ab-icon
setzt position:absolute links (Leading-Icon-Slot) und würde den Knopf
zerlegen. [hidden]{display:none !important} oben deckt die versteckte SVG ab.
============================================================================ */
.auth-pw-toggle{flex:none}
.auth-pw-toggle svg{display:block}
/* ============================================================================
WIDERRUFSSEITE (widerruf.html) — dieselbe Schale wie die Anmeldeseite,
deshalb hier und nicht in einer eigenen Datei. Nur zwei Regeln sind eigen:
der Honigtopf (Vorlage ../web/site/css/leads.css) und die Schritt-Bloecke,
die als Flex-Spalten im Formular stehen (die Schale selbst hat nur eine).
============================================================================ */
.wd-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;white-space:nowrap}
[data-wd-step]{display:flex;flex-direction:column;gap:20px}
/* ============================================================================
RESPONSIVE — 1:1 aus dem Design-Prototyp v2 (Customer Backend.dc.html,
[data-r=…]-Hooks + Breakpoint-Blöcke). Unsere Klassen SIND die data-r-Hooks.
============================================================================ */
@media (max-width: 860px) {
.auth-shell{grid-template-columns:minmax(0, 1fr)}
.auth-brand{padding:20px 20px 24px;gap:18px;border-right:0;border-bottom:1px solid var(--border-default)}
.auth-brand__claim{font-size:var(--fs-h4);line-height:var(--lh-h4)}
.auth-brand__claim-sub{font-size:var(--fs-body);line-height:var(--lh-body);margin-top:6px}
/* Der erklaerende Satz faellt weg, sobald die Spalte vom Seitenpanel zum
Banner ueber dem Formular wird: dort traegt der Claim die Botschaft, und
jede weitere Zeile schiebt das Anmelden nach unten. Gleiche Ueberlegung
wie bei .auth-brand__foot zwei Zeilen tiefer. Der Selektor ist auf die
Marken-Spalte gescopt — die DS-Klasse .ab-lead bleibt unberuehrt. */
.auth-brand__mid .ab-lead{display:none}
.auth-formcol{padding:24px 20px 56px;justify-content:flex-start}
.auth-brand__foot{display:none}
/* Modus A auf schmalen Geraeten: die Marken-Spalte klappt auf Wortmarke +
Badge zusammen. Wer ueber „Buch sichern" kommt, ist schon ueberzeugt — er
braucht Karte und Formular ohne Scrollen, nicht noch einmal den Claim.
Ohne die Shell-Klasse (Modus B) aendert sich hier KEINE Regel: die
Anmeldeseite bleibt exakt die von heute. */
.auth-shell--intent .auth-brand{padding:14px 20px}
.auth-shell--intent .auth-brand__mid,
.auth-shell--intent .auth-brand__foot{display:none}
.auth-shell--intent .auth-intent{padding:12px;margin-bottom:16px;gap:12px}
.auth-shell--intent .auth-intent__cover{width:48px}
.auth-shell--intent .auth-intent__text{font-size:var(--fs-body-sm)}
}
@media (max-width: 760px) {
/* 16px hält iOS vom Reinzoomen beim Fokussieren ab; 44px ist das Touch-Minimum
(dieselbe Regel wie in app.css — Prototyp definiert sie global, nicht pro Screen). */
input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
input:not([type=checkbox]):not([type=radio]), select { min-height: 44px; }
.ab-btn--sm{height:40px}
.auth-form__grid2{grid-template-columns:1fr}
}
@media (max-width: 560px) {
.auth-brand__meta{display:none}
}