/* Web-Bestandsmanager – Aussehen wie die Stall-App (Burgund, Bricolage Grotesque / Figtree, lokal ausgeliefert) */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url(schrift/BricolageGrotesque-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url(schrift/BricolageGrotesque-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url(schrift/BricolageGrotesque-800-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url(schrift/BricolageGrotesque-800-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: Figtree; font-weight: 400; font-display: swap; src: url(schrift/Figtree-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: Figtree; font-weight: 400; font-display: swap; src: url(schrift/Figtree-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: Figtree; font-weight: 600; font-display: swap; src: url(schrift/Figtree-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: Figtree; font-weight: 600; font-display: swap; src: url(schrift/Figtree-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: Figtree; font-weight: 700; font-display: swap; src: url(schrift/Figtree-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: Figtree; font-weight: 700; font-display: swap; src: url(schrift/Figtree-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  --rot: #7C272E; --rot-sanft: #F6EFEF; --kopf: #7C272E; --tief: #5A1A20; --kamm: #D42A30;
  --tinte: #212121; --grau: #5E5656; --linie: #E6DADB; --grund: #FBF8F8; --karte: #FFFFFF;
  --gruen: #2F7D34; --gruen-sanft: #E6F2E6; --ocker: #8A6400; --ocker-sanft: #FFF3CC;
  --plan-boden: #EEF0E8; --plan-strasse: #D9D2CF; --plan-gebaeude: #D8C6C6; --leer: #F7F4F4;
  --schrift: Figtree, "Segoe UI", system-ui, sans-serif; --titel: "Bricolage Grotesque", Figtree, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { --rot: #F08A90; --rot-sanft: #3A1E22; --kopf: #5A1A20; --tief: #3A1014; --kamm: #F0585B;
  --tinte: #F1ECEC; --grau: #B5ABAB; --linie: #3A3132; --grund: #1C1718; --karte: #262021;
  --gruen: #6CC070; --gruen-sanft: #22351F; --ocker: #E7C35A; --ocker-sanft: #3B3219;
  --plan-boden: #232821; --plan-strasse: #3D3737; --plan-gebaeude: #4A3D3E; --leer: #2C2627; color-scheme: dark; } }
:root[data-thema="dunkel"] { --rot: #F08A90; --rot-sanft: #3A1E22; --kopf: #5A1A20; --tief: #3A1014; --kamm: #F0585B;
  --tinte: #F1ECEC; --grau: #B5ABAB; --linie: #3A3132; --grund: #1C1718; --karte: #262021;
  --gruen: #6CC070; --gruen-sanft: #22351F; --ocker: #E7C35A; --ocker-sanft: #3B3219;
  --plan-boden: #232821; --plan-strasse: #3D3737; --plan-gebaeude: #4A3D3E; --leer: #2C2627; color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; overflow-x: clip; }
body { background: var(--grund); color: var(--tinte); font: 400 15px/1.45 var(--schrift); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ── Gerüst: Kopf, Hinweisband, Menü links, Inhalt ── */
header.kopf { position: sticky; top: 0; z-index: 40; background: var(--kopf); color: #fff; display: flex; align-items: center; gap: 12px; padding: 10px 18px; }
.plakette { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; overflow: hidden; }
.plakette img { width: 86%; height: 86%; object-fit: contain; }
.marke { font: 700 18px/1.1 var(--titel); margin-right: auto; white-space: nowrap; }
.marke small { display: block; font: 600 11px var(--schrift); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.kopf-info { font-size: 13px; opacity: .9; }
.kopf button { border: 1px solid rgba(255,255,255,.5); background: none; color: #fff; border-radius: 999px; padding: 6px 12px; }
.testband { background: var(--ocker-sanft); color: var(--ocker); font-weight: 700; font-size: 13px; padding: 6px 18px; text-align: center; }
.rumpf { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 100px); }
nav.menue { background: var(--karte); border-right: 1px solid var(--linie); padding: 14px 10px; display: grid; align-content: start; gap: 2px; }
nav.menue button { border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 12px; color: var(--tinte); font-weight: 600; display: flex; gap: 10px; align-items: center; }
nav.menue button.an { background: var(--rot-sanft); color: var(--rot); }
nav.menue button:hover { background: var(--rot-sanft); }
main { min-width: 0; padding: 20px 24px 40px; }
h1 { font: 800 30px/1.05 var(--titel); letter-spacing: -.03em; margin: 0 0 4px; }
h2 { font: 700 19px var(--titel); margin: 22px 0 10px; }
.unter { color: var(--grau); font-size: 13px; margin: 0 0 16px; }
.klein { font-size: 12.5px; color: var(--grau); }
.hinweis { background: var(--ocker-sanft); color: var(--ocker); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-weight: 600; }
.knopf { border: 0; border-radius: 999px; background: var(--rot); color: #fff; padding: 12px 18px; font-size: 15px; font-weight: 700; }
.knopf.leise { background: var(--karte); color: var(--tinte); border: 1px solid var(--linie); font-weight: 600; }
.eingabe { width: 100%; border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; background: var(--karte); font-size: 16px; }

/* ── Anmelden ── */
.anmelden { max-width: 380px; margin: 60px auto; display: grid; gap: 12px; text-align: center; }
.anmelden .zeile { display: flex; align-items: center; gap: 12px; background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 12px 14px; font-weight: 700; font-size: 17px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font: 800 16px var(--titel); background: var(--rot); }

/* ── Lageplan ── */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: 18px; padding: 14px 16px; text-align: left; display: grid; gap: 4px; }
.kachel b { font: 700 18px var(--titel); }
.kachel .zahlen { color: var(--grau); font-size: 13px; }
.kachel .notiz { color: var(--ocker); font-size: 12.5px; font-weight: 600; }
.planbereich { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.plan-box { background: var(--plan-boden); border-radius: 18px; overflow: hidden; border: 1px solid var(--linie); }
.plan-box svg { width: 100%; height: auto; display: block; max-height: 72vh; }
.planwerkzeug { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--grau); margin-top: 8px; }
.legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 2px solid; }
.detail { background: var(--karte); border: 1px solid var(--linie); border-radius: 18px; padding: 16px; position: sticky; top: 90px; }
.detail h2 { margin-top: 0; }
.werte { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; margin-bottom: 12px; }
.werte span:nth-child(odd) { color: var(--grau); }
table.buchungen { width: 100%; border-collapse: collapse; font-size: 13px; }
table.buchungen td, table.buchungen th { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.buchungen td.menge { text-align: right; font-weight: 700; white-space: nowrap; }
.plus { color: var(--gruen); } .minus { color: var(--kamm); }
.bald { background: var(--karte); border: 1px dashed var(--linie); border-radius: 18px; padding: 30px; color: var(--grau); text-align: center; }

@media (max-width: 900px) {
  .rumpf { grid-template-columns: minmax(0, 1fr); }
  nav.menue { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--linie); padding: 8px; }
  nav.menue button { white-space: nowrap; }
  .planbereich { grid-template-columns: minmax(0, 1fr); }
  .detail { position: static; }
  main { padding: 16px; }
  .kopf-info { display: none; }
}

/* ── Stufe 2: Bestand, Dialoge, Meldungen ── */
.werkzeug { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.werkzeug .eingabe { width: auto; min-width: 200px; padding: 9px 12px; font-size: 14px; }
table.liste { width: 100%; border-collapse: collapse; background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; font-size: 14px; }
table.liste th { text-align: left; font-size: 12px; color: var(--grau); padding: 10px; border-bottom: 1px solid var(--linie); cursor: pointer; white-space: nowrap; }
table.liste td { padding: 9px 10px; border-bottom: 1px solid var(--linie); }
table.liste td.zahl { text-align: right; font-weight: 700; }
table.liste tr:hover td { background: var(--rot-sanft); }
.punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; border: 2px solid; }
.knopf.klein { padding: 6px 12px; font-size: 13px; }
.aktionen { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; }
.ebene { position: fixed; inset: 0; background: rgba(20,10,12,.45); display: grid; place-items: center; z-index: 100; padding: 16px; }
.dialog { background: var(--karte); border-radius: 20px; padding: 20px; width: min(520px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.dialog h2 { margin: 0 0 12px; }
.dialog label { display: grid; gap: 4px; font-size: 13px; color: var(--grau); margin-bottom: 10px; }
.dialog label .eingabe { color: var(--tinte); }
.dialog .reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dialog .knopfreihe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.reiter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.reiter button { border: 1px solid var(--linie); background: var(--karte); border-radius: 999px; padding: 7px 12px; font-weight: 600; }
.reiter button.an { background: var(--rot); color: #fff; border-color: var(--rot); }
.sorten { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--tinte); }
.meldung { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--tinte); color: var(--karte); padding: 10px 18px; border-radius: 999px; z-index: 200; font-weight: 600; }
.storniert { text-decoration: line-through; opacity: .55; }
.link { border: 0; background: none; color: var(--rot); padding: 0; font-size: 12px; text-decoration: underline; }
@media (max-width: 700px) { .dialog .reihe { grid-template-columns: 1fr; } table.liste .weg { display: none; } }

/* ── Stufe 3: Touren, Route, Fangliste ── */
.tafel { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; align-items: start; }
.spalte-ohne { background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 10px; position: sticky; top: 90px; max-height: 75vh; overflow: auto; }
.tag { background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 10px 12px; margin-bottom: 10px; }
.tag.wochenende { opacity: .7; }
.tag h3 { font: 700 15px var(--titel); margin: 0 0 8px; }
.touren { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.tour { border: 1px dashed var(--linie); border-radius: 12px; padding: 8px; min-height: 64px; background: var(--grund); }
.tour.ziel { border-color: var(--rot); background: var(--rot-sanft); }
.tour-kopf { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.tour-kopf button { border: 0; background: none; color: var(--rot); font-weight: 700; padding: 0; font-size: 12.5px; }
.karte-b { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 6px 8px; margin-bottom: 6px; cursor: grab; font-size: 13px; }
.karte-b b { display: block; }
.karte-b.geuebt { border-color: var(--ocker); background: var(--ocker-sanft); }
.routekarte { background: var(--plan-boden); border-radius: 14px; border: 1px solid var(--linie); }
.routekarte svg { width: 100%; height: auto; display: block; }
ol.route { padding-left: 22px; } ol.route li { margin-bottom: 6px; }
.fangrahmen { width: 100%; height: 75vh; border: 1px solid var(--linie); border-radius: 14px; background: #fff; }
@media (max-width: 900px) { .tafel { grid-template-columns: minmax(0, 1fr); } .spalte-ohne { position: static; max-height: none; } }
/* Stufe 4: Lieferscheine */
.ls-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.ls-kopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.ls-kopf .knopf { margin-left: auto; }
.q { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 8px; padding: 1px 7px; margin-left: 4px; }
.q-fang { background: #C8E6C9; color: #2F7D34; }
.q-geraten { background: #FFE0B2; color: #E65100; }
.q-hand { background: #BBDEFB; color: #1565C0; }
.q-bm { background: var(--linie); color: var(--grau); }
/* Stufe 5: Einstallen, Bescheinigungen */
.dokliste { list-style: none; padding: 0; margin: 0 0 12px; font-size: 14px; }
.dokliste li { padding: 6px 0; border-bottom: 1px solid var(--linie); }
/* Stufe 6: Post */
.post-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.post-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--karte); border: 1px solid var(--linie);
  border-radius: 14px; padding: 12px 14px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.post-kachel b { font-size: 28px; }
.post-zwei { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
@media (max-width: 800px) { .post-zwei { grid-template-columns: 1fr; } }
table.liste tr.wahl { cursor: pointer; }
table.liste tr.an td { background: var(--ocker-sanft); }
table.liste tr.warn td { color: #E65100; }
/* Stufe 7: Berichte, Stammdaten */
table.liste tr.inaktiv td { color: var(--grau); text-decoration: line-through; }
.ls-karte h2 { margin-top: 0; }

/* ══ PC-Programm-Aussehen (Julian 26.10.: „zu ähnlich wie die App“) – dichter, eckiger, Tabellen statt Kacheln.
   Steht bewusst am Ende und überschreibt die App-Optik von oben; Farben bleiben. ══ */
body { font-size: 13.5px; line-height: 1.4; }
header.kopf { padding: 5px 12px; gap: 10px; box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.plakette { width: 30px; height: 30px; }
.marke { font: 700 15px/1.1 var(--schrift); }
.marke small { display: inline; margin-left: 8px; font-size: 11px; letter-spacing: .04em; }
.kopf button { border-radius: 3px; padding: 3px 10px; font-size: 12.5px; }
.testband { font-size: 12px; padding: 3px 12px; font-weight: 600; }
.rumpf { grid-template-columns: 172px minmax(0, 1fr); min-height: calc(100vh - 64px); }
nav.menue { padding: 6px 0; gap: 0; background: #F4F1F1; }
nav.menue button { border-radius: 0; padding: 6px 12px; font-size: 13px; font-weight: 500; gap: 8px; border-left: 3px solid transparent; }
nav.menue button span { width: 18px; text-align: center; }
nav.menue button.an { background: var(--karte); color: var(--rot); font-weight: 700; border-left-color: var(--rot); }
nav.menue button:hover { background: #EAE4E4; }
main { padding: 12px 16px 30px; }
h1 { font: 700 19px/1.2 var(--schrift); letter-spacing: 0; padding-bottom: 6px; border-bottom: 1px solid var(--linie); margin-bottom: 6px; }
h2 { font: 700 14px var(--schrift); margin: 14px 0 6px; }
.unter { font-size: 12.5px; margin-bottom: 10px; }
.klein { font-size: 12px; }
.hinweis { border-radius: 3px; padding: 6px 10px; margin-bottom: 8px; font-size: 13px; border-left: 3px solid var(--ocker); }
.knopf { border-radius: 3px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.knopf.klein { padding: 3px 10px; font-size: 12.5px; }
.knopf.leise { background: linear-gradient(#fff, #F1EDED); }
.eingabe { border-radius: 3px; padding: 6px 8px; font-size: 13.5px; }
.werkzeug { gap: 6px; margin-bottom: 8px; }
.werkzeug .eingabe { min-width: 150px; padding: 4px 8px; font-size: 13px; }
.reiter { gap: 0; border-bottom: 1px solid var(--linie); margin-bottom: 10px; }
.reiter button { border: 1px solid transparent; border-bottom: 0; border-radius: 3px 3px 0 0; padding: 5px 12px; margin-bottom: -1px; background: none; font-weight: 500; font-size: 13px; }
.reiter button.an { background: var(--karte); color: var(--rot); border-color: var(--linie); font-weight: 700; }
table.liste { border-radius: 0; font-size: 13px; }
table.liste th { background: #F1ECEC; color: var(--tinte); font-weight: 600; padding: 5px 8px; border-right: 1px solid var(--linie); }
table.liste td { padding: 4px 8px; border-right: 1px solid #F0EAEA; }
table.liste tbody tr:nth-child(even) td { background: #FBF9F9; }
table.liste tr:hover td { background: var(--rot-sanft); }
table.buchungen { font-size: 12.5px; }
table.buchungen td, table.buchungen th { padding: 4px; }
.kacheln { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.kachel { border-radius: 4px; padding: 8px 10px; gap: 2px; }
.kachel b { font: 700 14px var(--schrift); }
.kachel .zahlen { font-size: 12px; }
.plan-box, .detail, .routekarte, .fangrahmen { border-radius: 4px; }
.detail { padding: 10px 12px; top: 50px; }
.werte { font-size: 13px; }
.bald { border-radius: 4px; padding: 16px; }
.dialog { border-radius: 6px; padding: 14px 16px; }
.dialog h2 { font-size: 15px; padding-bottom: 6px; border-bottom: 1px solid var(--linie); }
.dialog label { font-size: 12.5px; margin-bottom: 6px; }
.meldung { border-radius: 4px; font-size: 13px; }
.ls-karte { border-radius: 4px; padding: 8px 10px; margin-bottom: 8px; }
.post-kacheln { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.post-kachel { border-radius: 4px; padding: 8px 10px; }
.post-kachel b { font-size: 22px; }
.tag, .spalte-ohne, .tour { border-radius: 4px; }
.karte-b { border-radius: 3px; padding: 4px 6px; font-size: 12.5px; }
.q { border-radius: 3px; }
.anmelden .zeile { border-radius: 4px; font-size: 15px; padding: 8px 12px; }
.avatar { width: 30px; height: 30px; font-size: 13px; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) nav.menue { background: #201A1B; } :root:not([data-thema="hell"]) nav.menue button:hover { background: #2E2627; } :root:not([data-thema="hell"]) table.liste th { background: #2E2627; } :root:not([data-thema="hell"]) table.liste tbody tr:nth-child(even) td { background: #241E1F; } :root:not([data-thema="hell"]) .knopf.leise { background: var(--karte); } }
:root[data-thema="dunkel"] nav.menue { background: #201A1B; } :root[data-thema="dunkel"] nav.menue button:hover { background: #2E2627; } :root[data-thema="dunkel"] table.liste th { background: #2E2627; } :root[data-thema="dunkel"] table.liste tbody tr:nth-child(even) td { background: #241E1F; } :root[data-thema="dunkel"] .knopf.leise { background: var(--karte); }
@media (max-width: 900px) {
  .rumpf { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }   /* Menü oben nur so hoch wie nötig */
  nav.menue { padding: 0; }
  nav.menue button { border-left: 0; border-bottom: 3px solid transparent; }
  nav.menue button.an { border-bottom-color: var(--rot); }
}
/* Handy/Finger: Knöpfe und Felder groß genug zum Tippen, Felder ≥ 16px (sonst zoomt iOS hinein) */
@media (pointer: coarse) {
  .knopf { padding: 9px 14px; } .knopf.klein { padding: 6px 10px; }
  .eingabe, .werkzeug .eingabe { font-size: 16px; padding: 8px 10px; }
  nav.menue button { padding: 10px 12px; }
  .reiter button { padding: 8px 12px; }
}
table.liste .knopf { padding: 1px 8px; font-size: 12px; }
@media (pointer: coarse) { table.liste .knopf { padding: 5px 10px; } }

/* ══ Aufbau wie im BM (27.10.): Menüleiste im Kopf, Reiter darunter, Bestand & Lageplan in einem Fenster ══ */
.rumpf { display: block; }
.menueleiste { display: flex; gap: 2px; margin-right: auto; margin-left: 18px; }
.aufklapp { position: relative; }
.aufklapp > button { border: 0; background: none; color: #fff; padding: 5px 10px; border-radius: 3px; font-size: 13px; }
.aufklapp > button:hover, .aufklapp.offen > button { background: rgba(255,255,255,.18); }
.menue-liste { display: none; position: absolute; left: 0; top: 100%; min-width: 240px; background: var(--karte); color: var(--tinte); border: 1px solid var(--linie);
  border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px 0; z-index: 60; }
.aufklapp.offen .menue-liste { display: block; }
.menue-liste button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 14px; font-size: 13px; color: var(--tinte); white-space: nowrap; }
.menue-liste button:hover { background: var(--rot-sanft); color: var(--rot); }
.menue-liste hr { border: 0; border-top: 1px solid var(--linie); margin: 4px 0; }
.marke { margin-right: 0; }
.reiterleiste { display: flex; gap: 0; padding: 6px 12px 0; background: #F4F1F1; border-bottom: 1px solid var(--linie); position: sticky; top: 40px; z-index: 30; overflow-x: auto; }
.reiterleiste button { border: 1px solid transparent; border-bottom: 0; background: none; padding: 7px 16px; margin-bottom: -1px; border-radius: 4px 4px 0 0;
  font-size: 13.5px; font-weight: 500; color: var(--tinte); display: flex; gap: 7px; align-items: center; white-space: nowrap; }
.reiterleiste button:hover { background: #EAE4E4; }
.reiterleiste button.an { background: var(--grund); border-color: var(--linie); color: var(--rot); font-weight: 700; }
main { padding: 10px 14px 16px; }
.aufgerufen { outline: 2px solid var(--rot); outline-offset: 2px; }
/* Bestand & Lageplan */
.bl-kopf { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.bl-kopf .werkzeug { margin: 0 0 0 auto; }
.kennzahlen { display: flex; gap: 6px; flex-wrap: wrap; }
.kennzahlen span { background: var(--karte); border: 1px solid var(--linie); border-radius: 4px; padding: 4px 10px; font-size: 12.5px; color: var(--grau); }
.kennzahlen b { color: var(--tinte); font-size: 15px; margin-right: 3px; }
.kennzahlen .warnzahl b { color: #E65100; }
.lieferleiste { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: var(--ocker-sanft); border: 1px solid #EBD9A0; border-radius: 4px; padding: 5px 8px; margin-bottom: 8px; }
.chip { background: var(--karte); border: 1px solid var(--linie); border-radius: 3px; padding: 3px 8px; font-size: 12.5px; cursor: grab; user-select: none; }
.chip:hover { border-color: var(--rot); }
.bl-rumpf { display: flex; align-items: stretch; height: calc(100vh - 165px); min-height: 480px; }
.bl-plan { flex: 1; min-width: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; align-content: start; padding-right: 4px; }
.bl-plan.einzeln { grid-template-columns: minmax(0, 1fr); }
.bl-plan.einzeln .plan-box svg { max-height: calc(100vh - 250px); }
.plan-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 4px; display: flex; flex-direction: column; }
.plan-kopf { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 5px 8px; border-bottom: 1px solid var(--linie); }
.ort-titel { border: 0; background: none; padding: 0; font-weight: 700; font-size: 13.5px; color: var(--rot); }
.ort-titel:hover { text-decoration: underline; }
.plan-karte .plan-box { border: 0; border-radius: 0 0 4px 4px; flex: 1; }
.plan-karte .plan-box svg { max-height: 300px; }
.bl-plan .legende { grid-column: 1 / -1; margin: 0; }
#plan-flaeche g.gedimmt { opacity: .25; }
#plan-flaeche g.ziel polygon { stroke: var(--rot); stroke-width: 6; }
.trenner { flex: none; width: 7px; cursor: col-resize; margin: 0 3px; border-radius: 3px; }
.trenner:hover { background: var(--linie); }
.bl-seite { flex: none; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bl-liste { flex: 1 1 45%; overflow: auto; background: var(--karte); border: 1px solid var(--linie); border-radius: 4px; outline: none; }
.bl-liste:focus-visible { border-color: var(--rot); }
.bl-liste table.liste { border: 0; }
.bl-liste thead th { position: sticky; top: 0; z-index: 1; }
.bl-liste tr.gruppe td { background: #EFE8E8 !important; font-weight: 700; font-size: 12.5px; padding: 3px 8px; }
.bl-seite .detail { flex: 1 1 55%; overflow: auto; position: static; margin: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .reiterleiste { background: #201A1B; } :root:not([data-thema="hell"]) .reiterleiste button:hover { background: #2E2627; } :root:not([data-thema="hell"]) .bl-liste tr.gruppe td { background: #2E2627 !important; } :root:not([data-thema="hell"]) .lieferleiste { border-color: #5A4A20; } }
:root[data-thema="dunkel"] .reiterleiste { background: #201A1B; } :root[data-thema="dunkel"] .reiterleiste button:hover { background: #2E2627; } :root[data-thema="dunkel"] .bl-liste tr.gruppe td { background: #2E2627 !important; } :root[data-thema="dunkel"] .lieferleiste { border-color: #5A4A20; }
@media (max-width: 900px) {
  .marke { display: none; } .menueleiste { margin-left: 4px; }
  .reiterleiste { top: 40px; }
  .bl-rumpf { flex-direction: column; height: auto; }
  .bl-seite { width: auto !important; }
  .trenner { display: none; }
  .bl-liste { max-height: 50vh; }
}
/* Lieferscheine wie im BM: Liste links, Positionen rechts */
.ls-links { flex: 1 1 auto; min-width: 320px; }
.bl-rumpf .ls-links table.liste td { white-space: nowrap; }
.ls-position { border-top: 1px solid var(--linie); margin-top: 10px; padding-top: 4px; }
.vorschlaege { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.ls-eingabe { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 6px 0; }
.ls-eingabe label { display: grid; gap: 2px; font-size: 12px; color: var(--grau); }
.ls-eingabe label .eingabe { min-width: 90px; }
.ls-eingabe label:first-child .eingabe { min-width: 220px; }
/* Kacheln als Filter, Heute, Belegungsbalken, breite Dialoge */
.kachelknopf { background: var(--karte); border: 1px solid var(--linie); border-radius: 4px; padding: 4px 10px; font-size: 12.5px; color: var(--grau); }
.kachelknopf b { color: var(--tinte); font-size: 15px; margin-right: 3px; }
.kachelknopf:hover { border-color: var(--rot); }
.kachelknopf.an { background: var(--rot-sanft); border-color: var(--rot); color: var(--rot); }
.kachelknopf.warnzahl b { color: #E65100; }
.balken { display: inline-block; width: 46px; height: 6px; background: var(--linie); border-radius: 3px; margin-left: 6px; vertical-align: middle; overflow: hidden; }
.balken i { display: block; height: 100%; }
.bl-liste tr.gruppe { cursor: pointer; }
.dialog.breit { width: min(1000px, 100%); }
table.buchungen.breit th { text-align: left; font-size: 12px; color: var(--grau); border-bottom: 1px solid var(--linie); padding: 4px; }
.hinweisband { background: #E8F1FB; color: #0D3C61; padding: 5px 14px; font-size: 13px; font-weight: 600; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hinweisband.rot { background: #FDECEA; color: #B71C1C; }
.hinweisband .link { font-size: 13px; }
.meldung { display: flex; gap: 12px; align-items: center; }
.meldung .rueck { border: 1px solid rgba(255,255,255,.6); background: none; color: inherit; border-radius: 3px; padding: 2px 8px; font-weight: 700; }
/* Fangliste-Tabelle wie im BM: Nachtrag rot, ohne Stall orange */
table.liste tr.nachtrag td { color: #C62828; }
table.liste tr.fehlt td { background: #FFF3E0 !important; }
table.liste tr.gruppe td { background: #EFE8E8; font-weight: 700; }
.zieh-geist { position: fixed; z-index: 300; background: var(--tinte); color: var(--karte); font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 3px; pointer-events: none; }
/* ══ Große Bildschirme (27″): Pläne füllen die ganze Höhe, Lieferschein-Liste schmal, Details breit ══ */
.bl-plan:not(.einzeln) { align-content: stretch; }
.bl-plan:not(.einzeln) .plan-karte { min-height: 0; }
.bl-plan:not(.einzeln) .plan-box { display: flex; min-height: 0; }
.bl-plan:not(.einzeln) .plan-box svg { flex: 1; width: 100%; height: 100%; min-height: 0; max-height: none; }
.ls-links { flex: none; min-width: 340px; }
.bl-seite.ls-rechts { flex: 1 1 auto; container-type: inline-size; }
.ls-raster > * { min-width: 0; }
@container (min-width: 1050px) {
  .ls-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .ls-raster .ls-position { border-top: 0; margin-top: 0; padding-top: 0; border-left: 1px solid var(--linie); padding-left: 16px; }
}
@media (min-width: 2000px) { body { font-size: 14.5px; } table.liste td, table.liste th { padding-top: 5px; padding-bottom: 5px; } }
@media (max-width: 900px) {
  .ls-links { width: auto !important; }
  .bl-plan:not(.einzeln) { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; }
  .bl-plan:not(.einzeln) .plan-box svg { height: auto; max-height: 300px; }
}
/* Luftbild und Ställe anpassen */
.lb-leiste { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: auto; font-size: 12.5px; }
.lb-leiste label { display: inline-flex; gap: 5px; align-items: center; }
.lb-leiste input[type=range] { width: 120px; }
.modus-luftbild [data-stall-name], .modus-luftbild [data-silo] { pointer-events: none; }
.modus-luftbild [data-stall-name] polygon { fill-opacity: .15; }
.modus-staelle [data-silo] { pointer-events: none; }
.modus-staelle [data-stall-name] { cursor: pointer; }
.modus-staelle [data-stall-name].anp-an { cursor: move; }
.modus-staelle [data-stall-name].anp-an polygon { stroke: var(--rot); stroke-width: 4; fill-opacity: .35; }
.anp-griff { fill: #fff; stroke: var(--rot); stroke-width: 3; cursor: nwse-resize; }
.anp-dreh { fill: var(--rot); font-weight: 900; cursor: grab; user-select: none; }
.anp-direkt { margin-left: auto; font-size: 12px; }
.plan-box svg { overflow: hidden; }
.anp-wand { fill: #FFD54F; stroke: #6D4C00; stroke-width: 2; cursor: ew-resize; }
/* Tourkarte: Tafel links, Karte + Fahrplan rechts (wie Lageplan) */
.trennstrich { width: 1px; align-self: stretch; background: var(--linie); margin: 0 6px; }
.tk-rumpf { height: calc(100vh - 240px); }
.tk-links { flex: 1; min-width: 0; overflow: auto; padding-right: 4px; }
.tk-seite { flex: none; }
.tk-seite .detail { flex: 1; overflow: auto; }
.tk-kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tk-kopf h2 { margin: 0; margin-right: auto; font-size: 15px; }
.tk-karte { background: #CFE3EE; border: 1px solid var(--linie); border-radius: 4px; margin: 8px 0 2px; }
.tk-svg { display: block; width: 100%; height: auto; max-height: 52vh; }
.tk-land { fill: #F4F1EA; stroke: #B9B2A5; }
.tk-weg { fill: none; stroke: var(--rot); stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.tk-kunde { fill: #5E6B73; stroke: #fff; stroke-width: .6; cursor: pointer; opacity: .85; }
.tk-kunde:hover { fill: var(--rot); opacity: 1; }
.tk-stopp { cursor: pointer; }
.tk-stopp circle { fill: var(--rot); stroke: #fff; stroke-width: 1.2; }
.tk-stopp text { fill: #fff; font-weight: 800; }
.tk-stopp text.tk-name { fill: #23272B; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 2.5px; }
.tk-hof rect { fill: #fff; stroke: var(--rot); stroke-width: 1.5; }
.tk-quelle { margin: 0 0 6px; }
.tk-summen { margin: 6px 0; }
.tk-plan { list-style: none; padding: 0; margin: 6px 0; }
.tk-plan li { display: grid; grid-template-columns: 52px 26px 1fr auto 22px; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--linie); }
.tk-plan li[draggable] { cursor: grab; }
.tk-plan li.ziel { background: var(--rot-sanft); }
.tk-plan li.zieht { opacity: .4; }
.tk-plan li.tk-hofzeile { display: block; color: var(--grau); }
.tk-plan .tk-pause { grid-column: 1 / -1; font-size: 12px; color: #6D4C00; background: var(--ocker-sanft); border-radius: 3px; padding: 2px 6px; }
.tk-uhr { font-weight: 800; font-variant-numeric: tabular-nums; }
.tk-hofzeile .tk-uhr { display: inline-block; width: 52px; }
.tk-nr { background: var(--rot); color: #fff; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.tk-wer { display: grid; }
.tk-fahrt { white-space: nowrap; }
.tour.tk-an { outline: 2px solid var(--rot); outline-offset: 1px; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .tk-karte { background: #1E2A31; } :root:not([data-thema="hell"]) .tk-land { fill: #2B2F33; stroke: #4A5056; } :root:not([data-thema="hell"]) .tk-stopp text.tk-name { fill: #fff; stroke: #000; } }
:root[data-thema="dunkel"] .tk-karte { background: #1E2A31; } :root[data-thema="dunkel"] .tk-land { fill: #2B2F33; stroke: #4A5056; } :root[data-thema="dunkel"] .tk-stopp text.tk-name { fill: #fff; stroke: #000; }
@media (max-width: 900px) { .tk-rumpf { height: auto; } .tk-seite { width: auto !important; } }

/* ══ Kontrast & Bedienbarkeit (Julian 27.10.: „zu dunkel, man erkennt nicht, was man drücken kann“) ══
   Drei Ebenen: Grund < Karte < erhöht (Köpfe). Knöpfe haben eine eigene, hellere Fläche mit sichtbarem Rand,
   Eingabefelder sind dunkler als die Karte (eingelassen), Hauptknöpfe Burgund mit weißer Schrift (> 5:1). */
:root { --erhoeht: #F1EBEB; --knopf2: #FFFFFF; --knopf2-rand: #8E7F80; --knopf2-hover: #F6EEEE; --feld: #FFFFFF;
  --feld-rand: #8E7F80; --primaer: #7C272E; --primaer-hover: #61181E; --fokus: #D42A30; --linie: #DCCDCE; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { --grund: #151112; --karte: #221C1D; --erhoeht: #2F2728; --linie: #4B4042; --tinte: #F5F0F0; --grau: #C9BFBF;
  --knopf2: #3A3133; --knopf2-rand: #7A6B6D; --knopf2-hover: #4A3F41; --feld: #100D0E; --feld-rand: #7A6B6D;
  --primaer: #B23C46; --primaer-hover: #C84C57; --rot: #FFA1A7; --rot-sanft: #3E2226; --fokus: #FFA1A7;
  --leer: #2A2324; } }
:root[data-thema="dunkel"] { --grund: #151112; --karte: #221C1D; --erhoeht: #2F2728; --linie: #4B4042; --tinte: #F5F0F0; --grau: #C9BFBF;
  --knopf2: #3A3133; --knopf2-rand: #7A6B6D; --knopf2-hover: #4A3F41; --feld: #100D0E; --feld-rand: #7A6B6D;
  --primaer: #B23C46; --primaer-hover: #C84C57; --rot: #FFA1A7; --rot-sanft: #3E2226; --fokus: #FFA1A7;
  --leer: #2A2324; }
.knopf { background: var(--primaer); color: #fff; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: background .12s, border-color .12s; }
.knopf:hover { background: var(--primaer-hover); }
.knopf.leise, a.knopf.leise { background: var(--knopf2); color: var(--tinte); border: 1px solid var(--knopf2-rand); text-decoration: none; }
.knopf.leise:hover { background: var(--knopf2-hover); border-color: var(--rot); }
.knopf:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.eingabe { background: var(--feld); border: 1px solid var(--feld-rand); color: var(--tinte); }
.eingabe:hover { border-color: var(--rot); }
.eingabe:focus { outline: 2px solid var(--fokus); outline-offset: 0; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.kachelknopf { background: var(--knopf2); border: 1px solid var(--knopf2-rand); color: var(--tinte); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.kachelknopf:hover { background: var(--knopf2-hover); border-color: var(--rot); }
.kachelknopf b { color: var(--tinte); }
.kachelknopf.an { background: var(--rot-sanft); border-color: var(--rot); color: var(--rot); }
table.liste th { background: var(--erhoeht); color: var(--tinte); }
table.liste tr.wahl, [data-zeile], [data-ls] { cursor: pointer; }
table.liste tr.wahl:hover td { background: var(--rot-sanft) !important; }
.plan-kopf { background: var(--erhoeht); }
.tour-kopf { background: var(--erhoeht); padding: 4px 6px; border-radius: 3px; }
.tour-kopf button, .ort-titel { text-decoration: underline; text-underline-offset: 2px; color: var(--rot); }
.reiterleiste button { color: var(--grau); }
.reiterleiste button:hover { color: var(--tinte); }
.reiterleiste button.an { color: var(--rot); box-shadow: inset 0 3px 0 var(--rot); }
.reiter button { color: var(--grau); }
.reiter button:hover { color: var(--tinte); background: var(--knopf2-hover); }
.reiter button.an { color: var(--rot); background: var(--karte); box-shadow: inset 0 3px 0 var(--rot); }
.aufklapp > button { color: #fff; }
.menue-liste { background: var(--karte); border-color: var(--knopf2-rand); }
.chip { background: var(--knopf2); border-color: var(--knopf2-rand); color: var(--tinte); }
.chip:hover { border-color: var(--rot); }
.link { color: var(--rot); }
.themaknopf { border: 1px solid rgba(255,255,255,.5); background: none; color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 13px; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .reiterleiste { background: #1C1617; } :root:not([data-thema="hell"]) .knopf.leise { background: var(--knopf2); } :root:not([data-thema="hell"]) table.liste tbody tr:nth-child(even) td { background: #1E1819; } :root:not([data-thema="hell"]) .bl-liste tr.gruppe td { background: var(--erhoeht) !important; } }
:root[data-thema="dunkel"] .reiterleiste { background: #1C1617; } :root[data-thema="dunkel"] .knopf.leise { background: var(--knopf2); } :root[data-thema="dunkel"] table.liste tbody tr:nth-child(even) td { background: #1E1819; } :root[data-thema="dunkel"] .bl-liste tr.gruppe td { background: var(--erhoeht) !important; }
:root[data-thema="hell"] { color-scheme: light; } :root[data-thema="dunkel"] { color-scheme: dark; }
.plan-schrift { paint-order: stroke; stroke: #fff; stroke-linejoin: round; }
/* Standort-Kopf: ganze Leiste klickbar; Bearbeitungsmodus sichtbar abgesetzt */
.plan-kopf { cursor: pointer; }
.plan-kopf:hover { box-shadow: inset 0 -2px 0 var(--rot); }
.lb-bearbeiten { background: var(--ocker-sanft); border: 1px solid var(--ocker); border-radius: 4px; padding: 3px 8px; cursor: default; }
/* Zeitmaschine */
.zm-band { display: flex; gap: 14px; align-items: center; background: var(--karte); border: 1px solid var(--knopf2-rand); border-radius: 6px;
  padding: 8px 12px; margin-bottom: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.zm-datum { min-width: 260px; }
.zm-datum b { font: 800 20px/1.1 var(--titel); color: var(--rot); }
.zm-regler { flex: 1; position: relative; min-width: 260px; }
.zm-kurve { width: 100%; height: 46px; display: block; }
.zm-flaeche { fill: var(--rot-sanft); }
.zm-linie { fill: none; stroke: var(--rot); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.zm-monat { stroke: var(--linie); stroke-width: 1; vector-effect: non-scaling-stroke; }
.zm-cursor { stroke: var(--tinte); stroke-width: 2; vector-effect: non-scaling-stroke; }
.zm-regler input[type=range] { width: 100%; margin: 2px 0 0; accent-color: var(--primaer); }
.zm-monate { position: relative; height: 14px; font-size: 11px; color: var(--grau); }
.zm-monate span { position: absolute; transform: translateX(-50%); }
#plan-flaeche g.zm-neu polygon:last-of-type { animation: zm-blitz .6s ease-out; }
@keyframes zm-blitz { from { stroke-width: 10; } }
@media (max-width: 900px) { .zm-band { flex-wrap: wrap; } }
/* Tour abspielen + QR */
.tk-karte { position: relative; }
.tk-uhrband { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(20,16,17,.82); color: #fff; border-radius: 6px;
  padding: 6px 12px; font-size: 13px; display: flex; gap: 10px; align-items: baseline; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.tk-uhrband b { font: 800 22px/1 var(--titel); font-variant-numeric: tabular-nums; }
.tk-lkw-kreis { fill: #fff; stroke: var(--primaer); stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.tk-schild rect { fill: var(--primaer); }
.tk-schild text { fill: #fff; font-weight: 800; }
.tk-plan li.tk-jetzt { background: var(--rot-sanft); box-shadow: inset 4px 0 0 var(--rot); }
.qr-feld { display: grid; place-items: center; background: #fff; border-radius: 6px; padding: 12px; margin: 10px 0; }
.qr-feld img { width: min(320px, 80vw); height: auto; image-rendering: pixelated; }
/* Wetter */
.wetter-chip { font-size: 12.5px; white-space: nowrap; }
.wetter-chip:empty { display: none; }
.wetter-chip .hitze { color: #fff; border-radius: 3px; padding: 1px 6px; margin-left: 4px; font-size: 11.5px; }
.wetter-tage { margin-left: 8px; color: var(--grau); }
.wetter-tage span { margin-left: 8px; }
.tk-heiss { color: #E65100; }
.tk-hitze { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Frag den Hof */
.frage-feld input { width: 260px; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12); color: #fff;
  border-radius: 999px; padding: 5px 14px; font-size: 13.5px; }
.frage-feld input::placeholder { color: rgba(255,255,255,.85); }
.frage-feld input:focus { outline: 2px solid #fff; background: rgba(255,255,255,.2); }
.frage-zeile { display: flex; gap: 8px; }
.frage-beispiele { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.frage-beispiele .chip { cursor: pointer; }
.frage-antwort { min-height: 40px; }
.frage-text { font-size: 15px; line-height: 1.5; background: var(--erhoeht); border-left: 4px solid var(--rot); border-radius: 4px; padding: 10px 14px; }
.frage-text p { margin: 4px 0; }
.frage-text table { margin-top: 8px; }
.frage-denkt { color: var(--grau); display: flex; gap: 5px; align-items: center; }
.frage-denkt span { width: 8px; height: 8px; border-radius: 50%; background: var(--rot); animation: frage-punkt 1s infinite ease-in-out; }
.frage-denkt span:nth-child(2) { animation-delay: .15s; } .frage-denkt span:nth-child(3) { animation-delay: .3s; }
@keyframes frage-punkt { 0%, 80%, 100% { opacity: .2; transform: scale(.7); } 40% { opacity: 1; transform: scale(1); } }
@media (max-width: 900px) { .frage-feld { display: none; } }
/* Fuhrpark */
.fuhrpark { display: flex; gap: 12px; margin: 6px 0 10px; overflow-x: auto; padding-bottom: 4px; }
.fz-karte { flex: 0 0 290px; display: flex; background: var(--karte); border: 1px solid var(--knopf2-rand); border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.12); transition: transform .15s, box-shadow .15s; }
.fz-karte:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.fz-karte.ab { filter: grayscale(.85); opacity: .8; }
.fz-foto { position: relative; flex: 0 0 120px; height: 92px; background: linear-gradient(135deg, var(--erhoeht), var(--karte)); }
.fz-gross { width: 120px; height: 92px; object-fit: cover; display: block; }
.fz-ohne { display: grid; place-items: center; }
.fz-silhouette { width: 86%; fill: var(--rot); opacity: .9; }
.fz-silhouette .fz-glas { fill: var(--karte); opacity: .85; }
.fz-kamera { position: absolute; right: 4px; bottom: 4px; border: 0; border-radius: 50%; width: 28px; height: 28px; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; }
.fz-kamera:hover { background: var(--primaer); }
.fz-text { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; min-width: 0; }
.fz-text b { font: 800 16px/1.1 var(--titel); }
.fz-art { font-size: 12px; color: var(--grau); }
.fz-status { font-size: 12px; color: var(--gruen); font-weight: 700; }
.fz-status.ab { color: #C62828; }
.fz-text .knopf { align-self: flex-start; margin-top: auto; }
.fz-kopf { display: inline-flex; gap: 6px; align-items: center; min-width: 0; }
.fz-mini { width: 34px; height: 24px; border-radius: 4px; object-fit: cover; flex: none; background: var(--karte); }
.fz-mini.fz-ohne .fz-silhouette { width: 30px; }
.fz-mini.fz-hof { display: grid; place-items: center; font-size: 15px; }
.fz-ab { font-size: 11px; color: #C62828; font-weight: 700; }
.tour.tour-ab { opacity: .6; background-image: repeating-linear-gradient(45deg, transparent 0 8px, rgba(198,40,40,.06) 8px 16px); }
.tour.tour-ohne { border: 1px dashed #E65100; background: rgba(230,81,0,.06); }
.fz-tk { width: 64px; height: 44px; border-radius: 6px; object-fit: cover; flex: none; }
.tk-kopf .fz-tk.fz-ohne .fz-silhouette { width: 56px; }
/* Weide und Gänse */
.weide-flaeche { fill: #7CB342; fill-opacity: .28; }
.weide-zaun { fill: none; stroke: #8D6E63; stroke-linejoin: round; }
.weide-pfosten { fill: none; stroke: #5D4037; stroke-linecap: round; }
.weide-punkt { fill: #fff; stroke: #5D4037; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.gans ellipse, .gans circle { fill: #FAFAFA; stroke: #5F5F5F; stroke-width: .6; vector-effect: non-scaling-stroke; }
.gans .gans-hals { fill: none; stroke: #FAFAFA; stroke-linecap: round; }
.gans .gans-schnabel { fill: #FB8C00; }
.gans .gans-auge { fill: #222; stroke: none; }
.gaense { pointer-events: none; }
/* Yuna */
.yuna .yuna-hund, .yuna .yuna-sitzend { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); }
.yuna .yuna-sitzend, .yuna.sitzt .yuna-hund { display: none; }
.yuna.sitzt .yuna-sitzend { display: inline; }
.yuna .yuna-zunge { opacity: 0; transition: opacity .2s; }
.yuna.hechelt .yuna-zunge { opacity: 1; }
.yuna .yuna-blase { opacity: 0; transition: opacity .2s; pointer-events: none; }
.yuna .yuna-blase rect { fill: #fff; stroke: #5D4037; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.yuna .yuna-blase text { fill: #3E2723; font-weight: 800; }
.yuna.bellt .yuna-blase { opacity: 1; }
.yuna .yuna-name { fill: #fff; font-weight: 800; opacity: 0; paint-order: stroke; stroke: #17171A; stroke-width: 2px; transition: opacity .2s; }
.yuna:hover .yuna-name { opacity: 1; }
.yuna-bereich polygon { fill: #F9A825; fill-opacity: .08; stroke: #F9A825; stroke-opacity: .7; cursor: pointer; }
/* Huhn, das Yuna jagt */
.yuna.jagt .yuna-blase { opacity: 1; }
.huhn { pointer-events: none; }
.huhn .huhn-feder { fill: #FFFFFF; stroke: #9E9E9E; stroke-width: .8; vector-effect: non-scaling-stroke; }
.huhn .huhn-fluegel { fill: #EEEEEE; stroke: #9E9E9E; stroke-width: .8; vector-effect: non-scaling-stroke; }
.huhn .huhn-kamm { fill: #D32F2F; }
.huhn .huhn-schnabel { fill: #F9A825; }
.huhn .huhn-bein { fill: none; stroke: #F57F17; stroke-linecap: round; }
.huhn .huhn-koerper { filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); transition: opacity .7s, transform .7s; transform-box: fill-box; transform-origin: center; }
.huhn .huhn-gack { fill: #3E2723; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 2px; transition: opacity .3s; }
.huhn.weg .huhn-koerper { opacity: 0; transform: translateY(-120%) scale(.6) rotate(-20deg); }
.huhn.weg .huhn-gack { opacity: 0; }
.hinweis.sorte-leer { background: #FDECEA; color: #B71C1C; border-left-color: #B71C1C; }
.zieh-pfeil { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 299; pointer-events: none; }
.zieh-pfeil .strich { stroke: var(--rot); stroke-width: 4; stroke-linecap: round; }
.zieh-pfeil .schatten { stroke: #fff; stroke-opacity: .8; stroke-width: 8; stroke-linecap: round; }
.zieh-pfeil marker path { fill: var(--rot); }
.zieh-pfeil circle { fill: var(--rot); stroke: #fff; stroke-width: 2; }

/* Lieferschein: anderer Stall mit einem Klick (Kuerzel neben der geratenen Position) */
.ls-alt { font: inherit; font-size: 11px; font-weight: 700; line-height: 1.5; padding: 0 6px; margin-left: 3px; cursor: pointer;
  color: var(--rot); background: transparent; border: 1px solid var(--linie); border-radius: 3px; }
.ls-alt:hover { background: var(--rot-sanft); border-color: var(--rot); }
.ls-alt:focus-visible { outline: 2px solid var(--rot); outline-offset: 1px; }
.ls-alt:disabled { opacity: .5; cursor: default; }
@media (max-width: 900px) { .ls-alt { padding: 3px 9px; font-size: 12.5px; } }

/* Lieferschein: Stall und Menge klar getrennt */
.ls-zu { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; align-items: baseline; }
.ls-zu:not(:first-child) { margin-top: 5px; }
.ls-stall { font-weight: 600; }
.ls-tiere { color: var(--grau); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ls-zu + .q { margin-left: 0; }

/* Lieferschein: Kopf, Zeilen, Liste und Reiter aufgeräumt */
.ls-kopf-detail { justify-content: space-between; }
.ls-kopf-titel { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-width: 0; }
.ls-kopf-knoepfe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ls-kopf-knoepfe .knopf { margin-left: 0; }
.knopf.gruen { background: #2F7D34; }
.knopf.gruen:hover { background: #27692B; }
.ls-zeile { display: flex; flex-wrap: wrap; gap: 3px 4px; align-items: center; margin-top: 2px; }
.ls-zeile .q { margin-left: 0; }
.ls-alts { display: inline-flex; gap: 4px; white-space: nowrap; }
.ls-alt { margin-left: 0; }
.ls-bestand { white-space: nowrap; }
.ls-zugeordnet { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.ls-zugeordnet-teil { display: inline-flex; gap: 6px; align-items: center; padding: 2px 4px 2px 8px; font-size: 12.5px;
  border: 1px solid var(--linie); border-radius: 3px; }
.ls-zugeordnet-teil .link { padding: 0 4px; font-size: 12px; line-height: 1.5; }
.ls-links table.liste { table-layout: fixed; width: 100%; }
.bl-rumpf .ls-links table.liste td { overflow: hidden; text-overflow: ellipsis; }
.ls-links table.liste th:nth-child(1) { width: 92px; }
.ls-links table.liste th:nth-child(3) { width: 84px; }
.ls-links table.liste th:nth-child(4) { width: 68px; }
@media (max-width: 900px) {
  .reiterleiste { flex-wrap: wrap; overflow-x: visible; padding: 4px 6px 0; }
  .reiterleiste button { padding: 6px 10px; }
  .ls-alt { padding: 3px 7px; }
}
@media (max-width: 600px) { #ls-detail .ls-raster table.liste th:first-child, #ls-detail .ls-raster table.liste td:first-child { display: none; } }   /* Handy: Pos. weg, damit Bestand sichtbar bleibt */
@media (max-width: 600px) { #ls-detail .ls-raster table.liste th, #ls-detail .ls-raster table.liste td { padding-left: 5px; padding-right: 5px; } }

/* Hofkamera */
.kamera-stand { margin: 0 0 6px; }
.kamera-live { color: var(--kamm); font-weight: 700; }
.kamera-bild { display: block; width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 4px; background: #000; }

/* Beta (echte Daten) statt Testversion */
.testband.beta { background: var(--gruen-sanft); color: var(--gruen); }