/* Start-Seite: "Warum MD"-Werteraster (konsistent mit .steps) */
.why{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.why .v{border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:26px 22px;min-height:220px;
  display:flex;flex-direction:column;justify-content:space-between;transition:background .4s}
.why .v .vn{font-family:"Anton",sans-serif;font-size:2.2rem;color:var(--blue);line-height:.8}
.why .v h3{font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.why .v p{color:var(--ink-2);font-size:.92rem}
.why .v:hover{background:var(--ink)}
.why .v:hover h3,.why .v:hover p{color:var(--bg)}
.why .v:hover .vn{color:var(--blue-2)}
.teaser-more{display:inline-flex;align-items:center;gap:.5em;margin-top:30px;font-size:14px;
  text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--blue);border-bottom:2px solid var(--blue);padding-bottom:3px}
.teaser-more:hover{gap:.9em}
@media(max-width:900px){.why{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.why{grid-template-columns:1fr}}

/* FAQ – Aufklapp-Fragen (details/summary, funktioniert ohne JS) */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(1.1rem,2.6vw,1.6rem);
  letter-spacing:.01em;line-height:1.05;transition:color .25s;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:1.8rem;
  color:var(--blue);flex:none;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--blue)}
.faq .fa{padding:0 4px 24px;max-width:70ch}
.faq .fa p{color:var(--ink-2);font-size:1.02rem;line-height:1.6}

/* ---------- Ansprechpartner-Streifen unter den Grundsätzen ---------- */
.mini-pers{display:flex;gap:clamp(18px,3vw,34px);align-items:center;
  margin-top:clamp(28px,4vh,46px);padding:clamp(18px,2.4vw,26px);
  border:2px solid var(--ink);background:var(--bg-2)}
.mini-pers img{width:clamp(96px,12vw,150px);height:clamp(96px,12vw,150px);flex:none;
  object-fit:cover;border:2px solid var(--ink);display:block}
.mini-pers .mk{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin-bottom:10px}
.mini-pers p{color:var(--ink-2);font-size:1rem;line-height:1.65;margin:0 0 12px;max-width:62ch}
.mini-pers p b{color:var(--ink);font-weight:600}
.mini-pers a{display:inline-block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);border-bottom:2px solid var(--blue);padding:12px 0 6px;min-height:44px}
.mini-pers a:hover{color:var(--blue)}
@media(max-width:640px){
  .mini-pers{flex-direction:column;align-items:flex-start;gap:16px}
  .mini-pers p{font-size:.96rem}
}

/* ---------- Preis-Catcher im Hero (Muster wie preise.html: große Zahl, kleine Einheit) ---------- */
.hero-preis{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;
  margin-top:clamp(26px,3.5vh,40px);padding:14px 20px 14px 0;
  border-top:2px solid var(--ink);color:var(--ink);width:100%}
.hero-preis .hp-k{font-size:.95rem;color:var(--ink-2);letter-spacing:.04em}
.hero-preis .hp-num{font-family:"Anton",sans-serif;font-size:clamp(2.2rem,4vw,3rem);
  line-height:1;color:var(--blue)}
.hero-preis .hp-unit{font-size:.95rem;color:var(--ink-2)}
.hero-preis .hp-note{font-size:.92rem;color:var(--ink-2);margin-left:14px;
  border-bottom:2px solid var(--blue);padding-bottom:3px;transition:color .25s}
.hero-preis:hover .hp-note{color:var(--blue)}
@media(max-width:640px){
  .hero-preis{gap:0 6px;padding-right:0}
  .hero-preis .hp-note{margin-left:0;flex-basis:100%;margin-top:10px;
    display:inline-block;width:fit-content}
}