/* ============================================
   SVG ICON STYLING - FORCE COLOR INHERITANCE
   ============================================ */

/* Make SVG icons inherit color from parent element */
.process-overview-number svg,
.process-overview-number i,
.process-overview-icon svg,
.process-overview-icon i,
.process-scroll-number svg,
.process-scroll-number i,
.elementor-widget-process_overview svg,
.elementor-widget-process_timeline svg {
    fill: currentColor !important;
    color: inherit !important;
    width: 1em !important;
    height: 1em !important;
}

/* Ensure parent elements set the color */
/* Icon in red box at top - should be WHITE */
.process-overview-number,
.process-overview-number svg,
.process-overview-number i {
    color: white !important;
}



/* Timeline feature icons - should inherit from inline style or control */
.process-scroll-step .feature-icon,
.process-scroll-step li i,
.process-scroll-step li svg {
    color: inherit !important;
    fill: currentColor !important;
}

/* Override Elementor's default icon styles */
.elementor-widget-process_overview .elementor-icon,
.elementor-widget-process_timeline .elementor-icon,
.process-overview-number .elementor-icon,
.process-overview-icon .elementor-icon {
    fill: currentColor !important;
    color: inherit !important;
}

.elementor-widget-process_overview .elementor-icon svg,
.elementor-widget-process_timeline .elementor-icon svg {
    fill: currentColor !important;
}

/* ============================================
   BUTTON STYLING - HIGH SPECIFICITY
   ============================================ */




/* Ensure button icons inherit white color */
.process-overview-section a.btn-primary svg,
.process-overview-section a.btn-primary i,
.elementor-widget-process_overview a.btn-primary svg,
.elementor-widget-process_overview a.btn-primary i {
    fill: currentColor !important;
    color: white !important;
}

/* ============================================
   NUMBER AND ICON CONTAINERS - HIGH SPECIFICITY
   ============================================ */

/* Override any Elementor styles for number containers */
/* Groesse/Schatten an .process-scroll-number (Timeline-Sektion darueber)
   angeglichen - Admin-Anfrage 2026-07-12: gleiche Groesse wie in der
   darueberliegenden Timeline. */
.elementor-widget-process_overview .process-overview-card .process-overview-number,
.process-overview-section .process-overview-card .process-overview-number,
.process-overview-card .process-overview-number {
    display: flex;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #b00400 0%, #8b0300 100%);
    border-radius: 18px;
    color: white;
    font-size: 1.75rem;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Override any Elementor styles for icon containers */
.elementor-widget-process_overview .process-overview-card .process-overview-icon,
.process-overview-section .process-overview-card .process-overview-icon,
.process-overview-card .process-overview-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto 0;
    font-size: 1.85rem;

}

/* ============================================
   STEP-BY-STEP SCROLL PROCESS SECTION
   ============================================ */

.process-scroll-section {
    padding: 100px 0;
    background: #ffffff;
}

.process-scroll-steps {

    position: relative;
}

/* Continuous Progress Line - Background (Gray) */
.process-scroll-steps::before {
    content: '';
    position: absolute;
    left: 70px;
    /* Fester Wert statt vw-Formel (Admin-Fund 2026-08-19): der aeussere
       Wrapper .process-scroll-steps ist selbst durch die Elementor-
       Sektion auf max. 1536px "boxed" begrenzt, waechst also NICHT mit
       dem Viewport - der Abstand zwischen ihm und .process-scroll-
       container bleibt dadurch bei JEDER Breite konstant 16px (live
       gemessen bei 1400px und 1800px identisch). Die vorherige
       calc(50% - 768px + 70px)-Formel ergab bei voller Desktop-Breite
       ohnehin immer denselben festen Wert (70px = 16px Container-
       Randabstand + 54px) - jetzt direkt als fester Wert hinterlegt,
       damit die Linie exakt wie bei voller Desktop-Ansicht ununterbrochen
       an derselben Stelle bleibt, auch unterhalb 1568px (bis zum
       naechsten Breakpoint bei 1280px). */
    top: 45px;
    width: 4px;
    height: var(--max-line-height, 1400px);
    background: linear-gradient(180deg,
            rgba(176, 4, 0, 0.2) 0%,
            rgba(176, 4, 0, 0.15) 100%);
    border-radius: 2px;
    z-index: 1;
}

/* Animated Progress Line - Red (Grows with scroll) */
.process-scroll-steps::after {
    content: '';
    position: absolute;
    left: 70px;
    /* s. Kommentar bei .process-scroll-steps::before */
    top: 45px;
    width: 4px;
    height: 0;
    max-height: var(--max-line-height, 1400px);
    background: linear-gradient(180deg,
            #b00400 0%,
            #8b0300 50%,
            #b00400 100%);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
    z-index: 1;
    transition: height 0.3s ease-out;
}

.process-scroll-step {
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
}

.process-scroll-step.aos-animate {
    opacity: 1;
    transform: translateY(0);
}

/* Make timeline steps visible in Elementor editor */
.elementor-editor-active .process-scroll-step,
.elementor-preview-active .process-scroll-step {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.process-scroll-step:last-child {
    margin-bottom: 0;
}

.process-scroll-container {
    position: relative;
    max-width: 1536px;
    /* 1536px statt vorher 1200px, Admin-Fund 2026-07-14: Karte endete auf
       breiten Bildschirmen weit vor dem rechten Rand, waehrend alle anderen
       Homepage-Abschnitte + Header-Nav die Elementor-Standard-Inhaltsbreite
       von 1536px nutzen (verifiziert per Live-Messung Header-Nav-Container) */
    margin: 0 auto;
    width: calc(100% - 2rem);
}

.process-scroll-number {
    position: absolute;
    left: 0;
    /* Linksbuendig: Nummer endet bei 70px, Linie beruehrt sie bei 70px
       (s. .process-scroll-steps::before), Karte beginnt bei 96px
       (.process-scroll-content margin-left) - klar getrennt, aber
       Linie/Nummer beruehren sich fuer den Scroll-Aufleucht-Effekt */
    top: 24px;
    width: 70px;
    height: 70px;
    z-index: 2;
    /* Ueber der Linie (z-index:1), da sich beide an ihrer rechten Kante
       beruehren */
    background: linear-gradient(135deg, #f7e7e6 0%, #fbf2f2 100%);
    border: 2px solid #efcdcc;
    /* Rosa wie die Leistungen-Icons (deren rgba(176,4,0,0.1/0.2)-Werte
       als deckende Hex-Farbe berechnet, damit die Linie dahinter nicht
       durchscheint). Faerbt sich per process-animation.js
       (.is-reached-Klasse) rot, sobald die wachsende Scroll-Linie diese
       Nummer erreicht */
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: bold;
    color: #b00400;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

.process-scroll-number.is-reached {
    background: linear-gradient(135deg, #b00400 0%, #8b0300 100%);
    border-color: #b00400;
    color: white;
}

.process-scroll-content {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border: 2px solid #e5e7eb;
    border-radius: 24px;
    padding: 1.25rem;
    margin-left: 96px;
    /* Karte beginnt erst nach Nummer (0-70px) und Linie (bei 70px), damit
       nichts ueberlappt - Gutter so schmal wie moeglich gehalten */
    margin-right: 0;
    /* Admin-Fund 2026-08-20: margin-right:96px war rein optischer
       Ausgleich zum linken Nummer-/Linien-Gutter (96px), damit die Karte
       nicht unsymmetrisch wirkt.
       NACHTRAG (Admin-Fund 2026-08-22, 2267px): dieser symmetrische
       Ausgleich liess die Karte rechts spuerbar VOR dem rechten Rand der
       darueberliegenden Box (.elementor-element-91fbd07, "Nicht sicher,
       welche Leistung...") enden statt rechtsbuendig damit abzuschliessen
       - je breiter der Viewport, desto sichtbarer die Luecke (112px bei
       2267px). Rechtsbuendigkeit mit der Box darueber hat Vorrang vor der
       reinen Symmetrie zum linken Gutter - margin-right daher auf 0
       zurueckgesetzt (die Karte braucht rechts kein Nummer-/Linien-Gutter,
       nur links). */
    transition: all 0.5s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

/* Reduce text sizes within process steps */
.process-scroll-content h3 {
    font-size: 1.9rem !important;
    /* 30.4px, Admin-Wunsch 2026-07-13 (passend zur Ueberschrift des
       Beratungs-Abschnitts "Nicht sicher..."; vorher 24px, davor 36px) */
    line-height: 2.375rem !important;
    margin-bottom: 0.75rem !important;
    color: #111827 !important;
}

.process-scroll-content p,
.process-scroll-description {
    font-size: 1rem !important;
    /* 16px, Admin-Wunsch 2026-07-13 (passend zum Beratungs-Abschnitt "Nicht sicher..."; vorher 18px, davor 15px) */
    line-height: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    color: #6b7280 !important;
    overflow-wrap: anywhere;
}

.process-scroll-content li {
    font-size: 1rem !important;
    /* 16px, Admin-Wunsch 2026-07-13 (passend zur Checkliste des
       Beratungs-Abschnitts "Nicht sicher..."; vorher 14px, davor 18px) */
    color: #6b7280 !important;
}

.process-scroll-content li span {
    font-size: 1rem !important;
    /* 16px, Admin-Wunsch 2026-07-13 (vorher 14px) */
    color: #6b7280 !important;
}

.process-scroll-content li i {
    font-size: 1rem !important;
    /* Icon size 16px */
}

.process-scroll-content .gap-10 {
    gap: 1.5rem !important;
    /* Reduce gap between image and text */
}

/* Admin-Wunsch 2026-07-15: Textfeld-Breite bei allen 4 Schritten der
   "So funktioniert's"-Ablaufsektion begrenzt (urspruenglich nur Schritt
   1+3, auf Admin-Wunsch auf Schritt 2+4 erweitert - identischer Wert
   fuer alle 4). Natuerliche Grid-Breite (lg:col-span-3) liegt bei ca.
   512px, ein max-width darueber (wie hier) hat daher aktuell keine
   sichtbare Wirkung - s. ENTSCHEIDUNGEN/CHANGELOG 2026-07-15. */
.process-scroll-copy {
    max-width: 750px;
}

.process-scroll-content .space-y-4 {
    gap: 0.75rem;
    padding: 0;
    /* Reduce space between list items */
}

.process-scroll-features {
    display: grid;
    row-gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.process-scroll-features.space-y-4 > * + * {
    margin-top: 0 !important;
}

.process-scroll-feature {
    display: grid !important;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.65rem !important;
    align-items: start !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

.process-scroll-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    min-width: 1.5rem;
    margin-top: 0.1rem;
}

.process-scroll-feature-text {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.5 !important;
    white-space: normal;
}

/* Reduce badge size too */
.process-scroll-content .inline-block {
    font-size: 0.75rem !important;
    /* 12px */
    padding: 0.375rem 0.75rem !important;
}

/* Decorative Pattern */
.process-content-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 24px;
}

.process-content-pattern::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.02) 0%, transparent 70%);
    border-radius: 50%;
}

.process-content-pattern::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.015) 0%, transparent 70%);
    border-radius: 50%;
}

@media (hover: hover) and (pointer: fine) {
    .process-scroll-content:hover {
        background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
        border-color: rgba(0, 0, 0, 0.1);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
        transform: translateY(-8px);
    }
}

.process-scroll-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    transition: all 0.5s ease;
}

.process-scroll-image img {
    max-height: 300px;
    /* Limit image height */
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.process-scroll-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    pointer-events: none;
}

.process-scroll-image::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 2;
    pointer-events: none;
}

/* Hover effect removed completely */
/* .process-scroll-image:hover::before,
.process-scroll-image:hover::after,
.process-scroll-image:hover,
.process-scroll-image:hover img {
   display: none;
} */

/* Overview Section */
/* Overview Section - Neutral Premium Design */
.process-overview-section {
    margin-top: 150px;
    padding: clamp(2.5rem, 4vw, 4rem);
    background: #11172B;
    /* Dark Navy */
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.process-overview-section > .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

.process-overview-section > .text-center h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    /* !important noetig: Elementor generiert fuer dieses Widget eine
       eigene Regel mit fixer line-height:20px (post-2.css, hoehere
       Spezifitaet durch Element-ID-Klasse) - bei 48px Schriftgroesse
       ueberlappen sich dadurch umgebrochene Zeilen (Admin-Fund
       2026-08-20). E15: Fix per CSS, nicht per Elementor-Daten-Edit. */
    line-height: 1.08 !important;
    text-wrap: balance;
}

.process-overview-section > .text-center > p {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    text-wrap: pretty;
}

/* Add a subtle glow effect behind */
.process-overview-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* Zwei vormals doppelte .process-overview-card-Regeln zusammengefuehrt
   (H25 Altlasten-Bereinigung) - die zweite ueberschrieb bisher die
   schnelle 0.3s-transition der ersten mit einer langsamen "all 0.6s"-
   Transition, wodurch der Hover-Effekt zeitverzoegert wirkte (Admin-
   Feedback 2026-07-12). !important zusaetzlich noetig, da die AOS-
   Scroll-Reveal-Bibliothek (data-aos="fade-up" auf diesen Karten) eine
   eigene, ebenfalls verzoegernde transition (0.6s + 0.1s delay) auf
   opacity/transform setzt, die sonst weiterhin gewinnt (gleicher
   Mechanismus wie beim transform-!important-Fix zuvor). */
.process-overview-card {
    background: rgba(255, 255, 255, 0.03);
    /* Lighter glass */
    backdrop-filter: blur(12px);
    /* Strong blur */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    /* More modern rounded */
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    cursor: default;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
}

.process-overview-card h4 {
    transition: color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    /* !important auch auf transform noetig: AOS-Scroll-Reveal-Bibliothek
       (data-aos="fade-up" auf diesen Karten) setzt nach abgeschlossener
       Einblend-Animation ihrerseits eine transform-Eigenschaft mit
       hoeherer Prioritaet - ohne !important blieb der Lift-Effekt
       wirkungslos (Admin-Feedback: Karte hob sich beim Hover nicht mehr
       an, nur Hintergrund/Schatten aenderten sich). */
    .process-overview-card:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
        transform: translateY(-5px) !important;
    }
}



.process-overview-card h4,
.process-overview-card p,
.process-overview-card .process-overview-number,
.process-overview-card .process-overview-icon {
    transition: all 0.5s ease;
}

/* Different Icon Effect: Subtle Scale and Glow (Milder than number) */
@media (hover: hover) and (pointer: fine) {
    .process-overview-card:hover .process-overview-icon {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
        filter: brightness(1.15);
    }
}

/* Removed flash hover effects to avoid button-feel */
.process-overview-card::before,
.process-overview-card::after {
    display: none;
}

.process-overview-card .process-overview-number,
.elementor-widget-process_overview .process-overview-number,
.process-overview-number {
    display: flex;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #b00400 0%, #8b0300 100%);
    border-radius: 18px;
    color: white;
    font-size: 1.75rem;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}




.process-overview-card h4 {
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.process-overview-card p {
    position: relative;
    z-index: 1;
}

/* Responsive */
/* Admin-Fund 2026-08-19: Uebersichts-Karten ("Ihr kompletter Ablauf im
   Ueberblick", 4 Boxen nebeneinander) sollen bereits ab 1366px auf 2
   Spalten umbrechen statt erst ab 1280px - eigener, fruehere greifender
   Breakpoint, getrennt vom (unveraenderten) 1280px-Bruch der Timeline-
   Sektion darunter. */
@media (max-width: 1366px) {
    .process-overview-section > .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Admin-Fund 2026-08-20: "Leistungen"-Kacheln (Schadstoffgutachten,
   Schadstofffreimessung, Raumluftmessung, Haufwerksbeprobung,
   Elementor-Container .elementor-element-03732a9) sollen ab 1366px oben
   (Ueberschrift + Beschreibungstext) zentriert stehen - nur die
   Haken-Liste (elementor-icon-list) bleibt linksbuendig. */
@media (max-width: 1366px) {
    .elementor-element-03732a9 .elementor-widget-heading .elementor-heading-title,
    .elementor-element-03732a9 .elementor-widget-text-editor p {
        text-align: center;
    }

    .elementor-element-03732a9 .elementor-icon-list-items {
        text-align: left;
    }
}

@media (max-width: 1280px) {
    .process-scroll-container {
        width: calc(100% - 8rem);
        margin-left: 7rem;
    }

    .process-scroll-steps::before,
    .process-scroll-steps::after {
        left: 3.1rem;
    }

    .process-scroll-number {
        left: -5.4rem;
    }

    .process-scroll-content {
        padding: 1.5rem;
        margin-left: 0;
        /* Desktop-Basisregel setzt margin-left:96px (Nummer/Linie-Gutter)
           - hier ueberfluessig, da .process-scroll-container selbst
           schon per margin-left:7rem Platz fuer die aussen schwebende
           Nummer (left:-5.4rem) reserviert */
    }

    .process-scroll-image img {
        height: clamp(220px, 27vw, 280px);
    }

    .process-scroll-step {
        margin-bottom: 4rem;
    }
}

@media (max-width: 1024px) {
    /* Admin-Fund 2026-08-25: Grenze war max-width:1023px, dadurch blieb
     * bei EXAKT 1024px (Live-Test per DevTools) die volle Desktop-
     * Schrift stehen - Projektregel definiert Mobil aber als <=1024px
     * (Desktop erst ab 1025px), nicht <=1023px. Von 1023px auf 1024px
     * korrigiert, damit die Grenze mit dem site-weiten Mobil/Desktop-
     * Bruch uebereinstimmt. */
    .process-scroll-content > .grid {
        grid-template-columns: 1fr;
        gap: 1.5rem !important;
    }

    .process-scroll-content .pl-10,
    .process-scroll-content .pb-10,
    .process-scroll-content .pt-5 {
        padding: 0 !important;
    }

    .process-scroll-image {
        order: -1;
    }

    /* Admin-Wunsch 2026-08-25: Schriftgroessen bereits ab 1023px statt
     * erst ab 767px verkleinert - Projektregel "nur 2 Ansichten": Tablet-
     * Bereich (768-1023px) bekommt denselben Wert wie Mobil. Vorher blieb
     * die Ueberschrift im 768-1023px-Bereich bei voller Desktop-Groesse
     * (30.4px) stehen, obwohl die Karte durch die versetzte 1025-1299px-
     * Zwischenstufen-Optik (sc_timeline_800px_optik_staggered_css, jetzt
     * bis 0px erweitert) bereits schmaler ist als am echten Desktop -
     * zusaetzlich gab es einen unschoenen Sprung genau an der 767px-
     * Grenze (30.4px -> 24px). Die bisherigen Werte aus dem @media(max-
     * width:767px)-Block weiter unten sind daher hierher verschoben
     * (dort entfernt) statt dupliziert. */
    .process-scroll-content h3 {
        font-size: clamp(1.25rem, 6vw, 1.5rem) !important;
        line-height: 1.25 !important;
    }

    .process-scroll-content p,
    .process-scroll-description {
        margin-bottom: 1rem !important;
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
    }

    .process-scroll-content li,
    .process-scroll-content li span,
    .process-scroll-feature-text {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 767px) {
    .process-scroll-content > .grid {
        display: flex;
        flex-direction: column;
        gap: 1.1rem !important;
    }

    .process-scroll-media {
        order: 1;
    }

    .process-scroll-copy {
        order: 2;
    }
}

@media (max-width: 767px) {
    .process-scroll-section {
        padding: 3.5rem 0;
    }

    .process-scroll-step {
        margin-bottom: 2.25rem;
        padding-top: 1.5rem;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .process-scroll-container {
        /* Admin-Fund 2026-08-22 (Mobile-Seitenabstand-Pruefung): width:
           calc(100% - 2rem) + margin:0 auto addierte hier ein ZWEITES
           16px-Inset zusaetzlich zum bereits vorhandenen 16px-Basis-
           Abstand von .process-scroll-step (Elternelement) - Karte
           stand dadurch bei 32px statt dem site-weiten 16px-Standard.
           Die Nummer-Kachel ueberlappt ohnehin bereits die Karte
           (eigene absolute Positionierung), kein zusaetzlicher
           Container-Rand dafuer noetig. */
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .process-scroll-number {
        position: absolute;
        inset: 0 auto auto 1rem;
        width: 46px;
        height: 46px;
        margin: 0;
        border: 4px solid #ffffff;
        border-radius: 14px;
        font-size: 1.05rem;
        box-shadow: 0 8px 20px rgba(17, 23, 43, 0.2);
        z-index: 20;
    }

    .process-scroll-steps::before,
    .process-scroll-steps::after {
        display: none;
    }

    /* Admin-Fund 2026-08-31: der kurze, freischwebende Verbindungsstrich
       zwischen den Nummern-Badges (frueher hier als ::after-Pseudo-
       Element) wirkte bei <=767px optisch abgerissen/kaputt statt wie
       eine zusammenhaengende Linie - Admin-Entscheidung: Linie auf
       Mobil komplett entfernen statt zu reparieren, Nummern-Badges
       (s. .process-scroll-number oben) bleiben unveraendert oben links
       an jeder Kachel stehen, nur ohne Verbindungselement dazwischen. */

    .process-scroll-content {
        padding: 2rem 1rem 1rem;
        margin-left: 0;
        /* Desktop-Basisregel setzt margin-left:96px (Nummer/Linie-Gutter)
           - auf Mobil sitzt die kleine Nummer bewusst auf der Kartenecke
           (inset oben), kein Gutter noetig */
        border-width: 1px;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 12px 30px rgba(17, 23, 43, 0.08);
    }

    .process-content-pattern {
        border-radius: 18px;
    }

    /* h3/description/li-Schriftgroesse: s. @media(max-width:1023px)
     * weiter oben (Admin-Wunsch 2026-08-25, gilt jetzt einheitlich ab
     * 1023px statt erst hier ab 767px). */

    .process-scroll-feature {
        grid-template-columns: 1.35rem minmax(0, 1fr);
        gap: 0.55rem !important;
        padding: 0 !important;
        line-height: 1.55 !important;
    }

    .process-scroll-feature-icon {
        width: 1.35rem;
        min-width: 1.35rem;
        margin-top: 0.08rem;
    }

    .process-scroll-features {
        row-gap: 0.8rem;
    }

    .process-scroll-feature-text {
        line-height: 1.55 !important;
    }

    .process-scroll-image img {
        height: clamp(170px, 52vw, 235px);
    }

    .process-scroll-image {
        border-radius: 14px;
        box-shadow: 0 10px 24px rgba(17, 23, 43, 0.12);
    }

    .process-overview-section {
        clear: both;
        margin-top: 5rem;
        padding: 2rem 1.25rem;
        border-radius: 22px;
        z-index: 20;
    }

    .elementor-widget-process_overview .process-overview-section h2,
    .process-overview-section > .text-center h2 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em;
        margin-bottom: 0.85rem;
    }

    .process-overview-card {
        padding: 1.75rem 1.25rem;
        border-radius: 18px;
    }
}

@media (max-width: 640px) {
    .process-overview-section > .grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .process-overview-section > .text-center {
        margin-bottom: 2rem;
    }

    .process-overview-card {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        column-gap: 1rem;
        text-align: left;
        align-items: center;
    }

    .process-overview-card .process-overview-number,
    .process-overview-card .process-overview-icon {
        grid-row: 1 / span 2;
        margin: 0;
    }

    .process-overview-card h3,
    .process-overview-card h4,
    .process-overview-card p {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 420px) {
    .process-scroll-container {
        width: calc(100% - 1.25rem);
        margin-inline: auto;
    }

    .process-scroll-number {
        inset: 0 auto auto 0.75rem;
        width: 42px;
        height: 42px;
        border-width: 3px;
        border-radius: 12px;
        font-size: 1rem;
    }

    .process-scroll-step:not(:last-child)::after {
        left: calc(0.75rem + 20px);
    }

    .process-overview-section {
        padding-inline: 1rem;
    }
}

/* Vormaliger (hover:none)-Reset-Block hier entfernt - nicht mehr noetig,
 * da die zugehoerigen :hover-Basisregeln (process-scroll-content,
 * process-overview-card) bereits in @media (hover:hover) eingepackt sind
 * und auf Touch nie mehr greifen (E17a, 2026-07-01). */

/* ============================================
   ICON TABS WIDGET STYLING
   ============================================ */

.wwwagency-tabs-container {
    width: 100%;
}

.wwwagency-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.wwwagency-tab-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 200px;
    padding: 1.25rem 1.5rem;
}

@media (hover: hover) and (pointer: fine) {
    .wwwagency-tab-item:hover {
        background-color: #f3f4f6;
    }
}

.wwwagency-tab-item.active {
    background-color: #ffffff;
    border-bottom: 2px solid transparent;
    /* default, can be overridden by Elementor */
}

.wwwagency-tab-item .tab-icon {
    font-size: 1.5rem;
    margin-right: 1rem;
    color: #6b7280;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wwwagency-tab-item.active .tab-icon {
    color: #b00400;
    /* Default active color */
}

.wwwagency-tab-item .tab-text-content {
    display: flex;
    flex-direction: column;
}

.wwwagency-tab-item .tab-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
    transition: all 0.3s ease;
}

.wwwagency-tab-item.active .tab-title {
    color: #b00400;
}

.wwwagency-tab-item .tab-description {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.4;
    transition: all 0.3s ease;
}

.wwwagency-tabs-content-wrapper {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    margin-top: -1px;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

.wwwagency-tab-content {
    animation: fadeInTab 0.4s ease;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fix SVG sizing in tabs */
.wwwagency-tab-item .tab-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.d-flex-center .btn-primary::before,
input[type="submit"]::before {

    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
    .d-flex-center .btn-primary:hover:before,
    input[type="submit"]:hover:before {
        left: 100%;
    }
}


.btn-primary,
input[type="submit"] {
    background-color: transparent !important;
    font-size: 16px !important;
    font-weight: 600;
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
    background-image: linear-gradient(135deg, #B00400 0%, #D00500 100%) !important;
    border-style: solid !important;
    border-width: 2px 2px 2px 2px !important;
    border-color: #00000000 !important;
    border-radius: 50px 50px 50px 50px !important;
    padding: 1.25rem 1.25rem 1.25rem 1.25rem !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn-primary span,
input[type="submit"] {
    color: #fff !important;
}

@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover,
    input[type="submit"]:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    }
}

/* ============================================
   Teilnehmer Dashboard
   ============================================ */

:root {
    --sc-font-main: var(--e-global-typography-text-font-family, var(--e-global-typography-primary-font-family, inherit));
    --sc-font-heading: var(--e-global-typography-primary-font-family, var(--e-global-typography-secondary-font-family, inherit));
}

.sc-dashboard-v2,
.sc-dashboard-v2 *,
.sc-profile-popup,
.sc-profile-popup * {
    box-sizing: border-box;
    font-family: var(--sc-font-main) !important;
}

.sc-dashboard-v2 {
    color: #ffffff !important;
}

.elementor-widget-shortcode:has(.sc-dashboard-v2),
.elementor-widget-shortcode:has(.sc-dashboard-v2)>.elementor-widget-container,
.elementor-shortcode:has(.sc-dashboard-v2) {
    overflow: visible !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.sc-account-kicker {
    display: block;
    margin-bottom: 7px;
    color: #ff8a84 !important;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
}

.sc-dashboard-v2 {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: clamp(42px, 5vw, 76px);
    align-items: center;
    padding: clamp(22px, 3vw, 38px) clamp(42px, 6vw, 55px);
    animation: scDashboardIn 520ms ease both;
}

.sc-v2-profile {
    min-height: 0;
    padding: 0 clamp(36px, 4.5vw, 62px) 0 0;
    border-right: 1px solid rgba(255, 255, 255, 0.13);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.sc-v2-profile img {
    width: 132px;
    height: 132px;
    margin-bottom: 18px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.16);
}

.sc-v2-name {
    margin: 0;
    color: #ffffff !important;
    font-family: var(--sc-font-heading) !important;
    font-size: clamp(30px, 3.8vw, 42px);
    line-height: 1.1;
    font-weight: 900;
}

.sc-v2-lastname {
    color: #ff6d68;
}

.sc-v2-main,
.sc-v2-main-inner {
    min-width: 0;
    width: 100%;
}

.sc-v2-main-inner {
    max-width: none;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 3vw, 34px);
    height: 100%;
    justify-content: center;
}

.sc-v2-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: -6px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sc-v2-section-head span {
    color: #ff8a84 !important;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
}

.sc-v2-section-head strong {
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 750;
}

.sc-v2-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

.sc-v2-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    padding: 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
    animation: scDashboardItemIn 460ms ease both;
}

.sc-v2-item:nth-child(2) {
    animation-delay: 70ms;
}

.sc-v2-item:nth-child(3) {
    animation-delay: 140ms;
}

@media (hover: hover) and (pointer: fine) {
    .sc-v2-item:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.065);
        border-color: rgba(255, 255, 255, 0.14);
    }
}

.sc-v2-icon,
.sc-v2-btn-icon,
.sc-ld-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.sc-v2-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(176, 4, 0, 0.95), rgba(227, 6, 19, 0.78));
    box-shadow: 0 12px 26px rgba(176, 4, 0, 0.20);
}

.sc-v2-icon svg,
.sc-v2-btn-icon svg,
.sc-ld-btn-icon svg,
.sc-profile-popup-close svg {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sc-v2-icon svg {
    width: 24px;
    height: 24px;
}

.sc-v2-number {
    margin-bottom: 4px;
    color: #ffffff !important;
    font-family: var(--sc-font-heading) !important;
    font-size: clamp(30px, 3.3vw, 40px);
    line-height: 1;
    font-weight: 900;
}

.sc-v2-label {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 750;
}

.sc-v2-text {
    min-width: 0;
}

.sc-v2-support-actions-full {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

.sc-v2-support {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sc-dashboard-v2 .btn-primary,
.sc-save-email {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px !important;
    padding: 0.68rem 1rem !important;
    border-radius: 50px !important;
    border: 2px solid #00000000 !important;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #B00400 0%, #D00500 100%) !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.1;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    cursor: pointer;
    flex-direction: row !important;
    white-space: nowrap;
}

.sc-dashboard-v2 .btn-primary::before,
.sc-save-email::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transition: left 0.5s ease;
}

.sc-dashboard-v2 .btn-primary::after,
.sc-save-email::after {
    display: none !important;
    content: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .sc-dashboard-v2 .btn-primary:hover::before,
    .sc-save-email:hover::before {
        left: 100%;
    }

    .sc-dashboard-v2 .btn-primary:hover,
    .sc-save-email:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
        color: #ffffff !important;
    }
}

@keyframes scDashboardIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scDashboardItemIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .sc-dashboard-v2,
    .sc-v2-item {
        animation: none !important;
        transition: none !important;
    }
}

.sc-v2-btn-icon,
.sc-v2-btn-text,
.sc-dashboard-v2 .btn-primary span,
.sc-save-email span {
    position: relative;
    z-index: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    line-height: 1 !important;
    vertical-align: middle;
}

.sc-v2-btn-icon svg {
    width: 17px !important;
    height: 17px !important;
    display: block;
}

.sc-profile-popup {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 24px;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(3, 8, 16, 0.76);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sc-profile-popup.is-active {
    display: flex !important;
}

.sc-profile-popup-box {
    position: relative;
    width: min(100%, 540px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 34px;
    border-radius: 18px;
    color: #ffffff;
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

body .sc-profile-popup button.sc-profile-popup-close,
.sc-profile-popup .sc-profile-popup-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    font-size: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

@media (hover: hover) and (pointer: fine) {
    body .sc-profile-popup button.sc-profile-popup-close:hover,
    .sc-profile-popup .sc-profile-popup-close:hover {
        background: rgba(176, 4, 0, 0.08) !important;
        border-color: rgba(176, 4, 0, 0.4) !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
        transform: none !important;
    }
}

body .sc-profile-popup button.sc-profile-popup-close::before,
body .sc-profile-popup button.sc-profile-popup-close::after,
.sc-profile-popup-close::before,
.sc-profile-popup-close::after {
    display: none !important;
    content: none !important;
}

body .sc-profile-popup button.sc-profile-popup-close svg,
.sc-profile-popup-close svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    color: #ffffff !important;
}

body .sc-profile-popup .sc-profile-popup-box h3,
.sc-profile-popup-box h3 {
    margin: 0 48px 14px 0;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: var(--sc-font-heading) !important;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 900;
}

.sc-profile-popup-note {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.6;
}

.sc-profile-form-group {
    margin-bottom: 22px;
}

.sc-profile-popup-box label {
    display: block;
    margin: 0 0 9px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.sc-new-email,
.sc-new-email-repeat,
.sc-new-password,
.sc-new-password-repeat {
    width: 100%;
    min-height: 52px;
    padding: 0 15px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 15px;
    outline: none;
}

.sc-new-email:focus,
.sc-new-email-repeat:focus,
.sc-new-password:focus,
.sc-new-password-repeat:focus {
    border-color: #e30613;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.18);
}

.sc-popup-message {
    min-height: 22px;
    margin: 2px 0 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.sc-popup-message.success {
    color: #31c66b;
}

.sc-popup-message.error {
    color: #ff6b6b;
}

.sc-profile-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 24px;
}

body .sc-profile-popup .sc-save-email,
.sc-profile-popup .sc-save-email {
    width: 100% !important;
    max-width: none !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0.82rem 1.1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50px !important;
    border: 2px solid #00000000 !important;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #B00400 0%, #D00500 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: translateZ(0) !important;
    box-shadow: none !important;
}

body .sc-profile-popup .sc-save-email:focus,
.sc-profile-popup .sc-save-email:focus {
    background-image: linear-gradient(135deg, #B00400 0%, #D00500 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    transform: translateY(-2px) translateZ(0) !important;
    box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
    body .sc-profile-popup .sc-save-email:hover,
    .sc-profile-popup .sc-save-email:hover {
        background-image: linear-gradient(135deg, #B00400 0%, #D00500 100%) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        transform: translateY(-2px) translateZ(0) !important;
        box-shadow: none !important;
    }
}

body .sc-profile-popup .sc-save-email span,
.sc-profile-popup .sc-save-email span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    line-height: 1 !important;
}

.sc-save-email:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.sc-name-change-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
    margin: 0;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .sc-name-change-link:hover {
        color: #ff8a84 !important;
        transform: none !important;
    }
}

body.sc-profile-popup-open {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .sc-dashboard-v2 {
        grid-template-columns: 1fr;
        width: 100%;
        padding: clamp(22px, 4vw, 34px) clamp(24px, 5vw, 42px);
    }

    .sc-v2-profile {
        padding: 0 0 22px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    }

    .sc-v2-profile,
    .sc-v2-main-inner {
        justify-content: flex-start;
        margin-left: 0;
        max-width: none;
    }
}

@media (max-width: 760px) {
    .sc-v2-stats,
    .sc-v2-support-actions-full {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sc-v2-item {
        justify-content: flex-start;
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 15px;
    }

    .sc-v2-icon {
        width: 48px;
        height: 48px;
    }

    .sc-v2-icon svg {
        width: 22px;
        height: 22px;
    }

    .sc-v2-number {
        font-size: 30px;
    }

    .sc-v2-section-head {
        display: block;
    }

    .sc-v2-section-head strong {
        display: block;
        margin-top: 6px;
    }

    .sc-profile-popup {
        padding: 16px;
    }

    .sc-profile-popup-box {
        padding: 30px 22px 24px;
    }

    /* Admin-Auftrag 2026-07-08: Titel/Text im Profil-bearbeiten-Popup
     * bleiben auf Mobil bewusst gleich gross wie am Desktop (24px Titel /
     * shared-functions.php-Text unveraendert) - keine Mobil-Verkleinerung
     * mehr fuer diese beiden Elemente. */
}

/* ============================================
   Teilnehmer Dashboard Course Lists
   ============================================ */
.elementor-widget-shortcode,
.elementor-widget-shortcode .elementor-widget-container,
.elementor-shortcode,
.sc-ld-courses-list,
.sc-ld-course-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.sc-ld-courses-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
}

.sc-ld-course-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 260px;
    gap: 28px;
    align-items: center;
    padding: 36px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(10, 18, 38, 0.08);
    box-shadow: 0 10px 28px rgba(10, 18, 38, 0.08);
    overflow: hidden;
}

.sc-ld-course-image {
    width: 220px;
    height: 130px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef1f5;
    flex-shrink: 0;
}

.sc-ld-course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sc-ld-course-content {
    min-width: 0;
    width: 100%;
}

.sc-ld-course-title {
    display: block;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 800;
    color: #020101 !important;
    text-decoration: none !important;
    margin-bottom: 18px;
    transition: none !important;
    cursor: default;
    word-break: break-word;
}

.sc-ld-course-title-line {
    display: block;
}

.sc-ld-traffic-status {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.sc-ld-traffic-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #253047;
    white-space: nowrap;
}

.sc-ld-traffic-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    border: 3px solid #ffffff;
    box-shadow:
        0 0 0 1px rgba(10, 18, 38, 0.10),
        0 2px 8px rgba(10, 18, 38, 0.12);
    background: #d7dce3;
}

.sc-ld-status-open .sc-ld-traffic-open .sc-ld-traffic-dot {
    background: #B00400;
    border-color: #ffffff;
}

.sc-ld-status-completed .sc-ld-traffic-complete .sc-ld-traffic-dot {
    background: #2dc653;
    border-color: #ffffff;
}

.sc-ld-course-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.sc-ld-btn {
    width: 100%;
    min-height: 56px;
    border-radius: 8px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none !important;
    transition: all 0.2s ease;
    box-sizing: border-box;
    text-align: center;
}

.sc-ld-btn-open {
    background: #ffffff;
    color: #d71920 !important;
    border: 1px solid #d71920;
    box-shadow: 0 8px 18px rgba(229, 57, 53, 0.15);
}

@media (hover: hover) and (pointer: fine) {
    .sc-ld-btn-open:hover {
        transform: translateY(-1px);
        background: #d71920;
        color: #ffffff !important;
    }
}

.sc-ld-btn-cert {
    background: #ffffff;
    color: #e53935 !important;
    border: 1.5px solid #e53935;
}

@media (hover: hover) and (pointer: fine) {
    .sc-ld-btn-cert:hover {
        background: rgba(229, 57, 53, 0.06);
        color: #e53935 !important;
    }
}

.sc-ld-btn-cert-disabled {
    background: #f7f7f8;
    color: #aab0bb !important;
    border: 1.5px solid #e4e6eb;
    pointer-events: none;
    cursor: not-allowed;
}

.sc-ld-btn-icon {
    font-size: 18px;
    line-height: 1;
}

@media (max-width: 1100px) {
    .sc-ld-course-card {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .sc-ld-course-image {
        width: 200px;
        height: 120px;
    }

    .sc-ld-course-actions {
        grid-column: 1 / -1;
        flex-direction: row;
    }
}

@media (max-width: 900px) {
    .sc-ld-course-card {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sc-ld-course-image {
        width: 100%;
        height: 190px;
    }

    .sc-ld-course-actions {
        flex-direction: column;
    }

    .sc-ld-course-title {
        font-size: 19px;
    }

    .sc-ld-traffic-status {
        gap: 14px;
    }

    .sc-ld-traffic-item {
        white-space: normal;
    }
}

.sc-book-list-wrap {
    --sc-card-bg: #ffffff;
    --sc-text: #1A2332;
    --sc-muted: #1A2332;
    --sc-red: #B00400;
    --sc-red-hover: #d71920;
    --sc-green: #31c66b;
    --sc-blue-hover: #2f5fc4;

    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.sc-book-course-card {
    width: 100%;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 240px;
    gap: 36px;
    align-items: center;
    padding: 42px;
    background: var(--sc-card-bg);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    box-sizing: border-box;
}

.sc-book-image {
    width: 100%;
    height: 180px;
    border-radius: 14px;
    overflow: hidden;
    background: #1A2332;
    display: block;
    position: relative;
}

.sc-book-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.sc-book-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1A2332;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.sc-book-content {
    width: 100%;
    min-width: 0;
}

.sc-book-title {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 800;
    color: var(--sc-text);
    margin-bottom: 22px;
    word-break: break-word;
}

.sc-book-title-line {
    display: block;
}

.sc-book-status {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--sc-muted);
}

.sc-book-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--sc-green);
    border: 3px solid #ffffff;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}

.sc-book-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sc-book-btn {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none !important;
    transition: all .2s ease;
    box-sizing: border-box;
    text-align: center;
}

.sc-book-btn-primary {
    background: var(--sc-red);
    border: 1px solid var(--sc-red);
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(176, 4, 0, 0.24);
}

@media (hover: hover) and (pointer: fine) {
    .sc-book-btn-primary:hover {
        background: var(--sc-red-hover);
        border-color: var(--sc-red-hover);
        color: #ffffff !important;
        transform: translateY(-1px);
    }
}

.sc-book-btn-secondary {
    background: #ffffff;
    border: 1px solid var(--sc-red);
    color: var(--sc-red) !important;
}

@media (hover: hover) and (pointer: fine) {
    .sc-book-btn-secondary:hover {
        background: var(--sc-blue-hover);
        border-color: var(--sc-blue-hover);
        color: #ffffff !important;
        transform: translateY(-1px);
    }
}

@media (max-width: 1200px) {
    .sc-book-course-card {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .sc-book-actions {
        grid-column: 1 / -1;
        flex-direction: row;
    }
}

@media (max-width: 900px) {
    .sc-book-course-card {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 24px;
    }

    .sc-book-image {
        width: 100%;
        height: 220px;
    }

    .sc-book-title {
        font-size: 20px;
    }

    .sc-book-actions {
        flex-direction: column;
    }
}

/* Teilnehmer dashboard course polish */
.sc-ld-course-card,
.sc-book-course-card {
    border-radius: 16px;
    border: 1px solid rgba(17, 23, 43, 0.08);
    box-shadow: 0 14px 34px rgba(10, 18, 38, 0.10);
}

.sc-ld-course-image,
.sc-book-image {
    border-radius: 12px;
}

.sc-ld-btn,
.sc-book-btn {
    border-radius: 10px;
    gap: 10px;
}

.sc-ld-btn-open,
.sc-book-btn-primary {
    background: linear-gradient(135deg, #b00400 0%, #df1f16 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(176, 4, 0, 0.22);
}

@media (hover: hover) and (pointer: fine) {
    .sc-ld-btn-open:hover,
    .sc-book-btn-primary:hover {
        background: linear-gradient(135deg, #920300 0%, #c90b05 100%) !important;
        color: #ffffff !important;
    }
}

.sc-ld-btn-cert,
.sc-book-btn-secondary {
    color: #b00400 !important;
    border: 1px solid rgba(176, 4, 0, 0.28) !important;
    background: #ffffff !important;
}

@media (hover: hover) and (pointer: fine) {
    .sc-ld-btn-cert:hover,
    .sc-book-btn-secondary:hover {
        background: rgba(176, 4, 0, 0.06) !important;
        color: #920300 !important;
        border-color: rgba(176, 4, 0, 0.42) !important;
    }
}

.sc-ld-btn-cert-disabled {
    color: #8b93a3 !important;
    background: #f4f6f8 !important;
}

.sc-ld-btn-open,
.sc-book-btn-primary {
    position: relative !important;
    overflow: hidden !important;
}

.sc-ld-btn-open::before,
.sc-book-btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transition: left 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
    .sc-ld-btn-open:hover::before,
    .sc-book-btn-primary:hover::before {
        left: 100%;
    }
}

.sc-ld-btn-open span,
.sc-book-btn-primary span {
    position: relative;
    z-index: 1;
}

/* =============================================================
 * VERLINKTER TEXT - GLOBALER HOVER-STANDARD (Projektregel E17b)
 * Ruhezustand optisch unveraendert, Hover NUR roter Unterstrich.
 * Wird per JS auf Telefon-/E-Mail-Text angewendet (siehe
 * sc_footer_icons() in shared-functions.php) - hier zentral als CSS
 * hinterlegt statt in Elementor custom_css, damit die Regel auch nach
 * einer manuellen Elementor-Bearbeitung des jeweiligen Widgets bestehen
 * bleibt (Elementor ueberschreibt beim Speichern nur seine eigenen
 * Widget-Einstellungen, nicht diese Datei).
 * !important auf color noetig: Elementors globales Kit setzt
 * ".elementor-kit-7 a { color: ... }" mit hoeherer Spezifitaet
 * (0,2,0) als eine einfache Klassenregel (0,1,0) - ohne !important
 * faerbte das die Links dunkel statt die umgebende Textfarbe zu
 * erben (Admin-Fund 2026-07-17, identisches Muster wie bei den
 * globalen Button-Grundregeln in button-styles.css).
 * ============================================================= */
.sc-contact-link {
    color: inherit !important;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .sc-contact-link:hover {
        text-decoration: underline;
        text-decoration-color: #B00400;
    }
}

/* =============================================================
 * SCHADSTOFFSCHULUNG-UEBERSICHT: LEHRGANGS-KARUSSELL "Unsere
 * online Schadstoffschulungen" (/schadstoffschulung/) - Schatten
 * von Pfeilen und Karten-Button entfernt, Button-Text/-Icon im
 * Ruhezustand auf #1A2332 (Admin-Wunsch 2026-08-09).
 * Scoped auf die Elementor-Element-IDs dieses einen Karussells
 * (1d4ffa7 = Karussell-Widget, 6a63c6e = Button "Zum Lehrgangs-
 * inhalt" aus Loop-Template 22368) - andere Karussells/Buttons
 * auf der Seite nutzen andere Element-IDs und bleiben unberuehrt.
 * !important noetig, da sowohl Elementors eigene Box-Shadow-
 * Einstellung als auch dessen eigenes custom_css (gleiche
 * Selektor-Spezifitaet, gleiche Ladeposition im <head>) sonst
 * gewinnen wuerden.
 * ============================================================= */

/* Pfeile: Schatten in jedem Zustand (inaktiv + hover + focus) entfernen */
.elementor-element-1d4ffa7 .elementor-swiper-button,
.elementor-element-1d4ffa7 .elementor-swiper-button:hover,
.elementor-element-1d4ffa7 .elementor-swiper-button:focus-visible {
    box-shadow: none !important;
}

/* Button "Zum Lehrgangsinhalt": Schatten in jedem Zustand entfernen */
.elementor-element-6a63c6e .elementor-button,
.elementor-element-6a63c6e .elementor-button:hover {
    box-shadow: none !important;
}

/* Text + Pfeil-Icon im Ruhezustand: #1A2332 statt Elementor-
   Primaerfarbe (Admin-Wunsch 2026-08-09). Icon-SVG (.e-font-icon-svg)
   hat eine eigene fill-Regel (nicht currentColor) und braucht daher
   eine eigene Zeile zusaetzlich zur Textfarbe. :not(:hover):not(:focus)
   auf dem Button UND :not(:hover) auf der Karte (elementor-element-
   a92627b) sind noetig, weil unsere Regel sonst per !important auch
   dann gewinnt, wenn nur die Karte gehovert wird (Elementors Karten-
   Hover-CSS "selector:hover .elementor-button { color:#fff }" hat
   kein !important) - Hover/Focus soll in beiden Faellen (direkt auf
   dem Button UND ueber die Karte) identisch weiss bleiben
   (Admin-Korrektur 2026-08-09). :not(:active) ergaenzt (2026-08-18):
   dieselbe Elementor-Karten-custom_css bekam ein Active-Gegenstueck
   zum Hover (Touch-Press-Feedback der ganzen Kachel, s. Template
   22368) - ohne :not(:active) haette diese !important-Regel den neuen
   roten Press-Zustand auf Touch-Geraeten weiterhin ueberstimmt. */
.elementor-element-a92627b:not(:hover):not(:active) .elementor-element-6a63c6e .elementor-button:not(:hover):not(:focus):not(:active) {
    color: #1A2332 !important;
}

.elementor-element-a92627b:not(:hover):not(:active) .elementor-element-6a63c6e .elementor-button:not(:hover):not(:focus):not(:active) .e-font-icon-svg {
    fill: #1A2332 !important;
}

/* Pagination-Punkte (aktuelle Karussell-Seite) sitzen per Elementor-
   Standard am unteren Rand des reservierten Kartenschatten-Bereichs
   und wirken dadurch zu weit von den Karten entfernt. --dots-vertical-
   offset ist die von Elementor selbst genutzte CSS-Variable fuer den
   Pagination-Abstand (elementor-widget-loop-carousel .swiper-pagination-
   bullets { top: calc(var(--dots-vertical-position) + var(--dots-vertical-offset)) }).
   -38px zieht die Punkte naeher an die Karten heran (Abstand Karte-
   Punkte auf 30px, Admin-Wunsch 2026-08-09). !important noetig:
   elementor-pro/assets/css/widget-loop-carousel.min.css setzt
   dieselbe Variable ueber .elementor-widget-loop-carousel (gleiche
   Spezifitaet wie unser Selektor) und laedt nach widgets.css - ohne
   !important gewinnt sonst wieder Elementors Standardwert 0px. */
.elementor-element-1d4ffa7 {
    --dots-vertical-offset: -38px !important;
}

/* =============================================================
 * KURSKARTEN: HOVER-BILDZOOM ENTFERNT (HELL + DUNKEL/GLAESERN,
 * SCHADSTOFFSCHULUNG + STARTSEITE).
 * Admin-Wunsch 2026-08-22: der Bild-Zoom bei Hover stockelte trotz
 * mehrerer Performance-Anlaeufe (Admin-Fund 2026-08-09, s. Git-Historie)
 * weiterhin sichtbar - komplett entfernt statt weiter zu optimieren.
 * Ein anschliessend ergaenzter Glanz-Sweep-Effekt (::before) wurde auf
 * Admin-Wunsch wieder entfernt - Bild bleibt bei Hover jetzt unveraendert
 * (kein Zoom, kein Glanz, keine sonstige Animation). Element-IDs sind
 * Loop-Template-intern (nicht seitengebunden) - die Regel greift
 * dadurch automatisch ueberall, wo diese Templates eingebunden sind
 * (auch kuenftige Seiten). */
.elementor-element-a92627b:hover .elementor-element-8992f88 img,
.elementor-element-dd78d0d:hover .elementor-element-e3138b7 img {
    transform: none !important;
}

.elementor-element-8992f88 img {
    transition: filter 0.3s ease;
}

/* Admin-Wunsch 2026-08-22, Fortsetzung: statt Zoom/Glanz soll die ganze
   Karte bei Hover insgesamt heller werden (nicht nur ein hellerer Rand -
   Admin-Korrektur). filter:brightness auf die gesamte Karte, wirkt auf
   Hintergrund/Bild/Text gleichermassen.
   NACHTRAG: bei der hellen Karte (.elementor-element-a92627b,
   schadstoffschulung/) funktioniert "dunkler werden" nicht (Admin-Fund) -
   stattdessen ein hellerer Schatten-Effekt (box-shadow-Glow) bei Hover.
   Dunkle Karte (.elementor-element-dd78d0d, Startseite) bleibt bei
   filter:brightness. */
.elementor-element-a92627b,
.elementor-element-dd78d0d {
    transition: filter 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .elementor-element-dd78d0d:hover {
        filter: brightness(1.15);
    }

    .elementor-element-a92627b:hover {
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    }

    /* Admin-Wunsch 2026-08-22, weitere Ergaenzung: zusaetzlich zum
       Schatten-Glow soll bei der hellen Karte auch das Bild selbst
       leicht heller werden. */
    .elementor-element-a92627b:hover .elementor-element-8992f88 img {
        filter: brightness(1.1);
    }
}

/* =============================================================
 * GOOGLE-BEWERTUNGS-PILLE: LAYOUT-SHIFT BEIM NACHLADEN VERHINDERN
 * Performance-Audit 2026-08-14: Lighthouse identifizierte die
 * Bewertungs-Pille (Trustindex-Shortcode, "★★★★★ 5 • 22 Bewertungen"
 * im Hero-Bereich) als Verursacher von 98% des gesamten CLS-Werts
 * (0.179 von 0.182) auf der Startseite.
 * ERSTER VERSUCH (wirkungslos): min-height direkt auf .google-rating-
 * pill gesetzt - dieses Element existiert im initialen HTML noch gar
 * nicht, sondern wird erst per Trustindex-JS eingefuegt. Eine Regel
 * auf einer Klasse, die beim ersten Render noch nicht im DOM ist,
 * reserviert keinen Platz IM VORAUS, sondern greift erst in dem
 * Moment, in dem das Element ohnehin schon fertig eingefuegt wird -
 * der Sprung selbst (0 -> 48px) ist zu diesem Zeitpunkt bereits
 * passiert.
 * FUNKTIONIERENDE LOESUNG: Der umschliessende Link (per curl im
 * Server-HTML bestaetigt vorhanden, seitenuebergreifend identisch:
 * <a class="flex justify-center mb-12" href="#bewertungen">) EXISTIERT
 * dagegen bereits beim ersten Render, noch leer. Reservierung auf
 * diesem stabilen Wrapper verhindert den Sprung tatsaechlich vorab.
 * Selektor bewusst NICHT ueber die Elementor-Element-ID (diese
 * unterscheidet sich zwischen Startseite und Unterseiten trotz
 * gleichen Ursprungs-Templates - keine verlaessliche Konstante),
 * sondern ueber die stabile Trustindex-eigene Klassenkombination.
 * ============================================================= */
a.flex.justify-center.mb-12[href="#bewertungen"] {
    min-height: 48px;
}

/* Admin-Fund 2026-08-25: Auf Mobil (<=1024px) schrumpft die Pille selbst
 * (Icon 18px, Schrift 0.75rem, Padding 0.5rem 1rem -> natuerliche Hoehe
 * ca. 34px), die obige feste CLS-Reservierung von 48px blieb aber
 * unveraendert - dadurch wirkte die Pille auf Mobil genauso "dick" wie
 * die Hero-Buttons (ebenfalls 48px), waehrend sie auf Desktop sichtbar
 * duenner ist als die Buttons (48px Pille zu 56px Button). Reservierung
 * hier an die tatsaechliche Mobil-Hoehe angeglichen, damit das Desktop-
 * Verhaeltnis Button-Dicke zu Google-Pille erhalten bleibt (CLS-Schutz
 * bleibt bestehen, da 41px >= der natuerlichen Content-Hoehe von 34px). */
@media (max-width: 1024px) {
    a.flex.justify-center.mb-12[href="#bewertungen"] {
        min-height: 41px;
    }
}

/* ============================================================
   Admin-Fund 2026-08-20: Startseite, "Schadstoffschulungen"-Bereich
   (direkt vor dem Kurskarussell). Zwei-Spalten-Zeile: links Badge/
   Ueberschrift/Text/3 Buttons (Telefonische Beratung, E-Mail schreiben,
   WhatsApp schreiben - Container .elementor-element-9c7d063), rechts
   2x2-Statistik-Grid (JAHRE/TEILNEHMER/ZERTIFIZIERT/LEHRGAENGE -
   Container .elementor-element-5967d05, 4 Karten im Grid-Container
   .elementor-element-8332ff3). Elementor teilt die Zeile per flex
   50/50 auf, OHNE Ruecksicht auf den tatsaechlichen Platzbedarf der 3
   Buttons (ca. 756px in einer Zeile, flex-wrap:nowrap) - sobald
   Elementors eigener Stack-Umbruch (flex-wrap:wrap, ca. <=1366px)
   nicht mehr greift, ueberlappen sich die Buttons (Admin-Screenshot bei
   1398px, tatsaechlich betroffen ca. 1367px bis ca. 1650px, je nach
   Fensterbreite). !important noetig bei allen drei Regeln unten:
   Elementors eigene .e-con-Basisklasse (custom-frontend.min.css) setzt
   dieselben Eigenschaften mit gleicher Selektor-Spezifitaet und laedt
   NACH widgets.css im <head> (Ladereihenfolge widgets.css Index 12,
   custom-frontend.min.css Index 22) - ohne !important gewinnt bei
   Gleichstand die spaeter geladene Elementor-Regel.

   Prioritaet beim Schrumpfen (Admin-Vorgabe 2026-08-20, praezisiert
   nach Nachbesserung): Echte Zwei-Stufen-Reihenfolge in zwei separaten
   Breakpoints, KEIN durchgaengiges Zusammenschieben der Buttons schon
   bei viel Platz:
     Stufe 1 (ab 1410px): Buttons behalten ihren Ausgangsabstand (20px,
       unveraendert - keine eigene Regel noetig). Buttons-Spalte
       bekommt lediglich eine Mindestbreite von 760px (deckt die
       Buttons bei vollem 20px-Abstand, ca. 756px Bedarf), damit die
       Statistik-Spalte NICHT mehr abbekommt als noetig - sie schrumpft
       dadurch automatisch bis auf ihre eigene Mindestbreite (Padding-
       Fix unten greift immer, Elementors .e-con setzt bereits
       min-width:0).
     Stufe 2 (1367px bis 1409px): Ab hier reicht 760px links + die
       Mindestbreite der bereits voll geschrumpften Statistik-Spalte
       nicht mehr in den Container (Grenzwert 1410px = Container-Breite
       1295px = 760px Buttons + 495px Statistik-Mindestbreite + 40px
       Spaltenabstand, ermittelt ueber Container-Breite = Viewport minus
       konstant 115px Seiten-Rand, gemessen bei mehreren Breiten). Erst
       jetzt ruecken die Buttons zusammen (reduzierte Mindestbreite +
       kleinerer Buttons-Abstand), NACHDEM die Statistik-Spalte bereits
       ihr Minimum erreicht hat. */
/* Erweiterung 2026-09-10 (Admin-Wunsch, vier Lehrgangsseiten synchron):
   die Regeln dieses Blocks gelten jetzt auch fuer den Abschnitt
   "Fachkundelehrgang TRGS ..." (2898d13) - Entsprechungen 7934186
   (Textspalte), ef8bff3 (Oberzeile), 86eb8ff (Buttons), 29a0a12
   (Kennzahlen-Spalte), 4a0f735 (Kennzahlen-Raster). Referenz:
   schadstoffschulung 7f0a2a8. */
@media (min-width: 1410px) {
    .elementor-element-9c7d063,
    .elementor-element-7a0c63a,
    .elementor-element-7934186 {
        min-width: 760px !important;
    }
}

@media (min-width: 1367px) and (max-width: 1409px) {
    .elementor-element-9c7d063,
    .elementor-element-7a0c63a,
    .elementor-element-7934186 {
        min-width: 724px !important;
    }

    .elementor-element-7ddbecd,
    .elementor-element-15c81ef,
    .elementor-element-86eb8ff {
        gap: 4px !important;
    }
}

/* Admin-Fund 2026-08-20 (Nachtrag): Die 4 Statistik-Karten
   (.elementor-element-8332ff3, Grid-Kinder) hatten ueber Elementors
   Kit-Standard (post-7.css, --container-default-padding-*: 0px)
   GRUNDSAETZLICH kein Innenpadding - bei schmaler werdender Spalte
   stiess der lange Labeltext ("Zertifizierte Schulungen" etc.) direkt
   an den sichtbaren Kartenrand (Admin-Screenshot: "hier kein Rand
   mehr"). Fix unabhaengig von obigem Breakpoint (gilt auf allen
   Breiten, da der fehlende Rand kein reines Schmalbreiten-Problem ist,
   sondern grundsaetzlich fehlt).
   Nachtrag 2026-08-20 (2): Bei 1374px brach das laengste Label
   "Zertifizierte Schulungen" (213px Textbreite) trotz obigem Padding
   auf 2 Zeilen um (Admin-Fund). Die Buttons-Zeile (716px Inhaltsbreite,
   s. oben) laesst bei diesem Container keinen Spielraum mehr fuer eine
   breitere Statistik-Spalte uebrig - daher horizontales Kartenpadding
   von 14px auf 10px reduziert (WICHTIG: bleibt sichtbarer Rand, nur
   schmaler) UND Buttons-Mindestbreite (724px) sowie Buttons-Abstand
   (4px) nochmals minimal verkleinert, um der Statistik-Spalte die
   fehlenden ~15px zu geben - Prioritaet unveraendert: zuerst Statistik-
   Spalte, erst danach Buttons enger zusammen. */
.elementor-element-8332ff3 > .e-con-full,
.elementor-element-d2c26bd > .e-con-full,
.elementor-element-4a0f735 > .e-con-full {
    padding: 18px 10px !important;
}

/* Admin-Fund 2026-08-20 (Nachtrag 3): Statistik-Grid (.elementor-
   element-8332ff3, 2x2-Kartengitter) endete sichtbar VOR dem rechten
   Rand der Statistik-Spalte (.elementor-element-5967d05) - der
   Vergleichs-Block "Warum Teilnehmer..." darunter reichte dagegen bis
   ganz nach rechts, dadurch wirkten die 4 oberen Karten "eingerueckt".
   Ursache: das Grid bekam trotz display:grid + flex-Elternelement
   (align-items:normal/stretch) KEIN width:100% - computed width blieb
   bei ca. 90% der verfuegbaren Spaltenbreite (z.B. 559px statt 621px
   bei 1536px Viewport, per getBoundingClientRect verifiziert), obwohl
   grid-template-columns (repeat(2,1fr)) selbst korrekt prozentual ist.
   Live-Test bestaetigte: width:100% auf diesem Element behebt es exakt
   (danach 621px = volle Spaltenbreite). !important noetig, da Elementors
   eigene .e-con-Basisklasse ebenfalls width setzt (s. Begruendung oben
   im Datei-Kopfkommentar-Bereich zu widgets.css-Ladereihenfolge). */
.elementor-element-8332ff3,
.elementor-element-d2c26bd,
.elementor-element-4a0f735 {
    width: 100% !important;
}

/* Admin-Fund 2026-08-20 (Nachtrag 4): Sobald der "Schadstoffschulungen"-
   Bereich unterhalb 1367px auf Elementors eigenen Stack-Umbruch
   (flex-wrap:wrap) faellt, stehen Badge ("PROFESSIONELLE
   WEITERBILDUNG"), Ueberschrift, Beschreibungstext und die 3 Buttons
   (.elementor-element-9c7d063) weiterhin linksbuendig ueber der jetzt
   volle Breite einnehmenden Statistik-Kachel-Spalte - Admin-Wunsch: ab
   1366px (und darunter) alles in dieser Textspalte mittig ausrichten.
   Badge-Zeile (0dd299f) und Buttons-Zeile (7ddbecd) sind eigene
   Flex-Reihen (Icon+Text bzw. 3 Buttons nebeneinander) und brauchen
   dafuer justify-content:center statt nur text-align (das zentriert
   nur Inline-Inhalt, nicht ganze Flex-Kindelemente). !important noetig:
   9c7d063 traegt auch die Klasse "e-con-full", Elementors eigene Regel
   ".e-con-full, .e-con > .e-con-inner { text-align: var(--text-align) }"
   (custom-frontend.min.css, --text-align:initial) hat dieselbe
   Selektor-Spezifitaet und laedt NACH widgets.css im <head>. */
@media (max-width: 1366px) {
    .elementor-element-9c7d063,
    .elementor-element-7a0c63a,
    .elementor-element-7934186 {
        text-align: center !important;
    }

    .elementor-element-0dd299f,
    .elementor-element-135e3fd,
    .elementor-element-ef8bff3,
    .elementor-element-7ddbecd,
    .elementor-element-15c81ef,
    .elementor-element-86eb8ff {
        justify-content: center !important;
    }
}

/* Admin-Fund 2026-08-22: die Annahme oben ("sobald der Bereich
   unterhalb 1367px auf Elementors eigenen Stack-Umbruch faellt") stimmt
   nur teilweise - der Umbruch (flex-wrap) der Zeile mit Textspalte
   (.elementor-element-9c7d063) und Statistik-Spalte (.elementor-
   element-5967d05) erfolgt erst bei ca. <=850px Container-Breite
   (content-getrieben, kein fester Breakpoint). Im gesamten Bereich
   dazwischen (ca. 850px bis 1366px, betroffen z.B. bei 1066px) stehen
   beide Spalten daher weiterhin gequetscht nebeneinander (je ca.
   45-50% Breite) statt dass die Statistik-Kacheln in eine eigene volle
   Zeile darunter rutschen. Fix: Umbruch bis 1366px erzwungen (statt
   sich auf den unzuverlaessigen natuerlichen Wrap zu verlassen) -
   deckt zugleich den bisher unbemerkten ca. 850-1024px-Bereich mit ab
   (identisches Problem, nur noch nicht gemeldet). */
@media (max-width: 1366px) {
    .elementor-element-b1511f6 > .e-con-inner,
    .elementor-element-bb26413 > .e-con-inner ,    .elementor-element-66c653a > .e-con-inner {
        flex-direction: column !important;
    }

    .elementor-element-9c7d063,
    .elementor-element-7a0c63a,
    .elementor-element-7934186,
    .elementor-element-5967d05,
    .elementor-element-348511a,
    .elementor-element-29a0a12 {
        width: 100% !important;
    }
}

/* Admin-Wunsch 2026-08-22, Fortsetzung: sobald die Statistik-Spalte
   (s. oben) eine eigene volle Zeile bekommt, ist bei 1106-1366px
   (oberer Teil der Laptop-Stufe) genug Platz fuer alle 4 Statistik-
   Kacheln NEBENEINANDER in einer Reihe statt im bisherigen 2x2-Raster
   (Grid-Container .elementor-element-8332ff3, nativ grid-template-
   columns:repeat(2,1fr) ohne eigene Responsive-Ueberschreibung).
   Bewusst NUR fuer 1106-1366px: unterhalb 1106px (Admin-Vorgabe) soll
   das 2x2-Raster erhalten bleiben statt bei 4 Spalten zu eng zu werden -
   ebenso unterhalb 1025px (echtes Mobile, dort ohnehin zu schmal fuer
   4 Spalten, z.B. 165px/Kachel bei 768px, 91px/Kachel bei 454px, live
   gemessen) bleibt das native 2x2-Raster erhalten. */
@media (min-width: 1106px) and (max-width: 1366px) {
    .elementor-element-8332ff3,
    .elementor-element-d2c26bd,
    .elementor-element-4a0f735 {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Admin-Fund 2026-09-10 (Lehrgangsseiten): das native Raster behaelt
       bei 4 Spalten seine zweite Zeile (--e-con-grid-template-rows
       repeat(2,1fr)), die dann leer bleibt - ergab 113px Leerraum
       zwischen Kennzahlen-Kacheln und Verkaufskachel. Hier daher nur
       eine Zeile. Die Referenz (8332ff3/d2c26bd) gleicht dieselbe
       Leerzeile ueber margin-top:-130px auf "Warum Teilnehmer" aus (s.
       unten) und bleibt deshalb unveraendert. */
    .elementor-element-4a0f735 {
        --e-con-grid-template-rows: auto !important;
        grid-template-rows: auto !important;
    }
}

/* Admin-Fund 2026-08-31: Elementors eigene generierte CSS (post-2.css)
   kippt das Statistik-Grid (.elementor-element-8332ff3) unterhalb 768px
   ueber die native CSS-Variable --e-con-grid-template-columns auf
   repeat(1,1fr) - viel zu frueh, das 2x2-Raster war zu diesem Zeitpunkt
   noch nicht am Platzlimit. Live-Test (Inhalt: "999+ SCHULUNGSTEILNEHMER"
   als laengstes Label) bestaetigte sauberen Umbruch auf 2 Zeilen ohne
   Ueberlappung/Abschneiden noch bei 380px. Admin-Entscheidung 2026-08-31:
   2x2-Raster bleibt trotzdem nur bis 520px erhalten, darunter bewusst
   1 Kachel pro Reihe (Design-Vorgabe, nicht Content-Zwang). Daher
   zweigeteilt: 520-767px erzwingt 2 Spalten, <520px erzwingt (wieder)
   1 Spalte - Elementors eigener Umbruch bei 767px waere sonst hier
   ohnehin schon aktiv, wird der Klarheit halber trotzdem explizit
   gesetzt. */
@media (min-width: 520px) and (max-width: 767px) {
    .elementor-element-8332ff3,
    .elementor-element-d2c26bd,
    .elementor-element-4a0f735 {
        --e-con-grid-template-columns: repeat(2, 1fr) !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 519px) {
    .elementor-element-8332ff3,
    .elementor-element-d2c26bd,
    .elementor-element-4a0f735 {
        --e-con-grid-template-columns: repeat(1, 1fr) !important;
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* Admin-Fund 2026-08-22 (nach genauer Zerlegung des grossen Abstands
   zwischen "Warum Teilnehmer..."-Text und der 3-Icon-Zeile darunter,
   206px gesamt): setzt sich zusammen aus (1) ca. 60px echtem
   Zwischenraum (80px Elementor-eigener flex_gap auf .elementor-element-
   836dd2f, abzueglich 20px, die der Absatztext .elementor-element-
   c46761d systematisch ueber seine eigene Box .elementor-element-ce97b41
   hinausragt - ein Randfall von Elementors neuer "Atomic Widgets"-
   Hoehenberechnung, konstant ueber 1106-1366px verifiziert), (2) 48px
   Eigen-Innenabstand der Icon-Kachel-Box (.elementor-element-3d95fe2,
   padding:3rem symmetrisch oben/unten - Karten-Design, bewusst NICHT
   angetastet) und (3) ca. 98px fuer die Icon-Grafik selbst (kein
   Leerraum, sichtbarer Inhalt). Admin-Entscheidung: NUR Teil (1)
   kuerzen, Karten-Innenabstand/Icon-Grafik unangetastet lassen. Fix:
   margin-top:-40px auf 3d95fe2 (60px -> 20px), ausdruecklich nur bei
   1106-1366px. */
@media (min-width: 1106px) and (max-width: 1366px) {
    .elementor-element-3d95fe2,
    .elementor-element-caa9f3a ,    .elementor-element-b35c43e {
        margin-top: 0px !important;
    }
}

/* Admin-Entscheidung 2026-08-22 (6. Anlauf): Admin-Vorgabe mit exakten
   Werten - oberer Abstand (Statistik-Kacheln zu Ueberschrift) auf -40px
   (leichte Ueberlappung), unterer Abstand (Absatztext zu Icon-Zeile) auf
   40px, ausdruecklich nur im 4er-Reihen-Bereich (1106-1366px).
   2026-09-10: 7fbb490 (Lehrgangsseiten) entfernt - dort steht die
   Verkaufskachel zwischen Raster und "Warum Teilnehmer" und wurde
   ueberdeckt; die Leerzeile ist dort am Raster selbst behoben (s. oben). */
@media (min-width: 1106px) and (max-width: 1366px) {
    .elementor-element-ce97b41,
    .elementor-element-1cb5bc6 {
        margin-top: -130px !important;
    }
}

/* Admin-Wunsch 2026-08-31: Abstand Statistik-Grid (.elementor-element-
   8332ff3) zur Ueberschrift "Warum Teilnehmer..." (.elementor-element-
   ce97b41) bei <1025px auf konstant 60px gesetzt. Live gemessen: nativ
   (ohne eigene Regel) 42px bei 768px UND 1000px identisch (reiner
   Flex-Gap von .elementor-element-836dd2f, kein Breakpoint-Sprung
   dazwischen) - daher pauschal +18px margin-top auf ce97b41 fuer den
   gesamten <1025px-Bereich. */
@media (max-width: 1024px) {
    .elementor-element-ce97b41,
    .elementor-element-1cb5bc6 ,    .elementor-element-7fbb490 {
        margin-top: 18px !important;
    }
}

/* Admin-Wunsch 2026-08-31: Die 3 Icon-Boxen ("Zertifiziert & Anerkannt"/
   "Erfahrene Dozenten"/"Individuelle Betreuung", .elementor-element-
   3d95fe2 Karte) sind nativ auf Icon-Position "oben" gestellt (zentriert
   gestapelt: Icon/Titel/Text untereinander), auf allen Breakpoints
   identisch. Admin-Wunsch: bei 520-767px stattdessen Icon links, Titel+
   Text rechts daneben (Reihen-Layout) - analog zum bereits bestehenden
   Muster bei "Gebaeudeschadstoffe" (Asbest/Formaldehyd-Karten, dort nativ
   immer Reihen-Layout). Unterhalb 520px (Admin-Entscheidung 2026-08-31,
   Nachtrag) bewusst wieder das native gestapelte Layout (Icon oben,
   zentriert) - dort keine eigene Regel noetig, da das der Elementor-
   Standard ohnehin ist. */
@media (min-width: 520px) and (max-width: 767px) {
    .elementor-element-3d95fe2 .elementor-icon-box-wrapper,
    .elementor-element-caa9f3a .elementor-icon-box-wrapper ,    .elementor-element-b35c43e .elementor-icon-box-wrapper {
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 0 !important;
    }
    .elementor-element-3d95fe2 .elementor-icon-box-icon,
    .elementor-element-caa9f3a .elementor-icon-box-icon ,    .elementor-element-b35c43e .elementor-icon-box-icon {
        margin: 0 20px 0 0 !important;
        flex-shrink: 0 !important;
    }
    .elementor-element-3d95fe2 .elementor-icon-box-content,
    .elementor-element-caa9f3a .elementor-icon-box-content,    .elementor-element-b35c43e .elementor-icon-box-content,
    .elementor-element-3d95fe2 .elementor-icon-box-title,
    .elementor-element-caa9f3a .elementor-icon-box-title,    .elementor-element-b35c43e .elementor-icon-box-title,
    .elementor-element-3d95fe2 .elementor-icon-box-description,
    .elementor-element-caa9f3a .elementor-icon-box-description ,    .elementor-element-b35c43e .elementor-icon-box-description {
        text-align: left !important;
    }
}

/* Admin-Fund 2026-08-31: Kurs-Karussell (.elementor-element-bb2c573,
   n-carousel-Widget) wirkte bei <768px schmaler als die Box "Individuelle
   Betreuung" darueber - Ursache: der Karussell-Wrapper (.elementor-
   element-b56f12e, e-con/e-flex-Container OHNE eigene --padding-left/
   -right-Einstellung) faellt bei <768px auf Elementors native Fallback-
   Regel .e-con.e-flex{padding-inline:clamp(18px,5vw,30px)} (base.css)
   zurueck - 30px links+rechts, dadurch 60px schmaler als die Box
   darueber (die Box hat eigene explizite 3rem-Padding-Werte, die NICHT
   die sichtbare Aussenbreite verkleinern, nur den Innenabstand). Fix:
   Fallback-Padding fuer diesen Wrapper auf 0 gesetzt, Karussell nutzt
   jetzt wieder die volle Spaltenbreite wie die Box darueber. */
@media (max-width: 767px) {
    .elementor-element-b56f12e,
    .elementor-element-54813f8 ,    .elementor-element-6e07371 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Admin-Fund 2026-08-31: Kurskarten-Innenabstand (.elementor-element-
   e47e2e8, Content-Wrapper im Kurskarten-Template 19655, Titel/Text/
   Buttons) faellt bei <=1024px ebenfalls auf Elementors native Fallback-
   Regel .e-con.e-flex{padding-inline:clamp(...)} zurueck (14-30px, statt
   dem eigentlich gesetzten Wert 28px) - live gemessen bei 700px nur noch
   8px Abstand zum Pfeil-Button links/rechts (die Swiper-Navigationspfeile
   ueberlappen die Karte bewusst um 23px, s. custom_css "left:-23px"/
   "right:-23px" im Widget). Admin-Fund: bei laengeren/umbrechenden
   Titeln (z.B. "Fachkundelehrgang TRGS 521") reicht das nicht, der Pfeil
   ueberlappt den Text. Fix: Innenabstand fest auf 40px erhoeht (deutlich
   mehr als die 23px Pfeil-Ueberlappung) - live bei 380-1024px ueberall
   sauberer Abstand ohne Text-Ueberlappung verifiziert. */
@media (max-width: 1024px) {
    .elementor-19655 .elementor-element.elementor-element-e47e2e8 {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* Admin-Fund 2026-08-31 (Nachtrag): Admin-Fund bei 492px - dasselbe
   Fallback-Padding-Problem betrifft auch den Bild-Wrapper (.elementor-
   element-28751f2, Kursbild oberhalb des Textbereichs) - Bild ueberlappte
   dadurch ebenfalls die Navigationspfeile. Admin-Wunsch: Bild mit
   demselben Randabstand wie der Text darunter (e47e2e8) - identischer
   Fix, gleicher Wert 40px. */
@media (max-width: 1024px) {
    .elementor-19655 .elementor-element.elementor-element-28751f2 {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* Admin-Wunsch 2026-08-31 (Nachtrag): dieselbe Diskrepanz (Bild-Wrapper
   14px vs. Text-Wrapper 28px, nativ) besteht identisch auch bei
   >1024px (live bei 1440px bestaetigt) - Bild bekommt dort denselben
   Randabstand wie der Text darunter (dessen natives Padding bei >1024px
   unveraendert 28px betraegt, keine eigene Ueberschreibung noetig). */
@media (min-width: 1025px) {
    .elementor-19655 .elementor-element.elementor-element-28751f2 {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}

/* Admin-Fund 2026-08-31 (2. Nachtrag): oberer Randabstand der Kurskarte
   (Kartenrand bis Bild, nativ nur 14px Padding auf .elementor-element-
   28751f2 + 1px Rahmen = 15px) kleiner als der untere Randabstand
   (Button bis Kartenrand, nativ 28px Padding auf .elementor-element-
   e47e2e8 + 1px Rahmen = 36px). Live-Test bestaetigt: padding-top:35px
   auf dem Bild-Wrapper ergibt exakt 36px oben wie unten - Admin-Wunsch
   2026-08-31 (Nachtrag): dieselbe Diskrepanz besteht identisch auch bei
   >1024px (15 vs. 36px, live bei 1440px bestaetigt), daher ohne eigene
   Breakpoint-Einschraenkung site-/breitenweit gesetzt. */
.elementor-19655 .elementor-element.elementor-element-28751f2 {
    padding-top: 35px !important;
}

/* Admin-Wunsch 2026-08-31: dieselben 4 Randabstand-Fixes (s. oben, Kurs-
   karussell Template 19655) auch fuer das "weisse" Kurskarussell auf der
   Schadstoffschulung-Uebersichtsseite (/schadstoffschulung/, Template
   22368, Karussell-Widget .elementor-element-1d4ffa7) - identisches
   Karten-Layout (Bild/Titel/Zitat/Checkliste/Button), identische native
   Padding-Werte (Bild-Wrapper .elementor-element-15bc462 14px/0px,
   Text-Wrapper .elementor-element-8be4a49 16px/28px, jeweils 18.8px
   links/rechts), identische 23px Pfeil-Ueberlappung - live gemessen nur
   2.8px Restabstand vor dem Fix, dasselbe Problem wie bei Template 19655.
   Werte 1:1 uebernommen. */
@media (max-width: 1024px) {
    .elementor-22368 .elementor-element.elementor-element-8be4a49,
    .elementor-22368 .elementor-element.elementor-element-15bc462 {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}
@media (min-width: 1025px) {
    .elementor-22368 .elementor-element.elementor-element-15bc462 {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}
.elementor-22368 .elementor-element.elementor-element-15bc462 {
    padding-top: 35px !important;
}

/* Admin-Fund 2026-08-31: Bildkacheln des weissen Kurskarussells (Template
   22368) verloren beim kontinuierlichen Schmalerwerden der Spalten
   (fluid-Grid, kein fester Sprung) sichtbar ihre untere Rundung - Ursache:
   Elementors generierte Regel setzt object-fit:cover auf den WIDGET-
   Wrapper (.elementor-element-8992f88, feste height:180px) statt auf das
   <img> selbst - object-fit wirkt nur auf ersetzte Elemente (img/video),
   auf einem div hat es keinen Effekt. Das <img> behaelt dadurch seine
   eigene, von der Wrapper-Breite unabhaengige natuerliche Bildhoehe
   (Seitenverhaeltnis 768:512) - je schmaler die Spalte, desto groesser
   die entstehende leere (weisse) Luecke zwischen Bildunterkante und der
   eigentlich gerundeten Wrapper-Unterkante, die dadurch optisch "fehlte".
   Live gemessen bei 1030px (3-Spalten-Bereich, schmalster Punkt vor dem
   Sprung auf 2 Spalten): 41px Luecke. Fix: object-fit:cover direkt auf
   das <img> gesetzt (dort wirkt es tatsaechlich) - Bild fuellt den
   180px-Rahmen jetzt bei jeder Breite vollstaendig, keine Luecke mehr,
   Ecken bleiben durchgaengig sichtbar gerundet. Betrifft nur Template
   22368 - beim dunklen Karussell (Template 19655) ist object-fit von
   vornherein korrekt auf dem <img> gesetzt, kein Bug dort. */
.elementor-22368 .elementor-element.elementor-element-8992f88 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Admin-Wunsch 2026-08-20: "Unsere Kommunen & Partner"-Bereich
   (Nested-Tabs-Widget .elementor-element-bf97a0e, "tabs-kommunen").
   Ab 1366px (Elementor-eigener Stack-Umbruch der Nested-Tabs, e-n-tabs
   flex-direction:row->column) standen die 3 Tab-Karten ("Oeffentliche
   Auftraggeber"/"Zertifizierte Fachkompetenz"/"Schulungen fuer
   Mitarbeiter", e-n-tabs-heading) als eigener Block UEBER dem Bild
   (e-n-tabs-content), zwei getrennte Boxen untereinander. Admin-Wunsch:
   nur EINE Box - die 3 Karten sollen sich auf das Bild legen, genauso
   wie die beiden Statistik-Kacheln "27+ Kommunen & Partner"/"500+
   Oeffentliche Projekte" (.elementor-element-b0f783b/71e7137) das
   bereits tun (die liegen als normale Flex-Kinder INNERHALB der
   Bildbox, da das Bild dort als background-image auf
   .elementor-element-824c67c gesetzt ist).
   e-n-tabs-heading und e-n-tabs-content sind aber Elementor-eigene
   GESCHWISTER (nicht ineinander verschachtelt) - koennen daher nicht
   per CSS ineinander verschoben werden. Stattdessen: e-n-tabs-heading
   wird absolut ueber e-n-tabs-content gelegt (beide innerhalb von
   .e-n-tabs, das dafuer position:relative braucht). Bildbox-
   Mindesthoehe erhoeht, damit die 3 Karten (426px Stapelhoehe) oben UND
   die beiden Statistik-Kacheln unten nebeneinander Platz haben, ohne
   sich zu ueberlappen (Live vermessen: Kacheln sitzen bei y=363-495
   der 530px-Bildbox - bei einer reinen Ueberlagerung ab 0px wuerden
   sie sich mit dem Kartenstapel ueberschneiden). Kartenhintergrund auf
   das gleiche deckende Weiss wie die Statistik-Kacheln (rgba(255,255,
   255,0.95)) vereinheitlicht - der bisherige fast-transparente Zustand
   (aktive Karte: rgba(176,4,0,0.04)) war fuer einen weissen Seiten-
   hintergrund gedacht, nicht fuer die Ueberlagerung auf einem Foto
   (Lesbarkeit). */
@media (max-width: 1366px) {
    .elementor-element-bf97a0e .e-n-tabs {
        position: relative;
    }

    .elementor-element-bf97a0e .e-n-tabs-heading {
        position: absolute;
        top: 70px;
        left: 24px;
        right: 24px;
        z-index: 2;
        row-gap: 16px !important;
        /* Admin-Wunsch (2. Nachbesserung): Karten sollen mittig stehen
           und maximal halb so breit wie die Bildbox sein. .e-n-tabs-
           heading ist urspruenglich flex-direction:row + flex-wrap:wrap
           (s. Kommentar bei .e-n-tab-title unten) - bei row bestimmt
           flex-basis die Breite (Hauptachse), width/margin:auto
           koennten dort nicht sauber zentrieren. Auf flex-direction:
           column umgestellt: Breite wird zur Nebenachse (per width
           steuerbar), Karten stapeln automatisch je eine pro Zeile
           unabhaengig von ihrer Breite, align-items:center zentriert
           sie horizontal. */
        flex-direction: column !important;
        align-items: center !important;
    }

    .elementor-element-bf97a0e .e-n-tabs-content {
        position: relative;
        z-index: 1;
    }

    .elementor-element-bf97a0e .e-n-tab-title {
        padding: 16px !important;
        width: 65% !important;
        flex: 0 0 auto !important;
        /* Admin-Wunsch: etwas breiter als die urspruenglich 50%,
           weiterhin deutlich schmaler als die Bildbox, zentriert durch
           align-items:center auf .e-n-tabs-heading oben. */
    }

    /* Hoehere Spezifitaet noetig als Elementors eigene Aktiv-/Hover-
       Zustandsregel (post-2.css: ".elementor-2 .elementor-element.
       elementor-element-bf97a0e .e-n-tab-title[aria-selected=...]",
       5 Klassen/Attribute + !important) - sonst gewinnt deren Regel
       trotz spaeterem Laden nicht durch Ladereihenfolge, sondern durch
       hoehere Spezifitaet. Selektor unten bewusst mit 6 Klassen
       aufgebaut, um sowohl den aktiven als auch inaktive Tabs
       (niedrigere Spezifitaet noetig) zuverlaessig zu ueberschreiben. */
    .elementor-2 .elementor-element.elementor-element-bf97a0e .e-n-tabs .e-n-tabs-heading .e-n-tab-title {
        background: rgba(255, 255, 255, 0.95) !important;
        /* Admin-Fund 2026-08-31: Elementors eigene "Mobile-Akkordeon"-Regel
           (custom-widget-nested-tabs.min.css, @media max-width:767px,
           Selektor ".e-n-tabs-mobile .e-n-tab-title:not(:first-child)"
           bzw. "...[aria-selected=true]") setzt margin-block-start/-end
           per CSS-Variable (--n-tabs-title-gap/--n-tabs-gap) - urspruenglich
           fuer Elementors natives, nicht ueberlagertes Akkordeon-Layout
           gedacht (Abstand zum jeweils direkt darunter aufklappenden
           Panel). In unserem Karten-Overlay-Layout (row-gap:16px, s.
           .e-n-tabs-heading oben) addierte sich das zusaetzlich - macht
           den Abstand zwischen Karte 1/2 auf 88px, zwischen 2/3 auf 40px
           statt einheitlich 16px (live gemessen bei 750px). Da beide
           Selektoren exakt gleiche Spezifitaet haben (je 6 Klassen-
           Aequivalente), gewinnt hier die spaetere Ladereihenfolge
           (identisch zur background-Regel oben) - margin explizit auf 0
           gesetzt, Abstand kommt jetzt ausschliesslich vom row-gap. */
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
    }

    .elementor-element-824c67c,
    .elementor-element-6f4bb3d,
    .elementor-element-b21897e {
        min-height: 836px !important;
        /* Admin-Fund (Nachbesserung): 640px liess nur knapp Platz
           zwischen Kartenstapel und Statistik-Kacheln (optisch fast
           beruehrend) - auf 720px erhoeht fuer sauberen, gleichmaessigen
           Abstand. Kacheln haengen unveraendert am unteren Rand der Box
           (eigenes Flex-Layout des Widgets), wachsen also automatisch
           mit nach unten mit.
           Admin-Fund 2 (Nachbesserung): Jeder der 3 Tabs hat eine EIGENE
           Bildbox (824c67c=Tab1 "Oeffentliche Auftraggeber", 6f4bb3d=
           Tab2 "Zertifizierte Fachkompetenz", b21897e=Tab3 "Schulungen
           fuer Mitarbeiter") - die Mindesthoehe war nur auf 824c67c
           gesetzt, dadurch sprang der Abstand zu den Statistik-Kacheln
           bei Tab 2/3 auf die urspruengliche, kleinere Hoehe zurueck.
           Jetzt alle 3 Bildboxen gleich behandelt.
           Admin-Fund 3 (720px -> 820px): Admin-Vorgabe "Abstand zu den
           oberen [Karten] muss fix beibehalten werden, der Abstand beim
           Umbruch 1366px ist massgeblich" - da die Karten bei
           schmaleren Breiten innerhalb dieser Stufe (1024-1366px) durch
           kuerzere Zeilenbreite mehr Textzeilen brauchen (Kartenstapel-
           Hoehe bei 1366px: 438.8px: bei 1024px: 490.0px, +51px), reichte
           die flache 720px-Hoehe im unteren Breitenbereich dieser Stufe
           nicht mehr aus (Live-Fund: bei 1146px -67.6px Overlap, bei
           1024px -42px Overlap) - obwohl bei 1366px selbst noch positiv
           (9.2px, aber durch die gleichzeitige Verdopplung des oberen
           Abstands auf 70px ebenfalls sehr knapp geworden). Auf 820px
           erhoeht: deckt den Worst-Case bei 1024px (kleinster erlaubter
           Wert dieser Stufe) mit satten 40px Puffer ab, bei 1366px
           dadurch groesserer Puffer von ca. 109px - CSS kann Karten-
           Zeilenumbrueche nicht dynamisch messen, ein exakt konstanter
           Abstand ueber die gesamte Stufe ist ohne JS nicht moeglich,
           daher hier bewusst "mindestens so viel Abstand wie bei
           1366px, eher mehr" statt "exakt gleich". */
    }
}

/* Admin-Wunsch (2. Nachbesserung), Fortsetzung: die auf 50% Breite
   begrenzten Karten (s. oben) brauchen bei schmaleren Breiten deutlich
   mehr Zeilen fuer denselben Text (kuerzere Zeilenbreite -> mehr
   Textumbrueche), dadurch reichte die feste 720px-Mindesthoehe der
   Bildbox unterhalb von ca. 1000px nicht mehr aus - Kartenstapel
   ueberlappte die Statistik-Kacheln (live gemessen: bei 900px Breite
   -132px Overlap, bei 1024px noch 12px Puffer). Eigener, engerer
   Breakpoint mit groesserer Mindesthoehe fuer den betroffenen Bereich
   (Elementors "display:contents"-Mobilmodus greift ohnehin erst ab
   <=767px, s. Kommentar oben - dieser Zwischenbereich 768-1023px war
   bisher nicht separat abgedeckt). */
@media (max-width: 1023px) {
    .elementor-element-824c67c,
    .elementor-element-6f4bb3d,
    .elementor-element-b21897e {
        min-height: 1050px !important;
    }
}

/* Admin-Wunsch (Verlauf): die beiden Statistik-Kacheln ("27+ Kommunen &
   Partner"/"500+ Oeffentliche Projekte") waren zunaechst per
   flex-grow:1/flex-basis:0% auf die volle Bildbox-Breite gestreckt -
   erst auf reine Inhaltsbreite reduziert (flex:0 0 auto), dann finaler
   Wunsch: ihre gemeinsame Breite soll der Breite der 3 Karten darueber
   entsprechen (65%, s. .e-n-tab-title oben). Dafuer die REIHE (nicht
   die einzelnen Kacheln) auf 65% Breite begrenzt und zentriert - die
   Kacheln selbst duerfen darin wieder gleichmaessig strecken
   (flex-grow:1), damit sie zusammen exakt die 65%-Breite ausfuellen,
   genau wie die Karten. Generische Selektoren (elementor-widget-
   counter/e-con-boxed>e-con-inner) statt einzelner Element-IDs, decken
   automatisch alle 3 Tab-Bildboxen ab (A1 - keine Einzelfall-Loesung).
   Bewusst nur innerhalb @media(max-width:1366px) - bei >=1367px ist
   das Bild wieder die normale, schmalere rechte Spalte im Zwei-Spalten-
   Layout (kein Karten-Overlay), dort soll die urspruengliche volle
   Streckung unveraendert bleiben (Stolperstein: die vorherige Fassung
   dieser Regel war faelschlich media-query-los, dadurch wurden die
   Kacheln auch im Desktop-Layout auf 65% eingeengt und dadurch
   unnoetig hoch, s. Live-Fund bei 1367px). */
@media (max-width: 1366px) {
    .elementor-element-bf97a0e .e-n-tabs-content .e-con-boxed > .e-con-inner {
        width: calc(65% + 14.3px) !important;
        margin-inline: auto !important;
        padding-bottom: 70px !important;
        /* Admin-Wunsch (Verlauf): oberer/unterer Boxabstand verdoppelt,
           dann auf denselben Wert (70px) angeglichen - .e-n-tabs-heading
           top:70px oben, hier padding-bottom:70px unten (Elementor-
           eigenes padding:35px 0px haelt die Kacheln per
           align-items:flex-end vom unteren Rand fern, oben wirkungslos
           da flex-end).
           Admin-Fund: die Kacheln-Reihe schloss links/rechts NICHT
           buendig mit den Karten darueber ab, obwohl beide width:65%
           nutzen - Ursache: unterschiedliche Referenzbreite. Die
           Karten sitzen in .e-n-tabs-heading (absolut positioniert,
           left/right:24px, Referenzbreite = Bildbox-Breite minus 48px).
           Die Kacheln-Reihe ist dagegen ein normales Flex-Kind INNERHALB
           der Bildbox, deren eigenes padding:0 35px (horizontal!) die
           Referenzbreite auf Bildbox-Breite minus 70px reduziert -
           dieselben 65% ergeben dadurch bei unterschiedlicher Basis
           unterschiedliche Pixelbreiten. calc(65% + 14.3px) korrigiert
           das algebraisch exakt (hergeleitet aus den beiden festen
           Versatzwerten 48px/70px, gilt fuer JEDE Bildbox-Breite, nicht
           nur den getesteten Wert) - live verifiziert: Kacheln-Kanten
           liegen jetzt exakt auf den Karten-Kanten. */
    }

    .elementor-element-bf97a0e .e-n-tabs-content .elementor-widget-counter {
        flex: 1 1 0% !important;
        /* Admin-Wunsch: gleiche "Transparenz" wie die 3 Karten darueber.
           Beide hatten technisch schon denselben Hintergrund (rgba(255,
           255,255,0.95)) - der optische Unterschied kam von
           backdrop-filter:blur(10px) + box-shadow auf den Statistik-
           Kacheln (Elementor-eigene Counter-Widget-Vorgabe), die den
           Foto-Hintergrund weich durchscheinen liessen ("glasig"),
           waehrend die Karten weder Blur noch Schatten haben (klares,
           flaches Weiss). Beides entfernt fuer identische Optik. */
        backdrop-filter: none !important;
        box-shadow: none !important;
    }
}

/* Admin-Fund 2026-08-20 (Nachtrag): Bei <=767px (Elementors eigene
   "e-n-tabs-mobile"-Widgetklasse, custom-widget-nested-tabs.min.css:
   --n-tabs-heading-display/--n-tabs-content-display werden dort auf
   "contents" gesetzt) greift das gesamte Overlay-CSS oben NICHT mehr -
   ".e-n-tabs-heading"/".e-n-tabs-content" verlieren durch display:
   contents ihre eigene Box, wodurch Karten und Bildbox wieder als ZWEI
   getrennte Bloecke stapeln (der urspruengliche, vom Admin gemeldete
   Fehler - hier erneut, nur bei einer bislang nicht abgedeckten
   Breite). Fix: display:contents fuer beide Elemente per !important
   zurueck auf flex gesetzt (deckt sich mit dem Wert, der oberhalb
   768px normal aktiv ist), danach dieselbe Overlay-Technik wie im
   Breakpoint daneben angewendet. Eigene, hoehere Mindesthoehe noetig,
   da Karten bei dieser Breite (Kartenbreite 65% von einer nochmals
   schmaleren Bildbox) durch kuerzere Zeilenbreite die meisten
   Textumbrueche brauchen. */
@media (max-width: 767px) {
    .elementor-element-bf97a0e .e-n-tabs-heading,
    .elementor-element-bf97a0e .e-n-tabs-content {
        display: flex !important;
    }

    .elementor-element-bf97a0e .e-n-tabs {
        position: relative;
    }

    .elementor-element-bf97a0e .e-n-tabs-heading {
        position: absolute;
        top: 70px;
        left: 24px;
        right: 24px;
        z-index: 2;
        row-gap: 16px !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .elementor-element-bf97a0e .e-n-tabs-content {
        position: relative;
        z-index: 1;
    }

    .elementor-element-bf97a0e .e-n-tab-title {
        padding: 16px !important;
        width: 65% !important;
        flex: 0 0 auto !important;
    }

    .elementor-2 .elementor-element.elementor-element-bf97a0e .e-n-tabs .e-n-tabs-heading .e-n-tab-title {
        background: rgba(255, 255, 255, 0.95) !important;
        /* Admin-Fund 2026-08-31: Elementors eigene "Mobile-Akkordeon"-Regel
           (custom-widget-nested-tabs.min.css, @media max-width:767px,
           Selektor ".e-n-tabs-mobile .e-n-tab-title:not(:first-child)"
           bzw. "...[aria-selected=true]") setzt margin-block-start/-end
           per CSS-Variable (--n-tabs-title-gap/--n-tabs-gap) - urspruenglich
           fuer Elementors natives, nicht ueberlagertes Akkordeon-Layout
           gedacht (Abstand zum jeweils direkt darunter aufklappenden
           Panel). In unserem Karten-Overlay-Layout (row-gap:16px, s.
           .e-n-tabs-heading oben) addierte sich das zusaetzlich - macht
           den Abstand zwischen Karte 1/2 auf 88px, zwischen 2/3 auf 40px
           statt einheitlich 16px (live gemessen bei 750px). Da beide
           Selektoren exakt gleiche Spezifitaet haben (je 6 Klassen-
           Aequivalente), gewinnt hier die spaetere Ladereihenfolge
           (identisch zur background-Regel oben) - margin explizit auf 0
           gesetzt, Abstand kommt jetzt ausschliesslich vom row-gap. */
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
    }

    .elementor-element-824c67c,
    .elementor-element-6f4bb3d,
    .elementor-element-b21897e {
        min-height: 1450px !important;
    }

    .elementor-element-bf97a0e .e-n-tabs-content .e-con-boxed > .e-con-inner {
        width: calc(65% + 14.3px) !important;
        margin-inline: auto !important;
        padding-bottom: 70px !important;
    }

    .elementor-element-bf97a0e .e-n-tabs-content .elementor-widget-counter {
        flex: 1 1 0% !important;
        /* Admin-Wunsch: gleiche "Transparenz" wie die 3 Karten darueber.
           Beide hatten technisch schon denselben Hintergrund (rgba(255,
           255,255,0.95)) - der optische Unterschied kam von
           backdrop-filter:blur(10px) + box-shadow auf den Statistik-
           Kacheln (Elementor-eigene Counter-Widget-Vorgabe), die den
           Foto-Hintergrund weich durchscheinen liessen ("glasig"),
           waehrend die Karten weder Blur noch Schatten haben (klares,
           flaches Weiss). Beides entfernt fuer identische Optik. */
        backdrop-filter: none !important;
        box-shadow: none !important;
    }
}

/* Admin-Wunsch (Fortsetzung): dieselbe Transparenz-Angleichung (kein
   Blur, kein Schatten) auch oberhalb 1366px - dort ist die Bildbox
   wieder die normale rechte Spalte im Zwei-Spalten-Layout (kein
   Karten-Overlay), aber die 2 Statistik-Kacheln existieren dort
   ebenfalls unveraendert (nur diese, nicht die 3 Karten links, die
   bei >=1367px keine ueberlagerten "Kacheln auf dem Bild" mehr sind).
   Bewusst ohne @media-Einschraenkung - gilt dadurch einheitlich auf
   allen Breiten. */
.elementor-element-bf97a0e .e-n-tabs-content .elementor-widget-counter {
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Admin-Wunsch 2026-08-31: Beschriftungen der Statistik-Kacheln
   ("Kommunen & Partner"/"Oeffentliche Projekte") sollen bei <700px
   erzwungen auf 2 Zeilen umbrechen (statt wie bisher einzeilig, Umbruch
   passierte nativ erst zufaellig unterhalb ~650px durch die schmaler
   werdende Kachel). max-width erzwingt den Umbruch unabhaengig von der
   tatsaechlichen Kachelbreite - Wert (110px) liegt sicher unter der
   natuerlichen Einzeiler-Breite beider Texte (160px/149px, live
   gemessen), aber ueber der Breite des laengsten Einzelworts ("Kommunen",
   66px), verhindert dadurch haessliche Wort-Trennungen mitten im Wort.
   Zeilenabstand auf line-height:1.25 vereinheitlicht - identisch zur
   globalen Ueberschriften-Regel (.elementor-heading-title/.elementor-
   icon-box-title, s. @media max-width:1024px), live verifiziert: kein
   sichtbarer Zwischenraum mehr zwischen den beiden Zeilen. */
@media (max-width: 699px) {
    .elementor-element-bf97a0e .elementor-counter-title {
        max-width: 110px !important;
        margin-inline: auto !important;
        line-height: 1.25 !important;
    }
}

/* Admin-Wunsch 2026-08-31: die 3 Karten ("Oeffentliche Auftraggeber"/
   "Zertifizierte Fachkompetenz"/"Schulungen fuer Mitarbeiter") stellen
   Icon und Titel nativ nebeneinander dar (.e-n-tab-title ist Elementors
   eigener flex-direction:row-Container), die Beschreibung haengt als
   ::after-Pseudo-Element (natives Custom-CSS-Feld des Nested-Tabs-
   Widgets, post-2.css) am Titel-Text und bricht darunter um. Admin-
   Wunsch: bei <700px stattdessen Icon oben, Titel darunter, Text darunter
   - alles zentriert (analog zum Muster bei anderen Icon-Box-Kacheln der
   Seite). flex-direction:column reicht, da Icon und Titel-Text (inkl.
   dessen ::after-Beschreibung) die einzigen Flex-Kinder sind - die
   Beschreibung bleibt automatisch unterhalb des Titels stehen, nur
   text-align:center zusaetzlich noetig (::after erbt es nicht automatisch
   vom Flex-Parent). */
@media (max-width: 699px) {
    .elementor-element-bf97a0e .e-n-tab-title {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .elementor-element-bf97a0e .e-n-tab-title-text {
        text-align: center !important;
        /* Admin-Fund (2. Nachbesserung): .e-n-tab-title-text ist selbst
           ein natives display:flex-Element MIT flex-direction:column
           (Elementor-eigenes Markup, Hauptachse also vertikal - fuer
           Titel + die ::after-Beschreibung darunter). Auf einem Flex-
           Container hat text-align keinen Einfluss auf die Positionierung
           des Inhalts; justify-content zentriert bei column-Richtung
           nur die VERTIKALE Position (wirkungslos hier), die HORIZONTALE
           Querachse wird stattdessen ueber align-items gesteuert - das
           war der eigentliche Fehler im ersten Versuch. Live verifiziert:
           align-items:center zentriert den Titel jetzt korrekt. */
        align-items: center !important;
    }
}

/* Admin-Wunsch 2026-08-31: bei <600px sollen alle 4 Seitenabstaende der
   Kartenstapel-Ueberlagerung zur Bildbox ("Aussenbox") halbiert werden -
   oben (.e-n-tabs-heading top:70px), unten (Statistik-Kacheln-Reihe
   padding-bottom:70px) sowie links/rechts (JS-Mindestabstand MIN_SIDE_GAP
   in sc_kommunen_partner_fixed_gap_js, ebenfalls 70px) waren bislang
   einheitlich 70px auf allen Seiten (live gemessen bei 550px). Hier nur
   oben/unten per CSS auf 35px halbiert; links/rechts wird in der JS-
   Funktion selbst width-abhaengig auf 35px umgestellt (dort bereits die
   einzige Quelle der Wahrheit fuer den Kartenstapel-Randabstand, s.
   shared-functions.php). */
@media (max-width: 599px) {
    .elementor-element-bf97a0e .e-n-tabs-heading {
        top: 35px !important;
    }

    .elementor-element-bf97a0e .e-n-tabs-content .e-con-boxed > .e-con-inner {
        padding-bottom: 35px !important;
    }
}

/* Admin-Fund 2026-08-31: bei <768px war die Bildbox der "Kommunen &
   Partner"-Kacheln (.elementor-element-824c67c/6f4bb3d/b21897e) 60px
   schmaler als die Boxen der Abschnitte darunter (z.B. "Unsere
   Zertifizierungen") - sichtbar groesserer Randabstand links/rechts zum
   Browserfenster. Ursache: der jeweilige Tab-Panel-Wrapper (.elementor-
   element-16cfeca/fc37684/7251e4d, ein Kind pro Tab, OHNE eigene
   --padding-left/-right-Einstellung) faellt bei <=767px auf Elementors
   native Fallback-Regel .e-con.e-flex{padding-inline:clamp(18px,5vw,
   30px)} zurueck (bei 700px: 30px links+rechts = 60px insgesamt,
   identisches Muster wie bereits mehrfach in dieser Datei behoben, z.B.
   .elementor-element-b56f12e beim Kurskarussell). Fix: Fallback-Padding
   auf 0 gesetzt, Bildbox nutzt jetzt wieder die volle Spaltenbreite wie
   die Boxen darunter. */
@media (max-width: 767px) {
    .elementor-element-16cfeca,
    .elementor-element-fc37684,
    .elementor-element-7251e4d {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Admin-Wunsch 2026-08-31: bei <500px sollen die beiden Statistik-
   Kacheln ("Kommunen & Partner"/"Oeffentliche Projekte") untereinander
   (2 Reihen) statt nebeneinander stehen, damit jede Kachel die volle
   Breite fuer sich hat. flex-wrap:wrap auf der Kacheln-Reihe (jede
   Kachel width:100% erzwingt den Umbruch nach der ersten) statt
   flex-direction:column, weil die Reihe bereits ueber align-items:
   flex-end (natives Elementor-Padding, s. Kommentar oben bei
   .e-con-boxed > .e-con-inner) am unteren Bildbox-Rand verankert ist -
   ein Wechsel der Hauptachse (column) haette dieses Bottom-Anchoring
   zerstoert (Live-Test: Kachel sprang auf halbe Bildbox-Hoehe). align-
   content:flex-end haelt die beiden Reihen zusammen am unteren Rand
   (Standard waere stretch, hätte sie ueber die volle verfuegbare Hoehe
   auseinandergezogen). Randabstand der Bildbox (padding-inline) bei
   <500px gleichzeitig halbiert (Admin-Wunsch), damit die jetzt volle
   Kachelbreite mehr Platz hat - native Fallback-Regel base.css
   ".e-con.e-flex{padding-inline:clamp(14px,4vw,20px)}" (identisches
   Muster wie bei anderen Randabstand-Fixes dieser Datei) auf die
   Haelfte der Werte ueberschrieben. Die bestehende JS-Abstandsberechnung
   (sc_kommunen_partner_fixed_gap_js) bleibt unveraendert funktionsfaehig -
   sie misst die tatsaechliche Position der ersten Kachel, unabhaengig
   von 1 oder 2 Reihen. */
@media (max-width: 499px) {
    .elementor-element-824c67c,
    .elementor-element-6f4bb3d,
    .elementor-element-b21897e {
        padding-inline: clamp(7px, 2vw, 10px) !important;
    }

    .elementor-element-824c67c > .e-con-inner,
    .elementor-element-6f4bb3d > .e-con-inner,
    .elementor-element-b21897e > .e-con-inner {
        flex-wrap: wrap !important;
        row-gap: 12px !important;
        align-content: flex-end !important;
    }

    .elementor-element-824c67c > .e-con-inner .elementor-widget-counter,
    .elementor-element-6f4bb3d > .e-con-inner .elementor-widget-counter,
    .elementor-element-b21897e > .e-con-inner .elementor-widget-counter {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

/* Admin-Fund 2026-08-20: eine SEPARATE Deckkraft-Regel in
   shared-functions.php (@media 1025-1366px, .elementor-element-12df079,
   urspruenglich opacity:0.18) faerbte das gesamte Element (Foto UND
   Kreis) unerwuenscht dunkel ab. Fix: eigene Regel mit hoeherer
   Spezifitaet (3 Klassen statt 1, matcht Elementors eigenes
   Selektor-Muster) uebersteuert die Deckkraft, laesst Breite/
   Positionierung (480px, in shared-functions.php) unangetastet. Wert
   iterativ vom Admin verfeinert: 60% -> 30% -> 25% (aktuell). Die
   urspruengliche 0.18-Regel in shared-functions.php ist seither wirkungslos
   und wurde entfernt (nur diese Regel hier ist noch aktiv).
   NACHTRAG (Admin-Fund per Screenshot 2026-08-23): dieselbe
   min-width:1025px-Untergrenze wie bei den anderen Startseiten-Fixes
   desselben Tages (Bausachverstaendiger, Beratungsblock-Buttons) sorgte
   auch hier fuer einen Bruch - unterhalb 1025px fehlte die 25%-
   Deckkraft komplett, das Foto war dort voll deckend und ueberlagerte
   sichtbar die Checklisten-Texte. Untergrenze entfernt, Deckkraft gilt
   jetzt durchgehend bis in den Mobil-Bereich (identisch zur 1025-1366px-
   Bild-Positionierung in shared-functions.php, die aus demselben Grund
   am selben Tag ebenfalls erweitert wurde).
   ERWEITERUNG 2026-09-03 (Admin-Fund): dieselbe Box wurde 1:1 (mit
   identischer ID 12df079) von der Startseite auf schadstoffgutachten
   kopiert - Selektor war fest auf .elementor-2 (Startseiten-Wrapper)
   beschraenkt, dadurch fehlte die Deckkraft-Reduktion dort komplett
   (Foto volldeckend, ueberlagerte sichtbar die Checklisten-Texte,
   identisches Symptom wie der urspruengliche Fund 2026-08-23). Um
   .elementor-390 (schadstoffgutachten-Wrapper) ergaenzt.
   ERWEITERUNG 2026-09-06 (Admin-Fund per Screenshot): dieselbe Box
   existiert (eigene IDs, s. sc_startseite_foto_ring_scale_css in
   shared-functions.php) 1:1 auch auf den 3 weiteren Unterseiten
   schadstofffreimessung/raumluftmessung/haufwerksbeprobung - dort
   fehlte die Deckkraft-Reduktion bislang komplett (identisches Symptom:
   Foto volldeckend statt teiltransparent bei <1025px). Um die
   jeweiligen Photo-IDs/Seiten-Wrapper ergaenzt:
   ad3cd81/elementor-4221 (schadstofffreimessung), c16f7a7/elementor-4143
   (raumluftmessung), f92e37f/elementor-4809 (haufwerksbeprobung).
   ERWEITERUNG 2026-09-06 (Gebaeudeschadstoffe-Gruppe, 9 Seiten): teilen
   sich EINE gemeinsame Foto-Widget-ID (ef03a97, aus gemeinsamer Vorlage,
   per LCS-Struktur-Diff gegen schadstoffgutachten verifiziert) - je
   eigener Seiten-Wrapper (Post-ID) noetig: elementor-7693
   (gebaeudeschadstoffe), elementor-8125 (asbest), elementor-7976
   (formaldehyd), elementor-8479 (kmf), elementor-8670 (pak),
   elementor-8601 (pcb), elementor-8901 (pcp), elementor-8029 (schimmel),
   elementor-8387 (voc).
   ERWEITERUNG 2026-09-07 (schadstoffschulung, Post 22336): dieselbe Box
   (eigene Foto-Widget-ID 5b5c436) fehlte komplett in dieser Regel -
   zusaetzlich hatte das Widget native hide_laptop/hide_tablet/
   hide_mobile-Felder gesetzt (Foto bei <=1366px komplett unsichtbar
   statt teiltransparent, separat per put_elementor_data entfernt).
   ERWEITERUNG 2026-09-10 (vier Lehrgangsseiten): dieselbe Box mit
   gemeinsamer Foto-Widget-ID a3f989f - je eigener Seiten-Wrapper noetig.
   Zusaetzlich hatte das Widget dort native hide_laptop/hide_tablet/
   hide_mobile-Felder gesetzt (Foto bei <=1366px komplett unsichtbar statt
   teiltransparent, separat per put_elementor_data entfernt). */
@media (max-width: 1366px) {
    .elementor-2 .elementor-element.elementor-element-12df079,
    .elementor-390 .elementor-element.elementor-element-12df079,
    .elementor-4221 .elementor-element.elementor-element-ad3cd81,
    .elementor-4143 .elementor-element.elementor-element-c16f7a7,
    .elementor-4809 .elementor-element.elementor-element-f92e37f,
    .elementor-7693 .elementor-element.elementor-element-ef03a97,
    .elementor-8125 .elementor-element.elementor-element-ef03a97,
    .elementor-7976 .elementor-element.elementor-element-ef03a97,
    .elementor-8479 .elementor-element.elementor-element-ef03a97,
    .elementor-8670 .elementor-element.elementor-element-ef03a97,
    .elementor-8601 .elementor-element.elementor-element-ef03a97,
    .elementor-8901 .elementor-element.elementor-element-ef03a97,
    .elementor-8029 .elementor-element.elementor-element-ef03a97,
    .elementor-8387 .elementor-element.elementor-element-ef03a97,
    .elementor-6458 .elementor-element.elementor-element-a3f989f,
    .elementor-5115 .elementor-element.elementor-element-a3f989f,
    .elementor-5938 .elementor-element.elementor-element-a3f989f,
    .elementor-6566 .elementor-element.elementor-element-a3f989f,
    .elementor-22336 .elementor-element.elementor-element-5b5c436 {
        opacity: 0.25 !important;
    }
}

/* Admin-Fund 2026-08-20 (schadstoffschulung/, Post 22336): die Box mit
   den Kurskarussell-Kacheln (.elementor-element-80af2c1) war breiter
   als die darueberliegende "Zertifiziert & Anerkannt"-Box
   (.elementor-element-caa9f3a) - beide sitzen im selben aussen
   geboxten Bereich (min(100%,1536px)), aber caa9f3a hat eine eigene
   Elementor-Breiteneinstellung von 90% (--width:90%), waehrend das
   Karussell auf der vollen 100%-Breite des Boxbereichs blieb (1251px
   statt 1125.9px bei 1366px).
   STOLPERSTEIN (im selben Arbeitsschritt behoben): erste Fassung setzte
   width:90% ohne Breiteneinschraenkung - caa9f3a's eigene 90%-Regel
   gilt aber selbst nur innerhalb @media(max-width:1366px) and
   (min-width:768px) (Elementors "Tablet"-Geraetestufe), bei breiteren
   Bildschirmen (Live-Fund bei 1920px) springt caa9f3a zurueck auf
   100%. Ohne dieselbe Einschraenkung blieb das Karussell dort
   faelschlich bei 90% haengen, waehrend die Zert-Box wieder 100%
   zeigte - erneuter Breitenunterschied, nur in die andere Richtung.
   Fix: dieselbe 90%-Breite + Zentrierung, aber auf denselben
   Breitenbereich (768-1366px) beschraenkt wie Elementors eigene Regel -
   ausserhalb bleibt 80af2c1 unveraendert bei 100%, identisch zu
   caa9f3a's eigenem Verhalten. */
@media (max-width: 1366px) and (min-width: 768px) {
    .elementor-element-80af2c1 {
        width: 90% !important;
        margin-inline: auto !important;
    }
}

/* Admin-Fund 2026-08-20 (Startseite, Post 2): identisches Problem wie
   auf schadstoffschulung/ (s. Eintrag oben zu .elementor-element-
   80af2c1), aber eigene Elementor-Element-ID: das Kurskarussell auf
   der Startseite (.elementor-element-b56f12e) war breiter als die
   darueberliegende "Zertifiziert & Anerkannt"-Box (.elementor-element-
   3d95fe2, damals eigene 90%-Breiteneinstellung nur innerhalb Elementors
   "Tablet"-Stufe 768-1366px). Identischer Fix, gleicher Breitenbereich.
   NACHTRAG (Admin-Fund 2026-08-22): 3d95fe2 hat die 90%-Breite
   inzwischen verloren (jetzt content_width:full, volle Breite) - der
   90%-Fix hier war dadurch veraltet und machte das Karussell zu SCHMAL
   statt zu breit (Admin-Screenshot bei 1340px: Karussell sichtbar
   schmaler als die Box darueber). Fix aktualisiert auf 100% (volle
   Breite), um wieder mit 3d95fe2 uebereinzustimmen. */
@media (max-width: 1366px) and (min-width: 768px) {
    .elementor-element-b56f12e,
    .elementor-element-54813f8 ,    .elementor-element-6e07371 {
        width: 100% !important;
        margin-inline: auto !important;
    }
}

/* Admin-Wunsch 2026-08-20: die 3 Pill-Badges ("27+ Kommunen & Partner",
   "500+ Oeffentliche Projekte", "Zertifizierte Fachkompetenz") ueber dem
   Partner-Grid brachen zu frueh auf zwei Zeilen um. Praezisierung nach
   erstem Fix (fester 6px-Abstand auf allen Breiten): der Abstand soll
   bei breiten Viewports beim urspruenglichen Wert (15px) bleiben und
   erst bei kleineren Breiten fliessend abnehmen, sodass die 3 Badges
   durchgehend bis 1025px in einer Reihe stehen bleiben (darunter
   beginnt ohnehin die naechste Layout-Stufe, s. Partner-Grid-Regeln).
   Fix: vw-linearer clamp() von 6px (bei 1025px Breite, knappster Punkt
   fuer Einzeiligkeit) bis 15px (bei 1366px, Original-Abstand) -
   oberhalb 1366px bleibt der Wert am clamp()-Maximum (15px, identisch
   zum Ursprungszustand). Live verifiziert (Zeilenanzahl der Badges):
   1025px (6.06px Abstand, 1 Reihe, minimale Reserve), 1050/1100px
   (1 Reihe), 1367px+ (15px, Original-Wert, unveraendert). */
.elementor-element-9930838 .elementor-icon-list-item {
    margin: 0 clamp(6px, calc(2.64vw - 21px), 15px) !important;
}

/* Admin-Meldung 2026-08-20 (Screenshot, CTA-Box "Ihre Kommune ist noch
   nicht dabei?"): sobald die 3 Check-Icon-Punkte ("Kostenlose
   Erstberatung", "Individuelle Loesungen", "Schnelle Reaktionszeit")
   umbrechen (3. Punkt in zweite Reihe), lagen die Zeilen ohne
   jeglichen Abstand direkt aneinander (row-gap:0, live per
   getBoundingClientRect bestaetigt). Admin-Wunsch: Abstand zur ersten
   Reihe verdoppeln. Fix: row-gap:12px auf den Flex-Wrap-Container -
   wirkt nur bei Umbruch (Einzeiler unveraendert), verdoppelt den
   optischen Zeilenabstand (vorher ca. 6px Line-Height-Puffer effektiv
   sichtbar, jetzt 12px echter Row-Gap). Live verifiziert bei 985px
   (Umbruchpunkt): 12px Abstand zwischen Reihe 1 und Reihe 2.
   ERWEITERUNG 2026-09-06 (Admin-Fund per Screenshot, schadstofffrei-
   messung): dieselbe Haken-Liste existiert 1:1 (eigene IDs) auf den
   3 Leistungs-Unterseiten schadstofffreimessung (0ccc490)/
   raumluftmessung (7193dd7)/haufwerksbeprobung (61d5ece) - dort fehlte
   der row-gap komplett (Zeilen bei Umbruch ohne jeden Abstand
   aneinander, identisches Symptom wie der urspruengliche Fund). Um die
   3 IDs ergaenzt. */
.elementor-element-554ed61 .elementor-icon-list-items,
.elementor-element-0ccc490 .elementor-icon-list-items,
.elementor-element-7193dd7 .elementor-icon-list-items,
.elementor-element-61d5ece .elementor-icon-list-items,
.elementor-element-a5ff869 .elementor-icon-list-items {
    row-gap: 12px !important;
}

/* Admin-Meldung 2026-08-20 (Screenshot): "Bausachverstaendiger von
   Schadstoff-Control"-Sektion, 2-spaltiger Bereich (>=1367px) - der
   urspruengliche Buttons-vs-Boxen-Platzkonflikt in diesem Bereich
   (mehrere Nachtraege: Grid-Breite, Button-Abstand, kein Umbruch) ist
   AUFGEHOBEN. Der komplette Bereich 1367-1630px wurde durch ein neues
   Layout ersetzt (Text oben, 4 Boxen in einer Reihe darunter, Buttons
   ganz unten) - s. sc_bausv_wide_layout_js() in shared-functions.php.
   Oberhalb 1630px bewusst wieder das unveraenderte Original-Verhalten
   (50/50-Split, kein Fix noetig - live bestaetigt: bei >=1600px reicht
   der Platz fuer die Buttons ohnehin komfortabel). Details/Verlauf der
   fruehenren Loesung: s. Git-Historie dieser Datei sowie
   ENTSCHEIDUNGEN.txt NACHTRAG 47/48. */

/* Admin-Wunsch 2026-08-20: "Schadstoff-Control" ist der Firmenname und
   darf beim Zeilenumbruch NICHT nach dem Bindestrich getrennt werden
   (also nicht "Schadstoff-" / "Control" auf zwei Zeilen) - der Name
   gilt als EIN Wort und muss entweder komplett in der Zeile bleiben
   oder als Ganzes in die naechste Zeile umbrechen. Der Firmenname ist
   im Heading-Widget bereits in einen eigenen <span class="gradient-
   text"> eingebettet (fuer die rote Farbe) - white-space:nowrap auf
   genau diesem Span verhindert den Umbruch INNERHALB des Namens, ohne
   den Umbruch VOR dem Namen (zwischen "von" und "Schadstoff-Control")
   einzuschraenken. */
.elementor-element-81fd34e .gradient-text {
    white-space: nowrap;
}

/* Admin-Wunsch 2026-08-21: Bewertungs-Sektion ("Verifizierte Google-
   Bewertungen", #bewertungen) - analog zu obigem Firmennamen-Fix:
   "Google-Bewertungen" gilt als EIN Wort und darf beim Zeilenumbruch
   nicht am Bindestrich getrennt werden. Zusaetzlich soll die Ueberschrift
   beim Umbruch auf zwei Zeilen MITTIG statt linksbuendig stehen - der
   Heading-Widget-Container ist inhaltsbreit (kein volles width:100%,
   passt sich exakt an den Text an) und dadurch bereits selbst mittig
   im Elternelement positioniert; bei einzeiliger Darstellung (breite
   Viewports) macht text-align:center daher keinen sichtbaren
   Unterschied - erst beim Umbruch auf zwei Zeilen wirkt es. Deshalb
   bewusst UNBEDINGT (kein @media noetig, kein Sonderfall). */
.elementor-element-9e35216 .elementor-heading-title {
    text-align: center;
}
.elementor-element-9e35216 .gradient-text {
    white-space: nowrap;
}

/* Admin-Fund 2026-08-22 (Startseite, E-Learning-Portal-Bereich,
   Widget 8b19b64): Zeile mit Akkordeon-Karten links (.elementor-element-
   11675b2, "Digitaler Lernfortschritt"/"Rechtssichere Zertifikate"/...)
   und Screenshot-Mockup-Bild rechts (.elementor-element-493b5dd) steht
   nebeneinander (je ~50% Breite) OHNE jede Elementor-eigene Responsive-
   Ueberschreibung fuer schmalere Breiten (kein flex_direction_laptop/
   _tablet/_mobile in den Elementor-Daten) - blieb dadurch bis 454px
   unveraendert nebeneinander, Akkordeon-Karten dadurch unnoetig schmal
   (Admin-Screenshot bei 1121px: Karte nur ca. halb so breit wie die
   Sektionen darueber). Admin-Wunsch: Akkordeon-Karte soll die volle
   Breite nutzen. Fix per CSS (Regel E15), NICHT per Elementors eigenen
   _tablet/_mobile-Werten (Regel E15/E16) - identisches Muster wie die
   Leistungen-Karten und die Schadstoffschulungen-Statistik-Zeile weiter
   oben in dieser Sitzung. Bewusst nur <=1366px: bei >=1367px ist genug
   Platz fuer beide Spalten nebeneinander (616px/Spalte bei 1367px,
   komfortabel). */
/* Ergaenzung 2026-09-10 (Admin-Wunsch: E-Learning-Portal-Block auf
   schadstoffschulung vollstaendig an die Referenzseite Startseite
   angleichen): derselbe Block existiert dort mit eigenen Elementor-IDs
   (Reihe 759d7bd, Kachelspalte a95d59e, Mockup-Spalte 6596a77, Titel
   1b5d5aa) und war deshalb von diesen Regeln bisher nicht erfasst -
   Mockup blieb unter 1366px sichtbar, Kacheln blieben halbbreit, der
   Titel stand linksbuendig. IDs je Regel ergaenzt. */
@media (max-width: 1366px) {
    .elementor-element-8253246 > .e-con-inner,
    .elementor-element-759d7bd > .e-con-inner ,    .elementor-element-ea5446d > .e-con-inner {
        flex-direction: column !important;
    }
    .elementor-element-11675b2,
    .elementor-element-493b5dd,
    .elementor-element-a95d59e,    .elementor-element-3be1ff7,
    .elementor-element-6596a77 ,    .elementor-element-1613aef {
        width: 100% !important;
    }
}

/* Admin-Wunsch 2026-09-01 (Startseite, Abstand CTA-Buttons "Mehr zum
   E-Learning Portal"/"Kurskatalog ansehen" bis zum unteren Sektionsrand
   bei <1025px): Soll-Wert 60px, gemessen waren aber 80px. Ursache: das
   oben genannte .elementor-element-493b5dd (Desktop-Hover-Mockup-Bild,
   bei <=1366px per width:100% "unsichtbar" aber mit height:0px WEITERHIN
   im Flex-Layout vorhanden) ist NICHT das letzte Element im gemeinsamen
   Eltern-Container (e-con-inner, row-gap:20px) - der row-gap VOR diesem
   0px-hohen Geschwister-Element blieb trotzdem sichtbar und addierte
   20px zusaetzlich zum eigentlichen unteren Sektionsabstand (padding-
   bottom:60px auf einer weiter aussen liegenden e-con-inner). display:
   none entfernt es komplett aus dem Flex-Fluss (visuell ohnehin bereits
   unsichtbar/0px hoch, kein Verlust) - row-gap greift dann nicht mehr,
   Abstand exakt 60px. */
@media (max-width: 1366px) {
    .elementor-element-493b5dd,
    .elementor-element-6596a77 ,    .elementor-element-1613aef {
        display: none !important;
    }
}

/* Admin-Wunsch 2026-09-01 (Startseite, dieselben 3 Akkordeon-Kacheln
   "Digitaler Lernfortschritt in Echtzeit"/"Rechtssichere Zertifikate &
   Schulungsnachweise"/"Effiziente Schulungsloesungen fuer Unternehmen",
   gemeinsame Klasse .portal-tab-trigger): bei Elementors EIGENEM Mobile-
   Breakpoint (<=767px) hat das native Icon-Box "Icon Position"-Feld fuer
   "Mobile" den Wert "Oben" hinterlegt (erzeugt die Klasse .elementor-
   mobile-position-block-start) - dreht dadurch NUR den inneren
   .elementor-icon-box-wrapper auf flex-direction:column und zentriert
   per text-align:center vererbt Titel/Beschreibung/Liste, obwohl ab
   768px durchgehend die Zeilen-Optik (Icon links, Titel/Text/Checkliste
   rechts, Chevron-Badge ganz rechts) gilt - visueller Bruch unterhalb
   768px. Admin-Wunsch: <768px soll exakt dieselbe Optik wie darueber
   erhalten bleiben, kein Bruch. Die Box-Wurzel selbst (Flex-Eltern von
   Wrapper + Chevron-Badge) bleibt unangetastet row - nur der innere
   Wrapper wird zurueckgedreht. Fix per CSS (Regel E15 Prioritaet 2):
   das Mobile-Feld direkt in Elementor zurueckzusetzen wuerde einen get/
   put-Roundtrip auf die komplette Elementor-Seiten-JSON erfordern
   (Projekt-Erfahrungswert "Elementor put-Roundtrip" - bewusst vermieden). */
@media (max-width: 767px) {
    .portal-tab-trigger .elementor-icon-box-wrapper {
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: start !important;
    }
    /* Spezifitaets-Bump: Elementors eigenes custom-widget-icon-box.min.css
       setzt in exakt diesem Breakpoint ".elementor-widget-icon-box.
       elementor-mobile-position-block-start .elementor-icon-box-wrapper
       { align-items: unset !important }" (3 Klassen) - schlaegt die 2-
       Klassen-Regel oben trotz !important, weil bei gleicher Wichtigkeit
       die hoehere Spezifitaet gewinnt (nicht die Positionierung im File).
       Live per matchedRules bestaetigt (2026-09-01): align-items blieb
       auf "normal" statt "flex-start" haengen. Identischer Selektor mit
       einer zusaetzlichen Klasse (4 Klassen) erzwingt den Sieg. */
    .portal-tab-trigger.elementor-widget-icon-box.elementor-mobile-position-block-start .elementor-icon-box-wrapper {
        align-items: flex-start !important;
    }
}

/* Admin-Wunsch 2026-09-01 (Startseite, dieselben 3 Akkordeon-Kacheln,
   diesmal NUR <550px): ab dieser Breite soll die Zeilen-Optik (s.o.)
   wieder auf Icon-oben/Titel+Text-darunter wechseln - Icon-Box-Wrapper
   zurueck auf flex-direction:column. Die Box-Wurzel selbst (.portal-tab-
   trigger, Flex-Eltern von Wrapper + Chevron-Badge) wird ebenfalls auf
   column gedreht, damit das Chevron-Badge unter den Wrapper rutscht statt
   daneben - badge.align-self:center (bereits nativ ueber Elementors
   eigenes Custom-CSS des Badges gesetzt, hier unveraendert uebernommen)
   zentriert es dadurch automatisch unten mittig, der bestehende 24px-Gap
   der Box-Wurzel wird zum vertikalen Abstand Wrapper->Badge. Muss NACH
   der 767px-Regel oben stehen (gleiche Selektor-Spezifitaet, spaetere
   Regel gewinnt bei <=549px).
   Nachtrag 2026-09-01: Admin-Wunsch "mittig zentriert anordnen" -
   urspruenglich linksbuendig (align-items:flex-start), jetzt auf
   align-items:center + text-align:center umgestellt (Icon, Titel,
   Beschreibung UND Checkliste mittig). Die Checkliste (.portal-feature-
   list, eigene flex-direction:column) braucht dafuer zusaetzlich
   align-items:center auf dem <ul> selbst - text-align allein zentriert
   bei einem Flex-Container nicht die einzelnen <li>-Zeilen (Icon+Text je
   Zeile bleibt intern row, wird aber als Ganzes mittig platziert). */
@media (max-width: 549px) {
    .portal-tab-trigger {
        flex-direction: column !important;
    }
    .portal-tab-trigger .elementor-icon-box-wrapper {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    /* Gleicher Spezifitaets-Bump wie bei der 767px-Regel oben (s. dortiger
       Kommentar) - ohne diese Zeile blieb align-items bei "normal" haengen,
       das Icon dehnte sich dadurch auf die volle Breite (~354px) statt
       sich am Inhalt zu orientieren und wirkte dadurch links statt mittig
       (Admin-Meldung 2026-09-01, Screenshot: "Icon und Aufklappbarer
       Pfeil nicht mittig"). */
    .portal-tab-trigger.elementor-widget-icon-box.elementor-mobile-position-block-start .elementor-icon-box-wrapper {
        align-items: center !important;
    }
    /* Admin-Wunsch 2026-09-01 (Nachtrag, 2x korrigiert): Checkliste soll
       als GANZER Block mittig stehen, aber alle 3 Zeilen an EINER
       gemeinsamen linken Kante ausgerichtet sein (Haken untereinander),
       nicht jede Zeile einzeln zentriert. 1. Versuch (align-items:center
       auf dem <ul>) zentrierte jede <li> EINZELN entlang ihrer eigenen
       (unterschiedlich breiten) Textlaenge - die Haken standen dadurch
       live vermessen bei 63px/68px/74px, je nach Zeilenlaenge versetzt
       (Admin-Screenshot: "sind nicht linksbuendig mittig zentriert").
       Fix: <ul> per inline-flex auf ihre eigene Inhaltsbreite (breiteste
       Zeile) schrumpfen lassen, per margin-inline:auto als GANZES
       Rechteck zentrieren, und align-items:flex-start INNERHALB des so
       geschrumpften Rechtecks setzt alle Haken auf dieselbe linke Kante. */
    .portal-tab-trigger .portal-feature-list {
        display: inline-flex !important;
        align-items: flex-start !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .portal-tab-trigger .portal-feature-list li {
        text-align: left !important;
    }
    /* Chevron-Badge: Elementors eigenes Custom-CSS am Badge selbst setzt
       margin-left:auto (fuer die Rechtsausrichtung im Zeilen-Layout ab
       550px, dort weiterhin gewuenscht/unangetastet) - in der hier
       erzwungenen Spalten-Anordnung der Box-Wurzel wirkt margin-left:auto
       auf der Kreuzachse (jetzt horizontal) und schiebt das Badge trotz
       seines eigenen align-self:center an den rechten Rand (Auto-Margins
       gewinnen gegen align-items/align-self). margin-left:0 hier nur
       innerhalb <=549px behebt das, ohne die Rechtsausrichtung im
       550-767px-Zeilen-Layout zu beeinflussen. */
    .portal-tab-trigger .portal-tab-chevron-badge {
        margin-left: 0 !important;
    }
}

/* Admin-Wunsch 2026-09-01 (Startseite, Abstand zwischen Beschreibungstext
   "Absolvieren Sie Ihre Schadstoffschulung..." und der ersten Akkordeon-
   Kachel "Digitaler Lernfortschritt in Echtzeit"): der Abstand kam
   bislang aus mehreren verschachtelten nativen Elementor-Werten (Flex-
   Row-Gap + negativem Margin auf einem Vorfahren-Container) und sprang
   dadurch unangekuendigt zwischen 768px (80px Abstand) und 767px (32px
   Abstand) - kein einzelner --row-gap/--gap-Regler steuert diesen
   Abstand direkt, da die Akkordeon-Shell selbst (.portal-tab-accordion-
   shell, per JS bei <=1366px vor Trigger 1 eingefuegt) margin-top:0 hat
   und die Differenz vollstaendig aus ihren Vorfahren stammt. Admin-
   Wunsch: <1025px bis 300px durchgehend 60px, kein Sprung (Nachtrag
   2026-09-01: von urspruenglich 40px auf 60px erhoeht). Fix per
   margin-top DIREKT auf der Shell (erstes Kind von .elementor-element-
   11675b2 - nur Kachel 1 hat ueberhaupt Text darueber, Kacheln 2+3
   folgen direkt darunter und sind nicht betroffen): kompensiert die
   beiden nativen Ausgangswerte (80px im Bereich 769-1024px, 32px
   darunter bis 300px, live vermessen) je Bereich exakt auf 60px. Die
   native Umschaltung liegt bei genau 768px (768 selbst zaehlt bereits
   zum 32px-Bereich, NICHT zum 80px-Bereich - abweichend vom sonst
   ueblichen Elementor-Mobile-Bruch bei 767/768, hier live per
   Bisektion bestaetigt) - deshalb hier bewusst 769px statt 768px als
   Grenze, nicht der sonst im Projekt uebliche 767/768-Bruch. */
@media (min-width: 769px) and (max-width: 1024px) {
    .elementor-element-11675b2 > .portal-tab-accordion-shell:first-child,
    .elementor-element-a95d59e > .portal-tab-accordion-shell:first-child ,    .elementor-element-3be1ff7 > .portal-tab-accordion-shell:first-child {
        margin-top: -20px !important;
    }
}
@media (max-width: 768px) {
    .elementor-element-11675b2 > .portal-tab-accordion-shell:first-child,
    .elementor-element-a95d59e > .portal-tab-accordion-shell:first-child ,    .elementor-element-3be1ff7 > .portal-tab-accordion-shell:first-child {
        margin-top: 28px !important;
    }
}

/* Admin-Wunsch 2026-09-01 (Startseite, Akkordeon-Panel 1 "Digitaler
   Lernfortschritt", Dashboard-Mockup-Vorschau .portal-kachel-grid):
   die 2 Kurskacheln sprangen bei <=900px sofort untereinander (Elementor-
   Custom-CSS des Widgets selbst: grid-template-columns:1fr;max-width:
   350px bei max-width:900px). Die Kacheln selbst haben KEINE feste
   Mindestbreite (width:100%, reiner Flex-Inhalt) - der Sprung war eine
   willkuerliche Breakpoint-Entscheidung, kein technisches Muss. Admin-
   Wunsch: vor dem Umbruch erst die volle Breite nutzen und den
   Seitenabstand des Mockup-Contents (.portal-mockup-content, nativ 2rem/
   32px) bis auf 5px minimieren, ERST wenn das nicht mehr reicht auf 1
   Spalte umbrechen. Fix per CSS (Regel E15 Prioritaet 2 - Elementor-
   Custom-CSS des Widgets selbst nicht direkt editierbar/kein natives
   Feld, s. bereits mehrfach in diesem Bereich verwendetes Muster).
   Grenzwert 460px live ermittelt (Bisektion): oberhalb bleiben 2 Spalten
   mit Kartenbreite >=200px gut lesbar, darunter wird der Kartentext
   (2-zeiliger Kurstitel + Status-Badges) sichtbar zu schmal/quetscht.
   Nachtrag 2026-09-01 (8.): Grenzwert auf Admin-Wunsch von 461px auf
   570px angehoben ("<570px die beiden Kacheln auf eine reduzieren") -
   gilt gemeinsam fuer Panel 1 UND Panel 3 (teilen sich dieselbe Klasse
   .portal-kachel-grid, ein Selektor deckt beide "aufklappbaren Kisten"
   ab, exakt wie vom Admin verlangt).
   Nachtrag 2026-09-01: Admin-Wunsch "Randabstand schneller schrumpfen" -
   urspruengliche Formel clamp(5px,3.5vw,32px) erreichte das 5px-Minimum
   erst bei ca. 143px Breite, blieb im gesamten getesteten 900-461px-
   Bereich also durchgehend deutlich groesser (16-32px). Auf lineare
   calc()-Formel umgestellt, die 32px bei 900px UND 5px bereits bei 700px
   exakt trifft (A=13.5vw, B=-89.5px, aus den beiden Punkten aufgeloest -
   Regel-Erfahrungswert "vw-Formel bei Bereichsaenderung neu berechnen"):
   unterhalb 700px bleibt es am clamp()-Minimum (5px) haengen. */
@media (min-width: 570px) and (max-width: 900px) {
    .portal-kachel-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: none !important;
    }
    .portal-mockup-content {
        padding-left: clamp(5px, calc(13.5vw - 89.5px), 32px) !important;
        padding-right: clamp(5px, calc(13.5vw - 89.5px), 32px) !important;
    }
}

/* Admin-Wunsch 2026-09-01 (Nachtrag, <570px, Panel 1 UND Panel 3):
   statt beide Kurskacheln/Kurs-Zeilen quetschen zu lassen, wird unter
   570px nur noch der ERSTE Kurs gezeigt, der zweite komplett ausge-
   blendet (display:none, kein leerer Platzhalter).
   Panel 1 (.portal-kachel-grid, 2 Kachel-Widgets nebeneinander/-
   untereinander): 2. Kachel per :nth-child(2) ausgeblendet, Grid auf
   1 Spalte mit voller Breite (max-width:none, statt Elementors
   natives 350px-Limit bei <=900px - sonst wirkt die einzelne Kachel
   unnoetig klein/mittig statt die Breite zu nutzen).
   Panel 3 (Firmendashboard-Mockup, "Deine Teilnehmer" -> aufgeklappter
   Teilnehmer -> Kursliste): nutzt technisch eine ANDERE Komponente als
   Panel 1 - .portal-tn-course-row ist eine kompakte Zeile (Bild 80x64px
   links, Text mittig, 165px breite Button-Spalte rechts), keine Kachel.
   Admin-Wunsch "auf Kacheln umstellen": Row-Layout auf dieselbe Optik
   wie .portal-kachel-card umgestellt (Spalte statt Zeile, Bild oben
   volle Breite/150px hoch wie .portal-kachel-image, Text/Badges mittig,
   Buttons volle Breite - .portal-kachel-btn traegt bereits width:100%
   nativ, nur der 165px-Container .portal-tn-course-actions blockierte
   das). Zusaetzlich wie bei Panel 1 nur der 1. Kurs sichtbar, 2. per
   :nth-child(2) ausgeblendet. */
@media (max-width: 569px) {
    .portal-kachel-grid {
        grid-template-columns: 1fr !important;
        max-width: none !important;
    }
    .portal-kachel-grid .portal-kachel-card:nth-child(2) {
        display: none !important;
    }
    .portal-tn-course-list .portal-tn-course-row:nth-child(2) {
        display: none !important;
    }
    .portal-tn-course-row {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
        padding: 22px !important;
        border-radius: 24px !important;
    }
    .portal-tn-course-image {
        flex: 0 0 auto !important;
        align-self: stretch !important;
        width: 100% !important;
        height: 150px !important;
    }
    .portal-tn-course-content {
        width: 100% !important;
        text-align: center !important;
    }
    .portal-tn-badges-row {
        justify-content: center !important;
    }
    .portal-tn-course-actions {
        flex: 0 0 auto !important;
        width: 100% !important;
    }
}

/* Admin-Wunsch 2026-09-01 (Nachtrag, alle 3 Akkordeon-Panels): <810px
   soll der Randabstand ALLER Panel-Inhalte (nicht nur der Kurskacheln
   aus Panel 1/3, s. oben) sinken, damit die volle Breite genutzt wird.
   Je Panel-Typ ein eigener Innenabstand-Container: Panel 1+3 (Profilblock-
   Kopf + Kurskacheln): .portal-profile-block (nativ 24px, unabhaengig vom
   oben behandelten .portal-mockup-content) und .portal-mockup-content
   selbst; Panel 2 (Zertifikat-Vorschaubild): .portal-certdoc-wrap.
   Bewusst als harter Wert (kein clamp) direkt bei 810px, da Admin-Wunsch
   explizit "<810px" nannte statt einer weiteren Zwischenstufe.
   Nachtrag 2026-09-01 (2.): von 5px auf 0px reduziert (Admin-Wunsch
   "setz die 5px auf 0").
   Nachtrag 2026-09-01 (3.): trotz 0px Padding blieb sichtbarer Rand
   links/rechts (Admin-Screenshot) - Ursache war GAR KEIN Padding,
   sondern Elementors eigenes Custom-CSS auf dem AEUSSEREN Mockup-
   Rahmen selbst: ".portal-tab-panel-wrap .portal-mockup{width:78%;
   margin:0 auto;zoom:0.82}" bei max-width:1366px - schrumpft die
   gesamte Vorschau auf 78% Breite UND 82% Zoom, zentriert per Auto-
   Margin (live gemessen: 98px Rand pro Seite bei 809px Breite). Admin-
   Vorschlag "Padding auf -20px" haette nichts bewirkt (negative
   Padding-Werte sind in CSS ungueltig, werden vom Browser verworfen) -
   stattdessen die tatsaechliche Ursache direkt behoben: width auf 100%,
   Auto-Margin auf 0. Zoom bewusst unangetastet gelassen (skaliert
   Schriftgroessen/Icons proportional mit, kein Randabstand-Verursacher -
   nur die Breite des Rahmens war das Problem).
   Nachtrag 2026-09-01 (4.): von 0px auf 5px erhoeht (Admin-Wunsch "setz
   diesen beim aufgeklappten Inhalt auf 5px") - jetzt mit tatsaechlicher
   Wirkung, da die eigentliche Breiten-Ursache (s.o.) behoben ist.
   Nachtrag 2026-09-01 (5.): 5px am Screenshot kaum wahrnehmbar (Admin:
   "sehe keinen Randabstand") - auf 15px erhoeht.
   Nachtrag 2026-09-01 (6.): weiter auf 30px erhoeht.
   Nachtrag 2026-09-01 (7.): auf 25px reduziert.
   Nachtrag 2026-09-01 (8.): Admin-Fund - das Zertifikat-Vorschaubild in
   Panel 2 (.portal-certdoc-wrap) wirkte durch das width:100% auf
   .portal-mockup "kuenstlich gestreckt" (das Bild ist hochformatig,
   width:100% liess es dadurch unnoetig hoch/gross werden). Admin-Wunsch:
   Panel 2 soll NICHT auf width:100% erzwungen werden, sondern die
   Groesse von >570px (dort noch Elementors natives width:78%/zoom:0.82)
   beibehalten, solange sie in die Breite passt - erst danach normal
   weiterschrumpfen (das natuerliche %-Verhalten macht das automatisch,
   OHNE unsere Ueberschreibung). Fix: width:100% NUR noch fuer Panel 1+3
   (per :has(.portal-mockup-content) von Panel 2 abgegrenzt, da nur
   Panel 1+3 diesen Wrapper haben, Panel 2 nicht). */
@media (max-width: 809px) {
    .portal-profile-block,
    .portal-mockup-content,
    .portal-certdoc-wrap {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
    .portal-tab-panel-wrap .portal-mockup:has(.portal-mockup-content) {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* Admin-Wunsch 2026-09-01 (9., Screenshot 400px): bei KLEINEN Mobil-
   Groessen wirkt die Zertifikat-Vorschau (Panel 2) durch das natuerliche
   78%/Zoom-Verhalten umgekehrt zu KLEIN (viel leerer dunkler Rand links/
   rechts) - soll dort "genauso wie oben und darunter die Aufklappmenues"
   (Panel 1+3) die volle Breite nutzen, Randabstand nur noch die
   minimalen 25px von oben. Der Nachtrag (8.) bleibt im 570-809px-Bereich
   weiterhin gueltig (dort ausdruecklich NICHT gestreckt) - nur der
   kleinere Mobil-Bereich darunter wird jetzt wie Panel 1+3 behandelt. */
@media (max-width: 569px) {
    .portal-tab-panel-wrap .portal-mockup:has(.portal-certdoc-wrap) {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* Zertifikat-Vorschau (Panel 2, 6 Seiten): seit dem Wechsel vom eingebetteten
   Bild auf die Mediathek-Datei (2026-09-11) legt WebP Express ein <picture>
   um das <img>. Dessen max-height:100% bezog sich dadurch auf <picture>
   (Hoehe auto) statt auf .portal-certdoc-wrap - auf breiten Desktops
   (>1440px) wurde das Zertifikat oben und unten abgeschnitten (1920px:
   je 57px). display:contents nimmt <picture> aus der Box-Berechnung, das
   Bild richtet sich wieder am Kasten aus. */
.portal-certdoc-wrap > picture {
    display: contents;
}

/* Admin-Wunsch 2026-09-01 (Startseite, E-Learning-Portal-Bereich, CTA-
   Buttons unterhalb der 3 Akkordeon-Kacheln: "Mehr zum E-Learning
   Portal"/.elementor-element-53b666f und "Kurskatalog ansehen"/
   .elementor-element-2a5910c, gemeinsamer Flex-Container .elementor-
   element-d7614f2): bei <1025px stehen die Buttons linksbuendig (Row+
   Wrap-Container mit justify-content:flex-start nativ) - beim Umbruch
   auf 2 Zeilen (schmale Breiten) landet dadurch jeder Button einzeln
   links statt als Gruppe mittig. justify-content:center zentriert jede
   umgebrochene Zeile fuer sich (bei 2 Buttons untereinander wirkt das
   wie gewuenscht mittig). */
@media (max-width: 1024px) {
    .elementor-element-d7614f2 {
        justify-content: center !important;
    }
}

/* Admin-Wunsch 2026-08-22 (Startseite, E-Learning-Portal-Bereich):
   Titel "Online lernen mit Fortschritt, Zertifikat & Komfort"
   (.elementor-element-795fed5) stand linksbuendig, obwohl Badge
   darueber und Beschreibungstext darunter bereits mittig stehen.
   text-align:center ergaenzt, bewusst UNBEDINGT (kein @media noetig -
   Badge/Beschreibung sind ebenfalls breitenunabhaengig zentriert). */
.elementor-element-795fed5 .elementor-heading-title,
.elementor-element-1b5d5aa .elementor-heading-title ,.elementor-element-20e4d61 .elementor-heading-title {
    text-align: center;
}

/* Admin-Wunsch 2026-09-01 (Startseite, Abstand zwischen Badge "Interaktives
   E-Learning Portal" (.elementor-element-46b6e12) und Titel "Online lernen
   mit Fortschritt, Zertifikat & Komfort" (.elementor-element-795fed5)):
   Abstand kam bislang aus dem --row-gap (20px) des gemeinsamen Eltern-
   Containers (e-con-inner, flex-direction:column) PLUS Eigenhoehe des
   Badge-Wrapper-Containers a06908a - ergab live vermessen durchgehend
   konstant 70px (300-1024px, kein Sprung, anders als beim Akkordeon-
   Abstand weiter oben). Admin-Wunsch: <1025px auf 60px reduzieren. Fix
   per margin-top auf dem Titel-Widget selbst (-10px, deckt exakt die
   Differenz 70px->60px ab) statt am --row-gap zu drehen (haette auch den
   Abstand Titel->Beschreibungstext darunter mitveraendert, der nicht
   Teil des Wunsches war). */
@media (max-width: 1024px) {
    .elementor-element-795fed5,
    .elementor-element-1b5d5aa ,    .elementor-element-20e4d61 {
        margin-top: -10px !important;
    }
}

/* =============================================================
 * STARTSEITE MOBILE-RESPONSIVE (<1025px) - EINHEITLICHE SCHRIFTGROESSEN
 * Admin-Wunsch 2026-08-22: komplette Startseite auf mobile Schriftgroessen/
 * Abstaende pruefen, ALLE Bereiche (Elementor UND eigener Code), keine
 * iPad-Zwischenstufe (Bruch <=1024px direkt auf Mobile-Optik).
 * ============================================================= */

/* Admin-Fund: Ueberschrift "Unsere Leistungen im Ueberblick"
   (.elementor-element-ceea080) hat Elementor-Basisgroesse 3rem (48px)
   OHNE jede Mobile-/Tablet-/Laptop-Ueberschreibung in den Elementor-
   Daten - blieb dadurch bis 454px unveraendert bei 48px, fast doppelt
   so gross wie alle anderen H2/H3 auf der Seite (durchgehend 28-30px).
   Fix per CSS (Regel E15/E16), nicht per Elementors eigenem
   _mobile-Feld - auf den site-weiten Mobile-Ueberschrift-Standard
   (28px) vereinheitlicht. */
@media (max-width: 1024px) {
    .elementor-element-ceea080 .elementor-heading-title {
        font-size: 28px !important;
    }
}

/* Admin-Fund: der "Schadstoffschulungen"-Abschnitt (.elementor-element-
   836dd2f, Elternspalte fuer Statistik-Zeile/"Warum Teilnehmer"/3-Icon-
   Zeile/Kurskarussell) hat einen Elementor-eigenen Zeilenabstand
   (--row-gap:5rem = 80px) OHNE Mobile-Ueberschreibung - auf einem
   454px breiten Handy-Bildschirm wirkt ein 80px hoher Leerraum
   zwischen den Bloecken unverhaeltnismaessig gross. Auf 32px reduziert
   (haelt Abschnitte weiterhin klar getrennt, ohne unnoetige Leere). */
@media (max-width: 1024px) {
    .elementor-element-836dd2f,
    .elementor-element-7f0a2a8 ,    .elementor-element-2898d13 {
        --gap: 2rem 0rem !important;
        --row-gap: 2rem !important;
    }
}

/* Weitere Abschnitte mit demselben Muster (Elementor-eigener
   --row-gap 3-5rem OHNE Mobile-Ueberschreibung) - identischer Fix:
   .elementor-element-889977e/81ab1a1 ("Bausachverstaendiger von
   Schadstoff-Control"-Abschnitt), .elementor-element-51eb0c8
   ("Gebaeudeschadstoffe"-Abschnitt), .elementor-element-2e6c3b9
   (Footer-Kontaktspalte). */
@media (max-width: 1024px) {
    .elementor-element-889977e,
    .elementor-element-81ab1a1 {
        --gap: 1.5rem 0rem !important;
        --row-gap: 1.5rem !important;
    }

    .elementor-element-51eb0c8 {
        --gap: 2rem 0rem !important;
        --row-gap: 2rem !important;
    }

    .elementor-element-2e6c3b9 {
        --gap: 1.5rem 0rem !important;
        --row-gap: 1.5rem !important;
    }
}

/* Admin-Wunsch 2026-09-01 (Startseite, "Bausachverstaendiger von
   Schadstoff-Control"-Abschnitt, .elementor-element-889977e): Seiten-
   abstand links/rechts soll bei <1025px 2rem betragen, bei <780px 0rem.
   Aktueller Wert (30px bei <=1024px) stammt NICHT von diesem Element
   selbst, sondern von einer site-weiten, generischen Startseiten-Regel
   fuer ALLE .e-con.e-parent-Sektionen (body.home:not(...5x...)
   [data-elementor-type="wp-page"] .e-con.e-parent, 30px <=1024px/50px
   >=1025px, extrem hohe Selektor-Spezifitaet durch 5x :not()).
   1. Versuch (nur "body.home .elementor-element-889977e") verlor trotz
   !important gegen die Regel oben (bei gleicher Wichtigkeit gewinnt die
   hoehere Spezifitaet, nicht die Position in der Datei - live bestaetigt,
   Wert blieb bei 30px haengen). 2. Versuch (dieselbe body.home/:not()-
   Kette, ".e-con.e-parent" durch die Element-ID ersetzt) verlor ERNEUT -
   Ursache: ".e-con.e-parent" traegt selbst 2 Klassen, die einfache
   Element-ID nur 1, dadurch war die Original-Regel immer noch eine
   Klasse spezifischer. 3. Versuch (Element-ID-Klasse verdoppelt, exakt
   gleiche Spezifitaet) verlor EBENFALLS - Ursache diesmal nicht die
   Spezifitaet, sondern die Ladereihenfolge: bei EXAKT gleicher
   Spezifitaet+Wichtigkeit gewinnt die im HTML SPAETER eingebundene Regel,
   nicht die aus widgets.css - die Original-Regel steckt in einem sehr
   spaet im wp_head ausgegebenen Inline-<style>-Block (Sheet-Index 59),
   widgets.css laedt dagegen frueh (Sheet-Index 12). Fix: Element-ID-
   Klasse ein drittes Mal ergaenzt (".elementor-element-889977e" x3,
   technisch irrelevant fuers Matching) - macht die eigene Regel minimal
   spezifischer als das Original, damit ist die Ladereihenfolge egal.
   Betrifft weiterhin NUR dieses eine Element (alle anderen Sektionen
   behalten die generische 30/50px-Regel unangetastet - Admin-Wunsch
   galt ausdruecklich nur "dieser Box").
   ERWEITERUNG 2026-09-03 (Admin-Fund): der Inhalt dieser Box wurde 1:1
   von der Startseite auf schadstoffgutachten kopiert, dort aber bleibt
   der AEUSSERE Wrapper die eigene, unveraenderte ID 9806e1a (nur der
   innere Inhalt wurde ersetzt) - eigener Selektor mit page-id-390 statt
   body.home ergaenzt. Erster Versuch nur mit 3x wiederholter Klasse
   (ohne :not()-Kette) verlor gegen die generische 30px-Seitenabstands-
   regel (deren 5x :not() zaehlt ebenfalls zur Spezifitaet) - dieselbe
   :not()-Kette wie beim body.home-Selektor ergaenzt, damit die
   Spezifitaet wieder mindestens gleich hoch ist. */
@media (max-width: 1024px) {
    body.home:not(.page-id-17055):not(.page-id-18055):not(.page-id-18135):not(.page-id-22039):not(.page-id-17788) [data-elementor-type="wp-page"] .elementor-element-889977e.elementor-element-889977e.elementor-element-889977e,
    body.page-id-390:not(.page-id-17055):not(.page-id-18055):not(.page-id-18135):not(.page-id-22039):not(.page-id-17788) [data-elementor-type="wp-page"] .elementor-element-9806e1a.elementor-element-9806e1a.elementor-element-9806e1a {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}
@media (max-width: 779px) {
    body.home:not(.page-id-17055):not(.page-id-18055):not(.page-id-18135):not(.page-id-22039):not(.page-id-17788) [data-elementor-type="wp-page"] .elementor-element-889977e.elementor-element-889977e.elementor-element-889977e,
    body.page-id-390:not(.page-id-17055):not(.page-id-18055):not(.page-id-18135):not(.page-id-22039):not(.page-id-17788) [data-elementor-type="wp-page"] .elementor-element-9806e1a.elementor-element-9806e1a.elementor-element-9806e1a {
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }
}

/* Admin-Fund 2026-09-01 (echtes Kernproblem, 3. Anlauf): "diese Box" aus
   dem urspruenglichen Admin-Wunsch war weder 889977e (aeussere Sektion)
   noch die 4 Icon-Kacheln (beide Fixes wieder entfernt), sondern der
   Text-Editor-Widget-Wrapper mit Titel+Fliesstext selbst
   (.elementor-element-a6d1bac, enthaelt die 2 Absaetze "Unsere
   erfahrenen Bausachverstaendigen..."/"Mit aktuellen Qualitaetsstandards
   ..."). Der urspruengliche Versuch hier in widgets.css verlor gegen
   eine gleich-spezifische, aber SPAETER geladene Inline-Regel aus
   sc_bausv_wide_layout_js() (shared-functions.php, 5rem/80px, gedacht
   fuer den 1025-1630px-Bereich, griff mangels unterer Breakpoint-Grenze
   aber ungewollt bis in den Mobil-Bereich durch). Fix direkt an der
   Quelle in shared-functions.php ergaenzt (selbes <style>-Ausgabe,
   zwei spaetere spezifischere Stufen) - hier daher KEINE Regel mehr
   noetig, um Ueberschreibungsschichten zu vermeiden (Code-Style: nur
   die letzte greifende Logik bleibt). */

/* Admin-Fund 2026-08-31: "Unsere Zertifizierungen & Qualifikationen"-
   Badge-Zeile ("Behoerdlich anerkannt"/"Regelmaessig fortgebildet"/
   "Vollstaendig dokumentiert", .elementor-element-6967753) - im Bereich
   768-899px brach die 3. Badge asymmetrisch in eine zweite Zeile um
   (Karten 1+2 nebeneinander, Karte 3 allein darunter), dabei OHNE
   Zwischenabstand (row-gap:normal bei diesem Zwischenbereich, nativ nur
   <=767px auf 15px gesetzt).
   NACHTRAG (Admin-Wunsch): statt eines erzwungenen "immer 1 Badge pro
   Zeile"-Layouts soll sich die Reihe bei <1025px selbststaendig anpassen
   - 3 nebeneinander, sobald der Platz nicht mehr reicht 2 nebeneinander
   + 1 darunter, erst wenn selbst 2 nicht mehr passen 1 pro Zeile (rein
   breitenbasiert, kein fester Layoutwechsel). Reines row-gap:15px
   (natives Elementor-Wrapping bleibt unangetastet aktiv) genuegt dafuer
   bereits - der Abstand fehlte bisher nur im 768-899px-Zwischenbereich,
   das Wrap-Verhalten selbst war nie das Problem. Live verifiziert: 900px
   3-in-Reihe, 700-875px automatisch 2+1 MIT 15px Abstand, 500px
   automatisch 1 pro Zeile MIT 15px Abstand - alles selbststaendig durch
   Elementors eigenes flex-wrap, nur der Abstand war die Luecke. */
@media (max-width: 1024px) {
    .elementor-element-6967753 .elementor-icon-list-items {
        row-gap: 15px !important;
    }
}

/* Admin-Wunsch 2026-08-31: Abstand zwischen den 3 Badges ("Behoerdlich
   anerkannt"/"Regelmaessig fortgebildet"/"Vollstaendig dokumentiert")
   halbiert - nativ margin-inline:15px je Badge (=30px Gesamtabstand
   zwischen zwei Badges, post-2.css), auf 7.5px je Seite (=15px
   Gesamtabstand) reduziert. Bewusst ohne Breakpoint-Einschraenkung -
   gilt einheitlich auf allen Breiten (row-gap oben bleibt fuer den
   Zeilenumbruch-Fall unabhaengig davon bei 15px). */
.elementor-element-6967753 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
    margin-inline: 7.5px !important;
}

/* Admin-Fund 2026-08-31 (2. Fundstelle): identischer Fehlender-
   Zwischenabstand-Bug bei "Unsere kommunalen Partner" (.elementor-
   element-3953754 Karte, Badge-Zeile "27+ Kommunen & Partner"/"500+
   Oeffentliche Projekte"/"Zertifizierte Fachkompetenz", Icon-List-
   Widget .elementor-element-9930838) - live bei 786px bestaetigt: exakt
   dieselbe Ursache (row-gap:normal statt 15px im Zwischenbereich
   zwischen "3 passen" und "<=767px"), gleicher Fix. */
@media (max-width: 1024px) {
    .elementor-element-9930838 .elementor-icon-list-items {
        row-gap: 15px !important;
    }
}

/* Admin-Auftrag 2026-09-10 (Responsive-Angleich der vier Lehrgangsseiten):
   die Hero-Ueberschrift (.elementor-element-d576c8a - auf allen vier Seiten
   dieselbe Element-ID) enthaelt im GERENDERTEN Text ein geschuetztes
   Trennzeichen (U+2011) in "Online-Fachkundelehrgang"; in den Elementor-
   Daten steht ein normaler Bindestrich, die Umwandlung passiert erst bei
   der Ausgabe. Das Wort kann dadurch nicht umbrechen und schob die Seite
   bei 380px um 23px ueber die Fensterbreite hinaus (auf TRGS 505 nicht
   sichtbar, dort steht der Bindestrich mit Leerzeichen).
   Der Umbruch greift nur, wenn das Wort sonst nicht passt - auf breiteren
   Ansichten bleibt alles unveraendert. Bewusst kein Eingriff in den Text,
   damit die Schreibweise erhalten bleibt.
   NACHTRAG (live geprueft): overflow-wrap:break-word ohne !important blieb
   wirkungslos - Elementors eigene Ueberschriften-Regel hat dieselbe
   Spezifitaet und laedt spaeter. Daher !important und "anywhere" statt
   "break-word": der geschuetzte Bindestrich bietet keine regulaere
   Umbruchstelle, an der "break-word" ansetzen koennte.
   NACHTRAG 2: die Seite setzt bei <=1024px generell
   "overflow-wrap:normal !important" auf alle Ueberschriften
   (.elementor .elementor-widget.elementor-widget-heading
   .elementor-heading-title, Spezifitaet 0-4-0). Der Selektor hier
   braucht daher mindestens dieselbe Klassenzahl - ".elementor"
   ergaenzt (0-4-1), damit die Ausnahme fuer diese eine Ueberschrift
   greift. */
@media (max-width: 767px) {
    body .elementor .elementor-element.elementor-element-d576c8a .elementor-heading-title {
        overflow-wrap: anywhere !important;
    }
}