/* ===========================================================================
   kr3m Homepage
   Der Inhalt liegt als Block-Markup in der Seite "Home". Dieses Stylesheet
   arbeitet deshalb mit dem Markup, das WordPress-Core-Blöcke erzeugen —
   insbesondere figure.wp-block-image um jedes Bild.
   Abschnitts-Grundgerüst, Eyebrow, Lead und Schaltflächen: layout.css.
   =========================================================================== */

/* --- Hero ----------------------------------------------------------------- */

.kr-hero {
  position: relative;
  overflow: clip;
  /* Frueher bewusst knapp, damit die Logo-Leiste ohne Scrollen sichtbar bleibt.
     Nach dem Vergroessern des Mockups stand dieses aber nur noch 32px unter dem
     Header und 8px ueber der Logo-Leiste — das wirkte gedraengt. Jetzt
     grosszuegiger; die Leiste rutscht dadurch auf niedrigen Schirmen knapp
     unter die Falz, was den ruhigeren Aufbau wert ist. */
  padding-block: clamp(var(--space-12), 5vw, var(--space-20)) 0;
  background:
    radial-gradient(90% 70% at 88% 8%, rgba(234, 46, 66, .07) 0%, transparent 60%),
    radial-gradient(70% 60% at 6% 4%, rgba(51, 51, 51, .05) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fdf9f4 100%);
}

.kr-hero__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: grid;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 62rem) {
  /* Textspalte breiter: enger bricht die H1 auf vier Zeilen. */
  .kr-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

.kr-hero__title {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: var(--fw-extrabold);
  color: var(--text-strong);
  margin-block-end: var(--space-6);
  text-wrap: balance;
}

/* Das Schlüsselwort in Markenrot — ein Akzent, nicht drei. */
.kr-hero__title em { font-style: normal; color: var(--kr-red); }

/* Tag-Qualifier (p. statt .): style.css setzt global
   ".wp-site-blocks p { margin-block-end: 0 }" — Klasse plus Tag schlaegt eine
   reine Klasse, unabhaengig von der Ladereihenfolge. Ohne das Praefix blieb
   der Abstand hier wirkungslos und die Schaltflaechen sassen direkt am Absatz. */
p.kr-hero__text {
  font-size: clamp(var(--fs-body), 1.35vw, var(--fs-body-lg));
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: 56ch;
  margin-block-end: clamp(var(--space-8), 3vw, var(--space-12));
}

.kr-hero__visual { position: relative; isolation: isolate; padding-block-end: var(--space-6); }

/* Statisches Vollbild-Mockup — kein Loop mehr. Die vorige Fassung liess das
   Bild dauerhaft auf/ab schweben ("seltsame Bewegung", Nutzerfeedback), das
   ist raus. Ein einziges .kr-rise-Entrance beim Laden reicht.

   Der Zoom-Callout auf die Bubble-Shooter-Kachel (Zwischenfassung) ist
   wieder raus — Feedback wollte die Grafik selbst groesser, nicht
   zusaetzlich verziert.

   Dass das Mockup trotz grosser Box klein wirkte, lag nicht am CSS: die
   PNG-Datei hatte rund 23 % Leerrand links, 20 % rechts und je ~18 % oben
   und unten. Skaliert wurde also die Leinwand, nicht das Motiv. Die Datei
   ist jetzt auf ihren Inhalt beschnitten (798x1027 statt 1400x1583) —
   erst dadurch greifen die Groessenangaben hier ueberhaupt. */
.kr-hero__device {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(360px, 57vh, 640px);
  margin-inline: auto;
  filter: drop-shadow(0 26px 50px rgba(51, 51, 51, .18));
}

/* Ab der Zweispalten-Schwelle schliesst das Mockup oben mit der Dachzeile
   und unten mit der Schaltflaechenzeile ab. Dafuer streckt sich die
   Bildspalte auf die Hoehe der Textspalte, und das Bild liegt absolut
   darin: so bestimmt allein die Textspalte die Zeilenhoehe. Laege das Bild
   im Fluss, wuerden sich Zeilenhoehe und Bildhoehe gegenseitig hochschaukeln. */
@media (min-width: 62rem) {
  .kr-hero__grid { align-items: stretch; }

  /* Ueber die Textzeile hinaus bis in die Polsterung des Hero-Bands: oben
     nahe an dessen Oberkante, unten bis knapp vor die Logo-Leiste. Das ist
     der gesamte vertikale Raum, der zur Verfuegung steht.

     Die Vergroesserung sitzt bewusst am Container, nicht am Bild: bei absolut
     positionierten ersetzten Elementen loest width/height:auto zur
     intrinsischen Groesse auf, die Insets werden dann ignoriert — das Bild
     schoss dabei auf volle Dateigroesse hoch. Negative Aussenabstaende am
     gestreckten Rasterfeld sind der verlaessliche Weg.

     Breiter geht nicht: das Mockup ist hochkant (798x1027), die Flaeche
     daneben querformatig. Bei erhaltenem Seitenverhaeltnis bestimmt immer
     die Hoehe die Groesse — zusaetzliche Breite bliebe leer. */
  .kr-hero__visual {
    padding-block-end: 0;
    /* Hoehe explizit statt ueber einen negativen unteren Aussenabstand: den
       setzt eine fremde Regel zuverlaessig auf 0 zurueck (margin-block-end
       kam als 0px an, obwohl hier gesetzt). Das Prozent bezieht sich auf die
       Rasterzeile, also auf die Hoehe der Textspalte. */
    margin-block-start: calc(-1 * var(--space-6));
    height: calc(100% + var(--space-6) + var(--space-6));
  }

  .kr-hero__device {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }
}

@media (max-width: 61.9375rem) {
  /* Unterhalb der Zweispalten-Schwelle (siehe .kr-hero__grid) steht das
     Mockup allein in der Zeile. Randloses Ausbrechen aus der
     Content-Polsterung von .kr-hero__grid macht es spuerbar groesser,
     ohne dass Typografie oder Abstaende sich aendern. */
  .kr-hero__visual {
    margin-inline: calc(-1 * var(--space-6));
  }

  /* Weissraum links und rechts halbiert: das Motiv laeuft bis auf je 40px
     an den Bildschirmrand heran. Zwei Maximalwerte statt einer festen
     Breite, damit das Seitenverhaeltnis erhalten bleibt — eine feste
     Breite plus max-height wuerde es verzerren. */
  .kr-hero__device {
    max-width: calc(100vw - 5rem);
    max-height: clamp(360px, 57vh, 620px);
  }
}

.kr-rise { animation: kr-rise-in .7s var(--ease-out) both; }
.kr-rise--1 { animation-delay: .05s; }
.kr-rise--2 { animation-delay: .15s; }
.kr-rise--3 { animation-delay: .25s; }

@keyframes kr-rise-in {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}


/* --- Logo-Leiste ---------------------------------------------------------- */

.kr-logos {
  /* Genug Luft, damit das Mockup nicht auf der Leiste aufsitzt. */
  margin-block-start: clamp(var(--space-10), 4vw, var(--space-16));
  padding-block: var(--space-8);
  border-block-start: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, .55);
}

/* p.kr-logos__label (statt .kr-logos__label): style.css setzt global
   ".wp-site-blocks p { margin-block-end: 0 }" mit hoeherer Spezifitaet
   (Klasse+Tag statt nur Klasse) — ohne den Tag-Qualifier hier wird unser
   margin-block-end vom globalen Reset ueberschrieben, trotz spaeterer
   Ladereihenfolge. */
p.kr-logos__label {
  text-align: center;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-subtle);
  /* --space-6 (24px) + 5px auf Wunsch */
  margin-block-end: calc(var(--space-6) + 5px);
}

.kr-logos__viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.kr-logos__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
  animation: kr-marquee 52s linear infinite;
}

.kr-logos__viewport:hover .kr-logos__track { animation-play-state: paused; }

.kr-logos__track img {
  height: 34px;
  width: auto;
  flex: none;
  filter: grayscale(1);
  opacity: .58;
  transition: filter var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}

.kr-logos__track img:hover { filter: grayscale(0); opacity: 1; }

@keyframes kr-marquee {
  from { translate: 0 0; }
  to   { translate: -50% 0; }
}

/* --- Erzählabschnitt ------------------------------------------------------ */

.kr-story__grid { display: grid; gap: clamp(var(--space-8), 4vw, var(--space-16)); grid-template-columns: 1fr; }

@media (min-width: 56rem) {
  .kr-story__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.kr-story h2 {
  font-size: clamp(1.75rem, 3.2vw, var(--fs-h1));
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.kr-story__body .kr-lead + .kr-lead { margin-block-start: var(--space-5); }

.kr-figure {
  margin-block-start: var(--space-10);
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block-start: var(--space-6);
  border-block-start: 2px solid var(--kr-red);
}

.kr-figure__value {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-strong);
}

.kr-figure__label { font-size: var(--fs-body-sm); color: var(--text-muted); max-width: 26ch; }

/* --- KPI-Band ------------------------------------------------------------- */

.kr-kpis { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-block-start: var(--space-10); }

@media (min-width: 48rem) { .kr-kpis { grid-template-columns: repeat(3, 1fr); } }

/* Icon als CSS-Hintergrund statt Bild-Block: so bleibt der Blockinhalt
   reiner Text und im Editor ohne Umwege bearbeitbar. */
.kr-kpi {
  position: relative;
  padding: var(--space-8);
  padding-block-start: calc(var(--space-8) + 34px + var(--space-5));
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}

.kr-kpi::before {
  content: "";
  position: absolute;
  inset-block-start: var(--space-8);
  inset-inline-start: var(--space-8);
  width: 34px;
  height: 34px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.kr-kpi--retention::before     { background-image: url("icons/kpi-retention.svg"); }
.kr-kpi--interaction::before   { background-image: url("icons/kpi-interaction.svg"); }
.kr-kpi--registrations::before { background-image: url("icons/kpi-registrations.svg"); }

.kr-kpi__value {
  display: block;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-block-end: var(--space-2);
}

.kr-kpi__label { font-size: var(--fs-body-sm); color: var(--gray-400); }

.kr-kpis__note { margin-block-start: var(--space-6); font-size: var(--fs-body-sm); color: var(--gray-500); }

/* --- Fähigkeiten-Karten --------------------------------------------------- */

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

@media (min-width: 40rem) { .kr-caps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .kr-caps { grid-template-columns: repeat(3, 1fr); } }

/* Jede Karte ist ein einzelner Absatz — Text bearbeitbar, Icon aus dem CSS. */
.kr-cap {
  position: relative;
  padding: var(--space-6);
  padding-inline-start: calc(var(--space-6) + 30px + var(--space-4));
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  transition:
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
}

.kr-cap::before {
  content: "";
  position: absolute;
  inset-block-start: var(--space-6);
  inset-inline-start: var(--space-6);
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.kr-cap:hover { border-color: var(--gray-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.kr-cap--games-portfolio::before      { background-image: url("icons/games-portfolio.svg"); }
.kr-cap--deep-integration::before     { background-image: url("icons/deep-integration.svg"); }
.kr-cap--existing-games::before       { background-image: url("icons/existing-games.svg"); }
.kr-cap--cms-content::before          { background-image: url("icons/cms-content.svg"); }
.kr-cap--registration-sso::before     { background-image: url("icons/registration-sso.svg"); }
.kr-cap--subscription-paywall::before { background-image: url("icons/subscription-paywall.svg"); }
.kr-cap--access-management::before    { background-image: url("icons/access-management.svg"); }
.kr-cap--ai-quiz::before              { background-image: url("icons/ai-quiz.svg"); }
.kr-cap--engagement-features::before  { background-image: url("icons/engagement-features.svg"); }
.kr-cap--branded-experience::before   { background-image: url("icons/branded-experience.svg"); }

/* --- Spiele-Raster -------------------------------------------------------- */

.kr-games { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, 1fr); margin-block-start: clamp(var(--space-10), 5vw, var(--space-12)); }

@media (min-width: 48rem) { .kr-games { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68rem) { .kr-games { grid-template-columns: repeat(4, 1fr); } }

.kr-game {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}

.kr-game:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* core/image bringt ein eigenes figure mit Standardabstaenden mit. */
.kr-game .wp-block-image { margin: 0; }

.kr-game img {
  display: block;
  width: 100%;
  /* Ohne height:auto gewinnt das height-Attribut aus dem HTML als Praesentationshinweis. */
  height: auto;
  /* 16/9 entspricht den Quellbildern — kein Beschnitt. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: scale var(--dur-slow) var(--ease-standard);
}

.kr-game:hover img { scale: 1.04; }

.kr-game__label {
  padding: var(--space-3) var(--space-4) var(--space-4);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

/* Deutlich weiter abgesetzt, groesser und kontrastreicher als zuvor: der Satz
   stand fast an den Kacheln und lief in --fs-body-sm auf --text-muted, was ihn
   wie eine Fussnote wirken liess. Tag-Qualifier (p.statt .), weil style.css
   global ".wp-site-blocks p { margin-block-end: 0 }" mit hoeherer Spezifitaet
   setzt. */
p.kr-games__note {
  margin-block-start: clamp(var(--space-12), 6vw, var(--space-16));
  margin-inline: auto;
  max-width: 64ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  text-align: center;
  text-wrap: balance;
}

/* --- Bewegung reduzieren -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .kr-logos__track,
  .kr-rise { animation: none; }

  .kr-rise { opacity: 1; translate: none; }

  .kr-cap:hover,
  .kr-game:hover { transform: none; }

  .kr-game:hover img { scale: 1; }
}