/* Filzenhof – das gesamte Aussehen der App steht hier und nur hier.
   Gebaut für den Stall: groß, kontrastreich, wenige Farben, gut lesbar mit Handschuh und bei Gegenlicht.

   Farben:  Dunkelgrün = Navigation, Knöpfe, Links    Schwarz/Weiß = alles andere
            Rot = nur „Achtung" (Fehler, überfälliges Mastende, Storno)
   Kein Dunkel-Modus: Im Stall ist es hell, und ein festes Bild lernt sich schneller. */

:root {
  --gruen: #1d5232;        /* Stammfarbe: Kopfzeile, Knöpfe, Links */
  --gruen-hell: #e6efe8;   /* nur als Fläche: aktive Zeile, Hinweise */
  --schwarz: #111111;
  --weiss: #ffffff;
  --grau: #4a4a4a;         /* Nebentext – noch gut lesbar (Kontrast > 8:1) */
  --linie: #8c8c8c;
  --linie-hell: #d4d4d4;
  --rot: #b3001b;          /* einzige Signalfarbe */
  --rund: 4px;
  color-scheme: light;
}

/* ---------- Grundlage ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--weiss); color: var(--schwarz); font: 18px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 1200px; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: .4rem 0 1rem; }
h1 small { font-size: 1.05rem; font-weight: normal; color: var(--grau); }
h2 { font-size: 1.25rem; margin: 1.8rem 0 .6rem; }
h2 small { font-weight: normal; color: var(--grau); font-size: 1rem; }
a { color: var(--gruen); font-weight: 600; text-underline-offset: 3px; }
small { color: var(--grau); font-size: .85em; }
ul { padding-left: 1.3rem; } li { margin: .2rem 0; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em; }
.z { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Kopfzeile ---------- */
/* PC: Marke · Menüpunkte · [Futtervorlage]   Handy: Marke · [Futtervorlage] [Menü] – Menü klappt darunter auf */
header { display: flex; align-items: center; gap: .5rem 1rem; padding: .5rem 1rem; background: var(--gruen); color: var(--weiss); }
header .marke { font-size: 1.2rem; letter-spacing: .03em; }
header nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; flex: 1; order: 1; }
header nav a { color: var(--weiss); font-weight: 600; text-decoration: none; padding: .55rem .7rem; border-radius: var(--rund); min-height: 2.75rem; display: flex; align-items: center; }
header nav a:hover { background: rgba(255, 255, 255, .15); }
header nav a[aria-current] { background: var(--weiss); color: var(--gruen); }
/* Abmelden ist selten – sieht aus wie ein Menüpunkt, nur leiser */
header .abmelden button { min-height: 2.75rem; padding: .55rem .8rem; border: 0; background: transparent; color: var(--weiss); font-weight: normal; text-decoration: underline; text-underline-offset: 3px; }
header .abmelden button:hover { background: rgba(255, 255, 255, .15); }
/* Knöpfe auf grünem Grund: weiß umrandet */
header .leise { background: transparent; color: var(--weiss); border-color: var(--weiss); }
header .leise:hover { background: rgba(255, 255, 255, .15); border-color: var(--weiss); }
/* gesperrt (fehlendes Recht): sichtbar, aber ausgegraut und nicht klickbar */
header nav .gesperrt { color: rgba(255, 255, 255, .45); font-weight: 600; padding: .55rem .7rem; min-height: 2.75rem; display: flex; align-items: center; cursor: not-allowed; }
header nav .wer { color: rgba(255, 255, 255, .8); font-size: .85rem; padding: 0 .4rem; margin-left: auto; }
header .schnell { order: 2; background: var(--weiss); color: var(--gruen); border-color: var(--weiss); white-space: nowrap; }
header .schnell:hover { background: var(--gruen-hell); border-color: var(--gruen-hell); }
header .schnell[aria-current] { box-shadow: inset 0 0 0 3px var(--gruen); }
.menue-knopf { display: none; }

@media (max-width: 1100px) {
  header { position: relative; flex-wrap: nowrap; gap: .5rem; padding: .5rem .75rem; }
  header .schnell { padding: .5rem .8rem; }
  header .marke { flex: 1 1 auto; min-width: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  header > * { order: 0 !important; }  /* Reihenfolge wie im HTML: Marke, Futtervorlage, ☰, Menü */
  .menue-knopf { display: inline-flex; flex: 0 0 3.25rem; width: 3.25rem; padding: 0; font-size: 1.5rem; line-height: 1; }
  /* aufgeklappt: Liste über dem Inhalt, volle Breite direkt unter der Kopfzeile */
  header nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 10; flex-direction: column; align-items: stretch; gap: 0;
               padding: 0 .75rem .5rem; background: var(--gruen); box-shadow: 0 8px 16px rgba(0, 0, 0, .35); }
  header.offen nav { display: flex; }
  header nav a, header nav .gesperrt { min-height: 3.25rem; padding: .6rem .8rem; border-top: 1px solid rgba(255, 255, 255, .3); border-radius: 0; font-size: 1.1rem; }
  header nav .wer { margin: 0; padding: .6rem .8rem 0; }
  header .abmelden button { width: 100%; justify-content: flex-start; min-height: 3.25rem; border-top: 1px solid rgba(255, 255, 255, .3); border-radius: 0; font-size: 1.1rem; }
}

/* ---------- Knöpfe und Eingaben ---------- */
button, .knopf {
  font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3rem; padding: .5rem 1.2rem; border: 2px solid var(--gruen); border-radius: var(--rund);
  background: var(--gruen); color: var(--weiss); text-decoration: none; cursor: pointer;
}
button:hover, .knopf:hover { background: #143b24; border-color: #143b24; }
button:focus-visible, .knopf:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid var(--schwarz); outline-offset: 2px; }
button:disabled { background: var(--linie-hell); border-color: var(--linie-hell); color: var(--grau); cursor: not-allowed; }
.leise { background: var(--weiss); color: var(--gruen); }
.leise:hover { background: var(--gruen-hell); border-color: var(--gruen); }
.gefahr { background: var(--rot); border-color: var(--rot); }
.knopf.gesperrt, .knopf.gesperrt:hover { background: #f2f2f2; border-color: var(--linie-hell); color: var(--linie); cursor: not-allowed; }
tr.gesperrt-zeile td { color: var(--grau); text-decoration: line-through; }
details > summary { cursor: pointer; min-height: 2.5rem; display: flex; align-items: center; }
.gefahr:hover { background: #8a0015; border-color: #8a0015; }

input, select, textarea {
  font: inherit; width: 100%; min-height: 3rem; padding: .45rem .6rem;
  border: 2px solid var(--linie); border-radius: var(--rund); background: var(--weiss); color: var(--schwarz);
}
input:focus, select:focus, textarea:focus { border-color: var(--gruen); }
input[type=hidden] { display: none; }
input[type=checkbox], input[type=radio] { width: 1.6rem; height: 1.6rem; min-height: 0; padding: 0; margin: 0; accent-color: var(--gruen); cursor: pointer; vertical-align: middle; }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .95rem; font-weight: 600; }
label small { font-weight: normal; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
fieldset[disabled] input, fieldset[disabled] select, fieldset[disabled] textarea { background: #f2f2f2; color: var(--grau); }
details summary { cursor: pointer; font-weight: 600; padding: .5rem 0; }

/* ---------- Bausteine ---------- */
.kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.filter { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin: 0 0 1rem; }
.filter input, .filter select { width: auto; }
.abstand { margin-top: 1.5rem; }
.stapel { display: flex; flex-direction: column; gap: .8rem; }
.breit { grid-column: 1 / -1; }
.raster { display: grid; grid-template-columns: 1fr 320px; gap: 1.2rem; align-items: start; }
.raster.zwei { grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .raster, .raster.zwei { grid-template-columns: 1fr; } }

.karte { background: var(--weiss); border: 2px solid var(--schwarz); border-radius: var(--rund); padding: 1rem; }
.karte > h2:first-child { margin-top: 0; }
.karte.schmal { max-width: 420px; margin: 3rem auto; display: flex; flex-direction: column; gap: .9rem; }
.karte .stapel + .stapel, .karte + .karte { margin-top: 1rem; }
.karte button { width: 100%; }
dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0 0 1rem; }
dt { color: var(--grau); }
dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Meldungen: grün umrandet = Info, rot = Achtung */
.info { border-left: 6px solid var(--gruen); background: var(--gruen-hell); padding: .7rem 1rem; margin: 0 0 1rem; font-weight: 600; }
.info p { margin: .2rem 0; }
.warn { color: var(--rot); font-weight: 700; }
.fehler { color: var(--rot); font-weight: 700; border-left: 6px solid var(--rot); padding: .5rem 1rem; }
.ok { color: var(--gruen); font-weight: 600; }

.summen { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.summen div { border: 2px solid var(--schwarz); border-radius: var(--rund); padding: .5rem .9rem; min-width: 130px; }
.summen span { display: block; font-size: .85rem; color: var(--grau); }
.summen b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.summen .warn { border-color: var(--rot); }

/* ---------- Tabellen ---------- */
.tabelle { overflow-x: auto; border: 2px solid var(--schwarz); border-radius: var(--rund); }
table { border-collapse: collapse; width: 100%; }
th, td { padding: .65rem .7rem; text-align: left; border-bottom: 1px solid var(--linie-hell); white-space: nowrap; vertical-align: middle; }
th { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--schwarz); background: #f4f4f4; }
th.z { text-align: right; }
tbody tr:nth-child(even) { background: #fafafa; }
tbody tr[onclick] { cursor: pointer; }
tbody tr:hover { background: var(--gruen-hell); }
tfoot td { border-top: 2px solid var(--schwarz); border-bottom: 0; font-weight: 600; }
.leer { text-align: center; color: var(--grau); padding: 2rem; }
table.kompakt th, table.kompakt td { padding: .4rem .5rem; }
table.eingabe input { width: 6rem; min-height: 2.5rem; padding: .25rem .4rem; }
/* markierte Zeile (z. B. Mastende bald, Preis weicht ab): roter Balken links */
tr.offen td:first-child { box-shadow: inset 6px 0 var(--rot); }
/* angehakte Zeile hervorheben – man sieht sofort, was gleich umgestallt wird */
tr:has(input[name=tier]:checked) { background: var(--gruen-hell); }
tr:has(input[name=tier]:checked) td { font-weight: 700; }

/* Art eines Abgangs: ohne Farbe, nur als Kästchen */
.art { border: 1px solid var(--schwarz); border-radius: var(--rund); padding: .05rem .45rem; font-size: .85rem; }
.art-verendet .art { border-color: var(--rot); color: var(--rot); }

/* ---------- Aktionsleiste unter Tabellen (Umstallen, Zuordnen) ---------- */
.aktion { margin-top: 1rem; border: 2px solid var(--gruen); border-radius: var(--rund); padding: 1rem; }
.aktion h2 { margin: 0 0 .8rem; }
.aktion .filter { margin: 0; }
.aktion select { min-width: 14rem; }

/* ---------- Buchtenplan ---------- */
.stall { display: flex; flex-direction: column; gap: .5rem; }
.stall .seite, .stall .futter { text-align: center; font-size: .85rem; font-weight: 600; color: var(--grau); letter-spacing: .08em; text-transform: uppercase; }
.stall .futter { border-block: 2px dashed var(--linie); padding: .25rem; }
.reihe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) .5rem repeat(6, minmax(0, 1fr)); gap: .4rem; }
.reihe.krank { margin-top: 1rem; }
.reihe .gang { background: repeating-linear-gradient(90deg, var(--linie) 0 2px, transparent 2px 6px); }
.bucht { display: flex; flex-direction: column; gap: .1rem; padding: .5rem; min-height: 7rem; background: var(--weiss);
         border: 2px solid var(--schwarz); border-radius: var(--rund); color: var(--schwarz); text-decoration: none; font-size: .85rem; font-weight: normal; }
a.bucht:hover { background: var(--gruen-hell); }
.bucht b { font-size: 1.8rem; line-height: 1.1; }
.bucht .bid { font-weight: 700; font-size: .95rem; }
.bucht.leer { border-color: var(--linie-hell); color: var(--grau); }
.bucht.reif { border: 4px solid var(--rot); padding: calc(.5rem - 2px); }
.bucht { min-width: 0; overflow-wrap: anywhere; }
.bucht .badge { margin-top: auto; background: var(--rot); color: var(--weiss); border-radius: var(--rund); padding: .1rem .3rem; font-weight: 700; font-size: .8rem; }
.bucht.vorlage { min-height: 5rem; }
.bucht.vorlage .rest { margin-top: auto; color: var(--grau); }
@media (max-width: 900px) { .reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); } .reihe .gang { display: none; } }

/* ---------- Stallplan Handy (/bestand/stall): Hochformat, eine Bildschirmhöhe, kein Scrollen ----------
   Reihe 1 links, Futtergang, Reihe 2 rechts; Buchten 1..12 von oben nach unten, Quergang nach 6. */
body.ganzseite { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none; }
body.ganzseite main { flex: 1; min-height: 0; width: 100%; padding: .35rem .5rem calc(.4rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .35rem; }
.stallkopf { display: flex; align-items: baseline; gap: .5rem; font-size: 1rem; line-height: 1.2; }
.stallkopf b { font-size: 1.4rem; }
.stallkopf .reifzahl { background: var(--rot); color: var(--weiss); font-weight: 700; padding: 0 .4rem; border-radius: var(--rund); }
.stallkopf .luecke { flex: 1; }
.stallkopf .grau { color: var(--grau); font-size: .85rem; }
.stallplan { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 1.4rem minmax(0, 1fr); gap: 0 .3rem; }
.sp { display: grid; grid-template-rows: auto repeat(6, minmax(0, 1fr)) .45rem repeat(6, minmax(0, 1fr)); gap: .2rem; min-height: 0; }
.sp-kopf { text-align: center; font-size: .7rem; font-weight: 700; color: var(--grau); letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
.quergang { background: repeating-linear-gradient(0deg, var(--linie) 0 2px, transparent 2px 5px); margin: 0 .5rem; }
.futtergang { writing-mode: vertical-rl; text-orientation: mixed; text-align: center; font-size: .7rem; font-weight: 700;
              letter-spacing: .3em; text-transform: uppercase; color: var(--grau); border-inline: 2px dashed var(--linie); }
/* Zelle: Bucht+Größe und Mastende links, Tierzahl groß rechts */
.sb { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr 1fr; align-items: center; column-gap: .3rem;
      min-height: 0; min-width: 0; overflow: hidden; padding: 0 .4rem; border: 2px solid var(--schwarz); border-radius: var(--rund);
      background: var(--weiss); color: var(--schwarz); text-decoration: none; font-weight: normal; line-height: 1.1; }
a.sb:active { background: var(--gruen-hell); }
.sb-id { font-weight: 700; font-size: clamp(.75rem, 2.1dvh, .95rem); white-space: nowrap; align-self: end; }
.sb-id i { font-style: normal; font-weight: normal; color: var(--grau); }
.sb-info { font-size: clamp(.7rem, 1.9dvh, .85rem); white-space: nowrap; color: var(--grau); align-self: start; }
.sb b { grid-row: 1 / 3; grid-column: 2; font-size: clamp(1.2rem, 4.2dvh, 2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.sb.leer { border-color: var(--linie-hell); color: var(--linie); }
.sb.leer b { color: var(--linie); }
.sb.reif { border: 3px solid var(--rot); padding: 0 calc(.4rem - 1px); }
.sb.reif .sb-info { color: var(--rot); font-weight: 700; }
.stallfuss { display: flex; gap: .4rem; align-items: stretch; }
.stallfuss .sb.klein { flex: 1; min-height: 3rem; grid-template-rows: 1fr; }
.stallfuss .sb.klein .sb-id { align-self: center; }
.stallfuss .sb.klein b { grid-row: 1; font-size: 1.4rem; }
.stallfuss .sb.reif b { color: var(--rot); }
.stallfuss button, .stallfuss .knopf { min-height: 3rem; height: 100%; padding: .4rem .8rem; }
.stallfuss form { display: flex; }
.stallmeldung { position: fixed; left: .5rem; right: .5rem; bottom: 4.5rem; z-index: 10; margin: 0; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }

/* ---------- Beladen (/fuetterung): Handy-Hochformat, eine Bildschirmhöhe, kein Scrollen ----------
   Zeilen teilen sich die Höhe; Zahlen wachsen mit der Bildschirmhöhe (dvh). */
.ladekopf { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; line-height: 1.2; }
.ladekopf span { font-weight: 700; }
.ladekopf b { font-size: clamp(1.4rem, 4.5dvh, 2.2rem); font-variant-numeric: tabular-nums; }
.ladekopf small { flex-basis: 100%; }
.ladeliste { flex: 1; min-height: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.ladeliste li { flex: 1 1 0; min-height: 0; margin: 0; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
                align-items: center; column-gap: .6rem; padding: 0 .7rem;
                border: 2px solid var(--schwarz); border-radius: var(--rund); line-height: 1.1; }
.lf-nr { font-size: clamp(.9rem, 2.4dvh, 1.2rem); font-weight: 700; color: var(--grau); }
/* Name + Waage als Block senkrecht mittig – auch wenn der Name umbricht (Mineralfutter Rindermast) */
.lf-text { display: flex; flex-direction: column; justify-content: center; gap: .1rem; min-width: 0; }
.lf-name { font-weight: 700; font-size: clamp(.95rem, 2.7dvh, 1.35rem); overflow-wrap: anywhere; }
.lf-waage { font-size: clamp(.95rem, 2.7dvh, 1.35rem); color: var(--grau); font-variant-numeric: tabular-nums; }
.lf-waage b { color: var(--schwarz); font-size: 1.15em; }
.lf-kg { font-size: clamp(1.6rem, 6.5dvh, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.lf-kg i { font-style: normal; font-weight: normal; font-size: .45em; color: var(--grau); }
.stallfuss .knopf { flex: 1; }
.stallfuss .ladewarn { color: var(--rot); border-color: var(--rot); }

/* ---------- Fütterung ---------- */
.zulagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .5rem; }
.zulagen input { width: 100%; }
form.zeile { display: flex; gap: .4rem; } form.zeile input { width: auto; }

/* ---------- Handy ---------- */
@media (max-width: 600px) {
  main { padding: .75rem; }
  h1 { font-size: 1.45rem; }
  .summen { display: grid; grid-template-columns: 1fr 1fr; }
  .summen div { min-width: 0; }
  th, td { padding: .5rem .55rem; }
  .filter > label, .filter > input, .filter > select { flex: 1 1 9rem; }
  .filter input, .filter select { width: 100%; }
  .aktion select { min-width: 0; }
}

/* ---------- Druck ---------- */
@media print {
  header, .nicht-drucken, form button { display: none !important; }
  body { font-size: 11pt; }
  main { max-width: none; padding: 0; }
  .karte, .tabelle, .bucht { border-width: 1px; }
  tbody tr:nth-child(even), tbody tr:hover { background: none; }
}