/* Gemeinsame Darstellung für alle Bereiche. Bewusst zuletzt geladen:
   Layout und Inhalte bleiben in app.css, Farben folgen durchgängig dem Modus. */
:root {
    --papier: #f7f5f4;
    --flaeche: #ffffff;
    --flaeche-warm: #f1edef;
    --weich: #ede7eb;
    --linie: #d7ced5;
    --linie-zart: #e8e1e6;
    --tinte: #28232b;
    --tinte-weich: #675e6a;
    --tinte-zart: #756c78;
    --akzent: #7b304b;
    --akzent-tief: #60233a;
    --akzent-hell: #91405e;
    --akzent-zart: #f4e6ec;
    --ui-accent-text: #7b304b;
    --ui-outgoing: #f0e3eb;
    --ui-focus: #a7456b;
    --gruen: #426947;
    --gruen-zart: #e5eee5;
    --rose: #a02f45;
    --rose-zart: #f9e6ea;
    --text-auf-leder: #fff8fb;
    --schatten-zart: 0 2px 8px rgb(40 24 34 / 4%);
    --schatten: 0 12px 32px rgb(40 24 34 / 10%);
    --rundung: 16px;
    --rundung-gross: 20px;
    --ui-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-family: var(--ui-font);
}
:root[data-theme="dark"], .theme-dark {
    --papier: #19171c;
    --flaeche: #242128;
    --flaeche-warm: #2b2730;
    --weich: #342e39;
    --linie: #49404e;
    --linie-zart: #38313d;
    --tinte: #f2edf3;
    --tinte-weich: #c6bdcb;
    --tinte-zart: #aea1b6;
    --akzent: #96405f;
    --akzent-tief: #7b304b;
    --akzent-hell: #ac5073;
    --akzent-zart: #402a36;
    --ui-accent-text: #f0a8c0;
    --ui-outgoing: #452c3c;
    --ui-focus: #ef9ebc;
    --gruen: #a7cfab;
    --gruen-zart: #2b3c30;
    --rose: #ffb0bb;
    --rose-zart: #442a33;
    --text-auf-leder: #fff8fb;
    --schatten-zart: 0 2px 8px rgb(0 0 0 / 10%);
    --schatten: 0 12px 32px rgb(0 0 0 / 24%);
    color-scheme: dark;
}
body { background: var(--papier); color: var(--tinte); }
button, input, textarea, select { font-family: inherit; }
input, textarea, select { accent-color: var(--akzent); }
button:focus-visible, a:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 3px;
}
::selection { background: var(--akzent-zart); color: var(--tinte); }
.boot-screen { background: var(--papier); color: var(--tinte); }

/* Der native Wähler bleibt mit Tastatur und auf kleinen Geräten bedienbar. */
.theme-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 42px;
    border: 1px solid var(--linie);
    border-radius: 12px;
    background: var(--flaeche);
    color: var(--tinte);
}
.theme-switcher > .ph { position: absolute; left: 12px; font-size: 20px; pointer-events: none; color: var(--ui-accent-text); }
.theme-switcher select {
    appearance: none;
    background: transparent;
    color: inherit;
    border: 0;
    border-radius: inherit;
    cursor: pointer;
    font: 600 13px var(--ui-font);
    min-height: 42px;
    padding: 0 30px 0 40px;
    width: 132px;
}
.theme-switcher option { background: var(--flaeche); color: var(--tinte); }
.theme-chevron { position: absolute; right: 13px; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); pointer-events: none; }
.lock-shell, .lock-shell.theme-dark { justify-content: flex-start; }
.lock-shell .lock-layout { align-self: flex-start; flex-shrink: 0; height: auto; max-height: none; }
.lock-appearance { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--lock-line); color: var(--lock-copy); font-size: 12px; }
.lock-appearance .theme-switcher { background: var(--lock-panel-muted); color: var(--lock-ink); border-color: var(--lock-line); }
.lock-appearance .theme-switcher > .ph { color: var(--lock-copy); }
.appearance-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 2px; border-bottom: 1px solid var(--linie-zart); }
.appearance-setting b { color: var(--tinte); font-size: 14px; }
.appearance-setting p { color: var(--tinte-weich); font-size: 12px; margin: 5px 0 0; line-height: 1.5; }

/* Navigation, in jedem Bereich an derselben Stelle. */
.web-vnext.app-shell {
    background: var(--papier);
    color: var(--tinte);
    font-family: var(--ui-font);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: 76px minmax(0, 1fr);
}
.web-vnext.app-shell.list-collapsed { grid-template-columns: 76px minmax(0, 1fr); }
.web-vnext.app-shell .global-header { background: var(--flaeche); color: var(--tinte); border-bottom: 1px solid var(--linie-zart); box-shadow: none; min-height: 76px; padding: 0 24px; gap: 20px; }
.web-vnext.app-shell .global-brand { flex: 0 0 auto; width: auto; min-width: 195px; padding: 0; color: var(--ui-accent-text); gap: 10px; }
.web-vnext.app-shell .global-brand strong { font: 700 23px var(--ui-font); letter-spacing: -.7px; }
.web-vnext.app-shell .global-brand .ph { font-size: 30px; }
.web-vnext.app-shell .global-nav { gap: 5px; align-items: center; }
.web-vnext.app-shell .global-nav button { color: var(--tinte-weich); background: transparent; border: 0; border-radius: 11px; min-width: 100px; min-height: 44px; padding: 12px 16px; font: 600 13px var(--ui-font); box-shadow: none; }
.web-vnext.app-shell .global-nav button:hover { background: var(--flaeche-warm); color: var(--tinte); }
.web-vnext.app-shell .global-nav button.active { color: var(--ui-accent-text); background: var(--akzent-zart); box-shadow: none; }
.web-vnext.app-shell .global-nav button.active::after { display: none; }
.web-vnext.app-shell .global-actions { display: flex; gap: 10px; margin-left: auto; }
.web-vnext.app-shell .global-icon-button, .web-vnext.app-shell .profile-chevron { color: var(--tinte-weich); }
.web-vnext.app-shell .avatar-button { background: var(--akzent-zart); color: var(--ui-accent-text); border: 1px solid var(--linie); border-radius: 50%; width: 40px; height: 40px; }
.web-vnext.app-shell .global-demo { background: var(--flaeche-warm); border-color: var(--linie); color: var(--tinte-weich); font: 700 10px var(--ui-font); }

/* Chat: klare Zeilen in der Liste, ruhige Bühne und eine kompakte Eingabe. */
.web-vnext.app-shell .conversation-panel { background: var(--flaeche); border-right: 1px solid var(--linie-zart); }
.web-vnext.app-shell .panel-header { padding: 12px 18px 6px; }
.web-vnext.app-shell .list-toggle { background: var(--flaeche); border-color: var(--linie); color: var(--tinte-weich); }
.web-vnext.app-shell .search-box { background: var(--flaeche-warm); color: var(--tinte-weich); border: 1px solid transparent; border-radius: 11px; margin: 8px 16px 12px; }
.web-vnext.app-shell .search-box input { color: var(--tinte); background: transparent; }
.web-vnext.app-shell .conversation-list { padding: 0 10px; }
.web-vnext.app-shell .conversation-row { background: transparent; border: 1px solid transparent; border-radius: 12px; box-shadow: none; margin-bottom: 4px; padding: 13px 10px; }
.web-vnext.app-shell .conversation-row:hover { background: var(--flaeche-warm); }
.web-vnext.app-shell .conversation-row.selected { background: var(--akzent-zart); border-color: transparent; box-shadow: none; }
.web-vnext.app-shell .conversation-meta b { color: var(--tinte); font: 650 14px var(--ui-font); }
.web-vnext.app-shell .conversation-preview { color: var(--tinte-weich); font-size: 12px; }
.web-vnext.app-shell .conversation-meta time { color: var(--tinte-zart); font-size: 11px; }
.web-vnext.app-shell .conversation-avatar, .web-vnext.app-shell .thread-avatar { border: 1px solid var(--linie-zart); }
.web-vnext.app-shell .panel-footer { background: var(--flaeche); border-top: 1px solid var(--linie-zart); }
.web-vnext.app-shell .trust-card { background: transparent; border: 0; }
.web-vnext.app-shell .trust-card b { color: var(--gruen); }
.web-vnext.app-shell .trust-card small { color: var(--tinte-zart); }
.web-vnext.app-shell .thread-panel,
.web-vnext.app-shell.theme-dark .thread-panel,
.web-vnext.app-shell.rare-chat-background .thread-panel {
    background: var(--papier);
}
.web-vnext.app-shell .thread-header { min-height: 78px; padding: 12px 28px; background: var(--flaeche); border-color: var(--linie-zart); }
.web-vnext.app-shell .thread-header h2 { font: 650 20px var(--ui-font); color: var(--tinte); margin-bottom: 5px; }
.web-vnext.app-shell .thread-header p { color: var(--tinte-weich); font-size: 12px; }
.web-vnext.app-shell .thread-actions .icon-button { background: transparent; color: var(--tinte-weich); border-color: var(--linie); }
.web-vnext.app-shell .message-stage { background: transparent; }
.web-vnext.app-shell .stage-inner { max-width: 1000px; padding: 22px 30px 28px; }
.web-vnext.app-shell .message-bubble { background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie-zart); box-shadow: var(--schatten-zart); border-radius: 16px; }
.web-vnext.app-shell .message-bubble p { font-family: var(--ui-font); font-size: 14px; line-height: 1.6; }
.web-vnext.app-shell .outgoing .message-bubble { background: var(--ui-outgoing); color: var(--tinte); border-color: transparent; }
.web-vnext.app-shell .bubble-meta time, .web-vnext.app-shell .outgoing .bubble-meta time,
.web-vnext.app-shell .outgoing .edit-history-trigger, .web-vnext.app-shell .outgoing .delivery-state { color: var(--tinte-zart); }
.web-vnext.app-shell .delivery-state.state-4 { color: #399fc9; }
.web-vnext.app-shell .day-divider span { background: var(--flaeche); color: var(--tinte-weich); border: 1px solid var(--linie-zart); font: 500 11px var(--ui-font); }
.web-vnext.app-shell .message-composer { background: var(--papier); border: 0; padding: 12px 28px 20px; }
.web-vnext.app-shell .composer-row { background: var(--flaeche); border-color: var(--linie); border-radius: 18px; box-shadow: var(--schatten-zart); }
.web-vnext.app-shell .composer-row:focus-within { border-color: var(--ui-focus); box-shadow: 0 0 0 2px var(--akzent-zart); }
.web-vnext.app-shell .composer-row textarea { background: transparent; color: var(--tinte); }
.web-vnext.app-shell .composer-row textarea::placeholder, .web-vnext.app-shell .search-box input::placeholder { color: var(--tinte-zart); }
.web-vnext.app-shell .composer-tool { color: var(--tinte-weich); background: transparent; }
.web-vnext.app-shell .composer-tool:hover { background: var(--flaeche-warm); color: var(--ui-accent-text); }
.web-vnext.app-shell .send-button { background: var(--akzent); color: #fff; box-shadow: none; }
.web-vnext.app-shell .message-bubble.emoji-only p { font-size: 2rem; }

/* Gleiche Seitenbreite, Überschriften und Abstände für alle Arbeitsbereiche. */
.web-vnext.app-shell .workspace-area { background: var(--papier); color: var(--tinte); padding: 36px clamp(20px, 4vw, 64px) 56px; }
.web-vnext.app-shell .workspace-heading { align-items: center; gap: 20px; margin-bottom: 26px; }
.web-vnext.app-shell .workspace-heading h1 { color: var(--tinte); font: 700 clamp(28px, 3vw, 36px)/1.15 var(--ui-font); letter-spacing: -.9px; margin: 7px 0 10px; }
.web-vnext.app-shell .workspace-heading p { color: var(--tinte-weich); max-width: 680px; line-height: 1.6; font-size: 14px; }
.eyebrow { color: var(--tinte-zart); font: 700 10px var(--ui-font); letter-spacing: 1.2px; }
.web-vnext.app-shell .workspace-tabs { gap: 6px; padding: 4px; border: 1px solid var(--linie-zart); border-radius: 12px; background: var(--flaeche-warm); overflow-x: auto; }
.web-vnext.app-shell .workspace-tabs button { color: var(--tinte-weich); padding: 10px 17px; min-height: 40px; border: 0; border-radius: 9px; white-space: nowrap; font: 600 13px var(--ui-font); }
.web-vnext.app-shell .workspace-tabs button.active { background: var(--flaeche); color: var(--ui-accent-text); box-shadow: var(--schatten-zart); }
.web-vnext.app-shell .workspace-search { background: var(--flaeche); border-color: var(--linie); color: var(--tinte-weich); }
.web-vnext.app-shell .workspace-search input { color: var(--tinte); }
.web-vnext.app-shell .workspace-search:focus-within { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.web-vnext.app-shell .workspace-search input::placeholder { color: var(--tinte-zart); }
.workspace-primary { background: var(--akzent) !important; border-color: var(--akzent-tief) !important; box-shadow: none; }
.web-vnext.app-shell .workspace-empty, .web-vnext.app-shell .workspace-loading, .web-vnext.app-shell .manager-progress { color: var(--tinte-weich); }
.web-vnext.app-shell .workspace-empty h2, .web-vnext.app-shell .training-empty h2 { font: 650 26px var(--ui-font); color: var(--tinte); }
.web-vnext.app-shell .workspace-empty > .ph { color: var(--ui-accent-text); }
.workspace-notice { background: var(--rose-zart); color: var(--rose); border-color: var(--linie); }

/* Sticker: Die Packkarten stehen samt Farben gesammelt in app.css unter
   „Stickerbereich“ - sie hängen dort schon an diesen Token. Eine zweite
   Fassung hier hatte die Karten mit höherer Spezifität wieder überschrieben. */
.web-vnext.app-shell :is(.manager-sticker-card, .workspace-sticker, .sticker-manager-detail > header) { background: var(--flaeche); border-color: var(--linie-zart); color: var(--tinte); }
.web-vnext.app-shell :is(.manager-sticker-image, .training-empty-icon) { background: var(--flaeche-warm); }
.web-vnext.app-shell :is(.manager-back, .workspace-empty > .ph, .training-empty-icon) { color: var(--ui-accent-text); }
.web-vnext.app-shell :is(.pack-order-actions button, .manager-item-actions button, .manager-move-target select) { background: var(--flaeche-warm); color: var(--tinte-weich); border-color: var(--linie); }
.web-vnext.app-shell :is(.sticker-manager-toolbar button, .manager-pack-actions button, .manager-add-button, .manager-inline-actions button) { background: var(--akzent); border-color: var(--akzent-tief); color: #fff; }
.web-vnext.app-shell :is(.sticker-manager-toolbar, .manager-pack-actions, .manager-inline-actions) .secondary { background: var(--flaeche); color: var(--ui-accent-text); border-color: var(--linie); }
.web-vnext.app-shell .manager-pack-actions .danger { background: var(--rose-zart); color: var(--rose); border-color: var(--linie); }
.web-vnext.app-shell :is(.sticker-manager-toolbar input, .sticker-manager-detail input) { background: var(--flaeche); color: var(--tinte); border-color: var(--linie); }
.web-vnext.app-shell :is(.sticker-manager-toolbar label span, .sticker-manager-detail > header p, .workspace-loose-stickers > p, .training-empty p) { color: var(--tinte-weich); }
.web-vnext.app-shell :is(.sticker-manager-detail > header h2, .workspace-loose-stickers h2) { font: 650 24px var(--ui-font); }

/* Mediathek: dieselben Karten und Farben, klar getrennte Filter. */
.web-vnext.app-shell .mediathek-workspace { --mediathek-ton: var(--ui-accent-text); }
.web-vnext.app-shell .mediathek-stat { background: var(--flaeche); border-color: var(--linie-zart); padding: 18px; }
.web-vnext.app-shell .mediathek-stat > b { font: 700 28px var(--ui-font); margin-block: 7px; }
.web-vnext.app-shell .mediathek-stat.aktiv { background: var(--akzent-zart); border-color: var(--ui-accent-text); }
.web-vnext.app-shell .mediathek-stat.is-total { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.web-vnext.app-shell .mediathek-stat.is-total :is(.eyebrow, small) { color: #fff1f6; }
.web-vnext.app-shell .mediathek-toolbar { padding: 18px; background: var(--flaeche); border: 1px solid var(--linie-zart); border-radius: 14px; }
.web-vnext.app-shell .mediathek-selects { gap: 14px; }
.web-vnext.app-shell .mediathek-selects > label { flex: 1; min-width: 140px; }
.web-vnext.app-shell .mediathek-gruppe { font: 650 15px var(--ui-font); padding-block: 8px; }
.web-vnext.app-shell .mediathek-gruppe::before { background: var(--papier); }

/* Training: bisher feste helle Karten nun vollständig an das Schema binden. */
.web-vnext.app-shell :is(.training-kpis article, .body-kpis article, .training-chart-card, .training-recent-card, .training-plan-card, .training-history-table, .exercise-progress-grid article, .coach-insight-grid article, .coach-recommendation) {
    background: var(--flaeche); color: var(--tinte); border-color: var(--linie-zart); box-shadow: var(--schatten-zart);
}
.web-vnext.app-shell :is(.training-kpis article, .body-kpis article) { padding: 22px; }
.web-vnext.app-shell :is(.training-kpis, .body-kpis) :is(span, small) { color: var(--tinte-weich); }
.web-vnext.app-shell :is(.training-kpis, .body-kpis) b { color: var(--tinte); font: 700 30px var(--ui-font); letter-spacing: -.6px; }
.web-vnext.app-shell :is(.training-chart-card, .training-next-card, .training-plan-card, .training-coach-layout) h2 { color: var(--tinte); font: 650 22px var(--ui-font); line-height: 1.3; }
.web-vnext.app-shell :is(.training-chart-card, .training-plan-card, .exercise-progress-grid) header > strong { color: var(--gruen); }
.web-vnext.app-shell .training-next-card { background: var(--akzent-tief); color: #fff; border-color: var(--akzent); box-shadow: none; }
.web-vnext.app-shell .training-next-card h2 { color: #fff; font-size: 28px; }
.web-vnext.app-shell .training-next-card :is(.eyebrow, p, dt) { color: #f1d5e0; }
.web-vnext.app-shell .training-next-card .workspace-primary { background: #fff8fb !important; color: #60233a !important; border-color: transparent !important; }
.web-vnext.app-shell .training-chart text { fill: var(--tinte-zart); }
.web-vnext.app-shell .training-chart .chart-grid { stroke: var(--linie-zart); }
.web-vnext.app-shell .training-chart .chart-area { fill: var(--akzent-zart); }
.web-vnext.app-shell .training-chart .chart-line, .web-vnext.app-shell .exercise-sparkline polyline { stroke: var(--ui-accent-text); }
.web-vnext.app-shell .training-chart .chart-point { fill: var(--flaeche); stroke: var(--ui-accent-text); }
.web-vnext.app-shell .training-chart.bar-chart rect, .web-vnext.app-shell .training-chart .weight-dot { fill: var(--ui-accent-text); }
.web-vnext.app-shell .training-chart .waist-line { stroke: var(--gruen); }
.web-vnext.app-shell .training-chart .waist-dot { fill: var(--gruen); }
.web-vnext.app-shell :is(.recent-workout, .training-day-row, .training-table-row) { border-color: var(--linie-zart); color: var(--tinte); }
.web-vnext.app-shell :is(.recent-workout time, .recent-workout small, .training-day-row small, .training-day-row > span, .training-table-row small, .exercise-progress-grid article > p, .exercise-progress-grid header small, .training-plan-card > p, .coach-insight-grid p, .coach-recommendation p, .training-coach-layout > header > p) { color: var(--tinte-weich); }
.web-vnext.app-shell :is(.recent-workout > strong, .training-recent-card header button, .training-day-row.next > span, .exercise-progress-grid article > b, .coach-insight-grid i) { color: var(--ui-accent-text); }
.web-vnext.app-shell .training-table-head { background: var(--flaeche-warm); color: var(--tinte-weich); }
.web-vnext.app-shell .coach-insight-grid h3 { font: 650 18px var(--ui-font); }
.web-vnext.app-shell .coach-insight-grid article.positive { border-left-color: var(--gruen); }
.web-vnext.app-shell .coach-recommendation button { background: var(--akzent); color: #fff; }
.web-vnext.app-shell .training-plan-card.active { border-color: var(--ui-accent-text); }
.web-vnext.app-shell .sync-state { color: var(--gruen); }

/* Formulare, Sicherheitsansicht und Dialoge teilen die Flächen der Seiten. */
:is(.modal-scrim, .security-drawer-backdrop, .admin-drawer-backdrop, .media-viewer, .toast-notice, .status-notice) { font-family: var(--ui-font); }
.modal-scrim :is(.feature-card, .confirm-card, .action-sheet, .delivery-status-card, .edit-history-card),
.security-drawer-backdrop .security-drawer, .admin-drawer-backdrop .admin-drawer {
    background: var(--flaeche); color: var(--tinte); border-color: var(--linie); border-radius: 18px; box-shadow: var(--schatten);
}
.modal-scrim :is(h2, h3), .security-drawer h2, .admin-drawer h2 { font-family: var(--ui-font); color: var(--tinte); letter-spacing: -.3px; }
.modal-scrim .feature-card h2, .modal-scrim h2, .security-drawer h2 { font: 650 23px var(--ui-font); }
.modal-scrim :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select),
.admin-drawer :is(input, textarea, select) { background: var(--flaeche-warm); color: var(--tinte); border-color: var(--linie); border-radius: 10px; }
.modal-scrim :is(.field-stack > span, .caption-field > span, .feature-copy, .sticker-detail-data dt, .sticker-detail-stage figcaption, .sticker-detail-edit label span) { color: var(--tinte-weich); }
.modal-scrim :is(.storage-summary, .device-row, .server-status, .sticker-detail-stage, .sticker-detail-emojis span, .sticker-pack-preview) { background: var(--flaeche-warm); color: var(--tinte); border-color: var(--linie-zart); }
.modal-scrim :is(.sticker-detail-step, .sticker-detail-download, .sticker-detail-actions .secondary) { background: var(--flaeche-warm); color: var(--ui-accent-text); border-color: var(--linie); }
.modal-scrim .sticker-detail-data > div { border-color: var(--linie-zart); }
.modal-scrim :is(.primary-action, .sticker-detail-actions button:not(.secondary):not(.danger)) { background: var(--akzent); color: #fff; border-color: var(--akzent-tief); }
.security-drawer :is(.security-controls button, .security-shortcuts button) { background: transparent; color: var(--tinte); border-color: var(--linie-zart); box-shadow: none; }
.security-drawer :is(.security-controls button, .security-shortcuts button):hover { background: var(--flaeche-warm); }
.security-drawer :is(.security-controls button, .security-shortcuts button) small { color: var(--tinte-weich); }
.security-drawer :is(.security-controls button, .security-shortcuts button) > span { background: var(--akzent-zart); color: var(--ui-accent-text); }
.security-drawer .security-details { background: var(--flaeche-warm); border-color: var(--linie-zart); color: var(--tinte); }
.security-drawer .security-details :is(dt, dd) { color: var(--tinte-weich); }

/* Sechs Reiter (seit dem Kalender) brauchen mit Marke und Aktionen gut 1360 px.
   Darunter rücken die Reiter enger zusammen. Reicht auch das nicht, schrumpft
   die Navigation und scrollt in sich – die ganze Oberfläche wird nie breiter
   als das Fenster. */
@media (max-width: 1400px) and (min-width: 1101px) {
    .web-vnext.app-shell .global-header { gap: 12px; }
    .web-vnext.app-shell .global-nav { gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .web-vnext.app-shell .global-nav button { flex: 0 0 auto; min-width: 80px; padding-inline: 11px; }
}
@media (max-width: 1100px) and (min-width: 721px) {
    .web-vnext.app-shell .global-header { gap: 10px; padding-inline: 18px; }
    .web-vnext.app-shell .global-brand { min-width: 40px; }
    .web-vnext.app-shell .global-brand strong { display: none; }
    .web-vnext.app-shell .global-nav button { min-width: 86px; padding-inline: 12px; }
    .web-vnext.app-shell .profile-chevron { display: none; }
}
@media (max-width: 720px) {
    .web-vnext.app-shell, .web-vnext.app-shell.list-collapsed { grid-template-columns: minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .web-vnext.app-shell .global-header { min-height: 64px; height: 64px; padding: 0 16px; gap: 10px; }
    .web-vnext.app-shell .global-brand { display: flex; min-width: 0; flex: 1; }
    .web-vnext.app-shell .global-brand strong { display: block; font-size: 19px; }
    .web-vnext.app-shell .global-brand .ph { font-size: 26px; }
    .web-vnext.app-shell .global-actions { gap: 8px; }
    .web-vnext.app-shell .global-icon-button { display: flex; width: 34px; }
    .web-vnext.app-shell .global-actions .avatar-button, .web-vnext.app-shell .profile-chevron { display: none; }
    .web-vnext.app-shell .global-nav { position: fixed; z-index: 12; inset: auto 0 0; height: calc(64px + env(safe-area-inset-bottom)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--flaeche); border-top: 1px solid var(--linie-zart); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    .web-vnext.app-shell .global-nav button { min-width: 0; min-height: 50px; padding: 6px 2px; font-size: 11px; gap: 4px; flex-direction: column; }
    .web-vnext.app-shell .global-nav .ph { font-size: 21px; }
    .web-vnext.app-shell .conversation-panel, .web-vnext.app-shell .thread-panel { top: 64px; bottom: calc(64px + env(safe-area-inset-bottom)); }
    .web-vnext.app-shell .workspace-area { padding: 24px 16px 32px; }
    .web-vnext.app-shell .workspace-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
    .web-vnext.app-shell .workspace-heading h1 { font-size: 28px; }
    .web-vnext.app-shell .workspace-heading p { font-size: 13px; }
    .web-vnext.app-shell .workspace-tabs { gap: 2px; }
    .web-vnext.app-shell .workspace-tabs button { padding-inline: 12px; }
    .web-vnext.app-shell .thread-header { min-height: 68px; padding: 10px 16px; }
    .web-vnext.app-shell .thread-header h2 { font-size: 18px; }
    .web-vnext.app-shell .stage-inner { padding: 16px 14px 22px; }
    .web-vnext.app-shell .message-stack { max-width: 87%; }
    .web-vnext.app-shell .message-composer { padding: 8px 10px 12px; }
    .web-vnext.app-shell .composer-row { border-radius: 15px; }
    .web-vnext.app-shell .composer-tool { width: 36px; height: 40px; flex: 0 0 36px; }
    .web-vnext.app-shell .send-button { height: 40px; width: 40px; flex: 0 0 40px; }
    .web-vnext.app-shell .mediathek-bestand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .web-vnext.app-shell .mediathek-stat.is-total { grid-column: 1 / -1; }
    .web-vnext.app-shell .mediathek-toolbar { padding: 12px; }
    .web-vnext.app-shell .mediathek-selects { gap: 10px; }
    .web-vnext.app-shell .mediathek-selects > label { min-width: 120px; }
    .appearance-setting { flex-wrap: wrap; }
    .modal-scrim .feature-card { padding: 20px; }
    .lock-mobile-brand { margin-bottom: 24px; }
}
@media (max-width: 380px) {
    .web-vnext.app-shell .global-brand strong { font-size: 17px; }
    .web-vnext.app-shell .global-brand .ph { display: none; }
    .web-vnext.app-shell .global-header { padding-inline: 10px; }
    .global-actions .theme-switcher select { width: 115px; padding-left: 34px; padding-right: 22px; }
    .global-actions .theme-switcher > .ph { left: 9px; font-size: 18px; }
    .global-actions .theme-chevron { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}