/*
Theme Name:   Hello Elementor Child — LENK
Description:  Child-Theme für den LENK Website Relaunch 2026 (intelligenteinrichten.de). Single Source of Truth für Design-Tokens, globale Styles und Elementor-Overrides. Referenz: CLAUDE.md §3.
Template:     hello-elementor
Version:      0.1.0
Author:       Bibliothekseinrichtung Lenk GmbH
Text Domain:  hello-elementor-child-lenk
*/

/* ==========================================================================
   1. FONTS — lokal gehostet (fonts/), KEINE externen Requests (CLAUDE.md §5.2)
   Lizenzen: fonts/LICENSES.md
   ========================================================================== */

@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/dm-serif-display-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/dm-serif-display-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('fonts/general-sans-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('fonts/general-sans-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('fonts/general-sans-semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('fonts/general-sans-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/source-sans-3-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/source-sans-3-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/source-sans-3-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/source-sans-3-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Code Pro';
  src: url('fonts/source-code-pro-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Code Pro';
  src: url('fonts/source-code-pro-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ==========================================================================
   2. DESIGN-TOKENS — verbindlich nach CLAUDE.md §3.
   Hex-Farbwerte sind AUSSCHLIESSLICH zwischen den beiden Markern erlaubt
   (geprüft durch scripts/lint-tokens.sh · npm run lint:tokens).
   ========================================================================== */
/* === TOKENS:BEGIN === */
:root {
  /* Farben */
  --lenk-rot: #8B1A1A; --lenk-rot-hell: #A82020; --lenk-rot-dunkel: #6B1212;
  --lenk-rot-gradient: linear-gradient(135deg,#A82020 0%,#8B1A1A 50%,#6B1212 100%);
  --lenk-navy: #1E2B3C; --lenk-navy-hell: #263548; --lenk-navy-dunkel: #141E29;
  --lenk-navy-gradient: linear-gradient(145deg,#263548 0%,#1E2B3C 60%,#141E29 100%);
  --lenk-gold: #B8960C;
  --lenk-gold-gradient: linear-gradient(135deg,#D4AE14 0%,#B8960C 60%,#927608 100%);
  --zg-bibliothek: #4A7B9D; --zg-bibliothek-dark: #7AAECB;
  --zg-schulung: #2C3E50;   --zg-schulung-dark: #8BAFC4;
  --zg-rfid: #D4720A;       --zg-rfid-dark: #F5A560;
  --zg-beratung: #5A7A52;   --zg-beratung-dark: #8DBF84;
  --bg-tiefschwarz: #0D1520; --txt-haupt: #1A1A1A; --txt-hell: #6B6B6B;
  --shadow-rot: 0 6px 20px rgba(139,26,26,.25);
  /* Typo */
  --f-display: 'DM Serif Display', Georgia, serif;
  --f-head: 'General Sans', system-ui, sans-serif;
  --f-body: 'Source Sans 3', system-ui, sans-serif;
  --f-mono: 'Source Code Pro', monospace;
  --size-hero: clamp(40px,5.5vw,68px); --size-h2: clamp(30px,4vw,46px);
  --size-h3: clamp(22px,3vw,32px); --size-h4: clamp(18px,2vw,22px);
  --size-body: 18px; --size-small: 15px; --size-caption: 13px; --size-label: 11px;
  --lh-display: 1.08; --lh-heads: 1.15; --lh-body: 1.70;
  --ls-display: -1.5px; --ls-heads: -.5px; --ls-label: 2px; --ls-btn: .5px;
  /* Layout */
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-7: 90px; --space-8: 120px;
  --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --content-max: 1280px;
}
:root, [data-theme="dark"] {
  --hero-txt:#FFF; --mega-bg:#E8ECF0; --mega-txt:#1A1A1A;
  --section-bg:var(--lenk-navy-gradient);
  --card-bg:rgba(255,255,255,.04); --card-border:rgba(255,255,255,.08);
}
[data-theme="light"] {
  --hero-txt:#1E2B3C; --mega-bg:#FFF; --mega-txt:#1A1A1A;
  --section-bg:linear-gradient(180deg,#FFF 0%,#F7F7F7 100%);
  --card-bg:#FFF; --card-border:#E8E8E8;
}
/* --- Abgeleitete Sektions-Tokens (Ergänzung zu §3; Basis der sec-*-Klassen.
       Semantik: Text/Fläche je Theme, damit Sektionen ohne Hex auskommen) --- */
:root, [data-theme="dark"] {
  --sec-txt: rgba(255,255,255,.88);      /* Fließtext auf Theme-Fläche  */
  --sec-heading: #FFF;                   /* Headlines auf Theme-Fläche  */
  --sec-alt-bg: #263548;                 /* Wechselfläche (alt) dark    */
  --txt-invers: #FFF;                    /* Text auf Dark-Anchor & CTA — themenunabhängig */
  --txt-invers-soft: rgba(255,255,255,.82);
  --focus-ring: #D4AE14;                 /* Fokus-Ring: Gold hell, auf Navy wie Weiß sichtbar */
}
[data-theme="light"] {
  --sec-txt: var(--txt-haupt);
  --sec-heading: var(--lenk-navy);
  --sec-alt-bg: #F2F4F6;
  --focus-ring: #8B1A1A;
}
/* === TOKENS:END === */

/* ==========================================================================
   3. GLOBALE BASIS-STYLES
   ========================================================================== */

html { scroll-behavior: smooth; background: var(--lenk-navy-dunkel); }
[data-theme="light"] { background: var(--mega-bg); }

body {
  font-family: var(--f-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--sec-txt);
  background: var(--section-bg);
  -webkit-font-smoothing: antialiased;
  /* Kein horizontaler Scroll auf Mobil: clip statt hidden (bricht position:sticky nicht). */
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-head);
  line-height: var(--lh-heads);
  letter-spacing: var(--ls-heads);
  color: var(--sec-heading);
}
h1 { font-family: var(--f-display); font-size: var(--size-hero); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
h4 { font-size: var(--size-h4); }

code, pre, kbd, samp { font-family: var(--f-mono); }

img { max-width: 100%; height: auto; }

/* Fokus sichtbar — DoD §7 Punkt 7 (WCAG) */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Touch-Targets ≥ 44px mobil — DoD §7 Punkt 7 */
a.lenk-btn, button.lenk-btn, .lenk-btn { min-height: 44px; min-width: 44px; }

/* Animationen global aus bei reduced motion (CLAUDE.md §4) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   4. SEKTIONS-BASISKLASSEN — Dark/Light rein über Tokens (Sprint 0 Task 1)
   Rhythmik: sec-light/sec-alt folgen dem Theme; sec-dark ist Dark Anchor
   (IMMER navy, in beiden Themes); sec-cta ist IMMER Rot-Gradient.
   ========================================================================== */

.sec-light, .sec-dark, .sec-alt, .sec-cta {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}
.sec-light > .lenk-container, .sec-dark > .lenk-container,
.sec-alt > .lenk-container, .sec-cta > .lenk-container,
.lenk-container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* Theme-Fläche: dark → Navy-Bühne, light → Weiß-Verlauf */
.sec-light { background: var(--section-bg); color: var(--sec-txt); }
.sec-light h1, .sec-light h2, .sec-light h3, .sec-light h4 { color: var(--sec-heading); }

/* Wechselfläche: hebt sich von sec-light leicht ab */
.sec-alt { background: var(--sec-alt-bg); color: var(--sec-txt); }
.sec-alt h1, .sec-alt h2, .sec-alt h3, .sec-alt h4 { color: var(--sec-heading); }

/* Dark Anchor: in BEIDEN Themes navy (Zahlen/Awards, Testimonials, BetriebsCheck) */
.sec-dark { background: var(--lenk-navy-gradient); color: var(--txt-invers-soft); }
.sec-dark h1, .sec-dark h2, .sec-dark h3, .sec-dark h4 { color: var(--txt-invers); }

/* CTA-Fläche: in BEIDEN Themes Rot-Gradient */
.sec-cta { background: var(--lenk-rot-gradient); color: var(--txt-invers); }
.sec-cta h1, .sec-cta h2, .sec-cta h3, .sec-cta h4 { color: var(--txt-invers); }

/* Karten auf Theme-Flächen */
.lenk-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

/* Eyebrow/Label (z. B. "Für Bestandskunden") */
.lenk-eyebrow {
  font-family: var(--f-head);
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--lenk-gold);
}

/* ==========================================================================
   4b. BLOG — Artikel-Typografie + Übersicht (Sprint 3 Task 3.2)
   Blog ist ein wiederkehrender Content-Typ → Styles zentral hier statt je
   Artikel dupliziert. Artikel-HTML enthält nur Inhalt + BlogPosting-Schema.
   ========================================================================== */
.lenk-art { font-family: var(--f-body); max-width: 760px; margin-inline: auto; padding: var(--space-7) var(--space-3); color: var(--sec-txt); }
.lenk-art-cat { font-family: var(--f-head); font-size: var(--size-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--lenk-gold); margin: 0 0 var(--space-2); }
.lenk-art h1 { font-family: var(--f-display); font-size: var(--size-h1, var(--size-hero)); line-height: var(--lh-heads); letter-spacing: var(--ls-heads); color: var(--sec-heading); margin: 0 0 var(--space-2); }
.lenk-art-meta { font-size: var(--size-small); color: var(--txt-hell); margin: 0 0 var(--space-4); }
.lenk-art-lead { font-size: var(--size-body); line-height: var(--lh-body); color: var(--sec-heading); margin: 0 0 var(--space-5); }
.lenk-art h2 { font-family: var(--f-head); font-size: var(--size-h3); letter-spacing: var(--ls-heads); color: var(--sec-heading); margin: var(--space-5) 0 var(--space-2); }
.lenk-art p { line-height: var(--lh-body); margin: 0 0 var(--space-3); }
.lenk-art ul, .lenk-art ol { margin: 0 0 var(--space-3) var(--space-3); line-height: var(--lh-body); }
.lenk-art li { margin: 0 0 var(--space-1); }
.lenk-art-quote { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--lenk-gold); font-family: var(--f-display); font-size: var(--size-h4); line-height: 1.5; color: var(--sec-heading); }
.lenk-art-faq { margin: var(--space-5) 0 0; padding: var(--space-4); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); }
.lenk-art-faq h2 { margin-top: 0; }
.lenk-art-faq dt { font-family: var(--f-head); font-weight: 600; color: var(--sec-heading); margin: var(--space-2) 0 4px; }
.lenk-art-faq dd { margin: 0 0 var(--space-2); font-size: var(--size-small); line-height: var(--lh-body); }
.lenk-art-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--card-border); }
.lenk-art-cta a.lenk-art-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-4); font-family: var(--f-head); font-weight: 600; letter-spacing: var(--ls-btn); background: var(--lenk-rot-gradient); color: var(--txt-invers); border-radius: var(--radius-md); text-decoration: none; box-shadow: var(--shadow-rot); }
.lenk-art-cta a.lenk-art-link { color: var(--lenk-rot); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.lenk-art-cta a.lenk-art-link:hover { text-decoration: underline; text-underline-offset: 3px; }
[data-theme="dark"] .lenk-art-cta a.lenk-art-link { color: var(--lenk-gold); }
.lenk-art a:not(.lenk-art-btn) { color: var(--lenk-rot); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .lenk-art a:not(.lenk-art-btn) { color: var(--lenk-gold); }

/* Blog-Übersicht */
.lenk-blog { max-width: var(--content-max); margin-inline: auto; padding: var(--space-7) var(--space-3); }
.lenk-blog h1 { color: var(--sec-heading); margin: var(--space-1) 0 var(--space-2); }
.lenk-blog-intro { max-width: 68ch; line-height: var(--lh-body); color: var(--sec-txt); margin: 0 0 var(--space-6); }
.lenk-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.lenk-blog-card { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; }
.lenk-blog-card .lenk-blog-card-media { aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--lenk-navy-hell); background-image: var(--lenk-navy-gradient); }
.lenk-blog-card-body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.lenk-blog-card-cat { font-family: var(--f-head); font-size: var(--size-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--lenk-gold); }
.lenk-blog-card strong { font-family: var(--f-head); font-size: var(--size-h4); color: var(--sec-heading); line-height: var(--lh-heads); }
.lenk-blog-card span { font-size: var(--size-small); color: var(--sec-txt); line-height: var(--lh-body); }
.lenk-blog-card:hover { border-color: var(--lenk-rot); }
@media (max-width: 860px) { .lenk-blog-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   5. ELEMENTOR-OVERRIDES — !important ist hier erlaubt und erwartet
   (CLAUDE.md §4: Elementor-Defaults schlagen sonst durch)
   ========================================================================== */

/* Full-Bleed für eingebettete LENK-Widgets: Unsere HTML-Widgets sind
   self-contained Vollbreiten-Sektionen mit eigenem Innen-Padding
   (.lenk-*-inner / .lenk-container, max. ~1280px, zentriert). Elementor setzt
   um HTML-Widgets ein Default-Padding am Widget UND am umgebenden Container —
   das erzeugt einen sichtbaren Rahmen (heller Seitenhintergrund um dunkle
   Flächen). Deshalb: Widget- und Container-Padding auf 0. Greift nur bei
   Containern, die direkt ein HTML-Widget halten (z. B. Header/Topbar/Mega-Menü,
   Footer) — Container mit anderem Inhalt bleiben unberührt. */
.elementor-widget-html > .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.e-con:has(> .elementor-widget-html),
.e-con-inner:has(> .elementor-widget-html) { padding: 0 !important; }

/* Primär-Button: Rot-Gradient (Standard für alle CTAs) */
.elementor-button, .lenk-btn {
  font-family: var(--f-head) !important;
  font-weight: 600 !important;
  letter-spacing: var(--ls-btn) !important;
  background: var(--lenk-rot-gradient) !important;
  color: var(--txt-invers) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-rot);
  padding: 14px var(--space-4) !important;
  transition: transform .18s ease, box-shadow .18s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
}
.elementor-button:hover, .lenk-btn:hover,
.elementor-button:focus-visible, .lenk-btn:focus-visible {
  background: var(--lenk-rot-dunkel) !important;
  color: var(--txt-invers) !important;
  transform: translateY(-2px);
}

/* Ghost-Button (Sekundär-CTA, z. B. „Referenzen ansehen") */
.lenk-btn--ghost {
  background: transparent !important;
  color: currentColor !important;
  border: 2px solid currentColor !important;
  box-shadow: none;
}
.lenk-btn--ghost:hover, .lenk-btn--ghost:focus-visible {
  background: var(--card-bg) !important;
  transform: translateY(-2px);
}

/* Elementor-Typo an Token-System binden */
.elementor-widget-heading .elementor-heading-title { font-family: var(--f-head); letter-spacing: var(--ls-heads); }
.elementor-widget-text-editor { font-family: var(--f-body); font-size: var(--size-body); line-height: var(--lh-body); }

/* Elementor-Container auf Content-Breite */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--content-max); }

/* -------------------------------------------------------------------------
 * Bild-Slot-Sichtbarmachung (Dev-Hilfe, standardmäßig AUS)
 * Aktivierung: eine beliebige Seite mit ?bildslots=1 aufrufen (persistiert via
 * localStorage; ?bildslots=0 schaltet aus). Macht jeden Foto-Slot mit inline
 * background-image als schraffierte Box mit gold-gestricheltem Rahmen sichtbar,
 * solange die echten Bilder fehlen — damit erkennbar ist, WO welche hingehören.
 * Welche Datei wohin gehört, steht in docs/BILDBEDARF.md. Vor Go-Live irrelevant.
 * ------------------------------------------------------------------------- */
html.lenk-ph [style*="background-image"] {
	background-image: repeating-linear-gradient(45deg, var(--card-border) 0 1px, transparent 1px 11px) !important;
	background-color: var(--card-bg) !important;
	outline: 2px dashed var(--lenk-gold);
	outline-offset: -6px;
}

/* -------------------------------------------------------------------------
 * Blueprint-Akzente — technische Line-Art als dezente Sektions-Deko
 * (industrielle Manufaktur / Kleinserie: Fertigungsmaße, Freigabe-Zeichnung,
 * Werkzeug). Motive + Verwendung: widgets/blueprint-akzente.html.
 * Einbau: Sektion auf position:relative + overflow:hidden setzen, dann
 *   <div class="lenk-bp lenk-bp--right" aria-hidden="true"> …inline-SVG… </div>
 * Farbe folgt currentColor (Standard Gold), sehr niedrige Deckkraft, läuft zur
 * Textseite transparent aus (mask). Dekorativ → aria-hidden, kein Kontrastbedarf.
 * ------------------------------------------------------------------------- */
.lenk-bp { position: absolute; z-index: 0; pointer-events: none; color: var(--lenk-gold); opacity: .10; }
[data-theme="dark"] .lenk-bp { opacity: .14; }
.lenk-bp svg { display: block; width: 100%; height: 100%; }
.lenk-bp--right {
	top: 50%; right: 0; transform: translateY(-50%);
	width: min(40vw, 500px); aspect-ratio: 11 / 10;
	-webkit-mask-image: linear-gradient(to left, black 42%, transparent 100%);
	mask-image: linear-gradient(to left, black 42%, transparent 100%);
}
.lenk-bp--left {
	top: 50%; left: 0; transform: translateY(-50%);
	width: min(36vw, 440px); aspect-ratio: 11 / 10;
	-webkit-mask-image: linear-gradient(to right, black 42%, transparent 100%);
	mask-image: linear-gradient(to right, black 42%, transparent 100%);
}
/* Auf schmalen Screens dezenter/kleiner, damit kein Text-Gedränge entsteht */
@media (max-width: 760px) { .lenk-bp { opacity: .06; width: 60vw; } }