/*
 * Datei: assets/styles/employee.css
 * Zweck: Mitarbeiterbereich-Komposition.
 * Domäne: Suchfokus, Rezeptdetail-Layout und Utility-Sheets.
 * Status: ergänzend aktiv
 * Darf definieren: Employee-spezifische Flächen und Rezeptdetail-Komposition.
 * Darf nicht definieren: Rail-Grundkomponente, Buttons, Chips, Dialoge oder Admin-Komponenten.
 */

/* 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/employee.css */
body[data-area="employee"]{
  --search-dock-z:120;
}

.content-section{
  padding-top:10px;
  padding-bottom:100px;
}

#mainContent{
  min-height:calc(100dvh - var(--app-header-h, 76px) - 112px - env(safe-area-inset-bottom));
}

.placeholder{
  padding:18px;
}

.recipe-screen{
  display:grid;
  gap:10px;
}

.media-wrap{
  width:100%;
  overflow:hidden;
  border-radius:24px;
  background:#0b0d12;
  box-shadow:var(--shadow);
}

.media-wrap img,
.recipe-media-image{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
}

.recipe-info{
  display:grid;
  gap:10px;
}

.title{
  margin:0;
  font-size:20px;
  line-height:1;
  letter-spacing:-.02em;
}

.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}

.meta-chip{
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  font-size:10px;
  line-height:1;
  overflow:hidden;
  flex:0 0 auto;
  max-width:100%;
}

.meta-chip > span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.meta-chip .material-symbols-rounded{
  font-size:16px;
}



.correction-panel{
  display:grid;
  gap:14px;
}

.correction-intro{
  display:grid;
  gap:6px;
}

.correction-intro strong{
  font-size:13px;
}

.correction-intro p{
  margin:0;
  color:var(--text-soft);
  line-height:1.45;
  font-size:13px;
}

.correction-type-block,
.correction-field,
.correction-context{
  display:grid;
  gap:8px;
}

.correction-label,
.correction-context-head,
.correction-context-label{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.correction-type-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.correction-type{
  min-height:38px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text-soft);
  font-size:12px;
  font-weight:700;
  text-align:left;
}

.correction-type.is-active{
  color:var(--text);
  border-color:rgba(157,180,255,.32);
  background:var(--surface-2);
  box-shadow:0 0 0 1px rgba(157,180,255,.12);
}

.correction-note{
  width:100%;
  min-height:112px;
  resize:vertical;
  padding:12px 13px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  font:inherit;
}

.correction-context{
  padding:12px 13px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.correction-context-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
}

.correction-context-card{
  display:grid;
  gap:8px;
  padding:10px 11px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.18);
}

.correction-context-value{
  display:grid;
  gap:8px;
  color:var(--text);
  font-size:13px;
  line-height:1.45;
}

.correction-context-value code{
  white-space:normal;
  word-break:break-word;
}

.correction-context-meters .meter{
  grid-template-columns:1fr;
  gap:6px;
}

.correction-context-foot{
  color:var(--text-soft);
  font-size:12px;
  line-height:1.4;
}

.correction-list{
  margin:0;
  padding-left:18px;
}

.correction-feedback{
  padding:12px 13px;
  border-radius:14px;
  font-size:13px;
  line-height:1.45;
}

.correction-feedback.is-success{
  border:1px solid rgba(88,193,132,.25);
  background:rgba(88,193,132,.1);
  color:#dff6e7;
}

.correction-feedback.is-error{
  border:1px solid rgba(220,96,96,.25);
  background:rgba(220,96,96,.1);
  color:#ffe2e2;
}

.correction-actions{
  display:flex;
  justify-content:flex-start;
}

.accordion-group{
  display:grid;
  gap:10px;
  margin-top:8px;
}

.accordion{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  box-shadow:var(--shadow);
}

.accordion-head{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border:0;
  background:transparent;
  color:var(--text);
}

.accordion-title{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.accordion-meta{
  font-size:10px;
  color:var(--muted);
  white-space:nowrap;
}

.accordion-arrow{
  display:grid;
  place-items:center;
  color:var(--text);
  transition:transform .16s ease;
}

.accordion.open .accordion-arrow{
  transform:rotate(180deg);
}

.accordion-body{
  padding:0 14px 14px;
}

.overview-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:6px;
}

.overview-card{
  min-width:0;
  padding:10px 9px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--surface-2);
}

.overview-k{
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.overview-v{
  margin-top:6px;
  font-size:12px;
  font-weight:800;
  line-height:1.15;
  overflow-wrap:anywhere;
}

.meter-card{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--surface-2);
}

.meter{
  display:grid;
  grid-template-columns:66px 1fr 28px;
  gap:8px;
  align-items:center;
  padding:3px 0;
  font-size:12px;
}

.meter .track{
  height:7px;
}

.dim{
  font-size:11px;
  text-align:right;
  color:var(--muted);
}

.ingredients-list{
  display:grid;
  gap:0;
}

.ingredient-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.ingredient-row:last-child{
  border-bottom:0;
}

.ingredient-name{
  min-width:0;
  font-size:12px;
  line-height:1.2;
  overflow-wrap:anywhere;
}

.ingredient-amt{
  font-size:12px;
  line-height:1.2;
  font-weight:800;
  color:#dce5ff;
  white-space:nowrap;
}

.steps-list{
  display:grid;
  gap:7px;
}

.step-row{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:8px;
  align-items:start;
  font-size:12px;
  line-height:1.22;
}

.step-num{
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:10px;
  font-weight:800;
}

.garnish-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.garnish-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:12px;
}

.garnish-badge .material-symbols-rounded{
  font-size:16px;
}

.empty-copy{
  color:var(--muted);
}

.searchbar{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
  padding:0 12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
}

.searchbar input{
  flex:1;
  min-width:0;
  min-height:54px;
  border:0;
  outline:none;
  background:transparent;
  color:var(--text);
  font-size:17px;
}

.search-icon{
  color:var(--muted);
}

.dock-btn{
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  display:grid;
  place-items:center;
  border-radius:16px;
}

/* Rail-Grundkomponente liegt seit AP-29D-REV1 ausschließlich in components.css. */

/* AP-29D-REV2 | 2026-05-01 | Zweck: Side-Sheet-Grundkomponente nach components.css überführt; employee.css führt nur Sheet-Inhalte und Mitarbeiter-Komposition. | Owner: assets/styles/employee.css */

.sheet-doc{
  display:grid;
  gap:14px;
}

.sheet-doc-intro,
.sheet-doc-section{
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:rgba(255,255,255,.03);
}

.sheet-doc-kicker{
  font-size:11px;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

.sheet-doc-headline{
  margin:0;
  font-size:18px;
  line-height:1.25;
}

.sheet-doc-lead{
  margin:0;
  color:var(--text-soft);
}

.sheet-doc-section h4{
  margin:0;
  font-size:15px;
  line-height:1.3;
}

.sheet-doc-list{
  display:grid;
  gap:10px;
}

.sheet-doc-item{
  display:grid;
  gap:4px;
  padding:12px 13px;
  border-radius:16px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
}

.sheet-doc-item strong{
  font-size:14px;
  line-height:1.3;
}

.sheet-doc-item span{
  color:var(--text-soft);
  line-height:1.5;
}

.sheet-doc-steps{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
  color:var(--text-soft);
}

.sheet-doc em{
  font-style:normal;
  color:var(--text);
}


.sheet-doc-item--visual{
  gap:10px;
}

.sheet-doc-visuals{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.sheet-doc-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  color:var(--text);
  font-size:12px;
}

.sheet-doc-pill .material-symbols-rounded{
  font-size:18px;
}

.sheet-doc-pill--svg{
  padding-left:8px;
}

.sheet-doc-svg{
  width:18px;
  height:18px;
  display:block;
}

.sheet-doc-figure-grid{
  display:grid;
  gap:12px;
}

.sheet-doc-figure{
  display:grid;
  gap:8px;
  margin:0;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.sheet-doc-figure-media{
  width:100%;
  display:block;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
}

.sheet-doc-figure figcaption{
  color:var(--text-soft);
  font-size:12px;
  line-height:1.45;
}

.sheet-doc-steps--circles{
  list-style:none;
  padding-left:0;
}

.sheet-doc-step{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:10px;
  align-items:start;
}

.sheet-doc-step-num{
  width:32px;
  height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:12px;
  font-weight:800;
}

.sheet-doc-step-copy{
  display:grid;
  gap:4px;
}

.sheet-doc-step-copy strong{
  font-size:14px;
  line-height:1.3;
}

.sheet-doc-step-copy span{
  color:var(--text-soft);
  line-height:1.5;
}

.search-results{
  position:fixed;
  left:12px;
  right:12px;
  bottom:calc(82px + env(safe-area-inset-bottom));
  z-index:135;
  display:grid;
  gap:8px;
  max-height:min(46dvh,420px);
  overflow:auto;
  padding:10px;
  background:rgba(13,16,21,.96);
  border:1px solid rgba(255,255,255,.06);
  border-radius:24px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}

.search-results.hidden{
  display:none !important;
}

.search-result-item{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  text-align:left;
}

.search-result-item.active{
  border-color:#50608d;
  background:var(--surface-2);
  box-shadow:0 0 0 1px rgba(157,180,255,.14);
}

.search-result-main{
  min-width:0;
  display:grid;
  gap:4px;
}

.search-result-name{
  font-size:14px;
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.search-result-meta{
  font-size:11px;
  color:var(--muted);
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.search-result-arrow{
  color:var(--muted);
}

.zmx-home{
  display:grid;
  gap:18px;
  padding:10px 0 120px;
}

.zmx-card{
  overflow:hidden;
  border-radius:32px;
  border:1px solid rgba(157,180,255,.16);
  background:linear-gradient(180deg, rgba(28,29,34,.96), rgba(20,22,29,.98));
  box-shadow:0 18px 54px rgba(0,0,0,.28);
}

.zmx-home-stage{
  display:grid;
  gap:18px;
  padding:16px 14px 18px;
}

.zmx-home-copy,
.zmx-home-flow{
  display:grid;
  gap:12px;
}

.zmx-kicker{
  font-size:16px;
  line-height:1;
  letter-spacing:-.01em;
  color:#E6E1E3;
}

.zmx-title{
  margin:0;
  max-width:12ch;
  font-size:42px;
  line-height:1.04;
  letter-spacing:-.045em;
  font-weight:500;
  color:#E6E1E3;
}

.zmx-lead{
  margin:0;
  max-width:46ch;
  font-size:16px;
  line-height:1.52;
  letter-spacing:-.01em;
  color:#E6E1E3;
}

.zmx-note{
  margin:0;
  max-width:46ch;
  font-size:14px;
  line-height:1.5;
  color:rgba(230,225,227,.78);
}

.zmx-video-shell{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:28px;
  background:#0c1017;
  min-height:420px;
  aspect-ratio:4 / 5;
}

.zmx-video{
  display:block;
  width:100%;
  height:100%;
  min-height:420px;
  object-fit:cover;
  object-position:center center;
  background:#0c1017;
}

.zmx-video-desktop{
  display:none;
}

.zmx-video-mobile{
  display:block;
}

@media (min-width:900px){
  .zmx-home{
    width:100%;
    max-width:none;
    margin:0;
    padding-left:0;
    padding-right:0;
  }

  .zmx-home-stage{
    gap:22px;
    padding:20px 18px 22px;
  }

  .zmx-title{
    max-width:11ch;
    font-size:64px;
  }

  .zmx-video-shell,
  .zmx-video{
    min-height:500px;
  }

  .zmx-video-shell{
    aspect-ratio:16 / 9;
  }

  .zmx-video-desktop{
    display:block;
  }

  .zmx-video-mobile{
    display:none;
  }
}


@media (max-width:640px){
  .meta-row{
    flex-wrap:nowrap;
    overflow:auto;
    scrollbar-width:none;
    padding-bottom:2px;
  }

  .meta-row::-webkit-scrollbar{
    display:none;
  }

  .correction-type-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .correction-type{
    width:100%;
    min-height:40px;
  }

  .accordion-group{
    display:grid;
  }

  .search-results{
    left:10px;
    right:10px;
    bottom:calc(78px + env(safe-area-inset-bottom));
    border-radius:22px;
    padding:8px;
  }

  .search-result-item{
    padding:11px 12px;
    border-radius:16px;
  }

  .search-result-name{
    font-size:13px;
  }

  .search-result-meta{
    font-size:10px;
  }
}

@media (max-width:520px){
  .content-section{
    padding-bottom:98px;
  }

  .zmx-home{
    padding-left:0;
    padding-right:0;
  }

  .zmx-home-stage{
    padding:14px;
    gap:14px;
  }

  .zmx-video-shell,
  .zmx-video{
    min-height:360px;
  }

  .title{
    font-size:18px;
  }

  .step-row{
    font-size:11px;
  }

  .meter{
    grid-template-columns:60px 1fr 26px;
    font-size:11px;
  }

  .dim{
    font-size:10px;
  }

  .searchbar input{
    font-size:16px;
  }
}





/* AP-29D-REV3 | 2026-05-01 | Zweck: Mitarbeiter-Detail komponiert zentrale Karten/Chips als Desktop-Grid; Mobile behält Akkordeonlogik. | Owner: assets/styles/employee.css */
.recipe-desktop-grid {
  display: none;
}

.recipe-accordion-mobile {
  display: block;
}

.recipe-title-block {
  display: grid;
  gap: var(--m3-space-3, 0.75rem);
}

.search-result-details {
  margin-top: var(--m3-space-2, 0.5rem);
}

/* AP-29D-FINAL | 2026-05-03 | Zweck: Desktop-Drinkbild bleibt auf 50% der linken Spalte und 52vh begrenzt; keine Inhaltsverdrängung. | Owner: assets/styles/employee.css */
@media (min-width: 961px) {
  body[data-area="employee"] .recipe-screen {
    max-width: min(var(--employee-detail-max-width, 96rem), calc(100vw - var(--employee-rail-desktop-width, 6.25rem) - (2 * var(--employee-desktop-gutter, 1.5rem))));
    margin: 0 auto;
  }

  body[data-area="employee"] .recipe-screen > .media-wrap,
  body[data-area="employee"] .recipe-screen > .recipe-info > .title,
  body[data-area="employee"] .recipe-screen > .recipe-info > .meta-row,
  body[data-area="employee"] .recipe-screen > .recipe-info > .accordion-group {
    display: none;
  }

  body[data-area="employee"] .recipe-desktop-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 0.95fr) minmax(20rem, 1.05fr) minmax(18rem, 0.95fr);
    gap: var(--employee-detail-column-gap, 1.25rem);
    align-items: start;
  }

  body[data-area="employee"] .recipe-desktop-col {
    min-width: 0;
    display: grid;
    gap: var(--m3-space-4, 1rem);
    align-content: start;
  }

  body[data-area="employee"] .recipe-desktop-col .media-wrap {
    width: min(100%, var(--employee-detail-image-max-width, 50%));
    max-height: var(--employee-detail-image-max-height, min(52dvh, 32rem));
    justify-self: center;
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow);
  }

  body[data-area="employee"] .recipe-desktop-col .recipe-media-image {
    width: 100%;
    height: 100%;
    max-height: var(--employee-detail-image-max-height, min(52dvh, 32rem));
    aspect-ratio: auto;
    object-fit: cover;
  }

  body[data-area="employee"] .recipe-title-block .title {
    font-size: clamp(1.45rem, 2vw, 2.2rem);
    line-height: 1.05;
  }

  body[data-area="employee"] .recipe-accordion-mobile {
    display: none;
  }
}

@media (min-width: 961px) and (max-width: 1260px) {
  body[data-area="employee"] .recipe-desktop-grid {
    grid-template-columns: minmax(17rem, 0.9fr) minmax(20rem, 1.15fr);
  }

  body[data-area="employee"] .recipe-desktop-col--right {
    grid-column: 2;
  }
}

@media (max-width: 960px) {
  body[data-area="employee"] .recipe-desktop-grid {
    display: none;
  }

  body[data-area="employee"] .recipe-accordion-mobile {
    display: block;
  }
}

.bottom-search-dock .material-symbols-rounded {
  font-size: var(--m3-icon-size, 1.5rem);
}

/* AP-29D-FINAL-FIX | 2026-05-03 | Zweck: Homescreen entlasten: kleineres Video, größere Erklärung, Suche bleibt unten führend. | Owner: assets/styles/employee.css */
@media (min-width: 900px) {
  .zmx-home { padding: 0 0 7.5rem; }
  .zmx-card { max-width: min(100%, 94rem); margin-inline: auto; }
  .zmx-home-stage {
    grid-template-columns: minmax(22rem, .95fr) minmax(28rem, 1.2fr);
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: clamp(1.25rem, 2.5vw, 2.5rem);
  }
  .zmx-home-copy { align-self: center; }
  .zmx-title { max-width: 13ch; font-size: clamp(3rem, 4.8vw, 5.2rem); }
  .zmx-lead { font-size: clamp(1.08rem, 1.25vw, 1.35rem); line-height: 1.55; max-width: 52ch; }
  .zmx-note { font-size: clamp(.98rem, 1.05vw, 1.1rem); max-width: 54ch; }
  .zmx-video-shell,
  .zmx-video { min-height: 0; max-height: min(44dvh, 31rem); }
  .zmx-video-shell { aspect-ratio: 16 / 9; align-self: center; }
}
@media (max-width: 640px) {
  .zmx-home { padding: 0 0 6rem; gap: .75rem; }
  .zmx-card { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .zmx-home-stage { padding: .75rem; border-radius: 0; }
  .zmx-video-shell { border-radius: 18px; min-height: 0; aspect-ratio: 16 / 10; }
  .zmx-video { min-height: 0; }
  .zmx-title { font-size: clamp(2.2rem, 12vw, 3.4rem); max-width: 13ch; }
}

/* AP-29D-FINAL-FIX | 2026-05-03 | Zweck: Desktop-Detail ohne Inline-Korrektur, Übersicht unter Service und stabile Zubereitungsausrichtung. | Owner: assets/styles/employee.css */
.steps-list { display: grid; gap: .65rem; }
.step-row { display: grid; grid-template-columns: 1.65rem minmax(0,1fr); align-items: start; gap: .75rem; }
.step-num { align-self: start; margin-top: .05rem; }
@media (min-width: 961px) {
  body[data-area="employee"] .recipe-desktop-grid {
    grid-template-columns: minmax(18rem, .9fr) minmax(25rem, 1.35fr) minmax(17rem, .85fr);
  }
  body[data-area="employee"] .recipe-desktop-col--right { align-content: start; }
}

/* AP-29D-FINAL-FIX | 2026-05-03 | Zweck: Korrekturmeldung als schnelle strukturierte Auswahl statt willkürlichem Buttonhaufen. | Owner: assets/styles/employee.css */
.correction-panel--dialog { display: grid; gap: var(--zm-grid-gap); }
.correction-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(12rem, .75fr); gap: 1rem; align-items: start; }
.correction-info-block,
.correction-context-block,
.correction-type-block { border: 1px solid rgba(157,180,255,.18); border-radius: var(--zm-card-radius); padding: .9rem; background: rgba(255,255,255,.035); }
.correction-info-block h3 { margin: .2rem 0 .45rem; font-size: 1rem; }
.correction-info-block p { margin: 0; color: var(--muted); line-height: 1.45; }
.correction-select { width: 100%; min-height: 2.75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); padding: 0 .9rem; }
.correction-quick-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.correction-quick-option { min-height: 2.65rem; border: 1px solid rgba(157,180,255,.18); border-radius: 999px; background: rgba(255,255,255,.045); color: var(--text); font: inherit; font-weight: 750; text-align: left; padding: .55rem .85rem; cursor: pointer; }
.correction-quick-option:hover { border-color: rgba(157,180,255,.45); background: rgba(157,180,255,.12); }
.correction-field--full { display: grid; gap: .45rem; }
.correction-actions--dialog .btn { display: inline-flex; align-items: center; gap: .5rem; }
@media (max-width: 760px) {
  .correction-layout { grid-template-columns: 1fr; }
  .correction-quick-options { grid-template-columns: 1fr; }
}


/* AP-29D-REV8 | 2026-05-03 | Zweck: Mitarbeiter-Desktop als 3-Spalten-Komposition vorhandener Kernkomponenten; Korrektur bleibt Dialog/Sheet statt dauerhaftem Detailpanel. | Owner: assets/styles/employee.css */
.employee-detail-grid,
.recipe-desktop-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(320px, 1fr) minmax(320px, 1fr);
  gap: var(--zm-grid-gap);
  align-items: start;
}
.recipe-desktop-col { min-width: 0; }
.recipe-desktop-col--left .media-wrap {
  max-width: 50%;
  max-height: var(--zm-drink-image-max-height-desktop);
}
.recipe-desktop-col--left .recipe-media-image {
  max-height: var(--zm-drink-image-max-height-desktop);
}
@media (max-width: 960px) {
  .employee-detail-grid,
  .recipe-desktop-grid { display: none; }
  .recipe-media-image { max-height: var(--zm-drink-image-max-height-mobile); }
}
@media (min-width: 961px) {
  .recipe-accordion-mobile { display: none !important; }
  .correction-panel:not(.correction-panel--dialog) { display: none !important; }
}

/* AP-29D-REV8 | 2026-05-03 | Zweck: Mitarbeiter-Desktoplayout final auf 3 Spalten, Karte Übersicht in Spalte 2 und Korrektur nur als Dialog; Owner: assets/styles/employee.css */
.employee-detail-grid,
.recipe-desktop-grid {
  gap: var(--zm-grid-gap);
}
@media (min-width: 961px) {
  body[data-area="employee"] .recipe-screen {
    max-width: min(100%, calc(100vw - var(--zm-rail-width) - (2 * var(--zm-content-padding))));
  }
  body[data-area="employee"] .recipe-desktop-grid,
  body[data-area="employee"] .employee-detail-grid {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(320px, 1fr) minmax(320px, 1fr);
    gap: var(--zm-grid-gap);
  }
  body[data-area="employee"] .recipe-desktop-col .media-wrap {
    width: 50%;
    max-height: var(--zm-drink-image-max-height-desktop);
  }
  body[data-area="employee"] .recipe-desktop-col .recipe-media-image {
    max-height: var(--zm-drink-image-max-height-desktop);
  }
  body[data-area="employee"] .recipe-accordion-mobile,
  body[data-area="employee"] .accordion-group {
    display: none;
  }
}
@media (max-width: 960px) {
  body[data-area="employee"] .recipe-desktop-grid,
  body[data-area="employee"] .employee-detail-grid {
    display: none;
  }
  body[data-area="employee"] .recipe-media-image {
    max-height: var(--zm-drink-image-max-height-mobile);
  }
}

/* AP-29D-REV9 | 2026-05-03 | Zweck: mobiler Homescreen nutzt die vorhandene Arbeitsbreite; äußerer Rezept-Mount-Rahmen nimmt keine zusätzliche Fläche weg. | Owner: assets/styles/employee.css */
#recipeMount.placeholder {
  padding: 0;
}
@media (max-width: 640px) {
  body[data-area="employee"] .app {
    padding-left: 10px;
    padding-right: 10px;
  }
  body[data-area="employee"] .content-section {
    padding-left: 0;
    padding-right: 0;
  }
  body[data-area="employee"] #recipeMount.placeholder {
    width: 100%;
    padding: 0;
  }
  body[data-area="employee"] .zmx-home {
    width: 100%;
    padding: 0 0 calc(var(--zm-search-height, 56px) + 1.75rem);
  }
  body[data-area="employee"] .zmx-home-stage {
    width: 100%;
    min-height: calc(100dvh - var(--app-header-h, 74px) - var(--zm-search-height, 56px) - 2.25rem);
    padding: 1rem;
  }
  body[data-area="employee"] .zmx-title {
    font-size: clamp(2.65rem, 14vw, 4rem);
    max-width: 11ch;
  }
  body[data-area="employee"] .zmx-video-shell {
    aspect-ratio: 16 / 9;
    max-height: 30dvh;
  }
}
/* AP-29D-REV9 | 2026-05-03 | Zweck: Homescreen zeigt echte Rezeptkennzahlen und klaren Datenstatus statt Scheinprognosen. | Owner: assets/styles/employee.css */
.zmx-home-utility {
  display: grid;
  gap: .5rem;
  margin-top: .75rem;
  padding: .8rem;
  border: 1px solid rgba(157,180,255,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}
.zmx-home-utility div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: baseline;
}
.zmx-home-utility span,
.zmx-home-utility p {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}
.zmx-home-utility p { margin: .15rem 0 0; }
.zmx-home-utility strong {
  color: var(--text);
  font-size: .82rem;
  text-align: right;
}
@media (max-width: 640px) {
  .zmx-home-utility {
    padding: .72rem;
  }
  .zmx-home-utility div {
    grid-template-columns: 1fr;
    gap: .1rem;
  }
  .zmx-home-utility strong {
    text-align: left;
  }
}

/* AP-29D-REV10 | 2026-05-03 | Zweck: Home/Splash zeigt flaches ZM-Monogramm, Tektur-Wortmarke und UI-Schrift-Subline ohne 3D- oder Videoeffekt. | Owner: assets/styles/employee.css */
.zmx-brand-splash {
  display: grid;
  place-items: center;
  gap: 1rem;
  min-height: min(38dvh, 24rem);
  margin: 0;
  padding: clamp(1.25rem, 4vw, 3rem);
  border: 1px solid rgba(157,180,255,.14);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
.zmx-brand-splash-mark {
  width: clamp(8.5rem, 22vw, 15rem);
  max-width: 58%;
  height: auto;
  color: var(--text);
}
.zmx-brand-splash-copy {
  display: grid;
  justify-items: center;
  gap: .35rem;
  text-align: center;
}
.zmx-brand-splash-wordmark {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--text);
}
.zmx-brand-splash-subline {
  font-family: var(--font-ui);
  font-size: clamp(.85rem, 1.5vw, 1rem);
  line-height: 1.35;
  color: var(--muted);
}
@media (max-width: 640px) {
  .zmx-brand-splash {
    min-height: 13.5rem;
    padding: 1.1rem;
    border-radius: 20px;
  }
  .zmx-brand-splash-mark {
    width: min(10rem, 48vw);
    max-width: 58vw;
  }
  .zmx-brand-splash-wordmark {
    font-size: clamp(1.8rem, 9vw, 2.55rem);
  }
}

/* AP-29D-REV11 | 2026-05-05 | Zweck: Korrektur-Schnellvorlagen mit Textfeld statt Buttonwolke; mobile Home-Fläche bleibt groß und suchgeführt. | Owner: assets/styles/employee.css */
.correction-quick-options--fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.correction-quick-option--field { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; align-content: start; padding: .65rem; border: 1px solid rgba(157,180,255,.16); border-radius: 16px; background: rgba(255,255,255,.035); }
.correction-quick-option--field span { font-weight: 700; color: var(--text); }
.correction-quick-option--field input { min-height: 2.35rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); color: var(--text); padding: .45rem .65rem; font: inherit; }
.correction-quick-option--field button { min-height: 2.25rem; border: 1px solid rgba(157,180,255,.22); border-radius: 999px; background: rgba(157,180,255,.12); color: var(--text); font: inherit; }
@media (max-width: 720px) { .correction-quick-options--fields { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  body[data-area="employee"] .zmx-home-stage { min-height: calc(100dvh - var(--app-header-h, 72px) - var(--zm-search-height, 56px) - 1.25rem); padding: .85rem; border-radius: 0; }
  body[data-area="employee"] .zmx-brand-splash { min-height: 12.25rem; border-radius: 18px; }
  body[data-area="employee"] .zmx-title { font-size: clamp(2.5rem, 13vw, 3.8rem); }
}

/* AP-29D-REV13-MA-01 | 2026-05-07 | Zweck: Mitarbeiterbereich auf Online-Sollraster härten: Video-Home, 3-Zonen-Detail, lokale Fachicons und vollständige mobile Accordionführung. | Owner: Team 1 Mitarbeiterbereich */
.zmx-video-shell{
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: clamp(20px, 2vw, 32px);
  border: 1px solid rgba(157,180,255,.16);
  background: rgba(10,12,18,.78);
  min-height: 0;
  box-shadow: 0 22px 60px rgba(0,0,0,.26);
}
.zmx-video{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: min(46dvh, 34rem);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0b0d12;
}
.zmx-video-caption{
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: .35rem .55rem;
  border-radius: 999px;
  background: rgba(5,7,11,.56);
  color: rgba(244,247,255,.78);
  font-size: .72rem;
  line-height: 1;
  backdrop-filter: blur(10px);
}
.employee-export-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.ingredient-row{
  grid-template-columns: 1.4rem minmax(0,1fr) auto;
  align-items: center;
  gap: .65rem;
}
.ingredient-icon{
  width: 1.25rem;
  min-width: 1.25rem;
  display: inline-grid;
  place-items: center;
}
.zm-inline-icon.ingredient-line-icon,
.zm-inline-icon.recipe-section-icon,
.zm-inline-icon.taste-meter-icon{
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}
.recipe-panel-card h2 .recipe-section-icon{
  margin-right: .55rem;
}
.meter{
  grid-template-columns: minmax(6.5rem,.75fr) minmax(8rem,1.4fr) 2rem;
}
.meter-label{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}
.employee-correction-trigger{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
@media (min-width: 961px){
  body[data-area="employee"] .recipe-screen{
    width: min(100%, calc(100vw - var(--zm-rail-width, 96px) - 2rem));
    max-width: 116rem;
    margin-inline: auto;
  }
  body[data-area="employee"] .recipe-screen > .media-wrap,
  body[data-area="employee"] .recipe-info > .title,
  body[data-area="employee"] .recipe-info > .meta-row{
    display: none !important;
  }
  body[data-area="employee"] .recipe-desktop-grid{
    display: grid !important;
    grid-template-columns: minmax(20rem,.86fr) minmax(24rem,1fr) minmax(24rem,1fr);
    gap: clamp(1rem, 1.5vw, 1.5rem);
    align-items: start;
  }
  body[data-area="employee"] .recipe-desktop-col{
    display: grid;
    gap: clamp(.95rem, 1.1vw, 1.25rem);
    min-width: 0;
  }
  body[data-area="employee"] .recipe-desktop-col--left .media-wrap,
  body[data-area="employee"] .recipe-desktop-col .media-wrap{
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    justify-self: stretch;
    border-radius: 30px;
    aspect-ratio: 4 / 5;
  }
  body[data-area="employee"] .recipe-desktop-col .recipe-media-image{
    width: 100%;
    height: 100%;
    max-height: none !important;
    aspect-ratio: auto;
    object-fit: cover;
  }
  body[data-area="employee"] .recipe-title-block .title{
    font-size: clamp(1.75rem, 2.1vw, 2.9rem);
    letter-spacing: .16em;
    text-transform: none;
  }
  body[data-area="employee"] .recipe-accordion-mobile,
  body[data-area="employee"] .accordion-group{
    display: none !important;
  }
}
@media (min-width: 900px){
  body[data-area="employee"] .zmx-home-stage{
    grid-template-columns: minmax(24rem,.92fr) minmax(30rem,1.08fr);
    align-items: center;
  }
  body[data-area="employee"] .zmx-home-flow{
    grid-column: 1;
  }
  body[data-area="employee"] .zmx-video-shell{
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}
@media (max-width: 960px){
  body[data-area="employee"] .recipe-accordion-mobile{
    display: block !important;
    padding-bottom: calc(var(--zm-search-height, 56px) + 1.5rem);
  }
  body[data-area="employee"] .accordion-body{
    scroll-margin-bottom: calc(var(--zm-search-height, 56px) + 1rem);
  }
}
@media (max-width: 640px){
  body[data-area="employee"] .zmx-card{
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
  body[data-area="employee"] .zmx-home-stage{
    min-height: auto;
    padding: .85rem;
    gap: .9rem;
  }
  body[data-area="employee"] .zmx-title{
    font-size: clamp(2.45rem, 13vw, 3.75rem);
    max-width: 11ch;
  }
  body[data-area="employee"] .zmx-video-shell{
    border-radius: 20px;
  }
  body[data-area="employee"] .zmx-video{
    aspect-ratio: 16 / 10;
    max-height: 28dvh;
  }
  .zmx-video-caption{
    display: none;
  }
  .meter{
    grid-template-columns: minmax(5rem,.8fr) minmax(6rem,1fr) 2rem;
  }
}


/* AP-29D-REV13-MA-02 | 2026-05-07 | Zweck: Homevideo ist der Normalzustand; ZM-/Posterfläche wird nur bei Video-Asset- oder Autoplay-Fallback sichtbar als Fallback markiert. | Owner: Team 1 Mitarbeiterbereich */
.zmx-video-shell--fallback::after {
  content: "Video-Fallback";
  position: absolute;
  right: .75rem;
  top: .75rem;
  padding: .32rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(157,180,255,.22);
  background: rgba(7,10,16,.68);
  color: rgba(244,247,255,.76);
  font-size: .68rem;
  line-height: 1;
  backdrop-filter: blur(6px);
}
body[data-area="employee"] .zmx-video {
  object-position: center center;
}
@media (max-width: 640px) {
  body[data-area="employee"] .zmx-video-shell {
    max-height: 28dvh;
  }
}

/* AP-29D-REV13-MA-03 | 2026-05-07 | Zweck: Mobile Drinkdetail-Bildhöhe, Accordion-Endabstand und Korrekturzusammenfassung ohne Dock-Überdeckung härten. | Owner: Team 1 Mitarbeiterbereich */
@media (max-width: 960px){
  body[data-area="employee"] .recipe-screen{
    gap: clamp(.85rem, 2.8vw, 1.15rem);
    padding-bottom: calc(var(--zm-search-height, 72px) + var(--zm-search-bottom-mobile, 10px) + env(safe-area-inset-bottom) + 3.75rem);
  }
  body[data-area="employee"] .recipe-screen > .media-wrap{
    max-height: clamp(14rem, 40dvh, 22rem);
    aspect-ratio: 1 / .82;
    border-radius: clamp(1.25rem, 5vw, 1.75rem);
  }
  body[data-area="employee"] .recipe-screen > .media-wrap .recipe-media-image{
    height: 100%;
    max-height: none !important;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 48%;
  }
  body[data-area="employee"] .recipe-info{
    gap: clamp(.9rem, 3vw, 1.2rem);
  }
  body[data-area="employee"] .accordion-group{
    gap: clamp(.75rem, 2.8vw, 1rem);
  }
  body[data-area="employee"] .accordion{
    scroll-margin-top: calc(var(--app-header-h, 86px) + env(safe-area-inset-top) + .75rem);
    scroll-margin-bottom: calc(var(--zm-search-height, 72px) + var(--zm-search-bottom-mobile, 10px) + env(safe-area-inset-bottom) + 1.25rem);
  }
  body[data-area="employee"] .accordion-head{
    min-height: 4.35rem;
    padding: 1rem 1.2rem;
  }
  body[data-area="employee"] .accordion-title{
    letter-spacing: .18em;
  }
  body[data-area="employee"] .accordion-body{
    padding: 0 1.2rem 1.2rem;
  }
  body[data-area="employee"] .bottom-search-dock,
  body[data-area="employee"] .zm-search-dock{
    max-width: calc(100vw - 1.5rem);
    margin-inline: auto;
  }
}

/* AP-29D-REV13-MA-03 | 2026-05-07 | Zweck: Korrektursektion im mobilen Detail zeigt echte Queue-Zusammenfassung statt falschen Draft-Typ. | Owner: Team 1 Mitarbeiterbereich */
.employee-correction-summary{
  display:grid;
  gap:.6rem;
}
/* AP-29D-REV13-MA-06 | 2026-05-07 | Zweck: Anzahl offener Korrekturen als Queue-Status sichtbar machen, ohne Typ-Draft als Status zu verwenden. | Owner: Team 1 Mitarbeiterbereich */
.employee-correction-summary-count{
  color:var(--muted);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.employee-correction-summary-item{
  display:grid;
  gap:.25rem;
  padding:.75rem .85rem;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-2);
}
.employee-correction-summary-item strong{
  font-size:.9rem;
  line-height:1.2;
}
.employee-correction-summary-item span,
.employee-correction-empty{
  color:var(--muted);
  font-size:.88rem;
  line-height:1.45;
}
.employee-correction-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:.75rem;
}

/* AP-29D-REV13-MA-03 | 2026-05-07 | Zweck: mobile Korrekturaktionen unter 640 px einspaltig führen, damit Export und Meldeaktion nicht gequetscht werden. | Owner: Team 1 Mitarbeiterbereich */
@media (max-width: 640px){
  .employee-correction-actions{
    display:grid;
  }
}