/* Die Bühne des Lebensberaters: Raum hinten, Figuren in der Mitte, Tisch vorn.
   Kein Inline-Stil im HTML. Alles hier oder über element.style im Skript.
   Bei "weniger Bewegung" läuft keine Figur, sie erscheinen ohne Lauf. */

.buehne {
  --b-radius: 22px;
  position: relative;
  width: 100%;
  aspect-ratio: 2.3 / 1;
  min-height: 300px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--b-radius);
  border: 1px solid rgba(184, 146, 74, 0.3);
  background: #f4ecda;
  box-shadow: 0 24px 50px -30px rgba(47, 43, 38, 0.5);
}
@media (max-width: 720px) {
  .buehne { aspect-ratio: 1 / 1; min-height: 320px; max-height: 440px; --b-radius: 16px; }
}

.ebene { position: absolute; inset: 0; pointer-events: none; }
.ebene-raum { z-index: 1; }
.ebene-figuren { z-index: 2; }
.ebene-tisch { z-index: 3; }
.ebene-schilder { z-index: 4; }

.raum-bild { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.raum-boden {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(180deg, rgba(246, 239, 223, 0), rgba(236, 222, 190, 0.78) 55%, rgba(226, 207, 168, 0.95));
}

/* Der Tisch als freigestellter Vordergrund. Seine Höhe richtet sich nach der Breite der Bühne. */
.tisch-bild { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; }

/* ---------- Figuren ---------- */
.figur {
  position: absolute; left: 0; top: 0;
  width: var(--fw, 120px);
  will-change: transform;
  --farbe: #888; --hell: #bbb; --dunkel: #555; --haar: #4a3a2a;
}
.figur-innen {
  position: relative;
  transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), scale 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
  transform-origin: 50% 100%;
}
.figur-svg { display: block; width: 100%; height: auto; overflow: visible; }

.f-haut { fill: #f3e4c8; }
.f-hals { fill: #e9d4b0; }
.f-auge { fill: #33271c; }
.f-mund { fill: #7a3b2e; stroke: #7a3b2e; stroke-width: 0.7; stroke-linejoin: round; }
.f-rumpf, .f-aermel, .f-weste { fill: var(--farbe); }
.f-hose { fill: var(--dunkel); }
.f-hemd { fill: #f3ead6; }
.f-revers, .f-bund { fill: var(--dunkel); }
.f-bund-klein { fill: var(--dunkel); opacity: 0.75; }
.f-schal { fill: var(--hell); }
.f-lage { filter: url(#lb-papier); }
.f-schuh { fill: #3b2d22; }
.f-haar path, .f-haar circle { fill: var(--haar); }
.f-haar path[fill="none"] { fill: none; stroke: rgba(255, 250, 240, 0.4); }
.f-naht { fill: none; stroke: rgba(33, 22, 12, 0.3); stroke-width: 1.2; stroke-linecap: round; }
.f-knopf { fill: rgba(33, 22, 12, 0.42); }
.f-muster { pointer-events: none; }

/* Mit den Malgründen des Malers: Kleidung und Ärmel sind aus dem bemalten Papier geschnitten. */
.buehne.mit-muster .figur[data-id="pflege"] :is(.f-rumpf, .f-aermel, .f-weste, .f-bund-klein) { fill: url(#lb-mg-pflege) var(--farbe); }
.buehne.mit-muster .figur[data-id="steuer"] :is(.f-rumpf:not(.f-hemd), .f-aermel, .f-weste) { fill: url(#lb-mg-steuer) var(--farbe); }
.buehne.mit-muster .figur[data-id="geld"] :is(.f-rumpf, .f-aermel, .f-weste) { fill: url(#lb-mg-geld) var(--farbe); }
.buehne.mit-muster .figur[data-id="versicherung"] :is(.f-rumpf, .f-aermel, .f-weste) { fill: url(#lb-mg-versicherung) var(--farbe); }
.buehne.mit-muster .figur[data-id="recht"] :is(.f-rumpf, .f-aermel, .f-weste) { fill: url(#lb-mg-recht) var(--farbe); }
.buehne.mit-muster .figur[data-id="familie"] :is(.f-rumpf, .f-aermel, .f-weste) { fill: url(#lb-mg-familie) var(--farbe); }

/* Der Sprecher hebt sich leicht ab. */
/* Der Hebeeffekt liegt auf dem äußeren Feld (eigene Eigenschaften translate und scale), weil das Sitzen auf dem inneren läuft. */
.figur { transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), scale 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease; transform-origin: 50% 40%; }
.figur.spricht { z-index: 3; translate: 0 -9px; scale: 1.05; filter: drop-shadow(0 10px 10px rgba(74, 52, 20, 0.3)); }

/* Laufen: Beine und Arme schwingen, der Körper wippt. Der Papierfilter ruht dabei, das hält ältere Geräte flüssig. */
.figur.bewegt .f-lage { filter: none; }
.figur .f-arm, .figur .f-bein { transform-box: fill-box; transform-origin: 50% 0; }
.figur.geht .f-bein-l { animation: lb-bein-a 0.64s ease-in-out infinite alternate; }
.figur.geht .f-bein-r { animation: lb-bein-b 0.64s ease-in-out infinite alternate; }
.figur.geht .f-arm-l { animation: lb-arm-b 0.64s ease-in-out infinite alternate; }
.figur.geht .f-arm-r { animation: lb-arm-a 0.64s ease-in-out infinite alternate; }
.figur.geht .figur-innen { animation: lb-wippen 0.32s ease-in-out infinite alternate; }
@keyframes lb-bein-a { from { transform: rotate(-23deg); } to { transform: rotate(23deg); } }
@keyframes lb-bein-b { from { transform: rotate(23deg); } to { transform: rotate(-23deg); } }
@keyframes lb-arm-a { from { transform: rotate(-17deg); } to { transform: rotate(17deg); } }
@keyframes lb-arm-b { from { transform: rotate(17deg); } to { transform: rotate(-17deg); } }
@keyframes lb-wippen { from { translate: 0 0; } to { translate: 0 -6px; } }

/* Beim Sprechen bewegt sich ein Arm langsam, mehr nicht. */
.figur.spricht .f-arm-r { animation: lb-geste 2.6s ease-in-out infinite; }
@keyframes lb-geste { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-16deg); } 70% { transform: rotate(-8deg); } }

/* Ankommen und Gehen: sanftes Ein- und Ausblenden an den Rändern. */
.figur.ein { animation: lb-ein 0.5s ease-out both; }
@keyframes lb-ein { from { opacity: 0; } to { opacity: 1; } }

/* Freebe sitzt am Kopf des Tisches. Der Maler baut den Phönix in dieses Feld. */
.platz-freebe {
  position: absolute; left: 0; top: 0;
  width: var(--fw, 220px); height: var(--fh, 220px);
  will-change: transform;
}
.platz-freebe .freebe-hell {
  position: absolute; left: 50%; top: 52%; width: 130%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(222, 170, 70, 0.34), rgba(222, 170, 70, 0) 66%);
  pointer-events: none;
}
.platz-freebe.ruhig .freebe-hell { opacity: 0.8; }

/* Der Platzhalter-Phönix. Warmes Leuchten, keine Flammen. */
.pf-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pf-auge { fill: #3a2418; }
.pf-glanz { fill: #fffaf0; }
.pf-feder-linie { fill: none; stroke: rgba(122, 58, 20, 0.38); stroke-width: 1.5; stroke-linecap: round; }
.pf-feder { opacity: 0.96; }
.pf-ganz { transform-box: fill-box; transform-origin: 50% 80%; }
.pf-platz .pf-ganz { animation: pf-atmen 6s ease-in-out infinite; }
.pf-platz .freebe-hell { animation: pf-leuchten 5s ease-in-out infinite alternate; }
.pf-platz.spricht .pf-ganz { animation: pf-spricht 1.6s ease-in-out infinite; }
.pf-platz.spricht .freebe-hell { opacity: 1; scale: 1.12; }
.pf-platz.pf-ankommen .pf-ganz { animation: pf-ankommen 0.9s ease-out both; }
.pf-platz .pf-fluegel { transform-box: fill-box; transform-origin: 90% 20%; }
.pf-platz .pf-fluegel-r { transform-origin: 10% 20%; }
.pf-platz.pf-ankommen .pf-fluegel-l { animation: pf-flattern-l 0.9s ease-in-out both; }
.pf-platz.pf-ankommen .pf-fluegel-r { animation: pf-flattern-r 0.9s ease-in-out both; }
@keyframes pf-atmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } }
@keyframes pf-leuchten { from { opacity: 0.7; } to { opacity: 1; } }
@keyframes pf-spricht { 0%, 100% { transform: translateY(0) scale(1.03); } 50% { transform: translateY(-3px) scale(1.05); } }
@keyframes pf-ankommen { from { transform: translateY(-46px) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pf-flattern-l { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-18deg); } 60% { transform: rotate(8deg); } }
@keyframes pf-flattern-r { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(18deg); } 60% { transform: rotate(-8deg); } }

/* Namensschilder auf dem Tisch. Das KI-Schild sitzt wie eine Marke an der Ecke, so bleibt Platz für den Namen. */
.schild {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 0.28rem;
  width: var(--sw, 120px); min-height: 36px;
  padding: 0.26rem 0.35rem 0.26rem 0.3rem;
  border-radius: 12px;
  background: rgba(255, 250, 238, 0.95);
  border: 1px solid rgba(184, 146, 74, 0.55);
  box-shadow: 0 6px 12px -8px rgba(47, 43, 38, 0.55);
  color: var(--tinte, #2f2b26);
  font-family: var(--schrift-text);
  font-size: 0.68rem; line-height: 1.12;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.schild.da { opacity: 1; }
.schild-zeichen { display: grid; place-items: center; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; color: #fff; background: var(--farbe, #777); }
.schild-zeichen svg { width: 66%; height: 66%; }
.schild-namen { display: grid; min-width: 0; font-weight: 500; }
.schild-n1, .schild-n2 { display: block; white-space: nowrap; }
.schild-ki {
  position: absolute; top: -9px; right: -5px;
  padding: 0.06rem 0.36rem; border-radius: 999px;
  background: #2b2116; color: #fff7e6; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; line-height: 1.25;
  border: 1px solid #fff7e6;
}
/* Ist die Bühne zu schmal für den Namen (buehne.js setzt dann die Klasse ohne-namen), zeigt das Schild nur Zeichen und KI, etwa 57 mal 29 Pixel.
   Unter 320 Pixel Bühnenbreite (Klasse eng) wird es noch kleiner, etwa 47 mal 25. Der Name steht dann im Sprechblock und auf den Knöpfen darunter.
   Die Größen stehen auch in plaetze.js (SCHILD_OHNE_NAMEN), ein Test rechnet damit nach, dass sich Schilder nicht berühren. */
.buehne.ohne-namen .schild { width: auto; min-height: 0; padding: 0.18rem 0.5rem 0.18rem 0.2rem; gap: 0.2rem; }
.buehne.ohne-namen .schild-zeichen { width: 1.3rem; height: 1.3rem; }
.buehne.ohne-namen .schild-namen { display: none; }
.buehne.ohne-namen .schild-ki { position: static; border: 0; padding: 0.04rem 0.3rem; font-size: 0.62rem; }
.buehne.eng .schild { padding: 0.15rem 0.35rem 0.15rem 0.15rem; gap: 0.15rem; }
.buehne.eng .schild-zeichen { width: 1.1rem; height: 1.1rem; }
.buehne.eng .schild-ki { padding: 0.03rem 0.22rem; font-size: 0.55rem; }

/* Die Bühne steht still: nach einem Krisentreffer bewegt sich nichts mehr, Freebe leuchtet ruhig. */
.buehne.still .figur, .buehne.still .figur *, .buehne.still .platz-freebe, .buehne.still .platz-freebe * {
  animation: none !important; transition: none !important;
}
.buehne.still .figur .f-lage { filter: url(#lb-papier); }
.buehne.still .figur.spricht { translate: none; scale: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .figur, .figur *, .platz-freebe, .platz-freebe *, .schild { animation: none !important; transition: none !important; }
  .figur .f-lage { filter: url(#lb-papier); }
}

.lb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nur-lesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }