/* ============================================================
   Elektrotechnik Schneider — gemeinsame Basis (Tokens)
   S/W mit grünem Strom-Akzent · technisch + handwerklich
   ============================================================ */
/* Schriften werden lokal über assets/fonts/fonts.css geladen (DSGVO).
   Der frühere Google-Fonts-@import wurde bewusst entfernt. */

:root{
  /* Tinten & Papier — neutral, minimal getönt */
  --ink:        #0C0D0C;
  --ink-2:      #16181A;
  --ink-3:      #232629;
  --paper:      #FFFFFF;
  --paper-2:    #F3F4F1;   /* leicht grünlich-neutrales offwhite */
  --paper-3:    #E9EBE6;
  --line:       #E0E2DC;
  --line-dark:  rgba(255,255,255,.10);
  --muted:      #6B6F6A;
  --muted-d:    #9DA39B;   /* auf dunkel */

  /* Strom-Grün */
  --green:      #6FBE36;   /* primär, Flächen/Akzent */
  --green-bright:#8BD94E;  /* glow auf dunkel */
  --green-deep: #3C7A1B;   /* grüner Text auf Weiß (Kontrast) */
  --green-ghost: rgba(111,190,54,.12);

  --font-head: 'Saira', system-ui, sans-serif;
  --font-cond: 'Saira Condensed', 'Saira', sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 4px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  font-weight:450; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.04; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wide{ max-width:1340px; }

/* Kicker / Mono-Label (technische Anmutung) */
.kicker{
  font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--green-deep);
  display:inline-flex; align-items:center; gap:.6em;
}
.kicker::before{ content:""; width:22px; height:2px; background:var(--green); display:inline-block; }
.kicker.on-dark{ color:var(--green-bright); }

/* Buttons */
.btn{
  --bg:var(--ink); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-head); font-weight:600; font-size:15.5px;
  letter-spacing:.01em; padding:15px 26px; border-radius:var(--radius);
  background:var(--bg); color:var(--fg); border:1.5px solid var(--bg);
  cursor:pointer; transition:transform .15s ease, background .2s, color .2s, box-shadow .2s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--green{ --bg:var(--green); --fg:#0C0D0C; box-shadow:0 8px 24px -10px rgba(111,190,54,.7); }
.btn--green:hover{ --bg:var(--green-bright); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ --bg:var(--ink); --fg:#fff; }
.btn--ghost-light{ --bg:transparent; --fg:#fff; border-color:rgba(255,255,255,.4); }
.btn--ghost-light:hover{ --bg:#fff; --fg:var(--ink); border-color:#fff; }
.btn svg{ width:18px; height:18px; }

/* Platinen-Motiv (Circuit) als dekoratives SVG-Linienwerk */
.circuit{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.circuit svg{ width:100%; height:100%; }
.circuit path,.circuit line{ fill:none; stroke:currentColor; stroke-width:1.2; }
.circuit circle{ fill:currentColor; }

/* Section rhythm */
.section{ padding-block:clamp(64px, 9vw, 120px); }
.eyebrow-row{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }

/* WhatsApp floating */
.wa-fab{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.4); color:#fff;
  transition:transform .18s ease;
}
.wa-fab:hover{ transform:scale(1.08); }
.wa-fab svg{ width:32px; height:32px; }

/* Bild-Platzhalter (Stockfoto-Stimmung andeuten) */
.ph{
  position:relative; overflow:hidden; background:var(--paper-3);
  background-image:repeating-linear-gradient(135deg, transparent 0 11px, rgba(12,13,12,.045) 11px 12px);
  display:grid; place-items:center; color:var(--muted);
}
.ph .ph-label{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; padding:6px 12px; border:1px solid var(--line);
  background:rgba(255,255,255,.7); border-radius:2px; text-align:center; line-height:1.4;
}
.ph.dark{ background:#101314; background-image:repeating-linear-gradient(135deg, transparent 0 11px, rgba(255,255,255,.04) 11px 12px); color:var(--muted-d); }
.ph.dark .ph-label{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }

@media (max-width:760px){
  body{ font-size:16px; }
}