/* DHS Business OS · Teil 3/3 (Mobile Untergrenzen und Korrekturen) — wird direkt nach dem vorherigen Teil geladen; Reihenfolge = Kaskade. */
/* =====================================================================
   8 · MOBIL: Schriftuntergrenze 12 px, Tabellen als Zeilenkarten, Umbruch statt Abschneiden
   ===================================================================== */
@media (max-width:1024px),(pointer:coarse){
  .content,.mobnav,.topbar{--t-micro:12px}
  .mobnav-label,.global-alarm-button strong{font-size:12px}
  .content :is(.dash360-pulsebar span,.dash360-pulsebar b,.dash-delta,.md-campaign > strong,.md-hero-line code,.md-channel b,.md-wa-metrics span,
    .md-wa-live,.md-health span,.md-kpi span,.ce-prow-name,.ce-prow-st,.sc-badge,.sig-wert-label,.sec-label,.tbl th,.ac-flow > span,.ac-ready,
    .ac-card > small,.ac-card-foot > span,.ac-card-foot .btn,.ac-inline label,.ac-preview p,.agent-inventory em,.agent-inventory span,
    .bos-brand-mono,.dash-marketing-make,.cagents-mode,.agent-skill-chips li,
    .ce-handoff-label,.wp-chips .dash-chip,.dp-status .dash-chip,.cal-cell-n,.cal-wd,.kal-wd,.lead-fu,.seg-n,.badge,.chip,.tag):not(.marc-home *):not(.aura-console *){font-size:12px}
  .content .md-kpi strong,.content .md-health strong{font-size:max(1.4rem,1em)}
  /* Ellipsen auf Hauptinformationen: lieber umbrechen */
  .content :is(.fc-bar-meta span,.sc-tgl,.dash-lab,.ce-jc-t,.md-campaign > strong,.agent-roster-name b){white-space:normal;text-overflow:clip;overflow:visible}
  .content .sc-toggle{flex-wrap:wrap}
  .content .sc-tgl{min-width:0}
}
/* Rechnungsliste am Telefon: Zeilenkarte statt Tabelle */
@media(max-width:680px){
  .content .rechnungsliste{display:block;overflow:visible;white-space:normal;border:0;min-width:0;width:100%}
  .content .rechnungsliste thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .content .rechnungsliste tbody{display:grid;gap:var(--s-2)}
  .content .rechnungsliste tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--s-3);padding:var(--s-3) var(--s-4);border:1px solid var(--line-soft);border-radius:var(--r);background:var(--bg-card)}
  .content .rechnungsliste td{display:block;padding:0;border:0;text-align:left!important;white-space:normal;min-width:0}
  .content .rechnungsliste td[data-label="Nr."]{grid-column:1;font-weight:600}
  .content .rechnungsliste td[data-label="Betrag"]{grid-column:2;grid-row:1;text-align:right!important;font:700 var(--t-body)/1.2 var(--bos-num);font-variant-numeric:tabular-nums}
  .content .rechnungsliste td[data-label="Kunde"]{grid-column:1 / -1;color:var(--ink)}
  .content .rechnungsliste td[data-label="Fällig"]{grid-column:1;color:var(--muted);font-size:var(--t-small)}
  .content .rechnungsliste td::before{content:none}
  .content .rechnungsliste td[data-label="Fällig"]::before{content:"fällig ";}
  .content .rechnungsliste td[data-label="Status"]{grid-column:2;grid-row:3;justify-self:end}
  .content .rechnungsliste td:last-child{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:flex-start;padding-top:var(--s-2);border-top:1px solid var(--line-soft);margin-top:var(--s-1)}
  .content .rechnungsliste tr.is-ueberfaellig{border-left:3px solid var(--bos-danger)}
  .content .rechnungsliste tr.is-faellig{border-left:3px solid var(--bos-warn)}
  .content .rechnungsliste tr td:first-child{box-shadow:none}
}
@media (max-width:1024px),(pointer:coarse){
  .content :is(.md-campaign strong,.md-actions strong,.md-actions small,.dash-ring-sub,.dash-seg-leg,.dash-stile-st,.dash-up,.dash-down,.dash-stile-foot,.dash-stile-foot span,.dash-marketing-stat small,.dash-marketing-stat em):not(.marc-home *){font-size:12px}
  .content :is(.dash-marketing-stat small,.dash-marketing-stat strong,.dash360-pulsebar span,.bos-zeile-titel,.bos-zeile-kontext,.md-wa-time){white-space:normal;text-overflow:clip;overflow:visible}
  .content .md-kpi strong{white-space:nowrap;overflow:visible;text-overflow:clip}
  .content .md-ads-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
  .content .nxoffice-flow button{min-width:44px}
}
@media(max-width:360px){.content .ce-pill,.content .ce-jc-when{white-space:normal}}
/* Weitere Finanztabellen (Fixkosten, Belege) am Telefon als Zeilen */
@media(max-width:680px){
  .content .tbl-mini:not(.rechnungsliste){display:block;overflow:visible;white-space:normal;border:0;min-width:0;width:100%}
  .content .tbl-mini:not(.rechnungsliste) tbody{display:grid;gap:var(--s-2)}
  .content .tbl-mini:not(.rechnungsliste) tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--s-3);align-items:center;padding:var(--s-3) var(--s-4);border:1px solid var(--line-soft);border-radius:var(--r);background:var(--bg-card)}
  .content .tbl-mini:not(.rechnungsliste) td{display:block;padding:0;border:0;white-space:normal;min-width:0;text-align:left}
  .content .tbl-mini:not(.rechnungsliste) td:first-child{grid-column:1;font-weight:600;color:var(--ink)}
  .content .tbl-mini:not(.rechnungsliste) td[style*="right"]{grid-column:2;grid-row:1;text-align:right;font:700 var(--t-body)/1.2 var(--bos-num);font-variant-numeric:tabular-nums}
  .content .tbl-mini:not(.rechnungsliste) td.muted{font-size:var(--t-small)}
  .content .tbl-mini:not(.rechnungsliste) td:not(:first-child):not([style*="right"]):not(.row-actions-cell){grid-column:1 / -1}
  .content .tbl-mini:not(.rechnungsliste) td.row-actions-cell{grid-column:2;justify-self:end}
}
@media (max-width:1024px),(pointer:coarse){
  .content :is(code,.dash-num,.ws-number):not(.marc-home *):not(.aura-console *){font-size:max(12px,1em)}
}
@media (max-width:640px){
  .content .nxoffice :is(span,small,button,p,li):not(h1 *):not(h2 *):not(h3 *):not(svg *){font-size:max(12px,.86em)}
  .content .ce-pill{max-width:100%;flex-wrap:wrap}
  .content .dash-hint{min-width:0;max-width:100%;overflow-wrap:break-word;white-space:normal}
}
@media (max-width:640px){
  .content .nxoffice :is(.nxoffice-area-link,.nxoffice-control,.nxoffice-flow button,.nxoffice-flow span,.nxoffice-person-detail strong,.nxoffice-person-detail span,.nxoffice-step-index){font-size:12px!important}
  .content .nxoffice :is(.nxoffice-area-link,.nxoffice-control){min-height:44px}
}

/* Mobil: Kennzahlen zweispaltig, Agentenkarten als Fokus-Leisten (eine Karte, seitlich wischen) */
@media(max-width:640px){
  .content .fc-kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-4)}
  .content .fc-kpi .fc-wert{font-size:var(--t-h3)}
  .content .fc-grund{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .content :is(.ac-grid,.agent-center-core){display:flex!important;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--s-4));padding:2px var(--s-4) var(--s-3);scrollbar-width:none;grid-template-columns:none}
  .content :is(.ac-grid,.agent-center-core)::-webkit-scrollbar{display:none}
  .content :is(.ac-grid,.agent-center-core) > *{flex:0 0 86%;scroll-snap-align:start;min-width:0}
}
@media(max-width:640px){.content :is(.ac-grid,.agent-center-core){align-items:flex-start}}

/* Fixierte Kopfleiste: Sprungziele und Fokus landen nie darunter */
.content :is(button,a[href],summary,input,select,textarea,[tabindex]:not([tabindex="-1"])){scroll-margin-top:96px;scroll-margin-bottom:24px}
@media(max-width:860px){.content :is(button,a[href],summary,input,select,textarea,[tabindex]:not([tabindex="-1"])){scroll-margin-top:calc(84px + env(safe-area-inset-top));scroll-margin-bottom:calc(84px + env(safe-area-inset-bottom))}}
/* Agentenbüro-Schritte mobil: ganze Wörter, seitlich wischbar statt zerbrochen */
@media(max-width:640px){
  .content .nxoffice .nxoffice-flow{display:flex!important;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .content .nxoffice .nxoffice-flow::-webkit-scrollbar{display:none}
  .content .nxoffice .nxoffice-flow > *{flex:0 0 auto;width:auto;scroll-snap-align:start}
  .content .nxoffice :is(.nxoffice-flow span,.nxoffice-roster-role,.nxoffice-roster-name){overflow-wrap:normal;word-break:keep-all;hyphens:none;white-space:nowrap}
}
@media(max-width:640px){.content .nxoffice :is(.nxoffice-roster-name,.nxoffice-demo-label,.nxoffice-room-count,.nxoffice-roster-role,.nxoffice-heading p){font-size:12px!important}}
/* Telefon quer: Höhe ist knapp — Kopf und Bereichsleiste verdichten, Ziele bleiben 44 px */
@media(max-width:960px) and (max-height:500px){
  .topbar{padding-top:4px;padding-bottom:4px}
  .bos-unterbereiche-titel{display:none}
  .bos-unterbereiche{margin-bottom:var(--s-2)}
  .bos-unterbereiche-liste{padding-bottom:4px}
  .mobnav-item{min-height:44px;flex-direction:row;gap:6px}
}
@media (max-width:1180px),(pointer:coarse){
  .content .nxoffice :is(.nxoffice-roster-name,.nxoffice-roster-role,.nxoffice-demo-label,.nxoffice-room-count,.nxoffice-room-head span,.nxoffice-handoff-caption span,.nxoffice-heading p){font-size:12px!important}
}
@media (max-width:1180px),(pointer:coarse){
  .content .nxoffice :is(.nxoffice-roster-name,.nxoffice-roster-role){white-space:nowrap;overflow-wrap:normal;word-break:keep-all;hyphens:none}
  .content .nxoffice .nxoffice-roster{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
}
@media (max-width:1024px),(pointer:coarse){
  .content .nxoffice .nxoffice-flow{display:flex!important;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .content .nxoffice .nxoffice-flow::-webkit-scrollbar{display:none}
  .content .nxoffice .nxoffice-flow > *{flex:0 0 auto;width:auto;scroll-snap-align:start}
  .content .nxoffice :is(.nxoffice-flow span,.nxoffice-flow button,.nxoffice-mission-top span,.nxoffice-area-link,.nxoffice-step-index,.nxoffice-person-detail span,.nxoffice-activity-label,.nxoffice-activity li,.nxoffice-next,.nxoffice-footer,.nxoffice-mission-copy p){font-size:12px!important}
  .content .nxoffice .nxoffice-flow span{white-space:nowrap;overflow-wrap:normal;word-break:keep-all;hyphens:none}
}

/* Desktop: Marketing-Labels umbrechen statt abschneiden */
.content .dash-marketing-stat small{white-space:normal;overflow:visible;text-overflow:clip;font-size:11px}
.content .md-wa-time{white-space:normal;overflow:visible;text-overflow:clip}

/* Pinselstrich unter Seitentiteln ragt unter die Zeile: Platz schaffen, damit er die Unterzeile nicht kreuzt */
.content :is(h1,h2):has(> .brush):not(.marc-home *){padding-bottom:.3em}

/* Alarmzentrale mobil: Statuspunkt neben dem Text statt allein auf einer Zeile */
@media(max-width:720px){
  .content .ops-control-strip{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px;row-gap:4px}
  .content .ops-control-strip .ops-last{grid-column:2;width:auto;margin-left:0}
}

/* Agenten-Übergabe mobil: zwei Zeilen à zwei Schritte, damit „Deine Freigabe“ bei 12px nicht abgeschnitten wird */
@media(max-width:680px){
  .content .ac-flow{grid-template-columns:auto minmax(12px,1fr) auto;row-gap:10px;column-gap:8px;padding:12px 14px;overflow:visible}
  .content .ac-flow>i:nth-of-type(2){display:none}
  .content .ac-flow small{grid-column:1/-1;text-align:left}
}

/* Palette „hell“: --lime ist dort dunkelgrün, aktive Umschalter brauchen helle Schrift, Lime-Schrift auf hellem Grund wird dunkelgrün (Muster aus app-nexus-paletten.css) */
:root[data-nexus-palette="hell"] .content .sc-tgl.is-on{color:#FFFFFF}
:root[data-nexus-palette="hell"] .content :is(.md-hero code,.md-section-head code){color:var(--lime)}

/* AURA-Kugel mobil: Startplatz liegt über der unteren Leiste (app.css: 64px + 12px + Safe Area, Größe bis 74px).
   Am Seitenende genau diesen Platz freihalten, damit nichts dauerhaft unter ihr liegt. Reines Layout, AURA-Seite ausgenommen. */
@media(max-width:860px){
  .content:not(:has(.marc-home)){padding-bottom:calc(64px + 12px + 74px + 16px + env(safe-area-inset-bottom))}
}

/* Desktop: Metadaten bleiben bewusst 11px; was darunter lag (9–10,9px), wird auf 11px angehoben.
   Nur Desktop mit Maus: die Mobilschicht (≤1024px oder Touch) behält ihre 12px-Untergrenze. */
@media (min-width:1025px) and (pointer:fine){
  .content :is(.dash-ring-sub,.dash-stile-st,.dash-marketing-make,.dash-marketing-health .dash-num,.md-channel>b,.md-wa-metrics span,.md-wa-flow-step i,.ce-prow-st,.agent-inventory em,.ac-ready,.ac-inline label,.agent-skill-chips li,.nxoffice-room-count,.nxoffice-roster-role,.nxoffice-mission-top span,.nxoffice-activity-label,.nxoffice-activity li span,.nxoffice-footer span):not(.marc-home *){font-size:11px}
}

/* Ganze Wörter statt Silbenbruch: Spalten und Knöpfe bekommen den Platz, den
   ihr längstes Wort braucht (Leads-Anker „unbeantwortet“, Social-Umschalter bei 320 px). */
@media(min-width:721px){ .content .lead-row{grid-template-columns:7.5em minmax(0,1fr) auto} }
@media(max-width:380px){ .content .sc-toggle .sc-tgl{padding:0 6px;font-size:13px;letter-spacing:0} }
@media(max-width:480px){ .content .dash-sec-h{flex-wrap:wrap} .content .dash-sec-h > .dash-hint{flex:1 1 100%;max-width:none} }
/* Sehr schmal: die erste Zelle (Bezeichnung) bekommt die ganze Kartenbreite, Betrag/Aktionen darunter. */
@media(max-width:380px){ .content .tbl-mini:not(.rechnungsliste) td:first-child{grid-column:1 / -1} .content .tbl-mini:not(.rechnungsliste) td[style*="right"]{grid-row:auto;grid-column:1;text-align:left} }
/* app.css schiebt mobil den Zähler-Link in Spalte 2 – gemeint ist das Zähler-Raster. In der
   Outreach-Karte erzeugte das eine zweite Spalte und brach Firmennamen mitten im Wort. */
.content .outreach-item .outreach-counter-action{grid-column:auto}