/**
 * LEANTO Belegungskalender – leanto.css
 * Montserrat 300/400/600/700
 * Mobile-first, responsive
 */

/* ══════════════════════════════════════════════════════
   CSS-VARIABLEN
══════════════════════════════════════════════════════ */
:root {
  --bg:           #F2F1EF;
  --surface:      #FFFFFF;
  --surface2:     #F7F6F4;
  --border:       #E0DEDA;
  --border-mid:   #C8C5C0;

  --ink:          #1C1B19;
  --ink-mid:      #4A4843;
  --ink-soft:     #7A7874;
  --ink-faint:    #AEABA5;

  --hdr:          #3A3835;
  --hdr-sub:      #2E2C2A;

  --free:         #1A7A43;
  --free-bg:      #D0EBDA;
  --free-bd:      #7EC89A;

  --booked:       #B5200D;
  --booked-bg:    #F9D4D0;
  --booked-bd:    #E08078;

  --reserved:     #A06800;
  --reserved-bg:  #FDEAB8;
  --reserved-bd:  #D4AA50;

  --closed:       #525050;
  --closed-bg:    #E2E0DB;
  --closed-bd:    #AAAAAA;

  --overlap:      #E07B00;

  --r:            12px;
  --sh:           0 2px 16px rgba(0,0,0,.08);
  --sh-lg:        0 6px 32px rgba(0,0,0,.14);
}

/* ══════════════════════════════════════════════════════
   RESET & BASIS
══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Montserrat', sans-serif;
  background:  var(--bg);
  color:       var(--ink);
  min-height:  100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* iOS-Zoom-Prävention: font-size >= 16px in allen Inputs */
input, textarea, select {
  font-family: 'Montserrat', sans-serif;
  font-size:   16px;
}
@media (min-width: 900px) {
  input, textarea, select { font-size: 13px; }
  input.finp              { font-size: 14px; }
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

/* ══════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════ */
.site-header {
  background:  var(--hdr);
  height:      56px;
  padding:     0 14px;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  position:    sticky;
  top:         0;
  z-index:     500;
  box-shadow:  0 2px 10px rgba(0,0,0,.22);
}

.header-left {
  display:     flex;
  align-items: center;
  gap:         10px;
  min-width:   0;
}

.logo-link { display: flex; align-items: center; flex-shrink: 0; }
.logo-svg  { height: 18px; width: auto; display: block; }

.obj-select {
  font-size:    11px;
  font-weight:  400;
  color:        rgba(255,255,255,.8);
  background:   rgba(255,255,255,.1);
  border:       1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  padding:      5px 24px 5px 10px;
  appearance:   none;
  -webkit-appearance: none;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='rgba(255,255,255,.45)'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 8px center;
  cursor:       pointer;
  max-width:    180px;
  min-width:    120px;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}
.obj-select option  { background: #3A3835; }
.obj-single {
  font-size:   12px;
  font-weight: 400;
  color:       rgba(255,255,255,.65);
  letter-spacing: .03em;
}

.admin-badge {
  font-size:     9px;
  font-weight:   700;
  letter-spacing: .12em;
  background:    rgba(255,255,255,.15);
  color:         rgba(255,255,255,.8);
  padding:       3px 8px;
  border-radius: 4px;
  border:        1px solid rgba(255,255,255,.2);
}

/* Desktop Nav */
.nav-desk {
  display:     flex;
  align-items: center;
  gap:         4px;
}
.nav-btn {
  font-size:     11px;
  font-weight:   600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding:       6px 11px;
  border-radius: 6px;
  border:        none;
  transition:    all .15s;
  white-space:   nowrap;
}
.ng {
  background: rgba(255,255,255,.08);
  color:      rgba(255,255,255,.65);
  border:     1px solid rgba(255,255,255,.12);
}
.ng:hover, .ng.active {
  background: rgba(255,255,255,.2);
  color:      #fff;
}
.nw {
  background: #fff;
  color:      var(--hdr);
}
.nw:hover { background: #e8e6e3; }

/* Hamburger */
.hamburger {
  display:         none;
  flex-direction:  column;
  gap:             5px;
  padding:         5px;
  background:      none;
  border:          none;
}
.hamburger span {
  display:       block;
  width:         21px;
  height:        2px;
  background:    #fff;
  border-radius: 2px;
  transition:    all .25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Menu */
.mobile-menu {
  display:    none;
  position:   fixed;
  top:        56px;
  left:       0;
  right:      0;
  background: var(--hdr);
  z-index:    499;
  border-top: 1px solid var(--hdr-sub);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  padding:    6px 0 10px;
}
.mobile-menu.open { display: block; }
.mob-btn {
  display:       block;
  width:         100%;
  font-size:     13px;
  font-weight:   600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding:       13px 18px;
  background:    none;
  border:        none;
  color:         rgba(255,255,255,.72);
  text-align:    left;
  transition:    background .15s;
}
.mob-btn:hover, .mob-btn.active { background: rgba(255,255,255,.1); color: #fff; }
.mob-btn.logout {
  color:      rgba(255,130,130,.8);
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 14px;
}

@media (max-width: 700px) {
  .nav-desk   { display: none; }
  .hamburger  { display: flex; }
}

/* ══════════════════════════════════════════════════════
   GREETING BAR
══════════════════════════════════════════════════════ */
.greeting-bar {
  background:   linear-gradient(135deg, var(--hdr), #4A4643);
  padding:      11px 14px;
  border-bottom: 1px solid var(--hdr-sub);
}
.greeting-text {
  font-size:   14px;
  font-weight: 300;
  color:       rgba(255,255,255,.9);
}
.greeting-text strong { font-weight: 700; }

/* ══════════════════════════════════════════════════════
   TOOLBAR (Jahr-Auswahl + Legende)
══════════════════════════════════════════════════════ */
.toolbar {
  background:   var(--surface);
  border-bottom: 1px solid var(--border);
  padding:      9px 12px;
  display:      flex;
  align-items:  center;
  gap:          8px;
  flex-wrap:    wrap;
}
.yr-pills { display: flex; gap: 4px; }
.yr-btn {
  font-size:     11px;
  font-weight:   600;
  letter-spacing: .05em;
  padding:       5px 13px;
  border-radius: 40px;
  border:        1.5px solid var(--border-mid);
  background:    transparent;
  color:         var(--ink-soft);
  transition:    all .15s;
}
.yr-btn.active { background: var(--hdr); color: #fff; border-color: var(--hdr); }
.yr-btn:hover:not(.active) { border-color: var(--ink-mid); color: var(--ink-mid); }

.legend      { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.leg-item    { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--ink-soft); }
.leg-sq      { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; border: 1.5px solid transparent; }
.leg-ft      { font-size: 9px; font-weight: 700; color: var(--ink-soft); letter-spacing: .04em; }
@media (max-width: 480px) {
  .legend { display: none; }
  .legend.open { display: flex; flex-wrap: wrap; gap: 9px; padding: 8px 0 4px; }
  .legend-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-soft);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    background: none;
    border: none;
  }
  .legend-toggle-arrow { transition: transform .2s; display: inline-block; }
  .legend-toggle.open .legend-toggle-arrow { transform: rotate(90deg); }
}
@media (min-width: 481px) { .legend-toggle { display: none; } }

/* ══════════════════════════════════════════════════════
   KALENDER
══════════════════════════════════════════════════════ */
.cal-wrap   { padding: 12px 10px 0; position: relative; }
.cal-loading {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         40px;
  color:           var(--ink-soft);
  font-size:       13px;
  font-weight:     300;
}
.cal-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   18px; /* Extra gap für Label-Space */
}
@media (min-width: 560px)  { .cal-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 860px)  { .cal-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1160px) { .cal-grid { grid-template-columns: repeat(4,1fr); } }

/* Monatskarte */
.month-card {
  background:    var(--surface);
  border-radius: var(--r);
  border:        1px solid var(--border);
  box-shadow:    var(--sh);
  overflow:      visible; /* Labels dürfen über Rand */
  position:      relative;
}
.month-inner {
  overflow:      hidden;
  border-radius: var(--r);
}
.month-head {
  background:    var(--hdr);
  padding:       9px 12px 8px;
  display:       flex;
  align-items:   baseline;
  gap:           6px;
  border-radius: var(--r) var(--r) 0 0;
}
.month-name {
  font-size:     12px;
  font-weight:   700;
  color:         #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.month-year {
  font-size:   10px;
  font-weight: 300;
  color:       rgba(255,255,255,.32);
  letter-spacing: .1em;
}

/* Wochentage-Zeile */
.weekday-row {
  display:               grid;
  grid-template-columns: repeat(7,1fr);
  background:            var(--hdr-sub);
}
.weekday {
  font-size:     8.5px;
  font-weight:   600;
  text-align:    center;
  padding:       4px 0;
  color:         rgba(255,255,255,.32);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.weekday.weekend { color: rgba(255,200,100,.36); }

/* Tage-Grid */
.days-grid {
  display:               grid;
  grid-template-columns: repeat(7,1fr);
}

/* Tageszelle */
.day {
  position:        relative;
  aspect-ratio:    1;
  min-height:      44px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  font-size:       12px;
  cursor:          pointer;
  border:          .5px solid rgba(0,0,0,.04);
  transition:      filter .12s;
  user-select:     none;
  overflow:        hidden;
  gap:             1px;
}
.day:hover:not(.empty):not(.past) { filter: brightness(.88); }
.day.empty   { background: var(--bg); cursor: default; }
.day.past    { opacity: .26; cursor: default; }
.day.free    { background: var(--free-bg);    color: var(--free); }
.day.booked  { background: var(--booked-bg);  color: var(--booked); }
.day.reserved{ background: var(--reserved-bg);color: var(--reserved); }
.day.closed  { background: var(--closed-bg);  color: var(--closed); }

/* Split-Tage */
.day.split-booked-free    { background: linear-gradient(135deg,var(--booked-bg) 50%,var(--free-bg) 50%);    color:var(--ink-mid); }
.day.split-free-booked    { background: linear-gradient(315deg,var(--booked-bg) 50%,var(--free-bg) 50%);     color:var(--ink-mid); }
.day.split-free-reserved  { background: linear-gradient(315deg,var(--reserved-bg) 50%,var(--free-bg) 50%);   color:var(--ink-mid); }
.day.split-free-closed    { background: linear-gradient(315deg,var(--closed-bg) 50%,var(--free-bg) 50%);     color:var(--ink-mid); }
.day.split-reserved-free  { background: linear-gradient(135deg,var(--reserved-bg) 50%,var(--free-bg) 50%);  color:var(--ink-mid); }
.day.split-closed-free    { background: linear-gradient(135deg,var(--closed-bg) 50%,var(--free-bg) 50%);    color:var(--ink-mid); }
.day.split-booked-reserved{ background: linear-gradient(135deg,var(--booked-bg) 50%,var(--reserved-bg) 50%);color:var(--ink-mid); }
.day.split-reserved-booked{ background: linear-gradient(135deg,var(--reserved-bg) 50%,var(--booked-bg) 50%);color:var(--ink-mid); }
.day.split-closed-booked  { background: linear-gradient(135deg,var(--closed-bg) 50%,var(--booked-bg) 50%);  color:var(--ink-mid); }

/* Heute-Ring */
.day.today .day-num,
.day.today .today-ring {
  background:    var(--hdr);
  color:         #fff;
  border-radius: 50%;
  width:         22px;
  height:        22px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-size:     11px;
}
.day.sel-arr { outline: 2.5px solid var(--ink);     outline-offset: -2px; z-index: 2; }
.day.sel-dep { outline: 2.5px solid var(--ink-mid); outline-offset: -2px; z-index: 2; }
.day.in-range{ filter: brightness(.86); }

.day-num  { font-size: 12px; line-height: 1; font-weight: 400; }
.ft-badge {
  font-size:     7px;
  font-weight:   700;
  letter-spacing: .05em;
  color:         inherit;
  opacity:       .65;
  text-transform: uppercase;
  line-height:   1;
}

/* Anreise/Abreise-Label (farbiges Band oben in der Zelle) */
.day-label {
  position:   absolute;
  top:        0; left: 0; right: 0;
  color:      #fff;
  font-size:  7px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  padding:    3px 2px 2px;
  line-height: 1;
  pointer-events: none;
}
.day-label.arr { background: var(--hdr); }
.day-label.dep { background: var(--ink-mid); }
.day.has-label { justify-content: flex-end; padding-bottom: 5px; }

/* ══════════════════════════════════════════════════════
   BUCHUNGSFORMULAR-PANEL (Kalender)
══════════════════════════════════════════════════════ */
.booking-form-panel {
  display:       none;
  margin:        18px 10px 0;
  background:    var(--surface);
  border-radius: var(--r);
  border:        1px solid var(--border);
  box-shadow:    var(--sh-lg);
  overflow:      hidden;
}
.booking-form-panel.open { display: block; }
.bfp-head {
  background: var(--hdr);
  padding:    13px 16px 11px;
  display:    flex;
  align-items: center;
  justify-content: space-between;
}
.bfp-head h2 {
  font-size:     13px;
  font-weight:   700;
  color:         #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bfp-dates {
  font-size:  11px;
  font-weight: 300;
  color:      rgba(255,255,255,.55);
  margin-top: 2px;
}
.bfp-close {
  background: none;
  border:     none;
  color:      rgba(255,255,255,.5);
  font-size:  18px;
  line-height: 1;
  padding:    0 2px;
}
.bfp-close:hover { color: #fff; }
.bfp-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap:     13px;
}

/* ══════════════════════════════════════════════════════
   FORMULARE (gemeinsam)
══════════════════════════════════════════════════════ */
.form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
}
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

.form-label {
  font-size:     10px;
  font-weight:   700;
  color:         var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 4px;
}
.form-label-opt {
  font-weight:   300;
  text-transform: none;
  letter-spacing: 0;
  font-size:     10px;
}
.form-input, .form-select, .form-textarea {
  width:         100%;
  background:    var(--surface2);
  border:        1.5px solid var(--border);
  border-radius: 7px;
  padding:       9px 11px;
  color:         var(--ink);
  outline:       none;
  transition:    border-color .15s, background .15s;
  appearance:    none;
  -webkit-appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--ink-mid);
  background:   #fff;
}
.form-textarea {
  resize:      none;
  height:      72px;
  line-height: 1.5;
}
.form-error {
  background:    var(--booked-bg);
  border:        1px solid var(--booked-bd);
  border-radius: 7px;
  padding:       9px 12px;
  font-size:     12px;
  color:         var(--booked);
}

/* finp / finp2 (Login-Seite) */
.finp, .finp2 {
  width:         100%;
  background:    var(--surface2);
  border:        1.5px solid var(--border);
  border-radius: 8px;
  padding:       10px 12px;
  color:         var(--ink);
  outline:       none;
  transition:    border-color .15s;
  appearance:    none;
  -webkit-appearance: none;
}
.finp:focus, .finp2:focus { border-color: var(--ink-mid); background: #fff; }
.fgrp  { display: flex; flex-direction: column; gap: 13px; margin-bottom: 16px; }
.flbl  {
  font-size:     10px;
  font-weight:   700;
  color:         var(--ink-soft);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.mfa-hint {
  font-size:   11px;
  font-weight: 300;
  color:       var(--ink-faint);
  margin-top:  3px;
}
.form-note {
  font-size:   11px;
  font-weight: 300;
  color:       var(--ink-soft);
  line-height: 1.6;
  padding:     8px 12px;
  background:  var(--surface2);
  border-radius: 6px;
  border:      1px solid var(--border);
}

/* Kategorie-Pills */
.cat-grid {
  display:               grid;
  grid-template-columns: repeat(3,1fr);
  gap:                   6px;
}
.cat-pill {
  border:        1.5px solid var(--border);
  border-radius: 7px;
  padding:       8px 4px;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           3px;
  cursor:        pointer;
  font-size:     10.5px;
  font-weight:   600;
  letter-spacing: .04em;
  color:         var(--ink-mid);
  transition:    all .14s;
}
.cat-pill input { display: none; }
.cat-dot { width: 9px; height: 9px; border-radius: 3px; }
.cat-pill.on-belegt      { border-color: var(--booked);   background: var(--booked-bg);   color: var(--booked); }
.cat-pill.on-reserviert  { border-color: var(--reserved); background: var(--reserved-bg); color: var(--reserved); }
.cat-pill.on-geschlossen { border-color: var(--closed);   background: var(--closed-bg);   color: var(--closed); }

/* Buttons */
.btn-save {
  font-size:     12px;
  font-weight:   700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background:    var(--hdr);
  color:         #fff;
  border:        none;
  border-radius: 7px;
  padding:       12px;
  width:         100%;
  transition:    opacity .15s, transform .1s;
}
.btn-save:hover  { opacity: .85; }
.btn-save:active { transform: scale(.98); }
.btn-save:disabled { opacity: .5; cursor: default; }

.btn-p {
  font-size:     12px;
  font-weight:   700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background:    var(--hdr);
  color:         #fff;
  border:        none;
  border-radius: 8px;
  padding:       13px;
  width:         100%;
  transition:    opacity .15s;
}
.btn-p:hover    { opacity: .85; }
.btn-p:disabled { opacity: .5; cursor: default; }

/* ══════════════════════════════════════════════════════
   LOGIN-TABS
══════════════════════════════════════════════════════ */
.ltabs {
  display:       flex;
  background:    var(--surface2);
  border-radius: 8px;
  padding:       3px;
  margin-bottom: 18px;
  border:        1px solid var(--border);
}
.ltab {
  flex:          1;
  font-size:     11px;
  font-weight:   600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding:       7px;
  border:        none;
  border-radius: 6px;
  background:    transparent;
  color:         var(--ink-soft);
  transition:    all .15s;
}
.ltab.active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.1); }

/* ══════════════════════════════════════════════════════
   SECTION-LAYOUT
══════════════════════════════════════════════════════ */
.sec {
  padding:    14px 12px 40px;
  max-width:  1400px;
  margin:     0 auto;
}
.sec-head {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  margin-bottom:   14px;
  flex-wrap:       wrap;
  gap:             8px;
}
.sec-title { font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.sec-sub   { font-size: 11px; font-weight: 300; color: var(--ink-soft); margin-top: 2px; }

.btn-add {
  font-size:     11px;
  font-weight:   700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background:    var(--hdr);
  color:         #fff;
  border:        none;
  border-radius: 7px;
  padding:       9px 15px;
  white-space:   nowrap;
  transition:    opacity .15s;
}
.btn-add:hover { opacity: .85; }

/* ══════════════════════════════════════════════════════
   NEW BOOKING PANEL (Verwaltung)
══════════════════════════════════════════════════════ */
.new-panel {
  display:       none;
  background:    var(--surface);
  border-radius: var(--r);
  border:        1px solid var(--border);
  box-shadow:    var(--sh-lg);
  overflow:      hidden;
  margin-bottom: 14px;
}
.new-panel.open { display: block; }
.np-head {
  background: var(--hdr);
  padding:    12px 16px 10px;
}
.np-head h3 {
  font-size:     13px;
  font-weight:   700;
  color:         #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.np-body {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap:     12px;
}

/* ══════════════════════════════════════════════════════
   AKTIONSLEISTE (Filter + E-Mail)
══════════════════════════════════════════════════════ */
.action-bar {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r);
  padding:       11px 14px;
  margin-bottom: 14px;
  display:       flex;
  align-items:   center;
  gap:           8px;
  flex-wrap:     wrap;
}
.ab-label {
  font-size:     10px;
  font-weight:   700;
  color:         var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space:   nowrap;
}
.ab-input {
  background:    var(--surface2);
  border:        1.5px solid var(--border);
  border-radius: 7px;
  padding:       7px 10px;
  color:         var(--ink);
  outline:       none;
  transition:    border-color .15s;
}
.ab-input:focus { border-color: var(--ink-mid); }
.ab-sep      { color: var(--ink-faint); font-size: 12px; }
.ab-divider  { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }
.btn-notify {
  font-size:     11px;
  font-weight:   700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background:    var(--hdr);
  color:         #fff;
  border:        none;
  border-radius: 7px;
  padding:       9px 14px;
  white-space:   nowrap;
  transition:    opacity .15s;
  display:       flex;
  align-items:   center;
  gap:           5px;
}
.btn-notify:hover { opacity: .85; }
.btn-reset {
  font-size:     10px;
  font-weight:   600;
  background:    transparent;
  border:        1.5px solid var(--border-mid);
  color:         var(--ink-soft);
  border-radius: 6px;
  padding:       7px 11px;
  transition:    all .14s;
}
.btn-reset:hover { border-color: var(--ink-mid); color: var(--ink); }

/* Benachrichtigungen Filter */
.notif-filter {
  display:       flex;
  align-items:   center;
  gap:           8px;
  flex-wrap:     wrap;
  padding:       11px 14px;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 14px;
}
.notif-count  { font-size: 11px; font-weight: 300; color: var(--ink-soft); margin-left: auto; }

/* ══════════════════════════════════════════════════════
   EMPFÄNGER-PANEL
══════════════════════════════════════════════════════ */
.recipient-panel {
  display:       none;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r);
  box-shadow:    var(--sh-lg);
  overflow:      hidden;
  margin-bottom: 14px;
}
.recipient-panel.open { display: block; }
.rp-head {
  background: var(--hdr);
  padding:    12px 16px;
  display:    flex;
  align-items: center;
  justify-content: space-between;
}
.rp-head h3 {
  font-size:     13px;
  font-weight:   700;
  color:         #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rp-close { background: none; border: none; color: rgba(255,255,255,.5); font-size: 18px; line-height: 1; }
.rp-close:hover { color: #fff; }
.rp-body  { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.rp-note  { font-size: 11px; font-weight: 300; color: var(--ink-soft); line-height: 1.6; }

.rp-recipient {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 13px;
  border:        1.5px solid var(--border);
  border-radius: 8px;
  cursor:        pointer;
  transition:    all .14s;
  background:    var(--surface2);
}
.rp-recipient:hover { border-color: var(--border-mid); background: #fff; }
.rp-recipient.selected { border-color: var(--hdr); background: var(--surface); }
.rp-cb   { accent-color: var(--hdr); width: 16px; height: 16px; flex-shrink: 0; }
.rp-info { flex: 1; }
.rp-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.rp-email{ font-size: 11px; font-weight: 300; color: var(--ink-soft); margin-top: 1px; }
.rp-filter-note { font-size: 10px; font-weight: 300; color: var(--ink-faint); margin-top: 2px; }

.rp-role {
  font-size:     9.5px;
  font-weight:   700;
  padding:       2px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink:   0;
}
.rp-role.reinigung  { background: var(--free-bg);     color: var(--free); }
.rp-role.technik    { background: var(--reserved-bg); color: var(--reserved); }
.rp-role.eigentumer { background: var(--closed-bg);   color: var(--closed); }

.rp-preview {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       10px 13px;
}
.rp-preview-title {
  font-size:     9.5px;
  font-weight:   700;
  color:         var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.rp-preview-item { font-size: 11.5px; color: var(--ink-mid); line-height: 1.8; }
.rp-actions { display: flex; gap: 10px; padding-top: 4px; border-top: 1px solid var(--border); margin-top: 4px; }
.rp-send-btn {
  font-size:     12px;
  font-weight:   700;
  letter-spacing: .07em;
  text-transform: uppercase;
  background:    var(--hdr);
  color:         #fff;
  border:        none;
  border-radius: 7px;
  padding:       11px 22px;
  transition:    opacity .15s;
  flex:          1;
}
.rp-send-btn:hover  { opacity: .85; }
.rp-cancel-btn {
  font-size:     12px;
  font-weight:   600;
  background:    transparent;
  border:        1.5px solid var(--border-mid);
  color:         var(--ink-soft);
  border-radius: 7px;
  padding:       11px 18px;
  transition:    all .14s;
}
.rp-cancel-btn:hover { border-color: var(--ink-mid); color: var(--ink); }

/* ══════════════════════════════════════════════════════
   BUCHUNGS-CARDS (Mobile)
══════════════════════════════════════════════════════ */
.booking-cards { display: flex; flex-direction: column; gap: 12px; }

.booking-card {
  background:    var(--surface);
  border-radius: var(--r);
  border:        1px solid var(--border);
  box-shadow:    var(--sh);
  overflow:      hidden;
}
.booking-card.overlap { border-left: 3px solid var(--overlap); }

.bcard-head {
  padding:         11px 13px;
  background:      var(--surface2);
  border-bottom:   1px solid var(--border);
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             8px;
}
.bcard-obj   { font-size: 13px; font-weight: 700; color: var(--ink); }
.bcard-dates { font-size: 12px; color: var(--ink-mid); margin-top: 2px; }
.bcard-meta  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.bcard-pers  { font-size: 11px; color: var(--ink-soft); }
.bcard-actions { display: flex; gap: 5px; flex-shrink: 0; }

.bcard-body { padding: 12px 13px; display: flex; flex-direction: column; gap: 11px; }
.bcard-section-label {
  font-size:     9.5px;
  font-weight:   700;
  color:         var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 5px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}
.bcard-two-col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px;
}
@media (max-width: 440px) { .bcard-two-col { grid-template-columns: 1fr; } }
.bcard-field-label {
  font-size:     9px;
  font-weight:   700;
  color:         var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 3px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}
.bcard-field-val { font-size: 12px; color: var(--ink-mid); line-height: 1.5; }

/* ══════════════════════════════════════════════════════
   BUCHUNGS-TABELLE (Desktop)
══════════════════════════════════════════════════════ */
.booking-table-wrap {
  display:    none;
  background: var(--surface);
  border-radius: var(--r);
  border:     1px solid var(--border);
  box-shadow: var(--sh);
  overflow:   hidden;
}
@media (min-width: 900px) {
  .booking-cards      { display: none; }
  .booking-table-wrap { display: block; }
}

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.booking-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       12px;
  min-width:       900px;
}
.booking-table thead th {
  background:     var(--surface2);
  color:          var(--ink-faint);
  font-size:      9px;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding:        8px 10px;
  text-align:     left;
  border-bottom:  2px solid var(--border);
  white-space:    nowrap;
}
.col-select { width: 36px; }
.booking-table td {
  padding:       9px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color:         var(--ink);
}
.tbl-main td { font-size: 12px; }
.tbl-main.ol-row { border-left: 3px solid var(--overlap); }
.tbl-sub td {
  background:    #FAFAF8;
  font-size:     11px;
  color:         var(--ink-mid);
  padding:       7px 10px 7px 20px;
}
.tbl-sub-header td {
  background:   #F3F2EF;
  padding:      5px 10px 4px 20px;
  border-bottom: none;
}
.tbl-spacer td {
  padding:       5px;
  background:    var(--bg);
  border-bottom: 2px solid var(--border);
}
.booking-table tr:last-child td { border-bottom: none; }
.tbl-bold  { font-weight: 600; }
.tbl-empty, .tbl-loading {
  text-align:  center;
  padding:     28px;
  color:       var(--ink-faint);
  font-size:   12px;
  font-weight: 300;
}
.tbl-val { font-size: 11px; color: var(--ink-mid); }
.tbl-inp {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 5px;
  padding:       4px 8px;
  color:         var(--ink);
  outline:       none;
  min-width:     100px;
  transition:    border-color .15s;
}
.tbl-inp:focus { border-color: var(--ink-mid); }
.tbl-sub-label {
  font-size:     9px;
  font-weight:   700;
  color:         var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 3px;
}

/* Text-Clamp */
.txt-clamp {
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  font-size:          12px;
  color:              var(--ink-mid);
  line-height:        1.5;
}
.txt-clamp.expanded { display: block; -webkit-line-clamp: unset; }
.txt-more {
  font-size:   10.5px;
  font-weight: 600;
  color:       var(--hdr);
  cursor:      pointer;
  margin-top:  2px;
  display:     inline-block;
}
.txt-more:hover { text-decoration: underline; }

/* Tags */
.tag {
  display:       inline-block;
  font-size:     9px;
  font-weight:   700;
  padding:       2px 7px;
  border-radius: 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space:   nowrap;
}
.tag-belegt      { background: var(--booked-bg);   color: var(--booked); }
.tag-reserviert  { background: var(--reserved-bg); color: var(--reserved); }
.tag-geschlossen { background: var(--closed-bg);   color: var(--closed); }
.tag-overlap     { background: #FDE8B8;            color: #C06000; font-size: 8.5px; }

/* Action-Buttons in Tabelle */
.t-btn {
  font-size:     10px;
  font-weight:   600;
  letter-spacing: .04em;
  padding:       4px 9px;
  border-radius: 5px;
  border:        1.5px solid var(--border);
  background:    transparent;
  color:         var(--ink-mid);
  transition:    all .12s;
  white-space:   nowrap;
}
.t-btn:hover { border-color: var(--ink-mid); color: var(--ink); }
.t-btn.del   { border-color: var(--booked-bd); color: var(--booked); }
.t-btn.del:hover { background: var(--booked-bg); }

/* ══════════════════════════════════════════════════════
   NACHRICHTEN (Benachrichtigungen)
══════════════════════════════════════════════════════ */
.komm-card {
  background:    var(--surface);
  border-radius: var(--r);
  border:        1px solid var(--border);
  box-shadow:    var(--sh);
  overflow:      hidden;
  margin-bottom: 18px;
}
.komm-head {
  background: var(--hdr);
  padding:    11px 14px;
}
.komm-head h3 {
  font-size:     11px;
  font-weight:   700;
  color:         #fff;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.komm-body { padding: 14px; display: flex; flex-direction: column; gap: 11px; }

.msg-card {
  background:    var(--surface);
  border-radius: var(--r);
  border:        1px solid var(--border);
  box-shadow:    var(--sh);
  overflow:      hidden;
  margin-bottom: 10px;
}
.msg-card.auto { border-left: 3px solid var(--free); }
.msg-head {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  padding:         9px 13px;
  background:      var(--surface2);
  border-bottom:   1px solid var(--border);
  gap:             6px;
  flex-wrap:       wrap;
}
.msg-to   { font-size: 11px; font-weight: 700; color: var(--ink); }
.msg-to span { font-weight: 400; color: var(--ink-soft); }
.msg-time { font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
.auto-badge {
  display:       inline-block;
  font-size:     9px;
  font-weight:   700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding:       2px 7px;
  border-radius: 4px;
  background:    var(--free-bg);
  color:         var(--free);
  margin:        7px 13px 2px;
}
.msg-subj { font-size: 12px; font-weight: 600; padding: 8px 13px 3px; }
.msg-body {
  font-size:   11.5px;
  font-weight: 300;
  color:       var(--ink-mid);
  padding:     0 13px 11px;
  line-height: 1.6;
}
.notif-hidden-bar {
  text-align:    center;
  padding:       14px;
  color:         var(--ink-faint);
  font-size:     12px;
  font-weight:   300;
  background:    var(--surface);
  border-radius: var(--r);
  border:        1px solid var(--border);
  margin-top:    4px;
}

/* ══════════════════════════════════════════════════════
   ADMIN-BEREICH
══════════════════════════════════════════════════════ */
.admin-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  gap:                   12px;
  margin-bottom:         20px;
}
.admin-card {
  background:    var(--surface);
  border-radius: var(--r);
  border:        1px solid var(--border);
  box-shadow:    var(--sh);
  overflow:      hidden;
}
.admin-card-head {
  background: var(--hdr);
  padding:    9px 13px;
  display:    flex;
  align-items: center;
  justify-content: space-between;
}
.admin-card-title {
  font-size:     10.5px;
  font-weight:   700;
  color:         #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.btn-add-sm {
  font-size:     10px;
  font-weight:   700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background:    rgba(255,255,255,.15);
  color:         #fff;
  border:        1px solid rgba(255,255,255,.2);
  border-radius: 5px;
  padding:       4px 9px;
  transition:    background .15s;
}
.btn-add-sm:hover { background: rgba(255,255,255,.25); }

.admin-list { padding: 0; }
.admin-item {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  padding:         10px 13px;
  border-bottom:   1px solid var(--border);
  gap:             8px;
}
.admin-item:last-child { border-bottom: none; }
.admin-item-info  { flex: 1; min-width: 0; }
.admin-item-name  { font-weight: 600; font-size: 12.5px; color: var(--ink); }
.admin-item-meta  { font-size: 11px; font-weight: 300; color: var(--ink-soft); margin-top: 2px; }
.admin-item-status { font-size: 9.5px; font-weight: 700; margin-top: 3px; letter-spacing: .04em; }
.admin-item-status.active   { color: var(--free); }
.admin-item-status.inactive { color: var(--booked); }
.admin-empty { padding: 14px 13px; font-size: 12px; color: var(--ink-faint); font-style: italic; }

.admin-item-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.obj-tag {
  font-size:     9px;
  font-weight:   600;
  padding:       2px 7px;
  border-radius: 4px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  color:         var(--ink-mid);
}
.admin-item-actions { display: flex; gap: 5px; flex-shrink: 0; }
.a-btn {
  font-size:     10px;
  font-weight:   600;
  padding:       4px 9px;
  border-radius: 5px;
  border:        1.5px solid var(--border);
  background:    transparent;
  color:         var(--ink-soft);
  transition:    all .12s;
  white-space:   nowrap;
}
.a-btn:hover { border-color: var(--ink-mid); color: var(--ink); }
.a-btn.del   { border-color: var(--booked-bd); color: var(--booked); }
.a-btn.del:hover { background: var(--booked-bg); }

.role-badge {
  font-size:     9px;
  font-weight:   700;
  padding:       2px 7px;
  border-radius: 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.role-badge.eigentumer { background: var(--free-bg);   color: var(--free); }
.role-badge.verwalter  { background: var(--reserved-bg); color: var(--reserved); }
.pw-badge {
  font-size:     9px;
  font-weight:   600;
  padding:       2px 6px;
  border-radius: 4px;
  background:    var(--reserved-bg);
  color:         var(--reserved);
}
.inactive-badge {
  font-size:     9px;
  font-weight:   600;
  padding:       2px 6px;
  border-radius: 4px;
  background:    var(--closed-bg);
  color:         var(--closed);
}

/* Checkbox-Gruppe in Admin-Modals */
.checkbox-group { display: flex; flex-direction: column; gap: 6px; }
.checkbox-label {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   13px;
  color:       var(--ink-mid);
  cursor:      pointer;
}
.checkbox-label input { accent-color: var(--hdr); width: 15px; height: 15px; }

/* ══════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════ */
.modal-overlay {
  position:         fixed;
  inset:            0;
  background:       rgba(0,0,0,.45);
  z-index:          1000;
  display:          none;
  align-items:      center;
  justify-content:  center;
  padding:          18px;
}
.modal-overlay.open { display: flex; }
.modal {
  background:    var(--surface);
  border-radius: 14px;
  box-shadow:    var(--sh-lg);
  width:         100%;
  max-width:     440px;
  overflow:      hidden;
  animation:     modalPop .2s ease;
  max-height:    90vh;
  overflow-y:    auto;
}
@keyframes modalPop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-head { background: var(--hdr); padding: 14px 18px; }
.modal-head h3 {
  font-size:     13px;
  font-weight:   700;
  color:         #fff;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.modal-body { padding: 18px; }
.modal-body p { font-size: 13px; color: var(--ink-mid); line-height: 1.6; margin-bottom: 10px; }
.modal-body strong { color: var(--ink); font-weight: 600; }
.modal-recipients  { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.modal-recipient-row {
  font-size:     12px;
  color:         var(--ink-mid);
  padding:       6px 10px;
  background:    var(--surface2);
  border-radius: 6px;
  border:        1px solid var(--border);
}
.rr-name  { font-weight: 600; color: var(--ink); }
.rr-email { font-size: 10px; color: var(--ink-faint); margin-left: 6px; }
.modal-list-label {
  font-size:     9.5px;
  font-weight:   700;
  color:         var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.modal-list {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       10px 13px;
  font-size:     11.5px;
  color:         var(--ink-mid);
  line-height:   1.9;
  margin-top:    8px;
}
.modal-copy-note { font-size: 10.5px; color: var(--ink-faint); margin-top: 8px; font-weight: 300; }
.modal-actions {
  display:         flex;
  gap:             8px;
  padding:         14px 18px;
  border-top:      1px solid var(--border);
  justify-content: flex-end;
}
.modal-cancel {
  font-size:     11px;
  font-weight:   600;
  background:    transparent;
  border:        1.5px solid var(--border-mid);
  color:         var(--ink-soft);
  border-radius: 7px;
  padding:       9px 18px;
  transition:    all .14s;
}
.modal-cancel:hover { border-color: var(--ink-mid); color: var(--ink); }
.modal-confirm {
  font-size:     11px;
  font-weight:   700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background:    var(--hdr);
  color:         #fff;
  border:        none;
  border-radius: 7px;
  padding:       9px 20px;
  transition:    opacity .15s;
}
.modal-confirm:hover    { opacity: .85; }
.modal-confirm:disabled { opacity: .5; }

/* ══════════════════════════════════════════════════════
   BOTTOM SHEET (Mobile)
══════════════════════════════════════════════════════ */
.sheet-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.4);
  z-index:         800;
  display:         none;
  align-items:     flex-end;
  justify-content: center;
}
.sheet-overlay.open { display: flex; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  background:    var(--surface);
  border-radius: 20px 20px 0 0;
  width:         100%;
  max-width:     600px;
  padding-bottom: max(env(safe-area-inset-bottom), 16px);
  box-shadow:    0 -4px 32px rgba(0,0,0,.18);
  animation:     slideUp .25s ease;
  max-height:    85vh;
  overflow-y:    auto;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (min-width: 600px) {
  .sheet-overlay { align-items: center; padding: 20px; }
  .sheet { border-radius: 16px; max-height: 70vh; }
}

.sheet-handle {
  width:         40px;
  height:        4px;
  background:    var(--border-mid);
  border-radius: 2px;
  margin:        12px auto 0;
}
.sheet-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 18px 10px;
}
.sheet-title  { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: .03em; }
.sheet-x      { background: none; border: none; font-size: 20px; color: var(--ink-soft); }
.sheet-x:hover{ color: var(--ink); }
.sheet-label  { font-size: 10px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; padding: 0 18px; margin-bottom: 6px; }

.sheet-field {
  display:       block;
  width:         calc(100% - 36px);
  margin:        0 18px;
  background:    var(--surface2);
  border:        1.5px solid var(--border);
  border-radius: 10px;
  padding:       13px 15px;
  color:         var(--ink);
  font-size:     16px; /* Kein iOS-Zoom */
  line-height:   1.5;
  resize:        none;
  min-height:    120px;
  outline:       none;
}
.sheet-field:focus { border-color: var(--ink-mid); background: #fff; }
.sheet-char {
  font-size:   11px;
  color:       var(--ink-faint);
  text-align:  right;
  padding:     4px 18px 0;
}
.sheet-actions { display: flex; gap: 10px; padding: 14px 18px 10px; }
.sheet-save {
  font-size:     13px;
  font-weight:   700;
  letter-spacing: .07em;
  text-transform: uppercase;
  background:    var(--hdr);
  color:         #fff;
  border:        none;
  border-radius: 9px;
  padding:       13px;
  flex:          1;
  transition:    opacity .15s;
}
.sheet-save:hover { opacity: .85; }
.sheet-cancel {
  font-size:     13px;
  font-weight:   600;
  background:    transparent;
  border:        1.5px solid var(--border-mid);
  color:         var(--ink-soft);
  border-radius: 9px;
  padding:       13px 20px;
  transition:    all .14s;
}
.sheet-cancel:hover { border-color: var(--ink-mid); color: var(--ink); }

/* ══════════════════════════════════════════════════════
   SPINNER & LOADING
══════════════════════════════════════════════════════ */
.spinner {
  width:         18px;
  height:        18px;
  border:        2px solid var(--border);
  border-top:    2px solid var(--hdr);
  border-radius: 50%;
  animation:     spin .7s linear infinite;
  flex-shrink:   0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         32px;
  color:           var(--ink-soft);
  font-size:       12px;
  font-weight:     300;
}
.empty-state {
  text-align:  center;
  padding:     28px;
  color:       var(--ink-faint);
  font-size:   12px;
  font-weight: 300;
  font-style:  italic;
}

/* ══════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════ */
.toast {
  position:    fixed;
  bottom:      18px;
  left:        50%;
  transform:   translateX(-50%) translateY(80px);
  background:  var(--hdr);
  color:       #fff;
  font-size:   12px;
  font-weight: 600;
  letter-spacing: .05em;
  padding:     10px 20px;
  border-radius: 40px;
  opacity:     0;
  transition:  all .3s;
  z-index:     9999;
  pointer-events: none;
  white-space: nowrap;
  max-width:   calc(100vw - 28px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.toast-success { background: var(--free); }
.toast.toast-error   { background: var(--booked); }
.toast.toast-info    { background: var(--hdr); }


/* Benachrichtigungen Toggle */
.notif-toggle {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   11px;
  font-weight: 600;
  color:       var(--ink-mid);
  cursor:      pointer;
  white-space: nowrap;
}
.notif-toggle input {
  accent-color: var(--hdr);
  width:        15px;
  height:       15px;
  cursor:       pointer;
}

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
footer {
  background:   var(--surface);
  border-top:   1px solid var(--border);
  padding:      11px 14px;
  display:      flex;
  align-items:  center;
  justify-content: space-between;
  flex-wrap:    wrap;
  gap:          6px;
}
.footer-txt { font-size: 10px; color: var(--ink-faint); letter-spacing: .04em; }

/* Split-Tage: Anreise (links frei, rechts belegt) und Abreise (links belegt, rechts frei) */
.split-free-belegt { background: linear-gradient(to left, var(--booked-bg) 50%, var(--free-bg) 50%); }
.split-free-reserviert { background: linear-gradient(to right, var(--free-bg) 50%, var(--reserved-bg) 50%); }
.split-free-geschlossen { background: linear-gradient(to right, var(--free-bg) 50%, var(--closed-bg) 50%); }
.split-belegt-free { background: linear-gradient(to right, var(--booked-bg) 50%, var(--free-bg) 50%); }
.split-reserviert-free { background: linear-gradient(to right, var(--reserved-bg) 50%, var(--free-bg) 50%); }
.split-geschlossen-free { background: linear-gradient(to right, var(--closed-bg) 50%, var(--free-bg) 50%); }
.split-belegt-reserviert { background: linear-gradient(to right, var(--booked-bg) 50%, var(--reserved-bg) 50%); }
.split-belegt-geschlossen { background: linear-gradient(to right, var(--booked-bg) 50%, var(--closed-bg) 50%); }
.split-reserviert-belegt { background: linear-gradient(to right, var(--reserved-bg) 50%, var(--booked-bg) 50%); }
.split-geschlossen-belegt { background: linear-gradient(to right, var(--closed-bg) 50%, var(--booked-bg) 50%); }