/* =========================================================
   Theme: "Noir Aurora" – dunkel, ruhig, freundlich
   ========================================================= */

/* ---------- Variablen ---------- */
:root{
  /* Hintergrund (weiche, dunkle Verläufe) */
  --bg1:#0b0f14;
  --bg2:#0e131b;
  --bg3:#101623;

  /* Flächen */
  --s1:#151c28;     /* Karten */
  --s2:#0f1622;     /* Inputs/Innenflächen */
  --s3:#0b121c;     /* dunklere Elemente */

  /* Text/Farbe */
  --text:#e7eefc;
  --muted:#a8b6cc;
  --muted-2:#8ea0b9;

  /* Akzent (freundlich: Türkis → Indigo) */
  --accent:#74d3e0;
  --accent-2:#6a8dff;

  /* Rahmen/Schattierung */
  --border:rgba(255,255,255,.10);
  --border-2:rgba(255,255,255,.18);
  --shadow:0 18px 44px rgba(0,0,0,.55);
  --radius:18px;

  /* Layout */
  --container:min(1120px,92vw);
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Seite ---------- */
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 700px at -12% -10%, #1a2434 0%, transparent 55%),
    radial-gradient(1000px 700px at 115% 8%, #122136 0%, transparent 55%),
    linear-gradient(180deg,var(--bg1),var(--bg2) 58%, var(--bg3));
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:inherit;text-decoration:none}

/* ---------- Header ---------- */
header{padding:28px 16px; display:flex; justify-content:center}
.brand{
  font-weight:900; letter-spacing:.25px; line-height:1.1;
  font-size:clamp(26px,4.2vw,44px); text-align:center;
  color:var(--text); text-shadow:0 12px 28px rgba(0,0,0,.55);
}
.brand .accent{ color:var(--accent) }

/* ---------- Layout ---------- */
.main{flex:1; display:flex; justify-content:center}
.container{width:var(--container); margin:0 auto; padding:0 0 28px}

/* ---------- Karten / Panels ---------- */
.card{
  background:linear-gradient(180deg,var(--s1),var(--s2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:var(--text);
  padding:18px;
}

/* Toolleiste (z. B. Zurück) */
.toolbar{ display:flex; gap:10px; align-items:center; margin:0 0 12px }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6ch;
  font-weight:800; border-radius:14px; line-height:1;
  padding:.7rem 1rem; border:1px solid var(--border-2);
  background:var(--s3); color:var(--text);
  box-shadow:0 10px 24px rgba(0,0,0,.38);
}
.btn.primary{
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#08131b; border:0;
}
.btn.ghost{ background:transparent; border:1px solid var(--border) }
.btn.back::before{ content:"←"; opacity:.9 }

/* Fokussichtbar */
.btn:focus, input:focus, select:focus, textarea:focus{
  outline:0; box-shadow:0 0 0 3px rgba(116,211,224,.35);
}

/* ---------- Inputs / Reihen ---------- */
input, select, textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  color:var(--text); background:var(--s2);
  border:1px solid var(--border);
}
input::placeholder, textarea::placeholder{ color:#7f8ea6 }

.rows{ display:grid; gap:10px }
.row{
  display:flex; gap:12px; justify-content:space-between; align-items:center;
  padding:12px 14px; border:1px solid var(--border); border-radius:14px;
  background:var(--s2);
}
.label{ color:var(--accent); font-weight:800 }
.value{ color:var(--text); font-weight:700 }

/* ---------- Grid-Tiles (Dashboard/Start) ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px }
.tile{
  background:linear-gradient(180deg,var(--s1),var(--s2));
  border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow); height:150px; /* kompakt */
  display:flex; align-items:flex-start; justify-content:center; padding:14px; text-align:center;
}
.tile h3{ font-size:1rem; font-weight:800 }
.tile img{ height:120px; width:100%; object-fit:cover; border-bottom:1px solid var(--border) }
.tile span{ padding:12px; font-weight:800 }

/* ---------- Tabellen ---------- */
table{ width:100%; border-collapse:collapse; background:transparent }
thead th{
  background:rgba(255,255,255,.05); color:var(--text);
  border-bottom:1px solid var(--border); font-weight:800;
  text-align:left; padding:10px 12px;
}
tbody td{
  padding:10px 12px; border-bottom:1px solid var(--border); color:var(--text);
}
tbody tr:nth-child(2n){ background:rgba(255,255,255,.03) }
tfoot td{ font-weight:900; padding:10px 12px }

/* ---------- Kalender ---------- */
.month{
  background:var(--s1); border:1px solid var(--border);
  border-radius:12px; overflow:hidden;
}
.month h3{
  padding:10px 12px; background:rgba(255,255,255,.05);
  border-bottom:1px solid var(--border); color:var(--text); font-weight:800;
}
.daygrid{ display:grid; grid-template-columns:repeat(7,1fr) }
.daycell{
  min-height:44px; padding:6px;
  background:var(--s2);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  color:var(--text);
}
.daycell.muted{ background:#0c1420; color:#7f8ca3 }
.badge{
  display:inline-block; padding:2px 6px; border-radius:999px;
  font-weight:800; font-size:11px; color:#061018;
  background:var(--accent); margin-top:6px;
}
.legend{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 }
.legend .chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; padding:4px 8px; border-radius:999px;
  background:var(--s2); border:1px solid var(--border); color:var(--text);
}
.legend .dot{ width:12px; height:12px; border-radius:50% }
.form-inline{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.form-inline input,.form-inline select{ background:var(--s2); border:1px solid var(--border); color:var(--text) }

/* ---------- Status ---------- */
.flash{
  margin:8px 0; font-weight:800;
  color:#d8fff2; background:#123125; border:1px solid #1e4d39;
  padding:8px 10px; border-radius:10px;
}
.error{
  margin:8px 0; font-weight:800;
  color:#ffb9b0; background:#361a1a; border:1px solid #5a2a2a;
  padding:8px 10px; border-radius:10px;
}

/* ---------- Footer ---------- */
footer{ padding:20px; text-align:center; color:var(--muted-2) }



/* ===== Dark Fix Pack – Kalender & Formulare ===== */

/* Native Controls dunkel halten */
:root{ color-scheme: dark; accent-color: #69bed1; }

/* Kartenkopf/Toolbar */
.card{ background: linear-gradient(180deg,#151c28,#0f1622); border:1px solid rgba(255,255,255,.10); }
.toolbar{ margin: 0 0 10px; }
.btn{ background:#0b121c; border:1px solid rgba(255,255,255,.18); color:#fce7e7; }
.btn.primary{ background:linear-gradient(180deg,#69bed1,#4aa4c3); color:#08131b; }

/* ---- Form-Controls dunkel, ohne Weiß ---- */
input, select, textarea{
  background:#1a2533 !important;
  color:#e7eefc !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:none !important;
}
input::placeholder, textarea::placeholder{ color:#8696ac !important; }

/* Date-Picker Icon abdunkeln (Chromium/WebKit) */
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(85%) brightness(0.85);
  opacity:.85;
  cursor:pointer;
}

/* Reihen / Hinweise */
.row{ background:#1a2533; border-color: rgba(255,255,255,.12); }
.flash{ background:#123125; border-color:#1e4d39; color:#d8fff2; }

/* ---- Legende & Chips ---- */
.legend .chip{
  background:#172233;
  border:1px solid rgba(255,255,255,.12);
  color:#202020;
}
.legend .dot{ outline:1px solid rgba(255,255,255,.22); }

/* ---- Jahreskalender dunkler & kontrastreicher ---- */
.month{
  background:#151c28;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  overflow:hidden;
}
.month h3{
  background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.10);
  color:#3d5179;
  padding:10px 12px;
  font-weight:800;
}
.daygrid{ background:transparent; }
.daycell{
  background:#1a2533;
  color:#5c5c5c;
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  min-height:48px;
  padding:6px;
}
.daycell.muted{ background:#0f1826; color:#7f8ca3; }

/* Badges (Namen am Tag) kräftiger */
.badge{
  background: #69bed1;
  color:#061018;
  font-weight:800;
  padding:2px 6px;
  border-radius:999px;
  font-size:11px;
  margin-top:6px;
}

/* ---- Kompaktere Abstände/Buttons im Formular ---- */
.form-inline, .card form{ gap:8px; }
.form-inline input, .form-inline select{ padding:10px 12px; }
.btn{ padding:.6rem .9rem; border-radius:12px; }

/* „Zurück“-Block absetzen */
.toolbar .btn.back{ background:#121a26; border-color: rgba(255,255,255,.14); }


/* Logo neben Brand-Titel */
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;              /* Abstand Logo ↔ Text */
}
.brand-logo{
  width:44px;
  height:44px;
  object-fit:contain;
  border-radius:10px;
  padding:6px;
  background:linear-gradient(180deg,var(--s3,#0b121c),#0a1016);
  border:1px solid var(--border, rgba(255,255,255,.12));
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
@media (max-width:480px){
  .brand-logo{ width:36px; height:36px; }
}

/* === Dashboard: großes Logo + mehr Abstand zu den Kacheln === */
.brand--with-logo{
  display:inline-flex;
  align-items:center;
  gap:16px;                 /* Abstand Logo ↔ Titel */
}

/* Logo deutlich größer */
.brand-logo{
  width:88px;
  height:88px;
  object-fit:contain;
  border-radius:16px;
  padding:10px;             /* kleiner Innenabstand um runde Kanten */
  background:linear-gradient(180deg,var(--s3,#0b121c),#0a1016);
  border:1px solid var(--border, rgba(255,255,255,.12));
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}

/* Titel darf dazu gern minimal größer wirken */
.dashboard .brand{
  font-size:clamp(30px,5vw,52px);
}

/* Kacheln (Reiter) weiter nach unten schieben */
.dashboard .main .container{
  padding-top: 48px;        /* Abstand unter dem Header */
}

/* Falls du noch mehr Luft willst, erhöhe auf 64–80px */
@media (max-width: 640px){
  .brand-logo{ width:68px; height:68px; padding:8px; }
  .dashboard .main .container{ padding-top: 36px; }
}