/* ★ 22.10.2026: il foglio d'accesso della pelle di riferimento (4d4c65d745) preso INTERO.
   Cambiano solo i valori del marchio (accento #1F3A5F, inchiostro #11151C) e l'attributo del mandante che il
   template di Kranz scrive (data-kranz-access). Stessi byte dei caratteri di hallo-klaus.de. */
@font-face{font-family:Sora;src:url("fonts/Sora-variable.0d0e5e4d2f9f.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("fonts/InterTight-variable.f5af7a761c2b.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
html[data-kranz-access]{--ink:#11151c;--paper:#fff;--line:#71717a;--muted:#52525b;--faint:#52525b;--amber:#1f3a5f;--amber-deep:#1f3a5f;--ring:rgba(31,58,95,.2)}
html[data-kranz-access] body{background:#f7f7f7;color:var(--ink);font-family:"Inter Tight",system-ui,sans-serif}
html[data-kranz-access] .bg{display:none}
html[data-kranz-access] .logo{justify-content:center}
/* La misura tipografica dei documenti (mm, inline) non limita il marchio
   della login. Si usa tutta la larghezza gia' prevista per l'accesso. */
html[data-kranz-access] .logo [data-company-logo]{width:280px;max-width:100%;height:auto;max-height:none!important;padding:0;border-radius:0}
html[data-kranz-access] .brand{text-align:center}
html[data-kranz-access] .eyebrow{justify-content:center;color:#1f3a5f;font-family:"Inter Tight",system-ui,sans-serif;font-size:12px;letter-spacing:.08em}
html[data-kranz-access] h1{font-family:Sora,system-ui,sans-serif;font-weight:700;font-size:36px;line-height:1.15;letter-spacing:-.025em;color:var(--ink)}
html[data-kranz-access] h1 em{font-style:normal;color:#1f3a5f}
html[data-kranz-access] .lead{margin-inline:auto;color:#52525b;font-size:16px}
html[data-kranz-access] .card{border:1px solid #e4e4e7;border-radius:24px;box-shadow:none}
html[data-kranz-access] .sheen{display:none}
html[data-kranz-access] .lbl{font-family:"Inter Tight",system-ui,sans-serif;font-size:13px;letter-spacing:0;text-transform:none;font-weight:600}
html[data-kranz-access] input{font-family:inherit;border-color:#71717a}
html[data-kranz-access] input::placeholder{color:#71717a}
html[data-kranz-access] :is(button.submit,button:not(.reveal),a.btn){background:#1f3a5f;color:white;box-shadow:none;font-family:inherit}
html[data-kranz-access] :is(button,a,input):focus-visible{outline:2px solid #1f3a5f;outline-offset:3px;box-shadow:none}
html[data-kranz-access] :is(.foot,.legal,.klaus-signature,.hint){color:#52525b;font-family:inherit;font-size:12px;letter-spacing:.02em}
html[data-kranz-access] .legal a{color:#52525b}
html[data-kranz-access] .legal a:hover{color:#1f3a5f;text-decoration:underline}
html[data-kranz-access] .err{background:#fff1f0;color:#9f211b;border:1px solid #9f211b}
html[data-kranz-access] .spin{border-color:#ffffff80;border-top-color:white}
@media(min-width:768px){html[data-kranz-access] main{max-width:880px;gap:64px;grid-template-columns:1fr 1fr}}
@media(max-width:767px){html[data-kranz-access] h1{font-size:30px}html[data-kranz-access] .eyebrow{margin-top:20px}html[data-kranz-access] .card{margin-top:24px}}
@media(forced-colors:active){
 html[data-kranz-access] body,html[data-kranz-access] .card{background:Canvas;color:CanvasText}
 html[data-kranz-access] :is(h1,h1 em,.lead,.lbl,.foot,.legal a,.klaus-signature,.hint,.eyebrow){color:CanvasText}
 html[data-kranz-access] :is(button.submit,button:not(.reveal),a.btn){background:ButtonFace;color:ButtonText;border:1px solid ButtonText}
 html[data-kranz-access] input{background:Field;color:FieldText;border-color:FieldText}
 html[data-kranz-access] .err{background:Canvas;color:CanvasText;border-color:CanvasText}
 html[data-kranz-access] :is(button,a,input):focus-visible{outline-color:Highlight}
}

/* Bellezza, 20.10: scala 4px, ingresso unico e nessuna attesa a cascata. */
html[data-kranz-access] .rise { animation-duration:.18s; animation-delay:0s; }
html[data-kranz-access] .eyebrow { margin-top:32px; }
html[data-kranz-access] .klaus-signature { margin-top:16px; }
html[data-kranz-access] .card { padding:24px; }
html[data-kranz-access] h1 { line-height:40px; }
html[data-kranz-access] :is(input,button,a.btn) { min-height:44px; transition-duration:.16s; }
html[data-kranz-access] .legal a { display:inline-flex; align-items:center; min-height:44px; }
html[data-kranz-access] :is(form,.foot) svg { stroke-width:1.75; }
html[data-kranz-access] input[inputmode="numeric"] { font-variant-numeric:tabular-nums; }
@media(max-width:767px) {html[data-kranz-access] .card {padding:20px}html[data-kranz-access] h1 {line-height:36px}}
@media(prefers-reduced-motion:reduce) {html[data-kranz-access] .rise {animation:none;opacity:1;transform:none}}

/* ★ Miglioria (22.10.2026), una scala sola: «Zeigen» del campo password era 10px, sotto il minimo della scala (11px). */
html[data-kranz-access] button.reveal { font-size: 11px; }

/* ★ Miglioria (22.10.2026), accesso-tre — la riga pesante al centro, i due lati sulla stessa riga.
   Misurato sulla pagina servita (1440x900): il blocco intero era GIA' centrato (248,5 px sopra, 250,5 sotto). Ma la
   colonna destra porta sotto la carta 105 px di testo piccolo (connessione, Impressum, firma) e la griglia centrava la
   carta INSIEME a quel piede: la marca stava 52,5 px piu' in basso della carta, e la parte che si vede davvero
   (marca + carta) stava 42 px sopra il centro della finestra. E' il «terzo in basso vuoto».
   Da 768 px la colonna destra si scioglie nella griglia (display:contents: il div non ha ruolo ne' testo): marca e
   carta stanno sulla STESSA riga e si centrano l'una sull'altra; il piede va nelle tre righe sotto la carta, e sopra
   ci sono tre righe vuote 1fr gemelle. In una griglia ad altezza automatica tutte le righe 1fr prendono la stessa
   misura (quella della riga del piede piu' alta): sopra e sotto la riga pesante resta lo stesso spazio senza numeri
   scritti a mano, e se il piede cambia le righe vuote lo seguono. Il corpo centra la griglia come prima.
   Finestre basse (meno di 600 px): le righe vuote valgono 0, il piede resta sotto la carta e niente scende. */
@media(min-width:768px){
 html[data-kranz-access] main{row-gap:0;grid-template-rows:1fr 1fr 1fr auto 1fr 1fr 1fr}
 html[data-kranz-access] .auth{display:contents}
 html[data-kranz-access] .brand{grid-area:4/1}
 html[data-kranz-access] .auth>.card{grid-area:4/2;margin-top:0;min-width:0}
 html[data-kranz-access] .auth>:is(.foot,.legal,.klaus-signature){grid-column:2;align-self:start}
 html[data-kranz-access] .auth>.foot{grid-row:5}
 html[data-kranz-access] .auth>.legal{grid-row:6}
 html[data-kranz-access] .auth>.klaus-signature{grid-row:7}
}
@media(min-width:768px) and (max-height:599px){html[data-kranz-access] main{grid-template-rows:0 0 0 auto}}
/* Il centro verticale lo da' il corpo con min-height:100dvh: un navigatore che non conosce dvh (iPad fermo prima di
   iOS 15.4) lo scartava e la pagina restava in alto. 100vh prima, come rete. */
html[data-kranz-access] body{min-height:100vh;min-height:100dvh}

/* ★ Miglioria (22.10.2026), accesso-tre — Klaus e' il prodotto, l'Impressum un obbligo di legge: non pesano uguale.
   Misurato: la firma aveva la stessa regola dei link legali (12px, #52525b) e pesava perfino MENO (400 contro 500, in
   tondo minuscolo contro il maiuscolo). Il contrasto c'era gia' (7,22:1 sul fondo #f7f7f7): la cura e' tipografica,
   non un grigio piu' scuro. 14px, semigrassetto, nel blu del marchio (quello di «Überall dabei.» e del bottone):
   10,72:1. I link legali restano come sono. */
html[data-kranz-access] .klaus-signature{font-size:14px;font-weight:600;color:#1f3a5f}
@media(forced-colors:active){html[data-kranz-access] .klaus-signature{color:CanvasText}}

/* ★ 25.10.2026 — il logo di Kranz nell'accesso. Senza un logo caricato (CrmSettings.logo) le due pagine mostravano
   soltanto il nome in testo. La scala e' quella della SPA (Logo.tsx: logo caricato, poi il marchio del mandante, poi
   il nome) e dell'accesso di Walter: qui sta il marchio di Kranz (crm/kranz_login_mark.html), lo stesso lockup che la
   SPA mostra nel proprio accesso e alle stesse misure ([data-client-login] [data-company-brand], KranzBrand.tsx, M17):
   piastrina bianca 8/10 px, monogramma 30 px in ottone, «KRANZ» Sora 600 18 px, «Innovative Räume» 11 px maiuscolo
   a 0,18em; inchiostro e secondario dai gettoni. Il carattere a spaziatura fissa e' quello della pagina (.eyebrow):
   il DM Mono condiviso (shared/fonts) e' un sottoinsieme senza «Ä», e «RÄUME» uscirebbe in due caratteri. */
html[data-kranz-access] [data-kranz-login-mark]{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:8px 10px;border-radius:12px;background:#fff;color:hsl(var(--klaus-ink));text-align:left}
html[data-kranz-access] [data-kranz-login-mark] svg{display:block;flex:none;width:30px;height:30px}
html[data-kranz-access] .kranz-login-mark__text{display:block;min-width:0}
html[data-kranz-access] .kranz-login-mark__name{display:block;font:600 18px/28px Sora,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.025em}
html[data-kranz-access] .kranz-login-mark__claim{display:block;margin-top:2px;font:400 11px/16px ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:hsl(var(--klaus-muted))}
@media(forced-colors:active){html[data-kranz-access] [data-kranz-login-mark]{background:Canvas;color:CanvasText;border:1px solid CanvasText}html[data-kranz-access] .kranz-login-mark__claim{color:CanvasText}}