/* Werkmass Bausteine. Werte kommen aus tokens.css, hier keine Farbwerte. */
body{background:var(--papier);color:var(--anthrazit);font-family:var(--font-display);margin:0}
.wm-zahl{font-variant-numeric:tabular-nums}
.wm-status{display:inline-flex;align-items:center;gap:var(--abstand-2);font:500 13px/18px var(--font-display);color:var(--anthrazit)}
.wm-status i{width:10px;height:10px;border-radius:var(--radius-pille);background:var(--status-offen);flex:none}
.wm-status[data-ampel="ok"] i{background:var(--status-ok)}.wm-status[data-ampel="achtung"] i{background:var(--status-achtung)}.wm-status[data-ampel="kritisch"] i{background:var(--status-kritisch)}
.wm-fortschritt{display:flex;width:100%;height:10px;border-radius:var(--radius-pille);overflow:hidden;background:var(--status-spaeter)}
.wm-fortschritt span{display:block;height:100%}.wm-fortschritt .fertig{background:var(--gruen)}.wm-fortschritt .arbeit{background:var(--status-achtung)}.wm-fortschritt .offen{background:var(--status-offen)}.wm-fortschritt .spaeter{background:var(--status-spaeter)}
.wm-legende{display:flex;flex-wrap:wrap;gap:var(--abstand-3);font:400 12px/16px var(--font-display);color:var(--text-sekundaer);margin-top:var(--abstand-2)}
.wm-legende b{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:var(--abstand-1);vertical-align:-1px}
.wm-stufen{display:flex;gap:3px}
.wm-stufen span{flex:1;min-width:0;text-align:center;padding:3px 2px;border-radius:var(--radius-klein);background:var(--flaeche-zart);color:var(--text-sekundaer);font:500 11px/16px var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-stufen .vorbei{background:var(--gruen-hell);color:var(--anthrazit)}.wm-stufen .aktiv{background:var(--gruen);color:var(--auf-gruen);font-weight:600}
.wm-karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-mittel);padding:var(--abstand-4)}
.wm-kennzahl .kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--abstand-2)}
.wm-kennzahl .titel{font:600 12px/16px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--text-sekundaer)}
.wm-kennzahl .wert{font:700 32px/36px var(--font-display);font-variant-numeric:tabular-nums;margin:var(--abstand-2) 0 var(--abstand-1)}
.wm-kennzahl .info{font:400 14px/20px var(--font-display)}.wm-kennzahl .zweck{font:400 12px/16px var(--font-display);color:var(--text-sekundaer);margin-top:var(--abstand-2)}
.wm-team{display:block;width:100%;text-align:left;cursor:pointer;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-mittel);padding:var(--abstand-3);color:var(--anthrazit);font-family:var(--font-display);transition:box-shadow .12s,transform .12s}
.wm-team:hover{box-shadow:var(--schatten-karte);transform:translateY(-1px)}.wm-team:focus-visible{outline:2px solid var(--gruen-dunkel);outline-offset:2px}
.wm-team .name{display:flex;justify-content:space-between;align-items:center;font:600 14px/20px var(--font-display)}.wm-team .wer{font:400 11px/16px var(--font-display);color:var(--text-sekundaer)}
.wm-team .betrieb{font:400 13px/18px var(--font-display);margin:var(--abstand-1) 0 var(--abstand-2)}.wm-team .betrieb b{font-weight:700;font-size:15px}
.wm-team .aufbau{display:flex;align-items:center;gap:var(--abstand-2);font:400 11px/14px var(--font-display);color:var(--text-sekundaer)}.wm-team .aufbau .wm-fortschritt{height:4px;flex:1}
.wm-bereich{background:var(--flaeche-dunkel);color:var(--auf-dunkel);border-radius:var(--radius-mittel);padding:var(--abstand-3)}
.wm-bereich .name{font:700 15px/20px var(--font-display)}.wm-bereich .lage{font:400 12px/16px var(--font-display);opacity:.85;margin-top:2px}
.wm-fenster{background:var(--flaeche);border-left:1px solid var(--linie);box-shadow:var(--schatten-fenster);padding:var(--abstand-4) var(--abstand-4) var(--abstand-6);width:420px;max-width:100%}
.wm-fenster .pfad{font:400 12px/16px var(--font-display);color:var(--text-sekundaer)}.wm-fenster h3{font:700 20px/26px var(--font-display);margin:2px 0 var(--abstand-1)}
.wm-fenster h4{font:600 12px/16px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--text-sekundaer);margin:var(--abstand-4) 0 var(--abstand-2)}
.wm-fenster .zeile{border:1px solid var(--linie);border-radius:var(--radius-klein);padding:var(--abstand-2) var(--abstand-3);margin-bottom:6px;font:400 14px/20px var(--font-display)}
.wm-knopf{display:inline-flex;align-items:center;gap:var(--abstand-2);border-radius:var(--radius-mittel);padding:8px 14px;font:600 14px/20px var(--font-display);border:1px solid var(--anthrazit);background:var(--anthrazit);color:var(--papier);cursor:pointer}
.wm-knopf.akzent{background:var(--gruen);border-color:var(--gruen);color:var(--auf-gruen)}.wm-knopf.leise{background:transparent;color:var(--anthrazit);border-color:var(--linie)}
.wm-knopf:focus-visible{outline:2px solid var(--gruen-dunkel);outline-offset:2px}.wm-knopf[disabled]{opacity:.45;cursor:not-allowed}

/* Werkmass-Handschrift: Maßstab, Bemaßung, Planraster, Lineal */
.wm-massstab{position:relative;height:20px;border:2px solid var(--masslinie);border-radius:3px;background:var(--flaeche);overflow:hidden}
.wm-massstab .fuell{position:absolute;left:0;top:0;bottom:0;background:var(--gruen)}
.wm-massstab .skala{position:absolute;inset:0;z-index:1;color:var(--anthrazit);opacity:.35;
 background-image:linear-gradient(90deg,currentColor 2px,transparent 2px),linear-gradient(90deg,currentColor 1px,transparent 1px);
 background-size:10% 9px,5% 5px;background-repeat:repeat-x;background-position:0 0,0 0}
.wm-massstab .marke{position:absolute;top:0;bottom:0;z-index:2;width:3px;background:var(--gruen-dunkel);transform:translateX(-3px)}
.wm-massstab.klein{height:12px;border-width:1.5px}.wm-massstab.klein .skala{background-size:10% 6px,5% 3px}
.wm-bemassung{display:flex;align-items:center;gap:var(--abstand-2);color:var(--text-sekundaer);font:600 12px/16px var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.wm-bemassung::before,.wm-bemassung::after{content:"";flex:1;height:10px;border-bottom:1px solid var(--masslinie)}
.wm-bemassung::before{border-left:2px solid var(--masslinie)}.wm-bemassung::after{border-right:2px solid var(--masslinie)}
.wm-bemassung b{color:var(--anthrazit);font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}
.wm-planraster{background-color:var(--papier);background-image:linear-gradient(var(--raster-stark) 1px,transparent 1px),linear-gradient(90deg,var(--raster-stark) 1px,transparent 1px),linear-gradient(var(--raster) 1px,transparent 1px),linear-gradient(90deg,var(--raster) 1px,transparent 1px);
 background-size:calc(var(--raster-schritt)*5) calc(var(--raster-schritt)*5),calc(var(--raster-schritt)*5) calc(var(--raster-schritt)*5),var(--raster-schritt) var(--raster-schritt),var(--raster-schritt) var(--raster-schritt)}
.wm-lineal{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:2px solid var(--masslinie);border-radius:3px;overflow:hidden;background:var(--flaeche)}
.wm-lineal span{position:relative;padding:12px 10px 18px;font:500 12px/16px var(--font-display);color:var(--text-sekundaer);border-left:1px solid var(--masslinie);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-lineal span:first-child{border-left:0}
.wm-lineal span::before{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;opacity:.4;background-image:linear-gradient(90deg,currentColor 1px,transparent 1px);background-size:20% 7px;background-repeat:repeat-x}
.wm-lineal .vorbei{background:var(--gruen);color:var(--auf-gruen);border-left-color:color-mix(in srgb,var(--auf-gruen) 35%,transparent)}
.wm-lineal .aktiv{background:color-mix(in srgb,var(--gruen) 28%,var(--flaeche));color:var(--anthrazit);font-weight:700;box-shadow:inset 0 -4px 0 var(--gruen)}
.wm-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--abstand-2)}
.wm-liste li{position:relative;padding-left:32px}
.wm-liste li::before,.wm-liste li::after{content:"";position:absolute;left:0;top:calc(.5lh - 6px);width:24px;height:12px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M1.75 2h10.5v6H1.75z' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M4.5 2v6' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M1.75 2h10.5v6H1.75z' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M4.5 2v6' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat center/contain;background:var(--anthrazit)}
.wm-liste li::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M12.25 1.25L18.75 5l-6.5 3.75z' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M12.25 1.25L18.75 5l-6.5 3.75z' fill='%23000'/%3E%3C/svg%3E");background:var(--gruen)}
.wm-liste.strich li{padding-left:22px}
.wm-liste.strich li::before{width:12px;height:8px;top:calc(.5lh - 4px);-webkit-mask:none;mask:none;background:none;border-bottom:2px solid var(--masslinie);border-right:2px solid var(--gruen)}
.wm-liste.strich li::after{display:none}
.wm-symbol{width:20px;height:20px;vertical-align:-4px}