:root{
  --bg:#0b0f14;
  --panel:#121824;
  --panel-2:#0f1520;
  --text:#e6eef8;
  --muted:#9bb0c3;
  --accent:#3aa6ff;
  --ok:#21c085;
  --warn:#ffb020;
  --err:#ff5c5c;
  --shadow:0 8px 24px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1300px 800px at 20% -20%, #142034, transparent 60%),
              radial-gradient(1100px 600px at 80% -10%, #101a2b, transparent 50%),
              var(--bg);
  color:var(--text);
  font: 16px/1.6 system-ui,Segoe UI,Roboto,Ubuntu,Arial;
}

.page-wrap{min-height:100%;display:flex;flex-direction:column}
.content{flex:1;padding:32px 20px;max-width:1100px;margin:0 auto}

.site-header{position:sticky;top:0;background:rgba(11,15,20,.8);backdrop-filter: blur(10px);border-bottom:1px solid #1b2432;z-index:10}
.site-header .brand{display:flex;gap:14px;align-items:center;max-width:1100px;margin:0 auto;padding:12px 20px}
.site-header .logo{font-size:28px;filter: drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.site-header h1{margin:0;font-size:20px}
.tagline{margin:0;color:var(--muted);font-size:13px}

.main-nav{border-top:1px solid #1b2432;border-bottom:1px solid #1b2432;background:linear-gradient(180deg, #121824, #0d1420)}
.main-nav ul{max-width:1100px;margin:0 auto;display:flex;gap:8px;list-style:none;padding:8px 20px;overflow:visible}
.main-nav a{display:flex;gap:8px;align-items:center;padding:10px 14px;border:1px solid #1d2736;border-radius:12px;background:#0f1520;text-decoration:none;color:var(--text);box-shadow: var(--shadow);transition:transform .1s ease, border-color .2s}
.main-nav a:hover{transform:translateY(-1px);border-color:#2a3950}
.main-nav li.active a{outline:2px solid var(--accent)}

.hero{padding:20px 0 10px}
.hero h2{font-size:28px;margin:0 0 6px}
.section h2{font-size:24px;margin-top:0}

.grid.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}

.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid #1b2432;border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.card.link{text-decoration:none;color:inherit}
.card-ico{font-size:32px}
.badge{display:inline-block;font-size:12px;padding:4px 8px;border:1px solid #29415f;border-radius:999px;color:#b6d7ff;margin-bottom:8px;background:#0b1524}

.icon-list{padding-left:0;list-style:none}
.icon-list li{margin:8px 0}

.form{display:grid;gap:12px}
.form input,.form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #27374d;background:#0d1624;color:var(--text)}
.form button{padding:10px 14px;border-radius:10px;border:1px solid #2b3f5a;background:linear-gradient(180deg,#163152,#0c1a2e);color:#d9ecff;cursor:pointer}
.form button:hover{border-color:#395676}

.errors{background:#2a0e14;border:1px solid #5a1c25;padding:10px;border-radius:10px}
.errors li{color:#ffb3b3}
.success{color:var(--ok)}

.site-footer{padding:24px 20px;border-top:1px solid #1b2432;background:#0b1018;color:var(--muted);text-align:center}
.site-footer .small{font-size:12px;color:#8aa0b5}

.embed-placeholder{border:1px dashed #2e4058;border-radius:12px;padding:14px;text-align:center;background:#0b1018}
.embed-placeholder button{margin-top:8px}

.social-list{list-style:none;padding-left:0}
.social-list li{margin:8px 0}

.cookie-banner[hidden]{display:none}
.cookie-banner{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;z-index:1000}
.cookie-card{background:#0d1420;border-top:2px solid #24344a;padding:16px;border-radius:16px 16px 0 0;box-shadow:var(--shadow);max-width:900px;margin:0 auto 0; width:100%}
.cookie-card h2{margin-top:0}
.switch{display:flex;gap:10px;align-items:center;margin:12px 0}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-actions button{padding:8px 12px;border-radius:10px;border:1px solid #2b3f5a;background:linear-gradient(180deg,#163152,#0c1a2e);color:#d9ecff;cursor:pointer}
.cookie-open{position:fixed;right:16px;bottom:16px;padding:10px 12px;border-radius:999px;background:#0f1624;border:1px solid #233752;color:#b6d7ff}
/* Basis: jedes .grid ist ein Grid */
.grid{
  display: grid;
  gap: 16px;
}

/* 2er-Layout (falls genutzt) */
.grid.two{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* 3er-Layout: mobil flexibel, ab 900px fix 3 Spalten */
.grid.three{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (min-width: 900px){
  .grid.three{
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Social Grid Feintuning */
/* Nur Social-Grid: 6 Kacheln nebeneinander (responsiv, gr��er) */
.social-grid{
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* vorher 180px */
}
/* Desktop: fix 6 Spalten, optisch gr��er durch Innenabst�nde/Schrift */
@media (min-width: 1280px){
  .social-grid{ grid-template-columns: repeat(5, 1fr); }
}

/* Social-Karten gr��er & pr�senter */
.social-grid .social-card{
  padding: 18px;         /* mehr Innenabstand */
  text-align: center;
  border-radius: 14px;    /* etwas runder wirkt �gr��er� */
}

/* gr��ere Icons & Typo */
.social-grid .card-ico{ font-size: 38px; }      /* vorher 28px */
.social-grid .social-title{ 
  font-size: 16px;        /* vorher 14px */
  margin: 8px 0 4px; 
}
.social-grid .social-url{ 
  font-size: 14px;        /* vorher 12px */
  line-height: 1.5;
  word-break: break-all;
}

/* gr��erer Button */
.social-grid .btn{ 
  padding: 10px 14px;     /* vorher 6px 10px */
  font-size: 14px;        /* vorher 13px */
  border-radius: 12px;
}

/* Optional: einheitliche Kachel-H�he f�r mehr Pr�senz */
@supports (aspect-ratio: 1 / 1){
  .social-grid .social-card{ aspect-ratio: 5 / 4; } /* 1/1 f�r quadratisch */
}
/* Support-Seite Feintuning (nur auf ?page=support) */
.section.support .card h3{ margin-top: 0; }
.section.support .card details summary{ cursor: pointer; color: var(--muted); }
.section.support .card details[open] summary{ color: var(--text); }
/* Newsfeed */
.news-list{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.news-item .badge{ margin-bottom:6px; }
.news-meta{ display:flex; gap:12px; justify-content:space-between; align-items:center; margin-top:10px; }
.news-item.pinned{ border-color:#2a3950; box-shadow: 0 0 0 1px rgba(58,166,255,.15), var(--shadow); }
/* Poll Modal (zentriert schwebend) */
.poll-modal{
  position:fixed; inset:0; display:none; justify-content:center; align-items:center;
  background:rgba(0,0,0,.45); z-index:9999; padding:16px;
}
.poll-card{
  max-width:520px; width:100%;
  position:relative;
}
.poll-close{
  position:absolute; top:8px; right:8px;
  border:1px solid #2a3950; background:#0f1520; color:#e6eef8; border-radius:8px;
  padding:4px 8px; cursor:pointer;
}

/* Home: 2-Spalten-Layout */
.home-wrap{
  display: grid;
  grid-template-columns: 1fr 160px; /* Main | Sidebar */
  gap: 20px;
}
@media (max-width: 980px){
  .home-wrap{ grid-template-columns: 1fr; } /* Sidebar unter Main */
}

/* rechte Leiste */
.home-side{ position: sticky; top: 16px; align-self: start; }
.side-title{ margin: 0 0 10px; font-size: 18px; color: #e6eef8; }

.song-covers{ display: grid; grid-template-columns: 1fr; gap: 14px; }
.song-card{
  background: rgba(12,16,24,.7);
  border: 1px solid #243247;
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}
.song-card img{ width: 100%; height: auto; display:block; border-radius: 8px; }
.promo-link{
  display:inline-block; margin-top: 8px;
  padding: 6px 10px; border-radius: 10px;
  background: #122035; color:#e6eef8; border:1px solid #2a3950; text-decoration:none;
}
.promo-link:hover{ filter: brightness(1.08); }