/* ============================================================
   Anmeldemaske. Gehoert zu anmelden.js.

   Sie liegt ueber allem, auch ueber der Suite — darum ein hoher
   z-index und eine eigene Farbwelt: das Blau der Navigation als
   Grund, das Orange des Produkts fuer die eine Handlung, um die es
   geht. Keine Verlaeufe, keine Schatten als Selbstzweck.
   ============================================================ */

.an-raum {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow-y: auto;
  /* Quer NICHT scrollen, aber beschneiden statt verstecken.

     Die Karte faehrt aus translateX(72px) herein (modals.css). In
     diesen 0,2 Sekunden ragt sie ueber den rechten Rand, und weil
     overflow-y:auto den Querlauf stillschweigend auf auto mitzieht,
     blitzt dabei eine Querleiste auf. Im Ruhezustand ist nichts zu
     breit; es ist reine Bewegung.

     Das Verschieben der Seite beim Fokussprung ins erste Feld
     erledigt das NICHT — dagegen steht preventScroll in
     anmelden.js.

     clip statt hidden, damit senkrecht weiter gescrollt wird.
     Browser, die clip nicht kennen, verwerfen die Zeile und
     verhalten sich wie bisher. */
  overflow-x: clip;
  /* TIEFES NAVY, nicht das Blau der Navigation.

     Der Rauch ist in vier blassen Blautoenen gehalten (#4b76a8 bis
     #8aa7c9) — auf dem mittleren Blau #1e599d lagen sie so dicht
     an der Grundfarbe, dass vom Rauch nichts zu sehen war. Nicht
     der Rauch war zu schwach: der Grund war zu hell.

     Derselbe Farbton (211 Grad), nur dunkel gehalten. Die weisse
     Karte und der orange Knopf stehen darauf eher besser als
     vorher.

     Seit die Karte 1000 Pixel breit ist, bleibt vom Grund nur ein
     schmaler Rand — und genau dort liegt der Rauch. Darum noch
     dunkler als zuvor (#0b2742): auf der kleinen Flaeche muss
     jeder Schwaden zaehlen. */
  background: #071c30;
  /* Ein ruhiges Raster statt eines Verlaufs: es traegt die Karte,
     ohne sich vorzudraengen. Auf dem dunklen Grund traegt dieselbe
     Helligkeit weiter, darum etwas zurueckgenommen — das Raster
     soll dem Rauch nicht ins Gehege kommen. */
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 44px 44px;
  font: 15px/1.55 "Roboto Flex", system-ui, sans-serif;
  color: #12233a;
}

.an-karte {
  /* Eigene Ebene, damit sie ueber dem Rauch liegt. Ohne position
     greift z-index nicht, und dann entscheidet die Reihenfolge im
     Dokument — die Leinwand kommt spaeter und gewaenne. */
  position: relative;
  z-index: 1;
  /* Der helle Grund steht an .an-form, nicht hier. Als er hier
     stand, lag er auch unter der dunklen Haelfte, und an den
     linken Rundungen schimmerte er hell durch: der Browser malt
     erst den Kartengrund weichgezeichnet in die Rundung und
     beschneidet das dunkle Kind dann ein zweites Mal an derselben
     Kurve. Wo beide Kanten nur halb decken, bleibt ein heller
     Saum — kein Zeichenfehler, sondern zweimal Kantenglaettung
     uebereinander.

     Eine Rundung auch an .an-info zu setzen behebt das nicht: der
     helle Grund laege weiter darunter. Er darf dort gar nicht
     erst sein. */
  background: transparent;
  border-radius: 18px;
  /* Beschneidet die Haelften an der Rundung. Jede bringt ihre
     Farbe jetzt selbst mit, also wird an der Kurve nur noch EINE
     Kante geglaettet, und sie mischt mit dem Seitengrund statt
     mit einer zweiten Kartenfarbe. */
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(8, 30, 60, .3);
}

.an-marke {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  /* Auf der dunklen Haelfte ueberschrieben, siehe .an-info .an-marke. */
  color: #4e5c70;
}
.an-stern {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: #ef8a3c;
  color: #fff;
  font-size: 13px;
}

.an-karte h1 {
  margin: 16px 0 4px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.an-unter { margin: 0 0 20px; color: #4e5c70; font-size: 14px; }
.an-text  { margin: 14px 0 18px; color: #41556d; font-size: 14px; }

.an-feld { display: block; margin-bottom: 13px; }
.an-feld span {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  color: #4e5c70;
}
.an-feld input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  /* Dunkler als der Grund, sonst ist es kein Rand, sondern ein
     Schein: #e2eaf3 hat Helligkeit 0,815 und lag damit ZWISCHEN
     dem weissen Feld und dem jetzigen Grund (0,744). */
  border: 1.5px solid #bccbe0;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14.5px;
  color: #12233a;
}
.an-feld input:focus {
  outline: 0;
  border-color: #1e599d;
  box-shadow: 0 0 0 3px rgba(30, 89, 157, .12);
}

.an-hinweis { margin: -6px 0 14px; font-size: 12px; color: #5b646f; }
.an-fehler  { margin: 2px 0 12px; font-size: 13px; color: #b3261e; }

.an-tun {
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: 11px;
  background: #ef8a3c;
  color: #fff;
  font: 700 15px/1 inherit;
  cursor: pointer;
}
.an-tun:hover { filter: brightness(1.06); }
.an-tun:disabled { opacity: .55; cursor: default; filter: none; }
/* Waehrend es laeuft: kein Drehrad, nur ein ruhiges Pulsieren. Ein
   Rad suggeriert Fortschritt, den niemand misst. */
.an-tun.laeuft { animation: anPuls 1.1s ease-in-out infinite; }
@keyframes anPuls { 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .an-tun.laeuft { animation: none; } }

.an-zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.an-link {
  all: unset;
  cursor: pointer;
  font-size: 13px;
  color: #1e599d;
  font-weight: 600;
}
.an-link:hover { text-decoration: underline; }
.an-link:focus-visible { outline: 2px solid #1e599d; outline-offset: 2px; border-radius: 4px; }

.an-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  padding-top: 16px;
  /* Der Strich muss DUNKLER sein als der Grund, nicht heller. Er
     war #e2eaf3, als der Grund noch #eff4fa war; auf dem jetzigen
     #d6e1ef waere er heller und der Strich kehrte sich um. */
  border-top: 1px solid #c6d4e6;
  font-size: 13px;
  color: #5b646f;
}

@media (max-width: 420px) {
  .an-karte { border-radius: 14px; }
  .an-zeile { flex-direction: column; gap: 8px; }
}

/* ============================================================
   Konto-Eintrag oben rechts in der Kopfzeile (konto.js).
   Er steht an der Stelle des Schliessen-Kreuzes, das in der SaaS
   nichts zu schliessen hat.
   ============================================================ */
#crsFrame .crs-kopf{ position:relative; }
/* Das Kreuz wuerde die Suite schliessen und ein leeres Fenster
   hinterlassen — hier gibt es kein Dahinter. */
#crsFrame .crs-kopf .crs-x{ display:none; }

.kto-knopf{
  all:unset; box-sizing:border-box; flex:none; cursor:pointer;
  /* In die Ecke. Die Kopfzeile ist eine Flex-Reihe; ohne das klebt
     der Knopf an der Suche, weil er einfach hinten angehaengt ist. */
  margin-left:auto;
  display:inline-flex; align-items:center; gap:9px;
  max-width:220px; padding:5px 12px 5px 5px; border-radius:22px;
  font:600 13px/1 "Roboto Flex", system-ui, sans-serif;
  color:rgba(255,255,255,.92);
}
.kto-knopf:hover{ background:rgba(255,255,255,.12); }
.kto-knopf.an{ background:rgba(255,255,255,.16); }
.kto-knopf:focus-visible{ outline:2px solid rgba(255,255,255,.7); outline-offset:2px; }
.kto-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.kto-kreis{
  flex:none; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:#ef8a3c; color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.02em;
}
.kto-kreis.leer{ background:rgba(255,255,255,.18); }
.kto-kreis .material-symbols-rounded{ font-size:17px; }

/* Das Menue haengt unter dem Knopf, rechtsbuendig. */
.kto-menue{
  position:absolute; z-index:60; top:calc(100% - 6px); right:14px;
  width:252px; padding:6px; background:#fff; border-radius:12px;
  box-shadow:0 14px 36px rgba(8,30,60,.26);
  color:#12233a; text-align:left; cursor:default;
  animation:vkRein .18s cubic-bezier(.2,.7,.3,1) both;
}
@media (prefers-reduced-motion:reduce){ .kto-menue{ animation:none; } }
.kto-kopf{ padding:9px 10px 8px; border-bottom:1px solid #eef3f9; margin-bottom:4px; }
.kto-kopf b{ display:block; font-size:13.5px; }
.kto-kopf small{
  display:block; margin-top:2px; font-size:11.5px; line-height:1.45;
  color:#8a97a8; word-break:break-word;
}
.kto-zeile{
  display:flex; justify-content:space-between; gap:10px;
  padding:5px 10px; font-size:12px; color:#8a97a8;
}
.kto-zeile b{ color:#41556d; font-weight:600; text-align:right; }
.kto-eintrag{
  all:unset; box-sizing:border-box; display:flex; align-items:center; gap:8px;
  width:100%; margin-top:4px; padding:9px 10px; border-radius:9px;
  font-size:13px; color:#12233a; cursor:pointer;
}
.kto-eintrag:hover{ background:#f3f7fb; }
.kto-eintrag:focus-visible{ outline:2px solid #1e599d; outline-offset:-2px; }
.kto-eintrag .material-symbols-rounded{ font-size:18px; color:#64748b; }

/* Schmal: nur der Kreis, der Name wuerde die Suche erdruecken. */
@media (max-width:720px){
  .kto-name{ display:none; }
  .kto-knopf{ padding:5px; }
}

/* ============================================================
   Konto und Zugang (konto.js)
   Kommt wie alle Dialoge von rechts — aber als Blatt am Rand, nicht
   mittig: man liest hier, statt eine Frage zu beantworten.
   ============================================================ */
.kto-raum{
  position:fixed; inset:0; z-index:9100; display:flex; justify-content:flex-end;
  background:rgba(8,30,60,.34);
  animation:vkSchleier .16s ease-out both;
}
.kto-blatt{
  width:min(440px,100%); height:100%; display:flex; flex-direction:column;
  background:#fff; box-shadow:-18px 0 44px rgba(8,30,60,.22);
  font:15px/1.55 "Roboto Flex", system-ui, sans-serif; color:#12233a;
  animation:vkRein .22s cubic-bezier(.2,.7,.3,1) both;
}
@media (prefers-reduced-motion:reduce){
  .kto-raum, .kto-blatt{ animation:none; }
}

.kto-bkopf{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid #eef3f9; font-size:16px;
}
.kto-bkopf button{
  all:unset; cursor:pointer; width:32px; height:32px; border-radius:9px;
  display:grid; place-items:center; color:#8a97a8;
}
.kto-bkopf button:hover{ background:#f3f7fb; }

.kto-rumpf{ flex:1; min-height:0; overflow-y:auto; padding:6px 20px 22px; }
.kto-rumpf section{ padding:18px 0; border-bottom:1px solid #eef3f9; }
.kto-rumpf section:last-of-type{ border-bottom:0; }
.kto-rumpf h3{
  display:flex; align-items:center; gap:7px; margin:0 0 12px;
  font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#8a97a8;
}
.kto-rumpf h3 .material-symbols-rounded{ font-size:17px; }

.kto-feld{ display:block; margin-bottom:11px; }
.kto-feld span{ display:block; margin-bottom:5px; font-size:12px; color:#8a97a8; }
.kto-feld input{
  width:100%; box-sizing:border-box; padding:10px 12px;
  border:1.5px solid #e2eaf3; border-radius:10px; background:#fff;
  font:inherit; font-size:14px; color:#12233a;
}
.kto-feld input:focus{ outline:0; border-color:#1e599d; }

.kto-wenn{ margin:-2px 0 11px; padding-left:10px; border-left:2px solid #ef8a3c; }
.kto-hin{ margin:0 0 12px; font-size:12.5px; line-height:1.5; color:#8a97a8; }

.kto-tun{
  all:unset; cursor:pointer; display:inline-flex; align-items:center;
  padding:9px 15px; border-radius:10px; background:#ef8a3c; color:#fff;
  font-size:13px; font-weight:700;
}
.kto-tun:hover{ filter:brightness(1.06); }
.kto-tun:disabled{ opacity:.5; cursor:default; filter:none; }
.kto-tun.still{
  background:transparent; color:#b3261e;
  box-shadow:inset 0 0 0 1.5px rgba(179,38,30,.35);
}
.kto-tun.still:hover{ background:rgba(179,38,30,.07); filter:none; }

/* Die Meldung klebt unten und bleibt sichtbar, auch wenn man
   weiterscrollt — sonst meldet sie etwas, das niemand liest. */
.kto-meldung{
  position:sticky; bottom:0; margin:14px 0 0; padding:10px 12px;
  border-radius:10px; font-size:13px;
}
.kto-meldung.gut{ background:#e7f5ee; color:#0e7c6b; }
.kto-meldung.schlimm{ background:#fdeceb; color:#b3261e; }

/* ---------- Rauch um die Karte ----------
   Im Dashboard der Workstation liegt dieselbe Leinwand UEBER dem
   Widget: dort ist der Rauch eine einmalige Geste von vier
   Sekunden, die zeigt, wo gerade etwas eingesetzt wurde.

   Hier qualmt er dauerhaft, und da gilt das Gegenteil. Ueber der
   Karte war die Anmeldung nach wenigen Sekunden nicht mehr zu
   lesen — gemessen und im Bild gesehen. Also DAHINTER: so umrahmt
   der Rauch die Karte, statt sie zuzuziehen.

   Sie faengt keine Klicks ab und ist immer da. Sie war einmal
   display:none und wurde je Stoss eingeschaltet — beim Dauerlauf
   gibt es keine Stoesse mehr, und eine Leinwand, die erst beim
   Einschalten vermessen werden kann, ist nur eine Fehlerquelle
   mehr. */
.an-rauch {
  position: absolute;
  left: 0;
  top: 0;
  /* NICHT inset:0. Ein <canvas> ist ein ersetztes Element: absolut
     positioniert und mit width:auto nimmt es seine Eigengroesse
     (300x150) und laesst sich von gegenueberliegenden Kanten nicht
     aufspannen. Gemessen: 300x150 statt 1248x860, und der Rauch
     quoll um ein Rechteck, das mit der Karte nichts zu tun hatte.
     Die Workstation schreibt bei .dash-rauch aus genau diesem Grund
     Breite und Hoehe hin. */
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   Querformat: links wofuer, rechts die Anmeldung

   Die Karte ist keine Spalte mehr, sondern ein liegendes
   Rechteck aus zwei Haelften. Entwurf 1 aus
   previews/anmeldung-querformat.html.
   ============================================================ */
.an-karte {
  display: flex;
  width: min(1000px, 100%);
  padding: 0;            /* die Haelften bringen ihren Rand selbst mit */
  min-height: 452px;     /* damit kurze Ansichten die Karte nicht stauchen */
}

/* ---------- links ---------- */
.an-info {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  /* Heller als der Grund, nicht dunkler: so hebt sich die Karte ab,
     seit der Grund fuer den Rauch abgedunkelt wurde. */
  background: #0e2d4d;
  color: #fff;
  padding: 38px 36px;
}
.an-info .an-marke { color: rgba(255, 255, 255, .92); }
.an-schlag {
  margin: 26px 0 10px;
  font-size: 27px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.an-schlag em { font-style: normal; color: #8ab4e0; }
.an-beitext { margin: 0; color: rgba(255, 255, 255, .62); font-size: 14px; max-width: 40ch; }

.an-punkte { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 15px; }
.an-punkte li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: rgba(255, 255, 255, .82);
  font-size: 13.5px;
  line-height: 1.42;
}
.an-punkte .material-symbols-rounded {
  font-size: 20px;
  color: #ef8a3c;
  flex: none;
  margin-top: 1px;
}
.an-punkte b { display: block; color: #fff; font-weight: 650; }

/* ---------- rechts ---------- */
.an-form {
  flex: 1 1 50%;
  /* NICHT reinweiss. Eine halbe Bildschirmbreite #fff neben einem
     fast schwarzen Navy blendet — nicht wegen der Farbe, wegen der
     Flaeche. Ein Hauch Blau nimmt die Schaerfe und bleibt in der
     Farbwelt des Produkts.

     Der Grund steht hier und nicht an .an-karte, siehe dort: unter
     der dunklen Haelfte darf nichts Helles liegen, sonst schimmert
     es an den linken Rundungen durch.

     Gerechnet statt geschaetzt. Relative Helligkeit: 1,00 bei
     #fff, 0,90 beim frueheren #eff4fa, 0,74 hier. Der erste
     Schritt war zu klein — die Flaeche blendete weiter.

     WER DAS WEITER ABDUNKELT, MUSS DIE TEXTE MITNEHMEN. Schon bei
     #eff4fa lagen zwei darunter: #64748b kam auf 4,30 und #8a97a8
     auf 2,69, bei verlangten 4,5. Hier stehen sie bei 5,14 und
     4,54 — das ist knapp, eine weitere Stufe kostet sie wieder.

     Die Eingabefelder bleiben weiss und heben sich jetzt deutlich
     ab: 1,11 vorher, 1,32 jetzt. Genau dafuer war der gedaempfte
     Grund gedacht. */
  background: #d6e1ef;
  padding: 38px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Kurze Ansichten (gesendet, gesetzt) stehen sonst oben und die
     Karte sieht halb leer aus. */
}
.an-form > h1:first-child { margin-top: 0; }

/* ---------- schmal ----------
   Unter 880 Pixeln passen zwei Haelften nicht mehr nebeneinander.
   Dann stapeln sie sich, und die drei Punkte fallen weg: auf einem
   Telefon zaehlt, dass das Formular ohne Scrollen erreichbar ist,
   nicht dass daneben steht, warum. Marke und Schlagzeile bleiben —
   ganz ohne waere nicht erkennbar, wo man gelandet ist. */
@media (max-width: 880px) {
  .an-karte { flex-direction: column; width: min(420px, 100%); min-height: 0; }
  .an-info { padding: 24px 26px 22px; }
  .an-schlag { margin: 14px 0 0; font-size: 20px; }
  .an-beitext, .an-punkte { display: none; }
  .an-form { padding: 26px 26px 24px; }
}