/* Moonlight Backspace, Tor und Anmeldung (moonlight-konzept/32, Abschnitte 12 und 15). Getreuer Port der Vorschau
   design/webseite/vorschau.css: Tokens Tiefschwarz mit Akzent Mond, Kosmos, Tor, Anmeldekarte. Die Buehne der
   Vorschau ist 1600 x 1000 gross; hier liegt alles relativ zur Bildmitte, sodass die Seite bei 1600 x 1000
   genau wie die Vorschau steht und auf kleineren Bildschirmen gestuft verkleinert.
   Kosmos: dieselben Sternfelder wie die Vorschau (Saaten 11, 23, 37, 53), hier fest als Schattenlisten, damit
   kein Inline-Stil noetig ist (CSP style-src 'self'). Auf grossen Bildschirmen waechst der Rahmen stufenweise.
   Bewegung nur ueber transform und opacity; reduzierte Bewegung verkuerzt, ?still=1 (html.still) haelt alles an. */

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #000000;
  --ink: #eceef5;
  --dim: #a9aec4;
  --faint: #8f94a9;
  --hair: rgba(190, 196, 214, 0.12);
  --hair-strong: rgba(190, 196, 214, 0.24);
  --text-primary: 236 238 245;
  --text-secondary: 169 174 196;
  --text-tertiary: 143 148 169;
  --glas: rgba(5, 6, 9, 0.66);
  --glas-dicht: rgba(4, 5, 8, 0.84);
  --glass-border: rgba(190, 196, 214, 0.11);
  --glass-highlight: rgba(255, 255, 255, 0.045);
  --flaeche: rgba(255, 255, 255, 0.022);
  --eingabe: rgba(255, 255, 255, 0.028);
  --status-online: 159 209 180;
  --accent-amber: 222 212 161;
  --accent-rose: 224 169 198;
  --accent-primary: 170 184 228;
  --accent: rgb(var(--accent-primary));
  --accent-glow: color-mix(in srgb, var(--accent) 25%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 38%, transparent);
  --accent-kante: color-mix(in srgb, var(--accent) 20%, transparent);
  --danger: rgb(217 164 173);
  --danger-line: color-mix(in srgb, var(--danger) 38%, transparent);
  --danger-glow: color-mix(in srgb, var(--danger) 25%, transparent);
  --hover: rgba(255, 255, 255, 0.055);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.4, 0, 1, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  /* Geometrie (Vorschau 1600 x 1000): Wortmarke auf dem Tor 720 px, Mitte 27 px ueber der Bildmitte; in der
     Anmeldung ist sie der Kopf der Karte (300 px, Mitte 82 px unter der Oberkante; Karte 286 px ueber der Mitte). */
  --wm-y: -27px;
  --wm-s: 1;
  --kopf-s: 0.4167;
  --karte-y: -286px;
  --karte-oben: max(16px, calc(50dvh + var(--karte-y)));
  --hub: max(calc(98px - 50dvh - var(--wm-y)), calc(var(--karte-y) + 82px - var(--wm-y)));
  color-scheme: dark;
}

html,
body {
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.tor-seite { height: 100%; overflow: hidden; }
button,
input { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: inherit; }
p,
li { text-wrap: pretty; }
img { user-select: none; -webkit-user-select: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* ===================== Kosmos (Tiefschwarz: nur Sterne, kein Nebel) ===================== */
.kosmos { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.k-rahmen { position: absolute; left: 50%; top: 50%; width: 1600px; height: 1000px; margin: -500px 0 0 -800px; scale: var(--k-s, 1); }
@media (min-width: 1601px), (min-height: 1001px) { .k-rahmen { --k-s: 1.25; } }
@media (min-width: 2001px), (min-height: 1251px) { .k-rahmen { --k-s: 1.6; } }
@media (min-width: 2561px), (min-height: 1601px) { .k-rahmen { --k-s: 2.4; } }
@media (min-width: 3841px), (min-height: 2401px) { .k-rahmen { --k-s: 3.4; } }
.sterne-ebene { position: absolute; inset: -20px; transition: transform 1.4s var(--ease); }
.sterne { position: absolute; left: 0; top: 0; width: 1.2px; height: 1.2px; border-radius: 50%; }
.sterne.mitte { width: 1.5px; height: 1.5px; }
.sterne.nah { width: 2px; height: 2px; }
.funkeln { position: absolute; inset: 0; }
.funkeln i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(226, 230, 242, 0.95); box-shadow: 0 0 6px 1px rgba(196, 204, 226, 0.35); opacity: 0.25; animation: funkeln var(--d, 5s) ease-in-out var(--v, 0s) infinite; }
@keyframes funkeln { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } }
.meteor { position: absolute; left: 1080px; top: 120px; width: 150px; height: 1px; background: linear-gradient(90deg, transparent, rgba(226, 230, 242, 0.7)); transform-origin: 100% 50%; opacity: 0; animation: meteor 13s var(--ease) 4s infinite; }
@keyframes meteor {
  0% { opacity: 0; transform: translate(0, 0) rotate(152deg) scaleX(0.4); }
  2% { opacity: 0.8; }
  7%, 100% { opacity: 0; transform: translate(-260px, 140px) rotate(152deg) scaleX(1); }
}
.hof { position: absolute; left: 140px; top: 40px; width: 1320px; height: 860px; background: radial-gradient(closest-side, rgba(170, 184, 228, 0.07), rgba(170, 184, 228, 0.025) 55%, transparent); animation: hof-atmen 7s ease-in-out infinite alternate; transition: opacity 0.8s ease; }
@keyframes hof-atmen { from { opacity: 0.65; } to { opacity: 1; } }
/* Im ersten Login und im Bereich gedimmt wie in der Vorschau. Beim Mitglied (nur das Panel der Downloads oben)
   bleibt die volle, atmende Glut: der Kosmos darunter lebt, statt leer zu stehen. */
body:is([data-ansicht='pflicht'], [data-ansicht='bereich']) .hof { opacity: 0.45; animation: none; }
body[data-ansicht='bereich'][data-rolle='mitglied'] .hof { opacity: 1; animation: hof-atmen 7s ease-in-out infinite alternate; }

/* Sternfelder und Positionen aus der Vorschau (erzeugt mit demselben Zufall; nicht von Hand aendern) */
.sterne.fern {
  box-shadow:
    839px 551px 0 0 rgba(226,230,242,0.30), 968px 885px 0 0 rgba(226,230,242,0.28), 131px 552px 0 0 rgba(226,230,242,0.30), 739px 499px 0 0 rgba(226,230,242,0.37),
    689px 697px 0 0 rgba(226,230,242,0.32), 264px 186px 0 0 rgba(226,230,242,0.20), 649px 392px 0 0 rgba(226,230,242,0.29), 209px 621px 0 0 rgba(226,230,242,0.29),
    686px 878px 0 0 rgba(226,230,242,0.36), 1261px 330px 0 0 rgba(226,230,242,0.31), 413px 58px 0 0 rgba(226,230,242,0.34), 1603px 309px 0 0 rgba(226,230,242,0.16),
    1219px 361px 0 0 rgba(226,230,242,0.29), 946px 879px 0 0 rgba(226,230,242,0.16), 1394px 853px 0 0 rgba(226,230,242,0.24), 42px 80px 0 0 rgba(226,230,242,0.37),
    816px 547px 0 0 rgba(226,230,242,0.20), 823px 764px 0 0 rgba(226,230,242,0.15), 1056px 47px 0 0 rgba(226,230,242,0.25), 1041px 1024px 0 0 rgba(226,230,242,0.25),
    765px 367px 0 0 rgba(226,230,242,0.13), 1203px 436px 0 0 rgba(226,230,242,0.35), 493px 577px 0 0 rgba(226,230,242,0.22), 1382px 167px 0 0 rgba(226,230,242,0.16),
    1034px 649px 0 0 rgba(226,230,242,0.16), 605px 393px 0 0 rgba(226,230,242,0.40), 1399px 655px 0 0 rgba(226,230,242,0.24), 1507px 611px 0 0 rgba(226,230,242,0.25),
    505px 535px 0 0 rgba(226,230,242,0.12), 1444px 314px 0 0 rgba(226,230,242,0.24), 203px 83px 0 0 rgba(226,230,242,0.34), 893px 535px 0 0 rgba(226,230,242,0.15),
    918px 647px 0 0 rgba(226,230,242,0.39), 1577px 622px 0 0 rgba(226,230,242,0.30), 940px 507px 0 0 rgba(226,230,242,0.15), 1069px 677px 0 0 rgba(226,230,242,0.42),
    1165px 140px 0 0 rgba(226,230,242,0.16), 1061px 1011px 0 0 rgba(226,230,242,0.22), 1518px 392px 0 0 rgba(226,230,242,0.35), 1072px 74px 0 0 rgba(226,230,242,0.21),
    1089px 512px 0 0 rgba(226,230,242,0.31), 369px 747px 0 0 rgba(226,230,242,0.21), 151px 576px 0 0 rgba(226,230,242,0.23), 297px 849px 0 0 rgba(226,230,242,0.40),
    1231px 5px 0 0 rgba(226,230,242,0.25), 1395px 592px 0 0 rgba(226,230,242,0.33), 1031px 1px 0 0 rgba(226,230,242,0.27), 806px 170px 0 0 rgba(226,230,242,0.36),
    104px 88px 0 0 rgba(226,230,242,0.42), 1005px 732px 0 0 rgba(226,230,242,0.37), 1507px 1022px 0 0 rgba(226,230,242,0.14), 276px 620px 0 0 rgba(226,230,242,0.24),
    684px 554px 0 0 rgba(226,230,242,0.14), 100px 481px 0 0 rgba(226,230,242,0.20), 684px 755px 0 0 rgba(226,230,242,0.24), 555px 612px 0 0 rgba(226,230,242,0.23),
    1600px 309px 0 0 rgba(226,230,242,0.25), 402px 711px 0 0 rgba(226,230,242,0.22), 922px 669px 0 0 rgba(226,230,242,0.12), 214px 171px 0 0 rgba(226,230,242,0.37),
    222px 850px 0 0 rgba(226,230,242,0.18), 1037px 859px 0 0 rgba(226,230,242,0.34), 1332px 104px 0 0 rgba(226,230,242,0.15), 1220px 224px 0 0 rgba(226,230,242,0.15),
    562px 101px 0 0 rgba(226,230,242,0.39), 1048px 749px 0 0 rgba(226,230,242,0.29), 1240px 735px 0 0 rgba(226,230,242,0.24), 1253px 236px 0 0 rgba(226,230,242,0.18),
    227px 650px 0 0 rgba(226,230,242,0.12), 924px 1005px 0 0 rgba(226,230,242,0.38), 852px 911px 0 0 rgba(226,230,242,0.14), 866px 799px 0 0 rgba(226,230,242,0.20),
    1612px 144px 0 0 rgba(226,230,242,0.38), 775px 964px 0 0 rgba(226,230,242,0.42), 638px 481px 0 0 rgba(226,230,242,0.25), 162px 195px 0 0 rgba(226,230,242,0.15),
    145px 974px 0 0 rgba(226,230,242,0.29), 937px 241px 0 0 rgba(226,230,242,0.40), 127px 869px 0 0 rgba(226,230,242,0.20), 103px 459px 0 0 rgba(226,230,242,0.23),
    230px 387px 0 0 rgba(226,230,242,0.16), 1471px 602px 0 0 rgba(226,230,242,0.26), 1629px 362px 0 0 rgba(226,230,242,0.29), 891px 269px 0 0 rgba(226,230,242,0.27),
    1550px 314px 0 0 rgba(226,230,242,0.26), 667px 133px 0 0 rgba(226,230,242,0.19), 1037px 22px 0 0 rgba(226,230,242,0.15), 1216px 166px 0 0 rgba(226,230,242,0.18),
    708px 814px 0 0 rgba(226,230,242,0.30), 993px 702px 0 0 rgba(226,230,242,0.23), 1243px 959px 0 0 rgba(226,230,242,0.22), 1165px 88px 0 0 rgba(226,230,242,0.16),
    858px 709px 0 0 rgba(226,230,242,0.15), 1509px 948px 0 0 rgba(226,230,242,0.16), 1471px 399px 0 0 rgba(226,230,242,0.33), 935px 815px 0 0 rgba(226,230,242,0.41),
    728px 234px 0 0 rgba(226,230,242,0.22), 1172px 732px 0 0 rgba(226,230,242,0.13), 1177px 127px 0 0 rgba(226,230,242,0.25), 1241px 447px 0 0 rgba(226,230,242,0.40),
    1215px 127px 0 0 rgba(226,230,242,0.15), 277px 17px 0 0 rgba(226,230,242,0.40), 413px 676px 0 0 rgba(226,230,242,0.21), 530px 745px 0 0 rgba(226,230,242,0.35),
    1001px 1013px 0 0 rgba(226,230,242,0.29), 1325px 570px 0 0 rgba(226,230,242,0.24), 471px 936px 0 0 rgba(226,230,242,0.15), 895px 459px 0 0 rgba(226,230,242,0.32),
    867px 198px 0 0 rgba(226,230,242,0.32), 459px 312px 0 0 rgba(226,230,242,0.15), 1454px 415px 0 0 rgba(226,230,242,0.15), 936px 466px 0 0 rgba(226,230,242,0.18),
    105px 62px 0 0 rgba(226,230,242,0.24), 1497px 435px 0 0 rgba(226,230,242,0.39), 564px 360px 0 0 rgba(226,230,242,0.30), 11px 384px 0 0 rgba(226,230,242,0.29),
    1301px 736px 0 0 rgba(226,230,242,0.31), 1567px 651px 0 0 rgba(226,230,242,0.17), 146px 135px 0 0 rgba(226,230,242,0.19), 1394px 162px 0 0 rgba(226,230,242,0.16),
    108px 870px 0 0 rgba(226,230,242,0.34), 35px 385px 0 0 rgba(226,230,242,0.12), 371px 835px 0 0 rgba(226,230,242,0.26), 8px 46px 0 0 rgba(226,230,242,0.13),
    620px 521px 0 0 rgba(226,230,242,0.12), 1423px 948px 0 0 rgba(226,230,242,0.19), 572px 117px 0 0 rgba(226,230,242,0.17), 53px 432px 0 0 rgba(226,230,242,0.35),
    1267px 411px 0 0 rgba(226,230,242,0.38), 771px 323px 0 0 rgba(226,230,242,0.31), 1071px 690px 0 0 rgba(226,230,242,0.24), 1153px 482px 0 0 rgba(226,230,242,0.24),
    691px 1004px 0 0 rgba(226,230,242,0.21), 1042px 68px 0 0 rgba(226,230,242,0.31), 208px 655px 0 0 rgba(226,230,242,0.19), 1323px 759px 0 0 rgba(226,230,242,0.18),
    1577px 429px 0 0 rgba(226,230,242,0.23), 346px 13px 0 0 rgba(226,230,242,0.38), 218px 535px 0 0 rgba(226,230,242,0.38), 1448px 157px 0 0 rgba(226,230,242,0.39),
    655px 578px 0 0 rgba(226,230,242,0.23), 574px 100px 0 0 rgba(226,230,242,0.13), 430px 64px 0 0 rgba(226,230,242,0.21), 1001px 484px 0 0 rgba(226,230,242,0.19),
    856px 650px 0 0 rgba(226,230,242,0.35), 1527px 200px 0 0 rgba(226,230,242,0.25), 193px 728px 0 0 rgba(226,230,242,0.21), 259px 666px 0 0 rgba(226,230,242,0.20),
    266px 685px 0 0 rgba(226,230,242,0.18), 391px 243px 0 0 rgba(226,230,242,0.12), 149px 60px 0 0 rgba(226,230,242,0.22), 849px 339px 0 0 rgba(226,230,242,0.41),
    1181px 743px 0 0 rgba(226,230,242,0.21), 1097px 437px 0 0 rgba(226,230,242,0.39), 639px 796px 0 0 rgba(226,230,242,0.17), 397px 969px 0 0 rgba(226,230,242,0.21),
    113px 899px 0 0 rgba(226,230,242,0.38), 420px 1px 0 0 rgba(226,230,242,0.16), 802px 41px 0 0 rgba(226,230,242,0.32), 1158px 699px 0 0 rgba(226,230,242,0.28),
    345px 969px 0 0 rgba(226,230,242,0.41), 1067px 121px 0 0 rgba(226,230,242,0.22), 509px 527px 0 0 rgba(226,230,242,0.36), 1558px 58px 0 0 rgba(226,230,242,0.20),
    644px 984px 0 0 rgba(226,230,242,0.30), 768px 153px 0 0 rgba(226,230,242,0.31), 930px 423px 0 0 rgba(226,230,242,0.39), 760px 988px 0 0 rgba(226,230,242,0.16),
    392px 627px 0 0 rgba(226,230,242,0.36), 525px 285px 0 0 rgba(226,230,242,0.14);
}
.sterne.mitte {
  box-shadow:
    152px 71px 0 0 rgba(226,230,242,0.50), 501px 337px 0 0 rgba(226,230,242,0.37), 840px 992px 0 0 rgba(226,230,242,0.56), 15px 737px 0 0 rgba(226,230,242,0.37),
    141px 1025px 0 0 rgba(226,230,242,0.57), 774px 771px 0 0 rgba(226,230,242,0.32), 742px 681px 0 0 rgba(226,230,242,0.62), 349px 880px 0 0 rgba(226,230,242,0.37),
    313px 814px 0 0 rgba(226,230,242,0.35), 1173px 386px 0 0 rgba(226,230,242,0.46), 1551px 796px 0 0 rgba(226,230,242,0.59), 1497px 672px 0 0 rgba(226,230,242,0.56),
    1162px 226px 0 0 rgba(226,230,242,0.40), 848px 931px 0 0 rgba(226,230,242,0.60), 1328px 671px 0 0 rgba(226,230,242,0.40), 1488px 212px 0 0 rgba(226,230,242,0.43),
    1316px 168px 0 0 rgba(226,230,242,0.52), 1470px 807px 0 0 rgba(226,230,242,0.30), 955px 551px 0 0 rgba(226,230,242,0.54), 594px 304px 0 0 rgba(226,230,242,0.32),
    18px 210px 0 0 rgba(226,230,242,0.51), 140px 598px 0 0 rgba(226,230,242,0.60), 1139px 191px 0 0 rgba(226,230,242,0.36), 1200px 573px 0 0 rgba(226,230,242,0.40),
    114px 864px 0 0 rgba(226,230,242,0.53), 1376px 735px 0 0 rgba(226,230,242,0.31), 273px 689px 0 0 rgba(226,230,242,0.50), 358px 432px 0 0 rgba(226,230,242,0.38),
    388px 578px 0 0 rgba(226,230,242,0.62), 37px 734px 0 0 rgba(226,230,242,0.46), 183px 1004px 0 0 rgba(226,230,242,0.49), 1115px 1017px 0 0 rgba(226,230,242,0.55),
    1384px 196px 0 0 rgba(226,230,242,0.32), 1286px 646px 0 0 rgba(226,230,242,0.49), 1151px 734px 0 0 rgba(226,230,242,0.49), 974px 232px 0 0 rgba(226,230,242,0.54),
    338px 1011px 0 0 rgba(226,230,242,0.53), 146px 151px 0 0 rgba(226,230,242,0.60), 259px 458px 0 0 rgba(226,230,242,0.32), 441px 12px 0 0 rgba(226,230,242,0.57),
    904px 265px 0 0 rgba(226,230,242,0.49), 1496px 153px 0 0 rgba(226,230,242,0.38), 876px 85px 0 0 rgba(226,230,242,0.46), 809px 626px 0 0 rgba(226,230,242,0.44),
    29px 118px 0 0 rgba(226,230,242,0.50), 676px 516px 0 0 rgba(226,230,242,0.46), 193px 852px 0 0 rgba(226,230,242,0.59), 403px 820px 0 0 rgba(226,230,242,0.47),
    594px 264px 0 0 rgba(226,230,242,0.45), 758px 557px 0 0 rgba(226,230,242,0.36), 201px 157px 0 0 rgba(226,230,242,0.56), 485px 752px 0 0 rgba(226,230,242,0.55),
    1259px 131px 0 0 rgba(226,230,242,0.50), 1374px 688px 0 0 rgba(226,230,242,0.62), 188px 750px 0 0 rgba(226,230,242,0.35), 1289px 839px 0 0 rgba(226,230,242,0.40),
    870px 640px 0 0 rgba(226,230,242,0.51), 1465px 299px 0 0 rgba(226,230,242,0.30), 165px 878px 0 0 rgba(226,230,242,0.52), 1565px 197px 0 0 rgba(226,230,242,0.35),
    1409px 278px 0 0 rgba(226,230,242,0.34), 320px 618px 0 0 rgba(226,230,242,0.31), 1482px 291px 0 0 rgba(226,230,242,0.60), 641px 74px 0 0 rgba(226,230,242,0.37);
}
.sterne.nah {
  box-shadow:
    847px 1037px 0 0 rgba(226,230,242,0.51), 847px 1037px 7px 1px rgba(196,204,226,0.14),
    1213px 206px 0 0 rgba(226,230,242,0.68), 1213px 206px 7px 1px rgba(196,204,226,0.14),
    290px 997px 0 0 rgba(226,230,242,0.69), 290px 997px 7px 1px rgba(196,204,226,0.14),
    814px 624px 0 0 rgba(226,230,242,0.74), 814px 624px 7px 1px rgba(196,204,226,0.14),
    365px 774px 0 0 rgba(226,230,242,0.78), 365px 774px 7px 1px rgba(196,204,226,0.14),
    1448px 1000px 0 0 rgba(226,230,242,0.57), 1448px 1000px 7px 1px rgba(196,204,226,0.14),
    985px 782px 0 0 rgba(226,230,242,0.53), 985px 782px 7px 1px rgba(196,204,226,0.14),
    778px 162px 0 0 rgba(226,230,242,0.70), 778px 162px 7px 1px rgba(196,204,226,0.14),
    501px 784px 0 0 rgba(226,230,242,0.59), 501px 784px 7px 1px rgba(196,204,226,0.14),
    1092px 493px 0 0 rgba(226,230,242,0.67), 1092px 493px 7px 1px rgba(196,204,226,0.14),
    1592px 374px 0 0 rgba(226,230,242,0.61), 1592px 374px 7px 1px rgba(196,204,226,0.14),
    859px 135px 0 0 rgba(226,230,242,0.77), 859px 135px 7px 1px rgba(196,204,226,0.14),
    1499px 133px 0 0 rgba(226,230,242,0.57), 1499px 133px 7px 1px rgba(196,204,226,0.14),
    937px 725px 0 0 rgba(226,230,242,0.59), 937px 725px 7px 1px rgba(196,204,226,0.14);
}
.funkeln i:nth-child(1) { left: 132px; top: 835px; --d: 4.3s; --v: -7.7s; }
.funkeln i:nth-child(2) { left: 161px; top: 552px; --d: 4.4s; --v: -6.2s; }
.funkeln i:nth-child(3) { left: 880px; top: 965px; --d: 7.2s; --v: -7.5s; }
.funkeln i:nth-child(4) { left: 1191px; top: 844px; --d: 8.9s; --v: -4.6s; }
.funkeln i:nth-child(5) { left: 267px; top: 843px; --d: 4.4s; --v: -4.2s; }
.funkeln i:nth-child(6) { left: 813px; top: 957px; --d: 8.0s; --v: -6.3s; }
.funkeln i:nth-child(7) { left: 384px; top: 695px; --d: 6.2s; --v: -1.1s; }
.funkeln i:nth-child(8) { left: 143px; top: 656px; --d: 4.9s; --v: -1.1s; }
.funkeln i:nth-child(9) { left: 1315px; top: 320px; --d: 8.0s; --v: -6.9s; }
.funkeln i:nth-child(10) { left: 201px; top: 964px; --d: 8.7s; --v: -3.8s; }
.funkeln i:nth-child(11) { left: 197px; top: 245px; --d: 5.3s; --v: -7.1s; }
.funkeln i:nth-child(12) { left: 136px; top: 828px; --d: 6.7s; --v: -7.0s; }
.funkeln i:nth-child(13) { left: 1270px; top: 125px; --d: 8.8s; --v: -7.3s; }
.funkeln i:nth-child(14) { left: 1376px; top: 872px; --d: 5.6s; --v: -5.2s; }
.funkeln i:nth-child(15) { left: 1302px; top: 602px; --d: 6.5s; --v: -0.3s; }
.funkeln i:nth-child(16) { left: 1028px; top: 59px; --d: 8.5s; --v: -3.6s; }
.knoten i:nth-child(1) { --w: 0deg; --v: 0ms; }
.knoten i:nth-child(2) { --w: 30deg; --v: 70ms; }
.knoten i:nth-child(3) { --w: 60deg; --v: 140ms; }
.knoten i:nth-child(4) { --w: 90deg; --v: 210ms; }
.knoten i:nth-child(5) { --w: 120deg; --v: 280ms; }
.knoten i:nth-child(6) { --w: 150deg; --v: 350ms; }
.knoten i:nth-child(7) { --w: 180deg; --v: 420ms; }
.knoten i:nth-child(8) { --w: 210deg; --v: 490ms; }
.knoten i:nth-child(9) { --w: 240deg; --v: 560ms; }
.knoten i:nth-child(10) { --w: 270deg; --v: 630ms; }
.knoten i:nth-child(11) { --w: 300deg; --v: 700ms; }
.knoten i:nth-child(12) { --w: 330deg; --v: 770ms; }

/* ===================== Tor ===================== */
.tor { position: fixed; left: 0; top: 0; z-index: 4; width: 100%; height: 100dvh; pointer-events: none; transition: opacity 0.6s ease; }
/* Wortmarke: auf dem Tor gross (720 px). Nach dem Halten bleibt das Tor in seinem letzten Bild stehen, bis
   /mitglieder/ dasselbe Bild zeigt; dort gleitet sie in den Kopf der Anmeldekarte (.wm.kopf.vom-tor, unten). */
.wm { position: absolute; left: 50%; top: 50%; width: 720px; height: 202px; margin: calc(-101px + var(--wm-y)) 0 0 -360px; transform-origin: 50% 50%; transform: scale(var(--wm-s)); transition: transform 0.9s var(--ease); }
.marke { display: block; }
.wm-bild { position: relative; display: block; width: 720px; height: 202px; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* Halteflaeche ueber dem Emblem (Mitte 90.8 / 100.9 px): kein Knopf, kein Cursor, kein Fokus */
.halte { position: absolute; left: 4px; top: 14px; width: 174px; height: 174px; border-radius: 50%; pointer-events: auto; cursor: default; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.tor.offen .halte { pointer-events: none; }
.glut { position: absolute; left: -129px; top: -119px; width: 440px; height: 440px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent) 0%, color-mix(in srgb, var(--accent) 12%, transparent) 30%, transparent 62%); opacity: 0; transform: scale(0.5); transition: opacity 0.5s ease, transform 0.6s var(--ease); }
.knoten { position: absolute; left: 91px; top: 101px; width: 0; height: 0; pointer-events: none; }
.knoten i { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: #dfe7fa; box-shadow: 0 0 8px 2px var(--accent-glow); opacity: 0; transform: rotate(var(--w)) translateY(-122px) scale(0.3); transition: opacity 0.3s ease, transform 0.4s var(--ease); }
.tor.haelt .glut { opacity: 1; transform: scale(1.12); transition: opacity 1s linear, transform 1.05s var(--ease); }
.tor.haelt .knoten i { opacity: 0.9; transform: rotate(var(--w)) translateY(-122px) scale(1); transition: opacity 0.2s ease var(--v), transform 0.35s var(--spring) var(--v); }
.wm.kopf .knoten i { opacity: 0; transform: rotate(var(--w)) translateY(-160px) scale(0.6); transition: opacity 0.5s ease, transform 0.7s var(--ease); }
.wm.kopf .glut { opacity: 0.8; transform: scale(0.95); transition: opacity 1.2s ease, transform 1.2s var(--ease); }

/* ===================== Anmeldung (Mitgliederbereich vor der Sitzung) ===================== */
.anmeldung { position: relative; z-index: 3; min-height: 100dvh; padding: var(--karte-oben) 16px 24px; }
.anmeldung::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(0, 0, 0, 0.35), transparent 75%); opacity: 0; transition: opacity 0.8s ease; pointer-events: none; }
.anmeldung.da::before { opacity: 1; }
.anm-platz { position: relative; width: min(480px, 100%); margin: 0 auto; }
/* Die Wortmarke im Kopf der Karte. Direkt nach dem Tor (.vom-tor, nur das erste Bild) steht sie noch gross an
   ihrer Stelle im Tor, mit voller Glut, Knoten im Kreis; dann gleitet sie wie in der Vorschau in 0,9 s in den Kopf
   (den Verzug von 0,08 s der Vorschau hat hier schon der Seitenwechsel), die Knoten fliegen aus, die Glut sinkt auf
   0,8, und die Karte kommt 0,24 s nach Beginn des Gleitens (mitglieder.js). */
.wm.kopf { top: 82px; margin: -101px 0 0 -360px; transform: scale(var(--kopf-s)); transition: transform 0.9s var(--ease), opacity 0.4s ease; }
.wm.kopf.vom-tor { transform: translateY(calc(-1 * var(--hub))) scale(var(--wm-s)); }
.wm.kopf.vom-tor .glut { opacity: 1; transform: scale(1.12); }
.wm.kopf.vom-tor .knoten i { opacity: 0.9; transform: rotate(var(--w)) translateY(-122px) scale(1); }
html.flug .sterne-ebene { transition: none; }
.wm.kopf.weg { opacity: 0; }
.karte-glas {
  position: relative;
  width: 100%;
  padding: 0 40px 30px;
  border-radius: 22px;
  background: var(--glas);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  box-shadow: inset 0 0 0 1px var(--glass-border), inset 0 1px 0 var(--glass-highlight), 0 30px 80px rgba(0, 0, 0, 0.55);
}
.karte-glas .k-platz { height: 164px; }
.karte-glas .k-linie { height: 1px; margin: 0 -40px 26px; background: linear-gradient(90deg, transparent, var(--hair-strong) 22%, var(--hair-strong) 78%, transparent); }
/* Einblenden: Karte gleitet 18 px herauf, Zeilen folgen */
.karte-glas.gleitet { animation: karte-ein 0.7s var(--ease) both; }
.karte-glas.gleitet > * { animation: zeile-ein 0.6s var(--ease) both; }
.karte-glas.gleitet > :nth-child(3) { animation-delay: 0.18s; }
.karte-glas.gleitet > :nth-child(4) { animation-delay: 0.24s; }
.karte-glas.gleitet > :nth-child(5) { animation-delay: 0.3s; }
.karte-glas.gleitet > :nth-child(6) { animation-delay: 0.36s; }
.karte-glas.gleitet > :nth-child(n + 7) { animation-delay: 0.42s; }
@keyframes karte-ein { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes zeile-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.karte-glas.geht,
.karte.geht { animation: karte-weg 0.42s var(--ease-out) both; }
@keyframes karte-weg { to { opacity: 0; transform: translateY(-14px) scale(0.985); } }
.karte-glas.abgelehnt { animation: ablehnen 0.6s var(--ease); }
@keyframes ablehnen { 0% { transform: none; } 18% { transform: translateX(-7px); } 38% { transform: translateX(5px); } 58% { transform: translateX(-3px); } 78% { transform: translateX(1px); } 100% { transform: none; } }

/* Felder: ruhiger Fokus-Ring als Ebene (nur opacity) */
.feld { display: block; margin-bottom: 16px; }
.feld-name { display: block; margin: 0 0 7px 2px; font-size: 12px; line-height: 16px; letter-spacing: 0.04em; color: rgb(var(--text-secondary)); }
.feld-huelle { position: relative; display: block; }
.feld-huelle::after { content: ''; position: absolute; inset: -1px; border-radius: 12px; box-shadow: 0 0 0 1px var(--accent-line), 0 0 0 4px color-mix(in srgb, var(--accent) 7%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 10%, transparent); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.feld-huelle:focus-within::after,
.feld-huelle.fokus::after { opacity: 1; }
.eingabe { display: block; width: 100%; height: 44px; padding: 0 14px; border-radius: 11px; font-size: 14.5px; color: rgb(var(--text-primary)); background: var(--eingabe); box-shadow: inset 0 0 0 1px var(--hair); outline: none; }
.eingabe[type='password'] { letter-spacing: 0.2em; }
.eingabe:focus,
.eingabe:focus-visible { outline: none; }
.abgelehnt-zustand .eingabe { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 26%, transparent); }
.fehlerzeile { display: flex; align-items: center; gap: 8px; height: 0; overflow: hidden; font-size: 12.5px; color: var(--danger); opacity: 0; transition: opacity 0.3s ease; }
.fehlerzeile .ico { width: 15px; height: 15px; }
.abgelehnt-zustand .fehlerzeile { height: 20px; margin: -4px 0 14px 2px; opacity: 1; }

/* Knoepfe */
.knopf-akzent {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  margin-top: 6px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgb(var(--text-primary));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 27%, transparent), color-mix(in srgb, var(--accent) 17%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 66%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px color-mix(in srgb, var(--accent) 10%, transparent);
}
.knopf-akzent::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 22px var(--accent-glow), inset 0 0 0 1px var(--accent); opacity: 0; transition: opacity 0.25s ease; }
.knopf-akzent:hover::after,
.knopf-akzent:focus-visible::after { opacity: 1; }
.knopf-akzent:focus-visible { outline: none; }
.knopf-akzent:disabled { cursor: default; opacity: 0.6; }
.knopf-akzent .ico { width: 16px; height: 16px; }
.k-zugang { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 12.5px; line-height: 1.4; color: rgb(var(--text-tertiary)); }
.k-zugang .ico { width: 14px; height: 14px; }

/* ===================== Schmal: gestufte Geometrie ===================== */
@media (max-width: 800px) {
  :root { --wm-s: 0.5; }
}
@media (max-width: 560px) {
  .karte-glas { padding: 0 24px 24px; }
  .karte-glas .k-linie { margin: 0 -24px 24px; }
}
@media (max-width: 419px) {
  :root { --wm-s: 0.42; --kopf-s: 0.375; }
}
@media (max-width: 359px) {
  :root { --wm-s: 0.4; --kopf-s: 0.33; }
}

/* ===================== Bewegung ===================== */
@media (prefers-reduced-motion: reduce) {
  .funkeln i, .meteor, .hof,
  body[data-ansicht][data-rolle] .hof { animation: none; }
  .sterne-ebene { transition: none; }
  .wm, .glut, .knoten i, .tor { transition-duration: 0.2s !important; transition-delay: 0s !important; }
  .karte-glas.gleitet, .karte-glas.gleitet > * { animation-duration: 0.2s; animation-delay: 0s; }
  .karte-glas.abgelehnt { animation: none; }
}
/* ?still=1: alles steht (Standbilder) */
html.still *,
html.still *::before,
html.still *::after { animation: none !important; transition: none !important; }