/* OKNXT Unterseite KI-Bildbearbeitung (Präfix bb-). Baut auf site.css, abschnitte.css und agenten-seite.css auf (Abstände 150 px wie überall).
   Echtes Vorher-Nachher: Esszimmer. Übrige Vorher-Bilder per Filter nachgestellt. --w und --dreh sind seitenweit Winkel, hier nicht verwenden. */

.bb-seite{--h-grund:#F2F4F9;--h-linie:#E2E7F1;--h-text:#161B2E;--h-text-2:#667089;--h-text-3:#98A1B5}
.bb-hell{color:var(--h-text)}
.bb-klein{margin:0 0 10px;font-size:.58rem;font-weight:600;color:var(--h-text-2)}

/* ---------- Zeiger ---------- */
.bb-zeiger{position:absolute;z-index:9;left:0;top:0;width:26px;height:26px;pointer-events:none;opacity:0;transform:translate(var(--zx,60%),var(--zy,60%));transition:transform .95s cubic-bezier(.65,0,.35,1),opacity .4s}
.bb-zeiger.da{opacity:1}
.bb-zeiger svg{width:26px;height:26px;fill:#161B2E;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.bb-zeiger i{position:absolute;left:3px;top:2px;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:2px solid #2F6BFF;opacity:0}
.bb-zeiger.klick i{animation:bb-ring .6s ease-out}
.bb-zeiger.klick svg{animation:bb-druck .3s ease}
@keyframes bb-ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}
@keyframes bb-druck{50%{transform:scale(.82)}}

/* ---------- B1 · Einstieg ---------- */
.bb-start{position:relative;padding:clamp(28px,5vh,64px) var(--seitenrand) 0}
.bb-start-innen{max-width:var(--ab-breite);margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center;min-height:calc(100svh - var(--oben-hoehe,100px) - 40px)}
.bb-start .h1{max-width:12ch;font-size:clamp(2.3rem,4.2vw,4rem)}
.bb-start .unterzeile{max-width:42ch}
.bb-fakten{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bb-fakten li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:.84rem;color:var(--text-2);border:1px solid var(--linie-stark);background:color-mix(in srgb,var(--panel) 80%,transparent)}
.bb-fakten li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verlauf);box-shadow:0 0 8px rgba(47,107,255,.8)}
.bb-start .einstieg-aktionen{display:flex;margin-top:30px}
.bb-buehne{position:relative;perspective:1800px;padding:20px 0}
.bb-buehne::before{content:"";position:absolute;inset:-6% -8%;background:radial-gradient(50% 50% at 55% 50%,rgba(47,107,255,.45),transparent 70%),radial-gradient(35% 40% at 85% 80%,rgba(155,5,254,.32),transparent 70%);filter:blur(24px);pointer-events:none;opacity:0;transition:opacity 1.6s ease .2s}
.bb-an.bb-buehne::before{opacity:1}
.bb-vn{--rx:16deg;--ry:-16deg;position:relative;margin:0;aspect-ratio:3/2;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.35);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95),0 0 0 1px rgba(143,164,255,.25),0 0 100px -30px rgba(92,203,255,.7);
  transform:rotateX(var(--rx)) rotateY(var(--ry));opacity:0;translate:0 50px;transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity 1s ease,translate 1.3s cubic-bezier(.22,1,.36,1)}
.bb-an .bb-vn{--rx:4deg;--ry:-8deg;opacity:1;translate:0 0}
.bb-buehne.bb-folgt .bb-vn{transition:transform .5s cubic-bezier(.22,1,.36,1),opacity 1s,translate 1.3s}
.bb-vn img{width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.bb-vn-nachher{position:absolute;inset:0}
.bb-vn-vorher{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.bb-vn-linie{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:linear-gradient(180deg,#5CCBFF,#fff 40%,#fff 60%,#C495FF);box-shadow:0 0 18px 3px rgba(92,203,255,.8);pointer-events:none}
.bb-vn-linie i{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:rgba(14,17,27,.55);border:2px solid #fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 0 24px rgba(47,107,255,.8)}
.bb-vn-linie i::before,.bb-vn-linie i::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-4px;border:solid #fff;border-width:0 2px 2px 0}
.bb-vn-linie i::before{left:8px;transform:rotate(135deg)}
.bb-vn-linie i::after{right:8px;transform:rotate(-45deg)}
.bb-funken{position:absolute;top:0;bottom:0;left:var(--p);width:0;pointer-events:none}
.bb-funken i{position:absolute;left:-3px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(92,203,255,.9);opacity:0}
.bb-wischt .bb-funken i{animation:bb-funke 1.2s ease-out infinite}
.bb-funken i:nth-child(1){top:12%}.bb-funken i:nth-child(2){top:30%;animation-delay:.25s!important}.bb-funken i:nth-child(3){top:52%;animation-delay:.5s!important}.bb-funken i:nth-child(4){top:70%;animation-delay:.15s!important}.bb-funken i:nth-child(5){top:88%;animation-delay:.4s!important}
@keyframes bb-funke{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(-40px,-14px) scale(.2)}}
.bb-marke{position:absolute;top:14px;padding:6px 11px;border-radius:999px;font-size:.62rem;color:#fff;background:rgba(14,17,27,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}
.bb-marke-l{left:14px}
.bb-marke-r{right:14px;display:inline-flex;align-items:center;gap:6px;background:linear-gradient(100deg,rgba(47,107,255,.85),rgba(155,5,254,.85))}
.bb-marke-r i svg{width:12px;height:12px;display:block}
.bb-vn-regler{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.bb-chip{position:absolute;z-index:3;left:-3%;bottom:0;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;font-size:.78rem;color:var(--text);background:rgba(14,17,27,.86);border:1px solid rgba(143,164,255,.35);box-shadow:0 20px 40px -18px rgba(0,0,0,.9),0 0 30px -10px rgba(47,107,255,.8);opacity:0;translate:0 14px;transition:opacity .6s ease 2.6s,translate .8s cubic-bezier(.22,1,.36,1) 2.6s}
.bb-chip i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(140deg,var(--cyan),var(--violett))}
.bb-chip svg{width:12px;height:12px;color:#fff}
.bb-an .bb-chip{opacity:1;translate:0 0}

/* ---------- B2 · Bildtypen ---------- */
.bb-typen{position:relative;max-width:1080px;margin:0 auto;padding:18px;border-radius:22px;background:var(--h-grund);border:1px solid rgba(255,255,255,.55);box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 120px -40px rgba(92,203,255,.45)}
.bb-typen-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.bb-reiter{display:flex;flex-wrap:wrap;gap:6px}
.bb-typ{padding:8px 13px;border-radius:10px;border:1.5px solid var(--h-linie);background:var(--bb-f1,#fff);font:600 .78rem/1 "Manrope",sans-serif;color:var(--h-text-2);cursor:pointer;transition:all .3s}
.bb-typ:hover{color:var(--h-text);border-color:var(--bb-rand,#C3CCE0)}
.bb-typ.an{color:var(--bb-blau-t,#2F6BFF);border-color:var(--bb-blau-r,#9DB6FF);background:var(--bb-blass,#EEF2FF);box-shadow:0 0 0 3px rgba(47,107,255,.1)}
.bb-generieren{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-radius:11px;font:700 .82rem/1 "Manrope",sans-serif;color:#fff;background:linear-gradient(100deg,#00B4F9,#2F6BFF 55%,#9B05FE);box-shadow:0 12px 26px -12px rgba(47,107,255,.9);cursor:pointer}
.bb-generieren svg{width:15px;height:15px}
.bb-generieren.laeuft svg{animation:bb-dreh 1s linear infinite}
@keyframes bb-dreh{to{transform:rotate(1turn)}}
.bb-typen-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;align-items:stretch}
.bb-prompt-box{display:flex;flex-direction:column;padding:16px;border-radius:14px;background:var(--bb-f1,#fff);border:1px solid var(--h-linie)}
.bb-prompt{list-style:none;margin:0;padding:0;display:none;gap:9px}
.bb-prompt.an{display:grid}
.bb-prompt li{display:flex;gap:9px;font-size:.84rem;line-height:1.45;min-height:1.45em}
.bb-prompt li::before{content:"";flex:none;width:6px;height:6px;margin-top:.55em;border-radius:50%;background:var(--bb-rand,#C3CCE0);transition:background .3s}
.bb-prompt li.da::before{background:#2F6BFF}
.bb-prompt li.tippt span::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;background:var(--blau);animation:bb-cursor .7s steps(2) infinite}
@keyframes bb-cursor{50%{opacity:0}}
.bb-modell{display:flex;align-items:center;gap:8px;margin:auto 0 0;padding-top:14px;border-top:1px solid var(--h-linie);font-size:.74rem;color:var(--h-text-2)}
.bb-modell i{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;color:#fff;background:linear-gradient(140deg,var(--cyan),var(--violett))}
.bb-modell svg{width:12px;height:12px}
.bb-bildrahmen{position:relative;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:#0E1322}
.bb-tbild{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .4s}
.bb-tbild.an{opacity:1}
.bb-tbild img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.bb-t-nachher{clip-path:inset(0 100% 0 0)}
.bb-tbild.fertig .bb-t-nachher{clip-path:inset(0 0 0 0);transition:clip-path 1.2s cubic-bezier(.65,0,.35,1)}
.bb-scan{position:absolute;top:0;bottom:0;left:-12%;width:12%;background:linear-gradient(90deg,transparent,rgba(92,203,255,.5),#fff 85%,transparent);opacity:0;pointer-events:none;mix-blend-mode:screen}
.bb-bildrahmen.scannt .bb-scan{animation:bb-scan 1.2s cubic-bezier(.65,0,.35,1)}
@keyframes bb-scan{0%{left:-12%;opacity:1}100%{left:100%;opacity:1}}
.bb-ki-marke{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:7px;font-size:.6rem;color:#fff;background:linear-gradient(100deg,#2F6BFF,#9B05FE);opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.bb-ki-marke svg{width:11px;height:11px}
.bb-bildrahmen.ki .bb-ki-marke{opacity:1;transform:none}
.bb-punkte{list-style:none;margin:clamp(28px,3vw,40px) auto 0;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bb-punkte li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:3px;padding:16px;border-radius:16px;border:1px solid var(--linie-stark);background:color-mix(in srgb,var(--panel) 88%,transparent)}
.bb-punkte i{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#fff;background:linear-gradient(140deg,var(--cyan),var(--blau) 55%,var(--violett))}
.bb-punkte i svg{width:17px;height:17px}
.bb-punkte b{font-size:.92rem;font-weight:600}
.bb-punkte small{font-size:.8rem;line-height:1.45;color:var(--text-2)}

/* ---------- B3 · Grundstück ---------- */
.bb-gs{max-width:980px;margin:0 auto;padding:16px;border-radius:22px;background:var(--h-grund);border:1px solid rgba(255,255,255,.55);box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 120px -40px rgba(22,163,106,.35)}
.bb-gs-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.bb-gs-status{font-size:.62rem;color:var(--h-text-2)}
.bb-gs-knoepfe{display:flex;gap:8px}
.bb-k-hell,.bb-k-voll{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;font-size:.76rem;font-weight:600}
.bb-k-hell{border:1px solid var(--h-linie);background:var(--bb-f1,#fff)}
.bb-k-voll{color:#fff;background:linear-gradient(100deg,#00B4F9,#2F6BFF 55%,#9B05FE);transition:box-shadow .3s,transform .3s}
.bb-k-hell svg,.bb-k-voll svg{width:14px;height:14px}
.bb-blur-knopf.leuchtet{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(47,107,255,.2),0 12px 24px -10px rgba(47,107,255,.9)}
.bb-gs-bild{--blur:0px;--clip:polygon(0 0,100% 0,100% 100%,0 100%);position:relative;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:#0E1322}
.bb-gs-bild img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.bb-gs-unscharf{filter:blur(var(--blur)) saturate(calc(1 - var(--blur) / 30px)) brightness(calc(1 + var(--blur) / 60px));transform:scale(1.04)}
.bb-gs-scharf{clip-path:var(--clip)}
.bb-gs-linie{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bb-gs-linie .bb-flaeche{fill:rgba(47,107,255,.08);stroke:none;opacity:0;transition:opacity .4s}
.bb-gs-bild.zu .bb-flaeche{opacity:1}
.bb-gs-linie polyline{fill:none;stroke:#3D7BFF;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(47,107,255,.9))}
.bb-gs-linie circle{fill:#fff;stroke:#2F6BFF;stroke-width:2;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.bb-gs-linie circle.da{opacity:1;transform:none}
.bb-gs-linie circle.bb-start{fill:#E5484D;stroke:#fff}
.bb-gs-bild.fertig polyline{animation:bb-glimm 2.4s ease-in-out infinite}
.bb-gs-bild.fertig .bb-flaeche{opacity:0}
.bb-gs-linie .bb-mitte{fill:#fff}
@keyframes bb-glimm{50%{filter:drop-shadow(0 0 10px rgba(92,203,255,1))}}
.bb-gs-regler{display:flex;align-items:center;gap:14px;margin-top:12px;font-size:.74rem;color:var(--h-text-2)}
.bb-gs-bahn{position:relative;flex:1;height:6px;border-radius:6px;background:var(--bb-bahn,#DCE3F0)}
.bb-gs-bahn i{position:absolute;left:0;top:0;bottom:0;width:var(--rw,0%);border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--blau),var(--violett))}
.bb-gs-bahn b{position:absolute;top:50%;left:var(--rw,0%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #2F6BFF,0 4px 10px rgba(0,0,0,.25)}
.bb-gs-wert{font-style:normal;font-weight:700;color:var(--h-text);min-width:1.5em;font-variant-numeric:tabular-nums}

/* ---------- B4 · Overlay ---------- */
.bb-ov{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.6fr);gap:clamp(16px,2vw,24px);max-width:1080px;margin:0 auto;align-items:stretch}
.bb-ov-bild{position:relative;aspect-ratio:3/2;border-radius:20px;overflow:hidden;background:#0E1322;box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 0 120px -40px rgba(155,5,254,.45)}
.bb-ov-foto{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.bb-ov-ebene{position:absolute;inset:0;pointer-events:none}
.bb-ov-ebene>*{transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .6s ease}
.bb-ov-bogen{position:absolute;inset:0;width:100%;height:100%;transform:translateX(105%)}
.bb-ov-logo{position:absolute;right:5%;top:7%;display:grid;place-items:center;align-content:center;width:18%;aspect-ratio:1;border-radius:50%;font:800 clamp(.6rem,1.3vw,.95rem)/1.05 "Manrope",sans-serif;letter-spacing:.06em;color:#fff;background:#0E1322;border:3px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,.4);transform:scale(0) rotate(-40deg)}
.bb-ov-logo b{font-weight:500;font-size:.75em;color:#8FDCFF}
.bb-ov-makler{position:absolute;right:0;bottom:0;display:flex;align-items:flex-end;height:50%;transform:translateY(105%)}
.bb-ov-makler img{height:100%;width:auto;max-width:none;display:block;filter:drop-shadow(0 10px 20px rgba(0,0,0,.45))}
.bb-m-e{position:relative;z-index:1;height:94%!important;margin-right:-9%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%);mask-image:linear-gradient(90deg,transparent,#000 9%)}
.bb-m-a{position:relative;z-index:2}
.bb-ov-banner{position:absolute;left:0;bottom:8%;display:grid;padding:12px 22px 12px 18px;border-radius:0 12px 12px 0;color:#fff;font-size:.76rem;background:linear-gradient(100deg,rgba(14,17,27,.92),rgba(47,107,255,.92));transform:translateX(-105%)}
.bb-ov-banner b{font-size:1.05rem}
.bb-ov-bild::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 #fff;pointer-events:none;transition:box-shadow .7s cubic-bezier(.22,1,.36,1)}
/* Varianten */
.bb-ov-bild.an[data-variante="bogen"] .bb-ov-bogen,.bb-ov-bild.an[data-variante="bogen"] .bb-ov-makler{transform:none}
.bb-ov-bild.an[data-variante="bogen"] .bb-ov-logo,.bb-ov-bild.an[data-variante="rahmen"] .bb-ov-logo{transform:none}
.bb-ov-bild.an[data-variante="bogen"] .bb-ov-makler{transition-delay:.25s}
.bb-ov-bild.an[data-variante="rahmen"]::after{box-shadow:inset 0 0 0 14px #fff,inset 0 0 0 16px #2F6BFF}
.bb-ov-bild.an[data-variante="rahmen"] .bb-ov-makler{transform:none;height:46%;right:14px;bottom:14px}
.bb-ov-bild.an[data-variante="banner"] .bb-ov-banner{transform:none}
.bb-ov-bild.an[data-variante="banner"] .bb-ov-logo{transform:none;width:13%;right:4%;top:6%}
.bb-ov-ki{position:absolute;left:14px;top:14px;padding:5px 10px;border-radius:999px;font-size:.58rem;color:#fff;background:rgba(14,17,27,.65);opacity:0;transition:opacity .4s .6s}
.bb-ov-bild.an .bb-ov-ki{opacity:1}
.bb-ov-seite{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:20px;background:var(--h-grund);border:1px solid rgba(255,255,255,.55);box-shadow:0 50px 100px -50px rgba(0,0,0,.95)}
.bb-ov-varianten{display:grid;gap:8px}
.bb-ov-varianten button{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;border:1.5px solid var(--h-linie);background:var(--bb-f1,#fff);font:600 .8rem/1 "Manrope",sans-serif;color:var(--h-text);cursor:pointer;transition:all .3s}
.bb-ov-varianten button.an{border-color:var(--bb-blau-r,#9DB6FF);background:var(--bb-zart,#F2F5FF);box-shadow:0 0 0 3px rgba(47,107,255,.1)}
.bb-v{position:relative;width:48px;height:32px;border-radius:6px;overflow:hidden;background:var(--bb-v,#C9D3E8)}
.bb-v-bogen::after{content:"";position:absolute;right:-14px;bottom:-14px;width:36px;height:36px;border-radius:50%;background:linear-gradient(140deg,#00B4F9,#9B05FE)}
.bb-v-rahmen{box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px #2F6BFF}
.bb-v-banner::after{content:"";position:absolute;left:0;bottom:6px;width:60%;height:9px;border-radius:0 3px 3px 0;background:linear-gradient(90deg,#0E1322,#2F6BFF)}
.bb-hochladen{display:grid;justify-items:center;gap:5px;margin-top:auto;padding:16px 10px;border-radius:14px;border:1.5px dashed var(--bb-rand,#C3CCE0);text-align:center}
.bb-hochladen svg{width:20px;height:20px;color:var(--h-text-2)}
.bb-hochladen b{font-size:.8rem}
.bb-hochladen small{font-size:.66rem;color:var(--h-text-2)}

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width:900px){
  .bb-start-innen{grid-template-columns:1fr;min-height:0}
  .bb-typen-raster,.bb-ov{grid-template-columns:1fr}
  .bb-punkte{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .bb-vn{--rx:0deg;--ry:0deg}.bb-an .bb-vn{--rx:0deg;--ry:0deg}
  .bb-chip{left:2%;bottom:-8px}
  .bb-punkte{grid-template-columns:1fr}
  .bb-typen,.bb-gs{padding:12px}
  .bb-gs-knoepfe .bb-k-hell{display:none}
}
@media (min-width:901px) and (max-height:860px){
  .bb-start .h1{font-size:clamp(2.2rem,3.5vw,3.3rem)}
  .bb-fakten{margin-top:18px}
  .bb-start .einstieg-aktionen{margin-top:22px}
}
@media (prefers-reduced-motion:reduce){
  .bb-seite *,.bb-seite *::before,.bb-seite *::after{transition:none!important;animation:none!important}
  .bb-vn{opacity:1;translate:0 0}.bb-chip{opacity:1;translate:0 0}
}
/* Größen straffen: Bilder sind 600 px breit, nicht größer als nötig zeigen */
.bb-typen{max-width:980px}
.bb-ov{max-width:920px}
@media (min-width:901px){.bb-typen-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.bb-ov{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}}
.bb-gs{max-width:820px}
/* Grundstück passt mit Überschrift in eine Bildhöhe (angeheftet) */
.bb-gs{max-width:min(820px,calc((100svh - 520px) * 1.5 + 32px))}

/* ---------- Dunkle Abschnitte im Stil der übrigen Website (Karten wie auf KI-Agenten): Bildtypen, Overlay-Auswahl ---------- */
.bb-dunkel{--h-grund:var(--panel);--h-linie:rgba(255,255,255,.09);--h-text:#F6F4EE;--h-text-2:#A7AAB6;--h-text-3:#6F7281;--bb-f1:#161A24;--bb-f2:#1C2130;
  --bb-rand:rgba(255,255,255,.18);--bb-blau-t:#8FA4FF;--bb-blau-r:rgba(143,164,255,.55);--bb-blass:rgba(110,140,255,.14);--bb-zart:rgba(255,255,255,.04);--bb-bahn:#1C2130;--bb-v:#2A3042;color:var(--h-text)}
.bb-typen.bb-dunkel,.bb-ov-seite.bb-dunkel{background:var(--panel);border:1px solid var(--linie);box-shadow:var(--schatten)}
.bb-dunkel .bb-typ.an{box-shadow:none}
.bb-dunkel .bb-prompt li.da::before{background:#5C7CFF}
.bb-dunkel .bb-ov-varianten button.an{box-shadow:none}

/* ---------- Handy und Tablet (Feedback iPhone 18.10.2026) ---------- */
/* Grundstück: die Breitenbegrenzung über die Bildhöhe gilt nur am Desktop (angeheftet). Auf dem iPhone ist 100svh klein,
   die Grafik schrumpfte auf rund 240 px Breite */
@media (max-width:900px){
  .bb-gs{max-width:820px}
  /* Bildflächen: Höhe über einen Platzhalter statt aspect-ratio. Safari ignoriert aspect-ratio bei gestreckten
     Rasterelementen, die Flächen waren dort 0 px hoch (Bildtypen und Overlay ohne Bild) */
  .bb-bildrahmen,.bb-ov-bild,.bb-gs-bild{aspect-ratio:auto;height:auto;align-self:start}
  .bb-bildrahmen::before,.bb-ov-bild::before,.bb-gs-bild::before{content:"";display:block;padding-top:66.667%}
  /* Bildtypen: das Bild steht über dem Prompt, damit man beim Generieren sieht, wie das neue Bild entsteht */
  .bb-typen-raster .bb-bildrahmen{order:-1}
}
/* Grundstück Handy: Statuszeile immer allein in der ersten Zeile, Knopf darunter. Vorher stand der Knopf je nach Textlänge
   daneben oder darunter, die Karte sprang um 25 px (Feedback 18.10.2026) */
@media (max-width:640px){
  .bb-gs-status{flex-basis:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Handy: Prompt-Zeilen reservieren ihre volle Höhe schon vor dem Tippen. Vorher brachen die Zeilen erst beim Tippen um,
   die Bildtypen-Karte wuchs dabei von 551 auf 590 px. Alle drei Prompts liegen im selben Rasterfeld, die Karte ist so hoch
   wie der längste und springt beim Reiterwechsel nicht (18.10.2026) */
@media (max-width:640px){
  .bb-prompt-box{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr}
  .bb-prompt-box .bb-klein{grid-area:1/1}
  .bb-prompt,.bb-prompt.an{display:grid;grid-area:2/1}
  .bb-prompt{visibility:hidden;align-content:start}.bb-prompt.an{visibility:visible}
  .bb-prompt-box .bb-modell{grid-area:3/1;margin-top:0}
  .bb-prompt li{display:grid;grid-template-columns:6px minmax(0,1fr);column-gap:9px}
  .bb-prompt li::before{grid-area:1/1}
  .bb-prompt li span,.bb-prompt li::after{grid-area:1/2;min-width:0}
  .bb-prompt li::after{content:attr(data-text);visibility:hidden}
  /* Kleine Beschriftungen nicht unter 0.62rem */
  .bb-klein,.bb-ov-ki{font-size:.62rem}
  .bb-ov-logo{font-size:.7rem}
  /* Safari: abgerundete Bildflächen schneiden gedrehte/gefilterte Kinder sonst eckig */
  .bb-bildrahmen{clip-path:inset(0 round 14px)}
  .bb-gs-bild{clip-path:inset(0 round 14px)}
  .bb-ov-ebene{clip-path:inset(0 round 20px)}
}
/* Handy Grundstück: „Rückgängig“ wieder zeigen wie am Desktop, die Statuszeile steht jetzt allein, beide Knöpfe passen
   nebeneinander (18.10.2026) */
@media (max-width:640px){
  .bb-gs-knoepfe .bb-k-hell{display:inline-flex}
}