@charset "utf-8";
/* Produktwelt — Ergänzungen zu prototyp.css.
   Keine neuen Farben oder Schriftgrößen: alles kommt aus den Tokens des Master-Designs. */

nav a.aktiv{color:var(--tinte);box-shadow:inset 0 -2px 0 var(--rot)}
nav a.unfertig{color:var(--tinte-3)}
nav a.unfertig::after{content:"·";margin-left:6px;color:var(--rot)}

/* Brotkrume */
.krume{font-size:12.5px;font-weight:600;color:var(--tinte-3);display:flex;gap:8px;flex-wrap:wrap;
  align-items:center;margin-bottom:18px}
.krume a{color:var(--tinte-2)}
.krume a:hover{color:var(--rot)}
.krume b{color:var(--tinte)}
.krume span{color:var(--linie-2)}

/* Kopfbereich */
.p-kopf{padding-block:clamp(30px,4vw,56px) clamp(40px,5vw,72px)}
.p-h1{font-size:clamp(30px,3.6vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.06;
  max-width:20ch;margin:0}
.p-akt{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.p-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:center}
.p-bild{margin:0;position:relative;overflow:hidden;background:var(--nebel);aspect-ratio:16/10}
.p-bild.gross{aspect-ratio:4/3}
.p-bild img{width:100%;height:100%;object-fit:cover}
.p-bild figcaption{position:absolute;left:0;bottom:0;background:var(--papier);padding:9px 14px;color:var(--tinte-3)}

/* Nutzen: geführte Liste statt Kacheln */
.nutzen{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.nutzen li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:16px 0;
  border-bottom:1px solid var(--linie);align-items:baseline}
.nutzen li span{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--rot);
  font-variant-numeric:tabular-nums}
.nutzen li p{margin:0;font-size:clamp(16px,1.15vw,17.5px);color:var(--tinte);max-width:72ch}

/* Fließtext in zwei Spalten, asymmetrisch */
.inhalt{margin-top:clamp(30px,4vw,52px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3.5vw,52px)}
.abs h3{margin:0;font-size:clamp(18px,1.6vw,22px);font-weight:800;letter-spacing:-.025em;line-height:1.2}
.abs p{margin:10px 0 0;color:var(--tinte-2);font-size:16px;max-width:60ch}

/* Regelwerke */
.normen{margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--linie);padding-top:16px}
.nliste{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.norm{font-size:12.5px;font-weight:700;letter-spacing:.02em;border:1px solid var(--linie-2);
  padding:7px 11px;color:var(--tinte-2);background:var(--papier)}

/* Einsatz und Fragen */
.p-einsatz{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(26px,4vw,64px);align-items:start}
.einsatz{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--linie-2)}
.einsatz li{padding:11px 0;border-bottom:1px solid var(--linie-2);font-size:15.5px;color:var(--tinte-2);
  display:flex;gap:12px;align-items:baseline}
.einsatz li::before{content:"";width:10px;height:1.5px;background:var(--rot);flex:none;transform:translateY(-4px)}
.faq .f{border-bottom:1px solid var(--linie-2)}
.faq .f:first-of-type{border-top:1px solid var(--linie-2);margin-top:12px}
.faq summary{list-style:none;cursor:pointer;padding:15px 30px 15px 0;font-size:16.5px;font-weight:700;
  letter-spacing:-.015em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:13px;font-size:19px;font-weight:700;color:var(--rot)}
.faq .f[open] summary::after{content:"–"}
.faq p{margin:0 0 16px;font-size:15.5px;color:var(--tinte-2);max-width:70ch;line-height:1.6}

/* Herstellerleiste: Namen nur hier, nie im Fließtext */
.hersteller{margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--linie);padding-top:20px}
.dunkel .hersteller{border-top-color:var(--kante)}
/* Fünf Logos je Reihe. Die Rasterlinie sitzt am einzelnen Feld statt am Kasten darum:
   so bleibt am Ende einer unvollständigen Reihe keine graue Lücke stehen. */
.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin-top:14px}
.logo{background:var(--papier);border:1px solid var(--linie);height:64px;
  display:grid;place-items:center;padding:10px}
/* feste Maximalhöhe statt Prozent: im Grid löst height:100% sonst zu auto auf */
.logo img{max-width:100%;max-height:44px;width:auto;height:auto;
  filter:grayscale(1);opacity:.62;transition:filter .2s,opacity .2s}
.logo:hover img{filter:none;opacity:1}
.hweis{margin-top:12px;font-size:13.5px;color:var(--tinte-3);max-width:76ch}

/* Beratung */
.p-beratung{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(26px,4vw,60px);align-items:center}

/* Blätterleiste */
.weiter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--linie);
  border:1px solid var(--linie)}
.weiter a{background:var(--papier);padding:18px 20px;transition:background .15s}
.weiter a:hover{background:var(--nebel)}
.weiter a b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.025em;margin-top:6px}
.weiter a.mitte{text-align:center}
.weiter a.rechts{text-align:right}

/* Kontakt dunkel */
.p-kontakt{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(26px,4vw,60px);align-items:center}
.ap-dunkel{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:center;
  border:1px solid var(--kante);background:var(--anthrazit-2);padding:18px}
.ap-dunkel img{width:120px;height:150px;object-fit:cover;object-position:50% 20%}
.ap-dunkel b{display:block;font-size:19px;font-weight:800;letter-spacing:-.025em;margin-top:8px;color:#fff}
.ap-dunkel span{display:block;font-size:13.5px;color:var(--hell-2);margin-top:3px}

/* Fußzeile: Social */
.sozial{display:flex;gap:14px;margin-top:16px;font-size:13.5px}
.sozial a{color:var(--hell-2);border-bottom:1px solid var(--kante-2);padding-bottom:2px}
.sozial a:hover{color:#fff;border-color:var(--rot)}

/* Spannweite für die Übersichtskacheln */
.s6{grid-column:span 6}

@media(max-width:900px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:1020px){
  .p-hero,.p-einsatz,.p-beratung,.p-kontakt,.inhalt{grid-template-columns:1fr}
  .s6{grid-column:span 12}
  .weiter{grid-template-columns:1fr}
  .weiter a.mitte,.weiter a.rechts{text-align:left}
}
@media(max-width:700px){
  .s6{grid-column:span 2}
  .nutzen li{grid-template-columns:34px minmax(0,1fr);gap:10px}
  .ap-dunkel{grid-template-columns:1fr}
  .ap-dunkel img{width:100%;height:220px}
}

/* Einstieg der Übersicht: Überschrift links, Einordnung rechts */
.p-einstieg{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:end}
@media(max-width:1020px){.p-einstieg{grid-template-columns:1fr;align-items:start}}