/* RE:VOLT Basis-Stile.
   Uebernommen aus includes/common-styles.php und includes/styles.php
   der statischen Seite, unveraendert. */


        /* Geöffnetes Mobilmenü: Hintergrund liegt über der gesamten Kopfzeile,
           also auch hinter Logo, Umschalter und Menüknopf. */
        #navbar.nav-offen {
            background-color: #FDFBF7;
        }
        .dark #navbar.nav-offen {
            background-color: #1A1918;
        }

        /* Steht die Kopfzeile über einem dunklen Abschnitt (Fußzeile), wechselt sie
           auf die helle Wortmarke und helle Bedienelemente. */
        #navbar.auf-dunkel .logo-dunkel { display: none; }
        #navbar.auf-dunkel .logo-hell { display: block; }
        #navbar.auf-dunkel .menue-strich { color: #FDFBF7; }
        #navbar.auf-dunkel .glass-card {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
        }
        #navbar.auf-dunkel.nav-offen {
            background-color: #121212;
        }
        #navbar.auf-dunkel.nav-offen #mobile-menu {
            background-color: #121212;
            border-color: rgba(255, 255, 255, 0.1);
        }
        #navbar.auf-dunkel.nav-offen #mobile-menu a:not([href^="http"]) { color: #FDFBF7; }

        /* Fixierter Anmelde-Knopf pausiert, solange der Datenschutz-Hinweis sichtbar ist */
        body.hinweis-offen .fixed.bottom-4.right-4 { display: none; }
        @media (min-width: 768px) {
            body.hinweis-offen .fixed.bottom-4.right-4 { display: flex; }
        }

        /* Base Settings */
        body {
            background-color: #FDFBF7;
            color: #121212;
            overflow-x: hidden;
            font-feature-settings: "cv11", "ss01";
            transition: background-color 0.8s ease, color 0.8s ease;
        }

        /* Glassmorphism */
        .glass-card {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
            transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .dark .glass-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        }
        .glass-card:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); border-color: rgba(242, 148, 0, 0.3); }
        .dark .glass-card:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(242, 148, 0, 0.5); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); }

        /* Typography */
        .heading-xl { font-family: 'Signika', sans-serif; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
        .heading-lg { font-family: 'Signika', sans-serif; font-weight: 700; letter-spacing: -0.02em; }
        .tagline { color: #F29400; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; display: block; margin-bottom: 0.75rem; }
        .font-light { font-weight: 400 !important; }

        /* Buttons */
        .btn-primary { background: #F29400; color: white; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; }
        .btn-primary::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, #F29400, #ffae00); z-index: -1; transition: opacity 0.3s; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(242, 148, 0, 0.3); }

        /* Scrollbar Hide */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        /* Additional Styles for all pages */
        .mask-image-gradient {
            -webkit-mask-image: linear-gradient(to right, transparent, black);
            mask-image: linear-gradient(to right, transparent, black);
        }
        @keyframes float-in {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-float-in {
            animation: float-in 0.5s ease-out forwards;
        }
        @keyframes grow {
            to { transform: scaleX(1); }
        }
    


        /* Base Settings */
        body {
            background-color: #FDFBF7;
            color: #121212;
            overflow-x: hidden;
            font-feature-settings: "cv11", "ss01";
            transition: background-color 0.8s ease, color 0.8s ease;
        }

        /* Glassmorphism */
        .glass-card {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
            transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .dark .glass-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        }
        .glass-card:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); border-color: rgba(242, 148, 0, 0.3); }
        .dark .glass-card:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(242, 148, 0, 0.5); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); }

        /* Typography */
        .heading-xl { font-family: 'Signika', sans-serif; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
        .heading-lg { font-family: 'Signika', sans-serif; font-weight: 700; letter-spacing: -0.02em; }
        .tagline { color: #F29400; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; display: block; margin-bottom: 0.75rem; }
        .font-light { font-weight: 400 !important; }

        /* Buttons */
        .btn-primary { background: #F29400; color: white; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; }
        .btn-primary::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, #F29400, #ffae00); z-index: -1; transition: opacity 0.3s; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(242, 148, 0, 0.3); }

        /* Scrollbar Hide */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        /* Slider Drag Cursor & Performance */
        #slider {
            cursor: grab;
            scroll-behavior: auto;
            -webkit-overflow-scrolling: touch;
            transform: translateZ(0);
            will-change: scroll-position;
        }
        #slider.active { 
            cursor: grabbing !important;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            scroll-snap-type: none !important;
            -webkit-scroll-snap-type: none !important;
        }
        #slider.active * {
            pointer-events: none;
            user-select: none;
            transition: none !important;
            animation: none !important;
        }
        #slider.active a {
            pointer-events: none;
        }
        #slider:not(.active) a {
            pointer-events: auto;
        }

        /* Custom Range Slider */
        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            background: transparent;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #F29400;
            cursor: pointer;
            margin-top: -6px;
            box-shadow: 0 0 10px rgba(242, 148, 0, 0.5);
        }
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 4px;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 2px;
        }

        /* Monitor Gradient Animation */
        .sky-gradient-day { background: linear-gradient(180deg, #3B82F6 0%, #93C5FD 50%, #FDFBF7 100%); }
        .sky-gradient-night { background: linear-gradient(180deg, #020617 0%, #172554 60%, #312E81 100%); }
        
        .sun-glow { box-shadow: 0 0 80px 30px rgba(253, 186, 116, 0.8); }
        .moon-glow { box-shadow: 0 0 60px 15px rgba(255, 255, 255, 0.3); }

        .flow-path {
            stroke-dasharray: 10 10;
            stroke-dashoffset: 0;
            opacity: 0.4;
            transition: all 0.3s;
        }
        
        /* Grid Layout */
        .diagram-grid {
            display: grid;
            grid-template-columns: 1fr 280px 1fr; 
            grid-template-rows: auto 200px auto;
            grid-template-areas: 
                "generation  distribution  consumption"
                ".           .             grid";
            gap: 1rem;
            align-items: center;
            justify-items: center;
            position: relative;
            height: auto;
            min-height: 500px;
            width: 100%;
        }
        
        .flow-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            position: relative;
            width: 100%;
        }

        .flow-row {
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: center;
            position: relative;
            z-index: 10;
        }
        
        .flow-center {
            display: flex;
            justify-content: center;
            width: 100%;
            position: relative;
            z-index: 10;
        }

        @media (max-width: 1024px) {
            .diagram-grid {
                display: none;
            }
            .flow-container {
                gap: 1rem;
            }
            .flow-row {
                flex-direction: column;
                gap: 1rem;
                align-items: stretch;
                width: 100%;
            }
            .icon-box { width: 100%; }
            .flow-row > div {
                margin: 0 !important;
            }
            .diagram-lines { display: none; }
        }

        .icon-box {
            background: white;
            border: 1px solid rgba(0,0,0,0.05);
            border-radius: 1.25rem;
            padding: 1.25rem;
            box-shadow: 0 10px 30px -5px rgba(0,0,0,0.05);
            position: relative;
            z-index: 10;
            transition: transform 0.3s ease;
            width: 300px;
            max-width: 100%;
            text-align: left;
        }
        .dark .icon-box {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
        }
        .icon-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px -5px rgba(242, 148, 0, 0.1);
            border-color: rgba(242, 148, 0, 0.2);
        }
        .dark .icon-box:hover {
            box-shadow: 0 20px 40px -5px rgba(242, 148, 0, 0.3);
            border-color: rgba(242, 148, 0, 0.4);
        }

        /* Auf Handys sollen die Prozesskarten die volle Breite der Sektion einnehmen.
           Steht bewusst nach der Grundregel, sonst gewinnt die feste Breite von 300px. */
        @media (max-width: 1024px) {
            .icon-box { width: 100%; }
        }

        .icon-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.75rem;
            float: left;
            margin-right: 0.75rem;
        }
        
        .step-number {
            position: absolute;
            top: -10px;
            right: -10px;
            background: #F29400;
            color: white;
            width: 24px;
            height: 24px;
            font-size: 0.8rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-family: 'Signika', sans-serif;
            box-shadow: 0 4px 10px rgba(242, 148, 0, 0.3);
        }

        /* Center Hub Style */
        .hub-box {
            width: 100%;
            max-width: 300px;
            padding: 2rem;
            /* Vorher #121212, dann kurz dunkelgruen. Beides falsch: Gruen
               steht auf dieser Website ausschliesslich fuer Preise. Jetzt
               das Orange der Marke – und weil weisser Text darauf nur rund
               2:1 erreicht, traegt die Kachel schwarzen Text. */
            background: #F29400;
            color: white;
            border: 4px solid white;
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
            z-index: 20;
            text-align: center;
        }
        .dark .hub-box {
            background: #F29400;
            border-color: rgba(255, 255, 255, 0.2);
        }
        .hub-box .icon-circle {
            float: none;
            margin: 0 auto 1rem auto;
            width: 40px;
            height: 40px;
        }
    
/* ============================================================
   WordPress-Ergaenzungen

   Die Werkzeugleiste von WordPress liegt fuer angemeldete Benutzer ueber der
   Seite. Unsere Kopfzeile ist fixiert und wuerde sonst darunter verschwinden.
   Besucher sehen davon nichts.
   ============================================================ */
body.admin-bar #navbar { top: 32px; }

@media screen and (max-width: 782px) {
    body.admin-bar #navbar { top: 46px; }
}


/* Fixierter Anmelde-Knopf: weicht zurueck, sobald der Knopf in der Fusszeile
   sichtbar ist. Kein hartes Ausblenden, damit es nicht springt. */
.fixed.bottom-4.right-4 {
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
body.fuss-cta-sichtbar .fixed.bottom-4.right-4 {
    opacity: 0;
    transform: translateY(1rem) scale(.95);
    visibility: hidden;
    pointer-events: none;
}


/* Antworten im FAQ: Tailwind setzt Absatzabstaende auf 0. Innerhalb einer
   Antwort brauchen mehrere Absaetze aber Luft, sonst kleben sie aneinander.
   Frueher stand dafuer eine Hilfsklasse im Markup - die kann die Redaktion
   im Editor nicht setzen, also gehoert die Regel hierher. */
.faq-antwort > p + p,
.faq-antwort > ul,
.faq-antwort > ol {
    margin-top: 1rem;
}
.faq-antwort ul,
.faq-antwort ol {
    padding-left: 1.25rem;
}
.faq-antwort ul { list-style: disc; }
.faq-antwort ol { list-style: decimal; }
.faq-antwort li + li { margin-top: .35rem; }


/* ============================================================
   Fliesstext aus dem Editor

   Tailwind setzt Abstaende und Listenpunkte auf null. Fuer Inhalte, die
   aus dem Editor kommen, koennen wir keine Klassen ins Markup schreiben -
   also braucht der Container die Regeln.
   ============================================================ */
.fliesstext > * + * { margin-top: 1rem; }

.fliesstext h2 {
    font-family: 'Signika', system-ui, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    color: #1A1A1A;
    margin-top: 3rem;
}
.dark .fliesstext h2 { color: #FFFFFF; }
.fliesstext > h2:first-child { margin-top: 0; }

.fliesstext h3 {
    font-weight: 700;
    font-size: .875rem;
    color: #1A1A1A;
    margin-top: 2rem;
}
.dark .fliesstext h3 { color: #FFFFFF; }

.fliesstext strong { color: #1A1A1A; font-weight: 500; }
.dark .fliesstext strong { color: #FFFFFF; }

.fliesstext a { text-decoration: underline; text-underline-offset: 2px; }
.fliesstext a:hover { color: #F29400; }

.fliesstext ul, .fliesstext ol { padding-left: 1.25rem; }
.fliesstext ul { list-style: disc; }
.fliesstext ol { list-style: decimal; }
.fliesstext li + li { margin-top: .35rem; }


/* Absaetze aus einem Feld vom Typ `absaetze`.

   Der Redakteur trennt Absaetze durch Leerzeilen. Tailwind setzt
   Absatzabstaende auf null, und Klassen ins Markup kann eine Redaktion
   nicht schreiben - also gehoert die Regel an den Container. */
.cc-le-absaetze > p + p { margin-top: 1rem; }
.cc-le-absaetze > ul,
.cc-le-absaetze > ol { margin-top: 1rem; padding-left: 1.25rem; }
.cc-le-absaetze > ul { list-style: disc; }
.cc-le-absaetze > ol { list-style: decimal; }
.cc-le-absaetze li + li { margin-top: .35rem; }
.cc-le-absaetze a { text-decoration: underline; text-underline-offset: 2px; }

/* Auftakt: der erste Absatz steht hervorgehoben.

   Frueher stand dafuer ein <strong> im Template und der erste Absatz war ein
   eigenes Feld. Damit war eine Gestaltungsentscheidung in den Inhalt gewandert
   - wer die Absaetze umsortiert, haette die Hervorhebung mitverschoben. */
.fliesstext--auftakt > p:first-child {
    font-weight: 700;
    color: #1A1A1A;
}
.dark .fliesstext--auftakt > p:first-child { color: #FFFFFF; }

/* Ein Element mit dem hidden-Attribut bleibt verborgen – auch wenn eine
   Utility-Klasse ihm display:flex gibt.

   Ohne diese Regel bliebe die Pfeilreihe des Anlagen-Schiebers sichtbar: Der
   Browser setzt für [hidden] zwar display:none, aber .flex sticht das aus.
   Zwei Attribute im Selektor wiegen schwerer als eine Klasse, deshalb reicht
   das ohne !important. */
[data-slider-pfeile][hidden] { display: none; }

/* Ohne Überlauf ist der Schieber kein Schieber: kein Greifzeiger, kein
   Einrasten, kein Widerstand beim Wischen. */
#slider:not(.ist-schiebbar) {
    scroll-snap-type: none;
    overflow-x: visible;
    cursor: default;
}

/* Links in der Textspalte, rechts bis an den Bildschirmrand.

   Der Anlagen-Schieber braucht beides: Seine erste Karte soll auf der Linie
   der Ueberschrift beginnen, und nach rechts soll er ueber den Rand
   hinauslaufen – das Anschneiden der naechsten Karte ist der Hinweis, dass
   es weitergeht.

   Zuerst stand er in einem gewoehnlichen zentrierten Container. Damit stimmte
   links alles, aber rechts wurde an der Containerkante abgeschnitten – mitten
   auf der Seite, mit einem breiten leeren Streifen daneben. Das sah nicht nach
   Absicht aus, sondern nach Fehler.

   Der naechstliegende Ausweg waere ein Innenabstand aus 100vw gewesen. 100vw
   zaehlt aber den Rollbalken mit; auf Windows haette das ein paar Pixel
   danebengelegen.

   Ein Raster loest es ohne Rechnerei: drei Spalten, die mittlere hoechstens
   1400 Pixel breit. Wer in der Mitte sitzt, steht in der Textspalte; wer von
   der Mitte bis zum Ende reicht, laeuft bis an den Rand. Der Browser rechnet,
   nicht wir. */
.anlagen-gitter {
    display: grid;
    grid-template-columns:
        [voll-start] minmax(0, 1fr)
        [inhalt-start] minmax(0, 1400px)
        [inhalt-ende] minmax(0, 1fr) [voll-ende];
}

.anlagen-gitter > * { grid-column: inhalt-start / inhalt-ende; }

/* Der Schieber laeuft ueber die ganze Breite – und beginnt trotzdem in der
   Textspalte.

   Er MUSS ueber die ganze Breite laufen. Ein Schieber schneidet an seinen
   eigenen Kanten ab; liegt seine linke Kante in der Textspalte, verschwinden
   die Karten beim Schieben an einer Linie mitten auf der Seite. Genau das
   war der zweite Anlauf: rechts stimmte es, links wurde abgeschnitten.

   Also volle Breite, und der Einzug kommt aus dem Innenabstand. Die Rechnung
   dafuer steht in Prozent, nicht in vw – und das ist der entscheidende
   Unterschied: 100 % ist die tatsaechliche Breite dieses Elements, 100vw
   waere die Fensterbreite einschliesslich Rollbalken. Auf Windows laege der
   Einzug damit ein paar Pixel daneben.

   Rechts ein kleiner Abstand, damit die letzte Karte am Ende nicht an der
   Scheibe klebt. */
.anlagen-gitter > .schieber-bis-rand {
    grid-column: voll-start / voll-ende;
    padding-left: calc(max(0px, (100% - 1400px) / 2) + 1.5rem);
    padding-right: 1.5rem;

    /* Damit das Einrasten auf derselben Linie landet wie die Ueberschrift. */
    scroll-padding-left: calc(max(0px, (100% - 1400px) / 2) + 1.5rem);
}

/* Der freiwillige Text auf der Seite „Preisblatt".

   Er ist meistens leer. Ein leeres Feld gibt trotzdem seine Huelle aus, denn
   ohne Huelle gaebe es im Editor nichts anzuklicken – und was einmal geleert
   wurde, liesse sich nie wieder fuellen. Fuer Besucher waere die Huelle
   allerdings ein Abstand aus dem Nichts ueber dem Knopf, deshalb ist sie
   dort weg.

   Im Bearbeiten-Modus kommt sie zurueck, hoch genug, um sie zu treffen. Der
   Editor setzt dafuer `cc-le-bearbeiten` auf den Body. */
.preisblatt-text:empty { display: none; }

body.cc-le-bearbeiten .preisblatt-text:empty {
    display: block;
    min-height: 1.75rem;
}