/* Elektro- und Sanitärtechnik Berg – Stylesheet */

/* Farben: dunkel (Standard) */
:root{
  --bg:#0A1020;--panel:#111A2E;--line:#25345A;--tx:#E8EDF7;--mu:#A3B2CC;
  --bl:#1F6BFF;--bt:#7FA8FF;--rd:#D92D2D;--rt:#FF8080;
  --lx:max(8px,calc(50% - 542px));--nx:max(2px,calc(50% - 548px));
  color-scheme:dark;
}
/* Farben: hell (per Geräteeinstellung oder Schalter) */
@media (prefers-color-scheme:light){
  :root:not([data-theme=dark]){--bg:#F4F6FA;--panel:#FFFFFF;--line:#C8D2E4;--tx:#0E1A33;--mu:#4A5872;--bl:#1F5FE0;--bt:#1A4FC4;--rd:#C62828;--rt:#B3261E;color-scheme:light}
}
:root[data-theme=light]{--bg:#F4F6FA;--panel:#FFFFFF;--line:#C8D2E4;--tx:#0E1A33;--mu:#4A5872;--bl:#1F5FE0;--bt:#1A4FC4;--rd:#C62828;--rt:#B3261E;color-scheme:light}

/* Grundlagen */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:18px/1.6 "Segoe UI","Helvetica Neue",Arial,sans-serif;transition:background-color .2s,color .2s}
a{color:var(--bt)}
a:focus-visible,button:focus-visible{outline:3px solid var(--tx);outline-offset:3px}
h1{font-size:clamp(34px,6vw,62px);line-height:1.04;letter-spacing:-.02em;margin:0 0 20px}
h2{font-size:clamp(26px,4vw,36px);line-height:1.15;margin:0 0 20px}
h3{font-size:20px;margin:0 0 4px}
p{margin:0 0 16px;max-width:65ch}
.w{max-width:1100px;margin:0 auto;padding:0 24px}
.mu{color:var(--mu)}
.page{padding-top:64px;padding-bottom:64px}
.lead{margin-bottom:40px}
.more{margin-top:24px}
.mt{margin-top:32px}

/* Kopfbereich */
header{border-bottom:1px solid var(--line)}
header .w{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.brand{color:var(--tx);text-decoration:none;font-weight:800;font-size:22px;line-height:1.2}
.brand span{display:block;color:var(--bt);font-weight:400;font-size:15px}
nav{display:flex;flex-wrap:wrap;gap:4px 24px;align-items:center}
nav a:not(.btn){color:var(--tx);text-decoration:none;padding:10px 0;border-bottom:2px solid transparent}
nav a[aria-current]{border-color:var(--bl)}
.sm{display:none}

/* Schalter hell/dunkel */
.theme{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:1px solid var(--line);color:var(--tx);cursor:pointer}
.theme[hidden]{display:none}
.theme:hover{border-color:var(--bt)}
.theme svg{width:20px;height:20px}
.i-moon{display:none}
:root[data-theme=light] .i-sun{display:none}
:root[data-theme=light] .i-moon{display:block}
@media (prefers-color-scheme:light){
  :root:not([data-theme=dark]) .i-sun{display:none}
  :root:not([data-theme=dark]) .i-moon{display:block}
}

/* Buttons */
.btn{display:inline-block;padding:13px 26px;min-height:48px;font-weight:700;text-decoration:none;color:#fff;background:var(--bl)}
.btn.r{background:var(--rd)}
.btn.o{background:none;border:2px solid var(--bl);color:var(--tx);padding:11px 24px}

/* Leitung am linken Rand */
main{position:relative;animation:in .5s ease-out}
@keyframes in{from{opacity:0}to{opacity:1}}
main::before{content:"";position:absolute;left:var(--lx);top:0;bottom:0;width:2px;background:var(--bl);opacity:.5}
main::after{content:"";position:absolute;left:var(--nx);top:54px;width:14px;height:14px;border-radius:50%;background:var(--rd)}
section.b::before,.band::before{content:"";position:absolute;left:var(--nx);top:66px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--bt)}

/* Startseite */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:center;padding:72px 0}
.acts{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}
.sch{background:var(--panel);border:1px solid var(--line);padding:24px}
.sch svg{display:block;width:100%;height:auto}
.sch .ln{fill:none;stroke:var(--bl)}
.sch .n{fill:var(--panel);stroke:var(--bt)}
.sch .hot{fill:var(--rd)}
section.b{position:relative;border-top:1px solid var(--line);padding:60px 0}
.rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 48px}
.rows>div{border-top:1px solid var(--line);padding:20px 0 8px}
.rows p{color:var(--mu);margin-bottom:8px}
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px 32px}
.steps li{counter-increment:s;border-top:2px solid var(--bl);padding-top:12px}
.steps li::before{content:counter(s);display:block;color:var(--rt);font-weight:700;font-size:28px;line-height:1.2}
.steps b{display:block;margin-bottom:4px}
.steps span{color:var(--mu)}

/* Anruf-Band */
.band{position:relative;background:var(--panel);border-top:1px solid var(--line);padding:48px 0}
.band .w{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
.band h2{margin:0}
.tel{color:var(--rt);font-size:34px;font-weight:700;text-decoration:none}

/* Kontakt, Über uns */
.k{margin:0 0 4px;color:var(--bt);font-size:15px}
.info div{margin-bottom:28px}
.info p{margin:0}
.note{border:1px solid var(--line);border-left:4px solid var(--rd);background:var(--panel);padding:20px 24px;margin-top:8px}
.note h3{margin-bottom:8px}
.note p{margin:0 0 8px}
.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:48px;align-items:start}
.about figure{margin:0}
.about img{display:block;width:100%;max-width:360px;height:auto;border:1px solid var(--line)}
.about figcaption{color:var(--mu);font-size:15px;margin-top:8px}

/* Rechtstexte */
.doc{padding-top:56px;padding-bottom:72px}
.doc h2{font-size:24px;margin:40px 0 12px}
.doc li{margin-bottom:6px;max-width:65ch}

/* Fußbereich */
footer{border-top:1px solid var(--line);padding:24px 0;color:var(--mu);font-size:15px}
footer .w{display:flex;flex-wrap:wrap;gap:8px 28px}
footer a{color:var(--mu)}
.callbar{display:none}

/* Smartphone */
@media (max-width:700px){
  header .w{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px;padding-top:14px;padding-bottom:0}
  .brand{font-size:clamp(15px,4.4vw,19px)}
  nav{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;width:100%;gap:0 8px}
  nav a:not(.btn){padding:12px 0;min-height:44px;font-size:16px;white-space:nowrap}
  nav .home,nav .btn{display:none}
  .lg{display:none}
  .sm{display:inline}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;padding-bottom:env(safe-area-inset-bottom);background:var(--rd)}
  .callbar a{flex:1;color:#fff;text-align:center;font-weight:700;text-decoration:none;padding:16px 8px}
  .callbar a+a{background:var(--bl)}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* Weniger Bewegung */
@media (prefers-reduced-motion:reduce){
  body{transition:none}
  main{animation:none}
}

/* Druck */
@media print{
  :root,:root[data-theme]{--bg:#fff;--panel:#fff;--line:#999;--tx:#000;--mu:#333;--bt:#000;--rt:#000}
  main{animation:none}
  main::before,main::after,section.b::before,.band::before,nav,.theme,.callbar,.sch,.acts{display:none}
  a{color:#000}
  .band{border:0}
  .tel{font-size:24px}
}