/* Feinschliff: Farben und Konturen (Auftrag U-1, Welle 111).

   Eigentümer am 18.09.2026: "feinschliff daran dass alles was hervorgehoben sein muss
   hervorgehoben ist, - arbeite mit den farben und designkonturen".

   Diese Datei wird ZULETZT geladen und ändert nichts an der Struktur. Sie räumt drei Dinge auf,
   die die Sichtprobe im echten Browser gemessen hat:

     1. ELF verschiedene Eckenradien auf einem Bildschirm (8, 10, 12, 16, 18, 20, 22, 24, 26,
        50, 999). Die Designs haben längst eine eigene Leiter - `--theme-radius`,
        `--theme-radius-sm`, `--theme-pill` -, aber viele Bausteine setzen stattdessen eine
        eigene Zahl. Jetzt greifen alle auf die Leiter des gewählten Designs zu: jedes Design
        behält seinen Charakter, ist aber in sich stimmig.
     2. FÜNF verschiedene Linienfarben. Struktur bekommt genau eine Linie (`--line`);
        die Akzentlinie ist ab jetzt reserviert für "ausgewählt" oder "braucht dich" -
        sie bedeutet etwas.
     3. Die Akzentfarbe stand auch auf reinen Überschriften ("DEIN PERSÖNLICHER ASSISTENT").
        Wenn alles hervorgehoben ist, ist nichts hervorgehoben: der Akzent gehört dem,
        was man antippen kann.

   Die Auswahlmuster tragen `html[data-theme]:root` vor sich, weil die Designdatei ihre Regeln
   genauso schreibt. Gleiche Stärke, später geladen - so gewinnt der Feinschliff, ohne dass
   irgendwo `!important` nötig wird.

   Dazu eine Kleinigkeit, die erst im echten Browser auffiel: fehlt das Avatarbild, zeigte der
   Browser sein Symbol für ein kaputtes Bild samt Text oben links ausserhalb der Bühne. Das
   sieht nach Fehler aus, ist aber nur ein fehlendes Bild - jetzt bleibt die Bühne ruhig.
*/

/* ---- 1) Eine Radienleiter statt zwölf Einzelwerten -------------------------------------
   Gemessen waren 8, 10, 11, 12, 16, 18, 20, 22, 24, 26, 50 und 999 Pixel auf einem Bildschirm.
   Ab jetzt gibt es genau vier Stufen - klein 12, Karte 16, Fläche 22, rund - und sonst nichts.
   Die Designs behalten ihre eigenen Werte dort, wo sie sie selbst gesetzt haben; hier wird nur
   das eingesammelt, was zufällig entstanden ist. */
html[data-theme]:root #app input:not([type=checkbox]):not([type=radio]),
html[data-theme]:root #app select,
html[data-theme]:root #app textarea,
html[data-theme]:root #app .text-button,
html[data-theme]:root #app .orders-shortcut,
html[data-theme]:root .selfcheck-row,
html[data-theme]:root .mood-panel-influence,
html[data-theme]:root .telephony-provider,
html[data-theme]:root .stacked select,
html[data-theme]:root .message-media-thumb,
html[data-theme]:root .file-symbol,
html[data-theme]:root .message-foot button,
html[data-theme]:root .suggestions button,
html[data-theme]:root .attachment,
html[data-theme]:root .pairing input,
html[data-theme]:root #chatSearch,
html[data-theme]:root #chatTitle,
html[data-theme]:root #guestName,
html[data-theme]:root .secondary,
html[data-theme]:root .primary,
html[data-theme]:root .brain-node,
html[data-theme]:root .brain-link,
html[data-theme]:root .telephony-step,
html[data-theme]:root .avatar-row-identity img,
html[data-theme]:root .avatar-choice img,
html[data-theme]:root .queued-order,
html[data-theme]:root .message-annotations,
html[data-theme]:root .file-tile-preview,
html[data-theme]:root .provider-row,
html[data-theme]:root .skill-row {
  border-radius: 12px;
}
html[data-theme]:root .mood-panel,
html[data-theme]:root .selfcheck-box,
html[data-theme]:root .telephony-brake,
html[data-theme]:root .opinion-box,
html[data-theme]:root .roast-box,
html[data-theme]:root .roast-explain,
html[data-theme]:root .information,
html[data-theme]:root .voice-recovery,
html[data-theme]:root .voice-setup,
html[data-theme]:root .quick-actions,
html[data-theme]:root .provider-mix-card,
html[data-theme]:root #guestForm,
html[data-theme]:root .guest-connection-summary,
html[data-theme]:root .notice {
  border-radius: 16px;
}
html[data-theme]:root .avatar-stage,
html[data-theme]:root dialog,
html[data-theme]:root .brain-dialog,
html[data-theme]:root .composer,
html[data-theme]:root .toast,
html[data-theme]:root .settings-card,
html[data-theme]:root #app > .topbar,
html[data-theme]:root #app .bottom-nav {
  border-radius: 22px;
}
html[data-theme]:root .pill,
html[data-theme]:root .connection,
html[data-theme]:root .stage-button,
html[data-theme]:root .send,
html[data-theme]:root .stop,
html[data-theme]:root .thought-bubble,
html[data-theme]:root .brain-close,
html[data-theme]:root .roast-info,
html[data-theme]:root #app .icon-button,
html[data-theme]:root .mood-track,
html[data-theme]:root .mood-fill,
html[data-theme]:root .setting input[type=checkbox],
html[data-theme]:root #app .avatar-row-identity img {
  border-radius: 999px;   /* das Avatarbildchen in der Zeile ist rund, nicht halbrund */
}

/* ---- 2) Eine Linie für Struktur; die Akzentlinie bedeutet etwas ------------------------ */
html[data-theme]:root .selfcheck-box,
html[data-theme]:root .telephony-brake,
html[data-theme]:root .telephony-step,
html[data-theme]:root .brain-link,
html[data-theme]:root .mood-panel,
html[data-theme]:root .opinion-box,
html[data-theme]:root .selfcheck-row,
html[data-theme]:root .mood-panel-influence,
html[data-theme]:root .telephony-provider,
html[data-theme]:root .attachment,
html[data-theme]:root .quick-actions,
html[data-theme]:root .list-item,
html[data-theme]:root .setting,
html[data-theme]:root .avatar-choice {
  border-color: var(--line);
}
html[data-theme]:root .telephony-provider[aria-pressed="true"],
html[data-theme]:root .selfcheck-row[data-verdict="rot"],
html[data-theme]:root .selfcheck-row[data-state="braucht_dich"],
html[data-theme]:root .telephony-step[data-done="yes"] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

/* ---- 3) Der Akzent gehört dem, was man antippen kann ----------------------------------- */
html[data-theme]:root .eyebrow,
html[data-theme]:root .status-label,
html[data-theme]:root .message-head,
html[data-theme]:root .message-media-caption time,
html[data-theme]:root .quick-actions span {
  color: var(--muted);
}
html[data-theme]:root .bottom-nav button.active,
html[data-theme]:root .text-button,
html[data-theme]:root .message-annotations summary,
html[data-theme]:root .annotation-head,
html[data-theme]:root .brain-link-arrow,
html[data-theme]:root a {
  color: var(--accent);
}
html[data-theme]:root .primary,
html[data-theme]:root .send {
  color: var(--theme-accent-ink, #0b2025);
}

/* ---- 4) Fehlt das Avatarbild, bleibt die Bühne ruhig statt kaputt ---------------------- */
html[data-theme]:root .avatar-stage .portrait:not([src]),
html[data-theme]:root .avatar-stage .portrait[src=""] {
  visibility: hidden;
}
html[data-theme]:root .avatar-stage .portrait {
  color: transparent;   /* kein Ersatztext neben dem Symbol für ein fehlendes Bild */
  font-size: 0;
}

/* ---- 5) Abstände auf das 4er-Raster, wo es ohne Umbau geht ----------------------------- */
html[data-theme]:root .eyebrow { margin: 12px 0 8px; }
html[data-theme]:root .setting { padding: 16px 0; }
html[data-theme]:root #app > .topbar { gap: 8px; }
html[data-theme]:root .topbar-actions { gap: 4px; }

/* Obere Leiste wieder einzeilig (Eigentümer 21.09.2026: "überladen und nun zweizeilig ... mache es wieder so
   dass es gut aussieht"). Seit der Ton-Knopf in der Leiste sitzt, durfte sie umbrechen. Statt umzubrechen
   werden die Knöpfe auf schmalen Handys etwas kleiner; die Reihenfolge und alle Knöpfe bleiben. */
html[data-theme]:root #app > .topbar:has(#soundButton),
html[data-theme]:root #app > .topbar .topbar-actions { flex-wrap: nowrap; }
html[data-theme]:root #app > .topbar:has(#soundButton) { --topbar-button: clamp(34px, 10.2vw, 44px); }
html[data-theme]:root #app > .topbar .topbar-identity { flex: 0 0 auto; overflow: hidden; }
html[data-theme]:root #app > .topbar .topbar-actions { flex: 0 0 auto; margin-left: auto; gap: clamp(1px, .8vw, 4px); }
html[data-theme]:root #app > .topbar .topbar-actions .icon-button,
html[data-theme]:root #app > .topbar #soundButton { flex: 0 0 var(--topbar-button); width: var(--topbar-button); height: var(--topbar-button); min-width: 0; padding: 0; }
html[data-theme]:root #app > .topbar .orders-shortcut { flex: 0 0 auto; min-height: 0; height: clamp(30px, 8.6vw, 36px); padding: 0 clamp(8px, 3vw, 14px); font-size: clamp(11.5px, 3.3vw, 13px); white-space: nowrap; }
@media (max-width: 340px) {
  html[data-theme]:root #app > .topbar:has(#soundButton) { padding-left: 12px; }
  html[data-theme]:root #app > .topbar .brand { font-size: 13px; letter-spacing: .06em; gap: 6px; }
}
/* Treffen-Einladung: Eine Kapsel ohne Text wird nie gezeigt. Der allgemeine Eigentümer-Mechanismus blendete sie
   bei jedem Laden kurz leer ein ("Einladung zeigen" ohne Einladung), bis die nächste Abfrage sie versteckte. */
#meetingInviteNotice:has(#meetingInviteNoticeText:empty){display:none}
/* Archivierte Auftraege deutlich grau hinterlegt (Eigentuemer 21.09.2026: "alles sieht gleich aus"). */
html[data-theme]:root #tasks .order-card.is-archived { opacity: 1; filter: grayscale(1); background: color-mix(in srgb, var(--muted) 16%, var(--bg)); border-style: dashed; }
html[data-theme]:root #tasks .order-card.is-archived strong { color: var(--muted); }
/* Handy-Vorschau 1:1: der Eintrag ist ein Link und soll aussehen wie die Knoepfe daneben. */
html[data-theme]:root #settings a.setting { display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: inherit; }

/* Eigentümer-Vorschau: bewusst klein, aber jederzeit sichtbare und deckende Rückkehr. */
.owner-preview-banner { position: sticky; top: 0; z-index: 24; margin: 0 12px 8px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--accent); border-radius: 12px; background: #10251f; color: var(--text); box-shadow: 0 8px 24px #0006; font-size: 12px; }
.owner-preview-banner button { flex: none; min-height: 34px; padding: 6px 10px; border-radius: 9px; background: var(--accent); color: #0b2425; font-weight: 650; }

/* Claude 25.09.2026: grosse Systemschrift / schmale Handys -- Kopfleiste, Avatar-Knopfreihe
   und Eingabezeile sind exakt auf 100% Systemschrift ausgelegt (nowrap + feste Breiten laut
   Eigentuemer-Vorgabe 21.09.2026). Bei vergroesserter Android-Systemschrift (text-size-adjust,
   ca. 115-130%) skaliert Chrome/WebView JEDEN Pixel-Wert zusaetzlich hoch, auch wenn die
   Buchstaben schon in px festgelegt sind -- Text lief links/rechts aus den Knoepfen
   ("Gast", "Begruessung", "Avatar einstellen") und der Sekunden-Zaehler wurde sofort
   abgeschnitten. Fix: diese engen Bedienelemente von der automatischen Textvergroesserung
   ausnehmen (der Chat-Inhalt bleibt unberuehrt, dort darf die Systemschrift wirken) und
   zusaetzlich robust schrumpfen statt ueberlaufen.
*/
html[data-theme]:root #app > .topbar,
html[data-theme]:root #app > .topbar *,
html[data-theme]:root #conversation .avatar-controls .pill,
html[data-theme]:root .composer .response-style,
html[data-theme]:root .composer .input-status {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Kopfleiste: Symbol-Knoepfe duerfen bei knappem Platz auf schmalen Handys kleiner werden
   (vorher nur bis 44px->34px vorgesehen; das reichte bei grosser Systemschrift nicht mehr),
   damit "Gast" und die Chat-Verlauf-Ikone nicht aus der Glaspille herauslaufen. */
html[data-theme]:root #app > .topbar:has(#soundButton) { --topbar-button: clamp(30px, 9vw, 44px); }
html[data-theme]:root #app > .topbar .topbar-actions { gap: clamp(1px, .5vw, 4px); }
html[data-theme]:root #app > .topbar .orders-shortcut { padding: 0 clamp(6px, 2.4vw, 14px); font-size: clamp(10.5px, 3vw, 13px); }
/* "Gast"/Identitaets-Knopf: bislang ohne Schrumpf-Regel -- lief bei knappem Platz ueber den
   rechten Bildschirmrand hinaus. Jetzt schrumpft er und zeigt bei Bedarf "…" statt eines
   wortlos abgeschnittenen Textes. */
html[data-theme]:root #app > .topbar #identityBadge {
  flex: 0 1 auto;
  min-width: 0;
  max-width: clamp(40px, 20vw, 90px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(10px, 3vw, 12px);
  padding: 4px 6px;
}
/* Sicherheitsnetz: sollte die Leiste trotzdem einmal zu voll werden, lieber sauber am
   Pillenrand abschneiden als über den Avatar/Inhalt hinausragen. */
html[data-theme]:root #app > .topbar { overflow: hidden; }
/* Avatar-Knopfreihe (Begruessung / Avatar einstellen / Wechseln): Schrift und Innenabstand
   etwas kleiner als die Theme-Vorgabe, damit auch bei groesserer Systemschrift auf schmalen
   Handys (~360-400px) alle drei Woerter lesbar bleiben, ohne dass die Reihe selbst umbricht. */
html[data-theme]:root #conversation .avatar-controls .pill {
  font-size: clamp(9.5px, 2.9vw, 13px);
  padding: 0 clamp(4px, 1.6vw, 8px);
  gap: 4px;
}
@media (max-width: 340px) {
  html[data-theme]:root #conversation .avatar-controls .pill { font-size: clamp(9px, 2.6vw, 12px); }
}
/* Eingabezeile: "Kurz/Ausgewogen/Ausfuehrlich"-Auswahl nahm zu viel Platz ein, sodass der
   Sekunden-Zaehler bei laufender Aufnahme ("… / 360 s") sofort auf "1 / 3…" abgeschnitten
   wurde. Auswahl auf ihren tatsaechlichen Platzbedarf begrenzen, dem Zaehler den Rest geben. */
html[data-theme]:root .composer .response-style,
html[data-theme]:root #conversation .response-style {
  flex: 0 0 auto;
  max-width: clamp(56px, 16vw, 92px);
  padding: 0 clamp(4px, 1.6vw, 8px);
  font-size: clamp(10px, 2.8vw, 12px);
}
html[data-theme]:root .composer .input-status {
  flex: 1 1 auto;
  min-width: 24px;
  max-width: none;
}
/* Portraet: Gesicht sichtbar halten, auch wenn die schwebende Glaspille (Buehne-Design) bei
   grosser Systemschrift minimal mehr Hoehe braucht -- Bildausschnitt etwas hoeher ansetzen. */
html[data-theme="buehne"]:root #conversation .avatar-stage .portrait,
html[data-theme="buehne"]:root #conversation .avatar-stage .avatar-video {
  object-position: center 22%;
}
/* Claude 04.10.2026 (Etappe 66, A-083 Knopfprüfung / B-079 Text nie abgeschnitten): Die obere Leiste bleibt einzeilig,
   alle Knöpfe und ihre Reihenfolge bleiben (Eigentümer 21.09.2026). Jeder Knopf hat jetzt aber mindestens 40×40 px
   Tippfläche. Auf schmalen Handys reicht die Breite dafür nicht mehr – statt den letzten Knopf („?“) am Rand
   abzuschneiden, lässt sich die Knopfreihe seitlich wischen. Das Markenzeichen bekommt eine 40 px hohe Tippfläche,
   ohne dass sich die Leiste verschiebt (Innenabstand + negativer Aussenabstand). */
html[data-theme]:root #app > .topbar:has(#soundButton) { --topbar-button: 40px; }
html[data-theme]:root #app > .topbar .topbar-actions { flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 2px; margin-right: -2px; scrollbar-width: none; overscroll-behavior-x: contain; }
html[data-theme]:root #app > .topbar .topbar-actions::-webkit-scrollbar { display: none; }
html[data-theme]:root #app > .topbar .orders-shortcut { height: 40px; }
html[data-theme]:root #app > .topbar .brand { padding-block: 9px; margin-block: -9px; }
html[data-theme]:root #app > .topbar .topbar-identity { overflow-x: clip; overflow-y: visible; }
/* Gibt es rechts noch Knöpfe, läuft die Reihe sanft aus (nur solange sie wischbar ist; scroll-gesteuert, ohne Skript). */
@supports (animation-timeline: scroll()) {
  html[data-theme]:root #app > .topbar .topbar-actions { animation: topbar-weitere linear both; animation-timeline: scroll(self inline); }
  @keyframes topbar-weitere { 0%, 96% { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); } 100% { -webkit-mask-image: none; mask-image: none; } }
}
/* Claude 05.10.2026 (E96, B-043): Bei vielen Avataren (mindestens 10) wird die Auswahl lang und scrollt im Dialog. Kopfzeile mit
   „Schliessen“ bleibt dabei oben im Bild, damit weder Schliessen noch der Wechsel-Knopf je aus dem Startfenster verschwinden. */
#avatarDialog .dialog-head { position: sticky; top: -22px; z-index: 2; margin: -22px -22px 12px; padding: 22px 22px 8px; background: var(--theme-dialog, #0f192a); }

/* Claude 23.10.2026 (Eigentümer, Handy-Ansicht: „wirkt alles verzerrt - die Punkte im Textfeld sind nicht nebeneinander
   sondern untereinander (Autonomie-Knopf) - auch ganz oben wird nicht alles angezeigt"). Gemessen bei 375 px: die Knopfzeile
   unter dem Textfeld war 4 px zu schmal (Autonomie rutschte in eine zweite Zeile), die Kopfzeile hatte 35 px zu viele Knöpfe
   (Hilfe-Knopf abgeschnitten). Schmale Bildschirme: Kopfzeile zeigt nur das Logo-Zeichen (Wortmarke weg), die Kopfknöpfe
   teilen sich die Breite (28-40 px), die Textfeld-Knöpfe bleiben in EINER Zeile und werden bei Bedarf etwas schmaler. */
/* Claude 24.10.2026 (Werkstatt touchziele-handy, B-079/A-083, 34 Touchziel-Befunde): Die Knöpfe der Eingabezeile
   schrumpften auf 32-40 px - unter dem Mindestmass 40 px (M19 48 px). Sie bleiben jetzt auf ihrer vollen Grösse
   (40/44/56 px je nach Vorlage); reicht die Breite nicht, wischt die Zeile seitlich statt einen Knopf zu verkleinern
   oder umzubrechen. Das Markenzeichen behält mindestens 40 px Breite als eigene Tippfläche.
   Claude 25.10.2026 (Werkstatt pruefung-handy-waechter-rot): Die Kopfzeile bleibt dagegen wie im Hauptstand seit dem
   23.10. (Knopfbreite aus dem Restplatz, 26-38 px) - der Eigentümer hat am 23.10. verlangt, dass oben alles im Bild ist
   (Wächter tools/test_aiona_kopfzeile_handy.mjs). Gemessen im Design «Bühne» bei 375 px: sechs Knöpfe à 40 px plus die
   Pille «Aufträge» brauchen 317 px, die Knopfreihe hat 241 px; mit 40-px-Knöpfen wären Handbuch und Selbstreparatur
   nur noch durch Wischen erreichbar. Beides zugleich ginge nur durch Ausblenden oder Kürzen einer Beschriftung. Vom
   Touchziel bleibt in der Kopfzeile: der Knopf «?» ist 40 px hoch (vorher so hoch wie breit, bei 375 px 28 px).
   Claude 25.10.2026 (Werkstatt zweige-gestrandet-2): Die Kopfzeilen-Regeln dieses Blocks hat der Hauptstand c7d42cc17 durch das Postfach-Kopfzeilen-Design ersetzt (40-px-Knoepfe im Raster, kein Wischen, Block «Postfach» unten) - die Kopfzeilen-Zeilen der Werkstatt sind damit abgedeckt; hier bleiben nur die Regeln der Eingabezeile (B-079). */
@media (max-width:429px){
  html:root #app #composer .composer-actions>div:first-child{flex-wrap:nowrap!important;gap:clamp(1px,1vw,5px)!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
  html:root #app #composer .composer-actions>div:first-child::-webkit-scrollbar{display:none}
  html:root #app #composer .response-style-menu{min-width:0;flex:0 1 auto}
}

/* Postfach: Hauptknöpfe bleiben direkt, Nebenfunktionen bei knappem Platz in «Mehr».
   N315: Logo, Verbindung und Identität stehen in derselben Kopfzeile. */
.topbar-more,.topbar-more-items{display:contents}
.topbar-more>#topbarMoreButton{display:none}
.topbar-actions #schnellzielButton{order:0}
.topbar-actions #workWorldButton{order:1}
.topbar-actions #soundButton{order:2}
.topbar-actions #ordersButton{order:3}
.topbar-actions #postfachButton{order:4}
.topbar-actions #chatsButton{order:5}
@media (min-width:651px){
  html[data-theme]:root #app>.topbar .brand{min-height:40px;padding-block:0;margin-block:0;box-sizing:border-box}
}
html[data-theme]:root #app>.topbar .topbar-actions{
  overflow:visible;animation:none;mask-image:none;-webkit-mask-image:none;
}
html[data-theme]:root #app>.topbar:has(#soundButton){align-items:center;gap:4px;min-height:52px}
html[data-theme]:root #app>.topbar .topbar-identity{flex-direction:row;align-items:center;gap:4px;flex-shrink:1;overflow:visible}
html[data-theme]:root #app>.topbar .topbar-status-row{flex:none;white-space:nowrap}
html[data-theme]:root #app>.topbar #identityBadge{min-width:40px;min-height:40px;padding:0 4px}
@media (max-width:650px){
  html[data-theme]:root #app>.topbar:has(#soundButton){
    --topbar-button:40px;display:grid;grid-template-columns:40px auto minmax(0,1fr);
    gap:0;align-items:center;height:auto;min-height:50px;padding:4px;
    width:calc(100% - 8px)!important;margin-inline:4px;overflow:visible;
  }
  html[data-theme]:root body:not(.avatar-expanded):not(.chat-expanded):not(.conversation-keyboard) #app:has(>main>#conversation:not(.hidden))>.topbar:has(#soundButton){margin-inline:0}
  html[data-theme]:root #app>.topbar .topbar-identity{display:contents}
  html[data-theme]:root #app>.topbar .brand{
    grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;padding:0;margin:0;font-size:0;letter-spacing:0;gap:0;
  }
  html[data-theme]:root #app>.topbar .brand img{width:28px;height:28px}
  html[data-theme]:root #app>.topbar .topbar-status-row{
    grid-column:2;grid-row:1;min-height:40px;gap:3px;padding:0;max-width:154px;overflow:visible;
  }
  html[data-theme]:root #app>.topbar .connection-status-slot{flex:0 1 auto}
  html[data-theme]:root #app>.topbar #identityBadge{
    min-width:40px;min-height:40px;max-width:96px;margin:0;padding:0 4px;
  }
  html[data-theme]:root #app>.topbar .topbar-actions{
    grid-column:3;grid-row:1;display:flex;justify-content:flex-end;align-items:center;
    gap:clamp(0px,calc((100vw - 380px)/10),2px);min-width:0;max-width:100%;
    padding:0;margin:0;overflow:visible;flex-wrap:nowrap;
  }
  html[data-theme]:root #app>.topbar .topbar-actions :is(.icon-button,.orders-shortcut,.handbuch-help-btn,.self-heal-help-btn),
  html[data-theme]:root #app>.topbar #topbarMoreButton{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;
    width:40px;height:40px;min-width:40px;min-height:40px;padding:0;margin:0;
    font-size:20px;box-sizing:border-box;
  }
  html[data-theme]:root #app>.topbar #ordersButton{font-size:0}
  html[data-theme]:root #app>.topbar #ordersButton::before{content:'\2637';font-size:23px}
  html[data-theme]:root #app>.topbar .topbar-more>#topbarMoreButton{display:none;cursor:pointer}
}
/* Der bestehende Menücontroller misst die Kopfbreite, auch in der schmalen Desktopspalte. */
/* N318: Ein absolut positioniertes Mehr-Menü darf auch in der Desktopspalte die Kopfzeile verlassen. */
html[data-theme]:root #app>.topbar:has(.topbar-more.is-compact){overflow:visible}

  html[data-theme]:root #app>.topbar .topbar-more.is-compact{display:block;position:relative;order:998;flex:0 0 40px}
  html[data-theme]:root #app>.topbar .topbar-more.is-compact>#topbarMoreButton{
    display:inline-flex;align-items:center;justify-content:center;position:relative;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;
  }
  html[data-theme]:root #app>.topbar .topbar-more.is-compact>.topbar-more-items{
    display:flex;position:absolute;right:0;top:calc(100% + 6px);z-index:40;
    gap:8px;padding:8px;border:1px solid var(--line);border-radius:14px;flex-wrap:wrap;width:250px;max-width:calc(100vw - 20px);
    background:var(--theme-menu-solid,#17110d);opacity:1;isolation:isolate;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 20px #0006;
  }
  html[data-theme]:root #app>.topbar .topbar-more.is-compact:not(.is-open)>.topbar-more-items{display:none}
  html[data-theme]:root #app>.topbar .topbar-more.is-compact.has-notice>#topbarMoreButton::after{
    content:'';position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--accent);
  }
  html[data-theme]:root #app>.topbar .topbar-more-items>.sw-update-bar{
    position:static;flex:1 0 100%;width:100%;height:auto;min-height:40px;max-height:none;padding:6px;white-space:normal;
  }
@media (max-width:420px){
  html[data-theme]:root #app>.topbar .topbar-status-row{max-width:60px}
  html[data-theme]:root #app>.topbar .connection-status-slot{max-width:10px;gap:0}
  html[data-theme]:root #app>.topbar .connection-status-slot:has(.status-chip:not([hidden])) .connection{display:none}
  html[data-theme]:root #app>.topbar .status-chip--kopf{padding:0;gap:0;max-width:10px}
  html[data-theme]:root #app>.topbar .status-chip--kopf .status-chip-text{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  html[data-theme]:root #app>.topbar #offline{font-size:0;padding:0}
  html[data-theme]:root #app>.topbar #offline::after{content:'!';font-size:12px}
}
/* N315: Ein Update bleibt als beschriftete Aktion im bestehenden Mehr-Menü erreichbar. */