/* ============================================================
   wewalki.css  -  Zentrale Design-Variablen + Bausteine
   Version: 2026-06-14.7 (.bg-logo seitendynamisch: Oberkante nav+20px, Unterkante hero-20px, 260px-Deckel raus; gilt auch fuer theme-dark Tool-Hero)
   Das "KUKA-Steuergeraet" fuer WewalKI: Werte EINMAL hier aendern,
   alle eingebundenen Seiten ziehen automatisch nach.
   Theme je Seite ueber Body-Klasse: theme-light (Info/Artikel) oder
   theme-dark (Tools/Baem).
   ============================================================ */

:root {
  /* ---- Schriften ---- */
  --font-head: 'Epilogue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* ---- Zeilenhoehen ---- */
  --lh-base: 1.6;       /* Body - MUSS gesetzt sein (Vererbungsfalle) */
  --lh-tight: 1.05;     /* Hero-Titel */
  --lh-snug: 1.5;       /* Subtitle */
  --lh-relaxed: 1.7;    /* Ausgabetext */

  /* ---- Raster / Seitenmasse ---- */
  --nav-height: 60px;
  --page-pad: 24px;             /* Nav + Container horizontal */
  --content-max: 1080px;
  --content-vw: 77.78vw;        /* ab 768px */

  /* ---- Header / Nav ---- */
  --nav-bg: rgba(13,31,60,0.97);
  --nav-blur: blur(12px);
  --nav-border: rgba(79,156,249,0.12);
  --nav-link: rgba(255,255,255,0.55);
  --nav-link-size: 0.85rem;

  /* ---- Page-Header (Info-Seiten) ---- */
  --ph-pad: 130px 20px 70px;

  /* ---- Hero (Tools) - fuer spaeter ---- */
  --hero-pad-top: 120px;
  --hero-pad-x: 20px;
  --hero-pad-bottom: 36px;
  --hero-title-max: 800px;
  --hero-sub-max: 680px;

  /* ---- Footer ---- */
  --footer-pad: 28px 24px;
  --footer-text: rgba(255,255,255,0.25);
  --footer-size: 0.82rem;
  --footer-brand-size: .975rem;
  --footer-legal: rgba(255,255,255,0.45);
  --footer-legal-link: rgba(255,255,255,0.7);

  /* ---- Radius-Skala ---- */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 30px;

  /* ---- Interaktion ---- */
  --transition: 0.2s;
  --blue-glow: rgba(79,156,249,0.1);
  --btn-glow: 0 8px 24px rgba(79,156,249,0.3);

  /* ---- Gemeinsame Marken-Farben (beide Themes) ---- */
  --navy: #0d1f3c;
  --navy-mid: #152d57;
  --navy-light: #1e3a6e;
  --blue: #4f9cf9;
  --blue-light: #93c5fd;
  --gold: #b8942a;
  --gold-light: #d4aa3a;
  --footer-dark: #080f1e;

  /* ---- Logo-Animation (Hero-Logo Einschweben) ---- */
  --logo-peak: 0.35;     /* Spitzen-Deckkraft 0-1 */
  --logo-rest: 0.10;     /* Ruhe-Deckkraft 0-1 */
  --logo-gap: 3000;      /* Takt zwischen Durchlaeufen (ms) */
  --logo-flymin: 1000;   /* Einflug-Dauer min (ms) */
  --logo-flymax: 1800;   /* Einflug-Dauer max (ms) */
  --logo-stagger: 70;    /* Versatz je Teil (ms) */
  --logo-hold: 500;      /* Halten nach Aufbau (ms) */

  /* ---- Artikel (Masse/Groessen, themeneutral) ---- */
  --article-pad: 60px 20px 80px;
  --article-size: 1.05rem;
  --article-lh: 1.85;
  --article-p-gap: 18px;
  --article-li-size: 1.02rem;
  --article-li-lh: 1.75;
  --article-title-size: clamp(2rem, 5vw, 3.6rem);
  --article-h2-size: clamp(1.5rem, 3vw, 2rem);
  --article-h2-mt: 50px;
  --article-h2-mb: 18px;
  --article-h3-size: 1.2rem;
  --article-h3-mt: 32px;
  --article-h3-mb: 12px;
  --caption-size: 0.85rem;
  --caption-lh: 1.5;
  --caption-mt: 12px;
  --cta-pad: 14px 28px;

  /* ---- Tool-Layer (Masse, themeneutral) ---- */
  --hero-meta-mt: 24px;
  --hinweis-max: 760px;
  --hinweis-mb: 28px;
  --card-pad: 30px;
  --card-mb: 22px;
  --main-pad: 10px 0 60px;
}

/* ============ THEME HELL (Info-Seiten, Artikel) ============ */
body.theme-light {
  --page-bg: #f7f8fa;   --paper: #f7f8fa;
  --surface: #ffffff;   --white: #ffffff;
  --ink: #0d1f3c;       --text-dark: #0d1f3c;
  --ink-mid: #4a5d7a;   --text-mid: #4a5d7a;
  --ink-muted: #8896b0; --text-muted: #8896b0;
  --hairline: #e2e8f2;  --border: #e2e8f2;
  --blue-border: rgba(79,156,249,0.2);
  --green: #2d8659;     --red: #c1432e;
  /* Artikel-Farben (einstellbar) */
  --article-text: #4a5d7a;
  --article-heading: #0d1f3c;
  --article-link: #4f9cf9;
  --caption-color: #8896b0;
  --cta-bg: #b8942a;
  --cta-color: #ffffff;
}

/* ============ THEME DUNKEL (Tools, Baem) ============ */
body.theme-dark {
  --page-bg: #0a1729;   --bg: #0a1729;
  --surface: #0d1f3c;   --surface-2: #152d57;  --white: #ffffff;
  --ink: #e8eef7;       --text: #e8eef7;
  --ink-mid: #aebbd2;   --text-mid: #aebbd2;
  --ink-muted: #7286a6; --text-muted: #7286a6;
  --hairline: rgba(79,156,249,0.16);  --border: rgba(79,156,249,0.16);
  --blue-border: rgba(79,156,249,0.22);
}

/* ============ BASIS ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--ink);
  line-height: var(--lh-base);
}

/* ============ NAV (Header) ============ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--nav-bg);
  backdrop-filter: var(--nav-blur);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--page-pad); height: var(--nav-height);
  border-bottom: 1px solid var(--nav-border);
}
.nav-logo {
  font-family: var(--font-head);
  font-weight: 900; font-size: 1.3rem;
  color: var(--white); text-decoration: none;
  letter-spacing: -0.02em;
  display: inline-flex; align-items: flex-start; gap: 11px;
}
.nav-logo-img { width: 34px; height: 34px; flex-shrink: 0; display: block; margin-top: 4px; }
.nav-logo-text { display: block; margin-top: 12px; line-height: 1; }
.nav-logo-text span { color: var(--blue); }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a {
  color: var(--nav-link);
  text-decoration: none;
  font-size: var(--nav-link-size); font-weight: 500;
  padding: 8px 16px; border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.nav-links a:hover { color: var(--white); background: var(--blue-glow); }
.nav-cta { background: var(--blue) !important; color: var(--white) !important; border-radius: var(--radius-sm) !important; }
.nav-cta:hover { background: var(--blue-light) !important; }
.nav-sep { color: rgba(255,255,255,0.25); padding: 0 2px; display: flex; align-items: center; font-size: 0.75rem; }

/* ============ HAMBURGER + MOBILE-MENUE ============ */
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; background: transparent; border: none; cursor: pointer; z-index: 210; }
.nav-burger span { display: block; height: 2px; width: 100%; background: var(--white); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: 199; background: rgba(13,31,60,0.98); backdrop-filter: var(--nav-blur); border-bottom: 1px solid var(--nav-border); display: flex; flex-direction: column; padding: 12px 20px 20px; transform: translateY(-120%); transition: transform 0.35s ease; }
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a { color: rgba(255,255,255,0.75); text-decoration: none; font-family: var(--font-head); font-weight: 500; font-size: 1.05rem; padding: 14px 12px; border-bottom: 1px solid rgba(79,156,249,0.08); }
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a.mm-cta { background: var(--blue); color: var(--white); border-radius: var(--radius); text-align: center; margin-top: 12px; font-weight: 700; }

/* ============ PAGE-HEADER (Info-Seiten) ============ */
.page-header {
  padding: var(--ph-pad);
  background: var(--navy);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(79,156,249,0.15) 0%, transparent 70%);
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--blue), transparent);
}
.page-header .tag {
  font-family: var(--font-head);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 16px;
  position: relative; z-index: 1;
}
.page-header h1 {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.02em;
  position: relative; z-index: 1;
}
.page-header .subtitle {
  color: rgba(255,255,255,0.5);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 14px;
  position: relative; z-index: 1;
}

/* ---- Hintergrund-Logo (Hero-Loop) ---- */
.bg-logo {
  position: absolute;
  left: 50%;
  top: calc(var(--nav-height) + 20px);
  transform: translateX(-50%);
  height: calc(100% - var(--nav-height) - 40px);
  width: auto;
  aspect-ratio: 1 / 1;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.bg-logo.visible { opacity: 0.10; }
.bg-line { stroke: var(--blue); stroke-width: 2.5; fill: none; stroke-dasharray: 300; stroke-dashoffset: 300; }
.bg-line.drawn { transition: stroke-dashoffset 0.8s ease; stroke-dashoffset: 0; }
.bg-line.wk-instant { transition: none; }
.bg-dot { opacity: 0; transition: opacity 0.3s ease; }
.bg-dot.shown { opacity: 1; }
.bg-tree { transform-box: fill-box; transform-origin: center; }

/* ============ CONTENT (Info-Seiten) ============ */
.content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 70px 20px 100px;
  background: var(--page-bg);
}
.content h2 {
  font-family: var(--font-head);
  font-size: 1.35rem; font-weight: 700;
  color: var(--navy);
  margin: 40px 0 14px;
  padding-left: 16px;
  border-left: 4px solid var(--blue);
  letter-spacing: -0.01em;
}
.content h2:first-child { margin-top: 0; }
.content h3 {
  font-family: var(--font-head);
  font-size: 1.05rem; font-weight: 700;
  color: var(--gold);
  margin: 28px 0 10px;
}
.content p {
  font-size: 1rem; line-height: 1.8;
  color: var(--text-mid);
  margin-bottom: 14px;
}
.content a { color: var(--blue); text-decoration: none; font-weight: 500; }
.content a:hover { color: var(--navy); text-decoration: underline; }
.content .box {
  background: var(--white);
  padding: 24px 28px;
  margin: 20px 0;
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: 0 2px 8px rgba(13,31,60,0.04);
}
.content .box p { margin: 0; color: var(--text-dark); font-weight: 500; }
.legal-note { font-size: 0.85rem; color: var(--text-muted); font-style: italic; margin-top: 8px !important; }

/* ============ FOOTER ============ */
footer {
  background: var(--footer-dark);
  text-align: center;
  padding: var(--footer-pad);
  color: var(--footer-text);
  font-size: var(--footer-size);
  font-family: var(--font-body);
  margin: 0;
}
.footer-brand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 8px;
  font-family: var(--font-head); font-weight: 900;
  font-size: var(--footer-brand-size); letter-spacing: -0.02em; line-height: 1;
}
.footer-brand img { width: 26px; height: 26px; display: block; flex-shrink: 0; opacity: .9; }
.footer-text { display: inline-block; }
.footer-wewal { color: var(--white); }
.footer-ki { color: var(--blue); }
.footer-de { color: var(--white); }
.footer-legal { margin: 0; color: var(--footer-legal); font-size: .82rem; line-height: 1.6; }
.footer-legal a { color: var(--footer-legal-link); text-decoration: none; margin: 0 8px; }
.footer-legal a:hover { color: var(--blue); }
footer a { color: var(--footer-legal); text-decoration: none; margin: 0 10px; }
footer a:hover { color: var(--blue); }

/* ============ CONTENT-BREITE (ab 768px) ============ */
@media (min-width: 768px) {
  .content { width: var(--content-vw); }
}

/* ============ MOBILE (<=768px) ============ */
@media (max-width: 768px) {
  .nav-burger { display: flex; }
  body.theme-light .nav-links { display: none; }
}

/* ============================================================
   ARTIKEL-LAYER (Theme hell) - 2026-06-06
   ============================================================ */

/* ---- Artikel-Header (Hero) ---- */
.article-header{ padding:var(--ph-pad); background:var(--navy); text-align:center; position:relative; overflow:hidden; }
.article-header::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(79,156,249,0.15) 0%, transparent 70%); }
.article-header::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(to right, transparent, var(--blue), transparent); }
.article-meta{ font-family:var(--font-head); font-size:0.75rem; font-weight:700; letter-spacing:0.25em; text-transform:uppercase; color:var(--blue); margin-bottom:18px; position:relative; z-index:1; }
.article-title{ font-family:var(--font-head); font-size:var(--article-title-size); font-weight:900; line-height:1.05; color:var(--white); letter-spacing:-0.02em; max-width:880px; margin:0 auto 20px; position:relative; z-index:1; }
.article-subtitle{ font-family:var(--font-head); font-size:clamp(1rem,2vw,1.2rem); font-weight:400; font-style:italic; color:rgba(255,255,255,0.55); max-width:var(--hero-sub-max); margin:0 auto; position:relative; z-index:1; }

/* ---- Artikel-Body (Lesetext) ---- */
.article-body{ max-width:var(--content-max); margin:0 auto; padding:var(--article-pad); }
.article-body p{ font-size:var(--article-size); line-height:var(--article-lh); color:var(--article-text, var(--ink-mid)); margin-bottom:var(--article-p-gap); }
.article-body > p:first-of-type::first-letter{ font-family:var(--font-head); font-size:3.4rem; font-weight:900; float:left; line-height:1; padding:4px 10px 0 0; color:var(--article-heading, var(--navy)); }
.article-body strong{ color:var(--article-heading, var(--navy)); font-weight:700; }
.article-body em{ font-style:italic; color:var(--ink); }
.article-body a{ color:var(--article-link, var(--blue)); text-decoration:none; font-weight:500; }
.article-body a:hover{ color:var(--navy); text-decoration:underline; }
.article-body h2{ font-family:var(--font-head); font-size:var(--article-h2-size); font-weight:900; line-height:1.2; color:var(--article-heading, var(--navy)); letter-spacing:-0.02em; margin:var(--article-h2-mt) 0 var(--article-h2-mb); }
.article-body h3{ font-family:var(--font-head); font-size:var(--article-h3-size); font-weight:700; color:var(--article-heading, var(--navy)); margin:var(--article-h3-mt) 0 var(--article-h3-mb); }
.article-body ul, .article-body ol{ margin:0 0 18px 24px; padding-left:8px; }
.article-body li{ font-size:var(--article-li-size); line-height:var(--article-li-lh); color:var(--article-text, var(--ink-mid)); margin-bottom:8px; }

/* ---- Hervorhebungs-Box ---- */
.info-box{ background:var(--white); border-left:4px solid var(--blue); border-radius:0 12px 12px 0; padding:24px 28px; margin:32px 0; box-shadow:0 2px 12px rgba(13,31,60,0.05); }
.info-box.gold{ border-left-color:var(--gold); }
.info-box.green{ border-left-color:var(--green); }
.info-box.red{ border-left-color:var(--red); }
.info-box p:last-child{ margin-bottom:0; }
.info-box-title{ font-family:var(--font-head); font-size:0.78rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--blue); margin-bottom:10px; }
.info-box.gold .info-box-title{ color:var(--gold); }
.info-box.green .info-box-title{ color:var(--green); }
.info-box.red .info-box-title{ color:var(--red); }

/* ---- Zitat / Pull-Quote ---- */
blockquote{ font-family:var(--font-head); font-size:1.25rem; font-weight:500; font-style:italic; line-height:1.5; color:var(--navy); border-left:4px solid var(--gold); padding:8px 0 8px 24px; margin:32px 0; }

/* ---- Tabellen ---- */
.article-body table{ width:100%; border-collapse:collapse; margin:24px 0; background:var(--white); border-radius:12px; overflow:hidden; box-shadow:0 2px 12px rgba(13,31,60,0.05); }
.article-body th{ background:var(--navy); color:var(--white); font-family:var(--font-head); font-weight:700; font-size:0.85rem; letter-spacing:0.05em; text-align:left; padding:14px 18px; }
.article-body td{ padding:14px 18px; border-bottom:1px solid var(--hairline); font-size:0.95rem; color:var(--article-text, var(--ink-mid)); }
.article-body tr:last-child td{ border-bottom:none; }
.article-body tr:nth-child(even) td{ background:rgba(79,156,249,0.03); }
.article-body td.num{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--navy); }

/* ---- Figur / Bild + Bildunterschrift (vereinheitlicht) ---- */
.article-figure, .artikel-bild{ margin:40px 0; }
.artikel-bild{ margin:36px 0; }
.article-figure img, .article-figure svg, .artikel-bild img{ width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 4px 24px rgba(13,31,60,0.10); }
.artikel-bild img{ border:1px solid var(--hairline); box-shadow:none; }
.article-figure figcaption, .artikel-bild figcaption{ font-size:var(--caption-size); color:var(--caption-color, var(--ink-muted)); margin-top:var(--caption-mt); line-height:var(--caption-lh); text-align:center; font-style:italic; }
.figure-placeholder{ border:2px dashed var(--blue-border); border-radius:12px; background:var(--white); padding:48px 24px; text-align:center; color:var(--ink-muted); }
.figure-placeholder .fp-icon{ font-family:var(--font-head); font-weight:900; font-size:1.6rem; color:var(--blue); margin-bottom:8px; }
.figure-placeholder .fp-text{ font-size:0.9rem; line-height:1.5; }

/* ---- Tool-CTA im Artikel ---- */
.tool-cta{ background:linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); border-radius:16px; padding:36px; margin:44px 0; text-align:center; position:relative; overflow:hidden; }
.tool-cta::before{ content:''; position:absolute; top:-40%; right:-20%; width:200px; height:200px; background:radial-gradient(circle, rgba(184,148,42,0.2) 0%, transparent 70%); pointer-events:none; }
.tool-cta-label{ display:inline-block; background:var(--gold); color:var(--white); font-family:var(--font-head); font-size:0.7rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; padding:6px 14px; border-radius:4px; margin-bottom:16px; position:relative; z-index:1; }
.tool-cta-title{ font-family:var(--font-head); font-size:1.4rem; font-weight:900; color:var(--white); margin-bottom:8px; position:relative; z-index:1; }
.tool-cta-text{ color:rgba(255,255,255,0.65); font-size:0.98rem; line-height:1.6; margin-bottom:20px; position:relative; z-index:1; }
.tool-cta-btn{ display:inline-block; background:var(--cta-bg, var(--gold)); color:var(--cta-color, var(--white)); font-family:var(--font-head); font-weight:700; font-size:0.95rem; padding:var(--cta-pad); border-radius:var(--radius); text-decoration:none !important; transition:transform var(--transition), box-shadow var(--transition); position:relative; z-index:1; box-shadow:0 4px 20px rgba(184,148,42,0.35); }
.tool-cta-btn:hover{ transform:translateY(-2px); background:var(--gold-light); box-shadow:0 6px 28px rgba(184,148,42,0.45); }

/* ---- Artikel-Ende ---- */
.article-end{ border-top:1px solid var(--hairline); margin-top:50px; padding-top:30px; }
.disclaimer{ font-size:0.88rem; color:var(--ink-muted); font-style:italic; line-height:1.6; margin-bottom:24px; }
.back-link{ display:inline-flex; align-items:center; gap:8px; color:var(--blue); text-decoration:none !important; font-weight:600; font-family:var(--font-head); font-size:0.95rem; margin-top:16px; }
.back-link:hover{ color:var(--navy); }

/* ---- Kontakt-/Feedback-Leiste + Modal ---- */
.kontakt-leiste{ line-height:1.2; background:var(--white); border-top:1px solid var(--hairline); padding:40px 20px; text-align:center; }
.kontakt-leiste-inner{ max-width:600px; margin:0 auto; }
.kontakt-leiste-label{ font-family:var(--font-head); font-size:0.75rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--blue); margin-bottom:10px; }
.kontakt-leiste h3{ font-family:var(--font-head); font-size:1.3rem; font-weight:900; color:var(--navy); margin-bottom:8px; }
.kontakt-leiste p{ color:var(--ink-muted); font-size:0.92rem; line-height:1.6; margin-bottom:20px; }
.kontakt-btn{ display:inline-block; background:var(--navy); color:var(--white); font-family:var(--font-head); font-weight:700; font-size:0.9rem; padding:12px 24px; border-radius:var(--radius); cursor:pointer; border:none; transition:background var(--transition), transform var(--transition); }
.kontakt-btn:hover{ background:var(--navy-light); transform:translateY(-1px); }
.kontakt-modal{ display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.6); align-items:center; justify-content:center; padding:20px; }
.kontakt-modal.open{ display:flex; }
.kontakt-card{ background:var(--white); border-radius:16px; padding:36px; max-width:480px; width:100%; position:relative; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.kontakt-close{ position:absolute; top:16px; right:16px; background:none; border:none; font-size:1.4rem; color:var(--ink-muted); cursor:pointer; line-height:1; }
.kontakt-close:hover{ color:var(--navy); }
.kontakt-card h3{ font-family:var(--font-head); font-size:1.2rem; font-weight:900; color:var(--navy); margin-bottom:6px; }
.kontakt-card .k-sub{ color:var(--ink-muted); font-size:0.88rem; margin-bottom:22px; line-height:1.5; }
.k-field{ margin-bottom:14px; }
.k-field label{ display:block; font-size:0.82rem; font-weight:600; color:var(--ink); margin-bottom:5px; }
.k-field input, .k-field textarea{ width:100%; border:1px solid var(--hairline); border-radius:var(--radius); padding:10px 14px; font-family:var(--font-body); font-size:0.92rem; color:var(--ink); background:var(--page-bg); transition:border-color var(--transition); resize:vertical; }
.k-field input:focus, .k-field textarea:focus{ outline:none; border-color:var(--blue); }
.k-field textarea{ min-height:100px; }
.k-counter{ text-align:right; font-size:0.78rem; color:var(--ink-muted); margin-top:4px; }
.k-counter.warn{ color:var(--gold); }
.k-counter.over{ color:var(--red); }
.k-submit{ width:100%; background:var(--navy); color:var(--white); border:none; border-radius:var(--radius); padding:14px; font-family:var(--font-head); font-weight:700; font-size:0.95rem; cursor:pointer; margin-top:8px; transition:background var(--transition); }
.k-submit:hover{ background:var(--navy-light); }
.k-submit:disabled{ opacity:0.6; cursor:default; }
.k-msg{ margin-top:12px; font-size:0.88rem; text-align:center; }
.k-msg.ok{ color:var(--green); font-weight:600; }
.k-msg.err{ color:var(--red); }

/* ---- Artikel-Breite + Mobile ---- */
@media (min-width: 768px){ .article-body{ width:var(--content-vw); } }
@media (max-width: 768px){
  .nav-links a{ font-size:0.8rem; padding:6px 10px; }
  .article-body > p:first-of-type::first-letter{ font-size:2.8rem; }
  .tool-cta{ padding:28px 20px; }
  .article-body table{ font-size:0.85rem; }
  .article-body th, .article-body td{ padding:10px 12px; }
}


/* ============================================================
   TOOL-LAYER (Theme dunkel) - 2026-06-06
   Genutzt von allen Tool-Seiten (body.theme-dark). Quelle: tool-template
   / tool-email-helfer (Referenz, 36/10-Geometrie).
   ============================================================ */

/* ---- Hero ---- */
body.theme-dark .hero{ padding:var(--hero-pad-top) var(--hero-pad-x) var(--hero-pad-bottom); text-align:center; position:relative; overflow:hidden; background:radial-gradient(ellipse at 50% 0%, rgba(79,156,249,0.12) 0%, transparent 70%); }
body.theme-dark .hero > :not(.bg-logo){ position:relative; z-index:1; }
body.theme-dark .hero-tag{ font-family:var(--font-head); font-size:0.75rem; font-weight:700; letter-spacing:0.25em; text-transform:uppercase; color:var(--blue); margin-bottom:20px; }
body.theme-dark .hero-title{ font-family:var(--font-head); font-size:clamp(2rem,5vw,3.5rem); font-weight:900; line-height:1.05; color:#fff; letter-spacing:-0.03em; margin:0 auto 16px; max-width:var(--hero-title-max); }
body.theme-dark .hero-title span{ color:var(--blue); }
body.theme-dark .hero-subtitle{ font-family:var(--font-head); font-size:clamp(0.95rem,2vw,1.2rem); font-weight:300; color:rgba(255,255,255,0.6); max-width:var(--hero-sub-max); margin:0 auto 8px; line-height:1.5; }
body.theme-dark .hero-meta{ font-size:0.85rem; color:rgba(255,255,255,0.4); margin-top:var(--hero-meta-mt); font-style:italic; }
body.theme-dark .hero .bg-logo{ height:calc(100% - var(--nav-height) - 40px); aspect-ratio:340 / 310; }

/* Hero-Titel schiebt sich beim Scrollen in den Header (alle Seiten, Desktop; un-themed = eine Quelle, R14) - JS: header-titel.js */
.hero-title{ will-change:transform,opacity; }
.nav-title{ position:absolute; left:50%; top:0; height:100%; display:flex; align-items:center; justify-content:center; transform:translateX(-50%); max-width:70%; pointer-events:none; }
.nav-title > span{ font-family:var(--font-head); font-weight:900; font-size:clamp(1.2rem,3vw,2.1rem); line-height:1.05; letter-spacing:-0.03em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transform:translateY(8px); }
.nav-title > span > span{ color:var(--blue); }
@media(max-width:768px){ .nav-title{ display:none; } }
/* Header-Titel-Wuerfel/Cursor (Opt-in .nav-title.wk-fx) - JS: header-titel.js (3. Modul) */
.nav-title.wk-fx span{ pointer-events:auto; }
.nav-title.wk-fx span::after{ content:""; display:none; width:0.6ch; height:0.9em; margin-left:6px; vertical-align:-0.08em; background:repeating-conic-gradient(var(--blue,#4f9cf9) 0 25%, transparent 0 50%) 0 0 / 2px 2px; }
.nav-title.wk-fx span.wk-typing::after,
.nav-title.wk-fx span.wk-done::after{ display:inline-block; animation:wk-nav-blink 1s step-end infinite; }

/* ---- Layout ---- */
body.theme-dark .container{ max-width:var(--content-max); margin:0 auto; padding:0 var(--page-pad); }
body.theme-dark main{ padding:var(--main-pad); }

/* ---- Hinweis-Box ---- */
body.theme-dark .hinweis-oben{ max-width:var(--hinweis-max); margin:0 auto var(--hinweis-mb); display:flex; gap:13px; align-items:flex-start; background:rgba(184,148,42,0.08); border:1px solid rgba(184,148,42,0.3); border-left:3px solid var(--gold); border-radius:var(--radius-md); padding:15px 18px; }
body.theme-dark .hinweis-oben .icon{ flex-shrink:0; font-size:1.05rem; line-height:1.5; color:var(--gold-light); }
body.theme-dark .hinweis-oben p{ font-size:0.88rem; color:var(--text-mid); line-height:1.55; margin:0; }
body.theme-dark .hinweis-oben strong{ color:var(--gold-light); font-weight:600; }

/* ---- Card / Formular ---- */
body.theme-dark .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--card-pad); margin-bottom:var(--card-mb); }
body.theme-dark .card-label{ font-family:var(--font-head); font-weight:700; font-size:1.05rem; margin-bottom:6px; }
body.theme-dark .card-hint{ font-size:0.9rem; color:var(--text-muted); margin-bottom:18px; }
body.theme-dark .step-num{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--blue); color:var(--navy); font-family:var(--font-head); font-weight:900; font-size:0.85rem; margin-right:9px; }
body.theme-dark .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
body.theme-dark .field{ display:flex; flex-direction:column; gap:7px; }
body.theme-dark .field-full{ margin-bottom:16px; }
body.theme-dark label{ font-size:0.82rem; font-weight:600; color:var(--text-mid); letter-spacing:0.3px; }
body.theme-dark input, body.theme-dark select, body.theme-dark textarea{ font-family:var(--font-body); font-size:0.97rem; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; transition:border-color var(--transition), box-shadow var(--transition); width:100%; resize:vertical; }
body.theme-dark input:focus, body.theme-dark select:focus, body.theme-dark textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-glow); }
body.theme-dark textarea{ min-height:80px; line-height:1.55; }
body.theme-dark ::placeholder{ color:var(--text-muted); }

/* ---- Preset-Chips ---- */
body.theme-dark .chips{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px; }
body.theme-dark .chip{ font-family:var(--font-body); font-size:0.85rem; background:var(--surface-2); color:var(--blue-light); border:1px solid var(--blue-border); border-radius:var(--radius-pill); padding:7px 15px; cursor:pointer; transition:background var(--transition), transform 0.15s; }
body.theme-dark .chip:hover{ background:var(--navy-light); transform:translateY(-1px); }

/* ---- Buttons ---- */
body.theme-dark .btn{ font-family:var(--font-head); font-weight:700; font-size:1rem; background:var(--blue); color:var(--navy); border:none; border-radius:var(--radius-md); padding:15px 28px; cursor:pointer; transition:transform 0.15s, box-shadow var(--transition), opacity var(--transition); display:inline-flex; align-items:center; gap:9px; }
body.theme-dark .btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:var(--btn-glow); }
body.theme-dark .btn:disabled{ opacity:0.5; cursor:not-allowed; }
/* ---- Token-Tool-Sende-Button: EINE Quelle fuer ALLE Tools (Groesse, Farbe, Grau-Zustand, Zweizeiler mit Pfeil). Neue Tools nur class="btn-send" geben. ---- */
body.theme-dark .btn-send{ font-family:var(--font-head); font-weight:700; font-size:0.95rem; background:#4f9cf9; color:#ffffff; border:none; border-radius:8px; padding:13px 26px; width:303px; max-width:100%; margin-left:auto; margin-right:auto; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; transition:transform 0.15s, box-shadow var(--transition), opacity var(--transition); }
body.theme-dark .btn-send:hover:not(:disabled){ background:#93c5fd; transform:translateY(-1px); }
body.theme-dark .btn-send:disabled{ background:rgba(79,156,249,0.3); color:#ffffff; cursor:not-allowed; transform:none; }
body.theme-dark .btn-send .btn-arrow{ line-height:1; }
body.theme-dark .btn-ghost{ background:transparent; color:var(--blue); border:1px solid var(--blue-border); }
body.theme-dark .btn-ghost:hover:not(:disabled){ background:var(--blue-glow); box-shadow:none; }
body.theme-dark .actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* ---- Fehler / Loader ---- */
body.theme-dark .error{ background:rgba(220,80,80,0.12); border:1px solid rgba(220,80,80,0.35); color:#ffb3b3; border-radius:var(--radius-md); padding:14px 16px; font-size:0.9rem; margin-top:14px; display:none; }
body.theme-dark .error.show{ display:block; }
body.theme-dark .loader{ display:inline-flex; gap:5px; align-items:center; }
body.theme-dark .loader span{ width:8px; height:8px; border-radius:50%; background:var(--navy); animation:bounce 1.2s infinite ease-in-out; }
body.theme-dark .loader span:nth-child(2){ animation-delay:0.15s; }
body.theme-dark .loader span:nth-child(3){ animation-delay:0.3s; }
@keyframes bounce{ 0%,80%,100%{ transform:scale(0.6); opacity:0.5; } 40%{ transform:scale(1); opacity:1; } }

/* ---- Ergebnis (Variante A: .output-card) ---- */
body.theme-dark .output-card{ display:none; }
body.theme-dark .output-card.show{ display:block; animation:fade 0.4s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
body.theme-dark .output-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
body.theme-dark .output-text{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; white-space:pre-wrap; font-size:0.97rem; line-height:1.65; color:var(--text); min-height:80px; }
body.theme-dark .copy-btn{ font-family:var(--font-body); font-size:0.85rem; font-weight:600; background:var(--surface-2); color:var(--blue-light); border:1px solid var(--blue-border); border-radius:var(--radius); padding:8px 16px; cursor:pointer; transition:background var(--transition); }
body.theme-dark .copy-btn:hover{ background:var(--navy-light); }

/* ---- Ergebnis (Variante B: #ergebnis / .out-block) ---- */
body.theme-dark #ergebnis{ display:none; }
body.theme-dark #ergebnis.show{ display:block; animation:fade 0.4s ease; }
body.theme-dark .out-block{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin-bottom:16px; }
body.theme-dark .out-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
body.theme-dark .out-titel{ font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--blue-light); }
body.theme-dark .out-text{ white-space:pre-wrap; font-family:var(--font-body); font-size:0.92rem; line-height:1.7; color:var(--text); }
body.theme-dark .mini-btn{ font-family:var(--font-body); font-size:0.8rem; font-weight:600; background:var(--surface-2); color:var(--blue-light); border:1px solid var(--blue-border); border-radius:var(--radius); padding:6px 12px; cursor:pointer; transition:background var(--transition); }
body.theme-dark .mini-btn:hover{ background:var(--navy-light); }

/* ---- hCaptcha ---- */
body.theme-dark .captcha-wrap{ margin:0 0 16px; }
body.theme-dark .captcha-wrap .h-captcha{ min-height:78px; }

/* ---- Kontakt-Leiste (dunkle Variante) ---- */
body.theme-dark .kontakt-leiste{ background:rgba(21,45,87,0.6); border-top:1px solid rgba(79,156,249,0.15); }
body.theme-dark .kontakt-leiste h3{ color:#fff; }
body.theme-dark .kontakt-leiste p{ color:rgba(255,255,255,0.5); }
body.theme-dark .kontakt-btn{ background:var(--blue); color:#fff; }
body.theme-dark .kontakt-btn:hover{ background:var(--blue-light); }

/* ---- Kontakt-Modal: helle Karte trotz dunklem Theme ---- */
body.theme-dark .kontakt-card .k-sub{ color:#8896b0; }
body.theme-dark .kontakt-close{ color:#8896b0; }
body.theme-dark .kontakt-close:hover{ color:#0d1f3c; }
body.theme-dark .k-field label{ color:#0d1f3c; }
body.theme-dark .kontakt-card .k-field input,
body.theme-dark .kontakt-card .k-field textarea{ border:1px solid #e2e8f2; border-radius:8px; padding:10px 14px; font-size:0.92rem; color:#0d1f3c; background:#f7f8fa; }
body.theme-dark .kontakt-card .k-field textarea{ min-height:100px; }
body.theme-dark .kontakt-card .k-field input:focus,
body.theme-dark .kontakt-card .k-field textarea:focus{ border-color:#4f9cf9; box-shadow:none; }
body.theme-dark .k-counter{ color:#8896b0; }

/* ---- Tool-Mobile ---- */
@media(max-width:600px){ body.theme-dark .card{ padding:24px 20px; } }
@media(max-width:560px){ body.theme-dark .row{ grid-template-columns:1fr; } }
@media(min-width:768px){ body.theme-dark .container{ width:var(--content-vw); } }

/* ============================================================
   HEADER-NAV DECODE/SCRAMBLE-EFFEKT (R14 zentrale Quelle)
   Opt-in pro Seite: <nav class="nav-fx"> ... </nav>
   JS dazu: header-titel.js (zweite IIFE). Ruht, solange keine
   Seite die Klasse nav-fx traegt. Farbe = --blue.
   ============================================================ */
nav.nav-fx .nav-links a { position: relative; z-index: 0; }
/* Hintergrund-Blitz: hart rein (0s), sanft raus (0.25s) */
nav.nav-fx .nav-links a::before {
  content: ""; position: absolute; inset: -2px -4px; border-radius: var(--radius-sm, 6px);
  background: var(--blue, #4f9cf9); opacity: 0; z-index: -1; pointer-events: none;
  transition: opacity .25s ease;
}
nav.nav-fx .nav-links a:hover::before { opacity: .14; transition-duration: 0s; }
/* Blinkender Dither-Cursor hinter dem Wort (nur per JS-Klasse sichtbar) */
nav.nav-fx .nav-links a::after {
  content: ""; display: none; width: 1.05ch; height: 1em; margin-left: 6px; vertical-align: -0.12em;
  background: repeating-conic-gradient(var(--blue, #4f9cf9) 0 25%, transparent 0 50%) 0 0 / 2px 2px;
}
nav.nav-fx .nav-links a.wk-typing::after { display: inline-block; animation: wk-nav-blink 1s step-end infinite; }
nav.nav-fx .nav-links a.wk-done::after   { display: inline-block; animation: wk-nav-blink 1s step-end infinite; }
@keyframes wk-nav-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }