/* elearning-detail.css — Stile der WIP-Kursdetailseite.
   Angelegt von raten_umbau_wip.mjs. */

/* ══ ZAHLUNGSAUSWAHL ══ */
/* Nicht von Hand ändern — Quelle ist klarna-cta-komponente.html,
   geschrieben von raten_umbau_wip.mjs. */
/* „einmalig" steht in derselben Zeile wie der Betrag (Uli 22.08.): es ist eine Eigenschaft
   des Preises, keine eigene Aussage. Deshalb kleiner und leichter als der Betrag, damit die
   Zahl das dominante Element bleibt. nowrap verhindert, dass es auf dem Handy vom € abreisst.
   .price__value ist in der main.css display:block — hier auf inline gedreht, gleiche
   Selektor-Tiefe, gewinnt ueber die spaetere Ladereihenfolge ohne !important. */
#page-product .header .price .price__value{display:inline}
.price__einmalig{display:inline;font-size:15px;font-weight:500;color:#5b6b68;margin-left:8px;white-space:nowrap}
.price__divider{display:block;margin:14px 0 6px;font-size:13px;color:#5b6b68}
.price__rate--anbieter{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.price__rate--anbieter img{display:block;height:27px;width:auto}
.price__rate--anbieter img.is-klarna{height:32px}
.price__installment{display:block;margin-top:10px;font-size:13px;color:#2f6f63}
.price__installment .fas{margin-right:5px}

.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}
}

/* Weissraum ueber und unter der Komponente verringert (Uli 22.08.).
   Die Vorlage bringt margin 32px/86px mit; die 86 px seitlich bleiben (sie geben der
   Komponente ihre Breite), nur oben und unten wird es enger.
   Gilt nur fuer WIP — SWAV bleibt unveraendert. */
/* margin-bottom bewusst 0: darunter folgt der Kontakt-Kasten mit eigenen 50 px Polster.
   Ein zusaetzlicher Rand hier stapelt sich darauf und die Luecke wird ungleich (Uli 22.08.). */
.zahlwahl{margin-top:8px;margin-bottom:0;padding-top:18px}

/* Der Kontakt-Kasten darunter (Modul mod-wip-cta) riss oben 75 px und unten 50 px auf —
   die groessten Luecken der Seite (Uli-Befund 22.08.). Auf 50/50 vereinheitlicht.
   ⚠️ Das Polster kommt aus den Bootstrap-Klassen pt-wip-3 / pb-wip-2 am Modul selbst,
   beide mit !important — ohne !important gewinnt die Regel hier nicht.
   ⚠️ Wirkt NUR auf den Kursdetailseiten: elearning-detail.css wird nur dort geladen.
   Das Modul steht in der Datenbank unveraendert und sieht ueberall sonst aus wie bisher.
   Unten steht das Polster auf 0, weil direkt darunter das Newsletter-Modul mit pt-wip-2
   nochmals 50 px mitbringt — zusammen waeren es 100 px unten gegen 50 px oben.
   Unter 768px bleibt der kleinere Handy-Massstab: oben 35 px, unten traegt pt-wip-2
   dort selbst 35 px. */
.module.mod-wip-cta{padding-top:50px!important;padding-bottom:0!important}
/* Unter dem Kasten liegen bis zur roten Welle zwei Polster hintereinander: eines aus dem
   Kontakt-Modul (oben auf 0 gesetzt) und pt-wip-2 des Newsletter-Moduls. Zusammen waren das
   100 px gegen 50 px oben. Das Newsletter-Polster faellt hier weg, uebrig bleiben 50 px. */
.module.mod-redim-form{padding-top:0!important}
@media (max-width:767.98px){
  .module.mod-wip-cta{padding-top:35px!important;padding-bottom:0!important}
}
/* ══ ENDE ZAHLUNGSAUSWAHL ══ */