/* ===========================================================
   index_styles.css – Seiteneigene Ergänzungen für index.html
   common.css muss VOR dieser Datei eingebunden werden.
   =========================================================== */

:root{
  /* Zusätzliche Farbtöne nur für die Stimmungs-Hintergründe des Quiz.
     Hinweis: --hell-ember/--heaven-gold aus der ursprünglichen Datei
     wurden entfernt, da sie exakt dieselben Werte wie var(--ember)/
     var(--gold) aus common.css hatten – die Regeln unten nutzen jetzt
     direkt die gemeinsamen Variablen, keine sichtbare Änderung. */
  --hell-bg-1:#1a0908;
  --hell-bg-2:#3a0f0a;
  --hell-ember-2:#8a1f11;
  --heaven-bg-1:#fbf3de;
  --heaven-bg-2:#f1e2b8;
  --heaven-sky:#7fb3d5;
  --purgatory:#5b4b63;
  --radius: 18px;
  /* Überschreibt common.css (dort .25 Alpha, hier bewusst .35) */
  --card-shadow: 0 20px 50px rgba(0,0,0,.35);
}

html,body{ height:100%; }
body{
  overflow-x:hidden;
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

/* ---------- Mood background: crossfading layers ---------- */
.bg{ position:fixed; inset:0; z-index:-2; transition: opacity 900ms ease; }
.bg-hell{
  background:
    radial-gradient(120% 90% at 15% 0%, var(--hell-ember-2) 0%, transparent 55%),
    radial-gradient(140% 100% at 85% 100%, var(--ember) 0%, transparent 45%),
    linear-gradient(160deg, var(--hell-bg-1), var(--hell-bg-2));
}
.bg-purgatory{
  background:
    radial-gradient(120% 90% at 50% 10%, #7a6a86 0%, transparent 60%),
    linear-gradient(160deg, #3b3140, #574a63);
}
.bg-heaven{
  background:
    radial-gradient(130% 90% at 85% 0%, var(--heaven-sky) 0%, transparent 50%),
    radial-gradient(140% 100% at 10% 100%, var(--gold) 0%, transparent 45%),
    linear-gradient(160deg, var(--heaven-bg-1), var(--heaven-bg-2));
}
.bg-veil{ position:fixed; inset:0; z-index:-1; background:rgba(10,6,6,0.28); backdrop-filter: blur(0px); }

.wrap{
  width:100%;
  max-width:480px;
  padding:28px 18px 60px;
  position:relative;
  z-index:1;
}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-align:center;
  color:var(--paper);
  opacity:.75;
  margin:0 0 6px;
}
h1{
  font-family:'Playfair Display', serif;
  font-weight:800;
  font-size:clamp(26px,7vw,34px);
  line-height:1.15;
  text-align:center;
  margin:0 0 22px;
  color:var(--paper);
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}
h1 .amp{ display:inline-block; transform: translateY(-2px); opacity:.85; font-size:.8em; }

/* ---------- Card: eigene, vollständige Definition ---------- */
.card{
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  padding:26px 22px 22px;
  position:relative;
  margin-bottom:0;
  animation: rise 480ms ease both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

.progress-row{
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.progress-label{
  font-family:'JetBrains Mono', monospace;
  font-size:12px; color:#8a8078; white-space:nowrap;
}
.progress-track{
  flex:1; height:6px; border-radius:99px; background:#ece4d4; overflow:hidden;
}
.progress-fill{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--ember), var(--gold));
  transition:width 500ms ease;
}

.qtext{
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:21px;
  line-height:1.4;
  margin:0 0 18px;
}

.answers{ 
  display:flex; 
  flex-direction:column; 
  gap:10px; 
}
.answer-btn{
  text-align:left;
  font-family:'Work Sans', sans-serif;
  font-size:15px;
  line-height:1.35;
  padding:14px 16px;
  border-radius:12px;
  border:1.5px solid #e6dcc8;
  background:#fffdf7;
  color:var(--ink);
  cursor:pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
.answer-btn:hover{ border-color:var(--gold); background:#fff8e6; }
.answer-btn:active{ transform:scale(.98); }
.answer-btn:focus-visible{ outline:3px solid var(--heaven-sky); outline-offset:2px; }
.answer-btn .letter{
  display:inline-block; 
  width:20px; 
  font-family:'JetBrains Mono', monospace;
  font-weight:700; 
  color:#b8a06a; 
  margin-right:6px;
}

/* ---------- Result ---------- */
.result-eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:#a8998a; text-align:center; margin:0 0 10px;
}
.band-icon{
  width:76px; height:76px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px; box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.band-icon svg{ width:40px; height:40px; }
.score-big{
  font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size:52px; text-align:center; margin:0; line-height:1;
}
.score-max{ font-size:20px; color:#a8998a; }
.band-name{
  font-family:'Cinzel', serif; font-weight:700; font-size:24px;
  text-align:center; margin:10px 0 4px;
}
.band-text{
  text-align:center; color:#5b5148; font-size:14.5px; line-height:1.5; margin:0 0 22px;
}

/* Überschreibt common.css: hier bewusst größer (18px statt 13px) */
.field-label{ 
  font-size:18px; 
}

/* Überschreibt common.css: hier bewusst geringerer Abstand (6px statt 12px) */
input[type="text"], input[type="password"]{ margin-bottom:6px; }

.privacy-note{ font-size:12px; color:#a8998a; margin:0 0 14px; }

/* Ergänzt common.css button.primary um seitenspezifische Extras
   (Verlaufsfarben sind bereits identisch zu common.css, da
   var(--ember)/var(--gold) dieselben Werte wie zuvor haben) */
button.primary{
  margin-bottom:10px;
  transition:opacity 150ms ease, transform 150ms ease;
}
button.primary:active{ transform:scale(.98); }

.divider{ height:1px; background:#ece4d4; margin:22px 0 16px; }

.board-title{
  font-family:'Cinzel', serif; font-weight:600; font-size:15px; margin:0 0 12px;
  text-align:center; color:#7a7064;
}
.board-list{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px; }
.board-item{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px; background:#fbf7ee; font-size:14px;
}
.board-item .who{ font-weight:600; }
.board-item .band{ color:#8a8078; font-size:12.5px; }
.board-empty{ text-align:center; color:#a8998a; font-size:13px; padding:10px 0 4px; }

.footnote{ text-align:center; color:rgba(46, 13, 13, 0.55); font-size:18px; margin-top:18px; font-weight: bold; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}