/* Zeiterfassung – Gestaltung der Digitalen Personalakte (Helvetica, ruhige Grautöne, Standortfarben) */
:root{
  --ground:#F3F5F4; --surface:#FFFFFF; --sunk:#E9EDEB; --ink:#1B252E; --muted:#5E6B72; --line:#D6DCD9;
  --accent:#1F5F6B; --accent-soft:#DCEBEC;
  --ok:#2F7A4B; --ok-soft:#E3F1E8; --warn:#A8691A; --warn-soft:#F7ECDD; --crit:#B23A3A; --crit-soft:#F6E3E3;
  --plum:#6E52AA; --plum-soft:#ECE7F6;
  --vi:#585857; --vi-on:#ffffff; --vi-soft:#eeeeee; --vi-text:#585857;
  --sans:Helvetica, "Helvetica Neue", Arial, sans-serif; --mono:ui-monospace, Menlo, Consolas, monospace;
  --r:10px;
}
body[data-standort="BI"]{--vi:#80ba27; --vi-on:#1B252E; --vi-soft:#f2f8e9; --vi-text:#59821b}
body[data-standort="UN"]{--vi:#f9b333; --vi-on:#1B252E; --vi-soft:#fef7ea; --vi-text:#956b1e}
body[data-standort="DU"]{--vi:#1d71b8; --vi-on:#ffffff; --vi-soft:#e8f0f7; --vi-text:#1d71b8}
body[data-standort="HE"]{--vi:#ba3418; --vi-on:#ffffff; --vi-soft:#f8eae7; --vi-text:#ba3418}
@media (prefers-color-scheme: dark){
  :root{color-scheme:dark; --ground:#12181C; --surface:#1A2227; --sunk:#222C32; --ink:#E4EAE8; --muted:#95A3A8; --line:#2F3B41;
    --accent:#6FB3BD; --accent-soft:#1E3A3F; --ok:#6CC08C; --ok-soft:#1B3326; --warn:#D9A45A; --warn-soft:#3A2E1C;
    --crit:#E07C7C; --crit-soft:#3D2323; --plum:#A78BDB; --plum-soft:#2E2640; --vi:#8a8a89; --vi-soft:#2a2a2a; --vi-text:#b5b5b4}
  body[data-standort="BI"]{--vi:#80ba27; --vi-on:#12181C; --vi-soft:#1f2a14; --vi-text:#9BCB4D}
  body[data-standort="UN"]{--vi:#f9b333; --vi-on:#12181C; --vi-soft:#33291a; --vi-text:#FBC461}
  body[data-standort="DU"]{--vi:#4a8dc6; --vi-on:#0E1A24; --vi-soft:#1B2E40; --vi-text:#7FB0DC}
  body[data-standort="HE"]{--vi:#ce705d; --vi-on:#12181C; --vi-soft:#3a221d; --vi-text:#D2705A}
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground); color:var(--ink); font:15px/1.5 var(--sans); -webkit-text-size-adjust:100%;
  padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){ body{padding-bottom:40px} }
h1,h2,h3,h4{margin:0; line-height:1.2; text-wrap:balance}
h1{font-size:24px} h2{font-size:19px} h3{font-size:16px}
p{margin:0}
a{color:var(--vi-text)}
button{font:inherit; color:inherit}
input,select,textarea{font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; width:100%}
textarea{min-height:70px; resize:vertical}
label.f{display:grid; gap:4px; font-size:13px; color:var(--muted)}
label.f > span{font-weight:600}
:focus-visible{outline:2px solid var(--vi); outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.klein{font-size:12.5px}
[hidden]{display:none!important}

/* Kopf und Navigation */
header.kopf{position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--line);
  padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px; display:flex; align-items:center; gap:12px}
.marke{display:flex; align-items:center; gap:8px; font-weight:700}
.marke i{width:22px; height:22px; border-radius:6px; background:conic-gradient(#80ba27 0 25%, #1d71b8 0 50%, #f9b333 0 75%, #ba3418 0)}
nav.haupt{display:none; gap:2px}
nav.haupt a{text-decoration:none; color:var(--muted); padding:7px 11px; border-radius:7px; font-size:14px}
nav.haupt a.an{background:var(--vi); color:var(--vi-on); font-weight:600}
.wer{margin-left:auto; display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted)}
.pill{font-size:12px; padding:3px 9px; border-radius:999px; background:var(--vi-soft); color:var(--vi-text); font-weight:600; white-space:nowrap}
nav.unten{position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--surface); border-top:1px solid var(--line);
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; padding:6px 4px calc(8px + env(safe-area-inset-bottom,0px))}
nav.unten a{text-decoration:none; color:var(--muted); font-size:11px; display:grid; justify-items:center; gap:3px; padding:4px 0}
nav.unten a i{width:22px; height:4px; border-radius:2px}
nav.unten a.an{color:var(--vi-text); font-weight:700}
nav.unten a.an i{background:var(--vi)}
@media (min-width:900px){ nav.haupt{display:flex} nav.unten{display:none} }
.demo{background:var(--warn-soft); color:var(--warn); text-align:center; font-size:12.5px; padding:5px 12px; font-weight:600}
.demo.parallel{background:var(--vi-soft); color:var(--vi-text); font-weight:500}

main{max-width:1180px; margin:0 auto; padding:16px; display:grid; grid-template-columns:minmax(0,1fr); gap:16px}
main > *, .raster > *, .karte > *{min-width:0}
.raster{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start}
.karte{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px; display:grid; gap:12px; align-content:start}
.karte h2 small, .karte h3 small{font-weight:400; color:var(--muted); font-size:13px; margin-left:6px}
.zeile{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.zeile.zw{justify-content:space-between}
label.zeile{flex-wrap:nowrap; align-items:flex-start; cursor:pointer}
label.zeile input{margin-top:3px; flex:none}
.btn{border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:600; font-size:14px; padding:9px 14px;
  border-radius:8px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px}
.btn.haupt{background:var(--vi); border-color:var(--vi); color:var(--vi-on)}
.btn.leise{background:transparent; border-color:transparent; color:var(--vi-text)}
.btn.warn{color:var(--crit)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:7px 12px; font-size:13.5px; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--vi); border-color:var(--vi); color:var(--vi-on); font-weight:600}

/* Stempeln */
.stempel{max-width:520px; margin:0 auto; width:100%; display:grid; gap:12px}
.status{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; display:grid; gap:4px}
.status .s{display:flex; gap:8px; align-items:center; font-weight:700}
.punkt{width:10px; height:10px; border-radius:50%; background:var(--muted); flex:none}
.punkt.arbeit{background:var(--ok); box-shadow:0 0 0 4px var(--ok-soft)}
.punkt.pause,.punkt.dienstgang{background:var(--warn); box-shadow:0 0 0 4px var(--warn-soft)}
.gross{font-size:44px; font-weight:700; letter-spacing:-.02em; line-height:1.05; font-variant-numeric:tabular-nums}
.balken{height:8px; border-radius:5px; background:var(--sunk); overflow:hidden}
.balken i{display:block; height:100%; background:var(--vi)}
.taste{border:0; border-radius:16px; padding:18px; font-weight:700; font-size:19px; cursor:pointer; width:100%; min-height:66px;
  background:var(--vi); color:var(--vi-on)}
.taste.zwei{background:var(--surface); color:var(--ink); border:1px solid var(--line); font-size:16px; min-height:56px}
.taste[disabled]{opacity:.45; cursor:not-allowed}
.paar{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.meldung{border-radius:12px; padding:10px 12px; font-size:14px; display:grid; gap:2px; background:var(--ok-soft)}
.meldung b{color:var(--ok)}
.meldung.warten{background:var(--warn-soft)} .meldung.warten b{color:var(--warn)}
.meldung.fehler{background:var(--crit-soft)} .meldung.fehler b{color:var(--crit)}
.kennz{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.kennz div{background:var(--sunk); border-radius:10px; padding:10px 12px; display:grid; gap:2px}
.kennz b{font-size:19px; font-variant-numeric:tabular-nums}
.kennz span{font-size:12px; color:var(--muted)}
.liste{display:grid}
.liste > .e{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px}
.liste > .e:last-child{border-bottom:0}
.ic{width:28px; height:28px; border-radius:7px; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--sunk); color:var(--muted); font-family:var(--mono)}
.st{font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; background:var(--sunk); color:var(--muted)}
.st.ok{background:var(--ok-soft); color:var(--ok)} .st.wa{background:var(--warn-soft); color:var(--warn)}
.st.cr{background:var(--crit-soft); color:var(--crit)} .st.vi{background:var(--vi-soft); color:var(--vi-text)}
.woche{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; align-items:end; height:96px}
.woche div{display:grid; justify-items:center; gap:4px; font-size:11px; color:var(--muted); height:100%; align-content:end}
.woche i{display:block; width:100%; max-width:30px; border-radius:4px 4px 0 0; background:var(--vi); min-height:2px}
.woche i.soll{background:transparent; border:1px dashed var(--line); border-bottom:0}

/* Tabellen */
.tab{overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:14px}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); background:var(--sunk); white-space:nowrap}
td.r, th.r{text-align:right}
tr.we td{color:var(--muted); background:color-mix(in srgb, var(--sunk) 45%, transparent)}
tr.klick{cursor:pointer} tr.klick:hover td{background:var(--vi-soft)}
tr.detail td{background:var(--ground)}
.pos{color:var(--ok)} .neg{color:var(--crit)}
.storno{text-decoration:line-through; color:var(--muted)}

/* Jahresübersicht */
.jahr{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}
.mon{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px; display:grid; gap:4px; align-content:start}
.mon b{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--vi-text)}
.mon .g{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.mon .g span{font-size:11px; text-align:center; line-height:22px; border-radius:3px; font-variant-numeric:tabular-nums}
.mon .g .k{color:var(--muted); font-size:9.5px; font-weight:700}
.mon .g .we{color:var(--muted); background:var(--sunk)}
.mon .g .ft, .leg.ft-leg{background:var(--sunk); color:var(--ink); font-weight:700; outline:1.5px dashed var(--muted); outline-offset:-2px}
.mon .g .ho{box-shadow:inset 0 -3px 0 var(--vi)}
.mon .g .heute{outline:2px solid var(--ink); outline-offset:-2px; font-weight:700}
.mon .g .hw{position:relative} .mon .g .hw::after{content:""; position:absolute; top:2px; right:2px; width:5px; height:5px; border-radius:50%; background:var(--crit)}
.mon .g .frei{opacity:.35}
.a-urlaub{background:var(--accent); color:var(--surface)!important}
.a-zeitausgleich{background:var(--ok); color:var(--surface)!important}
.a-dienstreise,.a-fortbildung{background:var(--warn); color:var(--surface)!important}
.a-krank,.a-kind_krank{background:var(--crit); color:var(--surface)!important}
.a-abwesend{background:var(--muted); color:var(--surface)!important}
.a-sonderurlaub,.a-unbezahlt{background:var(--plum); color:var(--surface)!important}
.halb{background-image:linear-gradient(135deg, transparent 50%, var(--surface) 50%)!important}
.beantragt{background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 3px, transparent 3px 6px)!important}
.leg{display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:-2px; margin-right:6px}

/* Team-Kacheln (wie Multitab) */
.kacheln{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px}
.kachel{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px; display:grid;
  grid-template-columns:auto 1fr; gap:4px 10px; align-items:center; cursor:pointer; text-align:left}
.kachel:hover{border-color:var(--vi)}
.kachel .q{grid-row:span 2; width:34px; height:34px; border-radius:8px; display:grid; place-items:center; font-weight:700; font-size:12px; font-family:var(--mono)}
.kachel .n{font-weight:700; font-size:14px}
.kachel .d{font-size:12.5px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap}
.q.anwesend{background:var(--ok); color:#fff} .q.homeoffice{background:var(--ok-soft); color:var(--ok); border:2px solid var(--ok)}
.q.pause{background:var(--warn-soft); color:var(--warn)} .q.dienstgang,.q.einsatz{background:var(--warn); color:#fff}
.q.urlaub{background:var(--accent); color:#fff} .q.krank,.q.kind_krank,.q.abwesend{background:var(--crit); color:#fff}
.q.zeitausgleich{background:var(--ok-soft); color:var(--ok)} .q.gegangen,.q.frei{background:var(--sunk); color:var(--muted)}
.q.ohne_arbeitszeit{background:var(--warn-soft); color:var(--warn)}
.q.nicht_gestempelt{background:var(--crit-soft); color:var(--crit)} .q.dienstreise,.q.fortbildung{background:var(--warn); color:#fff}

/* Dialog */
.schleier{position:fixed; inset:0; background:rgba(10,20,25,.45); z-index:50; display:grid; place-items:center; padding:16px}
.dialog{background:var(--surface); border-radius:14px; padding:18px; width:min(480px,100%); max-height:90vh; overflow:auto; display:grid; gap:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.25)}

/* Anmeldung */
.anmeldung{max-width:400px; margin:8vh auto 0; display:grid; gap:14px; padding:0 16px}
.anmeldung .karte{padding:22px}
.qr{width:220px; height:220px; justify-self:center; background:#fff; padding:8px; border-radius:8px; image-rendering:pixelated}
.geheim{font-family:var(--mono); font-size:15px; letter-spacing:.08em; background:var(--sunk); padding:10px; border-radius:8px; word-break:break-all; user-select:all}
.fehlertext{color:var(--crit); font-size:14px}
.hinweis-klein{font-size:12.5px; color:var(--muted)}
.fuss{text-align:center; font-size:12px; color:var(--muted); padding:8px}

/* Lesetexte (Datenschutzinformation) */
.lesen{max-width:760px; margin:4vh auto 0; display:grid; gap:14px; padding:0 16px 40px}
.text{display:grid; gap:10px; max-width:70ch}
.text h2{font-size:22px; margin-top:4px}
.text h3{font-size:16px; margin-top:10px}
.text ul{margin:0; padding-left:1.2em; display:grid; gap:6px}
.text li.tief{margin-left:1.2em; list-style:circle}
.dialog .text{max-width:none}


/* ======================================================================
   Moderne Ebene (0.5): weichere Flächen, Tiefe, großzügige Typografie
   ====================================================================== */
:root{--schatten:0 1px 2px rgba(16,24,40,.05), 0 10px 30px -12px rgba(16,24,40,.18); --rund:20px}
@media (prefers-color-scheme: dark){ :root{--schatten:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6)} }
body{background:
  radial-gradient(1200px 420px at 10% -10%, color-mix(in srgb, var(--vi) 16%, transparent), transparent 70%),
  radial-gradient(900px 380px at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
  var(--ground); background-attachment:fixed}
header.kopf{background:color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent)}
nav.haupt{background:var(--sunk); padding:4px; border-radius:999px}
nav.haupt a{border-radius:999px; padding:7px 14px}
nav.haupt a.an{box-shadow:0 2px 8px -2px color-mix(in srgb, var(--vi) 60%, transparent)}
.karte{border:none; border-radius:var(--rund); box-shadow:var(--schatten); padding:20px}
.btn{border-radius:12px}
.chip{padding:8px 14px}
.dialog{border-radius:24px; padding:24px}
.schleier{backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
input,select,textarea{border-radius:12px}

/* Startseite */
.start{display:grid; gap:18px; grid-template-columns:repeat(12,1fr)}
.start > .held{grid-column:1/-1}
.start > .ausblick{grid-column:1/-1}
.start > .konten{grid-column:1/9}
.start > .karte{grid-column:9/-1}
@media (max-width:980px){ .start > .konten, .start > .karte{grid-column:1/-1} }
.held{position:relative; overflow:hidden; border-radius:28px; padding:24px 26px; color:var(--vi-on);
  background:linear-gradient(135deg, var(--vi) 0%, color-mix(in srgb, var(--vi) 72%, #0b1a24) 100%);
  box-shadow:0 20px 40px -18px color-mix(in srgb, var(--vi) 70%, transparent); display:grid; gap:18px}
.held::after{content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.22), transparent 65%); pointer-events:none}
.held-kopf{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.gruss{font-size:clamp(22px,3vw,30px); font-weight:700; letter-spacing:-.02em}
.datum{opacity:.8; font-size:14px}
.pille{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; font-weight:700; font-size:13px;
  background:rgba(255,255,255,.2); backdrop-filter:blur(6px)}
.pille i{width:9px; height:9px; border-radius:50%; background:currentColor; opacity:.5}
.pille.an i{background:#4ade80; opacity:1; box-shadow:0 0 0 4px rgba(74,222,128,.25); animation:puls 2s infinite}
.pille.halb i{background:#fbbf24; opacity:1}
@keyframes puls{50%{box-shadow:0 0 0 8px rgba(74,222,128,0)}}
@media (prefers-reduced-motion: reduce){ .pille.an i{animation:none} }
.held-mitte{display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center}
@media (max-width:640px){ .held-mitte{grid-template-columns:1fr; justify-items:center} .held-aktionen{width:100%} }
.held-aktionen{display:grid; gap:10px; align-content:center}
.held .taste{background:#fff; color:#12202b; box-shadow:0 8px 20px -10px rgba(0,0,0,.45); border-radius:18px; font-size:20px; min-height:64px; transition:transform .12s}
.held .taste:active{transform:scale(.98)}
.held .taste.zwei{background:rgba(255,255,255,.16); color:inherit; border:1px solid rgba(255,255,255,.35); box-shadow:none; font-size:16px; min-height:52px}
.held .chip{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.35); color:inherit}
.held .chip[aria-pressed="true"]{background:#fff; color:#12202b; border-color:#fff}
.held .hinweis-klein, .held .muted{color:inherit; opacity:.85}
.held .btn{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.35); color:inherit}
.held .meldung{background:rgba(255,255,255,.92); color:#12202b}
.held-fuss{display:flex; justify-content:space-between; align-items:center; gap:10px 12px; flex-wrap:wrap; font-size:13px}
.held-fuss > span{opacity:.85}
.schnell{display:flex; gap:6px; flex-wrap:wrap}
.schnell .btn{min-height:34px; padding:6px 12px; font-size:13px; border-radius:999px}
.held .schnell .btn.krank{background:rgba(255,255,255,.92); color:#12202b; border-color:#fff}
.link{background:none; border:0; color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:0}
.einsatz-text{display:grid; gap:4px} .einsatz-text b{font-size:32px}

/* Ring */
.ring{position:relative; width:190px; height:190px}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:10; stroke-linecap:round}
.ring .ring-grund{stroke:rgba(255,255,255,.22)}
.ring .ring-wert{stroke:#fff; transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}
.ring.voll .ring-wert{stroke:#bbf7d0}
.ring-text{position:absolute; inset:0; display:grid; place-content:center; text-align:center}
.ring-zahl{font-size:44px; font-weight:800; letter-spacing:-.03em; line-height:1}
.ring-text span{font-size:13px; opacity:.8; margin-top:4px}
.ring.klein{width:48px; height:48px; flex:none}
.ring.klein circle{stroke-width:5}
.ring.klein .ring-grund{stroke:var(--sunk)} .ring.klein .ring-wert{stroke:var(--vi)}

/* Ausblick */
.ausblick{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.kachel-ausblick{background:var(--surface); border:0; border-radius:var(--rund); box-shadow:var(--schatten); padding:16px 18px;
  display:grid; gap:2px; text-align:left; font:inherit; color:inherit; position:relative; overflow:hidden}
button.kachel-ausblick{cursor:pointer} button.kachel-ausblick:hover{transform:translateY(-1px)}
.kachel-ausblick b{font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1.1}
.kachel-ausblick span{font-weight:600}
.kachel-ausblick small{color:var(--muted); font-size:12.5px}
.kachel-ausblick::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px}
.ab-urlaub::before{background:var(--accent)} .ab-woche::before{background:var(--vi)} .ab-feiertag::before{background:var(--plum)}
.ab-rente::before{background:linear-gradient(#f9b333,#ba3418)}
.ab-urlaub b{color:var(--accent)} .ab-feiertag b{color:var(--plum)} .ab-woche b{color:var(--vi-text)}

/* Konten */
.konten{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; align-content:start}
.kz{gap:4px}
.kz .etikett{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700}
.kz .wert{font-size:32px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.kz .unter{font-size:12.5px; color:var(--muted)}
.kz-zeile{display:flex; align-items:baseline; gap:10px}
.ubalken{display:flex; height:10px; border-radius:999px; background:var(--sunk); overflow:hidden; margin:6px 0 4px}
.ubalken i{display:block; height:100%}
.ubalken .gen, .leg.gen{background:var(--vi)} .ubalken .gep, .leg.gep{background:var(--accent)}
.ubalken .bea, .leg.bea{background:repeating-linear-gradient(45deg,var(--accent) 0 3px,transparent 3px 6px)}
.leg{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:4px; vertical-align:-1px}
.kz .woche{height:74px; margin-top:6px}
.kz .woche i{border-radius:6px 6px 2px 2px; max-width:22px}
.kz .woche .heute{color:var(--vi-text); font-weight:700}

/* Zeitleiste */
.zeitleiste{list-style:none; margin:0; padding:0; display:grid; gap:0}
.zeitleiste li{display:grid; grid-template-columns:52px 1fr; gap:12px; padding:8px 0 8px; position:relative}
.zeitleiste li::before{content:""; position:absolute; left:61px; top:14px; width:10px; height:10px; border-radius:50%; background:var(--vi)}
.zeitleiste li:not(:last-child)::after{content:""; position:absolute; left:65px; top:26px; bottom:-8px; width:2px; background:var(--line)}
.zeitleiste .was{padding-left:22px; display:grid}
.zeitleiste small{color:var(--muted)}
.zeitleiste .uhr{font-weight:700}
.zeitleiste li.zl-pause_beginn::before, .zeitleiste li.zl-pause_ende::before{background:var(--warn)}
.zeitleiste li.zl-gehen::before{background:var(--muted)}

/* Krankmeldung */
.wahl{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.wahl-knopf{display:grid; gap:2px; text-align:left; padding:12px 14px; border-radius:14px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; font:inherit; color:inherit}
.wahl-knopf small{color:var(--muted)}
.wahl-knopf[aria-pressed="true"]{border-color:var(--vi); background:var(--vi-soft)}
.ablage{border:2px dashed var(--line); border-radius:16px; padding:18px; display:grid; gap:4px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s}
.ablage.ueber, .btn.ueber{border-color:var(--vi); background:var(--vi-soft)}
.ablage.gewaehlt{border-style:solid; border-color:var(--ok); background:var(--ok-soft)}
.ablage small{color:var(--muted)}
/* schmale Bildschirme: Raster dürfen nie breiter werden als der Dialog */
.paar, .wahl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dialog{overflow-x:hidden}
.dialog input, .dialog select{min-width:0; max-width:100%}
@media (max-width:420px){ .wahl{grid-template-columns:1fr} .dialog{padding:18px} }


/* Meine Zahlen */
.held.klein{padding:20px 24px; gap:10px}
.held-hinweis{background:rgba(255,255,255,.18); border-radius:12px; padding:8px 12px; font-size:13px}
.btn.rund{width:40px; height:40px; justify-content:center; border-radius:50%; padding:0; font-size:18px}
.held .btn.rund{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.35); color:inherit}
.start > .zahlen{grid-column:1/-1}
.zahlen{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; align-items:start}
.zk{gap:14px}
.zk-kopf{display:flex; justify-content:space-between; align-items:center}
.etikett{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700}
.etikett.klein{font-size:11px; margin-top:4px}
.zk-mitte{display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center}
@media (max-width:420px){ .zk-mitte{grid-template-columns:1fr; justify-items:center} .zk-mitte .liste{width:100%} }
.ring.hell{width:150px; height:150px}
.ring.hell .ring-grund{stroke:var(--sunk)} .ring.hell .ring-wert{stroke:var(--accent)}
.ring.hell .ring-zahl{font-size:38px; color:var(--accent)} .ring.hell .ring-text span{color:var(--muted); opacity:1}
.e.wz{grid-template-columns:1fr auto; padding:7px 0}
.e.wz.summe{border-top:2px solid var(--ink); border-bottom:0; font-weight:700; margin-top:2px}
.za-gross{display:grid; gap:2px}
.za-gross b{font-size:48px; font-weight:800; letter-spacing:-.03em; line-height:1}
.za-gross span{font-weight:600} .za-gross small{color:var(--muted)}
.mbalken{display:grid; grid-template-columns:repeat(12,1fr); gap:6px; height:84px; align-items:end}
.mbalken div{display:grid; grid-template-rows:1fr auto; height:100%; justify-items:center; gap:4px}
.mbalken i{display:block; width:100%; max-width:18px; align-self:end; border-radius:6px 6px 2px 2px; background:var(--vi)}
.mbalken span{font-size:10.5px; color:var(--muted)}
.mbalken.ab-urlaub i{background:var(--accent)} .mbalken.ab-krank i{background:var(--crit)}
.verlauf svg{width:100%; height:90px; overflow:visible}
.verlauf .null{stroke:var(--line); stroke-dasharray:3 3}
.verlauf .linie{fill:none; stroke:var(--vi); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.verlauf .ende{fill:var(--vi); stroke:var(--surface); stroke-width:2}
.verlauf-achse{display:grid; grid-template-columns:repeat(12,1fr); font-size:10.5px; color:var(--muted); text-align:center}


/* ======================================================================
   Moderner Stil für alle übrigen Seiten
   ====================================================================== */
main{gap:18px; padding-top:22px}
.karte > .zeile.zw:first-child h2, .karte > h2:first-child{font-size:21px; letter-spacing:-.01em}
.karte h2 small{font-size:13px}
/* Kennzahlen (Zeiten) wie die Kacheln der Startseite */
.kennz{gap:12px}
.kennz div{background:linear-gradient(160deg, var(--sunk), color-mix(in srgb, var(--sunk) 55%, var(--surface))); border-radius:16px; padding:14px 16px}
.kennz b{font-size:24px; font-weight:800; letter-spacing:-.02em}
/* Tabellen */
.tab{border:0; border-radius:16px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line)}
th{background:transparent; border-bottom:1px solid var(--line); font-size:11px; padding:10px 12px}
td{padding:10px 12px; border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent)}
tr.klick:hover td{background:color-mix(in srgb, var(--vi-soft) 70%, transparent)}
tr.we td{background:color-mix(in srgb, var(--sunk) 35%, transparent)}
tr.detail td{background:color-mix(in srgb, var(--vi-soft) 35%, var(--surface))}
.st{padding:3px 10px; font-size:11.5px; letter-spacing:.01em}
/* Monats- und Jahresköpfe: runde Pfeile */
.karte > .zeile.zw:first-child > .zeile:first-child > .btn{width:38px; height:38px; justify-content:center; border-radius:50%; padding:0; font-size:17px}
/* Jahreskalender */
.mon{border:0; border-radius:16px; box-shadow:inset 0 0 0 1px var(--line); padding:12px}
.mon b{font-size:12.5px}
.mon .g span{border-radius:7px; line-height:24px}
/* Listen (Anträge, Summen, Verwaltung) */
.liste > .e{padding:11px 0}
.liste > .e .ic{border-radius:10px; width:32px; height:32px; background:var(--vi-soft); color:var(--vi-text)}
/* Team-Kacheln */
.kacheln{gap:12px}
.kachel{border:0; border-radius:18px; box-shadow:var(--schatten); padding:14px 16px; transition:transform .12s, box-shadow .12s}
.kachel:hover{transform:translateY(-2px); box-shadow:0 14px 34px -14px rgba(16,24,40,.3)}
.kachel .q{width:42px; height:42px; border-radius:50%; font-size:12.5px}
.kachel .n{font-size:15px}
/* Anträge: Formular */
form.karte .chips{gap:8px}
/* Konto, Verwaltung */
.pill{padding:4px 11px}
/* Anmeldung */
.anmeldung .karte{padding:28px; border-radius:24px}
.anmeldung h1{font-size:26px; letter-spacing:-.02em}
.anmeldung{margin-top:10vh}
/* Kopfzeile auf dem Handy etwas luftiger */
nav.unten{background:color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:0; box-shadow:0 -6px 24px -12px rgba(16,24,40,.25)}
nav.unten a i{width:26px; height:4px}

/* Zähler an Menüpunkten */
nav a{position:relative}
nav a .zahl{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px; border-radius:999px;
  background:var(--crit); color:#fff; font-size:11px; font-weight:800; vertical-align:1px}
nav.unten a .zahl{position:absolute; top:0; right:calc(50% - 22px); margin:0}
.firmenwahl{padding:10px 14px}
.chip .punkt{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:1px}
.chip small{opacity:.65; font-weight:500}
/* Foto in der Anwesenheitskachel: Bild rund, Status als kleines Abzeichen unten rechts */
.kachel .q.foto{position:relative; background:transparent !important; border:0 !important; padding:0; overflow:visible}
.kachel .q.foto img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; background:var(--sunk)}
.kachel .q.abz{position:absolute; right:-6px; bottom:-5px; width:auto; min-width:22px; height:20px; padding:0 5px; border-radius:10px;
  font-style:normal; font-size:10px; line-height:16px; display:block; text-align:center; border:2px solid var(--surface); box-sizing:border-box; grid-row:auto}
/* Tage markieren (Personalverwaltung/GF) */
tr.markiert > td{background:var(--vi-soft) !important}
tr.markiert > td:first-child{box-shadow:inset 3px 0 0 var(--vi)}
.markleiste{position:sticky; bottom:76px; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px;
  background:var(--surface); border-radius:14px; box-shadow:0 12px 30px -10px rgba(16,24,40,.45); border:1px solid var(--line)}
@media (min-width:900px){ .markleiste{bottom:16px} }
.markleiste .muted{margin-right:auto; font-size:13px}
.kontextmenue{position:fixed; z-index:50; min-width:220px; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 16px 40px -12px rgba(16,24,40,.5); padding:6px; display:grid}
.kontextmenue > .hinweis-klein{padding:6px 10px 4px}
.kontextmenue button{all:unset; cursor:pointer; padding:8px 10px; border-radius:8px; font-size:14px}
.kontextmenue button:hover, .kontextmenue button:focus{background:var(--vi-soft)}
.kontextmenue hr{border:0; border-top:1px solid var(--line); margin:4px 0}
tbody tr.klick{user-select:none}
.kennz div[title], th[title]{cursor:help}
@media print{ header.kopf, nav.unten, .demo, .chips, button{display:none !important} body{background:#fff; color:#000} .karte{box-shadow:none !important; border:1px solid #ccc; break-inside:avoid} }

/* Monatstabelle: Spaltenköpfe wandern beim Scrollen unter der Kopfleiste mit */
.tab.haftend{overflow:visible}
.tab.haftend thead th{position:sticky; top:var(--kopf-h,56px); z-index:3; background:var(--surface);
  box-shadow:0 1px 0 var(--line)}
.tab.haftend thead th:first-child{border-top-left-radius:16px} .tab.haftend thead th:last-child{border-top-right-radius:16px}
@media (max-width:420px){.kennz div{padding:10px} .kennz b{font-size:19px}}
/* Handy: Tabelle scrollt in sich (seitlich und nach unten), der Kopf bleibt oben in der Tabelle stehen */
@media (max-width:640px){.tab.haftend{overflow:auto; max-height:calc(100dvh - var(--kopf-h,56px) - 110px)} .tab.haftend thead th{top:0}}

/* Jahresansicht: markierte Tage */
.mon .g span.markiert{outline:2px solid var(--vi); outline-offset:-2px; background:var(--vi-soft); color:var(--ink)}
.mon .g span{user-select:none}

/* Genehmigung: wer ist gleichzeitig weg */
.ueberschneidung{display:grid; gap:3px; margin:6px 0; padding:8px 10px; border-radius:10px; background:color-mix(in srgb, var(--warn) 12%, var(--surface))}
.ueberschneidung .leg{width:10px; height:10px}

/* Urlaubsplan */
.plan-seite{display:grid; gap:12px}
.plan-kopf{flex-wrap:wrap; gap:10px} .plan-kopf > .zeile{flex-wrap:wrap; gap:8px} .plan-kopf .chips{flex-wrap:nowrap} .plan-kopf h2{margin:0} .plan-kopf .btn{white-space:nowrap; flex:none}
.plan-rahmen{overflow:auto; max-height:calc(100dvh - var(--kopf-h,56px) - 120px); border:1px solid var(--line); border-radius:12px}
table.plan{border-collapse:separate; border-spacing:0; font-size:12px; width:max-content; min-width:100%}
table.plan th, table.plan td{padding:0; border-bottom:1px solid var(--line); border-right:1px solid color-mix(in srgb, var(--line) 50%, transparent); text-align:center}
table.plan thead th{position:sticky; top:0; z-index:2; background:var(--surface); text-transform:none; letter-spacing:0; font-size:11px}
table.plan thead tr:nth-child(2) th{top:24px}
table.plan thead th.monat{height:24px; text-align:left; padding:0 6px; font-weight:800; color:var(--ink)}
table.plan thead th span{display:block; font-weight:700; color:var(--ink)} table.plan thead th small{display:block; font-size:9.5px; color:var(--muted)}
table.plan thead th.heute span{color:var(--vi-text); text-decoration:underline}
table.plan td:not(.name){min-width:22px; width:22px; height:26px}
table.plan .name{position:sticky; left:0; z-index:1; background:var(--surface); text-align:left; padding:3px 10px; min-width:170px; max-width:220px}
table.plan thead th.name{z-index:3}
table.plan td.name span{display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
table.plan td.name small{display:block; color:var(--muted); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
table.plan .we, table.plan .tfrei{background:var(--sunk)}
table.plan th.we{background:var(--sunk)}
table.plan tr.gruppe td{text-align:left; font-weight:800; padding:6px 10px; background:var(--ground); position:sticky; left:0}
table.plan tfoot td{position:sticky; bottom:0; background:var(--surface); font-weight:700; font-size:11px; border-top:2px solid var(--line)}
table.plan tfoot td.viel{background:color-mix(in srgb, var(--crit) 22%, var(--surface)); color:var(--crit)}
.plan-leg .leg{width:12px; height:12px}

@media print{
  @page{size:A4 landscape; margin:10mm}
  .plan-seite .chips:not(.plan-leg), .plan-kopf button{display:none !important}
  .plan-rahmen{overflow:visible; max-height:none; border:0}
  table.plan{font-size:8px; width:100%; min-width:0}
  table.plan td:not(.name){min-width:0; width:auto; height:16px}
  table.plan .name{min-width:0; max-width:none; padding:1px 4px; position:static}
  table.plan thead th, table.plan tfoot td{position:static}
  table.plan td.name small{display:none}
  .plan-leg{display:flex !important}
  .a-urlaub,.a-zeitausgleich,.a-dienstreise,.a-fortbildung,.a-krank,.a-kind_krank,.a-abwesend,.a-sonderurlaub,.a-unbezahlt,.we,.tfrei,.leg,.viel{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* Kopf mit Bereichen (Ich · Team · Verwaltung) – Entwurf B */
nav.bereiche{display:flex; gap:2px; background:var(--sunk); padding:4px; border-radius:999px}
nav.bereiche a{text-decoration:none; color:var(--muted); font-size:14px; padding:6px 16px; border-radius:999px; white-space:nowrap; position:relative}
nav.bereiche a.an{background:var(--surface); color:var(--ink); font-weight:700; box-shadow:0 1px 3px rgba(16,24,40,.14)}
header.kopf.zwei{flex-wrap:wrap; row-gap:0; padding-bottom:0}
header.kopf.zwei .wer{order:2}
header.kopf.zwei nav.haupt{order:3; flex-basis:100%; background:none; border-radius:0; padding:6px 0 0; margin-top:8px; gap:4px;
  border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent)}
header.kopf.zwei nav.haupt a{border-radius:0; padding:8px 12px 9px; box-shadow:none; background:none; color:var(--muted); border-bottom:3px solid transparent}
header.kopf.zwei nav.haupt a.an{background:none; color:var(--ink); border-bottom-color:var(--vi); font-weight:700}
header.kopf.zwei nav.haupt a:hover{color:var(--ink)}
@media (max-width:899px){ header.kopf.zwei{padding-bottom:8px} }
@media (max-width:560px){ header.kopf.zwei .wer > span:last-child{display:none} .marke{font-size:0; gap:0} .marke i{font-size:14px}
  nav.bereiche a{padding:6px 12px; font-size:13px} }

/* Steuerliste (Anlage N) */
.steuer{display:grid; gap:14px; max-width:640px}
.steuer-block h3{margin:0 0 6px; font-size:15px} .steuer-block h3 small{margin-left:8px; font-weight:500; color:var(--muted); font-size:12px}
.steuer details summary{cursor:pointer; font-weight:700; font-size:14px; padding:4px 0}
.steuer-hinweise{margin:0; padding-left:18px; display:grid; gap:3px}

/* Urlaubsplan: Drucken als normaler Knopf mit Symbol */
.plan-kopf .btn.drucken{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border-radius:999px; font-size:14px; font-weight:700}
.plan-kopf .btn.drucken svg{width:17px; height:17px}
/* Urlaubskarte: Resturlaub Vorjahr mit Frist in zweiter Zeile */
.zk .wz small{display:block; font-size:12px; color:var(--muted); font-weight:500}

/* Fragen & Antworten */
.hilfe-knopf{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--sunk); color:var(--ink);
  font-weight:800; text-decoration:none; font-size:15px; flex:none}
.hilfe-knopf.an, .hilfe-knopf:hover{background:var(--vi); color:var(--vi-on)}
.faq{display:grid; gap:14px; max-width:860px; margin:0 auto}
.faq input[type=search]{margin-top:4px}
.faq-gruppe h2{margin:0 0 6px}
.faq-frage{border-top:1px solid var(--line)}
.faq-frage:first-of-type{border-top:0}
.faq-frage summary{cursor:pointer; list-style:none; padding:12px 28px 12px 0; font-weight:700; position:relative}
.faq-frage summary::-webkit-details-marker{display:none}
.faq-frage summary::after{content:"+"; position:absolute; right:4px; top:10px; font-size:20px; color:var(--muted); font-weight:400}
.faq-frage[open] summary::after{content:"–"}
.faq-antwort{padding:0 0 14px; display:grid; gap:10px; justify-items:start}
.faq-antwort p{margin:0; line-height:1.55}

.anleitung{margin:0; padding-left:20px; display:grid; gap:6px}
.meldung.fehler .btn{margin-top:8px}

/* Wege zu den Standorten */
.e.entf{grid-template-columns:1fr auto auto; gap:8px; align-items:center}
.e.entf > input:last-child{grid-column:1 / -1}
.e.entf small{display:block}

/* Reisekosten */
.reise-form{display:grid; gap:12px; max-width:640px}
.reise-frage{display:grid; gap:8px; padding:12px; border-radius:12px; background:var(--sunk)}
.reise-summe{display:grid}
.reise-hinweis{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; grid-column:1/-1;
  border-left:5px solid var(--accent)}
.reise-hinweis > div{display:grid; gap:2px}

/* Lohn */
a.e.lohn-zeile{grid-template-columns:auto 1fr auto; text-decoration:none; color:inherit; align-items:center}
a.e.lohn-zeile:hover b{text-decoration:underline}
/* viele Menüpunkte unten auf dem Handy: etwas enger */
@media (max-width:420px){ nav.unten a{font-size:10px} }

/* Postfach und Aushang */
.hilfe-knopf.glocke{border:0; cursor:pointer; position:relative}
.hilfe-knopf.glocke .zahl{position:absolute; top:-6px; right:-8px; margin:0; display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--crit); color:#fff; font-size:11px; font-weight:800}
.postfach{display:grid; gap:6px; max-width:560px; max-height:60vh; overflow:auto}
.pf-eintrag{display:grid; grid-template-columns:auto 1fr; gap:10px; text-align:left; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; font:inherit; color:inherit; cursor:pointer}
.pf-eintrag.neu{border-color:var(--vi); background:var(--vi-soft)}
.pf-eintrag small{display:block; font-size:12.5px}
.info-karte{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; grid-column:1/-1; border-left:5px solid var(--vi)}
.info-karte > div:first-child{display:grid; gap:2px; flex:1 1 260px}
.info-karte.aushang{border-left-color:var(--accent)}
.info-karte.wichtig{border-left-color:var(--crit); background:color-mix(in srgb, var(--crit) 6%, var(--surface))}

/* Umbau-Anzeige (gleich wie in der Personalakte): erscheint, wenn der Dienst neu startet */
#wartung{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--ground);background-image:radial-gradient(circle at 50% 0%,rgba(120,150,170,.16),transparent 60%)}
#wartung[hidden]{display:none!important}
.wartung-karte{max-width:440px;width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:34px 32px 26px;box-shadow:0 18px 50px rgba(20,40,50,.16);text-align:center}
.wartung-karte h2{margin:22px 0 10px;font-size:22px;letter-spacing:-.01em}
.wartung-karte p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.wartung-karte .wartung-klein{font-size:13px;color:var(--muted);margin-bottom:20px}
.wartung-anzeige{display:flex;justify-content:center;align-items:flex-end;gap:7px;min-height:52px}
.wartung-anzeige .ziegel{width:15px;border-radius:4px;background:var(--vi,#5E8F2C);opacity:.25;animation:bauen 1.5s ease-in-out infinite}
.wartung-anzeige .z1{height:18px;animation-delay:0s}.wartung-anzeige .z2{height:30px;animation-delay:.12s}
.wartung-anzeige .z3{height:44px;animation-delay:.24s}.wartung-anzeige .z4{height:30px;animation-delay:.36s}
.wartung-anzeige .z5{height:18px;animation-delay:.48s}
@keyframes bauen{0%,100%{opacity:.22;transform:translateY(3px)}45%{opacity:1;transform:translateY(-3px)}}
.wartung-fuss{display:flex;align-items:center;justify-content:center;gap:9px;padding-top:16px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.wartung-fuss .punkt{width:8px;height:8px;border-radius:50%;background:var(--warn,#A8691A);animation:pulsen 1.4s ease-in-out infinite}
@keyframes pulsen{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.wartung-anzeige .ziegel,.wartung-fuss .punkt{animation:none;opacity:.8}}

/* Lohn gesperrt */
.lohn-sperre{max-width:460px; margin:24px auto; display:grid; gap:12px; justify-items:center; text-align:center}
.lohn-sperre .schloss{font-size:42px; line-height:1}

#wartegrafik{display:block; max-width:100%; max-height:170px; margin:0 auto}
#wartegrafik[hidden]{display:none}