/* ===========================================================================
   kr3m — Unterseite "Our Offer" (frueher "Partnership Models")
   Nutzt die Design-System-Tokens aus tokens/. Keine eigenen Farbwerte.
   =========================================================================== */

/* Abschnitts-Grundgerüst, .kr-inner, .kr-eyebrow, .kr-lead, Schaltflächen und
   .screen-reader-text stehen in layout.css — auf jeder Seite geladen. */

/* .kr-pagehead steht in layout.css - von mehreren Seiten genutzt. */

/* --- Hauptangebot: Playground System, bewusst ohne Kasten ------------------
   Das Playground System ist das Standardangebot und laeuft deshalb offen im
   Seitenfluss. Der Kasten bleibt der All-in-Partnership vorbehalten — dort
   markiert er die Alternative als abgegrenztes, eigenes Modell. */

.kr-offer-primary {
  margin-block-start: clamp(var(--space-6), 3vw, var(--space-10));
}

.kr-offer-primary__head {
  max-width: 62ch;
}

.kr-offer-primary__head h2 {
  font-size: clamp(1.75rem, 3.2vw, var(--fs-h2));
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  margin-block-end: var(--space-4);
}

/* Tag-Qualifier noetig: .wp-site-blocks p schlaegt einen reinen Klassenselektor. */
p.kr-lead {
  margin-block-end: 0;
}

.kr-offer-primary__columns {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  margin-block-start: clamp(var(--space-8), 4vw, var(--space-12));
}

@media (min-width: 60rem) {
  .kr-offer-primary__columns {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(var(--space-10), 5vw, var(--space-16));
  }
}

/* Trennlinie statt Kasten — haelt die beiden Spalten optisch auseinander,
   ohne eine zweite Rahmenebene einzufuehren. */
@media (min-width: 60rem) {
  .kr-offer-primary__columns > :first-child {
    padding-inline-end: clamp(var(--space-6), 3vw, var(--space-10));
    border-inline-end: 1px solid var(--border-subtle);
  }
}

.kr-offer-primary__terms {
  margin-block-start: clamp(var(--space-8), 4vw, var(--space-12));
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border-subtle);
  max-width: 88ch;
}

.kr-offer-primary__terms h3 {
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-block-end: var(--space-2);
}

.kr-offer-primary__terms p {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* --- Die zwei Modelle ----------------------------------------------------- */

.kr-models {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-block-start: clamp(var(--space-8), 4vw, var(--space-12));
}

@media (min-width: 60rem) {
  .kr-models { grid-template-columns: repeat(2, 1fr); }
}

/* Jedes Modell steht jetzt einzeln in seinem eigenen Abschnitt statt
   nebeneinander — erzwingt eine Spalte, auch ab 60rem. */
.kr-models--single {
  grid-template-columns: 1fr;
}

.kr-model {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Beide Modelle bewusst gleichgewichtig. Eine Hervorhebung einer Karte plus
   eine hervorgehobene Enterprise-Spalte hatte suggeriert, Enterprise und
   All-in-Partnership seien dasselbe — sie sind es nicht. */

.kr-model__head {
  padding: var(--space-8) var(--space-8) var(--space-6);
  border-block-end: 1px solid var(--border-subtle);
}

.kr-model__kicker {
  display: inline-block;
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--kr-red);
  margin-block-end: var(--space-3);
}

.kr-model__head h2 {
  font-size: clamp(1.375rem, 2.2vw, var(--fs-h3));
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  margin-block-end: var(--space-3);
}

.kr-model__claim {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

.kr-model__body {
  padding: var(--space-6) var(--space-8);
  display: grid;
  gap: var(--space-6);
  flex: 1;
}

.kr-model__group h3 {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-block-end: var(--space-3);
}

.kr-model__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.kr-model__group li {
  position: relative;
  padding-inline-start: var(--space-6);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* Haken als CSS statt als Zeichen im Text — bleibt fuer Screenreader stumm. */
.kr-model__group li::before {
  content: "";
  position: absolute;
  inset-block-start: 7px;
  inset-inline-start: 0;
  width: 11px;
  height: 6px;
  border-inline-start: 2px solid var(--kr-red);
  border-block-end: 2px solid var(--kr-red);
  rotate: -45deg;
}

.kr-model__terms {
  margin-block-start: auto;
  padding: var(--space-6) var(--space-8);
  border-block-start: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
}

.kr-model__terms h3 {
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-block-end: var(--space-2);
}

.kr-model__terms p {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* --- Vergleichstabellen ---------------------------------------------------

   Zwei Markup-Varianten, absichtlich beide bedient:

   a) core/table -- <figure class="wp-block-table kr-tablewrap"><table>
      So liegen die Tabellen auf den Angebotsseiten. Nur als echter
      Tabellen-Block ist ihr Text im Editor bearbeitbar; die <table> kann
      dort keine eigene Klasse tragen, die Klasse landet auf dem <figure>.
      Deshalb greifen die Regeln unten zusaetzlich per `.kr-tablewrap > table`.

   b) .kr-table -- handgeschriebene Tabelle in einem HTML-Block.
      Nutzt noch die Seite "Embed Games", darf nicht wegfallen.

   Der Core-Table-Block bringt eigene Vorgaben mit (volles Zellraster,
   padding .5em, 3px unter thead, margin unten). Die werden hier gezielt
   zurueckgedreht -- die Selektoren sind darum eine Spezifitaetsstufe
   hoeher als die des Core (`.wp-block-table td`), damit die Ladereihenfolge
   der Stylesheets keine Rolle spielt. */

.kr-tablewrap {
  margin-block-start: clamp(var(--space-8), 4vw, var(--space-10));
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  /* Andeutung, dass sich die Tabelle schieben laesst */
  scrollbar-width: thin;
}

/* Core/Theme setzen `margin: 0 0 1em` auf .wp-block-table -- gleiche
   Spezifitaet wie .kr-tablewrap, wuerde also den Abstand oben ueberschreiben.
   Zwei Klassen setzen das sicher zurueck. */
.kr-tablewrap.wp-block-table {
  margin-block-start: clamp(var(--space-8), 4vw, var(--space-10));
  margin-block-end: 0;
  margin-inline: 0;
}

.kr-table,
.kr-tablewrap > table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}

.kr-table th,
.kr-table td,
.kr-tablewrap > table th,
.kr-tablewrap > table td {
  padding: var(--space-4) var(--space-4);
  text-align: center;
  vertical-align: middle;
  /* Core zeichnet ein komplettes Raster, hier sollen nur Trennlinien stehen. */
  border: 0;
  border-block-end: 1px solid var(--border-subtle);
}

.kr-table tbody tr:last-child th,
.kr-table tbody tr:last-child td,
.kr-tablewrap > table tbody tr:last-child th,
.kr-tablewrap > table tbody tr:last-child td {
  border-block-end: 0;
}

/* Core: `border-bottom: 3px solid` unter dem Tabellenkopf. */
.kr-tablewrap > table thead {
  border-block-end: 0;
}

/* Erste Spalte: Zeilenbeschriftung, bleibt beim Schieben stehen.

   Der z-index ist hier zwingend, nicht kosmetisch: .kr-yes und .kr-no sind
   per `rotate` gebaut, und eine Rotation erzeugt einen eigenen Stapelkontext.
   Ohne z-index steht die fixierte Spalte auf `auto` und wird von den spaeter
   im Markup folgenden Zellen uebermalt — die Haken schoben sich beim
   Querscrollen sichtbar ueber die Zeilenbeschriftungen. */
.kr-table th[scope="row"],
.kr-tablewrap > table th[scope="row"] {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  background: var(--surface-card);
  min-width: 13rem;
  border-inline-end: 1px solid var(--border-subtle);
}

.kr-table thead th,
.kr-tablewrap > table thead th {
  position: sticky;
  inset-block-start: 0;
  /* ueber den Datenzellen, damit auch die Kopfzeile nicht uebermalt wird */
  z-index: 2;
  background: var(--surface-subtle);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-body);
  white-space: nowrap;
}

/* Die Ecke oben links kreuzt beide fixierten Achsen und liegt zuoberst. */
.kr-table thead th:first-child,
.kr-tablewrap > table thead th:first-child {
  inset-inline-start: 0;
  z-index: 3;
  text-align: left;
}

.kr-table tbody tr:hover td,
.kr-table tbody tr:hover th[scope="row"],
.kr-tablewrap > table tbody tr:hover td,
.kr-tablewrap > table tbody tr:hover th[scope="row"] {
  background: var(--surface-subtle);
}

/* Ja / Nein / Wert */
.kr-yes,
.kr-no {
  display: inline-block;
  line-height: 1;
}

.kr-yes {
  width: 13px;
  height: 7px;
  border-inline-start: 2.5px solid var(--kr-red);
  border-block-end: 2.5px solid var(--kr-red);
  rotate: -45deg;
  margin-block-end: 3px;
}

.kr-no {
  width: 12px;
  height: 2px;
  background: var(--border-strong);
}

.kr-table td small,
.kr-tablewrap > table td small {
  display: block;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}

/* Die Tabellenbeschriftung war ein <caption class="screen-reader-text"> und lag
   deshalb visuell versteckt. Sie ist jetzt sichtbar: in dem Feld wird auch
   Inhalt gepflegt, der gelesen werden soll - im Block-Editor sieht es wie
   normaler Text aus, und genau so wurde es benutzt.
   sticky + inset-inline-start, weil .kr-tablewrap horizontal scrollt
   (overflow: auto). Ohne das wandert der Zeilenanfang beim seitlichen Scrollen
   aus dem Sichtfeld. Optik wie .kr-tablenote. */
.kr-tablewrap > figcaption {
  position: sticky;
  inset-inline-start: 0;
  margin-block-start: var(--space-5);
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

.kr-tablenote {
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

/* Der Abstand steht bewusst als p.kr-tablenote, nicht als .kr-tablenote:
   style.css setzt global .wp-site-blocks p { margin-block: 0 }. Klasse + Tag
   schlaegt eine reine Klasse - als .kr-tablenote bliebe der Abstand einfach
   wirkungslos. offering.css laedt nach style.css, bei gleicher Spezifitaet
   gewinnt daher diese Regel. */
p.kr-tablenote {
  margin-block-start: var(--space-5);
}

.kr-tablenote a { color: var(--kr-red); }

/* --- Abschluss ------------------------------------------------------------ */

.kr-closing {
  margin-block-start: clamp(var(--space-10), 5vw, var(--space-16));
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  border-radius: var(--radius-lg);
  background: var(--kr-charcoal);
  color: var(--gray-200);
  text-align: center;
}

.kr-closing h2 {
  color: var(--white);
  font-size: clamp(1.5rem, 2.8vw, var(--fs-h2));
  margin-block-end: var(--space-4);
  text-wrap: balance;
}

.kr-closing p {
  color: var(--gray-400);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  max-width: 56ch;
  margin-inline: auto;
  margin-block-end: var(--space-8);
}

@media (prefers-reduced-motion: reduce) {
  .kr-table tbody tr:hover td { background: none; }
}