/*
 * Datei: assets/styles/components.css
 * Zweck: Globale Komponentenbibliothek.
 * Domäne: Buttons, Chips, Cards, Dialoge, Badges, Icons, Rail und Formular-Grundformen.
 * Status: führend
 * Darf definieren: wiederverwendbare Komponenten und Zustands-/Fokusgrammatik.
 * Darf nicht definieren: fachliche Seitenlayouts oder Bereichslogik.
 */

/* AP-29D-REV2 | 2026-05-01 | Zweck: Ownership-Lock bestätigt; neue oder geänderte Grundkomponenten nur in der führenden Domänendatei. | Owner: assets/styles/components.css */
button,select,input{
  outline:none;
}
.icon-btn,.btn,.select,.collapse-btn,.quick-action,.chip-btn{
  min-height:var(--touch);
  border-radius:var(--radius-s);
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  padding:0 14px;
}
.icon-btn{
  width:44px;
  height:44px;
  min-height:44px;
  min-width:44px;
  display:grid;
  place-items:center;
  padding:0;
  background:var(--surface-2);
  cursor:pointer;
  flex:0 0 auto;
  overflow:hidden;
}
.icon-btn svg,.btn svg,.quick-action svg,.collapse-btn svg,.chip-btn svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
}
.btn,.collapse-btn,.chip-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:700;
  cursor:pointer;
}
.select{
  width:100%;
}
.toggle{
  display:inline-flex;
  gap:4px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
}
.toggle button{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:7px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  cursor:pointer;
}
.toggle button.active{
  background:var(--surface-3);
  color:var(--text);
}
.card,.list,.hero-card,.placeholder,.panel,.panel-block{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.card,.hero-card,.placeholder,.panel,.panel-block{
  border-radius:var(--radius-xl);
}
.list{
  border-radius:var(--radius-l);
  overflow:hidden;
}
.link,.panel-link{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:var(--radius-m);
  padding:14px 16px;
  display:block;
}
.quick-action{
  padding:8px 6px;
  min-height:72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.quick-action.active{
  background:var(--surface-2);
  border-color:#3a4460;
}
.qa-icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
}
.qa-label{
  font-size:10px;
  color:var(--muted);
  line-height:1.15;
  text-align:center;
}
.chip-btn{
  min-height:34px;
  padding:0 12px;
  font-size:13px;
}
.chip-btn.active{
  background:var(--surface-3);
  color:var(--text);
}

button,
a,
[role="button"]{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.icon-btn,
.btn,
.select,
.collapse-btn,
.quick-action,
.chip-btn,
.menu-btn,
.dock-btn,
.sheet-btn,
.rail-action,
.header-action,
.accordion-head,
.recent-item{
  transition:
    transform .08s ease,
    background .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    filter .16s ease,
    opacity .16s ease;
  will-change:transform;
}

.menu-btn,
.dock-btn,
.sheet-btn,
.rail-action,
.header-action{
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
}

.sheet-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
}

.rail-action{
  text-decoration:none;
  cursor:pointer;
}

.accordion-head{
  cursor:pointer;
  text-align:left;
}

.icon-btn:hover,
.btn:hover,
.collapse-btn:hover,
.quick-action:hover,
.chip-btn:hover,
.menu-btn:hover,
.dock-btn:hover,
.sheet-btn:hover,
.rail-action:hover,
.header-action:hover,
.accordion-head:hover,
.recent-item:hover{
  filter:brightness(1.03);
}

.icon-btn:active,
.btn:active,
.collapse-btn:active,
.quick-action:active,
.chip-btn:active,
.menu-btn:active,
.dock-btn:active,
.sheet-btn:active,
.rail-action:active,
.header-action:active,
.accordion-head:active,
.recent-item:active{
  transform:translateY(1px) scale(.985);
  filter:brightness(1.09);
  box-shadow:0 0 0 1px rgba(157,180,255,.14), var(--shadow);
}

.icon-btn:focus-visible,
.btn:focus-visible,
.collapse-btn:focus-visible,
.quick-action:focus-visible,
.chip-btn:focus-visible,
.menu-btn:focus-visible,
.dock-btn:focus-visible,
.sheet-btn:focus-visible,
.rail-action:focus-visible,
.header-action:focus-visible,
.accordion-head:focus-visible,
.recent-item:focus-visible{
  outline:2px solid rgba(157,180,255,.42);
  outline-offset:2px;
}

.menu-btn:active .material-symbols-rounded,
.menu-btn:active .zm-local-icon,
.dock-btn:active .material-symbols-rounded,
.dock-btn:active .zm-local-icon,
.rail-action:active .material-symbols-rounded,
.rail-action:active .zm-local-icon,
.header-action:active .material-symbols-rounded,
.header-action:active .zm-local-icon,
.icon-btn:active .material-symbols-rounded,
.icon-btn:active .zm-local-icon{
  transform:scale(.96);
}

/* AP-29D-REV2 | 2026-05-01 | Zweck: einzige führende Material-Symbols-Rounded-Standardicondefinition. | Owner: assets/styles/components.css */
.material-symbols-rounded{
  font-family:'Material Symbols Rounded';
  font-weight:normal;
  font-style:normal;
  font-size:var(--zm-rail-icon-size,24px);
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  letter-spacing:normal;
  text-transform:none;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;
  transition:transform .08s ease, opacity .16s ease;
}


/* Gemeinsame Progress-/Meter-Grammatik */
.track{height:10px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),#cbd7ff)}
.fill--0{width:0%}
.fill--1{width:1%}
.fill--2{width:2%}
.fill--3{width:3%}
.fill--4{width:4%}
.fill--5{width:5%}
.fill--6{width:6%}
.fill--7{width:7%}
.fill--8{width:8%}
.fill--9{width:9%}
.fill--10{width:10%}
.fill--11{width:11%}
.fill--12{width:12%}
.fill--13{width:13%}
.fill--14{width:14%}
.fill--15{width:15%}
.fill--16{width:16%}
.fill--17{width:17%}
.fill--18{width:18%}
.fill--19{width:19%}
.fill--20{width:20%}
.fill--21{width:21%}
.fill--22{width:22%}
.fill--23{width:23%}
.fill--24{width:24%}
.fill--25{width:25%}
.fill--26{width:26%}
.fill--27{width:27%}
.fill--28{width:28%}
.fill--29{width:29%}
.fill--30{width:30%}
.fill--31{width:31%}
.fill--32{width:32%}
.fill--33{width:33%}
.fill--34{width:34%}
.fill--35{width:35%}
.fill--36{width:36%}
.fill--37{width:37%}
.fill--38{width:38%}
.fill--39{width:39%}
.fill--40{width:40%}
.fill--41{width:41%}
.fill--42{width:42%}
.fill--43{width:43%}
.fill--44{width:44%}
.fill--45{width:45%}
.fill--46{width:46%}
.fill--47{width:47%}
.fill--48{width:48%}
.fill--49{width:49%}
.fill--50{width:50%}
.fill--51{width:51%}
.fill--52{width:52%}
.fill--53{width:53%}
.fill--54{width:54%}
.fill--55{width:55%}
.fill--56{width:56%}
.fill--57{width:57%}
.fill--58{width:58%}
.fill--59{width:59%}
.fill--60{width:60%}
.fill--61{width:61%}
.fill--62{width:62%}
.fill--63{width:63%}
.fill--64{width:64%}
.fill--65{width:65%}
.fill--66{width:66%}
.fill--67{width:67%}
.fill--68{width:68%}
.fill--69{width:69%}
.fill--70{width:70%}
.fill--71{width:71%}
.fill--72{width:72%}
.fill--73{width:73%}
.fill--74{width:74%}
.fill--75{width:75%}
.fill--76{width:76%}
.fill--77{width:77%}
.fill--78{width:78%}
.fill--79{width:79%}
.fill--80{width:80%}
.fill--81{width:81%}
.fill--82{width:82%}
.fill--83{width:83%}
.fill--84{width:84%}
.fill--85{width:85%}
.fill--86{width:86%}
.fill--87{width:87%}
.fill--88{width:88%}
.fill--89{width:89%}
.fill--90{width:90%}
.fill--91{width:91%}
.fill--92{width:92%}
.fill--93{width:93%}
.fill--94{width:94%}
.fill--95{width:95%}
.fill--96{width:96%}
.fill--97{width:97%}
.fill--98{width:98%}
.fill--99{width:99%}
.fill--100{width:100%}

/* AP-29D-REV2 | 2026-05-01 | Zweck: gemeinsame Rail-, Button- und Dialog-Komponente als zentrale Komponentenbibliothek. | Owner: assets/styles/components.css */
:root{
  --rail-width: var(--zm-rail-width, var(--m3-nav-rail-width, 96px));
  --rail-item-height: var(--zm-rail-item-size, var(--m3-nav-rail-item-height, 72px));
  --rail-z: 260;
}
.drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:calc(var(--rail-z) - 10);
  display:none;
  background:rgba(2,6,14,.58);
  backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--m3-motion-standard,220ms) ease;
}
body[data-rail-state="open"] .drawer-backdrop[aria-hidden="false"]{
  display:block;
  opacity:1;
  pointer-events:auto;
}
.side-rail{
  position:fixed;
  right:0;
  top:0;
  bottom:0;
  z-index:var(--rail-z);
  width:var(--zm-rail-width);
  padding:var(--m3-space-4,1rem);
  border-radius:0;
  border:1px solid rgba(157,180,255,.18);
  background:color-mix(in srgb,var(--bg,#0d1015) 94%,transparent);
  box-shadow:0 24px 72px rgba(0,0,0,.45);
  backdrop-filter:blur(18px);
  display:flex;
  flex-direction:column;
  gap:var(--m3-space-4,1rem);
  overflow:auto;
  transform:none;
}
.rail-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--m3-space-3,.75rem);
  padding:var(--m3-space-2,.5rem) var(--m3-space-2,.5rem) var(--m3-space-3,.75rem);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.rail-kicker{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.rail-close{
  display:none;
  min-width:var(--m3-icon-button-size,3rem);
  min-height:var(--m3-icon-button-size,3rem);
  border-radius:var(--m3-radius-lg,1.5rem);
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
}
.rail-actions{
  display:grid;
  gap:var(--m3-space-2,.5rem);
}
.rail-action{
  width:100%;
  min-height:var(--rail-item-height);
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:var(--m3-space-3,.75rem);
  padding:0 var(--m3-space-4,1rem);
  border-radius:var(--m3-radius-xl,2rem);
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  text-decoration:none;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.rail-action:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(157,180,255,.22);
  color:var(--text);
}
.rail-action[aria-current="page"],
.rail-action.is-active{
  background:rgba(157,180,255,.18);
  border-color:rgba(157,180,255,.42);
  color:var(--text);
}
.rail-action:focus-visible,
.rail-close:focus-visible,
.menu-btn:focus-visible,
.zm-dialog__button:focus-visible,
.zm-dialog__close:focus-visible{
  outline:none;
  box-shadow:var(--m3-focus-ring,0 0 0 3px rgba(157,179,255,.42));
}
.rail-icon,
.rail-action .material-symbols-rounded,
.menu-btn .material-symbols-rounded,
.icon-btn .material-symbols-rounded{
  font-size:var(--m3-icon-size,1.5rem);
  line-height:1;
}
.rail-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.95rem;
  color:inherit;
}
.menu-btn{
  min-width:var(--m3-icon-button-size,3rem);
  min-height:var(--m3-icon-button-size,3rem);
  display:inline-grid;
  place-items:center;
  border-radius:var(--m3-radius-lg,1.5rem);
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
  cursor:pointer;
}
@media (min-width:961px){
  .menu-btn{display:none !important;}
  .side-rail[aria-hidden="true"]{visibility:visible;pointer-events:auto;}
  .drawer-backdrop{display:none !important;}
}
@media (max-width:960px){
  .side-rail{
    right:0;
    left:auto;
    top:calc(var(--app-header-safe,0px) + var(--app-header-h,76px) + var(--m3-space-3,.75rem));
    bottom:var(--m3-space-3,.75rem);
    width:var(--zm-rail-width);
    transform:translateX(calc(100% + 1rem));
    transition:transform var(--m3-motion-standard,220ms) ease;
  }
  body[data-rail-state="open"] .side-rail{transform:translateX(0);}
  .rail-close{display:inline-flex;align-items:center;justify-content:center;}
}

/* AP-29D-REV2 | 2026-05-01 | Zweck: Führende Side-Sheet-Grundkomponente aus Mitarbeiter-Sonderblock in zentrale Komponentenbibliothek überführt. | Owner: assets/styles/components.css */

.side-sheet{
  position:fixed;
  inset:0;
  z-index:var(--m3-sheet-z,170);
  display:none;
  align-items:center;
  justify-content:center;
  padding:var(--m3-space-4,1rem);
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(10px);
}

.side-sheet.open{
  display:flex;
}

.side-sheet-card{
  width:min(var(--m3-sheet-width,42.5rem),100%);
  max-height:min(78dvh,47.5rem);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--m3-dialog-radius,1.5rem);
  box-shadow:var(--shadow);
}

.side-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--m3-space-3,.75rem);
  padding:var(--m3-space-4,1rem);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.side-sheet-title{
  font-size:1.125rem;
  font-weight:800;
}

.side-sheet-body{
  padding:var(--m3-space-4,1rem);
  color:var(--text);
  max-height:calc(78dvh - 4.75rem);
  overflow:auto;
}

.sheet-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--m3-space-2,.5rem);
  margin-top:var(--m3-space-4,1rem);
}

.sheet-btn{
  min-height:var(--m3-button-height,2.75rem);
  padding:0 var(--m3-space-4,1rem);
  border-radius:var(--m3-radius-md,1rem);
}

.zm-dialog-backdrop{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:var(--m3-layout-gutter,1.5rem);
  background:rgba(2,6,14,.72);
  backdrop-filter:blur(12px);
}
.zm-dialog-backdrop.is-open{display:flex;}
.zm-dialog{
  width:min(var(--m3-dialog-width,42rem),100%);
  max-height:min(84vh,50rem);
  overflow:auto;
  border-radius:var(--m3-dialog-radius,2rem);
  border:1px solid rgba(157,179,255,.24);
  background:var(--surface,#151a24);
  color:var(--text,#f4f7fd);
  box-shadow:0 32px 90px rgba(0,0,0,.55);
}
.zm-dialog__head,.zm-dialog__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--m3-space-4,1rem);
  padding:var(--m3-space-5,1.25rem);
  border-bottom:1px solid rgba(157,179,255,.14);
}
.zm-dialog__foot{border-top:1px solid rgba(157,179,255,.14);border-bottom:0;justify-content:flex-end;flex-wrap:wrap;}
.zm-dialog__body{padding:var(--m3-space-5,1.25rem);color:rgba(244,247,255,.84);}
.zm-dialog__title{margin:0;font-size:1.25rem;}
.zm-dialog__close,.zm-dialog__button{
  min-height:var(--m3-button-height,2.75rem);
  border-radius:var(--m3-radius-xl,2rem);
  border:1px solid rgba(157,179,255,.24);
  color:var(--text,#f4f7ff);
  background:rgba(255,255,255,.06);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:0 1rem;
  cursor:pointer;
  font:inherit;
  font-weight:800;
}
.zm-dialog__button--primary{background:rgba(157,179,255,.20);border-color:rgba(157,179,255,.45);}
.zm-dialog__status{margin-right:auto;color:var(--muted);font-size:.85rem;}
.zm-dialog__status[data-kind="ok"]{color:#b6f0cc;}
.zm-dialog__status[data-kind="warn"]{color:#ffe3a7;}
.zm-dialog-stack{display:grid;gap:var(--m3-space-4,1rem);}
.zm-dialog-field{display:grid;gap:var(--m3-space-2,.5rem);}
.zm-dialog-field input,.zm-dialog-field textarea{width:100%;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:var(--m3-radius-md,1rem);padding:var(--m3-space-3,.75rem) var(--m3-space-4,1rem);font:inherit;}
.zm-dialog-status-list{display:flex;gap:var(--m3-space-2,.5rem);flex-wrap:wrap;}
@media(max-width:960px){
  .zm-dialog-backdrop{align-items:flex-end;padding:var(--m3-space-3,.75rem);}
  .zm-dialog{width:100%;max-height:88vh;border-radius:var(--m3-radius-xl,2rem) var(--m3-radius-xl,2rem) var(--m3-radius-lg,1.5rem) var(--m3-radius-lg,1.5rem);}
}

/* AP-29D-REV4 | 2026-05-01 | Zweck: Admin-Aktions-, Badge- und Dialog-Aliase bleiben zentrale Komponentenbibliothek; keine lokale Admin-Komponentenfamilie. | Owner: assets/styles/components.css */
/* AP-29D-REV2 | 2026-05-01 | Zweck: Formular- und Admin-Aliase zentral führen, damit Bereichsdateien keine Button-/Input-Familien erfinden. | Owner: assets/styles/components.css */
.input,
.admin-input,
.admin-select,
.admin-textarea{
  width:100%;
  min-height:var(--m3-field-height,var(--touch));
  padding:0 var(--m3-space-4,1rem);
  border-radius:var(--m3-radius-md,var(--radius-s));
  border:1px solid var(--line);
  background:var(--surface-2,var(--surface));
  color:var(--text);
  font:inherit;
}
.admin-textarea{min-height:8rem;padding-block:var(--m3-space-3,.75rem);resize:vertical;}
.submit,
.admin27-action,
.admin27-chip{
  min-height:var(--m3-button-height,var(--touch));
  border-radius:var(--m3-radius-xl,2rem);
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  color:var(--text);
  font:inherit;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--m3-space-2,.5rem);
  padding:0 var(--m3-space-4,1rem);
  cursor:pointer;
  text-decoration:none;
}
.submit{background:var(--brand);color:#0d1015;}
.admin27-badge,
.badge{
  display:inline-flex;
  align-items:center;
  min-height:var(--m3-badge-height,1.75rem);
  padding:0 var(--m3-space-3,.75rem);
  border-radius:var(--m3-radius-xl,2rem);
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  font-size:.75rem;
  font-weight:800;
  white-space:nowrap;
  pointer-events:none;
  cursor:default;
}
.admin27-section-pill,
.admin27-card__cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--m3-space-2,.5rem);min-height:var(--m3-button-height,2.75rem);padding:0 var(--m3-space-4,1rem);border:1px solid var(--line);border-radius:var(--m3-radius-xl,2rem);background:rgba(255,255,255,.045);color:var(--text);font:inherit;font-weight:800;text-decoration:none;}
.admin27-card__cta{margin-top:var(--m3-space-3,.75rem);background:rgba(157,180,255,.10);border-color:rgba(157,180,255,.28);}
.admin27-action:hover,.admin27-chip[role="button"]:hover,.admin27-card[href]:hover,.admin27-card[data-ap29d-card-dialog="true"]:hover{transform:translateY(-1px);border-color:rgba(157,180,255,.46);box-shadow:0 16px 42px rgba(4,8,18,.25);}
.admin27-badge--ok{background:rgba(70,190,120,.13);border-color:rgba(70,190,120,.3);color:#b6f0cc;}
.admin27-badge--warn{background:rgba(236,183,79,.14);border-color:rgba(236,183,79,.34);color:#ffe3a7;}
.admin27-badge--critical{background:rgba(236,92,92,.14);border-color:rgba(236,92,92,.34);color:#ffb4b4;}
.admin27-badge--preview{background:rgba(136,160,255,.14);border-color:rgba(136,160,255,.34);color:#cbd4ff;}
.admin27-badge--review{background:rgba(205,154,255,.14);border-color:rgba(205,154,255,.34);color:#e7cbff;}
.admin27-badge--blocked{background:rgba(150,150,160,.13);border-color:rgba(180,180,190,.22);color:#d1d5df;}
.admin27-badge--info{background:rgba(93,180,255,.12);border-color:rgba(93,180,255,.26);color:#c5e5ff;}


/* AP-29D-REV3 | 2026-05-01 | Zweck: zentrale Kurzinfo-/Iconlisten-Komponente für Suchtreffer und Rezeptlisten. | Owner: assets/styles/components.css */
.zm-summary-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m3-space-2, 0.5rem);
  min-width: 0;
}

.zm-summary-pill {
  min-width: 0;
  min-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(157, 180, 255, 0.16);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-soft, var(--muted));
  font-size: 0.68rem;
  line-height: 1.15;
}

.zm-summary-pill .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 0.95rem;
}

/* AP-29D-REV3 | 2026-05-01 | Zweck: Mitarbeiter-Desktop nutzt dieselbe Rail-Komponente als kompakte rechte Utility-Rail am Viewportrand. | Owner: assets/styles/components.css */
@media (min-width: 961px) {
  body[data-area="employee"] .side-rail {
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--employee-rail-desktop-width, 6.25rem);
    padding: calc(var(--app-header-safe, 0px) + var(--m3-space-5, 1.25rem)) var(--m3-space-2, 0.5rem) var(--m3-space-4, 1rem);
    border-width: 0 0 0 1px;
    border-radius: 0;
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.28);
    align-items: stretch;
    overflow: hidden auto;
  }

  body[data-area="employee"] .side-rail .rail-head {
    display: none;
  }

  body[data-area="employee"] .side-rail .rail-actions {
    display: grid;
    gap: var(--m3-space-2, 0.5rem);
    align-content: start;
  }

  body[data-area="employee"] .side-rail .rail-action {
    min-height: 3.95rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.28rem;
    padding: 0.38rem 0.28rem;
    border-radius: var(--m3-radius-lg, 1.5rem);
    text-align: center;
  }

  body[data-area="employee"] .side-rail .rail-label {
    width: 100%;
    font-size: 0.62rem;
    line-height: 1.1;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
  }
}



/* AP-29D-FINAL | 2026-05-03 | Zweck: eine einzige rechte Rail-Komponente mit 96px Breite für Admin und Mitarbeiter; keine breite Admin-Sonderrail. | Owner: assets/styles/components.css */
@media (min-width: 961px) {
  body[data-area] .side-rail {
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--zm-rail-width);
    padding: calc(var(--app-header-safe, 0px) + var(--m3-space-4, 1rem)) var(--m3-space-2, 0.5rem) var(--m3-space-4, 1rem);
    border-width: 0 0 0 1px;
    border-radius: 0;
    box-shadow: -18px 0 48px rgba(0,0,0,.28);
    overflow: hidden auto;
  }

  body[data-area] .side-rail .rail-head { display: none; }

  body[data-area] .side-rail .rail-actions {
    display: grid;
    gap: var(--m3-space-2, .5rem);
    align-content: start;
  }

  body[data-area] .side-rail .rail-action {
    min-height: 3.95rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.28rem;
    padding: 0.38rem 0.25rem;
    border-radius: var(--m3-radius-lg, 1.5rem);
    text-align: center;
  }

  body[data-area] .side-rail .rail-label {
    width: 100%;
    font-size: 0.62rem;
    line-height: 1.1;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
  }
}

@media (max-width: 960px) {
  body[data-area] .side-rail {
    right: 0;
    width: var(--zm-rail-width);
    border-radius: var(--m3-radius-xl, 2rem) 0 0 var(--m3-radius-xl, 2rem);
    padding-left: var(--m3-space-2, .5rem);
    padding-right: var(--m3-space-2, .5rem);
  }
  body[data-area] .side-rail .rail-head strong,
  body[data-area] .side-rail .rail-kicker { display: none; }
  body[data-area] .side-rail .rail-action {
    min-height: 3.95rem;
    flex-direction: column;
    justify-content: center;
    gap: .28rem;
    padding: .38rem .25rem;
    text-align: center;
  }
  body[data-area] .side-rail .rail-label {
    width: 100%;
    font-size: .62rem;
    line-height: 1.1;
    white-space: normal;
  }
}

/* AP-29D-REV3 | 2026-05-01 | Zweck: zentrale Rezept-Detailkarte für parallele Desktop-Informationsflächen. | Owner: assets/styles/components.css */
.recipe-panel-card {
  min-width: 0;
  display: grid;
  gap: var(--m3-space-3, 0.75rem);
  padding: var(--m3-space-4, 1rem);
  border: 1px solid var(--line);
  border-radius: var(--m3-card-radius, 1.5rem);
  background: rgba(255, 255, 255, 0.035);
}

.recipe-panel-card h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--m3-space-2, 0.5rem);
  font-size: 1rem;
}

.recipe-panel-meta {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

/* AP-29D-FINAL | 2026-05-03 | Zweck: admin27-Cards, Panels, Kontext, Listen und Aktionszustände zentral als Komponentenfamilie. | Owner: assets/styles/components.css */
.admin27-hero,.admin27-panel,.admin27-card,.admin27-context{
  background:linear-gradient(180deg,var(--panel,#151a24),var(--panel2,#1b2130));
  border:1px solid var(--line,rgba(255,255,255,.12));
  box-shadow:var(--shadow,0 16px 36px rgba(0,0,0,.34));
}
.admin27-hero{border-radius:var(--m3-radius-xl,2rem);padding:var(--m3-space-6,1.5rem);margin-bottom:var(--m3-space-5,1.25rem);}
.admin27-kicker{margin:0 0 var(--m3-space-3,.75rem);color:var(--muted);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;}
.admin27-hero__titleline{display:flex;justify-content:space-between;gap:var(--m3-space-5,1.25rem);align-items:flex-start;}
.admin27-hero h1{margin:0 0 var(--m3-space-3,.75rem);font-size:clamp(2rem,4.8vw,3.6rem);line-height:1;letter-spacing:-.04em;}
.admin27-hero p,.admin27-card p,.admin27-panel p,.admin27-small{margin:0;color:var(--muted,#a8b0c4);line-height:1.48;}
.admin27-context{position:sticky;top:calc(var(--app-header-safe,0px) + var(--app-header-h,76px) + var(--m3-space-4,1rem));border-radius:var(--m3-radius-lg,1.5rem);padding:var(--m3-space-5,1.25rem);display:grid;gap:var(--m3-space-3,.75rem);}
.admin27-context__title{display:flex;gap:var(--m3-space-2,.5rem);align-items:center;margin:0;}
.admin27-panel,.admin27-card{border-radius:var(--m3-card-radius,1.5rem);padding:var(--m3-space-5,1.25rem);}
.admin27-card{display:flex;gap:var(--m3-space-4,1rem);text-decoration:none;color:inherit;min-height:8rem;align-items:flex-start;}
.admin27-card__icon{width:var(--m3-icon-button-size,3rem);height:var(--m3-icon-button-size,3rem);border-radius:var(--m3-radius-md,1rem);display:grid;place-items:center;background:rgba(157,180,255,.12);color:var(--brand,#9db4ff);flex:0 0 auto;}
.admin27-card h3,.admin27-panel h2,.admin27-panel h3{margin:0 0 var(--m3-space-2,.5rem);}
.admin27-badges,.admin27-hero__status,.admin27-actions,.admin27-filters,.admin27-sections{display:flex;gap:var(--m3-space-2,.5rem);flex-wrap:wrap;align-items:center;}
.admin27-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--m3-space-2,.5rem);align-items:center;padding:var(--m3-space-3,.75rem) 0;border-bottom:1px solid rgba(255,255,255,.08);color:var(--muted);}
.admin27-row strong{color:var(--text);}
.admin27-action,.admin27-card[href],.admin27-card[data-ap29d-card-dialog="true"],.admin27-chip[role="button"],button.admin27-chip{cursor:pointer;}
.admin27-action:focus-visible,.admin27-card[href]:focus-visible,.admin27-card[data-ap29d-card-dialog="true"]:focus-visible,.admin27-chip[role="button"]:focus-visible{outline:none;box-shadow:var(--m3-focus-ring,0 0 0 3px rgba(157,179,255,.42));}
.admin27-card:not(a):not([href]):not([data-ap29d-card-dialog="true"]),.admin27-chip:not([role="button"]),.admin27-note,.admin27-metric{cursor:default;}
.admin27-list{display:grid;gap:var(--m3-space-3,.75rem);}
.admin27-list-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto auto;gap:var(--m3-space-3,.75rem);align-items:center;border:1px solid var(--line);border-radius:var(--m3-radius-lg,1.5rem);background:rgba(255,255,255,.035);padding:var(--m3-space-4,1rem);}
.admin27-row-actions{display:flex;gap:var(--m3-space-2,.5rem);flex-wrap:wrap;justify-content:flex-end;}
.ap29d-action-panel{border-color:rgba(157,180,255,.22);}
@media(max-width:960px){.admin27-hero{padding:var(--m3-space-5,1.25rem);border-radius:var(--m3-radius-lg,1.5rem);}.admin27-hero__titleline{display:grid;}}

/* AP-29D-FINAL-FIX | 2026-05-03 | Zweck: mobile rechte Rail startet am oberen Viewport, X ersetzt Menüposition; weniger Blur und keine verschobene Rundung. | Owner: assets/styles/components.css */
@media (max-width: 960px) {
  .drawer-backdrop { background: rgba(2,6,14,.38); backdrop-filter: blur(2px); }
  body[data-area] .side-rail {
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--zm-rail-width);
    border-radius: 0;
    padding-top: calc(env(safe-area-inset-top) + var(--m3-space-3, .75rem));
    transform: translateX(100%);
  }
  body[data-rail-state="open"] .side-rail { transform: translateX(0); }
  body[data-rail-state="open"] .rail-close { display: inline-flex; }
  .menu-btn .material-symbols-rounded { font-size: 0; width: 1.55rem; height: 1.55rem; position: relative; }
  .menu-btn .material-symbols-rounded::before,
  .menu-btn .material-symbols-rounded::after {
    content: "";
    position: absolute;
    right: .12rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .18s ease, width .18s ease, top .18s ease;
  }
  .menu-btn .material-symbols-rounded::before { top: .45rem; width: 1.05rem; }
  .menu-btn .material-symbols-rounded::after { top: .95rem; width: 1.45rem; }
  body[data-rail-state="open"] .menu-btn .material-symbols-rounded::before { top: .72rem; width: 1.35rem; transform: rotate(45deg); }
  body[data-rail-state="open"] .menu-btn .material-symbols-rounded::after { top: .72rem; width: 1.35rem; transform: rotate(-45deg); }
  body.zmr-overlay-open .menu-btn { display: none !important; }
}

/* AP-29D-FINAL-FIX | 2026-05-03 | Zweck: lokale Iconbilder einheitlich anzeigen; Material Symbols Rounded bleibt nur Fallback für nicht lokal definierte Rollen. | Owner: assets/styles/components.css */
.zm-inline-icon__img,
.zm-autoicon__img--local {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(1.08) saturate(1.05);
}
.zm-inline-icon:has(.zm-inline-icon__img) { color: inherit; }

/* AP-29D-FINAL-FIX | 2026-05-03 | Zweck: große Wissens-/Korrektur-Sheets nutzen operative Breite statt schmaler Popup-Fläche. | Owner: assets/styles/components.css */
.side-sheet:has(.sheet-doc--wide) .side-sheet-card,
.side-sheet:has(.sheet-doc--glossary) .side-sheet-card,
.side-sheet:has(.sheet-doc--handbook) .side-sheet-card {
  width: min(90vw, 78rem);
  max-height: min(88dvh, 58rem);
}
.side-sheet:has(.sheet-doc--wide) .side-sheet-body,
.side-sheet:has(.sheet-doc--glossary) .side-sheet-body,
.side-sheet:has(.sheet-doc--handbook) .side-sheet-body {
  max-height: min(78dvh, 50rem);
}

/* AP-29D-FINAL-FIX | 2026-05-03 | Zweck: Glossar/Handbuch als breite Wissensflächen statt zu kleiner Popups. | Owner: assets/styles/components.css */
body[data-utility-overlay="glossary"] .side-sheet-card,
body[data-utility-overlay="handbook"] .side-sheet-card,
body[data-utility-overlay="correction"] .side-sheet-card {
  width: min(90vw, 78rem);
}


/* AP-29D-REV8 | 2026-05-03 | Zweck: zentrale REV8-Komponentenrollen als Pflichtklassen; alte aktive Klassen werden nur als kompatible Alias-Nutzung derselben Komponentenfamilie geführt. | Owner: assets/styles/components.css */
.zm-btn,
.btn,
.admin27-action,
.sheet-btn,
.dock-btn {
  min-height: var(--m3-button-height, 44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.zm-icon-button,
.icon-btn,
.header-action,
.zm-menu-toggle,
.menu-btn,
.zm-back-button {
  width: var(--m3-icon-button-size, 48px);
  height: var(--m3-icon-button-size, 48px);
  min-width: var(--m3-icon-button-size, 48px);
  min-height: var(--m3-icon-button-size, 48px);
  display: inline-grid;
  place-items: center;
  border-radius: var(--m3-radius-lg, 1.5rem);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
.zm-card,
.zm-info-card,
.zm-action-card,
.card,
.admin27-card,
.admin27-panel,
.admin27-context,
.recipe-panel-card,
.overview-card {
  border-radius: var(--zm-card-radius);
}
.zm-card,
.zm-info-card,
.zm-action-card {
  padding: var(--zm-card-padding);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.zm-action-card,
.zm-btn,
.zm-rail__item,
.zm-rail .rail-action,
.admin27-card[href],
.admin27-action {
  cursor: pointer;
}
.zm-chip,
.zm-filter-chip,
.chip,
.chip-btn,
.admin27-chip,
.meta-chip {
  min-height: var(--zm-chip-height);
}
.zm-badge,
.zm-status-badge,
.badge,
.admin27-badge {
  min-height: var(--zm-badge-height);
}
.zm-status-badge,
.admin27-badge,
.badge:not(button):not(a) {
  cursor: default;
  pointer-events: none;
}
.zm-search-dock,
.bottom-search-dock {
  min-height: var(--zm-search-height);
}
.zm-form-control,
.zm-dropdown,
.zm-textarea,
.zm-dialog-field input,
.zm-dialog-field textarea,
.admin-input,
.admin-select,
.admin-textarea,
.correction-select,
.correction-note {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
}
.zm-textarea,
.zm-dialog-field textarea,
.admin-textarea,
.correction-note {
  resize: vertical;
}
.zm-rail,
.side-rail {
  width: var(--zm-rail-width);
}
.zm-rail__item,
.rail-action {
  min-height: var(--zm-rail-item-size);
}
.zm-rail__item .material-symbols-rounded,
.rail-action .material-symbols-rounded,
.rail-icon {
  font-size: var(--zm-rail-icon-size);
}
.zm-rail-backdrop,
.drawer-backdrop {}
.zm-rail--open,
body[data-rail-state="open"] .side-rail {}

/* AP-29D-REV8 | 2026-05-03 | Zweck: REV8-Komponentenvertrag: Rail, Buttons, Cards, Chips, Badges, Dialoge, Sheets, Suche und Formularfelder zentral geführt; Owner: assets/styles/components.css */
:root { --rail-width: var(--zm-rail-width); --rail-item-height: var(--zm-rail-item-size); }

.zm-btn,
.btn,
.admin27-action,
.zm-dialog__button,
.sheet-btn {
  min-height: var(--zm-search-height);
  border-radius: calc(var(--zm-search-height) / 2);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.055);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 0 1rem;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.zm-icon-button,
.icon-btn,
.dock-btn,
.zm-menu-toggle,
.menu-btn,
.zm-dialog__close,
.rail-close {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.055);
  color: var(--text);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.zm-card,
.zm-info-card,
.zm-action-card,
.card,
.panel,
.admin27-card,
.admin27-panel,
.recipe-panel-card {
  border-radius: var(--zm-card-radius);
  padding: var(--zm-card-padding);
}

.zm-action-card,
.admin27-card[href],
.admin27-card[data-ap29d-card-dialog="true"] { cursor: pointer; }

.zm-chip,
.zm-filter-chip,
.chip-btn,
.meta-chip,
.garnish-badge,
.admin27-chip {
  min-height: var(--zm-chip-height);
}

.zm-badge,
.zm-status-badge,
.admin27-badge {
  min-height: var(--zm-badge-height);
  cursor: default;
}

.zm-status-badge,
.admin27-badge {
  pointer-events: none;
}

.zm-btn,
.zm-action-card,
.zm-rail__item,
.rail-action {
  cursor: pointer;
}

.zm-rail-backdrop,
.drawer-backdrop {
  backdrop-filter: blur(2px);
  background: rgba(2, 6, 14, .38);
}

.zm-rail,
.side-rail {
  width: var(--zm-rail-width);
  right: 0;
  top: 0;
  bottom: 0;
  padding: .75rem .5rem;
  border-radius: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background: rgba(13,16,21,.96);
  box-shadow: -18px 0 52px rgba(0,0,0,.34);
  overflow-x: hidden;
}

.zm-rail--open,
body[data-rail-state="open"] .zm-rail,
body[data-rail-state="open"] .side-rail {
  transform: translateX(0);
}

.rail-head { padding: .25rem 0 .5rem; }
.rail-actions { gap: .5rem; }
.zm-rail__item,
.rail-action {
  min-height: var(--zm-rail-item-size);
  width: 100%;
  padding: .4rem .2rem;
  border-radius: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  text-align: center;
}
.zm-rail__item .material-symbols-rounded,
.rail-action .material-symbols-rounded,
.rail-icon {
  font-size: var(--zm-rail-icon-size);
}
.rail-label { font-size: .68rem; line-height: 1.05; white-space: normal; max-width: 100%; }

.zm-menu-icon {
  width: 22px;
  height: 14px;
  display: grid;
  align-content: space-between;
}
.zm-menu-icon::before,
.zm-menu-icon::after {
  content: "";
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.zm-menu-icon::before { width: 22px; }
.zm-menu-icon::after { width: 14px; justify-self: end; }
.zm-menu-toggle--open .zm-menu-icon::before { width: 20px; transform: translateY(6px) rotate(45deg); }
.zm-menu-toggle--open .zm-menu-icon::after { width: 20px; transform: translateY(-6px) rotate(-45deg); }

.zm-search-dock,
.bottom-search-dock { min-height: var(--zm-search-height); }
.searchbar { min-height: var(--zm-search-height); }

.zm-form-control,
.zm-dropdown,
.zm-textarea,
.zm-dialog-field input,
.zm-dialog-field select,
.zm-dialog-field textarea,
.correction-select,
.correction-note {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 18px;
  min-height: 44px;
}

.zm-dialog { width: min(var(--zm-dialog-width-edit), 96vw); max-height: var(--zm-dialog-max-height); }
.zm-dialog[data-mode="view"] { width: min(var(--zm-dialog-width-view), 96vw); }
.zm-wide-dialog .zm-dialog,
body[data-page="admin-glossar"] .zm-dialog,
body[data-page="admin-handbuch"] .zm-dialog { width: min(1100px, 90vw); }

/* AP-29D-REV9 | 2026-05-03 | Zweck: zentrale Rail-Breite bleibt auch im mobilen Drawer exakt 96px; keine breite Ersatz-Sidebar. | Owner: assets/styles/components.css */
@media (max-width: 960px) {
  .zm-rail,
  .side-rail {
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--zm-rail-width);
    border-radius: 0;
    padding-top: calc(env(safe-area-inset-top) + .75rem);
    transform: translateX(100%);
  }
  .rail-close { display: inline-grid; }
  .zm-dialog { width: 96vw; max-height: 96dvh; }
}


/* AP-29D-REV8 | 2026-05-03 | Zweck: Dialog-/Sheet-Breiten nutzen zentrale REV8-Tokens für View/Edit und breite Wissensflächen. | Owner: assets/styles/components.css */
.zm-dialog {
  width: min(var(--zm-dialog-width-edit), calc(100vw - 2rem));
  max-height: var(--zm-dialog-max-height);
}
.zm-dialog[data-mode="view"],
.zm-dialog--view {
  width: min(var(--zm-dialog-width-view), calc(100vw - 2rem));
}
.side-sheet-card,
.zm-side-sheet {
  max-height: var(--zm-dialog-max-height);
}
.zm-bottom-sheet {
  border-radius: var(--zm-card-radius) var(--zm-card-radius) 0 0;
}

/* AP-29D-REV8 | 2026-05-03 | Zweck: Dialogbreiten nach zentralem Modus-Attribut auf dem Dialog-Backdrop anwenden; Owner: assets/styles/components.css */
.zm-dialog-backdrop[data-mode="view"] .zm-dialog { width: min(var(--zm-dialog-width-view), 96vw); }
.zm-dialog-backdrop[data-mode="edit"] .zm-dialog { width: min(var(--zm-dialog-width-edit), 96vw); }
.zm-dialog-backdrop.zm-wide-dialog .zm-dialog { width: min(1100px, 90vw); }


/* AP-29D-REV8 | 2026-05-03 | Zweck: Material-Symbol-Fallback verhindert sichtbare Ligatur-Texte wie open_in_new, falls der externe Material-Font nicht geladen ist. | Owner: assets/styles/components.css */
.material-symbols-rounded.material-symbols-fallback {
  font-family: system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

/* AP-29D-REV9 | 2026-05-03 | Zweck: mobiler Menübutton bleibt als X an derselben rechten Position über der 96px-Rail bedienbar; keine zweite Schließlogik. | Owner: assets/styles/components.css */
@media (max-width: 960px) {
  .menu-btn.zm-menu-toggle {
    position: fixed;
    top: calc(env(safe-area-inset-top) + var(--m3-space-4, 1rem));
    right: var(--m3-space-4, 1rem);
    z-index: calc(var(--rail-z, 260) + 24);
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
  .menu-btn.zm-menu-toggle:hover,
  .menu-btn.zm-menu-toggle:focus-visible {
    background: rgba(255,255,255,.06);
  }
}
/* AP-29D-REV9 | 2026-05-03 | Zweck: Header-Stapelkontext hebt nur bei geöffneter mobiler Rail den zentralen Menübutton über den Drawer. | Owner: assets/styles/components.css */
@media (max-width: 960px) {
  body[data-rail-state="open"] .app-header,
  body[data-rail-state="open"] .header {
    z-index: calc(var(--rail-z, 260) + 32) !important;
  }
}

/* AP-29D-REV11 | 2026-05-05 | Zweck: Statusbadges und Dialogflächen für lokale Arbeitsstände eindeutig führen, ohne Preview-Rohbegriff. | Owner: assets/styles/components.css */
.admin27-badge--local { background: rgba(157,180,255,.16); border-color: rgba(157,180,255,.34); color: var(--text); }
.admin27-badge--blocked, .admin27-badge--blocked { background: rgba(255,112,112,.12); border-color: rgba(255,112,112,.32); color: #ffd7d7; }
.zm-dialog-status-list .admin27-badge { white-space: normal; line-height: 1.25; }
.zm-dialog__body { overflow: auto; }


/* AP-29D-REV13-MA-02 | 2026-05-07 | Zweck: Mobile Rail nutzt den Header-Menübutton als positionsgleiches X; interner Rail-Close wird im Mitarbeiterbereich nicht als zweiter großer Overlay-Button geführt. | Owner: Team 1 Mitarbeiterbereich */
@media (max-width: 960px) {
  body[data-area="employee"] .side-rail .rail-close {
    display: none !important;
  }
  body[data-area="employee"][data-rail-state="open"] .header,
  body[data-area="employee"][data-rail-state="open"] .app-header {
    z-index: calc(var(--rail-z, 260) + 40) !important;
  }
  body[data-area="employee"][data-rail-state="open"] .menu-btn,
  body[data-area="employee"][data-rail-state="open"] .zm-menu-toggle {
    width: var(--m3-icon-button-size, 48px);
    height: var(--m3-icon-button-size, 48px);
    min-width: var(--m3-icon-button-size, 48px);
    min-height: var(--m3-icon-button-size, 48px);
    border-radius: 999px;
    background: rgba(16, 20, 28, .72);
    border-color: rgba(157, 180, 255, .18);
    box-shadow: none;
    transform: none;
  }
}

/* AP-29D-REV13-MA-02 | 2026-05-07 | Zweck: Backdrop bei geöffneter Rail dimmt Orientierung ruhig, macht Home aber nicht unlesbar; Search-Dock wird modal inaktiv statt widersprüchlich bedienbar. | Owner: Team 1 Mitarbeiterbereich */
@media (max-width: 960px) {
  body[data-area="employee"] .drawer-backdrop,
  body[data-area="employee"] .zm-rail-backdrop {
    background: rgba(2, 6, 14, .30);
    backdrop-filter: blur(1px);
  }
  body[data-area="employee"][data-rail-state="open"] .bottom-search-dock,
  body[data-area="employee"][data-rail-state="open"] .zm-search-dock {
    opacity: .56;
    filter: saturate(.82);
    pointer-events: none;
  }
}

/* AP-29D-REV13-MA-02 | 2026-05-07 | Zweck: Rail-Icons zeigen lokale SVGs oder dokumentierten Material-Fallback ohne graue Kreis-Platzhalter. | Owner: Team 1 Mitarbeiterbereich */
.side-rail .zm-local-icon.rail-icon,
.side-rail .zm-inline-icon.rail-icon {
  width: var(--zm-rail-icon-size, 24px);
  height: var(--zm-rail-icon-size, 24px);
  flex: 0 0 auto;
}
.side-rail .material-symbols-rounded[data-zm-icon-source="material-fallback"]:empty::before {
  content: "help";
}

/* AP-29D-REV13-MA-02 | 2026-05-07 | Zweck: Mobile Mitarbeiter-Rail hat keine leere Close-Kopfzeile; Aktionen starten unter dem weiterführenden Header/X. | Owner: Team 1 Mitarbeiterbereich */
@media (max-width: 960px) {
  body[data-area="employee"] .side-rail .rail-head {
    display: none !important;
  }
  body[data-area="employee"] .side-rail,
  body[data-area="employee"] .zm-rail {
    padding-top: calc(var(--app-header-safe, 0px) + var(--app-header-h, 58px) + .75rem);
  }
}