/* Auto-Text-Inflation auf echten Mobilgeraeten (Chrome/WebKit blaehen Text in
   breiten Block-Containern automatisch auf) unterbinden — sonst ist z.B. der
   Modal-Titel auf dem S22 viel groesser als die gesetzte font-size. Greift nur
   gegen das ungewollte Aufblasen, aendert keine explizit gesetzten Groessen.
   In der DevTools-Emulation unsichtbar (nur auf echten Touch-Geraeten aktiv). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (orientation: landscape) {  }
@media (orientation: portrait) {  }

/* Smartphones hochkant (Portrait) bis iPhone SE, Galaxy S Mini

@media (max-width: 480px) {  }
  
*/

:root {
  --bg: rgba(0, 71, 76, 0.2);
  --bg-lightblack: rgba(0, 0, 0, 0.8);
  --bg-green: rgba(0, 71, 76, 1);
  --fc-today-bg-color: #0e2648 !important;

  --main: #f5a623 !important;
  --main_connect: #f5a623af !important;
  --white: #fff !important;
  --darkgreen: #004f51 !important;

  --darkblue: #0a0f24 !important;
  --darkGray: #1F1F1F !important;


  --darkViolet: #181432 !important;
  --lightViolet: #2c203f !important;
  --darkRose: #88545d !important;
  --middleRose: #683347 !important;
  --lightRose: #88545d !important;

  --test: #1f2336 !important;
  /* --lightBlue: #0e2648 !important; */
  --lightred: #eb5543 !important;
  --darkred: #781b10 !important;
  --darkyellow: #dbbc0d !important;
  --grey: #2f3742 !important;

  --border: 3px;

  --font-xxl: 2rem !important;
  --font-xl: 1.5rem !important;
  --font-lg: 1.25rem !important;
  --font-sm: 1rem !important;
  --font-md: 0.75rem !important;
  --lineheight: 25px;
}

/* Default: Desktop sichtbar, Mobile versteckt */
.desktop_view { display: block; }
.mobile_view { display: none; }

/* Mobile Breakpoint (< 992px) - aktiviert Mobile-Ansicht */
@media (max-width: 991px) {
  .desktop_view { display: none !important; }
  .desktop_view:has(.guest-page-layout) { display: block !important; }
  .mobile_view { display: block !important; }

  /* Desktop Navigation verstecken */
  .navigation { display: none !important; }

  /* Page-Scrollbalken im gesamten Mobil-Bereich ausblenden (Scroll bleibt) */
  html, body {
    scrollbar-width: none !important;        /* Firefox */
    -ms-overflow-style: none !important;     /* alte Edge/IE */
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none !important;                /* Chrome/Safari */
    width: 0 !important;
    height: 0 !important;
  }

  /* Detail-Modal: der Header-Strich (span.border-span direkt unter dem Titel) soll
     weiter vom Titel weg. Der Strich hat Inline-Style margin-top:1rem — mit
     !important auf 1.75rem erhoehen. Gilt im gesamten Mobil/Tablet-Bereich (<=991px),
     da die 768px-Regel bei 769-991px nicht greift und dort nur der Inline-Wert wirkt. */
  .lazy-nl-modal .border-span,
  [id^="getNewsletterData"] .border-span {
    margin-top: 1.75rem !important;
  }

  /* Header-Toggle-Label "Öffentlich" (oben links) 1:1 an den "Spamtest"-Toggle
     angleichen. Betrifft ALLE Modals mit so einem Header-Toggle (Detail-Modal
     getNewsletterData UND Bearbeiten-Modal setNewsletterPage) — daher .modal als
     Anker, nicht nur getNewsletterData/.lazy-nl-modal.
     1) font-size 0.92rem (Inline 1rem/16px war groesser als Spamtest 0.92rem). */
  .modal .switch-button.position-absolute > label {
    font-size: 0.92rem !important;
  }
  /* 2) Im disabled-Fall liegt opacity:0.5 (inline) auf dem GANZEN Container -> das
     Label wirkte blass/kleiner als der voll deckende Spamtest. opacity vom Container
     nehmen und NUR auf den Schalter (.switch-outer) legen: Label voll deckend
     (= wie Spamtest), Toggle sieht weiter deaktiviert aus. */
  .modal .switch-button.position-absolute.disabled-toggle {
    opacity: 1 !important;
  }
  .modal .switch-button.position-absolute.disabled-toggle > .switch-outer {
    opacity: 0.5 !important;
  }
}

/* Smartphones quer + große Smartphones (iPhone 14 Pro Max, Galaxy S24 Ultra) */
@media (max-width: 768px) {
  html, body {
      min-height: 100% !important;
      height: auto !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      /* Page-Scrollbalken ausblenden (Scroll-Funktion bleibt) */
      scrollbar-width: none !important;        /* Firefox */
      -ms-overflow-style: none !important;     /* alte Edge/IE */
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
      display: none !important;                /* Chrome/Safari */
      width: 0 !important;
      height: 0 !important;
  }

  .mc_a_row {
    top: 3rem;
    left: 0rem;
    padding: 1rem;
    width: 100%;
    /* height: 31rem !important; */
    /* Background-Override ENTFERNT: der alte linear-gradient + bg_poly.svg
       ueberdeckte den schoenen SVG-data-URI-Polygon-Hintergrund aus styles.css
       (Desktop) mit einem durchscheinenden alten CI-Bild. Jetzt greift mobil
       derselbe Modal-Hintergrund wie auf Desktop / wie bei jd-mail. */
  }

  .box_histroy_count {
    background-color: var(--darkblue) !important;
    min-height: 5rem;
    min-width: 5rem;
    border: solid 1px var(--darkgreen);
    border-radius: var(--border);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem !important;
    margin-top: 1rem;
    background-image: 
    linear-gradient(rgba(10, 15, 36, 0.7), rgba(10, 15, 36, 0.4)),  /* dunkler Overlay */
    url('../svg/bg_poly.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

}

@media (hover: none) and (pointer: coarse) {

  button { padding: 1rem 2rem; }
}

.choose-adspace {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;       /* volle Breite */
  z-index: 9999;     /* damit es über allem liegt */
}

.navigation-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;       /* volle Breite */
  min-height: 1rem;  /* Höhe */
  background-color: var(--darkblue);
  z-index:9999;     /* damit es über allem liegt */
}


.newsletter-carusell-row{
  position: relative;
  background-color: var(--darkblue);
  border-radius: var(--border);
  border: 2px solid var(--darkgreen);
  height: 25rem !important;
  width: 100%;
  background-image:
  linear-gradient(rgba(10, 15, 36, 0.7), rgba(10, 15, 36, 0.4)),  /* dunkler Overlay */
  url('../svg/bg_poly_new.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =============================================================================
   MOBILE MODAL STYLES
   Fullscreen Modals auf Mobile Geräten
   ============================================================================= */

@media (max-width: 768px) {
  .modal {
    padding: 0 !important;
  }

  .modal-dialog,
  .modal-dialog.modal-hcenter {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    overflow-y: auto !important;
  }

  .modal-content {
    position: relative !important;
    border-radius: 0 !important;
    border: none !important;
    min-height: 100vh;
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto !important;
  }

  .mc_a,
  .mc_a_row {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 3rem 1.25rem 4rem 1.25rem !important;
    transform: none !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    min-height: 100vh;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .mc_a::-webkit-scrollbar,
  .mc_a_row::-webkit-scrollbar,
  .modal::-webkit-scrollbar,
  .modal-dialog::-webkit-scrollbar {
    display: none;
  }

  .modal,
  .modal-dialog {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* Modal Header zentriert */
  .modal-header-wrapper {
    position: relative;
    z-index: 10;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding-right: 0 !important;
  }

  .modal-header-wrapper h2,
  .modal-header-wrapper .header-style {
    width: 100% !important;
    text-align: center !important;
  }

  /* Border-Span volle Breite */
  .mc_a .border-span,
  .mc_a_row .border-span {
    width: 100%;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Formulare im Modal volle Breite */
  .mc_a form,
  .mc_a_row form {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Alle Row und Col Elemente im Modal */
  .mc_a .row:not(.blacklist-entry-content):not(.blacklist-header-row),
  .mc_a_row .row:not(.blacklist-entry-content):not(.blacklist-header-row) {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .mc_a .col:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions),
  .mc_a_row .col:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions),
  .mc_a .row:not(.blacklist-header-row):not(.blacklist-entry-content) > [class*="col-"]:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions),
  .mc_a_row .row:not(.blacklist-header-row):not(.blacklist-entry-content) > [class*="col-"]:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions) {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Blacklist Header Row */
  .mc_a .blacklist-header-row,
  .mc_a_row .blacklist-header-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0 0.5rem !important;
  }

  .mc_a .blacklist-header-row > [class*="col-"],
  .mc_a_row .blacklist-header-row > [class*="col-"] {
    padding: 0 !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }

  .mc_a .blacklist-header-row > .col-3,
  .mc_a_row .blacklist-header-row > .col-3 {
    flex: 1 !important;
    max-width: none !important;
    width: auto !important;
    text-align: left !important;
  }

  .mc_a .blacklist-header-row > .col-7,
  .mc_a_row .blacklist-header-row > .col-7 {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
  }

  .mc_a .blacklist-header-row > .col-2,
  .mc_a_row .blacklist-header-row > .col-2 {
    flex: 0 0 36px !important;
    max-width: none !important;
    width: 36px !important;
  }

  /* Blacklist Einträge: Row als Flex-Row statt Column */
  .mc_a .blacklist-entry-content,
  .mc_a_row .blacklist-entry-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.5rem !important;
    padding: 0 0.5rem !important;
  }

  .mc_a .blacklist-entry-value,
  .mc_a_row .blacklist-entry-value {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 0.8rem !important;
    word-break: break-all !important;
    text-align: left !important;
    padding: 0 !important;
  }

  .mc_a .blacklist-entry-date,
  .mc_a_row .blacklist-entry-date {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 0 !important;
  }

  .mc_a .blacklist-entry-actions,
  .mc_a_row .blacklist-entry-actions {
    flex: 0 0 auto !important;
    width: 36px !important;
    max-width: none !important;
    padding: 0 !important;
  }

  /* Blacklist Delete Button - wie X-Button */
  .blacklist-delete-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: #0a0f24 !important;
    border: none !important;
    border-radius: 3px !important;
    color: #fff !important;
    font-size: 0.85rem !important;
    padding: 0 !important;
    margin-right: 1rem !important;
    cursor: pointer !important;
  }

  .blacklist-delete-btn:hover,
  .blacklist-delete-btn:active {
    border-color: #f44336 !important;
    color: #f44336 !important;
  }

  /* Form-Elemente volle Breite */
  .mc_a .form-select,
  .mc_a_row .form-select,
  .mc_a select,
  .mc_a_row select,
  .mc_a .input-basic,
  .mc_a_row .input-basic,
  .mc_a input[type="text"],
  .mc_a_row input[type="text"],
  .mc_a input[type="date"],
  .mc_a_row input[type="date"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Einheitliche Abstände zwischen Formular-Elementen */
  .mc_a .row,
  .mc_a_row .row {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
  }

  .mc_a .row:last-child,
  .mc_a_row .row:last-child {
    margin-bottom: 0 !important;
  }

  /* Header-Style auf Mobile */
  .mc_a .header-style,
  .mc_a_row .header-style {
    font-size: 1.25rem !important;
    letter-spacing: 0.15rem !important;
  }

  /* Kampagnen-Detail-Modal-Titel (Lazy-Modal): so gross wie die Tab-Schrift
     (0.8rem) — auf echten Touch-Geraeten wirkte 1.25rem (+ Font-Boosting) viel
     zu gross. Fett + letter-spacing bleibt, damit er als Ueberschrift lesbar ist. */
  .lazy-nl-modal h2.header-style {
    font-size: 0.8rem !important;
  }

  /* Submit Button Abstand */
  .mc_a .btn_main,
  .mc_a_row .btn_main {
    margin-top: 0.75rem !important;
    width: 100% !important;
  }

  /* =============================================================================
     MOBILE CLOSE BUTTON für Modals
     ============================================================================= */
  .modal-close-mobile {
    display: flex !important;
    position: fixed;
    top: 0.75rem;
    right: 1.5rem;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: rgba(10, 15, 36, 0.8);
    border: 1px solid #88545d;
    border-radius: 3px;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    z-index: 9999;
    padding: 0;
  }

  .modal-close-mobile:hover,
  .modal-close-mobile:active {
    background: rgba(136, 84, 93, 0.5);
    border-color: #fff;
  }

  /* =============================================================================
     NEWSLETTER MODAL: Upload-Buttons + Sub-Tabs Fix
     ============================================================================= */

  /* Upload-Buttons: nicht mehr absolute, zentriert als eigene Zeile */
  .mc_a .nav-tabs .nav-item.position-absolute,
  .mc_a_row .nav-tabs .nav-item.position-absolute {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-bottom: 0.5rem;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap;
  }

  /* Upload-Button Labels kleiner */
  .mc_a .custom-file label,
  .mc_a_row .custom-file label {
    font-size: 0.75rem !important;
    padding: 0.3rem 0.5rem !important;
  }

  /* Nav-Tabs auf Mobile: mehrzeilig (Profil hat 4 Tabs, Editor-Modals 5+) */
  .mc_a .nav-tabs,
  .mc_a_row .nav-tabs {
    flex-wrap: wrap !important;
    font-size: 0.8rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* "Öffentlich"-Toggle im Detail-Modal: auf Desktop absolut oben rechts
     (Inline top:2rem;right:2rem). Auf Mobile oben LINKS auf Hoehe des
     X-Buttons (top:8px;right:8px) als Gegenstueck zum X. Switch oben, Label
     "Öffentlich" klein DARUNTER (column) — daneben wuerde es den zentrierten
     Titel ueberlappen, deshalb gestapelt und schmal gehalten. */
  .lazy-nl-modal form > .switch-button.position-absolute {
    position: absolute !important;
    top: 0.8rem !important;
    left: 0.875rem !important;
    right: auto !important;
    margin: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.15rem !important;
    z-index: 6 !important;
  }
  /* "Öffentlich"-Label (form > switch-button im Modal-Header): war 0.6rem (winzig).
     Auf 0.92rem = exakt wie der Spamtest-Toggle. (User-Wunsch: 1:1 wie Spamtest.) */
  .lazy-nl-modal form > .switch-button.position-absolute > label {
    display: block !important;
    font-size: 0.92rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Header-Trennstrich (.border-span): liegt im flex-column-Container und
     kollabiert dort auf 0 (height wird zur schrumpfbaren Main-Size) -> der
     rosé Strich war unsichtbar. flex-shrink:0 + min-height fixen das.
     margin-top 1.75rem = Abstand zum Titel (User wollte den Strich weiter vom
     Titel weg). Konsistent mit der 991px-Regel oben. */
  .lazy-nl-modal .border-span {
    flex-shrink: 0 !important;
    min-height: 2px !important;
    margin-top: 1.75rem !important;
  }

  /* Blacklisten-Tab: Pills NICHT als 4-Spalten-Grid (Namen brechen um / werden
     abgeschnitten), sondern 1 Item pro Zeile ueber volle Breite, linksbuendig
     als Card mit Check-Icon links. (Inline-width wurde im Markup entfernt, daher
     greift dieses width:100% jetzt.) */
  [id^="blacklists"] .bl-update-item {
    width: 100% !important;
    text-align: left !important;
    padding: 0.7rem 0.75rem 0.7rem 2rem !important;
    margin: 0 !important;
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border-radius: var(--border) !important;
    box-sizing: border-box !important;
  }
  [id^="blacklists"] .bl-update-item .fa-check {
    left: 0.7rem !important;
  }

  /* Zielgruppe-Tab — PLZ-Range-Reihen: Von + Bis je volle Breite untereinander,
     der Minus-Button drunter in eigener zentrierter Zeile (wie die Plus/Minus-
     Buttons bei Absender/Betreff/Preheader im Details-Tab). Vorher: Bis-Input
     schmal mit Minus daneben in derselben .col. */
  [id^="plzRanges"] > .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.3rem !important;
  }
  [id^="plzRanges"] > .row > .col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  /* Zweite .col enthaelt Bis-Input + Minus-Button -> ebenfalls stapeln,
     damit der Minus-Button unter dem Bis-Input landet. */
  [id^="plzRanges"] > .row > .col:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.3rem !important;
  }
  [id^="plzRanges"] > .row > .col:nth-child(2) > div {
    width: 100% !important;
  }
  /* Minus- UND Plus-Button identisch quadratisch 40x40, Icon mittig zentriert.
     Die Buttons tragen padding:16px 32px (= 64px breit) + die Icons haben
     Inline-margin-Hacks (margin-top/left) zur Pseudo-Zentrierung -> beides
     neutralisieren, damit Minus und Plus gleich aussehen. */
  [id^="plzRanges"] .remove-plz-row,
  [id^="targetgroup"] [id^="addPlzRange"] {
    align-self: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  [id^="plzRanges"] .remove-plz-row > i,
  [id^="targetgroup"] [id^="addPlzRange"] > i {
    margin: 0 !important;
  }
  /* Location-Pin-Icons bei Von/Bis auf gleiche horizontale Position. Das Bis-Icon
     hatte inline right:0.7rem (wegen des frueher daneben sitzenden Minus-Buttons),
     das Von-Icon right:1.5rem -> beide auf 1.5rem, sonst wirken sie versetzt. */
  [id^="plzRanges"] .col .fa-location-dot {
    right: 1.5rem !important;
  }

  /* Tab-Leisten im Detail-Modal (Haupt-Leiste mit 17 Tabs UND die inneren
     Sub-Leisten: WM-Leiste, HTML/TEXT/Details/Ranking/Spamtest): NICHT umbrechen,
     sondern einzeilig horizontal scrollbar. Der angeschnittene letzte Tab gibt
     den Scroll-Hinweis. Scrollbar versteckt (Projekt-Standard). */
  .lazy-nl-modal ul.nav-tabs,
  .m-as-modal ul.nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Flex-Container nimmt die Hoehe der list-item-Kinder nicht automatisch an
       (kollabiert sonst auf ~1px) -> min-height erzwingen. */
    min-height: 42px !important;
    align-items: flex-start !important;
  }
  /* Leisten mit eingebetteten Upload-Buttons (.nav-item.position-absolute, z.B.
     HTML/TEXT/Details/Ranking/Spamtest): die Upload-Buttons (HTML/Bilder hochladen)
     als eigene Zeile OBEN positionieren, damit die echten Tabs darunter einzeilig
     scrollen koennen. WICHTIG: Upload absolut relativ zum DIREKTEN ul-Eltern (der
     NICHT scrollt) — NICHT zur scrollenden ul, sonst scrollen die Upload-Buttons
     mit. Gilt fuer initial gerenderte WM (ul direkt in .tab-pane) UND neu per "+"
     hinzugefuegte WM (ul liegt dann in .row/.tab-pane-content). Die ul bleibt
     static + padding-top schafft den Platz fuer die Upload-Zeile. */
  .lazy-nl-modal :is(.tab-pane, .row, .tab-pane-content):has(> ul.nav-tabs > .nav-item.position-absolute) {
    position: relative !important;
  }
  .lazy-nl-modal ul.nav-tabs:has(.nav-item.position-absolute) {
    position: static !important;
    /* margin-top:0 — die ul hat sonst mt-1, dadurch saesse die absolut oben
       positionierte Upload-Zeile relativ zum ul-Border zu hoch (zu grosse Luecke
       zu den Tabs). padding-top schafft genau den Platz fuer die Upload-Zeile
       (~35px hoch) + ~8px Abstand zu den Tabs. */
    margin-top: 0 !important;
    padding-top: 2.7rem !important;
  }
  .lazy-nl-modal ul.nav-tabs > .nav-item.position-absolute {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
  }
  /* Nur die Haupt-Leiste (direktes Kind von .mc_a_row/.mc_a) braucht Abstand zum
     Header-Strich; die inneren Sub-Leisten nicht. */
  .lazy-nl-modal .mc_a_row > ul.nav-tabs,
  .lazy-nl-modal .mc_a > ul.nav-tabs,
  .m-as-modal .mc_a_row > ul.nav-tabs,
  .m-as-modal .mc_a > ul.nav-tabs {
    margin-top: 0.5rem !important;
  }

  .lazy-nl-modal ul.nav-tabs::-webkit-scrollbar,
  .m-as-modal ul.nav-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Echte Tabs (nicht die Upload-nav-item) nicht schrumpfen lassen. */
  .lazy-nl-modal ul.nav-tabs > li:not(.position-absolute),
  .m-as-modal ul.nav-tabs > li:not(.position-absolute) {
    flex: 0 0 auto !important;
  }

  .lazy-nl-modal ul.nav-tabs > li > .nav-link,
  .m-as-modal ul.nav-tabs > li > .nav-link {
    white-space: nowrap !important;
  }

  /* Tab-Content: kein festes padding-left */
  .mc_a .tab-content,
  .mc_a_row .tab-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Row im Tab-Content: kein festes padding-left */
  .mc_a .tab-pane .row,
  .mc_a_row .tab-pane .row,
  .mc_a .tab-pane-content .row,
  .mc_a_row .tab-pane-content .row {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* TEXT-Textarea: volle Breite statt 91rem */
  .mc_a .textarea,
  .mc_a_row .textarea,
  .mc_a textarea.textarea,
  .mc_a_row textarea.textarea {
    width: 100% !important;
    max-width: 100% !important;
    height: 20rem !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
  }

  /* TinyMCE Editor: volle Breite + Parent-Container */
  .mc_a .d-flex.justify-content-center:has(.tox-tinymce),
  .mc_a_row .d-flex.justify-content-center:has(.tox-tinymce) {
    width: 100% !important;
  }

  .mc_a .tox-tinymce,
  .mc_a_row .tox-tinymce {
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
  }

  /* Link/Bild-Container: volle Breite */
  .mc_a .link-container,
  .mc_a_row .link-container,
  .mc_a .image-container,
  .mc_a_row .image-container {
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  /* Negative margins entfernen */
  .mc_a .d-flex.justify-content-center textarea,
  .mc_a_row .d-flex.justify-content-center textarea {
    margin-left: 0 !important;
  }

  /* Parameterliste + Dynamische Inhalte: 2 pro Reihe statt 4 */
  .mc_a .copy-wrapper,
  .mc_a_row .copy-wrapper {
    width: calc(50% - 0.25rem) !important;
  }

  /* Öffentlich-Toggle auf Mobile: rechts, 40% kleiner, scrollt mit */
  .mc_a .checkbox-wrapper-8.position-absolute,
  .mc_a_row .checkbox-wrapper-8.position-absolute {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.3rem !important;
    margin-bottom: 0.5rem;
    transform: scale(0.6);
    transform-origin: right center;
  }

  /* Details-Wrapper Margins */
  .mc_a .details-wrapper .col,
  .mc_a_row .details-wrapper .col,
  .mc_a .details-wrapper- .col,
  .mc_a_row .details-wrapper- .col {
    margin-left: 0 !important;
  }

  /* WM Tab Namen kleiner */
  .mc_a .editTabName,
  .mc_a_row .editTabName {
    font-size: 0.85rem !important;
  }

  /* DYNAMIC: Gap zwischen Alle-Zeile und Bedingungen angleichen (0.5rem statt 0.75rem) */
  .mc_a .tab-pane > .row,
  .mc_a_row .tab-pane > .row {
    margin-bottom: 0.5rem !important;
  }

  /* Tab-Pane: TinyMCE-Abstand zu Tabs auf 0.5rem (mt-1 + JS margin entfernen) */
  .mc_a .tab-pane > .d-flex.mt-1,
  .mc_a_row .tab-pane > .d-flex.mt-1 {
    margin-top: 0 !important;
  }

  .mc_a .tab-pane .tox-tinymce,
  .mc_a_row .tab-pane .tox-tinymce {
    margin-top: 0 !important;
  }

  /* DYNAMIC: Von/Bis Labels vor Wochentag-Selects */
  [class*="day-col-1"]::before,
  [class*="day-col-2"]::before {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.25rem;
    text-align: center;
  }

  [class*="day-col-1"]::before {
    content: "Von";
  }

  [class*="day-col-2"]::before {
    content: "Bis";
  }

  /* =============================================================================
     DYNAMIC: Bedingungs-Zeilen - Minus-Button neben Select statt ueberlappend
     ============================================================================= */
  .mc_a .container-fluid.position-relative:has(.removeButton),
  .mc_a_row .container-fluid.position-relative:has(.removeButton) {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding-right: 0 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
  }

  .mc_a .container-fluid.position-relative:has(.removeButton) > .row,
  .mc_a_row .container-fluid.position-relative:has(.removeButton) > .row {
    width: 100% !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
  }

  .mc_a .container-fluid.position-relative:has(.removeButton) > .position-absolute,
  .mc_a_row .container-fluid.position-relative:has(.removeButton) > .position-absolute {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    flex-shrink: 0 !important;
    margin-top: 0.25rem;
  }
}

/* Desktop: Close-Button versteckt */
.modal-close-mobile {
  display: none;
}

/* ========================================
   GUEST PAGE - ALLGEMEIN (alle Breakpoints)
   ======================================== */

/*
 * Problem 1: .div_light_desktop > * setzt z-index: 1 auf .guest-page-layout.
 * Dadurch liegt der gesamte Gast-Inhalt unter Bootstrap-Backdrop (z-index: 1040/1050).
 * Fix: .guest-page-layout auf z-index: 2000 anheben → über jedem Backdrop.
 */
.guest-page-layout {
    position: relative !important;
    z-index: 2000 !important;
}

/*
 * Problem 2: Breakpoint-Regeln in styles.css setzen transform: translateX(-50%)
 * auf .mc_a bei 992–1399px (ohne !important). Unser Media-Query-Override hat
 * nur left und width, nicht transform. → Modal-Content verschiebt sich ~45vw nach
 * links, Tabs landen off-screen und sind unklickbar.
 * Fix: transform: none !important für alle .guest-modal .mc_a.
 */
.guest-modal .mc_a {
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
}

/* ========================================
   GUEST PAGE - DESKTOP
   ======================================== */

/* ≥ 1200px: Zwei-Spalten Layout — Sidetext 35%, Modal 65% */
@media (min-width: 1200px) {
    .guest-page-layout {
        display: flex;
        align-items: flex-start;
        min-height: 100vh;
    }

    .guest-sidetext-col {
        width: 25%;
        flex-shrink: 0;
        padding: 2rem 1rem;
    }

    .guest-sidetext-col .guest-sidetext {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        max-width: none !important;
    }

    .guest-modal-col {
        width: 75%;
        position: relative;
    }

    .guest-modal-col .guest-modal {
        position: relative !important;
        display: block !important;
    }

    .guest-modal-col .guest-modal .mc_a {
        left: 0 !important;
        width: 100% !important;
    }

    .guest-modal-col .guest-modal .modal-dialog {
        max-width: calc(100% - 2rem);
        width: calc(100% - 2rem);
        margin: 1.75rem 1rem;
    }
}

/* 992px–1199px: Sidetext ausblenden, Modal 100% */
@media (min-width: 992px) and (max-width: 1199px) {
    .guest-sidetext-col {
        display: none;
    }

    .guest-modal-col {
        width: 100% !important;
    }

    .guest-modal {
        position: relative !important;
        display: block !important;
        width: 100%;
    }

    .guest-modal .mc_a {
        left: 0 !important;
        width: 100% !important;
    }

    .guest-modal .modal-dialog {
        max-width: 100%;
        width: 100%;
        margin: 1rem;
    }
}

/* < 992px: Sidetext ausblenden, Modal fullwidth */
@media (max-width: 991px) {
    .guest-sidetext-col {
        display: none;
    }

    .guest-modal {
        position: relative !important;
        display: block !important;
        width: 100%;
    }

    .guest-modal .mc_a {
        left: 0 !important;
        width: 100% !important;
    }

    .guest-modal .modal-dialog {
        max-width: 100%;
        width: 100%;
        margin: 0;
    }
}

/* ========================================
   GUEST PAGE - MOBILE
   ======================================== */

@media (max-width: 768px) {

    /* Fullscreen Modal */
    .guest-modal .modal-dialog {
        margin: 0;
        max-width: 100%;
        width: 100%;
    }

    .guest-modal .modal-content {
        border-radius: 0;
        min-height: 100vh;
        padding: 1rem 1rem 4rem 1rem;
    }

    /* 7 Tabs horizontal scrollbar */
    .guest-modal .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .guest-modal .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .guest-modal .nav-tabs .nav-link {
        white-space: nowrap;
        font-size: 0.75rem;
        padding: 0.35rem 0.6rem;
    }

    /* Textareas responsive */
    .guest-modal textarea.textarea {
        width: 100% !important;
        min-height: 15rem !important;
        box-sizing: border-box;
    }

    /* Info Icon + Panel */
    .guest-info-toggle {
        top: 0.5rem !important;
        left: 0.5rem !important;
    }

    .guest-info-panel {
        top: 3.5rem !important;
        left: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }
}








/* =============================================================================
   4.1 LOGIN MOBILE (m-login-*) — eingefuehrt 2026-05-20
   Strikt getrennt vom Desktop-Login. Eigenes Markup im mobile_content-Block,
   eigene Klassen. Doku: [[UI Mobile#🟡 Login-Seite]]
   ============================================================================= */
@media (max-width: 991px) {

  /* Vollbild-Container, vertikal zentriert, ohne top:Xrem-Hacks */
  .m-login-screen {
    min-height: 100dvh;
    min-height: 100vh; /* Fallback fuer alte iOS */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
  }

  /* Logo-Block */
  .m-login-logo {
    width: 100%;
    max-width: 22rem;
    margin-bottom: 2.5rem;
    display: flex;
    justify-content: center;
  }
  .m-login-logo img {
    width: 60%;
    max-width: 12rem;
    height: auto;
    display: block;
  }

  /* Form-Container */
  .m-login-form {
    width: 100%;
    max-width: 22rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  /* Remember-Me-Zeile */
  .m-remember {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    user-select: none;
  }
  .m-remember-text {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
  }

  /* Animierte Checkbox (Reuse Pattern aus Desktop, mobil-tauglich) */
  .m-checkbox {
    position: relative;
    width: 26px;
    height: 26px;
    display: inline-flex;
    flex-shrink: 0;
  }
  .m-checkbox input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
  }
  .m-checkbox svg {
    width: 100%;
    height: 100%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.04);
    box-sizing: border-box;
    transition: all 0.18s ease;
  }
  .m-checkbox svg path {
    fill: none;
    stroke: #fff;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.25s ease;
  }
  .m-checkbox input:checked + svg {
    border-color: var(--darkRose);
    background: var(--darkRose);
  }
  .m-checkbox input:checked + svg path {
    stroke-dashoffset: 0;
  }

  /* Inputs: input-basic-Look (analog Dashboard-Header-Selector)
     var(--darkblue) Background, transparent Border, box-shadow inset+drop
     !important noetig, weil globales .input-basic in styles.css mit !important arbeitet */
  .m-input {
    width: 100% !important;
    height: 48px !important;
    padding: 0 1rem !important;
    font-size: 16px !important;
    color: var(--white) !important;
    background-color: var(--darkblue) !important;
    border: 1px solid transparent !important;
    border-radius: var(--border) !important;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
                rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease;
  }
  .m-input:focus {
    outline: none;
    border-color: var(--darkRose) !important;
  }
  .m-input::placeholder {
    color: var(--white);
    opacity: 1;
  }

  /* Buttons (Primary, Secondary, Link) — 48px Hoehe, voll-breit, untereinander, kein Border */
  .m-btn {
    width: 100%;
    height: 48px;
    padding: 0 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    border-radius: var(--border);
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .m-btn:active { transform: scale(0.98); }

  .m-btn-primary {
    background: var(--darkRose);
  }
  .m-btn-primary:hover { background: var(--lightRose); }

  .m-btn-secondary {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent);
    color: var(--white);
  }
  .m-btn-secondary:hover {
    background: var(--darkblue);
  }

  .m-btn-link {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.5rem;
    background: none;
    border: none;
    color: var(--white);
    font-size: 0.9rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .m-btn-link:hover { color: var(--darkRose); }

  /* Loading-Overlay Mobile (kleiner als Desktop) */
  .m-login-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .m-login-overlay.is-active { display: flex; }
  .m-login-overlay-inner {
    text-align: center;
    color: #fff;
  }
  .m-login-overlay img {
    width: 120px;
    height: auto;
    animation: bounce 1.875s ease-in-out infinite;
    margin-bottom: 24px;
  }
  .m-login-overlay h3 {
    margin: 0 0 16px;
    font-size: 1.1rem;
    font-weight: 400;
    opacity: 0.9;
  }
  .m-login-overlay-progress {
    width: 160px;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
    margin: 0.75rem auto 0;
  }
  .m-login-overlay-progress > div {
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--darkRose), transparent);
    animation: loading 2.5s ease-in-out infinite;
    border-radius: 2px;
  }
}


/* =============================================================================
   4.2 DASHBOARD MOBILE (m-dash-*) — eingefuehrt 2026-05-20
   Eigenes Mobile-Body-Markup statt geteilter dash-*-Klassen.
   Doku: [[UI Mobile#🟡 Dashboard]]
   ============================================================================= */
@media (max-width: 991px) {

  .m-dash {
    padding: 0.75rem;
    padding-bottom: 6rem; /* Platz fuer Bottom-Nav */
  }

  /* Sektion — gleicher Abstand zwischen Sections wie zwischen Cards in einem Grid (0.6rem) */
  .m-dash-section {
    margin-bottom: 0.6rem;
  }
  .m-dash-section:last-child {
    margin-bottom: 0;
  }

  .m-dash-section-title {
    /* !important noetig — globales h2 in styles.css setzt margin-bottom: 0 !important
       Margins kompakt damit zwischen Sections gleicher Abstand wie zwischen Cards (0.6rem) */
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0.6rem !important;
    margin-left: 0.15rem !important;
    font-size: 0.8rem !important;
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .m-dash-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.5rem;
    border-radius: 1rem;
    background: var(--darkRose);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
  }

  /* KPI Grid */
  .m-dash-kpi-grid {
    display: grid;
    gap: 0.6rem;
  }
  .m-dash-kpi-grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  /* KPI Card — analog Desktop (.dash-kpi-card):
     Label oben + Wert mitte, alles zentriert
     Markup ist <icon, value, label> → column-reverse zeigt Label zuerst (oben), Value danach
     CI-konform: var(--darkblue) 75% transparent, KEIN Border, KEIN Shadow */
  .m-dash-kpi-card {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent);
    border: none;
    border-radius: var(--border);
    padding: 0.75rem 0.75rem;
    box-shadow: none;
    display: flex;
    flex-direction: column-reverse;   /* Label oben, Value mitte/unten */
    align-items: center;               /* horizontal zentriert */
    justify-content: center;           /* vertikal zentriert */
    text-align: center;
    min-height: 4.2rem;
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s ease;
  }
  .m-dash-kpi-card:hover {
    background: var(--darkblue);
  }
  /* compact-Klasse bleibt aus Markup-Gruenden, ist aber jetzt identisch zur normalen Card */
  .m-dash-kpi-card-compact {
    min-height: 4.2rem;
    padding: 0.75rem 0.75rem;
  }
  .m-dash-kpi-card-wide {
    grid-column: span 2;
  }

  /* KPI-Icons komplett ausgeblendet — User-Feedback 2026-05-20 */
  .m-dash-kpi-icon {
    display: none !important;
  }

  .m-dash-kpi-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.2rem;
    margin-top: 0.4rem; /* Abstand zum Label oben (column-reverse: Label "vor" Value) */
  }
  .m-dash-kpi-unit {
    font-size: 0.75em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 0.1rem;
  }

  .m-dash-kpi-label {
    font-size: 0.78rem;
    color: var(--white); /* analog Desktop: Label weiss, nicht hellgrau */
    margin: 0;
  }

  /* Top 3 */
  .m-dash-top3 {
    background: color-mix(in srgb, var(--darkblue) 88%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border);
    overflow: hidden;
  }
  .m-dash-top3-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .m-dash-top3-row:last-child {
    border-bottom: none;
  }
  .m-dash-top3-rank {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
  }
  .m-dash-top3-info {
    flex: 1;
    min-width: 0;
  }
  .m-dash-top3-name {
    color: var(--white);
    font-weight: 500;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-dash-top3-meta {
    margin-top: 0.25rem;
    display: flex;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
  }
  .m-dash-top3-meta i {
    margin-right: 0.3rem;
    color: rgba(255, 255, 255, 0.4);
  }

  /* Generische Listen (Freigaben / Anfragen) */
  .m-dash-list {
    background: color-mix(in srgb, var(--darkblue) 88%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border);
    overflow: hidden;
  }
  .m-dash-list-item {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .m-dash-list-item:last-child {
    border-bottom: none;
  }
  .m-dash-list-item-title {
    color: var(--white);
    font-weight: 500;
    font-size: 0.95rem;
  }
  .m-dash-list-item-meta {
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
  }

  /* Empty-State (CI-konform: weiss, NICHT grau — [[UI Listen-Patterns]]) */
  .m-dash-empty {
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--white);
    font-size: 0.85rem;
    background: color-mix(in srgb, var(--darkblue) 88%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border);
  }

  /* Chart-Karte — CI-konform analog KPI-Cards (75% transparent, KEIN Border) */
  .m-dash-chart-card {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent);
    border: none;
    border-radius: var(--border);
    padding: 0.85rem 0.75rem 1rem;
  }
  .m-dash-chart-canvas-wrap {
    position: relative;
    width: 100%;
    height: 260px;
  }
  .m-dash-chart-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
  }

  /* Top 3 Card — CI-konform: 75% transparent, KEIN Border, KEIN Shadow (wie KPI-Cards) */
  .m-dash-top3-card {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent);
    border: none;
    border-radius: var(--border);
    overflow: hidden;
  }
  .m-dash-top3-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
  }
  /* Period-Dropdown im input-basic-Look (analog Header-Selector / dash-mobile-selector) */
  .m-dash-top3-period {
    width: 100%;
    height: 40px;
    padding: 0.5rem 0.75rem;
    padding-right: 2.25rem;
    background-color: var(--darkblue);
    border: 1px solid transparent;
    border-radius: var(--border);
    color: var(--white);
    font-size: 0.9rem;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
                rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
  }
  .m-dash-top3-period:focus {
    outline: none;
    border-color: var(--darkRose);
  }
  .m-dash-top3-period option {
    background: var(--darkblue);
    color: var(--white);
  }
  .m-dash-top3-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
  .m-dash-top3-tab {
    height: 40px;
    padding: 0 0.75rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--border);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .m-dash-top3-tab:active { transform: scale(0.98); }
  .m-dash-top3-tab.active {
    background: var(--darkRose);
    border-color: var(--darkRose);
    color: var(--white);
    font-weight: 500;
  }

  .m-dash-top3-list {
    /* Container fuer die Items */
  }
  .m-dash-top3-item {
    padding: 0.85rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .m-dash-top3-item:first-child {
    padding-top: 0.5rem; /* enger an Toolbar dran */
  }
  .m-dash-top3-item:last-child {
    border-bottom: none;
  }
  .m-dash-top3-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.55rem;
  }
  .m-dash-top3-medal {
    font-size: 1.35rem;
    line-height: 1;
  }
  .m-dash-top3-name {
    color: var(--white);
    font-weight: 500;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-dash-top3-start {
    color: var(--white);
    font-size: 0.78rem;
    white-space: nowrap;
  }
  .m-dash-top3-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.4rem;
  }
  .m-dash-top3-stat {
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--border);
    padding: 0.5rem 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  /* Label oben, Wert unten — analog KPI-Cards */
  .m-dash-top3-stat-lbl {
    display: block;
    order: 1;
    color: var(--white);
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
  }
  .m-dash-top3-stat-val {
    display: block;
    order: 2;
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
  }

  /* === Widget-Sections (Anfragen + Freigaben) — full-width, voll interaktiv === */
  /* Container im KPI-Card-Look (75% transparent darkblue, kein Border) */
  .m-dash-widget-section .m-dash-widget-body {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent);
    border: none;
    border-radius: var(--border);
    padding: 0.6rem;
  }
  /* Items: Flex-Column — Status-Icon, Inputs, Action-Row (alles zentriert) */
  .m-dash-widget-section .accordion-item {
    background: rgba(0, 0, 0, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: var(--border) !important;
    padding: 0.5rem !important;
    margin-bottom: 0.4rem !important;
  }
  .m-dash-widget-section .accordion-item:last-child {
    margin-bottom: 0 !important;
  }
  /* container-fluid → Flex-Column + Wrap, KEIN absolutes Layout im Mobile */
  .m-dash-widget-section .accordion-item .container-fluid {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.3rem !important;
    padding: 0 !important;
    position: static !important;
  }
  /* Status-Icon (Freigaben) als eigene volle Zeile oben, zentriert */
  .m-dash-widget-section .accordion-item .container-fluid > .position-absolute:not(.btn_add):not(.btn_delete) {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0.5rem 0 0 0 !important;
    padding: 0 !important;
    font-size: 1.1rem;
    order: 0;
  }
  .m-dash-widget-section .accordion-item .container-fluid > .position-absolute:not(.btn_add):not(.btn_delete) > i {
    margin: 0 auto !important;
    display: inline-block;
  }
  /* Inputs: alle in EINER Reihe (Kampagne | Werbefläche | Alias / Volume / Payout) */
  .m-dash-widget-section .accordion-item .col-lg-1,
  .m-dash-widget-section .accordion-item .col-lg-2,
  .m-dash-widget-section .accordion-item .col-lg-3,
  .m-dash-widget-section .accordion-item .col-lg-4,
  .m-dash-widget-section .accordion-item .col-lg-5,
  .m-dash-widget-section .accordion-item .col-lg-6 {
    flex: 1 1 0 !important;
    display: block !important;
    width: auto !important;
    vertical-align: initial !important;
    margin: 0 !important;
    order: 1;
    min-width: 0;
  }
  .m-dash-widget-section .accordion-item .px-1 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Inputs Look */
  .m-dash-widget-section .accordion-item .form-control {
    background: rgba(0, 0, 0, 0.15) !important;
    border: 1px solid transparent !important;
    color: var(--white) !important;
    font-size: 0.85rem !important;
    height: 2.1rem !important;
    padding: 0.25rem 0.5rem !important;
    box-shadow: none !important;
    text-align: center !important;
  }
  .m-dash-widget-section .accordion-item .form-control[readonly][disabled] {
    opacity: 1;
    cursor: default;
  }
  /* Action-Buttons: aus absoluter Position raus, als zentrierte Button-Row in EIGENER Zeile (order:2) */
  .m-dash-widget-section .accordion-item .btn_add,
  .m-dash-widget-section .accordion-item .btn_delete,
  .m-dash-widget-section .accordion-item .container-fluid > button {
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    width: 2.2rem !important;
    height: 2.2rem !important;
    min-width: 2.2rem !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    order: 2;
  }
  /* "Spacer" vor dem ersten Button: full-width Zeilenumbruch erzwingen,
     damit alle Buttons in EIGENER Reihe stehen */
  .m-dash-widget-section .accordion-item .container-fluid > button:first-of-type {
    margin-left: 0 !important;
  }
  .m-dash-widget-section .accordion-item .container-fluid::before {
    content: '';
    flex: 0 0 100%;
    height: 0;
    order: 1;
  }
  /* Empty-State */
  .m-dash-widget-section .dash-adv-empty {
    padding: 1rem 0.5rem;
    text-align: center;
    color: var(--white);
    font-size: 0.85rem;
  }
}

/* =============================================================================
   4.3 SUBNAV — Mobile Top-Nav für Unterseiten (m-subnav-*)
   Partner-Variante: Akzent var(--darkRose). Aufbau analog Mail (Doku in
   [[UI Mobile Dashboard#🔴 Subnav-Pattern m-subnav]]).
   ============================================================================= */
@media (max-width: 991px) {
  body.has-subnav .mobile-icons-bar { display: none !important; }
  body.has-subnav .mobile-content-wrapper { padding-top: 0 !important; }

  .m-subnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.75rem;
    background-color: var(--darkblue);
    z-index: 9998;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .m-subnav-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .m-subnav-row + .m-subnav-row {
    margin-top: 0.5rem;
  }
  .m-subnav-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  /* Aktuell ausgewählter Kunde/Werbefläche neben dem Titel (klein, grau, mit
     Mittelpunkt-Trenner) — wie bei jd-mail. */
  .m-subnav-subtitle {
    display: inline;
    margin-left: 0.5rem;
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
  }
  /* Header-Icon-Buttons (Anfragen/Glocke/Profil): Anfragen+Glocke sind <div>,
     Profil ist <button> → bekommt durch die generische `@media(hover:none)
     button{padding:1rem 2rem}`-Regel zu viel Breite (64px statt 40px). Hier
     fix 40×40 ohne Padding erzwingen, damit alle 3 gleich breit sind. */
  .m-subnav-row .btn_add {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .m-subnav-selector,
  .m-subnav-search {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background-color: var(--darkblue);
    border: 1px solid transparent;
    border-radius: var(--border);
    color: var(--white);
    font-size: 0.85rem;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
                rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  }
  .m-subnav-selector {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
  }
  .m-subnav-selector:focus,
  .m-subnav-search:focus {
    outline: none;
    border-color: var(--darkRose);
  }
  .m-subnav-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #f44336;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }
  .m-subnav-filter-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .m-subnav-filter-panel {
    display: none;
    margin-top: 0.6rem;
    background: color-mix(in srgb, var(--darkblue) 92%, transparent);
    border: none;
    border-radius: var(--border);
    padding: 0.75rem;
  }
  .m-subnav-filter-panel.is-open {
    display: block;
  }
  .m-subnav-filter-section {
    margin-bottom: 0.85rem;
  }
  .m-subnav-filter-section:last-of-type {
    margin-bottom: 0;
  }
  .m-subnav-filter-label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 0.4rem;
  }
  .m-subnav-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: center;
  }
  .m-subnav-filter-row .checkbox-wrapper-23 {
    flex-shrink: 0;
  }
  .m-subnav-filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .m-subnav-filter-item span {
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
  }
  /* Status-Icon-Farben in Filter-Items (Pflicht: !important damit globale Vererbung weicht).
     Plattform-unabhängig (Türkis für closed/approved auch bei Partner) — siehe Desktop. */
  .m-status-icon-turquoise { color: #00cbb5 !important; }
  .m-status-icon-orange { color: #ff9800 !important; }
  .m-status-icon-yellow { color: #f5c419 !important; }
  .m-status-icon-favorite { color: #d4b40d !important; }
  .m-subnav-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.85rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .m-subnav-filter-count {
    color: #fff;
    font-size: 0.85rem;
  }
  .m-subnav-filter-reset {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: var(--border);
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .m-subnav-filter-reset:active {
    background: rgba(255, 255, 255, 0.08);
  }
  .m-subnav-search-wrap {
    position: relative;
    flex: 1;
  }
  .m-subnav-search {
    width: 100%;
  }
  .m-subnav-search-reset {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    display: none;
  }
  .m-subnav-search-wrap.has-value .m-subnav-search-reset {
    display: block;
  }
  .m-subnav-content {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
    min-height: 100vh;
  }
  .m-subnav-content.has-row2 {
    padding-top: 7rem;
  }
}


/* =============================================================================
   4.4 USER-SETTINGS MODAL (Mobile-Override)
   Standard-Mobile-Modals sind Fullscreen (mc_a_row), aber #userSettings
   soll wie ein klassisches Modal aussehen (1rem Rand drumrum, abgerundete Ecken).
   Pattern dokumentiert in [[UI Mobile Modals]].
   ============================================================================= */
@media (max-width: 991px) {
  /* Bottom-Nav + Top-Header bei offenem Modal komplett verstecken (sonst opakes Background
     ueberlagert den Backdrop optisch — z:9998/9999 ist auch ohne Override hoeher als manche Modals). */
  body.modal-open .nav-mobile-bottom,
  body.modal-open .dash-mobile-header,
  body.modal-open .m-subnav {
    display: none !important;
  }
  #userSettings.modal,
  #getRequest.modal,
  #getMessage.modal,
  #getTestaddresses.modal,
  #setTestadress.modal,
  #updateTestadress.modal,
  .m-as-modal.modal {
    padding: 0.875rem !important; /* 14px — exakt wie jd-mail (Dialog left/top 14) */
    z-index: 10010 !important;
  }
  /* Werbeflächen-Detail-/Anfragen-Modal (mobil an <body> geklont, Marker m-as-modal):
     .modal-dialog ist position:fixed (Desktop-styles.css) → eigener Stacking-Kontext
     mit z-index:auto, fällt unter das Backdrop (10005). position:relative hält ihn
     im 10010-Kontext des .modal. (Gleiches Pattern wie .lazy-nl-modal .modal-dialog.) */
  .m-as-modal .modal-dialog {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
  /* Lazy-Newsletter-Modals (Vorschau/Versendungen/Testmail/Öffnen/Publisher) werden
     mobil an <body> reparentet (siehe getNewsletter.tpl). Sie bekommen von Bootstrap
     nur z-index:1055 — das globale Backdrop liegt aber auf 10005 und würde sie
     verdecken. Gegenregel wie bei den Header-Modals: über den Backdrop heben. */
  .lazy-nl-modal.modal {
    z-index: 10010 !important;
    padding: 0.875rem !important; /* 14px Rand drumrum — exakt wie Header-Modals/Mail */
  }
  /* ── Lazy-Modals (Vorschau/Öffnen/Testmail/Versendungen) komplett im Mail-Stil ──
     Vorher: Content randlos (volle Viewport-Breite), eckig, Padding 48/20/64px,
     ×-Button fixed + gefüllt 36px. Jetzt 1:1 wie die Header-Modals. */
  .lazy-nl-modal .modal-content,
  .lazy-nl-modal .mc_a_row,
  .m-as-modal .modal-content,
  .m-as-modal .mc_a_row {
    border-radius: var(--border) !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100vh - 1.75rem) !important;
    padding: 1.1rem 0.875rem !important;
    overflow-y: auto !important;
  }
  /* Header bekommt rechts Platz für den ×-Button (40px + Rand ≈ 3.5rem) */
  .lazy-nl-modal .modal-header-wrapper,
  .m-as-modal .modal-header-wrapper {
    padding-right: 3.5rem !important;
    position: static !important;
  }
  /* m-as-modal: der Header-Wrapper ist flex-column + align-items:center → er
     zentriert relativ zur eigenen Breite. Mit nur padding-right (×-Button) waere
     der Raum asymmetrisch und der Titel saesse 28px links der Modal-Mitte.
     Symmetrisches padding-left gleicht das aus → Titel exakt mittig. */
  .m-as-modal .modal-header-wrapper {
    padding-left: 3.5rem !important;
  }
  /* ×-Button: aus fixed/gefüllt → absolut im Modal, transparent + box-shadow,
     var(--border), 40px, hover darkRose — identisch zu den Header-Modals. */
  .lazy-nl-modal .modal-close-mobile,
  .m-as-modal .modal-close-mobile {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    width: 40px !important;
    height: 40px !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: var(--border) !important;
    color: var(--white) !important;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
                rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    font-size: 1rem !important;
    transition: background-color 0.15s ease !important;
  }
  .lazy-nl-modal .modal-close-mobile:hover,
  .m-as-modal .modal-close-mobile:hover {
    background-color: var(--darkRose) !important;
    color: var(--white) !important;
  }
  /* "Öffentlich"-Toggle (get_a) + "Spamtest"-Toggle (sendTest): per Inline-Style
     position:absolute top:2rem right:2rem -> kollidiert mobil mit Titel + ×-Button.
     Aus dem absoluten Fluss lösen, als eigene zentrierte Reihe unter den Header. */
  /* Toggles (Spamtest im Testmail-, Öffentlich im Detail-Modal): wie jd-mail
     absolut OBEN LINKS in der Ecke lassen (statt zentriert), nur von rechts nach
     links verschieben — kollidiert sonst mit dem ×-Button. Label bleibt unter dem
     Toggle (column, wie Mail). */
  .lazy-nl-modal .switch-button.position-absolute {
    right: auto !important;
    left: 1rem !important;
    top: 1.6rem !important;   /* wie jd-mail — etwas mehr Abstand zum Modal-Rand */
    margin: 0 !important;
    z-index: 6 !important;
  }
  /* ── KPI-Kacheln (.box_histroy_count) im Modal-Tab — Layout 1:1 wie jd-mail
     (luftige Karten, gefuellt-transparent, KEIN Border, normaler Case,
     zentriert), aber Partner-Farben/-Akzent bleiben. Inhalte/KPIs unveraendert.
     Jede .row mit KPI-Kacheln wird ein 2-Spalten-Grid. */
  .lazy-nl-modal .row:has(.box_histroy_count),
  .m-as-modal .row:has(.box_histroy_count) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    margin: 0 0 0.75rem 0 !important;
  }
  .lazy-nl-modal .box_histroy_count,
  .m-as-modal .box_histroy_count {
    margin: 0 !important;        /* inline margin-left/right:1rem neutralisieren */
    min-height: 4rem !important;
    min-width: 0 !important;
    padding: 0.75rem !important;
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border: none !important;     /* kein Mail-Tuerkis-Rahmen (var(--darkgreen)) */
    border-radius: var(--border) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  /* Ungerade letzte Kachel (z.B. "Restliches Volumen" in einer 3er-Row, oder
     eine Einzel-Kachel) ueber die volle Breite statt halb mit Leerraum. */
  .lazy-nl-modal .row:has(.box_histroy_count) > .box_histroy_count:last-child:nth-child(odd),
  .m-as-modal .row:has(.box_histroy_count) > .box_histroy_count:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }
  .lazy-nl-modal .box_histroy_count h1,
  .m-as-modal .box_histroy_count h1 {
    font-size: 0.75rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1 !important;
    margin: 0 0 0.25rem 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
  .lazy-nl-modal .box_histroy_count h2,
  .m-as-modal .box_histroy_count h2 {
    font-size: 1.25rem !important;
    color: var(--white) !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
  /* ── User-Tab: Alters-Kacheln durchgehend 2-spaltig ──
     Markup: Gender-Pane (#male…/#female…) > 4× .container-fluid > 1× .row > 3× .col.
     Mit dem Standard-2er-Grid pro .row entstaende ueberall "2 + 1 volle Breite"
     (18-20|20-25, dann 25-30 allein). Stattdessen den Gender-Pane zum durchgehenden
     2-Spalten-Grid machen und .container-fluid + .row per display:contents aufloesen
     -> alle 12 Alters-Kacheln werden direkte Grid-Items, fliessen 2-spaltig.
     (Pattern 2 aus [[UI Mobile Listen & Tabs]].) */
  /* WICHTIG: display:grid NUR auf den AKTIVEN Gender-Pane (.show.active). Ohne
     diese Einschraenkung ueberschreibt display:grid!important das Bootstrap-
     display:none der INAKTIVEN Panes -> der versteckte Maenner-Pane bleibt im
     Layout und schiebt die Frauen-Kacheln um seine Hoehe (~530px) nach unten. */
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="male"].show.active,
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="female"].show.active {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="male"].show.active > .container-fluid,
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="female"].show.active > .container-fluid,
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="male"].show.active > .container-fluid > .row,
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="female"].show.active > .container-fluid > .row {
    display: contents !important;
  }
  /* Alters-Kacheln: Inline-margins (margin-left/right:1rem) neutralisieren, sonst
     sprengen sie das Grid. (Die generische .box_histroy_count-Regel setzt margin:0,
     aber die Inline-Styles haben Vorrang -> hier mit !important nachziehen.) */
  .m-as-modal [id^="user-adspace"] .box_histroy_count {
    margin: 0 !important;
  }
  /* Schrift der Zahlen vereinheitlichen: die globale Desktop-Regel
     `.box_histroy_count h2 { font-size:2rem !important }` (styles.css) macht die
     Alters-Werte mobil zu gross + uneinheitlich gegenueber den oberen KPI-Kacheln.
     Im m-as-modal alle KPI-/Alters-Zahlen auf den getNewsletter-Standard 1.25rem
     zwingen (h2 UND input). Spezifitaet 0,3,0 / 0,4,0 schlaegt die globale 0,2,0.
     (Inline-font-size wurde dafuer aus dem Template entfernt.) */
  .m-as-modal .box_histroy_count h2,
  .m-as-modal .box_histroy_count input,
  .m-as-modal [id^="user-adspace"] .box_histroy_count h2,
  .m-as-modal [id^="user-adspace"] .box_histroy_count input {
    font-size: 1.25rem !important;
  }
  /* Die generische Modal-Regel `.row:has(.box_histroy_count) > .box_histroy_count
     :last-child:nth-child(odd) { grid-column:1/-1 }` (Spezifitaet 0,6,0) macht hier
     jede 3. Alters-Kachel (letztes Kind ihrer 3er-.row) full-width — quer durch das
     durchgehende Gender-Grid. Im aufgeloesten (display:contents) Gender-Grid mit
     HOEHERER Spezifitaet (0,7,0: zusaetzlicher .row-Schritt + :has) neutralisieren,
     damit alle Alters-Kacheln normal 2-spaltig fliessen. */
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="male"].show.active > .container-fluid > .row:has(.box_histroy_count) > .box_histroy_count,
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="female"].show.active > .container-fluid > .row:has(.box_histroy_count) > .box_histroy_count {
    grid-column: auto !important;
  }
  /* Laender-KPI-Row (Volumen|Maenner|Frauen, 3 Kacheln direkt im Laender-Pane):
     ebenfalls durchgehend 2-spaltig statt "2 + 1". .container-fluid + .row aufloesen.
     Nur AKTIVER Laender-Pane (.show.active), sonst nehmen versteckte AT/CH-Panes Platz. */
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="german"].show.active > .container-fluid,
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="austria"].show.active > .container-fluid,
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="schwitz"].show.active > .container-fluid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="german"].show.active > .container-fluid > .row,
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="austria"].show.active > .container-fluid > .row,
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="schwitz"].show.active > .container-fluid > .row {
    display: contents !important;
  }
  /* Frauen (3. = letzte Laender-KPI-Kachel) ueber die volle Breite statt halb leer. */
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="german"].show.active > .container-fluid > .row > .box_histroy_count:last-child:nth-child(odd),
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="austria"].show.active > .container-fluid > .row > .box_histroy_count:last-child:nth-child(odd),
  .m-as-modal [id^="user-adspace"] .tab-pane[id^="schwitz"].show.active > .container-fluid > .row > .box_histroy_count:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  /* ── Kategorien-Tab: Kategorie-Kacheln durchgehend 2-spaltig ──
     Markup: Kategorie-Pane (#categorie-adspace…) > N× .container-fluid > 1× .row > 3× .col.
     Gleiches "2 + 1"-Problem wie beim User-Tab. Pane zum durchgehenden 2-Spalten-Grid,
     .container-fluid + .row per display:contents aufloesen → alle Kacheln fliessen
     fortlaufend 2-spaltig. (Pattern 2 aus [[UI Mobile Listen & Tabs]].) */
  /* NUR der AKTIVE Kategorien-Pane wird Grid (.show.active) — sonst ueberschreibt
     display:grid!important das Bootstrap-display:none des INAKTIVEN Panes, und der
     unsichtbare Kategorien-Pane (~2700px hoch) schiebt die nachfolgenden Tab-Panes
     (Laender/Verlauf) massiv nach unten -> riesiger Leerraum vor dem Inhalt. */
  .m-as-modal [id^="categorie-adspace"].show.active {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .m-as-modal [id^="categorie-adspace"].show.active > .container-fluid,
  .m-as-modal [id^="categorie-adspace"].show.active > .container-fluid > .row {
    display: contents !important;
  }
  .m-as-modal [id^="categorie-adspace"] .box_histroy_count {
    margin: 0 !important;
  }
  /* Die generische "letzte ungerade Kachel = full-width"-Regel (0,6,0) neutralisieren
     (sie macht sonst jede 3. Kachel jeder 3er-.row full-width). Hoehere Spezifitaet. */
  .m-as-modal [id^="categorie-adspace"].show.active > .container-fluid > .row:has(.box_histroy_count) > .box_histroy_count {
    grid-column: auto !important;
  }

  /* ── Länder-Tab: Bundesländer-Kacheln durchgehend 2-spaltig ──
     Markup: Länder-Pane (#lands-adspace…) > Land-Sub-Tabs (DE/AT/CH) > Gesamt/Mann/Frau-
     Sub-Tabs (#lands-total-… / #lands-male-… / #lands-female-…) > N× .container-fluid >
     1× .row > 3× .col. Gleiches "2 + 1"-Problem. Nur den AKTIVEN inneren Pane
     (.show.active) zum durchgehenden 2-Spalten-Grid machen — sonst nehmen die versteckten
     Gesamt/Mann/Frau- bzw. AT/CH-Panes Platz und schieben den Inhalt nach unten. */
  .m-as-modal [id^="lands-total-"].show.active,
  .m-as-modal [id^="lands-male-"].show.active,
  .m-as-modal [id^="lands-female-"].show.active {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .m-as-modal [id^="lands-total-"].show.active > .container-fluid,
  .m-as-modal [id^="lands-male-"].show.active > .container-fluid,
  .m-as-modal [id^="lands-female-"].show.active > .container-fluid,
  .m-as-modal [id^="lands-total-"].show.active > .container-fluid > .row,
  .m-as-modal [id^="lands-male-"].show.active > .container-fluid > .row,
  .m-as-modal [id^="lands-female-"].show.active > .container-fluid > .row {
    display: contents !important;
  }
  .m-as-modal [id^="lands-total-"] .box_histroy_count,
  .m-as-modal [id^="lands-male-"] .box_histroy_count,
  .m-as-modal [id^="lands-female-"] .box_histroy_count {
    margin: 0 !important;
  }
  /* Generische full-width-Regel neutralisieren (jede 3. Kachel sonst full-width). */
  .m-as-modal [id^="lands-total-"].show.active > .container-fluid > .row:has(.box_histroy_count) > .box_histroy_count,
  .m-as-modal [id^="lands-male-"].show.active > .container-fluid > .row:has(.box_histroy_count) > .box_histroy_count,
  .m-as-modal [id^="lands-female-"].show.active > .container-fluid > .row:has(.box_histroy_count) > .box_histroy_count {
    grid-column: auto !important;
  }

  /* ── Verlauf-Tab: 8-Spalten-Kampagnen-Tabelle → Card-Stack ──
     Markup (per AJAX, buildList in getAdSpaces.tpl): Header-Leiste (Gradient-Box mit
     8 col-Labels) + pro Kampagne .accordion-item > .container-fluid > .row > 8× col-N >
     input.form-control[readonly]. Auf 390px viel zu breit. Pattern 1 aus
     [[UI Mobile Listen & Tabs]]: Header ausblenden, jede Zeile als Card stapeln,
     Label→Wert via ::before. Scope: .adspace-verlauf-container im m-as-modal. */
  /* Header-Leiste (die Gradient-Box mit den 8 Spaltentiteln) ausblenden.
     WICHTIG: NICHT die .tab-content (Client-Tab-Wrapper) treffen! Die Header-Box ist
     ein <div> mit Inline-Gradient-Background, ohne .tab-content/.nav-tabs/.accordion-item.
     Erkennungsmerkmal: enthaelt .container-fluid > .row mit col-divs, ist aber selbst
     KEINE .tab-content und liegt direkt vor dem Scroll-Container im Client-Pane. */
  .m-as-modal .adspace-verlauf-container [style*="linear-gradient"]:has(> .container-fluid > .row > [class*="col-"]) {
    display: none !important;
  }
  /* Scroll-Container darf nicht abschneiden + volle Breite. */
  .m-as-modal .adspace-verlauf-container [style*="overflow-y"] {
    padding-right: 0 !important;
    max-height: 60vh !important;
  }
  /* Jede Kampagne → Card. */
  .m-as-modal .adspace-verlauf-container .accordion-item {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border-radius: var(--border) !important;
    padding: 0.6rem 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }
  .m-as-modal .adspace-verlauf-container .accordion-item .container-fluid {
    padding: 0 !important;
  }
  /* Zeile entstapeln: Label→Wert untereinander. */
  .m-as-modal .adspace-verlauf-container .accordion-item .row {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  /* Jede Zelle (col-N): Label links + Wert rechts. */
  .m-as-modal .adspace-verlauf-container .accordion-item .row > [class*="col-"] {
    display: flex !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.3rem 0 !important;
    margin: 0 !important;
    gap: 0.75rem !important;
    text-align: left !important;
  }
  /* Labels via ::before (Reihenfolge = Header-Spalten:
     Name/Paymodel/Start/Ziel-Leads/Öffner/Öffner Unique/Klicker/Klicker Unique). */
  .m-as-modal .adspace-verlauf-container .accordion-item .row > [class*="col-"]:nth-child(1)::before { content: "Name"; }
  .m-as-modal .adspace-verlauf-container .accordion-item .row > [class*="col-"]:nth-child(2)::before { content: "Paymodel"; }
  .m-as-modal .adspace-verlauf-container .accordion-item .row > [class*="col-"]:nth-child(3)::before { content: "Start"; }
  .m-as-modal .adspace-verlauf-container .accordion-item .row > [class*="col-"]:nth-child(4)::before { content: "Ziel/Leads"; }
  .m-as-modal .adspace-verlauf-container .accordion-item .row > [class*="col-"]:nth-child(5)::before { content: "Öffner"; }
  .m-as-modal .adspace-verlauf-container .accordion-item .row > [class*="col-"]:nth-child(6)::before { content: "Öffner Unique"; }
  .m-as-modal .adspace-verlauf-container .accordion-item .row > [class*="col-"]:nth-child(7)::before { content: "Klicker"; }
  .m-as-modal .adspace-verlauf-container .accordion-item .row > [class*="col-"]:nth-child(8)::before { content: "Klicker Unique"; }
  .m-as-modal .adspace-verlauf-container .accordion-item .row > [class*="col-"]::before {
    flex: 0 0 auto !important;
    color: var(--white) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    opacity: 0.75 !important;
  }
  /* Werte (readonly input) rechtsbündig, kein Input-Look. */
  .m-as-modal .adspace-verlauf-container .accordion-item input.form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--white) !important;
    text-align: right !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.35 !important;
  }
  /* Vorschau-Modal: Geräte-Umschalt-Buttons (Desktop/Tablet/Mobile) ausblenden —
     auf Mobil ist die Vorschau ohnehin schmal (iframe width:100% = Modal-Breite).
     Desktop behält die Buttons (nur mobil per Media-Query verborgen). */
  .lazy-nl-modal .preview-device-btns {
    display: none !important;
  }

  /* ── Publisher-Tab (nur jd-partner) ──────────────────────────────────────
     Aufbau: nl-pub-tabs (Publisher-Auswahl) → KPI-Kacheln (Volumen/Start/
     Payout/Kosten/Leads/Öffner/Klicker) → bei Status a/e/f Inputs + Buttons.
     KPI-Kacheln/Buttons greifen bereits über die generischen .lazy-nl-modal-
     und .mc_a_row-Regeln. Hier nur die Publisher-Sonderfälle. */

  /* Publisher-Auswahl-Leiste wie alle anderen Tab-Leisten horizontal scrollbar
     (kann viele Publisher enthalten). nl-pub-tabs ist KEINE .position-absolute-
     Leiste, daher reicht die generische ul.nav-tabs-Regel — hier nur abgesichert. */
  .lazy-nl-modal ul.nl-pub-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    margin-top: 0.5rem !important;
  }

  /* Volumen/Payout-Input im Status a/e/f: width:101% (inline) → 100% kappen,
     sonst minimaler Sub-Pixel-Überstand in der zentrierten Flex-Kachel.
     Schriftgröße leicht reduzieren, damit lange Zahlen (z.B. 1.000.000) reinpassen. */
  .lazy-nl-modal .box_histroy_count input[name="volume"],
  .lazy-nl-modal .box_histroy_count input[name="payout"] {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1.5rem !important;
  }

  /* WM-Test-Toggle: im Desktop absolut (top:50% right:2rem) über die Kachel
     gelegt — auf Mobil schwebt er sonst über Input/Verfügbar-Hinweis. Statisch
     zentriert unter den Kachel-Inhalt setzen (Kachel ist flex-column). */
  .lazy-nl-modal .box_histroy_count .switch-button {
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    margin-top: 0.6rem !important;
  }

  /* Speichern/Annehmen (.btn_main) + Löschen (.btn_deleted) im Publisher-Tab:
     Desktop-Stil hat border-top (var(--middleRose) / var(--darkred)) als
     Trennstrich. Auf Mobil stapeln die Buttons (full width) → zwei Striche
     übereinander wirken störend. Top-Border entfernen. */
  .lazy-nl-modal [id^="publisher"] .btn_main,
  .lazy-nl-modal [id^="publisher"] .btn_deleted,
  .lazy-nl-modal [id^="publisher"] .btn_delete_big,
  .lazy-nl-modal [id^="id-pub-"] .btn_main,
  .lazy-nl-modal [id^="id-pub-"] .btn_deleted,
  .lazy-nl-modal [id^="id-pub-"] .btn_delete_big {
    border-top: none !important;
  }

  /* ── Versendungen-Modal (setSendoutsAll): Provider-Toggles als 2er-Grid ──
     Vorher: 8 Provider (Apple/Freenet/GMX/…) je in eigener Reihe (col block,
     volle Breite) → riesige Höhe. Wie Mail: 2 Provider pro Reihe, kompakt. */
  .lazy-nl-modal [id^="send-form-news"] .row:has(input[name="apple"]),
  .lazy-nl-modal [id^="setSendoutsAll"] .row:has(input[name="apple"]) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem 0.75rem !important;
    margin-bottom: 8px !important; /* einheitliches 8px-Raster */
  }
  .lazy-nl-modal .row:has(input[name="apple"]) > .col {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0.4rem 0.2rem !important;
  }
  /* Provider-Label kompakter (vorher font-size:1.2rem + margin-bottom:1rem) */
  .lazy-nl-modal .row:has(input[name="apple"]) > .col > div:first-child {
    font-size: 0.95rem !important;
    margin-bottom: 0.4rem !important;
  }
  /* Versendungen-Form: einheitliches 8px-Raster zwischen allen Blöcken (vorher
     gemischt 12px rows / 16px sendtime / 8px tab+selects → wirkt ungleichmäßig).
     Alle direkten Form-Kinder + Submit-Button auf 8px. */
  .lazy-nl-modal [id^="send-form-news"] > .row,
  .lazy-nl-modal [id^="send-form-news"] > .sendtime-container,
  .lazy-nl-modal [id^="send-form-news"] > div[id^="localpartContainer"] {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }
  .lazy-nl-modal [id^="send-form-news"] > .btn_main {
    margin-top: 8px !important;
  }
  /* Selects im Quick-Segment/Status-Tabset gleichmäßig 8px (tooltip-container) */
  .lazy-nl-modal [id^="send-form-news"] .tab-content .tooltip-container {
    margin-bottom: 8px !important;
  }
  /* ── Testmail-Modal (sendTestmail): Multi-Selects (V/N, Testadressen) sind
     size=8 → 240px hoch, auch bei nur 1-3 Optionen. Auf moderate Höhe begrenzen
     (scrollbar bei vielen, Mehrfachauswahl bleibt). Abstände einheitlich 8px.
     Das .modal selbst trägt die ID sendTestmail{id} → Selektor OHNE Leerzeichen
     zur .lazy-nl-modal-Kombination, hier direkt per ID-Präfix. */
  [id^="sendTestmail"].modal select[multiple],
  [id^="formTestmailSend"] select[multiple] {
    height: auto !important;
    max-height: 9.5rem !important;   /* ~5 sichtbare Reihen, dann scrollt es */
    min-height: 2.5rem !important;
  }
  /* Abstand trägt die .row (8px). Die innere .tooltip-container bekommt 0, sonst
     addieren sich beide zu 16px. */
  [id^="sendTestmail"].modal .row {
    margin-bottom: 8px !important;
    margin-top: 0 !important;
  }
  [id^="sendTestmail"].modal .row .tooltip-container {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  [id^="sendTestmail"].modal .btn_main {
    margin-top: 8px !important;
  }

  /* =========================================================
     Spamtest-Auswertung mobil — die 3-Spalten-Tabelle (Score | Name |
     Beschreibung mit festen flex-Werten) ist auf schmalen Viewports unlesbar.
     Mobil wird daraus pro Regel eine kompakte Karte: Score-Badge + Name fett
     oben, Beschreibung links darunter. Greift für beide Render-Pfade
     (Testmail-Modal #spamresult-* und Bearbeiten-Tab #spamtest-tab-result-*).
     1:1 von jd-mail übernommen (identische Render-Struktur). */

  /* Score-Legende: umbrechen lassen statt nebeneinander quetschen */
  [id^="spamresult-"] [style*="inline-flex"][style*="gap:1.5rem"],
  [id^="spamtest-tab-result-"] [style*="inline-flex"][style*="gap:1.5rem"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem 1rem !important;
  }
  /* Tabellen-Kopfzeile (Score | Name | Beschreibung) ausblenden */
  [id^="spamresult-"] .request-header,
  [id^="spamtest-tab-result-"] .request-header {
    display: none !important;
  }
  /* Jede Regel-Zeile: aus der Flex-Row eine Karte machen */
  [id^="spamresult-"] .accordion-item > div[style*="display:flex"],
  [id^="spamtest-tab-result-"] .accordion-item > div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.25rem !important;
    padding: 0.85rem 0.9rem !important;
  }
  /* 1. Kind = Score-Badge: kompakt, linksbündig, farbiger Pill.
     Höhere Spezifität (.accordion-item zweimal) nötig, da die Partner-Inline-Styles
     text-align:center !important tragen — sonst gewinnt das Inline-!important. */
  [id^="spamresult-"] .accordion-item.accordion-item > div[style*="display:flex"] > div:nth-child(1),
  [id^="spamtest-tab-result-"] .accordion-item.accordion-item > div[style*="display:flex"] > div:nth-child(1) {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    text-align: left !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    height: auto !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: var(--border) !important;
    padding: 0.1rem 0.5rem !important;
    min-width: 0 !important;
  }
  /* 2. Kind = Name: linksbündig, fett, volle Breite */
  [id^="spamresult-"] .accordion-item.accordion-item > div[style*="display:flex"] > div:nth-child(2),
  [id^="spamtest-tab-result-"] .accordion-item.accordion-item > div[style*="display:flex"] > div:nth-child(2) {
    flex: 1 1 auto !important;
    text-align: left !important;
    font-weight: 600 !important;
    word-break: break-word !important;
  }
  /* 3. Kind = Beschreibung (+ optionaler Fix-Hinweis): linksbündig */
  [id^="spamresult-"] .accordion-item.accordion-item > div[style*="display:flex"] > div:nth-child(3),
  [id^="spamtest-tab-result-"] .accordion-item.accordion-item > div[style*="display:flex"] > div:nth-child(3) {
    flex: 1 1 auto !important;
    text-align: left !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }
  [id^="spamresult-"] .accordion-item.accordion-item > div[style*="display:flex"] > div:nth-child(3) > div,
  [id^="spamtest-tab-result-"] .accordion-item.accordion-item > div[style*="display:flex"] > div:nth-child(3) > div {
    text-align: left !important;
  }

  /* ── Versendungen-Tab (id-so-*): 7-Spalten-Tabelle (Datum|Uhrzeit|Status|
     Öffner|Öffner U.|Klicker|Klicker U.) ist auf 334px unlesbar — Header klebt
     zusammen, Zellen zu schmal. Mobil: Kopfzeile ausblenden, jede Job-Zeile als
     Karte mit Label:Wert-Paaren (2-Spalten-Grid). Labels per ::before, da die
     JS-gerenderten Zellen keine eigenen Labels im DOM haben. */

  /* Kopfzeile (request-header mit den 7 Spalten-Titeln) ausblenden */
  [id^="id-so-"] .request-header {
    display: none !important;
  }

  /* Job-Zeile (.accordion-item) als abgesetzte Karte */
  [id^="id-so-"] [class*="sendouts-result"] .accordion-item {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border-radius: var(--border) !important;
    margin-bottom: 0.5rem !important;
    overflow: hidden !important;
  }

  /* Job-Zeile: aus der Flex-Row eine Karte machen (2-Spalten-Grid) */
  [id^="id-so-"] [class*="sendouts-result"] .accordion-item > div[style*="display: flex"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem 0.75rem !important;
    padding: 0.85rem 0.9rem !important;
    align-items: stretch !important;
  }
  /* Jede Zelle: Wert linksbündig, darüber das Label (::before) */
  [id^="id-so-"] [class*="sendouts-result"] .accordion-item > div[style*="display: flex"] > div {
    flex: none !important;
    text-align: left !important;
    font-size: 0.9rem !important;
    color: var(--white) !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.1rem !important;
    word-break: break-word !important;
  }
  [id^="id-so-"] [class*="sendouts-result"] .accordion-item > div[style*="display: flex"] > div::before {
    font-size: 0.65rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
  }
  /* Spalten-Labels (Reihenfolge der 7 Zellen) */
  [id^="id-so-"] [class*="sendouts-result"] .accordion-item > div[style*="display: flex"] > div:nth-child(1)::before { content: "Datum"; }
  [id^="id-so-"] [class*="sendouts-result"] .accordion-item > div[style*="display: flex"] > div:nth-child(2)::before { content: "Uhrzeit"; }
  /* Status über volle Breite (eigene Zeile) */
  [id^="id-so-"] [class*="sendouts-result"] .accordion-item > div[style*="display: flex"] > div:nth-child(3) {
    grid-column: 1 / -1 !important;
  }
  [id^="id-so-"] [class*="sendouts-result"] .accordion-item > div[style*="display: flex"] > div:nth-child(3)::before { content: "Status"; }
  [id^="id-so-"] [class*="sendouts-result"] .accordion-item > div[style*="display: flex"] > div:nth-child(4)::before { content: "Öffner"; }
  [id^="id-so-"] [class*="sendouts-result"] .accordion-item > div[style*="display: flex"] > div:nth-child(5)::before { content: "Öffner Unique"; }
  [id^="id-so-"] [class*="sendouts-result"] .accordion-item > div[style*="display: flex"] > div:nth-child(6)::before { content: "Klicker"; }
  [id^="id-so-"] [class*="sendouts-result"] .accordion-item > div[style*="display: flex"] > div:nth-child(7)::before { content: "Klicker Unique"; }

  /* Scroll-Container der Versendungs-Liste (inline overflow-y:auto, max-height:36rem):
     Scrollbalken ausblenden — konsistent mit dem restlichen Modal (mc_a_row hat
     scrollbar-width:none). Scroll bleibt funktional bei vielen Versendungen. */
  [id^="id-so-"] > div[style*="overflow-y: auto"] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  [id^="id-so-"] > div[style*="overflow-y: auto"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* ── WM-Kontroller-Tab (wmcontroller-*): Liste aus Publisher-Name + WM-Select.
     Desktop: 2 Spalten (Name-Input | Select) nebeneinander. Mobil zwingt
     .mc_a_row .row diese auf column (gestapelt) + .col auf width:100% → Name-Input
     sah aus wie leerer Kasten, Karte unnötig hoch. Mobil zurück auf EINE Zeile:
     Name links (als Überschrift, kein Input-Look), Dropdown rechts. Kompakte Karte.
     Plus Scrollbalken weg + Button ohne Strich. */

  /* Scroll-Container: Scrollbalken ausblenden (wie Versendungen) */
  [id^="wmcontroller"] form > div[style*="overflow-y: auto"] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-right: 0 !important;
  }
  [id^="wmcontroller"] form > div[style*="overflow-y: auto"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Jede Publisher-Zeile als kompakte Karte — Name | Dropdown nebeneinander.
     .mc_a_row VORANGESTELLT: die generische .mc_a_row .row:not(...) {flex-direction
     :column} / .mc_a_row .col {width:100%} ist sonst spezifischer und gewinnt —
     mit dem mc_a_row-Präfix übertrumpfen wir sie. */
  .modal-content.mc_a_row [id^="wmcontroller"] .row.align-items-stretch {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border-radius: var(--border) !important;
    padding: 0.5rem 0.6rem !important;
    margin: 0 0 0.5rem 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  /* Name-Spalte: 42% Breite (mc_a_row .col width:100% überschreiben). */
  .mc_a_row [id^="wmcontroller"] .row.align-items-stretch > .col:first-child {
    width: 42% !important;
    max-width: 42% !important;
    flex: 0 0 42% !important;
  }
  /* Dropdown-Spalte: Rest */
  .mc_a_row [id^="wmcontroller"] .row.align-items-stretch > .col:last-child {
    width: 58% !important;
    max-width: 58% !important;
    flex: 1 1 58% !important;
  }

  /* Publisher-Name: read-only Input bekommt denselben Kasten-Look wie das Select
     daneben (Hintergrund + Box-Shadow + 40px Höhe), sonst wirkt die linke Seite
     niedriger/schmaler als das Dropdown rechts (transparenter Text vs. Kasten). */
  [id^="wmcontroller"] .row.align-items-stretch .col:first-child input[type="text"] {
    background: #0a0f24 !important;
    box-shadow: rgba(0,0,0,0.4) 0px 2px 4px 0px, rgba(0,0,0,0.3) 0px 7px 13px -3px, rgba(0,0,0,0.2) 0px -3px 0px 0px inset !important;
    border: none !important;
    border-radius: var(--border) !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    height: 40px !important;
    width: 100% !important;
    padding: 8px 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    color: var(--white) !important;
    pointer-events: none !important;
  }

  /* WM-Select volle Breite der rechten Spalte */
  [id^="wmcontroller"] .row.align-items-stretch .col:last-child .wmc-select {
    width: 100% !important;
  }

  /* Speichern-Button: kein Trennstrich (top-border) */
  [id^="wmcontroller"] .btn_main {
    border-top: none !important;
  }

  /* ── Sub-Ids-Tab (subids-*): strukturell identisch zum WM-Kontroller —
     Liste aus Publisher-Name (read-only Input) + Sub-ID-Wert (Input). Gleiche
     Mobil-Behandlung: jede Zeile eine Karte, Name links | Wert rechts, beide
     gleich hohe Kästen. Scrollbalken weg + Button ohne Strich.
     Höhere Spezifität (.mc_a_row + [id^subids] + .tab-pane) nötig, da die Row
     hier nur .row trägt (kein .align-items-stretch wie beim WM-Kontroller). */

  /* Scroll-Container: Scrollbalken ausblenden */
  [id^="subids"] div[style*="overflow-y: auto"] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-right: 0 !important;
  }
  [id^="subids"] div[style*="overflow-y: auto"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Jede Zeile als kompakte Karte — Name | Wert nebeneinander */
  .modal-content.mc_a_row [id^="subids"] .tab-pane .row {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border-radius: var(--border) !important;
    padding: 0.5rem 0.6rem !important;
    margin: 0 0 0.5rem 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .mc_a_row [id^="subids"] .tab-pane .row > .col:first-child {
    width: 42% !important;
    max-width: 42% !important;
    flex: 0 0 42% !important;
  }
  .mc_a_row [id^="subids"] .tab-pane .row > .col:last-child {
    width: 58% !important;
    max-width: 58% !important;
    flex: 1 1 58% !important;
  }

  /* Publisher-Name: read-only Input bekommt Kasten-Look (= Wert-Input rechts) */
  [id^="subids"] .tab-pane .row .col:first-child input[type="text"] {
    background: #0a0f24 !important;
    box-shadow: rgba(0,0,0,0.4) 0px 2px 4px 0px, rgba(0,0,0,0.3) 0px 7px 13px -3px, rgba(0,0,0,0.2) 0px -3px 0px 0px inset !important;
    border: none !important;
    border-radius: var(--border) !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    height: 40px !important;
    width: 100% !important;
    padding: 8px 0.75rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    color: var(--white) !important;
    pointer-events: none !important;
  }

  /* Sub-ID-Wert-Input: volle Breite, margin neutralisieren (inline margin-bottom:1rem) */
  [id^="subids"] .tab-pane .row .col:last-child input[name="sub_value[]"] {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Speichern-Button: kein Trennstrich */
  [id^="subids"] .btn_main {
    border-top: none !important;
  }

  /* ── Report-Tab (reporting-*): strukturell identisch zu Sub-Ids/WM-Kontroller —
     Liste aus WM-Name (read-only Input) + Report-Wert (leads[]-Input). Jede Zeile
     eine Karte, Name links | Wert rechts, beide gleich hohe Kästen. Scrollbalken
     weg + Button ohne Strich.
     Nur die Eingabe-Panes ([id^="id-subids-"] INNERHALB von [id^="reporting"])
     anvisieren — der "Report senden"-Subtab (reportingsend-*) hat nur 1-Spalten-
     Rows (E-Mail/Link) und bleibt unberührt. */

  /* Scroll-Container: Scrollbalken ausblenden */
  [id^="reporting"] div[style*="overflow-y: auto"] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-right: 0 !important;
  }
  [id^="reporting"] div[style*="overflow-y: auto"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Jede Zeile als kompakte Karte — Name | Wert nebeneinander */
  .modal-content.mc_a_row [id^="reporting"] [id^="id-subids-"] .row {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border-radius: var(--border) !important;
    padding: 0.5rem 0.6rem !important;
    margin: 0 0 0.5rem 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .mc_a_row [id^="reporting"] [id^="id-subids-"] .row > .col:first-child {
    width: 42% !important;
    max-width: 42% !important;
    flex: 0 0 42% !important;
  }
  .mc_a_row [id^="reporting"] [id^="id-subids-"] .row > .col:last-child {
    width: 58% !important;
    max-width: 58% !important;
    flex: 1 1 58% !important;
  }

  /* WM-Name: read-only Input bekommt Kasten-Look (= Wert-Input rechts) */
  [id^="reporting"] [id^="id-subids-"] .row .col:first-child input[type="text"] {
    background: #0a0f24 !important;
    box-shadow: rgba(0,0,0,0.4) 0px 2px 4px 0px, rgba(0,0,0,0.3) 0px 7px 13px -3px, rgba(0,0,0,0.2) 0px -3px 0px 0px inset !important;
    border: none !important;
    border-radius: var(--border) !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    height: 40px !important;
    width: 100% !important;
    padding: 8px 0.75rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    color: var(--white) !important;
    pointer-events: none !important;
  }

  /* Report-Wert-Input (leads[]): volle Breite, inline margin-bottom:1rem neutralisieren.
     Wrapper (.tooltip-container / position:relative fuer das %-Icon) auch volle Breite. */
  [id^="reporting"] [id^="id-subids-"] .row .col:last-child input[name="leads[]"],
  [id^="reporting"] [id^="id-subids-"] .row .col:last-child .input-basic {
    width: 100% !important;
    margin: 0 !important;
  }
  [id^="reporting"] [id^="id-subids-"] .row .col:last-child > div[style*="position: relative"],
  [id^="reporting"] [id^="id-subids-"] .row .col:last-child > .tooltip-container {
    width: 100% !important;
  }

  /* Speichern-Button: kein Trennstrich */
  [id^="reporting"] [id^="id-subids-"] .btn_main {
    border-top: none !important;
  }

  /* ── Report-Tab Publisher (id-report-*): 2 Zeilen à 2 Eingabefeldern
     (Öffner|Öffner Unique, Klicker|Klicker Unique). Desktop = 2 Felder pro .row;
     mobil zwingt die generische .col-Regel sie auf volle Breite → 4 Felder
     untereinander, ohne Labels (die stecken im Hover-.custom-tooltip).
     Fix: .row als 2-Spalten-Flex (je ~50%), Label aus dem Tooltip sichtbar
     ueber dem Input anzeigen. */
  .modal-content.mc_a_row [id^="id-report-"] .row:not(.blacklist-header-row):not(.blacklist-entry-content) {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    margin: 0 0 0.5rem 0 !important;
  }
  .modal-content.mc_a_row [id^="id-report-"] .row > .col:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions) {
    width: 50% !important;
    max-width: 50% !important;
    flex: 1 1 50% !important;
    padding: 0 !important;
  }
  /* tooltip-container: Label (custom-tooltip) ueber dem Input statt Hover.
     Reihenfolge im DOM ist Input -> Tooltip, daher column-reverse. */
  [id^="id-report-"] .tooltip-container {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 0.2rem !important;
    width: 100% !important;
  }
  [id^="id-report-"] .tooltip-container .custom-tooltip {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 0 0 0.15rem !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: left !important;
    font-size: 0.62rem !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    white-space: normal !important;
  }
  /* Tooltip-Pfeil (::before/::after) ausblenden — als Label nicht gewollt */
  [id^="id-report-"] .tooltip-container .custom-tooltip::before,
  [id^="id-report-"] .tooltip-container .custom-tooltip::after {
    display: none !important;
  }
  /* Eingabefelder kompakt + volle Zellenbreite */
  [id^="id-report-"] .tooltip-container .input-basic,
  [id^="id-report-"] .tooltip-container input[type="number"] {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    height: 40px !important;
  }
  /* Speichern-Button: kein Trennstrich */
  [id^="id-report-"] .btn_main {
    border-top: none !important;
  }

  /* ── Download-Tab Publisher (download-*): Tracking-Toggle (oben), 5 Select/Input-
     Zeilen (Versandsystem; Header|Header-Option; Footer|Footer-Option; Bilder-URL)
     + 4 Download-Buttons. Desktop: Header/Footer paarweise (2 .col), Buttons 4er-.row.
     Mobil: generische .col-Regel zwingt alles auf volle Breite (alles untereinander)
     + der position-absolute Tracking-Toggle kollidiert mit dem Modal-Header.
     Fix: Toggle in den Flow holen; Header/Footer-Paare nebeneinander; Buttons 2x2. */

  /* Tracking-Toggle oben LINKS im Modal positionieren (auf Titel-Hoehe). Da er im
     Download-Pane liegt, ist er automatisch NUR im Download-Tab sichtbar (andere Panes
     sind display:none). position:absolute relativ zum .modal-content (position:relative).
     Spezifitaet hoch (.modal-content.mc_a_row ... form >) damit es die 768px-Regel
     `.lazy-nl-modal form > .switch-button.position-absolute { position:absolute }` schlaegt.
     Label "Tracking" unter dem Schalter, damit es nicht ueber den Titel laeuft. */
  .modal-content.mc_a_row [id^="download"] form > .switch-button.position-absolute {
    position: absolute !important;
    top: 0.85rem !important;
    left: 0.85rem !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.25rem !important;
    width: auto !important;
    z-index: 5 !important;
  }
  .modal-content.mc_a_row [id^="download"] form > .switch-button.position-absolute > .switch-outer {
    margin-top: 0 !important;
  }
  /* Label "Tracking": lesbar, zentriert unter dem Schalter, nicht auf 0 kollabieren */
  .modal-content.mc_a_row [id^="download"] form > .switch-button.position-absolute > label {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }

  /* Header|Header-Option und Footer|Footer-Option: 2 Selects nebeneinander.
     Versandsystem (1 col) + Bilder-URL (1 col) bleiben volle Breite. */
  .modal-content.mc_a_row [id^="download"] .row:not(.blacklist-header-row):not(.blacklist-entry-content) {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin: 0 0 0.5rem 0 !important;
  }
  .modal-content.mc_a_row [id^="download"] .row > .col:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  /* Selects/Input volle Zellenbreite. Links ausgerichtet + schmales Padding, damit
     in den 2-spaltigen Header/Footer-Option-Selects mehr Text sichtbar ist
     (Schriftgroesse bleibt 16px wegen iOS-Zoom-Schutz). */
  [id^="download"] .row > .col .form-select,
  [id^="download"] .row > .col .input-basic,
  [id^="download"] .row > .col select,
  [id^="download"] .row > .col input[type="text"] {
    width: 100% !important;
    margin: 0 !important;
  }
  [id^="download"] .row > .col select.form-select {
    text-align: left !important;
    padding-left: 0.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Button-Zeile (4 Buttons: Komplettpaket|Werbemittel|Bilder|Blacklist) als 2x2-Grid */
  .modal-content.mc_a_row [id^="download"] .row:has(button[value="dl_all"]) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
  }
  .modal-content.mc_a_row [id^="download"] .row:has(button[value="dl_all"]) > .col:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions) {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
  }
  /* Buttons: echter Button-Look, volle Zellenbreite, kein Trennstrich, kompakt */
  [id^="download"] .row .btn_main,
  [id^="download"] .row .tooltip-container {
    width: 100% !important;
    margin: 0 !important;
    border-top: none !important;
  }
  [id^="download"] .row .btn_main {
    padding: 0.6rem 0.4rem !important;
  }

  /* ── Abrechnung-Tab Publisher (invoice-*): readonly-Infofelder.
     Row1: E-Mail Buchhaltung | Auftragsnummer; Row2: Firma (voll); Row3: PLZ|Straße|Stadt.
     Desktop col-Layout, mobil alles untereinander + Labels nur als Hover-Tooltip (unsichtbar).
     Fix wie Report: 2 Felder pro Zeile (Row3 wrappt 2+1), Labels sichtbar ueber dem Feld. */
  .modal-content.mc_a_row [id^="invoice"] .row:not(.blacklist-header-row):not(.blacklist-entry-content) {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin: 0 0 0.5rem 0 !important;
  }
  .modal-content.mc_a_row [id^="invoice"] .row > .col:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions) {
    flex: 1 1 45% !important;
    min-width: 45% !important;
    max-width: none !important;
    padding: 0 !important;
  }
  /* tooltip-container: Label (custom-tooltip) sichtbar ueber dem Input (column-reverse) */
  [id^="invoice"] .tooltip-container {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 0.2rem !important;
    width: 100% !important;
  }
  [id^="invoice"] .tooltip-container .custom-tooltip {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 0 0 0.15rem !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: left !important;
    font-size: 0.62rem !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    white-space: normal !important;
  }
  [id^="invoice"] .tooltip-container .custom-tooltip::before,
  [id^="invoice"] .tooltip-container .custom-tooltip::after {
    display: none !important;
  }
  [id^="invoice"] .tooltip-container .input-basic,
  [id^="invoice"] .tooltip-container input[type="text"] {
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* ── Auftragsnummern-Tab (orders-*): strukturell identisch zu Sub-Ids/Report —
     Liste aus WM-Name (read-only Input) + Auftragsnummer (order_number[]-Input).
     Jede Zeile eine Karte, Name links | Wert rechts, beide gleich hohe Kästen.
     Scrollbalken weg + Button ohne Strich. */

  /* Scroll-Container: Scrollbalken ausblenden */
  [id^="orders"] form > div[style*="overflow-y: auto"] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-right: 0 !important;
  }
  [id^="orders"] form > div[style*="overflow-y: auto"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Jede Zeile als kompakte Karte — Name | Wert nebeneinander.
     SPEZIFITAET (am Live-DOM verifiziert): Die generische column-Regel ist
     .mc_a_row .row:not(.blacklist-entry-content):not(.blacklist-header-row) → 0,4,0
     (2 Klassen + 2 :not()-Klassen-Argumente, KEIN Element → c=0).
     .mc_a_row [id^="orders"].tab-pane .row waere ebenfalls 0,4,0 → nur Gleichstand,
     gewinnt bloss durch spaetere Quellposition (fragil). Mit .modal-content davor
     (das Element traegt real .modal-content.mc_a_row) sind wir bei 0,5,0 und gewinnen
     REIHENFOLGE-UNABHAENGIG. Gleiche Haertung bei wmcontroller/subids/reporting. */
  .modal-content.mc_a_row [id^="orders"].tab-pane .row {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border-radius: var(--border) !important;
    padding: 0.5rem 0.6rem !important;
    margin: 0 0 0.5rem 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .mc_a_row [id^="orders"].tab-pane .row > .col:first-child {
    width: 42% !important;
    max-width: 42% !important;
    flex: 0 0 42% !important;
  }
  .mc_a_row [id^="orders"].tab-pane .row > .col:last-child {
    width: 58% !important;
    max-width: 58% !important;
    flex: 1 1 58% !important;
  }

  /* WM-Name: read-only Input bekommt Kasten-Look (= Wert-Input rechts) */
  [id^="orders"] .row .col:first-child input[type="text"] {
    background: #0a0f24 !important;
    box-shadow: rgba(0,0,0,0.4) 0px 2px 4px 0px, rgba(0,0,0,0.3) 0px 7px 13px -3px, rgba(0,0,0,0.2) 0px -3px 0px 0px inset !important;
    border: none !important;
    border-radius: var(--border) !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    height: 40px !important;
    width: 100% !important;
    padding: 8px 0.75rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    color: var(--white) !important;
    pointer-events: none !important;
  }

  /* Auftragsnummer-Wert-Input: volle Breite */
  [id^="orders"] .row .col:last-child input[name="order_number[]"] {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Speichern-Button: kein Trennstrich */
  [id^="orders"] .btn_main {
    border-top: none !important;
  }

  /* ── Favoriten-Tab (favorits-*): komplexer als die Name|Wert-Tabs.
     Pro Favorit eine .row.mt-1 mit 5 Spalten: Name(readonly) | Datum-Select |
     Payout(€) | Volumen(Users) | Chevron-Toggle. Generisch werden die 5 Felder
     gestapelt (5 hohe Boxen pro Favorit, unzusammenhaengend).
     Mobil: jede .row.mt-1 = EINE Karte. Name + Chevron oben (volle Breite),
     darunter Datum / Payout / Volumen in EINER Reihe (3-Spalten-Grid) mit Labels.
     Dazu das aufklappbare Sendouts-Panel (9-Spalten-Tabelle) als Karten wie der
     Versendungen-Tab. Spezifitaet von Anfang an gehaertet (.modal-content.mc_a_row
     = 0,5,x > generische 0,4,0), reihenfolge-unabhaengig. */

  /* Scroll-Container: Scrollbalken ausblenden */
  [id^="favorits"] > form > div[style*="overflow-y: auto"] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-right: 0 !important;
  }
  [id^="favorits"] > form > div[style*="overflow-y: auto"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Jede Favoriten-Zeile (.row.mt-1) als Karte: Grid mit 3 Feld-Spalten.
     position:relative fuer den absolut positionierten Chevron oben rechts. */
  .modal-content.mc_a_row [id^="favorits"] .row.mt-1 {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.5rem 0.6rem !important;
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border-radius: var(--border) !important;
    padding: 0.85rem 0.9rem 0.75rem !important;
    margin: 0 0 0.6rem 0 !important;
    position: relative !important;
    align-items: end !important;
  }

  /* Spalte 1 = Name (readonly Input): volle Kartenbreite als Ueberschrift,
     Platz rechts fuer den Chevron freihalten. */
  .modal-content.mc_a_row [id^="favorits"] .row.mt-1 > .col:nth-child(1) {
    grid-column: 1 / -1 !important;
    width: auto !important;
    max-width: none !important;
    padding-right: 2rem !important;
  }
  [id^="favorits"] .row.mt-1 > .col:nth-child(1) input[type="text"] {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    text-align: left !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: var(--white) !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    width: 100% !important;
    pointer-events: none !important;
  }

  /* Feld-Spalten (Datum=2, Payout=3, Volumen=4): je 1 Grid-Spalte, Label per ::before.
     mc_a_row .col {width:100%} ist hier ok — Grid bestimmt die Breite. */
  .modal-content.mc_a_row [id^="favorits"] .row.mt-1 > .col:nth-child(2),
  .modal-content.mc_a_row [id^="favorits"] .row.mt-1 > .col:nth-child(3),
  .modal-content.mc_a_row [id^="favorits"] .row.mt-1 > .col:nth-child(4) {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
  }
  [id^="favorits"] .row.mt-1 > .col:nth-child(2)::before { content: "Datum"; }
  [id^="favorits"] .row.mt-1 > .col:nth-child(3)::before { content: "Payout"; }
  [id^="favorits"] .row.mt-1 > .col:nth-child(4)::before { content: "Volumen"; }
  [id^="favorits"] .row.mt-1 > .col:nth-child(2)::before,
  [id^="favorits"] .row.mt-1 > .col:nth-child(3)::before,
  [id^="favorits"] .row.mt-1 > .col:nth-child(4)::before {
    font-size: 0.62rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    padding-left: 0.1rem !important;
  }

  /* Feld-Inputs/Selects: volle Spaltenbreite, kompakter, Icon-Platz rechts.
     Die inneren Wrapper (div[position:relative] / .tooltip-container) auf 100%. */
  [id^="favorits"] .row.mt-1 > .col:nth-child(2) > div,
  [id^="favorits"] .row.mt-1 > .col:nth-child(3) > div,
  [id^="favorits"] .row.mt-1 > .col:nth-child(4) > .tooltip-container {
    width: 100% !important;
  }
  [id^="favorits"] .row.mt-1 > .col:nth-child(2) .form-select,
  [id^="favorits"] .row.mt-1 > .col:nth-child(3) input[name="payout[]"],
  [id^="favorits"] .row.mt-1 > .col:nth-child(4) input[name="volume[]"] {
    width: 100% !important;
    padding-left: 0.4rem !important;
    padding-right: 1.3rem !important;
    font-size: 0.82rem !important;
  }
  /* Feld-Icons (Kalender/€/Users) naeher an den Rand + kleiner, sonst ueberdecken
     sie bei schmaler Spalte den Wert (Datum "25.06.2026" wurde abgeschnitten). */
  [id^="favorits"] .row.mt-1 > .col:nth-child(2) i,
  [id^="favorits"] .row.mt-1 > .col:nth-child(3) i,
  [id^="favorits"] .row.mt-1 > .col:nth-child(4) i {
    right: 0.45rem !important;
    font-size: 0.8rem !important;
  }

  /* Chevron-Spalte: absolut oben rechts in der Karte statt 5. Grid-Zelle. */
  .modal-content.mc_a_row [id^="favorits"] .row.mt-1 > .col:nth-child(5) {
    position: absolute !important;
    top: 0.7rem !important;
    right: 0.7rem !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Inline-Volume-Fehler unter dem Volumen-Feld (volle Kartenbreite) */
  [id^="favorits"] .row.mt-1 > .col:nth-child(4) .fav-vol-error {
    grid-column: auto !important;
  }

  /* Sendouts-Panel (.fav-sendouts-panel): 9-Spalten-Tabelle wie Versendungen-Tab
     als Karten. Kopfzeile (request-header) ausblenden, Job-Zeilen als 2-Spalten-
     Grid mit ::before-Labels. */
  [id^="favorits"] .fav-sendouts-panel .request-header {
    display: none !important;
  }
  [id^="favorits"] .fav-sendouts-content .accordion-item {
    background: color-mix(in srgb, var(--darkblue) 60%, transparent) !important;
    border-radius: var(--border) !important;
    margin-bottom: 0.4rem !important;
    overflow: hidden !important;
  }
  [id^="favorits"] .fav-sendouts-content .accordion-item > div[style*="display: flex"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem 0.75rem !important;
    padding: 0.75rem 0.85rem !important;
    align-items: stretch !important;
  }
  [id^="favorits"] .fav-sendouts-content .accordion-item > div[style*="display: flex"] > div {
    flex: none !important;
    text-align: left !important;
    font-size: 0.9rem !important;
    color: var(--white) !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.1rem !important;
    word-break: break-word !important;
  }
  [id^="favorits"] .fav-sendouts-content .accordion-item > div[style*="display: flex"] > div::before {
    font-size: 0.62rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
  }
  /* Kampagne über volle Breite (eigene Zeile) */
  [id^="favorits"] .fav-sendouts-content .accordion-item > div[style*="display: flex"] > div:nth-child(1) {
    grid-column: 1 / -1 !important;
  }
  [id^="favorits"] .fav-sendouts-content .accordion-item > div[style*="display: flex"] > div:nth-child(1)::before { content: "Kampagne"; }
  [id^="favorits"] .fav-sendouts-content .accordion-item > div[style*="display: flex"] > div:nth-child(2)::before { content: "Datum"; }
  [id^="favorits"] .fav-sendouts-content .accordion-item > div[style*="display: flex"] > div:nth-child(3)::before { content: "Volumen"; }
  [id^="favorits"] .fav-sendouts-content .accordion-item > div[style*="display: flex"] > div:nth-child(4)::before { content: "Leads"; }
  [id^="favorits"] .fav-sendouts-content .accordion-item > div[style*="display: flex"] > div:nth-child(5)::before { content: "Ziel"; }
  [id^="favorits"] .fav-sendouts-content .accordion-item > div[style*="display: flex"] > div:nth-child(6)::before { content: "Öffner"; }
  [id^="favorits"] .fav-sendouts-content .accordion-item > div[style*="display: flex"] > div:nth-child(7)::before { content: "Öffner Unique"; }
  [id^="favorits"] .fav-sendouts-content .accordion-item > div[style*="display: flex"] > div:nth-child(8)::before { content: "Klicker"; }
  [id^="favorits"] .fav-sendouts-content .accordion-item > div[style*="display: flex"] > div:nth-child(9)::before { content: "Klicker Unique"; }

  /* Anfragen-Button: kein Trennstrich */
  [id^="favorits"] .btn_main {
    border-top: none !important;
  }

  /* ── Gast-Tab (guest-*): Einlade-Formular + Gast-Liste.
     Zeile 1 = E-Mail (1 Spalte, volle Breite — bleibt unveraendert).
     Zeile 2 = Name | Datum | Payout | Volumen (4 Spalten, generisch gestapelt).
     Mobil: Name volle Breite (Eingabefeld), darunter Datum/Payout/Volumen in
     EINER Reihe (3-Spalten-Grid mit Labels) — analog Favoriten-Feldzeile, aber
     OHNE Karten-Box (ist ein Eingabeformular, kein Listen-Item).
     Die 2. Zeile per :has(input[name="name"]) eindeutig treffen (1. Zeile = E-Mail
     bleibt unberuehrt). Spezifitaet gehaertet (.modal-content.mc_a_row). */

  /* Zweite Zeile (Name + Datum/Payout/Volumen) als Grid */
  .modal-content.mc_a_row [id^="guest"] .row.mt-1:has(input[name="name"]) {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.5rem 0.6rem !important;
    align-items: end !important;
  }
  /* Name-Spalte: volle Breite, normales Eingabefeld (kein Karten-Titel) */
  .modal-content.mc_a_row [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(1) {
    grid-column: 1 / -1 !important;
    width: auto !important;
    max-width: none !important;
  }
  /* Feld-Spalten (Datum=2, Payout=3, Volumen=4): je 1 Grid-Spalte mit Label */
  .modal-content.mc_a_row [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(2),
  .modal-content.mc_a_row [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(3),
  .modal-content.mc_a_row [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(4) {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
  }
  [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(2)::before { content: "Datum"; }
  [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(3)::before { content: "Payout"; }
  [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(4)::before { content: "Volumen"; }
  [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(2)::before,
  [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(3)::before,
  [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(4)::before {
    font-size: 0.62rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    padding-left: 0.1rem !important;
  }
  /* Innere Wrapper (div[position:relative]) auf volle Spaltenbreite */
  [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(2) > div,
  [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(3) > div,
  [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(4) > div {
    width: 100% !important;
  }
  [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(2) .form-select,
  [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(3) input[name="payout"],
  [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(4) input[name="volume"] {
    width: 100% !important;
    padding-left: 0.4rem !important;
    padding-right: 1.3rem !important;
    font-size: 0.82rem !important;
  }
  /* Feld-Icons naeher an den Rand + kleiner (sonst Datum abgeschnitten) */
  [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(2) i,
  [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(3) i,
  [id^="guest"] .row.mt-1:has(input[name="name"]) > .col:nth-child(4) i {
    right: 0.45rem !important;
    font-size: 0.8rem !important;
  }

  /* Gast-Liste (request-header 3 Spalten Name|E-Mail|Eingeladen am + request-row):
     Kopfzeile ausblenden, jede Zeile als Karte mit Label:Wert (2-Spalten-Grid). */
  [id^="guest"] .request-header {
    display: none !important;
  }
  [id^="guest"] .request-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.3rem 0.75rem !important;
    background: color-mix(in srgb, var(--darkblue) 60%, transparent) !important;
    border-radius: var(--border) !important;
    padding: 0.7rem 0.85rem !important;
    margin-bottom: 0.4rem !important;
    align-items: stretch !important;
  }
  [id^="guest"] .request-row > div {
    flex: none !important;
    text-align: left !important;
    font-size: 0.9rem !important;
    color: var(--white) !important;
    min-width: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.1rem !important;
  }
  [id^="guest"] .request-row > div::before {
    font-size: 0.62rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
  }
  /* Name über volle Breite (eigene Zeile), E-Mail + Datum darunter */
  [id^="guest"] .request-row > div:nth-child(1) {
    grid-column: 1 / -1 !important;
  }
  [id^="guest"] .request-row > div:nth-child(1)::before { content: "Name"; }
  [id^="guest"] .request-row > div:nth-child(2)::before { content: "E-Mail"; }
  [id^="guest"] .request-row > div:nth-child(2) {
    grid-column: 1 / -1 !important;
  }
  [id^="guest"] .request-row > div:nth-child(3)::before { content: "Eingeladen am"; }
  /* Scroll-Container der Gast-Liste: Scrollbalken ausblenden */
  [id^="guest"] > div[style*="overflow-y: auto"] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  [id^="guest"] > div[style*="overflow-y: auto"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Einladung-senden-Button: kein Trennstrich */
  [id^="guest"] .btn_main {
    border-top: none !important;
  }

  /* ── Testadressen-Tab (testaddresses-*): Tabelle Email|Anrede|Vorname|Nachname
     + Copy-Button. Desktop nutzt col-lg-* mit display:inline-block — mobil bricht
     das chaotisch um (Werte stehen zentriert untereinander). Fix wie Gast-Tab:
     Kopfzeile weg, jede Adress-Zeile als Karte mit Label:Wert-Paaren. */
  [id^="testaddresses"] .request-header {
    display: none !important;
  }
  /* Jede Adresse als Karte */
  [id^="testaddresses"] .accordion-item {
    padding: 0.7rem 0.85rem !important;
    margin-bottom: 0.5rem !important;
  }
  /* Container der 4 Spalten → 2-Spalten-Grid, Copy-Button rechts oben absolut */
  [id^="testaddresses"] .accordion-item > .container-fluid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem 0.75rem !important;
    padding-right: 3rem !important; /* Platz fuer den Copy-Button */
    position: relative !important;
  }
  /* Die col-lg-* Spalten: inline-block aufheben, als Label:Wert-Block */
  [id^="testaddresses"] .accordion-item > .container-fluid > [class*="col-lg-"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.15rem !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Label ueber dem Wert via ::before (Reihenfolge: Email, Anrede, Vorname, Nachname) */
  [id^="testaddresses"] .accordion-item > .container-fluid > [class*="col-lg-"]::before {
    font-size: 0.62rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    padding-left: 0.15rem !important;
  }
  /* Email volle Breite (eigene Zeile oben) — rechts Platz lassen fuer Copy-Button */
  [id^="testaddresses"] .accordion-item > .container-fluid > [class*="col-lg-"]:nth-child(1) {
    grid-column: 1 / -1 !important;
    padding-right: 2.75rem !important;
  }
  [id^="testaddresses"] .accordion-item > .container-fluid > [class*="col-lg-"]:nth-child(1)::before { content: "E-Mail"; }
  [id^="testaddresses"] .accordion-item > .container-fluid > [class*="col-lg-"]:nth-child(2)::before { content: "Anrede"; }
  [id^="testaddresses"] .accordion-item > .container-fluid > [class*="col-lg-"]:nth-child(3)::before { content: "Vorname"; }
  [id^="testaddresses"] .accordion-item > .container-fluid > [class*="col-lg-"]:nth-child(4)::before { content: "Nachname"; }
  /* Die readonly-Inputs: linksbuendig, kompakt, volle Zellenbreite */
  [id^="testaddresses"] .accordion-item .form-control {
    text-align: left !important;
    font-size: 0.9rem !important;
    padding: 0.25rem 0.4rem !important;
    height: auto !important;
    width: 100% !important;
  }
  /* Copy-Button rechts oben in der Karte fixieren (statt mittig schwebend) */
  [id^="testaddresses"] .accordion-item .copy-email-btn {
    top: 0.7rem !important;
    right: 0.7rem !important;
    transform: none !important;
  }
  /* Scroll-Container: Scrollbalken ausblenden */
  [id^="testaddresses"] > div[style*="overflow-y: auto"] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  [id^="testaddresses"] > div[style*="overflow-y: auto"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* ── Status-Tab (closing-*): oben 2 globale Buttons (Alle abschliessen / Alle
     pausieren), darunter pro WM eine Zeile: Name + Button-Paar (Abschliessen /
     Pausieren) bzw. "Abgeschlossen".
     User-Wunsch: die btn_reserve-Buttons haben einen Trennstrich (border-bottom)
     -> entfernen. Dazu: jede WM-Zeile als Karte (Name + Buttons gehoeren zusammen),
     Scrollbalken weg. */

  /* Trennstrich (border-bottom) ALLER btn_reserve im Status-Tab entfernen
     (obere "Alle"-Buttons + die Buttons pro Zeile). */
  [id^="closing"] .btn_reserve {
    border-bottom: none !important;
  }

  /* Jede WM-Zeile als Karte — ALLES in EINER Zeile: Name | Abschliessen | Pausieren.
     Karten-Style wie die anderen Tabs (darkblue 75% transparent, kein Schatten). */
  .modal-content.mc_a_row [id^="closing"] [class^="row closing-row-"],
  .modal-content.mc_a_row [id^="closing"] [class*=" closing-row-"] {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border-radius: var(--border) !important;
    padding: 0.5rem 0.6rem !important;
    margin: 0 0 0.5rem 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  /* Name-Spalte: schmaler, links.
     .modal-content.mc_a_row-Praefix noetig: die generische
     .mc_a_row .col:not()(:not()(:not() ist 0,5,0 (width:100%) und wuerde sonst
     gewinnen. Mit .modal-content + :first-child sind wir bei 0,6,0 > 0,5,0. */
  .modal-content.mc_a_row [id^="closing"] [class*="closing-row-"] > .col:first-child {
    width: 38% !important;
    max-width: 38% !important;
    flex: 0 0 38% !important;
    min-width: 0 !important;
  }
  /* Aktions-Spalte (Buttons): Rest */
  .modal-content.mc_a_row [id^="closing"] [class*="closing-row-"] > .col:last-child {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* Name-Input: als Label (transparent, links, fett) statt Box, umbrechbar */
  [id^="closing"] [class*="closing-row-"] > .col:first-child input[type="text"] {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    color: var(--white) !important;
    padding: 0 0.1rem !important;
    height: auto !important;
    white-space: normal !important;
    pointer-events: none !important;
  }
  /* "Abgeschlossen"-Status (readonly Input in col 2): wie ein Label, nicht als Box */
  [id^="closing"] [class*="closing-row-"] > .col:last-child > input[type="text"][readonly] {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    text-align: left !important;
    color: var(--darkgreen) !important;
    font-weight: 600 !important;
    padding: 0 0.1rem !important;
    height: auto !important;
    pointer-events: none !important;
  }
  /* Button-Paar (Abschliessen/Pausieren) nebeneinander, volle Breite der Aktions-Spalte */
  [id^="closing"] [class*="closing-row-"] > .col:last-child > div[style*="display:flex"],
  [id^="closing"] [class*="closing-row-"] > .col:last-child > div[style*="display: flex"] {
    width: 100% !important;
  }
  /* Buttons im Paar kompakter, damit beide + Name in eine Zeile passen */
  [id^="closing"] [class*="closing-row-"] > .col:last-child .btn_reserve {
    font-size: 0.82rem !important;
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
    white-space: nowrap !important;
  }

  /* Scroll-Container: Scrollbalken ausblenden */
  [id^="closing"] > div[style*="overflow-y: auto"] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-right: 0 !important;
  }
  [id^="closing"] > div[style*="overflow-y: auto"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* ── Verlauf-Tab (history-*): 4-Spalten-Tabelle (Datum | Uhrzeit | Aktion | Wer),
     per AJAX als .accordion-item > div[display:flex] > div gerendert.
     Mobil: Kopfzeile weg, jede Zeile als Karte — Aktion prominent oben (volle
     Breite), darunter Datum / Uhrzeit / Wer als 3-Spalten-Grid mit Labels.
     Aktion per order:-1 nach oben holen (DOM-Reihenfolge ist Datum,Uhrzeit,Aktion,Wer). */

  /* Kopfzeile (request-header) ausblenden */
  [id^="history"] .request-header {
    display: none !important;
  }
  /* Verlauf-Zeile (.accordion-item) als Karte mit 3-Spalten-Grid */
  [id^="history"] [class*="history-result"] .accordion-item {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border-radius: var(--border) !important;
    margin-bottom: 0.5rem !important;
    overflow: hidden !important;
  }
  [id^="history"] [class*="history-result"] .accordion-item > div[style*="display: flex"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.35rem 0.6rem !important;
    padding: 0.75rem 0.85rem !important;
    align-items: stretch !important;
  }
  [id^="history"] [class*="history-result"] .accordion-item > div[style*="display: flex"] > div {
    flex: none !important;
    text-align: left !important;
    font-size: 0.85rem !important;
    color: var(--white) !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.1rem !important;
    word-break: break-word !important;
  }
  [id^="history"] [class*="history-result"] .accordion-item > div[style*="display: flex"] > div::before {
    font-size: 0.62rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
  }
  /* Zell-Reihenfolge im DOM: 1=Datum, 2=Uhrzeit, 3=Aktion, 4=Wer.
     Aktion (3) als Erstes (order:-1) ueber volle Breite, etwas groesser. */
  [id^="history"] [class*="history-result"] .accordion-item > div[style*="display: flex"] > div:nth-child(3) {
    order: -1 !important;
    grid-column: 1 / -1 !important;
    font-size: 0.92rem !important;
    text-align: left !important;
    white-space: pre-line !important;
  }
  [id^="history"] [class*="history-result"] .accordion-item > div[style*="display: flex"] > div:nth-child(3)::before { content: "Aktion"; }
  [id^="history"] [class*="history-result"] .accordion-item > div[style*="display: flex"] > div:nth-child(1)::before { content: "Datum"; }
  [id^="history"] [class*="history-result"] .accordion-item > div[style*="display: flex"] > div:nth-child(2)::before { content: "Uhrzeit"; }
  [id^="history"] [class*="history-result"] .accordion-item > div[style*="display: flex"] > div:nth-child(4)::before { content: "Wer"; }
  /* Wer-Zelle: linksbuendig statt zentriert (Inline-Style text-align:center ueberschreiben) */
  [id^="history"] [class*="history-result"] .accordion-item > div[style*="display: flex"] > div:nth-child(4) {
    text-align: left !important;
  }

  /* Scroll-Container: Scrollbalken ausblenden. KEIN direktes-Kind (>), da der
     overflow-Container in den inneren Untertab-Panes (id-hist-general-* / id-hist-N)
     liegt, nicht direkt unter dem history-Pane. */
  [id^="history"] div[style*="overflow-y: auto"] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  [id^="history"] div[style*="overflow-y: auto"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* ── Einstellungen-Tab (settings-*): zwei Toggles (Freie WM Auswahl / Freie
     Tracking-Nutzung). Desktop: nebeneinander (flex gap:2rem flex-wrap).
     Mobil: untereinander stapeln, jeder Toggle als Karten-Zeile — Label links,
     Schalter rechts (Standard-Mobil-Settings-Look). */

  /* Toggle-Container: stapeln statt nebeneinander */
  .modal-content.mc_a_row [id^="settings"] form > div[style*="display: flex"][style*="flex-wrap"] {
    flex-direction: column !important;
    gap: 0.6rem !important;
    margin-top: 1rem !important;
    align-items: stretch !important;
  }
  /* Jeder Toggle als Karten-Zeile: volle Breite, Label links | Schalter rechts.
     height:auto/min-height:0 noetig: generische .switch-button {height:28px} wuerde
     sonst die Karte stauchen und Label + Toggle ueberlappen lassen. */
  [id^="settings"] form > div[style*="flex-wrap"] > .switch-button {
    width: 100% !important;
    max-width: 460px !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border-radius: var(--border) !important;
    padding: 0.85rem 0.9rem !important;
    margin: 0 !important;
    gap: 0.75rem !important;
  }
  /* Label nach links (im Markup steht .switch-outer vor dem label), nimmt den Platz */
  [id^="settings"] form > div[style*="flex-wrap"] > .switch-button > label {
    order: -1 !important;
    flex: 1 1 auto !important;
    font-size: 0.92rem !important;
    white-space: normal !important;
    margin: 0 !important;
  }
  /* Toggle bleibt rechts, feste Groesse */
  [id^="settings"] form > div[style*="flex-wrap"] > .switch-button > .switch-outer {
    flex: 0 0 auto !important;
  }

  /* Datum/Zeit-Reihe (.sendtime-row): Datum + Zeit + Plus in EINER Reihe halten,
     nicht umbrechen lassen (Plus rutscht sonst darunter). */
  .lazy-nl-modal .sendtime-row {
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
  }
  .lazy-nl-modal .sendtime-row input[type="date"],
  .lazy-nl-modal .sendtime-row input[type="time"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .lazy-nl-modal .sendtime-row .btn_add {
    flex: 0 0 auto !important;
  }
  /* Plus-Buttons (Datum/Zeit + Localpart) sind durch den generischen
     @media(hover:none) button{padding:1rem 2rem}-Reset 64px breit -> wie Mail
     auf 40px quadratisch fixieren, Icon zentriert (inline margin-top/left killen). */
  .lazy-nl-modal .sendtime-row .btn_add,
  .lazy-nl-modal [id^="localpartContainer"] .btn_add,
  .lazy-nl-modal [id^="localpartContainer"] .col > .btn_add {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .lazy-nl-modal .sendtime-row .btn_add i,
  .lazy-nl-modal [id^="localpartContainer"] .btn_add i {
    margin: 0 !important;
  }
  /* Localpart-Reihe: .col volle Breite + KEIN Bootstrap-Padding (sonst ist die
     Reihe 24px schmaler + eingerückt gegenüber der Datum/Zeit-Reihe). Input flex:1.
     Sowohl der localpartContainer als auch die umgebende .row.mt-1 tragen je 12px
     col/row-Padding → beide auf 0. */
  .lazy-nl-modal [id^="localpartContainer"],
  .lazy-nl-modal .row:has([id^="localpartContainer"]) {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .lazy-nl-modal [id^="localpartContainer"] > .col {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    padding: 0 !important;        /* Bootstrap .col padding:0 12px neutralisieren */
    margin: 0 !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }
  .lazy-nl-modal [id^="localpartContainer"] input[name="localpart[]"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  /* Der .modal-dialog dieser Modals ist position:fixed (Desktop-styles.css) → er
     bildet einen eigenen Stacking-Kontext mit z-index:auto und löst sich aus dem
     z-index:10010 des .modal heraus, sodass das Backdrop (10005) ihn doch verdeckt.
     position:relative hält ihn im Stacking-Kontext des .modal (Fullscreen-Layout
     bleibt, da .mc_a_row die Maße trägt). */
  .lazy-nl-modal .modal-dialog {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
  /* Backdrop wenn #userSettings offen ist — Bootstrap setzt die Backdrop ohne Modal-ID-Referenz,
     deshalb global hochziehen wenn das Modal offen ist via body.modal-open.
     Plus: top: 0 zuruecksetzen (Desktop-styles.css setzt top: unset, das sprengt Mobile-fixed-Position). */
  body.modal-open .modal-backdrop {
    z-index: 10005 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.75) !important;
    opacity: 1 !important;
  }
  #userSettings .modal-dialog,
  #userSettings .modal-dialog.modal-hcenter,
  #getRequest .modal-dialog,
  #getRequest .modal-dialog.modal-hcenter,
  #getMessage .modal-dialog,
  #getMessage .modal-dialog.modal-hcenter,
  #getTestaddresses .modal-dialog,
  #getTestaddresses .modal-dialog.modal-hcenter,
  #setTestadress .modal-dialog,
  #setTestadress .modal-dialog.modal-hcenter,
  #updateTestadress .modal-dialog,
  #updateTestadress .modal-dialog.modal-hcenter {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
    transform: none !important;
  }
  /* Content-Padding wie jd-mail (17.5px 14px ≈ 1.1rem 0.875rem) statt
     1.25rem 1rem, damit die Modal-Maße exakt zu Mail passen. */
  #userSettings .modal-content,
  #userSettings .mc_a_row,
  #getRequest .modal-content,
  #getRequest .mc_a_row,
  #getMessage .modal-content,
  #getMessage .mc_a_row,
  #getTestaddresses .modal-content,
  #getTestaddresses .mc_a,
  #setTestadress .modal-content,
  #setTestadress .mc_a,
  #updateTestadress .modal-content,
  #updateTestadress .mc_a {
    border-radius: var(--border) !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100vh - 2rem) !important;
    padding: 1.1rem 0.875rem !important;
  }

  /* ── Schriftgrößen exakt wie jd-mail ──────────────────────────────────────
     Partner hat html font-size 16px, Mail 14px → in den Modals ist Partner
     ~14% größer. Wir gleichen NUR die 3 Header-Modals an die Mail-px-Werte an
     (Plattform-weit bleibt Partner unverändert). Inputs bleiben 16px
     (iOS-Auto-Zoom-Schutz). */
  /* Header (Bootstrap calc-Wert → fest 17.5px wie Mail) */
  #userSettings h2.header-style,
  #getRequest h2.header-style,
  #getMessage h2.header-style {
    font-size: 17.5px !important;
  }
  /* Tab-Leiste (nav-link) → 11.9px */
  #userSettings .nav-tabs .nav-link,
  #getRequest .nav-tabs .nav-link,
  #getMessage .nav-tabs .nav-link {
    font-size: 11.9px !important;
  }
  /* Header-Action-Buttons (Alle gelesen/löschen) → 11.9px */
  #getMessage #btnMarkAllRead,
  #getMessage #btnDeleteAll {
    font-size: 11.9px !important;
  }
  /* Speichern-Button (Profil) → 14px */
  #userSettings #btnSaveProfile,
  #userSettings .btn_main {
    font-size: 14px !important;
  }
  /* form-control-Werte (readonly-Felder, Nachrichtentext, Anfrage-Zellen) → 13.3px.
     Echte editierbare Inputs bleiben 16px (iOS-Zoom). */
  #userSettings div.form-control,
  #getRequest .accordion-item input.form-control,
  #getRequest .accordion-item div.form-control,
  #getMessage .message-item div.form-control,
  #userSettings #userLogList input.form-control,
  #userSettings #userLogList div.form-control {
    font-size: 13.3px !important;
  }
  /* Labels (Profil-Felder, Switch-Labels) → 12.6px */
  #userSettings label {
    font-size: 12.6px !important;
  }
  /* Empty-State / Datum / kleine Texte → 13.3px */
  #getRequest .accordion-item,
  #getMessage .message-item {
    font-size: 13.3px !important;
  }
  /* Header bekommt rechts Platz fuer den Close-Button (40px + 2x 1rem ≈ 4rem).
     Gilt für alle 3 Header-Modals. */
  #userSettings .modal-header-wrapper,
  #getRequest .modal-header-wrapper,
  #getMessage .modal-header-wrapper {
    padding-right: 3.5rem !important;
    position: static !important; /* damit close-button-position relativ zu .modal-content rechnet */
  }
  /* Close-Button (X) im Modal positionieren statt fixed am Viewport
     + Look 1:1 wie btn_add (transparent bg, box-shadow, var(--border), hover: darkRose-bg).
     Gilt für alle 3 Header-Modals (Profil/Anfragen/Benachrichtigungen) — sonst
     behalten getRequest/getMessage den falschen gefüllten Rosa-Rand-Stil. */
  #userSettings .modal-close-mobile,
  #getRequest .modal-close-mobile,
  #getMessage .modal-close-mobile {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    width: 40px !important;
    height: 40px !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: var(--border) !important;
    color: var(--white) !important;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
                rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    font-size: 1rem !important;
    transition: background-color 0.15s ease !important;
  }
  #userSettings .modal-close-mobile:hover,
  #getRequest .modal-close-mobile:hover,
  #getMessage .modal-close-mobile:hover {
    background-color: var(--darkRose) !important;
    color: var(--white) !important;
  }
}

/* ===========================================================================
   MOBILE KAMPAGNEN-LISTE (getNewsletter, type=a) — portiert von jd-mail
   ---------------------------------------------------------------------------
   m-nl-* Card-Items + Accordion + Status-Dropdown. Akzentfarbe Partner-Rosa
   (var(--darkRose) #88545d) statt Mail-Türkis. Breakpoint 992px.
   Doku: Obsidian [[UI Mobile Listen & Tabs]] / [[UI Mobile]].
   =========================================================================== */
@media (max-width: 991px) {

  .m-nl-list {
    display: flex;
    flex-direction: column;
    gap: 8px; /* exakt wie jd-mail (dort 8.4px) — Partner-Root ist 16px, daher fix in px */
    /* gleicht das padding-top von .m-subnav-content.has-row2 aus (Partner hat
       hier 112px), sodass Nav→Item-Abstand = Item→Item-Abstand (8px), exakt
       wie bei jd-mail. -8rem trifft genau den 8px-Gap: die SICHTBARE Header-
       Unterkante (letzte m-subnav-row) liegt bei ~102px, die Header-Box geht
       aber wegen padding-bottom:12px bis 115px — der alte -7.2rem ließ diese
       12px als Überschuss stehen (21px statt 8px Abstand zum ersten Item). */
    margin-top: -8rem;
  }

  .m-nl-item {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent);
    border: none;
    border-radius: var(--border);
    padding: 0.75rem 0.85rem;
    overflow: hidden;
    /* .accordion-item (Trick für Desktop-Handler-Reuse) bringt margin-top:0.5rem
       aus styles.css mit → würde den Item-Abstand auf 18px aufblähen. Neutralisieren,
       damit nur das 8px-listGap zählt (= jd-mail). */
    margin-top: 0 !important;
  }
  /* Erstes Item: 8px Abstand zur fixed Subnav (= Item→Item-Gap), sonst klebt es
     direkt an der Nav-Unterkante. Entspricht jd-mail (Nav→Item = Item→Item). */
  .m-nl-item:first-child {
    margin-top: 8px !important;
  }

  /* ── Kopf ── */
  .m-nl-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
  }
  .m-nl-status {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex: 0 0 auto;
    font-size: 0.95rem;
  }
  .m-nl-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--white);
    font-weight: 500;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-nl-flag-blacklist {
    color: var(--lightred);
    font-size: 1rem;
  }
  .m-nl-paymodel {
    flex: 0 0 auto;
    color: var(--white);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--border);
    padding: 0.15rem 0.45rem;
  }
  .m-nl-chev {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
  }
  .m-nl-item.is-open .m-nl-chev {
    transform: rotate(180deg);
  }

  /* ── Stat-Reihe ── */
  .m-nl-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.4rem;
    margin-top: 0.6rem;
  }
  .m-nl-stat {
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--border);
    padding: 0.5rem 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .m-nl-stat-lbl {
    color: var(--white);
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
  }
  .m-nl-stat-val {
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
  }

  /* ── Detail (aufklappbar) ── */
  .m-nl-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, margin-top 0.28s ease;
    margin-top: 0;
  }
  .m-nl-item.is-open .m-nl-detail {
    max-height: 16rem;
    margin-top: 0.5rem;
  }
  /* Offenes Status-Dropdown braucht mehr Hoehe, sonst schneidet
     max-height:16rem + overflow:hidden es ab (siehe [[UI Mobile Listen & Tabs]] Gotcha 1). */
  .m-nl-item.is-open:has(.nl-actions-dropdown[style*="flex"]) .m-nl-detail {
    max-height: 60rem;
  }
  .m-nl-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.4rem;
  }
  .m-nl-detail-cell {
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--border);
    padding: 0.5rem 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .m-nl-detail-lbl {
    color: var(--white);
    font-size: 0.68rem;
    margin-bottom: 0.25rem;
  }
  .m-nl-detail-val {
    color: var(--white);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
  }

  /* ── Aktions-Reihe ── */
  .m-nl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .m-nl-actions .btn_add,
  .m-nl-actions .btn_delete {
    width: 2.6rem !important;
    height: 2.6rem !important;
    min-width: 2.6rem !important;
    font-size: 1rem;
  }
  /* Status-Bullhorn (.nl-btn-actions) ist im Desktop-styles.css per
     `.nl-btn-trash, .nl-btn-stamp, .nl-btn-flag, .nl-btn-actions { display:none }`
     versteckt (Desktop blendet sie per Hover ein). Mobil in der Aktions-Reihe
     wieder sichtbar machen, sonst fehlt der Status-Button. */
  .m-nl-actions .nl-btn-actions {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .m-nl-actions .m-nl-trash {
    display: inline-flex;
    margin: 0;
  }
  .m-nl-actions .m-nl-btn-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
  }

  /* ── Status-Dropdown (Alle abschließen / pausieren / fortsetzen) ──
     Volle-Breite-Block unter der Aktionsreihe (Desktop: schwebend). Der
     document-weite Handler togglet inline display:none/flex. Deckender
     Hintergrund + Rand, sonst verschmilzt es mit dem getönten Item
     (siehe [[UI Mobile Listen & Tabs]] Gotcha 2). */
  .m-nl-item .nl-actions-dropdown {
    width: 100% !important;
    margin: 0.6rem 0 0 0 !important;
    padding: 0.35rem !important;
    background: var(--darkblue) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--border) !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 16px -4px !important;
    flex-direction: column !important;
  }
  .m-nl-item .nl-actions-dropdown::before {
    content: "Status ändern";
    display: block;
    padding: 0.35rem 0.6rem 0.45rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.25rem;
  }
  .m-nl-item .nl-actions-dropdown-item {
    color: var(--white);
    font-size: 0.9rem;
    padding: 0.7rem 0.7rem;
    border-radius: var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .m-nl-item .nl-actions-dropdown-item:active {
    background-color: rgba(136, 84, 93, 0.25);
  }
  .m-nl-item .nl-actions-dropdown-item.nl-actions-disabled {
    opacity: 0.4;
    pointer-events: none;
  }
}

/* ===========================================================================
   WERBEFLÄCHEN-LISTE MOBIL (getAdSpaces, type a)
   m-as-* Card-Items + Accordion. Struktur 1:1 wie m-nl-* (Kampagnen-Liste),
   Akzent Partner-Rosa (var(--darkRose) #88545d). Breakpoint 992px.
   Doku: Obsidian [[UI Mobile Listen & Tabs]] / [[UI Mobile]].
   =========================================================================== */
@media (max-width: 991px) {

  .m-as-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* gleicht das padding-top von .m-subnav-content.has-row2 aus (Partner 112px),
       sodass Nav→Item-Abstand = Item→Item-Abstand (8px), exakt wie m-nl-list. */
    margin-top: -8rem;
  }

  .m-as-item {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent);
    border: none;
    border-radius: var(--border);
    padding: 0.75rem 0.85rem;
    overflow: hidden;
    /* .accordion-item bringt margin-top:0.5rem aus styles.css mit → neutralisieren,
       damit nur das 8px-listGap zählt (= m-nl-item). */
    margin-top: 0 !important;
  }
  .m-as-item:first-child {
    margin-top: 8px !important;
  }

  /* ── Kopf ── */
  .m-as-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
  }
  .m-as-status {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex: 0 0 auto;
    font-size: 0.95rem;
  }
  /* JD-Mail-Logo (weiße Wortmarke, wie Desktop-Card) statt Icon */
  .m-as-flag-mail {
    height: 0.85rem;
    width: auto;
    display: block;
    flex: 0 0 auto;
  }
  /* Favoriten-Stern: klickbar (eigener Handler), darf NICHT auf-/zuklappen.
     Inaktiv = blass-grau, aktiv = gelb (wie Desktop .active-star). */
  .m-as-flag-fav {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .m-as-flag-fav.active-star {
    color: #f5c419;
  }
  .m-as-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--white);
    font-weight: 500;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-as-chev {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
  }
  .m-as-item.is-open .m-as-chev {
    transform: rotate(180deg);
  }

  /* ── Stat-Reihe ── */
  .m-as-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.4rem;
    margin-top: 0.6rem;
  }
  .m-as-stat {
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--border);
    padding: 0.5rem 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .m-as-stat-lbl {
    color: var(--white);
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
  }
  .m-as-stat-val {
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    min-height: 1rem;
  }
  /* Loader im Stat-Wert mittig + klein halten, bis die Zahl per AJAX kommt */
  .m-as-stat-val .loader,
  .m-as-detail-val .loader {
    margin: 0 auto;
    transform: scale(0.6);
  }

  /* ── Detail (aufklappbar) ── */
  .m-as-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, margin-top 0.28s ease;
    margin-top: 0;
  }
  .m-as-item.is-open .m-as-detail {
    max-height: 16rem;
    margin-top: 0.5rem;
  }
  .m-as-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.4rem;
  }
  .m-as-detail-cell {
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--border);
    padding: 0.5rem 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .m-as-detail-lbl {
    color: var(--white);
    font-size: 0.68rem;
    margin-bottom: 0.25rem;
  }
  .m-as-detail-val {
    color: var(--white);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
  }

  /* ── Aktions-Reihe ── */
  .m-as-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .m-as-actions .btn_add {
    width: 2.6rem !important;
    height: 2.6rem !important;
    min-width: 2.6rem !important;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .m-as-actions .m-as-anfragen-btn {
    height: 2.6rem;
    padding: 0 1.1rem;
  }
}

/* ===========================================================================
   HEADER-MODALS MOBIL: Profil (#userSettings) · Benachrichtigungen (#getMessage)
   · Anfragen (#getRequest). Diese Modals werden mobil an <body> reparentet,
   nutzen mc_a_row. Tabellen-Tabs (Verlauf, Anfragen) → Card-Stack mit
   ::before-Labels (Pattern aus [[UI Mobile Listen & Tabs]]). Akzent Rosa.
   =========================================================================== */
@media (max-width: 991px) {

  /* ─────────────────────────────────────────────────────────────
     PROFIL → Tab VERLAUF (#userLogToolUser): 6-Spalten-Tabelle → Card-Stack
     Header-Leiste (.container-fluid mit Gradient) ausblenden, jede Daten-Zeile
     (.accordion-item > .container-fluid > .row > 6× col-N) als Card stapeln.
     ───────────────────────────────────────────────────────────── */
  /* Header-Leiste (Zeitpunkt/User/Aktion/Details/Endgerät/IP) weg — sie ist
     das direkte container-fluid mit linear-gradient VOR #userLogList. */
  #userSettings #userLogToolUser > .container-fluid:first-of-type {
    display: none !important;
  }
  #userSettings #userLogList {
    max-height: 60vh !important;
    padding-right: 0 !important;
    /* Scrollbalken ausblenden (Scroll-Funktion bleibt) */
    scrollbar-width: none !important;          /* Firefox */
    -ms-overflow-style: none !important;       /* alte Edge/IE */
  }
  #userSettings #userLogList::-webkit-scrollbar {
    display: none !important;                   /* Chrome/Safari */
    width: 0 !important;
    height: 0 !important;
  }
  /* Jeder Log-Eintrag → Card */
  #userSettings #userLogList .accordion-item {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border-radius: var(--border) !important;
    padding: 0.4rem 0.6rem !important;
    margin-bottom: 0.5rem !important;
  }
  #userSettings #userLogList .accordion-item .container-fluid { padding: 0 !important; }
  /* Zeile entstapeln: Label→Wert untereinander */
  #userSettings #userLogList .accordion-item .row {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
  }
  /* Jede Zelle (col-N): Label links + Wert rechts */
  #userSettings #userLogList .accordion-item .row > [class*="col-"] {
    display: flex !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.3rem 0 !important;
    gap: 0.75rem !important;
  }
  /* Labels via ::before (Reihenfolge = ausgeblendete Header-Spalten) */
  #userSettings #userLogList .accordion-item .row > [class*="col-"]:nth-child(1)::before { content: "Zeitpunkt"; }
  #userSettings #userLogList .accordion-item .row > [class*="col-"]:nth-child(2)::before { content: "User"; }
  #userSettings #userLogList .accordion-item .row > [class*="col-"]:nth-child(3)::before { content: "Aktion"; }
  #userSettings #userLogList .accordion-item .row > [class*="col-"]:nth-child(4)::before { content: "Details"; }
  #userSettings #userLogList .accordion-item .row > [class*="col-"]:nth-child(5)::before { content: "Endgerät"; }
  #userSettings #userLogList .accordion-item .row > [class*="col-"]:nth-child(6)::before { content: "IP"; }
  #userSettings #userLogList .accordion-item .row > [class*="col-"]::before {
    flex: 0 0 auto !important;
    color: var(--white) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    opacity: 1 !important;
  }
  /* Werte (input.form-control + div.form-control) rechtsbündig, kein Input-Look */
  #userSettings #userLogList .accordion-item input.form-control,
  #userSettings #userLogList .accordion-item div.form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--white) !important;
    text-align: right !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 0.85rem !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* ─────────────────────────────────────────────────────────────
     PROFIL → Tab EINSTELLUNGEN (#notificationSettingsToolUser):
     Switches stehen mit gap:3rem nowrap → Overflow. Mobil als zentrierte
     SPALTE untereinander (Switch + Label nebeneinander pro Zeile), touch-fair.
     ───────────────────────────────────────────────────────────── */
  #userSettings #notificationSettingsToolUser .row {
    margin-top: 1rem !important;
  }
  #userSettings #notificationSettingsToolUser .col.d-flex {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
  }
  /* Jeder Switch: Label links, Toggle rechts — als Zeile in einer Card.
     Das Original .switch-button ist flex-direction:column mit height:28px;
     der .switch-outer nutzt height:100% (=28px). Beim Umbau auf row-reverse
     kollabiert die 100%-Höhe → Toggle zerschossen. Darum: switch-outer feste
     Maße geben (58×28px) und die Original-Switch-Mechanik unangetastet lassen. */
  #userSettings #notificationSettingsToolUser .switch-button {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border-radius: var(--border) !important;
    padding: 0.6rem 0.85rem !important;
    width: 100% !important;
    height: auto !important;          /* Original 28px aufheben, Card-Höhe via padding */
    margin: 0 !important;
  }
  /* Toggle-Body: feste Maße, sonst kollabiert er im row-Layout */
  #userSettings #notificationSettingsToolUser .switch-button .switch-outer {
    height: 28px !important;
    width: 58px !important;
    flex: 0 0 58px !important;
  }
  #userSettings #notificationSettingsToolUser .switch-button label {
    margin: 0 !important;
    color: var(--white) !important;
    font-size: 0.95rem !important;
    text-align: left !important;
    flex: 1 1 auto !important;
  }

  /* ─────────────────────────────────────────────────────────────
     BENACHRICHTIGUNGEN (#getMessage): Action-Buttons + Nachrichten-Cards
     ───────────────────────────────────────────────────────────── */
  /* Action-Buttons (Alle gelesen / Alle löschen) aus position-absolute lösen:
     sie überlappen sonst Titel + ×. Als normale Reihe UNTER den Header. */
  #getMessage .position-absolute[style*="top: 0.5rem"][style*="right: 1rem"] {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: center !important;
    margin: 0.25rem 0 0.75rem !important;
  }
  #getMessage #messages_container {
    max-height: 62vh !important;
    /* Scrollbalken ausblenden (Scroll-Funktion bleibt) — wie #userLogList */
    scrollbar-width: none !important;          /* Firefox */
    -ms-overflow-style: none !important;       /* alte Edge/IE */
  }
  #getMessage #messages_container::-webkit-scrollbar {
    display: none !important;                   /* Chrome/Safari */
    width: 0 !important;
    height: 0 !important;
  }
  /* Nachrichten-Card — Pattern wie jd-mail: Titel/Text/Datum gestapelt via
     `order`, Buttons (Auge/Trash) STATISCH im Flow als zentrierte Reihe unten
     (nicht absolut oben rechts → kein Text/Button-Overlap mehr).
     Struktur: .message-item > .container-fluid > [col-lg-3(Titel), col-lg-6(Text),
     col-lg-2(Datum), button(Auge), button(Trash), unread-dot]. */
  #getMessage .message-item {
    width: 100% !important;
    box-sizing: border-box !important;
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border-radius: var(--border) !important;
    padding: 0.85rem !important;
    margin-bottom: 0.5rem !important;
    min-height: 0 !important;
  }
  #getMessage .message-item > .container-fluid {
    display: flex !important;
    flex-flow: wrap !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    position: static !important;
  }
  /* Alle Daten-Spalten volle Breite, Inner-.px-1-Padding killen */
  #getMessage .message-item > .container-fluid > [class*="col-lg"] {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  #getMessage .message-item > .container-fluid > [class*="col-lg"] .px-1 {
    padding: 0 !important;
  }
  /* Reihenfolge: Titel → Text → Datum → Buttons; unread-dot ganz vorn (absolut) */
  #getMessage .message-item > .container-fluid > .col-lg-3 {
    order: 1 !important;
    margin-bottom: 0.4rem !important;
    padding-left: 1.1rem !important; /* Platz für unread-dot */
    position: relative !important;
  }
  #getMessage .message-item > .container-fluid > .col-lg-6 { order: 2 !important; }
  #getMessage .message-item > .container-fluid > .col-lg-2 {
    order: 3 !important;
    margin-top: 0.5rem !important;
    padding-left: 1.1rem !important;
  }
  /* Werte (Titel/Text/Datum-Inputs + form-control): transparent, links, kein Input-Look */
  #getMessage .message-item > .container-fluid > [class*="col-lg"] input,
  #getMessage .message-item > .container-fluid > [class*="col-lg"] .form-control,
  #getMessage .message-item > .container-fluid > [class*="col-lg"] > div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--white) !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  /* Datum gedämpft + kleiner */
  #getMessage .message-item > .container-fluid > .col-lg-2 > div {
    opacity: 0.7 !important;
    font-size: 0.8rem !important;
  }
  /* unread-dot oben links (vor Titel) */
  #getMessage .message-item > .container-fluid > .unread-dot {
    position: absolute !important;
    top: 1.15rem !important;
    left: 0.85rem !important;
    transform: none !important;
    order: 0 !important;
  }
  /* Auge + Trash: STATISCH im Flow, zentrierte Reihe unten (order:4) */
  #getMessage .message-item > .container-fluid > .btn_add,
  #getMessage .message-item > .container-fluid > .btn_delete,
  #getMessage .message-item > .container-fluid > .btn-message-detail {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    order: 4 !important;
    flex: 0 0 auto !important;
    width: 2.6rem !important;
    height: 2.6rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0.7rem 0.3rem 0 !important;
  }

  /* ─────────────────────────────────────────────────────────────
     ANFRAGEN (#getRequest): 8-Spalten-Tabelle → Card-Stack (type a + p)
     Header-Leiste (.request-header) weg, jede .accordion-item-Zeile als Card.
     Struktur: .accordion-item > div[flex] > 8× div[flex:N] > input + 3 abs Buttons.
     ───────────────────────────────────────────────────────────── */
  #getRequest .request-header {
    display: none !important;
  }
  #getRequest .request-list-container,
  #getRequest #requestsLiveWrapper {
    max-height: 64vh !important;
    /* Scrollbalken ausblenden (Scroll-Funktion bleibt) — wie #userLogList / #messages_container */
    scrollbar-width: none !important;          /* Firefox */
    -ms-overflow-style: none !important;       /* alte Edge/IE */
  }
  #getRequest .request-list-container::-webkit-scrollbar,
  #getRequest #requestsLiveWrapper::-webkit-scrollbar {
    display: none !important;                   /* Chrome/Safari */
    width: 0 !important;
    height: 0 !important;
  }
  #getRequest .accordion-item {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
    border-radius: var(--border) !important;
    margin-bottom: 0.5rem !important;
    padding: 0.6rem 0.75rem !important;
  }
  /* Flex-Wrapper der Zeile: row wrap (wie Mail) — Daten-Zeilen volle Breite,
     die 3 Buttons brechen in eine gemeinsame zentrierte Reihe unten um. */
  #getRequest .accordion-item > div[style*="display: flex"] {
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: center !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Jede Spalte: Label links + Wert rechts, volle Breite (eigene Zeile) */
  #getRequest .accordion-item > div[style*="display: flex"] > div {
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.3rem 0.4rem !important;
    gap: 0.75rem !important;
  }
  /* Labels via ::before — type=a Reihenfolge: Kunde/Kampagne/Werbefläche/Start/Paymodel/Payout/Volume/Erhalten */
  #getRequest .accordion-item > div[style*="display: flex"] > div:nth-child(1)::before { content: "Kunde"; }
  #getRequest .accordion-item > div[style*="display: flex"] > div:nth-child(2)::before { content: "Kampagne"; }
  #getRequest .accordion-item > div[style*="display: flex"] > div:nth-child(3)::before { content: "Werbefläche"; }
  #getRequest .accordion-item > div[style*="display: flex"] > div:nth-child(4)::before { content: "Start"; }
  #getRequest .accordion-item > div[style*="display: flex"] > div:nth-child(5)::before { content: "Paymodel"; }
  #getRequest .accordion-item > div[style*="display: flex"] > div:nth-child(6)::before { content: "Payout"; }
  #getRequest .accordion-item > div[style*="display: flex"] > div:nth-child(7)::before { content: "Volumen"; }
  #getRequest .accordion-item > div[style*="display: flex"] > div:nth-child(8)::before { content: "Erhalten"; }
  #getRequest .accordion-item > div[style*="display: flex"] > div::before {
    flex: 0 0 auto !important;
    color: var(--white) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    opacity: 1 !important;
  }
  /* Werte rechtsbündig, kein Input-Look, voll weiß (wie Mail) */
  #getRequest .accordion-item input.form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--white) !important;
    text-align: right !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 0.85rem !important;
    opacity: 1 !important;
  }
  /* Action-Buttons (Folder/Check/X): aus absolute → statisch, nebeneinander in
     einer zentrierten Reihe unten (wie Mail). Der row-wrap-Wrapper ist
     justify-content:center, die letzte Daten-Zeile (flex:100%) erzwingt den
     Umbruch davor. */
  #getRequest .accordion-item > div[style*="display: flex"] > button.position-absolute {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: 2.6rem !important;
    height: 2.6rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0.7rem 0.3rem 0 0.3rem !important;
  }
  /* Buttons bekommen KEIN ::before-Label */
  #getRequest .accordion-item > div[style*="display: flex"] > button.position-absolute::before {
    content: none !important;
  }

  /* =========================================================
     DETAILS-TAB EDITOR (#getNewsletterData) — am Mail-Style orientiert
     Der WM-Editor nutzt ein .editor-with-panel Flex-ROW-Layout, das den
     TinyMCE-Editor und ein Side-Panel ZWINGEND nebeneinander legt + feste
     Inline-Groessen (height:70vh, width:90%). Auf Mobil viel zu eng.
     Hier: untereinander stapeln, Editor volle Breite, Buttons als Leiste,
     Upload-Buttons aus der absoluten Lage loesen. 1:1 wie jd-mail.
     ========================================================= */

  /* (1) Editor + Side-Panel untereinander statt nebeneinander */
  [id^="getNewsletterData"] .editor-with-panel {
    flex-direction: column !important;
    width: 100% !important;
  }
  /* Editor-Spalte (1. Kind) volle Breite */
  [id^="getNewsletterData"] .editor-with-panel > div:first-child {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* (2) TinyMCE: volle Breite, moderate feste Hoehe statt 90%/70vh */
  [id^="getNewsletterData"] .editor-with-panel .tox-tinymce {
    width: 100% !important;
    height: 45vh !important;
    min-height: 18rem !important;
    margin: 0.75rem 0 0 !important;
  }
  /* auch das rohe textarea-Fallback */
  [id^="getNewsletterData"] .editor-with-panel textarea.tiny-target {
    width: 100% !important;
  }

  /* (3) Side-Panel-Buttons: horizontale Leiste statt vertikal, zentriert */
  [id^="getNewsletterData"] .side-panel-buttons {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-self: stretch !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
  }
  /* Die einzelnen Side-Panel-Buttons (Tag/Magic/Creative/Format) quadratisch
     40x40 — auf echten Touch-Geraeten paddet die globale @media(hover:none)
     button{padding:1rem 2rem}-Regel sie sonst auf 64px (rechteckig). Icon-
     Inline-margin-Hacks neutralisieren. Direkt auf die toggle-Klassen zielen
     (NICHT an .btn_add koppeln): im aktiven Zustand wechselt die Klasse von
     btn_add zu btn_add_ (Unterstrich) -> sonst greift die Groesse nicht mehr
     und der aktive Button wird breit/rechteckig (zerschiesst das Layout). */
  [id^="getNewsletterData"] .side-panel-buttons .btn_add,
  [id^="getNewsletterData"] .side-panel-buttons .btn_add_,
  [id^="getNewsletterData"] .toggle-param-btn,
  [id^="getNewsletterData"] .toggle-dynamic-btn,
  [id^="getNewsletterData"] .toggle-creative-btn,
  [id^="getNewsletterData"] .format-html-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  [id^="getNewsletterData"] .side-panel-buttons .btn_add > i,
  [id^="getNewsletterData"] .side-panel-buttons .btn_add_ > i,
  [id^="getNewsletterData"] .toggle-param-btn > i,
  [id^="getNewsletterData"] .toggle-dynamic-btn > i,
  [id^="getNewsletterData"] .toggle-creative-btn > i,
  [id^="getNewsletterData"] .format-html-btn > i {
    margin: 0 !important;
  }

  /* Geraete-Umschalt-Buttons (Desktop/Tablet/Mobile) im Editor ausblenden —
     mobil ist immer Mobile (wie im Vorschau-Modal). Der Container hat keine
     Klasse -> per :has() auf die direkten title-Buttons treffen. */
  [id^="getNewsletterData"] div:has(> .btn_add[title="Desktop"]):has(> .btn_add[title="Mobile"]) {
    display: none !important;
  }

  /* (4) Side-Panel-Content (ausklappbare Parameter/Dynamik-Liste): wenn
     aufgeklappt, volle Breite statt fixer 320px (sonst Overflow) */
  [id^="getNewsletterData"] .side-panel-content {
    max-width: 100% !important;
  }
  [id^="getNewsletterData"] .side-panel-content[style*="width: 320"],
  [id^="getNewsletterData"] .side-panel-content:not([style*="width: 0"]) {
    width: 100% !important;
  }
  /* Innerer Wrapper hat inline width:320px -> auf volle Breite, damit die
     dynamischen Inhalt-Items (V/N mit Inhalt/Standard-Tabs + Textarea) die ganze
     Breite nutzen statt nur ~halb. */
  [id^="getNewsletterData"] .side-panel-content > div {
    width: 100% !important;
  }
  /* copy-wrapper (Parameter-/Dynamik-/Werbemittel-Items) je volle Breite,
     1 pro Zeile. */
  [id^="getNewsletterData"] .side-panel-content .copy-wrapper {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  /* Werbemittel-Panel-Liste hat inline max-width:288px -> aufheben, damit die
     Werbemittel-Items (copy-wrapper + Preview-iframe) die volle Breite nutzen
     (wie bei den dynamischen Inhalten). */
  [id^="getNewsletterData"] .creative-panel-list {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* (5) Upload-Buttons (HTML/Bilder hochladen) sitzen absolut ueber der
     Sub-Tab-Leiste und ueberlappen die Tabs. Mobil: statisch unter die Tabs,
     volle Breite, zentriert. */
  [id^="getNewsletterData"] .nav-item.position-absolute:has([class*="upload"]),
  [id^="getNewsletterData"] .nav-tabs ~ .nav-item.position-absolute,
  [id^="getNewsletterData"] .nav-item.position-absolute {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin: 0.5rem 0 !important;
  }

  /* (6) Plus/Minus-Buttons zwischen den Absender/Betreff/Preheader-Bloecken:
     quadratisch 40x40 (sonst durch @media(hover:none) 64px rechteckig auf
     echten Touch-Geraeten), Icon zentriert, symmetrischer Abstand nach unten.
     Scope .details-scope trifft NUR die Block-Verwaltungs-Buttons. */
  [id^="getNewsletterData"] .details-scope .btn_add,
  [id^="getNewsletterData"] .details-scope .btn_delete_,
  [id^="getNewsletterData"] .details-scope .btn_delete {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0.75rem !important;
  }
  [id^="getNewsletterData"] .details-scope .btn_add > i,
  [id^="getNewsletterData"] .details-scope .btn_delete_ > i,
  [id^="getNewsletterData"] .details-scope .btn_delete > i {
    margin: 0 !important;
  }
}

/* ===========================================================================
   MOBILE PAGINATION (m-pagination) — generisch, eingefuehrt 2026-06-22
   Seiten-Navigation (prev/Zahlen/next) + Eintraege-pro-Seite-Dropdown, unter
   der Liste. Genutzt von getNewsletter (m-nl-list). Akzent Partner-Rosa
   (var(--darkRose) #88545d). 1:1 aus jd-mail portiert (dort Tuerkis).
   Werte/Handler ueber funcToolbox=page/number.
   =========================================================================== */
@media (max-width: 991px) {

  .m-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin: 0.9rem 0 0.4rem 0;
  }

  /* Seiten-Navigation: prev | 1 … 4 5 6 … 12 | next */
  .m-pagination-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
  }
  .m-pagination-btn {
    background: transparent;
    border: 1px solid rgba(136, 84, 93, 0.4);
    color: var(--white);
    border-radius: var(--border);
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .m-pagination-btn:active {
    background: rgba(136, 84, 93, 0.2);
  }
  /* Aktive Seite hervorgehoben */
  .m-pagination-btn.m-pagination-active {
    background: rgba(136, 84, 93, 0.2);
    border-color: var(--darkRose);
    font-weight: 700;
  }
  /* Deaktiviert (prev auf Seite 1 / next auf letzter Seite) */
  .m-pagination-btn.m-pagination-disabled {
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.25);
    pointer-events: none;
    cursor: default;
  }
  .m-pagination-ellipsis {
    color: rgba(255, 255, 255, 0.4);
    padding: 0 0.15rem;
    align-self: center;
  }

  /* Eintraege-pro-Seite-Dropdown */
  .m-pagination-limit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
  }
  .m-pagination-limit select {
    background: color-mix(in srgb, var(--darkblue) 75%, transparent);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--border);
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
  }
}