/* Statische Ratgeber-Seiten (werkzeuge/seo_seiten.py) – Farben und Schriften wie die App */
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
:root {
  --bg: #f6f1ea; --karte: #ffffff; --text: #24182e; --text2: #5e5466; --linie: rgba(44, 25, 57, 0.14);
  --akzent: #583271; --gold: #c9a24a; --auf-akzent: #fff; --gruen: #2b8a3e; --gelb: #8a6700; --rot: #c92a2a;
  --papier: #fbf8f1; --raster: rgba(88, 50, 113, 0.06); --ink: #2c1939; --ink-fl: rgba(44, 25, 57, 0.08);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121014; --karte: #1f1b23; --text: #f6f1ea; --text2: #aea6b5; --linie: rgba(235, 228, 242, 0.14);
    --akzent: #b89cca; --gold: #e2c47a; --auf-akzent: #1b0f24; --gruen: #51cf66; --gelb: #fcc419; --rot: #ff6b6b;
    --papier: #1c1a1f; --raster: rgba(235, 228, 242, 0.05); --ink: #e6dcef; --ink-fl: rgba(230, 220, 239, 0.1);
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.55 "Manrope", -apple-system, system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
a { color: var(--akzent); }
main, .fuss { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.kopf { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.marke { font-family: "Cormorant", Georgia, serif; font-style: italic; font-weight: 600; font-size: 22px; color: var(--gold); text-decoration: none; white-space: nowrap; }
.app-knopf, .knopf { display: inline-block; background: var(--akzent); color: var(--auf-akzent); text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 8px 14px; border-radius: 99px; white-space: nowrap; }
.knopf.zart { background: transparent; color: var(--akzent); border: 1.5px solid var(--akzent); }
.knopfzeile { display: flex; flex-wrap: wrap; gap: 10px; }
.krumen { font-size: 14px; color: var(--text2); margin: 16px 0 4px; }
.krumen a { color: var(--text2); }
h1, h2 { font-family: "Cormorant", Georgia, serif; font-weight: 600; color: var(--akzent); line-height: 1.15; }
h1 { font-size: clamp(32px, 7vw, 44px); margin: 6px 0 10px; }
h2 { font-size: 27px; margin: 30px 0 10px; }
h3 { font-size: 18px; margin: 0 0 4px; }
.bereich { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.bereich a { color: var(--gold); text-decoration: none; }
.kurz { font-size: 19px; color: var(--text2); }
.meta { font-size: 14px; color: var(--text2); font-family: "Manrope", sans-serif; font-weight: 500; }
.cartoon { margin: 16px 0; }
.cartoon img { display: block; width: 100%; height: auto; border-radius: 14px; }
.steckbrief { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 16px 0; }
.steckbrief div { background: var(--karte); border-radius: 12px; padding: 10px 12px; }
.steckbrief dt { font-size: 13px; color: var(--text2); }
.steckbrief dd { margin: 2px 0 0; font-weight: 700; }
.selbst { background: var(--karte); border-radius: 12px; padding: 4px 16px 10px; border-left: 5px solid var(--gruen); }
.selbst.eingeschraenkt { border-left-color: var(--gelb); }
.selbst.nein { border-left-color: var(--rot); }
.selbst h2 { margin-top: 12px; font-size: 23px; }
.ampel { color: var(--gruen); }
.eingeschraenkt .ampel { color: var(--gelb); }
.nein .ampel { color: var(--rot); }
.posten li, .karten li { margin: 4px 0; }
.schritte { padding: 0; list-style: none; counter-reset: s; }
.schritte li { counter-increment: s; background: var(--karte); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.schritte h3::before { content: counter(s) ". "; color: var(--gold); }
.schritte p { margin: 4px 0 0; }
.warnung { background: color-mix(in srgb, var(--rot) 8%, var(--karte)); border-radius: 12px; padding: 2px 16px 8px; margin-top: 24px; }
.warnung h2 { margin-top: 14px; }
.karten { list-style: none; padding: 0; }
.karten li { background: var(--karte); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.karten .meta { display: block; margin-top: 4px; }
.spalten { columns: 2 260px; column-gap: 28px; padding-left: 18px; }
.spalten li { break-inside: avoid; margin: 3px 0; }
.mehr { font-weight: 600; }
.verwandt { border-top: 1px solid var(--linie); margin-top: 28px; }
.buch { display: flex; gap: 14px; align-items: flex-start; background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; margin: 22px 0; }
.buch img { border-radius: 4px; flex: none; }
.buch p { margin: 0 0 4px; }
.buch .werbung { font-size: 12px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.06em; }
.app-band { background: var(--akzent); color: var(--auf-akzent); border-radius: 16px; padding: 18px 18px 20px; margin: 32px 0; }
.app-band .app-titel { font-family: "Cormorant", Georgia, serif; font-style: italic; font-size: 26px; color: var(--gold); margin: 0 0 6px; }
.app-band p { margin: 0 0 12px; }
.app-band .knopf { background: var(--gold); color: #24182e; }
.hinweis { font-size: 14px; color: var(--text2); }
.fuss { font-size: 14px; color: var(--text2); padding-bottom: 40px; border-top: 1px solid var(--linie); }
/* Werkstattskizzen – wie in der App */
.skizze { margin: 12px 0 0; border-radius: 10px; overflow: hidden; color: var(--ink); background-color: var(--papier);
  background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 16px 16px; border: 1px solid var(--linie); }
.skizze svg { display: block; width: 100%; height: auto; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.skizze text { fill: var(--ink); stroke: var(--papier); stroke-width: 3px; paint-order: stroke; font: 10px ui-monospace, "SF Mono", Menlo, monospace; }
.skizze text.k { font-weight: 700; letter-spacing: 0.08em; font-size: 10px; fill: var(--text2); }
.skizze .a { stroke: var(--akzent); }
.skizze text.a { fill: var(--akzent); stroke: var(--papier); }
.skizze .f { fill: var(--ink-fl); }
.skizze .af { fill: var(--akzent); stroke: var(--akzent); }
.skizze .d { stroke-dasharray: 5 4; }
.skizze .t { stroke-width: 1; }
.skizze .mk { fill: var(--akzent); stroke: none; }
.skizze .sr { stroke: var(--ink); stroke-width: 1; opacity: 0.35; }
@media (max-width: 420px) { .marke { font-size: 19px; } .app-knopf { font-size: 14px; padding: 7px 12px; } }
[id] { scroll-margin-top: 72px; }
/* Amazon-Partnerlinks */
.amz { font-size: 14px; font-weight: 600; }
.amz-w { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text2); border: 1px solid var(--linie); border-radius: 4px; padding: 0 4px; }
.amz-hinweis { font-size: 13px; color: var(--text2); }