/* planmycamper.de Notbetrieb -- Stylesheet fuer die statische Ratgeber-Seite.

   Farbsystem und Typografie sind aus dem Nachfolgeprojekt uebernommen,
   damit sich der Notbetrieb erkennbar aus derselben Handschrift speist.
   Beide Faerbungen (hell/dunkel) sind uebernommen, gesteuert ueber
   prefers-color-scheme.

   Keine externen Schriften, keine CDN-Verweise, kein Zaehlpixel: nur
   Systemschriften, alles in dieser einen Datei. Ein einziges kleines,
   eingebettetes Skript (siehe _skript.html) stellt den aktiven Abschnitt im
   Inhaltsverzeichnis und den Nach-oben-Knopf -- ohne Netzzugriff, ohne
   Speicher, ohne Cookie; ohne dieses Skript bleibt die Seite vollstaendig
   lesbar und bedienbar (siehe .nach-oben unten). */

:root {
  /* Moos: die Grünskala der Seite. Ersetzt die frühere Pine-Skala
     (blaustichiges Tannengrün) durch das olivere Grün der Entwürfe --
     wärmer, näher an Zeltplane und Kiefernnadel als an Petrol. */
  --moos-900: #212a1c;
  --moos-800: #2f3a27;
  --moos-700: #445235;
  --moos-600: #586a46;
  --moos-500: #74875f;
  --moos-300: #a8b894;
  --moos-200: #c9d5b6;
  --moos-100: #e5ecd9;
  --moos-50:  #f2f6ea;

  --lehm-600: #b4531f;
  --lehm-100: #fbe8dc;

  --ink: #1d2418;
  --ink-soft: #55604c;
  /* #838d79 kam auf dem cremefarbenen Grund nur auf 3,3:1 und lag damit
     unter den 4,5:1, die WCAG AA fuer Fliesstext verlangt -- betraf u. a.
     die Lesezeit auf jeder Karte. #636c5b bringt 5,2:1 auf dem Grund,
     5,5:1 auf Weiss und 4,7:1 auf der abgesenkten Flaeche. */
  --ink-faint: #636c5b;
  --line: #e4e2d6;

  /* paper = Karten und Kopfleiste (weiß), grund = Seitenhintergrund
     (cremefarben). Vorher war beides weiß; die Trennung ist es, die
     Karten überhaupt erst als Karten lesbar macht. */
  --paper: #ffffff;
  --grund: #faf8f2;
  --paper-warm: #f6f4ec;
  --paper-sunk: #f0eee3;

  --brand: var(--moos-700);
  --brand-strong: var(--moos-800);
  --accent: var(--lehm-600);
  --clay-600: var(--lehm-600);
  --clay-100: var(--lehm-100);
  --pine-100: var(--moos-100);
  --pine-600: var(--moos-600);
  --pine-800: var(--moos-800);
  --pine-900: var(--moos-900);

  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgb(33 42 28 / 5%), 0 8px 24px rgb(33 42 28 / 6%);
  --shadow-lift: 0 2px 4px rgb(33 42 28 / 8%), 0 18px 44px rgb(33 42 28 / 13%);

  --wrap: 1180px;
  --measure: 42rem;

  /* Keine externe Schrift (siehe Kopfkommentar): Anzeigeschrift und
     Fließtext teilen sich denselben Systemstapel. Der Unterschied
     entsteht über Schnitt und Laufweite, nicht über eine zweite Datei --
     die Entwürfe setzen ebenfalls durchgehend eine Grotesk. */
  --font-text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-text);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef1e9;
    --ink-soft: #bcc4b2;
    --ink-faint: #929c88;
    --line: #333d2b;
    --paper: #191f16;
    --grund: #12170f;
    --paper-warm: #1c2318;
    --paper-sunk: #222a1d;
    --brand: #9fbc80;
    --brand-strong: #b9d09e;
    --accent: #f0894a;
    --lehm-100: #33200f;
    --moos-100: #26301d;
    --moos-200: #3a4a2c;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / 50%), 0 16px 40px rgb(0 0 0 / 45%);
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* Zweite Sicherung gegen waagerechtes Scrollen zusaetzlich zu den engeren
   Regeln unten (Tabellen-Huelle, Rubriken-Nav) -- ein einzelnes zu breites
   Element darf die ganze Seite nie seitlich verschieben. */
html { -webkit-text-size-adjust: 100%; max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-strong); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 750;
  letter-spacing: -.022em;
}
h1 { font-size: clamp(2rem, 1.45rem + 2.1vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); }
h3 { font-size: clamp(1.12rem, 1rem + .45vw, 1.3rem); }

p { overflow-wrap: break-word; word-break: break-word; }

.huelle { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* ---------- Kopfbereich ---------- */
.sprung-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius) 0; font-weight: 650; text-decoration: none;
}
.sprung-link:focus { left: 0; color: #fff; }

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.kopf-zeile { display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; min-height: 68px; padding-block: .6rem; }
.marke {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 750; font-size: 1.2rem;
  letter-spacing: -.025em;
  color: var(--ink); text-decoration: none; flex: none;
}
.marke:hover { color: var(--brand); }
.marke-symbol { color: var(--brand); flex: none; }
.marke-endung { color: var(--ink-faint); font-weight: 600; }

/* min-width: 0 ist der Punkt, an dem es haengt: ohne das kann ein
   Flex-Kind nicht unter seine Inhaltsbreite schrumpfen, die Navigation
   erzwingt ihre volle Breite und schiebt Lupe und Knopf in eine dritte
   Zeile. */
.rubriken-nav { margin-left: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.rubriken-nav::-webkit-scrollbar { display: none; }
.rubriken-nav ul { display: flex; gap: .1rem; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: flex-end; }
.rubriken-nav a {
  display: block; padding: .45rem .55rem; border-radius: 9px;
  color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .845rem;
  white-space: nowrap;
}
.rubriken-nav a:hover { background: var(--moos-50); color: var(--brand-strong); }

.kopf-aktionen { display: flex; align-items: center; gap: .5rem; flex: none; }
.kopf-suche {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  color: var(--ink-soft); text-decoration: none;
}
.kopf-suche:hover { background: var(--paper-sunk); color: var(--ink); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .7rem 1.4rem; border-radius: 999px;
  font-weight: 650; font-size: .93rem; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.knopf--voll { background: var(--moos-600); color: #fff; }
.knopf--voll:hover { background: var(--moos-700); color: #fff; }
.knopf--rand { border-color: var(--line); background: var(--paper); color: var(--ink); }
.knopf--rand:hover { border-color: var(--moos-300); background: var(--moos-50); color: var(--brand-strong); }
.knopf--hell { background: var(--paper); color: var(--moos-800); }
.knopf--hell:hover { background: var(--moos-50); color: var(--moos-900); }
.knopf--klein { padding: .55rem 1.05rem; font-size: .87rem; }

@media (max-width: 900px) {
  .kopf-knopf { display: none; }
}
@media (max-width: 760px) {
  .kopf-zeile { flex-wrap: wrap; }
  .rubriken-nav { margin-left: 0; width: 100%; order: 3; overflow-x: auto; }
  .rubriken-nav ul { flex-wrap: nowrap; justify-content: flex-start; }
  .kopf-aktionen { margin-left: auto; }
}

/* nur für Screenreader */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Brotkrume ---------- */
.brotkrume { font-size: .87rem; color: var(--ink-faint); margin: 1.6rem 0 1rem; }
.brotkrume ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.brotkrume li::after { content: "›"; margin-left: .4rem; color: var(--line); }
.brotkrume li:last-child::after { content: ""; }
.brotkrume a { color: var(--ink-faint); text-decoration: none; }
.brotkrume a:hover { color: var(--brand); }

/* ---------- Artikel ---------- */
main.artikel { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; padding-bottom: 4rem; }
main.artikel h1 { margin-top: 0; }
/* Auf Artikelseiten schafft die Brotkrume den Abstand zur Kopfleiste. Auf
   404, 410, Impressum und Datenschutz gibt es keine -- dort klebte die
   Ueberschrift sonst direkt unter der Leiste. */
main.artikel > h1:first-child { margin-top: 2.75rem; }
.rechtstext { max-width: 52rem; }
.rechtstext .artikel-rumpf { font-size: 1.02rem; }

/* ---------- Artikelkopf ---------- */
/* Der Aufmacher lag früher zweispaltig neben der Überschrift und war
   dadurch klein und beliebig. Jetzt steht er in voller Spaltenbreite
   unter Kennzeichen, Titel und Metazeile -- dieselbe Ordnung wie in den
   Entwürfen und die, in der man einen Artikel auch liest. */
.artikel-kopf { margin-bottom: 1.6rem; }
.artikel-kopf h1 { margin: 0 0 .9rem; }

.kennzeichen {
  display: inline-block; margin: 0 0 1rem;
  padding: .35rem .85rem; border-radius: 999px;
  background: var(--moos-100); color: var(--moos-800);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  text-decoration: none;
}
.kennzeichen:hover { background: var(--moos-200); color: var(--moos-900); }

.artikel-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem;
  margin: 0; color: var(--ink-faint); font-size: .89rem;
}
.meta-teil { display: inline-flex; align-items: center; gap: .45rem; }
.meta-teil svg { flex: none; }
.meta-teil--archiv { color: var(--accent); }

.aufmacher-bild-huelle { margin: 0 0 1.9rem; }

/* Herkunftshinweis unter den grossen Abbildungen. Alle Bilder dieser Seite
   sind KI-generiert; Art. 50 Abs. 4 KI-VO verlangt die Offenlegung bei
   Inhalten, die authentisch wirken koennen, und das Impressum sagt sie zu.
   Bewusst sichtbar und nicht nur im alt-Text: alt ist fuer Screenreader da,
   nicht fuer die Offenlegung. */
.bild-herkunft {
  margin: .5rem 0 0;
  font-size: .8rem;
  color: var(--ink-soft);
  letter-spacing: .01em;
}
img.aufmacher {
  width: 100%; height: auto; margin: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* ---------- Zweispaltiger Rumpf: Seitenspalte + Artikeltext ---------- */
.artikel-grid {
  display: grid; grid-template-columns: 230px minmax(0, 46rem);
  align-items: start; gap: clamp(1.75rem, 3vw, 3rem);
  margin-top: 2rem;
}

.artikel-hauptspalte { min-width: 0; }

/* Karte: gemeinsamer Rahmen für Inhaltsverzeichnis, "Auf einen Blick"
   und den Rubrikkasten in der Seitenspalte. Vorher schwebten die drei
   ohne Begrenzung im Weißraum und wirkten wie Reste. */
.karte {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem 1.2rem;
}
.seitenkasten-titel {
  margin: 0 0 .4rem; font-weight: 700; font-size: .95rem; color: var(--ink);
}
.seitenkasten-text { margin: 0 0 .9rem; font-size: .87rem; color: var(--ink-soft); }

.seitenspalte {
  position: sticky; top: 92px;
  display: flex; flex-direction: column; gap: 1.5rem;
  max-height: calc(100vh - 104px); overflow-y: auto; overflow-x: hidden;
  padding-bottom: .5rem;
}

.toc-seitlich { font-size: .87rem; }
/* <summary> statt <p>: ein natives, skriptloses Auf-/Zuklappen fuer sehr
   lange Inhaltsverzeichnisse (35-Minuten-Artikel mit weit ueber 20
   Ueberschriften wuerden auf schmalen Breiten sonst 2000px reine Linkliste
   vor den eigentlichen Text schieben). Standardmaessig offen (<details
   open> im Template), Pfeil dreht sich rein per CSS. */
.toc-titel {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-weight: 700; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand-strong); margin: 0 0 .7rem; cursor: pointer;
  list-style: none;
}
.toc-titel::-webkit-details-marker { display: none; }
.toc-titel::after {
  content: ""; flex: none; width: .5rem; height: .5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease; margin-top: -.15em;
}
details[open] > .toc-titel::after { transform: rotate(-135deg); margin-top: .15em; }
.toc-seitlich ul { list-style: none; margin: 0; padding: 0; }
.toc-seitlich li { margin: .3rem 0; }
.toc-seitlich li > ul { margin: .3rem 0 .3rem 0; padding-left: .9rem; border-left: 2px solid var(--line); }
.toc-link {
  display: block; padding: .15rem 0 .15rem .6rem; margin-left: -.6rem;
  border-left: 2px solid transparent; line-height: 1.4;
  color: var(--ink-soft); text-decoration: none;
  overflow-wrap: break-word; word-break: break-word;
}
.toc-link:hover { color: var(--ink); }
.toc-link.aktiv { color: var(--brand); font-weight: 700; border-left-color: var(--brand); }

.blick-kasten {
  /* Rahmen und Grund kommen aus .karte */
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--pine-100); border: 1px solid var(--line); border-radius: var(--radius);
}
.blick-titel {
  font-weight: 700; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand-strong); margin: 0 0 .75rem;
}
.blick-liste { list-style: none; margin: 0 0 .9rem; padding: 0; }
.blick-liste li {
  display: flex; align-items: flex-start; gap: .55rem; padding: .55rem 0;
  border-top: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
}
.blick-liste li:first-child { border-top: none; padding-top: 0; }
.blick-symbol { flex: none; margin-top: .25em; color: var(--brand-strong); }
/* min-width: 0 ist hier kein Kosmetik-Detail: Flex-Kinder duerfen ohne das
   nie unter ihre Inhaltsbreite schrumpfen (CSS-Default min-width: auto),
   ein einzelnes langes Wort im Wert (z. B. "Kompressor") haette sonst die
   230px schmale Seitenspalte gesprengt und dort einen eigenen, zweiten
   waagerechten Scrollbalken erzeugt -- genau das, was fuer die ganze Seite
   ausdruecklich ausgeschlossen ist. */
.blick-inhalt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.blick-name { font-size: .78rem; color: var(--ink-faint); }
.blick-wert {
  font-size: .88rem; font-weight: 700; color: var(--ink);
  overflow-wrap: break-word; word-break: break-word;
}
.blick-link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; font-weight: 650; color: var(--brand-strong); text-decoration: none;
}
.blick-link::after { content: "→"; }
.blick-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .artikel-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .seitenspalte { position: static; max-height: none; overflow: visible; }
}

.artikel-rumpf { font-size: 1.06rem; min-width: 0; }
.artikel-rumpf > * + * { margin-top: 1.15em; }
.artikel-rumpf h2 { margin-top: 2.1em; scroll-margin-top: 88px; position: relative; }
.artikel-rumpf h3 { margin-top: 1.7em; scroll-margin-top: 88px; }
.artikel-rumpf h2::after, .artikel-rumpf h3::after {
  content: ""; display: block; height: 3px; border-radius: 2px;
  background: var(--accent); margin-top: .5rem;
}
.artikel-rumpf h2::after { width: 46px; }
.artikel-rumpf h3::after { width: 30px; height: 2px; }
.artikel-rumpf ul, .artikel-rumpf ol { padding-left: 1.35em; }
.artikel-rumpf li + li { margin-top: .4em; }
.artikel-rumpf img { border-radius: var(--radius); margin-block: 1.5em; }
.artikel-rumpf code { background: var(--paper-sunk); padding: .15em .4em; border-radius: 5px; font-size: .9em; }
/* Ein <pre>-Block (z. B. ASCII-Schaltplan) ist von Natur aus unwillig, seine
   Zeilen umzubrechen -- ohne eigene Scroll-Huelle waere er wie eine Tabelle
   ohne .tabellen-huelle: von body { overflow-x: hidden } unsichtbar
   abgeschnitten statt lesbar. Eigene Huelle nach demselben Muster wie
   .tabellen-huelle, damit der Block scrollt, nicht die Seite. */
.artikel-rumpf pre {
  overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  background: var(--paper-sunk); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.15rem;
  font-size: .85rem; line-height: 1.55;
}
.artikel-rumpf pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; white-space: pre; }

/* ---------- Tabellen ---------- */
.tabellen-huelle {
  overflow-x: auto; margin: 1.75rem 0; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tabellen-huelle table { margin: 0; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
thead th {
  background: var(--paper-sunk); font-weight: 700; color: var(--ink);
  font-size: .82rem; letter-spacing: .03em; text-transform: uppercase;
  border-bottom: 2px solid var(--line);
}
tbody tr:nth-child(even) { background: var(--paper-warm); }
tbody tr:last-child td { border-bottom: none; }
table#auf-einen-blick-tabelle { scroll-margin-top: 96px; }

/* ---------- Hinweiskaesten (Blockzitate mit fetter Titelzeile) ---------- */
blockquote, .hinweiskasten {
  margin: 1.75rem 0; padding: 1.1rem 1.3rem;
  background: var(--paper-warm); border: 1px solid var(--line);
  border-left: 4px solid var(--ink-faint); border-radius: var(--radius);
}
blockquote p:first-child { margin-top: 0; }
blockquote p:last-child { margin-bottom: 0; }
blockquote p:first-child strong {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .4rem;
}

/* Symbol je Kastenart: eine kleine farbige Marke links vor dem Titel, per
   ::before auf dem Kasten selbst -- keine zusaetzliche Markup-Struktur
   noetig, direktiven.py bleibt unangetastet (siehe Aufgabenbrief: "erkenne
   den Titel"). Ein Unicode-Glyph statt eines SVG-Icons genuegt hier: kein
   Netzzugriff, skaliert mit der Systemschrift, funktioniert identisch in
   hell und dunkel. */
.hinweiskasten { position: relative; padding-left: 3.6rem; }
.hinweiskasten::before {
  content: "▸"; position: absolute; left: 1.15rem; top: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--ink-faint); color: #fff; font-size: .8rem; line-height: 1;
}
.hinweiskasten--kurz-gesagt { border-left-color: var(--brand); background: var(--pine-100); }
.hinweiskasten--kurz-gesagt p:first-child strong { color: var(--brand-strong); }
.hinweiskasten--kurz-gesagt::before { content: "✓"; background: var(--brand); }
.hinweiskasten--hinweis { border-left-color: #3b7ea1; }
.hinweiskasten--hinweis p:first-child strong { color: #3b7ea1; }
.hinweiskasten--hinweis::before { content: "i"; background: #3b7ea1; font-weight: 700; }
.hinweiskasten--achtung { border-left-color: var(--accent); background: var(--clay-100); }
.hinweiskasten--achtung p:first-child strong { color: var(--clay-600); }
.hinweiskasten--achtung::before { content: "!"; background: var(--accent); font-weight: 700; }
.hinweiskasten--gefahr { border-left-color: #c0392b; background: color-mix(in srgb, #c0392b 8%, var(--paper)); }
.hinweiskasten--gefahr p:first-child strong { color: #c0392b; }
.hinweiskasten--gefahr::before { content: "⚠"; background: #c0392b; }

@media (prefers-color-scheme: dark) {
  .hinweiskasten--achtung p:first-child strong { color: var(--accent); }
}

@media (max-width: 480px) {
  .hinweiskasten { padding-left: 1.3rem; padding-top: 3.1rem; }
  .hinweiskasten::before { left: 1.1rem; top: 1.1rem; }
}

/* ---------- Produktkarten (bewusst ohne Bild) ---------- */
.produktkarte {
  margin: 1.75em 0; border: 1px solid var(--line); border-left: 6px solid var(--accent);
  border-radius: var(--radius); background: var(--paper-warm);
  box-shadow: var(--shadow); overflow: hidden;
}
.produktkarte-inhalt { padding: 1.25rem 1.4rem; }
.produktkarte-name { margin: 0 0 .5rem; font-weight: 700; font-size: 1.1rem; }
.produktkarte-name a { color: var(--ink); text-decoration: none; }
.produktkarte-name a:hover { color: var(--brand); }
.produktkarte-text {
  position: relative; margin: 0 0 1.15rem; padding-left: 1.5rem;
  color: var(--ink-soft); font-size: .93rem;
}
.produktkarte-text::before {
  content: "✓"; position: absolute; left: 0; top: .05em;
  color: var(--brand-strong); font-weight: 700;
}
.produktkarte-fuss { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; margin: 0; }
.produktkarte-knopf {
  display: inline-flex; align-items: center; padding: .65rem 1.35rem;
  border-radius: 999px; background: var(--brand); color: #fff;
  text-decoration: none; font-weight: 650; font-size: .92rem;
  box-shadow: 0 1px 2px rgb(16 36 28 / 15%);
}
.produktkarte-knopf:hover { background: var(--brand-strong); color: #fff; }
@media (prefers-color-scheme: dark) {
  .produktkarte-knopf, .produktkarte-knopf:hover { color: var(--pine-900); }
}
.produktkarte-anzeige {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-faint);
}

/* ---------- Werbe-/Archivhinweis ---------- */
/* Der Werbehinweis ist eine Kennzeichnungspflicht (§ 5a UWG). Er darf
   ruhig sein, aber nicht blass: --ink-soft statt --ink-faint bringt ihn
   von 3,0:1 auf 5,7:1 gegen die Flaeche, auf der er steht. */
.hinweis {
  margin: 2rem 0; padding: 1rem 1.3rem; background: var(--paper-sunk);
  border-radius: var(--radius); font-size: .89rem; color: var(--ink-soft);
}

/* ---------- Startseite: Aufschlag ---------- */
main.start { padding-bottom: 0; }

.aufschlag { padding: clamp(2.25rem, 4vw, 4.5rem) 0 clamp(2rem, 3vw, 3.5rem); }
.aufschlag-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center; gap: clamp(1.75rem, 4vw, 3.75rem);
}
.aufschlag-text { min-width: 0; }
.aufschlag-text h1 { margin: 0 0 .35rem; }
/* Claim unter der H1: eigene Zeile statt Teil der Ueberschrift, damit die
   H1 die Suchbegriffe allein traegt. Groesse etwas unter der H1, damit die
   Rangfolge sichtbar bleibt. */
.aufschlag-claim {
  margin: 0 0 1.1rem;
  font-family: inherit;
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.betont { color: var(--moos-600); }
@media (prefers-color-scheme: dark) { .betont { color: var(--brand); } }

.marke-hinweis {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.15rem;
  padding: .4rem .9rem .4rem .7rem; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: .8rem; font-weight: 600; color: var(--ink-soft);
}
.marke-hinweis .punkt {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
}
.aufschlag-anriss {
  margin: 0 0 1.75rem; max-width: 34rem;
  font-size: clamp(1.02rem, .97rem + .25vw, 1.15rem); color: var(--ink-soft);
}
.aufschlag-knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }

.aufschlag-bild img {
  width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
}

@media (max-width: 860px) {
  .aufschlag-zeile { grid-template-columns: minmax(0, 1fr); }
  .aufschlag-bild { order: -1; }
}

/* ---------- Startseite: Merkmalsleiste ---------- */
.merkmale { border-block: 1px solid var(--line); background: var(--paper); }
.merkmale-gitter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1.4rem clamp(1.25rem, 3vw, 2.75rem); padding-block: 1.85rem;
}
.merkmal { display: flex; align-items: flex-start; gap: .8rem; }
.merkmal svg { width: 26px; height: 26px; flex: none; color: var(--moos-600); margin-top: .1rem; }
.merkmal-titel { margin: 0 0 .2rem; font-weight: 700; font-size: .95rem; }
.merkmal-text { margin: 0; font-size: .87rem; color: var(--ink-soft); line-height: 1.5; }
@media (prefers-color-scheme: dark) { .merkmal svg { color: var(--brand); } }

/* ---------- Startseite: Suche und Rubrikchips ---------- */
.filterleiste { padding-top: 2.5rem; scroll-margin-top: 90px; }
.suchfeld {
  display: flex; align-items: center; gap: .6rem;
  max-width: 30rem; padding: .1rem .3rem .1rem 1rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-faint);
}
.suchfeld:focus-within { border-color: var(--moos-300); box-shadow: 0 0 0 3px var(--moos-100); }
.suchfeld svg { flex: none; }
.suchfeld input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding: .75rem .5rem .75rem 0;
  font: inherit; font-size: .95rem; color: var(--ink);
}
.suchfeld input::-webkit-search-cancel-button { cursor: pointer; }
.treffer-meldung { margin: .9rem 0 0; font-size: .9rem; color: var(--ink-soft); }

.rubrikleiste { padding-top: 2.5rem; scroll-margin-top: 90px; }
.rubrikleiste h2 { margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 600;
}
.chip:hover { border-color: var(--moos-300); background: var(--moos-50); color: var(--brand-strong); }
.chip-zahl { color: var(--ink-faint); font-weight: 600; font-size: .82rem; }

/* ---------- Abschnitte und Artikelkarten ---------- */
.abschnitt { padding: 2.75rem 0 .5rem; scroll-margin-top: 84px; }
.rubrik-abschnitt { border-top: 1px solid var(--line); margin-top: 2.25rem; }
/* Titel und Unterzeile stehen untereinander (linke Saeule), ein
   optionaler "Alle ansehen"-Link rechts daneben -- wie in den Entwuerfen.
   Vorher trieb space-between die Unterzeile an den rechten Rand, wo sie
   wie eine zweite, unverbundene Aussage wirkte. */
.abschnitt-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: 1.4rem;
}
.abschnitt-kopf h2 { margin: 0 0 .3rem; }
.abschnitt-kopf > :first-child { min-width: 0; }
.abschnitt-anriss { margin: 0; color: var(--ink-faint); font-size: .92rem; }
.abschnitt-link { font-weight: 650; font-size: .9rem; text-decoration: none; }
.abschnitt-link::after { content: " →"; }
.abschnitt-link:hover { text-decoration: underline; }

.artikelkarten-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr)); }
.artikelkarten-grid--drei { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
/* Schmale Spur für die bis zu fünf Geschwisterkarten am Artikelfuß:
   205px lässt bei 1180px Hüllenbreite genau fünf Spalten zu, sonst fiele
   die fünfte Karte allein in eine zweite Reihe. */
.artikelkarten-grid--schmal { grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr)); }

.artikelkarte {
  position: relative; display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.artikelkarte:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: transparent; }
.artikelkarte:focus-within { border-color: var(--moos-300); }

.artikelkarte-bildbereich { position: relative; }
.artikelkarte-bild { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--paper-sunk); }
.artikelkarte-bild--leer { display: block; background: linear-gradient(140deg, var(--moos-600), var(--moos-800)); }
.artikelkarte-chip {
  position: absolute; left: .7rem; top: .7rem;
  padding: .28rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--moos-900) 82%, transparent);
  color: #fff; font-size: .72rem; font-weight: 650; letter-spacing: .01em;
  backdrop-filter: blur(4px);
}

.artikelkarte-inhalt { padding: 1.1rem 1.15rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.artikelkarte-inhalt h3 { font-size: 1.04rem; font-weight: 700; margin: 0 0 .5rem; line-height: 1.32; letter-spacing: -.012em; }
.artikelkarte-inhalt h3 a { color: var(--ink); text-decoration: none; }
.artikelkarte-inhalt h3 a:hover { color: var(--brand-strong); }
/* Die ganze Karte klickbar machen, ohne den Text in den Link zu ziehen:
   der Titel-Link legt eine unsichtbare Fläche über die Karte. Text bleibt
   markierbar, Screenreader lesen weiterhin genau einen Link je Karte. */
.artikelkarte-inhalt h3 a::after { content: ""; position: absolute; inset: 0; }
.artikelkarte-anriss {
  margin: 0 0 1rem; color: var(--ink-soft); font-size: .91rem; line-height: 1.55;
}
.artikelkarte-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin: auto 0 0; padding-top: .35rem;
  font-size: .85rem;
}
.weiterlesen { color: var(--brand); font-weight: 650; }
.weiterlesen::after { content: " →"; }
.artikelkarte:hover .weiterlesen { color: var(--brand-strong); }
.artikelkarte-lesezeit { color: var(--ink-faint); }

/* ---------- Aufruf-Band ---------- */
/* Das Aufruf-Band ist eine eingerueckte Karte auf dem cremefarbenen
   Grund, kein durchgehendes Band: durchgehend stiess es direkt an den
   dunkelgruenen Fussbereich und beide verschmolzen zu einem Block. */
.aufruf { margin: 4.5rem 0; padding: 0; }
.aufruf-innen {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; overflow: hidden;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 3.25rem);
  border-radius: var(--radius-lg); background: var(--moos-600); color: #fff;
}
.aufruf-text { max-width: 40rem; }
.aufruf-text h2 { margin: 0 0 .8rem; color: #fff; }
.aufruf-text p { margin: 0 0 1.6rem; color: rgb(255 255 255 / 82%); }
.aufruf-linien {
  order: 2; flex: 0 1 420px; width: 420px; height: auto; margin-right: -1rem;
  color: rgb(255 255 255 / 30%);
}
@media (max-width: 860px) {
  .aufruf-innen { flex-direction: column; align-items: flex-start; }
  .aufruf-linien { order: -1; width: min(100%, 320px); }
}

/* ---------- Geschwisterartikel ---------- */
.geschwister { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }

/* ---------- Fussbereich ---------- */
.fuss {
  margin-top: 0; padding: clamp(2.5rem, 4vw, 3.5rem) 0 2rem;
  background: var(--moos-900); color: rgb(255 255 255 / 72%); font-size: .9rem;
}
.artikel + .fuss, .huelle + .fuss { margin-top: 4rem; }
.fuss-spalten {
  display: grid; gap: 2rem clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.fuss .marke--fuss { color: #fff; font-size: 1.12rem; margin-bottom: .8rem; }
.fuss .marke--fuss .marke-symbol { color: var(--moos-300); }
.fuss .marke--fuss .marke-endung { color: rgb(255 255 255 / 55%); }
.fuss .marke--fuss:hover { color: var(--moos-200); }
.fuss-text { margin: 0; max-width: 26rem; line-height: 1.6; }
.fuss-titel {
  margin: 0 0 .8rem; color: #fff; font-weight: 700; font-size: .82rem;
  letter-spacing: .07em; text-transform: uppercase;
}
.fuss-spalte ul { list-style: none; margin: 0; padding: 0; }
.fuss-spalte li + li { margin-top: .5rem; }
.fuss a { color: rgb(255 255 255 / 72%); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss-schluss {
  margin: clamp(2rem, 3vw, 2.75rem) 0 0; padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 14%);
  font-size: .84rem; color: rgb(255 255 255 / 55%); max-width: 52rem;
}

/* ---------- Nach-oben-Knopf ---------- */
html { scroll-behavior: smooth; }
.nach-oben {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--brand); color: #fff; box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.nach-oben.sichtbar { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nach-oben:hover { background: var(--brand-strong); }
@media (prefers-color-scheme: dark) {
  .nach-oben, .nach-oben:hover { color: var(--pine-900); }
}

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .artikelkarte:hover { transform: none; }
}

/* ---------- Suche erst mit Skript zeigen ---------- */
/* Ohne Skript filtert nichts, also darf auch kein Eingabefeld und keine
   Lupe zu sehen sein (siehe _skript.html). Die Startseite zeigt dann
   einfach alle Karten. */
.filterleiste, .kopf-suche { display: none; }
.suche-bereit .filterleiste { display: block; }
.suche-bereit .kopf-suche { display: flex; }

/* Innerhalb eines Rubrikabschnitts steht die Rubrik schon als Überschrift
   darüber -- der Chip auf jedem Bild wiederholte sie zwölfmal. In den
   gemischten Reihen (Meistgelesen, weitere Ratgeber am Artikelfuß) trägt
   er dagegen Information und bleibt sichtbar. */
.rubrik-abschnitt .artikelkarte-chip { display: none; }

/* Während der Suche zeigt die Rubrik nicht mehr ihre Gesamtzahl an --
   die stimmt dann nicht (siehe _skript.html). */
.suche-aktiv .rubrik-abschnitt .abschnitt-anriss { display: none; }

/* Affiliate-Weiche: erscheint erst beim Klick auf einen AWIN-Verweis.
   Farben kommen aus den vorhandenen Variablen, damit hell und dunkel ohne
   eigene Sonderregel funktionieren. */
.gate {
  border: 0;
  padding: 0;
  max-width: 30rem;
  width: calc(100% - 2rem);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.gate::backdrop { background: rgba(0, 0, 0, .5); }
.gate-inhalt { padding: 1.5rem 1.5rem 1.25rem; }
.gate-titel { margin: 0 0 .75rem; font-size: 1.15rem; line-height: 1.3; }
.gate-text { margin: 0 0 .75rem; font-size: .93rem; line-height: 1.55; }
.gate-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.1rem 0 .5rem;
}
.gate-knoepfe .knopf { flex: 1 1 auto; justify-content: center; cursor: pointer; }
.gate-fuss { margin: 0; font-size: .85rem; }
.gate-liste {
  margin: 0 0 .75rem;
  padding-left: 1.2rem;
  font-size: .93rem;
  line-height: 1.5;
}
.gate-liste li { margin-bottom: .2rem; }