/* ==========================================================================
   notengebung.de – Bausteine. Liest nur Variablen aus tokens.css.
   Neue Bausteine: erst in styleguide.html zeigen, dann verwenden.
   ========================================================================== */

/* ── Grundlagen ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ng-papier); color: var(--ng-text);
  font-family: var(--ng-schrift-text); font-size: var(--ng-groesse); line-height: var(--ng-zeile);
}
a { color: var(--ng-tinte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ng-rotstift); }
:focus-visible { outline: 2px solid var(--ng-tinte); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--ng-schrift-titel); font-weight: var(--ng-titel-gewicht); color: var(--ng-tinte); line-height: 1.2; margin: 0; }
h1 { font-size: clamp(30px, 5vw, 42px); margin-bottom: 20px; }
h2 { font-size: clamp(22px, 3vw, 28px); margin: 48px 0 14px; }
h2::before { content: ""; display: block; width: 28px; height: var(--ng-randlinie); background: var(--ng-rotstift); opacity: .8; margin-bottom: 14px; }
h3 { font-size: 20px; font-weight: 400; margin: 32px 0 8px; }
p, ul, ol { margin: 0 0 18px; }
li { margin-bottom: 6px; }
strong { font-weight: 700; }

/* ── Seitenrahmen ───────────────────────────────────────────────────────── */
.ng-kopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; padding: 22px max(var(--ng-abstand), calc((100% - var(--ng-breite)) / 2 + var(--ng-abstand))); border-bottom: 3px double var(--ng-linie); }
.ng-marke { font-family: var(--ng-schrift-titel); font-weight: 600; font-size: 20px; color: var(--ng-tinte); text-decoration: none; letter-spacing: -.01em; }
.ng-marke span { color: var(--ng-rotstift); }
.ng-marke img { display: inline-block; width: 36px; height: 24px; vertical-align: -3px; margin-right: 8px; }   /* Zeichen: design/zeichen.svg */
.ng-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-family: var(--ng-schrift-titel); font-size: 14px; }
.ng-nav a { color: var(--ng-gedaempft); text-decoration: none; }
.ng-nav a[aria-current="page"] { color: var(--ng-tinte); text-decoration: underline; text-decoration-color: var(--ng-rotstift); }
.ng-inhalt { max-width: var(--ng-mass); margin: 0 auto; padding: 40px var(--ng-abstand) 56px; }
.ng-breit { max-width: var(--ng-breite); margin: 0 auto; padding: 40px var(--ng-abstand) 56px; }
.ng-breit > article > p, .ng-breit > article > .ng-hinweis, .ng-breit .ng-lead { max-width: var(--ng-mass); }
.ng-fuss { background: var(--ng-flaeche); border-top: 3px double var(--ng-linie); font-family: var(--ng-schrift-titel); font-size: 14px; color: var(--ng-gedaempft); }
.ng-fuss a { color: var(--ng-gedaempft); }
.ng-fuss a:hover { color: var(--ng-rotstift); }
.ng-fuss-spalten { max-width: var(--ng-breite); margin: 0 auto; padding: 40px var(--ng-abstand) 20px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.ng-fuss-spalten p { margin: 0 0 8px; }
.ng-fuss-spalten ul { list-style: none; padding: 0; margin: 0; }
.ng-fuss-spalten li { margin-bottom: 6px; }
.ng-fuss .ng-etikett { color: var(--ng-tinte); margin-bottom: 10px; }
.ng-fuss-zeile { max-width: var(--ng-breite); margin: 0 auto; padding: 14px var(--ng-abstand) 24px; border-top: 1px solid var(--ng-linie); font-size: 13px; }
@media (max-width: 720px) { .ng-fuss-spalten { grid-template-columns: 1fr; gap: 20px; } }

/* ── Text-Bausteine ─────────────────────────────────────────────────────── */
.ng-meta { font-family: var(--ng-schrift-titel); font-size: 13px; color: var(--ng-gedaempft); letter-spacing: .02em; margin-bottom: 14px; }
.ng-lead { font-size: 1.12em; }
/* Merksatz mit Korrekturrand – DAS Erkennungszeichen, höchstens 1–2× pro Artikel */
.ng-merksatz { margin: 32px 0; padding: 4px 0 4px 22px; border-left: var(--ng-randlinie) solid var(--ng-rotstift); font-family: var(--ng-schrift-titel); font-weight: 300; font-size: 1.25em; line-height: 1.45; color: var(--ng-tinte); }
.ng-zitat { margin: 32px 0; padding-left: 22px; border-left: 1px solid var(--ng-linie); }
.ng-zitat p { font-style: italic; margin-bottom: 6px; }
.ng-zitat cite { font-style: normal; font-size: 14px; color: var(--ng-gedaempft); }
.ng-bild { margin: 32px 0; }
.ng-bild figcaption { font-size: 14px; color: var(--ng-gedaempft); margin-top: 8px; }
.ng-hinweis { font-size: .92em; padding: 12px 16px; background: var(--ng-flaeche); border-left: var(--ng-randlinie) solid var(--ng-tinte); margin: 24px 0; }

/* ── Kästen: Tool, Produkt, Download/Audio ──────────────────────────────── */
.ng-kasten { margin: 32px 0; padding: 22px 24px 22px 22px; border-top: 1px solid var(--ng-linie); border-bottom: 1px solid var(--ng-linie); position: relative; }
.ng-kasten::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: var(--ng-randlinie); background: var(--ng-rotstift); }
.ng-kasten--produkt { background: var(--ng-flaeche); border: 1px solid var(--ng-linie); }
.ng-kasten .ng-etikett { margin-bottom: 6px; }
.ng-kasten h3 { margin: 0 0 6px; }
.ng-kasten p { font-size: .95em; margin-bottom: 12px; }
.ng-etikett { font-family: var(--ng-schrift-titel); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ng-rotstift); margin: 0; }
.ng-preis { font-family: var(--ng-schrift-titel); font-size: 14px; color: var(--ng-gedaempft); margin-left: 12px; }
.ng-produktbild { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 0 16px; border: 1px solid var(--ng-linie); }
.ng-kasten audio { width: 100%; margin-top: 4px; }

/* Anhören: kleiner Service-Kasten zur Vorlese-MP3; ab 800 px rechts neben dem Text, zurückhaltend (Linie statt Rotstift) */
.ng-anhoeren { margin: 0 0 24px; padding: 12px 0; border-top: 1px solid var(--ng-linie); border-bottom: 1px solid var(--ng-linie); font-family: var(--ng-schrift-titel); font-size: 13px; color: var(--ng-gedaempft); }
.ng-anhoeren p { margin: 0 0 8px; font-size: 13px; line-height: 1.4; }
.ng-anhoeren audio { display: block; width: 100%; height: 36px; margin: 0 0 8px; }
.ng-anhoeren .ng-knopf { font-size: 13px; padding: 4px 12px; }
@media (min-width: 800px) {
  .ng-anhoeren { float: right; width: 280px; margin: 4px 0 16px 28px; padding: 12px 0 12px 16px; border: 0; border-left: 1px solid var(--ng-linie); }
}

/* ── Knöpfe ─────────────────────────────────────────────────────────────── */
.ng-knopf { display: inline-block; font-family: var(--ng-schrift-titel); font-size: 14px; padding: 9px 18px; border: 1px solid var(--ng-tinte); border-radius: var(--ng-radius); color: var(--ng-tinte); background: transparent; text-decoration: none; cursor: pointer; line-height: 1.4; }
.ng-knopf:hover { background: var(--ng-tinte); color: var(--ng-papier); }
.ng-knopf--haupt { background: var(--ng-tinte); color: var(--ng-papier); }   /* max. 1 pro Ansicht */
.ng-knopf--haupt:hover { background: var(--ng-text); border-color: var(--ng-text); }

/* ── Listen von Artikeln / Tools ────────────────────────────────────────── */
.ng-karten { border-top: 1px solid var(--ng-linie); }
.ng-karte { display: block; padding: 16px 0; border-bottom: 1px solid var(--ng-linie); text-decoration: none; }
.ng-karte .ng-datum { font-family: var(--ng-schrift-titel); font-size: 12px; color: var(--ng-gedaempft); }
.ng-karte .ng-titel { display: block; font-family: var(--ng-schrift-titel); font-size: 18px; color: var(--ng-tinte); margin-top: 2px; }
.ng-karte .ng-anriss { display: block; color: var(--ng-text); font-size: .95em; margin-top: 4px; }
.ng-karte:hover .ng-titel { color: var(--ng-rotstift); }
.ng-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 32px; }

/* ── Seitenbühne: Heftseite, Bänder, Kacheln ─────────────────────────────── */
/* Heftseite: feine Schulheft-Linien und der rote Korrekturrand. Die Linien sind gezeichnete
   Striche (harte Kanten), kein Farbverlauf. Nur für die Bühne oben auf Übersichtsseiten. */
.ng-heft { position: relative; background-color: var(--ng-papier);
  background-image: linear-gradient(to bottom, transparent 35px, color-mix(in srgb, var(--ng-linie) 60%, transparent) 35px, color-mix(in srgb, var(--ng-linie) 60%, transparent) 36px);
  background-size: 100% 36px; border-bottom: 3px double var(--ng-linie); }
.ng-heft::before { content: ""; position: absolute; top: 0; bottom: 0; width: var(--ng-randlinie); background: var(--ng-rotstift); opacity: .6;
  left: max(10px, calc((100% - var(--ng-breite)) / 2 - 6px)); }
.ng-held { max-width: var(--ng-breite); margin: 0 auto; padding: 56px var(--ng-abstand) 64px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.ng-held h1 { font-size: clamp(32px, 4.6vw, 50px); }
.ng-held-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
/* Bild wie eingeklebt: Papierrand und leicht schief, ohne Schatten */
.ng-eingeklebt { background: #fff; padding: 10px; border: 1px solid var(--ng-linie); transform: rotate(-1.5deg); }
.ng-eingeklebt img { width: 100%; }
@media (max-width: 800px) { .ng-held { grid-template-columns: 1fr; padding-top: 36px; gap: 28px; } .ng-eingeklebt { transform: none; } }

/* Band: ganze Breite im Flächenton, wie ein eingelegtes Blatt */
.ng-band { background: var(--ng-flaeche); border-top: 1px solid var(--ng-linie); border-bottom: 1px solid var(--ng-linie); }
.ng-abschnitt { max-width: var(--ng-breite); margin: 0 auto; padding: 56px var(--ng-abstand); }
.ng-abschnitt > h2:first-child, .ng-abschnittskopf h2 { margin-top: 0; }
.ng-abschnittskopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 24px; }
.ng-abschnittskopf a { font-family: var(--ng-schrift-titel); font-size: 14px; }
.ng-abschnitt > p { max-width: var(--ng-mass); }

/* Kacheln mit Bild: Artikel, Tools, Materialien. Rahmen statt Schatten. */
.ng-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px; }
.ng-kacheln--drei { grid-template-columns: repeat(3, 1fr); }
.ng-kacheln--vier { grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 960px) { .ng-kacheln--drei, .ng-kacheln--vier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ng-kacheln--drei, .ng-kacheln--vier { grid-template-columns: 1fr; } }
.ng-kachel { display: flex; flex-direction: column; text-decoration: none; color: var(--ng-text); background: var(--ng-papier); border: 1px solid var(--ng-linie); border-radius: var(--ng-radius); overflow: hidden; }
.ng-kachel > img, .ng-kachel-leer { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--ng-linie); background: var(--ng-flaeche); }
.ng-kachel-leer { display: flex; align-items: center; justify-content: center; }
.ng-kachel-leer img { width: 30%; }
.ng-kachel--hoch > img { aspect-ratio: 3 / 4; object-fit: contain; padding: 12px; background: var(--ng-flaeche); }
.ng-kachel-text { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ng-kachel .ng-titel { font-family: var(--ng-schrift-titel); font-size: 18px; line-height: 1.3; color: var(--ng-tinte); }
.ng-kachel .ng-anriss { font-size: .9em; line-height: 1.5; }
.ng-kachel .ng-datum, .ng-kachel .ng-preis { font-family: var(--ng-schrift-titel); font-size: 12px; color: var(--ng-gedaempft); margin: 0; }
.ng-kachel:hover { border-color: var(--ng-tinte); }
.ng-kachel:hover .ng-titel { color: var(--ng-rotstift); }
.ng-kachel:focus-visible { outline-offset: 2px; }

.ng-etikett + h2, .ng-etikett + h3 { margin-top: 10px; }
/* Bild links, Text rechts (z. B. Buchcover) */
.ng-mit-bild { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: start; }
.ng-mit-bild > img { border: 1px solid var(--ng-linie); background: #fff; }
@media (max-width: 480px) { .ng-mit-bild { grid-template-columns: 90px 1fr; gap: 16px; } }

/* Artikelliste mit Vorschaubild (Blog) */
.ng-karte--bild { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: start; }
.ng-karte--bild > img, .ng-karte--bild > .ng-kachel-leer { width: 180px; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--ng-linie); }
@media (max-width: 560px) { .ng-karte--bild { grid-template-columns: 1fr; } .ng-karte--bild > img, .ng-karte--bild > .ng-kachel-leer { width: 100%; } }

/* ── Tabellen ───────────────────────────────────────────────────────────── */
.ng-tabelle-rahmen { overflow-x: auto; margin: 24px 0; }
table { border-collapse: collapse; width: 100%; font-size: .95em; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ng-linie); vertical-align: top; }
th { font-family: var(--ng-schrift-titel); font-weight: 400; font-size: 14px; color: var(--ng-tinte); background: var(--ng-flaeche); }
td.ng-zahl, th.ng-zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Formulare (für Tools und Kontakt) ──────────────────────────────────── */
.ng-feld { margin-bottom: 18px; }
.ng-feld label, .ng-feld legend { display: block; font-family: var(--ng-schrift-titel); font-size: 14px; color: var(--ng-tinte); margin-bottom: 6px; }
.ng-feld .ng-hilfe { font-size: 14px; color: var(--ng-gedaempft); margin-top: 4px; }
input[type="text"], input[type="number"], input[type="email"], select, textarea {
  width: 100%; font: inherit; color: var(--ng-text); background: #fff;
  border: 1px solid var(--ng-linie); border-bottom: 1px solid var(--ng-gedaempft); border-radius: var(--ng-radius); padding: 9px 12px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ng-tinte); outline-offset: 0; border-color: var(--ng-tinte); }
/* Lockfeld gegen Spam-Bots im Kontaktformular: für Menschen unsichtbar, für Screenreader ausgeblendet (aria-hidden) */
.ng-lockfeld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.ng-wahl { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ng-tinte); width: 18px; height: 18px; }
.ng-ergebnis { font-family: var(--ng-schrift-titel); font-weight: 300; font-size: 48px; color: var(--ng-tinte); line-height: 1; }

/* ── Aus der zweiten Umgestaltung (26.09.2026): Lesetext-Seiten und Katalog ──
   Heftrand neben dem Lesetext, großer Seitenkopf, Sprungmarken, Wegweiser, Regal. */
.ng-schmal { max-width: var(--ng-mass); }   /* Lesetext innerhalb von .ng-breit */

/* Heftrand: senkrechte Rotstift-Linie links neben dem Lesetext, wie im Schulheft (ab Tablet quer) */
@media (min-width: 960px) {
  .ng-inhalt { position: relative; }
  .ng-inhalt::before { content: ""; position: absolute; top: 0; bottom: 0; left: -32px; width: 1px; background: var(--ng-rotstift); opacity: .55; }
}

/* Seitenkopf: großer Titel auf allen Seiten außer der Startseite */
.ng-seitenkopf { padding: 16px 0 12px; margin-bottom: 24px; }
.ng-seitenkopf h1 { font-size: clamp(34px, 5.2vw, 52px); line-height: 1.1; letter-spacing: -.012em; margin-bottom: 20px; }
.ng-seitenkopf .ng-lead { font-size: 1.18em; max-width: 36em; }
.ng-breit .ng-seitenkopf { padding-top: 32px; }

/* Wegweiser: vier Bereiche nebeneinander, getrennt durch Linien statt Kästen */
.ng-wegweiser { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border-top: 1px solid var(--ng-linie); border-bottom: 1px solid var(--ng-linie); margin: 0 0 56px; }
.ng-wegweiser a, .ng-wegweiser > div { display: block; padding: 24px 24px 26px 0; text-decoration: none; color: var(--ng-text); }
.ng-wegweiser > * + * { padding-left: 24px; border-left: 1px solid var(--ng-linie); }
.ng-wegweiser .ng-titel { display: block; font-family: var(--ng-schrift-titel); font-size: 24px; font-weight: 300; color: var(--ng-tinte); margin: 4px 0 6px; }
.ng-wegweiser .ng-anriss { font-size: .92em; }
.ng-wegweiser--zwei { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ng-wegweiser--zwei { border-bottom: 0; }
.ng-wegweiser--zwei > * { border-bottom: 1px solid var(--ng-linie); }
@media (min-width: 701px) { .ng-wegweiser--zwei > *:nth-child(odd) { padding-left: 0; border-left: 0; } }
@media (max-width: 700px) { .ng-wegweiser--zwei > * + * { border-top: 0; } }
.ng-wegweiser a:hover .ng-titel { color: var(--ng-rotstift); }
@media (max-width: 700px) { .ng-wegweiser > * + * { padding-left: 0; border-left: 0; border-top: 1px solid var(--ng-linie); } }

/* Sprungmarken: kurze Liste von Ankern unter dem Seitenkopf (Materialien, FAQ) */
.ng-sprung { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 14px 0; margin: 24px 0 8px; border-top: 1px solid var(--ng-linie); border-bottom: 1px solid var(--ng-linie); font-family: var(--ng-schrift-titel); font-size: 14px; }
.ng-sprung a { text-decoration: none; }
.ng-sprung a:hover { text-decoration: underline; text-decoration-color: var(--ng-rotstift); }

/* Regal: Materialien mit Cover im Vordergrund */
.ng-regal { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 40px 28px; margin: 24px 0 8px; }
.ng-regal a { display: block; text-decoration: none; color: var(--ng-text); }
.ng-regal .ng-cover { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; background: var(--ng-flaeche); border: 1px solid var(--ng-linie); padding: 14px; margin-bottom: 12px; }
.ng-regal .ng-cover img { max-height: 100%; width: auto; }
.ng-regal .ng-titel { display: block; font-family: var(--ng-schrift-titel); font-size: 15px; line-height: 1.35; color: var(--ng-tinte); }
.ng-regal .ng-unterzeile { display: block; font-family: var(--ng-schrift-titel); font-size: 12px; color: var(--ng-gedaempft); margin-top: 4px; }
.ng-regal a:hover .ng-titel { color: var(--ng-rotstift); }
.ng-regal--klein { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 28px 20px; }
.ng-regal--klein .ng-titel { font-size: 14px; }

@media print {
  body { background: #fff; }
  .ng-kopf nav, .ng-fuss, .ng-knopf, .ng-anhoeren { display: none; }
  .ng-inhalt::before { display: none; }
}