/*
====================================================================
Titel:        anmeldung.css - Einstieg, Anmeldung, PIN, Sperre, Geräte, QR-Karten, Druck
Version:      1.1.0
Autor:        Andreas Grundke IT-Service (erstellt mit Claude)
Datum:        15.10.2026
Beschreibung: Einstieg im Look CI 2026.01 (hell), jede Wahl in der Farbwelt ihres Mandanten.
              Anmeldeseiten tragen die Marke des Mandanten. Die QR-Karte ist eine
              A6-Karte (105 mal 148 mm) mit Maßen in mm und pt für den Druck.
Aenderungen:  1.0.0 (15.10.2026) Erstfassung
              1.1.0 (15.10.2026) Einstieg und Anmeldung zeigen den Betrieb (Zeichnung, Name, Ort,
                    nächste Termine) statt Slogan; Bühnenfarben je Profil; QR-Dialog mit Handyvorschau
====================================================================
*/

/* ---------- Bühne je Profil: Fläche, auf der sich der Betrieb zeigt ---------- */
:root,[data-profil]{--buehne-bg:var(--seite);--buehne-text:var(--text-1);--buehne-text2:var(--text-2);--buehne-linie:var(--rand)}
[data-profil="restaurant-warm"]{--buehne-bg:#5c271f;--buehne-text:#fff8f7;--buehne-text2:#fdbdaf;--buehne-linie:rgba(255,248,247,.2)}
[data-profil="hotel-ruhig"]{--buehne-bg:var(--seite);--buehne-text:var(--dunkel);--buehne-text2:var(--text-2);--buehne-linie:var(--rand-stark)}
.buehne{background:var(--buehne-bg);color:var(--buehne-text)}
[data-profil="restaurant-warm"] .buehne,.buehne[data-profil="restaurant-warm"]{--bild-linie:#fff8f7;--bild-akzent:#fdbdaf;--bild-text:#fdbdaf;--bild-name:#fff8f7;--bild-baum:rgba(255,248,247,.09);--bild-flaeche:rgba(255,248,247,.1)}

/* ---------- Zeichnung des Hauses (Lageplan oder Ansicht) ---------- */
.bild{display:block;width:100%;height:auto}
.bild .w{fill:none;stroke:var(--bild-linie);stroke-width:2.2;stroke-linejoin:round}
.bild .i{fill:none;stroke:var(--bild-linie);stroke-width:1;opacity:.6}
.bild .a{fill:none;stroke:var(--bild-akzent);stroke-width:2;stroke-linecap:round}
.bild .g{fill:none;stroke:var(--bild-linie);stroke-width:1.2;stroke-dasharray:5 4;opacity:.8}
.bild .b{fill:var(--bild-baum);stroke:var(--bild-linie);stroke-width:1;opacity:.9}
.bild .fl{fill:var(--bild-flaeche);stroke:none}
.bild .f{fill:none;stroke:var(--bild-akzent);stroke-width:1.2}
.bild text{font-family:var(--schrift-ui);font-size:11px;fill:var(--bild-text)}
.bild text.n{font-family:var(--schrift-marke);font-size:14px;font-weight:600;fill:var(--bild-name)}
.bild text.z{font-family:var(--schrift-zahlen);font-size:11px;fill:var(--bild-text)}
.bild text.k{font-style:italic}

/* ---------- Einstieg: zwei Betriebe, jeder in seiner Marke ---------- */
.einstieg{min-height:calc(100vh - var(--demo-h));display:flex;flex-direction:column;background:#f4f7fc}
.einstieg__kopf{padding:16px clamp(16px,4vw,48px) 14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;border-bottom:1px solid #d0daea;background:#fff}
.einstieg__kopf h1{font:700 1.3rem/1.2 "Manrope",sans-serif;color:#111;letter-spacing:-.01em}
.einstieg__kopf p{color:#555;max-width:90ch}
.einstieg__wahl{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.wahl{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:16px;padding:clamp(20px,3vw,40px) clamp(16px,4vw,48px);font-family:var(--schrift-ui)}
.wahl__kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.wahl__kopf img{display:block;height:56px;width:auto;max-width:100%}
.wahl__ort{color:var(--buehne-text2);font-size:.92rem}
.wahl__zeile{max-width:60ch;color:var(--buehne-text)}
.wahl__bild{max-width:620px;width:100%;align-self:center}
.wahl__termine{width:100%;max-width:620px;border-collapse:collapse;font-size:.92rem}
.wahl__termine caption{text-align:left;font-family:var(--schrift-marke);font-weight:var(--titel-gewicht);font-size:1.02rem;padding-bottom:4px;color:var(--buehne-text)}
.wahl__termine td{padding:5px 8px 5px 0;border-top:1px solid var(--buehne-linie);white-space:nowrap}
.wahl__termine td.t{font-family:var(--schrift-zahlen);font-size:.86rem;color:var(--buehne-text2)}
.wahl__termine td.a{white-space:normal;width:100%}
.wahl__termine td.g{text-align:right;font-family:var(--schrift-zahlen);font-size:.86rem;color:var(--buehne-text2)}
.wahl .btn{justify-self:start;min-height:46px;padding:0 22px;font-size:1rem}
[data-profil="restaurant-warm"].wahl .btn{background:#fff8f7;border-color:#fff8f7;color:#5c271f}
[data-profil="restaurant-warm"].wahl .btn:hover{background:#feebe7;border-color:#feebe7}
[data-profil="restaurant-warm"].wahl :focus-visible{outline-color:#fff8f7}
.einstieg__fuss{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;padding:14px clamp(16px,4vw,48px);border-top:1px solid #d0daea;background:#fff;color:#4a4a4a;font-size:.9rem}
.einstieg__fuss a{color:#0c4da2}

/* ---------- Anmeldeseite: links der Betrieb, rechts das Formular oben bündig ---------- */
.login{min-height:calc(100vh - var(--demo-h));display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.login__marke{padding:clamp(24px,4vw,56px);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:18px}
.login__marke .logo{display:inline-block;justify-self:start}
.login__marke .logo img{display:block;height:64px;width:auto;max-width:100%}
.login__marke h1{color:var(--buehne-text);font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem);max-width:22ch}
.login__ort{color:var(--buehne-text2);margin-top:4px}
.login__bild{align-self:center;max-width:640px;width:100%}
.login__marke .herkunft{color:var(--buehne-text2)}
.login__marke a{color:inherit}
.login__form{padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;justify-content:flex-start;gap:14px;max-width:560px}
.login__form form{display:grid;gap:12px}
.login__form h2{font-size:1.45rem}
.login__form .herkunft{color:var(--text2)}
.adresszeile{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;background:var(--karte);border:1px solid var(--rand);border-radius:var(--r-eingabe);padding:5px 10px;font-size:.9rem;color:var(--text)}
.adresszeile small{color:var(--text2);margin-left:auto}
.wegwahl{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wegwahl button{font:inherit;text-align:left;display:grid;gap:4px;padding:12px;border:1px solid var(--rand-eingabe);border-radius:var(--r-zelle);background:var(--karte);color:var(--text);cursor:pointer;min-height:88px}
.wegwahl button svg{width:1.5em;height:1.5em;color:var(--marke-text)}
.wegwahl button small{color:var(--text2)}
.wegwahl button[aria-checked=true]{border-color:var(--marke-solid);background:var(--marke-fl-1);box-shadow:inset 0 0 0 1px var(--marke-solid)}
.install{border-top:2px solid var(--linie-stark);padding-top:10px;display:grid;gap:10px}
.install ul,.install ol{margin:0;padding-left:1.2em;display:grid;gap:4px}
.skizze{width:100%;max-width:300px;height:auto}

/* ---------- PIN-Tastatur, Sperre, Wer bist du ---------- */
.sperre{max-width:440px;margin:0 auto;padding:clamp(24px,6vh,64px) 16px 40px;display:grid;gap:14px;justify-items:center;text-align:center}
.sperre__logo{height:56px;width:auto}
.sperre .h2{font-size:1.6rem}
.pinbox{display:grid;gap:10px;justify-items:center;width:100%}
.pinpunkte{display:flex;gap:14px;margin:6px 0}
.pinpunkte i{width:16px;height:16px;border-radius:50%;border:2px solid var(--dunkel);display:block}
.pinpunkte i.voll{background:var(--dunkel)}
.pinpad{display:grid;grid-template-columns:repeat(3,minmax(0,76px));gap:10px;justify-content:center}
.pinkey{font:500 1.5rem var(--schrift-zahlen);min-height:64px;border-radius:var(--r-knopf);border:1px solid var(--rand-eingabe);background:var(--karte);color:var(--dunkel);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 120ms var(--kurve)}
.pinkey:hover{background:var(--flaeche)}
.pinkey:active{background:var(--auswahl)}
.pinkey--s{background:var(--flaeche)}
.pinkey svg{width:1.3rem;height:1.3rem}
@media (pointer:fine) and (hover:hover){.pinkey{min-height:52px;font-size:1.3rem}}
.werliste{list-style:none;margin:0;padding:0;display:grid;gap:0;width:100%;border-top:2px solid var(--linie-stark)}
.werkarte{display:flex;align-items:center;gap:14px;padding:10px 12px;min-height:60px;border-bottom:1px solid var(--linie);background:transparent;color:var(--text);text-decoration:none;text-align:left}
.werkarte:hover{background:var(--hover)}
.werkarte span{flex:1}
.werkarte b{display:block;color:var(--dunkel)}
.werkarte small{color:var(--text2)}

/* ---------- QR-Karte A6 und Dialog: Karte, Hinweise, Handyvorschau nebeneinander ---------- */
.kartenvorschau{display:grid;grid-template-columns:auto minmax(260px,1fr) auto;gap:28px 40px;align-items:start}
.kartenhilfe{display:grid;gap:12px;max-width:60ch;align-content:start}
.kartenhilfe h3{font-size:1.15rem}
.kartenhilfe .kv{margin-top:4px}
.grossqr{display:flex;justify-content:center}
.grossqr .karte__qr{width:min(64vh,420px);height:min(64vh,420px)}
.handy-vorschau{width:250px;display:grid;gap:8px;justify-items:center}
.handy-vorschau figcaption{font-size:.86rem;color:var(--text2);text-align:center}
.handy{width:236px;height:470px;border:9px solid #1d1d1f;border-radius:34px;background:var(--seite);overflow:hidden;display:grid;grid-template-rows:auto 1fr;box-shadow:var(--schatten-2)}
.handy__leiste{height:26px;display:flex;justify-content:center;align-items:center;background:var(--karte)}
.handy__leiste i{width:70px;height:6px;border-radius:3px;background:#1d1d1f}
.handy__bild{padding:18px 16px;display:grid;gap:12px;align-content:start;justify-items:center;text-align:center;font-size:12px}
.handy__bild img{height:38px;width:auto;max-width:100%}
.handy__bild b{font-family:var(--schrift-marke);font-weight:var(--titel-gewicht);font-size:16px;color:var(--dunkel)}
.handy__bild .pinpunkte i{width:12px;height:12px}
.handy__tasten{display:grid;grid-template-columns:repeat(3,44px);gap:6px}
.handy__tasten span{height:36px;border:1px solid var(--rand-eingabe);border-radius:var(--r-knopf);display:flex;align-items:center;justify-content:center;font:500 14px var(--schrift-zahlen);color:var(--dunkel);background:var(--karte)}
.karte{width:105mm;height:148mm;background:#fff;color:#111;display:flex;flex-direction:column;padding:7mm 8mm 5mm;box-shadow:0 2px 4px rgba(0,0,0,.18),0 14px 34px rgba(0,0,0,.2);font:400 9pt/1.35 "Manrope",Arial,sans-serif;text-align:center;break-inside:avoid}
.karte__kopf{height:12mm;display:flex;justify-content:center;border-bottom:.3mm solid #d0daea;padding-bottom:2mm}
.karte__kopf img{height:100%;width:auto;max-width:100%}
.karte h3{font:var(--titel-gewicht) 13pt/1.2 var(--schrift-marke);color:var(--dunkel);margin:3mm 0 1mm}
.karte__wer{font-weight:700;font-size:11pt}
.karte__wer small{display:block;font-weight:400;font-size:8.5pt;color:#444}
.karte__qr{width:50mm;height:50mm;margin:2.5mm auto 1.5mm}
.karte__qr svg{display:block;width:100%;height:100%}
.karte__gilt{font-size:8.5pt;font-weight:600;color:#111}
.karte__schritte{text-align:left;margin:2.5mm 0 0;padding-left:5mm;display:grid;gap:1mm;font-size:8.5pt}
.karte__fuss{margin-top:auto;padding-top:2mm;font-size:6.5pt;color:#444;border-top:.3mm solid #d0daea}
#druck{display:none}
@media (max-width:1279px){.kartenvorschau{grid-template-columns:auto minmax(0,1fr)}.handy-vorschau{grid-column:1/-1;justify-self:start}}
@media (max-width:899px){.kartenvorschau{grid-template-columns:minmax(0,1fr);justify-items:center}.karte{max-width:100%}}

/* ---------- Mobil ---------- */
@media (max-width:899px){
  .login{grid-template-columns:minmax(0,1fr)}
  .login__marke{padding:16px 16px 14px;grid-template-rows:auto;gap:8px}
  .login__marke .logo img{height:48px}
  .login__marke h1{font-size:1.35rem}
  .login__bild,.login__marke .herkunft-block{display:none}
  .login__form{max-width:none;padding:18px 16px 90px}
  .einstieg__wahl{grid-template-columns:minmax(0,1fr)}
  .wahl__bild{max-height:220px}
  .wegwahl{grid-template-columns:1fr}
}

/* ---------- Druck: nur die Karte, A6 ---------- */
@page{size:105mm 148mm;margin:0}
@media print{
  body.druckt{padding:0!important;background:#fff!important}
  body.druckt .band,body.druckt #app,body.druckt .toast,body.druckt #dlg,body.druckt .skip{display:none!important}
  body.druckt #druck{display:block}
  body.druckt #druck .karte{box-shadow:none;margin:0;break-after:page;page-break-after:always}
  body.druckt #druck .karte:last-child{break-after:auto;page-break-after:auto}
}
.login__form .radios{flex-wrap:nowrap}