/* =========================================================================
   Rokamat — Long-Form Content Page (pg-*)
   Used for: Unternehmen, Service, Geschichte, Umwelt, Messen, Informationen-
   Akkus, Highlights, CAS-Partner — Editorial layout, sticky TOC.
   ========================================================================= */

/* ----- HERO -------------------------------------------------------------- */
.pg-hero {
  background: #f5f5f3;
  padding: 56px 0 64px;
  border-bottom: 1px solid var(--rok-gray-200);
}
.pg-hero-inner {
  display: block;
}
.pg-hero-text { max-width: 820px }
.pg-hero-text .v2-eyebrow { margin-bottom: 18px }
.pg-h1 {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(44px, 6vw, 88px);
  line-height: .94;
  letter-spacing: -.02em;
  margin: 0 0 24px;
  color: var(--rok-ink);
}
.pg-h1 .ro {
  font-weight: 900;
  font-style: italic;
  color: var(--rok-orange);
}
.pg-h1 .thin {
  font-weight: 300;
  font-style: normal;
  color: #666;
}
.pg-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--rok-text-muted-accessible);
  max-width: 540px;
  margin: 0;
}
/* .pg-hero-badge removed 2026-05-20.
   .pg-hero-img war MIT entfernt worden — die Vorlagen rendern den Container aber
   weiterhin (index_page_unternehmen / _geschichte / _cas / _umwelt). Er stand
   damit ganz ohne Regel da und lag ohne jeden Abstand direkt unter dem Lead
   (`.pg-lead{margin:0}`), sodass der Text auf dem Bild zu kleben schien
   (Owner-Befund 21.07.).

   24px spiegeln exakt den Abstand ÜBER dem Lead (`.pg-h1{margin:0 0 24px}`) —
   damit steht vor und nach dem Textblock derselbe Raum. Bewusst am Bild und
   nicht am Lead: so bleiben rein textliche Hero-Bereiche unverändert. */
.pg-hero-img { margin-top: 24px; }

/* ----- STATS BAND -------------------------------------------------------- */
.pg-stats {
  background: var(--rok-ink);
  color: #fff;
  padding: 40px 0;
}
.pg-stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.pg-stat .num {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 900; font-style: italic;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -.02em;
  line-height: 1;
  color: #fff;
}
.pg-stat .lab {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  margin-top: 8px;
}
.pg-stat + .pg-stat { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.12) }
.pg-stat:first-child { padding-left: 0; border-left: none }

@media (max-width: 760px) {
  .pg-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 24px }
  .pg-stat:nth-child(3) { padding-left: 0; border-left: none }
}

/* ----- BODY GRID --------------------------------------------------------- */
.pg-body { padding: 80px 0 96px; background: #fff }
.pg-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 1000px) {
  .pg-grid { grid-template-columns: 1fr; gap: 32px }
  .pg-toc { position: static !important; max-height: none !important }
}

/* When pg-text wears rok-content (page body rendered from page.blocks),
   let rok-content drive heading + body typography but keep its outer
   constraints. */
.pg-text.rok-content {
  max-width: 880px;
  margin-inline: auto;
}
.pg-text.rok-content h2 {
  border-bottom: 2px solid var(--rok-ink);
  padding-bottom: 12px;
  margin-top: 2.5rem;
}
.pg-text.rok-content p:has(> a[href$=".pdf"]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: #fafafa;
  border: 1px solid var(--rok-gray-200);
  border-left: 3px solid var(--rok-orange);
  margin: 8px 0;
  transition: background .15s, transform .15s;
}
.pg-text.rok-content p:has(> a[href$=".pdf"]):hover {
  background: #fff;
  transform: translateX(2px);
}
.pg-text.rok-content p > a[href$=".pdf"]::before {
  content: "PDF";
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: .08em;
  background: var(--rok-orange);
  color: #fff;
  padding: 3px 6px;
  margin-right: 10px;
  vertical-align: middle;
}

/* ----- TOC --------------------------------------------------------------- */
.pg-toc {
  position: sticky;
  top: calc(var(--nav-h, 72px) + 24px);
  align-self: start;
  font-size: 13px;
}
.pg-toc-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rok-text-muted-accessible);
  margin-bottom: 14px;
}
.pg-toc-list {
  list-style: none;
  padding: 0; margin: 0;
  border-left: 1px solid var(--rok-gray-200);
}
.pg-toc-list li { margin: 0 }
.pg-toc-list a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 16px;
  color: var(--rok-text-muted-accessible);
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color .12s, border-color .12s, background .12s;
}
.pg-toc-list a:hover {
  color: var(--rok-ink);
  border-left-color: var(--rok-orange);
  background: var(--rok-gray-100);
}
.pg-toc-list .n {
  font-weight: 700; font-style: italic;
  font-size: 11px; letter-spacing: .04em;
  color: var(--rok-orange-text);
  flex: 0 0 auto;
}
.pg-toc-list .t { font-weight: 500 }

/* ----- SECTIONS ---------------------------------------------------------- */
.pg-text { max-width: 760px }
.pg-sec { margin-bottom: 80px; scroll-margin-top: calc(var(--nav-h, 72px) + 24px) }
.pg-sec:last-child { margin-bottom: 0 }

.pg-sec-head {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 22px;
}
.pg-sec-num {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 900; font-style: italic;
  font-size: 42px; line-height: 1;
  letter-spacing: -.02em;
  color: var(--rok-orange);
}
.pg-sec h2 {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 900; font-style: italic;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 0;
  color: var(--rok-ink);
}

.pg-text p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--rok-fg);
  margin: 0 0 16px;
}
.pg-text p.lead {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--rok-ink);
  margin-bottom: 24px;
}
/* Marken-Silben RO-KA-MA-T im Lead auffaellig hervorheben (Owner 21.07.).
   Der Absatz laeuft auf 300; <strong> erbte nur den Browser-Standard 700 —
   korrekt, aber im Fliesstext unauffaellig. Roboto ist eine variable Schrift
   (100-900), 900 ist also ein echter Schnitt, kein synthetisches Fett.
   Gilt bewusst NUR im Lead dieser Seitenvorlage, nicht global fuer <strong>. */
.pg-text p.lead strong {
  font-weight: 900;
}
.pg-text h3 {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .01em;
  margin: 32px 0 10px;
  color: var(--rok-ink);
}

/* ----- TIMELINE ---------------------------------------------------------- */
.pg-timeline {
  margin-top: 32px;
  border-top: 1px solid var(--rok-gray-200);
}
.pg-tl-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rok-gray-200);
}
.pg-tl-year {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 900; font-style: italic;
  font-size: 28px;
  color: var(--rok-orange);
  letter-spacing: -.02em;
  line-height: 1;
}
.pg-tl-text strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--rok-ink);
}
.pg-tl-text p {
  margin: 0;
  font-size: 15px;
  color: var(--rok-text-muted-accessible);
  line-height: 1.6;
}

/* ----- VALUES (4 cards) ------------------------------------------------- */
.pg-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 24px;
  border-top: 1px solid var(--rok-gray-200);
  border-left: 1px solid var(--rok-gray-200);
}
.pg-value {
  border-right: 1px solid var(--rok-gray-200);
  border-bottom: 1px solid var(--rok-gray-200);
  padding: 28px 24px;
  background: #fff;
  transition: background .15s;
}
.pg-value:hover { background: var(--rok-gray-100) }
.pg-value .n {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 900; font-style: italic;
  font-size: 13px; letter-spacing: .04em;
  color: var(--rok-orange-text);
  margin-bottom: 14px;
}
.pg-value h4 {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--rok-ink);
}
.pg-value p {
  margin: 0;
  font-size: 14px;
  color: var(--rok-text-muted-accessible);
  line-height: 1.6;
}

@media (max-width: 760px) {
  .pg-values { grid-template-columns: 1fr }
}

/* ----- SPLIT (text + image) --------------------------------------------- */
.pg-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 8px;
}
.pg-split-img {
  aspect-ratio: 16 / 9;
  background: var(--rok-gray-100);
  overflow: hidden;
}
.pg-split-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pg-bullets {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.pg-bullets li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid var(--rok-gray-200);
  font-size: 15px;
  line-height: 1.5;
}
.pg-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 18px;
  width: 8px; height: 8px;
  background: var(--rok-orange);
}
.pg-bullets strong { color: var(--rok-ink); margin-right: 4px }

@media (max-width: 760px) {
  .pg-split { grid-template-columns: 1fr; gap: 24px }
}

/* ----- CAS CARD ---------------------------------------------------------- */
.pg-cas-card {
  background: var(--rok-ink);
  color: #fff;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  margin-top: 8px;
}
.pg-cas-text {
  padding: 40px 32px;
  display: flex; flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.pg-cas-text .v2-eyebrow {
  color: var(--rok-orange);
  margin-bottom: 14px;
}
.pg-cas-text h3 {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  margin: 0 0 14px;
  color: #fff;
  letter-spacing: -.01em;
}
.pg-cas-text h3 .ro-italic {
  font-weight: 900;
  font-style: italic;
}
.pg-cas-text h3 .ro {
  font-weight: 300;
  font-style: normal;
  color: var(--rok-orange);
}
.pg-cas-text p {
  margin: 0 0 22px;
  color: rgba(255,255,255,.75);
  font-size: 15px;
  line-height: 1.65;
}
.pg-cas-img {
  background: var(--rok-gray-100);
  overflow: hidden;
  min-height: 280px;
}
.pg-cas-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 760px) {
  .pg-cas-card { grid-template-columns: 1fr }
}

/* ----- TABLE (Zahlen & Fakten) ------------------------------------------ */
.pg-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 15px;
}
.pg-table th {
  text-align: left;
  font-weight: 700;
  font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rok-text-muted-accessible);
  padding: 14px 16px 14px 0;
  width: 220px;
  border-bottom: 1px solid var(--rok-gray-200);
  vertical-align: top;
}
.pg-table td {
  padding: 14px 0;
  border-bottom: 1px solid var(--rok-gray-200);
  color: var(--rok-ink);
  line-height: 1.5;
}

/* ----- PARTNER STRIP (CAS Allianz) -------------------------------------- */
/* Dezente grayscale-Leiste der CAS-Partnerlogos — bewusst NICHT die plakative
   `.rok-logos`-Karten-Wand (rok-content.css). Logos kommen aus pages.blocks
   (single source); hier nur ruhig, klein, zurückhaltend ins Editorial-Layout
   integriert. Farbe + volle Deckkraft erst beim Hover. */
.pg-partners-head { margin: 36px 0 16px; }
.pg-partners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 28px 32px;
  align-items: center;
  margin: 0;
  padding: 0;
}
.pg-partners a,
.pg-partners span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-partners img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 26px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .5;
  transition: opacity var(--rok-dur-base) var(--rok-ease),
    filter var(--rok-dur-base) var(--rok-ease);
}
.pg-partners a:hover img,
.pg-partners a:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
}

/* Neun Partner liefern ihr Logo als WEISSE Schrift auf transparentem Grund —
   fuer einen dunklen Hintergrund exportiert. Auf dieser hellen Wand sind sie
   unsichtbar: Gesipa, Joest und Metabo komplett, bei Lievers bleibt nur der
   Punkt, bei Steinel nur die Kreise, bei MontiPower nur "POWER" (gemessen
   29.07.2026: 56–100 % der sichtbaren Pixel nahezu weiss).

   Statt neun Bilddateien zu ersetzen — die es offiziell erst beim Partner zu
   holen gaebe — werden genau diese als Silhouette gezeichnet: brightness(0)
   faerbt jedes sichtbare Pixel schwarz, die Alphakante bleibt weich. Das
   faellt hier nicht auf, weil die Wand ohnehin ALLE Logos entfaerbt und
   halbtransparent zeigt; die Silhouette ist optisch dasselbe Grau.

   Auswahl bewusst ueber alt (= Markenname aus dem Content-Doc) und nicht ueber
   den Dateipfad: der Pfad aendert sich, sobald ein Logo neu hochgeladen wird,
   der Markenname nicht.

   NICHT gelistet ist Novus — dort steht weisse Schrift in einem farbigen
   Kasten, der sie traegt; brightness(0) wuerde Kasten UND Schrift schwarz
   faerben und die Wortmarke ausloeschen. Ebenso Baier: technisch einwandfrei,
   wirkt nur durch die grayscale/opacity-Behandlung blass.

   Aufloesbar: liefert ein Partner ein Logo mit dunkler Schrift nach, faellt
   sein Selektor hier ersatzlos weg. */
.pg-partners img[alt="Gesipa"],
.pg-partners img[alt="Jöst"],
.pg-partners img[alt="Metabo"],
.pg-partners img[alt="Lievers"],
.pg-partners img[alt="Cembre"],
.pg-partners img[alt="Eibenstock"],
.pg-partners img[alt="Steinel"],
.pg-partners img[alt="MontiPower"],
.pg-partners img[alt="Eisenblätter"] {
  filter: grayscale(1) brightness(0);
}
/* Beim Hover zeigt die Wand sonst die volle Farbe — genau das waere hier
   wieder unsichtbares Weiss. Diese neun bleiben Silhouette und gewinnen
   stattdessen an Deckung, damit die Rueckmeldung auf Hover erhalten bleibt. */
.pg-partners a:hover img[alt="Gesipa"],
.pg-partners a:hover img[alt="Jöst"],
.pg-partners a:hover img[alt="Metabo"],
.pg-partners a:hover img[alt="Lievers"],
.pg-partners a:hover img[alt="Cembre"],
.pg-partners a:hover img[alt="Eibenstock"],
.pg-partners a:hover img[alt="Steinel"],
.pg-partners a:hover img[alt="MontiPower"],
.pg-partners a:hover img[alt="Eisenblätter"],
.pg-partners a:focus-visible img[alt="Gesipa"],
.pg-partners a:focus-visible img[alt="Jöst"],
.pg-partners a:focus-visible img[alt="Metabo"],
.pg-partners a:focus-visible img[alt="Lievers"],
.pg-partners a:focus-visible img[alt="Cembre"],
.pg-partners a:focus-visible img[alt="Eibenstock"],
.pg-partners a:focus-visible img[alt="Steinel"],
.pg-partners a:focus-visible img[alt="MontiPower"],
.pg-partners a:focus-visible img[alt="Eisenblätter"] {
  filter: grayscale(1) brightness(0);
  opacity: 1;
}
@media (max-width: 520px) {
  .pg-partners { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 22px 24px; }
  .pg-partners img { height: 22px; }
}

/* ----- PRODUCT TILES ----------------------------------------------------
   ENTFERNT 29.07.2026. Hier stand ein seitenspezifisches Kachel-Markup
   (`.pg-products`/`.pg-product*`) mit 4:3-Bild und grauer Karte, das nur
   /unternehmen/cas/ genutzt hat. Der Owner hat es als "nicht unsere
   Bildkacheln" zurueckgewiesen - Produktkacheln sind projektweit
   `.cat-grid`/`.cat-card` (index_category.css) mit 16:9-Bild.
   Neue Produktkacheln bitte NICHT hier neu erfinden, sondern das
   Systemprimitiv verwenden. */

/* ----- CAS-KACHELN: 2 statt 3 Spalten (6 Produkte = 2x3) -----------------
   Seiten-scoped Modifier `cat-grid--cas`, zusaetzlich zu `.cat-grid` im
   Template gesetzt (index_page_cas.ts). `.cat-grid`/`.cat-card` selbst
   (index_category.css) bleiben UNANGETASTET — das Produktraster auf den
   Uebersichtsseiten bleibt 3-spaltig (Owner-Entscheidung).
   Nur der Desktop-Fall (> 1100px, dort liefert index_category.css 3
   Spalten) wird hier auf 2 uebersteuert. Die dortigen Media-Queries
   (<=1100px -> 2 Spalten, <=700px -> 1 Spalte) bleiben unveraendert, weil
   diese Regel nur oberhalb von 1100px greift und deshalb nicht mit ihnen
   kollidiert — kein !important noetig. Gap/Border/Card-Optik erbt
   unveraendert von `.cat-grid`. */
@media (min-width: 1101px) {
  .cat-grid.cat-grid--cas { grid-template-columns: repeat(2, 1fr); }
}

/* ----- CTA BAR ----------------------------------------------------------- */
.pg-sec-cta { padding-top: 8px }
.pg-cta-inner {
  background: var(--rok-gray-100);
  padding: 40px 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  border-left: 4px solid var(--rok-orange);
}
.pg-cta-inner h2 {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 36px);
  margin: 8px 0 6px;
  color: var(--rok-ink);
  letter-spacing: -.005em;
}
.pg-cta-inner p {
  margin: 0;
  color: var(--rok-text-muted-accessible);
  font-size: 15px;
  line-height: 1.55;
}
.pg-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.v2-btn.ghost {
  background: transparent;
  color: var(--rok-ink);
  border: 1px solid var(--rok-ink);
}
.v2-btn.ghost:hover {
  background: var(--rok-ink);
  color: #fff;
}

@media (max-width: 760px) {
  .pg-cta-inner { grid-template-columns: 1fr }
  .pg-cta-actions { justify-content: flex-start }
}

/* ----- HERO-BADGE (Regression seit 2026-05-20) ---------------------------
   Die .pg-hero-badge-Regel wurde am 20.05. mit-entfernt (s. Kommentar bei
   .pg-hero-img); der Container samt big/lab rendert in vier Templates
   (unternehmen/geschichte/cas/umwelt) aber weiter — seither unstyled Text
   unter dem Hero-Bild (V4-Inventur 27.08.). Wiederhergestellt nach der
   System-Vorlage .v2-made-badge (index.css): orange Badge auf dem Bild. */
.pg-hero-img{position:relative}
.pg-hero-badge{
  position:absolute;right:-24px;bottom:40px;background:var(--rok-orange);color:var(--rok-text-on-orange);padding:24px 28px;
  font-family:'Roboto',sans-serif;
}
.pg-hero-badge .big{font-weight:900;font-style:italic;font-size:28px;line-height:1.05;letter-spacing:-.02em}
.pg-hero-badge .lab{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-top:6px;opacity:.85}
@media (max-width:760px){
  .pg-hero-badge{right:0;bottom:24px;padding:16px 20px}
  .pg-hero-badge .big{font-size:22px}
}