/* Ein Konto, zwei sichtbare Arbeitsräume. Die inaktive Marke bleibt als
   berührbares Gegenstück seitlich, ohne ein zweites Formular zu bauen.
   Seit 18.10.2026: der Produktname steht IM Logo (keine Zeile darunter),
   links steht nur die Animation des gewählten Produkts. */
.auth-produktwahl{position:relative;height:166px;width:100%;isolation:isolate;}
.auth-produkt-logo{position:absolute;top:4px;left:50%;width:156px;height:156px;padding:4px;border:0;border-radius:var(--r-control);background:none;color:var(--muted);font:inherit;cursor:pointer;touch-action:manipulation;transform:translateX(-50%);transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .6s;}
.auth-produkt-logo .auth-brand-logo{width:100%;height:148px;object-fit:contain;}
.auth-produkt-logo[aria-pressed="true"]{z-index:2;color:var(--ink);}
.auth-produkt-logo[aria-pressed="false"]{z-index:1;opacity:.36;transform:translateX(calc(-50% + 122px)) translateY(12px) scale(.59);}
html[data-auth-produkt="lokal"] .auth-produkt-logo[aria-pressed="false"]{transform:translateX(calc(-50% - 122px)) translateY(12px) scale(.59);}
.auth-produkt-logo:hover,.auth-produkt-logo:focus-visible{opacity:1;}
.auth-produkt-logo:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
html[data-auth-produkt="lokal"] #btn-tab-schueler,html[data-auth-produkt="lokal"] #sso-block{display:none!important;}

/* Linke Spalte: nur die Animation des Produkts auf seinem Grund. Der weisse
   Grund des Videos verschwindet per multiply im Blau bzw. Grün. */
html[data-auth-produkt="cloud"] .auth-side{background:var(--start-cloud-flaeche);}
html[data-auth-produkt="lokal"] .auth-side{background:var(--start-lokal-flaeche);}
.auth-side{justify-content:center;}
.auth-film{display:none;width:min(560px,86%);max-height:78vh;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;opacity:0;transition:opacity .6s ease;}
.auth-film.an{display:block;animation:auth-film-ein .6s ease forwards;}
@keyframes auth-film-ein{to{opacity:1;}}
/* Der Absende-Knopf trägt die Produktfarbe: Cloud blau, Lokal grün – auch
   Rand, Schein und Hover (index.css `#screen-auth .btn` färbt sonst grün,
   teils mit !important; diese Selektoren sind spezifischer). */
html[data-auth-produkt] #auth-submit{--knopf:var(--start-cloud-ink);background:var(--knopf);color:var(--on-brand);}
html[data-auth-produkt="lokal"] #auth-submit{--knopf:var(--start-lokal-ink);}
html[data-auth-produkt] #auth-submit:not(:disabled){border:1px solid color-mix(in srgb,var(--knopf) 80%,var(--ink)) !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--on-brand) 30%,transparent),0 1px 2px color-mix(in srgb,var(--ink) 22%,transparent),0 10px 24px -8px color-mix(in srgb,var(--knopf) 55%,transparent) !important;}
html[data-auth-produkt] #auth-submit:hover:not(:disabled){background:color-mix(in srgb,var(--knopf) 88%,var(--ink));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--on-brand) 34%,transparent),0 2px 4px color-mix(in srgb,var(--ink) 22%,transparent),0 16px 32px -10px color-mix(in srgb,var(--knopf) 65%,transparent) !important;}
/* Der kleine Satz steht ab 880 px links UNTER der Animation (Eda Cansu: „sağ
   taraf tamamen relax“); schmal gibt es keine linke Spalte, dann bleibt er
   unter dem Logo. */
.auth-film-satz{display:none;margin:18px 0 0;max-width:420px;text-align:center;font-size:var(--fs-sm);line-height:1.5;}
html[data-auth-produkt="cloud"] .auth-film-satz{color:var(--start-cloud-ink);}
html[data-auth-produkt="lokal"] .auth-film-satz{color:var(--start-lokal-ink);}
@media(min-width:880px){.auth-film-satz{display:block;}.auth-box .auth-produkt-hinweis{display:none;}}
.auth-produkt-hinweis{margin:6px auto 0;max-width:330px;text-align:center;font-size:var(--fs-xs);line-height:1.5;color:var(--muted);}

/* Wahl beim Registrieren: zwei gleich breite Felder, dieselbe Wahl wie oben. */
.auth-produkt-feld{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.auth-produkt-feld.hidden{display:none;}
.auth-produkt-option{position:relative;display:block;cursor:pointer;}
.auth-produkt-option input{position:absolute;opacity:0;pointer-events:none;}
.auth-produkt-option span{display:flex;flex-direction:column;gap:1px;min-height:48px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--card);color:var(--muted);transition:border-color .2s,background .2s,color .2s;}
.auth-produkt-option strong{font-size:var(--fs-sm);color:var(--ink);}
.auth-produkt-option small{font-size:var(--fs-xs);}
.auth-produkt-option input[value="cloud"]:checked+span{border-color:var(--start-cloud-ink);background:var(--start-cloud-flaeche);color:var(--start-cloud-ink);}
.auth-produkt-option input[value="lokal"]:checked+span{border-color:var(--start-lokal-ink);background:var(--start-lokal-flaeche);color:var(--start-lokal-ink);}
.auth-produkt-option input:checked+span strong{color:inherit;}
.auth-produkt-option input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px;}

/* Die bestehende eingebettete iPad-Anmeldung behält ihren eigenen Kopf –
   dort ist das Produkt fest Lokal. */
.ssl-konto-eingebettet .auth-produktwahl,.ssl-konto-eingebettet .auth-produkt-hinweis,.ssl-konto-eingebettet .auth-produkt-feld{display:none;}
@media(max-width:359px){
 .auth-produkt-logo[aria-pressed="false"]{transform:translateX(calc(-50% + 102px)) translateY(12px) scale(.52);}
 html[data-auth-produkt="lokal"] .auth-produkt-logo[aria-pressed="false"]{transform:translateX(calc(-50% - 102px)) translateY(12px) scale(.52);}
}
@media(max-height:650px){.auth-produktwahl{height:128px;}.auth-produkt-logo{height:122px;}.auth-produkt-logo .auth-brand-logo{height:112px;}.auth-main{padding-top:20px;}.auth-mode{margin:20px 0;}}
@media(prefers-reduced-motion:reduce){.auth-produkt-logo{transition:none;}.auth-film.an{animation:none;opacity:1;}}

/* Die Kontoseite ist auch bei bestehender Sitzung kein Cloud-Arbeitsraum. */
.ss-kontoseite #app-sidebar,.ss-kontoseite #ml-leiste,.ss-kontoseite #ml-rand,.ss-kontoseite .topbar,.ss-kontoseite .app-topbar,.ss-kontoseite #main-nav,.ss-kontoseite #feedback-fab,.ss-kontoseite #asst-widget{display:none!important}
html.ss-kontoseite body{background:var(--card)!important}
html.ss-kontoseite body .wrap{margin:0!important;padding:0!important;width:100%!important;max-width:none!important;height:auto!important;min-height:100dvh!important;max-height:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;background:transparent!important}

.auth-zurueck{position:fixed;z-index:100021;top:calc(env(safe-area-inset-top,0px) + 10px);left:calc(env(safe-area-inset-left,0px) + 12px);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--start-lokal-ink,#305e54);border-radius:50%;background:#ffffffb3;text-decoration:none}
.auth-zurueck:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* Die App besitzt denselben Rückweg als native Schaltfläche. */
.ssl-konto-eingebettet .auth-zurueck{display:none!important}