/*
 * sp-module.css: CSS, das bisher als <style>-Block im Body von Modulen und Templates stand.
 * Unveraendert uebernommen (gleiche Regeln, gleiche Reihenfolge), damit das Aussehen gleich bleibt, und jetzt im Kopf
 * vor dem Preset, sodass ein Preset sie ueberschreiben kann. Farbwerte stehen noch fest (Hex/rgb) und sind offen
 * fuer die Umstellung auf Tokens; siehe docs/ im Addon, Abschnitt "Offene Umstellung".
 */

/* ===== Modul Features (frueher <style> im Body, unveraendert uebernommen) ===== */
    /* Dynamische Hover-Farbe für Service-Card Titel */
    .service-card h3 {
        position: relative;
    }

    .service-card.group:hover h3 {
        color: var(--accent-hex, inherit);
    }

/* ===== Modul Galerie (frueher <style> im Body, unveraendert uebernommen) ===== */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Smooth animations */
[x-cloak] { 
    display: none !important; 
}

/* Better hover effects */
img {
    image-rendering: -webkit-optimize-contrast;
}

/* ===== Modul TI-Status (frueher <style> im Body, unveraendert uebernommen) ===== */
.ti-bar { position: relative; }
.ti-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #f8fafc;
    font-size: 12px;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 50;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.ti-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e293b;
}
.ti-bar:hover .ti-tooltip { display: block; }

/* ===== Modul Cookie-Hinweis (frueher <style> im Body, unveraendert uebernommen) ===== */
/* Cookie List - Schlicht & Minimalistisch */
.consent-manager-cookie-list {
    margin: 2rem 0;
}

/* Table Styling */
.consent-manager-cookie-list.table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.consent-manager-cookie-list.table thead tr th {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
}

.consent-manager-cookie-list.table tbody tr {
    border-bottom: 1px solid #e5e7eb;
}

.consent-manager-cookie-list.table tbody tr td {
    padding: 0.75rem;
    font-size: 0.875rem;
    color: #4b5563;
}

.consent-manager-cookie-list.table tbody tr td:first-child {
    font-weight: 500;
    color: #111827;
}

/* Definition List Styling */
.consent-manager-cookie-list dt.consent-group-name {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}

.consent-manager-cookie-list dt.consent-group-name:first-child {
    margin-top: 0;
}

.consent-manager-cookie-list dd.consent-group-description {
    margin: 0 0 1.5rem 0;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
}

.consent-manager-cookie-list dt.consent-cookie-name {
    margin-top: 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #111827;
}

.consent-manager-cookie-list dd.consent-cookie-details {
    margin: 0.25rem 0 0 0;
    padding-left: 1rem;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
}

.consent-manager-cookie-list dd.consent-cookie-details strong {
    color: #374151;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .consent-manager-cookie-list.table {
        display: block;
        overflow-x: auto;
    }
    
    .consent-manager-cookie-list.table thead tr th,
    .consent-manager-cookie-list.table tbody tr td {
        padding: 0.5rem;
        font-size: 0.8125rem;
    }
}

/* ===== Template Floating Button (frueher <style> im Body, unveraendert uebernommen) ===== */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}


    

/* ===== Template Default (Slider Header): Ken Burns (frueher <style> im Body, unveraendert uebernommen) ===== */
@keyframes kenBurns {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.1); }
}

/* ===== Template Modul auflistung: Sprungleiste (frueher <style> im Body, unveraendert uebernommen) ===== */
    /* Sticky Navigation Styling */
    #preview-nav-container {
        position: sticky;
        top: 0;
        z-index: 40;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
        backdrop-filter: blur(10px);
        border-bottom: 2px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    #preview-nav {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 0;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding: 0 1rem;
    }

    #preview-nav li {
        flex-shrink: 0;
    }

    #preview-nav a {
        display: block;
        padding: 1rem 1.5rem;
        text-decoration: none;
        color: #666;
        font-weight: 500;
        font-size: 0.95rem;
        border-bottom: 3px solid transparent;
        transition: all 0.3s ease;
        position: relative;
        white-space: nowrap;
    }

    #preview-nav a:hover {
        color: var(--primary, #2563eb);
        background-color: rgba(37, 99, 235, 0.05);
    }

    /* Active state */
    #preview-nav a.active {
        color: var(--primary, #2563eb);
        border-bottom-color: var(--primary, #2563eb);
        font-weight: 600;
        background: linear-gradient(to bottom, rgba(37, 99, 235, 0.05), transparent);
    }

    #preview-nav a.active::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary, #2563eb);
        animation: slideIn 0.3s ease;
    }

    @keyframes slideIn {
        from {
            width: 0;
            left: 50%;
        }
        to {
            width: 100%;
            left: 0;
        }
    }

    /* Module Styling
       Der frühere Hervorhebungseffekt am aktiven Modul ist entfernt: er wechselte
       beim Scrollen zwischen "padding: 2rem 0" und "padding: 2rem" und schob den
       Inhalt dabei seitlich weg. Genau das machte es unmöglich zu beurteilen,
       ob ein Modul die richtigen Abstände hat - man sah die Verschiebung des
       Effekts, nicht die des Moduls. */
    .module-wrapper {
        padding: 2rem 0;
    }

    /* ── Raster-Kontrolle ──────────────────────────────────────────────────
       Blendet zwei senkrechte rote Linien über die ganze Seite ein, genau dort,
       wo die Inhaltskante eines korrekten Moduls liegen muss. Die Linien sitzen
       in einem Element mit denselben Klassen wie ein Modul-Container, wandern
       also bei jedem Breakpoint automatisch mit.
       Module, deren Inhalt nicht auf der Linie sitzt, sind sofort erkennbar. */
    #sp-raster {
        position: fixed;
        inset: 0;
        z-index: 9998;
        pointer-events: none;
        display: none;
    }

    body.sp-raster-on #sp-raster {
        display: block;
    }

    #sp-raster .sp-raster-inner {
        height: 100%;
        border-left: 1px solid rgba(220, 38, 38, 0.9);
        border-right: 1px solid rgba(220, 38, 38, 0.9);
    }

    body.sp-raster-on .module-wrapper {
        outline: 1px dashed rgba(220, 38, 38, 0.35);
        outline-offset: -1px;
    }

    /* Abweichler kräftiger markieren */
    body.sp-raster-on .module-wrapper[data-raster="abweichung"] {
        outline: 2px solid rgba(220, 38, 38, 0.9);
        background: rgba(220, 38, 38, 0.04);
    }

    .sp-raster-badge {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999;
        font: 600 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
        padding: 0 6px;
        border-radius: 0 0 4px 0;
        color: #fff;
        pointer-events: none;
        display: none;
    }

    body.sp-raster-on .sp-raster-badge {
        display: block;
    }

    .sp-raster-badge[data-ok="1"] { background: #16a34a; }
    .sp-raster-badge[data-ok="0"] { background: #dc2626; }
    .sp-raster-badge[data-ok="2"] { background: #6b7280; }

    #sp-raster-toggle {
        position: fixed;
        left: 1.5rem;
        bottom: 1.5rem;
        z-index: 10000;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1rem;
        border: 0;
        border-radius: 9999px;
        background: #1f2937;
        color: #fff;
        font: 600 13px/1 system-ui, sans-serif;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    }

    #sp-raster-toggle[aria-pressed="true"] {
        background: #dc2626;
    }

/* ===== Scrollleiste in PopUp und Veranstaltungen (frueher Inline-Stil) ===== */
[data-sp-scrollbar] { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; }

/* ===== Modul Karussell (frueher <style> mit Instanz-Id, jetzt Klasse) ===== */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% / 3));
    }
}

.sp-karussell .carousel-track:hover {
    animation-play-state: paused;
}

/* Smooth fade effect */
.sp-karussell {
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* ===== Modul Leistung mit Symbolen (frueher <style>; der Schalter "Karten-Hover" ist jetzt die Klasse services-card--verlauf) ===== */
    .services-section {
    }

    .services-card {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
        backdrop-filter: blur(10px);
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .services-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.5s ease;
        z-index: 0;
    }

    .services-card:hover::before {
        opacity: 1;
    }

    .services-card:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    .services-card:hover .service-icon {
        transform: scale(1.15) rotate(5deg);
    }

    .services-card:hover .service-icon i {
        color: white;
    }


    .service-icon {
        position: relative;
        z-index: 10;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .service-content {
        position: relative;
        z-index: 10;
        transition: color 0.3s ease;
    }

    /* Animated Background Pattern */
    .services-bg-pattern {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0.03;
        z-index: 0;
        background-image: 
            radial-gradient(circle at 20% 50%, var(--primary) 1px, transparent 1px),
            radial-gradient(circle at 80% 80%, var(--secondary) 1px, transparent 1px);
        background-size: 50px 50px;
        animation: patternMove 20s linear infinite;
    }


    @keyframes patternMove {
        0% {
            background-position: 0 0, 25px 25px;
        }
        100% {
            background-position: 50px 50px, 75px 75px;
        }
    }

    /* Staggered Animation */
    .services-card {
        animation: fadeInUp 0.6s ease-out backwards;
    }

    .services-card:nth-child(1) { animation-delay: 0.1s; }
    .services-card:nth-child(2) { animation-delay: 0.2s; }
    .services-card:nth-child(3) { animation-delay: 0.3s; }
    .services-card:nth-child(4) { animation-delay: 0.4s; }
    .services-card:nth-child(5) { animation-delay: 0.5s; }
    .services-card:nth-child(6) { animation-delay: 0.6s; }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Icon Pulse Effect */
    .service-icon-bg {
        position: absolute;
        inset: 0;
        border-radius: 1rem;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        opacity: 0.15;
        transition: all 0.5s ease;
    }

    .services-card:hover .service-icon-bg {
        opacity: 0.25;
        transform: scale(1.1);
    }
.services-card--verlauf::before { background: linear-gradient(135deg, var(--primary), var(--secondary)); }
    /* Beim Hover legt sich der Verlauf ueber die Karte, der Text muss weiss
       werden. Ein blosses color am Elternteil reicht nicht: h3 und p bringen
       eine eigene Farbe mit - die Tailwind-Klasse text-[color:var(--sp-p-slate-600)] und beim
       farbigen Symbol ein inline style am h3. Beide schlagen geerbtes color,
       der inline style sogar jede normale Regel. Deshalb beide Elemente
       einzeln und mit !important. */
    .services-card--verlauf:hover .service-content,
    .services-card--verlauf:hover .service-content h3,
    .services-card--verlauf:hover .service-content p {
        color: white !important;
    }

/* ===== Dunkler Ueberzug (Kontaktformular auf Bildgrund) ===== */
.sp-ueberzug { background: rgba(2, 6, 23, 0.6); }

/* ===== Modul Konto: HelpCenter (Kartenschatten, frueher Arbitrary Values mit rgba) ===== */
.sp-hc-schatten { box-shadow: 0 8px 24px rgba(25, 28, 30, 0.06); }
.sp-hc-schatten-hover:hover { box-shadow: 0 16px 40px rgba(25, 28, 30, 0.12); }
.sp-hc-schatten-hover-klein:hover { box-shadow: 0 16px 32px rgba(25, 28, 30, 0.12); }

/* ===== Modul Kontaktformular (frueher <style> mit PHP-Zweigen fuer hell/dunkel; jetzt zwei statische Saetze, gewaehlt ueber data-sp-form am Abschnitt) ===== */
/* --- Modul Kontaktformular, Schema hell --- */
:root:has([data-sp-form="kontakt-hell"]) .yform .form-group {
    position: relative;
    margin-bottom: 1.5rem;
}
:root:has([data-sp-form="kontakt-hell"]) .yform label {
    position: absolute;
    left: 1rem;
    top: 1.2rem;
    transition: all 0.3s ease;
    pointer-events: none;
    background: transparent;
    padding: 0 0.5rem;
    font-weight: 500;
    font-size: 1rem;
    z-index: 1;
}
:root:has([data-sp-form="kontakt-hell"]) .yform label {
    color: var(--sp-form-muted);
}
:root:has([data-sp-form="kontakt-hell"]) .contact-input-field {
    background: white;
    border: 2px solid var(--sp-form-border);
    color: var(--sp-form-text);
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--sp-form-shadow) 5%, transparent);
}
:root:has([data-sp-form="kontakt-hell"]) .contact-input-field:focus {
    border-color: var(--accent);
    background: white;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent), 0 1px 3px color-mix(in srgb, var(--sp-form-shadow) 5%, transparent);
}
:root:has([data-sp-form="kontakt-hell"]) .contact-input-field::placeholder {
    color: var(--sp-form-border-strong);
}
:root:has([data-sp-form="kontakt-hell"]) .yform select.contact-input-field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%231e293b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}
:root:has([data-sp-form="kontakt-hell"]) .yform select:not([value=""]) ~ label,
:root:has([data-sp-form="kontakt-hell"]) .yform select:focus ~ label {
    top: -0.7rem;
    left: 0.7rem;
    font-size: 0.875rem;
    color: var(--accent);
    background: white;
}
:root:has([data-sp-form="kontakt-hell"]) .yform .form-group:focus-within label,
:root:has([data-sp-form="kontakt-hell"]) .yform input:not(:placeholder-shown) ~ label,
:root:has([data-sp-form="kontakt-hell"]) .yform textarea:not(:placeholder-shown) ~ label,
:root:has([data-sp-form="kontakt-hell"]) .yform select:not([value=""]) ~ label {
    top: -0.7rem;
    left: 0.7rem;
    font-size: 0.875rem;
}
:root:has([data-sp-form="kontakt-hell"]) .yform .form-group.has-value label,
:root:has([data-sp-form="kontakt-hell"]) .yform .form-group:focus-within label {
    top: -0.7rem;
    left: 0.7rem;
    font-size: 0.875rem;
}
:root:has([data-sp-form="kontakt-hell"]) .yform .has-error .contact-input-field,
:root:has([data-sp-form="kontakt-hell"]) .yform .has-error input,
:root:has([data-sp-form="kontakt-hell"]) .yform .has-error textarea,
:root:has([data-sp-form="kontakt-hell"]) .yform .has-error select {
    border-color: var(--sp-form-error-line);
}
:root:has([data-sp-form="kontakt-hell"]) .yform .has-error .contact-input-field,
:root:has([data-sp-form="kontakt-hell"]) .yform .has-error input,
:root:has([data-sp-form="kontakt-hell"]) .yform .has-error textarea,
:root:has([data-sp-form="kontakt-hell"]) .yform .has-error select {
    background: color-mix(in srgb, var(--sp-form-error-line) 5%, transparent);
}
:root:has([data-sp-form="kontakt-hell"]) .yform .help-block {
    color: var(--sp-form-error);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
:root:has([data-sp-form="kontakt-hell"]) .alert.alert-danger {
        background: color-mix(in srgb, var(--sp-form-error-line) 5%, transparent);
    border: 1px solid var(--sp-form-error-border);
    color: var(--sp-form-error);
        padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}
:root:has([data-sp-form="kontakt-hell"]) .alert.alert-danger ul {
    margin: 0;
    padding-left: 1.5rem;
    list-style: disc;
}
:root:has([data-sp-form="kontakt-hell"]) .alert.alert-danger li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}
:root:has([data-sp-form="kontakt-hell"]) .alert.alert-danger li:last-child {
    margin-bottom: 0;
}
:root:has([data-sp-form="kontakt-hell"]) .yform button[type="submit"],
:root:has([data-sp-form="kontakt-hell"]) .yform input[type="submit"] {
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
        background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 20%, transparent);
        font-weight: 600;
    font-size: 1.125rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    position: relative;
}
:root:has([data-sp-form="kontakt-hell"]) .yform button[type="submit"]:hover,
:root:has([data-sp-form="kontakt-hell"]) .yform input[type="submit"]:hover {
    transform: translateY(-2px);
        box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 30%, transparent);
    }
:root:has([data-sp-form="kontakt-hell"]) .yform button[type="submit"]:active,
:root:has([data-sp-form="kontakt-hell"]) .yform input[type="submit"]:active {
    transform: translateY(0);
}
:root:has([data-sp-form="kontakt-hell"]) .yform button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
:root:has([data-sp-form="kontakt-hell"]) .contact-input-field:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
:root:has([data-sp-form="kontakt-hell"]) .contact-checkmark {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: draw 0.5s ease forwards 0.3s;
}
@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}
:root:has([data-sp-form="kontakt-hell"]) .privacy-notice {
    font-size: 0.875rem;
    text-align: center;
    margin-top: 1.5rem;
        color: var(--sp-form-muted);
    }
:root:has([data-sp-form="kontakt-hell"]) .privacy-notice a {
    color: var(--primary);
    text-decoration: underline;
}
:root:has([data-sp-form="kontakt-hell"]) .privacy-notice a:hover {
    color: var(--accent);
}
:root:has([data-sp-form="kontakt-hell"]) .yform {
    position: relative;
}
:root:has([data-sp-form="kontakt-hell"]) .yform .form-group {
    position: relative;
}
:root:has([data-sp-form="kontakt-hell"]) .yform input,
:root:has([data-sp-form="kontakt-hell"]) .yform textarea,
:root:has([data-sp-form="kontakt-hell"]) .yform select {
    width: 100%;
}


/* --- Modul Kontaktformular, Schema dunkel --- */
:root:has([data-sp-form="kontakt-dunkel"]) .yform .form-group {
    position: relative;
    margin-bottom: 1.5rem;
}
:root:has([data-sp-form="kontakt-dunkel"]) .yform label {
    position: absolute;
    left: 1rem;
    top: 1.2rem;
    transition: all 0.3s ease;
    pointer-events: none;
    background: transparent;
    padding: 0 0.5rem;
    font-weight: 500;
    font-size: 1rem;
    z-index: 1;
}
:root:has([data-sp-form="kontakt-dunkel"]) .yform label {
    color: color-mix(in srgb, var(--sp-form-on-dark) 60%, transparent);
}
:root:has([data-sp-form="kontakt-dunkel"]) .contact-input-field {
    background: color-mix(in srgb, var(--sp-form-on-dark) 10%, transparent);
    border: 2px solid color-mix(in srgb, var(--sp-form-on-dark) 20%, transparent);
    color: white;
    outline: none;
    transition: all 0.3s ease;
}
:root:has([data-sp-form="kontakt-dunkel"]) .contact-input-field:focus {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--sp-form-on-dark) 15%, transparent);
}
:root:has([data-sp-form="kontakt-dunkel"]) .contact-input-field::placeholder {
    color: transparent;
}
:root:has([data-sp-form="kontakt-dunkel"]) .yform select.contact-input-field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}
:root:has([data-sp-form="kontakt-dunkel"]) .yform select:not([value=""]) ~ label,
:root:has([data-sp-form="kontakt-dunkel"]) .yform select:focus ~ label {
    top: -0.7rem;
    left: 0.7rem;
    font-size: 0.875rem;
    color: var(--accent);
    background: var(--sp-form-text);
}
:root:has([data-sp-form="kontakt-dunkel"]) .yform .form-group:focus-within label,
:root:has([data-sp-form="kontakt-dunkel"]) .yform input:not(:placeholder-shown) ~ label,
:root:has([data-sp-form="kontakt-dunkel"]) .yform textarea:not(:placeholder-shown) ~ label,
:root:has([data-sp-form="kontakt-dunkel"]) .yform select:not([value=""]) ~ label {
    top: -0.7rem;
    left: 0.7rem;
    font-size: 0.875rem;
}
:root:has([data-sp-form="kontakt-dunkel"]) .yform .form-group.has-value label,
:root:has([data-sp-form="kontakt-dunkel"]) .yform .form-group:focus-within label {
    top: -0.7rem;
    left: 0.7rem;
    font-size: 0.875rem;
}
:root:has([data-sp-form="kontakt-dunkel"]) .yform .has-error .contact-input-field,
:root:has([data-sp-form="kontakt-dunkel"]) .yform .has-error input,
:root:has([data-sp-form="kontakt-dunkel"]) .yform .has-error textarea,
:root:has([data-sp-form="kontakt-dunkel"]) .yform .has-error select {
    border-color: var(--sp-form-error-line);
}
:root:has([data-sp-form="kontakt-dunkel"]) .yform .has-error .contact-input-field,
:root:has([data-sp-form="kontakt-dunkel"]) .yform .has-error input,
:root:has([data-sp-form="kontakt-dunkel"]) .yform .has-error textarea,
:root:has([data-sp-form="kontakt-dunkel"]) .yform .has-error select {
    background: color-mix(in srgb, var(--sp-form-error-line) 10%, transparent);
}
:root:has([data-sp-form="kontakt-dunkel"]) .yform .help-block {
    color: var(--sp-form-error-hell);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
:root:has([data-sp-form="kontakt-dunkel"]) .alert.alert-danger {
        background: color-mix(in srgb, var(--sp-form-error-line) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--sp-form-error-line) 30%, transparent);
    color: var(--sp-form-error-hell);
        padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}
:root:has([data-sp-form="kontakt-dunkel"]) .alert.alert-danger ul {
    margin: 0;
    padding-left: 1.5rem;
    list-style: disc;
}
:root:has([data-sp-form="kontakt-dunkel"]) .alert.alert-danger li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}
:root:has([data-sp-form="kontakt-dunkel"]) .alert.alert-danger li:last-child {
    margin-bottom: 0;
}
:root:has([data-sp-form="kontakt-dunkel"]) .yform button[type="submit"],
:root:has([data-sp-form="kontakt-dunkel"]) .yform input[type="submit"] {
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
        background: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
    color: white;
    box-shadow: 0 10px 25px color-mix(in srgb, var(--accent) 30%, transparent);
        font-weight: 600;
    font-size: 1.125rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    position: relative;
}
:root:has([data-sp-form="kontakt-dunkel"]) .yform button[type="submit"]:hover,
:root:has([data-sp-form="kontakt-dunkel"]) .yform input[type="submit"]:hover {
    transform: translateY(-2px);
        box-shadow: 0 20px 40px color-mix(in srgb, var(--accent) 40%, transparent);
    }
:root:has([data-sp-form="kontakt-dunkel"]) .yform button[type="submit"]:active,
:root:has([data-sp-form="kontakt-dunkel"]) .yform input[type="submit"]:active {
    transform: translateY(0);
}
:root:has([data-sp-form="kontakt-dunkel"]) .yform button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
:root:has([data-sp-form="kontakt-dunkel"]) .contact-input-field:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
:root:has([data-sp-form="kontakt-dunkel"]) .contact-checkmark {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: draw 0.5s ease forwards 0.3s;
}
@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}
:root:has([data-sp-form="kontakt-dunkel"]) .privacy-notice {
    font-size: 0.875rem;
    text-align: center;
    margin-top: 1.5rem;
        color: color-mix(in srgb, var(--sp-form-on-dark) 60%, transparent);
    }
:root:has([data-sp-form="kontakt-dunkel"]) .privacy-notice a {
    color: var(--sp-form-on-dark);
    text-decoration: underline;
}
:root:has([data-sp-form="kontakt-dunkel"]) .privacy-notice a:hover {
    color: var(--accent);
}
:root:has([data-sp-form="kontakt-dunkel"]) .yform {
    position: relative;
}
:root:has([data-sp-form="kontakt-dunkel"]) .yform .form-group {
    position: relative;
}
:root:has([data-sp-form="kontakt-dunkel"]) .yform input,
:root:has([data-sp-form="kontakt-dunkel"]) .yform textarea,
:root:has([data-sp-form="kontakt-dunkel"]) .yform select {
    width: 100%;
}


/* ===== Modul Formbuilder (frueher <style> mit PHP-Zweigen fuer hell/dunkel; jetzt zwei statische Saetze, gewaehlt ueber data-sp-form am Abschnitt) ===== */
/* --- Modul Formbuilder, Schema hell --- */
:root:has([data-sp-form="builder-hell"]) .yform .form-group {
    position: relative;
    margin-bottom: 1.5rem;
}
:root:has([data-sp-form="builder-hell"]) .yform .control-label {
    position: absolute;
    left: 1rem;
    top: 1.2rem;
    transition: all 0.3s ease;
    pointer-events: none;
    background: transparent;
    padding: 0 0.5rem;
    font-weight: 500;
    font-size: 1rem;
    z-index: 1;
}
:root:has([data-sp-form="builder-hell"]) .yform legend {
    color: var(--sp-form-text);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    }
:root:has([data-sp-form="builder-hell"]) .yform .checkbox label {
    display: block;
    width: 100%;
}
:root:has([data-sp-form="builder-hell"]) .yform .checkbox input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    max-width: 15px;
    margin-right: 0.5em;
}
:root:has([data-sp-form="builder-hell"]) .yform .checkbox label a {
    text-decoration: underline;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}
:root:has([data-sp-form="builder-hell"]) .yform label { color: var(--sp-form-muted); }
:root:has([data-sp-form="builder-hell"]) .contact-input-field {
    background: white;
    border: 2px solid var(--sp-form-border);
    color: var(--sp-form-text);
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--sp-form-shadow) 5%, transparent);
}
:root:has([data-sp-form="builder-hell"]) .contact-input-field:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-form-focus) 10%, transparent), 0 1px 3px color-mix(in srgb, var(--sp-form-shadow) 5%, transparent);
}
:root:has([data-sp-form="builder-hell"]) .yform select.contact-input-field {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%231e293b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    appearance: none;
}
:root:has([data-sp-form="builder-hell"]) .yform .input-group-btn {
    display: none;
}
:root:has([data-sp-form="builder-hell"]) .contact-input-field::placeholder { color: transparent; }
:root:has([data-sp-form="builder-hell"]) .yform altcha-widget {
    display: block;
    margin-bottom: 1.5rem;
    --altcha-max-width: 100%;
    --altcha-border-width: 2px;
    --altcha-border-radius: 0.75rem;
    --altcha-color-base: var(--sp-form-bg);
    --altcha-color-border: var(--sp-form-border);
    --altcha-color-border-focus: var(--accent);
    --altcha-color-text: var(--sp-form-text);
    --altcha-color-active: var(--accent);
    --altcha-color-footer-bg: transparent;
    --altcha-color-error-text: var(--sp-form-error);
}
:root:has([data-sp-form="builder-hell"]) .yform .form-group:focus-within label,
:root:has([data-sp-form="builder-hell"]) .yform input:not(:placeholder-shown) ~ label,
:root:has([data-sp-form="builder-hell"]) .yform textarea:not(:placeholder-shown) ~ label {
    top: -0.7rem;
    left: 0.7rem;
    font-size: 0.875rem;
    color: var(--accent);
    background: white;
}
:root:has([data-sp-form="builder-hell"]) .yform .form-group.has-value label,
:root:has([data-sp-form="builder-hell"]) .yform .form-group:focus-within label {
    top: -0.7rem;
    left: 0.7rem;
    font-size: 0.875rem;
}
:root:has([data-sp-form="builder-hell"]) .yform .has-error .contact-input-field,
:root:has([data-sp-form="builder-hell"]) .yform .has-error input,
:root:has([data-sp-form="builder-hell"]) .yform .has-error textarea,
:root:has([data-sp-form="builder-hell"]) .yform .has-error select {
    border-color: var(--sp-form-error-line);
    background: color-mix(in srgb, var(--sp-form-error-line) 5%, transparent);
}
:root:has([data-sp-form="builder-hell"]) .yform .help-block {
    color: var(--sp-form-error);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
:root:has([data-sp-form="builder-hell"]) .alert.alert-success {
    background: color-mix(in srgb, var(--sp-form-ok-line) 8%, transparent);
    border: 1px solid var(--sp-form-ok-border);
    color: var(--sp-form-ok);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}
:root:has([data-sp-form="builder-hell"]) .alert.alert-danger {
    background: color-mix(in srgb, var(--sp-form-error-line) 5%, transparent);
    border: 1px solid var(--sp-form-error-border);
    color: var(--sp-form-error);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}
:root:has([data-sp-form="builder-hell"]) .alert.alert-danger ul { margin: 0; padding-left: 1.5rem; list-style: disc; }
:root:has([data-sp-form="builder-hell"]) .alert.alert-danger li { margin-bottom: 0.5rem; }
:root:has([data-sp-form="builder-hell"]) .yform button[type="submit"],
:root:has([data-sp-form="builder-hell"]) .yform input[type="submit"] {
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--sp-form-focus) 20%, transparent);
    font-weight: 600;
    font-size: 1.125rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}
:root:has([data-sp-form="builder-hell"]) .yform button[type="submit"]:hover,
:root:has([data-sp-form="builder-hell"]) .yform input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--sp-form-focus) 30%, transparent);
}
:root:has([data-sp-form="builder-hell"]) .yform button[type="submit"]:active,
:root:has([data-sp-form="builder-hell"]) .yform input[type="submit"]:active { transform: translateY(0); }
:root:has([data-sp-form="builder-hell"]) .yform input,
:root:has([data-sp-form="builder-hell"]) .yform textarea,
:root:has([data-sp-form="builder-hell"]) .yform select { width: 100%; }
:root:has([data-sp-form="builder-hell"]) .form-required {
    margin-top: 0.5rem;
    color: var(--sp-form-muted);
    font-size: 0.875rem;
}


/* --- Modul Formbuilder, Schema dunkel --- */
:root:has([data-sp-form="builder-dunkel"]) .yform .form-group {
    position: relative;
    margin-bottom: 1.5rem;
}
:root:has([data-sp-form="builder-dunkel"]) .yform .control-label {
    position: absolute;
    left: 1rem;
    top: 1.2rem;
    transition: all 0.3s ease;
    pointer-events: none;
    background: transparent;
    padding: 0 0.5rem;
    font-weight: 500;
    font-size: 1rem;
    z-index: 1;
}
:root:has([data-sp-form="builder-dunkel"]) .yform legend {
    color: color-mix(in srgb, var(--sp-form-on-dark) 80%, transparent);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    }
:root:has([data-sp-form="builder-dunkel"]) .yform .checkbox label {
    display: block;
    width: 100%;
}
:root:has([data-sp-form="builder-dunkel"]) .yform .checkbox input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    max-width: 15px;
    margin-right: 0.5em;
}
:root:has([data-sp-form="builder-dunkel"]) .yform .checkbox label a {
    text-decoration: underline;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}
:root:has([data-sp-form="builder-dunkel"]) .yform .control-label { color: color-mix(in srgb, var(--sp-form-on-dark) 60%, transparent); }
:root:has([data-sp-form="builder-dunkel"]) .contact-input-field {
    background: color-mix(in srgb, var(--sp-form-on-dark) 10%, transparent);
    border: 2px solid color-mix(in srgb, var(--sp-form-on-dark) 20%, transparent);
    color: white;
    outline: none;
    transition: all 0.3s ease;
}
:root:has([data-sp-form="builder-dunkel"]) .contact-input-field:focus {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--sp-form-on-dark) 15%, transparent);
}
:root:has([data-sp-form="builder-dunkel"]) .yform select.contact-input-field {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    appearance: none;
}
:root:has([data-sp-form="builder-dunkel"]) .contact-input-field::placeholder { color: transparent; }
:root:has([data-sp-form="builder-dunkel"]) .yform altcha-widget {
    display: block;
    margin-bottom: 1.5rem;
    --altcha-max-width: 100%;
    --altcha-border-width: 2px;
    --altcha-border-radius: 0.75rem;
    --altcha-color-base: color-mix(in srgb, var(--sp-form-on-dark) 10%, transparent);
    --altcha-color-border: color-mix(in srgb, var(--sp-form-on-dark) 20%, transparent);
    --altcha-color-border-focus: var(--accent);
    --altcha-color-text: var(--sp-form-bg);
    --altcha-color-active: var(--accent);
    --altcha-color-footer-bg: transparent;
    --altcha-color-error-text: var(--sp-form-error-hell);
}
:root:has([data-sp-form="builder-dunkel"]) .yform .form-group:focus-within label,
:root:has([data-sp-form="builder-dunkel"]) .yform input:not(:placeholder-shown) ~ label,
:root:has([data-sp-form="builder-dunkel"]) .yform textarea:not(:placeholder-shown) ~ label {
    top: -0.7rem;
    left: 0.7rem;
    font-size: 0.875rem;
    color: var(--accent);
    background: var(--sp-form-text);
}
:root:has([data-sp-form="builder-dunkel"]) .yform .form-group.has-value label,
:root:has([data-sp-form="builder-dunkel"]) .yform .form-group:focus-within label {
    top: -0.7rem;
    left: 0.7rem;
    font-size: 0.875rem;
}
:root:has([data-sp-form="builder-dunkel"]) .yform .has-error .contact-input-field,
:root:has([data-sp-form="builder-dunkel"]) .yform .has-error input,
:root:has([data-sp-form="builder-dunkel"]) .yform .has-error textarea,
:root:has([data-sp-form="builder-dunkel"]) .yform .has-error select {
    border-color: var(--sp-form-error-line);
    background: color-mix(in srgb, var(--sp-form-error-line) 10%, transparent);
}
:root:has([data-sp-form="builder-dunkel"]) .yform .help-block {
    color: var(--sp-form-error-hell);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
:root:has([data-sp-form="builder-dunkel"]) .alert.alert-success {
    background: color-mix(in srgb, var(--sp-form-ok-line) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--sp-form-ok-line) 40%, transparent);
    color: var(--sp-form-ok-hell);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}
:root:has([data-sp-form="builder-dunkel"]) .alert.alert-danger {
    background: color-mix(in srgb, var(--sp-form-error-line) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--sp-form-error-line) 30%, transparent);
    color: var(--sp-form-error-hell);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}
:root:has([data-sp-form="builder-dunkel"]) .alert.alert-danger ul { margin: 0; padding-left: 1.5rem; list-style: disc; }
:root:has([data-sp-form="builder-dunkel"]) .alert.alert-danger li { margin-bottom: 0.5rem; }
:root:has([data-sp-form="builder-dunkel"]) .yform button[type="submit"],
:root:has([data-sp-form="builder-dunkel"]) .yform input[type="submit"] {
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--sp-form-focus) 20%, transparent);
    font-weight: 600;
    font-size: 1.125rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}
:root:has([data-sp-form="builder-dunkel"]) .yform button[type="submit"]:hover,
:root:has([data-sp-form="builder-dunkel"]) .yform input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--sp-form-focus) 30%, transparent);
}
:root:has([data-sp-form="builder-dunkel"]) .yform button[type="submit"]:active,
:root:has([data-sp-form="builder-dunkel"]) .yform input[type="submit"]:active { transform: translateY(0); }
:root:has([data-sp-form="builder-dunkel"]) .yform input,
:root:has([data-sp-form="builder-dunkel"]) .yform textarea,
:root:has([data-sp-form="builder-dunkel"]) .yform select { width: 100%; }
:root:has([data-sp-form="builder-dunkel"]) .form-required {
    margin-top: 0.5rem;
    color: var(--sp-form-muted);
    font-size: 0.875rem;
}


/* ===== Modul Pop-up: Karte mit Rand, dvh, Scroller =====
   Das Pop-up sitzt per x-teleport unter <body>. Es bleibt auch auf dem Handy eine Karte mit Abstand zum Rand:
   die abgedunkelte Seite dahinter bleibt sichtbar (Klick darauf schliesst). dvh = sichtbare Hoehe ohne Adressleiste (iOS);
   vh steht davor als Rueckfall. */
.sp-pp-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
    height: 100vh;
    height: 100dvh;
    overscroll-behavior: contain;
}
.sp-pp-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 64rem;
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    overflow: hidden;
    border-radius: var(--radius-card);
}
.sp-pp-scroller {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
/* Schliessen-Knopf sitzt am Dialog, nicht im Scroller: bleibt oben sichtbar. */
.sp-pp-close {
    top: 0.75rem;
    right: 0.75rem;
}
.sp-pp-bild-kopf,
.sp-pp-bild-seite {
    max-height: 45vh;
    max-height: 45dvh;
}
@media (min-width: 768px) {
    .sp-pp-overlay {
        padding: 1.5rem;
    }
    .sp-pp-dialog {
        max-height: 94vh;
        max-height: 94dvh;
    }
    .sp-pp-bild-kopf {
        max-height: 62vh;
        max-height: 62dvh;
    }
    .sp-pp-bild-seite {
        max-height: 70vh;
        max-height: 70dvh;
    }
}