: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;

  --white: #fff !important;

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

  --main_mail: #00cbb5 !important;
  --main_leads: #366fcc !important;

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

  --test: #1f2336 !important;
  /* --lightBlue: #0e2648 !important; */
  --red: #fc1900 !important;
  --lightred: #eb5543 !important;
  --darkred: #781b10 !important;
  --darkyellow: rgb(176, 152, 17) !important;
  --grey: #2f3742 !important;

  --main: #00cbb5 !important;
  --darkgreen: #004f51 !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;
}

.row_second{
  background-color: var(--darkblue);
  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;
  margin-top: 0.5rem;
  height: 4rem;
  margin-left: 0.5rem;
  margin-right: 1rem;
}

/* Notification Container */
#notification-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2147483647;
}

/* Notification Styles */
.notification {
    padding: 15px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-bottom: 10px;
    min-width: 300px;
    max-width: 400px;
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s ease;
}

.notification-content {
    display: flex;
    align-items: center;
    justify-content: center; /* Hinzufügen */
    gap: 10px;
}

.notification-success {
    background: color-mix(in srgb, var(--darkblue) 85%, transparent);
  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;
  border-radius: var(--border) !important;
  color: var(--white) !important;
}

.notification-error {
    background: color-mix(in srgb, var(--darkblue) 85%, transparent);
    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;
    border-radius: var(--border) !important;
    color: var(--white) !important;
}

.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}
.tab-pane.fade {
  transition: opacity .15s linear;
}
.tab-pane.fade:not(.show) {
  opacity: 0;
}
.tab-pane.fade.show {
  opacity: 1;
}


.star-toggle {
      color: #ccc;
      /* grau standard */
      transition: color 0.2s;
  }

  .star-toggle.active-star {
      color: gold;
      /* gelb, wenn aktiv */
  }


.message-box{
  background-color: var(--darkblue);
  border: solid 1px var(--darkRose);
  overflow-y: hidden;
  overflow-x: hidden;
  position: relative;
}

.error-message {
    color: var(--lightred);
    font-size: 0.9em;
    margin-top: 0.5rem;
    display: none;
}

.error-visible {
    display: block;
}

.tox .tox-edit-area iframe {
    background-color: var(--darkblue) !important;  /* dein Blau */
}

.tox .tox-toolbar, 
.tox .tox-toolbar__primary, 
.tox .tox-editor-header {
    background-color: var(--darkblue) !important;
    border: none !important;
}

.tox .tox-statusbar {
    background-color: var(--darkblue) !important;
    border-top: none !important;
}

.tox .tox-editor-container {
    background-color: var(--darkblue) !important;
    border: none !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none; /* Original-Icon ausblenden */
    width: 2rem;
    height: 2rem;
}

.carousel-control-prev-icon::after {
    content: '‹'; /* oder '❮' für schöneren Pfeil */
    font-size: 4rem;
    color:var(--main_leads); /* Wunschfarbe hier */
    display: inline-block;
}

.carousel-control-next-icon::after {
    content: '‹'; /* oder '❮' für schöneren Pfeil */
    font-size: 4rem;
    color:var(--main_mail); /* Wunschfarbe hier */
    display: inline-block;
}

.carousel-control-next-icon::after {
    content: '›'; /* oder '❯' */
}

.carousel-indicators button {
  background-color: var(--white);         /* Standardfarbe (z. B. grau) */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 4px;
  border: none;
  opacity: 1; /* Bootstrap setzt sonst 0.5 */
}

.carousel-indicators button.active {
  background-color: var(--darkRose);      /* Aktive Farbe (z. B. rot) */
}

.offcanvas-backdrop {
  display: none; /* Versteckt das Backdrop */
}

.offcanvas {
  transition: transform 0.4s ease-in-out;
  will-change: transform;
  visibility: hidden; /* Unsichtbar, wenn nicht gezeigt */
}

.offcanvas.offcanvas-start {
  transform: translateX(-100%); /* Linke Offcanvas, ausgeblendet */
}

.offcanvas.offcanvas-end {
  transform: translateX(100%); /* Rechte Offcanvas, ausgeblendet */
}

.offcanvas.show {
  visibility: visible; /* Sichtbar, wenn gezeigt */
}

.offcanvas.show.offcanvas-start {
  transform: translateX(0); /* Linke Offcanvas, eingeblendet */
}

.offcanvas.show.offcanvas-end {
  transform: translateX(0); /* Rechte Offcanvas, eingeblendet */
}

.CodeMirror {
  width: 95% !important; /* Breite 100% */
  height: 37rem !important; /* Höhe 400px */
  margin-left: 2.5%;
  margin-bottom: 1.5%;
  background-color: var(--grey) !important;
}

.creativemode {
  border: solid px var(--darkblue);
  background-color: var(--lightBlue);
  color: var(--white);
}

.border-span {
  background-color: var(--darkRose);
  height: 2px;
  display: block;
}

.container-fluid {
  padding: 0 !important;
}

* {
  margin: 0px;
  border: 0px;
  padding: 0px;
}

body {
  line-height: var(--lineheight);
  font-family: "Nirmala UI", "Nunito Sans", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: var(--font-sm);
  color: var(--white);
  background-color: var(--lightBlue);
  overflow-y: auto;
}

.div_light_desktop {
  position: relative;
  padding: 0rem 2rem;
  border: solid var(--darkblue) 0.65rem;
  min-height: 100vh;
  background-color: var(--darkblue);
}

/* ============================================================================
   Kompaktere Desktop-Darstellung (User-Vorgabe 05.09.2026)
   ============================================================================
   Der User arbeitete dauerhaft mit Browser-Zoom 67%, weil die Oberflaeche bei
   100% zu gross wirkte. `zoom` bildet genau das nach — im Gegensatz zu einer
   kleineren Basis-Schriftgroesse skaliert es ALLES proportional: Schrift,
   Abstaende, Bootstrap-Raster, Diagramme UND die festen px-Werte in diesem
   Stylesheet (Knopf-Kacheln, .card-lounge). Gemessen am 05.09.2026: rund 697
   eigene Regeln rechnen in rem und wuerden mitskalieren, die uebrigen nicht —
   eine reine font-size-Aenderung haette kleine Schrift neben unveraendert
   grossen Knoepfen ergeben.

   0.75 statt der vom User genutzten 0.67: bewusst moderater, damit die Schrift
   auch auf 13-Zoll-Geraeten lesbar bleibt.

   🛑 Nur Desktop. Mobile hat mit `.div_light_mobile` einen eigenen Container
      und eigene Groessen ([[Mobile Desktop strikt getrennt]]).

   ✅ `position: fixed` bleibt intakt — nachgemessen auf jd-partner. Das
      Seitenmenue liegt im Markup INNERHALB dieses Containers und stand im Test
      trotzdem korrekt bei top 0 mit voller Fensterhoehe. `zoom` verhaelt sich
      hier anders als `transform`: es erzeugt keinen Bezugsrahmen fuer `fixed`
      ([[Gotchas#320]] gilt fuer `transform`, NICHT fuer `zoom`). */
@media (min-width: 992px) {
    /* 🛑 Der Zoom sitzt auf `body`, NICHT auf `.div_light_desktop`. Zuerst lag er
       am Container — dann blieb alles ausserhalb davon unskaliert und wirkte im
       Vergleich zu gross: die Modals am `<body>` (23 von 33), Overlays, Tutorials,
       Logos. Gemessen mit einem fixed-Prueflig am body: Container-Zoom liess ihn
       bei 100px, body-Zoom skaliert ihn auf 75px wie alles andere.

       Der Inhalt IM Container rendert dabei unveraendert — nachgemessen:
       Logo 83px und Login-Kasten 600px in beiden Varianten identisch. */
    body {
        zoom: 0.75;

        /* 🛑 Ohne diesen Ausgleich deckt `body` nur 75% der Fensterhoehe
           (gemessen 599px statt 798px) und darunter scheint der html-Hintergrund
           durch. `min-height` sticht dabei auch ein `height: 100vh !important`,
           wie es die Anmeldeseiten setzen. */
        min-height: var(--vh-voll);
    }

    /* 🛑 Die Variablen stehen auf `:root`, damit JEDES Element sie erbt — auch
       die Modals und Overlays am `<body>`, die nicht im Desktop-Container haengen.
       `:root` selbst wird nicht gezoomt, Variablen vererben sich trotzdem.

       WOZU: `zoom` skaliert vh- und vw-Einheiten mit. Innerhalb des gezoomten
       Bereichs entsprechen 100vh nur 75% des Fensters und 80vw nur 60% der
       Breite. Die korrigierten Einheiten rechnen das heraus:
         Hoehe:  calc(var(--vh-voll, 100vh) - 9.5rem)
         Breite: calc(80 * var(--vw-voll, 1vw))
       Der Fallback greift ueberall, wo nicht gezoomt wird (Mobile, <992px) —
       dort ergeben beide Formen exakt den alten Wert. */
    :root {
        --vh-voll: 133.34vh;   /* 100 / 0.75 */
        --vw-voll: 1.3334vw;   /*   1 / 0.75 */
    }

    /* 🛑 `min-height: 100vh` am Container wird ebenso mitskaliert und liess
       darunter eine helle Flaeche. */
    .div_light_desktop {
        min-height: var(--vh-voll);
    }
}

.div_light_desktop > *:not(.poly-background-container) {
  position: relative;
  z-index: 1;
}

.div_light_mobile {
  position: relative;
  padding: 0rem;
  min-height: 100vh;
  background-color: var(--darkblue);
  isolation: isolate;
}

.div_light_mobile > .poly-background-container {
  z-index: -1;
}

@keyframes rotate-border {
  0% {
    border-image-source: linear-gradient(
      90deg,
      var(--darkRose_connect) 1%,
      var(--darkblue) 100%
    );
  }
  25% {
    border-image-source: linear-gradient(
      180deg,
      var(--darkRose_connect) 1%,
      var(--darkblue) 100%
    );
  }
  50% {
    border-image-source: linear-gradient(
      270deg,
      var(--darkRose_connect) 1%,
      var(--darkblue) 100%
    );
  }
  75% {
    border-image-source: linear-gradient(
      360deg,
      var(--darkRose_connect) 1%,
      var(--darkblue) 100%
    );
  }
  100% {
    border-image-source: linear-gradient(
      90deg,
      var(--darkRose_connect) 1%,
      var(--darkblue) 100%
    );
  }
}

.colorWhite {
  color: var(--white) !important;
}

.w100 {
  width: 100% !important;
}

.px-0-5 {
  padding: 0rem 0.5rem !important;
}

.px-1 {
  padding: 0rem 1rem !important;
}

.px-2 {
  padding: 0rem 2rem !important;
}

.py-0-5 {
  padding: 0.5rem 0rem !important;
}

.py-1 {
  padding: 1rem 0rem !important;
}

.mt-0-5 {
  margin-top: 0.5rem !important;
}

.mt-1 {
  margin-top: 1rem !important;
}

.mtb-1 {
  margin: 1rem 0rem 1rem 0rem !important;
}

.mt-2 {
  margin-top: 2rem !important;
}

.mt-2-5 {
  margin-top: 2.5rem !important;
}
.mt-3 {
  margin-top: 3rem !important;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mtb-1 {
  margin: 1rem 0rem;
}

.px-0-2 {
  padding: 0rem 2rem !important;
}

.pyx-0-2 {
  padding: 0rem 2rem !important;
}

.pyx-1-2 {
  padding: 1rem 2rem !important;
}

.pyx-1-5 {
  padding: 0.5rem 0.5rem !important;
}

.pyx-1 {
  padding: 1rem 1rem !important;
}

.pyx-2 {
  padding: 2rem 2rem !important;
}

h1 {
  font-size: 2rem !important;
  margin-bottom: 0 !important;
  color: var(--white) !important;
}

h2 {
  font-size: 1.25rem !important;
  margin-bottom: 0 !important;
}

h3 {
  font-size: 1rem !important;
  margin-bottom: 0 !important;
  color: var(--white) !important;
}

.header_dash {
  font-size: 1.2rem !important;
  font-weight: bold;
  columns: var(--white);
}

.input_nobg {
  background: none;
  text-align: center;
  width: 100%;
  color: white;
}

.input_nobg::placeholder {
  color: white;
}

.form-check-input[readonly] {
  pointer-events: none; /* Verhindert Klicks auf die Checkbox */
}

.form-check-input:checked {
  background-color: var(--darkRose);
  border-color: var(--darkRose);
}

.form-check-input:focus, .form-check-input:checked:focus {
  box-shadow: none;
  border-color: var(--darkRose);
}

.approved-font-darkblue{
  color: var(--darkblue) !important;
}

.approved-font-yellow{
  color: var(--darkyellow) !important;
}

.approved-font-red{
  color: var(--red) !important;
}

.approved-border-white{
  border: 3px solid white;
  border-radius: 8px 8px 0px 0px;
  border-bottom: none;
  background-color: var(--white);
  color: var(--darkblue) !important;
}

.approved-border-yellow{
  border: 3px solid var(--darkyellow);
  border-radius: 8px 8px 0px 0px;
  border-bottom: none;
  background-color: var(--darkyellow) !important;
}

.approved-border-red{
  border: 3px solid var(--darkred);
  border-radius: 8px 8px 0px 0px;
  border-bottom: none;
  background-color: var(--darkred) !important;
}

.form-control {
  width: 100% !important;
  border-radius: var(--border) !important;
  /* background: radial-gradient(circle,rgba(10, 15, 36, 1) 85%, rgba(136, 84, 93, 1) 100%); */
  background-color: transparent !important;
  color: var(--white) !important;
  border: transparent !important;
  padding: 0.5rem 0.5rem !important;
}

.form-control-white {
  width: 100% !important;
  border-radius: var(--border) !important;

  /* Verlauf als Hintergrund */
  background: radial-gradient(circle,rgba(10, 15, 36, 1) 85%, rgb(255, 255, 255) 100%);

  color: var(--white) !important;
  border: 1px solid var(--darkRose) !important;
  padding: 0.5rem 0.5rem !important;
}

.form-control-yellow {
  width: 100% !important;
  border-radius: var(--border) !important;

  /* Verlauf als Hintergrund */
  background: radial-gradient(circle,rgba(10, 15, 36, 1) 85%, rgb(219, 188, 13) 100%);

  color: var(--white) !important;
  border: 1px solid var(--darkRose) !important;
  padding: 0.5rem 0.5rem !important;
}

.form-control-red {
  width: 100% !important;
  border-radius: var(--border) !important;

  /* Verlauf als Hintergrund */
  background: radial-gradient(circle,rgba(10, 15, 36, 1) 85%, rgb(120, 27, 16) 100%);

  color: var(--white) !important;
  border: 1px solid var(--darkRose) !important;
  padding: 0.5rem 0.5rem !important;
}

::placeholder {
  color: var(--white);
  opacity: 1;
}

.input-basic {
  width: 100% !important;
  border-radius: var(--border) !important;
  background: var(--darkblue);
  color: var(--white) !important;
  border: 1px transparent !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;
  padding: 0.5rem 0.5rem !important;
}

/* Kompakter "Webseite öffnen"-Link (Leadshop Über-uns-Tab): rechtsbündig statt
   volle .input-basic-Breite. Mobil wird das per styles-mobile.css wieder auf
   volle Breite gesetzt (bessere Touch-Zielgröße, siehe Sektion 4.11-Äquivalent). */
.leadshop-website-link {
  width: auto !important;
}

/* Leadlounge Detail-Modal, Bemerkung-Tab: Desktop-Standardhoehe (war Inline-Style
   mit !important, das sich mobil nicht ueberschreiben liess -> in Klasse ausgelagert). */
.ll-remark-textarea {
  width: 100% !important;
  height: 35rem !important;
  padding: 1rem;
  box-sizing: border-box;
}

/* Preisbox des Leadshop-Bestell-Modals (Gesamt/Preis pro Datensatz/MwSt.) —
   portiert aus jd-mail, dort bereits akzentfarblos (var(--darkblue)/white),
   daher kein Rosa-Swap noetig. */
.price-box {
  background: var(--darkblue);
  color: white;
  padding: 1rem;
  border-radius: var(--border);
  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;
}

.price-main {
  font-size: 2rem;
  font-weight: bold;
}

.price-note {
  font-size: 0.75rem;
  opacity: 0.9;
}

.price-label {
  font-size: 0.9rem;
  opacity: 0.95;
}

.price-value {
  font-size: 1.1rem;
  font-weight: 600;
}

.input-dynamic {
  width: 100% !important;
  border-radius: var(--border) !important;
  background: var(--darkblue);
  color: var(--white) !important;
  border: 1px solid transparent;
  padding: 0.5rem 0.5rem !important;
  cursor: pointer !important;
}

.copy-wrapper:hover .input-dynamic {
  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;
}

/* Bundeslaender-Chips (Zielgruppe-Tab): 4 pro Zeile auf Desktop. Frueher war
   die Breite inline am Chip (width:calc(25% - 0.375rem)!important) gesetzt — das
   liess sich auf Mobil nicht per Stylesheet ueberschreiben (Inline-!important).
   Jetzt als Klasse, sodass styles-mobile.css auf 100% (1 pro Zeile) umstellen kann. */
.bl-pill-w {
  width: calc(25% - 0.375rem) !important;
}

[readonly] {
    pointer-events: none;      /* verhindert jegliche Interaktion */              /* Text etwas heller machen */
}

.half-gar {
  width: 100% !important;
  border-radius: var(--border) !important;
  background: linear-gradient(27deg,rgba(136, 84, 93, 0.5) 0%, rgba(10, 15, 36, 1) 20%);
  color: var(--white) !important;
  padding: 0.5rem 0.5rem !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;
}

.search-input {
  width: 100% !important;
  border-radius: var(--border) !important;
  background: var(--darkblue);
  color: var(--white) !important;
  border: 1px solid var(--darkRose) !important;
  padding: 0.5rem 0.5rem !important;
}

.form-control_advance {
  width: 100% !important;
  border-radius: var(--border) !important;
  background-color: transparent !important;
  color: var(--white) !important;
  border: 1px solid var(--darkRose);
  padding: 0.5rem 0.5rem !important;
}

.form-control_advance::placeholder,
.form-control::placeholder {
  color: var(--white) !important;
}

.accordion-btn {
  background-color: var(--darkblue) !important;
  color: var(--white) !important;
}

.trans-box {
  background: color-mix(in srgb, var(--darkblue) 75%, transparent);
  min-height: 5rem;
  min-width: 5rem;
  border: solid 1px var(--darkRose);
  border-radius: var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem !important;
  margin-top: 1rem;
}

.trans-box:hover {
  background-color: var(--darkblue) !important;
}

.trans-box h1 {
  font-size: 1rem !important;
  color: var(--white) !important;
  text-align: center;
}

.trans-box h2 {
  font-size: 2rem !important;
  color: var(--white) !important;
  text-align: center;
}

.box_msg_dash {
  background: color-mix(in srgb, var(--darkblue) 75%, transparent);
  min-height: 26rem;
  min-width: 5rem;
  border: solid 1px var(--darkRose);
  border-radius: var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem !important;
  margin-top: 1rem;
}

.box_msg_dash:hover {
  background-color: var(--darkblue);
}

.accordion-item-dash {
  margin-top: 0.5rem;
  border-radius: var(--border);
  background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
  border: 1px solid transparent;
}

.accordion-item {
  margin-top: 0.5rem;
  border-radius: var(--border);
  background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important;
  border: 1px solid transparent;
}

.accordion-item:hover {
  background-color: var(--darkblue) !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;
}

/* Listen-Datenzeilen vertikal zentrieren: die Name-Zelle hat py-1 (vertikales
   Padding), die uebrigen Zellen nicht -> ohne Zentrierung sitzen deren Werte
   hoeher als der Name ("nach oben versetzt"). align-items:center bringt alle
   Spalten auf dieselbe Hoehe wie den Namen.
   Der Selektor .accordion-item > .container-fluid > .row trifft NUR echte
   Listen-Datenzeilen — Dashboards nutzen .accordion-item ohne diese direkte
   container-fluid>row-Struktur (auf dem Dashboard 0 Treffer verifiziert). */
.accordion-item > .container-fluid > .row {
  align-items: center;
}

.accordion-body {
  background-color: var(--darkblue);
}

.accordion-body label {
  color: var(--white) !important;
}

.accordion-button {
  height: 3rem !important;
  background-color: var(--lightBlue) !important;
  color: var(--white) !important;
  justify-content: center;
  text-align: center;
}

.accordion-button:hover {
  background-color: var(--lightBlue) !important;
}

.btn_zero {
  width: 100%;
  background-color: transparent;
}

.btn_reserve {
  width: 100%;
  padding: 0.5rem !important;
  background-color: transparent;
  border-bottom: 1px solid var(--middleRose);
  color: rgba(199, 199, 217, 0.8);
  cursor: pointer;
  border-radius: var(--border) !important;
}

.btn_reserve:hover {
  border-bottom: 1px solid var(--lightRose);
  color: var(--white);
  background: transparent !important;
  cursor: pointer;
}


.btn_main {
  width: 100%;
  padding: 0.5rem !important;
  background-color: transparent;
  border-top: 1px solid var(--middleRose);
  color: rgba(199, 199, 217, 0.8);
  cursor: pointer;
  border-radius: var(--border) !important;
}

.btn_main:hover {
  border-top: 1px solid var(--lightRose);
  color: var(--white);
  background: transparent !important;
  cursor: pointer;
}


.btn_yellow {
  width: 100%;
  padding: 0.5rem !important;
  background-color: transparent;
  border: 1px solid transparent;
  color: white;
  cursor: pointer;
  border-radius: var(--border) !important;
}

.btn_deleted {
  width: 100%;
  padding: 0.5rem !important;
  background-color: transparent;
  border-top: 1px solid var(--darkred);
  color: rgba(199, 199, 217, 0.8);
  cursor: pointer;
  border-radius: var(--border) !important;
}

.btn_deleted:hover {
  border-top: 1px solid var(--lightred);
  background: transparent !important;
  cursor: pointer;
  color: var(--white);
}

.btn_price {
  background-color: transparent !important;
  border: solid 1px var(--darkRose);
  width: 50%;
  border-radius: var(--border);
  color: var(--white);
}

.btn_delete_big {
  width: 100%;
  padding: 0.5rem !important;
  color: rgba(199, 199, 217, 0.8);
  border-top: 1px solid var(--darkred);
  cursor: pointer;
  border-radius: var(--border) !important;
}

/* Request List Header - Statischer Header oberhalb der Liste */
.request-header {
  background: linear-gradient(180deg, rgba(136, 84, 93, 0.15) 0%, rgba(136, 84, 93, 0.1) 100%);
  backdrop-filter: blur(4px);
  padding: 0.5rem 0.25rem;
  height: 2.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(136, 84, 93, 0.3);
  border-radius: var(--border);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
}

/* === Dashboard: Hoehe und Breite gescheit aufteilen =======================
   Drei Beobachtungen des Nutzers, alle nachgemessen (1600x900, Zoom 0.75):

   1. Das Versendungen-Widget war zu niedrig — 291 px, davon 262 px Liste, also
      7 sichtbare Zeilen. Es traegt die Daten, die man wirklich liest.
   2. Das Diagramm war zu hoch — 243 px Box fuer einen Chart, der mit 200 px
      auskommt.
   3. Das Diagramm war schmaler als die Widgets darueber: 1105 gegen 1118 px.
      Ursache war das padding: 8px im .dash-chart-canvas-wrapper, das der Chart
      nicht ausfuellen konnte.

   Neue Verteilung: 1 / 1.45 / 0.85 statt 1 / 1.2 / 1 — gemessen 235 / 341 / 200
   statt 243 / 291 / 243. Die mittlere Reihe zeigt damit 9 statt 7 Zeilen, das
   Diagramm behaelt mit 200 px genug Hoehe fuer Achsen und Kurve (der Canvas
   selbst brauchte 169 px).

   Die Reihen werden ueber nth-child angesprochen, nicht ueber ihre Namen: die
   erste Reihe heisst bei jd-mail .dash-freigaben-row und bei jd-leads
   .dash-section-releases. Ueber die Position gilt auf beiden dasselbe.

   🛑 Hier bei jd-partner reicht nth-child NICHT: die Reihen des aktiven
   V2-Dashboards (_getDashboardAdvertiserV2.tpl / _getDashboardPubV2.tpl)
   tragen gar keine .dash-section-Klasse, sondern heissen .dash-v2-row1,
   .dash-v2-row2 und .dash-adv-widgets-row. Ohne sie stand jd-partner noch
   auf 1 / 1.2 / 1, waehrend jd-mail und jd-leads schon 1 / 1.45 / 0.85
   hatten. Die Top-3-Regeln sind hier uebrigens schon richtig — flex: 1 auf
   der Liste und flex: 1 1 0 auf den Zeilen stehen im Template. */
.dash-main-col > .dash-section:nth-child(1),
.dash-main-col > .dash-v2-row1 {
  flex: 1 1 0 !important;
}

.dash-main-col > .dash-section:nth-child(2),
.dash-main-col > .dash-v2-row2 {
  flex: 1.45 1 0 !important;
}

.dash-main-col > .dash-section-low,
.dash-main-col > .dash-adv-widgets-row {
  flex: 0.85 1 0 !important;
}

/* Das Diagramm auf die volle Breite seiner Box — sonst steht es sichtbar
   schmaler als die Widgets darueber. */
.dash-chart-canvas-wrapper {
  padding: 0 !important;
}

.dash-chart-canvas-wrapper > canvas {
  width: 100% !important;
}

/* === Spaltentakt: Kopfzeile exakt ueber die Datenzeilen ===================
   Die Werte standen nicht mittig unter ihrer Ueberschrift, und der Versatz wuchs
   nach rechts an. Ursache ist nicht das Spaltenraster — Kopf und Zeilen teilen
   sich dieselbe Grid-Definition — sondern die BREITE ihrer Container:

     Datenzeile:  .accordion-item.p-2   ->  0.5rem seitlich, und wo die Liste
                  scrollt zusaetzlich hinter der Rinne von .dash-list-scroll
     Kopfzeile:   .request-header       ->  weniger, und keine Rinne

   Ein Grid verteilt seine fr-Spalten proportional. Zwei verschieden breite
   Container laufen deshalb linear auseinander: links kaum sichtbar, rechts am
   groessten. Gemessen am 05.09.2026: bis 17.5 px in der letzten Spalte.

   Diese Regel gleicht NUR das p-2 der Datenzeile aus. Die Scrollbalken-Rinne
   kommt aus header.tpl, das sie je Liste misst und als inline-Abstand setzt:
   sie ist keine Konstante — der Scrollbalken ist physisch konstant breit, in
   CSS-Pixeln haengt er also an der Pixeldichte (13 px bei devicePixelRatio
   2.28, 18 px bei 1.71) — und nicht jede Liste scrollt ueberhaupt. Ohne das
   Skript bleibt es bei dieser Regel, was nie schadet.

   Der doppelte Klassenname ist Absicht: Die Tabellen bringen eigene Regeln der
   Form `.dash-signups-table .request-header > .container-fluid { padding: 0
   !important }` mit. Eine einzelne Klasse verliert dagegen — auch mit
   !important, weil bei gleicher Wichtigkeit die Spezifitaet entscheidet.

   `:has(> .container-fluid)` grenzt auf die Koepfe mit Spaltenraster ein. Die
   Flex-Koepfe bringen ihr Raster selbst mit und bleiben unberuehrt.
   Siehe [[Gotchas#539]]. */
.request-header.request-header:has(> .container-fluid) {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;   /* die Scrollbalken-Rinne legt header.tpl obendrauf */
}

/* Request List Container - Scrollbarer Bereich */
.request-list-container {
  padding-top: 0;
}

/* 🛑 Die Icons wurden hier bis 21.09.2026 NICHT zentriert, sondern mit festen
   Abstaenden an die obere linke Ecke geschoben — teils per .icon_basic
   (margin: 12px), teils zusaetzlich inline (margin-top/left: 10px). Ein fester
   Abstand zentriert aber nur ein Icon von genau der passenden Breite: die
   Font-Awesome-Glyphen sind unterschiedlich breit (fa-pause schmal, fa-users
   breit), und so sass jedes Zeichen ein paar Pixel woanders. Genau das war der
   Befund des Users ("wirkt nicht so als ob bei jedem Button das Icon wirklich
   zentriert ist").

   jd-mail und jd-leads flexen diese beiden Klassen laengst — nur jd-partner
   nicht. Hier wird der Rueckstand aufgeholt. Die symmetrische .icon_basic-Margin
   stoert dabei nicht: bei justify-content:center zaehlt sie auf beiden Seiten
   gleich und hebt sich auf. Entfernt werden mussten nur die EINSEITIGEN
   Inline-Abstaende in den Vorlagen.

   Beide Klassen gemeinsam, sonst springt das Zeichen beim Umschalten
   btn_add <-> btn_add_ ([[Gotchas#115]]). */
.btn_add {
  /* border: solid 1px var(--darkRose); */
  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;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: var(--border);
  color: var(--white) !important;
}

.btn_add_ {
  border: solid 1px var(--darkRose);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: var(--border);
  color: var(--white) !important;
}

/* Testadressen Plus-/Minus-Button: Icon sauber flex-zentriert (statt fester
   icon_basic-Margins, die beim Wechsel plus->minus verrutschen). */
.testaddress-new-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.testaddress-new-btn .icon_basic {
  margin: 0 !important;
}
/* Aufgeklappt (Minus): Hover wie .btn_delete (rot). Zu (Plus): btn_add-Rosa. */
.testaddress-new-btn--open:hover {
  background-color: var(--lightred) !important;
}
/* Testadressen-Listenitems höher (mehr vertikales Padding als Standard-.boxBl). */
#testaddressList .addressSetClient_xx {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
/* Modus-Umschalter Einzeln/Mehrere nutzt die etablierte nav-tabs-Optik
   (.nav-link.active = darkRose, global definiert). */
/* Abstand von den Modus-Tabs (Einzeln/Mehrere) zum Inhalt darunter. */
#taSingleMode,
#taBulkMode {
  margin-top: 1rem;
}
/* "Weitere Adresse"-Button: kompakt wie der Ecken-Plus-Button (btn_add 40x40),
   Icon flex-zentriert, unter den Zeilen mittig. */
#taAddRow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.25rem auto 0;
}
#taAddRow .icon_basic {
  margin: 0 !important;
}
/* Textarea (Bulk-Import) volle Breite wie das Suchfeld; Text/Placeholder mit
   1rem Innenabstand oben/links. */
#taBulkText {
  width: 100% !important;
  padding: 1rem !important;
}

.btn_delete {
  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;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border-radius: var(--border);
  color: var(--white) !important;
}

.btn_delete_detail {
  border: solid 1px var(--darkred);
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border-radius: var(--border);
  color: var(--white) !important;
  z-index: 999999; /* noch höher */
}

/* Blacklist Eintrag löschen - wie X-Button */
.blacklist-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--darkblue);
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: var(--border);
  color: var(--white);
  font-size: 0.85rem;
  padding: 0;
  margin-right: 1rem;
  cursor: pointer;
}

.blacklist-delete-btn:hover,
.blacklist-delete-btn:active {
  border: none !important;
  color: var(--lightred);
}

/* 🛑 `border: solid transparent` OHNE Zahl heisst border-width: medium — das sind
   3px. Sichtbar wurde das als "Doppelschatten" am Hamburger-Knopf (User
   21.09.2026): der inset-Anteil des box-shadow (0 -3px 0 inset) wird innerhalb
   der PADDING-Box gezeichnet, der Hintergrund reicht aber bis zur Border-Box.
   Bei 3px Rand sass die dunkle Leiste also 3px ueber der Unterkante, darunter
   blieb gefuellte Flaeche stehen — genau das liest das Auge als zweiten,
   abgesetzten Schatten. Auffaellig nur im Hover, weil der Knopf erst dann einen
   gefuellten Hintergrund hat.

   Mit 1px rueckt die Leiste an die Kante und verschmilzt, wie bei jedem anderen
   Knopf. jd-leads hat genau das laengst — hier wird der Rueckstand aufgeholt.
   Flex-Zentrierung dazu, damit das Zeichen nicht mehr von festen Abstaenden
   abhaengt (dieselbe Korrektur wie bei .btn_add). */
.btn_nav {
  position: relative;
  border: solid 1px transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  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;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border-radius: var(--border);
  color: var(--white) !important;
}

.btn_adSpace {
  background-color: transparent !important;
  border: solid 1px var(--darkRose);
  width: 50%;
}

.btn_advance {
  display: block;
  margin: 0.5rem auto;
  background-color: transparent !important;
  border: solid 1px var(--darkRose);
}

.btn_advance_red {
  display: block;
  margin: 0.5rem auto;
  background-color: transparent !important;
  border: solid 1px var(--darkred);
}

.btn_advance_absolute {
  right: 63px;
  top: 17px;
}

/* === Newsletter Buttons: Aktions-Modus global schalten (alle Aufloesungen) ===
   In der Zeile sichtbar bleiben immer: Ordner (Slot 0), Testmail (Slot 1),
   Vorschau (Slot 2) — bei Multi-Account zusaetzlich Versand (Slot 3).
   Der Drei-Punkte-Button im Listen-Header (.nl-header-more) schaltet fuer ALLE
   Kampagnen gleichzeitig den Aktions-Modus: die restlichen Aktionen (Publisher,
   Stempel, Pausieren, Abschliessen, Kopieren, Loeschen) setzen als .nl-more-dropdown das
   Raster derselben Zeile nach links fort — 9 bzw. 10 Buttons brauchen 9-10 Slots,
   rechts frei sind aber nur gut 3. Deshalb weichen im Modus die vier
   Statistik-Spalten (.nl-stat-col, Header + Zeile), statt die Zahlen zu ueberdecken. */

/* 🛑 EINE Quelle fuer das Raster (Fix 22.09.2026, User-Meldung „Buttons ueberlappen
   bei zu hoher Aufloesung").

   Vorher rechneten die zehn Knoepfe ihre Position auf ZWEI Wegen aus, und beide
   mischten dabei Einheiten:
     - die sechs Aktions-Knoepfe ueber `gap: calc(4rem - 40px)` bei `width: 40px`
     - die vier Basis-Knoepfe ueber `right: 24rem/28rem/32rem/36rem`
   Das ergibt nur dasselbe Raster, solange `1rem` genau 16px ist UND beide Angaben
   unter `body { zoom: 0.75 }` gleich skaliert werden. Sobald eine der beiden
   Annahmen kippt — andere Standard-Schriftgroesse im Browser, andere
   Geraete-Pixeldichte, andere zoom-Umsetzung — laufen die beiden Wege
   auseinander und die Knoepfe schieben sich uebereinander.

   Jetzt kommen Knopfgroesse und Rasterschritt aus denselben zwei Variablen, in
   derselben Einheit, und jede Position ist ein Vielfaches davon. Ein
   Auseinanderlaufen ist damit rechnerisch ausgeschlossen. */
:root {
  --nl-btn-size: 40px;   /* = .btn_add / .btn_delete / .nl-more-dropdown-item */
  --nl-btn-pitch: 64px;  /* Knopf + Luft; war 4rem bei 16px Wurzelschrift */
}

/* Aus der sichtbaren Reihe ausgeblendet -> nur noch in der Aktions-Reihe */
.nl-btn-trash,
.nl-btn-stamp,
.nl-btn-flag,
.nl-btn-actions {
  display: none !important;
}

/* Sichtbare Buttons fest positionieren (ueberschreibt inline right-Werte) */
.nl-btn-folder {
  right: 0 !important;
}
.nl-btn-vial {
  right: var(--nl-btn-pitch) !important;
}
.nl-btn-eye {
  right: calc(2 * var(--nl-btn-pitch)) !important;
}
.nl-btn-plane {
  right: calc(3 * var(--nl-btn-pitch)) !important;
}

/* Aktions-Modus: die Aktionen haengen sich RECHTS an (hinter dem Ordner), die
   Basis-Buttons ruecken dafuer um 6 Slots nach links. 6 ist konstant —
   die Reihe rendert immer Publisher/Stempel/Pause|Fortsetzen/Abschliessen/Kopieren/Loeschen. */
#nlListWrap.nl-actions-open .nl-btn-folder {
  right: calc(6 * var(--nl-btn-pitch)) !important;
}
#nlListWrap.nl-actions-open .nl-btn-vial {
  right: calc(7 * var(--nl-btn-pitch)) !important;
}
#nlListWrap.nl-actions-open .nl-btn-eye {
  right: calc(8 * var(--nl-btn-pitch)) !important;
}
#nlListWrap.nl-actions-open .nl-btn-plane {
  right: calc(9 * var(--nl-btn-pitch)) !important;
}

/* Drei-Punkte im Listen-Header — sitzt im selben 4rem-Raster wie die Zeilen-Buttons */
.nl-header-more {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  /* steht ueber dem Papierkorb der Zeilen — dieselbe Groesse aus derselben Quelle */
  width: var(--nl-btn-size);
  height: var(--nl-btn-size);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--border);
  color: var(--white);
  transition: background 0.15s ease;
}

.nl-header-more:hover {
  background-color: var(--darkRose);
}

.nl-more-dropdown {
  display: none;
  position: absolute;
  top: 1rem;
  right: 0;
  background: transparent;
  border: none;
  /* Rasterschritt minus Knopfbreite — dieselben Variablen wie die Basis-Knoepfe oben */
  gap: calc(var(--nl-btn-pitch) - var(--nl-btn-size));
  justify-content: flex-end;
  /* Die Reihe darf niemals umbrechen: sie sitzt absolut in der Zeile, ein
     Umbruch wuerde die zweite Haelfte unter die Zeile schieben. */
  flex-wrap: nowrap;
}

#nlListWrap.nl-actions-open .nl-more-dropdown {
  display: flex;
}

/* Statistik weicht den Aktionen — schlaegt das inline display:inline-block der Spalte */
#nlListWrap.nl-actions-open .nl-stat-col {
  display: none !important;
}

/* === Name-Ausklappen: Icon neben dem "Name"-Header verbreitert die Name-Spalte ===
   Damit abgeschnittene Kampagnennamen komplett lesbar werden. Wie im Aktions-Modus
   weichen die Statistik-Spalten, um Platz zu schaffen. Toggle-Icon: #nlToggleName. */
.nl-name-toggle {
  cursor: pointer;
  margin-left: 0.4rem;
  font-size: 0.8rem;
  color: var(--white);
  transition: opacity 0.15s ease;
}
.nl-name-toggle:hover {
  opacity: 0.7;
}
#nlListWrap.nl-name-open .nl-stat-col {
  display: none !important;
}
/* Name-Spalte (Header + Zeile) verbreitern. Hoehere Spezifitaet (#id.class .class)
   schlaegt Bootstraps .col-lg-2 ohne !important. */
#nlListWrap.nl-name-open .nl-name-col {
  flex: 0 0 50%;
  max-width: 50%;
  width: 50%;
}

/* === Spalten-Sortierung: Icons im Listen-Header (getNewsletter) ===
   fa-sort = inaktiv (gedimmt), fa-sort-up/-down + .nl-sort-active = aktive
   Spalte in vollem Weiß. Klick-Handler im Template (funcToolbox=sort). */
.nl-sort-icon {
  cursor: pointer;
  margin-left: 0.15rem;
  font-size: 0.8rem;
  color: var(--white);
  opacity: 0.45;
  transition: opacity 0.15s ease;
}
.nl-sort-icon:hover {
  opacity: 1;
}
.nl-sort-icon.nl-sort-active {
  opacity: 1;
}

/* 🛑 `flex: 0 0 …` statt nur `width`: als Flex-Element wuerde der Knopf sonst
   schrumpfen, sobald der Platz knapp wird — dann stimmt der Rasterschritt der
   Reihe nicht mehr mit dem der Basis-Knoepfe daneben ueberein. */
.nl-more-dropdown-item {
  flex: 0 0 var(--nl-btn-size);
  width: var(--nl-btn-size);
  height: var(--nl-btn-size);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--border);
  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;
  transition: background 0.15s ease;
}

.nl-more-dropdown-item:hover {
  background-color: var(--darkRose);
}

.nl-more-trash-btn:hover {
  background-color: var(--lightred) !important;
}

/* Publisher-Sub-Tab-Leiste (Clever Angebote / Maxi / Red Lemon / Suedstern):
   Im Modal-Header liegt direkt darueber eine .border-span-Trennlinie
   mit margin-bottom:1rem -> dort kein zusaetzliches margin-top noetig.
   Im Accordion (.tab-pane > .nl-pub-tabs) folgt sie direkt der Bootstrap-
   border-bottom der Haupt-Tab-Leiste -> hier 1rem Abstand zur Trennlinie. */
.nl-pub-tabs {
  margin-top: 0 !important;
}

.tab-pane > .nl-pub-tabs {
  margin-top: 1rem !important;
}

/* WM-Test-Toggle nur im Accordion zeigen, im Publisher-Standalone-Modal
   ausblenden (im Modal nicht benoetigt). */
.modal .switch-button:has(.wmtest-toggle) {
  display: none !important;
}

/* Oeffentlich-Toggle im Modal-Header (Desktop): Toggle + Label nebeneinander
   (row) und etwas hoeher (top:0.8rem) setzen, sonst steht das Label unter dem
   Toggle und der border-span (Trennlinie, ~y der Tab-Leiste) laeuft mitten
   durch das Wort "Oeffentlich". Nur Desktop — Mobile (max-width:768px) behaelt
   das gestapelte column-Layout aus styles-mobile.css. */
@media (min-width: 769px) {
  .modal form > .switch-button.position-absolute {
    top: 0.8rem !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  .modal form > .switch-button.position-absolute > label {
    margin-top: 0 !important;
    white-space: nowrap;
  }
}

.hover_main:hover,
.btn_nav:hover,
.btn_add_:hover,
.btn_add:hover{
  background-color: var(--darkRose);
}

.card-lounge {
    background: color-mix(in srgb, var(--darkblue) 85%, transparent);
    border: 1px solid var(--middleRose);
    border-radius: var(--border);
    padding: 24px !important;
    width: 100%;
    max-width: 380px;
}

.card-lounge:hover {
  background: color-mix(in srgb, var(--darkblue) 100%, transparent);
  border: 1px solid var(--lightRose);
}

.badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
    padding: 6px 12px;
    border-radius: 6px;
   font-size: 1.3rem !important;
    font-weight: 500;
}

.paymodel-badge {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
    padding: 6px 12px !important;
    border-radius: 6px;
    font-size: 1.3rem !important;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 8px 16px !important;
}

.card-title {
    color: var(--white);
    font-size: 1.5rem !important;
    font-weight: 600;
    margin-bottom: 1rem !important;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.info-content {
    flex: 1;
}

.info-label {
    color: #94a3b8;
    font-size: 0.8rem !important;
}

.info-value {
    color: var(--white);
    font-size: 1rem !important;
    font-weight: 500;
}

.price {
    color: var(--main);
    font-size: 2.5rem !important;
    font-weight: 600;
}


.btn_yellow:hover {
  border: 1px solid var(--darkyellow);
  background: transparent !important;
  cursor: pointer;
}

.textarea{
  background-color: var(--darkblue);
  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;
  color: var(--white);
}

.form-select {
  width: 100% !important;
  border-radius: var(--border) !important;
  background: var(--darkblue) !important;
  color: var(--white) !important;
  border: 1px transparent !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;
  padding: 0.5rem 0.5rem !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.form-select option.optgroup-label {
  font-weight: bold;
  color: #fff !important;
  text-align: center;
  font-style: normal;
}

.form-select:disabled {
  background-color: var(--darkblue) !important;
  background: var(--darkblue) !important;
  color: rgba(255,255,255,0.45) !important;
  opacity: 1;
}


select option {
  background-color: var(--darkblue); /* Dunkelblau oder dein Gradient */
  color: #fff;    
  border: none;          /* Textfarbe */
}

select option:checked {
  background: var(--darkRose) linear-gradient(0deg, var(--darkRose) 0%, var(--darkRose) 100%);
  color: var(--white);
}

select option:hover,
select option:active {
  background: var(--darkRose) linear-gradient(0deg, var(--darkRose) 0%, var(--darkRose) 100%);
  color: #fff;
}

.btn_delete:hover{
  background-color: var(--lightred);
}


.btn_delete_big:hover {
  border-top: 1px solid var(--lightred);
  background: transparent !important;
  cursor: pointer;
  color: var(--white);
}

.btn_advance_red:hover {
  border: solid 1px var(--lightred);
}

.login-container {
  background: color-mix(in srgb, var(--darkblue) 85%, transparent);
  padding: 2rem;
  border-radius: var(--border);
  width: 100%;
  max-width: 50rem;
  box-shadow: rgba(136, 84, 93, 0.4) 0px 2px 4px, rgba(136, 84, 93, 0.3) 0px 7px 13px -3px, rgba(136, 84, 93, 0.2) 0px -3px 0px inset;
  color: var(--white);
  margin: 0 1rem;
}

.login-container .row {
  margin-top: 1rem;
}

.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: var(--border);
}

.login-form .forgot-password {
  text-align: center;
  color: var(--white);
  text-decoration: none;
}

.header_list {
  padding: 0.5rem !important;
  font-size: 0.9rem;
  color: var(--white) !important;
  margin-top: 0.5rem;
  border-radius: var(--border);
  background-color: var(--darkblue);
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;
}

.header_list_ {
  padding: 0.5rem !important;
  font-size: 0.9rem;
  color: var(--white) !important;
  margin-top: 0.5rem;
  border-radius: var(--border);
  background-color: var(--darkblue);
 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;
}

.il {
  display: inline-block;
}

.header_list div {
  display: inline-block;
}

.icon-message-approved {
  color: var(--darkRose) !important;
  font-size: 1.5rem;
  top: 1.2rem;
  left: 1.5rem;
}

.icon-message-none-approved {
  color: var(--lightred) !important;
  font-size: 1.5rem;
  top: 1.2rem;
  left: 1.5rem;
}

.icon_basic {
  color: var(--white) !important;
  margin: 12px 12px;
  cursor: pointer !important;
}

.icon_basic_2 {
  color: var(--white) !important;
  margin: 9px 9px;
  cursor: pointer !important;
}

.angle_Icon {
  width: 1.6%;
  top: 28px;
  right: 15px;
}

.serach_icon {
  width: 1.6%;
  top: 7px;
  right: 15px;
}

.add_Icon {
  width: 50%;
}

.card {
  background-color: transparent !important;
  border: none;
  padding: 0rem 1.5rem;
  padding-top: 1rem;
}

.tabs {
  display: flex;
}

.nav-link.active,
.nav-item.show .nav-link {
  background-color: var(--darkRose) !important;
  border-color: transparent !important;
}

.nav-link {
  color: var(--white) !important;
  border-radius: 3px !important;
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--darkRose) !important;
  border-radius: 3px !important;
}

.nav-tabs .nav-link {
  border-radius: 3px 3px 0 0 !important;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border-color: var(--darkRose) !important;
}

.paddingAdSpace {
  padding: 2rem 0rem 0rem 6rem !important;
}

.tab-button {
  padding: 10px 20px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
}

.tab-button:hover {
  background-color: #ddd;
}

.tool_version {
  top: 0.75rem;
  left: 2rem;
}

.tool_version h1 {
  font-size: 1rem !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1); /* macht das Icon weiß */
    cursor: pointer;
}

::-webkit-scrollbar {
  width: 10px;
  background-color: var(--darkblue);
}

::-webkit-scrollbar-thumb {
  background-color: var(--darkRose);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--lightRose);
}

/* PLZ-Bereiche (Eingabe): Bootstrap .row Negativ-Margin neutralisieren + rechts */
/* Innenabstand, damit der Loesch-Button (inkl. Hover-Rot) nicht vom Scroll-Clip */
/* abgeschnitten wird; schmale Theme-Scrollbar. */
[id^="plzRangesTg"] > .row,
[id^="plzRangesSet"] > .row {
  margin-right: 0;
  margin-left: 0;
  padding-right: 0.5rem;
}
/* Loesch-Button in der PLZ-Liste: Icon mittig (statt margin-left:12px), kein box-shadow- */
/* oder Margin-Ueberstand, der vom Scroll-Clip abgeschnitten wird. */
[id^="plzRangesTg"] .remove-plz-row,
[id^="plzRangesSet"] .remove-plz-row {
  box-shadow: none !important;
  margin-right: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
[id^="plzRangesTg"] .remove-plz-row .icon_basic,
[id^="plzRangesSet"] .remove-plz-row .icon_basic {
  margin: 0 !important;
}
[id^="plzRangesTg"]::-webkit-scrollbar,
[id^="plzRangesSet"]::-webkit-scrollbar {
  width: 8px;
}
[id^="plzRangesTg"]::-webkit-scrollbar-track,
[id^="plzRangesSet"]::-webkit-scrollbar-track {
  background: var(--darkblue);
  border-radius: var(--border);
}
[id^="plzRangesTg"]::-webkit-scrollbar-thumb,
[id^="plzRangesSet"]::-webkit-scrollbar-thumb {
  background: var(--darkRose);
  border-radius: var(--border);
}
[id^="plzRangesTg"]::-webkit-scrollbar-thumb:hover,
[id^="plzRangesSet"]::-webkit-scrollbar-thumb:hover {
  background: var(--lightRose);
}

.box_nav {
  position: fixed;
  padding: 0.3rem;
  font-size: 0.9rem;
  background-color: transparent;
  border-radius: 10px;
  top: 1.3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

.box_nav:hover {
  background-color: var(--darkblue);
  min-height: 6.8rem;
}

.box_subscribers {
  padding: 0.5rem;
  font-size: 0.9rem;
  background-color: transparent;
  color: var(--white);
}

.box_subscribers_xl {
  padding: 0.5rem;
  font-size: 1rem;
  background-color: transparent;
  color: var(--white);
}

.box_wrapper_subscribers {
  border: 1px solid var(--darkRose) !important;
  margin-top: 5px;
  border-radius: var(--border);
}

.box_subscriber_list {
  border: 1px solid var(--darkRose) !important;
  margin-top: 5px;
  border-radius: var(--border);
  height: 25rem; /* Hier die gewünschte Höhe einfügen */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0rem 0.3rem;
}

.boxBl,
.boxSeg {
  background: color-mix(in srgb, var(--darkblue) 85%, transparent);
  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;
  border-radius: var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem !important;
  margin-top: 0.5rem;
  cursor: pointer;
  position: relative;
  z-index: 1000;
}

.boxBl:hover {
  background-color: var(--darkblue) !important;
}

.boxBl h1 {
  font-size: 1rem !important;
  color: var(--white) !important;
  text-align: center;
  padding: 0.2rem;
  padding-left: 1.2rem;
}

.box_histroy_count,
.box_dash {
  background-color: var(--darkblue) !important;
  min-height: 5rem;
  min-width: 5rem;
  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;
  border-radius: var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem !important;
  margin-top: 1rem;
}



.box_news_dash {
  max-height: 16rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.getNewsletter_dash {
  padding-left: 0.5rem !important;
  margin-top: 0.5rem;
  border-radius: var(--border);
  border: 1px solid var(--darkRose);
}

.box_histroy_count h1 {
  font-size: 1rem !important;
  color: var(--white) !important;
  text-align: center;
}

.box_dash h1 {
  font-size: 1rem !important;
  color: var(--darkRose) !important;
  text-align: left;
}

.centered {
  display: flex;
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  height: 4rem;
  text-align: center; /* Optional: sorgt dafür, dass der Text innerhalb des h2 zentriert wird */
}

.box_histroy_count h2 {
  font-size: 2rem !important;
  color: var(--white) !important;
  text-align: center;
}



.light_border {
  border: 1px solid var(--darkRose) !important;
}

.dark_border {
  border: 1px solid var(--darkRose) !important;
}

.nav-choose {
  top: 1rem;
  right: 2.5rem;
  width: 20%;
}

.lable_subsribers {
  color: var(--darkRose) !important;
}

.lable_no_subscriber {
  color: var(--lightred) !important;
}

.modal {
  /* 🛑 Muss ueber den Backdrop. Der steht hier auf z-index 1999, das Modal kaeme
     ohne diese Zeile nur auf den Bootstrap-Standard (gemessen 1055 bei
     jd-partner) — die Abdunkelung laege dann ueber dem Modal statt darunter und
     das ganze Fenster waere grau. Sichtbar wurde das erst, als der Backdrop am
     06.09.2026 ueberhaupt an seinen Platz kam; vorher lag er ausserhalb des
     Bildes und konnte nichts verdecken. jd-mail hat diese Zeile seit jeher. */
  z-index: 2000 !important;
}

.modal-backdrop {
  z-index: 1999 !important;
  /* 🛑 Frueher stand hier `top: unset`. Bei einem `position: fixed`-Element heisst
     `top: auto` NICHT "oben am Fenster", sondern "dort, wo das Element im normalen
     Fluss staende" — also unter dem gesamten body. Die Abdunkelung lag damit
     ausserhalb des Sichtfelds: gemessen am 06.09.2026 auf beta.jd-mail.net bei
     einem Fenster von 1574x800 lag sie bei y = 1066.71 px. Es gab also einen
     Backdrop, man sah ihn nur nie.

     Die Masse muessen mitkorrigiert werden: Bootstrap setzt 100vw/100vh, und der
     Desktop-Zoom (body zoom 0.75 ab 992px) skaliert vh und vw mit — mit `top: 0`
     allein deckte die Abdunkelung nur 75 % des Fensters ab (1181x600 statt
     1574x800), rechts und unten blieb ein Viertel hell. Mit den zoom-korrigierten
     Massen sind es 100 %. Ohne Zoom ergeben die Variablen wieder 100vw/100vh. */
  top: 0 !important;
  left: 0 !important;
  width: calc(100 * var(--vw-voll, 1vw)) !important;
  height: var(--vh-voll, 100vh) !important;
}

.modal-content {
  background-color: var(--darkblue);
  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;
  border-radius: var(--border) !important;
  width: 73rem;
}

.mc_a {
  top: 0px;
  left: -280px;
  padding: 1rem;
  width: 285%;
  background-color: var(--darkblue);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='polyBright' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.25'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.16'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyBright2' x1='80%25' y1='20%25' x2='20%25' y2='80%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.22'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.13'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyLight' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.19'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.12'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyLight2' x1='70%25' y1='30%25' x2='30%25' y2='70%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.16'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.10'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyMid' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.13'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.08'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyDark' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23683347;stop-opacity:0.10'/%3E%3Cstop offset='100%25' style='stop-color:%230a0f24;stop-opacity:0.05'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='1000,0 1000,80 920,50' fill='url(%23polyBright)'/%3E%3Cpolygon points='1000,0 920,50 880,0' fill='url(%23polyBright2)'/%3E%3Cpolygon points='880,0 920,50 820,90' fill='url(%23polyBright)'/%3E%3Cpolygon points='880,0 820,90 780,0' fill='url(%23polyBright2)'/%3E%3Cpolygon points='780,0 820,90 720,60' fill='url(%23polyBright)'/%3E%3Cpolygon points='780,0 720,60 680,0' fill='url(%23polyLight)'/%3E%3Cpolygon points='680,0 720,60 620,100' fill='url(%23polyLight)'/%3E%3Cpolygon points='680,0 620,100 580,0' fill='url(%23polyLight2)'/%3E%3Cpolygon points='580,0 620,100 520,70' fill='url(%23polyLight)'/%3E%3Cpolygon points='580,0 520,70 480,0' fill='url(%23polyMid)'/%3E%3Cpolygon points='480,0 520,70 420,110' fill='url(%23polyMid)'/%3E%3Cpolygon points='480,0 420,110 380,0' fill='url(%23polyMid)'/%3E%3Cpolygon points='380,0 420,110 320,80' fill='url(%23polyMid)'/%3E%3Cpolygon points='380,0 320,80 280,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='280,0 320,80 220,120' fill='url(%23polyDark)'/%3E%3Cpolygon points='280,0 220,120 180,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='180,0 220,120 120,90' fill='url(%23polyDark)'/%3E%3Cpolygon points='180,0 120,90 80,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='80,0 120,90 0,60' fill='url(%23polyDark)'/%3E%3Cpolygon points='80,0 0,60 0,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,80 1000,180 920,140' fill='url(%23polyBright)'/%3E%3Cpolygon points='1000,80 920,140 920,50' fill='url(%23polyBright2)'/%3E%3Cpolygon points='920,50 920,140 820,90' fill='url(%23polyBright)'/%3E%3Cpolygon points='820,90 920,140 850,180' fill='url(%23polyBright2)'/%3E%3Cpolygon points='820,90 850,180 720,60' fill='url(%23polyBright)'/%3E%3Cpolygon points='720,60 850,180 750,160' fill='url(%23polyLight)'/%3E%3Cpolygon points='720,60 750,160 620,100' fill='url(%23polyLight)'/%3E%3Cpolygon points='620,100 750,160 650,200' fill='url(%23polyLight2)'/%3E%3Cpolygon points='1000,180 1000,280 930,250' fill='url(%23polyBright)'/%3E%3Cpolygon points='1000,180 930,250 920,140' fill='url(%23polyBright2)'/%3E%3Cpolygon points='920,140 930,250 850,180' fill='url(%23polyLight)'/%3E%3Cpolygon points='850,180 930,250 860,290' fill='url(%23polyLight)'/%3E%3Cpolygon points='850,180 860,290 750,160' fill='url(%23polyLight)'/%3E%3Cpolygon points='750,160 860,290 770,260' fill='url(%23polyLight2)'/%3E%3Cpolygon points='1000,280 1000,400 940,360' fill='url(%23polyLight)'/%3E%3Cpolygon points='1000,280 940,360 930,250' fill='url(%23polyLight)'/%3E%3Cpolygon points='930,250 940,360 860,290' fill='url(%23polyLight2)'/%3E%3Cpolygon points='1000,400 1000,520 950,480' fill='url(%23polyMid)'/%3E%3Cpolygon points='1000,400 950,480 940,360' fill='url(%23polyMid)'/%3E%3Cpolygon points='1000,520 1000,680 900,620' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,680 1000,850 880,780' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,850 1000,1000 880,780' fill='url(%23polyDark)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Modal zentriert (wenn über Navigation geöffnet) */
.mc_a.modal-centered {
  left: 50% !important;
  transform: translateX(-50%);
}

/* Report Sidetext - bei kleinen Bildschirmen ausblenden */
.report-sidetext {
  display: flex;
}

/* Report Info Icon - bei großen Bildschirmen verstecken (Sidetext ist sichtbar) */
.report-info-toggle,
.guest-info-toggle {
  display: none !important;
}

/* Guest Sidetext - bei kleinen Bildschirmen ausblenden */
.guest-sidetext {
  display: flex;
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS für Modals
   ============================================================================= */

/* Sidetext ausblenden bei < 1200px */
@media (max-width: 1199px) {
  .report-sidetext,
  .guest-sidetext {
    display: none !important;
  }
  .report-info-toggle,
  .guest-info-toggle {
    display: flex !important;
  }
}

/* Mobile Portrait (< 576px) */
@media (max-width: 575px) {
  .mc_a {
    width: 95vw !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative;
    padding: 0.75rem;
  }
  .mc_a_row {
    width: 95vw !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative;
  }
}

/* Mobile Landscape (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .mc_a {
    width: 92vw !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative;
  }
  .mc_a_row {
    width: 92vw !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative;
  }
}

/* Tablet Portrait (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .mc_a {
    width: 90vw !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative;
  }
  .mc_a_row {
    width: 90vw !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative;
  }
}

/* Tablet Landscape (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .mc_a {
    width: calc(85 * var(--vw-voll, 1vw)) !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative;
  }
  .mc_a_row {
    width: calc(85 * var(--vw-voll, 1vw)) !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative;
  }
}

/* Desktop klein (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  .mc_a {
    width: calc(80 * var(--vw-voll, 1vw)) !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative;
  }
  .mc_a_row {
    width: calc(80 * var(--vw-voll, 1vw)) !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative;
  }
}

/* Desktop mittel (1400px - 1599px) */
@media (min-width: 1400px) and (max-width: 1599px) {
  .mc_a {
    width: calc(75 * var(--vw-voll, 1vw)) !important;
    left: 50% !important;
    transform: translateX(-50%);
  }
  .mc_a_row {
    width: calc(75 * var(--vw-voll, 1vw)) !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative;
  }
}

/* Default 1600-1919px - Desktop Standard */
@media (min-width: 1600px) and (max-width: 1919px) {
  .mc_a,
  .mc_a_row {
    width: calc(70 * var(--vw-voll, 1vw)) !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative;
  }
}

/* Desktop groß (>= 1920px) */
@media (min-width: 1920px) {
  .mc_a {
    width: calc(65 * var(--vw-voll, 1vw)) !important;
    left: 50% !important;
    transform: translateX(-50%);
  }
  .mc_a_row {
    width: calc(65 * var(--vw-voll, 1vw)) !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative;
  }
}

.mc_a_row {
  top: 11px;
  left: -31rem;
  padding: 1rem;
  width: 300%;
  background-color: var(--darkblue);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='polyBright' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.25'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.16'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyBright2' x1='80%25' y1='20%25' x2='20%25' y2='80%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.22'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.13'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyLight' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.19'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.12'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyLight2' x1='70%25' y1='30%25' x2='30%25' y2='70%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.16'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.10'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyMid' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.13'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.08'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyDark' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23683347;stop-opacity:0.10'/%3E%3Cstop offset='100%25' style='stop-color:%230a0f24;stop-opacity:0.05'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='1000,0 1000,80 920,50' fill='url(%23polyBright)'/%3E%3Cpolygon points='1000,0 920,50 880,0' fill='url(%23polyBright2)'/%3E%3Cpolygon points='880,0 920,50 820,90' fill='url(%23polyBright)'/%3E%3Cpolygon points='880,0 820,90 780,0' fill='url(%23polyBright2)'/%3E%3Cpolygon points='780,0 820,90 720,60' fill='url(%23polyBright)'/%3E%3Cpolygon points='780,0 720,60 680,0' fill='url(%23polyLight)'/%3E%3Cpolygon points='680,0 720,60 620,100' fill='url(%23polyLight)'/%3E%3Cpolygon points='680,0 620,100 580,0' fill='url(%23polyLight2)'/%3E%3Cpolygon points='580,0 620,100 520,70' fill='url(%23polyLight)'/%3E%3Cpolygon points='580,0 520,70 480,0' fill='url(%23polyMid)'/%3E%3Cpolygon points='480,0 520,70 420,110' fill='url(%23polyMid)'/%3E%3Cpolygon points='480,0 420,110 380,0' fill='url(%23polyMid)'/%3E%3Cpolygon points='380,0 420,110 320,80' fill='url(%23polyMid)'/%3E%3Cpolygon points='380,0 320,80 280,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='280,0 320,80 220,120' fill='url(%23polyDark)'/%3E%3Cpolygon points='280,0 220,120 180,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='180,0 220,120 120,90' fill='url(%23polyDark)'/%3E%3Cpolygon points='180,0 120,90 80,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='80,0 120,90 0,60' fill='url(%23polyDark)'/%3E%3Cpolygon points='80,0 0,60 0,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,80 1000,180 920,140' fill='url(%23polyBright)'/%3E%3Cpolygon points='1000,80 920,140 920,50' fill='url(%23polyBright2)'/%3E%3Cpolygon points='920,50 920,140 820,90' fill='url(%23polyBright)'/%3E%3Cpolygon points='820,90 920,140 850,180' fill='url(%23polyBright2)'/%3E%3Cpolygon points='820,90 850,180 720,60' fill='url(%23polyBright)'/%3E%3Cpolygon points='720,60 850,180 750,160' fill='url(%23polyLight)'/%3E%3Cpolygon points='720,60 750,160 620,100' fill='url(%23polyLight)'/%3E%3Cpolygon points='620,100 750,160 650,200' fill='url(%23polyLight2)'/%3E%3Cpolygon points='1000,180 1000,280 930,250' fill='url(%23polyBright)'/%3E%3Cpolygon points='1000,180 930,250 920,140' fill='url(%23polyBright2)'/%3E%3Cpolygon points='920,140 930,250 850,180' fill='url(%23polyLight)'/%3E%3Cpolygon points='850,180 930,250 860,290' fill='url(%23polyLight)'/%3E%3Cpolygon points='850,180 860,290 750,160' fill='url(%23polyLight)'/%3E%3Cpolygon points='750,160 860,290 770,260' fill='url(%23polyLight2)'/%3E%3Cpolygon points='1000,280 1000,400 940,360' fill='url(%23polyLight)'/%3E%3Cpolygon points='1000,280 940,360 930,250' fill='url(%23polyLight)'/%3E%3Cpolygon points='930,250 940,360 860,290' fill='url(%23polyLight2)'/%3E%3Cpolygon points='1000,400 1000,520 950,480' fill='url(%23polyMid)'/%3E%3Cpolygon points='1000,400 950,480 940,360' fill='url(%23polyMid)'/%3E%3Cpolygon points='1000,520 1000,680 900,620' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,680 1000,850 880,780' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,850 1000,1000 880,780' fill='url(%23polyDark)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
  overflow: hidden;
}

.custom-file {
    position: relative;
    display: inline-block;
}

.custom-file input[type="file"] {
    display: none; /* versteckt das Standardfeld */
}

.custom-file label {
    background-color: var(--darkblue);
    color: #fff;
    padding: 0.5rem 1rem;
    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;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
 border-radius: var(--border) !important;
}

.custom-file label:hover {
  background-color:var(--darkRose);
}

.hidden_buttons {
  display: none;
  flex-direction: column;
}

#first_button:hover + .hidden_buttons,
.hidden_buttons:hover {
  display: flex;
}

.acc_btn {
  width: 1%;
  top: 15px;
  right: 15px;
}

#loading {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.7);
}
#loading .spinner-border {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.span_title {
  font-size: 1rem !important;
  color: var(--white) !important;
}

.boxBl.selected::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #2ecc71;
  font-size: 1rem;
}

.radio-container input[type="radio"] {
  display: none;
}

.radio-container  {
  border: none !important;
  border-bottom: 2px solid transparent;
}

.radio-container label {
  display: block;
  background-color: transparent;
  padding: 10px;
  cursor: pointer;
  border-radius: var(--border);
  border-bottom: 2px solid transparent;
}

.radio-container label:hover {
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid var(--darkRose);
  background: linear-gradient(27deg,rgba(0, 203, 179, 0.5) 0%, rgba(10, 15, 36, 1) 20%);
}

.radio-container input[type="radio"]:checked + label {
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid var(--darkRose);
  background: linear-gradient(27deg,rgba(0, 203, 179, 0.5) 0%, rgba(10, 15, 36, 1) 20%);
  color: #fff;
}

.white_dot {
  width: 20px;
  height: 20px;
  margin: 12px 12px;
  background-color: var(--white);
  border-radius: 50%; /* Dies erstellt einen Kreis */
}

.yellow_dot {
  width: 20px;
  height: 20px;
  margin: 12px 12px;
  background-color: var(--darkyellow);
  border-radius: 50%; /* Dies erstellt einen Kreis */
}

.green_dot {
  width: 20px;
  height: 20px;
  margin: 12px 12px;
  background-color: var(--darkRose);
  border-radius: 50%; 
}

.red_dot {
  width: 20px;
  height: 20px;
  margin: 12px 12px;
  background-color: var(--lightred);
  border-radius: 50%; /* Dies erstellt einen Kreis */
}

.red_dot_bell {
  width: 20px;
  height: 20px;
  margin: 12px 12px;
  background-color: var(--lightred);
  border-radius: 50%; /* Dies erstellt einen Kreis */
  cursor: pointer;
}

.white_dot_half_left {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 12px 0;
  background-color: var(--white);
  border-radius: 50%;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.white_dot_half_right {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 12px 0;
  background-color: var(--white);
  border-radius: 50%;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.yellow_dot_half_left {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 12px 0;
  background-color: var(--darkyellow);
  border-radius: 50%;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.yellow_dot_half_right {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 12px 0;
  background-color: var(--darkyellow);
  border-radius: 50%;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.green_dot_half_left {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 12px 0;
  background-color: var(--darkRose);
  border-radius: 50%;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.green_dot_half_right {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 12px 0;
  background-color: var(--darkRose);
  border-radius: 50%;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.red_dot_half_left {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 12px 0;
  background-color: var(--lightred);
  border-radius: 50%;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.red_dot_half_right {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 12px 0;
  background-color: var(--lightred);
  border-radius: 50%;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.toplinks {
  font-size: 1rem !important;
  color: var(--white);
}

.input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.input-label {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  font-size: 16px;
  color: var(--white);
}

.input_label {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 16px;
  color: var(--white);
}

input:hover + .input-label {
  opacity: 0;
}

.noneApproved {
  background-color: var(--darkred);
  border-radius: 10px 10px 0 0;
}

.tooltip-container {
  position: relative;
}

.custom-tooltip {
  position: absolute;
  top: -45px; /* Positionierung unter dem Button */
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--darkRose);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  white-space: nowrap;
  z-index: 1000;
}

.custom-tooltip-dash {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--darkRose);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
}

.custom-tooltip-dash::after,
.custom-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: var(--darkRose) transparent transparent transparent;
}

.tooltip-container:hover .custom-tooltip-dash,
.tooltip-container:hover .custom-tooltip {
  opacity: 1;
  visibility: visible;
}

.container_feedback {
  position: relative;
  display: inline-block;
}

.image_button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.image_button img {
  width: 6rem; /* Passe die Größe des Bildes an */
  height: 6rem;
}

.hidden_div_feedback {
  position: absolute;
  top: 50%;
  left: -250px; /* Startpunkt (links vom Button, außerhalb des sichtbaren Bereichs) */
  transform: translateY(-50%);
  width: 30rem;
  padding: 1rem;
  background-color: #f0f0f0;
  border: 1px solid var(--darkRose);
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  background-color: var(--darkblue);
  color: var(--white);
}

.hidden_div_feedback.show {
  left: -31rem; /* Verschiebt das `div` weiter in den sichtbaren Bereich */
  opacity: 1;
  visibility: visible;
}

.hidden_div_feedback.show {
  left: -31rem; /* Verschiebt das `div` weiter in den sichtbaren Bereich */
  opacity: 1;
  visibility: visible;
}

.slide_img1 {
  background-image: url("../svg/bg_index.jpg");
  background-size: cover; /* Passt das Bild an, sodass es den gesamten Bereich ausfüllt */
  background-position: center; /* Zentriert das Bild */
}

.price_img {
  background-image: url("../svg/bg_index.jpg");
  background-size: cover; /* Passt das Bild an, sodass es den gesamten Bereich ausfüllt */
  background-position: center; /* Zentriert das Bild */
}

.bg_image {
  background-size: cover; /* Bild anpassen */
  background-position: center; /* Bild zentrieren */
  background-repeat: no-repeat; /* Kein Wiederholen */
  position: relative; /* Für das Positionieren von Kind-Elementen */
}

.overlay_text {
  position: absolute;
  top: 50%; /* Text zentrieren */
  left: 50%; /* Text zentrieren */
  transform: translate(-50%, -50%); /* Zentrierung ausgleichen */
  color: white; /* Textfarbe */
  font-size: 2rem; /* Schriftgröße */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Schattierung für bessere Lesbarkeit */
  z-index: 1; /* Sicherstellen, dass der Text sichtbar ist */
}

.txt_intro {
  color: var(--white) !important;
}

.txt_intro h1 {
  font-size: 2.9rem !important;
  text-align: center !important;
  line-height: 4.5rem !important;
  font-weight: 800;
  text-transform: uppercase;
}

.txt_intro h2 {
  margin-top: 2rem !important;
  font-size: 1.5rem;
  font-weight: 100;
  text-align: center;
  line-height: 2rem;
}

.intro_txt h2 {
  font-size: 2rem !important;
  text-align: left;
  text-transform: uppercase;
  margin: 0px !important;
  justify-items: center;
  color: var(--darkRose) !important;
}

.intro_txt h3 {
  font-size: 1.3rem !important;
  text-align: left;
  margin: 0px !important;
  justify-items: center;
  line-height: 2.3rem;
  color: var(--white) !important;
}

.parallax {
  position: relative;
  background-image: url("../svg/bg_index.jpg");
  background-size: cover; /* Passt das Bild an, sodass es den gesamten Bereich ausfüllt */
  background-position: center; /* Zentriert das Bild */
  background-attachment: fixed;
  background-size: cover;
  height: 100vh;
  background-position: center;
  overflow: hidden;
  transition: background-position 0.1s, background-color 0.1s;
  box-shadow: inset 0 20px 30px rgba(0, 0, 0, 0.5),
    inset 0 -20px 30px rgba(0, 0, 0, 0.5);
}

.content_parallax {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  font-size: 2rem;
  padding: 100px 20px;
}

.section_parallax {
  padding: 50px 20px;
  text-align: center;
}

.box_aos {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertikale Zentrierung */
  align-items: center; /* Horizontale Zentrierung */
  background-color: var(--bg-lightblack);
  border-radius: var(--border);
  color: var(--white);
  padding: 25px;
  overflow: hidden; /* Verhindert Überlauf von Animation */
}

.box_aos_height {
  min-height: 20rem;
}

.box_aos_height_price {
  min-height: 20rem;
}

.box_aos_height_small {
  min-height: 5rem;
}

.box_aos h2 {
  position: relative;
  z-index: 2; /* Über der Hintergrundanimation */
  transition: opacity 0.3s ease-in-out;
}

.box_aos h3 {
  opacity: 0; /* H3 ist standardmäßig unsichtbar */
  position: absolute; /* H3 wird über dem gesamten Container positioniert */
  z-index: 1; /* H3 bleibt hinter h2 */
  transition: opacity 0.3s ease-in-out;
}

.box_aos:hover h3 {
  opacity: 1; /* H3 wird sichtbar, wenn die Box gehövert wird */
}

.box_aos:hover h2 {
  opacity: 0; /* H3 wird sichtbar, wenn die Box gehövert wird */
}

.box_aos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--darkRose) !important;
  z-index: 0; /* Hintergrundanimation bleibt hinter allem */
  transition: width 0.3s ease-in-out;
}

.box_aos:hover::before {
  width: 100%; /* Animation auf 100% bei Hover */
}

#nav-content {
  margin-top: 0px;
  transition: margin-top 0.2s ease;
}

.nav-content {
  position: fixed;
  width: 100%;
  z-index: 9999;
  background: var(--bg);
}

.nav-content:hover {
  background: var(--bg-green);
}

.navbar div,
.navbar_logo {
  display: flex;
  justify-content: center;
}

#logo_nav {
  width: 6rem !important;
}

.nav-content .navbar-nav > li > a {
  color: var(--white);
  font-size: 1rem !important;
  padding: 25px 30px !important;
}

.nav-content .navbar-nav > li > a:hover {
  color: var(--darkRose);
}

.nav-content .dropdown:hover .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
}

.nav-content .dropdown .dropdown-menu {
  border-bottom: solid 3px var(--darkRose) !important;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  background-color: var(--bg-lightblack);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  display: block;
  opacity: 0;
  transition: 0.5s ease;
  visibility: hidden;
  transform: scaleY(0);
  transform-origin: top;
  padding-bottom: 0px !important;
}

.nav-content .dropdown .dropdown-menu.show {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
}

.nav-content .dropdown .dropdown-item {
  padding: 15px !important;
  font-size: 1rem !important;
  color: var(--white) !important;
}

.nav-content .dropdown .dropdown-item:hover {
  background: var(--bg);
  background: rgba(14, 66, 67, 0.4);
  color: var(--white);
}

.social_icons img {
  transition: transform 1s;
}

.social_icons img:hover {
  transform: rotate(360deg);
}

.navbar {
  padding: 0px !important;
}

.nav_infobar {
  position: sticky;
  display: block;
  width: 100% !important;
  z-index: 8888;
  padding: 5px 0px !important;
  background-color: var(--lightBlue);
  color: var(--white);
  padding: 0 !important;
}

.nav_infobar img {
  width: 1.1rem;
}
#nav_tel {
  width: 0.9rem !important;
}

.nav_infobar span {
  text-align: center;
  font-size: 1rem;
  margin-left: 5px !important;
}

.nav_infobar div {
  display: flex;
  justify-content: center;
}

#nav-content {
  margin-top: 0px;
  transition: margin-top 0.2s ease;
}

.nav-content {
  position: fixed;
  width: 100%;
  z-index: 9999;
  background: var(--bg);
}

.nav-content:hover {
  background: var(--bg-green);
}

.nav-content img {
  width: 1.5rem;
}

.box_price {
  min-height: 22rem;
  background-color: var(--darkblue);
  border-top: 2px solid var(--darkRose);
}

.box_price p {
  text-align: left;
}

.link {
  text-decoration: underline;
  color: var(--darkRose);
  cursor: pointer;
}

.link_white {
  text-decoration: none;
  color: var(--white);
  cursor: pointer;
}

.bg_dark_blue {
  background-color: var(--darkblue) !important;
}

.border_main {
  border: 1px solid var(--darkRose) !important;
  border-radius: var(--border);
}


.checkbox-container {
    display: inline-block;
    margin: 10px;
}

.checkbox-container input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.checkbox-container label {
    display: block;
    background-color: transparent;
    border: 1px solid var(--darkRose);
    border-radius: var(--border);
    padding: 10px 20px;
    color: white;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.checkbox-container input[type="checkbox"]:checked + label {
    background-color: var(--darkRose);
    border-color: var(--darkRose);
    color: white;
}

.navigation {
  border: solid 1px var(--darkblue);
  background-color: var(--darkblue);
  color: var(--white);
  position: relative;
  display: flex;                /* Kopf (Logo + Auswahl) fix, nur die Menueliste scrollt */
  flex-direction: column;
  overflow: hidden;             /* Nav-Offcanvas selbst scrollt nicht mehr */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.05)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='polyBright' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.85'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.55'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyBright2' x1='80%25' y1='20%25' x2='20%25' y2='80%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.75'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.45'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyLight' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.65'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.40'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyLight2' x1='70%25' y1='30%25' x2='30%25' y2='70%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.55'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.35'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyMid' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.45'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.28'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyDark' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23683347;stop-opacity:0.35'/%3E%3Cstop offset='100%25' style='stop-color:%230a0f24;stop-opacity:0.18'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='1000,0 1000,80 920,50' fill='url(%23polyBright)'/%3E%3Cpolygon points='1000,0 920,50 880,0' fill='url(%23polyBright2)'/%3E%3Cpolygon points='880,0 920,50 820,90' fill='url(%23polyBright)'/%3E%3Cpolygon points='880,0 820,90 780,0' fill='url(%23polyBright2)'/%3E%3Cpolygon points='780,0 820,90 720,60' fill='url(%23polyBright)'/%3E%3Cpolygon points='780,0 720,60 680,0' fill='url(%23polyLight)'/%3E%3Cpolygon points='680,0 720,60 620,100' fill='url(%23polyLight)'/%3E%3Cpolygon points='680,0 620,100 580,0' fill='url(%23polyLight2)'/%3E%3Cpolygon points='580,0 620,100 520,70' fill='url(%23polyLight)'/%3E%3Cpolygon points='580,0 520,70 480,0' fill='url(%23polyMid)'/%3E%3Cpolygon points='480,0 520,70 420,110' fill='url(%23polyMid)'/%3E%3Cpolygon points='480,0 420,110 380,0' fill='url(%23polyMid)'/%3E%3Cpolygon points='380,0 420,110 320,80' fill='url(%23polyMid)'/%3E%3Cpolygon points='380,0 320,80 280,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='280,0 320,80 220,120' fill='url(%23polyDark)'/%3E%3Cpolygon points='280,0 220,120 180,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='180,0 220,120 120,90' fill='url(%23polyDark)'/%3E%3Cpolygon points='180,0 120,90 80,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='80,0 120,90 0,60' fill='url(%23polyDark)'/%3E%3Cpolygon points='80,0 0,60 0,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,80 1000,180 920,140' fill='url(%23polyBright)'/%3E%3Cpolygon points='1000,80 920,140 920,50' fill='url(%23polyBright2)'/%3E%3Cpolygon points='920,50 920,140 820,90' fill='url(%23polyBright)'/%3E%3Cpolygon points='820,90 920,140 850,180' fill='url(%23polyBright2)'/%3E%3Cpolygon points='820,90 850,180 720,60' fill='url(%23polyBright)'/%3E%3Cpolygon points='720,60 850,180 750,160' fill='url(%23polyLight)'/%3E%3Cpolygon points='720,60 750,160 620,100' fill='url(%23polyLight)'/%3E%3Cpolygon points='620,100 750,160 650,200' fill='url(%23polyLight2)'/%3E%3Cpolygon points='1000,180 1000,280 930,250' fill='url(%23polyBright)'/%3E%3Cpolygon points='1000,180 930,250 920,140' fill='url(%23polyBright2)'/%3E%3Cpolygon points='920,140 930,250 850,180' fill='url(%23polyLight)'/%3E%3Cpolygon points='850,180 930,250 860,290' fill='url(%23polyLight)'/%3E%3Cpolygon points='850,180 860,290 750,160' fill='url(%23polyLight)'/%3E%3Cpolygon points='750,160 860,290 770,260' fill='url(%23polyLight2)'/%3E%3Cpolygon points='1000,280 1000,400 940,360' fill='url(%23polyLight)'/%3E%3Cpolygon points='1000,280 940,360 930,250' fill='url(%23polyLight)'/%3E%3Cpolygon points='930,250 940,360 860,290' fill='url(%23polyLight2)'/%3E%3Cpolygon points='1000,400 1000,520 950,480' fill='url(%23polyMid)'/%3E%3Cpolygon points='1000,400 950,480 940,360' fill='url(%23polyMid)'/%3E%3Cpolygon points='1000,520 1000,680 900,620' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,680 1000,850 880,780' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,850 1000,1000 880,780' fill='url(%23polyDark)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

ul.nav-style {
  list-style: none;
  padding-left: 0;
  flex: 1 1 auto;               /* nimmt die Resthoehe unter dem fixen Kopf -> nur diese Liste scrollt */
  min-height: 0;                /* erlaubt Schrumpfen unter Inhaltshoehe (Flex-Scroll-Pflicht) */
  overflow-y: auto;
  overflow-x: hidden;
  /* Schmaler Balken in Plattformfarbe statt versteckt (User-Wunsch 14.09.2026, wie jd-mail):
     bei kleiner Fensterhoehe sah niemand, dass unter dem Ausschnitt noch Menuepunkte liegen.
     Der Browser zeigt ihn nur, wenn die Liste wirklich ueberlaeuft. */
  /* Balken LINKS (User-Vorgabe 14.09.2026): direction: rtl legt den vertikalen Balken an die
     linke Kante des Scroll-Containers; die Kinder bekommen direction: ltr zurueck, damit Text,
     Icons und Chevrons unveraendert bleiben (physische Abstaende drehen sich nicht mit).
     🛑 Am Fensterrand geht ein blasser Balken unter (Gotcha #622) — deshalb VOLL deckende
        Akzentfarbe und eine sichtbare Rinne statt transparentem Track. */
  direction: rtl;
}

ul.nav-style > li {
  direction: ltr;
}

/* Breite und Farbe des Balkens: Chrome/Safari ueber ::-webkit-scrollbar (unten) — dort laesst
   sich die Breite frei waehlen. 🛑 Sobald `scrollbar-width`/`scrollbar-color` gesetzt sind,
   IGNORIERT Chrome die ::-webkit-Regeln und zeichnet seine eigene „thin"-Leiste (~13 px, zu
   breit). Deshalb bekommen diese Eigenschaften nur Browser ohne die Pseudo-Elemente (Firefox). */
@supports not selector(::-webkit-scrollbar) {
  ul.nav-style {
    scrollbar-width: thin;
    scrollbar-color: var(--darkRose) rgba(255, 255, 255, 0.06);
  }
}

ul.nav-style::-webkit-scrollbar {
  width: 5px;
}

ul.nav-style::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}

ul.nav-style::-webkit-scrollbar-thumb {
  background: rgba(136, 84, 93, 0.75);
  border-radius: 3px;
}

ul.nav-style::-webkit-scrollbar-thumb:hover {
  background: var(--darkRose);
}

/* Waagerecht scrollende Tab-Leisten (Abrechnungs- und Rechnungsfenster, Inline-Style
   `overflow-x: auto` am <ul class="nav nav-tabs">): schmaler, dezenter Balken wie in der
   Navigation. Ohne eigene Regel zeichnet Chrome seinen Standardbalken — gemessen 21 px, weil
   die globale ::-webkit-scrollbar-Regel nur `width` setzt (fuer waagerechte Balken zaehlt
   `height`) und der Seiten-Zoom 0,75 alles vergroessert. `scrollbar-width` darf hier NICHT am
   Element stehen, sonst ignoriert Chrome die Pseudo-Elemente wieder (Gotcha #625). */
@supports not selector(::-webkit-scrollbar) {
  .nav-tabs[style*="overflow-x"] {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.06);
  }
}

.nav-tabs[style*="overflow-x"]::-webkit-scrollbar {
  height: 5px;
}

.nav-tabs[style*="overflow-x"]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}

.nav-tabs[style*="overflow-x"]::-webkit-scrollbar-thumb {
  /* Neutral statt Akzentfarbe: ueber die ganze Leistenbreite sah der farbige Balken aus
     wie ein Fortschritts-/Ladebalken (User-Befund 14.09.2026). */
  background: rgba(255, 255, 255, 0.28);
  border-radius: 3px;
}

.nav-tabs[style*="overflow-x"]::-webkit-scrollbar-thumb:hover {
  background: var(--darkRose);
}

/* Der Tour-Knopf (.tour-trigger, 30 px) sitzt absolut im Modal-Kopf. Ist der Kopf nur so
   hoch wie seine Titelzeile, ragt der Knopf unten heraus und liegt auf dem Trennstrich
   (.border-span) — so gesehen im Abrechnungsfenster. Im Rechnungsfenster stimmt es, weil
   der Wrapper dort min-height: 40px traegt; hier als allgemeine Regel fuer jeden Kopf mit
   Tour-Knopf. Ohne Knopf greift sie nicht. */
.modal-header-wrapper:has(.tour-trigger) {
  min-height: 40px;
}

/* Scroll-Hinweis: Verlauf mit kleinem Pfeil am unteren Rand, solange unter dem sichtbaren
   Ausschnitt noch Menuepunkte liegen. Das Element ist das LETZTE <li> der Liste mit
   position: sticky; bottom: 0 — es klebt am unteren Rand des Scroll-Ausschnitts, ohne Platz
   zu brauchen (height: 0). Am Listenende und bei einer Liste, die gar nicht scrollt, blendet
   das JS in _navigation.tpl es ueber die Klassen ist-ende / nicht-scrollbar aus.
   Der Verlauf endet im Nav-Grund (--darkblue = #0a0f24). */
ul.nav-style > li.nav-scroll-hinweis {
  position: sticky;
  bottom: 0;
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.25s ease;
}

ul.nav-style > li.nav-scroll-hinweis::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.5rem;
  background: linear-gradient(to bottom, rgba(10, 15, 36, 0) 0%, rgba(10, 15, 36, 0.92) 100%);
}

ul.nav-style > li.nav-scroll-hinweis > i {
  position: absolute;
  left: 50%;
  bottom: 0.4rem;
  transform: translateX(-50%);
  color: var(--darkRose);
  font-size: 0.85rem;
  animation: navScrollWink 1.8s ease-in-out infinite;
}

ul.nav-style.ist-ende > li.nav-scroll-hinweis,
ul.nav-style.nicht-scrollbar > li.nav-scroll-hinweis {
  opacity: 0;
}

@keyframes navScrollWink {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 4px); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-scroll-hinweis > i { animation: none; }
}

.nav-list-style {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    transition: background-color 0.2s ease;
    cursor: pointer;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.nav-list-style:hover {
    background-color: var(--lightBlue); /* dunkelgrau */
    color: var(--white);
}

.has-submenu {
    position: relative;
}

/* Seitliches Flyout rechts neben dem Menuepunkt (wie vor dem Scroll-Umbau).
   Das Submenue haengt per JS am <body> (raus aus Nav-Overflow + Offcanvas-transform,
   die es sonst abschneiden) und wird an die rechte Kante des Menuepunkts gesetzt. */
.submenu {
    display: none;
    position: fixed;
    min-width: 320px;
    z-index: 999999;
    list-style: none;
    margin: 0;
    background-color: #0a0f24;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.submenu.is-open {
    display: block;
}

.small-arrow {
    font-size: 0.75rem;
    color: #ccc;
}

.nav-list-style-sub {
  padding: 0.5rem 0.5rem;
  color: #ccc;
  cursor: pointer;
}

.nav-list-style-sub:hover {
  background-color: var(--darkRose);
  color: var(--white);
  border-radius: var(--border);
}

.nav-list-style.stripe-right {
    position: relative;
}

.nav-list-style.stripe-right::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background-color: var(--darkRose);
}

.header-style {
  font-weight: 600;       
  font-size: 1.75rem;      
  letter-spacing: 0.5rem; 
  text-transform: uppercase;
  margin: 0px !important;
}

.subtext-style {
  font-weight: 300;       
  font-size: 0.75rem;      
  letter-spacing: 0.5rem; 
  text-transform: uppercase;
  margin-top: 0.5rem !important;
}

.card-adspace {
  background: color-mix(in srgb, var(--darkblue) 90%, transparent);
  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;
  width: 100%;
  margin-bottom: 1rem;
  padding: 1.2rem;
  border-radius: var(--border);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card-adspace:hover {
  background-color: var(--darkblue);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='polyBright' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.25'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.16'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyBright2' x1='80%25' y1='20%25' x2='20%25' y2='80%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.22'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.13'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyLight' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.19'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.12'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyLight2' x1='70%25' y1='30%25' x2='30%25' y2='70%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.16'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.10'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyMid' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2388545d;stop-opacity:0.13'/%3E%3Cstop offset='100%25' style='stop-color:%23683347;stop-opacity:0.08'/%3E%3C/linearGradient%3E%3ClinearGradient id='polyDark' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23683347;stop-opacity:0.10'/%3E%3Cstop offset='100%25' style='stop-color:%230a0f24;stop-opacity:0.05'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='1000,0 1000,80 920,50' fill='url(%23polyBright)'/%3E%3Cpolygon points='1000,0 920,50 880,0' fill='url(%23polyBright2)'/%3E%3Cpolygon points='880,0 920,50 820,90' fill='url(%23polyBright)'/%3E%3Cpolygon points='880,0 820,90 780,0' fill='url(%23polyBright2)'/%3E%3Cpolygon points='780,0 820,90 720,60' fill='url(%23polyBright)'/%3E%3Cpolygon points='780,0 720,60 680,0' fill='url(%23polyLight)'/%3E%3Cpolygon points='680,0 720,60 620,100' fill='url(%23polyLight)'/%3E%3Cpolygon points='680,0 620,100 580,0' fill='url(%23polyLight2)'/%3E%3Cpolygon points='580,0 620,100 520,70' fill='url(%23polyLight)'/%3E%3Cpolygon points='580,0 520,70 480,0' fill='url(%23polyMid)'/%3E%3Cpolygon points='480,0 520,70 420,110' fill='url(%23polyMid)'/%3E%3Cpolygon points='480,0 420,110 380,0' fill='url(%23polyMid)'/%3E%3Cpolygon points='380,0 420,110 320,80' fill='url(%23polyMid)'/%3E%3Cpolygon points='380,0 320,80 280,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='280,0 320,80 220,120' fill='url(%23polyDark)'/%3E%3Cpolygon points='280,0 220,120 180,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='180,0 220,120 120,90' fill='url(%23polyDark)'/%3E%3Cpolygon points='180,0 120,90 80,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='80,0 120,90 0,60' fill='url(%23polyDark)'/%3E%3Cpolygon points='80,0 0,60 0,0' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,80 1000,180 920,140' fill='url(%23polyBright)'/%3E%3Cpolygon points='1000,80 920,140 920,50' fill='url(%23polyBright2)'/%3E%3Cpolygon points='920,50 920,140 820,90' fill='url(%23polyBright)'/%3E%3Cpolygon points='820,90 920,140 850,180' fill='url(%23polyBright2)'/%3E%3Cpolygon points='820,90 850,180 720,60' fill='url(%23polyBright)'/%3E%3Cpolygon points='720,60 850,180 750,160' fill='url(%23polyLight)'/%3E%3Cpolygon points='720,60 750,160 620,100' fill='url(%23polyLight)'/%3E%3Cpolygon points='620,100 750,160 650,200' fill='url(%23polyLight2)'/%3E%3Cpolygon points='1000,180 1000,280 930,250' fill='url(%23polyBright)'/%3E%3Cpolygon points='1000,180 930,250 920,140' fill='url(%23polyBright2)'/%3E%3Cpolygon points='920,140 930,250 850,180' fill='url(%23polyLight)'/%3E%3Cpolygon points='850,180 930,250 860,290' fill='url(%23polyLight)'/%3E%3Cpolygon points='850,180 860,290 750,160' fill='url(%23polyLight)'/%3E%3Cpolygon points='750,160 860,290 770,260' fill='url(%23polyLight2)'/%3E%3Cpolygon points='1000,280 1000,400 940,360' fill='url(%23polyLight)'/%3E%3Cpolygon points='1000,280 940,360 930,250' fill='url(%23polyLight)'/%3E%3Cpolygon points='930,250 940,360 860,290' fill='url(%23polyLight2)'/%3E%3Cpolygon points='1000,400 1000,520 950,480' fill='url(%23polyMid)'/%3E%3Cpolygon points='1000,400 950,480 940,360' fill='url(%23polyMid)'/%3E%3Cpolygon points='1000,520 1000,680 900,620' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,680 1000,850 880,780' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,850 1000,1000 880,780' fill='url(%23polyDark)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 8px, rgba(0, 0, 0, 0.4) 0px 10px 18px -3px, rgba(0, 0, 0, 0.3) 0px -3px 0px inset;
}

.card-adspace-name {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  padding: 2.5rem 0 0.5rem 0;
}

.card-adspace-divider {
  border: none;
  border-top: 1px solid rgba(136, 84, 93, 0.4);
  margin: 0.6rem 0;
}

.card-adspace-stats {
  display: flex;
  justify-content: space-around;
  text-align: center;
  padding: 0.3rem 0;
}

.card-adspace-stat-item {
  flex: 1;
}

.card-adspace-stat-icon {
  font-size: 0.85rem;
  color: #fff;
  margin-bottom: 0.25rem;
}

.card-adspace-stat-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

.card-adspace-stat-label {
  font-size: 0.7rem;
  color: #fff;
  margin-top: 0.1rem;
}

.card-adspace-actions-icons {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  display: flex;
  gap: 0.35rem;
  align-items: center;
  z-index: 2;
}

.card-adspace-actions-icons .fav-form {
  display: flex;
  align-items: center;
}

.card-adspace .star-toggle {
  position: static;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 4px;
  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;
  transition: box-shadow 0.2s, background-color 0.2s;
  z-index: 1;
}

.card-adspace .star-toggle:hover {
  background-color: var(--darkRose);
  box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 8px, rgba(0, 0, 0, 0.4) 0px 10px 18px -3px, rgba(0, 0, 0, 0.3) 0px -3px 0px inset;
}

.card-adspace-actions {
  margin-top: 0.8rem;
}

.card-adspace-actions .btn_main {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.4rem 0;
}

.mobile-card-adspace-anfragen {
  padding: 0.5rem 0 0.25rem 0;
}

.mobile-card-adspace-anfragen .btn_main {
  width: 100%;
  font-size: 0.82rem;
  padding: 0.35rem 0;
}

.card-adspace-icon-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  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;
  transition: box-shadow 0.2s;
}

.card-adspace-icon-btn:hover {
  background-color: var(--darkRose);
  box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 8px, rgba(0, 0, 0, 0.4) 0px 10px 18px -3px, rgba(0, 0, 0, 0.3) 0px -3px 0px inset;
}

.fa-spin {
  animation: fa-spin 2s linear infinite;
}

@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.checkbox-wrapper-8 .tgl {
    display: none;
}

.checkbox-wrapper-8 .tgl,
.checkbox-wrapper-8 .tgl:after,
.checkbox-wrapper-8 .tgl:before,
.checkbox-wrapper-8 .tgl *,
.checkbox-wrapper-8 .tgl *:after,
.checkbox-wrapper-8 .tgl *:before,
.checkbox-wrapper-8 .tgl+.tgl-btn {
    box-sizing: border-box;
}

.checkbox-wrapper-8 .tgl::-moz-selection,
.checkbox-wrapper-8 .tgl:after::-moz-selection,
.checkbox-wrapper-8 .tgl:before::-moz-selection,
.checkbox-wrapper-8 .tgl *::-moz-selection,
.checkbox-wrapper-8 .tgl *:after::-moz-selection,
.checkbox-wrapper-8 .tgl *:before::-moz-selection,
.checkbox-wrapper-8 .tgl+.tgl-btn::-moz-selection,
.checkbox-wrapper-8 .tgl::selection,
.checkbox-wrapper-8 .tgl:after::selection,
.checkbox-wrapper-8 .tgl:before::selection,
.checkbox-wrapper-8 .tgl *::selection,
.checkbox-wrapper-8 .tgl *:after::selection,
.checkbox-wrapper-8 .tgl *:before::selection,
.checkbox-wrapper-8 .tgl+.tgl-btn::selection {
    background: none;
}

.checkbox-wrapper-8 .tgl+.tgl-btn {
    outline: 0;
    display: block;
    width: 4em;
    height: 2em;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox-wrapper-8 .tgl+.tgl-btn:after,
.checkbox-wrapper-8 .tgl+.tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
}

.checkbox-wrapper-8 .tgl+.tgl-btn:after {
    left: 0;
}

.checkbox-wrapper-8 .tgl+.tgl-btn:before {
    display: none;
}

.checkbox-wrapper-8 .tgl:checked+.tgl-btn:after {
    left: 50%;
}

.checkbox-wrapper-8 .tgl-skewed+.tgl-btn {
    overflow: hidden;
    transform: skew(-10deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all 0.2s ease;
    font-family: sans-serif;
    background: #888;
}

.checkbox-wrapper-8 .tgl-skewed+.tgl-btn:after,
.checkbox-wrapper-8 .tgl-skewed+.tgl-btn:before {
    transform: skew(10deg);
    display: inline-block;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
    position: absolute;
    line-height: 2em;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.checkbox-wrapper-8 .tgl-skewed+.tgl-btn:after {
    left: 100%;
    content: attr(data-tg-on);
}

.checkbox-wrapper-8 .tgl-skewed+.tgl-btn:before {
    left: 0;
    content: attr(data-tg-off);
}

.checkbox-wrapper-8 .tgl-skewed+.tgl-btn:active {
    background: var(--darkred);
}

.checkbox-wrapper-8 .tgl-skewed+.tgl-btn:active:before {
    left: -10%;
}

.checkbox-wrapper-8 .tgl-skewed:checked+.tgl-btn {
    background: var(--darkRose);
}

.checkbox-wrapper-8 .tgl-skewed:checked+.tgl-btn:before {
    left: -100%;
}

.checkbox-wrapper-8 .tgl-skewed:checked+.tgl-btn:after {
    left: 0;
}

.checkbox-wrapper-8 .tgl-skewed:checked+.tgl-btn:active:after {
    left: 10%;
}


.checkbox-wrapper-38 {
  --toggleWidth: 60px;
  --toggleHeight: 25px;
  --switchSize: 25px;
  --dotSize: 6px;

  width: var(--toggleWidth);
  height: var(--toggleHeight);
  position: relative;
}

.checkbox-wrapper-38 .toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  border: 1px solid var(--grey);
  background-color: var(--grey);
  background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  z-index: 5;
  -webkit-transition: background-color 0.2s, border-color 0.2s;
}
.checkbox-wrapper-38 .toggle-label:after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  width: var(--switchSize);
  height: var(--switchSize);
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-color: #fff;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(bottom, rgba(230, 233, 239, 0.31) 0%, rgba(255, 255, 255, 0.31) 100%);
  background-image: linear-gradient(to top, rgba(230, 233, 239, 0.31) 0%, rgba(255, 255, 255, 0.31) 100%);
  -webkit-transition: left 0.2s;
}
.checkbox-wrapper-38 .toggle-label:before {
  content: "";
  display: block;
  position: absolute;
  top: calc((var(--switchSize)/2) - 4px);
  left: calc((var(--switchSize)/2) - 4px);
  width: var(--dotSize);
  height: var(--dotSize);
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: #d4d6db;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  z-index: 10;
  -webkit-transition: left 0.2s;
}

.checkbox-wrapper-38 .toggle-input {
  margin-left: 10px;
  margin-top: 5px;
}
.checkbox-wrapper-38 .toggle-input:checked + .toggle-label {
  border: 1px solid var(--darkRose);
  text-align: left;
  background-color: var(--darkRose);
}
.checkbox-wrapper-38 .toggle-input:checked + .toggle-label:after {
  left: calc(var(--toggleWidth) - var(--switchSize));
}
.checkbox-wrapper-38 .toggle-input:checked + .toggle-label:before {
  left: calc(var(--toggleWidth) - var(--switchSize) + 10px);
}

/* ============================================
   Remember Me Checkbox (Login)
   ============================================ */
.checkbox-wrapper-44 input[type="checkbox"] {
    display: none;
    visibility: hidden;
}

.checkbox-wrapper-44 *,
.checkbox-wrapper-44 *::before,
.checkbox-wrapper-44 *::after {
    box-sizing: border-box;
}

.checkbox-wrapper-44 .toggleButton {
    cursor: pointer;
    display: block;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    transition: transform 0.14s ease;
}

.checkbox-wrapper-44 .toggleButton:active {
    transform: rotateX(30deg);
}

/* Unchecked: darkred border */
.checkbox-wrapper-44 .toggleButton input + div {
    border: 3px solid var(--darkred);
    border-radius: 50%;
    position: relative;
    width: 44px;
    height: 44px;
    transition: border-color 0.3s ease;
}

/* Unchecked: darkred stroke */
.checkbox-wrapper-44 .toggleButton input + div svg {
    fill: none;
    stroke-width: 3.6;
    stroke: var(--darkred);
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 44px;
    height: 44px;
    display: block;
    position: absolute;
    left: -3px;
    top: -3px;
    right: -3px;
    bottom: -3px;
    z-index: 1;
    stroke-dashoffset: 124.6;
    stroke-dasharray: 0 162.6 133 29.6;
    transition: all 0.4s ease 0s, stroke 0.3s ease;
}

/* X-Symbol (unchecked): darkred, zentriert */
.checkbox-wrapper-44 .toggleButton input + div:before,
.checkbox-wrapper-44 .toggleButton input + div:after {
    content: "";
    width: 3px;
    height: 16px;
    background: var(--darkred);
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -1.5px;
    margin-top: -8px;
    border-radius: 5px;
    transform-origin: center center;
    transition: background 0.3s ease;
}

.checkbox-wrapper-44 .toggleButton input + div:before {
    opacity: 0;
    transform: rotate(45deg);
    animation: bounceInBefore-44 0.3s linear forwards 0.3s;
}

.checkbox-wrapper-44 .toggleButton input + div:after {
    opacity: 0;
    transform: rotate(-45deg);
    animation: bounceInAfter-44 0.3s linear forwards 0.3s;
}

/* Checked: lightRose color border */
.checkbox-wrapper-44 .toggleButton input:checked + div {
    border-color: var(--lightRose);
}

/* Checked: lightRose color stroke */
.checkbox-wrapper-44 .toggleButton input:checked + div svg {
    stroke: var(--lightRose);
    stroke-dashoffset: 162.6;
    stroke-dasharray: 0 162.6 28 134.6;
    transition: all 0.4s ease 0.2s, stroke 0.3s ease;
}

.checkbox-wrapper-44 .toggleButton input:checked + div:before {
    opacity: 0;
    transform: rotate(45deg);
    animation: bounceInBeforeDont-44 0.3s linear forwards 0s;
}

.checkbox-wrapper-44 .toggleButton input:checked + div:after {
    opacity: 0;
    transform: rotate(-45deg);
    animation: bounceInAfterDont-44 0.3s linear forwards 0s;
}

@keyframes bounceInBefore-44 {
    0% { opacity: 0; transform: scale(0.3) rotate(45deg); }
    50% { opacity: 0.9; transform: scale(1.1) rotate(45deg); }
    80% { opacity: 1; transform: scale(0.89) rotate(45deg); }
    100% { opacity: 1; transform: scale(1) rotate(45deg); }
}

@keyframes bounceInAfter-44 {
    0% { opacity: 0; transform: scale(0.3) rotate(-45deg); }
    50% { opacity: 0.9; transform: scale(1.1) rotate(-45deg); }
    80% { opacity: 1; transform: scale(0.89) rotate(-45deg); }
    100% { opacity: 1; transform: scale(1) rotate(-45deg); }
}

@keyframes bounceInBeforeDont-44 {
    0% { opacity: 1; transform: scale(1) rotate(45deg); }
    100% { opacity: 0; transform: scale(0.3) rotate(45deg); }
}

@keyframes bounceInAfterDont-44 {
    0% { opacity: 1; transform: scale(1) rotate(-45deg); }
    100% { opacity: 0; transform: scale(0.3) rotate(-45deg); }
}

.remember-me-wrapper {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.remember-me-wrapper span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    cursor: pointer;
}

/* Animierte Checkbox (Stil 23) */
.checkbox-wrapper-23 *,
.checkbox-wrapper-23 *:after,
.checkbox-wrapper-23 *:before {
    box-sizing: border-box;
}

.checkbox-wrapper-23 input {
    position: absolute;
    opacity: 0;
}

.checkbox-wrapper-23 input:checked + label svg path {
    stroke-dashoffset: 0;
}

.checkbox-wrapper-23 input:focus + label {
    transform: scale(1.03);
}

.checkbox-wrapper-23 input + label {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    width: var(--size, 28px);
    height: var(--size, 28px);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.03);
}

.checkbox-wrapper-23 input + label:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

.checkbox-wrapper-23 input:checked + label {
    border-color: var(--darkRose);
    background: var(--darkRose);
}

.checkbox-wrapper-23 input + label:active {
    transform: scale(1.05);
    border-radius: 10px;
}

.checkbox-wrapper-23 input + label svg {
    pointer-events: none;
    width: 100%;
    height: 100%;
    padding: 15%;
}

.checkbox-wrapper-23 input + label svg path {
    fill: none;
    stroke: #fff;
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 101;
    transition: all 250ms cubic-bezier(1, 0, 0.37, 0.91);
}

/* ============================================
   Low-Poly Hintergrund mit schwebenden Icons
   ============================================ */

.poly-background-container {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Low-Poly SVG Dreiecke */
.poly-triangles {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Glow-Effekte - deaktiviert für Partner-Portal */
.poly-glow-top,
.poly-glow-bottom,
.poly-glow-topleft {
    display: none;
}

.poly-vignette {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: radial-gradient(ellipse at center, transparent 20%, rgba(10, 15, 36, 0.6) 100%);
    pointer-events: none;
}

/* Halftone Dots Pattern - Dreieck links unten */
.halftone-dots {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: radial-gradient(circle, #88545d 5px, transparent 5px);
    background-size: 28px 28px;
    opacity: 0.25;
    pointer-events: none;
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, transparent 18%, rgba(0,0,0,1) 25%),
        linear-gradient(to top right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 25%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 55%);
    mask-image:
        linear-gradient(to bottom, transparent 0%, transparent 18%, rgba(0,0,0,1) 25%),
        linear-gradient(to top right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 25%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 55%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* Schwebende Kampagnen-Icons */
.floating-campaign {
    position: absolute;
    transform: rotate(var(--rotation, 0deg));
    animation: float-campaign var(--duration, 20s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    pointer-events: none;
}

@keyframes float-campaign {
    0%, 100% {
        transform: rotate(var(--rotation, 0deg)) translateY(0) translateX(0);
    }
    25% {
        transform: rotate(var(--rotation, 0deg)) translateY(-15px) translateX(8px);
    }
    50% {
        transform: rotate(var(--rotation, 0deg)) translateY(-8px) translateX(-5px);
    }
    75% {
        transform: rotate(var(--rotation, 0deg)) translateY(-20px) translateX(3px);
    }
}

/* Icon-Klassen mit Glow-Effekt */
.campaign-icon {
    opacity: 0.65;
    filter: drop-shadow(0 0 12px rgba(136, 84, 93, 0.5));
}

.campaign-icon-small {
    opacity: 0.5;
    filter: drop-shadow(0 0 8px rgba(136, 84, 93, 0.4));
}

.campaign-icon-tiny {
    opacity: 0.35;
    filter: drop-shadow(0 0 6px rgba(136, 84, 93, 0.3));
}

/* Modal-Icons (für Modals und Navigation) */
.modal-campaign {
    position: absolute;
    transform: rotate(var(--rotation, 0deg));
    animation: float-campaign var(--duration, 20s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    z-index: 10;
    pointer-events: none;
}

/* Modal-Hintergrund mit Polygons und Halftone */
.modal-background-container {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.modal-poly-triangles {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.modal-halftone-dots {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: radial-gradient(circle, #88545d 4px, transparent 4px);
    background-size: 24px 24px;
    opacity: 0.20;
    pointer-events: none;
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, transparent 15%, rgba(0,0,0,1) 25%),
        linear-gradient(to top right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 20%, rgba(0,0,0,0.3) 35%, rgba(0,0,0,0) 50%);
    mask-image:
        linear-gradient(to bottom, transparent 0%, transparent 15%, rgba(0,0,0,1) 25%),
        linear-gradient(to top right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 20%, rgba(0,0,0,0.3) 35%, rgba(0,0,0,0) 50%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* ===================================================================
   DASHBOARD
   =================================================================== */

.dash-container {
    display: flex;
    flex-direction: column;

    /* 🛑 `100vh` waere hier falsch, sobald der Desktop-Container gezoomt ist:
       der Zoom skaliert vh mit, das Dashboard endete dann deutlich ueber dem
       unteren Bildschirmrand (auf jd-mail gemessen: 214px Leerraum, 05.09.2026).
       `--vh-voll` traegt die zoom-korrigierte Fensterhoehe und wird oben an
       .div_light_desktop gesetzt; der Fallback 100vh greift ueberall sonst —
       auf Mobile und unterhalb von 992px, wo nicht gezoomt wird. */
    height: calc(var(--vh-voll, 100vh) - 9.5rem);
    max-height: calc(var(--vh-voll, 100vh) - 9.5rem);
    overflow: hidden;
    gap: 0.6rem;
    font-size: 0.9rem;
    padding: 0 1rem;
}

.dash-kpi-row {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

.dash-kpi-card {
    flex: 1;
    background: color-mix(in srgb, var(--darkblue) 75%, transparent);
    border-radius: 3px;
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background-color 0.2s;
}

.dash-kpi-card:hover {
    background-color: var(--darkblue);
}

.dash-kpi-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--white);
    background: color-mix(in srgb, var(--darkRose) 50%, var(--darkblue));
    flex-shrink: 0;
}

.dash-kpi-value {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--white);
    line-height: 1.2;
}

.dash-kpi-label {
    font-size: 0.75rem;
    color: #999;
    margin-top: 0.1rem;
}

.dash-chart-row {
    display: flex;
    gap: 0.6rem;
    flex: 1;
    min-height: 0;
}

.dash-chart-box {
    flex: 1;
    background: color-mix(in srgb, var(--darkblue) 75%, transparent);
    border-radius: 3px;
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: background-color 0.2s;
}

.dash-chart-box:hover {
    background-color: var(--darkblue);
}

.dash-chart-box h3 {
    font-size: 0.85rem;
    color: var(--white);
    margin-bottom: 0.5rem;
    font-weight: 500;
    flex-shrink: 0;
}

.dash-chart-canvas {
    position: relative;
    flex: 1;
    min-height: 0;
}

.dash-bottom-row {
    display: flex;
    gap: 0.6rem;
    flex: 1;
    min-height: 0;
}

.dash-list-box {
    flex: 1;
    background: color-mix(in srgb, var(--darkblue) 75%, transparent);
    border-radius: 3px;
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    transition: background-color 0.2s;
}

.dash-list-box:hover {
    background-color: var(--darkblue);
}

.dash-list-box h3 {
    font-size: 0.85rem;
    color: var(--white);
    margin-bottom: 0.5rem;
    font-weight: 500;
    flex-shrink: 0;
}

.dash-list-scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-top: 0.5rem;
}

.dash-list-item {
    padding: 0.5rem 0.6rem;
    border-radius: 3px;
    margin-bottom: 0.25rem;
    background: rgba(136, 84, 93, 0.15);
    color: var(--white);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s;
    cursor: pointer;
}

.dash-list-item:hover {
    background: rgba(136, 84, 93, 0.3);
}

.dash-notif-delete {
    width: 1.8rem;
    height: 1.8rem;
    border: solid 1px var(--darkred);
    border-radius: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    flex-shrink: 0;
    color: var(--white);
    background-color: transparent;
    margin-left: 0.4rem;
    transition: all 0.2s;
}

.dash-notif-delete:hover {
    border: solid 1px var(--lightred);
    background-color: var(--lightred);
    color: #fff;
}

.dash-list-item-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-list-item-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.dash-badge-pending {
    background: color-mix(in srgb, var(--darkyellow) 40%, transparent);
    color: #e0d080;
    border: 1px solid var(--darkyellow);
}

.dash-badge-accepted {
    background: color-mix(in srgb, var(--darkgreen) 40%, transparent);
    color: #80e0d0;
    border: 1px solid var(--darkgreen);
}

.dash-empty {
    color: #666;
    font-size: 0.8rem;
    text-align: center;
    padding: 1rem 0;
}

.dash-req-btn {
    width: 1.6rem;
    height: 1.6rem;
    border: none;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.65rem;
    color: #fff;
    transition: opacity 0.2s;
}

.dash-req-btn:hover {
    opacity: 0.8;
}

.dash-req-accept {
    background: color-mix(in srgb, var(--middleRose) 60%, var(--darkblue));
}

.dash-req-delete {
    background: color-mix(in srgb, var(--darkRose) 40%, var(--darkblue));
}

.dash-req-info {
    background: color-mix(in srgb, var(--middleRose) 35%, var(--darkblue));
}

/* Dashboard Carousel */
.dash-carousel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.dash-carousel-arrow {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #999;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.65rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.dash-carousel-arrow:hover {
    color: #fff;
    border-color: var(--darkRose);
    background: rgba(136, 84, 93, 0.2);
}

.dash-carousel-title {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-carousel-slides {
    flex: 1;
    min-height: 0;
    position: relative;
}

.dash-carousel-slide {
    display: none;
    flex-direction: column;
    height: 100%;
}

.dash-carousel-slide.active {
    display: flex;
}

.dash-carousel-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.4rem;
}

.dash-carousel-tabs button {
    background: none;
    border: none;
    color: #666;
    font-size: 0.9rem;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.dash-carousel-tabs button.active {
    color: #fff;
    border-bottom-color: var(--darkRose);
}

.dash-carousel-tabs button:hover {
    color: #ccc;
}

.dash-tab-content {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.dash-tab-content.active {
    display: block;
}

.dash-tab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
}

.dash-tab-field {
    display: flex;
    flex-direction: column;
    padding: 0.3rem 0.5rem;
    background: rgba(136, 84, 93, 0.1);
    border-radius: 3px;
}

.dash-tab-field-label {
    color: #666;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dash-tab-field-value {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
}

.dash-wm-pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: #666;
    font-size: 0.85rem;
}

.dash-wm-pending i {
    font-size: 1.5rem;
    color: #88545d;
    opacity: 0.6;
}

.dash-wm-pending span {
    color: #999;
    font-size: 0.75rem;
    font-weight: 500;
}

.dash-report-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}

.dash-report-name {
    background: rgba(136, 84, 93, 0.1);
    border-radius: 3px;
    padding: 0.3rem 0.5rem;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 400;
}

input.dash-report-value {
    background: rgba(136, 84, 93, 0.1);
    border: 1px solid rgba(136, 84, 93, 0.3);
    border-radius: 3px;
    padding: 0.3rem 0.5rem;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: right;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

input.dash-report-value:focus {
    border-color: var(--darkRose);
    background: rgba(136, 84, 93, 0.2);
}

input.dash-report-value::-webkit-inner-spin-button,
input.dash-report-value::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.dash-report-value {
    -moz-appearance: textfield;
}

.dash-report-save {
    margin-top: 0.4rem;
    text-align: center;
}

.dash-report-save button {
    background: rgba(136, 84, 93, 0.15);
    border: none;
    border-radius: 3px;
    color: #999;
    font-size: 0.75rem;
    padding: 0.35rem 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
}

.dash-report-save button:hover {
    background: rgba(136, 84, 93, 0.3);
    color: #fff;
}

.dash-report-send {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.3rem 0;
}

.dash-report-url,
.dash-report-email {
    background: rgba(136, 84, 93, 0.1);
    border: 1px solid rgba(136, 84, 93, 0.3);
    border-radius: 3px;
    padding: 0.5rem 0.6rem;
    color: #fff;
    font-size: 0.8rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.dash-report-url {
    cursor: default;
    color: #ccc;
}

.dash-report-email:focus {
    border-color: var(--darkRose);
    background: rgba(136, 84, 93, 0.2);
}

.dash-report-email::placeholder {
    color: #666;
}

.dash-pub-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    background: rgba(136, 84, 93, 0.1);
    border-radius: 3px;
    margin-bottom: 0.25rem;
}

/* --- Freigaben Tab --- */

.dash-freigabe-all {
    text-align: center;
    padding: 0.4rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(136, 84, 93, 0.2);
}

.dash-freigabe-all button {
    background: none;
    border: none;
    color: #999;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.2s;
}

.dash-freigabe-all button:hover {
    color: #fff;
}

.dash-freigabe-header {
    margin-bottom: 0.3rem;
}

.dash-freigabe-header > div {
    background: rgba(136, 84, 93, 0.15);
    border-radius: 3px;
    padding: 0.4rem 0.6rem;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
}

.dash-freigabe-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
}

.dash-freigabe-row > div {
    background: rgba(136, 84, 93, 0.08);
    border: 1px solid rgba(136, 84, 93, 0.2);
    border-radius: 3px;
    padding: 0.3rem 0.5rem;
    color: #999;
    font-size: 0.75rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-freigabe-row > div:first-child {
    color: #ccc;
    font-weight: 400;
}

.dash-freigabe-row > div.dash-freigabe-btn {
    cursor: pointer;
    border-color: rgba(136, 84, 93, 0.4);
    transition: all 0.2s;
}

.dash-freigabe-btn button {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 0;
}

.dash-freigabe-row > div.dash-freigabe-btn:hover {
    background: rgba(136, 84, 93, 0.2);
    color: #fff;
}

.dash-freigabe-status {
    color: #88545d !important;
    font-weight: 500 !important;
}

.dash-freigabe-status.dash-freigabe-rejected {
    color: #ff6b6b !important;
}

.dash-freigabe-block {
    background: rgba(136, 84, 93, 0.1);
    border: 1px solid rgba(136, 84, 93, 0.3);
    border-radius: 3px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.dash-freigabe-block .dash-freigabe-header {
    color: #fff;
    font-weight: 500;
    font-size: 0.75rem;
    margin-bottom: 0.4rem;
}

.dash-freigabe-textarea {
    width: 100%;
    min-height: 4rem;
    max-height: 8rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(136, 84, 93, 0.3);
    border-radius: 3px;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.4rem;
    resize: vertical;
    margin-bottom: 0.4rem;
}

.dash-freigabe-textarea:focus {
    outline: none;
    border-color: #88545d;
}

.dash-freigabe-textarea::placeholder {
    color: #666;
}

/* Dynamische-Inhalte-Auswahl im Freigabecenter — bewusst wie .dash-freigabe-textarea
   gestylt (gleiche Farben/Border/Schriftgroesse), damit der kompakte Block einheitlich
   bleibt; das grosse .form-select aus dem Testmail-Modal waere hier zu wuchtig. */
.dash-freigabe-dynlabel {
    color: #999;
    font-size: 0.65rem;
    margin-bottom: 0.2rem;
}

.dash-freigabe-dynamic {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(136, 84, 93, 0.3);
    border-radius: 3px;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.3rem;
    margin-bottom: 0.4rem;
}

.dash-freigabe-dynamic:focus {
    outline: none;
    border-color: #88545d;
}

.dash-freigabe-dynamic option:checked {
    background: #88545d;
    color: #fff;
}

.dash-freigabe-buttons {
    display: flex;
    gap: 0.3rem;
}

.dash-fg-btn {
    flex: 1;
    padding: 0.35rem 0.5rem;
    border: none;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.dash-fg-testmail {
    background: rgba(136, 84, 93, 0.3);
    color: #fff;
}

.dash-fg-testmail:hover {
    background: rgba(136, 84, 93, 0.5);
}

.dash-fg-approve {
    background: rgba(0, 180, 130, 0.3);
    color: #fff;
}

.dash-fg-approve:hover {
    background: rgba(0, 180, 130, 0.5);
}

.dash-fg-reject {
    background: rgba(255, 107, 107, 0.3);
    color: #fff;
}

.dash-fg-reject:hover {
    background: rgba(255, 107, 107, 0.5);
}

.dash-freigabe-badges {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.dash-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 3px;
    font-size: 0.6rem;
    cursor: default;
}

.dash-badge-ok {
    background: rgba(0, 180, 130, 0.2);
    border: 1px solid rgba(0, 180, 130, 0.5);
    color: #00b482;
}

.dash-badge-korr {
    background: rgba(220, 180, 50, 0.2);
    border: 1px solid rgba(220, 180, 50, 0.5);
    color: #dcb432;
}

.dash-badge-rej {
    background: rgba(220, 70, 70, 0.2);
    border: 1px solid rgba(220, 70, 70, 0.5);
    color: #dc4646;
}

.dash-badge-pend {
    background: rgba(150, 150, 150, 0.15);
    border: 1px solid rgba(150, 150, 150, 0.3);
    color: #888;
}

/* --- WM Kontroller Tab --- */

.dash-wmk-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
}

.dash-wmk-row > div {
    background: rgba(136, 84, 93, 0.08);
    border: 1px solid rgba(136, 84, 93, 0.2);
    border-radius: 3px;
    padding: 0.3rem 0.5rem;
    color: #ccc;
    font-size: 0.75rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-wmk-select {
    width: 100%;
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 0.75rem;
    text-align: center;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.dash-wmk-input {
    width: 100%;
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 0.75rem;
    text-align: center;
    outline: none;
}

.dash-wmk-select option {
    background: #1a1220;
    color: #ccc;
}

.dash-wmk-save {
    text-align: center;
    padding: 0.4rem 0;
    margin-top: 0.3rem;
    border-top: 1px solid rgba(136, 84, 93, 0.2);
}

.dash-wmk-save button {
    background: none;
    border: none;
    color: #999;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.2s;
}

.dash-wmk-save button:hover {
    color: #fff;
}

.dash-pub-item span:first-child {
    color: #ccc;
    font-size: 0.75rem;
}

.dash-pub-item span:last-child {
    color: #999;
    font-size: 0.7rem;
}

/* Favoriten Tab */
.dash-fav-name {
    text-align: center;
    padding: 0.3rem 0.5rem;
    color: #ccc;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.dash-fav-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
}

.dash-fav-row > div {
    background: rgba(136, 84, 93, 0.08);
    border: 1px solid rgba(136, 84, 93, 0.2);
    border-radius: 3px;
    padding: 0.3rem 0.5rem;
    color: #ccc;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.dash-fav-row input {
    width: 100%;
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 0.75rem;
    text-align: center;
    outline: none;
}

.dash-fav-icon {
    color: #88545d;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.dash-fav-anfragen {
    text-align: center;
    padding: 0.4rem 0;
    border-top: 1px solid rgba(136, 84, 93, 0.2);
    margin-top: 0.3rem;
    color: #999;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.2s;
}

.dash-fav-anfragen:hover {
    color: #fff;
}

/* ===================================================================
   DASHBOARD MOBILE STYLES
   =================================================================== */

@media (max-width: 991px) {
    .dash-container {
        height: auto;
        min-height: calc(100vh - 8rem);
        overflow-y: auto;
        padding-bottom: 2rem;
    }

    .dash-chart-row {
        flex-direction: column;
    }

    .dash-chart-box {
        min-height: 18rem;
    }

    .dash-chart-box[style*="flex: 0.4"],
    .dash-chart-box[style*="flex: 0.6"] {
        flex: 1 !important;
    }
}

@media (max-width: 768px) {
    .dash-container {
        gap: 0.5rem;
        font-size: 0.85rem;
    }

    /* KPI Cards: 2x2 Grid */
    .dash-kpi-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .dash-kpi-card {
        padding: 0.6rem 0.75rem;
        gap: 0.5rem;
    }

    .dash-kpi-icon {
        width: 2rem;
        height: 2rem;
        font-size: 0.85rem;
    }

    .dash-kpi-value {
        font-size: 1rem;
    }

    .dash-kpi-label {
        font-size: 0.65rem;
    }

    /* Chart Row */
    .dash-chart-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .dash-chart-box {
        padding: 0.6rem 0.75rem;
        min-height: 16rem;
    }

    .dash-chart-box h3 {
        font-size: 0.8rem;
    }

    /* Bottom Row */
    .dash-bottom-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .dash-list-box {
        padding: 0.6rem 0.75rem;
        min-height: 12rem;
        max-height: 16rem;
    }

    .dash-list-box h3 {
        font-size: 0.8rem;
    }

    .dash-list-item {
        padding: 0.4rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Carousel */
    .dash-carousel-header {
        padding: 0 0 0.4rem 0;
    }

    .dash-carousel-title {
        font-size: 0.85rem;
    }

    .dash-carousel-arrow {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.6rem;
    }

    /* Carousel Tabs - horizontal scrollbar */
    .dash-carousel-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 0.2rem;
        padding-bottom: 0.3rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .dash-carousel-tabs::-webkit-scrollbar {
        height: 3px;
    }

    .dash-carousel-tabs::-webkit-scrollbar-thumb {
        background: rgba(136, 84, 93, 0.4);
        border-radius: 3px;
    }

    .dash-carousel-tabs button {
        flex-shrink: 0;
        padding: 0.3rem 0.5rem;
        font-size: 0.65rem;
        white-space: nowrap;
    }

    /* Tab Content */
    .dash-tab-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.3rem;
    }

    .dash-tab-field {
        padding: 0.3rem 0.4rem;
    }

    .dash-tab-field-label {
        font-size: 0.6rem;
    }

    .dash-tab-field-value {
        font-size: 0.8rem;
    }

    /* Publisher Tab */
    .dash-pub-item {
        padding: 0.4rem;
    }

    .dash-pub-item span:first-child {
        font-size: 0.7rem;
    }

    .dash-pub-item span:last-child {
        font-size: 0.65rem;
    }

    /* Freigabe Tab */
    .dash-freigabe-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .dash-freigabe-row > div {
        font-size: 0.7rem;
        padding: 0.35rem 0.5rem;
    }

    .dash-freigabe-block {
        padding: 0.4rem;
    }

    .dash-freigabe-block .dash-freigabe-header {
        font-size: 0.7rem;
    }

    .dash-freigabe-textarea {
        font-size: 0.65rem;
        min-height: 3rem;
    }

    .dash-freigabe-buttons {
        flex-direction: column;
        gap: 0.3rem;
    }

    .dash-fg-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.65rem;
        width: 100%;
        justify-content: center;
    }

    /* WM Kontroller */
    .dash-wmk-row {
        grid-template-columns: 1fr;
    }

    .dash-wmk-row > div {
        font-size: 0.7rem;
    }

    /* Report Tab */
    .dash-report-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .dash-report-name {
        font-size: 0.7rem;
    }

    input.dash-report-value {
        font-size: 0.75rem;
    }

    /* Badge Sizes */
    .dash-badge {
        font-size: 0.55rem;
        padding: 0.15rem 0.3rem;
    }
}

@media (max-width: 575px) {
    .dash-container {
        gap: 0.4rem;
        font-size: 0.8rem;
    }

    /* KPI Cards: 2x2 noch kompakter */
    .dash-kpi-row {
        gap: 0.4rem;
    }

    .dash-kpi-card {
        padding: 0.5rem 0.6rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    .dash-kpi-icon {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }

    .dash-kpi-value {
        font-size: 0.95rem;
    }

    .dash-kpi-label {
        font-size: 0.6rem;
    }

    /* Charts kompakter */
    .dash-chart-box {
        min-height: 14rem;
    }

    /* Pie Chart kleiner */
    .dash-chart-canvas div[style*="width: 14.3rem"] {
        width: 10rem !important;
        height: 10rem !important;
    }

    .dash-chart-canvas div[style*="width: 9.1rem"] {
        width: 6rem !important;
        height: 6rem !important;
    }

    .dash-chart-canvas div[style*="font-size: 1.3rem"] {
        font-size: 1rem !important;
    }

    /* Tabs noch kleiner */
    .dash-carousel-tabs button {
        padding: 0.25rem 0.4rem;
        font-size: 0.6rem;
    }

    /* Tab Grid: 1 Spalte */
    .dash-tab-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Mobile / Desktop Visibility Classes
   ======================================== */

/* Desktop View - Shown on screens >= 992px */
.desktop_view {
    display: block;
}

/* Mobile View - Hidden on screens >= 992px */
.mobile_view {
    display: none;
}

/* Mobile Breakpoint (< 992px) */
@media (max-width: 991px) {
    .desktop_view {
        display: none !important;
    }

    .mobile_view {
        display: block !important;
    }

    /* Hide desktop navigation on mobile */
    .navigation {
        display: none !important;
    }

    /* Adjust content for mobile navigation */
    .content {
        margin-left: 0 !important;
        padding-bottom: 80px; /* Space for bottom nav */
    }

    /* Notification position adjustment for mobile */
    #notification-container {
        bottom: 80px; /* Above bottom nav */
        right: 10px;
        left: 10px;
    }

    .notification {
        min-width: auto;
        max-width: 100%;
    }
}

/* Touch target sizing for mobile */
@media (max-width: 768px) {
    .nav-mobile-item,
    .nav-mobile-menu-item {
        min-height: 44px;
    }
}

/* ========================================
   Mobile Header & Container Styles
   ======================================== */

@media (max-width: 991px) {
    /* Haupt-Container fuer Mobile = der EINZIGE Scroll-Bereich (iOS-sicher) */
    .div_light_mobile {
        padding: 0;
        padding-top: 3.5rem; /* Platz fuer Fixed Header */
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); /* Bottom-Nav + Home-Indicator */
        height: 100vh;                     /* Fallback aelteres iOS */
        height: 100dvh;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; /* iOS Momentum-Scroll */
        overscroll-behavior: none;         /* kein Pull-to-refresh / Bounce */
        scrollbar-width: none;             /* Scrollbalken ausblenden (Scroll bleibt) */
    }
    .div_light_mobile::-webkit-scrollbar { display: none; }

    /* Fixed Header - AdSpace/Client Auswahl */
    .choose-adspace {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 9998;
        background-color: var(--darkblue);
        border-bottom: 1px solid var(--darkRose);
        padding: 0.5rem 1rem;
    }

    .choose-adspace .form-select {
        font-size: 0.9rem;
        padding: 0.6rem;
        background-color: rgba(0, 0, 0, 0.3);
        border: 1px transparent;
        color: #fff;
        max-width: 400px;
        margin: 0 auto;
    }

    .choose-adspace .form-select:focus {
        border-color: #f5a623;
        outline: none;
        box-shadow: none;
    }

    /* Datumsbereich-Filter auf Mobile anpassen */
    .btn_date_filter {
        width: 2.5rem;
        height: 2.5rem;
    }

    .btn_date_filter .icon_basic {
        margin-top: 8px !important;
        margin-left: 9px !important;
    }
}

/* Kleinere Bildschirme */
@media (max-width: 575px) {
    .div_light_mobile {
        padding-top: 3rem;
        padding-bottom: calc(4rem + env(safe-area-inset-bottom));
        /* height/overflow werden aus dem max-width:991px-Block geerbt (Scroll-Container bleibt) */
    }

    .choose-adspace {
        padding: 0.4rem 0.75rem;
    }

    .choose-adspace .form-select {
        font-size: 0.85rem;
        padding: 0.5rem;
    }
}

/* Landscape auf kleinen Geräten */
@media (orientation: landscape) and (max-height: 500px) {
    .div_light_mobile {
        padding-top: 2.5rem;
        padding-bottom: calc(3rem + env(safe-area-inset-bottom));
        /* height/overflow aus max-width:991px-Block geerbt */
    }

    .choose-adspace {
        padding: 0.3rem 1rem;
    }
}

/* Switch Button - Modern Toggle Design */
.switch-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  margin: auto auto 0 auto;
  height: 28px;
  position: relative;
  flex-direction: column;
}

/* Zentral gesperrter Provider (jdm_mail._provider_status.status = 'blocked'):
   Schalter ausgegraut + per disabled nicht bedienbar. opacity liegt NUR auf dem
   Schalter, damit das Label voll deckend weiss bleibt (Muster der bestehenden
   .disabled-toggle-Regel). Der Tooltip sitzt am Wrapper (.col), nicht am Input —
   ein disabled-Input feuert keine Maus-Events. */
.provider-blocked {
  cursor: not-allowed;
}

.provider-blocked .switch-outer {
  opacity: 0.5;
}

.switch-button + label {
  display: block !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  text-align: center;
  font-size: 0.85rem !important;
}

/* Variante mit Auswahlliste statt Schalter (Sprachwahl im Profil).
   Traegt bewusst .switch-button mit, damit sie im mobilen Zeilen-Raster des
   Einstellungen-Reiters bleibt (styles-mobile.css) — die feste Hoehe von 28px
   passt fuer ein select aber nicht. */
.switch-button.switch-button-select {
  height: auto;
  justify-content: flex-end;
}

.switch-button.switch-button-select .form-select {
  width: auto;
  min-width: 9rem;
  padding: 0.35rem 2rem 0.35rem 0.75rem;
  font-size: 0.85rem;
}

.switch-button .switch-outer {
  height: 100%;
  background: #0a0f24;
  width: 58px;
  border-radius: 165px;
  -webkit-box-shadow: inset 0px 5px 10px 0px #050812, 0px 3px 6px -2px #1a2540;
  box-shadow: inset 0px 5px 10px 0px #050812, 0px 3px 6px -2px #1a2540;
  border: 1px solid #1a2540;
  padding: 3px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.switch-button .switch-outer input[type="checkbox"] {
  opacity: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 10;
  margin: 0;
  pointer-events: auto;
}

.switch-button .switch-outer .button-toggle {
  height: 21px;
  width: 21px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#1a2a4a),
    to(#050812)
  );
  background: -o-linear-gradient(#1a2a4a, #050812);
  background: linear-gradient(#1a2a4a, #050812);
  border-radius: 100%;
  -webkit-box-shadow: inset 0px 5px 4px 0px #1a3050, 0px 4px 15px 0px #000000;
  box-shadow: inset 0px 5px 4px 0px #1a3050, 0px 4px 15px 0px #000000;
  position: relative;
  z-index: 2;
  -webkit-transition: left 0.3s ease-in;
  -o-transition: left 0.3s ease-in;
  transition: left 0.3s ease-in;
  left: 0;
}

.switch-button .switch-outer input[type="checkbox"]:checked + .button .button-toggle {
  left: 58%;
}

.switch-button .switch-outer input[type="checkbox"]:checked + .button .button-indicator {
  -webkit-animation: indicator 1s forwards;
  animation: indicator 1s forwards;
}

.switch-button .switch-outer .button {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: justify;
  justify-content: space-between;
  pointer-events: none;
}

.switch-button .switch-outer .button-indicator {
  height: 12px;
  width: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid #eb5543;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  right: 5px;
  position: relative;
}

@-webkit-keyframes indicator {
  30% {
    opacity: 0;
  }
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    border: 3px solid #00cbb5;
    left: -68%;
  }
}

@keyframes indicator {
  30% {
    opacity: 0;
  }
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    border: 3px solid #00cbb5;
    left: -68%;
  }
}

/* From Uiverse.io by Donewenfu - White Loader (62.5% smaller) */
.loader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22.5px;
  height: 15px;
  margin: 0 auto;
}

.jimu-primary-loading {
  position: relative;
  width: 5.1px;
  height: 12px;
  background: #ffffff;
  -webkit-animation: loading-keys-app-loading 0.8s infinite ease-in-out;
  animation: loading-keys-app-loading 0.8s infinite ease-in-out;
  -webkit-animation-delay: 0.16s !important;
  animation-delay: 0.16s !important;
}

.jimu-primary-loading:before,
.jimu-primary-loading:after {
  position: absolute;
  top: 0;
  content: '';
  width: 5.1px;
  height: 12px;
  background: #ffffff;
  -webkit-animation: loading-keys-app-loading 0.8s infinite ease-in-out;
  animation: loading-keys-app-loading 0.8s infinite ease-in-out;
}

.jimu-primary-loading:before {
  left: -7.497px;
  -webkit-animation-delay: 0s !important;
  animation-delay: 0s !important;
}

.jimu-primary-loading:after {
  left: 7.497px;
  -webkit-animation-delay: 0.32s !important;
  animation-delay: 0.32s !important;
}


@-webkit-keyframes loading-keys-app-loading {

  0%,
  80%,
  100% {
    opacity: .75;
    box-shadow: 0 0 #ffffff;
  }

  40% {
    opacity: 1;
    box-shadow: 0 -6px #ffffff;
  }
}

@keyframes loading-keys-app-loading {

  0%,
  80%,
  100% {
    opacity: .75;
    box-shadow: 0 0 #ffffff;
  }

  40% {
    opacity: 1;
    box-shadow: 0 -6px #ffffff;
  }
}

/* ========================================
   TinyMCE Editor Styling
   ======================================== */
.tox-tinymce {
  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;
  border-radius: var(--border) !important;
}

.tox .tox-editor-container {
  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;
}

/* TinyMCE-Dialoge (Source Code Editor, etc.) über Bootstrap Modals anzeigen */
.tox .tox-dialog-wrap {
  z-index: 10000 !important;
}

.tox .tox-dialog {
  z-index: 10001 !important;
}

.tox-tinymce-aux {
  z-index: 10000 !important;
}

.tox .tox-dialog-wrap__backdrop {
  z-index: 9999 !important;
}

/* ========================================
   Header Toolbar (Icons + Datumsfilter)
   ======================================== */
/* 🛑 Titel und Toolbar sind zwei unabhaengige Ebenen — der Titel ist ueber die volle
   Breite zentriert, die Toolbar sitzt absolut rechts oben. Bis 05.09.2026 wussten die
   beiden nichts voneinander: der Titel waechst mit letter-spacing nach beiden Seiten,
   die Toolbar nach links, und unterhalb von ca. 1500px standen die Icons auf dem Wort
   DASHBOARD ([[Gotchas#309]]).

   🛑 Der Titel bleibt bewusst SEITENMITTIG (User-Vorgabe 05.09.2026). Ein Flex-Layout,
      das ihn in die Restspalte links neben die Toolbar setzt, ist damit ausgeschlossen —
      es hatte das Ueberlappen zwar behoben, den Titel aber sichtbar nach links gerueckt.

   Stattdessen haelt der Titel per `max-width` den Platz frei, den die Toolbar rechts
   belegt (gespiegelt auch links, damit die Mitte die Mitte bleibt). Er kann die Toolbar
   damit nicht mehr erreichen, ohne selbst aus der Mitte zu rutschen. */
#header-block {
    position: relative;
}

/* Der Titel-Block bleibt im Fluss und damit ueber die volle Breite zentriert.
   Die Grenze haelt beidseitig den Toolbar-Platz frei: 366px ist die breiteste
   Toolbar-Reihe (der Datumsfilter, gemessen 05.09.2026), 1rem der Abstand zum Rand,
   1.5rem die Luft zur Toolbar. Verdoppelt, weil der Freiraum links gespiegelt wird. */
#header-block > .d-flex.flex-column {
    max-width: calc(100% - 2 * (366px + 2.5rem));
    margin-left: auto;
    margin-right: auto;
}

.header-toolbar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    max-width: 366px;
    z-index: 10;
}

/* 🛑 Zweizeilig auf JEDER Aufloesung (User-Vorgabe 05.09.2026): Icons oben, Zeitraum
   darunter. Bewusst ohne Media-Query — eine breitenabhaengige Variante gab es kurz, sie
   liess den Zeitraum auf grossen Schirmen neben den Icons stehen und war damit nicht,
   was gewollt war. Der Umbruch ist gesetzt, nicht erlaubt: `flex-wrap: wrap` allein
   reicht ohnehin nicht, weil eine absolut positionierte Box keinen Platzmangel kennt
   und nie von selbst umbricht ([[Gotchas#518]]). Die volle Breite der beiden Gruppen
   erzwingt ihn und haelt sie rechtsbuendig untereinander.

   Die `max-width` oben gehoert dazu: ohne sie bliebe die Toolbar trotz Umbruch so breit
   wie ihr einzeiliger Inhalt (555px statt 366px) und wuerde den Titel weiter ueberlappen. */
.header-toolbar-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.header-toolbar-icons,
.header-toolbar-date {
    width: 100%;
    justify-content: flex-end;
}

.header-toolbar-icons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem;
}

.header-icon-wrapper {
    position: relative;
    cursor: pointer;
}

/* Groesse kommt aus `--header-kachel` weiter unten (gemeinsam mit den Datums-Knoepfen),
   hier steht nur noch das Aussehen. */
.header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border);
    background-color: transparent;
    color: var(--white);
    font-size: 1.1rem;
    cursor: pointer;
    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;
}

.header-icon-btn:hover {
    background-color: var(--darkRose);
}

.header-icon-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--lightred);
    color: var(--white);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 0 4px;
    pointer-events: none;
}

.header-toolbar-date {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem;
}

.header-date-input {
    width: 150px;
    padding: 0.5rem 0.75rem;
    background: var(--darkblue);
    border: 1px transparent !important;
    border-radius: var(--border) !important;
    color: var(--white) !important;
    font-size: 0.85rem;
    text-align: center;
    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;
}

.header-date-input:focus {
    outline: none;
    border-color: var(--main);
}

.header-date-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
    cursor: pointer;
}

/* 🛑 Die Kachelgroesse steht bewusst EINMAL und gilt fuer beide Reihen. Auf jd-mail
   waren die Icons oben 36px und die Datums-Knoepfe darunter 42px breit — die Reihen
   endeten zwar bei derselben Koordinate, wirkten aber deutlich versetzt (User-Befund
   05.09.2026). Ursache dort: zwei Regeln gleicher Spezifitaet in derselben
   Media-Query (`.header-date-btn` 36px und `.btn_add,.btn_delete,.btn_nav` 42px),
   bei Gleichstand gewinnt die spaetere.

   Die Regeln unterscheiden sich je Plattform — genau deshalb steht die Groesse hier
   fest: der Selektor haengt an ZWEI Klassen und sticht die Fremdregeln unabhaengig
   von ihrer Reihenfolge, und die Variable haelt Icons und Datums-Knoepfe
   zwangslaeufig gleich ([[Gotchas#365]] · [[Gotchas#474]]). */
#header-block {
    /* Hoehe fuer die zweizeilige Toolbar reservieren. Die haengt absolut im Block
       und traegt deshalb NICHTS zu dessen Hoehe bei — ohne diese Zeile endet der
       Block ueber der zweiten Reihe, und der Zeitraum liegt auf dem ersten Widget
       darunter. Gemessen am 05.09.2026 (jd-leads Dashboard): 14.2 px Ueberlappung
       mit .dash-top3-tabs.
       Die Rechnung ist die der Toolbar selbst: 1rem Abstand nach oben, zwei
       Kachelreihen, 0.75rem Luft dazwischen — plus 0.85rem Abstand nach UNTEN,
       damit der Zeitraum nicht auf der Widget-Kopfzeile klebt. Ohne diesen Rest
       endet der Block exakt an der Toolbar-Unterkante (gemessen 88.5 gegen
       88.4 px): rechnerisch richtig, optisch gedraengt. Bei jd-mail ist der
       Block ohnehin 122 CSS-px hoch, dort greift die Mindesthoehe gar nicht —
       diese Zeile holt jd-leads auf denselben Wert. */
    min-height: calc(2 * var(--header-kachel, 40px) + 2.6rem);
    --header-kachel: 40px;
}

.header-toolbar .header-date-btn,
.header-toolbar .header-icon-btn {
    width: var(--header-kachel);
    height: var(--header-kachel);
    flex: 0 0 var(--header-kachel);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Die Datumsfelder tragen dieselbe Hoehe, sonst steht die untere Reihe schief. */
.header-toolbar .header-date-input {
    height: var(--header-kachel);
}

.header-date-btn i {
    margin: 0;
    font-size: 0.9rem;
}

/* Day-Select für Von/Bis in getDynamic */
.day-select-col {
    flex: 1;
    min-width: 0;
}

.day-select-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.day-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Von/Bis als Vorsatz LINKS IM Feld — für die Alters- und PLZ-Spanne in getDynamic.
   Der .day-select-wrapper oben stellt die Beschriftung als eigene Zeile ÜBER das
   Feld. Bei den Wochentagen bleibt das so (Regeln unverändert), bei Alter und PLZ
   störte es: die Zusatzzeile machte die Zeile höher als eine Bedingung ohne
   Wertfeld (Geburtstag) und schob die Bedingungs-Auswahl links aus der Mitte.
   Sitzt die Beschriftung IM Feld, bleibt die Zeilenhöhe die eines einzelnen
   Feldes und alle Bedingungs-Zeilen sind gleich hoch. */
.range-input-wrapper {
    position: relative;
}

.range-input-wrapper .range-label {
    position: absolute;
    top: 50%;
    left: 1rem; /* linksbündig mit 1rem Einzug (User-Vorgabe 26.07.2026) */
    transform: translateY(-50%);
    padding-right: 0.4rem;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6); /* wie .day-label */
    font-size: 0.75rem;
    font-weight: 500;
    pointer-events: none; /* Klick landet im Feld, nicht auf dem Vorsatz */
}

/* Platz für den Vorsatz, sonst klebt der Wert daran. Rechnung: 1rem Einzug +
   ~1.9rem Textbreite ("Von"/"Bis" bei 0.75rem) + 0.4rem Innenabstand bis zum
   Trenner = ~3.3rem, plus ~0.5rem Luft.
   !important nötig, weil .input-basic sein Padding ebenfalls mit !important setzt. */
.range-input-wrapper .input-basic {
    padding-left: 3.8rem !important;
}

/* Blacklisten-Tab (Kampagne-Detail): Pills im 4-Spalten-Layout auf Desktop.
   Die Breite stand vorher inline (width:calc(25% - 0.375rem) !important) im
   Markup -> jetzt klassenbasiert, damit Mobile sie auf 1 Item pro Zeile
   ueberschreiben kann (styles-mobile.css).
   !important noetig: das Item traegt auch .input-dynamic { width:100% !important }
   (styles.css:563) -> ohne !important gewann 100% -> 1 Spalte gestapelt statt 4
   (Bug nur beim Bearbeiten, Erstellen hatte inline-!important). Mobile bleibt
   1-spaltig: [id^="blacklists"] .bl-update-item (styles-mobile.css) hat
   width:100%!important UND hoehere Spezifitaet (0,2,0 vs 0,1,0). */
.bl-update-item {
    width: calc(25% - 0.375rem) !important;
}

/* ===========================================================================
   SUB-ID's-TAB (Kampagnen-Modal, [id^="subids"]) — 2026-07-08
   Pro Publisher werden alle Sub-Id-Wert-Felder (%%SUB_ID%%, %%SUB_ID_2%% ...)
   gerendert. Bei vielen Sub-Ids (11+) wurde die Liste sehr lang. Jetzt:
   max. 5 Felder sichtbar, dann scrollbar (Desktop UND Mobil). Jedes Feld
   trägt links ein Label "Sub Id N" (JS-seitig als .seg-subid-label), damit
   klar ist, welcher Sub-Id-Parameter gemeint ist.
   =========================================================================== */
/* Scroll-Container um die Wert-Felder: 5 Zeilen sichtbar (je ~2.5rem Input +
   0.5rem margin-bottom ≈ 3rem/Zeile → 5 × 3rem = 15rem), Rest scrollt.
   (User 09.09.2026: von 3 auf 5 angehoben.)

   🛑 Diese Hoehe und die Konstante SICHTBAR im JS (_getNewsletter.tpl, Sub-Ids-
      Bereich) beschreiben DIESELBE Zahl an zwei Orten: die Hoehe blendet aus, die
      Konstante entscheidet, ob der "Alle anzeigen"-Umschalter ueberhaupt erscheint.
      Laufen sie auseinander, gibt es entweder einen Umschalter ohne verstecktes
      Feld oder verstecke Felder ohne Umschalter. Immer beide anfassen. */
.seg-subid-rows {
    max-height: 15.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.4rem;
}
/* Aufgeklappt: Hoehenbegrenzung faellt weg, alle Sub-Ids stehen untereinander.
   Der Umschalter darunter erscheint nur, wenn es mehr Felder als sichtbare gibt. */
.seg-subid-rows.seg-subid-offen {
    max-height: none;
    overflow-y: visible;
}
.seg-subid-toggle {
    /* mittig unter den Wert-Feldern, nicht linksbuendig am Label */
    display: flex;
    width: fit-content;
    margin: 0 auto 1rem auto;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0;
    min-height: auto;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
    cursor: pointer;
}
.seg-subid-toggle:hover {
    color: var(--white, #ffffff);
}
.seg-subid-toggle > i {
    font-size: 0.6rem;
}
/* Alle-auswaehlen/abwaehlen-Umschalter unter Multi-Selects (Versendungen-Modal:
   Verteiler + vorgeschlagene Localparts). Gleicher dezenter Stil wie der
   Sub-Ids-Umschalter; Padding gross genug als Touch-Ziel, keine Mobile-Extra-Regel. */
.select-all-toggle {
    display: flex;
    width: fit-content;
    margin: 0.35rem auto 0 auto;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    min-height: auto;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
    cursor: pointer;
}
.select-all-toggle:hover {
    color: var(--white, #ffffff);
}
.select-all-toggle > i {
    font-size: 0.65rem;
}
/* Label vor jedem Wert-Feld: kompakt, feste Breite, damit die Inputs bündig
   untereinander stehen. */
.seg-subid-label {
    flex: 0 0 auto;
    min-width: 4.5rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
    white-space: nowrap;
    text-align: left;
}

/* Sub-ID-Pruefung (09.09.2026) — Publisher, die noch den automatisch erzeugten
   Standardwert tragen, obwohl das Werbemittel Sub-ID-Parameter setzt. Solche Links
   laufen ins Leere; der Fehler war bisher nur durch Hinsehen zu finden.

   Der Warnkopf steht ueber den Wert-Feldern, weil der Scroll-Bereich nur drei
   Zeilen zeigt (.seg-subid-rows) — eine Markierung allein an der Zeile waere bei
   vielen Sub-Ids unsichtbar. Sichtbarkeit steuert das JS (display flex/none). */
.seg-subid-warn-kopf {
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;      /* User 09.09.2026: 0.5rem war zu eng am ersten Feld */
    padding: 0.3rem 0.5rem;
    border: solid 1px var(--lightred);
    border-radius: var(--border);
    background-color: rgba(235, 85, 67, 0.12);
    color: var(--lightred);
    font-size: 0.78rem;
    line-height: 1.3;
}
/* Bemaengeltes Wert-Feld. Nur der Rahmen — der Wert bleibt normal lesbar, er wird
   ja gleich ueberschrieben. */
.seg-subid-warn-input {
    border: solid 1px var(--lightred) !important;
}
/* .seg-subid-warn-zeichen entfaellt: das Zeichen rechts neben jedem Feld war eine
   Wiederholung des Warnkopfs darueber (User 09.09.2026). Der rote Rahmen am Feld
   bleibt die Markierung. */

/* ─────────────────────────────────────────────────────────────────────────
   PROFIL → Reiter EINSTELLUNGEN (#notificationSettingsToolUser), DESKTOP

   Die Schalter standen als eine Reihe nebeneinander, Bedienelement oben und
   Beschriftung darunter. Kuenftig untereinander, je Zeile zweispaltig:
   Beschriftung links, Bedienelement rechts (User-Wunsch 30.08.2026).

   🛑 Das ist bewusst KEINE Aenderung an der globalen `.switch-button`-Regel
      (oben, ~Z. 4820): die Huelle steckt plattformweit in Modalen und Kopf-
      zeilen — dort bleibt es bei Spalte + fester Hoehe von 28px.

   🛑 Die MOBILE Fassung dieses Reiters ist bereits ein Zeilen-Raster und steht
      in css/styles-mobile.css (~Z. 5876) unter `@media (max-width: 991px)`.
      Dieser Block klammert sich deshalb in eine `min-width`-Bedingung — die
      beiden beruehren sich nicht, und das `!important` von drueben bleibt fuer
      diesen Bereich ohne Wirkung. Wer hier etwas aendert, prueft beide.

   🛑 Die Grenze ist 991.02px und nicht 992px: bei gebrochener Fensterbreite
      (Browser-Zoom, Windows-Skalierung 125 %) liegt die Breite auch mal bei
      991.5px. Mit 992px griffe dort KEINE der beiden Fassungen und das alte
      Bild — Schalter oben, Beschriftung darunter — blitzte auf.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 991.02px) {

    /* Aus der Reihe wird eine Spalte ueber die volle Breite des Reiters.
       Kein `max-width`: der Reiter hat reichlich Platz, und eine schmale Saeule
       in der Mitte liess ihn gedraengt wirken (User-Wunsch 30.08.2026). */
    #userSettings #notificationSettingsToolUser .col.d-flex {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Eine Zeile ohne eigene Flaeche — nur eine feine Linie trennt sie von der
       naechsten. Ueber die volle Breite braucht das Auge diese Fuehrung, um
       Beschriftung und weit rechts stehendes Bedienelement zusammenzuhalten.
       `row-reverse` statt umsortiertem Markup: die Reihenfolge Bedienelement →
       Beschriftung bleibt im Quelltext, damit `label[for]` und das JavaScript
       weiter unten unberuehrt bleiben. */
    #userSettings #notificationSettingsToolUser .switch-button {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        background: none;
        border-radius: 0;
        padding: 1.05rem 0.5rem;
        width: 100%;
        height: auto;   /* die globalen 28px aufheben, Hoehe kommt vom padding */
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    #userSettings #notificationSettingsToolUser .switch-button:last-child {
        border-bottom: 0;
    }

    /* 🛑 Der Schalter-Koerper nutzt `height: 100%` — in der Zeile gaebe es
       keine Bezugshoehe mehr und er kollabierte. Darum feste Masse, wie es
       die mobile Fassung aus demselben Grund tut. */
    #userSettings #notificationSettingsToolUser .switch-button .switch-outer {
        height: 28px;
        width: 58px;
        flex: 0 0 58px;
    }

    #userSettings #notificationSettingsToolUser .switch-button label {
        margin: 0;
        color: var(--white);
        font-size: 1rem;
        text-align: left;
        flex: 1 1 auto;
        cursor: pointer;
    }

    /* Sprachwahl: Auswahlliste statt Schalter. Sie erbt das Zeilen-Raster,
       braucht aber eigene Masse — der Schalter-Block darueber legt 58x28px
       fest, was fuer ein select nicht passt.

       🛑 `.form-select` traegt `width: 100% !important` (~Z. 1310). Ohne feste
          `flex-basis` zoege sich die Liste ueber die halbe Zeile und stuende
          nicht mehr buendig unter den Schaltern. */
    #userSettings #notificationSettingsToolUser .switch-button.switch-button-select .form-select {
        flex: 0 0 12rem;
        align-self: center;
        width: 12rem !important;
        min-width: 0;
        max-width: none;
        margin: 0;
    }
}

/* Erklaerender Zusatz an einer Einstellungs-Beschriftung (Profil → Einstellungen,
   Sprachwahl): kleiner und gedaempft, damit er die Beschriftung nicht ueberlagert.

   🛑 Bewusst OHNE Media-Klammer: der Hinweis wird auf jedem Geraet gebraucht.
      Die Groesse ist in em angegeben und folgt damit der Beschriftung, die mobil
      kleiner gesetzt ist. */
/* Einstellungs-Zeile ausserhalb des Profils (Quick Segment im Kampagnen-Fenster).
   Dasselbe Raster wie Profil → Einstellungen: Beschriftung links, Bedienelement
   rechts, eine feine Linie als Fuehrung dazwischen. Die Profil-Regel oben haengt
   an #userSettings und ist damit dort nicht zu gebrauchen — deshalb eine eigene
   Klasse statt eines aufgebohrten Selektors, die auch anderswo verwendbar ist.

   `row-reverse` statt umsortiertem Markup: Im Quelltext steht das Bedienelement
   vor der Beschriftung, damit `label[for]` weiter direkt davor liegt. */
.einstellung-zeile {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 0.5rem;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.einstellung-zeile:last-child {
    border-bottom: 0;
}

.einstellung-zeile > label {
    margin: 0;
    color: var(--white);
    font-size: 1rem;
    text-align: left;
    flex: 1 1 50%;
    min-width: 0;
    cursor: pointer;
}

/* 🛑 `.form-select` traegt `width: 100% !important` — ohne feste flex-basis
      zoege die Liste ueber die halbe Zeile und stuende nicht mehr buendig. */
/* 🛑 `flex: 0 0 50%` — NICHT `1 1 50%`. Mit `flex-grow: 1` waechst die
   Auswahlliste ueber ihre Haelfte hinaus, sobald der GEWAEHLTE Optionstext
   breiter ist: auf live stand "Nicht geoeffnet (Kampagne)" darin und zog die
   Zeile auf 808 statt 605 Pixel, waehrend die Beschriftung entsprechend
   schrumpfte. Auf beta fiel das nicht auf, weil dort ein kuerzerer Wert
   ausgewaehlt war — der Fehler haengt am Inhalt, nicht am Stylesheet, und ist
   deshalb nur an einem echten Datensatz sichtbar.
   `width` allein genuegt nicht: an einem Flex-Item schlaegt die flex-basis die
   Breitenangabe ([[Gotchas#452]]). */
.einstellung-zeile > .form-select {
    flex: 0 0 50%;
    width: 50% !important;
    min-width: 0;
    max-width: none;
    margin: 0;
    align-self: center;
}

/* Auf schmalen Geraeten untereinander statt nebeneinander — 14rem Auswahlliste
   und eine Beschriftung passen dort nicht in eine Zeile. */
@media (max-width: 991px) {
    .einstellung-zeile {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }

    .einstellung-zeile > .form-select {
        flex: 0 0 auto;
        width: 100% !important;
    }

    .einstellung-zeile > label {
        text-align: left;
        font-size: 0.9rem;
    }
}


.einstellung-hinweis {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.82em;
    font-weight: 400;
    opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────────────────
   .switch-button-zeile — Schalter als Zeile: Beschriftung links, Schalter
   rechts, feine Trennlinie dazwischen. Dasselbe Raster wie der Profil-Reiter
   „Einstellungen" (`#userSettings #notificationSettingsToolUser`, weiter oben
   in dieser Datei) und wie der Werbeflaechen-Reiter in jd-mail.

   Erste Verwendung hier: Reiter „Einstellungen" im Kampagnen-Modal
   (User-Wunsch 31.08.2026 — vorher standen die beiden Schalter nebeneinander).

   🛑 Bewusst KEINE Aenderung an der globalen `.switch-button`-Regel: die Huelle
      steckt plattformweit in Modalen und Kopfzeilen, dort bleibt es bei Spalte
      und fester Hoehe von 28px.

   🛑 `row-reverse` statt umsortiertem Markup — so bleibt die Reihenfolge
      Schalter → Beschriftung im Quelltext und damit `label[for]` sowie jedes
      daran haengende JavaScript unberuehrt.

   🛑 Portiert aus jd-mail: Das Ziel-Stylesheet kannte die Klasse nicht, ohne
      sie faellt die Zeile in die Standard-Darstellung zurueck ([[Gotchas#365]]).
   ───────────────────────────────────────────────────────────────────────── */
.switch-button.switch-button-zeile {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    height: auto;   /* die globalen 28px aufheben, Hoehe kommt vom padding */
    margin: 0;
    padding: 1.05rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.switch-button.switch-button-zeile:last-child,
.switch-button.switch-button-zeile.einstellung-zeile-ohne-linie {
    border-bottom: 0;
}

/* Die rechte Spalte: feste Breite, das Bedienelement sitzt darin mittig.

   🛑 `.switch-outer` traegt das gesamte Aussehen (Hintergrund, Rundung,
      Innenschatten) und MUSS 58x28px bleiben — die Spaltenbreite gehoert
      deshalb auf diese Huelle, nicht auf den Schalter selbst. */
.switch-button.switch-button-zeile .einstellung-zeile-spalte {
    flex: 0 0 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 🛑 Feste Hoehe ist Pflicht: `.switch-outer .button` rechnet mit
   `height: 100%` und kollabierte in einer Zeile ohne Bezugshoehe. */
.switch-button.switch-button-zeile .switch-outer {
    height: 28px;
    width: 58px;
    flex: 0 0 58px;
}

/* Beschriftung nimmt den Rest der Zeile. `min-width: 0` laesst langen Text
   umbrechen, statt die Schalter-Spalte zu schieben. */
.switch-button.switch-button-zeile .switch-button-zeile-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.switch-button.switch-button-zeile .switch-button-zeile-text label {
    margin: 0;
    font-size: 1rem;
    text-align: left;
    color: var(--white);
    cursor: pointer;
    white-space: normal;
}

/* ─────────────────────────────────────────────────────────────────────────
   SUCHBARE AUSWAHLFELDER — Kampagnen in den Bedingungen dynamischer Inhalte

   Nachbau eines Auswahlfelds, weil ein echtes `<select>` kein Suchfeld tragen
   kann — der aufgeklappte Bereich gehoert dem Betriebssystem. Uebernommen aus
   jd-mail (dort fuer Triggermails gebaut, User-Wunsch 10.09.2026).

   🛑 Farben ueber Variablen, nie als Hexwert ([[UI CSS-Variablen]]). `--main`
      ist in jd-partner das Orange — anders als in jd-mail, wo dieselbe Variable
      tuerkis ist ([[Gotchas#365]]). Deshalb steht hier kein --main: die Auswahl
      soll in beiden Plattformen neutral aussehen.
   ───────────────────────────────────────────────────────────────────────── */
.nl-trigger {
    /* Sieht aus wie das `.form-select`, das es ersetzt: dieselbe Klasse liegt
       im Markup zusaetzlich an. Hier nur, was ein `<div>` dafuer braucht. */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 🛑 `position: absolute` mit `z-index`: Das Panel liegt UEBER den folgenden
   Bedingungszeilen. Im Fluss wuerde es sie nach unten schieben und das Fenster
   bei jedem Aufklappen umbrechen. Der Bezug ist `.nl-auswahl` (dort steht
   `position: relative` im Markup). */
.nl-panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 20;
    padding: 0.5rem;
    background-color: var(--darkblue);
    /* 🛑 `--darkRose`, nicht `--darkgreen`: gleiche Begruendung wie bei .gruppe-abgesetzt.
       Das Tuerkis stammt aus der jd-mail-Vorlage und ist hier ein Fremdkoerper. */
    border: solid 1px var(--darkRose);
    border-radius: var(--border);
}

.nl-panel .nl-suche {
    width: 100%;
    margin-bottom: 0.45rem;
    padding: 0.3rem 0.55rem;
    color: var(--white);
    background-color: rgba(10, 15, 36, 0.85);
    border: solid 1px var(--darkRose);
    border-radius: var(--border);
    font-size: 0.95rem;
    outline: none;
}

/* Gedeckelt, damit lange Kampagnenlisten das Fenster nicht sprengen. */
.nl-panel .nl-liste {
    max-height: 260px;
    overflow-y: auto;
}

.nl-panel .nl-option {
    padding: 0.35rem 0.5rem;
    color: var(--white);
    border-radius: var(--border);
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nl-panel .nl-option:hover {
    background-color: var(--darkRose);
}

.nl-panel .nl-leer {
    padding: 0.35rem 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   BEDINGUNGS-GRUPPE (dynamische Inhalte) — uebernommen aus jd-mail, wo sie
   fuer die Triggermail-Bedingungen gebaut wurde (User-Wunsch 10.09.2026:
   "exakt wie bei den Triggermails").

   🛑 Farben ueber Variablen, nie als Hexwert. `--main` ist hier orange, in
      jd-mail tuerkis — die Regeln unten funktionieren mit beidem
      ([[Gotchas#365]]).
   ───────────────────────────────────────────────────────────────────────── */

/* Der Rahmen um Zeitraum und Bedingungen. Die Ueberschrift sitzt IM Rahmen,
   damit die Zuordnung eindeutig bleibt, wenn per Knopf Bedingungen dazukommen. */
/* 🛑 Farbe ueber `--darkRose` — die Akzentfarbe von jd-partner. Zwei Anlaeufe waren hier
   falsch, beide aus demselben Grund: Ich habe die Farbe aus der jd-mail-Vorlage
   uebernommen, statt sie aus der Umgebung DIESER Plattform abzuleiten.
     1. `var(--main)`: liefert hier Orange, weil `styles-mobile.css` die Variable global
        ueberschreibt (ohne Media-Query, und sie wird nach dieser Datei geladen).
     2. `var(--darkgreen)` bzw. `--main_mail`: das Tuerkis aus jd-mail — in jd-partner
        ein Fremdkoerper.
   Richtig ist, was die Umgebung fuehrt: der aktive Reiter derselben Maske nutzt
   `--darkRose`, ebenso die Trennlinien ueber und unter der Gruppe. */
.gruppe-abgesetzt {
    background-color: var(--darkblue);
    border: solid 1px var(--darkRose);
    border-radius: var(--border);
    padding: 0.5rem 1rem 0.75rem;
    margin-top: 1rem;
}

.gruppe-abgesetzt .einstellung-zeile:last-child {
    border-bottom: 0;
}

/* 🛑 Die Beschriftung steht als echtes Element im Template, NICHT als `content:`
   in einem ::before — CSS-Text laeuft nicht durch die Uebersetzung und waere
   damit nie zweisprachig. */
.gruppen-titel {
    display: block;
    margin-bottom: 0.35rem;
    /* 🛑 `--darkRose` wie der Rahmen — Begruendung oben bei .gruppe-abgesetzt.
       Weder `--main` (dort Orange) noch das jd-mail-Tuerkis. */
    color: var(--darkRose);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Der Zeitraum-Block bringt eigene Aussenabstaende mit; innerhalb der Gruppe
   verdoppeln die sich mit deren Innenabstand. */
.trigger-bedingungen-gruppe > .row:first-child {
    margin-top: 0 !important;
}

/* Von/Bis nebeneinander, beide gleich breit. */
.days-range-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0;
}

.days-range-row > .day-select-col {
    flex: 1;
    min-width: 0;
    padding: 0;
}