/* ==========================================================================
   TOMFERANDO — Designsystem
   Diese Datei ist gesetzt. Farben, Groessen und Abstaende werden hier
   geaendert und nirgendwo sonst. Kein Hex-Wert in anderen Dateien.
   Stand: 03.09.2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Farben
   -------------------------------------------------------------------------- */
:root {
  /* Marke */
  --farbe-primaer:         #1E5134;
  --farbe-primaer-tief:    #16402A;
  --farbe-primaer-flaeche: #E3EFE7;
  --farbe-akzent:          #7A2E12;
  --farbe-akzent-hell:     #E8C4B0;
  --farbe-akzent-flaeche:  #F5EDE7;

  /* Neutrale Reihe */
  --farbe-weiss:    #FFFFFF;
  --farbe-feld:     #FFFFFF;
  --farbe-papier:   #FBFAF4;
  --farbe-grau-50:  #F5F4EC;
  --farbe-grau-100: #EAE8DC;
  --farbe-grau-200: #D8D6C8;
  --farbe-grau-300: #BEBCAD;
  --farbe-grau-400: #9A9A8C;
  --farbe-grau-500: #77786C;
  --farbe-grau-600: #5A5C52;
  --farbe-grau-700: #43463E;
  --farbe-grau-800: #2C3B31;
  --farbe-grau-850: #243A2C;
  --farbe-text:     #13251A;

  /* Logo-Unterzeile */
  --farbe-logo-unterzeile-hell:   #3E5C48;
  --farbe-logo-unterzeile-dunkel: #A8BFAE;

  /* Semantik */
  --farbe-erfolg:          #1D5A32;
  --farbe-erfolg-flaeche:  #E3EFE7;
  --farbe-warnung:         #6E5A00;
  --farbe-warnung-flaeche: #FFF3C4;
  --farbe-fehler:          #7E1626;
  --farbe-fehler-flaeche:  #FBE9EB;
  --farbe-hinweis:         #14557E;
  --farbe-hinweis-flaeche: #E9EFF4;

  /* Bestellzustaende */
  --farbe-status-eingegangen: #43463E;
  --farbe-status-eingeplant:  #3F3480;
  --farbe-status-unterwegs:   #14557E;
  --farbe-status-eingekauft:  #14605E;
  --farbe-status-geliefert:   #1D5A32;
  --farbe-status-bezahlt:     #16402A;
  --farbe-status-abgebrochen: #7E1626;

  /* Aus Kontrastpruefung abgeleitet — siehe DESIGN.md, Abschnitt Kontrast.
     Nicht durch hellere Grautoene ersetzen. */
  --farbe-text-leise: var(--farbe-grau-700); /* Hilfetext, Nebeninfo */
  --farbe-rahmen:     var(--farbe-grau-600); /* Rahmen von Feldern und Knoepfen */
  --farbe-linie:      var(--farbe-grau-200); /* reine Deko-Trennlinien */
}

/* --------------------------------------------------------------------------
   2 · Schrift
   Nur Systemschriften. Es wird nichts nachgeladen.
   -------------------------------------------------------------------------- */
:root {
  --schrift-familie: system-ui, -apple-system, "Segoe UI", Roboto,
                     "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --schrift-xs:    14px;  --hoehe-xs:    1.5;
  --schrift-s:     16px;  --hoehe-s:     1.55;
  --schrift-basis: 18px;  --hoehe-basis: 1.65;
  --schrift-m:     20px;  --hoehe-m:     1.5;
  --schrift-l:     24px;  --hoehe-l:     1.35;
  --schrift-xl:    30px;  --hoehe-xl:    1.25;
  --schrift-xxl:   36px;  --hoehe-xxl:   1.2;

  --fett-normal: 400;
  --fett-halb:   600;
  --fett-stark:  700;
  --fett-satt:   800;

  --sperrung-etikett:   0.08em;
  --sperrung-wortmarke: 0.05em;
  --zeilenlaenge-max:   44ch;
}

/* --------------------------------------------------------------------------
   3 · Masse
   -------------------------------------------------------------------------- */
:root {
  --ziel-min:      48px;
  --button-hoehe:  56px;
  --feld-hoehe:    56px;
  --feld-hoehe-mehrzeilig: 132px;

  --polster-button-x: 20px;
  --polster-feld-x:   14px;
  --polster-feld-y:   12px;
  --polster-karte:    16px;
  --polster-meldung:  10px 12px;
  --polster-bildschirm-x: 16px;
  --polster-bildschirm-y: 20px;

  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 20px;
  --abstand-6: 24px;
  --abstand-ziele-min: 12px;

  --rundung:       6px;
  --rundung-klein: 3px;
  --rundung-icon:  24px;
  --kreis:         50%;

  --rahmen-stark: 2px;
  --rahmen-duenn: 1px;
  --balken-meldung: 6px;
  --unterstrich-titel: 3px;

  --fokus-innen:  3px;
  --fokus-aussen: 3px;

  --statuskreis:       32px;
  --statuskreis-gross: 36px;
  --statuskreis-klein: 30px;
  --radio:             26px;
}

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

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

body {
  margin: 0;
  background: var(--farbe-papier);
  color: var(--farbe-text);
  font-family: var(--schrift-familie);
  font-size: var(--schrift-basis);
  line-height: var(--hoehe-basis);
}

img, svg { max-width: 100%; height: auto; }

/* Ein sichtbarer Fokusrahmen. Wird nirgends entfernt. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--fokus-innen) var(--farbe-papier),
              0 0 0 calc(var(--fokus-innen) + var(--fokus-aussen)) var(--farbe-text);
}

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

/* --------------------------------------------------------------------------
   5 · Textbausteine
   -------------------------------------------------------------------------- */
.seite {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--polster-bildschirm-y) var(--polster-bildschirm-x);
}

h1, .titel-seite {
  font-size: var(--schrift-xxl);
  line-height: var(--hoehe-xxl);
  font-weight: var(--fett-satt);
  margin: 0 0 var(--abstand-4);
}

h2, .titel-bildschirm {
  font-size: var(--schrift-xl);
  line-height: var(--hoehe-xl);
  font-weight: var(--fett-satt);
  margin: var(--abstand-6) 0 var(--abstand-3);
}

h3, .titel-abschnitt {
  font-size: var(--schrift-l);
  line-height: var(--hoehe-l);
  font-weight: var(--fett-stark);
  margin: var(--abstand-5) 0 var(--abstand-2);
}

p { margin: 0 0 var(--abstand-4); max-width: var(--zeilenlaenge-max); }

.betont {
  font-size: var(--schrift-m);
  line-height: var(--hoehe-m);
  font-weight: var(--fett-stark);
}

.leise {
  font-size: var(--schrift-s);
  line-height: var(--hoehe-s);
  color: var(--farbe-text-leise);
}

.etikett {
  font-size: var(--schrift-xs);
  line-height: var(--hoehe-xs);
  font-weight: var(--fett-stark);
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
}

a { color: var(--farbe-primaer); text-underline-offset: 3px; }
a:hover { color: var(--farbe-primaer-tief); }

/* --------------------------------------------------------------------------
   6 · Knoepfe
   Grundklasse .knopf, dazu eine Art. Immer mit Text, nie nur ein Symbol.
   -------------------------------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-height: var(--button-hoehe);
  padding: 0 var(--polster-button-x);
  border: var(--rahmen-stark) solid transparent;
  border-radius: var(--rundung);
  font-family: inherit;
  font-size: var(--schrift-basis);
  font-weight: var(--fett-stark);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.knopf + .knopf { margin-top: var(--abstand-ziele-min); }
.knopf--breit { display: flex; width: 100%; }

.knopf--primaer {
  background: var(--farbe-primaer);
  border-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
}
.knopf--primaer:hover  { background: var(--farbe-primaer-tief); border-color: var(--farbe-primaer-tief); }
.knopf--primaer:active { background: var(--farbe-primaer-tief); transform: translateY(1px); }

.knopf--zweit {
  background: var(--farbe-weiss);
  border-color: var(--farbe-primaer);
  color: var(--farbe-primaer);
}
.knopf--zweit:hover  { background: var(--farbe-primaer-flaeche); }
.knopf--zweit:active { background: var(--farbe-primaer-flaeche); transform: translateY(1px); }

.knopf--gefahr {
  background: var(--farbe-weiss);
  border-color: var(--farbe-fehler);
  color: var(--farbe-fehler);
}
.knopf--gefahr:hover  { background: var(--farbe-fehler-flaeche); }
.knopf--gefahr:active { background: var(--farbe-fehler-flaeche); transform: translateY(1px); }

/* Gesperrt: das Warum steht als zweites Wort im Knopf, nicht im Tooltip. */
.knopf[disabled],
.knopf--gesperrt {
  background: var(--farbe-grau-100);
  border-color: var(--farbe-grau-400);
  color: var(--farbe-grau-700);
  cursor: not-allowed;
  transform: none;
}

.knopf-leiste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-ziele-min);
  margin-top: var(--abstand-6);
}

/* --------------------------------------------------------------------------
   7 · Formularfelder
   -------------------------------------------------------------------------- */
.feld {
  margin-bottom: var(--abstand-5);
}

.feld > label {
  display: block;
  font-size: var(--schrift-basis);
  font-weight: var(--fett-stark);
  margin-bottom: var(--abstand-2);
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="password"],
.feld input[type="tel"],
.feld input[type="number"],
.feld input[type="date"],
.feld select,
.feld textarea {
  display: block;
  width: 100%;
  min-height: var(--feld-hoehe);
  padding: var(--polster-feld-y) var(--polster-feld-x);
  background: var(--farbe-feld);
  border: var(--rahmen-stark) solid var(--farbe-rahmen);
  border-radius: var(--rundung);
  color: var(--farbe-text);
  font-family: inherit;
  font-size: var(--schrift-basis);
  line-height: var(--hoehe-basis);
}

.feld textarea { min-height: var(--feld-hoehe-mehrzeilig); resize: vertical; }

.feld input:hover, .feld select:hover, .feld textarea:hover {
  border-color: var(--farbe-primaer);
}

.feld .hilfetext {
  display: block;
  margin-top: var(--abstand-2);
  font-size: var(--schrift-s);
  line-height: var(--hoehe-s);
  color: var(--farbe-text-leise);
}

/* Fehlerzustand: Rahmen plus Text. Nie nur Farbe. */
.feld--fehler input,
.feld--fehler select,
.feld--fehler textarea {
  border-color: var(--farbe-fehler);
  background: var(--farbe-fehler-flaeche);
}

.feld .fehlertext {
  display: block;
  margin-top: var(--abstand-2);
  font-size: var(--schrift-s);
  line-height: var(--hoehe-s);
  font-weight: var(--fett-stark);
  color: var(--farbe-fehler);
}

/* Auswahl zum Antippen: ganze Zeile ist Ziel, nicht nur der Punkt. */
.auswahl {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  min-height: var(--ziel-min);
  padding: var(--polster-feld-y) var(--polster-feld-x);
  border: var(--rahmen-stark) solid var(--farbe-rahmen);
  border-radius: var(--rundung);
  background: var(--farbe-feld);
  cursor: pointer;
}
.auswahl + .auswahl { margin-top: var(--abstand-ziele-min); }
.auswahl input[type="radio"],
.auswahl input[type="checkbox"] {
  width: var(--radio);
  height: var(--radio);
  margin: 0;
  accent-color: var(--farbe-primaer);
  flex: none;
}
.auswahl--gewaehlt {
  border-color: var(--farbe-primaer);
  background: var(--farbe-primaer-flaeche);
}

/* Falle fuer Bots. Fuer Menschen unsichtbar, fuer Vorleseprogramme versteckt. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   8 · Meldungen
   -------------------------------------------------------------------------- */
.meldung {
  display: flex;
  gap: var(--abstand-3);
  padding: var(--polster-meldung);
  margin-bottom: var(--abstand-4);
  border-left: var(--balken-meldung) solid var(--farbe-grau-600);
  border-radius: var(--rundung-klein);
  background: var(--farbe-grau-50);
  font-size: var(--schrift-basis);
  line-height: var(--hoehe-basis);
}
.meldung--erfolg  { border-left-color: var(--farbe-erfolg);  background: var(--farbe-erfolg-flaeche);  color: var(--farbe-erfolg); }
.meldung--warnung { border-left-color: var(--farbe-warnung); background: var(--farbe-warnung-flaeche); color: var(--farbe-warnung); }
.meldung--fehler  { border-left-color: var(--farbe-fehler);  background: var(--farbe-fehler-flaeche);  color: var(--farbe-fehler); }
.meldung--hinweis { border-left-color: var(--farbe-hinweis); background: var(--farbe-hinweis-flaeche); color: var(--farbe-hinweis); }
.meldung strong { font-weight: var(--fett-stark); }

/* --------------------------------------------------------------------------
   9 · Bestellzustaende
   Kreis plus Wort. Die Farbe allein sagt nie etwas aus.
   -------------------------------------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  font-size: var(--schrift-m);
  line-height: var(--hoehe-m);
  font-weight: var(--fett-stark);
}
.status::before {
  content: "";
  width: var(--statuskreis);
  height: var(--statuskreis);
  border-radius: var(--kreis);
  background: var(--farbe-status-eingegangen);
  flex: none;
}
.status--eingegangen::before { background: var(--farbe-status-eingegangen); }
.status--eingeplant::before  { background: var(--farbe-status-eingeplant); }
.status--unterwegs::before   { background: var(--farbe-status-unterwegs); }
.status--eingekauft::before  { background: var(--farbe-status-eingekauft); }
.status--geliefert::before   { background: var(--farbe-status-geliefert); }
.status--bezahlt::before     { background: var(--farbe-status-bezahlt); }
.status--abgebrochen::before { background: var(--farbe-status-abgebrochen); }

.status--eingegangen { color: var(--farbe-status-eingegangen); }
.status--eingeplant  { color: var(--farbe-status-eingeplant); }
.status--unterwegs   { color: var(--farbe-status-unterwegs); }
.status--eingekauft  { color: var(--farbe-status-eingekauft); }
.status--geliefert   { color: var(--farbe-status-geliefert); }
.status--bezahlt     { color: var(--farbe-status-bezahlt); }
.status--abgebrochen { color: var(--farbe-status-abgebrochen); }

/* --------------------------------------------------------------------------
   10 · Karten und Kopfzeile
   -------------------------------------------------------------------------- */
.karte {
  padding: var(--polster-karte);
  margin-bottom: var(--abstand-4);
  background: var(--farbe-weiss);
  border: var(--rahmen-duenn) solid var(--farbe-linie);
  border-left: var(--rahmen-stark) solid var(--farbe-linie);
  border-radius: var(--rundung);
}
.karte--kuehl { border-left-color: var(--farbe-hinweis); }

/* Kopfzeile ist dunkel. Darauf steht das cremefarbene Logo (Standardvariante). */
.kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  padding: var(--abstand-3) var(--polster-bildschirm-x);
  background: var(--farbe-primaer);
  color: var(--farbe-papier);
}
.kopfzeile__logo { height: 44px; width: auto; }
.kopfzeile a { color: var(--farbe-papier); }
.kopfzeile a:hover { color: var(--farbe-akzent-hell); }

/* Markenband: das gestapelte Logo auf dunklem Grund.
   Fuer Startseite, Anmeldung und Registrierung. */
.markenband {
  padding: var(--abstand-6) var(--polster-bildschirm-x);
  background: var(--farbe-primaer);
  color: var(--farbe-papier);
  text-align: center;
}
.markenband img { width: 200px; height: auto; }

.fusszeile {
  padding: var(--abstand-6) var(--polster-bildschirm-x);
  background: var(--farbe-grau-850);
  color: var(--farbe-papier);
  font-size: var(--schrift-s);
  line-height: var(--hoehe-s);
}
.fusszeile a { color: var(--farbe-papier); }

/* Auf dunklem Grund wird der Fokusrahmen umgedreht, sonst verschwindet
   der aeussere Ring im Gruen. */
.kopfzeile :focus-visible,
.markenband :focus-visible,
.fusszeile :focus-visible {
  box-shadow: 0 0 0 var(--fokus-innen) var(--farbe-primaer-tief),
              0 0 0 calc(var(--fokus-innen) + var(--fokus-aussen)) var(--farbe-papier);
}

/* Knoepfe auf dunklem Grund */
.kopfzeile .knopf--zweit,
.markenband .knopf--zweit {
  background: transparent;
  border-color: var(--farbe-papier);
  color: var(--farbe-papier);
}
.kopfzeile .knopf--zweit:hover,
.markenband .knopf--zweit:hover {
  background: var(--farbe-primaer-tief);
}

/* --------------------------------------------------------------------------
   11 · Groessere Bildschirme
   Entworfen wird fuer 390 px. Hier wird nur Luft ergaenzt.
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .knopf-leiste { flex-direction: row; flex-wrap: wrap; }
  .knopf + .knopf { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   12 · Ergänzung vom 04.09.2026 (Entscheidung des Betreibers)
   Datei-Feld für das Zettelfoto, gleiche Maße wie ein Textfeld.
   -------------------------------------------------------------------------- */
.feld input[type="file"] {
  display: block;
  width: 100%;
  min-height: var(--feld-hoehe);
  padding: var(--polster-feld-y) var(--polster-feld-x);
  background: var(--farbe-feld);
  border: var(--rahmen-stark) dashed var(--farbe-rahmen);
  border-radius: var(--rundung);
  color: var(--farbe-text);
  font-family: inherit;
  font-size: var(--schrift-basis);
  line-height: var(--hoehe-basis);
}

/* --------------------------------------------------------------------------
   13 · Ergänzung vom 04.09.2026 (Entscheidung des Betreibers)
   Gleich breite Zeichen für IBAN und Verwendungszweck auf der Zahlungsseite.
   -------------------------------------------------------------------------- */
.mono { font-family: var(--schrift-mono); }