/* ==========================================================
   Bento-Optik fuer bestehende Elemente (Header-Box, Zurueck-Button,
   Tabs, Karten-Koepfe). Wird NACH den Seiten-Styles geladen
   (siehe style/style.php); nur Optik, kein Eingriff in die Aufteilung.
   Karten-/Box-Radius kommt ueber --radius-md/--radius-lg (variablen.css).
   ========================================================== */

/* ----- Header-Box (#headerBox): Karte mit Verlauf, Akzentkante, Icon-Kachel ----- */
#headerBox {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 170% at 0% 0%, rgba(145,70,255,0.26), transparent 62%),
    var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 18px 20px 18px 23px;
  align-items: center;
  box-shadow: var(--shadow-card);
}
#headerBox::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #b583ff, var(--accent));
}
#headerBox h1 { font-size: 24px; letter-spacing: -0.01em; margin: 0 0 3px 0; }
#headerBox .sub { font-size: 14px; color: var(--text-muted); }
#headerBox .hb-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
#headerBox .hb-ic {
  width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 21px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  box-shadow: 0 0 18px rgba(145,70,255,0.4);
}

/* ----- Zurueck-Button ----- */
.back-btn {
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.back-btn:hover { background: var(--bg-input); border-color: var(--accent); }

/* ----- Tabs: Segment-Leiste (ueberschreibt die seitenspezifischen
   "Datei-Reiter" der Module; deshalb !important) ----- */
.tabs {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 2px !important;
  padding: 4px !important;
  margin-bottom: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  align-self: flex-start;
  max-width: 100%;
}
.tabs .tab-btn {
  background: transparent !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-muted) !important;
  padding: 7px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.tabs .tab-btn:hover { color: var(--text-primary) !important; background: var(--sb-hover, rgba(255,255,255,0.05)) !important; }
.tabs .tab-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(145,70,255,0.4);
}

/* ----- Karten-/Box-Koepfe: Icon-Kachel + Trennlinie ----- */
.card-header-info .card-header-icon {
  width: 30px; height: 30px; border-radius: var(--radius-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  background: rgba(145,70,255,0.16);
}

/* ----- Vorschlag 3: Akzentkante + Glow, keine Trenner ----- */
.card:not(.card--accent):not(.card--danger):not(.card--flat) {
  border-left: 1px solid var(--border-card);
  background:
    linear-gradient(var(--accent), var(--accent-hover, var(--accent))) left top / 3px 100% no-repeat,
    radial-gradient(120% 90% at 0% 0%, rgba(145,70,255,0.14), transparent 55%),
    var(--bg-card);
}
:root[data-theme="light"] .card:not(.card--accent):not(.card--danger):not(.card--flat) {
  background:
    linear-gradient(var(--accent), var(--accent-hover, var(--accent))) left top / 3px 100% no-repeat,
    radial-gradient(120% 90% at 0% 0%, rgba(145,70,255,0.09), transparent 55%),
    var(--bg-card);
}
.card .po-kicker, #pollPage .po-kicker {
  color: var(--accent) !important; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.card .po-sectiontitle, #pollPage .po-sectiontitle { font-size: 22px !important; font-weight: 800; letter-spacing: -.01em; }

/* ── Demo-Modus ─────────────────────────────────────────────── */
.demo-banner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 14px; padding:10px 14px; border-radius:var(--radius-md,14px); background:linear-gradient(135deg, rgba(145,70,255,.18), rgba(176,123,255,.10)); border:1px solid rgba(145,70,255,.35); font-size:13px; }
.demo-pill { background:var(--accent,#9146ff); color:#fff; font-weight:800; font-size:11px; letter-spacing:.08em; padding:3px 9px; border-radius:999px; }
.demo-text { flex:1 1 220px; opacity:.9; }
.demo-login, .demo-exit { font-weight:700; text-decoration:none; padding:6px 12px; border-radius:10px; font-size:12.5px; }
.demo-login { background:var(--accent,#9146ff); color:#fff; }
.demo-exit { background:var(--sb-chip,rgba(255,255,255,.08)); color:inherit; }
.demo-locked { opacity:.45; cursor:not-allowed !important; filter:grayscale(.4); }
.lp-demo-btn { display:inline-block; margin-left:10px; padding:11px 20px; border-radius:var(--radius-md,14px); font-weight:700; font-size:14px; text-decoration:none; color:inherit; border:1px solid rgba(145,70,255,.45); background:rgba(145,70,255,.08); white-space:nowrap; }
.lp-demo-btn:hover { background:rgba(145,70,255,.18); }
@media (max-width:640px){ .lp-demo-btn{ margin:10px 0 0; } }
.sd-demo-toast.swal2-popup { background:linear-gradient(135deg,#7c3aed,#a855f7) !important; color:#fff !important; border-radius:14px !important; box-shadow:0 10px 30px rgba(124,58,237,.45) !important; font-weight:700; }
.sd-demo-toast .swal2-title { color:#fff !important; }
.sd-demo-toast .swal2-timer-progress-bar { background:rgba(255,255,255,.55) !important; }
.demo-locked[readonly] { cursor:not-allowed; }

/* ── Gemeinsamer FIXER Hintergrund (Landing + angemeldete Seiten) ─ */
:root { --lp-glow: rgba(145,70,255,0.18); --lp-glow2: rgba(77,214,196,0.07); }
:root[data-theme="light"] { --lp-glow: rgba(124,58,237,0.13); --lp-glow2: rgba(77,214,196,0.10); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --lp-glow: rgba(124,58,237,0.13); --lp-glow2: rgba(77,214,196,0.10); } }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 12% 0%, var(--lp-glow), transparent 70%),
    radial-gradient(55% 45% at 100% 100%, var(--lp-glow2), transparent 70%),
    var(--bg-page);
}