/* =============================================================================
   VOLTKÖPFE — DESIGN-SYSTEM "STROMLAUF"
   Stand 08.08.2026 · gemeinsame Basis für alle Seiten
   -----------------------------------------------------------------------------
   Gestaltungsthese
   Die Seite ist ein Stromlaufplan. Links läuft eine Sammelschiene durch das
   ganze Dokument, jeder Abschnitt haengt als nummerierter Knoten daran, und
   beim Scrollen wandert die Ladung mit. Preise stehen darin wie in einem
   lesbaren Angebot: Tabellensatz, Fuehrungspunkte, Summenstrich.

   Farblogik (bewusst zweigeteilt)
   - ELEKTRISCH (Blau/Cyan) = das System, die Technik, die Verbindung
   - KUPFER               = Geld. Jeder Preis ist kupfern. Nichts sonst.
   Damit unterscheidet sich die Seite von der ueblichen Blau-Neon-Optik und
   bindet zugleich die Bildwelt (Kupferleiter, Messing) ein.

   Regeln
   - Kein Inline-Script (CSP). Schriften self-hosted, 0 externe Requests.
   - Zahlen immer tabellarisch (font-variant-numeric: tabular-nums).
   - Monospace kommt aus dem System = 0 KB und verstaerkt den technischen Ton.
   - Jede Bewegung hat einen reduced-motion-Fallback.
============================================================================= */

/* ---------- 1 · Tokens ---------------------------------------------------- */
:root{
  /* Flaechen */
  --bg:        #07070B;
  --bg-2:      #0B0B12;
  --panel:     #0E0E17;
  --panel-2:   #12121C;

  /* Schrift */
  --text:      #F2F2F7;
  --muted:     #A7A7BC;
  --dim:       #6E7288;

  /* Linien */
  --line:      rgba(240,240,250,.09);
  --line-2:    rgba(240,240,250,.17);
  --line-3:    rgba(240,240,250,.30);

  /* Elektrisch = System */
  --volt:      #4D5DFF;
  --volt-soft: #94A0FF;
  --spark:     #22D3EE;
  --violet:    #A855F7;

  /* Kupfer = Geld */
  --kupfer:    #C98B5A;
  --kupfer-hell:#E8B98C;
  --messing:   #D8B36A;

  /* Signal */
  --ok:        #4ADE80;
  --warn:      #F2C14E;

  /* Typo */
  --f-display: 'Space Grotesk','Inter',system-ui,sans-serif;
  --f-body:    'Inter',system-ui,-apple-system,sans-serif;
  --f-mono:    ui-monospace,'SFMono-Regular','Cascadia Mono','Consolas','Liberation Mono',monospace;

  /* Raster */
  --maxw:      1180px;
  --gutter:    clamp(18px,4vw,40px);
  --rail:      clamp(34px,5.5vw,74px);   /* Abstand Sammelschiene -> Inhalt */

  /* Bewegung */
  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-in:   cubic-bezier(.7,0,.84,0);
  --t-fast:    .22s;
  --t:         .45s;
  --t-slow:    .9s;
}

/* ---------- 2 · Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--f-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{max-width:100%;height:auto;display:block}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--volt-soft);text-decoration-color:color-mix(in srgb,var(--volt-soft) 40%,transparent);text-underline-offset:3px}
a:hover{color:var(--spark)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.08;letter-spacing:-.025em;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--spark);outline-offset:3px;border-radius:2px}

/* Sprungmarke */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--volt);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}

/* ---------- 3 · Layout ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* Der Inhalt rueckt nach rechts, damit links die Sammelschiene Platz hat */
.stromlauf{position:relative;padding-left:var(--rail)}

/* Die Sammelschiene selbst */
.schiene{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line-2);pointer-events:none}
.schiene::before{ /* die wandernde Ladung */
  content:"";position:absolute;left:-1px;top:0;width:3px;height:var(--ladung,0px);
  background:linear-gradient(180deg,transparent,var(--volt) 18%,var(--spark) 82%,transparent);
  box-shadow:0 0 14px color-mix(in srgb,var(--spark) 55%,transparent);
  transition:height .12s linear;
}
@media (max-width:860px){
  .stromlauf{padding-left:0}
  .schiene{display:none}
}

/* ---------- 4 · Abschnitt im Schaltplan-Stil ------------------------------ */
.abschnitt{position:relative;padding-block:clamp(64px,9vw,120px)}
.abschnitt + .abschnitt{border-top:1px solid var(--line)}

/* Knoten auf der Schiene */
.knoten{position:absolute;left:calc(var(--rail) * -1);top:clamp(64px,9vw,120px);width:1px;height:1px}
.knoten::before{ /* Stichleitung zum Inhalt */
  content:"";position:absolute;left:1px;top:calc(.62em + 2px);width:calc(var(--rail) - 14px);height:1px;background:var(--line-2);
}
.knoten::after{ /* Raute */
  content:"";position:absolute;left:-4.5px;top:calc(.62em - 2px);width:9px;height:9px;
  background:var(--bg);border:1px solid var(--line-3);transform:rotate(45deg);transition:all var(--t) var(--ease);
}
.abschnitt.aktiv .knoten::after{border-color:var(--spark);background:var(--spark);box-shadow:0 0 12px color-mix(in srgb,var(--spark) 70%,transparent)}
@media (max-width:860px){.knoten{display:none}}

/* Kopfzeile: 01 ── LEISTUNGEN ─────────── */
.kopf{display:flex;align-items:center;gap:14px;margin-bottom:clamp(24px,3.5vw,44px)}
.kopf .nr{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;color:var(--spark);flex:none}
.kopf .titel{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);flex:none}
.kopf .strich{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}

/* ---------- 5 · Typografie-Bausteine -------------------------------------- */
.h-riesig{font-size:clamp(2.6rem,8.5vw,6.4rem);letter-spacing:-.045em;line-height:.95}
.h-gross {font-size:clamp(2rem,4.6vw,3.5rem)}
.h-mittel{font-size:clamp(1.4rem,2.6vw,2.1rem)}
.h-klein {font-size:clamp(1.05rem,1.5vw,1.25rem);letter-spacing:-.015em}
.lead{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--muted);max-width:60ch}
.klein{font-size:.86rem;color:var(--muted)}
.winzig{font-size:.76rem;color:var(--dim);line-height:1.5}
.mono{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* Kupfer = Geld. Ausnahmslos. */
.geld{font-family:var(--f-display);font-variant-numeric:tabular-nums;color:var(--kupfer-hell);letter-spacing:-.02em}
.geld-gross{font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:700;line-height:1}

/* ---------- 6 · Messwert-Leiste (Instrumententafel) ----------------------- */
.messwerte{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.messwert{padding:16px 18px;border-right:1px solid var(--line)}
.messwert:last-child{border-right:0}
.messwert .l{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:6px}
.messwert .w{font-family:var(--f-display);font-size:1.28rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media (max-width:640px){.messwert{border-right:0;border-bottom:1px solid var(--line)}.messwert:last-child{border-bottom:0}}

/* ---------- 7 · Angebots-Block (das Kernstueck) --------------------------- */
.angebot{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:clamp(20px,3vw,30px)}
.angebot .kopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line-2);margin-bottom:8px}
.angebot .kopfzeile .mono{color:var(--muted)}

.posten{list-style:none}
.posten li{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px dotted var(--line)}
.posten li:last-child{border-bottom:0}
/* 🔴 .was MUSS schrumpfen duerfen. Mit flex:none haben lange Bezeichnungen den
   Preis auf dem Handy aus dem Bild geschoben (gemessen: bis 137 px Ueberlauf). */
.posten .was{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.posten .fuehrung{flex:1 1 24px;border-bottom:1px dotted var(--line-2);transform:translateY(-4px);min-width:10px}
/* 🔴 Feste Breite fuer die Preisspalte. Ohne sie beginnt jeder Preis an einer
   anderen Stelle, weil die Spalte mit der Textlaenge waechst — das war der
   „kreuz und quer"-Eindruck. Jetzt stehen alle Betraege eines Blocks auf
   derselben Kante, links wie rechts. */
/* Breite bewusst in rem, NICHT in em: „inklusive" steht in einer kleineren
   Schrift, dieselbe em-Zahl haette dort eine andere Breite ergeben — dann
   stehen Betraege und Woerter wieder auf verschiedenen Kanten. */
.posten .preis{flex:0 0 auto;min-width:7.2rem;text-align:right;
  font-family:var(--f-display);font-variant-numeric:tabular-nums;font-weight:600;color:var(--kupfer-hell);white-space:nowrap}
@media (max-width:430px){.posten .preis{min-width:5.6rem}}
/* Auf sehr schmalen Geraeten haben Fuehrungspunkte keinen Platz mehr */
@media (max-width:430px){
  .posten .fuehrung{display:none}
  .posten li{gap:12px}
}
.posten .preis.inkl{color:var(--ok);font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.posten .preis.nein{color:var(--dim);font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:400}

.summe{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);border-bottom:3px double var(--line-2);padding-bottom:12px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.summe .l{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- 8 · Paketkarten ---------------------------------------------- */
.pakete{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.paket{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px 22px 24px;
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease),background var(--t) var(--ease)}
.paket:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--panel-2)}
.paket.gewaehlt{border-color:color-mix(in srgb,var(--volt) 60%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--volt) 7%,var(--panel)),var(--panel))}
.paket .kennung{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--spark);margin-bottom:14px}
.paket .name{font-family:var(--f-display);font-size:1.32rem;font-weight:700;letter-spacing:-.02em}
.paket .p{margin:10px 0 2px}
.paket .fuer{font-size:.88rem;color:var(--muted);min-height:2.9em;margin-bottom:16px}
.paket ul{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.paket ul li{position:relative;padding-left:18px;font-size:.88rem;color:var(--muted);margin-bottom:7px}
.paket ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--volt);border-radius:1px}
.paket .zeit{margin-top:16px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--spark)}
/* Auf der Startseite sind die Karten Links zur Detailansicht */
a.paket{text-decoration:none;color:inherit}
a.paket *{text-decoration:none}
a.paket .name{color:var(--text);transition:color var(--t-fast)}
a.paket:hover{border-color:color-mix(in srgb,var(--volt) 50%,transparent);color:inherit}
a.paket:hover .name{color:var(--volt-soft)}
.marke{position:absolute;top:-9px;right:18px;background:var(--volt);color:#fff;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:3px}

/* ---------- 8b · Pakete als Reiter + Detailansicht ------------------------ */
/* Ohne JavaScript sind alle vier Detailblöcke sichtbar und untereinander
   lesbar. Erst wenn app.js die Klasse .reiter-an setzt, wird daraus eine
   Umschaltung — so bleibt die Seite auch ohne Skript vollständig nutzbar. */
.paket[role="tab"]{cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit;background:var(--panel)}
.paket[role="tab"]:focus-visible{outline:2px solid var(--spark);outline-offset:3px}
.paket[aria-selected="true"]{
  border-color:var(--volt);
  background:linear-gradient(180deg,color-mix(in srgb,var(--volt) 10%,var(--panel)),var(--panel));
  box-shadow:0 0 0 1px var(--volt),0 18px 50px -30px var(--volt)}
.paket[role="tab"] .aufklapp{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--spark);
  display:flex;align-items:center;gap:7px}
.paket[aria-selected="true"] .aufklapp{color:var(--kupfer-hell)}
.paket[role="tab"] .aufklapp::after{content:"▾";transition:transform var(--t) var(--ease)}
.paket[aria-selected="true"] .aufklapp::after{transform:rotate(180deg)}

.detail{margin-top:18px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;
  padding:clamp(22px,3vw,32px);position:relative}
.reiter-an .detail[hidden]{display:none}
.detail::before{ /* Verbindung zur gewählten Karte — die Leiterbahn-Idee im Kleinen */
  content:"";position:absolute;top:-1px;left:var(--marke-links,24px);width:var(--marke-breite,60px);height:2px;
  background:var(--volt);box-shadow:0 0 10px var(--volt);transition:left var(--t) var(--ease),width var(--t) var(--ease)}
.detail-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line-2);margin-bottom:18px}
.detail-kopf h3{font-size:clamp(1.3rem,2.4vw,1.8rem)}
.detail-spalten{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.detail h4{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin-bottom:12px}
.liste-ja,.liste-nein{font-size:.93rem}
.liste-ja li,.liste-nein li{position:relative;padding-left:26px;margin-bottom:9px;color:var(--muted)}
.liste-ja li::before{content:"";position:absolute;left:4px;top:.42em;width:9px;height:5px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.liste-nein li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:2px;background:var(--dim)}
.liste-nein li{color:var(--dim)}
.detail-fuss{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}

/* ---------- 9 · Karten & Raster ------------------------------------------ */
/* Spaltenzahl haerter festlegen. Vorher erzeugte z2 bei 1030 px Innenbreite
   drei Spalten statt zwei — dadurch wurden die Preistabellen zu schmal und
   der Text brach unnoetig um. min() sorgt dafuer, dass die Karten am Handy
   trotzdem einspaltig werden. */
.raster{display:grid;gap:14px;align-items:stretch}
.raster.z2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.raster.z3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.raster.z4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
/* Alle Kacheln in einer Reihe gleich hoch — sonst haengen die Fusszeilen
   auf unterschiedlicher Hoehe. */
.raster > .karte,.raster > .angebot,.raster > .bildkarte{height:100%}

.karte{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;
  display:flex;flex-direction:column;transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.karte:hover{border-color:var(--line-2);transform:translateY(-2px)}
.karte .kennung{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--spark);display:block;margin-bottom:12px}
.karte h3{margin-bottom:8px;font-size:1.08rem}
.karte p{font-size:.92rem;color:var(--muted)}
/* margin-top:auto drueckt die Fusszeile ans Kartenende — damit stehen
   „nach 3 Jahren", „Mindestlaufzeit" usw. in einer Reihe auf einer Linie. */
.karte .ab{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.karte .ab .l{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.karte .ab .geld{white-space:nowrap}
/* Abstand zwischen Text und Fusszeile, wenn die Karte kurz ist */
.karte > p:last-of-type{margin-bottom:14px}

/* Leistungsraster: bewusst hoechstens zwei Spalten, damit die Bildkarten
   gross genug bleiben und nie eine allein in einer Reihe haengt. */
.raster.bilder{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}

/* Bildkarte — als ganzes klickbar, deshalb Linkschmuck abschalten */
.bildkarte{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);
  text-decoration:none;color:inherit;display:block;transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
a.bildkarte:hover{border-color:color-mix(in srgb,var(--volt) 45%,transparent);transform:translateY(-3px);color:inherit}
.bildkarte *{text-decoration:none}
.bildkarte h3{color:var(--text);transition:color var(--t-fast)}
a.bildkarte:hover h3{color:var(--volt-soft)}
.bildkarte img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.9) contrast(1.05);transition:transform var(--t-slow) var(--ease),filter var(--t) var(--ease)}
.bildkarte:hover img{transform:scale(1.03);filter:saturate(1) contrast(1.08)}
/* Bildkarte als Spalte, damit die Preiszeile unten buendig steht — sonst
   klebt sie am Text und haengt in einer Reihe auf verschiedenen Hoehen. */
.bildkarte{display:flex;flex-direction:column}
.bildkarte .inhalt{padding:20px 22px 22px;position:relative;display:flex;flex-direction:column;flex:1}
.bildkarte .ab{margin-top:auto!important;padding-top:12px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bildkarte picture{display:block;position:relative}
/* Der Schleier deckt AUSSCHLIESSLICH das Bild ab. Lag er ueber der ganzen
   Karte, wirkten Text und Preis ausgegraut. Gleiches Seitenverhaeltnis wie
   das Bild, damit er exakt buendig endet. */
.bildkarte .schleier{position:absolute;left:0;right:0;top:0;aspect-ratio:16/10;
  background:linear-gradient(180deg,transparent 42%,color-mix(in srgb,var(--bg) 88%,transparent));pointer-events:none}

/* ---------- 10 · Knöpfe --------------------------------------------------- */
.knopf{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:9px;border:1px solid transparent;
  font-family:var(--f-display);font-weight:600;font-size:.96rem;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.knopf:hover{transform:translateY(-2px)}
.knopf:active{transform:translateY(0)}
.knopf-volt{background:var(--volt);color:#fff;box-shadow:0 8px 26px -14px var(--volt)}
.knopf-volt:hover{background:#5D6BFF;color:#fff;box-shadow:0 12px 32px -12px var(--volt)}
.knopf-linie{border-color:var(--line-2);color:var(--text);background:transparent}
.knopf-linie:hover{border-color:var(--line-3);background:var(--panel);color:var(--text)}
.knopf-wa{background:#25D366;color:#04310f;font-weight:700}
.knopf-wa:hover{background:#31E074;color:#04310f}
.knopf .pfeil{transition:transform var(--t-fast) var(--ease)}
.knopf:hover .pfeil{transform:translateX(3px)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- 11 · Formular ------------------------------------------------- */
.feld{margin-bottom:16px}
.feld label{display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.feld input,.feld textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px;
  padding:13px 14px;font-size:16px;color:var(--text);transition:border-color var(--t-fast),background var(--t-fast)}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--volt);background:var(--panel)}
.feld textarea{min-height:132px;resize:vertical;line-height:1.6}
.feld input::placeholder,.feld textarea::placeholder{color:var(--dim)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-hinweis{font-size:.85rem;line-height:1.5;color:var(--muted);margin:2px 0 18px}
.form-meldung{margin-top:12px;font-size:.9rem;min-height:1.3em}
.form-meldung.fehler{color:#FF8A8A}
.form-meldung.ok{color:var(--ok)}

/* ---------- 12 · Navigation ---------------------------------------------- */
.navi{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.navi-innen{display:flex;align-items:center;justify-content:space-between;gap:18px;height:64px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;font-size:1.05rem}
.logo .blitz{color:var(--spark);font-size:1.15rem;line-height:1}
.navi-links{display:flex;gap:24px;align-items:center}
.navi-links a{color:var(--muted);text-decoration:none;font-size:.92rem;transition:color var(--t-fast);position:relative}
.navi-links a:hover,.navi-links a[aria-current="page"]{color:var(--text)}
.navi-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--spark)}
.navi-schalter{display:none;background:none;border:1px solid var(--line-2);border-radius:7px;cursor:pointer;color:var(--text);
  min-width:44px;min-height:44px;font-size:1.1rem;line-height:1}
@media (max-width:900px){
  .navi-links{position:fixed;inset:64px 0 auto 0;flex-direction:column;gap:0;background:var(--bg-2);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height var(--t) var(--ease)}
  .navi-links.offen{max-height:70vh}
  .navi-links a{padding:15px var(--gutter);width:100%;border-bottom:1px solid var(--line);font-size:1rem}
  .navi-schalter{display:block}
  .navi-cta{display:none}
}

/* ---------- 13 · Fußbereich ---------------------------------------------- */
.fuss{border-top:1px solid var(--line);background:var(--bg-2);padding-block:clamp(38px,5vw,60px);margin-top:clamp(48px,7vw,90px)}
.fuss-raster{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fuss h2{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:400;margin-bottom:12px}
.fuss a{display:block;color:var(--muted);text-decoration:none;font-size:.9rem;padding:4px 0;transition:color var(--t-fast)}
.fuss a:hover{color:var(--text)}
.fuss-unten{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.8rem;color:var(--dim)}

/* ---------- 14 · Schwebender Kontakt (Handy) ------------------------------ */
/* 🔴 Lehre aus dem Voltköpfe OS: Ein fixiertes Consent-Banner hat dort auf dem
   Handy den Absenden-Knopf komplett verdeckt. Deshalb bekommt die Seite unten
   Luft, solange das Banner steht (vk-consent.js setzt die Klasse am <html>),
   und die schwebenden Knoepfe ruecken so lange mit nach oben.               */
.schwebend{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:70;display:none;gap:10px;flex-direction:column;
  transition:bottom var(--t) var(--ease)}
@media (max-width:900px){
  .schwebend{display:flex}
  html.vk-consent-offen body{padding-bottom:clamp(200px,42vh,340px)}
  html.vk-consent-offen .schwebend{bottom:calc(clamp(200px,42vh,340px) + 14px)}
}
.schwebend a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.5);text-decoration:none}
.schwebend .wa{background:#25D366}
.schwebend .tel{background:var(--volt)}
.schwebend svg{width:24px;height:24px}

/* ---------- 15 · Bewegung ------------------------------------------------- */
.auf{opacity:0;transform:translateY(18px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.auf.da{opacity:1;transform:none}
.auf.v1{transition-delay:.06s}.auf.v2{transition-delay:.12s}.auf.v3{transition-delay:.18s}.auf.v4{transition-delay:.24s}

/* Leiterbahn, die sich beim Scrollen zeichnet */
.bahn path{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.4s var(--ease)}
.bahn.da path{stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .auf{opacity:1;transform:none}
  .bahn path{stroke-dashoffset:0}
  .schiene::before{display:none}
}

/* ---------- 16 · Hero ----------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(72px,13vw,150px) clamp(48px,7vw,84px);isolation:isolate}
.hero-bild{position:absolute;inset:0;z-index:-2}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:.5}
/* Video liegt ueber dem Standbild und blendet sich erst ein, wenn es laeuft.
   Faellt es aus, bleibt schlicht das Standbild stehen — kein leerer Kasten. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;
  opacity:0;transition:opacity 1.1s var(--ease);pointer-events:none}
.hero-video.laeuft{opacity:.5}
@media (max-width:860px){.hero-video{display:none}}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero-schleier{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 85% at 18% 8%, transparent 0%, color-mix(in srgb,var(--bg) 72%,transparent) 46%, var(--bg) 82%),
    linear-gradient(180deg, color-mix(in srgb,var(--bg) 55%,transparent) 0%, transparent 26%, var(--bg) 96%);
}
.hero-innen{position:relative}
.hero-ort{margin-bottom:22px;color:var(--spark)}
.hero-akzent{
  background:linear-gradient(96deg,var(--kupfer-hell) 0%,var(--messing) 42%,var(--kupfer) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@supports not (background-clip:text){.hero-akzent{color:var(--kupfer-hell)}}
.akzent-volt{color:var(--volt-soft)}

/* Kennzeichnung KI-erzeugter Bilder.
   Der Fusszeilen-Hinweis allein steht weit unter dem Bild; Art. 50 KI-VO will
   die Offenlegung spaetestens bei der ERSTEN Exposition. Deshalb sitzt sie am
   Bild selbst. Bewusst NICHT aria-hidden — sie traegt eine Information, die
   auch beim Vorlesen ankommen soll. */
/* 🔴 OBEN, nicht unten. Zuerst stand sie am unteren Rand des Hero — auf der
   Startseite lag sie damit unterhalb des sichtbaren Bereichs. Eine Offenlegung,
   zu der man erst scrollen muss, verfehlt ihren Zweck. Oben rechts ist sie
   sichtbar, sobald das Bild sichtbar ist. */
.ki-marke{
  position:absolute;right:var(--gutter);top:12px;z-index:2;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);background:color-mix(in srgb,var(--bg) 78%,transparent);
  border:1px solid var(--line-2);border-radius:5px;padding:4px 9px;
  backdrop-filter:blur(6px);pointer-events:none;
}
@media (max-width:640px){.ki-marke{font-size:.55rem;padding:3px 7px;top:8px}}

/* Dasselbe kleiner fuer KI-Bilder weiter unten auf der Seite.
   🔴 Wichtig: Sobald die Hero-Bilder gekennzeichnet sind, MUESSEN es die
   uebrigen auch sein — sonst liest man die unmarkierten als echte Fotos.
   Halb gekennzeichnet ist irrefuehrender als gar nicht. */
.ki-chip{
  position:absolute;top:10px;right:10px;z-index:2;
  font-family:var(--f-mono);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:color-mix(in srgb,var(--bg) 78%,transparent);
  border:1px solid var(--line-2);border-radius:4px;padding:2px 6px;
  backdrop-filter:blur(6px);pointer-events:none;
}

/* ---------- 17 · Fragen (details) ---------------------------------------- */
.frage{border-bottom:1px solid var(--line)}
.frage summary{
  cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--f-display);font-weight:600;font-size:clamp(1rem,1.5vw,1.12rem);letter-spacing:-.015em;
  transition:color var(--t-fast)}
.frage summary::-webkit-details-marker{display:none}
.frage summary:hover{color:var(--volt-soft)}
.frage summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--spark);border-bottom:1.5px solid var(--spark);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t) var(--ease)}
.frage[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.frage p{padding:0 44px 22px 0;color:var(--muted);max-width:78ch;font-size:.95rem}
.frage[open] p{animation:aufklappen .4s var(--ease)}
@keyframes aufklappen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 18 · Hilfsklassen -------------------------------------------- */
.mt-s{margin-top:12px}.mt-m{margin-top:24px}.mt-l{margin-top:40px}.mt-xl{margin-top:64px}
.mb-s{margin-bottom:12px}.mb-m{margin-bottom:24px}.mb-l{margin-bottom:40px}
.mittig{text-align:center}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hinweis{border-left:2px solid var(--line-2);padding:12px 0 12px 16px;font-size:.88rem;color:var(--muted)}
.hinweis.ehrlich{border-left-color:var(--warn)}
.trenner{height:1px;background:var(--line);margin-block:clamp(28px,4vw,48px)}