/* ==========================================================================
   MeisterOrga - Anmeldeseite
   ========================================================================== */

/* -- 1. Design-Tokens ------------------------------------------------------ */
.auth {
  --au-bg-0:      #05080f;
  --au-bg-1:      #0a1120;
  --au-bg-2:      #0f1a2e;

  --au-ink:       #e9f1fd;
  --au-ink-soft:  #a7bad6;
  --au-ink-muted: #6d7f9c;

  --au-accent:      #3d8bff;
  --au-accent-soft: #8cc2ff;
  --au-accent-2:    #2fd4c4;

  --au-glass:        rgba(255, 255, 255, .062);
  --au-glass-strong: rgba(255, 255, 255, .095);
  --au-field:        rgba(255, 255, 255, .045);
  --au-field-focus:  rgba(255, 255, 255, .075);

  --au-line:      rgba(255, 255, 255, .105);
  --au-line-soft: rgba(255, 255, 255, .06);

  --au-danger:    #ff8b8b;
  --au-danger-bg: rgba(255, 107, 107, .10);
  --au-danger-ln: rgba(255, 107, 107, .32);

  --au-ok:        #4fe0b0;

  /* Farbwerte, die frueher als feste Angabe mitten in den Regeln standen. Sie
     sind hier gelandet, weil der helle Darstellungsmodus sie tauschen muss -
     die dunklen Werte sind unveraendert dieselben wie vorher. */
  --au-veil:        rgba(255, 255, 255, .028);  /* letzte Stufe der Kartenverlaeufe */
  --au-shine:       rgba(255, 255, 255, .085);  /* Lichtreflex ueber Karten        */
  --au-line-hover:  rgba(255, 255, 255, .17);   /* Feldrahmen beim Ueberfahren     */
  --au-line-mid:    rgba(255, 255, 255, .2);
  --au-line-strong: rgba(255, 255, 255, .24);
  --au-grid:        rgba(255, 255, 255, .05);   /* technisches Raster im Grund     */
  --au-hover-bg:    rgba(255, 255, 255, .07);
  --au-chip-bg:     rgba(255, 255, 255, .045);
  --au-panel-bg:    rgba(255, 255, 255, .035);
  --au-autofill:    #16223a;                    /* Fuellfarbe automatischer Felder */
  --au-link-hover:  #b9daff;
  --au-ink-faint:   #55688a;
  --au-on-accent:   #ffffff;                    /* Schrift auf blauem Grund        */
  --au-accent-ink:  #cfe4ff;                    /* blaue Schrift beim Ueberfahren  */
  --au-caps:        #ffd8a8;

  /* Der Fokusrahmen der Eingabefelder. Stand frueher als fester Wert in .au-
     control input:focus; seit die Ziffernfelder des Sicherheitscodes
     denselben Rahmen tragen, steht er hier - sonst muesste man ihn beim
     naechsten Mal an zwei Stellen aendern und wuerde eine vergessen. */
  --au-focus-line: rgba(61, 139, 255, .62);
  --au-focus-ring: rgba(61, 139, 255, .15);

  --au-glow-a: rgba(61, 139, 255, .40);
  --au-glow-b: rgba(47, 212, 196, .26);
  --au-glow-c: rgba(97, 160, 255, .22);

  --au-alert-error-ink:   #ffd9d9;
  --au-alert-info-ink:    #d6e8ff;
  --au-alert-success-ink: #d4f7ec;

  --au-glanz:       rgba(255, 255, 255, .10);   /* Lichtkante oben an Karten       */
  --au-glyph:       #9fc4ff;                    /* Zeichen im Hintergrund          */

  /* Schatten. Je Staerke ein eigener Wert statt einer Farbe mit wechselnder
     Deckkraft: Im hellen Modus braucht ein Schatten nicht nur eine andere
     Farbe, sondern auch deutlich weniger Deckkraft - sonst wirkt die Seite
     schmutzig. */
  --au-shadow-card:    rgba(0, 0, 0, .30);
  --au-shadow-lift:    rgba(0, 0, 0, .34);
  --au-shadow-figur:   rgba(0, 0, 0, .55);
  --au-shadow-deep:    rgba(0, 0, 0, .85);
  --au-shadow-karte-a: rgba(0, 0, 0, .92);      /* Anmeldekarte, weiter Wurf */
  --au-shadow-karte-b: rgba(0, 0, 0, .7);       /* Anmeldekarte, enger Wurf  */

  /* Kontur des Logos. Das Logo ist fuer dunklen Grund gezeichnet; auf hellem
     Grund braucht sein silberner Teil eine Abgrenzung. */
  --au-logo-kontur: drop-shadow(0 0 0 transparent);

  --au-cc-bg-a: rgba(20, 28, 44, .98);
  --au-cc-bg-b: rgba(12, 18, 30, .98);

  --au-radius:    20px;
  --au-radius-sm: 12px;

  --au-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* -- 2. Grundlagen und Reset ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

.auth {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--au-ink);
  background: var(--au-bg-0);
  font-family: var(--au-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: dark;
  overflow-x: hidden;
}

.auth h1, .auth p { margin: 0; }

.auth a {
  color: var(--au-accent-soft);
  text-decoration: none;
}
.auth a:hover { color: var(--au-link-hover); text-decoration: underline; }

.auth :focus-visible {
  outline: 2px solid var(--au-accent-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Nur für Screenreader */
/* -- 3. Hintergrund -------------------------------------------------------- */
/* Vier übereinanderliegende Ebenen ergeben die Tiefe:
   Grundverlauf, weiche Lichtpunkte, feines Raster und ganz zarte Glyphen
   aus den Themen der Plattform. */
.auth__bg {
  position: fixed; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% -10%, var(--au-bg-2) 0%, transparent 58%),
    linear-gradient(180deg, var(--au-bg-1) 0%, var(--au-bg-0) 72%);
}

.auth__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.auth__glow--a {
  width: 46rem; height: 46rem;
  top: -20rem; left: -14rem;
  background: radial-gradient(circle, var(--au-glow-a) 0%, transparent 68%);
  animation: au-drift-a 26s ease-in-out infinite alternate;
}
.auth__glow--b {
  width: 40rem; height: 40rem;
  right: -16rem; bottom: -18rem;
  background: radial-gradient(circle, var(--au-glow-b) 0%, transparent 68%);
  animation: au-drift-b 32s ease-in-out infinite alternate;
}
.auth__glow--c {
  width: 34rem; height: 22rem;
  top: 12%; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--au-glow-c) 0%, transparent 70%);
  filter: blur(70px);
}

@keyframes au-drift-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(4rem, 3rem, 0); }
}
@keyframes au-drift-b {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-3.5rem, -2.5rem, 0); }
}

/* Feines technisches Raster, an den Rändern ausgeblendet */
.auth__grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(var(--au-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--au-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(125% 95% at 50% 26%, #000 0%, transparent 70%);
          mask-image: radial-gradient(125% 95% at 50% 26%, #000 0%, transparent 70%);
}

/* Angedeutete Themen der Plattform - bewusst kaum sichtbar */
.auth__glyphs {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--au-glyph);
  opacity: .034;
  animation: au-glyphs 40s ease-in-out infinite alternate;
}
@keyframes au-glyphs {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -1.6rem, 0); }
}

/* -- 4. Rahmen und Markenbereich ------------------------------------------- */
.auth__shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 1.75rem 1.1rem calc(1.75rem + env(safe-area-inset-bottom));
}

.auth__inner {
  width: 100%;
  max-width: 26.5rem;
}

.brandmark {
  position: relative;
  z-index: 4;                 /* das Logo laeuft vor der Figur */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.15rem;
  text-align: center;
}

/* Das <picture> um das Logo nimmt am Satz nicht teil */
.brandlogo-pic { display: contents; }

.brandlogo {
  display: block;
  width: 100%;
  max-width: 18rem;
  height: auto;
  margin: 0 auto;
  filter: var(--au-logo-kontur) drop-shadow(0 14px 34px rgba(61, 139, 255, .32));
  /* Das Logo steht still. Es reagiert nur über Helligkeit und Lichtschein,
     nie über Bewegung - ein wanderndes Logo lenkt beim Anmelden ab. */
  transition: opacity .4s ease, filter .4s ease;
}

.brandmark__claim {
  font-size: .82rem;
  color: var(--au-ink-muted);
  letter-spacing: .01em;
}

/* -- 5. Reaktion des Logos ------------------------------------------------- */
/* Sobald das Passwortfeld den Fokus hat, tritt das Logo dezent zurück - es
   "schaut weg". Wird das Passwort sichtbar gemacht, kommt es wieder nach
   vorn. */
.auth.is-private .brandlogo {
  opacity: .5;
  filter: var(--au-logo-kontur) drop-shadow(0 8px 20px rgba(61, 139, 255, .14)) saturate(.7);
}
.auth.is-peeking .brandlogo {
  opacity: 1;
  filter: var(--au-logo-kontur) drop-shadow(0 16px 40px rgba(61, 139, 255, .58));
}

/* Beim Absenden ein einzelner ruhiger Impuls */
.auth.is-submitting .brandlogo {
  animation: au-logo-puls 1s ease-out 2;
}
@keyframes au-logo-puls {
  0%   { filter: var(--au-logo-kontur) drop-shadow(0 14px 34px rgba(61, 139, 255, .32)); }
  45%  { filter: var(--au-logo-kontur) drop-shadow(0 18px 46px rgba(96, 176, 255, .75)); }
  100% { filter: var(--au-logo-kontur) drop-shadow(0 14px 34px rgba(61, 139, 255, .32)); }
}

/* -- 6. Anmeldekarte ------------------------------------------------------- */
/* Die Figur an der Kartenkante */
.auth-guck {
  position: relative;
  z-index: 1;                       /* hinter Logo (4) und Karte (2) */
  width: 168px;
  /* Oben negativ, und zwar kraeftig: Der Schriftzug soll auf der Brust der
     Figur liegen, nicht am Kopf. */
  margin: -16.25rem 1.8rem -2px auto;
  line-height: 0;
  pointer-events: none;
  animation: auth-guck-ein .7s cubic-bezier(.22, .68, .3, 1) .25s both;
}
.auth-guck img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 18px var(--au-shadow-figur));
}

/* Sie taucht von hinten auf, statt einfach dazustehen. */
@keyframes auth-guck-ein {
  from { opacity: 0; transform: translate3d(0, 1.4rem, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Platz fuer den Kopf, der ueber das Logo hinausragt. */
.auth__shell:has(.auth-guck) { padding-top: 9.5rem; }

/* Auf niedrigen *breiten* Fenstern ist jeder Pixel fuer das Formular da -
   dort entfaellt die Figur ganz, wie schon der Anspruch unter dem Logo.
   Gemeint ist damit das Notebook im Querformat: viel Breite, wenig Hoehe. */
@media (min-width: 560px) and (max-height: 800px) {
  .auth-guck { display: none; }
  .auth__shell:has(.auth-guck) { padding-top: 2.5rem; }
}
@media (max-width: 359px) {
  .auth-guck { width: 118px; margin-right: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-guck { animation: none; opacity: 1; transform: none; }
}

.auth-card {
  position: relative;
  z-index: 2;                 /* deckt den unteren Rand der Figur ab */
  padding: 1.55rem 1.3rem 1.4rem;
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius);
  background:
    linear-gradient(158deg, var(--au-glass-strong) 0%, var(--au-glass) 46%, var(--au-veil) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    0 42px 90px -34px var(--au-shadow-karte-a),
    0 12px 32px -18px var(--au-shadow-karte-b),
    inset 0 1px 0 var(--au-glanz);
  overflow: hidden;
}

/* Feiner Lichtstrich auf der Oberkante */
.auth-card::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160, 205, 255, .65), transparent);
}

.auth-card__head {
  margin-bottom: 1.25rem;
}
/* Der Anspruch über der Begrüßung - leise gesetzt, er ist die Beischrift
   zum Logo und nicht die Ansage der Seite. */
.auth-card__claim {
  margin: 0 0 .75rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--au-accent-soft);
}

.auth-card__title {
  font-size: 1.45rem;
  font-weight: 660;
  letter-spacing: -.015em;
  line-height: 1.25;
}
.auth-card__sub {
  margin-top: .35rem;
  font-size: .875rem;
  color: var(--au-ink-soft);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: .95rem;
}

/* -- 7. Formularfelder ----------------------------------------------------- */
.au-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.au-field > label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--au-ink-soft);
}

.au-control {
  position: relative;
  display: flex;
  align-items: center;
}

.au-control__icon {
  position: absolute;
  left: .92rem;
  width: 18px; height: 18px;
  color: var(--au-ink-muted);
  pointer-events: none;
  transition: color .2s ease;
}
.au-control__icon svg { width: 100%; height: 100%; display: block; }

.au-control input {
  width: 100%;
  min-height: 3rem;
  padding: .7rem 1rem .7rem 2.8rem;
  font: inherit;
  font-size: 1rem;              /* verhindert das Zoomen auf iOS */
  color: var(--au-ink);
  background: var(--au-field);
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius-sm);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.au-control input::placeholder { color: var(--au-ink-muted); }

.au-control input:hover { border-color: var(--au-line-hover); }

.au-control input:focus {
  outline: none;
  background: var(--au-field-focus);
  border-color: var(--au-focus-line);
  box-shadow: 0 0 0 4px var(--au-focus-ring);
}
.au-control:focus-within .au-control__icon { color: var(--au-accent-soft); }

.au-control--pw input { padding-right: 3.1rem; }

/* Automatisch ausgefüllte Felder: Chrome färbt sie sonst weiß ein. */
.auth input:-webkit-autofill,
.auth input:-webkit-autofill:hover,
.auth input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--au-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--au-autofill) inset;
  caret-color: var(--au-ink);
  transition: background-color 9999s ease-out 0s;
}

/* Passwort anzeigen / verbergen */
.au-reveal {
  position: absolute;
  right: .38rem;
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  padding: 0;
  color: var(--au-ink-muted);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.au-reveal:hover {
  color: var(--au-ink);
  background: var(--au-hover-bg);
}
.au-reveal svg { width: 19px; height: 19px; display: block; }
.au-reveal__off { display: none; }
.au-reveal[aria-pressed="true"] .au-reveal__on  { display: none; }
.au-reveal[aria-pressed="true"] .au-reveal__off { display: block; }

/* Hinweis, wenn die Feststelltaste aktiv ist */
.au-caps {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .1rem;
  font-size: .78rem;
  color: var(--au-caps);
}
.au-caps svg { width: 14px; height: 14px; flex: 0 0 auto; }
.au-caps[hidden] { display: none; }

/* -- 8. Optionen ----------------------------------------------------------- */
.au-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: -.1rem;
}

.au-check {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--au-ink-soft);
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.au-check input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.au-check__box {
  position: relative;
  flex: 0 0 auto;
  width: 19px; height: 19px;
  background: var(--au-field);
  border: 1px solid var(--au-line);
  border-radius: 6px;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.au-check__box::after {
  content: "";
  position: absolute;
  top: 3px; left: 6.4px;
  width: 4.5px; height: 9px;
  border: solid var(--au-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.4);
  opacity: 0;
  transition: transform .18s cubic-bezier(.34, 1.5, .64, 1), opacity .14s ease;
}
.au-check input:checked + .au-check__box {
  background: linear-gradient(135deg, #4b95ff, #2f6fe0);
  border-color: rgba(115, 176, 255, .8);
  box-shadow: 0 4px 14px -4px rgba(61, 139, 255, .8);
}
.au-check input:checked + .au-check__box::after {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}
.au-check input:focus-visible + .au-check__box {
  outline: 2px solid var(--au-accent-soft);
  outline-offset: 3px;
}
.au-check:hover .au-check__box { border-color: var(--au-line-mid); }

.au-link {
  padding: 0;
  font: inherit;
  font-size: .8rem;
  color: var(--au-ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .18s ease;
}
.au-link:hover { color: var(--au-accent-soft); }

/* Hinweis zum vergessenen Passwort */
.au-hint {
  margin-top: .1rem;
  padding: .7rem .85rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--au-ink-soft);
  background: rgba(61, 139, 255, .09);
  border: 1px solid rgba(61, 139, 255, .22);
  border-radius: var(--au-radius-sm);
}
.au-hint[hidden] { display: none; }

/* -- 9. Schaltfläche ------------------------------------------------------- */
.au-submit {
  position: relative;
  width: 100%;
  min-height: 3.1rem;
  margin-top: .2rem;
  padding: .8rem 1.2rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: .01em;
  color: #ffffff;
  background: linear-gradient(135deg, #4a95ff 0%, #2f6fe0 52%, #2a5fd0 100%);
  border: 1px solid rgba(140, 194, 255, .45);
  border-radius: 14px;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 14px 34px -12px rgba(61, 139, 255, .78),
    inset 0 1px 0 rgba(255, 255, 255, .26);
  transition: transform .22s cubic-bezier(.3, 1.2, .5, 1),
              box-shadow .22s ease, filter .22s ease;
}

/* Lichtreflex, der beim Überfahren einmal durchläuft */
.au-submit::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
}
.au-submit:hover {
  transform: translateY(-2px);
  filter: saturate(112%);
  box-shadow:
    0 20px 44px -12px rgba(61, 139, 255, .9),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}
.au-submit:hover::after { left: 118%; }
.au-submit:active { transform: translateY(0) scale(.995); }

.au-submit__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
}
.au-submit__label svg {
  width: 18px; height: 18px;
  transition: transform .25s ease;
}
.au-submit:hover .au-submit__label svg { transform: translateX(3px); }

.auth.is-submitting .au-submit {
  pointer-events: none;
  filter: saturate(80%) brightness(.94);
}
.auth.is-submitting .au-submit__label svg {
  animation: au-nudge .7s ease-in-out infinite;
}
@keyframes au-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* -- 10. Meldungen --------------------------------------------------------- */
.au-alert {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: 1rem;
  padding: .72rem .85rem;
  font-size: .85rem;
  line-height: 1.5;
  border-radius: var(--au-radius-sm);
}
.au-alert svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }

.au-alert--error {
  color: var(--au-alert-error-ink);
  background: var(--au-danger-bg);
  border: 1px solid var(--au-danger-ln);
}
.au-alert--error svg { color: var(--au-danger); }

.au-alert--info {
  color: var(--au-alert-info-ink);
  background: rgba(61, 139, 255, .10);
  border: 1px solid rgba(61, 139, 255, .26);
}
.au-alert--info svg { color: var(--au-accent-soft); }

.au-alert--success {
  color: var(--au-alert-success-ink);
  background: rgba(47, 212, 196, .10);
  border: 1px solid rgba(47, 212, 196, .28);
}
.au-alert--success svg { color: var(--au-ok); }

/* -- 11. Fußbereich der Karte ---------------------------------------------- */
.auth-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--au-line-soft);
}

.au-chip {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  padding: .3rem .55rem;
  font-size: .7rem;
  font-weight: 500;
  color: var(--au-ink-soft);
  background: var(--au-chip-bg);
  border: 1px solid var(--au-line-soft);
  border-radius: 999px;
}
.au-chip svg { width: 13px; height: 13px; color: var(--au-accent-soft); }
.au-chip--ok svg { color: var(--au-ok); }

.auth__legal {
  margin-top: 1rem;
  font-size: .74rem;
  /* Sechs Verweise statt vier. Auf einem 360 px breiten Bildschirm laufen
     sie ueber zwei Zeilen; ohne eigene Zeilenhoehe kleben die beiden
     aneinander. */
  line-height: 1.9;
  text-align: center;
  color: var(--au-ink-faint);
}

/* -- 12. Bildschirmgrößen -------------------------------------------------- */

/* Kleine Smartphones und niedrige Fenster: Kopfbereich zusammenrücken */
@media (max-height: 700px) {
  .brandlogo { max-width: 13rem; }
  .brandmark { gap: .35rem; margin-bottom: .8rem; }
  .brandmark__claim { display: none; }
  .auth__shell { padding-top: 1rem; padding-bottom: 1rem; }
  .auth-card { padding: 1.25rem 1.15rem 1.15rem; }
  .auth-card__head { margin-bottom: .95rem; }
  .auth-card__title { font-size: 1.32rem; }
  .auth-form { gap: .8rem; }
  .auth-card__foot { margin-top: .95rem; padding-top: .8rem; }

  /* Auf niedrigen Fenstern rueckt auch der Registrierungshinweis
     zusammen, damit die Karte nicht ueber den Bildschirmrand waechst. */
  .auth-card__register { margin-top: .95rem; padding-top: .8rem; }
  .auth-card__register > span { margin-bottom: .45rem; font-size: .74rem; }
  .auth-card__register a { padding: .5rem .9rem; font-size: .84rem; }
}

@media (max-width: 359px) {
  .auth__shell { padding-left: .75rem; padding-right: .75rem; }
  .auth-card { padding: 1.3rem 1rem 1.2rem; }
  .auth-card__title { font-size: 1.3rem; }
  .au-options { gap: .5rem; }
}

/* Tablet und aufwärts */
@media (min-width: 560px) {
  .auth__shell { padding: 2.5rem 1.5rem; gap: 1.4rem; }
  .auth__inner { max-width: 27rem; }
  .brandlogo { max-width: 21rem; }
  .brandmark { gap: .7rem; margin-bottom: 1.5rem; }
  .auth-card {
    padding: 2rem 1.85rem 1.7rem;
    --au-radius: 24px;
    border-radius: var(--au-radius);
  }
  .auth-card__title { font-size: 1.65rem; }
  .auth-card__sub { font-size: .92rem; }
  .auth-form { gap: 1.05rem; }
  .au-check, .au-link { font-size: .85rem; }
}

/* Desktop */
@media (min-width: 1024px) {
  .brandlogo { max-width: 22.5rem; }
  .auth__inner { max-width: 27.5rem; }
}

/* =========================================================================
   Niedrige Fenster
   ========================================================================= */

/* Mittelhohe Fenster (typische Laptops um 768 Pixel) */
@media (min-height: 701px) and (max-height: 940px) {
  .brandlogo           { max-width: 15rem; }
  .brandmark           { margin-bottom: .75rem; }
  .auth__shell         { padding-top: 1rem; padding-bottom: .7rem; }
  .auth-card           { padding: 1.55rem 1.85rem 1.3rem; }
  .auth-card__head     { margin-bottom: .9rem; }
  .auth-form           { gap: .78rem; }
  .auth-card__register { margin-top: .9rem; padding-top: .8rem; }
  .auth-card__foot     { margin-top: .9rem; padding-top: .8rem; }
  .auth__legal         { margin-top: .6rem; }
}

/* Kleine Smartphones und sehr niedrige Fenster: Kopfbereich zusammenrücken */
@media (max-height: 700px) {
  .brandlogo { max-width: 13rem; }
  .brandmark { gap: .35rem; margin-bottom: .8rem; }
  .brandmark__claim { display: none; }
  .auth__shell { padding-top: 1rem; padding-bottom: 1rem; }
  .auth-card { padding: 1.25rem 1.15rem 1.15rem; }
  .auth-card__head { margin-bottom: .95rem; }
  .auth-card__title { font-size: 1.32rem; }
  .auth-form { gap: .8rem; }
  .auth-card__foot { margin-top: .95rem; padding-top: .8rem; }

  /* Auf niedrigen Fenstern rueckt auch der Registrierungshinweis
     zusammen, damit die Karte nicht ueber den Bildschirmrand waechst. */
  .auth-card__register { margin-top: .95rem; padding-top: .8rem; }
  .auth-card__register > span { margin-bottom: .45rem; font-size: .74rem; }
  .auth-card__register a { padding: .5rem .9rem; font-size: .84rem; }
}

/* Telefon im Hochformat: die Figur bleibt stehen */
@media (max-width: 559px) {
  .auth-guck { width: 128px; margin: -11.65rem 1rem -2px auto; }
  .auth__shell:has(.auth-guck) { padding-top: 7rem; }
}

/* Sehr schmale Geraete: die Figur eine Nummer kleiner, sonst steht sie dem
   Logo im Weg. Der Zug nach oben faellt entsprechend geringer aus. */
@media (max-width: 359px) {
  .auth-guck { width: 112px; margin: -10.4rem .7rem -2px auto; }
  .auth__shell:has(.auth-guck) { padding-top: 6.2rem; }
}

/* Geräte ohne echten Zeigereingabe: Trefferflächen etwas größer */
@media (hover: none) {
  .au-reveal { width: 2.7rem; height: 2.7rem; }
  .au-submit:hover { transform: none; }
}

/* -- 13. Reduzierte Bewegung ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .auth *,
  .auth *::before,
  .auth *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .auth__glow, .auth__glyphs, .brandlogo { animation: none !important; }
  .au-submit:hover { transform: none; }
}

/* Wenn Blur nicht unterstützt wird, die Karte etwas kräftiger füllen */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .auth-card { background: rgba(19, 30, 51, .94); }
}

/* ===========================================================================
   Ergänzungen für den Mehrfirmenbetrieb
   =========================================================================== */

/* "Passwort vergessen?" ist jetzt ein Link statt einer Schaltfläche.
   Damit er in der Zeile mit dem Kontrollkästchen gleich aussieht wie
   vorher die Schaltfläche, wird die Unterstreichung entfernt. */
a.au-link {
  text-decoration: none;
}
a.au-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hinweis auf die Selbstregistrierung, unterhalb des Formulars. */
.auth-card__register {
  margin: 1.25rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--au-line-soft);
  text-align: center;
}
.auth-card__register > span {
  display: block;
  margin-bottom: .6rem;
  font-size: .78rem;
  color: var(--au-ink-muted);
}
.auth-card__register a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .62rem 1rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--au-accent-soft);
  background: rgba(61, 139, 255, .07);
  border: 1px solid rgba(61, 139, 255, .22);
  border-radius: var(--au-radius-sm);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.auth-card__register a:hover {
  color: var(--au-accent-ink);
  background: rgba(61, 139, 255, .13);
  border-color: rgba(61, 139, 255, .4);
  text-decoration: none;
}
.auth-card__register a svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  transition: transform .25s ease;
}
.auth-card__register a:hover svg { transform: translateX(3px); }

/* Fußzeile: Impressum, Datenschutz, AGB, Cookies, Kontakt. */
/* Rechtszeile: bewusst leise. Sie muss da sein, soll aber nicht mit dem
   Registrierungshinweis darueber um Aufmerksamkeit ringen - deshalb mehr
   Abstand und getrennte Punkte statt einer dichten Kette. */
.auth__legal {
  margin-top: 1.35rem;
  letter-spacing: .01em;
}
.auth__legal a {
  color: inherit;
  text-decoration: none;
  padding: 0 .1rem;
}
.auth__legal a:hover { color: var(--au-accent-soft); }

/* Die Kundennummer wird in Großbuchstaben eingegeben - MO10001 liest
   sich in Versalien eindeutiger, und der Buchstabenabstand hilft beim
   Vergleich mit der Rechnung. */
#customer_number {
  text-transform: uppercase;
  letter-spacing: .04em;
}
#customer_number::placeholder { letter-spacing: normal; }

@media (max-width: 480px) {
  .auth-card__register { font-size: .8rem; }
}

/* ---------------------------------------------------------------------------
   Einwilligung in Cookies
   --------------------------------------------------------------------------- */
.cc {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: 1rem .9rem calc(1rem + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.cc[hidden] { display: none; }

.cc__karte {
  pointer-events: auto;
  width: min(46rem, 100%);
  padding: 1.15rem 1.25rem 1.05rem;
  color: var(--au-ink);
  background: linear-gradient(158deg, var(--au-cc-bg-a) 0%, var(--au-cc-bg-b) 100%);
  border: 1px solid rgba(140, 194, 255, .22);
  border-radius: 16px;
  box-shadow: 0 24px 60px -18px var(--au-shadow-deep);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.cc__titel { margin: 0 0 .4rem; font-size: 1.02rem; font-weight: 700; color: var(--au-ink); }
.cc__text  { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--au-ink-soft); }
.cc__text a { color: var(--au-accent-soft); }

.cc__wahl { display: grid; gap: .5rem; margin: .9rem 0 .2rem; }
.cc__wahl[hidden] { display: none; }

.cc__zeile {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .55rem .7rem;
  background: var(--au-panel-bg);
  border: 1px solid var(--au-line);
  border-radius: 10px;
  cursor: pointer;
}
.cc__zeile--fest { opacity: .75; cursor: default; }
.cc__zeile input { margin-top: .15rem; flex: 0 0 auto; accent-color: var(--au-accent-2); }
.cc__zeile span  { display: block; font-size: .82rem; line-height: 1.5; color: var(--au-ink-muted); }
.cc__zeile strong { display: block; font-size: .88rem; color: var(--au-ink); }

.cc__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
}
.cc__btn {
  flex: 1 1 12rem;
  min-height: 2.9rem;
  padding: .7rem 1.1rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 650;
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.cc__btn[hidden] { display: none; }

/* Annehmen und Ablehnen sind gleich gross, gleich hell und stehen
   nebeneinander. Das ist keine Geschmacksfrage, sondern Vorgabe: Eine
   Ablehnung muss so leicht fallen wie eine Zustimmung. */
.cc__btn--gleich {
  color: var(--au-ink);
  background: rgba(61, 139, 255, .16);
  border: 1px solid rgba(61, 139, 255, .42);
}
.cc__btn--gleich:hover { background: rgba(61, 139, 255, .26); }

.cc__btn--leise {
  flex: 0 1 auto;
  color: var(--au-ink-soft);
  background: transparent;
  border: 1px solid var(--au-line);
}
.cc__btn--leise:hover { color: var(--au-ink); border-color: var(--au-line-strong); }

@media (max-width: 560px) {
  .cc { padding: .6rem .6rem calc(.6rem + env(safe-area-inset-bottom, 0px)); }
  .cc__karte { padding: 1rem; }
  .cc__btn { flex: 1 1 100%; }
}

/* ==========================================================================
   14. Sicherheitscode - die zweite Stufe der Anmeldung (login-code.php)
   ========================================================================== */

/* Die maskierte Adresse unter der Ueberschrift. */
.au-mailhint {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .7rem;
  padding: .34rem .7rem;
  font-size: .82rem;
  color: var(--au-ink-soft);
  background: var(--au-chip-bg);
  border: 1px solid var(--au-line-soft);
  border-radius: 999px;
  /* Eine lange Adresse darf die Karte nicht auseinanderziehen. */
  max-width: 100%;
  overflow-wrap: anywhere;
}
.au-mailhint svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--au-accent-soft); }

/* -- Die vier Ziffernfelder ------------------------------------------------
   fieldset bringt von Haus aus Rahmen und Innenabstand mit - beides muss
   weg, sonst steht die Gruppe in einem Kasten, den sonst niemand hat. */
.au-code {
  margin: 0 0 1.15rem;
  padding: 0;
  border: 0;
  /* min-width: 0 setzt die Vorgabe min-content von fieldset ausser Kraft.
     Ohne diese Zeile waere die Gruppe immer so breit wie ihr breitester
     Inhalt und wuerde auf dem Telefon die Karte aufspreizen. */
  min-width: 0;
}

.au-code__legend {
  display: block;
  padding: 0;
  margin-bottom: .55rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--au-ink-soft);
}

.au-code__felder {
  display: grid;
  /* Gleich breite Spalten statt fester Breiten: Die Felder teilen sich die
     Karte und passen dadurch von 320 px bis zum Schreibtisch. */
  grid-template-columns: repeat(var(--au-code-spalten, 4), 1fr);
  gap: .55rem;
  /* Vier Felder in voller Kartenbreite wirken auseinandergerissen. Die
     Gruppe bleibt deshalb schmal und steht mittig. */
  max-width: 17rem;
  margin-inline: auto;
}

.au-code__feld {
  width: 100%;
  /* Quadratisch, damit die Ziffer mittig steht und der Finger trifft.
     Die Untergrenze von 3rem ist dieselbe Ziel-Groesse wie bei den
     uebrigen Feldern der Anmeldung. */
  aspect-ratio: 1;
  min-height: 3rem;
  padding: 0;
  font: inherit;
  /* 1.5rem statt kleiner: Auf iOS zoomt Safari in jedes Feld unter 1rem
     hinein. Gross ist hier ohnehin richtig - es ist eine einzelne Ziffer. */
  font-size: 1.5rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--au-ink);
  background: var(--au-field);
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius-sm);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.au-code__feld:hover { border-color: var(--au-line-hover); }
.au-code__feld:focus {
  outline: none;
  background: var(--au-field-focus);
  border-color: var(--au-focus-line);
  box-shadow: 0 0 0 4px var(--au-focus-ring);
}
/* Ein gefuelltes Feld hebt sich ab - so sieht man beim Tippen, wie weit
   man ist, ohne die Ziffern zu zaehlen. */
.au-code__feld:valid { border-color: var(--au-line-mid); }

/* Die Zahlenraeder von Chrome und Firefox haben in einem Ziffernfeld
   nichts zu suchen - sie wuerden die Ziffer aus der Mitte schieben. */
.au-code__feld::-webkit-outer-spin-button,
.au-code__feld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.au-code__hinweis {
  margin: .6rem 0 0;
  font-size: .76rem;
  text-align: center;
  color: var(--au-ink-muted);
}

/* -- Neuen Code anfordern -------------------------------------------------- */
.au-again {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.1rem;
  font-size: .8rem;
}
.au-again form { display: inline; }
.au-again__frage { color: var(--au-ink-muted); }

.au-again__warten {
  flex: 1 0 100%;
  margin: .3rem 0 0;
  font-size: .76rem;
  text-align: center;
  color: var(--au-ink-muted);
}

/* Eine Schaltflaeche, die wie ein Verweis aussieht: "Neuen Code anfordern"
   und "Zurueck zum Login" aendern etwas auf dem Server und muessen deshalb
   POST sein - ein <a> waere von fremder Seite ausloesbar. */
.au-link--button {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--au-accent-soft);
}
.au-link--button:hover { color: var(--au-link-hover); }
.au-link--button:disabled {
  color: var(--au-ink-faint);
  text-decoration: none;
  cursor: not-allowed;
}

.auth-card__foot--zurueck { justify-content: center; }

/* -- Testbetrieb: der Code auf dem Bildschirm ------------------------------
   Bewusst deutlich als Hinweiskasten erkennbar und nicht als Teil des
   Formulars: Wer die Seite sieht, soll sofort verstehen, dass hier etwas
   steht, was im Echtbetrieb nicht dort steht. */
.au-testcode {
  margin-bottom: 1.1rem;
  padding: .85rem 1rem 1rem;
  text-align: center;
  background: var(--au-panel-bg);
  border: 1px dashed var(--au-line-mid);
  border-radius: var(--au-radius-sm);
}

.au-testcode__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--au-ink-muted);
}
.au-testcode__label svg { width: 15px; height: 15px; }

.au-testcode__wert {
  margin: .45rem 0 .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.9rem;
  font-weight: 700;
  /* Der Abstand steht auch RECHTS von der letzten Ziffer. text-indent in
     derselben Groesse schiebt ihn wieder heraus, sonst stuende die Zahl
     sichtbar links von der Mitte. */
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--au-ink);
}

.au-testcode__text {
  margin: 0;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--au-ink-muted);
}

@media (max-width: 380px) {
  .au-code__felder { gap: .4rem; max-width: 100%; }
  .au-code__feld   { font-size: 1.3rem; }
  .au-testcode__wert { font-size: 1.6rem; }
}