/* Anmeldeseite des Petzold CRM. Eigenständig, damit sie ohne Sitzung und ohne die 74-KB-Bürodatei lädt.
   Tokens wie in style.css (Designsystem der Website: Tinte, Creme, Gold, Hanken Grotesk); hell ist die Grundfassung,
   dunkel folgt der Systemeinstellung oder der Wahl im Büro (localStorage „nova-thema“, gesetzt von anmelden.js). */
:root{
 --ink:#09090b;--grund:#f6f5f2;--flaeche:#f3f1ec;--karte:#ffffff;--tag:#ece8df;
 --gold:#8a7d6d;--gold-hell:#cdbfa6;--gold-blass:#e6dcc9;--gold-tinte:#6b6052;
 --text:#09090b;--gedaempft:#68635c;--linie:rgba(9,9,11,.12);--linie-stark:rgba(9,9,11,.22);
 --kritisch:#a2543f;--kritisch-bg:#f5e6e1;--gut:#4f7a5a;--gut-bg:#e7efe6;
 --logo-name:#09090b;--logo-linie:#cdbfa6;--logo-zusatz:#8a7d6d;
 --schatten:0 30px 60px -30px rgba(9,9,11,.24);
 --sans:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
 color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --ink:#f3f1ec;--grund:#131315;--flaeche:#1b1b1e;--karte:#222226;--tag:#2a2a2e;
 --gold:#b7a88f;--gold-hell:#8a7d6d;--gold-blass:#3a3428;--gold-tinte:#cdbfa6;
 --text:#f3f1ec;--gedaempft:#a39d92;--linie:rgba(243,241,236,.12);--linie-stark:rgba(243,241,236,.25);
 --kritisch:#e39a86;--kritisch-bg:#3b2520;--gut:#8fc39c;--gut-bg:#1f2d22;
 --logo-name:#f3f1ec;--logo-linie:#8a7d6d;--logo-zusatz:#cdbfa6;
 --schatten:0 30px 60px -30px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
 --ink:#f3f1ec;--grund:#131315;--flaeche:#1b1b1e;--karte:#222226;--tag:#2a2a2e;
 --gold:#b7a88f;--gold-hell:#8a7d6d;--gold-blass:#3a3428;--gold-tinte:#cdbfa6;
 --text:#f3f1ec;--gedaempft:#a39d92;--linie:rgba(243,241,236,.12);--linie-stark:rgba(243,241,236,.25);
 --kritisch:#e39a86;--kritisch-bg:#3b2520;--gut:#8fc39c;--gut-bg:#1f2d22;
 --logo-name:#f3f1ec;--logo-linie:#8a7d6d;--logo-zusatz:#cdbfa6;
 --schatten:0 30px 60px -30px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{background:var(--grund)}
body{margin:0;min-height:100dvh;background:var(--grund);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;font-synthesis:none}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
h1{margin:0;font-weight:500;font-size:30px;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
::selection{background:var(--gold-hell);color:#09090b}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.huelle{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
 padding:max(32px,env(safe-area-inset-top)) 16px max(32px,env(safe-area-inset-bottom))}

/* Wortmarke wie in der Markenzeile des Büros: PETZOLD, feine goldene Linie, IMMOBILIEN. */
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap}
.marke strong{font-size:22px;font-weight:700;letter-spacing:.05em;color:var(--logo-name);line-height:1}
.marke-linie{width:1px;height:23px;background:var(--logo-linie);flex:none}
.marke-zusatz{font-size:11px;font-weight:500;letter-spacing:.24em;color:var(--logo-zusatz);line-height:1}

.karte{width:100%;max-width:420px;background:var(--karte);border:1px solid var(--linie);border-radius:18px;padding:32px;box-shadow:var(--schatten);
 display:flex;flex-direction:column;gap:14px}
.etikett{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-tinte)}
.unterzeile{color:var(--gedaempft)}
.klein{font-size:13px;color:var(--gedaempft);margin-top:-4px}
.kasten{padding:12px 14px;border-radius:13px;background:var(--flaeche);border:1px solid var(--linie);font-size:14px}
.kasten::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 2px 0;background:var(--gold);transform:rotate(45deg)}

.hinweis,.fehler{padding:10px 12px;border-radius:9px;font-size:14px}
.hinweis{background:var(--gut-bg);color:var(--gut)}
.fehler{background:var(--kritisch-bg);color:var(--kritisch)}

.formular{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.feld{display:flex;flex-direction:column;gap:6px}
.feld>span{font-size:13px;font-weight:600}
.feld small{font-weight:400;color:var(--gedaempft)}
.feld input{width:100%;padding:12px 14px;border:1px solid var(--linie-stark);border-radius:11px;background:var(--grund);color:var(--text);font-size:16px;min-height:48px}
.feld input:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.feld input[aria-invalid="true"]{border-color:var(--kritisch)}
/* Einladung: die Adresse steht fest (der Inhaber hat sie eingetragen), sie wird nur gezeigt. */
.feld input[readonly]{background:var(--flaeche);color:var(--gedaempft)}
.zeigen{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gedaempft);cursor:pointer;width:max-content}
.zeigen input{width:18px;height:18px;margin:0;accent-color:var(--ink)}

.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border-radius:13px;border:1px solid transparent;
 background:var(--ink);color:var(--grund);font-size:15px;font-weight:600;cursor:pointer;width:100%;margin-top:4px}
.knopf:hover{opacity:.9}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.knopf.leise{background:transparent;color:var(--text);border-color:var(--linie-stark)}
.knopf.leise:hover{background:var(--flaeche);opacity:1}

.fuss{font-size:13px;color:var(--gedaempft);text-align:center}

@media (max-width:480px){
 .huelle{justify-content:flex-start;gap:22px;padding-top:max(28px,env(safe-area-inset-top))}
 .karte{padding:24px 20px;border-radius:16px}
 h1{font-size:26px}
 .marke strong{font-size:19px}
 .marke-linie{height:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}