/* =============================================================================
   JD-Mail Einfuehrungs-Tour — CI-Styling fuer Shepherd.js 11.2.0
   Design-Spec: Obsidian/06 - JD Mail/Mail Einfuehrungs-Tutorial (Design-Spec).md

   Grundlage sind die CSS-Variablen aus styles.css (--main #00cbb5,
   --darkblue #0a0f24, --white, --border). Der Tooltip uebernimmt den
   Karten-Look der Plattform: dunkler Grund, Tuerkis-Akzent, weiche Schatten
   wie bei .mobile-header-selector / .btn_add.
   ========================================================================== */

/* Bei gescrollten, hohen Dialogen darf unter dem Seitencontainer keine weiße
   Browserfläche durch den Backdrop grau erscheinen. Der Body-Hintergrund wird
   auf die Dokumentfläche übertragen und gilt nur während der Tour. */
body.jd-tour-laeuft {
    background-color: var(--darkblue, #0a0f24);
}

/* Testadressen/Analyse: Native Aktion und Tour-Hilfe teilen sich den Kopf.
   Desktop reserviert rechts zwei getrennte Plätze; der Titel bleibt mittig. */
@media (min-width: 992px) {
    /* Der absolute Hilfe-Button bestimmt die Kopfhöhe nicht selbst. Beim
       Rechnungsfenster bleibt deshalb ein voller 40px-Platz stehen, bevor der
       vorhandene 1rem-Abstand zur türkisen Trennlinie beginnt. */
    #getRechnungen .modal-header-wrapper {
        min-height: 40px;
        justify-content: center;
    }
    #getRechnungen .modal-header-wrapper > .tour-trigger {
        width: 40px !important;
        height: 40px !important;
    }
    #getTestaddresses .modal-header-wrapper,
    #getAnalyse .modal-header-wrapper {
        min-height: 40px;
        justify-content: center;
        padding-inline: calc(80px + 1rem);
    }
    #getTestaddresses .testaddress-new-btn,
    #getAnalyse #analyseCsvBtn {
        top: 1rem !important;
        right: calc(40px + 2rem) !important;
    }
    /* Auch am schmalen Desktop bleiben beide Aktionen in ihren 40px-Plätzen. */
    #getAnalyse .modal-header-wrapper > .tour-trigger,
    #getAnalyse #analyseCsvBtn {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Mobile Plattform-Modale verwenden eine ID-Liste. Die eigenständigen
   Muster-IDs brauchen dieselben Abstände und dieselbe Ebene über dem Backdrop. */
@media (max-width: 991.98px) {
    /* Dialogtouren müssen schon vor dem Start erreichbar sein. Der native
       Schließen-Knopf belegt rechts 40px; das Fragezeichen steht daneben. */
    .modal .modal-header-wrapper:has(> .tour-trigger) {
        padding-right: 6.5rem !important;
    }
    .modal .modal-header-wrapper > .tour-trigger {
        top: 0.5rem !important;
        right: calc(0.5rem + 44px) !important;
        width: 40px;
        height: 40px;
    }
    /* Drei Kopfaktionen brauchen auf schmalen Geräten eine eigene Zeile.
       Plus bleibt links; Hilfe und Schließen rechts, der Titel mittig darunter. */
    #getTestaddresses .modal-header-wrapper {
        padding: calc(40px + 0.5rem) 0 0 !important;
    }
    #getTestaddresses .modal-header-wrapper > .tour-trigger {
        right: calc(40px + 1.5rem) !important;
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
    }
    body.jd-tour-laeuft .modal[data-jd-tour-muster-fenster] {
        padding: 1rem !important;
        z-index: 10010 !important;
    }
    body.jd-tour-laeuft .modal[data-jd-tour-muster-fenster] .modal-dialog {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
    }
    body.jd-tour-laeuft .modal[data-jd-tour-muster-fenster] .modal-content {
        min-height: 0 !important;
        max-height: calc(var(--vh-voll, 100vh) - 2rem) !important;
        /* Der mobile Dialog scrollt selbst und beschneidet einen äußeren Rahmen. */
        outline-offset: -3px;
    }
    body.jd-tour-laeuft #jdTourLeadshop .modal-content > .nav-tabs,
    body.jd-tour-laeuft [id^="getLeadloungeDataMuster"] .modal-content > .nav-tabs {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: var(--darkblue);
    }
    body.jd-tour-laeuft #jdTourLeadshop .leadshop-order-form {
        padding-bottom: calc(var(--jd-tour-untertitel-hoehe, 48px) + 8rem);
    }
}

/* --- Tooltip-Grundkoerper ------------------------------------------------- */
/* Der Kasten uebernimmt den Look der Plattform-Modale (`.mc_a` in
   styles.css): dunkler Grund mit einem Tuerkis-Schimmer in der oberen
   rechten Ecke. Dort kommt der aus einem eingebetteten Polygon-SVG; hier
   genuegt ein Verlauf — die Flaeche ist zu klein, als dass die einzelnen
   Dreiecke noch zu erkennen waeren, und ein Verlauf spart 6 KB Markup. */
.shepherd-element {
    background-color: var(--darkblue);
    background-image:
        radial-gradient(circle at 100% 0%, rgba(0, 203, 181, 0.16) 0%, rgba(0, 203, 181, 0) 55%),
        linear-gradient(135deg, rgba(0, 79, 81, 0.18) 0%, rgba(10, 15, 36, 0) 45%);
    border: 1px solid rgba(0, 203, 181, 0.16);
    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.25) 0px -3px 0px inset;
    color: var(--white);
    /* 🛑 Frueher 28rem, weil der Erklaertext im Kasten stand. Seit der Text
       als Balken unten laeuft, enthaelt der Kasten nur noch Titel,
       Fortschritt und Bedienung — 28rem waren dafuer ein leeres Rechteck von
       448x214 px mitten auf dem Dashboard, das Inhalte verdeckte, ohne etwas
       zu zeigen. Er ist jetzt so breit wie sein Inhalt. */
    max-width: 22rem;
    /* 🛑 jd-mail arbeitet mit sehr hohen z-index-Werten: Overlays und Submenues
       liegen bei 999999, die Navigation bei 999998, das Menue-Symbol bei
       999997. Ein Tooltip auf 10000 verschwindet darunter — der Power-Knopf
       stach durch die Tooltip-Flaeche. Die Tour legt sich deshalb bewusst
       ueber alles. */
    z-index: 1000002;
}

/* Shepherd setzt am Inhalts-Container eigene 5px — ohne das hier stehen seine
   Ecken ueber die Rundung des Rahmens hinaus. */
.shepherd-element .shepherd-content {
    border-radius: var(--border);
    overflow: hidden;
}

/* --- Weicher Wechsel ------------------------------------------------------ */
/* Drei Anlaeufe, hier zusammengefasst — die Zwischenstaende erklaeren, warum
   es so und nicht einfacher geloest ist:

   1. 🛑 Shepherd baut den Kasten bei JEDEM Schritt neu: der alte verschwindet
      sofort, der neue startet bei Opazitaet 0. Gemessen war rund 10 ms lang
      GAR KEIN Kasten da — das las sich als Aufblitzen bei jedem Wechsel.
   2. 🛑 Beide gleich zu blenden half nicht: am Kreuzungspunkt stehen beide auf
      0.5, und weil sie deckungsgleich liegen, sind ZWEI Titel gleichzeitig
      lesbar.
   3. 🛑 Gestaffelt entsteht wieder eine echte Luecke (gemessen: Deckung faellt
      auf 0.01) — es blitzt erneut.

   Loesung: Der NEUE Kasten ist sofort deckend und liegt oben (1000002 gegen
   1000001); nur sein Inhalt blendet ein. Der alte verschwindet unter ihm,
   waehrend das geschieht — sichtbar wird also nie eine Luecke.

   🛑 Der alte Kasten muss dabei WIRKLICH ausblenden. Stand er auf `opacity: 1`,
   blieb er als leere dunkle Flaeche fuer immer stehen: Solange der neue an
   derselben Stelle landete, deckte er ihn zu und niemand sah es — wechselte
   die Lage (Mitte -> unten), lag ploetzlich ein zweiter, leerer Kasten quer
   ueber dem Dashboard. Genau so gefunden im Schritt "Versendungs-Uebersicht". */
.shepherd-element[hidden] {
    display: block !important;
    pointer-events: none;
    opacity: 0 !important;
    transition: opacity 0.18s ease-out !important;
    z-index: 1000001 !important;
}

.shepherd-element[hidden] .shepherd-content {
    opacity: 0;
    transition: opacity 0.14s ease-out;
}

.shepherd-element .shepherd-content {
    transition: opacity 0.24s ease-in 0.1s;
}

/* Der sichtbare Kasten ist sofort deckend — Shepherd blendet sonst die ganze
   Flaeche ein, was den Zweck dieser Loesung wieder aufheben wuerde. Die
   Ueberblendung uebernimmt der Inhalt.

   🛑 `:not([hidden])` ist hier tragend, nicht kosmetisch: Shepherd NIMMT die
   Klasse `shepherd-enabled` beim Ausblenden NICHT weg — ein versteckter Kasten
   traegt sie weiter. Ohne die Einschraenkung gewinnt dieses `!important` gegen
   das Ausblenden oben, und jeder alte Kasten bleibt als deckende Flaeche
   stehen (gemessen: nach 43 Schritten 43 sichtbare Kaesten uebereinander). */
.shepherd-element.shepherd-enabled:not([hidden]) {
    opacity: 1 !important;
    transition: none;
}

/* 🛑 Der neue Kasten wird bei `left: 0` erzeugt und erst 0,3 ms spaeter auf
   seine Mitte gesetzt — gemessen ueber einen MutationObserver auf `style`:

     2.4 ms | erzeugt     | left   0
     2.7 ms | style/class | left 544   <- Sprung um 544 px

   In dieser Spanne kann der Browser ihn einmal am linken Bildrand zeichnen.
   Das ist das seitliche Wackeln beim Blaettern; drei Messversuche fanden es
   nicht, weil sie erst NACH dem Klick zu zeichnen begannen und der Kasten da
   laengst richtig stand.

   Die Positionierung selbst laesst sich nicht vorverlegen — Shepherd setzt
   sie im selben Zug, nur eben nach dem Einhaengen. Stattdessen bleibt der
   Kasten unsichtbar, SOLANGE er unpositioniert ist: `position: fixed` steht
   erst im zweiten Schritt im Inline-Stil, vorher greift diese Regel.

   Kein `transition`, damit das Sichtbarwerden nicht seinerseits blitzt. */
.shepherd-element.shepherd-enabled:not([hidden]):not([style*="position: fixed"]) {
    opacity: 0 !important;
}

/* --- Feste Ecke statt Springen -------------------------------------------- */
/* 🛑 Der Kasten stand frueher am jeweiligen Ziel und sprang dadurch bei fast
   jedem Schritt — gemessen 31 von 33 Wechseln, teils quer ueber den Schirm.
   Vier Anlaeufe, das nachtraeglich zu korrigieren, erzeugten nur ein
   sichtbares Zucken (Shepherd positioniert asynchron und ueberschreibt).

   Loesung: tour-core uebergibt kein `attachTo.on` mehr. Shepherd setzt den
   Kasten dann auf position:fixed und vergibt `shepherd-centered`; die
   Markierung und das Spotlight folgen weiterhin dem Ziel. Hier wird aus der
   Zentrierung eine feste Ecke unten rechts — dort verdeckt sie weder die
   Navigation links noch die Kopfzeile oben. */
/* Standard: mittig. Shepherd setzt das selbst (left/top 50% + translate),
   hier steht nur die Absicherung gegen fremde Regeln. */
.shepherd-element.shepherd-centered {
    position: fixed !important;
}

/* Ausweichlagen, wenn die Mitte das markierte Element verdecken wuerde.
   Welche gilt, entscheidet tour-core und setzt die Klasse. */
/* 🛑 Der Abstand nach unten muss ueber dem Mitlese-Balken bleiben. Der ist
   mindestens 48 px hoch; bei 2rem (32 px) lag der Kasten darauf und verdeckte
   den Satz, den er erklaeren soll. */
.shepherd-element.shepherd-centered.jd-tour-weicht-unten {
    left: 50% !important;
    top: auto !important;
    bottom: max(4.5rem, calc(var(--jd-tour-untertitel-hoehe, 48px) + 12px)) !important;
    transform: translateX(-50%) !important;
}

.shepherd-element.shepherd-centered.jd-tour-weicht-oben {
    left: 50% !important;
    top: 2rem !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
}

.shepherd-element.shepherd-centered.jd-tour-weicht-rechts {
    left: auto !important;
    right: 2rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.shepherd-element.shepherd-centered.jd-tour-weicht-links {
    left: 2rem !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Kein Pfeil: Durch den Abstand zum Ziel (margin am .shepherd-element) muesste
   der Pfeil die Luecke ueberbruecken und ragt dabei sichtbar aus dem Kasten.
   Der Tuerkis-Rahmen um das hervorgehobene Element zeigt ohnehin eindeutig,
   worum es geht. */
.shepherd-arrow { display: none; }

/* --- Kopfzeile ------------------------------------------------------------ */
/* 🛑 Die Selektoren sind absichtlich so lang: Shepherd setzt seine helle
   Kopfzeile ueber ".shepherd-has-title .shepherd-content .shepherd-header"
   (drei Klassen). Ein schlichtes ".shepherd-header" verliert dagegen und die
   Kopfzeile blieb hellgrau (#e6e6e6) mit weisser Schrift darauf. */
.shepherd-element .shepherd-content .shepherd-header,
.shepherd-has-title .shepherd-content .shepherd-header {
    background: transparent;
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border) var(--border) 0 0;
    padding: 0.7rem 1rem 0.5rem;
}

/* Shepherd rendert den Titel als <h3>; styles.css setzt dort
   "color: var(--white) !important". Weiss ist genau das, was wir wollen — die
   Farbe wird hier trotzdem gesetzt, damit sie nicht von der globalen h3-Regel
   abhaengt. Das !important ist noetig, um gegen jene Regel ueberhaupt
   anzukommen. */
.shepherd-element .shepherd-content .shepherd-title,
.shepherd-has-title .shepherd-content .shepherd-title {
    color: var(--white) !important;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin: 0;
    /* 🛑 Shepherd gibt dem Titel `flex: 1 0 auto` — Wachsen erlaubt, Schrumpfen
       verboten. Die Kopfzeile ist ein Flex-Container mit `justify-content:
       flex-end`, also wuchs ein zu langer Titel nach LINKS aus dem Kasten
       heraus und wurde dort abgeschnitten. Aus „Wie gut die Kampagnen
       ankommen" wurde sichtbar „e gut die Kampagnen ankommen".

       Am 05.09.2026 ueber alle 551 Schritte gemessen: 9 Titel liefen hinaus,
       der laengste 71 px („Was du mit einem Triggermail tun kannst").

       `min-width: 0` hebt die Vorgabe auf, dass ein Flex-Item nie unter seine
       Inhaltsbreite schrumpft (Gotcha #452); erst zusammen mit `flex-shrink`
       darf der Titel umbrechen statt auszubrechen. Der Kasten bleibt schmal —
       der Titel nimmt zwei Zeilen. */
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

/* Fortschritt sitzt IM Titel, rechts daneben — klein und gedaempft, damit er
   den Titel nicht verdraengt.

   🛑 Die zwei `!important` sind hier begruendet, nicht faul: styles.css setzt
   `h3 { font-size: 1rem !important; color: var(--white) !important }`, und das
   erbt an den <span> im Titel. Ohne Gegenwehr steht der Fortschritt in voller
   Titelgroesse und Weiss direkt am Titel geklebt — genau so gemessen:
   "WERBEFLAECHE3 / 44". Der Selektor traegt zusaetzlich dieselbe lange Kette
   wie die Titel-Regel darueber, sonst gewinnt schon die. */
.shepherd-element .shepherd-content .shepherd-title .tour-progress,
.shepherd-has-title .shepherd-content .shepherd-title .tour-progress {
    color: rgba(199, 199, 217, 0.45) !important;
    font-size: 0.72rem !important;
    font-weight: 400;
    letter-spacing: 0;
    margin-left: 0.55rem;
    text-transform: none;
    white-space: nowrap;
}

/* Schliessen-Kreuz — Shepherd faerbt es ueber dieselbe lange Kette. */
.shepherd-element .shepherd-content .shepherd-cancel-icon,
.shepherd-has-title .shepherd-content .shepherd-cancel-icon {
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.4rem;
    transition: color 0.15s ease;
}

.shepherd-element .shepherd-content .shepherd-cancel-icon:hover,
.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover {
    color: var(--white);
}

/* --- Textkoerper ---------------------------------------------------------- */
.shepherd-text {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.9rem;
    line-height: 1.55;
    padding: 0.9rem 1rem;
}

.shepherd-text p {
    margin-bottom: 0.6rem;
}

.shepherd-text p:last-child {
    margin-bottom: 0;
}

/* Bereichs-Liste im Navigations-Schritt der ausfuehrlichen Tour */
.shepherd-text .tour-liste {
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
}

.shepherd-text .tour-liste li {
    margin-bottom: 0.45rem;
    line-height: 1.45;
}

.shepherd-text .tour-liste li:last-child {
    margin-bottom: 0;
}

.shepherd-text .tour-liste strong {
    color: var(--main);
    font-weight: 600;
}

/* --- Fusszeile: Bedienfeld mit Pfeilen aussen ----------------------------- */
/* Aufbau wie der Plattform-Wechsel oben im Menue:

     ‹   [Automatisch] [Ton]  [Ueberspringen]   ›

   Aussen die beiden Navigationspfeile, dazwischen mittig die Optionen zum
   aktuellen Schritt. Die Pfeile stehen immer an derselben Stelle — auch auf
   dem ersten Schritt, wo es kein Zurueck gibt (dann unsichtbar, aber
   platzhaltend), damit die Mitte beim Blaettern nicht springt. */
.shepherd-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.35rem 0.5rem 0.45rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.3rem;
}

/* --- Navigationspfeile ---------------------------------------------------- */
/* Grosse Winkelzeichen wie `carousel-control-prev/next` im Seitenmenue. Dort
   sind es ‹ und › in 4rem; hier etwas kleiner, weil die Leiste
   niedriger ist als der Logo-Bereich. */
.shepherd-element .shepherd-footer .shepherd-button.jd-tour-pfeil {
    background: transparent;
    border: none;
    border-radius: var(--border);
    color: rgba(199, 199, 217, 0.55);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 2.2rem;
    line-height: 1;
    margin: 0;
    padding: 0 0.55rem 0.35rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.shepherd-element .shepherd-footer .shepherd-button.jd-tour-pfeil:not(:disabled):hover {
    background: transparent;
    color: var(--white);
}

/* Der Weiter-Pfeil traegt die Plattformfarbe — der einzige eingefaerbte
   Knopf der Leiste, damit die Hauptrichtung ohne Lesen erkennbar ist. */
.shepherd-element .shepherd-footer .shepherd-button.jd-tour-pfeil-weiter {
    color: var(--main);
    margin-left: auto;
}

.shepherd-element .shepherd-footer .shepherd-button.jd-tour-pfeil-weiter:not(:disabled):hover {
    color: var(--white);
}

/* Letzter Schritt: statt des Pfeils ein Haken. Er steht fuer "fertig", nicht
   fuer "weiter" — und ist kleiner, weil ein Haken in 2.2rem klobig wirkt. */
.shepherd-element .shepherd-footer .shepherd-button.jd-tour-pfeil-fertig {
    font-size: 1.5rem;
    padding: 0.2rem 0.7rem;
}

/* 🛑 Auf dem ersten Schritt gibt es kein Zurueck. Der Knopf bleibt trotzdem
   stehen — nur unsichtbar und ohne Klickfang. Wuerde er entfallen, ruecken
   die Optionen in der Mitte beim ersten Blaettern sichtbar zur Seite. */
.shepherd-element .shepherd-footer .shepherd-button.jd-tour-pfeil-leer {
    visibility: hidden;
    pointer-events: none;
}

/* --- Optionen in der Mitte ------------------------------------------------ */
/* Schalter zum aktuellen Schritt: klein, ohne Rahmen, gedaempft — sie
   erklaeren die Wiedergabe und konkurrieren nicht mit den Pfeilen.

   🛑 `flex: 0 0 auto` plus `nowrap`: Ohne das quetscht der Flex-Container
   "Ton aus" schmaler als seinen Text, und die Beschriftung bricht um. */
.shepherd-element .shepherd-footer .shepherd-button.shepherd-button-secondary {
    background: transparent;
    border: none;
    border-radius: var(--border);
    color: rgba(199, 199, 217, 0.5);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 0.78rem;
    margin: 0;
    padding: 0.3rem 0.55rem;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.shepherd-element .shepherd-footer .shepherd-button.shepherd-button-secondary:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--white);
}

/* Der erste Schalter nach dem Zurueck-Pfeil schiebt sich von links weg, der
   Weiter-Pfeil zieht rechts — zusammen zentriert das die Optionen. */
.shepherd-element .shepherd-footer .shepherd-button.jd-tour-autoplay {
    margin-left: auto;
}

/* Laufender Ablauf in Plattformfarbe — Zustand ohne Lesen erkennbar. */
.shepherd-element .shepherd-footer .shepherd-button.jd-tour-autoplay.laeuft {
    color: var(--main);
}

/* Stummgeschaltet: gedaempft, ebenfalls ohne Lesen erkennbar. */
.shepherd-element .shepherd-footer .shepherd-button.jd-tour-ton.stumm {
    color: rgba(199, 199, 217, 0.25);
}

/* --- Spotlight (hervorgehobenes Element) ---------------------------------- */
/* Shepherd setzt .shepherd-enabled + .shepherd-target auf das Zielelement */
.shepherd-enabled.shepherd-target {
    outline: 3px solid var(--main);
    outline-offset: 0.5rem;
    border-radius: var(--border);
    /* siehe .jd-tour-rand-innen weiter unten */
    /* 🛑 Die Aussenkante liegt damit 5 px vom Ziel entfernt (3 Versatz + 2
       Breite). Das Loch im Abdunkel-Overlay muss mindestens genauso weit
       reichen — `modalOverlayOpeningPadding` in tour-core.js steht deshalb
       auf 5. Bei 4 lag ein Pixel des Rahmens unter dem Overlay und die
       Oberkante fehlte sichtbar. Wer hier etwas aendert, zieht dort mit. */
    /* Hebt das Element ueber das Abdunkel-Overlay.
       Die Staffelung folgt den hohen Werten der Plattform (siehe
       .shepherd-element): Overlay 1000000 < Ziel 1000001 < Tooltip 1000002. */
    z-index: 1000001;
}

/* 🛑 `position` steht bewusst NICHT in der Regel oben. Ein z-index wirkt nur
   an positionierten Elementen, aber ein pauschales `position: relative` reisst
   jedes absolut positionierte Ziel aus seiner Lage — die Aktionsknoepfe einer
   Kampagnenzeile sitzen mit `absolute; top:0; right:0` am rechten Rand und
   standen markiert linksbuendig UNTER der Zeile.

   tour-core misst deshalb die tatsaechliche Lage und setzt diese Klasse nur an
   Zielen, die ohnehin `static` sind. Wer schon positioniert ist, behaelt seine
   Lage und liegt trotzdem ueber dem Overlay. */
.shepherd-enabled.shepherd-target.jd-tour-hebt {
    position: relative;
}

/* Modals bilden einen eigenen Stapelkontext. Ein noch so hoher z-index am
   markierten Inhalt bleibt sonst unter dem Tour-Schleier, solange das
   umgebende Fenster selbst nur auf der Plattformebene liegt. Der Kern setzt
   diese Klasse ausschliesslich am Fenster des aktuellen Ziels und entfernt
   sie beim Wechsel und beim Tourende wieder. */
.modal.jd-tour-modal-ziel {
    z-index: 1000001 !important;
}

/* 🛑 Ziele dicht am Bildschirmrand: der Rahmen sitzt normalerweise 3px
   AUSSERHALB des Elements und landet dort im Nichts. Das AdSpace-Dropdown
   liegt bei x = 1 — links war vom Rahmen nichts zu sehen. Bei solchen Zielen
   wandert er nach innen. Die Klasse setzt tour-core. */
.shepherd-enabled.shepherd-target.jd-tour-rand-innen {
    /* Fuer Ziele, die WIRKLICH am Bildschirmrand kleben (AdSpace-Dropdown bei
       x = 1). Dort gibt es keinen Platz nach aussen, der Rahmen muss hinein. */
    outline-offset: -2px;
}

/* 🛑 Das Dashboard hat oben keinen Innenabstand: `.dash-container` beginnt bei
   y = 132, die obersten Widgets ebenfalls. Der Rahmen braucht 5 px darueber
   und wurde vom `overflow: hidden` des Containers abgeschnitten.

   Zwei Wege waren falsch:
     - Rahmen nach innen (`-2px`): Er lag dann IM Widget und schnitt quer durch
       dessen Inhalt — bei Top 3 genau ueber die Trennlinien der Raenge, was wie
       zusaetzliche Striche im Kasten aussah.
     - Rahmen buendig (`0`): 2 px liegen weiter aussen, die Oberkante fehlte
       wieder.

   Richtig ist, dem Container fuer die Dauer der Tour oben Luft zu geben. Sein
   `overflow: hidden` bleibt unangetastet — es verhindert, dass die ganze Seite
   scrollt. Die Hoehe wird um denselben Betrag verringert, damit unten nichts
   herausrutscht. */
/* 🛑 `100vh` ist hier FALSCH. Der Seiteninhalt steht unter `zoom: 0.75`
   (styles.css), `vh` rechnet aber in echten Fensterpixeln — ein Viertel der
   Hoehe geht verloren. Gemessen am 08.09.2026 bei 2560x1440: Der Container
   war ohne Tour 1326 px hoch, mit Tour nur noch 962. Die fehlenden 364 px
   blieben unten als schwarzer Streifen stehen, waehrend der Inhalt oben
   zusammengedraengt sass — gemeldet als „die Tour verwendet nicht die
   komplette Hoehe".

   `styles.css` haelt fuer genau diesen Fall `--vh-voll` bereit (133,34vh =
   100 / 0,75); der Rueckfall auf `100vh` gilt fuer Viewports ohne Zoom.
   Siehe [[Gotchas#525]]. */
body.jd-tour-laeuft .dash-container {
    /* 🛑 Die Luft fuer den Rahmen kommt NACH AUSSEN, nicht nach innen. Ein
       `padding-top` haette den Inhalt um 6 px nach unten geschoben und die
       Hoehe um denselben Betrag verringert — gemessen sassen dann alle
       Widgets 4 bis 5 px tiefer als ohne Tour. Der Nutzer will die
       Original-UI sehen, und dazu gehoert, dass sich nichts bewegt.

       Ein negatives `margin-top` schafft denselben Platz oberhalb des
       Containers, ohne seinen Inhalt anzufassen: Der Container beginnt 6 px
       hoeher, ist 6 px groesser, und jedes Widget darin bleibt, wo es war. */
    margin-top: -6px;
    padding-top: 6px !important;
    height: calc(var(--vh-voll, 100vh) - 9.5rem);
    max-height: calc(var(--vh-voll, 100vh) - 9.5rem);
}

/* 🛑 `position: relative` darf ein bereits positioniertes Ziel NICHT
   umwerfen. Die Untermenues der Navigation liegen `fixed` an einer per
   JavaScript berechneten Stelle (top/left als Inline-Style); ein relative
   macht diese Werte wirkungslos, das Menue faellt in den Textfluss und wird
   ueber die volle Breite gezogen — im Test 1600px statt 320px, quer unten am
   Bildrand statt neben seinem Punkt.
   Der z-index wirkt bei fixed ohnehin ohne zusaetzliches position. */
.shepherd-enabled.shepherd-target.submenu {
    position: fixed;
}

/* Abdunkelung des Rests der Seite (modal: true) */
.shepherd-modal-overlay-container.shepherd-modal-is-visible {
    fill: rgba(7, 11, 26, 0.75);
    opacity: 1;
    /* unter dem Tooltip und unter dem hervorgehobenen Element */
    z-index: 1000000;
}

/* 🛑 Gegen den Desktop-Zoom (styles.css: `body { zoom: 0.75 }` ab 992px).

   Shepherd setzt die Groesse des Abdunkel-SVG per JS aus `window.innerWidth`
   und `innerHeight` — also in ECHTEN Pixeln. Das SVG haengt aber am `<body>`
   und wird dort mitgezoomt. Gemessen am 05.09.2026 bei einem 1600x1000-Fenster:
   Attribut 1600x1000, dargestellt 1200x750. Rechts und unten blieb ein Viertel
   der Seite unabgedunkelt — als heller Rand neben der Abdunkelung. Genau das
   hat der Nutzer als „Schatten" gemeldet.

   Das SVG hat KEINE viewBox, sein Pfad skaliert also mit dem Element: Ohne
   Korrektur sass auch das Loch um ein Viertel daneben.

   Der Gegen-Zoom hebt den body-Zoom fuer dieses eine Element auf, damit
   Shepherds echte Pixel wieder echte Pixel sind. Den Faktor setzt
   `tour-core.js` beim Start aus `jdZoom()`; ohne Zoom ist er 1 und die Regel
   wirkungslos. Deshalb steht hier kein fester Wert — wer den Zoom in
   styles.css aendert, muss hier nichts nachziehen.

   🛑 NICHT auf den Erklaerkasten anwenden. Der soll mit der Oberflaeche
   schrumpfen, sonst steht ein Kasten in Originalgroesse neben verkleinerten
   Kacheln. Gemessen: 264x83 mitgezoomt gegen 352x109 ohne. Seine Lage stimmt
   ohnehin — bei 1600x1000 stand er mittig auf 668/459, das ist exakt die
   Fenstermitte. */
.shepherd-modal-overlay-container {
    zoom: var(--jd-tour-gegenzoom, 1);
}

/* Dieselbe Rechnung noch einmal — fuer die beiden Elemente, die `tour-core.js`
   bei Gruppen-Schritten (`zieleZusammen`) selbst baut und ebenfalls ans <body>
   haengt:

     .jd-tour-overlay        Aussenpfad aus `innerWidth`/`innerHeight`,
                             Loecher aus `getBoundingClientRect()`
     .jd-tour-sammelrahmen   left/top aus `getBoundingClientRect()`

   Beides sind ECHTE Bildschirmpixel, beide Elemente sitzen im gezoomten <body>
   — also landeten sie auf drei Vierteln. Gemessen am 05.09.2026 auf
   getClient.php bei 1600x1000: die Kacheln lagen bei 686,238, der Anker bei
   515,178 (Faktor 0,751), und das Overlay deckte 1200x750 statt 1600x1000 —
   rechts und unten blieb die Seite hell stehen.

   🛑 Der Anker ist unsichtbar, sein Fehler aber nicht folgenlos: Shepherd
   misst ihn fuer die Lage des Erklaerkastens. Ein Anker um ein Viertel
   daneben verschiebt den Kasten mit. */
.jd-tour-overlay,
.jd-tour-sammelrahmen {
    zoom: var(--jd-tour-gegenzoom, 1);
}

/* --- Modal-Backdrop: hier bewusst KEINE Regel mehr ----------------------- */
/* 🛑 Hier stand vom 05. bis 06.09.2026 eine Entschaerfung, weil `styles.css`
   den Backdrop mit `top: unset` unter den <body> schob und er nichts abdeckte.
   Am 06.09.2026 hat claude-header-umbruch die Ursache behoben — auf allen drei
   Plattformen und auf stable — und zwar mit `--vw-voll`/`--vh-voll` statt
   `100vw/100vh`.

   Damit korrigierten ZWEI Regeln denselben Fehler, und sie addierten sich:
   gemessen 2133x1333 statt 1600x1000 bei einem 1600x1000-Fenster, also genau
   den Gegen-Zoom zu viel. Ohne Tour stimmte es, mit Tour nicht — mein Pflaster
   hat ihre Reparatur wieder verbogen.

   Deshalb ersatzlos entfernt. Wer hier erneut etwas gegen den Backdrop
   schreiben will, misst vorher einmal OHNE Tour: Ist es dort schon richtig,
   gehoert die Korrektur nicht hierher. */

/* --- Kein Schatten, wenn das Ziel nicht ins Bild passt -------------------- */
/* 🛑 Eine Aussparung kann nur stimmen, solange ihr Ziel ganz sichtbar ist.
   Ragt es darueber hinaus, beschneidet Shepherd das Loch auf den sichtbaren
   Teil — und die Schnittkante laeuft als harter Absatz quer durch das Ziel.

   Gemessen am 05.09.2026 auf getLeadshop.php, Schritt „Das Bestellfenster":
   Fenster 1282 px hoch, Bildschirm 1000. Das Loch reichte von y=184 bis y=732
   statt vom oberen Fensterrand bis zum unteren Bildrand — quer durch das
   Fenster lief eine sichtbare Kante, oben dunkel, unten hell.

   Bei einem Ziel, das den Bildschirm ohnehin ausfuellt, ist die Abdunkelung
   entbehrlich: Es gibt nichts daneben, wovon sie ablenken koennte. Der Rahmen
   allein zeigt, worum es geht.

   Gesetzt und entfernt wird die Klasse von `schattenNachZiel` in
   tour-core.js — vor jedem Schritt neu, damit sie nie haengenbleibt. */
body.jd-tour-ohne-schatten .shepherd-modal-overlay-container,
body.jd-tour-ohne-schatten .jd-tour-overlay {
    display: none !important;
}

/* --- Seitenmenue waehrend der Menuestrecke offen halten -------------------- */
/* 🛑 Das Menue laesst sich mit JavaScript nicht zuverlaessig offenhalten: es
   schliesst auf DREI Wegen — ueber den eigenen Klick-ausserhalb-Handler in
   _navigation.tpl, ueber Bootstraps Backdrop und ueber dessen Fokus-Falle.
   Fuenf Anlaeufe (dont-close-nav, backdrop:false, Instanz-Neuanlage) haben es
   nicht gehalten.

   Deshalb hier per CSS: solange <body> die Klasse traegt, ist das Menue
   sichtbar — unabhaengig davon, ob Bootstrap die show-Klasse gerade entfernt
   hat. Gesetzt und entfernt wird sie von der Tour (menueOeffnen /
   menueSchliessen in tour-dashboard-lang.js).

   Die Werte spiegeln Bootstraps eigene .offcanvas.show-Regel. */
body.jd-tour-nav-offen #navigation.offcanvas {
    visibility: visible !important;
    transform: none !important;
}

/* 🛑 KEINE Verschiebung des Inhalts, obwohl das Menue ihn ueberdeckt.
   Der Versuch stand hier zwei Anlaeufe lang und war falsch gedacht:

   Das Seitenmenue ist ein Offcanvas — es legt sich UEBER die Seite, statt sie
   zu verschieben. Weil die Tour es ueber acht Schritte offenhaelt, lag die
   linke Werte-Spalte darunter, und ich habe den Inhalt beiseitegeschoben.
   Damit sah die Tour aber anders aus als die Anwendung selbst, und genau das
   ist der Fehler: „Ziel ist es, die Original-UI in der Tour darzustellen"
   (Nutzer, 08.09.2026).

   In der echten Anwendung ueberdeckt das aufgeklappte Menue den Inhalt. Also
   tut es das in der Tour auch. Was darunter liegt, ist waehrend der
   Navigations-Schritte ohnehin nicht das Thema — erklaert werden die
   Menuepunkte, und die stehen im Menue. */


/* --- Gruppen-Markierung ---------------------------------------------------- */
/* Der Sammelrahmen dient NUR als Anker: er sagt Shepherd, wo der Kasten stehen
   soll und wo das Spotlight-Loch hingehoert. Sichtbar ist er nicht — sonst
   wuerde er bei zweispaltigem Layout Nachbarkacheln mit einrahmen. */
.jd-tour-sammelrahmen {
    background: transparent;
    pointer-events: none;
}

.jd-tour-sammelrahmen.shepherd-enabled.shepherd-target {
    outline: none;
}

/* …ausser er umschliesst Ziele, die ohnehin dicht beieinander liegen. Dann
   ist EIN Rahmen um alles richtig — zwei Rahmen um zwei Zeilen derselben
   Karte sehen zerrissen aus. Wann das gilt, entscheidet `istKompakt` im
   Kern; hier steht nur, wie es aussieht. */
.jd-tour-sammelrahmen--sichtbar,
.jd-tour-sammelrahmen--sichtbar.shepherd-enabled.shepherd-target {
    outline: 3px solid var(--main);
    outline-offset: 0.5rem;
    border-radius: var(--border);
}

/* Eigene Abdunkelung fuer Gruppen-Schritte: Shepherds Overlay kann nur EIN
   Loch, hier braucht es eines pro Kachel. Farbe und Ebene wie beim Original. */
.jd-tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000000;
    pointer-events: none;
}

.jd-tour-overlay path {
    fill: rgba(7, 11, 26, 0.75);
}

/* Stattdessen bekommt JEDE Kachel der Gruppe ihren eigenen Rahmen — passgenau
   auch dann, wenn die Gruppe im Gitter nicht als Rechteck liegt. */
.jd-tour-mit-markiert {
    outline: 3px solid var(--main);
    outline-offset: 0.5rem;
    border-radius: var(--border);
    position: relative;
    z-index: 1000001;
}

/* --- Auswahl kurz / ausfuehrlich ------------------------------------------ */
/* Erscheint beim Klick auf den Hilfe-Knopf, wenn es zur Seite beide Fassungen
   gibt. Gleicher rahmenloser Look wie der Tooltip.
   position:fixed, weil der Knopf sowohl in der Desktop-Icon-Leiste als auch im
   mobilen Kopfbereich sitzt — beide bilden eigene Stapelkontexte. */
.tour-auswahl {
    position: fixed;
    /* wie der Tooltip ueber die hohen Plattform-Ebenen (bis 999999) */
    z-index: 1000002;
    width: 260px;
    padding: 0.35rem;
    background-color: var(--darkblue);
    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;
}

.tour-auswahl-knopf {
    display: block;
    width: 100%;
    padding: 0.6rem 0.7rem;
    background: transparent;
    border: none;
    border-radius: var(--border);
    color: var(--white);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tour-auswahl-knopf:hover {
    background-color: rgba(255, 255, 255, 0.07);
}

.tour-auswahl-titel {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
}

.tour-auswahl-zusatz {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.35;
}

/* --- Mobile --------------------------------------------------------------- */
/* Getrennter Block gemaess Projektregel "Mobile Desktop strikt getrennt".
   Unter 992px sitzt der Tooltip als breite Karte, damit er neben schmalen
   KPI-Karten nicht ueber den Rand laeuft. */
@media (max-width: 991.98px) {
    .shepherd-element {
        max-width: calc(100vw - 1.5rem);
    }

    .shepherd-text {
        font-size: 0.88rem;
        padding: 0.8rem 0.9rem;
    }

    .shepherd-button {
        padding: 0.5rem 0.85rem;
    }

    /* Der Dashboard-Header ist position:fixed mit z-index 9998 — ein Ziel
       darin muss ueber das Abdunkel-Overlay, sonst wird es nicht angeleuchtet.
       Gleicher Wert wie die Ziele im Desktop-Block. */
    .mobile-header .shepherd-enabled.shepherd-target {
        z-index: 1000001;
    }
}

/* === Willkommens-Fenster ================================================
   Frage nach der Einfuehrung beim ersten Login. Huelle, Ueberschrift und
   Knoepfe kommen aus dem Modal-System der Plattform; hier steht nur, was
   dieses Fenster zusaetzlich braucht.
   ======================================================================== */

/* Laenglich statt hochkant — dasselbe Format wie die Anmeldebox (800 px
   breit). Drei Knoepfe nebeneinander brauchen die Breite, und das Fenster
   soll sich wie die Anmeldeseite anfuehlen.

   🛑 Am Dialog, nicht am `modal-content`: Bootstrap begrenzt den Dialog auf
   `max-width: 500px`; eine Breite nur am Inhalt liefe dagegen an. */
#tourWelcomeModal .modal-dialog {
    max-width: 800px;
}

/* 🛑 Farbe ausdruecklich setzen: Ohne sie erbt der Absatz Bootstraps
   `--bs-body-color` (rgb(33,37,41)) — fast schwarz auf dem dunklen
   Modal-Grund und damit kaum lesbar. Dieselbe Farbe wie die Knopf-
   beschriftungen der Plattform. */
.tour-welcome-frage {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: rgba(199, 199, 217, 0.9);
}

/* Die Checkbox sitzt oben links wie "Angemeldet bleiben" auf der
   Anmeldeseite.

   🛑 `z-index` ist hier tragend, nicht kosmetisch: `.remember-me-wrapper`
   ist `position: absolute` OHNE z-index. Auf der Anmeldeseite genuegt das,
   im Modal nicht — die schwebenden Umschlaege und der uebrige Inhalt liegen
   spaeter im Quelltext und damit darueber. Der Haken war dadurch sichtbar,
   liess sich aber nicht anklicken. */
.tour-welcome-haken {
    z-index: 2;
}

/* Die drei Knoepfe nebeneinander. `btn_add` bringt seinen eigenen Look mit;
   hier steht nur, dass jeder seine Spalte fuellt. */
.tour-welcome-wahl .btn_add {
    width: 100%;
}

/* Der Hinweis auf den Hilfe-Knopf. Er beruhigt die Entscheidung — deshalb
   sichtbar, aber deutlich zurueckgenommen. */
.tour-welcome-hinweis {
    text-align: center;
    font-size: 0.8rem;
    color: rgba(199, 199, 217, 0.7);   /* siehe oben: Bootstrap-Erbe waere fast schwarz */
    margin: 1rem 0 0;
    line-height: 1.5;
}

.tour-welcome-hinweis .fa-circle-question {
    color: #00cbb5;
    margin-right: 0.35rem;
}

/* === Musterzeilen in den Freigaben ======================================
   Waehrend der Freigaben-Szene steht in der Liste NUR das Beispiel: drei
   erfundene Eintraege, je einer fuer einen Zustand (wartend, Testmail
   versendet, Korrektur noetig). Sie tragen das Markup der echten Zeilen;
   hier kommt nur dazu, was ihre Knoepfe ruhigstellt.
   ======================================================================== */

/* Der bisherige Inhalt der Liste tritt zurueck — echte Eintraege wie auch der
   Hinweis "Keine offenen Freigaben". Beides gehoert der Seite und wird
   deshalb nur verborgen, nie entfernt; nach der Szene ist es unveraendert
   wieder da. */
.jd-tour-verborgen {
    display: none !important;
}

/* Die Knoepfe sind `disabled` und sollen auch so aussehen: kein Zeigefinger,
   kein Hover-Effekt. Ohne das wirken sie bedienbar und der erste Klick eines
   neuen Nutzers geht ins Leere. */
[data-jd-tour-muster] .btn_add {
    cursor: default;
    opacity: 0.85;
}

[data-jd-tour-muster] .btn_add:hover {
    filter: none;
}

/* Die Eingabefelder tragen Beispieltexte und sind ohnehin `disabled`; der
   Textcursor wuerde trotzdem Bearbeitbarkeit suggerieren. */
[data-jd-tour-muster] .form-control {
    cursor: default;
}

/* Beispielzeilen in Versendungen und Top 3 (nur wenn der Kunde dort noch
   keine eigenen Daten hat). Dieselbe Zurueckhaltung wie oben: nichts soll
   bedienbar wirken, was nur zur Erklaerung dasteht. */
[data-jd-tour-dummy] .form-control {
    cursor: default;
}

/* --- Mitlesetext-Balken -------------------------------------------------
   Der gesprochene Text zum Mitlesen, wie bei der Firmenpraesentation: fest am
   unteren Rand, ueber die volle Breite, zentriert.

   🛑 Er haengt am <body>, nicht im Kasten. Im Kasten liess der Text ihn von
   174 auf 228 px wachsen, wodurch er oefter vor das markierte Ziel rutschte.

   🛑 z-index zwischen Overlay (1000000) und Kasten (1000002): ueber der
   Abdunkelung, aber unter den Knoepfen — sonst verdeckt der Balken sie,
   sobald der Kasten nach unten ausweicht.

   🛑 WIEDERHERGESTELLT am 05.09.2026. Der Umbau des Kastens auf Pfeile aussen
   (6d4956f) hatte diesen Block mitgeloescht. Ohne ihn ist der Balken `static`
   und haengt am Seitenende statt am Fensterrand — bei laengerem Text rutscht
   er aus dem Bild. Gemessen: 48 von 52 Schritten. Aufgefallen ist es lange
   niemandem, weil er bei kurzem Text gerade noch am unteren Rand steht.
   ---------------------------------------------------------------------- */
.jd-tour-untertitel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000001;
    display: none;
    min-height: 48px;
    padding: 0.7rem 1.4rem;
    background: rgba(6, 9, 22, 0.94);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: center;
    /* Der Balken erklaert nur — er faengt keine Klicks ab, damit man die
       Oberflaeche darunter weiter bedienen kann. */
    pointer-events: none;
}

/* Nur mit Text sichtbar. Ein leerer Balken waere ein dunkler Streifen ohne
   Grund. */
.jd-tour-untertitel.hat-text {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Werbeflächen-Muster: Originalregeln aus styles-mobile.css für die eigene ID.
   Domains und Verlauf nutzen bereits die originale Klasse m-as-modal.
   Die Einstellungen hängen dort noch an den IDs echter Akten. */
@media (max-width: 991px) {
    #jdTourAdspace .einstellung-zeile,
    #jdTourAdspace .switch-button.switch-button-zeile {
        padding: 0.85rem 0.25rem !important;
        gap: 0.75rem !important;
    }
    #jdTourAdspace .einstellung-zeile .einstellung-zeile-text,
    #jdTourAdspace .switch-button.switch-button-zeile .switch-button-zeile-text {
        font-size: 0.9rem !important;
    }
    #jdTourAdspace .einstellung-zeile .einstellung-zeile-spalte,
    #jdTourAdspace .switch-button.switch-button-zeile .einstellung-zeile-spalte {
        flex: 0 0 40% !important;
        min-width: 8rem !important;
        max-width: none !important;
    }
    #jdTourAdspace .einstellung-zeile .einstellung-zeile-feld {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: none !important;
    }
    /* Beschriftungen kommen aus derselben Übersetzung wie der Desktop-Kopf. */
    #jdTourAdspace [data-jd-tour-label]::before {
        content: attr(data-jd-tour-label) !important;
    }
}
@media (max-width: 480px) {
    #jdTourAdspace .einstellung-zeile {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.4rem !important;
    }
    #jdTourAdspace .einstellung-zeile .einstellung-zeile-spalte {
        flex: 1 1 auto !important;
        width: 100% !important;
    }
    #jdTourAdspace .einstellung-zeile .einstellung-zeile-feld {
        text-align: left !important;
    }
    #jdTourAdspace .switch-button.switch-button-zeile {
        flex-direction: row-reverse !important;
    }
}

/* Mobile Musterformulare: lokale Scrollschritte behalten ihre Reiter im Blick. */
@media (min-width: 992px) {
    body.jd-tour-laeuft [id^="getLeadloungeDataMuster"] .modal-content,
    body.jd-tour-laeuft #jdTourLeadshop .modal-content {
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
    body.jd-tour-laeuft [id^="getLeadloungeDataMuster"] .modal-content > .nav-tabs,
    body.jd-tour-laeuft #jdTourLeadshop .modal-content > .nav-tabs {
        position: sticky;
        top: 0;
        z-index: 4;
        background-color: var(--darkblue);
    }
}
@media (max-width: 991px) {
    body.jd-tour-laeuft #setSendoutPage[data-jd-tour-formular] .modal-content > form {
        padding-bottom: calc(var(--jd-tour-untertitel-hoehe, 48px) + 8rem);
    }
    body.jd-tour-laeuft [data-jd-tour-formular] .modal-content > .nav-tabs,
    body.jd-tour-laeuft [data-jd-tour-formular] .modal-content > form > .nav-tabs {
        position: sticky;
        top: 0;
        z-index: 4;
        background-color: #0a0f24;
    }
}