/* DUNKEL Elektro- & Systemtechnik – v2 clean, 21.09.2026
   Keine externen Schriften, Skripte oder Bilder. Alles liegt auf dem eigenen Webspace. */

:root{
  --rot:#E93031;
  --rotdunkel:#C41E1F;
  --rotsanft:#fdf2f2;
  --tinte:#14171c;
  --text:#3e444e;
  --grau:#6b7280;
  --linie:#e5e8ee;
  --grund:#ffffff;
  --sanft:#f6f7f9;
  --nacht:#15181e;
  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --breite:1080px;
  --radius:10px;
}

*{box-sizing:border-box;}
html{color-scheme:light; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }

body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font:17px/1.65 var(--schrift);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--breite); margin:0 auto; padding:0 24px;}

h1,h2,h3{color:var(--tinte); font-weight:700; letter-spacing:-.015em;}
p{margin:0 0 14px;}
a{color:var(--rotdunkel);}

/* ---------- Kopfleiste ---------- */

.kopfleiste{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--linie);
}
.kopfleiste .wrap{
  display:flex; align-items:flex-end; gap:22px;
  padding-top:18px; padding-bottom:15px;
}
.marke{display:flex; align-items:flex-end; text-decoration:none; flex:none;}
.marke img{width:118px; height:auto; display:block;}

.hauptnav{display:flex; gap:4px; margin-left:auto; align-items:flex-end;}
.hauptnav a{
  display:block; padding:8px 13px; border-radius:7px;
  text-decoration:none; color:var(--tinte);
  font-size:15px; font-weight:600;
}
.hauptnav a:hover{background:var(--sanft); color:var(--rotdunkel);}

.ruf{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  background:var(--rot); color:#fff; text-decoration:none;
  padding:11px 18px; border-radius:8px;
  font-size:15px; font-weight:700; white-space:nowrap;
  box-shadow:0 1px 2px rgba(20,23,28,.18);
}
.ruf:hover{background:var(--rotdunkel);}
.ruf svg{width:17px; height:17px; fill:currentColor; flex:none;}
.rufkurz{display:none;}

/* Ankersprünge: Ziel nicht unter die stehende Kopfleiste schieben */
[id]{scroll-margin-top:150px;}

/* ---------- Aufmacher ---------- */

.aufmacher{padding:64px 0 52px; background:linear-gradient(180deg,#fff 0%,var(--sanft) 100%);}
.gebiet{
  display:block; margin-bottom:18px;
  font-size:12.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--rotdunkel);
}
.aufmacher h1{
  font-size:clamp(30px,4.6vw,46px); line-height:1.13;
  margin:0 0 18px; max-width:17ch;
}
.aufmacher .lead{
  font-size:19px; line-height:1.6; color:var(--text);
  margin:0 0 32px; max-width:58ch;
}

.knoepfe{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:12px; max-width:760px; margin-bottom:22px;
}
.knopf{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:var(--radius);
  text-decoration:none; color:var(--tinte);
  background:#fff; border:1px solid var(--linie);
  box-shadow:0 1px 3px rgba(20,23,28,.05);
  transition:border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.knopf:hover{
  border-color:var(--rot);
  transform:translateY(-1px);
  box-shadow:0 5px 16px rgba(20,23,28,.09);
}
.knopf>span:last-child{min-width:0;}
.knopf .zeichen{
  flex:none; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--rot); color:#fff;
}
.knopf .zeichen svg{width:21px; height:21px; display:block; fill:currentColor;}
.knopf .was{display:block; font-size:12.5px; color:var(--grau); line-height:1.3; font-weight:500;}
.knopf .wert{display:block; font-size:16.5px; font-weight:700; line-height:1.35; overflow-wrap:break-word;}
.knopf.wa .zeichen{background:#128C7E;}

.hinweis{font-size:15.5px; color:var(--grau); max-width:62ch; margin:0;}

/* ---------- Zielgruppen-Streifen ---------- */

.streifen{background:var(--nacht); color:#cfd4dd; padding:26px 0;}
.streifen ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px 26px;
}
.streifen li{
  font-size:15px; line-height:1.45; padding-left:20px; position:relative;
}
.streifen li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:2px; background:var(--rot);
}
.streifen b{color:#fff; font-weight:600;}

/* ---------- Abschnitte ---------- */

section{padding:64px 0;}
section.anschluss{padding-top:8px;}
section.getoent{background:var(--sanft); border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);}

.kopfzeile{max-width:62ch; margin-bottom:34px;}
.marker{
  display:block; margin-bottom:10px;
  font-size:12.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--rotdunkel);
}
h2{font-size:clamp(24px,3vw,31px); line-height:1.2; margin:0 0 12px;}
.kopfzeile p{font-size:17.5px; color:var(--grau); margin:0;}

/* ---------- Kleinauftrags-Pauschale ---------- */

.getoent + .anschluss{padding-top:64px;}

.preisblock{
  display:grid; grid-template-columns:minmax(280px,340px) 1fr; gap:34px; align-items:start;
}

.preiskarte{
  background:var(--nacht); color:#cfd4dd; border-radius:var(--radius);
  padding:28px 26px 26px;
}
.preiskarte .preiswas{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:#fff; opacity:.75; margin-bottom:12px;
}
.preiskarte .preiszahl{
  display:block; color:#fff; font-weight:700;
  font-size:clamp(34px,4.4vw,44px); line-height:1.05; letter-spacing:-.02em;
}
.preiskarte .preisnetto{
  display:block; font-size:15px; color:#9aa2b1; margin-top:7px;
}
.preiskarte .enthalten{
  list-style:none; margin:22px 0 0; padding:20px 0 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.preiskarte .enthalten li{
  position:relative; padding-left:24px; margin-bottom:11px;
  font-size:15.5px; line-height:1.5;
}
.preiskarte .enthalten li:last-child{margin-bottom:0;}
.preiskarte .enthalten li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:9px; border-radius:2px; background:var(--rot);
}

.preistext > p{margin:0 0 20px; max-width:62ch;}

.preiszeilen{margin:0 0 20px; padding:0; max-width:62ch;}
.preiszeilen > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--linie);
}
.preiszeilen > div:first-child{border-top:1px solid var(--linie);}
.preiszeilen dt{font-size:16px; color:var(--text);}
.preiszeilen dd{
  margin:0; font-weight:700; color:var(--tinte); white-space:nowrap; font-size:16.5px;
}

.preistext .mwst{
  font-size:14.5px; color:var(--grau); margin:-8px 0 20px;
}
.preistext .tipp{
  background:var(--rotsanft); border-left:3px solid var(--rot);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:15px 18px; font-size:16px; color:var(--tinte);
}
.preistext .feindruck{
  font-size:14.5px; line-height:1.55; color:var(--grau); margin-bottom:0;
}

/* ---------- Leistungskarten ---------- */

.raster{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px;}
.karte{
  background:#fff; border:1px solid var(--linie); border-radius:var(--radius);
  padding:24px 24px 26px;
  box-shadow:0 1px 3px rgba(20,23,28,.04);
}
.getoent .karte{box-shadow:none;}
.karte .symbol{
  width:44px; height:44px; border-radius:9px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--rotsanft); color:var(--rot);
}
.karte .symbol svg{
  width:23px; height:23px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.karte h3{font-size:17px; margin:0 0 7px; line-height:1.3;}
.karte p{font-size:15.5px; color:var(--grau); margin:0; line-height:1.55;}

/* ---------- Betriebe-Band ---------- */

.band{
  background:var(--nacht); color:#c9cfd9; border-radius:14px;
  padding:42px 44px;
  display:grid; grid-template-columns:1.35fr 1fr; gap:34px; align-items:center;
}
.band h2{color:#fff; margin-bottom:12px;}
.band .marker{color:#ff8a86;}
.band p{font-size:17px; margin:0 0 8px; line-height:1.6;}
.band ul{list-style:none; margin:0; padding:0; display:grid; gap:11px;}
.band li{font-size:15.5px; padding-left:26px; position:relative; line-height:1.45;}
.band li::before{
  content:""; position:absolute; left:2px; top:.3em;
  width:14px; height:8px; border-left:2px solid var(--rot); border-bottom:2px solid var(--rot);
  transform:rotate(-45deg);
}
.weiter{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  background:var(--rot); color:#fff; text-decoration:none;
  padding:13px 22px; border-radius:8px; font-size:16px; font-weight:700;
}
.weiter:hover{background:var(--rotdunkel);}
.weiter svg{width:16px; height:16px; fill:currentColor;}

/* ---------- Kontakt ---------- */

.kontaktraster{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;}
.daten{
  background:#fff; border:1px solid var(--linie); border-radius:var(--radius);
  padding:26px 28px;
}
.getoent .daten{border-color:#dfe3ea;}
.wer{margin:0 0 18px; font-weight:700; color:var(--tinte); font-size:16px;}
.zeile{
  display:flex; gap:14px; align-items:baseline;
  padding:11px 0; border-top:1px solid var(--linie);
}
.zeile:first-of-type{border-top:0; padding-top:0;}
.zeile b{flex:none; width:86px; color:var(--grau); font-weight:500; font-size:14.5px;}
.zeile a{color:var(--rotdunkel); font-weight:700; text-decoration:none;}
.zeile a:hover{text-decoration:underline;}
.zeile span{color:var(--tinte);}

.gebietstext{padding:4px 2px;}
.gebietstext h3{font-size:16px; margin:0 0 9px;}
.gebietstext p{font-size:15.5px; color:var(--grau);}
.nachweis{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--linie);
  font-size:14.5px; color:var(--grau);
}

/* ---------- Rechtsseiten ---------- */

.recht main{padding:44px 0 8px;}
.recht main .wrap > *{max-width:72ch;}
.recht section{padding:0 0 48px;}
.recht h1{font-size:clamp(26px,3.4vw,34px); margin:0 0 8px;}
.recht h3{font-size:17px; margin:30px 0 6px;}
.recht p{font-size:16px;}
dl{margin:0;}
dt{font-weight:700; color:var(--tinte); margin-top:24px; font-size:16px;}
dd{margin:5px 0 0; color:var(--text);}
dd a{color:var(--rotdunkel);}
.klein{font-size:15.5px; color:var(--grau);}

/* ---------- Unterseite ---------- */

.unterseite{padding:52px 0 8px; background:linear-gradient(180deg,#fff 0%,var(--sanft) 100%);}
.unterseite h1{font-size:clamp(28px,4vw,40px); line-height:1.15; margin:0 0 16px; max-width:20ch;}
.unterseite .lead{font-size:18.5px; color:var(--text); max-width:62ch; margin:0 0 8px;}
.zurueck{
  display:inline-block; margin-bottom:22px;
  font-size:14.5px; font-weight:600; color:var(--grau); text-decoration:none;
}
.zurueck:hover{color:var(--rotdunkel);}
.fliess{max-width:64ch;}
.fliess h3{font-size:18px; margin:32px 0 8px;}
.fliess ul{margin:0 0 14px; padding-left:22px;}
.fliess li{margin-bottom:7px;}

/* ---------- Fuß ---------- */

footer{background:var(--nacht); color:#9aa3b1; padding:44px 0 40px; font-size:14.5px; margin-top:0;}
footer .spalten{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px;
  padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.1);
}
.fusslogo{width:124px; height:auto; display:block; margin-bottom:16px;}
footer strong{display:block; color:#fff; font-size:14.5px; margin-bottom:9px; font-weight:600;}
footer a{color:#c9cfd9; text-decoration:none;}
footer a:hover{color:#fff; text-decoration:underline;}
footer ul{list-style:none; margin:0; padding:0;}
footer li{margin-bottom:6px;}
.abbinder{padding-top:22px; font-size:13.5px; color:#79828f; line-height:1.6;}

/* ---------- Fokus ---------- */

a:focus-visible{outline:3px solid var(--rot); outline-offset:3px; border-radius:4px;}

/* ---------- Schmale Geräte ---------- */

@media (max-width:860px){
  .preisblock{grid-template-columns:1fr; gap:26px;}
  .getoent + .anschluss{padding-top:52px;}
  .band{grid-template-columns:1fr; padding:34px 28px; gap:26px;}
  .kontaktraster{grid-template-columns:1fr;}
  footer .spalten{grid-template-columns:1fr 1fr; gap:24px;}
}

@media (max-width:720px){
  body{font-size:16.5px;}
  .wrap{padding:0 18px;}
  .kopfleiste .wrap{flex-wrap:wrap; min-height:0; gap:12px 14px; padding-top:12px; padding-bottom:0;}
  .marke img{width:74px;}
  [id]{scroll-margin-top:154px;}
  .ruf{margin-left:auto; padding:10px 15px; font-size:14.5px;}
  .ruflang{display:none;}
  .rufkurz{display:inline;}
  .hauptnav{
    order:3; width:100%; margin-left:0;
    border-top:1px solid var(--linie);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .hauptnav a{padding:12px 9px; border-radius:0; white-space:nowrap; font-size:14px;}
  .hauptnav a:first-child{padding-left:0;}
  .aufmacher{padding:40px 0 38px;}
  .aufmacher .lead{font-size:17.5px; margin-bottom:26px;}
  section{padding:46px 0;}
  .karte{padding:21px 21px 23px;}
  .preiskarte{padding:24px 21px 22px;}
  .getoent + .anschluss{padding-top:40px;}
  .preiszeilen > div{flex-direction:column; gap:3px; align-items:flex-start;}
  .daten{padding:22px 20px;}
  .zeile{flex-direction:column; gap:2px; padding:10px 0;}
  .zeile b{width:auto;}
  footer .spalten{grid-template-columns:1fr; gap:22px;}
}

/* ---------- Druck ---------- */

@media print{
  .kopfleiste,.hauptnav,.knoepfe,.weiter,.streifen{display:none;}
  body{font:11pt/1.45 Arial,sans-serif; color:#000; background:#fff;}
  .aufmacher,.band,footer{background:#fff !important; color:#000 !important;}
  .band h2,footer strong{color:#000;}
  a{color:#000; text-decoration:none;}
  section{page-break-inside:avoid; padding:16pt 0;}
  .karte,.daten{background:none; border:1px solid #999;}
  .preiskarte{background:none !important; color:#000 !important; border:1px solid #999;}
  .preiskarte .preiszahl,.preiskarte .preiswas{color:#000 !important; opacity:1;}
  .preisblock{grid-template-columns:1fr; gap:18pt;}
}