<style>
        /* ==========================================================================
           0. BASE FONT SIZE (1rem = 10px via 62.5% Trick)
           (Hinweis: html font-size bleibt global, falls das CMS das überschreibt, 
           müssen die rem-Werte ggf. angepasst werden, aber wir lassen es so)
           ========================================================================== */
        html {
            font-size: 62.5%; 
        }

        /* ==========================================================================
           1. DESIGN TOKENS (Scoped to .sps-wrapper statt :root für max. Sicherheit)
           ========================================================================== */
        .sps-wrapper {
            /* Container Definition für Container Queries */
            container-type: inline-size;
            container-name: sps-content-container;
            width: 100%;

            /* Core Colors */
            --color-blue-900: #001342;
            --color-blue-800: #0632ab;
            --color-blue-600: #0047b3;
            --color-blue-100: #e6f0ff;
            --color-green-600: #2e8540;
            --color-gray-50: #f8f9fa;
            --color-gray-100: #f2f4f8;
            --color-gray-200: #e9ecef;
            --color-gray-400: #ced4da;
            --color-gray-500: #7d8899;
            --color-gray-600: #4b5563;
            --color-gray-800: #343a40;
            --color-gray-900: #212529;
            --color-beige-100: #f7f5f0;
            --color-warm-dark:#e0d9c7;
            --color-white: #ffffff;
            --color-orange: #ff8000;

            /* Decision Tokens */
            --bg-primary: var(--color-white);
            --bg-secondary: var(--color-gray-100);
            --bg-tertiary: var(--color-beige-100);
            --text-dark: var(--color-blue-900);
            --text-primary: var(--color-gray-600);
            --text-secondary: var(--color-gray-600); 
            --text-accent: var(--color-blue-800);
            --border-color: var(--color-gray-200);
            --border-warm-dark: var(--color-warm-dark);
            --border-accent: var(--color-blue-800);

            /* Border Tokens */
            --border-width-sm: 1px;
            --border-width-md: 2px;
            --border-width-lg: 4px;
            --border-style-solid: solid;
            --border-style-dashed: dashed;

            /* Typography Tokens */
            --font-family-base: 'Roboto', sans-serif;
            --font-family-heading: 'Roboto Condensed', sans-serif;
            --font-weight-regular: 400;
            --font-weight-medium: 500;
            --font-weight-bold: 700;
            --font-weight-black: 900;

            /* Feste Typografie - Fließtext */
            --text-xs: 1.2rem;   
            --text-sm: 1.4rem;   
            --text-base: 1.6rem; 
            --text-lg: 1.8rem;   
            --text-xl: 2.4rem;   
            
            /* Fluid Typography - Überschriften */
            --text-24: clamp(2.0rem, 2.5vw, 2.4rem); 
            --text-36: clamp(2.6rem, 3vw, 3.6rem);   
            --text-48: clamp(3.2rem, 4vw, 4.8rem);   
            --text-64: clamp(4.0rem, 5vw, 6.4rem);   

            /* Spacing */
            --space-1: clamp(0.4rem, 1vw, 0.8rem);   
            --space-2: clamp(0.8rem, 1.5vw, 1.6rem); 
            --space-3: clamp(1.6rem, 2vw, 2.4rem);   
            --space-4: clamp(2.4rem, 3vw, 3.2rem);   
            --space-6: clamp(3.2rem, 4vw, 4.8rem);   
            --space-8: clamp(4.8rem, 5vw, 6.4rem);   
            --space-12: clamp(6.4rem, 6vw, 9.6rem);  

            /* Radii */
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;

            /* Shadows */
            --shadow-sm: 0 4px 6px rgb(29 30 38 / 10%);
            --shadow-md: 6px 6px 20px rgb(29 30 38 / 5%);
            --shadow-lg: 15px 15px 20px rgb(29 30 38 / 5%);
        }

    /* ==========================================================================
           2. GAMBIO RESET (Scoped to .sps-wrapper)
           ========================================================================== */
   .sps-wrapper.sps-wrapper h1,
        .sps-wrapper.sps-wrapper h2,
        .sps-wrapper.sps-wrapper h3,
        .sps-wrapper.sps-wrapper h4,
        .sps-wrapper.sps-wrapper h5,
        .sps-wrapper.sps-wrapper h6 {
            border-bottom: none;
            padding-bottom: 0;
            margin-top: 0;
            margin-bottom: 8px;
            font-family: var(--font-family-heading);
            font-weight:bold;
        }
   
        /* ==========================================================================
           3. UTILITY & TYPOGRAFIE KLASSEN (Alle mit sps- geprefixt)
           ========================================================================== */

.sps-wrapper{
    display: flex; flex-direction: column; gap: var(--space-12);
}

        .sps-img-responsive { max-width: 100%; height: auto; display: block; }
        .sps-w-full { width: 100%; }
        .sps-h-full { height: 100%; }
        .sps-object-cover { object-fit: cover; }
        .sps-overflow-hidden { overflow: hidden; }
        
        .sps-max-w-padded { max-width: calc(100% - var(--space-8)); }
        
        .sps-flex { display: flex; }
        .sps-flex-col { flex-direction: column; }
        .sps-items-center { align-items: center; }
        .sps-items-start { align-items: flex-start; }
        .sps-justify-between { justify-content: space-between; }
        .sps-justify-center { justify-content: center; }
        .sps-justify-end { justify-content: flex-end; } 
        .sps-gap-1 { gap: var(--space-1); }
        .sps-gap-2 { gap: var(--space-2); }
        .sps-gap-3 { gap: var(--space-3); }
        .sps-gap-4 { gap: var(--space-4); }
        .sps-gap-6 { gap: var(--space-6); }
        .sps-gap-8 { gap: var(--space-8); }

        .sps-grid { display: grid; }
        .sps-grid-cols-1 { grid-template-columns: 1fr; }
        
        /* Layout & Position Utilities */
        .sps-relative { position: relative; }
        .sps-absolute { position: absolute; }
        .sps-left-4 { left: var(--space-4); }
        
        .sps-absolute-bottom-edge {
            position: absolute;
            bottom: 0;
            transform: translateY(50%);
            z-index: 10;
        }
        
        /* Border Utilities */
        .sps-border-l-accent { border-left: var(--border-width-md) var(--border-style-solid) var(--border-accent); }
        .sps-border-l-gray { border-left: var(--border-width-md) var(--border-style-solid) var(--color-gray-400); }
        
        .sps-hidden { display: none !important; }

        .sps-aspect-square-mobile { aspect-ratio: 1 / 1; }
        
 

        /* ==========================================================================
           MARGIN, PADDING & COLORS
           ========================================================================== */
        .sps-mt-1 { margin-top: var(--space-1); }
        .sps-mt-2 { margin-top: var(--space-2); }
        .sps-mt-4 { margin-top: var(--space-4); }
        .sps-mt-6 { margin-top: var(--space-6); }
        .sps-mt-8 { margin-top: var(--space-8); }
        .sps-mt-12 { margin-top: var(--space-12); }
        .sps-mt-auto { margin-top: auto; }
        
        .sps-mb-0 { margin-bottom: 0 !important; }
        .sps-mb-2 { margin-bottom: var(--space-2) !important; }
        .sps-mb-3 { margin-bottom: var(--space-3) !important; }
        .sps-mb-4 { margin-bottom: var(--space-4) !important; }
        .sps-mb-6 { margin-bottom: var(--space-6) !important; }
        .sps-mb-8 { margin-bottom: var(--space-8) !important; }
        .sps-mb-12 { margin-bottom: var(--space-12) !important; }
        
        .sps-p-4 { padding: var(--space-4); }
        .sps-p-6 { padding: var(--space-6); }
        .sps-p-8 { padding: var(--space-8); }
         .sps-pl-2 { padding-left: var(--space-2); }
        .sps-pl-3 { padding-left: var(--space-3); }
        .sps-pl-4 { padding-left: var(--space-4); }
        .sps-pl-6 { padding-left: var(--space-6); }
        .sps-px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
        .sps-px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
        .sps-px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
        .sps-py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
        .sps-py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
        .sps-py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
        
        .sps-text-center { text-align: center; }
        .sps-text-bold { font-weight: var(--font-weight-bold); }
        .sps-underline { text-decoration: underline; }
        
        .sps-text-accent { color: var(--text-accent); }
        .sps-text-dark { color: var(--text-dark); }
        .sps-text-primary { color: var(--text-primary); }
        .sps-text-white { color: var(--color-white); }
        .sps-text-orange { color: var(--color-orange); }
        .sps-text-green { color: var(--color-green-600); }
        
        .sps-text-sm { font-size: var(--text-sm); }
        .sps-text-base { font-size: var(--text-base); }
        .sps-text-lg { font-size: var(--text-lg); letter-spacing: -0.4px;}
        .sps-text-xl { font-size: var(--text-xl); }
        .sps-text-24 {font-size: var(--text-24);font-family: var(--font-family-heading);font-weight: bold;margin-top: 0;}
        .sps-text-36 { font-size: var(--text-36); letter-spacing: -1px;}
        .sps-text-48 {font-size: var(--text-48);letter-spacing: -1.5px;line-height: 1.1;font-weight: bold;margin-top: var(--space-1);font-family: var(--font-family-heading);}
        .sps-text-64 { font-size: var(--text-64); letter-spacing: -2px; }

        .sps-text-secondary { color: var(--color-gray-500); }

        .sps-wrap-balance { text-wrap: balance; }
        
        .sps-leading-tight { line-height: 1.2; }
        .sps-leading-snug { line-height: 1.4; }
        .sps-leading-normal { line-height: 1.6; }
        
        .sps-font-heading { font-family: var(--font-family-heading); }
        .sps-font-base { font-family: var(--font-family-base); }
        
        .sps-uppercase { text-transform: uppercase; letter-spacing: 1px; }

        .sps-subtitle-accent {
            font-family: var(--font-family-heading);
            font-size: var(--text-lg);
            font-weight: var(--font-weight-bold);
            color: var(--text-accent);
            line-height: 1.4;
        }

        .sps-subtitle-dark {
            font-family: var(--font-family-heading);
            font-size: var(--text-lg);
            font-weight: var(--font-weight-bold);
            color: var(--text-dark);
            line-height: 1.4;
        }

        .sps-bg-secondary { background-color: var(--bg-secondary); }
        .sps-bg-tertiary { background-color: var(--bg-tertiary); }
        .sps-bg-white { background-color: var(--color-white); }
        
        .sps-rounded-lg { border-radius: var(--radius-lg); }
        .sps-rounded-md { border-radius: var(--radius-md); }
        .sps-rounded-xl { border-radius: var(--radius-xl); }
        .sps-shadow-sm { box-shadow: var(--shadow-sm); }
        .sps-shadow-md { box-shadow: var(--shadow-md); }
        .sps-shadow-lg { box-shadow: var(--shadow-lg); }

        .sps-heading-legth {
            max-width:30ch;
        }

        /* ==========================================================================
           4. ATOMIC COMPONENTS
           ========================================================================== */
        .sps-badge-green {
            background-color: var(--color-green-600);
            color: var(--color-white);
            padding: var(--space-1) var(--space-3);
            border-radius: var(--radius-sm);
            font-size: var(--text-sm);
            font-weight: var(--font-weight-bold);
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            margin-bottom: var(--space-4);
        }

        .sps-badge-caption {
            background-color: var(--color-blue-800);
            color: var(--color-white);
            font-family: var(--font-family-heading);
            font-size: var(--text-sm);
            font-weight: var(--font-weight-bold);
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: var(--radius-sm);
            padding: 8px 20px;
            text-align: center;
            margin: 0;
        }

        .sps-btn-outline {
            display: inline-block;
            padding: var(--space-1) var(--space-2);
            border: var(--border-width-md) var(--border-style-solid) var(--border-accent);
            color: var(--text-accent);
            background: transparent;
            font-family: var(--font-family-heading);
            font-weight: var(--font-weight-bold);
            border-radius: var(--radius-sm);
            text-decoration: none;
            transition: all 0.2s ease;
            cursor: pointer;
            width: 100%;
            text-align: center;
        }

        .sps-btn-outline:hover {
            background-color: var(--color-blue-100);
        }

        .sps-feature-icon-box {
            background-color: var(--color-beige-100);
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            flex-shrink: 0;
        }

        .sps-icon-box-primary {
            background-color: var(--color-blue-800);
            color: var(--color-white);
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-family-heading);
            font-size: var(--text-24);
            font-weight: var(--font-weight-bold);
            border-radius: var(--radius-sm);
            flex-shrink: 0;
            line-height: 1;
        }

        .sps-icon-check {
            width: 24px;
            height: 24px;
            fill: none;
            stroke: var(--color-blue-800);
            stroke-width: var(--border-width-md);
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .sps-divider {
            height: var(--border-width-lg);
            background-color: var(--color-blue-800);
            width: 100px;
            margin-bottom: var(--space-3);
        }

        .sps-divider-dashed {
            border-top: var(--border-width-sm) var(--border-style-dashed) var(--color-gray-400);
            margin-bottom: var(--space-3);
            width: 100%;
        }

        /* ==========================================================================
           5. MOLECULES & ORGANISMS
           ========================================================================== */
        
        .sps-embed-responsive {
            position: relative;
            display: block;
            width: 100%;
            padding: 0;
        }
        .sps-embed-responsive::before {
            display: block;
            content: "";
        }
        .sps-embed-responsive-16by9::before {
            padding-top: 56.25%;
        }
        .sps-embed-responsive-item,
        .sps-embed-responsive iframe {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        .sps-slider-track {
            display: flex;
            gap: 24px; /* Von Input 1 übernommen */
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; 
            -ms-overflow-style: none; 
            cursor: grab;
            padding-bottom: var(--space-4); 
        }
        
        .sps-slider-track::-webkit-scrollbar {
            display: none; 
        }
        
        .sps-slider-track.sps-dragging {
            scroll-snap-type: none; 
            scroll-behavior: auto !important; 
            cursor: grabbing;
            user-select: none;
            -webkit-user-select: none;
        }

        .sps-slider-track.sps-dragging:active {
            cursor: grabbing;
        }
        
        .sps-slider-track > .sps-card-media-bottom,
        .sps-slider-track > .sps-review-card {
            scroll-snap-align: start;
            flex: 0 0 auto;
            width: 85vw;
            max-width: 360px;
            
        }

 .sps-slider-track > .sps-review-card {
         box-shadow: var(--shadow-md);
        }


        .sps-slider-track > .sps-project-card {
            scroll-snap-align: start;
            flex: 0 0 auto;
            width: 90%;
        }

        .sps-slider-track img, 
        .sps-slider-track svg {
            -webkit-user-drag: none; 
            user-select: none;
        }

        .sps-image-gallery .sps-image {
            width: 100%;
            height: auto;
            object-fit: cover;
            display: block;
            border-radius: var(--radius-md);
        }

        .sps-gallery-buttons {
            position: absolute;
            bottom: var(--space-4);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            background-color: var(--color-gray-200); 
            border-radius: var(--radius-md);
            padding: 4px;
            box-shadow: var(--shadow-md);
            z-index: 10;
        }

        .sps-gallery-buttons button {
            background: transparent;
            border: none;
            cursor: pointer;
            color: var(--text-secondary);
            font-size: var(--text-lg);
            padding: 8px 24px;
            border-radius: var(--radius-sm);
            font-weight: var(--font-weight-bold);
            font-family: var(--font-family-heading);
            transition: all 0.2s ease;
        }

        .sps-gallery-buttons button:hover {
            color: var(--text-dark);
        }

        .sps-gallery-buttons button.sps-active {
            background-color: var(--color-white);
            color: var(--color-orange);
            box-shadow: var(--shadow-sm);
            cursor: default; 
        }

    
    
    
    
        .sps-slider-nav-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            padding: 0;
            font-size: 20px;
            border: var(--border-width-md) var(--border-style-solid) var(--border-accent);
            color: var(--text-accent);
            background: transparent;
            font-family: var(--font-family-heading);
            font-weight: var(--font-weight-bold);
            border-radius: var(--radius-sm);
            text-decoration: none;
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .sps-slider-nav-btn:hover {
            background-color: var(--color-blue-100);
        }
    
    
.btn-outline-secondary {
    border: 2px solid var(--text-accent); /* Hier border statt outline nutzen */
    color: var(--text-dark);
    background-color: transparent; /* Stellt sicher, dass der Hintergrund leer ist */
    border-radius: var(--radius-md);
    text-transform: none;
    font-weight: bold;
    font-size: 16px;
    padding: 1.2rem 2rem;
    display: block;
    transition: all 0.2s ease-in-out;
    cursor: pointer; /* Zeigt den Hand-Cursor beim Drüberfahren */
    text-align: center;
}

.btn-outline-secondary:hover {
    border: 2px solid var(--text-accent);
    color: #fff;
    background-color: var(--text-accent);
    text-decoration: none;
}

/* Klick-Zustand */
.btn-outline-secondary:active {
    background-color: var(--text-accent);
    color: #fff;
    border: 2px solid var(--text-accent);
    transform: scale(0.98);
}

/* Fokus-Zustand (Tastatur-Navigation) */
.btn-outline-secondary:focus-visible {
    outline: 2px solid var(--text-dark);
    outline-offset: 3px;
}

/* Verhindert den unschönen Browser-Standard-Rahmen nach einem reinen Mausklick */
.btn-outline-secondary:focus:not(:focus-visible) {
    outline: none;
}
    
    
    
    
    
    
    
        .sps-produkt-modal-link {
            position: absolute;
            top: var(--space-4);
            left: var(--space-4);
            background-color: var(--color-white);
            color: var(--text-dark);
            text-decoration: none;
            font-weight: var(--font-weight-bold);
            font-family: var(--font-family-heading);
            font-size: var(--text-sm);
            padding: 8px 16px;
            border-radius: var(--radius-sm);
            z-index: 10;
            box-shadow: var(--shadow-md);
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: color 0.2s ease;
        }

        .sps-produkt-modal-link:hover {
            color: var(--color-orange);
        }

        .sps-intro-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-3);
            margin-bottom: var(--space-8);
        }
        
        .sps-sample-box {
            background-color: var(--bg-secondary);
            padding: var(--space-3);
            border-radius: var(--radius-md);
            display: flex;
            flex-direction: column;
        }

        .sps-feature-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .sps-feature-list li {
            display: flex;
            align-items: flex-start;
            gap: var(--space-4);
            margin-bottom: var(--space-6);
        }
        
        .sps-feature-list h3 {
            margin-bottom: var(--space-1);
        }

        .sps-pre-title {
            color: var(--color-blue-800);
            font-family: var(--font-family-heading);
            font-size: var(--text-sm);
            font-weight: var(--font-weight-bold);
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        .sps-under-title {
            color: var(--color-gray-600);
            font-size: var(--text-24);
        }

        .sps-content-card {
            background-color: var(--bg-secondary);
            border-radius: var(--radius-md);
            overflow: hidden;
        }

        .sps-content-card-inner {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-6);
            align-items: center;
        }

        .sps-icon-badges-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-4);
            margin-top: var(--space-4);
            border-top: var(--border-width-sm) var(--border-style-solid) var(--border-color);
            padding-top: var(--space-4);
        }

        .sps-icon-badge {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
            border-left: var(--border-width-md) var(--border-style-solid) var(--border-accent);
            padding-left: var(--space-3);
        }
        
        .sps-icon-badge-icon {
            width: 50px;
            height: 50px;
            object-fit: contain;
            border-radius: 0; 
        }

        .sps-card-bordered-warm-dark {
            border: var(--border-width-md) var(--border-style-solid) var(--border-warm-dark);
            border-radius: var(--radius-md);
            padding: var(--space-3);
        }
       
        .sps-card-bordered {
            border: var(--border-width-md) var(--border-style-solid) var(--border-color);
            border-radius: var(--radius-md);
            padding: var(--space-3);
            background: var(--bg-primary);
        }
  
        
        .sps-list-item-bordered {
            display: flex;
            flex-direction: column;
            margin-bottom: var(--space-2);
            border-left: var(--border-width-md) var(--border-style-solid) var(--border-accent);
            padding-left: var(--space-2);
        }
        
        .sps-list-item-text {
            color: var(--text-secondary);
            font-size: var(--text-base);
            margin: 0;
        }
        
        .sps-stat-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-2);
            margin-top: var(--space-4);
        }
        .sps-stat-label {
            font-size: var(--text-sm);
            color: var(--text-primary);
        }
        .sps-stat-value {
            font-family: var(--font-family-heading);
            font-size: var(--text-24);
            color: var(--color-blue-800);
            font-weight: var(--font-weight-bold);
        }

        .sps-feature-block-bordered {
            border-left: var(--border-width-md) var(--border-style-solid) var(--border-accent);
            padding-left: var(--space-2);
        }
        
        .sps-feature-block-bordered h3 {
            margin-bottom: var(--space-2);
        }
        
    
        .sps-banner-container {
            position: relative;
            margin-top: 0;
            margin-left: 0;
            margin-right: 0;
            margin-bottom: var(--space-12); 
        }
        
        .sps-card-media-bottom {
            background-color: var(--bg-secondary);
            border-radius: var(--radius-md);
            overflow: hidden;
            position: relative;
        }
        
        .sps-card-media-bottom-wrapper {
            position: relative;
        }
        
        .sps-card-media-bottom-image {
            width: 100%;
            aspect-ratio: 16 / 9; 
            height: auto;
            object-fit: cover;
            border-radius: 0;
            background-color: #d1d8e0; 
            display: block;
        }
        
        .sps-card-media-bottom-content {
            padding: var(--space-4) ;
        }

        .sps-card-accordion {
            background-color: var(--bg-secondary);
            border-radius: var(--radius-md);
            padding: var(--space-4);
        }
        .sps-card-accordion-header {
            display: flex;
            gap: var(--space-4);
            margin-bottom: var(--space-4);
        }
        .sps-card-accordion-header h2 {
            margin: 0;
        }

        /* ==========================================================================
           NEU FÜR PROFILRECHNER
           ========================================================================== */
        .sps-flex-grow { flex-grow: 1; }

        .sps-calc-input-wrapper {
            display: flex;
            align-items: center;
            border: var(--border-width-md) var(--border-style-solid) var(--color-orange);
            border-radius: var(--radius-sm);
            padding: var(--space-1) var(--space-4);
            background-color: var(--color-white);
            margin-bottom: var(--space-2);
            max-width: 245px;
        }
        
        .sps-calc-input {
            border: none;
            outline: none;
            width: 100%;
            font-size: var(--text-lg);
            color: var(--text-dark);
            background: transparent;
            font-family: var(--font-family-base);
        }
        
        .sps-calc-input::placeholder {
            color: var(--color-gray-500);
        }
        
        .sps-calc-input::-webkit-outer-spin-button,
        .sps-calc-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .sps-calc-input[type=number] {
            -moz-appearance: textfield;
        }
        
        .sps-calc-unit {
            font-family: var(--font-family-heading);
            font-weight: var(--font-weight-bold);
            font-size: var(--text-xl);
            color: var(--text-dark);
            margin-left: var(--space-2);
        }
    
    
    
        .text-pretty {
text-wrap: pretty;
}
/* ==========================================================================
   1. ELTERNELEMENT (MOBILE FIRST)
   Standardmäßig für kleine Bildschirme
   ========================================================================== */
/* Erzeugt 1 Spalte (Handy) */
.sps-grid-cols-1 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
/* Erzeugt sofort 12 Spalten (falls man es mal global braucht) */
.sps-grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}
    /* ===
   12-SPALTEN-GRID: KIND-ELEMENTE (MOBILE FIRST)
   Standardmäßig für kleine Bildschirme
= */
.sps-col-span-1 { grid-column: span 1 / span 1; }
.sps-col-span-2 { grid-column: span 2 / span 2; }
.sps-col-span-3 { grid-column: span 3 / span 3; }
.sps-col-span-4 { grid-column: span 4 / span 4; }
.sps-col-span-5 { grid-column: span 5 / span 5; }
.sps-col-span-6 { grid-column: span 6 / span 6; }
.sps-col-span-7 { grid-column: span 7 / span 7; }
.sps-col-span-8 { grid-column: span 8 / span 8; }
.sps-col-span-9 { grid-column: span 9 / span 9; }
.sps-col-span-10 { grid-column: span 10 / span 10; }
.sps-col-span-11 { grid-column: span 11 / span 11; }
.sps-col-span-12 { grid-column: span 12 / span 12; }
    
.sps-grid-auto-fit {
    display: grid;
    /* auto-fit dehnt die Elemente aus, wenn am Ende eine Lücke bliebe */
    grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min, 250px), 1fr));
}
    
           /* ==========================================================================
           MODERNE CONTAINER QUERIES (Für 90%+ der Nutzer)
           ========================================================================== */
        @container sps-content-container (min-width: 600px) {
            .sps-md-w-1-2 { width: 50%; }
            .sps-md-w-3-4 { width: 75%; }
            .sps-md-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
            .sps-md-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
            .sps-md-grid-cols-2-1 { grid-template-columns: 2fr 1fr; }
            .sps-md-grid-cols-1-2 { grid-template-columns: 1fr 2fr; }
            .sps-md-grid-cols-5-8 { grid-template-columns: 5fr 8fr; }
            .sps-md-grid-cols-3-2 { grid-template-columns: 3fr 2fr; }
            
            .sps-md-col-span-2 { grid-column: span 2 / span 2; }
            .sps-md-flex-row { flex-direction: row; }
            .sps-md-block { display: block !important; }
            .sps-md-hidden { display: none !important; }
            .sps-md-p-8 { padding: var(--space-8); }
            .sps-md-pl-6 { padding-left: var(--space-6); }
            
            .sps-md-order-1 { order: 1; }
            .sps-md-order-2 { order: 2; }

            .sps-aspect-square-mobile { aspect-ratio: auto; }
            .sps-slider-track > .sps-project-card { width: 550px; }
            .sps-image-gallery .sps-image { height: 550px; }
            .sps-intro-grid { grid-template-columns: 2fr 1fr; }
            .sps-content-card-inner { grid-template-columns: 1fr 1fr; }
 .sps-icon-badges-grid { grid-template-columns: repeat(4, 1fr); }
            
            
            /* Elternelement schaltet ab Desktop auf 12 Spalten um */
  .sps-md-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
                .sps-md-col-span-1 { grid-column: span 1 / span 1; }
    .sps-md-col-span-2 { grid-column: span 2 / span 2; }
    .sps-md-col-span-3 { grid-column: span 3 / span 3; }
    .sps-md-col-span-4 { grid-column: span 4 / span 4; }
    .sps-md-col-span-5 { grid-column: span 5 / span 5; }
    .sps-md-col-span-6 { grid-column: span 6 / span 6; }
    .sps-md-col-span-7 { grid-column: span 7 / span 7; }
    .sps-md-col-span-8 { grid-column: span 8 / span 8; }
    .sps-md-col-span-9 { grid-column: span 9 / span 9; }
    .sps-md-col-span-10 { grid-column: span 10 / span 10; }
    .sps-md-col-span-11 { grid-column: span 11 / span 11; }
    .sps-md-col-span-12 { grid-column: span 12 / span 12; }
            
            
            
        }

     

        /* ==========================================================================
           FALLBACK FÜR ALTE BROWSER (Ohne Container Query Support)
           ========================================================================== */
        @supports not (container-type: inline-size) {
            @media (min-width: 768px) {
                .sps-md-w-1-2 { width: 50%; }
                .sps-md-w-3-4 { width: 75%; }
                .sps-md-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
                .sps-md-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
                .sps-md-grid-cols-2-1 { grid-template-columns: 2fr 1fr; }
                .sps-md-grid-cols-1-2 { grid-template-columns: 1fr 2fr; }
                .sps-md-grid-cols-5-8 { grid-template-columns: 5fr 8fr; }
                .sps-md-grid-cols-3-2 { grid-template-columns: 3fr 2fr; }
                
                .sps-md-col-span-2 { grid-column: span 2 / span 2; }
                .sps-md-flex-row { flex-direction: row; }
                .sps-md-block { display: block !important; }
                .sps-md-hidden { display: none !important; }
                .sps-md-p-8 { padding: var(--space-8); }
                .sps-md-pl-6 { padding-left: var(--space-6); }
                
                .sps-md-order-1 { order: 1; }
                .sps-md-order-2 { order: 2; }

                .sps-aspect-square-mobile { aspect-ratio: auto; }
                .sps-slider-track > .sps-project-card { width: 550px; }
                .sps-image-gallery .sps-image { height: 550px; }
                .sps-intro-grid { grid-template-columns: 2fr 1fr; }
                .sps-content-card-inner { grid-template-columns: 1fr 1fr; }
                .sps-icon-badges-grid { grid-template-columns: repeat(4, 1fr); }
                
                
                /* Elternelement schaltet ab Desktop auf 12 Spalten um */
 .sps-md-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
                
                    .sps-md-col-span-1 { grid-column: span 1 / span 1; }
    .sps-md-col-span-2 { grid-column: span 2 / span 2; }
    .sps-md-col-span-3 { grid-column: span 3 / span 3; }
    .sps-md-col-span-4 { grid-column: span 4 / span 4; }
    .sps-md-col-span-5 { grid-column: span 5 / span 5; }
    .sps-md-col-span-6 { grid-column: span 6 / span 6; }
    .sps-md-col-span-7 { grid-column: span 7 / span 7; }
    .sps-md-col-span-8 { grid-column: span 8 / span 8; }
    .sps-md-col-span-9 { grid-column: span 9 / span 9; }
    .sps-md-col-span-10 { grid-column: span 10 / span 10; }
    .sps-md-col-span-11 { grid-column: span 11 / span 11; }
    .sps-md-col-span-12 { grid-column: span 12 / span 12; }
            }

            
            
            
            
        }
</style>
