/* Reset, abgeleitete Tokens, Grundtypografie, Zugänglichkeit, Einblenden beim Scrollen.
   Farben, Schriften, Abstände, Radius und Easing stammen aus tokens.css (Styleguide 1.0).
   Hier stehen nur Aliase für die Rollen der Komponenten und Modus-Schalter. */

/* ---- Abgeleitete Tokens (keine neuen Werte, nur Rollen) ---- */
:root {
    --color-heading: var(--color-text);
    --color-text-muted: var(--color-muted);
    --color-border: var(--color-line);
    /* Gold für Schrift: Messing im hellen Modus (5,3 : 1 auf Weiß), Sonnengold im dunklen. */
    --color-accent-ink: var(--messing);
    --color-surface-alt: var(--color-surface);
    --nav-glas: rgba(255, 255, 255, 0.86);
    --glas-dunkel: rgba(28, 26, 25, 0.5);
    --shadow-glas: 0 16px 44px rgba(28, 26, 25, 0.22);
    --max-width: var(--container);
    --nav-height: 88px;
    --dauer-schnell: var(--duration-fast);
    --dauer-normal: 240ms;
    --sonne-anzeige: none;
    --mond-anzeige: inline-flex;
    --color-fehler: #B3261E;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-accent-ink: var(--sonnengold);
        --nav-glas: rgba(28, 26, 25, 0.84);
        --sonne-anzeige: inline-flex;
        --mond-anzeige: none;
        --color-fehler: #FF8F85;
    }
}
:root[data-theme="dark"] {
    --color-accent-ink: var(--sonnengold);
    --nav-glas: rgba(28, 26, 25, 0.84);
    --sonne-anzeige: inline-flex;
    --mond-anzeige: none;
    --color-fehler: #FF8F85;
}

*, *::before, *::after { box-sizing: border-box; }

/* Muss vor allen Komponenten stehen und !important tragen: sonst schlägt ein
   späteres display:flex (etwa auf .btn) das hidden-Attribut. */
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    /* Höhe der festen Kopfzeile plus Luft, sonst verschwindet die Überschrift
       beim Ankersprung hinter ihr. */
    scroll-padding-top: calc(var(--nav-height) + 16px);
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-text);
    font-size: var(--type-fliesstext-size);
    font-weight: var(--type-fliesstext-weight);
    line-height: var(--type-fliesstext-line);
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img, video, svg { max-width: 100%; }
img, video { display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* figure und blockquote haben von Haus aus 40 px Seitenrand. */
figure, blockquote, dl, dd { margin: 0; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    text-transform: var(--display-transform, none);
    color: var(--color-heading);
    /* Verhindert ein einzelnes Wort in der letzten Zeile, ergänzend setzt main.js ein
       geschütztes Leerzeichen. Überschriften trennen nie. */
    text-wrap: balance;
    hyphens: manual;
    overflow-wrap: break-word;
}
h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-line); letter-spacing: var(--type-h1-tracking); font-weight: var(--type-h1-weight); }
h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: var(--type-h2-tracking); font-weight: var(--type-h2-weight); }
h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-line); letter-spacing: var(--type-h3-tracking); font-weight: var(--type-h3-weight); }
h4 { font-size: var(--type-fliesstext-size); font-weight: 700; font-family: var(--font-text); }

p {
    margin: 0 0 var(--space-3);
    text-wrap: pretty;
    max-width: 70ch;
}
/* Lange Komposita (Photovoltaikanlage, Ladeinfrastruktur) trennen nur auf schmalen Bildschirmen. */
@media (max-width: 767px) {
    p, li { hyphens: auto; -webkit-hyphens: auto; }
}
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--color-text); }

/* Sichtbarer Tastaturfokus. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-accent-ink);
    outline-offset: 3px;
    border-radius: var(--radius);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--color-accent);
    color: var(--color-on-accent);
    padding: var(--space-2) var(--space-4);
    border-radius: 0 0 var(--radius) 0;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- Einblenden beim Scrollen ----
   Nur Deckkraft und Verschiebung. main.js setzt is-visible einmalig per
   IntersectionObserver. */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
}