/*
 * Inhaltsseiten, Fehlerseite, Kopf und Fuss der Kasse: Feinheiten, die theme.json nicht abbilden
 * kann. Geladen ueber wp_enqueue_block_style('core/group') (automatische Zuordnung in
 * functions.php fuer jede Datei unter assets/css/). Selektoren in :root :where(...), damit Global
 * Styles gewinnen; nie !important.
 *
 * Drei Ausnahmen mit Klassenspezifitaet (.wp-site-blocks .klasse), jede unten begruendet: die
 * Abstaende der Zwischenueberschriften, die Auszeichnung der Pflichtlinks im Kassen-Fuss und der
 * Umriss-Knopf der Suche auf der Fehlerseite. Gegen sie stehen Global-Styles-Regeln mit
 * Spezifitaet 0,1,0 bzw. 0,2,0, die spaeter im Dokument liegen; :where() allein verliert dort.
 */

/* Lesetext (templates/page.html, page-wide.html): Zwischenueberschriften bekommen mehr Luft nach
   oben als der Blockabstand von 1.5rem, damit lange Rechtstexte gegliedert bleiben.
   Klassenspezifitaet und die logische Eigenschaft sind Absicht: Global Styles setzen
   :root :where(.is-layout-constrained) > * { margin-block-start: var(--wp--preset--spacing--40) }
   (Spezifitaet 0,1,0, spaeter im Dokument). Ein :where()-Selektor mit margin-top verlor dagegen
   (Pruefung 13.09.2026: gemessen 24 px statt 48 px). .wp-site-blocks davor ergibt 0,3,1 und
   margin-block-start trifft dieselbe Eigenschaft; kein !important. Sollwert 1280 px: H2 48 px,
   H3 24 px. Der Absatz direkt unter einer Ueberschrift ruckt auf 16 px heran, damit Ueberschrift
   und Text als ein Block lesen und der Abstand davor die Gliederung traegt. */
.wp-site-blocks .nxm-inhalt .wp-block-post-content > h2 {
  margin-block-start: var(--wp--preset--spacing--50);
}

.wp-site-blocks .nxm-inhalt .wp-block-post-content > h3 {
  margin-block-start: var(--wp--preset--spacing--40);
}

.wp-site-blocks .nxm-inhalt .wp-block-post-content > h3 + p,
.wp-site-blocks .nxm-inhalt .wp-block-post-content > h2 + p {
  margin-block-start: var(--wp--preset--spacing--30);
}

.wp-site-blocks .nxm-inhalt .wp-block-post-content > :is(h2, h3):first-child {
  margin-block-start: 0;
}

/* Brotkrumen auf Inhaltsseiten: Links als Klickziel von 44 px Hoehe. Der Block bringt von sich
   aus die Klasse alignwide mit (BlockTypes/Breadcrumbs.php); die Gruppe nxm-inhalt__krumen in der
   Vorlage begrenzt ihn deshalb auf die Textbreite, damit Krume, Titel und Text links auf einer
   Kante stehen. */
:root :where(.nxm-inhalt .wp-block-woocommerce-breadcrumbs a) {
  display: inline-flex;
  align-items: center;
  min-height: var(--wp--custom--touch--min-size);
}

/* Suchfeld der Fehlerseite (Pattern nextamed/inhalt-fehler) in der Formsprache des Kopfes:
   sichtbares Label, 44 px hohes Feld mit kraeftigem Rahmen, Knopf mit Wort. */
:root :where(.nxm-fehler__suche .wp-block-search__label) {
  display: block;
  margin-bottom: var(--wp--preset--spacing--10);
  font-weight: 600;
}

:root :where(.nxm-fehler__suche .wp-block-search__input) {
  min-height: var(--wp--custom--touch--min-size);
  padding: 0 var(--wp--preset--spacing--30);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--small);
  font-size: var(--wp--preset--font-size--medium);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}

/* Der Knopf der Seitensuche ist ein Umriss-Knopf, kein gefuellter: auf der Fehlerseite steht im
   Kopf schon eine Suche mit gefuelltem Knopf, und je Sicht gehoert genau ein gefuellter Knopf
   (Bedienregeln 40+). Klassenspezifitaet, weil elements.button aus theme.json
   (:root :where(.wp-element-button, .wp-block-search__button ...), 0,2,0) sonst gewinnt. */
:root :where(.nxm-fehler__suche .wp-block-search__button) {
  margin-left: var(--wp--preset--spacing--20);
  min-height: var(--wp--custom--touch--min-size);
}

.wp-site-blocks .nxm-fehler__suche .wp-block-search__button {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--primary-dark);
  border: 1px solid var(--wp--preset--color--primary-dark);
}

.wp-site-blocks .nxm-fehler__suche .wp-block-search__button:hover {
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--primary-deep);
}

/* Kategorienliste der Fehlerseite: eine Liste ohne Punkte, jede Zeile ein Klickziel von 44 px mit
   Trennlinie; ab 782 px zwei Spalten, damit die sieben Wege nicht in die Laenge laufen. */
:root :where(.nxm-fehler__kategorien) {
  margin: 0;
  padding: 0;
  list-style: none;
}

:root :where(.nxm-fehler__kategorien li) {
  border-bottom: 1px solid var(--wp--preset--color--line);
}

:root :where(.nxm-fehler__kategorien li a) {
  display: flex;
  align-items: center;
  min-height: var(--wp--custom--touch--min-size);
  text-decoration: none;
}

:root :where(.nxm-fehler__kategorien li a:hover) {
  text-decoration: underline;
}

@media (min-width: 782px) {
  :root :where(.nxm-fehler__kategorien) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--wp--preset--spacing--40);
  }
}

/* Fehlerseite: der Weg zur Startseite steht allein in seiner Zeile und ist deshalb ein eigenes
   Klickziel von 44 px. Telefon und E-Mail stehen mitten im Satz; solche Links im Fliesstext bleiben
   in Zeilenhoehe (WCAG 2.2 Erfolgskriterium 2.5.8 nimmt Ziele im Satz ausdruecklich aus). */
:root :where(.nxm-fehler__weiter a) {
  display: inline-flex;
  align-items: center;
  min-height: var(--wp--custom--touch--min-size);
}

/* Kontaktseite (Pattern nextamed/inhalt-kontakt): Telefonnummer und E-Mail-Adresse sind die
   wichtigsten Ziele der Seite und brauchen 44 px Hoehe, auch wenn die Zeile kleiner setzt. */
:root :where(.nxm-kontakt__weg p a) {
  display: inline-flex;
  align-items: center;
  min-height: var(--wp--custom--touch--min-size);
}

/* Kopf der Kasse (Pattern nextamed/header-kasse): Rueckweg als Klickziel von mindestens 44 px. */
:root :where(.nxm-header--kasse .nxm-header__zurueck a) {
  display: inline-flex;
  align-items: center;
  min-height: var(--wp--custom--touch--min-size);
}

/* Fuss der Kasse (Pattern nextamed/footer-kasse): die fuenf Pflichtlinks stehen seit dem
   13.09.2026 als core/list (Listensemantik fuer Screenreader, gleiche Auszeichnung wie im grossen
   Fuss). assets/css/fuss.css kann sie nicht faerben, weil diese Datei am core/columns-Block haengt
   und auf /cart/ und der Bestellbestaetigung gar nicht geladen wird (gemessen: nur
   nextamed-kopf-css und nextamed-seite-inhalt-inline-css); deshalb stehen Farbe und
   Unterstreichung hier, wortgleich mit fuss.css. Klassenspezifitaet, weil elements.link aus
   theme.json (:root :where(a), 0,2,0) sonst gewinnt; nie !important. */
.wp-site-blocks .nxm-fuss--kasse .wp-block-list a,
.wp-site-blocks .nxm-fuss--kasse .nxm-fuss__hilfe a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}

.wp-site-blocks .nxm-fuss--kasse .wp-block-list a:hover,
.wp-site-blocks .nxm-fuss--kasse .nxm-fuss__hilfe a:hover {
  color: var(--wp--preset--color--primary-dark);
  text-decoration: underline;
}

:root :where(.nxm-fuss--kasse .nxm-fuss__links) {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

:root :where(.nxm-fuss--kasse .nxm-fuss__links li) {
  margin: 0;
}

:root :where(.nxm-fuss--kasse .nxm-fuss__links a),
:root :where(.nxm-fuss--kasse .nxm-fuss__hilfe a) {
  display: inline-flex;
  align-items: center;
  min-height: var(--wp--custom--touch--min-size);
}

/* Ab 782 px stehen die fuenf Pflichtlinks in einer Zeile nebeneinander, auf dem Handy
   untereinander: gestapelt bleibt jede Zeile ein eigenes 44-px-Ziel. */
@media (min-width: 782px) {
  :root :where(.nxm-fuss--kasse .nxm-fuss__links) {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--wp--preset--spacing--40);
  }
}

/* Bestellbestätigung (Pattern nextamed/vertrauen-nach-bestellung): die Schrittliste bleibt nah an
   der linken Kante des Kastens. Das Standardpolster von 40 px am ol frisst auf 390 px ein Zehntel
   der Textbreite; 24 px reichen fuer die Ziffern. */
:root :where(.nxm-nach-bestellung ol) {
  padding-left: var(--wp--preset--spacing--40);
}

/* Wie auf der Produktseite: breite Tabellen (Shopware-Import, Preislisten) rollen in sich.
   Ohne die Regel laeuft die ganze Seite auf dem Handy nach rechts. */
:root :where(.nxm-inhalt table) {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

/* Kontoseite: WooCommerce haelt seinen Kontobereich 1000 px breit und mittig
   (woocommerce-blocktheme.css: .woocommerce-account main .woocommerce { max-width: 1000px }).
   Die Hinweise darunter (nextamed/inhalt-konto) haengen an derselben linken Kante. Ohne diese
   Regel standen sie auf dem Desktop 100 px weiter links als das Anmeldeformular (gemessen am
   05.10.2026: x = 41 gegen x = 141), weil die Vorlage 75rem zulaesst. */
.woocommerce-account main .nxm-konto__wege {
  max-width: 1000px;
  margin-inline: auto;
}

/* Abgemeldet mit Registrierungsformular (P-405): WooCommerce stellt Anmeldung und Registrierung ab
   769 px nebeneinander, je 48 % breit (woocommerce-layout.css, .col2-set .col-1 und .col-2;
   darunter stapelt woocommerce-smallscreen.css). Die beiden Hinweise stehen dann genauso, jeder
   unter dem Formular, zu dem er gehoert: links die Altkunden unter der Anmeldung, rechts "Neu bei
   uns?" unter der Registrierung. Im Quelltext bleibt "Neu bei uns?" vorn, damit der Kasten auf dem
   Handy direkt unter dem Registrierungsformular steht; keiner der beiden Kaesten hat in dieser
   Lage ein Ziel fuer die Tastatur, die Reihenfolge der Tasten aendert sich also nicht.
   .wp-site-blocks davor, weil das Layout der Gruppe (constrained, 38rem, linksbuendig) seine
   Raender mit !important setzt. */
@media (min-width: 769px) {
  .wp-site-blocks .nxm-konto__wege--paar {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }

  .wp-site-blocks .nxm-konto__wege--paar > .nxm-konto__weg {
    flex: 0 0 48%;
    max-width: none;
    margin-block: 0;
    margin-inline: 0 !important;
  }

  .wp-site-blocks .nxm-konto__wege--paar > .nxm-konto__weg--neu {
    order: 2;
  }
}

/* Kontaktformular (Fluent Forms) im Kleid des Shops. Seit der Abnahme vom 05.10.2026 ist das
   Formular der erste Kontaktweg (P-402). Das Plugin bringt einen blauen Knopf, Felder mit blassem
   Rahmen und 13 px Schrift mit (gemessen auf Staging: Knopf rgb(26,126,251), Feld 40 px hoch,
   Rahmen #dadbdd, Schrift 13,3 px, Kaestchen 13 x 13 px). Farben und Radius haengen im Plugin an
   eigenen Variablen; die werden hier auf die Werte des Themes gestellt. Alles Weitere braucht
   echtes Gewicht statt :where(), weil das Plugin mit .ff-default .ff-el-form-control (0,2,0) und
   form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style) (0,3,1) setzt. */
.nxm-inhalt .fluentform {
  --fluentform-primary: var(--wp--preset--color--primary-dark);
  --fluentform-border-color: var(--wp--preset--color--line-strong);
  --fluentform-border-radius: var(--wp--custom--radius--small);
}

.nxm-inhalt .fluentform .ff-el-form-control {
  min-height: var(--wp--custom--touch--min-size);
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--contrast);
}

.wp-site-blocks .nxm-inhalt .fluentform .ff-el-form-control:focus-visible {
  border-color: var(--wp--preset--color--primary-dark);
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
  box-shadow: none;
}

.nxm-inhalt .fluentform .ff-el-input--label label {
  font-weight: 600;
}

.nxm-inhalt .fluentform input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--wp--preset--color--primary-dark);
}

/* Die Einwilligung ist im Plugin eine Tabelle: Kaestchen in der ersten Zelle, Text in der zweiten.
   Die Zelle ist so breit wie das Kaestchen; mit dem groesseren Kaestchen stiess der Text direkt
   daran (gemessen auf Staging am 05.10.2026). */
.nxm-inhalt .fluentform .ff_tc_checkbox {
  padding-right: var(--wp--preset--spacing--20);
}

.wp-site-blocks .nxm-inhalt .fluentform .ff-btn-submit {
  min-height: var(--wp--custom--button--min-height);
  padding: var(--wp--custom--button--padding-y) var(--wp--custom--button--padding-x);
  border-radius: var(--wp--custom--radius--small);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.2;
}

.wp-site-blocks .nxm-inhalt .fluentform .ff-btn-submit:hover {
  background-color: var(--wp--preset--color--primary-deep);
  opacity: 1;
}

.wp-site-blocks .nxm-inhalt .fluentform .ff-btn-submit:focus-visible {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}