/* Claude 11.10.2026 – breites Layout und Ansicht je Avatar (Eigentümer: „Warum nicht ein breites Layout mit genug hoher
   Auflösung – und dann kann der Bildausschnitt selbst gewählt werden, ob breite oder hochformatige Ansicht. … Errichte es so.“)
   Befund: am Desktop lief die App als Handyspalte (#app max-width:640px) mitten in dunkler Fläche; Kevin erschien als
   schmaler Hochformat-Streifen, links/rechts lag das Porträt-Standbild (anderes Motiv) bildfüllend darunter (Collage mit
   harten Kanten); Namenszug und Knöpfe lagen über Kinn und Brust (margin:-138px im Bühne-Design).
   Hier, gemeinsam für alle Designs und Vorlagen:
   1) Bühnenform aus der Ansicht (data-ansicht an #stage, gesetzt von avatar-frame.mjs): breit = 16:9, hoch = 3:4 (quer)
      bzw. Handyform, frei = Gerätestandard. Höhe nur über --buehne-hoehe (eine Quelle, app.css R1).
   2) Füllung der Querbühne aus demselben Clip (buehnen-ansicht.mjs) statt fremdem Standbild.
   3) Namenszug nie über den oberen 70 % der Bildhöhe (--namenszug-ueberlappung, aus avatar-frame.mjs).
   4) Ab 1100 px zweispaltig: links grosse Bühne, rechts Verlauf, Eingabe und Schnellziele; keine feste Spaltenbreite. */

/* ---------- 1) Ansicht → Bühnenform (unter dem breiten Layout) ------------------------------------------------------ */
html:not([data-layout]):root body:not(.avatar-expanded):not(.conversation-keyboard):not(.avatar-focus) #app #conversation #stage.avatar-stage[data-ansicht="breit"]:not(.is-frame-editing){--buehne-hoehe:calc(var(--buehne-breite) * 9 / 16)}
/* Claude 23.10.2026 (Eigentümer: „bei Hochkant links und rechts ein Rand – eigentlich immer ohne Rand“): bisher wurde die Bühne
   im Querfenster auf 3:4 verschmälert und mittig gesetzt – links/rechts lag die dunkle Spalte. Jetzt bleibt die Bühne voll breit;
   nur die scharfen Ebenen sind 3:4 schmal und mittig (--hoch-breite), die Seiten füllt die vorhandene Unschärfe desselben Avatars.
   Der Ausschnitt rechnet weiter mit der Medienbox (displaySize), also exakt 3:4. Gilt auch für den freien Ausschnitt im Hochformat
   (data-form="hoch", avatar-frame.mjs). Freier Ausschnitt im Querformat (data-form="quer") = Bühnenform 16:9. */
html:not([data-layout]):root body:not(.avatar-expanded):not(.conversation-keyboard):not(.avatar-focus) #app #conversation #stage.avatar-stage[data-ansicht="frei"][data-form="quer"]:not(.is-frame-editing){--buehne-hoehe:calc(var(--buehne-breite) * 9 / 16)}
html:not([data-layout]):root body:not(.avatar-expanded):not(.conversation-keyboard):not(.avatar-focus) #app #conversation #stage.avatar-stage[data-ansicht="frei"][data-form="hoch"]:not(.is-frame-editing){--buehne-hoehe:min(calc(var(--buehne-breite) * 4 / 3),max(180px,72cqh));--hoch-breite:min(100%,calc(var(--buehne-hoehe) * 3 / 4))}
/* Claude 23.10.2026, Nachtrag (Eigentuemer: "bei Hochkant darf es links und rechts keinen Rand geben - leicht reingezoomt,
   dafuer geht der Rahmen bis an den Rand"): die scharfen Ebenen fuellen jetzt die ganze Buehnenbreite (object-fit: cover
   zoomt leicht hinein); keine 3:4-Spalte mit Unschaerfe links/rechts mehr. --hoch-breite bleibt nur noch als Hoehenmass. */
@media (orientation:landscape){
  html:not([data-layout]):root body:not(.avatar-expanded):not(.conversation-keyboard):not(.avatar-focus) #app #conversation #stage.avatar-stage:is([data-ansicht="hoch"],[data-ansicht="frei"][data-form="hoch"]):not(.is-frame-editing){--buehne-hoehe:min(calc(var(--buehne-breite) * 4 / 3),max(240px,80svh));--hoch-breite:100%}
}
/* Claude 23.10.2026 (Eigentuemer: "Hochkant ist quadratisch - beim Vergroessern waere es eigentlich hochkant, genau so soll es
   sein"): Hochkant ist jetzt ein echtes Hochformat (Hoehe = 4/3 der Breite, hoechstens 80 % der Fensterhoehe), volle Breite. */
html:not([data-layout]):root body:not(.avatar-expanded):not(.conversation-keyboard):not(.avatar-focus) #app #conversation #stage.avatar-stage:is([data-ansicht="hoch"],[data-ansicht="frei"][data-form="hoch"]):not(.is-frame-editing) :is(#portrait,#idleVideo,#speakingVideo,#actionVideo,.dar-video,.avatar-intro){left:0;right:0;width:100%}

/* ---------- 2) Füllung aus demselben Clip ------------------------------------------------------------------------- */
#stage .buehne-fuellung{position:absolute;inset:0;display:block;width:100%;height:100%;filter:blur(20px) brightness(.55) saturate(1.15);transform:scale(1.15);opacity:0;transition:opacity .2s ease;pointer-events:none}
#stage.fuellung-aus-clip .buehne-fuellung{opacity:1}
#stage.fuellung-aus-clip .buehne-unschaerfe::before{opacity:0}
/* Ebenen in anderem Format lägen bildfüllend unter dem ganz gezeigten Hochformat-Clip (Collage) – während der Füllung verdeckt. */
#app #conversation #stage.fuellung-aus-clip .fuellung-verdeckt{visibility:hidden!important}
@media(prefers-reduced-motion:reduce){#stage .buehne-fuellung{transition:none}}

/* ---------- 3) Namenszug: höchstens im unteren Bildteil, Knöpfe darunter -------------------------------------------- */
html[data-theme="buehne"]:root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation .avatar-heading{margin-top:calc(var(--namenszug-ueberlappung, 0px) * -1)}

/* Ansicht wählen im Avatar-Menü (Breit / Hochformat / Frei). */
.avatar-settings-menu .avatar-settings-ansicht{flex-direction:column;align-items:stretch;gap:8px;cursor:default}
.avatar-settings-menu .avatar-settings-ansicht:hover{background:transparent}
.avatar-settings-menu .avatar-settings-ansicht>span{font-size:12px;color:var(--muted)}
.avatar-ansicht-wahl{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:14px}
.avatar-ansicht-knopf{flex:1 1 0;min-width:0;min-height:44px;padding:2px 6px;border-radius:11px;color:var(--text);font-size:13px;line-height:1.15;white-space:normal;overflow-wrap:anywhere}
.avatar-ansicht-knopf[aria-pressed="true"]{background:var(--accent);color:var(--theme-accent-ink,var(--bg));font-weight:600}
.avatar-ansicht-knopf:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- 4) Breites Layout ab 1100 px ---------------------------------------------------------------------------
   Zwei unabhängige Spalten in EINEM Raster: rechts bestimmen Verlauf (1fr) und Eingabe die Zeilen; links liegen Bühne,
   Namensleiste und Status über alle Zeilen (grid-row 1 / span 20) und werden über die Bühnenhöhe gestapelt
   (--breit-buehne-h am Gespräch, dieselbe Grösse speist --buehne-hoehe der Bühne). So kann die rechte Spalte die linke
   nie verschieben, und die Eingabe bleibt immer sichtbar. */
/* Claude 11.10.2026, 17:55 (Eigentümer: „ansicht immer noch total zerstört … wie vor 4–5 Tagen“): das zweispaltige breite Layout
   ist AUS, solange html[data-breit="an"] fehlt – Standard ist wieder die schlichte Handyspalte (640 px, mittig), wie bis r282.
   Einschalten: Avatar-Menü „Breite Ansicht“ (localStorage aiona-breite-ansicht = an; boot.js setzt das Attribut vor dem ersten Bild). */
@media (min-width:1100px){
  html[data-breit="an"]:root{--breit-chat:clamp(360px,30vw,520px);--breit-luecke:24px;--breit-rand:24px;--breit-kopfzeile:52px;--breit-reserve:150px;--breit-reserve-vorlage:240px}
  /* Die App nutzt die ganze Fensterbreite (vorher eine 640-px-Handyspalte). */
  html[data-breit="an"]:root body #app{max-width:none;width:100%;margin:0;border-left:0;border-right:0}
  html[data-breit="an"][data-theme="buehne"]:root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app:has(>main>#conversation:not(.hidden))>.topbar{width:calc(100% - 24px)}
  /* Übrige Seiten: lesbare Zeilenlänge, mittig. */
  html[data-breit="an"]:root body #app>main>.page:not(#conversation),html[data-breit="an"]:root body #app>main>#pairing{width:100%;max-width:1040px;margin-left:auto;margin-right:auto}
  html[data-breit="an"]:root body .scroll-jump-buttons{left:auto;right:24px;width:auto;max-width:none;transform:none}

  /* Gespräch (Standardansicht und alle Designs). */
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden){--breit-spalte:calc(100cqw - 2 * var(--breit-rand) - var(--breit-luecke) - var(--breit-chat));--breit-buehne-h:max(220px,min(calc(var(--breit-spalte) * 9 / 16),calc(100cqh - var(--breit-reserve))));--breit-buehne-w:min(var(--breit-spalte),calc(var(--breit-buehne-h) * 16 / 9));display:grid;grid-template-columns:minmax(0,1fr) var(--breit-chat);grid-template-rows:minmax(280px,1fr);grid-auto-rows:auto;column-gap:var(--breit-luecke);row-gap:0;align-items:start;height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;padding:12px var(--breit-rand)}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden):has(#stage:is([data-ansicht="hoch"],[data-ansicht="frei"][data-form="hoch"])){--breit-buehne-h:max(260px,calc(100cqh - var(--breit-reserve)));--breit-buehne-w:min(var(--breit-spalte),calc(var(--breit-buehne-h) * 3 / 4))}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) .conversation-interaction{display:contents}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) :is(#stage,#resultStage){grid-column:1;grid-row:1 / span 20;align-self:start;justify-self:center}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) #stage.avatar-stage:not(.is-frame-editing){--buehne-hoehe:var(--breit-buehne-h);width:var(--breit-buehne-w);margin:0;align-self:start;border-radius:22px}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) #stage.avatar-stage.is-frame-editing{--buehne-hoehe:var(--breit-buehne-h);width:var(--breit-spalte);margin:0}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) #resultStage{width:var(--breit-spalte);height:var(--breit-buehne-h);min-height:0;margin:0}
  /* Namenszug klein links, die drei Knöpfe als Leiste rechts – direkt unter der Bühne, nie über dem Avatar. */
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) .avatar-heading{grid-column:1;grid-row:1 / span 20;align-self:start;justify-self:center;width:var(--breit-buehne-w);height:var(--breit-kopfzeile);min-height:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:16px;margin:calc(var(--breit-buehne-h) + 10px) 0 0;padding:0 4px}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) .avatar-heading>div:first-child{width:auto;flex:0 1 auto;min-width:0;text-align:left}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) .avatar-heading .eyebrow{display:block;text-align:left;font-size:10px;line-height:14px;letter-spacing:1.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) .avatar-heading h1#avatarName{font-size:22px;line-height:26px;letter-spacing:-.4px;text-align:left;margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) .avatar-controls{flex:0 0 auto;max-width:70%;width:auto;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) .stage-caption{grid-column:1;grid-row:1 / span 20;align-self:start;justify-self:center;width:var(--breit-buehne-w);margin:calc(var(--breit-buehne-h) + 16px + var(--breit-kopfzeile)) 0 0}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) .avatar-frame-bar{grid-column:1;grid-row:1 / span 20;align-self:start;margin:calc(var(--breit-buehne-h) + 10px) 0 0}
  html[data-breit="an"]:not([data-layout]):root body.avatar-frame-editing:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) .stage-caption{display:none}
  /* Rechts: Verlauf füllt den Platz, darunter Hinweise, Eingabe, Schnellziele. */
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) .conversation-history{grid-column:2;grid-row:1;align-self:stretch;display:flex;flex-direction:column;height:auto;min-height:0;overflow:hidden}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) .conversation-history .messages{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) :is(.attachments,#firstRunInvite,#internalNotice,#meetingInviteNotice,#resultReference,#parallelStatus,.composer,#faehigkeitsVorschlaege,#inputQueuePanel,#voiceRecovery,#schnellziele,#tourAngebot){grid-column:2;margin-top:8px}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) .attachments:empty{margin-top:0}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) #tourAngebot{order:2}
  html[data-breit="an"]:not([data-layout]):root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app #conversation:not(.hidden) #schnellziele{order:4}

  /* Layout-Vorlagen M01–M25 mit Bühne: dasselbe Raster (gemeinsame Regeln, keine Einzelkorrekturen). Links Bühne, Status,
     Wechsel, Kennung, Umschalter und Panel; rechts der Verlauf über diese Zeilen, darunter Hinweise und Eingabe (sie können
     den Verlauf nie überholen). Vorlagen mit kleiner oder zugeklappter Bühne bleiben einspaltig; Vorlagen „ohne Bühne“ zeigen sie hier (siehe unten). */
  html[data-breit="an"][data-layout]:not(.lay-buehne-klein):not(.lay-buehne-zu):root body:not(.conversation-keyboard) #app #conversation:not(.hidden){--breit-spalte:calc(100cqw - 2 * var(--breit-rand) - var(--breit-luecke) - var(--breit-chat));--breit-buehne-h:max(220px,min(calc(var(--breit-spalte) * 9 / 16),calc(100cqh - var(--breit-reserve-vorlage))));--breit-buehne-w:min(var(--breit-spalte),calc(var(--breit-buehne-h) * 16 / 9));display:grid;grid-template-columns:minmax(0,1fr) var(--breit-chat);grid-template-rows:auto auto auto auto auto minmax(0,1fr);grid-auto-rows:auto;column-gap:var(--breit-luecke);row-gap:0;align-items:start;height:100%;min-height:0;padding:12px var(--breit-rand);overflow-x:hidden;overflow-y:auto}
  html[data-breit="an"][data-layout]:not(.lay-buehne-klein):not(.lay-buehne-zu):root body:not(.conversation-keyboard) #app #conversation:not(.hidden):has(#stage:is([data-ansicht="hoch"],[data-ansicht="frei"][data-form="hoch"])){--breit-buehne-h:max(260px,calc(100cqh - var(--breit-reserve-vorlage)));--breit-buehne-w:min(var(--breit-spalte),calc(var(--breit-buehne-h) * 3 / 4))}
  html[data-breit="an"][data-layout]:not(.lay-buehne-klein):not(.lay-buehne-zu):root body:not(.conversation-keyboard) #app #conversation:not(.hidden) :is(#layoutBuehneAuf,#stage,#resultStage){grid-column:1;grid-row:1;justify-self:center}
  html[data-breit="an"][data-layout]:not(.lay-buehne-klein):not(.lay-buehne-zu):root body:not(.conversation-keyboard) #app #conversation:not(.hidden) #stage:not(.is-frame-editing){--buehne-hoehe:var(--breit-buehne-h);height:var(--buehne-hoehe);width:var(--breit-buehne-w);margin:0;align-self:start;border-radius:22px}
  html[data-breit="an"][data-layout]:not(.lay-buehne-klein):not(.lay-buehne-zu):root body:not(.conversation-keyboard) #app #conversation:not(.hidden) #resultStage{width:var(--breit-spalte);margin:0}
  html[data-breit="an"][data-layout]:not(.lay-buehne-klein):not(.lay-buehne-zu):root body:not(.conversation-keyboard) #app #conversation:not(.hidden) .stage-caption{grid-column:1;grid-row:2;justify-self:center;width:var(--breit-buehne-w)}
  html[data-breit="an"][data-layout]:not(.lay-buehne-klein):not(.lay-buehne-zu):root body:not(.conversation-keyboard) #app #conversation:not(.hidden) #layoutWechsel{grid-column:1;grid-row:3;justify-self:center;margin:8px 0 0;transform:none}
  html[data-breit="an"][data-layout]:not(.lay-buehne-klein):not(.lay-buehne-zu):root body:not(.conversation-keyboard) #app #conversation:not(.hidden) #layoutIdentitaet{grid-column:1;grid-row:4;justify-self:center;width:var(--breit-buehne-w)}
  html[data-breit="an"][data-layout]:not(.lay-buehne-klein):not(.lay-buehne-zu):root body:not(.conversation-keyboard) #app #conversation:not(.hidden) #layoutUmschalter{grid-column:1;grid-row:5;justify-self:center;width:var(--breit-buehne-w)}
  html[data-breit="an"][data-layout]:not(.lay-buehne-klein):not(.lay-buehne-zu):root body:not(.conversation-keyboard) #app #conversation:not(.hidden) #layoutPanel{grid-column:1;grid-row:6 / span 12;align-self:stretch;min-height:0;overflow-y:auto}
  html[data-breit="an"][data-layout]:not(.lay-buehne-klein):not(.lay-buehne-zu):root body:not(.conversation-keyboard) #app #conversation:not(.hidden) #messages{grid-column:2;grid-row:1 / 7;align-self:stretch;min-height:0;overflow-y:auto}
  html[data-breit="an"][data-layout]:not(.lay-buehne-klein):not(.lay-buehne-zu):root body:not(.conversation-keyboard) #app #conversation:not(.hidden) :is(#suggestions,#layoutKontext,#attachments,#firstRunInvite,#internalNotice,#meetingInviteNotice,#resultReference,#parallelStatus,#voiceRecovery,#inputQueuePanel,#faehigkeitsVorschlaege,#composer,#layoutFuss,#tourAngebot){grid-column:2}
  /* Claude 11.10.2026 (Eigentümer: „die ganze Ansicht“ soll sichtbar sein): Vorlagen ohne Bühne (M05, M06, M11, M12, M13,
     M18, M24) blenden am Handy die Bühne aus – am breiten Bildschirm liegt links sonst nur leere Fläche. Ab 1100 px zeigen
     auch sie links die 16:9-Bühne mit dem ganzen Avatar; die Handyansicht bleibt unverändert (layouts-a.css blendet aus). */
  html[data-breit="an"][data-layout].lay-buehne-aus:root body:not(.conversation-keyboard) #app #conversation:not(.hidden) #stage{display:block}
  /* Antwortblasen dürfen in der breiten Chatspalte breiter werden als die 320 px der Handy-Vorlagen. */
  html[data-breit="an"][data-layout]:root #app #conversation .message{max-width:min(86%,560px)}
}