/* SBVora v3 · time-ledger (#zeitrechner) */

.ledger{
  --lg-bg:#f4f9fd;
  --lg-panel:#ffffff;
  --lg-ink:#0b2440;
  --lg-muted:#4a6a80;
  --lg-soft:#6a8597;
  --lg-line:#bfd8e7;
  --lg-line-strong:#8db7cf;
  --lg-accent:#0a6fae;
  --lg-figure:#06235a;
  --lg-field:#ffffff;
  --lg-field-line:#9ec3d8;
  --lg-focus:#0a6fae;
  --lg-fill:#1868c0;
  --lg-fill-hi:#249ae6;
  --lg-empty:#e2eef6;
  --lg-warn:#9a3f05;
  --lg-warn-bg:#fff4ea;
  --lg-ok:#0b6b52;
  --lg-mono:ui-monospace,Menlo,Consolas,monospace;
  --lg-display:Michroma,"Arial Narrow",sans-serif;
  position:relative;
  margin-top:56px;
  border:1px solid var(--lg-line);
  background:var(--lg-bg);
  color:var(--lg-ink);
}
html[data-theme="dark"] .ledger{
  --lg-bg:#0a2238;
  --lg-panel:#071a2d;
  --lg-ink:#eaf7ff;
  --lg-muted:#a9c5d5;
  --lg-soft:#8fb0c4;
  --lg-line:#2f506a;
  --lg-line-strong:#44708f;
  --lg-accent:#65cef5;
  --lg-figure:#ffffff;
  --lg-field:#06182b;
  --lg-field-line:#3d6e8d;
  --lg-focus:#2dc5f8;
  --lg-fill:#2dc5f8;
  --lg-fill-hi:#8be0ff;
  --lg-empty:#12324d;
  --lg-warn:#ffbe8a;
  --lg-warn-bg:rgba(255,160,90,.1);
  --lg-ok:#7fe0c2;
}

/* ---------- summary bar ---------- */
.ledger-summary{
  list-style:none;
  cursor:pointer;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(40px,1fr) 48px;
  grid-template-areas:"kicker kicker toggle" "title ticks toggle" "teaser teaser toggle";
  align-items:center;
  column-gap:28px;
  row-gap:8px;
  min-height:44px;
  padding:28px 32px;
  transition:background-color .3s ease;
}
.ledger-summary::-webkit-details-marker{display:none}
.ledger-summary::marker{content:""}
.ledger-summary:hover{background:rgba(255,255,255,.55)}
html[data-theme="dark"] .ledger-summary:hover{background:rgba(255,255,255,.035)}
.ledger-summary:focus-visible{outline:2px solid var(--lg-focus);outline-offset:3px}
.ledger-kicker{
  grid-area:kicker;
  display:flex;align-items:center;gap:10px;
  color:var(--lg-accent);
  font:700 10px/1.2 var(--lg-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.ledger-kicker::before{content:"";width:8px;height:8px;background:var(--lg-fill);flex:none}
.ledger-title{
  grid-area:title;
  font-family:var(--lg-display);
  font-weight:400;
  font-size:clamp(21px,2.3vw,32px);
  line-height:1.2;
  letter-spacing:-.03em;
  color:var(--lg-ink);
}
.ledger-teaser{grid-area:teaser;font-style:normal;color:var(--lg-muted);font-size:15px;line-height:1.55}
.ledger-ticks{
  grid-area:ticks;
  align-self:center;
  height:22px;
  background:repeating-linear-gradient(90deg,var(--lg-line-strong) 0 1px,transparent 1px 7px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  opacity:.8;
}
.ledger-toggle{
  grid-area:toggle;
  position:relative;
  width:48px;height:48px;
  border:1px solid var(--lg-line-strong);
  color:var(--lg-accent);
  transition:background-color .3s ease,transform .45s var(--ease,ease);
}
.ledger-toggle::before,.ledger-toggle::after{
  content:"";position:absolute;left:50%;top:50%;
  width:16px;height:2px;margin:-1px 0 0 -8px;
  background:currentColor;
  transition:transform .35s var(--ease,ease);
}
.ledger-toggle::after{transform:rotate(90deg)}
.ledger[open] .ledger-toggle::after{transform:rotate(0deg)}
.ledger-summary:hover .ledger-toggle{background:rgba(45,197,248,.1)}
.ledger[open] .ledger-summary{border-bottom:1px solid var(--lg-line)}

/* ---------- body ---------- */
.ledger-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
}
.ledger[open] .ledger-body{animation:ledger-open .5s var(--ease,ease) both}
@keyframes ledger-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.ledger-form{display:grid;align-content:start;gap:34px;padding:34px 32px 36px}
.ledger-group{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px 16px;
  min-width:0;
  margin:0;padding:0;border:0;
}
.ledger-legend{
  display:flex;align-items:center;gap:10px;
  width:100%;
  margin:0 0 18px;padding:0 0 10px;
  border-bottom:1px solid var(--lg-line);
  color:var(--lg-muted);
  font:700 10px/1.2 var(--lg-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.ledger-legend::before{content:"A";color:var(--lg-accent)}
.ledger-assumptions .ledger-legend::before{content:"B"}
.ledger-field{display:grid;align-content:start;gap:8px;min-width:0}
.ledger-field-wide{grid-column:1 / -1}
.ledger-label{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  color:var(--lg-ink);
  font-size:14px;font-weight:700;line-height:1.35;
}
.ledger-optional{
  color:var(--lg-soft);
  font:600 10px/1 var(--lg-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.ledger-input{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  height:48px;
  margin:0;
  padding:0 14px;
  border:1px solid var(--lg-field-line);
  border-radius:0;
  background:var(--lg-field);
  color:var(--lg-ink);
  font:600 16px/1.2 Inter,"Segoe UI",Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.ledger-input::placeholder{color:var(--lg-soft);opacity:1;font-weight:500}
.ledger-input:hover{border-color:var(--lg-accent)}
.ledger-input:focus{outline:none}
.ledger-input:focus-visible{outline:2px solid var(--lg-focus);outline-offset:2px;border-color:var(--lg-accent)}
.ledger-input[aria-invalid="true"]{border-color:var(--lg-warn);box-shadow:inset 3px 0 0 var(--lg-warn)}
.ledger-pair{display:flex;gap:10px;min-width:0}
.ledger-pair .ledger-num-input{flex:0 0 112px;width:112px}
.ledger-select-wrap{position:relative;flex:1 1 auto;min-width:0}
.ledger-select-wrap::after{
  content:"";position:absolute;right:16px;top:50%;
  width:7px;height:7px;margin-top:-6px;
  border-right:2px solid var(--lg-accent);border-bottom:2px solid var(--lg-accent);
  transform:rotate(45deg);
  pointer-events:none;
}
.ledger-select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer}
.ledger-select option{background:var(--lg-field);color:var(--lg-ink)}

/* range */
.ledger-range{
  --p:5%;
  flex:1 1 auto;min-width:0;
  height:48px;margin:0;
  background:transparent;
  -webkit-appearance:none;appearance:none;
  cursor:pointer;
}
.ledger-range:focus{outline:none}
.ledger-range:focus-visible{outline:2px solid var(--lg-focus);outline-offset:2px}
.ledger-range::-webkit-slider-runnable-track{
  height:4px;
  background:linear-gradient(90deg,var(--lg-fill) 0 var(--p),var(--lg-empty) var(--p) 100%);
  border:1px solid var(--lg-line);
}
.ledger-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-10px;
  border:2px solid var(--lg-panel);
  border-radius:0;
  background:var(--lg-fill);
  box-shadow:0 0 0 1px var(--lg-fill);
  transition:transform .2s ease;
}
.ledger-range:active::-webkit-slider-thumb{transform:scale(1.12)}
.ledger-range::-moz-range-track{height:4px;background:var(--lg-empty);border:1px solid var(--lg-line)}
.ledger-range::-moz-range-progress{height:4px;background:var(--lg-fill)}
.ledger-range::-moz-range-thumb{width:20px;height:20px;border:2px solid var(--lg-panel);border-radius:0;background:var(--lg-fill);box-shadow:0 0 0 1px var(--lg-fill)}

.ledger-msg{margin:0;color:var(--lg-warn);font-size:13px;line-height:1.45}
.ledger-msg:empty{display:none}
.ledger-hint{grid-column:1 / -1;margin:-4px 0 0;color:var(--lg-muted);font-size:13px;line-height:1.55}

/* ---------- result (thermal receipt) ---------- */
.ledger-result{
  position:relative;
  display:flex;flex-direction:column;
  gap:24px;
  min-width:0;
  padding:34px 32px 32px;
  border-left:1px solid var(--lg-line);
  background:var(--lg-panel);
}
.ledger-result::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--blue,#1868c0),var(--cyan,#2dc5f8));
}
.ledger-result-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ledger-result-title{
  color:var(--lg-ink);
  font:700 11px/1.2 var(--lg-mono);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.ledger-badge{
  display:inline-flex;align-items:center;min-height:24px;
  padding:4px 9px;
  border:1px dashed var(--lg-line-strong);
  color:var(--lg-muted);
  font:700 10px/1.2 var(--lg-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.ledger-badge.is-own{border-style:solid;border-color:var(--lg-accent);color:var(--lg-accent)}

.ledger-receipt{
  margin:0;padding:14px 0;
  border-top:1px dashed var(--lg-line-strong);
  border-bottom:1px dashed var(--lg-line-strong);
  font:600 12px/1.5 var(--lg-mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--lg-muted);
}
.ledger-receipt div{display:flex;align-items:baseline;gap:10px;padding:3px 0}
.ledger-receipt dt{display:flex;align-items:baseline;gap:10px;flex:1 1 auto;min-width:0}
.ledger-receipt dt::after{content:"";flex:1 1 auto;min-width:12px;border-bottom:1px dotted var(--lg-line-strong);transform:translateY(-3px)}
.ledger-receipt dd{margin:0;color:var(--lg-ink);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.ledger-receipt .ledger-receipt-sum{margin-top:6px;padding-top:9px;border-top:1px solid var(--lg-ink);color:var(--lg-ink);font-weight:800}
.ledger-receipt .ledger-receipt-sum dt::before{content:"=";color:var(--lg-accent)}

.ledger-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--lg-line);border:1px solid var(--lg-line)}
.ledger-figure{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-width:0;padding:16px 16px 18px;background:var(--lg-panel)}
.ledger-figure-label{
  color:var(--lg-muted);
  font:700 10px/1.35 var(--lg-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.ledger-figure-value{
  display:block;
  color:var(--lg-figure);
  font-family:var(--lg-display);
  font-size:clamp(28px,2.9vw,42px);
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.ledger-figure-main{background:linear-gradient(160deg,rgba(45,197,248,.12),transparent 70%),var(--lg-panel)}
.ledger-figure-main .ledger-figure-value{color:var(--lg-fill)}
html[data-theme="dark"] .ledger-figure-main .ledger-figure-value{color:var(--lg-fill-hi)}
.ledger.is-large .ledger-figure-value{font-size:clamp(20px,2vw,28px)}

.ledger-warn{margin:-8px 0 0;padding:10px 12px;border-left:3px solid var(--lg-warn);background:var(--lg-warn-bg);color:var(--lg-warn);font-size:13px;line-height:1.45}
.ledger-warn:empty{display:none}

/* 52-cell strip: one cell = one full 40-hour week */
.ledger-strip-block{display:grid;gap:10px}
.ledger-strip{
  position:relative;
  display:grid;
  grid-template-columns:repeat(52,minmax(0,1fr));
  gap:2px;
  padding:6px;
  border:1px solid var(--lg-line);
}
.ledger-cell{position:relative;display:block;height:30px;background:var(--lg-empty);overflow:hidden}
.ledger-cell::before{
  content:"";position:absolute;inset:0;
  background:var(--lg-fill);
  transform:scaleX(var(--f,0));
  transform-origin:left center;
  transition:transform .32s var(--ease,ease) calc(var(--i,0) * 9ms);
}
.ledger-cell.is-quarter{box-shadow:3px 0 0 -1px var(--lg-line-strong)}
.ledger-plus{
  position:absolute;right:-9px;top:-9px;
  display:grid;place-items:center;
  width:20px;height:20px;
  background:var(--lg-fill);
  color:var(--lg-panel);
  font:800 14px/1 var(--lg-mono);
  opacity:0;transform:scale(.4);
  transition:opacity .25s ease,transform .25s var(--ease,ease);
}
.ledger-plus.is-on{opacity:1;transform:none}
.ledger-strip.is-over .ledger-cell::before{background:repeating-linear-gradient(135deg,var(--lg-fill) 0 4px,var(--lg-fill-hi) 4px 6px)}
.ledger-strip-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.ledger-strip-caption{color:var(--lg-muted);font:600 10px/1.4 var(--lg-mono);letter-spacing:.1em;text-transform:uppercase}
.ledger-strip-count{color:var(--lg-ink);font:700 12px/1.2 var(--lg-mono);letter-spacing:.06em;font-variant-numeric:tabular-nums}

.ledger-note{margin:0;color:var(--lg-muted);font-size:14px;line-height:1.65}
.ledger-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.ledger-handover{
  flex:1 1 280px;
  display:inline-flex;align-items:center;justify-content:space-between;gap:22px;
  min-height:54px;
  padding:12px 20px;
  border:0;border-radius:0;
  background:linear-gradient(100deg,#1868c0,#1673c9);
  color:#fff;
  font:750 13px/1.35 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.03em;
  text-align:left;
  cursor:pointer;
  transition:transform .3s var(--ease,ease),box-shadow .3s ease,background .3s ease;
}
.ledger-handover i{font-style:normal;font-size:20px;line-height:1;color:#bfeeff}
.ledger-handover:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(24,104,192,.28)}
.ledger-handover:focus-visible{outline:2px solid var(--lg-focus);outline-offset:3px}
.ledger-reset{
  flex:0 0 auto;
  min-height:54px;min-width:44px;
  padding:12px 18px;
  border:1px solid var(--lg-line-strong);border-radius:0;
  background:transparent;
  color:var(--lg-ink);
  font:700 12px/1.2 var(--lg-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease;
}
.ledger-reset:hover{border-color:var(--lg-accent);background:rgba(45,197,248,.08)}
.ledger-reset:focus-visible{outline:2px solid var(--lg-focus);outline-offset:3px}
.ledger-status{margin:-10px 0 0;color:var(--lg-ok);font:700 11px/1.45 var(--lg-mono);letter-spacing:.08em;text-transform:uppercase}
.ledger-status::before{content:"✓ "}
.ledger-status[data-mode="stale"]{color:var(--lg-warn)}
.ledger-status[data-mode="stale"]::before{content:"↻ "}
.ledger-status:empty{display:none}
.ledger-focus-target:focus{outline:none}
.ledger-focus-target:focus-visible{outline:2px solid var(--cyan,#2dc5f8);outline-offset:4px}

/* ---------- responsive ---------- */
@media(max-width:1120px){
  .ledger-strip{grid-template-columns:repeat(26,minmax(0,1fr))}
  .ledger-cell{height:24px}
}
@media(max-width:860px){
  .ledger{margin-top:40px}
  .ledger-body{grid-template-columns:minmax(0,1fr)}
  .ledger-result{border-left:0;border-top:1px solid var(--lg-line)}
  .ledger-summary{grid-template-columns:minmax(0,1fr) 48px;grid-template-areas:"kicker toggle" "title toggle" "teaser toggle"}
  .ledger-ticks{display:none}
}
@media(max-width:560px){
  .ledger-summary{padding:22px 18px;column-gap:16px}
  .ledger-title{font-size:20px}
  .ledger-teaser{font-size:14px}
  .ledger-form{padding:26px 18px 28px;gap:28px}
  .ledger-result{padding:28px 18px 24px;gap:20px}
  .ledger-group{grid-template-columns:minmax(0,1fr)}
  .ledger-pair .ledger-num-input{flex-basis:92px;width:92px}
  .ledger-figures{grid-template-columns:minmax(0,1fr)}
  .ledger-figure{flex-direction:row;align-items:baseline;justify-content:space-between;gap:14px;padding:14px}
  .ledger-figure-label{flex:1 1 auto;max-width:58%}
  .ledger-figure-value{font-size:28px;text-align:right}
  .ledger.is-large .ledger-figure-value{font-size:20px}
  .ledger-strip{grid-template-columns:repeat(13,minmax(0,1fr));gap:3px}
  .ledger-cell{height:22px}
  .ledger-handover{flex-basis:100%}
  .ledger-reset{flex:1 1 auto}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .ledger[open] .ledger-body{animation:none}
  .ledger-cell::before,.ledger-plus,.ledger-toggle,.ledger-toggle::before,.ledger-toggle::after,.ledger-handover,.ledger-summary,.ledger-input{transition:none}
  .ledger-handover:hover{transform:none}
}

/* ---------- normal page print ---------- */
@media print{
  html:not(.sbv-print-only) .ledger{break-inside:avoid;margin-top:24px}
  html:not(.sbv-print-only) .ledger-actions,
  html:not(.sbv-print-only) .ledger-status,
  html:not(.sbv-print-only) .ledger-toggle,
  html:not(.sbv-print-only) .ledger-ticks,
  html:not(.sbv-print-only) .ledger-range{display:none}
  html:not(.sbv-print-only) .ledger-body{grid-template-columns:1fr 1fr}
  html:not(.sbv-print-only) .ledger-strip{grid-template-columns:repeat(26,minmax(0,1fr))}
  html:not(.sbv-print-only) .ledger-cell{height:14px}
  html:not(.sbv-print-only) .ledger-input{border:1px solid #061a36}
}