/* SAM Terminabstimmung – Stylesheet */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --green:  #c8f135;
  --blue:   #4f8cff;
  --red:    #ff5e5e;
  --bg:     #060810;
  --bg2:    rgba(255,255,255,0.04);
  --bg3:    rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.10);
  --border2:rgba(255,255,255,0.18);
  --text:   #f5f6fa;
  --muted:  rgba(255,255,255,0.50);
  --dim:    rgba(255,255,255,0.30);
  --radius: 14px;
  --font:   'Nunito', sans-serif;
}

html, body { min-height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Aurora ──────────────────────────────────────────────────── */
.aurora { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.aurora-band {
  position: absolute; left: -20%; width: 140%;
  border-radius: 50%; filter: blur(80px); opacity: 0;
  animation: auroraFloat linear infinite;
}
.ab1 { height:300px; top:10%; background:linear-gradient(90deg,transparent,rgba(200,241,53,.12),rgba(79,140,255,.10),transparent); animation-duration:14s; }
.ab2 { height:200px; top:25%; background:linear-gradient(90deg,transparent,rgba(162,89,255,.08),rgba(200,241,53,.07),transparent); animation-duration:18s; animation-delay:-5s; }
.ab3 { height:250px; top:5%;  background:linear-gradient(90deg,transparent,rgba(79,140,255,.07),rgba(255,94,94,.06),transparent);  animation-duration:22s; animation-delay:-9s; }
@keyframes auroraFloat {
  0%   { opacity:0; transform:translateX(-5%) translateY(0) scaleY(1); }
  15%  { opacity:1; }
  50%  { transform:translateX(5%) translateY(30px) scaleY(1.15); }
  85%  { opacity:1; }
  100% { opacity:0; transform:translateX(-5%) translateY(0) scaleY(1); }
}

canvas.stars { position:fixed; inset:0; pointer-events:none; z-index:0; }

/* ── Layout ──────────────────────────────────────────────────── */
.page {
  position: relative; z-index: 10;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 2.5rem 2rem 5rem;
}

/* Zentrierung: alle direkten Inhalte gleich breit und zentriert */
.main-wrap {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Alle Cards im main-wrap volle Breite */
.main-wrap > .card,
.main-wrap > div > .card {
  width: 100%;
  box-sizing: border-box;
}

/* ── Header ──────────────────────────────────────────────────── */
.logo-wrap  { margin-bottom: 1.25rem; animation: fadeUp .9s .2s both; }
.logo-wrap img { height: 76px; width: auto; }
.eyebrow    { font-size:.75rem; font-weight:800; letter-spacing:.3em; text-transform:uppercase; color:rgba(200,241,53,.8); margin-bottom:.4rem; animation:fadeUp .9s .4s both; }
.page-title { font-size:clamp(1.3rem,4vw,1.9rem); font-weight:900; margin-bottom:.3rem; animation:fadeUp .9s .5s both; text-align:center; }
.page-sub   { font-size:.9rem; font-weight:600; color:var(--muted); margin-bottom:2.25rem; animation:fadeUp .9s .6s both; text-align:center; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  width: 100%;
  animation: fadeUp .9s .7s both;
}

/* PIN-Screen schmal zentriert */
.card.card-narrow {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ── PIN-Screen ──────────────────────────────────────────────── */
#pinScreen { text-align:center; }
.pin-icon  { font-size:2.8rem; margin-bottom:.6rem; }
.pin-title { font-size:1.25rem; font-weight:800; margin-bottom:.4rem; }
.pin-desc  { font-size:.88rem; color:var(--muted); margin-bottom:1.4rem; line-height:1.65; }

.pin-input-wrap { display:flex; gap:.5rem; justify-content:center; margin-bottom:.9rem; }
.pin-digit {
  width:52px; height:56px; text-align:center;
  font-size:1.4rem; font-weight:800; font-family:var(--font);
  background:var(--bg3); border:1.5px solid var(--border2);
  border-radius:10px; color:var(--text); outline:none;
  caret-color:var(--green); transition:border-color .2s;
}
.pin-digit:focus { border-color:var(--green); }

.status-msg         { font-size:.85rem; font-weight:700; min-height:1.3rem; margin-bottom:.5rem; }
.status-msg.ok      { color:var(--green); }
.status-msg.err     { color:var(--red); }

.pin-hint { margin-top:.9rem; font-size:.75rem; color:var(--dim); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
  background:linear-gradient(135deg,#c8f135,#a0d020);
  color:#060810; border:none; border-radius:10px;
  padding:.72rem 1.9rem; font-size:.95rem; font-weight:800;
  font-family:var(--font); cursor:pointer;
  transition:opacity .2s, transform .1s;
  display:inline-block;
}
.btn-primary:hover   { opacity:.88; }
.btn-primary:active  { transform:scale(.98); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; }

.btn-ghost {
  background:none; border:1px solid var(--border2); border-radius:8px;
  color:var(--dim); font-size:.8rem; font-family:var(--font);
  padding:.35rem .9rem; cursor:pointer; font-weight:700;
  transition:all .2s;
}
.btn-ghost:hover { color:var(--red); border-color:rgba(255,94,94,.35); }

/* ── Vote-Screen ─────────────────────────────────────────────── */
#voteScreen { display:none; width:100%; max-width:560px; }

.section-label {
  font-size:.72rem; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(200,241,53,.75);
  margin-bottom:.7rem;
}

/* Voter-Eingabe */
.voter-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
  margin-bottom:.5rem;
}
.voter-grid input {
  background:var(--bg3); border:1.5px solid var(--border2);
  border-radius:10px; color:var(--text);
  font-size:.95rem; font-family:var(--font);
  padding:.65rem 1rem; outline:none; transition:border-color .2s;
}
.voter-grid input::placeholder { color:var(--dim); }
.voter-grid input:focus         { border-color:var(--blue); }

@media (max-width:480px) {
  .voter-grid { grid-template-columns:1fr; }
}

/* Poll-Block */
.poll-block  { margin-top:1rem; }
.poll-title  { font-size:1.05rem; font-weight:800; margin-bottom:.2rem; }
.poll-desc   { font-size:.85rem; color:var(--muted); margin-bottom:1rem; }
.no-polls    { color:var(--muted); font-size:.9rem; text-align:center; padding:1.5rem 0; }

/* Date-Cards */
.date-card {
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:1.1rem 1.2rem;
  margin-bottom:.7rem; cursor:pointer;
  transition:border-color .2s, background .2s;
}
.date-card:hover       { border-color:rgba(255,255,255,.22); background:var(--bg3); }
.date-card.voted       { border-color:var(--green); background:rgba(200,241,53,.06); }

.date-top   { display:flex; align-items:center; justify-content:space-between; margin-bottom:.65rem; }
.date-left  { display:flex; align-items:center; gap:.7rem; }
.date-icon  { font-size:1.35rem; }
.date-name  { font-size:.95rem; font-weight:800; }
.date-time  { font-size:.78rem; color:var(--muted); margin-top:2px; }
.date-right { display:flex; align-items:center; gap:.55rem; flex-shrink:0; }
.vote-count { font-size:.82rem; font-weight:700; color:var(--muted); }

.vote-btn {
  padding:.32rem .85rem; border-radius:8px;
  font-size:.8rem; font-weight:800; font-family:var(--font);
  border:1.5px solid var(--border2);
  background:transparent; color:var(--muted); cursor:pointer;
  transition:all .2s; pointer-events:none; /* Card-click handelt */
}
.date-card:hover .vote-btn   { color:var(--text); background:var(--bg3); }
.date-card.voted .vote-btn   { background:rgba(200,241,53,.15); border-color:var(--green); color:var(--green); }

/* Bar */
.bar-track { height:5px; background:rgba(255,255,255,.07); border-radius:3px; overflow:hidden; margin-bottom:.55rem; }
.bar-fill  { height:100%; background:linear-gradient(90deg,var(--green),var(--blue)); border-radius:3px; transition:width .4s ease; }

/* Chips */
.voters     { display:flex; flex-wrap:wrap; gap:5px; min-height:22px; }
.chip {
  font-size:.73rem; font-weight:700; padding:3px 10px; border-radius:99px;
  background:rgba(79,140,255,.16); color:var(--blue);
  border:1px solid rgba(79,140,255,.28);
  display:flex; align-items:center; gap:5px;
}
.chip-mine  { background:rgba(200,241,53,.15); color:var(--green); border-color:rgba(200,241,53,.38); }
.chip-del   { background:none; border:none; cursor:pointer; color:inherit; font-size:.68rem; padding:0; line-height:1; pointer-events:all; }

/* Result-Banner */
.result-banner {
  margin-top:.5rem; padding:1rem 1.2rem;
  background:rgba(200,241,53,.09); border:1px solid rgba(200,241,53,.28);
  border-radius:var(--radius); display:flex; align-items:center; gap:.75rem;
  animation:fadeUp .35s both;
}
.result-banner.tie { background:rgba(79,140,255,.09); border-color:rgba(79,140,255,.28); }
.rb-icon { font-size:1.55rem; }
.rb-text { font-size:.88rem; font-weight:800; color:rgba(200,241,53,.9); }
.result-banner.tie .rb-text { color:rgba(79,140,255,.9); }
.rb-sub  { font-size:.78rem; color:var(--muted); }

/* Privacy */
.privacy-note {
  font-size:.73rem; color:var(--dim); text-align:center;
  margin-top:1.1rem; line-height:1.6;
}
.privacy-note a { color:rgba(79,140,255,.7); text-decoration:none; }
.privacy-note a:hover { text-decoration:underline; }

/* Logout */
.logout-row { display:flex; justify-content:center; margin-top:.75rem; }

/* Footer */
.foot {
  position:relative; z-index:10; text-align:center;
  font-size:.78rem; color:var(--dim); font-weight:600;
  letter-spacing:.07em; margin-top:2rem;
}
.foot a { color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.12); }
.foot a:hover { color:var(--muted); }

/* ── Admin-Styles ────────────────────────────────────────────── */
.admin-page  { max-width:860px; }
.admin-nav   { display:flex; gap:.5rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.nav-btn     { padding:.4rem 1rem; border-radius:8px; font-size:.82rem; font-weight:700; font-family:var(--font); cursor:pointer; border:1.5px solid var(--border2); background:transparent; color:var(--muted); transition:all .2s; }
.nav-btn.active, .nav-btn:hover { background:var(--bg3); color:var(--text); border-color:rgba(255,255,255,.3); }
.nav-btn.active { border-color:var(--green); color:var(--green); }

.admin-section { display:none; }
.admin-section.visible { display:block; }

.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.85rem; }
th    { text-align:left; padding:.6rem .8rem; color:var(--muted); font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; border-bottom:1px solid var(--border); }
td    { padding:.65rem .8rem; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:top; }
tr:hover td { background:var(--bg3); }

.badge { display:inline-block; padding:2px 9px; border-radius:99px; font-size:.72rem; font-weight:800; }
.badge-active   { background:rgba(200,241,53,.15); color:var(--green); }
.badge-closed   { background:rgba(255,94,94,.15);  color:var(--red); }
.badge-archived { background:var(--bg3); color:var(--muted); }

.btn-sm { padding:.28rem .75rem; border-radius:7px; font-size:.78rem; font-weight:700; font-family:var(--font); cursor:pointer; border:1px solid var(--border2); background:transparent; color:var(--muted); transition:all .2s; }
.btn-sm:hover  { background:var(--bg3); color:var(--text); }
.btn-sm.danger { border-color:rgba(255,94,94,.3); }
.btn-sm.danger:hover { background:rgba(255,94,94,.12); color:var(--red); }
.btn-sm.success:hover { background:rgba(200,241,53,.12); color:var(--green); }

/* Form */
.form-group  { margin-bottom:1rem; }
.form-group label { display:block; font-size:.78rem; font-weight:700; color:var(--muted); margin-bottom:.35rem; letter-spacing:.05em; text-transform:uppercase; }
.form-group input,
.form-group textarea,
.form-group select {
  width:100%; background:var(--bg3); border:1.5px solid var(--border2);
  border-radius:10px; color:var(--text); font-size:.92rem; font-family:var(--font);
  padding:.65rem 1rem; outline:none; transition:border-color .2s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--dim); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color:var(--blue); }
.form-group textarea { resize:vertical; min-height:70px; }
.form-group select    { background-image:none; }

.dates-builder   { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.5rem; }
.date-row        { display:flex; gap:.5rem; align-items:center; }
.date-row input  { flex:1; }
.date-row button { flex-shrink:0; }

/* Stats-Cards */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.75rem; margin-bottom:1.25rem; }
.stat-card  { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.2rem; }
.stat-num   { font-size:2rem; font-weight:900; color:var(--green); line-height:1; margin-bottom:.25rem; }
.stat-label { font-size:.78rem; color:var(--muted); font-weight:700; }

.bar-admin  { height:8px; background:rgba(255,255,255,.07); border-radius:4px; overflow:hidden; margin-top:.4rem; }
.bar-admin-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--blue)); border-radius:4px; transition:width .5s ease; }

.winner-row td { background:rgba(200,241,53,.05); }

/* Log */
.log-list { font-family:monospace; font-size:.75rem; color:var(--muted); line-height:1.7; max-height:320px; overflow-y:auto; background:rgba(0,0,0,.3); border-radius:10px; padding:1rem; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:200; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal         { background:#0d1020; border:1px solid var(--border2); border-radius:18px; padding:2rem; width:100%; max-width:520px; max-height:80vh; overflow-y:auto; animation:fadeUp .3s both; }
.modal-title   { font-size:1.1rem; font-weight:800; margin-bottom:1.25rem; }
.modal-close   { float:right; background:none; border:none; color:var(--muted); font-size:1.3rem; cursor:pointer; margin-top:-.25rem; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:520px) {
  .card { padding:1.2rem 1rem; }
  .pin-digit { width:46px; height:52px; font-size:1.2rem; }
  .date-top  { flex-wrap:wrap; gap:.5rem; }
  .date-right { margin-left:auto; }
  .admin-nav  { gap:.35rem; }
}