/* OvoDesk – kompakt am PC, gross und einfach am Handy */
:root {
  --bg: #f5f4f2;
  --card: #ffffff;
  --text: #23271f;
  --muted: #6b7064;
  --line: #e3e1d8;
  --line-strong: #cfccc0;
  --brand: #ce1d2a;
  --brand-2: #de3a46;
  --brand-soft: #fce8ea;
  --accent: #c98a1b;
  --accent-soft: #fbf0d9;
  --danger: #b3261e;
  --danger-soft: #fbe4e2;
  --ok: #2e7d32;
  --ok-soft: #e3f2e4;
  --week: #f1f0e8;
  --c1: #2f6db5; --c2: #c98a1b; --c3: #7a7f73; --c4: #2e7d32; --c5: #b3261e; --c6: #7b4fa8;
  --radius: 8px;
  --side: 210px;
  --top: 76px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161814; --card: #1f221d; --text: #e6e8e1; --muted: #9ba293; --line: #30342c; --line-strong: #444a3f;
    --brand: #ff7b82; --brand-2: #ff959a; --brand-soft: #3a1d1f; --accent: #e3a83d; --accent-soft: #3a2f1a;
    --danger: #ef7d74; --danger-soft: #3d2120; --ok: #7fcf86; --ok-soft: #1f3321; --week: #262a23;
    --c1: #6ea8ef; --c2: #e3a83d; --c3: #a6ab9f; --c4: #7fcf86; --c5: #ef7d74; --c6: #b892e0;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--brand); }
h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 15px; margin: 0 0 10px; }
h3 { font-size: 14px; margin: 12px 0 6px; }
p { margin: 0 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--ok); } .neg { color: var(--danger); }
.diff { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.diff.pos { color: var(--ok); } .diff.neg { color: var(--danger); }
.nowrap { white-space: nowrap; }

/* ---------- Gerüst ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; height: var(--top); display: flex; align-items: center; gap: 14px; padding: 0 22px;
  background: var(--card); color: var(--text); border-bottom: 3px solid var(--brand); z-index: 30; }
.topbar a { color: var(--text); text-decoration: none; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; white-space: nowrap; color: var(--brand) !important; }
.brand .logo { height: 56px; width: auto; display: block; }
@media (prefers-color-scheme: dark) { .brand .logo, .login-logo img { background: #fff; border-radius: 6px; padding: 2px 6px; } }
.beta-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: #222; border-radius: 10px; padding: 1px 7px; line-height: 1.5; }
.login-logo { text-align: center; margin: 0 0 14px; position: relative; }
.login-logo img { width: 100%; max-width: 360px; height: auto; }
.login-logo .beta-badge { position: absolute; right: 0; top: -14px; }
.topbar select { background: var(--brand-soft); color: var(--text); border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 6px; font: inherit; }
.herd-age { background: var(--brand-soft); color: var(--brand); border-radius: 12px; padding: 2px 9px; font-size: 12px; white-space: nowrap; font-weight: 600; }
.spacer { flex: 1; }
.user { font-size: 13px; opacity: .9; }
.logout { font-size: 18px; }
.nav-toggle { display: none; background: none; border: 0; color: var(--brand); font-size: 22px; padding: 4px 6px; cursor: pointer; }
.sidenav { position: fixed; top: var(--top); bottom: 0; left: 0; width: var(--side); overflow-y: auto; background: var(--card);
  border-right: 1px solid var(--line); padding: 8px 0 24px; z-index: 25; }
.sidenav a { display: flex; gap: 8px; align-items: center; padding: 6px 14px; color: var(--text); text-decoration: none; font-size: 13.5px; }
.sidenav a:hover { background: var(--brand-soft); }
.sidenav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; border-left: 3px solid var(--brand); padding-left: 11px; }
.sidenav .ico { width: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.sidenav a.active .ico, .sidenav a:hover .ico { color: var(--brand); }
.ico-svg { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
.alert .ico-svg { color: var(--danger); margin-right: 4px; }
.btn .ico-svg { vertical-align: -3px; }
.logout, .nav-toggle { display: inline-flex; align-items: center; }
/* Abgeschlossene Herde: Felder gesperrt, Knöpfe weg (Server sperrt zusätzlich) */
.herd-readonly .content form[method="post"] button,
.herd-readonly .content form[method="post"] .btn,
.herd-readonly .content .kanal-pick,
.herd-readonly .content .egg-form,
.herd-readonly .content .autosave-hint { display: none !important; }
.herd-readonly .content form[method="post"] :is(input, select, textarea):disabled { background: var(--week); color: var(--text); opacity: 1; border-color: var(--line); }
.nav-group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 14px 4px; }
.content { margin-left: var(--side); padding: calc(var(--top) + var(--stall) + 14px) 16px 24px; max-width: 1700px; }
/* Stall-Leiste: welcher Stall / welche Herde gerade bearbeitet wird */
:root { --stall: 46px; }
.stallbar { position: fixed; top: var(--top); left: var(--side); right: 0; height: var(--stall); z-index: 24; display: flex; align-items: center; gap: 10px;
  padding: 0 16px; background: var(--brand-soft); border-bottom: 1px solid var(--line); overflow-x: auto; white-space: nowrap; }
@media (prefers-color-scheme: light) { .stallbar { background: #faeced; } }
.stall-tabs { display: flex; gap: 6px; }
.stall-tabs a, .stall-one { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 18px; text-decoration: none;
  font-weight: 650; font-size: 14px; color: var(--brand); border: 1.5px solid var(--brand); background: var(--card); }
.stall-tabs a.active, .stall-one { background: var(--brand); color: #fff; }
@media (prefers-color-scheme: dark) { .stall-tabs a.active, .stall-one { color: #10140f; } }
.stallbar select { background: var(--card); color: var(--text); border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 6px; font: inherit; font-weight: 600; }
.betrieb-name { font-size: 13px; color: var(--muted); }
input.auto-val { color: var(--muted); font-style: italic; }
label .hint { font-size: 11px; color: var(--muted); font-weight: 400; line-height: 1.2; }
/* Felder im Raster unten bündig, auch wenn eine Beschriftung zweizeilig ist */
.form-grid > label { justify-content: flex-end; }
.bottomnav, .nav-backdrop { display: none; }

/* ---------- Bausteine ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; min-width: 0; overflow-x: auto; }
.card + .card { margin-top: 12px; }
.grid { display: grid; gap: 12px; }
.grid > .card + .card { margin-top: 0; }
/* Rasterfelder nie breiter als die Spalte – breite Tabellen scrollen in ihrem eigenen Rahmen */
.grid > * { min-width: 0; }
/* Sprungziele (#…) nicht unter der festen Kopf- und Stall-Leiste verstecken */
[id] { scroll-margin-top: calc(var(--top) + var(--stall) + 12px); }
.form-grid input, .form-grid select { width: 100%; }
/* iPhone/Safari: Datum/Zeit halten sich sonst nicht an die Spaltenbreite */
input[type=date], input[type=time] { min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; min-height: 2.45em; text-align: left; }
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value { text-align: left; margin: 0; }
label > input[type=date], label > input[type=time] { display: block; width: 100%; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; }
.mt { margin-top: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.head h1 { margin: 0; }
.head .spacer { flex: 1; }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; }
.kpi .l { font-size: 11.5px; color: var(--muted); }
.kpi .v { font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.25; }
.kpi .s { font-size: 12px; color: var(--muted); }
.kpi { position: relative; overflow: hidden; }
.kpi .trend { font-size: 13px; vertical-align: 3px; }
.kpi .spark { position: absolute; right: 10px; top: 10px; width: 38%; height: 30px; fill: none; stroke: var(--c1); stroke-width: 1.8; stroke-linejoin: round; opacity: .85; }
.kpi-hero { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #000)); border-color: var(--brand); color: #fff; }
.kpi-hero .l, .kpi-hero .s { color: rgba(255,255,255,.85); }
.kpi-hero .v { font-size: 26px; }
.kpi-hero .pos { color: #b6f2bc; font-weight: 700; } .kpi-hero .neg { color: #ffc2bb; font-weight: 700; } .kpi-hero .muted { color: #fff; }
.kpi .meter { height: 6px; border-radius: 3px; background: var(--week); margin: 5px 0 3px; overflow: hidden; }
.kpi .meter span { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
/* Kacheln und Kurve/Stand im gleichen Raster: «Eier total» genau über «Stand» */
.kpis-ll, .g3.ll-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(390px, 32%); gap: 12px; }
.ll-stand table { width: 100%; }
.ll-stand td, .ll-stand th { padding: 3px 4px; }
/* Alle Kacheln weiss; Warnung nur als farbiger Rand links */
.kpi.warn { box-shadow: inset 4px 0 0 var(--accent); }
.kpi.bad { box-shadow: inset 4px 0 0 var(--danger); }

.flash { padding: 9px 12px; border-radius: var(--radius); margin-bottom: 10px; border: 1px solid; }
.flash-ok { background: var(--ok-soft); border-color: var(--ok); }
.flash-err { background: var(--danger-soft); border-color: var(--danger); }
.flash-warn { background: var(--accent-soft); border-color: var(--accent); }
.alert { padding: 8px 12px; border-radius: var(--radius); background: var(--danger-soft); border: 1px solid var(--danger); margin-bottom: 10px; }

.badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11.5px; background: var(--week); border: 1px solid var(--line); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); border-color: var(--ok); }
.badge.warn { background: #f59e0b; border-color: #d97706; color: #fff; font-weight: 600; }
.badge.bad { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }

/* ---------- Formulare ---------- */
label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); }
input, select, textarea { font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-2); outline-offset: -1px; }
textarea { min-height: 70px; resize: vertical; }
input[type=checkbox] { width: 18px; height: 18px; }
/* Checkboxen, Optionsfelder, Schieberegler in der Logo-Farbe */
input[type=checkbox], input[type=radio], input[type=range], progress { accent-color: var(--brand); }
label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--text); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--brand); color: #fff; border: 1px solid var(--brand);
  border-radius: 6px; padding: 6px 13px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .btn { color: #10140f; } }
.btn:hover { filter: brightness(1.08); }
.btn-light { background: transparent; color: var(--brand); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-sm { padding: 3px 8px; font-size: 12px; font-weight: 500; }
.btn-big { padding: 11px 18px; font-size: 16px; }
.btn-icon { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px 5px; font-size: 15px; }
.btn-icon:hover { color: var(--danger); }
.btn-icon.btn-edit { display: inline-flex; vertical-align: middle; text-decoration: none; }
.btn-icon.btn-edit:hover { color: var(--brand); }
/* Datensatz in Bearbeitung: Formular und Tabellenzeile hervorheben */
.card-edit { border-color: var(--brand); box-shadow: inset 4px 0 0 var(--brand); }
.card-edit h2 { display: flex; align-items: center; gap: 6px; color: var(--brand); }
tr.row-edit td { background: var(--brand-soft) !important; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; align-items: end; }
.form-grid .wide { grid-column: 1 / -1; }
.inline-form { display: inline; }

/* ---------- Tabellen ---------- */
.table-wrap { overflow: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.table-wrap.tall { max-height: calc(100vh - 216px); }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td { padding: 4px 7px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--card); font-weight: 600; color: var(--muted); font-size: 11.5px; position: sticky; top: 0; z-index: 2; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--line-strong); }
thead tr.grp th { top: 0; text-align: center; border-bottom: 0; }
thead tr.grp + tr th { top: 23px; }
tbody tr:hover td { background: var(--brand-soft); }
tr.week td { background: var(--week); font-weight: 600; }
tr.today td { box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
tr.empty td { color: var(--muted); }
td.rem { max-width: 340px; min-width: 160px; white-space: normal; font-size: 12px; }
td.sticky, th.sticky { position: sticky; left: 0; background: var(--card); z-index: 1; }
th.sticky { z-index: 3; }
thead tr.sumrow th { top: 25px; background: var(--week); color: var(--text); font-weight: 700; font-size: 12.5px; box-shadow: inset 0 -2px 0 var(--line-strong); }
thead tr.sumrow th.pos { color: var(--ok); } thead tr.sumrow th.neg { color: var(--danger); }
tfoot td { font-weight: 650; background: var(--week); position: sticky; bottom: 0; }
.tbl-compact td, .tbl-compact th { padding: 3px 6px; }
/* Eiermengen: Gruppen (Abnehmer · Direkt · Total) mit Farbe, Trennlinien, gleiche Spaltenbreiten */
.grp-tbl, .em-tbl { table-layout: fixed; }
.grp-tbl thead th { height: 27px; box-sizing: border-box; padding: 4px 8px; }
.grp-tbl thead tr.grp th { top: 0; text-align: center; font-size: 12.5px; color: var(--text); }
.grp-tbl thead tr.cols th { top: 27px; }
.grp-tbl thead tr.sumrow th { top: 54px; }
.gc1 { --gc: var(--c1); } .gc2 { --gc: var(--c2); } .gc3 { --gc: var(--c3); } .gc4 { --gc: var(--c4); } .gc5 { --gc: var(--c5); } .gc6 { --gc: var(--c6); }
.grp-tbl col[class*=gc] { background: color-mix(in srgb, var(--gc) 5%, transparent); }
.grp-tbl th.g { border-left: 2px solid var(--line-strong); box-shadow: inset 0 3px 0 var(--gc, var(--line-strong)); background: color-mix(in srgb, var(--gc, var(--line)) 12%, var(--card)); }
.grp-tbl .gs { border-left: 2px solid var(--line-strong); }
.grp-tbl td { padding: 3px 8px; vertical-align: middle; }
.grp-tbl tbody tr:hover td { background: var(--brand-soft); }
.grp-tbl tr.week td { background: var(--week); }
.grp-tbl td.rem { white-space: normal; max-width: none; min-width: 0; overflow-wrap: anywhere; }
/* Eiermengen */
.em-tbl { min-width: 860px; }
.em-tbl col.c-w { width: 62px; } .em-tbl col.c-bis { width: 84px; }
.em-tbl td input { width: 100%; padding: 2px 6px; box-sizing: border-box; }
.em-tbl tr.future td { color: var(--muted); }
/* Journal: passt ohne Querscrollen in die Breite, Bemerkungen füllen den Rest */
.jr-tbl { width: 100%; }
.jr-tbl col { width: 58px; }
.jr-tbl col.c-dat { width: 96px; } .jr-tbl col.c-alt { width: 40px; } .jr-tbl col.c-zeit { width: 106px; } .jr-tbl col.c-wo { width: 52px; }
.jr-tbl col.c-aus { width: 90px; } .jr-tbl col.c-pct { width: 74px; } .jr-tbl col.c-temp { width: 42px; } .jr-tbl col.c-rem { width: auto; }
.jr-tag { min-width: 1202px; } .jr-wo { min-width: 1116px; }
.jr-tbl td, .jr-tbl thead th { padding-left: 6px; padding-right: 6px; }
/* Zahlen nie abkürzen; nur Texte (z.B. Auslauf) mit … */
.jr-tbl td:not(.num) { overflow: hidden; text-overflow: ellipsis; }
.jr-tbl td.rem { overflow: visible; text-overflow: clip; }
.tag-tbl td, .tag-tbl th { padding: 5px 6px; }
.tag-tbl td:first-child { white-space: nowrap; }
.tag-tbl th:nth-child(4), .tag-tbl td:nth-child(4) { border-left: 1px solid var(--line); }
.tag-info { display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.tag-info .muted { display: inline-block; min-width: 120px; }

/* ---------- Charts ---------- */
.chart { position: relative; height: 300px; }
.chart.small { height: 180px; }
.chart.tall { height: 420px; }
.chart-fs { position: absolute; top: 0; right: 0; opacity: .75; z-index: 3; width: 30px; height: 28px; border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--card); color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.chart-fs:hover { color: var(--brand); border-color: var(--brand); opacity: 1; }
.card.chart-full { position: fixed; inset: 0; z-index: 200; margin: 0 !important; border-radius: 0; padding: 14px 16px; overflow: auto;
  display: flex; flex-direction: column; background: var(--card); }
.card.chart-full .chart { flex: 1; height: auto !important; min-height: 300px; }
.card.chart-full .chart-fs { width: 38px; height: 34px; font-size: 18px; color: var(--text); opacity: 1; }
body.has-chart-full { overflow: hidden; }
.card:fullscreen { background: var(--card); }
.legend-note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.tabs a { padding: 4px 10px; border-radius: 14px; border: 1px solid var(--line-strong); text-decoration: none; color: var(--text); font-size: 12.5px; background: var(--card); }
.tabs a.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- Tageserfassung ---------- */
.day-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.day-nav .date-title { font-size: 18px; font-weight: 650; }
.day-pick input[type=date] { width: 150px; padding: 3px 6px; min-height: 0; }
.day-nav input[type=date] { padding: 6px; }
.egg-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.egg-totals div { background: var(--week); border-radius: 8px; padding: 6px 8px; text-align: center; }
.egg-totals b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.egg-totals span { font-size: 11.5px; color: var(--muted); }
.egg-totals .total { background: var(--brand-soft); }
.kanal-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kanal-pick input { display: none; }
.kanal-pick label { flex-direction: row; justify-content: center; padding: 9px 4px; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; color: var(--text); font-size: 14px; font-weight: 600; }
.kanal-pick input:checked + label { background: var(--brand); color: #fff; border-color: var(--brand); }
.egg-add { display: grid; grid-template-columns: minmax(0, 1fr) 96px 56px; gap: 8px; margin-top: 8px; align-items: end; }
.egg-add label { min-width: 0; position: relative; }
.egg-add input[data-sum] + span { position: absolute; right: 10px; bottom: 13px; pointer-events: none; }
/* Anzahl, Zeit und + auf einer Linie, gleich hoch */
.egg-add input, .egg-add .btn { width: 100%; height: 46px; box-sizing: border-box; margin: 0; }
.egg-add input[name=zeit] { font-size: 16px; padding: 6px 8px; -webkit-appearance: none; appearance: none; display: block; min-height: 46px; max-height: 46px; line-height: 32px; text-align: center; }
.egg-add input[name=zeit]::-webkit-date-and-time-value { text-align: center; margin: 0; }
.egg-add .btn { padding: 0; font-size: 22px; }
.egg-add input[name=anzahl] { font-size: 20px; padding: 6px 10px; }
.list { list-style: none; margin: 8px 0 0; padding: 0; }
.list li { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.list li .grow { flex: 1; min-width: 0; }
.list li:last-child { border-bottom: 0; }
.k-eico { color: var(--c1); } .k-direkt { color: var(--c2); } .k-boden { color: var(--c5); }

/* ---------- Auslauf-Monatsraster ---------- */
.aus-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.aus-month table { font-size: 11.5px; }
.aus-month td, .aus-month th { padding: 2px 4px; }
.aus-month td.c { text-align: center; font-weight: 650; width: 22px; }
.aus-month td.reason { font-size: 10.5px; color: var(--muted); }
.aus-month tr.we td:first-child { color: var(--danger); }

/* ---------- Login ---------- */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-box { width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.login-box h1 { text-align: center; }
.login-box.login-wide { max-width: 640px; }
.login-foot { text-align: center; margin: 16px 0 0; }
.login-box .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Responsiv ---------- */
@media (max-width: 1280px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span3 { grid-column: span 2; }
}
/* Tablet (Touch, z.B. iPad quer bis 1366 px) und schmale Fenster: zwei Kacheln nebeneinander */
@media (min-width: 801px) and (max-width: 1400px) and (pointer: coarse), (min-width: 801px) and (max-width: 1100px) {
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span3 { grid-column: span 2; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3.ll-grid { grid-template-columns: minmax(0, 1fr); }
  .ll-grid > .span2 { grid-column: auto; }
  input, select, textarea { font-size: 16px; padding: 8px 10px; }
  .btn { padding: 9px 14px; }
  .sidenav a { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 800px) {
  :root { --side: 0px; }
  body { font-size: 15px; }
  .nav-toggle { display: block; }
  .brand span, .user { display: none; }
  :root { --top: 66px; }
  .brand .logo { height: 46px; }
  .topbar { gap: 8px; padding: 0 12px; }
  .stallbar { padding: 0 8px; gap: 8px; }
  .stallbar .herd-age { display: none; }
  .stallbar select { max-width: 150px; font-size: 14px; padding: 5px; }
  .stall-tabs a, .stall-one { padding: 6px 12px; }
  .sidenav { width: 250px; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 30px rgba(0,0,0,.25); padding-bottom: 80px; }
  .sidenav a { padding: 10px 16px; font-size: 15px; }
  body.nav-open .sidenav { transform: none; }
  body.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; }
  .content { padding: calc(var(--top) + var(--stall) + 10px) 10px calc(20px + env(safe-area-inset-bottom)); }
  .g2, .g3, .g4, .g3.ll-grid { grid-template-columns: 1fr; }
  .span2, .span3 { grid-column: auto; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi .v { font-size: 19px; }
  .aus-grid { grid-template-columns: 1fr; }
  .chart { height: 250px; }
  .chart.tall { height: 320px; }
  input, select, textarea { font-size: 16px; padding: 9px 10px; }
  .btn { padding: 10px 14px; }
  .btn-sm { padding: 6px 10px; font-size: 13px; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottomnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; background: var(--card);
    border-top: 1px solid var(--line); z-index: 30; padding-bottom: env(safe-area-inset-bottom); }
  .bottomnav a { display: flex; flex-direction: column; align-items: center; padding: 6px 0 7px; font-size: 11px; color: var(--muted); text-decoration: none; }
  .bottomnav a span { display: flex; height: 24px; align-items: center; }
  .bottomnav a.active { color: var(--brand); font-weight: 600; }
  .table-wrap.tall { max-height: none; }
  .hide-m { display: none !important; }
  /* Journal am Handy: Spalten so breit wie der Inhalt, nichts abkürzen, seitlich wischen; Datum bleibt stehen */
  .jr-tbl { table-layout: auto; width: max-content; min-width: 100%; }
  .jr-tbl col { width: auto !important; }
  .jr-tbl td, .jr-tbl th { white-space: nowrap; overflow: visible !important; text-overflow: clip !important; }
  .jr-tbl td.rem { white-space: normal; min-width: 220px; max-width: 320px; }
  .jr-tbl td.sticky, .jr-tbl th.sticky { box-shadow: 1px 0 0 var(--line-strong); }
  .jr-tbl thead tr.grp th.sticky { z-index: 4; }
  /* Futterlieferungen am Handy: Werte einzeilig, Notiz mit Platz */
  .lf-tbl td, .lf-tbl th { white-space: nowrap; }
  .lf-tbl td.lf-notiz { white-space: normal; min-width: 200px; }
  /* Tageserfassung Handy: kompakter */
  .day-nav { gap: 6px; }
  .day-nav .date-title { font-size: 16px; }
  .egg-totals { gap: 6px; }
  .egg-totals div { padding: 5px 4px; }
  .egg-totals b { font-size: 17px; }
  .egg-add { grid-template-columns: minmax(0, 1fr) 88px 52px; gap: 6px; }
  .list li { padding: 3px 0; gap: 6px; }
  .list li input { padding: 4px 8px; height: 34px; width: 84px !important; }
  .list li .small.muted { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 801px) {
  .only-m { display: none !important; }
  /* Breite Ansicht: Navigation per ☰ einklappbar */
  .sidenav { transition: transform .2s; }
  .content { transition: margin-left .2s; }
  .stallbar { transition: left .2s; }
  body.nav-collapsed { --side: 0px; }
  body.nav-collapsed .sidenav { width: 210px; transform: translateX(-100%); }
}

/* ---------- Druck ---------- */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  :root { --bg: #fff; --card: #fff; --text: #000; --line: #bbb; --week: #eee; }
  .topbar, .stallbar, .sidenav, .bottomnav, .no-print, .flash, .btn, .tabs, form.filter { display: none !important; }
  .content { margin: 0; padding: 0; max-width: none; }
  body { font-size: 11px; background: #fff; }
  .card { border: 0; padding: 0; }
  .table-wrap { overflow: visible; max-height: none !important; border: 0; }
  th { position: static; }
  table { font-size: 10px; }
  .aus-grid { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .chart { height: 260px; }
  .print-break { page-break-before: always; }

  /* Auslaufjournal: 6 Monate kompakt auf einer A4-Seite quer */
  .page-auslauf { font-size: 9px; }
  .page-auslauf .head { margin-bottom: 2px; gap: 6px; }
  .page-auslauf .head h1 { font-size: 15px; }
  .page-auslauf .content > p.small { margin: 0 0 4px; font-size: 9px; }
  .page-auslauf .aus-grid { gap: 3px; page-break-inside: avoid; break-inside: avoid; }
  .page-auslauf .aus-month { overflow: visible; }
  .page-auslauf .aus-month h3 { font-size: 11px; margin: 0 0 2px; }
  .page-auslauf .aus-month table { font-size: 9.5px; line-height: 1.2; table-layout: fixed; width: 100%; }
  .page-auslauf .aus-month th:nth-child(1) { width: 34%; }
  .page-auslauf .aus-month th:nth-child(2), .page-auslauf .aus-month th:nth-child(3) { width: 11%; }
  .page-auslauf .aus-month td, .page-auslauf .aus-month th { padding: 1px 3px; border-bottom: .5px solid #ccc; }
  .page-auslauf .aus-month th { font-size: 8.5px; }
  .page-auslauf .aus-month td.c { width: 12px; }
  .page-auslauf .aus-month td.reason { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; width: 100%; }
  .page-auslauf .card.mt { margin-top: 5px; font-size: 8.5px; }
  .page-auslauf .card.mt p { margin: 0 0 1px; }
}