/* ===========================================================================
   kr3m — gemeinsames Layout-Grundgerüst
   Wird auf JEDER Seite geladen. Alles, was mehr als eine Seite braucht,
   gehört hierher — nicht in die seitenspezifischen Stylesheets.
   Nutzt ausschliesslich die Design-System-Tokens aus tokens/.
   =========================================================================== */

/* --- Abschnitte und Inhaltsbreite ----------------------------------------- */

.kr-section {
  padding-block: clamp(var(--space-16), 9vw, var(--space-24));
}

.kr-section--tint {
  background: linear-gradient(180deg, #fffdfb 0%, #fdf8f3 100%);
}

.kr-section--dark {
  background: var(--kr-charcoal);
  color: var(--gray-200);
}

.kr-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* --- Wiederkehrende Textbausteine ----------------------------------------- */

.kr-eyebrow {
  display: 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-4);
}

.kr-section__title {
  font-size: clamp(1.75rem, 3.4vw, var(--fs-h1));
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: var(--fw-extrabold);
  margin-block-end: var(--space-5);
  text-wrap: balance;
}

.kr-lead {
  font-size: clamp(var(--fs-body), 1.6vw, var(--fs-body-lg));
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: 62ch;
}

/* Auf dunklem Grund muss die Typo aufhellen — base.css setzt Headings auf
   --text-strong, das waere hier fast unsichtbar. */
.kr-section--dark .kr-section__title,
.kr-section--dark h2,
.kr-section--dark h3 {
  color: var(--white);
}

.kr-section--dark .kr-lead,
.kr-lead--on-dark {
  color: var(--gray-400);
}

/* --- Schaltflächen -------------------------------------------------------- */

.kr-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.kr-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px var(--space-6);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}

.kr-btn--primary {
  background: var(--kr-red);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(234, 46, 66, .22);
}

.kr-btn--primary:hover {
  background: var(--kr-red-600);
  color: var(--white);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(234, 46, 66, .28);
}

.kr-btn--ghost {
  background: var(--white);
  color: var(--text-strong);
  border-color: var(--border-default);
}

.kr-btn--ghost:hover {
  border-color: var(--kr-charcoal);
  color: var(--text-strong);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Abschluss-Schaltfläche eines Abschnitts. Zentriert, weil sie den Abschnitt
   beendet und den nächsten Schritt markiert — nicht Teil des Fliesstexts. */
.kr-section__cta {
  margin-block-start: clamp(var(--space-8), 4vw, var(--space-12));
  display: flex;
  justify-content: center;
}

/* --- Nur für Screenreader ------------------------------------------------- */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kr-btn:hover { transform: none; }
}

/* ===========================================================================
   Header und Footer
   =========================================================================== */

/* Der Kleber sitzt am Template-Part-Rahmen, nicht am .kr-header selbst.
   WordPress umschliesst den Header mit <header class="wp-block-template-part">,
   und dieser Rahmen ist exakt so hoch wie sein Inhalt. Da sich ein sticky
   Element nur innerhalb seines Elternkastens bewegen kann, haette es dort
   keinen Weg — der Header scrollte deshalb einfach weg. Der Rahmen selbst ist
   direktes Kind von .wp-site-blocks und hat die volle Seitenhoehe zur
   Verfuegung. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
}

.kr-header {
  background: var(--surface-page);
  border-block-end: 1px solid var(--border-subtle);
  transition:
    background-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}

.kr-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
  padding-block: var(--space-4);
  align-items: center;
  transition: padding-block var(--dur-base) var(--ease-standard);
}

/* Das Logo ersetzt den Home-Link — core/site-logo verlinkt von sich aus
   auf die Startseite. */
.kr-header__logo img {
  height: auto;
  max-width: 52px;
  display: block;
  transition: max-width var(--dur-base) var(--ease-standard);
}

/* Kompakte Fassung, sobald die Seite gescrollt ist. Die Klasse setzt
   assets/header.js: rein in CSS ginge das nur ueber scroll-getriebene
   Animationen, die noch nicht breit genug unterstuetzt werden. Der Header
   bleibt in beiden Zustaenden oben stehen — das macht position: sticky. */
.kr-header.is-scrolled {
  background: color-mix(in srgb, var(--surface-page) 88%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

.kr-header.is-scrolled .kr-header__inner {
  padding-block: var(--space-2);
}

.kr-header.is-scrolled .kr-header__logo img {
  max-width: 36px;
}

@media (prefers-reduced-motion: reduce) {
  .kr-header,
  .kr-header__inner,
  .kr-header__logo img { transition: none; }
}

.kr-nav a {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  text-decoration: none;
}

.kr-nav a:hover {
  color: var(--kr-red);
  text-decoration: none;
}

/* Aktuelle Seite markieren */
.kr-nav .current-menu-item > a,
.kr-nav .wp-block-navigation-item.current-menu-item a {
  color: var(--kr-red);
}

.kr-footer {
  background: var(--kr-charcoal);
  color: var(--gray-400);
  padding-block: var(--space-10);
}

.kr-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
  align-items: center;
  row-gap: var(--space-6);
}

.kr-footer__legal {
  align-items: center;
  column-gap: var(--space-6);
  row-gap: var(--space-2);
}

.kr-footer__legal p {
  font-size: var(--fs-body-sm);
  margin: 0;
}

.kr-footer__copy {
  color: var(--gray-500);
}

.kr-footer__legal a {
  color: var(--gray-300);
  text-decoration: none;
}

.kr-footer__legal a:hover {
  color: var(--white);
  text-decoration: underline;
}

.kr-footer__social .wp-social-link {
  /* core/social-links setzt eigene Abstände; hier nur die Farbe fuehren. */
  opacity: .75;
  transition: opacity var(--dur-base) var(--ease-standard);
}

.kr-footer__social .wp-social-link:hover {
  opacity: 1;
}

@media (max-width: 40rem) {
  .kr-header { position: static; }

  .kr-footer__inner,
  .kr-footer__legal {
    justify-content: center;
    text-align: center;
  }
}

/* ===========================================================================
   Seitenkopf (von Unterseiten gemeinsam genutzt)
   =========================================================================== */

.kr-pagehead {
  padding-block: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-6);
  background:
    radial-gradient(80% 60% at 85% 0%, rgba(234, 46, 66, .06) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fdf9f4 100%);
}

/* Abstand zum Folgeabschnitt.

   Ohne das stapeln sich drei Werte zu 184px Leerraum: 64px Innenabstand unten
   am Seitenkopf, 24px Blockabstand aus den globalen WordPress-Stilen und 96px
   Innenabstand oben am Folgeabschnitt. Das wirkt wie ein Loch zwischen
   Ueberschrift und Text.

   Die Regel stand zuerst in offering.css, weil ich annahm, sie wuerde sonst
   auch die Rechtstexte treffen. Das stimmt nicht: Impressum, Datenschutz und
   AGB nutzen den Seitenkopf gar nicht — dort liefert die Standardvorlage den
   Titel. Betroffen sind ausschliesslich Seiten mit .kr-pagehead, und die
   sollen den engeren Abstand alle haben. */
.kr-pagehead + .kr-section {
  margin-block-start: 0;
  padding-block-start: clamp(var(--space-8), 4vw, var(--space-12));
}

.kr-pagehead h1 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: var(--fw-extrabold);
  color: var(--text-strong);
  margin-block-end: var(--space-5);
  max-width: 24ch;
  text-wrap: balance;
}

/* ===========================================================================
   Kontaktseite
   =========================================================================== */

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

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

.kr-contact__details {
  align-self: start;
  padding: var(--space-8);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

/* Trennlinie sitzt jetzt hier (vor Firmenname+Adresse), nicht mehr vor dem
   Team-Block — der Team-Block (Foto+Name) steht jetzt zuerst. */
.kr-contact__subtitle {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border-default);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  margin-block-end: var(--space-4);
}

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

.kr-contact__line { margin-block-start: var(--space-2); }

/* Team-Block steht jetzt zuerst (Foto+Name oben, Firmenadresse unten).
   Foto in aehnlicher Groesse wie auf kr3m.com (dort 447x298, unbeschnitten
   3:2) — hier: volle Spaltenbreite, Seitenverhaeltnis erhalten statt
   winzigem rundem Avatar. */
.kr-contact__team {
  align-items: stretch;
}

.kr-contact__photo {
  margin: 0;
}

.kr-contact__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  object-fit: cover;
  object-position: center 20%;
  box-shadow: var(--shadow-sm);
}

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

.kr-contact__person strong { color: var(--text-strong); }

/* ===========================================================================
   Formular (Contact Form 7)
   =========================================================================== */

.kr-form__row { margin-block-end: var(--space-5); }

.kr-form__label {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  margin-block-end: var(--space-2);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  padding: 12px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--kr-red);
  box-shadow: var(--shadow-focus);
}

.wpcf7-form textarea { resize: vertical; min-height: 9rem; }

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

.kr-form__consent .wpcf7-list-item { margin: 0; }

.wpcf7-form input[type="submit"] {
  padding: 14px var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--white);
  background: var(--kr-red);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(234, 46, 66, .22);
  transition:
    background-color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.wpcf7-form input[type="submit"]:hover {
  background: var(--kr-red-600);
  transform: translateY(-1px);
}

/* Rueckmeldungen */
.wpcf7-not-valid-tip {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--kr-red-600);
}

.wpcf7-response-output {
  margin-block-start: var(--space-6) !important;
  margin-inline: 0 !important;
  padding: var(--space-4) var(--space-5) !important;
  border-width: 1px !important;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--success) !important;
  background: var(--success-050);
  color: var(--gray-900);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--kr-red) !important;
  background: var(--kr-red-050);
  color: var(--gray-900);
}

@media (prefers-reduced-motion: reduce) {
  .wpcf7-form input[type="submit"]:hover { transform: none; }
}

/* ===========================================================================
   Seiten mit langem Fliesstext
   =========================================================================== */

/* Lesbare Zeilenlaenge fuer Seiten, die ueberwiegend aus Text bestehen.
   Die Vorlage "Volle Breite (kr3m)" gibt selbst keine Breite vor, deshalb
   hier statt im Seiteninhalt. */
.kr-prose { max-width: 74ch; }

.kr-prose > :first-child { margin-block-start: 0; }

.kr-prose h2 {
  font-size: clamp(1.375rem, 2.4vw, var(--fs-h3));
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  margin-block: clamp(var(--space-10), 5vw, var(--space-14)) var(--space-4);
}

.kr-prose h3 {
  font-size: var(--fs-body-lg);
  margin-block: var(--space-8) var(--space-3);
}

/* Tag-Qualifier: style.css setzt global ".wp-site-blocks p{margin-block-end:0}"
   mit Klasse+Tag; ein reiner Klassenselektor verliert dagegen. */
.kr-prose p,
.kr-prose li {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.kr-prose p { margin-block-end: var(--space-4); }

.kr-prose ol,
.kr-prose ul {
  margin-block: var(--space-5);
  padding-inline-start: var(--space-6);
  display: grid;
  gap: var(--space-3);
}

/* WordPress setzt global ":root :where(.wp-block-list li){margin-top:.5rem}".
   Zusammen mit dem Rasterabstand oben wirkten zwei Mechanismen auf dieselbe
   Luecke: gesetzt waren 16px, gemessen wurden 24px. Der Aussenabstand faellt
   hier weg, den Abstand steuert allein das Raster. */
.kr-prose li { margin-block: 0; }

/* Die Impact-Anmeldelinks sind sehr lang und wuerden das Layout auf schmalen
   Schirmen aufschieben. */
.kr-prose a {
  color: var(--kr-red);
  overflow-wrap: anywhere;
}

/* ===========================================================================
   Eingebettete Spiele
   =========================================================================== */

.kr-embed + .kr-embed {
  margin-block-start: clamp(var(--space-12), 6vw, var(--space-20));
  padding-block-start: clamp(var(--space-10), 5vw, var(--space-16));
  border-block-start: 1px solid var(--border-subtle);
}

.kr-embed__title {
  font-size: clamp(1.25rem, 2.2vw, var(--fs-h3));
  margin-block-end: var(--space-5);
  text-align: center;
}

/* 826px ist das Mass, das die Einbettung selbst mitbringt. */
.kr-embed__frame {
  max-width: 826px;
  margin-inline: auto;
}

.zaphira-embed__backlink {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-3);
  font-size: var(--fs-caption);
}

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

/* ===========================================================================
   Sprachumschalter
   =========================================================================== */

.kr-header__right {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
}

.kr-langs__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kr-langs__link {
  display: block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--text-subtle);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard);
}

.kr-langs__link:hover { color: var(--kr-red); text-decoration: none; }

.kr-langs__link.is-current {
  color: var(--text-strong);
  background: var(--surface-subtle);
}

/* ===========================================================================
   Hinweis auf andere Sprachfassung
   =========================================================================== */

/* Standardmaessig unsichtbar. Sichtbar wird genau der Eintrag, dessen Sprache
   das Inline-Skript im <head> als Klasse am <html>-Element gesetzt hat — noch
   vor dem ersten Rendern, damit die Leiste den Inhalt nicht nachtraeglich
   nach unten schiebt. Ohne JavaScript bleibt sie aus; der Umschalter im
   Header deckt den Fall ab. */
.kr-langhint { display: none; }
.kr-langhint__item { display: none; }

html[class*="kr-langhint-"] .kr-langhint { display: flex; }

html.kr-langhint-de .kr-langhint__item[data-lang="de"],
html.kr-langhint-en .kr-langhint__item[data-lang="en"],
html.kr-langhint-fr .kr-langhint__item[data-lang="fr"] { display: block; }

.kr-langhint {
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--surface-subtle);
  border-block-end: 1px solid var(--border-subtle);
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  text-align: center;
}

p.kr-langhint__item { margin: 0; }

.kr-langhint__go {
  color: var(--kr-red);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.kr-langhint__close {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-subtle);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.kr-langhint__close:hover { background: var(--surface-card); color: var(--text-strong); }

.kr-langhint__close:focus-visible { outline: 2px solid var(--kr-red); outline-offset: 2px; }

@media (max-width: 40rem) {
  .kr-langhint { flex-wrap: wrap; gap: var(--space-2); padding-inline: var(--space-4); }
}