/* Kudos — Oberfläche.

   Zwei Vorgaben, die sich nicht widersprechen dürfen:

   1. Handy zuerst. Alles, was im Café passiert, passiert auf einem Telefon in
      einer Hand: große Flächen, wenig Text, nichts zum Zielen.
   2. Weiß, in Hannahs Farben, im Aufbau von danielgerl.de. Von dort kommen die
      Glossyboxen (weiß mit Unschärfe dahinter, weicher Doppelschatten,
      Radius), der Sprunglink, die sichtbaren Fokusringe und der Fuß.

   Die Farben stammen aus den Logodateien, nicht aus dem Gefühl:

     Gelb    #e5deb3   das Herz
     Schwarz #000000   der Schriftzug
     Weiß    #ffffff

   Die eine Regel, aus der alles Weitere folgt: **Gelb ist Fläche, Schwarz ist
   Schrift.** Gegen Weiß hat das Gelb nur 1,33:1 — als Schriftfarbe, als
   Diagrammbalken oder als Knopfbeschriftung wäre es unlesbar. Schwarz auf Gelb
   dagegen liegt bei 16,5:1; genau so sieht das Logo selbst aus. Wo eine gelbe
   Fläche auf Weiß steht, bekommt sie einen dunklen Haarstrich, sonst
   verschwindet ihr Rand. */

:root {
  --weiss: #ffffff;
  --gelb: #e5deb3;
  --gelb-tief: #cfc596;      /* nur für Ränder und Trennlinien auf Gelb */
  --schrift: #111111;
  --leise: #5b554c;          /* 7,1:1 auf Weiß */
  --linie: rgba(17, 17, 17, .12);
  --glas: rgba(255, 255, 255, .7);
  --glas-rand: rgba(255, 255, 255, .85);
  --warnung: #98290f;        /* 7,4:1 — kein Markenton, aber ein Fehler muss als solcher lesbar sein */
  --rund: 20px;
  --rund-klein: 12px;
  color-scheme: light;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--weiss);
  color: var(--schrift);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
}

/* Zwei weiche Lichtflecken in Kudos-Gelb. Sie sind der Grund, auf dem die
   Glossyboxen überhaupt zu sehen sind: weißes Glas auf reinem Weiß wäre
   unsichtbar. Die Seite liest sich trotzdem als weiß. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 0%, rgba(229, 222, 179, .55) 0%, transparent 55%),
    radial-gradient(circle at 90% 85%, rgba(229, 222, 179, .38) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* --- Sprunglink und Fokus (von danielgerl.de) ------------------------- */

.sprung {
  position: absolute;
  top: 0;
  left: 12px;
  z-index: 10000;
  padding: 12px 22px;
  background: var(--schrift);
  color: var(--weiss);
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transform: translateY(-100%);
  pointer-events: none;
}
.sprung:focus { transform: translateY(0); pointer-events: auto; }

:focus-visible { outline: 2px solid var(--schrift); outline-offset: 2px; }

/* --- Kopf und Fuß ----------------------------------------------------- */

.kopf {
  padding: 20px 20px 4px;
  text-align: center;
}

.marke { display: inline-block; text-decoration: none; }

.marke img {
  display: block;
  height: 52px;
  width: auto;
}

.blatt {
  flex: 1;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 8px 20px 40px;
}

.fuss {
  padding: 26px 20px 30px;
  text-align: center;
  font-size: .82rem;
  color: var(--leise);
  border-top: 1px solid var(--linie);
  margin-top: 8px;
}
/* inline-block statt inline: erst damit greift die senkrechte Polsterung und
   die Tippfläche wächst über die reine Texthöhe hinaus. */
.fuss a { display: inline-block; padding: 6px 2px; color: var(--leise); text-decoration: none; }
.fuss a:hover { color: var(--schrift); text-decoration: underline; }
.fuss .trenner { margin: 0 8px; opacity: .5; }
.fuss .zeile { display: inline-block; }

h1 { font-size: 1.7rem; line-height: 1.2; margin: .6em 0 .3em; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 1.4em 0 .3em; }
p  { margin: .6em 0; }
a  { color: var(--schrift); text-underline-offset: 2px; }

.vorspann { color: var(--leise); margin-bottom: 1.4em; }
.klein-unten { margin-top: 2.4em; font-size: .92rem; color: var(--leise); text-align: center; }

/* --- Die Glossybox ---------------------------------------------------- */

.kachel, .ausweis, .hinweis, .meldung, .zahl, .kasten {
  background: var(--glas);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, .05),
    0 1px 2px rgba(0, 0, 0, .03);
}

/* --- Kacheln ---------------------------------------------------------- */

.kacheln, .wahl { display: grid; gap: 14px; }

.kachel {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 18px 20px;
  min-height: 76px;
  text-decoration: none;
  color: inherit;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1);
}

.kachel:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, .08),
    0 4px 12px rgba(0, 0, 0, .04);
}
.kachel:active { transform: translateY(0) scale(.995); }

.kachel-zeichen {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--gelb);
  border: 1px solid var(--gelb-tief);
  font-size: 1.15rem;
  color: var(--schrift);
}

.kachel-titel { font-weight: 600; }
.kachel-zeile { color: var(--leise); font-size: .92rem; }

/* Die eine hervorgehobene Kachel trägt die Marke: gelbe Fläche, schwarze
   Schrift. Der Haarstrich ist Pflicht — ohne ihn hat der Rand gegen Weiß
   nicht genug Kontrast, um als Fläche erkennbar zu sein. */
.kachel-haupt {
  background: var(--gelb);
  border-color: var(--gelb-tief);
  color: var(--schrift);
}
.kachel-haupt .kachel-zeile { color: rgba(17, 17, 17, .72); }
.kachel-haupt .kachel-zeichen {
  background: var(--weiss);
  border-color: rgba(17, 17, 17, .18);
}

/* --- Formulare -------------------------------------------------------- */

.formular { display: grid; gap: 6px; }
.formular label { font-size: .92rem; color: var(--leise); margin-top: .7em; }

.formular input, .suche input {
  font: inherit;
  padding: 13px 14px;
  border: 1px solid rgba(17, 17, 17, .18);
  border-radius: var(--rund-klein);
  background: var(--weiss);
  color: inherit;
}
.formular input:focus-visible, .suche input:focus-visible { outline-offset: 0; }

.formular select {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid rgba(17, 17, 17, .18);
  border-radius: var(--rund-klein);
  background: var(--weiss);
  color: inherit;
}

button, .knopf {
  font: inherit;
  font-weight: 600;
  margin-top: 1.4em;
  padding: 15px 18px;
  min-height: 52px;
  border: 1px solid var(--schrift);
  border-radius: var(--rund-klein);
  background: var(--schrift);
  color: var(--weiss);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
button:hover, .knopf:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}
button:active, .knopf:active { transform: translateY(0); }

button.leise, .knopf.leise {
  background: var(--weiss);
  color: var(--schrift);
  border-color: rgba(17, 17, 17, .22);
}

button.gefahr, .knopf.gefahr {
  background: var(--weiss);
  color: var(--warnung);
  border-color: var(--warnung);
}

.meldung { padding: 13px 16px; border-radius: var(--rund-klein); }
.meldung.gut { background: var(--gelb); border-color: var(--gelb-tief); }
.meldung.schlecht { border-color: var(--warnung); color: var(--warnung); }

/* --- Ausweis (die eigene Karte) --------------------------------------- */

.ausweis {
  margin-top: 12px;
  padding: 24px 20px 20px;
  text-align: center;
}

.ausweis-name { font-size: 1.25rem; font-weight: 600; margin: 0; }

.stand { margin: .5em 0 0; display: flex; align-items: baseline; justify-content: center; gap: .35em; }
.stand-zahl { font-size: 3.4rem; font-weight: 700; line-height: 1; color: var(--schrift); }
.stand-wort { color: var(--leise); }
.stand-zeile { margin: .2em 0 0; font-size: .9rem; color: var(--leise); }

/* Ein <a class="knopf"> ist von Haus aus inline — Polsterung und Mindesthöhe
   blieben dann wirkungslos, und der Knopf wäre eine unterstrichene Textzeile.
   Nur hier gesetzt statt an der Grundregel, damit die Knöpfe im Blätterwerk
   und an der Kasse unverändert bleiben. */
.ausweis .knopf, .qr + .knopf {
  display: inline-block;
  margin-top: 1.1em;
}

.qr {
  display: block;
  width: min(320px, 78vw);
  height: auto;
  margin: 22px auto 6px;
  /* Der Code steht immer auf Weiß, sonst scannt er nicht. */
  background: #fff;
  padding: 12px;
  border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
}

.ausweis-fuss { color: var(--leise); font-size: .92rem; margin: 0; }

.hinweis { margin-top: 18px; padding: 16px 18px; }
.hinweis summary { cursor: pointer; font-weight: 600; }
.hinweis p { font-size: .94rem; color: var(--leise); }

/* --- Inhaltsseiten ----------------------------------------------------- */

.schritte { padding-left: 1.2em; }
.schritte li { margin-bottom: .9em; }
.schritte h2 { margin: 0; font-size: 1.02rem; }
.schritte p  { margin: .15em 0 0; color: var(--leise); font-size: .95rem; }

.fragen dt { font-weight: 600; margin-top: 1em; }
.fragen dd { margin: .2em 0 0; color: var(--leise); font-size: .95rem; }

/* Rechtstexte: ein einziger Glaskasten, links ausgerichtet, wie die
   Inhaltsseiten auf danielgerl.de. */
.kasten { padding: 26px 24px; margin-top: 10px; }
.kasten h1 { margin-top: 0; }
.kasten h2 { font-size: 1.15rem; margin-top: 1.8em; }
.kasten p, .kasten li { color: #2c2820; }
.kasten address { font-style: normal; line-height: 1.7; }
.kasten ul { margin: .6em 0; padding-left: 0; list-style: none; }
.kasten ul li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.kasten ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 7px; height: 7px;
  background: var(--gelb);
  border: 1px solid var(--gelb-tief);
  border-radius: 50%;
}
.kasten .offen {
  background: var(--gelb);
  border: 1px solid var(--gelb-tief);
  border-radius: var(--rund-klein);
  padding: 2px 8px;
  font-style: italic;
}
.kasten .stand-datum { margin-top: 2em; font-size: .85rem; color: var(--leise); }

/* --- Kassenmaske (nur für angemeldetes Team) --------------------------- */

.kasse form { margin: 0; }

button.gross {
  width: 100%;
  min-height: 68px;
  font-size: 1.25rem;
  margin-top: 1.1em;
}
.kasse button.leise { width: 100%; margin-top: .6em; min-height: 48px; }

.teamleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  margin-top: 22px;
  font-size: .94rem;
}

/* Solange htmx eine Anfrage laufen hat, ist der Knopf nicht doppelt tippbar. */
.htmx-request button { opacity: .55; pointer-events: none; }

/* --- Übersicht --------------------------------------------------------- */

.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 18px 0; }
.zahl { padding: 15px 17px; }
.zahl-wert { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--schrift); }
.zahl-wort { color: var(--leise); font-size: .88rem; }

.tabelle-rahmen { overflow-x: auto; margin-top: 8px; }
table.liste { width: 100%; border-collapse: collapse; font-size: .94rem; }
table.liste th, table.liste td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--linie); white-space: nowrap; }
table.liste th { color: var(--leise); font-weight: 600; font-size: .86rem; }
table.liste td.zahl-spalte { text-align: right; font-variant-numeric: tabular-nums; }
table.liste tr:last-child td { border-bottom: none; }

.suche { display: flex; gap: 8px; margin-top: 14px; }
/* min-width:0 ist kein Beiwerk: ein <input> bringt eine Mindestbreite von rund
   20 Zeichen mit, schrumpft ohne diese Zeile nicht und schiebt den Knopf auf
   jedem Handy unter 390 px aus dem Bild. */
.suche input { flex: 1; min-width: 0; }
.suche button { margin-top: 0; }

.leerfall { color: var(--leise); padding: 18px 0; }

/* --- Balkendiagramm „Stempel je Tag" ----------------------------------
   Eine einzige Datenreihe, deshalb keine Legende — die Überschrift benennt
   sie. Ohne JavaScript: die genauen Werte hängen als title an den Säulen,
   darunter steht dieselbe Reihe als Tabelle. Die Säulen sind SCHWARZ, nicht
   gelb: eine gelbe Säule auf weißem Grund wäre gegen den Hintergrund nicht
   zu unterscheiden. */

.diagramm { margin: 8px 0 0; }

.saeulen {
  display: flex;
  align-items: flex-end;
  /* 2px Abstand zwischen den Säulen: Nachbarn sollen sich nicht berühren. */
  gap: 2px;
  height: 160px;
  /* Oben Luft für die Wertbeschriftung, an den Seiten für die äußeren
     Achsenbeschriftungen — sonst wird ausgerechnet das heutige Datum
     abgeschnitten. */
  padding: 14px 18px 22px;
  /* Die Grundlinie ist zurückhaltend, sie ist Bezug und nicht Inhalt. */
  border-bottom: 1px solid var(--linie);
  overflow-x: auto;
}

.saeule {
  position: relative;
  flex: 1 1 0;
  min-width: 6px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.saeule-fuellung {
  display: block;
  background: var(--schrift);
  /* An der Grundlinie verankert, oben abgerundet. */
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  /* flex: none — sonst schrumpft Flexbox ausgerechnet die höchste Säule um
     die Höhe ihrer Wertbeschriftung, und der beste Tag des Monats wird
     kürzer gezeichnet als seine Nachbarn. */
  flex: none;
}

/* Ein Tag ohne Stempel bekommt keine Fläche — sonst sähe er aus wie ein Tag
   mit genau einem. */
.saeule-fuellung.saeule-leer { min-height: 0; background: none; }

.saeule-wert {
  /* Aus dem Höhenbudget der Säule heraus, wie die Achsenbeschriftung. */
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: .7rem;
  color: var(--leise);
  line-height: 1;
  margin-bottom: 3px;
  font-variant-numeric: tabular-nums;
}

.saeule-achse {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .68rem;
  color: var(--leise);
  white-space: nowrap;
}

.diagramm figcaption { margin-top: 26px; font-size: .88rem; color: var(--leise); }

table.liste td.kennung { color: var(--leise); font-variant-numeric: tabular-nums; }

.blaettern {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.blaettern .knopf { margin-top: 0; padding: 10px 16px; min-height: 44px; }
.seitenzahl { color: var(--leise); font-size: .92rem; }

/* --- Marke und Rolle: kleine Auszeichnungen ---------------------------- */

.merkmal {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--gelb);
  border: 1px solid var(--gelb-tief);
  font-size: .78rem;
  font-weight: 600;
  color: var(--schrift);
  white-space: nowrap;
}
.merkmal.aus {
  background: var(--weiss);
  border-color: rgba(17, 17, 17, .2);
  color: var(--leise);
  font-weight: 500;
}

/* --- Verwaltung des Teams ---------------------------------------------- */

.konten { display: grid; gap: 14px; margin-top: 10px; }

.konto {
  background: var(--glas);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .03);
  padding: 16px 18px;
}

.konto-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.konto-name { font-weight: 600; font-size: 1.05rem; }
.konto-zeile { margin: .3em 0 0; color: var(--leise); font-size: .88rem; }

/* Die Knöpfe stehen nebeneinander und umbrechen, statt in einer Zeile aus dem
   Bild zu laufen. Jedes Formular ist ein eigenes Element — deshalb hier und
   nicht am Knopf selbst der Abstand. */
.konto-tasten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.konto-tasten form { margin: 0; }
.konto-tasten button {
  margin-top: 0;
  min-height: 44px;
  padding: 10px 14px;
  font-size: .92rem;
  font-weight: 500;
}

.konto .hinweis { margin-top: 12px; padding: 12px 14px; box-shadow: none; }
.konto .hinweis summary { font-size: .92rem; font-weight: 500; }
.konto .hinweis button { margin-top: 1em; min-height: 46px; }

/* --- Rücksichten ------------------------------------------------------- */

/* Auf Geräten ohne Zeiger gibt es kein „Überfahren" — dort wäre das Anheben
   ein Zucken beim Antippen. */
@media (hover: none) {
  .kachel:hover, button:hover, .knopf:hover { transform: none; box-shadow: none; }
  .kachel:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .03);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media (max-width: 480px) {
  .marke img { height: 44px; }
  .kasten { padding: 22px 18px; }
  h1 { font-size: 1.5rem; }
}