/* =========================
   Nerdflix – Global Styles
   ========================= */

/* Design Tokens / General */
/* --------------------- */
:root{
  --white:#fff;
  --gray-2:#a0a3ad;
  --line:#3d404a;

  /* Nerdflix Theme */
  --accent:#ffd700;                 /* goldener Akzent */
  --bg:#111217;                     /* dunkler Hintergrund */
  --surface:#1f1f1f;
  --surface-2:#2c2c2c;
  --surface-3:#222;

  /* Globales Hintergrundbild */
  --bg-image:url('/images/Nerdflix_Personalized_Illustration.jpg');
}

html{ box-sizing:border-box; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; }
*,*:before,*:after{ box-sizing:inherit; }

body{
  margin:0; color:var(--gray-2);
  font-family:museo-sans, Arial, sans-serif;
  /* Bild + leichte Abdunkelung für Lesbarkeit */
  background:
    linear-gradient(to bottom, rgba(17,18,23,.35), rgba(17,18,23,.55)),
    var(--bg-image) center/cover fixed no-repeat,
    var(--bg);
  border-top:4px solid var(--accent);
  -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
a:hover, a:active{ outline:0; text-decoration:none; }

ul{ padding:0; }
h1{ margin-bottom:24px; }

.text-sm{ font-family:museo-sans, Arial, sans-serif; font-size:16px; line-height:24px; }
.text-lg{ font-family:museo-sans, Arial, sans-serif; font-size:30px; line-height:38px; }
.text-xl{ font-family:museo-sans, Arial, sans-serif; font-size:60px; line-height:68px; }
.text-center{ text-align:center; }
.text-primary{ color:var(--white); }
.text-secondary{ color:var(--gray-2); }

.top-divider{ position:relative; }
.top-divider::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:1px; background:var(--line);
}
.underline{ border-bottom:2px solid var(--accent); }

.wrapper{
  overflow:hidden;
  min-height:calc(100vh - 4px);
  display:flex; flex-direction:column;
}
.container{ padding:25px 24px 0 24px; } /* bewusst minimal belassen */

/* =========================
   Landing Elements (bestehend)
   ========================= */
.main{
  flex:1; position:relative;
  /* auf globales Nerdflix-Bild umstellen */
  background: var(--bg-image) bottom center / cover no-repeat;
}
.title{
  display:flex; flex-direction:column;
  height:697px; width:736px; max-width:100%;
  margin:0 auto; padding-top:20px;
}
.subtitle{
  flex:1;
  background:url('/images/bg-swoosh.png') center / contain no-repeat;
}

/* =========================
   App UI – Neu hinzugefügt
   ========================= */

/* Sections, Cards, Grid, Row/Col */
.section{
  margin:18px 0; padding:14px;
  background:var(--surface);
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.card{
  background:var(--surface); border-radius:10px; padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:16px; margin-top:16px; }
.row{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.col{ flex:1 1 300px; }

.muted{ color:#bdbdbd; }
.hidden{ display:none !important; }
.is-busy{ opacity:.6; pointer-events:none; }

/* Buttons */
.btn{
  display:inline-block; background:#444; color:#fff;
  padding:10px 12px; border-radius:8px; border:none; cursor:pointer;
  transition:background .15s ease-in-out;
}
.btn:hover{ background:#555; }
.btn-ghost{ background:transparent; border:1px solid #444; }
.btn-ghost:hover{ background:#2a2a2a; }
.btn-accent{ background:var(--accent); color:#111; }
.btn-accent:hover{ filter:brightness(.95); }
.btn-success{ background:#28a745; }
.btn-success:hover{ background:#1e7e34; }
.btn-danger{ background:#dc3545; }
.btn-danger:hover{ background:#b72a38; }

/* Forms */
form{ margin-top:10px; }
input, select, textarea, button{
  font-size:16px; border:none; border-radius:6px; padding:10px;
}
input, select, textarea{
  background:#2b2b2b; color:#fff;
}
label{ display:inline-block; margin: 6px 8px 6px 0; }

/* Tables */
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{
  padding:8px; border-bottom:1px solid #333; vertical-align:top;
}
@media (max-width:700px){
  .table th:nth-child(3), .table td:nth-child(3){ display:none; } /* z.B. Datum mobil ausblenden */
}

/* Badges & Pills */
.badge{ display:inline-block; padding:2px 6px; border-radius:4px; font-size:.9em; margin-left:6px; background:#333; color:#eee; }
.pill-add{ background:#2b7a2b; }
.pill-sub{ background:#7a2b2b; }

/* Shopping Item */
.shopping-item{
  display:flex; justify-content:space-between; align-items:center;
  background:#2b2b2b; padding:10px; border-radius:6px; margin:6px 0;
}

/* Tabs */
.tabs{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:16px;
}
.tabs a, .tabs button{
  background:#444; color:#fff; border:none; border-radius:6px; padding:8px 12px; cursor:pointer; text-decoration:none;
}
.tabs .active{ background:#666; }

/* Toast */
.toast{
  position:fixed; bottom:16px; right:16px; z-index:9999;
  background:#333; color:#fff; padding:10px 14px; border-radius:6px;
  opacity:0; transition:opacity .2s ease;
}
.toast.show{ opacity:1; }

/* =========================
   Sticky Navigation (für navigation.php)
   ========================= */
nav.main-nav{
  position:sticky; top:0; z-index:2000;
  background:rgba(34,34,34,.92);
  backdrop-filter:saturate(160%) blur(4px);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  font-family:inherit;
}
.nav-container{
  max-width:1100px; margin:0 auto; padding:10px 20px;
  display:flex; justify-content:center; align-items:center; position:relative;
}
.nav-logo{
  position:absolute; left:20px; font-weight:bold; font-size:20px; color:#fff;
}
.nav-links{ list-style:none; display:flex; gap:30px; margin:0; padding:0; }
.nav-links>li{ position:relative; }
.nav-links a, .nav-links button.nav-parent{
  color:#fff; text-decoration:none; padding:10px; display:block;
  background:none; border:none; font:inherit; cursor:pointer;
}
.nav-links a:hover, .nav-links button.nav-parent:hover{ background:#3a3a3a; }
.nav-links a.active, .nav-links a[aria-current="page"],
.nav-links li.active>button.nav-parent{
  background:#4a4a4a; text-decoration:underline; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

/* Dropdowns */
.nav-links ul{
  display:none; position:absolute; top:100%; left:0; min-width:180px;
  background:#3a3a3a; padding:0; margin:0; border-radius:6px; z-index:2100;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.nav-links li.open>ul{ display:block; }
.nav-links ul li{ border-bottom:1px solid #4a4a4a; }
.nav-links ul li:last-child{ border-bottom:none; }
.nav-links ul a{ padding:10px; }
.arrow{ font-size:.8em; margin-left:4px; }

/* Burger / Mobile */
.burger{
  display:none; flex-direction:column; justify-content:center; align-items:center;
  background:none; border:none; cursor:pointer; position:absolute; right:20px; width:30px; height:30px;
}
.burger span{ display:block; width:25px; height:3px; background:#fff; margin:4px 0; }
@media (max-width:768px){
  .nav-links{
    display:none; flex-direction:column; background:#222;
    position:absolute; top:60px; left:0; width:100%; padding-left:0; z-index:2200;
  }
  .nav-links.active{ display:flex; }
  .nav-links li{ text-align:center; }
  .nav-links ul{ position:static; background:#2f2f2f; padding-left:0; }
  .burger{ display:flex; }
  .nav-logo{ left:50%; transform:translateX(-50%); }
}

/* =========================
   Footer (bestehend, leicht justiert)
   ========================= */
.footer{ padding-top:48px; }
.footer-wrapper{
  position:relative; padding:8px 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  width:1120px; max-width:95%; margin:0 auto;
}
.footer-wrapper>div{ width:33%; }
.footer a{ text-decoration:none; }
.footer .links{ display:flex; color:var(--gray-2); }
.footer .copyright{ color:var(--gray-2); }
.footer .links ul{
  flex:none; width:100%; display:inline-flex; gap:24px; justify-content:center;
  list-style:none; padding:0;
}
.footer .socials{ text-align:right; }
.footer .socials svg{ width:21px; height:21px; fill:var(--gray-2); }
.footer a:hover, .footer a svg:hover{ color:#fff; transition:.25s ease; fill:#fff; }
.footer .socials li{ display:inline-flex; }
.footer .socials li+li{ margin-left:10px; }

/* =========================
   Media Queries (bestehend)
   ========================= */
@media screen and (max-width:942px){
  .footer-wrapper{ flex-direction:column; justify-items:center; padding-top:20px; }
  .text-lg{ font-size:22px; line-height:28px; }
  .text-xl{ font-size:40px; line-height:44px; }
  .footer-wrapper>div{ width:unset; }
  .footer .copyright, .footer .links{ margin-bottom:20px; }
}