/*
Theme Name:   Schneidereit 2026
Theme URI:
Description:  Child-Theme für YooTheme Pro
Author:       REALDOT
Author URI:
Template:     yootheme
Version:      1.7.94
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  schneidereit-2026
*/

/* =========================================================================
   BUTTONS — Overrides zum kompilierten YooTheme-Style (theme.1.css)
   Entscheidung 20.08.2026: Buttons als Pill (500px), passend zu Inputs,
   Badges und Navbar. Active-Zustände vom Preset-Pink auf die Orange-
   Familie korrigiert (siehe design.md, Abschnitt 8).
   Doppelte Klassen-Selektoren nötig: theme.1.css lädt NACH dieser Datei.
   Sobald das YooTheme-Style-JSON gepflegt ist, können diese Overrides
   dorthin wandern und hier entfallen.
   ========================================================================= */

/* Pill-Form für alle Flächen-Buttons */
.uk-button.uk-button {
    border-radius: 500px;
}

/* Text-/Link-Varianten sind keine Flächen — eckig lassen */
.uk-button-text.uk-button-text,
.uk-button-link.uk-button-link {
    border-radius: 0;
}

/* Active/Pressed: Orange-Familie statt Preset-Pink (#f1025c/#f12624/#f17a24) */
.uk-button-primary.uk-button-primary:active,
.uk-button-primary.uk-button-primary.uk-active {
    background-color: #bc6200;
    background-image: linear-gradient(90deg, #d67000 50%, #bc6200 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 1px 1px 1px rgba(137, 72, 0, .2);
}

.uk-button-secondary.uk-button-secondary:active,
.uk-button-secondary.uk-button-secondary.uk-active {
    background-color: #bc6200;
    background-image: linear-gradient(90deg, #d67000 50%, #bc6200 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 1px 1px 1px rgba(137, 72, 0, .2);
}


/* =========================================================================
   BRANCHEN-GALERIE — Sonderkachel „Weitere Bereiche"
   Aktivierung: dem Gallery-Element in YooTheme unter
   Erweitert → Klasse den Wert „branchen-grid" geben.
   Die LETZTE Kachel der Galerie wird zur hellen, mittig zentrierten
   Text-Kachel. Das von YooTheme verlangte Bild bleibt im Markup
   (beliebiges Bild einsetzen), wird unsichtbar geschaltet und bestimmt
   weiterhin die Kachelhöhe über sein Seitenverhältnis.
   Voraussetzung: „Weitere Bereiche" ist die letzte Kachel der Galerie.
   ========================================================================= */

/* Hover-Effekt: zwei orange Ecken (oben rechts / unten links) wachsen
   mit abgerundeter Diagonalkante aufeinander zu und verschmelzen zur
   vollen Fläche — harte, saubere Kanten, keine Verläufe.
   --sp-corner steuert die Ruhegröße: 0% = unsichtbar; z. B. 14% zeigt
   die Ecken schon im Ruhezustand als dezente Akzente. */
.branchen-grid .uk-grid > div:last-child .el-item {
    position: relative;
    overflow: hidden;               /* clippt die Füllformen an die Rundung */
    background: #f4f7f9;
    border: 1px solid #e5e9ed;
    border-radius: 12px;
    --sp-corner: 0%;
    transition: border-color .5s ease-in-out;
}

/* Inhalt über die Füllformen heben — das ::after läge sonst laut
   Paint-Reihenfolge ÜBER dem Text */
.branchen-grid .uk-grid > div:last-child .el-item > a,
.branchen-grid .uk-grid > div:last-child .el-item > .uk-position-bottom-left {
    z-index: 1;
}

.branchen-grid .uk-grid > div:last-child .el-item::before,
.branchen-grid .uk-grid > div:last-child .el-item::after {
    content: "";
    position: absolute;
    width: var(--sp-corner);
    height: var(--sp-corner);
    background-color: #ef7d00;
    pointer-events: none;
    transition: width .6s cubic-bezier(.4, 0, .2, 1),
                height .6s cubic-bezier(.4, 0, .2, 1),
                border-radius .6s cubic-bezier(.4, 0, .2, 1);
}
.branchen-grid .uk-grid > div:last-child .el-item::before {
    top: 0;
    right: 0;
    border-radius: 0 12px 0 100%;
}
.branchen-grid .uk-grid > div:last-child .el-item::after {
    bottom: 0;
    left: 0;
    border-radius: 0 100% 0 12px;
}

.branchen-grid .uk-grid > div:last-child .el-item:hover {
    border-color: #ef7d00;
}
.branchen-grid .uk-grid > div:last-child .el-item:hover::before,
.branchen-grid .uk-grid > div:last-child .el-item:hover::after {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

/* Bild unsichtbar — bleibt aber als Höhen-/Ratio-Platzhalter erhalten */
.branchen-grid .uk-grid > div:last-child .el-image {
    opacity: 0;
}

/* Gradient-Overlay ausblenden (Inline-Style, daher display statt background) */
.branchen-grid .uk-grid > div:last-child .uk-position-cover {
    display: none;
}

/* Inhalt mittig zentrieren statt unten links */
.branchen-grid .uk-grid > div:last-child .uk-position-bottom-left {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Dunkle Typografie auf heller Kachel —
   Farbwechsel weich, damit er mit der Füll-Animation harmoniert.
   Hinweis: „Mehr erfahren" ist bei verlinkter Kachel KEIN <a>, sondern
   ein <div class="el-link uk-button uk-button-text"> — daher wird
   .uk-button-text explizit mitgefärbt; sein Pfeil ist ein SVG-
   Hintergrundbild und wird per filter weiß geschaltet. */
.branchen-grid .uk-grid > div:last-child .el-title,
.branchen-grid .uk-grid > div:last-child .el-content,
.branchen-grid .uk-grid > div:last-child .el-item a,
.branchen-grid .uk-grid > div:last-child .el-item .uk-button-text {
    transition: color .3s ease-in-out;
}
.branchen-grid .uk-grid > div:last-child .el-item .uk-button-text::after {
    transition: filter .3s ease-in-out, background-position .2s ease-out;
}
.branchen-grid .uk-grid > div:last-child .el-title {
    color: #1a1a1a;
}
/* Pfeil als SVG-Maske: konsistente Strichstärke statt fontabhängigem
   Unicode-Glyph, 12px Abstand zur Headline, wandert beim Hover mit */
.branchen-grid .uk-grid > div:last-child .el-title::after {
    content: "";
    display: inline-block;
    width: .8em;
    height: .8em;
    margin-left: 12px;
    vertical-align: -.06em;
    background-color: #ef7d00;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 12h16M13 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 12h16M13 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .2s ease-in-out;
}
.branchen-grid .uk-grid > div:last-child .el-item:hover .el-title::after {
    transform: translateX(4px);
    background-color: #fff;
    transition: transform .2s ease-in-out, background-color .45s ease-in-out .2s;
}
/* Beim Hover: alle Inhalte weiß, damit sie auf Orange lesbar bleiben.
   Leichter Delay (.2s) beim Einfärben — das Weiß kommt, wenn die
   Füllfront die Mitte erreicht; der Rückweg läuft ohne Delay über die
   Basis-Transition. */
.branchen-grid .uk-grid > div:last-child .el-item:hover .el-title,
.branchen-grid .uk-grid > div:last-child .el-item:hover .el-content,
.branchen-grid .uk-grid > div:last-child .el-item:hover a,
.branchen-grid .uk-grid > div:last-child .el-item:hover .uk-button-text,
.branchen-grid .uk-grid > div:last-child .el-item:hover .uk-icon,
.branchen-grid .uk-grid > div:last-child .el-item:hover svg {
    color: #fff;
    transition: color .45s ease-in-out .2s;
}
/* Pfeil des „Mehr erfahren"-Buttons: SVG-Hintergrundbild → per Filter weiß */
.branchen-grid .uk-grid > div:last-child .el-item:hover .uk-button-text::after {
    filter: brightness(0) invert(1);
    transition: filter .45s ease-in-out .2s, background-position .2s ease-out;
}

/* Optionale Unterzeile (Content-Feld der Kachel, z. B.
   „Kitas · Veterinär · Studierendenwerke · Hotels") */
.branchen-grid .uk-grid > div:last-child .el-content {
    color: #78838a;
}

/* =========================================================================
   CHECKLISTE — Listenpunkte als orange Check-Kreise (aus dem
   Startseiten-Konzept). Wiederverwendbar auf jeder Seite:
   dem List-Element in YooTheme unter Erweitert → Klasse den Wert
   „sp-checkliste" geben. Funktioniert mit uk-list-disc/-bullet/-primary
   und mit uk-list-divider (Icon rückt unter die Trennlinie).
   ========================================================================= */

ul.sp-checkliste,
.sp-checkliste ul {
    padding-left: 0;
    list-style: none;
}
.sp-checkliste li {
    position: relative;
    padding-left: 48px;   /* 30px Kreis + 18px Abstand */
    list-style: none;
}
.sp-checkliste li::marker {
    content: none;
}
/* Check-Kreis: Orange-Verlauf + weißer Haken (SVG als Data-URI) */
.sp-checkliste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;            /* optisch mittig zur ersten Textzeile */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ef7d00;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E"),
        linear-gradient(100deg, #ef7d00 30%, #e35b00 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 15px 15px, cover;
}
/* uk-list-divider: ab dem 2. Eintrag sitzt oben die Trennlinie mit
   10px (bzw. 20px bei uk-list-large) Innenabstand — Icon mitschieben */
.uk-list-divider.sp-checkliste > :nth-child(n+2)::before,
.sp-checkliste .uk-list-divider > :nth-child(n+2)::before {
    top: 8px;
}
.uk-list-large.uk-list-divider.sp-checkliste > :nth-child(n+2)::before,
.sp-checkliste .uk-list-large.uk-list-divider > :nth-child(n+2)::before {
    top: 18px;
}

/* Übergangsanimationen bei reduzierter Bewegung abschalten
   (Farb-/Füllwechsel erfolgen dann sofort) */
@media (prefers-reduced-motion: reduce) {
    .branchen-grid .uk-grid > div:last-child .el-item,
    .branchen-grid .uk-grid > div:last-child .el-item::before,
    .branchen-grid .uk-grid > div:last-child .el-item::after,
    .branchen-grid .uk-grid > div:last-child .el-title,
    .branchen-grid .uk-grid > div:last-child .el-content,
    .branchen-grid .uk-grid > div:last-child .el-item a,
    .branchen-grid .uk-grid > div:last-child .el-item .uk-button-text,
    .branchen-grid .uk-grid > div:last-child .el-item .uk-button-text::after,
    .branchen-grid .uk-grid > div:last-child .el-title::after {
        transition: none;
    }
}


/* =========================================================================
   PRODUKTSEITEN — Sticky Sprungnavigation ("Subnav")
   Aktivierung: der SEKTION in YooTheme unter Erweitert → Klasse den Wert
   „sp-subnav" geben. Die gesamte Sektion bleibt beim Scrollen oben stehen
   und übernimmt Maße und Optik aus dem ProTec-Konzeptentwurf.
   Bewusst tolerant gegenüber der inneren Struktur: greift bei Nav-,
   Subnav- und Listen-Elementen ebenso wie bei einfachen Textlinks.
   ========================================================================= */

/* Doppelte Klasse in allen Selektoren: theme.1.css lädt NACH dieser Datei,
   bei gleicher Spezifität würde YooTheme sonst gewinnen (Höhe, Schriftgröße).
   Der Button bleibt bewusst komplett unangetastet. */

/* Zwei Zustände:
   RUHE  — volle Leiste über die ganze Breite, weiße Fläche, Hairline unten.
   STUCK — sobald sie beim Scrollen die Navbar erreicht, zieht sie sich zur
           Glas-Pille im Stil der Navbar zusammen (Klasse „is-stuck" wird
           per Skript gesetzt, siehe functions.php Abschnitt 6c).
   Die Gesamthöhe bleibt in beiden Zuständen 64 px — dadurch springt der
   Seiteninhalt beim Umschalten nicht.
   --sp-subnav-top kommt ebenfalls aus dem Skript (Navbar-Höhe gemessen);
   der Wert hier ist nur der Rückfall. */
.sp-subnav.sp-subnav {
    position: -webkit-sticky;
    position: sticky;
    top: var(--sp-subnav-top, 104px);
    z-index: 970;                /* unter der Navbar, über dem Inhalt */
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
    border-bottom: 1px solid #e2e8ec;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /* Die freie Fläche neben der Pille darf im Stuck-Zustand keine
       Klicks auf den darunterliegenden Inhalt abfangen */
    pointer-events: none;
    transition: background-color .35s ease, border-color .35s ease;
    /* KEIN overflow — sonst beschneidet der Container den Schatten des Buttons */
}

.sp-subnav.sp-subnav > .uk-container {
    pointer-events: auto;
    /* --sp-subnav-w setzt das Skript, wenn 1200 px für alle Punkte
       nicht reichen — der Container wächst dann bis Viewportbreite */
    max-width: var(--sp-subnav-w, 1200px);
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: max-width .35s ease, margin .35s ease, padding .35s ease,
                border-radius .35s ease, border-color .35s ease,
                background-color .35s ease, box-shadow .35s ease;
}

/* --- angedockt: Glas-Pille --- */
.sp-subnav.sp-subnav.is-stuck {
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.sp-subnav.sp-subnav.is-stuck > .uk-container {
    max-width: 1060px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-left: 30px;
    padding-right: 14px;
    border-color: rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(255, 255, 255, .93);   /* Rückfall ohne backdrop-filter */
    box-shadow: 0 10px 34px -14px rgba(20, 24, 27, .3),
                inset 0 1px 0 rgba(255, 255, 255, .7);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .sp-subnav.sp-subnav.is-stuck > .uk-container {
        background: rgba(255, 255, 255, .68);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
        backdrop-filter: blur(14px) saturate(150%);
    }
}

/* Sektions-Innenabstände neutralisieren — die Höhe macht die Leiste selbst */
.sp-subnav.sp-subnav .uk-grid,
.sp-subnav.sp-subnav .uk-grid > div,
.sp-subnav.sp-subnav .uk-panel {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* Die eigentliche Leiste: eine Zeile, 64 px hoch */
.sp-subnav.sp-subnav .uk-container > .uk-grid,
.sp-subnav.sp-subnav .uk-subnav,
.sp-subnav.sp-subnav .uk-nav,
.sp-subnav.sp-subnav ul {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 64px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: nowrap;
    transition: min-height .35s ease, gap .35s ease;
}
/* Angedockt etwas kompakter — zusammen mit dem 2×6 px Rand der Pille
   ergibt das wieder exakt 64 px Gesamthöhe */
.sp-subnav.sp-subnav.is-stuck .uk-container > .uk-grid,
.sp-subnav.sp-subnav.is-stuck .uk-subnav,
.sp-subnav.sp-subnav.is-stuck .uk-nav,
.sp-subnav.sp-subnav.is-stuck ul {
    min-height: 52px;
}
/* UIkit setzt bei uk-subnav/uk-nav eigene Abstände auf die Kinder —
   die würden sich zum gap addieren und die Leiste auseinanderziehen */
.sp-subnav.sp-subnav .uk-subnav > *,
.sp-subnav.sp-subnav .uk-nav > *,
.sp-subnav.sp-subnav ul > li {
    padding-left: 0;
    margin-top: 0;
    flex: none;
}

/* Links — Größe und Verhalten wie im Entwurf */
.sp-subnav.sp-subnav a:not(.uk-button) {
    display: inline-block;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: #78838a;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color .15s ease-in-out, border-color .15s ease-in-out;
}
.sp-subnav.sp-subnav a:not(.uk-button):hover,
.sp-subnav.sp-subnav .uk-active > a:not(.uk-button),
.sp-subnav.sp-subnav a.is-current:not(.uk-button) {
    color: #ef7d00;
    border-bottom-color: #ef7d00;
}

/* Erstes Element als Seitentitel (z. B. „ProTec®") — fett und dunkel */
.sp-subnav.sp-subnav .sp-subnav-title,
.sp-subnav.sp-subnav .sp-subnav-title a,
.sp-subnav.sp-subnav strong {
    font-size: 15px;
    font-weight: 600;
    color: #14181b;
    white-space: nowrap;
    flex: none;
}

/* --- Platzverhalten bei vielen Punkten ------------------------------------
   Die Leiste bleibt in BEIDEN Zuständen einzeilig. Nur so bleibt ihre
   Höhe konstant — eine umbrechende Leiste ändert beim Andocken die Höhe
   und gerät mit der Scroll-Verankerung des Browsers in eine
   Flacker-Schleife (Andocken → Höhe schrumpft → Browser korrigiert die
   Scroll-Position → Leiste dockt ab → Höhe wächst → von vorn).
   RUHE:  Spaltenbreiten aus dem Builder (z. B. 2/3 + 1/3) sind
          neutralisiert. Reicht der Platz trotzdem nicht, weitet das
          Skript den Container über 1200 px hinaus (--sp-subnav-w) und
          zieht die Abstände zusammen (--sp-subnav-gap), bis alle
          Punkte sichtbar sind.
   STUCK: Die Pille bleibt bei 1060 px — die Liste scrollt horizontal
          (Mausrad/Ziehen übersetzt das Skript, Touch wischt nativ),
          rückt den aktiven Punkt beim Durchscrollen der Seite selbst
          ins Bild, und der Fade markiert verborgene Punkte. Dasselbe
          Scroll-Verhalten ist zugleich der Rückfall im Ruhezustand,
          falls selbst die volle Viewportbreite nicht reicht. */
.sp-subnav.sp-subnav .uk-container > .uk-grid > * {
    width: auto;
    min-width: 0;   /* Flex-Spalten schrumpfen sonst nie unter Inhaltsbreite */
    flex: 0 0 auto;
}
.sp-subnav.sp-subnav .uk-container > .uk-grid > :first-child {
    flex: 1 1 auto;
}
.sp-subnav.sp-subnav .uk-subnav,
.sp-subnav.sp-subnav .uk-nav {
    gap: var(--sp-subnav-gap, 28px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.sp-subnav.sp-subnav .uk-subnav::-webkit-scrollbar,
.sp-subnav.sp-subnav .uk-nav::-webkit-scrollbar {
    display: none;
}
.sp-subnav.sp-subnav.is-stuck .uk-subnav,
.sp-subnav.sp-subnav.is-stuck .uk-nav {
    gap: 22px;      /* enger als in Ruhe — gewinnt Platz in der Pille */
}
/* Fade an den Rändern — die Klassen setzt das Subnav-Skript:
   „at-start"/„at-end" heben den Fade auf der Seite auf, auf der
   nichts mehr verborgen ist. So wandert er beim Scrollen mit. */
.sp-subnav.sp-subnav .is-overflowing {
    cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.sp-subnav.sp-subnav .is-overflowing.at-start {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
.sp-subnav.sp-subnav .is-overflowing.at-end {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000);
    mask-image: linear-gradient(90deg, transparent, #000 48px, #000);
}
.sp-subnav.sp-subnav .is-overflowing.at-start.at-end {
    -webkit-mask-image: none;
    mask-image: none;
}
.sp-subnav.sp-subnav .is-dragging {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
}

/* Ankersprünge nicht unter der Leiste verschwinden lassen */
html {
    scroll-padding-top: 84px;
}

@media (max-width: 959px) {
    /* Mobil bricht die Leiste in BEIDEN Zuständen um — alle Punkte
       sichtbar, kein Scroll-Verhalten und kein Fade nötig */
    .sp-subnav.sp-subnav .uk-container > .uk-grid,
    .sp-subnav.sp-subnav .uk-subnav,
    .sp-subnav.sp-subnav .uk-nav,
    .sp-subnav.sp-subnav ul,
    .sp-subnav.sp-subnav.is-stuck .uk-subnav,
    .sp-subnav.sp-subnav.is-stuck .uk-nav {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 8px 20px;
        min-height: 48px;
    }
    .sp-subnav.sp-subnav.is-stuck > .uk-container {
        border-radius: 24px;      /* umgebrochene Zeilen passen nicht in eine Pille */
        padding-left: 22px;
        padding-right: 22px;
    }
    html {
        scroll-padding-top: 72px;
    }
}

/* Kein Morph-Effekt, wenn der Nutzer reduzierte Bewegung eingestellt hat */
@media (prefers-reduced-motion: reduce) {
    .sp-subnav.sp-subnav,
    .sp-subnav.sp-subnav > .uk-container,
    .sp-subnav.sp-subnav .uk-subnav,
    .sp-subnav.sp-subnav .uk-nav,
    .sp-subnav.sp-subnav ul {
        transition: none;
    }
}


/* =========================================================================
   PRODUKTSEITEN — Prozesskette ("Aus der Maschine kommt kein nasser Mopp…")
   Aktivierung: dem GRID-Element in YooTheme unter Erweitert → Klasse den
   Wert „sp-chain" geben. Übernimmt Karten, Typografie und die Pfeil-
   Verbindung aus dem ProTec-Konzeptentwurf.
   Doppelte Klasse wegen der Ladereihenfolge (theme.1.css lädt später).
   Variante OHNE Verbindungspfeile (z. B. Einsatzorte Branchenseiten):
   stattdessen die Klasse „sp-cards" vergeben — gleiche Kartenoptik.
   ========================================================================= */

/* Gleich hohe Karten nebeneinander */
.sp-chain.sp-chain > .uk-grid > div,
.sp-chain.sp-chain .uk-grid > div,
.sp-cards.sp-cards > .uk-grid > div,
.sp-cards.sp-cards .uk-grid > div {
    display: flex;
}

/* Die Karte */
.sp-chain.sp-chain .el-item,
.sp-chain.sp-chain .uk-card,
.sp-cards.sp-cards .el-item,
.sp-cards.sp-cards .uk-card {
    position: relative;
    flex: 1;
    background: #fff;
    border: 1px solid #e2e8ec;
    border-radius: 16px;
    padding: 26px 22px;
    box-shadow: none;
}

/* Schrittnummer (Feld „Meta" im Element) */
.sp-chain.sp-chain .el-meta,
.sp-cards.sp-cards .el-meta {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.2;
    color: #ef7d00;
    margin: 0 0 10px;
    text-transform: none;
}

/* Titel */
.sp-chain.sp-chain .el-title,
.sp-cards.sp-cards .el-title {
    display: block;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: #14181b;
    margin: 0 0 6px;
}

/* Fließtext */
.sp-chain.sp-chain .el-content,
.sp-chain.sp-chain .el-content p,
.sp-cards.sp-cards .el-content,
.sp-cards.sp-cards .el-content p {
    font-size: 14.5px;
    line-height: 1.55;
    color: #78838a;
    margin: 0;
}

/* Verbindungspfeil zwischen den Karten — sitzt im Rasterzwischenraum */
.sp-chain.sp-chain .el-item::after,
.sp-chain.sp-chain .uk-card::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -13px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #e2e8ec;
    border-right: 2px solid #e2e8ec;
    transform: translateY(-50%) rotate(45deg);
}
/* Am letzten Element kein Pfeil */
.sp-chain.sp-chain .uk-grid > div:last-child .el-item::after,
.sp-chain.sp-chain .uk-grid > div:last-child .uk-card::after {
    display: none;
}

/* Ab Tablet abwärts stapeln die Karten — dann stört der Pfeil */
@media (max-width: 959px) {
    .sp-chain.sp-chain .el-item::after,
    .sp-chain.sp-chain .uk-card::after {
        display: none;
    }
}

/* --- Variante MIT Bild ----------------------------------------------------
   Aktivierung: dem Grid ZUSÄTZLICH zu „sp-cards" die Klasse
   „sp-cards-bild" geben. Das Bild (Feld „Bild", erstes Element der Karte)
   liegt dann randlos oben in der Karte: Es wird über das Karten-Padding
   (26/22 px) hinausgezogen, auf ein festes Verhältnis beschnitten und
   übernimmt die obere Rundung. Karten ohne Bild im selben Grid bleiben
   unverändert; der Link rutscht in allen Karten an die Unterkante. */

/* Bild bzw. sein Wrapper (picture / verlinktes Bild / Card-Media)
   über das Padding hinausziehen */
.sp-cards-bild.sp-cards-bild .el-item > img.el-image,
.sp-cards-bild.sp-cards-bild .el-item > picture,
.sp-cards-bild.sp-cards-bild .el-item > .uk-card-media-top,
.sp-cards-bild.sp-cards-bild .el-item > a:has(> .el-image),
.sp-cards-bild.sp-cards-bild .el-item > a:has(> picture) {
    display: block;
    width: calc(100% + 44px);
    max-width: none;
    margin: -26px -22px 18px;
    flex: none;
}
.sp-cards-bild.sp-cards-bild .el-item > a picture {
    display: block;
    width: 100%;
}

/* Das Bild selbst: volle Breite, festes Verhältnis, obere Rundung
   (16 px Kartenradius minus 1 px Rahmen) */
.sp-cards-bild.sp-cards-bild .el-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 15px 15px 0 0;
}

/* Links unten bündig — auch wenn die Textmengen unterschiedlich sind */
.sp-cards-bild.sp-cards-bild .el-item {
    display: flex;
    flex-direction: column;
}
.sp-cards-bild.sp-cards-bild .el-item > :last-child:is(a, .el-link) {
    margin-top: auto;
    padding-top: 12px;
    align-self: flex-start;
}

/* Hover-Video (YooTheme-Feld „Hover"): YooTheme rendert das Video mit
   uk-transition-fade, setzt aber nirgends den zugehörigen
   uk-transition-toggle — ohne Nachhilfe bliebe es unsichtbar. Die
   Einblendung übernimmt deshalb der Karten-Hover, das Abspielen ein
   kleines Skript (functions.php 6d). Bewusst NICHT auf sp-cards
   beschränkt, damit Hover-Videos überall funktionieren. */
/* Rückweg gemächlicher als Hinweg: Das Ausblenden zum Standbild nutzt
   die Basis-Transition (.6s), das Einblenden die des Hover-Zustands */
.el-hover-image.el-hover-image {
    transition: opacity .6s ease;
}
.el-item:hover .el-hover-image.el-hover-image,
.el-item:focus-within .el-hover-image.el-hover-image,
.uk-card:hover .el-hover-image.el-hover-image {
    opacity: 1;
    transition: opacity .35s ease;
}
/* Der Video-Layer (uk-cover) ist rechteckig — damit er die gerundeten
   oberen Kartenecken nicht überdeckt, wird am Clip-Container gerundet
   und beschnitten */
.sp-cards-bild.sp-cards-bild .el-item > .uk-card-media-top,
.sp-cards-bild.sp-cards-bild .el-item > .uk-card-media-top .uk-inline-clip {
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}


/* =========================================================================
   PRODUKTSEITEN — Bild in den Merkmal-Blöcken ("Was die ProTec anders macht")
   Aktivierung: dem BILD-Element in YooTheme unter Erweitert → Klasse den
   Wert „sp-feature-img" geben.
   Entspricht dem Konzeptentwurf: volle Spaltenbreite, festes Verhältnis
   4:3, formatfüllend beschnitten, 16 px Radius.
   ========================================================================= */

.sp-feature-img.sp-feature-img,
.sp-feature-img.sp-feature-img picture {
    display: block;
    width: 100%;
}

img.sp-feature-img.sp-feature-img,
.sp-feature-img.sp-feature-img img,
.sp-feature-img.sp-feature-img .el-image {
    display: block;
    width: 100%;
    height: auto;
    /* YooTheme schreibt das Seitenverhältnis des Originals als Inline-Style
       ins <img>; nur !important setzt sich dagegen durch */
    aspect-ratio: 4 / 3 !important;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
}


/* =========================================================================
   PRODUKTSEITEN — Icon-Kacheln im Dokumentations-Abschnitt
   Aktivierung: dem BILD-/ICON-Element in YooTheme unter Erweitert → Klasse
   den Wert „sp-doku-icon" geben.
   Entspricht dem Konzeptentwurf: 38 × 38 px Kachel, 11 px Radius, leicht
   aufgehellte Fläche mit feiner Kante, Icon 20 px darin.
   Gedacht für die dunkle Sektion — dort passen die orangen Icon-Varianten
   (Icons/doku-*-orange.svg).
   ========================================================================= */

/* WICHTIG: Am Wrapper wird bewusst NICHTS gesetzt. Die Klasse kann auch
   auf dem gesamten Grid-Item landen — Eigenschaften wie line-height oder
   display würden dann die Texte darin zerstören. Alles Nötige steht am
   Bild selbst. */

/* Fall A — SVG ist als Bild eingebunden: das Bild wird zur Kachel */
img.sp-doku-icon.sp-doku-icon,
.sp-doku-icon.sp-doku-icon > img,
.sp-doku-icon.sp-doku-icon .el-image {
    box-sizing: border-box;
    display: block;
    width: 38px;
    height: 38px;
    padding: 9px;
    margin-bottom: 14px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    object-fit: contain;
    /* schlägt das Inline-Seitenverhältnis, das YooTheme ins <img> schreibt */
    aspect-ratio: 1 / 1 !important;
}

/* Fall B — Icon-Element mit Inline-SVG: nur dann wird der Wrapper selbst
   zur Kachel, wenn er ausschließlich das Icon enthält (kein Text) */
.sp-doku-icon.sp-doku-icon:has(> svg:only-child),
.sp-doku-icon.sp-doku-icon:has(> .uk-icon:only-child) {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    padding: 0;
    margin-bottom: 14px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #ef7d00;
}
.sp-doku-icon.sp-doku-icon > svg:only-child,
.sp-doku-icon.sp-doku-icon > .uk-icon:only-child svg {
    width: 20px;
    height: 20px;
}

/* Auf hellem Grund (falls die Kachel außerhalb der dunklen Sektion steht) */
.uk-section-default .sp-doku-icon.sp-doku-icon > img,
.uk-section-default .sp-doku-icon.sp-doku-icon .el-image,
.uk-section-muted .sp-doku-icon.sp-doku-icon > img,
.uk-section-muted .sp-doku-icon.sp-doku-icon .el-image {
    background: #fff3e6;
    border-color: transparent;
}


/* =========================================================================
   FOTOBLOCK — Text links lesbar, Motiv rechts frei
   Aktivierung: der SEKTION/dem CONTAINER mit dem Hintergrundbild unter
   Erweitert → Klasse den Wert „sp-fotoblock" geben.
   Legt einen gerichteten Verlauf über das Bild: links deckend, zur Mitte
   hin ausdünnend, rechts vollständig transparent. Der Text steht damit auf
   ruhigem Grund, das Motiv bleibt unangetastet sichtbar.
   Zusätzlich im Builder empfohlen: Textfarbe „Hell" und Bildposition rechts.
   ========================================================================= */

/* Das Overlay muss exakt auf dem Element liegen, das das Hintergrundbild
   trägt — sonst ragt es darüber hinaus. YooTheme markiert solche Elemente
   mit uk-background-cover bzw. uk-background-contain. Deshalb wird das
   Ziel automatisch gesucht: entweder ist es das Element mit der Klasse
   selbst, oder ein Nachfahre davon.
   Notnagel, falls YooTheme keine dieser Klassen setzt: dem Element
   zusätzlich „sp-fotoblock--self" geben. */
.sp-fotoblock.uk-background-cover,
.sp-fotoblock.uk-background-contain,
.sp-fotoblock .uk-background-cover,
.sp-fotoblock .uk-background-contain,
.sp-fotoblock.sp-fotoblock--self {
    position: relative;
    isolation: isolate;
}

.sp-fotoblock.uk-background-cover::before,
.sp-fotoblock.uk-background-contain::before,
.sp-fotoblock .uk-background-cover::before,
.sp-fotoblock .uk-background-contain::before,
.sp-fotoblock.sp-fotoblock--self::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;      /* übernimmt die Rundung des Bildelements */
    background:
        linear-gradient(96deg,
            rgba(12, 14, 16, .93) 0%,
            rgba(12, 14, 16, .88) 30%,
            rgba(12, 14, 16, .62) 47%,
            rgba(12, 14, 16, .20) 63%,
            rgba(12, 14, 16, 0)   78%),
        /* zarte Abdunklung nach unten, hält Kontrast bei hellen Motivteilen */
        linear-gradient(180deg, rgba(12, 14, 16, 0) 55%, rgba(12, 14, 16, .28) 100%);
}

/* Inhalte über das Overlay heben */
.sp-fotoblock.uk-background-cover > *,
.sp-fotoblock.uk-background-contain > *,
.sp-fotoblock .uk-background-cover > *,
.sp-fotoblock .uk-background-contain > *,
.sp-fotoblock.sp-fotoblock--self > * {
    position: relative;
    z-index: 1;
}

/* Typografie auf dem Foto — greift auch ohne die YooTheme-Option „Hell" */
.sp-fotoblock.sp-fotoblock h1,
.sp-fotoblock.sp-fotoblock h2,
.sp-fotoblock.sp-fotoblock h3,
.sp-fotoblock.sp-fotoblock h4,
.sp-fotoblock.sp-fotoblock .el-title {
    color: #fff;
}
.sp-fotoblock.sp-fotoblock p,
.sp-fotoblock.sp-fotoblock li,
.sp-fotoblock.sp-fotoblock .el-content,
.sp-fotoblock.sp-fotoblock .uk-panel {
    color: rgba(255, 255, 255, .74);
}
/* Trennlinien innerhalb des Blocks */
.sp-fotoblock.sp-fotoblock .uk-list-divider > :nth-child(n+2),
.sp-fotoblock.sp-fotoblock .uk-grid-divider > :not(.uk-first-column)::before {
    border-color: rgba(255, 255, 255, .16);
    box-shadow: none;
}

/* Icon-Kacheln: im Fotoblock die transparente Variante statt der hellorangen */
.sp-fotoblock.sp-fotoblock .sp-doku-icon.sp-doku-icon > img,
.sp-fotoblock.sp-fotoblock .sp-doku-icon.sp-doku-icon .el-image,
.sp-fotoblock.sp-fotoblock img.sp-doku-icon.sp-doku-icon {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
}

/* Schmale Schirme: Text liegt über dem ganzen Motiv, deshalb flächig decken */
@media (max-width: 959px) {
    .sp-fotoblock.sp-fotoblock::before {
        background: linear-gradient(180deg, rgba(12, 14, 16, .9), rgba(12, 14, 16, .84));
    }
}


/* =========================================================================
   MERKMAL-LISTE in Produktkarten (z. B. ProTec® / ProTec® value)
   Verwendung: <ul class="sp-varlist"> … </ul> direkt im Textblock.
   Orange Punkte statt Standard-Aufzählung, wie im Konzeptentwurf.
   ========================================================================= */

.sp-varlist.sp-varlist {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}
.sp-varlist.sp-varlist > li {
    position: relative;
    margin: 0;
    padding: 5px 0 5px 22px;
    font-size: 15.5px;
    line-height: 1.55;
}
.sp-varlist.sp-varlist > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .85em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef7d00;
}

/* Auf dunklem Grund (Fotoblock, dunkle Sektion) */
.uk-light .sp-varlist.sp-varlist > li,
.sp-fotoblock .sp-varlist.sp-varlist > li {
    color: rgba(255, 255, 255, .78);
}


/* =========================================================================
   VERGLEICHSTABELLE (z. B. ProTec® gegen ProTec® value)
   Verwendung: <div class="sp-vergleich"><table>…</table></div>
   im HTML-Element. Bewusst auf die Klasse begrenzt, damit andere
   Tabellen der Website unberührt bleiben.
   ========================================================================= */

.sp-vergleich.sp-vergleich {
    overflow-x: auto;
    border: 1px solid #e2e8ec;
    border-radius: 16px;
    background: #fff;
}
.sp-vergleich.sp-vergleich table {
    width: 100%;
    min-width: 580px;          /* darunter wird horizontal gescrollt */
    margin: 0;
    border-collapse: collapse;
    background: transparent;
}
.sp-vergleich.sp-vergleich caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.sp-vergleich.sp-vergleich th,
.sp-vergleich.sp-vergleich td {
    padding: 16px 20px;
    text-align: left;
    vertical-align: top;
    font-size: 16px;
    line-height: 1.45;
    color: #14181b;
    border-bottom: 1px solid #e2e8ec;
}
.sp-vergleich.sp-vergleich thead th {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #78838a;
    background: #f4f7f9;
}
.sp-vergleich.sp-vergleich tbody th {
    font-weight: 600;
}
.sp-vergleich.sp-vergleich tbody tr:last-child > * {
    border-bottom: 0;
}

/* „nicht verfügbar" — zurückgenommen statt durchgestrichen */
.sp-vergleich.sp-vergleich .sp-no {
    color: #78838a;
}

/* „enthalten" — mit orangem Haken */
.sp-vergleich.sp-vergleich .sp-tick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.sp-vergleich.sp-vergleich .sp-tick::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-color: #ef7d00;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width: 640px) {
    .sp-vergleich.sp-vergleich th,
    .sp-vergleich.sp-vergleich td {
        padding: 13px 16px;
        font-size: 15px;
    }
}


/* =========================================================================
   EXPANDING PANELS — Bild-Panels, die beim Hover aufklappen
   (z. B. Einsatzorte auf Branchenseiten)
   Verwendung als HTML-Element:
     <div class="sp-panels">
       <a class="sp-panels-item" href="…">
         <img src="…" alt="…">
         <span class="sp-panels-body">
           <em>Kicker</em>
           <b>Titel</b>
           <span class="sp-panels-text">Beschreibung …</span>
         </span>
       </a>
       … (2–4 Panels)
     </div>
   Kicker und Titel sind immer sichtbar; die Beschreibung erscheint,
   wenn das Panel per Hover oder Tastaturfokus aufklappt.
   ========================================================================= */

.sp-panels {
    display: flex;
    gap: 14px;
    height: clamp(420px, 55vh, 560px);
}

.sp-panels-item {
    position: relative;
    flex: 1;
    min-width: 0;
    border-radius: 16px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    background: #14181b;
    transition: flex .7s cubic-bezier(.45, .05, .15, 1);
}
.sp-panels-item:hover,
.sp-panels-item:focus-visible {
    flex: 2.6;
    outline: none;
}
.sp-panels-item:focus-visible {
    box-shadow: 0 0 0 3px #ef7d00;
}

.sp-panels-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.45, .05, .15, 1);
}
.sp-panels-item:hover img,
.sp-panels-item:focus-visible img {
    transform: scale(1.05);
}

/* Lesbarkeits-Verlauf von unten */
.sp-panels-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 42%, rgba(10, 12, 14, .88));
    pointer-events: none;
}

.sp-panels-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    padding: 26px 28px 26px;
    color: #fff;
}
.sp-panels-body em {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ef7d00;
    margin-bottom: 6px;
    white-space: nowrap;
}
.sp-panels-body b {
    display: block;
    font-size: 28px;               /* Ruhe: groß, unten mit lockerem Abstand */
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    transition: font-size .7s cubic-bezier(.45, .05, .15, 1);
}
.sp-panels-item:hover .sp-panels-body b,
.sp-panels-item:focus-visible .sp-panels-body b {
    font-size: 22px;               /* aufgeklappt: kompakter, rückt hoch */
}

/* Beschreibung: blendet beim Aufklappen ein.
   Feste Mindestbreite, damit der Text nicht im schmalen Panel umbricht —
   overflow:hidden des Panels schneidet ihn unsichtbar ab. */
.sp-panels-text {
    display: block;
    min-width: 300px;
    max-width: 420px;
    margin-top: 0;
    max-height: 0;                 /* Ruhe: nimmt keinen Platz ein */
    overflow: hidden;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    opacity: 0;
    transform: translateY(10px);
    transition: max-height .6s cubic-bezier(.45, .05, .15, 1),
                margin-top .6s cubic-bezier(.45, .05, .15, 1),
                opacity .25s ease, transform .25s ease;
}
.sp-panels-item:hover .sp-panels-text,
.sp-panels-item:focus-visible .sp-panels-text {
    max-height: 200px;
    margin-top: 10px;
    opacity: 1;
    transform: translateY(0);
    transition: max-height .7s cubic-bezier(.45, .05, .15, 1),
                margin-top .7s cubic-bezier(.45, .05, .15, 1),
                opacity .5s ease .25s, transform .5s ease .25s;
}

/* Mobil: stapeln, alle Texte sichtbar (Hover existiert auf Touch nicht) */
@media (max-width: 959px) {
    .sp-panels {
        flex-direction: column;
        height: auto;
    }
    .sp-panels-item {
        flex: none;
        min-height: 230px;
    }
    .sp-panels-text {
        opacity: 1;
        transform: none;
        min-width: 0;
        max-width: none;
        max-height: none;
        margin-top: 10px;
    }
    .sp-panels-body b { font-size: 22px; }
}

/* Reduzierte Bewegung: kein Aufklappen, Texte immer sichtbar */
@media (prefers-reduced-motion: reduce) {
    .sp-panels-item,
    .sp-panels-item img,
    .sp-panels-text {
        transition: none;
    }
    .sp-panels-item:hover,
    .sp-panels-item:focus-visible {
        flex: 1;
    }
    .sp-panels-item:hover img,
    .sp-panels-item:focus-visible img {
        transform: none;
    }
    .sp-panels-text {
        opacity: 1;
        transform: none;
        max-height: none;
        margin-top: 10px;
    }
    .sp-panels-body b { font-size: 22px; transition: none; }
}


/* =========================================================================
   EXPANDING PANELS aus dem YooTheme-GRID-ELEMENT
   Aktivierung: dem Grid-Element unter Erweitert → Klasse den Wert
   „sp-panels-grid" geben. Felder je Item: Bild, Meta (Kicker), Titel,
   Inhalt (erscheint beim Aufklappen). Im Builder das Standard-Layout
   wählen (Bild oben, Texte darunter) — die Klasse baut daraus die
   Overlay-Panels; „Overlay"-Layouts bringen eigenes Positions-Markup mit
   und werden hier nicht unterstützt.
   Verhalten identisch zur HTML-Variante „sp-panels".
   ========================================================================= */

/* Grid-Spalten zu wachstumsfähigen Flex-Panels machen */
.sp-panels-grid.sp-panels-grid > .uk-grid {
    display: flex;
    flex-wrap: nowrap;
    height: clamp(420px, 55vh, 560px);
}
.sp-panels-grid.sp-panels-grid > .uk-grid > div {
    width: auto;
    min-width: 0;
    flex: 1;
    display: flex;
    transition: flex .7s cubic-bezier(.45, .05, .15, 1);
}
.sp-panels-grid.sp-panels-grid > .uk-grid > div:hover,
.sp-panels-grid.sp-panels-grid > .uk-grid > div:focus-within {
    flex: 2.6;
}

/* Das Panel selbst — deckt verlinkte Items (a-Wrapper) mit ab */
.sp-panels-grid.sp-panels-grid .el-item {
    position: relative;
    flex: 1;
    min-width: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #14181b;
}
.sp-panels-grid.sp-panels-grid .el-item,
.sp-panels-grid.sp-panels-grid .el-item > a {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
    text-decoration: none;
}
.sp-panels-grid.sp-panels-grid .el-item > a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px #ef7d00;
}

/* Bild: absolut, formatfüllend — Inline-aspect-ratio von YooTheme schlagen */
.sp-panels-grid.sp-panels-grid .el-item picture,
.sp-panels-grid.sp-panels-grid .el-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    aspect-ratio: auto !important;
    border-radius: 0;
    transition: transform .7s cubic-bezier(.45, .05, .15, 1);
    z-index: 0;
}
.sp-panels-grid.sp-panels-grid > .uk-grid > div:hover img,
.sp-panels-grid.sp-panels-grid > .uk-grid > div:focus-within img {
    transform: scale(1.05);
}

/* Lesbarkeits-Verlauf von unten */
.sp-panels-grid.sp-panels-grid .el-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 42%, rgba(10, 12, 14, .88));
    pointer-events: none;
    z-index: 1;
}

/* Texte über Bild und Verlauf heben und unten anordnen */
.sp-panels-grid.sp-panels-grid .el-meta,
.sp-panels-grid.sp-panels-grid .el-title,
.sp-panels-grid.sp-panels-grid .el-content {
    position: relative;
    z-index: 2;
    margin: 0 28px;
}
.sp-panels-grid.sp-panels-grid .el-meta {
    order: 1;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ef7d00;
    margin-bottom: 6px;
    white-space: nowrap;
    transition: font-size .7s cubic-bezier(.45, .05, .15, 1);
}
.sp-panels-grid.sp-panels-grid .el-title {
    order: 2;
    font-size: 28px;               /* Ruhe: groß, unten mit lockerem Abstand */
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 28px;
    white-space: nowrap;
    transition: font-size .7s cubic-bezier(.45, .05, .15, 1), margin-bottom .7s cubic-bezier(.45, .05, .15, 1);
}
.sp-panels-grid.sp-panels-grid > .uk-grid > div:hover .el-title,
.sp-panels-grid.sp-panels-grid > .uk-grid > div:focus-within .el-title {
    font-size: 22px;               /* aufgeklappt: kompakter, rückt hoch */
    margin-bottom: 10px;
}
/* Ist ein Panel aktiv, werden die ANDEREN schmaler — ihre Texte gehen
   mit derselben Kurve mit, damit nichts an die Kanten stößt */
.sp-panels-grid.sp-panels-grid > .uk-grid:hover > div:not(:hover) .el-title,
.sp-panels-grid.sp-panels-grid > .uk-grid:focus-within > div:not(:focus-within) .el-title {
    font-size: 20px;
}
.sp-panels-grid.sp-panels-grid > .uk-grid:hover > div:not(:hover) .el-meta,
.sp-panels-grid.sp-panels-grid > .uk-grid:focus-within > div:not(:focus-within) .el-meta {
    font-size: 11px;
}
.sp-panels-grid.sp-panels-grid .el-content {
    order: 3;
    min-width: 300px;
    max-width: 420px;
    margin-top: 0;
    margin-bottom: 0;
    max-height: 0;                 /* Ruhe: nimmt keinen Platz ein */
    overflow: hidden;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    opacity: 0;
    transform: translateY(10px);
    transition: max-height .6s cubic-bezier(.45, .05, .15, 1),
                margin-bottom .6s cubic-bezier(.45, .05, .15, 1),
                opacity .25s ease, transform .25s ease;
}
/* Die Zielhöhe misst das Skript (functions.php 6e) je Panel exakt und
   legt sie als --sp-panel-max ab. Wichtig fürs Timing: Läge das Ziel
   deutlich über der echten Texthöhe, stoppte die Bewegung mitten im
   schnellsten Teil der Kurve — Meta und Titel ruckten sichtbar. Mit
   exakter Höhe läuft die Easing-Kurve komplett durch. Die 200 px sind
   nur der Rückfall ohne JavaScript. */
.sp-panels-grid.sp-panels-grid > .uk-grid > div:hover .el-content,
.sp-panels-grid.sp-panels-grid > .uk-grid > div:focus-within .el-content {
    max-height: var(--sp-panel-max, 200px);
    margin-bottom: 28px;
    opacity: 1;
    transform: translateY(0);
    transition: max-height .7s cubic-bezier(.45, .05, .15, 1),
                margin-bottom .7s cubic-bezier(.45, .05, .15, 1),
                opacity .5s ease .25s, transform .5s ease .25s;
}

/* Mobil: stapeln, Texte immer sichtbar */
@media (max-width: 959px) {
    .sp-panels-grid.sp-panels-grid > .uk-grid {
        flex-direction: column;
        height: auto;
        gap: 14px;
    }
    .sp-panels-grid.sp-panels-grid > .uk-grid > div {
        flex: none;
        min-height: 230px;
    }
    .sp-panels-grid.sp-panels-grid .el-content {
        opacity: 1;
        transform: none;
        min-width: 0;
        max-width: none;
        max-height: none;
        margin-bottom: 26px;
    }
    .sp-panels-grid.sp-panels-grid .el-title {
        font-size: 22px;
        margin-bottom: 10px;
    }
    /* Gestapelt verengt sich nichts — Verkleinern der inaktiven Panels aus */
    .sp-panels-grid.sp-panels-grid > .uk-grid:hover > div:not(:hover) .el-title,
    .sp-panels-grid.sp-panels-grid > .uk-grid:focus-within > div:not(:focus-within) .el-title {
        font-size: 22px;
    }
    .sp-panels-grid.sp-panels-grid > .uk-grid:hover > div:not(:hover) .el-meta,
    .sp-panels-grid.sp-panels-grid > .uk-grid:focus-within > div:not(:focus-within) .el-meta {
        font-size: 12.5px;
    }
}

/* Reduzierte Bewegung: kein Aufklappen, Texte immer sichtbar */
@media (prefers-reduced-motion: reduce) {
    .sp-panels-grid.sp-panels-grid > .uk-grid > div,
    .sp-panels-grid.sp-panels-grid .el-item img,
    .sp-panels-grid.sp-panels-grid .el-content {
        transition: none;
    }
    .sp-panels-grid.sp-panels-grid > .uk-grid > div:hover,
    .sp-panels-grid.sp-panels-grid > .uk-grid > div:focus-within {
        flex: 1;
    }
    .sp-panels-grid.sp-panels-grid > .uk-grid > div:hover img {
        transform: none;
    }
    .sp-panels-grid.sp-panels-grid .el-content {
        opacity: 1;
        transform: none;
        max-height: none;
        margin-bottom: 28px;
    }
    .sp-panels-grid.sp-panels-grid .el-title {
        font-size: 22px;
        margin-bottom: 10px;
        transition: none;
    }
    /* Ohne Aufklappen verengt sich nichts — Größen bleiben konstant */
    .sp-panels-grid.sp-panels-grid .el-meta {
        transition: none;
    }
    .sp-panels-grid.sp-panels-grid > .uk-grid:hover > div:not(:hover) .el-title,
    .sp-panels-grid.sp-panels-grid > .uk-grid:focus-within > div:not(:focus-within) .el-title {
        font-size: 22px;
    }
    .sp-panels-grid.sp-panels-grid > .uk-grid:hover > div:not(:hover) .el-meta,
    .sp-panels-grid.sp-panels-grid > .uk-grid:focus-within > div:not(:focus-within) .el-meta {
        font-size: 12.5px;
    }
}


/* =========================================================================
   HERO-VIDEO — hochauflösende Videoanimation mit Sofort-Poster
   (Apple-Technik: das Poster steht sofort als Sektionshintergrund, das
   Video lädt parallel und blendet sich erst ein, wenn Frames laufen;
   Auflösungsstufe und Codec wählt das Skript clientseitig.)

   Aktivierung — der SEKTION in YooTheme:
     1. unter Erweitert → Klasse den Wert „sp-herovideo" geben
        (optional zusätzlich „sp-herovideo-scrim" für Text-Abdunklung)
        ODER „sp-loopvideo": identischer Loader samt Poster und allen
        Attributen, aber das Video läuft als ENDLOSSCHLEIFE statt
        einmal bis zum stehenden letzten Frame — für Loop-Material.
        (Das Skript ergänzt sp-herovideo automatisch, alle Regeln
        hier gelten mit; Scrim ist ebenso kombinierbar.)
     2. unter Erweitert → Attribute die Videoquelle hinterlegen —
        WICHTIG: je Attribut eine EIGENE ZEILE, sonst escapt YooTheme
        die Anführungszeichen und beide landen in einem Wert:
          data-video-base="/wp-content/uploads/video/genx8-hero"
          data-formats="h264,hevc"   ← NUR tatsächlich encodierte Formate!
        (Das Skript repariert den Ein-Zeilen-Fall zwar selbstständig,
        verlassen sollte man sich darauf nicht.)
        Optional verzögerter Start: data-video-delay="3" — spielt erst,
        nachdem die Sektion N Sekunden sichtbar war (Countdown pausiert
        beim Wegscrollen/Tab-Wechsel); bis dahin steht das Poster.
     3. als Sektions-Hintergrundbild das POSTER setzen (erster Video-Frame
        als AVIF/WebP, ≤ 150 KB). Es ist sofort sichtbar und bleibt der
        Fallback bei reduzierter Bewegung, Datensparmodus und Ladefehlern.
   Hinweis zur Struktur: YooTheme rendert Klasse & Attribute auf einen
   äußeren Wrapper; die eigentliche uk-section (mit dem Poster als
   Hintergrund) liegt darin. Das Skript fügt das Video deshalb in die
   innere uk-section ein, die Selektoren unten arbeiten mit Nachfahren.

   Das zugehörige Skript steht in functions.php, Abschnitt 7.
   Dateinamens-Konvention und ffmpeg-Rezepte: HERO-VIDEO-Anleitung.md
   (im Ordner „Webdesign Material").
   ========================================================================= */

.sp-herovideo.sp-herovideo {
    position: relative;
    overflow: hidden;
}

/* Das Video liegt vollflächig HINTER dem Sektionsinhalt.
   opacity 0 → das Poster (Sektionshintergrund) zeigt, bis Frames laufen. */
.sp-herovideo .sp-herovideo-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0;
    transition: opacity .9s ease;
}
.sp-herovideo .sp-herovideo-media.is-playing {
    opacity: 1;
}

/* Hochkant-Poster (data-poster-portrait): legt sich sofort über den
   Querformat-Sektionshintergrund, das Video blendet darüber ein.
   DOM-Reihenfolge (Poster vor Video) regelt die Schichtung. */
.sp-herovideo .sp-herovideo-poster {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Sektionsinhalt über das Video heben — YooTheme legt Inhalte in
   .uk-container, der aber NICHT direktes Kind des Klassen-Wrappers ist
   (dazwischen liegt die uk-section). Deshalb Nachfahren-Selektor;
   uk-position-*-Elemente sind ohnehin positioniert. Die uk-section
   selbst bleibt bewusst unpositioniert: ihr Hintergrund (das Poster)
   muss UNTER dem Video liegen. */
.sp-herovideo.sp-herovideo .uk-container {
    position: relative;
    z-index: 1;
}

/* Optionale Abdunklung für Textlesbarkeit (Klasse „sp-herovideo-scrim"):
   gerichteter Verlauf wie beim sp-fotoblock — links deckend fürs Text-
   feld, rechts frei fürs Motiv. Liegt über dem Video (DOM-Reihenfolge:
   ::after rendert nach dem eingefügten <video>), unter dem Inhalt. */
.sp-herovideo.sp-herovideo-scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(96deg,
            rgba(12, 14, 16, .88) 0%,
            rgba(12, 14, 16, .72) 34%,
            rgba(12, 14, 16, .38) 55%,
            rgba(12, 14, 16, 0)   78%),
        linear-gradient(180deg, rgba(12, 14, 16, 0) 60%, rgba(12, 14, 16, .35) 100%);
}
@media (max-width: 959px) {
    .sp-herovideo.sp-herovideo-scrim::after {
        background: linear-gradient(180deg, rgba(12, 14, 16, .82), rgba(12, 14, 16, .6));
    }
}

/* Reduzierte Bewegung: Video gar nicht zeigen. Das Skript lädt es dann
   ohnehin nicht — dies ist der Gürtel zum Hosenträger. */
@media (prefers-reduced-motion: reduce) {
    .sp-herovideo .sp-herovideo-media {
        display: none;
    }
}


/* =========================================================================
   STATEMENT — Text „enthüllt" sich beim Scrollen, WORT für WORT
   (Apple-Muster). Die Wörter stehen stark abgedunkelt und leuchten in
   Leserichtung einzeln auf, während der Absatz durch den Viewport wandert.
   Beim Zurückscrollen dimmen sie in umgekehrter Reihenfolge wieder ab.

   Aktivierung: dem TEXT-Element in YooTheme unter Erweitert → Klasse den
   Wert „sp-statement" geben. (Auf das Text-Element legen, nicht auf die
   Sektion — der Effekt soll nur die Statement-Zeilen erfassen.)

   Technik: Das Skript in functions.php (Abschnitt 8) zerlegt den Text in
   Wort-Spans (.sp-w) und schaltet sie mit dem Scrollfortschritt frei.
   Gedimmt wird über opacity — das funktioniert auf hellen wie dunklen
   Sektionen ohne jede Farb-Konfiguration, und Links/Fußnoten behalten
   ihre eigene Farbe. Ohne JavaScript bleibt der Text unangetastet:
   voll lesbar, nur ohne Effekt.

   Feinjustierung: Rest-Deckkraft über --sp-statement-dim (hier unten),
   Start-/Endpunkt des Effekts über REVEAL_START/REVEAL_END im Skript.
   ========================================================================= */

.sp-statement.sp-statement {
    --sp-statement-dim: .16;       /* Rest-Deckkraft der ungelesenen Wörter */
}
.sp-statement.sp-statement .sp-w {
    opacity: var(--sp-statement-dim);
    transition: opacity .3s ease;
}
.sp-statement.sp-statement .sp-w.on {
    opacity: 1;
}

/* Reduzierte Bewegung: alles sofort sichtbar — das Skript setzt zusätzlich
   alle Wörter auf „on" und koppelt gar nicht erst an den Scroll */
@media (prefers-reduced-motion: reduce) {
    .sp-statement.sp-statement .sp-w {
        opacity: 1;
        transition: none;
    }
}


/* =========================================================================
   BENTO-GRID — „Die Highlights." (Apple-Muster aus dem Story-Konzept)
   GLAS-Kacheln: durchscheinende Flächen mit backdrop-blur über einem
   dezenten GEN-X8-Glühen hinter dem Grid, feine Glaskante mit
   Licht-Highlight. Orangenes Eyebrow oben, große Zahl und Beschreibung
   unten. Die ERSTE Kachel wird zur 2×2-Hero-Kachel, die LETZTE zum
   Banner über die volle Breite (weicht bewusst vom Entwurf ab: dort
   ließ die halbbreite Schlusskachel zwei Zellen leer).

   Aktivierung: dem GRID-Element in YooTheme unter Erweitert → Klasse den
   Wert „sp-bento" geben. Felder je Item: Titel = Zahl/Wert,
   Meta = Eyebrow, Inhalt = Beschreibung. Gedacht für eine dunkle
   Sektion (uk-section-secondary) — die Kacheln bringen ihre dunkle
   Fläche aber selbst mit und funktionieren notfalls überall.

   Technik: Der UIkit-Flex-Grid des Elements wird zu CSS Grid
   umgeschaltet (nur so sind Zeilen-/Spalten-Spans möglich); die
   Spaltenwahl aus dem Builder (1-3@m) wird dabei bewusst überstimmt.
   !important nur dort, wo UIkit-Utilities (uk-margin-top) selbst
   !important setzen.
   ========================================================================= */

/* Flex-Grid → CSS Grid; UIkit-Gutter (neg. Margin + Padding) neutralisieren */
.sp-bento.sp-bento .uk-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(190px, auto);
    gap: 16px;
    margin-left: 0;
    position: relative;            /* Bühne für das Glühen hinter dem Glas */
}
/* GEN-X8-Glühen HINTER den Kacheln: Glas braucht etwas, das es bricht —
   der backdrop-filter der Kacheln blurt genau dieses Licht.
   WICHTIG: Jede Leucht-Ellipse muss INNERHALB der Zeichenfläche
   vollständig auf transparent auslaufen (Zentrum + sichtbarer Radius
   bleiben unter 100 %) — sonst schneidet die Flächenkante das Leuchten
   sichtbar hart ab. */
.sp-bento.sp-bento .uk-grid::before {
    content: "";
    position: absolute;
    inset: -15% -10%;
    pointer-events: none;
    background:
        radial-gradient(32% 28% at 74% 22%, rgba(62, 157, 245, .20), transparent 72%),
        radial-gradient(28% 24% at 20% 76%, rgba(239, 125, 0, .14), transparent 72%),
        radial-gradient(26% 26% at 45% 50%, rgba(62, 157, 245, .08), transparent 72%);
}
.sp-bento.sp-bento .uk-grid > * {
    width: auto;
    min-width: 0;
    padding-left: 0;
    margin-top: 0;
    display: flex;                 /* Kachel füllt die Grid-Zelle          */
    position: relative;            /* über das Glühen heben                */
    z-index: 1;
}

/* Die Kachel: Glas statt matter Fläche — durchscheinender Verlauf,
   Blur auf das dahinterliegende Glühen, feine Kante mit Licht oben */
.sp-bento.sp-bento .el-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(155deg,
        rgba(255, 255, 255, .09) 0%,
        rgba(255, 255, 255, .03) 55%,
        rgba(255, 255, 255, .06) 100%);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 24px;
    padding: 28px 26px;
    overflow: hidden;
    isolation: isolate;            /* erlaubt den Glanz UNTER dem Text     */
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .55),
                inset 0 1px 0 rgba(255, 255, 255, .10);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Glanzlicht oben links — liegt über der Glasfläche, unter dem Text */
.sp-bento.sp-bento .el-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(130% 65% at 12% 0%, rgba(255, 255, 255, .12), transparent 55%);
    opacity: .8;
    transition: opacity .3s ease;
    pointer-events: none;
}
.sp-bento.sp-bento .el-item:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .28);
    box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .65),
                inset 0 1px 0 rgba(255, 255, 255, .16);
}
.sp-bento.sp-bento .el-item:hover::before { opacity: 1; }

/* Eyebrow (Meta) nach OBEN — YooTheme rendert Titel vor Meta, die
   Reihenfolge dreht Flexbox-order. margin-bottom:auto dockt Zahl und
   Text an die Unterkante der Kachel. */
.sp-bento.sp-bento .el-meta {
    order: -1;
    margin: 0 0 auto !important;   /* uk-margin-top setzt selbst !important */
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ef7d00;
}

/* Die große Zahl (Titel) */
.sp-bento.sp-bento .el-title {
    margin: 18px 0 0 !important;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* Beschreibung */
.sp-bento.sp-bento .el-content {
    margin: 8px 0 0 !important;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .55);
    max-width: 32ch;
}

/* Erste Kachel: 2×2-Hero mit größerer Zahl */
.sp-bento.sp-bento .uk-grid > div:first-child {
    grid-column: span 2;
    grid-row: span 2;
}
.sp-bento.sp-bento .uk-grid > div:first-child .el-title {
    font-size: clamp(3.2rem, 7vw, 5.5rem);
}

/* Letzte Kachel: Banner über die volle Breite — der Titel ist hier ein
   Satz (OnE Connected), keine Zahl, deshalb kleiner und mit Zeilenluft */
.sp-bento.sp-bento .uk-grid > div:last-child {
    grid-column: 1 / -1;
}
.sp-bento.sp-bento .uk-grid > div:last-child .el-title {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    letter-spacing: -.02em;
    line-height: 1.3;
    max-width: 26ch;
}

/* Tablet: 2 Spalten — die Hero-Kachel wird zur breiten Einzelzeile */
@media (max-width: 959px) {
    .sp-bento.sp-bento .uk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(160px, auto);
    }
    .sp-bento.sp-bento .uk-grid > div:first-child {
        grid-column: span 2;
        grid-row: auto;
    }
    .sp-bento.sp-bento .uk-grid > div:first-child .el-title {
        font-size: clamp(2.6rem, 10vw, 3.6rem);
    }
    .sp-bento.sp-bento .uk-grid > div:last-child {
        grid-column: span 2;
    }
}

/* Schmale Screens: eine Spalte, kompakteres Padding */
@media (max-width: 480px) {
    .sp-bento.sp-bento .uk-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .sp-bento.sp-bento .uk-grid > div:first-child,
    .sp-bento.sp-bento .uk-grid > div:last-child {
        grid-column: auto;
    }
    .sp-bento.sp-bento .el-item {
        padding: 22px 20px;
        border-radius: 20px;
    }
}

/* Reduzierte Bewegung: kein Hover-Lift */
@media (prefers-reduced-motion: reduce) {
    .sp-bento.sp-bento .el-item {
        transition: none;
    }
    .sp-bento.sp-bento .el-item:hover {
        transform: none;
    }
}


/* =========================================================================
   MEDIACARDS — Highlight-Karten mit Bild/Video (Apple-Muster
   „Get the highlights"): horizontaler Snap-Slider aus großen, runden
   Karten; das Medium füllt die Karte randlos, Headline und Text liegen
   zentriert als Overlay darauf. Videos spielen IN der Karte (stumm,
   geloopt, nur solange sichtbar) — das Bild ist ihr Poster.

   Aktivierung: dem GRID-Element in YooTheme unter Erweitert → Klasse den
   Wert „sp-mediacards" geben. Medien je Item — zwei Wege:
     a) Bild-Feld = Bild ODER direkt ein Video aus der Mediathek
        (einfachster Weg; YooTheme rendert es mit loop + uk-video,
        beides klemmt das Skript ab)
     b) Bild-Feld = Standbild-Poster + Hover-Feld = Video darüber
   Videos spielen EINMAL, sobald ihre Karte mittig steht, und bleiben
   auf dem letzten Frame (Abspiel-Logik: functions.php Abschnitt 16).
   Weitere Felder: Meta = Eyebrow (optional), Titel = Headline,
   Inhalt = Subline
   Video-Empfehlung: H.264 aus unserem Hero-Encoder, 1600er-Stufe genügt.
   Ohne JavaScript oder bei reduzierter Bewegung steht das Standbild.
   ========================================================================= */

/* Grid → horizontaler Snap-Slider (Scrollbar unsichtbar, Touch nativ) */
.sp-mediacards.sp-mediacards .uk-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    margin-left: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
    /* Seitliches Polster = halber Restplatz neben einer Karte: nur so
       können auch die ERSTE und LETZTE Karte mittig einrasten.
       ACHTUNG: nur No-JS-Fallback — die exakten Maße setzt das Skript
       (Abschnitt 16) in Pixeln, weil sich Flex-Prozentbreiten zirkulär
       auf dieses Polster beziehen würden. */
    padding-inline: calc((100% - min(76%, 1040px)) / 2);
}
.sp-mediacards.sp-mediacards .uk-grid::-webkit-scrollbar { display: none; }
.sp-mediacards.sp-mediacards .uk-grid > * {
    flex: 0 0 auto;
    width: min(76%, 1040px);       /* No-JS-Fallback; exakt setzt es das Skript */
    min-width: 0;
    padding-left: 0;
    margin-top: 0;
    scroll-snap-align: center;     /* aktive Karte rastet MITTIG ein */
    display: flex;
}
@media (max-width: 760px) {
    .sp-mediacards.sp-mediacards .uk-grid { padding-inline: 7%; }
    .sp-mediacards.sp-mediacards .uk-grid > * { width: 86%; }
}

/* Die Karte */
.sp-mediacards.sp-mediacards .el-item {
    position: relative;
    flex: 1;
    aspect-ratio: 16 / 10;
    border-radius: 28px;
    overflow: hidden;
    background: #101820;
}
/* Medien füllen die Karte randlos — schlägt YooThemes Inline-Maße.
   .el-image deckt BEIDE Einbau-Wege ab: Bild-Feld mit Bild (img) ODER
   Bild-Feld mit Mediathek-Video (video.el-image, mit uk-video gerendert) */
.sp-mediacards.sp-mediacards .el-item picture,
.sp-mediacards.sp-mediacards .el-item .uk-card-media-top,
.sp-mediacards.sp-mediacards .el-item .uk-inline-clip,
.sp-mediacards.sp-mediacards .el-item .el-image,
.sp-mediacards.sp-mediacards .el-item video.el-hover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    max-width: none;
    margin: 0;
    object-fit: cover;
    aspect-ratio: auto !important;
    border-radius: 0;
}
/* Das „Hover"-Video ist hier ein Dauer-Video: immer sichtbar (unter ihm
   liegt das Standbild als Poster, solange keine Frames laufen) */
.sp-mediacards.sp-mediacards video.el-hover-image { opacity: 1 !important; }

/* Medien dürfen den Zieh-Griff nicht stehlen: ohne das startet der
   Browser beim Schleppen den NATIVEN Bild-Drag (Geisterbild) statt den
   Slider zu bewegen. pointer-events:none reicht die Zeigereingaben an
   die Karte durch; das Skript (16a) fängt zusätzlich dragstart ab. */
.sp-mediacards.sp-mediacards .el-item img,
.sp-mediacards.sp-mediacards .el-item video {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* Lesbarkeits-Verlauf hinter dem Text (oben) */
.sp-mediacards.sp-mediacards .el-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(6, 10, 16, .55), transparent 42%);
    pointer-events: none;
    z-index: 1;
}

/* Text-Overlay: zentriert im oberen Kartenbereich (Apple-Muster) */
.sp-mediacards.sp-mediacards .el-meta {
    position: relative;
    z-index: 2;
    margin: 34px auto 0 !important;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ef7d00;
}
.sp-mediacards.sp-mediacards .el-title {
    position: relative;
    z-index: 2;
    margin: 10px auto 0 !important;
    max-width: 34ch;               /* Satz-Headlines brauchen mehr Laufweite */
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(19px, 2.2vw, 27px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #fff;
    text-wrap: balance;
}
/* Ohne Meta rückt der Titel an die Overlay-Oberkante */
.sp-mediacards.sp-mediacards .el-item > .el-title:first-of-type { margin-top: 34px !important; }
.sp-mediacards.sp-mediacards .el-content {
    position: relative;
    z-index: 2;
    margin: 8px auto 0 !important;
    max-width: 44ch;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .75);
}

/* MOBIL-LAYOUT (05.10.2026): Text ÜBER der Karte statt Overlay, die
   Karte IST das Medium in seinem NATIVEN Seitenverhältnis — Videos
   laufen in voller Breite, nichts wird je beschnitten.
   (Vorher 4:5-Karte mit cover: 16:9-Motive verloren seitlich ~40 %;
   contain + Maske scheiterte an Motiven mit Bildinhalt in der Mitte.)
   WICHTIG: Dieser Block MUSS NACH den Basis-Regeln für Medien-Füllung
   und Text-Overlay stehen — gleiche Spezifität, die spätere Regel
   gewinnt. Stand er davor, blieben die Medien absolut und die Karte
   kollabierte auf Texthöhe (so geschehen in v1.7.93). */
@media (max-width: 760px) {
    .sp-mediacards.sp-mediacards .el-item {
        aspect-ratio: auto;
        border-radius: 0;
        background: transparent;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }
    .sp-mediacards.sp-mediacards .el-item::after { display: none; }  /* kein Lesbarkeits-Verlauf nötig */
    /* Texte aus dem Overlay in den Fluss über die Karte heben —
       order schlägt die DOM-Reihenfolge (Medium steht im Markup vorn) */
    .sp-mediacards.sp-mediacards .el-meta    { order: -3; margin: 0 auto 2px !important; }
    .sp-mediacards.sp-mediacards .el-title   { order: -2; margin: 0 auto 6px !important; }
    .sp-mediacards.sp-mediacards .el-item > .el-title:first-of-type { margin-top: 0 !important; }
    .sp-mediacards.sp-mediacards .el-content { order: -1; margin: 0 auto 16px !important; }
    /* Das Medium als Karte: volle Breite, Höhe aus dem eigenen
       Seitenverhältnis (height:auto statt Zwangsformat) */
    .sp-mediacards.sp-mediacards .el-item picture,
    .sp-mediacards.sp-mediacards .el-item .uk-card-media-top,
    .sp-mediacards.sp-mediacards .el-item .uk-inline-clip,
    .sp-mediacards.sp-mediacards .el-item .el-image,
    .sp-mediacards.sp-mediacards .el-item video.el-hover-image {
        position: relative;
        inset: auto;
        order: 1;
        width: 100%;
        height: auto !important;
        border-radius: 22px;
        background: #07090c;
    }
    /* Verschachtelte Medien (img/video IN picture o. Clip-Wrapper):
       nur die äußere Box trägt Radius und Rundung bleibt erhalten */
    .sp-mediacards.sp-mediacards .el-item picture { overflow: hidden; }
    /* Einbau-Weg b (Poster + Hover-Video): mobil ist das Video die
       Karte, das Poster entfällt — sonst stünden zwei Blöcke */
    .sp-mediacards.sp-mediacards .el-item:has(video.el-hover-image) img.el-image,
    .sp-mediacards.sp-mediacards .el-item:has(video.el-hover-image) picture { display: none; }
}

/* Maus-Bedienung: Ziehen zum Wischen (Skript, Abschnitt 16). Während
   des Ziehens wird das Einrasten ausgesetzt, beim Loslassen schnappt
   die nächstliegende Karte in die Mitte. */
.sp-mediacards.sp-mediacards .uk-grid { cursor: grab; }
.sp-mediacards.sp-mediacards .uk-grid.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
}
/* Nach dem Loslassen: Snap bleibt aus, während das Skript die Zielkarte
   WEICH anfährt — sofortiges Re-Aktivieren ließe Chrome hart springen */
.sp-mediacards.sp-mediacards .uk-grid.is-settling {
    scroll-snap-type: none;
}

/* Punkte-Navigation unter dem Slider (legt das Skript an):
   Klick springt zur Karte, die aktive Karte wird zur orangen Pille */
.sp-mediacards .spm-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}
.sp-mediacards .spm-dot {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(120, 131, 138, .45);
    cursor: pointer;
    transition: background .2s ease, width .2s ease;
}
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .uk-section-primary:not(.uk-preserve-color)) .sp-mediacards .spm-dot {
    background: rgba(255, 255, 255, .3);
}
.sp-mediacards .spm-dot.is-active {
    width: 22px;
    border-radius: 999px;
    background: #ef7d00;
}

@media (prefers-reduced-motion: reduce) {
    /* Videos startet das Skript dann nicht — das Standbild bleibt.
       Punkte und Ziehen funktionieren weiterhin (ohne Smooth-Scroll). */
    .sp-mediacards.sp-mediacards .uk-grid { scroll-snap-type: none; }
    .sp-mediacards .spm-dot { transition: none; }
}


/* =========================================================================
   CAPRACE — „Befüllungs-Wettrennen" (gepinnte Scroll-Szene, Kapazität)
   Zwei gleich große Maschinen befüllen sich beim Scrollen Mopp für Mopp.
   Die 7.7 ist bei 30 voll („Voll"-Tag), die GEN X8 nimmt 7 weitere auf
   (orange), zum Finale erscheint das +23-%-Badge.

   Verwendung als HTML-ELEMENT (Vorlage: sp-caprace-element.html im
   Ordner „Webdesign Material"): den Schnipsel in ein YooTheme-HTML-
   Element einfügen — fertig. Gedacht für eine HELLE Sektion; die
   Stückzahlen steuern data-old / data-new am Wurzelelement.

   Verhalten: Der Wrapper ist 220vh hoch, die Bühne klebt per
   position:sticky einen Viewport lang fest, während das Skript
   (functions.php Abschnitt 9) die Befüllung an den Scrollfortschritt
   koppelt. OHNE JavaScript zeigt die Szene den fertigen Endzustand
   (Zahlen aus dem Markup, Badge sichtbar) — erst das Skript „armiert"
   die Ausgangszustände (Klasse is-armed). Nichts ist je kaputt.
   ========================================================================= */

.sp-caprace {
    position: relative;
    height: 180vh;                 /* Scrollweg der gepinnten Szene        */
}
/* Die Bühne füllt den Viewport, Szene vertikal zentriert — so verteilt
   sich der nötige Scroll-Weg der gepinnten Szene gleichmäßig um die
   Maschinen, statt als Block unter ihnen zu hängen. Bewusst ohne
   eigene Hintergrundfläche (Kundenwunsch) — die Sektion dahinter
   bestimmt den Grund. */
.sp-caprace-pin {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;      /* Wettrennen oben, Balkenvergleich darunter */
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 5vh, 56px) 24px;
    box-sizing: border-box;
}

.sp-caprace .cap-race {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: clamp(18px, 4vw, 56px);
    padding: 0 20px;
}
.sp-caprace .cap-machine {
    margin: 0;
    text-align: center;
}
.sp-caprace .cm-label {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #78838a;
    margin-bottom: 14px;
}
.sp-caprace .cm-label-new { color: #ef7d00; }

/* Maschinenkörper — bewusst gleich groß (Botschaft: gleiche Stellfläche) */
.sp-caprace .cm-body {
    position: relative;
    width: min(30vw, 380px);       /* groß genug, um die Bühne zu füllen */
    aspect-ratio: 1;
    border-radius: 18px;
    background: linear-gradient(165deg, #edf0f3 0%, #cdd5dc 55%, #b2bdc7 100%);
    border: 1px solid #a3afba;
    box-shadow: 0 20px 45px -18px rgba(20, 24, 27, .35), inset 0 1px 0 #fff;
}
.sp-caprace .cm-panel {
    height: 15%;
    border-bottom: 2px solid #a3afba;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, #f6f9fb, #e0e6eb);
    display: flex;
    align-items: center;
    padding: 0 10%;
}
.sp-caprace .cm-panel span {
    width: 24%;
    height: 38%;
    border-radius: 4px;
    background: #0b2a49;
    box-shadow: inset 0 0 6px rgba(62, 157, 245, .8);
}
.sp-caprace .cm-drum {
    position: absolute;
    left: 50%;
    top: 57%;
    transform: translate(-50%, -50%);
    width: 74%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #2e3a48 0%, #101a26 70%);
    border: clamp(7px, 1.1vw, 11px) solid #ef7d00;
    box-shadow: 0 6px 18px rgba(20, 24, 27, .3), inset 0 4px 14px rgba(0, 0, 0, .55);
}
/* 7.7: kleinere Türöffnung (Design-Story: die GEN X8 hat die größere Tür) —
   die Mopp-Punkte bleiben absolut gleich groß */
.sp-caprace .cm-drum-old { width: 62%; }
.sp-caprace .cm-drum-old .cm-dot { width: 13.1%; }

/* Mopp-Punkte (legt das Skript an) */
.sp-caprace .cm-dot {
    position: absolute;
    width: 11%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #e8edf2;
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .3);
    transform: translate(-50%, -50%) scale(0);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.sp-caprace .cm-dot.in { transform: translate(-50%, -50%) scale(1); }
.sp-caprace .cm-dot.extra {
    background: linear-gradient(140deg, #ff9b3e, #ef7d00);
    box-shadow: 0 0 14px rgba(239, 125, 0, .65);
}

/* „Voll"-Tag der 7.7 */
.sp-caprace .cm-full {
    position: absolute;
    right: 5%;
    top: 19%;
    background: #14181b;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

/* Zählerzeile */
.sp-caprace .cap-machine figcaption {
    margin-top: 14px;
    font-size: 14.5px;
    color: #78838a;
}
.sp-caprace .cap-machine figcaption b {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: #14181b;
    font-variant-numeric: tabular-nums;
}
.sp-caprace .cap-machine-new figcaption b { color: #ef7d00; }

/* Finale-Badge */
.sp-caprace .cap-badge {
    text-align: center;
    transition: opacity .45s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.sp-caprace .cb-v {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    letter-spacing: -.03em;
    color: #ef7d00;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.sp-caprace .cb-l {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #14181b;
    margin-top: 8px;
    line-height: 1.4;
}
.sp-caprace .race-note {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 12.5px;
    color: #78838a;
    margin: 26px 0 0;
}

/* Ausgangszustände NUR mit JavaScript (is-armed) — ohne Skript zeigt die
   Szene den fertigen Endzustand aus dem Markup */
.sp-caprace.is-armed .cap-badge { opacity: 0; transform: scale(.7); }
.sp-caprace.is-armed .cap-badge.show { opacity: 1; transform: scale(1); }
.sp-caprace.is-armed .cm-full { opacity: 0; transform: scale(.8); }
.sp-caprace.is-armed .cm-full.show { opacity: 1; transform: scale(1); }

@media (max-width: 720px) {
    .sp-caprace .cap-race { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .sp-caprace .cm-body { width: min(42vw, 220px); margin: 0 auto; }
    .sp-caprace .cap-badge { order: 5; grid-column: 1 / -1; margin-top: 10px; }
    .sp-caprace .race-note { order: 6; }
}

/* Reduzierte Bewegung: keine gepinnte Szene, statischer Endzustand */
@media (prefers-reduced-motion: reduce) {
    .sp-caprace { height: auto; }
    .sp-caprace-pin { position: static; min-height: 0; padding: 40px 24px; }
    .sp-caprace .cm-dot,
    .sp-caprace .cap-badge,
    .sp-caprace .cm-full { transition: none; }
}


/* =========================================================================
   CAPBARS — Balkenvergleich zur Kapazität
   Gehört in die Wettrennen-Bühne (Vorlage sp-caprace-element.html):
   Dort bleibt der Block zusammengeklappt, bis das Rennen sein Finale
   meldet (Klasse is-done aus functions.php Abschnitt 9) — dann klappt
   er in den Scroll-Leerraum unter den Maschinen auf und die Balken
   wachsen gestaffelt (functions.php Abschnitt 10).
   Funktioniert auch STANDALONE in jeder Sektion — hell wie dunkel:
   Auf dunklen Sektionen (uk-light von YooTheme) invertieren die
   Text- und Balkentöne über die Custom Properties automatisch.
   Ohne JavaScript zeigen die Inline-Endwerte im Markup den fertigen
   Zustand — nichts ist je unsichtbar.
   ========================================================================= */

.sp-capbars {
    --cb-text:      #232d31;                 /* Zeilen-Label */
    --cb-nebentext: #78838a;                 /* Legende, Zahlen am Balken */
    --cb-alt:       #c9d3db;                 /* Balken/Punkt „bisher" */
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}
/* Dunkle Kontexte: uk-light setzt YooTheme nur bei explizit heller
   Textfarbe — bei den dunklen Sektionstypen (secondary/primary)
   kompiliert es die Inverse-Farben direkt ins Theme-CSS OHNE die
   Klasse (auf Staging verifiziert 14.09.2026). Deshalb hängen die
   Invertierungs-Töne an beiden Haken. */
.uk-light .sp-capbars,
.uk-section-secondary .sp-capbars,
.uk-section-primary .sp-capbars {
    --cb-text:      rgba(255, 255, 255, .92);
    --cb-nebentext: rgba(255, 255, 255, .6);
    --cb-alt:       rgba(255, 255, 255, .28);
}
.cbar-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cb-nebentext);
}
.cbar-legend span { display: inline-flex; align-items: center; gap: 8px; }
.cbar-legend span::before { content: ""; width: 13px; height: 13px; border-radius: 4px; }
.cbar-lg-old::before { background: var(--cb-alt); }
.cbar-lg-new::before { background: linear-gradient(100deg, #ef7d00 30%, #e35b00 100%); }

.cbar-row {
    display: grid;
    /* Delta-Spalte fix (nicht auto), damit die Balken-Spur in allen
       Zeilen gleich breit bleibt und die Balkenlängen vergleichbar
       sind. 68px fasst auch "+23,5 %" einzeilig (29.09.2026 — vorher
       48px, da brach das Prozentzeichen um). */
    grid-template-columns: 170px minmax(0, 1fr) 68px;
    gap: 14px;
    align-items: center;
}
.cbar-row + .cbar-row { margin-top: 16px; }
.cbar-label { font-size: 14px; font-weight: 500; color: var(--cb-text); text-align: left; }
.cbar-bars { display: grid; gap: 6px; }
.cbar-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cbar-bar i {
    display: block;
    height: 13px;
    border-radius: 999px;
    width: calc(var(--w, 100) * 1%);
    transition: width 1.1s cubic-bezier(.22, .8, .3, 1);
}
.cbar-old i { background: var(--cb-alt); }
.cbar-new i { background: linear-gradient(100deg, #ef7d00 30%, #e35b00 100%); }
.cbar-bar b {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--cb-nebentext);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.cbar-new b { color: #ef7d00; }
.cbar-plus {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: #ef7d00;
    text-align: right;
    white-space: nowrap; /* nie "+23,5" / "%" auf zwei Zeilen */
    font-variant-numeric: tabular-nums;
    transition: opacity .4s ease .6s, transform .4s ease .6s;
}
/* Armiert (nur mit JS): Plus-Werte erscheinen erst mit ihrer Zeile */
.sp-capbars.is-armed .cbar-plus { opacity: 0; transform: translateX(-6px); }
.sp-capbars.is-armed .cbar-row.in .cbar-plus { opacity: 1; transform: none; }

/* Eingebettet in die Wettrennen-Bühne: zusammengeklappt bis zum Finale,
   dann klappt der Block in den Leerraum unter den Maschinen auf */
.sp-caprace .sp-capbars { margin-top: 36px; }
.sp-caprace.is-armed .sp-capbars {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height .7s cubic-bezier(.22, .8, .3, 1),
                opacity .5s ease .15s,
                margin-top .7s cubic-bezier(.22, .8, .3, 1);
}
.sp-caprace.is-armed.is-done .sp-capbars {
    max-height: 560px;
    opacity: 1;
    margin-top: 36px;
}

@media (max-width: 680px) {
    .cbar-row { grid-template-columns: minmax(0, 1fr) 64px; }
    .cbar-label { grid-column: 1 / -1; margin-bottom: -6px; }
}
@media (prefers-reduced-motion: reduce) {
    .cbar-bar i,
    .cbar-plus,
    .sp-caprace.is-armed .sp-capbars { transition: none; }
}


/* =========================================================================
   ICON-KACHEL — Icons in der abgerundeten Box (aus den GEN-X8-Konzepten)
   42-px-Kachel, 12 px Radius, Icon 22 px darin.
   Helle Sektionen: zartorange Fläche (#fff3e6) → dazu die
   -orange-Icon-Varianten. Dunkle Sektionen: aufgehellte Glasfläche mit
   feiner Kante → dazu die -orange- oder -weiss-Varianten.

   Aktivierung — zwei gleichwertige Wege:
   a) dem BILD-/ICON-Element unter Erweitert → Klasse den Wert
      „sp-icon-kachel" geben (einzelne Kachel), ODER
   b) dem ganzen GRID-Element — dann werden ALLE Bild-Felder der Items
      zu Kacheln (eine Klasse statt vieler; nur sinnvoll, wenn die Items
      ausschließlich Icons als Bilder tragen).
   Icons aus dem Ordner icons/ verwenden (24er-viewBox).
   Zentrierung folgt uk-text-center — egal, ob die Ausrichtung über, auf
   oder unter dem Element mit der Klasse sitzt.
   Verwandt: sp-doku-icon (38 px, für den Dokumentations-Abschnitt) —
   diese Kachel hier ist die größere Allzweck-Variante der Konzepte.
   ========================================================================= */

/* Fall A — SVG ist als Bild eingebunden: das Bild selbst wird zur Kachel.
   42 px minus 2 × 10 px Innenabstand = 22 px sichtbares Icon. */
img.sp-icon-kachel.sp-icon-kachel,
.sp-icon-kachel.sp-icon-kachel > img,
.sp-icon-kachel.sp-icon-kachel .el-image {
    box-sizing: border-box;
    display: block;
    width: 42px;
    height: 42px;
    padding: 10px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: #fff3e6;
    object-fit: contain;
    /* schlägt das Inline-Seitenverhältnis, das YooTheme ins <img> schreibt */
    aspect-ratio: 1 / 1 !important;
}

/* Fall B — Icon-Element mit Inline-SVG: der Wrapper wird zur Kachel,
   aber nur, wenn er ausschließlich das Icon enthält (kein Text).
   currentColor-Icons erben hier Orange. */
.sp-icon-kachel.sp-icon-kachel:has(> svg:only-child),
.sp-icon-kachel.sp-icon-kachel:has(> .uk-icon:only-child) {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 42px;
    height: 42px;
    padding: 0;
    margin-bottom: 14px;
    border-radius: 12px;
    background: #fff3e6;
    color: #ef7d00;
}
.sp-icon-kachel.sp-icon-kachel > svg:only-child,
.sp-icon-kachel.sp-icon-kachel > .uk-icon:only-child svg {
    width: 22px;
    height: 22px;
}

/* Dunkle Kontexte: YooTheme setzt auf uk-section-secondary/-primary
   KEINE .uk-light-Klasse — deshalb alle Kontexte explizit
   (gleiche Lektion wie beim sp-statement) */
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .uk-section-primary:not(.uk-preserve-color), .sp-fotoblock) img.sp-icon-kachel.sp-icon-kachel,
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .uk-section-primary:not(.uk-preserve-color), .sp-fotoblock) .sp-icon-kachel.sp-icon-kachel > img,
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .uk-section-primary:not(.uk-preserve-color), .sp-fotoblock) .sp-icon-kachel.sp-icon-kachel .el-image {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
}
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .uk-section-primary:not(.uk-preserve-color), .sp-fotoblock) .sp-icon-kachel.sp-icon-kachel:has(> svg:only-child),
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .uk-section-primary:not(.uk-preserve-color), .sp-fotoblock) .sp-icon-kachel.sp-icon-kachel:has(> .uk-icon:only-child) {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
}

/* In zentrierten Layouts zentriert sich die Kachel mit — ein Block-
   Element mit fester Breite reagiert sonst nicht auf text-align.
   uk-text-center kann dabei ÜBER der Klasse liegen (Sektion/Spalte),
   AUF demselben Element (Klasse am Grid, Ausrichtung im Builder) oder
   DARUNTER (Ausrichtung am einzelnen Item). */
.uk-text-center img.sp-icon-kachel.sp-icon-kachel,
.uk-text-center .sp-icon-kachel.sp-icon-kachel img,
.uk-text-center .sp-icon-kachel.sp-icon-kachel .el-image,
.sp-icon-kachel.sp-icon-kachel.uk-text-center img,
.sp-icon-kachel.sp-icon-kachel.uk-text-center .el-image,
.sp-icon-kachel.sp-icon-kachel .uk-text-center img,
.sp-icon-kachel.sp-icon-kachel .uk-text-center .el-image,
.uk-text-center .sp-icon-kachel.sp-icon-kachel:has(> svg:only-child),
.uk-text-center .sp-icon-kachel.sp-icon-kachel:has(> .uk-icon:only-child) {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================================
   DISPLAY-SIMULATOR — das interaktive 4,3"-Touchdisplay (GEN-X8-Konzept)
   Besucher tippen sich durch das Original-Bedienkonzept: Programm wählen,
   Details lesen, starten — Programmlauf mit Fortschrittskreis im
   Zeitraffer; Sprachwechsel DE/EN über die Flagge oben rechts.

   Seit 29.09.2026 (v1.7.83): Programme liegen als horizontales
   Wisch-Karussell nebeneinander (Scroll-Snap; Maus zieht per Drag,
   Abschnitt 11), jede Kachel trägt ihr echtes Touchscreen-Symbol
   (Dateien img/ui-*.png im Childtheme — beim Upload mitnehmen!) mit
   eingebauter Temperaturangabe, und auf dem Screen pulsiert ein
   oranger Touchpoint als Einladung, der bei der ersten Berührung
   verschwindet (Klasse is-beruehrt am Wurzelelement, via JS).

   Verwendung als HTML-ELEMENT (Vorlage: sp-display-element.html im
   Ordner „Webdesign Material"): Schnipsel in ein YooTheme-HTML-Element
   einfügen — fertig. Funktioniert auf hellen und dunklen Sektionen
   (das Gerät bringt seine dunkle Fläche selbst mit); mehrere Instanzen
   pro Seite sind möglich. Startsprache: data-lang="de" oder "en".

   Programme und Übersetzungen werden zentral im Skript gepflegt
   (functions.php Abschnitt 11, Block I18N/PROGRAMS).
   Ohne JavaScript zeigt die Vorlage den Startbildschirm mit statischen
   Programmkacheln — sichtbar, nur nicht klickbar.
   ========================================================================= */

.sp-display {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* Geräterahmen */
.sp-display .spd-device {
    background: #0a0f16;
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 40px 90px -30px rgba(20, 24, 27, .55), inset 0 0 0 2px #1b2634;
}
.sp-display .spd-screen-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: radial-gradient(120% 160% at 50% 120%, #123a63 0%, #071a2e 55%, #04101e 100%);
}

/* Screens (Home / Detail / Laufend) */
.sp-display .spd-screen {
    position: absolute;
    inset: 0;
    padding: 14px 16px;
    display: none;
    flex-direction: column;
    color: #e7f0f9;
}
.sp-display .spd-screen.is-active { display: flex; }
.sp-display .spd-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    min-height: 30px;
}
/* Logo oben links: echtes Schneidereit-Logo als Bild
   (Datei: img/sp-logo-2025-w.png im Childtheme, 190×96 = @2x für 22 px) */
.sp-display img.spd-logo {
    display: block;
    height: 22px;
    width: auto;
}
/* Text-Fallback aus älteren Vorlagen bleibt gestylt */
.sp-display span.spd-logo {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 13px;
    color: #fff;
}
.sp-display span.spd-logo i { font-weight: 400; color: rgba(255, 255, 255, .55); font-size: 10px; }

/* Alle Bedien-Buttons: UIkit-/Theme-Resets neutralisieren */
.sp-display button {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    line-height: 1.2;
}

.sp-display .spd-lang {
    margin-left: auto;
    display: flex;
    align-items: center;
    font-size: 11px;            /* greift nur für den Text-Fallback DE/EN */
    font-weight: 600;
    letter-spacing: .06em;
    color: #fff;
    background: #132b47;
    border: 1px solid rgba(143, 203, 255, .25);
    border-radius: 6px;
    padding: 5px 7px;
}
.sp-display .spd-lang:hover { border-color: #8fcbff; }
/* Flagge der aktiven Sprache (SVG kommt aus Abschnitt 11 bzw. Vorlage) */
.sp-display .spd-lang svg {
    display: block;
    width: 24px;
    height: 15px;
    border-radius: 3px;
}

/* Programmkacheln: horizontales Wisch-Karussell (29.09.2026, vorher
   3×2-Raster). Touch/Trackpad scrollt nativ, die Maus zieht per Drag
   (Abschnitt 11); Scroll-Snap rastet die Kacheln ein. Die schmale
   Kachelbreite zeigt bewusst 2–3 Kacheln angeschnitten — sichtbare
   Einladung, dass rechts mehr kommt.
   Layout seit 30.09.2026 (v1.7.86): Kacheln als umrahmte Glasflächen
   mit natürlicher Höhe (vertikal zentriert, nicht mehr volle Screen-
   Höhe); innen Zeit oben → Piktogramm auf vollflächig weißem Feld →
   Programmname unten. Dazu eine sichtbare schlanke Scrollbar. */
.sp-display .spd-grid {
    display: flex;
    align-items: center;                /* Kacheln mittig, nicht gestreckt */
    gap: 10px;
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    padding: 2px 2px 8px;               /* unten Platz für die Scrollbar */
    scrollbar-width: thin;              /* Firefox: schlanke Scrollbar */
    scrollbar-color: rgba(239, 125, 0, .75) rgba(255, 255, 255, .08);
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
}
.sp-display .spd-grid::-webkit-scrollbar { height: 5px; }
.sp-display .spd-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
}
.sp-display .spd-grid::-webkit-scrollbar-thumb {
    background: rgba(239, 125, 0, .75);
    border-radius: 999px;
}
.sp-display .spd-grid::-webkit-scrollbar-thumb:hover { background: #ef7d00; }
/* Während des Maus-Ziehens: Snap kurz aus, sonst ruckelt das Ziehen */
.sp-display .spd-grid.is-zieht { cursor: grabbing; scroll-snap-type: none; }
.sp-display .spd-tile {
    flex: 0 0 38%;
    scroll-snap-align: start;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);            /* leicht glasig */
    border: 1px solid rgba(255, 255, 255, .22);      /* Rahmen */
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: #e7f0f9;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.sp-display .spd-tile:hover {
    transform: scale(1.04);
    border-color: rgba(255, 255, 255, .45);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.sp-display .spd-tile:active { transform: scale(.97); }
/* Mittelfeld: vollflächig weiße Fläche fürs Piktogramm
   (Temperatur steckt im Symbol selbst) */
.sp-display .spd-piconbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #fff;
    border-radius: 9px;
    padding: 7px 0;
}
.sp-display .spd-picon {
    display: block;
    width: 58%;
    max-width: 92px;
    height: auto;
    pointer-events: none;               /* Klick/Drag gehört dem Button */
    -webkit-user-drag: none;
}
.sp-display .spd-temp { font-size: 19px; font-weight: 800; color: #ef7d00; }
.sp-display .spd-pname { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; }
.sp-display .spd-ptime { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .75); font-variant-numeric: tabular-nums; }

/* Pulsierender Touchpoint: liegt über dem Startscreen und lädt zum
   Antippen ein; JS blendet ihn bei der ersten Berührung/Wischgeste
   über die Klasse is-beruehrt am Wurzelelement aus. */
.sp-display .spd-touchpoint {
    position: absolute;
    z-index: 5;
    left: 60%;
    top: 58%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 22%, rgba(239, 125, 0, .9) 55%, rgba(239, 125, 0, 0) 74%);
    pointer-events: none;
    opacity: .95;
    transition: opacity .45s ease;
}
.sp-display .spd-touchpoint::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(239, 125, 0, .85);
    animation: spd-touchpuls 1.7s ease-out infinite;
}
@keyframes spd-touchpuls {
    0%       { transform: scale(.55); opacity: .9; }
    70%, 100% { transform: scale(1.7); opacity: 0; }
}
.sp-display.is-beruehrt .spd-touchpoint { opacity: 0; }

/* Detail-Screen */
.sp-display .spd-back {
    background: none;
    color: #fff;
    font-size: 17px;
    padding: 2px 8px;
    border-radius: 6px;
}
.sp-display .spd-back:hover { background: #132b47; }
.sp-display .spd-name { font-weight: 700; font-size: 15px; }
.sp-display .spd-desc { font-size: 12.5px; color: rgba(255, 255, 255, .6); margin: 4px 2px; flex: 1; }
.sp-display .spd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-display .spd-time { font-size: 13.5px; color: #fff; font-variant-numeric: tabular-nums; }
.sp-display .spd-time::before { content: "\1F551\00A0"; font-size: 12px; }
.sp-display .spd-select {
    background: #43b02a;
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 24px;
}
.sp-display .spd-select:hover { background: #4cc431; }

/* Laufender-Programm-Screen */
.sp-display .spd-runbody { flex: 1; display: flex; align-items: center; gap: 18px; padding: 0 6px; }
.sp-display .spd-circle { width: min(120px, 32%); flex-shrink: 0; }
.sp-display .spd-track { fill: none; stroke: #132b47; stroke-width: 7; }
.sp-display .spd-fill {
    fill: none;
    stroke: #8cd44b;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 263.9;               /* 2 × Pi × r(42) */
    stroke-dashoffset: 0;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset .5s linear;
    filter: drop-shadow(0 0 6px rgba(140, 212, 75, .6));
}
.sp-display .spd-runinfo { display: flex; flex-direction: column; }
.sp-display .spd-runlabel { font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.sp-display .spd-runtime {
    font-weight: 600;
    font-size: 27px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.sp-display .spd-stop {
    margin-left: auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #e8544f;
    position: relative;
}
.sp-display .spd-stop::after { content: ""; position: absolute; inset: 14px; background: #fff; border-radius: 3px; }
.sp-display .spd-stop:hover { background: #f06661; }

/* Hinweiszeile unter dem Gerät */
.sp-display .spd-hint {
    text-align: center;
    font-size: 15px;
    color: #78838a;
    margin: 14px 0 0;
}
.sp-display .spd-hint strong { color: #14181b; }
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .uk-section-primary:not(.uk-preserve-color)) .sp-display .spd-hint { color: rgba(255, 255, 255, .55); }
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .uk-section-primary:not(.uk-preserve-color)) .sp-display .spd-hint strong { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .sp-display .spd-tile,
    .sp-display .spd-fill { transition: none; }
    .sp-display .spd-grid { scroll-behavior: auto; }
    .sp-display .spd-touchpoint::before { animation: none; }
}


/* =========================================================================
   SEQSCROLL — scrollgesteuerte Bildsequenz (Apple-Technik, z. B. Turmbau)
   Eine vorgerenderte Frame-Sequenz (Blender → WebP) wird beim Scrollen
   Bild für Bild „gescrubbt": fotorealistische Qualität ohne GPU-Last.

   Verwendung als HTML-ELEMENT (Vorlage: sp-seqscroll-element.html im
   Ordner „Webdesign Material"). Attribute am Wurzelelement:
     data-seq-base="/wp-content/uploads/seq/turmbau-1440-"   (Prefix!)
     data-seq-base-small="…/turmbau-720-"   (optional, Viewports < 960 px)
     data-seq-frames="100"                  (Anzahl Frames)
     data-seq-ext="webp"                    (optional, Standard webp)
     data-seq-digits="4"                    (optional, 0001…)
   Dateinamen ergeben sich als {base}{0001..NNNN}.{ext}.

   Fallback-Logik: Das <img class="sps-fallback"> in der Vorlage (letzter
   Frame als Poster) steht ohne JavaScript, bei prefers-reduced-motion
   und solange/falls keine Frames geladen sind. Erst wenn der erste
   Frame gezeichnet ist, übernimmt das Canvas (Klasse is-armed).
   Render-Briefing und Frame-Erzeugung: TURMBAU-SEQUENZ-Anleitung.md.
   ========================================================================= */

.sp-seqscroll {
    position: relative;
    height: 220vh;                 /* Scrollweg; bei Bedarf per Inline-Style anpassen */
}
.sp-seqscroll-pin {
    position: sticky;
    top: clamp(64px, 10vh, 140px);
    display: flex;
    justify-content: center;
}
.sp-seqscroll .sps-stage {
    position: relative;
    width: min(92vw, 560px);
}
.sp-seqscroll .sps-stage canvas,
.sp-seqscroll .sps-fallback {
    display: block;
    width: 100%;
    height: auto;
}
.sp-seqscroll.is-armed .sps-fallback { display: none; }

/* Reduzierte Bewegung: kein Pin, kein Scrubbing — das Poster (letzter
   Frame = fertiger Turm) steht statisch. Das Skript startet dann nicht. */
@media (prefers-reduced-motion: reduce) {
    .sp-seqscroll { height: auto; }
    .sp-seqscroll-pin { position: static; padding: 40px 0; }
    .sp-seqscroll .sps-stage canvas { display: none; }
    .sp-seqscroll.is-armed .sps-fallback { display: block; }
}


/* =========================================================================
   DASH — OnE-Connected-Dashboard-Simulation (GEN-X8-Konzept)
   Dunkle Glas-Karte mit Maschinen-Kacheln, deren Status „live" wechseln
   (Läuft/Bereit/Filter prüfen), KPIs und Wochen-Balkenchart.

   Verwendung als HTML-ELEMENT (Vorlage: sp-dash-element.html im Ordner
   „Webdesign Material"). Die MASCHINENLISTE lebt im Markup — Namen,
   Anzahl und Startzustände (data-state="run|idle|warn") direkt im
   Schnipsel pflegen; das Skript (functions.php Abschnitt 13) animiert
   sie und hält die KPIs konsistent. Ohne JavaScript steht das statische
   Dashboard aus dem Markup. Gedacht für dunkle Sektionen — die Karte
   bringt ihre dunkle Fläche aber selbst mit.
   ========================================================================= */

.sp-dash {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(160deg, #13202e 0%, #0d1622 100%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    padding: 24px 26px;
    color: #e7f0f9;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.sp-dash .spdash-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.sp-dash .spdash-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}
.sp-dash .spdash-title i { font-style: normal; font-weight: 400; font-size: 14px; color: rgba(255, 255, 255, .5); }
.sp-dash .spdash-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3fbf7f;
}
.sp-dash .spdash-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3fbf7f;
    animation: sp-dash-pulse 1.8s ease-out infinite;
}
@keyframes sp-dash-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(63, 191, 127, .6); }
    70%  { box-shadow: 0 0 0 9px rgba(63, 191, 127, 0); }
    100% { box-shadow: 0 0 0 0 rgba(63, 191, 127, 0); }
}

.sp-dash .spdash-body {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 22px;
}
@media (max-width: 760px) {
    .sp-dash .spdash-body { grid-template-columns: minmax(0, 1fr); }
}

/* Maschinen-Kacheln */
.sp-dash .spdash-machines {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (max-width: 480px) {
    .sp-dash .spdash-machines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sp-dash .spdash-m {
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(8, 13, 20, .55);
    border: 1px solid rgba(255, 255, 255, .10);
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: border-color .4s ease;
}
.sp-dash .spdash-mname { font-size: 11px; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.sp-dash .spdash-mstate {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
}
.sp-dash .spdash-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sp-dash .spdash-m[data-state="run"]  .spdash-dot { background: #3fbf7f; box-shadow: 0 0 8px rgba(63, 191, 127, .7); }
.sp-dash .spdash-m[data-state="idle"] .spdash-dot { background: #3e9df5; }
.sp-dash .spdash-m[data-state="warn"] .spdash-dot { background: #f5b31f; box-shadow: 0 0 8px rgba(245, 179, 31, .7); }
.sp-dash .spdash-m[data-state="warn"] { border-color: rgba(245, 179, 31, .45); }

/* KPIs + Wochen-Chart */
.sp-dash .spdash-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
}
.sp-dash .spdash-kpi { display: flex; flex-direction: column; gap: 2px; }
.sp-dash .spdash-kv {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -.01em;
    color: #8fcbff;
    font-variant-numeric: tabular-nums;
}
.sp-dash .spdash-kl { font-size: 11.5px; color: rgba(255, 255, 255, .5); line-height: 1.35; }
.sp-dash .spdash-chart {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 74px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 12px;
    margin-top: 4px;
}
.sp-dash .spdash-chart i {
    flex: 1;
    height: var(--h, 40%);
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, #3e9df5, rgba(62, 157, 245, .2));
}
.sp-dash .spdash-chart i:nth-child(6) { background: linear-gradient(180deg, #ef7d00, rgba(239, 125, 0, .25)); }
.sp-dash .spdash-foot { margin: 14px 0 0; font-size: 11.5px; color: rgba(255, 255, 255, .45); }

@media (prefers-reduced-motion: reduce) {
    .sp-dash .spdash-pulse { animation: none; }
    .sp-dash .spdash-m { transition: none; }
}


/* =========================================================================
   RECHNER — Ersparnis-Rechner (GEN-X8-Konzept)
   „Was bedeutet das für Ihren Betrieb?": Waschgut, Stückzahl pro Tag und
   Waschtage einstellen → eingesparte Waschgänge pro Woche und Jahr.

   Verwendung als HTML-ELEMENT (Vorlage: sp-rechner-element.html im
   Ordner „Webdesign Material"). Die Beladungswerte stehen als
   value="alt|neu" an den Waschgut-Optionen — direkt im Markup pflegbar.
   Die Karte ist selbstständig weiß und funktioniert auf jeder Sektion.
   Ohne JavaScript zeigt das Markup ein statisches Beispielergebnis;
   Rechenlogik: functions.php Abschnitt 14.
   Hinweis: Ergebnislogik bei Gelegenheit mit dem LCC-Tool des Kunden
   abgleichen (siehe Marketing-Briefing) — bis dahin Modellrechnung.
   ========================================================================= */

.sp-rechner {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border: 1px solid #e2e8ec;
    border-radius: 24px;
    padding: 34px 36px;
    color: #232d31;
    box-shadow: 0 30px 70px -40px rgba(20, 24, 27, .35);
}
.sp-rechner .spc-head h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #14181b;
    margin: 0 0 2px;
}
.sp-rechner .spc-head p { color: #78838a; font-size: 15px; margin: 0; }

.sp-rechner .spc-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 20px 0 8px;
}
@media (max-width: 760px) {
    .sp-rechner .spc-form { grid-template-columns: minmax(0, 1fr); }
}
/* Feld: Labeltext (+ ggf. Live-Wert) in EINER Zeile, das Eingabefeld
   darunter in voller Breite — so bleibt „Stück pro Tag: 450" beisammen */
.sp-rechner .spc-field {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #14181b;
}
.sp-rechner .spc-field select,
.sp-rechner .spc-field input[type="range"] {
    flex: 1 0 100%;
}
.sp-rechner .spc-field select {
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    color: #232d31;
    padding: 11px 18px;
    border: 1px solid #e2e8ec;
    border-radius: 999px;          /* Pill — passend zu Buttons/Inputs der Site */
    background: #fff;
    transition: border-color .15s ease;
}
.sp-rechner .spc-field select:focus { border-color: #ef7d00; outline: none; }
.sp-rechner .spc-field input[type="range"] {
    accent-color: #ef7d00;
    width: 100%;
    margin-top: 6px;
}

/* Aufgeklapptes Dropdown im Karten-Look (Customizable Select).
   Nur Browser mit base-select-Unterstützung (Chromium) — alle anderen
   behalten den System-Picker, deshalb komplett hinter @supports. */
@supports (appearance: base-select) {
    .sp-rechner .spc-field select,
    .sp-rechner .spc-field select::picker(select) {
        appearance: base-select;
    }
    .sp-rechner .spc-field select::picker(select) {
        margin-top: 6px;
        padding: 6px;
        border: 1px solid #e2e8ec;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 18px 44px -18px rgba(20, 24, 27, .35);
    }
    .sp-rechner .spc-field select::picker-icon {
        color: #78838a;
    }
    .sp-rechner .spc-field select option {
        padding: 10px 14px;
        border-radius: 9px;
        font-size: 15px;
        font-weight: 400;
        color: #232d31;
        cursor: pointer;
    }
    .sp-rechner .spc-field select option:hover,
    .sp-rechner .spc-field select option:focus {
        background: #f4f7f9;
    }
    .sp-rechner .spc-field select option:checked {
        background: #fff3e6;
        font-weight: 600;
        color: #14181b;
    }
    .sp-rechner .spc-field select option::checkmark {
        color: #ef7d00;
    }
}
.sp-rechner .spc-qty-out {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #ef7d00;
    font-variant-numeric: tabular-nums;
}

.sp-rechner .spc-result {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    background: #f4f7f9;
    border-radius: 18px;
    padding: 22px 24px;
    margin-top: 14px;
}
@media (max-width: 760px) {
    .sp-rechner .spc-result { grid-template-columns: minmax(0, 1fr); }
}
.sp-rechner .spc-r { display: flex; flex-direction: column; gap: 2px; }
.sp-rechner .spc-v {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 34px;
    letter-spacing: -.02em;
    color: #ef7d00;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.sp-rechner .spc-l { font-size: 13.5px; color: #78838a; line-height: 1.5; }
.sp-rechner .spc-r-wide { justify-content: center; }
.sp-rechner .spc-text strong { color: #14181b; }

.sp-rechner .spc-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 22px;
}
.sp-rechner .spc-note { font-size: 12.5px; color: #78838a; max-width: 40ch; }


/* =========================================================================
   AMBIENT — Sektion übernimmt die Kantenfarben des (Hero-)Videos darunter
   (Ambilight-Technik): Ein Mini-Canvas sampelt laufend den oberen
   Randstreifen des Videos und liegt riesig skaliert + stark geblurt als
   Hintergrund in dieser Sektion. Die Naht zwischen Sektion und Video
   verschwindet — auch wenn sich das Video farblich bewegt.

   Aktivierung: der SEKTION ÜBER dem Video unter Erweitert → Klasse den
   Wert „sp-ambient" geben. Quelle findet das Skript automatisch (das
   nächste sp-herovideo nach dieser Sektion im Dokument); abweichend per
   Erweitert → Attribute: data-ambient-for="#meine-video-sektion".

   Empfehlung: Der Sektion trotzdem eine zum Video passende dunkle
   Grundfarbe geben — sie ist der Fallback ohne JavaScript, bei
   reduzierter Bewegung und bevor das Video läuft. Der Ambient-Layer
   blendet sich darüber weich ein. Skript: functions.php Abschnitt 15.
   ========================================================================= */

.sp-ambient {
    position: relative;
    overflow: hidden;
}
/* Der Layer sitzt NUR in der unteren Zone der Sektion und läuft per
   Masken-Verlauf nach oben in die normale Sektionsfarbe aus — oben
   Sektionsfarbe, unten nahtlos ins Video.
   WICHTIG: explizite Breite — ein Canvas ist ein Replaced Element und
   fiele bei width:auto auf seine intrinsischen 48 px zurück (statt sich
   zwischen left/right aufzuspannen).
   PERFORMANCE: kein CSS-blur! Der Weichzeichner läuft im Mini-Canvas
   selbst (ctx.filter, functions.php Abschnitt 15) — hier wird nur noch
   eine winzige Textur hochskaliert, das ist GPU-seitig praktisch gratis.
   Höhe der Farbzone pro Sektion justierbar, z. B. per Erweitert →
   Attribute: style="--sp-ambient-height: 40%". */
.sp-ambient .sp-ambient-canvas,
.sp-ambient-top .sp-ambient-canvas {
    position: absolute;
    left: -5%;
    bottom: -2%;
    top: auto;
    width: 110%;
    height: var(--sp-ambient-height, 55%);
    z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 88%);
    mask-image: linear-gradient(to bottom, transparent, #000 88%);
    transform: translateZ(0);
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}
.sp-ambient .sp-ambient-canvas.is-live,
.sp-ambient-top .sp-ambient-canvas.is-live { opacity: 1; }
/* Inhalt über den Ambient-Layer heben (gleiche Logik wie sp-herovideo) */
.sp-ambient.sp-ambient .uk-container {
    position: relative;
    z-index: 1;
}

/* Variante: Ambient an der OBERKANTE — für die Sektion UNTER dem Video.
   Übernimmt die UNTERKANTE des Videos darüber (gespiegelt, Naht =
   identische Farben). Die Einblendung startet standardmäßig erst in den
   letzten 2 Sekunden des Videos und bleibt dann stehen — passend zum
   stehenden letzten Frame. Justierbar per Erweitert → Attribute:
   data-ambient-fadein="3"   (Sekunden vor Videoende; 0 = sofort) */
/* KEIN overflow:hidden — der Layer ragt bewusst über die Sektionskante
   ins Video hinein (--sp-ambient-overlap, Standard 64 px) und blendet
   dort per Maske weich über: Die minimale Farbdifferenz zwischen
   Video-Rendering und Canvas-Sampling (Farbraum/Gamma) verteilt sich
   so über eine Überblendzone MITTEN im Video, statt an einer harten
   Stoßlinie sichtbar zu werden. */
.sp-ambient-top { position: relative; }
.sp-ambient-top .sp-ambient-canvas {
    top: calc(-1 * var(--sp-ambient-overlap, 64px));
    bottom: auto;
    height: calc(var(--sp-ambient-height, 55%) + var(--sp-ambient-overlap, 64px));
    -webkit-mask-image: linear-gradient(to bottom,
        transparent,
        #000 calc(var(--sp-ambient-overlap, 64px) * 1.6),
        #000 55%,
        transparent);
    mask-image: linear-gradient(to bottom,
        transparent,
        #000 calc(var(--sp-ambient-overlap, 64px) * 1.6),
        #000 55%,
        transparent);
    transition-duration: 1.8s;      /* weiches Aufglimmen zum Videoende */
}
.sp-ambient-top.sp-ambient-top .uk-container {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .sp-ambient .sp-ambient-canvas,
    .sp-ambient-top .sp-ambient-canvas { display: none; }
}

/* --- BLEND-TOP: Überblend-Schleier an der Oberkante einer Sektion -------
   Für die VIDEO-Sektion unter einer sp-ambient-Sektion: legt oben einen
   Verlauf in der Grundfarbe der Sektion darüber, der ins Video ausläuft.
   Beide Sektionen ÜBERBLENDEN sich damit über eine Zone, statt an einer
   Linie aneinanderzustoßen — die Naht ist deterministisch unsichtbar,
   unabhängig vom Farb-Sampling des Ambient-Layers.
   Aktivierung: der Video-Sektion zusätzlich Klasse „sp-blend-top" geben
   und die Grundfarbe der Sektion darüber mitteilen (Erweitert →
   Attribute — als DATA-Attribut, YooTheme filtert style="…" dort
   heraus; die Übergabe macht functions.php Abschnitt 22):
       data-blend-color="#0b1626"
   Höhe der Überblendung optional: data-blend-height="160px"
   (Standard 160px). */
.sp-blend-top { position: relative; }
.sp-blend-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--sp-blend-height, 160px);
    background: linear-gradient(to bottom, var(--sp-blend-color, #000), transparent);
    z-index: 1;                    /* über dem Video, unter dem Inhalt */
    pointer-events: none;
}
.sp-blend-top .uk-container { position: relative; z-index: 2; }

/* --- BLEND-BOTTOM: Sektion läuft unten in die Kantenfarbe des Videos aus
   Der EMPFOHLENE Weg für Videos mit (nahezu) einfarbiger Oberkante —
   beim GEN-X8-Material ist sie gemessen schlicht Schwarz (#000–#010516).
   Statischer CSS-Verlauf: deterministisch nahtlos, null Laufzeitkosten.
   Das Live-Sampling (sp-ambient) lohnt nur bei Footage, deren Kanten
   sich farblich wirklich bewegen.
   Aktivierung: der Sektion ÜBER dem Video die Klasse „sp-blend-bottom"
   geben und die Videokantenfarbe mitteilen (Erweitert → Attribute —
   als DATA-Attribut, YooTheme filtert style="…" dort heraus;
   Übergabe: functions.php Abschnitt 22):
       data-blend-color="#000208"
   Höhe des Auslaufs optional: data-blend-height (Standard 45 %).
   BEIDE Klassen zusammen auf einer Video-Sektion = Überblendung an
   Ober- UND Unterkante in dieselbe Nachbarfarbe. */
.sp-blend-bottom { position: relative; }
.sp-blend-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;                  /* 1 px Überschuss deckt Haarlinien ab,
                                      die durch Subpixel-Rundung zwischen
                                      Sektionen entstehen können */
    height: var(--sp-blend-height, 45%);
    background: linear-gradient(to bottom, transparent, var(--sp-blend-color, #000) calc(100% - 1px));
    z-index: 1;
    pointer-events: none;
}
/* Inhalt über beide Schleier heben */
.sp-blend-bottom .uk-container { position: relative; z-index: 2; }


/* =========================================================================
   VIDEOFLOW — gepinnte Video-Sequenz mit Solo-Bühne (Apple-Muster)
   Die Sektion bleibt beim Scrollen einen definierten Weg lang stehen
   (position:sticky). Jede Karte bekommt ihre EIGENE BÜHNE: Sie steht
   allein und groß in der Mitte — ERST DANN startet ihr Video (stumm,
   einmal, letzter Frame bleibt; die kurzen Clips laufen nie
   gleichzeitig). Scrollt man weiter, schrumpft die aktive Karte nach
   oben weg, während sich die nächste von unten hochschiebt und die
   Bühne übernimmt. Nach der letzten Karte das Finale: Alle Karten
   fliegen animiert in eine gemeinsame Reihe nebeneinander, dann
   scrollt die Sektion normal weiter.
   Titel + Inhalt liegen AUF der Karte (unten, über weichem Scrim) und
   erscheinen nur auf der aktiven Karte bzw. im Finale.

   Aktivierung: dem GALLERY-Element in YooTheme unter Erweitert →
   Klasse den Wert „sp-videoflow" geben (ein evtl. vorhandenes
   sp-mediacards dort ERSETZEN). Felder je Item: Bild = Video aus der
   Mediathek, Meta = Eyebrow (optional), Titel = Headline, Inhalt =
   Fließtext. Standard- UND Overlay-Layout des Gallery-Elements werden
   unterstützt (das Skript holt die Texte auch aus den uk-position-
   Hüllen); die Spaltenwahl des Builders wird überstimmt.
   Skript und Stellschrauben (Scrollweg je Karte, Finale-Anteil):
   functions.php Abschnitt 17.

   Optional — Intro über der Finale-Reihe: Den Sektions-Inhalten, die
   im Finale ÜBER den aufgereihten Karten stehen sollen (Eyebrow,
   Headline, Fließtext — oder ihrem gemeinsamen Panel), zusätzlich die
   Klasse „sp-videoflow-intro" geben. Das Skript spiegelt sie als
   aria-hidden-Kopie in die Bühne; sie blenden mit dem Finale ein und
   die Kartenreihe rückt dafür etwas nach unten.

   Die Overlay-Texte sind bewusst FEST hell: Sie liegen auf dem
   Videobild (dunkles GEN-X8-Material), nicht auf der Sektionsfläche.

   Ohne JavaScript bleibt das Builder-Raster aus dem Markup — alles
   sichtbar. Mobil und bei prefers-reduced-motion gibt es KEINE
   gepinnte Sequenz: Die Karten stehen untereinander; mobil spielt das
   sichtbare Video (immer nur eines), bei reduzierter Bewegung stehen
   Standbilder.
   ========================================================================= */

/* Grundzustand (gilt auch ohne JavaScript): gerundete Video-Karte.
   Die dunkle Kartenfläche steht SOFORT — bevor das Video Frames hat,
   sieht man eine ruhige Fläche statt einer leeren Box. */
.sp-videoflow .el-item {
    position: relative;
    display: block;      /* uk-inline-clip (Overlay-Layout) macht das
                            Item sonst zum inline-block */
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    background: #06080a;
    box-shadow: 0 24px 60px -28px rgba(20, 24, 27, .45);
}
/* Festes Seitenverhältnis VOR den Video-Metadaten: Ohne aspect-ratio
   hätte das Video erst 0/Standard-Höhe und die Karte spränge beim
   Laden auf ihre echte Größe („Aufploppen"). 16:9 ist der Rückfall —
   das Skript überschreibt mit dem data-aspect des Items. object-fit
   deckt minimale Abweichungen ohne Letterbox-Streifen ab. */
.sp-videoflow .el-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ---- Basis-Layout mit Skript (mobil + reduzierte Bewegung):
   Karten untereinander. UIkit-Reste an den Wrappern neutralisieren
   (uk-child-width-Prozentbreite, Gutter-Padding, nachträgliche
   uk-grid-Margins). */
.sp-videoflow.is-armed .uk-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-left: 0;
}
.sp-videoflow.is-armed .uk-grid > * {
    width: auto;
    padding-left: 0;
    margin: 0;
    min-width: 0;
}
/* Die gespiegelte Intro-Kopie existiert nur für das Desktop-Finale —
   mobil/reduziert stehen die Originale ohnehin über der Sektion */
.sp-videoflow.is-armed .spv-intro { display: none; }

/* ---- Replay-Knopf (Apple-Muster): runder, dunkel-transluzenter
   Knopf mit Kreispfeil unten rechts auf der Karte. Erscheint erst,
   wenn das Video durchgelaufen ist (Klasse is-fertig am Item, setzt
   das Skript), und startet es auf Klick neu.
   GETEILT von Videoflow (Abschnitt 17) und Mediacards (Abschnitt 16) —
   gleiche Klasse spv-replay, gleiche Optik. */
.sp-mediacards .el-item { position: relative; }   /* Anker für den Knopf */
.sp-mediacards .spv-replay,
.sp-videoflow.is-armed .spv-replay {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 24, 27, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    z-index: 2;                  /* über Video und Text-Scrim */
    opacity: 0;
    visibility: hidden;
    transform: scale(.8);
    transition: opacity .3s ease, transform .3s ease,
                background-color .2s ease, visibility 0s .3s;
}
.sp-mediacards .spv-replay svg,
.sp-videoflow.is-armed .spv-replay svg {
    width: 18px;
    height: 18px;
    display: block;
}
.sp-mediacards .spv-replay:hover,
.sp-videoflow.is-armed .spv-replay:hover { background: rgba(239, 125, 0, .92); }
.sp-mediacards .el-item.is-fertig .spv-replay,
.sp-videoflow.is-armed .el-item.is-fertig .spv-replay {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity .3s ease, transform .3s ease,
                background-color .2s ease, visibility 0s;
}

/* ---- Overlay: Titel + Inhalt auf der Karte (unten), über weichem
   Scrim. Das Overlay fängt keine Zeiger-Eingaben — nur Links darin. */
.sp-videoflow.is-armed .spv-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(16px, 2vw, 28px);
    background: linear-gradient(transparent, rgba(10, 12, 14, .62));
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease;
}
.sp-videoflow.is-armed .spv-text a { pointer-events: auto; }
.sp-videoflow.is-armed .el-item.is-in .spv-text { opacity: 1; }
/* uk-margin-Klassen der umgezogenen Felder neutralisieren —
   der Rhythmus im Overlay kommt nur von hier */
.sp-videoflow.is-armed .spv-text > * { margin: 0; }
.sp-videoflow.is-armed .spv-text > * + * { margin-top: 8px; }
.sp-videoflow.is-armed .el-title {
    font-size: clamp(17px, 1.6vw, 24px);
    line-height: 1.25;
    letter-spacing: -.02em;
    margin: 0;
    color: #fff;
}
.sp-videoflow.is-armed .el-content {
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
}
.sp-videoflow.is-armed .el-meta {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

/* ---- Einblendung beim ersten Erscheinen (Klasse is-in) ---- */
.sp-videoflow.is-armed .el-item {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
                transform .9s cubic-bezier(.22, .61, .36, 1);
}
.sp-videoflow.is-armed .el-item.is-in { opacity: 1; transform: none; }

/* ---- Die gepinnte Sequenz: nur Desktop, nur ohne reduzierte
   Bewegung. Den Scrollweg (Wrapper-Höhe) setzt das Skript inline;
   die uk-grid wird zur sticky Bühne, die Karten stehen darin absolut
   und durchlaufen drei Zustände. ---- */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
    .sp-videoflow.is-armed .uk-grid {
        position: sticky;
        top: 0;
        height: 100vh;
        display: block;              /* Bühne — die Karten stehen absolut */
        container-type: size;        /* cqw-Einheiten für die Intro-
                                        Verankerung an der Kartenreihe */
    }
    /* Grundzustand jeder Karte = WARTET: mittig, aber unterhalb der
       Bühne geparkt. is-aktiv holt sie groß in die Mitte (Solo-Bühne),
       is-vorbei verabschiedet sie schrumpfend nach oben — beim Wechsel
       laufen beide Übergänge gleichzeitig: Die aktive schrumpft weg,
       die nächste schiebt sich von unten hoch. visibility verhindert,
       dass unsichtbare Karten über dem Folgeinhalt Eingaben abfangen. */
    .sp-videoflow.is-armed .uk-grid > * {
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(76%, 150vh);      /* 16:9 passt damit immer in die Bühne */
        margin: 0;
        padding-left: 0;
        transform: translate(-50%, 72vh);
        opacity: 0;
        visibility: hidden;
        transition: transform .85s cubic-bezier(.32, .72, .24, 1),
                    width .85s cubic-bezier(.32, .72, .24, 1),
                    left .85s cubic-bezier(.32, .72, .24, 1),
                    opacity .7s ease,
                    visibility 0s .85s;
    }
    .sp-videoflow.is-armed .uk-grid > .is-aktiv {
        transform: translate(-50%, -50%);
        opacity: 1;
        visibility: visible;
        z-index: 2;              /* Bühne liegt ÜBER den Nachbar-Andeutungen */
        transition: transform .85s cubic-bezier(.32, .72, .24, 1),
                    width .85s cubic-bezier(.32, .72, .24, 1),
                    left .85s cubic-bezier(.32, .72, .24, 1),
                    opacity .7s ease,
                    visibility 0s;
    }
    .sp-videoflow.is-armed .uk-grid > .is-vorbei {
        transform: translate(-50%, calc(-50% - 44vh)) scale(.45);
        opacity: 0;
        visibility: hidden;
    }
    /* Angedeutete Nachbarn: Die VORIGE Karte lugt oben, die NÄCHSTE
       unten hinter der aktiven Bühne hervor — klein, gedimmt, ohne
       Overlay-Text und hinter der aktiven Karte (z-index). Stehen
       bewusst NACH der is-vorbei-Regel: Bei gleicher Spezifität
       gewinnen sie, sobald das Skript beide Klassen vergibt. */
    /* WICHTIG — eigene Transition mit visibility 0s: Die Basis-Regel
       verzögert visibility um .85s, damit AUSBLENDENDE Karten während
       ihrer Weg-Animation sichtbar bleiben. EINBLENDENDE Zustände
       erbten diese Verzögerung — die nachrückende Karte blieb dann
       ihre komplette Aufstiegs-Animation lang unsichtbar und ploppte
       fertig ins Bild. Sichtbarwerden muss sofort geschehen, die
       Bewegung übernimmt die Animation. */
    .sp-videoflow.is-armed .uk-grid > .is-davor {
        transform: translate(-50%, calc(-50% - 40vh)) scale(.55);
        opacity: .35;
        visibility: visible;
        z-index: 1;
        transition: transform .85s cubic-bezier(.32, .72, .24, 1),
                    width .85s cubic-bezier(.32, .72, .24, 1),
                    left .85s cubic-bezier(.32, .72, .24, 1),
                    opacity .7s ease,
                    visibility 0s;
    }
    .sp-videoflow.is-armed .uk-grid > .is-danach {
        transform: translate(-50%, calc(-50% + 40vh)) scale(.55);
        opacity: .35;
        visibility: visible;
        z-index: 1;
        transition: transform .85s cubic-bezier(.32, .72, .24, 1),
                    width .85s cubic-bezier(.32, .72, .24, 1),
                    left .85s cubic-bezier(.32, .72, .24, 1),
                    opacity .7s ease,
                    visibility 0s;
    }
    /* Finale: alle Karten fliegen in eine gemeinsame Reihe — Position
       und Breite je Karte aus --spv-i (Index) und --spv-n (Anzahl),
       beide setzt das Skript. 2% Fuge zwischen den Karten.
       (Das Skript entfernt is-aktiv/is-vorbei — deren Regeln wären
       spezifischer als diese.) */
    .sp-videoflow.is-finale .uk-grid > * {
        left: calc(var(--spv-i, 0) * ((100% - (var(--spv-n, 4) - 1) * 2%) / var(--spv-n, 4) + 2%));
        width: calc((100% - (var(--spv-n, 4) - 1) * 2%) / var(--spv-n, 4));
        transform: translateY(-50%);
        opacity: 1;
        visibility: visible;
        transition: transform .85s cubic-bezier(.32, .72, .24, 1),
                    width .85s cubic-bezier(.32, .72, .24, 1),
                    left .85s cubic-bezier(.32, .72, .24, 1),
                    opacity .7s ease,
                    visibility 0s;
    }
    /* Overlay nur auf der aktiven Karte und im Finale */
    .sp-videoflow.is-armed .el-item.is-in .spv-text { opacity: 0; }
    .sp-videoflow.is-armed .is-aktiv .el-item.is-in .spv-text,
    .sp-videoflow.is-finale .el-item.is-in .spv-text { opacity: 1; }

    /* Replay-Knopf nur auf der Bühne bzw. im Finale — nicht auf den
       kleinen Nachbar-Andeutungen */
    .sp-videoflow.is-armed .el-item.is-fertig .spv-replay {
        opacity: 0;
        visibility: hidden;
        transform: scale(.8);
    }
    .sp-videoflow.is-armed .is-aktiv .el-item.is-fertig .spv-replay,
    .sp-videoflow.is-finale .el-item.is-fertig .spv-replay {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

    /* Steht ein gespiegeltes Intro bereit, rückt die Finale-Reihe
       etwas nach unten und macht ihm oben Platz */
    .sp-videoflow.is-finale.is-mit-intro .uk-grid > * {
        transform: translateY(calc(-50% + 9vh));
    }

    /* ---- Gespiegeltes Intro (.spv-intro, baut das Skript) ----
       Steht bewusst NACH allen Karten-Regeln: Als Grid-Kind erfasst
       es sonst deren Zustands-Geometrie. Erscheint mit kleinem
       Nachlauf zum Kartenflug des Finales. */
    .sp-videoflow.is-armed .uk-grid > .spv-intro {
        display: block;
        position: absolute;
        top: auto;
        /* An der KARTENREIHE verankert, nicht an der Bühnenkante:
           Kartenmitte liegt bei 50% + 9vh, die halbe Kartenhöhe ist
           6.61cqw (Kartenbreite 23.5cqw × 9/16 ÷ 2). Intro-Unterkante
           = Kartenoberkante + 2,6vh Luft — der Abstand ist damit auf
           JEDEM Viewport konstant, die Kartenhöhe kürzt sich heraus:
           bottom = 50% − 9vh + 6.61cqw + 2,6vh. Die 58%-Zeile ist nur
           der Rückfall für Browser ohne Container-Query-Einheiten. */
        bottom: 58%;
        bottom: calc(50% - 6.4vh + 6.61cqw);
        left: 50%;
        width: min(92%, 880px);
        margin: 0;
        padding-left: 0;
        text-align: center;
        transform: translate(-50%, 24px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 3;
        transition: transform .8s cubic-bezier(.32, .72, .24, 1) .25s,
                    opacity .8s ease .25s,
                    visibility 0s .8s;
    }
    .sp-videoflow.is-finale .uk-grid > .spv-intro {
        transform: translate(-50%, 0);
        opacity: 1;
        visibility: visible;
        transition: transform .8s cubic-bezier(.32, .72, .24, 1) .25s,
                    opacity .8s ease .25s,
                    visibility 0s .25s;
    }
}

@media (max-width: 959px) {
    .sp-videoflow .el-item { border-radius: 16px; }
}

/* ---- Reduzierte Bewegung: alles sichtbar, nichts animiert ---- */
@media (prefers-reduced-motion: reduce) {
    .sp-videoflow.is-armed .el-item,
    .sp-videoflow.is-armed .spv-text {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =========================================================================
   TRAILER — Kino-Einbau für den Launch-Trailer (Apple-Muster)
   Das Video liegt als große abgerundete Karte mit weichem Schatten in
   der Sektion, blendet beim Hereinscrollen filmisch ein (leicht
   skaliert von unten) und driftet beim Scrollen minimal (Parallax).
   Hinter der Karte glüht ein AMBIENT-Schein in den Live-Farben des
   Videos — Mini-Canvas-Sampling wie beim sp-ambient-Modul (Abschnitt
   15), KEIN CSS-Blur: Das 32×18-Canvas wird im 2D-Kontext geblurt und
   nur hochskaliert, GPU-seitig praktisch gratis.

   Die Player-Oberfläche ist komplett eigen (native controls werden
   per Skript entfernt): großer Glas-Play-Knopf, unten eine
   transluzente Leiste mit Play/Pause, Zeit, Fortschrittsbalken,
   Ton und Vollbild. Beim Abspielen zieht sich die Leiste nach kurzer
   Mausruhe zurück (samt Cursor), jede Bewegung holt sie wieder.

   Aktivierung: dem VIDEO-Element in YooTheme unter Erweitert →
   Klasse den Wert „sp-trailer" geben. Im Element „Controls" ruhig
   aktiviert lassen — sie sind der Fallback ohne JavaScript; das
   Skript ersetzt sie durch die eigene Oberfläche.
   Skript: functions.php Abschnitt 18.

   Ohne JavaScript: natives Video mit Browser-Controls, voll nutzbar.
   prefers-reduced-motion: kein Reveal, kein Drift, kein Ambient —
   die eigene Player-Leiste bleibt (sie ist keine Bewegung).
   ========================================================================= */

/* Der Parallax-Drift liegt auf dem WRAPPER (nimmt das Glühen mit und
   bleibt frei von Transitions) — der Reveal auf dem Rahmen darunter.
   Läge beides auf einem Element, würfe die beim is-in-Wechsel neu
   greifende Transition den Transform aus der Reveal-Animation. */
.sp-trailer {
    position: relative;
    transform: translateY(var(--spt-drift, 0px));
}

/* ---- Ambient-Glühen auf SEKTIONSEBENE ----
   Das Canvas liegt als vollflächiger Layer direkt in der Sektion —
   NICHT im Video-Container: Dort begrenzen Containerbreite, Spalten
   und der overflow der sp-ambient-Sektion das Leuchten auf einen
   schmalen Rand hinter der Karte. Auf Sektionsebene wird die ganze
   dunkle Fläche zum Lichtraum; der Sektionsinhalt liegt per
   .uk-container-z-index darüber (dasselbe Muster wie Abschnitt 15,
   dessen Regel auf sp-ambient-Sektionen ohnehin schon greift).
   Oben und unten läuft das Leuchten per Maske weich aus, damit die
   Sektion nicht hart an den Nachbarn stößt.
   Stärke justierbar per Erweitert → Attribute am VIDEO-Element:
       data-glow-staerke=".7"
   (WICHTIG: als data-Attribut — style="…" filtert YooTheme aus dem
   Attribute-Feld heraus, auf Staging verifiziert. Das Skript reicht
   den Wert ans Sektions-Canvas durch.) Zusätzlich regelt das Skript
   ADAPTIV nach Frame-Helligkeit: dunkle Frames werden additiv
   geboostet, helle (Voll-Orange) gedämpft — Abschnitt 18a. */
.spt-glow-sektion { position: relative; overflow: hidden; }
.spt-glow-sektion > .uk-container { position: relative; z-index: 1; }
.spt-glow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}
.spt-glow.is-glueht { opacity: var(--spt-glow-staerke, .9); }

/* ---- Kinorahmen ---- */
.sp-trailer .spt-frame {
    position: relative;
    z-index: 1;
    border-radius: 24px;
    overflow: hidden;
    background: #06080a;
    box-shadow: 0 32px 80px -32px rgba(0, 0, 0, .8);
}
.sp-trailer video {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
}

/* ---- Teaser-Loop (Köder, baut das Skript aus data-teaser) ----
   Liegt vollflächig über dem Poster, bis der Film startet — dann
   blendet er weich aus und bleibt weg (is-gestartet). Zeiger-Eingaben
   reicht er durch: Klicks landen auf dem Hauptvideo darunter. */
.sp-trailer .spt-teaser {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity .6s ease;
}
.sp-trailer .is-gestartet .spt-teaser {
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s .6s;
}

/* ---- Einladungs-Affordanzen (nur ohne reduzierte Bewegung) ---- */
@media (prefers-reduced-motion: no-preference) {
    /* Ruhig atmender Puls-Ring um den Play-Knopf */
    .sp-trailer .spt-start::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .5);
        animation: spt-puls 2.8s ease-out infinite;
        pointer-events: none;
    }
    @keyframes spt-puls {
        0%        { transform: scale(1);    opacity: .7; }
        70%, 100% { transform: scale(1.55); opacity: 0; }
    }
    /* Motiv zoomt beim Hover minimal — Einladung zum Klick,
       nur solange der Film noch nicht gestartet wurde */
    .sp-trailer .spt-frame video { transition: transform .6s ease; }
    .sp-trailer .spt-frame:not(.is-gestartet):hover video { transform: scale(1.015); }
}
/* Beim Hover leuchtet auch das Ambient eine Spur heller (Klasse
   setzt das Skript, nur vor dem Start) */
.spt-glow.is-glueht.is-nah { opacity: calc(var(--spt-glow-staerke, .9) * 1.2); }

/* Reveal: Karte kommt filmisch von unten, leicht skaliert */
.sp-trailer.is-armed .spt-frame {
    opacity: 0;
    transform: translateY(56px) scale(.96);
    transition: opacity 1s cubic-bezier(.22, .61, .36, 1),
                transform 1s cubic-bezier(.22, .61, .36, 1);
}
.sp-trailer.is-armed.is-in .spt-frame {
    opacity: 1;
    transform: none;
}

/* ---- Großer Play-Knopf (Glas) ---- */
.sp-trailer .spt-start {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(20, 24, 27, .45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    z-index: 3;
    transition: transform .25s ease, background-color .25s ease,
                opacity .35s ease, visibility 0s;
}
.sp-trailer .spt-start:hover {
    transform: translate(-50%, -50%) scale(1.06);
    background: rgba(239, 125, 0, .85);
}
.sp-trailer .spt-start svg {
    width: 34px;
    height: 34px;
    display: block;
    margin-left: 5px;             /* optisches Zentrum des Dreiecks */
}
.sp-trailer .is-laufend .spt-start {
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s .35s;
}

/* ---- Bedienleiste (Glas-Pille unten) ---- */
.sp-trailer .spt-leiste {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(12, 15, 18, .55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    z-index: 3;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}
/* Sichtbar, sobald einmal gestartet wurde — und nicht in Mausruhe */
.sp-trailer .is-gestartet .spt-leiste {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.sp-trailer .is-laufend.is-ruhe .spt-leiste {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}
.sp-trailer .is-laufend.is-ruhe video { cursor: none; }

.sp-trailer .spt-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    flex: none;
    transition: background-color .2s ease;
}
.sp-trailer .spt-knopf:hover { background: rgba(255, 255, 255, .14); }
.sp-trailer .spt-knopf svg { width: 18px; height: 18px; display: block; }

/* Icon-Paare: sichtbar je nach Zustand (Play/Pause, Ton an/aus).
   Mit svg-Typ im Selektor: Die Größen-Regel „.spt-knopf svg" oben hat
   (0,2,1) — ohne den Typ hier verlöre das display:none gegen deren
   display:block und beide Icons stünden nebeneinander. */
.sp-trailer svg.spt-wenn-laeuft,
.sp-trailer .is-laufend svg.spt-wenn-steht { display: none; }
.sp-trailer .is-laufend svg.spt-wenn-laeuft { display: block; }
.sp-trailer svg.spt-wenn-stumm,
.sp-trailer .is-stumm svg.spt-wenn-ton { display: none; }
.sp-trailer .is-stumm svg.spt-wenn-stumm { display: block; }

.sp-trailer .spt-zeit,
.sp-trailer .spt-dauer {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .85);
    flex: none;
    min-width: 34px;
    text-align: center;
}

/* Fortschritt: gefüllter Range-Regler */
.sp-trailer .spt-balken {
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    height: 4px;
    min-width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg,
        #ef7d00 var(--spt-p, 0%),
        rgba(255, 255, 255, .22) var(--spt-p, 0%));
    cursor: pointer;
    outline-offset: 6px;
}
.sp-trailer .spt-balken::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    transition: transform .15s ease;
}
.sp-trailer .spt-balken:hover::-webkit-slider-thumb { transform: scale(1.25); }
.sp-trailer .spt-balken::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

@media (max-width: 640px) {
    .sp-trailer .spt-frame { border-radius: 16px; }
    .sp-trailer .spt-start { width: 68px; height: 68px; }
    .sp-trailer .spt-start svg { width: 26px; height: 26px; }
    .sp-trailer .spt-leiste { left: 8px; right: 8px; bottom: 8px; padding: 8px 12px; gap: 8px; }
    .sp-trailer .spt-zeit, .sp-trailer .spt-dauer { display: none; }
}

/* ---- Kino-Modus: Läuft der Trailer, dunkelt die SEKTION weich ins
   Schwarze ab — das Ambient-Glühen trägt dann die ganze Fläche.
   Das Skript setzt spt-buehne-sektion dauerhaft (nur die Transition,
   damit auch das Aufhellen beim Pausieren weich läuft) und schaltet
   spt-kino mit der Wiedergabe. Die Doppelklasse schlägt die einfachen
   Sektionsklassen des Themes; eine im Builder INLINE gesetzte
   Sektionsfarbe gewänne dagegen — die Fläche dann dort über den
   Sektionsstil statt inline vergeben. */
.spt-buehne-sektion { transition: background-color 1.1s ease; }
.spt-kino.spt-kino {
    background-color: #050608;
    background-image: none;
}

/* ---- „Trailer ansehen"-Pill + Kino-Modal ----
   Opt-in am sp-trailer-Element (Erweitert → Attribute, data-* wegen
   des style-Filters im Builder): data-trailer-pill="Trailer ansehen"
   (Wert = Beschriftung). Die Pill schwebt fixiert oben mittig —
   AUSSERHALB der Navbar-Struktur, aber optisch auf ihrer Höhe (deren
   Mitte ist frei: Logo links, Menü rechts). Klick öffnet das Kino-
   Modal: Es LEIHT sich den kompletten Player-Rahmen (.spt-frame) aus
   der Sektion — die Karte trägt dafür selbst die sp-trailer-Klassen,
   damit alle Player-Styles greifen — und stellt ihn beim Schließen
   an einen Platzhalter zurück. Skript: Abschnitt 18a. */
/* Desktop: RECHTS NEBEN der zentrierten Navbar-Kapsel, vertikal auf
   deren Höhe — das top ist DIE Stellschraube für die Zentrierung
   (Pill 44px hoch; top = Kapsel-Mitte − 22px). Bei Änderungen an der
   Navbar-Höhe hier nachziehen. */
.spt-pill {
    position: fixed;
    top: 36px;
    right: clamp(16px, 3vw, 48px);
    z-index: 985;                 /* über der Navbar-Fläche, unter
                                     Offcanvas (1000) und Modal */
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 22px 0 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #ef7d00 50%, #ef5600 100%);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 28px -10px rgba(239, 125, 0, .6),
                0 3px 10px rgba(0, 0, 0, .3);
    transition: transform .2s ease, box-shadow .2s ease, opacity .25s ease;
}
.spt-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 14px 34px -10px rgba(239, 125, 0, .7),
                0 4px 12px rgba(0, 0, 0, .35);
}
.spt-pill svg { width: 16px; height: 16px; display: block; }
/* Pill tritt ab, solange Modal oder Offcanvas-Menü offen sind */
body.spt-kino-offen .spt-pill,
body.sp-menue-offen .spt-pill {
    opacity: 0;
    pointer-events: none;
}
/* Mobil: Kapsel füllt die Breite — Pill mittig DARUNTER */
@media (max-width: 959px) {
    .spt-pill {
        top: 96px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    .spt-pill:hover { transform: translateX(-50%) scale(1.05); }
}

.spt-modal {
    position: fixed;
    inset: 0;
    z-index: 9992;                /* über dem Kontakt-FAB (9980) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 40px);
    background: rgba(4, 6, 8, .8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .3s ease;
}
.spt-modal.is-offen { opacity: 1; }
body.spt-kino-offen { overflow: hidden; }
body.spt-kino-offen .spk-fab { opacity: 0; pointer-events: none; }

/* Die Karte ist nur Positionsrahmen — Radius/Schatten bringt der
   ausgeliehene .spt-frame selbst mit */
.spt-modal-karte {
    position: relative;
    width: min(94vw, 1180px);
    transform: translateY(20px) scale(.98);
    transition: transform .35s cubic-bezier(.32, .72, .24, 1);
}
.spt-modal.is-offen .spt-modal-karte { transform: none; }

.spt-modal-zu {
    position: absolute;
    top: -52px;
    right: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease;
}
.spt-modal-zu:hover { background: #ef7d00; }
.spt-modal-zu svg { width: 18px; height: 18px; display: block; }

/* ---- Reduzierte Bewegung: steht ruhig, Player bleibt bedienbar ---- */
@media (prefers-reduced-motion: reduce) {
    .sp-trailer.is-armed .spt-frame {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .spt-glow { display: none; }
    .sp-trailer .spt-teaser { display: none; }   /* Skript legt ihn bei
                                                    reduce gar nicht an —
                                                    Gürtel + Hosenträger */
    .spt-buehne-sektion { transition: none; }
    .spt-pill, .spt-modal, .spt-modal-karte { transition: none; }
    .spt-modal { opacity: 1; }
    .spt-modal-karte { transform: none; }
}


/* =========================================================================
   KONTAKT-FAB — schwebender Kontakt-Knopf mit Formular-Overlay
   Ein runder, sanft pulsierender CTA klebt unten rechts im Viewport
   und öffnet das Kontaktformular als Overlay: dunkle Glaskarte, darin
   das Formular aus dem Plugin realdot-contact-forms — es erbt Farben
   (color:inherit) und sendet per REST, funktioniert also unverändert
   im Overlay. Knopf und Overlay hängt das Skript ans <body>: Ein
   Vorfahr mit transform (Drift-Module!) würde position:fixed sonst
   aushebeln.

   Aktivierung: In YooTheme ein HTML-Element mit dem Formular anlegen
   (optionale Überschrift + [realdot_form id="…"]) und ihm unter
   Erweitert → Klasse den Wert „sp-kontakt-fab" geben. Das Skript
   (functions.php Abschnitt 19) verschiebt den Inhalt in die Overlay-
   Karte und baut den Knopf; das Ursprungs-Element verschwindet aus
   dem Fluss. Knopf-Beschriftung (Screenreader/Tooltip) optional per
   Erweitert → Attribute: data-fab-label="Jetzt Kontakt aufnehmen"
   EIN Element pro Seite.

   Verteilte Auslöser: Jeder Button/Link auf der Seite kann DASSELBE
   Formular-Overlay öffnen — dem Button-Element in YooTheme unter
   Erweitert → Klasse den Wert „sp-kontakt-oeffnen" geben (als Link-
   Ziel reicht #, der Sprung wird unterbunden). Beliebig viele pro
   Seite; die Klick-Delegation fängt auch nachgeladene Inhalte.

   Ohne JavaScript bleibt das Element als normale Sektion im Fluss —
   das Formular ist immer erreichbar (No-JS-Submit bringt das Plugin
   selbst mit). prefers-reduced-motion: kein Puls, keine Übergänge.
   ========================================================================= */

/* ---- Der schwebende Knopf ---- */
.spk-fab {
    position: fixed;
    right: clamp(16px, 3vw, 32px);
    bottom: clamp(16px, 4vh, 32px);
    z-index: 9980;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef7d00 30%, #ef5600 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 12px 32px -8px rgba(239, 125, 0, .55),
                0 4px 12px rgba(0, 0, 0, .35);
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.spk-fab:hover {
    transform: scale(1.07);
    box-shadow: 0 16px 40px -8px rgba(239, 125, 0, .65),
                0 6px 16px rgba(0, 0, 0, .4);
}
.spk-fab svg {
    width: 24px;
    height: 24px;
    display: block;
}
/* Solange das Overlay offen ist, tritt der Knopf ab */
body.spk-offen .spk-fab {
    opacity: 0;
    transform: scale(.6);
    pointer-events: none;
}

/* Sanfter Puls: ein Ring löst sich in ruhigem Takt vom Knopf */
@media (prefers-reduced-motion: no-preference) {
    .spk-fab::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 50%;
        border: 1.5px solid rgba(239, 125, 0, .8);
        animation: spk-puls 3.2s ease-out infinite;
        pointer-events: none;
    }
    @keyframes spk-puls {
        0%        { transform: scale(1);   opacity: .8; }
        65%, 100% { transform: scale(1.7); opacity: 0; }
    }
}

/* ---- Overlay mit Glaskarte ---- */
.spk-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(6, 8, 10, .66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .3s ease;
}
.spk-overlay.is-offen { opacity: 1; }
body.spk-offen { overflow: hidden; }

.spk-karte {
    position: relative;
    width: min(92vw, 620px);
    max-height: 88vh;
    overflow-y: auto;
    padding: clamp(24px, 4vw, 40px);
    border-radius: 24px;
    background: rgba(15, 18, 22, .94);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .85);
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8);
    transform: translateY(24px) scale(.97);
    transition: transform .35s cubic-bezier(.32, .72, .24, 1);
}
.spk-overlay.is-offen .spk-karte { transform: none; }
/* Theme-Headings wären hier dunkel auf dunkel */
.spk-karte h1, .spk-karte h2, .spk-karte h3, .spk-karte h4 { color: #fff; }

.spk-zu {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease;
}
.spk-zu:hover { background: #ef7d00; }
.spk-zu svg { width: 18px; height: 18px; display: block; }

/* ---- Formular im Dunkel-Rezept (design.md 5.4) ----
   Im Theme-Modus tragen die Felder UIkit-Klassen und erben damit die
   WEISSEN Soft-UI-Pillen samt Glüh-Schatten der hellen Website — auf
   der dunklen Karte falsch, und die Labels kämen in der dunklen
   Heading-Farbe. Deshalb hier das etablierte dunkle Formular-Rezept:
   Glas-Felder, helle Labels, Orange als Akzent. Alles auf .spk-karte
   begrenzt — außerhalb des Overlays bleibt das Plugin unangetastet. */
.spk-karte .rdcf-form-wrapper {
    --rdcf-focus-color: #ef7d00;
    --rdcf-border-color: rgba(255, 255, 255, .18);
    --rdcf-error-color: #ff9e94;      /* lesbar auf Dunkel */
    --rdcf-success-color: #7dd7a0;
}
.spk-karte .rdcf-label {
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    font-weight: 600;
}
.spk-karte .rdcf-required { color: #ef7d00; }

.spk-karte .rdcf-input {
    font: inherit;
    color: #fff;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 500px;
    padding: 12px 20px;
    box-shadow: none;                 /* Soft-UI-Glühen der hellen Seite aus */
    transition: border-color .15s ease, background-color .15s ease;
}
.spk-karte textarea.rdcf-input {
    border-radius: 16px;              /* Pille passt nicht zu Mehrzeilern */
    min-height: 7em;
    resize: vertical;
}
.spk-karte .rdcf-input::placeholder { color: rgba(255, 255, 255, .3); }
.spk-karte .rdcf-input:focus {
    outline: none;
    border-color: #ef7d00;
    background: rgba(255, 255, 255, .1);
    /* color explizit auch hier: Im Theme-Modus tragen die Felder
       uk-input-Klassen, und YooThemes .uk-input:focus setzt eine
       DUNKLE Schrift (fürs helle Standarddesign) — ohne eigene
       Farbe hier war Getipptes genau während des Fokus unlesbar
       (verifiziert 29.09.2026). */
    color: #fff;
}
/* Chrome/Edge-Autofill (29.09.2026): Der Browser malt ausgefüllte
   Felder mit UA-!important-Regeln — dunkle Schrift auf eigener
   Füllfarbe, normales color/background greift nicht → unlesbar auf
   der dunklen Karte. -webkit-text-fill-color übersteuert die Schrift,
   der dicke Inset-Shadow legt sich über Chromes Backplate (Glas-
   Transparenz geht dabei verloren, der Vollton entspricht optisch
   rgba(255,255,255,.07) auf der Karte), die Endlos-Transition
   verhindert Chromes Farbumschlag beim Fokuswechsel. */
.spk-karte .rdcf-input:-webkit-autofill,
.spk-karte .rdcf-input:-webkit-autofill:hover,
.spk-karte .rdcf-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    box-shadow: inset 0 0 0 1000px #26292d;
    transition: background-color 9999999s ease-out;
}
.spk-karte select.rdcf-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}
.spk-karte select.rdcf-input option { color: #14181b; background: #fff; }

.spk-karte .rdcf-choice { color: rgba(255, 255, 255, .85); }
.spk-karte .rdcf-choice input {
    width: 1.15em;
    height: 1.15em;
    accent-color: #ef7d00;
}

.spk-karte .rdcf-description,
.spk-karte .rdcf-file-hints { color: rgba(255, 255, 255, .55); }

/* Absenden: Marken-Pill, ohne das weiße Theme-Glühen */
.spk-karte .rdcf-submit {
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, #ef7d00 50%, #ef5600 100%);
    border: 0;
    border-radius: 500px;
    padding: 13px 32px;
    cursor: pointer;
    box-shadow: 0 10px 24px -12px rgba(239, 125, 0, .5);
    transition: transform .18s ease, box-shadow .18s ease;
}
.spk-karte .rdcf-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px rgba(239, 125, 0, .65);
}

/* Mobil: als Sheet von unten, volle Breite */
@media (max-width: 640px) {
    .spk-overlay { padding: 0; align-items: flex-end; }
    .spk-karte {
        width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }
    .spk-fab { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    .spk-fab, .spk-overlay, .spk-karte { transition: none; }
    .spk-overlay { opacity: 1; }
    .spk-karte { transform: none; }
}


/* =========================================================================
   EXPLORER — Feature-Erkunder nach Apple-Muster (iPhone-Produktseite)
   Baut das YooTheme-SWITCHER-Element zur dunklen Erkunder-Tafel um:
   Das Bild des aktiven Panels füllt das GANZE Element (cover), über
   der linken Seite liegt ein schwarzer Verlauf als ruhiger Grund für
   Navigation und Text. Links die senkrechte Pillen-Liste mit Plus-
   Kringel — die AKTIVE Pille expandiert SANFT ANIMIERT zur Textbox:
   fetter Anleser, darunter die Beschreibung. Die Höhe der Box läuft
   über den grid-template-rows-Übergang (0fr → 1fr, überall flüssig),
   die Breite zusätzlich über interpolate-size (Browser, die es können;
   die übrigen schalten die Breite hart und animieren den Rest).
   Die Umschalt-Logik bleibt komplett beim UIkit-Switcher (uk-active).

   Aktivierung: dem SWITCHER-Element in YooTheme unter Erweitert →
   Klasse den Wert „sp-explorer" geben. Redaktion je Panel:
   · Navigations-Label = kurzer Begriff („Kapazität")
   · Bild             = großes Motiv (füllt das Element, cover —
                        wichtige Bildinhalte rechts platzieren, links
                        liegt der Verlauf mit der Navigation)
   · Titel            = fetter Anleser der aufgeklappten Box
                        („Mehr Kapazität." — mit Punkt, Apple-Duktus)
   · Inhalt           = Beschreibungstext (steht UNTER dem Anleser)
   Das Skript (functions.php Abschnitt 20) holt Titel + Inhalt aus dem
   Panel in die zugehörige Pille — im Panel bleibt nur das Bild.

   Mobil (< 960 px, seit 05.10.2026): KEIN Overlay mehr — die Pillen
   stehen im normalen Fluss, und das Motiv des aktiven Panels wandert
   als Klon IN die geöffnete Pille, über den Anleser (Skript legt je
   Pille eine spe-bild-Box an; Details im Mobil-Block am Abschnittsende).

   Ohne JavaScript bleibt der normale Switcher (Tabs oben, Bild +
   Texte darunter) — vollständig nutzbar.
   prefers-reduced-motion: Zustandswechsel ohne Übergänge.
   ========================================================================= */

/* Erst mit Skript (is-armed) — vorher normaler Switcher */
.sp-explorer.is-armed {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(300px, 5fr) 7fr;
    align-items: center;
    background: #060708;
    border-radius: 28px;
    padding: clamp(24px, 4vw, 56px);
    aspect-ratio: 1.9;             /* Tafel-Proportion wie beim Vorbild */
    min-height: 460px;             /* lange Listen dürfen sie strecken */
}
/* Breiten-Übergang der Pillen zu/von fit-content — wo der Browser es kann */
@supports (interpolate-size: allow-keywords) {
    .sp-explorer.is-armed { interpolate-size: allow-keywords; }
}

/* ---- Vollflächiges Bild + Verlauf ----
   Der Switcher liegt absolut HINTER allem (das aktive Panel blendet
   UIkit ein), das Bild deckt das Element komplett. Der Verlauf trägt
   Navigation und Text auf der linken Seite. */
.sp-explorer.is-armed .uk-switcher {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
}
.sp-explorer.is-armed .uk-switcher > *,
.sp-explorer.is-armed .uk-switcher .el-item,
.sp-explorer.is-armed .uk-switcher picture {
    height: 100%;
    margin: 0;
}
.sp-explorer.is-armed .uk-switcher picture { display: block; }
.sp-explorer.is-armed .uk-switcher .el-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}
.sp-explorer.is-armed::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, .92) 0%,
        rgba(0, 0, 0, .72) 32%,
        rgba(0, 0, 0, .28) 55%,
        transparent 72%);
    pointer-events: none;
}

/* ---- Linke Spalte: Pillen-Liste über dem Verlauf ---- */
.sp-explorer.is-armed .el-nav {
    position: relative;
    z-index: 2;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    border: 0;
}
.sp-explorer.is-armed .el-nav::before { display: none; }  /* uk-tab-Linie */
.sp-explorer.is-armed .el-nav > li { padding: 0; width: 100%; }

/* Die Pille: immer block, Radius FEST 24px — kollabiert ist sie
   ~48px hoch, da wirkt 24px exakt wie eine Pille, expandiert wie die
   Box. Der Radius muss also nie animieren (das Morphen des Radius war
   einer der Unrund-Macher). Alle Geometrie-Übergänge laufen auf EINER
   Kurve und EINER Dauer — Öffnen und Schließen sind eine Bewegung. */
.sp-explorer.is-armed .el-nav > li > a {
    /* UIkit setzt border-box NICHT global — beim nackten <a> gilt
       content-box, und width:100% + Padding lief 40–52px über die
       Tafelkante (overflow:hidden klippte die Pillen dann hart;
       Headless-Messung am Live-Stand, 05.10.2026). */
    box-sizing: border-box;
    display: block;
    width: fit-content;
    padding: 12px 20px;
    border: 0;
    border-radius: 24px;
    background: rgba(27, 29, 32, .82);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    transition: background-color .3s ease,
                padding .5s cubic-bezier(.32, .72, .24, 1),
                width .5s cubic-bezier(.32, .72, .24, 1);
}
.sp-explorer.is-armed .el-nav > li > a:hover { background: rgba(38, 40, 44, .88); }

/* ---- Öffnungs-Schema nach Apple: zwei gegenläufige Zeilen-Morphs.
   Die KOPF-Zeile (Kringel + Label) kollabiert über grid-rows 1fr→0fr
   und blendet ab, während die TEXT-Zeilen aus 0fr→1fr aufwachsen und
   der Inhalt LEICHT VERZÖGERT einfadet (er soll erscheinen, nicht aus
   der Schnittkante „ausrollen"). Beim Schließen umgekehrt: Text sofort
   und schnell weg (Zustand ohne Verzögerung), Label kommt mit kleinem
   Nachlauf zurück. Gesamthöhe = Summe beider Rows → ein durchgehender,
   runder Morph statt Sprüngen. */
/* Kopf-Kollaps über max-height statt grid-rows: 0fr behält je nach
   Engine eine Min-Content-Resthöhe (fr-Tücke) — der Rest drückte den
   Box-Inhalt aus der Mitte. max-height → 0 kollabiert GARANTIERT auf
   exakt null, mit derselben Kurve. Die 32px decken die einzeilige
   Label-Zeile; bei umbrechenden Labels den Wert anheben. */
.sp-explorer.is-armed .spe-kopf {
    display: block;
    overflow: hidden;
    max-height: 32px;
    transition: max-height .5s cubic-bezier(.32, .72, .24, 1);
}
.sp-explorer.is-armed .el-nav > li.uk-active .spe-kopf { max-height: 0; }
.sp-explorer.is-armed .spe-label {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 1;
    transition: opacity .25s ease .18s;   /* Rückkehr mit Nachlauf */
}
.sp-explorer.is-armed .el-nav > li.uk-active .spe-label {
    opacity: 0;
    transition: opacity .15s ease;        /* Abgang sofort */
}
/* Das Plus wird GEZEICHNET statt gesetzt: Als Schriftzeichen säße es
   je nach Font-Metrik nie exakt im Kreiszentrum — zwei Gradient-
   Striche liegen geometrisch garantiert mittig. Farbe: Marken-Orange. */
.sp-explorer.is-armed .spe-label::before {
    content: "";
    width: 26px;
    height: 26px;
    flex: none;
    border: 1.5px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background:
        linear-gradient(#ef7d00, #ef7d00) center / 11px 2px no-repeat,
        linear-gradient(#ef7d00, #ef7d00) center / 2px 11px no-repeat;
}

/* ---- Aktive Pille: expandiert zur Textbox ---- */
.sp-explorer.is-armed .el-nav > li.uk-active > a {
    width: 100%;
    padding: 22px 26px;
    cursor: default;
}

.sp-explorer.is-armed .spe-text {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s cubic-bezier(.32, .72, .24, 1);
}
.sp-explorer.is-armed .el-nav > li.uk-active .spe-text { grid-template-rows: 1fr; }
.sp-explorer.is-armed .spe-text-inhalt {
    display: block;
    overflow: hidden;
    min-height: 0;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
    color: rgba(255, 255, 255, .75);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;   /* Abgang sofort */
}
.sp-explorer.is-armed .el-nav > li.uk-active .spe-text-inhalt {
    opacity: 1;
    transform: none;
    transition: opacity .4s ease .16s, transform .4s ease .16s;   /* Ankunft verzögert */
}
/* Anleser fett, Beschreibung in EIGENER Zeile darunter — ausgewogene
   Hierarchie: kräftiger Anleser, ruhiger Fließtext, klarer Abstand.
   Die uk-margin-*-Utilities des Builders (tragen !important!) streift
   das Skript beim Umzug ab — die Abstände hier sind damit die einzige
   Wahrheit. */
.sp-explorer.is-armed .spe-text .el-title {
    display: block;
    margin: 0;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -.01em;      /* globales Heading-Tracking ist hier zu eng */
    color: #fff;
}
.sp-explorer.is-armed .spe-text .el-content {
    display: block;
    margin: 8px 0 0;
}
/* Bild-Klon in der Pille (Skript Abschnitt 20 legt ihn vor den
   Anleser): Desktop AUS — dort ist das Original im Switcher die
   Vollflächen-Bildbühne. */
.sp-explorer.is-armed .spe-bild { display: none; }

/* Flex-Spalten-Guard (05.10.2026, am Live-Markup verifiziert):
   Die YooTheme-Grid-Spalte um den Explorer ist ein Flex-Item mit
   min-width:auto — das ~1800px breite Panelbild drückte darüber die
   Mindestbreite der Spalte über den Viewport hinaus, Pillen und Bild
   liefen rechts aus dem Schirm. min-width:0 kappt diese Kopplung. */
.uk-grid > *:has(.sp-explorer) { min-width: 0; }

/* SEITENWEITE Schutzkappe (05.10.2026): UIkits feste Breitenklassen
   (uk-width-medium/large/xlarge … = 300–600px FIX, ohne max-width)
   sprengen auf schmalen Phones den Viewport — im One-Connected-
   Abschnitt stand z. B. das Intro-Panel mit uk-width-xlarge (600px).
   Auf Prozentbreiten (uk-width-1-1 …) ist max-width:100% ein No-op,
   die Kappe ist also gefahrlos global. */
@media (max-width: 959px) {
    [class*="uk-width-"] { max-width: 100%; }
}

/* ---- Mobil: Bild steht für sich, Text darunter (05.10.2026) ----
   Vorher lagen die Pillen als Overlay über dem Bild (Verlauf von
   unten) — auf schmalen Screens lief die geöffnete Box rechts aus
   der Tafel und zweizeilige Labels wurden vom 32px-Kopf-Limit
   geklippt. Jetzt: Bild als eigener Block oben (eigene Rundung),
   Pillen-Liste im normalen Fluss darunter — die Tafel wächst mit
   dem Inhalt, nichts überlappt, nichts wird abgeschnitten. */
@media (max-width: 959px) {
    .sp-explorer.is-armed {
        display: block;
        max-width: 100%;
        aspect-ratio: auto;
        min-height: 0;
        border-radius: 20px;
        padding: 16px;
    }
    .sp-explorer.is-armed::before { display: none; }   /* kein Verlauf nötig */
    /* Die Desktop-Bildbühne ist mobil KOMPLETT aus — das Motiv steckt
       als Klon in der geöffneten Pille (spe-bild, Abschnitt 20).
       Nebenbei verschwindet damit auch das 1800px-Bild aus der
       Mindestbreiten-Rechnung der Grid-Spalte (siehe Guard oben). */
    .sp-explorer.is-armed .uk-switcher { display: none; }
    .sp-explorer.is-armed .el-nav > li > a { width: 100%; }
    /* Labels dürfen mobil zweizeilig umbrechen (Basis-Limit 32px
       deckt nur eine Zeile — das klippte z. B. „dokumentieren") */
    .sp-explorer.is-armed .spe-kopf { max-height: 48px; }
    /* Bild in der geöffneten Pille, ÜBER der Headline. Das Bild liegt
       ABSOLUT in der Ratio-Box: absolut Positioniertes trägt nichts
       zur Mindestbreite bei — der große Klon kann die Spalte nie
       aufdrücken, und die Boxhöhe steht schon vor dem Bild-Load. */
    .sp-explorer.is-armed .spe-bild {
        display: block;
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        border-radius: 12px;
        margin: 2px 0 14px;
    }
    .sp-explorer.is-armed .spe-bild picture,
    .sp-explorer.is-armed .spe-bild img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
    }
}

/* ---- Reduzierte Bewegung: Zustände schalten ohne Übergang ---- */
@media (prefers-reduced-motion: reduce) {
    .sp-explorer.is-armed .el-nav > li > a,
    .sp-explorer.is-armed .spe-kopf,
    .sp-explorer.is-armed .spe-label,
    .sp-explorer.is-armed .spe-text,
    .sp-explorer.is-armed .spe-text-inhalt { transition: none; }
}


/* =========================================================================
   MOBILNAV — mobiles Offcanvas-Menü im Marken-Look + Verhaltens-Fixes
   YooThemes mobiles Header-Menü (#tm-dialog-mobile) rendert als weißes
   UIkit-Default — hier bekommt es die Ink-Fläche der Marke (passt zur
   dunklen GEN-X8-Seite wie zum Ink-Footer der Hauptseite), große
   Touch-Ziele mit Haarlinien und Orange als Aktiv-Signal (den
   Aktiv-Zustand pflegt das uk-scrollspy-nav des Menüs selbst).

   Das zugehörige Skript (functions.php Abschnitt 21) behebt die
   eigentlichen Funktionslöcher des Mobilmenüs:
   · Tap auf einen ANKER-Link schließt das Menü — UIkit lässt das
     Offcanvas bei Same-Page-Links sonst offen stehen und die Seite
     scrollt unsichtbar dahinter („Menü reagiert nicht").
   · Der Offen-Zustand wird als Body-Klasse gemeldet (sp-menue-offen)
     — der Kontakt-FAB (z-index 9980) läge sonst ÜBER dem Menü.
   · Doppelte Protokolle in Menü-Links (https://https://…, Tippfehler
     aus dem Builder) werden als Notnagel repariert — die Quelle im
     Menü trotzdem korrigieren.

   Zusätzlich wird der MOBIL-HEADER selbst zum GLAS-OVERLAY — aber nur
   dort, wo auch der Desktop-Header über dem Inhalt liegt (YooTheme-
   Einstellung tm-header-overlay, z. B. GEN X8): :has() koppelt beide.
   Der Inhalt rutscht hinter die fixierte Glasleiste, Logo wechselt
   auf die weiße Variante, der Burger wird weiß. Seiten OHNE
   Overlay-Header (helle Hauptseite) bleiben unangetastet.

   Keine Aktivierungsklasse — greift überall, wo der YooTheme-
   Mobilheader sein #tm-dialog-mobile rendert. Die ID schlägt jede
   Theme-Spezifität, egal in welcher Reihenfolge geladen wird.
   ========================================================================= */

/* ---- Mobil-Header als Glas-Overlay (nur bei Overlay-Desktop-Header).
   Schwebt als PILL-Leiste mit Randabstand über dem Hero — dieselbe
   Formensprache wie die Desktop-Navbar (design.md 4.1: transparente
   Navbar, Radius 100px). */
body:has(.tm-header-overlay) .tm-header-mobile {
    position: fixed;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 980;              /* über dem Inhalt, unter Offcanvas (1000)
                                  und Kontakt-FAB (9980) */
}
body:has(.tm-header-overlay) .tm-header-mobile .uk-navbar-container {
    background: rgba(8, 10, 14, .55);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 100px;
    overflow: hidden;          /* Inhalt an die Rundung clippen */
    padding: 0 10px;
}
/* Auf dem dunklen Glas: weiße Logo-Variante und weißer Burger */
body:has(.tm-header-overlay) .tm-header-mobile .uk-logo > img:not(.uk-logo-inverse) {
    display: none;
}
body:has(.tm-header-overlay) .tm-header-mobile .uk-logo > img.uk-logo-inverse {
    display: inline-block;
}
body:has(.tm-header-overlay) .tm-header-mobile .uk-navbar-toggle {
    color: #fff;
}
body:has(.tm-header-overlay) .tm-header-mobile .uk-navbar-toggle:hover {
    color: #ef7d00;
}

#tm-dialog-mobile .uk-offcanvas-bar {
    background: #0c0f12;
    color: rgba(255, 255, 255, .85);
    width: min(86vw, 360px);
    padding: 76px 26px calc(28px + env(safe-area-inset-bottom, 0px));
}
#tm-dialog-mobile .uk-offcanvas-close {
    top: 20px;
    right: 20px;
    color: rgba(255, 255, 255, .8);
}
#tm-dialog-mobile .uk-offcanvas-close:hover { color: #ef7d00; }

/* Navigation: große Touch-Ziele, Haarlinien, Orange als Aktiv-Punkt */
#tm-dialog-mobile .uk-nav > li > a {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: color .15s ease, padding-left .2s ease;
}
#tm-dialog-mobile .uk-nav > li:first-child > a {
    border-top: 1px solid rgba(255, 255, 255, .08);
}
#tm-dialog-mobile .uk-nav > li > a:hover { color: #fff; }
#tm-dialog-mobile .uk-nav > li.uk-active > a {
    position: relative;
    color: #ef7d00;
    padding-left: 16px;
}
#tm-dialog-mobile .uk-nav > li.uk-active > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #ef7d00;
}

/* Solange das Menü offen ist, tritt der Kontakt-FAB ab — er läge
   sonst über der Offcanvas-Fläche (Body-Klasse setzt Abschnitt 21) */
body.sp-menue-offen .spk-fab {
    opacity: 0;
    transform: scale(.6);
    pointer-events: none;
}