/* Admin – Design A „Sonnengold" (aus mockups/a-sonnengold.html, Wortmarke durch Logo ersetzt). */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

/* ---------- Sonnen-Gesicht ---------- */
.sf { display: block; overflow: visible; }
.sf-gold { opacity: 0; }
.sf.is-sun .sf-gold { opacity: 1; }

/* ---------- Admin ---------- */
.admin{
  --gold:#FBBA26;--amber:#F29F05;--ink:#2D2A26;--line:#E9E2D6;--muted:#625B52;--slate:#6E665C;--off:#776F65;--err:#A3341E;
  container-type:inline-size;background:#fff;color:var(--ink);
  font-family:'Prompt',system-ui,sans-serif;font-weight:500;font-size:15px;line-height:1.5;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
:where(.admin) :where(h1,h2,h3,p){margin:0;font:inherit}
:where(.admin) :where(button,input){font:inherit;color:inherit;margin:0}
:where(.admin) :where(button){background:none;border:0;padding:0;cursor:pointer}
.admin :focus-visible{outline:3px solid var(--ink);outline-offset:2px}

.a-head{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;padding:18px 48px;border-bottom:1px solid var(--line)}
.a-brand{display:flex;align-items:center;gap:14px;white-space:nowrap}
.a-word{font-weight:600;font-size:18px}
.a-sub{font-weight:300;font-size:18px;padding-left:14px;border-left:1.5px solid var(--line);line-height:1.2}
.a-actions{display:flex;align-items:center;gap:6px}
.a-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border:1.5px solid var(--ink);border-radius:22px;font-weight:600;white-space:nowrap}
.a-btn svg{width:18px;height:18px;flex:none}
.a-btn:disabled{border-color:var(--line);color:#8F877C;cursor:not-allowed}
.a-textbtn{height:44px;padding:0 12px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;border-radius:8px;white-space:nowrap}

.a-filters{display:flex;flex-wrap:wrap;gap:18px 44px;padding:22px 48px 24px;border-bottom:1px solid var(--line)}
.a-group{display:flex;flex-direction:column;gap:8px;min-width:0}
.a-label{font-size:14px;color:var(--muted)}
.a-seg{display:inline-flex;gap:2px;padding:3px;border:1.5px solid var(--ink);border-radius:24px;align-self:flex-start}
.a-seg button{height:38px;padding:0 16px;border-radius:19px;white-space:nowrap}
.a-seg button[aria-pressed="true"]{background:var(--gold);font-weight:600}
.a-nw{white-space:nowrap}
.a-days{display:flex;gap:6px}
.a-day{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);color:var(--off)}
.a-day[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:600;background:#FFF4D6}

.a-main{padding:28px 48px 36px}
.a-range{font-weight:300;font-size:30px;line-height:1.2;letter-spacing:-.01em}
.a-top{display:grid;grid-template-columns:320px 1fr;gap:64px;margin-top:26px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.a-kpis{display:flex;flex-direction:column;gap:30px}
.a-kpi-label{color:var(--muted)}
.a-kpi-val{font-weight:600;font-size:56px;line-height:1.05;letter-spacing:-.02em}
.a-kpi-val small{font-weight:500;font-size:18px;letter-spacing:0;color:var(--muted);margin-left:8px}
.a-scale{position:relative;width:240px;height:40px;margin-top:14px}
.a-scale-line{position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line)}
.a-scale-tick{position:absolute;top:20px;transform:translateX(-50%);font-size:13px;color:var(--muted);line-height:1}
.a-scale-tick::before{content:"";position:absolute;left:50%;top:-14px;width:2px;height:8px;margin-left:-1px;background:var(--line)}
.a-scale-sun{position:absolute;top:0;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--gold);border:2px solid var(--ink)}
.a-h2{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-bottom:16px;font-weight:600;font-size:18px}
.a-h2 .sf{width:26px;height:26px}
.a-h2 small{font-weight:500;font-size:14px;color:var(--muted)}
.a-rows{display:flex;flex-direction:column;gap:10px}
.a-row{display:grid;grid-template-columns:var(--lab,170px) 1fr;align-items:center;gap:14px}
.a-row-lab{display:flex;align-items:center;gap:10px;white-space:nowrap}
.a-row-lab .sf{width:24px;height:24px;flex:none}
.a-track{display:flex;align-items:center;gap:10px;min-height:30px;border-left:1.5px solid var(--ink)}
.a-bar{flex:none;height:20px;border-radius:0 10px 10px 0;background:var(--gold);width:calc((100% - 120px) * var(--p))}
.a-bar--neg{background:var(--slate)}
.a-val{white-space:nowrap}
.a-val small{font-size:inherit;color:var(--muted)}
.a-lists{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:28px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.a-list .a-row{--lab:130px}
.a-foot{margin-top:18px;font-size:14px;color:var(--muted)}

.a-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 0 72px;margin-top:26px;border-bottom:1px solid var(--line)}
.a-empty .a-set{width:120px;height:48px;margin-bottom:22px}
.a-empty-h{font-weight:600;font-size:22px}
.a-empty-p{margin-top:6px;max-width:46ch;color:var(--muted)}
.a-empty .a-btn{margin-top:24px}

.a-login{min-height:800px;display:flex;align-items:center;justify-content:center;padding:40px 16px}
.a-login-box{width:384px}
.a-login-box .a-mark{width:84px;height:46px;display:block}
.a-login-word{margin-top:22px;font-weight:600;font-size:26px;line-height:1.2}
.a-login-sub{font-weight:300;font-size:26px;line-height:1.2}
.a-field{margin-top:36px;display:flex;flex-direction:column;gap:8px}
.a-field label{font-size:15px}
.a-input{height:52px;padding:0 16px;border:1.5px solid var(--ink);border-radius:14px;background:#fff;font-size:18px;letter-spacing:.1em;width:100%}
.a-input[aria-invalid="true"]{border:2px solid var(--err)}
.a-error{display:flex;align-items:flex-start;gap:8px;color:var(--err);font-size:15px;line-height:1.4}
.a-error svg{width:18px;height:18px;flex:none;margin-top:1px}
.a-login-btn{margin-top:22px;width:100%;height:52px;border-radius:26px;background:var(--gold);font-weight:600;font-size:16px}
.a-login-btn:active{background:var(--amber)}

@container (max-width: 640px){
  .a-head{flex-wrap:wrap;padding:14px 16px 10px}
  .a-brand{gap:10px}
  .a-word,.a-sub{font-size:16px}
  .a-sub{padding-left:10px}
  .a-actions{width:100%;justify-content:space-between}
  .a-filters{flex-direction:column;gap:16px;padding:16px}
  .a-seg{display:grid;grid-template-columns:1fr 1fr;align-self:stretch;border-radius:20px}
  .a-seg button{height:auto;min-height:44px;padding:6px 10px;white-space:normal;line-height:1.25;border-radius:16px}
  .a-days{justify-content:space-between}
  .a-main{padding:20px 16px 28px}
  .a-range{font-size:24px}
  .a-top{grid-template-columns:1fr;gap:28px;margin-top:18px;padding-bottom:28px}
  .a-kpis{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .a-kpi-val{font-size:44px}
  .a-kpi-val small{font-size:15px;margin-left:4px}
  .a-scale{width:100%;max-width:150px}
  .a-row{grid-template-columns:1fr;gap:4px}
  .a-list .a-row{grid-template-columns:112px 1fr;gap:10px}
  .a-h2 small{flex-basis:100%}
  .a-bar{width:calc((100% - 96px) * var(--p))}
  .a-lists{grid-template-columns:1fr;gap:32px}
}


/* ---------- Ergänzungen zum Mockup ---------- */
.a-logo { display: block; width: 120px; height: auto; }
.a-login { min-height: 100vh; }
.a-login-logo { display: block; width: 184px; height: auto; margin-left: -6px; }
.a-login-sub { margin-top: 18px; }
a.a-btn { color: inherit; text-decoration: none; }
a.a-btn[aria-disabled="true"] { border-color: var(--line); color: #8F877C; pointer-events: none; }
.a-actions form { margin: 0; }
.admin [hidden] { display: none !important; }
.a-custom { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 4px; }
.a-custom label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.a-date { height: 40px; padding: 0 10px; border: 1.5px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; }
.a-problem { margin-top: 18px; color: var(--err); }