/* ==========================================================================
   themes.css – 20 auswählbare Designs. Jedes Theme greift als body.theme-<key>.
   Wichtig: Themes setzen Typografie, Radius und Kopf-/Karten-Details. Die
   Palette (Hintergrund/Text) gehört der Hell/Dunkel-Umschaltung; ganz unten
   überschreibt ein dark-Block etwaige helle Hintergrund-Tönungen, damit der
   Dunkelmodus in jedem Theme funktioniert. Akzentfarbe = Blog-Farbe (--accent).
   Schriften sind System-Stacks (kein CDN); eigene woff2 in @font-face möglich.
   ========================================================================== */

:root{
  --f-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-serif: Georgia, "Times New Roman", Times, serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --f-round: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --f-cond: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-human: Optima, Candara, "Segoe UI", system-ui, sans-serif;
}

/* 1) Klassisch – Serif-Überschriften, ruhig (Basis-Look) */
body.theme-classic{ --serif: var(--f-serif); --sans: var(--f-sans); --radius:10px; }

/* 2) Modern – serifenlos, kompakte Radien, Versalien-Navigation */
body.theme-modern{ --serif: var(--f-sans); --sans: var(--f-sans); --radius:8px; }
body.theme-modern .main-nav a{ text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; }
body.theme-modern .card-title{ letter-spacing:-.01em; }

/* 3) Magazin – große Serif-Titel, Akzentlinie unter Titeln */
body.theme-magazine{ --serif: var(--f-serif); --radius:6px; }
body.theme-magazine .card-title{ font-size:1.8rem; }
body.theme-magazine .post-head h1{ font-size:2.8rem; }
body.theme-magazine .card-title a{ box-shadow: inset 0 -2px 0 var(--accent); }

/* 4) Minimal – flach, randlos, viel Weißraum */
body.theme-minimal{ --serif: var(--f-sans); --sans: var(--f-sans); --radius:0px; }
body.theme-minimal .card, body.theme-minimal .net-card, body.theme-minimal .comment{ border:0; box-shadow:none; }
body.theme-minimal .card{ border-bottom:1px solid var(--line); }
body.theme-minimal .site-header{ border-bottom:0; }

/* 5) Mono – Monospace, technischer Look */
body.theme-mono{ --serif: var(--f-mono); --sans: var(--f-mono); --radius:4px; font-feature-settings:"liga" 0; }
body.theme-mono .brand{ letter-spacing:-.02em; }

/* 6) Serif – durchgehend Serif (Lesegefühl) */
body.theme-serif{ --serif: var(--f-serif); --sans: var(--f-serif); --radius:8px; }

/* 7) Editorial – Serif-Titel, serifenloser Fließtext, Kopf mit Akzentlinie */
body.theme-editorial{ --serif: var(--f-serif); --sans: var(--f-sans); --radius:6px; }
body.theme-editorial .site-header{ border-bottom:2px solid var(--accent); }
body.theme-editorial .post-content>p:first-of-type::first-letter{ font-family:var(--f-serif); font-size:3.1em; line-height:.8; float:left; padding:.05em .1em 0 0; color:var(--accent); }

/* 8) Kontrast – kräftige Rahmen, fette Titel, keine Radien */
body.theme-contrast{ --serif: var(--f-sans); --sans: var(--f-sans); --radius:0px; }
body.theme-contrast .card, body.theme-contrast .net-card, body.theme-contrast .comment{ border-width:2px; }
body.theme-contrast .card-title, body.theme-contrast .post-head h1{ font-weight:800; }
body.theme-contrast .btn{ border-width:2px; }

/* 9) Pastell – sanfte Tönung, runde Ecken */
body.theme-pastell{ --serif: var(--f-round); --sans: var(--f-round); --radius:16px;
  --bg:#f7f5fb; --surface:#ffffff; --line:#e8e3f2; }

/* 10) Solar – warme Tönung */
body.theme-solar{ --serif: var(--f-serif); --sans: var(--f-sans); --radius:12px;
  --bg:#fdf8ef; --surface:#fffdf8; --line:#efe4cf; }

/* 11) Mitternacht – kühl, serifenlos, Akzent betont */
body.theme-midnight{ --serif: var(--f-sans); --sans: var(--f-sans); --radius:10px; }
body.theme-midnight .brand, body.theme-midnight .post-head h1{ letter-spacing:-.015em; }
body.theme-midnight .site-header{ border-bottom:1px solid var(--accent); }

/* 12) Wald – grünliche Tönung, Serif */
body.theme-forest{ --serif: var(--f-serif); --sans: var(--f-sans); --radius:8px;
  --bg:#f3f7f2; --surface:#ffffff; --line:#dfe9dd; }

/* 13) Ozean – bläuliche Tönung */
body.theme-ocean{ --serif: var(--f-sans); --sans: var(--f-sans); --radius:12px;
  --bg:#f1f6fb; --surface:#ffffff; --line:#dceaf4; }

/* 14) Sonnenuntergang – warm, rund, Kopf farbig unterlegt */
body.theme-sunset{ --serif: var(--f-round); --sans: var(--f-sans); --radius:14px;
  --bg:#fdf4f0; --surface:#fffaf8; --line:#f3ddd3; }
body.theme-sunset .site-header{ background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

/* 15) Mokka – cremig-braun, Serif, buchartig */
body.theme-mocha{ --serif: var(--f-serif); --sans: var(--f-serif); --radius:8px;
  --bg:#f6f1ea; --surface:#fffdf9; --line:#e6dccd; }

/* 16) Schiefer – kühles Grau, serifenlos, scharfe Kanten */
body.theme-slate{ --serif: var(--f-sans); --sans: var(--f-sans); --radius:4px;
  --bg:#f2f4f6; --surface:#ffffff; --line:#dde2e7; }

/* 17) Neon – dunkelfreundlich, Monospace-Titel, Akzent-Glow */
body.theme-neon{ --serif: var(--f-mono); --sans: var(--f-sans); --radius:6px; }
body.theme-neon .card-title a:hover, body.theme-neon .brand:hover{ text-shadow:0 0 10px var(--accent); }
body.theme-neon .btn-primary{ box-shadow:0 0 0 1px var(--accent), 0 0 14px -2px var(--accent); }

/* 18) Papier – warmes Off-White, Serif */
body.theme-paper{ --serif: var(--f-serif); --sans: var(--f-serif); --radius:6px;
  --bg:#faf7f0; --surface:#fffefb; --line:#ece4d6; }

/* 19) Kompakt – dichter, kleinere Schrift */
body.theme-compact{ --serif: var(--f-sans); --sans: var(--f-sans); --radius:6px; font-size:15px; }
body.theme-compact .site-main{ padding-top:22px; }
body.theme-compact .feed{ gap:16px; }
body.theme-compact .card-body{ padding:14px 16px; }

/* 20) Elegant – fein, gesperrt, zentrierter Kopf */
body.theme-elegant{ --serif: var(--f-human); --sans: var(--f-human); --radius:10px; }
body.theme-elegant .brand{ font-weight:400; letter-spacing:.16em; text-transform:uppercase; font-size:1.2rem; }
body.theme-elegant .card-title, body.theme-elegant .post-head h1{ font-weight:400; letter-spacing:.01em; }

/* --------------------------------------------------------------------------
   Dunkelmodus gewinnt immer (überschreibt helle Tönungen einzelner Themes).
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body{
  --bg:#16181d; --surface:#1e2127; --ink:#e8e6e1; --muted:#9aa0ab; --line:#2f343d;
}

/* --------------------------------------------------------------------------
   Vorschau-Farbflächen im Theme-Picker (.theme-swatch.theme-<key>)
   -------------------------------------------------------------------------- */
.theme-swatch{ display:flex; align-items:center; justify-content:center; min-height:54px;
  border-radius:8px; padding:.4rem .6rem; font-size:.86rem; text-align:center;
  border:1px solid rgba(0,0,0,.12); }
.theme-swatch.theme-classic  { background:#fbfaf7; color:#1c1b19; font-family:Georgia,serif; }
.theme-swatch.theme-modern   { background:#ffffff; color:#1f2430; }
.theme-swatch.theme-magazine { background:#ffffff; color:#1c1b19; font-family:Georgia,serif; box-shadow:inset 0 -3px 0 #b5462f; }
.theme-swatch.theme-minimal  { background:#ffffff; color:#222; border-color:#222; }
.theme-swatch.theme-mono     { background:#f5f5f4; color:#222; font-family:monospace; }
.theme-swatch.theme-serif    { background:#fcfbf9; color:#1c1b19; font-family:Georgia,serif; }
.theme-swatch.theme-editorial{ background:#ffffff; color:#1c1b19; font-family:Georgia,serif; border-bottom:2px solid #b5462f; }
.theme-swatch.theme-contrast { background:#fff; color:#000; border:2px solid #000; font-weight:800; }
.theme-swatch.theme-pastell  { background:#f7f5fb; color:#3a3550; }
.theme-swatch.theme-solar    { background:#fdf8ef; color:#6b4e1f; }
.theme-swatch.theme-midnight { background:#1e2230; color:#e6e8f0; }
.theme-swatch.theme-forest   { background:#f3f7f2; color:#244427; }
.theme-swatch.theme-ocean    { background:#f1f6fb; color:#1d4a6b; }
.theme-swatch.theme-sunset   { background:#fdf4f0; color:#a23b1e; }
.theme-swatch.theme-mocha    { background:#f6f1ea; color:#5b4332; font-family:Georgia,serif; }
.theme-swatch.theme-slate    { background:#eef1f4; color:#33414f; }
.theme-swatch.theme-neon     { background:#15161b; color:#39ffb0; font-family:monospace; }
.theme-swatch.theme-paper    { background:#faf7f0; color:#3a342a; font-family:Georgia,serif; }
.theme-swatch.theme-compact  { background:#fff; color:#222; font-size:.74rem; }
.theme-swatch.theme-elegant  { background:#fcfbf9; color:#2a2a2a; letter-spacing:.12em; text-transform:uppercase; font-size:.72rem; }