/*
Theme Name:   Schneidereit 2026
Theme URI:
Description:  Child-Theme für YooTheme Pro
Author:       REALDOT
Author URI:
Template:     yootheme
Version:      1.7.1
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;
}

/* =========================================================================
   FOOTER — Ink-Look aus dem Startseiten-Konzept v2
   Dunkle Fläche (#14181b) als abgerundeter Rahmen mit Außenabstand,
   weiße Uppercase-Spaltentitel, Links mit Orange-Hover, letzte Sektion
   als abgesetzte Bottom-Bar. Gilt unabhängig vom im Builder gewählten
   Sektionsstil — Inhalte können frei befüllt werden.
   Hinweis: auf der dunklen Fläche die weiße Logo-Variante verwenden
   (SP_Logo_2025-w.svg statt SCHNT_Logo_4c.svg).
   ========================================================================= */

footer {
    display: block;
    margin: 16px;
    border-radius: 28px;
    overflow: hidden;
    background: #14181b;
}

/* Alle Footer-Sektionen liegen transparent auf der Ink-Fläche —
   überschreibt auch den Orange-Verlauf von uk-section-primary */
footer .uk-section {
    background: transparent;
    background-image: none;
    color: rgba(255, 255, 255, .6);
    font-size: 15px;
}
footer .uk-section:first-child {
    padding-top: 72px;
}
/* Jede weitere Sektion wird zur Bottom-Bar: Trennlinie, kompakt, kleiner */
footer .uk-section:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 28px;
    padding-bottom: 32px;
    font-size: 13.5px;
}

/* Überschriften: nur die Farbe (weiß auf der Ink-Fläche nötig) —
   Größe, Schnitt, Laufweite etc. steuert vollständig der YooTheme-Style */
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer .uk-h1, footer .uk-h2, footer .uk-h3, footer .uk-h4,
footer .uk-h5, footer .uk-h6 {
    color: #fff;
}

/* Links: gedeckt, ohne Unterstreichung, Hover in Marken-Orange.
   uk-nav/uk-subnav mit eigener Spezifität explizit mitnehmen. */
footer a,
footer .uk-nav > li > a,
footer .uk-subnav > * > a,
footer .uk-link {
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
    transition: color .15s ease-in-out;
}
footer a:hover,
footer .uk-nav > li > a:hover,
footer .uk-subnav > * > a:hover,
footer .uk-link:hover {
    color: #ef7d00;
    text-decoration: none;
}

/* Listen, Adresse, Muted-Texte */
footer .uk-list > li {
    margin-bottom: 10px;
}
footer address {
    font-style: normal;
    line-height: 1.9;
}
footer .uk-text-muted {
    color: rgba(255, 255, 255, .45) !important; /* UIkit setzt hier selbst !important */
}
footer .uk-icon {
    color: rgba(255, 255, 255, .6);
}
footer a:hover .uk-icon {
    color: #ef7d00;
}

@media (max-width: 640px) {
    footer {
        margin: 10px;
        border-radius: 20px;
    }
    footer .uk-section:first-child {
        padding-top: 56px;
    }
}

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