/* ========== Variablen ========== */
:root{
  --sidebar-w: 280px;
  --sidebar-bg: #0e1630;
  --sidebar-border: rgba(255,255,255,.12);
  --text: #e6e9ef;
  --muted: #aeb8cc;
  --brand-blue: #2b6fff;
  --brand-orange: #ff8a2b;
}

/* ========== Grundlayout: Header (voll) | Sidebar links | Content rechts | Footer (voll) ========== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body.body-has-sidebar{
  margin:0;
  color:var(--text);
  background:#0b142e;
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: auto 1fr auto;
  min-height:100dvh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

/* Header & Footer */
.site-header{ 
  grid-column:1 / -1; 
  grid-row:1; 
  background:#0b142e; 
  padding:8px 12px; 
  border-bottom:1px solid rgba(255,255,255,.08); 
  position:sticky; 
  top:0; 
  z-index:3100; 
}
.site-footer{ grid-column:1 / -1; grid-row:3; }

/* Header-Inhalt */
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.site-header .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#e6ecf5; }
.site-header .brand img{ height:32px; width:auto; max-height:32px; }
.site-header .brand strong{ font-size:16px; }
.top-links{ display:flex; gap:10px; align-items:center; }
.top-links a{ color:#e6ecf5; text-decoration:none; padding:6px 10px; border-radius:8px; }
.top-links a:hover{ background:rgba(255,255,255,.08); }

/* Hamburger-Button */
.hamburger{ 
  background:transparent; 
  border:0; 
  color:#e6ecf5; 
  font-size:22px; 
  line-height:1; 
  padding:8px; 
  border-radius:8px; 
  cursor:pointer;
  z-index:3200; 
  display:none; /* Desktop: versteckt */
}

/* Sidebar links (Desktop: sticky) */
.sidebar{
  grid-column:1;
  grid-row:2;
  position:sticky;
  top:0;
  align-self:start;
  height:calc(100dvh - 0px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
  padding:14px;
  z-index:2001;
}
.sidebar{ scrollbar-width:none; }
.sidebar::-webkit-scrollbar{ width:0; height:0; }

/* Sidebar Inhalte */
.sidebar .brand{ display:flex; align-items:center; gap:10px; margin-bottom:10px; text-decoration:none; color:var(--text); }
.sidebar .brand img{ width:100%; height:auto; max-width:100%; }
.sidebar .section-title{ font-weight:700; margin:12px 0 6px; }
.sidebar .btn{ display:block; width:100%; text-align:center; }

.city-list{ list-style:none; margin:0; padding:0; }
.city-list li{ margin:2px 0; }
.city-list a{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--text); }
.city-list a:hover{ background:rgba(255,255,255,.06); }
.city-list .count{ opacity:.8; font-size:.9em; }

/* Content rechts */
.content{ grid-column:2; grid-row:2; padding:16px; }
.container{ max-width:1100px; margin:0 auto; }

/* Buttons */
.btn{ display:inline-block; padding:10px 12px; border-radius:10px; text-decoration:none; font-weight:600; }
.btn-small{ padding:6px 10px; border-radius:8px; font-weight:500; }
.btn-blue{ background:var(--brand-blue); color:#fff; }
.btn-orange{ background:var(--brand-orange); color:#fff; }

/* Gradient-Button (Startseite) */
.btn-home{
  display:block; width:100%; margin:8px 0;
  border:0; border-radius:10px; padding:10px 14px; cursor:pointer;
  color:#0a1530; font-weight:700; letter-spacing:.3px;
  background:linear-gradient(90deg, var(--brand-orange) 0%, var(--brand-blue) 100%);
  box-shadow:0 6px 14px rgba(43,124,255,.25), 0 2px 6px rgba(255,138,43,.35);
  transition:transform .05s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-home:hover{ filter:brightness(1.05); }
.btn-home:active{ transform:translateY(1px); }

/* Map sichtbar */
#map, .map{ height:420px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.12); }
.map .leaflet-control-container{ z-index:5; }

/* Cards */
.cards-3{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:900px){ .cards-3{ grid-template-columns:repeat(3,1fr); } }
.card{ background:#101a35; border:1px solid rgba(255,255,255,.12); border-radius:12px; overflow:hidden; }
.card-media img{ width:100%; height:170px; object-fit:cover; display:block; }
.card-body{ padding:12px; }
.card-title{ font-size:1rem; margin:.25rem 0 .1rem; }
.card-meta{ font-size:.9rem; color:var(--muted); }
.card-sub{ font-size:.9rem; opacity:.8; }

/* Button-Regeln je Typ */
.card.offline .btn-blue{ display:none; }
.card.online  .btn-orange{ display:none; }

/* ===== Event-Detail ===== */
.frame-dark{ background:#0b1b34; padding:28px 0 40px; }
.frame-dark .container{ max-width:1100px; margin:0 auto; padding:0 16px; }

.back-btn{
  appearance:none; background:#111827; color:#e5edff; border:1px solid #1f2937; border-radius:10px;
  font-weight:700; padding:8px 12px; margin:0 0 18px; cursor:pointer;
  transition:background 120ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.back-btn:hover{ background:#172133; transform:translateY(-1px); box-shadow:0 6px 16px rgba(15,23,42,.35); }

.event-title{ font-size:clamp(20px,5.2vw,32px); font-weight:800; margin:6px 0 10px; color:#eef4ff; }
.event-meta{ color:#a9c3ff; font-size:clamp(12px,3.2vw,14px); display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.event-meta .meta-dot{ opacity:.55; }
.event-meta .meta-place{ color:#cfe0ff; text-decoration:none; }
.event-meta .meta-place:hover{ text-decoration:underline; }
.event-address{ margin:6px 0 10px; color:#cfe0ff; }
.event-actions{ margin:8px 0 14px; }

.btn-join, .btn.btn-primary{
  background:#2563eb; border:1px solid #1d4ed8; color:#fff !important;
  padding:10px 14px; border-radius:10px; font-weight:700; text-decoration:none; display:inline-block;
  transition:background 120ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.btn-join:hover, .btn.btn-primary:hover{ background:#1d4ed8; box-shadow:0 6px 16px rgba(37,99,235,.35); transform:translateY(-1px); }

.event-desc{ color:#e6efff; font-size:clamp(14px,3.7vw,16px); line-height:1.55; }
.event-desc img{ display:block; max-width:100%; height:auto !important; object-fit:contain; }
.event-desc iframe, .event-desc embed, .event-desc object{ display:block; width:100% !important; max-width:100%; height:auto; }

.event-links{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.event-links .link{ color:#93c5fd; text-decoration:none; word-break:break-word; }
.event-links .link:hover{ color:#bfdbfe; text-decoration:underline; }

/* ===== Kalender ===== */
.page-calendar .content{ padding:0; }
.page-calendar .container{ max-width:none; padding-inline:0; }
.calendar-embed{
  position:relative; width:100%; max-width:1600px; margin:0 auto;
  border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.12);
  height:78vh; min-height:560px;
}
@media (max-width:980px){
  .calendar-embed{ height:85dvh; min-height:520px; max-width:100%; }
}
.calendar-embed iframe{ position:absolute; inset:0; width:100% !important; height:100% !important; border:0; }

/* ========== Sidebar Backdrop ========== */
.sidebar-backdrop{
  position:fixed; 
  inset:0; 
  background:rgba(0,0,0,0.6);
  z-index:3050; 
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.sidebar-backdrop.show{ 
  opacity:1;
  pointer-events:auto;
}
.sidebar-backdrop:not([hidden]){ 
  display:block; 
}

body.noscroll{ 
  overflow:hidden !important; 
}

/* ========== Responsive Mobile ========== */
@media (max-width:980px){
  /* 1-Spalten-Layout */
  body.body-has-sidebar{ 
    grid-template-columns:1fr; 
  }
  
  .content{ 
    grid-column:1 / -1; 
    padding:12px; 
  }
  
  .container{ 
    max-width:100% !important; 
    padding-inline:12px; 
  }
  
  .frame .container, 
  .frame-dark .container{ 
    max-width:100% !important; 
    padding-inline:12px; 
  }
  
  img, iframe, video{ 
    max-width:100% !important; 
    height:auto !important; 
  }

  /* Header Anpassungen */
  .site-header {
    padding:6px 10px !important;
  }

  .header-row {
    gap:8px !important;
  }

  .site-header .brand img {
    height:24px;
    max-height:28px;
  }

  .site-header .brand strong {
    font-size:14px;
  }

  /* Hamburger sichtbar */
  .hamburger {
    display:inline-block !important;
    padding:6px;
    font-size:20px;
  }

  /* Top-Links verstecken */
  .top-links {
    display:none !important;
  }

  /* Sidebar Off-Canvas */
  #sidebar {
    position:fixed !important;
    inset:0 auto 0 0;
    width:min(320px, 86vw);
    height:100dvh;
    background:var(--sidebar-bg);
    transform:translateX(-105%);
    transition:transform .25s ease;
    box-shadow:0 8px 30px rgba(0,0,0,0.35);
    z-index:3100;
  }

  #sidebar.open {
    transform:translateX(0);
  }
}

/* Desktop: Hamburger versteckt */
@media (min-width:981px){
  .hamburger {
    display:none !important;
  }
}
/* ========== Event-Bild Fallback ========== */
.hero-media--ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 12px;
  color: #64748b;
  gap: 12px;
}

.hero-media--ph svg {
  opacity: 0.4;
}

.hero-media--ph span {
  font-size: 14px;
  font-weight: 500;
}

.hero-media img.fallback-img {
  opacity: 0.7;
  filter: grayscale(40%);
}