/* =========================================================
   Eiferts Technikschmiede – gemeinsames Stylesheet für alle Seiten
   Farben & Optik nach Visitenkarte: Schwarz + Blau, Tech-Look
   ========================================================= */
:root{
  --bg:#05080d;
  --bg2:#0a121e;
  --card:#0e1827;
  --linie:#1b3050;
  --akzent:#1f8fff;
  --akzent2:#38c6ff;
  --text:#eaf2fb;
  --grau:#9fb4ca;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--bg);}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);background:transparent;line-height:1.65;
}

/* technischer Platinen-Hintergrund (fixiert) – verschiebt sich beim Scrollen
   und driftet langsam. Steckt komplett hier, daher nur style.css hochladen. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(31,143,255,.12), transparent 42%),
    radial-gradient(circle at 85% 82%, rgba(56,198,255,.10), transparent 46%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22320%22%20viewBox%3D%220%200%20320%20320%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%231f8fff%22%20stroke-width%3D%221.4%22%20opacity%3D%220.5%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%2060%20H70%20V120%20H150%22%2F%3E%3Cpath%20d%3D%22M150%20120%20V40%20H240%22%2F%3E%3Cpath%20d%3D%22M240%2040%20H320%22%2F%3E%3Cpath%20d%3D%22M40%200%20V40%20H100%22%2F%3E%3Cpath%20d%3D%22M20%20200%20H120%20V260%20H200%22%2F%3E%3Cpath%20d%3D%22M200%20260%20H280%20V320%22%2F%3E%3Cpath%20d%3D%22M280%20140%20H210%20V190%22%2F%3E%3Cpath%20d%3D%22M0%20280%20H80%22%2F%3E%3Cpath%20d%3D%22M300%20200%20V270%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%2338c6ff%22%20opacity%3D%220.6%22%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22120%22%20r%3D%223.2%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%2240%22%20r%3D%223.2%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2240%22%20r%3D%223.2%22%2F%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22200%22%20r%3D%223.2%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22260%22%20r%3D%223.2%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22140%22%20r%3D%223.2%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2240%22%20r%3D%223.2%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2338c6ff%22%20stroke-width%3D%221.3%22%20opacity%3D%220.55%22%3E%3Crect%20x%3D%22132%22%20y%3D%22150%22%20width%3D%2256%22%20height%3D%2240%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M140%20150%20V140%20M152%20150%20V140%20M164%20150%20V140%20M176%20150%20V140%20M140%20190%20V200%20M152%20190%20V200%20M164%20190%20V200%20M176%20190%20V200%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%231f8fff%22%20stroke-width%3D%221.3%22%20opacity%3D%220.45%22%3E%3Crect%20x%3D%22250%22%20y%3D%2295%22%20width%3D%2234%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat,no-repeat,repeat;
  background-size:auto,auto,320px 320px;
  animation:bgdrift 70s linear infinite;
  pointer-events:none;
}
@keyframes bgdrift{
  from{background-position:0 0,0 0,0 0;}
  to{background-position:0 0,0 0,320px 320px;}
}
@media (prefers-reduced-motion: reduce){
  body::before{animation:none;}
}
.container{max-width:1040px;margin:0 auto;padding:0 24px;}
a{color:var(--akzent2);}
img{max-width:100%;}

/* technischer Raster-/Platinen-Hintergrund */
.grid-bg{
  background-image:
    linear-gradient(rgba(31,143,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(31,143,255,.07) 1px,transparent 1px);
  background-size:34px 34px;
}

/* ---------- Header / Navigation ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(5,8,13,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie);}
nav{display:flex;justify-content:space-between;align-items:center;padding:22px 0;flex-wrap:wrap;gap:10px;}
.logo{font-family:var(--mono);font-size:1.12rem;line-height:1.15;font-weight:700;letter-spacing:1px;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:10px;}
.logo .logo-icon{width:34px;height:34px;flex:none;}
.logo .logo-full{height:54px;width:auto;display:block;margin:6px 0;}
.logo .lt{display:block;}
.logo em{color:var(--akzent);font-style:normal;}
.logo small{display:block;font-size:.58rem;letter-spacing:4px;color:var(--grau);font-weight:600;}
.logo b{background:linear-gradient(180deg,#fff,#7fbcff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.navlinks a{position:relative;color:var(--grau);text-decoration:none;margin-left:26px;font-size:1.06rem;padding-bottom:5px;transition:color .2s ease,text-shadow .2s ease;}
/* glühende Linie, die beim Hover von links einfährt */
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--akzent),var(--akzent2));box-shadow:0 0 8px rgba(56,198,255,.7);transition:width .25s ease;}
.navlinks a:hover{color:#fff;text-shadow:0 0 10px rgba(56,198,255,.55);}
.navlinks a:hover::after,.navlinks a.aktiv::after{width:100%;}
.navlinks a.aktiv{color:#fff;}

/* ---------- Hero ---------- */
.hero{padding:90px 0 80px;}
.tag{font-family:var(--mono);font-size:.78rem;color:var(--akzent2);letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;}
.hero h1{font-size:2.6rem;line-height:1.15;margin-bottom:18px;color:#fff;}
.hero h1 b{color:var(--akzent);}
.hero .slogan{font-size:1.1rem;color:var(--grau);max-width:640px;margin-bottom:30px;}
.hero .slogan b{color:#fff;}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-block;background:linear-gradient(135deg,var(--akzent),var(--akzent2));color:#04111f;padding:14px 30px;border-radius:8px;text-decoration:none;font-weight:700;cursor:pointer;font-size:1rem;border:none;box-shadow:0 6px 24px rgba(31,143,255,.25);transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease;}
/* Hover: Button hebt sich + ein leuchtender Ring pulsiert nach außen (kein Hintergrund-Effekt) */
.btn:hover{transform:translateY(-3px);animation:btnpulse 1.5s ease-out infinite;}
.btn:active{transform:translateY(-1px);}
@keyframes btnpulse{
  0%{box-shadow:0 0 0 0 rgba(56,198,255,.55),0 12px 30px rgba(31,143,255,.4);}
  70%{box-shadow:0 0 0 14px rgba(56,198,255,0),0 12px 30px rgba(31,143,255,.4);}
  100%{box-shadow:0 0 0 0 rgba(56,198,255,0),0 12px 30px rgba(31,143,255,.4);}
}
.btn.ghost{background:transparent;color:#fff;border:1px solid var(--linie);box-shadow:none;margin-left:12px;}
.btn.ghost:hover{border-color:var(--akzent);background:rgba(31,143,255,.14);color:#fff;}
.btn.whatsapp{background:linear-gradient(135deg,#25D366,#1ebe5a);color:#04210f;}
.btn.whatsapp:hover{animation:btnpulsegreen 1.5s ease-out infinite;}
@keyframes btnpulsegreen{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.55),0 12px 30px rgba(37,211,102,.35);}
  70%{box-shadow:0 0 0 14px rgba(37,211,102,0),0 12px 30px rgba(37,211,102,.35);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0),0 12px 30px rgba(37,211,102,.35);}
}
@media(prefers-reduced-motion:reduce){.btn:hover,.btn.ghost:hover,.btn.whatsapp:hover{animation:none;}}

/* Karte (Einzugsgebiet) */
#map{width:100%;max-width:440px;aspect-ratio:1/1;margin:0 0 0 max(0px,calc((100% - 440px) / 4));border-radius:12px;border:1px solid var(--linie);overflow:hidden;background:var(--bg2);}
.leaflet-container{background:var(--bg2);font-family:inherit;}

/* ---------- Sektionen ---------- */
section{padding:64px 0;}
.kopf{margin-bottom:40px;}
.kopf .tag{margin-bottom:10px;}
.kopf h2{font-size:1.8rem;color:#fff;letter-spacing:.5px;}
.kopf h2 span{color:var(--akzent);}
.kopf p{color:var(--grau);margin-top:8px;font-size:1.1rem;}
.seitentitel{padding:70px 0 10px;}
.seitentitel h1{font-size:2.2rem;color:#fff;}
.seitentitel .tag{margin-bottom:12px;}

/* ---------- Karten-Grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.karte{background:var(--card);border:1px solid var(--linie);border-radius:12px;padding:26px;transition:border-color .15s,transform .15s;}
.karte:hover{border-color:var(--akzent);transform:translateY(-3px);}
.karte .ico{font-size:1.85rem;margin-bottom:12px;display:block;}
.karte h3{font-size:1.2rem;color:#fff;margin-bottom:6px;}
.karte p{color:var(--grau);font-size:1.05rem;}

/* ---------- Werte-Banner ---------- */
.werte{background:rgba(10,18,30,.78);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);text-align:center;}
.werte .wort{font-family:var(--mono);font-size:1.6rem;font-weight:700;letter-spacing:3px;color:#fff;display:inline-block;margin:0 14px;}
.werte .wort.b{color:var(--akzent);}
.werte p{color:var(--grau);margin-top:14px;}

/* ---------- Ablauf-Schritte ---------- */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;}
.schritt .nr{font-family:var(--mono);font-size:2rem;color:var(--akzent);font-weight:700;}
.schritt h3{color:#fff;margin:6px 0;font-size:1.2rem;}
.schritt p{color:var(--grau);font-size:1.05rem;}

/* ---------- Info-Banner ---------- */
.banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--card);border:1px solid var(--linie);border-radius:12px;padding:22px 26px;}
.banner .ico{font-size:1.7rem;}
.banner b{color:#fff;} .banner span{color:var(--grau);}

/* ---------- Formular (Konfigurator / Kontakt) ---------- */
.form{background:var(--card);border:1px solid var(--linie);border-radius:14px;padding:32px;max-width:720px;}
.feld{margin-bottom:22px;}
.feld label{display:block;color:#fff;font-weight:600;margin-bottom:8px;}
.feld small{color:var(--grau);font-weight:400;}
.feld select,.feld input,.feld textarea{
  width:100%;background:var(--bg);border:1px solid var(--linie);border-radius:8px;
  padding:12px 14px;color:var(--text);font-size:1rem;font-family:inherit;
}
.feld select:focus,.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--akzent);}
.feld textarea{min-height:110px;resize:vertical;}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;}
.check{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--linie);border-radius:8px;padding:10px 12px;cursor:pointer;}
.check input{width:auto;}
.check span{font-size:.94rem;}

/* ---------- Kontakt-Infos ---------- */
.kontaktliste{list-style:none;}
.kontaktliste li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--linie);}
.kontaktliste li:last-child{border-bottom:none;}
.kontaktliste .ico{font-size:1.35rem;width:34px;text-align:center;}
.kontaktliste a{color:var(--akzent2);text-decoration:none;font-size:1.05rem;}
.kontaktliste .label{font-family:var(--mono);color:var(--grau);font-size:.78rem;text-transform:uppercase;letter-spacing:1px;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--linie);padding:30px 0;color:var(--grau);font-size:.85rem;text-align:center;}
footer .logo{font-size:1rem;margin-bottom:10px;display:inline-block;}
footer a{color:var(--grau);text-decoration:none;}
footer a:hover{color:#fff;}
footer .motto{font-family:var(--mono);letter-spacing:1px;color:var(--grau);margin:6px 0 14px;}
footer .motto b{color:var(--akzent);}

/* ---------- PC-Typ-Auswahl (Konfigurator) ---------- */
.pcwahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.pcopt{position:relative;}
.pcopt input{position:absolute;opacity:0;pointer-events:none;}
.pcopt label{display:block;cursor:pointer;background:var(--bg);border:1px solid var(--linie);border-radius:10px;padding:18px;height:100%;transition:border-color .15s,background .15s;}
.pcopt label .ico{font-size:1.6rem;display:block;margin-bottom:8px;}
.pcopt label b{color:#fff;display:block;margin-bottom:4px;}
.pcopt label small{color:var(--grau);}
.pcopt input:checked + label{border-color:var(--akzent);background:rgba(31,143,255,.12);box-shadow:0 0 0 1px var(--akzent) inset;}

/* ---------- Bewertungen ---------- */
.bewertungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.bewertung{background:var(--card);border:1px solid var(--linie);border-radius:12px;padding:24px;}
.bewertung .sterne{color:#ffc83d;font-size:1.05rem;margin-bottom:10px;}
.bewertung p{color:var(--text);font-style:italic;margin-bottom:12px;}
.bewertung .wer{color:var(--grau);font-size:.9rem;font-family:var(--mono);}

/* ---------- Responsive ---------- */
@media(max-width:600px){
  .hero{padding:56px 0 46px;}
  .hero h1{font-size:1.9rem;}
  .btn.ghost{margin-left:0;margin-top:12px;display:block;text-align:center;}
  .navlinks a{margin-left:14px;font-size:.85rem;}
  .werte .wort{font-size:1.2rem;margin:4px 8px;}
  .form{padding:22px;}
}

/* ---------- Pauschalen (Preise) ---------- */
.pauschale ul{list-style:none;padding:0;margin:14px 0 0;text-align:left;}
.pauschale li{padding:5px 0 5px 26px;position:relative;color:var(--grau);font-size:.98rem;}
.pauschale li::before{content:"\2713";position:absolute;left:0;color:var(--akzent2);font-weight:700;}
.pauschale .preis{font-size:1.7rem;color:#fff;font-weight:700;margin:6px 0;}
.pauschale .preis span{font-size:.95rem;color:var(--grau);font-weight:400;}