/* =========================================================
   Hochzeitsquiz – gemeinsames Styling
   Farben kommen als CSS-Variablen aus config.php
   ========================================================= */

:root{
  --bg:#f4f1ea; --text:#33302b; --accent:#a31f2c; --accent2:#8c9a78; --card:#fff;
  --muted:#97897a; --ok:#3f7d39; --no:#c0573a; --line:#e7ded0; --bar:#c8b99c;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--sans); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.45;
}
h1,h2,h3,.couple,.qtext{ font-family:var(--serif); font-weight:600; }
button{ font-family:inherit; cursor:pointer; }
a{ color:var(--accent); }

.couple{ font-family:var(--serif); color:var(--accent); letter-spacing:.5px; font-size:1.05rem; }
.muted{ color:var(--muted); }
.center{ text-align:center; }
.pill{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:.25em .7em; border-radius:999px;
  background:var(--line); color:var(--muted); }
.pill.quiz{ background:var(--accent); color:#fff; }
.err{ color:var(--no); font-size:.9rem; margin:.2rem 0; }

/* ---------- GAST (Handy) ---------- */
body.guest .screen, body.admin .screen{
  min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:18px;
}
/* Gäste-Inhalte (Karten, Buttons, Balken) füllen die volle Breite statt zu schrumpfen */
body.guest .screen{ align-items:stretch; }
body.guest #app{ width:100%; max-width:520px; margin:0 auto; }
body.guest{ padding:0; }

.card{
  background:var(--card); border-radius:20px; padding:26px 22px;
  box-shadow:0 12px 40px rgba(120,90,60,.12); border:1px solid var(--line);
}
.card.center{ text-align:center; }
.join-card .sub{ color:var(--muted); margin-top:4px; }
.big-emoji{ font-size:3rem; margin:.2em 0; }
.check{ font-size:2.6rem; color:var(--ok); }

.join-card{ text-align:center; }
.join-card h1{ margin:.1em 0 .4em; font-size:1.6rem; }
form input{
  display:block; width:100%; margin:10px 0; padding:14px 16px; font-size:1.05rem;
  border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--text);
}
form input:focus{ outline:none; border-color:var(--accent); }
button, .ctrl, .linkbtn{
  display:inline-block; border:none; background:var(--accent); color:#fff;
  padding:14px 20px; font-size:1.05rem; font-weight:600; border-radius:12px;
  text-decoration:none; transition:transform .06s ease, filter .15s ease;
}
button:active{ transform:translateY(1px); }
button:disabled{ filter:grayscale(.4) opacity(.7); cursor:default; }
form button{ width:100%; margin-top:8px; }

/* Frage + Antworten (Gast) */
.qhead{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin:4px 2px 14px; }
.qtext{ font-size:1.5rem; line-height:1.25; margin:0 0 18px; }
.qtext.small{ font-size:1.15rem; margin-bottom:14px; }
.options{ display:flex; flex-direction:column; gap:12px; }
.opt{
  background:#fff; color:var(--text); border:2px solid var(--line);
  padding:18px; font-size:1.15rem; font-weight:600; border-radius:14px; text-align:left;
  box-shadow:0 4px 14px rgba(120,90,60,.06);
}
.opt:active{ border-color:var(--accent); }
.opt.chosen{ border-color:var(--accent); background:var(--accent); color:#fff; }

/* Resultat (Gast) */
.result-banner{ text-align:center; font-family:var(--serif); font-size:1.35rem; font-weight:700;
  padding:14px; border-radius:14px; margin-bottom:14px; }
.result-banner.ok{ background:rgba(63,125,57,.14); color:var(--ok); }
.result-banner.no{ background:rgba(194,104,63,.14); color:var(--no); }
.result-banner.miss{ background:var(--line); color:var(--muted); }
.result-banner.poll{ background:rgba(163,31,44,.14); color:var(--accent); }

.bars{ display:flex; flex-direction:column; gap:12px; margin:6px 0 14px; }
.bar-row{ }
.bar-label{ font-size:.98rem; margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.bar-row.correct .bar-label{ color:var(--ok); font-weight:700; }
.bar-row .you{ background:var(--accent); color:#fff; font-size:.68rem; padding:.1em .5em; border-radius:999px; }
.bar-track{ background:var(--line); border-radius:999px; height:16px; overflow:hidden; position:relative; }
.bar-fill{ background:var(--bar); height:100%; border-radius:999px; transition:width .5s ease; }
.bar-row.correct .bar-fill{ background:var(--ok); }
.bar-row.yours .bar-fill{ background:var(--accent); }
.bar-val{ font-size:.82rem; color:var(--muted); margin-top:3px; }

/* Rangliste (Gast) */
.your-rank{ font-size:1.1rem; }
.board{ list-style:none; margin:14px 0; padding:0; }
.board li{ display:grid; grid-template-columns:34px 1fr auto auto; gap:10px; align-items:center;
  padding:10px 8px; border-bottom:1px solid var(--line); }
.board li .rank{ font-family:var(--serif); font-weight:700; color:var(--accent); font-size:1.1rem; }
.board li .nm{ font-weight:600; }
.board li .sc{ font-size:.85rem; color:var(--muted); }
.board li .tm{ font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.board li.me{ background:rgba(163,31,44,.12); border-radius:10px; }

/* ---------- ADMIN ---------- */
body.admin{ background:var(--bg); }
.login-card{ width:100%; max-width:380px; text-align:center; }
.login-card h1{ font-size:1.4rem; margin:.2em 0 .6em; }

.admin-wrap{ max-width:1100px; margin:0 auto; padding:18px; }
.abar{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:6px 4px 16px; flex-wrap:wrap; }
.abar .couple{ font-size:1.3rem; }
.abar-right{ display:flex; gap:8px; }
.linkbtn{ background:#fff; color:var(--accent); border:1.5px solid var(--line); padding:9px 14px; font-size:.92rem; }
.linkbtn.reset{ color:var(--no); border-color:#ecd9d0; cursor:pointer; }
.agrid{ display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }
.agrid .card{ padding:20px; }
.agrid h3{ margin:0 0 10px; }
.cur.card .qtext{ font-size:1.4rem; }
.voted{ margin-top:12px; color:var(--muted); }
.voted b{ color:var(--text); }
.tick{ color:var(--ok); font-size:.8rem; font-weight:700; }

.controls{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.ctrl{ font-size:1.05rem; }
.ctrl.primary{ background:var(--accent); }
.ctrl.ghost{ background:#fff; color:var(--accent); border:1.5px solid var(--line); }
.ctrl.danger{ background:var(--no); }

.join-box{ text-align:center; }
.qr{ width:200px; max-width:100%; margin:6px auto 10px; }
.qr svg, .b-qr svg{ width:100%; height:auto; display:block; }
.joinlink{ font-size:.82rem; word-break:break-all; display:inline-block; margin-top:4px; }
.plist{ list-style:none; margin:0; padding:0; max-height:280px; overflow:auto; }
.plist li{ padding:7px 4px; border-bottom:1px solid var(--line); font-size:.95rem; }

/* ---------- BEAMER (Leinwand) ---------- */
body.beamer{ background:radial-gradient(circle at 50% 0%, #fff 0%, var(--bg) 70%); }
body.beamer #app{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:3vmin; }
body.beamer .b-r{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1vmin; }
.b-lobby,.b-q,.b-r,.b-end{ width:100%; max-width:1500px; text-align:center; }
.b-couple{ font-family:var(--serif); color:var(--accent); font-size:3vw; letter-spacing:1px; }
.b-title{ font-size:5vw; margin:.1em 0 .3em; }
.b-cta{ font-size:2.4vw; color:var(--text); }
.b-qr{ width:34vmin; margin:3vmin auto 2vmin; background:#fff; padding:2vmin; border-radius:2vmin;
  box-shadow:0 1.5vmin 5vmin rgba(120,90,60,.18); }
.b-link{ font-size:1.8vw; color:var(--accent); word-break:break-all; }
.b-count{ margin-top:3vmin; font-size:2.4vw; color:var(--muted); }
.b-count span{ color:var(--accent); font-weight:700; }

.b-qnum{ font-size:2vw; color:var(--accent); letter-spacing:.1em; text-transform:uppercase; }
.b-qtext{ font-size:5vw; line-height:1.15; margin:.3em 0 .6em; }
.b-qtext.small{ font-size:2.4vw; font-weight:600; margin:.1em 0 .6em; }
.b-opts{ display:grid; grid-template-columns:1fr 1fr; gap:2.2vmin; max-width:1200px; margin:0 auto; }
.b-opts:has(.b-opt:nth-child(3)){ grid-template-columns:1fr 1fr; }
.b-opt{ background:#fff; border:0.3vmin solid var(--line); border-radius:2vmin; padding:2.6vmin 3vmin;
  font-size:2.6vw; font-weight:600; text-align:left; display:flex; align-items:center; gap:1.6vmin;
  box-shadow:0 1vmin 3vmin rgba(120,90,60,.07); }
.b-letter{ display:inline-flex; align-items:center; justify-content:center; width:1.7em; height:1.7em;
  background:var(--accent2); color:#fff; border-radius:50%; font-family:var(--serif); font-weight:700; flex:none; }
.b-voting{ margin-top:3.5vmin; font-size:2.2vw; color:var(--muted); }
.b-voting span{ color:var(--accent); font-weight:700; }

.b-bars{ display:flex; flex-direction:column; gap:1.7vmin; max-width:1100px; margin:1vmin auto; }
.b-bar-top{ display:flex; justify-content:space-between; gap:1em; font-size:1.9vw; margin-bottom:.6vmin; }
.b-bar-name{ overflow-wrap:anywhere; }
.b-bar-pct{ flex:none; white-space:nowrap; }
.b-bar-row.correct .b-bar-top{ color:var(--ok); font-weight:700; }
.b-bar-track{ background:var(--line); border-radius:999px; height:3.4vmin; overflow:hidden; }
.b-bar-fill{ background:var(--bar); height:100%; border-radius:999px; transition:width .6s ease; }
.b-bar-row.correct .b-bar-fill{ background:var(--ok); }
.b-correct{ font-size:2.3vw; margin-top:1.2vmin; }
.b-correct b{ color:var(--ok); }

.b-end h1{ font-size:4vw; margin:.2em 0 .5em; }
.b-board{ list-style:none; margin:0 auto; padding:0; max-width:1100px; }
.b-board li{ display:grid; grid-template-columns:6vmin 1fr auto auto; gap:2vmin; align-items:center;
  padding:1.6vmin 2vmin; font-size:2.6vw; border-bottom:0.2vmin solid var(--line); }
.b-board li .r{ font-family:var(--serif); font-weight:700; color:var(--accent); }
.b-board li .c{ font-size:2vw; color:var(--muted); }
.b-board li .t{ font-size:1.7vw; color:var(--muted); font-variant-numeric:tabular-nums; }
.b-board li.win{ background:linear-gradient(90deg, rgba(163,31,44,.18), transparent);
  border-radius:1.4vmin; }
.b-board li.win .r{ font-size:3.4vw; }

/* ---------- Fabiennes Antwort (Admin / Gast / Beamer) ---------- */
.fab-badge{ display:inline-block; font-size:.8rem; font-weight:700; padding:.15em .6em;
  border-radius:999px; vertical-align:middle; }
.fab-badge.ok{ background:rgba(63,125,57,.16); color:var(--ok); }
.fab-badge.no{ background:rgba(194,104,63,.16); color:var(--no); }
.small{ font-size:.82rem; }

/* Admin: Eingabe-Panel */
.fab-panel{ margin-top:16px; border:1.5px solid var(--accent2); }
.fab-panel h3{ margin:0 0 6px; }
.fab-input{ width:100%; margin:10px 0; padding:13px 15px; font-size:1.05rem;
  border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--text); }
.fab-input:focus{ outline:none; border-color:var(--accent); }
.fab-save{ display:flex; gap:10px; flex-wrap:wrap; }
.ctrl.ok{ background:var(--ok); }
.ctrl.no{ background:var(--no); }
.fab-status{ margin-top:10px; font-size:.92rem; min-height:1.2em; }
.fab-status.ok{ color:var(--ok); font-weight:600; }
.fab-status.no{ color:var(--no); font-weight:600; }
.fab-status.muted{ color:var(--muted); }

/* A/B/C/D-Badge + Auswahlknöpfe für Fabiennes Antwort (Admin) */
.optletter{ display:inline-flex; align-items:center; justify-content:center; width:1.7em; height:1.7em;
  margin-right:.5em; background:var(--accent2); color:#fff; border-radius:50%; font-weight:700;
  font-size:.82em; flex:none; }
.fab-choices{ display:flex; flex-direction:column; gap:10px; margin:8px 0 4px; }
.fab-choice{ display:flex; align-items:center; text-align:left; width:100%; background:#fff; color:var(--text);
  border:2px solid var(--line); padding:13px 14px; font-size:1.02rem; font-weight:600; border-radius:12px; }
.fab-choice:hover{ border-color:var(--accent2); }
.fab-choice.chosen{ border-color:var(--accent); background:rgba(163,31,44,.12); }
.fab-choice.chosen-ok{ border-color:var(--ok); background:rgba(63,125,57,.14); color:var(--ok); }
.fab-choice.chosen-no{ border-color:var(--no); background:rgba(194,104,63,.14); color:var(--no); }
.fab-choice.chosen-ok .optletter{ background:var(--ok); }
.fab-choice.chosen-no .optletter{ background:var(--no); }

/* Admin: Resultat-Block */
.fab-result{ margin-top:16px; text-align:center; }
.fab-result h3{ margin:0 0 6px; }
.fab-answer{ font-family:var(--serif); font-size:1.25rem; margin:6px 0 12px; }
.fab-photo-sm{ max-height:128px; width:auto; border-radius:12px; box-shadow:0 6px 18px rgba(120,90,60,.16); }
.fab-overall{ text-align:center; font-size:1.05rem; margin:6px 0 14px; color:var(--accent); font-weight:600; }

/* Gast */
.mic{ font-size:3rem; }
.fab-answer-guest{ font-family:var(--serif); font-size:1.3rem; color:var(--accent); margin:.25em 0; line-height:1.25; }
.fab-guest{ text-align:center; background:rgba(163,31,44,.08); border:1px solid var(--line);
  border-radius:16px; padding:16px; margin:14px 0; }
.fab-guest-head{ font-weight:700; margin-bottom:4px; }
.fab-photo-guest{ width:auto; max-width:78%; max-height:30vh; border-radius:14px;
  box-shadow:0 8px 24px rgba(120,90,60,.18); margin-top:6px; }
.fab-final{ font-size:1.05rem; color:var(--accent); font-weight:600; }

/* Beamer */
.b-fab{ width:100%; max-width:1400px; text-align:center; }
.b-qtext-mini{ font-size:2.4vw; color:var(--muted); margin:1vmin 0; }
.b-fab-q{ font-size:5.5vw; margin:.2em 0; }
.b-fab-answer{ font-size:5vw; line-height:1.2; margin:.4em auto; max-width:1300px; }
.b-result-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:6vmin; align-items:center;
  max-width:1450px; margin:1vmin auto; }
.b-result-grid.nofab{ grid-template-columns:1fr; }
.b-result-grid .b-bars{ margin:0; }
.b-fab-side{ text-align:center; }
.b-fab-side{ margin:0; }
.b-fab-photo{ max-height:42vh; width:auto; max-width:100%; border-radius:1.6vmin;
  box-shadow:0 1.5vmin 4.5vmin rgba(120,90,60,.22); }
.b-fab-says{ font-size:1.7vw; margin-top:1.6vmin; line-height:1.3; }
.b-fab-final{ font-size:3vw; color:var(--accent); margin:1vmin 0 3vmin; font-family:var(--serif); font-weight:700; }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .agrid{ grid-template-columns:1fr; }
  .qr{ width:170px; }
}
@media (max-width:520px){
  .qtext{ font-size:1.35rem; }
}
/* Beamer im Hoch-/Quadratformat (z.B. auf dem Handy geöffnet): stapeln statt nebeneinander */
@media (max-aspect-ratio:1/1){
  .b-result-grid{ grid-template-columns:1fr; gap:1.5vmin; }
  .b-fab-photo{ max-height:34vh; }
  .b-opts{ grid-template-columns:1fr; }
  .b-qtext{ font-size:6vw; }
  .b-fab-q,.b-fab-answer{ font-size:7vw; }
}