/* ===== Variablen & Themes ===== */
:root {
  /* Standard = ROT */
  --accent: #ef4444;
  --accent-2: #dc2626;
  --danger: #ef4444;
  --danger-2: #b91c1c;

  --bg-1: #0b0b0b;
  --bg-2: #161616;
  --bg-3: #101010;

  /* ↓ dunklerer Glas-Look */
  --glass-border: rgba(255, 255, 255, 0.08);   /* vorher 0.16 */
  --glass-highlight: rgba(255,255,255,0.12);   /* vorher 0.22 */
  --glass-bg-1: rgba(255,255,255,0.05);        /* vorher 0.09 */
  --glass-bg-2: rgba(255,255,255,0.015);       /* vorher 0.03 */

  --text: #f1f1f1;
  --muted: #c3c3c3;

  /* Dichte-Defaults (Komfort) */
  --pad: 12px;
  --pad-lg: 18px;
  --gap: 16px;
  --rad: 18px;
  --card-min: 260px;
  --font-scale: 1;
}

:root[data-theme="red"]    { --accent:#ef4444; --accent-2:#dc2626; }
:root[data-theme="cyan"]   { --accent:#03a9f4; --accent-2:#0288d1; }
:root[data-theme="violet"] { --accent:#8b5cf6; --accent-2:#6d28d9; }
:root[data-theme="pink"]   { --accent:#ec4899; --accent-2:#db2777; }
:root[data-theme="orange"] { --accent:#fb923c; --accent-2:#f97316; }
:root[data-theme="lime"]   { --accent:#84cc16; --accent-2:#65a30d; }

/* Dichte (Komfort/Dense) */
:root[data-density="dense"] {
  --pad: 8px;
  --pad-lg: 12px;
  --gap: 12px;
  --rad: 13px;
  --card-min: 220px;
  --font-scale: .95;
}

/* ===== Grundlayout + Wallpaper (für sichtbaren Glas-Effekt) ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: calc(16px * var(--font-scale));
  line-height: 1.45;
  background:
    radial-gradient(1100px 700px at 10% 8%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(1000px 600px at 90% 15%, rgba(255,255,255,0.04), transparent 60%),
    linear-gradient(135deg, var(--bg-1), var(--bg-2) 40%, var(--bg-3));
  color: var(--text);
  margin: 0;
  padding: 20px;
}

/* Blobs + feines Rauschen */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 600px at 10% 15%, rgba(255, 80, 80, 0.22), transparent 60%),
    radial-gradient(800px 500px at 85% 20%, rgba(255, 150, 0, 0.14), transparent 60%),
    radial-gradient(700px 500px at 50% 85%, rgba(80, 120, 255, 0.14), transparent 65%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
    <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter>\
    <rect width='120' height='120' filter='url(#n)' opacity='0.6'/></svg>");
  background-size: 120px 120px;
}

/* Links gut sichtbar (auch visited) */
a, a:visited { color: var(--accent); text-decoration: underline; }
a:hover { opacity: .9; }
a.placeholder, a.placeholder:visited { color: var(--accent) !important; text-decoration: underline; }
span.placeholder { color: var(--muted); text-decoration: none; }

/* ===== Container (dunkler, weniger milchig) ===== */
.container {
  position: relative;
  background: linear-gradient(180deg, var(--glass-bg-1), var(--glass-bg-2));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  padding: var(--pad-lg);
  border-radius: 24px;
  max-width: 1220px;
  margin: auto;
  box-shadow: 0 18px 60px rgba(0,0,0,0.65);
  border: 1px solid var(--glass-border);
  animation: fadeIn .6s ease-in-out;
}
.container::before{
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    radial-gradient(800px 120px at 50% 0%, rgba(255,255,255,0.06), transparent 70%);
  mix-blend-mode: screen; opacity:.8;
}

/* ===== Header / Toolbar ===== */
.header {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); justify-content: space-between;
  margin-bottom: 8px;
}
.header h1 { margin: 0; font-size: clamp(22px, 3vw, 28px); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }

/* Inputs: Search & Select (Glas, dunkler) */
.toolbar input[type="search"],
.toolbar select {
  min-width: 220px;
  padding: 11px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid var(--glass-border);
  color:#fff;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 8px 22px rgba(0,0,0,0.25);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.toolbar select {
  padding-right: 36px;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="white" viewBox="0 0 16 16"><path d="M3.204 5h9.592L8 10.481z"/></svg>');
  background-repeat: no-repeat, no-repeat;
  background-position: center center, right 12px center;
  background-size: cover, 16px;
}
.toolbar input[type="search"]:focus,
.toolbar select:focus {
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 12px 28px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* Theme Chips */
.theme-chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.05);
  border:1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 6px 14px rgba(0,0,0,.25);
  font-size:.92em; color:#fff; cursor:pointer; user-select:none;
  transition: transform .15s ease, box-shadow .2s ease, background .3s ease;
}
.chip:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.35); }
.chip .swatch { width:14px; height:14px; border-radius:999px; display:inline-block; border:1px solid rgba(255,255,255,.5); }
.chip.active { outline:2px solid var(--accent); }

/* ===== Hauptlayout (zweispaltig) ===== */
.main-layout {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--gap);
  margin-top: 8px;
  margin-bottom: 22px;
}
@media (max-width: 980px){ .main-layout { grid-template-columns: 1fr; } }

/* ===== Cards / Sektionen (dunkler) ===== */
.card,
.details-section,
.image-section,
.login-form,
.todo-form,
.section-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--rad);
  box-shadow: 0 16px 38px rgba(0,0,0,0.4);
  padding: var(--pad-lg);
}
.card::before,
.details-section::before,
.image-section::before,
.login-form::before,
.todo-form::before,
.section-card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 36%),
    radial-gradient(400px 80px at 50% 0%, rgba(255,255,255,0.06), transparent 70%);
  mix-blend-mode: screen; opacity:.8;
}
.section-card { padding: 10px 14px; }

/* Abschnittsabstände zwischen Sektionen */
section + section { margin-top: 20px; }

/* ===== Überschriften ===== */
h2 {
  margin: 0 0 8px 0;
  color: var(--accent);
  text-shadow: 0 0 12px color-mix(in oklab, var(--accent) 45%, transparent);
}
h3 { margin: 0 0 6px 0; }

/* ===== Bild ===== */
.bild img {
  width: 100%; max-width: 540px; border-radius: 16px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.5);
  transition: transform .3s ease;
}
.bild img:hover { transform: scale(1.03); }

/* ===== Generisches Card-Grid ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--gap);
  margin-top: 10px;
}
.info-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--rad);
  padding: var(--pad);
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012));
  box-shadow: 0 12px 28px rgba(0,0,0,0.38);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px color-mix(in oklab, var(--accent) 22%, transparent);
  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
}
.info-card .k { color: var(--muted); font-size: .95em; }
.info-card .v { font-weight: 600; }

/* ===== Umbauten-Grid ===== */
.umbau-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--gap);
  margin-top: 10px;
}
.umbau-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.umbau-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px color-mix(in oklab, var(--accent) 26%, transparent);
  border-color: color-mix(in oklab, var(--accent) 38%, transparent);
}
.umbau-card h3 { color: var(--accent); }

/* Abstand vor Gesamtsumme der Umbauten */
.umbau-summe-wrapper {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}

/* ===== Badges ===== */
.badge {
  display:inline-block; padding:4px 8px; border-radius:999px;
  background: color-mix(in oklab, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  color:#fff; font-size:.78rem; font-weight:700;
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 8px 18px rgba(0,0,0,0.25);
}

/* ===== Leuchtmittel: ganze Card „abgesperrt“ (ersetzt/fehlt) ===== */
.red-marked.info-card {
  position: relative;
  border-color: color-mix(in oklab, var(--accent) 38%, transparent);
  background:
    linear-gradient(180deg, rgba(239,68,68,0.07), rgba(239,68,68,0.03)),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  opacity: 0.85;
  overflow: hidden;
}
.red-marked.info-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(239, 68, 68, 0.11),
    rgba(239, 68, 68, 0.11) 8px,
    transparent 8px,
    transparent 16px
  );
  pointer-events: none;
}

/* ===== Meta / Chips ===== */
.muted { color: var(--muted); font-size: .92em; }

/* ===== Verpixelte Summe ===== */
.verpixelt { filter: blur(8px); cursor: pointer; transition: filter .25s ease; }
.verpixelt:hover { filter: blur(4px); }

/* ===== Formulare & Inputs ===== */
.login-form input,
.todo-form input,
.inline-km-form input[type="number"],
input[type="date"] {
  width: 100%;
  margin: 8px 0; padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid var(--glass-border);
  color: #fff; border-radius: 14px; font-size: 1em;
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 8px 20px rgba(0,0,0,.25);
}
.inline-km-form { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-km-form input[type="number"] { width: 130px; }

/* Date Input */
input[type="date"]{
  background-color: rgba(42,42,42,.74);
  transition: border-color .2s ease, box-shadow .2s ease;
  width: 180px;
}
input[type="date"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 45%, transparent);
}
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* ===== Buttons (glasig, dunkler) ===== */
button, input[type="submit"], .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 12px 18px; border: 1px solid var(--glass-border); border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 700; letter-spacing: .2px; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .3s ease, opacity .2s;
  box-shadow: 0 16px 36px color-mix(in oklab, var(--accent) 32%, transparent);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
button:hover, input[type="submit"]:hover, .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px color-mix(in oklab, var(--accent) 40%, transparent);
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}
button:active, input[type="submit"]:active, .btn:active {
  transform: translateY(0);
  box-shadow: 0 16px 36px color-mix(in oklab, var(--accent) 32%, transparent);
}
button:disabled, input[type="submit"]:disabled, .btn:disabled {
  opacity: .55; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Danger-Buttons */
.btn-danger, .remove-todo button {
  background: linear-gradient(135deg, var(--danger), var(--danger-2));
  box-shadow: 0 16px 32px rgba(229,57,53,.28);
}
.btn-danger:hover, .remove-todo button:hover {
  background: linear-gradient(135deg, var(--danger-2), var(--danger));
  box-shadow: 0 22px 44px rgba(229,57,53,.34);
}

/* ===== Statusfarben ===== */
.red { color: #ff7777; font-weight: 700; }
.green { color: #4ee275; font-weight: 700; }

/* ===== Animation ===== */
@keyframes fadeIn { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

/* ===== Mobile Tweaks ===== */
@media (max-width: 720px){
  .toolbar input[type="search"], .toolbar select{ min-width: 170px; }
  .container { padding: 14px; }
  .badge { font-size: .72rem; }
}
@media (max-width: 480px){
  .toolbar input[type="search"], .toolbar select{ min-width: 140px; }
  .main-layout { margin-bottom: 18px; }
}