/* =====================================================================
   nordfriesland-datenbank.de - Nachschlagewerk, Grundgeruest von min-web.de
   Palette: #F5F4EF Papier, #2E5A78 Nordsee (Akzent), #C8A23C Friesengold,
            #1E2428 Tinte, #5E6770 Schlick, #DFDCD3 Rand
   Die drei Farben der nordfriesischen Flagge (Gold, Rot, Blau) tauchen
   gedaempft als Rubrikfarben auf, nie als Flaggenzitat.
   Fonts:   Fraunces (Ueberschriften) + Inter (Text), lokal
   ===================================================================== */

/* latin */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/Fraunces-Latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/Fraunces-LatinExt.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-LatinExt.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #F5F4EF;
  --bg-soft: #ECEAE2;
  --paper: #FFFFFF;
  --ink: #1E2428;
  --ink-soft: #384048;
  --muted: #5E6770;
  --accent: #2E5A78;
  --accent-dark: #1F4058;
  --accent-soft: #C3D3DF;
  --accent-tint: #E8EFF4;
  --rule: #DFDCD3;
  --warn: #8A6014;
  --warn-bg: #FDF9F0;
  --warn-border: #E5D3A8;
  --warn-dark: #6B4A10;
  --danger: #A33A2A;
  --ok: #4A7C3D;
  --link: #2E5A78;
  --link-linie: #93AEC2;
  --maxw-wide: 1180px;
  --infobox-w: 320px;

  /* Rubrikfarben. Funktional, kein Dekor: dieselbe Farbe steht auf jeder Seite
     fuer dieselbe Rubrik. Alle gegen --paper auf mindestens 4.5:1. */
  --rb-koege:      #4F7A52;  /* Deichgruen */
  --rb-orte:       #2E5A78;  /* Nordsee, zugleich Hausfarbe */
  --rb-geschichte: #9B4A32;  /* Backstein, Friesenrot gedaempft */
  --rb-personen:   #6B6256;  /* Reetgrau-Braun */
  --rb-allgemein:  #2F6E78;  /* Watt-Petrol */
  --gold:          #C8A23C;  /* Friesengold, nur fuer Linien und Marken */
}

/* Rubrikfarbe pro Seite: $page_klasse = 'rb-koege' landet am <main>. */
.rb-koege      { --klasse: var(--rb-koege); }
.rb-orte       { --klasse: var(--rb-orte); }
.rb-geschichte { --klasse: var(--rb-geschichte); }
.rb-personen   { --klasse: var(--rb-personen); }
.rb-allgemein  { --klasse: var(--rb-allgemein); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Links im Fliesstext werden unterstrichen.
   Grund: Zwischen Linkfarbe #2C6E63 und Textfarbe #1F2328 liegen nur 2,65:1.
   WCAG verlangt 3:1, wenn die Farbe das einzige Unterscheidungsmerkmal ist.
   Statt die Hausfarbe zu aendern, kommt ein zweites Merkmal dazu. Die
   Unterstreichung liegt gedaempft unter der Grundlinie, beim Ueberfahren wird
   sie kraeftiger. Navigation, Kacheln und Chips bleiben aussen vor, dort ist
   ein Link durch seine Position erkennbar und eine Linie waere nur Unruhe. */
article p a,
article dd a,
article > ul > li a,
article > ol > li a,
.lead a,
.fact a,
figcaption a,
.ziel-liste a,
.rw-frage p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--link-linie);
}
article p a:hover,
article dd a:hover,
article > ul > li a:hover,
article > ol > li a:hover,
.lead a:hover,
.fact a:hover,
figcaption a:hover,
.ziel-liste a:hover,
.rw-frage p a:hover {
  text-decoration-color: currentColor;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
/* Keine Trennlinien unter den Ueberschriften. Hierarchie entsteht ueber
   Groesse, Gewicht und Weissraum, nicht ueber Linien. */
h1 {
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  margin: 0 0 1.5rem;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
h2 {
  font-size: 1.6rem;
  margin: 4rem 0 1rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  position: relative;
}
/* Feiner Akzentstrich ueber der Ueberschrift statt durchgehender Linie darunter.
   Bewusst oberhalb und nicht links: ein negativ positionierter Strich wuerde auf
   schmalen Viewports ins Container-Padding laufen. */
h2::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--accent);
  margin-bottom: 1rem;
}
h3 { font-size: 1.2rem; margin: 2.5rem 0 0.5rem; font-weight: 600; }
h4 { font-size: 1rem; margin: 1.2rem 0 0.3em; font-weight: 600; font-family: 'Inter', sans-serif; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.4em; margin: 0 0 1em; }
li { margin: 0.2em 0; }
hr { border: none; border-top: 1px solid var(--rule); margin: 2rem 0; }

.skiplink {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 0.6em 1em;
  z-index: 100;
}
.skiplink:focus { left: 0; outline: 3px solid var(--accent-soft); }

/* ------- Layout ------- */
.wrap { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 1.5rem; }
main.layout {
  display: grid;
  grid-template-columns: 1fr var(--infobox-w);
  gap: 2.2rem;
  margin: 1.5rem auto 3rem;
  align-items: start;
  max-width: var(--maxw-wide);
  padding: 0 1.5rem;
}
@media (max-width: 880px) { main.layout { grid-template-columns: 1fr; } }
main.article-only {
  max-width: 820px;
  margin: 1.5rem auto 3rem;
  padding: 0 1.5rem;
}

/* ------- Header (offiziell mit 3px accent-border) ------- */
.site-header {
  background: var(--paper);
  border-bottom: 3px solid var(--accent);
  padding: 0.8rem 0;
}
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--maxw-wide); margin: 0 auto;
  padding: 0 1.5rem; gap: 1rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.7rem;
  color: var(--ink); text-decoration: none;
  font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 400;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 48px; height: 48px; flex-shrink: 0; display: block; object-fit: contain; }
.brand-text { color: var(--ink); }
.brand-dot { color: var(--accent); }
.brand-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.6rem;
  border-left: 1px solid var(--rule);
  padding-left: 0.7rem;
}
@media (max-width: 640px) { .brand-sub { display: none; } }

@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45,122,143,0.35); }
  50%      { box-shadow: 0 0 0 5px rgba(45,122,143,0); }
}

/* ------- Hauptnavigation ------- */
.site-nav {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.site-nav .wrap { padding: 0 1.5rem; }
.site-nav ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 0.1rem;
}
.site-nav li { margin: 0; }
.site-nav a {
  display: block; padding: 0.7rem 1rem;
  color: var(--ink); text-decoration: none;
  font-size: 0.88rem; font-weight: 500;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
  background: var(--paper);
  text-decoration: none;
}

/* ------- Breadcrumbs (jetzt nur klein im Article) ------- */
.breadcrumbs { font-size: 0.82rem; color: var(--muted); margin: 0 0 0.8rem; }
.breadcrumbs ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.3em;
}
.breadcrumbs li:not(:last-child)::after {
  content: " / "; color: var(--rule); margin-left: 0.3em;
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ------- Article-Body ------- */
article { min-width: 0; }
article .meta-row {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 1.2rem;
}
article .meta-row b {
  color: var(--ink-soft);
  font-weight: 500;
}

/* Last-Edit Banner */
.last-edit {
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--bg-soft);
  padding: 0.5rem 0.85rem;
  border-left: 2px solid var(--accent);
  margin: 0 0 1.5rem;
  border-radius: 0 4px 4px 0;
}
.last-edit b { color: var(--ink-soft); font-weight: 500; }

/* Lead-Absatz: traegt die Seite an, deshalb groesser und dunkler als der
   Fliesstext. Bewusst ohne Initialbuchstabe. Auf 70 Steckbrief-Seiten wirkt
   eine Drop Cap auf jeder einzelnen schnell manieriert. */
article .lead {
  font-size: 1.22rem;
  color: var(--ink);
  margin-bottom: 2.5rem;
  line-height: 1.6;
  max-width: 60ch;
  font-weight: 350;
}
article .lead-unused::first-letter {
  font-family: 'Fraunces', serif;
  font-size: 3rem;
  float: left;
  line-height: 0.85;
  margin: 0.1em 0.15em 0 0;
  color: var(--accent-dark);
  font-weight: 300;
}

/* TOC + Anzeige nebeneinander (Desktop) / untereinander (Mobile, Anzeige oben) */
.toc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 1.2rem 0 1.8rem;
}
.toc-row .toc { margin: 0; flex: 1 1 auto; width: auto; }

/* Schlanke Sprungliste statt Enzyklopaedie-Kasten: keine Umrandung,
   keine Nummerierung, nur ein Rand links. */
.toc {
  border-left: 2px solid var(--rule);
  padding: 0.2rem 0 0.2rem 1.4rem;
  margin: 2rem 0 3rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.ad-toc {
  width: 336px;
  height: 280px;
  flex-shrink: 0;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.ad-toc::before {
  content: "Anzeige";
  position: absolute;
  top: 0; right: 0;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 3px 7px;
  background: var(--bg);
  border-bottom-left-radius: 4px;
  z-index: 1;
  pointer-events: none;
}
.ad-toc ins { display: inline-block !important; }

@media (max-width: 760px) {
  .toc-row { flex-direction: column-reverse; align-items: stretch; gap: 1rem; }
  .toc-row .toc, .toc-row .ad-toc { width: 100%; max-width: none; }
  .ad-toc { display: flex; align-items: center; justify-content: center; }
  .toc { width: 100%; min-height: 0; }
}
.toc strong {
  display: block; margin: 0 0 0.6rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted); font-weight: 600;
}
/* Sprungliste ohne Zaehler: das ist der auffaelligste Enzyklopaedie-Marker */
.toc ol { margin: 0; padding-left: 0; font-size: 0.94rem; list-style: none; }
.toc li { margin: 0.35rem 0; }
.toc ol ol { margin-top: 0.25rem; padding-left: 1rem; font-size: 0.88rem; }
.toc a { color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Marginalie: Fachhinweis wandert auf breiten Viewports neben den Text.
   Sachbuch-Geste statt Warnkasten. Unter 1180px faellt sie zurueck in den Fluss. */
/* ------- Fachhinweis -------
   Zwei Erscheinungsformen aus einer Komponente:
   .fact           liegt im Lesefluss, kraeftige Kante links
   .fact.marginal  eigenstaendige Merkkarte ueber die volle Lesebreite */

.fact {
  background: var(--warn-bg);
  border: none;
  border-left: 3px solid var(--warn);
  border-radius: 0;
  padding: 1.1rem 1.4rem;
  margin: 2rem 0;
  font-size: 0.94rem;
  display: flex; gap: 0.9rem; align-items: flex-start;
}
.fact-icon {
  width: 26px; height: 26px;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.fact-icon .fi-ring { fill: none; stroke: var(--warn); stroke-width: 2.5; }
.fact-icon .fi-mark { stroke: var(--warn); stroke-width: 3.2; stroke-linecap: round; }
.fact-icon .fi-dot  { fill: var(--warn); }
.fact strong {
  color: var(--warn-dark);
  display: block; margin-bottom: 0.2rem;
  font-family: 'Fraunces', serif;
}
.fact p { margin: 0; }
.fact-body > *:last-child { margin-bottom: 0; }

/* Merkkarte: eigenes Kaestchen mit grossem Icon, ueber die volle Lesebreite.

   Frueher floatete sie links in der Lesespalte. Das erzeugte eine schmale
   Textsaeule daneben, die schlechter zu lesen war als der uebrige Fliesstext,
   und zwang zu clear-Regeln fuer jede nachfolgende Ueberschrift. Die Karte
   steht jetzt allein, damit faellt beides weg. */
.fact.marginal {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  width: 100%;
  margin: 2.5rem 0;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-top: 3px solid var(--warn);
  border-radius: 3px;
  padding: 1.4rem 1.5rem;
  font-size: 0.94rem;
  line-height: 1.65;
  box-shadow: 0 2px 10px -6px rgba(31, 35, 40, 0.25);
}
.fact.marginal .fact-icon {
  width: 38px; height: 38px;
  margin-top: 0.1rem;
}
.fact.marginal strong {
  font-size: 1.08rem;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}
@media (max-width: 599px) {
  .fact.marginal {
    gap: 0.9rem;
    padding: 1.2rem 1.2rem;
  }
  .fact.marginal .fact-icon { width: 30px; height: 30px; }
}

/* Hinweis-Boxen (neutral, Teal) */
.hinweis {
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
  padding: 0.8rem 1.1rem;
  margin: 1.2rem 0;
  border-radius: 0 4px 4px 0;
  font-size: 0.93rem;
}
.hinweis strong {
  color: var(--accent-dark);
  font-family: 'Fraunces', serif;
  display: block; margin-bottom: 0.2rem;
}
.hinweis p:last-child { margin-bottom: 0; }

/* Fußnoten */
sup.ref {
  font-size: 0.7rem;
  color: var(--accent-dark);
  font-weight: 600;
  padding: 0 0.15em;
}
sup.ref a { color: var(--accent-dark); text-decoration: none; }
sup.ref a:hover { background: var(--accent-tint); text-decoration: underline; }

/* Quellen-Liste */
.quellen {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.88rem;
}
.quellen h2 {
  font-size: 1.25rem;
  border: 0;
  padding: 0;
  margin: 0 0 0.6em;
}
.quellen ol { padding-left: 1.4em; color: var(--ink-soft); }
.quellen li { margin: 0.3em 0; }
.quellen em { font-style: italic; color: var(--ink); }

/* Figure - voll auf Article-Breite */
/* Bilder sind der visuelle Anker der Seite und laufen deshalb bewusst breiter
   als die Textspalte. Auf schmalen Viewports faellt der Ueberhang weg. */
figure {
  margin: 3rem 0;
}
figure img,
figure picture,
figure picture img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
}
figure img {
  border: 1px solid var(--rule);
  background: var(--paper);
  transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox-trigger {
  display: block;
  cursor: zoom-in;
}
.lightbox-trigger:hover img {
  box-shadow: 0 12px 32px -12px rgba(31, 35, 40, 0.28);
}
figcaption {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.7rem;
  line-height: 1.55;
  padding: 0 0.4rem;
}
figcaption a { color: var(--muted); }

/* Volle Breite der Leseflaeche, mit Ueberhang nach beiden Seiten */
@media (min-width: 1000px) {
  figure.wide {
    margin-left: -3rem;
    margin-right: -3rem;
  }
  figure.wide figcaption { padding-left: 3rem; }
}

/* Wissenschaftliche SVG-Tafel (kein Bild-Border, heller Rahmen) */
.figure-svg {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  background: var(--paper);
}
.figure-svg .sci-svg { width: 100%; height: auto; display: block; }
.figure-svg figcaption { margin-top: 0.8rem; }
.figure-svg .fig-quelle {
  display: block; margin-top: 0.35rem;
  font-style: normal; font-size: 0.78rem;
}
.figure-svg .fig-quelle a { text-decoration: underline; }

/* Lightbox-Trigger - macht Bild klickbar */
.lightbox-trigger {
  display: block;
  cursor: zoom-in;
  position: relative;
}
.lightbox-trigger::after {
  content: "⌕";
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  width: 28px; height: 28px;
  background: rgba(30, 46, 51, 0.7);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.95rem;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.lightbox-trigger:hover::after,
.lightbox-trigger:focus-visible::after { opacity: 1; }

/* Lightbox-Overlay (per JS injiziert) */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 35, 40, 0.95);
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 2rem;
  cursor: zoom-out;
  animation: lb-fade 0.2s ease-out;
}
.lightbox-overlay img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.lightbox-overlay figcaption {
  position: absolute;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-style: italic;
  max-width: 80vw;
  text-align: center;
}
.lightbox-overlay .lb-close {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  width: 44px; height: 44px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.lightbox-overlay .lb-close:hover,
.lightbox-overlay .lb-close:focus-visible {
  background: rgba(255, 255, 255, 0.25);
  outline: 2px solid #fff;
}
@keyframes lb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
body.lightbox-open { overflow: hidden; }

/* Disclaimer - medizinischer Hinweis */
.disclaimer {
  background: #FFF4F0;
  border-left: 4px solid var(--danger);
  padding: 0.95rem 1.2rem;
  margin: 1.5rem 0;
  font-size: 0.93rem;
  border-radius: 0 4px 4px 0;
}
.disclaimer strong { color: var(--danger); }
.disclaimer .notfall {
  display: block;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(163, 58, 42, 0.3);
}
.disclaimer .notfall-number {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--danger);
  padding: 0 0.2em;
}

/* ------- Steckbrief/Infobox rechts ------- */
aside.infobox {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 0.85rem;
  overflow: hidden;
  position: sticky; top: 1rem;
}
.infobox .ibhead {
  background: var(--klasse);
  color: #fff;
  padding: 0.7rem 1rem;
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 500;
  text-align: center;
}
.infobox .ibhead-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--accent-soft);
  font-style: italic;
  font-weight: 400;
  margin-top: 0.2rem;
}
.infobox .ibsub {
  background: var(--klasse);
  filter: brightness(0.8);
  color: var(--accent-soft);
  padding: 0.4rem 1rem;
  font-size: 0.78rem;
  text-align: center;
  font-style: italic;
  font-family: 'Fraunces', serif;
}
.infobox .ibimg {
  border-bottom: 1px solid var(--rule);
  background: var(--bg-soft);
  margin: 0;
}
.infobox .ibimg img { width: 100%; height: auto; display: block; border: 0; border-radius: 0; }
.infobox .ibimg figcaption {
  padding: 0.5rem 0.9rem;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}
.infobox .ibsection {
  padding: 0.6rem 1rem;
  background: var(--bg-soft);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.infobox dl {
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
}
.infobox dt {
  padding: 0.45rem 1rem;
  color: var(--muted);
  font-size: 0.8rem;
  border-bottom: 1px solid var(--rule);
  font-weight: 500;
}
.infobox dd {
  margin: 0;
  padding: 0.45rem 1rem;
  color: var(--ink);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--rule);
}
.infobox dt:last-of-type,
.infobox dd:last-of-type { border-bottom: 0; }
.infobox em { font-style: italic; color: var(--accent-dark); }
.infobox .ibfoot {
  padding: 0.6rem 1rem;
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--bg-soft);
  border-top: 1px solid var(--rule);
  text-align: center;
}

/* ------- Themen-Cards (für Hub-Übersicht und Spoke-Cross-Sells) ------- */
.kapitel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
  margin: 1.5rem 0 2rem;
}
.kapitel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.15s;
  display: block;
  position: relative;
}
.kapitel:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  text-decoration: none;
  transform: translateY(-2px);
}
.kapitel .arrow { color: var(--accent); float: right; font-family: 'Fraunces', serif; }
.kapitel h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0 0 0.3em;
  font-weight: 500;
}
.kapitel p { margin: 0; font-size: 0.85rem; color: var(--muted); line-height: 1.4; }

/* Status-Cards (für Hub) */
.status-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem;
  margin: 1.5rem 0;
}
.status {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  position: relative;
  overflow: hidden;
}
.status::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
}
.status.is-warn::before { background: var(--warn); }
.status.is-ok::before { background: var(--ok); }
.status .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.3rem;
  font-weight: 600;
}
.status .value {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  color: var(--ink);
  line-height: 1.1;
  font-weight: 500;
}
.status .unit {
  font-size: 0.85rem;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  margin-left: 0.2em;
}
.status .sub { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }

/* ------- Daten-Visualisierungen (SVG-Charts) ------- */
.chart-block {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  margin: 1.5rem 0;
}
.chart-block h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 0.4rem;
  font-weight: 600;
}
.chart-block .ctitle {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  margin: 0 0 1rem;
  color: var(--ink);
  font-weight: 500;
}
.chart-block .csub {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.6rem;
  font-style: italic;
}

/* SAISONKALENDER */

/* TAGESAKTIVITAET */
.day-svg { width: 100%; height: auto; display: block; }
.day-svg .axis { stroke: var(--rule); stroke-width: 1; }
.day-svg .grid { stroke: var(--rule); stroke-width: 0.5; stroke-dasharray: 2 3; }
.day-svg .area { fill: var(--accent-soft); opacity: 0.6; }
.day-svg .curve { fill: none; stroke: var(--accent); stroke-width: 2; }
.day-svg .peak { fill: var(--accent-dark); }
.day-svg .label { font-family: 'Inter', sans-serif; font-size: 10px; fill: var(--muted); }
.day-svg .label-peak { fill: var(--accent-dark); font-weight: 600; font-size: 11px; }

/* GROESSENVERGLEICH */
.compare-svg { width: 100%; height: auto; display: block; background: var(--bg-soft); border-radius: 4px; }
.compare-svg .scale { stroke: var(--ink-soft); stroke-width: 1.5; }
.compare-svg .scale-tick { stroke: var(--ink-soft); stroke-width: 1; }
.compare-svg .scale-label { font-family: 'Inter', sans-serif; font-size: 9px; fill: var(--muted); text-anchor: middle; }
.compare-svg .ins-body { fill: var(--ink); }
.compare-svg .ins-label { font-family: 'Inter', sans-serif; font-size: 11px; fill: var(--ink-soft); text-anchor: middle; font-weight: 500; }
.compare-svg .ins-size { font-family: 'Fraunces', serif; font-size: 10px; fill: var(--accent-dark); text-anchor: middle; font-style: italic; }
.compare-svg .highlight rect { fill: var(--accent-tint); }

/* DACH-KARTE */
.map-svg { width: 100%; height: auto; display: block; }
.map-svg .country { fill: var(--accent-tint); stroke: var(--ink-soft); stroke-width: 1.4; stroke-linejoin: round; }
.map-svg .country-label { font-family: 'Inter', sans-serif; font-size: 13px; fill: var(--muted); font-weight: 600; text-anchor: middle; letter-spacing: 0.05em; pointer-events: none; }
.map-svg .region { fill: var(--accent); opacity: 0.55; stroke: var(--accent-dark); stroke-width: 1.2; stroke-opacity: 0.7; stroke-linejoin: round; }
.map-svg .region-label { font-family: 'Inter', sans-serif; font-size: 13px; fill: #fff; text-anchor: middle; font-weight: 600; paint-order: stroke; stroke: var(--accent-dark); stroke-width: 3; stroke-linejoin: round; pointer-events: none; }
.map-svg .legend { font-family: 'Inter', sans-serif; font-size: 11px; fill: var(--ink-soft); text-anchor: start; }

/* LEBENSZYKLUS */
.cycle-svg { width: 100%; height: auto; display: block; max-width: 480px; margin: 0 auto; }
.cycle-svg .stage { fill: var(--paper); stroke: var(--accent); stroke-width: 1.5; }
.cycle-svg .stage-icon { fill: var(--accent-dark); }
.cycle-svg .stage-label { font-family: 'Inter', sans-serif; font-size: 12px; fill: var(--ink); font-weight: 600; text-anchor: middle; }
.cycle-svg .stage-sub { font-family: 'Inter', sans-serif; font-size: 9px; fill: var(--muted); text-anchor: middle; }
.cycle-svg .arrow { fill: none; stroke: var(--accent); stroke-width: 1.5; marker-end: url(#arrowhead); }
.cycle-svg .center-label { font-family: 'Fraunces', serif; font-size: 13px; fill: var(--ink-soft); text-anchor: middle; font-style: italic; }

/* BISSVERLAUF */
.biss-svg { width: 100%; height: auto; display: block; }
.biss-svg .timeline-line { stroke: var(--accent); stroke-width: 2; }
.biss-svg .phase-bg { fill: var(--bg-soft); stroke: var(--rule); stroke-width: 1; rx: 4; }
.biss-svg .phase-dot { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }
.biss-svg .phase-dot.crit { fill: var(--warn); }
.biss-svg .phase-title { font-family: 'Fraunces', serif; font-size: 12px; fill: var(--ink); font-weight: 500; text-anchor: middle; }
.biss-svg .phase-time { font-family: 'Inter', sans-serif; font-size: 10px; fill: var(--accent-dark); font-weight: 600; text-anchor: middle; }
.biss-svg .phase-desc { font-family: 'Inter', sans-serif; font-size: 9.5px; fill: var(--muted); text-anchor: middle; }

/* REPELLENT-WIRKDAUER */
.rep-svg { width: 100%; height: auto; display: block; }
.rep-svg .bar-bg { fill: var(--bg-soft); }
.rep-svg .bar { fill: var(--accent); }
.rep-svg .bar.weak { fill: var(--accent-soft); }
.rep-svg .axis-line { stroke: var(--rule); stroke-width: 1; }
.rep-svg .grid-line { stroke: var(--rule); stroke-width: 0.5; stroke-dasharray: 2 3; }
.rep-svg .rep-label { font-family: 'Inter', sans-serif; font-size: 12px; fill: var(--ink); font-weight: 500; }
.rep-svg .rep-value { font-family: 'Fraunces', serif; font-size: 11px; fill: var(--accent-dark); font-weight: 600; }
.rep-svg .axis-label { font-family: 'Inter', sans-serif; font-size: 10px; fill: var(--muted); text-anchor: middle; }

/* ------- Tabellen ------- */
table.compare {
  width: 100%; border-collapse: collapse;
  margin: 1.5rem 0; font-size: 0.93rem;
}
table.compare th, table.compare td {
  padding: 0.7rem 0.8rem; text-align: left;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
table.compare th {
  background: var(--bg-soft);
  font-family: 'Fraunces', serif;
  font-weight: 500; color: var(--ink);
}
table.compare tr:hover td { background: var(--accent-tint); }
table.compare .ja { color: var(--ok); font-weight: 600; }
table.compare .nein { color: var(--muted); }
table.compare .achtung { color: var(--warn); font-weight: 600; }

/* ------- Akkordeon (Fallenbau) ------- */
details.fallenbau {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin: 0.6rem 0;
}
details.fallenbau summary {
  padding: 1rem 1.2rem; cursor: pointer;
  font-family: 'Fraunces', serif; font-size: 1.05rem;
  color: var(--ink); list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
details.fallenbau summary::-webkit-details-marker { display: none; }
details.fallenbau summary::after {
  content: "+"; color: var(--accent);
  font-size: 1.4rem; transition: transform 0.2s; line-height: 1;
}
details.fallenbau[open] summary::after { transform: rotate(45deg); }
details.fallenbau[open] summary {
  border-bottom: 1px solid var(--rule);
  background: var(--accent-tint);
}
details.fallenbau .body { padding: 1rem 1.2rem 0.5rem; }
details.fallenbau .body :last-child { margin-bottom: 1rem; }

/* ------- Quiz (Verwechslung) ------- */
.verwechslung-quiz {
  background: var(--bg-soft);
  padding: 1.5rem;
  border-radius: 4px;
  margin: 2rem 0;
  border: 1px solid var(--rule);
}
.quiz-item {
  background: var(--paper);
  padding: 1.2rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--rule);
}
.quiz-item:last-child { margin-bottom: 0; }
.quiz-item h3 { margin-top: 0; }
.quiz-options { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.quiz-options li { margin: 0.3rem 0; }
.quiz-options input[type="radio"] { display: none; }
.quiz-options label {
  display: block; padding: 0.6rem 0.9rem;
  background: var(--bg-soft); border: 1px solid var(--rule);
  border-radius: 4px; cursor: pointer;
}
.quiz-options label:hover { background: var(--accent-tint); }
.quiz-options input[type="radio"]:checked + label {
  background: var(--accent-tint); border-color: var(--accent);
}
.quiz-feedback {
  display: none; margin-top: 0.8rem;
  padding: 0.7rem 0.9rem; border-radius: 4px; font-size: 0.92rem;
}
.quiz-options input.opt-r:checked ~ .quiz-feedback.fb-r,
.quiz-options input.opt-w1:checked ~ .quiz-feedback.fb-w1,
.quiz-options input.opt-w2:checked ~ .quiz-feedback.fb-w2 { display: block; }
.quiz-feedback.fb-r {
  background: #E8F3E0; color: var(--ok);
  border-left: 3px solid var(--ok);
}
.quiz-feedback.fb-w1, .quiz-feedback.fb-w2 {
  background: #FBEAEA; color: var(--danger);
  border-left: 3px solid var(--danger);
}

/* ------- FAQ (DL/DT/DD-Pattern) ------- */
.faq { margin: 2.5rem 0; }
.faq dl { margin: 0; }
.faq dt {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  color: var(--ink);
  margin-top: 1.2rem;
  font-weight: 500;
}
.faq dd {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--accent-soft);
  color: var(--ink);
}

/* Begriff, dessen Seite noch entsteht: sichtbar als Fachbegriff, aber kein toter Link.
   Wird von ref() automatisch zum echten Link, sobald die Zielseite existiert. */
.ref-pending {
  border-bottom: 1px dotted var(--rule);
  color: var(--ink-soft);
  cursor: help;
}

/* =====================================================================
   Steckbrief-Komponenten
   Grundgedanke: Was messbar ist, wird gezeigt statt aufgeschrieben.
   ===================================================================== */

/* ------- Mohshärte-Skala ------- */
.mohs, .dichte { margin: 1.4rem 0; }
.mohs-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted); font-weight: 600; margin-bottom: 0.55rem;
}
.mohs-head b {
  font-family: 'Fraunces', serif; font-size: 1.15rem;
  letter-spacing: 0; text-transform: none; color: var(--klasse);
}
.mohs-track, .dichte-track {
  position: relative; height: 8px;
  background: var(--bg-soft);
  border-radius: 4px;
}
.mohs-tick {
  position: absolute; top: 0; width: 1px; height: 8px;
  background: var(--paper); transform: translateX(-0.5px);
}
.mohs-fill, .dichte-fill {
  position: absolute; top: 0; height: 8px;
  background: var(--klasse); border-radius: 4px;
}
.mohs-anchor {
  position: absolute; top: -4px; width: 1px; height: 16px;
  background: var(--ink); opacity: 0.32;
}
.mohs-scale {
  display: flex; justify-content: space-between;
  font-size: 0.72rem; color: var(--muted); margin-top: 0.4rem;
}
.mohs-legend {
  list-style: none; padding: 0;
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 0.9rem;
}
/* Zeilen mit breiten Komponenten laufen ueber beide Spalten der Infobox */
.infobox dt.is-wide {
  grid-column: 1 / -1;
  padding-bottom: 0;
  border-bottom: 0;
}
.infobox dd.is-wide {
  grid-column: 1 / -1;
  padding-top: 0.1rem;
}

/* In der 320px schmalen Infobox reicht der Platz nicht fuer zwei Spalten */
.infobox .mohs-legend { grid-template-columns: 1fr 1fr; font-size: 0.72rem; gap: 0.1rem 0.6rem; }
.infobox .mohs-head b { font-size: 1.05rem; }
.infobox .mohs, .infobox .dichte { margin: 0.5rem 0 0.2rem; }
.infobox .dichte-ref em { font-size: 0.62rem; }
.mohs-legend li { margin: 0; color: var(--muted); display: flex; justify-content: space-between; gap: 0.4rem; }
.mohs-legend span { font-weight: 600; }
.mohs-legend .is-harder span { color: var(--klasse); }
.mohs-legend .is-softer span { color: var(--danger); }

/* ------- Dichte ------- */
.dichte-ref { position: absolute; top: 0; }
.dichte-ref i {
  display: block; width: 1px; height: 8px;
  background: var(--ink); opacity: 0.32;
}
.dichte-ref em {
  position: absolute; top: 11px; left: 0;
  transform: translateX(-50%);
  font-size: 0.68rem; font-style: normal; color: var(--muted); white-space: nowrap;
}
.dichte { padding-bottom: 1.1rem; }

/* ------- Farbfelder ------- */
.swatches { display: flex; flex-wrap: wrap; gap: 0.45rem 0.9rem; margin: 0.3rem 0; }
.swatch { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; }
.swatch i {
  width: 15px; height: 15px; border-radius: 3px;
  border: 1px solid rgba(31, 35, 40, 0.18);
  flex-shrink: 0;
}

/* ------- Kristallsystem-Symbole ------- */
.ksys { display: block; overflow: visible; }
.ksys .ks-face  { fill: color-mix(in srgb, var(--klasse) 16%, transparent); stroke: var(--klasse); stroke-width: 1.6; stroke-linejoin: round; }
.ksys .ks-side  { fill: color-mix(in srgb, var(--klasse) 9%, transparent);  stroke: var(--klasse); stroke-width: 1.3; stroke-linejoin: round; }
.ksys .ks-side2 { fill: color-mix(in srgb, var(--klasse) 5%, transparent);  stroke: var(--klasse); stroke-width: 1.3; stroke-linejoin: round; }
.ksys .ks-edge  { stroke: var(--klasse); stroke-width: 1.4; }
.ksys .ks-back  { fill: none; stroke: var(--klasse); stroke-width: 1; stroke-dasharray: 2.5 2.5; opacity: 0.5; }
.ksys .ks-axis  { stroke: var(--klasse); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.55; }
.ksys-block { display: inline-flex; align-items: center; gap: 0.6rem; }
.ksys-block svg { flex-shrink: 0; }

/* ------- Vergleich zweier Minerale ------- */
.vergleich {
  margin: 2.5rem 0;
  border-top: 2px solid var(--klasse);
  border-bottom: 1px solid var(--rule);
  padding: 1.4rem 0 0.4rem;
}
.vgl-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.4rem; }
.vgl-col { text-align: center; }
.vgl-col img { border-radius: 3px; margin-bottom: 0.6rem; }
.vgl-col strong { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 500; display: block; }
.vgl-formel { font-size: 0.82rem; color: var(--muted); }
.vgl-rows { margin: 0; }
.vgl-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
}
.vgl-row dt {
  grid-column: 1 / -1;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600; margin-bottom: 0.3rem;
}
.vgl-row dd { margin: 0; font-size: 0.94rem; }
.vgl-row.is-key { background: var(--bg-soft); margin: 0 -1rem; padding: 0.7rem 1rem; }
.vgl-flag {
  text-transform: none; letter-spacing: 0; font-weight: 600;
  color: var(--klasse); margin-left: 0.5rem;
}
.vgl-fazit { font-size: 0.92rem; color: var(--ink-soft); margin: 1.2rem 0 0; }
@media (max-width: 560px) {
  .vgl-head, .vgl-row { grid-template-columns: 1fr; }
  .vgl-row dd + dd { border-top: 1px dotted var(--rule); padding-top: 0.4rem; margin-top: 0.4rem; }
}

/* ------- Klassen-Farbstreifen am Seitenkopf ------- */
.klasse-strip {
  height: 3px;
  background: var(--klasse);
}

/* ------- Strukturdiagramme -------
   Tragen die Erklaerung, nicht die Dekoration. Deshalb bekommen sie mehr Raum
   als der Fliesstext und stehen ohne Rahmen auf dem Papierton. */
.struct-figure {
  margin: 3rem 0;
}
.struct-figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.struct-figure figcaption {
  margin-top: 1.2rem;
  padding: 0 0.4rem;
}
.legend-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--warn);
  vertical-align: 0.05em;
  margin: 0 0.15em;
}
@media (min-width: 1000px) {
  .struct-figure { margin-left: -3rem; margin-right: -3rem; }
  .struct-figure figcaption { padding-left: 3rem; }
}

/* ------- Quellenapparat -------
   Traegt den Trust-Anspruch der Seite: jede Fachaussage laesst sich nachschlagen. */
.sources {
  margin-top: 2.5rem;
  padding-top: 0.5rem;
}
.sources ol {
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding-left: 1.6em;
}
.sources li { margin: 0.45em 0; }
.sources a { word-break: break-word; }
/* Tabelle im Fliesstext: schmal, ruhig, ohne Zebra-Streifen */
.datatable {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: 0.92rem;
}
.datatable th, .datatable td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.datatable th {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--accent-soft);
  white-space: nowrap;
}
.datatable td code { font-size: 0.9em; }
.datatable-scroll { overflow-x: auto; }

/* ------- Print ------- */
.print-hint {
  background: var(--accent-tint);
  border: 1px dashed var(--accent);
  padding: 0.8rem 1rem;
  border-radius: 4px;
  margin: 1.5rem 0;
  font-size: 0.93rem;
}
.print-hint::before { content: "🖨 "; }

@media print {
  body { font-size: 11pt; color: #000; background: #fff; }
  .site-header, .site-nav, .article-tabs, .site-footer, .breadcrumbs,
  .saison, .produkt-box, .print-hint, .quellen, aside.infobox,
  .last-edit, .kapitel-grid, .toc, .mock-badge, nav, .no-print { display: none !important; }
  main.layout, main.article-only {
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  h1, h2, h3 { color: #000; page-break-after: avoid; }
  a { color: #000; text-decoration: none; }
  .print-cheatsheet { display: block !important; }
  .hinweis { background: #f4f4f4; border-left-color: #000; }
}
.print-cheatsheet { display: none; }

/* ------- Amazon-Produktbox ------- */
.produkt-box {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0;
  margin: 2rem 0;
  overflow: hidden;
}
.produkt-werbung {
  background: var(--bg-soft);
  padding: 0.5rem 1.2rem;
  font-size: 0.83rem;
  border-bottom: 1px solid var(--rule);
}
.produkt-werbung summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 500;
}
.produkt-werbung p { margin: 0.6rem 0; font-size: 0.83rem; color: var(--muted); }
.produkt-inner {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.5rem;
  padding: 1.2rem;
}
@media (max-width: 540px) {
  .produkt-inner { grid-template-columns: 1fr; }
  .produkt-bild { max-width: 200px; }
}
.produkt-bild { display: block; }
.produkt-bild img { border-radius: 4px; }
.produkt-marke {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.produkt-titel { margin: 0.2rem 0 0.5rem; font-size: 1.15rem; }
.produkt-titel a { text-decoration: none; color: var(--ink); }
.produkt-beschreibung { font-size: 0.95rem; margin: 0.6rem 0; }
.produkt-procontra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0.8rem 0;
}
.produkt-procontra ul { margin: 0.3rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.pro-block strong { color: var(--ok); }
.contra-block strong { color: var(--warn); }
.produkt-fazit {
  background: var(--accent-tint);
  padding: 0.6rem 0.9rem;
  border-radius: 4px;
  font-size: 0.93rem;
  margin-top: 0.8rem;
}
.produkt-meta {
  display: flex; align-items: center;
  gap: 1rem; flex-wrap: wrap; margin-top: 1rem;
}
.produkt-preis {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  color: var(--accent-dark);
  font-weight: 500;
}
.produkt-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff !important;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
}
.produkt-btn:hover { background: var(--accent-dark); }

/* ------- Footer ------- */
.site-footer {
  background: var(--bg-soft);
  border-top: 3px solid var(--accent);
  padding: 1.8rem 0 1.4rem;
  margin-top: 3.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.site-footer .wrap { padding: 0 1.5rem; }
.foot-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: inherit;
}
.foot-brand img {
  flex-shrink: 0;
  border-radius: 4px;
}
.foot-brand > span {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
}
.foot-brand strong {
  color: var(--ink);
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
}
.foot-sub { font-size: 0.78rem; color: var(--muted); }
.foot-brand:hover strong { color: var(--accent-dark); }
/* Inhalt und Rechtstexte sind zwei nav-Elemente, sollen im Layout aber als ein
   Block rechts stehen. Ohne die Klammer wuerde space-between sie auseinanderziehen. */
.foot-navs { display: inline-flex; flex-wrap: wrap; gap: 1.4rem; }
.foot-nav { display: inline-flex; gap: 1.4rem; font-size: 0.9rem; }
.foot-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.2em 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.foot-nav a:hover {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}
.foot-meta {
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}
@media (max-width: 540px) {
  .foot-main { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .foot-navs { width: 100%; }
  .foot-nav { width: auto; }
}

/* ------- 404 ------- */
.notfound { text-align: center; padding: 4rem 0 2rem; }
.notfound h1 { font-size: 2.2rem; border: 0; }
.notfound p { color: var(--muted); }
.notfound .escape {
  position: relative;
  margin: 2rem auto 2rem;
  width: 320px; height: 80px;
  overflow: visible;
}
.notfound .escape svg {
  position: absolute; left: 0; top: 32px;
  animation: muecke-fliegt 4.5s ease-in 1s 1 forwards;
}
@keyframes muecke-fliegt {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  20%  { transform: translate(30px, -8px) rotate(-3deg); opacity: 1; }
  40%  { transform: translate(80px, 4px) rotate(2deg); }
  60%  { transform: translate(150px, -12px) rotate(-2deg); }
  80%  { transform: translate(240px, -20px) rotate(4deg); opacity: 0.7; }
  100% { transform: translate(340px, -50px) rotate(6deg); opacity: 0; }
}

/* ------- Legal-Seiten ------- */
.legal-content { padding: 0.5rem 0; }
.legal-content h2 { font-size: 1.4rem; margin-top: 2rem; }
.legal-content h3 { font-size: 1.1rem; }

/* ------- Reduced motion ------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Kleine Fussnote innerhalb einer Infobox-Zeile */
.ib-note { font-size: 0.78em; color: var(--muted); }

/* ------- Startseite: was schon steht ------- */
.startliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 3rem;
}
.startkarte {
  display: flex; flex-direction: column;
  color: var(--ink); text-decoration: none;
  border-top: 2px solid var(--accent);
  padding-top: 0.9rem;
}
.startkarte:hover { text-decoration: none; }
.startkarte img {
  border-radius: 3px; margin-bottom: 0.8rem;
  width: 100%; height: 150px; object-fit: cover;
  background: var(--paper);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.startkarte:hover img { opacity: 0.88; }
.startkarte strong {
  font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 500;
  margin-bottom: 0.3rem;
}
.startkarte:hover strong { color: var(--accent-dark); }
.startkarte span { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; }
.startkarte.is-text { justify-content: flex-start; }

/* Klassen-Punkt in Übersichtstabellen */
.kl-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--klasse); margin-right: 0.5em; vertical-align: 0.02em;
}
.tbl-sub { font-size: 0.85em; color: var(--muted); }

/* ------- Legal-Seiten ------- */
.legal-box {
  background: var(--bg-soft);
  border-left: 2px solid var(--rule);
  padding: 0.9rem 1.2rem;
  margin: 1rem 0 1.5rem;
  font-style: normal;
  font-size: 0.94rem;
  line-height: 1.7;
}

/* =====================================================================
   Mineralabbildung mit Sammlungsetikett
   Das Kärtchen sitzt wie in einer Museumsvitrine unten links am Stück.
   Bewusst Text und kein Bildbestandteil: lesbar, kopierbar, uebersetzbar.
   ===================================================================== */
.mineral-figure { margin: 3rem 0; }
.mf-frame { position: relative; }
.mf-frame img {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mf-frame .lightbox-trigger { display: block; cursor: zoom-in; }
.mf-frame:hover img { box-shadow: 0 12px 32px -12px rgba(31, 35, 40, 0.28); }

.mf-label {
  position: absolute;
  left: 1.6rem;
  bottom: 1.4rem;
  background: #FBF9F4;
  border: 1px solid rgba(31, 35, 40, 0.14);
  border-radius: 2px;
  padding: 0.6rem 1.1rem 0.65rem;
  min-width: 8.5rem;
  transform: rotate(-1.2deg);
  box-shadow: 0 3px 10px -3px rgba(31, 35, 40, 0.22);
  pointer-events: none;
}
/* Feine Linie oben wie auf einem Sammlungskaertchen */
.mf-label::before {
  content: "";
  position: absolute;
  left: 1.1rem; right: 1.1rem; top: 0.3rem;
  height: 1px;
  background: var(--klasse);
  opacity: 0.5;
}
.mf-name {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.mf-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.12rem;
}
.mf-cls {
  display: block;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--klasse);
  font-weight: 600;
  margin-top: 0.3rem;
}
.mf-caption {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.7rem;
  line-height: 1.55;
  padding: 0 0.4rem;
}
@media (max-width: 560px) {
  .mf-label {
    left: 0.9rem; bottom: 0.9rem;
    padding: 0.45rem 0.8rem 0.5rem;
    min-width: 0;
  }
  .mf-name { font-size: 0.9rem; }
  .mf-sub { font-size: 0.72rem; }
  .mf-cls { font-size: 0.6rem; }
}
@media (min-width: 1000px) {
  .mineral-figure.wide { margin-left: -3rem; margin-right: -3rem; }
  .mineral-figure.wide .mf-caption { padding-left: 3rem; }
}

/* Legende der Mineralklassen auf der Uebersicht */
.klassen-legende { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin: 1.2rem 0 1.8rem; }
.kl-chip {
  display: inline-flex; align-items: center;
  font-size: 0.82rem; color: var(--ink-soft);
}
.kl-chip.is-leer { opacity: 0.42; }
.tbl-hint { font-size: 0.82rem; color: var(--muted); margin-top: -0.6rem; }
/* Nur die Uebersichtstabellen von Mineralen und Gesteinen haben in der letzten
   Spalte kurze Messwerte, die nicht umbrechen sollen. Als globale Regel erzwang
   das bei Fliesstext in der letzten Spalte unnoetiges Querscrollen. */
.datatable.messwerte td:last-child { white-space: nowrap; }

/* Die Karten der Mineral-Steckbriefe tragen die Farbe ihrer Klasse in der Oberkante */
.startkarte.kl-elemente, .startkarte.kl-sulfide, .startkarte.kl-halogenide,
.startkarte.kl-oxide, .startkarte.kl-karbonate, .startkarte.kl-sulfate,
.startkarte.kl-phosphate, .startkarte.kl-silikate, .startkarte.kl-organisch {
  border-top-color: var(--klasse);
}

/* Gesteinsgruppen: eigene Farben, klar unterscheidbar von den Mineralklassen */
.gr-magmatisch { --klasse: #A85A32; }  /* Schmelze, warm */
.gr-sediment   { --klasse: #97803F; }  /* Sand, ocker */
.gr-metamorph  { --klasse: #4A6E7E; }  /* Druck, kühl */
.startkarte.gr-magmatisch, .startkarte.gr-sediment, .startkarte.gr-metamorph {
  border-top-color: var(--klasse);
}

/* =====================================================================
   Bestimmungsschluessel
   Der Zustand steckt in der URL, es gibt kein JavaScript. Optisch soll
   trotzdem klar sein, dass hier etwas bedient wird und nicht gelesen:
   die Optionen sind grosse Flaechen, der bisherige Pfad steht als Kette
   darueber und ist an jeder Stelle zurueckklickbar.
   ===================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sk-pfad {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin: 0 0 1.4rem;
}
.sk-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.32rem 0.7rem;
  background: var(--accent-tint);
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--accent-dark);
  text-decoration: none;
  transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sk-chip:hover { background: var(--accent-soft); text-decoration: none; }
.sk-chip-x { font-size: 1.05em; line-height: 1; opacity: 0.6; }
.sk-chip:hover .sk-chip-x { opacity: 1; }
.sk-reset {
  font-size: 0.82rem; color: var(--muted); margin-left: 0.3rem;
  border-bottom: 1px solid var(--rule);
}
.sk-reset:hover { color: var(--ink); text-decoration: none; }

.sk-stand {
  font-size: 0.95rem; color: var(--muted);
  padding-bottom: 1rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.sk-stand strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem; color: var(--ink); font-weight: 500;
}

.sk-frage h2 { margin-top: 0; }
.sk-frage h2::before { display: none; }

.sk-optionen { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: 0.6rem; }
.sk-optionen a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.2rem 1rem;
  padding: 1rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-soft);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sk-optionen a:hover {
  border-left-color: var(--accent);
  transform: translateX(3px);
  text-decoration: none;
}
/* Alle drei Zellen explizit setzen: ohne feste Spalte wandert der Zaehler
   durch die Auto-Platzierung vor das Label. */
.sk-opt-label { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 1.02rem; }
.sk-opt-sub   { grid-column: 1; grid-row: 2; font-size: 0.86rem; color: var(--muted); }
.sk-opt-n {
  grid-column: 2; grid-row: 1 / span 2;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem; line-height: 1;
  color: var(--accent);
  min-width: 2ch; text-align: right;
}

.sk-tipp {
  font-size: 0.88rem; color: var(--muted);
  background: var(--bg-soft);
  padding: 0.8rem 1rem;
  border-radius: 4px;
}
.sk-tipp a { margin-left: 0.3rem; white-space: nowrap; }

.sk-leer {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 4px;
  padding: 1.1rem 1.3rem;
}
.sk-leer p:last-child { margin-bottom: 0; }
.sk-leer strong { color: var(--warn-dark); }

.sk-ergebnis { margin-top: 3rem; }
.sk-treffer { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
@media (min-width: 620px) {
  .sk-treffer { grid-template-columns: repeat(2, 1fr); }
}
.sk-treffer a {
  display: flex; align-items: center; gap: 0.9rem;
  height: 100%;
  padding: 0.7rem 0.9rem 0.7rem 0.7rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--klasse);
  border-radius: 4px;
  text-decoration: none; color: var(--ink);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sk-treffer a:hover { transform: translateY(-2px); text-decoration: none; }
.sk-t-bild {
  flex: 0 0 62px; width: 62px; height: 62px;
  border-radius: 3px; overflow: hidden;
  background: var(--bg-soft);
  display: grid; place-items: center;
}
.sk-t-bild img { width: 100%; height: 100%; object-fit: cover; }
.sk-t-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.sk-t-text strong { font-size: 1rem; }
.sk-t-kurz { font-size: 0.84rem; color: var(--ink-soft); }
.sk-t-daten { font-size: 0.78rem; color: var(--muted); }

/* Einstiegskachel auf /bestimmen/ */
.sk-teaser {
  display: block;
  margin: 2rem 0 3rem;
  padding: 1.5rem 1.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 4px;
  text-decoration: none; color: var(--ink);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sk-teaser:hover { transform: translateY(-2px); text-decoration: none; }
.sk-teaser strong {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem; font-weight: 500; margin-bottom: 0.3rem;
}
.sk-teaser span { display: block; color: var(--ink-soft); font-size: 0.95rem; }
.sk-teaser em {
  display: inline-block; margin-top: 0.8rem;
  font-style: normal; font-weight: 600; color: var(--accent);
}

/* Galerie der sieben Kristallsysteme */
.ksys-galerie {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  margin: 2rem 0;
}
.ksys-karte {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.35rem;
  padding: 1.1rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.ksys-karte strong { font-size: 0.98rem; }
.ksys-regel { font-size: 0.82rem; color: var(--ink-soft); }
.ksys-bsp { font-size: 0.76rem; color: var(--muted); line-height: 1.45; }

/* Vier Textkarten wirken im Dreierraster unruhig, weil die vierte allein in
   der zweiten Zeile steht. Zwei mal zwei ist hier die ruhigere Aufteilung. */
.startliste.paarweise { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .startliste.paarweise { grid-template-columns: repeat(2, 1fr); }
}

/* Summenformel als zweite Zeile in der Namensspalte. Spart eine ganze Spalte
   und haelt breite Datentabellen in der Artikelbreite. */
.tbl-formel { font-size: 0.82rem; color: var(--muted); }

/* Ampel in der Giftigkeitstabelle. Die Farbe traegt keine Information allein,
   der Text sagt dasselbe, damit es auch ohne Farbwahrnehmung lesbar bleibt. */
.gift-ok   { color: var(--ok); }
.gift-warn { color: var(--warn); }
.gift-nein { color: var(--danger); font-weight: 600; }

/* ===========================================================================
   Kreuzwortraetsel-Cluster.
   Die Wortleiste ist zum Ueberfliegen da, die Tabelle darunter zum Nachlesen.
   Beides zeigt dieselben Woerter, das ist Absicht: der eine Besucher will in
   zwei Sekunden die Loesung, der andere wissen, was das Wort bedeutet.
   =========================================================================== */

.rw-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.8rem;
  margin: 1.6rem 0 2.2rem;
}
.rw-hub a {
  display: block;
  padding: 0.9rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--klasse);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rw-hub a:hover, .rw-hub a:focus-visible { background: var(--bg-soft); }
.rw-hub strong { display: block; font-size: 1.05rem; }
.rw-hub span { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; }

/* ------- Suchmaske ------- */
.rw-maske {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.9rem 1rem 0.7rem;
  margin: 1.6rem 0 2rem;
}
.rw-maske-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.rw-maske-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  flex: 0 0 8.5rem;
}
.rw-zahlen { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
.rw-zahlen a, .rw-zahlen span {
  display: inline-block;
  min-width: 2rem;
  padding: 0.24rem 0.5rem;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: 0.86rem;
  text-decoration: none;
  color: var(--ink-soft);
}
.rw-zahlen a:hover, .rw-zahlen a:focus-visible { background: var(--klasse); color: #fff; border-color: var(--klasse); }
.rw-zahlen .ist-aktiv { background: var(--klasse); color: #fff; border-color: var(--klasse); font-weight: 600; }
.rw-maske input[type="text"] {
  font-family: 'Inter', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  width: 10rem;
}
.rw-maske button {
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  padding: 0.34rem 0.9rem;
  background: var(--klasse);
  color: #fff;
  border: 1px solid var(--klasse);
  border-radius: 3px;
  cursor: pointer;
}
.rw-maske button:hover { filter: brightness(0.9); }
.rw-reset, .rw-hilfe { font-size: 0.82rem; color: var(--muted); }
.rw-hilfe { margin: 0.2rem 0 0; }
.rw-hilfe code {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  letter-spacing: 0.1em;
}

/* ------- Ergebnis ------- */
.rw-status { font-size: 0.92rem; color: var(--muted); margin: 0 0 1.4rem; }
.rw-leer {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 4px;
  padding: 0.9rem 1rem;
  margin: 1.4rem 0;
}
.rw-gruppe { margin: 2.2rem 0; scroll-margin-top: 1rem; }
.rw-gruppe h2 {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  border-bottom: 2px solid var(--klasse);
  padding-bottom: 0.3rem;
}
.rw-anzahl {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}

/* Woerter im Rasterlook des Raetsels: Versalien mit weitem Zeichenabstand. */
.rw-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0.9rem 0;
  padding: 0;
}
.rw-leiste li { margin: 0; }
.rw-leiste a, .rw-leiste li > span:only-child, .rw-leiste li {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.09em;
}
.rw-leiste a {
  display: inline-block;
  padding: 0.28rem 0.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.rw-leiste a:hover, .rw-leiste a:focus-visible {
  background: var(--klasse);
  border-color: var(--klasse);
  color: #fff;
}
.rw-haeufig {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0.6rem 0 1rem;
  padding-top: 0.6rem;
  border-top: 1px dotted var(--rule);
  letter-spacing: 0.04em;
}

.rw-tabelle th[scope="row"] { width: 11rem; }
.rw-ae, .rw-heute {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--muted);
  white-space: normal;
}
.rw-heute { display: inline; margin-left: 0.3rem; font-style: italic; }

/* ------- Praezisierte Fragen ------- */
.rw-fragen { margin: 1.4rem 0 2rem; }
.rw-frage {
  border-left: 3px solid var(--klasse);
  padding: 0.1rem 0 0.1rem 0.9rem;
  margin: 1.3rem 0;
}
.rw-frage h3 { margin: 0 0 0.3rem; font-size: 1.02rem; }
.rw-frage p { margin: 0 0 0.5rem; font-size: 0.93rem; color: var(--ink-soft); }
.rw-leiste-klein li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  background: var(--bg-soft);
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 600;
}
.rw-len {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}

.rw-begriffe th[scope="row"], .rw-altnamen th[scope="row"] { letter-spacing: 0.07em; }
.rw-begriffe td:nth-child(2), .rw-altnamen td:nth-child(2) {
  text-align: center;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .rw-maske-label { flex: 1 0 100%; }
  .rw-tabelle th[scope="row"] { width: auto; }
  .rw-begriffe, .rw-altnamen { font-size: 0.85rem; }
}

/* ===========================================================================
   404. Die Seite ist als Steckbrief eines Minerals gebaut, das es nicht gibt.
   Die Bausteine hier sind bewusst naeher am Sachbuch als am Fehlerdialog:
   Fundprotokoll, Fundkarte, Grabungsknopf.
   =========================================================================== */

/* Der Stempel sitzt auf dem Protokoll, nicht auf der Illustration: Ein
   Dokument wird abgestempelt, eine Sachbuchzeichnung nicht. */
.protokoll-blatt { position: relative; }
.stempel {
  position: absolute;
  top: -0.9rem;
  right: -0.4rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.35rem 0.9rem 0.3rem;
  border: 2px solid var(--danger);
  border-radius: 4px;
  color: var(--danger);
  background: rgba(246, 244, 240, 0.72);
  transform: rotate(-7deg);
  /* Gummistempel treffen nie ganz sauber, ein Hauch Transparenz und eine
     doppelte Linie kommen dem naeher als eine gestochen scharfe Box. */
  opacity: 0.9;
  box-shadow: inset 0 0 0 1px rgba(163, 58, 42, 0.35);
  pointer-events: none;
}
.stempel-zahl {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
}
.stempel-wort {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-top: 0.15rem;
  padding-top: 0.18rem;
  border-top: 1px solid var(--danger);
  width: 100%;
  text-align: center;
}

.fundprotokoll {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.2rem;
  margin: 1.4rem 0 2rem;
  padding: 1rem 1.1rem;
  background: var(--bg-soft);
  border-left: 3px solid var(--klasse);
  border-radius: 3px;
  font-size: 0.93rem;
}
.fundprotokoll dt {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.15rem;
}
.fundprotokoll dd { margin: 0; }
.fundprotokoll code {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  font-size: 0.88rem;
  /* Lange Pfade duerfen umbrechen, sonst schiebt eine kaputte Adresse
     die halbe Seite nach rechts. */
  overflow-wrap: anywhere;
}

.fundkarte {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  margin: 1.4rem 0 1rem;
  padding: 0.9rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.fundkarte-bild {
  flex: 0 0 132px;
  display: block;
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
}
.fundkarte-bild img { width: 132px; height: 100px; object-fit: cover; }
.fundkarte-text { display: flex; flex-direction: column; gap: 0.2rem; }
.fundkarte-text strong { font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 500; }
.fundkarte-text strong a { text-decoration: none; color: var(--ink); }
.fundkarte-text strong a:hover { color: var(--accent-dark); }
.fundkarte-text span { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; }
.fundkarte-daten {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem !important;
  color: var(--muted) !important;
}

.weitergraben-aktion { margin: 0 0 2.2rem; }
.btn-graben {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  background: var(--klasse);
  color: #fff;
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-graben:hover, .btn-graben:focus-visible { filter: brightness(0.88); color: #fff; }

.ziel-liste { margin: 1rem 0 2rem; }
.ziel-liste li { margin-bottom: 0.4rem; }

@media (max-width: 560px) {
  .stempel { top: -0.7rem; right: 0.2rem; padding: 0.25rem 0.7rem 0.22rem; }
  .stempel-zahl { font-size: 1.2rem; }
  .stempel-wort { font-size: 0.6rem; letter-spacing: 0.22em; }
  .fundprotokoll { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .fundprotokoll dd { margin-bottom: 0.7rem; }
  .fundkarte { flex-direction: column; align-items: flex-start; }
  .fundkarte-bild, .fundkarte-bild img { width: 100%; flex: none; }
}

/* ===========================================================================
   Suche. Das Formular im Kopf funktioniert ohne JavaScript und fuehrt dann
   auf /suche/. Die Vorschlagsliste blendet suche.js darunter ein.
   =========================================================================== */

.kopfsuche {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 0 1 300px;
}
.kopfsuche input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--rule);
  border-right: 0;
  border-radius: 3px 0 0 3px;
  background: var(--bg);
  color: var(--ink);
}
.kopfsuche input[type="search"]::placeholder { color: var(--muted); }
.kopfsuche input[type="search"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--paper);
}
.kopfsuche button {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem;
  border: 1px solid var(--accent);
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.kopfsuche button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* Vorschlaege. Bewusst als Liste unter dem Feld, nicht als Overlay ueber dem
   Inhalt: Der Kopf ist schmal, ein Overlay wuerde die Navigation verdecken. */
.kopfsuche-vorschlaege {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 40;
  margin: 0; padding: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(31, 35, 40, 0.13);
  display: none;
  max-height: 60vh;
  overflow-y: auto;
}
.kopfsuche-vorschlaege.ist-offen { display: block; }
.kopfsuche-vorschlaege li { border-bottom: 1px solid var(--rule); }
.kopfsuche-vorschlaege li:last-child { border-bottom: 0; }
.kopfsuche-vorschlaege a {
  display: block;
  padding: 0.5rem 0.7rem;
  text-decoration: none;
  color: var(--ink);
}
.kopfsuche-vorschlaege a:hover,
.kopfsuche-vorschlaege li[aria-selected="true"] a { background: var(--bg-soft); }
.kopfsuche-vorschlaege strong {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
}
.kv-art {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.1rem;
}
.kv-kurz {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: 0.1rem;
}

/* ------- Ergebnisseite ------- */
.suche-gross {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.4rem 0 2rem;
  padding: 1rem;
  background: var(--bg-soft);
  border-radius: 4px;
}
.suche-gross label {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 0 0 auto;
}
.suche-gross input[type="search"] {
  flex: 1 1 16rem;
  min-width: 0;
  font-size: 1rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
}
.suche-gross button {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.suche-gross button:hover { background: var(--accent-dark); }

.such-status, .such-leer { font-size: 0.95rem; }
.such-leer {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 4px;
  padding: 0.9rem 1rem;
}
.such-liste { list-style: none; margin: 1.4rem 0; padding: 0; counter-reset: none; }
.such-liste li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.such-liste li:first-child { border-top: 1px solid var(--rule); }
.such-liste a {
  font-family: 'Inter', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
}
.such-art {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.such-kurz { display: block; font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.15rem; }

@media (max-width: 860px) {
  .header-row { flex-wrap: wrap; }
  .kopfsuche { flex: 1 1 100%; order: 3; }
  .brand-sub { display: none; }
}

/* ===========================================================================
   Amazon-Produktboxen. Nur im Bestimmen-Cluster, wo Werkzeuge keinen
   Gesundheitsbezug haben. Auf Steckbriefen, im Bedeutungs-Cluster und auf den
   beiden Wikipedia-Zielseiten stehen keine Produktlinks.
   =========================================================================== */

.amazon-box {
  margin: 1.8rem 0;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--warn);
  border-radius: 4px;
}
.ab-kopf { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.5rem; }
.ab-marke {
  align-self: flex-start;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warn-dark);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 2px;
  padding: 0.08rem 0.4rem;
  margin-bottom: 0.25rem;
}
.ab-kopf strong { font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 500; }
.ab-zweck { font-family: 'Inter', sans-serif; font-size: 0.82rem; color: var(--muted); }
.ab-text { font-size: 0.93rem; color: var(--ink-soft); margin: 0 0 0.9rem; }
.ab-link {
  display: inline-block;
  padding: 0.45rem 1rem;
  background: var(--warn);
  color: #fff;
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}
.ab-link:hover, .ab-link:focus-visible { filter: brightness(0.88); color: #fff; text-decoration: none; }

.affiliate-hinweis {
  margin: 2rem 0 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--muted);
}

/* Vergleichstabelle auf der Katzengold-Seite. Die zwei Zeilen, die die Frage
   allein entscheiden, sind hervorgehoben, damit man sie im Überflug findet. */
/* Vier gleich breite Spalten. Ohne table-layout: fixed richtet der Browser
   die Breiten nach dem laengsten Inhalt aus, und die Formelspalte wuerde
   schmal, die Formspalte breit. Der Vergleich liest sich besser, wenn die
   drei Minerale optisch gleichrangig nebeneinanderstehen. */
.kg-tabelle { table-layout: fixed; }
.kg-tabelle th, .kg-tabelle td { width: 25%; white-space: normal; overflow-wrap: break-word; }
.kg-tabelle .is-key { background: var(--accent-tint); }
.kg-flag {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.kg-sub { font-size: 0.8rem; color: var(--muted); }
.kg-tabelle .swatches { gap: 0.3rem; }
.kg-tabelle .swatch span { font-size: 0.8rem; }

@media (max-width: 640px) {
  .kg-tabelle { font-size: 0.85rem; }
  .kg-tabelle th[scope="row"] { width: auto; }
}

/* Videokarte: Verweis auf ein Video, das auf YouTube liegt.
   Kein Player, nur ein lokales Vorschaubild mit Link. Das Dreieck ist ein
   reines CSS-Zeichen, damit kein zusaetzliches Bild noetig ist. */
.video-karte {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
  margin: 2rem 0;
  padding: 1.2rem;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.video-karte-bild {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}
.video-karte-bild img { width: 100%; height: auto; }
.video-karte-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(31, 35, 40, 0.82);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.video-karte-play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #FFFFFF;
  transform: translateX(3px);
}
.video-karte-bild:hover .video-karte-play { background: var(--accent-dark); }
.video-karte-text h2 {
  margin: 0.1rem 0 0.4rem;
  font-size: 1.25rem;
}
.video-karte-text p { margin: 0 0 0.5rem; }
.video-karte-kicker {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.video-karte-hinweis {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .video-karte { grid-template-columns: 1fr; gap: 1rem; }
}

/* Zwei-Klick-Player. Die Buehne haelt das 16:9-Verhaeltnis, damit beim
   Austausch von Bild gegen iframe nichts springt. */
.video-player { margin: 2rem 0; }
.video-player-buehne {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink);
}
.video-player-buehne img,
.video-player-buehne iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.video-player-start {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Beschriftung nach unten, damit die Bildmitte frei bleibt und der Text
     des Vorschaubilds nicht mit dem Overlay konkurriert. */
  justify-content: flex-end;
  gap: 0.25rem;
  padding-bottom: 1.1rem;
  width: 100%;
  background: rgba(31, 35, 40, 0.35);
  border: 0;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  color: #FFFFFF;
  transition: background 0.15s ease;
}
.video-player-start:hover,
.video-player-start:focus-visible { background: rgba(29, 79, 71, 0.55); }
.video-player-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(31, 35, 40, 0.85);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.video-player-play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent #FFFFFF;
  transform: translateX(4px);
}
.video-player-start:hover .video-player-play { background: var(--accent-dark); }
.video-player-label {
  font-size: 0.95rem;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.video-player-dauer {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.video-player figcaption { margin-top: 0.6rem; }
.video-player-hinweis {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
}

/* =====================================================================
   Rubrik-Uebersichten (rubrik.php)
   ===================================================================== */
.eintrag-karten {
  list-style: none; padding: 0; margin: 0 0 2rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .6rem;
}
.eintrag-karten a {
  display: block; padding: .75rem 1rem; background: var(--paper);
  border: 1px solid var(--rule); border-left: 4px solid var(--klasse, var(--accent));
  border-radius: 4px; text-decoration: none; color: var(--ink); font-weight: 600;
}
.eintrag-karten a:hover, .eintrag-karten a:focus-visible { background: var(--accent-tint); }
.hinweis-klein { color: var(--muted); font-size: .92rem; }
.az-sprung { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1.5rem; }
.az-sprung a {
  display: inline-block; min-width: 2rem; padding: .3rem .45rem; text-align: center;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
  text-decoration: none; font-weight: 600; color: var(--klasse, var(--accent));
}
.az-sprung a:hover { background: var(--accent-tint); }
.az-liste { columns: 3 14rem; column-gap: 2rem; }
.az-gruppe { break-inside: avoid; margin-bottom: 1.2rem; scroll-margin-top: 1rem; }
.az-gruppe h3 {
  margin: 0 0 .35rem; font-size: 1.1rem; color: var(--klasse, var(--accent));
  border-bottom: 2px solid var(--gold); padding-bottom: .15rem;
}
.az-gruppe ul { list-style: none; margin: 0; padding: 0; }
.az-gruppe li { padding: .12rem 0; line-height: 1.4; }
.az-gruppe li a { font-weight: 600; }
.az-gruppe .ref-pending { color: var(--muted); }
/* In der A-Z-Liste sieht ein noch nicht geschriebener Eintrag nicht wie ein Link aus */
.az-gruppe .ref-pending { text-decoration: none; border-bottom: 0; cursor: default; }

/* =====================================================================
   Startseite
   ===================================================================== */
.rubrik-kacheln {
  list-style: none; padding: 0; margin: 1.5rem 0 2.5rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem;
}
.rubrik-kacheln a {
  display: flex; flex-direction: column; gap: .4rem; height: 100%;
  padding: 1.1rem 1.2rem 1rem; background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-top: 5px solid var(--klasse, var(--accent));
  border-radius: 4px; text-decoration: none;
}
.rubrik-kacheln a:hover, .rubrik-kacheln a:focus-visible { background: var(--accent-tint); }
.rubrik-kacheln strong { font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; color: var(--klasse, var(--accent)); }
.rubrik-kacheln span { font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.rubrik-kacheln small { margin-top: auto; color: var(--muted); font-size: .82rem; }
.eintrag-karten li[class^="rb-"] a { border-left-color: var(--klasse); }

/* =====================================================================
   Koog-Steckbrief und Lagekarte
   ===================================================================== */
.namenzeile { margin: -.4rem 0 1rem; color: var(--muted); font-size: .95rem; }
.ibkarte { margin: 0; padding: .6rem .6rem .3rem; background: #dfe8ee; border-bottom: 1px solid var(--rule); }
.ibkarte svg { display: block; width: 100%; height: auto; }
.ibkarte figcaption { font-size: .72rem; color: var(--muted); text-align: center; padding-top: .25rem; }
.nk-land { fill: var(--bg-soft); stroke: #9aa7ae; stroke-width: .6; }
.nk-mittel { fill: none; stroke: var(--rb-koege); stroke-width: 1.1; opacity: .8; }
.nk-deich { fill: none; stroke: var(--gold); stroke-width: 2.2; }
.nk-punkt { fill: var(--rb-geschichte); stroke: #fff; stroke-width: 2.5; }
.nk-halo { fill: var(--rb-geschichte); opacity: .22; }
.verwandt { columns: 2 12rem; padding-left: 1.1rem; }

.literatur h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.literatur ul { font-size: .88rem; color: var(--muted); padding-left: 1.1rem; }