[hidden]{display:none!important}
/* ═══════════════════════════════════════════════════════════
yes!mary — Startseite
Lack und Kerzenlicht: warmes Schwarz, Messing, Glut.
Die Tokennamen bleiben, damit die Registrierung mitwaermt.
═══════════════════════════════════════════════════════════ */
:root{
/* ═══ Das Markendesign von yes!mary — dieselben Werte wie im Haus ═══ */
--ink:#0a0708; --ink2:#131010; --ink3:#1b1616; --ink4:#241d1c;
--gold:#c8a96e; --gdim:#b5a07b; --iv:#f0ece4; --mv:#b2a69f;
--line:rgba(200,169,110,.14); --line2:rgba(240,236,228,.08);
--ok:#7fb08a; --warn:#c96b5c; --info:#7f9ed0;
--feld:rgba(0,0,0,.3); --karte:rgba(19,16,16,.74);
--schatten:0 18px 44px rgba(0,0,0,.55);
--D:'Playfair Display',serif; --B:'Figtree',sans-serif;
--weich:cubic-bezier(.22,1,.36,1); --feder:cubic-bezier(.34,1.56,.64,1);
/* Radien wie im Haus */
--r-karte:14px; --r-feld:12px; --r-klein:9px; --r-pille:999px;
/* Fuer die grossen Fenster, die sich ueber die Seite legen. */
--r-gross:20px;
/* Brücken: die Startseite spricht dieselben Farben unter eigenen Namen */
--obsidian:var(--ink); --tiefe:var(--ink2); --panel:var(--ink3); --kante2:var(--ink4);
--eis:var(--iv); --stahl:var(--mv); --stahl2:var(--gdim);
--signet:var(--gold); --signet2:var(--gdim); --glut:var(--warn);
--linie:var(--line); --kante:var(--line2);
--t1:.78rem; --t2:.84rem; --t3:.9rem; --t4:.97rem; --t5:1.07rem; --t6:1.2rem;
}
/* KEIN scroll-snap. Versucht und wieder entfernt: zusammen mit dem
weichen Scrollen und dem Fluss rueckt der Browser die Seite
dauernd nach, und nichts kommt zur Ruhe — ein Eingabefeld war
nicht mehr anklickbar, weil es nie stillstand. Den Weg von
Abschnitt zu Abschnitt machen die Wegzeichen an den Raendern. */
html{font-size:18.5px;scroll-behavior:smooth;
-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* KEINE Haltepunkte mehr. Ein Haltepunkt zieht immer zum naechstgelegenen —
also zurueck zu dem Teil, von dem man gerade kommt. Wer ein Stueck nach
unten scrollt, will aber nach unten. Das Weiterruecken macht jetzt
«weiter()» in _schale.js, und zwar in Fahrtrichtung. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
body{background:var(--obsidian);color:var(--eis);font-family:var(--B);font-weight:400;
line-height:1.65;overflow-x:hidden;letter-spacing:.005em}
body.starr{overflow:hidden} /* nie .zu — das gehört den Haken-Kästchen */
::selection{background:rgba(230,207,162,.26);color:var(--eis)}
:focus-visible{outline:1px solid var(--signet);outline-offset:3px}
.feld-r{max-width:1140px;min-width:0;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
/* Die Welt faehrt beim Eintreten in die Tuer hinein. */
/* will-change gilt nur waehrend der Fahrt: sonst macht es #welt zum
Bezugsrahmen und alles mit position:fixed scrollt mit weg. */
#welt{transform-origin:50% 50%}
#welt.faehrt{pointer-events:none;will-change:transform,opacity}
#welt.faehrt .kopf{opacity:0;transition:opacity .35s var(--weich)}
#welt.faehrt .fortschritt{opacity:0}
/* ───── Atmosphaere: Kerzenschein statt Nordlicht ───── */
/* ═══ DER FARBIGE GRUND ═══
Dieselben vier Farbfelder wie die Ansicht «bunt» im Haus. Er liegt
immer da, aber unsichtbar; wie sichtbar, entscheidet der Abstand
von «Was Sie hier können» zum Bildschirm — darum kein Umschalten,
sondern ein Übergang, der mit dem Finger mitgeht. */
.buntgrund{position:fixed;inset:-12%;z-index:-1;pointer-events:none;opacity:0;
background:#13100f;
background-image:
radial-gradient(62% 50% at 82% 94%,rgba(248,206,78,.50),transparent 70%),
radial-gradient(56% 44% at 14% 98%,rgba(236,96,148,.44),transparent 72%),
radial-gradient(60% 50% at 8% 6%,rgba(214,60,130,.42),transparent 70%),
radial-gradient(38% 30% at 95% 10%,rgba(246,190,96,.34),transparent 66%),
linear-gradient(to top,rgba(190,40,110,.12),transparent 44%);
animation:buntZug 42s ease-in-out infinite alternate}
@keyframes buntZug{
from{transform:translate3d(-2.2%,-1.6%,0) scale(1.04)}
to{transform:translate3d(2.2%,1.6%,0) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.buntgrund{animation:none}}
.glutschein{position:fixed;inset:-10%;z-index:0;pointer-events:none;
opacity:.56;background:
radial-gradient(58% 52% at 50% 16%,rgba(200,169,110,.22) 0%,
rgba(200,169,110,.105) 38%,transparent 72%),
radial-gradient(62% 56% at 80% 64%,rgba(201,107,92,.18) 0%,
rgba(201,107,92,.082) 40%,transparent 74%),
radial-gradient(56% 60% at 14% 78%,rgba(170,159,178,.16) 0%,
rgba(170,159,178,.072) 42%,transparent 76%);
/* ═══ WEDER Weichzeichner NOCH Dauerschleife auf dieser Schicht ═══
Sie liegt fest ueber dem ganzen Bild. Mit filter:blur(110px) muss
der Browser den Weichzeichner ueber rund drei Millionen Bildpunkte
in JEDEM Scrollbild neu rechnen — die Schicht steht ja still,
waehrend alles darunter wegzieht.
Gemessen beim Scrollen: mit Weichzeichner 166 ms je Bild, ohne ihn
18 ms. DAS war das Haengen, die ganze Zeit, hinter allem anderen.
Die Weichheit kommt jetzt aus den Verlaeufen selbst: drei Halte je
Verlauf statt einem, das laeuft genauso sanft aus. */
transform:translate3d(0,0,0)}
/* Das Korn liegt über allem — auch über der Registrierung, damit beide
Seiten dieselbe Oberflaeche haben. */
/* KEIN mix-blend-mode. Eine feste, bildschirmgrosse Flaeche, die
mischt, muss bei jeder Bewegung darunter den ganzen Schirm neu
verrechnen: gemessen 43 ms je Bild gegen 31 ms. Dieselbe Regel wie
bei filter und backdrop-filter. Das Korn liegt jetzt einfach auf,
dafuer schwaecher — der Unterschied ist mit blossem Auge keiner. */
.korn{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.2;
background-repeat:repeat;background-size:168px 168px;
background-image:url("data:image/svg+xml;utf8,\
")}
.fortschritt{position:fixed;top:0;right:0;bottom:0;width:1px;z-index:40;
background:rgba(203,185,163,.08);pointer-events:none}
/* Die Fortschrittslinie wird gestaucht statt in der Hoehe veraendert:
Hoehe ist Layout und kostet in jedem Bild, eine Stauchung nicht. */
.fortschritt i{position:absolute;top:0;left:0;right:0;height:100%;display:block;
transform-origin:0 0;transform:scaleY(0);
background:linear-gradient(180deg,var(--signet),var(--glut))}
/* ───── Kopf ───── */
.kopf{position:fixed;top:0;left:0;right:0;z-index:50;transition:.55s var(--weich)}
/* Der Kopf endet nicht mit einer Kante, sondern laeuft aus — die Maske
nimmt auch den Weichzeichner mit, sonst bleibt dessen harter Rand als
helle Linie unter dem Logo stehen.
ACHTUNG: Die Maske liegt auf einer EIGENEN Schicht hinter dem Inhalt,
nicht auf dem Kopf selbst. Eine Maske auf einem Element beschneidet
auch dessen Kinder — das Hausmenue haengt unter dem Kopf und wurde
dadurch unsichtbar, sobald die Seite gescrollt war. */
/* KEIN backdrop-filter mehr. Ein Weichzeichner auf einer festen Leiste
ueber die ganze Breite muss den Hintergrund in JEDEM Scrollbild neu
rechnen — das ist auf der ganzen Seite zu spueren, hoch wie runter.
Auf einem fast schwarzen Grund leistet der Verlauf allein dasselbe. */
.kopf::before{content:'';position:absolute;inset:0;z-index:-1;
pointer-events:none;opacity:0;transition:opacity .55s var(--weich);
background:linear-gradient(180deg,rgba(10,7,5,.97),rgba(10,7,5,.86) 62%,
rgba(10,7,5,0));
-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%);
mask-image:linear-gradient(180deg,#000 74%,transparent 100%)}
.kopf.fest::before{opacity:1}
.kopf-i{max-width:1140px;margin:0 auto;padding:22px clamp(20px,5vw,64px);
display:flex;align-items:center;justify-content:space-between;gap:18px}
.marke{font-family:var(--D);font-size:1.5rem;letter-spacing:.012em;color:var(--eis)}
/* Das Logo ist zugleich der Eingang zu allem Übrigen. */
.markeblock{position:relative}
.markek{background:none;border:none;padding:0;cursor:pointer;
transition:color .35s var(--weich)}
.markek:hover,.markek[aria-expanded="true"]{color:var(--signet)}
.mm{position:absolute;left:0;top:calc(100% + 14px);z-index:60;min-width:234px;
padding:9px;border:1px solid rgba(200,169,110,.26);border-radius:var(--r-feld);
background:rgba(12,9,14,.96);box-shadow:0 26px 62px -22px rgba(0,0,0,.95);
display:grid;gap:2px;
opacity:0;transform:translateY(-8px);pointer-events:none;
transition:opacity .34s var(--weich),transform .38s var(--weich)}
.mm.auf{opacity:1;transform:none;pointer-events:auto}
.mm[hidden]{display:none}
.mm button{display:block;width:100%;text-align:left;padding:12px 14px;
border:none;border-radius:var(--r-klein);background:none;cursor:pointer;
font-family:var(--B);font-size:var(--t3);font-weight:400;color:var(--stahl);
transition:.26s var(--weich)}
.mm button:hover{background:rgba(200,169,110,.09);color:var(--eis)}
.mm button:last-child{margin-top:5px;padding-top:15px;
border-top:1px solid rgba(200,169,110,.16);border-radius:0 0 var(--r-klein) var(--r-klein)}
.marke i{font-style:normal;color:var(--signet)}
.kopf-r{display:flex;align-items:center;gap:clamp(8px,2.4vw,20px)}
/* Der Weg für die, die schon einen Code haben: ein Wort, kein Kasten —
damit er den Anmeldeknopf nicht doppelt. */
.kopfcode{display:inline-flex;align-items:center;gap:8px;padding:12px 6px;
font-size:var(--t2);letter-spacing:.22em;text-transform:uppercase;
color:var(--stahl);background:none;border:none;cursor:pointer;
font-family:var(--B);transition:.3s var(--weich)}
.kopfcode svg{width:15px;height:15px;flex-shrink:0;color:var(--signet);
opacity:.75;transition:.3s var(--weich)}
.kopfcode:hover{color:var(--eis)}
.kopfcode:hover svg{opacity:1}
/* Das Codefeld blinkt kurz auf, wenn man von oben dorthin geschickt wird */
.codeleiste.zeigt .cl-r{border-color:rgba(200,169,110,0.82);
box-shadow:0 0 60px -10px rgba(200,169,110,.55)}
/* ── Die Woerter fliegen ein ──
Jedes Wort traegt seine Verzoegerung als --d; hier steht nur, wie
es kommt. Eine Perspektive am Elternteil, damit das Kippen Tiefe
hat statt Stauchung. */
/* Buchstabe fuer Buchstabe von links nach rechts. Das Wort haelt
nur zusammen, bewegt wird der einzelne Buchstabe. */
.ab-t.fliegt .wort{display:inline-block;white-space:nowrap}
.ab-t.fliegt .bu{display:inline-block;opacity:0;
transform:translate3d(-.22em,0,0);
transition:opacity .42s var(--weich) var(--d,0s),
transform .52s var(--weich) var(--d,0s)}
.ab-t.fliegt.an .bu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.ab-t.fliegt .bu{opacity:1;transform:none;transition:none}}
/* ── Die Codeleiste meldet sich, wenn man bei ihr ankommt ──
Aus beiden Richtungen: der Rahmen geht an, und einmal laeuft ein
Licht von links nach rechts darueber. Kein Dauerlauf — die Klasse
kommt und geht mit dem Abschnitt. */
.codeleiste.anwesend .cl-k{color:var(--signet)}
.codeleiste.anwesend .cl-r{border-color:rgba(200,169,110,0.82);
box-shadow:0 0 70px -14px rgba(200,169,110,.5)}
.cl-r::after{content:'';position:absolute;inset:0;border-radius:inherit;
pointer-events:none;opacity:0;
background:linear-gradient(104deg,transparent 34%,
rgba(240,220,176,.22) 50%,transparent 66%)}
.codeleiste.anwesend .cl-r::after{animation:clLicht 1.5s var(--weich) .1s 1}
@keyframes clLicht{0%{opacity:0;transform:translate3d(-120%,0,0)}
18%,74%{opacity:1}
100%{opacity:0;transform:translate3d(120%,0,0)}}
@media(prefers-reduced-motion:reduce){
.codeleiste.anwesend .cl-r::after{animation:none}}
/* Eng wird es früher, als 420px glauben machen: der Anmeldeknopf stand
bei 430 und bei 360 über den Rand hinaus. Erst fällt das Wort CODE,
dann wird die Pille schmaler. */
@media(max-width:480px){.kopfcode span{display:none}.kopfcode{padding:12px 4px}}
.anmeldk{font-size:var(--t2);letter-spacing:.22em;text-transform:uppercase;
padding:13px 26px;border:1px solid var(--line);border-radius:var(--r-pille);
color:var(--mv);position:relative;overflow:hidden;transition:.3s var(--weich)}
.anmeldk::before{content:'';position:absolute;inset:0;background:var(--signet);
transform:translateY(101%);transition:transform .5s var(--weich);z-index:-1}
.anmeldk:hover{color:var(--ink);border-color:var(--gold)}
.anmeldk:hover::before{transform:none}
.anmeldk span{position:relative;z-index:1}
/* Steht nach der Grundregel, sonst gewinnt die Grundregel. */
@media(max-width:430px){.anmeldk{padding:12px 14px;letter-spacing:.13em}
.marke{font-size:clamp(19px,5.6vw,26px)}}
/* ═══════════════════════════════════════════════════════════
DIE SCHWELLE — Licht im Dunkeln, kein Spielzeug
═══════════════════════════════════════════════════════════ */
/* Die Tür ist fast durchsichtig — was darunter liegt, scheint durch sie
hindurch und sieht aus, als stünde es AUF ihr. Darum ist das Codefeld
verborgen, solange die Tür unten steht, und darf dafür dicht
heranrücken. Es erscheint erst, wenn die Tür oben als Balken steht. */
/* Die Schwelle braucht einen Haltepunkt am Anfang — sonst gibt es
zwischen 0 und der Codestation keinen, und das Rad zieht jeden Weg
nach oben wieder zur Station zurueck. Der alte Fehler (ein kleiner
Scroll wird an den Anfang zurueckgezogen, die Tür faehrt nicht los)
kommt dadurch nicht zurueck: das Tor faengt die Geste selbst ab und
schaltet die Haltepunkte fuer die Dauer seiner Fahrt aus. */
.schwelle{position:relative;z-index:44;min-height:100dvh;
margin-bottom:-46dvh;display:grid;
grid-template-columns:minmax(0,1fr);align-content:center;justify-items:stretch;
padding:124px 0 110px;text-align:center;overflow:clip}
.schwelle>.feld-r{width:100%;min-width:0}
/* Die Schwelle liegt über der Türhülle, damit ihre Schrift lesbar bleibt.
Sie darf deshalb KEINE Klicks abfangen — sonst kommt man nicht mehr
durch die Tür. Nur Codefeld und Pfeil nehmen ihre Klicks selbst an. */
.schwelle{pointer-events:none}
/* Der Schein unter der Tuer ist nur ein Zeichen: er reichte bis in
den Codeabschnitt hinein und fing dort die Klicks ab. */
.schwelle .runter{pointer-events:none}
/* Nichts liegt hinter dem Wort — es steht unmittelbar vor der Tür. */
.sw-ueber{position:relative;z-index:3;pointer-events:none}
.sw-ueber .codeleiste{pointer-events:auto}
@keyframes ein{to{opacity:1}}
/* ═══════════════════════════════════════════════════════════
Die Schwelle liegt IN der Seite — kein Rahmen, kein Kasten.
Das Licht verläuft an den Rändern ins Nichts.
═══════════════════════════════════════════════════════════ */
/* Die Hülle fährt in EINER Bewegung nach oben, ausgeloest von einer
Schwelle beim Scrollen — nicht Bild fuer Bild mitgezogen.
Zwei Gruende: Eine Verschiebung, deren Wert aus einer CSS-Variablen und
calc() kommt, kann der Browser nicht auf die Grafikkarte auslegen; er
rechnet sie in jedem Bild im Hauptstrang neu. Und das Setzen einer
Variablen macht den Stil des ganzen Teilbaums ungueltig — samt der
bildschirmgrossen Leinwand darin. Ein Klassenwechsel mit Übergang
dagegen laeuft als eine einzige Bewegung auf der Grafikkarte. */
.tuerhuelle{position:fixed;left:0;right:0;top:0;height:100dvh;z-index:40;
overflow:hidden;pointer-events:none;contain:paint;
transform:translate3d(0,0,0);
transition:transform .78s cubic-bezier(.3,.86,.36,1)}
.tuerhuelle.oben{
transform:translate3d(0,calc(var(--kopfH,72px) + var(--balkenH,54px) - 100dvh),0)}
@media(prefers-reduced-motion:reduce){.tuerhuelle{transition:none}}
/* Die Tür deckt, was hinter ihr liegt — immer, nicht erst als Balken.
Vorher war sie bis auf die Lichtfuge durchsichtig; dadurch schien die
ganze Seite durch sie hindurch und sah aus, als stünde sie darauf. */
.tuerhuelle::before{content:'';position:absolute;inset:0;z-index:0;
pointer-events:none;background:var(--obsidian)}
/* und eine Kante nach unten, wie sie der Kopf hat */
.tuerhuelle::after{content:'';position:absolute;left:0;right:0;bottom:0;height:16px;
z-index:4;pointer-events:none;opacity:0;transition:opacity .4s var(--weich);
background:linear-gradient(180deg,rgba(10,7,5,0),rgba(10,7,5,.85))}
.tuerhuelle.schmal::after{opacity:1}
/* Die Tür behält ihre volle Höhe und haengt am UNTEREN Rand der Hülle:
schrumpft die Hülle, bleibt ihr unteres Stück stehen. */
.schwellraum{position:absolute;left:0;right:0;top:0;height:100dvh;
margin:0;z-index:1;cursor:pointer;opacity:0;pointer-events:auto;
animation:ein 1.6s var(--weich) .4s forwards;
transition:transform .9s var(--weich)}
/* Als Balken soll die Lichtpfütze nicht mehr mitleuchten */
.tuerhuelle.schmal .schwellraum::after{opacity:0}
#welt.faehrt .tuerhuelle{transform:none !important}
.schwellraum:focus-visible{outline:none}
.schwellraum:focus-visible~.sw-ueber .eintritt i{color:var(--gold);
border-color:rgba(200,169,110,0.82)}
/* Beim Zusammenschieben rutscht die Zeichnung ein Stueck nach unten,
damit im Balken wirklich das Licht der Fuge steht und nicht der
dunkle Streifen unterhalb der Schwelle. */
#schwelleC{position:absolute;inset:0;width:100%;height:100%;display:block}
/* die Lichtpfütze am Boden, ebenfalls ohne Kante */
.schwellraum::after{content:'';position:absolute;left:50%;bottom:4%;
width:62%;height:84px;transform:translateX(-50%);pointer-events:none;
background:radial-gradient(50% 100% at 50% 0,rgba(246,232,198,.22),
rgba(200,169,110,.08) 46%,rgba(8,6,10,0) 76%);
filter:blur(10px);opacity:.5;
transition:opacity .9s var(--weich),transform .9s var(--weich)}
.schwellraum.sitzt::after{opacity:.9}
.schwellraum.oeffnet::after{opacity:1;transform:translateX(-50%) scaleY(2.1)}
.schwellraum.oeffnet{transform:scale(1.035)}
.schwellraum::after{bottom:8%;width:44%;height:110px}
/* Hereintreten — nur Buchstaben. Sie schweben in der Mitte der Tür. */
.eintritt.imbalken{position:absolute;left:0;right:0;bottom:0;z-index:3;
display:grid;place-items:center;height:var(--balkenH,54px);margin:0;
opacity:0;pointer-events:none;transition:opacity .38s var(--weich)}
.eintritt.imbalken.an{opacity:1;pointer-events:auto;cursor:pointer}
/* Maus darueber: das Wort tritt hervor und bekommt einen Strich —
damit man sieht, dass hier die Tuer ist und nicht nur eine Aufschrift. */
.eintritt.imbalken.an:hover i{color:var(--iv);letter-spacing:.5em;
text-indent:.5em;
text-shadow:0 0 26px rgba(200,169,110,.85), 0 2px 16px rgba(8,6,10,.95)}
.eintritt.imbalken::before{content:'';position:absolute;left:50%;
bottom:7px;width:clamp(96px,20vw,168px);height:1px;
transform:translateX(-50%) scaleX(0);transform-origin:50% 50%;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
opacity:0;pointer-events:none;
transition:transform .5s var(--weich),opacity .5s var(--weich)}
.eintritt.imbalken.an:hover::before{transform:translateX(-50%) scaleX(1);
opacity:1}
/* damit die Fuge nicht mitten durch das Wort schneidet */
.eintritt.imbalken i{font-size:clamp(.72rem,1.1vw,.86rem);
letter-spacing:.42em;text-indent:.42em;padding:0 clamp(18px,7vw,52px);
background:radial-gradient(62% 150% at 50% 50%,rgba(10,7,5,.94),
rgba(10,7,5,.7) 56%,rgba(10,7,5,0) 100%)}
/* ───── Die persönliche Begrüssung ─────
Nur für den, der über eine Einladung kommt. Sie steht über dem Wort
an der Tür: zuerst der Name, dann, was ihm geschrieben wurde, dann
der Hinweis, dass sein Code schon im Feld steht. Sie wird einmal
aufgedeckt und danach nicht mehr angefasst. */
.gruss{display:grid;justify-items:center;text-align:center;
margin:0 auto clamp(18px,4vh,40px);padding:0 clamp(22px,6vw,40px);
pointer-events:none;opacity:0;transform:translateY(14px);
transition:opacity 1.3s var(--weich),transform 1.3s var(--weich)}
.gruss.da{opacity:1;transform:none}
.gr-1{font-family:var(--D);font-weight:400;color:var(--iv);
font-size:clamp(1.9rem,5.6vw,3.3rem);line-height:1.12;margin:0;
text-shadow:0 2px 30px rgba(8,6,10,.85)}
.gr-2{margin:clamp(10px,1.6vh,16px) 0 0;max-width:44ch;
font-size:clamp(.86rem,1.5vw,.98rem);line-height:1.7;
color:rgba(240,236,228,0.82);text-shadow:0 1px 18px rgba(8,6,10,.9)}
.gr-3{margin:clamp(12px,1.8vh,18px) 0 0;font-size:clamp(.66rem,1vw,.74rem);
letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
text-shadow:0 1px 16px rgba(8,6,10,.9)}
.gr-3 b{font-weight:400;letter-spacing:.24em;font-variant-numeric:tabular-nums}
.gruss:empty,.gr-2:empty,.gr-3:empty{display:none}
/* Wer eingeladen ist, braucht die allgemeine Losung nicht mehr: er
wird mit Namen angesprochen. Zwei Ansagen auf einer Tuer waeren
eine zu viel — und sie wuerden sich ins Wort fallen. */
body.eingeladen .losung{display:none}
/* Faehrt die Tuer auf, geht die Begruessung mit dem Wort zusammen weg. */
.schwellraum.sitzt~.sw-ueber .gruss,
.schwellraum.oeffnet~.sw-ueber .gruss{opacity:0}
.schwelle.fort .sw-ueber .gruss{opacity:0;transform:translateY(-40px)}
@media(prefers-reduced-motion:reduce){
.gruss{transition:opacity .4s linear;transform:none}
.gruss.da{transform:none}}
.eintritt{display:block;margin:0 auto clamp(26px,6vh,70px);
pointer-events:none;
transition:opacity .6s var(--weich),transform .7s var(--weich)}
.eintritt i{display:inline-block;font-style:normal;
font-size:clamp(1rem,1.8vw,1.32rem);font-weight:400;
letter-spacing:.46em;text-indent:.46em;text-transform:uppercase;
color:rgba(176,166,182,.92);white-space:nowrap;
text-shadow:0 1px 16px rgba(8,6,10,.8), 0 0 40px rgba(8,6,10,.6);
animation:schwebt 4.6s ease-in-out infinite;
transition:color .55s var(--weich), text-shadow .55s var(--weich),
letter-spacing .7s var(--weich)}
@keyframes schwebt{0%,100%{transform:translateY(-8px)}
50%{transform:translateY(8px)}}
/* Maus über der Tür: die Buchstaben leuchten auf */
.schwelle:hover .eintritt i,
.schwellraum:focus-visible~.sw-ueber .eintritt i{color:var(--iv);letter-spacing:.52em;
text-indent:.52em;
text-shadow:0 0 30px rgba(200,169,110,.8), 0 2px 20px rgba(8,6,10,.9)}
.schwellraum.sitzt~.sw-ueber .eintritt{opacity:0}
.schwellraum.oeffnet~.sw-ueber .eintritt{opacity:0}
/* ───── Die Codeleiste: das Erste, woran man denken soll ───── */
/* ═══ Die Losung im unteren Teil der Tür ═══
Sie steht auf dem ersten Bild, unterhalb von «Hereintreten», und baut
sich nach dem Licht der Tür Zeile für Zeile auf. */
.losung{position:absolute;left:0;right:0;bottom:clamp(128px,19vh,210px);
z-index:3;display:grid;justify-items:center;text-align:center;
padding:0 clamp(22px,6vw,40px);pointer-events:none}
.lo-1{font-family:var(--D);font-weight:400;
font-size:clamp(1.3rem,4.2vw,2.5rem);line-height:1.2;
letter-spacing:-.008em;color:var(--eis);max-width:19ch;
text-shadow:0 2px 24px rgba(8,6,10,.85);
opacity:0;transform:translateY(22px);
animation:loRein 1.15s var(--weich) 1.15s forwards}
@keyframes loRein{to{opacity:1;transform:none}}
.lo-l{display:block;width:0;height:1px;margin:clamp(14px,2.2vh,22px) 0;
background:linear-gradient(90deg,rgba(200,169,110,0),var(--signet) 50%,
rgba(200,169,110,0));
animation:loLinie 1.25s var(--weich) 1.55s forwards}
@keyframes loLinie{to{width:min(132px,42vw)}}
.lo-2{font-size:clamp(.82rem,1.5vw,1rem);font-weight:400;
letter-spacing:.07em;color:var(--stahl);
text-shadow:0 1px 18px rgba(8,6,10,.8);
opacity:0;transform:translateY(12px);
animation:loRein 1.05s var(--weich) 1.95s forwards}
@media(prefers-reduced-motion:reduce){
.lo-1,.lo-2{opacity:1;transform:none;animation:none}
.lo-l{width:min(132px,42vw);animation:none}
}
/* Das Codefeld liegt UNTER der Tür. Beim Ankommen sieht man es nicht —
erst wer hinunterscrollt, findet es. */
/* Das Codefeld darf nicht zu uebersehen sein. Es bleibt deshalb unter
dem Balken stehen, solange sein Bereich laeuft — wer schnell wischt,
nimmt es trotzdem mit. Der Bereich ist dabei nicht leer: das Feld
selbst fuellt ihn. */
/* Mehr Hoehe und mittig: wer zuegig scrollt, war bisher an der
Codeleiste vorbei, bevor er sie gesehen hat. */
/* Oben muss der Platz fuer Kopfleiste UND Tuerbalken frei bleiben:
beide liegen fest, und beim Hochscrollen schob sich das Codefeld
sonst darunter. */
.codeab{position:relative;z-index:2;min-height:92dvh;display:grid;
align-content:center;
padding:calc(var(--kopfH,72px) + var(--balkenH,54px) + clamp(16px,3vh,38px))
0 clamp(20px,4vh,48px);
scroll-margin-top:calc(var(--kopfH,72px) + var(--balkenH,54px) + 18px)}
/* Der erste Abschnitt nach dem Codefeld rueckt näher heran — die lange
Luft zwischen den Abschnitten ist fuer den Rest der Seite gedacht. */
/* Die Brücke endet mittig, «Drei Etagen» beginnt linksbündig — zwischen
beiden braucht es Luft, sonst stossen die zwei Ausrichtungen aneinander. */
.codeab + .ab{padding-top:clamp(66px,10vh,124px)}
/* ───── Die Brücke: vom Code zum Haus ─────
Zwischen Codefeld und «Drei Etagen» stand bisher nur Schwarz. Der Raum
beantwortet jetzt die Frage, die hier aufkommt, und übergibt an das Haus.
Die Linie wächst von oben nach unten — dieselbe Geste wie die Lichtfuge
der Tür, nur still. */
.bruecke{margin:clamp(34px,6vh,70px) auto 0;display:grid;justify-items:center;
text-align:center;gap:clamp(13px,1.9vh,20px);padding:0 22px}
.br-f{margin:0;font-size:clamp(.86rem,1.2vw,.97rem);font-weight:400;
letter-spacing:.055em;text-transform:uppercase;color:var(--stahl);
opacity:0;transform:translateY(12px);
transition:opacity .7s var(--weich),transform .7s var(--weich)}
.br-l{display:block;width:1px;height:clamp(46px,8vh,88px);overflow:hidden}
.br-l i{display:block;width:100%;height:100%;transform-origin:0 0;
transform:scaleY(0);
background:linear-gradient(180deg,rgba(200,169,110,.62),rgba(200,169,110,0));
transition:transform .9s cubic-bezier(.3,.86,.36,1) .12s}
.br-u{margin:0;font-family:var(--D);font-weight:400;
font-size:clamp(1.12rem,2.3vw,1.6rem);letter-spacing:.004em;
line-height:1.3;color:var(--eis);max-width:22ch;
opacity:0;transform:translateY(16px);
transition:opacity .8s var(--weich) .22s,transform .8s var(--weich) .22s}
.bruecke.da .br-f,.bruecke.da .br-u{opacity:1;transform:none}
/* «Hier der Überblick.» kommt Wort für Wort, nachdem die Zeile steht. */
.bruecke.da .br-u.fliegt .bu{opacity:1;transform:none}
.br-u.fliegt .bu{transition-delay:calc(var(--d,0s) + .34s)}
.bruecke.da .br-l i{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){
.br-f,.br-u{opacity:1;transform:none;transition:none}
.br-u.fliegt .bu{opacity:1;transform:none;transition:none}
.br-l i{transform:scaleY(1);transition:none}}
/* Kein Zug mehr. Er hat in jedem Bild eine Variable am Wurzelelement
geschrieben — und das macht den Stil der GANZEN Seite ungültig, jedes
Element muss neu geprüft werden. Das war die eigentliche Ursache des
Stockens. Die Lücke, die er schliessen sollte, schliesst jetzt die
Schwelle selbst: ihre Marke unten ist negativ, das rechnet das Layout
einmal aus und nie wieder. */
/* Ueber den Wegzeichen: die beiden Scheine liegen mittig im
Abschnitt, und das Feld darf nicht darunter geraten. */
.codeleiste{margin:0 auto;width:min(520px,100%);position:relative;z-index:8}
.cl-k{display:block;font-size:clamp(.92rem,1.35vw,1.05rem);font-weight:400;
letter-spacing:.01em;color:var(--stahl);margin-bottom:14px;transition:.4s}
.codeleiste.passt .cl-k{color:var(--signet)}
.cl-r{display:flex;align-items:center;border:1px solid var(--line);
border-radius:var(--r-pille);background:var(--feld);
transition:.5s var(--weich);position:relative;padding-right:18px}
.codeleiste.passt .cl-r{border-color:rgba(200,169,110,0.82);
box-shadow:0 0 54px -12px rgba(200,169,110,.45)}
/* drei Punkte laufen, während sich die Tür öffnet */
.cl-s{display:flex;gap:5px;flex:0 0 auto;opacity:0;transition:opacity .4s var(--weich)}
.cl-s i{width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.3}
.codeleiste.passt .cl-s{opacity:1}
.codeleiste.passt .cl-s i{animation:punkt 1.15s var(--weich) infinite}
.codeleiste.passt .cl-s i:nth-child(2){animation-delay:.15s}
.codeleiste.passt .cl-s i:nth-child(3){animation-delay:.3s}
@keyframes punkt{0%,100%{opacity:.25;transform:scale(.8)}
45%{opacity:1;transform:scale(1.25)}}
.cl-i{flex:1;min-width:0;padding:20px 10px 20px 28px;background:none;border:none;
font-size:1.12rem;font-weight:400;letter-spacing:.3em;text-align:center;
text-transform:uppercase;color:var(--iv)}
.cl-i::placeholder{color:var(--stahl2);letter-spacing:.24em;font-weight:400}
.cl-i:focus{outline:none}
.cl-x{margin-top:13px;font-size:var(--t3);color:var(--stahl2);min-height:1.5em;
transition:.4s}
/* Ein Fragezeichen am Codefeld statt eines Satzes darunter */
.cl-k{display:flex;align-items:center;justify-content:center;gap:10px}
.cl-info{width:19px;height:19px;flex:0 0 auto;border-radius:50%;
border:1px solid rgba(200,169,110,.4);background:none;color:var(--signet);
font-family:var(--B);font-size:11.5px;line-height:1;cursor:pointer;
display:grid;place-items:center;transition:.3s var(--weich)}
.cl-info:hover,.cl-info[aria-expanded="true"]{background:rgba(200,169,110,.14);
border-color:var(--signet);color:var(--eis)}
.cl-blase{margin:14px auto 0;width:min(40ch,100%);padding:13px 17px;
border:1px solid rgba(200,169,110,.26);border-radius:var(--r-feld);
background:rgba(10,8,13,.93);backdrop-filter:blur(14px);
box-shadow:0 20px 46px -20px rgba(0,0,0,.9);
font-size:var(--t3);line-height:1.7;color:var(--stahl);text-align:left}
.cl-blase[hidden]{display:none}
.codeleiste.passt .cl-x{color:var(--signet2)}
@media(max-width:560px){
.cl-i{padding:17px 6px 17px 18px;font-size:1rem;letter-spacing:.17em}
.cl-i::placeholder{letter-spacing:.15em}
.cl-r{padding-right:14px}
.eintritt i{font-size:.66rem;letter-spacing:.34em;text-indent:.34em}
.eintritt i{font-size:1.02rem;letter-spacing:.34em;text-indent:.34em}
.eintritt.imbalken i{font-size:.66rem;letter-spacing:.3em;text-indent:.3em}
}
/* ── Die Säume am Bildschirmrand ──
Ein weicher Schein, oben und unten, der sagt, wohin es noch geht.
Fest am Rand, ohne Platzbedarf, ohne Klickflaeche. Geschaltet wird
nur die Deckkraft. */
.saum{position:fixed;left:0;right:0;height:84px;z-index:30;display:block;
pointer-events:none;opacity:0;transition:opacity .8s var(--weich)}
.saum.an{opacity:1}
.saum.oben{top:0;
background:linear-gradient(180deg,rgba(226,190,132,.17),
rgba(200,169,110,.055) 44%,transparent 86%)}
.saum.unten{bottom:0;
background:linear-gradient(0deg,rgba(226,190,132,.19),
rgba(200,169,110,.06) 44%,transparent 86%)}
/* Darin wandert ein feiner Schimmer — langsam, kaum zu bemerken,
aber er sagt: hier geht es weiter. */
.saum::after{content:'';position:absolute;left:50%;width:min(420px,72vw);
height:100%;margin-left:min(-210px,-36vw);opacity:0}
.saum.oben::after{top:0;
background:radial-gradient(60% 80% at 50% 0%,rgba(255,240,208,.3),
transparent 72%)}
.saum.unten::after{bottom:0;
background:radial-gradient(60% 80% at 50% 100%,rgba(255,240,208,.32),
transparent 72%)}
.saum.an::after{animation:saumAtmen 4.4s ease-in-out infinite}
@keyframes saumAtmen{0%,100%{opacity:.25}50%{opacity:1}}
/* ── «Jetzt kann es weitergehen» ──
Ist die Szene des Abschnitts durch, wird der Saum deutlicher und
eine Welle laeuft hinaus — nach unten beim unteren, nach oben beim
oberen. Nur transform und opacity, zwei Flaechen. */
.saum::before{content:'';position:absolute;left:50%;width:min(300px,56vw);
height:3px;margin-left:min(-150px,-28vw);border-radius:3px;
background:linear-gradient(90deg,transparent,rgba(255,243,216,.9),transparent);
opacity:0;pointer-events:none}
.saum.oben::before{top:12px}
.saum.unten::before{bottom:12px}
.saum.unten.bereit{opacity:1}
.saum.unten.bereit::after{animation-duration:2.2s}
.saum.unten.bereit::before{animation:saumRunter 2.2s cubic-bezier(.4,0,.5,1) infinite}
@keyframes saumRunter{0%{opacity:0;transform:translate3d(0,-26px,0) scaleX(.5)}
30%{opacity:1}
100%{opacity:0;transform:translate3d(0,16px,0) scaleX(1.1)}}
/* Der obere meldet sich, sobald ueberhaupt etwas hinter einem liegt. */
.saum.oben.an::before{animation:saumHoch 3.4s cubic-bezier(.4,0,.5,1) infinite}
/* Ganz unten angekommen — beim Impressum — geht es nur noch nach oben.
Dort traegt der obere Saum dieselbe deutliche Welle, die sonst unten
nach unten laeuft, und der untere ist aus. */
.saum.oben.bereit{opacity:1}
.saum.oben.bereit::after{animation-duration:2.2s}
.saum.oben.bereit::before{animation-duration:2.2s}
@keyframes saumHoch{0%{opacity:0;transform:translate3d(0,22px,0) scaleX(.5)}
30%{opacity:.85}
100%{opacity:0;transform:translate3d(0,-20px,0) scaleX(1.1)}}
@media(prefers-reduced-motion:reduce){
.saum::before{animation:none!important;opacity:0}}
@media(max-width:620px){.saum{height:62px}
/* Auf dem Handy steht am Rand oft Text — der Lichtstrich laeuft
dort nur ganz unten am Rand und viel leiser, sonst streicht er
eine Ueberschrift durch. */
.saum::before{height:2px;max-height:2px}
.saum.unten::before{bottom:3px}.saum.oben::before{top:3px}
.saum.unten.bereit::before{animation-name:saumRunterK}
.saum.oben.an::before{animation-name:saumHochK}}
@keyframes saumRunterK{0%{opacity:0;transform:scaleX(.5)}
40%{opacity:.5}100%{opacity:0;transform:scaleX(1.1)}}
@keyframes saumHochK{0%{opacity:0;transform:scaleX(.5)}
40%{opacity:.45}100%{opacity:0;transform:scaleX(1.1)}}
@media(prefers-reduced-motion:reduce){.saum.an::after{animation:none;opacity:.5}}
/* ── Das Leuchten nach unten ──
Keine Striche, kein Pfeil: ein weicher Schein, oben hell, der nach
unten hinausfaellt und dabei blasser und laenger wird. Die
Richtung liegt im Verlauf selbst. Nur transform und opacity. */
.fall{position:relative;display:block;width:60px;height:62px;
background:radial-gradient(52% 30% at 50% 2%,rgba(228,196,142,.26),
rgba(200,169,110,.08) 44%,transparent 76%)}
.fall i{position:absolute;inset:0;display:block;
background:radial-gradient(40% 26% at 50% 8%,rgba(255,243,216,.75),
rgba(238,206,154,.26) 42%,transparent 74%);
transform:translate3d(0,-14px,0) scaleY(.72);opacity:0;
animation:fallen 2.8s cubic-bezier(.4,0,.5,1) infinite}
@keyframes fallen{
0%{opacity:0;transform:translate3d(0,-14px,0) scaleY(.7)}
32%{opacity:1}
72%{opacity:.7}
100%{opacity:0;transform:translate3d(0,28px,0) scaleY(1.3)}}
@media(prefers-reduced-motion:reduce){.fall i{animation:none;opacity:.55;
transform:none}}
/* Nach zwei Sekunden blendet sich der Faden ein */
/* Der Faden braucht eine Flaeche zum Antippen, die groesser ist
als er selbst — darum ein Raster um ihn herum. «wiegen» ist weg:
der Tropfen bewegt sich schon. */
/* Nur ein Zeichen, kein Ziel: der Schein der Schwelle reicht bis in
den Codeabschnitt hinein und fing dort die Klicks ab. Gezeigt
wird er weiter, angefasst wird er nicht — dafuer gibt es die
Wegzeichen an den Abschnittsraendern. */
.runter{pointer-events:none!important;position:absolute;left:50%;bottom:16px;
z-index:4;
width:60px;height:62px;display:grid;place-items:start center;
transform:translateX(-50%);
opacity:0;animation:ein 1.1s var(--weich) 2s forwards;
transition:opacity .4s var(--weich)}
.runter:hover{opacity:.85}
/* Sobald die Tuer nach oben gefahren ist, hat der Schein seine
Aufgabe erfuellt — und steht dem Codefeld nicht mehr im Weg. */
.schwelle.fort .runter{display:none}
/* Das grosse Wort auf der Tür zieht sich zurück, waehrend die Hülle
zum Balken wird — unten im Balken taucht es eine Sekunde spaeter wieder auf. */
.schwelle.fort .sw-ueber .eintritt{opacity:0;transform:translateY(-40px);
transition:opacity .34s var(--weich),transform .6s cubic-bezier(.3,.86,.36,1)}
.losung{transition:opacity .5s var(--weich),transform .7s var(--weich)}
.schwelle.fort .losung{opacity:0;transform:translateY(-34px);pointer-events:none;
transition:opacity .3s var(--weich),transform .6s cubic-bezier(.3,.86,.36,1)}
.schwelle.fort .runter{opacity:0;animation:none}
/* ───── Abschnitte ───── */
/* KEINE Haltepunkte auf den Abschnitten. Mit ihnen greift der Browser
beim Durchscrollen an jedem Abschnitt kurz zu — das fuehlt sich an, als
haenge die Seite. Haltepunkte gibt es nur noch zweimal: ganz oben und
an der Codestation. Das Sprungziel (scroll-margin) bleibt, damit ein
Klick aus dem Menue sauber unter dem Balken landet. */
.ab{position:relative;z-index:2;padding:clamp(96px,13vh,160px) 0;
scroll-margin-top:calc(var(--kopfH,72px) + var(--balkenH,54px) + 18px)}
.ab-t{font-size:clamp(1.55rem,3.1vw,2.5rem);font-weight:400;line-height:1.18;
letter-spacing:-.024em;color:var(--iv);max-width:19ch;margin-bottom:38px}
.ab-x{font-size:var(--t5);font-weight:400;color:var(--mv);max-width:54ch;
margin:0 0 44px}
/* ═══════════════════════════════════════════════════════════
DIE DREI ETAGEN — ein Schnitt durch das Haus.
Sie liegen übereinander wie im Gebäude, und eine öffnet sich.
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
DIE TAFEL
Kein Abstieg mehr, der am Scrollstand hängt — eine Tafel, wie sie
in einem Haus im Eingang steht: drei Geschosse untereinander, jedes
mit seinem Namen, einem Satz und einem schmalen Streifen seines
eigenen Lichts am Rand. Wer eines anfasst, dem öffnet es sich.
Bewegung gibt es nur auf Veranlassung — nichts rechnet pro Bild.
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
DIE ETAGEN — EINE ANGEHEFTETE QUERFAHRT
Der Abschnitt ist hoch; sein Inhalt klebt (`position:sticky`) und
bleibt dabei stehen, waehrend die drei Etagen seitlich vorbeiziehen.
Ein Bildpunkt Scrollen ist ein Bildpunkt seitwaerts. Geschrieben wird
je Bild genau EIN transform — auf der Bahn, sonst nichts.
═══════════════════════════════════════════════════════════ */
.querfahrt{position:relative;z-index:2;
scroll-margin-top:calc(var(--kopfH,72px) + var(--balkenH,54px) + 18px)}
/* Die Spalte darf NICHT von der Bahn aufgezogen werden: sonst richtet
sich die Ueberschrift nach deren Breite und steht weit rechts aussen.
minmax(0,1fr) bindet sie an das Fenster, die Bahn laeuft darueber
hinaus und wird von overflow:hidden beschnitten. */
.qf-fest{position:sticky;top:0;height:100dvh;display:grid;
grid-template-columns:minmax(0,1fr);
grid-template-rows:auto 1fr auto;align-content:center;
padding:calc(var(--kopfH,72px) + var(--balkenH,54px) + clamp(18px,3vh,40px))
0 clamp(26px,5vh,56px);overflow:hidden}
.qf-kopf{width:100%;display:flex;align-items:baseline;
justify-content:space-between;gap:20px;flex-wrap:wrap}
.qf-kopf .ab-t{margin-bottom:0}
.qf-wo{font-size:var(--t2);letter-spacing:.24em;text-transform:uppercase;
color:var(--signet);white-space:nowrap}
/* Ohne Rahmen brauchen die Etagen mehr Luft zwischen sich — sonst
schiebt sich der Text der naechsten in die laufende hinein. */
.qf-bahn{display:flex;align-items:center;gap:clamp(44px,8vw,150px);
width:max-content;padding:0 clamp(20px,5vw,64px);
will-change:transform;transform:translate3d(0,0,0)}
/* KEIN Rahmen mehr. Die drei Etagen sind keine Karten, die
aneinandergereiht stehen — sie sind Raeume, durch die man faehrt.
Was sie trennt, ist das Licht und die Tiefe, nicht ein Strich. */
.qf-e{position:relative;flex:0 0 auto;overflow:visible;
width:min(82vw,1020px);height:min(70vh,640px);
display:grid;align-content:end;padding:clamp(22px,3.2vw,44px);
will-change:transform,opacity}
.qf-licht{position:absolute;inset:-26% -14%;z-index:0;pointer-events:none;
will-change:transform,opacity;
transition:opacity .9s var(--weich);opacity:.3}
.qf-e.vorn .qf-licht{opacity:1}
/* Das grosse Wort liegt hinter allem und zieht am langsamsten mit —
drei Schichten in drei Geschwindigkeiten, daher die Tiefe. */
/* Oben rechts, wo die Karte leer ist — nicht unten, wo der Text steht. */
/* Der Name der Etage, nicht mehr «Oben/Mitte/Unten» — das steht
weiter oben an der Spur. Kleiner als zuvor, weil «Main Floor»
sonst zur Haelfte aus der Karte liefe. */
.qf-gross{position:absolute;right:clamp(28px,4.4vw,58px);top:-.1em;z-index:0;
font-family:var(--D);font-weight:400;line-height:.8;
font-size:clamp(2.3rem,7.6vw,6.6rem);letter-spacing:-.03em;
color:transparent;pointer-events:none;white-space:nowrap;
-webkit-text-stroke:1px rgba(200,169,110,.16);
will-change:transform}
.qf-e.vorn .qf-gross{-webkit-text-stroke-color:rgba(200,169,110,0.82)}
.qf-i{will-change:transform}
.qf-e[data-e="0"] .qf-licht{background:
radial-gradient(40% 48% at 70% 20%,rgba(132,148,192,.52),transparent 70%),
radial-gradient(30% 34% at 28% 72%,rgba(200,169,110,.16),transparent 72%)}
.qf-e[data-e="1"] .qf-licht{background:
radial-gradient(40% 50% at 62% 46%,rgba(226,184,112,.50),transparent 70%),
radial-gradient(28% 32% at 20% 20%,rgba(226,133,78,.18),transparent 72%)}
.qf-e[data-e="2"] .qf-licht{background:
radial-gradient(42% 50% at 56% 76%,rgba(166,70,86,.56),transparent 72%),
radial-gradient(30% 34% at 76% 20%,rgba(170,159,178,.20),transparent 74%)}
/* ═══ Die drei Szenen ═══
Jedes Teil traegt seine Verzoegerung als --d und, wo es sich
schiebt, seinen Weg als --v. Beides steht einmal im Markup; je Bild
wird hier nichts geschrieben. Alles sind Uebergaenge, keine
Dauerschleifen — steht eine Etage, kostet die Szene kein Bild. */
/* Die Szene fuellt die Etage in voller Breite. aspect-ratio statt
einer Hoehe, damit das Bild genau den Kasten des viewBox trifft —
sonst zentriert es sich und laesst links und rechts Luft. */
.qf-bild{position:absolute;left:0;right:0;top:12%;aspect-ratio:3/1;
z-index:0;pointer-events:none;will-change:transform}
.qb{width:100%;height:100%;display:block;fill:none;overflow:visible;
stroke:rgba(200,169,110,.34);stroke-width:1.2;
stroke-linecap:round;stroke-linejoin:round;
transition:stroke 0.58s var(--weich)}
.qf-e.vorn .qb{stroke:rgba(218,193,142,.8)}
.qb *{transform-box:fill-box;transform-origin:center}
/* ── Rooftop ─────────────────────────────────────────────────
Erst zieht sich der Dachrand aus der Mitte nach beiden Seiten,
dann steigt die Stadt, dann sinkt die Scheibe, dann gehen die
Fenster an, zuletzt schlaegt das Leuchtfeuer einmal aus. */
.qb-kante{stroke-dasharray:460;stroke-dashoffset:460;
transition:stroke-dashoffset 0.609s var(--weich)}
.qf-e.vorn .qb-kante{stroke-dashoffset:0}
.qb-fern,.qb-nah{transform-origin:bottom;transform:scaleY(.04);opacity:0;
transition:transform 0.464s var(--weich) var(--d,0s),
opacity 0.319s var(--weich) var(--d,0s)}
.qf-e.vorn .qb-fern,.qf-e.vorn .qb-nah{transform:none;opacity:1}
.qb-fern{stroke:rgba(188,170,196,.5)}
.qf-e.vorn .qb-fern{stroke:rgba(196,186,214,.72)}
.qb-nah{fill:rgba(8,6,11,.96);stroke:rgba(214,190,146,.7)}
.qb-mast{stroke-dasharray:44;stroke-dashoffset:44;
transition:stroke-dashoffset 0.348s var(--weich) 0.534s}
.qf-e.vorn .qb-mast{stroke-dashoffset:0}
.qb-scheibe{stroke:rgba(232,176,124,.8);stroke-width:1.5;
transform:translateY(64px) scale(.84);opacity:0;
transition:transform 0.87s var(--weich) 0.244s,opacity 0.58s var(--weich) 0.244s}
.qf-e.vorn .qb-scheibe{transform:none;opacity:1}
/* ── Der Tageslauf ──
Steht der Rooftop vorn, geht die Sonne auf und wieder unter, und
die Stadt antwortet: nachts brennen die Fenster und die Sterne
stehen, tagsueber verblassen beide. Alle vier Bewegungen haben
DIESELBE Dauer und denselben Vorlauf — darum bleiben sie im
Gleichschritt. Bewegt werden nur transform und opacity. */
.qf-e[data-e="0"].vorn .qb-sonne{
animation:qbSonne 22s ease-in-out 1.276s infinite}
@keyframes qbSonne{
0%,100%{transform:translateY(104px);opacity:.3}
15%{transform:translateY(30px);opacity:1}
34%,62%{transform:translateY(-84px);opacity:1}
85%{transform:translateY(30px);opacity:1}}
.qf-e[data-e="0"].vorn .qb-dunst{
animation:qbDunst 22s ease-in-out 1.276s infinite}
@keyframes qbDunst{0%,100%{opacity:0}
12%,19%{opacity:.9}
34%,62%{opacity:0}
80%,89%{opacity:1}}
.qf-e[data-e="0"].vorn .qb-stern,
.qf-e[data-e="0"].vorn .qb-fenster{
animation:qbNacht 22s ease-in-out 1.276s infinite}
@keyframes qbNacht{0%,100%{opacity:1}
22%{opacity:.5}
38%,58%{opacity:.06}
76%{opacity:.55}}
.qf-e[data-e="0"].vorn .qf-licht{
animation:qbHimmel 22s ease-in-out 1.276s infinite}
@keyframes qbHimmel{0%,100%{opacity:.55}
34%,62%{opacity:1}}
@media(prefers-reduced-motion:reduce){
.qf-e[data-e="0"].vorn .qb-sonne,.qf-e[data-e="0"].vorn .qb-dunst,
.qf-e[data-e="0"].vorn .qb-stern,.qf-e[data-e="0"].vorn .qb-fenster,
.qf-e[data-e="0"].vorn .qf-licht{animation:none}}
.qb-dunst{stroke:rgba(236,186,138,.5);transform:scaleX(0);opacity:0;
transition:transform 0.522s var(--weich) var(--d,0s),
opacity 0.406s var(--weich) var(--d,0s)}
.qf-e.vorn .qb-dunst{transform:none;opacity:1}
.qb-stern{fill:rgba(226,214,236,.72);stroke:none;opacity:0;
transform:scale(.3);
transition:opacity 0.406s var(--weich) var(--d,0s),
transform 0.406s var(--weich) var(--d,0s)}
.qf-e.vorn .qb-stern{opacity:1;transform:none}
.qb-fenster{fill:rgba(240,198,132,.82);stroke:none;opacity:0;
transition:opacity 0.261s var(--weich) var(--d,0s)}
.qf-e.vorn .qb-fenster{opacity:1}
.qb-punkt{fill:rgba(232,142,106,.95);stroke:none;opacity:0;
transition:opacity 0.29s var(--weich) 0.87s}
.qf-e.vorn .qb-punkt{opacity:1}
/* Das Leuchtfeuer schlaegt weiter aus, solange die Etage vorn steht —
ein einzelner Kreis von 7 px. Gemessen kostet so etwas nichts; teuer
sind grosse Flaechen, nicht kleine Zeichen. Zieht die Etage weiter,
faellt «vorn» weg und mit ihr die Bewegung. */
.qb-welle{stroke:rgba(232,142,106,.8);opacity:0}
.qf-e.vorn .qb-welle{animation:qbWelle 2.8s var(--weich) 0.87s infinite both}
@keyframes qbWelle{0%{transform:scale(1);opacity:.85}
62%,100%{transform:scale(6.5);opacity:0}}
/* Und einer tippt wirklich. */
.qf-e.vorn .qb-tippt circle{animation:qbTipp 1.25s ease-in-out infinite}
.qf-e.vorn .qb-tippt circle:nth-of-type(2){animation-delay:0.081s}
.qf-e.vorn .qb-tippt circle:nth-of-type(3){animation-delay:0.162s}
@keyframes qbTipp{0%,62%,100%{transform:translateY(0);opacity:.55}
28%{transform:translateY(-4px);opacity:1}}
/* ── Main Floor ──────────────────────────────────────────────
Der Faden zieht sich von links nach rechts; der zweite Kopf
erscheint erst, wenn er angekommen ist. Dann die Nachrichten im
Wechsel, und zuletzt tippt noch jemand. */
.qb-faden{stroke-dasharray:720;stroke-dashoffset:720;stroke-width:1.4;
transition:stroke-dashoffset 0.754s var(--weich) 0.07s}
.qf-e.vorn .qb-faden{stroke-dashoffset:0}
.qb-kopf{transform:scale(.2);opacity:0;
transition:transform 0.406s var(--weich),opacity 0.29s var(--weich)}
.qf-e.vorn .qb-kopf{transform:none;opacity:1}
.qf-e.vorn .qb-k1{transition-delay:0.058s}
.qf-e.vorn .qb-k2{transition-delay:0.754s}
.qb-blase,.qb-tippt{transform:translateY(16px) scale(.92);opacity:0;
transition:transform 0.418s var(--weich) var(--d,0s),
opacity 0.319s var(--weich) var(--d,0s)}
.qf-e.vorn .qb-blase,.qf-e.vorn .qb-tippt{transform:none;opacity:1}
.qb-bl{fill:rgba(12,9,14,.72);stroke:rgba(214,186,138,.52)}
.qb-bz{stroke:rgba(206,192,172,.46)}
.qb-tippt circle{fill:rgba(224,198,150,.9);stroke:none}
/* ── Basement ────────────────────────────────────────────────
Eine Loge, kein Zaun. Erst die Stange, dann die Festons aus der
Mitte heraus, dann gehen die beiden Vorhaenge zur Seite auf — und
erst dahinter kommt der Saal. */
.qb-stange{stroke:rgba(216,192,154,.55);stroke-dasharray:900;
stroke-dashoffset:900;transition:stroke-dashoffset 0.319s var(--weich)}
.qf-e.vorn .qb-stange{stroke-dashoffset:0}
.qb-feston{stroke:rgba(222,198,160,.55);stroke-dasharray:280;
stroke-dashoffset:280;
transition:stroke-dashoffset 0.348s var(--weich) var(--d,0s)}
.qf-e.vorn .qb-feston{stroke-dashoffset:0}
.qb-fein{stroke:rgba(222,198,160,.3)}
/* Die Vorhaenge stehen zuerst geschlossen in der Mitte und fahren
dann an ihren Platz. Ein einziges transform je Seite. */
.qb-drape{opacity:0;transition:transform 0.522s var(--weich) var(--d,0s),
opacity 0.319s var(--weich) var(--d,0s)}
.qb-li{transform:translateX(212px)}
.qb-re{transform:translateX(-212px)}
.qf-e.vorn .qb-drape{transform:none;opacity:1}
.qb-falte{stroke:rgba(206,184,164,.42);stroke-width:1.1}
.qb-halter{fill:none;stroke:rgba(226,202,162,.7)}
.qb-leuchter{stroke:rgba(224,200,158,.58);transform:translateY(-30px);opacity:0;
transition:transform 0.493s var(--weich) var(--d,0s),
opacity 0.406s var(--weich) var(--d,0s)}
.qf-e.vorn .qb-leuchter{transform:none;opacity:1}
.qb-kranz{fill:none;stroke:rgba(228,204,162,.68)}
.qb-tropf{stroke:rgba(222,196,152,.42)}
.qb-flamme{fill:rgba(246,214,156,.88);stroke:none}
/* Eine einzige ruhige Bewegung im ganzen Saal: die mittlere Flamme. */
.qf-e.vorn .qb-kern{animation:qbFlamme 4.4s ease-in-out infinite}
@keyframes qbFlamme{0%,100%{opacity:.5;transform:scale(.86)}
50%{opacity:1;transform:scale(1.16)}}
.qb-wesen{transform:translateY(20px) scale(.92);opacity:0;
transition:transform 0.464s var(--weich) var(--d,0s),
opacity 0.377s var(--weich) var(--d,0s)}
.qf-e.vorn .qb-wesen{transform:none;opacity:1}
.qb-larve{fill:rgba(14,9,15,.88);stroke:rgba(226,200,152,.74);stroke-width:1.3}
.qb-auge{fill:rgba(5,3,7,.96);stroke:rgba(226,200,152,.46)}
.qb-zier{stroke:rgba(226,200,152,.34)}
.qb-spitz{stroke:rgba(226,200,152,.42)}
.qb-stiel{stroke:rgba(226,200,152,.6)}
.qb-knauf{fill:rgba(226,200,152,.75);stroke:none}
/* Der Lichtkreis auf dem polierten Boden. */
.qb-pool{fill:none;stroke:rgba(214,170,178,.3);transform:scaleX(.3);opacity:0;
transition:transform 0.464s var(--weich) 0.65s,opacity 0.348s var(--weich) 0.65s}
.qf-e.vorn .qb-pool{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){
.qb *,.qb{transition:none!important;animation:none!important}
.qb-kante,.qb-faden,.qb-mast,.qb-stange,.qb-feston{stroke-dashoffset:0}
.qb-fern,.qb-nah,.qb-scheibe,.qb-dunst,.qb-stern,.qb-fenster,.qb-punkt,
.qb-kopf,.qb-blase,.qb-tippt,.qb-leuchter,.qb-wesen,.qb-drape,
.qb-pool{transform:none;opacity:1}
.qf-e.vorn .qb-kern{animation:none}
.qf-e.vorn .qb-kern{animation:none}
.qb-welle{opacity:0}
.qf-e.vorn .qb-tippt circle{animation:none}}
@media(max-width:620px){
/* Auf dem Telefon waere die Szene in Kartenbreite nur 112 px hoch.
Sie laeuft darum links und rechts aus dem Bild — der Abschnitt
schneidet sie ab, und was zaehlt, steht in der Mitte. */
.qf-bild{left:-16%;right:-16%;top:5%}}
.qf-i{position:relative;z-index:1;max-width:38ch}
.qf-n{font-family:var(--D);font-weight:400;line-height:1;
font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-.016em;color:var(--eis);
padding-bottom:.1em}
.qf-x{font-size:clamp(.88rem,1.4vw,1.04rem);font-weight:400;line-height:1.72;
color:var(--stahl);margin-top:12px}
.qf-r{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(16px,2.4vh,26px)}
.qf-r span{font-size:var(--t2);letter-spacing:.14em;color:var(--signet);
border:1px solid rgba(200,169,110,.3);border-radius:var(--r-pille);
padding:7px 14px;background:rgba(10,7,5,.42)}
.qf-spur{display:block;height:1px;background:var(--kante);position:relative}
/* Der Pfeil unter der Spur: er kommt erst, wenn die Szene des
Basements durch ist (1,9 s), und wippt dann ruhig weiter. Ein
einzelnes Zeichen von 30 px — das kostet nichts, und mit der
Klasse «letzte» hoert es wieder auf. */
.qf-weiter{display:grid;place-items:start center;
width:60px;height:56px;margin:clamp(4px,1vh,14px) auto 0;
opacity:0;transform:translate3d(0,8px,0);pointer-events:none;
transition:opacity .7s var(--weich),transform .7s var(--weich)}
/* Der alte Pfeil nach dem Basement ist durch die Saeume ersetzt. */
.qf-weiter{display:none}
/* Erst wenn der Faden da ist, faellt der Tropfen — sonst tropft es
ins Unsichtbare. */
.qf-weiter .fall i{animation-play-state:paused}
.qf-fest.letzte .qf-weiter .fall i{animation-play-state:running;
animation-delay:2.1s}
.qf-spur i{position:absolute;left:0;top:0;height:1px;width:100%;
transform-origin:0 50%;transform:scaleX(0);will-change:transform;
background:linear-gradient(90deg,var(--signet),rgba(200,169,110,.3))}
@media(max-width:620px){
.qf-e{width:86vw;height:min(62vh,520px)}
/* «Main Floor» ist zehn Zeichen lang — auf einer 86vw breiten Karte
muss der Name deutlich kleiner sein als frueher «Mitte». */
.qf-gross{font-size:clamp(1.5rem,8.4vw,2.9rem);right:22px;top:-.06em}
.qf-fest{padding-top:calc(var(--kopfH,72px) + var(--balkenH,54px) + 14px)}
}
/* ═══════════════════════════════════════════════════════════
DIE ZEICHEN — EIN KRANZ, DER SICH DREHT
Vier Messingmarken auf einem Ring. Der Ring dreht sich mit dem
Scrollen; vorne steht, wovon die Rede ist. Je Bild werden nur
transform und opacity geschrieben, auf acht kleinen Elementen.
═══════════════════════════════════════════════════════════ */
.kranz{position:relative;z-index:2;
scroll-margin-top:calc(var(--kopfH,72px) + var(--balkenH,54px) + 18px)}
.kr-fest{position:sticky;top:0;height:100dvh;display:grid;
grid-template-columns:minmax(0,1fr);
grid-template-rows:auto 1fr auto;align-content:center;
padding:calc(var(--kopfH,72px) + var(--balkenH,54px) + clamp(18px,3vh,40px))
0 clamp(30px,6vh,70px);overflow:hidden}
.kr-buehne{display:grid;place-items:center;perspective:900px;min-height:0}
/* Kurze Bildschirme: die Buehne bekommt ihren eigenen Platz. Mit 1fr
und min-height 0 fiel sie auf null zusammen, sobald die Tafel
laenger war — dann lagen die Zeichen mitten auf der Ueberschrift. */
@media(max-width:620px),(max-height:760px){
.kr-fest{grid-template-rows:auto minmax(118px,1fr) auto;align-content:start;
padding-top:calc(var(--kopfH,72px) + var(--balkenH,54px) + 12px);
padding-bottom:18px}
.kr-buehne{min-height:118px}
.kr-tafel{min-height:0}
.kr-x{margin-top:10px;line-height:1.6}
}
@media(max-width:620px){
.kr-ring{width:min(220px,62vw);height:96px}
.kr-m{width:50px;height:50px;margin:-25px}
.kr-x{font-size:.86rem;padding:0 18px}
}
.kr-ring{position:relative;width:clamp(200px,30vw,360px);
height:clamp(96px,11vw,132px);transform-style:preserve-3d;
will-change:transform;transform:translate3d(0,0,0)}
.kr-m{position:absolute;left:50%;top:50%;width:clamp(56px,7vw,96px);
height:clamp(56px,7vw,96px);margin:calc(clamp(56px,7vw,96px) / -2);
color:var(--signet);will-change:transform,opacity}
.kr-m svg{width:100%;height:100%;display:block;overflow:visible;
position:relative;z-index:1}
/* Ein stiller Schein hinter jeder Marke — vorne traegt er, hinten
verschwindet er mit der Deckkraft der Marke. */
.kr-m::before{content:'';position:absolute;inset:-52%;border-radius:50%;
background:radial-gradient(circle,rgba(200,169,110,.22),transparent 68%)}
.kr-tafel{text-align:center;display:grid;justify-items:center;
min-height:clamp(150px,21vh,210px);align-content:start}
.kr-n{font-family:var(--D);font-weight:400;line-height:1.04;
font-size:clamp(1.5rem,3.2vw,2.3rem);color:var(--eis)}
.kr-r{display:block;margin-top:7px;font-size:var(--t2);letter-spacing:.2em;
text-transform:uppercase;color:var(--signet2)}
.kr-x{margin-top:15px;font-size:clamp(.88rem,1.4vw,1.04rem);font-weight:400;
line-height:1.74;color:var(--stahl);max-width:52ch}
/* Der Wechsel blendet um — die Tafel wird dabei NIE neu gebaut, es wird
nur eine Klasse umgehaengt. */
.kr-i{opacity:0;transform:translate3d(0,12px,0);
transition:opacity .42s var(--weich),transform .55s var(--weich);
grid-area:1 / 1}
.kr-i.an{opacity:1;transform:translate3d(0,0,0)}
.kr-tafel{position:relative;display:grid}
@media(prefers-reduced-motion:reduce){.kr-i{transition:none}}
/* ───── Schluss und Fuss ───── */
/* ═══════════════════════════════════════════════════════════
WAS SIE HIER KÖNNEN — fünf gezeichnete Szenen
Dieselbe Handschrift wie die Etagenfahrt: Linien in Gold, die
sich selbst ziehen, sobald die Szene im Bild steht. Nur
stroke-dashoffset, transform und opacity — nichts, was pro Bild
teuer wäre. Jede Szene steht für etwas, das ein Mitglied tun
kann; was sie zeigt, steht daneben.
═══════════════════════════════════════════════════════════ */
.kn{position:relative;z-index:2;
padding:clamp(84px,13vh,150px) 0 clamp(50px,8vh,96px);
scroll-margin-top:calc(var(--kopfH,72px) + var(--balkenH,54px) + 18px)}
.kn-kopf{margin-bottom:clamp(40px,7vh,78px)}
.kn-kopf .ab-t{margin-bottom:0}
.kn-x{font-size:var(--t5);font-weight:400;color:var(--mv);max-width:48ch;
margin-top:15px}
.kn-x b{font-weight:400;color:var(--gdim)}
.kn-reihe{display:grid;gap:clamp(44px,8vh,96px)}
.kn-e{display:grid;gap:clamp(18px,3vw,46px);align-items:center;
grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.kn-e:nth-child(even) .kn-bild{order:2}
@media(max-width:860px){
.kn-e{grid-template-columns:minmax(0,1fr);gap:20px}
.kn-e:nth-child(even) .kn-bild{order:0}
}
/* Die Bühne */
.kn-bild{position:relative;aspect-ratio:600/340;min-width:0;
border-radius:var(--r-karte);overflow:hidden;
border:1px solid var(--line);
background:linear-gradient(166deg,rgba(200,169,110,.07),var(--ink2) 64%)}
.kn-bild::after{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(72% 58% at 50% 42%,rgba(200,169,110,.07),transparent 72%)}
/* Der Strich ist kein Ton mehr, sondern ein Verlauf — Bernstein nach
Rosé, je Szene anders herum. Eine Farbe kann man überblenden, einen
Verlauf nicht; darum liegt die Überblendung auf `stroke-opacity`. */
.kv-a{stop-color:var(--h1,#c8a96e)}
.kv-b{stop-color:var(--h2,#c8a96e)}
.kv-c{stop-color:var(--h3,#c8a96e)}
.kb{position:absolute;inset:0;width:100%;height:100%;display:block;fill:none;
overflow:visible;stroke:var(--kbs,#c8a96e);stroke-width:1.2;stroke-opacity:.34;
stroke-linecap:round;stroke-linejoin:round;
transition:stroke-opacity 1.1s var(--weich)}
.kn-e.an .kb{stroke-opacity:.9}
.kb *{transform-box:fill-box;transform-origin:center}
/* Das Licht der Szene — zwei weiche Felder in ihren eigenen Farben,
die langsam heller und wieder dunkler werden. */
.kn-bild::before{content:'';position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(54% 62% at 26% 44%,var(--g1,transparent),transparent 72%),
radial-gradient(50% 58% at 78% 64%,var(--g2,transparent),transparent 70%);
opacity:0;transition:opacity 1.3s var(--weich) .25s}
.kn-e.an .kn-bild::before{opacity:1;
animation:kbGlimm 9.4s ease-in-out 1.4s infinite alternate}
@keyframes kbGlimm{from{opacity:.6}to{opacity:1}}
/* Das Wort daneben */
.kn-t{min-width:0}
.kn-k{font-size:var(--t1);letter-spacing:.26em;text-transform:uppercase;
color:var(--kak,var(--gold));display:block;margin-bottom:11px;
opacity:0;transform:translateY(8px);
transition:opacity .5s var(--weich) .1s,transform .6s var(--weich) .1s}
.kn-n{font-family:var(--D);font-size:clamp(1.6rem,3.1vw,2.3rem);line-height:1.14;
color:var(--iv);
opacity:0;transform:translateY(12px);
transition:opacity .6s var(--weich) .18s,transform .7s var(--weich) .18s}
.kn-s{font-size:var(--t5);font-weight:400;line-height:1.78;color:var(--mv);
max-width:46ch;margin-top:15px;
opacity:0;transform:translateY(12px);
transition:opacity .6s var(--weich) .28s,transform .7s var(--weich) .28s}
.kn-e.an .kn-k,.kn-e.an .kn-n,.kn-e.an .kn-s{opacity:1;transform:none}
/* ─── Szene 1 · Der Augenblick ─────────────────────────────
Der grosse Schirm zieht sich auf, die Figur steigt hinein, das
kleine Bild fährt in die Ecke, und ringsum läuft die Zeit ab. */
.kb-rahmen{stroke-dasharray:1240;stroke-dashoffset:1240;
transition:stroke-dashoffset 1.02s var(--weich)}
.kn-e.an .kb-rahmen{stroke-dashoffset:0}
.kb-figur{opacity:0;transform:translateY(22px);
transition:opacity .62s var(--weich) .42s,transform .78s var(--weich) .42s}
.kn-e.an .kb-figur{opacity:1;transform:none}
.kb-klein{opacity:0;transform:translate(-120px,78px) scale(.55);
transition:opacity .5s var(--weich) .72s,transform .86s var(--feder) .72s}
.kn-e.an .kb-klein{opacity:1;transform:none}
.kb-uhr{stroke:var(--kak,#e0c692);stroke-opacity:1;stroke-width:2;
stroke-dasharray:214;stroke-dashoffset:214;
transition:stroke-dashoffset 2.6s linear 1.05s}
.kn-e.an .kb-uhr{stroke-dashoffset:26}
.kb-puls{opacity:0;stroke:var(--kak,#e0c692)}
.kn-e.an .kb-puls{animation:kbPuls 3.4s var(--weich) 1.1s infinite}
@keyframes kbPuls{
0%{opacity:.5;transform:scale(.72)} 70%{opacity:0;transform:scale(1.5)}
100%{opacity:0;transform:scale(1.5)}}
/* Die Figur atmet, kaum sichtbar — ein Bild, das steht, ist ein Foto. */
.kn-e.an .kb-figur{animation:kbAtem 7.2s ease-in-out 1.4s infinite}
@keyframes kbAtem{0%,100%{transform:scale(1)} 50%{transform:scale(1.016)}}
/* Ein Licht läuft über den Schirm */
.kb-scan{stroke:var(--kak,#e0c692);stroke-opacity:0;stroke-width:1}
.kn-e.an .kb-scan{animation:kbScan 6.8s linear 1.6s infinite}
@keyframes kbScan{
0%{stroke-opacity:0;transform:translateY(0)}
12%,76%{stroke-opacity:.34} 100%{stroke-opacity:0;transform:translateY(222px)}}
/* Drei Punkte: jemand ist da */
.kb-punkt{fill:var(--kak,#e0c692);stroke:none;opacity:0}
.kn-e.an .kb-punkt{animation:kbTupf 2.1s ease-in-out var(--d,0s) infinite}
@keyframes kbTupf{0%,70%,100%{opacity:.22} 35%{opacity:.95}}
/* ─── Szene 2 · Die Maske ──────────────────────────────────
Die Zeilen schreiben sich, dann hebt sich die Maske ein Stück —
gerade so weit, dass man ahnt, wer dahintersteht. */
.kb-kopf{opacity:0;transform:scale(.9);
transition:opacity .56s var(--weich) .22s,transform .7s var(--weich) .22s}
.kn-e.an .kb-kopf{opacity:1;transform:none}
.kb-zeile{stroke-dasharray:200;stroke-dashoffset:200;
transition:stroke-dashoffset .58s var(--weich) var(--d,0s)}
.kn-e.an .kb-zeile{stroke-dashoffset:0}
.kb-maske{stroke:var(--kak,#e8ce98);stroke-opacity:.95;stroke-width:1.5;
opacity:0;transform:translateY(10px)}
/* Die Zeilen bleiben nicht stehen — sie werden gelöscht und neu
geschrieben, solange die Szene im Bild ist. */
.kn-e.an .kb-schreib{animation:kbSchreib 6.4s var(--weich) var(--d2,1.5s) infinite}
@keyframes kbSchreib{
0%,6%{stroke-dashoffset:0} 17%{stroke-dashoffset:200}
33%,100%{stroke-dashoffset:0}}
/* Was unter der Maske liegt, zeigt sich nur, solange sie oben ist. */
.kb-auge{fill:var(--kak,#e8ce98);stroke:none;opacity:0}
.kn-e.an .kb-auge{animation:kbAuge 6.4s var(--weich) 1.5s infinite}
@keyframes kbAuge{0%,64%{opacity:0} 73%,83%{opacity:.95} 92%,100%{opacity:0}}
/* Die Maske deckt — sonst scheint das Gesicht durch sie hindurch. */
.kb-mf{fill:#15110f}
.kb-band{stroke:var(--kak,#e8ce98);stroke-opacity:.55}
.kn-e.an .kb-maske{opacity:1;transform:none;
transition:opacity .5s var(--weich) .5s,transform .6s var(--weich) .5s;
animation:kbMaske 6.4s var(--weich) 1.5s infinite}
@keyframes kbMaske{
0%,58%{transform:none} 72%,84%{transform:translateY(-44px)} 100%{transform:none}}
/* ─── Szene 3 · Die Verfügbarkeiten ───────────────────────────
Das Zifferblatt steht, der offene Bogen wächst in die Stunden
hinein, und die Glocke schlägt einmal aus. */
.kb-blatt{stroke-dasharray:570;stroke-dashoffset:570;
transition:stroke-dashoffset .92s var(--weich)}
.kn-e.an .kb-blatt{stroke-dashoffset:0}
.kb-strich{opacity:0;transition:opacity .4s var(--weich) var(--d,0s)}
/* Über die Stunden läuft ein Licht herum — einmal in der Runde. */
.kn-e.an .kb-strich{opacity:.55;
animation:kbStunde 5.6s var(--weich) var(--d2,0s) infinite}
@keyframes kbStunde{0%,72%,100%{opacity:.5} 82%{opacity:1}}
.kb-offen{stroke:var(--kak,#e4c894);stroke-opacity:.98;stroke-width:4;
stroke-dasharray:300;stroke-dashoffset:300;
transition:stroke-dashoffset 1.15s var(--weich) .62s}
/* Das Fenster der Erreichbarkeit wird enger und wieder weiter —
so wie man es selbst verschiebt. */
.kn-e.an .kb-offen{stroke-dashoffset:122;
animation:kbBogen 8.4s var(--weich) 2.1s infinite}
@keyframes kbBogen{0%,100%{stroke-dashoffset:122} 50%{stroke-dashoffset:184}}
.kb-glocke{opacity:0;transform:translateY(12px);stroke:var(--kak,#e4c894);
stroke-opacity:.95}
.kn-e.an .kb-glocke{opacity:1;transform:none;
transition:opacity .5s var(--weich) 1.1s,transform .6s var(--weich) 1.1s;
animation:kbGlocke 5.2s var(--weich) 1.8s infinite}
@keyframes kbGlocke{
0%,72%{transform:rotate(0)} 78%{transform:rotate(11deg)}
84%{transform:rotate(-8deg)} 90%{transform:rotate(4deg)} 100%{transform:rotate(0)}}
/* ─── Szene 4 · Das Rendezvous ─────────────────────────────
Erst steht der Tisch, dann kommen die Gläser herauf und neigen
sich einander zu. */
.kb-tisch{stroke-dasharray:420;stroke-dashoffset:420;
transition:stroke-dashoffset .8s var(--weich)}
.kn-e.an .kb-tisch{stroke-dashoffset:0}
/* Das Glas kippt auf seinem Fuss, nicht um seine Mitte — sonst hebt
es beim Anstossen vom Tisch ab. */
.kb-glas{opacity:0;transform:translateY(34px);transform-origin:50% 96%}
.kn-e.an .kb-glas{opacity:1;transform:none;
transition:opacity .6s var(--weich) var(--d,.4s),
transform .78s var(--weich) var(--d,.4s)}
.kn-e.an .kb-gl{animation:kbNeigL 6.6s var(--weich) 1.5s infinite}
.kn-e.an .kb-gr{animation:kbNeigR 6.6s var(--weich) 1.5s infinite}
@keyframes kbNeigL{0%,60%{transform:rotate(0)} 70%,78%{transform:rotate(9deg)}
100%{transform:rotate(0)}}
@keyframes kbNeigR{0%,60%{transform:rotate(0)} 70%,78%{transform:rotate(-9deg)}
100%{transform:rotate(0)}}
/* Der Funke springt genau dann, wenn die Gläser sich treffen. */
.kb-funke{stroke:var(--kak,#e4c894);stroke-opacity:1;stroke-width:1.6;
opacity:0;transform:scale(.4)}
.kn-e.an .kb-funke{animation:kbFunke 6.6s var(--weich) 1.5s infinite}
@keyframes kbFunke{
0%,66%{opacity:0;transform:scale(.4)}
71%{opacity:.95;transform:scale(1)} 80%{opacity:0;transform:scale(1.35)}
100%{opacity:0;transform:scale(.4)}}
.kb-schild{opacity:0;transform:translateY(10px)}
.kn-e.an .kb-schild{opacity:1;transform:none;
transition:opacity .55s var(--weich) 1s,transform .66s var(--weich) 1s}
/* Der Satz am Ende */
/* ── Wenn der Grund farbig ist, zieht der Abschnitt mit ──
Die Töne stehen als Variablen; weil `color` sie erbt, laeuft der
Wechsel als Übergang und nicht als Sprung. */
.kn-k,.kn-n,.kn-s,.kn-x,.kn-t1,.kn-t2,.kn .ab-t{
transition:color 1.5s var(--weich)}
.kn-bild,.kn-tafel{transition:background 1.5s var(--weich),
border-color 1.5s var(--weich)}
.kb-mf{transition:fill 1.5s var(--weich)}
body.buntnah .kn{--gold:#eec489;--iv:#fdf6ee;--mv:#d7bda9}
body.buntnah .kn-bild{
background:linear-gradient(166deg,rgba(238,196,137,.11),rgba(22,18,19,.5) 64%);
border-color:rgba(238,196,137,.24)}
body.buntnah .kn-tafel{
background:linear-gradient(150deg,rgba(238,196,137,.13),rgba(22,18,19,.5) 60%);
border-color:rgba(238,196,137,.4)}
body.buntnah .kb-mf{fill:rgba(18,14,15,.9)}
.kn-tafel{margin-top:clamp(50px,8vh,96px);padding:clamp(26px,4vw,40px);
border-radius:var(--r-gross);border:1px solid rgba(200,169,110,.34);
background:linear-gradient(150deg,rgba(200,169,110,.09),var(--ink2) 60%);
text-align:center}
.kn-t1{font-family:var(--D);font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.2;
color:var(--iv);max-width:26ch;margin:0 auto}
.kn-t2{font-size:var(--t4);font-weight:400;line-height:1.75;color:var(--mv);
max-width:52ch;margin:17px auto 0}
@media(prefers-reduced-motion:reduce){
.kn-e *,.kn-e .kb *{transition:none!important;animation:none!important}
.kn-e .kb-rahmen,.kn-e .kb-blatt,.kn-e .kb-tisch,
.kn-e .kb-zeile,.kn-e .kb-schreib{stroke-dashoffset:0}
.kn-e .kb-scan,.kn-e .kb-funke,.kn-e .kb-auge{opacity:0!important}
.kn-e .kb-punkt,.kn-e .kb-strich{opacity:.6!important}
.kn-e .kn-bild::before{opacity:1!important;animation:none!important}
.kn-e .kb-offen{stroke-dashoffset:122}
.kn-e .kb-uhr{stroke-dashoffset:26}
.kn-k,.kn-n,.kn-s,.kb-figur,.kb-klein,.kb-kopf,.kb-maske,.kb-glocke,
.kb-glas,.kb-schild{opacity:1!important;transform:none!important}
}
.schluss{position:relative;z-index:2;padding:clamp(100px,15vh,180px) 0;
text-align:center}
.sc-t{font-size:clamp(1.9rem,4.2vw,3.15rem);font-weight:400;line-height:1.14;
letter-spacing:-.03em;color:var(--eis)}
.grosser{margin-top:42px;padding:19px 54px;font-size:var(--t3);letter-spacing:.22em;
text-transform:uppercase;color:var(--ink);background:var(--gold);
border:1px solid var(--gold);border-radius:var(--r-karte);
transition:.26s var(--weich)}
/* Der Knopf unten atmet — gross, wieder normal, gross. Nur
transform; die Bewegung haelt an, sobald man ihn beruehrt. */
.grosser{animation:grAtmen 3.6s ease-in-out 1.2s infinite;
box-shadow:0 0 0 0 rgba(200,169,110,0)}
@keyframes grAtmen{0%,100%{transform:scale(1)}
48%{transform:scale(1.055)}}
.grosser:hover,.grosser:focus-visible,.grosser.weicht{animation-play-state:paused}
.grosser:hover{opacity:.9;box-shadow:0 8px 34px rgba(200,169,110,.26)}
/* ── Das Logo oben ist ein Menü, und das soll man sehen ──
Ein kleiner Winkel daneben, der sich dreht, wenn das Menü offen
ist, und ein Strich darunter, der auf Beruehrung aufzieht. */
.markek{display:inline-flex;align-items:center;gap:7px;position:relative;
padding-bottom:4px}
.mk-p{display:inline-flex;width:15px;height:15px;color:var(--gdim);
transform:translateY(1px);
transition:transform .4s var(--weich),color .3s var(--weich)}
.mk-p svg{width:100%;height:100%;display:block}
.markek:hover .mk-p,.markek[aria-expanded="true"] .mk-p{color:var(--signet)}
.markek[aria-expanded="true"] .mk-p{transform:translateY(1px) rotate(180deg)}
.mk-l{position:absolute;left:0;right:0;bottom:0;height:1px;display:block;
background:var(--signet);transform-origin:0 50%;transform:scaleX(0);
opacity:.6;transition:transform .55s var(--weich),opacity .4s var(--weich)}
.markek:hover .mk-l,.markek:focus-visible .mk-l,
.markek[aria-expanded="true"] .mk-l{transform:scaleX(1);opacity:1}
@media(prefers-reduced-motion:reduce){.grosser{animation:none}}
/* Waehrend die Fuge aufgeht, tritt zurueck, woraus sie kommt — die
Tuer, die Codeleiste oder der Knopf. Nur Deckkraft: die Tuer traegt
ihre eigene Verformung, die hier nichts ueberschreiben darf. */
.weicht{opacity:0;transition:opacity .36s var(--weich)}
.grosser.weicht{transform:scale(.94);
transition:opacity .34s var(--weich),transform .5s var(--weich)}
/* Die Lichtfuge: ein Strich von zwei Bildpunkten, der erst in die
Hoehe und dann in die Breite gezogen wird. Beides nur transform —
eine Flaeche, die waechst, waere Layout in jedem Bild. */
.lichtfuge{position:fixed;left:50%;top:50%;z-index:150;width:2px;height:2px;
margin:-1px 0 0 -1px;display:block;pointer-events:none;opacity:0;
border-radius:2px;background:#fff6e2;
box-shadow:0 0 70px 16px rgba(234,196,132,.55),
0 0 180px 60px rgba(200,169,110,.28);
transform:scale(1,1);transform-origin:50% 50%;
transition:opacity .3s var(--weich),transform .3s var(--weich)}
/* Erst in die Hoehe (bis 46 %), dann in die Breite — nacheinander,
darum eine Bildfolge und keine zwei Uebergaenge. */
.lichtfuge.an{animation:lfAuf .94s cubic-bezier(.3,.86,.36,1) forwards}
@keyframes lfAuf{
0%{opacity:0;transform:scale(1,1)}
12%{opacity:1;transform:scale(1,calc(var(--hoch,400) * .18))}
46%{opacity:1;transform:scale(1,var(--hoch,400))}
100%{opacity:1;transform:scale(var(--breit,600),var(--hoch,400))}}
.lichtfuge.aus{opacity:0;transform:scale(var(--breit,600),var(--hoch,400));
transition:opacity .72s var(--weich)}
@media(prefers-reduced-motion:reduce){
.lichtfuge{display:none}
.grosser.weicht{opacity:1;transform:none}}
.fuss{position:relative;z-index:2;border-top:1px solid var(--kante);
padding:52px 0 44px}
.f-o{display:flex;align-items:center;justify-content:space-between;gap:24px;
flex-wrap:wrap}
.f-l{display:flex;gap:24px;flex-wrap:wrap;font-size:var(--t3);color:var(--stahl2)}
.f-l a{transition:color .4s}.f-l a:hover{color:var(--signet)}
.f-pflicht{margin-top:30px;padding-top:26px;border-top:1px solid var(--kante);
display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.f-pf{font-size:var(--t2);letter-spacing:.18em;text-transform:uppercase;
color:var(--mv);border:1px solid var(--line);border-radius:var(--r-pille);
padding:11px 18px;transition:.28s var(--weich)}
.f-pf:hover{color:var(--iv);border-color:rgba(200,169,110,0.82)}
.f-pfx{font-size:var(--t2);color:var(--stahl2);max-width:46ch}
/* Ganz unten: Kontakt mittig, darunter das Abonnement — beides als
Wort, in derselben stillen Schrift wie «Das Haus» und «Fragen». */
.f-unten{margin-top:34px;padding-top:26px;border-top:1px solid var(--kante);
display:grid;justify-items:center;gap:13px;font-size:var(--t3);
font-weight:400;color:var(--stahl2);text-align:center}
.f-unten a{border-bottom:1px solid var(--kante)}
.f-wort{font-size:var(--t3);font-weight:400;color:var(--stahl2);
background:none;border:none;padding:0;cursor:pointer;font-family:var(--B);
transition:color .4s var(--weich)}
.f-wort:hover{color:var(--signet)}
.f-c{margin-top:6px;font-size:var(--t2);color:var(--stahl2);opacity:.75}
.wink{position:fixed;left:50%;bottom:38px;transform:translate(-50%,24px);z-index:99;
background:var(--ink3);border:1px solid rgba(200,169,110,.35);color:var(--iv);
border-radius:var(--r-pille);box-shadow:var(--schatten);
padding:14px 26px;font-size:var(--t3);opacity:0;pointer-events:none;
transition:.4s var(--weich)}
.wink.an{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;
animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ═══════════════════════════════════════════════════════════
Keine Scrollbalken. Nirgends.
Statt eines Balkens verläuft der untere Rand weich — daran
sieht man, dass noch etwas kommt. Ist man unten angekommen,
steht der Rand wieder scharf.
═══════════════════════════════════════════════════════════ */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
html,body{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
.scrollraum{transition:-webkit-mask-image .45s cubic-bezier(.22,1,.36,1),
mask-image .45s cubic-bezier(.22,1,.36,1)}
.scrollraum.mehr-unten{
-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 52px),transparent 100%);
mask-image:linear-gradient(180deg,#000 calc(100% - 52px),transparent 100%)}
/* Die zwei feinen Striche gibt es nicht mehr. Es bleibt eine
Scrollanzeige: der Saum am Rand. Zwei Anzeigen fuer dieselbe Sache
waren eine zu viel. */
/* ═══════ Fenster und Registrierung ═══════ */
.ov{position:fixed;inset:0;z-index:95;background:rgba(3,4,8,.94);backdrop-filter:blur(18px);
display:none;padding:26px 20px;overflow-y:auto;scrollbar-width:none}
.ov::-webkit-scrollbar{width:0;height:0;display:none}
.ov.an{display:block;animation:ein .34s var(--weich) both}
.ovk{width:min(560px,100%);margin:auto;min-height:calc(100dvh - 52px);display:flex;
flex-direction:column;justify-content:center;position:relative;
animation:ovK .55s var(--weich) both}
@keyframes ovK{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.ovk-i{border:1px solid var(--linie);padding:42px 38px 34px;background:var(--panel);
box-shadow:0 40px 90px rgba(0,0,0,.7)}
@media(max-width:560px){ .ovk-i{padding:32px 22px 28px} }
/* Ein breiteres Fenster fuer die eine lange Seite. */
.ovk.weit{width:min(780px,100%)}
/* ───── Fragen und Hilfe ─────
Die Antworten stecken in . Das kann der Browser allein: kein
JavaScript, kein Neubau, mit der Tastatur bedienbar. */
.fh{margin-top:30px}
.fh-g{margin-bottom:26px}
.fh-gk{font-size:var(--t2);letter-spacing:.24em;text-transform:uppercase;
color:var(--signet);padding-bottom:9px;border-bottom:1px solid var(--kante)}
.fh-f{border-bottom:1px solid var(--linie)}
.fh-q{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
padding:15px 0;cursor:pointer;list-style:none;
font-size:var(--t5);font-weight:400;line-height:1.5;color:rgba(240,236,228,.82);
transition:color .3s var(--weich)}
.fh-q::-webkit-details-marker{display:none}
.fh-q:hover{color:var(--eis)}
.fh-f[open] .fh-q{color:var(--eis)}
/* Das Kreuz wird zum Strich, wenn die Antwort offen steht. */
.fh-z{position:relative;flex:0 0 auto;width:12px;height:12px;margin-top:7px}
.fh-z::before,.fh-z::after{content:'';position:absolute;left:0;top:50%;
width:12px;height:1px;margin-top:-.5px;background:var(--signet);
transition:transform .34s var(--weich),opacity .34s var(--weich)}
.fh-z::after{transform:rotate(90deg)}
.fh-f[open] .fh-z::after{transform:rotate(0deg);opacity:0}
.fh-a{font-size:var(--t4);font-weight:400;line-height:1.78;color:var(--stahl);
padding:0 0 18px;max-width:58ch}
.fh-a .o-fuss{margin-top:16px}
@media(prefers-reduced-motion:reduce){.fh-z::before,.fh-z::after{transition:none}}
.ov-zu{position:fixed;top:22px;right:24px;z-index:3;width:38px;height:38px;
border-radius:50%;
border:1px solid var(--kante);color:var(--stahl2);display:grid;place-items:center;
font-size:var(--t8);line-height:1;background:rgba(5,6,10,.8);transition:.4s var(--weich)}
.ov-zu:hover{color:var(--eis);border-color:var(--signet);transform:rotate(90deg)}
.o-k{font-size:var(--t3);font-weight:400;letter-spacing:.3em;text-transform:uppercase;
color:var(--stahl2)}
.o-t{font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:400;line-height:1.12;
letter-spacing:-.025em;margin-top:10px}
.o-x{font-size:var(--t5);font-weight:400;color:var(--stahl);line-height:1.85;margin-top:15px}
.o-x b{color:var(--signet);font-weight:400}
.o-fuss{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:30px}
.fk{display:block;text-align:center;font-size:var(--t3);font-weight:400;
letter-spacing:.22em;
text-transform:uppercase;color:var(--stahl2);margin:22px 0 9px}
.feld{width:100%;padding:16px 18px;border:1px solid var(--line);background:var(--feld);
border-radius:var(--r-feld);font-size:var(--t5);font-weight:400;color:var(--iv);
text-align:center;transition:.28s var(--weich)}
textarea.feld{text-align:left}
.feld:focus{box-shadow:0 0 36px -12px rgba(200,169,110,.5)}
.feld:focus{outline:none;border-color:var(--signet)}
.feld::placeholder{color:var(--stahl2)}
.fhin{font-size:var(--t3);font-weight:400;color:var(--stahl2);margin-top:10px;
line-height:1.7}
.otrenn{display:flex;align-items:center;gap:16px;margin:30px 0 6px;font-size:var(--t3);
font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--stahl2)}
.otrenn::before,.otrenn::after{content:'';flex:1;height:1px;background:var(--kante)}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:13px 24px;border:1px solid var(--line);border-radius:var(--r-pille);
font-size:var(--t3);font-weight:400;letter-spacing:.2em;text-transform:uppercase;
color:var(--mv);transition:.28s var(--weich)}
.knopf:hover{color:var(--iv);border-color:rgba(200,169,110,0.82)}
.knopf.voll{border-color:var(--gold);background:var(--gold);color:var(--ink)}
.knopf.voll:hover{opacity:.9;color:var(--ink);
box-shadow:0 8px 28px rgba(200,169,110,.22)}
.knopf.gross{padding:16px 34px;border-radius:var(--r-karte)}
.knopf.blank{border:none;color:var(--gdim);padding:12px 4px}
.knopf.blank:hover{color:var(--signet)}
/* ═══ Hinter der Registrierung liegt dasselbe Haus ═══
Vorher stand hier flaches Schwarz, waehrend draussen das Licht atmete.
Jetzt zieht derselbe Glutschein durch — und oben in der Mitte bleibt
als schmale Spur die Fuge der Tuer stehen, durch die man kam. */
.reg{position:fixed;inset:0;z-index:92;background:var(--obsidian);overflow-y:auto;
display:none;scrollbar-width:none;isolation:isolate}
.reg::-webkit-scrollbar{width:0;height:0;display:none}
.reg.an{display:block}
/* WEDER Weichzeichner NOCH Dauerschleife — gemessen 182 ms je Bild
gegen 20 ms. Dieselbe Krankheit wie einst der Glutschein: eine feste,
bildschirmgrosse Flaeche mit filter, die sich jedes Bild bewegt, ist
das Teuerste, was eine Seite haben kann. Die Weichheit kommt jetzt
aus den Verlaeufen selbst — viele Haltepunkte statt einer Unschaerfe. */
.reg::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
opacity:.92;
background:
radial-gradient(74% 52% at 50% -6%,rgba(214,176,112,.20) 0%,
rgba(214,176,112,.115) 30%,rgba(214,176,112,.045) 56%,transparent 78%),
radial-gradient(66% 58% at 92% 52%,rgba(201,107,92,.155) 0%,
rgba(201,107,92,.085) 34%,rgba(201,107,92,.03) 60%,transparent 80%),
radial-gradient(64% 62% at 4% 78%,rgba(142,120,168,.145) 0%,
rgba(142,120,168,.08) 34%,rgba(142,120,168,.028) 60%,transparent 80%),
radial-gradient(58% 44% at 70% 116%,rgba(200,169,110,.12) 0%,
rgba(200,169,110,.06) 38%,transparent 74%);
transform:translate3d(0,0,0)}
/* Die Erinnerung an die Lichtfuge: oben schmal, nach unten ausgelaufen */
.reg::after{content:'';position:fixed;left:50%;top:-14vh;z-index:-1;
width:min(420px,76vw);height:82vh;transform:translate3d(-50%,0,0);
pointer-events:none;opacity:.85;
background:radial-gradient(38% 42% at 50% 14%,rgba(255,238,206,.175) 0%,
rgba(248,214,165,.105) 22%,rgba(226,163,98,.05) 44%,
rgba(160,104,70,.018) 64%,rgba(8,6,10,0) 82%)}
/* Während man hindurchgeht: kein Scrollen, keine eigene Einblendung */
.reg.durchtritt{overflow:hidden;will-change:mask-image}
/* ══ Der Zugang: drei Laufzeiten wie Karten im Etui ══ */
/* ═══ Die Laufzeiten als Karussell ═══
Eine Karte im Bild, die anderen links und rechts daneben. */
.azkar{position:relative;margin-top:16px;padding:0 0 4px}
/* Stehende Karten in einem Etui: die mittlere aufrecht und ganz da,
die Nachbarn zur Seite gedreht und zurückgenommen. */
.azk-fenster{overflow:hidden;padding:18px 0 6px;perspective:1500px;
touch-action:pan-y;cursor:grab}
.azk-fenster:active{cursor:grabbing}
.azk-bahn{display:flex;align-items:stretch;will-change:transform;
transform-style:preserve-3d;
transition:transform .55s cubic-bezier(.22,1,.36,1)}
/* 70 statt 76 Prozent, damit links und rechts wirklich ein Stueck
der Nachbarkarte stehenbleibt: man soll sehen, dass da noch etwas
ist, nicht nur die Punkte darunter lesen. */
.azk-bahn>.az{flex:0 0 70%;min-width:0;margin:0 0;user-select:none;
-webkit-user-select:none;transform-origin:center center;
transition:transform .55s cubic-bezier(.22,1,.36,1),
opacity .5s var(--weich),border-color .4s var(--weich),
box-shadow .5s var(--weich)}
.azk-bahn>.az.mitte{transform:none;opacity:1;z-index:2;
box-shadow:0 30px 70px -30px rgba(0,0,0,.95)}
.azk-bahn>.az.links{transform:scale(.88) rotateY(15deg);
opacity:.5;z-index:1}
.azk-bahn>.az.rechts{transform:scale(.88) rotateY(-15deg);
opacity:.5;z-index:1}
.azk-bahn>.az.links .az-m,.azk-bahn>.az.rechts .az-m{opacity:0}
/* Kein Knopf mehr, sondern eine ganze Seite zum Anfassen: hoch und
breit genug, dass man sie trifft, ohne zu zielen. Ohne Umrahmung —
und ohne backdrop-filter, denn hier ziehen die Karten darunter
vorbei, und eine Filterfläche über Bewegtem ist teuer. */
.azk-pf{position:absolute;top:0;bottom:0;z-index:5;width:clamp(54px,13%,88px);
border:0;background:transparent;color:var(--stahl);
display:grid;place-items:center;cursor:pointer;
transition:color .3s var(--weich);padding:0;-webkit-tap-highlight-color:transparent}
.azk-pf svg{width:22px;height:22px;display:block;position:relative;z-index:2}
.azk-pf.links{left:0}
.azk-pf.rechts{right:0}
/* Die Markierung beim Darüberfahren: ein weicher Schein zur Kante
hin, kein Kasten. */
.azk-pf::before{content:'';position:absolute;inset:0;opacity:0;
transition:opacity .32s var(--weich)}
.azk-pf.links::before{background:linear-gradient(90deg,
rgba(200,169,110,.17),rgba(200,169,110,.04) 55%,transparent)}
.azk-pf.rechts::before{background:linear-gradient(270deg,
rgba(200,169,110,.17),rgba(200,169,110,.04) 55%,transparent)}
.azk-pf:hover:not([disabled])::before,
.azk-pf:focus-visible:not([disabled])::before{opacity:1}
.azk-pf:hover:not([disabled]),
.azk-pf:focus-visible:not([disabled]){color:var(--signet)}
.azk-pf[disabled]{opacity:.18;cursor:default}
/* Die beiden Pfeile zeigen ruhig nach aussen, solange es dort etwas
gibt. Zwei Knoepfe von 38 px — gemessen kostet das nichts. */
.azk-pf:not([disabled]) svg{animation:azWink 2.8s cubic-bezier(.3,.86,.36,1)
infinite}
.azk-pf.rechts:not([disabled]) svg{animation-name:azWinkR}
@keyframes azWink{0%,62%,100%{transform:translate3d(0,0,0);opacity:.8}
30%{transform:translate3d(-4px,0,0);opacity:1}}
@keyframes azWinkR{0%,62%,100%{transform:translate3d(0,0,0);opacity:.8}
30%{transform:translate3d(4px,0,0);opacity:1}}
/* Der Rabatt soll als Rabatt zu erkennen sein: der alte Preis
durchgestrichen daneben, der Nachlass als Schild oben rechts. */
/* Das Rabattschild sitzt, wo sonst «Vom Haus empfohlen» sitzt —
oben auf der Kante. Rechts in der Ecke stiess es auf dem Telefon
mit dem Namen zusammen. */
.az-rab{position:absolute;top:-1px;left:50%;
transform:translate(-50%,-50%);padding:5px 14px;border-radius:999px;
background:var(--ink3);border:1px solid rgba(200,169,110,.55);
color:var(--signet);font-size:11.5px;letter-spacing:.17em;
text-transform:uppercase;white-space:nowrap}
.az-alt{font-size:1.05rem;color:var(--mv);text-decoration-line:line-through;
text-decoration-thickness:1px;letter-spacing:0;margin-right:9px}
/* Die Summe steht klein darunter: verglichen wird je Monat. */
.az-ges{display:block;margin-top:5px;font-size:var(--t2);font-weight:400;
letter-spacing:.1em;color:var(--mv)}
@media(prefers-reduced-motion:reduce){
.azk-pf:not([disabled]) svg,.azk-pf:not([disabled])::after,
.az.best::before,.az.frisch::after,.az.frisch .az-n,
.az.frisch .az-p,.az.frisch .az-p>*,.az.frisch .az-mo,.az.frisch .az-ges,
.az.frisch .az-u,.az.frisch .az-h,.az.frisch .az-l{animation:none}}
/* Nur Euro. Darunter steht, was es je Monat bedeutet. */
.az-mo{display:block;margin-top:7px;font-size:var(--t3);font-weight:400;
color:var(--stahl2);letter-spacing:.04em}
.azk-punkte{display:flex;justify-content:center;gap:8px;margin-top:15px}
.azk-punkte i{width:5px;height:5px;border-radius:50%;
background:rgba(240,236,228,.18);transition:.34s var(--weich)}
.azk-punkte i.an{background:var(--signet);transform:scale(1.35)}
/* Laufzeit und Kündigung — Pflicht unmittelbar vor der Bestellung */
.abpf{margin:24px 0 0;padding:15px 17px;border-radius:var(--r-feld);
border:1px solid rgba(200,169,110,.2);background:rgba(0,0,0,.24);
display:grid;gap:5px}
.abpf-k{font-size:var(--t1);letter-spacing:.24em;text-transform:uppercase;
color:var(--signet)}
.abpf-t{font-size:var(--t3);line-height:1.65;color:var(--stahl2)}
@media(max-width:420px){.azk-pf{width:33px;height:33px}
.azk-pf.links{left:5px}.azk-pf.rechts{right:5px}
.azk-bahn>.az{padding-left:46px;padding-right:46px}}
.az{position:relative;display:flex;flex-direction:column;align-items:center;
padding:30px 20px 24px;border:1px solid var(--line);border-radius:var(--r-karte);
background:var(--karte);text-align:center;transition:.38s var(--weich)}
.az:hover{transform:translateY(-3px);border-color:rgba(200,169,110,0.82)}
.az.an{border-color:var(--gold);background:var(--ink3);
box-shadow:0 16px 46px -18px rgba(200,169,110,.5)}
/* Die empfohlene Karte glimmt. Nur die Deckkraft einer eigenen
Ebene bewegt sich — ein Schatten, der sich jedes Bild aendert,
waere Malarbeit. */
.az.best{border-color:rgba(200,169,110,0.82)}
/* z-index:-1, damit der Schein UNTER der Karte liegt. Mit 0 legt er
sich ueber den Text — und «.az.best>*{position:relative}» als
Gegenmittel schiebt das absolut gesetzte Schild aus seiner Ecke. */
.az.best::before{content:'';position:absolute;inset:-1px;border-radius:inherit;
pointer-events:none;z-index:-1;
box-shadow:0 0 58px -4px rgba(200,169,110,.65);
opacity:.4;animation:azGlut 4.6s ease-in-out infinite}
@keyframes azGlut{0%,100%{opacity:.34}50%{opacity:1}}
/* ── Die ankommende Karte stellt sich vor ── */
.az.frisch::after{content:'';position:absolute;inset:0;border-radius:inherit;
pointer-events:none;z-index:2;opacity:0;
background:linear-gradient(104deg,transparent 34%,
rgba(244,226,186,.26) 50%,transparent 66%);
animation:azLicht 1.05s var(--weich) 1}
@keyframes azLicht{0%{opacity:0;transform:translate3d(-120%,0,0)}
16%,78%{opacity:1}
100%{opacity:0;transform:translate3d(120%,0,0)}}
.az.frisch .az-n{animation:azName .62s var(--weich) both}
@keyframes azName{from{opacity:0;transform:translate3d(0,-.26em,0);
letter-spacing:.14em}
to{opacity:1;transform:none;letter-spacing:-.016em}}
.az.frisch .az-p{overflow:hidden}
.az.frisch .az-p>*{animation:azRoll .66s var(--weich) .1s both}
.az.frisch .az-p{animation:azRollW .66s var(--weich) .1s both}
@keyframes azRoll{from{opacity:0;transform:translate3d(0,.8em,0)}
to{opacity:1;transform:none}}
@keyframes azRollW{from{opacity:0;transform:translate3d(0,.8em,0)}
to{opacity:1;transform:none}}
.az.frisch .az-mo,.az.frisch .az-ges,.az.frisch .az-u,.az.frisch .az-h{
animation:azRoll .6s var(--weich) both}
.az.frisch .az-mo{animation-delay:.2s}
.az.frisch .az-ges{animation-delay:.27s}
.az.frisch .az-u{animation-delay:.34s}
.az.frisch .az-h{animation-delay:.41s}
.az.frisch .az-l{animation:azStrich .7s var(--weich) .14s both}
@keyframes azStrich{from{width:0}to{width:30px}}
.az.an.frisch .az-l{animation-name:azStrichAn}
@keyframes azStrichAn{from{width:0}to{width:54px}}
/* ── Die Pfeile ──
Ein Ring geht von ihnen aus, und der Haken selbst tritt vor. */
.azk-pf::after{content:'';position:absolute;inset:-1px;border-radius:50%;
border:1px solid var(--signet);pointer-events:none;opacity:0}
.azk-pf:not([disabled])::after{animation:azRing 2.8s cubic-bezier(.3,.86,.36,1)
infinite}
@keyframes azRing{0%{transform:scale(1);opacity:.65}
58%,100%{transform:scale(1.85);opacity:0}}
.az-m{position:absolute;top:-1px;left:50%;transform:translate(-50%,-50%);
padding:5px 14px;border-radius:999px;background:var(--gold);color:var(--ink);
font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap}
.az-n{font-family:var(--D);font-size:1.5rem;line-height:1;color:var(--iv)}
.az.an .az-n{color:var(--gold)}
.az-l{display:block;width:30px;height:1px;margin:13px 0;background:var(--line);
transition:.38s var(--weich)}
.az.an .az-l{width:54px;background:var(--gold)}
.az-p{display:flex;align-items:baseline;gap:6px;font-size:2.1rem;font-weight:400;
line-height:1;letter-spacing:-.02em;color:var(--iv)}
.az-p i{font-style:normal;font-size:.86rem;color:var(--gdim);letter-spacing:.04em}
.az-u{margin-top:11px;font-size:var(--t3);color:var(--mv)}
.az-h{margin-top:16px;padding-top:13px;border-top:1px solid var(--line2);width:100%;
font-size:var(--t2);letter-spacing:.14em;text-transform:uppercase;color:var(--gdim)}
.az.an .az-h{color:var(--gold)}
/* Die kostenlose Stufe liegt ruhig darunter */
.azfrei{margin-top:14px}
.azf{display:flex;align-items:center;gap:20px;width:100%;padding:20px 22px;
border:1px dashed var(--line);border-radius:var(--r-karte);background:none;
text-align:left;transition:.32s var(--weich)}
.azf:hover{border-color:rgba(200,169,110,0.82)}
.azf.an{border-style:solid;border-color:var(--gold);background:var(--ink3)}
.azf-h{flex:1;min-width:0}
.azf-h b{display:block;font-weight:400;font-size:var(--t6);color:var(--iv)}
.azf-h>span{display:block;margin-top:6px;font-size:var(--t4);color:var(--mv);
line-height:1.7}
/* Eine Einordnung, kein Verbotskatalog — und auch kein Schild:
als Schild sah es aus wie ein zweiter Knopf in einem Knopf. */
.azf-n{display:block;margin-top:9px;font-size:var(--t3);font-weight:400;
letter-spacing:.02em;color:var(--gdim)}
.azf-p{flex:0 0 auto;font-size:1.5rem;font-weight:400;color:var(--mv);
letter-spacing:-.01em}
.azf.an .azf-p{color:var(--gold)}
.azhaken{margin-top:30px;padding-top:6px}
@media(max-width:560px){
.az{padding:26px 16px 20px}.az-p{font-size:1.8rem}
.azf{flex-direction:column;align-items:flex-start;gap:10px}
}
/* ── Die drei Aufnahmen ── */
.kam-frist{position:absolute;top:12px;right:14px;z-index:4;
padding:5px 12px;border-radius:999px;border:1px solid var(--linie);
background:rgba(8,6,10,.76);color:var(--stahl);
font-size:var(--t2);letter-spacing:.14em;
transition:color .3s var(--weich),border-color .3s var(--weich)}
.kam-frist.knapp{color:var(--signet);border-color:rgba(200,169,110,0.82)}
.kam.blitz::after{content:'';position:absolute;inset:0;z-index:5;
background:rgba(255,246,226,.5);animation:kamBlitz .24s ease-out forwards}
@keyframes kamBlitz{to{opacity:0}}
.austreif{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
margin-top:14px}
.aust-b{flex:1 1 90px;display:flex;align-items:center;gap:9px;
padding:9px 12px;border:1px solid rgba(200,169,110,.3);
border-radius:var(--r-feld);background:rgba(10,7,5,.4)}
.aust-n{width:19px;height:19px;flex:0 0 auto;display:grid;place-items:center;
border-radius:50%;background:var(--gold);color:var(--ink);
font-size:11.5px}
.aust-k{font-size:var(--t3);font-weight:400;color:var(--stahl2)}
.aust-z{flex:1 1 100%;font-size:var(--t3);font-weight:400;color:var(--mv)}
.aust-z b{color:var(--signet);letter-spacing:.14em}
@media(prefers-reduced-motion:reduce){.kam.blitz::after{animation:none;opacity:0}}
/* ── Der Regler zwischen abwartend und zugehend ── */
.regler{margin-top:22px;padding:20px 22px;border:1px solid var(--linie);
border-radius:var(--r-karte);background:rgba(10,7,5,.34)}
.rg-k{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
font-size:var(--t2);letter-spacing:.16em;text-transform:uppercase;
color:var(--mv);margin-bottom:15px}
.rg-k b{font-family:var(--D);font-size:1.12rem;font-weight:400;
letter-spacing:.01em;text-transform:none;color:var(--signet)}
.rg-i{-webkit-appearance:none;appearance:none;width:100%;height:2px;
border-radius:2px;background:linear-gradient(90deg,
rgba(170,159,178,.5),rgba(200,169,110,.75));outline:none;cursor:pointer}
.rg-i::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
border-radius:50%;background:var(--gold);cursor:grab;
box-shadow:0 0 0 1px rgba(10,7,5,.8),0 6px 20px -4px rgba(200,169,110,.7);
transition:transform .2s var(--weich)}
.rg-i::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}
.rg-i::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;
background:var(--gold);cursor:grab;
box-shadow:0 0 0 1px rgba(10,7,5,.8),0 6px 20px -4px rgba(200,169,110,.7)}
.rg-i:focus-visible{box-shadow:0 0 0 3px rgba(200,169,110,.3)}
.rg-sk{display:flex;justify-content:space-between;margin-top:11px;padding:0 9px}
.rg-sk i{width:1px;height:6px;background:var(--linie)}
/* Kamera oder Galerie */
.bqu{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.bq{padding:24px 16px;border:1px solid var(--line);border-radius:var(--r-karte);
background:var(--karte);text-align:center;transition:.3s var(--weich)}
.bq:hover{border-color:rgba(200,169,110,0.82);background:var(--ink3);
transform:translateY(-2px)}
.bq-i{display:grid;place-items:center;width:40px;height:40px;margin:0 auto 12px;
color:var(--gold)}
.bq-i svg{width:100%;height:100%}
.bq b{display:block;font-weight:400;font-size:var(--t6);color:var(--iv)}
.bq span{display:block;margin-top:5px;font-size:var(--t3);color:var(--mv)}
/* Die Aufnahme läuft */
.kam.laeuft{border-color:rgba(200,169,110,0.82);
box-shadow:0 0 54px -14px rgba(200,169,110,.5)}
.kam.laeuft .kam-r{animation:kamPuls 2.2s var(--weich) infinite}
@keyframes kamPuls{0%,100%{opacity:.5;transform:scale(1)}
50%{opacity:1;transform:scale(1.014)}}
.kam.fertig{border-color:rgba(127,176,138,0.82)}
.kam-t{transition:opacity .4s var(--weich)}
/* Der Weiter-Knopf läuft mit, solange der echte noch ausserhalb des Bildes ist. */
.regflieg{position:fixed;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vh,36px);
z-index:96;display:inline-flex;align-items:center;gap:10px;
padding:16px 26px;border:1px solid var(--gold);border-radius:var(--r-karte);
background:var(--gold);color:var(--ink);font-size:var(--t3);font-weight:400;
letter-spacing:.2em;text-transform:uppercase;
box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 40px -12px rgba(200,169,110,.5);
opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;
transition:.42s var(--weich)}
.regflieg.an{opacity:1;transform:none;pointer-events:auto}
.regflieg:hover{opacity:.92}
.regflieg svg{width:17px;height:17px}
@media(max-width:560px){
.regflieg{right:14px;bottom:14px;padding:14px 20px;font-size:var(--t2)}
}
/* Zwei Wege im Vertragsfenster */
.vwahl{display:grid;gap:10px;margin-top:22px}
.vk{display:block;width:100%;text-align:left;padding:18px 20px;
border:1px solid var(--line);border-radius:var(--r-karte);background:var(--karte);
transition:.3s var(--weich)}
.vk:hover{border-color:rgba(200,169,110,0.82);background:var(--ink3)}
.vk b{display:block;font-weight:400;font-size:var(--t6);color:var(--iv)}
.vk span{display:block;margin-top:6px;font-size:var(--t4);font-weight:400;
color:var(--mv);line-height:1.7}
.reg.durchtritt .reg-kopf{opacity:0;transition:opacity .4s var(--weich)}
/* KEIN backdrop-filter. Die Leiste klebt oben, der Schritt scrollt
darunter durch — ein Weichzeichner muesste also in jedem Bild neu
rechnen, was gerade durchlaeuft. Stattdessen deckt der Verlauf
etwas mehr; den weichen Abschluss macht weiter die Maske. */
.reg-kopf{position:sticky;top:0;z-index:5;
background:linear-gradient(180deg,rgba(5,6,10,.985),rgba(5,6,10,.95) 52%,
rgba(5,6,10,.76) 78%,rgba(5,6,10,0));
-webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 100%);
mask-image:linear-gradient(180deg,#000 76%,transparent 100%)}
.reg-ki{max-width:640px;margin:0 auto;padding:18px 22px 0}
/* Das Logo steht in der Registrierung an genau derselben Stelle wie auf
der Startseite. Der Zurück-Knopf rückt dafür nach rechts — nie davor. */
.reg-kz{display:flex;align-items:center;gap:14px;margin-bottom:15px}
/* ── Das Logo ist der Ausgang ──
Es soll das sagen, ohne es dauernd zu sagen: beim ersten Schritt
zeigt es sich einmal von selbst (ein Licht laeuft darueber, ein
Strich zieht sich darunter, das Wort kommt dazu) und zieht sich
dann zurueck. Danach kommt es auf Beruehrung wieder. */
.reg-kz .marke{position:relative;background:none;border:none;padding:0 0 5px;
cursor:pointer;overflow:visible;
transition:opacity .3s var(--weich)}
.reg-kz .marke:hover{opacity:.9}
/* Der Strich: immer da, aber nur geahnt. */
.rm-l{position:absolute;left:0;right:0;bottom:0;height:1px;display:block;
background:var(--signet);transform-origin:0 50%;transform:scaleX(0);
opacity:.5;transition:transform .7s var(--weich),opacity .5s var(--weich)}
.reg-kz .marke:hover .rm-l,.reg-kz .marke:focus-visible .rm-l,
.reg-kz .marke.zeigt .rm-l{transform:scaleX(1);opacity:1}
/* Das Wort steht rechts daneben und schiebt nichts weg. */
.rm-weg{position:absolute;left:calc(100% + 13px);top:50%;z-index:2;
display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
font-family:var(--B);font-size:var(--t2);font-weight:400;
letter-spacing:.2em;text-transform:uppercase;color:var(--signet);
opacity:0;transform:translate3d(-7px,-50%,0);pointer-events:none;
transition:opacity .45s var(--weich),transform .55s var(--weich)}
.rm-weg svg{width:13px;height:13px;flex:0 0 auto}
.reg-kz .marke:hover .rm-weg,.reg-kz .marke:focus-visible .rm-weg,
.reg-kz .marke.zeigt .rm-weg{opacity:1;transform:translate3d(0,-50%,0)}
/* Und einmal laeuft ein Licht ueber das Wort — dasselbe Licht wie
ueber der Codeleiste auf der Startseite. */
.rm-w{position:relative;display:inline-block}
.rm-w::after{content:'';position:absolute;inset:-2px -6px;pointer-events:none;
opacity:0;background:linear-gradient(104deg,transparent 36%,
rgba(240,220,176,.3) 50%,transparent 64%)}
.reg-kz .marke.zeigt .rm-w::after{animation:rmLicht 1.3s var(--weich) .25s 1}
@keyframes rmLicht{0%{opacity:0;transform:translate3d(-130%,0,0)}
16%,76%{opacity:1}
100%{opacity:0;transform:translate3d(130%,0,0)}}
@media(max-width:560px){
/* Auf dem Telefon ist neben dem Logo kein Platz fuer das Wort —
dort bleiben Licht und Strich. */
.rm-weg{display:none}}
@media(prefers-reduced-motion:reduce){
.reg-kz .marke.zeigt .rm-w::after{animation:none}}
/* Die Rückfrage */
.abfr{text-align:center;padding:4px 2px}
.abfr-t{font-family:var(--D);font-weight:400;font-size:1.5rem;
color:var(--eis);margin:0 0 10px}
.abfr-x{font-size:var(--t3);font-weight:400;line-height:1.7;
color:var(--stahl2);margin:0 0 24px}
.abfr-k{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.reg-kz .marke{order:1}
.reg-kz .reg-s{order:2}
.reg-kz .rzurueck{order:3;margin-left:auto}
.rzurueck{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 13px;
border-radius:var(--r-pille);
border:1px solid var(--kante);color:var(--stahl2);font-size:var(--t3);font-weight:400;
letter-spacing:.16em;text-transform:uppercase;transition:.4s var(--weich)}
.rzurueck:hover{border-color:var(--signet);color:var(--signet)}
.rzurueck svg{width:14px;height:14px;flex-shrink:0}
@media(max-width:520px){ .rzurueck span{display:none} .rzurueck{padding:10px 12px} }
.reg-s{margin-left:auto;font-size:var(--t3);font-weight:400;letter-spacing:.2em;
text-transform:uppercase;color:var(--stahl2)}
.balken{display:flex;gap:3px;padding-bottom:15px}
/* Jedes Stueck fuellt sich von links nach rechts, wenn es erreicht ist.
Dafuer duerfen die Stuecke NICHT bei jedem Zeichnen neu gebaut werden —
ein frisches Element hat keinen Zustand, von dem aus es uebergehen
koennte. regMalen() haengt darum nur noch die Klassen um. */
.bs{position:relative;flex:1;height:2px;border-radius:2px;
background:var(--line2);overflow:hidden}
.bs::after{content:'';position:absolute;inset:0;border-radius:2px;
transform-origin:0 50%;transform:scaleX(0);background:var(--signet2);
transition:transform .66s cubic-bezier(.3,.86,.36,1)}
.bs.hab::after{transform:scaleX(1)}
.bs.da::after{transform:scaleX(.46);background:var(--signet);
box-shadow:0 0 14px rgba(217,201,161,.75)}
.reg-b{max-width:640px;margin:0 auto;padding:52px 22px 96px;text-align:center;
transition:max-width .6s var(--weich)}
.reg-b.weit{max-width:880px}
.reg-b{opacity:1}
/* Vorwaerts kommt der Schritt von rechts herein, rueckwaerts von links.
Die Richtung steht in RUECK — so fuehlt sich «zurueck» auch wie
zurueck an. Animiert wird NUR beim echten Schrittwechsel. */
.reg-b.neu>*{opacity:0;animation:stRein .62s var(--weich) forwards}
/* Die Teile kommen in Lesereihenfolge, nicht als eine Platte. Die
Abstaende werden nach hinten kleiner, sonst wartet man auf das Feld. */
.reg-b.neu>*:nth-child(2){animation-delay:.05s}
.reg-b.neu>*:nth-child(3){animation-delay:.09s}
.reg-b.neu>*:nth-child(4){animation-delay:.12s}
.reg-b.neu>*:nth-child(5){animation-delay:.145s}
.reg-b.neu>*:nth-child(n+6){animation-delay:.165s}
/* Die Schrittzahl blaettert um. */
.reg-s.dreht{animation:zahlAuf .5s var(--weich) both}
.reg-s.dreht.rueck{animation-name:zahlAb}
@keyframes zahlAuf{from{opacity:0;transform:translate3d(0,.55em,0)}
to{opacity:1;transform:none}}
@keyframes zahlAb{from{opacity:0;transform:translate3d(0,-.55em,0)}
to{opacity:1;transform:none}}
.reg-b.neu.rueck>*{animation-name:stZurueck}
.reg-b.neu>*:nth-child(1){animation-delay:.04s}
.reg-b.neu>*:nth-child(2){animation-delay:.11s}
.reg-b.neu>*:nth-child(3){animation-delay:.18s}
.reg-b.neu>*:nth-child(4){animation-delay:.25s}
.reg-b.neu>*:nth-child(5){animation-delay:.31s}
.reg-b.neu>*:nth-child(6){animation-delay:.36s}
.reg-b.neu>*:nth-child(n+7){animation-delay:.41s}
@keyframes stRein{from{opacity:0;transform:translate3d(34px,14px,0)}
to{opacity:1;transform:none}}
@keyframes stZurueck{from{opacity:0;transform:translate3d(-34px,10px,0)}
to{opacity:1;transform:none}}
@keyframes sRein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.st{font-size:clamp(1.75rem,4.2vw,2.5rem);font-weight:400;line-height:1.12;
letter-spacing:-.028em;margin:0 0 18px;position:relative;padding-bottom:20px}
/* eine feine Goldlinie unter der Frage, sie zieht sich auf */
.st::after{content:'';position:absolute;left:50%;bottom:0;height:1px;width:0;
transform:translateX(-50%);
background:linear-gradient(90deg,transparent,var(--gold),transparent);
animation:stLinie 1.1s var(--weich) .25s forwards}
@keyframes stLinie{to{width:132px}}
.sx{font-size:var(--t5);font-weight:400;color:var(--mv);line-height:1.85;
margin:0 auto 34px;max-width:34em}
.sx b{color:var(--signet);font-weight:400}
.wahl{display:grid;gap:9px}
/* Eine Wahl mit Schublade: das Codefeld klappt unter der Karte auf. */
.wg{display:block}
.wg .wk{border-color:var(--kante)}
.wg.an .wk{border-color:var(--signet);background:var(--kante2)}
.wg.an .wk-i{color:var(--signet)}
.wg-aus{display:grid;grid-template-rows:0fr;opacity:0;
transition:grid-template-rows .5s var(--weich),opacity .35s var(--weich)}
.wg-aus>.wg-i{overflow:hidden;min-height:0}
.wg.an .wg-aus{grid-template-rows:1fr;opacity:1}
.wg-i{padding:0 2px}
.wg.an .wg-i{padding:16px 2px 18px}
.wk{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;
padding:24px 22px;border:1px solid var(--line);border-radius:var(--r-karte);
background:var(--karte);text-align:center;transition:.32s var(--weich)}
.wk:hover{transform:translateY(-2px)}
.wk:hover{border-color:var(--linie)}
.wk.an{border-color:var(--signet);background:var(--kante2)}
.wk-i{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;
color:var(--stahl2);transition:.4s var(--weich)}
.wk-i svg{width:19px;height:19px}
.wk.an .wk-i{color:var(--signet)}
.wk-h{flex:1;min-width:0}
.wk-h b{display:block;font-weight:400;font-size:var(--t6);line-height:1.35;
margin-bottom:5px}
.wk-h span{display:block;font-size:var(--t4);font-weight:400;color:var(--stahl2);
line-height:1.7}
.marken{display:flex;gap:9px;flex-wrap:wrap}
.marken.mitte{justify-content:center}
.mk{padding:12px 20px;border:1px solid var(--line);border-radius:var(--r-pille);
font-size:var(--t5);font-weight:400;
color:var(--stahl2);transition:.35s var(--weich)}
.mk:hover{border-color:var(--linie);color:var(--eis)}
.mk.an{color:var(--signet);border-color:var(--signet)}
.karten{display:grid;gap:8px;justify-content:center;
grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.kz{display:block;padding:17px 15px;border-radius:var(--r-feld);
border:1px solid var(--line2);text-align:center;transition:.35s var(--weich);
opacity:1;position:relative}
.kz:hover{transform:translateY(-2px)}
@keyframes kzRein{to{opacity:1}}
.kz:hover{border-color:var(--linie);background:var(--panel)}
.kz.an{border-color:var(--signet);background:var(--kante2)}
.kz-h{display:block;width:5px;height:5px;margin:11px auto 0;border-radius:50%;
background:var(--line2);font-size:0;color:transparent;transition:.35s var(--weich);
--alt:1}
.kz.an .kz-h{background:var(--gold);box-shadow:0 0 12px 2px rgba(200,169,110,.6)}
.kz-h-alt{width:7px;height:7px;flex-shrink:0;margin-top:9px;background:var(--kante);
transition:.3s}
.kz.an .kz-h{background:var(--signet)}
.kz-t{flex:1;min-width:0}
.kz-t b{display:block;font-weight:400;font-size:var(--t5);line-height:1.4}
.kz-t i{display:block;font-style:normal;font-size:var(--t3);font-weight:400;
color:var(--stahl2);line-height:1.6;margin-top:5px}
.dat{display:flex;align-items:center;gap:8px}
.dat-f{width:76px;text-align:center;letter-spacing:.12em;border-radius:var(--r-klein)}
.dat-j{width:108px}
.dat-p{color:var(--stahl2);font-size:var(--t6)}
#regWeiter[hidden],#regFehler[hidden],#regOffen[hidden]{display:none}
/* Leise, nicht rot: was im Schritt noch fehlt */
.offen{margin-top:20px;font-size:var(--t4);font-weight:400;color:var(--gdim);
line-height:1.7}
.wtr{animation:wtrRein .34s var(--weich) both}
@keyframes wtrRein{from{opacity:0;transform:translateY(7px)}}
body.schwindet{opacity:0;transition:opacity .6s var(--weich)}
.mehr{margin-top:12px;width:100%;padding:14px;border:1px solid var(--kante);
color:var(--stahl2);font-size:var(--t3);font-weight:400;letter-spacing:.18em;
text-transform:uppercase;transition:.4s var(--weich)}
.mehr:hover{border-color:var(--signet);color:var(--signet)}
.gb{margin-top:18px;padding:19px 21px;border:1px solid var(--line);
border-radius:var(--r-feld);background:var(--ink3);
display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.gb-a{font-size:var(--t10);font-weight:400;letter-spacing:-.02em}
.pwr{position:relative}
.pwr .feld{padding-right:58px}
.pwk{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;
border-radius:50%;
display:grid;place-items:center;color:var(--stahl2);transition:.3s}
.pwk:hover{color:var(--signet)}
.pwk svg{width:19px;height:19px}
/* Der Vorschlagkasten muss über den nachfolgenden Hinweisen liegen.
Die gestaffelte Einblendung gibt jedem Geschwister einen eigenen
Stapelkontext — darum hier ausdrücklich nach vorn. */
.ortfeld{position:relative;z-index:30}
.ortvor{position:absolute;left:0;right:0;top:calc(100% - 1px);z-index:20;display:none;
border:1px solid var(--linie);background:var(--panel);
box-shadow:0 30px 60px rgba(0,0,0,.7)}
.ortvor.an{display:block}
.ovz{display:block;width:100%;padding:13px 18px;border-radius:var(--r-klein);
text-align:center;font-size:var(--t5);
font-weight:400;color:var(--stahl);transition:.2s}
.ovz:hover{background:var(--kante2);color:var(--signet)}
.bgitter{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.bf{aspect-ratio:3/4;border:1px dashed var(--line);border-radius:var(--r-feld);
overflow:hidden;display:grid;place-items:center;
color:var(--stahl2);font-size:var(--t3);font-weight:400;letter-spacing:.18em;
text-transform:uppercase;transition:.4s var(--weich);position:relative;overflow:hidden;
background:var(--panel)}
.bf:hover{border-color:var(--signet);color:var(--signet)}
.bf.voll{border-style:solid;border-color:var(--kante)}
.bf.voll svg{position:absolute;inset:0;width:100%;height:100%}
.bf-m{position:absolute;left:9px;top:9px;z-index:2;font-size:var(--t2);font-weight:400;
letter-spacing:.16em;color:var(--signet);padding:4px 9px;background:rgba(5,6,10,.8)}
.kam{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);
border-radius:var(--r-karte);
background:var(--panel);display:grid;place-items:center}
.kam canvas{position:absolute;inset:0;width:100%;height:100%}
.kam-r{position:absolute;inset:20px;border:1px dashed rgba(217,201,161,.42);
pointer-events:none;animation:atmen 3.4s ease-in-out infinite}
@keyframes atmen{0%,100%{opacity:.45;inset:20px}50%{opacity:.95;inset:15px}}
.kam-t{position:relative;z-index:2;text-align:center;font-size:var(--t4);font-weight:400;
color:var(--stahl2);padding:0 28px;line-height:1.8}
.kam-t b{display:block;font-size:var(--t9);font-weight:400;color:var(--eis);
margin-bottom:9px;letter-spacing:-.02em}
.kamtun{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px}
.pz{display:flex;align-items:center;gap:22px;width:100%;padding:20px 22px;
border-radius:var(--r-karte);text-align:left;
border:1px solid var(--kante);background:var(--panel);text-align:left;
transition:.4s var(--weich)}
.pz:hover{border-color:var(--linie)}
.pz.an{border-color:var(--signet);background:var(--kante2)}
.pz.gratis{border-style:dashed}
.pz-n{flex:1;min-width:0}
.pz-n b{display:block;font-weight:400;font-size:var(--t7);line-height:1.3}
.pz-n span{display:block;font-size:var(--t4);font-weight:400;color:var(--stahl2);
margin-top:5px;line-height:1.65}
.pz-nein{display:block;font-size:var(--t3);font-weight:400;color:var(--stahl2);
margin-top:9px;line-height:1.7;text-decoration:line-through;
text-decoration-color:rgba(94,104,128,0.82)}
.pz-p{flex:0 0 clamp(110px,30%,164px);text-align:left;order:-1;
border-right:1px solid var(--line);padding-right:18px;align-self:stretch;
display:flex;flex-direction:column;justify-content:center}
.pz-p b{display:block;font-size:clamp(1.4rem,3.4vw,2.05rem);font-weight:400;
line-height:1.08;letter-spacing:-.015em;white-space:nowrap;
color:var(--signet);letter-spacing:-.02em}
.pz-p span{display:block;font-size:var(--t3);font-weight:400;color:var(--stahl2);
margin-top:6px}
.wahrung{display:inline-flex;border:1px solid var(--kante);margin-bottom:16px}
.wahrung button{padding:9px 20px;border-radius:var(--r-pille);font-size:var(--t3);
font-weight:400;letter-spacing:.18em;
text-transform:uppercase;color:var(--stahl2);transition:.35s var(--weich)}
.wahrung button.an{background:var(--ink4);color:var(--gold);
border-color:rgba(200,169,110,0.82)}
.hin{margin-top:24px;padding:16px 18px;border-radius:var(--r-feld);
background:var(--ink3);border:1px solid var(--line2);
font-size:var(--t4);font-weight:400;color:var(--mv);line-height:1.8}
.hin b{color:var(--signet);font-weight:400}
.fehler{margin-top:24px;padding:16px 20px;border-radius:var(--r-feld);
border:1px solid rgba(201,107,92,.4);background:rgba(201,107,92,.08);
color:#e6b0a4;font-size:var(--t5);font-weight:400;line-height:1.8}
.zu{display:flex;gap:14px;align-items:flex-start;width:100%;padding:16px 4px;
text-align:left;border-top:1px solid var(--line2);max-width:30em;margin:0 auto}
.zu:first-of-type{border-top:none}
.zu-h{flex:0 0 19px;width:19px;height:19px;border:1px solid var(--line);
border-radius:6px;display:grid;
place-items:center;font-size:11.5px;color:transparent;margin-top:3px;transition:.3s}
.zu.an .zu-h{border-color:var(--signet);color:var(--signet)}
.zu-t{flex:1;font-size:var(--t5);font-weight:400;color:var(--stahl2);line-height:1.8}
.zu-t a{color:var(--signet);border-bottom:1px solid var(--linie)}
.stun{display:flex;gap:12px;align-items:center;justify-content:center;
flex-wrap:wrap;margin-top:44px;padding-top:30px;border-top:1px solid var(--line2)}
.zurueck{order:-1}
/* Der Hinweis auf die Bestätigungsmail — kein Hinweiskästchen am
Rand, sondern eine Zeile mit Gewicht: ohne sie geht es nicht weiter. */
.bestmail{display:flex;gap:14px;align-items:flex-start;text-align:left;
max-width:32em;margin:0 auto;padding:15px 18px;
border:1px solid rgba(200,169,110,.34);border-radius:var(--r-feld);
background:rgba(200,169,110,.07)}
.bm-i{flex:0 0 auto;width:22px;height:22px;color:var(--signet);margin-top:2px}
.bm-i svg{width:100%;height:100%;display:block}
.bm-t{font-size:var(--t3);font-weight:400;line-height:1.72;color:var(--stahl2)}
.bm-t b{display:block;color:var(--eis);font-weight:400;margin-bottom:3px}
.bm-t i{font-style:normal;color:var(--signet)}
.fertig{text-align:center;padding:30px 0 12px}
/* Das Siegel. Der Rahmen zieht sich selbst, dann faellt der Haken
hinein — eine Bewegung, keine zwei. Eckig wie das ganze Haus:
ein kreisender Ring um ein Quadrat schnitte es nur an vier Punkten. */
.fertig-i{width:88px;height:88px;margin:0 auto 30px;display:block;
color:var(--signet)}
.fertig-i svg{display:block;width:88px;height:88px;overflow:visible}
.f-rahmen{stroke-dasharray:344;stroke-dashoffset:344;
animation:fZug 1.05s cubic-bezier(.3,.86,.36,1) .12s forwards}
.f-haken{stroke-dasharray:36;stroke-dashoffset:36;
animation:fZug .62s cubic-bezier(.3,.86,.36,1) .78s forwards}
@keyframes fZug{to{stroke-dashoffset:0}}
/* Ein einziger Glanz laeuft hinterher ueber das Siegel. */
.fertig-i{position:relative;overflow:hidden}
.fertig-i::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(104deg,transparent 38%,rgba(217,201,161,.26) 50%,
transparent 62%);transform:translate3d(-130%,0,0);
animation:fGlanz 1.1s cubic-bezier(.3,.86,.36,1) 1.3s forwards}
@keyframes fGlanz{to{transform:translate3d(130%,0,0)}}
@media(prefers-reduced-motion:reduce){
.f-rahmen,.f-haken{animation:none;stroke-dashoffset:0}
.fertig-i::after{animation:none;opacity:0}
.reg-b.neu>*{animation:none;opacity:1}
.reg-s.dreht{animation:none}}
.wink{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(16px);
padding:15px 26px;background:var(--panel);border:1px solid var(--linie);
font-size:var(--t4);font-weight:400;opacity:0;z-index:120;transition:.4s var(--weich);
pointer-events:none;box-shadow:0 24px 60px rgba(0,0,0,.7);max-width:90vw;
text-align:center}
.wink.an{opacity:1;transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){
*{animation-duration:.01ms!important;transition-duration:.01ms!important}
.sw-t b,.sw-x,.schwellraum,.codeleiste,.runter,.kz,.wtr{opacity:1;animation:none;
transform:none;filter:none}
.glutschein{animation:none}
}
/* ═══════════════════════════════════════════════════════════
DER VORHANG — zwei y werden zum Namen
Das Zeichen sind die zwei y von yes!mary: der erste und der letzte
Buchstabe. Ineinandergestellt, das zweite gespiegelt, ergeben sie ein
Monogramm. Beim Hereinkommen dreht sich das zweite zurueck, beide
schieben sich an ihren Platz, und dazwischen treten die uebrigen
Buchstaben hervor. Wie weit sie zu schieben sind, misst das Blatt
selbst — die Zahl wird EINMAL gesetzt, nicht in jedem Bild.
═══════════════════════════════════════════════════════════ */
.vorhang{position:fixed;inset:0;z-index:200;background:var(--obsidian);
display:grid;place-items:center;
transition:opacity .72s var(--weich),visibility 0s linear .72s}
.vorhang.weg{opacity:0;visibility:hidden;pointer-events:none}
.vh-wort{font-family:var(--D);font-weight:400;line-height:1;
font-size:clamp(3.2rem,13vw,8.5rem);letter-spacing:.012em;
color:var(--eis);white-space:nowrap;display:flex;align-items:baseline}
.vh-y{display:inline-block;transform-origin:50% 56%;will-change:transform}
.vh-r,.vh-b{display:inline-block;opacity:0;transform:translate3d(0,14px,0);
will-change:transform,opacity}
.vh-b{color:var(--signet)}
/* Die Fuge unter dem Namen — sie zieht auf, wenn das Wort steht. */
.vh-linie{position:absolute;left:50%;bottom:clamp(90px,16vh,170px);
width:min(300px,52vw);height:1px;transform:translateX(-50%);overflow:hidden}
.vh-linie i{display:block;width:100%;height:100%;transform-origin:50% 50%;
transform:scaleX(0);
background:linear-gradient(90deg,transparent,var(--signet),transparent)}
.vorhang.auf .vh-y{transform:none !important;
transition:transform 1.15s cubic-bezier(.3,.86,.36,1)}
.vorhang.auf .vh-r,.vorhang.auf .vh-b{opacity:1;transform:none;
transition:opacity .7s var(--weich),transform .9s cubic-bezier(.3,.86,.36,1)}
.vorhang.auf .vh-r:nth-of-type(1){transition-delay:.52s}
.vorhang.auf .vh-b{transition-delay:.66s}
.vorhang.auf .vh-r:nth-of-type(2){transition-delay:.60s}
.vorhang.auf .vh-linie i{transform:scaleX(1);
transition:transform 1.1s cubic-bezier(.3,.86,.36,1) .8s}
@media(prefers-reduced-motion:reduce){
.vorhang.auf .vh-y,.vorhang.auf .vh-r,.vorhang.auf .vh-b,
.vorhang.auf .vh-linie i{transition-duration:.01s}
}
/* ───── Das Band der Einladung ─────
Steht über dem Blatt und bleibt die ganze Anmeldung über stehen:
der Gruss des Gastgebers und seine Zeilen. Ruhig — es ist ein
Beiwerk, kein Schritt. */
.einl{display:none;max-width:min(620px,86vw);margin:0 auto;
padding:16px 20px 15px;text-align:center;
border-top:1px solid rgba(200,169,110,.26);
border-bottom:1px solid rgba(200,169,110,.14)}
.einl.da{display:block}
.ei-g{margin:0;font-family:var(--D);font-weight:400;color:var(--iv);
font-size:clamp(1.05rem,2.2vw,1.35rem);line-height:1.25}
.ei-x{margin:7px auto 0;max-width:52ch;font-size:clamp(.78rem,1.3vw,.87rem);
line-height:1.68;color:rgba(240,236,228,0.82)}
.ei-x:empty{display:none}
@media(max-width:620px){.einl{padding:13px 16px 12px}}
/* Der Satz unter dem Regler — zu jeder Lage einer. Er steht ruhig
da und wird beim Ziehen nur umgeschrieben, nicht neu gebaut. */
.rg-satz{margin:14px auto 0;max-width:46ch;text-align:center;
font-size:var(--t4);font-weight:400;line-height:1.7;color:var(--eis);
min-height:1.7em}
/* ───── Die Kamera ─────
Das laufende Bild liegt im Rahmen und ist gespiegelt — so, wie man
sich selbst im Spiegel kennt. Gespeichert wird es ungespiegelt. */
#kamV{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transform:scaleX(-1);opacity:0;transition:opacity .6s var(--weich)}
.kam.laeuft #kamV{opacity:1}
/* Solange sie läuft, steht die Aufgabe unten im Bild und nicht
mitten darin — sonst steht sie im eigenen Gesicht. */
.kam.laeuft .kam-t{position:absolute;left:0;right:0;bottom:0;top:auto;
padding:16px 20px 18px;text-align:center;
background:linear-gradient(0deg,rgba(8,6,10,.92),rgba(8,6,10,.6) 60%,
rgba(8,6,10,0))}
.kam.laeuft .kam-t b{font-size:var(--t4);margin-bottom:5px;
letter-spacing:.14em;text-transform:uppercase;color:var(--signet)}
.kam.laeuft .kam-r{inset:12px;animation:none;opacity:.5}
/* Während der Bewegung: ein ruhiger roter Punkt, kein Blinken. */
.kam.filmt .kam-r{border-color:rgba(201,107,92,0.82);opacity:1}
.kam.filmt::after{content:'';position:absolute;top:14px;left:14px;z-index:3;
width:9px;height:9px;border-radius:50%;background:#c96b5c;
box-shadow:0 0 12px rgba(201,107,92,.9)}
/* Die Aufnahmen darunter: das Bild liegt als Grund im Kästchen,
Nummer und Beschriftung stehen darüber. */
.aust-b{position:relative;overflow:hidden;align-items:flex-end;
min-height:94px;padding:9px 11px}
.aust-i{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transform:scaleX(-1);opacity:.78}
.aust-b::before{content:'';position:absolute;inset:0;
background:linear-gradient(0deg,rgba(8,6,10,.9),rgba(8,6,10,.15) 62%,
rgba(8,6,10,.05))}
.aust-n,.aust-k{position:relative;z-index:2}
.aust-k{color:var(--eis)}
/* ───── Keine scharfen Ecken an Fenstern ─────
Alles, was sich über die Seite legt — die Fenster der Startseite,
die der Anmeldung und die kleinen Meldungen —, ist gerundet. Die
Werte sind dieselben wie bei Karten und Feldern, damit nichts
aus dem Rahmen fällt. */
.ovk-i{border-radius:var(--r-gross)}
.wink{border-radius:var(--r-pille)}
.ortvor{border-radius:var(--r-feld)}
/* Der Schliessen-Knopf sitzt in der runden Ecke und darf sie nicht
überlappen. */
@media(max-width:560px){ .ovk-i{border-radius:var(--r-karte)} }
/* Ein Platzhalter ist kein Bild. Er bleibt matt und trägt keine
Spiegelung — damit niemand ihn für eine Aufnahme hält. */
.aust-b.platz .aust-i{transform:none;opacity:.95}
.aust-b.platz{border-style:dashed}
/* Warum es nicht geklappt hat, steht im Fenster — nicht in einem
Wink, der wieder verschwindet, bevor man ihn gelesen hat. */
.anfehler{display:none;margin:10px 2px 0;font-size:.8125rem;line-height:1.6;
color:#d98b7a}
.anfehler.da{display:block}
/* Wer sein Passwort nicht sieht, tippt es zweimal falsch. Das Auge
sitzt im Feld, nicht daneben — sonst springt die Zeile. */
.pwfeld{position:relative;display:block}
.pwfeld .feld{padding-right:46px}
.pwblick{position:absolute;right:6px;top:50%;transform:translateY(-50%);
width:34px;height:34px;display:flex;align-items:center;justify-content:center;
background:none;border:none;padding:0;cursor:pointer;color:rgba(240,236,228,.38);
transition:color .2s}
.pwblick:hover{color:rgba(200,169,110,.9)}
.pwblick.an{color:var(--gold,#c8a96e)}
.pwblick svg{width:19px;height:19px}
/* Angemeldet bleiben — damit man nicht jeden Tag neu tippt. */
.anmerken{display:flex;align-items:center;gap:9px;margin:14px 2px 0;
font-size:.8125rem;color:rgba(240,236,228,.6);cursor:pointer;user-select:none}
.anmerken input{width:16px;height:16px;flex:0 0 16px;margin:0;
accent-color:var(--gold,#c8a96e);cursor:pointer}
.anmerken:hover{color:rgba(240,236,228,.88)}
/* ═══ Die drei Felder der Identifizierung ═══
Die Klassen .idg, .idf und .idf-i wurden im Markup verwendet und
nirgends gestaltet. Ohne Form sind es keine Felder, sondern eine
Textwurst: «VorderseiteAlle Angaben müssen lesbar sein.+Rückseite
Auch wenn dort nichts Wichtiges steht.+ …». Man sieht nicht, dass
man etwas anklicken kann — und klickt darum auch nicht. */
.idg{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px}
@media(min-width:560px){ .idg{grid-template-columns:1fr 1fr 1fr} }
.idf{display:flex;flex-direction:column;align-items:center;gap:4px;
padding:18px 14px;border:1px solid var(--line);border-radius:var(--r-karte);
background:var(--karte);text-align:center;cursor:pointer;
transition:.28s var(--weich);min-width:0}
.idf:hover{border-color:rgba(200,169,110,0.82);background:var(--ink3);
transform:translateY(-2px)}
.idf:focus-visible{outline:2px solid var(--signet);outline-offset:2px}
.idf-i{display:grid;place-items:center;width:34px;height:34px;margin-bottom:6px;
border-radius:50%;border:1px solid var(--line);color:var(--signet);
font-size:var(--t6);line-height:1;flex:none}
.idf b{display:block;font-weight:400;font-size:var(--t5);color:var(--iv)}
.idf span{display:block;font-size:var(--t3);color:var(--mv);line-height:1.5}
/* Liegt eine Aufnahme vor, sagt das Feld es auch ohne Worte. */
.idf.voll{border-color:var(--signet);background:rgba(200,169,110,.07)}
.idf.voll .idf-i{border-color:var(--signet);background:rgba(200,169,110,.14)}
.idf.voll span{color:var(--signet2)}
/* Das aufgenommene Bild füllt sein Feld — vorher stand hier ein
erzeugtes Muster, weil es nie ein echtes Bild gab. */
.bf-b{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
border-radius:inherit;display:block}
.bf{position:relative;overflow:hidden}
/* ═══ Die Kamera für das Profilbild ═══ */
.bkam{position:relative;width:100%;aspect-ratio:3/4;max-height:52vh;border-radius:14px;
overflow:hidden;background:#0a0708;border:1px solid var(--line);margin:14px auto 4px}
.bkam video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}
/* ═══ Die Kamera für den Ausweis ═══
Derselbe Kasten wie bei den Aufnahmen zur Echtheit, nur im
Querformat: ein Ausweis ist breiter als hoch. Der Rahmen zeigt,
wohin er gehalten werden soll. */
.idkam{position:relative;width:100%;aspect-ratio:4/3;border-radius:14px;
overflow:hidden;background:#0a0708;border:1px solid var(--line);margin:14px 0 4px}
.idkam video{width:100%;height:100%;object-fit:cover;display:block}
.idkam-r{position:absolute;inset:11% 8%;border:1px dashed rgba(200,169,110,.55);
border-radius:10px;pointer-events:none}
.idkam-r::after{content:'';position:absolute;inset:-1px;border-radius:10px;
box-shadow:0 0 0 2000px rgba(8,6,10,.28)}
@media(max-width:420px){ .idkam{aspect-ratio:3/4} .idkam-r{inset:18% 7%} }
/* Der Hinweis unter dem Nutzernamen: frei, vergeben oder noch offen. */
.nutzerhin{ display:block; font-size:11.5px; color:var(--mv); margin:-6px 0 6px }
.nutzerhin.ja{ color:var(--ok) }
.nutzerhin.nein{ color:var(--warn) }
/* ═══ Die Gutschein-Karte bei der Ankunft ═══
Ein Siegel stempelt sich herein, die Zahl springt auf, ein Glanz
läuft einmal quer. Zusammen 1,4 Sekunden — lang genug, dass man
hinsieht, kurz genug, dass es nicht albern wird. */
.gutk{ position:relative; overflow:hidden; text-align:center; margin-top:14px;
border:1px solid rgba(var(--akz),.45); border-radius:16px; padding:17px 15px;
background:linear-gradient(158deg, rgba(var(--akz),.16), rgba(var(--akz),.04)) }
.gutk.rein{ animation:gutHeben .55s cubic-bezier(.22,1,.36,1) both }
@keyframes gutHeben{ from{ opacity:0; transform:translateY(14px) scale(.96) } to{ opacity:1; transform:none } }
.gutk::after{ content:""; position:absolute; top:0; bottom:0; width:38%; left:-45%;
background:linear-gradient(100deg, transparent, rgba(var(--tinte),.17), transparent);
pointer-events:none }
.gutk.rein::after{ animation:gutGlanz 1.25s .4s ease-out both }
@keyframes gutGlanz{ to{ left:115% } }
.gutk-ring{ position:absolute; inset:-1px; border-radius:16px;
border:1px solid rgba(var(--akz),.75); opacity:0; pointer-events:none }
.gutk.rein .gutk-ring{ animation:gutRing 1s .15s ease-out both }
@keyframes gutRing{ 0%{opacity:0} 35%{opacity:1} 100%{opacity:.25} }
.gutk-sg{ width:40px; height:40px; margin:0 auto 5px }
.gutk-sg svg{ display:block; width:100%; height:100% }
.gutk.rein .gutk-sg{ animation:gutStempel .5s cubic-bezier(.34,1.56,.64,1) both }
@keyframes gutStempel{ from{ opacity:0; transform:scale(1.8) rotate(-12deg) } to{ opacity:1; transform:none } }
.gutk-k{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gdim) }
.gutk-z{ font-family:var(--D); font-size:2.2rem; line-height:1.05; color:var(--glanz); margin:4px 0 2px }
.gutk.rein .gutk-z{ animation:gutZahl .5s .25s cubic-bezier(.34,1.56,.64,1) both }
@keyframes gutZahl{ from{ opacity:0; transform:scale(.72) } to{ opacity:1; transform:none } }
.gutk-w{ font-size:0.8125rem; color:var(--iv) }
@media (prefers-reduced-motion:reduce){
.gutk.rein, .gutk.rein .gutk-z, .gutk.rein .gutk-sg,
.gutk.rein::after, .gutk.rein .gutk-ring{ animation:none }
.gutk.rein .gutk-ring{ opacity:.25 }
}
/* Ein Wort, das sich druecken laesst — fuer Nebensaechliches,
das keinen eigenen Knopf verdient. */
.alslink{background:none;border:none;padding:0;font:inherit;
color:var(--gold);text-decoration:underline;cursor:pointer}
.alslink:hover{color:var(--iv)}
/* Das Alter steht neben dem Datum, nicht darunter. */
.gb-n{align-self:center;margin-left:10px;white-space:nowrap;
color:var(--gold);font-size:0.875rem;letter-spacing:.02em}
.gb-n:empty{display:none}
/* Die Kamera nimmt die Flaeche, die sie braucht. */
.kam{aspect-ratio:3/4;max-height:min(62vh,520px)}
@media(min-width:620px){.kam{aspect-ratio:4/3;max-height:none}}
.kam video{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover}
/* Die kostenlose Stufe, wenn sie allein dasteht. */
.azfrei.allein{display:block;text-align:center;padding:26px 20px;
border:1px solid rgba(200,169,110,.5);border-radius:var(--r-karte);
margin-bottom:18px}
.azfrei.allein .azf-k{display:block;font-family:var(--D);
font-size:1.5rem;color:var(--gold);margin-bottom:8px}
.azfrei.allein .azf-x{display:block;color:var(--mv);
font-size:0.875rem;max-width:34ch;margin:0 auto;line-height:1.6}
/* Die Echtheitsprüfung: der Rahmen nimmt das ganze Blatt ein, und
der Knopf liegt darin statt darunter — so bleibt alles auf einer
Karte, ohne zu scrollen. */
.kam.voll{aspect-ratio:auto;height:clamp(280px,56vh,520px)}
.kamtun.innen{position:absolute;left:0;right:0;bottom:0;z-index:6;margin:0;
padding:14px 16px 16px;justify-content:center;
background:linear-gradient(0deg,rgba(8,6,10,.94),rgba(8,6,10,.52) 72%,
rgba(8,6,10,0))}
.kamtun.innen .knopf{flex:0 1 auto}
.kam.voll.laeuft .kam-t{bottom:74px}
/* Weiterführende Knöpfe stehen rechts, der Hauptknopf ganz aussen */
.o-fuss,.abfr-k,.pb-vs-f,.kam-fuss{justify-content:flex-end}
.o-fuss>.btn.voll,.o-fuss>.voll,.abfr-k>.btn.voll{order:99}
/* Helle Fassung: deutlich mehr Kontrast. Blasse Schrift wird kräftiger
(--kf hebt die Deckkraft an), Nebentexte und Linien dunkler. */
:root[data-thema="hell"]{--kf:1.75;--mv:#2f2836;--gdim:#3d3446;--iv:#0e0a11;
--line:rgba(124,31,60,.3);--line2:rgba(21,16,25,.2)}
/* Echtheitsprüfung, während die Kamera läuft: EIN durchgehender Schatten
unten (Aufgabe und Knopf liegen darauf) statt zweier übereinander —
dort, wo sie sich trafen, stand ein Balken im Bild. */
.kam.voll.laeuft::before{content:'';position:absolute;left:0;right:0;bottom:0;height:210px;z-index:1;
pointer-events:none;
background:linear-gradient(0deg,rgba(8,6,10,.94) 0,rgba(8,6,10,.7) 45%,rgba(8,6,10,0) 100%)}
.kam.voll.laeuft .kam-t{background:none;z-index:2}
.kam.voll .kamtun.innen{background:none}
.kam.voll:not(.laeuft) .kamtun.innen{background:linear-gradient(0deg,rgba(8,6,10,.94),rgba(8,6,10,.52) 72%,rgba(8,6,10,0))}
/* «Abbrechen» klein oben links im Rahmen; der rote Aufnahmepunkt rückt nach rechts. */
.kam-ab{position:absolute;top:10px;left:12px;z-index:6;padding:6px 12px;border-radius:999px;
border:1px solid rgba(240,236,228,.25);background:rgba(8,6,10,.55);color:rgba(240,236,228,.85);
font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.kam.filmt::after{left:auto;right:70px}
.kamtun.innen .knopf.gross{min-width:min(260px,100%)}
/* Registrierung, Bilder: ein Plus-Feld für neue, das Profilbild golden umrandet */
.bf.plus{border-style:dashed}
.bf-plus{font-family:var(--D,serif);font-size:2.6rem;line-height:1;letter-spacing:0;color:var(--signet)}
.bf.haupt{border-color:var(--signet)}