#einsatzplan-app{
  --ink:#122033;
  --muted:#637083;
  --line:#c9d1dc;
  --brand:#0f2d4d;
  --bg:#eef2f6;
  --good:#16794c;
  --danger:#b42318;
}

#einsatzplan-app,#einsatzplan-app *{box-sizing:border-box}

#einsatzplan-app{
  display:block;
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
  font-size:16px;
  padding:14px;
}

#einsatzplan-app input,
#einsatzplan-app select,
#einsatzplan-app button{
  border:1px solid var(--line);
  border-radius:9px;
  padding:8px 10px;
  font:inherit;
  background:#fff;
}

#einsatzplan-app button{
  cursor:pointer;
  background:var(--brand);
  color:#fff;
  border:0;
  font-weight:700;
}

#einsatzplan-app button.secondary{
  background:#fff;
  color:var(--brand);
  border:1px solid var(--brand);
}

#einsatzplan-app button.danger{background:var(--danger)}
#einsatzplan-app button.good{background:var(--good)}
#einsatzplan-app button.active{outline:4px solid #f6c453}

#einsatzplan-app button.mode-on{
  background:#f6c453!important;
  color:#122033!important;
}

#einsatzplan-app .toolbar{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
  box-shadow:0 10px 30px #0001;
}

#einsatzplan-app .toolbar label,
#einsatzplan-app .legend-editor label{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:4px;
}

#einsatzplan-app .status{
  font-size:12px;
  color:var(--muted);
  align-self:end;
  padding:8px 4px;
}

#einsatzplan-app .sheet{
  background:#fff;
  border:1.5px solid #7f8da0;
  border-radius:12px;
  padding:16px;
  box-shadow:0 12px 36px #0002;
  width:100%;
}

#einsatzplan-app .header{
  display:grid;
  grid-template-columns:240px 1fr 390px;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
}

#einsatzplan-app .logo{
  font-family:Georgia,serif;
  font-size:28px;
  letter-spacing:1px;
  text-align:center;
}

#einsatzplan-app .logo small{
  display:block;
  font:11px Arial;
  letter-spacing:5px;
  margin-top:3px;
}

#einsatzplan-app .title{text-align:center}

#einsatzplan-app .title h1{
  margin:0;
  font-size:36px;
  letter-spacing:1.5px;
}

#einsatzplan-app .title p{
  margin:7px 0 0;
  letter-spacing:6px;
  font-weight:600;
  color:#25354a;
  font-size:15px;
}

#einsatzplan-app .month-badge{
  margin:8px auto 0;
  background:var(--brand);
  color:#fff;
  border-radius:8px;
  padding:8px 28px;
  font-weight:800;
  letter-spacing:1.5px;
  width:max-content;
}

#einsatzplan-app .meta{
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px 16px;
  display:grid;
  grid-template-columns:118px 1fr;
  gap:8px;
  font-size:15px;
}

#einsatzplan-app .meta b{color:#18314f}

#einsatzplan-app .calendar-wrap{
  width:100%;
  overflow-x:auto;
}

#einsatzplan-app table.plan{
  width:100%;
  min-width:1050px;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid #8d99a8;
  border-radius:8px;
  overflow:hidden;
  table-layout:fixed;
}

#einsatzplan-app .plan th,
#einsatzplan-app .plan td{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center;
  height:48px;
}

#einsatzplan-app .plan th{
  background:#fbfcfe;
  font-size:13px;
}

#einsatzplan-app .plan th.name-col{width:165px}
#einsatzplan-app .plan th.role-col{width:105px}
#einsatzplan-app .plan th:last-child,
#einsatzplan-app .plan td:last-child{border-right:0}
#einsatzplan-app .plan tr:last-child td{border-bottom:0}

#einsatzplan-app .plan .date{
  font-size:16px;
  font-weight:800;
}

#einsatzplan-app .plan .dow{
  font-size:12px;
  margin-top:3px;
  color:#111;
}

#einsatzplan-app .plan .sun .date,
#einsatzplan-app .plan .sun .dow{color:#d60000}

#einsatzplan-app .name{
  text-align:left!important;
  padding:8px 10px;
}

#einsatzplan-app .name b{font-size:16px}
#einsatzplan-app .role{font-size:14px}

#einsatzplan-app .shift{
  font-weight:800;
  font-size:17px;
  cursor:pointer;
  user-select:none;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

#einsatzplan-app .shift:hover{
  filter:brightness(.96);
  box-shadow:inset 0 0 0 2px #294d75;
}

#einsatzplan-app .shift.split{
  padding:0!important;
  overflow:hidden;
}

#einsatzplan-app .split-cell{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
  height:100%;
}

#einsatzplan-app .split-part{
  display:grid;
  place-items:center;
  font-weight:900;
  border-right:1px solid #ffffffaa;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

#einsatzplan-app .split-part:last-child{border-right:0}

#einsatzplan-app .f-striped{
  background-color:#ffd9b4!important;
  background-image:repeating-linear-gradient(
    135deg,
    rgba(0,0,0,.22) 0 1px,
    transparent 1px 16px
  )!important;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

#einsatzplan-app .rr-gray{
  background:#bfbfbf!important;
  background-color:#bfbfbf!important;
  color:#111!important;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

#einsatzplan-app .r-light{
  background:#f3f3f3!important;
  background-color:#f3f3f3!important;
  color:#111!important;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

#einsatzplan-app .bottom{
  display:grid;
  grid-template-columns:1.25fr .85fr .78fr;
  gap:10px;
  margin-top:10px;
}

#einsatzplan-app .box{
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px;
  min-height:135px;
}

#einsatzplan-app .box h3{
  margin:0 0 10px;
  font-size:15px;
  letter-spacing:.4px;
}

#einsatzplan-app .legend{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}

#einsatzplan-app .legend button{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  text-align:left;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  font-weight:500;
  padding:7px;
}

#einsatzplan-app .chip{
  width:32px;
  height:32px;
  border-radius:2px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#111;
  flex:none;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

#einsatzplan-app .legend-actions{
  display:flex;
  gap:6px;
  margin-top:8px;
  flex-wrap:wrap;
}

#einsatzplan-app .legend-editor{
  display:grid;
  grid-template-columns:55px 145px 110px 90px 75px 90px auto;
  gap:6px;
  align-items:end;
  margin-top:8px;
}

#einsatzplan-app .legend-editor input,
#einsatzplan-app .legend-editor select{padding:6px 8px}

#einsatzplan-app .hint{
  font-size:11px;
  color:var(--muted);
  margin-top:6px;
}

#einsatzplan-app .notes{
  font-size:13px;
  line-height:1.55;
  margin:0;
  padding-left:18px;
}

#einsatzplan-app .summary,
#einsatzplan-app .hours-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

#einsatzplan-app .summary td,
#einsatzplan-app .summary th,
#einsatzplan-app .hours-table td,
#einsatzplan-app .hours-table th{
  border:1px solid var(--line);
  padding:5px;
  text-align:center;
}

#einsatzplan-app .hours-table th{background:#f7f9fc}
#einsatzplan-app .hours-table td:first-child,
#einsatzplan-app .hours-table th:first-child{text-align:left}

#einsatzplan-app .hours-section{
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
}

#einsatzplan-app .hours-section h3{
  margin:0 0 10px;
  font-size:15px;
}

#einsatzplan-app .footer{
  border-top:1px solid var(--line);
  margin-top:8px;
  padding-top:9px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-family:Georgia,serif;
  font-style:italic;
  color:#1e2b40;
  font-size:13px;
}

#einsatzplan-app.compact .plan th,
#einsatzplan-app.compact .plan td{height:34px}

#einsatzplan-app.compact .title h1{font-size:26px}

#einsatzplan-app.compact .legend button{
  font-size:10px;
  padding:4px;
}

#einsatzplan-app.compact .box{padding:8px}

body.print-chef #einsatzplan-app .no-print-private{display:block!important}
body.print-chef #einsatzplan-app .hours-section{display:block!important}
body.print-chef #einsatzplan-app .footer{display:flex!important}
body.print-chef #einsatzplan-app .bottom{display:grid!important}

@media(max-width:900px){
  #einsatzplan-app .header,
  #einsatzplan-app .bottom{grid-template-columns:1fr}

  #einsatzplan-app .legend{grid-template-columns:repeat(2,1fr)}
  #einsatzplan-app .legend-editor{grid-template-columns:1fr 1fr}

  #einsatzplan-app .title h1{font-size:28px}
  #einsatzplan-app .title p{
    font-size:12px;
    letter-spacing:3px;
  }

  #einsatzplan-app .footer{flex-direction:column}
}

@media print{
  @page{size:A4 landscape;margin:4mm}

  #einsatzplan-app{
    width:100%;
    background:white;
    padding:0;
    overflow:visible;
  }

  #einsatzplan-app .toolbar,
  #einsatzplan-app .legend-editor,
  #einsatzplan-app .legend-actions,
  #einsatzplan-app .hint{display:none!important}

  #einsatzplan-app .sheet{
    box-shadow:none;
    border:0;
    border-radius:0;
    padding:3.5mm;
    width:100%;
    overflow:hidden;
  }

  #einsatzplan-app .calendar-wrap{overflow:visible}
  #einsatzplan-app table.plan{min-width:0}

  #einsatzplan-app .header{
    grid-template-columns:32mm 1fr 58mm;
    gap:4mm;
    margin-bottom:3mm;
  }

  #einsatzplan-app .logo{
    font-size:15px;
    line-height:1.05;
  }

  #einsatzplan-app .logo small{
    font-size:7px;
    letter-spacing:2.4px;
  }

  #einsatzplan-app .title h1{
    font-size:18px;
    letter-spacing:.9px;
    white-space:nowrap;
  }

  #einsatzplan-app .title p{
    font-size:7px;
    letter-spacing:3px;
    margin-top:2px;
  }

  #einsatzplan-app .month-badge{
    font-size:10px;
    padding:3px 14px;
    margin-top:3px;
    border-radius:5px;
  }

  #einsatzplan-app .meta{
    font-size:8px;
    padding:4px 5px;
    grid-template-columns:18mm 1fr;
    gap:2px;
    border-radius:6px;
  }

  #einsatzplan-app .plan th,
  #einsatzplan-app .plan td{
    height:8.2mm;
    font-size:7.5px;
  }

  #einsatzplan-app .plan th.name-col{width:27mm}
  #einsatzplan-app .plan th.role-col{width:18mm}
  #einsatzplan-app .plan .date{font-size:9px}

  #einsatzplan-app .plan .dow{
    font-size:6.5px;
    margin-top:1px;
  }

  #einsatzplan-app .name{padding:1.5mm 1.8mm}
  #einsatzplan-app .name b{font-size:8.5px}
  #einsatzplan-app .role{font-size:7.5px}
  #einsatzplan-app .shift{font-size:10px}
  #einsatzplan-app .split-part{font-size:8px}

  #einsatzplan-app .bottom{
    display:block!important;
    margin-top:3mm;
    page-break-inside:avoid;
  }

  #einsatzplan-app .bottom > .box:first-child{
    display:block!important;
    width:100%;
    padding:2.5mm;
    border-radius:6px;
    min-height:0;
  }

  #einsatzplan-app .box h3{
    font-size:9px;
    margin-bottom:1.8mm;
  }

  #einsatzplan-app .legend{
    grid-template-columns:repeat(9,1fr);
    gap:1.2mm;
  }

  #einsatzplan-app .legend button{
    font-size:6.5px;
    padding:1mm;
    gap:1mm;
    border-radius:4px;
  }

  #einsatzplan-app .chip{
    width:5.5mm;
    height:5.5mm;
    font-size:7px;
  }

  body.print-employee #einsatzplan-app .no-print-private,
  body.print-employee #einsatzplan-app .hours-section,
  body.print-employee #einsatzplan-app .footer{display:none!important}

  body.print-chef #einsatzplan-app .no-print-private{display:block!important}

  body.print-chef #einsatzplan-app .hours-section{
    display:block!important;
    padding:2mm;
    margin-top:2mm;
    border-radius:6px;
  }

  body.print-chef #einsatzplan-app .hours-section h3{
    font-size:8px;
    margin-bottom:1.5mm;
  }

  body.print-chef #einsatzplan-app .bottom{
    display:grid!important;
    grid-template-columns:1.25fr .92fr .72fr;
    gap:3mm;
  }

  body.print-chef #einsatzplan-app .box{
    padding:2.4mm;
    border-radius:6px;
    min-height:0;
  }

  body.print-chef #einsatzplan-app .legend{
    grid-template-columns:repeat(3,1fr);
    gap:1.2mm;
  }

  body.print-chef #einsatzplan-app .notes{
    font-size:7px;
    line-height:1.25;
    padding-left:3.5mm;
  }

  body.print-chef #einsatzplan-app .summary,
  body.print-chef #einsatzplan-app .hours-table{font-size:6.5px}

  body.print-chef #einsatzplan-app .summary td,
  body.print-chef #einsatzplan-app .summary th,
  body.print-chef #einsatzplan-app .hours-table td,
  body.print-chef #einsatzplan-app .hours-table th{padding:1mm}

  body.print-chef #einsatzplan-app .footer{
    display:flex!important;
    font-size:8px;
    margin-top:2mm;
    padding-top:2mm;
  }

  #einsatzplan-app .shift,
  #einsatzplan-app .split-part,
  #einsatzplan-app .chip{
    background:#fff!important;
    background-color:#fff!important;
    background-image:none!important;
    color:#111!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }

  #einsatzplan-app .shift.f-striped,
  #einsatzplan-app .split-part.f-striped,
  #einsatzplan-app .chip.f-striped{
    background-color:#fff!important;
    background-image:repeating-linear-gradient(
      135deg,
      rgba(0,0,0,.22) 0 1px,
      transparent 1px 16px
    )!important;
    color:#111!important;
  }

  #einsatzplan-app .shift.rr-gray,
  #einsatzplan-app .split-part.rr-gray,
  #einsatzplan-app .chip.rr-gray{
    background:#bfbfbf!important;
    background-color:#bfbfbf!important;
    background-image:none!important;
    color:#111!important;
  }

  #einsatzplan-app .shift.r-light,
  #einsatzplan-app .split-part.r-light,
  #einsatzplan-app .chip.r-light{
    background:#f3f3f3!important;
    background-color:#f3f3f3!important;
    background-image:none!important;
    color:#111!important;
  }

  #einsatzplan-app button.active,
  #einsatzplan-app .legend button.active{
    outline:none!important;
    box-shadow:none!important;
    border:1px solid #c9d1dc!important;
  }

  #einsatzplan-app .legend button,
  #einsatzplan-app .legend button.active{
    background:#fff!important;
    color:#111!important;
  }
}


/* v1.25: vollwertige Arbeitsansicht / responsive Bedienung */
@media screen{
  #einsatzplan-app{
    width:100%;
    max-width:none;
    margin:0;
    padding:12px;
    border-radius:16px;
    overflow:visible;
  }

  #einsatzplan-app .toolbar{
    display:grid;
    gap:10px;
    padding:12px;
    margin-bottom:12px;
  }

  #einsatzplan-app .toolbar-fields{
    display:grid;
    grid-template-columns:minmax(145px,.8fr) minmax(76px,.42fr) minmax(100px,.52fr) minmax(170px,1fr) minmax(190px,1fr) minmax(170px,.9fr);
    gap:8px;
    align-items:end;
    width:100%;
  }

  #einsatzplan-app .toolbar-fields label{min-width:0;margin:0}
  #einsatzplan-app .toolbar-fields input,
  #einsatzplan-app .toolbar-fields select{width:100%;min-width:0;min-height:42px}

  #einsatzplan-app .toolbar-actions{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    align-items:stretch;
  }

  #einsatzplan-app .toolbar-actions button{
    min-height:42px;
    white-space:normal;
    line-height:1.2;
  }

  #einsatzplan-app .toolbar-status-row{
    display:flex;
    align-items:center;
    min-height:24px;
  }

  #einsatzplan-app .toolbar-status-row .status{
    align-self:auto;
    padding:0 3px;
  }

  #einsatzplan-app .sheet{width:100%;max-width:none}

  #einsatzplan-app .calendar-wrap{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
  }

  #einsatzplan-app table.plan{min-width:max(1050px,100%)}
  #einsatzplan-app .hours-section{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #einsatzplan-app .hours-table{min-width:720px}
}

@media screen and (max-width:1000px){
  #einsatzplan-app{padding:8px;border-radius:12px}
  #einsatzplan-app .toolbar{padding:10px}
  #einsatzplan-app .toolbar-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  #einsatzplan-app .planner-field-wide{grid-column:auto}
  #einsatzplan-app .toolbar-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #einsatzplan-app .toolbar-actions button{width:100%}
  #einsatzplan-app .header{grid-template-columns:1fr;gap:12px}
  #einsatzplan-app .logo{font-size:22px}
  #einsatzplan-app .title h1{font-size:30px}
  #einsatzplan-app .title p{font-size:11px;letter-spacing:2.6px}
  #einsatzplan-app .meta{grid-template-columns:105px 1fr}
  #einsatzplan-app .bottom{grid-template-columns:1fr}
  #einsatzplan-app .legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  #einsatzplan-app .legend-editor{grid-template-columns:repeat(2,minmax(0,1fr))}
  #einsatzplan-app .legend-editor>button{min-height:42px}
}

@media screen and (max-width:700px){
  #einsatzplan-app{padding:6px}
  #einsatzplan-app .toolbar{border-radius:12px;box-shadow:none}
  #einsatzplan-app .toolbar-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #einsatzplan-app .planner-field-wide{grid-column:1/-1}
  #einsatzplan-app .planner-field-date{grid-column:1/-1}
  #einsatzplan-app .toolbar-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  #einsatzplan-app .toolbar-actions button{font-size:13px;padding:9px 8px}
  #einsatzplan-app .sheet{padding:10px;border-radius:10px;box-shadow:none}
  #einsatzplan-app .header{margin-bottom:10px}
  #einsatzplan-app .logo{font-size:20px}
  #einsatzplan-app .logo small{font-size:9px;letter-spacing:3px}
  #einsatzplan-app .title h1{font-size:25px}
  #einsatzplan-app .title p{font-size:10px;letter-spacing:1.8px}
  #einsatzplan-app .month-badge{font-size:12px;padding:7px 12px;max-width:100%}
  #einsatzplan-app .meta{padding:10px 11px;font-size:13px;grid-template-columns:86px 1fr}

  /* Mobile Tabellenbreite wird passend zur gewählten Wochenanzahl per JS gesetzt. */
  #einsatzplan-app .plan th,
  #einsatzplan-app .plan td{height:46px}
  #einsatzplan-app .plan th.name-col{width:112px;min-width:112px;position:sticky;left:0;z-index:7;background:#fbfcfe}
  #einsatzplan-app .plan th.role-col{width:84px;min-width:84px;position:sticky;left:112px;z-index:7;background:#fbfcfe;box-shadow:2px 0 0 #c9d1dc}
  #einsatzplan-app .plan td.name{width:112px;min-width:112px;position:sticky;left:0;z-index:5;background:#fff;padding:6px 7px;white-space:normal}
  #einsatzplan-app .plan td.role{width:84px;min-width:84px;position:sticky;left:112px;z-index:5;background:#fff;white-space:normal;overflow-wrap:anywhere;box-shadow:2px 0 0 #c9d1dc;padding:5px}
  #einsatzplan-app .name b{font-size:12px;line-height:1.25}
  #einsatzplan-app .role{font-size:11px;line-height:1.2}
  #einsatzplan-app .shift{font-size:14px;touch-action:manipulation}
  #einsatzplan-app .plan .date{font-size:14px}
  #einsatzplan-app .plan .dow{font-size:10px}

  #einsatzplan-app .legend{grid-template-columns:1fr}
  #einsatzplan-app .legend button{min-height:48px;font-size:12px}
  #einsatzplan-app .legend-actions{display:grid;grid-template-columns:1fr;gap:7px}
  #einsatzplan-app .legend-actions button{width:100%;min-height:42px}
  #einsatzplan-app .legend-editor{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #einsatzplan-app .legend-editor label{min-width:0}
  #einsatzplan-app .legend-editor input,
  #einsatzplan-app .legend-editor select{width:100%;min-width:0;min-height:40px}
  #einsatzplan-app .legend-editor>button{width:100%}
  #einsatzplan-app .box{padding:10px;min-height:0}
  #einsatzplan-app .notes{font-size:12px}
  #einsatzplan-app .summary{min-width:430px}
  #einsatzplan-app .summary-box{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #einsatzplan-app .footer{font-size:11px}
}

@media screen and (max-width:430px){
  #einsatzplan-app .toolbar-actions{grid-template-columns:1fr}
  #einsatzplan-app .legend-editor{grid-template-columns:1fr}
  #einsatzplan-app .toolbar-status-row .status{font-size:11px;line-height:1.4}
}