/* ============================================================
   NOTSTROM — Sektions-Styles (15.06.2026)
   Geladen von notstrom.html. Ziel: Layout-Varianz gegen
   die "Überschrift + Karten"-Monotonie. Eigene Präfixe (lamp-, nt-),
   damit nichts auf andere Seiten abfärbt. Nutzt die Marken-Tokens aus
   styles.css (:root) — Stahlblau-Akzent, Lato, radius.
   ============================================================ */

/* ========== 1) LAMP-STATEMENT (markanter Bruch, Aceternity-Adaption als reines CSS) ==========
   Lichtkegel = zwei gespiegelte conic-gradients + helle "Lampen-Linie" mit Glow,
   auf sehr dunklem Grund. Überschrift als heller Gradient-Text. */
.lamp-statement {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #0a0b0c;
    padding: 150px 24px 120px;
    text-align: center;
}

/* V-förmiger Lichtkegel (zwei konische Verläufe, an der Oberkante gespiegelt) */
.lamp-statement::before,
.lamp-statement::after {
    content: "";
    position: absolute;
    top: 0;
    height: 22rem;
    width: 30rem;
    z-index: -1;
    filter: blur(45px);
    opacity: 0.5;
    pointer-events: none;
}
.lamp-statement::before {
    right: 50%;
    background-image: conic-gradient(from 70deg at center top, rgba(91, 167, 209, 0.65), transparent 72%);
}
.lamp-statement::after {
    left: 50%;
    background-image: conic-gradient(from 290deg at center top, transparent 28%, rgba(91, 167, 209, 0.65));
}

/* Helle Lampen-Linie + weicher Radial-Schein darüber */
.lamp-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28rem;
    max-width: 76%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-steel-blue-light), transparent);
    box-shadow: 0 0 34px 7px rgba(138, 198, 232, 0.55);
    z-index: -1;
}
.lamp-statement .lamp-halo {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 38rem;
    max-width: 90%;
    height: 18rem;
    background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(91, 167, 209, 0.22), transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.lamp-statement .lamp-eyebrow {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-steel-blue-light);
}
.lamp-statement h2 {
    margin: 0 auto;
    max-width: 16ch;
    font-size: clamp(1.9rem, 4.5vw, 3.25rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #ffffff 30%, #9fb4c2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lamp-statement p {
    margin: 22px auto 0;
    max-width: 46ch;
    color: rgba(255, 255, 255, 0.62);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* ========== 2) VERTIKALE TIMELINE (statt Schritt-Karten) ========== */
.nt-timeline {
    max-width: 760px;
    margin: 56px auto 0;
    position: relative;
}
.nt-tl-step {
    position: relative;
    padding: 0 0 44px 84px;
}
.nt-tl-step:last-child {
    padding-bottom: 0;
}
/* durchgehende Verbindungslinie */
.nt-tl-step::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 12px;
    bottom: -12px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-steel-blue), rgba(91, 167, 209, 0.25));
}
.nt-tl-step:last-child::before {
    display: none;
}
.nt-tl-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: 2px solid var(--color-steel-blue);
    color: var(--color-steel-blue-dark);
    box-shadow: 0 4px 14px rgba(91, 167, 209, 0.25);
}
.nt-tl-marker svg {
    width: 26px;
    height: 26px;
}
.nt-tl-num {
    position: absolute;
    left: 46px;
    top: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-steel-blue-dark);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nt-tl-step h4 {
    margin: 6px 0 6px;
    font-size: 1.2rem;
    color: var(--color-anthracite);
}
.nt-tl-step p {
    margin: 0;
    color: var(--color-gray-500);
    line-height: 1.65;
}

/* ========== 3) KOMPONENTEN — alternierende Bild(SVG)-Text-Zeilen ========== */
.nt-feature-rows {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.nt-feature-row {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 40px;
}
/* jede zweite Zeile spiegeln (Visual rechts) */
.nt-feature-row:nth-child(even) {
    direction: rtl;
}
.nt-feature-row:nth-child(even) > * {
    direction: ltr;
}
.nt-feature-visual {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at 50% 30%, rgba(91, 167, 209, 0.14) 0%, transparent 70%),
        linear-gradient(160deg, #f5f8fb 0%, #e9f1f7 100%);
    border: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}
.nt-feature-visual svg {
    width: 100%;
    height: 100%;
    max-width: 270px;
    color: var(--color-steel-blue-dark);
}
.nt-feature-text .nt-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(91, 167, 209, 0.14);
    color: var(--color-steel-blue-dark);
    font-weight: 800;
    margin-bottom: 14px;
}
.nt-feature-text h3 {
    margin: 0 0 10px;
    font-size: 1.35rem;
    color: var(--color-anthracite);
}
.nt-feature-text p {
    margin: 0;
    color: var(--color-gray-500);
    line-height: 1.7;
}

/* ========== 4) ZAHLEN-BAND (dunkler Bruch mit animierten Zählern) ========== */
.nt-stats {
    background: linear-gradient(135deg, var(--color-anthracite) 0%, #2a2c2e 100%);
    padding: 64px 0;
}
.nt-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}
.nt-stat-num {
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    background: linear-gradient(180deg, var(--color-steel-blue-light), var(--color-steel-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.nt-stat-label {
    margin-top: 10px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.4;
}

/* ========== Responsive ========== */
@media (max-width: 860px) {
    .nt-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 24px;
    }
    .nt-feature-row,
    .nt-feature-row:nth-child(even) {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 20px;
    }
    .nt-feature-visual {
        aspect-ratio: 16 / 9;
        max-height: 240px;
    }
}
@media (max-width: 600px) {
    .lamp-statement {
        padding: 110px 20px 80px;
    }
    .nt-tl-step {
        padding-left: 70px;
    }
}

/* ========== 5) KOSTEN-KARTE (aufgewertet: Preis-Panel + Preisspannen-Skala + Argument-Punkte) ========== */
.nt-cost {
    position: relative;
    overflow: hidden;
    max-width: 960px;
    margin: 0 auto;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 48px;
}
/* 04.08.2026 (A-1334): Der blaue Akzentstreifen oben ist entfernt - Florian:
   wirkt nach KI. Die Karte trägt jetzt nur graue Umrandung und Schatten.
   Beim Überfahren mit der Maus wird die ganze Karte blau hervorgehoben. */
.nt-cost {
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.nt-cost:hover,
.nt-cost:focus-within {
    background:
        linear-gradient(160deg, rgba(91, 167, 209, 0.10) 0%, rgba(91, 167, 209, 0.05) 100%),
        var(--color-white);
    border-color: var(--color-steel-blue);
    box-shadow: var(--shadow-card-hover);
}

.nt-cost-head {
    text-align: center;
    margin-bottom: 36px;
}
.nt-cost-head .section-label { display: inline-block; margin-bottom: 12px; }
.nt-cost-head h2 { margin: 0; }

/* Einordnungssatz unter der Hauptüberschrift (zweite Hierarchiestufe) */
.nt-cost-lead {
    max-width: 62ch;
    margin: 14px auto 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--color-gray-500);
}

.nt-cost-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Zwischenüberschriften der beiden Spalten - dritte Hierarchiestufe.
   Vorher hatte die linke Spalte ein Uppercase-Eyebrow und die rechte
   gar nichts, dadurch fehlte die Rangfolge. */
.nt-cost-subhead {
    margin: 0 0 14px;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-anthracite);
}

/* Linke Spalte: Hauptaussage, dezent getönt (Glow entfernt) */
.nt-cost-panel {
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    border: 1px solid var(--color-gray-200);
    background: var(--color-gray-50, #f9fafb);
}
.nt-cost-panel p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-gray-500);
}

/* Foto der Komponenten in der linken Spalte */
.nt-cost-figure {
    margin: 22px 0 0;
}
.nt-cost-figure img {
    display: block;
    width: 100%;
    height: clamp(160px, 22vw, 220px);
    object-fit: cover;
    border-radius: var(--radius-md);
}
.nt-cost-figure figcaption {
    margin-top: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-gray-500);
}

/* Rechte Spalte */
.nt-cost-side {
    padding-top: 2px;
}
.nt-cost-price {
    font-size: clamp(2rem, 4.5vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 10px 0 28px;
    background: linear-gradient(180deg, var(--color-steel-blue), var(--color-steel-blue-dark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* Preisspannen-Skala */
.nt-cost-scale-bar {
    position: relative;
    height: 8px;
    border-radius: 5px;
    margin: 0 8px 14px;
    background: linear-gradient(90deg, var(--color-steel-blue-light), var(--color-steel-blue-dark));
}
.nt-cost-dot {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-white);
    border: 3px solid var(--color-steel-blue-dark);
    transform: translateY(-50%);
}
.nt-cost-dot-start { left: -4px; }
.nt-cost-dot-end { right: -4px; }
.nt-cost-scale-labels {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.nt-cost-scale-labels > div { max-width: 47%; }
.nt-cost-scale-labels .right { text-align: right; }
.nt-cost-scale-labels strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-anthracite);
}
.nt-cost-scale-labels span {
    font-size: 0.76rem;
    color: var(--color-gray-500);
    line-height: 1.3;
}

/* Argument-Punkte */
.nt-cost-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
/* Die drei Punkte als gleichartige Karten (A-1334). Vorher standen sie frei
   im Raum, während die linke Spalte in einer Box saß - das war der Bruch,
   den Florian gemeint hat mit "manches in Boxen, manches nicht". */
.nt-cost-points li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
}
.nt-cost-ico {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: rgba(91, 167, 209, 0.12);
    color: var(--color-steel-blue-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nt-cost-ico svg { width: 22px; height: 22px; }
.nt-cost-points li > div {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-gray-500);
}
.nt-cost-points strong { color: var(--color-anthracite); }

@media (max-width: 760px) {
    .nt-cost { padding: 32px 22px; }
    .nt-cost-body { grid-template-columns: 1fr; gap: 28px; }
}

/* ========== 6) ÜBERSCHRIFTEN VEREINHEITLICHEN (15.06.) ==========
   Alle Sektions-Hauptüberschriften auf eine Größe (≈48px / 3rem max).
   Vorher: "So funktioniert" war ein kleiner h3 (26px), Lamp-H2 52px. */
.blackout-system-section .blackout-steps-title {
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.15;
}
.lamp-statement h2 {
    font-size: clamp(1.9rem, 4vw, 3rem);
}

/* Fotos statt Icons in den Komponenten-Zeilen (A-1329, 04.08.2026).
   Zwei der drei Bausteine gibt es als echtes Produktfoto im BESA-Shop.
   Die Umschalteinrichtung behält ihr Icon, dafür fehlt ein Foto. */
/* 04.08.2026 (Florian): Der blaue Verlauf soll als gleichmäßig 30 px breiter
   Rahmen um das Foto laufen. Dafür füllt das Bild den Innenbereich komplett
   aus, statt mit fester Maximalbreite mittig zu schweben. Die Umrandung der
   Kachel ist dünner geworden. */
.nt-feature-visual-foto {
    /* 06.08.2026 (Florian): Rahmen von 30 auf 20 px und quadratisches Format
       statt Querformat. Das Foto ist ebenfalls 1:1, es wird also nichts
       beschnitten. */
    aspect-ratio: 1 / 1;
    padding: 20px;
    border-width: 1px;
    border-color: rgba(91, 167, 209, 0.28);
}

.nt-feature-visual-foto img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: var(--radius-md, 12px);
}

@media (max-width: 860px) {
    /* auf schmalen Bildschirmen etwas weniger Rahmen, sonst bleibt vom Foto zu wenig */
    .nt-feature-visual-foto {
        padding: 14px;
        max-height: none;
    }
}

/* ============================================================
   Handy-Ansicht nachgebessert 04.08.2026 (Florian)
   ============================================================ */

@media (max-width: 860px) {
    /* Komponenten-Zeilen: Reihenfolge umdrehen. Auf dem Handy soll erst die
       Nummer, dann die Überschrift, dann der Text und ganz zuletzt das Foto
       kommen - vorher stand das Bild über allem. */
    .nt-feature-row .nt-feature-text {
        order: 1;
    }
    .nt-feature-row .nt-feature-visual {
        order: 2;
    }
}

@media (max-width: 600px) {
    /* Timeline: Nummer klebte am Icon und die Überschrift am Icon.
       Mehr Abstand zwischen Marker, Nummer und Text. */
    .nt-tl-step {
        padding-left: 96px;
    }
    .nt-tl-num {
        left: 60px;
        top: -8px;
    }
}

/* Auch auf dem Desktop klebte die Nummer am Icon. Der Marker ist 56 px breit,
   ab 60 px steht die Nummer frei daneben statt darauf. */
.nt-tl-num {
    left: 60px;
}

/* ============================================================
   Notstrom-Schaubild, neu gebaut 06.08.2026 (Aufgabe A-1327)
   ------------------------------------------------------------
   Ein System, zwei Zustände zum Umschalten. Der Zustand steckt in
   zwei Radiofeldern direkt vor dem Bild - deshalb braucht das
   Umschalten kein JavaScript und funktioniert auch, wenn Skripte
   blockiert sind. Die Radiofelder sind unsichtbar, geklickt werden
   die beiden Label darüber.
   Liegt in der dunklen Blackout-Sektion, alle Farben sind für
   dunklen Grund gewählt.
   ============================================================ */

.ns-schaubild {
    margin-top: 8px;
}

/* Die Radiofelder selbst sind nur der Zustandsspeicher. Nicht mit
   display:none ausblenden - dann wäre die Tastaturbedienung weg. */
.ns-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.ns-schalter {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 28px;
    padding: 6px;
    width: fit-content;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

.ns-schalter-knopf {
    padding: 10px 26px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
    user-select: none;
}

.ns-schalter-knopf:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* Der aktive Knopf: das jeweils gewählte Radiofeld färbt sein Label. */
#ns-normal:checked ~ .ns-schalter .ns-schalter-knopf:nth-of-type(1),
#ns-ausfall:checked ~ .ns-schalter .ns-schalter-knopf:nth-of-type(2) {
    background: var(--color-primary);
    color: #fff;
}

/* Tastaturbedienung sichtbar machen */
.ns-radio:focus-visible ~ .ns-schalter {
    outline: 2px solid var(--color-steel-blue-light);
    outline-offset: 3px;
}

.ns-buehne {
    max-width: 940px;
    margin: 0 auto;
}

.ns-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* ---------- Grundfarben der Bauteile ---------- */

.ns-sonne circle {
    fill: #F7C948;
    stroke: none;
}

.ns-sonne-strahlen line {
    stroke: #F7C948;
    stroke-width: 6;
    stroke-linecap: round;
}

.ns-dach {
    fill: #4A4D50;
    stroke: #fff;
    stroke-width: 4;
    stroke-linejoin: round;
}

.ns-module path {
    fill: var(--color-steel-blue-dark);
    stroke: var(--color-steel-blue-light);
    stroke-width: 3;
    stroke-linejoin: round;
}

.ns-module line {
    stroke: var(--color-steel-blue-light);
    stroke-width: 2.5;
}

.ns-korpus {
    fill: #2F3133;
    stroke: #fff;
    stroke-width: 4;
}

.ns-tuer {
    fill: #4A4D50;
    stroke: #fff;
    stroke-width: 3;
}

/* Die Fenster leuchten in beiden Zuständen - das ist die Aussage des
   ganzen Bildes. Bei Ausfall etwas wärmer, damit man sieht: es läuft
   jetzt auf Speicher. */
.ns-fenster rect {
    fill: #F7C948;
    stroke: none;
    transition: fill 0.35s ease;
}

.ns-geraet rect {
    fill: #2F3133;
    stroke: #fff;
    stroke-width: 4;
}

.ns-blitz {
    fill: #F7C948;
    stroke: none;
}

.ns-zelle {
    fill: var(--color-steel-blue);
    stroke: none;
    transition: fill 0.35s ease;
}

.ns-kontakt {
    fill: #fff;
    stroke: none;
}

.ns-kontaktlinie {
    stroke: #fff;
    stroke-width: 5;
    stroke-linecap: round;
}

.ns-kontaktlinie.ns-offen {
    stroke: var(--color-primary-light);
}

.ns-mast {
    fill: none;
    stroke: #fff;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke 0.35s ease, opacity 0.35s ease;
}

/* ---------- Leitungen ---------- */

.ns-leitung {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Gleichstrom rot (Modul zum Wechselrichter, Speicher), Wechselstrom
   stahlblau (alles hinter dem Wechselrichter). Dieselbe Trennung wie in
   den Herstellerschemata, die Felix als Referenz geschickt hat. */
.ns-dc {
    stroke: var(--color-primary);
}

.ns-ac {
    stroke: var(--color-steel-blue-light);
}

/* Laufende Striche zeigen, dass Strom fließt. */
.ns-aktiv {
    stroke-dasharray: 14 12;
    animation: nsFluss 1.4s linear infinite;
}

@keyframes nsFluss {
    to {
        stroke-dashoffset: -26;
    }
}

.ns-netzleitung {
    stroke: var(--color-steel-blue-light);
    stroke-dasharray: 14 12;
    animation: nsFluss 1.4s linear infinite;
    transition: stroke 0.35s ease, opacity 0.35s ease;
}

.ns-trennung line {
    stroke: var(--color-primary-light);
    stroke-width: 7;
    stroke-linecap: round;
}

/* ---------- Beschriftung ---------- */

.ns-label {
    fill: #fff;
    font-family: var(--font-family);
    font-size: 27px;
    font-weight: 700;
}

.ns-sublabel {
    fill: rgba(255, 255, 255, 0.66);
    font-family: var(--font-family);
    font-size: 22px;
    font-weight: 400;
}

.ns-sublabel.ns-warnung {
    fill: var(--color-primary-light);
    font-weight: 700;
}

/* ---------- Zustandswechsel ---------- */

/* Grundregel: Was zum jeweils anderen Zustand gehört, ist weg. */
#ns-normal:checked ~ .ns-buehne .ns-nur-ausfall,
#ns-normal:checked ~ .ns-erklaerung .ns-nur-ausfall,
#ns-ausfall:checked ~ .ns-buehne .ns-nur-normal,
#ns-ausfall:checked ~ .ns-erklaerung .ns-nur-normal {
    display: none;
}

/* Stromausfall: Netz wird grau und still, die Netzleitung hört auf zu
   fließen, der Speicher wird zur Quelle. */
#ns-ausfall:checked ~ .ns-buehne .ns-mast {
    stroke: rgba(255, 255, 255, 0.28);
}

#ns-ausfall:checked ~ .ns-buehne .ns-netzleitung {
    stroke: rgba(255, 255, 255, 0.2);
    animation: none;
}

#ns-ausfall:checked ~ .ns-buehne .ns-zelle {
    fill: var(--color-primary);
}

#ns-ausfall:checked ~ .ns-buehne .ns-fenster rect {
    fill: #FFD97A;
}

/* ---------- Erklärung unter dem Bild ---------- */

.ns-erklaerung {
    max-width: 760px;
    margin: 26px auto 0;
    text-align: center;
}

.ns-erklaerung p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0 0 14px;
}

.ns-erklaerung strong {
    color: #fff;
}

.ns-erklaerung .ns-hinweis {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.92rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 16px;
    margin-bottom: 0;
}

/* ---------- Handy ---------- */

@media (max-width: 700px) {
    /* Schrift im Bild anheben, sonst ist sie bei 375 px Breite zu klein.
       Die Bildbreite bleibt gleich, nur die Beschriftung wächst. */
    .ns-label {
        font-size: 34px;
    }

    .ns-sublabel {
        font-size: 28px;
    }

    .ns-schalter-knopf {
        padding: 10px 18px;
        font-size: 0.88rem;
    }
}

/* Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt keine
   laufenden Striche - die Leitungen bleiben dann einfach gestrichelt. */
@media (prefers-reduced-motion: reduce) {
    .ns-aktiv,
    .ns-netzleitung {
        animation: none;
    }
}