/* Designs, Layouts und Aussehen-Editor.
   Jedes Design setzt nur Variablen (und ein paar Besonderheiten). Es gilt auf jedem Element mit data-theme,
   deshalb funktionieren auch die kleinen Vorschau-Karten. */

/* ---------- Dämmerwald: Standard, dunkler Wald mit Bernstein ---------- */
[data-theme="daemmerwald"] {
  --ink: #f3efe6; --ink-2: rgba(243, 239, 230, .72); --ink-3: rgba(243, 239, 230, .46);
  --bg: #0b130f; --glass: rgba(255, 255, 255, .075); --glass-2: rgba(255, 255, 255, .12); --glass-strong: rgba(24, 34, 28, .62);
  --rim: rgba(255, 255, 255, .17); --rim-hi: rgba(255, 255, 255, .42); --shade: rgba(0, 0, 0, .42); --field: rgba(0, 0, 0, .26);
  --amber: #f0a93b; --amber-ink: #2a1a03; --moss: #7fcf88; --coral: #ff7a66; --sky: #7cc4ff; --ok: #7fd68c; --warn: #f2b84b; --bad: #ff7a66;
  --orb1: rgba(240, 169, 59, .42); --orb2: rgba(90, 170, 120, .34); --orb3: rgba(40, 110, 100, .46); --orb4: rgba(190, 90, 60, .26);
  --r-lg: 26px; --r-md: 18px; --r-sm: 12px; --r-btn: 14px; --blur: 26px; --pad: 20px; --font-display: var(--font-serif);
  color-scheme: dark;
}

/* ---------- Graphit: nüchtern, dunkelgrau, Limette, kantiger ---------- */
[data-theme="graphit"] {
  --ink: #ebecee; --ink-2: rgba(235, 236, 238, .72); --ink-3: rgba(235, 236, 238, .44);
  --bg: #121315; --glass: rgba(255, 255, 255, .055); --glass-2: rgba(255, 255, 255, .1); --glass-strong: rgba(28, 29, 32, .86);
  --rim: rgba(255, 255, 255, .1); --rim-hi: rgba(255, 255, 255, .16); --shade: rgba(0, 0, 0, .5); --field: rgba(0, 0, 0, .32);
  --amber: #c6ee4a; --amber-ink: #1a2205; --moss: #8fd694; --coral: #ff7d5c; --sky: #79b8ff; --ok: #8fd694; --warn: #f0c04a; --bad: #ff7d5c;
  --orb1: rgba(120, 130, 150, .18); --orb2: rgba(90, 100, 110, .14); --orb3: rgba(70, 80, 95, .2); --orb4: rgba(110, 120, 90, .1);
  --r-lg: 16px; --r-md: 12px; --r-sm: 9px; --r-btn: 10px; --blur: 12px; --pad: 18px; --font-display: var(--font);
  color-scheme: dark;
}
[data-theme="graphit"] .glass::before { opacity: .35; }
[data-theme="graphit"] .glass { box-shadow: inset 0 0 0 1px var(--rim), 0 10px 24px -14px var(--shade); }
[data-theme="graphit"] .brand b, [data-theme="graphit"] .hello { font-style: normal; font-weight: 700; letter-spacing: -.02em; }

/* ---------- Meer: tiefes Blaugrün, sehr rund, weiches Glas ---------- */
[data-theme="meer"] {
  --ink: #e8f4f4; --ink-2: rgba(232, 244, 244, .74); --ink-3: rgba(232, 244, 244, .46);
  --bg: #06151b; --glass: rgba(190, 240, 240, .08); --glass-2: rgba(190, 240, 240, .14); --glass-strong: rgba(8, 36, 44, .66);
  --rim: rgba(190, 240, 240, .2); --rim-hi: rgba(220, 255, 255, .42); --shade: rgba(0, 10, 14, .55); --field: rgba(0, 12, 16, .34);
  --amber: #4cc9c0; --amber-ink: #032321; --moss: #7fe0a0; --coral: #ff8a78; --sky: #7cc4ff; --ok: #7fe0a0; --warn: #f2c14b; --bad: #ff8a78;
  --orb1: rgba(40, 150, 170, .5); --orb2: rgba(30, 90, 160, .42); --orb3: rgba(20, 130, 120, .5); --orb4: rgba(70, 90, 170, .24);
  --r-lg: 34px; --r-md: 22px; --r-sm: 14px; --r-btn: 99px; --blur: 36px; --pad: 22px; --font-display: var(--font);
  color-scheme: dark;
}
[data-theme="meer"] .brand b, [data-theme="meer"] .hello { font-style: normal; font-weight: 600; }
[data-theme="meer"] .hello { font-size: 2.3rem; letter-spacing: -.03em; }

/* ---------- Sandstein: hell, flach, Terrakotta, keine Spielerei ---------- */
[data-theme="sandstein"] {
  --ink: #2c2318; --ink-2: rgba(44, 35, 24, .76); --ink-3: rgba(44, 35, 24, .52);
  --bg: #e9dfcd; --glass: rgba(255, 251, 242, .88); --glass-2: rgba(255, 255, 255, .95); --glass-strong: rgba(255, 252, 245, .97);
  --rim: rgba(90, 62, 30, .16); --rim-hi: rgba(255, 255, 255, 0); --shade: rgba(90, 62, 30, .22); --field: rgba(90, 62, 30, .08);
  --amber: #bf5530; --amber-ink: #fff6ee; --moss: #3f8a4a; --coral: #c8472b; --sky: #2f74b5; --ok: #3a7f43; --warn: #a96b00; --bad: #bd3a22;
  --orb1: rgba(214, 150, 100, .28); --orb2: rgba(150, 170, 120, .2); --orb3: rgba(200, 160, 110, .26); --orb4: rgba(190, 110, 80, .16);
  --r-lg: 12px; --r-md: 9px; --r-sm: 7px; --r-btn: 8px; --blur: 0px; --pad: 20px; --font-display: var(--font-serif);
  color-scheme: light;
}
[data-theme="sandstein"] .glass { box-shadow: inset 0 0 0 1px var(--rim), 0 2px 0 rgba(90, 62, 30, .1), 0 12px 24px -16px var(--shade); }
[data-theme="sandstein"] .glass::before { display: none; }
[data-theme="sandstein"] .scene::after { opacity: .12; mix-blend-mode: multiply; }
[data-theme="sandstein"] .btn { box-shadow: inset 0 0 0 1px var(--rim), 0 2px 0 rgba(90, 62, 30, .12); }
[data-theme="sandstein"] .btn.primary { box-shadow: 0 2px 0 rgba(90, 40, 15, .35); }
[data-theme="sandstein"] .hello { font-style: normal; }
[data-theme="sandstein"] .console { background: rgba(38, 30, 22, .94); }

/* ---------- Stein: Blockwelt, grobe Kanten, Grasgrün ---------- */
[data-theme="stein"] {
  --ink: #ececdf; --ink-2: rgba(236, 236, 223, .76); --ink-3: rgba(236, 236, 223, .5);
  --bg: #1d1e1a; --glass: #2d2f29; --glass-2: #3a3d34; --glass-strong: #2a2c26;
  --rim: #565a4c; --rim-hi: #7d8270; --shade: rgba(0, 0, 0, .55); --field: #1b1c18;
  --amber: #76c442; --amber-ink: #11230a; --moss: #76c442; --coral: #e0603f; --sky: #62b3e8; --ok: #76c442; --warn: #e6b422; --bad: #e0603f;
  --orb1: rgba(118, 196, 66, .1); --orb2: rgba(140, 100, 60, .14); --orb3: rgba(80, 90, 70, .16); --orb4: rgba(140, 100, 60, .08);
  --r-lg: 4px; --r-md: 3px; --r-sm: 2px; --r-btn: 3px; --blur: 0px; --pad: 18px;
  --font-display: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}
[data-theme="stein"] .glass { box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px var(--rim), 0 6px 0 rgba(0, 0, 0, .35); }
[data-theme="stein"] .glass::before { display: none; }
[data-theme="stein"] .scene::before { animation: none; }
[data-theme="stein"] .scene { background: var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><rect width='32' height='32' fill='%231d1e1a'/><rect x='0' y='0' width='16' height='16' fill='%23212320'/><rect x='16' y='16' width='16' height='16' fill='%23212320'/><rect x='6' y='20' width='4' height='4' fill='%23191a17'/></svg>"); }
[data-theme="stein"] .btn { box-shadow: inset 0 0 0 2px #000, inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 3px 0 rgba(255, 255, 255, .16); font-weight: 700; }
[data-theme="stein"] .btn:active { transform: translateY(2px); }
[data-theme="stein"] .btn.primary { box-shadow: inset 0 0 0 2px #0c1a05, inset 0 -3px 0 rgba(0, 0, 0, .3), inset 0 3px 0 rgba(255, 255, 255, .32); }
[data-theme="stein"] input[type="text"], [data-theme="stein"] input[type="password"], [data-theme="stein"] input[type="number"],
[data-theme="stein"] input[type="search"], [data-theme="stein"] input[type="time"], [data-theme="stein"] input:not([type]),
[data-theme="stein"] select, [data-theme="stein"] textarea { box-shadow: inset 0 0 0 2px #000, inset 0 2px 0 rgba(0, 0, 0, .5); }
[data-theme="stein"] .brand b, [data-theme="stein"] .hello { font-style: normal; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; }
[data-theme="stein"] .hello { font-size: 1.7rem; }
[data-theme="stein"] h1, [data-theme="stein"] h2, [data-theme="stein"] h3 { font-family: var(--font-display); letter-spacing: .01em; }
[data-theme="stein"] .switch i, [data-theme="stein"] .badge, [data-theme="stein"] .chip, [data-theme="stein"] .bar, [data-theme="stein"] .bar > i { border-radius: 2px; }
[data-theme="stein"] .switch i::after { border-radius: 1px; }
[data-theme="stein"] .avatar, [data-theme="stein"] .sicon { border-radius: 3px; }
[data-theme="stein"] .nav a.on { box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px var(--rim); }
[data-theme="stein"] .toast { border-radius: 3px; }

/* ---------- Dichte ---------- */
[data-density="compact"] { --pad: 12px; }
[data-density="compact"] body { font-size: 14px; }
[data-density="compact"] .grid { gap: 10px; }
[data-density="compact"] .btn { padding: 6px 12px; }
[data-density="compact"] .page-head { margin-bottom: 12px; }
[data-density="compact"] .list-item { padding: 8px 12px; }
[data-density="compact"] .flist td, [data-density="compact"] table.t td { padding-top: 5px; padding-bottom: 5px; }

/* ---------- Editor für das Aussehen ---------- */
.look { display: flex; flex-direction: column; gap: 20px; }
.look h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tpcard { text-align: left; border: 0; padding: 8px; border-radius: 16px; cursor: pointer; color: var(--ink); background: var(--bg); box-shadow: inset 0 0 0 1px var(--rim); transition: transform .35s var(--spring), box-shadow .2s; display: flex; flex-direction: column; gap: 8px; }
.tpcard:hover { transform: translateY(-3px); }
.tpcard.on { box-shadow: inset 0 0 0 2px var(--amber), 0 10px 22px -14px var(--amber); }
.tpcard b { font-size: .95rem; padding: 0 4px; } .tpcard small { padding: 0 4px 4px; color: var(--ink-2); line-height: 1.3; }
.tp { position: relative; height: 92px; border-radius: 10px; overflow: hidden; background: var(--bg); color: var(--ink); }
.tp::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(40% 40% at 20% 20%, var(--orb1), transparent 70%), radial-gradient(40% 40% at 85% 85%, var(--orb3), transparent 70%); }
.tp i { position: absolute; background: var(--glass); box-shadow: inset 0 0 0 1px var(--rim); border-radius: var(--r-sm); }
.tp .tp-a { left: 6px; top: 6px; bottom: 6px; width: 24px; }
.tp .tp-b { left: 36px; right: 6px; top: 6px; height: 22px; }
.tp .tp-c { left: 36px; right: 36px; top: 34px; bottom: 6px; }
.tp .tp-d { right: 6px; top: 34px; bottom: 6px; width: 24px; background: var(--amber); box-shadow: none; }
.tp.top .tp-a { left: 6px; right: 6px; top: 6px; bottom: auto; width: auto; height: 14px; }
.tp.top .tp-b { top: 26px; left: 6px; right: 6px; height: 16px; }
.tp.top .tp-c { top: 46px; left: 6px; right: 40px; }
.tp.top .tp-d { top: 46px; width: 28px; }
.tp.dock .tp-a { left: 50%; right: auto; bottom: 6px; top: auto; width: 56px; height: 14px; transform: translateX(-50%); border-radius: 99px; }
.tp.dock .tp-b { top: 6px; left: 6px; right: 6px; height: 22px; }
.tp.dock .tp-c { top: 34px; bottom: 26px; left: 6px; right: 40px; }
.tp.dock .tp-d { top: 34px; bottom: 26px; width: 28px; }
.layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.color-row input[type="color"] { width: 46px; height: 38px; padding: 2px; border: 0; border-radius: 10px; background: var(--field); cursor: pointer; box-shadow: inset 0 0 0 1px var(--rim); }
.hue-slider { -webkit-appearance: none; appearance: none; height: 12px; border-radius: 99px; width: min(320px, 100%); outline: none;
  background: linear-gradient(90deg, hsl(0 70% 50%), hsl(60 70% 50%), hsl(120 70% 45%), hsl(180 70% 45%), hsl(240 70% 55%), hsl(300 70% 50%), hsl(360 70% 50%)); }
.hue-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); cursor: pointer; }
.hue-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; cursor: pointer; }
.hue-slider.off { opacity: .35; }