/* BauWalker.OS — Registrierung & Onboarding * Die Design-Tokens selbst stehen seit 09.09.26 nur noch in design-system.css * (s. docs/design-system.md) — @import holt sie hierher, diese Datei trägt * nur noch die auth/onboarding-eigenen Klassen (Gate-Layout, Formularfeld, * Buttons, OAuth-Reihe u. a.). Eine Datei statt Duplikat je Blade-Ansicht: * alle zehn Registrierungs-/Onboarding-Seiten binden GENAU diese ein. */ @import url("design-system.css?v=2"); html,body{height:100%} a{text-decoration:none} a:hover{color:var(--accent-ink); text-decoration:underline} .gate-bg{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:40px 16px; background:var(--paper); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:34px 34px} .gate-shell{display:grid;grid-template-columns:1fr;max-width:460px;width:100%; background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl); box-shadow:var(--shadow);overflow:hidden} .brand-panel{background:linear-gradient(165deg,#181a13 0%,#0f110c 100%);padding:26px 26px 22px; display:flex;flex-direction:column;gap:28px;color:#e9e7dd;min-height:0} .brand-panel .wordmark{display:flex;align-items:center;gap:10px} .brand-panel .wordmark img{width:34px;height:34px;border-radius:9px;display:block} .brand-panel .wordmark span{font-family:var(--serif);font-size:18px;font-weight:600;color:#f2f0e6} .brand-copy h1{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.25;margin:0;color:#f4f2e9} .brand-copy p{font-size:14px;line-height:1.6;color:#b7b6a8;margin:0 0 18px} .brand-copy blockquote{margin:0;font-size:13.5px;font-style:italic;color:#9a9c8c} .brand-trust{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:#9aa08f;line-height:1.6} .brand-copy p,.brand-copy blockquote,.brand-trust{display:none} .brand-trust .flag{display:inline-block;width:15px;height:10px;vertical-align:-1px;margin-left:2px;border-radius:1.5px;overflow:hidden} .brand-trust .flag svg{display:block;width:100%;height:100%} .form-panel{padding:28px 26px;display:flex;flex-direction:column;justify-content:center} .form-title{font-family:var(--serif);font-size:23px;font-weight:600;margin:0 0 6px;color:var(--ink)} .form-sub{font-size:13.5px;color:var(--muted);margin:0 0 22px;line-height:1.5} /* Die .field in der Reihe verliert ihren eigenen Abstand nach unten — die Reihe muss ihn deshalb selbst tragen, sonst klebt die Zeile darunter (E-Mail-Label unter Vor-/Nachname, Hinweisbox unter Land/Sprache) direkt an den Feldern — auf dem iPad als „schiefes" Formular aufgefallen. */ .field-row{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:12px} .field-row>div{margin-bottom:0} .hint-box{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-md); padding:10px 12px;font-size:12px;color:var(--muted);margin:2px 0 16px;line-height:1.5} .checkbox-row{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--muted); margin:2px 0 6px;line-height:1.45} .checkbox-row input{margin-top:2px;accent-color:var(--accent)} .oauth-stack{display:flex;flex-direction:column;gap:10px} .oauth-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px; min-height:44px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel2);color:var(--ink); font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none} .oauth-btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none} .divider{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:11.5px;margin:18px 0; font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em} .divider span{flex:1;height:1px;background:var(--line)} .form-foot{margin-top:18px;font-size:13px;color:var(--muted)} /* Mobile-Audit 20260906 M2: Inline-Links in Fließtext fallen unter die WCAG-Ausnahme fürs Mindestmaß, bleiben aber fuer Daumen fummelig — inline-block macht die Padding-Tap-Flaeche wirksam, ohne den Textfluss zu sprengen. */ .form-foot a,.checkbox-row a{display:inline-block;padding:.35em 0} .identity-chip{display:inline-flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line); border-radius:var(--radius-full);padding:7px 14px 7px 10px;font-size:13px;color:var(--ink); margin-bottom:20px;width:fit-content} .single-wrap{align-items:center} /* Fuer Seiten mit mehr Inhalt als ein einzelnes Formular (z. B. eine Projekt-Kachelliste) — dieselbe Karte, nur breiter. */ .single-card.wide{width:min(94vw,880px)} .single-card{width:min(92vw,440px);background:var(--panel);border:1px solid var(--line); border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:26px 20px} .single-card .wordmark{display:flex;align-items:center;gap:10px;margin-bottom:22px} .single-card .wordmark img{width:30px;height:30px;border-radius:8px;display:block} .single-card .wordmark span{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink)} .status-icon{width:46px;height:46px;border-radius:var(--radius-full);background:var(--panel2);color:var(--muted); display:flex;align-items:center;justify-content:center;margin-bottom:18px} .status-icon.ok{background:var(--ok-soft);color:var(--ok)} .status-icon.warn{background:var(--warn-soft);color:var(--warn)} .status-icon.danger{background:var(--error-soft);color:var(--error)} .status-icon.spin svg{animation:spin 1.8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .ok-text{color:var(--ok);font-size:13px;margin:0} .faint-note{margin-top:14px;font-size:12px;color:var(--faint)} .btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px} .btn-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;min-height:44px; background:var(--ink);color:var(--paper);border-radius:var(--radius-md);font-weight:600;font-size:14px;text-decoration:none} .btn-link:hover{background:var(--accent);color:#fff;text-decoration:none} /* Formularfeld — Blade-Äquivalent der React FormField-Komponente */ .field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px} .field label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-family:var(--mono)} .field label .req{color:var(--accent);margin-left:2px;font-weight:700} .field input,.field select,.field textarea{ padding:9px 11px;min-height:44px;border:1px solid var(--line);border-radius:var(--radius-md); /* Mobile-Audit 20260906 M1: <16px zoomt iOS Safari beim Fokus rein und bleibt nach dem Absenden oft versetzt stehen — die Fehlerbox darunter ist dann unsichtbar, ohne dass der Nutzer zurückpincht. */ font:inherit;font-size:16px;background:var(--panel2);color:var(--ink);width:100%;outline:none} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)} /* iPad-/iOS-Safari zeichnet