/* ==========================================================================
   Better Brunch Stempelkarte
   Zuerst fuers Handy gebaut. Die App wird am Truck in einer Hand bedient,
   oft bei Sonnenlicht, deshalb grosse Flaechen und hohe Kontraste.
   ========================================================================== */

/* --- Schriften, selbst gehostet --------------------------------------- */
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/schriften/zilla-slab-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/schriften/zilla-slab-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/schriften/work-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/schriften/work-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/schriften/work-sans-600.woff2') format('woff2');
}

/* --- Farben und Masse -------------------------------------------------- */
:root {
  --gruen: #26422f;
  --gruen-dunkel: #1b3122;
  --creme: #f4eee2;
  --creme-hell: #fbf8f1;
  --creme-warm: #ebe3d3;

  /* 4.97:1 auf Creme, erfuellt die Mindestanforderung fuer Fliesstext */
  --text-leise: #5b6b5a;
  --linie: rgb(38 66 47 / 0.16);
  --linie-kraeftig: rgb(38 66 47 / 0.32);

  --warnung: #a8341c;

  --schrift-titel: 'Zilla Slab', Georgia, serif;
  --schrift-text: 'Work Sans', ui-sans-serif, system-ui, sans-serif;

  --radius: 18px;
  --radius-klein: 12px;
  --radius-pille: 999px;

  --rand: 1.25rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

/* --- Grundlagen -------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background: var(--creme);
  color: var(--gruen);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Platz fuer die Aussparungen an Handykanten */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

img,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--gruen);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Seitengeruest ----------------------------------------------------- */
.seite {
  max-width: 30rem;
  margin-inline: auto;
  padding: var(--rand);
  padding-bottom: 3rem;
}

.kopf {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-block: 1rem 1.5rem;
}

.kopf__marke {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--gruen);
}

.kopf__name {
  font-family: var(--schrift-titel);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- Textbausteine ----------------------------------------------------- */
.titel {
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.4rem);
}

.untertitel {
  margin-top: 0.6rem;
  color: var(--text-leise);
}

.leise {
  color: var(--text-leise);
  font-size: 0.9375rem;
}

/* Derselbe leise Ton, aber auf gruenem Grund */
.leise--hell {
  color: rgb(244 238 226 / 0.8);
}

/* --- Flaechen ---------------------------------------------------------- */
.karte {
  background: var(--creme-hell);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.4rem;
}

.karte--gruen {
  background: var(--gruen);
  border-color: transparent;
  color: var(--creme);
}

/* --- Schaltflaechen ---------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3.4rem;
  padding: 0.8rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pille);
  background: var(--gruen);
  color: var(--creme);
  font-family: var(--schrift-titel);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease);
}

.knopf:active {
  transform: scale(0.98);
}

.knopf:hover {
  background: var(--gruen-dunkel);
}

.knopf--rand {
  background: transparent;
  color: var(--gruen);
  border-color: var(--linie-kraeftig);
}

.knopf--rand:hover {
  background: rgb(38 66 47 / 0.06);
  border-color: var(--gruen);
}

.knopf[disabled] {
  opacity: 0.55;
  cursor: progress;
}

/* --- Formulare --------------------------------------------------------- */
.feld {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}

.feld__name {
  font-family: var(--schrift-titel);
  font-size: 0.95rem;
  font-weight: 600;
}

.eingabe {
  width: 100%;
  min-height: 3.4rem;
  padding: 0.8rem 1rem;
  background: var(--creme-hell);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius-klein);
  /* Unter 16px zoomt iOS beim Antippen ins Feld hinein */
  font-size: 1.0625rem;
}

.eingabe::placeholder {
  color: var(--text-leise);
}

.eingabe:focus-visible {
  border-color: var(--gruen);
}

.hinweis {
  font-size: 0.875rem;
  color: var(--text-leise);
}

.meldung {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-klein);
  border: 1px solid var(--warnung);
  color: var(--warnung);
  background: var(--creme-hell);
  font-size: 0.9375rem;
  margin-bottom: 1.2rem;
}

/* --- Stempelraster ----------------------------------------------------- */
.stempel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin-block: 1.4rem;
}

.stempel__feld {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px dashed rgb(244 238 226 / 0.35);
  color: rgb(244 238 226 / 0.45);
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.1rem;
}

.stempel__feld--voll {
  border-style: solid;
  border-color: var(--creme);
  background: var(--creme);
  color: var(--gruen);
}

/* Die Belohnungsfelder heben sich vom Rest ab */
.stempel__feld--ziel {
  border-color: var(--creme);
  color: var(--creme);
}

.stempel__marke {
  width: 62%;
  height: 62%;
}

/* --- Abstände ---------------------------------------------------------- */
.abstand {
  margin-top: 1.4rem;
}

.abstand-gross {
  margin-top: 2.2rem;
}

/* --- Reduzierte Bewegung ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- QR-Code ----------------------------------------------------------- */
.qr {
  /* Weisse Flaeche und Rand ringsum, sonst tun sich Scanner schwer */
  background: #fff;
  border-radius: var(--radius-klein);
  padding: 1rem;
  min-height: 6rem;
}

.qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.qr__kennung {
  margin-top: 0.9rem;
  text-align: center;
  word-break: break-all;
}

/* ==========================================================================
   Adminseite
   Wird am Truck in einer Hand bedient, waehrend die andere kassiert.
   Deshalb grosse Knoepfe und Meldungen, die man aus einem Meter liest.
   ========================================================================== */

.kopf__nav {
  margin-left: auto;
  display: flex;
  gap: 0.9rem;
}

.kopf__link {
  font-size: 0.9375rem;
  color: var(--text-leise);
  text-underline-offset: 3px;
}

/* --- Scanner ----------------------------------------------------------- */
.scanner__bild {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gruen-dunkel);
}

.scanner__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Vor dem Start ist noch kein Bild da, die Flaeche bliebe sonst weiss */
  background: var(--gruen-dunkel);
}

/* Der Rahmen zeigt, wohin der Code gehalten werden soll. Der weite Schatten
   dunkelt alles ausserhalb ab, das trifft besser als eine blosse Linie. */
.scanner__rahmen {
  position: absolute;
  inset: 14%;
  border: 3px solid rgb(244 238 226 / 0.9);
  border-radius: var(--radius);
  box-shadow: 0 0 0 100vmax rgb(27 49 34 / 0.45);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}

.scanner--an .scanner__rahmen {
  opacity: 1;
}

.scanner__stand {
  min-height: 3rem;
  margin-top: 0.9rem;
}

/* --- Grosse Anzeige bei einer Belohnung --------------------------------- */
.jubel {
  padding: 1.6rem 1.4rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  background: var(--gruen);
  color: var(--creme);
  text-align: center;
}

.jubel__zeile {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 3.6vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.jubel__text {
  margin-top: 0.5rem;
  font-size: 1.0625rem;
}

/* Belohnung steht noch aus, ist also eine Aufforderung und keine Bestaetigung */
.jubel--faellig {
  background: var(--creme-warm);
  border-color: var(--gruen);
  color: var(--gruen);
}

/* --- Kleine Rueckmeldung ------------------------------------------------ */
.bestaetigung {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-klein);
  background: var(--creme-warm);
  border: 1px solid var(--linie);
  font-family: var(--schrift-titel);
  font-weight: 600;
}

.warnkasten {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-klein);
  border: 2px solid var(--warnung);
  background: var(--creme-hell);
}

.warnkasten strong {
  color: var(--warnung);
}

/* --- Pruefsumme und Anleitung ------------------------------------------ */
.schluessel {
  margin-top: 0.9rem;
  padding: 1rem;
  border-radius: var(--radius-klein);
  border: 1px solid var(--linie-kraeftig);
  background: var(--creme-hell);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9375rem;
  line-height: 1.5;
  /* Die Pruefsumme ist eine einzige lange Zeichenkette ohne Trennstellen */
  white-space: pre-wrap;
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

code {
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: var(--creme-warm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  word-break: break-word;
}

.liste {
  margin-top: 0.8rem;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.7rem;
}

/* Der Knopf, der die Sperrfrist uebergeht. Sieht bewusst anders aus als
   "Naechster Kunde" daneben, sonst wird er aus Gewohnheit mitgedrueckt. */
.knopf--warnung {
  background: transparent;
  color: var(--warnung);
  border-color: var(--warnung);
}

.knopf--warnung:hover {
  background: rgb(168 52 28 / 0.08);
}

/* --- Vollbildmeldung bei einer Belohnung -------------------------------- */
/* Legt sich ueber die ganze Seite, wenn etwas herauszugeben ist. Am Truck
   geht sonst zwischen Kasse und Gespraech ein Gratisprodukt unter. Kommt
   ohne JavaScript aus: Die beiden Knoepfe sind Verweise, "Karte ansehen"
   fuehrt auf dieselbe Seite ohne die Merker in der Adresse. */
.vollbild {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(env(safe-area-inset-top) + 2rem) var(--rand)
    calc(env(safe-area-inset-bottom) + 2rem);
  background: var(--gruen);
  color: var(--creme);
  text-align: center;
  overflow-y: auto;
  animation: vollbild-auf 260ms var(--ease);
}

@keyframes vollbild-auf {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

/* Die Seite darunter soll nicht mitscrollen */
body:has(.vollbild) {
  overflow: hidden;
}

.vollbild__inhalt {
  margin: auto;
  max-width: 26rem;
}

.vollbild__marke {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.5rem;
  opacity: 0.55;
}

.vollbild__zeile {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.6rem + 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.vollbild__text {
  margin-top: 1.1rem;
  font-size: 1.15rem;
  line-height: 1.45;
}

.vollbild__knoepfe {
  display: grid;
  gap: 0.8rem;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  flex: none;
}

/* Knoepfe auf gruenem Grund, hell statt dunkel */
.knopf--hell {
  background: var(--creme);
  color: var(--gruen);
}

.knopf--hell:hover {
  background: #fff;
}

.knopf--geist {
  background: transparent;
  color: var(--creme);
  border-color: rgb(244 238 226 / 0.45);
}

.knopf--geist:hover {
  background: rgb(244 238 226 / 0.12);
  border-color: var(--creme);
}

/* --- Seitenfuss --------------------------------------------------------- */
.fuss {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-leise);
}

/* --- Standorte ---------------------------------------------------------- */
/* Vergangene Termine bleiben in der Adminliste stehen, treten aber zurueck */
.karte--blass {
  opacity: 0.55;
}

/* Kleine Fahne am laufenden Termin */
.jetzt {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pille);
  background: var(--gruen);
  color: var(--creme);
  font-family: var(--schrift-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 0.1em;
}

/* Zwei Knoepfe nebeneinander, etwa Aendern und Loeschen */
.reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.reihe form {
  flex: 1 1 8rem;
}

.knopf--schmal {
  min-height: 2.8rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.9375rem;
}

.reihe > .knopf--schmal,
.reihe form .knopf--schmal {
  flex: 1 1 8rem;
  width: 100%;
}

/* --- Auswahl mit Kaestchen oder Punkt ----------------------------------- */
.wahl {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  font-size: 0.9375rem;
  cursor: pointer;
}

.wahl input {
  flex: none;
  /* Groesser als die Voreinstellung, sonst trifft man es am Truck nicht */
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  accent-color: var(--gruen);
}

.eingabe--gross {
  min-height: 6rem;
  resize: vertical;
  line-height: 1.5;
}

/* --- Aushang auf der Kundenseite ---------------------------------------- */
.aushang {
  border-left: 4px solid var(--gruen);
}

.aushang__titel {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.05rem;
}

.aushang__text {
  margin-top: 0.4rem;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

/* --- Ausklappbarer Bereich, etwa der Geschenkstempel --------------------- */
.ausklapp {
  padding: 1rem 1.2rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--creme-hell);
}

.ausklapp > summary {
  font-family: var(--schrift-titel);
  font-weight: 600;
  cursor: pointer;
  /* Ohne das sitzt der Pfeil bei Safari zu dicht am Text */
  padding-left: 0.2rem;
}

.ausklapp[open] > summary {
  margin-bottom: 0.8rem;
}

/* --- Zahlen ------------------------------------------------------------- */
.zahl {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.8rem + 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-block: 0.6rem 0.4rem;
}

.zeilen {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.zeilen > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--linie);
}

.zeilen > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.zeilen dt {
  color: var(--text-leise);
  font-size: 0.9375rem;
}

.zeilen dd {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.25rem;
  /* Damit die Zahlen rechts untereinander stehen */
  font-variant-numeric: tabular-nums;
}

/* --- Balken fuer den Wochenverlauf -------------------------------------- */
.balken {
  display: grid;
  gap: 0.5rem;
}

.balken__zeile {
  display: grid;
  grid-template-columns: 4.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.6rem;
}

.balken__name {
  font-size: 0.8125rem;
  color: var(--text-leise);
}

.balken__spur {
  height: 0.9rem;
  border-radius: var(--radius-pille);
  background: var(--creme-warm);
  overflow: hidden;
}

.balken__fuellung {
  display: block;
  height: 100%;
  border-radius: var(--radius-pille);
  background: var(--gruen);
  /* Auch die schwaechste Woche soll sichtbar bleiben */
  min-width: 3px;
}

.balken__zahl {
  text-align: right;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* Die Kopfnavigation hat inzwischen mehrere Punkte */
.kopf__nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}