/* Einstieg r27: helle Architekturskizze, kleiner Particle-Tether-Orbit mit Karte,
   schlanker Button. Farben/Schrift wie die aktuelle Website (Broche, Gold #b98a2e /
   #d1ad69, Dunkel #141210, Creme #efe9df). Ersetzt entry-r01.css. */
@font-face{font-family:'Entry Broche';src:url('./entry-r02/Broche.woff2') format('woff2');font-weight:400;font-display:swap}
#kopf,#hero,#ladelinie,#menue{display:none!important}
body #c{clip-path:none!important;transition:none!important}
body{background:#efece6}
/* Allgemeiner Raum-Lader (Direktlinks/Vorschau) - nie beim Erststart */
#load{position:fixed;inset:0;z-index:90;background:#efe9df;display:grid;place-items:center;pointer-events:auto}
#load[hidden],body:not([data-entry=done]) #load{display:none!important}
#load #load-zahl{position:static;transform:none;font:400 13px/1 'Entry Broche','Broche',sans-serif;letter-spacing:.28em;color:#6d6558}
#bb-einstieg{position:fixed;inset:0;z-index:100;overflow:hidden;color:#141210;font-family:'Entry Broche','Broche','Helvetica Neue',sans-serif}
#bb-einstieg[hidden]{display:none}
/* Skizze: zuerst ein 890-Byte-Platzhalter (eingebettet), darueber das volle Bild */
#bb-einstieg .be-skizze{position:absolute;inset:0;background:url('./einstieg-r27/skizze.webp') center/cover no-repeat,var(--be-mini) center/cover no-repeat,#f1efea}
@media (max-width:900px){#bb-einstieg .be-skizze{background-image:url('./einstieg-r27/skizze-klein.webp'),var(--be-mini)}}
#bb-einstieg.be-webgl .be-skizze{visibility:hidden}
/* sehr leichte Aufhellung hinter Mitte/Logo, damit Karte und Schrift auf den Linien ruhig stehen */
#bb-einstieg .be-ruhe{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 30% 34% at 50% 52%,rgba(246,244,240,.62),rgba(246,244,240,0) 100%),linear-gradient(rgba(246,244,240,.5),rgba(246,244,240,0) 16%);transition:opacity .9s ease}
#bb-einstieg .be-logo{position:absolute;top:clamp(22px,4.6vh,48px);left:50%;transform:translateX(-50%);height:clamp(20px,2.4vh,26px);width:auto;opacity:.92;transition:opacity .7s ease}
#bb-einstieg .be-mitte{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px}
#bb-einstieg .be-orbit{display:block;width:clamp(200px,26vh,264px);height:clamp(200px,26vh,264px);transition:opacity .4s ease}
#bb-einstieg .be-status{margin:0;min-height:1.4em;font:400 11px/1.4 'Entry Broche','Broche',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(20,18,16,.62);text-align:center;transition:opacity .5s ease}
/* Button: duenner Goldrand, beim Ueberfahren laeuft ein Goldring um die Pille und die Flaeche fuellt sich sanft */
#entry-enter.be-knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.9em;min-width:44px;min-height:46px;padding:0 30px;border:0;border-radius:999px;background:transparent;cursor:none;
  font:400 12px/1 'Entry Broche','Broche',sans-serif;letter-spacing:.32em;text-transform:uppercase;white-space:nowrap;color:#141210;opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .7s cubic-bezier(.22,.8,.2,1),transform .7s cubic-bezier(.22,.8,.2,1),color .5s ease}
#entry-enter.be-knopf::before{content:'';position:absolute;inset:0;border-radius:inherit;background:rgba(209,173,105,.0);box-shadow:inset 0 0 0 1px rgba(154,116,50,.55);transition:background .6s cubic-bezier(.22,.8,.2,1),box-shadow .6s ease}
#entry-enter.be-knopf .be-ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none}
#entry-enter.be-knopf .be-ring rect{width:calc(100% - 1.4px);height:calc(100% - 1.4px);fill:none;stroke:#b98a2e;stroke-width:1.4;stroke-dasharray:var(--be-umfang,420);stroke-dashoffset:var(--be-umfang,420);transition:stroke-dashoffset .8s cubic-bezier(.22,.8,.2,1)}
#entry-enter.be-knopf .be-pfeil{width:14px;height:10px;transition:transform .5s cubic-bezier(.22,.8,.2,1)}
#bb-einstieg[data-zustand=bereit] #entry-enter.be-knopf{opacity:1;transform:none;pointer-events:auto}
#entry-enter.be-knopf:is(:hover,:focus-visible)::before{background:rgba(209,173,105,.2)}
#entry-enter.be-knopf:is(:hover,:focus-visible) .be-ring rect{stroke-dashoffset:0}
#entry-enter.be-knopf:is(:hover,:focus-visible) .be-pfeil{transform:translateX(3px)}
#entry-enter.be-knopf:focus-visible{outline:none}
#entry-enter.be-knopf:focus-visible::after{content:'';position:absolute;inset:-6px;border-radius:inherit;box-shadow:0 0 0 1px rgba(20,18,16,.5)}
#entry-enter.be-knopf:active{transform:scale(.985)}
#entry-enter.be-knopf:disabled{cursor:default}
#bb-einstieg[data-zustand=bereit] .be-status{opacity:0}
#bb-einstieg .be-fehler{margin:0;text-align:center;font:400 13px/1.5 'Helvetica Neue',Arial,sans-serif;color:#3a342c;display:flex;flex-direction:column;align-items:center;gap:10px}
#bb-einstieg .be-fehler[hidden]{display:none}
#bb-einstieg .be-neu{min-height:44px;padding:0 24px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px rgba(154,116,50,.55);font:400 12px/1 'Entry Broche','Broche',sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#141210;cursor:none}
#bb-einstieg .be-neu:is(:hover,:focus-visible){background:rgba(209,173,105,.2);outline:none}
/* Enthuellung: Logo, Status, Button und Aufhellung treten zurueck (Orbit zieht sich im Canvas zurueck) */
#bb-einstieg.be-raus .be-logo,#bb-einstieg.be-raus .be-status,#bb-einstieg.be-raus .be-ruhe{opacity:0}
#bb-einstieg.be-raus #entry-enter.be-knopf{opacity:0;transform:translateY(4px);pointer-events:none;transition-duration:.45s}
#bb-einstieg.be-raus{pointer-events:none}
html.bb-ruhig #bb-einstieg *,html.bb-ruhig #bb-einstieg *::before{transition-duration:.01ms!important}
@media (prefers-reduced-motion:reduce){#bb-einstieg *,#bb-einstieg *::before{transition-duration:.01ms!important}}
body:not([data-entry=done]) #hint,body:not([data-entry=done]) #spur,body:not([data-entry=done]) #room-elevator-back,body:not([data-entry=done]) #lobby-app-hint{display:none!important}
@media (max-width:600px){#bb-einstieg .be-mitte{top:50%}#bb-einstieg .be-orbit{width:210px;height:210px}#entry-enter.be-knopf{padding:0 22px;letter-spacing:.24em;font-size:11px}}
@media (max-height:460px){#bb-einstieg .be-orbit{width:150px;height:150px}#bb-einstieg .be-mitte{gap:8px}}
/* Zeiger im Ladebild (Lucas Wunsch 2026-10-06, Nachtrag): der goldene Ring mit Punkt der Experience,
   ueber dem Ladebild und kraeftiger, damit er auf der hellen Skizze gut zu sehen ist (dort duenn und
   hellgold kaum sichtbar). Bewegt wird er vor dem Hauptmodul vom kleinen Skript in index.html. */
body:not([data-entry="done"]) #zeiger{z-index:140;box-sizing:border-box;border:2px solid rgba(138,102,40,.95);box-shadow:0 0 0 1px rgba(255,250,240,.65),0 1px 8px rgba(20,18,16,.2)}
body:not([data-entry="done"]) #zeiger.gross{border-color:#b98a2e}
body:not([data-entry="done"]) #zeiger-punkt{z-index:141;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:#9a7432;box-shadow:0 0 0 1.5px rgba(255,250,240,.75)}
/* Karte nur beim Laden: nach dem Ausblenden zieht sich ihr Platz zusammen, der Button rueckt in die Mitte */
/* nur die Hoehe animiert CSS - die Deckkraft setzt die Ladekarte selbst je Bild (eine CSS-Ueberblendung
   liefe hinterher und zeigte beim Freigeben des Grafikkontexts kurz eine helle Flaeche) */
#bb-einstieg .be-orbit{transition:height .55s cubic-bezier(.22,.8,.2,1)}
#bb-einstieg.be-ohnekarte .be-orbit{height:0!important;opacity:0}