/* Claude 04.10.2026 (Etappe 55a): Layout-Vorlagen nach den Designvorschlägen (docs/designvorschlaege, N-077).
   Grundregeln für alle 25 Vorlagen + Umsetzung M01–M08 (Bilder 853x1844 -> 390x844 CSS-px, Farben per Pipette).
   M09–M16 stehen in layouts-b.css, M17–M25 in layouts-c.css (Vertrag: docs/designvorschlaege/LAYOUT_VERTRAG.md).

   Aufbau
     0) Auswahl „Ansicht (Layout-Vorlage)“ in den Einstellungen (#layoutWahl, in jeder Ansicht sichtbar)
     1) Tokens: --lay-* je Vorlage -> alle Design-Tokens der App (--bg … --d-*), Akzent über --layout-accent*
     2) Grundgerüst: Kopf (#layoutKopf), Navigation (#layoutNav), Gesprächsseite als Spalte, Composer in einer Zeile
     3) Bühnenmodi (Klassen lay-buehne-gross|klein|band|held|klappbar|aus, lay-buehne-zu)
     4) Bausteine: Identität, Umschalter, Panel (Held/Finden/Heute/Arbeit/Ergebnis), Kontextkarte, Blatt (Menübaum)
     5) M01 … M08
   Jede Regel ist mit html[data-layout…] eingegrenzt (ausser #layoutWahl, das nur die neue Auswahl betrifft):
   ohne data-layout bleibt die bisherige Standardansicht völlig unverändert. Keine Inline-Styles (CSP), nur lokale
   Schriften, Symbole als SVG im DOM oder data:-Masken (img-src data: ist erlaubt). */

/* ---------- 0) Auswahl in den Einstellungen ------------------------------- */
#layoutWahl{display:grid;gap:10px;margin:4px 16px 16px;scroll-margin-top:96px}
#layoutWahl:empty{display:none}
#layoutWahl .layout-wahl-kopf{display:grid;gap:3px}
#layoutWahl .layout-wahl-kopf strong{font-size:14px}
#layoutWahl .layout-wahl-kopf small,#layoutWahl .layout-wahl-label{font-size:12px;line-height:1.4;color:var(--muted)}
#layoutWahl .layout-wahl-reihe{display:grid;grid-auto-flow:column;grid-auto-columns:104px;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:3px 3px 10px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#layoutWahl .layout-karte{scroll-snap-align:start;display:flex;flex-direction:column;gap:5px;min-width:0;min-height:44px;padding:6px 6px 8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer}
#layoutWahl .layout-karte[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
#layoutWahl .layout-karte:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#layoutWahl .layout-karte:disabled{cursor:default;opacity:.55}
#layoutWahl .layout-karte-bild{display:block;aspect-ratio:216/467;border-radius:9px;overflow:hidden;background:var(--bg);box-shadow:inset 0 0 0 1px rgba(127,127,127,.25)}
#layoutWahl .layout-karte-bild img{display:block;width:100%;height:100%;object-fit:cover}
#layoutWahl .layout-karte-standard{background:linear-gradient(var(--surface),var(--surface)) 8px 8px/calc(100% - 16px) 12px no-repeat,linear-gradient(var(--accent),var(--accent)) 8px 30px/60% 40% no-repeat,linear-gradient(var(--line),var(--line)) 8px calc(100% - 12px)/calc(100% - 16px) 10px no-repeat,var(--bg)}
#layoutWahl .layout-karte-name{font-size:12.5px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
#layoutWahl .layout-karte-hinweis{font-size:11px;color:var(--muted)}
#layoutWahl .layout-wahl-akzent{display:grid;gap:7px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
#layoutWahl .layout-wahl-farben{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* Claude 04.10.2026 (Etappe 66, A-083): Tippfläche ≥ 40 px */
#layoutWahl .layout-farbe{width:40px;height:40px;min-width:40px;padding:0;border-radius:50%;border:3px solid var(--surface);background:var(--sw);box-shadow:0 0 0 1px var(--line);cursor:pointer}
#layoutWahl .layout-farbe-vorlage{border-style:double;border-width:4px;border-color:var(--text)}
#layoutWahl .layout-farbe[aria-checked="true"]{box-shadow:0 0 0 2px var(--text),0 0 12px var(--sw)}
#layoutWahl .layout-farbe-eigene{width:44px;height:40px;padding:0 2px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}

/* ---------- 1) Tokens --------------------------------------------------- */
/* Jede Vorlage setzt nur --lay-*; hier werden daraus alle Tokens, die themes.css (html[data-theme]:not(klassisch))
   und die gemeinsame Vorlagen-Ebene (themes-designs.css, html[data-vorlage]) erwarten. themes.mjs setzt bei aktivem
   Layout data-theme="layout" und data-vorlage=<Schema>. Der Feinschliff (Akzent) kommt als --layout-accent*. */
html[data-layout]:root{
  --lay-akzent-ist:var(--layout-accent,var(--lay-akzent));
  --theme-menu-solid:var(--lay-flaeche);--bg:var(--lay-bg);--surface:var(--lay-flaeche);--line:var(--lay-linie);--text:var(--lay-text);--muted:var(--lay-gedaempft);
  --accent:var(--lay-akzent-ist);--violet:var(--lay-zweit,var(--lay-akzent-ist));
  --theme-font:var(--lay-schrift);--theme-heading-font:var(--lay-titel-schrift,var(--lay-schrift));--theme-heading-weight:700;
  --theme-glass:var(--lay-flaeche);--theme-glass-strong:var(--lay-flaeche);--theme-blur:none;--theme-field:var(--lay-feld);--theme-raised:var(--lay-erhoben);
  --theme-accent-ink:var(--layout-accent-ink,var(--lay-akzent-ink));--theme-accent-text:var(--layout-accent-text,var(--lay-akzent-text));
  --theme-accent-soft:var(--layout-accent-soft,color-mix(in srgb,var(--lay-akzent) 14%,transparent));--theme-accent-line:var(--layout-accent-line,color-mix(in srgb,var(--lay-akzent) 50%,transparent));
  --theme-eyebrow:var(--theme-accent-text);--theme-divider:var(--lay-linie);--theme-dialog:var(--lay-flaeche);
  --theme-radius:18px;--theme-radius-sm:12px;--theme-pill:999px;--theme-track:var(--lay-erhoben);--theme-knob:#ffffff;--theme-knob-on:#ffffff;--theme-glow:none;
  --theme-page-bg:var(--lay-seite,var(--lay-bg));
  --premium:var(--theme-accent-text);--premium-soft:var(--theme-accent-soft);--premium-line:var(--theme-accent-line);--premium-glow:none;
  --d-accent2:var(--violet);--d-topbar-bg:var(--lay-kopf-bg,var(--lay-bg));--d-nav-bg:var(--lay-nav-bg);--d-card-bg:var(--lay-flaeche);--d-shadow:var(--lay-schatten,none);
  --d-btn-bg:var(--accent);--d-btn-ink:var(--theme-accent-ink);--d-btn-shadow:none;
  --d-bubble-bg:var(--lay-blase);--d-bubble-solid:var(--lay-blase);--d-bubble-ink:var(--lay-text);--d-bubble-user-bg:var(--lay-blase-user);--d-bubble-user-solid:var(--lay-blase-user);--d-bubble-user-ink:var(--lay-blase-user-ink,var(--lay-text));--d-bubble-radius:16px;
  --d-stage-border:0;--d-stage-radius:0;--d-stage-ring:none;--d-badge-bg:var(--theme-accent-soft);--d-badge-ink:var(--lay-akzent-text-stark);--d-progress:var(--accent);--d-focus:var(--theme-accent-text);
  --d-border-w:1px;--d-nav-radius:0;--d-nav-inset:0px;--d-nav-flush:1;--d-eyebrow-case:uppercase;--d-eyebrow-track:.16em;
  --lay-schrift:Inter,"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --lay-nav-strich:48px;--lay-pille-h:38px;
}
html[data-layout][data-layout-schema="hell"]:root{color-scheme:light;--theme-danger:#a3281c;--theme-ok:#2f7a4f;--theme-backdrop:rgba(20,24,30,.42);--lay-feld:#ffffff;--lay-schatten:0 1px 2px rgba(20,24,30,.06),0 6px 18px rgba(20,24,30,.06)}
html[data-layout][data-layout-schema="dunkel"]:root{color-scheme:dark;--theme-danger:#ff8a7a;--theme-ok:#5fd39a;--theme-backdrop:rgba(0,0,0,.66)}

/* ---------- 2) Grundgerüst ----------------------------------------------- */
html:not([data-layout]) .lay-baustein{display:none!important}
html[data-layout]:root body{background:var(--theme-page-bg);font-family:var(--lay-schrift)}
html[data-layout]:root #app{padding-bottom:0;background:var(--theme-page-bg)}
html[data-layout]:root #app:has(>#nav:not(.hidden))>.topbar,html[data-layout]:root #app>#nav{display:none!important}
html[data-layout]:root #app:has(>#nav.hidden)>#layoutKopf,html[data-layout]:root #app:has(>#nav.hidden)>#layoutNav{display:none}
html[data-layout]:root .lay-icon{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html[data-layout]:root .lay-baustein[hidden],html[data-layout]:root #layoutKopf [hidden]{display:none!important}

/* Kopf */
html[data-layout]:root #layoutKopf{position:relative;z-index:20;display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:10px;min-height:60px;padding:10px 12px 10px 18px;background:var(--lay-kopf-bg,transparent);color:var(--text)}
html[data-layout]:root #layoutKopf .lay-marke{display:flex;flex:0 0 auto;align-items:center;gap:10px;min-width:0;min-height:40px;color:var(--lay-marke,var(--text));text-decoration:none}
html[data-layout]:root #layoutKopf .lay-marke-zeichen{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--lay-marke-zeichen,var(--accent))}
html[data-layout]:root #layoutKopf .lay-marke-svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
html[data-layout]:root #layoutKopf .lay-marke-ai{display:none}
html[data-layout]:root #layoutKopf .lay-marke-woerter{display:flex;flex-direction:column;min-width:0}
html[data-layout]:root #layoutKopf .lay-marke-text{font-size:20px;font-weight:600;line-height:1.1;letter-spacing:.24em}
html[data-layout]:root #layoutKopf .lay-marke-zeile{font-size:12px;line-height:1.3;color:var(--muted)}
html[data-layout]:root #layoutKopf .lay-marke-zeile:empty{display:none}
html[data-layout]:root #layoutKopf .lay-kopf-aktionen{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:0 1 auto;min-width:0}
html[data-layout]:root #layoutKopf .lay-pille{display:inline-flex;flex:0 0 auto;align-items:center;gap:9px;min-height:max(40px,var(--lay-pille-h));padding:0 14px;border:1px solid var(--lay-pille-linie,var(--line));border-radius:999px;background:var(--lay-pille-bg,var(--surface));color:var(--lay-pille-text,var(--text));font:inherit;font-size:14px;white-space:nowrap;cursor:pointer}
html[data-layout]:root #layoutKopf .lay-pille .lay-icon{width:20px;height:20px}
html[data-layout]:root #layoutKopf .lay-avatar-pille{flex:0 1 auto;min-width:0;max-width:132px;gap:7px;padding:3px 9px 3px 3px;font-weight:600}
html[data-layout]:root #layoutKopf .lay-pille-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
html[data-layout]:root #layoutKopf .lay-avatar-bild{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:center 22%;background:var(--lay-erhoben)}
html[data-layout]:root #layoutKopf .lay-chevron{width:16px;height:16px}
html[data-layout]:root #layoutKopf .lay-rund{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;padding:0;border:1px solid var(--lay-pille-linie,var(--line));border-radius:50%;background:var(--lay-pille-bg,var(--surface));color:var(--text);overflow:hidden;cursor:pointer}
html[data-layout]:root #layoutKopf .lay-rund[data-art="avatar"]{border:0;padding:0}
html[data-layout]:root #layoutKopf .lay-rund .lay-icon{width:22px;height:22px}
html[data-layout]:root .lay-kreis{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 26%;background:var(--lay-erhoben)}
html[data-layout]:root .lay-ohne-bild{visibility:hidden}

/* Navigation (eine Leiste, ersetzt #nav nur optisch; dieselben Seiten) */
html[data-layout]:root #layoutNav{position:relative;z-index:15;display:flex;flex-shrink:0;align-items:stretch;justify-content:space-around;gap:4px;padding:8px 8px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--lay-nav-linie,var(--line));background:var(--lay-nav-bg)}
html[data-layout]:root #layoutNav .lay-nav-ziel{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:62px;padding:4px 2px 10px;border:0;background:none;color:var(--lay-nav-text,var(--muted));font:inherit;font-size:12.5px;line-height:1.2;cursor:pointer}
html[data-layout]:root #layoutNav .lay-nav-ziel .lay-icon{width:26px;height:26px}
html[data-layout]:root #layoutNav .lay-nav-text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-layout]:root #layoutNav .lay-nav-ziel.active{color:var(--lay-nav-aktiv,var(--theme-accent-text));font-weight:600}
html[data-layout]:root #layoutNav .lay-nav-ziel.active::after{content:"";position:absolute;left:50%;bottom:0;width:var(--lay-nav-strich);height:3px;border-radius:2px;background:currentColor;transform:translateX(-50%)}
html[data-layout]:root #layoutNav .lay-nav-ziel:focus-visible{outline:2px solid var(--d-focus);outline-offset:-2px;border-radius:12px}
html[data-layout]:root body.conversation-keyboard #layoutNav{display:none}

/* Seiten: Hauptfläche ohne festen Navigationsabstand (die Leiste steht im Fluss) */
html[data-layout]:root #app>main{padding-bottom:0}
html[data-layout]:root #app>main>.page:not(#conversation){padding-bottom:24px}

/* Gesprächsseite als Spalte: Bühne – Panel – Verlauf (scrollt) – Kontext – Composer */
/* Claude 04.10.2026 (Etappe 66, B-079): Sicherheitsnetz – reicht die Höhe trotz schrumpfendem Panel nicht (z. B. Tour-Angebot,
   Arbeitswelt, ausgeklappte Bühne auf 360×740), lässt sich die Spalte scrollen, statt Eingabefeld und Knöpfe abzuschneiden. */
html[data-layout]:root #app #conversation:not(.hidden){display:flex;flex-direction:column;height:100%;min-height:0;padding:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
html[data-layout]:root #app #conversation .conversation-interaction,html[data-layout]:root #app #conversation .conversation-history{display:contents}
html[data-layout]:root #app #conversation .avatar-heading,html[data-layout]:root #app #conversation .conversation-heading,html[data-layout]:root #app #conversation #schnellziele,html[data-layout]:root #app #conversation .stage-shade{display:none}
html[data-layout]:root #app #conversation>*,html[data-layout]:root #app #conversation .conversation-interaction>*,html[data-layout]:root #app #conversation .conversation-history>*{flex-shrink:0}
html[data-layout]:root #app #conversation #layoutBuehneAuf{order:1}
html[data-layout]:root #app #conversation #stage{order:2}
html[data-layout]:root #app #conversation .stage-caption{order:3}
html[data-layout]:root #app #conversation #layoutIdentitaet{order:4}
html[data-layout]:root #app #conversation #layoutUmschalter{order:5}
html[data-layout]:root #app #conversation #resultStage{order:6}
html[data-layout]:root #app #conversation #layoutPanel{order:7}
html[data-layout]:root #app #conversation #messages{order:10}
html[data-layout]:root #app #conversation #suggestions{order:11}
html[data-layout]:root #app #conversation #layoutKontext{order:12}
html[data-layout]:root #app #conversation :is(#attachments,#internalNotice,#meetingInviteNotice,#resultReference,#parallelStatus,#voiceRecovery,#inputQueuePanel){order:13;margin-left:16px;margin-right:16px}
html[data-layout]:root #app #conversation #faehigkeitsVorschlaege{order:14;margin:0 16px}
html[data-layout]:root #app #conversation #composer{order:15}
html[data-layout]:root #app #conversation .scroll-jump-buttons{order:16}

/* Verlauf */
html[data-layout]:root #app #conversation #messages{flex:1 1 0;min-height:72px;max-height:none;margin:0;padding:22px 16px 14px;gap:18px;overflow-y:auto;background:none;border:0;scrollbar-width:none}
html[data-layout]:root #app #conversation #messages::-webkit-scrollbar{display:none}
html[data-layout]:root #app #conversation .message{position:relative;max-width:min(80%,320px);padding:12px 16px;border:1px solid var(--lay-blase-linie,transparent);border-radius:16px;background:var(--lay-blase);color:var(--lay-text);box-shadow:var(--lay-blase-schatten,none)}
html[data-layout]:root #app #conversation .message.user{background:var(--lay-blase-user);color:var(--lay-blase-user-ink,var(--lay-text));border-color:var(--lay-blase-user-linie,transparent)}
html[data-layout]:root #app #conversation .message p{font-size:15.5px;line-height:1.45}
html[data-layout]:root #app #conversation .message-head{display:none}
html[data-layout]:root #app #conversation .message .message-foot{display:none}
html[data-layout]:root #app #conversation .message.lay-fuss-offen .message-foot{display:flex}
/* Claude 04.10.2026 (Etappe 66, A-083): Tippfläche ≥ 40 px */
html[data-layout]:root #app #conversation .message .message-foot button{min-height:40px;color:inherit;background:color-mix(in srgb,currentColor 10%,transparent)}
/* Avatarbild neben den Antworten (dasselbe aktive Profilbild, kein zweiter Avatarstatus) */
html[data-layout]:root #app #conversation .message:not(.user){margin-left:52px}
html[data-layout]:root #app #conversation .message:not(.user)::before{content:"";position:absolute;left:-52px;top:50%;width:40px;height:40px;border-radius:50%;background:var(--layout-avatar-foto,none) center 22%/cover no-repeat,var(--lay-erhoben);transform:translateY(-50%)}
html[data-layout]:root #app #conversation #suggestions{display:flex;flex-wrap:wrap;gap:8px;margin:0 16px 8px}
html[data-layout]:root #app #conversation #suggestions.hidden{display:none}

/* Composer in einer Zeile: Anhang – Text – Mikrofon – Senden. Antwortlänge und Gehirn live stehen im Blatt (Mehr). */
html[data-layout]:root #app #conversation #composer{display:flex;align-items:center;gap:8px;min-height:56px;margin:6px 12px 10px;padding:6px;border:1px solid var(--lay-composer-linie,var(--line));border-radius:28px;background:var(--lay-composer-bg,var(--lay-feld));box-shadow:var(--lay-composer-schatten,none)}
html[data-layout]:root #app #conversation #composer .composer-actions,html[data-layout]:root #app #conversation #composer .composer-actions>div:first-child{display:contents}
html[data-layout]:root #app #conversation #composer textarea{order:2;flex:1 1 auto;min-width:0;min-height:40px;max-height:120px;margin:0;padding:9px 4px;border:0;background:none;color:var(--text);font-size:15.5px;line-height:1.4;resize:none;box-shadow:none}
html[data-layout]:root #app #conversation #composer textarea::placeholder{color:var(--lay-platzhalter,var(--muted))}
html[data-layout]:root #app #conversation #composer textarea:placeholder-shown{height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Anhang als Büroklammer (wie in allen Entwürfen); der Knopf und seine Funktion bleiben dieselben */
html[data-layout]:root #app #conversation #composer #attach svg{display:none}
html[data-layout]:root #app #conversation #composer #attach::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m20 11.5-7.8 7.8a5 5 0 0 1-7-7l8.3-8.3a3.4 3.4 0 0 1 4.7 4.8L9.9 17a1.7 1.7 0 0 1-2.4-2.4l7.4-7.4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m20 11.5-7.8 7.8a5 5 0 0 1-7-7l8.3-8.3a3.4 3.4 0 0 1 4.7 4.8L9.9 17a1.7 1.7 0 0 1-2.4-2.4l7.4-7.4'/%3E%3C/svg%3E") center/contain no-repeat}
html[data-layout]:root #app #conversation #composer #attach{order:1}
html[data-layout]:root #app #conversation #composer #mic,html[data-layout]:root #app #conversation #composer #callButton:not(.hidden){order:3}
html[data-layout]:root #app #conversation #composer .primary-slot{order:4;display:flex;flex:0 0 auto}
html[data-layout]:root #app #conversation #composer :is(#brainLiveQuick,#inputStatus,#responseStyle,.response-style-menu,#responseStyleHint){display:none}
html[data-layout]:root #app #conversation #composer:has(#mic.recording) textarea{display:none}
html[data-layout]:root #app #conversation #composer:has(#mic.recording) #inputStatus{display:block;order:2;flex:1 1 auto;color:var(--theme-accent-text);font-size:14px}
html[data-layout]:root #app #conversation #composer .icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--lay-knopf-linie,transparent);border-radius:50%;background:var(--lay-knopf-bg,transparent);color:var(--lay-knopf-text,var(--text))}
html[data-layout]:root #app #conversation #composer .icon-button svg{width:22px;height:22px}
html[data-layout]:root #app #conversation #composer .icon-button.hidden{display:none}
html[data-layout]:root #app #conversation #composer :is(.send,.stop){display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;border:0;border-radius:50%;background:var(--lay-senden-bg,var(--accent));color:var(--lay-senden-text,var(--theme-accent-ink));font-size:0;box-shadow:none}
html[data-layout]:root #app #conversation #composer .send.hidden,html[data-layout]:root #app #conversation #composer .stop.hidden{display:none}
html[data-layout]:root #app #conversation #composer .send::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 12 19.5 4.5 15.5 20l-3.5-6.5z M12 13.5l7.5-9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 12 19.5 4.5 15.5 20l-3.5-6.5z M12 13.5l7.5-9'/%3E%3C/svg%3E") center/contain no-repeat}
html[data-layout]:root #app #conversation #composer .stop{font-size:16px;background:var(--theme-danger);color:#ffffff}
html[data-layout]:root #app #conversation #composer .send[data-queue]:not([data-queue=""])::after{position:absolute}
html[data-layout]:root body.conversation-keyboard #app #conversation #messages{min-height:56px}

/* ---------- 3) Bühnenmodi ------------------------------------------------ */
html[data-layout]:root #app #conversation #stage{position:relative;flex:0 0 auto;width:auto;min-height:0;margin:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;background:var(--lay-erhoben)}
html[data-layout]:root #app #conversation #stage :is(.portrait,.avatar-video){object-fit:cover;object-position:center 26%}
html[data-layout]:root #app #conversation .stage-caption{display:none}
html[data-layout]:root #app #conversation:has(#stage.is-listening,#stage.is-speaking) .stage-caption{display:flex;gap:10px;align-items:center;margin:8px 16px 0;padding:0}
html[data-layout]:root #app #conversation .stage-caption p{margin:0;font-size:14px}
html[data-layout]:root #app #conversation .stage-caption span{font-size:12px;color:var(--muted)}
html[data-layout]:where(.lay-buehne-gross):root #app #conversation #stage{height:clamp(300px,50svh,520px);margin:4px 12px 0;border-radius:24px}
html[data-layout]:where(.lay-buehne-band):root #app #conversation #stage{height:clamp(170px,30svh,255px)}
html[data-layout]:where(.lay-buehne-held):root #app #conversation #stage{height:clamp(170px,30svh,238px)}
html[data-layout]:where(.lay-buehne-klappbar):root #app #conversation #stage{height:clamp(150px,22svh,185px);margin:2px 4px 0;border-radius:18px}
html[data-layout]:where(.lay-buehne-klein):root #app #conversation #stage{width:64px;height:64px;margin:12px 0 0 16px;border-radius:50%}
html[data-layout]:where(.lay-buehne-klein):root #app #conversation #stage :is(.portrait,.avatar-video){object-position:center 22%}
html[data-layout]:where(.lay-buehne-klein):root #app #conversation #stage :is(#thoughtCloudSlot,#autonomyChip){display:none}
html[data-layout]:where(.lay-buehne-aus):root #app #conversation #stage{display:none}
html[data-layout]:where(.lay-buehne-zu):root #app #conversation #stage{display:none}
html[data-layout]:root body.conversation-keyboard #app #conversation #stage{display:none}
html[data-layout]:root #app #conversation #stage #thoughtCloudSlot{transform:scale(.78);transform-origin:top right}

/* Bühnen-Zusätze (nur in den Vorlagen sichtbar, die sie nutzen) */
html[data-layout]:root #stage .lay-chip,html[data-layout]:root #stage .lay-klapp,html[data-layout]:root #stage .lay-held-text,html[data-layout]:root #app #conversation #layoutBuehneAuf{display:none}
html[data-layout]:where(.lay-buehne-klappbar):root #stage .lay-chip{position:absolute;z-index:3;left:12px;top:12px;display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 12px;border-radius:999px;background:rgba(28,32,34,.72);color:#ffffff;font-size:13px}
html[data-layout]:root .lay-punkt{display:inline-block;width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--lay-online,#5fd38d)}
html[data-layout]:where(.lay-buehne-klappbar):root #stage .lay-klapp{position:absolute;z-index:3;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(16,30,34,.78);color:#ffffff;font:inherit;font-size:13.5px;cursor:pointer}
html[data-layout]:where(.lay-buehne-klappbar):root #stage .lay-klapp .lay-icon{width:18px;height:18px}
html[data-layout]:where(.lay-buehne-klappbar.lay-buehne-zu):root #app #conversation #layoutBuehneAuf{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:40px;margin:6px 12px 0;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;cursor:pointer}

/* ---------- 4) Bausteine ------------------------------------------------- */
html[data-layout]:root #app #conversation #layoutIdentitaet,html[data-layout]:root #app #conversation #layoutUmschalter{display:none}
html[data-layout]:where(.lay-buehne-klein):root #app #conversation #layoutIdentitaet{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:64px;margin:-64px 16px 0 96px;min-width:0}
html[data-layout]:root #layoutIdentitaet .lay-identitaet-name{font-size:20px;font-weight:500;line-height:1.2;color:var(--text)}
html[data-layout]:root #layoutIdentitaet .lay-identitaet-status{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;color:var(--lay-status-text,var(--muted))}
html[data-layout]:root #layoutIdentitaet .lay-identitaet-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Panel: leer = unsichtbar */
html[data-layout]:root #app #conversation #layoutPanel{margin:0;padding:0}
html[data-layout]:root #app #conversation #layoutPanel:empty,html[data-layout]:root #app #conversation #layoutPanel.lay-panel-zu{display:none}
html[data-layout]:root .lay-augenbraue{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--theme-accent-text)}
html[data-layout]:root .lay-zurueck{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--lay-zurueck,var(--theme-accent-text));font:inherit;font-size:15px;font-weight:600;cursor:pointer}
html[data-layout]:root .lay-zurueck .lay-icon{width:22px;height:22px}
html[data-layout]:root .lay-chip-knopf{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;cursor:pointer}

/* Ablagefläche (Datei hinzufügen über die vorhandene Auswahl) */
html[data-layout]:root .lay-ablage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;padding:18px 16px;border:1.5px dashed var(--lay-ablage-linie,var(--line));border-radius:16px;background:var(--lay-ablage-bg,transparent);color:var(--text);text-align:center;cursor:pointer}
html[data-layout]:root .lay-ablage:focus-visible{outline:2px solid var(--d-focus);outline-offset:2px}
html[data-layout]:root .lay-ablage.lay-ablage-ueber{border-color:var(--accent);background:var(--theme-accent-soft)}
html[data-layout]:root .lay-ablage-symbol{color:var(--lay-ablage-symbol,var(--muted))}
html[data-layout]:root .lay-ablage-symbol .lay-icon{width:38px;height:38px;stroke-width:1.4}
html[data-layout]:root .lay-ablage-titel{font-size:14px;font-weight:500}
html[data-layout]:root .lay-ablage-unter{font-size:12.5px;color:var(--muted)}
html[data-layout]:root .lay-ablage-knopf{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:8px;padding:0 22px;border-radius:999px;background:var(--accent);color:var(--theme-accent-ink);font-size:14.5px;font-weight:600}
html[data-layout]:root .lay-ablage-knopf .lay-icon{width:20px;height:20px}
html[data-layout]:root .lay-ablage-formate{margin-top:6px;font-size:11.5px;color:var(--muted)}

/* Kontextkarte */
html[data-layout]:root #app #conversation #layoutKontext{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0 16px 6px}
html[data-layout]:root #app #conversation #layoutKontext:empty{display:none}
html[data-layout]:root #layoutKontext .lay-ablage{margin:0 18px 0 58px}
html[data-layout]:root .lay-rueckfrage{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:18px;background:var(--lay-rueckfrage-bg,var(--theme-accent-soft))}
html[data-layout]:root .lay-rueckfrage .lay-kreis{width:48px;height:48px;flex:0 0 48px}
html[data-layout]:root .lay-rueckfrage-woerter{display:grid;gap:4px;min-width:0;justify-items:start}
html[data-layout]:root .lay-rueckfrage-name{font-size:13px;color:var(--muted)}
html[data-layout]:root .lay-rueckfrage-text{margin:0;font-size:16.5px;line-height:1.35;color:var(--text)}
html[data-layout]:root .lay-rueckfrage-knopf{min-height:40px;margin-top:8px;padding:0 24px;border:0;border-radius:999px;background:var(--accent);color:var(--theme-accent-ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
html[data-layout]:root .lay-auftrag{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;text-align:left}
html[data-layout]:root .lay-auftrag-symbol{width:20px;height:20px;color:var(--muted)}
html[data-layout]:root .lay-auftrag-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-layout]:root .lay-auftrag-link{display:inline-flex;gap:6px;flex:0 0 auto;min-height:40px;align-items:center;padding:0 2px;border:0;background:none;color:var(--theme-accent-text);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}

/* Held / Heute (M05) */
/* Claude 22.10.2026 (Werkstatt nach-oberflaeche-rest): die Rasterspalte wuchs auf die Mindestbreite der einzeiligen Erinnerungszeilen
   (350 px bei 360 px Breite, Klicktest T in M05) – Spalte an die Karte binden, Zeilen duerfen schmaler werden (Text mit Ellipse). */
html[data-layout]:root .lay-heute{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:20px 20px 18px}
html[data-layout]:root .lay-heute-titel{margin:4px 0 0;font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--text)}
html[data-layout]:root .lay-heute-unter{max-width:270px;margin:0;font-size:15px;line-height:1.4;color:var(--muted)}
html[data-layout]:root .lay-heute-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:10px 0 2px;padding:0;list-style:none}
html[data-layout]:root .lay-heute-liste>li{min-width:0}
html[data-layout]:root .lay-heute-zeile{width:100%;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;text-align:left;cursor:pointer}
/* Claude 11.10.2026: „Was ich heute getan habe“ im Heute-Panel (layouts.mjs heuteGedaechtnis) – Uhrzeit links, Text einzeilig. */
html[data-layout]:root .lay-heute-gedaechtnis{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
html[data-layout]:root .lay-heute-gedaechtnis[hidden]{display:none}
html[data-layout]:root .lay-heute-erinnerung{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 12px;line-height:1.25}
html[data-layout]:root .lay-heute-zeit{flex:0 0 auto;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
html[data-layout]:root .lay-heute-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-layout]:root .lay-heute-mehr{color:var(--muted);font-size:13px;border-style:dashed}

/* Finden (Sofortfinder, M04): zwei Treffer über einem grossen Suchfeld; Enter = Ziel oder Frage an den Avatar */
html[data-layout]:root .lay-finden{display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 16px 10px}
html[data-layout]:root .lay-finden-kreis{display:block;width:140px;height:140px;padding:0;border-radius:50%;background:var(--lay-kreis-bg,var(--theme-accent-soft));overflow:hidden}
html[data-layout]:root .lay-finden-titel{margin:20px 0 6px;font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--lay-titel,var(--text))}
html[data-layout]:root .lay-finden-unter{max-width:300px;margin:0 0 22px;font-size:15.5px;line-height:1.45;color:var(--muted);text-align:center}
html[data-layout]:root .lay-finden-liste{display:grid;gap:11px;width:100%}
html[data-layout]:root .lay-finden-zeile{display:grid;grid-template-columns:48px 1fr 22px;align-items:center;gap:14px;width:100%;min-height:84px;padding:12px 14px 12px 16px;border:1px solid var(--lay-zeile-linie,var(--line));border-radius:16px;background:var(--lay-zeile-bg,var(--surface));color:var(--text);font:inherit;text-align:left;cursor:pointer}
html[data-layout]:root .lay-finden-symbol{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--lay-symbol-bg,var(--theme-accent-soft));color:var(--theme-accent-text)}
html[data-layout]:root .lay-finden-symbol .lay-icon{width:24px;height:24px}
html[data-layout]:root .lay-finden-woerter{display:grid;gap:3px;min-width:0}
html[data-layout]:root .lay-finden-woerter strong{font-size:15.5px;font-weight:700;line-height:1.25}
html[data-layout]:root .lay-finden-woerter small{font-size:13px;line-height:1.35;color:var(--muted)}
html[data-layout]:root .lay-finden-pfeil{width:22px;height:22px;color:var(--muted)}
html[data-layout]:root .lay-finden-leer{margin:0;padding:10px 4px;font-size:13.5px;color:var(--muted);text-align:center}
html[data-layout]:root .lay-finden-form{display:flex;align-items:center;gap:10px;width:100%;min-height:60px;margin-top:22px;padding:6px 7px 6px 18px;border:1.5px solid var(--accent);border-radius:30px;background:var(--lay-feld)}
html[data-layout]:root .lay-finden-lupe{width:22px;height:22px;color:var(--accent)}
html[data-layout]:root .lay-finden-feld{flex:1 1 auto;min-width:0;min-height:44px;border:0;outline:none;background:none;color:var(--text);font:inherit;font-size:16px}
html[data-layout]:root .lay-finden-feld::-webkit-search-cancel-button{display:none}
html[data-layout]:root .lay-finden-los{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;min-width:46px;padding:0;border:0;border-radius:50%;background:var(--lay-senden-bg,var(--accent));color:var(--theme-accent-ink);cursor:pointer}
html[data-layout][data-layout-modus="finden"]:root #app #conversation :is(#stage,#layoutIdentitaet,#messages,#suggestions,#layoutKontext,#composer,#faehigkeitsVorschlaege,.stage-caption){display:none}
html[data-layout][data-layout-modus="finden"]:root #app #conversation #layoutPanel{flex:1 1 auto;overflow-y:auto}

/* Arbeit (M03/M08): aktueller Auftrag, Ablage, drei Wege, zurück zum Gespräch */
html[data-layout]:root .lay-arbeit{display:grid;gap:14px;padding:12px 16px 4px}
html[data-layout]:root .lay-arbeit-kopf{display:flex;gap:16px;align-items:flex-start}
html[data-layout]:root .lay-arbeit-symbol{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 48px;border:1px solid var(--line);border-radius:12px;background:var(--lay-erhoben);color:var(--theme-accent-text)}
html[data-layout]:root .lay-arbeit-woerter{display:grid;gap:3px;min-width:0}
html[data-layout]:root .lay-arbeit-titel{margin:2px 0 0;font-size:21px;font-weight:700;line-height:1.2;color:var(--text);overflow-wrap:anywhere}
html[data-layout]:root .lay-arbeit-unter{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
html[data-layout]:root .lay-arbeit-wege{display:flex;flex-wrap:wrap;gap:8px}
html[data-layout]:root .lay-arbeit .lay-ablage{min-height:190px}
html[data-layout]:root .lay-arbeit>.lay-zurueck{justify-self:center;padding-top:8px;border-top:1px solid var(--line);width:100%;justify-content:center;border-radius:0}
html[data-layout][data-layout-modus="arbeit"]:root #app #conversation .stage-caption{display:none}
html[data-layout][data-layout-modus="arbeit"]:root #app #conversation #layoutPanel{flex:0 1 auto;min-height:0;overflow-y:auto}
html[data-layout][data-layout-modus="arbeit"]:root #app #conversation #messages{flex:1 1 0;min-height:110px}
html[data-layout][data-layout-modus="arbeit"]:not(.lay-buehne-klein):root #app #conversation #stage{display:none}
html[data-layout][data-layout-modus="heute"]:root #app #conversation #stage{display:none}

/* Ergebnis (M06): Dokumentvorschau mit Rückweg; nur mit vorhandenem Ergebnis */
html[data-layout]:root .lay-ergebnis{display:grid;gap:8px;padding:2px 14px 4px}
html[data-layout]:root .lay-ergebnis.lay-zu{display:none}
html[data-layout]:root .lay-ergebnis>.lay-zurueck{justify-self:start;padding-left:6px}
html[data-layout]:root .lay-ergebnis-zeile{display:flex;align-items:center;gap:14px;padding:4px 8px}
html[data-layout]:root .lay-ergebnis-symbol{color:#d63a2f}
html[data-layout]:root .lay-ergebnis-symbol .lay-icon{width:32px;height:38px;stroke-width:1.4}
html[data-layout]:root .lay-ergebnis-woerter{display:grid;gap:2px;min-width:0}
html[data-layout]:root .lay-ergebnis-woerter strong{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-layout]:root .lay-ergebnis-woerter small{font-size:12.5px;color:var(--muted)}
html[data-layout]:root .lay-ergebnis-vorschau{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:clamp(150px,34svh,330px);padding:10px;border:0;border-radius:4px;background:var(--lay-vorschau-bg,var(--lay-erhoben));overflow:hidden;cursor:zoom-in}
html[data-layout]:root .lay-ergebnis-bild{position:relative;z-index:1;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 2px 10px rgba(0,0,0,.12);background:#ffffff}
html[data-layout]:root .lay-ergebnis-platz{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:13px}
html[data-layout]:root .lay-ergebnis-platz .lay-icon{width:42px;height:42px;stroke-width:1.2}
html[data-layout]:root .lay-ergebnis-leiste{display:flex;gap:8px;padding:6px;border-radius:12px;background:var(--surface)}
html[data-layout]:root .lay-leiste-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1 1 0;min-height:40px;border:0;border-radius:10px;background:none;color:var(--text);font:inherit;font-size:14px;text-decoration:none;cursor:pointer}
html[data-layout]:root .lay-leiste-knopf .lay-icon{width:20px;height:20px}
html[data-layout]:root .lay-leiste-knopf+.lay-leiste-knopf{border-left:1px solid var(--line);border-radius:0}

/* Umschalter Gespräch / Arbeit (M08) */
html[data-layout]:root #layoutUmschalter .lay-umschalter-gruppe{display:grid;grid-template-columns:1fr 1fr;flex:1 1 auto;gap:0;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
html[data-layout]:root #layoutUmschalter .lay-um{min-height:40px;padding:0 10px;border:0;border-radius:999px;background:none;color:var(--text);font:inherit;font-size:15px;cursor:pointer}
html[data-layout]:root #layoutUmschalter .lay-um[aria-pressed="true"]{background:var(--lay-um-aktiv,var(--accent));color:var(--theme-accent-ink);font-weight:600}
html[data-layout]:root #layoutUmschalter .lay-um-mehr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:56px;min-width:56px;height:54px;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);font:inherit;font-size:12px;cursor:pointer}

/* Blatt: gemeinsamer Menübaum */
html[data-layout]:root dialog.lay-blatt{width:min(560px,100vw);max-width:100vw;max-height:88dvh;margin:auto auto 0;padding:0;border:0;border-radius:22px 22px 0 0;background:var(--theme-dialog);color:var(--text);box-shadow:0 -10px 40px rgba(0,0,0,.25)}
html[data-layout]:root dialog.lay-blatt[open]{display:flex;flex-direction:column}
html[data-layout]:root dialog.lay-blatt::backdrop{background:var(--theme-backdrop)}
html[data-layout]:root .lay-blatt-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 6px 20px}
html[data-layout]:root .lay-blatt-titel{margin:0;font-size:19px;font-weight:700}
html[data-layout]:root .lay-blatt-zu{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer}
html[data-layout]:root .lay-blatt-suche{display:flex;align-items:center;gap:10px;min-height:46px;margin:6px 16px 4px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--lay-feld);color:var(--lay-gedaempft,var(--muted));font:inherit;font-size:15px;text-align:left;cursor:pointer}
html[data-layout]:root .lay-blatt-inhalt{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px calc(16px + env(safe-area-inset-bottom))}
html[data-layout]:root .lay-blatt-sektion{padding:12px 0 6px;border-bottom:1px solid var(--line)}
html[data-layout]:root .lay-blatt-sektion:last-child{border-bottom:0}
html[data-layout]:root .lay-blatt-haupt{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--theme-accent-text)}
html[data-layout]:root .lay-blatt-gruppe{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:start;padding:6px 0}
html[data-layout]:root .lay-blatt-unter{margin:10px 0 0;font-size:13px;font-weight:600;color:var(--muted)}
html[data-layout]:root .lay-blatt-ziele{display:flex;flex-wrap:wrap;gap:6px}
html[data-layout]:root .lay-blatt-ziel{min-height:40px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;cursor:pointer}
html[data-layout]:root .lay-blatt-ziel:hover,html[data-layout]:root .lay-blatt-ziel:focus-visible{border-color:var(--accent);outline:none}
html[data-layout]:root .lay-blatt-segment{display:inline-grid;grid-template-columns:repeat(3,auto);gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
html[data-layout]:root .lay-blatt-option{min-height:40px;padding:0 10px;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
html[data-layout]:root .lay-blatt-option[aria-checked="true"]{background:var(--accent);color:var(--theme-accent-ink);font-weight:600}
@media (prefers-reduced-motion:reduce){html[data-layout]:root dialog.lay-blatt{transition:none}}

/* Senden-Symbol „Pfeil nach oben“ (M07, M08); Folge-Vorlagen ergänzen ihre ID in dieser :is()-Liste oder in ihrer Datei. */
html[data-layout]:is([data-layout="m07"],[data-layout="m08"]):root #app #conversation #composer .send::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M12 19V5m-6 6 6-6 6 6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M12 19V5m-6 6 6-6 6 6'/%3E%3C/svg%3E")}

/* Claude 04.10.2026 (Etappe 66, B-079/A-083): Ist die Spalte zu niedrig (360×740), schrumpfen Panel und
   Arbeitswelt und scrollen, statt Eingabefeld und Knöpfe unter die Navigation zu schieben. Der Platzhalter verschwindet, sobald das
   Ergebnisbild da ist (fällt das Bild aus, wird es entfernt und der Platzhalter erscheint wieder). Auf dunklen
   Vorlagen ist der Stopp-Grund hell (--theme-danger #ff8a7a) – das Symbol wird dunkel statt weiss (Kontrast ≥ 3:1). */
html[data-layout]:root #app #conversation #layoutPanel{flex-shrink:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
html[data-layout]:root .lay-ergebnis-vorschau:has(>.lay-ergebnis-bild) .lay-ergebnis-platz{visibility:hidden}
html[data-layout]:root #app #conversation #avatarDesktop{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
html[data-layout][data-layout-schema="dunkel"]:root #app #conversation #composer .stop{color:#2b0a05}
/* Claude 04.10.2026 (Etappe 66, A-083): Bibliothek, Zähler und Abzeichen in den Vorlagen lesbar – Akzentschrift auf der
   Akzent-Tönung erreichte nur 2.5–4.4:1. Die kräftige Akzentschrift mischt 70 % Akzentschrift mit der Textfarbe (≥ 6:1 auf der
   Tönung in allen 25 Vorlagen); der Zähler im gewählten Abschnitt steht auf dem Akzent in der lesbaren Akzent-Tinte. */
html[data-layout]:root{--lay-akzent-text-stark:color-mix(in srgb,var(--theme-accent-text) 70%,var(--lay-text))}
html[data-layout]:root #files .ability-tabs[data-library-segments][data-library-segments] button[aria-pressed="true"]{color:var(--lay-akzent-text-stark)}
html[data-layout]:root #files .ability-tabs[data-library-segments][data-library-segments] button[aria-pressed="true"] .segment-count{background:var(--accent);color:var(--theme-accent-ink)}
html[data-layout]:root #files .library-chip-add{color:var(--lay-akzent-text-stark)}

/* ---------- 5) M01 · Horizont Tasche -------------------------------------- */
/* Espresso/Kupfer: Band-Bühne unter dem Kopf, Gespräch mit Bildern links, Composer mit runden Knöpfen, vier Ziele. */
html[data-layout="m01"]:root{--lay-bg:#110b08;--lay-flaeche:#1d1712;--lay-feld:#120c09;--lay-erhoben:#2a211b;--lay-linie:#3a2f27;--lay-text:#f3ede6;--lay-gedaempft:#a99a8b;
  --lay-akzent:#f0a55a;--lay-akzent-ink:#1d1006;--lay-akzent-text:#f2ad6a;--lay-zweit:#c98a5a;
  --lay-blase:#271c14;--lay-blase-linie:#3b2b1f;--lay-blase-user:#1d1915;--lay-blase-user-linie:#2c2620;
  --lay-nav-bg:#120c09;--lay-nav-linie:#2a211b;--lay-nav-text:#d9cfc4;--lay-kopf-bg:#110b08;--lay-marke:#e8b27c;--lay-marke-zeichen:#e0a06a;
  --lay-pille-bg:#1d1712;--lay-pille-linie:#3a3029;--lay-pille-text:#cfc4b8;--lay-composer-bg:#120c09;--lay-composer-linie:#3a3029;
  --lay-knopf-bg:#1e1812;--lay-knopf-linie:#2f2620;--lay-knopf-text:#e2d8cc;--lay-senden-bg:linear-gradient(145deg,#b98a63,#9d7558);--lay-senden-text:#111111;--lay-platzhalter:#8f8379;--lay-nav-strich:56px}
html[data-layout="m01"]:root #layoutKopf .lay-marke-text{background:linear-gradient(90deg,#f3c38f,#d99a63);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:16px;font-weight:600;letter-spacing:.24em}
html[data-layout="m01"]:root #layoutKopf .lay-marke-svg{width:22px;height:22px}
html[data-layout="m01"]:root #layoutKopf .lay-marke{gap:8px}
html[data-layout="m01"]:root #layoutKopf .lay-pille.lay-suche{min-width:107px}
html[data-layout="m01"]:root #app #conversation #messages{padding-top:28px;gap:22px}
/* M01 zeigt beide Seiten links, jeweils mit Bild (Nutzer: Personensymbol) */
html[data-layout="m01"]:root #app #conversation .message.user{align-self:flex-start;margin-left:52px;border-radius:16px}
html[data-layout="m01"]:root #app #conversation .message.user::before{content:"";position:absolute;left:-52px;top:50%;width:38px;height:38px;border-radius:50%;transform:translateY(-50%);background:#2b241e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfc4b8' d='M12 12.2a4.1 4.1 0 1 0 0-8.2 4.1 4.1 0 0 0 0 8.2Zm-7 7.3c0-3 3.1-5.2 7-5.2s7 2.2 7 5.2v.5H5z'/%3E%3C/svg%3E") center/20px no-repeat}
html[data-layout="m01"]:root #app #conversation .message{width:calc(100% - 64px);max-width:none}
html[data-layout="m01"]:root #app #conversation .message p{font-size:16px}
html[data-layout="m01"]:root #app #conversation #composer{min-height:56px;margin:4px 12px 16px;padding:5px}
html[data-layout="m01"]:root #app #conversation #composer #mic{margin-left:auto}
html[data-layout="m01"]:root #layoutNav{padding-top:12px}

/* ---------- M02 · Papierfreund --------------------------------------------- */
/* Elfenbein/Waldgrün: Held-Bühne mit Begrüssung links und Portrait rechts, helle Schreibseite, Dateifläche bei
   einer Dateinachfrage, Composer weiss mit grünem Senden, vier Ziele mit gefülltem aktivem Symbol. */
html[data-layout="m02"]:root{--lay-bg:#fbf9f5;--lay-flaeche:#ffffff;--lay-erhoben:#efece4;--lay-linie:#e4e0d7;--lay-text:#1b2a1e;--lay-gedaempft:#55605a;
  --lay-akzent:#1e3f22;--lay-akzent-ink:#ffffff;--lay-akzent-text:#1e3f22;--lay-zweit:#6f8f76;
  --lay-blase:#ffffff;--lay-blase-linie:#ebe8e1;--lay-blase-user:#e2e9df;--lay-blase-user-ink:#1b2a1e;
  --lay-nav-bg:#fcf9f6;--lay-nav-linie:#ebe6dd;--lay-nav-text:#555758;--lay-kopf-bg:#fbf9f5;--lay-marke:#1e3f22;--lay-marke-zeichen:#1e3f22;
  --lay-pille-bg:#ffffff;--lay-pille-linie:#e3e0d8;--lay-pille-text:#555555;--lay-composer-bg:#ffffff;--lay-composer-linie:#e5e2db;--lay-composer-schatten:0 2px 10px rgba(30,40,30,.06);
  --lay-knopf-text:#2b2b2b;--lay-senden-bg:#1e3f22;--lay-senden-text:#ffffff;--lay-platzhalter:#666666;--lay-ablage-linie:#d4cfc4;--lay-ablage-bg:#f6f5f0;--lay-ablage-symbol:#8a8172;--lay-nav-strich:36px;
  --lay-schrift:"Source Sans 3","Segoe UI",Inter,system-ui,-apple-system,sans-serif}
html[data-layout="m02"]:root #layoutKopf{min-height:75px;padding:14px 14px 14px 18px}
html[data-layout="m02"]:root #layoutKopf .lay-marke-text{font-size:26px;font-weight:800;letter-spacing:.01em}
html[data-layout="m02"]:root #layoutKopf .lay-marke-zeile{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#4f5e51}
html[data-layout="m02"]:root #layoutKopf .lay-marke-svg{width:34px;height:34px;stroke-width:2.2}
html[data-layout="m02"]:root #layoutKopf .lay-pille.lay-suche{min-width:142px;min-height:40px}
html[data-layout="m02"]:root #app #conversation #stage{background:#f1eee8}
html[data-layout="m02"]:root #app #conversation #stage :is(.portrait,.avatar-video){left:auto;right:0;width:64%;object-position:center 24%}
html[data-layout="m02"]:root #app #conversation #stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#f6f3ee 0%,#f6f3ee 34%,rgba(246,243,238,.55) 46%,rgba(246,243,238,0) 62%)}
html[data-layout="m02"]:root #stage .lay-held-text{position:absolute;z-index:2;left:22px;top:50%;display:block;width:48%;transform:translateY(-46%)}
html[data-layout="m02"]:root #stage .lay-held-titel{margin:0 0 12px;font-size:23px;font-weight:700;line-height:1.2;color:#1e3f22}
html[data-layout="m02"]:root #stage .lay-held-unter{margin:0;font-size:15px;line-height:1.45;color:#5b5f5c}
html[data-layout="m02"]:root #app #conversation #stage #thoughtCloudSlot{display:none}
html[data-layout="m02"]:root #app #conversation #messages{padding-top:26px}
html[data-layout="m02"]:root #app #conversation .message.user{margin-right:44px;border-radius:22px}
html[data-layout="m02"]:root #app #conversation .message.user::after{content:"";position:absolute;right:-44px;top:50%;width:30px;height:30px;border-radius:50%;transform:translateY(-50%);background:#b9c7bb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 12.2a4.1 4.1 0 1 0 0-8.2 4.1 4.1 0 0 0 0 8.2Zm-7 7.3c0-3 3.1-5.2 7-5.2s7 2.2 7 5.2v.5H5z'/%3E%3C/svg%3E") center/18px no-repeat}
html[data-layout="m02"]:root #app #conversation .message:not(.user){margin-left:62px;border-radius:18px}
html[data-layout="m02"]:root #app #conversation .message:not(.user)::before{left:-62px;width:54px;height:54px}
html[data-layout="m02"]:root #layoutKontext .lay-ablage{min-height:136px;margin:0 64px 4px 66px;gap:4px}
html[data-layout="m02"]:root #layoutKontext .lay-ablage-titel{font-size:12.5px;font-weight:400;color:#4a4a4a}
html[data-layout="m02"]:root #layoutKontext .lay-ablage-unter{font-size:11.5px;color:#1e3f22}
html[data-layout="m02"]:root #layoutKontext .lay-ablage-symbol{color:#8a8172}
html[data-layout="m02"]:root #app #conversation #composer{margin:4px 12px 10px;gap:6px}
html[data-layout="m02"]:root #app #conversation #composer #mic{border-left:1px solid #e5e2db;border-radius:0 50% 50% 0}
html[data-layout="m02"]:root #layoutNav .lay-nav-ziel.active .lay-icon{fill:currentColor}

/* ---------- M03 · Gesprächskarte -------------------------------------------- */
/* Steingrau/Petrol: einklappbare Bühnenkarte mit „online“ und „Avatar einklappen“, dominanter Verlauf, drei Ziele. */
html[data-layout="m03"]:root{--lay-bg:#f0f3f3;--lay-flaeche:#ffffff;--lay-erhoben:#e3e7e9;--lay-linie:#dde1e4;--lay-text:#12181c;--lay-gedaempft:#545c66;
  --lay-akzent:#0b5563;--lay-akzent-ink:#ffffff;--lay-akzent-text:#0b5563;--lay-zweit:#3f8c97;
  --lay-blase:#ffffff;--lay-blase-schatten:0 1px 3px rgba(18,24,28,.08);--lay-blase-user:#1e606f;--lay-blase-user-ink:#ffffff;
  --lay-nav-bg:#f7f7f7;--lay-nav-linie:#e5e7e9;--lay-nav-text:#505763;--lay-kopf-bg:#f0f3f3;--lay-marke:#12181c;--lay-marke-zeichen:#16323a;
  --lay-pille-bg:#e6e9eb;--lay-pille-linie:transparent;--lay-pille-text:#4a5058;--lay-composer-bg:#ffffff;--lay-composer-linie:#dde1e4;--lay-composer-schatten:0 2px 8px rgba(18,24,28,.05);
  --lay-knopf-text:#2b3136;--lay-senden-bg:#0b4f5c;--lay-senden-text:#ffffff;--lay-platzhalter:#737a82;--lay-nav-strich:50px}
html[data-layout="m03"]:root #layoutKopf{min-height:50px;padding:6px 12px 4px 18px}
html[data-layout="m03"]:root #layoutKopf .lay-marke-text{font-size:22px;font-weight:600;letter-spacing:.2em}
html[data-layout="m03"]:root #layoutKopf .lay-pille.lay-suche{min-width:127px;min-height:40px}
html[data-layout="m03"]:root #layoutKopf .lay-rund{width:40px;height:40px;min-width:40px;border:0;background:#e3e6ea;color:#4a5058}
html[data-layout="m03"]:root #app #conversation #messages{padding-top:24px}
html[data-layout="m03"]:root #app #conversation .message.user{border-radius:18px}
html[data-layout="m03"]:root #app #conversation .message:not(.user){margin-left:58px;margin-top:20px;border-radius:14px}
html[data-layout="m03"]:root #app #conversation .message:not(.user)::before{left:-58px;width:46px;height:46px}
html[data-layout="m03"]:root #app #conversation .message:not(.user) .message-head{position:absolute;left:4px;top:-20px;display:block;margin:0;font-size:12px;color:#545c66}
html[data-layout="m03"]:root #app #conversation .message:not(.user) .message-head time{display:none}
html[data-layout="m03"]:root #app #conversation #composer{margin:4px 12px 12px;gap:6px}
html[data-layout="m03"]:root #app #conversation #composer #mic{border-left:1px solid #e3e6e8;border-radius:0 50% 50% 0}
html[data-layout="m03"]:root #layoutNav .lay-nav-ziel.active .lay-icon{fill:currentColor}

/* ---------- M04 · Sofortfinder ---------------------------------------------- */
/* Weiss/Kobalt: Finden ist die Hauptansicht (Kreisportrait, Titel, zwei Treffer, grosses Suchfeld), drei Ziele. */
html[data-layout="m04"]:root{--lay-bg:#ffffff;--lay-flaeche:#f5f8fc;--lay-erhoben:#e7edfc;--lay-linie:#e6ebf3;--lay-text:#0c1546;--lay-gedaempft:#4c5a7c;
  --lay-akzent:#0a3fd0;--lay-akzent-ink:#ffffff;--lay-akzent-text:#0a3fd0;--lay-zweit:#5d86f5;
  --lay-blase:#f5f8fc;--lay-blase-user:#0a3fd0;--lay-blase-user-ink:#ffffff;
  --lay-nav-bg:#ffffff;--lay-nav-linie:#eef0f4;--lay-nav-text:#4c5a7c;--lay-kopf-bg:#ffffff;--lay-marke:#0b2ea8;--lay-marke-zeichen:#1d4fe0;
  --lay-pille-bg:#edf3fc;--lay-pille-linie:transparent;--lay-pille-text:#1d3fae;--lay-composer-bg:#ffffff;--lay-composer-linie:#1d4fe0;
  --lay-knopf-text:#0c1546;--lay-senden-bg:#0a37b8;--lay-senden-text:#ffffff;--lay-platzhalter:#4c5a7c;--lay-kreis-bg:#e7edfc;--lay-symbol-bg:#dce7fc;--lay-zeile-bg:#f5f8fc;--lay-zeile-linie:#edf1f7;--lay-nav-strich:30px;--lay-titel:#0c1546}
html[data-layout="m04"]:root #layoutKopf{padding:12px 16px 8px 18px}
html[data-layout="m04"]:root #layoutKopf .lay-marke-svg{display:none}
html[data-layout="m04"]:root #layoutKopf .lay-marke-ai{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid #1d4fe0;border-radius:7px;color:#1d4fe0;font-size:15px;font-weight:800;letter-spacing:0}
html[data-layout="m04"]:root #layoutKopf .lay-marke-text{font-size:21px;font-weight:700;letter-spacing:.02em;text-transform:capitalize}
html[data-layout="m04"]:root #layoutKopf .lay-marke-text{text-transform:none}
html[data-layout="m04"]:root #layoutKopf .lay-sprechen{min-height:40px;padding:0 16px;font-size:14px}
html[data-layout="m04"]:root #layoutKopf .lay-sprechen .lay-icon{width:19px;height:19px}
html[data-layout="m04"]:root .lay-finden-kreis{margin-top:6px}
html[data-layout="m04"]:root .lay-finden-titel{color:#0c1546}
html[data-layout="m04"]:root .lay-finden-zeile{border-color:#edf1f7}
html[data-layout="m04"]:root #layoutNav{padding-top:10px}
html[data-layout="m04"]:root #layoutNav .lay-nav-ziel.active::after{bottom:2px}
html[data-layout="m04"]:root #app #conversation .message.user{border-radius:18px}
html[data-layout="m04"]:root #app #conversation #composer{border-width:1.5px}

/* ---------- M05 · Heute mit Aiona ------------------------------------------- */
/* Sand/Aprikose: „Heute mit Aiona“ statt Bühne, Gespräch, Dateifläche und genau eine Rückfrage, Senden ausserhalb. */
/* Claude 04.10.2026 (Etappe 66, A-083): Senden-Symbol und Schrift auf dem Akzent dunkel (weiss: 1.8 bzw. 3.5:1) */
html[data-layout="m05"]:root{--lay-bg:#fdf8f3;--lay-seite:radial-gradient(120% 40% at 100% 0%,#fbe3d1 0%,rgba(251,227,209,0) 60%),linear-gradient(180deg,#faf3ed 0%,#fdf8f3 30%,#fdf8f3 100%);
  --lay-flaeche:#ffffff;--lay-erhoben:#f5ebe2;--lay-linie:#ece2d9;--lay-text:#1c1716;--lay-gedaempft:#5e5550;
  --lay-akzent:#d8682f;--lay-akzent-ink:#1c1716;--lay-akzent-text:#b2501c;--lay-zweit:#e7ae8d;
  --lay-blase:#ffffff;--lay-blase-schatten:0 1px 3px rgba(60,40,30,.06);--lay-blase-user:#f9e8da;
  --lay-nav-bg:#fcf9f6;--lay-nav-linie:#f0e7df;--lay-nav-text:#736f6e;--lay-kopf-bg:transparent;--lay-marke:#1c1716;--lay-marke-zeichen:#c46a35;
  --lay-pille-bg:rgba(255,255,255,.65);--lay-pille-linie:#e8ded5;--lay-pille-text:#4a4340;--lay-composer-bg:#ffffff;--lay-composer-linie:#ece5de;
  --lay-knopf-text:#3a3330;--lay-senden-bg:#e9b493;--lay-senden-text:#1c1716;--lay-platzhalter:#6f6966;--lay-ablage-linie:#d9d0c8;--lay-ablage-bg:#f9f6f3;--lay-ablage-symbol:#8c8580;
  --lay-rueckfrage-bg:linear-gradient(135deg,#fbe9db,#fdf1e8);--lay-nav-strich:60px}
html[data-layout="m05"]:root #layoutKopf .lay-marke-text{font-size:20px;font-weight:600;letter-spacing:.22em}
html[data-layout="m05"]:root #layoutKopf .lay-pille.lay-suche{min-width:131px;min-height:40px}
html[data-layout="m05"]:root #layoutKopf .lay-rund{width:40px;height:40px;min-width:40px}
html[data-layout="m05"]:root #app #conversation #layoutPanel{position:relative;overflow-x:hidden;overflow-y:auto}
/* Claude 22.10.2026 (Werkstatt nach-oberflaeche-rest): bei 360×740 mit Einrichtungs-Hinweis, KI-Fusszeile und Rückfrage-Karte wurde das
   Heute-Panel (Hauptinhalt von M05) auf 0 px zusammengedrückt (flex-shrink, Klicktest E «verdeckt»). Mindesthöhe; die Spalte scrollt im Notfall. */
html[data-layout="m05"]:root #app #conversation #layoutPanel:not(:empty){min-height:min(200px,32svh)}
html[data-layout="m05"]:root #app #conversation #layoutPanel::after{content:"";position:absolute;right:-60px;top:-30px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#f9d8c0 0%,#fbe6d6 55%,rgba(251,230,214,0) 72%);pointer-events:none}
html[data-layout="m05"]:root .lay-heute{z-index:1;padding:20px 20px 16px}
html[data-layout="m05"]:root .lay-heute .lay-augenbraue{color:#b85a23;font-size:11px;letter-spacing:.22em}
html[data-layout="m05"]:root .lay-heute-titel{font-size:21px}
html[data-layout="m05"]:root #app #conversation #messages{padding-top:20px}
html[data-layout="m05"]:root #app #conversation .message.user{border-radius:20px}
html[data-layout="m05"]:root #app #conversation .message:not(.user){margin-left:58px;margin-top:22px;border-radius:18px}
html[data-layout="m05"]:root #app #conversation .message:not(.user)::before{left:-58px;top:calc(50% - 12px);width:46px;height:46px}
html[data-layout="m05"]:root #app #conversation .message:not(.user) .message-head{position:absolute;left:2px;top:-22px;display:block;margin:0;font-size:13px;color:#666668}
html[data-layout="m05"]:root #app #conversation .message:not(.user) .message-head time{display:none}
html[data-layout="m05"]:root #layoutKontext{gap:20px}
html[data-layout="m05"]:root #layoutKontext .lay-ablage{min-height:134px;margin:0 28px 0 58px;border-radius:14px}
html[data-layout="m05"]:root .lay-rueckfrage-knopf{background:#de8454;color:#1c1716}
/* Senden als eigener runder Knopf rechts neben dem Feld (Bild) */
html[data-layout="m05"]:root #app #conversation #composer{margin:4px 68px 12px 14px;padding:5px 8px 5px 5px;overflow:visible;position:relative}
html[data-layout="m05"]:root #app #conversation #composer .primary-slot{position:absolute;right:-60px;top:50%;transform:translateY(-50%)}
html[data-layout="m05"]:root #app #conversation #composer :is(.send,.stop){width:46px;height:46px}
html[data-layout="m05"]:root #app #conversation #composer #mic{margin-left:auto}
/* Claude 04.10.2026 (Etappe 66, B-079/A-083): läuft eine Antwort, stehen Stopp und Senden nebeneinander rechts – Platz dafür, statt den Telefonknopf zu verdecken */
html[data-layout="m05"]:root #app #conversation #composer:has(.stop:not(.hidden)):has(.send:not(.hidden)){margin-right:122px}
html[data-layout="m05"]:root #app #conversation #composer:has(.stop:not(.hidden)):has(.send:not(.hidden)) .primary-slot{right:-114px}

/* ---------- M06 · Handwerk -------------------------------------------------- */
/* Hellgrau/Indigo: letztes Ergebnis als Dokumentvorschau mit Rückweg, Gespräch darunter, vier Ziele. */
html[data-layout="m06"]:root{--lay-bg:#edeff6;--lay-flaeche:#ffffff;--lay-erhoben:#dee1e7;--lay-linie:#dfe3ec;--lay-text:#10132e;--lay-gedaempft:#5c627e;
  --lay-akzent:#3f487b;--lay-akzent-ink:#ffffff;--lay-akzent-text:#3f487b;--lay-zweit:#7d86c0;
  --lay-blase:#ffffff;--lay-blase-user:#d8deed;--lay-nav-bg:#ffffff;--lay-nav-linie:#e3e6ee;--lay-nav-text:#31385c;--lay-kopf-bg:#edeff6;--lay-marke:#10132e;--lay-marke-zeichen:#1d2452;
  --lay-pille-bg:rgba(255,255,255,.6);--lay-pille-linie:#d8dce6;--lay-pille-text:#3a3f5c;--lay-composer-bg:#ffffff;--lay-composer-linie:#dfe3ec;
  --lay-knopf-text:#2a2f4f;--lay-senden-bg:#424b7e;--lay-senden-text:#ffffff;--lay-platzhalter:#6a7090;--lay-vorschau-bg:#dee1e7;--lay-zurueck:#212654;--lay-nav-strich:56px}
html[data-layout="m06"]:root #layoutKopf .lay-marke-text{font-size:22px;font-weight:700;letter-spacing:.12em}
html[data-layout="m06"]:root #layoutKopf .lay-pille.lay-suche{min-width:123px;min-height:40px}
html[data-layout="m06"]:root #app #conversation #messages{padding-top:14px;gap:14px}
html[data-layout="m06"]:root #app #conversation .message{padding:9px 14px;border-radius:12px}
html[data-layout="m06"]:root #app #conversation .message p{font-size:15px}
html[data-layout="m06"]:root #app #conversation .message:not(.user){margin-left:52px;margin-top:18px}
html[data-layout="m06"]:root #app #conversation .message:not(.user) .message-head{position:absolute;left:0;top:-19px;display:block;margin:0;font-size:12.5px;font-weight:700;color:#333}
html[data-layout="m06"]:root #app #conversation .message:not(.user) .message-head time{display:none}
html[data-layout="m06"]:root #app #conversation #composer{min-height:46px;margin:2px 12px 8px;padding:3px}
html[data-layout="m06"]:root #app #conversation #composer :is(.send,.stop){width:40px;height:40px;min-width:40px}
html[data-layout="m06"]:root #app #conversation #composer #mic{margin-left:auto}
html[data-layout="m06"]:root #layoutNav{padding-top:4px}
html[data-layout="m06"]:root #layoutNav .lay-nav-ziel{min-height:52px;gap:3px}
html[data-layout="m06"]:root #layoutNav .lay-nav-ziel.active .lay-icon{fill:currentColor}
html[data-layout="m06"]:root #layoutNav .lay-nav-ziel.active{color:#1d265c}

/* ---------- M07 · Nachtgespräch --------------------------------------------- */
/* Marine/Eisblau: kleine Avatarzeile, ruhiger dunkler Verlauf, Auftragszeile vor dem Composer, Pillen-Navigation. */
html[data-layout="m07"]:root{--lay-bg:#04132a;--lay-seite:linear-gradient(180deg,#0a1a33 0%,#04132a 40%,#031126 100%);--lay-flaeche:#0b1b31;--lay-feld:#0c1e36;--lay-erhoben:#14294a;--lay-linie:#22395a;
  --lay-text:#f2f7fd;--lay-gedaempft:#a9bdd6;--lay-akzent:#5db7f7;--lay-akzent-ink:#03142b;--lay-akzent-text:#6cc2ff;--lay-zweit:#42d997;
  --lay-blase:#0f2139;--lay-blase-linie:#22395a;--lay-blase-user:#12488d;--lay-blase-user-linie:#2c63b0;--lay-blase-user-ink:#ffffff;
  --lay-nav-bg:#031227;--lay-nav-linie:#13243b;--lay-nav-text:#cfe0f3;--lay-nav-aktiv:#58b6f8;--lay-kopf-bg:transparent;--lay-marke:#ffffff;--lay-marke-zeichen:#7cc4ff;
  --lay-pille-bg:#0b1b31;--lay-pille-linie:#284566;--lay-pille-text:#cfe0f3;--lay-composer-bg:#0c1e36;--lay-composer-linie:#284566;
  --lay-knopf-bg:transparent;--lay-knopf-linie:#284566;--lay-knopf-text:#dbe8f7;--lay-senden-bg:#66b4f6;--lay-senden-text:#03142b;--lay-platzhalter:#9fb3cc;--lay-online:#42d997;--lay-status-text:#cfe3f5}
html[data-layout="m07"]:root #layoutKopf{align-items:flex-start;padding-top:12px}
html[data-layout="m07"]:root #layoutKopf .lay-marke{align-items:flex-start}
html[data-layout="m07"]:root #layoutKopf .lay-marke-text{font-size:19px;font-weight:500;letter-spacing:.32em}
html[data-layout="m07"]:root #layoutKopf .lay-marke-zeile{margin-top:5px;margin-left:-36px;font-size:13px;color:#7f9fd6}
html[data-layout="m07"]:root #layoutKopf .lay-pille.lay-suche{min-width:124px;min-height:40px}
html[data-layout="m07"]:root #layoutKopf .lay-rund{width:40px;height:40px;background:transparent}
html[data-layout="m07"]:root #app #conversation #stage{width:66px;height:66px;margin:12px 0 0 13px;box-shadow:0 0 0 2px #29486e}
html[data-layout="m07"]:root #app #conversation #layoutIdentitaet{margin:-66px 16px 0 95px;min-height:66px}
html[data-layout="m07"]:root #app #conversation .message:not(.user){margin-left:44px}
html[data-layout="m07"]:root #app #conversation .message:not(.user)::before{left:-44px;width:36px;height:36px}
html[data-layout="m07"]:root #app #conversation .message{padding:10px 15px;border-radius:12px}
html[data-layout="m07"]:root #app #conversation .message.user{border-radius:14px}
html[data-layout="m07"]:root #app #conversation #messages{padding-top:16px;gap:16px}
html[data-layout="m07"]:root .lay-auftrag{background:#06182d;border-color:#1f3450;border-radius:12px}
html[data-layout="m07"]:root .lay-auftrag-symbol{color:#cfe0f3}
html[data-layout="m07"]:root .lay-auftrag-link{color:#5dc1ff}
html[data-layout="m07"]:root #layoutKontext{margin-bottom:8px}
/* Composer: Anhang und Senden als eigene Kreise, das Feld dazwischen mit Mikrofon */
html[data-layout="m07"]:root #app #conversation #composer{margin:8px 60px 12px 60px;padding:3px 4px 3px 12px;border-radius:26px;position:relative;overflow:visible}
html[data-layout="m07"]:root #app #conversation #composer #attach{position:absolute;left:-48px;top:50%;width:40px;height:40px;min-width:40px;transform:translateY(-50%)}
html[data-layout="m07"]:root #app #conversation #composer .primary-slot{position:absolute;right:-50px;top:50%;transform:translateY(-50%)}
html[data-layout="m07"]:root #app #conversation #composer #mic{width:40px;height:40px;min-width:40px;margin-left:auto}
/* Claude 04.10.2026 (Etappe 66, B-079/A-083): Stopp und Senden nebeneinander ausserhalb des Feldes (siehe M05) */
html[data-layout="m07"]:root #app #conversation #composer:has(.stop:not(.hidden)):has(.send:not(.hidden)){margin-right:110px}
html[data-layout="m07"]:root #app #conversation #composer:has(.stop:not(.hidden)):has(.send:not(.hidden)) .primary-slot{right:-102px}
html[data-layout="m07"]:root #layoutNav .lay-nav-ziel.active::after{display:none}
html[data-layout="m07"]:root #layoutNav .lay-nav-ziel .lay-icon{box-sizing:content-box;padding:4px 19px;border:1px solid transparent;border-radius:999px}
html[data-layout="m07"]:root #layoutNav .lay-nav-ziel.active .lay-icon{border-color:#1d4f86;background:#0c2a52}

/* ---------- M08 · Arbeit und Nähe -------------------------------------------- */
/* Warmer Graphit/Gold: kleiner Avatar mit Umschalter Gespräch/Arbeit und „Mehr“, Arbeitsmodus mit Ablage. */
html[data-layout="m08"]:root{--lay-bg:#0f0c09;--lay-flaeche:#18120f;--lay-feld:#1b150f;--lay-erhoben:#241e18;--lay-linie:#3a3029;--lay-text:#f6efe8;--lay-gedaempft:#c9bdb1;
  --lay-akzent:#d9a066;--lay-akzent-ink:#1a120c;--lay-akzent-text:#f0b071;--lay-zweit:#b88454;
  --lay-blase:#211812;--lay-blase-linie:#3a2a1e;--lay-blase-user:#272727;--lay-blase-user-linie:#3a3a3a;
  --lay-nav-bg:#120c09;--lay-nav-linie:#2a211b;--lay-nav-text:#f3ebe2;--lay-nav-aktiv:#f2b062;--lay-kopf-bg:#0f0c09;--lay-marke:#f0a868;--lay-marke-zeichen:#e09b5d;
  --lay-pille-bg:#18120f;--lay-pille-linie:#3a3029;--lay-pille-text:#f3ebe2;--lay-composer-bg:#15100c;--lay-composer-linie:#3a3029;
  --lay-knopf-text:#e6dacd;--lay-senden-bg:linear-gradient(145deg,#d7a46f,#b07a4c);--lay-senden-text:#1a120c;--lay-platzhalter:#a99c90;--lay-ablage-linie:#5a4636;--lay-ablage-bg:#120e0b;--lay-ablage-symbol:#d9a066;
  --lay-um-aktiv:linear-gradient(145deg,#d7a46f,#b47f50);--lay-online:#5fd38d;--lay-zurueck:#f0ac68;--lay-nav-strich:50px}
html[data-layout="m08"]:root #layoutKopf{align-items:flex-start;min-height:68px;padding-top:10px}
html[data-layout="m08"]:root #layoutKopf .lay-marke{align-items:flex-start}
html[data-layout="m08"]:root #layoutKopf .lay-marke-text{font-size:20px;font-weight:600;letter-spacing:.26em}
html[data-layout="m08"]:root #layoutKopf .lay-marke-zeile{max-width:160px;margin-top:6px;margin-left:-36px;font-size:10px;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:#a2937b}
html[data-layout="m08"]:root #layoutKopf .lay-pille.lay-suche{min-width:126px;min-height:40px;color:#f3ebe2}
html[data-layout="m08"]:root #app #conversation #stage{width:52px;height:52px;margin:6px 0 0 16px;overflow:visible;background:none;box-shadow:none}
html[data-layout="m08"]:root #app #conversation #stage :is(.portrait,.avatar-video){border-radius:50%;box-shadow:0 0 0 2px #c8935f}
html[data-layout="m08"]:root #app #conversation #stage::after{content:"";position:absolute;right:-1px;bottom:1px;z-index:3;width:12px;height:12px;border:2px solid #0f0c09;border-radius:50%;background:var(--lay-online)}
html[data-layout="m08"]:root #app #conversation #layoutIdentitaet{display:none}
html[data-layout="m08"]:root #app #conversation #layoutUmschalter{display:flex;align-items:center;gap:10px;min-height:54px;margin:-54px 15px 0 80px}
html[data-layout="m08"]:root #layoutUmschalter .lay-umschalter-gruppe{min-height:48px}
html[data-layout="m08"]:root #layoutUmschalter .lay-um{color:#e5d7ca}
html[data-layout="m08"]:root #layoutUmschalter .lay-um[aria-pressed="true"]{color:#1a120c}
html[data-layout="m08"]:root .lay-arbeit{gap:12px;padding-top:18px}
html[data-layout="m08"][data-layout-modus="arbeit"]:root #app #conversation #messages{min-height:96px;padding-top:12px}
html[data-layout="m08"]:root .lay-arbeit .lay-augenbraue{color:#c3a58c;font-size:10.5px}
html[data-layout="m08"]:root .lay-arbeit-unter{font-size:12.5px}
html[data-layout="m08"]:root .lay-arbeit .lay-ablage{padding:14px 16px}
html[data-layout="m08"]:root .lay-arbeit .lay-ablage{min-height:200px;gap:4px}
html[data-layout="m08"]:root .lay-arbeit .lay-ablage-titel{font-size:15px;font-weight:700}
html[data-layout="m08"]:root .lay-arbeit .lay-ablage-knopf{background:linear-gradient(145deg,#d7a46f,#b07a4c);color:#1a120c}
html[data-layout="m08"]:root .lay-arbeit-wege{display:none}
html[data-layout="m08"]:root #app #conversation #messages{padding-top:16px;gap:20px}
html[data-layout="m08"]:root #app #conversation .message{padding:9px 15px;border-radius:12px}
html[data-layout="m08"]:root #app #conversation .message.user{border-radius:14px}
html[data-layout="m08"]:root #app #conversation .message:not(.user){margin-left:44px}
html[data-layout="m08"]:root #app #conversation .message:not(.user)::before{left:-44px;width:36px;height:36px}
/* Composer: äussere Kapsel mit Anhang, innen das Feld mit Mikrofon, Senden gold */
html[data-layout="m08"]:root #app #conversation #composer{margin:4px 12px 12px;padding:7px 10px 7px 8px;border-radius:20px;gap:8px}
html[data-layout="m08"]:root #app #conversation #composer textarea{padding:9px 14px;border:1px solid #3a3029;border-radius:22px;background:#1b150f}
html[data-layout="m08"]:root #app #conversation #composer #mic{position:relative;margin-left:-58px;z-index:1}
html[data-layout="m08"]:root #app #conversation #composer :is(.send,.stop){width:40px;height:40px;min-width:40px}