/* ============================================================================
   common/portal-mobile-admin.css  ·  fs96
   Mobil-Nacharbeit AUSSCHLIESSLICH fuer das ADMIN-Portal.

   LADEREIHENFOLGE: Diese Datei muss NACH common/portal-mobile.css stehen
   (in admin/index.html also nach Zeile 42). Sie ergaenzt die gewachsene
   Mobil-Schicht, sie ersetzt sie nicht.

   WARUM SIE NOETIG IST — die Kurzfassung:
   portal-mobile.css schreibt fuer das Admin-Portal eine ganze Reihe Regeln,
   die im Betrieb NIE greifen, weil portal-v87-fixes.css / portal-v93-
   professional.css / portal-facelift.css spaeter im Layer-Cake mit HOEHERER
   Spezifitaet dasselbe anders setzen. Beispiele (alle am Geraet nachgemessen):
     · Drawer-Reiter sollen 50px hoch sein  -> v93 zwingt sie auf 36px
       (Sieger: `...admin-main-nav:not(:hover):not(:focus-within) .view-btn`, 1·4·2
        schlaegt portal-mobile 1·3·4)
     · Unter-Navigation soll eine WAAGERECHTE Segment-Leiste sein -> v87-fixes
       zwingt `flex-direction: column` (1·5·2 schlaegt 1·4·4) -> 141px hohe
       Leiste ueber dem Inhalt
     · Logo soll in der Kopfzeile verschwinden -> v93 `...>.header-content>.logo`
       (1·3·3) schlaegt portal-mobile (1·2·3) -> Logo bleibt stehen
   Darum sind die Selektoren hier bewusst schwer (Klassen doppelt genannt):
   sie muessen die Spezifitaet der Bestandsregeln ERREICHEN, dann entscheidet
   die Ladereihenfolge zu unseren Gunsten.

   ALLES ist auf `#dashboard-view` / die Admin-Bauteile gescoped. Bauteile auf
   Body-Ebene (Fenster, Benachrichtigungen, Insights-Menue) tragen den Waechter
   `body:has(#dashboard-view:not(.talent-shell))` — damit kann nichts ins
   Talent-Portal lecken, selbst wenn die Datei dort versehentlich landet.

   MASSSTAB: Tippziel mind. 44x44pt (Apple), Schrift mind. 12px, kein
   waagerechtes Scrollen der ganzen Seite, feste Leisten mit Safe-Area.
   ============================================================================ */


/* ═══════════════════════════════════════════════════════════════════════════
   A · 769–900px: DIE NAVIGATION IST DORT NICHT BEDIENBAR
   Gemessen bei 769 / 820 / 834 / 900px (iPad Air + iPad Pro 11" HOCHFORMAT,
   iPhone im QUERFORMAT): `.admin-main-nav` ist 25px breit, position:fixed,
   overflow:hidden — die Icons sind auf 1px Inhaltsbreite geklemmt, es ist
   NICHTS sichtbar und NICHTS anklickbar. Ein Hamburger existiert dort nicht
   (portal-mobile blendet ihn nur bis 768px ein). Der Inhalt liegt zudem unter
   dem Splitter (Abschnitt beginnt bei left:0).
   Ursache: `width/max-width: var(--tt-sidebar-w)` (v93, 1·2·3) schlaegt die
   eigentlich gemeinte Icon-Leiste `flex-basis: 64px` (v93 @max-900, 1·1·3);
   `--tt-sidebar-w` ist in diesem Band nicht gesetzt -> width:auto -> 25px.

   Loesung: dasselbe Hamburger-Drawer wie unter 768px, nur fuer 769–900px.
   Die Klick-Verdrahtung macht bereits common/mobile-nav.js (breitenunabhaengig).
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 900px) {

  /* Seitenleiste -> Links-Drawer. KEIN transform (sonst wird die fixe
     Segment-Leiste mitgezogen — dieselbe Falle wie in portal-mobile V228aj). */
  html body #dashboard-view .admin-main-nav.admin-main-nav.admin-main-nav {
    position: fixed !important;
    top: var(--tt-header-h, 64px) !important;
    bottom: auto !important;
    left: -400px !important;
    right: auto !important;
    width: 82% !important;
    min-width: 0 !important;
    max-width: 340px !important;
    height: calc(100dvh - var(--tt-header-h, 64px)) !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 12px 10px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
    border: 0 !important;
    border-right: .5px solid #e8eaed !important;
    border-radius: 0 !important;
    box-shadow: 2px 0 24px rgba(16, 24, 40, .18) !important;
    transform: none !important;
    transition: left .24s cubic-bezier(.4, 0, .2, 1) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 4000 !important;
  }
  html.tt-drawer-open body #dashboard-view .admin-main-nav.admin-main-nav.admin-main-nav {
    left: 0 !important;
  }

  /* Inhalt: kein Platzhalter mehr fuer die (jetzt schwebende) Leiste */
  html body #dashboard-view main > .admin-main-section.admin-main-section {
    margin-left: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* Hamburger + Reiter-Titel in die Kopfzeile (mobile-nav.js haengt sie ein,
     portal-mobile blendet sie nur <=768px ein). */
  html body #dashboard-view header .header-content {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    position: relative;
    z-index: 4001 !important;
  }
  html body #dashboard-view header .header-content .tt-navburger {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    /* fs102: 44 statt 46 — weiter unten stand ohnehin schon 44 mit !important,
       die 46 waren wirkungslos. Ein Wert, eine Stelle. */
    width: 44px; height: 44px; flex: 0 0 auto;
    border: 0; background: transparent; color: #111827;
    border-radius: 11px; padding: 0; margin: 0 6px 0 -2px; cursor: pointer;
  }
  html body #dashboard-view header .header-content .tt-navburger:active { background: rgba(17, 24, 39, .07); }
  html body #dashboard-view header .header-content .tt-navtitle {
    display: inline-block !important;
    flex: 1 1 auto; min-width: 0;
    font-size: 19px; font-weight: 600; color: #111827; letter-spacing: -.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html body #dashboard-view header .header-content .header-actions { flex: 0 0 auto; margin-left: auto; }

  /* Reiter im Drawer: Zeile mit Icon + vollem Label, 48pt hoch */
  html body #dashboard-view .admin-main-nav.admin-main-nav .view-btn.view-btn.view-btn {
    flex: 0 0 auto !important;
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    height: auto !important; min-height: 48px !important;
    flex-direction: row !important; align-items: center !important;
    justify-content: flex-start !important; text-align: left !important;
    gap: 14px !important;
    margin: 0 !important; padding: 11px 16px 11px 18px !important;
    border-radius: 12px !important;
    background: transparent !important; color: #374151 !important;
    white-space: nowrap !important;
  }
  html body #dashboard-view .admin-main-nav.admin-main-nav .view-btn.view-btn.view-btn.active {
    background: #111827 !important; color: #ffffff !important;
  }
  html body #dashboard-view .admin-main-nav.admin-main-nav .view-btn.view-btn.view-btn .nav-icon,
  html body #dashboard-view .admin-main-nav.admin-main-nav .view-btn.view-btn.view-btn .nav-icon svg {
    width: 22px !important; height: 22px !important; flex: 0 0 auto !important; margin: 0 !important;
  }
  html body #dashboard-view .admin-main-nav.admin-main-nav .view-btn.view-btn.view-btn .nav-label {
    display: inline !important; opacity: 1 !important;
    width: auto !important; max-width: none !important;
    font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important;
    letter-spacing: normal !important;
    white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important;
    text-align: left !important; margin: 0 !important;
  }

  /* Untergruppen bei OFFENEM Drawer eingerueckt darunter */
  html.tt-drawer-open body #dashboard-view .admin-main-nav.admin-main-nav .admin-nav-subgroup.admin-nav-subgroup.is-active-parent.is-active-parent {
    position: static !important;
    display: flex !important; flex-direction: column !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: auto !important; height: auto !important; max-height: none !important;
    gap: 2px !important; margin: 0 !important; padding: 2px 0 6px !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    overflow: visible !important; z-index: auto !important;
  }
  html.tt-drawer-open body #dashboard-view .admin-main-nav.admin-main-nav .admin-nav-subgroup.is-active-parent.is-active-parent .admin-nav-subitem.admin-nav-subitem {
    flex: 0 0 auto !important;
    width: 100% !important; max-width: none !important;
    height: auto !important; min-height: 44px !important;
    flex-direction: row !important; align-items: center !important;
    justify-content: flex-start !important; text-align: left !important;
    gap: 12px !important; margin: 0 !important; padding: 9px 16px 9px 34px !important;
    border-radius: 10px !important;
    background: transparent !important; color: #5a6473 !important; white-space: nowrap !important;
  }
  html.tt-drawer-open body #dashboard-view .admin-main-nav.admin-main-nav .admin-nav-subgroup.is-active-parent.is-active-parent .admin-nav-subitem.admin-nav-subitem.active {
    background: rgba(17, 24, 39, .06) !important; color: #111827 !important;
  }
  html.tt-drawer-open body #dashboard-view .admin-main-nav.admin-main-nav .admin-nav-subgroup.is-active-parent.is-active-parent .admin-nav-subitem .nav-label {
    display: inline !important; opacity: 1 !important; font-size: 14px !important; font-weight: 500 !important;
  }

  /* Verdunklung hinter dem Drawer (mobile-nav.js legt .tt-navbackdrop an).
     fs96: `.tt-navbackdrop` und `html.tt-drawer-open` gehoeren BEIDEN Portalen —
     mobile-nav.js ist gemeinsam genutzt. Ohne Waechter haette diese Datei dem
     Talent-Portal im Band 769–900px die Verdunklung und `overflow: hidden`
     mitgegeben. Darum auch hier `body:has(#dashboard-view:not(.talent-shell))`. */
  html body:has(#dashboard-view:not(.talent-shell)) .tt-navbackdrop {
    position: fixed; inset: 0; background: rgba(17, 24, 39, .45);
    z-index: 3999; opacity: 0; visibility: hidden; transition: opacity .2s;
  }
  html.tt-drawer-open body:has(#dashboard-view:not(.talent-shell)) .tt-navbackdrop {
    opacity: 1; visibility: visible;
  }
  html.tt-drawer-open:has(#dashboard-view:not(.talent-shell)),
  html.tt-drawer-open body:has(#dashboard-view:not(.talent-shell)) {
    overflow: hidden !important;
  }

  /* Logo raus — sonst nimmt es dem Reiter-Titel den Platz */
  html body #dashboard-view > .container > header > .header-content > img.logo.logo,
  html body #dashboard-view > .container > header > .header-content > .logo.logo {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   B · <=768px: DRAWER-REITER AUF TIPPZIEL-MASS
   Gemessen: 309x36px. portal-mobile will 50px, verliert aber gegen
   `html body #dashboard-view .admin-main-nav:not(:hover):not(:focus-within) .view-btn`
   (v93, 1·4·2) — dort steht `min-height: var(--tt-nav-item-h, 36px)`.
   Unsere 1·5·2 erreicht mehr und laedt spaeter.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html body #dashboard-view .admin-main-nav.admin-main-nav .view-btn.view-btn.view-btn {
    min-height: 48px !important;
    height: auto !important;
    padding: 11px 16px 11px 18px !important;
  }
  html body #dashboard-view .admin-main-nav.admin-main-nav .view-btn.view-btn.view-btn .nav-label {
    font-size: 15px !important;
  }
  /* Chat-/Kalender-Zaehler im Drawer nicht ueber das Label schieben */
  html body #dashboard-view .admin-main-nav.admin-main-nav .view-btn.view-btn .ttchat-nav-badge {
    position: static !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }
  /* Unterpunkte IM offenen Drawer: portal-mobile gibt ihnen 42px */
  html.tt-drawer-open body #dashboard-view .admin-main-nav.admin-main-nav .admin-nav-subgroup.is-active-parent.is-active-parent .admin-nav-subitem.admin-nav-subitem {
    min-height: 44px !important;
    height: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   C · <=900px: UNTER-NAVIGATION — 141px hohe Leiste ueber dem Inhalt
   Gemessen (393pt, Reiter „Rechnungen"): die fixe Segment-Leiste ist 141px
   hoch, weil ihre drei Punkte UNTEREINANDER stehen; der Abschnitt haelt aber
   nur 62px Abstand frei -> Ueberschrift „Rechnungen" + Unterzeile liegen
   komplett unter der Leiste. Dasselbe bei Vertraege (4 Punkte) und Stammdaten.
   Ursache: `flex-direction: column !important` aus portal-v87-fixes.css
   (`html body #dashboard-view .admin-main-nav:not(:hover):not(:focus-within)
     .admin-nav-subgroup.is-active-parent`, 1·5·2) schlaegt portal-mobile (1·4·4).
   Loesung: das war schon immer als WAAGERECHTE Segment-Leiste gedacht — also
   Zeile erzwingen, Tippziel 44pt, und der Abschnitt bekommt den passenden
   Abstand (44 + 2x8 Innenabstand + 1px Linie = 61px, wir geben 72px Luft).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  html:not(.tt-drawer-open) body #dashboard-view .admin-main-nav.admin-main-nav .admin-nav-subgroup.admin-nav-subgroup.is-active-parent.is-active-parent {
    position: fixed !important;
    top: var(--tt-header-h, 64px) !important;
    left: 0 !important; right: 0 !important; bottom: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    margin: 0 !important;
    padding: 8px 12px 8px !important; /* fs102: hier stand unten env(safe-area-inset-LEFT) — Vertipper, folgenlos, aber falsch */
    background: #ffffff !important;
    border: 0 !important; border-bottom: 1px solid #e8eaed !important;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .05) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    z-index: 1100 !important;
  }
  html:not(.tt-drawer-open) body #dashboard-view .admin-main-nav.admin-main-nav .admin-nav-subgroup.is-active-parent.is-active-parent::-webkit-scrollbar { display: none !important; }

  html:not(.tt-drawer-open) body #dashboard-view .admin-main-nav.admin-main-nav .admin-nav-subgroup.is-active-parent.is-active-parent .admin-nav-subitem.admin-nav-subitem {
    flex: 0 0 auto !important;
    width: auto !important; min-width: max-content !important; max-width: none !important;
    height: auto !important; min-height: 44px !important;
    flex-direction: row !important; align-items: center !important; justify-content: center !important;
    gap: 7px !important;
    margin: 0 !important; padding: 8px 14px !important;
    border-radius: 10px !important;
    background: #f3f4f6 !important; color: #374151 !important;
    white-space: nowrap !important;
  }
  html:not(.tt-drawer-open) body #dashboard-view .admin-main-nav.admin-main-nav .admin-nav-subgroup.is-active-parent.is-active-parent .admin-nav-subitem.admin-nav-subitem.active {
    background: #151b2a !important; color: #ffffff !important;
  }
  html:not(.tt-drawer-open) body #dashboard-view .admin-main-nav.admin-main-nav .admin-nav-subgroup.is-active-parent.is-active-parent .admin-nav-subitem .nav-label {
    display: block !important; opacity: 1 !important;
    width: auto !important; max-width: none !important;
    font-size: 13px !important; font-weight: 600 !important; white-space: nowrap !important;
  }
  html:not(.tt-drawer-open) body #dashboard-view .admin-main-nav.admin-main-nav .admin-nav-subgroup.is-active-parent.is-active-parent .admin-nav-subitem .nav-icon,
  html:not(.tt-drawer-open) body #dashboard-view .admin-main-nav.admin-main-nav .admin-nav-subgroup.is-active-parent.is-active-parent .admin-nav-subitem .nav-icon svg {
    width: 16px !important; height: 16px !important; flex: 0 0 auto !important;
  }

  /* Abstand fuer die Leiste — 62px reichten fuer die (falsch) gestapelte
     Variante nicht und reichen fuer die richtige Zeile knapp; 72px gibt Luft. */
  html body #dashboard-view:has(.admin-main-nav .admin-nav-subgroup.is-active-parent) .admin-main-section.admin-main-section {
    padding-top: 72px !important;
  }
  /* Bei offenem Drawer wandert die Untergruppe IN den Drawer -> Abstand weg */
  html.tt-drawer-open body #dashboard-view:has(.admin-main-nav .admin-nav-subgroup.is-active-parent) .admin-main-section.admin-main-section {
    padding-top: 24px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   D · <=768px: KOPFZEILE — Logo verdraengt den Reiter-Titel
   Gemessen (393pt): ☰ 42px | Titel 107px (auf „Rech…" gekuerzt) | LOGO 118px |
   Glocke+Profil 94px. portal-mobile blendet das Logo aus, verliert aber gegen
   `html body #dashboard-view > .container > header > .header-content > .logo`
   (v93, 1·3·3). Mit 1·4·4 gewinnen wir -> der Titel bekommt ~118px zurueck.
   Gilt bis 900px, damit iPad-Hochformat dieselbe Kopfzeile bekommt.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  html body #dashboard-view > .container > header > .header-content > img.logo.logo,
  html body #dashboard-view > .container > header > .header-content > .logo.logo {
    display: none !important;
  }
  html body #dashboard-view header .header-content .tt-navtitle {
    font-size: 18px !important;
    max-width: none !important;
  }
  /* Gemessen bei 744pt (iPad mini hoch): ☰, Titel und die Aktionsknoepfe lagen
     alle drei zwischen x=319 und x=425 UEBEREINANDER — die Kopfzeile war
     mittig zentriert und der Titel 0px hoch. Links anschlagen, Titel dehnen,
     Aktionen nach rechts. */
  html body #dashboard-view header .header-content.header-content {
    display: flex !important;
    flex-direction: row !important;   /* bei 744pt war es `column` -> ☰, Titel und
                                         Knoepfe standen mittig UEBEREINANDER */
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 4px !important;
  }
  html body #dashboard-view header .header-content.header-content .tt-navtitle {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    align-self: center !important;
  }
  html body #dashboard-view header .header-content.header-content .header-actions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    align-items: center !important;
  }
  /* Kopfzeile mit Safe-Area links/rechts (Querformat mit Notch) */
  html body #dashboard-view > .container > header {
    padding-left: calc(14px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(14px + env(safe-area-inset-right, 0px)) !important;
  }
  /* Glocke + Profilknopf auf Tippziel */
  html body #dashboard-view header .header-actions .tt-notif-toggle-btn.tt-notif-toggle-btn,
  html body #dashboard-view header .header-actions .tt-admin-profile.tt-admin-profile > .tt-admin-profile-btn.tt-admin-profile-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    box-sizing: border-box !important;
  }
  html body #dashboard-view header .header-actions .tt-admin-profile.tt-admin-profile > .tt-admin-profile-menu {
    right: 8px !important;
    left: auto !important;
    width: min(280px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
  }
  html body #dashboard-view header .header-actions .tt-admin-profile .tt-admin-profile-menu .item {
    min-height: 44px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   E · <=768px: UEBERSICHT — DIE FILTERLEISTE KLAPPT IN SICH ZUSAMMEN
   Das ist der Fehler, den der Gruender zuerst sieht („geht schon im dashboard
   los"). Gemessen (393pt): `.dash-toolbar` ist 16px HOCH, jedes
   `label.dash-control` ist 0px hoch — „Waehrung", „Zeitraum" und „Talent"
   liegen auf 8px Abstand uebereinander, ihre drei 36px hohen Auswahlfelder
   ueberlappen sich zu einem Stapel. Nur „Alle Talents" ist lesbar.
   Ursache: portal-mobile V125b macht die Leiste zur SPALTE (+ min-height:0),
   portal-mobile V228n setzt danach `flex: 1 1 0` — in einer Spalte heisst
   flex-basis:0 aber HOEHE 0. V228n war fuer die ZEILE des Talent-Portals
   (#overview-panel) gedacht und hat #overview-admin-section nur mitgenommen.
   Loesung: zurueck zum V125b-Entwurf — gestapelte Zeilen „Label: Wert".
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html body #dashboard-view #overview-admin-section .dash-toolbar.dash-toolbar {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important; max-width: 100% !important;
    height: auto !important; min-height: 0 !important;
    margin: 14px 0 0 !important;
  }
  /* Der eigentliche Fix: flex-basis auto + Inhaltshoehe statt 0 */
  html body #dashboard-view #overview-admin-section .dash-toolbar.dash-toolbar > label.dash-control.dash-control {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    height: auto !important; min-height: 44px !important;
    margin: 0 !important;
  }
  html body #dashboard-view #overview-admin-section .dash-toolbar.dash-toolbar > label.dash-control.dash-control.hidden { display: none !important; }
  html body #dashboard-view #overview-admin-section .dash-toolbar.dash-toolbar > label.dash-control.dash-control > span:first-child {
    flex: 0 0 84px !important;
    margin: 0 !important;
    font-size: 12px !important;
    letter-spacing: .3px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  html body #dashboard-view #overview-admin-section .dash-toolbar.dash-toolbar > label.dash-control.dash-control > select,
  html body #dashboard-view #overview-admin-section .dash-toolbar.dash-toolbar > label.dash-control.dash-control > input {
    flex: 1 1 auto !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    height: 44px !important; min-height: 44px !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    font-size: 16px !important;   /* 16px = kein iOS-Auto-Zoom beim Fokus */
    line-height: 1.2 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   F · <=768px: UEBERSCHRIFTEN LINKSBUENDIG
   `@media (max-width:768px){ .card-header h1 { text-align:center } }` aus
   ui.css zentriert JEDE Admin-Ueberschrift auf dem Handy — als einziges
   Element der Seite. Sieht aus wie ein Fehler und ist einer.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html body #dashboard-view .admin-main-section .card-header h1,
  html body #dashboard-view .admin-main-section .card-header--with-search h1,
  html body #dashboard-view .admin-main-section .card-header .card-header-subtitle,
  html body #dashboard-view .admin-main-section .card-header > div > p {
    text-align: left !important;
  }
  html body #dashboard-view .admin-main-section .card-header h1 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    overflow-wrap: break-word !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   G · <=640px: VERSTECKTE SPALTEN — HIER LIEGT DIE HALBE BEDIENBARKEIT
   portal-facelift.css @(max-width:640px):
     `.admin-overview-list .admin-data-table th:nth-child(n+3),
      .admin-overview-list .admin-data-table td:nth-child(n+3){display:none}`
   Auf JEDEM Handy (393pt und 440pt gemessen) verschwinden dadurch:
     · Kooperationen: Status, Budget, Stand, AKTIONEN („Oeffnen"/„Bearbeiten")
     · Stammdaten/Talents: Status, Account, AKTIONEN („Bearbeiten")
     · Stammdaten/Brands: Talents, Brutto, Netto Mgmt, Ø Deal, Letzte
     · Buchungen: Brand, Talent, Art, Betrag, Netto Mgmt, Status
   Es bleiben zwei Spalten uebrig und keine einzige Aktion. Genau das meint
   „sehr viele bugs". Wir holen die Spalten zurueck; die Huelle scrollt
   waagerecht (so war es in portal-mobile ohnehin vorgesehen).

   fs102: Das Tor stand auf `max-width: 768px` und griff auf dem iPad im Querformat
   deshalb NIE — dort wurde die Schrift von Block J/K auf 12px angehoben, der
   Tabellenfix aber nicht mitgezogen. Gemessen bei 1210pt: E-Mail-Adressen brachen
   auf DREI Zeilen (65px Zeilenhoehe), schlechter als ohne diese Datei. Jetzt
   dieselbe Bedingung wie J/K.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px), (pointer: coarse) {
  html body #dashboard-view .admin-overview-list .admin-data-table th,
  html body #dashboard-view .admin-overview-list .admin-data-table td {
    display: table-cell !important;
    font-size: 12px !important;
    padding: 9px 10px !important;
  }
  /* Zellen, die der Renderer selbst ausblendet, bleiben ausgeblendet */
  html body #dashboard-view .admin-overview-list .admin-data-table th.hidden,
  html body #dashboard-view .admin-overview-list .admin-data-table td.hidden,
  html body #dashboard-view .admin-overview-list .admin-data-table tr.hidden td {
    display: none !important;
  }
  /* Aufklapp-Zeilen der Kooperationsliste bleiben ganze Zeilen */
  html body #dashboard-view .admin-overview-list .admin-data-table tr.campaign-detail-row.hidden { display: none !important; }
  html body #dashboard-view .admin-overview-list .admin-data-table tr.campaign-detail-row > td { display: table-cell !important; }

  /* Jede Liste bekommt ihre waagerechte Bildlaufflaeche — und NUR sie,
     die Seite selbst scrollt nicht. */
  html body #dashboard-view .admin-main-section .admin-overview-list {
    display: block !important;
    width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Feste Spaltenbreiten statt max-content: sonst blaeht ein langer
     Statusname die Kooperationstabelle auf 2357px auf (gemessen). */
  html body #dashboard-view .admin-main-section .admin-overview-list > table.admin-data-table {
    width: 100% !important;
    min-width: 720px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }
  html body #dashboard-view .admin-main-section .admin-overview-list > table.admin-data-table td,
  html body #dashboard-view .admin-main-section .admin-overview-list > table.admin-data-table th {
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  /* Stammdaten-Talents: die E-Mail-Spalte trug inline `word-break: break-all`
     -> „millysophieschindler@ / gmail.com" auf drei Zeilen, 61px hohe Zelle.
     Nur an sinnvollen Stellen umbrechen. */
  html body #dashboard-view .admin-main-section .admin-overview-list table.admin-data-table td[style*="break-all"],
  html body #dashboard-view .admin-main-section .admin-overview-list table.admin-data-table td[style*="break-all"] * {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: none !important;
  }
  /* Stammdaten/Talents: portal-mobile klemmt genau diese Tabelle mit ZWEI IDs
     (`#dashboard-view … #talents-list-main table[style*="min-width"]`) auf
     580px. Bei 5 Spalten bleiben der E-Mail 174px — „millysophieschindler@
     gmail.com" bricht auf drei Zeilen (63px hohe Zelle). Inhaltsbreite statt
     Prozentraster: die Mail steht dann auf EINER Zeile, die Huelle scrollt. */
  html body #dashboard-view .admin-main-section #talents-list-main table.admin-data-table.admin-data-table[style*="min-width"],
  html body #dashboard-view .admin-main-section #talents-list-main table.admin-data-table.admin-data-table,
  html body #dashboard-view .admin-main-section #brands-list table.admin-data-table.admin-data-table {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
  }
  html body #dashboard-view .admin-main-section #talents-list-main table.admin-data-table.admin-data-table td,
  html body #dashboard-view .admin-main-section #talents-list-main table.admin-data-table.admin-data-table th {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  html body #dashboard-view .admin-main-section #talents-list-main table.admin-data-table.admin-data-table td:last-child {
    white-space: normal !important;
  }

  /* Status-Pille darf die Tabelle nicht sprengen */
  html body #dashboard-view .admin-main-section .admin-overview-list .tt-status-pill {
    max-width: 100% !important;
    min-height: 44px !important;
  }
  html body #dashboard-view .admin-main-section .admin-overview-list .tt-status-pill .tt-status-pill__label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* Aktionsspalte: Knoepfe untereinander, volle Zellbreite, 44pt */
  html body #dashboard-view .admin-main-section .admin-overview-list td.ac-cell-actions,
  html body #dashboard-view .admin-main-section .admin-overview-list td:last-child > div[style*="display: flex"],
  html body #dashboard-view .admin-main-section .admin-overview-list td:last-child > div[style*="display:flex"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  html body #dashboard-view .admin-main-section .admin-overview-list td.ac-cell-actions .ac-btn-edit-text,
  html body #dashboard-view .admin-main-section .admin-overview-list td:last-child .btn-secondary.btn-small {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   H · <=768px: BUCHUNGEN — DIE TABELLE IST ABGESCHNITTEN, NICHT SCROLLBAR
   Gemessen (393pt): `.transaction-month-block` reicht bis x=399 (Seite ist
   393 breit), die 8-spaltige `.transaction-table` ist 760px breit und ihre
   Huelle steht auf `overflow-x: hidden` -> Art, Betrag, Netto Mgmt und Status
   sind auf dem Handy UNERREICHBAR. Ausserdem 6px Rest-Ueberlauf der Seite.

   fs102: Auch hier stand das Tor auf 768px. Auf dem iPad quer blieben deshalb
   24 Tippziele unter 44pt und 36 Textstellen unter 12px — darunter die
   Monatssummen in Euro (11px) und alle Sortierkoepfe (33px hoch, obwohl sie
   `role="button"` tragen und klickbar sind).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px), (pointer: coarse) {
  /* fs102: Die Sortierkoepfe SIND Schaltflaechen — also auch so gross. */
  html body #dashboard-view .admin-main-section th.tx-sortable {
    min-height: 44px !important;
    padding: 12px 10px !important;
  }
  html body #dashboard-view .admin-main-section .tx-sort-arrow,
  html body #dashboard-view .admin-main-section .transaction-pill,
  html body #dashboard-view .admin-main-section .transaction-month-add,
  html body #dashboard-view .admin-main-section .transaction-month-title span {
    font-size: 12px !important;
  }
  html body #dashboard-view .admin-main-section .transaction-month-add {
    min-height: 44px !important;
    display: inline-flex !important; align-items: center !important;
  }
  html body #dashboard-view .admin-main-section .transaction-month-block {
    width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html body #dashboard-view .admin-main-section .transaction-month-block > table.transaction-table,
  html body #dashboard-view .admin-main-section .transaction-month-block table.admin-data-table {
    min-width: 720px !important;
    width: 100% !important;
    table-layout: fixed !important;
  }
  /* Kopfzeile des Monatsblocks: Titel, Knopf und Summen sauber gestapelt */
  html body #dashboard-view .admin-main-section .transaction-month-block .transaction-month-head {
    position: sticky !important;
    left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html body #dashboard-view .admin-main-section .transaction-month-block .transaction-month-add {
    min-height: 44px !important;
    padding: 0 14px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   I · <=768px: FILTERZEILE `.admin-overview-controls`
   Gemessen: `display:flex; flex-direction:row` (v93, 1·2·2) schlaegt die
   1-spaltige Grid-Regel aus portal-facelift (0·2·0). Ergebnis: Suchfeld 280px,
   Auswahlfelder 220/140px mit ABGESCHNITTENEM Text („Alle eingereichten
   Rechnur"), jedes auf eigener Zeile, alle unterschiedlich breit.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html body #dashboard-view .admin-main-section .admin-overview-controls.admin-overview-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }
  html body #dashboard-view .admin-main-section .admin-overview-controls.admin-overview-controls > input,
  html body #dashboard-view .admin-main-section .admin-overview-controls.admin-overview-controls > select,
  html body #dashboard-view .admin-main-section .admin-overview-controls.admin-overview-controls > label,
  html body #dashboard-view .admin-main-section .admin-overview-controls.admin-overview-controls > button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    text-overflow: ellipsis !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   J · <=768px: TIPPZIELE
   Gemessen wurden u.a.: Aktualisieren-Icon 34x34, „+ Kooperation" 337x34,
   „Archiv" 65x32, alle `select` 32px, „Alle auswaehlen"-Kaestchen 13x13,
   Insights-Knoepfe 37px, „Mehr ▾" 120x20. Apple-Mindestmass ist 44x44pt.
   Gilt bis 900px — das iPad im Hochformat (820/834pt) und das iPhone im
   Querformat (852pt) sind genauso Finger-Geraete wie das Handy.
   ══════════════════════════════════════════════════════════════════════════ */
/* fs96 Nachtrag: gilt zusaetzlich auf JEDEM Finger-Geraet, unabhaengig von der
   Breite. Gemessen auf dem iPad Pro 13" im Hochformat (1032pt): dort greift die
   Desktop-Fassung, und 27 Tippziele lagen unter 44pt (Reiter 223x36, Melder-
   Glocke 36x36, ein 28x28-Knopf), dazu 75 Textstellen unter 12px — es sind
   genau dieselben Klassen wie unten. `pointer: coarse` trifft Finger, aber nie
   eine Maus: der Schreibtisch bleibt damit unangetastet. */
@media (max-width: 900px), (pointer: coarse) {
  /* invoice-overview.css klemmt diese Knoepfe mit 1·3·3 auf 34px —
     `.btn-icon-action` doppelt genannt ergibt 1·4·4 und gewinnt. */
  html body #dashboard-view .admin-main-section .card-header-actions button.btn-icon-action.btn-icon-action,
  html body #dashboard-view .admin-main-section .btn-icon-action.btn-icon-action,
  html body #dashboard-view .admin-main-section .refresh-btn.refresh-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
  html body #dashboard-view .admin-main-section .card-header-actions .btn-primary.btn-primary,
  html body #dashboard-view .admin-main-section .card-header-actions .btn-secondary.btn-secondary,
  html body #dashboard-view .admin-main-section .card-header-actions > button,
  html body #dashboard-view .admin-main-section .btn-primary.btn-primary,
  html body #dashboard-view .admin-main-section .btn-secondary.btn-secondary {
    min-height: 44px !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* v93 klemmt Auswahlfelder in `.card-header-actions` mit 1·2·3 auf 32px */
  html body #dashboard-view .admin-main-section.admin-main-section select,
  html body #dashboard-view .admin-main-section.admin-main-section input[type="text"],
  html body #dashboard-view .admin-main-section.admin-main-section input[type="search"],
  html body #dashboard-view .admin-main-section.admin-main-section input[type="month"],
  html body #dashboard-view .admin-main-section.admin-main-section input[type="date"],
  html body #dashboard-view .admin-main-section.admin-main-section .search-box input {
    min-height: 44px !important;
    height: 44px !important;
    box-sizing: border-box !important;
  }
  /* Ankreuzfelder in Tabellen: von 13px auf ein treffbares Mass.
     44px waeren in einer Tabellenzeile zu viel — 24px Kaestchen plus
     Zellen-Innenabstand ergibt eine ~44px hohe Trefferflaeche. */
  html body #dashboard-view .admin-main-section table input[type="checkbox"],
  html body #dashboard-view .admin-main-section .contract-row input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin: 10px 4px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   K · <=768px: SCHRIFT UNTER 12px
   Gemessen: `.monthly-collab-label` 8.4px, `.dash-kpi-period` 8.5px,
   `.dash-kpi-new` 9px, `.dash-kpi-label` 9.5px, `.dash-kpi-group-head` 10px,
   `.dash-kpi-sub` / `.admin-summary-chip` / Tabellenkopf 10.5px.
   Gilt bis 900px (iPad Hochformat / iPhone Querformat).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px), (pointer: coarse) {
  html body #dashboard-view .admin-main-section .dash-kpi .dash-kpi-label { font-size: 12px !important; line-height: 1.3 !important; }
  html body #dashboard-view .admin-main-section .dash-kpi .dash-kpi-sub { font-size: 12px !important; line-height: 1.35 !important; }
  html body #dashboard-view .admin-main-section .dash-kpi .dash-kpi-period,
  html body #dashboard-view .admin-main-section .dash-kpi .dash-kpi-new { font-size: 12px !important; }
  html body #dashboard-view .admin-main-section .dash-kpi-group-head { font-size: 12px !important; letter-spacing: .4px !important; }
  html body #dashboard-view .admin-main-section .admin-summary-chip { font-size: 12px !important; }
  html body #dashboard-view .admin-main-section .monthly-collab-label { font-size: 12px !important; line-height: 1.3 !important; }
  html body #dashboard-view .admin-main-section .ac-brand-subline { font-size: 12px !important; }
  html body #dashboard-view .admin-main-section .card-header .card-header-subtitle { font-size: 13px !important; line-height: 1.4 !important; }
  /* Ein einzelner Aktualisieren-Knopf brauchte wegen `width:100%` (portal-mobile
     V125b) eine ganze eigene Zeile unter der Ueberschrift. Enthaelt die
     Aktionsgruppe keinen Hauptknopf, darf sie oben rechts neben dem Titel sitzen. */
  html body #dashboard-view .admin-main-section .card-header .card-header-actions:not(:has(.btn-primary)) {
    width: auto !important;
    max-width: 50% !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    align-self: flex-start !important;
  }
  /* Hinweis: `:has()` darf NICHT in `:has()` verschachtelt werden — der ganze
     Block waere sonst ungueltig und wuerde still verworfen. Darum hier die
     gleichwertige Kurzform „Kopfzeile ohne Hauptknopf". */
  html body #dashboard-view .admin-main-section .card-header:not(:has(.btn-primary)) {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  html body #dashboard-view .admin-main-section .card-header:not(:has(.btn-primary)) .card-header-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* Tabellenkopf: portal-dna.css setzt 10.5px mit dem Dreifach-ID-Trick
     `#dashboard-view#dashboard-view#dashboard-view table thead th` (3·0·3).
     Nur mit derselben Dreifach-ID plus einer Klasse ist da heranzukommen. */
  html body #dashboard-view#dashboard-view#dashboard-view .admin-main-section table thead th {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  /* Status-Pillen und Zeilenaktionen der Listen */
  html body #dashboard-view .admin-main-section .tt-status-pill .tt-status-pill__label,
  html body #dashboard-view .admin-main-section .ac-btn-edit-text,
  html body #dashboard-view .admin-main-section .talent-status-pill,
  html body #dashboard-view .admin-main-section .status-badge {
    font-size: 12px !important;
  }
  /* Rechnungskarten: Werte und Zeitangaben waren 9.5–11.5px */
  html body #dashboard-view .admin-main-section .inv-shell .inv-status-label,
  html body #dashboard-view .admin-main-section .inv-shell .inv-cell-sub,
  html body #dashboard-view .admin-main-section .inv-shell .inv-event-main,
  html body #dashboard-view .admin-main-section .inv-shell .inv-event-meta,
  html body #dashboard-view .admin-main-section .inv-shell .inv-summary span,
  html body #dashboard-view .admin-main-section .inv-shell .inv-summary strong,
  html body #dashboard-view .admin-main-section .inv-shell .inv-chip,
  html body #dashboard-view .admin-main-section .inv-shell .inv-chip b {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  html body #dashboard-view .admin-main-section .inv-shell .inv-kebab span { font-size: 12px !important; }
  /* Diagramm-Ueberschriften und ihre Erklaerzeilen (11.5 bzw. 10.5px) */
  html body #dashboard-view #overview-admin-section .dash-chart-card .dash-chart-header span {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  html body #dashboard-view #overview-admin-section .dash-chart-card .dash-chart-header h3 {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   L · <=1024px: KPI-KACHELN EINHEITLICH
   Gemessen (393pt): die dunklen Kacheln stehen 2-spaltig (146px), die hellen
   1-spaltig (301px) — zwei Raster untereinander, die nicht zusammenpassen.
   Die 2-Spalten-Regel aus portal-mobile ist auf `.talent-shell` gescoped und
   erreicht das Admin-Portal nie.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  html body #dashboard-view #overview-admin-section .dash-kpi-grid,
  html body #dashboard-view #overview-admin-section .dash-kpi-grid.dash-kpi-grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  /* Ungerade Kachelzahl: die letzte fuellt die Reihe statt allein zu stehen */
  html body #dashboard-view #overview-admin-section .dash-kpi-grid > .dash-kpi:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }
  html body #dashboard-view #overview-admin-section .dash-chart-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}
@media (max-width: 768px) {
  html body #dashboard-view #overview-admin-section .dash-kpi { padding: 12px 13px !important; min-width: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   M · <=768px: INSIGHTS — KONTEN-TABELLE, FREIGABEN-TABELLE, „MEHR"-MENUE
   Vom Gruender ausdruecklich beanstandet. Gemessen (393pt):
     · Freigaben-Tabelle 760px in einer 329px breiten Huelle, Zeilenhoehe 144px
     · Empfaengerzelle 149px breit -> „kristina.klimova@ / belenka.com"
       (Umbruch mitten im Wort)
     · Letzte Spalte: drei Knoepfe (65/135/113px) UNTEREINANDER gestapelt
     · „Mehr ▾" ist 120x20px — 20px hoch
     · Das per JS auf position:fixed gestellte Menue landet bei right:-467px,
       also KOMPLETT ausserhalb des Bildes (L387..R860 bei 393px Breite).
       Grund: admin.v2.js rechnet `right = innerWidth - summary.right`, und die
       Zeile steht in einem waagerecht gescrollten Behaelter — die Zusammen-
       fassung liegt dann rechts ausserhalb. Das JS ist TABU; wir fangen es mit
       `right: … !important` ab (schlaegt den Inline-Stil).
   Loesung fuer die Tabellen: auf dem Handy KARTEN statt Spalten. Die Inhalte
   der Freigaben-Tabelle sind selbsterklaerend („angelegt 12.08.", „laeuft ab …",
   „4 Aufrufe, zuletzt …") — nur die 7-spaltige Konten-Tabelle bekommt Etiketten.
   ACHTUNG: das Stylesheet des Freigabe-Fensters (ADM_IG_FENSTER_CSS) wird zur
   LAUFZEIT in <head> nachgelegt, steht also nach dieser Datei. Deshalb hier
   ausnahmslos !important.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* --- „Mehr"-Menue zurueck ins Bild (schlaegt den Inline-Stil aus dem JS) --- */
  /* fs96 ZWEITER DURCHGANG — am Geraet nachgestellt (iPhone 17 Pro, 402x714):
     Der erste Ansatz („nur nach rechts zurueckholen") reicht NICHT. admin.v2.js
     setzt inline `top = Zeile.unten + 5`. Steht die Zeile in der unteren
     Bildschirmhaelfte, oeffnet das Menue UNTER den Bildrand: sichtbar blieb nur
     der erste Eintrag, „Fuer Marke freigeben" / „Voreinstellung…" /
     „Insights-Reiter freischalten" waren NICHT erreichbar — und auch nicht
     heranzuscrollen, weil das Menue fixiert ist und der Scroll-Zuhoerer im JS
     es beim Rollen sofort schliesst. Das ist ein Fall von „unbedienbar", nicht
     von Kosmetik.
     Ein `top` aus dem Stil-Attribut laesst sich per CSS nicht rechnen — wohl
     aber ENTWERTEN: `top: auto` + `bottom: 0` macht aus dem Menue ein
     Bodenblatt. Das sitzt bei JEDER Zeilenposition richtig, braucht keine
     Zeile JavaScript und ist am Handy das gewohnte Muster.
     (Der Zustand „zu" bleibt unberuehrt: <details> blendet alles ausser
     <summary> von sich aus aus.) */
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg details.igf-menu[open] > .igf-mliste,
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-mliste {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -12px 30px rgba(15, 23, 42, .22) !important;
    z-index: 10500 !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-mliste .igf-mp {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    white-space: normal !important;
  }

  /* --- Knoepfe der Insights-Tabellen auf Tippziel --- */
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-mini,
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg summary.igf-mini,
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-zweit,
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-primaer {
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-menu > summary { display: inline-flex !important; }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-x {
    width: 44px !important; height: 44px !important; min-width: 44px !important;
  }

  /* --- Tabellen -> Karten. Kein waagerechtes Scrollen mehr noetig. --- */
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg div[style*="overflow-x"] {
    overflow-x: visible !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab thead { display: none !important; }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab tbody { display: block !important; }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab tbody > tr {
    display: block !important;
    width: auto !important;
    border: 1px solid #e6e9ef !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    padding: 12px 14px !important;
    margin: 0 0 10px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab tbody > tr > td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    border: 0 !important;
    padding: 3px 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-align: left !important;
  }
  /* Die Regel `.igf-tab td:last-child{width:1%;white-space:nowrap}` aus dem
     Laufzeit-Stylesheet war der Grund, warum sich die drei Knoepfe stapelten. */
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab tbody > tr > td:last-child {
    width: auto !important;
    white-space: normal !important;
    padding-top: 10px !important;
    margin-top: 8px !important;
    border-top: 1px solid #f0f2f6 !important;
  }
  /* Aktionen: nebeneinander, gleich breit, 44pt */
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab tbody > tr > td:last-child > div,
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab .igf-akt {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab tbody > tr > td:last-child .igf-mini {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab .igf-menu { flex: 1 1 calc(50% - 4px) !important; }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab .igf-menu > summary { width: 100% !important; }
  /* Versand-Zeile (colspan) bleibt eine schlichte Flaeche, keine Karte */
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab tbody > tr[data-igf-versandzeile] {
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    padding: 0 !important; margin: -8px 0 10px !important;
  }

  /* Etiketten NUR fuer die 7-spaltige Konten-Tabelle — dort sind „18.08.2026"
     oder „2 aktiv" ohne Spaltenkopf nicht zu deuten. Die 5- und 4-spaltigen
     Tabellen sind selbsterklaerend und bleiben ohne Etikett. */
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab tbody > tr:has(> td:nth-child(6)) > td:nth-child(n+2):nth-child(-n+6)::before {
    display: block;
    color: #8a94a3;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 1px;
  }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab tbody > tr:has(> td:nth-child(6)) > td:nth-child(1) { font-size: 15px !important; padding-bottom: 6px !important; }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab tbody > tr:has(> td:nth-child(6)) > td:nth-child(2)::before { content: "Instagram"; }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab tbody > tr:has(> td:nth-child(6)) > td:nth-child(3)::before { content: "Zustand"; }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab tbody > tr:has(> td:nth-child(6)) > td:nth-child(4)::before { content: "Letzter Abgleich"; }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab tbody > tr:has(> td:nth-child(6)) > td:nth-child(5)::before { content: "Marken-Freigaben"; }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab tbody > tr:has(> td:nth-child(6)) > td:nth-child(6)::before { content: "Insights-Reiter"; }
  /* 4-spaltige Voreinstellungs-Tabelle: nur das nackte Datum braucht ein Etikett */
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg table.igf-tab tbody > tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))) > td:nth-child(3)::before {
    content: "Zuletzt geändert";
    display: block; color: #8a94a3; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .02em; margin-bottom: 1px;
  }

  /* Zweispaltiges Freigabe-Fenster (Formular + Vorschau) untereinander */
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-raster { grid-template-columns: 1fr !important; }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-links,
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-rechts { padding: 14px 16px 16px !important; }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-fuss {
    flex-direction: column-reverse !important;
    gap: 8px !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-fuss > button { width: 100% !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   N · <=900px: BENACHRICHTIGUNGEN LIEGEN UNTER DER KOPFZEILE
   Gemessen: `#admin-notif-panel` oeffnet korrekt auf volle Breite, hat aber
   z-index 100 — die feste Kopfzeile hat 1200, die Unter-Navigation 1100.
   Die Panel-Ueberschrift samt Schliessen-Kreuz liegt damit unter der Kopfzeile.
   portal-mobile hat das nur fuer das TALENT-Panel (`#tt-notif-panel`) behoben;
   die Admin-Kennung `#admin-notif-panel` war nie erfasst.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  html body #admin-notif-panel.tt-notif-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    z-index: 4100 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  html body #admin-notif-backdrop.tt-notif-backdrop { z-index: 4099 !important; }
  html body #admin-notif-panel.tt-notif-panel .tt-notif-panel-header { padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important; }
  html body #admin-notif-panel.tt-notif-panel .tt-notif-close {
    width: 44px !important; height: 44px !important; min-width: 44px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  html body #admin-notif-panel.tt-notif-panel .tt-notif-panel-footer .btn-secondary { min-height: 44px !important; }
  /* Solange das Panel offen ist, darf die Segment-Leiste nicht darueber malen */
  html body:has(#admin-notif-panel.tt-notif-panel.open) #dashboard-view .admin-main-nav .admin-nav-subgroup.is-active-parent {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   O · <=768px: FENSTER (Kampagne, Talent, Brand, Vertrag, Versand …)
   Gemessen: die Fussleisten-Knoepfe sind 34px hoch und stehen zu dritt
   nebeneinander (195 + 99 + 187 = 481px auf 393px Breite); „Talent loeschen"
   war 0x0, also unerreichbar. portal-mobile stapelt sie zwar
   (`.modal-dialog .modal-footer > button`, 0·3·2), verliert aber gegen die
   fensterspezifischen Regeln mit ID.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-footer,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay.sd-stammdaten .modal-footer {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-footer > button,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-footer > .btn,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-footer > a,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-footer > div {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }
  /* Abbrechen/Speichern stecken in einem verschachtelten
     <div style="display:flex"> — ohne diese Zeile bleiben sie 34px hoch und
     nebeneinander, waehrend nur der aeussere Knopf gestapelt wird. */
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-footer > div {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-footer > div > button,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-footer > div > .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    justify-content: center !important;
  }
  /* „… loeschen" ist per Inline-Style ausgeblendet, solange nichts Bestehendes
     bearbeitet wird — das bleibt so. Nur wenn er da ist, gehoert er ganz nach
     unten und in voller Breite. */
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-footer > .sd-btn-danger-outline,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-footer > .btn-danger {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    order: 99 !important;   /* in column-reverse: ganz unten */
  }
  /* Ist ein Fenster trotz allem hoeher als das Bild, muss man es scrollen
     koennen — sonst ist der Fuss unerreichbar (gemessen: #contract-modal
     endete 42px unter dem Bildrand). */
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay:not(.hidden):not(.tt-fullpage-modal) {
    align-items: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Fenster nicht ueber den unteren Bildrand hinaus (gemessen: 886 > 852) */
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay:not(.hidden) > .modal-dialog {
    max-height: 100dvh !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay:not(.hidden).tt-fullpage-modal > .modal-dialog {
    max-height: none !important;
    margin: 0 !important;
  }
  /* Die PDF-Vorschau ist mit `inset: 0 0 0 auto` an der rechten Kante verankert
     (Platz fuer die Desktop-Seitenleiste). Auf dem Handy laesst das 40px tote
     Flaeche links stehen — volle Breite ist richtig. */
  html body:has(#dashboard-view:not(.talent-shell)) div#invoice-pdf-preview-modal.modal-overlay {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* Schliessen-Kreuz treffbar */
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-header .modal-close {
    min-width: 44px !important; width: auto !important; height: 44px !important; min-height: 44px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   P · <=768px: RECHNUNGSLISTE — die Kartenansicht sass zu eng
   Die Umschaltung Tabelle -> Karte macht portal-mobile V127 bereits und sie
   greift auch im Admin. Was fehlt: die Aktionszeile der Karte ist im Admin
   laenger („Rechnung an Marke senden" + „Mehr") und die Werkzeugleiste
   staffelt sich dreifach uebereinander.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html body #dashboard-view .admin-main-section .inv-shell .inv-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  html body #dashboard-view .admin-main-section .inv-shell .inv-toolbar .card-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }
  html body #dashboard-view .admin-main-section .inv-shell .inv-toolbar .search-box {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  html body #dashboard-view .admin-main-section .inv-shell .inv-toolbar .search-box input {
    width: 100% !important;
    min-height: 44px !important;
  }
  html body #dashboard-view .admin-main-section .inv-shell .inv-toolbar .card-header-actions > button.btn-icon-action {
    flex: 0 0 auto !important;
    width: 44px !important; height: 44px !important; min-height: 44px !important;
  }
  /* `.card-header .btn-primary{width:100%}` (ui.css) zwang „Neue Rechnung" in
     eine eigene Zeile und liess die beiden Icon-Knoepfe allein stehen. */
  html body #dashboard-view .admin-main-section .inv-shell .inv-toolbar .card-header-actions > .btn-primary {
    flex: 1 1 150px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }
  html body #dashboard-view .admin-main-section .inv-shell .inv-chip { min-height: 44px !important; }
  /* Rechnungsnummer und Statusknopf der Karte sind die Griffe zum Oeffnen —
     gemessen 98x23 bzw. 45x17. */
  html body #dashboard-view .admin-main-section .inv-shell .inv-table tbody td.sticky-num .inv-num,
  html body #dashboard-view .admin-main-section .inv-shell .inv-table tbody td.sticky-stat .inv-status-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  html body #dashboard-view .admin-main-section .inv-shell .inv-table tbody td.sticky-stat {
    top: 8px !important;
  }
  /* Kartenaktionen: Hauptaktion breit, „Mehr" kompakt, beide 44pt */
  html body #dashboard-view .admin-main-section .inv-shell .inv-table td.inv-actions-cell .inv-btn.small,
  html body #dashboard-view .admin-main-section .inv-shell .inv-table td.inv-actions-cell .inv-kebab {
    height: 44px !important;
    min-height: 44px !important;
  }
  /* Kebab-Menue der Rechnungsliste im Bild halten (es haengt am <body>) */
  html body:has(#dashboard-view:not(.talent-shell)) .inv-kebab-menu {
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) .inv-kebab-menu .inv-kebab-item { min-height: 44px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Q · <=768px: SEITENRAENDER + SAFE-AREA
   Die Abschnitte sitzen randlos an der Bildschirmkante; im Querformat mit
   Notch schneidet die Kamera-Insel links Text ab.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html body #dashboard-view .admin-main-section.admin-main-section {
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  /* Karten randlos zur Sektion — sonst doppelter Rahmen („Fenster im Fenster") */
  html body #dashboard-view .admin-main-section > .card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 14px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   R · AB 769px AUF FINGER-GERAETEN: DIE ZEILEN-KNOEPFE TREFFBAR MACHEN
   Der Kartenumbau (Block M) bleibt dem Handy vorbehalten — ab 769pt ist fuer
   Spalten genug Platz. Die Knoepfe sind dort aber dieselben 28–37px und
   „Mehr ▾" dieselben 20px wie auf dem Handy, und ein iPad wird mit dem Finger
   bedient. Darum nur die Groessen, nicht das Layout.

   fs96 zweiter Durchgang: Die Grenze stand urspruenglich bei 900px — und genau
   darueber faengt das grosse iPad an. Auf dem iPad Pro 13" im Hochformat
   (1032pt) blieben deshalb gemessen 45 Knoepfe im Insights-Reiter und 44 in
   der Rechnungsliste unter 44pt (`.inv-status-btn` sogar 156x16).
   `(pointer: coarse)` statt einer oberen Schranke trifft jedes Finger-Geraet
   und laesst den Schreibtisch in Ruhe.
   ══════════════════════════════════════════════════════════════════════════ */
/* Beide Bedingungen, nicht nur die neue: das urspruengliche Band 769–900px
   bleibt EXAKT wie vorher (auch am Schreibtisch mit schmalem Fenster), und
   `pointer: coarse` kommt als zusaetzlicher Fall fuer grosse iPads dazu. */
@media (min-width: 769px) and (max-width: 900px),
       (min-width: 769px) and (pointer: coarse) {
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-mini,
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg summary.igf-mini,
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-zweit,
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-primaer,
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-mliste .igf-mp {
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-mliste .igf-mp { justify-content: flex-start !important; width: 100% !important; }
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-x { width: 44px !important; height: 44px !important; }
  /* Das per JS auf position:fixed gesetzte Menue rutscht auch hier aus dem Bild,
     sobald die Tabelle waagerecht gescrollt ist. */
  html body:has(#dashboard-view:not(.talent-shell)) .igf-dlg .igf-mliste {
    right: 12px !important;
    left: auto !important;
    max-width: calc(100vw - 24px) !important;
  }
  /* Rechnungskarten-/Listenknoepfe */
  html body #dashboard-view .admin-main-section .inv-shell .inv-btn.small,
  html body #dashboard-view .admin-main-section .inv-shell .inv-kebab,
  html body #dashboard-view .admin-main-section .inv-shell .inv-chip,
  html body #dashboard-view .admin-main-section .inv-shell .inv-num,
  html body #dashboard-view .admin-main-section .inv-shell .inv-status-btn {
    min-height: 44px !important;
  }
  /* fs96: Die Rechnungsnummer ist ein Knopf (oeffnet die Rechnung) und war
     32px breit — hoch genug, aber zu schmal. Und `.inv-btn.small` stand bei
     11px; Block K faengt das nur innerhalb `.admin-main-section` fuer die
     dort gelisteten Klassen ab, `.inv-btn.small` gehoerte nicht dazu. */
  html body #dashboard-view .admin-main-section .inv-shell .inv-num {
    min-width: 44px !important;
  }
  /* fs96: Die E-Mail-Spalte der Stammdaten-Talents traegt inline
     `word-break: break-all`. Auf dem iPad Pro 13" im Hochformat (1032pt)
     bricht sie deshalb MITTEN IM WORT — gemessen „[E-Mail] /
     il.com", Zeilenhoehe 101–121px statt 44px. Abschnitt G faengt das nur
     bis 768px ab. `anywhere` bricht an sinnvollen Stellen statt an jedem
     Zeichen; das Stil-Attribut schlagen wir mit !important. */
  html body #dashboard-view .admin-main-section table.admin-data-table td[style*="break-all"],
  html body #dashboard-view .admin-main-section table.admin-data-table td[style*="break-all"] * {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: none !important;
  }
  html body #dashboard-view .admin-main-section .inv-shell .inv-btn.small,
  html body #dashboard-view .admin-main-section .inv-shell .inv-btn {
    font-size: 12px !important;
  }
  html body #dashboard-view .admin-main-section .ac-btn-edit-text,
  html body #dashboard-view .admin-main-section .btn-secondary.btn-small,
  html body #dashboard-view .admin-main-section .tt-status-pill {
    min-height: 44px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   S · 769–900px: RESTE, DIE NUR AUF DEM iPAD IM HOCHFORMAT AUFFALLEN
   Gemessen bei 834pt: die Buchungs-Tabelle (806px) laeuft aus ihrem Block
   heraus (Huelle steht auf overflow-x:hidden — dieselbe Ursache wie auf dem
   Handy, nur greift Block H dort nicht); die Vertragsliste steht 2px ueber;
   die E-Mail-Spalte der Stammdaten bricht weiter mitten im Wort.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 900px) {
  html body #dashboard-view .admin-main-section .transaction-month-block {
    width: 100% !important; max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html body #dashboard-view .admin-main-section #contracts-table-container,
  html body #dashboard-view .admin-main-section .admin-overview-list {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
  }
  /* Inline `word-break: break-all` an der E-Mail-Spalte neutralisieren */
  html body #dashboard-view .admin-main-section table.admin-data-table td[style*="break-all"],
  html body #dashboard-view .admin-main-section table.admin-data-table td[style*="break-all"] * {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  html body #dashboard-view .admin-main-section #talents-list-main table.admin-data-table.admin-data-table {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
  }
  html body #dashboard-view .admin-main-section #talents-list-main table.admin-data-table.admin-data-table td:not(:last-child) {
    white-space: nowrap !important;
  }
  /* Restliche Kleinschrift */
  html body #dashboard-view .admin-main-section .dash-chart-card .dash-chart-header h3,
  html body #dashboard-view .admin-main-section .dash-chart-card .dash-chart-header span,
  html body #dashboard-view .admin-main-section .inv-shell .inv-btn,
  html body #dashboard-view .admin-main-section .dash-kpi-period,
  html body #dashboard-view .admin-main-section .dash-kpi-new {
    font-size: 12.5px !important;
  }
  html body #dashboard-view .admin-main-section .inv-shell .inv-num { min-width: 44px !important; }
  /* Filter-Beschriftungen der Uebersicht (Waehrung/Zeitraum/Talent) waren 9.5px */
  html body #dashboard-view #overview-admin-section .dash-toolbar > label.dash-control > span:first-child {
    font-size: 12px !important;
    letter-spacing: .3px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   T · NACHTRAG — was der zweite Durchgang AM GERAET noch gefunden hat
   Gemessen auf iPhone 17 / 17 Pro (402pt), iPad mini, iPad Air/Pro und im
   Totzonen-Band (764/768/769px, per massgenauem Rahmen erzwungen).
   Die Abschnitte A–S sind damit nicht falsch — sie greifen nur an diesen
   Stellen nicht durch, weil eine Bestandsregel MEHR ID-Treffer hat.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------------------
   T1 · DIE LISTEN-TABELLEN BLAEHEN SICH AUF `max-content` AUF
   Gemessen am iPhone 17 Pro (402pt), Kooperationsliste mit ECHTEN Namen
   („[Marke] (Umsatz-Import 2025/26) – Historie vor aktueller
   Notion-Kampagne", 74 Zeichen):
        Tabelle 2523px breit in einer 374px breiten Huelle  =  6,7 Bildschirme
        waagerechtes Wischen, bis die Spalte „Aktionen" erreicht ist.
   Ursache: portal-mobile.css @(max-width:768px) setzt
        `html body #dashboard-view .admin-main-section #campaign-status-admin-list
         > table.admin-data-table { width: max-content !important }`
   Das sind ZWEI IDs -> Spezifitaet (2,2,3). Abschnitt G dieser Datei zielt
   mit `.admin-overview-list > table.admin-data-table` auf (1,3,3) und
   VERLIERT deshalb — `table-layout: fixed` aus G kam an, `width` nicht.
   Fixes Layout plus `max-content` ist die schlechteste Kombination: die
   Spaltenprozente des <colgroup> rechnen dann auf die Maximalbreite.
   Heilung: dieselbe ID-Kette wie im Bestand, dazu eine Klasse doppelt —
   (2,3,3) bzw. (3,2,3). Erst dann entscheidet die Ladereihenfolge.

   NICHT angefasst: #talents-list-main und #brands-list. Dort ist die
   Inhaltsbreite in Abschnitt G BEWUSST gewaehlt (Mailadresse auf EINER
   Zeile statt „[Name]@ / gmail.com"); das bleibt so.
--------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Kooperationen: 2523px -> 720px (Spaltenraster des <colgroup> bleibt) */
  html body #dashboard-view .admin-main-section #campaign-status-admin-list > table.admin-data-table.admin-data-table {
    width: 100% !important;
    min-width: 720px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }
  /* Uebersicht/Talent-Performance: 675px in einer 312px breiten Diagrammkarte.
     Die Brand-Lifetime-Value-Tabelle daneben bleibt BEWUSST unangetastet:
     dort habe ich das feste Layout ausprobiert und wieder herausgenommen —
     mit sieben Spalten auf 680px bekommt die Namensspalte 97px, „LPP [Marke]
     Pack- und Produktions GmbH" steht dann auf fuenf Zeilen und die Zeile ist
     161px hoch (gemessen). Gegenueber 909px Inhaltsbreite mit 41px hohen
     Zeilen ist das der schlechtere Tausch: gescrollt werden muss so oder so,
     nur eben zusaetzlich senkrecht. Ein Versuch, der ersten Spalte per
     `th:first-child{width:33%}` mehr zu geben, verpuffte (gemessen 71px) —
     ohne <colgroup> greift die Angabe hier nicht. Also stehen lassen. */
  html body #dashboard-view #overview-admin-section #adm-talent-performance-list > table.admin-data-table.admin-data-table {
    width: 100% !important;
    min-width: 620px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }
  /* Bei festem Layout teilen sich sieben Spalten die Breite zu gleichen Teilen —
     die Namensspalte bekam 97px und „LPP [Marke] Pack- und Produktions GmbH"
     stand auf fuenf Zeilen (Zeilenhoehe 161px gemessen). Die erste Spalte
     traegt den Namen, die uebrigen tragen Zahlen: also der ersten Spalte ein
     Drittel geben, dann passt der Name in zwei Zeilen. */
  html body #dashboard-view #overview-admin-section #adm-talent-performance-list > table.admin-data-table th:first-child {
    width: 30% !important;
  }
  /* Dieselbe Falle in den Detail-Fenstern von Brand und Talent */
  html body #dashboard-view #bd-campaign-list > table.admin-data-table.admin-data-table,
  html body #dashboard-view #td-campaign-list > table.admin-data-table.admin-data-table {
    width: 100% !important;
    min-width: 560px !important;
    table-layout: fixed !important;
  }

  /* Bei festem Layout MUSS langer Text umbrechen duerfen, sonst schiebt er
     sich unter die Nachbarspalte. Zahlen dagegen NIE umbrechen lassen —
     „[Betrag]" auf zwei Zeilen war ein eigener Fund (Zeilenhoehe 63px). */
  html body #dashboard-view .admin-main-section #campaign-status-admin-list > table.admin-data-table td,
  html body #dashboard-view .admin-main-section #campaign-status-admin-list > table.admin-data-table th,
  html body #dashboard-view #overview-admin-section #adm-talent-performance-list > table.admin-data-table td {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: none !important;
  }
  html body #dashboard-view .admin-main-section #campaign-status-admin-list > table.admin-data-table td.ac-cell-budget,
  html body #dashboard-view .admin-main-section #campaign-status-admin-list > table.admin-data-table td.ac-cell-date,
  html body #dashboard-view #overview-admin-section #adm-talent-performance-list > table.admin-data-table td:nth-child(n+3) {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }
}


/* ---------------------------------------------------------------------------
   T2 · DER HAMBURGER IST 42x42 — ZWEI PUNKT ZU KLEIN
   portal-mobile.css Z. 2585 gibt `.tt-navburger` fest 42x42px. Das ist der
   EINZIGE Weg in die Navigation, sobald die Seitenleiste zum Drawer wird —
   und liegt unter Apples Mindestmass von 44x44pt. Auf JEDER Seite gemessen.
   Der Bestand setzt kein !important, ein Klassen-Doppel genuegt.
--------------------------------------------------------------------------- */
@media (max-width: 900px), (pointer: coarse) {
  html body #dashboard-view header .header-content .tt-navburger.tt-navburger {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}


/* ---------------------------------------------------------------------------
   T3 · `max-height: 32px` KLEMMT ALLE KOPFZEILEN-BEDIENELEMENTE
   portal-v93-professional.css setzt fuer `.card-header-actions` und
   `.admin-overview-controls` gleichzeitig height/min-height/max-height auf
   32px — alle drei mit !important. Abschnitt J hebt height und min-height auf
   44px, laesst aber `max-height` stehen: die Klammer bleibt zu, gemessen
   blieben Suchfeld (212x32), Status-Filter (154x32), Vorlagen-Filter (138x32)
   und das Talent-Suchfeld (220x32) auf 32px.
   Es fehlte also genau EINE Eigenschaft.
--------------------------------------------------------------------------- */
@media (max-width: 900px), (pointer: coarse) {
  html body #dashboard-view .admin-main-section .card-header-actions.card-header-actions input,
  html body #dashboard-view .admin-main-section .card-header-actions.card-header-actions select,
  html body #dashboard-view .admin-main-section .card-header-actions.card-header-actions button,
  html body #dashboard-view .admin-main-section .card-header-actions.card-header-actions .search-box input,
  html body #dashboard-view .admin-main-section .card-header-actions.card-header-actions .btn-primary,
  html body #dashboard-view .admin-main-section .card-header-actions.card-header-actions .btn-secondary,
  html body #dashboard-view .admin-main-section .card-header-actions.card-header-actions .btn-icon,
  html body #dashboard-view .admin-main-section .card-header-actions.card-header-actions .btn-icon-action,
  html body #dashboard-view .admin-main-section .admin-overview-controls.admin-overview-controls input,
  html body #dashboard-view .admin-main-section .admin-overview-controls.admin-overview-controls select {
    max-height: none !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  /* Icon-Knoepfe bleiben quadratisch — v93 klemmt sie zusaetzlich auf 32px BREIT */
  html body #dashboard-view .admin-main-section .card-header-actions.card-header-actions .btn-icon,
  html body #dashboard-view .admin-main-section .card-header-actions.card-header-actions .btn-icon-action {
    width: 44px !important;
    min-width: 44px !important;
  }
  /* Knoepfe OHNE Klasse, die ihre Hoehe inline mitbringen (z. B. „Archiv" in
     der Kooperationsliste: `style="…height:38px…"`, gemessen 65x32).
     Inline schlaegt jede Datei — nur !important kommt daran vorbei. */
  html body #dashboard-view .admin-main-section .card-header-actions.card-header-actions > button[style],
  html body #dashboard-view .admin-main-section #show-archived-campaigns-btn {
    height: 44px !important;
    min-height: 44px !important;
    max-height: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}


/* ---------------------------------------------------------------------------
   T4 · SCHRIFTGROESSEN, DIE ABSCHNITT K NOCH NICHT KANNTE
   Alle drei stehen in Auszeichnungen, die man im Betrieb wirklich liest:
     · `.talent-pace`        10px   — „+12 %" in der Talent-Performance
     · `.adm-followup-pill`  10px   — „Follow-up (132d)" in der Brand-Uebersicht
     · `.inv-dunning-frist`  10.5px — „Frist abgelaufen" in der Rechnungsliste
   Die ersten beiden stehen in <style>-Bloecken IN admin/index.html (Z. 8774
   und 9180) — die laden nach jeder Datei. Ohne !important ist da nichts zu
   machen, mit !important dagegen problemlos (wichtig schlaegt Reihenfolge).
--------------------------------------------------------------------------- */
@media (max-width: 900px), (pointer: coarse) {
  html body #dashboard-view .admin-main-section .talent-pace,
  html body #dashboard-view .admin-main-section .adm-followup-pill,
  html body #dashboard-view .admin-main-section .inv-shell .inv-dunning-frist {
    font-size: 12px !important;
    line-height: 1.3 !important;
    padding: 2px 8px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   U · AB 901px AUF FINGER-GERAETEN — das grosse iPad faellt zwischen die Baender
   Gemessen auf dem iPad Pro 13" im Hochformat (1032x1244): ab 901px greift die
   DESKTOP-Fassung, die fuer die Maus gebaut ist. Auf einem Geraet, das man mit
   dem Finger bedient, bleiben dann:
        Seitenleisten-Reiter        223 x 36
        Melder-Glocke (Kopfzeile)    36 x 36
        „×" im Melder-Fenster        28 x 28
        „Alle ausblenden"           357 x 34
        Filter-Beschriftungen        9,5px
   Die Abschnitte A–C und S enden bei 900px, J/K/T greifen ueber `pointer:
   coarse` inzwischen mit — diese fuenf Stellen liegen aber ausserhalb von
   `.admin-main-section` und brauchen ihre eigene Regel.
   `(min-width: 901px) and (pointer: coarse)` ueberschneidet sich mit KEINEM
   anderen Block dieser Datei und laesst den Schreibtisch unberuehrt.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (pointer: coarse) {

  /* Seitenleiste: v93 klemmt mit
     `…#dashboard-view .admin-main-nav:not(:hover):not(:focus-within) .view-btn`
     (1·4·2) auf `--tt-nav-item-h: 36px`. Drei Klassen-Nennungen ergeben 1·5·2. */
  html body #dashboard-view .admin-main-nav.admin-main-nav .view-btn.view-btn.view-btn {
    min-height: 44px !important;
    height: auto !important;
  }
  /* Dreifach genannt, nicht doppelt: v93 klemmt die Unterpunkte mit
     `…admin-main-nav:not(:hover):not(:focus-within) .admin-nav-subitem` auf
     `--tt-nav-item-h, 36px` — das ist 1·4·2, also GENAU unsere Spezifitaet.
     Und weil admin/index.html portal-v93-professional.css in Zeile 9525 ein
     ZWEITES Mal laedt, steht v93 am Ende hinter uns und gewinnt jeden
     Gleichstand. Erst 1·5·2 entscheidet die Sache. */
  html body #dashboard-view .admin-main-nav.admin-main-nav .admin-nav-subitem.admin-nav-subitem.admin-nav-subitem {
    min-height: 44px !important;
    height: auto !important;
  }

  /* Kopfzeile: Glocke und Sprachumschalter */
  html body #dashboard-view header .header-actions .tt-notif-toggle-btn,
  html body #dashboard-view header .header-actions #admin-notif-toggle-btn,
  html body #dashboard-view header .header-actions .lang-toggle-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Melder-Fenster: Schliessen-Kreuz und Fusszeilen-Knopf */
  html body #dashboard-view #admin-notif-panel #admin-notif-close-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  html body #dashboard-view #admin-notif-panel #admin-notif-mark-all-btn {
    min-height: 44px !important;
    height: auto !important;
  }

  /* Filterleiste der Uebersicht: „Waehrung" / „Zeitraum" / „Talent" bei 9,5px */
  html body #dashboard-view #overview-admin-section .dash-toolbar > label.dash-control > span:first-child {
    font-size: 12px !important;
    letter-spacing: .3px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   V · IN DEN FENSTERN SELBST — Abschnitt O raeumt nur die FUSSLEISTE auf
   Gemessen am iPhone 17 Pro (402pt), Fenster einzeln aufgezogen:
        Kampagnen-Editor   43 Tippziele < 44pt, 63 Textstellen < 12px
        Marke bearbeiten   11 Tippziele (Reiterleiste 93x20 !), 4 Textstellen
        Marke-Detail       15 Textstellen < 12px
        Talent-Detail       1 Tippziel (139x34), 15 Textstellen
   Abschnitt O hat Fuss, Hoehe und Bildlauf der Fenster geordnet, die INHALTE
   aber nie angefasst: Eingabefelder blieben bei 36px, die Stammdaten-Reiter
   bei 20px Hoehe, die Erklaerzeilen bei 10,5–11px.
   Die Fenster haengen an `body`, nicht an `#dashboard-view` — deshalb hier
   derselbe Waechter wie in Abschnitt M/O: `body:has(#dashboard-view:not(
   .talent-shell))`. Damit kann nichts ins Talent-Portal lecken.
   ══════════════════════════════════════════════════════════════════════════ */
/* fs96: Grenze bei 1024px wieder aufgehoben. Auf dem iPad Pro 13" im
   Hochformat (1032pt) blieben sonst 47 Bedienelemente im Kampagnen-Editor und
   die drei Knoepfe im Bestaetigungsdialog bei 34–36px. Wie in Abschnitt R
   gilt: GROESSEN auf jedem Finger-Geraet, LAYOUT nur am Handy (das macht
   Abschnitt O bei <=768px). */
@media (max-width: 768px), (pointer: coarse) {

  /* --- Eingabefelder: 36px -> 44pt ------------------------------------- */
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog input[type="text"],
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog input[type="email"],
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog input[type="number"],
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog input[type="date"],
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog input[type="month"],
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog input[type="tel"],
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog input[type="url"],
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog input:not([type]),
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog select,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog textarea {
    min-height: 44px !important;
    height: auto !important;
    max-height: none !important;
    font-size: 16px !important;   /* unter 16px zoomt iOS beim Antippen hinein */
    box-sizing: border-box !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog textarea {
    min-height: 88px !important;
  }

  /* --- Reiterleiste der Stammdaten-Fenster: 93x20 ----------------------- */
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay.sd-stammdaten .sd-tabs .sd-tab-btn {
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* --- Ankreuz- und Auswahlfelder (gemessen 18x14, 14x30, 16x16) -------- */
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog input[type="checkbox"],
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog input[type="radio"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin: 8px !important;
    flex: 0 0 auto !important;
  }

  /* --- Aufklapper und kleine Knoepfe im Fensterkoerper ------------------ */
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog details > summary {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-body button,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .conn360 button {
    min-height: 44px !important;
    height: auto !important;
  }

  /* --- Schriftgroessen im Fensterkoerper -------------------------------- */
  /* `#campaign-edit-modal .cform-field > span:first-child` steht in
     admin/styles/form-sections.css mit 10,5px und !important (1·1·2) —
     die Klasse doppelt genannt reicht. */
  html body:has(#dashboard-view:not(.talent-shell)) #campaign-edit-modal .cform-field.cform-field > span:first-child,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .cform-hint,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .cform-required,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .cform-card-req,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .sd-mini-label,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .conn360-kpi-label,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .dash-kpi-label,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .dash-kpi-sub,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .dash-kpi-period,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .conn360-badge,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .sd-tabs .sd-tab-btn {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
}


/* ---------------------------------------------------------------------------
   V2 · KAMPAGNEN-EDITOR + 360°-ABZEICHEN — mit ID-Staerke nachgezogen
   Der Block V oben arbeitet mit dem Waechter `body:has(#dashboard-view…)`.
   Der ist gut fuers Abdichten, bringt aber nur EINE ID mit. Im Kampagnen-
   Editor sitzen die Feldhoehen jedoch in admin/styles/form-sections.css unter
        `#campaign-edit-modal .cform-field input[type="month"] {height:36px!}`
        `#campaign-edit-modal .cform-grid3 > .cform-field > input {height:34px!}`
   und zusaetzlich inline als `.campaign-form input {height:30px}`.
   Gemessen blieben danach: Startmonat 288x31, Segment-Knoepfe 30x30 und 36x30,
   „Position hinzufuegen" 153x29.
   Hier hilft nur die ID doppelt genannt (2·x·x) — dann ist Schluss.
   Die 360°-Abzeichen heissen `.conn360-section-badge` (oben stand
   versehentlich `.conn360-badge`, das gibt es nicht).
--------------------------------------------------------------------------- */
/* fs96: Grenze bei 1024px wieder aufgehoben. Auf dem iPad Pro 13" im
   Hochformat (1032pt) blieben sonst 47 Bedienelemente im Kampagnen-Editor und
   die drei Knoepfe im Bestaetigungsdialog bei 34–36px. Wie in Abschnitt R
   gilt: GROESSEN auf jedem Finger-Geraet, LAYOUT nur am Handy (das macht
   Abschnitt O bei <=768px). */
@media (max-width: 768px), (pointer: coarse) {

  html body #campaign-edit-modal#campaign-edit-modal .cform-field input,
  html body #campaign-edit-modal#campaign-edit-modal .cform-field select,
  html body #campaign-edit-modal#campaign-edit-modal .cform-field textarea,
  html body #campaign-edit-modal#campaign-edit-modal .cform-grid3 > .cform-field > input,
  html body #campaign-edit-modal#campaign-edit-modal input[type="month"],
  html body #campaign-edit-modal#campaign-edit-modal input[type="date"],
  html body #campaign-edit-modal#campaign-edit-modal input[type="number"],
  html body #campaign-edit-modal#campaign-edit-modal input[type="text"] {
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
    font-size: 16px !important;
  }
  html body #campaign-edit-modal#campaign-edit-modal .cform-field textarea {
    min-height: 88px !important;
  }
  /* Segment-Waehler „%“/„€“ und „Position hinzufuegen" */
  html body #campaign-edit-modal#campaign-edit-modal #cagency-seg > button,
  html body #campaign-edit-modal#campaign-edit-modal .cform-seg > button,
  html body #campaign-edit-modal#campaign-edit-modal #campaign-add-position-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    height: auto !important;
    font-size: 12px !important;
  }
  /* 360°-Abzeichen in Kampagne, Marke und Talent (11px) */
  /* fs102: Waechter nachgesetzt — der Dateikopf verspricht, dass jede Regel auf
     Body-Ebene `body:has(#dashboard-view:not(.talent-shell))` traegt. Diese hier
     taten es nicht. Heute folgenlos (das Talent-Portal kennt weder .modal-dialog
     noch .conn360-*), aber die Zusage soll stimmen. */
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .conn360-section-badge,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .conn360-header .conn360-section-badge,
  html body:has(#dashboard-view:not(.talent-shell)) #campaign-edit-modal .conn360-section-badge {
    font-size: 12px !important;
  }
}


/* ---------------------------------------------------------------------------
   V3 · DIE LETZTEN DREI STELLEN IM KAMPAGNEN-EDITOR
   · `#campaign-planned-month-input` („Startmonat") blieb als EINZIGES Feld bei
     31px stehen, obwohl V2 mit doppelter ID (2·2·3) darueberliegt. Es ist der
     einzige native Monatswaehler im Fenster; iOS zieht seine Hoehe aus dem
     eigenen Bedienelement. Mit eigener, dreifach gesetzter Kennung plus
     Innenabstand sitzt es.
   · `.conn360-node-label` (Marke / Koop / Talent im 360°-Schaubild) stand bei
     10px.
   Die 24x24-Ankreuzfelder bleiben bewusst so: 24px Kaestchen plus Zellen-
   Innenabstand ergeben eine ~44px hohe Trefferflaeche, ein 44px grosses
   Kaestchen wuerde die Zeilen sprengen (gleiche Abwaegung wie in Abschnitt J).
--------------------------------------------------------------------------- */
/* fs96: Grenze bei 1024px wieder aufgehoben. Auf dem iPad Pro 13" im
   Hochformat (1032pt) blieben sonst 47 Bedienelemente im Kampagnen-Editor und
   die drei Knoepfe im Bestaetigungsdialog bei 34–36px. Wie in Abschnitt R
   gilt: GROESSEN auf jedem Finger-Geraet, LAYOUT nur am Handy (das macht
   Abschnitt O bei <=768px). */
@media (max-width: 768px), (pointer: coarse) {
  html body #campaign-edit-modal #campaign-planned-month-input#campaign-planned-month-input {
    min-height: 44px !important;
    height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .conn360-node .conn360-node-label,
  html body:has(#dashboard-view:not(.talent-shell)) #campaign-edit-modal .conn360-node .conn360-node-label {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  /* Das „×" der Fenster-Kopfzeile war 34x34 — es ist der einzige Weg heraus,
     wenn die Fussleiste weggescrollt ist. */
  html body div.modal-overlay .modal-dialog .modal-header .modal-close,
  html body div.modal-overlay .modal-dialog > .modal-header > button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   X · BESTAETIGUNGSDIALOGE (common/portal-modal-helpers.js)
   Diese Fenster ersetzen im ganzen Portal `window.confirm` — auch vor dem
   Loeschen. Weder portal-mobile.css noch diese Datei kannten sie bisher:
   `.pmh-` kommt in beiden Dateien kein einziges Mal vor.
   Gemessen am iPhone 17 Pro (402pt), Dialog „Kooperation wirklich loeschen?"
   mit drei Knoepfen:
        Abbrechen 98x34 · Nur archivieren 99x34 · Endgueltig loeschen 107x34
   Drei Knoepfe nebeneinander (304px Knopfbreite in einem 370px-Fenster), alle
   34px hoch — und der gefaehrlichste davon liegt direkt neben „Abbrechen".
   Untereinander, volle Breite, 44pt; die zerstoererische Aktion nach UNTEN,
   damit sie nicht dort sitzt, wo der Daumen ohnehin hinfaehrt.

   Das Stylesheet legt portal-modal-helpers.js zur LAUFZEIT in <head> —
   es steht damit hinter dieser Datei, also ausnahmslos !important.
   `.pmh-*` gehoert BEIDEN Portalen (gemeinsame Datei), darum der Waechter.
   ══════════════════════════════════════════════════════════════════════════ */
/* fs96: Grenze bei 1024px wieder aufgehoben. Auf dem iPad Pro 13" im
   Hochformat (1032pt) blieben sonst 47 Bedienelemente im Kampagnen-Editor und
   die drei Knoepfe im Bestaetigungsdialog bei 34–36px. Wie in Abschnitt R
   gilt: GROESSEN auf jedem Finger-Geraet, LAYOUT nur am Handy (das macht
   Abschnitt O bei <=768px). */
@media (max-width: 768px), (pointer: coarse) {
  html body:has(#dashboard-view:not(.talent-shell)) .pmh-backdrop .pmh-dialog {
    width: min(440px, calc(100vw - 24px)) !important;
    padding: 20px 18px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) .pmh-backdrop .pmh-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) .pmh-backdrop .pmh-actions .pmh-btn {
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    font-size: 14px !important;
    justify-content: center !important;
  }
  /* Reihenfolge: Bestaetigen oben, Abbrechen unten — und die zerstoererische
     Aktion ganz unten, weg vom Daumen. */
  html body:has(#dashboard-view:not(.talent-shell)) .pmh-backdrop .pmh-actions .pmh-btn-danger { order: 3 !important; }
  html body:has(#dashboard-view:not(.talent-shell)) .pmh-backdrop .pmh-actions [data-pmh="cancel"] { order: 1 !important; }
  html body:has(#dashboard-view:not(.talent-shell)) .pmh-backdrop .pmh-actions [data-pmh="secondary"] { order: 2 !important; }
  html body:has(#dashboard-view:not(.talent-shell)) .pmh-backdrop .pmh-desc { font-size: 14px !important; }
  html body:has(#dashboard-view:not(.talent-shell)) .pmh-backdrop .pmh-title { font-size: 17px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   fs102 · NACHTRAG AUS DER GEGENPRUEFUNG
   Fuenf Stellen, die der Bau-Durchgang uebersehen oder verschlechtert hat.
   Jede ist auf echten Geraeten gemessen worden, nicht am schmalen Fenster.
   Steht ganz unten, weil es Korrekturen an eigenen Regeln weiter oben sind.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px), (pointer: coarse) {

  /* F1 — REGRESSION. Die Reiterknoepfe der Stammdaten-Fenster wurden auf 44px
     angehoben, ihr Behaelter aber nicht. `.sd-tabs` traegt aus stammdaten.css
     `overflow-x: auto` — und `auto` gilt fuer BEIDE Achsen, also wurde senkrecht
     beschnitten. Gemessen (iPhone 17, „Marke bearbeiten"): Leiste 33px hoch,
     Inhalt 50px — die weisse Pille „Allgemein" war unten glatt abgeschnitten.
     Zusaetzlich drueckt `.modal-dialog` als Flex-Spalte die Leiste zusammen,
     sobald der Inhalt hoeher ist als das Fenster. Deshalb `flex: 0 0 auto`. */
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .sd-tabs {
    flex: 0 0 auto !important;
    min-height: 52px !important;
    height: auto !important;
    align-items: center !important;
    overflow-y: visible !important;
  }

  /* F4 — UNBEDIENBAR. „Umfang der Leistung" und „Nutzungsrechte" im Kampagnen-
     Editor sind auf dem Handy 22px BREIT. Der Aufklapp-Behaelter rechnet als
     Vielspalten-Raster (gemessen: `162px 2px 0px 0px 0px …`, 12 Spuren), die
     Formularzeile landet in einer 2-px-Spur. Nicht von der Mobil-Schicht
     verursacht — sie hat die Felder aber nur hoeher gemacht, nicht breiter. */
  html body #campaign-edit-modal#campaign-edit-modal .cform-disclosure-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  html body #campaign-edit-modal#campaign-edit-modal .cform-disclosure-body .cform-row--align-labels {
    display: block !important;
    min-width: 0 !important;
  }
  html body #campaign-edit-modal#campaign-edit-modal .cform-disclosure-body textarea {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* F6 — die Filterchips ueber der Kooperationsliste („Alle 68 / To-Do 7 / …")
     sind echte Filterknoepfe und blieben auf JEDEM Geraet 29px hoch. Block K
     fasst nur `.inv-shell .inv-chip` an; diese hier haengen in
     `#campaign-status-summary`. Dazu die Kleinschrift im aufgeklappten Detail. */
  html body #dashboard-view #campaign-status-summary .inv-chip {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  html body #dashboard-view #campaign-status-summary .inv-chip b,
  html body #dashboard-view .admin-main-section .admin-overview-pill,
  html body #dashboard-view .admin-main-section .cdp-section-title,
  html body #dashboard-view .admin-main-section .cdp-row dt {
    font-size: 12px !important;
  }
  /* Ganze Woerter umbrechen, nicht mitten in der Adresse. `anywhere` zerlegte
     [E-Mail] in drei Zeilen. */
  html body #dashboard-view .admin-main-section .cdp-row dd {
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

/* F3 — Spezifitaets-Gleichstand. `portal-v93-professional.css` setzt das
   Suchfeld mit derselben Spezifitaet (1·3·3) auf `max-width: 280px !important`.
   Bei Gleichstand entscheidet die Ladereihenfolge — und v93 wird ein zweites
   Mal im Body geladen. Die Einbindung dieser Datei steht deshalb DANACH; mit
   der dritten Nennung (1·4·3) ist die Position zusaetzlich egal. Gemessen:
   drei Bedienelemente in einer Spalte, eines 280px, zwei 374px breit. */
@media (max-width: 768px) {
  html body #dashboard-view .admin-main-section
    .admin-overview-controls.admin-overview-controls.admin-overview-controls > input,
  html body #dashboard-view .admin-main-section
    .admin-overview-controls.admin-overview-controls.admin-overview-controls > select,
  html body #dashboard-view .admin-main-section
    .admin-overview-controls.admin-overview-controls.admin-overview-controls > button {
    max-width: none !important;
    width: 100% !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   fs104 · LOCKSTEP — WAS DAS TALENT-PORTAL AUF DEM HANDY KANN, KANN DAS ADMIN AUCH
   ---------------------------------------------------------------------------
   Der Fable-Durchgang hat drei Stellen gefunden, an denen dieselbe Komponente in
   den beiden Portalen zwei verschiedene Welten war. Die Hausregel dieses Projekts
   heisst „Design immer in BEIDEN Portalen"; hier wird sie eingehalten.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · KALENDER ──────────────────────────────────────────────────────────
   Der Kalender ist EINE Datei (common/calendar.js) und wird von beiden Portalen
   geladen. Mobil umgebaut wurde er aber nur im Talent-Portal. Gemessen im Admin
   auf dem iPhone: Termin-Pillen 9,5–10,5 px, Text abgeschnitten — man sieht, DASS
   an einem Tag etwas ist, aber nie WAS („09:0…", „Sund…", „Fälli…"). Jeder Termin
   muss einzeln angetippt werden. Dieselbe Behandlung wie in
   portal-mobile-talent.css §9/§16, nur mit dem Admin-Anker.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-dowrow {
    display: none !important;
  }
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-cells {
    display: block !important;
    grid-auto-rows: auto !important;
    min-width: 0 !important;
  }
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-cell {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    min-height: 46px !important;
    min-width: 0 !important;
    padding: 8px 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #eef0f4 !important;
    overflow: visible !important;
  }
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-daynum {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
    align-self: center !important;
  }
  /* Tage ohne Termin: schmale, ruhige Zeile */
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section
    .ttcal-cell:not(:has(.ttcal-pill)):not(:has(.ttcal-more)) {
    min-height: 0 !important;
    padding: 3px 12px !important;
    opacity: .55 !important;
  }
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section
    .ttcal-cell:not(:has(.ttcal-pill)) .ttcal-daynum {
    width: 26px !important;
    height: 26px !important;
    font-size: 12.5px !important;
  }
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-daylist {
    gap: 6px !important;
    min-width: 0 !important;
  }
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-pill {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px !important;
    max-width: 100% !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
  }
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-pill-txt {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-more {
    min-height: 44px !important;
    font-size: 12.5px !important;
  }
  /* Die Fuellzellen vor dem Monatsersten haben in der Liste keinen Sinn.
     MUSS nach der .ttcal-cell-Regel stehen (gleiche Spezifitaet). */
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-cell.ttcal-cell-empty {
    display: none !important;
  }
  /* Dieselbe Falle wie im Talent-Portal: Raster und Zellen duerfen ihre
     natuerliche Hoehe haben, gescrollt wird eine Ebene hoeher. Ohne das
     schneidet `.ttcal-grid{overflow:hidden}` die zweite Monatshaelfte weg. */
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-grid {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-cells {
    flex: 0 0 auto !important;
    height: auto !important;
  }
}
@media (min-width: 561px) and (max-width: 900px) {
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-cell {
    min-height: 104px !important;
  }
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-pill {
    min-height: 32px !important;
    font-size: 12px !important;
    padding: 6px 8px !important;
  }
}

/* ── 2 · RECHNUNGSLISTE ────────────────────────────────────────────────────
   Dieselbe Liste, derselbe Renderer (common/invoice-overview-render.js), zwei
   gegensaetzliche Entscheidungen: Das Talent bekommt unter 1025 px Karten, der
   Admin die Tabelle mit mindestens 1732 px Breite. Und seit v228fs4 ist die
   Aktionsspalte NICHT mehr rechts festgeklebt — „An Marke senden" und „Mehr"
   liegen damit rund 900 px ausserhalb des Bildes. Auf dem iPad im Hochformat
   sind die beiden wichtigsten Handlungen der Seite real unerreichbar.
   Regel ab jetzt in BEIDEN Portalen: passt die Tabelle nicht, kommen Karten.
   fs206 (15.09.2026): Dieser Block galt bis 1024 px und damit auch auf dem Telefon. Dort
   ueberschrieb er die gemeinsame Kartenansicht aus portal-mobile.css (Beschriftung links, Wert
   rechts, Status oben rechts) mit gestapelten Feldern und einem Status in eigener Zeile.
   Gemessen am iPhone 17 Pro: Nummer und Status je 52 px hoch untereinander, jede Karte etwa
   doppelt so lang wie im Talent-Portal. Jetzt nur noch Tablet (769-1024 px), genau wie der
   Talent-Block 7a; das Telefon bekommt in beiden Portalen dieselbe Karte.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  html body #dashboard-view:not(.talent-shell) .inv-table-wrap { overflow-x: visible !important; }
  html body #dashboard-view:not(.talent-shell) .inv-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }
  html body #dashboard-view:not(.talent-shell) .inv-table colgroup,
  html body #dashboard-view:not(.talent-shell) .inv-table thead { display: none !important; }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody { display: block !important; }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr {
    display: block !important;
    width: 100% !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    margin: 0 0 10px !important;
    padding: 10px 12px !important;
  }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td {
    display: block !important;
    width: auto !important;
    border: 0 !important;
    padding: 4px 0 !important;
    white-space: normal !important;
    font-size: 13px !important;
    background: transparent !important;
    /* fs208: invoice-overview.css:282-289 gibt Tabellenzellen eine feste Zeilenhoehe mit overflow hidden. In der
       Karte schnitt das Mahnfrist („in 3 Tagen faellig“) und das Datum der letzten Aktivitaet ab — gemessen bei
       769x1024 und 844x390, also iPad hochkant und Telefon quer. Wie im Talent-Portal (portal-mobile-talent.css:2082). */
    height: auto !important;
    overflow: visible !important;
  }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 12px !important;
    color: #6b7280;
    margin-bottom: 2px;
  }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td.sticky,
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td.sticky-num,
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td.sticky-stat {
    position: static !important;
    left: auto !important;
  }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td.inv-actions-cell {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-top: 10px !important;
  }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td.inv-actions-cell .inv-btn.small,
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td.inv-actions-cell .inv-kebab {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* fs104: In der Tagesliste entfaellt die Wochentags-Kopfzeile — der Wochentag
   gehoert dann in die Zeile selbst, sonst laesst sich nicht mehr feststellen,
   ob der 23. ein Samstag ist. */
@media (max-width: 560px) {
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-daynum {
    flex-direction: column !important;
    line-height: 1 !important;
    gap: 1px !important;
  }
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-wtag {
    display: block !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    opacity: .7 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   fs105 · NACHMESSUNG VON fs102 UND fs104 AUF ECHTEN GERAETEMASSEN
   ---------------------------------------------------------------------------
   fs102 und fs104 wurden gebaut, aber nie auf einem Geraet gemessen. Diese drei
   Stellen halten der Messung nicht stand. Gemessen wurde mit exakten
   Geraetemassen (Emulation.setDeviceMetricsOverride, mobile + deviceScaleFactor
   2/3, pointer:coarse) auf dem echten Markup mit echten Datenbankzeilen —
   jeweils einmal mit und einmal ohne diese Datei.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── N1 · RECHNUNGSLISTE AUF DEM iPAD IM QUERFORMAT ────────────────────────
   fs104 §2 hat die Kartenansicht bei `max-width: 1024px` enden lassen. Das
   Talent-Portal hat fuer genau denselben Fall einen zweiten Block mit dem Tor
   der Finger-Bedienung (portal-mobile-talent.css, „Rechnungen: die Karten-
   ansicht auch im Querformat"). Im Admin fehlte er — die Hausregel „Design
   immer in BEIDEN Portalen" war also genau dort verletzt, wo fs104 sie
   herstellen wollte. invoice-overview.css setzt seinerseits schon voraus, dass
   es die Karten dort gibt (Block „(min-width: 1025px) and (pointer: coarse)",
   Zeilentoenung der Karten).
   Gemessen, iPad Pro 11" quer (1210 pt, Finger):
     vorher  Tabelle 1873 px breit, 22 Aktionsknoepfe, der aeusserste endet
             927 px rechts ausserhalb des Bildes; erreichbar nur ueber rund
             970 px Wischen INNERHALB von .inv-table-wrap
     nachher Karten 904 px breit, alle 22 Knoepfe im Bild (0 px ausserhalb),
             kein Querscrollen
   Dieselben Regeln wie im 1024er-Block darueber, nur mit dem Finger-Tor.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (pointer: coarse) {
  html body #dashboard-view:not(.talent-shell) .inv-table-wrap { overflow-x: visible !important; }
  html body #dashboard-view:not(.talent-shell) .inv-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }
  html body #dashboard-view:not(.talent-shell) .inv-table colgroup,
  html body #dashboard-view:not(.talent-shell) .inv-table thead { display: none !important; }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody { display: block !important; }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr {
    display: block !important;
    width: 100% !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    margin: 0 0 10px !important;
    padding: 10px 12px !important;
  }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td {
    display: block !important;
    width: auto !important;
    border: 0 !important;
    padding: 4px 0 !important;
    white-space: normal !important;
    font-size: 13px !important;
    background: transparent !important;
    /* fs208: invoice-overview.css:282-289 gibt Tabellenzellen eine feste Zeilenhoehe mit overflow hidden. In der
       Karte schnitt das Mahnfrist („in 3 Tagen faellig“) und das Datum der letzten Aktivitaet ab — gemessen bei
       769x1024 und 844x390, also iPad hochkant und Telefon quer. Wie im Talent-Portal (portal-mobile-talent.css:2082). */
    height: auto !important;
    overflow: visible !important;
  }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 12px !important;
    color: #6b7280;
    margin-bottom: 2px;
  }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td.sticky,
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td.sticky-num,
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td.sticky-stat {
    position: static !important;
    left: auto !important;
  }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td.inv-actions-cell {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-top: 10px !important;
  }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td.inv-actions-cell .inv-btn.small,
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td.inv-actions-cell .inv-kebab {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* ── N2 · SORTIERKOEPFE DER BUCHUNGEN: `min-height` GILT FUER TABELLENZELLEN NICHT
   Der fs102-Block (Abschnitt H) setzt `min-height: 44px` auf `th.tx-sortable`.
   Auf ein `display: table-cell` wirkt `min-height` nach CSS-Spezifikation aber
   nicht — die Regel war wirkungslos, die Sortierkoepfe blieben unter 44 pt,
   obwohl sie `role="button"` tragen und angetippt werden.
   Gemessen (63 Sortierkoepfe, Juli–August-Bloecke):
     ohne diese Datei   36,8 pt (iPhone 17) · 37,3 pt (iPad quer)
     mit fs102          40,1 pt · 40,6 pt  -> 63 von 63 weiter unter 44
     mit dieser Regel   44,0 pt            -> 0 von 63 unter 44
   Fuer Tabellenzellen wirkt `height` wie eine Mindesthoehe — deshalb `height`.
   -------------------------------------------------------------------------- */
@media (max-width: 900px), (pointer: coarse) {
  html body #dashboard-view .admin-main-section th.tx-sortable {
    height: 44px !important;
  }
}

/* ── N3 · KAMPAGNEN-EDITOR: „UMFANG DER LEISTUNG" / „NUTZUNGSRECHTE" ───────
   fs102 F4 hat die 22-px-Felder repariert, aber nicht zu Ende: der Aufklapp-
   Behaelter ist `display: grid` OHNE Spaltenvorgabe, seine direkten Kinder
   `.cform-field` tragen aus form-sections.css `grid-column: span 12`. Damit
   entstehen ZWOELF implizite Spuren. Die Formularzeile `.cform-row--align-labels`
   steht auf `grid-column: auto` und bekommt davon genau EINE Spur.
   Gemessen, iPhone 17 (402 pt), Feld „Umfang der Leistung":
     ohne diese Datei   154 px
     mit fs102          224 px   (Geschwisterfelder daneben: 356 px)
     mit dieser Regel   356 px   = volle Spalte, wie die Geschwister
   iPad Pro 11" quer (1210 pt): 257,5 px -> 900 px.
   Der Behaelter bekommt dasselbe Zwoelfer-Raster, das seine Kinder ohnehin
   voraussetzen; alles darin spannt ueber die volle Breite.
   -------------------------------------------------------------------------- */
@media (max-width: 768px), (pointer: coarse) {
  html body #campaign-edit-modal#campaign-edit-modal .cform-disclosure-body {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
  html body #campaign-edit-modal#campaign-edit-modal .cform-disclosure-body > * {
    grid-column: 1 / -1 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   fs108 · DER ADMIN-CHAT WAR AUF JEDEM GERAET UNBEDIENBAR
   ---------------------------------------------------------------------------
   Der Chat ist EINE Komponente fuer beide Portale, seine Mobil-Regeln stehen aber
   in common/chat.css auf `#dashboard-view #chat-panel` — diese Kennung gibt es nur
   im Talent-Portal. Im Admin heisst der Bereich `#chat-admin-section`.
   Zwei Folgen, beide gemessen (iPhone 17, 402x874, echte Nachrichten geladen):
     · Der Panelkopf („Chat / Konversationen mit deinen Talents …") bleibt stehen und
       schiebt die Chat-Flaeche auf y = 189,9 statt y = 70.
     · Die Hoehenformel rechnet aber weiter, als begaenne sie direkt unter der
       Portal-Kopfzeile: 100dvh minus 64px. Die Flaeche bleibt 804 px hoch.
   Ergebnis: Das SCHREIBFELD endet bei y = 993,9 — also 119,9 px UNTER der Bildkante.
   Zu null Prozent sichtbar, auf jedem geprueften Geraet. Man kann im Admin-Portal
   am Telefon nicht antworten.
   Behebung wie im Talent: Kopf weg, Hoehe aus dem, was wirklich da ist.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Der Panelkopf ist doppelt — die Chat-Flaeche traegt ihre eigene Ueberschrift. */
  html body #dashboard-view:not(.talent-shell) #chat-admin-section > .talent-panel-header {
    display: none !important;
  }
  html body #dashboard-view:not(.talent-shell) #chat-admin-section {
    padding-bottom: 0 !important;
  }
  /* Nicht mehr rechnen, sondern messen: der Rest zwischen Oberkante der Flaeche und
     dem unteren Bildrand. Damit ist es egal, was darueber steht. */
  html body #dashboard-view:not(.talent-shell) #chat-admin-section .ttchat-shell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  html body #dashboard-view:not(.talent-shell) #chat-admin-section #admin-chat-mount {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100dvh - var(--tt-header-h, 64px) - 12px - env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
  }
  html body #dashboard-view:not(.talent-shell) #chat-admin-section .ttchat-section {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Nur die Nachrichten rollen; Kopf und Schreibfeld stehen fest. */
  html body #dashboard-view:not(.talent-shell) #chat-admin-section .ttchat-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  html body #dashboard-view:not(.talent-shell) #chat-admin-section .ttchat-composer {
    flex: 0 0 auto !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Die Bedienelemente des Chats auf Fingermass — im Talent sind sie es laengst. */
  html body #dashboard-view:not(.talent-shell) #chat-admin-section .ttchat-attach-btn,
  html body #dashboard-view:not(.talent-shell) #chat-admin-section .ttchat-send,
  html body #dashboard-view:not(.talent-shell) #chat-admin-section .ttchat-back,
  html body #dashboard-view:not(.talent-shell) #chat-admin-section .ttchat-composer button {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   fs112 · FUENF MESSFEHLER DER ADMIN-MOBIL-SCHICHT
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── fs112 · 2 · TAGE OHNE TERMIN SIND 33-px-TIPPZIELE ─────────────────────
   Wortgleich zu portal-mobile-talent.css §fs112·2 — der fs104-Block §1 dieser
   Datei hat die Regel aus dem Talent-Portal uebernommen und damit auch ihren
   Fehler. Die Tageszelle IST ein Tippziel: calendar.js haengt `data-cal="day"`
   auf „neuen Termin anlegen".
   GEMESSEN (Finger-Emulation, echtes Markup, echter Renderer): 33,0 px bei
   402 pt, 30 von 31 Zellen des Augusts 2026 unter 44 pt. Ohne diese Datei
   waeren es 89,9–108,5 px.
   Keine ::after-Trefferflaeche: bei 33 px Zeilenabstand wuerden sich die
   Flaechen benachbarter Tage ueberlappen und man traefe den falschen Tag.
   NACHHER gemessen: 44,0 px, 0 von 31 unter 44.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section
    .ttcal-cell:not(:has(.ttcal-pill)):not(:has(.ttcal-more)) {
    min-height: 44px !important;
    padding: 3px 12px !important;
    align-items: center !important;
  }
}

/* ── fs112 · 3 · DIE AGENDA-ANSICHT („LISTE") WURDE NIE ANGEFASST ──────────
   `.ttcal-agenda-item` (common/calendar.css) ist ein echter <button>, der den
   Termin oeffnet — und blieb als einziger Teil des Kalenders unbehandelt.
   GEMESSEN: 26,0 px bei 402 pt UND bei 1210 pt (iPad quer), 5 von 5 Eintraegen
   unter 44 pt. Dazu frisst `.ttcal-agenda-time` mit `min-width: 92px` bei
   402 pt 92 von 328 px Zeilenbreite fuer das Wort „ganztaegig"; gemessen
   wurden 5 von 5 abgeschnittenen Titeln (scrollWidth groesser als clientWidth).
   Dieselbe Behandlung wie im Talent-Portal, nur mit dem Admin-Anker.
   NACHHER gemessen: 44,0 px, 0 abgeschnittene Titel.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px), (pointer: coarse) {
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-agenda-item {
    min-height: 44px !important;
    align-items: center !important;
    padding: 7px 8px !important;
  }
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-agenda-time {
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-agenda-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    line-height: 1.3 !important;
  }
}

/* ── fs112 · 4 · DIE KALENDER-WERKZEUGLEISTE BLEIBT IM ADMIN 36 px ─────────
   Der fs104-Block §1 dieser Datei hat vom Talent-Portal nur das Raster
   uebernommen (`.ttcal-pill/.ttcal-cell/.ttcal-grid/.ttcal-daynum`) — die
   Bedienleiste darueber blieb auf ihrer Grundhoehe aus common/calendar.css
   (`height: 36px`).
   GEMESSEN (iPhone 17, 402 pt, Finger): 7 von 8 Bedienelementen 36,0 px —
   ‹ · › · „Heute" · „Monat" · „Liste" · „Ausgeblendete" · „+ Termin". Nur der
   Talent-Filter (ein <select>) erreichte 44. Identisch auf dem iPad Pro 834
   und im Querformat 1210, in Monats- wie Listenansicht.
   Im Talent-Portal ist das laengst geloest (dort gemessen 0 von 6 unter 44) —
   gleiche Behandlung, Admin-Anker. `height: auto` muss mit, sonst gewinnt die
   feste Hoehe von calendar.css gegen `min-height`.
   NACHHER gemessen: 0 von 8 unter 44.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px), (pointer: coarse) {
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-navbtn,
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-todaybtn,
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-viewbtn,
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-hiddentoggle,
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-addbtn,
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-filter {
    min-height: 44px !important;
    height: auto !important;
  }
  /* Der Vor/Zurueck-Knopf ist quadratisch — sonst waere er 36 px breit. */
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-navbtn {
    min-width: 44px !important;
    width: 44px !important;
  }
}

/* ── fs112 · 4b · DIE TERMIN-PILLE BLEIBT IM ADMIN BEI 561–900 px 32 px ───
   Beim Nachmessen von fs112 · 4 aufgefallen: der fs104-Block §1 dieser Datei
   uebernimmt vom Talent-Portal alles ausser einer Zahl. Im Band 561–900 px
   steht dort `.ttcal-pill { min-height: 32px }`, im Talent-Portal 44px.
   GEMESSEN (Finger): 561 pt 68x32, 834 pt 104x32 — die Pille oeffnet den Termin,
   ist also ein Tippziel. Im Talent-Portal am selben Mass 44. Angeglichen.
   -------------------------------------------------------------------------- */
@media (min-width: 561px) and (max-width: 900px) {
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-pill {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.25 !important;
  }
  html body #dashboard-view:not(.talent-shell) #calendar-admin-section .ttcal-more {
    min-height: 44px !important;
  }
}

/* ── fs112 · 5 · DIE FUSSLEISTE DER STAMMDATEN-FENSTER BLEIBT AUF JEDEM iPAD 34 pt
   Block O haengt an `@media (max-width: 768px)` — ohne Finger-Tor. Die
   Nachbarbloecke dieser Datei haben es (Block R: „AB 769px AUF FINGER-GERAETEN
   … nur die Groessen, nicht das Layout").
   GEMESSEN am Brand-Fenster (Brand loeschen · Abbrechen · Brand speichern):
     768 px, Finger   44,0 · 44,0 · 44,0
     769 px, Finger   34,0 · 34,0 · 34,0
     iPad Air 820     34,0 · 34,0 · 34,0
     iPad Pro 834     34,0 · 34,0 · 34,0
     iPad quer 1180   34,0 · 34,0 · 34,0
     iPad Pro quer 1210  34,0 · 34,0 · 34,0
   Ein Pixel Bildschirmbreite kippt also „Brand speichern" von treffbar auf
   nicht treffbar.
   BEHEBUNG nach dem Muster von Block R: oberhalb 768 px nur die GROESSE
   nachziehen, nicht das Layout. Das Stapeln in voller Breite bleibt dem Handy
   vorbehalten — auf dem iPad ist fuer die Knopfreihe genug Platz.
   NACHHER gemessen: 44,0 px auf allen sechs Massen.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (pointer: coarse) {
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-footer > button,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-footer > .btn,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-footer > a,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-footer > div > button,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-dialog .modal-footer > div > .btn,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay.sd-stammdaten .modal-footer > button,
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay.sd-stammdaten .modal-footer > div > button {
    min-height: 44px !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
  html body:has(#dashboard-view:not(.talent-shell)) div.modal-overlay .modal-header .modal-close {
    min-width: 44px !important; width: auto !important;
    min-width: 44px !important; min-height: 44px !important;
  }
}

/* ── fs112 · 6 · DAS ETIKETT DER KARTENZEILEN TRAEGT NICHT AUF ALLEN TOENUNGEN
   Der gemeldete Fund („zwei Graustufen") betrifft das Talent-Portal; das
   Admin-Portal war mit #6b7280 in beiden Kartenbloecken schon einheitlich.
   GEMESSEN faellt es trotzdem durch, sobald die Karte nicht weiss ist:
     Weiss 4,83:1 · Genehmigt-Karte 4,65:1 — aber
     letzte Mahnung (#F8D8D4) 3,63:1 · 2. Mahnung (#FBE6E2) 4,03:1 · Versendet 4,17:1
   Dieselbe Farbe wie im Talent-Portal (#5a6270, schlechtester Fall 4,62:1) haelt
   die Hausregel „Design immer in BEIDEN Portalen" ein und traegt auf allen
   fuenf hellen Toenungen. Die Inkasso-Karte ist ausgenommen, dort gilt hell.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px), (pointer: coarse) {
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr:not(.inv-row--inkasso) > td[data-label]::before {
    color: #5a6270 !important;
    font-size: 12px !important;
  }
}

/* ── fs112 · 8 · „BETRAG" UND „SALDO" SPRINGEN IN DER KARTE NACH RECHTS ────
   In der Kartenansicht des Admin-Portals (fs104 §2 und fs105 N1) steht jede
   Zeile gestapelt: Etikett oben, Wert darunter. `.inv-money-cell` und die
   Saldo-Zelle erben ihr `text-align: right` aber weiter aus der
   Tabellenansicht.
   GEMESSEN, iPad Pro 11" im Querformat (1210 pt, Finger): alle Zellen beginnen
   bei x = 291, „Betrag" und „Saldo" bei x = 1116 — ein Sprung von 825 px
   INNERHALB einer Karte. iPad Pro 834: 33 gegen 750, also 717 px.
   Auf dem Handy (402 pt) trifft es sogar 7 von 7 Zellen: dort setzt
   portal-mobile.css `text-align: right` auf jedes <td>, waehrend die
   Admin-Schicht die Zelle auf `display: block` stellt — die ganze Karte steht
   rechtsbuendig, Etiketten inklusive.
   In der Karte gehoert alles nach links. NACHHER gemessen: alle Zellen bei
   derselben x-Position.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px), (pointer: coarse) {
  html body #dashboard-view:not(.talent-shell) .inv-table tbody td {
    text-align: left !important;
  }
}

/* ── fs112 · NACHTRAG · DIE ADMIN-KARTE VERLIERT UNTER 769 px IHRE TOENUNG ─
   Kein gemeldeter Fund, aber beim Nachmessen von fs112 · 1 aufgefallen und
   derselbe Fehler eine Ebene tiefer:
   invoice-overview.css faerbt seit fs104 die KARTE (das <tr>) statt ihrer
   Zeilen — Gewicht 0,3,2. Dagegen steht
   `html body #dashboard-view .inv-table tbody tr { background: #fff !important }`
   aus common/portal-mobile.css (Gewicht 1,2,5) im Band bis 768 px.
   Das Talent-Portal hat dagegen eine eigene Regel (portal-mobile-talent.css,
   „fs104-NACHMESSUNG"); im Admin fehlte sie.
   GEMESSEN (iPhone 17, 402 pt, Finger, Inkasso-Rechnung):
     Karte rgb(255,255,255) statt rgb(127,29,29)
     Etikett der Zeile rgb(252,233,233) auf Weiss = 1,17:1
     Betreffzeile 3,14:1
   Bei 834 pt dieselbe Karte korrekt dunkelrot. Ein Geraet, zwei Wahrheiten.
   Dieselben sechs Farben wie im Talent-Portal, mit dem Gewicht der Kartenregel.
   NACHHER gemessen: Karte rgb(127,29,29), Kontrast 8,57:1.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* fs235 (M-CSS1): Die weisse Kartenregel schlug auch die Grundtoenungen — Bezahlt (gruen) war weiss,
     Versendet stand im alten Gruen. Toenungen zuerst, damit Mahnstufen/Genehmigt/Versendet/Inkasso gewinnen. */
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--red    { background: var(--inv-red-bg, #fff5f5) !important; }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--green  { background: var(--inv-green-bg, #c6e8cf) !important; }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--amber  { background: var(--inv-amber-bg, #fffaf0) !important; }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--blue   { background: var(--inv-blue-bg, #f5f8fc) !important; }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--dun-first  { background: #FDF1EC !important; }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--dun-second { background: #FBE6E2 !important; }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--dun-final  { background: #F8D8D4 !important; }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--genehmigt  { background: #f6fcf9 !important; }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--versendet  { background: #e4f2f5 !important; }
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--inkasso    { background: #7F1D1D !important; color: #FCE9E9 !important; }
  /* Die inneren Zeilen bleiben durchsichtig — sonst entstehen wieder Streifen. */
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--dun-first  > td,
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--dun-second > td,
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--dun-final  > td,
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--genehmigt  > td,
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--versendet  > td,
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--inkasso    > td { background: transparent !important; }
  /* Die Aktionsspalte bleibt ausgenommen: ihre Knoepfe tragen eigene Farben. */
  html body #dashboard-view:not(.talent-shell) .inv-table tbody tr.inv-row--inkasso > td:not(.inv-actions-cell) {
    color: #FCE9E9 !important;
  }
}

/* ── fs235 (N-CSS2) · VERTRAGS-VORSCHAU IM ADMIN — Spiegel von portal-mobile-talent.css §17 ─────
   portal-v93-professional.css erzwingt unter 900 px `html body #dashboard-view table { min-width:760px }`,
   der Vorschau-Behaelter (preview-content.css) klippt waagerecht. Tabellen im Vertrag wurden rechts
   abgeschnitten. Nur die Vorschau; .inv-table und echte Datentabellen bleiben unberuehrt.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  html body #dashboard-view:not(.talent-shell) #preview-inline-section table:not(.inv-table):not(.admin-data-table),
  html body #dashboard-view:not(.talent-shell) .preview-a4-page table:not(.inv-table):not(.admin-data-table),
  html body #dashboard-view:not(.talent-shell) .preview-inline-wrapper table:not(.inv-table):not(.admin-data-table) {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
  html body #dashboard-view:not(.talent-shell) .preview-a4-page table th,
  html body #dashboard-view:not(.talent-shell) .preview-a4-page table td {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  html body #dashboard-view:not(.talent-shell) .preview-inline-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}