/* =========================================================================
   Katzenwaage — Gestaltung
   =========================================================================
   Der Gegenstand ist ein Messinstrument, kein Haustierzubehör. Die Anleihen
   kommen aus der Welt der Waage: Millimeterpapier, Tintenschreiber,
   monospaced Ablesewerte. Keine Pfoten, keine Tierchen.

   Farbe kodiert Sicherheit, nicht Stimmung. „Nicht sicher" ist in diesem
   Produkt ein gleichwertiger Zustand und bekommt deshalb eine eigene Farbe,
   kein ausgegrautes Nichts.
   ========================================================================= */

:root {
  --papier:      #eef1f0;   /* kühles Papier, leicht lehmig — nicht creme */
  --papier-hoch: #f8faf9;
  --raster:      #dde3e1;   /* Millimeterpapier-Linie */
  --tinte:       #16232b;
  --tinte-leise: #5c6d75;
  --gemessen:    #0e7c6b;   /* „das ist eine echte Zahl" */
  --unsicher:    #b4762a;   /* „das Gerät weiß es nicht" */
  --warnung:     #a63f2e;   /* Gewichtsverlust. Fast nie zu sehen. */

  --rand: 1px solid var(--raster);
  --spur: 3px;              /* Breite der Zustandskante links an Karten */

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem;
}

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

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

body {
  margin: 0;
  background: var(--papier);
  /* Millimeterpapier. Sehr leise — man soll es spüren, nicht lesen. */
  background-image:
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  color: var(--tinte);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: var(--s7);
}

/* Alle Zahlen monospaced mit Tabellenziffern — eine Waage liest sich
   spaltenweise, nicht flatternd. */
.zahl, .wert, .einheit, .kopfzeile time, .glyph-wert {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---- Gerüst ----------------------------------------------------------- */

.huelle { max-width: 34rem; margin: 0 auto; padding: 0 var(--s4); }

.kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3);
  padding: var(--s5) 0 var(--s4);
  border-bottom: 2px solid var(--tinte);
  margin-bottom: var(--s5);
}
.kopf h1 {
  margin: 0; font-size: 1.05rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}

/* ---- Gerätezustand ---------------------------------------------------- */

.geraet {
  display: flex; align-items: center; gap: var(--s2);
  font-family: "IBM Plex Mono", monospace; font-size: .75rem;
  color: var(--tinte-leise);
}
.puls {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--gemessen); flex: none;
}
.puls[data-zustand="alt"]  { background: var(--unsicher); }
.puls[data-zustand="weg"]  { background: var(--tinte-leise); }
.puls[data-zustand="live"] { animation: atmen 2.4s ease-in-out infinite; }

@keyframes atmen { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ---- Abschnitte ------------------------------------------------------- */

.marke {
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinte-leise);
  margin: var(--s6) 0 var(--s3);
}
.marke:first-child { margin-top: 0; }

/* ---- Karten ----------------------------------------------------------- */

.karte {
  background: var(--papier-hoch);
  border: var(--rand);
  border-left: var(--spur) solid var(--gemessen);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s2);
}
/* Unsicherheit ist strukturell markiert, nicht nur farblich: gestrichelte
   Kante. Wer Farben nicht unterscheidet, sieht es trotzdem. */
.karte[data-sicher="nein"] {
  border-left-style: dashed;
  border-left-color: var(--unsicher);
}
.karte[data-sicher="nein"] .name { color: var(--unsicher); }

.karte-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3);
}
.name { font-weight: 600; font-size: 1.05rem; }
.wert { font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; }
.einheit { font-size: .8rem; color: var(--tinte-leise); margin-left: .15rem; }

.neben {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
  margin-top: var(--s2);
  font-size: .8rem; color: var(--tinte-leise);
}

.trend[data-richtung="runter"] { color: var(--warnung); font-weight: 600; }
.trend[data-richtung="hoch"]   { color: var(--tinte-leise); }

/* ---- Besuchs-Glyph: die Signatur -------------------------------------- */
/* Eine winzige, wahrheitsgetreue Kurve je Besuch. Jeder Strich darin ist
   ein gespeicherter Messwert — Grundlinie, Anstieg, Plateau mit
   Streuungsband, Abstieg, und die neue höhere Grundlinie als sichtbare
   Ausscheidung. Nichts daran ist Dekoration. */

.glyph { display: block; width: 100%; height: 46px; overflow: visible; }
.glyph .spur      { fill: none; stroke: var(--gemessen); stroke-width: 1.75;
                    stroke-linejoin: round; stroke-linecap: round; }
.glyph .band      { fill: var(--gemessen); opacity: .16; }
.glyph .grund     { stroke: var(--tinte-leise); stroke-width: 1;
                    stroke-dasharray: 2 3; opacity: .8; }
.glyph .zuwachs   { stroke: var(--unsicher); stroke-width: 1.75; }
.karte[data-sicher="nein"] .glyph .spur { stroke: var(--unsicher); }
.karte[data-sicher="nein"] .glyph .band { fill: var(--unsicher); }

/* ---- Sparkline im Katzenkopf ------------------------------------------ */

.funke { display: block; width: 100%; height: 34px; margin: var(--s2) 0; }
.funke path { fill: none; stroke: var(--gemessen); stroke-width: 1.5; }
.funke .ziel { stroke: var(--tinte-leise); stroke-width: 1;
               stroke-dasharray: 3 3; opacity: .7; }

/* ---- Bedienung -------------------------------------------------------- */

.knopfleiste { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

button {
  font: inherit; font-size: .85rem;
  background: transparent; color: var(--tinte);
  border: 1px solid var(--tinte); border-radius: 0;
  padding: .45rem .9rem; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
button:hover  { background: var(--tinte); color: var(--papier-hoch); }
button:disabled { opacity: .4; cursor: default; }
button:disabled:hover { background: transparent; color: var(--tinte); }
button.haupt { background: var(--tinte); color: var(--papier-hoch); }
button.haupt:hover { background: var(--gemessen); border-color: var(--gemessen); }
button.still { border-color: var(--raster); color: var(--tinte-leise); }

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

input[type=email], input[type=text], input[type=number], select {
  font: inherit; width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--tinte-leise); border-radius: 0;
  background: var(--papier-hoch); color: var(--tinte);
}

/* ---- Zustände --------------------------------------------------------- */

.hinweis {
  border-left: var(--spur) solid var(--unsicher);
  background: var(--papier-hoch);
  padding: var(--s3) var(--s4);
  font-size: .85rem;
  margin-bottom: var(--s4);
}
.hinweis.fehler { border-left-color: var(--warnung); }

.leer {
  border: 1px dashed var(--raster);
  padding: var(--s5) var(--s4);
  text-align: center; color: var(--tinte-leise); font-size: .9rem;
}

.wartet { opacity: .45; }

/* ---- Anmeldung -------------------------------------------------------- */

.anmelden { max-width: 22rem; margin: 18vh auto 0; padding: 0 var(--s4); }
.anmelden h1 {
  font-size: 1.05rem; letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 var(--s2);
}
.anmelden p { color: var(--tinte-leise); font-size: .9rem; margin: 0 0 var(--s4); }
.anmelden button { width: 100%; margin-top: var(--s3); }

/* ---- Zurück ----------------------------------------------------------- */

.zurueck {
  font-family: "IBM Plex Mono", monospace; font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 0; padding: var(--s2) 0; color: var(--tinte-leise);
}
.zurueck:hover { background: none; color: var(--tinte); }

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