/* style.css – gemeinsames Design (abgeleitet vom Monatskalender) */

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body { font-family: system-ui, sans-serif; background: #f5f5f3; color: #1a1a18; font-size: 14px; line-height: 1.45; }
a { color: #0c447c; }

/* ---- Kopf ---------------------------------------------------------------- */
.topline { display: flex; align-items: baseline; gap: 16px; padding: 22px 20px 6px; flex-wrap: wrap; }
.site-title { font-size: 20px; font-weight: 600; color: #2c2c2a; }
.lang-switch { margin-left: auto; font-size: 13px; color: #5f5e5a; text-decoration: none;
  border: 0.5px solid #b4b2a9; border-radius: 8px; padding: 4px 10px; }
.lang-switch:hover { background: #f1efe8; }
.intro-text { padding: 2px 20px 14px; max-width: 780px; color: #5f5e5a; font-size: 13px; }

header.bar {
  background: #fff; border-top: 0.5px solid #d3d1c7; border-bottom: 0.5px solid #d3d1c7;
  padding: 12px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.nav-btn, .config-btn {
  background: none; border: 0.5px solid #b4b2a9; border-radius: 8px;
  padding: 5px 12px; cursor: pointer; font-size: 13px; color: #5f5e5a;
  font-family: inherit; text-decoration: none; display: inline-block;
}
.nav-btn:hover, .config-btn:hover { background: #f1efe8; }
.nav-btn:disabled { opacity: 0.35; cursor: default; }
.nav-btn:disabled:hover { background: none; }
.config-btn { margin-left: auto; }
.config-btn + .config-btn { margin-left: 0; }
.week-label { font-size: 14px; color: #5f5e5a; min-width: 240px; text-align: center; }
.bar-title { font-size: 14px; font-weight: 500; color: #2c2c2a; }

.sync { font-size: 11px; padding: 3px 9px; border-radius: 20px; background: #eaf3de; color: #3b6d11; }
.sync.syncing { background: #faeeda; color: #854f0b; }
.sync.error { background: #fcebeb; color: #a32d2d; }

/* ---- Kalender-Tabelle ---------------------------------------------------- */
.cal-wrap { padding: 16px 20px; overflow-x: auto; }
table.cal { border-collapse: collapse; table-layout: fixed; width: 100%; min-width: 700px; max-width: 1000px; }
table.cal col.c-day { width: 96px; }
table.cal col.c-slot { width: 112px; }

.hour-header td {
  height: 24px; font-size: 11px; color: #888780;
  text-align: left; padding-left: 4px; vertical-align: bottom; padding-bottom: 3px;
  border-left: 0.5px solid #d3d1c7;
}
.hour-header td:first-child, .hour-header td:nth-child(2) { border-left: none; }
.hour-header td.today-h { color: #0c447c; font-weight: 600; }

.day-name-cell {
  vertical-align: middle; text-align: right; padding-right: 8px;
  font-size: 12px; font-weight: 500; color: #2c2c2a; line-height: 1.3;
  border-right: 1.5px solid #d3d1c7;
}
.day-name-cell .dsub { font-size: 12px; font-weight: bold; color: #2c2c2a; }
.day-name-cell .dkw { font-size: 11px; color: #888780; font-weight: 400; }
.day-name-cell.fr { border-top: 0.5px solid #d3d1c7; }
.day-name-cell.lr { border-bottom: 0.5px solid #d3d1c7; }

.pname-cell {
  vertical-align: middle; padding: 0 5px 0 8px;
  font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-right: 0.5px solid #d3d1c7; background: #fff;
}
.pname-cell.fr { border-top: 0.5px solid #d3d1c7; }
.pname-cell.lr { border-bottom: 0.5px solid #d3d1c7; }
.pname-cell .pbar { display: inline-block; width: 3px; height: 14px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.pbar.am { background: #B5842E; }
.pbar.pm { background: #2A6F97; }
.pname-cell .pname { vertical-align: middle; }
.pname-cell .ptime { font-size: 11px; color: #888780; font-weight: 400; padding-left: 9px; }

.tc {
  position: relative;
  border-left: 0.5px solid #d3d1c7; border-top: 0.5px solid #eeedea;
  height: 46px; text-align: center; font-size: 12px; color: #2c2c2a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px;
  user-select: none;
}
.tc.fr { border-top: 0.5px solid #d3d1c7; }
.tc.lr { border-bottom: 0.5px solid #d3d1c7; }
.tc.rr { border-right: 0.5px solid #d3d1c7; }
.tc.today { box-shadow: inset 0 0 0 1px #378add; }

/* Kunde */
.tc.na { background: #eceae4; cursor: default; }
.tc.free { background: #fff; cursor: pointer; }
.tc.free:hover { background: #eaf3de; }
.tc.free:focus-visible, .tc.selected:focus-visible { outline: 2px solid #378add; outline-offset: -2px; }
.tc.selected { background: #1D9E75; color: #fff; font-weight: 500; cursor: pointer; }
.tc.selected:hover { filter: brightness(0.92); }
.tc.disabled { background: #fafaf8; color: #c4c2ba; cursor: not-allowed; }

.chk {
  display: inline-block; width: 13px; height: 13px; border: 1px solid #b4b2a9; border-radius: 3px;
  vertical-align: -2px; margin-right: 5px; background: #fff; position: relative;
}
.tc.selected .chk { border-color: #fff; }
.tc.selected .chk::after {
  content: ''; position: absolute; left: 3.5px; top: 0.5px; width: 3px; height: 7px;
  border: solid #1D9E75; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tc.disabled .chk { border-color: #dddbd3; background: transparent; }

/* Admin */
.tc .dn { position: absolute; top: 2px; left: 4px; font-size: 9.5px; color: #888780; font-weight: 400; }
.tc.a-free { background: #fff; cursor: pointer; color: #5f5e5a; }
.tc.a-free:hover { background: #f1efe8; }
.tc.a-blocked {
  background: repeating-linear-gradient(45deg,#efe9da,#efe9da 5px,#e2dbc8 5px,#e2dbc8 10px);
  color: #8a7a4e; cursor: pointer;
}
.tc.a-blocked:hover { filter: brightness(0.94); }
.tc.a-booked { background: #1D9E75; color: #fff; font-weight: 500; cursor: pointer; }
.tc.a-booked .dn { color: rgba(255,255,255,0.75); }
.tc.a-booked:hover { filter: brightness(0.9); }
.tc.a-booked.a-past { background: #9cc9b8; }
.tc.a-daytaken { background: #e3f1ea; color: #3b6d11; font-size: 11px; cursor: default; }
.tc.a-past { background: #eceae4; color: #b4b2a9; cursor: default; }

.wk-actions { margin-top: 4px; }
.wk-actions button {
  font-size: 10.5px; background: none; border: none; color: #5f5e5a; text-decoration: underline;
  cursor: pointer; font-family: inherit; padding: 0 1px;
}
.wk-actions button:hover { color: #1a1a18; }

.day-gap td { height: 10px; background: #f5f5f3; border: none; }

/* ---- Legende, Meldungen -------------------------------------------------- */
.legend { display: flex; gap: 18px; padding: 0 20px 14px; font-size: 12px; color: #5f5e5a; flex-wrap: wrap; }
.legend .lg { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; border: 0.5px solid #d3d1c7; }
.lg-free { background: #fff; }
.lg-sel { background: #1D9E75; border-color: #1D9E75 !important; }
.lg-na { background: #eceae4; }
.lg-blocked { background: repeating-linear-gradient(45deg,#efe9da,#efe9da 3px,#e2dbc8 3px,#e2dbc8 6px); }
.lg-daytaken { background: #e3f1ea; }

.msg { font-size: 12.5px; padding: 9px 12px; border-radius: 8px; margin-top: 12px; }
.msg.error { background: #fcebeb; color: #a32d2d; }
.msg.ok { background: #eaf3de; color: #3b6d11; }
.msg.info { background: #faeeda; color: #854f0b; }
#globalMsg, .week-info { margin: 12px 20px 0; max-width: 1000px; }

/* ---- Formular-Panel ------------------------------------------------------ */
.panel {
  background: #fff; border: 0.5px solid #d3d1c7; border-radius: 12px;
  padding: 20px 24px; margin: 6px 20px 28px; max-width: 520px;
}
.panel h2 { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.panel p { font-size: 13px; color: #2c2c2a; margin-bottom: 8px; }
.choice { font-size: 14px !important; font-weight: 500; color: #0c447c !important; background: #eef4fb; border-radius: 8px; padding: 8px 12px; margin: 8px 0 4px; }
.field label { display: block; font-size: 12px; color: #5f5e5a; margin: 12px 0 4px; }
.field input, .captcha-row input, .login-box input {
  width: 100%; border: 0.5px solid #b4b2a9; border-radius: 8px; padding: 7px 10px;
  font-size: 14px; outline: none; font-family: inherit; background: #fff;
}
.field input:focus, .captcha-row input:focus, .login-box input:focus { border-color: #378add; }
input.invalid { border-color: #a32d2d !important; background: #fffafa !important; }
.captcha-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; flex-wrap: wrap; }
.captcha-row label { color: #5f5e5a; font-size: 12px; }
.captcha-row #capQ { font-weight: 600; }
.captcha-row input { width: 64px; }
.note { font-size: 11px !important; color: #888780 !important; margin-top: 14px; line-height: 1.4; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.done-link { margin-top: 14px; }

/* ---- Buttons, Modal (wie Vorlage) ---------------------------------------- */
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.btn-cancel { background: none; border: 0.5px solid #b4b2a9; border-radius: 8px; padding: 6px 14px; cursor: pointer; font-size: 13px; color: #5f5e5a; font-family: inherit; text-decoration: none; display: inline-block; }
.btn-cancel:hover { background: #f1efe8; }
.btn-save { background: #2c2c2a; border: none; border-radius: 8px; padding: 6px 14px; cursor: pointer; font-size: 13px; color: #fff; font-family: inherit; }
.btn-save:hover { background: #444; }
.btn-save:disabled { opacity: 0.5; cursor: default; }
.btn-danger { background: #a32d2d; border: none; border-radius: 8px; padding: 6px 14px; cursor: pointer; font-size: 13px; color: #fff; font-family: inherit; }
.btn-danger:hover { background: #8a2424; }
.btn-danger:disabled { opacity: 0.5; cursor: default; }

.modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.25); z-index: 100; align-items: center; justify-content: center; }
.modal-bg.open { display: flex; }
.modal { background: #fff; border-radius: 12px; padding: 24px; width: 380px; max-width: calc(100vw - 24px); border: 0.5px solid #d3d1c7; }
.modal h2 { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.modal dl { display: grid; grid-template-columns: 100px 1fr; gap: 6px 10px; font-size: 13px; margin-top: 12px; }
.modal dt { color: #888780; }
.modal dd { color: #2c2c2a; word-break: break-word; }
.modal .notify-row { font-size: 12.5px; color: #5f5e5a; margin-top: 16px; display: flex; gap: 6px; align-items: center; }

/* ---- Admin-Liste --------------------------------------------------------- */
.list-wrap { padding: 4px 20px 30px; overflow-x: auto; }
.list-wrap h2 { font-size: 14px; font-weight: 500; margin: 10px 0 8px; color: #2c2c2a; }
table.list { border-collapse: collapse; background: #fff; font-size: 12.5px; min-width: 640px; max-width: 1000px; width: 100%; border: 0.5px solid #d3d1c7; }
table.list th { text-align: left; font-weight: 500; color: #888780; font-size: 11.5px; padding: 7px 10px; border-bottom: 0.5px solid #d3d1c7; background: #faf8f2; }
table.list td { padding: 7px 10px; border-bottom: 0.5px solid #eeedea; }
table.list tr.row { cursor: pointer; }
table.list tr.row:hover td { background: #f6f5f0; }
table.list .empty { color: #888780; text-align: center; padding: 14px; }

/* ---- Login --------------------------------------------------------------- */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-box { background: #fff; border-radius: 12px; padding: 28px 24px; width: 300px; border: 0.5px solid #d3d1c7; text-align: center; }
.login-box h2 { font-size: 15px; font-weight: 500; margin-bottom: 12px; }
.login-box input { margin-bottom: 10px; }
.login-box button { width: 100%; }

/* ---- Einstiegsseite ------------------------------------------------------ */
.hero { max-width: 760px; margin: 10px 20px 30px; background: #fff; border: 0.5px solid #d3d1c7; border-radius: 12px; padding: 26px 28px; }
.hero h2 { font-size: 17px; font-weight: 600; margin: 18px 0 6px; color: #2c2c2a; }
.hero h2:first-child { margin-top: 0; }
.hero p, .hero li { font-size: 14px; color: #2c2c2a; margin-bottom: 8px; }
.hero ul { padding-left: 20px; }
.btn-primary { display: inline-block; margin-top: 14px; background: #1D9E75; color: #fff; text-decoration: none; border-radius: 8px; padding: 10px 20px; font-size: 14px; font-weight: 500; }
.btn-primary:hover { background: #178562; }

.footer { text-align: center; font-size: 11.5px; color: #888780; padding: 20px; }

/* Handy-Ansicht der Kundenseite: Tage untereinander */
table.cal-narrow { min-width: 0 !important; width: 100%; }
table.cal-narrow col.c-dayname { width: 72px; }
table.cal-narrow thead td { padding: 0 6px 6px; vertical-align: bottom; }
table.cal-narrow .slot-head { font-size: 13px; font-weight: 500; }
table.cal-narrow .slot-head .ptime { font-size: 11px; color: #888780; font-weight: 400; padding-left: 9px; }
table.cal-narrow .day-name-cell { border-top: 0.5px solid #eeedea; }
table.cal-narrow .day-name-cell.fr { border-top: 0.5px solid #d3d1c7; }
table.cal-narrow .day-name-cell.today-day .dsub { color: #0c447c; }
table.cal-narrow .tc { height: 44px; font-size: 13px; }

@media (max-width: 640px) {
  .topline { padding: 16px 12px 4px; }
  .intro-text, .legend { padding-left: 12px; padding-right: 12px; }
  header.bar { padding: 10px 12px; gap: 8px; }
  .week-label { min-width: 0; flex: 1 1 100%; order: -1; text-align: left; }
  .cal-wrap { padding: 12px; }
  table.cal { min-width: 560px; }
  table.cal col.c-day { width: 58px; }
  table.cal col.c-slot { width: 92px; }
  .tc { font-size: 11px; }
  .panel, .hero { margin-left: 12px; margin-right: 12px; padding: 18px 16px; }
  #globalMsg, .week-info { margin-left: 12px; margin-right: 12px; }
}