/* produkt-detail.css — Stile der WHI-Produktdetailseite.
   Angelegt von zahlwahl_whi_kombi.mjs; der Komponententeil ist 1:1 aus der WIP-Fassung
   (media/templates/site/wip/css/elearning-detail.css) übernommen, damit beide Portale
   gleich aussehen. Nicht von Hand ändern. */

/* ══ ZAHLUNGSAUSWAHL ══ */
.zahlwahl{
  --marke:        var(--tpl-color-main-a, #bb3e25);
  --marke-rand:   var(--tpl-color-main-d, #f7e4e0);
  --marke-flaeche:var(--tpl-color-main-e, #fdf8f6);
  --klarna-pink:  #ffb3c7;            /* offizielles Klarna-Pink */
  --klarna-hell:  #fff4f7;
  --klarna-text:  #17120f;            /* Klarna schreibt dunkel auf Pink, nicht weiss */
  --rand:         #e5e2de;
  --gedaempft:    #5c5854;

  max-width:980px; margin:32px auto; container-type:inline-size;
  /* Innenabstand: ohne ihn klebt die Überschrift oben am Rand und die Karten laufen
     bis an die Kante des umgebenden Bereichs.
     ⚠️ NICHT über @container regeln — eine Container-Abfrage gestaltet nur Nachfahren,
     nie den Container selbst. Prozentwerte beziehen sich auf die Elternbreite und
     schrumpfen in schmalen Spalten von allein. */
  padding:clamp(20px,3%,30px) clamp(14px,3%,28px) clamp(18px,3%,26px); box-sizing:border-box;
}
/* ── Panzerung ───────────────────────────────────────────────────────────────
   Die Komponente steht in Artikelspalten, die eigene Listen- und Ausrichtungs-
   Regeln mitbringen. Auf den Portalen setzt eine globale `ul > li::before`-Regel
   auf JEDE Liste einen farbigen Punkt — der überschreibt sonst die Haken. Und
   eine `.text-center`-Klasse am Elternelement zentriert die Aufzählungen.
   Beides wird hier gezielt zurückgenommen, nicht pauschal. */
.zahlwahl{text-align:left}
.zahlwahl ul{list-style:none !important; margin:0; padding:0}
.zahlwahl li{list-style:none !important; background:none !important}
.zahlwahl li::marker{content:none}
.zahlwahl .zahlart-reihe li::before{content:none !important; display:none !important}

.zahlwahl__kopf{text-align:center; margin-bottom:28px}
.zahlwahl__kopf h2{
  font-family:'Noto Serif',Georgia,serif; font-weight:600;
  font-size:clamp(21px,2.4vw,27px); line-height:1.25; margin:0 0 8px; color:#1f1f1f;
}
.zahlwahl__kopf p{margin:0; font-size:16px; color:var(--gedaempft)}

/* Zwei gleich hohe Karten. Beide Karten sind SUBGRID des Kartenrasters — dadurch teilen
   sie sich dieselben Zeilenhöhen und die Trennlinien liegen exakt auf einer Linie, auch
   wenn links ein Preis und rechts Badge + Laufzeit steht. Ohne Subgrid lagen sie 35 px
   auseinander; die Vorgabe verlangt „exakt auf gleicher Höhe". */
.zahlwahl__karten{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
  grid-template-rows:auto auto auto 1fr auto auto; /* Label · Anker · Trenner · Liste · Zahlarten · Knopf */
  position:relative; align-items:stretch;
}
.zahlwahl__oder{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; z-index:2;
  display:grid; place-items:center;
  background:var(--marke); border:2px solid #fff; color:#fff;
  font-size:13.5px; font-weight:600; letter-spacing:.03em;
  box-shadow:0 2px 6px rgba(0,0,0,.14);
}

.karte{
  display:grid; grid-template-rows:subgrid; grid-row:span 6; row-gap:0;
  border:1px solid var(--rand); border-radius:16px; padding:28px 26px 26px;
  background:#fff;
}
/* Rückfall für Browser ohne Subgrid: dann greift die alte Flex-Logik, die Trennlinien
   können dort minimal versetzt sein — funktional bleibt alles gleich. */
@supports not (grid-template-rows: subgrid){
  .karte{display:flex; flex-direction:column}
  .karte__liste{flex:1 1 auto}
}
.karte--einmal{background:var(--marke-flaeche); border-color:var(--marke-rand)}
.karte--klarna{background:var(--klarna-hell); border-color:var(--klarna-pink)}

.karte__label{
  font-size:13px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--gedaempft); margin:0 0 14px;
}
.karte__preis{
  font-family:'Noto Serif',Georgia,serif;
  font-size:clamp(34px,4.6vw,44px); line-height:1; font-weight:600; color:var(--marke);
  display:block; margin:0;
}
.karte__preis-zusatz{display:block; margin-top:7px; font-size:15px; color:var(--gedaempft)}

/* Ankerblock = die eine Zeile, die links den Preis und rechts Badge + Laufzeit trägt.
   Beide Karten haben dadurch exakt fünf Kinder — Voraussetzung dafür, dass Subgrid die
   Zeilen deckungsgleich hält. */
.karte__anker{align-self:start}

/* Rechte Karte: „bis zu 36 Monate" trägt optisch dieselbe Rolle wie links der Preis. */
.karte__laufzeit{
  font-family:'Noto Serif',Georgia,serif;
  /* 3cqw statt vw: bezogen auf die Breite der Komponente, nicht des Fensters.
     So bleibt „3, 6, 12, 24 oder 36 Monate" auch in einer schmalen Artikelspalte
     in EINER Zeile — zweizeilig wirkte die Karte unruhig neben dem Preis links. */
  font-size:clamp(18px,3cqw,30px); line-height:1.15; font-weight:600;
  color:var(--klarna-text); margin:0;
}
.karte__laufzeit-zusatz{display:block; margin-top:7px; font-size:15px; color:var(--gedaempft)}

.karte__trenner{border:0; border-top:1px solid var(--rand); margin:20px 0}
.karte--klarna .karte__trenner{border-top-color:#f3cdd8}

.karte__liste{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.karte__liste li{position:relative; padding-left:26px; font-size:15.5px; line-height:1.5}
.karte__liste li::before{
  content:"" !important; position:absolute; left:0; top:.44em;
  width:13px !important; height:8px !important;
  border-left:2px solid; border-bottom:2px solid; border-top:0; border-right:0;
  background:none !important; transform:rotate(-45deg); border-radius:1px !important;
}
.karte--einmal .karte__liste li::before{color:var(--marke)}
.karte--klarna .karte__liste li::before{color:#c2185b}

.karte__knopf{
  align-self:end; margin-top:24px; /* die 1fr-Listenzeile schiebt den Knopf ans Kartenende */
  display:block; width:100%; box-sizing:border-box;
  padding:15px 18px; border-radius:10px; border:1px solid transparent;
  font:inherit; font-size:16px; font-weight:600; text-align:center; text-decoration:none;
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.karte--einmal .karte__knopf{background:var(--marke); color:#fff}
.karte--einmal .karte__knopf:hover{background:color-mix(in srgb, var(--marke) 88%, #000); box-shadow:0 3px 10px rgba(0,0,0,.14)}
.karte--klarna .karte__knopf{background:var(--klarna-pink); color:var(--klarna-text)}
.karte--klarna .karte__knopf:hover{background:#ff9dba; box-shadow:0 3px 10px rgba(0,0,0,.14)}
.karte__knopf:active{transform:translateY(1px)}
.karte__knopf:focus-visible{outline:3px solid #1f1f1f; outline-offset:3px}

/* ── Zahlarten-Leiste ──────────────────────────────────────────────────────────
   Links vier Wege, rechts einer. Die Leiste sitzt in beiden Karten auf derselben
   Rasterzeile, damit die Knöpfe darunter bündig bleiben.
   Die Marken sind die OFFIZIELLEN Assets, direkt von den Anbieter-CDNs geholt und
   als data-URI eingebettet: Klarna-Badge von x.klarnacdn.net, PayPal-Wortmarke von
   paypalobjects.com. Unverändert — nicht nachgebaut, nicht eingefärbt, nicht verzerrt.
   Für SEPA-Überweisung und Vorauskasse gibt es keine frei verwendbare Marke, deshalb
   dort Text in derselben Kachelform. */
.karte__zahlarten{margin-top:22px}
.karte__zahlarten-titel{
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gedaempft); margin:0 0 9px;
}
.zahlart-reihe{display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin:0; padding:0; list-style:none}
.zahlart{
  /* flex:1 1 auto — die Kacheln wachsen in den Restplatz hinein, damit die untere
     Reihe rechts bündig mit der oberen abschliesst statt sieben Pixel früher zu enden. */
  display:inline-flex; flex:1 1 auto; align-items:center; justify-content:center; gap:5px;
  height:28px; padding:0 6px; border-radius:6px;
  background:#fff; border:1px solid #ddd8d2;
  font-size:11px; font-weight:600; letter-spacing:.01em; color:#3a3733; white-space:nowrap;
}
/* Logos werden nur in der Höhe gesetzt, die Breite folgt — kein Verzerren. */
.zahlart img{display:block; height:15px; width:auto}
/* Eigene Sinnbilder für die zwei Zahlwege ohne Marke. Bewusst KEIN Nachbau des
   SEPA-Logos der EPC — das ist geschützt. Erben die Textfarbe über currentColor. */
.zahlart svg{display:block; height:13px; width:auto; flex:none}
.zahlart--gross img{height:27px}
.zahlart--gross img[alt="Klarna"]{height:32px}
/* Rechts die zwei Anbieter, die Ratenzahlung koennen — deutlich groesser als die
   vier kleinen Marken links, sie teilen sich die Zeile zu gleichen Teilen.
   Bewusst weisse Platte, NICHT in Klarna-Pink: sonst steht ein pinkes Rechteck
   direkt ueber dem pinken Knopf und die Karte sieht aus, als haette sie zwei
   Knoepfe. Der Groessenunterschied allein (52 px gegen 30 px) traegt die Aussage. */
/* Erzwingt den Umbruch nach den beiden Logo-Kacheln, damit die Reihe als 2+2 steht
   statt als zufälliges 3+1. Unsichtbar, nimmt keine Höhe ein. */
.zahlart-umbruch{flex-basis:100%; height:0; margin:0; padding:0; border:0; list-style:none}
.zahlart--gross{
  height:52px; flex:1 1 0; min-width:0; padding:0 12px;
  background:#fff; border-color:#ddd8d2; color:var(--klarna-text);
  font-size:20px; font-weight:700; letter-spacing:.02em;
}

/* Eine zusammenhängende Zeile, darf umbrechen. Klein, aber lesbar (13,5 px). */
/* Bündig mit den Knöpfen darüber: die Karten haben 26 px Innenabstand, die Knöpfe
   liegen also 26 px von der Kartenkante entfernt. Dieselbe Zahl hier. */
.zahlwahl__fussnote{
  margin:22px 27px 0;   /* 1 px Kartenrand + 26 px Kartenpolster = Aussenkante der Knöpfe */ font-size:13.5px; line-height:1.6; font-style:italic; color:var(--gedaempft);
}

/* Container-Abfrage statt Media-Query: Die Komponente reagiert auf ihre EIGENE
   Breite. So stapelt sie auch dann korrekt, wenn sie in einer schmalen Spalte
   steht — eine Bildschirm-Media-Query würde das übersehen. */
@container (max-width: 620px){
  .zahlwahl__karten{grid-template-columns:1fr; grid-template-rows:none; gap:18px}
  .karte{grid-row:auto; grid-template-rows:none; display:flex; flex-direction:column; padding:24px 20px 22px}
  .karte__zahlarten{margin-top:18px}
  .zahlwahl__fussnote{margin:20px 21px 0}   /* mobil: 1 px Rand + 20 px Polster */
  .karte__liste{flex:1 1 auto}
  .zahlwahl__oder{position:static; transform:none; justify-self:center}
}
@supports not (container-type: inline-size){
  @media (max-width: 680px){
    .zahlwahl__karten{grid-template-columns:1fr; grid-template-rows:none; gap:18px}
    .karte{grid-row:auto; grid-template-rows:none; display:flex; flex-direction:column}
    .zahlwahl__oder{position:static; transform:none; justify-self:center}
  }
}
@media (prefers-reduced-motion: reduce){
  .karte__knopf{transition:none}
  .karte__knopf:active{transform:none}
}

/* WHI-eigener Abstand: darunter folgt direkt der bestehende CTA-Block mit dem
   Warenkorb-Knopf, kein Modul mit eigenem Polster wie auf WIP. */
.zahlwahl{margin:26px 0 18px}
@media (max-width:767.98px){ .zahlwahl{margin:18px 0 14px} }
/* ══ ENDE ZAHLUNGSAUSWAHL ══ */