/*
 * Startseite (templates/front-page.html mit den Patterns hero-start, vertrauen-vorteile,
 * shop-kategorien, inhalt-basenkur, inhalt-wohlima, inhalt-cta). Geladen ueber
 * wp_enqueue_block_style('core/group'), also auf jeder Seite mit Gruppen; alle Selektoren
 * tragen deshalb eine nxm-Klasse. Nur, was theme.json nicht kann: Bildbreite auf dem Handy,
 * Kategoriekarte als ganzflaechiges Klickziel (Liste auf dem Handy, Karten ab 782 px), Fakt ohne Kasten, Reihenfolge der
 * Teaser-Spalten auf dem Handy, Rahmenbreite des Umrissknopfes. Werte nur aus Presets (Haarlinien
 * in px wie in kopf.css und produkt-detail.css); alles in :where(), .wp-site-blocks nur dort, wo
 * elements.link, eine Layout-Klasse oder eine Section Style sonst gewinnt.
 */

/* Buehne: freigestelltes Produktbild, auf dem Handy in Lesebreite, auf dem Desktop nicht hoeher
   als die Textspalte */
:root :where(.nxm-hero__bild) {
  max-width: 16rem;
  margin-left: 0;
}

/* Umrissknopf (Nebenhandlung, gleiche Form in Buehne und Basenkur): Farben kommen als Presets
   aus dem Block, nur die Rahmenbreite hat kein Preset. Klassenspezifitaet noetig: theme.json
   setzt in :root :where(.wp-element-button, .wp-block-button__link) border-width 0, und die
   Global Styles stehen im Kopf hinter dieser Datei (gemessen 13.09.: Rahmen blieb sonst 0). */
.wp-site-blocks .nxm-knopf-umriss .wp-block-button__link {
  border-style: solid;
  border-width: 1px;
}

/* Fakten: kein Kasten, nur eine gruene Kante links. So tragen auf der Seite nur klickbare
   Dinge eine Flaeche. */
:root :where(.nxm-fakt) {
  border-left: 2px solid var(--wp--preset--color--primary);
  padding-left: var(--wp--preset--spacing--30);
}

/* Teaser (Basenkur, Wohlima): Bild auf dem Handy in Lesebreite und buendig mit dem Text darueber */
:root :where(.nxm-teaser__bild .wp-block-image) {
  max-width: 18rem;
}

:root :where(.nxm-basenkur .nxm-teaser__bild .wp-block-image) {
  max-width: 14rem;
}

:root :where(.nxm-teaser__bild img) {
  width: 100%;
  height: auto;
}

/* Karten der Kategorien (Pattern shop-kategorien, Betreiber 05.10.2026: modern, uebersichtlich, vor
   allem auf dem Handy). Handy: eine Liste, je Zeile Vorschaubild, Name, kurzer Satz und Pfeil; die
   ganze Zeile ist das Klickziel (mindestens 72 px hoch). Ab 782 px vier Karten je Reihe mit dem Bild
   oben; die erste Karte ist doppelt breit, damit sieben Karten zwei volle Reihen ergeben.
   Produktfotos stehen auf weissem Grund, deshalb weisse Karte, Bild eingepasst statt beschnitten. */
.wp-site-blocks .nxm-kacheln {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--preset--spacing--20);
}

.wp-site-blocks .nxm-kacheln > * {
  margin: 0;
}

.wp-site-blocks .nxm-kachel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  min-height: 4.5rem;
  padding: var(--wp--preset--spacing--20);
  padding-right: var(--wp--preset--spacing--50);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--large);
  background-color: var(--wp--preset--color--base);
  transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.wp-site-blocks .nxm-kachel > * {
  margin: 0;
}

.wp-site-blocks .nxm-kachel:hover,
.wp-site-blocks .nxm-kachel:focus-within {
  border-color: var(--wp--preset--color--primary);
  box-shadow: var(--wp--preset--shadow--overlay);
}

.wp-site-blocks .nxm-kachel__bild {
  flex: 0 0 4rem;
  width: 4rem;
  height: 4rem;
  border-radius: var(--wp--custom--radius--medium);
  overflow: hidden;
}

.wp-site-blocks .nxm-kachel__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wp-site-blocks .nxm-kachel__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Der Name ist der Link; er sieht aus wie eine Ueberschrift, nicht wie ein Fliesstextlink. Dass die
   Karte etwas tut, zeigen Rahmen, Pfeil und der Zustand beim Beruehren. */
.wp-site-blocks .nxm-kachel h3 a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}

.wp-site-blocks .nxm-kachel:hover h3 a,
.wp-site-blocks .nxm-kachel:focus-within h3 a {
  color: var(--wp--preset--color--primary-dark);
}

/* Ganzflaechiges Klickziel. Nicht in :where(): ein Pseudoelement darin macht den ganzen
   Selektor ungueltig (Befund 13.09.: die Kachel war deshalb nur auf dem Titel klickbar). */
.wp-site-blocks .nxm-kachel h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--wp--custom--radius--large);
}

.wp-site-blocks .nxm-kachel h3 a:focus-visible {
  outline: none;
}

.wp-site-blocks .nxm-kachel h3 a:focus-visible::after {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/* Ab 782 px schneidet die Karte ueber (overflow: hidden, wegen der Bildecken) und damit auch den
   Fokusring des Links ab. Die Karte zeigt ihn dort selbst; ihr eigener Umriss wird nicht beschnitten. */
.wp-site-blocks .nxm-kachel:has(h3 a:focus-visible) {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/* Pfeil am rechten Rand der Zeile (nur Handy und Tablett): zwei Kanten eines gedrehten Quadrats. */
.wp-site-blocks .nxm-kachel::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--wp--preset--spacing--30);
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2px solid var(--wp--preset--color--primary-dark);
  border-right: 2px solid var(--wp--preset--color--primary-dark);
  transform: translateY(-50%) rotate(45deg);
  /* Der Pfeil liegt ueber dem ganzflaechigen Link; ohne das waere ein Tipp genau auf ihn wirkungslos. */
  pointer-events: none;
}

:root :where(.nxm-kachel p) {
  color: var(--wp--preset--color--muted);
}

@media (min-width: 600px) {
  .wp-site-blocks .nxm-kacheln {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--30);
  }
}

@media (min-width: 782px) {
  .wp-site-blocks .nxm-kacheln {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .wp-site-blocks .nxm-kachel {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  /* Die erste Karte ist doppelt breit und liegt quer: Bild links, Text rechts. */
  .wp-site-blocks .nxm-kachel:first-child {
    grid-column: span 2;
    flex-direction: row;
  }

  /* Das Bild der breiten Karte bestimmt die Hoehe der Reihe nicht mit: es fuellt, was die
     Nachbarkarten vorgeben (sonst wuerde die Reihe so hoch wie das Bild breit ist). */
  .wp-site-blocks .nxm-kachel:first-child .nxm-kachel__bild {
    position: relative;
    flex: 0 0 50%;
    width: 50%;
    height: auto;
    min-height: 11rem;
  }

  .wp-site-blocks .nxm-kachel:first-child .nxm-kachel__bild img {
    position: absolute;
    top: var(--wp--preset--spacing--20);
    left: var(--wp--preset--spacing--20);
    width: calc(100% - 2 * var(--wp--preset--spacing--20));
    height: calc(100% - 2 * var(--wp--preset--spacing--20));
  }

  .wp-site-blocks .nxm-kachel:first-child .nxm-kachel__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--wp--preset--spacing--40);
    border-top: 0;
    border-left: 1px solid var(--wp--preset--color--line);
  }

  .wp-site-blocks .nxm-kachel::after {
    display: none;
  }

  .wp-site-blocks .nxm-kachel__bild {
    flex: 0 0 auto;
    width: 100%;
    height: 11rem;
    padding: var(--wp--preset--spacing--20);
    border-radius: 0;
    box-sizing: border-box;
  }

  .wp-site-blocks .nxm-kachel__text {
    flex: 1 1 auto;
    padding: var(--wp--preset--spacing--30);
    border-top: 1px solid var(--wp--preset--color--line);
  }
}

/* Kontakt aufnehmen (Pattern inhalt-cta): altes Sprungziel "beratung" mit Luft nach oben;
   Fokusring in Weiss (primary auf primary-dark nur 1,43:1) */
:root :where(.nxm-beratung) {
  scroll-margin-top: var(--wp--preset--spacing--40);
}

:root :where(.nxm-beratung a:focus-visible) {
  outline-color: var(--wp--preset--color--base);
}

@media (max-width: 781px) {
  /* Handy zuerst: im Teaser stehen Ueberschrift und Text vor dem Bild. .wp-site-blocks, weil
     .wp-block-columns die Spalten als Flex-Elemente fuehrt. */
  .wp-site-blocks .nxm-teaser--text-zuerst > .nxm-teaser__bild {
    order: 2;
  }
}

@media (min-width: 782px) {
  :root :where(.nxm-hero__bild) {
    max-width: 20rem;
  }

  :root :where(.nxm-teaser__bild .wp-block-image),
  :root :where(.nxm-basenkur .nxm-teaser__bild .wp-block-image) {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-site-blocks .nxm-kachel {
    transition: none;
  }
}