/* Oberflaeche r24 (Brief 2026-09-27 nachmittags): kleine Bedienelemente liegen
   transparent ueber der Szene - Schrift, feine Linien, dezente Icons; keine
   Pillen, Kaesten oder gefuellten Kreise. Lesbarkeit auf hellem und dunklem
   Grund ueber einen weichen Schatten direkt an Schrift und Linien statt ueber
   Flaechen. Hover nach Lucas Aufnahme (MENU/CLOSE): die Aufhellung wischt weich
   von links nach rechts ueber die Buchstaben (ein ~0,75 s, aus ~0,35 s),
   ohne Glow, ohne Farbsprung, ohne dass sich die Trefferflaeche bewegt.
   Diese Datei laedt als letzte und ueberschreibt die aelteren Flaechen. */
:root{--ui-hell:#fff;--ui-dim:rgba(246,241,232,.8);--ui-linie:rgba(243,237,227,.5);--ui-gold:#d7b775;
  --ui-schatten:0 1px 2px rgba(0,0,0,.5),0 0 6px rgba(0,0,0,.28),0 0 16px rgba(0,0,0,.34);--ui-schatten-f:drop-shadow(0 1px 1.5px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(0,0,0,.36));
  --ui-ein:.8s cubic-bezier(.42,.08,.36,1);--ui-aus:.4s cubic-bezier(.45,0,.55,1)}

/* ---- Wisch-Hervorhebung (Text) ------------------------------------------------ */
.bb-wisch{position:relative;display:inline-block;color:var(--ui-dim);text-shadow:var(--ui-schatten);white-space:nowrap}
.bb-wisch::after{content:attr(data-text);position:absolute;left:0;top:0;right:0;bottom:0;color:var(--ui-hell);text-shadow:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0 42%,transparent 58% 100%);mask-image:linear-gradient(90deg,#000 0 42%,transparent 58% 100%);
  -webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:-webkit-mask-position var(--ui-aus),mask-position var(--ui-aus)}
:is(button,a,[role="button"]):is(:hover,:focus-visible)>.bb-wisch::after,
:is(button,a,[role="button"]):is(:hover,:focus-visible) .bb-wisch::after,
.bb-wisch.an::after,[data-disclosed="true"] .bb-wisch::after,[data-offen="true"] .bb-wisch::after{-webkit-mask-position:0 0;mask-position:0 0;transition:-webkit-mask-position var(--ui-ein),mask-position var(--ui-ein)}
.bb-wisch.dunkel{color:rgba(33,29,23,.5);text-shadow:none}
.bb-wisch.dunkel::after{color:#1d1a15}
/* feine Linie, die sich im selben Takt von links hell zieht */
.bb-strich{position:relative;display:block;height:1px;background:var(--ui-linie);filter:var(--ui-schatten-f)}
.bb-strich::after{content:'';position:absolute;inset:0;background:var(--ui-hell);transform:scaleX(0);transform-origin:left center;transition:transform var(--ui-aus)}
:is(button,a):is(:hover,:focus-visible) .bb-strich::after{transform:scaleX(1);transition:transform var(--ui-ein)}
html.bb-ruhig .bb-wisch::after,html.bb-ruhig .bb-strich::after{transition:none!important}

/* ---- Header: fein und transparent, eine Linie ------------------------------- */
#bb-kopf{position:fixed;left:0;right:0;top:0;height:84px;z-index:14;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:0 46px;
  opacity:0;transition:opacity .8s ease;font-family:'Broche','Helvetica Neue',sans-serif}
#bb-kopf.an{opacity:1}
#bb-kopf::after{display:none}
#bb-kopf .logo{height:21px;width:auto;pointer-events:none;filter:var(--ui-schatten-f);transition:opacity .5s}
#bb-kopf .logo.dunkel{position:absolute;left:46px;opacity:0}
#bb-kopf .ort{position:absolute;left:50%;transform:translateX(-50%);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--ui-dim);text-shadow:var(--ui-schatten);white-space:nowrap}
#bb-kopf .rechts{display:flex;align-items:center;gap:26px;pointer-events:auto}
#bb-rahmen{position:fixed;inset:84px 28px 0 28px;z-index:3;pointer-events:none;border-left:1px solid rgba(243,237,227,.13);border-right:1px solid rgba(243,237,227,.13);opacity:0;transition:opacity .8s}
#bb-rahmen.an{opacity:1}
/* Header-Knoepfe (Lucas Wunsch 2026-09-28): wieder die runden Knoepfe von vorher -
   dunkles Glas, Goldring, beim Ueberfahren laeuft der Goldring auf und die cremefarbene
   Flaeche oeffnet sich (Grundstil .bb-rund in ui-r21.js); hier nur im Header platziert. */
#bb-kopf .bb-rund{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;flex:0 0 auto}
#bb-kopf .bb-rund:focus-visible{outline:none}
#bb-kopf .bb-rund:focus-visible .bb-lade circle{stroke-dashoffset:0}
#main-music-toggle{background:none!important;backdrop-filter:none!important;filter:var(--ui-schatten-f);right:36px!important;bottom:26px!important}
#main-music-toggle .music-ring{stroke:var(--ui-linie)!important}
#main-music-toggle:hover .music-ring,#main-music-toggle:focus-visible .music-ring{stroke:var(--ui-hell)!important;transition:stroke var(--ui-ein)}
#main-music-toggle::after{display:none}

/* ---- Menue geoeffnet: Header dunkel auf der hellen Uebersicht --------------- */
html.bb-menue-offen #bb-kopf{--ui-dim:rgba(33,29,23,.55);--ui-hell:#1d1a15}
html.bb-menue-offen #bb-kopf::after{background:rgba(33,29,23,.16);filter:none}
html.bb-menue-offen #bb-kopf .logo.hell{opacity:0}
html.bb-menue-offen #bb-kopf .logo.dunkel{opacity:1}
html.bb-menue-offen #bb-kopf .ort,html.bb-menue-offen #bb-menueknopf .punkt,html.bb-menue-offen #bb-kopf .bb-wisch{text-shadow:none}
html.bb-menue-offen #bb-einstellknopf,html.bb-menue-offen #bb-kopf .logo{filter:none}
html.bb-menue-offen #bb-rahmen{border-color:rgba(33,29,23,.1)}

/* ---- Grosses Menue nach Screenshot 3 ---------------------------------------- */
html body #menue.bb-aktiv{display:flex!important;flex-direction:column;justify-content:center;align-items:stretch}
#menue{background:#f7f4ee!important;color:#1d1a15;overflow:auto;padding:0!important;z-index:13!important}
#menue .kopfzeile{display:none!important}
#menue .bb-raster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.6vw,32px);padding:calc(84px + 4vh) clamp(28px,3.4vw,64px) 0;width:100%;max-width:1900px;margin:0 auto;box-sizing:border-box}
#menue .reihe{position:static!important;display:flex!important;flex-direction:column;align-items:stretch;gap:18px;width:auto!important;padding:0!important;margin:0!important;border:0!important;background:none!important;cursor:pointer;text-align:center;color:inherit}
#menue .reihe:hover{background:none!important}
#menue .reihe b{order:0;font-family:'Broche',sans-serif;font-weight:400;font-size:clamp(14px,1.45vw,26px)!important;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;color:inherit!important;margin:0!important;white-space:nowrap}
#menue .reihe .bild{order:1;display:block;aspect-ratio:2/3;overflow:hidden;background:#e9e4da}
#menue .reihe .bild img{position:static!important;transform:none!important;display:block;width:100%;height:100%;object-fit:cover;opacity:1!important;filter:saturate(.95) brightness(.97);transition:filter var(--ui-aus)}
#menue .reihe:hover .bild img,#menue .reihe:focus-visible .bild img{filter:saturate(1) brightness(1.03);transition:filter var(--ui-ein)}
#menue .reihe img.li,#menue .reihe img.re{display:none!important}
#menue .reihe small{order:2;font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px!important;letter-spacing:.2em;text-transform:uppercase;color:rgba(33,29,23,.55)!important;margin:0!important}
#menue .reihe[disabled]{cursor:default;opacity:.42!important}
#menue .reihe:focus-visible{outline:none!important}
#menue .reihe:focus-visible .bild{outline:1px solid #1d1a15;outline-offset:6px}
#menue .bb-fuss{display:flex!important;justify-content:space-between!important;padding:5vh clamp(28px,3.4vw,64px) 40px!important;width:100%;max-width:1900px;margin:0 auto;box-sizing:border-box}
#menue .bb-fuss button{border:0!important;background:none!important;padding:6px 0!important;border-radius:0!important;font-family:'Broche',sans-serif!important;font-size:13px!important;letter-spacing:.18em;text-transform:uppercase;color:#1d1a15;cursor:pointer}
#menue .bb-fuss button:focus-visible{outline:none;text-decoration:underline;text-underline-offset:6px}
@media (max-width:900px){#menue .bb-raster{grid-template-columns:repeat(3,minmax(0,1fr));padding-top:calc(84px + 3vh)}}
@media (max-width:560px){#menue .bb-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}#bb-kopf{padding:0 22px;height:68px}#bb-kopf .ort{display:none}#bb-rahmen{display:none}#bb-kopf::after{left:12px;right:12px}}

/* ---- Punktnavigation: nur Punkte, Linie, Schrift ---------------------------- */
#bb-punkte{right:40px!important}
#bb-punkte .p{background:var(--ui-dim)!important;box-shadow:0 0 6px rgba(0,0,0,.45)!important}
#bb-punkte .r{background:none!important;border:1px solid var(--ui-linie)!important;filter:var(--ui-schatten-f)}
#bb-punkte button[aria-current="true"] .r{border-color:var(--ui-hell)!important}
#bb-punkte button[aria-current="true"] .p,#bb-punkte button:hover .p,#bb-punkte button:focus-visible .p{background:var(--ui-hell)!important;transform:none!important}
#bb-punkte .l{background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important;color:inherit!important;font-family:'Broche',sans-serif;font-size:13px!important;letter-spacing:.2em;text-transform:uppercase;transform:translate(0,-50%)!important;transition:opacity var(--ui-aus)!important}
#bb-punkte .l::after{display:none!important}
#bb-punkte .l small{color:var(--ui-dim);text-shadow:var(--ui-schatten);opacity:1!important;margin-left:.9em}
#bb-punkte button:hover .l,#bb-punkte button:focus-visible .l,#bb-punkte button[data-offen="true"] .l{transition:opacity var(--ui-ein)!important}
#bb-punkte button:focus-visible .r{border-color:var(--ui-hell)!important;opacity:1!important;transform:scale(1)!important}

/* ---- Scroll-Hinweis: Linie und Schrift -------------------------------------- */
#bb-hinweis .ring{background:none!important;border:1px solid var(--ui-linie)!important;filter:var(--ui-schatten-f)}
#bb-hinweis .ring svg{color:var(--ui-hell)}
#bb-hinweis span{background:none!important;box-shadow:none!important;padding:0!important;color:var(--ui-dim)!important;text-shadow:var(--ui-schatten)!important;font-family:'Broche',sans-serif;letter-spacing:.22em!important;text-transform:uppercase;font-size:12px!important}
#hint{background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important;width:auto!important;left:0!important;right:0!important;transform:none!important;color:var(--ui-dim)!important;text-shadow:var(--ui-schatten)!important;opacity:.9}

/* ---- Enter-Checkpoint: Titel und feiner Ring -------------------------------- */
#bb-checkpoint h2{background:none!important;box-shadow:none!important;padding:0!important;color:#fff!important;text-shadow:0 2px 26px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.35)!important}
#bb-checkpoint button{background:none!important;backdrop-filter:none!important;border:1px solid var(--ui-linie)!important;color:inherit!important;transform:none!important;filter:var(--ui-schatten-f);transition:border-color var(--ui-aus)!important;font-family:'Broche',sans-serif!important;letter-spacing:.22em!important}
#bb-checkpoint button:hover,#bb-checkpoint button:focus-visible{border-color:var(--ui-hell)!important;outline:none!important;transition:border-color var(--ui-ein)!important}
#bb-checkpoint p{background:none!important;box-shadow:none!important;padding:0!important;color:var(--ui-dim)!important;text-shadow:var(--ui-schatten)!important}

/* ---- Raumknoepfe: Text mit feiner Linie ------------------------------------- */
#room-elevator-back,#room-enter-again,#cards-close,#zurueck-aufzug{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:10px 0!important;min-height:44px;
  top:116px!important;left:46px!important;font-family:'Broche',sans-serif!important;font-size:12px!important;letter-spacing:.2em;text-transform:uppercase;color:inherit!important;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
#room-elevator-back[hidden],#room-enter-again[hidden],#cards-close[hidden],#zurueck-aufzug[hidden]{display:none!important}
#room-elevator-back:focus-visible,#room-enter-again:focus-visible,#cards-close:focus-visible{outline:none!important}
#room-elevator-back .bb-strich,#room-enter-again .bb-strich,#cards-close .bb-strich{width:100%}

/* ---- Hinweise an Objekten ---------------------------------------------------- */
#tip b,#tip span{background:none!important;box-shadow:none!important;padding:0!important;display:block!important}
#bb-ruf span{background:none!important;border:0!important;box-shadow:none!important;padding:0 0 12px!important;color:#fff;text-shadow:var(--ui-schatten);font-family:'Broche',sans-serif!important;font-size:12px!important;letter-spacing:.22em;text-transform:uppercase}
#bb-ruf span::after{border:0!important;left:50%!important;top:auto!important;bottom:0;width:1px;height:10px;margin-left:0!important;background:var(--ui-linie)}
#bb-ruf i{border-color:var(--ui-linie)!important;box-shadow:none!important;filter:var(--ui-schatten-f)}
#bb-umsehen button{background:none!important;border:1px solid var(--ui-linie)!important;backdrop-filter:none!important;color:var(--ui-hell)!important;filter:var(--ui-schatten-f)}
#bb-umsehen button:hover,#bb-umsehen button:focus-visible{border-color:var(--ui-hell)!important}
.personal-hotspot{background:none!important}

/* ---- Hoher Kontrast: kraeftigere Schrift, Linien und Schatten, keine Flaechen - */
html.bb-kontrast{--ui-dim:#fff;--ui-hell:#fff;--ui-linie:#fff;--ui-schatten:0 0 2px #000,0 0 4px rgba(0,0,0,.9),0 1px 14px rgba(0,0,0,.75);--ui-schatten-f:drop-shadow(0 0 1.5px #000) drop-shadow(0 0 4px rgba(0,0,0,.85))}
html.bb-kontrast .bb-wisch::after{color:#fff}
html.bb-kontrast #bb-hinweis .ring,html.bb-kontrast #bb-checkpoint button,html.bb-kontrast #bb-umsehen button,html.bb-kontrast #bb-punkte .r{border-width:2px!important}
html.bb-kontrast .bb-strich{height:2px}
html.bb-kontrast #bb-kopf::after{background:#fff}
html.bb-kontrast.bb-menue-offen #bb-kopf{--ui-dim:#1d1a15;--ui-hell:#000}
html.bb-kontrast.bb-menue-offen #bb-kopf::after{background:#1d1a15}
html.bb-kontrast #menue .reihe small{color:#1d1a15!important}

/* ---- Infobereich nach Screenshot 2 (darf hell und ruhig sein) ---------------- */
#bb-info{position:fixed;z-index:26;top:112px;right:44px;bottom:auto;max-height:calc(100vh - 152px);width:min(600px,42vw);background:#f6f3ee;color:#1d1a15;box-shadow:0 30px 80px rgba(0,0,0,.28);
  opacity:0;transform:translateX(26px);pointer-events:none;transition:opacity .45s ease,transform .6s cubic-bezier(.22,.8,.2,1);display:flex;flex-direction:column}
#bb-info.an{opacity:1;transform:none;pointer-events:auto}
#bb-info[hidden]{display:none}
#bb-info .inhalt{overflow:auto;overscroll-behavior:contain;padding:34px 40px 40px;flex:1 1 auto;min-height:0}
#bb-info .kategorie{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:0 40px 22px 0}
#bb-info h2{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:clamp(22px,2vw,30px);line-height:1.2;letter-spacing:-.005em;margin:0 0 30px}
#bb-info p{font-family:'Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.5;margin:0 0 18px;color:#2a251e}
#bb-info .medium{margin:26px 0;background:#e8e3d9}
#bb-info .medium img{display:block;width:100%;height:auto}
#bb-info .fakten{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;margin:0 0 20px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px}
#bb-info .fakten dt{color:#766e62;letter-spacing:.04em}
#bb-info .fakten dd{margin:0}
#bb-info .hinweis{font-size:13px;color:#766e62}
#bb-info .zu{position:absolute;top:22px;right:24px;width:40px;height:40px;border:0;background:none;cursor:pointer;color:#1d1a15;display:grid;place-items:center}
#bb-info .zu svg{width:20px;height:20px}
#bb-info .zu:focus-visible{outline:1px solid #1d1a15;outline-offset:2px}
#bb-info .aktion{display:inline-flex;flex-direction:column;gap:8px;border:0;background:none;padding:6px 0;cursor:pointer;font-family:'Broche',sans-serif;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#1d1a15;text-decoration:none}
#bb-info .aktion .bb-strich{background:rgba(33,29,23,.3);filter:none}
#bb-info .aktion .bb-strich::after{background:#1d1a15}
@media (max-width:760px){#bb-info{top:auto;left:0;right:0;bottom:0;width:auto;max-height:78vh;transform:translateY(30px)}#bb-info .inhalt{padding:28px 22px 34px}}
html.bb-kontrast #bb-info{border:2px solid #1d1a15}

/* ---- Kartenname am Objekt ---------------------------------------------------- */
#bb-kartenname{position:fixed;left:0;top:0;z-index:15;pointer-events:none;font-family:'Broche',sans-serif;font-size:13px;letter-spacing:.24em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transition:opacity var(--ui-aus)}
#bb-kartenname.an{opacity:1;transition:opacity .45s ease}
#bb-kartenname small{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.2em;color:var(--ui-dim);text-shadow:var(--ui-schatten)}
#bb-kartenname i{display:block;width:1px;height:18px;background:var(--ui-linie);filter:var(--ui-schatten-f)}

/* ---- Wahl im Kartenraum und Tablet-Hotspot ---------------------------------- */
#bb-kartenwahl{position:fixed;left:50%;bottom:calc(7vh + 18px);transform:translateX(-50%);z-index:13;display:flex;align-items:center;gap:34px;opacity:0;pointer-events:none;transition:opacity .6s ease}
#bb-kartenwahl.an{opacity:1;pointer-events:auto}
#bb-kartenwahl .trenner{width:1px;height:26px;background:var(--ui-linie);filter:var(--ui-schatten-f)}
#bb-kartenwahl button,#bb-tablet-ort{border:0;background:none;cursor:pointer;padding:10px 2px;min-height:44px;font-family:'Broche',sans-serif;font-size:14px;letter-spacing:.26em;text-transform:uppercase;display:flex;flex-direction:column;gap:9px;align-items:center;color:inherit}
#bb-kartenwahl button:focus-visible,#bb-tablet-ort:focus-visible{outline:none}
#bb-tablet-ort{position:fixed;left:0;top:0;z-index:13;font-size:12px}
#bb-tablet-ort[hidden]{display:none}
#bb-tablet-ort i{display:block;width:26px;height:26px;border:1px solid var(--ui-linie);border-radius:50%;filter:var(--ui-schatten-f);transition:border-color var(--ui-aus)}
#bb-tablet-ort:hover i,#bb-tablet-ort:focus-visible i{border-color:var(--ui-hell);transition:border-color var(--ui-ein)}

/* Rufknopf-Markierung: feiner Ring statt Kasten, auch im Hochkontrast */
#bb-ruf i{border-radius:14px!important;border-width:1px!important}
html.bb-kontrast #bb-ruf i{border:1.5px solid #fff!important;box-shadow:none!important;filter:drop-shadow(0 0 2px #000)}
html.bb-kontrast #bb-ruf span{background:none!important;color:#fff!important;border:0!important}

/* ---- Karten im Raum: Familien-Hinweis weicht dem Kartennamen --------------- */
body[data-karte-hover="1"] .cards-hotspot{opacity:0!important;pointer-events:none!important}

/* ---- Konfigurator (D&G-Inszenierung, unsere Karten) ------------------------- */
#bb-konfig{position:fixed;inset:0;z-index:30;background:#0b0b0b;color:#efe3cf;opacity:0;transition:clip-path .95s cubic-bezier(.65,0,.2,1),opacity .5s ease;font-family:'Broche','Helvetica Neue',sans-serif}
#bb-konfig[hidden]{display:none}
#bb-konfig .kk-leinwand{position:absolute;inset:0;width:100%;height:100%;display:block}
#bb-konfig .kk-zieh{position:absolute;left:24%;right:24%;top:22%;bottom:22%;cursor:grab;touch-action:none}
#bb-konfig .kk-zieh:active{cursor:grabbing}
#bb-konfig button{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0}
#bb-konfig .kk-zurueck{position:absolute;top:30px;left:46px;display:flex;gap:.7em;align-items:center;min-height:44px;font-size:12px;letter-spacing:.3em;text-transform:uppercase}
#bb-konfig .kk-zurueck .punkt{color:var(--ui-dim)}
#bb-konfig .kk-titel{position:absolute;top:11vh;left:50%;transform:translateX(-50%);text-align:center;width:min(1000px,62vw);pointer-events:none}
#bb-konfig .kk-klein{margin:0 0 16px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:#c9a96a}
#bb-konfig .kk-name{margin:0;font-weight:400;font-size:clamp(24px,2.5vw,40px);letter-spacing:.14em;text-transform:uppercase;line-height:1.1;color:#f3e8d4}
#bb-konfig .kk-unter{margin:16px 0 0;font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;letter-spacing:.12em;color:rgba(239,227,207,.62)}
#bb-konfig .kk-seitenleiste{position:absolute;top:50%;transform:translateY(-50%);width:min(230px,18vw);text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
#bb-konfig .kk-links{left:7vw}
#bb-konfig .kk-rechts{right:7vw}
#bb-konfig .kk-nr{margin:0;font-size:11px;letter-spacing:.3em;color:rgba(239,227,207,.5)}
#bb-konfig .kk-ueber{margin:0;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:#f0e4cf}
#bb-konfig .kk-linie{display:block;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,169,106,.7),transparent)}
#bb-konfig .kk-stufen,#bb-konfig .kk-varianten{display:flex;flex-direction:column;gap:14px;align-items:center}
#bb-konfig .kk-stufen button,#bb-konfig .kk-varianten button{min-height:32px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
#bb-konfig .kk-varianten button{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;letter-spacing:.16em}
#bb-konfig .kk-varianten i{display:block;width:12px;height:12px;border-radius:50%;background:var(--f);box-shadow:0 0 0 1px rgba(239,227,207,.35);transition:box-shadow var(--ui-aus)}
#bb-konfig [aria-pressed="true"] .bb-wisch::after{-webkit-mask-position:0 0;mask-position:0 0}
#bb-konfig .kk-varianten [aria-pressed="true"] i{box-shadow:0 0 0 1px rgba(239,227,207,.35),0 0 0 4px #0b0b0b,0 0 0 5px #d7b775}
#bb-konfig .kk-unten{position:absolute;bottom:13vh;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:30px}
#bb-konfig .kk-pfeil{width:44px;height:44px;display:grid;place-items:center}
#bb-konfig .kk-pfeil svg{width:40px;height:40px;fill:none;stroke:rgba(201,169,106,.75);stroke-width:1;transition:stroke var(--ui-aus)}
#bb-konfig .kk-pfeil:hover svg,#bb-konfig .kk-pfeil:focus-visible svg{stroke:#f3e8d4;transition:stroke var(--ui-ein)}
#bb-konfig .kk-pfeil:focus-visible{outline:none}
#bb-konfig .kk-zaehler{margin:0;font-size:12px;letter-spacing:.3em;color:rgba(239,227,207,.7);min-width:6em;text-align:center}
#bb-konfig .kk-seite{position:absolute;bottom:6vh;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:28px}
#bb-konfig .kk-seite button{display:flex;flex-direction:column;gap:8px;align-items:center;min-height:40px;font-size:12px;letter-spacing:.3em;text-transform:uppercase}
#bb-konfig .kk-seite [aria-pressed="true"] .bb-strich::after{transform:scaleX(1)}
#bb-konfig .kk-trenner{width:1px;height:22px;background:rgba(239,227,207,.35)}
#bb-konfig .kk-luecke{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:340px;text-align:center;margin:0;font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;line-height:1.5;letter-spacing:.04em;color:#f3e8d4;text-shadow:0 1px 10px #000;pointer-events:none}
#bb-konfig .kk-laden{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;font-size:12px;letter-spacing:.3em;color:rgba(239,227,207,.6)}
#bb-konfig .kk-laden[hidden],#bb-konfig .kk-luecke[hidden]{display:none}
#bb-konfig[data-luecke-hell="true"] .kk-luecke{color:#2b241c;text-shadow:0 0 12px rgba(255,250,240,.7)}
#bb-konfig .bb-wisch{text-shadow:none}
html.bb-kontrast #bb-konfig{--ui-dim:#fff}
html.bb-kontrast #bb-konfig .kk-pfeil svg{stroke:#fff;stroke-width:2}
@media (max-width:820px){
  #bb-konfig .kk-titel{top:12vh}#bb-konfig .kk-zurueck{left:18px;top:14px}
  #bb-konfig .kk-seitenleiste{position:absolute;top:auto;transform:none;width:44vw;bottom:24vh}
  #bb-konfig .kk-links{left:3vw}#bb-konfig .kk-rechts{right:3vw}
  #bb-konfig .kk-stufen,#bb-konfig .kk-varianten{gap:6px}
  #bb-konfig .kk-seitenleiste .kk-nr,#bb-konfig .kk-seitenleiste .kk-linie{display:none}
  #bb-konfig .kk-zieh{left:6%;right:6%;top:26%;bottom:46%}
  #bb-konfig .kk-unten{bottom:15vh}
}
html.bb-ruhig #bb-konfig{transition:opacity .2s ease}

/* Offener Infobereich: Raum-Hotspots, Kartenname und Wahlleiste treten zurueck (nichts Konkurrierendes hinter dem Panel). */
html.bb-info-offen .cards-hotspot,html.bb-info-offen #bb-kartenname,html.bb-info-offen #bb-kartenwahl,html.bb-info-offen #bb-tablet-ort,html.bb-info-offen .vault-hotspot,html.bb-info-offen #bb-checkpoint{opacity:0!important;pointer-events:none!important}
/* Alte Vault-Schaltflaeche "Andere Etage waehlen" im Menue: konkurrierte mit dem Raster (das denselben Weg ueber den Aufzug nimmt). */
#menue #menu-elevator{display:none!important}
/* Garage: Fahrzeugbeschriftung beim Ueberfahren eines Autos transparent wie der
   Kartenname (vorher dunkle 320-px-Kachel). Der lange Text steht im Infobereich. */
.garage-vehicle-hotspot{background:none!important;box-shadow:none!important;width:auto!important;max-width:min(380px,calc(100vw - 32px));padding:10px 16px 14px!important;text-align:center!important}
.garage-vehicle-hotspot b{font:400 16px/1.3 'Broche','Helvetica Neue',sans-serif!important;letter-spacing:.2em!important;text-transform:uppercase}
.garage-vehicle-hotspot em{color:var(--ui-dim)!important;text-shadow:var(--ui-schatten);margin:8px 0 10px!important}
.garage-vehicle-hotspot strong{display:none!important}
.garage-vehicle-hotspot small{color:var(--ui-gold)!important;text-shadow:var(--ui-schatten);margin-top:0!important}
.garage-vehicle-hotspot.near .bb-wisch::after{-webkit-mask-position:0 0;mask-position:0 0;transition:-webkit-mask-position var(--ui-ein),mask-position var(--ui-ein)}
.garage-vehicle-hotspot:focus-visible{outline:none!important}
.garage-vehicle-hotspot:focus-visible small{text-decoration:underline;text-underline-offset:5px}

/* Keine Linien mehr (Lucas Wunsch 2026-09-28): Header-Linie, Rahmenlinien, Unterstriche
   unter Textknoepfen und der Trenner der Wahlleiste entfallen. Im Infobereich und im
   Konfigurator bleiben die feinen Linien Teil der Lesefläche. */
#bb-rahmen{display:none!important}
.bb-strich{display:none}
#bb-info .bb-strich,#bb-konfig .bb-strich{display:block}
#bb-kartenwahl .trenner{display:none}
#bb-kartenwahl{gap:54px}
/* Header in den alten Farben (Gold/Creme statt Weiss) */
#bb-kopf .ort{color:var(--gold,#d1ad69)!important}
html.bb-menue-offen #bb-kopf .ort{color:#9a7432!important}
/* Menue in den alten Farben: warmes Creme, dunkle Titel, Gold beim Ueberfahren */
#menue{background:#efe9df!important;color:#141210}
#menue .reihe .bb-wisch.dunkel{color:#141210}
#menue .reihe .bb-wisch.dunkel::after{color:#b98a2e}
#menue .reihe small{color:#8a8276!important}
#menue .reihe .bild{background:#e4dccd}
#menue .bb-fuss button{color:#141210;transition:color var(--ui-aus)}
#menue .bb-fuss button:is(:hover,:focus-visible){color:#b98a2e;text-decoration:none;transition:color var(--ui-ein)}
#menue .reihe:focus-visible .bild{outline-color:#b98a2e}
/* Infobereich: kleines 3D-Modell der Karte auf der Leseflaeche, weicher Bodenschatten */
#bb-info figure.modell{aspect-ratio:16/10;background:radial-gradient(ellipse 38% 7% at 50% 90%,rgba(40,32,20,.16),rgba(40,32,20,0) 100%)}
#bb-info figure.modell canvas{display:block;width:100%;height:100%}