/* Farben aus "Farbcodes Oak Stables": Grün 36692e, Gold c39d00 / e1b741 / 937035, Hintergrund f8f8f8.
   Alle Farben stehen als Werte hier oben. Drei Stufen: hell (Standard), dunkel (automatisch nach Gerät oder per Wahl),
   Farbenblind-Modus (data-cvd="1", Blau/Orange nach Okabe/Ito statt Grün/Rot). Zustände tragen zusätzlich Symbole und Text, nie nur Farbe. */
@font-face { font-family: "Cinzel"; src: url("/fonts/cinzel.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
:root {
  color-scheme: light dark;
  --ink: #1b2219;
  --muted: #566153;
  --field: #2f6228;          /* Akzent als Text, Rahmen, Links */
  --heu: #8a5a00; --lage: #1f6f8b; --lage-bg: #e8f3f7;   /* Heu (gold, eckig) und Heulage (blau, rund, gestrichelt) */
  --heu-full: #f3e2b5; --lage-full: #bfe1ee;   /* Füllstand der Stapel im Lagerplan */
  --field-bg: #36692e;       /* Akzent als Fläche mit heller Schrift */
  --field-bg-dark: #2a5224;
  --on-field: #ffffff;
  --hay: #c39d00;
  --on-hay: #3a2f00;
  --gold-light: #e1b741;
  --bronze: #937035;
  --gold-line: linear-gradient(90deg, #937035, #c39d00 30%, #e1b741 55%, #c39d00 75%, #937035);
  --paper: #f4f5f2;
  --card: #ffffff;
  --line: #d6ddd4;
  --line-soft: rgba(30, 45, 28, .09);
  --fill: #e8ece6;           /* ruhige Flächen: Spalten, Umschalter */
  --fill-hover: #f3f6f1;
  --tint: #e6efe3;           /* getönte Fläche in Akzentfarbe */
  --input-bg: #ffffff;
  --input-line: #aab6a8;
  --alert: #b3361f;
  --alert-bg: #fbe9e5;
  --alert-soft: #fffafa;
  --warn-fg: #6e5100;
  --warn-bg: #fbf1cf;
  --warn-soft: #fffbec;
  --ok-soft: #7fae78;
  --gauge-bg: #dfe6cf;
  --gauge-ink: #2b3a26;
  --toast-bg: #1b2219;
  --toast-fg: #ffffff;
  --shadow: 0 1px 2px rgba(20, 30, 18, .06), 0 4px 14px rgba(20, 30, 18, .05);
  --shadow-lift: 0 10px 30px rgba(20, 30, 18, .22);
  --scrim: rgba(20, 30, 24, .5);
  --radius: 18px;
  --radius-sm: 12px;
  --brand-font: "Cinzel", "Trajan Pro", Georgia, serif;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Dunkel: automatisch nach Gerät, außer die Person hat „Hell“ gewählt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --heu: #e3b84d; --lage: #7cc4f2; --lage-bg: #17323f; --heu-full: #4a3a0e; --lage-full: #173a4a;
    --ink: #eef1ec; --muted: #a2ada0; --field: #8fcf84; --field-bg: #2f6228; --field-bg-dark: #3a7531; --on-field: #ffffff;
    --on-hay: #1d1700; --paper: #0f130e; --card: #1b201a; --line: #333b31; --line-soft: rgba(255, 255, 255, .08);
    --fill: #262d24; --fill-hover: #222820; --tint: #24361f; --input-bg: #12160f; --input-line: #4c5849;
    --alert: #ff8f7c; --alert-bg: #3e1d17; --alert-soft: #261715; --warn-fg: #f2cf63; --warn-bg: #3a2f0c; --warn-soft: #221d0b; --ok-soft: #4c7a46;
    --gauge-bg: #232b20; --gauge-ink: #cfd9cb; --toast-bg: #eef1ec; --toast-fg: #151a13;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5); --shadow-lift: 0 10px 30px rgba(0, 0, 0, .6); --scrim: rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  --heu: #e3b84d; --lage: #7cc4f2; --lage-bg: #17323f; --heu-full: #4a3a0e; --lage-full: #173a4a;
  --ink: #eef1ec; --muted: #a2ada0; --field: #8fcf84; --field-bg: #2f6228; --field-bg-dark: #3a7531; --on-field: #ffffff;
  --on-hay: #1d1700; --paper: #0f130e; --card: #1b201a; --line: #333b31; --line-soft: rgba(255, 255, 255, .08);
  --fill: #262d24; --fill-hover: #222820; --tint: #24361f; --input-bg: #12160f; --input-line: #4c5849;
  --alert: #ff8f7c; --alert-bg: #3e1d17; --alert-soft: #261715; --warn-fg: #f2cf63; --warn-bg: #3a2f0c; --warn-soft: #221d0b; --ok-soft: #4c7a46;
  --gauge-bg: #232b20; --gauge-ink: #cfd9cb; --toast-bg: #eef1ec; --toast-fg: #151a13;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5); --shadow-lift: 0 10px 30px rgba(0, 0, 0, .6); --scrim: rgba(0, 0, 0, .6);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* Farbenblind-Modus (hell): Blau für „gut“, Orange/Vermillon für „Achtung“ */
:root[data-cvd="1"] {
  --field: #00588a; --field-bg: #00588a; --field-bg-dark: #004469; --tint: #e1eef7; --ok-soft: #5d9cc7;
  --alert: #a63d00; --alert-bg: #fde8d6; --alert-soft: #fffaf5; --warn-fg: #5f4b00; --warn-bg: #fff0b8; --warn-soft: #fffbe0;
  --hay: #e69f00; --gauge-bg: #e2e9ef; --gauge-ink: #1c2b36; --line: #cfd8de; --fill: #e7ecf0; --fill-hover: #f2f6f9;
}
@media (prefers-color-scheme: dark) {
  :root[data-cvd="1"]:not([data-theme="light"]) {
    --field: #7cc4f2; --field-bg: #0b5f93; --field-bg-dark: #1470ab; --tint: #17314a; --ok-soft: #3b78a3;
    --alert: #ffa766; --alert-bg: #44250f; --alert-soft: #2a1b11; --warn-fg: #f5dd6b; --warn-bg: #3a320c; --warn-soft: #221f0b;
    --hay: #e69f00; --gauge-bg: #1d2630; --gauge-ink: #d5e1ea; --line: #34404a; --fill: #232d36; --fill-hover: #1f2830;
  }
}
:root[data-cvd="1"][data-theme="dark"] {
  --field: #7cc4f2; --field-bg: #0b5f93; --field-bg-dark: #1470ab; --tint: #17314a; --ok-soft: #3b78a3;
  --alert: #ffa766; --alert-bg: #44250f; --alert-soft: #2a1b11; --warn-fg: #f5dd6b; --warn-bg: #3a320c; --warn-soft: #221f0b;
  --hay: #e69f00; --gauge-bg: #1d2630; --gauge-ink: #d5e1ea; --line: #34404a; --fill: #232d36; --fill-hover: #1f2830;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 1rem/1.45 var(--font);
  min-height: 100vh; min-height: 100dvh;
}
#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: 1.35rem; font-weight: 700; }
.card > h2:first-child, .card > .row:first-child > h2 { color: var(--field); }
h2 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--hay); outline-offset: 2px; }

/* Rahmen */
.topbar {
  background: var(--field-bg); color: var(--on-field); position: relative;
  padding: calc(env(safe-area-inset-top) + .7rem) 1rem .8rem;
  display: flex; align-items: center; gap: .7rem;
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold-line); }
.topbar .mark { width: 3rem; height: auto; flex: 0 0 auto; }
.topbar h1 { font-family: var(--brand-font); font-weight: 600; letter-spacing: .02em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .account { color: var(--on-field); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .35rem .7rem; border: 1.5px solid rgba(255,255,255,.45); border-radius: 99px; }
.topbar .account[aria-current="page"] { background: var(--card); color: var(--field); }
.page { flex: 1; width: 100%; max-width: 40rem; margin: 0 auto; padding: 1rem 1rem 6rem; display: grid; gap: 1rem; align-content: start; }
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line);
  display: flex; padding-bottom: env(safe-area-inset-bottom);
}
/* Symbole (Linienzeichnungen) */
.icon { width: 1.35rem; height: 1.35rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabs a {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem .1rem .55rem; color: var(--muted); text-decoration: none;
  font-weight: 600; font-size: .72rem; border-top: 3px solid transparent; margin-top: -1px; position: relative;
}
.tabs .icon { width: 1.6rem; height: 1.6rem; }
.tabs a[aria-current="page"] { color: var(--field); border-top-color: var(--hay); }
.tabs .count { position: absolute; top: .25rem; right: calc(50% - 1.5rem); background: var(--alert); color: var(--on-field); font-size: .7rem; min-width: 1.15rem; height: 1.15rem; line-height: 1.15rem; border-radius: 99px; padding: 0 .3rem; }

/* Bausteine */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; display: grid; gap: .75rem; }
.card.flat { padding: 0; gap: 0; overflow: hidden; }
.row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.row.wrap { flex-wrap: wrap; }
.stack { display: grid; gap: .75rem; }

label { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; }
input, select, textarea {
  font: inherit; color: inherit; background: var(--card); width: 100%;
  border: 1.5px solid var(--input-line); border-radius: 10px; padding: .7rem .8rem; min-height: 2.9rem;
}
textarea { min-height: 4.5rem; resize: vertical; }
input:disabled, textarea:disabled, select:disabled { background: var(--paper); color: var(--muted); }
input[type="checkbox"], input[type="range"] { accent-color: var(--field); }
input[type="checkbox"] { width: 1.4rem; min-height: 1.4rem; height: 1.4rem; }
label.check { display: flex; align-items: center; gap: .6rem; font-weight: 500; }

button, .btn {
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: .6rem 1.1rem; border-radius: 10px; border: 1.5px solid transparent;
  background: var(--field-bg); color: var(--on-field);
}
@media (hover: hover) { button:hover, .btn:hover { background: var(--field-bg-dark); } }
button.secondary, .btn.secondary { background: var(--card); color: var(--field); border-color: var(--field); }
@media (hover: hover) { button.secondary:hover, .btn.secondary:hover { background: var(--tint); } }
button.danger { background: var(--card); color: var(--alert); border-color: var(--alert); }
@media (hover: hover) { button.danger:hover { background: var(--alert-bg); } }
button.link { background: none; color: var(--field); border: 0; min-height: 0; padding: .25rem 0; text-decoration: underline; font-weight: 600; }
button:disabled { opacity: .55; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.actions > * { flex: 1 1 auto; }

.error { background: var(--alert-bg); color: var(--alert); border-radius: 10px; padding: .65rem .8rem; font-weight: 600; }
.notice { background: var(--warn-bg); border-radius: 10px; padding: .65rem .8rem; }
.badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: .1rem .5rem; border-radius: 99px; background: var(--fill); color: var(--muted); }
.badge.warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge.off { background: var(--alert-bg); color: var(--alert); }
.badge.menge { display: inline-flex; align-items: center; gap: .25rem; background: var(--tint); color: var(--field); }
.badge.menge svg { width: 1em; height: 1em; }

/* Fahrzeuge */
.vehicle-grid { display: grid; gap: 1rem; }
.card.vehicle { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem 1rem; }
@media (hover: hover) { .card.vehicle:hover { border-color: var(--field); } }
.vehicle-main { display: grid; gap: .75rem; min-width: 0; color: inherit; text-decoration: none; }
/* Zwei Schnell-Kacheln rechts: Tanken und Wartung */
.vehicle-actions { display: grid; gap: .5rem; align-content: center; }
.quick { display: grid; place-items: center; gap: .1rem; width: 4.6rem; height: 4.6rem; min-height: 0; padding: .3rem; border-radius: 12px; border: 2px solid var(--field);
  background: var(--card); color: var(--field); font-size: .74rem; font-weight: 700; line-height: 1.1; }
@media (hover: hover) { .quick:hover { background: var(--tint); } }
.quick .icon { width: 1.7rem; height: 1.7rem; }
.more-fields { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem; }
.more-fields summary { cursor: pointer; font-weight: 600; color: var(--field); }
.more-fields[open] summary { margin-bottom: .6rem; }
.vehicle.archived { opacity: .7; }
.facts { display: grid; gap: .25rem; }
.entry.history { grid-template-columns: 3.6rem 1fr auto; }
.block { display: block; }
.btn-like a { font-weight: 600; color: var(--field); }
@media (min-width: 1024px) {
  .vehicle-grid { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }
  .facts { grid-template-columns: 1fr 1fr; }
}

/* Ställe */
.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.check input { width: auto; min-height: 0; }
a.card.barn { color: inherit; text-decoration: none; }
@media (hover: hover) { a.card.barn:hover { border-color: var(--field); } }
.barn.archived { opacity: .7; }
table.plan { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: .35rem; }
.plan th { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.plan td.plan-lane, .plan th.plan-lane { width: 3.4rem; text-align: center; color: var(--muted); font-weight: 700; }
.plan td.plan-lane { background: var(--fill); border-radius: 8px; }
.plan-tile { display: grid; justify-items: start; justify-content: stretch; gap: .1rem; width: 100%; min-height: 4.6rem; padding: .4rem .5rem; text-align: left; align-content: start; background: var(--card); color: var(--ink); border: 2px solid var(--field); border-radius: 10px; font-weight: 400; overflow-wrap: anywhere; }
.plan-tile.free { border-style: dashed; border-color: var(--line); background: var(--fill-hover); }
.plan-tile.blocked { border: 1px solid var(--line); background: var(--fill); color: var(--muted); }
.plan-tile:disabled { opacity: 1; }
.plan-no { font-size: .75rem; font-weight: 700; color: var(--muted); }
.plan-tile strong { font-size: .95rem; }
@media (min-width: 1024px) { .plan-tile { min-height: 5.2rem; } }

/* Aufgaben ziehen */
.task-card { -webkit-touch-callout: none; user-select: none; }
.task-card.dragging { opacity: .35; }
.drag-ghost { position: fixed; z-index: 50; pointer-events: none; margin: 0; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); transform: rotate(1.5deg); opacity: .96; }
.board.no-snap { scroll-snap-type: none; }
.board-col.drop { outline: 3px dashed var(--field); outline-offset: -3px; background: var(--tint); }

/* Tankanzeige */
.gauge-box { display: flex; gap: 1rem; align-items: flex-end; margin-top: .4rem; }
.gauge { position: relative; width: 8.5rem; height: 15rem; padding: .5rem 2.6rem .5rem .5rem; background: var(--gauge-bg); border: 3px solid var(--gauge-ink); border-radius: 10px; box-shadow: inset 0 0 0 2px var(--card); }
.gauge-bars { display: flex; flex-direction: column; gap: 3px; height: 100%; touch-action: none; cursor: pointer; user-select: none; }
.gauge-bar { flex: 1; width: var(--w, 100%); border: 2px solid var(--gauge-ink); border-radius: 3px; background: transparent; transition: background .08s; }
.gauge-bar.on { background: var(--field-bg); }
.gauge-bar.reserve.on { background: var(--alert); }
.gauge-bar.reserve { border-color: var(--alert); }
.gauge-scale span { position: absolute; right: .5rem; top: calc(.5rem + (15rem - 1rem - 6px) * var(--top) / 100); transform: translateY(-50%); font-weight: 700; font-size: .95rem; color: var(--gauge-ink); }
.gauge-scale span:first-child { transform: translateY(0); }
.gauge-scale span:last-child { transform: translateY(-100%); }
.gauge:focus-visible { outline: 3px solid var(--hay); outline-offset: 2px; }
.gauge-readout { font-size: 1.15rem; }
.label-text { display: block; font-weight: 600; }

/* PDF-Anzeige (Handbuch) */
.pdf-bar { display: flex; gap: .4rem; align-items: center; position: sticky; top: 0; z-index: 2; background: var(--paper); padding: .4rem 0; }
.pdf-bar button, .pdf-bar .btn { min-height: 2.6rem; padding: 0 .9rem; }
.pdf-pageno { display: flex; align-items: center; gap: .3rem; flex: 1; justify-content: center; white-space: nowrap; min-width: 0; }
.pdf-page { width: 3.6rem; padding-left: .3rem; padding-right: .3rem; text-align: center; }
.pdf-holder { overflow: auto; background: var(--fill); border: 1px solid var(--line); border-radius: var(--radius); height: calc(100vh - 17rem); min-height: 22rem; text-align: center; touch-action: pan-x pan-y pinch-zoom; }
.pdf-canvas { display: inline-block; background: #fff; max-width: none; }
@media (min-width: 1024px) { .pdf-holder { height: calc(100vh - 14rem); } }

/* Dateianzeige im Vollbild (iPhone-App vom Home-Bildschirm, datei.js) */
.overlay.viewer { align-items: stretch; justify-content: stretch; background: var(--paper); }
.viewer-box { display: flex; flex-direction: column; gap: .5rem; width: 100%; height: 100dvh; padding: calc(.5rem + env(safe-area-inset-top)) .75rem calc(.5rem + env(safe-area-inset-bottom)); background: var(--paper); }
.viewer-head { display: flex; align-items: center; gap: .5rem; }
.viewer-head button { min-height: 2.75rem; padding: 0 .9rem; }
.viewer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.viewer .pdf-holder { flex: 1; height: auto; min-height: 0; }
.viewer-image { flex: 1; min-height: 0; overflow: auto; text-align: center; }
.viewer-image img { max-width: 100%; height: auto; }
.viewer-other { display: grid; gap: .75rem; padding-top: 1rem; }

/* Stempeluhr */
.stamp { display: grid; justify-items: center; gap: 1.25rem; padding: 1.25rem 0 .5rem; text-align: center; }
.stamp-status { display: grid; gap: .25rem; }
.stamp-status .big { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.stamp-btn {
  width: min(68vw, 17rem); aspect-ratio: 1; border-radius: 50%; padding: 0;
  font-size: 1.7rem; letter-spacing: .01em;
  background: var(--field-bg); color: var(--on-field); border: 0;
  box-shadow: 0 0 0 .55rem var(--paper), 0 0 0 .75rem var(--field);
  transition: transform .12s ease, box-shadow .12s ease;
}
@media (hover: hover) { .stamp-btn:hover { background: var(--field-bg-dark); } }
.stamp-btn:active { transform: scale(.97); }
.stamp-btn.running {
  background: var(--card); color: var(--ink);
  box-shadow: 0 0 0 .55rem var(--paper), 0 0 0 .95rem var(--gold-light);
}
@media (hover: hover) { .stamp-btn.running:hover { background: var(--fill-hover); } }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips button { white-space: nowrap; min-height: 2.6rem; background: var(--card); color: var(--ink); border-color: var(--input-line); flex: 1 1 4rem; }
.chips button[aria-pressed="true"] { background: var(--field-bg); color: var(--on-field); border-color: var(--field); }
.panel { width: 100%; text-align: left; }

/* Listen */
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: .8rem 1rem; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.list li.bare { padding: 0; }
.shell { display: contents; }
.entry { display: grid; grid-template-columns: 5.2rem 1fr auto; gap: .6rem; align-items: center; width: 100%; background: none; color: inherit; border: 0; text-align: left; min-height: 0; padding: .8rem 1rem; font-weight: 400; border-radius: 0; }
@media (hover: hover) { button.entry:hover { background: var(--fill-hover); } }
.entry .day { font-weight: 700; }
.dayhead { display: flex; justify-content: space-between; gap: .6rem; padding: .55rem 1rem; background: var(--fill-hover); font-weight: 700; }
.daygroup + .daygroup { border-top: 1px solid var(--line); }
.entry.sub { grid-template-columns: 1fr auto; padding: .5rem 1rem .5rem 1.6rem; align-items: start; }
.entry.sub .change { display: block; margin-top: .15rem; }.entry .net { font-weight: 700; text-align: right; }
.total { display: flex; justify-content: space-between; padding: .9rem 1rem; background: var(--tint); font-weight: 700; }
.monthbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.monthbar button { min-width: 3rem; }
.monthbar .label { font-weight: 700; font-size: 1.1rem; text-align: center; flex: 1; }
.monthbar .pick { display: flex; gap: .4rem; justify-content: center; min-width: 0; }
.monthbar .pick select { width: auto; min-width: 0; flex: 0 1 auto; font-weight: 700; padding-left: .55rem; padding-right: .3rem; }
.empty { padding: 1.25rem 1rem; color: var(--muted); text-align: center; }

/* Dialog */
.overlay { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
.dialog {
  background: var(--card); width: 100%; max-width: 40rem; max-height: 92dvh; overflow: auto;
  border-radius: 18px 18px 0 0; padding: 1.1rem 1rem calc(1.1rem + env(safe-area-inset-bottom)); display: grid; gap: .9rem;
}
@media (min-width: 640px) { .overlay { align-items: center; } .dialog { border-radius: 18px; } }
.copybox { font-size: .85rem; word-break: break-all; background: var(--paper); border-radius: 10px; padding: .6rem .7rem; user-select: all; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(5rem + env(safe-area-inset-bottom));
  background: var(--toast-bg); color: var(--toast-fg); padding: .7rem 1rem; border-radius: 10px; font-weight: 600; z-index: 20; max-width: 90vw;
}

/* Formulare */
.fieldlabel { font-weight: 600; font-size: .9rem; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.chips.days button { flex: 1 1 0; min-width: 0; padding: .4rem 0; }
input[type="color"] { padding: .25rem; }
details summary { cursor: pointer; font-weight: 600; color: var(--field); }
details ol { padding-left: 1.2rem; margin: .5rem 0 0; display: grid; gap: .35rem; }
.list.tight li { padding: .75rem 0; }
.stack.tight { gap: .4rem; }

/* Urlaubskonto */
.big-figure { display: flex; align-items: baseline; gap: .5rem; }
.big-figure .num { font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--field); }
.big-figure span:last-child { font-weight: 600; }
.balance .lines { display: grid; gap: .3rem; border-top: 1px solid var(--line); padding-top: .65rem; }

/* Kalender */
.agenda { display: grid; gap: 1.1rem; }
.day-block { display: grid; gap: .45rem; scroll-margin-top: 1rem; }
.day-block h3 { font-size: .95rem; color: var(--muted); font-weight: 700; }
.day-block.today h3 { color: var(--field); }
.cal-item {
  --c: var(--field);
  display: grid; justify-content: stretch; align-items: start; gap: .1rem; text-align: left; width: 100%; min-height: 0; font-weight: 400;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-left: 5px solid var(--c);
  border-radius: 10px; padding: .6rem .75rem;
}
@media (hover: hover) { button.cal-item:hover { background: var(--fill-hover); } }
.cal-item .title { font-weight: 700; }
.cal-item.k-holiday { --c: var(--hay); background: var(--warn-soft); }
.cal-item.k-absence { --c: var(--muted); background: var(--fill-hover); }
.cal-item.pending { border-style: dashed; border-left-style: solid; }
.swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: var(--c); margin-right: .45rem; vertical-align: -.05rem; }

/* Aufgaben-Board */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 19rem); gap: .75rem; overflow-x: auto;
  scroll-snap-type: x mandatory; margin: 0 -1rem; padding: 0 1rem .5rem; scroll-padding: 0 1rem; }
.board-col { scroll-snap-align: start; background: var(--fill); border-radius: var(--radius); padding: .75rem; display: grid; gap: .6rem; align-content: start; }
.board-col h2 { font-size: 1rem; display: flex; align-items: baseline; gap: .3rem; }
.board-col h2 .link { margin-left: auto; min-height: 0; padding: 0; font-weight: 500; }
.board-col.done { background: var(--fill); }
.board-col.done .task-card .title { color: var(--muted); }
.task-card { display: grid; justify-content: stretch; align-items: start; gap: .45rem; text-align: left; width: 100%; min-height: 0; font-weight: 400; padding: .7rem .75rem;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
@media (hover: hover) { .task-card:hover { background: var(--fill-hover); } }
.task-card .title { font-weight: 700; }
.task-card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.avatars { margin-left: auto; display: flex; gap: .2rem; }
.avatar { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--field-bg); color: var(--on-field); font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.comment { background: var(--paper); border-radius: 10px; padding: .55rem .7rem; display: grid; gap: .2rem; }
.comment p { white-space: pre-wrap; }
.cal-item.k-task { --c: var(--alert); }
/* Besprechungen */
a.meeting-card { color: var(--ink); text-decoration: none; }
@media (hover: hover) { a.meeting-card:hover { background: var(--fill-hover); } }
.topic { padding: .8rem 0; }
.topic-text { white-space: pre-wrap; }
.done-text { text-decoration: line-through; color: var(--muted); }
input.narrow { width: 5.5rem; flex: 0 0 auto; }
/* Kostenliste im Aufgabendialog */
.card.flat.cost-box { padding: .4rem .9rem; display: grid; gap: .2rem; }
.cost-box .list li { padding: .6rem 0; }
.cost-box > .row { padding: .5rem 0 .2rem; border-top: 1px solid var(--line); }
/* Kalender: Ansicht wählen; Monatsraster am Handy mit Punkten */
.segments button { flex: 1; min-height: 0; padding: .55rem; border: 0; border-radius: 9px; background: none; color: var(--muted); font-weight: 700; }
.segments button[aria-pressed="true"] { background: var(--card); color: var(--field); box-shadow: 0 1px 2px rgba(29, 41, 35, .12); }
.cal-views { margin-bottom: .1rem; }
.cal-grid.mini { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cal-grid.mini .cal-head { background: var(--fill); padding: .3rem 0; font-size: .75rem; font-weight: 700; color: var(--muted); text-align: center; }
.cal-grid.mini .cal-cell { background: var(--card); color: var(--ink); min-height: 4.4rem; padding: .3rem .15rem; display: grid; gap: .2rem; align-content: start; justify-items: center; min-width: 0; border: 0; border-radius: 0; font-weight: 400; }
.cal-grid.mini .cal-cell.out { background: var(--fill-hover); }
.cal-grid.mini .cal-cell.today .cal-num { background: var(--field-bg); color: var(--on-field); border-radius: 99px; padding: 0 .4rem; }
.cal-grid.mini .cal-num { font-size: .85rem; font-weight: 700; }
.cal-dots { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.cal-dot { --c: var(--field); width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); }
.cal-dot.k-holiday { --c: var(--hay); }
.cal-dot.k-absence { --c: var(--muted); }
.cal-dot.k-task { --c: var(--alert); }
@media (min-width: 900px) { .board { margin: 0; padding: 0 0 .5rem; } }

/* Umschalter Board / Material */
.segments { display: flex; background: var(--fill); border-radius: 12px; padding: .25rem; gap: .25rem; }
.segments a { flex: 1 1 auto; text-align: center; padding: .55rem .5rem; border-radius: 9px; color: var(--muted); font-weight: 700; text-decoration: none; }
.segments a[aria-current="page"] { background: var(--card); color: var(--field); box-shadow: 0 1px 2px rgba(29, 41, 35, .12); }

/* Priorität und Material */
.warn-text { color: var(--warn-fg); font-weight: 600; }
.danger-text, .error-text { color: var(--alert); }
li.material { display: grid; gap: .4rem; padding: .75rem 1rem; }
.material-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; width: 100%; min-height: 0; padding: 0;
  background: none; color: var(--ink); border: 0; font-weight: 400; text-align: left; }
@media (hover: hover) { .material-head:hover { background: none; } }
.material-head:disabled { opacity: 1; cursor: default; }
.material-head .title { font-weight: 700; }
li.material.arrived .title { text-decoration: line-through; color: var(--muted); }
.chips.seg-small button { min-height: 2.2rem; padding: .3rem .7rem; font-size: .85rem; flex: 0 1 auto; }

.link-back { color: var(--field); font-weight: 600; text-decoration: none; }

/* Anmeldung */
.auth { flex: 1; display: grid; align-content: center; gap: 1.25rem; width: 100%; max-width: 24rem; margin: 0 auto; padding: 1.5rem 1.25rem; }
.auth .logo { width: min(100%, 18rem); height: auto; justify-self: center; }
.auth-head { text-align: center; display: grid; gap: .2rem; }
.auth-head h1 { font-family: var(--brand-font); color: var(--field); font-weight: 600; }
.auth-head::after { content: ""; display: block; height: 2px; width: 6rem; margin: .6rem auto 0; background: var(--gold-line); }

.audit { font-size: .875rem; }
.audit li { padding: .6rem 1rem; }

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

/* ---------- PC-Ansicht ---------- */
.sidebar { display: none; }
.only-desk { display: none !important; }
table.data { width: 100%; border-collapse: collapse; background: var(--card); font-size: .95rem; }
table.data th { text-align: left; font-size: .8rem; color: var(--muted); font-weight: 700; padding: .55rem .75rem; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
table.data td { padding: .55rem .75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.r, table.data th.r { text-align: right; }
@media (hover: hover) { table.data tbody tr:hover { background: var(--fill-hover); } }
table.data select, table.data input { min-height: 2.3rem; padding: .3rem .5rem; }
table.data .actions { flex-wrap: nowrap; justify-content: flex-end; }
table.data .actions > * { flex: 0 0 auto; }
table.data button { min-height: 2.3rem; padding: .3rem .8rem; }
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; }
.bill-cust { display: grid; gap: .6rem; }
.bill-head { display: flex; align-items: center; gap: .7rem; }
.bill-head h3 { flex: 1; margin: 0; }
.bill-head input { flex: 0 0 auto; }
table.bill-lines { width: 100%; border-collapse: collapse; }
.bill-lines th { text-align: left; font-size: .75rem; font-weight: 700; color: var(--muted); padding: .25rem .4rem; border-bottom: 1px solid var(--line); }
.bill-lines td { padding: .5rem .4rem; vertical-align: top; border-bottom: 1px solid var(--line); }
.bill-lines tbody tr:last-child td { border-bottom: 0; }
.bill-lines .r { text-align: right; }
.bill-lines .pos { width: 2rem; color: var(--muted); }
.bill-lines .cnt { width: 3.5rem; white-space: nowrap; }
.bill-lines .cost { white-space: nowrap; font-weight: 700; }
.bill-lines .ttl { font-weight: 600; }
.bill-filter button { flex: 0 1 auto; }
.toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.toolbar > input[type="search"] { flex: 1 1 16rem; width: auto; max-width: 28rem; }
.toolbar > select { width: auto; flex: 0 0 auto; }
.toolbar > h2 { margin-right: .5rem; }
.toolbar .chips { flex: 0 0 auto; }

@media (min-width: 1024px) {
  .only-desk { display: revert !important; }
  .only-mobile { display: none !important; }
  #app .shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
  .sidebar { display: flex; flex-direction: column; gap: .9rem; overflow-y: auto; grid-row: 1 / 3; background: var(--field-bg); color: var(--on-field);
    padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .side-brand { display: grid; justify-items: center; gap: .35rem; padding: .25rem .5rem .9rem; font-family: var(--brand-font); font-weight: 600; font-size: 1.15rem; letter-spacing: .04em; position: relative; }
  .side-brand img { width: 7.5rem; height: auto; }
  .side-brand::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: 0; height: 2px; background: var(--gold-line); }
  .topbar .mark { display: none; }
  .sidebar nav { display: grid; gap: .15rem; }
  .sidebar a { position: relative; display: flex; align-items: center; gap: .7rem; color: #e4ece2; text-decoration: none; font-weight: 600; padding: .5rem .75rem; border-radius: 9px; }
  @media (hover: hover) { .sidebar a:hover { background: rgba(255, 255, 255, .08); } }
  .sidebar a[aria-current="page"] { background: var(--card); color: var(--field); box-shadow: inset 4px 0 0 var(--hay); }
  .sidebar .count { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); }
  .side-head { font-size: .8rem; color: #b8c8b6; padding: 0 .75rem .2rem; }
  .side-foot { margin-top: auto; }
  .tabs { display: none; }
  .topbar { padding: 1rem 2rem; }
  .topbar .account { display: none; }
  .page { max-width: 76rem; padding: 1.5rem 2rem 3rem; margin: 0; }
  .page > .card, .page > form.card, .page > .monthbar, .page > .stamp, .page > p, .page > .actions, .page > label, .page > button, .page > a.btn, .page > .segments, .page > .sol-live { max-width: 46rem; }
  .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
  .cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
  /* Dialoge als Panel rechts, Liste bleibt sichtbar */
  .overlay { justify-content: flex-end; align-items: stretch; background: var(--scrim); }
  .dialog { max-width: 32rem; max-height: 100vh; height: 100vh; border-radius: 0; padding: 1.5rem; align-content: start; }
  .board { grid-auto-columns: minmax(16rem, 1fr); }
  .bill-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.25rem; align-items: start; }
  .bill-grid .card { max-width: none; }
  .cols .card, .cols-3 .card, .cols .monthbar { max-width: none; }
  .toolbar .monthbar { flex: 0 1 26rem; }
  .toolbar .actions { flex: 0 0 auto; }
  table.data tr.selected td { background: var(--tint); }
  .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .cal-head { background: var(--fill); padding: .4rem .5rem; font-size: .8rem; font-weight: 700; color: var(--muted); }
  .cal-cell { background: var(--card); min-height: 7.5rem; padding: .35rem; display: grid; gap: .25rem; align-content: start; min-width: 0; }
  .cal-cell.out { background: var(--fill-hover); }
  .cal-cell.today .cal-num { background: var(--field-bg); color: var(--on-field); border-radius: 99px; padding: 0 .45rem; }
  .cal-num { font-size: .85rem; font-weight: 700; justify-self: start; }
  .cal-head.today { color: var(--field); }
  .cal-grid.week .cal-cell { min-height: 16rem; }
  .toolbar .cal-views { flex: 0 0 auto; }
  .cal-cell .cal-item { padding: .25rem .4rem; border-left-width: 4px; border-radius: 6px; font-size: .8rem; gap: 0; }
  .cal-cell .cal-item .title, .cal-cell .cal-item .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cal-cell .cal-item .muted { font-size: .72rem; }
}

/* Einrichtungsseite (setup.php) */
.setup { max-width: 34rem; margin: 2rem auto; padding: 0 1rem; display: grid; gap: 1rem; }
.setup .logo { width: min(100%, 16rem); justify-self: center; }
.setup h1 { font-family: var(--brand-font); color: var(--field); text-align: center; }
.setup-checks { list-style: none; margin: 0; gap: .35rem; }
.setup-checks .ok { color: var(--field); }
.setup-checks .bad { color: var(--alert); font-weight: 600; }
.setup-error { color: var(--alert); font-weight: 600; }
.setup-link { overflow-wrap: anywhere; }

/* Stempeln: Feierabend-Knopf unter dem großen Knopf */
.stamp .wide { width: min(18rem, 100%); }
/* Zeiten: Soll/Ist, Abwesenheitstage, Pausenhinweis */
.balance .row { display: flex; justify-content: space-between; }
.balance .total-line { border-top: 1px solid var(--line); padding-top: .5rem; }
.plus { color: var(--field); }
.minus { color: var(--alert); }
li.absence .entry { background: var(--warn-soft); }
li.absence.sick .entry { background: var(--alert-bg); }
li.absence .badge { margin-right: .3rem; }
.warn-dot { color: var(--alert); font-weight: 700; }
/* Sollstunden pro Wochentag */
.targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .4rem .8rem; }
.target-row { display: grid; grid-template-columns: auto 2rem 1fr; align-items: center; gap: .5rem; }
.target-row input:not([type=checkbox]) { min-width: 0; }
/* Überstundenkonto */
.big-figure.minus .num { color: var(--alert); }
.balance .row .link { padding: 0; text-align: left; }
/* Menü unten mit sechs Einträgen (Leitung: "Mehr") */
/* Einstellungen als Liste wie in einem Telefon-Menü */
.menu-head { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: .5rem 0 -.25rem; }
.menu { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.menu a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .85rem 1rem; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }
.menu a:first-child { border-top: 0; }
@media (hover: hover) { .menu a:hover { background: var(--fill-hover); } }
.menu .icon { width: 1.6rem; height: 1.6rem; color: var(--field); }
.menu .t { font-weight: 700; }
.menu .s { color: var(--muted); font-size: .88rem; }
.menu .chev { color: var(--muted); font-size: 1.4rem; line-height: 1; }
.menu .warn-text { font-size: .88rem; }
.check-item { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; padding: .7rem 0; border-top: 1px solid var(--line); }
.check-item:first-child { border-top: 0; }
.check-item input[type=checkbox] { margin-top: .15rem; }
.audit-list li { display: grid; gap: .1rem; }

/* Startseite: Aufgabenliste */
/* Startseite: Karte mit offenen Aufgaben */
.tasks-card { gap: 1rem; }
.tasks-card ul { list-style: none; margin: 0; padding: 0; }
.tasks-head { display: flex; gap: .9rem; align-items: center; }
.tasks-count { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--field-bg); color: var(--on-field); font-size: 1.5rem; font-weight: 700; }
.tasks-card.late .tasks-count { background: var(--alert); }
.tasks-card.today .tasks-count { background: var(--hay); color: var(--on-hay); }
.tasks-count .icon { width: 1.7rem; height: 1.7rem; stroke-width: 2.4; }
.tasks-head h2 { color: var(--field); }
.tasks-summary { color: var(--muted); font-weight: 600; }
.tasks-summary.late { color: var(--alert); }
.task-tile { display: grid; gap: .45rem; padding: .75rem .9rem; color: inherit; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
@media (hover: hover) { .task-tile:hover { border-color: var(--field); } }
.task-title { font-weight: 700; overflow-wrap: anywhere; }
.task-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem .15rem .4rem; border-radius: 99px; background: var(--fill); color: var(--ink); font-size: .82rem; font-weight: 600; }
.chip .icon { width: 1rem; height: 1rem; }
.chip.off { background: var(--alert-bg); color: var(--alert); }
.chip.warn { background: var(--warn-bg); color: var(--warn-fg); }
.chip.ok { background: var(--tint); color: var(--field); }
.chip.menge { background: var(--tint); color: var(--field); }
.chip.mine { background: var(--field-bg); color: var(--on-field); }

/* ---------- Apple-Look: ruhige Flächen, weiche Kanten, große Ziele, Material-Leisten ---------- */
html { background: var(--paper); }
body { -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
h1, h2, h3 { letter-spacing: -.015em; }
h2 { font-size: 1.15rem; }
.card { border: 0; box-shadow: var(--shadow), 0 0 0 1px var(--line-soft); }
.card.flat { box-shadow: var(--shadow), 0 0 0 1px var(--line-soft); }
a { color: var(--field); }
:focus-visible { outline: 3px solid var(--field); outline-offset: 2px; border-radius: 6px; }
.gauge:focus-visible { border-radius: 10px; }

/* Eingaben: gefüllt, ohne harte Linie; Fokus zeigt einen Ring */
input, select, textarea { background: var(--input-bg); border: 1px solid var(--input-line); border-radius: var(--radius-sm); min-height: 3rem; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--field); box-shadow: 0 0 0 3px color-mix(in srgb, var(--field) 28%, transparent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }

/* Knöpfe: Hauptknopf gefüllt, zweiter Knopf getönt wie bei iOS */
button, .btn { border-radius: var(--radius-sm); min-height: 3rem; transition: background .15s, transform .12s, box-shadow .15s; }
button:active:not(:disabled), .btn:active { transform: scale(.98); }
button.secondary, .btn.secondary { background: var(--tint); color: var(--field); border-color: transparent; }
@media (hover: hover) { button.secondary:hover, .btn.secondary:hover { background: color-mix(in srgb, var(--tint) 80%, var(--field) 20%); } }
button.danger { background: var(--alert-bg); color: var(--alert); border-color: transparent; }
@media (hover: hover) { button.danger:hover { background: color-mix(in srgb, var(--alert-bg) 80%, var(--alert) 20%); } }
.quick { border-width: 1.5px; border-radius: 16px; background: var(--tint); }
@media (hover: hover) { .quick:hover { background: color-mix(in srgb, var(--tint) 80%, var(--field) 20%); } }
.chips button { border-radius: 99px; min-height: 2.75rem; }

/* Obere Leiste und Tab-Leiste */
.topbar { position: sticky; top: 0; z-index: 5; }
.tabs { background: color-mix(in srgb, var(--card) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line-soft); z-index: 5; }
.tabs a { border-top: 0; margin-top: 0; min-height: 3.4rem; justify-content: center; transition: color .15s; }
.tabs a .icon { transition: transform .15s; }
.tabs a[aria-current="page"] { color: var(--field); }
.tabs a[aria-current="page"]::before { content: ""; position: absolute; top: .3rem; width: 3rem; height: 1.9rem; border-radius: 99px; background: var(--tint); z-index: -1; }
.tabs a[aria-current="page"] .icon { stroke-width: 2.3; }

/* Listen und Menüs wie „Einstellungen“ auf dem iPhone */
.list li, .menu a { min-height: 3rem; }
.menu { border: 0; box-shadow: var(--shadow), 0 0 0 1px var(--line-soft); }
.menu .icon { background: var(--tint); border-radius: 9px; padding: .3rem; width: 2.1rem; height: 2.1rem; box-sizing: border-box; }
.segments { background: var(--fill); }
.segments a[aria-current="page"] { box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }

/* Dialog als Sheet mit Griff */
.dialog { border-radius: 24px 24px 0 0; box-shadow: var(--shadow-lift); }
.dialog::before { content: ""; justify-self: center; width: 2.4rem; height: .3rem; border-radius: 99px; background: var(--line); margin-bottom: -.2rem; }
@media (min-width: 640px) { .dialog { border-radius: 24px; } }
@media (min-width: 1024px) { .dialog { border-radius: 0; } .dialog::before { display: none; } }
.board-col { border-radius: var(--radius); }
.task-card, .task-tile { border-radius: var(--radius-sm); }
.cal-item { border-radius: 8px; }

/* Zustände nie nur mit Farbe: Symbol vor dem Text */
.badge, .chip.off, .chip.warn, .chip.ok { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; overflow-wrap: normal; }
.badge.off::before { content: "✕"; font-weight: 800; }
.badge.warn::before { content: "▲"; font-size: .7em; }
.badge.ok::before { content: "✓"; font-weight: 800; }
.plus::before { content: "▲ "; font-size: .65em; vertical-align: .1em; }
.minus::before { content: "▼ "; font-size: .65em; vertical-align: .1em; }
.error::before { content: "✕ "; font-weight: 800; }
.tasks-card.late .tasks-summary::before { content: "▲ "; font-size: .75em; }

/* Farbenblind-Modus: zusätzlich Muster und Linienformen */
:root[data-cvd="1"] .gauge-bar.reserve { border-style: dashed; }
:root[data-cvd="1"] .gauge-bar.reserve.on { background: repeating-linear-gradient(135deg, var(--alert) 0 5px, var(--card) 5px 8px); }
:root[data-cvd="1"] .cal-item.k-task { border-left-style: double; border-left-width: 7px; }
:root[data-cvd="1"] .cal-item.pending { border-style: dashed; }
:root[data-cvd="1"] .badge.off, :root[data-cvd="1"] .chip.off { text-decoration: underline wavy 1px; text-underline-offset: 3px; }

/* Wer mehr Kontrast eingestellt hat, bekommt kräftigere Linien */
@media (prefers-contrast: more) {
  :root { --line: #6f7b6c; --input-line: #4a5547; --muted: #3a4437; }
  .card, .menu { box-shadow: 0 0 0 2px var(--line); }
}
@media (forced-colors: active) {
  .card, .menu, .dialog { border: 1px solid CanvasText; }
  .tabs a[aria-current="page"]::before { display: none; }
}

/* Darstellung (Konto) */
.theme-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.theme-choice button[aria-pressed="true"] { background: var(--field-bg); color: var(--on-field); }
.swatches { display: flex; gap: .4rem; align-items: center; }
.swatches i { width: 1.1rem; height: 1.1rem; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px var(--line-soft); }
.notes { margin: .3rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.note-bereich { display: inline-block; padding: 0 .45rem; border-radius: 99px; font-size: .75rem; font-weight: 600; background: var(--tint); color: var(--field); }
.note-neu { margin-left: .4rem; padding: 0 .4rem; border-radius: 99px; font-size: .7rem; font-weight: 600; background: var(--warn-bg); color: var(--warn-fg); white-space: nowrap; }
.notes-bereich { margin-top: .35rem; }
.notes-bereich summary { cursor: pointer; padding: .3rem 0; font-weight: 500; }
.cal-item.k-service { --c: var(--bronze); }
.notice { display: grid; gap: .5rem; }

/* Fotos an Aufgaben */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.photo-thumb { padding: 0; min-height: 0; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--fill); border: 0; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-full { width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-sm); background: var(--fill); }

/* Wartungsplan */
.maint-row { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; font-weight: 400; cursor: pointer; min-height: 3rem; }
.maint-row input[type="checkbox"] { width: 1.6rem; height: 1.6rem; min-height: 1.6rem; margin-top: .1rem; flex: none; }
.maint-main { display: grid; gap: .1rem; min-width: 0; }
.maint-main .title { font-weight: 700; overflow-wrap: anywhere; }
.maint-head { padding: .6rem 1rem; background: var(--fill); font-weight: 700; font-size: .85rem; color: var(--muted); }
.maint-edit { padding: 0 1rem .6rem 3.4rem; }
.maint-bar { position: sticky; bottom: 4.8rem; display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--card); box-shadow: var(--shadow-lift), 0 0 0 1px var(--line-soft); border-radius: var(--radius); padding: .7rem 1rem; z-index: 4; }
@media (min-width: 1024px) { .maint-bar { bottom: 1rem; } }
.danger-link { color: var(--alert); }
.assign-title { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Feinschliff: Rückmeldung beim Tippen, Übergänge, PC-Kopf ---------- */
/* Hover-Effekte gelten nur mit Maus (oben in @media (hover: hover)), damit am Handy nach dem Tippen nichts hängen bleibt.
   Fürs Tippen gibt es stattdessen eine kurze Rückmeldung über :active. */
html { -webkit-tap-highlight-color: transparent; }
.menu a:active, button.entry:active, .task-tile:active, .task-card:active, a.card.barn:active, button.cal-item:active { background: var(--fill-hover); }
.tabs a:active .icon { transform: scale(.88); }
.cols, .cols-3 { display: grid; gap: 1rem; align-items: start; }
.monthbar button { font-size: 1.45rem; line-height: 1; padding-top: 0; padding-bottom: .15rem; }
.monthbar button.today { font-size: .95rem; min-width: 0; padding: .5rem .6rem; }
/* Am Handy passt „Heute“ nicht mehr in die Zeile: eigene Zeile darunter */
@media (max-width: 30rem) { .monthbar:has(.today) { flex-wrap: wrap; } .monthbar button.today { flex-basis: 100%; min-height: 2.6rem; } }

/* Zahl am Menüpunkt: am Handy und am PC dieselbe kleine Pille */
.tabs .count, .sidebar .count { color: var(--card); font-weight: 700; text-align: center; }
.sidebar .count { background: var(--alert); font-size: .72rem; min-width: 1.3rem; height: 1.3rem; line-height: 1.3rem; border-radius: 99px; padding: 0 .35rem; }

/* Aufgaben: Werkzeugleiste */
.task-actions > :first-child, .task-actions > .board-filter { flex: 1 1 100%; }
.task-actions > .secondary { flex: 1 1 0; }

/* Übergänge: neue Seite blendet kurz ein, Dialog fährt herein, Meldung schwebt hoch */
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(2.5rem); } }
@keyframes panel-in { from { transform: translateX(2.5rem); opacity: .4; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, .6rem); } }
@keyframes busy { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.page.enter, .auth.enter { animation: page-in .22s cubic-bezier(.2, .7, .3, 1); }
.overlay { animation: fade-in .18s ease-out; }
.dialog { animation: sheet-in .28s cubic-bezier(.2, .8, .2, 1); }
.toast { animation: toast-in .2s ease-out; box-shadow: var(--shadow-lift); }
/* Ladebalken, sobald eine Seite länger als 150 ms braucht */
html.busy body::after { content: ""; position: fixed; z-index: 30; top: env(safe-area-inset-top); left: 0; width: 40%; height: 3px; border-radius: 0 3px 3px 0;
  background: var(--hay); pointer-events: none; animation: busy 1s cubic-bezier(.4, 0, .2, 1) infinite; }

@media (min-width: 1024px) {
  /* Am PC trägt die grüne Seitenleiste die Marke, der Kopf ist ruhig und hell: großer Seitentitel statt zweiter grüner Fläche */
  .topbar { background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    color: var(--ink); padding: 1.6rem 2rem .5rem; }
  .topbar::after { display: none; }
  .topbar h1 { font-family: var(--font); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
  .page { padding-top: 1rem; }
  .dialog { animation-name: panel-in; animation-duration: .24s; }
  .page > .task-actions { max-width: none; }
  .task-actions > *, .task-actions > :first-child, .task-actions > .secondary { flex: 0 0 auto; }
  .task-actions > .board-filter { flex: 0 1 16rem; width: auto; margin-left: auto; }
}
/* Stallplan als Raster: Boxen | Gasse | Boxen, Bausteine über mehrere Zeilen, Bearbeiten per Ziehen */
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) 3.4rem minmax(0, 1fr); gap: .35rem; }
.plan-head { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; text-align: center; font-weight: 700; }
.plan-grid .plan-lane { display: grid; place-items: center; background: var(--fill); border-radius: 8px; color: var(--muted); font-weight: 700; }
.plan-grid .plan-tile { height: 100%; position: relative; z-index: 1; }
.plan-tile:disabled { cursor: default; }
.plan-tile.k-gang, .plan-tile.k-leer { border: 1px solid var(--line); background: var(--fill); color: var(--muted); }
.plan-tile.k-gang { background: repeating-linear-gradient(135deg, var(--fill), var(--fill) 8px, var(--card) 8px, var(--card) 16px); }
.plan-tile.k-fenster, .plan-tile.k-paddock { border-width: 3px; }
.plan-kind { font-weight: 400; }
.plan-horse { display: grid; gap: 0; }
.plan-horse + .plan-horse { border-top: 1px solid var(--line); padding-top: .2rem; margin-top: .15rem; }
.plan-slot { min-height: 4.6rem; border: 2px dashed var(--line); border-radius: 10px; background: transparent; color: var(--muted); font-size: 1.3rem; font-weight: 400; }
.plan-slot.drop { position: relative; z-index: 2; border-color: var(--field); background: var(--tint); }
.plan-grid.editing .plan-tile { cursor: grab; touch-action: pan-y; }
.plan-tile.dragging, .plan-chip.dragging { opacity: .35; }
.plan-palette { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem 0; background: var(--paper); }
.plan-chip { display: grid; gap: 0; text-align: left; padding: .4rem .6rem; background: var(--card); color: var(--ink); border: 2px solid var(--field); border-radius: 10px; font-weight: 400; cursor: grab; touch-action: pan-y; }
.plan-chip.k-gang, .plan-chip.k-leer { border-color: var(--line); }
@media (max-width: 600px) {
  .plan-grid { grid-template-columns: minmax(0, 1fr) 2.2rem minmax(0, 1fr); }
  .plan-palette { flex-wrap: nowrap; overflow-x: auto; margin: 0 -1rem; padding: .4rem 1rem; }
  .plan-chip { flex: none; padding: .3rem .5rem; font-size: .9rem; touch-action: pan-x; }
}

/* Tag/Nacht-Umschalter in der Kopfzeile */
.topbar .theme-toggle, .topbar .help-btn { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; margin-right: .5rem; background: transparent; color: var(--on-field); border: 1.5px solid rgba(255,255,255,.45); border-radius: 99px; }
.topbar .theme-toggle svg, .topbar .help-btn svg { width: 1.2rem; height: 1.2rem; }
/* Rund statt oval (Knöpfe haben sonst mindestens 3rem Höhe) */
.topbar .theme-toggle, .topbar .help-btn { min-height: 0; }
/* Am PC ist der Kopf hell: Umschalter in Schriftfarbe statt weiß */
@media (min-width: 1024px) {
  .topbar .theme-toggle, .topbar .help-btn { color: var(--ink); border-color: var(--line); }
  @media (hover: hover) { .topbar .theme-toggle:hover, .topbar .help-btn:hover { background: var(--fill); } }
}

/* Hilfe: Themen als aufklappbare Karten */
.help-topic summary { display: flex; flex-direction: column; gap: .15rem; cursor: pointer; }
.help-topic ol { margin: .6rem 0; padding-left: 1.3rem; }
.help-topic li + li { margin-top: .3rem; }

/* Nachstreuen: Schaufel-Buttons an der Box, Badge, Stepper, Verbrauch */
.plan-cell { display: flex; flex-direction: column; gap: .25rem; min-height: 0; }
.plan-grid .plan-cell .plan-tile { flex: 1 1 auto; height: auto; }
.scoop-bar { display: flex; gap: .25rem; }
.scoop-btn { flex: 1 1 0; min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: .15rem; padding: 0 .2rem; background: var(--card); color: var(--ink); border: 2px solid var(--field); border-radius: 10px; font-weight: 700; touch-action: manipulation; }
.scoop-btn .icon { width: 1.5rem; height: 1.5rem; }
.scoop-btn:active { background: var(--tint); }
.scoop-btn.scoop-undo { flex: 0 0 2.75rem; border-color: var(--line); color: var(--muted); font-size: 1.3rem; }
.scoop-btn[hidden] { display: none; }
.scoop-badge { position: absolute; top: .3rem; right: .3rem; display: inline-flex; align-items: center; gap: .15rem; padding: .05rem .45rem; border-radius: 99px; background: var(--field-bg); color: var(--on-field); font-weight: 700; font-size: .9rem; }
.scoop-badge .icon { width: 1rem; height: 1rem; }
.scoop-badge[hidden] { display: none; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.stepper button { min-width: 3rem; min-height: 3rem; font-size: 1.4rem; }
.stepper-text { flex: 1; text-align: center; font-size: 1.15rem; }
.streu-total { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.big { font-size: 1.6rem; font-weight: 700; }
.streu-latest { padding: .75rem; border: 2px solid var(--field); border-radius: 10px; background: var(--tint); }
.section-title { margin-top: 1rem; }
.period { align-items: center; }
.table-wrap { overflow-x: auto; }
.wide-left { display: block; width: 100%; text-align: left; font-weight: 400; text-decoration: none; color: var(--ink); }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 9rem; padding-top: .5rem; }
.bar { flex: 1 1 0; min-width: 0; max-width: 2.5rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.bar-fill { display: block; background: var(--field); border-radius: 3px 3px 0 0; min-height: 2px; }
.bar-label { font-size: .6rem; color: var(--muted); text-align: center; overflow: hidden; height: 1rem; line-height: 1rem; }
@media (hover: hover) { .scoop-btn:hover { background: var(--tint); color: var(--ink); } .scoop-btn.scoop-undo:hover { color: var(--alert); } }
.stepper button:disabled { opacity: .4; }
.scoop-badge.inline { position: static; }

/* Heu: Buttons an der Bedarfsstelle, Lager, Reiter im Stallmanagement */
.heu-bar { display: flex; flex-direction: column; gap: .5rem; }
.heu-bar.two { flex-direction: row; }
.heu-sort { position: relative; flex: 1 1 0; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.heu-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.5rem; padding: 0 .75rem; background: var(--card); color: var(--ink); border: 2px solid var(--heu); border-radius: 12px; font-weight: 700; font-size: 1rem; touch-action: manipulation; }
.heu-btn .icon { width: 2rem; height: 2rem; flex: none; color: var(--heu); }
.heu-btn.lage { border-color: var(--lage); border-style: dashed; background: var(--lage-bg); }
.heu-btn.lage .icon { color: var(--lage); }
.heu-btn:active { background: var(--tint); }
.heu-plus { margin-left: auto; font-size: .85rem; color: var(--muted); }
.heu-badge { position: absolute; top: -.45rem; right: -.2rem; min-width: 1.6rem; text-align: center; padding: .05rem .45rem; border-radius: 99px; background: var(--field-bg); color: var(--on-field); font-weight: 700; font-size: .95rem; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.heu-badge[hidden], .heu-undo[hidden] { display: none; }
.heu-undo { min-height: 2.75rem; background: var(--card); color: var(--muted); border: 2px solid var(--line); border-radius: 10px; font-size: 1.3rem; font-weight: 700; touch-action: manipulation; }
.heu-quick-group { display: flex; flex-direction: column; gap: .6rem; padding-top: .9rem; border-top: 2px solid var(--line); }
.heu-quick-group h3 { margin: 0; font-size: 1.15rem; color: var(--field); }
.heu-quick-row { display: flex; flex-direction: column; gap: .3rem; }
.heu-quick-spot { font-size: .9rem; font-weight: 600; color: var(--muted); }
.badge.heu-feed { display: inline-flex; align-items: center; gap: .2rem; border-color: var(--lage); color: var(--lage); background: var(--lage-bg); }
.badge.heu-feed .icon { width: .9rem; height: .9rem; }
.heu-ico .icon { width: 1.2rem; height: 1.2rem; vertical-align: -.2em; color: var(--heu); }
.heu-total.lage .heu-ico .icon, .heu-block.lage .heu-ico .icon { color: var(--lage); }
.meter { flex: 1 1 auto; height: .9rem; border-radius: 99px; background: var(--tint); border: 1px solid var(--line); overflow: hidden; min-width: 4rem; }
.meter-fill { display: block; height: 100%; background: var(--heu); }
.heu-total.lage .meter-fill, .heu-block.lage .meter-fill { background: var(--lage); }
.heu-block { padding: .75rem; border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: .5rem; }
.heu-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.heu-rows li { display: flex; align-items: center; gap: .5rem; }
.heu-rowno { flex: 0 0 4.2rem; font-size: .9rem; }
.heu-rowval { flex: 0 0 3.6rem; text-align: right; font-size: .9rem; font-variant-numeric: tabular-nums; }
.heu-rows-edit input { width: 4.5rem; }
.chips a.chip-link { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 2.2rem; padding: .3rem .9rem; font-size: .9rem; flex: 0 1 auto; border-radius: 99px; background: var(--card); color: var(--ink); border: 1px solid var(--input-line); text-decoration: none; font-weight: 600; }
.chips a.chip-link[aria-current="page"] { background: var(--field-bg); color: var(--on-field); border-color: var(--field); }

/* Boxenkachel: auf dem PC stehen die Nachstreu-Buttons rechts in der Kachel, Badge oben rechts darüber */
@media (hover: hover) { .plan-tile:hover:not(:disabled) { background: var(--fill-hover); color: var(--ink); } }
@media (min-width: 1024px) {
  .plan-cell { position: relative; }
  .plan-cell .plan-tile { padding-right: 11rem; }
  .plan-cell .scoop-bar { position: absolute; right: .5rem; bottom: .45rem; z-index: 2; }
  .plan-cell .scoop-btn { flex: 0 0 3.4rem; }
  .plan-cell .scoop-btn.scoop-undo { flex: 0 0 2.75rem; }
}
.plan-tile.k-notbox { border-color: var(--warn-fg); }

/* Felder: Karte (Leaflet) in eigener Ebene, damit Dialoge darüber liegen; Hinweise; Maßnahmen-Knöpfe */
.felder-map { height: 18rem; isolation: isolate; z-index: 0; }
.felder-map .leaflet-container, .felder-map.leaflet-container { font: inherit; }
@media (min-width: 1024px) { .felder-map { height: 26rem; } }
/* Anstehende Düngungen (Felder): geplant und laufend. Fläche groß, Zahlen als Kacheln, ein Abschnitt je Ladung, breites „+“ für den Daumen */
.auftrag { gap: .85rem; border-left: 5px solid var(--field); }
.auftrag.geplant { border-left-color: var(--hay); }
.auftrag-kopf { display: grid; gap: .15rem; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
@media (hover: hover) { a.auftrag-kopf:hover .auftrag-titel { color: var(--field); } }
a.auftrag-kopf:focus-visible .auftrag-titel { color: var(--field); }
.auftrag-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--field); }
.auftrag.geplant .auftrag-status { color: var(--warn-fg); }
.auftrag-status svg, .auftrag-meta svg, .auftrag-hinweis svg { width: 1rem; height: 1rem; flex: none; }
.auftrag-titel { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.auftrag-pfeil { color: var(--muted); font-size: 1.6rem; font-weight: 400; }
.auftrag-sub { color: var(--muted); font-size: .9rem; }
.auftrag-meta { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .85rem; margin: 0; }
.auftrag-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: .5rem; }
.auftrag-zahl { display: grid; gap: .1rem; background: var(--fill); border-radius: var(--radius-sm); padding: .55rem .7rem; }
.auftrag-zahl strong { font-size: 1.15rem; }
.auftrag-zahl span { font-size: .75rem; color: var(--muted); }
.auftrag-hinweis { display: flex; align-items: flex-start; gap: .5rem; margin: 0; padding: .6rem .75rem; border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn-fg); font-weight: 600; }
.auftrag-hinweis.leise { background: none; padding: 0; font-weight: 400; font-size: .85rem; }
.auftrag-hinweis svg { margin-top: .15rem; }
.auftrag-los { width: 100%; min-height: 3.25rem; font-size: 1.05rem; }
.ladungen { display: flex; gap: 4px; height: .75rem; }
.ladungen span { position: relative; flex: 1 1 0; overflow: hidden; border-radius: 99px; background: var(--fill); }
.ladungen i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--field-bg); border-radius: inherit; transition: width .25s ease; }
.zaehler { display: grid; grid-template-columns: 3.5rem 1fr minmax(7rem, 38%); align-items: center; gap: .75rem; }
.zaehler button { min-height: 3.75rem; padding: 0 .5rem; font-size: 1.25rem; }
.zaehler-stand { display: grid; justify-items: center; text-align: center; min-width: 0; white-space: nowrap; }
.ladung-zaehler > .auftrag-sub { text-align: center; }
.zaehler button { white-space: nowrap; }
.zaehler-stand strong { font-size: 2.1rem; line-height: 1.05; }
.zaehler-stand > span:first-of-type { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* Düngung als Aufgabe auf der Startseite: Kachel und Zähler in einem Rahmen, Zählen ohne die Aufgabe zu öffnen */
li.task-felder { display: grid; gap: .5rem; padding-bottom: .8rem; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--field); border-radius: var(--radius-sm); }
li.task-felder .task-tile { border: 0; background: none; }
li.task-felder .ladung-zaehler { padding: 0 .75rem; }
/* Kompakt (Startseite, geplante Karte): schmalere Spalten, damit es auch auf kleinen Handys (320 px) in eine Zeile passt */
.ladung-zaehler.kompakt .zaehler { grid-template-columns: 3rem minmax(0, 1fr) minmax(5.75rem, 40%); gap: .5rem; }
/* Sehr schmale Handys: nur „+“ (Beschriftung bleibt für Bildschirmleser), Stand etwas kleiner */
@media (max-width: 360px) {
  .plus-wort { display: none; }
  .zaehler, .ladung-zaehler.kompakt .zaehler { grid-template-columns: 3.25rem minmax(0, 1fr) 4.5rem; }
  .zaehler button { font-size: 1.6rem; }
  .zaehler-stand strong, .ladung-zaehler.kompakt .zaehler-stand strong { font-size: 1.7rem; }
}
.ladung-zaehler.kompakt .zaehler button { min-height: 3.25rem; font-size: 1.1rem; }
.ladung-zaehler.kompakt .zaehler-stand strong { font-size: 1.8rem; }
.card.warn { background: var(--warn-soft); border-color: var(--warn-bg); color: var(--warn-fg); font-weight: 600; }
a.felder-item { color: inherit; text-decoration: none; }
a.felder-item.archived { opacity: .7; }
.felder-typen button { flex: 1 1 8rem; }
.felder-map .leaflet-control-attribution { font-size: .65rem; line-height: 1.25; }
.felder-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .2rem .8rem; flex: 0 1 auto; }
.felder-list li.row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.wrap-any { overflow-wrap: anywhere; }
@media (min-width: 1024px) { .page > .felder-body { max-width: 46rem; } }
/* Heu: Ballen aus der Ernte zum Ziehen; Block oder Reihe als Ablageziel */
.lager-grid.pick .lager-tile { cursor: pointer; touch-action: manipulation; }
.lager-grid.pick .lager-tile.off { opacity: .4; }
.lager-grid.pick .lager-tile.picked { background: var(--field-bg); color: var(--on-field); border-color: var(--field-bg); border-style: solid; }
.lager-grid.pick .lager-tile.picked .lager-label, .lager-grid.pick .lager-tile.picked .num { color: var(--on-field); }
.heu-dist li input[type=number] { width: 5rem; flex: none; margin-left: auto; }
.heu-dist li > span { min-width: 0; }
.heu-fold { min-width: 0; max-width: 100%; }
.heu-fold .lager-wrap { max-width: 100%; }
.heu-fold > summary { cursor: pointer; font-weight: 700; padding: .25rem 0; }
.heu-fold > summary .muted { font-weight: 400; }
.heu-fold[open] > summary { margin-bottom: .4rem; }
.two > label { min-width: 0; }
.two input[type=date] { width: 100%; min-width: 0; }
/* iOS Safari: Datums- und Zeitfelder haben sonst eine feste Mindestbreite und ragen in die Nachbarspalte; leer sind sie zudem höher als andere Felder */
input[type=date], input[type=time], input[type=datetime-local], input[type=month] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block; }
input::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
.task-meta { border-top: 1px solid var(--line); padding-top: .6rem; display: grid; gap: .15rem; }
.task-meta p { margin: 0; }
.heu-incoming { cursor: grab; touch-action: pan-y; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
[data-drop].drop { outline: 2px dashed var(--field); outline-offset: 2px; background: var(--tint); }
/* Felder: Tabelle mit sortierbaren Spalten, Maßnahmen-Banner, Teilflächen */
.th-sort { background: none; border: 0; color: inherit; font: inherit; font-weight: 700; padding: 0; min-height: 0; cursor: pointer; text-align: left; }
.felder-table td { vertical-align: top; }
.felder-banners { display: flex; flex-wrap: wrap; gap: .25rem; }
.badge.art-duengung { background: var(--warn-bg); color: var(--warn-fg); }
.badge.art-schnitt { background: var(--tint); color: var(--field); }
.badge.art-ernte { background: var(--field-bg); color: var(--on-field); }
.badge.art-allgemein { background: var(--fill); color: var(--ink); }
.felder-fbrow { display: grid; grid-template-columns: 9rem auto; justify-content: start; gap: .3rem .75rem; align-items: end; padding: .5rem 0; border-top: 1px solid var(--line); }
.felder-fbrow > span:first-child { grid-column: 1 / -1; overflow-wrap: anywhere; }
.felder-teil { font-size: .8rem; }
.felder-map .leaflet-control-layers { font: inherit; font-size: .85rem; color: #1b2219; }
.felder-map .leaflet-control-layers label { display: flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .85rem; margin: .1rem 0; }
.felder-map .leaflet-control-layers input { width: auto; min-height: 0; height: auto; margin: 0; padding: 0; accent-color: #2f6228; }
/* Handy: Tabellenzeilen als Karten, Spaltenköpfe als Sortierknöpfe */
@media (max-width: 1023px) {
  .table-wrap:has(.felder-table) { border: 0; overflow: visible; }
  .felder-table, .felder-table tbody, .felder-table tfoot { display: block; }
  .felder-table thead tr { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
  .felder-table thead th { padding: 0; border: 0; }
  .felder-table thead .th-sort { padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 99px; background: var(--card); font-size: .8rem; }
  .felder-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: .6rem; }
  .felder-table tbody td { padding: 0; border: 0; }
  .felder-table tbody td::before { content: attr(data-label); display: block; font-size: .72rem; color: var(--muted); font-weight: 600; }
  .felder-table tbody td:first-child, .felder-table tbody td:nth-child(n+5) { grid-column: 1 / -1; }
  .felder-table tbody td:first-child::before { content: none; }
  .felder-table tfoot tr { display: flex; justify-content: space-between; padding: 0 .25rem; }
  .felder-table tfoot td { border: 0; padding: 0; }
  .felder-table tfoot td:empty { display: none; }
}
/* Karten in Rastern dürfen schmaler als ihr Inhalt werden (Diagramme mit vielen Balken liefen sonst aus der Karte) */
.vehicle-grid > * { min-width: 0; }
.bars { min-width: 0; overflow: hidden; }
.bar-label { white-space: nowrap; overflow: visible; display: flex; justify-content: center; }
/* Teilfläche einzeichnen */
.felder-split { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; position: sticky; top: .5rem; z-index: 5; }
.felder-split > span { flex: 1 1 14rem; }
.felder-drawing, .felder-drawing .leaflet-interactive { cursor: crosshair !important; }
.felder-fbactions { display: flex; flex-wrap: wrap; gap: .2rem .8rem; grid-column: 1 / -1; }
/* Heulager: Lagerplan */
.lager-wrap { overflow-x: auto; padding-bottom: .2rem; }
.lager-grid { display: grid; gap: .3rem; grid-auto-rows: minmax(4.2rem, auto); min-width: min-content; }
.lager-tile { display: grid; align-content: start; gap: .15rem; min-height: 4.2rem; padding: .35rem .45rem; text-align: left; background: var(--card); color: var(--ink); border: 2px solid var(--heu); border-radius: 10px; font-weight: 400; }
.lager-tile.lage { border-color: var(--lage); background: var(--lage-bg); border-style: dashed; }
.lager-tile.k-gang { border: 1px solid var(--line); background: repeating-linear-gradient(135deg, var(--fill), var(--fill) 8px, var(--card) 8px, var(--card) 16px); place-items: center; }
.lager-tile:disabled { opacity: 1; cursor: default; }
.lager-tile { min-width: 0; overflow: hidden; }
.lager-tile > * { min-width: 0; white-space: nowrap; overflow: hidden; }
/* Schrift wächst mit der Kachel (--cell setzt der Plan je nach Bildschirmbreite), damit Nummer und Bestand immer hineinpassen */
.lager-tile .lager-label { display: flex; align-items: center; gap: .25rem; font-size: clamp(.6rem, calc(var(--cell, 4.2rem) * .19), .85rem); font-weight: 700; color: var(--muted); }
.lager-tile .num { font-size: clamp(.62rem, calc(var(--cell, 4.2rem) * .21), 1rem); }
.lager-tile .meter { height: .35rem; min-width: 0; width: 100%; }
.lager-tile.lage .meter-fill { background: var(--lage); }
.lager-tile.heu .meter-fill { background: var(--heu); }
/* Füllstand: der Stapel füllt sich von unten (leer = hell mit gestricheltem Rand, voll = ganz gefärbt) */
.lager-tile.heu { background: linear-gradient(to top, var(--heu-full) var(--pct, 0%), var(--card) var(--pct, 0%)); }
.lager-tile.lage { background: linear-gradient(to top, var(--lage-full) var(--pct, 0%), var(--lage-bg) var(--pct, 0%)); }
.lager-tile.heu.empty { border-style: dashed; }
.lager-tile.lage.empty { border-style: dotted; }
.lager-tile.full { border-width: 3px; }
.lager-tile.full .num { font-weight: 800; }
.lager-slot { min-height: 4.2rem; border: 2px dashed var(--line); border-radius: 10px; background: transparent; color: var(--muted); font-size: 1.2rem; font-weight: 400; padding: 0; }
.lager-slot.edge { opacity: .55; }
.lager-slot.drop, .lager-tile.drop { border-color: var(--field); background: var(--tint); opacity: 1; }
.lager-grid.editing .lager-tile { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }

/* Fütterung */
.feed-horse { align-content: start; gap: .1rem; width: 100%; text-align: left; }
.feed-edit { justify-content: start; text-align: left; background: transparent; color: var(--ink); border: 0; padding: .2rem 0; font-weight: 400; min-height: 0; justify-items: start; }
.feed-line { font-size: .95rem; }
.feed-horse.away > :not(.feed-banner):not(.feed-name) { opacity: .55; }
.feed-banner { display: block; width: 100%; background: var(--alert-bg); color: var(--alert); font-weight: 700; font-size: .8rem; padding: .15rem .4rem; border-radius: 6px; }
.feed-row { display: grid; grid-template-columns: minmax(0, 1fr) 5rem auto auto; gap: .4rem; align-items: center; }
.feed-table tr.away td { opacity: .75; }
.feed-table .badge { margin-right: .3rem; }
/* Felder: Teilen auf der Karte – Griffe zum Ziehen (groß genug für den Finger) und Wahl des Teils */
.felder-handle { background: #fff; border: 3px solid #b3361f; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: grab !important; }
.felder-handle.mid { border-width: 2px; transform-origin: center; }
.felder-handle.mid::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #b3361f; opacity: .35; }
.leaflet-dragging .felder-handle { cursor: grabbing !important; }
.felder-part { border: 2px solid var(--c); background: transparent; color: var(--c); font-weight: 600; }
.felder-part.on { background: var(--c); color: #fff; }

/* Heu: Sonden und Raster */
.heu-rows li { flex-wrap: wrap; }
.heu-rowprobes { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .3rem; padding-left: 4.7rem; }
.probe-chip { display: inline-flex; align-items: center; gap: .15rem; min-height: 2.2rem; padding: 0 .6rem; border-radius: 99px; background: var(--card); color: var(--ink); border: 1px solid var(--heu); font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; touch-action: manipulation; }
.probe-chip .icon { width: 1rem; height: 1rem; color: var(--heu); }
.heu-grid { display: grid; gap: .3rem; }
.heu-cell { min-height: 2.75rem; padding: 0; border-radius: 8px; background: var(--card); color: var(--muted); border: 1px dashed var(--line); font-weight: 700; font-variant-numeric: tabular-nums; touch-action: manipulation; }
.heu-cell.probe { background: var(--field-bg); color: var(--on-field); border: 1px solid var(--field-bg); }

.probe-tag { display: inline-flex; align-items: center; gap: .15rem; font-size: .7rem; font-weight: 700; color: var(--heu); font-variant-numeric: tabular-nums; }
.probe-tag .icon { width: .8rem; height: .8rem; }

/* Prognose-Diagramm */
.fc-chart { width: 100%; height: auto; display: block; }
.fc-bar { fill: var(--field); opacity: .85; }
.heu-total.heu .fc-bar { fill: var(--heu); }
.heu-total.lage .fc-bar { fill: var(--lage); }
.fc-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.fc-band { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 3; }
.fc-axis { stroke: var(--line); stroke-width: 1; }
.fc-txt { fill: var(--muted); font-size: 9px; }
.fc-val { fill: var(--ink); font-size: 9px; text-anchor: middle; font-variant-numeric: tabular-nums; }
/* Saison und Wetter: Linien je Woche (Farben aus den vorhandenen Tönen, damit hell und dunkel passen) */
.wx-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.wx-line.wx-use, .wx-dot.wx-use { stroke: var(--field); fill: var(--field); }
.wx-line.wx-use { fill: none; }
.wx-line.wx-light, .wx-line.wx-tday { stroke: var(--heu); }
.wx-line.wx-sun { stroke: var(--heu); stroke-dasharray: 4 3; }
.wx-line.wx-tnight { stroke: var(--lage); }
.wx-dot { stroke: none; fill: var(--muted); }
.wx-legend .wx-light, .wx-legend .wx-sun, .wx-legend .wx-tday { color: var(--heu); }
.wx-legend .wx-tnight { color: var(--lage); }
.season-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .75rem; }
.season-grid label { min-width: 0; display: flex; flex-direction: column; }
.season-grid input { width: 100%; min-width: 0; }
@media (min-width: 700px) { .season-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Hover: Kacheln und Chips behalten ihre eigene Fläche (der allgemeine Knopf-Hover färbt sonst dunkelgrün bei dunkler Schrift) */
@media (hover: hover) { .plan-chip:hover, .lager-slot:hover, .heu-btn:hover, .heu-undo:hover, .probe-chip:hover, .heu-cell:hover:not(.probe), .lager-tile:hover:not(:disabled):not(.lage) { background: var(--tint); color: var(--ink); } }
@media (hover: hover) { .heu-btn.lage:hover, .lager-tile.lage:hover:not(:disabled) { background: var(--lage-bg); color: var(--ink); } }
@media (hover: hover) { .lager-tile.k-gang:hover { background: repeating-linear-gradient(135deg, var(--fill), var(--fill) 8px, var(--card) 8px, var(--card) 16px); color: var(--ink); } }
@media (hover: hover) { .lager-grid.pick .lager-tile.picked:hover { background: var(--field-bg); color: var(--on-field); } }
@media (hover: hover) { .heu-cell.probe:hover { background: var(--field-bg-dark); color: var(--on-field); } }

/* Lagerplan: Feldgröße folgt der Breite (--cell wird per Skript gesetzt), kleine Felder zeigen weniger */
.lager-grid { grid-auto-rows: var(--cell, 4.2rem); }
.lager-tile, .lager-slot { min-height: 0; }
.lager-rowtools { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 0; font-weight: 700; color: var(--field); }
.lager-rowbtn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 0; padding: 0; background: var(--tint); color: var(--field); border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; font-weight: 700; touch-action: manipulation; }
.lager-rowbtn .icon { width: 1.1em; height: 1.1em; }
.lager-rowbtn.danger { color: var(--alert, #a33); }
@media (hover: hover) { .lager-rowbtn:hover { background: var(--field-bg); color: var(--on-field); } }
.lager-grid.compact .lager-tile { padding: .2rem .3rem; gap: .05rem; }
.lager-grid.compact .lager-tile .lager-label .icon { display: none; }
.lager-grid.tiny .lager-tile .meter { display: none; }
.lager-grid.tiny .lager-tile { padding: .15rem .2rem; }
.lager-grid.tiny .probe-tag { display: none; }
.leaflet-tooltip.felder-piece-label { background: rgba(255,255,255,.85); border: 0; box-shadow: none; padding: 0 .35rem; font-weight: 700; border-radius: .5rem; }
.leaflet-tooltip.felder-piece-label::before { display: none; }

/* Lagerplan bearbeiten: Spaltenköpfe, Mehrfachauswahl */
.lager-colbtn { display: flex; align-items: center; justify-content: center; min-height: 0; height: 100%; padding: 0; background: var(--tint); color: var(--field); border: 1px solid var(--line); border-radius: 8px; font-weight: 700; touch-action: manipulation; }
.lager-rowbtn.num { width: auto; min-width: 32px; padding: 0 .3rem; }
@media (hover: hover) { .lager-colbtn:hover { background: var(--field-bg); color: var(--on-field); } }
.lager-grid.selecting .lager-tile, .lager-grid.selecting .lager-slot { position: relative; cursor: pointer; touch-action: manipulation; }
.lager-grid.selecting .lager-tile.picked, .lager-grid.selecting .lager-slot.picked { box-shadow: inset 0 0 0 3px var(--field); border-color: var(--field); background-color: var(--tint); }
.lager-grid.selecting .picked::after { content: '✓'; position: absolute; top: 1px; right: 3px; font-size: .8rem; font-weight: 800; color: var(--field); }
.lager-grid.selecting .lager-slot:disabled { opacity: .25; cursor: default; }
.sel-bar { display: grid; gap: .4rem; }
.sel-bar .row { gap: .4rem; align-items: center; }
.sel-bar button { padding: .35rem .6rem; min-height: 0; }
.lager-tile { position: relative; }
.take-tag { position: absolute; top: 2px; right: 3px; min-width: 1.15em; padding: 0 .25em; border-radius: 999px; background: var(--field-bg); color: var(--on-field); font-size: .65rem; font-weight: 800; line-height: 1.4; text-align: center; }
.lager-grid.selecting .picked::after { right: auto; left: 3px; }
/* Felder: Gelände 3D (MapLibre) und Legende der Entwässerung */
.felder-3d { height: 70vh; min-height: 22rem; padding: 0; overflow: hidden; isolation: isolate; }
.felder-3d .maplibregl-ctrl-attrib { font-size: .65rem; }
.felder-3d-ex { display: flex; align-items: center; gap: .4rem; font-weight: 500; }
.felder-3d-ex input { width: 8rem; min-height: 0; padding: 0; }
.felder-gew { min-width: 0; }
.felder-gew .row { flex-wrap: wrap; gap: .3rem .6rem; }
/* Gelände: Legende mit Farbskala Gefälle und Kartenzeichen */
.gl-legende { display: grid; gap: .35rem; margin: .3rem 0; }
.gl-skala { display: grid; gap: .25rem; }
.gl-titel { font-size: .8rem; font-weight: 600; color: var(--muted, inherit); }
.gl-balken { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.gl-balken span { font-size: .72rem; line-height: 1.2; padding-top: .9rem; position: relative; text-align: center; white-space: nowrap; }
.gl-balken span::before { content: ''; position: absolute; inset: 0 0 auto 0; height: .7rem; background: var(--c); }
.gl-balken span:first-child::before { border-radius: 4px 0 0 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.gl-balken span:last-child::before { border-radius: 0 4px 4px 0; }
.gl-zeichen { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; font-size: .82rem; }
.gl-zeichen span { display: inline-flex; align-items: center; gap: .35rem; }
.gl-zeichen span::before { content: ''; display: inline-block; width: 1.3rem; height: .6rem; border-radius: 3px; }
.gl-pfeil::before { content: '➜' !important; width: auto !important; height: auto !important; font-size: 1.05rem; line-height: 1; color: #fff; text-shadow: 0 0 1px #1b2219, 0 0 1px #1b2219, 0 0 2px #1b2219; }
.gl-weg::before { height: 4px !important; background: #3987e5; box-shadow: 0 0 4px 1px #bfe0ff; }
.gl-senke::before { background: linear-gradient(90deg, #9ec5f4, #1c5cab); }
.gl-gew::before { height: 4px !important; background: #1565c0; }
.gl-sperr::before { background: #8e24aa; opacity: .55; }
.gl-popup .maplibregl-popup-content { font: inherit; font-size: .85rem; padding: .45rem .65rem; border-radius: 8px; color: #1b2219; }
/* Gelände 3D: Karte im Mittelpunkt, Bedienung als Glasflächen darüber */
.gl-map { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); isolation: isolate; background: #dfe3d8; }
.gl-map .felder-3d { height: 72vh; min-height: 24rem; max-height: 52rem; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.gl-map:fullscreen .felder-3d { height: 100vh; max-height: none; }
.gl-glass { position: absolute; z-index: 2; background: color-mix(in srgb, var(--card) 74%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--card) 55%, transparent); border-radius: 14px; box-shadow: 0 8px 28px rgba(15, 25, 12, .2); color: var(--ink); }
.gl-top { top: .6rem; left: .6rem; right: 3.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .35rem; width: fit-content; max-width: calc(100% - 4rem); }
.gl-top select { flex: 1 1 11rem; min-height: 2.25rem; padding-top: .2rem; padding-bottom: .2rem; border-radius: 10px; width: auto; max-width: 100%; font-weight: 650; background-color: var(--card); }
.gl-seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--fill) 85%, transparent); }
.gl-seg button { min-height: 0; padding: .32rem .7rem; border: 0; border-radius: 8px; background: none; color: var(--muted); font-weight: 650; font-size: .85rem; transition: background .2s, color .2s, box-shadow .2s; }
.gl-seg button[aria-pressed="true"] { background: var(--card); color: var(--field); box-shadow: 0 1px 3px rgba(15, 25, 12, .2); }
.gl-bottom { left: .6rem; right: .6rem; bottom: 2.1rem; display: flex; align-items: center; gap: .35rem; padding: .35rem; overflow-x: auto; scrollbar-width: none; width: fit-content; max-width: calc(100% - 1.2rem); }
.gl-bottom::-webkit-scrollbar { display: none; }
.gl-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.15rem; padding: .3rem .75rem; border-radius: 99px; border: 1px solid transparent;
  background: var(--card); color: var(--ink); font-weight: 650; font-size: .84rem; box-shadow: 0 1px 2px rgba(15, 25, 12, .12); transition: opacity .2s, background .2s, transform .15s; }
.gl-chip:active { transform: scale(.96); }
.gl-chip[aria-pressed="false"] { background: transparent; box-shadow: none; opacity: .6; }
.gl-chip i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px rgba(15, 25, 12, .35); }
.gl-chip[aria-pressed="false"] i { background: transparent; }
.gl-chip-tool { background: color-mix(in srgb, var(--field-bg) 92%, transparent); color: var(--on-field); }
@media (hover: hover) { .gl-map .gl-chip:hover { background: var(--fill-hover); } }
@media (hover: hover) { .gl-map .gl-chip[aria-pressed="false"]:hover { background: color-mix(in srgb, var(--card) 60%, transparent); opacity: .85; } }
@media (hover: hover) { .gl-map .gl-chip-tool:hover { background: var(--field-bg-dark); } }
@media (hover: hover) { .gl-map .gl-seg button:hover { background: color-mix(in srgb, var(--card) 60%, transparent); } }
@media (hover: hover) { .gl-map .gl-seg button[aria-pressed="true"]:hover { background: var(--card); } }
.gl-sep { flex: 0 0 1px; align-self: stretch; margin: .25rem .1rem; background: var(--line); }
.gl-ex { right: .6rem; bottom: 5.1rem; display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem; font-size: .85rem; font-weight: 650; }
.gl-ex input { width: 9rem; min-height: 0; padding: 0; accent-color: var(--field); }
.gl-linien { font-size: .8rem; color: var(--muted); }
.gl-legende-card { padding-top: .8rem; padding-bottom: .8rem; }
.gl-info .row a.link { font-weight: 650; }
/* Kennzahlen als Kacheln */
.gl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .55rem; margin: .2rem 0 .3rem; }
.gl-kpi { position: relative; display: grid; gap: .1rem; align-content: start; padding: .75rem .85rem; border-radius: var(--radius-sm); background: var(--fill); animation: gl-auf .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.gl-kpi b { font-size: 1.4rem; font-weight: 750; letter-spacing: -.015em; line-height: 1.15; font-variant-numeric: tabular-nums; padding-right: 2.3rem; }
.gl-kpi span { font-size: .78rem; color: var(--muted); }
.gl-kompass { position: absolute; top: .7rem; right: .7rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--field-bg); box-shadow: 0 4px 10px rgba(15, 25, 12, .25); }
.gl-kompass::after { content: ''; position: absolute; inset: .35rem; background: var(--on-field); clip-path: polygon(50% 0, 88% 52%, 62% 52%, 62% 100%, 38% 100%, 38% 52%, 12% 52%); transform: rotate(var(--deg)); }
@keyframes gl-auf { from { opacity: 0; transform: translateY(8px); } }
/* fließendes Wasser auf der Flächenkarte (Leaflet zeichnet SVG, die Striche wandern in Fließrichtung) */
.gl-fluss { animation: gl-fluss 1.1s linear infinite; }
@keyframes gl-fluss { to { stroke-dashoffset: -12; } }
@media (max-width: 600px) {
  .gl-map .felder-3d { height: 66vh; min-height: 22rem; }
  .gl-top { right: 3.2rem; }
  .gl-seg button { padding: .3rem .5rem; }
  .gl-kpi b { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .gl-kpi, .gl-fluss { animation: none; } .gl-chip, .gl-seg button { transition: none; } }
/* Hofkarte: Schilder an Leitungen und Gebäuden, Zeichenleiste */
.hk-label { min-height: 0; display: inline-flex; gap: .3rem; align-items: center; padding: .2rem .55rem; border: 0; border-radius: 99px; font-size: .75rem; font-weight: 500;
  white-space: nowrap; color: #fff; background: var(--c); box-shadow: 0 2px 6px rgba(20, 10, 30, .3); cursor: pointer; }
.hk-label b { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.hk-label-geb { background: #6a3d8f; }
.hk-label-flaeche { background: #558b2f; }
.hk-label-plan { background: #fff; color: var(--c); outline: 2px dashed var(--c); outline-offset: -2px; }
.hk-kpi-plan { outline: 2px dashed var(--line); outline-offset: -2px; }
.hk-mat .num { text-align: right; white-space: nowrap; }
.hk-reserve-zeile { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.hk-reserve-zeile .hk-reserve { width: 4.5rem; min-height: 2.4rem; text-align: right; }
.hk-plan-chip[aria-pressed="false"] { background: var(--card); box-shadow: 0 1px 2px rgba(15, 25, 12, .12); opacity: 1; }
.hk-plan-chip[aria-pressed="true"] { background: #fff; color: #7b1fa2; outline: 2px dashed #7b1fa2; outline-offset: -2px; }
.gl-map:has(.hk-draw) { scroll-margin-top: 5.5rem; }
.hk-label.hk-verdeckt { visibility: hidden; }
.hk-haken { display: none; }
.hk-waehlen .hk-haken { display: inline-flex; align-items: center; margin-right: .2rem; }
.hk-waehlen .hk-haken input { width: 1.25rem; height: 1.25rem; }
.hk-auswahl { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.hk-auswahl select { flex: 1 1 12rem; }
.hk-fern .hk-mass { display: none; }
.hk-draw { top: 3.6rem; left: .6rem; display: grid; gap: .4rem; padding: .5rem .6rem; width: min(27rem, calc(100% - 4rem)); }
.hk-ztext { font-size: .85rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.hk-zbtns { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.hk-zeichnen .maplibregl-canvas { cursor: crosshair; }
.hk-zeichnen .hk-label { pointer-events: none; opacity: .75; }
.hk-zbtns .gl-chip[aria-pressed="false"] { background: var(--card); box-shadow: 0 1px 2px rgba(15, 25, 12, .12); opacity: 1; }
.hk-zbtns .gl-chip[aria-pressed="true"] { background: var(--field-bg); color: var(--on-field); }
.hk-name { display: inline-flex; align-items: center; gap: .45rem; text-align: left; }
.hk-farbe { flex: 0 0 auto; width: 1.1rem; height: 4px; border-radius: 2px; background: var(--c); }
.hk-notiz { white-space: pre-wrap; }
.hk-gel { right: .6rem; bottom: 5.1rem; display: grid; gap: .5rem; padding: .55rem .7rem; width: min(22rem, calc(100% - 1.2rem)); font-size: .85rem; }
.hk-gel { max-height: calc(100% - 9.5rem); overflow-y: auto; }
.hk-ueber { display: flex; align-items: center; gap: .6rem; font-weight: 650; }
.hk-ueber input { flex: 1 1 auto; min-height: 0; padding: 0; accent-color: var(--field); }
.hk-leer { left: 50%; top: 45%; transform: translate(-50%, -50%); display: grid; gap: .35rem; width: min(20rem, calc(100% - 7.5rem)); padding: .8rem 1rem; text-align: center; font-size: .9rem; }
.hk-knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.hk-art { display: grid; gap: .5rem; margin: 0; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.hk-art-kopf { display: flex; align-items: center; gap: .5rem; }
.hk-art-kopf input[type=color] { flex: 0 0 2.6rem; width: 2.6rem; height: 2.4rem; min-height: 0; padding: .15rem; }
.hk-art-kopf input:not([type]) { flex: 1 1 auto; min-width: 0; }
/* Fahrstrategie: Spurnummern auf der Karte */
.felder-map .fahr-nr { background: rgba(27, 34, 25, .78); color: #fff; border: 0; box-shadow: none; padding: 0 .25rem; font-size: .7rem; font-weight: 700; line-height: 1.3; }
.felder-map .fahr-nr::before { display: none; }
input[type="range"] { border: 0; background: none; box-shadow: none; padding: 0; min-height: 2.75rem; }