/* Stall-App – Aussehen wie die Website (Burgund, Logo-Plakette, 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 {
  --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; }
:focus-visible { outline: 3px solid var(--kamm); outline-offset: 2px; }
[hidden] { display: none !important; }

header.kopf { position: sticky; top: 0; z-index: 40; background: var(--kopf); color: #fff; display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  box-shadow: 0 8px 30px rgba(90,26,32,.18); }
.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 17px/1.1 var(--titel); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: auto; }
.marke small { display: block; font: 600 11px var(--schrift); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.netz { font-size: 13px; background: rgba(255,255,255,.14); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.netz.aus { background: #fff; color: var(--kamm); font-weight: 700; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font: 800 15px var(--titel); flex: none; border: 2px solid #fff; }
.mini { width: 20px; height: 20px; border: 0; font-size: 11px; margin-right: 5px; vertical-align: middle; }

.rumpf { display: grid; grid-template-columns: minmax(0, 1fr); }
main { min-width: 0; padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(96px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.seitenleiste { display: none; }
nav.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--karte); border-top: 1px solid var(--linie); display: grid;
  padding: 6px max(4px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px)); }
nav.leiste button { border: 0; background: none; color: var(--grau); font-size: 12px; display: grid; justify-items: center; gap: 2px; padding: 4px 0; min-width: 0; }
nav.leiste button svg { width: 24px; height: 24px; }
nav.leiste button.an { color: var(--rot); font-weight: 700; }

h1 { font: 800 30px/1.05 var(--titel); letter-spacing: -.03em; margin: 4px 0 2px; }
h2 { font: 700 19px var(--titel); letter-spacing: -.02em; margin: 24px 2px 10px; }
.unter { color: var(--grau); font-size: 13px; margin: 0 0 12px; }
.klein { font-size: 12.5px; color: var(--grau); }
.zw { display: inline-grid; line-height: 1.15; text-align: inherit; }
.zw small { font-size: .72em; font-weight: 400; opacity: .75; }
[data-hilfe] { text-decoration: underline dotted; text-underline-offset: 3px; }

.hinweis { border-radius: 14px; padding: 11px 14px; margin-bottom: 12px; font-weight: 600; font-size: 14px; }
.hinweis.warte { background: var(--ocker-sanft); color: var(--ocker); }
.hinweis.sperre { background: var(--rot-sanft); color: var(--kamm); }
.hinweis.install { background: var(--gruen-sanft); color: var(--gruen); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hinweis.install #install-weg { margin-left: auto; }
.runde { background: var(--karte); border: 1px solid var(--linie); border-radius: 18px; padding: 12px 14px; margin-bottom: 10px; display: grid; gap: 3px; }
.runde b { font: 700 18px var(--titel); } .runde span { font-size: 13px; color: var(--grau); }
.balken { height: 5px; background: var(--linie); border-radius: 3px; overflow: hidden; margin-top: 4px; } .balken i { display: block; height: 100%; background: var(--gruen); }
.liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.karte { display: flex; align-items: stretch; gap: 6px; background: var(--karte); border: 1px solid var(--linie); border-radius: 18px; padding: 6px; min-width: 0; }
.karte.fertig { border-color: var(--gruen); background: var(--gruen-sanft); }
.karte-text { flex: 1; min-width: 0; border: 0; background: none; text-align: left; padding: 8px 10px; display: grid; gap: 4px; justify-items: start; }
.karte-text b { font: 700 19px var(--titel); } .karte-text small { color: var(--grau); font-size: 12.5px; }
.notiz { color: var(--ocker) !important; font-weight: 600; }
.haken { flex: none; width: 68px; border-radius: 14px; border: 2px solid var(--linie); background: var(--grund); font-size: 28px; color: var(--grau); display: grid; place-items: center; align-content: center; }
.haken.an { color: #fff; } .haken.an b { font: 800 26px/1 var(--titel); } .haken.an small { font-size: 10.5px; font-weight: 700; }
.pille { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.p-gruen { background: var(--gruen-sanft); color: var(--gruen); } .p-gelb { background: var(--ocker-sanft); color: var(--ocker); }
.p-rot { background: var(--rot-sanft); color: var(--kamm); } .p-leer { background: var(--grund); color: var(--grau); border: 1px solid var(--linie); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; max-width: 100%; } .chips::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip { flex: none; border: 1px solid var(--linie); background: var(--karte); border-radius: 999px; padding: 8px 14px; font-size: 14px; }
.chip.an { border-color: var(--rot); background: var(--rot-sanft); color: var(--rot); font-weight: 700; }
.knopf { border: 0; border-radius: 999px; background: var(--rot); color: #fff; padding: 15px; font-size: 16px; font-weight: 700; width: 100%; }
.knopf.leise { background: var(--karte); color: var(--tinte); border: 1px solid var(--linie); font-weight: 600; }
.knopfreihe { display: grid; gap: 8px; margin-top: 14px; }
.eingabe { width: 100%; border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; background: var(--karte); font-size: 16px; min-width: 0; }
.zaehler { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 10px; align-items: center; }
.zaehler button { height: 56px; border-radius: 14px; border: 1px solid var(--linie); background: var(--karte); font-size: 26px; }
.zaehler input { text-align: center; font: 800 32px var(--titel); padding: 6px; }
.silo-zeile { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .silo-zeile > span { width: 58px; font-weight: 700; flex: none; }

.plan-box { background: var(--plan-boden); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; margin-top: 10px; position: relative; }
.zoom-knoepfe { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; align-items: center; }
.zoom-knoepfe button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linie); background: var(--karte); font-size: 20px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.zoom-stufe { font-size: 12px; font-weight: 700; color: var(--grau); background: var(--karte); border-radius: 999px; padding: 2px 8px; }
.zoom-stufe:empty { display: none; }
.plan-box svg { display: block; width: 100%; height: auto; max-height: 62vh; }
.plan-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

.tabelle-box { overflow-x: auto; background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 4px 10px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
td, th { padding: 8px 6px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: middle; }
th { color: var(--grau); font-size: 12px; }
.zeile { display: flex; align-items: center; gap: 10px; background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 10px 12px; min-width: 0; }
.zeile .text { flex: 1; min-width: 0; } .zeile .text b { display: block; } .zeile .text small { color: var(--grau); font-size: 12.5px; }

.schleier { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 70; }
.blatt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--karte); border-radius: 22px 22px 0 0; max-height: 88%; overflow-y: auto;
  padding: 10px max(18px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); box-shadow: 0 -12px 30px rgba(0,0,0,.2); }
.griff { width: 42px; height: 5px; border-radius: 3px; background: var(--linie); margin: 0 auto 12px; }
.blatt-titel { font: 700 24px/1.15 var(--titel); }
.blatt h3 { font: 700 15px var(--titel); margin: 16px 0 8px; }
.notizen { background: var(--ocker-sanft); border-radius: 12px; padding: 10px 12px; margin-top: 10px; font-size: 14px; display: grid; gap: 4px; }
.meldung { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 90; background: var(--tief); color: #fff; border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.leer-schirm { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 10px; }
.leer-schirm .plakette { width: 88px; height: 88px; border: 3px solid var(--linie); }

@media (min-width: 900px) {
  .rumpf { grid-template-columns: 230px minmax(0, 1fr); }
  nav.leiste { display: none !important; }
  .seitenleiste { display: flex; flex-direction: column; gap: 4px; background: var(--tief); color: #fff; padding: 18px 12px; position: sticky; top: 62px; height: calc(100vh - 62px); }
  .seitenleiste button { border: 0; background: none; color: #fff; text-align: left; padding: 11px 14px; border-radius: 999px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
  .seitenleiste button svg { width: 20px; height: 20px; opacity: .8; }
  .seitenleiste button.an { background: #fff; color: #7C272E; }
  main { padding: 24px 32px 40px; max-width: 1180px; }
  #orte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-box svg { max-height: 72vh; }
  .blatt { left: auto; right: 24px; bottom: 24px; width: 420px; border-radius: 20px; max-height: 82vh; }
  .meldung { left: auto; right: 24px; bottom: 24px; width: 380px; }
}

/* Aufgaben */
.aufg { display: flex; gap: 10px; align-items: center; background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 10px 12px; min-width: 0; }
.aufg.fertig { opacity: .75; } .aufg.fertig .aufg-text > b { text-decoration: line-through; }
.aufg-text { flex: 1; min-width: 0; border: 0; background: none; text-align: left; display: grid; gap: 3px; justify-items: start; padding: 0; }
.aufg-text small { color: var(--grau); font-size: 12.5px; }
.haken.rund { width: 46px; height: 46px; border-radius: 50%; font-size: 20px; flex: none; }
.haken.rund.an b { font-size: 18px; }
.karte-box { background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 14px; }
.hinweis.neu-aufgabe { display: flex; justify-content: space-between; width: 100%; border: 0; text-align: left; background: var(--rot); color: #fff; }

/* Standorte: Kacheln (zu: schnell abhaken; offen: Lageplan, Abhaken, Bemerkung) */
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kachel { display: flex; align-items: stretch; gap: 4px; background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 4px; min-width: 0; }
.kachel.fertig { border-color: var(--gruen); background: var(--gruen-sanft); }
.kachel-text { flex: 1; min-width: 0; border: 0; background: none; text-align: left; padding: 8px; display: grid; gap: 3px; justify-items: start; align-content: start; }
.kachel-text b { font: 700 17px/1.15 var(--titel); overflow-wrap: anywhere; } .kachel-text small { color: var(--grau); font-size: 12px; }
.kachel .haken { width: 48px; font-size: 22px; }
.kachel .haken.an b { font-size: 20px; } .kachel .haken.an small { display: none; }
.kachel.offen { grid-column: 1 / -1; display: block; padding: 12px; }
.kachel-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .kachel-kopf b { font: 700 22px var(--titel); margin-right: auto; }
.kachel-knoepfe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 10px 0 0; }
.kachel-knoepfe .haken.gross { width: auto; height: auto; min-height: 52px; border-radius: 999px; font-size: 16px; font-weight: 700; display: flex; gap: 6px; justify-content: center; align-items: center; padding: 10px; }
.kachel-knoepfe .haken.gross.an small { display: inline; font-size: 13px; }
.kachel-knoepfe .knopf { padding: 12px; font-size: 15px; }
@media (min-width: 900px) { .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }