/* NaturalMindful.Life - Bausteine
   Nutzt ausschließlich Variablen aus tokens.css. Keine JavaScript-Abhängigkeit.
   Farbwelt Wunderzwerg: Steinbeige und Waldgrün, Erdbraun und Mondgold als Akzent, feine Linien, Farbe sonst nur aus den Daten (DESIGN.md) */

/* Grundlage */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nm-farbe-grund);
  color: var(--nm-farbe-text);
  font-family: var(--nm-schrift-text);
  font-size: var(--nm-groesse-2);
  font-weight: var(--nm-gewicht-text);
  line-height: var(--nm-zeilenhoehe-text);
  font-variant-numeric: var(--nm-ziffern);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--nm-schrift-ueberschrift); font-weight: var(--nm-gewicht-ueberschrift); line-height: var(--nm-zeilenhoehe-ueberschrift); margin: 0; text-wrap: balance; font-variant-numeric: var(--nm-ziffern-wert); }
h1 { font-size: var(--nm-groesse-6); line-height: 0.98; letter-spacing: -0.025em; hyphens: auto; overflow-wrap: break-word; }
h2 { font-size: var(--nm-groesse-4); letter-spacing: -0.01em; }
h3 { font-size: var(--nm-groesse-3); }
p { margin: 0; max-width: var(--nm-text-breite); text-wrap: pretty; }
strong, b { font-weight: var(--nm-gewicht-stark); }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--nm-farbe-linie-stark); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: var(--nm-fokus-ring); outline-offset: var(--nm-fokus-abstand); }
::selection { background: color-mix(in oklab, var(--nm-farbe-akzent) 22%, var(--nm-farbe-grund)); color: var(--nm-farbe-text); }
.nm-leise { color: var(--nm-farbe-text-leise); font-size: var(--nm-groesse-1); }
.nm-unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nm-beschriftung { margin: 0; font-size: var(--nm-groesse-0); line-height: 1.4; font-weight: var(--nm-gewicht-stark); letter-spacing: var(--nm-sperrung); text-transform: uppercase; color: var(--nm-farbe-text-leise); font-variant-numeric: var(--nm-ziffern-wert); }

/* Seitenrahmen: Inhalt mittig, Linien und Flächen über die ganze Breite */
.nm-kopf, .nm-sprungnav, .nm-seite, .nm-fuss { padding-inline: max(var(--nm-abstand-seite), calc((100% - var(--nm-inhalt-breite)) / 2)); }
.nm-seite { padding-top: var(--nm-abstand-6); padding-bottom: var(--nm-abstand-8); display: flex; flex-direction: column; gap: var(--nm-abstand-abschnitt); }
.nm-abschnitt { display: flex; flex-direction: column; gap: var(--nm-abstand-4); scroll-margin-top: var(--nm-abstand-8); }

/* Sprunglink */
.nm-sprunglink { position: absolute; left: var(--nm-abstand-3); top: -100px; min-height: var(--nm-ziel-min); display: inline-flex; align-items: center; padding: 0 var(--nm-abstand-4); background: var(--nm-farbe-text); color: var(--nm-farbe-grund); text-decoration: none; z-index: 40; }
.nm-sprunglink:focus { top: var(--nm-abstand-3); }

/* Kopf */
.nm-kopf { position: relative; display: flex; align-items: center; gap: var(--nm-abstand-4) var(--nm-abstand-6); padding-block: var(--nm-abstand-4); border-bottom: var(--nm-linie) solid var(--nm-farbe-linie); min-height: 76px; background: var(--nm-farbe-grund); }
.nm-wortmarke { display: flex; align-items: center; gap: var(--nm-abstand-3); margin-right: auto; color: var(--nm-farbe-text); text-decoration: none; min-width: 0; flex-shrink: 0; }
.nm-wortmarke__figur { display: block; height: 3.5rem; flex: none; }
.nm-wortmarke__figur svg { display: block; height: 100%; width: auto; }
.nm-wortmarke__text { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.nm-wortmarke__name { font-family: var(--nm-schrift-marke); font-weight: 500; font-size: 1.75rem; line-height: 1; letter-spacing: -0.005em; }
.nm-wortmarke__untertitel { font-family: var(--nm-schrift-marke); font-size: 0.875rem; line-height: 1.2; color: var(--wz-claim); font-style: italic; }
.nm-hauptnav { display: flex; gap: var(--nm-abstand-1) var(--nm-abstand-6); }
.nm-hauptnav a { display: inline-flex; align-items: center; min-height: var(--nm-ziel-min); color: var(--nm-farbe-text-leise); text-decoration: none; }
.nm-hauptnav a:hover { color: var(--nm-farbe-text); }
.nm-hauptnav a[aria-current="page"] { color: var(--nm-farbe-text); box-shadow: inset 0 -1.5px 0 var(--nm-farbe-akzent); }
.nm-kopf .nm-ortssuche { width: 15rem; flex: 0 1 15rem; min-width: 9rem; }
@media (max-width: 1240px) { .nm-hauptnav { column-gap: var(--nm-abstand-4); } }

/* Kinderansicht: Link im Kopf, auf schmalen Bildschirmen im Menü */
.nm-ansicht { display: inline-flex; align-items: center; min-height: var(--nm-ziel-min); padding: 0 var(--nm-abstand-4); border: var(--nm-linie) solid var(--nm-farbe-akzent); border-radius: 999px; color: var(--nm-farbe-akzent); font-size: var(--nm-groesse-1); text-decoration: none; white-space: nowrap; flex: none; }
.nm-ansicht:hover { background: var(--nm-farbe-akzent); color: var(--nm-farbe-auf-akzent); }
.nm-mobilnav li:has(.nm-ansicht) { border-bottom: 0; padding-top: var(--nm-abstand-4); }

/* Hell oder dunkel */
.nm-modus { display: inline-flex; align-items: center; justify-content: center; width: var(--nm-ziel-min); height: var(--nm-ziel-min); padding: 0; margin-right: calc(var(--nm-abstand-3) * -1); border: 0; background: none; color: var(--nm-farbe-text-leise); cursor: pointer; flex: none; }
.nm-modus[hidden] { display: none; }
.nm-modus:hover { color: var(--nm-farbe-text); }
.nm-modus svg { width: 21px; height: 21px; }
.nm-modus .nm-modus__hell, .nm-modus[aria-pressed="true"] .nm-modus__dunkel { display: none; }
.nm-modus[aria-pressed="true"] .nm-modus__hell { display: block; }

/* Mobile Navigation: <details class="nm-mobilnav"><summary>Menü</summary> ... </details> */
.nm-mobilnav { display: none; }
@media (max-width: 1200px) {
  .nm-hauptnav, .nm-kopf > .nm-ortssuche, .nm-kopf > .nm-ansicht { display: none; }
  .nm-kopf { gap: var(--nm-abstand-2); min-height: 64px; padding-block: var(--nm-abstand-2); }
  .nm-wortmarke { gap: var(--nm-abstand-2); }
  .nm-wortmarke__figur { height: 2.75rem; }
  .nm-wortmarke__name { font-size: 1.5rem; }
  .nm-wortmarke__untertitel { font-size: 0.8125rem; }
  .nm-modus { margin-right: 0; }
  .nm-mobilnav { display: block; }
  .nm-mobilnav > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--nm-abstand-2); min-height: var(--nm-ziel-min); padding: 0 var(--nm-abstand-3); border: var(--nm-linie) solid var(--nm-farbe-linie-stark); border-radius: var(--nm-rundung); }
  .nm-mobilnav[open] > summary { border-color: var(--nm-farbe-text); }
  .nm-mobilnav > summary svg { width: 20px; height: 20px; flex: none; }
  .nm-mobilnav > summary::-webkit-details-marker { display: none; }
  .nm-mobilnav[open] > .nm-mobilnav__inhalt { position: absolute; left: 0; right: 0; top: 100%; background: var(--nm-farbe-grund); padding: var(--nm-abstand-4) var(--nm-abstand-seite) var(--nm-abstand-5); border-bottom: var(--nm-linie) solid var(--nm-farbe-linie); box-shadow: var(--nm-schatten-menue); display: flex; flex-direction: column; gap: var(--nm-abstand-4); z-index: 20; }
  .nm-mobilnav ul { list-style: none; margin: 0; padding: 0; }
  .nm-mobilnav li { border-bottom: var(--nm-linie) solid var(--nm-farbe-linie); }
  .nm-mobilnav li a:not(.nm-ansicht) { display: flex; justify-content: space-between; align-items: center; min-height: 52px; color: var(--nm-farbe-text); text-decoration: none; font-size: var(--nm-groesse-3); }
  .nm-mobilnav li a[aria-current="page"] { color: var(--nm-farbe-akzent); }
}
@media (max-width: 30rem) {
  .nm-mobilnav > summary { padding: 0 var(--nm-abstand-2); }
  .nm-mobilnav__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nm-wortmarke__untertitel { display: none; }
}

/* Sprungnavigation innerhalb der Seite */
.nm-sprungnav { display: flex; gap: 0 var(--nm-abstand-5); overflow-x: auto; white-space: nowrap; background: var(--nm-farbe-grund); border-bottom: var(--nm-linie) solid var(--nm-farbe-linie); position: sticky; top: 0; z-index: 5; scrollbar-width: none; }
.nm-sprungnav a { display: inline-flex; align-items: center; min-height: var(--nm-ziel-min); font-size: var(--nm-groesse-1); color: var(--nm-farbe-text-leise); text-decoration: none; }
.nm-sprungnav a:hover, .nm-sprungnav a[aria-current="true"] { color: var(--nm-farbe-text); }

/* Brotkrumen */
.nm-brotkrumen { font-size: var(--nm-groesse-1); color: var(--nm-farbe-text-leise); }
.nm-brotkrumen ol { display: flex; flex-wrap: wrap; gap: 0 var(--nm-abstand-2); margin: 0; padding: 0; list-style: none; }
.nm-brotkrumen li + li::before { content: "/"; margin-right: var(--nm-abstand-2); color: var(--nm-farbe-linie-stark); }
.nm-brotkrumen a { color: var(--nm-farbe-text-leise); text-decoration-color: var(--nm-farbe-linie); }
@media (pointer: coarse) { .nm-brotkrumen ol { align-items: center; } .nm-brotkrumen a { display: inline-flex; align-items: center; min-height: var(--nm-ziel-min); } }
.nm-brotkrumen [aria-current="page"] { color: var(--nm-farbe-text); }

/* Fuß */
.nm-fuss { border-top: var(--nm-linie) solid var(--nm-farbe-linie); padding-block: var(--nm-abstand-7) var(--nm-abstand-8); font-size: var(--nm-groesse-1); background: var(--nm-farbe-flaeche); }
.nm-fuss__innen { display: grid; grid-template-columns: minmax(14rem, 1.6fr) repeat(3, minmax(9rem, 1fr)); gap: var(--nm-abstand-6); }
.nm-fuss__marke { display: flex; flex-direction: column; gap: var(--nm-abstand-2); }
.nm-fuss__marke p { color: var(--wz-claim); font-family: var(--nm-schrift-marke); font-style: italic; }
.nm-fuss__spalte { display: flex; flex-direction: column; gap: var(--nm-abstand-2); }
.nm-fuss__spalte .nm-beschriftung { margin-bottom: var(--nm-abstand-1); }
.nm-fuss__spalte a { text-decoration: none; color: var(--nm-farbe-text); }
.nm-fuss__spalte a:hover { text-decoration: underline; }
@media (max-width: 860px) { .nm-fuss__innen { grid-template-columns: 1fr 1fr; } .nm-fuss__marke { grid-column: 1 / -1; } }

/* Buttons */
.nm-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--nm-abstand-2); min-height: var(--nm-ziel-min); padding: 0 var(--nm-abstand-5); border: var(--nm-linie) solid var(--nm-farbe-text); border-radius: var(--nm-rundung); background: var(--nm-farbe-text); color: var(--nm-farbe-grund); font: inherit; font-size: var(--nm-groesse-2); text-decoration: none; cursor: pointer; }
.nm-button:hover { background: color-mix(in oklab, var(--nm-farbe-text) 85%, var(--nm-farbe-grund)); }
.nm-button--zweit { background: transparent; color: var(--nm-farbe-text); }
.nm-button--zweit:hover { background: var(--nm-farbe-flaeche); }
.nm-button--ruhig { background: transparent; border-color: transparent; color: var(--nm-farbe-text); padding: 0 var(--nm-abstand-3); text-decoration: underline; text-decoration-color: var(--nm-farbe-linie-stark); text-underline-offset: 0.22em; }
.nm-button--ruhig:hover { background: var(--nm-farbe-flaeche); }
.nm-button:disabled, .nm-button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.nm-button svg { width: 20px; height: 20px; flex: none; }

/* Formulare */
.nm-feld { display: flex; flex-direction: column; gap: var(--nm-abstand-2); }
.nm-feld > label, .nm-feld > legend { font-weight: var(--nm-gewicht-stark); padding: 0; }
.nm-feld__einheit { font-weight: var(--nm-gewicht-text); color: var(--nm-farbe-text-leise); }
.nm-feld__hilfe { font-size: var(--nm-groesse-1); color: var(--nm-farbe-text-leise); }
.nm-feld__fehler { font-size: var(--nm-groesse-1); color: var(--nm-farbe-warnung); font-weight: var(--nm-gewicht-stark); display: flex; gap: 6px; align-items: flex-start; }
.nm-eingabe, .nm-auswahl { width: 100%; min-height: var(--nm-ziel-min); padding: 0 var(--nm-abstand-3); border: var(--nm-linie) solid var(--nm-farbe-linie-stark); border-radius: var(--nm-rundung); background: var(--nm-farbe-grund); color: var(--nm-farbe-text); font: inherit; }
.nm-eingabe:focus-visible, .nm-auswahl:focus-visible { border-color: var(--nm-farbe-text); }
.nm-eingabe[aria-invalid="true"] { border-color: var(--nm-farbe-warnung); }
.nm-eingabe:disabled, .nm-auswahl:disabled { opacity: 0.45; background: var(--nm-farbe-flaeche); cursor: not-allowed; }
.nm-auswahl { appearance: none; padding-right: var(--nm-abstand-7); background-image: var(--nm-bild-aufklappen); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
.nm-wahl { display: flex; gap: var(--nm-abstand-3); align-items: center; min-height: var(--nm-ziel-min); cursor: pointer; }
.nm-wahl input { width: 20px; height: 20px; margin: 0; accent-color: var(--nm-farbe-text); flex: none; }
.nm-wahl:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.nm-regler { width: 100%; height: var(--nm-ziel-min); margin: 0; accent-color: var(--nm-farbe-text); }
fieldset.nm-feld { border: 0; margin: 0; padding: 0; gap: var(--nm-abstand-1); }

/* Ortssuche: Linie statt Kasten, Pfeil zum Absenden */
.nm-ortssuche { position: relative; display: flex; align-items: center; gap: var(--nm-abstand-2); border-bottom: var(--nm-linie-stark) solid var(--nm-farbe-text); }
.nm-ortssuche:focus-within { outline: var(--nm-fokus-ring); outline-offset: var(--nm-fokus-abstand); }
.nm-ortssuche input { flex: 1; min-width: 0; min-height: var(--nm-ziel-min); padding: 0; border: 0; background: transparent; font: inherit; font-size: var(--nm-groesse-2); color: inherit; }
.nm-ortssuche input::placeholder { color: var(--nm-farbe-text-leise); opacity: 1; }
.nm-ortssuche input:focus { outline: none; }
.nm-ortssuche input::-webkit-search-cancel-button { display: none; }
.nm-ortssuche button { display: inline-flex; align-items: center; justify-content: center; width: var(--nm-ziel-min); height: var(--nm-ziel-min); margin-right: calc(var(--nm-abstand-2) * -1); padding: 0; border: 0; background: none; color: var(--nm-farbe-text); cursor: pointer; flex: none; }
.nm-ortssuche button svg { width: 22px; height: 22px; transition: transform 0.15s ease; }
.nm-ortssuche button:hover svg { transform: translateX(3px); }
.nm-ortssuche--gross { max-width: 28rem; border-bottom-width: 2px; }
.nm-ortssuche--gross input { font-size: var(--nm-groesse-3); min-height: 60px; }
.nm-vorschlaege { position: absolute; left: 0; right: 0; top: calc(100% + var(--nm-abstand-2)); list-style: none; margin: 0; padding: var(--nm-abstand-1) 0; border: var(--nm-linie) solid var(--nm-farbe-linie); background: var(--nm-farbe-grund); box-shadow: var(--nm-schatten-menue); z-index: 30; }
.nm-vorschlaege li { display: flex; justify-content: space-between; gap: var(--nm-abstand-3); padding: var(--nm-abstand-3) var(--nm-abstand-4); cursor: pointer; }
.nm-vorschlaege li[aria-selected="true"], .nm-vorschlaege li:hover { background: var(--nm-farbe-flaeche); }
.nm-vorschlaege mark { background: none; color: inherit; font-weight: var(--nm-gewicht-stark); }
.nm-vorschlaege small { color: var(--nm-farbe-text-leise); font-size: var(--nm-groesse-1); }

/* Kopf einer Ortsseite: links die Antworten, rechts der Jahresring */
.nm-held { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--nm-abstand-6) var(--nm-abstand-8); align-items: center; padding-top: var(--nm-abstand-5); }
.nm-held--schmal { grid-template-columns: minmax(0, 1fr); }
.nm-held__text { display: flex; flex-direction: column; min-width: 0; }
.nm-held h1 { margin: var(--nm-abstand-4) 0 var(--nm-abstand-3); overflow-wrap: anywhere; hyphens: auto; }
.nm-held__meta { color: var(--nm-farbe-text-leise); font-size: var(--nm-groesse-1); margin-bottom: var(--nm-abstand-5); }
.nm-held__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nm-abstand-2) var(--nm-abstand-5); margin-top: var(--nm-abstand-5); font-size: var(--nm-groesse-1); color: var(--nm-farbe-text-leise); }
.nm-held__ring { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--nm-abstand-3); }
.nm-held__ring figcaption { display: flex; flex-direction: column; align-items: center; gap: var(--nm-abstand-1); text-align: center; }
.nm-held__ring .nm-legende { justify-content: center; }
@media (max-width: 960px) { .nm-held { grid-template-columns: minmax(0, 1fr); } .nm-held__ring { max-width: 34rem; width: 100%; justify-self: center; } }

/* Heute: eine Zeile, was gerade dran ist */
.nm-heute { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--nm-abstand-1) var(--nm-abstand-4); align-items: baseline; padding-block: var(--nm-abstand-4); border-top: var(--nm-linie-stark) solid var(--nm-farbe-text); border-bottom: var(--nm-linie) solid var(--nm-farbe-linie); font-size: var(--nm-groesse-2); max-width: none; }
.nm-heute strong { color: var(--nm-farbe-akzent); white-space: nowrap; }
.nm-heute__zwerg { grid-column: 3; grid-row: 1; align-self: center; height: 4.5rem; width: auto; }
.nm-heute:has(.nm-heute__zwerg) { grid-template-columns: auto minmax(0, 1fr) auto; }
@media (max-width: 30rem) {
  .nm-heute, .nm-heute:has(.nm-heute__zwerg) { grid-template-columns: minmax(0, 1fr) auto; }
  .nm-heute__zwerg { grid-column: 2; grid-row: 1 / span 2; height: 4rem; }
}

/* Antworten unter "Heute" */
.nm-antworten { margin: 0; }
.nm-antwort { display: flex; flex-direction: column; gap: var(--nm-abstand-1); padding-block: var(--nm-abstand-4) var(--nm-abstand-5); border-bottom: var(--nm-linie) solid var(--nm-farbe-linie); }
.nm-antwort dd { margin: 0; }
.nm-antwort__wert { font-size: var(--nm-groesse-5); line-height: 1.1; font-weight: var(--nm-gewicht-ueberschrift); letter-spacing: -0.01em; font-variant-numeric: var(--nm-ziffern-wert); }
.nm-antwort__notiz { color: var(--nm-farbe-text-leise); font-size: var(--nm-groesse-1); max-width: 46ch; }
.nm-antwort__notiz .nm-wert--frost { color: inherit; }

/* Jahresring */
.nm-ring { width: 100%; max-width: 520px; height: auto; display: block; overflow: visible; }
.nm-ring path, .nm-ring line { fill: none; }
.nm-ring__monat { font-size: 13px; font-weight: var(--nm-gewicht-stark); letter-spacing: 0.06em; text-transform: uppercase; fill: var(--nm-farbe-text-leise); text-anchor: middle; dominant-baseline: middle; }
.nm-ring__zahl { font-size: 84px; font-weight: var(--nm-gewicht-ueberschrift); fill: var(--nm-farbe-text); text-anchor: middle; font-variant-numeric: var(--nm-ziffern-wert); letter-spacing: -0.02em; }
.nm-ring__text { font-size: 18px; fill: var(--nm-farbe-text-leise); text-anchor: middle; }

/* Kapitel: Titel links in schmaler Spalte, Inhalt rechts */
.nm-kapitel { display: grid; grid-template-columns: var(--nm-randspalte) minmax(0, 1fr); gap: var(--nm-abstand-5) var(--nm-abstand-8); padding-top: var(--nm-abstand-7); border-top: var(--nm-linie) solid var(--nm-farbe-linie); scroll-margin-top: var(--nm-abstand-7); }
.nm-kapitel__kopf { display: flex; flex-direction: column; gap: var(--nm-abstand-3); align-self: start; }
.nm-kapitel__einleitung { color: var(--nm-farbe-text-leise); font-size: var(--nm-groesse-1); }
.nm-kapitel__inhalt { display: flex; flex-direction: column; gap: var(--nm-abstand-5); min-width: 0; }
.nm-kapitel__zwerg { display: block; width: auto; height: 11rem; margin-top: var(--nm-abstand-3); }
.nm-titel__zwerg { display: block; width: auto; height: 9rem; }
@media (max-width: 960px) {
  .nm-kapitel { grid-template-columns: minmax(0, 1fr); padding-top: var(--nm-abstand-6); }
  .nm-kapitel__kopf:has(.nm-kapitel__zwerg) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--nm-abstand-4); }
  .nm-kapitel__kopf > :not(.nm-kapitel__zwerg) { grid-column: 1; }
  .nm-kapitel__zwerg { grid-column: 2; grid-row: 1 / span 3; height: 6.5rem; margin-top: 0; }
}

/* Aufklappbares, vor allem Tabellen */
.nm-aufklappen { border-top: var(--nm-linie) solid var(--nm-farbe-linie); border-bottom: var(--nm-linie) solid var(--nm-farbe-linie); }
.nm-aufklappen > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: var(--nm-ziel-min); font-size: var(--nm-groesse-1); color: var(--nm-farbe-text-leise); }
.nm-aufklappen > summary::-webkit-details-marker { display: none; }
.nm-aufklappen > summary::after { content: ""; width: 20px; height: 20px; background: var(--nm-bild-aufklappen) no-repeat center / 20px; transition: transform 0.15s ease; }
.nm-aufklappen[open] > summary::after { transform: rotate(180deg); }
.nm-aufklappen > summary:hover { color: var(--nm-farbe-text); }
.nm-aufklappen[open] > summary { margin-bottom: var(--nm-abstand-3); }
.nm-aufklappen[open] { padding-bottom: var(--nm-abstand-4); }

/* Bedeutungsfarben für Text: <span class="nm-wert nm-wert--frost"> */
.nm-wert--frost { color: var(--nm-farbe-frost); }
.nm-wert--waerme { color: var(--nm-farbe-waerme); }
.nm-wert--wasser { color: var(--nm-farbe-wasser); }
.nm-wert--mond { color: var(--nm-farbe-mond); }
.nm-wert--wachstum { color: var(--nm-farbe-wachstum); }
.nm-wert--ernte { color: var(--nm-farbe-ernte); }

/* Kennzahlen: große Zahl über feiner Linie */
.nm-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0 var(--nm-abstand-6); margin: 0; }
.nm-kennzahl { display: flex; flex-direction: column; gap: var(--nm-abstand-1); padding-block: var(--nm-abstand-4); border-top: var(--nm-linie) solid var(--nm-farbe-text); }
.nm-kennzahl dt, .nm-kennzahl dd { margin: 0; }
.nm-kennzahl__titel { font-size: var(--nm-groesse-1); color: var(--nm-farbe-text-leise); }
.nm-kennzahl__wert { font-size: var(--nm-groesse-4); line-height: 1.1; font-weight: var(--nm-gewicht-ueberschrift); font-variant-numeric: var(--nm-ziffern-wert); }
.nm-kennzahl__wert--mond { display: flex; align-items: center; gap: var(--nm-abstand-2); }
.nm-kennzahl__wert--mond .nm-symbol { width: 0.9em; height: 0.9em; }
.nm-vergleich { font-size: var(--nm-groesse-1); color: var(--nm-farbe-text-leise); }

/* Sicherheitsstufe: <span class="nm-sicherheit" data-stufe="2"><i></i><i></i><i></i>Sicherheit mittel</span> */
.nm-sicherheit { display: inline-flex; align-items: center; gap: 3px; }
.nm-sicherheit i { display: inline-block; width: 4px; height: 12px; background: var(--nm-farbe-linie); }
.nm-sicherheit i:last-of-type { margin-right: var(--nm-abstand-2); }
.nm-sicherheit[data-stufe="3"] i, .nm-sicherheit[data-stufe="2"] i:nth-of-type(-n+2), .nm-sicherheit[data-stufe="1"] i:first-of-type { background: var(--nm-farbe-text-leise); }

/* Hinweise */
.nm-hinweis { display: flex; gap: var(--nm-abstand-3); padding: var(--nm-abstand-4) 0; border-top: var(--nm-linie-stark) solid var(--nm-farbe-text); max-width: 46rem; }
.nm-hinweis > svg { width: 22px; height: 22px; flex: none; margin-top: 3px; }
.nm-hinweis--warnung { border-top-color: var(--nm-farbe-warnung); }
.nm-hinweis--warnung > svg, .nm-hinweis--warnung strong { color: var(--nm-farbe-warnung); }

/* Empfehlung (Werbung) - ohne Preise, ohne Sterne */
.nm-empfehlung { display: flex; flex-direction: column; gap: var(--nm-abstand-2); padding: var(--nm-abstand-4) 0 var(--nm-abstand-5); border-top: var(--nm-linie) dashed var(--nm-farbe-werbung); border-bottom: var(--nm-linie) dashed var(--nm-farbe-werbung); max-width: 44rem; }
.nm-empfehlung__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nm-abstand-1) var(--nm-abstand-4); }
.nm-marke-werbung { font-size: var(--nm-groesse-0); font-weight: var(--nm-gewicht-stark); letter-spacing: var(--nm-sperrung); text-transform: uppercase; color: var(--nm-farbe-werbung); }
.nm-empfehlung__titel { font-size: var(--nm-groesse-3); line-height: 1.25; }
.nm-empfehlung__link { align-self: flex-start; }

/* Tabellen */
.nm-tabelle-rahmen { margin: 0; display: flex; flex-direction: column; gap: var(--nm-abstand-2); min-width: 0; }
.nm-tabelle-rahmen > div { overflow-x: auto; }
.nm-tabelle-rahmen figcaption { font-size: var(--nm-groesse-1); font-weight: var(--nm-gewicht-stark); }
.nm-tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: var(--nm-ziffern-tabelle); font-size: var(--nm-groesse-1); }
.nm-tabelle th { text-align: left; font-weight: var(--nm-gewicht-stark); font-size: var(--nm-groesse-0); letter-spacing: 0.03em; color: var(--nm-farbe-text-leise); padding: var(--nm-abstand-2) var(--nm-abstand-4) var(--nm-abstand-2) 0; border-bottom: var(--nm-linie) solid var(--nm-farbe-text); vertical-align: bottom; }
.nm-tabelle td { padding: var(--nm-abstand-2) var(--nm-abstand-4) var(--nm-abstand-2) 0; border-bottom: var(--nm-linie) solid var(--nm-farbe-linie); }
.nm-tabelle th[scope="row"] { color: var(--nm-farbe-text); border-bottom: var(--nm-linie) solid var(--nm-farbe-linie); font-size: var(--nm-groesse-1); font-weight: var(--nm-gewicht-text); letter-spacing: 0; vertical-align: middle; }
.nm-tabelle .nm-zahl { text-align: right; white-space: nowrap; }
.nm-tabelle tr > :last-child { padding-right: 0; }
.nm-tabelle th[scope="row"] a { display: inline-flex; align-items: center; min-height: var(--nm-ziel-min); }
.nm-quelle { font-size: var(--nm-groesse-1); color: var(--nm-farbe-text-leise); }
.nm-quelle a { color: var(--nm-farbe-text-leise); }
.nm-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.nm-liste li { padding-block: var(--nm-abstand-2); border-bottom: var(--nm-linie) solid var(--nm-farbe-linie); }

/* Ortsliste */
.nm-ortsliste { list-style: none; margin: 0; padding: 0; columns: 3 14rem; column-gap: var(--nm-abstand-7); }
.nm-ortsliste li { break-inside: avoid; border-bottom: var(--nm-linie) solid var(--nm-farbe-linie); }
.nm-ortsliste a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--nm-abstand-3); padding-block: var(--nm-abstand-3); min-height: var(--nm-ziel-min); color: var(--nm-farbe-text); text-decoration: none; }
.nm-ortsliste a:hover { text-decoration: underline; }
.nm-ortsliste small { color: var(--nm-farbe-text-leise); font-size: var(--nm-groesse-1); white-space: nowrap; }

/* Seitenkopf für Übersichten, Hubs und Regelseiten */
.nm-titel { display: flex; flex-direction: column; gap: var(--nm-abstand-4); padding-top: var(--nm-abstand-5); }
.nm-titel h1 { margin-top: var(--nm-abstand-2); }
.nm-titel__satz { font-size: var(--nm-groesse-3); line-height: 1.45; max-width: 40ch; }

/* Startseite */
.nm-start { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--nm-abstand-6) var(--nm-abstand-8); align-items: center; padding-top: var(--nm-abstand-6); }
.nm-start h1 { font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem); line-height: 1.02; margin-bottom: var(--nm-abstand-5); }
.nm-start__satz { color: var(--nm-farbe-text-leise); max-width: 40ch; margin-bottom: var(--nm-abstand-6); }
.nm-start__karte { margin: 0; }
@media (max-width: 960px) { .nm-start { grid-template-columns: minmax(0, 1fr); } }
.nm-karte { width: 100%; height: auto; display: block; overflow: visible; }
.nm-karte path { fill: none; stroke-linecap: round; stroke-width: 7.5px; }
.nm-karte__frost { stroke: var(--nm-farbe-frost); }
.nm-karte__frei { stroke: color-mix(in oklab, var(--nm-farbe-frei) 75%, var(--nm-farbe-grund)); }
.nm-karte__leer { stroke: var(--nm-farbe-linie); }
.nm-karte__stadt { fill: var(--nm-farbe-grund); stroke: var(--nm-farbe-text); stroke-width: 1.5px; }
.nm-karte__name { font-size: 17px; fill: var(--nm-farbe-text); paint-order: stroke; stroke: var(--nm-farbe-grund); stroke-width: 4px; stroke-linejoin: round; }
.nm-lage { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--nm-abstand-3) var(--nm-abstand-6); padding-top: var(--nm-abstand-4); border-top: var(--nm-linie-stark) solid var(--nm-farbe-text); }
.nm-lage__zwerg { height: 5.5rem; width: auto; flex: none; align-self: center; }
.nm-lage:has(.nm-lage__zwerg) { justify-content: flex-start; }
.nm-lage:has(.nm-lage__zwerg) .nm-legende { margin-left: auto; }
.nm-lage__satz { font-size: var(--nm-groesse-4); line-height: 1.25; font-weight: var(--nm-gewicht-ueberschrift); max-width: 32ch; }
.nm-lage__satz b { color: var(--nm-farbe-frost); font-weight: var(--nm-gewicht-stark); }
.nm-anteil { display: inline-block; width: 4.5rem; height: 4px; margin-right: var(--nm-abstand-2); vertical-align: middle; background: var(--nm-farbe-linie); }
.nm-anteil__balken { display: block; height: 100%; background: var(--nm-farbe-frost); }
.nm-laender { list-style: none; margin: 0; padding: 0; columns: 2 17rem; column-gap: var(--nm-abstand-7); }
.nm-laender li { break-inside: avoid; border-bottom: var(--nm-linie) solid var(--nm-farbe-linie); }
.nm-laender a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--nm-abstand-3); align-items: baseline; padding-block: var(--nm-abstand-3); text-decoration: none; color: var(--nm-farbe-text); }
.nm-laender a:hover .nm-laender__name { text-decoration: underline; }
.nm-laender__name { font-size: var(--nm-groesse-3); }
.nm-laender__zahl { font-size: var(--nm-groesse-1); color: var(--nm-farbe-text-leise); white-space: nowrap; font-variant-numeric: var(--nm-ziffern-tabelle); }
.nm-laender__frost { grid-column: 1 / -1; font-size: var(--nm-groesse-1); color: var(--nm-farbe-text-leise); }
.nm-regelliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0 var(--nm-abstand-6); }
.nm-regelliste li { display: flex; flex-direction: column; gap: var(--nm-abstand-2); padding-block: var(--nm-abstand-4); border-top: var(--nm-linie) solid var(--nm-farbe-text); }
.nm-regelliste a { font-family: var(--nm-schrift-ueberschrift); font-size: var(--nm-groesse-3); text-decoration: none; }
.nm-regelliste a:hover { text-decoration: underline; }
.nm-regelliste span { color: var(--nm-farbe-text-leise); font-size: var(--nm-groesse-1); }

/* Bauernregeln */
.nm-regeln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--nm-abstand-6); }
.nm-regel { display: flex; flex-direction: column; gap: var(--nm-abstand-3); }
.nm-regel h2, .nm-regel h3 { font-size: var(--nm-groesse-3); }
.nm-regel h2 a, .nm-regel h3 a { text-decoration: none; }
.nm-regel h2 a:hover, .nm-regel h3 a:hover { text-decoration: underline; }
.nm-regel blockquote { margin: 0; font-style: italic; color: var(--nm-farbe-text-leise); font-size: var(--nm-groesse-1); line-height: 1.5; }
.nm-regel__ergebnis { font-size: var(--nm-groesse-4); line-height: 1.1; font-weight: var(--nm-gewicht-ueberschrift); font-variant-numeric: var(--nm-ziffern-wert); }
.nm-regel__urteil { font-weight: var(--nm-gewicht-stark); }
.nm-regel__text { font-size: var(--nm-groesse-1); color: var(--nm-farbe-text-leise); }
.nm-regel__text strong { color: var(--nm-farbe-text); }
.nm-regel > .nm-ortssuche { max-width: 28rem; }
.nm-punkte { display: flex; flex-wrap: wrap; gap: 5px; max-width: 13.5rem; padding-block: var(--nm-abstand-1); }
.nm-punkte i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--nm-farbe-text-leise); }
.nm-punkte .nm-punkte__ja { background: var(--nm-farbe-wachstum); box-shadow: none; }
.nm-wortlaut { margin: 0; display: flex; flex-direction: column; gap: var(--nm-abstand-1); }
.nm-wortlaut blockquote { margin: 0; font-size: var(--nm-groesse-4); line-height: 1.3; font-style: italic; max-width: 30ch; }
.nm-regel-kopf { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--nm-abstand-6) var(--nm-abstand-8); align-items: end; padding-top: var(--nm-abstand-5); }
.nm-regel-kopf__zahl { display: flex; flex-direction: column; gap: var(--nm-abstand-2); padding-top: var(--nm-abstand-4); border-top: var(--nm-linie-stark) solid var(--nm-farbe-text); }
.nm-regel-kopf__quote { font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem); line-height: 1; font-weight: var(--nm-gewicht-ueberschrift); letter-spacing: -0.02em; font-variant-numeric: var(--nm-ziffern-wert); }
@media (max-width: 960px) { .nm-regel-kopf { grid-template-columns: minmax(0, 1fr); } }

/* Mondphasen */
.nm-phasen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 0 var(--nm-abstand-5); }
.nm-phasen li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--nm-abstand-2); align-items: center; padding-block: var(--nm-abstand-3); border-top: var(--nm-linie) solid var(--nm-farbe-linie); }
.nm-phasen .nm-symbol { grid-row: span 2; width: 22px; height: 22px; }
.nm-phasen time { font-size: var(--nm-groesse-1); color: var(--nm-farbe-text-leise); font-variant-numeric: var(--nm-ziffern-wert); }

/* Kultur-Steckbrief */
.nm-steckbrief { display: flex; flex-direction: column; gap: var(--nm-abstand-3); padding-block: var(--nm-abstand-4); border-top: var(--nm-linie-stark) solid var(--nm-farbe-text); }
.nm-steckbrief__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--nm-abstand-3); }
.nm-steckbrief__name { font-family: var(--nm-schrift-ueberschrift); font-weight: var(--nm-gewicht-ueberschrift); font-size: var(--nm-groesse-4); line-height: 1.1; }
.nm-steckbrief__latein { font-size: var(--nm-groesse-1); color: var(--nm-farbe-text-leise); font-style: italic; }
.nm-steckbrief dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--nm-abstand-2) var(--nm-abstand-4); }
.nm-steckbrief dt { color: var(--nm-farbe-text-leise); display: flex; gap: 6px; align-items: center; }
.nm-steckbrief dd { margin: 0; }

/* Mischkultur-Matrix: Zellen tragen Zeichen + title + versteckten Text */
.nm-mischkultur { border-collapse: collapse; text-align: center; font-size: var(--nm-groesse-1); }
.nm-mischkultur th { padding: var(--nm-abstand-2); font-weight: var(--nm-gewicht-stark); min-width: 3.6rem; }
.nm-mischkultur th[scope="row"] { text-align: left; padding-left: 0; border-top: var(--nm-linie) solid var(--nm-farbe-linie); }
.nm-mischkultur td { padding: var(--nm-abstand-2); border-top: var(--nm-linie) solid var(--nm-farbe-linie); border-left: var(--nm-linie) solid var(--nm-farbe-linie); font-size: var(--nm-groesse-3); font-weight: var(--nm-gewicht-stark); line-height: 1; }
.nm-mischkultur .nm-gut { color: var(--nm-farbe-wachstum); }
.nm-mischkultur .nm-schlecht { color: var(--nm-farbe-warnung); }
.nm-mischkultur .nm-neutral { color: var(--nm-farbe-text-leise); }
.nm-mischkultur .nm-selbst { background: var(--nm-farbe-flaeche); }

/* Symbole */
.nm-symbol { width: 24px; height: 24px; flex: none; vertical-align: -0.2em; }
.nm-symbol--frost { color: var(--nm-farbe-frost); }
.nm-symbol--mond { color: var(--nm-farbe-mond); }

/* Diagramme */
.nm-diagramm { margin: 0; display: flex; flex-direction: column; gap: var(--nm-abstand-3); }
.nm-diagramm svg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--nm-schrift-text); font-variant-numeric: var(--nm-ziffern-tabelle); }
.nm-legende { display: flex; flex-wrap: wrap; gap: var(--nm-abstand-1) var(--nm-abstand-5); font-size: var(--nm-groesse-1); color: var(--nm-farbe-text-leise); align-items: center; }
.nm-legende__punkt { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; background: var(--nm-punkt, var(--nm-farbe-text)); vertical-align: 0; }
.nm-legende__punkt--eckig { border-radius: 0; }
.nm-legende__linie { display: inline-block; width: 18px; height: 0; margin-right: 7px; border-top: 2.5px solid var(--nm-punkt, var(--nm-farbe-text)); vertical-align: 0.3em; }
.nm-legende__linie--gepunktet { border-top: 2.5px dotted var(--nm-farbe-linie-stark); }
.nm-legende__muster { display: inline-block; width: 18px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.nm-legende .nm-legende__muster { display: inline-block; width: 18px; min-width: 0; height: 12px; }
.nm-jetzt h3 { font-size: var(--nm-groesse-3); margin-bottom: var(--nm-abstand-2); }
.nm-jetzt ul { list-style: none; margin: 0; padding: 0; }
.nm-jetzt li { display: flex; gap: var(--nm-abstand-3); padding-block: var(--nm-abstand-2); border-top: var(--nm-linie) solid var(--nm-farbe-linie); }
.nm-jetzt li > svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--nm-farbe-wachstum); }

/* Zustände */
.nm-zustand { display: flex; flex-direction: column; gap: var(--nm-abstand-3); padding: var(--nm-abstand-4) 0; border-top: var(--nm-linie) solid var(--nm-farbe-linie-stark); border-bottom: var(--nm-linie) solid var(--nm-farbe-linie); }
.nm-zustand--leer { border-top-style: dashed; }
.nm-zustand--fehler { border-top: var(--nm-linie-stark) solid var(--nm-farbe-warnung); }
.nm-zustand--fehler > strong { color: var(--nm-farbe-warnung); display: flex; gap: var(--nm-abstand-2); align-items: center; }
.nm-zustand--keine-daten { color: var(--nm-farbe-text-leise); }
.nm-platzhalter { display: block; height: 16px; background: var(--nm-farbe-flaeche); }
.nm-platzhalter--gross { height: 34px; }

@media (max-width: 22rem) {
  .nm-nur-breit { display: none; }
}

/* Druck: schwarz-weiß tauglich */
@media print {
  :root { --nm-farbe-grund: #fff; --nm-farbe-flaeche: #fff; --nm-farbe-text: #000; --nm-farbe-text-leise: #333; --nm-farbe-linie: #999; --nm-farbe-linie-stark: #000; }
  .nm-kopf .nm-hauptnav, .nm-ortssuche, .nm-sprungnav, .nm-mobilnav, .nm-modus, .nm-empfehlung, .nm-sprunglink { display: none !important; }
  a { color: inherit; text-decoration: none; }
  .nm-kapitel, .nm-diagramm, .nm-tabelle-rahmen { break-inside: avoid; }
  .nm-aufklappen > summary { display: none; }
  .nm-aufklappen:not([open]) > :not(summary) { display: block; }
}

/* Schmale Bildschirme: Diagramme behalten lesbare Schrift und scrollen in sich */
@media (max-width: 40rem) {
  .nm-diagramm { overflow-x: auto; overscroll-behavior-x: contain; }
  .nm-diagramm svg { min-width: 34rem; }
  .nm-diagramm figcaption { position: sticky; left: 0; }
}
.nm-diagramm--schmal svg { max-width: 46rem; }
.nm-regel--karte { padding-top: var(--nm-abstand-4); border-top: var(--nm-linie-stark) solid var(--nm-farbe-text); }
.nm-regel--karte h2 { font-size: var(--nm-groesse-4); }
.nm-regel-kopf__zahl label { color: var(--nm-farbe-text-leise); font-size: var(--nm-groesse-1); }

/* Wunderzwerg auf normalen Seiten, Kurzcode [wunderzwerg] */
.nm-zwerg-bild { margin: var(--nm-abstand-5) 0; }
.nm-zwerg-bild svg { display: block; height: 10rem; width: auto; }
@media print { .nm-kapitel__zwerg, .nm-titel__zwerg, .nm-ansicht { display: none !important; } }