/* Pflege & Kalkulation — die Ansicht hinter PIN.
 *
 * Dasselbe Corporate Design wie das Kuechenhandbuch (Playfair Display /
 * Karla, Tinte / Gold / Creme), aber eine andere Aufgabe: Das iPad in der
 * Kueche wird mit fettigen Fingern im Stehen bedient, hier sitzt jemand und
 * pflegt Zahlen. Deshalb dichter, mit Tabellen und einer Kostenkarte, die
 * beim Scrollen stehen bleibt.
 */

:root {
  --tinte:    #201d17;
  --gold:     #a5813a;
  --gedaempft:#8a8073;
  --linie:    #e8e1d3;
  --gruen:    #6f8c4e;
  --creme:    #faf6ea;
  --papier:   #fffdf7;
  --rot:      #a4462f;
  --rand:     18px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Muss vor allem anderen stehen: Eine Regel wie `.maske { display: flex }`
 * ueberstimmt sonst das hidden-Attribut, und die Verknuepfungsmaske steht
 * schon beim Laden offen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: Karla, -apple-system, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; margin: 0; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }

/* --- Kopf ---------------------------------------------------------------- */

.kopf { background: var(--papier); border-bottom: 1px solid var(--linie); }
.kopf-innen {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 14px var(--rand) 12px; max-width: 1280px; margin: 0 auto;
}
.marke-name { font-family: 'Playfair Display', Georgia, serif; font-size: 25px; }
.marke-zusatz {
  margin-left: 10px; color: var(--gedaempft);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
.kopf-rechts { color: var(--gedaempft); font-size: 13px; display: flex; gap: 14px; align-items: baseline; }

main { max-width: 1280px; margin: 0 auto; padding: 22px var(--rand) 80px; }

/* --- Bausteine ----------------------------------------------------------- */

.knopf {
  font: inherit; font-weight: 600;
  background: var(--tinte); color: var(--creme);
  border: 1px solid var(--tinte); border-radius: 3px;
  padding: 9px 16px; cursor: pointer; min-height: 40px;
}
.knopf:hover { background: #35302a; }
.knopf:disabled { opacity: .5; cursor: default; }
.knopf-zweit { background: transparent; color: var(--tinte); border-color: var(--linie); font-weight: 500; }
.knopf-zweit:hover { background: var(--papier); border-color: var(--gold); }
.knopf-flach {
  font: inherit; background: none; border: 0; color: var(--gold);
  cursor: pointer; padding: 6px 4px; text-decoration: underline; text-underline-offset: 3px;
}
.knopf-mini {
  font: inherit; font-size: 13px; background: transparent; color: var(--gedaempft);
  border: 1px solid var(--linie); border-radius: 3px; padding: 4px 8px; cursor: pointer;
  min-width: 34px;
}
.knopf-mini.an { background: var(--gold); border-color: var(--gold); color: #fff; }
.knopf-mini.weg:hover { color: var(--rot); border-color: var(--rot); }

input, select, textarea {
  font: inherit; color: var(--tinte); background: var(--papier);
  border: 1px solid var(--linie); border-radius: 3px; padding: 8px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
textarea { resize: vertical; line-height: 1.55; }
input[type=checkbox] { width: 22px; height: 22px; }

.hinweis { color: var(--gedaempft); font-size: 14px; margin: 6px 0 12px; }
.fehler  { color: var(--rot); font-size: 14px; margin: 10px 0 0; }
.mitte   { max-width: 460px; margin: 12vh auto; text-align: center; }

.feld { display: block; margin: 0 0 14px; }
.feld-name {
  display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gedaempft); margin-bottom: 5px;
}
.feld-hinweis { display: block; font-size: 13px; color: var(--gedaempft); margin-top: 4px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; }
.gross { font-family: 'Playfair Display', Georgia, serif; font-size: 21px; }

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

.pin-formular { display: flex; gap: 10px; margin-top: 22px; }
.pin-formular input { text-align: center; letter-spacing: .4em; }

/* --- Liste --------------------------------------------------------------- */

.listenkopf {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; margin-bottom: 6px;
}
.listenwerkzeuge { display: flex; gap: 8px; align-items: center; }
.listenwerkzeuge input { width: 200px; }
.filterzeile { display: flex; gap: 6px; }
.filter {
  font: inherit; background: transparent; border: 1px solid var(--linie);
  border-radius: 999px; padding: 6px 15px; cursor: pointer; color: var(--gedaempft);
}
.filter.an { background: var(--tinte); border-color: var(--tinte); color: var(--creme); }

.tabellenrahmen { overflow-x: auto; background: var(--papier); border: 1px solid var(--linie); border-radius: 4px; }
table.liste { border-collapse: collapse; width: 100%; font-size: 15px; }
table.liste th {
  text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gedaempft); font-weight: 500; padding: 11px 14px; border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
table.liste td { padding: 10px 14px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
table.liste tr:last-child td { border-bottom: 0; }
.zeile:hover { background: var(--creme); }
.zeile .name { font-weight: 600; }

.punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.punkt-ok   { background: var(--gruen); }
.punkt-teil { background: var(--gold); }
.punkt-todo { background: var(--linie); border: 1px solid var(--gedaempft); }

.ganz     { color: var(--gruen); font-weight: 600; }
.teils    { color: var(--gold); font-weight: 600; }
.gar-nicht{ color: var(--rot); font-weight: 600; }
.leer     { color: var(--gedaempft); }
.dezent   { color: var(--gedaempft); }

/* Sortierbare Spaltenköpfe im Rezepte-Reiter */
table.liste th.sortierbar { cursor: pointer; user-select: none; }
table.liste th.sortierbar:hover { color: var(--tinte); }
table.liste th.sortierbar.an { color: var(--tinte); }

/* --- Editor -------------------------------------------------------------- */

.editorkopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.speicherstand { font-size: 13px; color: var(--gedaempft); }
.speicherstand.offen { color: var(--rot); font-weight: 600; }

.editor-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .editor-raster { grid-template-columns: 1fr; } }

.block {
  background: var(--papier); border: 1px solid var(--linie); border-radius: 4px;
  padding: 18px; margin-bottom: 16px;
}
.block-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.zaehler { font-size: 13px; color: var(--gedaempft); }
.block h2 { margin-bottom: 10px; }
.block h2 + .hinweis { margin-top: -6px; }

/* --- Zutatenzeilen ------------------------------------------------------- */

.zutatenliste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.zutat {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 150px minmax(0, 1.4fr) auto;
  gap: 8px; align-items: start;
  padding: 8px; border: 1px solid var(--linie); border-radius: 3px; background: var(--creme);
}
@media (max-width: 800px) { .zutat { grid-template-columns: 1fr; } }
.zutat-wahl { border-left: 3px solid var(--gold); }
.zutat-text { display: flex; flex-direction: column; gap: 6px; }
.zutat-menge-text { font-size: 14px; color: var(--gedaempft); }
.zutat-mengenblock { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.vorschlag { color: var(--gold); border-color: var(--gold); border-style: dashed; font-size: 12px; }
.vorschlag:hover { background: var(--gold); color: #fff; border-style: solid; }
.zutat-menge { display: flex; gap: 6px; }
.zutat-menge .menge { width: 90px; text-align: right; }
.zutat-menge .einheit { width: 76px; }
/* Die Ausbeute steht in freien Einheiten — „Portion" muss ganz hineinpassen. */
.ausbeute-menge .einheit { width: 130px; }
.zutat-werkzeuge { display: flex; gap: 4px; }

.ref-rahmen { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.korrektur { border-color: var(--rot); color: var(--rot); }
.korrektur:hover { background: var(--rot); color: #fff; }
.ref-korrekturhinweis { font-size: 11px; color: var(--gedaempft); }

.ref {
  font: inherit; text-align: left; width: 100%; cursor: pointer;
  background: var(--papier); border: 1px solid var(--linie); border-radius: 3px;
  padding: 7px 10px; display: flex; flex-direction: column; gap: 1px; min-height: 42px;
}
.ref:hover { border-color: var(--gold); }
.ref-titel  { font-weight: 600; font-size: 15px; }
.ref-titel .marke-rezeptur { margin-left: 7px; }
.ref-zusatz { font-size: 12px; color: var(--gedaempft); }
.ref-leer      { border-style: dashed; }
.ref-leer .ref-titel { color: var(--gedaempft); font-weight: 500; }
.ref-vorschlag { border-color: var(--gold); border-style: dashed; background: #fdfaf1; }
.ref-vorschlag .ref-titel { color: var(--gold); }
.ref-fehler    { border-color: var(--rot); }
.ref-fehler .ref-zusatz:last-child { color: var(--rot); font-weight: 600; }

.arbeitszeile { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.arbeitszeile .menge { width: 90px; text-align: right; }
.arbeitszeile select { width: auto; }
.einheit-text { color: var(--gedaempft); font-size: 14px; }

.editor-fuss { display: flex; gap: 16px; align-items: center; padding: 4px 0 20px; }
.editor-fuss .hinweis { margin: 0; }

/* --- Kostenkarte --------------------------------------------------------- */

.kostenkarte {
  position: sticky; top: 16px;
  background: var(--papier); border: 1px solid var(--linie); border-top: 3px solid var(--gold);
  border-radius: 4px; padding: 18px;
}
.kk-bezug {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gedaempft); margin: 2px 0 14px;
}
.kk-block { padding: 10px 0; border-top: 1px solid var(--linie); }
.kk-block:first-of-type { border-top: 0; padding-top: 0; }

.kz { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0; }
.kz-name { color: var(--gedaempft); font-size: 14px; }
.kz-wert { font-variant-numeric: tabular-nums; }
.kz-gross .kz-name { color: var(--tinte); font-size: 15px; }
.kz-gross .kz-wert { font-family: 'Playfair Display', Georgia, serif; font-size: 28px; }
.kz-summe { border-top: 1px solid var(--linie); margin-top: 5px; padding-top: 7px; }
.kz-summe .kz-name, .kz-summe .kz-wert { font-weight: 600; }
.kz-summe.gut     .kz-wert { color: var(--gruen); }
.kz-summe.mittel  .kz-wert { color: var(--gold); }
.kz-summe.schwach .kz-wert { color: var(--rot); }
/* Vorläufig: gedämpft, nie farbig. Eine unvollständige Rechnung darf nicht
 * aussehen wie ein Ergebnis. */
.kz-summe.vorlaeufig .kz-name,
.kz-summe.vorlaeufig .kz-wert { color: var(--gedaempft); font-weight: 500; }
.kz-unklar .kz-wert { color: var(--rot); font-weight: 600; }

.kk-warnung { font-size: 13px; color: var(--gold); margin: 6px 0 0; }
.kk-klein { font-size: 12px; color: var(--gedaempft); margin: 6px 0 0; line-height: 1.45; }
.kk-alt { color: var(--rot); }
.kk-offen { border-top: 1px solid var(--linie); padding-top: 10px; margin-top: 4px; }
.kk-offen h3 { font-size: 14px; color: var(--rot); }
.kk-offen ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--gedaempft); }

/* --- Maske --------------------------------------------------------------- */

.maske {
  position: fixed; inset: 0; background: rgba(32, 29, 23, .45);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 20;
}
.maske-blatt {
  background: var(--papier); border-radius: 5px; width: min(620px, 100%);
  max-height: 86vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 50px rgba(32, 29, 23, .28);
}
.maske-kopf {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid var(--linie);
}
.maske-inhalt { overflow-y: auto; padding: 16px 18px 20px; }
.maske-suche { margin-bottom: 12px; }

.trefferliste { display: flex; flex-direction: column; gap: 5px; }
.treffer {
  font: inherit; text-align: left; cursor: pointer; position: relative;
  background: var(--creme); border: 1px solid var(--linie); border-radius: 3px;
  padding: 9px 54px 9px 12px; display: flex; flex-direction: column; gap: 2px;
}
.treffer:hover { border-color: var(--gold); background: #fdfaf1; }
.treffer-titel  { font-weight: 600; }
.treffer-zusatz { font-size: 12px; color: var(--gedaempft); }
.treffer-guete {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--gedaempft); font-variant-numeric: tabular-nums;
}
.treffer-gut { border-left: 3px solid var(--gold); }
.treffer-gut .treffer-guete { color: var(--gold); font-weight: 600; }
.treffer-aktiv { border-color: var(--tinte); }
.treffer-raus .treffer-titel { color: var(--rot); }

.marke-rezeptur {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 1px 7px;
  font-weight: 500;
}

.anlegen { border-top: 1px solid var(--linie); margin-top: 16px; padding-top: 14px; }
.anlegen-knoepfe { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.artikelformular { margin-top: 14px; }

.fuss { text-align: center; color: var(--gedaempft); font-size: 12px; padding: 0 0 24px; }

/* --- Reiter -------------------------------------------------------------- */

.reiter {
  display: flex; gap: 4px; margin: 0 0 20px;
  border-bottom: 1px solid var(--linie);
}
.reiter button {
  font: inherit; font-size: 15px; background: none; border: 0; cursor: pointer;
  color: var(--gedaempft); padding: 10px 18px; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.reiter button.aktiv { color: var(--tinte); border-bottom-color: var(--gold); font-weight: 600; }
.reiter button:hover { color: var(--tinte); }

/* --- Artikelliste -------------------------------------------------------- */

.marke-genutzt {
  margin-left: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gruen); border: 1px solid var(--gruen); border-radius: 999px; padding: 1px 7px;
}
.marke-geraten {
  margin-left: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--rot); border: 1px solid var(--rot); border-radius: 999px; padding: 1px 7px;
}
/* Das Preisalter ist die Zahl, die sonst niemand ansieht — deshalb Farbe. */
.alt-mittel  { color: var(--gold); }
.alt-schlimm { color: var(--rot); font-weight: 600; }

/* --- Allergene ----------------------------------------------------------- */

.allergenkaesten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 14px; margin: 12px 0 16px;
}
.allergen {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border: 1px solid var(--linie); border-radius: 3px; background: var(--creme);
  cursor: pointer; min-height: 42px;
}
.allergen:hover { border-color: var(--gold); }
.allergen input { width: 20px; height: 20px; flex: 0 0 auto; }

/* --- Rechnungsvorschlag -------------------------------------------------- */

.vorschlagskarte {
  border: 1px solid var(--gold); border-left: 3px solid var(--gold);
  border-radius: 3px; background: #fdfaf1; padding: 14px; margin: 10px 0 16px;
}
.vs-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vs-titel { font-weight: 600; }
.vs-marke {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gedaempft); white-space: nowrap;
}
.vs-zahlen { font-variant-numeric: tabular-nums; margin: 8px 0 12px; font-size: 15px; }
.vs-suche { margin-top: 10px; }
.vs-suche input { max-width: 420px; }

/* Der Weg in die Kochansicht. Kein Reiter, sondern ein Link: Das ist eine
 * eigene Seite fuers Handy, keine dritte Ansicht am Mac. */
.reiter-link {
  margin-left: auto; align-self: center; color: var(--gold);
  text-decoration: none; font-size: 15px; padding: 10px 14px;
}
.reiter-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Zutatenliste -------------------------------------------------------- */

/* Die ganze Zeile ist der Knopf — „öffnen" ganz rechts war zum Treffen
 * umständlich (Kevin, Praxistest 16.08.). */
.zeile-klickbar { cursor: pointer; }
.zeile-klickbar:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.marke-tk {
  margin-left: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #3d6b8a; border: 1px solid #3d6b8a; border-radius: 999px; padding: 1px 7px;
}
.marke-luecke {
  margin-left: 8px; font-size: 12px; color: var(--rot);
}
.auswahl-mit-knopf { display: flex; gap: 8px; align-items: center; }
.auswahl-mit-knopf select { flex: 1; }
.auswahl-mit-knopf .knopf-mini { white-space: nowrap; min-height: 40px; }

.hinweis-gut { color: var(--gruen); font-size: 15px; margin: 4px 0 12px; font-weight: 600; }

/* --- Die gerechnete Zahl ------------------------------------------------- */

.rechenkarte {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--creme); border: 1px solid var(--gold); border-left: 3px solid var(--gold);
  border-radius: 3px; padding: 14px; margin-top: 6px;
}
.rechen-formel { font-size: 14px; color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.rechen-wert {
  font-family: 'Playfair Display', Georgia, serif; font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.rechen-klein { font-size: 13px; color: var(--gedaempft); line-height: 1.45; }

.loeschen { color: var(--rot); margin-left: auto; }