@font-face { font-family:"Myriad Pro"; font-weight:300; font-display:swap; src:url("../assets/fonts/MyriadPro-Light.woff2") format("woff2"); }
@font-face { font-family:"Myriad Pro"; font-weight:400; font-display:swap; src:url("../assets/fonts/MyriadPro-Regular.woff2") format("woff2"); }
@font-face { font-family:"Myriad Pro"; font-weight:600; font-display:swap; ascent-override:92.4%; descent-override:25%; line-gap-override:0%;
  src:url("../assets/fonts/MyriadPro-Semibold.woff2") format("woff2"); }

/* Dunkles Design (Marco 19.10.): warmes Fast-Schwarz, Bilder tragen die Seite. Bewusst nur ein Thema. */
:root {
  color-scheme:dark;
  --bg:#121110; --bg-2:#1a1917; --bg-3:#23211e; --bg-4:#2d2a26;
  --ink:#f3f0ea; --ink-2:#cdc7bd; --ink-3:#958e84;
  --line:#33302b; --line-2:#4a463f;
  --ok:#8cc79a; --warn:#e5967a; --mess:#7fb2e5;
  --font:"Myriad Pro", "Segoe UI", system-ui, sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1280px; --gut:clamp(16px, 4vw, 48px);
  --head:64px; --trust:34px;
  /* sehr feine Körnung wie mattes Papier, nur Weiß mit 4 % Deckkraft */
  --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--korn), radial-gradient(120% 60% at 50% 0%, #1b1916 0%, var(--bg) 60%) fixed, var(--bg); color:var(--ink); font-family:var(--font); font-weight:300; font-size:18px; line-height:1.5; overflow-x:hidden; }
img,video { display:block; max-width:100%; }
a { color:inherit; }
h1,h2,h3 { font-weight:300; line-height:1.08; margin:0; text-wrap:balance; letter-spacing:-.01em; }
h1 { font-size:clamp(38px, 6vw, 80px); }
h2 { font-size:clamp(28px, 3.4vw, 44px); }
h3 { font-size:22px; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--mess); outline-offset:3px; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:16px; top:16px; z-index:99; padding:10px 14px; background:var(--ink); color:var(--bg); }
.wrap { max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }
.eyebrow { margin:0; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.lead { margin:0; font-size:clamp(19px, 1.6vw, 22px); color:var(--ink-2); max-width:62ch; }
.lead--small { font-size:18px; }
.note { margin:0; color:var(--ink-2); }
.fine { margin:0; font-size:14px; color:var(--ink-3); }
.soft { color:var(--ink-3); }
.tab { font-variant-numeric:tabular-nums; }
.link { padding:0; border:0; background:none; font:inherit; font-size:16px; color:var(--ink-2); text-decoration:underline; text-underline-offset:4px; cursor:pointer; text-align:left; }
.link:hover { color:var(--ink); }
.link--small { font-size:14px; color:var(--ink-3); }

/* Buttons: eckig, ruhig; Hauptaktion hell auf dunkel */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 30px;
  font:inherit; font-size:17px; font-weight:400; letter-spacing:.02em; color:var(--bg); background:var(--ink); border:1px solid var(--ink);
  border-radius:0; text-decoration:none; cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease), opacity .25s; }
.btn:hover { background:#fff; }
.btn:active { transform:scale(.98); }
.btn--ghost { background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover { background:var(--bg-3); border-color:var(--ink-3); }
.btn--wide { width:100%; }
.btn:disabled, .btn.is-off { opacity:.35; cursor:not-allowed; transform:none; }

/* Vertrauensleiste + Kopf wie im Shop */
.trust { height:var(--trust); background:transparent; color:rgba(243,240,234,.85); font-size:13px; letter-spacing:.02em; overflow:hidden; position:relative; z-index:31; }
.trust__list { list-style:none; margin:0; padding:0 var(--gut); height:100%; display:flex; align-items:center; justify-content:center; gap:40px; }
.trust__list li { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.stars { display:inline-flex; gap:2px; }
.stars i { width:11px; height:11px; background:#e9c46a; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.kopf { position:fixed; inset:0 0 auto 0; z-index:30; transition:background .35s var(--ease), box-shadow .35s;
  background:linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 60%, rgba(0,0,0,0) 100%); }
.kopf.is-solid { background:rgba(18,17,16,.9); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 1px 0 rgba(255,255,255,.06); }
.top { height:var(--head); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:0 var(--gut); text-shadow:0 1px 8px rgba(0,0,0,.35); }
.top__nav { display:flex; align-items:center; gap:22px; font-size:15px; }
.top__nav a { text-decoration:none; color:var(--ink-2); }
.top__nav a:hover { color:var(--ink); }
.top__menu { display:inline-flex; align-items:center; gap:8px; }
.top svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.top__logo img { height:22px; width:auto; }
.top__right { display:flex; justify-content:flex-end; align-items:center; gap:18px; }
.top__cart { display:inline-flex; color:#fff; }
.top svg.top__wagen { width:24px; height:17px; stroke-width:1.5; }
.top__wagen circle { fill:currentColor; stroke:none; }
.top__nav a:not(.top__menu), .top__menu span { position:relative; top:1.5px; }   /* Myriad sitzt hoch: Schrift auf die Mitte der Symbole (Marco 28.10.) */
/* Planer-Konto: Anmelden mit Google- und Apple-Symbol */
/* Marco 28.10. (Fassung 30): ohne Rahmen und Kasten, nur die beiden Symbole, zurückhaltend; angemeldet steht „Ihr Konto“ daneben */
.top__login { display:inline-flex; align-items:center; gap:8px; min-height:40px; min-width:40px; padding:0 4px; font:inherit; font-size:15px; color:var(--ink-2);
  background:none; border:0; cursor:pointer; opacity:.8; transition:opacity .2s; }
.top__login:hover, .top__login:focus-visible { opacity:1; color:var(--ink); }
.top__login:focus-visible { outline:1px solid var(--ink-3); outline-offset:2px; }
.top__login:not(.is-an) [data-konto-label] { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.top__login-ico { display:inline-flex; gap:10px; }
.top__login-ico svg { width:18px; height:18px; stroke:none; }   /* Marco 28.10.: ohne Umriss, sonst bekam das G einen weißen Rand */
.konto-hinweis svg { stroke:none; }
.top__login .ico-a, .konto-hinweis .ico-a { color:#fff; }
.konto-hinweis { margin:0; }
.konto-hinweis__knopf { display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:0 18px; font:inherit; font-size:16px; color:var(--ink);
  background:var(--bg-3); border:1px solid var(--line-2); cursor:pointer; }
.konto-hinweis__knopf:hover { border-color:var(--ink-3); }
/* Anmeldefenster (Marco 28.10., Fassung 30: „ein richtig hochwertiges Modal“). Eine Spalte, alle drei Knöpfe exakt gleich breit (--kw, aus JS)
   und 40 px hoch. Den Google-Knopf zeichnet Google selbst (filled_black, large), Apple und „Schließen“ folgen genau diesem Maß. */
.dlg--konto { width:min(440px, calc(100vw - 24px)); }
.dlg--konto .dlg__box { gap:24px; padding:clamp(24px, 6vw, 40px) clamp(20px, 6vw, 36px); }
.dlg--konto h2 { font-size:clamp(22px, 5.6vw, 26px); font-weight:300; line-height:1.25; letter-spacing:.005em; text-wrap:balance; }
.konto { display:flex; flex-direction:column; gap:14px; }
.konto--aus { gap:18px; }
.konto__text { margin:0; font-size:15px; line-height:1.55; color:var(--ink-2); }
.konto__text a { color:var(--ink); }
.konto__knoepfe { display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:6px; }
/* L4: Der Planer läuft in color-scheme:dark, Googles iframe hell. Bei ungleichem Farbschema malt Chrome das iframe deckend weiß
   (der weiße Rahmen um den Knopf). Mit light am Behälter ist der iframe-Hintergrund durchsichtig. */
.konto__google { position:relative; width:var(--kw, 300px); max-width:100%; height:40px; color-scheme:light; }
.konto__google iframe { color-scheme:light; }
/* L2: Bis Googles Knopf fertig geladen ist, bleibt er unsichtbar (sonst blitzt das G kurz riesengroß auf); an seiner Stelle eine ruhige Fläche */
.konto__google.is-laedt > * { visibility:hidden; }
/* L2 Nachbesserung (Marco 28.10.): Google setzt beim Öffnen einen eigenen Platzhalter-Knopf mit SVG-G in unsere Seite; sein Stylesheet
   (gsi/style) kommt erst danach, bis dahin ist das G so breit wie das Fenster (gemessen 321 x 321 px). Wir zeigen nur Googles iframe,
   der Platzhalter erscheint nie. Ohne :has (alte Browser) begrenzt die zweite Regel jedes SVG dort auf Symbolgröße. */
.konto__google :not(iframe):not(:has(iframe)) { display:none !important; }
.konto__google svg { width:18px !important; height:18px !important; max-width:18px; max-height:18px; overflow:hidden; }
.konto__google.is-laedt::before { content:""; position:absolute; inset:0; background:#202124; border-radius:4px; }
.konto__apple, .konto__zu { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:var(--kw, 300px); max-width:100%; height:40px; padding:0 12px;
  font-family:Roboto, Arial, sans-serif; font-size:14px; font-weight:500; letter-spacing:.25px; border-radius:4px; cursor:pointer; }
.konto__apple { color:#fff; background:#202124; border:1px solid #202124; }   /* genau wie Googles filled_black (nachgemessen 28.10.): Fläche #202124, kein sichtbarer Rand */
.konto__apple:hover { background:#2b2c30; border-color:#2b2c30; }
.konto__fuss { display:flex; justify-content:center; padding-top:20px; border-top:1px solid var(--line); }
.konto__zu { width:var(--kw, 300px); color:var(--ink-2); background:none; border:1px solid var(--line-2); }
.konto__zu:hover { color:var(--ink); border-color:var(--ink-3); }
.konto__apple:focus-visible, .konto__zu:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.konto__apple svg { width:18px; height:18px; flex:none; }
.konto__wer { margin:0; font-size:17px; }
.konto__loeschen { padding-top:12px; border-top:1px solid var(--line); }
.konto__frage { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.konto__frage p { margin:0; color:var(--ink-2); }
.btn--warn { background:var(--warn); border-color:var(--warn); color:#1a0f0b; }
.btn--warn:hover { background:#f0a98f; }
.konto-fertig main { padding-block:80px; display:flex; flex-direction:column; gap:20px; }

/* Hero: bildgewaltig, Verlauf in die Seite */
.hero { position:relative; background:var(--bg); }
.hero__bild { position:relative; width:100%; height:min(90svh, 56.25vw); overflow:hidden; background:#e9e4dc; }   /* 90 %: der nächste Abschnitt schaut unten hervor */
.hero__ebene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:54% 50%; }
.hero__ebene--neu { clip-path:inset(0 100% 0 0); }
.hero__ebene--neu.is-wisch { clip-path:inset(0 0 0 0); transition:clip-path .9s cubic-bezier(.6, 0, .25, 1); }
.hero__linie { position:absolute; top:0; bottom:0; left:0; width:2px; margin-left:-1px; background:rgba(255,255,255,.92); box-shadow:0 0 18px rgba(0,0,0,.35); pointer-events:none; }
.hero__linie.is-wisch { left:100%; transition:left .9s cubic-bezier(.6, 0, .25, 1); }
.hero__ebene--neu.is-wisch.is-schnell, .hero__linie.is-wisch.is-schnell { transition-duration:.8s; }   /* erster Wechsel (Marco 28.10.) */
.hero__shade { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(18,17,16,.78) 0, rgba(18,17,16,.42) 12%, rgba(18,17,16,0) 28%, rgba(18,17,16,0) 64%, var(--bg) 100%); }   /* oben kräftiger: Menü lesbar (Marco 28.10.) */
.hero__caption { position:absolute; left:var(--gut); bottom:clamp(20px, 5vw, 64px); margin:0; display:flex; align-items:center; gap:14px;
  font-size:15px; letter-spacing:.04em; color:var(--ink); text-shadow:0 1px 12px rgba(0,0,0,.6); }
.hero__ticks { display:flex; gap:5px; }
.hero__ticks i { width:18px; height:2px; background:rgba(255,255,255,.35); transition:background .3s; }
.hero__ticks i.is-on { background:#fff; }
/* Weg nach unten (Marco 27.10. abends): kein Knopf im Bild, größere weiße Schrift, Pfeil zentriert darunter, wippt sanft */
.hero__weiter { position:absolute; left:50%; bottom:clamp(12px, 2.4vw, 32px); transform:translateX(-50%); z-index:2; display:inline-flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px 14px; font-size:clamp(21px, 1.9vw, 30px); font-weight:300; letter-spacing:.03em; color:#fff; text-decoration:none; white-space:nowrap;
  text-shadow:0 1px 14px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.4); transition:opacity .25s var(--ease); }
.hero__weiter:hover { opacity:.82; }
.hero__weiter:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.hero__weiter svg { filter:drop-shadow(0 1px 6px rgba(0,0,0,.7)); }
.hero__weiter svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; animation:weiter 1.8s var(--ease) infinite; }
@keyframes weiter { 0%,100% { transform:translateY(-2px); } 50% { transform:translateY(4px); } }

.intro { display:flex; flex-direction:column; align-items:flex-start; gap:22px; padding-block:clamp(32px, 5vw, 72px) clamp(48px, 7vw, 96px); }
.intro__cta { display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; }
.facts { list-style:none; margin:20px 0 0; padding:24px 0 0; border-top:1px solid var(--line); width:100%;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:24px; }
.facts strong { display:block; font-size:26px; font-weight:300; }
.facts span { color:var(--ink-3); font-size:16px; }

/* Schwebender Start-Button */
.float { position:fixed; z-index:25; right:var(--gut); bottom:calc(20px + env(safe-area-inset-bottom)); display:inline-flex; align-items:center; min-height:54px; padding:0 28px;
  background:var(--ink); color:var(--bg); text-decoration:none; font-size:17px; box-shadow:0 18px 40px -16px rgba(0,0,0,.8); animation:floatIn .4s var(--ease); }
@keyframes floatIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* Planer */
.planer { background:var(--korn), linear-gradient(180deg, #1e1c19 0%, var(--bg-2) 30%, var(--bg-2) 100%); padding-block:clamp(40px, 6vw, 80px); scroll-margin-top:calc(var(--head) + var(--trust)); }
.progress { height:3px; background:var(--line); margin-bottom:10px; }
.progress__bar { display:block; height:3px; width:0; background:var(--ink); transition:width .5s var(--ease); }
.progress__text { margin:0 0 28px; font-size:14px; color:var(--ink-3); letter-spacing:.04em; }
.step { display:flex; flex-direction:column; gap:24px; animation:stepIn .45s var(--ease); }
@keyframes stepIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.actions--grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.actions--grid .btn { padding:0 12px; font-size:15px; }

.choice { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:20px; }
.choice__card { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:0 0 24px; text-align:left; font:inherit; color:inherit;
  background:var(--bg-3); border:1px solid var(--line); cursor:pointer; transition:border-color .25s, transform .3s var(--ease), box-shadow .3s; overflow:hidden; }
.choice__card:hover { border-color:var(--ink-3); transform:translateY(-3px); box-shadow:0 22px 44px -24px rgba(0,0,0,.9); }
.choice__card img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.choice__icon { width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:var(--bg-4); }
.choice__icon svg { width:64px; height:64px; fill:none; stroke:var(--ink); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.choice__title { padding:12px 24px 0; font-size:26px; }
.choice__text { padding:0 24px; color:var(--ink-3); font-size:16px; }

.rooms { display:flex; flex-direction:column; gap:12px; margin-bottom:clamp(28px, 4vw, 48px); padding-bottom:clamp(28px, 4vw, 48px); border-bottom:1px solid var(--line); }
.rooms .lead { margin-top:-4px; }
[data-start-titel].is-klein { font-size:clamp(20px, 2vw, 26px); color:var(--ink-2); }
.room small { display:block; padding:0 10px 10px; font-size:13px; color:var(--ok); }
.intro__konto { margin:-8px 0 0; }
/* Beispielraum: Einladung zum eigenen Foto */
.stage__img.is-gewaehlt { filter:grayscale(.35) brightness(.55); }
.stage__auftrag { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%, -50%); width:min(440px, calc(100% - 32px)); display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:20px 22px; text-align:center; background:rgba(18,17,16,.86); border:1px solid var(--line-2); box-shadow:0 18px 44px -18px rgba(0,0,0,.95); }
.stage__auftrag p { margin:0; font-size:17px; line-height:1.4; color:var(--ink); }
.stage__auftrag p strong { font-weight:600; }
.stage__auftrag-knopf { min-height:52px; padding:0 28px; font-size:17px; }
.blase { position:absolute; z-index:4; top:12px; right:12px; left:auto; max-width:min(420px, calc(100% - 24px)); display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  padding:14px 40px 14px 16px; background:var(--ink); color:var(--bg); box-shadow:0 18px 40px -16px rgba(0,0,0,.9); animation:blase .4s var(--ease); }
.blase p { margin:0; font-size:15px; line-height:1.4; flex:1 1 220px; }
.blase .btn { min-height:44px; padding:0 16px; background:var(--bg); color:var(--ink); border-color:var(--bg); }
.blase--wahl { left:12px; right:auto; }
.blase__zu { position:absolute; top:4px; right:4px; width:36px; height:36px; border:0; background:none; color:inherit; font-size:22px; cursor:pointer; }
@keyframes blase { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.rooms__list { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap:12px; }
.room { display:flex; flex-direction:column; padding:0; text-align:left; font:inherit; font-size:15px; color:inherit; background:var(--bg-3); border:1px solid var(--line); cursor:pointer; }
.room img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.room span { padding:8px 10px; }

/* Tutorial-Animationen */
.tut { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:20px; margin:0; }
.tut__item { margin:0; display:flex; flex-direction:column; gap:12px; background:var(--bg-3); padding:20px; border:1px solid var(--line); }
.tut__item figcaption { font-size:16px; color:var(--ink-2); }
.tut__item strong { display:block; font-weight:600; color:var(--ink); margin-bottom:2px; }
.tut__anim { position:relative; height:150px; background:var(--bg-4); overflow:hidden; }
.tut__wall { position:absolute; left:50%; top:22px; width:110px; height:84px; margin-left:-55px; border:2px solid var(--line-2); background:#3a3631; }
.tut__wall::after { content:""; position:absolute; left:20px; right:20px; bottom:6px; height:14px; background:var(--ink-3); }
.tut__phone { position:absolute; z-index:2; left:50%; top:44px; width:46px; height:80px; margin-left:-23px; border:3px solid var(--ink); border-radius:8px; background:rgba(255,255,255,.08); }
.tut__anim--gerade .tut__phone { animation:tilt 3.2s var(--ease) infinite; }
@keyframes tilt { 0%,15% { transform:rotate(-16deg); border-color:var(--warn); } 45%,100% { transform:rotate(0); border-color:var(--ok); } }
.tut__anim--abstand .tut__phone { animation:back 3.2s var(--ease) infinite; }
@keyframes back { 0%,15% { transform:scale(1.9); border-color:var(--warn); } 45%,100% { transform:scale(1); border-color:var(--ok); } }
.tut__anim--frontal .tut__phone { animation:side 3.2s var(--ease) infinite; }
@keyframes side { 0%,15% { transform:translateX(70px) skewY(-10deg); border-color:var(--warn); } 45%,100% { transform:none; border-color:var(--ok); } }
/* Mit Blitz: gelbstichige Wand wird neutral */
.tut__anim--blitz .tut__wall { animation:blitzwand 3.2s var(--ease) infinite; }
@keyframes blitzwand { 0%,40% { background:#5c4728; } 50%,100% { background:#b9b4ab; } }
.tut__anim--blitz .tut__phone::after { content:""; position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--ink); }
.tut__anim--blitz::after { content:""; position:absolute; inset:0; z-index:3; background:#fff; opacity:0; pointer-events:none; animation:blitz 3.2s var(--ease) infinite; }
@keyframes blitz { 0%,40% { opacity:0; } 44% { opacity:.6; } 62%,100% { opacity:0; } }

/* Fassung 35 (Marco 28.10.): Foto-Regeln mit Beispielbild, KI-Prüfung, Maße nacheinander */
.regeln, .regeln-ok, .pruef, .teil { display:flex; flex-direction:column; gap:20px; }
.punkte { display:flex; gap:6px; }
.punkte i { width:34px; height:4px; background:var(--line-2); transition:background .3s; }
.punkte i.is-on { background:var(--ink); }
.regel { display:flex; flex-direction:column; gap:14px; animation:stepIn .35s var(--ease); }
.regel h3 { font-size:clamp(24px, 2.6vw, 32px); font-weight:400; }
.regel p { margin:0; font-size:18px; line-height:1.45; color:var(--ink-2); max-width:62ch; }
.paar { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; max-width:980px; }
.paar__bild { position:relative; margin:0; display:flex; flex-direction:column; background:var(--bg-3); border:2px solid var(--line); }
.paar__bild img, .paar__bild svg { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; }
.paar__bild figcaption { padding:10px 12px; font-size:15px; line-height:1.35; color:var(--ink); }
.paar__bild b { font-weight:700; margin-right:4px; }
.paar__bild--falsch { border-color:var(--warn); }
.paar__bild--falsch b { color:var(--warn); }
.paar__bild--richtig { border-color:var(--ok); }
.paar__bild--richtig b { color:var(--ok); }
.paar--skizze svg { aspect-ratio:320 / 170; background:var(--bg-4); }
.sk-wand { fill:#3a3631; stroke:var(--line-2); stroke-width:2; }
.sk-tuer { fill:#5a544b; stroke:var(--ink-3); stroke-width:2; }
.sk-griff { fill:var(--ink-2); }
.sk-boden { stroke:var(--ink-3); stroke-width:2; }
.sk-mass { stroke-width:3; fill:none; }
.sk-mass--falsch { stroke:var(--warn); }
.sk-mass--richtig { stroke:var(--ok); }
.sk-text { fill:var(--ink); font-size:14px; font-family:inherit; text-anchor:middle; }
.haken { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:16px; color:var(--ink-2); }
.haken li::before { content:"✓"; margin-right:8px; color:var(--ok); font-weight:700; }
.pruef { flex-direction:row; flex-wrap:wrap; align-items:flex-start; }
.pruef__bild { width:min(100%, 420px); height:auto; border:1px solid var(--line-2); }
.pruef__text { flex:1 1 300px; display:flex; flex-direction:column; gap:14px; }
.pruef__lauf { margin:0; display:flex; align-items:center; gap:12px; font-size:19px; color:var(--ink); }
.pruef__lauf .duell__spin { border-color:rgba(243,240,234,.25); border-top-color:var(--ink); }
.pruef__mangel { display:flex; flex-direction:column; gap:14px; }
.pruef__mangel h2 { font-size:clamp(24px, 2.6vw, 32px); }
.pruef__liste { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:17px; line-height:1.45; color:var(--ink); }
.pruef__liste li::marker { color:var(--warn); }
.geprueft { margin:0; display:flex; gap:12px; align-items:flex-start; padding:14px 16px; font-size:17px; line-height:1.4; color:var(--ink);
  background:rgba(140,199,154,.12); border:1px solid var(--ok); max-width:820px; animation:stepIn .4s var(--ease); }
.geprueft b { color:var(--ok); font-size:20px; line-height:1; }
.geprueft.is-neutral { background:var(--bg-3); border-color:var(--line-2); }
.geprueft.is-neutral b { display:none; }
.field--breite { max-width:320px; }
.fine--warn { color:var(--warn); min-height:1em; }
.measure.is-flaeche .measure__b { opacity:.25; pointer-events:none; }
.measure.is-boden .measure__h, .measure.is-boden .measure__span { opacity:.25; pointer-events:none; }
.measure__hand { position:absolute; z-index:3; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.28); border:2px solid #fff; box-shadow:0 0 0 6px rgba(255,255,255,.12); animation:fingerkreis 1.3s var(--ease) infinite; }
@keyframes fingerkreis { 0%, 100% { transform:scale(.85); opacity:.95; } 50% { transform:scale(1.1); opacity:.6; } }
@media (prefers-reduced-motion: reduce) { .measure__hand, .regel { animation:none; } }
@media (max-width: 640px) { .paar { grid-template-columns:1fr; gap:10px; } .regel p { font-size:17px; } }
/* Marco 28.10. (iPhone, Fold): jeder Foto-Punkt passt ohne Scrollen auf den Bildschirm, „Verstanden“ inklusive.
   Auch niedrige Touch-Bildschirme (Fold innen 821 × 630) bekommen die kompakte Ansicht. */
@media (max-width: 640px), (pointer: coarse) and (max-height: 760px) {
  .regeln { gap:10px; }
  .regeln > h2, .regeln > .lead { display:none; }
  .regeln > .eyebrow::before { content:attr(data-titel) " · "; }   /* Text aus der Sprachdatei (planer.js setzt data-titel) */
  .regeln .punkte { display:none; }
  .regel { gap:8px; }
  .regel h3 { font-size:22px; }
  .regel p { font-size:16px; line-height:1.4; }
  .regel .paar { gap:8px; }
  .regel .paar__bild { border-width:2px; }
  .regel .paar__bild img { height:clamp(104px, 21.5svh, 210px); object-fit:contain; background:#0d0c0b; }
  .regel .paar__bild figcaption { position:absolute; left:0; right:0; bottom:0; padding:5px 8px; font-size:13px; background:rgba(13,12,11,.82); }
  .regeln > .actions { flex-wrap:nowrap; gap:10px; }
  .regeln > .actions .btn { min-height:48px; padding:0 18px; }
  .regeln > .actions .btn:first-child { flex:1; }
}
@media (pointer: coarse) and (max-height: 760px) and (min-width: 641px) {   /* Fold innen: zwei Bilder nebeneinander, niedrig */
  .regel .paar { grid-template-columns:1fr 1fr; max-width:none; }
  .regel .paar__bild img { height:clamp(104px, 30svh, 240px); }
  .regeln > .actions { max-width:520px; }
}
@media (max-width: 640px) and (max-height: 620px) {   /* iPhone SE und ähnlich kleine */
  .regel h3 { font-size:20px; }
  .regel p { font-size:15px; line-height:1.35; }
  .regeln > .actions .btn { min-height:44px; }
}
/* Wiederkehrer (Marco 28.10.): schlanker Kopf, keine Diashow, keine Schrittanzeige */
.kurzkopf { display:none; margin:0 0 18px; font-size:17px; color:var(--ink-2); }
.kurzkopf .eyebrow { display:block; margin-bottom:4px; }
.is-wieder .hero, .is-wieder .intro { display:none; }
.is-wieder .kurzkopf { display:block; }
.is-wieder:not([data-schritt="start"]) .kurzkopf { display:none; }   /* im Raum steht das Bild ganz oben (Marco 28.10.) */
.is-wieder .progress, .is-wieder .progress__text { display:none !important; }
.is-wieder main { padding-top:calc(var(--head) + var(--trust)); }   /* sonst liegt der Inhalt unter der festen Kopfleiste */
.is-wieder .planer { padding-top:clamp(20px, 4vw, 40px); }
/* „Gut zu wissen“ nur auf der Startseite beim ersten Besuch (Marco 28.10.: in den Schritten lenkt es ab) */
html:not([data-schritt="start"]) .faq, .is-wieder .faq { display:none; }
.nur-handy { display:none; }
.breite-eins { margin:0; }
.breite-eins img { display:block; width:100%; height:auto; border:1px solid var(--line-2); }
@media (max-width: 640px), (pointer: coarse) and (max-height: 760px) {
  .nur-handy { display:block; }
  .nur-gross { display:none !important; }
  /* „Jetzt Ihr Foto“: ohne Scrollen bis zum Upload-Knopf */
  .regeln-ok { gap:10px; }
  .regeln-ok h2 { font-size:24px; }
  .regeln-ok .haken, .regeln-ok > .note, .regeln-ok .privacy h3 { display:none; }
  .regeln-ok .privacy { padding:10px 12px; gap:8px; }
  .regeln-ok .privacy ul { font-size:13.5px; line-height:1.35; gap:4px; padding-left:16px; }
  .regeln-ok .check { font-size:13.5px; line-height:1.35; gap:10px; }
  .regeln-ok .actions .btn { min-height:48px; }
  /* Teil 1 „freie Breite“ */
  [data-step="masse"] { gap:10px; }
  .geprueft { padding:7px 10px; font-size:14px; gap:8px; }
  .geprueft b { font-size:16px; }
  .punkte--teil { display:none; }
  .teil { gap:10px; }
  .teil h2 { font-size:24px; }
  [data-teil="breite"] .lead { font-size:15px; line-height:1.35; }
  .breite-eins img { max-height:25svh; width:auto; max-width:100%; margin-inline:auto; }
  .field--breite { max-width:none; gap:4px; }
  .field--breite .unit input { min-height:46px; }
  .fine--warn:empty { display:none; }
  [data-step="masse"] .actions .btn { min-height:46px; }
}
@media (max-width: 640px) and (max-height: 620px) {   /* iPhone SE */
  .breite-eins img { max-height:20svh; }
  [data-teil="breite"] .lead { font-size:14px; }
  .field--breite .field__label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
@media (pointer: coarse) and (max-height: 760px) and (min-width: 641px) {
  .breite-eins img { max-height:24svh; margin-inline:0; }   /* iPhone Fold aufgeklappt quer (890 × 540) */
  .field--breite { max-width:320px; }
}
.privacy { display:flex; flex-direction:column; gap:12px; padding:20px; background:var(--bg-3); border:1px solid var(--line); max-width:820px; }
.privacy ul { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; color:var(--ink-2); font-size:16px; }
.check { display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-2); cursor:pointer; }
.check input { flex:none; width:22px; height:22px; margin:1px 0 0; accent-color:var(--ink); }
.check a { color:var(--ink); }

/* Messen: Bild bleibt scrollbar, nur die Griffe fangen Gesten */
.measure { position:relative; width:fit-content; max-width:100%; user-select:none; touch-action:pan-y; background:#000; }
.measure__img { width:auto; max-width:100%; max-height:70svh; height:auto; opacity:.94; }
/* Marco 28.10.: Der Verbindungsbalken sah aus wie ein Regler. Jetzt eine gestrichelte Maßlinie mit Pfeilspitzen, unter den Griffen */
.measure__span { position:absolute; top:calc(12% + 34px); height:0; border-top:2px dashed rgba(255,255,255,.9); pointer-events:none; filter:drop-shadow(0 0 2px rgba(0,0,0,.8)); }
.measure__span::before, .measure__span::after { content:""; position:absolute; top:-7px; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.measure__span::before { left:2px; border-right:10px solid #fff; }
.measure__span::after { right:2px; border-left:10px solid #fff; }
.measure__span span { position:absolute; left:50%; top:8px; transform:translateX(-50%); padding:4px 10px; background:rgba(18,17,16,.88); border:1px solid var(--mess); color:#fff; font-size:15px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.measure__h { position:absolute; top:0; bottom:0; width:44px; margin-left:-22px; padding:0; border:0; background:transparent; cursor:ew-resize; touch-action:none; }
.measure__h::before { content:""; position:absolute; left:21px; top:0; bottom:0; width:2px; background:var(--mess); box-shadow:0 0 0 1px rgba(0,0,0,.5); }
.measure__h::after { content:""; position:absolute; left:8px; top:calc(12% - 14px); width:28px; height:28px; border-radius:50%; background:#fff; border:3px solid var(--mess); }
.measure__b { position:absolute; left:0; right:0; height:44px; margin-top:-22px; padding:0; border:0; background:transparent; cursor:ns-resize; touch-action:none; }
.measure__b::before { content:""; position:absolute; left:0; right:0; top:21px; height:2px; background:var(--ok); box-shadow:0 0 0 1px rgba(0,0,0,.5); }
.measure__b span { position:absolute; right:6%; top:6px; padding:3px 10px; background:var(--ok); color:#0d1620; font-size:14px; font-weight:600; }
.measure__b:focus-visible span { outline:3px solid #fff; outline-offset:2px; }
.chip--w.is-weak { opacity:.62; }
.chip--farbe { display:inline-flex; align-items:center; gap:8px; }
.chip--farbe i { width:26px; height:18px; background-size:cover; background-position:center; border:1px solid rgba(255,255,255,.35); }

.fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap:16px; width:100%; max-width:820px; }
.fields--2 { max-width:none; }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field__label { font-size:15px; color:var(--ink-2); }
.field em { font-style:normal; color:var(--ink-3); }
.unit { display:flex; align-items:center; width:100%; border:1px solid var(--line-2); background:var(--bg-3); }
.unit input { flex:1 1 auto; width:100%; min-width:0; min-height:54px; padding:0 14px; border:0; font:inherit; font-size:20px; color:var(--ink); font-variant-numeric:tabular-nums; background:transparent; }
.unit > span { flex:none; padding:0 14px; color:var(--ink-3); }
.input, textarea { width:100%; min-height:50px; padding:12px 14px; border:1px solid var(--line-2); background:var(--bg-3); color:var(--ink); font:inherit; font-size:17px; border-radius:0; }
textarea { resize:vertical; }

/* Auswahl + Ergebnis */
.split { display:flex; flex-wrap:wrap; gap:32px; align-items:flex-start; }
.split__stage { flex:999 1 560px; min-width:0; display:flex; flex-direction:column; gap:10px; position:sticky; top:calc(var(--head) + var(--trust) + 12px); z-index:5; }
.split__panel { flex:1 1 340px; min-width:0; display:flex; flex-direction:column; gap:18px; }
.stage { position:relative; display:flex; justify-content:center; background:#000; overflow:hidden; }
.stage__img { width:auto; max-width:100%; max-height:78svh; height:auto; transition:opacity .35s var(--ease); }
.stage__img.is-swap { opacity:.3; }
.stage__tag { position:absolute; left:12px; top:12px; padding:4px 10px; font-size:13px; background:rgba(18,17,16,.82); color:var(--ink); }
.stage__wait { position:absolute; inset:auto 0 0 0; padding:14px 18px; background:rgba(18,17,16,.9); }
.stage__wait p { margin:8px 0 0; font-size:16px; }
.stage__bar { height:3px; background:var(--line); }
.stage__bar span { display:block; height:3px; width:0; background:var(--ink); transition:width 1s linear; }

.roombar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.roombar__label { font-size:14px; color:var(--ink-3); margin-right:4px; }
.roombar__list { display:flex; flex-wrap:wrap; gap:8px; }
.chips { border:0; margin:0; padding:0; }
.chips legend { font-size:14px; color:var(--ink-3); margin-bottom:8px; padding:0; }
.chips > div { display:flex; flex-wrap:wrap; gap:14px 8px; padding-top:6px; }
.chip { min-height:44px; padding:0 16px; font:inherit; font-size:16px; background:var(--bg-3); color:var(--ink); border:1px solid var(--line-2); cursor:pointer; font-variant-numeric:tabular-nums; }
.chip[aria-pressed="true"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.chip--add { border-style:dashed; color:var(--ink-2); }
.chip small { display:block; font-size:12px; color:inherit; opacity:.7; line-height:1; }
.chip--w { min-height:52px; padding:4px 14px; line-height:1.2; text-align:left; }
.chip.is-no { opacity:.45; }
.chip--w { position:relative; }
/* „Empfohlen“ im Feld selbst, nicht darüber: ragte auf dem Handy über das Nachbarfeld (Marco 19.10.) */
.chip__tip { display:block; margin-top:4px; white-space:nowrap; font:600 10px/1.4 inherit; font-style:normal; letter-spacing:.06em; text-transform:uppercase; color:var(--ok); }
.chip[aria-pressed="true"] .chip__tip { color:#2f6b45; }
.chip--w:has(.chip__tip) { border-color:var(--ok); }
.tabs { display:flex; gap:0; border-bottom:1px solid var(--line); }
.tabs button { min-height:44px; padding:0 14px; font:inherit; font-size:16px; background:none; border:0; border-bottom:2px solid transparent; color:var(--ink-3); cursor:pointer; }
.tabs button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--ink); }
/* Kein eigener Scrollbereich: die Seite scrollt immer, auch beim Wischen über Kacheln */
.thumbs { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; padding-bottom:120px; }
.thumbs__weg { grid-column:1 / -1; margin:4px 0 0; font-size:14px; line-height:1.45; color:var(--ink-3); }
.thumb { position:relative; display:flex; flex-direction:column; gap:6px; padding:0 0 10px; text-align:left; font:inherit; color:inherit; background:var(--bg-3); border:1px solid var(--line); cursor:pointer; transition:border-color .2s, transform .25s var(--ease); touch-action:manipulation; }
.thumb:hover { border-color:var(--ink-3); }
.thumb[aria-pressed="true"] { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }   /* kein Schatten (Marco 28.10.) */
.thumbs.hat-wahl .thumb-w:not(.is-sel) .thumb { opacity:.5; transition:opacity .2s, border-color .2s; }
.thumbs.hat-wahl .thumb-w:not(.is-sel):hover .thumb, .thumbs.hat-wahl .thumb-w:not(.is-sel) .thumb:focus-visible { opacity:1; }
.thumb__wahl { display:none; position:absolute; top:8px; right:8px; align-items:center; gap:5px; padding:2px 8px 2px 6px; font-size:12px; font-weight:600; background:var(--ink); color:var(--bg); }
.thumb__wahl::before { content:""; width:10px; height:6px; margin-top:-3px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); }
.thumb-w.is-sel .thumb__wahl { display:inline-flex; }
/* Schon visualisiert (Marco 27.10.): Kunden finden ihre Bilder in der Liste wieder */
.thumb__vis { display:inline-flex; align-items:center; gap:6px; margin:0 10px; font-size:13px; font-weight:600; color:var(--ok); }
.thumb__vis[hidden] { display:none; }
.thumb__vis::before { content:""; width:10px; height:6px; margin-top:-3px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); }
.schon { display:flex; flex-direction:column; gap:8px; }
.schon[hidden] { display:none; }
.schon__list { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.schon__item { flex:0 0 auto; display:flex; flex-direction:column; gap:4px; width:116px; padding:0 0 6px; font:inherit; color:inherit; text-align:left; background:var(--bg-3); border:1px solid var(--line); cursor:pointer; touch-action:manipulation; }
.schon__item:hover, .schon__item:focus-visible { border-color:var(--ink-3); }
.schon__item[aria-pressed="true"] { border-color:var(--ink); }
.schon__item img { width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--bg-2); }
.schon__item span { padding:0 6px; font-size:13px; line-height:1.25; }
.wahl { display:flex; flex-direction:column; padding:16px 18px; border:1px solid var(--line-2); background:var(--bg-3); }
.wahl__leer { margin:0; font-size:15px; color:var(--ink-3); }
.wahl__inhalt { display:flex; flex-direction:column; gap:14px; }
.wahl__kopf { display:flex; flex-direction:column; gap:4px; }
.wahl__kopf .eyebrow { font-size:12px; }
.wahl__kopf h2 { font-size:clamp(24px, 2.4vw, 32px); }
.wahl__aktion { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.wahl__visual { flex:1 1 220px; }
@media (max-width: 1020px) {
  .wahl__visual { display:none; }   /* Handy: Visualisieren steht in der Leiste unten, sonst doppelt */
  .wahl { padding:12px 14px; }
}
@media (min-width: 1021px) {
  .wahl { position:sticky; top:calc(var(--head) + var(--trust) + 12px); z-index:4; box-shadow:0 18px 30px -22px rgba(0,0,0,.95); }
  /* Marco 28.10.: Die Abdeckung nach oben stand auch in Ruhe als schwarzer Streifen über der Box. Jetzt nur, solange die Box oben festhängt */
  .wahl.is-fest { box-shadow:0 -13px 0 0 var(--bg-2), 0 18px 30px -22px rgba(0,0,0,.95); }
  .dock { display:none !important; }   /* am Rechner steht Visualisieren in „Ihre Auswahl“ */
  .thumbs { padding-bottom:40px; }
}
.thumb img { width:100%; aspect-ratio:6/5; object-fit:contain; background:var(--bg-3); }
.thumb__name { padding:0 10px; font-size:15px; line-height:1.25; }
.thumb__price { padding:0 10px; font-size:14px; color:var(--ink-3); }
.thumb__fit { position:absolute; top:8px; left:8px; padding:2px 8px; font-size:12px; font-weight:600; color:#101010; }
.thumb__fit--ok { background:var(--ok); } .thumb__fit--no { background:var(--warn); } .thumb__fit--frei { background:var(--ink-3); } .thumb__fit--knapp { background:#e5c97a; }
.thumb__sofort { position:absolute; top:8px; right:8px; padding:2px 8px; font-size:12px; background:#101010; color:var(--ink); }

/* Wartezeit: Stil-Duell als Vollbild-Fenster, Fortschritt oben */
.dlg.dlg--duell { width:min(980px, 100vw); max-width:100vw; height:fit-content; max-height:100svh; }   /* fit-content: „auto“ zog das Fenster als Modal auf volle Höhe */
.dlg--duell .dlg__box { gap:14px; }
/* Status bleibt oben stehen, auch wenn man im Duell nach unten scrollt; dort erscheint „Ihr Bild ansehen“ (Marco 20.10.) */
.duell__status { position:sticky; top:0; z-index:3; display:flex; gap:14px; align-items:center;
  margin:calc(-1 * clamp(20px, 4vw, 32px)) calc(-1 * clamp(20px, 4vw, 32px)) 0; padding:12px clamp(20px, 4vw, 32px);
  background:var(--bg-2); border-bottom:1px solid var(--line); }
.duell__vorschau { width:128px; max-height:96px; object-fit:contain; background:#000; flex:none; }
.duell__lauf { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.duell__lauf p { margin:0; font-size:16px; color:var(--ink-2); }
.duell__lauf .btn { min-height:52px; padding:0 22px; font-size:17px; }
/* Marco 27.10. abends: Fortschritt muss sofort auffallen (heller Streifen, große Schrift, dicker Balken, Kreisel) */
.duell__status { background:var(--ink); color:var(--bg); border-bottom:0; box-shadow:0 12px 30px -16px rgba(0,0,0,.9); padding-block:16px; }
.duell__status .duell__lauf p { color:var(--bg); }
.duell__kopf { display:flex; align-items:center; gap:10px; font-size:clamp(18px, 1.8vw, 22px) !important; font-weight:600; }
.duell__kopf .tab { margin-left:auto; font-weight:400; opacity:.75; }
.duell__schritt { font-size:15px !important; opacity:.8; }
.duell__spin { width:20px; height:20px; flex:none; border:2.5px solid rgba(18,17,16,.25); border-top-color:var(--bg); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.duell__bar { height:8px; background:rgba(18,17,16,.18); }
.duell__bar span { height:8px; background:var(--bg); background-image:linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  background-size:200% 100%; animation:balken 1.6s linear infinite; }
@keyframes balken { from { background-position:200% 0; } to { background-position:0 0; } }
.duell__status.is-fertig .duell__spin, .duell__status.is-fertig .duell__schritt { display:none; }
/* Marco 28.10.: Ist das Bild fertig, verschwindet das Stil-Duell. Es bleibt nur „Ihr Bild ist fertig“ mit großem Bild und Knopf. */
.dlg--duell.is-fertig .duell, .dlg--duell.is-fertig .fakt { display:none; }
.dlg--duell.is-fertig .duell__status { position:static; flex-direction:column; align-items:stretch; margin-bottom:calc(-1 * clamp(20px, 4vw, 32px)); padding-bottom:clamp(20px, 4vw, 32px); }
.dlg--duell.is-fertig .duell__vorschau { width:100%; max-height:min(62svh, 640px); background:#000; }
.dlg--duell.is-fertig .duell__lauf .btn { min-height:60px; font-size:19px; }
/* Marco 28.10.: Fertig-Ansicht hochwertig: dunkel wie der Planer, Bild ohne schwarze Balken, ruhige große Schrift, heller Knopf */
.dlg--duell.is-fertig { width:fit-content; max-width:min(1180px, 100vw); }
.dlg--duell.is-fertig .duell__status { background:none; color:var(--ink); box-shadow:none; margin:0; padding:0; gap:20px; }
.dlg--duell.is-fertig .duell__lauf p { color:var(--ink); }
.dlg--duell.is-fertig .duell__vorschau { display:block; width:auto; height:auto; max-width:100%; max-height:min(66svh, 720px); margin:0 auto; background:none; object-fit:contain; }
.dlg--duell.is-fertig .duell__kopf { justify-content:center; font-size:clamp(24px, 2.4vw, 32px) !important; font-weight:300; letter-spacing:.01em; }
.dlg--duell.is-fertig .duell__lauf { align-items:stretch; gap:16px; }
.dlg--duell.is-fertig .duell__status .btn { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.dlg--duell.is-fertig .duell__status .btn:hover { background:#fff; }
.duell__status .btn { background:var(--bg); color:var(--ink); border-color:var(--bg); }
.duell__status .btn:hover { background:#000; }
.duell { display:flex; flex-direction:column; gap:10px; }
.duell__frage { margin:0; font-size:18px; }
/* Marco 28.10.: Ohne klare Aufforderung hielten Kunden das Duell für eine Anzeige von Modellen */
.duell__auf { margin:-4px 0 4px; font-size:15px; line-height:1.4; color:var(--ink-2); }
.duell__waehl { position:absolute; top:8px; right:8px; padding:6px 12px; font-style:normal; font-size:13px; font-weight:600; background:var(--ink); color:var(--bg); box-shadow:0 6px 16px -6px rgba(0,0,0,.8); }
.duell__paar.is-erste .duell__waehl { animation:waehl 1.6s var(--ease) .6s 2; }
@keyframes waehl { 0%, 100% { transform:none; } 40% { transform:scale(1.12); } }
.duell__paar { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; max-width:calc(2 * 34svh * 1.2 + 12px); margin-inline:auto; }
/* Marco 28.10.: helle Ränder bei neueren Bildern (anderes Seitenverhältnis, im Knopf mittig). Alle Karten 6:5, dunkler Grund, Bild ganz zu sehen */
.duell__paar button { position:relative; display:block; aspect-ratio:6 / 5; padding:0; font-family:inherit; border:1px solid var(--line-2); background:#121110; cursor:pointer; overflow:hidden; transition:transform .25s var(--ease), border-color .2s; }
.duell__paar button:hover { transform:translateY(-2px); border-color:var(--ink); }
.duell__paar img { display:block; width:100%; height:100%; object-fit:contain; }
/* Feuerwerk wie bei Samsung-Benachrichtigungen (Marco 28.10.): der Rahmen pulsiert kurz weiß, dazu zwei, drei Sterne aus feinen
   Strichen, die an zufälligen Stellen im Bild nach außen wachsen und verblassen. Dann die nächste Runde. */
.duell__paar button.is-sieger { border-color:#fff; animation:rahmen .9s ease-out; }
@keyframes rahmen { 0% { box-shadow:0 0 0 0 rgba(255,255,255,0), inset 0 0 0 0 rgba(255,255,255,0); }
  25% { box-shadow:0 0 0 3px rgba(255,255,255,.95), 0 0 22px 4px rgba(255,255,255,.55), inset 0 0 0 2px #fff; }
  55% { box-shadow:0 0 0 2px rgba(255,255,255,.5), 0 0 12px 2px rgba(255,255,255,.25), inset 0 0 0 1px #fff; }
  75% { box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 0 18px 3px rgba(255,255,255,.45), inset 0 0 0 2px #fff; }
  100% { box-shadow:0 0 0 0 rgba(255,255,255,0), inset 0 0 0 0 rgba(255,255,255,0); } }
.funken { position:absolute; z-index:4; left:var(--x); top:var(--y); width:0; height:0; pointer-events:none; text-decoration:none; }
.funken i { position:absolute; left:-1px; bottom:0; width:2px; height:var(--l); border-radius:1px; background:#fff; box-shadow:0 0 2px rgba(0,0,0,.55), 0 0 6px rgba(255,255,255,.85);
  transform-origin:50% 100%; opacity:0; animation:strich .75s cubic-bezier(.15, .7, .3, 1) var(--v) forwards; }
@keyframes strich { 0% { transform:rotate(var(--a)) translateY(-4px) scaleY(.15); opacity:0; } 15% { opacity:1; }
  100% { transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) scaleY(1); opacity:0; } }
.duell__paar span { position:absolute; left:0; right:0; bottom:0; padding:4px 8px; font-size:13px; text-align:left; background:rgba(18,17,16,.82); color:var(--ink); }
.duell__fav { grid-column:1 / -1; margin:0; display:flex; flex-direction:column; gap:10px; }
.duell__fav img { display:block; width:100%; max-width:calc(46svh * 1.2); height:auto; margin-inline:auto; }
.duell__fav figcaption { font-size:15px; color:var(--ink-2); text-align:left; }
/* Favorit im Ergebnis */
.fav { display:grid; grid-template-columns:132px minmax(0, 1fr); gap:12px 14px; align-items:center; padding:12px; border:1px solid var(--line-2); background:var(--bg-3); }
.fav img { width:132px; height:auto; }
.fav__text { display:flex; flex-direction:column; gap:6px; min-width:0; }
.fav__text .eyebrow { margin:0; font-size:12px; }
.fav__text strong { font-weight:400; font-size:18px; line-height:1.25; }
.fav__go { grid-column:1 / -1; width:100%; min-height:52px; padding:10px 16px; white-space:normal; line-height:1.25; text-align:center; }
/* Groß ansehen */
.compare__gross { position:absolute; z-index:3; right:10px; bottom:10px; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(18,17,16,.75); color:#fff; cursor:pointer; }
.compare__gross svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; }
.werkzeug { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.werkzeug__knopf { min-height:48px; padding:0 10px; gap:8px; font-size:15px; }
.werkzeug__knopf svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.btn--haupt { min-height:60px; font-size:18px; }
.weiter { display:flex; flex-direction:column; gap:10px; padding-top:16px; border-top:1px solid var(--line); }
.weiter__knopf { gap:10px; min-height:56px; font-size:17px; }
.anfrage-link { align-self:flex-start; font-size:16px; }
.weiter__knopf svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gespeichert { display:flex; align-items:center; gap:8px; margin:0; font-size:15px; color:var(--ink-2); }
.gespeichert::before { content:""; flex:none; width:10px; height:6px; margin-top:-3px; border-left:2px solid var(--ok); border-bottom:2px solid var(--ok); transform:rotate(-45deg); }
.nebenbei { flex-direction:column; align-items:stretch; }
.dlg__danke { display:flex; flex-direction:column; align-items:center; gap:14px; padding:28px 8px 8px; text-align:center; }
.dlg__danke h2 { margin:0; font-size:clamp(24px, 2.4vw, 30px); font-weight:300; }
.dlg__danke p { margin:0; color:var(--ink-2); max-width:42ch; }
.dlg__haken { width:56px; height:56px; border:2px solid var(--ok); border-radius:50%; position:relative; }
.dlg__haken::after { content:""; position:absolute; left:17px; top:15px; width:18px; height:10px; border-left:2.5px solid var(--ok); border-bottom:2.5px solid var(--ok); transform:rotate(-45deg); }
.dlg__box.is-gesendet > :not(.dlg__danke) { display:none !important; }
.dlg--datenschutz { width:min(720px, calc(100vw - 24px)); }
.ds { display:flex; flex-direction:column; gap:6px; max-height:60svh; overflow:auto; padding-right:6px; }
.ds h3 { margin:12px 0 0; font-size:17px; font-weight:600; }
.ds p { margin:0; font-size:15px; line-height:1.55; color:var(--ink-2); }
.fb-besser { display:flex; flex-direction:column; gap:12px; padding:14px; border:1px solid var(--line-2); background:var(--bg-3); }
.weiter__titel { margin:0; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.weiter .link { align-self:flex-start; }
.nebenbei { display:flex; flex-wrap:wrap; gap:8px 24px; padding-top:14px; border-top:1px solid var(--line); }
.zoom { width:100vw; height:100svh; max-width:100vw; max-height:100svh; margin:0; padding:0; border:0; background:#000; color:#fff; overflow:hidden; }
.zoom::backdrop { background:#000; }
.zoom__flaeche, .zoom__titel, .zoom__info { -webkit-user-select:none; user-select:none; }
.zoom__flaeche { position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:grab; }
.zoom__flaeche img { width:100%; height:100%; object-fit:contain; transform-origin:0 0; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.zoom__leiste { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; gap:12px; padding:calc(10px + env(safe-area-inset-top)) 12px 10px; background:linear-gradient(rgba(0,0,0,.7), transparent); }
.zoom__wahl { display:flex; }
.zoom__wahl button, .zoom__zu { min-height:44px; padding:0 16px; font:inherit; font-size:15px; color:#fff; background:rgba(18,17,16,.75); border:1px solid rgba(255,255,255,.35); cursor:pointer; }
.zoom__wahl button[aria-pressed="true"] { background:#f2efe9; color:#111; }
.zoom__hinweis { position:absolute; left:0; right:0; bottom:calc(12px + env(safe-area-inset-bottom)); margin:0; text-align:center; font-size:13px; color:rgba(255,255,255,.75); pointer-events:none; }
/* Marco 29.10.: „Gut zu wissen“ abgesetzt, mit Symbol, bündig mit dem Text darüber */
.fakt { display:flex; align-items:flex-start; gap:12px; margin:0; padding:12px 14px; font-size:15px; line-height:1.45; color:var(--ink-2);
  background:var(--bg-3); border:1px solid var(--line); min-height:3.6em; transition:opacity .4s; }
.fakt__ico { flex:none; display:grid; place-items:center; width:24px; height:24px; border:1.5px solid var(--ink-3); border-radius:50%; font-size:14px; font-weight:600; color:var(--ink-2); }
.fakt strong { display:block; font-weight:600; color:var(--ink); }
.duell__paar:has(.duell__fav) { max-width:none; }   /* Stil-Gewinner: Bildunterschrift bündig mit Frage und „Gut zu wissen“ */
.thumb.is-off img { opacity:.45; }
.thumb-w { position:relative; display:flex; }
.thumb-w > .thumb { flex:1; min-width:0; }
/* Lupe unten rechts auf dem Bild: Ebene so groß wie die Bildfläche (6:5), nur der Knopf nimmt Tipps an */
.thumb__ebene { position:absolute; top:1px; left:1px; right:1px; aspect-ratio:6/5; pointer-events:none; }
.thumb__lupe { position:absolute; right:6px; bottom:6px; width:44px; height:44px; display:grid; place-items:center; padding:0; pointer-events:auto;
  color:#fff; background:rgba(16,16,16,.62); border:1px solid rgba(255,255,255,.35); border-radius:50%; cursor:pointer;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); touch-action:manipulation; transition:background .2s; }
.thumb__lupe:hover { background:rgba(16,16,16,.85); }
.thumb__lupe:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.thumb__lupe svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.zoom__titel { flex:1; min-width:0; margin:0; align-self:center; font-size:16px; line-height:1.25; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.zoom__pfeil { position:absolute; top:50%; width:48px; height:64px; margin-top:-32px; display:grid; place-items:center; padding:0; color:#fff;
  background:rgba(18,17,16,.55); border:1px solid rgba(255,255,255,.25); cursor:pointer; }
.zoom__pfeil--l { left:0; border-left:0; } .zoom__pfeil--r { right:0; border-right:0; }
.zoom__pfeil svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; }
.zoom__modell { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:28px 12px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, rgba(0,0,0,.8) 40%); }
.zoom__info { display:flex; flex-direction:column; gap:2px; margin:0; font-size:14px; color:rgba(255,255,255,.85); }
.zoom__info span:empty { display:none; }
.zoom__waehlen { min-height:48px; padding:0 20px; background:#f2efe9; color:#111; border-color:#f2efe9; }
.zoom--modell .zoom__hinweis { display:none; }

/* Leiste unten: gewähltes Möbel, Breite, Visualisieren */
.dock { position:fixed; z-index:24; left:0; right:0; bottom:0; display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:12px 20px;
  padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom)); background:rgba(26,25,23,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line); animation:floatIn .3s var(--ease); }
.dock__info { display:flex; flex-direction:column; min-width:0; }
.dock__info strong { font-weight:400; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dock__info span { font-size:14px; color:var(--ink-3); }

/* „Ihre Auswahl“: Preiszeile */
.panel { display:flex; flex-direction:column; gap:18px; }
.konfig__preis { margin:0; color:var(--ink-2); font-size:17px; font-variant-numeric:tabular-nums; }
.chips .chip--w { min-width:96px; }
.chip--seite { display:inline-flex; align-items:center; gap:10px; }
.chip--seite svg { width:34px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; }
.chip--seite svg rect.tv { fill:currentColor; stroke:none; }

.compare { position:relative; width:fit-content; max-width:100%; margin-inline:auto; overflow:hidden; background:#000; user-select:none; touch-action:pan-y; }
.compare__after { width:auto; max-width:100%; max-height:78svh; height:auto; }
.compare__before { position:absolute; inset:0 auto 0 0; width:50%; overflow:hidden; }
.compare__before img { width:auto; height:100%; max-width:none; }
.compare__line { position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:#fff; pointer-events:none; }
.compare__knob { position:absolute; top:50%; left:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; border:2px solid #fff;
  background:rgba(18,17,16,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/26px no-repeat;
  cursor:ew-resize; pointer-events:auto; touch-action:none; }
.compare__tag { position:absolute; top:12px; padding:4px 10px; font-size:13px; background:rgba(18,17,16,.8); pointer-events:none; }
.compare__tag--l { left:12px; } .compare__tag--r { right:12px; }
.compare__hinweis { position:absolute; z-index:2; left:50%; top:calc(50% + 34px); transform:translateX(-50%); padding:6px 12px; white-space:nowrap; font-size:14px; font-weight:600;
  background:var(--ink); color:var(--bg); box-shadow:0 8px 22px -8px rgba(0,0,0,.85); pointer-events:none; animation:hinweis .4s var(--ease); }
@keyframes hinweis { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .duell__paar.is-erste .duell__waehl { animation:none; } }
.res__meta { margin:-8px 0 0; color:var(--ink-2); font-size:16px; }
.price { margin:0; font-size:30px; font-variant-numeric:tabular-nums; }
.saved { margin-top:40px; display:flex; flex-direction:column; gap:14px; }
.saved__list { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap:12px; }
.saved__list button { padding:0; border:1px solid var(--line); background:var(--bg-3); color:inherit; cursor:pointer; text-align:left; font:inherit; font-size:14px; }
.saved__list img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.saved__list span { display:block; padding:6px 8px; }

/* Bild fertig, Kunde ist woanders im Planer */
.toast { position:fixed; z-index:40; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom)); width:min(560px, calc(100vw - 24px));
  display:flex; gap:12px; align-items:center; padding:10px; background:var(--bg-3); border:1px solid var(--line-2); box-shadow:0 16px 40px rgba(0,0,0,.6); font-size:15px; }
body:has(.dock:not([hidden])) .toast { bottom:calc(96px + env(safe-area-inset-bottom)); }
.toast img { width:72px; aspect-ratio:4/3; object-fit:contain; background:#000; flex:none; }
.toast span { flex:1; min-width:0; }
.toast .btn { min-height:44px; padding:0 16px; font-size:15px; }
.toast__zu { width:44px; height:44px; flex:none; border:0; background:none; color:var(--ink-2); font-size:24px; cursor:pointer; }

/* Dialoge */
.dlg { width:min(640px, calc(100vw - 24px)); max-height:calc(100svh - 24px); padding:0; border:1px solid var(--line-2); background:var(--bg-2); color:var(--ink); }
.dlg::backdrop { background:rgba(0,0,0,.7); }
.dlg__box { display:flex; flex-direction:column; gap:16px; padding:clamp(20px, 4vw, 32px); }
.dlg h2 { font-size:clamp(24px, 3vw, 32px); }
.dlg__pic { display:flex; gap:12px; align-items:center; font-size:15px; color:var(--ink-2); }
.dlg__pic img { width:120px; aspect-ratio:16/9; object-fit:cover; flex:none; }
.dlg__msg:empty { display:none; }
.checks { display:flex; flex-direction:column; gap:10px; }
.dlg--teilen { width:min(480px, calc(100vw - 24px)); }
.teilen { display:flex; flex-direction:column; gap:8px; }
.teilen__knopf { display:flex; align-items:center; gap:14px; min-height:60px; padding:8px 14px; text-align:left; font:inherit; color:var(--ink); background:var(--bg-3); border:1px solid var(--line-2); cursor:pointer; transition:border-color .2s, background .2s; }
.teilen__knopf:hover { border-color:var(--ink-3); background:var(--bg-4); }
.teilen__knopf strong { display:block; font-weight:400; font-size:17px; }
.teilen__knopf small { display:block; font-size:13px; color:var(--ink-3); }
.teilen__knopf--bild { border-color:var(--ink-3); }
.teilen__ico { flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--bg-4); color:var(--ink); }
.teilen__ico svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.teilen__ico--wa { background:#1f7a4d; color:#fff; }
.teilen__ico--fb { background:#2f5fb3; color:#fff; }
.teilen__ico--fb svg { fill:currentColor; stroke:none; }

.faq { padding-block:clamp(48px, 7vw, 96px); display:flex; flex-direction:column; gap:12px; }
.faq h2 { margin-bottom:12px; }
.faq details { border-top:1px solid var(--line); padding:16px 0; max-width:820px; }
.faq summary { cursor:pointer; font-size:20px; }
.faq p { margin:10px 0 0; color:var(--ink-2); }
.foot { display:flex; gap:24px; padding-block:32px 120px; border-top:1px solid var(--line); font-size:15px; color:var(--ink-3); }

@media (min-width: 1021px) {
  .planer .wrap { max-width:1840px; }
  .split { display:grid; grid-template-columns:minmax(0, 1fr) clamp(420px, 42%, 780px); gap:clamp(24px, 2.4vw, 40px); }
  .split__stage .stage, .split__stage .compare { margin-inline:auto; }
  .stage__img { max-height:calc(100svh - var(--head) - var(--trust) - 120px); }
  .compare__after { max-height:calc(100svh - var(--head) - var(--trust) - 200px); }
  .thumbs { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
  .schon__item { width:132px; }
}
@media (max-width: 1100px) {
  .hero__caption { bottom:calc(clamp(16px, 3vw, 40px) + 64px); }   /* über dem Knopf, sonst überdecken sie sich */
  .trust__list li:nth-child(3) { display:none; }
}
/* Handy und Tablet hochkant: Bild bleibt oben stehen, Kacheln scrollen darunter */
@media (max-width: 1020px) {
  .split__stage { position:sticky; top:calc(var(--head) + var(--trust)); flex-basis:100%; margin-inline:calc(-1 * var(--gut)); background:var(--bg-2); padding-bottom:6px; box-shadow:0 12px 20px -14px rgba(0,0,0,.9); }
  .split__stage > .fine, .split__stage > .link { padding-inline:var(--gut); }
  .stage__img { width:auto; max-width:100%; max-height:42svh; }
  [data-step="ergebnis"] .split__stage { position:static; box-shadow:none; }
  .compare__after { max-height:62svh; }
  .thumbs { grid-template-columns:repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
}
@media (max-width: 860px) {
  body { font-size:17px; }
  .top__hide-s { display:none; }
  .trust__list { justify-content:flex-start; animation:trust 15s steps(1) infinite; gap:0; padding:0; }
  .trust__list li { flex:0 0 100vw; justify-content:center; padding:0 12px; overflow:hidden; text-overflow:ellipsis; }
  .trust__list li:nth-child(3) { display:flex; }
  @keyframes trust { 0% { transform:none; } 33.3% { transform:translateX(-100vw); } 66.6% { transform:translateX(-200vw); } }
  .dock { padding-block:10px calc(10px + env(safe-area-inset-bottom)); }
  .dock .btn { min-height:50px; padding:0 22px; }
  .float { left:var(--gut); right:var(--gut); justify-content:center; }
}
@media (max-width: 700px) {
  .werkzeug__knopf { flex-direction:column; gap:4px; min-height:62px; font-size:13px; line-height:1.15; }
  .duell__paar { grid-template-columns:1fr; }
  .duell__paar { max-width:calc(30svh * 1.2); }
  .dlg.dlg--duell { width:100vw; height:100svh; max-height:100svh; margin:0; border:0; }
  .hero__bild { height:auto; aspect-ratio:1/1; }   /* quadratisch: die ganze Möbelwand bleibt im Bild */
  .hero__caption { font-size:13px; bottom:76px; gap:10px; }
  .hero__ticks i { width:12px; }
  .hero__weiter { font-size:17px; gap:0; }
  .hero__weiter svg { width:24px; height:24px; }
  .blase { left:12px; right:12px; max-width:none; padding:10px 40px 10px 12px; }
  .stage__auftrag { padding:12px 14px; gap:0; }
  .stage__auftrag p { font-size:15px; }
  .stage__auftrag-knopf { display:none; }   /* Handy: Visualisieren steht in der Leiste unten */
  .blase p { font-size:14px; }
  /* Marco 28.10.: am Handy schmal und oben links, nicht quer über der Wohnwand */
  .blase--wahl { right:auto; top:8px; left:8px; max-width:min(230px, 62%); padding:8px 34px 8px 10px; gap:8px; }
  .blase--wahl p { font-size:13px; line-height:1.35; flex-basis:100%; }
  .blase--wahl .btn { min-height:36px; padding:0 12px; font-size:13px; }
  .blase--wahl .blase__zu { width:32px; height:32px; font-size:19px; }
  .top__menu span { display:none; }
  .top__login [data-konto-label] { display:none; }   /* Handy: nur die beiden Symbole */
  .top__login { padding:0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
/* Raum bearbeiten: Zahnrad direkt am gewählten Raum (Marco 28.10.) */
.chip-gruppe { display:inline-flex; }
.chip-gruppe > .chip:first-child { border-right:0; }
.chip--zahnrad { display:inline-grid; place-items:center; width:44px; padding:0; }
.chip--zahnrad svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.chip-gruppe .chip--zahnrad { background:var(--ink); color:var(--bg); border-color:var(--ink); box-shadow:inset 1px 0 0 rgba(0,0,0,.18); }