/* ===========================================================
   TREUESYSTEM — eigene Bausteine
   Nutzt die Farb-/Schrift-Variablen aus /assets/style.css (wird
   davor eingebunden). Schriften liegen hier lokal, kein Google-CDN.
   =========================================================== */

@font-face{
  font-family:"Anton"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/anton-400.woff2") format("woff2");
}
@font-face{
  font-family:"Space Grotesk"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/spacegrotesk-400.woff2") format("woff2");
}
@font-face{
  /* Space Grotesk ist eine Variable Font — dieselbe Datei deckt 400 und 600 ab */
  font-family:"Space Grotesk"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/spacegrotesk-400.woff2") format("woff2");
}
@font-face{
  font-family:"Space Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/spacemono-400.woff2") format("woff2");
}
@font-face{
  font-family:"Space Mono"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/spacemono-700.woff2") format("woff2");
}

/* ---------- Allgemein ---------- */

.treue-block{max-width:34rem}

.treue-karte{
  border:1px solid var(--line); background:var(--paper);
  padding:clamp(1.5rem,4vw,2.25rem); margin-bottom:1.75rem;
}

.treue-hinweis{
  font-family:var(--mono); font-size:.78rem; line-height:1.7;
  color:var(--ash); border-left:2px solid var(--blue);
  padding-left:1rem; margin:1.5rem 0;
}

/* ---------- Punktestand groß ---------- */

.treue-stand{text-align:center; padding:clamp(1rem,3vw,1.5rem) 0}
.treue-stand__zahl{
  font-family:var(--display); font-weight:400;
  font-size:clamp(3.5rem,14vw,6rem); line-height:.9;
  color:var(--bone);
}
.treue-stand__label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--akzent); margin-top:.5rem;
}

/* ---------- Fortschrittsbalken ---------- */

.treue-fortschritt{margin:1.5rem 0}
.treue-fortschritt__spur{
  height:.6rem; background:var(--night); border:1px solid var(--line);
  overflow:hidden;
}
.treue-fortschritt__fuellung{height:100%; background:var(--akzent)}
.treue-fortschritt__text{
  font-family:var(--mono); font-size:.75rem; color:var(--ash);
  margin-top:.6rem;
}

/* ---------- Prämien ---------- */

.treue-praemien{
  list-style:none; margin:0; padding:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));
}
.treue-praemie{
  border:1px solid var(--line); padding:1.25rem; display:flex;
  flex-direction:column; gap:.75rem; background:var(--night);
}
.treue-praemie--gesperrt{opacity:.45}
.treue-praemie__punkte{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--akzent);
}
.treue-praemie__name{font-family:var(--display); font-size:1.35rem; text-transform:uppercase; margin:0}
.treue-praemie__knopf{margin-top:auto}

/* ---------- Einlöse-Code (groß, gut lesbar im dunklen Raum) ---------- */

.treue-code{
  font-family:var(--mono); font-weight:700; letter-spacing:.3em;
  font-size:clamp(2.2rem,9vw,3.5rem); text-align:center; color:var(--blue);
  border:2px dashed var(--blue); padding:1rem; margin:1rem 0;
}

/* ---------- Punktequellen ---------- */

.treue-quellen{list-style:none; margin:0; padding:0}
.treue-quelle{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1rem;
  padding:.85rem 0; border-bottom:1px solid var(--line);
  font-size:.92rem;
}
.treue-quelle__art{color:var(--bone)}
.treue-quelle__wann{font-family:var(--mono); font-size:.72rem; color:var(--ash); display:block; margin-top:.2rem}
.treue-quelle__punkte{font-family:var(--mono); font-weight:700; white-space:nowrap}
.treue-quelle__punkte--minus{color:var(--fehler)}
.treue-quelle__punkte--plus{color:var(--blue)}

/* ---------- Warnung (z. B. Mindestalter nicht erreicht) ---------- */

.treue-warnung{
  border:1px solid var(--fehler); background:rgba(255,59,31,.1);
  color:var(--bone); padding:1rem 1.25rem; font-size:.92rem;
}

/* ---------- Kiosk-Bildschirm (Tablet an der Kassa, Hochformat) ---------- */

.kiosk{
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:clamp(1.25rem,3vh,2rem); padding:clamp(1.5rem,4vh,3rem) 2rem;
  background:var(--night); color:var(--bone); text-align:center;
}
.kiosk__marke{
  font-family:var(--display); font-size:clamp(1.3rem,4vw,1.8rem);
  letter-spacing:.04em; text-transform:uppercase; margin:0;
}
.kiosk__marke span{color:var(--akzent)}

.kiosk__event{max-width:30rem}
.kiosk__event-datum{
  font-family:var(--mono); font-size:clamp(.8rem,2.2vw,1rem); letter-spacing:.16em;
  text-transform:uppercase; color:var(--akzent); margin:0 0 .5rem; min-height:1.2em;
}
.kiosk__event-titel{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.8rem,6vw,3rem); line-height:1.02; margin:0; min-height:1.1em;
}

.kiosk__ring{
  position:relative; width:min(60vw,22rem); height:min(60vw,22rem);
  border-radius:50%;
  background:conic-gradient(var(--akzent) calc(var(--verbleib,1) * 360deg), var(--line) 0);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s linear;
}
.kiosk__ring::before{
  content:""; position:absolute; inset:.6rem; border-radius:50%; background:var(--night);
}
.kiosk__qr{position:relative; width:78%; height:78%; background:#fff; padding:1rem; box-sizing:border-box}
.kiosk__qr svg{width:100%; height:100%; display:block}

.kiosk__anleitung{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 1.75rem;
}
.kiosk__anleitung-schritt{
  font-family:var(--mono); font-size:clamp(.85rem,2.4vw,1.05rem);
  letter-spacing:.04em; color:var(--bone); margin:0;
  display:flex; align-items:center; gap:.6rem;
}
.kiosk__anleitung-schritt span{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.6em; height:1.6em; border-radius:50%; border:1px solid var(--akzent);
  color:var(--akzent); font-weight:700; flex:none;
}

.kiosk__hinweis{
  font-family:var(--mono); font-size:.85rem; letter-spacing:.06em;
  color:var(--ash); max-width:26rem;
}
.kiosk__fehler{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(2rem,6vw,3rem); color:var(--fehler);
}