/* Oberfläche my.flexitag.de. Farben/Abstände/Schrift ausschließlich aus
   tokens.css (docs/07) -- kein Hex-Wert hier. Bewusst ohne Tailwind/Build-Step:
   CLAUDE.md verbietet neue Abhängigkeiten ohne Rückfrage, eine Handvoll
   Formulare braucht kein Utility-Framework. */
@import "tokens.css";
@import "fonts.css";

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: var(--abstand-gross) var(--abstand-mittel);
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font: var(--schrift-basis) / 1.6 var(--schrift-familie);
}

main {
  max-width: 34rem;
  margin: 0 auto;
}

.kopfzeile {
  display: block;
  margin: 0 auto var(--abstand-gross);
  text-align: center;
}

.kopfzeile img {
  height: 40px;
  width: auto;
}

h1 {
  font-size: 1.5rem;
  line-height: 1.3;
}

.karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--rundung);
  padding: var(--abstand-gross);
  margin-bottom: var(--abstand-mittel);
}

.feld {
  margin-bottom: var(--abstand-mittel);
}

.feld label {
  display: block;
  margin-bottom: var(--abstand-klein);
  font-weight: 600;
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld input[type="password"],
.feld textarea {
  width: 100%;
  padding: var(--abstand-klein);
  font-size: var(--schrift-basis);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--rundung);
  font-family: var(--schrift-familie);
}

.feld textarea {
  min-height: 8rem;
}

.absende-knopf {
  display: inline-block;
  padding: var(--abstand-mittel) var(--abstand-gross);
  border: none;
  border-radius: var(--rundung);
  background: var(--farbe-akzent);
  color: #fff;
  font-size: var(--schrift-knopf);
  font-weight: 600;
  cursor: pointer;
}

.absende-knopf:hover {
  background: var(--farbe-akzent-dunkel);
}

.warnhinweis {
  background: var(--farbe-warnung-sanft);
  border: 1px solid var(--farbe-warnung);
  color: var(--farbe-warnung);
  border-radius: var(--rundung);
  padding: var(--abstand-mittel);
  margin-bottom: var(--abstand-mittel);
}

.fehlerhinweis {
  color: var(--farbe-warnung);
  font-weight: 600;
}

.hinweis-erfolg {
  color: var(--farbe-akzent);
  font-weight: 600;
}

.schritt-anzeige {
  color: var(--farbe-akzent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  margin: 0 0 var(--abstand-klein);
}

.abmelden-knopf {
  display: inline-block;
  padding: var(--abstand-klein) var(--abstand-mittel);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--rundung);
  background: transparent;
  color: var(--farbe-text);
  font-size: var(--schrift-basis);
  cursor: pointer;
}

/* War bisher --farbe-rand (die Randfarbe, für Text viel zu blass -- kaum
   lesbar, Rückmeldung vom 19.09.2026). --farbe-schwach ist eigens für
   gedämpften, aber noch lesbaren Text gedacht. */
.muted {
  color: var(--farbe-schwach);
}

/* Konto-Übersicht: Vorschau dessen, was auch unter "Bearbeiten" steht
   (Rückmeldung vom 19.09.2026 -- die Tag-ID allein sagt nichts über den
   Inhalt aus). */
.tag-vorschau {
  background: var(--farbe-grund);
  border-radius: var(--rundung);
  padding: var(--abstand-mittel);
  margin: var(--abstand-mittel) 0;
}

.tag-vorschau p {
  margin: 0 0 var(--abstand-klein);
}

.tag-vorschau p:last-child {
  margin-bottom: 0;
}

/* Admin-Übersicht */
.admin-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.admin-tabelle th,
.admin-tabelle td {
  text-align: left;
  padding: var(--abstand-klein);
  border-bottom: 1px solid var(--farbe-rand);
}

.code-anzeige {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
}

/* Packplatz: gut sichtbare Bestätigung, keine unauffällige Meldung --
   Lehre aus dem PoC (referenz/poc-erkenntnisse.md). */
.bindungs-erfolg {
  background: var(--farbe-akzent);
  color: #fff;
  font-size: var(--schrift-knopf);
  font-weight: 700;
  text-align: center;
  padding: var(--abstand-gross);
  border-radius: var(--rundung);
  margin-bottom: var(--abstand-mittel);
}

.kamera-box {
  text-align: center;
}

.kamera-box video {
  display: none;
  width: 100%;
  max-width: 28rem;
  border-radius: var(--rundung);
  margin-bottom: var(--abstand-mittel);
}

.kamera-box.an video {
  display: block;
}

/* Fußzeile mit rechtlichen Links, global über layouts/app.blade.php
   eingebunden (Philipps Vorgabe vom 16.09.2026, siehe
   partials/rechtliches.blade.php). */
.fusszeile {
  max-width: 34rem;
  margin: var(--abstand-gross) auto 0;
  padding-top: var(--abstand-mittel);
  border-top: 1px solid var(--farbe-rand);
  text-align: center;
  font-size: 0.85rem;
}

.fusszeile a {
  color: var(--farbe-text);
  text-decoration: none;
  margin: 0 var(--abstand-klein);
}

.fusszeile a:hover {
  color: var(--farbe-akzent);
}

/* Knöpfe zentrieren, statt am linken Rand der Karte zu kleben
   (Rückmeldung vom 19.09.2026). .absende-knopf ist inline-block, darum
   reicht text-align auf dem umschließenden Element. */
.knopf-mitte {
  text-align: center;
}

/* Konto-Login direkt unter der Code-Eingabe eingeblendet statt als
   Link -- ein Klick weniger (Rückmeldung vom 16.09.2026). */
.oder-trenner {
  text-align: center;
  color: var(--farbe-rand);
  margin: var(--abstand-gross) 0;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}