/* Themes: setzen die Variablen aus style.css (data-theme am <html>) und ergänzen ein paar Details. */

/* ========================================================================= Frisch (Standard) */
@media (prefers-color-scheme: dark) {
  html[data-theme="frisch"] {
    --bg: #141826;
    --bg-image: radial-gradient(circle at 10% 0%, #1e2745 0, transparent 45%),
                radial-gradient(circle at 100% 30%, #2a2030 0, transparent 40%);
    --card: #1c2133; --card-border: #2a3150; --text: #e8ecf8; --muted: #9aa4c0; --line: #2a3150; --field: #161b2b;
    --primary: #7b93ff; --primary-soft: #262f55; --danger-soft: #3d1f2c; --ok-soft: #1b3524;
    --topbar-bg: rgba(28, 33, 51, .85);
    --shadow: 0 8px 24px rgba(0, 0, 0, .25); --btn-shadow: none;
    color-scheme: dark;
  }
}

/* ========================================================================= Gemütlich */
html[data-theme="cozy"] {
  --bg: #f6eee3;
  --bg-image: radial-gradient(rgba(150, 110, 70, .07) 1px, transparent 1.5px) 0 0 / 14px 14px,
              radial-gradient(circle at 0% 0%, #fde8cf 0, transparent 50%);
  --card: #fffaf3; --card-border: #ecdcc6; --text: #4a382b; --muted: #8c7561; --line: #efe2cf; --field: #fbf4ea;
  --primary: #c4693f; --primary-text: #fffaf3; --primary-soft: #f6e0d2; --accent: #7f9a6b;
  --danger: #b5485d; --danger-soft: #f7e0e3; --warn: #c66a1b; --ok: #6b8f53; --ok-soft: #e6eedb;
  --radius: 20px; --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(110, 70, 30, .06), 0 10px 26px rgba(110, 70, 30, .08);
  --btn-shadow: 0 2px 0 rgba(110, 70, 30, .1);
  --font-head: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --head-weight: 700;
  --topbar-bg: rgba(255, 250, 243, .88);
}
html[data-theme="cozy"] .brand::after { content: " ☕"; }
html[data-theme="cozy"] .card { border-width: 1.5px; }
html[data-theme="cozy"] h1 { letter-spacing: 0; }
@media (prefers-color-scheme: dark) {
  html[data-theme="cozy"] {
    --bg: #231b16;
    --bg-image: radial-gradient(circle at 15% 0%, rgba(255, 170, 90, .14) 0, transparent 45%),
                radial-gradient(rgba(255, 220, 180, .04) 1px, transparent 1.5px) 0 0 / 14px 14px;
    --card: #2f241d; --card-border: #47372b; --text: #f3e5d3; --muted: #bfa58c; --line: #47372b; --field: #281f19;
    --primary: #e58a5c; --primary-text: #231b16; --primary-soft: #4a3023; --danger-soft: #4a2229; --ok-soft: #2d3a24;
    --topbar-bg: rgba(47, 36, 29, .9); --shadow: 0 10px 28px rgba(0, 0, 0, .3); --btn-shadow: none;
    color-scheme: dark;
  }
}

/* ========================================================================= Inselleben (im Stil von Animal Crossing) */
html[data-theme="insel"] {
  --bg: #c9ecd2;
  --bg-image: radial-gradient(#b7e3c3 22%, transparent 23%) 0 0 / 34px 34px,
              radial-gradient(#b7e3c3 22%, transparent 23%) 17px 17px / 34px 34px;
  --card: #fffbe9; --card-border: #f0e4b9; --text: #6b5233; --muted: #9c8662; --line: #efe2b5; --field: #fff6d6;
  --primary: #19b8a0; --primary-text: #ffffff; --primary-soft: #d2f3ea; --accent: #f7cd46;
  --danger: #e2617b; --danger-soft: #fde3e8; --warn: #e88a1a; --ok: #3fae5a; --ok-soft: #dcf5df;
  --radius: 28px; --radius-sm: 18px;
  --shadow: 0 5px 0 #e3d39b;
  --btn-shadow: 0 3px 0 rgba(107, 82, 51, .22);
  --head-weight: 900;
  --topbar-bg: #fffbe9;
  --nav-active: #fde58a;
}
html[data-theme="insel"] .topbar { border-bottom: 0; box-shadow: 0 4px 0 #e3d39b; }
html[data-theme="insel"] .brand::before { content: "🍃 "; }
html[data-theme="insel"] .mainnav a.active { color: #6b5233; }
html[data-theme="insel"] .card { border-width: 2px; }
html[data-theme="insel"] .card h2 {
  display: inline-block; background: var(--accent); color: #6b5233; padding: .2rem .9rem; border-radius: 999px;
  transform: rotate(-1.5deg); box-shadow: 0 2px 0 rgba(107, 82, 51, .2);
}
html[data-theme="insel"] .card-head h2 { margin-bottom: .7rem; }
html[data-theme="insel"] .page-head h1, html[data-theme="insel"] .greeting h1 { color: #4e7a3b; }
html[data-theme="insel"] .primary { box-shadow: 0 3px 0 #10846f; }
html[data-theme="insel"] .chip.on { box-shadow: 0 2px 0 #10846f; }
html[data-theme="insel"] .month { gap: 2px; background: var(--card-border); box-shadow: 0 5px 0 #e3d39b; }
html[data-theme="insel"] .day.today .daynum { background: var(--accent); color: #6b5233; }
html[data-theme="insel"] .list > li { border-top-style: dotted; border-top-width: 2px; }
html[data-theme="insel"] .flash { box-shadow: 0 3px 0 rgba(107, 82, 51, .15); }
@media (max-width: 760px) {
  html[data-theme="insel"] .mainnav { border-width: 2px; box-shadow: 0 5px 0 #e3d39b; border-radius: 30px; }
}

/* ========================================================================= Klötzchenwelt (im Stil von Minecraft) */
html[data-theme="bloecke"] {
  --bg: #7a5a3c;
  --bg-image: repeating-conic-gradient(rgba(0, 0, 0, .10) 0 25%, transparent 0 50%) 0 0 / 24px 24px,
              repeating-conic-gradient(rgba(255, 255, 255, .05) 0 25%, transparent 0 50%) 6px 6px / 40px 40px,
              repeating-conic-gradient(rgba(0, 0, 0, .07) 0 25%, transparent 0 50%) 3px 9px / 18px 18px;
  --card: #c6c6c6; --card-border: #c6c6c6; --text: #262626; --muted: #4f4f4f; --line: #9a9a9a; --field: #000000;
  --primary: #5b8731; --primary-text: #ffffff; --primary-soft: #a9cf86; --accent: #fcdb05;
  --danger: #b02e26; --danger-soft: #e4a7a2; --warn: #b0640f; --ok: #3e7a1d; --ok-soft: #b8dc9a;
  --radius: 0; --radius-sm: 0;
  --shadow: 5px 5px 0 rgba(0, 0, 0, .35);
  --btn-shadow: none;
  --font: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --head-weight: 800;
  --topbar-bg: #5d9c3a;
  --nav-active: #3f6d26;
}
html[data-theme="bloecke"] body { font-size: 15px; }
html[data-theme="bloecke"] .topbar {
  border-bottom: 10px solid #866043; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: repeating-conic-gradient(rgba(0, 0, 0, .08) 0 25%, transparent 0 50%) 0 0 / 16px 16px, #5d9c3a;
}
html[data-theme="bloecke"] .brand, html[data-theme="bloecke"] .settings-link, html[data-theme="bloecke"] .mainnav a,
html[data-theme="bloecke"] .userbox button.link { color: #fff; text-shadow: 2px 2px 0 #2f4f1c; }
html[data-theme="bloecke"] .brand::before { content: "⛏️ "; }
html[data-theme="bloecke"] .mainnav a.active { color: #fcdb05; }
html[data-theme="bloecke"] h1, html[data-theme="bloecke"] .greeting p, html[data-theme="bloecke"] .monthnav strong {
  color: #fff; text-shadow: 3px 3px 0 #3f3f3f;
}
html[data-theme="bloecke"] .card h1, html[data-theme="bloecke"] dialog h2 { color: var(--text); text-shadow: none; }
html[data-theme="bloecke"] :is(button, .button, .chip, .mainnav a, .daynum, .tag, .avatar, .dot, .check, .pill,
  .settings-link, .meal, .vote, .flash, .hint, input, select, textarea, .theme-card .preview, .theme-card .preview i) {
  border-radius: 0;
}
html[data-theme="bloecke"] .card, html[data-theme="bloecke"] dialog {
  border: 4px solid; border-color: #fff #555 #555 #fff;
}
html[data-theme="bloecke"] :is(button, .button) {
  background: #8b8b8b; color: #fff; text-shadow: 2px 2px 0 #3f3f3f;
  border: 3px solid; border-color: #c9c9c9 #3a3a3a #3a3a3a #c9c9c9;
}
html[data-theme="bloecke"] :is(button, .button):hover { background: #7c8ebf; border-color: #c9d3ff #2f3b66 #2f3b66 #c9d3ff; }
html[data-theme="bloecke"] .primary { background: var(--primary); border-color: #8fc45f #2d4a15 #2d4a15 #8fc45f; }
html[data-theme="bloecke"] .danger { background: #b02e26; color: #fff; border-color: #e0716b #5a120e #5a120e #e0716b; }
html[data-theme="bloecke"] button.link { background: none; border: 0; text-shadow: none; color: var(--muted); }
html[data-theme="bloecke"] :is(input, select, textarea) { color: #fff; border: 3px solid #a0a0a0; }
html[data-theme="bloecke"] :is(input, select, textarea):focus { border-color: #fff; outline: 0; }
html[data-theme="bloecke"] .form label input, html[data-theme="bloecke"] .form label select,
html[data-theme="bloecke"] .form label textarea, html[data-theme="bloecke"] .login label input { color: #fff; }
html[data-theme="bloecke"] .chip { background: #8b8b8b; color: #fff; border: 2px solid #3a3a3a; }
html[data-theme="bloecke"] .chip.on { background: var(--primary); border-color: #fff; }
html[data-theme="bloecke"] .check { background: #8b8b8b; border: 3px solid; border-color: #3a3a3a #fff #fff #3a3a3a; }
html[data-theme="bloecke"] .check:hover { color: #7cfc00; background: #555; }
html[data-theme="bloecke"] .month { gap: 3px; background: #555; border: 4px solid #555; box-shadow: var(--shadow); }
html[data-theme="bloecke"] .month .day.other { background: #a8a8a8; }
html[data-theme="bloecke"] .month .wd { background: #8b8b8b; color: #fff; text-shadow: 1px 1px 0 #3f3f3f; }
html[data-theme="bloecke"] .meal { background: #8b8b8b; color: #fff; border: 3px solid; border-color: #3a3a3a #fff #fff #3a3a3a; text-shadow: 1px 1px 0 #3f3f3f; }
html[data-theme="bloecke"] .meal small { color: #e6e6e6; }
html[data-theme="bloecke"] .list > li { border-top: 2px solid #9a9a9a; }
html[data-theme="bloecke"] .flash { border: 3px solid #3a3a3a; }
html[data-theme="bloecke"] .avatar { box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .25); }
html[data-theme="bloecke"] .tag { background: #fcdb05; color: #3a2a00; }
html[data-theme="bloecke"] .daynum:hover { background: #fff; }
html[data-theme="bloecke"] .copyrow input { color: #7cfc00; }
@media (max-width: 760px) {
  /* Mobile Navigation als Schnellzugriffsleiste */
  html[data-theme="bloecke"] .mainnav {
    left: .4rem; right: .4rem; background: rgba(0, 0, 0, .55); border: 3px solid #3a3a3a; border-radius: 0; gap: 0; padding: 3px;
  }
  html[data-theme="bloecke"] .mainnav a { flex: 1; border: 3px solid #8b8b8b; margin: 0 1px; background: rgba(139, 139, 139, .35); }
  html[data-theme="bloecke"] .mainnav a.active { border-color: #fff; background: rgba(255, 255, 255, .15); }
}
html[data-theme="bloecke"] .card a, html[data-theme="bloecke"] dialog a { color: #2d5a12; }
html[data-theme="bloecke"] :is(.points-badge, .chip-radio span, .badge, .bar, .bar i, .podium .block, .board li.me) { border-radius: 0; }
html[data-theme="bloecke"] .badge { border: 3px solid; border-color: #3a3a3a #fff #fff #3a3a3a; background: #8b8b8b; color: #fff; text-shadow: 1px 1px 0 #3f3f3f; }
html[data-theme="bloecke"] .badge:not(.locked) { background: #5b8731; }
html[data-theme="bloecke"] .badge small, html[data-theme="bloecke"] .badge .muted { color: #eee; }
html[data-theme="bloecke"] .points-badge { background: #fcdb05; color: #3a2a00; }
html[data-theme="bloecke"] .podium .block { border: 3px solid; border-color: #fff #555 #555 #fff; }
html[data-theme="insel"] .badge:not(.locked) { box-shadow: 0 3px 0 #e3d39b; }
@media (min-width: 761px) and (max-width: 1300px) {
  html[data-theme="bloecke"] .mainnav a { font-size: .8rem; }
}
html[data-theme="bloecke"] :is(.outing-card, .outing-hero, .gallery .thumb, .cat-badge, #globe, .histogram i, .cover-flag) { border-radius: 0; }
html[data-theme="bloecke"] .outing-card { border: 4px solid; border-color: #fff #555 #555 #fff; }
html[data-theme="insel"] .outing-card { border-width: 2px; box-shadow: 0 5px 0 #e3d39b; }