/* ==========================================================================
   HausChat — Startseite, Abschnitt „Für wen“
   Wird nur von index.html geladen. Drei Teile untereinander:
   1. Größen: klein, mittel, groß als Häuserzeilen im Stil des Zeichens
      (dunkle Fassade, helle Fenster). Einzelne Fenster gehen an und aus.
   2. Das Problem in Zahlen (VDIV-Branchenbarometer), die Balken füllen sich.
   3. Die Lösung: vier Funktionen als Karten mit ruhigen, hellen Bildern und
      eine dunkle Karte für Mieter und Eigentümer mit dem Website-Chat als Bild.
   Szenen starten über js/szenen.js (data-play, data-loop); js/fuer-wen.js
   skaliert die Bühnen passend zur Kartenbreite. Die Szenen sind Beispiele
   (aria-hidden), die Aussage steht im Text.
   Bei reduzierter Bewegung steht alles still im Endzustand.
   ========================================================================== */

.fw{--fw-shadow:0 1px 2px color-mix(in srgb,var(--ink) 6%,transparent),0 12px 28px -12px color-mix(in srgb,var(--ink) 28%,transparent);
  --fw-ease:cubic-bezier(.22,.61,.36,1);--fw-pop:cubic-bezier(.34,1.56,.64,1);
  --fw-fassade:var(--blue-900);--fw-fenster:var(--blue-700);
  background:var(--card);overflow-x:clip}
.fw .sec-head h2{font-size:40px}
.fw .fw-titel{font-size:36px;line-height:1.16;letter-spacing:var(--ls-heading);text-align:center}
.fw .fw-lead{max-width:34em;margin:14px auto 0;font-size:19px;line-height:1.6;color:var(--body);text-align:center}

/* ── 1 · Größen ───────────────────────────────────────────────────────── */
.fw-groessen{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;
  border-radius:28px;overflow:hidden;background:linear-gradient(180deg,var(--teal-50) 0%,#E6F2DB 100%)}
/* Der Boden, auf dem alle Häuser stehen. */
.fw-groessen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:var(--teal-200)}
.fw-groesse{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:36px 36px 14px}
.fw-groesse+.fw-groesse{border-left:1.5px dashed var(--teal-200)}
.fw-groesse__name{font-family:var(--font-heading);font-size:30px;line-height:1.15;color:var(--ink)}
.fw-groesse__einheiten{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--radius-pill);background:#FFFFFF;
  font-size:13.5px;font-weight:var(--fw-bold);color:var(--teal-700)}
.fw .fw-groesse p{margin:6px 0 0;max-width:21em;font-size:16px;line-height:1.55;color:var(--body)}
/* Unten an den Boden geschoben, damit alle Häuser auf einer Linie stehen. */
.fw-stadt{display:block;width:100%;max-width:320px;height:auto;margin:auto auto 0;padding-top:28px;overflow:visible}
.fw-stadt .h{fill:var(--fw-fassade)}
.fw-stadt .t{fill:#0A1F07}
.fw-stadt .f{fill:var(--fw-fenster)}
.fw-stadt .an{fill:#FFFFFF}
.fw-stadt .aus-an{animation:fw-licht-an 11s ease-in-out infinite;animation-delay:var(--d,0s)}
.fw-stadt .an-aus{animation:fw-licht-aus 11s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes fw-licht-an{0%,40%,70%,100%{fill:var(--fw-fenster)}46%,64%{fill:#FFFFFF}}
@keyframes fw-licht-aus{0%,40%,70%,100%{fill:#FFFFFF}46%,64%{fill:var(--fw-fenster)}}

/* ── 2 · Am Limit ─────────────────────────────────────────────────────── */
.fw-limit{margin-top:104px}
.fw-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:44px 0 0;padding:0;list-style:none}
.fw-zahl{display:flex;flex-direction:column;gap:14px;padding:36px 36px 34px;border:1px solid var(--hairline);border-radius:24px;background:var(--page)}
.fw-zahl__wert{font-family:var(--font-heading);font-weight:400;font-size:clamp(46px,5vw,70px);line-height:1;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.fw-zahl--rot .fw-zahl__wert{color:var(--red-500)}
.fw-zahl__text{font-size:18px;line-height:1.5;color:var(--ink)}
/* Balken: ganze Breite = alle befragten Verwaltungen. */
.fw-balken{position:relative;display:block;height:8px;margin-top:auto;border-radius:var(--radius-pill);background:#E7ECED;overflow:hidden}
.fw-balken i{position:absolute;left:var(--l,0);top:0;bottom:0;width:0;border-radius:var(--radius-pill);background:var(--ink);transition:width 1.3s var(--fw-ease)}
.fw-zahl--rot .fw-balken i{background:var(--red-500)}
/* Die Spanne 62 bis 70 % gestreift. */
.fw-zahl--rot .fw-balken i+i{border-radius:0 99px 99px 0;background:repeating-linear-gradient(135deg,var(--red-300) 0 3px,var(--red-100) 3px 6px)}
.fw-zahlen.is-play .fw-balken i{width:var(--w)}
.fw-zahlen.is-play .fw-zahl:nth-child(2) .fw-balken i{transition-delay:.15s}
.fw-zahlen.is-play .fw-zahl:nth-child(3) .fw-balken i{transition-delay:.3s}
.fw-zahlen.is-play .fw-zahl--rot .fw-balken i+i{transition-duration:.6s;transition-delay:1.2s}
.fw .fw-quelle{margin:18px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}

/* Übergang: gestrichelte Linie, Zeichen, Linie — ein Punkt fällt hindurch. */
.fw-wende{display:flex;flex-direction:column;align-items:center;margin:40px auto 28px}
.fw-wende i{position:relative;width:2px;height:64px;background:repeating-linear-gradient(180deg,var(--teal-300) 0 5px,transparent 5px 11px)}
.fw-wende i::after{content:"";position:absolute;left:-3.5px;top:0;width:9px;height:9px;border-radius:50%;background:var(--teal-500);opacity:0;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--teal-500) 18%,transparent),0 0 14px 3px color-mix(in srgb,var(--teal-500) 45%,transparent);animation:fw-fallen 2.4s ease-in infinite}
.fw-wende img+i::after{animation-delay:1.2s}
@keyframes fw-fallen{0%{translate:0 -4px;opacity:0}15%,80%{opacity:1}100%{translate:0 58px;opacity:0}}
.fw-wende img{display:block;width:64px;height:64px;border-radius:17px;box-shadow:0 14px 28px -12px color-mix(in srgb,var(--blue-900) 55%,transparent)}

/* ── 3 · Funktionen ───────────────────────────────────────────────────── */
.fw-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1160px;margin:52px auto 0}
.fw-karte{--w:440px;--h:270px;display:flex;flex-direction:column;border:1px solid var(--hairline);border-radius:28px;background:var(--card);overflow:hidden}
.fw-buehne{position:relative;height:calc(var(--h) * var(--s,1) + 56px);margin:10px 10px 0;border-radius:20px;overflow:hidden;
  background:radial-gradient(80% 75% at 50% 42%,#FFFFFF 0%,#F3F6F0 62%,#E8EDE4 100%)}
.fw-szene{--fw-rand:color-mix(in srgb,var(--ink) 7%,transparent);--fw-schatten:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent),0 14px 34px -16px color-mix(in srgb,var(--ink) 22%,transparent);
  --fw-grau:var(--muted);--fw-aus:#D5DBE1;--fw-gruen:var(--violet-500);--fw-ring:0 0 0 3px color-mix(in srgb,var(--violet-500) 14%,transparent);
  position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);translate:-50% -50%;scale:var(--s,1);transition:opacity .3s var(--ease-out)}
.fw-szene.is-fade{opacity:0}
.fw-szene.is-reset,.fw-szene.is-reset *,.fw-szene.is-reset *::after{transition:none!important;animation:none!important}
.fw-karte__text{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px 32px 34px}
.fw-marke{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px 0 10px;border-radius:var(--radius-pill);background:var(--teal-50);
  font-size:13px;font-weight:var(--fw-bold);color:var(--teal-700)}
.fw-marke .icon{width:16px;height:16px}
.fw .fw-karte h4{font-size:26px;line-height:1.22;color:var(--ink)}
.fw .fw-karte__text p{margin:0;max-width:30em;font-size:16px;line-height:1.6;color:var(--body)}

/* Bausteine der Bilder: ruhige weiße Karten auf hellem Grund, feine
   gestrichelte Wege, höchstens ein grüner Punkt. Ohne JavaScript steht jedes
   Bild im Endzustand, die Startzustände gelten nur mit html.js. */
.fw-szene .icon{flex:0 0 auto}
.fw-k{position:absolute;display:block;background:#FFFFFF;border:1px solid var(--fw-rand);border-radius:14px;box-shadow:var(--fw-schatten);color:var(--ink)}
.fw-lbl{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:var(--fw-bold);line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--fw-grau);white-space:nowrap}
.fw-lbl .icon{width:12px;height:12px}
.fw-text{display:block;font-size:12.5px;line-height:1.5;color:var(--body)}
.fw-kopf{display:flex;align-items:center;gap:10px}
.fw-kopf>img{width:26px;height:26px}
.fw-kopf>time{margin-left:auto;font-size:11.5px;color:var(--fw-grau)}
.fw-kopf__t{display:flex;flex-direction:column;gap:1px;min-width:0}
.fw-kopf__t b{font-size:13px;font-weight:var(--fw-bold);line-height:1.3;white-space:nowrap}
.fw-kopf__t>span{font-size:11px;line-height:1.3;color:var(--fw-grau);white-space:nowrap}
.fw-ic{position:relative;display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#F1F3F5;color:var(--muted)}
.fw-ic .icon{width:15px;height:15px}
.fw-ic--gruen{background:var(--teal-50);color:var(--teal-700)}
.fw-av{display:grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:50%;font-style:normal;font-size:9.5px;font-weight:var(--fw-bold);line-height:1}
.fw-av--sk{background:var(--red-50);color:var(--red-500)}
.fw-av--tb{background:var(--himmel-100);color:var(--himmel-700)}
.fw-blase{display:block;width:max-content;max-width:100%;margin-top:10px;padding:8px 12px;font-size:12.5px;line-height:1.5;color:var(--ink)}
.fw-schalter{position:relative;flex:0 0 auto;width:32px;height:18px;border-radius:99px;background:var(--fw-gruen)}
.fw-schalter::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#FFFFFF;translate:14px 0;
  box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 25%,transparent)}
.fw-ok{display:grid;place-items:center;flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:var(--fw-gruen);color:#FFFFFF}
.fw-ok .icon{width:10px;height:10px}
.fw-linien{position:absolute;left:0;top:0;width:var(--w);height:var(--h);overflow:visible;pointer-events:none}
.fw-weg{fill:none;stroke:var(--teal-300);stroke-width:1.5;stroke-dasharray:4 5;stroke-linecap:round}
.fw-punkt{position:absolute;z-index:3;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--fw-gruen);opacity:0;offset-rotate:0deg;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--violet-500) 16%,transparent),0 0 12px color-mix(in srgb,var(--violet-500) 55%,transparent)}
@keyframes fw-lauf{0%{offset-distance:0%;opacity:0}15%,85%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes fw-druck{50%{scale:.9}}
/* Zeiger mit Namensschild, --c ist die Farbe der Person. */
.fw-zeiger{--c:var(--teal-700);position:absolute;z-index:6;display:flex;align-items:flex-start;gap:2px;pointer-events:none}
.fw-zeiger svg{width:18px;height:18px;overflow:visible;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.fw-zeiger path{fill:var(--c);stroke:#FFFFFF;stroke-width:1.2;stroke-linejoin:round}
.fw-zeiger em{margin-top:14px;padding:3px 9px;border-radius:99px;background:var(--c);color:#FFFFFF;
  font-style:normal;font-size:11px;font-weight:var(--fw-bold);line-height:1.3;white-space:nowrap}
/* Karte kommt von unten herein */
html.js .fw-sprach,html.js .fw-rund,html.js .fw-regel,html.js .fw-gespraech{opacity:0;translate:0 10px;
  transition:opacity .45s var(--fw-ease) .1s,translate .45s var(--fw-ease) .1s}
html.js .is-play .fw-sprach,html.js .is-play .fw-rund,html.js .is-play .fw-regel,html.js .is-play .fw-gespraech{opacity:1;translate:0 0}

/* 1 · Telefon: Der Anrufbeantworter wird zur Sprachnachricht mit Abschrift.
   Oben rechts schaltet Sabine die Telefon-KI dazu. */
.fw-sprach{left:18px;top:62px;width:272px;padding:14px 16px}
.fw-player{display:flex;align-items:center;gap:10px;margin-top:12px}
.fw-play{position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--fw-gruen)}
.fw-play::after{content:"";position:absolute;left:11px;top:9px;width:9px;height:10px;background:#FFFFFF;clip-path:polygon(0 0,100% 50%,0 100%)}
.fw-welle{flex:1 1 auto;min-width:0;height:24px;overflow:visible}
.fw-welle path{fill:none;stroke:var(--fw-aus);stroke-width:2.4;stroke-linecap:round}
.fw-welle .fw-welle__an{stroke:var(--fw-gruen);stroke-dasharray:100 101}
.fw-player time{font-size:11.5px;color:var(--fw-grau)}
.fw-abschrift{display:block;margin-top:12px;padding-top:11px;border-top:1px solid #EEF1F4}
.fw-abschrift .fw-lbl{color:var(--teal-700)}
.fw-abschrift .fw-text{margin-top:5px}
.fw-ki{left:150px;top:26px;display:flex;align-items:center;gap:10px;height:48px;padding:0 12px 0 9px;
  border-color:color-mix(in srgb,var(--violet-500) 45%,transparent);box-shadow:var(--fw-ring),var(--fw-schatten)}
.fw-ki b{margin-right:6px;font-size:12.5px;font-weight:var(--fw-bold);white-space:nowrap}
.fw-s1 .fw-zeiger{left:352px;top:48px}

html.js .fw-s1 .fw-welle__an{stroke-dashoffset:100;transition:stroke-dashoffset 2.2s linear .8s}
html.js .fw-s1 .fw-abschrift .fw-text{opacity:0;translate:0 4px;transition:opacity .5s var(--fw-ease) 1.6s,translate .5s var(--fw-ease) 1.6s}
html.js .fw-s1 .fw-zeiger{opacity:0;translate:36px 120px;transition:opacity .3s var(--fw-ease) 3.1s,translate .8s var(--fw-ease) 3.1s}
html.js .fw-s1 .fw-ki{border-color:var(--fw-rand);box-shadow:var(--fw-schatten);transition:border-color .3s var(--fw-ease) 4.1s,box-shadow .3s var(--fw-ease) 4.1s}
html.js .fw-s1 .fw-schalter{background:var(--fw-aus);transition:background-color .25s var(--fw-ease) 4s}
html.js .fw-s1 .fw-schalter::after{translate:0 0;transition:translate .25s var(--fw-ease) 4s}
html.js .fw-s1.is-play .fw-welle__an{stroke-dashoffset:0}
html.js .fw-s1.is-play .fw-abschrift .fw-text{opacity:1;translate:0 0}
html.js .fw-s1.is-play .fw-zeiger{opacity:1;translate:0 0}
html.js .fw-s1.is-play .fw-ki{border-color:color-mix(in srgb,var(--violet-500) 45%,transparent);box-shadow:var(--fw-ring),var(--fw-schatten)}
html.js .fw-s1.is-play .fw-schalter{background:var(--fw-gruen);animation:fw-druck .25s var(--fw-ease) 3.85s}
html.js .fw-s1.is-play .fw-schalter::after{translate:14px 0}

/* 2 · Senden: Das Rundschreiben geht um 8 Uhr raus und kommt bei jeder
   Partei auf ihrem Weg an. */
.fw-rund{left:18px;top:34px;width:206px;padding:14px 16px}
.fw-rund .fw-kopf,.fw-rund .fw-text{margin-top:10px}
.fw-status{display:grid;justify-items:start;margin-top:12px}
.fw-status>span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:99px;
  font-size:11px;font-weight:var(--fw-bold);white-space:nowrap}
.fw-status .icon{width:13px;height:13px}
.fw-status .a{background:#F1F3F5;color:var(--body);opacity:0}
.fw-status .b{background:var(--teal-50);color:var(--teal-700)}
.fw-zu{left:268px;top:100px;width:154px;padding:13px 14px}
.fw-zu__kopf{display:flex;align-items:center;justify-content:space-between}
.fw-zu__kopf b{font-size:13px;line-height:1}
.fw-anteile{display:flex;gap:3px;height:6px;margin:10px 0 6px}
.fw-anteile i{flex:var(--a) 1 0;border-radius:99px;background:var(--f);transform-origin:0 50%}
.fw-zeile{display:flex;align-items:center;gap:8px;height:26px;font-size:12px;color:var(--body);white-space:nowrap}
.fw-zeile img{width:18px;height:18px}
.fw-zeile .icon{width:16px;height:16px;margin:0 1px;color:var(--f)}
.fw-zeile b{margin-left:auto;font-size:12.5px;color:var(--ink)}
.fw-f1{--f:var(--violet-500)}
.fw-f2{--f:var(--himmel-500)}
.fw-f3{--f:var(--sonne-500)}
.fw-s2 .fw-punkt{offset-path:path("M224 192 C246 192 246 170 268 170")}

html.js .fw-s2 .fw-status .a{opacity:1;transition:opacity .25s var(--fw-ease) 1.2s}
html.js .fw-s2 .fw-status .b{opacity:0;transition:opacity .25s var(--fw-ease) 1.2s}
html.js .fw-s2 .fw-weg{opacity:0;transition:opacity .3s var(--fw-ease) 1.3s}
html.js .fw-s2 .fw-zu{opacity:0;translate:-10px 0;transition:opacity .45s var(--fw-ease) 2s,translate .45s var(--fw-ease) 2s}
html.js .fw-s2 .fw-anteile i{scale:0 1;transition:scale .5s var(--fw-ease) 2.5s}
html.js .fw-s2 .fw-anteile .fw-f2{transition-delay:2.8s}
html.js .fw-s2 .fw-anteile .fw-f3{transition-delay:3.1s}
html.js .fw-s2 .fw-zeile b{opacity:0;transition:opacity .3s var(--fw-ease) 2.6s}
html.js .fw-s2 .fw-zeile.fw-f2 b{transition-delay:2.9s}
html.js .fw-s2 .fw-zeile.fw-f3 b{transition-delay:3.2s}
html.js .fw-s2.is-play .fw-status .a{opacity:0}
html.js .fw-s2.is-play .fw-status .b,html.js .fw-s2.is-play .fw-weg,html.js .fw-s2.is-play .fw-zeile b{opacity:1}
html.js .fw-s2.is-play .fw-punkt{animation:fw-lauf .8s var(--fw-ease) 1.4s both}
html.js .fw-s2.is-play .fw-zu{opacity:1;translate:0 0}
html.js .fw-s2.is-play .fw-anteile i{scale:1 1}

/* 3 · Automation: Die Regel „verpasster Anruf → SMS“ greift, die SMS geht raus. */
.fw-regel{left:18px;top:18px;width:260px;padding:14px 16px}
.fw-regel__kopf{display:flex;align-items:center;justify-content:space-between}
.fw-schritt{position:relative;display:flex;align-items:center;gap:10px;margin-top:12px}
.fw-schritt .fw-lbl{font-size:9.5px}
.fw-schritt+.fw-schritt::before{content:"";position:absolute;left:14.25px;bottom:100%;height:12px;border-left:1.5px dashed #CDD3DB}
.fw-schritt--dann .fw-ic{box-shadow:var(--fw-ring)}
.fw-rot{position:absolute;right:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--red-500);box-shadow:0 0 0 2px #FFFFFF}
.fw-sms{left:132px;top:172px;width:290px;padding:12px 14px}
.fw-sms__kopf{display:flex;align-items:center;gap:6px}
.fw-sms__kopf time{margin-left:auto;font-size:11px;color:var(--fw-grau)}
.fw-blase--raus{margin-left:auto;border-radius:14px 14px 4px 14px;background:#E9F5E4}
.fw-s3 .fw-punkt{offset-path:path("M50 151 V213 H132")}

html.js .fw-s3 .fw-rot{scale:0;transition:scale .35s var(--fw-pop) .7s}
html.js .fw-s3 .fw-schritt--dann .fw-ic{box-shadow:none;transition:box-shadow .3s var(--fw-ease) 1.2s}
html.js .fw-s3 .fw-weg{opacity:0;transition:opacity .3s var(--fw-ease) 1.3s}
html.js .fw-s3 .fw-sms{opacity:0;translate:-10px 0;transition:opacity .45s var(--fw-ease) 2.3s,translate .45s var(--fw-ease) 2.3s}
html.js .fw-s3 .fw-ok{scale:0;transition:scale .35s var(--fw-pop) 2.9s}
html.js .fw-s3.is-play .fw-rot,html.js .fw-s3.is-play .fw-ok{scale:1}
html.js .fw-s3.is-play .fw-schritt--dann .fw-ic{box-shadow:var(--fw-ring)}
html.js .fw-s3.is-play .fw-weg{opacity:1}
html.js .fw-s3.is-play .fw-punkt{animation:fw-lauf .9s var(--fw-ease) 1.4s both}
html.js .fw-s3.is-play .fw-sms{opacity:1;translate:0 0}

/* 4 · Team: Die Nachricht landet bei Sabine, die Hauptstraße 5 betreut.
   Per Notiz fragt sie Tim, und Tim übernimmt. */
.fw-gespraech{left:18px;top:17px;width:310px;padding:14px 16px 18px}
.fw-gespraech .fw-zuweisung{margin-top:10px}
.fw-gespraech .fw-blase{margin-top:12px}
.fw-blase--rein{border-radius:4px 14px 14px 14px;background:#F3F5F7}
.fw-zuweisung{display:flex;align-items:center;gap:8px;margin-top:12px}
.fw-erkannt{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;background:var(--teal-50);color:var(--teal-700);
  font-size:11px;font-weight:var(--fw-bold);white-space:nowrap}
.fw-erkannt .icon{width:12px;height:12px}
.fw-pfeil{width:13px;height:13px;color:var(--fw-grau)}
.fw-wer{display:grid;height:28px;border:1px solid var(--fw-rand);border-radius:99px;background:#FFFFFF}
.fw-wer>span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px;padding:0 11px 0 2px;font-size:11.5px;font-weight:var(--fw-bold);white-space:nowrap}
.fw-wer .a{opacity:0}
.fw-notiz{left:142px;top:151px;width:280px;padding:12px 14px;border-color:rgba(183,121,31,.18);background:#FFFCF4}
.fw-notiz .fw-lbl{color:var(--amber-500)}
.fw-notiz__zeile{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;line-height:1.4;color:var(--ink);white-space:nowrap}
.fw-notiz__zeile b{font-weight:var(--fw-bold);color:var(--himmel-700)}
.fw-s4 .fw-zeiger{left:262px;top:84px}

html.js .fw-s4 .fw-erkannt{opacity:0;scale:.85;transition:opacity .3s var(--fw-ease) .8s,scale .3s var(--fw-ease) .8s}
html.js .fw-s4 .fw-pfeil,html.js .fw-s4 .fw-wer{opacity:0;transition:opacity .3s var(--fw-ease) 1.2s}
html.js .fw-s4 .fw-wer .a{opacity:1;transition:opacity .25s var(--fw-ease) 3.6s}
html.js .fw-s4 .fw-wer .b{opacity:0;transition:opacity .25s var(--fw-ease) 3.6s}
html.js .fw-s4 .fw-notiz{opacity:0;translate:0 10px;transition:opacity .45s var(--fw-ease) 2s,translate .45s var(--fw-ease) 2s}
html.js .fw-s4 .fw-n2{opacity:0;translate:0 4px;transition:opacity .35s var(--fw-ease) 4.1s,translate .35s var(--fw-ease) 4.1s}
html.js .fw-s4 .fw-zeiger{opacity:0;translate:110px 120px;transition:opacity .3s var(--fw-ease) 2.6s,translate .8s var(--fw-ease) 2.6s}
html.js .fw-s4.is-play .fw-notiz,html.js .fw-s4.is-play .fw-n2{opacity:1;translate:0 0}
html.js .fw-s4.is-play .fw-erkannt{opacity:1;scale:1}
html.js .fw-s4.is-play .fw-pfeil,html.js .fw-s4.is-play .fw-wer .b{opacity:1}
html.js .fw-s4.is-play .fw-wer{opacity:1;animation:fw-druck .25s var(--fw-ease) 3.45s}
html.js .fw-s4.is-play .fw-wer .a{opacity:0}
html.js .fw-s4.is-play .fw-zeiger{opacity:1;translate:0 0}

/* 5 · Mieter und Eigentümer: dunkle Karte, rechts ein Screenshot des Chat-Fensters
   auf einer Website. Das Bild läuft unten aus der Karte heraus. */
.fw-karte--mieter{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;
  border:0;background:radial-gradient(60% 80% at 80% 50%,color-mix(in srgb,var(--teal-300) 22%,transparent),color-mix(in srgb,var(--teal-300) 0%,transparent) 70%),linear-gradient(160deg,var(--teal-700),var(--teal-900))}
.fw-karte--mieter .fw-karte__text{gap:14px;padding:56px 24px 56px 56px}
.fw .fw-karte--mieter h4{font-size:34px;line-height:1.18;color:#FFFFFF}
.fw .fw-karte--mieter .fw-karte__text p{font-size:17px;color:var(--teal-100)}
.fw-marke--hell{background:rgba(255,255,255,.12);color:var(--teal-100)}
.fw-mieter__bild{position:relative;align-self:stretch;min-height:420px}
.fw-mieter__bild img{position:absolute;left:50%;top:56px;width:min(396px,calc(100% - 24px));height:auto;translate:-50% 0;
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.42))}

/* ── Breiten ───────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .fw-groesse{padding:30px 26px 14px}
}
@media (max-width:960px){
  .fw .sec-head h2{font-size:32px}
  .fw .fw-titel{font-size:30px}
  .fw-groessen{grid-template-columns:1fr}
  .fw-groesse{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);column-gap:24px;align-items:end;justify-items:start;padding:28px 28px 14px}
  .fw-groesse>*{grid-column:1}
  .fw-groesse .fw-stadt{grid-column:2;grid-row:1/span 3;justify-self:end;margin:0;padding:0}
  /* Untereinander steht jede Größe auf ihrem eigenen Boden. */
  .fw-groessen::after{display:none}
  .fw-groesse{position:relative}
  .fw-groesse::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:var(--teal-200)}
  .fw-groesse+.fw-groesse{border-left:0}
  .fw-zahlen{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .fw-limit{margin-top:88px}
  .fw-bento{grid-template-columns:1fr;max-width:620px}
  .fw-karte--mieter{grid-template-columns:1fr}
  .fw-karte--mieter .fw-karte__text{padding:40px 32px 8px}
  .fw-mieter__bild{min-height:400px}
  .fw-mieter__bild img{top:32px}
  .fw .fw-karte--mieter h4{font-size:30px}
}
@media (max-width:640px){
  .fw .sec-head h2{font-size:30px}
  .fw .fw-titel{font-size:26px}
  .fw .fw-lead{font-size:17px}
  .fw-groesse{grid-template-columns:minmax(0,1fr) 118px;column-gap:14px;row-gap:6px;padding:22px 20px 14px}
  .fw .fw-groesse p{font-size:15px}
  .fw-groesse__name{font-size:26px}
  .fw-zahl{gap:10px;padding:24px 22px 22px}
  .fw-zahl__wert{font-size:44px}
  .fw-zahl__text{font-size:17px}
  .fw-karte{border-radius:24px}
  .fw-karte__text{padding:22px 22px 28px}
  .fw .fw-karte h4{font-size:22px}
  .fw-karte--mieter .fw-karte__text{padding:32px 22px 4px}
  .fw .fw-karte--mieter h4{font-size:26px}
  .fw-mieter__bild{min-height:360px}
  .fw-mieter__bild img{top:24px}
}
@media (prefers-reduced-motion:reduce){
  .fw-stadt .aus-an,.fw-stadt .an-aus,.fw-wende i::after{animation:none}
  .fw-wende i::after,.fw-punkt{display:none}
  .fw-balken i,.fw-szene,.fw-szene *,.fw-szene *::after{transition:none!important}
  .fw-szene *{animation:none!important}
}