:root {
  /* === Background & Colors === */
  --bg: rgba(0, 71, 76, 0.2);
  --bg-green: rgba(0, 71, 76, 1);
  --bg-lightblack: rgba(0, 0, 0, 0.8);

  --main: #00cbb5 !important;
  --main_leads: #366fcc !important;
  --main_partner: #88545d !important;
  --main_connect: #00cbb3af !important;

  --white: #fff !important;
  --grey: #2f3742 !important;
  --darkGray: #1F1F1F !important;
  --darkgreen: #004f51 !important;
  --darkblue: #0a0f24 !important;
  --test: #1f2336 !important;
  /* --lightBlue: #0e2648 !important; */

  --lightred: #eb5543 !important;
  --darkred: #781b10 !important;
  --darkyellow: #90812f !important;
  --darkyelloww: #90812f !important;
  --statusgrey: #3a4050 !important;
  --lightyellow:rgb(244, 212, 36)!important;

  /* === Low-Poly Background Colors (Mail) === */
  --poly-primary: #00cbb5;
  --poly-secondary: #004f51;
  --poly-dark: #0a0f24;

  /* === Border === */
  --border: 3px;

  /* === Typography === */
  --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;
}

.btn-action-group {
    position: absolute;
    top: 0rem;
    right: 0rem;

    display: flex;
    gap: 1.5rem; /* ← DAS ersetzt deine right: 12rem / 8rem / 4rem */
    align-items: center;
}

/* === Name-Ausklappen (getNewsletter): Icon neben "Name" verbreitert die Name-Spalte,
   damit abgeschnittene Kampagnennamen komplett sichtbar werden. Statistik-Spalten
   weichen (die Buttons sitzen absolut rechts, daher Name-Breite konservativ). === */
.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;
}

/* === Spalten-Sortierung: Icons im Listen-Header (getNewsletter) ===
   fa-sort = inaktiv (gedimmt), fa-sort-up/-down + .nl-sort-active = aktive
   Spalte in vollem Weiss. 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;
}
#mNlWrap.nl-name-open .nl-stat-col {
    display: none !important;
}
#mNlWrap.nl-name-open .nl-name-col {
    width: 40%;
}


/* Notification Container - Desktop rechts unten */
#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 {
  border-radius: var(--border) !important;
  color: var(--white) !important;
  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;
}

.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;
}


.message-box{
  background-color: var(--darkblue);
  border: solid 1px var(--darkgreen);
  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_partner); /* 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(--main);      /* 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(--main);
  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(--poly-dark);
}

/* ============================================================================
   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 rund 40 festen px-Werte in
   diesem Stylesheet (Knopf-Kacheln, .card-lounge). Gemessen am 05.09.2026:
   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 am 05.09.2026. 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`). Eine zuerst
      eingebaute Gegen-Zoom-Ausnahme fuer die Navigation war darum unnoetig und
      haette sie nur faelschlich vergroessert — wieder entfernt. */
@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);
    }
}

/* Low-Poly Hintergrund Layer */
.div_light_desktop::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(225deg,
    rgba(0, 79, 81, 0.3) 0%,
    rgba(0, 79, 81, 0.15) 20%,
    var(--poly-dark) 50%,
    var(--poly-dark) 100%);
  pointer-events: none;
  z-index: 0;
}

/* SVG Polygon Pattern Layer - ohne Knotenpunkte */
.div_light_desktop::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  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:%2300cbb5;stop-opacity:0.85'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.75'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.65'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.55'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.45'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%23004f51;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='620,100 650,200 520,70' fill='url(%23polyLight)'/%3E%3Cpolygon points='520,70 650,200 550,180' fill='url(%23polyMid)'/%3E%3Cpolygon points='520,70 550,180 420,110' fill='url(%23polyMid)'/%3E%3Cpolygon points='420,110 550,180 450,220' fill='url(%23polyMid)'/%3E%3Cpolygon points='420,110 450,220 320,80' fill='url(%23polyMid)'/%3E%3Cpolygon points='320,80 450,220 350,200' fill='url(%23polyDark)'/%3E%3Cpolygon points='320,80 350,200 220,120' fill='url(%23polyDark)'/%3E%3Cpolygon points='220,120 350,200 250,240' fill='url(%23polyDark)'/%3E%3Cpolygon points='220,120 250,240 120,90' fill='url(%23polyDark)'/%3E%3Cpolygon points='120,90 250,240 150,220' fill='url(%23polyDark)'/%3E%3Cpolygon points='120,90 150,220 0,60' fill='url(%23polyDark)'/%3E%3Cpolygon points='0,60 150,220 0,180' fill='url(%23polyDark)'/%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='750,160 770,260 650,200' fill='url(%23polyMid)'/%3E%3Cpolygon points='650,200 770,260 680,310' fill='url(%23polyMid)'/%3E%3Cpolygon points='650,200 680,310 550,180' fill='url(%23polyMid)'/%3E%3Cpolygon points='550,180 680,310 580,280' fill='url(%23polyMid)'/%3E%3Cpolygon points='550,180 580,280 450,220' fill='url(%23polyMid)'/%3E%3Cpolygon points='450,220 580,280 490,330' fill='url(%23polyDark)'/%3E%3Cpolygon points='450,220 490,330 350,200' fill='url(%23polyDark)'/%3E%3Cpolygon points='350,200 490,330 400,300' fill='url(%23polyDark)'/%3E%3Cpolygon points='350,200 400,300 250,240' fill='url(%23polyDark)'/%3E%3Cpolygon points='250,240 400,300 310,350' fill='url(%23polyDark)'/%3E%3Cpolygon points='250,240 310,350 150,220' fill='url(%23polyDark)'/%3E%3Cpolygon points='150,220 310,350 220,320' fill='url(%23polyDark)'/%3E%3Cpolygon points='150,220 220,320 0,180' fill='url(%23polyDark)'/%3E%3Cpolygon points='0,180 220,320 0,300' fill='url(%23polyDark)'/%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='860,290 940,360 880,400' fill='url(%23polyMid)'/%3E%3Cpolygon points='860,290 880,400 770,260' fill='url(%23polyMid)'/%3E%3Cpolygon points='770,260 880,400 790,370' fill='url(%23polyMid)'/%3E%3Cpolygon points='770,260 790,370 680,310' fill='url(%23polyMid)'/%3E%3Cpolygon points='680,310 790,370 700,420' fill='url(%23polyDark)'/%3E%3Cpolygon points='680,310 700,420 580,280' fill='url(%23polyDark)'/%3E%3Cpolygon points='580,280 700,420 610,390' fill='url(%23polyDark)'/%3E%3Cpolygon points='580,280 610,390 490,330' fill='url(%23polyDark)'/%3E%3Cpolygon points='490,330 610,390 520,440' fill='url(%23polyDark)'/%3E%3Cpolygon points='490,330 520,440 400,300' fill='url(%23polyDark)'/%3E%3Cpolygon points='400,300 520,440 430,410' fill='url(%23polyDark)'/%3E%3Cpolygon points='400,300 430,410 310,350' fill='url(%23polyDark)'/%3E%3Cpolygon points='310,350 430,410 340,460' fill='url(%23polyDark)'/%3E%3Cpolygon points='310,350 340,460 220,320' fill='url(%23polyDark)'/%3E%3Cpolygon points='220,320 340,460 250,430' fill='url(%23polyDark)'/%3E%3Cpolygon points='220,320 250,430 0,300' fill='url(%23polyDark)'/%3E%3Cpolygon points='0,300 250,430 0,420' fill='url(%23polyDark)'/%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='940,360 950,480 880,400' fill='url(%23polyMid)'/%3E%3Cpolygon points='880,400 950,480 890,520' fill='url(%23polyDark)'/%3E%3Cpolygon points='880,400 890,520 790,370' fill='url(%23polyDark)'/%3E%3Cpolygon points='790,370 890,520 810,490' fill='url(%23polyDark)'/%3E%3Cpolygon points='790,370 810,490 700,420' fill='url(%23polyDark)'/%3E%3Cpolygon points='700,420 810,490 720,540' fill='url(%23polyDark)'/%3E%3Cpolygon points='700,420 720,540 610,390' fill='url(%23polyDark)'/%3E%3Cpolygon points='610,390 720,540 640,510' fill='url(%23polyDark)'/%3E%3Cpolygon points='610,390 640,510 520,440' fill='url(%23polyDark)'/%3E%3Cpolygon points='520,440 640,510 550,560' fill='url(%23polyDark)'/%3E%3Cpolygon points='520,440 550,560 430,410' fill='url(%23polyDark)'/%3E%3Cpolygon points='430,410 550,560 470,530' fill='url(%23polyDark)'/%3E%3Cpolygon points='430,410 470,530 340,460' fill='url(%23polyDark)'/%3E%3Cpolygon points='340,460 470,530 380,580' fill='url(%23polyDark)'/%3E%3Cpolygon points='340,460 380,580 250,430' fill='url(%23polyDark)'/%3E%3Cpolygon points='250,430 380,580 300,550' fill='url(%23polyDark)'/%3E%3Cpolygon points='250,430 300,550 0,420' fill='url(%23polyDark)'/%3E%3Cpolygon points='0,420 300,550 0,540' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,520 1000,680 900,620' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,520 900,620 950,480' fill='url(%23polyDark)'/%3E%3Cpolygon points='950,480 900,620 810,490' fill='url(%23polyDark)'/%3E%3Cpolygon points='810,490 900,620 780,590' fill='url(%23polyDark)'/%3E%3Cpolygon points='810,490 780,590 720,540' fill='url(%23polyDark)'/%3E%3Cpolygon points='720,540 780,590 670,640' fill='url(%23polyDark)'/%3E%3Cpolygon points='720,540 670,640 640,510' fill='url(%23polyDark)'/%3E%3Cpolygon points='640,510 670,640 560,610' fill='url(%23polyDark)'/%3E%3Cpolygon points='640,510 560,610 550,560' fill='url(%23polyDark)'/%3E%3Cpolygon points='550,560 560,610 450,660' fill='url(%23polyDark)'/%3E%3Cpolygon points='550,560 450,660 470,530' fill='url(%23polyDark)'/%3E%3Cpolygon points='470,530 450,660 350,630' fill='url(%23polyDark)'/%3E%3Cpolygon points='470,530 350,630 380,580' fill='url(%23polyDark)'/%3E%3Cpolygon points='380,580 350,630 240,680' fill='url(%23polyDark)'/%3E%3Cpolygon points='380,580 240,680 300,550' fill='url(%23polyDark)'/%3E%3Cpolygon points='300,550 240,680 0,540' fill='url(%23polyDark)'/%3E%3Cpolygon points='0,540 240,680 0,700' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,680 1000,850 880,780' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,680 880,780 900,620' fill='url(%23polyDark)'/%3E%3Cpolygon points='900,620 880,780 750,720' fill='url(%23polyDark)'/%3E%3Cpolygon points='900,620 750,720 780,590' fill='url(%23polyDark)'/%3E%3Cpolygon points='780,590 750,720 620,760' fill='url(%23polyDark)'/%3E%3Cpolygon points='780,590 620,760 670,640' fill='url(%23polyDark)'/%3E%3Cpolygon points='670,640 620,760 490,800' fill='url(%23polyDark)'/%3E%3Cpolygon points='670,640 490,800 560,610' fill='url(%23polyDark)'/%3E%3Cpolygon points='560,610 490,800 360,840' fill='url(%23polyDark)'/%3E%3Cpolygon points='560,610 360,840 450,660' fill='url(%23polyDark)'/%3E%3Cpolygon points='450,660 360,840 230,880' fill='url(%23polyDark)'/%3E%3Cpolygon points='450,660 230,880 350,630' fill='url(%23polyDark)'/%3E%3Cpolygon points='350,630 230,880 0,700' fill='url(%23polyDark)'/%3E%3Cpolygon points='0,700 230,880 0,900' fill='url(%23polyDark)'/%3E%3Cpolygon points='1000,850 1000,1000 880,780' fill='url(%23polyDark)'/%3E%3Cpolygon points='880,780 1000,1000 750,720' fill='url(%23polyDark)'/%3E%3Cpolygon points='750,720 1000,1000 620,760' fill='url(%23polyDark)'/%3E%3Cpolygon points='620,760 1000,1000 490,800' fill='url(%23polyDark)'/%3E%3Cpolygon points='490,800 1000,1000 360,840' fill='url(%23polyDark)'/%3E%3Cpolygon points='360,840 1000,1000 230,880' fill='url(%23polyDark)'/%3E%3Cpolygon points='230,880 1000,1000 0,900' fill='url(%23polyDark)'/%3E%3Cpolygon points='0,900 1000,1000 0,1000' fill='url(%23polyDark)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.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(--poly-dark);
  overflow: hidden;
}

/* Low-Poly Hintergrund Layer Mobile */
.div_light_mobile::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(225deg,
    rgba(0, 79, 81, 0.3) 0%,
    rgba(0, 79, 81, 0.15) 20%,
    var(--poly-dark) 50%,
    var(--poly-dark) 100%);
  pointer-events: none;
  z-index: 0;
}

/* SVG Polygon Pattern Layer Mobile - gleich wie Desktop */
.div_light_mobile::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  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:%2300cbb5;stop-opacity:0.85'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.75'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.65'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.55'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.45'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%23004f51;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='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;
  pointer-events: none;
  z-index: 0;
}

.div_light_mobile > * {
  position: relative;
  z-index: 1;
}

/* ===== SCHWEBENDE UMSCHLÄGE ANIMATION - identisch mit jd-media ===== */
@keyframes floatEnvelope {
  0%, 100% {
    transform: translateY(0px) translateX(0px) rotate(var(--rotation, 0deg));
  }
  33% {
    transform: translateY(-20px) translateX(10px) rotate(calc(var(--rotation, 0deg) + 5deg));
  }
  66% {
    transform: translateY(-10px) translateX(-8px) rotate(calc(var(--rotation, 0deg) - 3deg));
  }
}

/* Container für schwebende Umschläge - über Hintergrund, unter Inhalt */
.poly-background-container {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-envelope {
  position: absolute;
  pointer-events: none;
  animation: floatEnvelope var(--duration, 20s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.floating-envelope svg {
  filter: drop-shadow(0 0 8px rgba(0, 203, 181, 0.3));
}

/* Schwebende Umschläge für Modals - nur in oberer rechter Ecke */
.modal-envelope {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  animation: floatEnvelope var(--duration, 20s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.modal-envelope svg {
  filter: drop-shadow(0 0 6px rgba(0, 203, 181, 0.25));
}

/* Glow-Effekt oben rechts - identisch mit jd-media */
.poly-glow-top {
  position: absolute;
  top: -25%;
  right: -25%;
  width: 75%;
  height: 75%;
  background: rgba(0, 203, 181, 0.12);
  border-radius: 50%;
  filter: blur(200px);
  pointer-events: none;
  opacity: 0.8;
}

/* Dezenter Glow unten links */
.poly-glow-bottom {
  position: absolute;
  bottom: -33%;
  left: -33%;
  width: 50%;
  height: 50%;
  background: rgba(0, 203, 181, 0.12);
  border-radius: 50%;
  filter: blur(150px);
  pointer-events: none;
  opacity: 0.3;
}

/* Vignette Effekt */
.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;
}

@keyframes rotate-border {
  0% {
    border-image-source: linear-gradient(
      90deg,
      var(--main_connect) 1%,
      var(--darkblue) 100%
    );
  }
  25% {
    border-image-source: linear-gradient(
      180deg,
      var(--main_connect) 1%,
      var(--darkblue) 100%
    );
  }
  50% {
    border-image-source: linear-gradient(
      270deg,
      var(--main_connect) 1%,
      var(--darkblue) 100%
    );
  }
  75% {
    border-image-source: linear-gradient(
      360deg,
      var(--main_connect) 1%,
      var(--darkblue) 100%
    );
  }
  100% {
    border-image-source: linear-gradient(
      90deg,
      var(--main_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(--main);
}

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

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

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

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

  /* Verlauf als Hintergrund */
  /* background: radial-gradient(circle,rgba(10, 15, 36, 1) 85%, rgba(0, 79, 81, 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(58, 64, 80) 100%);

  color: var(--white) !important;
  border: 1px solid var(--darkgreen) !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(--darkgreen) !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(--darkgreen) !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;
  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;
}

/* 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). */
.leadshop-website-link {
  width: auto !important;
}

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

.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;
}

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

.half-gar {
  width: 100% !important;
  border-radius: var(--border) !important;

  /* Verlauf als Hintergrund */
  background: linear-gradient(27deg,rgba(0, 203, 179, 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(--darkgreen) !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(--main);
  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(--darkgreen);
  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: 28rem;
  min-width: 5rem;
  border: solid 1px var(--darkgreen);
  border-radius: var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem !important;
  margin-top: 1rem;
}

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

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

.accordion-item:hover {
  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;
}

/* Listen-Datenzeilen vertikal zentrieren (analog jd-partner): in Flex-.row-Listen
   hat die Name-Zelle vertikales Padding, die uebrigen Zellen nicht -> deren Werte
   saessen sonst hoeher. Trifft NUR echte Listen-Datenzeilen (Dashboards nutzen
   .accordion-item ohne diese container-fluid>row-Struktur, 0 Treffer verifiziert);
   auf inline-block-Listen (kein .row) greift sie nicht. */
.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_main {
  width: 100%;
  padding: 0.5rem !important;
  background-color: transparent;
  border-top: 1px solid var(--darkgreen);
  color: rgba(199, 199, 217, 0.8);
  cursor: pointer;
  border-radius: var(--border) !important;
}

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


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

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

.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_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;
}

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


.btn_add {
  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;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* ===== Testadressen konsolidiertes Modal ===== */
/* Plus-/Minus-Button (Ecke): Icon flex-zentriert. */
.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-Türkis. */
.testaddress-new-btn--open:hover {
  background-color: var(--lightred) !important;
}
/* Listenitems höher — feste 17px (nicht 1rem, da html-font in Mail 15px ist,
   Textzeile 1px kleiner), damit die Höhe exakt der von jd-partner (58px) entspricht. */
#testaddressTabsWrap .boxBl {
  padding-top: 17px !important;
  padding-bottom: 17px !important;
}
/* Abstand der horizontalen Kunden-Tableiste zum Strich (border-span) darüber:
   der border-span bringt bereits 1rem margin-bottom -> Wrap ohne eigenes margin. */
#testaddressTabsWrap {
  margin-top: 0;
}
/* Modus-Umschalter Einzeln/Mehrere nutzt die etablierte nav-tabs-Optik
   (.nav-link.active = --main, global definiert). Abstand Tabs -> Inhalt. */
#taSingleMode,
#taBulkMode {
  margin-top: 1rem;
}
/* "Weitere Adresse"-Button: kompakt (btn_add 40x40), Icon zentriert, mittig. */
#taAddRow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.25rem auto 0;
}
#taAddRow .icon_basic {
  margin: 0 !important;
}
/* Textarea volle Breite; Text/Placeholder mit 1rem Innenabstand. */
#taBulkText {
  width: 100% !important;
  padding: 1rem !important;
}

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

.btn_delete_ {
  border: solid 1px var(--darkred);
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border-radius: var(--border);
  color: var(--white) !important;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
}

.btn_delete_nav {
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border-radius: var(--border);
  color: var(--white) !important;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
}

/* 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: 1px solid var(--darkgreen);
  border-radius: var(--border);
  color: var(--white);
  font-size: 0.85rem;
  padding: 0;
  cursor: pointer;
}

.blacklist-delete-btn:hover,
.blacklist-delete-btn:active {
  border-color: var(--lightred);
  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. */
.btn_nav {
  position: relative;
  border: solid 1px transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border-radius: var(--border);
  color: var(--white) !important;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
}

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

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

.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;
}
input-basic 
.hover_main:hover,
.btn_nav:hover,
.btn_add:hover{
  background-color: var(--main);
}



.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: var(--white);
  text-align: center;
  font-style: normal;
}
  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;
}


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

select option:checked {
  background: #00CBB3 linear-gradient(0deg, #00CBB3 0%, #00CBB3 100%);
  color: #0A0F24;
}

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

select.segment-multi-select option {
  padding: 0.4rem 0.6rem;
  border-radius: 3px;
  cursor: pointer;
}

select.segment-multi-select option:checked {
  background: var(--main) linear-gradient(0deg, var(--main) 0%, var(--main) 100%);
  color: #fff;
}

select.segment-multi-select option:hover {
  background: var(--darkgreen) linear-gradient(0deg, var(--darkgreen) 0%, var(--darkgreen) 100%);
  color: #fff;
}

select.segment-multi-select option:checked:hover {
  background: var(--darkgreen) linear-gradient(0deg, var(--darkgreen) 0%, var(--darkgreen) 100%);
  color: #fff;
}

.btn_delete:hover,
.btn_delete_nav:hover,
.btn_delete_:hover,
.btn_advance_red:hover {
  border: solid 1px var(--lightred);
  background-color: var(--lightred);
}

.login-container {
  background: color-mix(in srgb, var(--darkblue) 85%, transparent);
  padding: 2rem;
  border-radius: var(--border);
  width: 100%;
  max-width: 50rem;
  border: none;
  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;
  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(--main) !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_3 {
  color: var(--white) !important;
  margin: 12px 12px;
  cursor: pointer !important;
}

.icon_basic_3:hover{
  color: var(--main) !important;
  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%;
}


.tabs {
  display: flex;
}

.nav-link.active,
.nav-item.show .nav-link {
  background-color: var(--main) !important;
  border-color: transparent !important;
}
/* Status-Icons (z.B. fa-check freigegeben = tuerkis #00cbb5) im AKTIVEN Tab
   waren tuerkis auf tuerkisem Tab-Hintergrund → unsichtbar. Im aktiven Tab
   auf weiss zwingen, damit das Icon (z.B. WM-Status im Vorschau-Tab) sichtbar ist. */
.nav-link.active i,
.nav-item.show .nav-link i {
  color: #ffffff !important;
}

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

.nav-tabs {
  --bs-nav-tabs-border-color: var(--darkgreen) !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(--darkgreen) !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(--darkgreen);
}

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

.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(--darkgreen) !important;
  margin-top: 5px;
  border-radius: var(--border);
}

.box_subscriber_list {
  border: 1px solid var(--darkgreen) !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,
.boxSeg h1 {
  font-size: 1rem !important;
  color: var(--white) !important;
  text-align: center;
  padding: 0.2rem;
  padding-left: 1.2rem;
}

.segment_ui.selected {
  background-color: var(--main);
}

.box_segment {
  background-color: var(--darkblue) !important;
  border: solid 1px var(--darkgreen);
  border-radius: var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem !important;
}

.box_segment_own {
  background-color: var(--darkblue) !important;
  border: solid 1px var(--darkgreen);
  border-radius: var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem !important;
  width: 20rem;
}

.box_segment_category {
  background-color: var(--darkblue) !important;
  border: solid 1px var(--darkgreen);
  border-radius: var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem !important;
  height: 8rem !important;
}

.box_segment h1,
.box_segment_own h1,
.box_segment_category h1 {
  color: var(--white) !important;
  font-size: 1.5rem !important;
  margin-top: 1.3rem;
}

.box_segment h2,
.box_segment_own h2,
.box_segment_category h2 {
  color: var(--main) !important;
  font-size: 1rem !important;
}

.box_segment h3,
.box_segment_own h3,
.box_segment_category h3 {
  color: var(--white) !important;
  font-size: 0.7rem !important;
}

.box_histroy_count,
.box_dash {
  background-color: var(--darkblue) !important;
  min-height: 5rem;
  min-width: 5rem;
  /* border: solid 1px var(--darkgreen); */
  border-radius: var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem !important;
  margin-top: 1rem;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
}



.box_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(--darkgreen);
}

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

.box_dash h1 {
  font-size: 1rem !important;
  color: var(--main) !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;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 3rem;
}

.box_chooseAdSpace {
  
}

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

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

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

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

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

/* Sicherstellen, dass Modals immer im Vordergrund sind */
.modal {
  position: fixed !important;
  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(--poly-dark);
  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:%2300cbb5;stop-opacity:0.25'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.22'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.19'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.16'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.13'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%23004f51;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;
}

.mc_a_row {
  top: 11px;
  left: -31rem;
  padding: 1rem;
  width: 300%;
  background-color: var(--poly-dark);
  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:%2300cbb5;stop-opacity:0.25'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.22'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.19'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.16'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.13'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%23004f51;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%);
}

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

/* 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;
  }
}

.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;
   border-radius: var(--border) !important;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    font-size: 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;
}

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

.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: var(--main);
  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: 1px solid var(--darkgreen);
}

.radio-container label:hover {
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid var(--main);
}

.radio-container input[type="radio"]:checked + label {
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid var(--main);
  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(--main);
  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(--main);
  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(--main);
  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(--main);
  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(--main);
  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(--main) 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(--main);
  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(--main) !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(--main) !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: 1040;
  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(--main);
}

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

.nav-content .dropdown .dropdown-menu {
  border-bottom: solid 3px var(--main) !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: 1040;
  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(--main);
}

.box_price p {
  text-align: left;
}

.link {
  text-decoration: underline;
  color: var(--main);
  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(--darkgreen) !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(--main);
    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(--main);
    border-color: var(--main);
    color: white;
}

.navigation {
  border: solid 1px var(--darkblue);
  background-color: var(--poly-dark);
  color: var(--white);
  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:%2300cbb5;stop-opacity:0.85'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.75'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.65'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.55'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%2300cbb5;stop-opacity:0.45'/%3E%3Cstop offset='100%25' style='stop-color:%23004f51;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:%23004f51;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): bei kleiner
     Fensterhoehe sah niemand, dass unter dem Ausschnitt noch Menuepunkte liegen. Der Browser
     zeigt ihn nur, wenn die Liste wirklich ueberlaeuft. Gleiche Werte wie .dash-list-scroll. */
  /* 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(--main) 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(0, 203, 181, 0.75);
  border-radius: 3px;
}

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

/* 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(--main);
}

/* 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 (--poly-dark = #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(--main);
  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(--main);
  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(--main);
}

.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: var(--darkblue);
  width: 100%; 
  margin-bottom: 1rem;
  height: 21rem;
  border-radius: 1rem;
}

.card-adspace img {
  width: 100%;
  height: 6rem;
  object-fit: cover; /* oder: contain */
  display: block;
  border-radius: 1rem 1rem 0rem 0rem;
}


.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(--main);
text-align: left;
background-color: var(--main);
}

.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);
}

.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: #888;
}
.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active:before {
  left: -10%;
}
.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn {
  background: var(--main);
}
.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%;
}



.card {
    background: color-mix(in srgb, var(--darkblue) 85%, transparent);
    border: 1px solid var(--darkgreen);
    border-radius: var(--border);
    padding: 24px;
    width: 100%;
    max-width: 380px;
    /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); */
}

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

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

.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;
    border-radius: 6px;
    font-size: 1.3rem !important;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.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;
}

.flex-grow-2 {
    flex: 2 1 0;
}

.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;
}

.row_second_small{
  margin-top: 0.5rem;
  height: 2rem;
  border: 1px solid transparent;
  padding: 0rem 0.5rem;
}

.row_second_small:hover {
  border: 1px solid var(--main);
}


  .service-media-card {
    background: color-mix(in srgb, var(--darkblue) 85%, transparent);
    border: 1px solid var(--darkgreen);
    border-radius: var(--border);
    padding: 2rem;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }

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

  .service-media-title {
    color: #ffffff;
    font-size: 1.5rem !important;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    text-transform: uppercase;
  }

  .service-media-label {
    color: #8b98a5;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    text-transform: uppercase;
  }

  .service-media-price-wrapper {
    margin-bottom: 1rem;
  }

  .service-media-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .service-media-price-amount {
    color: var(--main);
    font-size: 2.5rem;
    font-weight: 700;
  }

  .service-media-price-currency {
    color: #8b98a5;
    font-size: 24px;
    font-weight: 500;
  }

  .service-media-price-unit {
    color: #8b98a5;
    font-size: 16px;
    font-weight: 400;
  }

  .service-media-availability {
    margin-bottom: 32px;
  }

  .service-media-countries {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
  }

  .service-media-country-badge {
    background: transparent;
    border: 1px solid var(--darkgreen);
    border-radius: var(--border);
    color: #8b98a5;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

  .service-media-country-code {
    font-size: 10px;
    opacity: 0.7;
  }

  .service-media-country-name {
    font-size: 13px;
  }

  .service-media-minimum {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
  }

  .service-media-minimum-label {
    color: rgba(199, 199, 217, 0.8);
    font-size: 13px;
  }

  .service-media-minimum-value {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
  }

  .service-media-minimum-unit {
    color: rgba(199, 199, 217, 0.8);
    font-size: 14px;
    margin-left: 4px;
  }

.price-box {
    background: var(--darkblue);
    color: white;
    padding: 1rem;
    border-radius: var(--border);
    /* Schwebender Look via box-shadow statt Rahmen (wie box_histroy_count) */
    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;
}

/* ============================================
   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: main color border */
.checkbox-wrapper-44 .toggleButton input:checked + div {
    border-color: var(--main);
}

/* Checked: main color stroke */
.checkbox-wrapper-44 .toggleButton input:checked + div svg {
    stroke: var(--main);
    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(--main);
    background: rgba(0, 203, 181, 0.1);
}

.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: var(--main);
    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);
}

/* =============================================================================
   SAFARI / WEBKIT KOMPATIBILITÄT
   ============================================================================= */

/* Safari: clip-path braucht -webkit-Präfix */
.white_dot_half_left,
.white_dot_half_right,
.yellow_dot_half_left,
.yellow_dot_half_right,
.green_dot_half_left,
.green_dot_half_right,
.red_dot_half_left,
.red_dot_half_right {
    -webkit-clip-path: inherit;
}

.white_dot_half_left,
.yellow_dot_half_left,
.green_dot_half_left,
.red_dot_half_left {
    -webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.white_dot_half_right,
.yellow_dot_half_right,
.green_dot_half_right,
.red_dot_half_right {
    -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

/* Safari: Flexbox gap Fallback für ältere Versionen */
@supports not (gap: 1rem) {
    .btn-action-group > * + * {
        margin-left: 1.5rem;
    }
    .notification-content > * + * {
        margin-left: 10px;
    }
    .remember-me-wrapper > * + * {
        margin-left: 0.75rem;
    }
}

/* Safari: Minimale Fixes - nur was wirklich nötig ist */

/* Safari: Form-Control Rendering */
.form-control,
.form-select {
    -webkit-appearance: none;
    appearance: none;
}

/* Safari: Text Rendering */
body {
    -webkit-font-smoothing: antialiased;
}

/* Safari: Overflow Fixes */
[style*="overflow-y: auto"],
[style*="overflow-x: hidden"] {
    -webkit-overflow-scrolling: touch;
}

/* Safari: inset Fallback (nicht unterstützt vor Safari 14.1) */
.div_light_desktop::before,
.div_light_desktop::after,
.div_light_mobile::before,
.div_light_mobile::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Safari: SVG Background Rendering Fix */
.div_light_desktop::after,
.div_light_mobile::after {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ============================================================================= */
/* DASHBOARD STYLES (JD-Partner Style adaptiert für JD-Mail)                     */
/* ============================================================================= */

.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 214px ueber dem
       unteren Bildschirmrand (gemessen 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) - 8.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: transparent;
    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: #fff;
    margin-top: 0.1rem;
}

.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-box h3 i {
    margin-right: 0.4rem;
    color: #fff;
}

.dash-list-item {
    padding: 0.5rem 0.6rem;
    border-radius: 3px;
    margin-bottom: 0.25rem;
    background: rgba(0, 203, 181, 0.1);
    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(0, 203, 181, 0.2);
}

/* Dashboard Tabs */
.dash-tabs-header {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.dash-tab-btn {
    background: transparent;
    border: 1px solid rgba(0, 203, 181, 0.3);
    color: #999;
    padding: 0.4rem 0.8rem;
    border-radius: 3px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.dash-tab-btn:hover {
    border-color: rgba(0, 203, 181, 0.5);
    color: #fff;
}

.dash-tab-btn.active {
    background: rgba(0, 203, 181, 0.2);
    border-color: #00cbb5;
    color: #fff;
}

.dash-tab-btn i {
    margin-right: 0.3rem;
}

.dash-tab-panel {
    display: none;
    flex: 1;
    min-height: 0;
}

.dash-tab-panel.active {
    display: flex;
    flex-direction: column;
}

/* Chart Row */
.dash-chart-row {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 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;
    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;
}

/* Chart Legend */
.dash-chart-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

.dash-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dash-legend-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-legend-label {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
}

.dash-legend-value {
    color: #fff;
    font-size: 0.7rem;
}

/* Donut Chart */
.dash-donut-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.dash-donut {
    position: relative;
    width: 9rem;
    height: 9rem;
}

.dash-donut-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: background 0.6s ease-out;
}

.dash-donut-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--darkblue) 75%, transparent);
}

.dash-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.dash-donut-total {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
}

.dash-donut-label {
    color: #fff;
    font-size: 0.65rem;
}

/* Sendout Cards */
.dash-sendout-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.4rem;
    border-left: 2px solid #00cbb5;
    transition: all 0.2s;
}

.dash-sendout-card:hover {
    background: rgba(255, 255, 255, 0.1);
}

.dash-sendout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.dash-sendout-name {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 0.5rem;
}

.dash-sendout-date {
    color: #fff;
    font-size: 0.65rem;
    flex-shrink: 0;
}

.dash-sendout-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.dash-sendout-stat {
    text-align: center;
}

.dash-sendout-stat-label {
    display: block;
    color: #fff;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dash-sendout-stat-value {
    display: block;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 0.1rem;
}

.dash-sendout-stat-value.dash-highlight {
    color: #fff;
}

.dash-sendout-stat-value small {
    color: #fff;
    font-size: 0.6rem;
    font-weight: 400;
}

/* Empty State */
.dash-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #fff;
    gap: 0.5rem;
}

.dash-empty-state i {
    font-size: 1.5rem;
    opacity: 0.5;
}

.dash-empty-state span {
    font-size: 0.8rem;
}

/* SOI Badge */
.dash-badge-soi {
    font-size: 0.55rem;
    padding: 0.15rem 0.4rem;
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Smooth Scrolling */
.dash-list-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    padding-top: 0.5rem;
    padding-right: 0.3rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.dash-list-scroll::-webkit-scrollbar {
    width: 6px;
}

.dash-list-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.dash-list-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 203, 181, 0.4);
    border-radius: 3px;
    transition: background 0.2s;
}

.dash-list-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 203, 181, 0.6);
}

/* Firefox scrollbar */
.dash-list-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 203, 181, 0.4) rgba(0, 0, 0, 0.2);
}

/* Notification Items */
.dash-notification-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    border-radius: 3px;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-left: 2px solid #00cbb5;
    cursor: pointer;
    transition: background 0.2s ease;
}

.dash-notification-item:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.dash-notification-item.dash-notification-unread {
    background: rgba(255, 255, 255, 0.08);
}

.dash-notification-item.dash-notification-unread:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.dash-notification-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.dash-notification-content {
    flex: 1;
    min-width: 0;
}

.dash-notification-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dash-unread-dot {
    width: 6px;
    height: 6px;
    background: #00cbb5;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-notification-message {
    font-size: 0.9rem;
    color: #fff;
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-notification-time {
    font-size: 0.65rem;
    color: #fff;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Notification Delete Button - btn_delete Style */
.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;
}

/* Responsive Dashboard */
@media (max-width: 1200px) {
    .dash-container {
        height: auto;
        /* 🛑 Diese Query ueberschneidet sich mit dem Desktop-Zoom (992–1200px) —
           ohne `--vh-voll` bliebe dort derselbe Leerraum unten wie zuvor. */
        min-height: calc(var(--vh-voll, 100vh) - 8.5rem);
    }

    .dash-kpi-row {
        flex-wrap: wrap;
    }

    .dash-kpi-card {
        flex: 1 1 calc(50% - 0.3rem);
        min-width: calc(50% - 0.3rem);
    }
}

@media (max-width: 992px) {
    .dash-bottom-row {
        flex-direction: column;
    }

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

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

    .dash-list-box {
        min-height: 15rem;
    }

    .dash-sendout-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dash-container {
        padding: 0 0.5rem;
        gap: 0.4rem;
    }

    .dash-kpi-row {
        gap: 0.4rem;
    }

    .dash-kpi-card {
        flex: 1 1 100%;
        min-width: 100%;
        padding: 0.6rem 0.8rem;
    }

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

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

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

    .dash-bottom-row {
        gap: 0.4rem;
    }

    .dash-list-box {
        padding: 0.6rem 0.8rem;
    }

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

    .dash-tab-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }

    .dash-chart-row {
        gap: 0.4rem;
    }

    .dash-donut {
        width: 7rem;
        height: 7rem;
    }

    .dash-donut-hole {
        width: 4.2rem;
        height: 4.2rem;
    }

    .dash-donut-total {
        font-size: 0.9rem;
    }

    .dash-sendout-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.3rem;
    }

    .dash-sendout-stat-label {
        font-size: 0.55rem;
    }

    .dash-sendout-stat-value {
        font-size: 0.7rem;
    }
}

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

.dash-mobile {
    padding: 0.8rem;
    padding-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    font-size: 0.85rem;
}

/* Mobile Datumsfilter */
.dash-mobile-datefilter {
    display: flex;
    gap: 0.5rem;
    background-color: #0a0f24;
    padding: 0.75rem;
    margin: -0.8rem -0.8rem 0 -0.8rem;
    border-bottom: 1px solid #004f51;
}

/* Globale Mobile Input/Button Styles */
.mobile-date-input {
    flex: 1;
    padding: 0.6rem 0.75rem;
    background-color: #0a0f24;
    border: 1px solid #004f51;
    border-radius: 3px;
    color: #fff;
    font-size: 0.85rem;
    text-align: center;
}

.mobile-date-input:focus {
    outline: none;
    border-color: #00cbb5;
}

.mobile-date-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.5;
}

.mobile-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #0a0f24;
    border: 1px solid #004f51;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.mobile-icon-btn:hover,
.mobile-icon-btn:active {
    border-color: #00cbb5;
    color: #00cbb5;
}

.mobile-icon-btn.btn-confirm {
    background-color: #0a0f24;
    border-color: #00cbb5;
}

.mobile-icon-btn i {
    font-size: 0.9rem;
}

/* Mobile KPI - Einzelne Karte (volle Breite) */
.dash-mobile-kpi-single {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 203, 181, 0.3);
    border-radius: 3px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.dash-mobile-kpi-single i {
    color: #00cbb5;
    font-size: 1.2rem;
}

.dash-mobile-kpi-single .dash-mobile-stat {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
}

.dash-mobile-kpi-single .dash-mobile-kpi-label {
    color: #fff;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Mobile KPI Grid - 2er Reihen */
.dash-mobile-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.dash-mobile-kpi-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 203, 181, 0.2);
    border-radius: 3px;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
}

.dash-mobile-kpi-card i {
    color: #00cbb5;
    font-size: 0.9rem;
    opacity: 0.8;
}

.dash-mobile-kpi-card .dash-mobile-stat {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
}

.dash-mobile-kpi-label {
    color: #fff;
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Mobile Donut Charts */
.dash-mobile-donuts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.dash-mobile-donut-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 203, 181, 0.2);
    border-radius: 3px;
    padding: 0.6rem;
    text-align: center;
}

.dash-mobile-donut-box h4 {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    margin: 0 0 0.4rem 0;
    opacity: 0.8;
}

.dash-mobile-donut-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 0.4rem;
}

.dash-mobile-donut {
    position: relative;
    width: 70px;
    height: 70px;
}

.dash-mobile-donut-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#00cbb5 0% 50%, #004f51 50% 100%);
}

.dash-mobile-donut-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #0a0f24;
}

.dash-mobile-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
}

.dash-mobile-donut-total {
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
}

.dash-mobile-donut-legend {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
}

.dash-mobile-legend-item {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.dash-mobile-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Mobile Sections */
.dash-mobile-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    padding: 0.8rem;
}

.dash-mobile-section h3 {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0 0 0.75rem 0;
}

.dash-mobile-section h3 i {
    color: #fff;
    margin-right: 0.4rem;
}

.dash-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

/* Scrollbare Listen mit fester Höhe */
.dash-mobile-list-notifications {
    max-height: 12.5rem; /* ca. 5 Benachrichtigungen */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.dash-mobile-list-sendouts {
    max-height: 15rem; /* ca. 3 Versendungen */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Custom Scrollbar für Mobile Listen */
.dash-mobile-list-notifications::-webkit-scrollbar,
.dash-mobile-list-sendouts::-webkit-scrollbar {
    width: 4px;
}

.dash-mobile-list-notifications::-webkit-scrollbar-track,
.dash-mobile-list-sendouts::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.dash-mobile-list-notifications::-webkit-scrollbar-thumb,
.dash-mobile-list-sendouts::-webkit-scrollbar-thumb {
    background: rgba(0, 203, 181, 0.3);
    border-radius: 2px;
}

.dash-mobile-list-notifications::-webkit-scrollbar-thumb:hover,
.dash-mobile-list-sendouts::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 203, 181, 0.5);
}

/* Mobile Sendout Card */
.dash-mobile-sendout {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    padding: 0.6rem;
    border-left: 2px solid #00cbb5;
}

.dash-mobile-sendout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.dash-mobile-sendout-name {
    color: #fff;
    font-weight: 500;
    font-size: 0.8rem;
}

.dash-mobile-sendout-date {
    color: #fff;
    opacity: 0.7;
    font-size: 0.7rem;
}

.dash-mobile-sendout-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
}

.dash-mobile-sendout-stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dash-mobile-sendout-stats .stat-label {
    color: #fff;
    font-size: 0.6rem;
    opacity: 0.7;
}

.dash-mobile-sendout-stats .stat-value {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Mobile Notification */
.dash-mobile-notif {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    padding: 0.5rem 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    border-left: 2px solid #00cbb5;
}

.dash-mobile-notif-unread {
    background: rgba(255, 255, 255, 0.08);
}

.dash-mobile-notif-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.dash-mobile-notif-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dash-mobile-unread-dot {
    width: 6px;
    height: 6px;
    background: #00cbb5;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-mobile-notif-title {
    color: #fff;
    font-size: 0.8rem;
}

.dash-mobile-notif-message {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-mobile-notif-unread .dash-mobile-notif-title {
    font-weight: 500;
}

.dash-mobile-notif-time {
    color: #fff;
    opacity: 0.7;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.dash-mobile-notif-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.dash-mobile-notif-delete {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.dash-mobile-notif-delete i {
    pointer-events: none;
}

.dash-mobile-notif-delete:hover,
.dash-mobile-notif-delete:active {
    border-color: #f44336;
    color: #f44336;
    background: rgba(244, 67, 54, 0.1);
}

/* Mobile Empty State */
.dash-mobile-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: #fff;
    opacity: 0.5;
    gap: 0.4rem;
}

.dash-mobile-empty i {
    font-size: 1.2rem;
}

.dash-mobile-empty span {
    font-size: 0.8rem;
}

/* ============================================
   Triggermail: Tage-Auswahl (Von-Bis)
   ============================================ */
.days-range-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0;
}

.days-range-row > .col,
.days-range-row > .day-select-col {
    flex: 1;
    min-width: 0;
    padding: 0;
}

.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;
}

/* Feldbeschriftung über dem Eingabefeld — plattformweit festgelegter Look
   (User-Wunsch 15.09.2026): 0,8rem, weiß, linksbündig, 0,5rem Abstand zum Feld.
   Heißt historisch "profil-", wird aber überall verwendet, wo eine Beschriftung
   über dem Feld steht (Profil-Fenster, Empfänger hinzufügen).

   🛑 `padding-left` = Innenpolster von `.input-basic`/`.half-gar`/`.form-select`
      (je 0,5rem), damit der Beschriftungstext über dem Feldtext steht. KEIN
      Zuschlag für den Rahmen: `border: 1px transparent` hat ohne `solid` die
      Breite 0 ([[Gotchas#663]]). Mobil staffelt styles-mobile.css nach. */
.profil-feld-label {
    display: block;
    padding-left: 0.5rem;
    margin-bottom: 0.5rem;
    text-align: left;
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 400;
}

/* 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.
   Identisch zu jd-partner — beide Plattformen sollen gleich aussehen. */
.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;
}

.gender-row {
    margin-top: 1rem;
}

/* Triggermail: Localpart Container */
[class*="localpart-container-trigger"] {
    width: 100%;
}

/* Triggermail: Localpart Input + Button */
.localpart-input-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.localpart-input-row input.input-basic {
    flex: 1;
    width: auto;
}

.localpart-input-row .btn_add,
.localpart-input-row .btn_delete {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    flex-shrink: 0;
}

.localpart-input-row .btn_add i,
.localpart-input-row .btn_delete i {
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Triggermail: Bedingungen Remove-Button (Desktop rechts) */
.condition-remove-wrapper {
    position: absolute;
    right: 0;
    top: 0.1rem;
}

.condition-remove-wrapper .btn_delete i {
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================= */
/* Font Awesome Spinner Animation Fix           */
/* ============================================= */
@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

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

.fa-spin,
i.fa-spin,
.fa-solid.fa-spin,
.fa-solid.fa-spinner.fa-spin {
    -webkit-animation: fa-spin 1s linear infinite !important;
    animation: fa-spin 1s linear infinite !important;
    display: inline-block;
}

/* ===== Desktop Header Toolbar ===== */

/* 🛑 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;
}

/* 🛑 Die Breitengrenze ist Teil des Umbruchs, nicht Kosmetik: die Toolbar ist absolut
   positioniert und bleibt sonst so breit wie ihr einzeiliger Inhalt (555px statt 366px),
   auch wenn der Zeitraum darunter schon korrekt in der zweiten Reihe steht. Der Titel
   wuerde dann weiterhin ueberlappt. 366px ist die Breite der Datumsreihe (gemessen). */
.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. */
.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(--main);
}

.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. Vorher 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: In der Tablet-Query (992–1199px) in styles-mobile.css stehen ZWEI Regeln
   fuer dieselben Knoepfe, beide mit einer Klasse und damit gleicher Spezifitaet:
     Zeile 617  .header-date-btn            { width: 36px }   <- fuer den Header gedacht
     Zeile 641  .btn_add,.btn_delete,.btn_nav { width: 42px }  <- allgemeine Touch-Groesse
   Bei Gleichstand gewinnt die spaetere — also die 42px, und die Header-Regel lief leer.

   Der Selektor unten haengt an ZWEI Klassen und sticht damit beide, unabhaengig von
   der Reihenfolge. Die Variable haelt Icons und Datums-Knoepfe zwangslaeufig gleich:
   wer eine Groesse aendert, aendert beide ([[Gotchas#474]] — dieselbe Mechanik). */
#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;
}
/* ============================================================
   Modern Switch Button (from uiverse.io) 
   Replaces: checkbox-wrapper-8, checkbox-wrapper-38
   ============================================================ */

.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;
}

.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
   und die Schalter-Zentrierung passen 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 Dialog z-index Fix
   ======================================== */
/* 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;
}

/* ========================================
   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;
}

/* ========================================
   List-Item Header Hover Animation
   ======================================== */

/* Sendout List Items */
.accordion-item {
  position: relative;
  overflow: visible;  /* Damit Header oberhalb sichtbar ist */
  transition: all 0.3s ease;
}



/* === Request Modal - Statischer Header === */
.request-header {
  background: linear-gradient(180deg, rgba(0, 203, 181, 0.15) 0%, rgba(0, 79, 81, 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(0, 203, 181, 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. */
.dash-main-col > .dash-section:nth-child(1) {
  flex: 1 1 0 !important;
}

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

.dash-main-col > .dash-section-low {
  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 {
  /* Container für die scrollbare Liste */
}

/* === Newsletter Aktions-Modus (Mechanik wie jd-partner, ersetzt das fruehere
   Pro-Zeile-Drei-Punkte-Dropdown): Sichtbar bleiben immer Vorschau, Versand,
   Testmail, Ordner. Freigabe-Stempel, Abschliessen-Flag, Kopieren und Loeschen
   sind default versteckt — der Drei-Punkte-Button im LISTEN-HEADER
   (#nlToggleActions) blendet sie fuer ALLE Kampagnen gleichzeitig ein
   (#mNlWrap.nl-actions-open). Die Statistik-Spalten weichen dafuer. === */
.nl-internal .nl-btn-trash,
.nl-internal .nl-btn-stamp,
.nl-internal .nl-btn-flag,
.nl-internal .nl-btn-copy {
  display: none !important;
}

#mNlWrap.nl-actions-open .nl-internal .nl-btn-trash,
#mNlWrap.nl-actions-open .nl-internal .nl-btn-stamp,
#mNlWrap.nl-actions-open .nl-internal .nl-btn-flag,
#mNlWrap.nl-actions-open .nl-internal .nl-btn-copy {
  display: flex !important;
}

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

/* Drei-Punkte im Listen-Header */
.nl-header-more {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  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(--main);
}

.nl-stamp-dropdown {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0;
  margin-left: auto;
  width: 232px;
}

.nl-stamp-dropdown-item {
  padding: 0.4rem 0.8rem;
  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;
  font-size: 0.85rem;
}

.nl-stamp-dropdown-item:hover {
  background-color: rgba(0, 203, 181, 0.2);
}

.nl-stamp-dropdown-item.nl-stamp-approved {
  opacity: 0.5;
  pointer-events: none;
}

.nl-stamp-disabled {
  opacity: 0.3 !important;
  pointer-events: none !important;
}

/* Publisher-Status-Badge "P": kein Aktionsbutton -> Cursor neutral.
   Abstand kommt aus dem normalen .btn-action-group-Flex-Gap (gleichmaessig
   wie zwischen den uebrigen Buttons), kein Extra-margin. */
.nl-p-badge {
  cursor: default;
}


/* Blacklisten-Pills (Kampagne erstellen): 4-Spalten-Layout auf Desktop.
   Breite stand vorher inline (width:calc(25% - 0.375rem) !important) -> jetzt
   klassenbasiert, damit Mobile auf 1 Item pro Zeile ueberschreiben kann. */
.bl-set-item {
    width: calc(25% - 0.375rem);
}

/* Herkunfts-Marker: von jd-leads gelieferte Leads (Subscriber-Liste getUser,
   Desktop + Mobile). Nur das weisse jd-leads-Logo, kein Hintergrund — sitzt direkt
   auf dem dunklen Listenitem/Modal-Hintergrund. */
.lead-origin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}
.lead-origin-badge img {
    height: 24px;
    width: auto;
    display: block;
}
/* Fester Marker-Slot in Logo-Breite: Logo bzw. Status-Icon sitzen zentriert auf
   derselben Achse -> E-Mail-Spalte startet ueber alle Zeilen buendig. */
.lead-marker-slot {
    width: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

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

   Die Schalter standen als eine Reihe nebeneinander, Bedienelement oben und
   Beschriftung darunter. Kuenftig untereinander, je Zeile zweispaltig ueber
   die volle Breite: Beschriftung links, Bedienelement rechts, getrennt nur
   durch eine feine Linie (User-Wunsch 30.08.2026, wie in jd-partner).

   🛑 Das ist bewusst KEINE Aenderung an der globalen `.switch-button`-Regel:
      die Huelle steckt plattformweit in Modalen und Kopfzeilen — 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. 4590) 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. */
    #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;
        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`. 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;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   .switch-button-zeile — dasselbe Zeilen-Raster wie im Profil-Reiter
   „Einstellungen", aber als frei verwendbare Variante statt an eine ID
   gebunden. Beschriftung links, Schalter rechts, feine Trennlinie darunter.
   Erste Verwendung: „Datenauskunft für eigene Adressen" im Werbeflächen-Modal
   (User-Wunsch 31.08.2026 — vorher eine Checkbox).

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

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

   🛑 Gilt fuer ALLE Breiten (keine `min-width`-Klammer wie beim Profil):
      Zeile mit Text links und Schalter rechts ist mobil bereits das Zielbild,
      es gibt also nichts umzuschalten.
   ───────────────────────────────────────────────────────────────────────── */
.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;
}

/* Trennlinie zwischen den Zeilen — dieselbe wie im Profil-Reiter
   „Einstellungen" (`#userSettings #notificationSettingsToolUser`, s.o.) und in
   jd-partner. Der User hat diesen Look als Vorbild benannt (31.08.2026).

   🛑 Frueher lag die Linie in einer Zusatzklasse, weil im Werbeflaechen-Modal
      nur EINE Zeile stand und ein Strich darunter in der Luft haengt. Seit dem
      Umbau des ganzen Reiters sind es fuenf — jetzt gehoert sie zum Standard.
      Die Zusatzklasse bleibt als Selektor erhalten, damit bestehende Verwender
      nicht brechen; sie setzt nur nichts mehr zusaetzlich.

   🛑 Die LETZTE Zeile bekommt keine Linie. `:last-child` allein genuegt hier
      nicht: Die Zeilen liegen teils in eigenen `.row > .col`-Bloecken, sind
      also nicht immer Geschwister. Deshalb greift zusaetzlich die
      `...-ohne-linie`-Klasse, die das Template auf der letzten Zeile setzt. */
.switch-button.switch-button-zeile,
.einstellung-zeile {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

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

/* 🛑 Der Schalter-Koerper nutzt `height: 100%` — in der Zeile gaebe es keine
   Bezugshoehe mehr und er kollabierte. Darum feste Masse. */
/* Der Schalter sitzt MITTIG in derselben 12rem-Spalte wie die Eingabefelder
   darueber — sonst klebte der nur 58px breite Koerper an der rechten Kante,
   waehrend die Felder mittig in ihrer Spalte stehen (User-Wunsch 31.08.2026).

   🛑 `.switch-outer` traegt das gesamte Aussehen (Hintergrund, Rundung,
      Innenschatten) und MUSS 58x28px bleiben. Die Spaltenbreite liegt deshalb
      auf der Huelle `.einstellung-zeile-spalte` darum herum, nicht hier — ein
      `flex: 0 0 12rem` an diesem Element streckte den Koerper auf 192px und
      zerstoerte die Rundung (im Browser gemessen).

   🛑 Feste Hoehe bleibt 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 + Info-Hinweis stehen nebeneinander, nehmen den Rest der Zeile.
   `min-width: 0` laesst langen Text umbrechen, statt den Schalter 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;
}

/* 🛑 Ohne `display` und ohne `!important` — im Browser gegengemessen:
   - Der Wrapper ist ein Flex-Container und blockifiziert seine Kinder ohnehin;
     ein `display: inline` waere wirkungslos und wuerde etwas behaupten, das nie
     eintritt.
   - `.switch-button + label` (die globale Regel mit Vorrang) trifft dieses Label
     NICHT: es liegt im Wrapper, ist also kein direktes Geschwister von
     `.switch-button`. Einzige konkurrierende Regel ist `* { margin: 0 }`. */
.switch-button.switch-button-zeile .switch-button-zeile-text label {
    margin: 0;
    font-size: 1rem;
    text-align: left;
    color: #fff;
    cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────────────
   .einstellung-zeile — dieselbe Zeile fuer EINGABEFELDER statt Schalter
   (Werbeflaechen-Modal, Reiter „Einstellungen"): Beschriftung links,
   Bedienelement rechts. Ergaenzt `.switch-button-zeile` oben, damit alle
   Zeilen des Reiters ein Raster teilen (User-Wunsch 31.08.2026).

   Vorher standen die Beschriftungen in `.custom-tooltip`, waren also nur beim
   Ueberfahren sichtbar; jetzt stehen sie fest in der Zeile.

   🛑 Hier KEIN `row-reverse`: anders als beim Schalter steht die Beschriftung
      schon im Markup vorn — `label` zuerst, Feld danach. Das Drehen war dort
      nur noetig, um `label[for]` und das bestehende JavaScript nicht anzufassen.

   🛑 Gilt fuer ALLE Breiten: Text links / Feld rechts ist mobil das Zielbild.
      Unter 480px kippt die Zeile untereinander (siehe styles-mobile.css) —
      drei nebeneinander stehende Zahlenfelder waeren dort sonst zu schmal.
   ───────────────────────────────────────────────────────────────────────── */
.einstellung-zeile {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.05rem 0.5rem;
}

/* KEIN Abstand zwischen den Zeilen — die Trennlinie ist der einzige Trenner,
   die Hoehe kommt aus dem Innenabstand. Genau so sieht der Profil-Reiter aus,
   den der User als Vorbild benannt hat (31.08.2026).

   🛑 Voraussetzung dafuer ist, dass alle Zeilen in EINEM `.row > .col`
      liegen — im Template entsprechend zusammengefasst. Lagen sie in eigenen
      `.row mt-1`-Bloecken, steuerte jeder ueber `mt-1`
      (= `margin-top: 1rem !important`) einen eigenen Abstand bei, und
      `:last-child` traefe nie die wirklich letzte Zeile. */
.einstellung-zeile,
.switch-button.switch-button-zeile {
    margin-top: 0;
}


/* Beschriftung nimmt den Rest der Zeile. `min-width: 0` laesst langen Text
   umbrechen, statt das Eingabefeld zu schieben. */
.einstellung-zeile .einstellung-zeile-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    text-align: left;
    color: #fff;
    cursor: pointer;
}

/* Die rechte Spalte: 12rem breit, derselbe Wert wie die Sprachwahl im
   Profil-Reiter. Sie ist eine eigene Huelle (`.einstellung-zeile-spalte`), in der
   das Bedienelement zentriert sitzt — Eingabefeld wie Schalter. Dadurch stehen
   alle Bedienelemente des Reiters auf einer gemeinsamen MITTELACHSE, nicht nur
   auf einer gemeinsamen Aussenkante (User-Wunsch 31.08.2026).

   🛑 Die Huelle ist noetig, keine Kosmetik. Ohne sie muesste die Spaltenbreite
      am Element selbst haengen — im Browser gegengemessen, was dann passiert:
      `width: 80%` bezieht sich auf die ZEILE statt auf die Spalte (208px statt
      154px), und `flex: 0 0 12rem` am Schalter streckt dessen Koerper auf 192px
      und zerstoert die Rundung. Erst die Huelle trennt „Platz der Spalte" von
      „Groesse des Bedienelements" sauber. */
.einstellung-zeile .einstellung-zeile-spalte,
.switch-button.switch-button-zeile .einstellung-zeile-spalte {
    /* 40 % der Zeile statt fixer 12rem: Das Werbeflaechen-Modal ist breit (ueber
       1900px auf einem grossen Bildschirm), und eine feste Spalte liess die
       Felder darin verloren schmal wirken — die Flaeche blieb ungenutzt
       (User-Wunsch 31.08.2026). Prozentual waechst die Spalte mit.

       🛑 `min-width` haelt sie auf schmalen Fenstern bedienbar. `max-width`
          greift erst auf sehr breiten Bildschirmen: Bei 1836px Zeilenbreite
          waeren 40 % rund 730px — ein Zahlenfeld in dieser Breite wirkt leer.
          46rem deckelt das, ohne die Flaeche zu verschenken (gemessen). */
    flex: 0 0 40%;
    min-width: 12rem;
    max-width: 46rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 80 % der Spalte, mittig darin.

   🛑 `box-sizing: border-box` ist Pflicht: Das Stylesheet hat keinen globalen
      Reset dafuer, und `.input-basic` bringt `padding: 0.5rem !important` mit.
      Ohne die Angabe kaeme das Padding auf die 80 % obendrauf — gemessen 89 %
      statt 80 %.
   🛑 `.form-select` und `.input-basic` tragen `width: 100% !important`; deshalb
      braucht auch die Prozentbreite hier `!important`. */
.einstellung-zeile .einstellung-zeile-feld {
    /* Das Feld fuellt seine Spalte aus. Die Begrenzung uebernimmt jetzt die
       Huelle (40 % der Zeile, gedeckelt) — ein zusaetzlicher Prozentsatz hier
       machte die Felder nur wieder unnoetig schmal.

       🛑 `flex` MUSS mitgesetzt werden, nicht nur `width`: Als Flex-Item in der
       Huelle bestimmt die `flex-basis` die Breite und schlaegt `width` — eine
       stehengebliebene Basis von 12rem hielt das Feld schon einmal auf der
       falschen Groesse, obwohl `width` etwas anderes sagte ([[Gotchas#452]]). */
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    text-align: center;
}

/* Nur-Lese-Fassung derselben Zeile (Statistik, Reiter "Einstellungen").

   Sie traegt bewusst dieselben Klassen wie das echte Feld, damit Breite,
   Abstaende und Rahmen nicht auseinanderlaufen — und ist ein <span> statt
   eines <select>, also von vornherein nicht bedienbar.

   🛑 Auswahlpfeil und Innenabstand stehen hier bewusst NICHT: `.form-select`
      setzt in diesem Stylesheet bereits `background-image: none !important`
      und `padding: 0.5rem !important` (Zeile 1187 f.). Eigene Angaben dazu
      waeren entweder wirkungslos — `!important` schlaegt sie — oder toter
      Code, der vorgibt etwas zu tun ([[Gotchas#595]]).
   🛑 Was fehlt, ist allein die Hoehe: ein <select> bekommt sie vom Browser,
      ein <span> nicht. Ohne `min-height` faellt die Nur-Lese-Zeile flacher aus
      als eine echte Eingabezeile daneben. Das Flex-Paar zentriert den Text
      darin so, wie der Browser es im <select> tut. */
.einstellung-zeile .einstellung-zeile-feld-fest {
    min-height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

/* ─────────────────────────────────────────────────────────────────────────
   QUICK SEGMENT (Kampagnen-Modal, Triggermail-Modal) — dieselbe Zeile

   Die drei Filter (Status, Geschlecht, Segment) standen bisher ohne sichtbare
   Beschriftung da: der Text lag in `.custom-tooltip` und erschien nur beim
   Ueberfahren. Jetzt tragen sie dieselbe Zeile wie der Profil-Reiter —
   Beschriftung links, Auswahl rechts (User-Wunsch 07.09.2026, zuerst in
   jd-partner umgesetzt und dort abgenommen).

   🛑 Nur die Spaltenbreite weicht vom Werbeflaechen-Modal ab: dort sind es
      40 % mit Deckel bei 46rem. Hier wurde ausdruecklich die halbe Zeile
      gewuenscht („mach die ganze spaltenbreite, es sind ja zwei spalten") —
      und ohne Deckel, weil die Modale schmaler sind als das Werbeflaechen-
      Modal und die 46rem dort nie greifen wuerden.
   ───────────────────────────────────────────────────────────────────────── */
.quick-segment-zeilen .einstellung-zeile .einstellung-zeile-spalte {
    flex: 0 0 50%;
    max-width: none;
}

/* Die Segment-Auswahlliste (rechte Spalte) reicht bis zur Unterkante der
   Quick-Segment-Zeilen daneben. Sie stand vorher auf `height: 10rem` und war
   damit 160 statt 224 Pixel hoch — unter dem Kasten blieben 64 Pixel leer
   (User-Wunsch 07.09.2026).

   🛑 KEINE feste Hoehe als Ersatz: die 224 Pixel sind kein Naturgesetz, sondern
      drei Zeilen à Innenabstand plus Feldhoehe. Bei anderer Schriftgroesse oder
      einer vierten Zeile waere die Zahl still falsch. Beide Spalten liegen in
      derselben `.row`, die sie ohnehin auf gleiche Hoehe streckt (im Browser
      gemessen: beide `.col` 300px) — der Kasten muss diese Hoehe nur noch
      annehmen, dann folgt er jeder Aenderung von selbst.

   🛑 Nur ab 992px: darunter stehen die beiden Spalten untereinander, es gibt
      also keine Nachbarhoehe zu treffen, und die 10rem sind dort gewollt.
   🛑 `!important` ist noetig, weil die Hoehe im Template inline steht — sie
      bleibt dort als Rueckfallwert fuer den gestapelten Fall. */
@media (min-width: 992px) {

    /* Die Spalte selbst muss ein Flex-Container sein, sonst hat das `flex`
       darunter keinen Bezug: Reiterleiste oben in natuerlicher Hoehe, der
       Reiterinhalt nimmt den Rest.

       🛑 `min-height: 0` gehoert dazu: ohne das kann die Spalte nicht unter die
          natuerliche Hoehe ihres Inhalts schrumpfen, und der Kasten zoege die
          Reihe immer weiter auf. */
    /* 🛑 Die Hoehe kommt aus `align-items: stretch` an der REIHE, nicht aus
       `height: 100%` an der Spalte. Der Unterschied ist der ganze Punkt:

       `height: 100%` misst gegen die Hoehe der Reihe — und die Reihe ist so
       hoch wie ihr hoechstes Kind, also wie die Liste selbst. Das ist ein
       Kreis: die Liste zieht die Reihe hoch, die Reihe gibt ihr die Hoehe
       zurueck. Im Browser gemessen (07.09.2026): Reihe 381px, obwohl links nur
       284px gebraucht wurden — und mit fest gesetzten 10rem fiel sie auf 300px
       zurueck, was den Kreis belegt.

       `stretch` dagegen streckt jede Spalte auf die Hoehe der HOECHSTEN — die
       linke gibt sie vor, die rechte folgt. Kein Kreis, und es bleibt richtig,
       wenn links eine vierte Zeile dazukommt. */
    .segment-spalte-reihe {
        align-items: stretch;
    }

    .segment-spalte {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .segment-tab-content {
        /* Der Reiterinhalt nimmt die freie Hoehe der Spalte. `min-height: 0`
           erlaubt dem Kind, kleiner als sein Inhalt zu werden — ohne das
           quillt eine lange Segmentliste ueber die Spalte hinaus, statt zu
           scrollen. */
        flex: 1 1 auto;
        min-height: 0;
    }

    /* 🛑 OHNE `.active`: der Reiterinhalt hat hier nur EIN Kind, und es traegt
       die Klasse nicht in jedem der Modale. Mit `.tab-pane.active` griff die
       Regel in keinem von ihnen. */
    .segment-tab-content > .tab-pane {
        position: relative;
        height: 100%;
    }

    /* 🛑 `position: absolute` ist hier kein Kunstgriff, sondern die einzige
       Aufloesung: Solange die Liste im Fluss steht, zaehlt ihre Hoehe zur
       Reihenhoehe — und genau daran misst sie sich per `height: 100%` wieder.
       Jeder Zuwachs speist sich selbst (gemessen: 160 → 305 → 321px, Reihe
       jedes Mal mit). Absolut gesetzt faellt sie aus der Hoehenrechnung der
       Reihe heraus: die linke Spalte gibt die Hoehe allein vor, die Liste
       fuellt sie aus.

       `inset` statt `height`, damit der Aussenabstand `mt-1` (16px) oben
       automatisch beruecksichtigt ist — er zaehlt bei einer Hoehenangabe
       nicht mit, bei Positionsangaben schon. */
    /* 🛑 Die absolute Lage haengt jetzt am WRAPPER, nicht mehr an der Liste:
       seit dem Suchfeld (09.09.2026) sind es zwei Elemente. Laege sie weiter an
       der Liste, ueberdeckte diese das Suchfeld. Der Grund fuer `absolute`
       bleibt derselbe — im Fluss zaehlte die Hoehe zur Reihenhoehe, an der sich
       die Liste per `height: 100%` wieder misst ([[Gotchas#571]]). */
    .segment-tab-content .segment-such-wrapper {
        position: absolute;
        inset: 1rem 0 0 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .segment-tab-content .segment-suche {
        flex: 0 0 auto;
        margin-bottom: 0.35rem;
    }

    /* `min-height: 0` erlaubt der Liste, kleiner als ihr Inhalt zu werden —
       ohne das quillt eine lange Segmentliste ueber den Wrapper hinaus, statt
       in sich zu scrollen. */
    .segment-tab-content .segment-multi-select {
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
        margin-top: 0;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   GRUPPEN IM TRIGGERMAIL-FENSTER — Quick Segment und Bedingungen absetzen

   Das Fenster war eine durchgehend dunkle Flaeche: Empfaengerfilter, Zeitraum
   und Bedingungen liefen ineinander, ohne dass man sah, was zusammengehoert
   (User 07.09.2026: „lebt alles ein bisschen unuebersichtlich … mehr Gruen und
   Differenzierung der Bereiche").

   🛑 Kein neues Aussehen erfunden: Flaeche `--darkblue`, Rahmen 1px
      `--darkgreen`, Radius `--border` — exakt `.box_segment` (styles.css:1520),
      das im Segment-Fenster dieselbe Aufgabe hat. Farben ausschliesslich ueber
      Variablen, nie als Hexwert ([[UI CSS-Variablen]]).
   ───────────────────────────────────────────────────────────────────────── */
/* 🛑 Der Rahmen haengt an `.gruppe-abgesetzt`, NICHT an `.quick-segment-zeilen`:
   Die Quick-Segment-Klasse traegt auch die Breiten- und Mobil-Regeln und wird
   deshalb ueberall gebraucht — der Rahmen aber nur im Triggermail-Fenster
   (User 07.09.2026). In den Sendouts steht darueber ein Reiter, dort waere er
   eine zweite Umrandung um dieselbe Sache. */
.gruppe-abgesetzt {
    background-color: var(--darkblue);
    border: solid 1px var(--darkgreen);
    border-radius: var(--border);
    padding: 0.5rem 1rem 0.75rem;
    margin-top: 1rem;
}

/* Die Ueberschrift sitzt IM Rahmen, nicht darueber: so bleibt die Zuordnung
   auch dann eindeutig, wenn per Knopf weitere Bedingungen dazukommen und die
   Gruppe waechst.

   🛑 Sie wird NUR im Triggermail-Fenster gesetzt. In den Sendouts steht ueber
      der Gruppe bereits ein Reiter „Quick Segment" — dort stuende der Titel
      doppelt (User 07.09.2026). Ob ein Reiter darueber sitzt, entscheidet das
      Template, nicht diese Regel: sie greift nur, wo ein `.gruppen-titel`
      ausgegeben wird. */
/* 🛑 Die Beschriftung steht als echtes Element im Template, NICHT als
   `content:` in einem ::before — CSS-Text laeuft nicht durch `{t}` und waere
   damit nie uebersetzbar ([[Neues immer zweisprachig und mobil]]). */
.gruppen-titel {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--main);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* 🛑 Die unterste Zeile der Gruppe braucht keine Trennlinie mehr — der Rahmen
   ist jetzt die Begrenzung. Ohne das stuenden zwei Linien dicht uebereinander. */
.gruppe-abgesetzt .einstellung-zeile:last-child {
    border-bottom: 0;
}

/* Der Zeitraum-Block und die Bedingungszeilen bringen eigene Aussenabstaende
   mit; innerhalb der Gruppe verdoppeln die sich mit deren Innenabstand. */
.trigger-bedingungen-gruppe > .row:first-child {
    margin-top: 0 !important;
}

/* 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. */
/* ─────────────────────────────────────────────────────────────────────────
   SUCHBARE AUSWAHLFELDER — Kampagnen (Triggermail-Bedingungen) und Kunden
   (Kampagne erstellen/bearbeiten)

   Nachbau eines Auswahlfelds, weil ein echtes `<select>` kein Suchfeld tragen
   kann — der aufgeklappte Bereich gehoert dem Betriebssystem. Vorbild ist das
   Kunden-Dropdown in der jd-partner-Navigation (User-Wunsch 09.09.2026).

   🛑 Farben ueber Variablen, nie als Hexwert ([[UI CSS-Variablen]]). `--main`
      ist in jd-mail das Tuerkis — anders als in jd-partner, wo dieselbe
      Variable orange ist ([[Gotchas#365]]).
   ───────────────────────────────────────────────────────────────────────── */
.nl-trigger,
.cl-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,
.cl-panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 20;
    padding: 0.5rem;
    background-color: var(--darkblue);
    border: solid 1px var(--darkgreen);
    border-radius: var(--border);
}

.nl-panel .nl-suche,
.cl-panel .cl-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(--darkgreen);
    border-radius: var(--border);
    font-size: 0.95rem;
    outline: none;
}

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

.nl-panel .nl-option,
.cl-panel .cl-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,
.cl-panel .cl-option:hover {
    background-color: var(--darkgreen);
}

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

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