/* Prime Solutions - Corporate Design Schwarz/Rot */
:root{
  --schwarz:#111111;
  --rot:#C1121F;
  --grau:#F4F4F4;
  --linie:#DCDCDC;
  --text2:#5A5A5A;
  --max:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--schwarz);
  background:#fff;
  font-size:17px;
  line-height:1.65;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
a{color:var(--schwarz)}

/* Telefon- und E-Mail-Links sichtbar machen.
   iOS erkennt Rufnummern automatisch und faerbt sie unauffaellig –
   diese Regel setzt das zurueck. */
a.klar,
a[href^="tel:"],
a[href^="mailto:"]{
  color:var(--rot);
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:bold;
}
a.klar:hover,
a[href^="tel:"]:hover,
a[href^="mailto:"]:hover{color:var(--schwarz)}
.foot a[href^="tel:"],
.foot a[href^="mailto:"]{color:#fff}

/* ---------- Kopf ---------- */
.head{border-bottom:1px solid var(--linie);background:#fff;position:sticky;top:0;z-index:10}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.brand{display:block;line-height:0}
.logo{width:236px;height:35px;display:block}
.nav{display:flex;gap:26px;flex-wrap:wrap}
.nav a{
  text-decoration:none;text-transform:uppercase;font-size:13px;font-weight:bold;
  letter-spacing:1.4px;padding:4px 0;border-bottom:2px solid transparent
}
.nav a:hover{border-bottom-color:var(--linie)}
.nav a.is-active{border-bottom-color:var(--rot)}

/* ---------- Chevron-Band (Signatur) ---------- */
.band{
  height:12px;
  background:repeating-linear-gradient(115deg,
    var(--schwarz) 0 16px, transparent 16px 26px,
    var(--rot) 26px 42px, transparent 42px 52px);
}

/* ---------- Abschnitte ---------- */
section{padding:64px 0}
section.tone{background:var(--grau);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.eyebrow{
  text-transform:uppercase;letter-spacing:2.6px;font-size:12px;font-weight:bold;
  color:var(--rot);margin-bottom:12px
}
h1{font-size:44px;line-height:1.12;letter-spacing:-0.5px;text-transform:uppercase;
  font-weight:bold;max-width:19ch}
h2{font-size:28px;line-height:1.2;text-transform:uppercase;letter-spacing:0.4px;
  margin-bottom:20px}
h3{font-size:19px;margin-bottom:8px;letter-spacing:0.2px}
p{max-width:66ch}
p + p{margin-top:14px}
.lead{font-size:20px;color:var(--text2);margin-top:20px;max-width:60ch}
.hero{padding:76px 0 68px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;background:var(--schwarz);color:#fff;text-decoration:none;
  padding:15px 30px;font-weight:bold;text-transform:uppercase;letter-spacing:1.4px;
  font-size:14px;border:2px solid var(--schwarz)
}
.btn:hover{background:var(--rot);border-color:var(--rot)}
.btn.hell{background:#fff;color:var(--schwarz)}
.btn.hell:hover{background:var(--schwarz);color:#fff}
.btn-reihe{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ---------- Leistungsblöcke ---------- */
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:36px}
.karte{background:#fff;padding:30px 26px}
.karte .marke{
  display:inline-block;background:var(--schwarz);color:#fff;font-size:12px;
  font-weight:bold;letter-spacing:1.6px;padding:5px 10px;margin-bottom:16px
}
.karte ul{list-style:none;margin-top:14px}
.karte li{position:relative;padding-left:20px;color:var(--text2);font-size:16px;
  padding-bottom:6px}
.karte li::before{content:"";position:absolute;left:0;top:9px;width:0;height:0;
  border-left:7px solid var(--rot);border-top:5px solid transparent;
  border-bottom:5px solid transparent}

/* ---------- Ablauf ---------- */
.ablauf{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:30px;margin-top:36px}
.schritt{border-top:3px solid var(--schwarz);padding-top:16px}
.schritt .nr{font-size:13px;font-weight:bold;letter-spacing:2px;color:var(--rot);
  margin-bottom:8px}
.schritt p{font-size:16px;color:var(--text2)}

/* ---------- Fakten ---------- */
.fakten{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--linie);margin-top:36px}
.fakt{flex:1 1 200px;padding:24px 26px;border-right:1px solid var(--linie)}
.fakt:last-child{border-right:0}
.fakt b{display:block;font-size:26px;letter-spacing:-0.3px}
.fakt span{font-size:14px;color:var(--text2)}

/* ---------- Formular ---------- */
.formular{max-width:760px;margin-top:34px}
fieldset{border:1px solid var(--linie);padding:24px;margin-bottom:22px}
legend{font-size:12px;font-weight:bold;text-transform:uppercase;letter-spacing:2px;
  padding:0 10px;background:var(--schwarz);color:#fff;line-height:24px}
.feldreihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.feld{display:flex;flex-direction:column;margin-top:16px}
.feld:first-child{margin-top:0}
label{font-size:13px;font-weight:bold;letter-spacing:0.6px;margin-bottom:6px}
input,select,textarea{
  font-family:inherit;font-size:16px;padding:11px 12px;border:1px solid #9A9A9A;
  background:#fff;border-radius:0;width:100%
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--rot);outline-offset:1px}
textarea{min-height:120px;resize:vertical}
.pflicht{color:var(--rot)}
.zustimmung{display:flex;gap:12px;align-items:flex-start;margin-top:8px;font-size:15px}
.zustimmung input{width:20px;height:20px;flex:0 0 20px;margin-top:3px}
.hinweis{font-size:14px;color:var(--text2);margin-top:10px}

/* ---------- Preise ---------- */
.preisblock{margin-top:34px}
.preisblock h3{text-transform:uppercase;letter-spacing:1.6px;font-size:14px;
  border-bottom:2px solid var(--schwarz);padding-bottom:8px;margin-bottom:0}
table.preise{width:100%;border-collapse:collapse;margin-bottom:26px}
table.preise td{border-bottom:1px solid var(--linie);padding:13px 0;font-size:16px;
  vertical-align:top}
table.preise td:last-child{text-align:right;white-space:nowrap;font-weight:bold;
  padding-left:18px}
table.preise tr:last-child td{border-bottom:0}
.preisnote{font-size:14px;color:var(--text2);margin-top:-12px;margin-bottom:30px;
  max-width:70ch}

/* ---------- Kontakt ---------- */
.kontaktraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:34px;margin-top:36px}
.kontaktraster dt{font-size:12px;font-weight:bold;text-transform:uppercase;
  letter-spacing:2px;color:var(--rot);margin-top:18px}
.kontaktraster dt:first-child{margin-top:0}
.kontaktraster dd{font-size:18px}

/* ---------- Rechtstexte ---------- */
.recht h2{font-size:22px;margin-top:38px}
.recht h2:first-child{margin-top:0}
.recht p{margin-top:12px;color:var(--text2)}

/* ---------- Fuß ---------- */
.foot{background:var(--schwarz);color:#fff;padding:44px 0;margin-top:0}
.foot-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot p{font-size:15px;color:#C9C9C9}
.foot .foot-name{color:#fff;font-weight:bold;letter-spacing:0.4px;margin-bottom:6px}
.foot-nav{display:flex;flex-direction:column;gap:8px}
.foot-nav a{color:#C9C9C9;text-decoration:none;font-size:15px}
.foot-nav a:hover{color:#fff}

@media (max-width:700px){
  body{font-size:16px}
  h1{font-size:31px}
  h2{font-size:23px}
  .lead{font-size:18px}
  section{padding:46px 0}
  .hero{padding:48px 0 44px}
  .logo{width:196px;height:29px}
  .nav{gap:18px}
  .fakt{border-right:0;border-bottom:1px solid var(--linie)}
  .fakt:last-child{border-bottom:0}
}