/**
 * Redesign Product — Komponenten für pdn_product (Single + Archiv).
 *
 * Baut auf redesign-base.css (Tokens) und redesign-detail.css (Hero, Steps,
 * FAQ, CTA-Band, .prose, .serv-grid) auf. Enthält NUR die Bausteine, die es im
 * Bestand noch nicht gibt: Bento-Raster mit Gewichtung, Hero-Trust-Bar,
 * Preistabelle EUR/GBP, Plattformliste, Verfügbarkeitszeile.
 *
 * Werte aus derselben Token-/Kartenfamilie wie .pain-card/.usecase-card/
 * .cta-band (redesign-detail.css). Keine erfundenen Farben/Größen.
 */

/* ===================================================================
   VERFÜGBARKEITSZEILE (Hero) — kleine Mono-Zeile unter den CTAs.
   Angelehnt an .hero-meta (redesign-detail.css:99), auf dunklem Grund.
   =================================================================== */
/* margin-bottom:0 — kein gestapelter Standard-Absatzabstand zusaetzlich zum
   Hero-Padding (sonst 161px statt 150px Unterkante; Bestand .hero--detail = 150px). */
.product-availability{
  margin:20px 0 0;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  color:rgba(255,255,255,.78);
}

/* ===================================================================
   HERO-TRUST-BAR (4.3) — eigene Komponenten-Klasse. Statushinweis +
   Badges als Pill-Zeile. Badge-Look 1:1 aus .badge (BP Z.389,
   redesign-sections.css:97), hier eigenständig, da .badge im CPT-Single-
   Kontext nicht geladen wird.
   =================================================================== */
.product-trust-block{padding-top:0}
.product-trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  justify-content:center;
}
.product-trust__badge{
  font-size:13px;
  font-weight:500;
  padding:8px 15px;
  border-radius:999px;
  background:rgba(46,80,144,.08);
  color:var(--navy);
  border:1px solid var(--line);
}
.product-trust__status{
  font-size:13px;
  font-weight:600;
  padding:8px 16px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid transparent;
}
.product-trust__status::before{
  content:"";
  width:9px;height:9px;border-radius:50%;
  background:currentColor;
  flex:0 0 auto;
}
/* Verfügbar: Orange-Akzent (Marken-Akzentfarbe). In Vorbereitung: gedämpft. */
.product-trust__status--available{
  background:rgba(230,126,34,.12);
  color:var(--orange-btn);
  border-color:rgba(230,126,34,.28);
}
.product-trust__status--prep{
  background:rgba(90,102,121,.10);
  color:var(--text-mute);
  border-color:var(--line);
}

/* ===================================================================
   BENTO-RASTER MIT GEWICHTUNG (Auftrag Punkt 5)
   6-Spalten-Grid. Standardblock = 3 Spalten (2-up). Hervorgehobener Block
   = 3 Spalten × 2 Zeilen, dunkle Navy-Fläche, invertierte Schrift, oranger
   Marker. Ist keiner hervorgehoben, rendern alle als gleichwertige helle
   Karten (Basis: .pain-card, redesign-detail.css:184).
   =================================================================== */
.bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:22px;
  grid-auto-flow:row dense;
}
/* Variante c (Korrektur 2): jede Blockzahl gap-frei. Standardblock = 3 Spalten
   (2-up, paart sauber mit dem 3-spaltigen Kern). Der hervorgehobene Kern (3x2)
   steht immer an erster Position (PHP erzwingt das). Der letzte Block einer
   unvollstaendigen Zeile dehnt sich bis zum Zeilenende (Regel unten). */
.bento__block{
  grid-column:span 3;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:32px 28px;
  position:relative;
  overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.bento__block:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 56px -30px rgba(15,33,56,.3);
  border-color:transparent;
}
.bento__block h3{
  font-size:21px;
  color:var(--navy);
  margin-bottom:12px;
  font-weight:600;
  font-family:var(--font-display);
  line-height:1.05;
  letter-spacing:-.02em;
}
.bento__block p{
  font-size:14.5px;
  color:var(--text-mute);
}
/* Hervorgehoben: Kern-Block. Navy-Fläche, invertiert (Werte aus .cta-band,
   redesign-detail.css:347). */
.bento__block--featured{
  grid-column:span 3;
  grid-row:span 2;
  background:linear-gradient(135deg,var(--navy) 0%,var(--ink) 100%);
  border-color:transparent;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
/* Der letzte Block einer unvollstaendigen Zeile fuellt die ganze Zeile
   (Korrektur 2, 1.1). Ob der Endblock allein steht, haengt an der Paritaet:
   MIT Kern (spannt 2 Zeilen) steht er bei GERADER Blockzahl allein, OHNE Kern
   (gleichmaessiges 2-up) bei UNGERADER. Nur dann volle Breite -> keine verwaiste
   Karte, keine Luecke, bei jeder Blockzahl. */
.bento--feat  .bento__block:last-child:nth-child(even),
.bento--nofeat .bento__block:last-child:nth-child(odd){
  grid-column:1 / -1;
}
.bento__block--featured h3{color:#fff;font-size:24px}
.bento__block--featured p{color:rgba(255,255,255,.82);font-size:15.5px}
.bento__block--featured:hover{box-shadow:0 30px 70px -34px rgba(15,33,56,.55)}
/* Oranger Marker (weist den Block als Kern aus). */
.bento__marker{
  width:34px;height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--orange),var(--orange-soft));
  margin-bottom:18px;
  display:block;
}

/* Gleichwertige Bloecke nebeneinander (Bauauftrag 6, Dreiergruppe). Gleiche Karten
   wie Bento (.bento__block, dieselben Tokens/Radien/Rahmen/Abstaende), nur ohne Kern
   und ohne Fuellregel: 3 gleich breite Spalten. Die Fuellregel (.bento--feat/--nofeat)
   greift hier NICHT (anderer Container). Mobil kollabiert ueber die Basis-Bento-
   Media-Queries (880 -> 2 Spalten, 560 -> 1), passend zu den uebrigen Rastern. */
.bento--equal{grid-template-columns:repeat(3,1fr)}
.bento--equal .bento__block{grid-column:auto;grid-row:auto}

/* ===================================================================
   PREISTABELLE (freie Spalten, kein Button je Zeile). Die Tabelle selbst
   nutzt das Bestandsmuster .dtable / .dtable-scroll (redesign-detail.css:206-216),
   inkl. Mobilverhalten (overflow-x, min-width bei <=980px). Hier nur:
   Fehlbelegungs-Zeile (Auflage 1.1) + mehrzeilige Fussnote.
   =================================================================== */
/* Tabelle nutzt die volle Container-Breite (.wrap), kein 900px-Deckel (Bauauftrag 5,
   Punkt 4). Zahlenspalten bleiben schmal (nowrap) -> die inhaltsreichste Spalte
   „Enthaelt“ (letzte) bekommt den groessten Anteil. Mobil bleibt overflow-x/min-width
   (redesign-detail.css:206-216) unveraendert. */
.dtable-scroll{margin:0 auto}
#preise .dtable th:not(:last-child),
#preise .dtable td:not(:last-child){white-space:nowrap}
/* Fehlbelegte Zeile: erkennbar, volle Breite (colspan) -> nie verschoben. */
.pricing-row-error td{
  background:rgba(230,126,34,.10);
  color:var(--orange-btn);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
}
.price-note-line{max-width:900px;margin:26px auto 0;text-align:center}
.price-note-line p{color:var(--text-mute);font-size:14px;margin:0 0 8px}
.price-note-line p:last-child{margin-bottom:0}

/* Abschlusssatz einer Textsektion (nach Text/Aufzaehlung), linksbuendig im .prose. */
.product-closing{font-size:17px;color:var(--text);margin:0 0 20px}

/* ===================================================================
   SEKTIONS-HINTERGRUND (Bauauftrag 4): hell = weiss (Standard .block),
   abgesetzt = Papierton-Band mit Rahmen (Werte 1:1 aus single-pdn_service.php:375,
   --paper-warm + --line). Zwei „abgesetzte“ Sektionen sollten laut Belegungsregel
   nicht direkt aufeinander folgen.
   =================================================================== */
.product-section--hell{background:#fff}
.product-section--abgesetzt{
  background:var(--paper-warm);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ===================================================================
   TEXTSEKTION — VARIANTE ZWEISPALTIG. Text links, Aufzaehlung rechts als
   .check-panel. Grundraster .serv-grid (redesign-detail.css:405, kollabiert
   <=980px auf 1 Spalte). Ueberschrift/Text linksbuendig.
   =================================================================== */
.product-2col{align-items:start}
.product-2col__text h2{
  font-size:clamp(26px,3vw,34px);
  color:var(--navy);
  font-weight:700;
  font-family:var(--font-display);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0 0 16px;
}
.product-2col__text .prose{max-width:none;margin:0}
.product-2col__text .product-closing{margin-top:16px}

/* ===================================================================
   TEXTSEKTION — VARIANTE KARTEN. Ueberschrift/Text zentriert (sec-head/.prose),
   Aufzaehlung als helle Karten auf der Kartenfamilie (.cards, Tokens wie
   .pain-card). Bricht ueber .cards responsiv um.
   =================================================================== */
.product-bullet-cards{margin-top:8px}
.product-bullet-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 26px;
}
.product-bullet-card p{font-size:15px;color:var(--text);margin:0}
/* Schlusszeile fuellen (Bauauftrag 5, Punkt 3): im 3-spaltigen Raster dehnt sich
   die letzte Karte auf den Zeilenrest -> keine halb leere Schlusszeile bei jeder
   Kartenzahl. steht sie allein (3n+1) -> volle Breite; ist eine Karte davor
   (3n+2) -> zwei Spalten. Gleiche Idee wie die Blocksektion. */
.product-bullet-cards .product-bullet-card:last-child:nth-child(3n+1){grid-column:1 / -1}
.product-bullet-cards .product-bullet-card:last-child:nth-child(3n+2){grid-column:span 2}
@media(max-width:980px){
  /* .cards ist hier einspaltig -> Sonderspannen zuruecksetzen. Selektor-
     Spezifitaet muss den nth-child-Regeln oben entsprechen, sonst gewinnen sie. */
  .product-bullet-cards .product-bullet-card:last-child:nth-child(3n+1),
  .product-bullet-cards .product-bullet-card:last-child:nth-child(3n+2){grid-column:auto}
}

/* ===================================================================
   PLATTFORMLISTE — Name + Statustext, optional verlinkt.
   Kartenlook aus .pain-card/.serv-card-Familie.
   =================================================================== */
.platform-list{
  max-width:820px;
  margin:0 auto;
  list-style:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.platform-list__item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
/* Beide Zeilentypen (verlinkt/unverlinkt) teilen dieselbe Flex-Zeile: Name links,
   Status rechts auf Namenshoehe — unabhaengig davon, ob ein Ziel vorhanden ist. */
.platform-list__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 24px;
}
.platform-list__row--link{
  text-decoration:none;
  transition:background .25s;
}
.platform-list__row--link:hover{background:rgba(46,80,144,.03)}
.platform-list__row--link:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}
.platform-list__name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:17px;
  color:var(--navy);
}
.platform-list__status{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--text-mute);
  white-space:nowrap;
}

/* ===================================================================
   RESPONSIVE — Bento kollabiert (Auftrag Punkt 5).
   Unter 880px zweispaltig, unter 560px einspaltig. Der hervorgehobene
   Block verliert dabei seine Sonderstellung und rendert wie die übrigen.
   =================================================================== */
@media (max-width:880px){
  .bento{grid-template-columns:repeat(2,1fr)}
  /* Alles auf 1 Spalte (Kern verliert Sonderstellung -> gleichmaessiges 2-up).
     Damit gilt hier durchgehend die 2-up-Paritaet: der Endblock steht bei
     UNGERADER Blockzahl allein und fuellt dann die Zeile. Desktop-Paritaet
     (Kern-Fall, gerade) zuruecksetzen. */
  .bento__block,
  .bento__block--featured{grid-column:span 1;grid-row:auto}
  .bento--feat .bento__block:last-child:nth-child(even){grid-column:span 1}
  .bento__block:last-child:nth-child(odd){grid-column:1 / -1}
  .bento__block:last-child{grid-row:auto}
  /* Featured verliert Sonderstellung: helle Karte wie die übrigen. */
  .bento__block--featured{
    background:#fff;
    border:1px solid var(--line);
    display:block;
  }
  .bento__block--featured h3{color:var(--navy);font-size:21px}
  .bento__block--featured p{color:var(--text-mute);font-size:14.5px}
  .bento__marker{display:none}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
}

/* ===================================================================
   REDUCED MOTION — Bewegung respektieren.
   =================================================================== */
@media (prefers-reduced-motion:reduce){
  .bento__block,
  .platform-list__link{transition:none}
  .bento__block:hover{transform:none}
}