/* anmeldung.css — Anmeldung schwebt vor der Seite (Bauauftrag „Abrechnung je Kunde und Terminart“, 08.10.2026, Entscheidung 8, Variante B).
   Seit dem Bauauftrag „Startseite im Glas-Raster“ (08.10.2026, Entscheidung 4) ein Baustein für zwei Stellen: dieselben Regeln für die Glaskarte der
   Anmeldung (.ls, .ls-*) und die Karten der Startseite der Verwaltung (.gl, .gl-*, lib/startseite_glas.php bettet diese Datei ein). Nur die Anmeldung
   schwebt und hat Glut und Boden; das Zeichen sitzt auf der Startseite in der Karte (Regel dort).
   Eine Glaskarte mit leuchtendem Rand für die Startseite (index.html), die Anmeldung des Kundenbereichs (kunden/index.php) und „Passwort vergessen“
   (kunden/passwort.php). Muster: bauauftraege/archiv/2026-10-08 Anmeldung schwebend Vorschau.html. Alles mit ls- davor, damit nichts mit den Regeln der
   Seiten (.karte, .knopf, .anmeldung) zusammenstößt. Das Licht setzt anmeldung.js (--x, --y, --an am Halter .ls). */
.gl{--x:50%;--y:0%;--an:.45;position:relative}
.ls{--x:50%;--y:0%;--an:.45;position:relative;width:100%;max-width:430px;margin:18px auto 46px;font-family:'Montserrat','Segoe UI','Helvetica Neue',Arial,sans-serif;text-align:left}
.ls *,.gl *{box-sizing:border-box}
.ls-schweben{position:relative;animation:ls-schweben 7s ease-in-out infinite}
.ls:focus-within .ls-schweben,.ls:hover .ls-schweben{animation-play-state:paused}
@keyframes ls-schweben{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}}
.ls-schein,.gl-schein{position:absolute;inset:-14px;border-radius:24px;z-index:0;pointer-events:none;
  background:radial-gradient(320px circle at var(--x) var(--y),rgba(177,93,196,.62),rgba(89,6,104,.30) 42%,transparent 72%);filter:blur(30px);opacity:calc(var(--an) * .95)}
.ls-glut{position:absolute;inset:-3px;border-radius:17px;z-index:0;pointer-events:none;
  background:radial-gradient(190px circle at var(--x) var(--y),#f3d6f8 0%,#e9b8f2 18%,#b15dc4 40%,rgba(139,15,160,.55) 60%,transparent 78%);filter:blur(9px);opacity:var(--an)}
.ls-boden{position:absolute;left:12%;right:12%;bottom:-34px;height:26px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(67,4,79,.28),transparent);filter:blur(6px);animation:ls-boden 7s ease-in-out infinite}
.ls:focus-within .ls-boden,.ls:hover .ls-boden{animation-play-state:paused}
@keyframes ls-boden{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.9);opacity:.7}}
.ls-karte,.gl-karte{position:relative;z-index:1;border-radius:14px;padding:30px 28px 24px;
  background:radial-gradient(420px circle at var(--x) var(--y),rgba(233,184,242,calc(var(--an) * .26)),transparent 62%),linear-gradient(rgba(255,255,255,.68),rgba(255,255,255,.68));
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(89,6,104,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 40px 80px -24px rgba(67,4,79,.34),0 16px 32px -14px rgba(67,4,79,.20)}
.ls-karte::before,.gl-karte::before{content:"";position:absolute;inset:-1px;border-radius:15px;padding:2px;pointer-events:none;
  background:radial-gradient(230px circle at var(--x) var(--y),#ffffff 0%,#f3f0f8 9%,#e9b8f2 24%,#b15dc4 44%,rgba(139,15,160,.55) 64%,rgba(89,6,104,0) 82%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:var(--an)}
.ls-zeichen,.gl-zeichen{position:absolute;top:-22px;left:28px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#8b0fa0,#590668);color:#fff;box-shadow:0 10px 22px -6px rgba(89,6,104,.55),0 0 0 4px rgba(255,255,255,.75)}
.ls-zeichen svg,.gl-zeichen svg{width:19px;height:19px}
.ls-ober,.gl-ober{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#590668;margin-top:6px}
.ls-titel,.gl-titel{margin:6px 0 0;font-size:24px;font-weight:800;letter-spacing:-.01em;color:#111111;line-height:1.2}
.ls-text{margin:8px 0 2px;font-size:14px;line-height:1.6;color:#555555}
.ls-meldung{margin:14px 0 0;padding:10px 12px;border-radius:3px;font-size:13.5px;line-height:1.5;background:rgba(243,240,248,.9);border-left:3px solid #590668;color:#333333}
.ls-meldung.fehler{border-left-color:#b3261e;background:rgba(253,236,234,.92);color:#7a1b14}
.ls-form{margin-top:14px}
.ls-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:14px 0 5px}
.ls-form label{display:block;margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#590668}
.ls-zeile a{font-size:12.5px;color:#590668;text-decoration:none;white-space:nowrap}
.ls-zeile a:hover{text-decoration:underline}
.ls-form input[type=text],.ls-form input[type=email],.ls-form input[type=password]{display:block;font-family:inherit;font-size:15px;padding:10px 12px;width:100%;height:46px;margin:0;border-radius:3px;color:#1a1a1a;
  background:rgba(255,255,255,.78);border:1px solid rgba(89,6,104,.16);transition:border-color .2s,box-shadow .2s,background .2s}
.ls-form input:focus{outline:none;background:#fff;border-color:#590668;box-shadow:0 0 0 4px rgba(177,93,196,.22)}
.ls-k{position:relative;margin-top:22px}
.ls-k::before{content:"";position:absolute;left:8%;right:8%;bottom:-12px;height:70%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(139,15,160,.85),rgba(177,93,196,.35) 60%,transparent);filter:blur(12px);opacity:.55;transition:opacity .3s,transform .3s}
.ls-k:hover::before,.ls-k:focus-within::before{opacity:1;transform:translateY(3px) scaleX(1.06)}
.ls-knopf{position:relative;z-index:1;display:block;width:100%;min-height:46px;border:0;cursor:pointer;font-family:inherit;color:#fff;
  font-size:13px;font-weight:800;letter-spacing:0;text-transform:none;padding:15px 24px;border-radius:999px;   /* 12.10.2026 (Sammelbau, Entscheidung 1): rund, normal geschrieben */
  background:linear-gradient(100deg,#590668 0%,#8b0fa0 50%,#590668 100%);background-size:220% 100%;background-position:0 0;transition:background-position .6s ease}
.ls-knopf:hover,.ls-knopf:focus-visible{background-position:100% 0}
.ls-knopf:focus-visible{outline:2px solid #e9b8f2;outline-offset:3px}
.ls-fuss{margin-top:22px;padding-top:14px;border-top:1px solid rgba(89,6,104,.12);font-size:12.5px;line-height:1.65;color:#555555}
.ls-fuss a{color:#590668}
/* App: Licht wandert ohne Skript-Schleife (registrierte Eigenschaften, eine Runde in 9 s) */
@property --x{syntax:'<length-percentage>';inherits:true;initial-value:50%}
@property --y{syntax:'<length-percentage>';inherits:true;initial-value:0%}
.ls.ls-wandern,.gl.ls-wandern{--an:.75;animation:ls-wandern 9s linear infinite}
/* 09.10.2026 (Glas-Nachbesserung, Teil 8): in der App ruht das Licht, solange ein Feld der Anmeldung den Fokus hat */
.ls.ls-wandern:focus-within{animation-play-state:paused}
@keyframes ls-wandern{0%{--x:0%;--y:0%}25%{--x:100%;--y:0%}50%{--x:100%;--y:100%}75%{--x:0%;--y:100%}100%{--x:0%;--y:0%}}
@media (max-width:600px){.ls-karte{padding:28px 22px 22px}.ls-zeichen{left:22px}}
/* Handy: ohne Unschärfe, Karte deckend (wie die Regel der App); Leuchtrand und Schweben bleiben */
@media (max-width:699px){.ls-karte,.gl-karte{-webkit-backdrop-filter:none;backdrop-filter:none;background:radial-gradient(420px circle at var(--x) var(--y),rgba(233,184,242,calc(var(--an) * .26)),transparent 62%),linear-gradient(#ffffff,#ffffff)}}
/* 10.10.2026 (Glas-Nachbesserung 2, Entscheidung 2): Karten der Glas-Startseiten im Hellen fast deckend, damit die Wolke hinter der Seite nicht lila durch
   das Glas scheint; das wandernde Licht bleibt. Nur .gl-karte (die Anmeldekarte .ls-karte bleibt), am Handy gilt die deckende Regel darüber. */
@media (min-width:700px){html:not([data-mode=dunkel]) .gl-karte{background:radial-gradient(420px circle at var(--x) var(--y),rgba(233,184,242,calc(var(--an) * .26)),transparent 62%),linear-gradient(rgba(255,255,255,.96),rgba(255,255,255,.96))}}
@media (prefers-reduced-motion:reduce){.ls-schweben,.ls-boden,.ls.ls-wandern,.gl.ls-wandern{animation:none}.ls.ls-wandern,.gl.ls-wandern{--x:18%;--y:0%;--an:.5}.ls-knopf,.ls-k::before{transition:none}}
/* Dunkel */
html[data-mode=dunkel] .ls-karte,html[data-mode=dunkel] .gl-karte{background:radial-gradient(420px circle at var(--x) var(--y),rgba(233,184,242,calc(var(--an) * .12)),transparent 62%),linear-gradient(rgba(28,16,34,.70),rgba(28,16,34,.70));
  border-color:rgba(233,184,242,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -24px rgba(0,0,0,.7),0 16px 32px -14px rgba(0,0,0,.5)}
@media (max-width:699px){html[data-mode=dunkel] .ls-karte,html[data-mode=dunkel] .gl-karte{background:radial-gradient(420px circle at var(--x) var(--y),rgba(233,184,242,calc(var(--an) * .12)),transparent 62%),linear-gradient(#1a0f20,#1a0f20)}}
html[data-mode=dunkel] .ls-schein,html[data-mode=dunkel] .gl-schein{background:radial-gradient(320px circle at var(--x) var(--y),rgba(177,93,196,.55),rgba(139,15,160,.30) 42%,transparent 72%)}
html[data-mode=dunkel] .ls-glut{background:radial-gradient(190px circle at var(--x) var(--y),#f6e3fa 0%,#e9b8f2 20%,#b15dc4 42%,rgba(139,15,160,.6) 62%,transparent 80%)}
html[data-mode=dunkel] .ls-boden{background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
html[data-mode=dunkel] .ls-zeichen,html[data-mode=dunkel] .gl-zeichen{box-shadow:0 10px 22px -6px rgba(0,0,0,.6),0 0 0 4px rgba(28,16,34,.85)}
html[data-mode=dunkel] .ls-ober,html[data-mode=dunkel] .gl-ober,html[data-mode=dunkel] .ls-form label,html[data-mode=dunkel] .ls-zeile a,html[data-mode=dunkel] .ls-fuss a{color:#e9b8f2}
html[data-mode=dunkel] .ls-titel,html[data-mode=dunkel] .gl-titel{color:#f3eef6}html[data-mode=dunkel] .ls-text,html[data-mode=dunkel] .ls-fuss{color:#a294ac}
html[data-mode=dunkel] .ls-fuss{border-top-color:rgba(233,184,242,.14)}
html[data-mode=dunkel] .ls-meldung{background:rgba(36,20,48,.9);border-left-color:#e9b8f2;color:#f3eef6}html[data-mode=dunkel] .ls-meldung.fehler{background:rgba(60,18,22,.9);border-left-color:#f08a82;color:#f6d3cf}
html[data-mode=dunkel] .ls-form input[type=text],html[data-mode=dunkel] .ls-form input[type=email],html[data-mode=dunkel] .ls-form input[type=password]{background:rgba(20,10,25,.75);color:#f3eef6;border-color:rgba(255,255,255,.16)}
html[data-mode=dunkel] .ls-form input:focus{background:#140a19;border-color:#e9b8f2;box-shadow:0 0 0 4px rgba(233,184,242,.16)}
html[data-mode=dunkel] .ls-knopf{color:#43044f;background:linear-gradient(100deg,#e9b8f2 0%,#f6e3fa 50%,#e9b8f2 100%);background-size:220% 100%}
html[data-mode=dunkel] .ls-k::before{background:radial-gradient(closest-side,rgba(233,184,242,.7),rgba(177,93,196,.3) 60%,transparent)}