/* v22: Produktseiten nach Bastians BlackCell-Draft (09.09.2026).
   Dunkle Buehne ist ein FOTO, nie eine Farbflaeche. Typo links, viel leerer Raum, ein Orange.
   Laedt nach v21.css. Desktop-Raster nur unter min-width, Handy-Regeln am Dateiende. */
.v22-hero{position:relative;background:#08090a;overflow:hidden;margin-top:-96px;isolation:isolate}
.v22-hero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 50%;z-index:0}
.v22-hero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,7,8,.94) 0%,rgba(6,7,8,.86) 34%,rgba(6,7,8,.30) 62%,rgba(6,7,8,0) 100%)}
.v22-hero-copy{position:relative;z-index:2;padding:216px 0 96px;max-width:660px;color:#fff}
.v22-produkt{font-size:19px;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.82)}
.v22-produkt em{font-style:normal;color:var(--orange)}
.v22-hero h1{margin-top:24px;font-size:clamp(40px,4.6vw,64px);line-height:1.04;letter-spacing:-.03em;font-weight:700;color:#fff;text-wrap:balance}
.v22-lead{margin-top:24px;font-size:19px;line-height:1.6;color:rgba(255,255,255,.78);max-width:52ch}
.v22-akt{display:flex;align-items:center;gap:16px;margin-top:36px;flex-wrap:wrap}
.v22-zweit{display:inline-flex;align-items:center;height:52px;padding:0 26px;border-radius:999px;border:1px solid rgba(255,255,255,.42);color:#fff;font-size:19px;font-weight:600}
.v22-zweit:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.v22-merkmale{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:44px;font-size:15px;color:rgba(255,255,255,.66)}
.v22-merkmale span{position:relative;padding-right:20px}
.v22-merkmale span:not(:last-child)::after{content:'';position:absolute;right:0;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.24)}
.v22-vertikal{position:absolute;right:56px;top:50%;transform:translateY(-50%);z-index:2;writing-mode:vertical-rl;font-size:14px;font-weight:600;letter-spacing:.34em;color:rgba(255,255,255,.58);margin:0}
.v22-credit{position:absolute;left:0;right:0;bottom:16px;z-index:2;width:min(1320px,100% - 64px);margin-inline:auto;font-size:13px;color:rgba(255,255,255,.5)}
/* Drei Bildkarten, Text im Bild (Draft) */
.v22-karten{display:grid;gap:24px;margin-top:-72px;position:relative;z-index:3}
.v22-karte{position:relative;display:block;border-radius:12px;overflow:hidden;background:#111;min-height:280px;color:#fff;isolation:isolate}
.v22-karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.v22-karte::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,7,8,.72) 0%,rgba(6,7,8,.34) 52%,rgba(6,7,8,.62) 100%)}
.v22-karte-typo{position:relative;z-index:2;display:block;padding:28px 28px 64px}
.v22-karte-typo b{display:block;font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.015em}
.v22-karte-typo>span{display:block;margin-top:12px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.76)}
.v22-karte-pfeil{position:absolute;z-index:2;left:28px;bottom:24px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.4)}
.v22-karte-pfeil svg{width:18px;height:18px}
.v22-karte:hover .v22-karte-pfeil{background:var(--orange);border-color:var(--orange)}
/* Helle Technik-Sektion */
.v22-technik{background:var(--paper);padding:120px 0}
.v22-kicker{font-size:15px;font-weight:600;letter-spacing:.14em;color:var(--orange-dark)}
.v22-technik h2{margin-top:16px;font-size:clamp(34px,3.4vw,48px);line-height:1.06;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.v22-technik-copy>p{margin-top:20px;font-size:18px;line-height:1.6;color:var(--muted);max-width:46ch}
.v22-technik-bild img{display:block;width:100%;height:auto;border-radius:12px}
.v22-punkte{margin:0;display:grid;gap:28px;align-content:center}
.v22-punkte dt{font-size:19px;font-weight:600;line-height:1.3}
.v22-punkte dd{margin:6px 0 0;font-size:16px;line-height:1.55;color:var(--muted)}
@media(min-width:901px){
 .v22-karten{grid-template-columns:repeat(3,1fr)}
 .v22-technik-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"copy bild" "punkte bild";gap:48px 56px;align-items:center}
 .v22-technik-copy{grid-area:copy;align-self:end}
 .v22-technik-bild{grid-area:bild;margin:0}
 .v22-punkte{grid-area:punkte;align-self:start}
}
@media(max-width:900px){
 .v22-hero{margin-top:-72px}
 .v22-hero-bild{object-position:70% 50%}
 .v22-hero::after{background:linear-gradient(180deg,rgba(6,7,8,.90) 0%,rgba(6,7,8,.80) 58%,rgba(6,7,8,.92) 100%)}
 .v22-hero-copy{padding:150px 0 72px;max-width:none}
 .v22-hero h1{font-size:34px}
 .v22-lead{font-size:17px;margin-top:20px}
 .v22-akt{flex-direction:column;align-items:stretch;gap:12px}
 .v22-akt .button,.v22-zweit{justify-content:center;width:100%}
 .v22-merkmale{flex-direction:column;gap:8px;margin-top:32px}
 .v22-merkmale span{padding-right:0}
 .v22-merkmale span:not(:last-child)::after{display:none}
 .v22-vertikal{display:none}
 .v22-credit{position:static;width:auto;padding:0 20px 16px;color:rgba(255,255,255,.45)}
 .v22-karten{margin-top:32px;gap:16px}
 .v22-karte{min-height:240px}
 .v22-karte-typo{padding:24px 20px 60px}
 .v22-karte-typo b{font-size:21px}
 .v22-technik{padding:72px 0}
 .v22-technik-raster{display:grid;gap:32px}
 .v22-punkte{gap:20px}
}