/* ─────────────────────────────────────────────────────────────
   mobile.css – Responsive / Mobile Optimierungen
   Wird nach dem jeweiligen inline <style> Block geladen,
   damit diese Regeln bei gleicher Spezifität gewinnen.
   ───────────────────────────────────────────────────────────── */

/* ── Hamburger Button ──────────────────────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: .45rem .3rem;
  background: none;
  border: none;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--purple-l, #a78bfa);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.open .nav-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile Nav (≤ 720px) ──────────────────────────────────── */
@media (max-width: 720px) {
  nav {
    padding: .7rem 1.1rem !important;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
  }
  .nav-left { flex: 1; min-width: 0; }
  .nav-logo  { font-size: 1.35rem !important; }
  .nav-burger { display: flex; }

  nav ul {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0 !important;
    padding: .4rem 0 .6rem;
    border-top: 1px solid rgba(167,139,250,.18);
    margin-top: .55rem;
  }
  nav.open ul { display: flex; }

  nav ul li { width: 100%; }
  nav ul a {
    display: block;
    padding: .6rem 0;
    font-size: .95rem !important;
  }
  .nav-cta {
    display: inline-block;
    margin-top: .3rem;
    width: auto !important;
  }
}

/* ── Allgemeine Abstände auf kleinen Screens ───────────────── */
@media (max-width: 600px) {
  section { padding: 3rem 1.1rem !important; }
  .container { padding: 0; }
  .page-header { padding: 6.5rem 1.1rem 2rem !important; }

  /* Hero */
  .hero { padding: 6rem 1.2rem 3rem !important; }
  .hero-btns { flex-direction: column; align-items: center; gap: .75rem; }
  .owl-wrap  { width: 130px; height: 130px; }
  .hero-desc { font-size: .92rem; }

  /* Schedule rows auf index/ueber-mich */
  .schedule-row { flex-wrap: wrap; gap: .4rem .8rem; }
  .sched-day    { min-width: 70px !important; font-size: .88rem; }
  .sched-time   { min-width: 80px !important; font-size: .82rem; }
  .sched-tag    { margin-left: 0; }

  /* Social cards */
  .social-cards { gap: .75rem; }
  .social-card  { padding: .85rem 1.2rem; font-size: .95rem; }

  /* Games grid */
  .games-grid { gap: 1rem; }

  /* Footer */
  footer { font-size: .78rem; padding: 1.4rem 1rem; }
}

/* ── Kalender (kalender.html) ──────────────────────────────── */
@media (max-width: 600px) {
  .cal-wrapper { padding: .75rem .6rem 3rem !important; }

  .month-nav { margin-bottom: 1rem; }
  .month-title { font-size: 1.35rem !important; }
  .nav-arrow { width: 36px !important; height: 36px !important; font-size: 1.1rem !important; }

  .legend { gap: .3rem .55rem; }
  .legend-item { font-size: .68rem; }

  /* Kalender-Zellen verkleinern */
  .cal-day { min-height: 56px !important; padding: .25rem .2rem !important; }
  .cal-wday { font-size: .65rem !important; padding: .4rem .05rem !important; letter-spacing: 0 !important; }
  .day-num  { font-size: .72rem; width: 20px; height: 20px; }

  .day-tag   { font-size: .56rem !important; padding: .1rem .3rem !important; letter-spacing: 0 !important; }
  .day-time  { font-size: .58rem !important; }
  .day-event-label { font-size: .58rem !important; }

  /* Events-Liste unter dem Kalender */
  .event-row { flex-wrap: wrap; gap: .4rem; padding: .65rem .75rem; }
  .er-date   { min-width: 38px; }
  .er-d      { font-size: .95rem; }
}

/* Sehr enge Screens (< 380px): Tags abkürzen & noch kompakter */
@media (max-width: 380px) {
  .cal-day { min-height: 46px !important; }
  .day-tag { display: none !important; }       /* Tag-Badge auf Mini-Screens weglassen */
  .day-time { font-size: .54rem !important; }
}

/* ── Stream-Seite (twitch.html) ────────────────────────────── */
@media (max-width: 600px) {
  .stream-page { padding-top: 52px !important; }
}

/* ── Über mich (ueber-mich.html) ───────────────────────────── */
@media (max-width: 600px) {
  .about-grid { gap: 1.5rem !important; }
}