/* ============================================================
   SmartLife – Online · sl-base.css — gemeinsame Basisschicht (M142)
   Hier steht genau einmal, was jede öffentliche Seite braucht: Schriften,
   Farb-Token, Basisregeln, Buttons, Bedienelemente, Formularfelder,
   Kopfleiste samt Burger-Menü und Fuß.
   Diese Datei wird als erste geladen; danach folgen die Komponenten der
   jeweiligen Seitenfamilie:
     · Startseite und Landingpages: start.css (+ start_desk.css, start_mob.css)
     · Blog-, Rechts- und Generatorseiten: allgemein.css (+ _desk, _mob),
       auf den erzeugten Seiten über css/seo-pages.bundle.css
   Beide Dateien tragen seit M142 keine der hier stehenden Regeln mehr.
   Palette v3 „Signalgrün + Elektroblau“: docs/redesignes/startseite-v3-2026-09-21.md
   ============================================================ */

/* ---------- Schrift: Inter (Text) und Archivo (Titel), lokal aus frontend/fonts/ (npm run build:fonts) ---------- */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url("../fonts/inter/inter-latin-wght-normal.woff2?v=5.3.0") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url("../fonts/archivo/archivo-latin-wght-normal.woff2?v=5.3.0") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Design-Tokens (Dark ist Standard, Light der Override) ----------
   Die Palette trägt zwei Namensschemata: das kurze der Startseiten-Komponenten
   (--bg, --text, --brand …) und das ausgeschriebene der Lese- und Rechtsseiten
   (--color-bg, --color-text, --color-accent-700 …). Sie sind zwei Vokabulare
   derselben Palette, kein zweiter Farbsatz. Das kurze Schema ist kanonisch; zehn
   Rollen, die in beiden Schemata dasselbe bezeichnen, hängen per var() daran und
   können deshalb gar nicht auseinanderlaufen:
     --color-bg, --color-surface, --color-text, --color-accent, --color-accent-500,
     --color-accent-600, --color-accent-2, --color-accent-2-500, --color-accent-2-600,
     --color-focus-ring.
   Alle übrigen Stufen sind eigene Rollen und tragen eigene Werte — auch dort, wo
   sie heute zufällig übereinstimmen (Grün 700 und --header-hover). */
:root{
  color-scheme:dark;
  /* Kurzes Schema (Startseite, Landingpages) */
  --bg:#070a08; --bg2:#0b100d; --surface:#111a14; --surface-2:#182219;
  --text:#f3f7f4; --muted:#a9b5ad;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.18);
  /* Kontur ruhender Bedienelemente (Kontur-/Icon-Buttons, Felder): deckend, 3:1 auf jeder Themefläche
     und auf der 88-%-Headerleiste über jedem Untergrund (schwarzer wie weißer Pixel) */
  --line-ctrl:#75827a;
  /* Link-Hover in der Headerleiste: in Light dunkler als --brand-ink, weil die Leiste über dem dunklen Hero
     nur #d9dcda hell ist und #087a41 dort 4,5:1 verfehlt */
  --header-hover:#22e07a;
  --brand:#22e07a; --brand-ink:#22e07a; --brand-hover:#3ff08c; --brand-active:#1ec56b; --ondark:#04120a;
  --accent2:#4fa8ff; --accent2-ink:#4fa8ff;
  --tint-green:rgba(34,224,122,.10); --tint-blue:rgba(79,168,255,.10);
  --band:#063620; --band-glow:#0b6b3f;
  --focus:#4fa8ff;
  --error:#ff7b7b;
  --gradient:linear-gradient(90deg,#22e07a,#4fa8ff);
  --shadow:0 24px 60px rgba(0,0,0,.45);
  --btn-shadow:0 10px 28px rgba(34,224,122,.28);
  --font-title:"Archivo",system-ui,sans-serif;
  --font-text:"Inter",system-ui,sans-serif;
  --radius-card:22px; --radius-btn:12px;

  /* Ausgeschriebenes Schema (Blog-, Rechts- und Generatorseiten).
     Signalgrün: 500 = Buttonfläche (dunkler Text #04120a), 600/700 = Schrift und Links.
     Grün 200–400 und Blau 200–400 sind in Dark und Light dieselben Werte. */
  --color-accent: var(--brand);
  --color-accent-100: #052a17;
  --color-accent-200: #bfead0;
  --color-accent-300: #7fd9a5;
  --color-accent-400: #3fca80;
  --color-accent-500: var(--brand);
  --color-accent-600: var(--brand-ink);
  /* Grün 700 ist die Fokus- und Kickerstufe. Sie trägt heute denselben Wert wie
     --header-hover, ist aber eine andere Rolle und bleibt deshalb eigenständig. */
  --color-accent-700: #22e07a;
  --color-accent-800: #7ff0b4;
  --color-accent-900: #c4f5da;
  /* Elektroblau (Sekundäraktionen) */
  --color-accent-2: var(--accent2-ink);
  --color-accent-2-100: #0a1a2e;
  --color-accent-2-200: #c2ddfb;
  --color-accent-2-300: #8ec1f7;
  --color-accent-2-400: #5aa4ef;
  --color-accent-2-500: var(--accent2-ink);
  --color-accent-2-600: var(--accent2-ink);
  --color-accent-2-700: #4fa8ff;
  --color-accent-2-800: #8ec1f7;
  --color-accent-2-900: #c2ddfb;
  /* Zustandsfarben als Theme-Token, damit keine theme-gebundene Zustandsregel
     (html[data-theme="dark"] a:hover) die Komponentenregeln mit zwei Klassen überstimmt.
     Dark: Grün 600 und 700 sind beide Grün 500, deshalb Grün 300 als sichtbare Hover-Stufe;
     Elektroblau als Fokusfarbe, damit sich Fokus von grünen Links und Hover abhebt. */
  --color-link-hover: #7fd9a5;
  --color-focus-ring: var(--focus);
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-divider: color-mix(in srgb, #f3f7f4 40%, transparent);

  /* Globale Linkdarstellung. Der Selektor steht einmal hier (unveränderte Spezifität
     `a` beziehungsweise `a:hover`); die Seitenfamilien unterscheiden sich nur in diesen
     drei Token. Standard ist die Lesefläche — Grün 700, Hover Grün 300/700, unterstrichene
     Fließtextlinks. start.css belegt sie für Startseite und Landingpages um. */
  --link-ink: var(--color-accent-700);
  --link-hover-ink: var(--color-link-hover);
  --link-decoration: underline;

  /* Höhe der festen Kopfleiste und der daraus abgeleitete Ankerabstand
     (Leiste plus 20px Luft). Beide Werte hebt die 600px-Stufe am Dateiende an. */
  --sl-header-h:76px;
  --sl-nav-offset:96px;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#f7faf8; --bg2:#edf3ef; --surface:#ffffff; --surface-2:#e4f0e8;
  --text:#0c1510; --muted:#4b5a51;
  --line:rgba(10,25,16,.10); --line2:rgba(10,25,16,.20); --line-ctrl:#4b5a51; --header-hover:#06663a;
  --brand:#12b862; --brand-ink:#087a41; --brand-hover:#0fa858; --brand-active:#10a256;
  --accent2-ink:#1a5fb4;
  --tint-green:rgba(18,184,98,.12); --tint-blue:rgba(26,95,180,.10);
  --focus:#06663a;
  --error:#c62828;
  --shadow:0 20px 50px rgba(10,25,16,.12);
  --btn-shadow:0 10px 28px rgba(18,184,98,.28);

  /* Zehn Rollen hängen per var() am kurzen Schema und wechseln mit ihm; hier stehen
     nur die Stufen, die im Light-Theme wirklich einen eigenen Wert haben. */
  --color-accent-100: #e4f5ea;
  --color-accent-700: #06663a;
  --color-accent-800: #064d2c;
  --color-accent-900: #04321d;
  --color-accent-2-100: #e6f1fd;
  --color-accent-2-700: #154c90;
  --color-accent-2-800: #0f3a6e;
  --color-accent-2-900: #0a2648;
  --color-link-hover: #087a41;
  --color-divider: color-mix(in srgb, #0c1510 80%, transparent);
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
/* padding-top hält den Inhalt unter der festen Kopfleiste; start.css setzt es
   für seine Seiten auf 0 zurück, weil dort der Hero bewusst darunter liegt. */
body{
  margin:0;min-height:100vh;min-height:100dvh;overflow-x:clip;
  padding-top:var(--sl-header-h,76px);
  font-family:var(--font-text);font-size:16px;line-height:1.6;
  color:var(--text);background:var(--bg);
  text-wrap:pretty;-webkit-tap-highlight-color:transparent;
}
/* Der weiche Farbwechsel gilt erst, wenn das gespeicherte Theme steht: `seo-pages.js` läuft
   auf den erzeugten Seiten mit `defer`, also nach dem ersten Paint. Ohne diese Sperre sähe
   ein Besucher mit heller Wahl dort eine 400 ms lange Überblendung von Dunkel nach Hell.
   Beide Skripte setzen die Klasse, nachdem das Theme angewendet und gerendert wurde. */
html.sl-theme-ready body{transition:color .4s ease,background-color .4s ease}
h1,h2,h3,h4{font-family:var(--font-title);color:var(--text)}
a{color:var(--link-ink);text-decoration:var(--link-decoration);text-underline-offset:3px}
a:hover{color:var(--link-hover-ink)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.container{max-width:1200px;margin:0 auto;padding-inline:clamp(20px,4vw,40px)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 26px;border-radius:var(--radius-btn);border:1px solid transparent;
  font-family:inherit;font-weight:600;font-size:16px;line-height:1.2;text-align:center;
  color:var(--text);background:transparent;cursor:pointer;text-decoration:none;
}
.btn-sm{min-height:44px;padding:0 18px;font-size:14.5px}
.btn:disabled{opacity:.6;cursor:not-allowed}
/* Gefüllt: Grün 500 mit festem dunklem Text; Hover heller (Dark) bzw. dunkler (Light), Active 12 % dunkler */
.btn-primary{background:var(--brand);color:var(--ondark);box-shadow:var(--btn-shadow)}
.btn-primary:hover{background:var(--brand-hover);color:var(--ondark)}
.btn-primary:active{background:var(--brand-active);color:var(--ondark)}
/* Kontur: Textfarbe des Themes, Rand aus --line-ctrl (--line2 bliebe unter 3:1) */
.btn-secondary{border-color:var(--line-ctrl);color:var(--text)}
.btn-secondary:hover{border-color:var(--brand-ink);color:var(--text)}
.btn-secondary:active{background:var(--tint-green);color:var(--text)}

/* ---------- Icon-Buttons, Theme- und Burger-Symbole ---------- */
.sl-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border-radius:var(--radius-btn);border:1px solid var(--line-ctrl);background:transparent;color:var(--text);cursor:pointer;
}
.sl-iconbtn:hover{border-color:var(--brand-ink);color:var(--brand-ink)}
.sl-themebtn{margin-left:auto}
.sl-burger{display:none}
/* Theme-Icons: Standard (dark) zeigt Mond, hell zeigt Sonne */
.icon-sun{display:none}
[data-theme="light"] .icon-sun{display:block}
[data-theme="light"] .icon-moon{display:none}
/* Burger: Standard zeigt Menü-Icon, geöffnet das X */
.icon-close{display:none}
.sl-header.is-open .icon-close{display:block}
.sl-header.is-open .icon-menu{display:none}

/* ---------- Formularfelder ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13.5px;font-weight:600;color:var(--text)}
.sl-optional{color:var(--muted);font-weight:400}
.input{
  width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:15px;
  color:var(--text);caret-color:var(--brand-ink);background:var(--bg);
  border:1px solid var(--line-ctrl);border-radius:var(--radius-btn);
}
.input::placeholder{color:var(--muted);opacity:.8}
.input:hover{border-color:var(--brand-ink)}
.input:focus-visible{border-color:var(--brand-ink);outline-offset:0}
textarea.input{resize:vertical;min-height:118px}
.input[aria-invalid="true"]{border-color:var(--error)}

/* ---------- Kopfleiste (fix, transparent-dunkel, folgt dem Theme) ---------- */
/* Wie der Fuß bringt die Leiste Farbe und Unterstreichung ihrer Links selbst mit
   (.sl-brand, .sl-nav a, .sl-mobilemenu a), damit sie in beiden Seitenfamilien gleich aussieht. */
/* 88 % Deckung: die Leiste liegt über beliebigem Inhalt; über einem weißen (Dark) bzw. schwarzen (Light)
   Pixel halten Text und Link-Hover 4,5:1, Kontur, Marke und Fokusring 3:1 (Brand-Suite rechnet die Mischung nach) */
.sl-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}
.sl-header.sl-scrolled{box-shadow:0 8px 28px rgba(0,0,0,.28)}
.sl-header a,.sl-header span{white-space:nowrap}
.sl-header-inner{display:flex;align-items:center;gap:18px;min-height:76px;padding-block:10px}
.sl-brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-family:var(--font-title);font-weight:600;font-size:18px;letter-spacing:-.01em;text-decoration:none}
.sl-brand:hover{color:var(--text)}
.sl-mark{display:block;flex:none;color:var(--brand-ink)}
/* M150: the header mark's gradient runs from its own colour (stop "currentColor") to Elektroblau; the stop's
   attribute keeps the dark value as fallback. The footer mark stays dark and has fixed stops. */
.sl-mark-blau{stop-color:var(--accent2-ink)}
.sl-nav{display:flex;align-items:center;gap:30px;margin-left:auto;font-size:14.5px;font-weight:500}
.sl-nav a{color:var(--text);text-decoration:none}
.sl-nav a:hover{color:var(--header-hover)}
.sl-mobilemenu{display:none;flex-direction:column;gap:2px;padding:8px clamp(20px,4vw,40px) 16px;border-top:1px solid var(--line)}
.sl-mobilemenu a:not(.btn){display:block;padding:12px 4px;font-size:16px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.sl-mobilemenu a:not(.btn):hover{color:var(--header-hover)}
.sl-mobilemenu .btn{margin-top:14px;width:100%}

/* ---------- Fuß (dauerhaft dunkel) ---------- */
footer{padding:64px 0 96px;background:#050807;border-top:1px solid rgba(255,255,255,.06);color:rgba(243,247,244,.72);font-size:14.5px;line-height:1.7}
/* Kurze Seiten (404, Danke, Bestätigen): `sticky` mit `top: 100dvh` schiebt den Fuß an den
   unteren Rand, ohne den Blockfluss zu ändern; auf langen Seiten bleibt er an seinem Platz. */
footer.site-footer{position:sticky;top:100vh;top:100dvh}
footer :focus-visible{outline-color:#4fa8ff}
.sl-footgrid{display:grid;gap:32px 40px;grid-template-columns:1.5fr 1fr 1fr 1fr}
.sl-footgrid strong{display:inline-block;margin-bottom:8px;font-family:var(--font-title);font-weight:600;font-size:15px;color:#f3f7f4}
.sl-footgrid p{margin:14px 0 0}
.sl-footbrand{display:inline-flex;align-items:center;gap:10px;color:#f3f7f4;font-family:var(--font-title);font-weight:600;font-size:16px;text-decoration:none}
.sl-footbrand:hover{color:#f3f7f4}
.sl-footbrand .sl-mark{color:#22e07a}
.sl-footaddr{color:rgba(243,247,244,.72)}
/* Der Fuß ist ein gemeinsamer Baustein: seine Linkdarstellung steht hier vollständig und
   hängt nicht davon ab, ob die Seitenfamilie ein globales a{text-decoration:none} mitbringt. */
footer a{color:#22e07a;text-decoration:none;text-underline-offset:3px}
.sl-footlink{color:rgba(243,247,244,.72);line-height:2;text-decoration:none}
.sl-footlink:hover,footer a:hover{color:#22e07a;text-decoration:underline}
.sl-copyright{margin:44px 0 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:rgba(243,247,244,.62)}

/* ---------- Breitenstufen der Basisschicht ---------- */
/* bis 1140px: Burger-Menü statt Desktop-Navigation und Header-CTA (Marke, fünf Links, Theme-Schalter und
   CTA brauchen 1041px; die Containerbreite erreicht das erst ab 1121px Viewport) */
@media (max-width:1140px){
  .sl-nav,.sl-header-cta{display:none}
  .sl-burger{display:inline-flex}
  .sl-header.is-open .sl-mobilemenu{display:flex}
}
/* bis 1100px: Fuß zweispaltig */
@media (max-width:1100px){
  .sl-footgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* bis 600px: flachere Leiste, kleinerer Ankerabstand, einspaltiger Fuß */
@media (max-width:600px){
  :root{--sl-header-h:64px;--sl-nav-offset:84px}
  .sl-header-inner{min-height:64px;padding-block:8px}
  .sl-brand{font-size:16px}
  .sl-brand .sl-mark{width:30px;height:30px}
  .sl-footgrid{grid-template-columns:minmax(0,1fr);gap:28px}
  footer{padding:56px 0 96px}
}
/* up to 359px: brand, theme and menu buttons do not fit one row with the 18px gap (M181) */
@media (max-width:359px){
  .sl-header-inner{gap:8px}
}