/* ============================================================================
   PEPTIDKOMPASS · assets/css/tiles.css
   ============================================================================
   Ergänzung zu system.css für den Bildwelt-v2-Umbau der Startseite (Auftrag
   "Apple-Rhythmus hell/dunkel"). NICHT system.css anfassen (parallele Runde
   editiert dort gerade system.css + wirkstoffe/*) : alle neuen Regeln hier,
   NACH system.css eingebunden, nutzt ausschließlich vorhandene Tokens/
   Klassen aus system.css (keine neuen Custom Properties).

   Enthält:
   1. Hero-Back-Sprites auf Deckkraft .35 (ruhigerer Hero, Vic-Vorgabe)
   2. .split-tile : 60/40-Bild/Text-Verhältnis für die beiden neuen dunklen
      Voll-Tiles (Bild ist der Star), nur ≥901px – darunter bleibt die
      bestehende Mobile-Stapel-Logik aus system.css (.split{1fr} ≤900px)
      unangetastet.
   ============================================================================ */

/* 1. Hero-3D Back-Sprites ruhiger (system.css §"HERO-3D" setzt opacity:.5
      auf [data-depth="back"]; tiles.css lädt danach, gleiche Spezifität
      gewinnt durch Ladereihenfolge). */
.hero-3d-sprite[data-depth="back"]{ opacity:.35; }

/* 2. .split-tile: Modifier auf .split für die neuen Voll-Tiles ("Reinheit,
      belegt" / "Jede Charge nachprüfbar") – Bild 60%, Text 40%, Bild bleibt
      der Star der Tile. Kombiniert mit .split-reverse für Bild links/rechts
      im Wechsel (Apple-Rhythmus). Mobil (≤900px) übernimmt system.css'
      .split{grid-template-columns:1fr} unverändert (Text immer vor Bild). */
@media (min-width:901px){
  .split-tile{ grid-template-columns:3fr 2fr; }
}

/* Vergleichstabelle: Score unter dem Namen, Score-Spalte ausgeblendet, Rabatt-Spalte breit (Vic 14.09.) */
.table .col-score-hidden{ display:none; }
.table .table-logo-cell{ align-items:flex-start; }
.table .table-name-block{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.table .table-name-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.table .table-score-row .score-bar-track{ width:110px; }
.table .col-rabatt-hidden{ display:none; }
/* Aktionszelle: Button oben, Partner-Code direkt darunter (Vic 14.09.) */
.table .table-action-stack{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:220px; }
.table .table-action-stack .btn{ white-space:nowrap; }
.table .code-box-compact{ margin:0; padding:6px 8px; gap:6px; width:100%; box-sizing:border-box; }
.table .code-box-compact code{ font-size:13px; }
.table .code-box-compact .btn{ padding:4px 10px; font-size:12px; min-height:26px; }
.table .code-box-hint{ font-size:11px; }

/* Podium mobil: Grid-Items dürfen schrumpfen (min-width:auto sprengte bei
   375px die Spalte um 23px, Ursache: Code-Box nowrap). Code-Box bricht um,
   Hinweis rutscht auf eine eigene Zeile. */
.podium-card{ min-width:0; }
.podium-code.code-box{ flex-wrap:wrap; }
.podium-code .code-box-hint{ flex-basis:100%; }

/* Bildband unter dem Seitenkopf (Wirkstoffe-Übersicht): ruhiges 21:9-Bild,
   Karten-Radius, kein Schatten (DESIGN.md), leichter Ken-Burns über die
   bestehende .reveal-Logik ist nicht nötig, Bild bleibt statisch. */
.visual-band{ margin:0; border-radius:var(--radius-card); overflow:hidden; aspect-ratio:21/9; background:var(--surface-2); }
.visual-band img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px){ .visual-band{ aspect-ratio:16/10; } }

/* Deals: Logo über dem Namen, gleiche Höhe wie auf den Anbieter-Karten */
.deal-card .vlogo{ margin-bottom:var(--sp-2); }
.deal-card .brand-logo-fallback{ display:block; margin-bottom:var(--sp-2); }