/* === Design System (Dark/Light hybrid) ============================== */
:root{
  --bg: #0f1115;            /* fast schwarz */
  --panel: #151922;         /* dunkelgrau-blau */
  --panel-2: #1b2130;       /* etwas heller */
  --text: #e9eef6;          /* fast weiß */
  --muted: #a7b3c7;         /* graublau */
  --border: #222939;        /* Rahmen */
  --accent: #ff8a00;        /* orange */
  --accent-2: #59b3ff;      /* hellblau */
  --danger: #ff5d5d;        /* rot (Warnung) */
  --ok: #3bd671;            /* grün (ok) */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% -10%, #182033 0%, rgba(24,32,51,0) 60%),
              radial-gradient(900px 600px at 120% 10%, rgba(35,47,78,.45) 0%, rgba(35,47,78,0) 60%),
              var(--bg);
  color:var(--text);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* === App Shell ====================================================== */
.app-header{
  max-width:1080px; margin:24px auto 0; padding:0 16px;
  display:flex; align-items:center; gap:12px;
}
.brand{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:linear-gradient(180deg, rgba(255,138,0,.18), rgba(255,138,0,.06));
  border:1px solid rgba(255,138,0,.35);
  border-radius:999px;
  box-shadow:0 6px 18px rgba(255,138,0,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
.brand .dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--accent), #ffd199);
  box-shadow:0 0 18px rgba(255,138,0,.6);
}
.brand span{font-weight:700; letter-spacing:.2px; color:#ffe7cc}

.back{
  appearance:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  background:linear-gradient(180deg, rgba(89,179,255,.12), rgba(89,179,255,.04));
  border:1px solid rgba(89,179,255,.35);
  color:#d7edff; border-radius:999px;
  box-shadow:0 6px 18px rgba(89,179,255,.15), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.back:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(89,179,255,.2) }
.back svg{ width:16px; height:16px; }

main{
  max-width:1080px; margin:18px auto 40px; padding:0 16px;
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:22px;
}

footer{
  max-width:1080px; margin:24px auto 32px; padding:0 16px; color:var(--muted);
}
footer a{ color:var(--muted); text-decoration:none; margin-right:.75rem }
footer a:hover{ color:#fff }

/* === Typography & Links ============================================ */
h1,h2,h3{ margin:0 0 10px; line-height:1.2 }
h1{ font-size:28px }
h2{ font-size:22px }
h3{ font-size:18px }
a{ color:var(--accent-2); text-decoration:none }
a:hover{ text-decoration:underline }

/* === Forms ========================================================== */
form label{ display:block; margin:12px 0 8px; color:var(--muted) }
input,select,textarea{
  width:100%;
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px 12px;
  outline:none;
  transition:border .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(89,179,255,.7);
  box-shadow: 0 0 0 3px rgba(89,179,255,.18);
}
button{
  padding:12px 16px; border:0; cursor:pointer; border-radius:var(--radius-md);
  background: linear-gradient(180deg, #ff8a00, #ff6a00);
  color:#1b1306; font-weight:700;
  box-shadow: 0 10px 20px rgba(255,138,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .06s ease, box-shadow .2s ease;
}
button:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(255,138,0,.33) }
button.secondary{
  background: linear-gradient(180deg, #59b3ff, #3e9eea); color:#071725;
  box-shadow: 0 10px 20px rgba(89,179,255,.22), inset 0 1px 0 rgba(255,255,255,.18);
}

/* === Table ========================================================== */
table{ width:100%; border-collapse:collapse; overflow:hidden;
  border-radius:var(--radius-lg); border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
th,td{ padding:12px 14px; border-bottom:1px solid #1f2636 }
th{ text-align:left; color:#c9d5eb; font-weight:700; background:rgba(255,255,255,.02) }

/* Countdown Farbe (<= 90 Tage rot & auffällig) */
.due-soon .countdown{ color:var(--danger); font-weight:800; text-shadow:0 0 10px rgba(255,93,93,.35) }

/* === Flash messages ================================================= */
.flash{
  padding:12px 14px; border-radius:var(--radius-md); margin:0 0 14px;
  border:1px solid var(--border); background:rgba(255,255,255,.03);
}
.flash.success{ border-color:rgba(59,214,113,.5); color:#c4ffd7; background:rgba(59,214,113,.08) }
.flash.error{ border-color:rgba(255,93,93,.55); color:#ffd7d7; background:rgba(255,93,93,.08) }

/* === Utility ======================================================== */
.stack{ display:flex; flex-wrap:wrap; gap:10px }
.mb-0{ margin-bottom:0 } .mt-0{ margin-top:0 }
.mt-16{ margin-top:16px } .mt-24{ margin-top:24px } .mt-32{ margin-top:32px }

/* === Dashboard Tiles ================================================= */
.tile-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px,1fr));
  gap:16px;
  margin-top:16px;
}

.tile{
  height:120px; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  text-align:center;
  text-decoration:none;
  color:var(--text);
  box-shadow:var(--shadow);
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.tile:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.4); border-color: rgba(89,179,255,.5); }

.tile .icon{
  width:36px; height:36px; margin-bottom:10px;
  display:inline-block;
}
.tile .label{ font-size:13px; color:var(--muted); letter-spacing:.2px }

/* Farbakzente */
.tile.orange:hover{ border-color: rgba(255,138,0,.55); box-shadow: 0 14px 28px rgba(255,138,0,.25) }
.tile.blue:hover{ border-color: rgba(89,179,255,.55); box-shadow: 0 14px 28px rgba(89,179,255,.25) }
.tile.red:hover{ border-color: rgba(255,93,93,.55); box-shadow: 0 14px 28px rgba(255,93,93,.25) }

/* 100x100 Wunschgröße (optional streng) */
.tile.square-100{ width:100px; height:100px; }


/* === Spotify floating player ======================================= */
.spotify-fab {
  position: fixed; top: 14px; right: 16px; z-index: 1000;
  display: flex; gap: 8px; align-items: center;
}
.spotify-btn {
  appearance:none; border:0; cursor:pointer;
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, #59b3ff, #3e9eea);
  color:#071725; font-weight:700;
  box-shadow: 0 10px 20px rgba(89,179,255,.22), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .06s ease, box-shadow .2s ease;
}
.spotify-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(89,179,255,.3) }

.spotify-panel {
  position: fixed; top: 64px; right: 16px; z-index: 999;
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background: #121212; box-shadow: var(--shadow);
  width: 340px; max-width: calc(100vw - 32px);
  transform-origin: top right; transition: transform .16s ease, opacity .16s ease;
}
.spotify-panel.hidden { transform: scale(.95); opacity: 0; pointer-events: none; }
.spotify-panel iframe { display:block; width:100%; height: 472px; border:0 }
@media (max-width: 640px){
  .spotify-panel iframe { height: 380px; }
}


/* Card als Bühne vorbereiten */
.video-card{ position: relative; overflow: hidden; }

/* Video-Layer in der Card */
.card-bgvid-wrap{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}

/* Video selbst: füllt die Card-Höhe, Fokus links, leicht übercroppen (gegen Balken) */
.cardvid{ object-fit: cover; object-position: left center; transform: scale(1.08); clip-path: inset(0 42% 0 0); }


/* rechter Verlauf über dem Video → in Card-Hintergrund "auflösen" */
.cardvid-gradient{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to right,
      rgba(0,0,0,0)    0%,
      rgba(0,0,0,.10)  40%,
      rgba(0,0,0,.28)  58%,
      rgba(0,0,0,.46)  72%,
      rgba(0,0,0,.62)  84%,
      var(--panel)     100%);
  filter: blur(.4px);
}

/* Fader: blendet die Videofläche in der Card ein/aus */
.cardvid-fader{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background: var(--panel);
  opacity: 0;              /* JS setzt am Start auf 0 → sichtbar */
  transition: opacity 900ms ease;
}

/* Inhaltssschicht der Card darüber */
.card-inner{ position: relative; z-index: 4; }

/* Inhaltssschicht der Seite */
.prose p { margin: 0.5rem 0; line-height: 1.6; }
.prose a { text-decoration: underline; }