/* ============================================================================
   portal-mobile.css  ·  V118e
   Mobile- & Tablet-Optimierung des Talent-Portals.
   Zuletzt geladen. WICHTIG: Das Portal nutzt einen extrem aggressiven
   !important-/Spezifitäts-Layer-Cake (portal-facelift/v84e/v86/v87/v93).
   Die stärkste Sidebar-Regel ist:
     html body #dashboard-view.talent-shell:not(.talent-auth-view)
       > .talent-main > .dashboard-tabs   (Spezifität 1·4·2)
   → Unsere Layout-Regeln MÜSSEN diese Spezifität erreichen/übertreffen,
     sonst greifen sie nicht. Darum die langen Selektoren unten (mit nav-Tag).

   Breakpoints: Tablet ≤1024px · Phone ≤768px (Sidebar → Bottom-Nav).
   ============================================================================ */

/* ───────────────────────── TABLET (≤1024px) ───────────────────────── */
@media (max-width: 1024px) {
  html body #dashboard-view.talent-shell .dash-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body #dashboard-view.talent-shell .talent-panel .panel-grid,
  html body #dashboard-view.talent-shell .talent-panel .two-col {
    grid-template-columns: 1fr !important;
  }
}

/* ───────────────────────── PHONE (≤768px) ───────────────────────── */
@media (max-width: 768px) {

  /* ---- 1) Grid auflösen: Inhalt blockweise, volle Breite ---- */
  html body #dashboard-view.talent-shell:not(.talent-auth-view) > .talent-main {
    display: block !important;
  }

  /* ---- 2) Sidebar → fixe Bottom-Navigation ---- */
  html body #dashboard-view.talent-shell:not(.talent-auth-view) > .talent-main > nav.dashboard-tabs {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 78px !important;
    margin: 0 !important;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    gap: 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.25) !important;
    z-index: 1200 !important;
    scrollbar-width: none !important;
  }
  html body #dashboard-view.talent-shell > .talent-main > nav.dashboard-tabs::-webkit-scrollbar {
    display: none !important;
  }

  /* Bottom-Nav zeigt IMMER nur die Hauptziele — keine Unterpunkte hineinquetschen.
     Versteckte Tabs bleiben versteckt. */
  html body #dashboard-view.talent-shell > .talent-main > nav.dashboard-tabs .dashboard-tab.hidden {
    display: none !important;
  }

  /* Rechnungen-Unterpunkte (Übersicht/Erstellen/Brand-Ordner): standardmäßig aus
     der Bottom-Nav raus → erscheinen als Segment-Leiste OBEN, wenn "Rechnungen"
     aktiv ist. Das ist das professionelle App-Muster (Tab-Bar unten, Sub-Segmente
     oben im Inhalt) statt 7 Icons in der Bottom-Nav. */
  html body #dashboard-view.talent-shell > .talent-main > nav.dashboard-tabs .dashboard-subgroup {
    display: none !important;
  }
  html body #dashboard-view.talent-shell > .talent-main > nav.dashboard-tabs:has(#dashboard-invoices-tab.active) .dashboard-subgroup {
    display: flex !important;
    position: fixed !important;
    top: var(--tt-header-h, 64px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid #e8eaed !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    z-index: 1100 !important;
  }
  html body #dashboard-view.talent-shell > .talent-main > nav.dashboard-tabs:has(#dashboard-invoices-tab.active) .dashboard-subgroup::-webkit-scrollbar { display: none !important; }
  html body #dashboard-view.talent-shell > .talent-main > nav.dashboard-tabs:has(#dashboard-invoices-tab.active) .dashboard-subgroup .dashboard-subtab {
    flex: 1 1 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 40px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    white-space: nowrap !important;
  }
  html body #dashboard-view.talent-shell > .talent-main > nav.dashboard-tabs:has(#dashboard-invoices-tab.active) .dashboard-subgroup .dashboard-subtab.active {
    background: #151b2a !important;
    color: #ffffff !important;
  }
  html body #dashboard-view.talent-shell > .talent-main > nav.dashboard-tabs:has(#dashboard-invoices-tab.active) .dashboard-subgroup .dashboard-subtab .nav-label {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
  }
  html body #dashboard-view.talent-shell > .talent-main > nav.dashboard-tabs:has(#dashboard-invoices-tab.active) .dashboard-subgroup .dashboard-subtab .nav-icon {
    width: 16px !important;
    height: 16px !important;
  }
  html body #dashboard-view.talent-shell > .talent-main > nav.dashboard-tabs:has(#dashboard-invoices-tab.active) .dashboard-subgroup .dashboard-subtab .nav-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  /* Platz schaffen für die obere Segment-Leiste, wenn Rechnungen aktiv */
  html body #dashboard-view.talent-shell:not(.talent-auth-view):has(#dashboard-invoices-tab.active) > .talent-main > .talent-panel,
  html body #dashboard-view.talent-shell:not(.talent-auth-view):has(#dashboard-invoices-tab.active) > .talent-main > section {
    padding-top: 62px !important;
  }

  /* Nav-Items: Icon oben, Mini-Label darunter, gleichmäßig verteilt */
  html body #dashboard-view.talent-shell > .talent-main > nav.dashboard-tabs .dashboard-tab,
  html body #dashboard-view.talent-shell > .talent-main > nav.dashboard-tabs .dashboard-subtab {
    flex: 1 1 0 !important;
    min-width: 52px !important;
    max-width: 130px !important;
    width: auto !important;
    height: auto !important;
    min-height: 54px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 4px 3px !important;
    border-radius: 12px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  html body #dashboard-view.talent-shell > .talent-main > nav.dashboard-tabs .nav-label {
    display: block !important;
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    opacity: 1 !important;
  }
  html body #dashboard-view.talent-shell > .talent-main > nav.dashboard-tabs .nav-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body #dashboard-view.talent-shell > .talent-main > nav.dashboard-tabs .nav-icon svg {
    width: 21px !important;
    height: 21px !important;
  }

  /* ---- 3) Content volle Breite + Platz für die Bottom-Bar ---- */
  html body #dashboard-view.talent-shell:not(.talent-auth-view) > .talent-main > .talent-panel,
  html body #dashboard-view.talent-shell:not(.talent-auth-view) > .talent-main > section,
  html body #dashboard-view.talent-shell:not(.talent-auth-view) > .talent-main > .talent-global-alerts {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body #dashboard-view.talent-shell:not(.talent-auth-view) > .talent-main > .talent-panel,
  html body #dashboard-view.talent-shell:not(.talent-auth-view) > .talent-main > section {
    padding-bottom: 94px !important; /* Höhe Bottom-Nav + Luft */
  }

  /* ---- 4) KPI-Kacheln: 2 Spalten, kompakt ---- */
  html body #dashboard-view.talent-shell .dash-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html body #dashboard-view.talent-shell .dash-kpi {
    padding: 12px 13px !important;
    min-width: 0 !important;
  }

  /* ---- 5) Generische 2-Spalten/Charts → 1 Spalte ---- */
  html body #dashboard-view.talent-shell .talent-panel .panel-grid,
  html body #dashboard-view.talent-shell .talent-panel .two-col,
  html body #dashboard-view.talent-shell .talent-panel .dash-chart-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- 6) Tabellen: horizontal scrollbar statt abschneiden ---- */
  html body #dashboard-view.talent-shell .talent-panel .table-responsive,
  html body #dashboard-view.talent-shell .talent-panel .tt-table-wrap,
  html body #dashboard-view.talent-shell .talent-panel .admin-table-wrap,
  html body #dashboard-view.talent-shell .inv-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ---- 6b) Rechnungs-Filter-Chips: horizontal scrollen statt umbrechen/abschneiden ---- */
  html body #dashboard-view.talent-shell .inv-chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    max-width: 100% !important;
    padding-bottom: 2px !important;
  }
  html body #dashboard-view.talent-shell .inv-chips::-webkit-scrollbar { display: none !important; }
  html body #dashboard-view.talent-shell .inv-chips > * { flex: 0 0 auto !important; }

  /* ---- 6c) Hub-Graph: horizontaler Scroll, ohne die Seite zu sprengen ---- */
  html body #dashboard-view.talent-shell .talent-panel [class*="network"],
  html body #dashboard-view.talent-shell .talent-panel [class*="hub-"] {
    max-width: 100% !important;
  }

  /* ---- 7) Listen (Kooperationen/Verträge) volle Breite ---- */
  html body #dashboard-view.talent-shell .cooperation-list,
  html body #dashboard-view.talent-shell .contracts-list {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---- 8) Kein horizontaler Overflow ---- */
  html body #dashboard-view.talent-shell {
    overflow-x: hidden !important;
  }

  /* ---- 9) Modals / Dialoge → fast volle Breite, scrollbar ---- */
  html body .talent-shell .modal-content,
  html body .talent-shell .tt-modal-content,
  html body .talent-shell [role="dialog"] > div {
    max-width: 95vw !important;
    width: 95vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* ---- 10) Benachrichtigungs-Panel → volle Breite ---- */
  html body .talent-shell .tt-notif-panel,
  html body #tt-notif-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* ---- 11) Rechnungs-Detail (inv-detail) → 1-spaltig ---- */
  html body #dashboard-view.talent-shell .inv-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════ ADMIN-PORTAL MOBIL ════════════════════════
   Admin-Shell: #dashboard-view > .container > main > .admin-main-nav.
   Stärkste Sidebar-Regel: html body #dashboard-view > .container > main >
   .admin-main-nav (Spez. 123). Wir matchen exakt + laden zuletzt + div-Tag
   (Spez. 124) → gewinnt sicher. 7 Primär-Items, 3 Untergruppen (is-active-parent).
   ==================================================================== */
@media (max-width: 768px) {

  /* Layout: flex-row → block */
  html body #dashboard-view > .container > main.admin-main,
  html body #dashboard-view > .container > main {
    display: block !important;
    min-height: auto !important;
  }

  /* Sidebar → fixe Bottom-Navigation (7 Items, scrollbar) */
  html body #dashboard-view > .container > main > div.admin-main-nav {
    position: fixed !important;
    top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: none !important; min-width: 0 !important;
    height: auto !important; min-height: 0 !important; max-height: 78px !important;
    margin: 0 !important;
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: stretch !important; justify-content: flex-start !important; gap: 2px !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.25) !important;
    z-index: 1200 !important; scrollbar-width: none !important;
  }
  html body #dashboard-view > .container > main > div.admin-main-nav::-webkit-scrollbar { display: none !important; }

  /* Untergruppen: raus aus Bottom-Nav; aktive → Segment-Leiste oben */
  html body #dashboard-view > .container > main > div.admin-main-nav .admin-nav-subgroup { display: none !important; }
  html body #dashboard-view > .container > main > div.admin-main-nav .admin-nav-subgroup.is-active-parent {
    display: flex !important; position: fixed !important; top: var(--tt-header-h, 64px) !important;
    left: 0 !important; right: 0 !important; bottom: auto !important;
    flex-direction: row !important; align-items: stretch !important; justify-content: flex-start !important;
    gap: 6px !important; width: 100% !important; height: auto !important; max-height: none !important;
    margin: 0 !important; padding: 8px 12px !important;
    background: #ffffff !important; border: 0 !important; border-bottom: 1px solid #e8eaed !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    overflow-x: auto !important; overflow-y: hidden !important; z-index: 1100 !important;
  }
  html body #dashboard-view > .container > main > div.admin-main-nav .admin-nav-subgroup.is-active-parent .admin-nav-subitem {
    flex: 1 1 auto !important; min-width: max-content !important; max-width: none !important; width: auto !important;
    height: auto !important; min-height: 40px !important;
    flex-direction: row !important; align-items: center !important; justify-content: center !important;
    gap: 7px !important; padding: 8px 14px !important; border-radius: 10px !important;
    background: #f3f4f6 !important; color: #374151 !important; white-space: nowrap !important;
  }
  html body #dashboard-view > .container > main > div.admin-main-nav .admin-nav-subgroup.is-active-parent .admin-nav-subitem.active {
    background: #151b2a !important; color: #ffffff !important;
  }
  html body #dashboard-view > .container > main > div.admin-main-nav .admin-nav-subgroup.is-active-parent .admin-nav-subitem .nav-label {
    display: block !important; font-size: 12.5px !important; font-weight: 600 !important; opacity: 1 !important; width: auto !important; max-width: none !important;
  }
  html body #dashboard-view > .container > main > div.admin-main-nav .admin-nav-subgroup.is-active-parent .admin-nav-subitem .nav-icon,
  html body #dashboard-view > .container > main > div.admin-main-nav .admin-nav-subgroup.is-active-parent .admin-nav-subitem .nav-icon svg { width: 16px !important; height: 16px !important; }

  /* Primär-Items: Icon oben + Mini-Label */
  html body #dashboard-view > .container > main > div.admin-main-nav .view-btn {
    flex: 1 0 auto !important; min-width: 48px !important; max-width: 110px !important; width: auto !important;
    height: auto !important; min-height: 54px !important;
    flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 3px !important; margin: 0 !important; padding: 4px 2px !important; border-radius: 12px !important;
    text-align: center !important; white-space: nowrap !important;
  }
  html body #dashboard-view > .container > main > div.admin-main-nav .view-btn .nav-label {
    display: block !important; font-size: 9px !important; line-height: 1.05 !important; font-weight: 600 !important;
    max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; opacity: 1 !important;
  }
  html body #dashboard-view > .container > main > div.admin-main-nav .view-btn .nav-icon { width: 21px !important; height: 21px !important; margin: 0 !important; }
  html body #dashboard-view > .container > main > div.admin-main-nav .view-btn .nav-icon svg { width: 20px !important; height: 20px !important; }

  /* Content: volle Breite + Platz für Bottom-Nav (+ oben für Segment-Leiste wenn aktiv) */
  html body #dashboard-view .admin-main-section {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
    padding-bottom: 92px !important;
  }
  html body #dashboard-view:has(.admin-main-nav .admin-nav-subgroup.is-active-parent) .admin-main-section { padding-top: 62px !important; }

  /* Admin-Tabellen → horizontaler Scroll */
  html body #dashboard-view .admin-main-section .table-responsive,
  html body #dashboard-view .admin-main-section .admin-table-wrap,
  html body #dashboard-view .admin-main-section .inv-table-wrap {
    max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
  }

  /* Admin: kein horizontaler Overflow */
  html body #dashboard-view { overflow-x: hidden !important; }

  /* Fullpage-Modals (Kampagne/Vertrag/Brand/Talent/Buchung anlegen) sind auf
     Desktop um die Sidebar-Breite (left:64px) versetzt. Auf Mobil → vollflächig.
     Spez. muss die ID-Regel (132) übertreffen → div#id…:not(.hidden) = 133. */
  html body div#campaign-edit-modal.modal-overlay.tt-fullpage-modal:not(.hidden),
  html body div#contract-modal.modal-overlay.tt-fullpage-modal:not(.hidden),
  html body div#brand-edit-modal.modal-overlay.tt-fullpage-modal:not(.hidden),
  html body div#talent-edit-modal.modal-overlay.tt-fullpage-modal:not(.hidden),
  html body div#manual-tx-modal.modal-overlay.tt-fullpage-modal:not(.hidden) {
    inset: var(--tt-header-h, 64px) 0 0 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body div#campaign-edit-modal.modal-overlay.tt-fullpage-modal:not(.hidden) .modal-dialog,
  html body div#contract-modal.modal-overlay.tt-fullpage-modal:not(.hidden) .modal-dialog,
  html body div#brand-edit-modal.modal-overlay.tt-fullpage-modal:not(.hidden) .modal-dialog,
  html body div#talent-edit-modal.modal-overlay.tt-fullpage-modal:not(.hidden) .modal-dialog,
  html body div#manual-tx-modal.modal-overlay.tt-fullpage-modal:not(.hidden) .modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ============================================================================
   portal-mobile.css · V120 — Lückenlose Mobile/Tablet-Optimierung
   Auto-assembliert aus dem 17-Bereiche-Audit (91 Issues). Jede unverpackte
   Regel ist in @media (max-width:768px) gehüllt. Reine Instruktions-Texte
   (z.B. <link> ergänzen) sind ausgefiltert und werden separat behandelt.
   ============================================================================ */

/* ═══════════ Landing / Portal-Auswahl (Willkommen, Talent/Manager Login Karten) ═══════════ */
/* [high] Login cards stay 2-column on phones — the existing 720px override is DEAD */
@media (max-width: 768px) {
  html body.tt-auth-dark .tt-auth-landing .tt-auth-landing-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html body.tt-auth-dark .tt-auth-landing .tt-auth-portal-card {
    padding: 20px 18px !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 14px !important;
  }
  html body.tt-auth-dark .tt-auth-landing .tt-auth-portal-card-icon {
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }
  html body.tt-auth-dark .tt-auth-landing .tt-auth-portal-card-desc {
    min-height: 0 !important;
    text-align: left !important;
  }
}
/* [medium] Hero <h1> stays 44px on phone — the 28px override is DEAD */
@media (max-width: 768px) {
  html body.tt-auth-dark .tt-auth-landing h1#tt-landing-title {
    font-size: 27px !important;
    margin-bottom: 12px !important;
    line-height: 1.2 !important;
  }
  html body.tt-auth-dark .tt-auth-landing .tt-auth-landing-subtitle {
    font-size: 14px !important;
    margin-bottom: 28px !important;
  }
}
/* [low] Language dropdown toggle tap target below 40px */
@media (max-width: 768px) {
  html body.tt-auth-dark .tt-auth-lang-dropdown .tt-auth-lang-toggle {
    height: 42px !important;
    min-width: 84px !important;
  }
  html body.tt-auth-dark .tt-auth-lang-dropdown .tt-auth-lang-menu {
    min-width: 168px !important;
  }
  html body.tt-auth-dark .tt-auth-lang-dropdown .tt-auth-lang-option {
    padding: 12px 14px !important;
    min-height: 44px !important;
  }
}
/* [low] Mobile breakpoint mismatch (720px vs 768px dead-zone) */
@media (max-width: 768px) {
  html body.tt-auth-dark .tt-auth-shell {
    padding: 18px 16px !important;
  }
  html body.tt-auth-dark .tt-auth-main {
    padding: 24px 0 !important;
  }
}

/* ═══════════ Login-Formulare (Admin + Talent + Landing) ═══════════ */
/* [high] Cloudflare Turnstile captcha widget (.tt-captcha) overflows on narrow phones */
@media (max-width: 768px) {
  html body.tt-auth-dark #auth-view.tt-auth-shell .tt-captcha {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    justify-content: center !important;
  }
  html body.tt-auth-dark #auth-view.tt-auth-shell .tt-captcha iframe {
    max-width: 100% !important;
  }
}
/* On the very narrowest phones the 300px iframe still cannot reflow, so scale it. */
@media (max-width: 340px) {
  html body.tt-auth-dark #auth-view.tt-auth-shell .tt-captcha {
    transform: scale(0.92) !important;
    transform-origin: center top !important;
  }
}
/* [medium] Auth page (login) has no horizontal-overflow guard */
@media (max-width: 768px){
/* Append inside @media (max-width:768px) in portal-mobile.css */
html body.tt-auth-dark,
html body.tt-auth-dark #auth-view.tt-auth-shell {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
}
/* [low] Auth shell padding breakpoint gap 721-768px (tablet edge) */
@media (max-width: 768px){
/* Append inside @media (max-width:768px) in portal-mobile.css */
html body.tt-auth-dark #auth-view.tt-auth-shell {
  padding: 20px !important;
}
html body.tt-auth-dark #auth-view.tt-auth-shell .tt-auth-main {
  padding: 24px 0 !important;
}
}

/* ═══════════ Talent Übersicht / Dashboard (overview-panel: KPI tiles, Chart.js charts, filter toolbar, panel headers) ═══════════ */
/* [medium] Dashboard period filter — #overview-period <select> + #overview-start/#overview- */
@media (max-width: 768px) {
  html body #dashboard-view .talent-panel-header-row .dash-toolbar #overview-period,
  html body #dashboard-view .talent-panel-header-row .dash-toolbar input#overview-start,
  html body #dashboard-view .talent-panel-header-row .dash-toolbar input#overview-end,
  html body #dashboard-view .talent-panel-header-row .dash-toolbar input.dash-month-input,
  html body #dashboard-view .talent-panel-header-row .dash-toolbar select.dash-period-select {
    height: 42px !important;
    min-height: 42px !important;
    max-height: none !important;
    font-size: 14px !important;
    padding: 0 12px !important;
  }
}
/* [medium] Panel-header refresh icon buttons — #refresh-status-btn, #refresh-contracts-btn, */
@media (max-width: 768px) {
  html body #dashboard-view .talent-panel-header-row .btn-icon,
  html body #dashboard-view .talent-panel-header-row button.btn-icon {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: none !important;
  }
  html body #dashboard-view .talent-panel-header-row .btn-icon svg {
    width: 19px !important;
    height: 19px !important;
  }
}
/* [low] Dashboard chart grids — .dash-chart-grid with inline style="grid-template-column */
@media (max-width: 1024px) {
  html body #dashboard-view.talent-shell #overview-panel .dash-chart-grid,
  html body #dashboard-view.talent-shell .talent-panel .dash-chart-grid {
    grid-template-columns: 1fr !important;
  }
}
/* [low] Dashboard global alert rows — .talent-global-alert (grid-template-columns: minma */
@media (max-width: 768px) {
  html body #dashboard-view.talent-shell .talent-global-alerts .talent-global-alert {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  html body #dashboard-view.talent-shell .talent-global-alerts .talent-global-alert .btn-primary {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ═══════════ Talent Vertraege + Kooperationen (talent/talent.js cooperation list + contract list + cooperation detail modal/drawer + contract preview link; talent/talent.css) ═══════════ */
/* [high] Cooperation detail modal/drawer (window.openTalentCampaignHub, talent.js ~line 4 */
@media (max-width:768px){
  html body > div[style*="z-index:10100"]{
    padding:0 !important;
    align-items:flex-end !important;
  }
  html body > div[style*="z-index:10100"] > div{
    max-width:100% !important;
    width:100% !important;
    max-height:92vh !important;
    border-radius:16px 16px 0 0 !important;
    margin:0 !important;
  }
}
/* [medium] Contract action buttons (.contract-actions .btn-primary / .btn-secondary; render */
@media (max-width:768px){
  html body #dashboard-view.talent-shell #contracts-list .contract-row .contract-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    width:100% !important;
  }
  html body #dashboard-view.talent-shell #contracts-list .contract-row .contract-actions .btn-primary,
  html body #dashboard-view.talent-shell #contracts-list .contract-row .contract-actions .btn-secondary{
    min-height:44px !important;
    flex:1 1 calc(50% - 4px) !important;
    justify-content:center !important;
  }
}
/* [medium] Cooperation card 'Details oeffnen' button (.coop-details-btn; renderCooperationC */
@media (max-width:768px){
  html body #dashboard-view.talent-shell .cooperation-card .cooperation-card-footer{
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  html body #dashboard-view.talent-shell .cooperation-card .cooperation-card-footer .coop-details-btn{
    min-height:42px !important;
    padding:10px 14px !important;
    font-size:13px !important;
  }
}
/* [medium] Contract filter tabs (.talent-tabs / .talent-tab in #contracts-panel; index.html */
@media (max-width:768px){
  html body #dashboard-view.talent-shell #contracts-panel .talent-tabs{
    width:100% !important;
  }
  html body #dashboard-view.talent-shell #contracts-panel .talent-tabs .talent-tab{
    min-height:42px !important;
    padding:0 8px !important;
  }
}
/* [low] Cooperation detail drawer inner field rows (field() helper, talent.js ~line 3996 */
@media (max-width:768px){
  html body > div[style*="z-index:10100"] > div div[style*="justify-content:space-between"]{
    gap:10px !important;
  }
  html body > div[style*="z-index:10100"] > div div[style*="justify-content:space-between"] > span:last-child{
    min-width:0 !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }
}

/* ═══════════ Talent Rechnungen (Übersicht / Erstellen / Detail) ═══════════ */
/* [high] Invoice detail DRAWER — hero status card (.inv-hero) inside body-level .inv-draw */
@media (max-width: 768px) {
  html body .inv-drawer .inv-hero {
    grid-template-columns: 1fr 1fr !important;
  }
  html body .inv-drawer .inv-hero .inv-hero__main {
    grid-column: 1 / -1 !important;
  }
  html body .inv-drawer .inv-hero .inv-hero__metric {
    border-left: 0 !important;
    border-top: 1px solid rgba(0,0,0,.06) !important;
  }
}
/* [high] Invoice detail DRAWER — body-level .inv-drawer + .inv-detail-grid (2-col) not re */
@media (max-width: 768px) {
  html body .inv-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    border-left: 0 !important;
  }
  html body .inv-drawer .inv-detail-grid {
    grid-template-columns: 1fr !important;
  }
  html body .inv-drawer .inv-detail-item:nth-child(odd) {
    border-right: 0 !important;
  }
}
/* [medium] Invoice detail DRAWER — 5-step progress tracker (.inv-progress) */
@media (max-width: 768px) {
  html body .inv-drawer .inv-progress {
    grid-template-columns: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 4px !important;
  }
  html body .inv-drawer .inv-progress::-webkit-scrollbar { display: none !important; }
  html body .inv-drawer .inv-progress .inv-progress__step {
    flex: 0 0 auto !important;
    min-width: 64px !important;
  }
  html body .inv-drawer .inv-progress .inv-progress__label {
    white-space: normal !important;
  }
}
/* [medium] Invoice detail DRAWER — 'Nächster Schritt' panel (.inv-next-action) */
@media (max-width: 768px) {
  html body .inv-drawer .inv-next-action {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  html body .inv-drawer .inv-next-action .inv-next-action__btn {
    width: 100% !important;
  }
  html body .inv-drawer .inv-next-action .inv-next-action__btn .inv-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
}
/* [medium] Invoice detail DRAWER — header close button + small action buttons are sub-40px  */
@media (max-width: 768px) {
  html body .inv-drawer .inv-drawer__close {
    width: 40px !important;
    height: 40px !important;
  }
  html body .inv-drawer .inv-btn.small {
    min-height: 40px !important;
    height: 40px !important;
  }
  html body .inv-drawer .inv-kebab {
    width: 40px !important;
    height: 40px !important;
  }
}
/* [medium] Invoice OVERVIEW toolbar — .card-header-actions search-box + buttons overflow on */
@media (max-width: 768px) {
  html body #dashboard-view.talent-shell .inv-toolbar .card-header-actions {
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  html body #dashboard-view.talent-shell .inv-toolbar .search-box {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  html body #dashboard-view.talent-shell .inv-toolbar .card-header-actions .btn-primary {
    flex: 1 1 auto !important;
    min-height: 40px !important;
  }
}
/* [medium] Invoice OVERVIEW legacy table fallback — .invoice-table-detail-row overdue-check */
@media (max-width: 768px) {
  html body #dashboard-view.talent-shell .invoice-table .invoice-table-detail-row,
  html body #dashboard-view.talent-shell .invoice-table .invoice-table-detail-row > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    white-space: normal !important;
    position: sticky !important;
    left: 0 !important;
    box-sizing: border-box !important;
  }
}
/* [low] Invoice CREATE form — generator runs in an iframe; parent cannot fix internal la */
@media (max-width: 768px) {
  html body #dashboard-view.talent-shell #invoice-generator-frame.invoice-generator-frame {
    min-height: calc(100vh - 120px) !important;
    margin-bottom: 96px !important;
  }
}

/* ═══════════ Talent Hub + Generator + Profil/Einstellungen ═══════════ */
/* [high] Invoice-Generator iframe — bottom cut off by fixed bottom-nav (phone) */
@media (max-width: 768px) {
  html body #dashboard-view.talent-shell:not(.talent-auth-view) > .talent-main > #invoice-generator-panel.invoice-panel .invoice-generator-frame {
    height: calc(100dvh - var(--tt-header-h, 64px) - 104px) !important;
    min-height: calc(100dvh - var(--tt-header-h, 64px) - 104px) !important;
  }
}
/* [high] Talent profile modal — identity row stays a cramped horizontal flex on phone */
@media (max-width: 768px) {
  html body #talent-profile-modal .talent-profile-settings .talent-profile-row-identity {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  html body #talent-profile-modal .talent-profile-settings .talent-profile-row-identity .talent-profile-name-block {
    width: 100% !important;
  }
  html body #talent-profile-modal .talent-profile-settings .talent-profile-image-actions {
    width: 100% !important;
  }
  html body #talent-profile-modal .talent-profile-settings .talent-profile-image-actions button {
    flex: 1 1 0 !important;
    min-height: 44px !important;
  }
}
/* [medium] Talent profile modal — Rechnungsprofil grid still 2 columns on narrow phones */
@media (max-width: 768px) {
  html body #talent-profile-modal .tt-profile-section .tt-profile-grid {
    grid-template-columns: 1fr !important;
  }
  html body #talent-profile-modal .tt-profile-section .tt-profile-grid .tt-profile-half {
    grid-column: 1 / -1 !important;
  }
}
/* [medium] Talent profile modal — sub-40px tap targets (close, image, signature buttons) */
@media (max-width: 768px) {
  html body #talent-profile-modal .talent-modal-actions button,
  html body #talent-profile-modal .talent-profile-image-actions button,
  html body #talent-profile-modal .talent-signature-inline button {
    min-height: 44px !important;
  }
  html body #talent-profile-modal .talent-modal-close,
  html body #talent-settings-modal .talent-modal-close,
  html body #signature-template-modal .talent-modal-close {
    width: 40px !important;
    height: 40px !important;
  }
}
/* [low] Talent profile + signature-template modals not reached by portal-mobile width ru */
@media (max-width: 768px) {
  html body #talent-profile-modal > .talent-modal.talent-profile-modal,
  html body #talent-profile-modal .talent-modal.talent-profile-modal,
  html body #talent-settings-modal > .talent-modal,
  html body #signature-template-modal .talent-modal {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}

/* ═══════════ Admin Übersicht / Dashboard (overview-admin-section) ═══════════ */
/* [high] Brand-Übersicht (Lifetime Value) table — #adm-brand-ltv-list */
@media (max-width: 768px) {
  html body #dashboard-view #overview-admin-section #adm-brand-ltv-list {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  html body #dashboard-view #overview-admin-section #adm-brand-ltv-list > table.admin-data-table {
    min-width: 680px !important;
    width: max-content !important;
  }
}
/* [high] Talent-Performance table — #adm-talent-performance-list */
@media (max-width: 768px) {
  html body #dashboard-view #overview-admin-section #adm-talent-performance-list {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  html body #dashboard-view #overview-admin-section #adm-talent-performance-list > table.admin-data-table {
    min-width: 640px !important;
    width: max-content !important;
  }
}
/* [low] Inline 2-column chart grids — .dash-chart-grid with inline grid-template-columns */
@media (max-width: 768px) {
  html body #dashboard-view #overview-admin-section .dash-chart-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ═══════════ Admin Kampagnen / Brands / Talente ═══════════ */
/* [high] Primäre Listen-Tabellen (Kampagnen / Brands / Talente) — kein Scroll-Wrapper */
@media (max-width: 768px) {
  html body #dashboard-view .admin-main-section #campaign-status-admin-list,
  html body #dashboard-view .admin-main-section #brands-list,
  html body #dashboard-view .admin-main-section #talents-list-main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html body #dashboard-view .admin-main-section #campaign-status-admin-list > table.admin-data-table,
  html body #dashboard-view .admin-main-section #brands-list > table.admin-data-table,
  html body #dashboard-view .admin-main-section #talents-list-main > table.admin-data-table {
    min-width: 640px !important;
    width: max-content !important;
  }
}
/* [high] Talente-Liste mit fixer min-width:580px (talents.js) im scrollbaren, aber margen */
@media (max-width: 768px) {
  html body #dashboard-view .admin-main-section #talents-list-main table.admin-data-table[style*="min-width"] {
    min-width: 580px !important;
    width: 580px !important;
    max-width: none !important;
  }
}
/* [high] Stammdaten-Edit-Modals (Brand/Talent) — Breakpoint-Lücke 721-768px lässt sd-row  */
@media (max-width: 768px) {
  html body div#brand-edit-modal.sd-stammdaten .sd-row,
  html body div#brand-edit-modal.sd-stammdaten .sd-row.sd-row-double,
  html body div#talent-edit-modal.sd-stammdaten .sd-row,
  html body div#talent-edit-modal.sd-stammdaten .sd-row.sd-row-double {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  html body div#brand-edit-modal.sd-stammdaten .sd-label,
  html body div#talent-edit-modal.sd-stammdaten .sd-label {
    padding-top: 0 !important;
    margin-bottom: 2px !important;
  }
}
/* [medium] Kampagnen-Modal (#campaign-edit-modal) — cform-Spalten kollabieren erst bei 720p */
@media (max-width: 768px) {
  html body div#campaign-edit-modal .cform-col-2,
  html body div#campaign-edit-modal .cform-col-3 {
    grid-column: span 12 !important;
  }
  html body div#campaign-edit-modal .cform-toggles,
  html body div#campaign-edit-modal .cform-paid-grid {
    grid-template-columns: 1fr !important;
  }
}
/* [medium] Kampagnen-Modal — Monats-Status-Zeile (cform-month-status-row) bleibt mehrspalti */
@media (max-width: 768px) {
  html body div#campaign-edit-modal .cform-month-status-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  html body div#campaign-edit-modal .cform-month-status-row > label,
  html body div#campaign-edit-modal .cform-month-status-row .cform-monthly-booking-note {
    grid-column: 1 / -1 !important;
  }
}
/* [medium] Verschachtelte Kampagnen-/Buchungstabellen in Brand-/Talent-Detail-Modals (#bd-c */
@media (max-width: 768px) {
  html body #bd-campaign-list,
  html body #td-campaign-list {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  html body #bd-campaign-list > table.admin-data-table,
  html body #td-campaign-list > table.admin-data-table {
    min-width: 560px !important;
    width: max-content !important;
  }
}
/* [low] Stammdaten-Modal Tab-Strip (sd-tabs) — Sticky-Tableiste ohne sichtbaren Scroll-H */
@media (max-width: 768px) {
  html body div#brand-edit-modal.sd-stammdaten .sd-tabs,
  html body div#talent-edit-modal.sd-stammdaten .sd-tabs {
    padding-left: 14px !important;
    padding-right: 14px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  html body div#brand-edit-modal.sd-stammdaten .sd-tabs .sd-tab-btn,
  html body div#talent-edit-modal.sd-stammdaten .sd-tabs .sd-tab-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}
/* [low] Stammdaten-Modal Footer (sd-stammdaten .modal-footer) — Löschen-/Abbrechen-/Spei */
@media (max-width: 768px) {
  html body div#brand-edit-modal.sd-stammdaten.sd-stammdaten .modal-footer,
  html body div#talent-edit-modal.sd-stammdaten.sd-stammdaten .modal-footer {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  html body div#brand-edit-modal.sd-stammdaten.sd-stammdaten .modal-footer > .btn-primary,
  html body div#brand-edit-modal.sd-stammdaten.sd-stammdaten .modal-footer > .btn-secondary,
  html body div#brand-edit-modal.sd-stammdaten.sd-stammdaten .modal-footer > .sd-btn-danger-outline,
  html body div#talent-edit-modal.sd-stammdaten.sd-stammdaten .modal-footer > .btn-primary,
  html body div#talent-edit-modal.sd-stammdaten.sd-stammdaten .modal-footer > .btn-secondary,
  html body div#talent-edit-modal.sd-stammdaten.sd-stammdaten .modal-footer > .sd-btn-danger-outline {
    flex: 1 1 auto !important;
    min-height: 44px !important;
    line-height: 42px !important;
  }
}

/* ═══════════ Admin Vertraege + Vorschau (A4 contract preview / inline preview pane) ═══════════ */
/* [high] Page-break separator markers bleed past the sheet in the inline preview (horizon */
@media (max-width: 768px) {
  html body #preview-inline-section .preview-a4-page .tt-page-gap-marker,
  html body #preview-inline-section .preview-a4-page ol .tt-page-gap-marker,
  html body #preview-inline-section .preview-a4-page ul .tt-page-gap-marker,
  html body #preview-inline-section .preview-a4-page ol > .tt-page-gap-marker,
  html body #preview-inline-section .preview-a4-page ul > .tt-page-gap-marker {
    margin-left: -20px !important;
    margin-right: -20px !important;
  }
}
/* [medium] Signature columns (up to 3) stay side-by-side and get squashed in the inline pre */
@media (max-width: 768px) {
  html body #preview-inline-section .preview-a4-page .signature-container {
    flex-direction: column !important;
    gap: 14px !important;
  }
  html body #preview-inline-section .preview-a4-page .signature-container .signature-column {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* [medium] Inline preview section is a fixed-height (100vh-100px) box whose bottom edge is  */
@media (max-width: 768px) {
  html body #dashboard-view #preview-inline-section:not(.hidden) {
    height: calc(100vh - var(--tt-header-h, 54px) - 84px) !important;
    max-height: calc(100vh - var(--tt-header-h, 54px) - 84px) !important;
  }
}
/* [low] Inner scroll wrapper bottom padding leaves the last A4 page partly under the bot */
@media (max-width: 768px) {
  html body #preview-inline-section .preview-inline-wrapper {
    padding: 12px 8px 110px !important;
  }
}

/* ═══════════ Admin Rechnungen / Mahnungen / Send-to-Brand (send-to-brand modal, send-dunning modal, email/PDF preview, attachment lists) ═══════════ */
/* [high] Send-to-Brand modal + Send-Dunning modal — footer hidden under admin bottom-nav  */
@media (max-width: 768px) {
  /* Send-modals must paint ABOVE the fixed admin bottom-nav (z-index:1200) so
     their footer / send button is reachable. */
  html body div#send-to-brand-modal.modal-overlay:not(.hidden),
  html body div#send-dunning-modal.modal-overlay:not(.hidden) {
    z-index: 1400 !important;
  }
  /* Hide the admin bottom-nav while a send-modal is open so nothing overlaps. */
  html body:has(#send-to-brand-modal.modal-overlay:not(.hidden)) #dashboard-view > .container > main > div.admin-main-nav,
  html body:has(#send-dunning-modal.modal-overlay:not(.hidden)) #dashboard-view > .container > main > div.admin-main-nav {
    display: none !important;
  }
}
/* [medium] Send-to-Brand + Send-Dunning modal header (.panel-head) — no wrap, overflows on  */
@media (max-width: 768px) {
  html body div#send-to-brand-modal .panel-head,
  html body div#send-dunning-modal .panel-head {
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    padding: 12px 14px !important;
    align-items: flex-start !important;
  }
  html body div#send-to-brand-modal .panel-head .panel-title,
  html body div#send-dunning-modal .panel-head .panel-title {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  html body div#send-to-brand-modal .panel-head .panel-title h2,
  html body div#send-dunning-modal .panel-head .panel-title h2 {
    font-size: 16px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body div#send-to-brand-modal .panel-head-actions,
  html body div#send-dunning-modal .panel-head-actions {
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
}
/* [medium] Send-Dunning modal stage switch (.stage-switch) — 4 columns kept on phone, label */
@media (max-width: 768px) {
  html body div#send-dunning-modal .stage-switch {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  html body div#send-dunning-modal .stage-switch .stage-btn {
    min-height: 48px !important;
  }
  html body div#send-dunning-modal .stage-switch .stage-btn strong {
    font-size: 11.5px !important;
  }
  html body div#send-dunning-modal .stage-switch .stage-btn span {
    font-size: 9.5px !important;
  }
}
/* [low] Send-to-Brand + Send-Dunning footer button-row — tap target / stacking polish on */
@media (max-width: 768px) {
  html body div#send-to-brand-modal .panel-foot .button-row button,
  html body div#send-dunning-modal .panel-foot .button-row button {
    min-height: 44px !important;
    width: 100% !important;
  }
  html body div#send-to-brand-modal .panel-foot .button-row,
  html body div#send-dunning-modal .panel-foot .button-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
}

/* ═══════════ Admin Einstellungen + Template-Studio + Connections-360 ═══════════ */
/* [high] Template-Studio paper editor — A4 sheet width (#tt-editor-paper-stage .tt-paper- */
@media (max-width: 768px) {
  html body #dashboard-view #tt-editor-paper-stage .tt-paper-workspace,
  html body #dashboard-view #tt-editor-paper-stage .tt-paper-sheet {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
    box-sizing: border-box !important;
  }
  html body #dashboard-view #tt-editor-paper-stage.tt-paper-stage {
    padding: 12px 8px 96px !important;
  }
  /* reduce huge 96px A4 print margins so text isn't squeezed to a sliver on phones */
  html body #dashboard-view #tt-editor-paper-stage .tt-paper-content {
    padding: 40px 22px !important;
    min-height: auto !important;
  }
}
/* [high] Contract editor paper sheet (#contract-editor-paper-stage .tt-paper-sheet) insid */
@media (max-width: 768px) {
  html body #dashboard-view #contract-editor-paper-stage .tt-paper-workspace,
  html body #dashboard-view #contract-editor-paper-stage .tt-paper-sheet {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    flex-basis: auto !important;
    min-height: 680px !important;
    box-sizing: border-box !important;
  }
  html body #dashboard-view #contract-editor-paper-stage #contract-editor-page-rail.tt-editor-page-rail,
  html body #dashboard-view #contract-editor-paper-stage #contract-editor-side-toolbar.tt-editor-side-toolbar {
    display: none !important;
  }
  html body #dashboard-view #contract-editor-paper-stage .tt-paper-content {
    padding: 40px 22px !important;
    min-height: auto !important;
  }
}
/* [medium] Connections-360 relationship graph (.conn360-graph) in brand-detail-modal / tale */
@media (max-width: 768px) {
  html body #dashboard-view .conn360 .conn360-graph {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  html body #dashboard-view .conn360 .conn360-graph .conn360-arrow {
    transform: rotate(90deg) !important;
  }
}
/* [medium] Connections-360 invoice mini-table (.conn360-invoice-table) inside detail modals */
@media (max-width: 768px) {
  html body #dashboard-view .conn360 .conn360-invoice-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }
}
/* [medium] Template-Studio editor header action bar (.tt-view-header--editor .tt-view-heade */
@media (max-width: 768px) {
  html body #dashboard-view .tt-view--editor .tt-view-header--editor .tt-view-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 6px !important;
    justify-content: flex-start !important;
  }
  html body #dashboard-view .tt-view--editor .tt-view-header--editor .tt-view-header-actions > button {
    flex: 1 1 auto !important;
    min-height: 40px !important;
  }
}
/* [low] Template-Studio editor toolbar sticky offset (.tt-editor-toolbar) */
@media (max-width: 1024px) {
  html body #dashboard-view .tt-view--editor .tt-editor-toolbar {
    position: sticky !important;
    top: 0 !important;
    padding: 8px 12px !important;
  }
}
/* [low] Legacy standalone admin/contract-types.html (type-form-grid, type-edit-grid, .te */
/* Only if these legacy pages are still served directly — add INSIDE each page's own <style>, since they do not link portal-mobile.css */
@media (max-width: 768px) {
  .type-form-grid { grid-template-columns: 1fr !important; }
  .type-edit-grid { grid-template-columns: 1fr !important; }
  .template-editor-content { width: 96% !important; max-width: 96% !important; height: 92vh !important; }
  .editor-toolbar { flex-wrap: wrap !important; }
}

/* ═══════════ Cross-cutting: remaining Modals, Dropdowns, Selects, Toasts, Status-Pill-Menus, Date-Pickers, Address-Autocomplete (admin + talent) ═══════════ */
/* [high] Custom dropdown popup .campaign-select-menu (also used by status-pill menu .tt-s */
@media (max-width: 768px) {
  html body .campaign-select-menu,
  html body .tt-status-menu {
    max-width: calc(100vw - 16px) !important;
    /* left is set inline by JS; cap right overflow so the popup stays on-screen */
    right: auto !important;
    box-sizing: border-box !important;
  }
}
/* [medium] Toast stack .tt-toast-stack / .tt-toast (shared by admin, common/portal-v87-patc */
@media (max-width: 768px) {
  html body .tt-toast-stack {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: stretch !important;
  }
  html body .tt-toast-stack .tt-toast {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* [high] Non-fullpage modal footers (.modal-dialog .modal-footer) with 3 buttons: brand-e */
@media (max-width: 768px) {
  html body .modal-dialog .modal-footer {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body .modal-dialog .modal-footer > button,
  html body .modal-dialog .modal-footer > .btn,
  html body .modal-dialog .modal-footer > div {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
  /* clear the now-taller absolute footer */
  html body .modal-dialog > .modal-body {
    padding-bottom: 132px !important;
  }
}
/* [low] month-detail-modal (admin/index.html:1684) — stale CSS id mismatch */
@media (max-width: 768px) {
  html body #month-detail-modal .modal-dialog.month-detail-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
  }
}
/* [medium] tt-pro-modal two-column grid .tt-pro-grid (send-invitation-modal Rolle/Sprache,  */
@media (max-width: 768px) {
  html body .tt-pro-modal .tt-pro-grid {
    grid-template-columns: 1fr !important;
  }
  html body .tt-pdf-modal .tt-pdf-recipient-row {
    grid-template-columns: 1fr !important;
    row-gap: 8px !important;
  }
}
/* [medium] invoice-pdf-preview-modal footer (.invoice-pdf-preview-actions) — 3 buttons */
@media (max-width: 768px) {
  html body .invoice-pdf-preview-dialog .invoice-pdf-preview-actions {
    flex-wrap: wrap !important;
    justify-content: stretch !important;
    gap: 8px !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body .invoice-pdf-preview-dialog .invoice-pdf-preview-actions > button {
    flex: 1 1 auto !important;
    min-height: 44px !important;
  }
}
/* [low] Modal close (×) buttons — tap target */
@media (max-width: 768px) {
  html body .modal-header .modal-close,
  html body .modal-header.modal-header--combined .modal-close {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 22px !important;
  }
}
/* [low] Inline-styled dialogs with padding:30px (email-modal admin/index.html:3828, hist */
@media (max-width: 768px) {
  html body #email-modal .modal-dialog,
  html body #history-modal .modal-dialog,
  html body #signature-modal .modal-dialog {
    padding: 16px !important;
  }
}

/* ═══════════ sign/index.html ═══════════ */
/* [medium] Language toggle buttons (.lang-btn) in the sign-page header */
@media (max-width: 768px) {
  html body .sign-container .language-toggle .lang-btn,
  html body .sign-container .language-toggle .lang-btn.active {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* [low] Horizontal-overflow guard for the sign page (body / .sign-container) in the 761- */
@media (max-width: 768px) {
  html body .sign-container {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  html body .sign-container .signing-layout {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
/* [low] Signature modal box (.modal.modal-large) + footer in the 761-768px band */
@media (max-width: 768px) {
  html body #signature-modal > .modal.modal-large {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }
  html body #signature-modal .modal-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  html body #signature-modal .modal-footer button {
    width: 100% !important;
    min-height: 44px !important;
  }
}
/* [low] Signature draw/upload tabs (.signature-tabs .tab-btn) */
@media (max-width: 768px) {
  html body #signature-modal .signature-tabs {
    width: 100% !important;
  }
  html body #signature-modal .signature-tabs .tab-btn {
    flex: 1 1 0 !important;
    min-height: 44px !important;
    padding: 12px 8px !important;
    text-align: center !important;
  }
}

/* ═══════════ admin/templates.html ═══════════ */
/* [medium] .create-type-content (Neue Vertragsart modal) */
@media (max-width:768px){
  html body #create-type-modal .create-type-content{
    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;
    padding:20px 16px !important;
    border-radius:12px !important;
    max-height:90vh !important;
    overflow-y:auto !important;
  }
}
/* [medium] .container / main page wrapper */
@media (max-width:768px){
  html body{overflow-x:hidden !important;}
  html body .container{
    max-width:100% !important;
    padding:12px 12px !important;
    box-sizing:border-box !important;
  }
  html body .container main{max-width:100% !important;overflow-x:hidden !important;}
}
/* [high] .type-edit-grid (Bezeichnung / Kürzel / Formularbasiert / Aktiv / Speichern) */
@media (max-width:768px){
  html body #template-editor-section .type-edit-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
    align-items:stretch !important;
  }
  html body #template-editor-section .type-edit-grid #save-type-btn{
    width:100% !important;
    justify-content:center !important;
  }
}
@media (min-width:769px) and (max-width:1024px){
  html body #template-editor-section .type-edit-grid{
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }
}
/* [medium] .editor-toolbar (rich-text formatting bar) */
@media (max-width:768px){
  html body #template-editor-section .editor-toolbar{
    flex-wrap:wrap !important;
    gap:6px !important;
    padding:8px !important;
  }
  html body #template-editor-section .editor-toolbar > div[style*='flex: 1']{
    display:none !important;
  }
  html body #template-editor-section .editor-toolbar .editor-select{
    min-width:auto !important;
    flex:1 1 auto !important;
  }
  html body #template-editor-section #current-language-label{
    flex:1 0 100% !important;
    text-align:right !important;
  }
}
/* [medium] .editor-toolbar-btn (toolbar tap targets) */
@media (max-width:768px){
  html body #template-editor-section .editor-toolbar .editor-toolbar-btn{
    width:38px !important;
    height:38px !important;
  }
  html body #template-editor-section .editor-toolbar .editor-color{
    width:38px !important;
    height:38px !important;
  }
  html body #template-editor-section .editor-toolbar .editor-select{
    height:38px !important;
  }
}
/* [medium] .contract-types-table (Vertragsarten / Templates list) */
@media (max-width:768px){
  html body .contract-types-section{
    padding:16px 14px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  html body .contract-types-section .contract-types-table{
    min-width:480px !important;
  }
  html body .contract-types-section .contract-types-table th,
  html body .contract-types-section .contract-types-table td{
    padding:10px 10px !important;
  }
}
/* [low] .template-editor (contenteditable A4-style editing surface) */
@media (max-width:768px){
  html body #template-editor.template-editor{
    min-height:320px !important;
    max-height:60vh !important;
    padding:14px !important;
  }
}
/* [low] .template-actions (Template speichern / Auf Standard zurücksetzen) */
@media (max-width:768px){
  html body #template-editor-section .template-actions{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  html body #template-editor-section .template-actions > button{
    width:100% !important;
    min-height:42px !important;
    height:auto !important;
  }
}
/* [low] .header-content / .header-actions (top bar: logo + DE/EN + Abmelden) */
@media (max-width:768px){
  html body header{padding:10px 14px !important;}
  html body header .logo{height:38px !important;}
  html body header .header-content{gap:10px !important;}
  html body header .header-actions{gap:8px !important;flex-wrap:wrap !important;}
}

/* ═══════════ admin/talent_mahnung_generator.html ═══════════ */
/* [high] Admin reminder iframe host (#admin-reminder-generator-frame) — height clamped to */
@media (max-width: 768px) {
  /* Generator-Iframe NICHT auf 820px klemmen (init.js:234 setzt inline style.height
     via postMessage). Auf dem Phone stapelt der Inhalt 1-spaltig und ist ~2500px+
     hoch → feste, großzügige Höhe + Abstand zur Bottom-Nav. !important schlägt das
     Inline-style. */
  html body #admin-reminder-generator-frame.admin-reminder-generator-frame {
    height: 2600px !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    margin-bottom: 96px !important; /* clear fixed admin bottom-nav (max-height:78px) */
    border-radius: 8px !important;
  }
}
/* [medium] Admin reminder iframe host (#admin-reminder-generator-frame) — tablet (769-1024p */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet: gleiche 820px-Klemme aus init.js:234 aufheben; Inhalt ist 1-spaltig
     und höher als 820px. Kein Bottom-Nav auf Tablet → keine extra Bottom-Clearance. */
  html body #admin-reminder-generator-frame.admin-reminder-generator-frame {
    height: 2200px !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
  }
}

/* ═══════════ audit-view.html ═══════════ */
/* [high] Breakpoint dead-zone 641-768px (.tt-av-* responsive rules) */
@media (max-width: 768px) {
  .tt-av-topbar { padding: 12px 16px !important; }
  .tt-av-main { padding: 22px 16px 48px !important; }
  .tt-av-meta-card, .tt-av-audit-card { padding: 18px 16px !important; }
  .tt-av-audit-list { grid-template-columns: 110px 1fr !important; font-size: 12.5px !important; }
}
/* [medium] .tt-av-topbar (logo + title block + back button) */
@media (max-width: 768px) {
  .tt-av-topbar { gap: 10px !important; flex-wrap: nowrap !important; }
  .tt-av-topbar-left { min-width: 0 !important; flex: 1 1 auto !important; }
  .tt-av-back-btn { flex: 0 0 auto !important; }
}
/* [medium] Page body — no horizontal-overflow guard with long mono values (Contract ID / IP */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; }
  .tt-av-meta-value.mono,
  .tt-av-audit-list dd.mono { overflow-wrap: anywhere !important; word-break: break-all !important; }
}
/* [medium] .tt-av-back-btn — tap target under 40px */
@media (max-width: 768px) {
  .tt-av-back-btn { min-height: 40px !important; padding: 9px 14px !important; }
}
/* [low] .tt-av-audit-cert-btn — tap target under 40px */
@media (max-width: 768px) {
  .tt-av-audit-header { flex-wrap: wrap !important; gap: 10px !important; }
  .tt-av-audit-cert-btn { min-height: 40px !important; padding: 9px 14px !important; }
}
/* [low] .tt-av-audit-head (role label + verify/tampered hash badge) */
@media (max-width: 768px) {
  .tt-av-audit-head { flex-wrap: wrap !important; row-gap: 4px !important; }
}

/* ═══════════ SPA top header bar (.talent-header / admin header .header-content) ═══════════ */
/* [high] Admin profile menu (.tt-admin-profile-menu) — off-screen / no width clamp in 621 */
@media (max-width: 768px) {
  html body #dashboard-view .tt-admin-profile .tt-admin-profile-menu,
  html body .tt-admin-profile-menu {
    left: auto !important;
    right: 8px !important;
    min-width: 0 !important;
    width: min(280px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
  }
}
/* [medium] Talent profile dropdown (.talent-profile-dropdown) — no viewport clamp in 761-76 */
@media (max-width: 768px) {
  html body #dashboard-view.talent-shell .talent-profile-menu .talent-profile-dropdown,
  html body .talent-shell .talent-profile-dropdown {
    right: 8px !important;
    left: auto !important;
    min-width: 0 !important;
    width: min(280px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
  }
}
/* [medium] Header actions cluster (.talent-header-actions / admin .header-actions) — 761-76 */
@media (max-width: 768px) {
  html body #dashboard-view .talent-header-actions,
  html body #dashboard-view header .header-actions {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
  }
  html body #dashboard-view .talent-header-actions .lang-toggle-btn,
  html body #dashboard-view header .lang-toggle-btn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    flex: 0 0 auto !important;
  }
  html body .talent-profile-copy,
  html body .tt-admin-profile-btn > span:not(.tt-admin-profile-avatar),
  html body .tt-admin-profile-btn > svg {
    display: none !important;
  }
  html body #dashboard-view .talent-profile-menu summary,
  html body .tt-admin-profile-btn {
    min-height: 34px !important;
    padding: 3px !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
}
/* [low] Talent/admin notification toggle button (.tt-notif-toggle-btn) — tap target < 40 */
@media (max-width: 768px) {
  html body #dashboard-view .talent-header-actions .tt-notif-toggle-btn,
  html body #dashboard-view header .header-actions .tt-notif-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 auto !important;
  }
}