/* BeauMed Kalender – Premium-Theme. Markenfarben kommen als CSS-Variablen aus der Mandanten-Konfiguration. */
:root {
  --slot-h: 22px;           /* Höhe von 15 Minuten */
  --ink: var(--bm-anthracite, #303038);
  --muted: #7a776f;
  --line: rgba(70, 95, 64, .10);
  --line-strong: rgba(70, 95, 64, .22);
  --card: #fffdf9;
  --serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--sans); color: var(--ink); font-size: 15px;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(197,164,103,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(183,207,167,.30), transparent 60%),
    linear-gradient(180deg, var(--bm-off-white), var(--bm-sand));
  min-height: 100vh;
}
a { color: var(--bm-green-deep); }
h1, h2, h3, .brand { font-family: var(--serif); font-weight: 600; letter-spacing: .01em; }

/* ---------- Kopfzeile */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px; padding: 10px 22px;
  background: linear-gradient(135deg, var(--bm-green-deep) 0%, #3a5035 55%, #2f412b 100%);
  color: #f3efe6; box-shadow: 0 10px 30px rgba(48,48,56,.18);
  border-bottom: 2px solid var(--bm-gold);
}
.brand { font-size: 28px; color: #fbf6ea; text-decoration: none; display: flex; align-items: baseline; gap: 10px; }
.brand small { font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--bm-gold); }
.brand .dot { color: var(--bm-gold); }
.search { flex: 1; max-width: 520px; position: relative; }
.search input {
  width: 100%; padding: 10px 16px 10px 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10); color: #fff; font-size: 15px; outline: none; transition: all .2s var(--ease);
}
.search input::placeholder { color: rgba(255,255,255,.6); }
.search input:focus { background: #fffdf8; color: var(--ink); box-shadow: 0 0 0 3px rgba(197,164,103,.45); }
.search::before { content: "⌕"; position: absolute; left: 14px; top: 7px; font-size: 18px; opacity: .7; }
.search-results { max-height: 70vh; overflow: auto;
  position: absolute; top: 46px; left: 0; right: 0; background: var(--card); color: var(--ink);
  border-radius: 16px; box-shadow: var(--bm-shadow); overflow: hidden; display: none;
}
.search-results a { display: block; padding: 10px 16px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.search-results a:hover { background: var(--bm-green-mist); }
.search-results small { color: var(--muted); }
.topnav { display: flex; gap: 4px; align-items: center; margin-left: auto; }
.topnav a { color: #e9e4d6; text-decoration: none; padding: 8px 12px; border-radius: 999px; font-size: 14px; position: relative; }
.topnav a:hover { background: rgba(255,255,255,.10); }
.badge-dot { background: var(--bm-gold); color: #2b2b2b; border-radius: 999px; font-size: 11px; padding: 1px 7px; margin-left: 4px; font-weight: 700; }
.userchip { font-size: 13px; color: #d9d3c2; padding: 0 6px; text-align: right; line-height: 1.2; }
.userchip b { color: #fff; display: block; font-size: 14px; }
.btn-leave {
  background: linear-gradient(180deg, #d8bb80, var(--bm-gold-deep)); color: #2a2418; border: 0; font-weight: 700;
  padding: 12px 20px; border-radius: 999px; font-size: 15px; cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5); white-space: nowrap;
}
.btn-leave:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ---------- Werkzeugleiste */
.wrap { padding: 18px 22px 40px; }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs { display: inline-flex; background: rgba(255,255,255,.65); border-radius: 999px; padding: 4px;
  box-shadow: inset 0 1px 3px rgba(48,48,56,.08), 0 1px 0 #fff; }
.tabs a { padding: 8px 16px; border-radius: 999px; text-decoration: none; color: var(--ink); font-size: 14px; transition: all .2s var(--ease); }
.tabs a.on { background: linear-gradient(180deg, var(--bm-green), var(--bm-green-deep)); color: #fff; box-shadow: 0 4px 10px rgba(70,95,64,.35); }
.nav-arrows a, .btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #fff, #f4f1ea); color: var(--ink); text-decoration: none; font-size: 14px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(48,48,56,.08); transition: all .18s var(--ease); font-family: var(--sans);
}
.btn:hover, .nav-arrows a:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(48,48,56,.12); }
.btn.primary { background: linear-gradient(180deg, var(--bm-green), var(--bm-green-deep)); color: #fff; border-color: transparent; font-weight: 600; }
.btn.gold { background: linear-gradient(180deg, #dcc18a, var(--bm-gold-deep)); color: #2a2418; border-color: transparent; font-weight: 600; }
.btn.danger { color: #9b3b33; }
.btn.small { padding: 5px 11px; font-size: 13px; }
.title { font-family: var(--serif); font-size: 26px; margin: 0 8px; }
.legend { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.legend span { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #33333b; box-shadow: inset 0 -1px 0 rgba(0,0,0,.08); }

/* ---------- Kalender-Raster */
.cal { display: flex; background: var(--card); border-radius: var(--bm-radius); box-shadow: var(--bm-shadow); overflow: auto; max-height: calc(100vh - 150px); position: relative; }
.timecol { position: sticky; left: 0; z-index: 6; background: linear-gradient(90deg, #fbf9f3, #f6f3ea); min-width: 54px; border-right: 1px solid var(--line-strong); }
.timecol .head { height: 86px; position: sticky; top: 0; background: #f8f5ee; z-index: 7; border-bottom: 1px solid var(--line-strong); }
.timecol .hour { height: calc(var(--slot-h) * 4); font-size: 12px; color: var(--muted); text-align: right; padding: 2px 8px 0 0; border-bottom: 1px solid var(--line); }
.day { flex: 1 1 0; border-right: 3px solid var(--bm-green-deep); min-width: calc(var(--rooms, 5) * var(--room-min, 0px) + 8px); }
.day:last-child { border-right: 0; }
.dayhead { position: sticky; top: 0; z-index: 5; background: linear-gradient(180deg, #fffdf8, #f6f2e8); border-bottom: 1px solid var(--line-strong); height: 86px; }
.dayhead .dname { text-align: center; padding: 8px 4px 2px; font-size: 14px; }
.dayhead .dname b { font-family: var(--serif); font-size: 20px; }
.dayhead .dname a { color: inherit; text-decoration: none; }
.day.today .dayhead { background: linear-gradient(180deg, #fff8e8, #f5ead0); box-shadow: inset 0 3px 0 var(--bm-gold); }
.day.today .dname b { color: var(--bm-gold-deep); }
.holiday { margin: 2px 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; border-radius: 999px; text-align: center;
  background: linear-gradient(90deg, rgba(140,95,85,.15), rgba(197,164,103,.25)); color: var(--bm-women-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.holiday.none { visibility: hidden; }
.roomheads { display: flex; gap: 2px; padding: 4px 3px 0; }
.roomheads div { flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 3px 0; border-radius: 8px 8px 0 0; color: #3a3a42; min-width: 0; overflow: hidden; }
.daybody { display: flex; gap: 2px; padding: 0 3px; position: relative; }
.room {
  flex: 1 1 0; min-width: var(--room-min, 0px); position: relative; cursor: copy;
  height: calc(var(--slot-h) * var(--rows));
  background-image:
    linear-gradient(to bottom, var(--line-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 100% calc(var(--slot-h) * 4), 100% var(--slot-h);
}
.room::before { content: ""; position: absolute; inset: 0; background: var(--rc); opacity: .07; pointer-events: none; }
.day.weekend .room::before { opacity: .03; }
.day.holi .room { background-color: rgba(140,95,85,.04); }
.nowline { position: absolute; left: 0; right: 0; height: 2px; background: var(--bm-gold-deep); z-index: 4; pointer-events: none; box-shadow: 0 0 6px rgba(184,149,79,.8); }
.nowline::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bm-gold-deep); }

/* Termin-Karten */
.appt {
  position: absolute; left: 2px; right: 2px; border-radius: 10px; padding: 3px 6px 4px; overflow: hidden; cursor: grab;
  background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 70%, #fff) 0%, var(--rc) 100%);
  border: 1px solid color-mix(in srgb, var(--rc) 70%, #4a4a4a);
  border-left: 4px solid color-mix(in srgb, var(--rc) 55%, #303038);
  box-shadow: 0 2px 4px rgba(48,48,56,.10), 0 8px 18px rgba(48,48,56,.10), inset 0 1px 0 rgba(255,255,255,.7);
  font-size: 12px; line-height: 1.25; color: #26262c; z-index: 2;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
  user-select: none; touch-action: none;
}
.appt:hover { transform: translateY(-1px) scale(1.01); box-shadow: 0 6px 10px rgba(48,48,56,.14), 0 16px 30px rgba(48,48,56,.16); z-index: 3; }
.appt.dragging { opacity: .85; cursor: grabbing; z-index: 20; box-shadow: 0 24px 50px rgba(48,48,56,.35); }
.appt .t { font-weight: 700; font-size: 11px; opacity: .8; }
.appt .n { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt .m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.appt.cancelled { filter: grayscale(.85); opacity: .6; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.4) 0 6px, transparent 6px 12px); }
.appt.cancelled .n { text-decoration: line-through; }
.appt.eg { border-left-color: #5f8f4e; }
.appt .resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.appt .resize::after { content: ""; position: absolute; left: 40%; right: 40%; bottom: 2px; height: 2px; border-radius: 2px; background: rgba(0,0,0,.25); }
.flags { display: flex; gap: 2px; flex-wrap: wrap; margin: 1px 0; }
.flag { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 800; padding: 0 5px; border-radius: 6px; color: #fff; background: var(--fc); box-shadow: 0 1px 2px rgba(0,0,0,.2); line-height: 15px; }
.block {
  position: absolute; left: 0; right: 0; border-radius: 6px; z-index: 1; font-size: 11px; padding: 3px 6px; color: #5c574b; cursor: pointer; overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(240,235,228,.95) 0 8px, rgba(226,219,205,.95) 8px 16px);
  border: 1px dashed rgba(92,87,75,.35);
}
.block.Geschlossen { background: repeating-linear-gradient(135deg, rgba(60,60,68,.16) 0 8px, rgba(60,60,68,.08) 8px 16px); }
.block.Urlaub { background: repeating-linear-gradient(135deg, rgba(197,164,103,.25) 0 8px, rgba(197,164,103,.12) 8px 16px); }
.block b { display: block; }
.ghost { position: absolute; left: 2px; right: 2px; background: rgba(129,150,115,.18); border: 2px dashed var(--bm-green); border-radius: 10px; pointer-events: none; z-index: 1; font-size: 11px; padding: 2px 6px; color: var(--bm-green-deep); font-weight: 700; display: none; }
.room:hover .ghost { display: block; }

/* Wochenansicht: breitere Spalten (horizontal scrollbar), nur das Wichtigste im Block */
.cal.week { --room-min: 0px; }  /* Woche passt immer in die Breite; mit Sa/So werden Spalten schmäler */
.cal.week.d7 .appt .t { display: none; }
.cal.week.d7 .appt .n { font-size: 11.5px; }
.cal.week .appt { padding: 2px 5px; }
.cal.week .appt .t { font-size: 10.5px; }
.cal.week .appt .n { font-size: 12.5px; }
.cal.week .appt:not(.tall) .m { display: none; }
.cal.week .appt .m.staff { display: none; }

/* ---------- Karten / Listen */
.card { background: var(--card); border-radius: var(--bm-radius); box-shadow: var(--bm-shadow); padding: 20px 24px; margin-bottom: 18px; }
table.list { width: 100%; border-collapse: separate; border-spacing: 0; }
table.list th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; background: var(--card); }
table.list td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list tr:hover td { background: rgba(232,240,226,.5); }
.roomdot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; margin-right: 6px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); }
.free { display: inline-block; width: 30px; height: 24px; border-radius: 8px; cursor: pointer; border: 0; color: #fff; font-weight: 800; box-shadow: 0 2px 4px rgba(0,0,0,.12); }
.busy { color: #bbb; }
.muted { color: var(--muted); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; background: var(--bm-green-mist); color: var(--bm-green-deep); }
.pill.gold { background: rgba(197,164,103,.2); color: #7a5d22; }
.pill.red { background: #f6dfdb; color: #8f3a31; }
.month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.mday { background: var(--card); border-radius: 14px; min-height: 112px; padding: 8px 10px; box-shadow: 0 4px 14px rgba(48,48,56,.07); text-decoration: none; color: var(--ink); transition: all .18s var(--ease); display: block; }
.mday:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(48,48,56,.12); }
.mday.out { opacity: .45; }
.mday.today { box-shadow: 0 0 0 2px var(--bm-gold), 0 10px 24px rgba(197,164,103,.25); }
.mday .num { font-family: var(--serif); font-size: 22px; }
.mbar { display: flex; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.mbar span { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; }

/* ---------- Dialog */
.modal-bg { position: fixed; inset: 0; background: rgba(40,42,38,.22); backdrop-filter: blur(1px); display: none; z-index: 100; align-items: flex-start; justify-content: center; overflow: auto; padding: 4vh 12px; }
.modal-bg.open { display: flex; animation: fade .18s var(--ease); }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.modal { position: relative; background: var(--card); width: min(940px, 100%); border-radius: var(--bm-radius); box-shadow: 0 40px 100px rgba(30,30,36,.35); overflow: hidden; animation: pop .22s var(--ease); }
@keyframes pop { from { transform: translateY(14px) scale(.98); opacity: 0 } to { transform: none; opacity: 1 } }
.modal header { display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: linear-gradient(135deg, var(--bm-green-mist), #f6f1e4); border-bottom: 1px solid var(--line-strong); }
.modal header h2 { margin: 0; font-size: 26px; flex: 1; }
/* Verschiebbare Dialoge: kein abdunkelnder Hintergrund, Kalender bleibt sichtbar, klickbar und scrollbar */
.modal-bg.float { background: transparent; backdrop-filter: none; pointer-events: none; padding: 0; overflow: visible; }
.modal-bg.float .modal { pointer-events: auto; position: fixed; left: 50%; top: 4vh; width: min(940px, calc(100vw - 16px));
  max-height: calc(100vh - 16px); overflow: auto; overscroll-behavior: contain; box-shadow: 0 24px 70px rgba(30,30,36,.38), 0 0 0 1px rgba(48,48,56,.12); }
.modal-bg.float#blockModal .modal { width: min(620px, calc(100vw - 16px)); }
.modal-bg.float .modal header { position: sticky; top: 0; z-index: 3; cursor: move; touch-action: none; user-select: none; }
.modal-bg.float .modal.moving { opacity: .93; transition: none; }
.modal-bg.float .modal.moving header { cursor: grabbing; }
.modal .grip { font-size: 20px; color: var(--muted); cursor: move; line-height: 1; }
.hint.slotwarn { display: block; border-left: 4px solid #c0392b; background: #fdecea; }
.slotwarn > b { color: #8e2a20; font-size: 15px; }
.slotwarn .sugg { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#btnSave:disabled { opacity: .45; cursor: not-allowed; }
.slotghost { position: absolute; left: 3px; right: 3px; z-index: 4; border: 2px dashed var(--bm-green-deep); background: rgba(129,150,115,.28);
  border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--bm-green-deep); padding: 2px 6px; pointer-events: none; overflow: hidden; }
.slotghost.bad { border-color: #c0392b; background: rgba(192,57,43,.18); color: #8e2a20; }
.flash { animation: slotflash .7s var(--ease); }
@keyframes slotflash { 0% { box-shadow: 0 0 0 0 rgba(197,164,103,.9); } 100% { box-shadow: 0 0 0 10px rgba(197,164,103,0); } }
.modal .x { font-size: 26px; border: 0; background: transparent; cursor: pointer; color: var(--muted); }
.modal .body { padding: 16px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; }
.modal footer { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line); background: #fbf9f4; flex-wrap: wrap; }
.field label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: #fff; font: inherit; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--bm-green); box-shadow: 0 0 0 3px rgba(129,150,115,.22); }
.field textarea { min-height: 104px; resize: vertical; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.span2 { grid-column: 1 / -1; }
.req::after { content: " *"; color: var(--bm-gold-deep); }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { border: 1px solid var(--line-strong); background: #fff; padding: 9px 14px; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 14px; transition: all .15s var(--ease); }
.seg button.on { box-shadow: 0 0 0 2px var(--bm-anthracite) inset, 0 6px 14px rgba(48,48,56,.15); transform: translateY(-1px); }
.flagbtn { border: 1px solid var(--line-strong); background: #fff; padding: 8px 12px; border-radius: 12px; cursor: pointer; font-weight: 800; transition: all .15s var(--ease); }
.flagbtn.on { color: #fff; background: var(--fc); border-color: transparent; box-shadow: 0 6px 14px rgba(48,48,56,.2); }
.flagbtn small { font-weight: 500; }
.hint { padding: 10px 14px; border-radius: 12px; background: rgba(197,164,103,.16); border: 1px solid rgba(197,164,103,.45); color: #6e5420; display: flex; align-items: center; gap: 10px; }
.hint.warn { background: #f8e3df; border-color: #e7b5ad; color: #8f3a31; }
.err { color: #9b3b33; font-weight: 600; }
details.hist summary { cursor: pointer; font-weight: 600; color: var(--bm-green-deep); list-style: none; padding: 6px 12px; border-radius: 999px; background: var(--bm-green-mist); display: inline-block; }
details.hist[open] .histlist { display: block; }
.histlist { position: absolute; bottom: 62px; left: 24px; background: #fff; border-radius: 14px; box-shadow: var(--bm-shadow); padding: 10px 14px; width: min(560px, 90%); font-size: 13px; z-index: 5; }
.histlist div { padding: 6px 0; border-bottom: 1px solid var(--line); }
.histlist div:last-child { border-bottom: 0; }
.custhits { background: #fff; border-radius: 12px; box-shadow: var(--bm-shadow); margin-top: 4px; max-height: 220px; overflow: auto; }
.custhits a { display: block; padding: 8px 12px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.custhits a:hover { background: var(--bm-green-mist); }
.kartei { font-size: 13px; background: #faf8f2; border-radius: 12px; padding: 8px 12px; }

/* ---------- Toasts (nie blockierend) */
#toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 300; max-width: 360px; }
.toast { background: linear-gradient(180deg, #fffdf8, #f7f2e6); border-radius: 16px; box-shadow: 0 18px 40px rgba(30,30,36,.25); padding: 12px 16px; border-left: 5px solid var(--bm-gold); animation: pop .25s var(--ease); font-size: 14px; }
.toast .h { font-family: var(--serif); font-size: 19px; font-weight: 700; }
.toast .acts { display: flex; gap: 6px; margin-top: 8px; }
.toast.error { border-left-color: #b5483f; }
.toast.ok { border-left-color: var(--bm-green); }

/* ---------- Login / Sperre */
.login { min-height: 100vh; display: grid; place-items: center; }
.login .card { width: min(440px, 92vw); text-align: center; padding: 34px; }
.login h1 { font-size: 40px; margin: 0; color: var(--bm-green-deep); }
.login .gold-line { width: 60px; height: 2px; background: var(--bm-gold); margin: 10px auto 18px; }
.userpick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0; }
.userpick label { border: 1px solid var(--line-strong); border-radius: 14px; padding: 12px; cursor: pointer; background: #fff; transition: all .15s; }
.userpick input { display: none; }
.userpick input:checked + span { color: var(--bm-green-deep); font-weight: 700; }
.userpick label:has(input:checked) { box-shadow: 0 0 0 2px var(--bm-gold); }
.userpick.lead { margin-bottom: 6px; }
.userpick.team { grid-template-columns: repeat(3, 1fr); margin-top: 6px; margin-bottom: 18px; }
.userpick label.chef { border-color: var(--bm-gold); background: linear-gradient(135deg, #fffaf0, #f6ecd6); }
.userpick label.chef span { color: var(--bm-gold-deep); font-weight: 700; }
.userpick label.chef span::before { content: "✦ "; color: var(--bm-gold); }
.wizsteps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 14px; counter-reset: s; }
.wizsteps li { flex: 1; text-align: center; padding: 6px; border-radius: 10px; background: var(--bm-sand); color: var(--muted); font-size: 13px; counter-increment: s; }
.wizsteps li::before { content: counter(s) ". "; }
.wizsteps li.on { background: var(--bm-green-mist); color: var(--bm-green-deep); font-weight: 700; }
.fingerprint { font-size: 54px; color: var(--bm-gold-deep); filter: drop-shadow(0 6px 12px rgba(184,149,79,.4)); }
@media print { .topbar, .toolbar, #toasts { display: none } }

/* ---------- Tages-Abgrenzung, Wechselfarben, aktiver Tag */
.timecol { border-right: 3px solid var(--bm-green-deep); }
.day.alt .dayhead { background: linear-gradient(180deg, #f6f0e6, #ece3d4); }
.day.alt .daybody { background: rgba(240, 235, 228, .65); }
.day:not(.alt) .daybody { background: #fffdf9; }
.day.today .dayhead { background: linear-gradient(180deg, #fff6df, #f1e2c0); box-shadow: inset 0 4px 0 var(--bm-gold); }
.day.active .dayhead { background: linear-gradient(180deg, #d7e3cc, #b9cba9); box-shadow: inset 0 -2px 0 var(--bm-green-deep); }
.day.active.today .dayhead { box-shadow: inset 0 4px 0 var(--bm-gold), inset 0 -2px 0 var(--bm-green-deep); }
.day.active .daybody { background: rgba(129, 150, 115, .16); }
.day.active .dname b { color: var(--bm-green-deep); }
.day.active { box-shadow: 0 0 0 2px var(--bm-green-deep) inset; }
.mday.alt { background: linear-gradient(180deg, #f8f3ea, #efe7d9); }
.mday.active { background: linear-gradient(180deg, #d7e3cc, #c3d4b4); box-shadow: 0 0 0 2px var(--bm-green-deep); }

/* ---------- Dialog verschieben: gesamte Kopfzeile ist Griff (Titel, ⠿, freie Fläche) */
.modal-bg.float .modal > header, .modal-bg.float .modal > header h2, .modal-bg.float .modal > header .muted,
.modal-bg.float .modal > header .grip { cursor: move; user-select: none; -webkit-user-select: none; touch-action: none; }
.modal-bg.float .modal > header .x { cursor: pointer; }
.modal .grip { font-size: 26px; color: var(--bm-green-deep); opacity: .75; padding: 0 2px; }
.modal-bg.float .modal > header:hover .grip { opacity: 1; }
html.bm-dragging, html.bm-dragging * { cursor: move !important; user-select: none !important; }

/* ---------- Behandlung (Zonen-Chips) + Preis */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; padding: 5px 8px; border: 1px solid var(--line-strong);
  border-radius: 12px; background: #fff; cursor: text; }
.chips input { border: 0 !important; outline: 0; flex: 1; min-width: 110px; padding: 4px !important; box-shadow: none !important; background: transparent; text-transform: uppercase; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bm-green-mist); border: 1px solid var(--bm-light-green); border-radius: 999px;
  padding: 2px 4px 2px 10px; font-size: 13px; }
.chip b { color: var(--bm-green-deep); }
.chipx { border: 0; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted); padding: 0 4px; }
.chipx:hover { color: #b5483f; }
.zonehits { display: none; position: absolute; z-index: 20; background: #fff; border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12); min-width: 320px; max-width: 460px; overflow: hidden; }
.field { position: relative; }
.zonehits a { display: block; padding: 6px 12px; color: inherit; text-decoration: none; font-size: 14px; }
.zonehits a.sel, .zonehits a:hover { background: var(--bm-green-mist); }
input.deviate { border-color: #c0392b !important; background: #fdecea !important; }
#priceReasonBox textarea { margin-top: 4px; }

/* ---------- Finger-Bestätigung / Notzugang (unauffällig) */
.fp-big { font-size: 84px; line-height: 1; }
.tinylink { font-size: 11px; color: var(--muted); text-decoration: underline; opacity: .8; }
.tinylink:hover { opacity: 1; }
.stepalt, .nzbox { margin-top: 10px; padding: 10px; border: 1px dashed var(--line-strong); border-radius: 12px; text-align: left; }
.testmode-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #8e2a20; margin-bottom: 6px; font-weight: 700; }
input.secret-native { -webkit-text-security: disc; }

/* ---------- Einpassen ins Fenster (Woche/Tag/Monat/Agenda/Verfügbar): 100dvh, keine Seiten-Scrollbar.
   Der Kalender füllt den Bereich unter Kopf- und Werkzeugleiste in Breite UND Höhe; die Stundenhöhe rechnet app.js
   (fitCal) aus der verfügbaren Höhe. Nur unter der Mindest-Slot-Höhe scrollt der Kalender intern (Kopf bleibt sticky). */
html:has(body.fit) { height: 100%; overflow: hidden; }
body.fit { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
body.fit > .topbar { flex: none; position: relative; }
body.fit > main.wrap { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 12px 22px 10px; overflow: auto; }
body.fit > main.wrap > .toolbar { flex: none; margin-bottom: 10px; }
body.fit .cal { flex: 1 1 0; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; }
body.fit .month { flex: 1 1 0; min-height: 0; overflow: auto; align-content: stretch; }
body.fit .mday { min-height: 0; overflow: hidden; }
.offhours { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(48,48,56,.055) 0 6px, transparent 6px 12px); border-top: 1px dashed rgba(70,95,64,.25); }
/* Termintexte je nach tatsächlicher Kartenhöhe (fitCal setzt l1–l4) */
.cal .appt.l1 .m, .cal .appt.l2 .m, .cal .appt.l1 .flags { display: none; }
.cal.week .appt.l3 .m:not(.staff), .cal.week .appt.l4 .m { display: block; }
.cal .appt.wide.l3 .n, .cal .appt.wide.l4 .n { white-space: normal; overflow-wrap: break-word; hyphens: auto; }
.cal .appt.wide.l4 .m { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* ---------- Kopfzeile kompakt: seltener genutzte Menüpunkte unter „Mehr ▾“ (app.js fitNav) */
.brand { flex: none; }
.search { flex: 1 1 260px; min-width: 220px; }
.topnav { flex: 0 1 auto; min-width: 0; overflow: hidden; gap: 2px; }
.topnav a { white-space: nowrap; padding: 8px 10px; }
.userchip, .btn-leave { flex: none; }
.more { display: none; position: relative; flex: none; }
.more summary { list-style: none; cursor: pointer; color: #e9e4d6; padding: 8px 12px; border-radius: 999px; font-size: 14px; white-space: nowrap; }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover, .more[open] summary { background: rgba(255,255,255,.12); }
.moremenu { position: absolute; right: 0; top: 40px; min-width: 230px; background: var(--card); border-radius: 14px; box-shadow: var(--bm-shadow); padding: 6px; z-index: 60; display: flex; flex-direction: column; }
.moremenu a { color: var(--ink); text-decoration: none; padding: 9px 12px; border-radius: 10px; font-size: 14px; white-space: nowrap; }
.moremenu a:hover { background: var(--bm-green-mist); }
.moremenu a:not(.opt):not(.opt2) { display: none; }
.topbar.c1 .more, .topbar.c2 .more { display: block; }
.topbar.c1 .topnav a.opt, .topbar.c2 .topnav a.opt, .topbar.c2 .topnav a.opt2 { display: none; }
.topbar:not(.c2) .moremenu a.opt2 { display: none; }
.topbar.c2 .btn-leave { padding: 10px 14px; font-size: 14px; }

/* Standby: alle Namen wie auf der Login-Seite, zuletzt angemeldete Person dezent markiert */
.userpick label { position: relative; }
.userpick label.last { border-style: dashed; }
.userpick .lasttag { position: absolute; left: 0; right: 0; bottom: 1px; font-size: 9.5px; line-height: 11px; color: var(--muted); font-weight: 400; white-space: nowrap; text-align: center; }

/* ---------- 2026-11-01: Terminfenster – Anmerkung wächst mit (Punkt 15), wichtiger Hinweis (12), Zeitzugabe (21),
   Karteiblatt mit Notizen/Anhängen (11, 13, 18), Duplikat-/Konfliktmeldung (17, 20) */
.modal .rcol { display: flex; flex-direction: column; min-width: 0; }
.modal .rcol .notefield { flex: 1 1 auto; display: flex; flex-direction: column; }
.modal .rcol .notefield textarea { flex: 1 1 auto; min-height: 104px; resize: vertical; }
.importantbox { display: block; font-weight: 700; font-size: 15px; border-left: 5px solid #c0392b; }
.importantbox .lbl { text-transform: uppercase; font-size: 11px; letter-spacing: .08em; margin-right: 6px; }
.extrarow { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.extrarow .on { background: var(--bm-gold); color: #fff; border-color: transparent; }
.extrabox { display: block; }
.extrabox .seg button.on { background: var(--bm-gold); color: #fff; }
.clipbtn { font-size: 18px; padding: 6px 12px; }
.kartei { display: block; }
.kartei .ktabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.kartei .ktabs button { border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; padding: 4px 12px; cursor: pointer; font-weight: 600; font-size: 13px; }
.kartei .ktabs button.on { background: var(--bm-green-deep); color: #fff; border-color: transparent; }
.kartei .kpane { margin-top: 6px; }
.kartei table { width: 100%; border-collapse: collapse; }
.kartei td, .kartei th { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.kartei th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kartei .kform { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.kartei .kform input, .kartei .kform textarea { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line-strong); flex: 1; min-width: 90px; }
.kartei .knote { padding: 5px 0; border-bottom: 1px solid var(--line); white-space: pre-wrap; }
.kartei .kprev { color: var(--ink); }
.appt .warnmark { font-size: 11px; font-weight: 800; color: #fff; background: #c0392b; border-radius: 6px; padding: 0 5px; margin: 1px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.appt.haswarn { box-shadow: inset 0 0 0 2px #c0392b; }
.appt .xtra { font-size: 10.5px; font-weight: 800; color: #7a5a17; }
.dupwarn b { color: #8e2a20; }
.slotwarn .sugghead { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #8f3a31; margin-top: 6px; font-weight: 700; }
.slotwarn .swap { font-size: 13px; color: #5a3a10; }
.custedit .row { margin-top: 8px; }

/* Menüknopf „Kalender“ (Punkt 19) – wird nur bei sehr schmalem Bildschirm zum Symbol */
.topnav a.navcal { font-weight: 600; }
.topbar.c3 .navcal .lbl { display: none; }
.moremenu a.navcal { display: none !important; }

/* 📎-Box (Folge-Update 02.11.): sauberer Rahmen, Textfeld nie breiter als die Box, ca. 3 Zeilen, nur vertikal vergrößerbar */
#clipBox { display: block; min-width: 0; max-width: 100%; border: 1px solid var(--line-strong); border-radius: 14px; background: #fbf9f4; padding: 12px 14px; }
#clipBox .cliphead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#clipBox .cliphead .x { border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; }
#clipBox textarea#clipText { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin: 8px 0 0;
  min-height: calc(3 * 1.45em + 22px) !important; height: calc(3 * 1.45em + 22px); max-height: 60vh; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: #fff; font: inherit; line-height: 1.45; color: var(--ink); resize: vertical; }
#clipBox textarea#clipText:focus { outline: none; border-color: var(--bm-green); box-shadow: 0 0 0 3px rgba(129,150,115,.22); }
#clipBox .clipfile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; min-width: 0; }
#clipBox .clipfile label.btn { cursor: pointer; margin: 0; }
#clipBox .clipfname { font-size: 13px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#clipBox .clipfname.has { color: var(--ink); font-weight: 600; }
#clipBox .cliphint { margin-top: 8px; font-size: 13px; color: #6e5420; }
#clipBox .clipfoot { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.clipbtn.pending { background: var(--bm-gold); color: #fff; border-color: transparent; }
/* Rückfrage „Änderungen verwerfen?“ beim Schließen */
/* immer mitten im Fenster sichtbar – auch wenn der Dialog verschoben/gescrollt ist */
.modal footer .discardask { position: fixed; left: 50%; top: 38vh; transform: translateX(-50%); z-index: 400; width: min(440px, calc(100vw - 24px));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 18px; border-radius: 14px; background: #fdf3f1; border: 1px solid #e7b5ad; color: #8f3a31;
  box-shadow: 0 18px 50px rgba(30,30,36,.35); }
.modal footer .discardask b { flex: 1 0 100%; font-size: 15px; margin-bottom: 4px; }

/* Wichtiger Hinweis mehrzeilig (Folge-Update 02.11., Punkt E) */
.importantbox { white-space: pre-wrap; overflow-wrap: anywhere; }
.importantbox .lbl { white-space: normal; }
textarea.autogrow { min-height: calc(2 * 1.45em + 22px) !important; line-height: 1.45; resize: vertical; overflow-y: hidden; max-height: 60vh; }
.appt .warnmark { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* F (02.11.2026): zarte senkrechte Trennlinie zwischen den Zimmer-Spalten (Tagesstrich bleibt 3px) */
.daybody .room + .room::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 1px; background: rgba(0,0,0,.08); pointer-events: none; z-index: 0; }

/* Mein Zugang (Folge-Update 02.11., Punkt H) */
.usermenu { position: relative; }
.usermenu > summary { list-style: none; cursor: pointer; padding: 2px 2px; border-radius: 10px; white-space: nowrap; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover, .usermenu[open] > summary { background: rgba(255,255,255,.12); }
.usermenu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 120; min-width: 290px; background: var(--card); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(30,30,36,.28); padding: 6px; text-align: left; }
.usermenu-list a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 14px; }
.usermenu-list a:hover { background: var(--bm-green-mist); }
.acct { max-width: 640px; }
.pwgrid { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; align-items: center; }
.pwgrid label { font-size: 13px; color: var(--muted); }
.pwrow { display: flex; gap: 6px; align-items: center; min-width: 0; }
.pwrow input { flex: 1; min-width: 0; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: #fff; font: inherit; }
.pwrow input:focus { outline: none; border-color: var(--bm-green); box-shadow: 0 0 0 3px rgba(129,150,115,.22); }
@media (max-width: 560px) { .pwgrid { grid-template-columns: 1fr; } }

/* J) alle mehrzeiligen Textfelder: wachsen mit (app.js autoGrow), nur senkrecht vergrößerbar */
textarea { resize: vertical; max-height: 60vh; overflow-y: hidden; box-sizing: border-box; line-height: 1.45; }
.kartei .kform textarea { flex: 1 1 100%; font: inherit; min-height: calc(1.45em + 16px); }
.kartei .kform textarea#kNewNote { min-height: calc(2 * 1.45em + 16px); }
#trForm textarea, #cnText { width: 100%; font: inherit; }
.usermenu .caret { color: #d9d3c2; font-size: 11px; margin-left: 2px; } .usermenu > summary b { display: inline; }