@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#102938;--ink:#152b35;--blue:#346d80;--teal:#0f837e;--mint:#e7f5f1;--mint2:#cae9e0;--line:#e4eae8;--muted:#687a7e;--background:#f6f8f7;--white:#fff;--sand:#f8f2e9;--amber:#bd7b21;--red:#ae4949;--shadow:0 18px 45px rgba(18,41,54,.045)}
*{box-sizing:border-box}body{font-family:'DM Sans',system-ui,-apple-system,sans-serif;margin:0;background:var(--background);color:var(--ink);font-size:14px;line-height:1.45}h1,h2,h3,p{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}a{color:var(--blue)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #99cfc7;outline-offset:1px}.shell{display:grid;grid-template-columns:246px 1fr;min-height:100vh}.sidebar{background:var(--navy);color:#eff8f5;padding:27px 19px;display:flex;flex-direction:column;gap:23px}.brand{display:flex;align-items:center;gap:12px;margin:4px 6px 16px}.brandmark{width:36px;height:36px;border-radius:12px;background:#c1ede2;color:#14504e;display:grid;place-items:center;font-size:21px;font-weight:800}.brand b{display:block;font-size:16px;letter-spacing:-.5px}.brand small{display:block;color:#aec5c7;font-size:11px;letter-spacing:.03em}.nav-section{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#98b6bb;padding:0 13px;font-weight:700}.nav{display:grid;gap:5px}.nav-btn{border:0;background:transparent;color:#bfd0d2;text-align:left;padding:12px 13px;border-radius:10px;display:flex;gap:12px;align-items:center;width:100%;font-weight:600}.nav-btn:hover,.nav-btn.active{background:#234351;color:white}.nav-ico{width:18px;font-size:17px;text-align:center}.side-spacer{flex:1}.side-foot{border-top:1px solid #36505b;padding-top:17px;display:grid;gap:10px}.mini-avatar{width:36px;height:36px;background:#d6eee4;color:#145b57;font-weight:800;border-radius:50%;display:grid;place-items:center}.identity{display:flex;align-items:center;gap:9px}.identity strong{font-size:13px}.identity small{display:block;font-size:11px;color:#b4c9cc}.logout{background:none;border:1px solid #55707a;color:#d9eae8;padding:9px 14px;border-radius:9px}.main{min-width:0;padding:29px max(26px,calc((100vw - 1300px)/2)) 65px}.topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:23px}.topbar h1{font-family:Manrope,sans-serif;font-size:27px;letter-spacing:-1.1px;font-weight:800}.overline{font-weight:800;color:var(--teal);text-transform:uppercase;letter-spacing:.15em;font-size:11px;margin-bottom:5px}.sub{color:var(--muted);margin-top:7px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #d2e0df;padding:10px 16px;background:var(--white);color:var(--ink);border-radius:10px;font-weight:700;white-space:nowrap;min-height:40px}.btn.primary{background:var(--navy);color:white;border-color:var(--navy)}.btn.teal{background:var(--teal);color:white;border-color:var(--teal)}.btn:hover:not(:disabled){filter:brightness(.96)}.btn.small{font-size:12px;padding:6px 11px;min-height:31px}.btn.danger{color:var(--red);border-color:#efcdcd}.btn:disabled{pointer-events:none}.actions{display:flex;flex-wrap:wrap;gap:9px}.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.hero{display:grid;grid-template-columns:1.35fr .65fr;align-items:center;gap:16px;min-height:148px;border:1px solid #d4e3dd;background:linear-gradient(120deg,#e4f5ee,#f4f9f4);padding:23px 27px;border-radius:18px;margin-bottom:19px;overflow:hidden}.hero h2{font-size:19px;font-family:Manrope,sans-serif;line-height:1.3;letter-spacing:-.7px}.hero p{color:#506a6d;margin-top:8px;max-width:540px}.hero-figure{display:flex;align-items:center;justify-content:center;opacity:.9}.hero-figure svg{max-width:280px;width:100%}.grid{display:grid;gap:14px}.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:var(--white);border:1px solid var(--line);border-radius:15px;padding:21px;box-shadow:var(--shadow);min-width:0}.kpi-label{color:var(--muted);font-weight:700;font-size:12px}.kpi-main{font-size:31px;font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-1.5px;margin:10px 0 6px;line-height:1.1}.kpi-main.teal{color:var(--teal)}.kpi-note{font-size:12px;color:var(--muted);min-height:18px}.section{margin-top:20px}.panel-head{display:flex;gap:15px;align-items:start;justify-content:space-between;margin-bottom:20px}.panel-head h2{font-family:Manrope,sans-serif;font-size:16px;letter-spacing:-.3px}.panel-head p{color:var(--muted);font-size:12px;margin-top:4px}.split{display:grid;grid-template-columns:1.3fr 1fr;gap:15px}.plot{width:100%;min-height:220px}.plot text{font-family:'DM Sans',sans-serif;fill:#6b8084;font-size:11px}.plot .gridline{stroke:#e6efed;stroke-width:1}.plot .series{fill:none;stroke:#008c82;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.plot .dot{fill:#008c82;stroke:white;stroke-width:2}.empty{padding:40px 15px;text-align:center;color:var(--muted);background:#f8faf9;border-radius:13px}.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:12px}table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}th{text-align:left;background:#f7faf9;color:#708083;font-size:11px;letter-spacing:.015em;font-weight:800}td,th{padding:11px 14px;border-bottom:1px solid #edf0ef}tr:last-child td{border-bottom:0}tbody tr:hover{background:#fbfcfc}.num{text-align:right;font-variant-numeric:tabular-nums}.pill{display:inline-flex;align-items:center;border-radius:30px;padding:4px 9px;font-size:11px;font-weight:800;background:#e6f5ee;color:#157452}.pill.warn{background:#fff1d9;color:#936018}.pill.muted{background:#edf2f1;color:#607575}.pill.danger{background:#ffe9e9;color:#a64747}.footnote{font-size:12px;color:var(--muted);line-height:1.6;margin-top:13px}.muted{color:var(--muted)}.columns{display:grid;grid-template-columns:minmax(340px,1fr) minmax(320px,1fr);gap:17px}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.formgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.formgrid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#53666b;font-weight:700}.field input,.field select,.field textarea{width:100%;background:#fff;border:1px solid #d4e0de;border-radius:9px;color:var(--ink);padding:10px 11px;min-height:40px}.field textarea{min-height:65px;resize:vertical}.full{grid-column:1/-1}.upload{border:1.5px dashed #a5c9c2;background:#f6fbf9;min-height:116px;border-radius:13px;padding:20px;text-align:center;display:grid;place-items:center;gap:7px}.upload:hover{background:#edf8f4}.upload b{color:#315e5e}.upload small{color:#778b8b}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:9px;margin-top:12px}.photo{border:1px solid #dce7e4;border-radius:11px;padding:7px;background:#fff;overflow:hidden}.photo img{width:100%;height:87px;object-fit:cover;border-radius:6px;display:block}.photo strong{font-size:10px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px}.photo .btn{width:100%;margin-top:6px;white-space:normal}.separator{height:1px;background:var(--line);margin:20px 0}.hlabel{font-size:16px;font-weight:800;letter-spacing:-.4px;font-family:Manrope,sans-serif}.alert{padding:12px 14px;border-radius:10px;background:#fff6e8;border:1px solid #efd9b4;color:#785926;font-size:12px;line-height:1.55}.alert.info{background:#ecf6f4;border-color:#d4ebe4;color:#39665f}.alert.danger{background:#fff1f1;border-color:#f1d0d0;color:#9f4444}.two-panels{display:grid;grid-template-columns:1fr 1fr;gap:15px}.term-preview{padding:13px 16px;background:#f3f8f6;border-radius:10px;margin:14px 0}.progress-top{display:flex;justify-content:space-between;gap:15px;align-items:center}.login-layout{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#fff}.login-side{background:var(--navy);color:white;padding:8vw 7vw;display:flex;flex-direction:column;justify-content:space-between}.login-title{font-family:Manrope,sans-serif;font-size:clamp(32px,4vw,60px);font-weight:800;letter-spacing:-2px;line-height:1.1;max-width:580px}.login-description{max-width:490px;margin-top:25px;font-size:16px;color:#bfd6d6;line-height:1.7}.login-foot{color:#87aaa8;font-size:12px}.login-main{display:grid;place-items:center;padding:40px}.login-card{width:min(100%,385px)}.login-card h2{font-size:27px;font-family:Manrope;letter-spacing:-1px;margin:8px 0}.login-card .field{margin-top:18px}.login-card .btn{margin-top:22px;width:100%}.login-small{color:var(--muted);margin-top:20px;font-size:12px;line-height:1.6}.signin-error{color:#b44646;min-height:16px;margin-top:14px;font-size:12px}.mobile-top{display:none}.tabstrip{display:flex;gap:5px;border-bottom:1px solid var(--line);margin:4px 0 20px}.tab{border:0;background:transparent;padding:12px 16px;border-bottom:3px solid transparent;color:var(--muted);font-weight:800}.tab.active{color:var(--teal);border-bottom-color:var(--teal)}#toast{position:fixed;right:22px;bottom:20px;z-index:20;max-width:420px;pointer-events:none}.toast-item{background:#153b42;color:#fff;border-radius:11px;box-shadow:0 15px 40px #0002;padding:14px 20px;margin-top:10px;font-weight:600}.loading{padding:40px;color:#668} .checkrow{display:flex;align-items:center;gap:9px;color:#53666b;font-size:13px}.checkrow input{width:17px;height:17px} .badge-note{font-size:11px;color:#617578} .menu-toggle{display:none}
@media(max-width:1050px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}.columns{grid-template-columns:1fr}.main{padding:26px}.sidebar{width:215px}.shell{grid-template-columns:215px 1fr}.login-layout{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.shell{display:block}.sidebar{display:none;position:fixed;inset:0 auto 0 0;z-index:15;width:260px}.sidebar.show{display:flex}.mobile-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.mobile-top button{background:none;border:1px solid #ddd;border-radius:9px;padding:7px 12px}.main{padding:19px 15px 46px}.topbar{flex-wrap:wrap}.topbar h1{font-size:23px}.hero{grid-template-columns:1fr}.hero-figure{display:none}.kpis{gap:9px}.card{padding:16px}.kpi-main{font-size:26px}.columns,.two-panels{grid-template-columns:1fr}.formgrid.three,.formgrid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.formgrid{gap:9px}.login-layout{grid-template-columns:1fr}.login-side{padding:40px 28px 38px;min-height:280px}.login-title{font-size:33px}.login-description{font-size:14px}.login-main{padding:42px 26px}.login-foot{display:none}}

/* Version 0.1.5 · separate Tiergruppen und optionale Fotos auf dem Login */
.group-switch{display:flex;gap:6px;background:#eaf1ee;padding:5px;border-radius:14px;margin:0 0 22px;width:max-content;max-width:100%;flex-wrap:wrap}
.group-pill{border:0;background:transparent;border-radius:10px;padding:11px 24px;color:#416360;font-weight:800}
.group-pill.active{background:#fff;color:#126c67;box-shadow:0 2px 9px #1232}
.login-with-image{position:relative;isolation:isolate;overflow:hidden}
.login-with-image>.login-photos{position:absolute;inset:0;z-index:-2;pointer-events:none}
.login-with-image>.login-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.login-with-image>.login-photos img.login-photo-second{opacity:0;animation:loginSecondPhoto 16s ease-in-out infinite}
.login-with-image>.login-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,rgba(8,31,43,.88),rgba(10,38,45,.64)),linear-gradient(0deg,rgba(8,31,43,.7),transparent)}
@keyframes loginSecondPhoto{0%,40%,100%{opacity:0}50%,90%{opacity:1}}
@media(prefers-reduced-motion:reduce){.login-with-image>.login-photos img.login-photo-second{animation:none}}
@media(max-width:700px){.group-switch{width:100%}.group-pill{flex:1}}

/* greitemann-v016-betriebsfotos: feste Hofbilder im Login und in der Leiste */
.login-with-image > .login-photos img:first-child {
  object-position: 53% 39%;
}
.login-with-image > .login-shade {
  background: linear-gradient(90deg, rgba(8,31,43,.84) 0%, rgba(8,31,43,.56) 49%, rgba(8,31,43,.18) 100%),
              linear-gradient(0deg, rgba(8,31,43,.64), transparent 45%);
}
.login-with-image .login-title, .login-with-image .brand {text-shadow:0 2px 20px rgba(0,0,0,.20)}
.login-with-image .login-description {color:#e1eeee; text-shadow:0 1px 5px rgba(0,0,0,.22)}
.login-with-image .login-foot {color:#c1dcda}
.sidebar-photo {margin:0; border-radius:15px; overflow:hidden; flex-shrink:0; border:1px solid rgba(202,233,224,.22);
  background:#244250; box-shadow:0 9px 22px rgba(0,0,0,.13)}
.sidebar-photo img {display:block; width:100%; height:200px; object-fit:cover; object-position:50% 32%}
@media(max-width:700px){
  .sidebar {overflow-y:auto}
  .sidebar-photo img {height:195px}
}
