:root{
  --bg:#eef5f6;
  --panel:#ffffff;
  --ink:#142026;
  --muted:#687782;
  --line:#d7e1e5;
  --accent:#14b7c6;
  --accent2:#6f7b84;
  --danger:#b42318;
  --radius:18px;
  --shadow:0 18px 50px rgba(20,32,38,.10);
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(135deg,#f7fbfc,#eaf3f5);color:var(--ink)}
a{color:inherit}
.topbar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;padding:12px 22px;gap:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:108px;height:auto;display:block}
.brand strong{display:block;font-size:18px}
.brand span{display:block;font-size:13px;color:var(--muted)}
nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
nav a{font-size:13px;text-decoration:none;padding:9px 11px;border-radius:999px;color:#34434c;font-weight:700}
nav a.active, nav a:hover{background:#e9fbfd;color:#067784}
.wrap{max-width:1320px;margin:0 auto;padding:28px 18px 60px}
.pageHead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
h1{font-size:32px;line-height:1.1;margin:0 0 6px;letter-spacing:-.03em}
h2{margin:0 0 10px;font-size:20px;letter-spacing:-.01em}
p{color:var(--muted);line-height:1.55;margin:0}
.panel{background:rgba(255,255,255,.94);border:1px solid rgba(215,225,229,.9);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:16px}
.btn,button{appearance:none;border:0;border-radius:999px;background:#17232b;color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 10px 22px rgba(20,32,38,.13)}
.btn.secondary,button.secondary{background:#fff;color:#17232b;border:1px solid var(--line);box-shadow:none}
button.danger,.danger{background:#fff;color:var(--danger);border:1px solid #ffd5d1;box-shadow:none}
button:disabled{opacity:.45;cursor:not-allowed}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.notice{background:#e9fbf7;border:1px solid #b7eee2;color:#0b624d;border-radius:14px;padding:12px 14px;margin-bottom:18px;font-weight:800}
.error{background:#fff1ef;border:1px solid #ffd1ca;color:#a12116;border-radius:14px;padding:12px 14px;margin-bottom:18px;font-weight:800}
.weekGrid{display:grid;grid-template-columns:repeat(6,minmax(210px,1fr));gap:12px;align-items:start;overflow:auto;padding-bottom:8px}
.dayCol{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:18px;padding:13px;min-height:220px;box-shadow:0 10px 28px rgba(20,32,38,.07)}
.dayCol h2{font-size:15px;margin-bottom:12px}
.dayCol.closed{background:#f3f6f7}
.closedNote{font-weight:800;color:#82909a}
.empBlock{border-left:4px solid var(--accent);background:#fbfdfe;border-radius:14px;padding:11px;margin-bottom:10px;border-top:1px solid #edf2f4;border-right:1px solid #edf2f4;border-bottom:1px solid #edf2f4}
.empHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.empHead strong{font-size:15px}
.empHead a{font-size:11px;color:#057782;font-weight:800;text-decoration:none}
.appt{display:block;background:#fff;border:1px solid #e1e9ec;border-radius:12px;padding:9px;margin-top:7px;text-decoration:none}
.appt span{display:block;font-weight:900;font-size:13px;color:#057782}
.appt b{display:block;margin-top:3px}
.appt small{display:block;color:var(--muted);margin-top:3px;line-height:1.35}
.appt.cancelled{opacity:.5;text-decoration:line-through}
.empty{font-size:13px;color:#82909a}
.formGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.formGrid .full{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:900;color:#34434c}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:14px;background:#fff;padding:11px 12px;font-size:15px;color:var(--ink);outline:none}
textarea{resize:vertical}
.check{flex-direction:row;align-items:center}
.check input{width:auto}
.deleteForm{margin-top:14px}
.grid2{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(420px,1.2fr);gap:16px;align-items:start}
.stack{display:flex;flex-direction:column;gap:12px}
.employeeEdit{display:grid;grid-template-columns:1fr 1.2fr 56px 92px 52px;gap:8px;align-items:center;margin-bottom:9px;border-bottom:1px solid #eef3f5;padding-bottom:9px}
.freeForm{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px;align-items:end}
.slotResults{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{background:#e9fbfd;color:#057782;border:1px solid #bceff3;border-radius:999px;padding:9px 12px;font-weight:900;text-decoration:none}
.dayList{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.rowLink{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;text-decoration:none;background:#fbfdfe;border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:8px}
.rowLink strong{color:#057782}
.rowLink span{font-weight:800}
.rowLink em{font-style:normal;color:var(--muted);font-size:13px}
.mailPreview{white-space:pre-wrap;background:#f6fafb;border:1px solid var(--line);border-radius:16px;padding:16px;line-height:1.55;overflow:auto}
.loginBody{min-height:100vh;display:grid;place-items:center;padding:20px}
.loginBox{width:min(440px,100%);background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:28px;text-align:center}
.loginBox img{max-width:260px;width:80%;height:auto;margin:0 auto 14px}
.loginBox h1{font-size:34px}
.loginBox p{margin-bottom:20px}
.loginBox form{text-align:left;display:flex;flex-direction:column;gap:12px;margin:18px 0}
.loginBox button{width:100%}
small{color:var(--muted)}
@media(max-width:980px){
  .topbar{position:relative;align-items:flex-start;flex-direction:column}
  nav{justify-content:flex-start}
  .weekGrid{grid-template-columns:repeat(2,minmax(260px,1fr))}
  .formGrid,.grid2,.freeForm{grid-template-columns:1fr}
  .employeeEdit{grid-template-columns:1fr}
  .pageHead{flex-direction:column}
}
@media(max-width:560px){
  .weekGrid{grid-template-columns:1fr}
  h1{font-size:26px}
  .brand img{width:86px}
  nav a{font-size:12px;padding:8px 9px}
}

/* === V1.2 Tablet + freie Termine nach Uhrzeit === */
@media (pointer: coarse) {
  .btn, button, nav a, .slot, .appt, .rowLink, .freeRow { min-height:44px; }
  input, select, textarea { min-height:46px; font-size:16px; }
}
@media (min-width:720px) and (max-width:1180px) {
  .topbar{position:sticky;top:0;padding:14px 18px}
  .brand img{width:118px}
  nav{width:100%;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding-bottom:2px}
  nav a{white-space:nowrap;font-size:14px;padding:11px 14px}
  .wrap{padding:22px 16px 50px}
  .weekGrid{grid-template-columns:repeat(3,minmax(260px,1fr));gap:14px}
  .dayCol{min-height:260px}
  .appt{padding:11px}
  .freeForm{grid-template-columns:repeat(2,minmax(220px,1fr))}
  .formGrid{grid-template-columns:repeat(2,minmax(220px,1fr))}
  .grid2{grid-template-columns:1fr}
  .dayList{grid-template-columns:repeat(2,minmax(300px,1fr))}
}
.mutedInfo{margin:6px 0 14px;color:var(--muted);font-size:14px}
.freeTimeline{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.freeDate{position:sticky;top:74px;background:#f7fbfc;border:1px solid var(--line);border-radius:13px;padding:9px 12px;font-weight:900;color:#34434c;z-index:2;margin-top:8px}
.freeRow{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px;box-shadow:0 7px 18px rgba(20,32,38,.05)}
.freeRow:hover{border-color:#9de7ef;background:#f1fdfe}
.freeTime{font-weight:950;color:#057782;font-size:18px}
.freeEmp{border-left:5px solid var(--accent);padding-left:10px;font-weight:900}
.freeRow small{color:var(--muted);font-weight:800}
.treatmentRow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border-bottom:1px solid #eef3f5;padding-bottom:9px;margin-bottom:9px}
.treatmentEdit{border-bottom:0!important;padding-bottom:0!important;margin-bottom:0!important}
.miniDelete{margin:0}
.miniDelete button{padding:10px 13px}
@media(max-width:760px){
  .freeRow{grid-template-columns:1fr}
  .freeDate{top:0}
  .treatmentRow{grid-template-columns:1fr}
}


/* === V1.3 Schönere Tablet-Ansicht: Tag prüfen === */
.jumpPanel{
  display:grid;
  grid-template-columns:minmax(180px,260px) minmax(180px,240px) auto auto;
  gap:12px;
  align-items:end;
}
.dayBoard{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
  align-items:start;
}
.dayEmployee{
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 14px 38px rgba(20,32,38,.08);
  overflow:hidden;
}
.dayEmployeeHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:15px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,#ffffff,#f4fbfc);
  border-left:7px solid var(--emp-color);
}
.dayEmployeeHead strong{
  font-size:20px;
}
.dayEmployeeHead span{
  color:var(--muted);
  font-weight:800;
  font-size:13px;
}
.dayAppt,.gapCard{
  display:block;
  text-decoration:none;
  margin:10px;
  border-radius:17px;
  padding:12px 13px;
}
.dayAppt{
  background:#fff;
  border:1px solid #dfe8ec;
  box-shadow:0 7px 18px rgba(20,32,38,.045);
}
.dayAppt:hover{
  border-color:#8adfe7;
  background:#f7fdfe;
}
.dayAppt .time{
  font-size:18px;
  font-weight:950;
  color:#057782;
  margin-bottom:4px;
}
.dayAppt .who{
  font-size:16px;
  font-weight:950;
}
.dayAppt .what,.dayAppt .phone{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  margin-top:3px;
}
.dayAppt em{
  display:inline-block;
  margin-top:8px;
  font-style:normal;
  font-size:12px;
  font-weight:900;
  color:#7a4b00;
  background:#fff3d8;
  border:1px solid #ffe0a6;
  border-radius:999px;
  padding:4px 8px;
}
.dayAppt.cancelled{
  opacity:.55;
  text-decoration:line-through;
}
.gapCard{
  border:1px dashed #cbd7dc;
  background:#f8fbfc;
  color:#41515a;
}
.gapCard.good{
  background:#ecfbf8;
  border-color:#9de8dc;
}
.gapCard.short{
  opacity:.55;
}
.gapCard span{
  display:inline-flex;
  border-radius:999px;
  background:#fff;
  color:#057782;
  font-weight:950;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:4px 8px;
  margin-bottom:7px;
}
.gapCard.short span{
  color:#73818a;
}
.gapCard b{
  display:block;
  font-size:17px;
  margin-bottom:3px;
}
.gapCard small{
  color:var(--muted);
  font-weight:800;
}
.closedBig{
  min-height:180px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@media(min-width:720px) and (max-width:1180px){
  .jumpPanel{
    grid-template-columns:repeat(2,minmax(220px,1fr));
  }
  .dayBoard{
    grid-template-columns:repeat(2,minmax(300px,1fr));
  }
}
@media(max-width:760px){
  .jumpPanel{
    grid-template-columns:1fr;
  }
  .dayBoard{
    grid-template-columns:1fr;
  }
}


/* === V1.4 Salon-Alltag: Ferien, Schliessungen, Storno, Backup === */
.absenceBlock{
  margin:10px;
  border-radius:17px;
  padding:12px 13px;
  background:#fff6e8;
  border:1px solid #ffd9a8;
  color:#5d3b00;
}
.absenceBlock .time{
  font-size:17px;
  font-weight:950;
}
.absenceBlock .who{
  font-size:16px;
  font-weight:950;
  margin-top:4px;
}
.absenceBlock .what{
  color:#7a5a21;
  font-size:13px;
  font-weight:700;
  margin-top:3px;
}
.actionPanel form{
  margin:0;
}
.adminItem{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  background:#fbfdfe;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  margin-bottom:10px;
}
.adminItem strong{display:block;font-size:16px}
.adminItem span{display:block;color:var(--muted);font-weight:800;font-size:13px;margin-top:3px}
.adminItem small{display:block;color:#51616a;margin-top:4px}
.adminItem.inactive{opacity:.55}
.miniGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.printDay{
  max-width:900px;
  margin:28px auto;
  background:white;
  padding:28px;
  color:#111;
}
.printTitle{
  display:flex;
  align-items:center;
  gap:18px;
  border-bottom:2px solid #111;
  padding-bottom:14px;
  margin-bottom:18px;
}
.printTitle img{
  width:130px;
}
.printDay section{
  break-inside:avoid;
  margin-bottom:18px;
}
.printDay h1{margin:0;font-size:28px}
.printDay h2{border-bottom:1px solid #bbb;padding-bottom:6px;margin-top:18px}
.printRow{
  display:grid;
  grid-template-columns:120px 1fr 160px;
  gap:12px;
  padding:7px 0;
  border-bottom:1px solid #e7e7e7;
}
.printRow strong{font-size:14px}
.printRow span{font-size:14px}
.printRow em{font-style:normal;color:#555;font-size:13px}
@media print{
  .topbar,.wrap{display:none!important}
  body{background:#fff!important}
  .printDay{margin:0!important;box-shadow:none!important;padding:12mm!important;max-width:none!important}
}
@media(max-width:760px){
  .adminItem{grid-template-columns:1fr}
  .miniGrid{grid-template-columns:1fr}
}


/* === V1.5: kompakte Wochenübersicht + Mitarbeiterinnen-Admin === */
.compactWeek .dayCol{
  min-width:260px;
}
.weekDayHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.weekDayHead h2{
  margin:0;
  font-size:15px;
  line-height:1.25;
}
.weekDayHead a{
  flex:0 0 auto;
  font-size:12px;
  font-weight:900;
  color:#057782;
  background:#e9fbfd;
  border:1px solid #bceff3;
  border-radius:999px;
  padding:6px 9px;
  text-decoration:none;
}
.weekEmpBlock{
  padding:9px 10px;
  margin-bottom:8px;
}
.weekEmpTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.weekEmpTop strong{
  font-size:15px;
}
.weekEmpTop span{
  font-size:12px;
  color:var(--muted);
  font-weight:900;
  background:#eef5f6;
  border-radius:999px;
  padding:4px 7px;
}
.weekMiniAppt{
  display:grid;
  grid-template-columns:45px 1fr;
  gap:7px;
  text-decoration:none;
  padding:5px 0;
  border-top:1px solid #edf2f4;
  font-size:13px;
}
.weekMiniAppt b{
  color:#057782;
}
.weekMiniAppt span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:800;
}
.weekMore{
  display:block;
  margin-top:6px;
  color:#057782;
  font-size:12px;
  font-weight:950;
  text-decoration:none;
}
.weekAbsenceMini{
  background:#fff6e8;
  border:1px solid #ffd9a8;
  color:#5d3b00;
  border-radius:10px;
  padding:6px 8px;
  font-size:12px;
  font-weight:900;
  margin:5px 0;
}
.employeeAdminCard{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fbfdfe;
  padding:10px;
  margin-bottom:10px;
}
.employeeEditWide{
  grid-template-columns:1fr 1.2fr 1fr 56px 88px 92px;
  border-bottom:0!important;
  padding-bottom:0!important;
  margin-bottom:0!important;
}
@media(min-width:720px) and (max-width:1180px){
  .compactWeek{
    grid-template-columns:repeat(2,minmax(320px,1fr))!important;
  }
  .weekEmpBlock{
    padding:11px;
  }
}
@media(max-width:900px){
  .employeeAdminCard{
    grid-template-columns:1fr;
  }
  .employeeEditWide{
    grid-template-columns:1fr;
  }
}


/* === V1.6: neue Wochenübersicht ohne Überlappung === */
.weekPageHead{
  align-items:flex-start;
}
.weekList{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.weekDayPanel{
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 14px 38px rgba(20,32,38,.08);
  overflow:hidden;
}
.weekDayPanel.today{
  border-color:#9de7ef;
  box-shadow:0 18px 45px rgba(20,183,198,.12);
}
.weekDayPanel.closed{
  background:#f5f8f9;
}
.weekDayTitle{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,#ffffff,#f5fbfc);
}
.weekDayTitle h2{
  margin:0;
  font-size:20px;
  line-height:1.2;
}
.weekDayTitle p{
  margin-top:4px;
  font-size:13px;
  font-weight:800;
  color:var(--muted);
}
.smallBtn{
  padding:9px 13px;
  min-height:38px;
  font-size:13px;
}
.weekEmployeeGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
  gap:12px;
  padding:14px;
}
.weekEmployeeCard{
  border:1px solid #e3ecef;
  border-left:6px solid var(--emp-color);
  border-radius:18px;
  background:#fff;
  padding:12px;
  min-width:0;
}
.weekEmployeeHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.weekEmployeeHeader strong{
  font-size:18px;
  line-height:1.1;
}
.weekEmployeeHeader span{
  flex:0 0 auto;
  background:#eef5f6;
  color:#60707a;
  border-radius:999px;
  padding:5px 8px;
  font-weight:900;
  font-size:12px;
}
.weekMiniList{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.weekMiniAppt{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:8px;
  align-items:center;
  text-decoration:none;
  color:var(--ink);
  border-top:1px solid #edf2f4;
  padding-top:6px;
  font-size:14px;
}
.weekMiniAppt:first-child{
  border-top:0;
}
.miniTime{
  color:#057782;
  font-weight:950;
}
.miniName{
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.weekMore{
  display:inline-flex;
  margin-top:8px;
  font-size:13px;
  font-weight:950;
  color:#057782;
  text-decoration:none;
}
.weekFree{
  color:#82909a;
  font-weight:850;
  padding:6px 0;
}
.closedCompact{
  padding:18px;
}
.closedCompact strong{
  display:block;
  font-size:19px;
  margin-bottom:4px;
}
.closedCompact span{
  color:var(--muted);
}
@media(min-width:720px) and (max-width:1180px){
  .weekEmployeeGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .weekDayTitle{
    padding:15px;
  }
}
@media(max-width:760px){
  .weekDayTitle{
    flex-direction:column;
    align-items:flex-start;
  }
  .weekEmployeeGrid{
    grid-template-columns:1fr;
  }
}


/* === V1.7: kompakter Tagesplan + Wochen-Zusammenfassung === */
.dayToolbar{
  display:grid;
  grid-template-columns:minmax(180px,240px) minmax(180px,240px) auto auto auto auto;
  gap:12px;
  align-items:end;
}
.employeeFilterBar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 16px;
}
.employeeFilterBar a{
  text-decoration:none;
  background:#fff;
  border:1px solid var(--line);
  border-left:5px solid var(--emp-color, var(--accent));
  border-radius:999px;
  padding:9px 13px;
  font-weight:900;
  color:#263640;
}
.employeeFilterBar a.active{
  background:#17232b;
  color:#fff;
  border-color:#17232b;
}
.compactDayPanel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 14px 38px rgba(20,32,38,.08);
  overflow:hidden;
}
.compactDayHead,.compactRow{
  display:grid;
  grid-template-columns:120px 150px minmax(220px,1.2fr) minmax(180px,1fr) 90px;
  gap:12px;
  align-items:center;
}
.compactDayHead{
  background:#f3f8f9;
  color:#64737d;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
}
.compactRow{
  text-decoration:none;
  color:var(--ink);
  padding:12px 16px;
  border-bottom:1px solid #edf2f4;
  min-height:58px;
}
.compactRow:hover{
  background:#f7fdfe;
}
.compactRow.cancelled{
  opacity:.52;
  text-decoration:line-through;
}
.compactRow.absence{
  background:#fff8ec;
}
.compactRow .time{
  color:#057782;
  font-weight:950;
  font-size:16px;
}
.compactRow .employee{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:950;
}
.compactRow .employee i{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--emp-color);
}
.compactRow .customer strong{
  display:block;
  font-size:15px;
}
.compactRow .customer small{
  display:block;
  color:var(--muted);
  margin-top:2px;
  font-weight:700;
}
.compactRow .treatment{
  color:#42535d;
  font-weight:850;
}
.compactRow .duration{
  color:var(--muted);
  font-weight:900;
  text-align:right;
}
.compactEmpty{
  padding:22px;
  color:var(--muted);
  font-weight:850;
}

/* Wochenübersicht nur Zusammenfassung */
.weekSummaryList{
  display:flex;
  flex-direction:column;
  gap:13px;
}
.weekSummaryDay{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 12px 32px rgba(20,32,38,.075);
  overflow:hidden;
}
.weekSummaryDay.today{
  border-color:#9de7ef;
}
.weekSummaryDay.closed{
  background:#f5f8f9;
}
.weekSummaryHead{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,#ffffff,#f6fbfc);
}
.weekSummaryHead h2{
  margin:0;
  font-size:19px;
}
.weekSummaryHead p{
  margin-top:3px;
  font-size:13px;
}
.weekSummaryEmployees{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;
  padding:12px;
}
.weekSummaryEmp{
  text-decoration:none;
  color:var(--ink);
  border:1px solid #e3ecef;
  border-left:6px solid var(--emp-color);
  border-radius:16px;
  padding:11px 12px;
  background:#fff;
}
.weekSummaryEmp strong{
  display:block;
  font-size:16px;
}
.weekSummaryEmp span{
  display:inline-flex;
  margin-top:6px;
  background:#eef5f6;
  color:#61717b;
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
  font-weight:950;
}
.weekSummaryEmp small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-weight:800;
}
.weekAbsenceBadge{
  background:#fff3dc!important;
  color:#6b4100!important;
}
.weekTotalLine,.weekClosedLine{
  padding:0 16px 14px;
  color:var(--muted);
  font-weight:850;
}
@media(min-width:720px) and (max-width:1180px){
  .dayToolbar{
    grid-template-columns:repeat(2,minmax(220px,1fr));
  }
  .compactDayHead{
    display:none;
  }
  .compactRow{
    grid-template-columns:105px 130px 1fr 90px;
  }
  .compactRow .treatment{
    display:none;
  }
}
@media(max-width:760px){
  .dayToolbar{
    grid-template-columns:1fr;
  }
  .compactDayHead{
    display:none;
  }
  .compactRow{
    grid-template-columns:1fr;
    gap:5px;
    align-items:start;
  }
  .compactRow .duration{
    text-align:left;
  }
  .weekSummaryHead{
    grid-template-columns:1fr;
  }
  .weekSummaryEmployees{
    grid-template-columns:1fr;
  }
}


/* === V1.8: Leistung statt Behandlung + Mail-Button === */
.employeeAdminActions{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
}
.employeeAdminActions .btn,
.employeeAdminActions button{
  width:100%;
  white-space:nowrap;
}
.sendWeekSelector{
  display:grid;
  grid-template-columns:minmax(220px,320px) auto;
  gap:12px;
  align-items:end;
  margin-bottom:14px;
}
@media(max-width:760px){
  .sendWeekSelector{
    grid-template-columns:1fr;
  }
}


/* === V1.9 Salon Easy === */
.easyHero{
  background:linear-gradient(135deg,#ffffff,#eefbfc);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:0 18px 48px rgba(20,32,38,.10);
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-bottom:18px;
}
.easyHero h1{
  margin:0 0 6px;
  font-size:36px;
}
.easyHero p{
  font-size:18px;
  font-weight:800;
}
.easyHero img{
  width:170px;
  max-width:34%;
  height:auto;
}
.easyActions{
  display:grid;
  grid-template-columns:repeat(4,minmax(170px,1fr));
  gap:14px;
  margin-bottom:18px;
}
.easyBtn{
  display:flex;
  min-height:86px;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(20,32,38,.08);
  color:var(--ink);
  font-size:20px;
  font-weight:950;
  padding:18px;
}
.easyBtn.primary{
  background:#17232b;
  color:#fff;
}
.easyPanel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 14px 38px rgba(20,32,38,.08);
  overflow:hidden;
}
.easyPanelHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  background:#f5fbfc;
}
.easyPanelHead h2{
  margin:0;
}
.easyPanelHead a{
  color:#057782;
  font-weight:950;
  text-decoration:none;
}
.easyList{
  display:flex;
  flex-direction:column;
}
.easyRow{
  display:grid;
  grid-template-columns:80px 150px minmax(180px,1fr) minmax(160px,1fr);
  gap:12px;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid #edf2f4;
  color:var(--ink);
  text-decoration:none;
}
.easyRow:hover{
  background:#f7fdfe;
}
.easyRow strong{
  color:#057782;
  font-size:18px;
}
.easyRow span{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:950;
}
.easyRow span i{
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--emp-color);
}
.easyRow b{
  font-size:16px;
}
.easyRow small{
  color:var(--muted);
  font-weight:800;
}
.adminTiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.adminTiles a{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 12px 30px rgba(20,32,38,.08);
  padding:18px;
  text-decoration:none;
  color:var(--ink);
  min-height:110px;
}
.adminTiles strong{
  display:block;
  font-size:20px;
  margin-bottom:8px;
}
.adminTiles span{
  display:block;
  color:var(--muted);
  font-weight:750;
  line-height:1.4;
}
.fieldHint{
  color:var(--muted);
  font-weight:700;
  font-size:12px;
}
@media(max-width:980px){
  .easyActions{
    grid-template-columns:repeat(2,minmax(160px,1fr));
  }
  .easyRow{
    grid-template-columns:80px 130px 1fr;
  }
  .easyRow small{
    grid-column:3;
  }
}
@media(max-width:620px){
  .easyHero{
    flex-direction:column;
    align-items:flex-start;
  }
  .easyHero img{
    max-width:210px;
    width:60%;
  }
  .easyActions{
    grid-template-columns:1fr;
  }
  .easyBtn{
    min-height:68px;
  }
  .easyRow{
    grid-template-columns:1fr;
    gap:5px;
  }
  .easyRow small{
    grid-column:auto;
  }
}


/* === V1.10: freie Zeit ohne Standarddatum === */
.freeForm label:first-of-type{
  position:relative;
}
.freeForm label:first-of-type::after{
  content:"frei lassen = automatisch suchen";
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  margin-top:2px;
}


/* === V1.11: bessere Lesbarkeit aller Eingabefelder === */
label{
  font-size:14px !important;
  color:#263640 !important;
}
input,
select,
textarea{
  background:#ffffff !important;
  color:#12212b !important;
  -webkit-text-fill-color:#12212b !important;
  border:1px solid #cdd8dd !important;
  border-radius:18px !important;
  font-size:17px !important;
  line-height:1.35 !important;
  min-height:54px !important;
  padding:12px 14px !important;
  box-sizing:border-box !important;
}
input::placeholder,
textarea::placeholder{
  color:#7f8f98 !important;
  opacity:1 !important;
}
input:focus,
select:focus,
textarea:focus{
  border-color:#16b6c4 !important;
  box-shadow:0 0 0 3px rgba(22,182,196,.14) !important;
}
input[type="checkbox"]{
  min-height:auto !important;
  width:20px !important;
  height:20px !important;
  padding:0 !important;
}
input[type="color"]{
  min-height:54px !important;
  padding:6px !important;
  cursor:pointer;
}
button,
.btn{
  min-height:52px;
}
label small,
.fieldHint{
  display:block;
  margin-top:4px;
  color:#6b7a84 !important;
  font-size:12px;
  font-weight:800;
}

/* Mitarbeiterinnen-Liste lesbarer */
.employeeAdminCard{
  grid-template-columns:1fr !important;
  gap:10px !important;
}
.employeeEditWide{
  display:grid !important;
  grid-template-columns:minmax(120px,1fr) minmax(220px,1.5fr) minmax(150px,1fr) 86px auto 120px !important;
  gap:10px !important;
  align-items:center !important;
}
.employeeEditWide input,
.employeeEditWide select{
  min-width:0 !important;
  width:100% !important;
}
.employeeEditWide .check{
  flex-direction:row !important;
  justify-content:flex-start !important;
  gap:8px !important;
  white-space:nowrap;
}
.employeeAdminActions{
  display:flex !important;
  flex-direction:row !important;
  gap:10px !important;
  justify-content:flex-end !important;
  align-items:center !important;
}
.employeeAdminActions .btn,
.employeeAdminActions .danger,
.employeeAdminActions .miniDelete button{
  min-width:190px;
}
.miniDelete{
  margin:0 !important;
}
.miniDelete button{
  width:100%;
}

/* Formulare allgemein etwas luftiger */
.stack label,
.freeForm label,
.dayToolbar label,
.sendWeekSelector label{
  gap:7px !important;
}
.panel{
  overflow:visible;
}

/* Tablet / kleinere Breiten */
@media(max-width:1280px){
  .employeeEditWide{
    grid-template-columns:1fr 1.3fr 1fr 86px !important;
  }
  .employeeEditWide .check{
    grid-column:1 / span 2;
  }
}
@media(max-width:980px){
  .employeeEditWide{
    grid-template-columns:1fr 1fr !important;
  }
  .employeeAdminActions{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .employeeAdminActions .btn,
  .employeeAdminActions .danger,
  .employeeAdminActions .miniDelete button{
    min-width:0;
    width:100%;
  }
}
@media(max-width:700px){
  .employeeEditWide,
  .freeForm,
  .dayToolbar,
  .sendWeekSelector{
    grid-template-columns:1fr !important;
  }
}


/* === V1.12: Layout-Fix überall / keine abgeschnittenen Felder === */
*{
  min-width:0;
}
html,body{
  max-width:100%;
  overflow-x:hidden!important;
}
.topbar{
  position:relative!important;
  top:auto!important;
  z-index:20!important;
  flex-wrap:wrap!important;
  align-items:flex-start!important;
  padding:14px 24px!important;
}
.topbar nav,
nav{
  max-width:100%!important;
  overflow-x:auto!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  gap:8px!important;
}
nav a{
  white-space:nowrap!important;
}
.wrap{
  width:min(100% - 32px, 1280px)!important;
  max-width:1280px!important;
  padding-top:24px!important;
  overflow:hidden!important;
}
.panel{
  max-width:100%!important;
  overflow:hidden!important;
}
.grid2{
  grid-template-columns:1fr!important;
}
.formGrid,
.freeForm,
.dayToolbar,
.jumpPanel,
.sendWeekSelector,
.employeeEdit,
.employeeEditWide{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;
  max-width:100%!important;
}
input,
select,
textarea{
  max-width:100%!important;
  min-width:0!important;
}
button,
.btn{
  white-space:normal!important;
  max-width:100%!important;
}
.compactDayPanel{
  overflow-x:auto!important;
}
.compactDayHead,
.compactRow{
  min-width:760px;
}

/* Mitarbeiterinnen bewusst als einfache Karten statt enge Zeile */
.employeesLayout{
  display:grid;
  grid-template-columns:minmax(280px,420px) minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.simpleAdminForm{
  display:grid;
  grid-template-columns:1fr;
  gap:13px;
}
.employeeCleanList{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.employeeCleanCard{
  background:#fbfdfe;
  border:1px solid var(--line);
  border-left:7px solid var(--emp-color);
  border-radius:22px;
  padding:16px;
  box-shadow:0 10px 28px rgba(20,32,38,.055);
}
.employeeCleanHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.employeeCleanHead strong{
  font-size:22px;
  line-height:1.1;
}
.employeeCleanHead span{
  background:#eef5f6;
  color:#52646f;
  border-radius:999px;
  padding:6px 10px;
  font-weight:950;
  font-size:13px;
}
.employeeCleanForm{
  display:grid;
  grid-template-columns:repeat(2,minmax(220px,1fr));
  gap:13px;
}
.employeeCleanForm label{
  width:100%;
}
.employeeCleanForm input[type="color"]{
  width:100%!important;
}
.cleanCheck{
  flex-direction:row!important;
  align-items:center!important;
  gap:10px!important;
}
.employeeCleanActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:end;
}
.employeeCleanDelete{
  margin-top:10px;
}
.employeeCleanDelete button{
  width:100%;
  background:#fff!important;
  color:var(--danger)!important;
  border:1px solid #ffd5d1!important;
}
.employeeAdminCard,
.employeeAdminActions,
.employeeEditWide{
  max-width:100%!important;
}

/* grosse Tablets */
@media(max-width:1180px){
  .employeesLayout{
    grid-template-columns:1fr!important;
  }
  .employeeCleanForm{
    grid-template-columns:1fr 1fr;
  }
}

/* kleine Tablets / Handy */
@media(max-width:780px){
  .wrap{
    width:min(100% - 20px, 1280px)!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .topbar{
    padding:12px 14px!important;
  }
  .brand img{
    width:92px!important;
  }
  .employeeCleanForm,
  .employeeCleanActions{
    grid-template-columns:1fr!important;
  }
  .compactDayHead,
  .compactRow{
    min-width:0!important;
  }
}


/* === V1.13 Nur-Ansehen-Link === */
.readonlyBody{
  background:linear-gradient(135deg,#eef5f6,#f8fbfc);
  min-height:100vh;
}
.readonlyWrap{
  width:min(100% - 28px, 980px);
  margin:0 auto;
  padding:24px 0 60px;
}
.readonlyHeader{
  display:flex;
  align-items:center;
  gap:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:0 16px 42px rgba(20,32,38,.09);
  padding:20px;
  margin-bottom:16px;
}
.readonlyHeader img{
  width:150px;
  max-width:32%;
}
.readonlyHeader h1{
  margin:0 0 4px;
  font-size:32px;
}
.readonlyHeader p{
  font-weight:850;
}
.readonlyPanel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 14px 36px rgba(20,32,38,.075);
  padding:18px;
  margin-bottom:16px;
}
.readonlyChooser{
  display:grid;
  grid-template-columns:1fr 190px 160px auto;
  gap:12px;
  align-items:end;
}
.readonlyTitle{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid var(--line);
  padding-bottom:12px;
  margin-bottom:12px;
}
.readonlyTitle h2{
  font-size:26px;
  margin:0;
}
.readonlyList{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.readonlyDate{
  margin-top:8px;
  padding:10px 12px;
  border-radius:14px;
  background:#f3f8f9;
  color:#263640;
  font-weight:950;
}
.readonlyRow{
  display:grid;
  grid-template-columns:120px 1fr minmax(160px,.8fr);
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid #edf2f4;
  border-radius:16px;
  background:#fff;
}
.readonlyRow strong{
  color:#057782;
  font-size:17px;
}
.readonlyRow span{
  font-weight:950;
}
.readonlyRow small{
  color:var(--muted);
  font-weight:800;
}
.readonlyRow.absence{
  background:#fff8ec;
  border-color:#ffd9a8;
}
.readonlyRow.closed{
  background:#f4f6f7;
  opacity:.86;
}
@media(max-width:760px){
  .readonlyHeader{
    flex-direction:column;
    align-items:flex-start;
  }
  .readonlyHeader img{
    max-width:220px;
    width:70%;
  }
  .readonlyChooser,
  .readonlyRow{
    grid-template-columns:1fr;
  }
  .readonlyTitle{
    flex-direction:column;
  }
}