/* site.css — Volt & Sohn, Welt: Der Stromlaufplan
   Papierweiss-Grund, Tuscheschwarz-Linien, Karmin nur für den aktiven Strompfad.
   Alle Werte als Variablen (Phase 6: Tweak-Panel). */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-wght.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* Welt-Farben */
  --papier: #fbfaf7;
  --papier-tief: #f3f1ea;
  --tinte: #1a1d21;
  --tinte-weich: #3a3e44;
  --grau: #676c74;
  --linie: #d8d4cb;
  --linie-stark: #1a1d21;
  --karmin: #c8372d;
  --karmin-tief: #a02a22;

  /* Typografie */
  --schrift: "Inter", system-ui, sans-serif;
  --schrift-kopf: "Space Grotesk", "Inter", sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* Abstände (Tweak-Panel) */
  --abstand-x: clamp(1rem, 4vw, 3rem);
  --abstand-block: clamp(3.5rem, 9vw, 7.5rem);
  --max-b: 72rem;
  --h1-size: clamp(2.4rem, 6vw, 4.2rem);
  --h2-size: clamp(1.6rem, 3.6vw, 2.4rem);
  --zeile: 1.6;

  /* Schaltzeichen */
  --knoten-r: 3.5px;
  --linien-w: 1.5px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--schrift);
  background: var(--papier);
  color: var(--tinte);
  line-height: var(--zeile);
  font-size: 1.0125rem;
}

::selection { background: var(--karmin); color: var(--papier); }

/* Browser-Surfaces thematisieren */
a { color: var(--tinte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--karmin); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
  font-family: var(--schrift-kopf);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 620;
  text-wrap: balance;
}
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: 1.18rem; font-weight: 600; }

p + p { margin-top: 0.8em; }

.etikett {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--grau);
}

/* ---------- Sammelschiene ---------- */
.schiene {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--linie);
  z-index: 60;
}
.schiene .fuellung {
  height: 100%;
  width: 0;
  background: var(--karmin);
  transition: width 0.25s ease-out;
}

/* ---------- Kopfzeile ---------- */
.kopfzeile {
  position: sticky;
  top: 3px;
  z-index: 50;
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--linien-w) solid var(--linie-stark);
}
.kopfzeile-innen {
  max-width: var(--max-b);
  margin: 0 auto;
  padding: 0.7rem var(--abstand-x);
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.marke {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--schrift-kopf);
  font-weight: 640;
  font-size: 1.05rem;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.marke svg { display: block; }
.kopfzeile nav {
  margin-left: auto;
  display: flex;
  gap: 1.3rem;
  align-items: center;
}
.kopfzeile nav a:not(.knopf) {
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--tinte-weich);
  padding: 0.25rem 0;
}
.kopfzeile nav a:not(.knopf):hover { color: var(--karmin); }

/* ---------- Knöpfe: der geschlossene Schalter ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--tinte);
  color: var(--papier);
  font-family: var(--schrift);
  font-size: 0.92rem;
  font-weight: 560;
  text-decoration: none;
  padding: 0.72rem 1.25rem;
  border: var(--linien-w) solid var(--tinte);
  cursor: pointer;
  position: relative;
  transition: background 0.18s ease-out, border-color 0.18s ease-out;
}
.knopf svg { transition: transform 0.18s ease-out; }
.knopf:hover:not(:disabled) { background: var(--karmin); border-color: var(--karmin); }
.knopf:hover:not(:disabled) svg { transform: translateX(3px); }
.knopf:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.knopf.ghost {
  background: transparent;
  color: var(--tinte);
}
.knopf.ghost:hover { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }

/* ---------- Notdienst-Leitung ---------- */
.notdienst-leitung {
  background: var(--tinte);
  color: var(--papier-tief);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0.45rem var(--abstand-x);
}
.notdienst-leitung a { color: #fff; }
.notdienst-leitung .punkt { color: var(--karmin); animation: blinken 2.4s infinite; }
@keyframes blinken { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---------- Abschnitte am Sammelschienen-Raster ---------- */
.abschnitt {
  position: relative;
  max-width: var(--max-b);
  margin: 0 auto;
  padding: var(--abstand-block) var(--abstand-x);
}
.abschnitt::before {
  /* Abzweigung von der Sammelschiene */
  content: "";
  position: absolute;
  top: 3px;
  left: calc(var(--abstand-x) + 2rem);
  width: var(--linien-w);
  height: clamp(2rem, 6vw, 4rem);
  background: var(--linie-stark);
}
.abschnitt .knoten {
  position: absolute;
  top: calc(3px + clamp(2rem, 6vw, 4rem));
  left: calc(var(--abstand-x) + 2rem);
  transform: translateX(-46%);
  width: calc(var(--knoten-r) * 2 + 1px);
  height: calc(var(--knoten-r) * 2 + 1px);
  border-radius: 50%;
  background: var(--linie-stark);
}
.abschnitt.aktiv::before, .abschnitt.aktiv .knoten { background: var(--karmin); }

/* Nummerierter Baustein-Titel */
.baustein-kopf {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.baustein-nr {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--grau);
  border: 1px solid var(--linie);
  border-radius: 50%;
  width: 2.3rem;
  height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transform: translateY(0.35rem);
}
.abschnitt.aktiv .baustein-nr { border-color: var(--karmin); color: var(--karmin); }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--max-b);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--abstand-x) clamp(2.5rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 { margin: 0.6rem 0 1.2rem; }
.hero h1 .ort { white-space: nowrap; }
.hero-text { font-size: 1.1rem; color: var(--tinte-weich); max-width: 34rem; }
.hero-aktionen { display: flex; gap: 0.9rem; margin-top: 1.8rem; flex-wrap: wrap; align-items: center; }
.leistungs-etiketten {
  margin-top: 2rem;
  display: flex;
  gap: 0.35rem 1rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--grau);
}
.leistungs-etiketten span::before {
  content: "—";
  margin-right: 0.5rem;
  color: var(--linie-stark);
}
.hero-schaltung svg { width: 100%; height: auto; display: block; }
.hero-schaltung text { font-size: 12px; }
.hero-fig {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--grau);
  margin-top: 0.5rem;
  text-align: right;
}

/* ---------- Leistungen ---------- */
.leistung {
  display: grid;
  grid-template-columns: minmax(0, 5rem) 1fr;
  gap: 1rem 1.6rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--linie);
}
.leistung:last-child { border-bottom: 1px solid var(--linie); }
.leistung-zeichen { color: var(--tinte); }
.leistung-zeichen svg { width: 2.6rem; height: 2.6rem; }
.leistung h3 { margin-bottom: 0.4rem; }
.leistung p { color: var(--tinte-weich); max-width: 44rem; }
.leistung .hinweis { font-family: var(--mono); font-size: 0.78rem; color: var(--grau); margin-top: 0.5rem; }

/* ---------- Einsatzgebiet: Zonenplan ---------- */
.zonen {
  background: var(--papier-tief);
  border-top: var(--linien-w) solid var(--linie-stark);
  border-bottom: var(--linien-w) solid var(--linie-stark);
}
.zonen-innen {
  max-width: var(--max-b);
  margin: 0 auto;
  padding: var(--abstand-block) var(--abstand-x);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  /* Inset gegen flush children (Detector) */
  padding-top: calc(var(--abstand-block) + 0.5rem);
}
.zonen-liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1.6rem;
  font-family: var(--mono);
  font-size: 0.92rem;
  margin-top: 1.4rem;
}
.zonen-liste li { list-style: none; display: flex; align-items: center; gap: 0.6rem; }
.zonen-liste .knoten-klein {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tinte); flex: none;
}
.zonen-liste .aktiv .knoten-klein { background: var(--karmin); }
.zonen-karte svg { width: 100%; height: auto; display: block; }
.zonen-karte text { font-size: 12px; }

/* ---------- Über uns ---------- */
.ueber {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.ueber .demo-hinweis {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--grau);
  border: 1px dashed var(--linie);
  padding: 0.5rem 0.8rem;
  display: inline-block;
  margin-top: 1.2rem;
}
.fakten-tafel {
  border: var(--linien-w) solid var(--linie-stark);
  background: var(--papier);
}
.fakten-tafel .zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--linie);
  font-size: 0.9rem;
}
.fakten-tafel .zeile:last-child { border-bottom: none; }
.fakten-tafel .zeile .k { font-family: var(--mono); font-size: 0.78rem; color: var(--grau); }

/* ---------- FAQ: Doppelschalter-Liste ---------- */
.faq details {
  border-top: 1px solid var(--linie);
}
.faq details:last-child { border-bottom: 1px solid var(--linie); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .schalter-zeichen {
  flex: none;
  width: 2.1rem; height: 1.1rem;
  border: var(--linien-w) solid var(--tinte);
  border-radius: 2px;
  position: relative;
  transform: translateY(0.2rem);
  background: var(--papier);
  transition: background 0.15s ease-out;
}
.faq .schalter-zeichen::after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 45%; height: calc(100% - 2px);
  background: var(--tinte);
  transition: left 0.15s ease-out, background 0.15s ease-out;
}
.faq details[open] .schalter-zeichen { background: var(--karmin); border-color: var(--karmin); }
.faq details[open] .schalter-zeichen::after { left: 53%; background: var(--papier); }
.faq .antwort { padding: 0 0 1.2rem 3.1rem; color: var(--tinte-weich); max-width: 42rem; }

/* ---------- Preise: Zähler-Tafel ---------- */
.preise-band {
  background: var(--tinte);
  color: var(--papier-tief);
  padding: 0.5rem 0;
}
.preise-band .abschnitt { position: relative; }
.preise-band h2 { color: var(--papier); }
.preise-band .baustein-nr { border-color: #4a4f57; color: #9aa0a8; }
.preise-band .aktiv .baustein-nr { border-color: var(--karmin); color: #e8968f; }
.preise-intro { color: #b9bdc4; max-width: 40rem; }
.preise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.2rem;
  align-items: stretch;
}
.paket {
  border: 1px solid #4a4f57;
  background: var(--tinte);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.paket.top { border-color: var(--papier); border-width: 2px; }
.paket .tag {
  position: absolute;
  top: -0.75rem;
  left: 1.2rem;
  background: var(--karmin);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 0.18rem 0.6rem;
}
.paket h3 { color: var(--papier); font-size: 1.05rem; }
.paket .rolle { color: #9aa0a8; font-size: 0.85rem; margin-top: 0.15rem; }
.paket .preis {
  font-family: var(--schrift-kopf);
  font-size: 1.7rem;
  color: var(--papier);
  margin: 1.1rem 0 0.1rem;
  font-weight: 620;
}
.paket .preis small { font-size: 0.85rem; color: #9aa0a8; font-weight: 400; }
.paket .setup { font-family: var(--mono); font-size: 0.78rem; color: #9aa0a8; margin-bottom: 1rem; }
.paket ul { list-style: none; margin-top: 0.4rem; }
.paket li {
  padding: 0.42rem 0 0.42rem 1.35rem;
  border-top: 1px solid #3a3f47;
  font-size: 0.88rem;
  color: #c9cdd3;
  position: relative;
}
.paket li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.95rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid #6b7078;
}
.paket li.inkl::before { background: var(--karmin); border-color: var(--karmin); }
.paket .knopf { margin-top: auto; justify-content: center; }
.paket .knopf.top-knopf { background: var(--papier); color: var(--tinte); border-color: var(--papier); }
.paket .knopf.top-knopf:hover { background: var(--karmin); color: #fff; border-color: var(--karmin); }
.preise-fuss {
  margin-top: 1.6rem;
  color: #9aa0a8;
  font-size: 0.88rem;
}
.preise-fuss a { color: var(--papier); }

/* ---------- Paket-Überleitung ---------- */
.ueberleitung {
  text-align: left;
}
.ueberleitung .gross {
  font-family: var(--schrift-kopf);
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.2;
  font-weight: 620;
  max-width: 34rem;
}
.ueberleitung .gross .rot { color: var(--karmin); }
.punktliste {
  list-style: none;
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 2rem;
  max-width: 44rem;
}
.punktliste li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  font-size: 0.95rem;
  color: var(--tinte-weich);
}
.punktliste .ader {
  flex: none;
  width: 1.4rem;
  height: var(--linien-w);
  background: var(--tinte);
  transform: translateY(-0.32rem);
}

/* ---------- Formular ---------- */
.formular-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  max-width: 44rem;
}
.feld { display: flex; flex-direction: column; gap: 0.35rem; }
.feld.voll { grid-column: 1 / -1; }
.feld label { font-family: var(--mono); font-size: 0.78rem; color: var(--grau); }
.feld input, .feld select, .feld textarea {
  font: inherit;
  font-size: 0.95rem;
  background: var(--papier);
  border: var(--linien-w) solid var(--tinte);
  border-radius: 2px;
  padding: 0.65rem 0.8rem;
  color: var(--tinte);
}
.feld textarea { min-height: 7.5rem; resize: vertical; }
.feld input[aria-invalid="true"], .feld select[aria-invalid="true"], .feld textarea[aria-invalid="true"] {
  border-color: var(--karmin);
  border-width: 2px;
}
.feld .hinweis { font-size: 0.78rem; color: var(--grau); }
.form-status { min-height: 1.4rem; font-size: 0.92rem; margin-top: 0.9rem; }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* Direkt-Kontakt */
.direkt {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1rem 2.4rem;
  justify-content: start;
  font-size: 0.92rem;
}
.direkt .k { font-family: var(--mono); font-size: 0.78rem; color: var(--grau); display: block; }

/* ---------- Footer ---------- */
.fuss {
  border-top: var(--linien-w) solid var(--linie-stark);
  margin-top: var(--abstand-block);
}
.fuss-innen {
  max-width: var(--max-b);
  margin: 0 auto;
  padding: 2.2rem var(--abstand-x) 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
}
.fuss nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.fuss nav a {
  font-size: 0.86rem;
  color: var(--tinte-weich);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0;
}
.fuss .demo-zeile {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--grau);
  border-top: 1px solid var(--linie);
  padding-top: 1rem;
  margin-top: 0.4rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* ---------- Rechtstexte (Phase 7 vorbereitet) ---------- */
.rechtstext {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--abstand-block) var(--abstand-x) 3rem;
}
.rechtstext h1 { margin: 0.8rem 0 1.6rem; }
.rechtstext h2 { font-size: 1.25rem; margin: 2.2rem 0 0.7rem; }
.rechtstext p, .rechtstext li { color: var(--tinte-weich); }
.rechtstext ul, .rechtstext ol { padding-left: 1.4rem; margin: 0.6rem 0; }
.rechtstext li { margin: 0.3rem 0; }
.rechtstext address { font-style: normal; line-height: 1.7; }

/* ---------- Scroll-Reveal ----------
   Sicher gebaut: Der Inhalt ist standardmässig sichtbar. Die Animation läuft nur,
   wenn JS die Klasse .js-reveal bereit auf .reveal setzt (main.js beim Start).
   Ohne JavaScript, in Druckansicht und bei Vollseiten-Screenshots bleibt alles sichtbar. */
.reveal { opacity: 1; }
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.js-reveal .reveal.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
}
@media print {
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-schaltung { max-width: 26rem; margin: 0 auto; }
  .zonen-innen, .ueber { grid-template-columns: 1fr; }
  .preise-grid { grid-template-columns: 1fr; max-width: 26rem; }
  .kopfzeile nav { gap: 0.9rem; }
}
/* ---------- Mobile Navigation (Burger) ----------
   Basis: aus (Desktop). Die Media-Query oben schaltet ihn auf Mobil ein.
   Wichtig: Diese Basis-Regel muss VOR der Media-Query stehen. */
.kopfzeile .burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--linie-stark);
  border-radius: 4px;
  color: var(--tinte);
  cursor: pointer;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--linie);
  background: var(--papier);
}
.mobile-nav a {
  padding: 0.9rem var(--abstand-x);
  border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-head);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav[hidden] { display: none; }

@media (max-width: 640px) {
  .kopfzeile nav:not(.mobile-nav) a:not(.knopf) { display: none; }
  .kopfzeile .burger { display: inline-flex; }
  /* Mobile-Nav-Links trotz Nav-Ausblendung sichtbar (höhere Spezifität) */
  .kopfzeile .mobile-nav a { display: flex; }
  .formular-grid { grid-template-columns: 1fr; }
  .leistung { grid-template-columns: 1fr; }
  .leistung-zeichen svg { width: 2rem; height: 2rem; }
  .direkt { grid-template-columns: 1fr; gap: 0.9rem; }
  .punktliste { grid-template-columns: 1fr; }
  .zonen-liste { grid-template-columns: 1fr 1fr; }
  .faq .antwort { padding-left: 0; }
  .faq summary { gap: 0.7rem; }
}

/* ---------- Figuren auf Unterseiten ---------- */
.seite-fig {
  margin: 0;
  border: 1px solid var(--linie);
  background: var(--papier);
  padding: clamp(1rem, 3vw, 1.8rem);
  max-width: 100%;
}
.seite-fig img {
  width: 100%;
  height: auto;
  display: block;
}
.seite-fig figcaption {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--grau);
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linie);
}

/* ---------- CAP (selbst gehostet) ---------- */
.cap-bereich {
  margin-bottom: 1.2rem;
  min-height: 74px;
}
.cap-bereich cap-widget {
  display: inline-block;
}