/* H-E-P Webseite – Farben aus dem Logo: Schwarz, Rot (#e30613), Drahtgrau */
:root {
  --rot: #e30613;
  --rot-dunkel: #b8050f;
  --schwarz: #121314;
  --dunkel: #1b1d20;
  --dunkel-2: #24272b;
  --text: #1d1f22;
  --text-2: #565b62;
  --text-hell: #c9ccd1;
  --grau: #f3f4f6;
  --linie: #e1e3e7;
  --weiss: #ffffff;
  --radius: 14px;
  --breite: 1160px;
  --schrift: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  font-family: var(--schrift);
  color: var(--text);
  background: var(--weiss);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--rot); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h2 { font-size: clamp(28px, 4vw, 42px); }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }

.innen { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.abschnitt { padding: 96px 0; }
.abschnitt-grau { background: var(--grau); }
.abschnitt-dunkel { background: var(--dunkel); color: var(--weiss); }
.abschnitt-dunkel .einleitung { color: var(--text-hell); }

.dachzeile {
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 10px;
}
.dachzeile-rot { color: #ff5a62; }
.einleitung { font-size: 19px; color: var(--text-2); max-width: 760px; margin-bottom: 40px; }
.klein { font-size: 13.5px; color: var(--text-2); margin: 12px 0 0; }

/* ── Knöpfe ── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 15.5px;
  text-decoration: none; transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  border: 2px solid transparent; white-space: nowrap;
}
.knopf:hover { transform: translateY(-1px); }
.knopf-rot { background: var(--rot); color: #fff; box-shadow: 0 6px 18px rgba(227, 6, 19, .28); }
.knopf-rot:hover { background: var(--rot-dunkel); }
.knopf-hell { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); }
.knopf-hell:hover { background: rgba(255,255,255,.16); }
.knopf-dunkel { background: var(--schwarz); color: #fff; }
.knopf-dunkel:hover { background: #2b2e33; }
.knopf-klein { padding: 8px 18px; font-size: 14px; box-shadow: none; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

/* ── Kopf ── */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18, 19, 20, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.kopf-innen {
  max-width: var(--breite); margin: 0 auto; padding: 0 24px; height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.marke img { width: 40px; height: 40px; border-radius: 9px; background: #fff; padding: 3px; }
.marke span { display: flex; flex-direction: column; line-height: 1.1; }
.marke strong { font-size: 18px; letter-spacing: .02em; }
.marke small { font-size: 11.5px; color: var(--text-hell); }
.menue { display: flex; align-items: center; gap: 4px; }
.menue a:not(.knopf) {
  color: #e6e8eb; text-decoration: none; font-size: 15px; font-weight: 600;
  padding: 8px 12px; border-radius: 8px;
}
.menue a:not(.knopf):hover { background: rgba(255,255,255,.08); }
.menue .knopf { margin-left: 8px; }
.menue-knopf { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.menue-knopf span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: .2s; }

/* ── Einstieg ── */
.held {
  position: relative; background: var(--schwarz); color: #fff; overflow: hidden;
  min-height: min(720px, 88vh); display: flex; align-items: center;
}
.held-bild {
  position: absolute; inset: 0;
  background: url("img/drahtbuendel.jpg") center right / cover no-repeat;
}
.held-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18,19,20,.97) 0%, rgba(18,19,20,.88) 38%, rgba(18,19,20,.35) 75%, rgba(18,19,20,.15) 100%);
}
.held-innen { position: relative; max-width: var(--breite); width: 100%; margin: 0 auto; padding: 96px 24px; }
.held .dachzeile { color: #ff5a62; }
.held h1 { font-size: clamp(38px, 6.2vw, 72px); max-width: 760px; font-weight: 800; }
.held-text { font-size: clamp(18px, 2vw, 21px); color: #d9dce0; max-width: 600px; }
.fakten { list-style: none; padding: 0; margin: 48px 0 0; display: flex; flex-wrap: wrap; gap: 14px 36px; }
.fakten li { color: var(--text-hell); font-size: 15px; }
.fakten strong { display: block; color: #fff; font-size: 26px; line-height: 1.2; }

/* ── Signatur: glänzender Draht wie im PBS-Draht-Editor ──
   Aderendhülsen (Metallhülse + Isolierkragen, Formen aus EndbehandlungGrafik.cs), Isolierung mit
   Zylinderglanz, Aufdruck wie aus dem Inkjet-Drucker, wandernder Lichtreflex und Spiegelung.
   Das Innere baut script.js aus data-aufdruck. */
.draht {
  position: relative; z-index: 2; height: 48px; margin: -24px auto;
  width: calc(100% - 48px); max-width: var(--breite);
  display: flex; align-items: center;
  -webkit-box-reflect: below 2px linear-gradient(to bottom, transparent 40%, rgba(255,255,255,.3));
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.28));
}
.draht.frei { margin: 40px auto 56px; }
.draht .huelse { flex: 0 0 120px; height: 48px; position: relative; z-index: 2; }
.draht .huelse.rechts { transform: scaleX(-1); }
.draht .ader {
  flex: 1; height: 22px; margin: 0 -10px; border-radius: 4px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #7d0309 0%, #f7a3a7 20%, #e83a43 38%, #e30613 55%, #9f040d 85%, #66020a 100%);
  display: flex; align-items: center; justify-content: space-around; gap: 48px; padding: 0 28px;
}
.draht .aufdruck {
  position: relative; z-index: 1; white-space: nowrap; color: rgba(255,255,255,.93);
  font: 700 11.5px/1 Consolas, "Cascadia Mono", "Courier New", monospace; letter-spacing: .14em;
  text-shadow: 0 0 1px rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.35);
}
.draht .ader::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 140px;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%, transparent 100%);
  transform: translateX(-200px); animation: reflex 5.5s ease-in-out infinite;
}
@keyframes reflex {
  0%, 35% { transform: translateX(-200px); }
  75%, 100% { transform: translateX(calc(var(--aderbreite, 1200px) + 60px)); }
}
@media (max-width: 560px) {
  .draht { width: calc(100% - 24px); height: 36px; margin: -18px auto; }
  .draht.frei { margin: 28px auto 40px; }
  .draht .huelse { flex-basis: 90px; height: 36px; }
  .draht .ader { height: 16px; gap: 28px; padding: 0 18px; }
  .draht .aufdruck { font-size: 9.5px; }
  .draht .aufdruck:nth-child(n+2) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .draht .ader::after { animation: none; display: none; } }

/* ── Karten ── */
.karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.karte {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 24px; border-radius: var(--radius); border: 1px solid var(--linie);
  background: #fff; color: var(--text); text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.karte:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.09); border-color: #cfd2d7; }
.karte p { color: var(--text-2); font-size: 15.5px; flex: 1; }
.karte .mehr { color: var(--rot); font-weight: 700; font-size: 15px; }
.karte-hervor { border: 2px solid var(--rot); }
.karte-symbol {
  width: 46px; height: 46px; border-radius: 12px; background: var(--grau);
  display: grid; place-items: center; margin-bottom: 18px;
}
.karte-symbol svg { width: 24px; height: 24px; fill: none; stroke: var(--rot); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.abzeichen {
  display: inline-block; background: var(--rot); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
}
.karte .abzeichen { position: absolute; top: 18px; right: 18px; }

/* ── Zwei Spalten / Fotos ── */
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 40px; }
.zwei-spalten-umgekehrt > :first-child { order: 2; }
.foto { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.haken { list-style: none; padding: 0; margin: 0 0 24px; }
.haken li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.haken li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 16px; height: 8px;
  border-left: 3px solid var(--rot); border-bottom: 3px solid var(--rot); transform: rotate(-45deg) translateY(-3px);
}

/* ── Ablauf ── */
.zwischen { margin-top: 72px; font-size: 24px; }
.ablauf { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; counter-reset: x; }
.ablauf li {
  background: #fff; border-radius: 12px; padding: 18px 16px; font-size: 14.5px; color: var(--text-2);
  border-top: 4px solid var(--rot);
}
.ablauf span { display: block; font-size: 13px; font-weight: 800; color: var(--rot); letter-spacing: .08em; }
.ablauf strong { display: block; color: var(--text); font-size: 16px; margin: 4px 0 6px; }

/* ── Zahlen ── */
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.zahlen div { background: var(--schwarz); color: #fff; border-radius: var(--radius); padding: 28px; }
.zahlen strong { display: block; font-size: 44px; line-height: 1; color: #ff4b54; margin-bottom: 10px; }
.zahlen span { color: var(--text-hell); font-size: 15px; }

/* ── ERP ── */
.module { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.modul {
  background: var(--dunkel-2); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius);
  padding: 24px; transition: border-color .2s ease;
}
.modul:hover { border-color: rgba(227, 6, 19, .6); }
.modul h3 { display: flex; align-items: center; gap: 10px; }
.modul h3::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--rot); }
.modul p { color: var(--text-hell); font-size: 15.5px; margin: 0; }
.erp-aktion {
  margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 26px 30px; border-radius: var(--radius);
  background: linear-gradient(100deg, rgba(227,6,19,.22), rgba(227,6,19,.06)); border: 1px solid rgba(227,6,19,.45);
}
.erp-aktion strong { display: block; font-size: 20px; }
.erp-aktion span { color: var(--text-hell); }

/* ── PBS ── */
.pbs-raster { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; }
.pbs-karte { border: 1px solid var(--linie); border-radius: var(--radius); padding: 32px; background: #fff; }
.pbs-offline { border: 2px solid var(--rot); box-shadow: 0 18px 40px rgba(227, 6, 19, .1); }
.pbs-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pbs-kopf h3 { font-size: 26px; margin: 0; }
.pbs-unter { color: var(--text-2); margin: 4px 0 20px; }

/* ── Über uns ── */
.foto-zitat { position: relative; }
.foto-zitat blockquote {
  position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0;
  background: rgba(18,19,20,.88); color: #fff; padding: 18px 20px; border-radius: 12px;
  font-size: 15.5px; border-left: 4px solid var(--rot);
}
.foto-zitat cite { display: block; margin-top: 8px; font-style: normal; font-weight: 700; color: #ff7a80; font-size: 14px; }

/* ── Kontakt ── */
.kontakt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.kontakt-feld {
  display: block; background: #fff; border-radius: var(--radius); padding: 24px; text-decoration: none; color: var(--text);
  border: 1px solid var(--linie); transition: border-color .2s ease;
}
a.kontakt-feld:hover { border-color: var(--rot); }
.kontakt-feld span { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); font-weight: 700; }
.kontakt-feld strong { font-size: 19px; }

/* ── Fuß ── */
.fuss { background: var(--schwarz); color: var(--text-hell); font-size: 14px; padding: 28px 0; }
.fuss-innen { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fuss a { color: var(--text-hell); text-decoration: none; margin-left: 18px; }
.fuss a:hover { color: #fff; }

/* ── Einblenden beim Scrollen ── */
.einblenden { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.einblenden.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .einblenden { opacity: 1; transform: none; transition: none; }
}

/* ── Schmale Bildschirme ── */
@media (max-width: 1020px) {
  .karten { grid-template-columns: repeat(2, 1fr); }
  .ablauf { grid-template-columns: repeat(3, 1fr); }
  .module { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .menue-knopf { display: block; }
  .menue {
    position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--schwarz); padding: 12px 16px 20px; gap: 2px;
    display: none; border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .menue.offen { display: flex; }
  .menue .knopf { margin: 10px 0 0; }
  .menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .zwei-spalten, .pbs-raster { grid-template-columns: 1fr; gap: 28px; }
  .zwei-spalten-umgekehrt > :first-child { order: 0; }
  .zahlen, .kontakt { grid-template-columns: 1fr; }
  .abschnitt { padding: 72px 0; }
  .held-bild::after { background: linear-gradient(180deg, rgba(18,19,20,.75) 0%, rgba(18,19,20,.93) 60%); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .innen, .kopf-innen, .held-innen { padding-left: 16px; padding-right: 16px; }
  .karten, .module, .ablauf { grid-template-columns: 1fr; }
  .pbs-karte { padding: 24px; }
  .erp-aktion { padding: 22px; }
  .fuss a { margin: 0 18px 0 0; }
}

/* ═════════════ UNTERSEITEN ═════════════ */
.menue a.aktiv { background: rgba(255,255,255,.1); }
.seitenkopf { background: var(--schwarz); color: #fff; padding: 84px 0 92px; position: relative; overflow: hidden; }
.seitenkopf::before {
  content: ""; position: absolute; inset: 0; background: var(--kopfbild, none) center / cover no-repeat; opacity: .28;
}
.seitenkopf .innen { position: relative; }
.seitenkopf .dachzeile { color: #ff5a62; }
.seitenkopf h1 { font-size: clamp(34px, 5vw, 58px); max-width: 820px; font-weight: 800; }
.seitenkopf p.held-text { margin-bottom: 0; }
.seitenkopf .knoepfe { margin-top: 28px; }
.brotkrumen { font-size: 14px; margin-bottom: 18px; color: var(--text-hell); }
.brotkrumen a { color: var(--text-hell); text-decoration: none; }
.brotkrumen a:hover { color: #fff; }

.raster-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.raster-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; }
.kasten { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 26px; }
.abschnitt-grau .kasten { border-color: transparent; }
.kasten h3 { margin-bottom: .4em; }
.kasten p:last-child, .kasten ul:last-child { margin-bottom: 0; }
.kasten p { color: var(--text-2); font-size: 15.5px; }

/* Aderendbehandlungen als kleine Kacheln */
.endbehandlungen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.endbehandlung { background: #fff; border-radius: 12px; padding: 18px 16px 16px; border: 1px solid var(--linie); text-align: center; }
.endbehandlung svg { width: 100%; max-width: 150px; height: 60px; margin: 0 auto 10px; display: block; }
.endbehandlung strong { display: block; font-size: 15px; }
.endbehandlung span { font-size: 13px; color: var(--text-2); }

/* Häufige Fragen */
.fragen { margin-top: 28px; display: grid; gap: 10px; max-width: 860px; }
.fragen details { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 0 22px; }
.fragen summary { cursor: pointer; font-weight: 700; padding: 18px 0; list-style: none; position: relative; padding-right: 30px; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 24px; color: var(--rot); transition: transform .2s; }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { color: var(--text-2); margin: 0 0 18px; }

/* Vergleich Offline / Online */
.vergleich { width: 100%; border-collapse: collapse; margin-top: 28px; background: #fff; border-radius: var(--radius); overflow: hidden; font-size: 15.5px; }
.vergleich th, .vergleich td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--linie); }
.vergleich thead th { background: var(--schwarz); color: #fff; font-size: 15px; }
.vergleich td:not(:first-child) { text-align: center; width: 26%; }
.vergleich .ja { color: #12a150; font-weight: 800; }
.vergleich .nein { color: #9aa0a6; }

/* Werkzeuge für die Online-Vorführung */
.werkzeuge { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.werkzeuge li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; }

.aufruf { background: var(--schwarz); color: #fff; border-radius: var(--radius); padding: 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.aufruf h2 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 32px); }
.aufruf p { margin: 0; color: var(--text-hell); }

@media (max-width: 1020px) {
  .raster-3 { grid-template-columns: repeat(2, 1fr); }
  .endbehandlungen { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .raster-2 { grid-template-columns: 1fr; }
  .seitenkopf { padding: 64px 0 76px; }
}
@media (max-width: 560px) {
  .raster-3 { grid-template-columns: 1fr; }
  .endbehandlungen { grid-template-columns: repeat(2, 1fr); }
  .aufruf { padding: 26px; }
  .vergleich th, .vergleich td { padding: 10px 10px; font-size: 14px; }
}

/* ═════════════ RECHTSTEXTE ═════════════ */
.rechtstext { max-width: 820px; }
.rechtstext h2 { font-size: 24px; margin: 44px 0 10px; }
.rechtstext h3 { font-size: 18px; margin: 26px 0 6px; }
.rechtstext p, .rechtstext li { color: #34383d; }
.rechtstext ul { padding-left: 22px; margin: 0 0 1em; }
.rechtstext .stand { color: var(--text-2); font-size: 14px; margin-top: 40px; }
.adressblock { background: var(--grau); border-radius: var(--radius); padding: 22px 26px; line-height: 1.75; }

/* ═════════════ BILDERGALERIE + VERGRÖSSERUNG ═════════════ */
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.galerie figure { margin: 0; }
.galerie-gross { grid-column: 1 / -1; }
.galerie-bild {
  display: block; width: 100%; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  overflow: hidden; background: #111; cursor: zoom-in; box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transition: transform .2s ease, border-color .2s ease;
}
.galerie-bild:hover { transform: translateY(-3px); border-color: rgba(227,6,19,.7); }
.galerie-bild img { width: 100%; height: auto; display: block; }
.galerie figcaption { color: var(--text-hell); font-size: 15px; margin-top: 12px; }
.galerie figcaption strong { color: #fff; display: block; font-size: 17px; margin-bottom: 2px; }
.leuchtkasten { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; }
.leuchtkasten::backdrop { background: rgba(0,0,0,.85); }
.leuchtkasten img { max-width: 96vw; max-height: 94vh; display: block; border-radius: 8px; }
.leuchtkasten-zu {
  position: fixed; top: 16px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--rot); color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
}
@media (max-width: 860px) { .galerie { grid-template-columns: 1fr; } }

/* Download-Schritte */
.ablauf.schritte-3 { grid-template-columns: repeat(3, 1fr); }
.hinweis-smartscreen { max-width: 860px; margin-top: 16px; padding: 14px 18px; background: var(--grau); border-radius: 10px; border-left: 4px solid var(--rot); }
@media (max-width: 860px) { .ablauf.schritte-3 { grid-template-columns: 1fr; } }