/* Zusaetzliche Sektionsbausteine fuer Produktseiten.
   Bewusst eine eigene Datei: styles/product.css wird laut _headers ein Jahr
   lang "immutable" ausgeliefert. Wer sie aendert, erreicht wiederkehrende
   Besucher nicht mehr - deren Browser behaelt die alte Fassung. Neue Bausteine
   kommen deshalb unter einem neuen Dateinamen dazu. */

/* Bedrohungslage / Problemkarten */
.threat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:40px}
.threat-card{padding:30px;position:relative;overflow:hidden}
.threat-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent-warn),transparent);opacity:0.6}
.threat-card .t-icon{width:46px;height:46px;border-radius:12px;background:rgba(255,107,61,0.1);border:1px solid rgba(255,107,61,0.25);display:flex;align-items:center;justify-content:center;color:var(--accent-warn);font-size:1.1rem;margin-bottom:16px}
.threat-card h4{font-family:var(--font-display);font-size:0.98rem;font-weight:700;letter-spacing:0.5px;margin-bottom:10px}
.threat-card p{font-size:0.88rem;color:var(--text-secondary);line-height:1.7;font-weight:300}

/* Systemkomponenten */
.sys-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:18px;margin-top:40px}
.sys-card{padding:28px;display:flex;flex-direction:column;gap:12px}
.sys-card .sys-tag{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.sys-card h4{font-family:var(--font-display);font-size:1.05rem;font-weight:700;letter-spacing:0.5px}
.sys-card p{font-size:0.88rem;color:var(--text-secondary);line-height:1.7;font-weight:300}
.sys-card ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:2px}
.sys-card li{font-size:0.82rem;color:var(--text-secondary);line-height:1.6;font-weight:300;display:flex;gap:10px;align-items:flex-start}
.sys-card li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:7px;flex:0 0 5px}
.sys-note{margin-top:24px;padding:22px 26px;border-left:2px solid var(--accent);background:rgba(0,220,255,0.04);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:0.88rem;color:var(--text-secondary);line-height:1.75;font-weight:300}
.sys-note b{color:var(--text-primary);font-weight:600}

/* Fuenf gleichrangige Karten: 3+2 statt 4+1 */
.cap5-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}

/* Einsatzablauf */
.steps{margin-top:44px}
.step{display:grid;grid-template-columns:104px 1fr;gap:28px;padding:32px 0;border-top:1px solid var(--glass-border);align-items:start}
.step:last-child{border-bottom:1px solid var(--glass-border)}
.step-n{font-family:var(--font-display);font-size:2.6rem;font-weight:900;line-height:1;color:var(--accent);opacity:0.35}
.step h4{font-family:var(--font-display);font-size:1.25rem;font-weight:800;letter-spacing:0.5px;margin-bottom:12px}
.step p{font-size:0.95rem;color:var(--text-secondary);line-height:1.8;font-weight:300}
.step-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.chip{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);background:var(--accent-dim);border:1px solid rgba(0,220,255,0.2);padding:5px 12px;border-radius:6px}

/* Systemaufbau und Produktansichten */
.diagram{margin-top:40px;padding:34px;display:flex;flex-direction:column;gap:26px}
.diagram img{width:100%;height:auto;display:block}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.legend div{font-size:0.85rem;color:var(--text-secondary);line-height:1.7;font-weight:300;padding-left:14px;border-left:2px solid var(--accent)}
.legend b{display:block;font-family:var(--font-mono);font-size:0.66rem;letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:6px}
.views-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.view{padding:26px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.view img{width:100%;height:220px;object-fit:contain}
.view .v-label{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);text-align:center}

/* Mehrere Datenblattgruppen untereinander */
.spec-group{margin-top:40px}
.spec-group + .spec-group{margin-top:26px}
.spec-group > h3{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.spec-group > h3::before{content:'';width:24px;height:1px;background:var(--accent)}
.spec-group .specs-wrap{margin-top:0}
.specs-note{margin-top:16px;font-size:0.8rem;color:var(--text-muted);line-height:1.7;font-weight:300}

/* Einordnung im Portfolio: Querverweis zwischen verwandten Produkten */
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.rel-card{padding:30px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit}
.rel-card .rel-tag{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.rel-card.current .rel-tag{color:var(--accent-warm)}
.rel-card h4{font-family:var(--font-display);font-size:1.15rem;font-weight:800;letter-spacing:0.5px}
.rel-card p{font-size:0.88rem;color:var(--text-secondary);line-height:1.7;font-weight:300}
.rel-figures{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.rel-figures span{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:1px;color:var(--text-secondary);border:1px solid var(--glass-border);padding:4px 10px;border-radius:6px}
.rel-more{margin-top:auto;padding-top:10px;font-size:0.82rem;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:8px}
.rel-card.current{border-color:rgba(0,255,200,0.25)}
.rel-card.current .rel-more{color:var(--text-muted);font-weight:400}

/* Quellen-, Marken- und Rechtehinweis */
.note-card{padding:38px;display:flex;flex-direction:column;gap:22px}
.note-head{display:flex;align-items:center;gap:14px}
.note-head i{color:var(--accent);font-size:1.1rem}
.note-head h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;letter-spacing:1px}
.note-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.note-block{font-size:0.85rem;color:var(--text-secondary);line-height:1.75;font-weight:300}
.note-block .k{display:block;font-family:var(--font-mono);font-size:0.66rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.note-card a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(0,220,255,0.3)}
.note-card a:hover{border-bottom-color:var(--accent)}

@media(max-width:1024px){
.sys-grid,.cap5-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
.sys-grid,.cap5-grid,.views-2,.rel-grid{grid-template-columns:1fr}
.step{grid-template-columns:1fr;gap:12px}
.step-n{font-size:2rem}
.diagram{padding:22px}
.note-card{padding:26px}
}