/* ============================================================
   BookingPilot – Design System
   ============================================================ */

:root {
  /* Brand (aus dem Logo abgeleitet) */
  --brand-900: #0f4c26;
  --brand-800: #15803d;
  --brand-700: #16a34a;
  --brand-600: #22c55e;
  --brand-500: #0c5a49;
  --brand-100: #dcfce7;
  --brand-50:  #f0fdf4;

  --accent:    #f59e0b;
  --accent-soft: #fef3c7;

  /* Neutrale Oberflächen (warme Grautöne) */
  --bg:        #fafaf9;
  --surface:   #ffffff;
  --surface-2: #f5f5f4;
  --border:    #e7e5e0;
  --border-strong: #d6d3ce;
  --muted-bg:  #f9f9f7;

  /* Text */
  --text:      #0c1510;
  --text-2:    #3f4b44;
  --text-3:    #6b7168;
  --text-4:    #a1a49d;

  /* Sidebar (dunkles Grün-Schwarz) */
  --side-bg:   #0c1a12;
  --side-bg-2: #13271a;
  --side-text: #e7ece8;
  --side-text-muted: #7a8a82;
  --side-border: #1d3224;

  /* Status */
  --success: #15803d;
  --success-soft: #dcfce7;
  --warn:    #b45309;
  --warn-soft: #fef3c7;
  --danger:  #b91c1c;
  --danger-soft: #fee2e2;
  --info:    #1d4ed8;
  --info-soft: #dbeafe;

  /* Channel-Farben */
  --ch-booking: #003580;
  --ch-airbnb:  #ff5a5f;
  --ch-vrbo:    #245ABC;
  --ch-direct:  #15803d;

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(12,21,16,.06);
  --shadow-md: 0 4px 12px -2px rgba(12,21,16,.08), 0 2px 4px rgba(12,21,16,.04);
  --shadow-lg: 0 24px 48px -12px rgba(12,21,16,.18);

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Font */
  --font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: 24px; letter-spacing: -0.02em; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p  { margin: 0; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   App-Layout
   ============================================================ */

.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

/* ------ Sidebar ------ */
.sidebar {
  background: var(--side-bg);
  color: var(--side-text);
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--side-border);
}

.sidebar__brand {
  padding: 2px 2px 14px;
  border-bottom: 1px solid var(--side-border);
  margin-bottom: 16px;
}
.sidebar__logo {
  width: 100%;
  max-width: 100%;
  height: 96px;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #ffffff;
  padding: 8px 10px;
  border-radius: var(--r-md);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--side-text-muted);
  font-weight: 500;
  font-size: 14px;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.nav__item:hover {
  color: var(--side-text);
  background: var(--side-bg-2);
}
.nav__item.is-active {
  background: linear-gradient(135deg, var(--brand-800), var(--brand-700));
  color: white;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.nav__item.is-active .nav__icon { color: white; }
.nav__button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
}
.nav__item--logout {
  margin-top: auto;
  color: #fecaca;
}
.nav__item--logout:hover {
  color: #ffffff;
  background: rgba(185, 28, 28, .18);
}
.nav__icon {
  width: 18px;
  height: 18px;
  color: currentColor;
  flex: none;
}

.sidebar__footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--side-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar__version {
  font-size: 11px;
  color: var(--side-text-muted);
  text-align: center;
  letter-spacing: 0.04em;
}

/* ------ Main-Bereich ------ */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 32px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  gap: 24px;
}
.topbar__title { font-size: 22px; margin-bottom: 2px; }
.topbar__subtitle { color: var(--text-3); font-size: 13px; }
.topbar__right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.content {
  padding: 24px 32px 48px;
  flex: 1;
}

.loading {
  padding: 48px;
  text-align: center;
  color: var(--text-3);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all .15s ease;
  background: transparent;
  color: var(--text);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.btn--primary {
  background: var(--brand-800);
  color: white;
  border-color: var(--brand-800);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--brand-700); border-color: var(--brand-700); }

.btn--secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover { background: var(--surface-2); }

.btn--ghost {
  background: transparent;
  color: var(--side-text-muted);
  border-color: var(--side-border);
}
.btn--ghost:hover {
  background: var(--side-bg-2);
  color: var(--side-text);
}

.btn--danger {
  color: var(--danger);
  border-color: var(--danger-soft);
  background: var(--danger-soft);
}

.btn--sm { padding: 6px 10px; font-size: 12px; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
}
.card--tight { padding: 16px; }

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.card__title { font-size: 14px; font-weight: 600; color: var(--text-2); letter-spacing: 0.01em; }

/* ============================================================
   KPI-Karten
   ============================================================ */
.kpi-grid,
.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--brand-700);
}
.kpi--accent::before { background: var(--accent); }
.kpi--info::before   { background: var(--info); }
.kpi--warn::before   { background: var(--warn); }

.kpi__label {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.kpi__value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
  margin-top: 4px;
}
.kpi__suffix {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 4px;
  font-family: var(--font-ui);
}
.kpi__hint {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

/* ============================================================
   Dashboard-Grid
   ============================================================ */
.dash-row {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}
.dash-row--2 { grid-template-columns: 2fr 1fr; }
.dash-row--3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 1100px) {
  .dash-row--2, .dash-row--3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Charts (pure SVG)
   ============================================================ */
.chart-wrap {
  position: relative;
  width: 100%;
}
.chart-svg { display: block; width: 100%; height: auto; }
.chart-bar { transition: opacity .15s ease; }
.chart-bar:hover { opacity: .8; cursor: pointer; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 12px;
}
.chart-legend__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}

.occ-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
}
.occ-bar__top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.occ-bar__bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.occ-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-700), var(--brand-600));
  border-radius: 999px;
  transition: width .4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   Tabellen
   ============================================================ */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}
.table td {
  /* v1.3.153: bei zu langen Strings (z. B. unentschlüsselte enc:v1:-Werte
     nach Schlüsselwechsel) bricht die Tabelle nicht mehr aus dem Frame */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.table th {
  text-align: left;
  color: var(--text-3);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--muted-bg);
}
.table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--muted-bg); }

/* ============================================================
   Badges & Chips
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  /* v1.3.162: keine Zeilenumbrüche im Badge */
  white-space: nowrap;
  line-height: 1.4;
}
.badge--success  { background: var(--success-soft); color: var(--success); }
.badge--warn     { background: var(--warn-soft); color: var(--warn); }
.badge--danger   { background: var(--danger-soft); color: var(--danger); }
.badge--info     { background: var(--info-soft); color: var(--info); }
.badge--muted    { background: var(--surface-2); color: var(--text-3); }

.channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  border: 1px solid var(--border);
  /* v1.3.159: keine Zeilenumbrüche im Chip */
  white-space: nowrap;
  line-height: 1.4;
}
.channel-chip::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
}
.channel-chip[data-ch="booking.com"]::before { background: var(--ch-booking); }
.channel-chip[data-ch="airbnb"]::before { background: var(--ch-airbnb); }
.channel-chip[data-ch="vrbo"]::before   { background: var(--ch-vrbo); }
.channel-chip[data-ch="direct"]::before { background: var(--ch-direct); }

/* ============================================================
   Forms
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.01em;
}
.input, .select, .textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand-700);
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}
.textarea { resize: vertical; min-height: 80px; font-family: inherit; }
.select { cursor: pointer; }
.field--row { flex-direction: row; align-items: center; gap: 8px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ============================================================
   Modal
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 32px 32px;
  animation: fadeIn .18s ease;
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12,21,16,.48);
  backdrop-filter: blur(3px);
}
.modal__panel {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  animation: slideUp .22s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.modal__close {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-3);
  padding: 6px;
  border-radius: var(--r-sm);
}
.modal__close:hover { background: var(--surface-2); color: var(--text); }
.modal__body {
  padding: 20px 24px 24px;
  overflow-y: auto;
}
.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--text);
  color: white;
  padding: 12px 18px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  z-index: 200;
  animation: slideUp .2s ease;
}
.toast--error { background: var(--danger); }
.toast--success { background: var(--success); }

/* ============================================================
   Property-Karten
   ============================================================ */
.prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.prop-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all .15s ease;
  cursor: pointer;
}
.prop-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.prop-card__img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: var(--surface-2);
}
.prop-card__body { padding: 16px; }
.prop-card__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
.prop-card__desc {
  color: var(--text-3);
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prop-card__stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-2);
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.prop-card__stat { display: flex; flex-direction: column; gap: 2px; }
.prop-card__stat-label { color: var(--text-4); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.prop-card__stat-value { font-family: var(--font-mono); font-weight: 600; }

/* ============================================================
   Kalender (Buchungskalender)
   ============================================================ */
.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.calendar-toolbar__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.calendar-toolbar__month {
  font-size: 18px;
  font-weight: 700;
  min-width: 180px;
  text-align: center;
}
.calendar-toolbar__select {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  color: var(--text);
  font: inherit;
}
.calendar-toolbar__select--month {
  min-width: 210px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.calendar-toolbar__select--month option {
  font-size: 16px;
  font-weight: 400;
}

.calendar-toolbar__view {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.calendar-view-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}

.calendar-view-toggle__btn {
  border: none;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.calendar-view-toggle__btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.calendar-toolbar__select--property {
  min-width: 230px;
  font-weight: 600;
}
.calendar-toolbar__select--placeholder {
  visibility: hidden;
  pointer-events: none;
}


.calendar-toolbar__legend {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--text-3);
  flex-wrap: wrap;
}
.calendar-toolbar__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calendar-new {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  max-height: calc(100vh - 260px);
}

.cal-grid {
  display: grid;
  min-width: max-content;
}

.cal-grid--single-month {
  min-width: 0;
  width: 100%;
  grid-template-columns: repeat(7, minmax(118px, 1fr));
}

.cal-single-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--muted-bg);
}
.cal-single-title strong { font-size: 16px; color: var(--text); }
.cal-single-title span { font-size: 14px; font-weight: 700; color: var(--text-3); }

.cal-month-weekday {
  padding: 10px 8px;
  text-align: center;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 800;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.cal-grid--single-month .cal-cell {
  min-height: 118px;
  height: 118px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cal-grid--single-month .cal-cell--blank {
  background: #f7f7f4;
  cursor: default;
}

.cal-grid--single-month .cal-cell__guest {
  font-size: 12px;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cal-grid--single-month .cal-cell__guest-meta {
  font-size: 10px;
}


/* --- Kopfzeile --- */
.cal-headcell {
  padding: 8px 4px 10px;
  text-align: center;
  background: var(--muted-bg);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-3);
  position: sticky;
  top: 0;
  z-index: 3;
}
.cal-headcell--left {
  left: 0;
  z-index: 4;
  text-align: left;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--muted-bg);
}
.cal-headcell--weekend { background: #f3f6f3; }
.cal-headcell--today {
  background: var(--brand-100);
  color: var(--brand-900);
}
.cal-headcell--today::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--brand-700);
}
.cal-headcell__wd {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.cal-headcell__day {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
  margin-top: 2px;
}
.cal-headcell--holiday .cal-headcell__day {
  color: var(--danger);
}
.cal-headcell__badges {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 3px;
  height: 4px;
}
.cal-headcell__badges span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: inline-block;
}

.cal-headcell--month-break {
  box-shadow: inset 2px 0 0 var(--border-strong);
}
.cal-headcell__monthtag {
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 4px;
}

/* --- Property-Label-Spalte --- */
.cal-rowlabel {
  padding: 14px 16px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}
.cal-rowlabel strong {
  font-size: 14px;
  line-height: 1.25;
}

/* --- Einzelne Zellen --- */
.cal-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px 4px 6px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background 0.1s ease;
  min-height: 72px;
  position: relative;
  user-select: none;
  overflow: hidden;
}
.cal-cell:hover {
  background: var(--brand-50);
}
.cal-cell--weekend {
  background: #f7faf7;
}
.cal-cell--weekend:hover {
  background: var(--brand-50);
}
.cal-cell--past {
  opacity: 0.55;
}
.cal-cell--past:hover {
  opacity: 0.75;
}
.cal-cell--today-col {
  box-shadow: inset 2px 0 0 var(--brand-700);
}

.cal-cell__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  font-family: var(--font-mono);
  padding: 0 2px;
  position: relative;
  z-index: 3;
}
.cal-cell__price {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  text-align: center;
  margin-top: auto;
  padding-bottom: 2px;
}
.cal-cell__price small {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 9px;
  color: var(--text-3);
  margin-left: 1px;
}
.cal-cell__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--danger);
  display: inline-block;
}
.cal-cell__dot--vacation { background: var(--accent); }

/* Ferien: feiner Akzent unten */
.cal-cell--vacation:not(.cal-cell--booked)::after {
  content: '';
  position: absolute;
  bottom: 0; left: 6px; right: 6px;
  height: 2px;
  background: var(--accent);
  border-radius: 999px;
}

/* --- Gebuchte Zellen --- */
.cal-cell--booked {
  color: #111827;
  cursor: pointer;
  min-height: 64px;
  z-index: 1;
  border-right: none;
  border-bottom: none;
}
.cal-cell--booked:hover { filter: brightness(1.01); }
.cal-cell--booked .cal-cell__top { color: rgba(17,24,39,0.78); }
.cal-cell--booked .cal-cell__price { color: #111827; }


.cal-cell__diagline {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='white' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.cal-cell__guest {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  padding: 6px 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
}
.cal-cell__guest-meta {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.92;
  padding: 1px 8px 0;
  font-family: var(--font-mono);
  color: #111827;
}

/* Position innerhalb einer mehrtägigen Buchung */
.cal-cell--pos-start,
.cal-cell--pos-middle,
.cal-cell--pos-end,
.cal-cell--pos-single,
.cal-cell--turnover {
  margin-top: 4px;
  margin-bottom: 4px;
}
.cal-cell--pos-single {
margin-left: 4px;
  margin-right: 4px;
}
.cal-cell--pos-start .cal-cell__top,
.cal-cell--pos-single .cal-cell__top,
.cal-cell--pos-middle .cal-cell__top,
.cal-cell--pos-end .cal-cell__top {
  justify-content: flex-start;
  padding-left: 8px;
}
/* v1.3.179: Opacity-Regel für mittlere/Ende-Zellen entfernt — die weiße Pill
   wird sonst transparent und ist auf dem Smartphone fast unsichtbar. */

/* Freier Abreisetag: diagonal, aber buchbar */
.cal-cell--turnover {
overflow: hidden;
  border-right: none;
  border-bottom: none;
}
.cal-cell--turnover::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--turnover-color);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  pointer-events: none;
}
.cal-cell--turnover > * {
  position: relative;
  z-index: 1;
}
.cal-cell--turnover:hover::before {
  filter: brightness(1.01);
}


/* --- Buchungsdarstellung wie im Referenzbild: volle Zellen + echte An-/Abreise-Diagonalen --- */
.cal-cell--booked,
.cal-cell--turnover {
border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 72px;
}

.cal-cell--booked::before,
.cal-cell--turnover::before,
.cal-cell--split-turnover::before,
.cal-cell--split-turnover::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Normale belegte Tage */
.cal-cell--pos-middle::before,
.cal-cell--pos-single::before {
  background: var(--booking-color);
}

/* Anreisetag: Diagonale, Farbe im unteren/rechten Dreieck */
.cal-cell--pos-start::before {
  background: var(--booking-color);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Abreisetag: leerer Tag, Farbe im oberen/linken Dreieck */
.cal-cell--turnover::before {
  background: var(--turnover-color);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Wechseltag: Abreise oben/links + Anreise unten/rechts */
.cal-cell--split-turnover::before {
  background: var(--departure-color);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.cal-cell--split-turnover::after {
  background: var(--arrival-color);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.cal-cell--booked > *,
.cal-cell--turnover > * {
  position: relative;
  z-index: 1;
}

.cal-cell--pos-start,
.cal-cell--pos-middle,
.cal-cell--pos-single,
.cal-cell--turnover {
margin-top: 0;
  margin-bottom: 0;
}

.cal-cell--pos-start .cal-cell__top,
.cal-cell--pos-middle .cal-cell__top,
.cal-cell--pos-single .cal-cell__top,
.cal-cell--turnover .cal-cell__top {
  justify-content: flex-start;
  padding-left: 6px;
  padding-top: 2px;
  color: rgba(17,24,39,0.88);
}

.cal-cell__guest,
.cal-cell__guest-meta {
  padding-left: 6px;
  padding-right: 6px;
}


.cal-cell__diagline {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='white' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.cal-cell__guest { padding-top: 4px; }
.cal-cell__guest-meta { padding-top: 0; }

/* --- Drag-Auswahl --- */
.cal-cell--selected {
  background: var(--brand-100) !important;
  box-shadow: inset 0 0 0 2px var(--brand-700);
  z-index: 1;
}
.cal-cell--selected .cal-cell__price,
.cal-cell--selected .cal-cell__top {
  color: var(--brand-900);
}

/* --- Tooltip --- */
.cal-tooltip {
  position: fixed;
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px;
  font-size: 12px;
  max-width: 320px;
  min-width: 220px;
  pointer-events: none;
  animation: fadeIn 0.12s ease;
  color: var(--text);
}
.cal-tooltip[hidden] { display: none; }
.cal-tooltip__title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cal-tooltip__sub {
  color: var(--text-3);
  font-size: 12px;
  margin-bottom: 10px;
}
.cal-tooltip__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 3px 0;
  font-size: 12px;
}
.cal-tooltip__label { color: var(--text-3); }
.cal-tooltip__value {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.cal-tooltip__hint {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  color: var(--brand-800);
  font-size: 11px;
  font-style: italic;
}
.cal-tooltip__notes {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--muted-bg);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--text-2);
  font-style: italic;
  border-left: 2px solid var(--border-strong);
}

/* ============================================================
   Channel-Karten
   ============================================================ */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.channel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.channel-card__brand-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.channel-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.channel-card__name { font-size: 16px; font-weight: 700; }
.channel-card__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}
.channel-card__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  margin-bottom: 14px;
  min-height: 36px;
  line-height: 1.35;
}
.channel-card__actions { display: flex; gap: 8px; }

.logs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.log-row {
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--muted-bg);
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 12px;
}
.log-row__when { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; }

/* ============================================================
   Pricing-Kalender
   ============================================================ */
.price-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.price-grid__head {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 0;
  font-weight: 600;
}
.price-cell {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: all .1s ease;
  position: relative;
}
.price-cell:hover { border-color: var(--brand-700); transform: scale(1.02); }
.price-cell--empty { background: transparent; border-color: transparent; cursor: default; }
.price-cell--empty:hover { transform: none; }
.price-cell--weekend { background: var(--brand-50); }
.price-cell--override { background: var(--accent-soft); border-color: var(--accent); }
.price-cell--past { opacity: .4; }
.price-cell__day {
  font-weight: 600;
  color: var(--text-3);
  font-size: 10px;
  margin-bottom: 2px;
}
.price-cell__price {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
}

/* ============================================================
   Utilities
   ============================================================ */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-3);
}
.empty-state__title { color: var(--text); font-weight: 700; margin-bottom: 6px; }

.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap { display: flex; gap: 12px; align-items: center; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.txt-muted { color: var(--text-3); }
.txt-small { font-size: 12px; }
.hidden { display: none !important; }

/* Filterzeile */
.filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
}
.filter-bar .input, .filter-bar .select { width: auto; min-width: 140px; }

/* Scrollbar-Polish (optional) */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }



.field--full { grid-column: 1 / -1; }

.avail-dropdown {
  position: relative;
  width: 100%;
}
.avail-dropdown__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.avail-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  min-height: 50px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label icon" "value icon";
  align-items: center;
  text-align: left;
  cursor: pointer;
}
.avail-input.is-active {
  border-color: var(--brand-700, var(--primary));
  box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}
.avail-input__label { grid-area: label; font-size: 12px; color: var(--muted, var(--text-3)); }
.avail-input__value { grid-area: value; font-weight: 600; color: var(--text); }
.avail-input__icon { grid-area: icon; font-size: 16px; opacity: .7; }
.avail-dropdown__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  width: min(360px, 100%);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(15,23,42,.18);
  padding: 12px;
}
.avail-dropdown__nav {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.avail-dropdown__title { text-align: center; font-weight: 700; }
.avail-nav-btn, .avail-link-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.avail-nav-btn {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: #fff;
}
.avail-nav-btn:disabled { opacity: .35; cursor: default; }
.avail-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.avail-grid--head { margin-bottom: 6px; }
.avail-grid--head span { text-align: center; font-size: 12px; color: var(--muted, var(--text-3)); }
.avail-day {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 400;
  color: var(--text);
}
.avail-day--bookable { font-weight: 800; color: var(--text); }
.avail-day--empty { border: none; background: transparent; }
.avail-day--past, .avail-day--occupied, .avail-day--disabled { color: #b6bfca; cursor: not-allowed; font-weight: 400; opacity: .82; }
.avail-day--occupied { text-decoration: none; }
.avail-day--turnover { background: #fff; }
.avail-day--range { background: var(--brand-50, #f0fdf4); border-color: var(--brand-600, #22c55e); }
.avail-day--checkin, .avail-day--checkout { background: var(--brand-700, var(--primary)); color: #fff; border-color: var(--brand-700, var(--primary)); font-weight: 800; }
.avail-dropdown__footer {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.avail-link-btn { color: var(--brand-700, var(--primary)); font-weight: 600; padding: 4px 0; }
.avail-picker__error { color: #b91c1c; font-size: 13px; padding: 10px; }
@media (max-width: 640px) {
  .avail-dropdown__inputs { grid-template-columns: 1fr; }
  .avail-dropdown__panel { width: 100%; }
}

.avail-dropdown--external .avail-dropdown__panel { top: 0; }


.settings-form { display:flex; flex-direction:column; }
.settings-row-top { align-items:center; padding-top:34px; }
.settings-actions-inline { display:flex; align-items:flex-end; }


.widget-date-display,
.input[readonly] {
  cursor: pointer;
}
.widget-date-display {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  font: inherit;
  color: var(--text);
  background: #fff;
}



.settings-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.settings-nav {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 24px;
}
.settings-nav__item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 14px 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.settings-nav__item:hover {
  border-color: var(--brand-600);
  background: var(--brand-50);
}
.settings-nav__item.is-active {
  border-color: var(--brand-700);
  background: linear-gradient(135deg, var(--brand-50), #ffffff);
  box-shadow: inset 0 0 0 1px rgba(22,163,74,.12);
}
.settings-nav__title {
  display: block;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.settings-nav__desc {
  display: block;
  font-size: 12px;
  color: var(--text-3);
}
.settings-panels {
  min-width: 0;
}
.settings-panel {
  display: none;
}
.settings-panel.is-active {
  display: block;
}
.settings-placeholder-list {
  display: grid;
  gap: 12px;
  padding: 18px 20px 20px;
}
.settings-placeholder-item {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--muted-bg);
  padding: 14px 16px;
}
@media (max-width: 960px) {
  .settings-shell {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    position: static;
  }
}


.settings-section-title {
  margin: 10px 0 12px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

/* ============================================================
   BookingPilot – Premium Login / Startscreen
   ============================================================ */
body.is-login {
  background: #f3f4ef;
  overflow: hidden;
}

[hidden] { display: none !important; }

.login-screen {
  min-height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: minmax(330px, 430px) minmax(0, 1fr);
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 72%, rgba(246, 210, 130, .34), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(17, 96, 76, .08), transparent 30%),
    linear-gradient(115deg, #f7f8f3 0%, #f3f4ee 42%, #eef1eb 100%);
}

.login-card {
  position: relative;
  z-index: 10;
  min-height: calc(100vh - 22px);
  margin: 11px 0 11px 12px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(17, 84, 69, .10);
  border-radius: 12px;
  box-shadow: 0 22px 58px rgba(10, 30, 25, .16), 0 2px 6px rgba(10, 30, 25, .08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(18px);
}

.login-card__inner {
  padding: clamp(34px, 6vh, 70px) clamp(34px, 4vw, 62px) 28px;
  flex: 1;
}

.login-brand {
  display: flex;
  align-items: center;
  margin-bottom: clamp(34px, 6vh, 58px);
}

.login-brand__logo {
  display: block;
  width: min(100%, 285px);
  height: auto;
}

.login-copy { margin-bottom: 35px; }
.login-copy h1 {
  font-size: clamp(28px, 2.5vw, 33px);
  line-height: 1.18;
  letter-spacing: -.045em;
  color: #0b5848;
}
.login-copy p {
  margin-top: 12px;
  color: #8b8f90;
  font-size: 17px;
  font-weight: 500;
}

.login-form { display: flex; flex-direction: column; gap: 22px; }
.login-field { display: flex; flex-direction: column; gap: 8px; }
.login-field > span {
  color: #0b5848;
  font-weight: 800;
  font-size: 13px;
}

.login-input {
  height: 49px;
  display: grid;
  grid-template-columns: 46px 1fr 42px;
  align-items: center;
  background: rgba(255,255,255,.96);
  border: 1px solid #dfe3df;
  border-radius: 8px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.025);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.login-input:focus-within {
  border-color: rgba(12, 89, 73, .45);
  box-shadow: 0 0 0 4px rgba(12, 89, 73, .09), inset 0 1px 1px rgba(0,0,0,.025);
}
.login-input > svg {
  width: 20px;
  height: 20px;
  justify-self: center;
  color: #8c9392;
}
.login-input input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  height: 100%;
  color: #12362f;
  font: 600 14px var(--font-ui);
}
.login-input input::placeholder { color: #a3a9a8; }
.login-input__eye {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: #8c9392;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.login-input__eye svg { width: 21px; height: 21px; }

/* v1.3.200: "Eingeloggt bleiben"-Checkbox */
.login-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 4px;
  font-size: 14px;
  color: #4a4a4a;
  cursor: pointer;
  user-select: none;
}
.login-remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #0c5a49;
  cursor: pointer;
}
.login-remember span { line-height: 1.4; }

.login-submit {
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #176956, #0c5a49);
  color: white;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(7, 75, 60, .24);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.login-submit:hover { transform: translateY(-1px); filter: brightness(1.02); box-shadow: 0 16px 30px rgba(7, 75, 60, .28); }
.login-submit:active { transform: translateY(0); }

.login-link {
  align-self: center;
  border: 0;
  background: transparent;
  color: #0d5c4b;
  font-weight: 700;
  cursor: pointer;
  margin-top: -5px;
}
.login-link:hover { text-decoration: underline; }

.login-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  color: #8b908f;
  margin: 8px 0 2px;
}
.login-divider span { height: 1px; background: #dfe3df; }
.login-divider em { font-style: normal; font-weight: 500; }

.login-register-btn {
  height: 56px;
  border-radius: 8px;
  border: 1.5px solid #c9a961;
  background: rgba(201, 169, 97, 0.08);
  display: grid;
  grid-template-columns: 34px 1fr 18px;
  gap: 8px;
  align-items: center;
  padding: 0 18px;
  color: #0d5c4b;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 14px rgba(12, 21, 16, .04);
}
.login-register-btn:hover {
  border-color: #c9a961;
  background: rgba(201, 169, 97, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(201, 169, 97, 0.25);
}
.login-register-btn svg { width: 21px; height: 21px; color: #c9a961; }
.login-register-btn strong { font-size: 24px; line-height: 1; font-weight: 500; color: #c9a961; }

.login-card__foot {
  height: 64px;
  background: linear-gradient(180deg, #176b59, #0c5949);
  color: rgba(255,255,255,.94);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: 13px;
}
.login-card__foot svg { width: 19px; height: 19px; }

.login-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}
.login-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(249,248,239,.76) 50%, rgba(237,239,229,.60) 100%),
    radial-gradient(circle at 47% 75%, rgba(251, 225, 152, .42), transparent 22%),
    #f6f7f1;
}
.login-hero::after {
  content: '';
  position: absolute;
  left: -5%; top: -18%;
  width: 55%; height: 55%;
  background:
    radial-gradient(ellipse at 18% 60%, rgba(0,0,0,.10), transparent 40%),
    repeating-radial-gradient(ellipse at 0% 55%, rgba(10,30,25,.08) 0 1px, transparent 1px 28px);
  border-radius: 0 0 65% 0;
  transform: rotate(-6deg);
  opacity: .40;
  filter: blur(.2px);
}

.login-hero__map {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 18%, rgba(10, 71, 59, .07), transparent 16%),
    linear-gradient(95deg, transparent 0 53%, rgba(12, 89, 73, .055) 54% 55%, transparent 56%),
    linear-gradient(20deg, transparent 0 65%, rgba(12, 89, 73, .055) 66% 67%, transparent 68%);
  opacity: .82;
}
.login-hero__map::before {
  content: '';
  position: absolute;
  right: 3%; top: 0%;
  width: 55%; height: 45%;
  background:
    radial-gradient(ellipse at 52% 30%, rgba(23, 105, 86, .13) 0 10%, transparent 11%),
    radial-gradient(ellipse at 70% 18%, rgba(23, 105, 86, .10) 0 6%, transparent 7%),
    radial-gradient(ellipse at 61% 58%, rgba(23, 105, 86, .10) 0 8%, transparent 9%),
    radial-gradient(ellipse at 32% 50%, rgba(23, 105, 86, .08) 0 7%, transparent 8%);
  filter: blur(4px);
  opacity: .34;
}

.login-hero__compass {
  position: absolute;
  right: 7.5%; top: 9%;
  width: 142px; height: 142px;
  border: 2px solid rgba(21, 85, 70, .13);
  border-radius: 50%;
  color: rgba(21, 85, 70, .34);
  font-family: Georgia, serif;
  font-size: 18px;
}
.login-hero__compass::before,
.login-hero__compass::after {
  content: '';
  position: absolute;
  inset: 15%;
  background: conic-gradient(from 45deg, transparent 0 41deg, rgba(21,85,70,.25) 42deg 48deg, transparent 49deg 131deg, rgba(21,85,70,.25) 132deg 138deg, transparent 139deg 221deg, rgba(21,85,70,.25) 222deg 228deg, transparent 229deg 311deg, rgba(21,85,70,.25) 312deg 318deg, transparent 319deg 360deg);
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
}
.login-hero__compass::after { inset: 31%; opacity: .62; transform: rotate(45deg); }
.login-hero__compass span { position: absolute; }
.login-hero__compass span:nth-child(1) { top: -27px; left: 50%; transform: translateX(-50%); }
.login-hero__compass span:nth-child(2) { right: -24px; top: 50%; transform: translateY(-50%); }
.login-hero__compass span:nth-child(3) { bottom: -28px; left: 50%; transform: translateX(-50%); }
.login-hero__compass span:nth-child(4) { left: -28px; top: 50%; transform: translateY(-50%); }

.login-hero__route {
  position: absolute;
  border: 2px dashed rgba(31, 80, 69, .18);
  border-left: 0;
  border-bottom: 0;
  border-radius: 50%;
  transform: rotate(20deg);
}
.login-hero__route--one { width: 360px; height: 230px; right: 18%; top: 24%; }
.login-hero__route--two { width: 290px; height: 190px; right: -6%; top: 39%; transform: rotate(-16deg); }
.login-hero__pin {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50% 50% 50% 0;
  background: rgba(16, 102, 84, .35);
  transform: rotate(-45deg);
}
.login-hero__pin::after { content:''; position:absolute; inset:6px; border-radius:50%; background:#f5f7f1; }
.login-hero__pin--one { right: 31%; top: 33%; }
.login-hero__pin--two { right: 35%; top: 51%; }

.login-hero__brand {
  position: absolute;
  left: 8%; right: 4%; top: 17%;
  display: grid;
  justify-items: center;
  text-align: center;
  color: #0c5949;
  z-index: 3;
}
.bp-mark--hero {
  width: clamp(130px, 11vw, 180px);
  height: clamp(130px, 11vw, 180px);
  margin-bottom: 18px;
  color: #0d604f;
  filter: drop-shadow(0 12px 18px rgba(5, 45, 36, .22)) drop-shadow(0 2px 0 rgba(255,255,255,.95));
}
.login-hero__title {
  font-size: clamp(70px, 9vw, 150px);
  line-height: .92;
  font-weight: 800;
  letter-spacing: -.075em;
  background: linear-gradient(90deg, #075142 0%, #116b58 48%, #9aa779 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 7px 12px rgba(5, 45, 36, .20), 0 2px 0 rgba(255,255,255,.95);
}
.login-hero__subtitle {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  color: #0d604f;
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: .46em;
  font-weight: 600;
}
.login-hero__subtitle span { width: 72px; height: 1px; background: currentColor; opacity: .65; }

.login-hero__landscape {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 36%;
  background-image: linear-gradient(180deg, rgba(246,247,241,0) 0%, rgba(246,247,241,.20) 10%, rgba(246,247,241,.18) 100%), url('/assets/sauerland-hero.jpeg');
  background-size: cover;
  background-position: center 58%;
  filter: saturate(.88) contrast(.98) brightness(1.04);
  opacity: .72;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 24%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 24%);
}
.login-hero__landscape::before {
  content:'';
  position:absolute;
  left: 42%; bottom: 56%;
  width: 220px; height: 120px;
  background: radial-gradient(circle, rgba(255,238,180,.70), rgba(255,238,180,.0) 62%);
  mix-blend-mode: screen;
}

.login-hero__waves {
  position: absolute;
  left: -2%; bottom: -2%;
  width: 58%; height: 36%;
  background:
    repeating-radial-gradient(ellipse at 0% 100%, rgba(255,255,255,.28) 0 1px, transparent 1px 25px),
    linear-gradient(120deg, rgba(10,92,74,.96), rgba(90,132,92,.56) 70%, rgba(255,255,255,0));
  clip-path: polygon(0 28%, 13% 20%, 29% 34%, 44% 42%, 61% 38%, 78% 52%, 100% 46%, 100% 100%, 0 100%);
  z-index: 2;
  opacity: .95;
  box-shadow: inset 0 1px rgba(255,255,255,.35);
}
.login-hero__waves::before {
  content:'';
  position:absolute;
  inset: -18px 0 auto 0;
  height: 38px;
  background: linear-gradient(90deg, rgba(255,255,255,.52), rgba(236,230,172,.72), rgba(255,255,255,0));
  filter: blur(5px);
}

@media (max-width: 980px) {
  body.is-login { overflow: auto; }
  .login-screen { grid-template-columns: 1fr; min-height: 100vh; }
  .login-card { width: min(440px, calc(100vw - 32px)); min-height: auto; margin: 18px auto; }
  .login-card__inner { padding: 34px 32px 28px; }
  .login-hero { display: none; }
}

/* ============================================================
   BookingPilot – Login mit code-programmiertem linken Bereich
   und rechter Grafik aus der hochgeladenen Vorlage
   ============================================================ */
body.is-login {
  background: #f4f4ef;
  overflow: hidden;
}

body.is-login .login-screen {
  min-height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: minmax(360px, 435px) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  background: linear-gradient(115deg, #f7f7f2 0%, #f1f2ec 45%, #eff1eb 100%);
}

body.is-login .login-card {
  position: relative;
  z-index: 5;
  min-height: calc(100vh - 24px);
  margin: 12px 0 12px 12px;
  width: auto;
  height: auto;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(17, 84, 69, .10);
  border-radius: 12px;
  box-shadow: 0 22px 58px rgba(10, 30, 25, .16), 0 2px 6px rgba(10, 30, 25, .08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

body.is-login .login-card__inner {
  position: relative;
  height: auto;
  padding: clamp(34px, 6vh, 70px) clamp(34px, 4vw, 62px) 28px;
}

body.is-login .login-brand,
body.is-login .login-copy,
body.is-login .login-field > span,
body.is-login .login-divider,
body.is-login .login-card__foot {
  opacity: 1;
  pointer-events: auto;
}

body.is-login .login-form {
  position: static;
  display: flex;
}

body.is-login .login-field,
body.is-login .login-submit,
body.is-login .login-link,
body.is-login .login-demo {
  position: static;
}

body.is-login .login-input__eye {
  background: transparent;
  border: 0;
  color: #8c9392;
  box-shadow: none;
  text-shadow: none;
}

body.is-login .login-submit {
  background: linear-gradient(180deg, #176956, #0c5a49);
  color: #ffffff;
  border: 0;
  box-shadow: 0 12px 24px rgba(7, 75, 60, .24);
  text-shadow: none;
}

body.is-login .login-link {
  background: transparent;
  border: 0;
  color: #0d5c4b;
  box-shadow: none;
  text-shadow: none;
}

body.is-login .login-demo {
  background: rgba(255,255,255,.86);
  border: 1px solid #dfe3df;
  color: #0d5c4b;
  box-shadow: 0 4px 14px rgba(12, 21, 16, .04);
  text-shadow: none;
}

body.is-login .login-input {
  height: 49px;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid #dfe3df !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.025) !important;
}

body.is-login .login-input input {
  color: #12362f !important;
  caret-color: #0b5848;
}

body.is-login .login-input input::placeholder {
  color: #a3a9a8;
}

body.is-login .login-input svg,
body.is-login .login-input__eye svg,
body.is-login .login-demo svg,
body.is-login .login-demo strong,
body.is-login .login-demo span {
  opacity: 1;
}

body.is-login .login-submit {
  height: 48px;
  cursor: pointer;
}

body.is-login .login-link {
  height: auto;
  cursor: pointer;
}

body.is-login .login-demo {
  height: 56px;
  cursor: pointer;
}

body.is-login .login-submit:hover,
body.is-login .login-submit:active,
body.is-login .login-demo:hover,
body.is-login .login-link:hover {
  text-decoration: none;
}

body.is-login .login-hero {
  display: block !important;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #f6f6f1 url('/assets/login-right-graphic.png') center center / cover no-repeat;
}

body.is-login .login-hero > * {
  display: none !important;
}

@media (max-width: 980px) {
  body.is-login {
    overflow: auto;
  }

  body.is-login .login-screen {
    grid-template-columns: 1fr;
    background: #f4f4ef;
  }

  body.is-login .login-card {
    width: min(440px, calc(100vw - 32px));
    min-height: auto;
    margin: 18px auto;
  }

  body.is-login .login-card__inner {
    padding: 34px 32px 28px;
  }

  body.is-login .login-hero {
    display: none !important;
  }
}

.btn--logout {
  color: #fef2f2 !important;
  border-color: rgba(254, 226, 226, .18) !important;
}
.btn--logout:hover {
  background: rgba(185, 28, 28, .18) !important;
  color: #ffffff !important;
}


/* ============================================================
   BookingPilot v0.2.3 – 100%-Zoom Skalierung + echte rechte Grafik
   ============================================================ */
body.is-login {
  overflow: hidden;
  background: #f5f5f1;
}

body.is-login .login-screen {
  display: grid;
  grid-template-columns: clamp(330px, 23.5vw, 390px) minmax(0, 1fr);
  width: 100vw;
  min-height: 100vh;
  height: 100vh;
  background: #f5f5f1;
}

body.is-login .login-card {
  margin: 10px 0 10px 10px;
  min-height: calc(100vh - 20px);
  height: calc(100vh - 20px);
  width: auto;
  border-radius: 11px;
  background: rgba(255,255,255,.97);
  overflow: hidden;
}

body.is-login .login-card__inner {
  padding: clamp(28px, 4.4vh, 46px) clamp(28px, 2.9vw, 48px) 20px;
}

body.is-login .login-brand {
  margin-bottom: clamp(32px, 5.2vh, 52px);
}

body.is-login .login-brand__logo {
  width: min(100%, 245px);
}

body.is-login .login-copy {
  margin-bottom: clamp(22px, 3.5vh, 31px);
}

body.is-login .login-copy h1 {
  font-size: clamp(24px, 2.1vw, 29px);
  line-height: 1.17;
}

body.is-login .login-copy p {
  margin-top: 9px;
  font-size: 15px;
}

body.is-login .login-form {
  gap: clamp(14px, 2.05vh, 18px);
}

body.is-login .login-field {
  gap: 7px;
}

body.is-login .login-input {
  height: 45px;
  grid-template-columns: 42px 1fr 38px;
  border-radius: 8px;
}

body.is-login .login-input > svg {
  width: 18px;
  height: 18px;
}

body.is-login .login-input input {
  font-size: 13px;
}

body.is-login .login-input__eye {
  width: 38px;
  height: 38px;
}

body.is-login .login-submit {
  height: 45px;
  border-radius: 8px;
  font-size: 14px;
}

body.is-login .login-link {
  font-size: 13px;
  margin-top: -2px;
}

body.is-login .login-divider {
  margin: 4px 0 0;
  gap: 16px;
}

body.is-login .login-demo {
  height: 52px;
  grid-template-columns: 30px 1fr 16px;
  padding: 0 16px;
  font-size: 13px;
}

body.is-login .login-card__foot {
  height: 56px;
  font-size: 12px;
}

body.is-login .login-hero {
  display: block !important;
  position: relative;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  background: #f6f6f1;
}

/* v1.3.90: HTML-Overlay (Logo + Slogan) wieder sichtbar — das Hero-Bild
   wurde aufgeraeumt (kein eingebrannter "CHANNEL MANAGER"-Text mehr),
   sodass Logo+Slogan jetzt frei oben drauf sitzen koennen. */
body.is-login .login-hero > *:not(.login-hero__graphic):not(.login-hero__brand):not(.login-hero__compass) {
  display: none !important;
}

body.is-login .login-hero__graphic {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  user-select: none;
  pointer-events: none;
}

/* Brand-Overlay (Logo + BookingPilot + Slogan) zentriert, ueber dem Bild */
body.is-login .login-hero__brand {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  text-align: center;
  z-index: 2;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.sidebar__logo {
  height: 82px;
  object-fit: contain;
  padding: 8px 10px;
}

@media (max-width: 1100px) {
  body.is-login .login-screen {
    grid-template-columns: minmax(310px, 355px) minmax(0, 1fr);
  }

  body.is-login .login-card__inner {
    padding: 28px 30px 18px;
  }

  body.is-login .login-brand__logo {
    width: min(100%, 225px);
  }
}

@media (max-width: 820px) {
  body.is-login {
    overflow: auto;
  }

  body.is-login .login-screen {
    display: block;
    height: auto;
    min-height: 100vh;
    background: #f5f5f1;
  }

  body.is-login .login-card {
    width: min(420px, calc(100vw - 28px));
    height: auto;
    min-height: auto;
    margin: 14px auto;
  }

  body.is-login .login-hero {
    display: none !important;
  }
}


/* ============================================================
   BookingPilot v0.2.4 – Login exakt eingepasst für 100%-Browserzoom
   ============================================================ */
body.is-login {
  overflow: hidden !important;
  background: #f5f5f1 !important;
}

body.is-login .login-screen {
  display: grid !important;
  grid-template-columns: clamp(305px, 23.5vw, 365px) minmax(0, 1fr) !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #f5f5f1 !important;
}

body.is-login .login-card {
  margin: 6px 0 6px 6px !important;
  height: calc(100dvh - 12px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 12px) !important;
  width: auto !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

body.is-login .login-card__inner {
  padding: clamp(20px, 3.2vh, 34px) clamp(22px, 2.35vw, 38px) 12px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

body.is-login .login-brand {
  margin-bottom: clamp(22px, 3.1vh, 32px) !important;
}

body.is-login .login-brand__logo {
  width: min(100%, 205px) !important;
  height: auto !important;
}

body.is-login .login-copy {
  margin-bottom: clamp(16px, 2.45vh, 24px) !important;
}

body.is-login .login-copy h1 {
  font-size: clamp(22px, 1.95vw, 27px) !important;
  line-height: 1.14 !important;
  letter-spacing: -.045em !important;
}

body.is-login .login-copy p {
  margin-top: 7px !important;
  font-size: 14px !important;
}

body.is-login .login-form {
  gap: clamp(8px, 1.45vh, 12px) !important;
}

body.is-login .login-field {
  gap: 5px !important;
}

body.is-login .login-field > span {
  font-size: 12px !important;
}

body.is-login .login-input {
  height: 39px !important;
  grid-template-columns: 38px 1fr 34px !important;
  border-radius: 7px !important;
}

body.is-login .login-input > svg {
  width: 16px !important;
  height: 16px !important;
}

body.is-login .login-input input {
  font-size: 12.5px !important;
}

body.is-login .login-input__eye {
  width: 34px !important;
  height: 34px !important;
}

body.is-login .login-input__eye svg {
  width: 18px !important;
  height: 18px !important;
}

body.is-login .login-submit {
  height: 41px !important;
  border-radius: 7px !important;
  font-size: 13.5px !important;
}

body.is-login .login-link {
  font-size: 12.5px !important;
  margin-top: -1px !important;
  padding: 0 !important;
}

body.is-login .login-divider {
  margin: 3px 0 0 !important;
  gap: 14px !important;
  font-size: 12.5px !important;
}

body.is-login .login-demo {
  height: 46px !important;
  grid-template-columns: 27px 1fr 14px !important;
  padding: 0 14px !important;
  font-size: 12.5px !important;
  border-radius: 7px !important;
}

body.is-login .login-demo svg {
  width: 18px !important;
  height: 18px !important;
}

body.is-login .login-card__foot {
  height: 44px !important;
  font-size: 11.5px !important;
  flex: 0 0 44px !important;
}

body.is-login .login-card__foot svg {
  width: 16px !important;
  height: 16px !important;
}

body.is-login .login-hero {
  display: block !important;
  position: relative !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #f6f6f1 !important;
}

body.is-login .login-hero__graphic {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #f6f6f1 !important;
  user-select: none !important;
  pointer-events: none !important;
}

.sidebar__logo {
  height: 74px !important;
  object-fit: contain !important;
  padding: 8px 10px !important;
}

@media (max-height: 680px) and (min-width: 821px) {
  body.is-login .login-card__inner {
    padding-top: 18px !important;
    padding-bottom: 9px !important;
  }
  body.is-login .login-brand {
    margin-bottom: 18px !important;
  }
  body.is-login .login-brand__logo {
    width: min(100%, 184px) !important;
  }
  body.is-login .login-copy {
    margin-bottom: 14px !important;
  }
  body.is-login .login-copy h1 {
    font-size: 21px !important;
  }
  body.is-login .login-copy p {
    font-size: 13px !important;
  }
  body.is-login .login-form {
    gap: 7px !important;
  }
  body.is-login .login-input {
    height: 36px !important;
  }
  body.is-login .login-submit {
    height: 38px !important;
  }
  body.is-login .login-demo {
    height: 42px !important;
  }
  body.is-login .login-card__foot {
    height: 38px !important;
    flex-basis: 38px !important;
  }
}


/* BookingPilot v0.2.5 – Login-Hintergrundfüllung, Logout sichtbar, Kalender-Popup klickbar */
body.is-login .login-hero {
  background: #f6f6f1 url('/assets/login-right-graphic.png') center center / cover no-repeat !important;
}
body.is-login .login-hero__graphic {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.035);
  transform-origin: center center;
}
.avail-dropdown--external .avail-dropdown__panel {
  position: relative;
  top: auto;
  left: auto;
  width: min(380px, 100%);
  margin-top: 8px;
  z-index: 1000;
}
.sidebar__footer {
  flex: none;
}


/* ============================================================
   v0.2.6 – Modal-Scrollfix für manuelle Buchung
   ============================================================ */
.modal {
  align-items: center;
  overflow: hidden;
}
.modal__panel {
  max-height: calc(100dvh - 48px);
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}
.modal__header {
  flex: 0 0 auto;
}
.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.avail-dropdown--external {
  position: relative;
  z-index: 20;
}
.avail-dropdown--external .avail-dropdown__panel {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: min(380px, 100%);
  margin-top: 8px;
  z-index: 30;
}
@media (max-height: 760px) {
  .modal { padding: 14px; }
  .modal__panel { max-height: calc(100dvh - 28px); }
  .modal__header { padding: 14px 18px; }
  .modal__body { padding: 16px 18px 18px; }
}


/* ============================================================
   v0.2.9 – Monatsansicht einpassen, Floating Button, Dropdown-Feinschliff
   ============================================================ */
.calendar-new--single {
  overflow: hidden !important;
  max-height: none !important;
  height: clamp(500px, calc(100dvh - 176px), 760px);
}
.calendar-new--single .cal-grid--single-month {
  height: 100%;
  min-width: 0 !important;
  width: 100%;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto repeat(6, minmax(0, 1fr));
}
.calendar-new--single .cal-single-title {
  padding: 8px 12px;
}
.calendar-new--single .cal-single-title strong {
  font-size: 14px;
}
.calendar-new--single .cal-single-title span {
  font-size: 13px;
}
.calendar-new--single .cal-month-weekday {
  padding: 6px 4px;
  font-size: 10px;
}
.calendar-new--single .cal-cell {
  min-height: 0 !important;
  height: auto !important;
  padding: 0;
}
.calendar-new--single .cal-cell__top {
  min-height: 20px;
  padding: 2px 5px 0 !important;
  font-size: 10px;
}
.calendar-new--single .cal-cell__price {
  font-size: 10px;
  padding: 0 5px;
}
.calendar-new--single .cal-cell__guest {
  font-size: clamp(9px, 0.78vw, 11px) !important;
  line-height: 1.12;
  padding: 1px 5px 0 !important;
  -webkit-line-clamp: 2;
}
.calendar-new--single .cal-cell__guest-meta {
  font-size: 8px !important;
  padding: 0 5px !important;
}
.calendar-fab {
  position: fixed;
  right: 28px;
  bottom: 26px;
  z-index: 80;
  border: 0;
  border-radius: 999px;
  padding: 15px 22px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 800;
  box-shadow: 0 18px 42px rgba(16, 86, 72, .32), 0 4px 12px rgba(15, 23, 42, .16);
  cursor: pointer;
}
.calendar-fab:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}
.main:has(.calendar-fab) {
  padding-bottom: 92px;
}
.avail-day--checkout {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.88), 0 0 0 2px rgba(16, 86, 72, .22);
}
.avail-day--bookable:not(.avail-day--checkout) {
  cursor: pointer;
}
@media (max-height: 760px) {
  .calendar-new--single {
    height: calc(100dvh - 150px);
  }
  .calendar-toolbar {
    margin-bottom: 8px;
    gap: 8px;
  }
  .calendar-toolbar__legend {
    display: none;
  }
  .calendar-fab {
    right: 18px;
    bottom: 16px;
    padding: 12px 18px;
  }
}


/* ============================================================
   v0.3.0 – Kalender kompakter, FAB-Beschriftung, Checkout-Auswahl flexibler
   ============================================================ */
.calendar-toolbar {
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.calendar-toolbar__legend {
  font-size: 11px;
  gap: 10px;
}
.calendar-new--single {
  height: clamp(360px, calc(100dvh - 300px), 500px) !important;
  max-height: calc(100dvh - 300px) !important;
  min-height: 350px;
}
.calendar-new--single .cal-grid--single-month {
  grid-template-rows: 32px 24px repeat(6, minmax(0, 1fr)) !important;
}
.calendar-new--single .cal-single-title {
  padding: 5px 10px !important;
}
.calendar-new--single .cal-single-title strong {
  font-size: 13px !important;
}
.calendar-new--single .cal-single-title span {
  font-size: 12px !important;
}
.calendar-new--single .cal-month-weekday {
  padding: 4px 3px !important;
  font-size: 9px !important;
}
.calendar-new--single .cal-cell {
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden;
}
.calendar-new--single .cal-cell__top {
  /* v1.3.181: min-height entfernt — die Pill (16px) wurde sonst geclippt.
     Container wächst jetzt mit Inhalt mit. */
  padding: 1px 4px 0 !important;
  font-size: 9px !important;
  line-height: 1.05;
}
.calendar-new--single .cal-cell__price {
  font-size: 9px !important;
  line-height: 1.05;
  padding: 0 4px !important;
}
.calendar-new--single .cal-cell__guest {
  font-size: 9px !important;
  line-height: 1.05 !important;
  padding: 0 4px !important;
  -webkit-line-clamp: 2;
}
.calendar-new--single .cal-cell__guest-meta {
  display: none !important;
}
.calendar-new--single .cal-cell__diagline {
  opacity: .78;
}
.calendar-fab {
  min-width: 116px;
  min-height: 72px;
  padding: 10px 16px 11px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #176956, #0c5a49) !important;
  color: #fff !important;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.05;
}
.calendar-fab__plus {
  display: block;
  font-size: 34px;
  font-weight: 900;
  line-height: .82;
}
.calendar-fab__label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
}
.avail-dropdown--external .avail-dropdown__panel {
  width: min(360px, 100%) !important;
}
.avail-day {
  min-height: 32px;
  border-radius: 9px;
}
.avail-day--bookable:not(.avail-day--checkout):not(.avail-day--checkin) {
  color: #0f2f29;
  font-weight: 800;
}
@media (max-height: 820px) {
  .calendar-new--single {
    height: clamp(340px, calc(100dvh - 320px), 460px) !important;
    max-height: calc(100dvh - 320px) !important;
  }
  .calendar-toolbar__legend { display: none !important; }
  .calendar-new--single .cal-grid--single-month {
    grid-template-rows: 28px 20px repeat(6, minmax(0, 1fr)) !important;
  }
  .calendar-fab {
    right: 18px !important;
    bottom: 16px !important;
    min-width: 104px;
    min-height: 64px;
    padding: 8px 13px 9px !important;
  }
  .calendar-fab__plus { font-size: 30px; }
  .calendar-fab__label { font-size: 10px; }
}


/* ============================================================
   v0.3.1 – Quadratische Monatszellen, Dual-Month-Ansicht, FAB-Spacer
   ============================================================ */
.calendar-new--single {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}

.calendar-new--single .cal-single-months {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.calendar-new--single .cal-month-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.calendar-new--single .cal-month-card .cal-grid--single-month {
  display: grid;
  width: 100%;
  min-width: 0 !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  grid-auto-rows: auto;
}

.calendar-new--single .cal-single-title {
  grid-column: 1 / -1;
  padding: 6px 10px !important;
}

.calendar-new--single .cal-month-weekday {
  padding: 4px 2px !important;
  font-size: 9px !important;
}

.calendar-new--single .cal-grid--single-month .cal-cell {
  aspect-ratio: 1 / 1;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden;
}

.calendar-new--single .cal-grid--single-month .cal-cell--blank {
  aspect-ratio: 1 / 1;
}

.calendar-new--single .cal-cell__top {
  /* v1.3.181: min-height entfernt — Pill braucht Platz. */
  padding: 2px 4px 0 !important;
  font-size: 9px !important;
}

.calendar-new--single .cal-cell__price {
  font-size: 9px !important;
  padding: 0 4px !important;
  white-space: nowrap;
}

.calendar-new--single .cal-cell__price small {
  font-size: .82em;
}

.calendar-new--single .cal-cell__guest {
  font-size: 8.5px !important;
  line-height: 1.08 !important;
  padding: 1px 4px 0 !important;
  -webkit-line-clamp: 2;
}

.calendar-new--single .cal-cell__guest-meta {
  display: none !important;
}

.calendar-new--single .cal-cell__diagline {
  opacity: .72;
}

.calendar-fab {
  gap: 6px !important;
}

.calendar-fab__plus {
  line-height: .7 !important;
  transform: translateY(-3px);
}

.calendar-fab__label {
  line-height: 1.15 !important;
  margin-top: 1px;
}

.avail-day--bookable {
  color: var(--text) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

@media (min-width: 1180px) {
  .calendar-new--single .cal-single-months {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1179px) {
  .calendar-new--single .cal-single-months {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   v0.3.3 – Login-Farbwelt, einklappbares Menü, Settings-Subnav, globaler Buchungs-FAB
   ============================================================ */
:root {
  --brand-900: #073f35;
  --brand-800: #0c5a49;
  --brand-700: #176956;
  --brand-600: #1d7f68;
  --brand-500: #3aa884;
  --brand-100: #dff1e9;
  --brand-50:  #f5f8f1;

  --bp-login-green-1: #0c5a49;
  --bp-login-green-2: #176956;
  --bp-login-green-3: #1f7c65;
  --bp-login-mint: #dff1e9;
  --bp-login-cream: #f5f5f1;
  --bp-login-line: #dfe3df;

  --side-bg: #f5f5f1;
  --side-bg-2: #ffffff;
  --side-text: #0b5848;
  --side-text-muted: #52746a;
  --side-border: #dfe3df;
}

.app {
  grid-template-columns: 260px minmax(0, 1fr);
  transition: grid-template-columns .22s ease;
}

.sidebar {
  background:
    radial-gradient(circle at 20% 94%, rgba(31, 124, 101, .15), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, var(--bp-login-cream) 100%);
  color: var(--side-text);
  border-right: 1px solid var(--bp-login-line);
  box-shadow: 10px 0 28px rgba(7, 63, 53, .055);
}

.sidebar__brand {
  position: relative;
  border-bottom-color: rgba(12, 89, 73, .14);
}
.sidebar__logo {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(12, 89, 73, .10);
  box-shadow: 0 12px 28px rgba(7, 63, 53, .10);
}
.sidebar__toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(12, 89, 73, .16);
  border-radius: 10px;
  background: rgba(255,255,255,.90);
  color: var(--bp-login-green-1);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(7, 63, 53, .08);
  z-index: 2;
}
.sidebar__toggle svg { width: 18px; height: 18px; }
.sidebar__toggle:hover { background: #fff; border-color: rgba(12, 89, 73, .35); }

.nav { gap: 6px; }
.nav__item {
  color: var(--side-text-muted);
  border: 1px solid transparent;
}
.nav__item:hover {
  color: var(--bp-login-green-1);
  background: rgba(255, 255, 255, .74);
  border-color: rgba(12, 89, 73, .11);
}
.nav__item.is-active {
  background: linear-gradient(180deg, var(--bp-login-green-2), var(--bp-login-green-1));
  color: white;
  box-shadow: 0 12px 24px rgba(7, 75, 60, .20);
}
.nav__icon { width: 19px; height: 19px; }
.nav__item--logout { color: #9b2d2d; }
.nav__item--logout:hover { background: rgba(185, 28, 28, .08); color: #7f1d1d; }

.settings-subnav {
  display: none;
  margin: -2px 0 4px 36px;
  padding: 3px 0 4px 12px;
  border-left: 2px solid rgba(12, 89, 73, .16);
  flex-direction: column;
  gap: 3px;
}
.nav__item[data-route="settings"].is-active + .settings-subnav {
  display: flex;
}
.settings-subnav a {
  display: block;
  padding: 7px 10px;
  border-radius: 10px;
  color: #52746a;
  font-size: 12px;
  font-weight: 750;
  transition: background .15s ease, color .15s ease;
}
.settings-subnav a:hover {
  color: var(--bp-login-green-1);
  background: rgba(255,255,255,.7);
}
.settings-subnav a.is-active {
  color: var(--bp-login-green-1);
  background: rgba(12, 89, 73, .10);
}

.sidebar__footer {
  border-top-color: rgba(12, 89, 73, .14);
}
.sidebar__footer .btn--ghost {
  color: var(--bp-login-green-1);
  border-color: rgba(12, 89, 73, .16);
  background: rgba(255,255,255,.66);
}
.sidebar__footer .btn--ghost:hover {
  background: #fff;
  color: #073f35;
}
.sidebar__version { color: #6d7c76; }

.btn--primary,
.login-submit {
  background: linear-gradient(180deg, var(--bp-login-green-2), var(--bp-login-green-1)) !important;
  border-color: var(--bp-login-green-1) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(7, 75, 60, .20);
}
.btn--primary:hover,
.login-submit:hover {
  background: linear-gradient(180deg, var(--bp-login-green-3), var(--bp-login-green-1)) !important;
  border-color: var(--bp-login-green-1) !important;
}
.btn:focus-visible,
.input:focus,
.select:focus,
.textarea:focus {
  outline: 2px solid rgba(12, 89, 73, .30);
  outline-offset: 2px;
}

/* Eingeklapptes Menü */
.app.sidebar-collapsed { grid-template-columns: 84px minmax(0, 1fr); }
.app.sidebar-collapsed .sidebar { padding: 16px 10px 14px; }
.app.sidebar-collapsed .sidebar__brand { padding: 0 0 12px; }
.app.sidebar-collapsed .sidebar__logo { height: 54px; padding: 6px; object-fit: contain; }
.app.sidebar-collapsed .sidebar__toggle { position: static; margin: 0 auto 10px; }
.app.sidebar-collapsed .nav__item {
  justify-content: center;
  padding: 12px 10px;
  gap: 0;
}
.app.sidebar-collapsed .nav__item span,
.app.sidebar-collapsed .sidebar__footer .btn span,
.app.sidebar-collapsed .sidebar__version,
.app.sidebar-collapsed .settings-subnav {
  display: none !important;
}
.app.sidebar-collapsed .nav__icon { width: 21px; height: 21px; }
.app.sidebar-collapsed .sidebar__footer .btn {
  justify-content: center;
  padding: 10px;
}

/* Einstellungen: Untermenü sitzt links, Hauptbereich bleibt breit */
.settings-shell--full { display: block; }
.settings-panels--full { min-width: 0; }
.settings-panel { display: none; }
.settings-panel.is-active { display: block; }
.settings-topbar-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(12, 89, 73, .12);
  border-radius: 999px;
  background: rgba(245,245,241,.9);
  color: var(--bp-login-green-1);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.settings-topbar-hint__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--bp-login-green-2), var(--bp-login-green-1));
}
.settings-check-list {
  display: grid;
  gap: 12px;
  padding: 4px 0;
}
.settings-check-card {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  cursor: pointer;
}
.settings-check-card:hover { border-color: rgba(12, 89, 73, .24); background: #fff; }
.settings-check-card strong { display:block; color: var(--text); }
.settings-check-card em { display:block; margin-top: 2px; color: var(--text-3); font-size: 12px; font-style: normal; }

/* Globaler Buchung-hinzufügen Button */
.global-booking-fab {
  position: fixed;
  right: 28px;
  bottom: 26px;
  z-index: 90;
  min-width: 116px;
  min-height: 72px;
  border: 0;
  border-radius: 22px;
  padding: 10px 16px 11px;
  background: linear-gradient(180deg, var(--bp-login-green-2), var(--bp-login-green-1));
  color: #fff;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-weight: 900;
  line-height: 1.05;
  box-shadow: 0 18px 42px rgba(16, 86, 72, .32), 0 4px 12px rgba(15, 23, 42, .16);
  cursor: pointer;
}
.global-booking-fab:hover { filter: brightness(1.04); transform: translateY(-1px); }
.global-booking-fab__plus { display:block; font-size: 34px; line-height: .7; transform: translateY(-3px); }
.global-booking-fab__label { display:block; font-size: 11px; line-height: 1.15; letter-spacing: .01em; }
body.is-login .global-booking-fab { display:none !important; }
.global-booking-fab[hidden] { display:none !important; }

@media (max-width: 920px) {
  .app { grid-template-columns: 84px minmax(0, 1fr); }
  .sidebar { padding: 16px 10px 14px; }
  .sidebar__brand { padding: 0 0 12px; }
  .sidebar__logo { height: 54px; padding: 6px; }
  .sidebar__toggle { position: static; margin: 0 auto 10px; }
  .nav__item { justify-content: center; padding: 12px 10px; gap: 0; }
  .nav__item span, .sidebar__footer .btn span, .sidebar__version, .settings-subnav { display:none !important; }
  .content { padding: 18px 18px 96px; }
  .topbar { padding: 18px; }
  .global-booking-fab { right: 18px; bottom: 16px; min-width: 104px; min-height: 64px; padding: 8px 13px 9px; }
}

/* ============================================================
   v0.3.4 – Sidebar-Fix: Toggle im Menü, Scrollbereich, User unten
   ============================================================ */

.app {
  grid-template-columns: 268px minmax(0, 1fr);
}

.sidebar {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  padding: 18px 14px 14px;
  background:
    radial-gradient(circle at 15% 100%, rgba(31, 124, 101, .18), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f6f8f4 52%, #edf5ee 100%);
}

.sidebar__brand {
  margin-bottom: 10px;
  padding: 0 0 12px;
}

.sidebar__logo {
  height: 82px;
}

.sidebar__tools {
  flex: 0 0 auto;
  margin: 0 0 10px;
}

.sidebar__toggle {
  position: static !important;
  width: 100%;
  height: 40px;
  border: 1px solid rgba(12, 89, 73, .16);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  color: var(--bp-login-green-1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(7, 63, 53, .055);
  font-weight: 800;
  font-size: 12px;
}
.sidebar__toggle svg { width: 18px; height: 18px; }
.sidebar__toggle:hover {
  background: #fff;
  border-color: rgba(12, 89, 73, .35);
}

.nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 2px 14px;
  margin: 0 -2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(12, 89, 73, .34) transparent;
  position: relative;
}
.nav::-webkit-scrollbar { width: 7px; }
.nav::-webkit-scrollbar-thumb {
  background: rgba(12, 89, 73, .25);
  border-radius: 999px;
}
.nav::-webkit-scrollbar-track { background: transparent; }

.nav__item {
  border-radius: 16px;
}

.nav__item[data-route="settings"].is-active {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-bottom: 0;
}

.settings-subnav {
  margin: 0 0 8px 0;
  padding: 8px 8px 10px 44px;
  border-left: 0;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(12,90,73,.16), rgba(12,90,73,.075));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}
.settings-subnav a {
  background: transparent;
  border: 1px solid transparent;
}
.settings-subnav a:hover,
.settings-subnav a.is-active {
  background: rgba(255,255,255,.56);
  border-color: rgba(12, 89, 73, .10);
}

.sidebar__scroll-cue {
  margin: 8px 4px 0;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(12, 89, 73, .55);
  background: rgba(12, 89, 73, .055);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
}
.sidebar__scroll-cue svg { width: 13px; height: 13px; }

.sidebar__footer {
  flex: 0 0 auto;
  margin-top: 10px;
  padding-top: 12px;
  gap: 8px;
  background: linear-gradient(180deg, rgba(246,248,244,.92), rgba(237,245,238,.98));
}

.sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(12, 89, 73, .14);
  background: rgba(255,255,255,.72);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(7, 63, 53, .055);
}
.sidebar__avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(180deg, var(--bp-login-green-2), var(--bp-login-green-1));
  font-weight: 900;
  letter-spacing: .02em;
}
.sidebar__user-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.sidebar__user-text strong {
  color: #0b5848;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__user-text span {
  margin-top: 3px;
  color: #52746a;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__footer .btn--logout {
  color: #8a2424;
  border-color: rgba(185, 28, 28, .18);
  background: rgba(255,255,255,.68);
}
.sidebar__footer .btn--logout:hover {
  background: rgba(185, 28, 28, .08);
  color: #7f1d1d;
}

.app.sidebar-collapsed {
  grid-template-columns: 84px minmax(0, 1fr);
}
.app.sidebar-collapsed .sidebar {
  padding: 16px 10px 14px;
}
.app.sidebar-collapsed .sidebar__logo {
  height: 54px;
  padding: 6px;
}
.app.sidebar-collapsed .sidebar__toggle {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  padding: 0;
}
.app.sidebar-collapsed .sidebar__toggle span,
.app.sidebar-collapsed .sidebar__user-text,
.app.sidebar-collapsed .sidebar__scroll-cue,
.app.sidebar-collapsed .settings-subnav,
.app.sidebar-collapsed .sidebar__footer .btn span,
.app.sidebar-collapsed .sidebar__version {
  display: none !important;
}
.app.sidebar-collapsed .sidebar__user {
  justify-content: center;
  padding: 8px;
}
.app.sidebar-collapsed .sidebar__avatar {
  width: 36px;
  height: 36px;
}
.app.sidebar-collapsed .sidebar__footer .btn {
  justify-content: center;
  padding: 10px;
}

@media (max-height: 780px) {
  .sidebar__logo { height: 70px; }
  .nav__item { padding-top: 9px; padding-bottom: 9px; }
  .settings-subnav a { padding-top: 6px; padding-bottom: 6px; }
  .sidebar__user { padding: 8px; }
}

/* ============================================================
   v0.3.5 – Sidebar Edge-Pfeil, stärkerer Logout, runder FAB
   ============================================================ */
.sidebar {
  position: relative;
}

/* Pfeil direkt am rechten Rand der Sidebar */
.sidebar__edge-toggle {
  position: absolute !important;
  top: 118px;
  right: -15px;
  width: 30px !important;
  height: 54px !important;
  padding: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  border: 1px solid rgba(12, 89, 73, .18) !important;
  border-left: 0 !important;
  background: linear-gradient(180deg, #ffffff, #edf5ee) !important;
  color: var(--bp-login-green-1) !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 8px 8px 20px rgba(7, 63, 53, .12) !important;
  z-index: 110;
}
.sidebar__edge-toggle:hover {
  background: linear-gradient(180deg, #ffffff, #e2f0e6) !important;
  color: #073f35 !important;
  transform: translateX(1px);
}
.sidebar__toggle-arrow {
  display: block;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  margin-left: -1px;
  transform: translateY(-1px);
}
.app.sidebar-collapsed .sidebar__edge-toggle {
  right: -15px;
  border-radius: 0 999px 999px 0 !important;
}
.app.sidebar-collapsed .sidebar__toggle-arrow {
  margin-left: 1px;
}

/* alter Button-Platz fällt weg */
.sidebar__tools { display: none !important; }

/* Logout deutlicher sichtbar */
.sidebar__footer .btn--logout {
  color: #fff !important;
  border-color: rgba(127, 29, 29, .18) !important;
  background: linear-gradient(180deg, #b94242, #8f2424) !important;
  box-shadow: 0 10px 22px rgba(143, 36, 36, .18);
  font-weight: 900;
}
.sidebar__footer .btn--logout:hover {
  background: linear-gradient(180deg, #c84b4b, #7f1d1d) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Demo Reset in Einstellungen */
.settings-admin-actions {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.settings-danger-box {
  border: 1px solid rgba(143, 36, 36, .16);
  background: rgba(185, 28, 28, .045);
  border-radius: var(--r-lg);
  padding: 16px;
}
.settings-danger-box h3 {
  margin: 0 0 4px;
  color: #7f1d1d;
}
.settings-danger-box p {
  margin: 0 0 12px;
}
.btn--danger-strong {
  color: #fff !important;
  border-color: rgba(127, 29, 29, .2) !important;
  background: linear-gradient(180deg, #b94242, #8f2424) !important;
  box-shadow: 0 10px 22px rgba(143, 36, 36, .18);
}
.btn--danger-strong:hover {
  background: linear-gradient(180deg, #c84b4b, #7f1d1d) !important;
}

/* Schwebender Button kleiner, runder und ruhiger */
.global-booking-fab {
  right: 24px !important;
  bottom: 24px !important;
  width: 72px !important;
  min-width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: 7px 8px 8px !important;
  border-radius: 999px !important;
  gap: 2px !important;
  box-shadow: 0 16px 34px rgba(16, 86, 72, .28), 0 4px 12px rgba(15, 23, 42, .14) !important;
}
.global-booking-fab__plus {
  font-size: 27px !important;
  line-height: .75 !important;
  transform: translateY(-1px) !important;
}
.global-booking-fab__label {
  max-width: 58px;
  font-size: 8.5px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 920px) {
  .sidebar__edge-toggle {
    top: 92px;
    width: 28px !important;
    height: 50px !important;
    right: -14px;
  }
  .global-booking-fab {
    right: 16px !important;
    bottom: 14px !important;
    width: 66px !important;
    min-width: 66px !important;
    height: 66px !important;
    min-height: 66px !important;
  }
  .global-booking-fab__label { font-size: 8px !important; }
}

/* ============================================================
   v0.3.6 – Feinschliff Sidebar/FAB + bearbeitbarer Preiskalender
   ============================================================ */
.sidebar__edge-toggle {
  overflow: visible;
}
.sidebar__toggle-text {
  display: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}
.app.sidebar-collapsed .sidebar__edge-toggle {
  width: 62px !important;
  right: -47px !important;
  padding: 0 10px 0 8px !important;
  grid-template-columns: 16px auto;
  column-gap: 5px;
  justify-content: start !important;
}
.app.sidebar-collapsed .sidebar__toggle-text {
  display: inline-block !important;
}
.app.sidebar-collapsed .sidebar__toggle-arrow {
  font-size: 24px;
}

.global-booking-fab {
  font-weight: 600 !important;
}
.global-booking-fab__label {
  font-weight: 500 !important;
}
.global-booking-fab__plus {
  font-weight: 500 !important;
}

.price-calendar-header {
  align-items: flex-start;
  gap: 16px;
}
.price-calendar-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.select--sm {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.price-cell--clickable {
  border: 1px solid var(--border);
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
.price-cell--clickable:hover {
  transform: translateY(-1px);
  border-color: rgba(12, 89, 73, .32);
  box-shadow: 0 10px 22px rgba(7, 63, 53, .08);
  background: #fff;
}
.price-cell__min {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-3);
  font-weight: 700;
}
.price-cell--override .price-cell__min {
  color: #0b5848;
}

@media (max-width: 920px) {
  .app.sidebar-collapsed .sidebar__edge-toggle {
    width: 56px !important;
    right: -43px !important;
  }
  .sidebar__toggle-text { font-size: 10px; }
  .price-calendar-controls { justify-content: flex-start; width: 100%; }
}


/* ============================================================
   Storno-Management
   ============================================================ */
.kpi--danger::before { background: var(--danger); }

.table tr.is-cancelled td {
  background: linear-gradient(0deg, rgba(254,226,226,.45), rgba(254,226,226,.45));
  color: var(--text-3);
}

.table tr.is-cancelled strong {
  color: var(--text-2);
}

.btn--danger-strong,
.btn.btn--danger-strong {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--danger-strong:hover,
.btn.btn--danger-strong:hover {
  background: #991b1b;
  border-color: #991b1b;
  color: #fff;
}

.mt-16 { margin-top: 16px; }


/* ============================================================
   v0.3.8 – Portal-Storno, Anzahlungen, dezenter FAB
   ============================================================ */
.global-booking-fab {
  background: linear-gradient(180deg, #f2b84b, #d99113) !important;
  color: #12342d !important;
  box-shadow: 0 16px 34px rgba(217, 145, 19, .26), 0 4px 12px rgba(15, 23, 42, .14) !important;
}
.global-booking-fab:hover {
  filter: brightness(1.03) saturate(1.04) !important;
}
.global-booking-fab__label,
.global-booking-fab__plus {
  color: #12342d !important;
}
.nav__item--logout {
  color: #ecfdf5 !important;
  border: 1px solid rgba(236,253,245,.72) !important;
  background: rgba(255,255,255,.08) !important;
}
.nav__item--logout:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.9) !important;
}
.policy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.policy-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(246,248,244,.85));
}
.policy-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.payment-card {
  margin-bottom: 14px;
  background: #f8faf5;
  border-color: var(--brand-100);
}


/* ============================================================
   v0.3.9 – Storno-Popup im App-Design, Logout grün, Version sauber
   ============================================================ */
.btn--logout,
.btn.btn--logout,
#btn-logout {
  color: #ecfdf5 !important;
  background: rgba(236,253,245,.08) !important;
  border: 1px solid rgba(236,253,245,.72) !important;
  box-shadow: none !important;
}
.btn--logout:hover,
.btn.btn--logout:hover,
#btn-logout:hover {
  color: #ffffff !important;
  background: rgba(236,253,245,.16) !important;
  border-color: rgba(255,255,255,.92) !important;
}
.btn--logout svg,
#btn-logout svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

.cancel-dialog {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cancel-dialog__warning {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
}
.cancel-dialog__summary,
.cancel-dialog__money {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cancel-dialog__summary > div,
.cancel-dialog__amount,
.cancel-dialog__policy {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.cancel-dialog__summary span,
.cancel-dialog__amount span {
  display: block;
  margin-bottom: 4px;
}
.cancel-dialog__amount strong {
  font-size: 18px;
}
.cancel-dialog__amount--good {
  background: #ecfdf5;
  border-color: #bbf7d0;
}
.cancel-dialog__policy p {
  margin: 6px 0 0;
  color: var(--text-2);
  line-height: 1.45;
}
.cancel-dialog__confirm {
  margin: 0;
}
#confirm-cancel-booking:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.25);
}
@media (max-width: 720px) {
  .cancel-dialog__summary,
  .cancel-dialog__money {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v0.4.0 – Buchungsregeln übersichtlicher: Menü + Akkordeon
   ============================================================ */
.settings-rule-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  margin: 4px 0 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.settings-rule-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
}
.settings-rule-nav a:hover {
  color: var(--text);
  background: var(--surface);
}
.settings-rule-nav a.is-active {
  color: white;
  background: linear-gradient(180deg, var(--brand-700), var(--brand-800));
  box-shadow: var(--shadow-sm);
}
.rule-panel {
  display: none;
}
.rule-panel.is-active {
  display: block;
}
.settings-rule-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.settings-rule-overview a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,248,244,.88));
  text-decoration: none;
  color: var(--text);
}
.settings-rule-overview a:hover {
  border-color: var(--brand-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.settings-rule-overview span {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.35;
}
.policy-grid--accordion {
  gap: 10px;
}
.rule-accordion {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.rule-accordion[open] {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-sm);
}
.rule-accordion__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,249,245,.92));
}
.rule-accordion__summary::-webkit-details-marker {
  display: none;
}
.rule-accordion__summary::after {
  content: '›';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 20px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .16s ease, background .16s ease;
}
.rule-accordion[open] .rule-accordion__summary::after {
  transform: rotate(-90deg);
  background: var(--brand-100);
  color: var(--brand-800);
}
.rule-accordion__summary > span:first-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rule-accordion__summary strong {
  font-size: 14px;
  color: var(--text);
}
.rule-accordion__summary em {
  font-style: normal;
  font-size: 12px;
  color: var(--text-3);
}
.rule-accordion__body {
  padding: 14px;
  border-top: 1px solid var(--border);
  background: #fff;
}
.settings-subnav a[href*="/booking/storno"],
.settings-subnav a[href*="/booking/deposit"],
.settings-subnav a[href*="/booking/email"] {
  padding-left: 32px;
  font-size: 12px;
  opacity: .94;
}
@media (max-width: 720px) {
  .settings-rule-nav {
    border-radius: var(--r-lg);
  }
  .settings-rule-nav a {
    flex: 1 1 45%;
  }
  .rule-accordion__summary {
    align-items: flex-start;
  }
  .rule-accordion__summary .channel-chip {
    display: none;
  }
}


/* ============================================================
   v0.4.1 – Portale aktivieren, Regeln nur für aktive Portale
   ============================================================ */
.btn--logout,
.btn.btn--logout,
#btn-logout {
  color: #86efac !important;
  background: rgba(22, 163, 74, .08) !important;
  border: 1px solid rgba(34, 197, 94, .55) !important;
}
.btn--logout:hover,
.btn.btn--logout:hover,
#btn-logout:hover {
  color: #bbf7d0 !important;
  background: rgba(22, 163, 74, .16) !important;
  border-color: rgba(74, 222, 128, .9) !important;
}
.portal-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.portal-toggle {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  cursor: pointer;
}
.portal-toggle:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}
.portal-toggle input {
  margin-top: 3px;
  accent-color: var(--brand-700);
}
.portal-toggle span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.portal-toggle strong {
  font-size: 13px;
  color: var(--text);
}
.portal-toggle em {
  font-size: 11px;
  color: var(--text-3);
  font-style: normal;
  line-height: 1.3;
}


/* ============================================================
   v0.4.2 – Sidebar-Pfeil sichtbar, Logout exakt Menü-Grün, Kinder/Pets
   ============================================================ */
.app.sidebar-collapsed .sidebar__edge-toggle {
  right: -34px !important;
  width: 74px !important;
  z-index: 999 !important;
}
.sidebar__edge-toggle {
  z-index: 999 !important;
}
.app.sidebar-collapsed .sidebar {
  overflow: visible !important;
}
.btn--logout,
.btn.btn--logout,
#btn-logout,
.sidebar__footer .btn--logout {
  color: var(--bp-login-green-1) !important;
  border: 1px solid var(--bp-login-green-1) !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: none !important;
}
.btn--logout:hover,
.btn.btn--logout:hover,
#btn-logout:hover,
.sidebar__footer .btn--logout:hover {
  color: #073f35 !important;
  border-color: #073f35 !important;
  background: #ffffff !important;
}
.property-rules-card,
.payment-card {
  margin-bottom: 14px;
}
.booking-extra-options {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 14px;
}


/* ============================================================
   v0.4.3 – Buchung sortiert, Kopfpreis, Kurtaxe/Kinder/Extras
   ============================================================ */
#modal-title {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.booking-modal-price {
  margin-left: auto;
  margin-right: 34px;
  color: var(--bp-login-green-1);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.booking-section {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,247,.88));
}
.booking-section h3 {
  margin-bottom: 12px;
  color: var(--bp-login-green-1);
}
.booking-section--dates {
  border-color: var(--brand-100);
}
.booking-section--price {
  background: var(--brand-50);
  border-color: var(--brand-100);
}
.extra-service-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 110px 150px 80px auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.extra-service-row__check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 12px;
}
.extra-services-editor {
  padding: 10px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
}
@media (max-width: 760px) {
  .booking-modal-price {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .extra-service-row {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v0.4.4 – Zusatzleistungen Layout, Bild-Uploads, Gruppen
   ============================================================ */
.extra-service-row {
  grid-template-columns: minmax(170px, 1fr) 110px 155px 74px 86px !important;
  gap: 8px !important;
  align-items: end !important;
  width: 100%;
}
.extra-service-row__remove {
  color: var(--danger) !important;
  justify-self: stretch;
  margin: 0 !important;
}
.extra-service-row__check {
  padding-bottom: 8px;
  white-space: nowrap;
}
.property-rule-group {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  margin-top: 14px;
  background: rgba(255,255,255,.72);
}
.property-rule-group h4 {
  margin: 0 0 10px;
  color: var(--bp-login-green-1);
  font-size: 14px;
}
.property-rule-group__head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.property-toggle-card {
  margin-bottom: 12px;
  background: var(--brand-50);
  border-color: var(--brand-100);
}
.image-upload-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.image-upload-preview {
  width: 100%;
  height: 108px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  margin-top: 8px;
  background: var(--surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--text-3);
  font-size: 12px;
}
.image-upload-preview--pdf {
  font-weight: 900;
  color: var(--bp-login-green-1);
}
@media (max-width: 760px) {
  .extra-service-row {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
  .extra-service-row__check {
    padding-bottom: 0;
  }
}


/* ============================================================
   v0.4.5 – Zusatzleistung-Button im Frame, deaktivierte Regeln, Longstay
   ============================================================ */
.modal__header {
  position: relative;
}
.booking-modal-price {
  margin-left: auto !important;
  margin-right: 54px !important;
  color: var(--bp-login-green-1) !important;
  font-weight: 900 !important;
  white-space: nowrap;
}
.extra-service-row {
  grid-template-columns: minmax(0, 1fr) 94px minmax(128px, 150px) 66px !important;
  gap: 8px !important;
  align-items: end !important;
  width: 100%;
  overflow: hidden;
}
.extra-service-row__remove {
  grid-column: 1 / -1;
  justify-self: end;
  min-width: 84px;
  max-width: 120px;
  color: var(--danger) !important;
  margin: 0 !important;
}
.extra-service-row .input,
.extra-service-row .select {
  min-width: 0;
  width: 100%;
}
.longstay-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 88px 130px 90px;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}
.longstay-row .input,
.longstay-row .select {
  min-width: 0;
  width: 100%;
}
.longstay-row .extra-service-row__remove {
  grid-column: auto;
  justify-self: stretch;
}
.property-rule-group:has(input[name="babyBedEnabled"]:not(:checked)),
.property-rule-group:has(input[name="highChairEnabled"]:not(:checked)),
.property-rule-group:has(input[name="petsAllowed"]:not(:checked)) {
  background: rgba(245,245,244,.72);
  border-color: #e5e7eb;
}
.property-rule-group:has(input[name="babyBedEnabled"]:not(:checked)) input[name="babyBedFee"],
.property-rule-group:has(input[name="babyBedEnabled"]:not(:checked)) select[name="babyBedFeeMode"],
.property-rule-group:has(input[name="highChairEnabled"]:not(:checked)) input[name="highChairFee"],
.property-rule-group:has(input[name="highChairEnabled"]:not(:checked)) select[name="highChairFeeMode"],
.property-rule-group:has(input[name="petsAllowed"]:not(:checked)) input[name="petFee"],
.property-rule-group:has(input[name="petsAllowed"]:not(:checked)) input[name="maxPets"],
.property-rule-group:has(input[name="petsAllowed"]:not(:checked)) select[name="petFeeMode"] {
  opacity: .45;
  pointer-events: none;
  filter: grayscale(.25);
}
@media (max-width: 760px) {
  .booking-modal-price {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .longstay-row,
  .extra-service-row {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
  .longstay-row .extra-service-row__remove,
  .extra-service-row__remove {
    grid-column: auto;
    justify-self: stretch;
  }
}


/* ============================================================
   v0.4.6 – Longstay rechts, Kinderalter, Live-Rechnung
   ============================================================ */
#modal-title {
  width: 100%;
}
.booking-modal-price {
  margin-left: auto !important;
  margin-right: 44px !important;
  text-align: right !important;
}
.child-age-list {
  display: grid;
  gap: 8px;
}
.child-age-row {
  display: grid;
  grid-template-columns: 70px 120px 96px;
  gap: 8px;
  align-items: end;
}
.child-age-row .field__label {
  margin-bottom: 9px;
}
.readonly-like {
  background: var(--surface-2);
  color: var(--text-2);
  font-weight: 800;
}
.longstay-row {
  grid-template-columns: minmax(0, 1fr) 90px 140px 92px 66px 96px !important;
  align-items: end !important;
}
.longstay-row .extra-service-row__remove {
  grid-column: auto !important;
  justify-self: stretch !important;
  min-width: 0;
}
.longstay-row:has([data-longstay-enabled]:not(:checked)) {
  opacity: .58;
  background: rgba(245,245,244,.72);
  border-radius: var(--r-md);
  padding: 8px;
}
.longstay-row:has([data-longstay-enabled]:not(:checked)) input:not([data-longstay-enabled]),
.longstay-row:has([data-longstay-enabled]:not(:checked)) select {
  pointer-events: none;
  opacity: .55;
  filter: grayscale(.2);
}
@media (max-width: 760px) {
  .child-age-row,
  .longstay-row {
    grid-template-columns: 1fr !important;
  }
  /* v1.2.87: Auf Mobile darf der Kostenbetrag NICHT auf derselben Zeile wie
     der Gastname stehen — sonst überlappen sich beide. Wir machen das
     Price-Element zu einem Block, sodass es unter dem Titel landet. */
  .booking-modal-price {
    display: block !important;
    width: 100% !important;
    margin: 4px 0 0 0 !important;
    text-align: left !important;
    font-size: 14px !important;
    color: var(--brand-700) !important;
    font-weight: 700 !important;
    padding: 0 !important;
  }
  .modal__header {
    flex-wrap: wrap !important;
  }
  #modal-title {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    word-break: break-word !important;
  }
}


/* ============================================================
   v0.4.7 – Menü-Toggle neu, Kinderpreis, Anzahlung je Apartment
   ============================================================ */
.sidebar__edge-toggle {
  position: fixed !important;
  left: 14px !important;
  top: 14px !important;
  right: auto !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(12,89,73,.18) !important;
  background: linear-gradient(180deg, #ffffff, #edf5ee) !important;
  color: var(--bp-login-green-1) !important;
  box-shadow: 0 10px 24px rgba(7,63,53,.16) !important;
  z-index: 9999 !important;
  display: grid !important;
  place-items: center !important;
}
.sidebar__toggle-arrow {
  font-size: 26px !important;
  margin: 0 !important;
  transform: none !important;
}
.sidebar__toggle-text {
  display: none !important;
}
.app.sidebar-collapsed .sidebar__edge-toggle {
  left: 14px !important;
  right: auto !important;
  width: 42px !important;
  padding: 0 !important;
  grid-template-columns: 1fr !important;
}
.app.sidebar-collapsed .sidebar {
  overflow: hidden !important;
}
.app.sidebar-collapsed {
  grid-template-columns: 76px minmax(0, 1fr) !important;
}
.property-rule-group:has(input[name="depositEnabled"]:not(:checked)) {
  background: rgba(245,245,244,.72);
  border-color: #e5e7eb;
}
.property-rule-group:has(input[name="depositEnabled"]:not(:checked)) input[name="depositValue"],
.property-rule-group:has(input[name="depositEnabled"]:not(:checked)) input[name="depositDueDaysAfterBooking"],
.property-rule-group:has(input[name="depositEnabled"]:not(:checked)) input[name="balanceDueDaysBeforeArrival"],
.property-rule-group:has(input[name="depositEnabled"]:not(:checked)) select[name="depositMode"] {
  opacity: .45;
  pointer-events: none;
  filter: grayscale(.25);
}


/* ============================================================
   v0.4.8 – Sidebar-Lasche, Personen/Kinder, Anzahlungsdefaults
   ============================================================ */

/* Menü als seitliche Lasche – nicht mehr runder Button oben */
.sidebar__edge-toggle {
  position: absolute !important;
  top: 94px !important;
  right: -22px !important;
  left: auto !important;
  width: 24px !important;
  height: 78px !important;
  border-radius: 0 12px 12px 0 !important;
  border: 1px solid rgba(12, 89, 73, .22) !important;
  border-left: 0 !important;
  background: linear-gradient(180deg, #ffffff, #edf5ee) !important;
  color: var(--bp-login-green-1) !important;
  box-shadow: 8px 8px 22px rgba(7,63,53,.14) !important;
  z-index: 999 !important;
  cursor: pointer;
  display: grid !important;
  place-items: center !important;
}
.sidebar__edge-toggle::before {
  content: '';
  width: 4px;
  height: 34px;
  border-radius: 999px;
  background: rgba(12,89,73,.22);
  position: absolute;
  left: 7px;
}
.sidebar__toggle-arrow {
  font-size: 22px !important;
  line-height: 1 !important;
  margin-left: 6px !important;
  transform: none !important;
}
.sidebar__toggle-text {
  display: none !important;
}
.app.sidebar-collapsed .sidebar__edge-toggle {
  right: -22px !important;
  left: auto !important;
  width: 24px !important;
  height: 78px !important;
  border-radius: 0 12px 12px 0 !important;
}
.app.sidebar-collapsed {
  grid-template-columns: 84px minmax(0, 1fr) !important;
}
.app.sidebar-collapsed .sidebar {
  overflow: visible !important;
}

/* Preis im Buchungskopf sauber rechts */
.modal__header {
  position: sticky;
}
#modal-title {
  flex: 1 1 auto !important;
}
.booking-modal-price {
  margin-left: auto !important;
  margin-right: 52px !important;
  text-align: right !important;
  min-width: 180px;
}

/* Deaktivierte Anzahlung ausgrauen */
.property-rule-group:has(input[name="depositEnabled"]:not(:checked)),
.card:has(input[name="depositEnabled"]:not(:checked)) {
  background: rgba(245,245,244,.72) !important;
  border-color: #e5e7eb !important;
}
.card:has(input[name="depositEnabled"]:not(:checked)) input[name="depositValue"],
.card:has(input[name="depositEnabled"]:not(:checked)) input[name="depositDueDaysAfterBooking"],
.card:has(input[name="depositEnabled"]:not(:checked)) input[name="balanceDueDaysBeforeArrival"],
.card:has(input[name="depositEnabled"]:not(:checked)) select[name="depositMode"] {
  opacity: .45;
  pointer-events: none;
  filter: grayscale(.25);
}

@media (max-width: 760px) {
  .booking-modal-price {
    min-width: 0;
    margin-right: 0 !important;
  }
}


/* ============================================================
   v0.4.9 – Sidebar-Lasche sichtbar fix
   ============================================================ */

/* Wichtig: Parent darf die Lasche nicht abschneiden */
.app,
.sidebar {
  overflow: visible !important;
}

/* Die Sidebar selbst darf intern scrollen, aber die Lasche bleibt außerhalb sichtbar */
.sidebar {
  position: relative !important;
}

/* Lasche bewusst groß und klar sichtbar am rechten Rand der Sidebar */
.sidebar__edge-toggle {
  position: absolute !important;
  top: 92px !important;
  right: -34px !important;
  left: auto !important;
  width: 36px !important;
  height: 86px !important;
  padding: 0 !important;
  border-radius: 0 14px 14px 0 !important;
  border: 1px solid rgba(12, 89, 73, .32) !important;
  border-left: 0 !important;
  background: linear-gradient(180deg, #ffffff, #e6f1ea) !important;
  color: var(--bp-login-green-1) !important;
  box-shadow: 10px 10px 24px rgba(7, 63, 53, .18) !important;
  z-index: 99999 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
}

/* Griff-Striche */
.sidebar__edge-toggle::before {
  content: '' !important;
  width: 4px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: rgba(12, 89, 73, .26) !important;
  position: absolute !important;
  left: 9px !important;
  top: 21px !important;
}
.sidebar__edge-toggle::after {
  content: '' !important;
  width: 4px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: rgba(12, 89, 73, .18) !important;
  position: absolute !important;
  left: 16px !important;
  top: 21px !important;
}

.sidebar__toggle-arrow {
  display: block !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-left: 16px !important;
  transform: none !important;
  z-index: 2 !important;
}
.sidebar__toggle-text {
  display: none !important;
}

/* Eingeklappt bleibt die Lasche am Rand der schmalen Sidebar */
.app.sidebar-collapsed .sidebar__edge-toggle {
  right: -34px !important;
  left: auto !important;
  width: 36px !important;
  height: 86px !important;
  border-radius: 0 14px 14px 0 !important;
}

/* Falls ein Modal offen ist: Lasche bewusst hinter dem Modal halten */
.modal-backdrop ~ .app .sidebar__edge-toggle {
  z-index: 1 !important;
}


/* ============================================================
   v0.5.0 – Kosten nur Buchung, Kinderalter rechts, Extras final dedupe
   ============================================================ */
#booking-modal-price {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}
.child-age-list {
  margin-top: 10px;
}
.child-age-row {
  grid-template-columns: 64px 1fr 92px !important;
  align-items: end !important;
}
.child-age-row .extra-service-row__remove {
  justify-self: end;
}
.modal__header:not(:has(+ .modal__body #bkg-form)) #booking-modal-price {
  display: none !important;
}


/* ============================================================
   v0.5.1 – Modalheader, Lasche kleiner, Kinderalter, Longstay
   ============================================================ */

/* Lasche nicht über Modal anzeigen und kleiner */
body.modal-active .sidebar__edge-toggle {
  display: none !important;
}
.sidebar__edge-toggle {
  width: 22px !important;
  height: 58px !important;
  right: -20px !important;
  top: 150px !important;
  opacity: .92;
}
.sidebar__edge-toggle::before,
.sidebar__edge-toggle::after {
  height: 26px !important;
  top: 16px !important;
}
.sidebar__toggle-arrow {
  font-size: 16px !important;
  margin-left: 8px !important;
}

/* Header: Titel links, Kosten rechts, X ganz rechts */
.modal__header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 14px !important;
}
#modal-title {
  min-width: 0;
}
#booking-modal-price {
  grid-column: 2;
  justify-self: end;
  margin: 0 !important;
  min-width: 0 !important;
  white-space: nowrap;
}
.modal__close,
.modal__header [data-close],
.modal__header .icon-btn {
  grid-column: 3;
  justify-self: end;
}

/* Alter mit Jahre-Suffix */
.input-suffix {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.input-suffix .input {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.input-suffix span {
  padding: 0 10px;
  color: var(--text-3);
  font-size: 12px;
  white-space: nowrap;
}
.child-age-row {
  grid-template-columns: 64px minmax(110px, 1fr) 92px !important;
}

/* Longstay mehr Platz für Name und zweizeilig auf kleinen Breiten */
.longstay-row {
  grid-template-columns: minmax(220px, 1.5fr) 88px 130px 80px 62px 92px !important;
}
.longstay-row [data-longstay-label] {
  min-width: 210px;
}
@media (max-width: 980px) {
  .longstay-row {
    grid-template-columns: 1fr 88px 130px 80px !important;
  }
  .longstay-row .extra-service-row__check,
  .longstay-row .extra-service-row__remove {
    grid-column: span 2;
  }
}


/* ============================================================
   v0.5.2 – Longstay im Frame, Header einzeilig, Lasche schmaler
   ============================================================ */

/* Kostenanzeige bleibt in der ersten Kopfzeile; X bleibt ganz rechts */
.modal__header {
  position: relative !important;
  display: block !important;
  min-height: 62px !important;
  padding: 18px 190px 18px 24px !important;
}
#modal-title {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
#booking-modal-price {
  position: absolute !important;
  right: 58px !important;
  top: 18px !important;
  margin: 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}
.modal__close {
  position: absolute !important;
  right: 18px !important;
  top: 14px !important;
}

/* Sidebar-Lasche deutlich schmaler */
.sidebar__edge-toggle {
  width: 15px !important;
  height: 48px !important;
  right: -14px !important;
  top: 152px !important;
  border-radius: 0 9px 9px 0 !important;
}
.sidebar__edge-toggle::before {
  width: 3px !important;
  height: 24px !important;
  left: 4px !important;
  top: 12px !important;
}
.sidebar__edge-toggle::after {
  display: none !important;
}
.sidebar__toggle-arrow {
  font-size: 12px !important;
  margin-left: 5px !important;
}

/* Longstay: Checkbox und Entfernen bleiben im inneren Frame, zweite Zeile */
.longstay-row {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) 82px 124px 78px !important;
  gap: 8px !important;
  align-items: end !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface) !important;
}
.longstay-row .extra-service-row__check {
  grid-column: 1 / 3 !important;
  justify-self: start !important;
  padding: 0 !important;
  margin-top: 2px !important;
}
.longstay-row .extra-service-row__remove {
  grid-column: 4 / 5 !important;
  justify-self: end !important;
  align-self: center !important;
  min-width: 0 !important;
  max-width: 96px !important;
  width: 96px !important;
  margin: 0 !important;
}
.longstay-row [data-longstay-label] {
  min-width: 0 !important;
}
.longstay-row .input,
.longstay-row .select {
  min-width: 0 !important;
  width: 100% !important;
}

/* Kalender nutzt denselben kleinen runden Global-FAB-Stil bzw. versteckt alten großen Kalender-FAB */
.calendar-fab {
  display: none !important;
}
.main:has(.calendar-fab) {
  padding-bottom: 20px !important;
}

@media (max-width: 760px) {
  .modal__header {
    padding-right: 150px !important;
  }
  #booking-modal-price {
    right: 48px !important;
    font-size: 16px !important;
  }
  .longstay-row {
    grid-template-columns: 1fr 82px !important;
  }
  .longstay-row .field:first-child {
    grid-column: 1 / -1;
  }
  .longstay-row .extra-service-row__check {
    grid-column: 1 / 2 !important;
  }
  .longstay-row .extra-service-row__remove {
    grid-column: 2 / 3 !important;
    width: 96px !important;
  }
}


/* ============================================================
   v0.5.3 – Portal-Anzahlung und doppelte Extras final
   ============================================================ */
#payment-card[hidden],
#payment-card.hidden {
  display: none !important;
}


/* ============================================================
   v0.5.4 – Kalender-Kopfsteuerung, Buchungszeile klickbar, Logo größer
   ============================================================ */

/* Kalender Umschalter in den Kopfbereich neben "Kalender" */
.calendar-header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.calendar-header-controls .calendar-toolbar__select--property {
  min-width: 220px;
}
.calendar-toolbar {
  align-items: flex-start;
}
.calendar-toolbar__nav {
  flex-wrap: wrap;
}

/* Buchungstabelle: ganze Zeile klickbar + Öffnen unter Zeitraum */
.booking-row {
  cursor: pointer;
}
.booking-row:hover {
  background: var(--brand-50);
}
.booking-row-open {
  margin-top: 6px;
  padding: 4px 9px !important;
  font-size: 11px !important;
  border-radius: 999px !important;
}
.btn--xs {
  height: 26px;
  min-height: 26px;
}

/* Sidebar Logo größer */
.sidebar__brand {
  padding: 4px 4px 16px !important;
}
.sidebar__logo {
  height: 120px !important;
  padding: 6px 8px !important;
}
.app.sidebar-collapsed .sidebar__logo {
  height: 54px !important;
  padding: 5px !important;
}

/* Lasche ausgeklappt/eingeklappt exakt gleiche Größe, nur Pfeilrichtung ändert sich */
.sidebar__edge-toggle,
.app.sidebar-collapsed .sidebar__edge-toggle {
  width: 15px !important;
  height: 48px !important;
  right: -14px !important;
  top: 152px !important;
}


/* ============================================================
   v0.5.5 – Online Check-in + schmaleres Logo
   ============================================================ */
.sidebar__logo {
  height: 92px !important;
  padding: 4px 8px !important;
}
.sidebar__brand {
  padding-bottom: 10px !important;
}
.app.sidebar-collapsed .sidebar__logo {
  height: 48px !important;
}
.checkin-public .settings-check-card {
  margin-bottom: 12px;
}


/* ============================================================
   v0.5.6 – Online Check-in Badge und Detailanzeige
   ============================================================ */
.checkin-pill {
  margin-top: 7px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #86efac;
  background: #ecfdf5;
  color: #065f46;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.checkin-pill:hover {
  background: #dcfce7;
  border-color: #22c55e;
}
.checkin-details {
  display: grid;
  gap: 14px;
}
.checkin-details__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--brand-100);
  border-radius: var(--r-lg);
  background: var(--brand-50);
}
.checkin-details__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.checkin-details__grid > div,
.checkin-details__note,
.checkin-travelers {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.checkin-details__grid span,
.checkin-details__note span {
  display: block;
  margin-bottom: 4px;
}
.checkin-details__note p {
  margin: 0;
  white-space: pre-wrap;
  color: var(--text-2);
}
.booking-section--checkin {
  border-color: var(--brand-100);
  background: var(--brand-50);
}
.table--compact th,
.table--compact td {
  padding: 8px;
}


/* ============================================================
   v0.5.7 – Online Check-in Formular-Builder
   ============================================================ */
.checkin-field-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.3fr) 150px minmax(150px, 1fr) 76px 70px 96px;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: 10px;
}
.checkin-field-row .input,
.checkin-field-row .select {
  min-width: 0;
  width: 100%;
}
@media (max-width: 900px) {
  .checkin-field-row {
    grid-template-columns: 1fr 1fr;
  }
  .checkin-field-row .extra-service-row__remove {
    grid-column: 2 / 3;
    justify-self: end;
  }
}


/* ============================================================
   v0.5.8 – Online Check-in Editor wie Smoobu
   ============================================================ */
.checkin-editor {
  display: grid;
  gap: 22px;
  margin-top: 18px;
}
.checkin-editor__group {
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.checkin-editor__group h3 {
  font-size: 18px;
  color: var(--text);
  margin-bottom: 10px;
}
.checkin-preset-list {
  display: grid;
  gap: 8px;
}
.checkin-preset-row {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) 170px;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}
.checkin-preset-row__enabled {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}
.checkin-preset-row__enabled input {
  width: 22px;
  height: 22px;
  accent-color: var(--bp-login-green-1);
}
.checkin-required-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4caf50;
  font-weight: 800;
}
.checkin-required-toggle input {
  appearance: none;
  width: 54px;
  height: 30px;
  border-radius: 999px;
  background: #d9dedb;
  position: relative;
  cursor: pointer;
  transition: background .15s ease;
}
.checkin-required-toggle input::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  top: 3px;
  left: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: transform .15s ease;
}
.checkin-required-toggle input:checked {
  background: #61bf63;
}
.checkin-required-toggle input:checked::after {
  transform: translateX(24px);
}
.checkin-custom-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(170px, 1fr) 130px 95px 42px;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}
.checkin-delete-btn {
  height: 40px;
  border: 0;
  background: transparent;
  color: #dc2626;
  font-size: 24px;
  cursor: pointer;
}
.checkin-builder {
  margin-top: 10px;
}
@media (max-width: 900px) {
  .checkin-preset-row,
  .checkin-custom-row {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v0.5.9 – Check-in Gliederung, Logo, Anhänge, Vorschau
   ============================================================ */

/* Projektweit: grüne kleinere Checkboxen */
input[type="checkbox"] {
  accent-color: var(--bp-login-green-1);
}
.settings-check-card input[type="checkbox"],
.checkin-preset-row__enabled input {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
}

/* kleinere grüne Required/Aktiv-Schalter */
.checkin-required-toggle input {
  width: 42px !important;
  height: 24px !important;
}
.checkin-required-toggle input::after {
  width: 18px !important;
  height: 18px !important;
  top: 3px !important;
  left: 3px !important;
}
.checkin-required-toggle input:checked::after {
  transform: translateX(18px) !important;
}
.checkin-required-toggle span {
  font-size: 13px;
}

/* Check-in Editor */
.checkin-preset-row {
  grid-template-columns: minmax(210px, 1fr) 120px 96px !important;
}
.checkin-preset-row--attachment {
  grid-template-columns: minmax(210px, 1fr) 120px 96px !important;
}
.checkin-attachment-options {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 170px 140px;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.checkin-order-field .input {
  max-width: 92px;
}
.checkin-custom-row {
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1fr) 92px 112px 86px 132px !important;
}
.checkin-row-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}
.settings-logo-preview {
  width: 100%;
  max-width: 220px;
  max-height: 80px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px;
  background: #fff;
  margin-top: 8px;
}

/* Öffentliches Formular: Objektkopf */
.checkin-brand {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.checkin-brand img {
  width: 120px;
  max-height: 70px;
  object-fit: contain;
  background:#fff;
  border-radius: 12px;
  padding: 8px;
}
.checkin-brand strong {
  display:block;
  color:white;
  font-size: 16px;
}
.checkin-brand span {
  display:block;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}
@media (max-width: 900px) {
  .checkin-preset-row,
  .checkin-preset-row--attachment,
  .checkin-custom-row,
  .checkin-attachment-options {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   v0.6.0 – Connectivity- und Payment-Vorbereitung
   ============================================================ */
.connectivity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.payment-provider-hint {
  padding: 10px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 12px;
}


/* ============================================================
   v0.6.1 – Klarna/Wero und Zahlungseingangs-Mail vorbereitet
   ============================================================ */
.payment-provider-hint {
  padding: 10px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 12px;
}


/* ============================================================
   v0.6.2 – Online-Check-in Editor aufgeräumt, Upload/Signatur
   ============================================================ */

/* Keine iPhone-Schalter mehr: Required/Aktiv als normale Projekt-Checkbox */
.checkin-required-toggle input,
.checkin-checkbox-inline input {
  appearance: auto !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  accent-color: var(--bp-login-green-1) !important;
  background: initial !important;
  position: static !important;
}
.checkin-required-toggle input::after,
.checkin-checkbox-inline input::after {
  display: none !important;
}
.checkin-required-toggle,
.checkin-checkbox-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--bp-login-green-1) !important;
  font-weight: 800 !important;
}
.checkin-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}
.checkin-section-toggle input {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--bp-login-green-1);
}

/* Gliederung: Hauptbereiche als Details/Akkordeon */
.checkin-editor__details {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--surface);
}
.checkin-editor__details > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.checkin-editor__details > summary::-webkit-details-marker {
  display: none;
}
.checkin-editor__details .checkin-preset-list {
  padding: 12px 16px 16px;
}
.checkin-preset-row {
  grid-template-columns: minmax(220px, 1fr) 110px 96px !important;
}
.checkin-custom-row {
  grid-template-columns: minmax(170px, 1fr) minmax(190px, 1fr) 90px 82px 132px !important;
}

/* Systempassende Upload-Buttons */
.file-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: 8px;
  padding: 10px 14px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--bp-login-green-1);
  background: #fff;
  color: var(--bp-login-green-1);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(12,89,73,.08);
}
.file-upload-btn:hover {
  background: var(--brand-50);
}
.file-upload-btn input {
  display: none !important;
}

/* Logo-Vorschau */
.settings-logo-preview-wrap {
  margin-top: 10px;
}
.settings-logo-preview {
  display: block;
  width: 100%;
  max-width: 240px;
  max-height: 88px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px;
  background: #fff;
}

/* Signatur im Online-Check-in Formular */
.signature-pad-wrap {
  margin-top: 10px;
}
.signature-pad {
  width: 100%;
  max-width: 560px;
  height: 180px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: #fff;
  touch-action: none;
  display: block;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .checkin-preset-row,
  .checkin-custom-row {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   v0.6.4 – Deutsche Feldnamen + Logo rechts im Check-in
   ============================================================ */
.checkin-head {
  position: relative;
}
.checkin-brand {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 18px !important;
}
.checkin-brand img {
  margin-left: auto !important;
  margin-right: 0 !important;
}
.checkin-brand > div {
  flex: 1 1 auto;
}


/* ============================================================
   v0.6.5 – Zusatzgäste-Felder korrekt aus Konfiguration
   ============================================================ */
.traveler-row {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}
.checkin-travelers td div + div {
  margin-top: 4px;
}


/* ============================================================
   v0.6.6 – Allgemeine Dokumente, Hausordnung/Mietvertrag
   ============================================================ */
.settings-mobile-under-phone {
  grid-column: 2;
}
.settings-docs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 18px;
}
.settings-doc-card {
  border: 1px solid var(--border);
  background: var(--surface);
}
.settings-check-list--compact {
  display: grid;
  gap: 8px;
}
@media (max-width: 800px) {
  .settings-mobile-under-phone {
    grid-column: auto;
  }
}


/* ============================================================
   v0.6.7 – Dashboard Benutzer + Umsatzfilter
   ============================================================ */
.sidebar__footer {
  align-items: center;
}
.sidebar__footer .sidebar__user {
  display: none !important;
}
.btn--logout-icon {
  width: 42px;
  height: 38px;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  border-color: rgba(12, 89, 73, .28) !important;
  color: var(--bp-login-green-1) !important;
  background: rgba(255,255,255,.72) !important;
}
.btn--logout-icon:hover {
  background: rgba(12,89,73,.08) !important;
  color: var(--bp-login-green-2) !important;
}
.dashboard-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(12, 89, 73, .14);
  background: rgba(255,255,255,.82);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(7, 63, 53, .055);
}
.dashboard-user-pill__avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, var(--bp-login-green-2), var(--bp-login-green-1));
  font-weight: 900;
}
.dashboard-user-pill__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.dashboard-user-pill__text strong {
  color: #0b5848;
  font-size: 12px;
  white-space: nowrap;
}
.dashboard-user-pill__text span {
  margin-top: 3px;
  color: #52746a;
  font-size: 11px;
  white-space: nowrap;
}
.dashboard-head-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 14px;
  gap: 12px;
}
.dashboard-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: end;
}
.dashboard-filters label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-3);
}
.dashboard-filters .input,
.dashboard-filters .select {
  min-width: 150px;
  height: 38px;
}
@media (max-width: 900px) {
  .dashboard-head-row {
    display: block;
  }
  .dashboard-filters {
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    gap: 8px;
  }
  .dashboard-filters label {
    flex: 1 1 100%;
    width: 100%;
  }
  .dashboard-filters .input,
  .dashboard-filters .select {
    width: 100%;
    min-width: 0;
  }
  .dashboard-user-pill {
    display: none;
  }
}


/* ============================================================
   v0.6.8 – Dashboard Benutzer/Logout + einklappbare Einstellungsmenüs
   ============================================================ */
.dashboard-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  border: 1px solid rgba(12, 89, 73, .14);
  background: rgba(255,255,255,.82);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(7, 63, 53, .055);
}
.dashboard-user-pill__avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, var(--bp-login-green-2), var(--bp-login-green-1));
  font-weight: 900;
}
.dashboard-user-pill__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.dashboard-user-pill__text strong {
  color: #0b5848;
  font-size: 12px;
  white-space: nowrap;
}
.dashboard-user-pill__text span {
  margin-top: 3px;
  color: #52746a;
  font-size: 11px;
  white-space: nowrap;
}
.dashboard-user-pill__logout {
  margin-left: 2px;
}
.btn--logout-icon {
  width: 40px;
  height: 38px;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  border-color: rgba(12, 89, 73, .28) !important;
  color: var(--bp-login-green-1) !important;
  background: rgba(255,255,255,.72) !important;
}
.btn--logout-icon:hover {
  background: rgba(12,89,73,.08) !important;
  color: var(--bp-login-green-2) !important;
}
.settings-subnav--nested {
  display: grid;
  gap: 4px;
}
.settings-subgroup {
  border-radius: 12px;
  overflow: hidden;
}
.settings-subgroup summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  color: #0b5848;
  background: rgba(255,255,255,.38);
  border-radius: 12px;
  user-select: none;
}
.settings-subgroup summary::-webkit-details-marker {
  display: none;
}
.settings-subgroup__arrow {
  transition: transform .16s ease;
}
.settings-subgroup[open] .settings-subgroup__arrow {
  transform: rotate(90deg);
}
.settings-subgroup a {
  margin-left: 10px;
  margin-top: 4px;
}
.app.sidebar-collapsed .settings-subnav--nested {
  display: none !important;
}
.settings-doc-card {
  scroll-margin-top: 24px;
}


/* ============================================================
   v0.6.9 – Ausloggen und Version im scrollbaren Menü
   ============================================================ */
.sidebar {
  padding-bottom: 0 !important;
}
.nav {
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 14px;
}
.sidebar__footer {
  display: none !important;
}
.nav__bottom {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--side-border);
  display: grid;
  gap: 10px;
}
.nav__bottom .nav__item--logout {
  margin-top: 0 !important;
  width: 100%;
  border: 0;
  background: rgba(255,255,255,.08);
  color: var(--side-text-muted) !important;
  text-align: left;
  cursor: pointer;
}
.nav__bottom .nav__item--logout:hover {
  color: var(--side-text) !important;
  background: var(--side-bg-2) !important;
}
.nav__bottom .sidebar__version {
  padding: 2px 4px 8px;
  text-align: center;
}
.app.sidebar-collapsed .nav__bottom .nav__item--logout span,
.app.sidebar-collapsed .nav__bottom .sidebar__version {
  display: none;
}
.app.sidebar-collapsed .nav__bottom .nav__item--logout {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}


/* ============================================================
   v0.7.0 – Online-Check-in Detailansicht + Export vorbereitet
   ============================================================ */
.dashboard-user-pill__logout,
.dashboard-user-pill .btn--logout-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
}
.dashboard-user-pill__logout svg,
.dashboard-user-pill .btn--logout-icon svg {
  width: 14px !important;
  height: 14px !important;
}

.checkin-details--clean {
  gap: 12px;
}
.checkin-details__section {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.checkin-details__section h3 {
  font-size: 15px;
  margin-bottom: 10px;
  color: var(--text);
}
.checkin-kv-list {
  display: grid;
  gap: 8px;
}
.checkin-kv {
  display: grid;
  grid-template-columns: minmax(130px, .9fr) minmax(0, 1.5fr);
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.checkin-kv:last-child {
  border-bottom: 0;
}
.checkin-kv span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}
.checkin-kv strong {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  color: var(--text);
  font-size: 13px;
}
.checkin-traveler-cards {
  display: grid;
  gap: 10px;
}
.checkin-traveler-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.checkin-traveler-card > strong {
  display: block;
  margin-bottom: 8px;
}
@media (max-width: 700px) {
  .checkin-kv {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}


/* ============================================================
   v0.7.1 – Struktur- und Einstellungsbereinigung
   ============================================================ */
.settings-subnav--nested {
  gap: 5px;
}
.settings-subgroup summary {
  padding: 8px 10px;
}
.settings-subgroup a {
  font-size: 11.5px;
  line-height: 1.2;
}
.settings-placeholder-item strong {
  color: var(--bp-login-green-1);
}


/* ============================================================
   v0.7.2 – Zentrale Preisberechnung
   ============================================================ */
.price-manual-toggle {
  margin-bottom: 12px;
}
.price-manual-toggle input:not(:checked) + span em::after {
  content: ' Serverpreis ist maßgeblich.';
}


/* ============================================================
   v0.7.3 – Reinigung / Aufgaben
   ============================================================ */
.task-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
}
.task-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.task-card__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.task-card__top h3 {
  margin: 3px 0 0;
  font-size: 16px;
}
.task-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.task-card__meta div {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.task-card__meta span {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 3px;
}
.task-card__meta strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.task-card__notes {
  padding: 10px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--text-2);
  font-size: 12px;
  white-space: pre-wrap;
  margin-bottom: 10px;
}
.task-checklist {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}
.task-checklist label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
}
.task-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.dashboard-important {
  margin-bottom: 16px;
}
.dashboard-important__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.dashboard-important__item {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.dashboard-important__item span {
  display: block;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}
.dashboard-important__item strong {
  display: block;
  color: var(--bp-login-green-1);
  font-size: 26px;
  margin-top: 4px;
}
@media (max-width: 700px) {
  .task-card__meta {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v0.7.4 – Digitale Gästemappe
   ============================================================ */
.guestguide-row {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 12px;
  margin-bottom: 12px;
}
.guestguide-row__top {
  display: grid;
  grid-template-columns: 90px 90px minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.guestguide-row__actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.guestguide-public {
  min-height: 100vh;
  background: linear-gradient(180deg, #f3fbf7 0%, #ffffff 55%);
  color: var(--text);
}
.guestguide-shell {
  max-width: 940px;
  margin: 0 auto;
  padding: 28px 18px 44px;
}
.guestguide-head {
  padding: 26px;
  border-radius: 28px;
  background: linear-gradient(180deg, var(--bp-login-green-2), var(--bp-login-green-1));
  color: white;
  box-shadow: 0 18px 40px rgba(7,75,60,.18);
  margin-bottom: 18px;
}
.guestguide-head h1 {
  font-size: clamp(28px, 5vw, 44px);
  margin: 10px 0 8px;
}
.guestguide-head p {
  max-width: 720px;
  color: rgba(255,255,255,.82);
  line-height: 1.55;
}
#guestguide-logo img {
  max-width: 170px;
  max-height: 84px;
  object-fit: contain;
  background: white;
  border-radius: 18px;
  padding: 10px;
}
.guestguide-contact,
.guestguide-card {
  background: white;
  border: 1px solid rgba(12,89,73,.12);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(7,63,53,.06);
  margin-bottom: 14px;
}
.guestguide-contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.guestguide-contact__grid div {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px;
  background: var(--surface-2);
}
.guestguide-contact__grid span {
  display:block;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px;
}
.guestguide-contact__grid strong {
  overflow-wrap: anywhere;
}
.guestguide-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: start;
}
.guestguide-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  font-size: 25px;
}
.guestguide-card h2 {
  margin-bottom: 8px;
  color: var(--bp-login-green-1);
}
.guestguide-card p {
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 800px) {
  .guestguide-row__top {
    grid-template-columns: 1fr;
  }
  .guestguide-card {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v0.7.5 – Backup / Export / Import
   ============================================================ */
.backup-card {
  margin-top: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.backup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.backup-import-box {
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.backup-import-box h4 {
  margin-bottom: 6px;
  color: var(--bp-login-green-1);
}
.backup-import-box .file-upload-btn {
  margin-right: 10px;
  margin-top: 8px;
}


/* ============================================================
   v0.7.6 – iCal Sync + Konfliktwarnung
   ============================================================ */
.ical-export-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.ical-export-list div {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.65);
}
.ical-export-list code {
  display: inline-block;
  margin-left: 8px;
  color: var(--bp-login-green-1);
  overflow-wrap: anywhere;
}
.conflict-list {
  display: grid;
  gap: 10px;
}
.conflict-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: var(--r-md);
  background: rgba(245, 158, 11, .07);
  padding: 12px;
}
.channel-conflicts-card {
  border-color: rgba(245, 158, 11, .28);
}


/* ============================================================
   v0.7.7 – Benutzer / Rollen
   ============================================================ */
.users-card {
  margin-top: 16px;
  border: 1px solid var(--border);
}
.users-admin-list {
  display: grid;
  gap: 8px;
}
.users-table {
  display: grid;
  gap: 8px;
}
.users-table__row {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1fr) 140px 90px auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.users-table__avatar {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, var(--bp-login-green-2), var(--bp-login-green-1));
  font-weight: 900;
}
.users-table__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.roles-overview {
  margin-top: 18px;
}
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.role-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
}
.role-card strong {
  color: var(--bp-login-green-1);
}
.role-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.role-permissions span {
  font-size: 11px;
  font-weight: 800;
  color: var(--bp-login-green-1);
  background: var(--brand-50);
  border-radius: 999px;
  padding: 4px 7px;
}
@media (max-width: 900px) {
  .users-table__row {
    grid-template-columns: 42px 1fr;
  }
  .users-table__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}


/* ============================================================
   v0.7.8 – Systemdiagnose / Fehlerprotokoll
   ============================================================ */
.diagnostics-card {
  margin-top: 16px;
  border: 1px solid var(--border);
}
.diagnostics-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.diagnostics-summary div {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.diagnostics-summary span {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
}
.diagnostics-summary strong {
  color: var(--bp-login-green-1);
  overflow-wrap: anywhere;
}
.diagnostics-checks {
  display: grid;
  gap: 8px;
}
.diagnostics-check {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
}
.diagnostics-check div {
  display: grid;
  gap: 2px;
}
.diagnostics-check span:not(.badge) {
  color: var(--text-3);
  font-size: 12px;
}
.diagnostics-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 12px;
}
.diagnostics-log,
.diagnostics-error {
  padding: 10px 0;
  border-bottom: 1px solid rgba(15,23,42,.07);
}
.diagnostics-log:last-child,
.diagnostics-error:last-child {
  border-bottom: 0;
}
.diagnostics-log span,
.diagnostics-error span {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 3px;
}
.diagnostics-log p {
  margin: 3px 0 0;
  color: var(--text-2);
  font-size: 12px;
}
.diagnostics-error strong {
  color: #991b1b;
  overflow-wrap: anywhere;
}


/* ============================================================
   v0.8.1 – Menü/Settings aufgeräumt + Apartment-Adresse
   ============================================================ */

/* Linkes Menü bleibt beim Scrollen stehen */
.sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  align-self: start !important;
}

/* Einheitlich weniger runde Buttons */
:root {
  --btn-radius-clean: 12px;
}
.btn,
.login-submit,
.file-upload-btn,
.global-booking-fab,
.sidebar__toggle,
.nav__item,
.portal-toggle,
.settings-check-card,
button {
  border-radius: var(--btn-radius-clean) !important;
}
.global-booking-fab {
  border-radius: 16px !important;
}

/* Einstellungen-Untermenü bleibt zu, bis Einstellungen aktiv oder geöffnet */
.settings-subnav {
  display: none !important;
}
.app.settings-menu-open .settings-subnav {
  display: flex !important;
}
.nav__item--settings {
  position: relative;
}
.nav__chevron {
  margin-left: auto;
  font-weight: 900;
  transition: transform .16s ease;
}
.app.settings-menu-open .nav__chevron {
  transform: rotate(90deg);
}
.app.sidebar-collapsed .nav__chevron {
  display: none !important;
}

/* Aufgeräumtere Settings-Unterpunkte */
.settings-subgroup a[href="#/pricing"]:not(:first-of-type) {
  display: none !important;
}

/* Apartment-Unterkarte */
.property-subcard {
  margin: 14px 0;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.property-subcard .card__header {
  padding-bottom: 8px;
}

/* Suche vorbereitet */
.menu-search {
  margin: 8px 0 10px;
}
.menu-search input {
  width: 100%;
  height: 36px;
  border-radius: var(--btn-radius-clean);
  border: 1px solid var(--side-border);
  background: rgba(255,255,255,.55);
  padding: 0 10px;
  color: var(--side-text);
}
.menu-search input::placeholder {
  color: rgba(82,116,106,.8);
}


/* ============================================================
   v0.8.3 – Einstellungen-Ausklappen + sichtbare Suche Fix
   ============================================================ */
.nav button.nav__item {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.app.settings-menu-open .settings-subnav,
.settings-menu-open .settings-subnav {
  display: flex !important;
}
.menu-search {
  display: block !important;
  padding: 0 2px;
}
.menu-search input {
  display: block !important;
}


/* ============================================================
   v0.8.4 – Rechtliches
   ============================================================ */
.legal-docs-grid {
  margin-top: 16px;
}
.legal-doc-card {
  border-color: rgba(12,89,73,.16);
}
.legal-public {
  min-height: 100vh;
  background: linear-gradient(180deg, #f3fbf7 0%, #ffffff 55%);
  color: var(--text);
}
.legal-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 18px 44px;
}
.legal-head {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--bp-login-green-2), var(--bp-login-green-1));
  color: white;
  box-shadow: 0 18px 40px rgba(7,75,60,.18);
  margin-bottom: 18px;
}
.legal-head h1 {
  margin: 0 0 4px;
  font-size: clamp(26px, 4vw, 40px);
}
.legal-head p {
  margin: 0;
  color: rgba(255,255,255,.82);
}
#legal-logo img {
  max-width: 140px;
  max-height: 72px;
  object-fit: contain;
  background: white;
  border-radius: 16px;
  padding: 8px;
}
.legal-card {
  background: white;
  border: 1px solid rgba(12,89,73,.12);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(7,63,53,.06);
}
.legal-card pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  line-height: 1.65;
  margin: 0;
}

/* v1.3.201: Footer-Navigation auf öffentlichen Rechts-Seiten */
.legal-footer-nav {
  margin-top: 28px;
  text-align: center;
  padding: 18px 0;
  font-size: 13px;
  color: #6a7677;
}
.legal-footer-nav a {
  color: #0c5a49;
  text-decoration: none;
  font-weight: 600;
  margin: 0 4px;
  transition: color .15s ease;
}
.legal-footer-nav a:hover {
  color: #c9a961;
}
.legal-footer-nav span {
  color: #c0c8c8;
  margin: 0 2px;
}


/* ============================================================
   v0.8.5 – Account-Menü & Abo-Struktur
   ============================================================ */
.dashboard-user-pill {
  position: relative;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.account-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 42px;
  height: 42px;
  border: 1px solid rgba(12,89,73,.16);
  border-radius: 16px !important;
  background: rgba(255,255,255,.85);
  color: var(--bp-login-green-1);
  cursor: pointer;
  padding: 4px;
  transition: all .18s ease;
  overflow: hidden;
}
.account-toggle .dashboard-user-pill__text,
.account-toggle__chevron {
  width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: width .18s ease, opacity .18s ease, margin .18s ease;
}
.dashboard-user-pill.is-open .account-toggle,
.account-toggle:hover {
  gap: 9px;
  padding: 4px 9px 4px 4px;
}
.dashboard-user-pill.is-open .account-toggle .dashboard-user-pill__text,
.account-toggle:hover .dashboard-user-pill__text {
  width: 190px;
  opacity: 1;
}
.dashboard-user-pill.is-open .account-toggle__chevron,
.account-toggle:hover .account-toggle__chevron {
  width: 14px;
  opacity: 1;
}
.dashboard-user-pill.is-open .account-toggle__chevron {
  transform: rotate(90deg);
}
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  display: none;
  z-index: 40;
  background: #fff;
  border: 1px solid rgba(12,89,73,.14);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(7,63,53,.16);
  padding: 10px;
}
.dashboard-user-pill.is-open .account-menu {
  display: grid;
  gap: 8px;
}
.account-menu__head {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 14px;
  background: var(--surface-2);
}
.account-menu__head div:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.account-menu__head strong,
.account-menu__head span,
.account-menu__head em {
  overflow-wrap: anywhere;
}
.account-menu__head span,
.account-menu__head em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}
.account-menu__plan {
  padding: 10px;
  border-radius: 14px;
  background: var(--brand-50);
  display: grid;
  gap: 2px;
}
.account-menu__plan span,
.account-menu__plan small {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}
.account-menu__plan strong {
  color: var(--bp-login-green-1);
}
.account-menu__item {
  border: 0;
  background: transparent;
  color: var(--text-2);
  text-decoration: none;
  text-align: left;
  border-radius: 12px;
  padding: 9px 10px;
  font-weight: 850;
  cursor: pointer;
}
.account-menu__item:hover {
  background: rgba(12,89,73,.08);
  color: var(--bp-login-green-1);
}
.account-menu__logout {
  color: #0b5848;
  border-top: 1px solid var(--border);
}
.subscription-card {
  margin-top: 16px;
  border: 1px solid var(--border);
}
.subscription-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.subscription-summary div {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.subscription-summary span {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
}
.subscription-summary strong {
  color: var(--bp-login-green-1);
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.plan-card {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
}
.plan-card.is-current {
  border-color: rgba(12,89,73,.45);
  background: rgba(12,89,73,.045);
}
.plan-card strong {
  display:block;
  color: var(--bp-login-green-1);
  font-size: 16px;
}
.plan-card span {
  display:block;
  margin: 4px 0;
  color: var(--text);
  font-weight: 900;
}
.plan-card p {
  color: var(--text-3);
  font-size: 12px;
  min-height: 32px;
}
.plan-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.plan-card__features em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 7px;
  background: var(--brand-50);
  color: var(--bp-login-green-1);
}
.subscription-note {
  margin-top: 14px;
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: var(--r-md);
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.22);
}
.subscription-note span {
  color: var(--text-2);
  font-size: 12px;
}


/* ============================================================
   v0.8.6 – Gästemappe Vorschau, Aktivitäten, Wetter vorbereitet
   ============================================================ */
.guestguide-activity-row {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 12px;
  margin-bottom: 12px;
}
.guestguide-activity-row__head {
  display: grid;
  grid-template-columns: 90px minmax(180px, 1fr) 160px auto;
  gap: 10px;
  align-items: end;
}
.guestguide-activity-preview {
  margin-top: 10px;
  min-height: 74px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}
.guestguide-activity-preview img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}
.guestguide-weather-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: start;
  background: linear-gradient(135deg, rgba(12,89,73,.08), rgba(245,158,11,.10));
  border: 1px solid rgba(12,89,73,.14);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(7,63,53,.06);
  margin-bottom: 14px;
}
.guestguide-weather-card h2 {
  color: var(--bp-login-green-1);
  margin-bottom: 8px;
}
.guestguide-weather-card p {
  color: var(--text-2);
  line-height: 1.55;
}
.guestguide-weather-placeholder {
  display: inline-grid;
  gap: 2px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(12,89,73,.12);
}
.guestguide-weather-placeholder span {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 900;
}
.guestguide-weather-placeholder strong {
  color: var(--bp-login-green-1);
}
.guestguide-section-title {
  margin: 22px 0 12px;
}
.guestguide-section-title h2 {
  color: var(--bp-login-green-1);
}
.guestguide-section-title p {
  color: var(--text-3);
}
.guestguide-activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.guestguide-activity-card {
  overflow: hidden;
  border: 1px solid rgba(12,89,73,.12);
  border-radius: 22px;
  background: white;
  box-shadow: 0 10px 24px rgba(7,63,53,.06);
}
.guestguide-activity-card img,
.guestguide-activity-card__empty {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  font-size: 38px;
}
.guestguide-activity-card > div:last-child {
  padding: 14px;
}
.guestguide-activity-card span {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  color: var(--bp-login-green-1);
  background: var(--brand-50);
  border-radius: 999px;
  padding: 4px 8px;
  margin-bottom: 8px;
}
.guestguide-activity-card h3 {
  margin-bottom: 8px;
}
.guestguide-activity-card p {
  color: var(--text-2);
  line-height: 1.5;
}
.guestguide-activity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.guestguide-activity-meta em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 4px 7px;
}
.guestguide-activity-card a {
  color: var(--bp-login-green-1);
  font-weight: 900;
  text-decoration: none;
}
@media (max-width: 800px) {
  .guestguide-activity-row__head,
  .guestguide-weather-card {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v0.8.7 – Gästemappe Aktivitäts-Kategorien
   ============================================================ */
.guestguide-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.guestguide-category-tabs a {
  color: var(--bp-login-green-1);
  background: var(--brand-50);
  border: 1px solid rgba(12,89,73,.12);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}
.guestguide-activity-category {
  scroll-margin-top: 18px;
  margin-bottom: 20px;
}
.guestguide-activity-category > h3 {
  color: var(--bp-login-green-1);
  margin: 14px 0 10px;
}
.guestguide-activity-row .select {
  min-width: 100%;
}


/* ============================================================
   v0.8.8 – Gästemappe Layout/Kacheln
   ============================================================ */
.guestguide-row__top {
  grid-template-columns: 90px minmax(160px, 1fr) 160px auto;
}
.guestguide-activity-row__head {
  grid-template-columns: 90px minmax(180px, 1fr) 160px 150px auto;
}
.guestguide-sections {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.guestguide-sections .guestguide-card {
  margin-bottom: 0;
}
.guestguide-card.is-compact,
.guestguide-activity-card.is-compact {
  grid-column: span 1;
}
.guestguide-card.is-normal,
.guestguide-activity-card.is-normal {
  grid-column: span 2;
}
.guestguide-card.is-wide,
.guestguide-activity-card.is-wide {
  grid-column: span 3;
}
.guestguide-card.is-full,
.guestguide-activity-card.is-full {
  grid-column: 1 / -1;
}
.guestguide-activity-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.guestguide-activity-card.is-compact img,
.guestguide-activity-card.is-compact .guestguide-activity-card__empty {
  height: 110px;
}
.guestguide-activity-card.is-wide,
.guestguide-activity-card.is-full {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) 1.1fr;
}
.guestguide-activity-card.is-wide img,
.guestguide-activity-card.is-wide .guestguide-activity-card__empty,
.guestguide-activity-card.is-full img,
.guestguide-activity-card.is-full .guestguide-activity-card__empty {
  height: 100%;
  min-height: 190px;
}
@media (max-width: 900px) {
  .guestguide-sections,
  .guestguide-activity-grid {
    grid-template-columns: 1fr;
  }
  .guestguide-card.is-compact,
  .guestguide-card.is-normal,
  .guestguide-card.is-wide,
  .guestguide-card.is-full,
  .guestguide-activity-card.is-compact,
  .guestguide-activity-card.is-normal,
  .guestguide-activity-card.is-wide,
  .guestguide-activity-card.is-full {
    grid-column: 1 / -1;
  }
  .guestguide-activity-card.is-wide,
  .guestguide-activity-card.is-full {
    grid-template-columns: 1fr;
  }
  .guestguide-activity-row__head {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v0.8.9 – Gästemappe Hero, Logo, Wetter-PLZ, Top 3
   ============================================================ */
.guestguide-hero {
  position: relative;
  min-height: 340px;
  border-radius: 28px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin-bottom: 18px;
  box-shadow: 0 18px 42px rgba(7,63,53,.16);
}
.guestguide-hero__overlay {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 24px 28px;
  color: #fff;
}
.guestguide-hero__logo img {
  max-width: 160px;
  max-height: 88px;
  object-fit: contain;
  background: rgba(255,255,255,.96);
  border-radius: 18px;
  padding: 8px 12px;
  box-shadow: 0 8px 20px rgba(7,63,53,.14);
}
.guestguide-hero__content {
  max-width: 820px;
}
.guestguide-hero__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .03em;
}
.guestguide-hero__content h1 {
  margin: 0;
  font-size: clamp(26px, 5vw, 42px);
  color: #fff;
}
.guestguide-hero__content h2 {
  margin: 10px 0 8px;
  font-size: clamp(20px, 3vw, 28px);
  color: rgba(255,255,255,.95);
}
.guestguide-hero__subtitle,
.guestguide-hero__intro {
  max-width: 760px;
  color: rgba(255,255,255,.92);
  line-height: 1.6;
}
.guestguide-top-activities {
  margin-bottom: 18px;
}
.guestguide-activity-grid--top3 .guestguide-activity-card {
  border-color: rgba(12,89,73,.18);
}
.guestguide-activity-card.is-featured span {
  background: rgba(245,158,11,.14);
  color: #8a5200;
}
.guestguide-hero-preview {
  margin-top: 10px;
  min-height: 120px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}
.guestguide-hero-preview img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}
.settings-check-card--inline {
  min-height: 44px;
}
.guestguide-row__top {
  display: grid;
  grid-template-columns: 160px 120px minmax(200px, 1fr) 160px auto;
  gap: 10px;
  align-items: end;
}
.guestguide-activity-row__head {
  display: grid;
  grid-template-columns: 160px minmax(220px, 1fr) 180px 150px auto;
  gap: 10px;
  align-items: end;
}
.guestguide-sections--grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.guestguide-sections--grid .guestguide-card {
  margin-bottom: 0;
}
.guestguide-sections--grid .guestguide-card.is-compact,
.guestguide-activity-grid .guestguide-activity-card.is-compact { grid-column: span 1; }
.guestguide-sections--grid .guestguide-card.is-normal,
.guestguide-activity-grid .guestguide-activity-card.is-normal { grid-column: span 2; }
.guestguide-sections--grid .guestguide-card.is-wide,
.guestguide-activity-grid .guestguide-activity-card.is-wide { grid-column: span 3; }
.guestguide-sections--grid .guestguide-card.is-full,
.guestguide-activity-grid .guestguide-activity-card.is-full { grid-column: 1 / -1; }
.guestguide-activity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.guestguide-activity-card.is-wide,
.guestguide-activity-card.is-full {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) 1.1fr;
}
.guestguide-activity-card.is-wide img,
.guestguide-activity-card.is-wide .guestguide-activity-card__empty,
.guestguide-activity-card.is-full img,
.guestguide-activity-card.is-full .guestguide-activity-card__empty {
  height: 100%;
  min-height: 190px;
}
@media (max-width: 980px) {
  .guestguide-row__top,
  .guestguide-activity-row__head,
  .guestguide-sections--grid,
  .guestguide-activity-grid {
    grid-template-columns: 1fr;
  }
  .guestguide-sections--grid .guestguide-card,
  .guestguide-activity-grid .guestguide-activity-card {
    grid-column: 1 / -1 !important;
  }
  .guestguide-activity-card.is-wide,
  .guestguide-activity-card.is-full {
    grid-template-columns: 1fr;
  }
  .guestguide-hero,
  .guestguide-hero__overlay {
    min-height: 280px;
  }
}


/* ============================================================
   v0.9.0 – Gästemappe Premium-Relayout
   ============================================================ */
.guestguide-hero {
  position: relative;
  min-height: 360px;
  border-radius: 28px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin-bottom: 18px;
  box-shadow: 0 18px 42px rgba(7,63,53,.16);
}
.guestguide-hero__overlay {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 24px 28px;
  color: #fff;
}
.guestguide-hero__top {
  display: flex;
  justify-content: flex-start;
}
.guestguide-hero__logo img {
  max-width: 170px;
  max-height: 92px;
  object-fit: contain;
  background: rgba(255,255,255,.98);
  border-radius: 18px;
  padding: 8px 12px;
  box-shadow: 0 8px 20px rgba(7,63,53,.14);
}
.guestguide-hero__content {
  max-width: 820px;
}
.guestguide-hero__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .03em;
}
.guestguide-hero__content h1 {
  margin: 0;
  font-size: clamp(28px, 5vw, 44px);
  color: #fff;
}
.guestguide-hero__content h2 {
  margin: 10px 0 8px;
  font-size: clamp(20px, 3vw, 28px);
  color: rgba(255,255,255,.95);
}
.guestguide-hero__subtitle,
.guestguide-hero__intro {
  max-width: 760px;
  color: rgba(255,255,255,.93);
  line-height: 1.6;
}

.guestguide-premium-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.guestguide-quick-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(12,89,73,.12);
  background: #fff;
  box-shadow: 0 10px 24px rgba(7,63,53,.06);
}
.guestguide-quick-card__icon,
.guestguide-info-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(12,89,73,.06);
  color: var(--bp-login-green-1);
}
.guestguide-quick-card__icon svg,
.guestguide-info-card__icon svg {
  width: 22px;
  height: 22px;
}
.guestguide-quick-card h3,
.guestguide-info-card h3 {
  margin: 0 0 6px;
  color: var(--bp-login-green-1);
}
.guestguide-quick-card p {
  margin: 0 0 8px;
  color: var(--text);
  line-height: 1.55;
}
.guestguide-quick-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.guestguide-quick-card__meta span,
.guestguide-activity-meta em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 4px 7px;
}
.guestguide-quick-card__links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.guestguide-quick-card__links a,
.guestguide-top3-card__body a,
.guestguide-activity-card-clean__body a {
  color: var(--bp-login-green-1);
  font-weight: 900;
  text-decoration: none;
}

.guestguide-top-activities {
  margin-bottom: 20px;
}
.guestguide-top3-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.guestguide-top3-card {
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(12,89,73,.12);
  box-shadow: 0 16px 30px rgba(7,63,53,.08);
}
.guestguide-top3-card__image {
  position: relative;
  height: 200px;
  background: var(--surface-2);
}
.guestguide-top3-card__image img,
.guestguide-top3-card__image .guestguide-activity-card__empty {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guestguide-top3-card__badge {
  position: absolute;
  left: 14px;
  top: 14px;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #8a5200;
  font-size: 12px;
  font-weight: 900;
}
.guestguide-top3-card__body {
  padding: 18px;
}
.guestguide-top3-card__category,
.guestguide-activity-card-clean__category {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--bp-login-green-1);
  font-size: 11px;
  font-weight: 900;
}
.guestguide-top3-card__body h3 {
  margin: 0 0 8px;
}
.guestguide-top3-card__body p {
  color: var(--text-2);
  line-height: 1.6;
}

.guestguide-sections--clean {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.guestguide-info-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(12,89,73,.12);
  background: #fff;
  box-shadow: 0 10px 24px rgba(7,63,53,.06);
}
.guestguide-info-card__body p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.65;
}
.guestguide-info-card.is-compact { grid-column: span 1; }
.guestguide-info-card.is-normal { grid-column: span 2; }
.guestguide-info-card.is-wide { grid-column: span 3; }
.guestguide-info-card.is-full { grid-column: 1 / -1; }

.guestguide-readmore {
  margin-top: 10px;
}
.guestguide-readmore summary {
  cursor: pointer;
  list-style: none;
  color: var(--bp-login-green-1);
  font-weight: 900;
}
.guestguide-readmore summary::-webkit-details-marker {
  display: none;
}
.guestguide-readmore div {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.guestguide-activity-group {
  margin-bottom: 22px;
}
.guestguide-activity-group__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 10px;
  margin-bottom: 10px;
}
.guestguide-activity-group__head h3 {
  margin: 0;
  color: var(--bp-login-green-1);
}
.guestguide-activity-group__head span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}
.guestguide-activity-grid--clean {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.guestguide-activity-card-clean {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(12,89,73,.12);
  background: #fff;
  box-shadow: 0 10px 24px rgba(7,63,53,.06);
}
.guestguide-activity-card-clean.is-wide,
.guestguide-activity-card-clean.is-full {
  display: grid;
  grid-template-columns: minmax(220px, .95fr) 1.1fr;
}
.guestguide-activity-card-clean.is-compact { grid-column: span 1; }
.guestguide-activity-card-clean.is-normal { grid-column: span 1; }
.guestguide-activity-card-clean.is-wide { grid-column: span 2; }
.guestguide-activity-card-clean.is-full { grid-column: 1 / -1; }
.guestguide-activity-card-clean__image {
  height: 180px;
  background: var(--surface-2);
}
.guestguide-activity-card-clean__image img,
.guestguide-activity-card-clean__image .guestguide-activity-card__empty {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guestguide-activity-card-clean__body {
  padding: 16px;
}
.guestguide-activity-card-clean__body h4 {
  margin: 0 0 8px;
  color: var(--text);
}
.guestguide-activity-card-clean__body p {
  color: var(--text-2);
  line-height: 1.58;
}

.guestguide-hero-preview {
  margin-top: 10px;
  min-height: 120px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}
.guestguide-hero-preview img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}
.settings-check-card--inline {
  min-height: 44px;
}
.guestguide-row__top {
  display: grid;
  grid-template-columns: 160px 180px minmax(220px, 1fr) 150px auto;
  gap: 10px;
  align-items: end;
}
.guestguide-activity-row__head {
  display: grid;
  grid-template-columns: 160px minmax(220px, 1fr) 180px 150px auto;
  gap: 10px;
  align-items: end;
}

@media (max-width: 1080px) {
  .guestguide-premium-quick,
  .guestguide-top3-grid,
  .guestguide-sections--clean,
  .guestguide-activity-grid--clean,
  .guestguide-row__top,
  .guestguide-activity-row__head {
    grid-template-columns: 1fr;
  }
  .guestguide-info-card,
  .guestguide-activity-card-clean,
  .guestguide-top3-card {
    grid-column: 1 / -1 !important;
  }
  .guestguide-activity-card-clean.is-wide,
  .guestguide-activity-card-clean.is-full {
    grid-template-columns: 1fr;
  }
  .guestguide-hero,
  .guestguide-hero__overlay {
    min-height: 280px;
  }
}


/* ============================================================
   v0.9.1 – Wetter-API, Slider, Dokumentvorschau
   ============================================================ */
.guestguide-weather-days {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}
.guestguide-weather-days div {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 2px 8px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(12,89,73,.055);
}
.guestguide-weather-days span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}
.guestguide-weather-days strong {
  color: var(--bp-login-green-1);
  font-size: 13px;
}
.guestguide-weather-days em {
  grid-column: 2;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
}

.guestguide-slider-wrap {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 10px;
  align-items: center;
}
.guestguide-slider-btn {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(12,89,73,.14);
  border-radius: 14px;
  background: #fff;
  color: var(--bp-login-green-1);
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(7,63,53,.06);
}
.guestguide-top3-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 1fr);
  grid-template-columns: none !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding: 2px 2px 10px;
}
.guestguide-top3-card {
  scroll-snap-align: start;
}

.guestguide-documents {
  margin: 20px 0;
}
.guestguide-document-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.guestguide-document-card {
  border: 1px solid rgba(12,89,73,.12);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(7,63,53,.06);
  padding: 18px;
}
.guestguide-document-card__head {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.guestguide-document-card__head h3 {
  margin: 0;
  color: var(--bp-login-green-1);
}
.guestguide-document-card__head p {
  margin: 3px 0 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}
.guestguide-document-preview {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  margin-bottom: 12px;
  min-height: 220px;
}
.guestguide-document-preview iframe {
  width: 100%;
  height: 360px;
  border: 0;
  background: #fff;
}
.guestguide-document-preview img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  display: block;
  background: #fff;
}
.guestguide-document-preview a {
  display: grid;
  place-items: center;
  min-height: 220px;
  color: var(--bp-login-green-1);
  font-weight: 900;
  text-decoration: none;
}
.guestguide-document-card > p {
  color: var(--text-2);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .guestguide-document-grid {
    grid-template-columns: 1fr;
  }
  .guestguide-slider-wrap {
    grid-template-columns: 1fr;
  }
  .guestguide-slider-btn {
    display: none;
  }
}


/* ============================================================
   v0.9.2 – Gästemappe Usability: Karussell, Einzelkarten, Admin-Fix
   ============================================================ */

/* Wenn nur eine Aktivität in einer Kategorie vorhanden ist, wird sie automatisch groß dargestellt. */
.guestguide-activity-group.is-single .guestguide-activity-grid--clean {
  grid-template-columns: 1fr !important;
}
.guestguide-activity-group.is-single .guestguide-activity-card-clean {
  grid-column: 1 / -1 !important;
  display: grid;
  grid-template-columns: minmax(260px, .75fr) 1.25fr;
}
.guestguide-activity-group.is-single .guestguide-activity-card-clean__image {
  min-height: 220px;
}

/* Top-3 ist jetzt auch als automatisches Karussell nutzbar */
.guestguide-top3-grid {
  scroll-behavior: smooth;
}
.guestguide-slider-btn {
  transition: transform .14s ease, box-shadow .14s ease;
}
.guestguide-slider-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(7,63,53,.12);
}

/* Admin: Gästemappe-Einstellungen deutlicher und ruhiger */
#guestguide-form > .card {
  border: 1px solid rgba(12,89,73,.14);
  box-shadow: 0 10px 24px rgba(7,63,53,.045);
}
#guestguide-form > .card > .card__header {
  margin: -12px -12px 14px;
  padding: 14px 16px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(180deg, rgba(12,89,73,.08), rgba(12,89,73,.035));
  border-bottom: 1px solid rgba(12,89,73,.10);
}
#guestguide-form > .card > .card__header h3 {
  color: var(--bp-login-green-1);
  font-size: 18px;
}
.guestguide-admin-list {
  display: grid;
  gap: 12px;
}
.guestguide-row,
.guestguide-activity-row {
  border: 1px solid rgba(12,89,73,.14) !important;
  border-radius: 18px !important;
  background: #fff !important;
  padding: 14px !important;
  overflow: hidden;
}
.guestguide-row.is-new,
.guestguide-activity-row.is-new {
  outline: 3px solid rgba(12,89,73,.24);
  box-shadow: 0 0 0 6px rgba(12,89,73,.08);
}
.guestguide-row__top,
.guestguide-activity-row__head {
  display: grid !important;
  grid-template-columns: minmax(140px, .7fr) minmax(190px, 1fr) minmax(160px, .75fr) minmax(130px, .65fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
}
.guestguide-row__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.guestguide-row__actions .btn,
.guestguide-activity-row__head .btn[data-activity-remove] {
  white-space: nowrap;
  max-width: 100%;
}
.guestguide-activity-row__head .btn[data-activity-remove] {
  align-self: end;
  justify-self: end;
}
.guestguide-add-row {
  display: flex;
  justify-content: center;
  padding: 12px 0 2px;
}
.guestguide-add-row .btn {
  min-width: 240px;
}

/* Bei engen Admin-Breiten konsequent einspaltig, damit Entfernen-Buttons nicht aus dem Frame laufen. */
@media (max-width: 1280px) {
  .guestguide-row__top,
  .guestguide-activity-row__head {
    grid-template-columns: 1fr 1fr !important;
  }
  .guestguide-row__actions,
  .guestguide-activity-row__head .btn[data-activity-remove] {
    justify-self: stretch;
  }
  .guestguide-activity-row__head .btn[data-activity-remove] {
    width: 100%;
  }
}
@media (max-width: 760px) {
  .guestguide-row__top,
  .guestguide-activity-row__head,
  .guestguide-activity-group.is-single .guestguide-activity-card-clean {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   v0.9.3 – Aktivitäten standardmäßig einklappbar
   ============================================================ */
.guestguide-activity-row {
  padding: 0 !important;
}
.guestguide-activity-summary {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto 24px;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  padding: 14px;
  list-style: none;
  background: linear-gradient(180deg, rgba(12,89,73,.055), rgba(12,89,73,.025));
}
.guestguide-activity-summary::-webkit-details-marker {
  display: none;
}
.guestguide-activity-summary__title {
  color: var(--bp-login-green-1);
  font-weight: 950;
  overflow-wrap: anywhere;
}
.guestguide-activity-summary__meta {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}
.guestguide-activity-summary__chevron {
  color: var(--bp-login-green-1);
  font-weight: 950;
  font-size: 20px;
  transform: rotate(0deg);
  transition: transform .16s ease;
}
.guestguide-activity-row[open] .guestguide-activity-summary__chevron {
  transform: rotate(90deg);
}
.guestguide-activity-row__body {
  padding: 14px;
  border-top: 1px solid rgba(12,89,73,.10);
}
@media (max-width: 760px) {
  .guestguide-activity-summary {
    grid-template-columns: 1fr 24px;
  }
  .guestguide-activity-summary__meta {
    grid-column: 1 / -1;
    text-align: left;
  }
}


/* ============================================================
   v0.9.4 – Gästemappe Bereiche verschiebbar / Karussell 2s / Raster-Fix
   ============================================================ */
.guestguide-block-order-list {
  display: grid;
  gap: 8px;
}
.guestguide-block-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(12,89,73,.14);
  border-radius: 14px;
  background: #fff;
}
.guestguide-block-order-row span {
  color: var(--bp-login-green-1);
  font-weight: 900;
}
.guestguide-block-order-row div {
  display: flex;
  gap: 6px;
}
.mt-8 {
  margin-top: 8px;
}

/* Infokarten dichter auffüllen und weniger chaotische Lücken erzeugen */
.guestguide-sections--clean {
  grid-auto-flow: dense;
  align-items: stretch;
}
.guestguide-sections--clean .guestguide-info-card {
  min-width: 0;
}

/* Wenn nur wenige Karten in der letzten Zeile stehen, optisch mittiger wirken lassen */
.guestguide-sections--clean:has(> .guestguide-info-card:only-child) {
  grid-template-columns: minmax(280px, 720px);
  justify-content: center;
}
.guestguide-sections--clean:has(> .guestguide-info-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(280px, 460px));
  justify-content: center;
}
.guestguide-sections--clean:has(> .guestguide-info-card:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(240px, 360px));
  justify-content: center;
}

/* Normale Infokarten nicht unnötig breit ziehen, damit Check-in / Parken / WLAN sauberer laufen */
.guestguide-info-card.is-compact { grid-column: span 1; }
.guestguide-info-card.is-normal { grid-column: span 2; }
.guestguide-info-card.is-wide { grid-column: span 2; }
.guestguide-info-card.is-full { grid-column: 1 / -1; }

@media (max-width: 1080px) {
  .guestguide-sections--clean,
  .guestguide-sections--clean:has(> .guestguide-info-card:only-child),
  .guestguide-sections--clean:has(> .guestguide-info-card:nth-child(2):last-child),
  .guestguide-sections--clean:has(> .guestguide-info-card:nth-child(3):last-child) {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v0.9.5 – Endlos-Karussell und zentrierte Info-Karten
   ============================================================ */
.guestguide-top3-grid-static {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.guestguide-top3-grid,
.guestguide-slider-wrap,
.guestguide-slider-btn {
  display: none !important;
}

.guestguide-sections--clean {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.guestguide-sections--clean .guestguide-info-card {
  margin: 0;
}
.guestguide-sections--clean .guestguide-info-card.is-compact {
  flex: 1 1 240px;
  max-width: 320px;
}
.guestguide-sections--clean .guestguide-info-card.is-normal,
.guestguide-sections--clean .guestguide-info-card.is-wide {
  flex: 1 1 360px;
  max-width: 540px;
}
.guestguide-sections--clean .guestguide-info-card.is-full {
  flex: 1 1 100%;
  max-width: 100%;
}

@media (max-width: 980px) {
  .guestguide-top3-grid-static {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v0.9.6 – Sortierung, Bildsuche und sanfteres Karussell
   ============================================================ */
.guestguide-top3-grid-static {
  transition: opacity .18s ease, transform .18s ease;
}
.guestguide-top3-grid-static.is-switching {
  opacity: .16;
  transform: translateY(4px);
}

.guestguide-image-tools {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.guestguide-row__actions--activity {
  align-self: end;
  justify-self: end;
}
.guestguide-row__actions--activity .btn {
  white-space: nowrap;
}

@media (max-width: 980px) {
  .guestguide-image-tools {
    grid-template-columns: 1fr;
  }
  .guestguide-row__actions--activity {
    justify-self: stretch;
  }
  .guestguide-row__actions--activity .btn {
    width: 100%;
  }
}


/* ============================================================
   v0.9.7 – Aktivitäts-Kategorien editierbar
   ============================================================ */
.guestguide-category-editor {
  display: grid;
  gap: 8px;
}
.guestguide-category-edit-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(12,89,73,.12);
  border-radius: 14px;
  background: #fff;
}
@media (max-width: 720px) {
  .guestguide-category-edit-row {
    grid-template-columns: 1fr;
  }
  .guestguide-category-edit-row .btn {
    width: 100%;
  }
}
\n
/* ============================================================
   v0.9.8 – Menüsuche Suchbegriffe
   ============================================================ */
#settings-subnav details[hidden],
#settings-subnav a[hidden],
#nav .nav__item[hidden] {
  display: none !important;
}


/* ============================================================
   v0.9.9 – Wetter-API fertig / Vorschau-Button Fix
   ============================================================ */
.weather-test-result {
  margin-top: 12px;
}
.weather-test-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(12,89,73,.14);
  background: #fff;
}
.weather-test-card strong {
  color: var(--bp-login-green-1);
}
.weather-test-card span,
.weather-test-card em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.weather-test-card--ok {
  background: rgba(12,89,73,.05);
}
.weather-test-card--warn {
  background: rgba(245,158,11,.09);
  border-color: rgba(245,158,11,.22);
}
#guestguide-weather-current small {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}
.guestguide-weather-days {
  grid-template-columns: 1fr;
}


/* ============================================================
   v1.0.0 – Wetter-SVG-Icons
   ============================================================ */
.guestguide-weather-main-icon {
  background: rgba(12,89,73,.08);
}
.guestguide-weather-main-icon svg {
  width: 25px;
  height: 25px;
}
.guestguide-weather-day {
  grid-template-columns: 46px 30px 1fr !important;
}
.guestguide-weather-day__icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--bp-login-green-1);
  background: rgba(12,89,73,.06);
  border-radius: 10px;
}
.guestguide-weather-day__icon svg {
  width: 18px;
  height: 18px;
}
.guestguide-weather-day em {
  grid-column: 3 !important;
}


/* ============================================================
   v1.0.3 – Buchungsregeln: Sperrtage und Anreisetage
   ============================================================ */
.weekday-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.weekday-picker__item {
  position: relative;
}
.weekday-picker__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.weekday-picker__item span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-2);
  font-weight: 900;
  cursor: pointer;
}
.weekday-picker__item input:checked + span {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}


/* ============================================================
   v1.0.5 – Widget Optionen nach Smoobu-Vorbild
   ============================================================ */
.widget-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.widget-option-list {
  display: grid;
  gap: 8px;
}
.widget-option-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 180px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.settings-details {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  margin: 12px 0;
  background: rgba(255,255,255,.72);
}
.settings-details > summary {
  cursor: pointer;
  font-weight: 950;
  color: var(--brand-700);
}
@media (max-width: 900px) {
  .widget-option-grid,
  .widget-option-row {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v1.0.6 – Website-Widget Integration
   ============================================================ */
.widget-property-selection {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 900px) {
  .widget-property-selection {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v1.0.8 – Belegungskalender pro Apartment/anonym
   ============================================================ */
.occupancy-property-snippet {
  margin-top: 8px;
}
.occupancy-property-snippet textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}


/* ============================================================
   v1.0.9 – Widget/Belegungskalender Designoptionen
   ============================================================ */
.color-control {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: center;
}
.color-control input[type="color"] {
  min-height: 42px;
  padding: 5px;
}
.color-control span {
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}


/* ============================================================
   v1.1.0 – Widget/Belegungskalender Aufräumung
   ============================================================ */
.color-control {
  display: block !important;
}
.color-control input[type="color"] {
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 4px;
  border-radius: 14px;
}
.color-control span {
  display: none !important;
}


/* ============================================================
   v1.1.3 – Kompakte Farbauswahl
   ============================================================ */
.color-control {
  display: inline-grid !important;
  grid-template-columns: 42px 1fr;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.color-control input[type="color"] {
  width: 42px !important;
  min-width: 42px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 3px !important;
  border-radius: 10px !important;
}
.color-control span {
  display: block !important;
  height: 34px !important;
  min-width: 64px;
  border-radius: 10px !important;
  border: 1px solid var(--border);
}


/* ============================================================
   v1.1.4 – Farbauswahl ohne Zusatzfeld
   ============================================================ */
.color-control {
  display: block !important;
  width: 56px !important;
}
.color-control input[type="color"] {
  width: 56px !important;
  min-width: 56px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 2px !important;
  border-radius: 8px !important;
}
.color-control span {
  display: none !important;
}


/* ============================================================
   v1.1.5 – Gutscheincode-Verwaltung
   ============================================================ */
.widget-option-row--coupon {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}
.widget-option-row--coupon .settings-check-card,
.widget-option-row--coupon .btn {
  align-self: end;
}
@media (max-width: 1100px) {
  .widget-option-row--coupon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .widget-option-row--coupon {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v1.1.7 – Beta-Aufräumung, Wizard und Suchziele
   ============================================================ */
.wizard-card {
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding: 22px;
}
.wizard-progress {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}
.wizard-progress__bar {
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}
.wizard-progress__bar span {
  display: block;
  height: 100%;
  background: var(--brand-700);
}
.wizard-progress__meta {
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}
.wizard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.wizard-intro,
.wizard-summary {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  line-height: 1.6;
}
.wizard-summary {
  display: grid;
  gap: 8px;
}
.search-target-highlight {
  outline: 3px solid rgba(21,128,61,.35);
  box-shadow: 0 0 0 8px rgba(21,128,61,.08);
  transition: outline .2s ease, box-shadow .2s ease;
}
.beta-start-card {
  margin-bottom: 18px;
}
.beta-start-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.beta-start-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: var(--brand-800);
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}
.beta-start-link:hover {
  background: var(--brand-50);
}
@media (max-width: 1100px) {
  .beta-start-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .beta-start-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v1.1.8 – Optimierter Einrichtungs-Wizard
   ============================================================ */
.wizard-header h2 {
  margin-bottom: 4px;
}
.wizard-step-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wizard-step-labels span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.wizard-step-labels span.is-active {
  color: var(--brand-800);
  border-color: rgba(21,128,61,.35);
  background: var(--brand-50);
}
.wizard-step-labels span.is-done {
  color: #fff;
  border-color: var(--brand-700);
  background: var(--brand-700);
}
.wizard-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.wizard-choice {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.wizard-choice:hover {
  border-color: rgba(21,128,61,.35);
  background: var(--brand-50);
}
.wizard-choice strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 16px;
}
.wizard-choice span {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}
@media (max-width: 760px) {
  .wizard-choice-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v1.1.9 – Status & Betreiber-Konsole
   ============================================================ */
.status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.status-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
}
.status-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.status-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 950;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.status-badge--ok {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
.status-badge--warn {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.status-badge--info {
  background: #eef2ff;
  color: #3730a3;
  border-color: #c7d2fe;
}
.log-list {
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow: auto;
}
.log-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 10px;
}
.log-item small {
  color: var(--muted);
  display: block;
  margin-top: 4px;
}
.log-item p {
  margin: 8px 0 0;
  color: var(--muted);
}
.table-wrap {
  overflow: auto;
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th,
.table td {
  text-align: left;
  border-bottom: 1px solid var(--border);
  padding: 10px;
  vertical-align: top;
}
@media (max-width: 1100px) {
  .status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .status-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v1.2.2 – Wizard Wohnungen & iCal
   ============================================================ */
.wizard-second-property.is-muted {
  opacity: .55;
}
.wizard-second-property.is-muted input {
  pointer-events: none;
}


/* ============================================================
   v1.2.3 – Wizard: technische Basis-URL ausgeblendet
   ============================================================ */
.wizard-info-box {
  display: grid;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--brand-50);
  padding: 12px 14px;
  align-self: end;
}
.wizard-info-box strong {
  color: var(--ink);
}
.wizard-info-box span {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}


/* ============================================================
   v1.2.4 – Kalender Wochenenden & Ferien/Preisregeln Vorbereitung
   v1.3.153: Wochenende und Feiertage deutlicher rötlich einfärben,
   wie es schon mal war
   ============================================================ */
.cal-headcell--weekend,
.cal-cell--weekend {
  background: rgba(220, 38, 38, 0.10);
}
.cal-cell--weekend.cal-cell--past {
  background: rgba(220, 38, 38, 0.06);
}
.cal-headcell--holiday,
.cal-cell--holiday {
  background: rgba(220, 38, 38, 0.18);
}
.cal-cell--holiday.cal-cell--past {
  background: rgba(220, 38, 38, 0.10);
}
.cal-cell--vacation:not(.cal-cell--booked) {
  box-shadow: inset 0 -3px 0 rgba(217, 119, 6, 0.45);
}
.cal-headcell--weekend .cal-headcell__wd,
.cal-cell--weekend .cal-cell__top span:first-child,
.cal-headcell--holiday .cal-headcell__wd,
.cal-cell--holiday .cal-cell__top span:first-child {
  color: #991b1b;
  font-weight: 700;
}
.price-tools-grid,
.holiday-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.holiday-source-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 8px;
}
.holiday-source-card strong {
  color: var(--ink);
}
.holiday-source-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.price-tool-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 10px;
}
@media (max-width: 1100px) {
  .price-tools-grid,
  .holiday-source-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .price-tools-grid,
  .holiday-source-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v1.2.6 – Ferienauswahl als Checkbox, Kalenderanzeige, deutsche Labels
   ============================================================ */
.holiday-source-card--choice {
  cursor: pointer;
  position: relative;
  padding-left: 42px;
}
.holiday-source-card--choice input[type="checkbox"] {
  position: absolute;
  left: 14px;
  top: 16px;
  width: 18px;
  height: 18px;
  accent-color: var(--brand-700);
}
.holiday-source-card--choice.is-selected {
  border-color: rgba(21,128,61,.42);
  background: var(--brand-50);
}
.cal-cell__dot--vacation {
  background: var(--accent) !important;
}


/* ============================================================
   v1.2.7 – Ferienregionen vollständig & Kalender nur Auswahl
   ============================================================ */
.holiday-source-hint {
  border: 1px solid var(--border);
  background: var(--brand-50);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.4;
  margin-bottom: 12px;
}
.holiday-source-group {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.holiday-source-group h3 {
  margin: 0;
  font-size: 15px;
}
.holiday-source-group .holiday-source-grid {
  margin-top: 0;
}


/* ============================================================
   v1.2.8 – Preisaktions-Maske aufgabengerecht
   ============================================================ */
.price-tool-section {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
}
.price-tool-section[hidden] {
  display: none !important;
}


/* ============================================================
   v1.2.9 – Geladene Ferientermine sichtbar anzeigen
   ============================================================ */
.holiday-date-panel {
  display: grid;
  gap: 12px;
}
.holiday-date-yearbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--brand-50);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.holiday-date-yearbar span {
  color: var(--muted);
  font-weight: 800;
}
.holiday-date-source {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.holiday-date-source.is-empty {
  opacity: .75;
}
.holiday-date-source__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.holiday-date-source__head span,
.holiday-date-source__head em {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.holiday-date-list {
  display: grid;
  gap: 8px;
}
.holiday-date-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  background: #fbfffc;
}
.holiday-date-row:hover {
  border-color: rgba(21,128,61,.35);
  background: var(--brand-50);
}
.holiday-date-row span {
  display: grid;
  gap: 2px;
}
.holiday-date-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}
.input--compact {
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
}


/* ============================================================
   v1.2.11 – PWA & Handy-Ansicht
   ============================================================ */
.mobile-menu-button,
.mobile-menu-backdrop {
  display: none;
}

@media (display-mode: standalone) {
  body {
    overscroll-behavior-y: contain;
  }
}

@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  html,
  body {
    min-width: 0;
    overflow-x: hidden;
    background: var(--bg);
  }

  .app {
    display: block;
    min-height: 100dvh;
  }

  .main {
    min-width: 0;
    width: 100%;
    padding-left: 0;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 70;
    min-height: 68px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    background: rgba(250, 250, 249, .94);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    gap: 10px;
  }

  .mobile-menu-button {
    display: inline-flex;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    flex: 0 0 auto;
    box-shadow: var(--shadow-soft);
  }

  .mobile-menu-button span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 999px;
    background: var(--brand-900);
  }

  .topbar__left {
    min-width: 0;
  }

  .topbar__title {
    font-size: 20px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar__subtitle {
    display: none;
  }

  .dashboard-user-pill {
    max-width: 52px;
  }

  .dashboard-user-pill__meta {
    display: none;
  }

  .content {
    padding: 14px;
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .sidebar {
    position: fixed;
    z-index: 90;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(88vw, 330px);
    height: 100dvh;
    transform: translateX(-105%);
    transition: transform .22s ease;
    border-radius: 0 22px 22px 0;
    box-shadow: 30px 0 70px rgba(12, 26, 18, .28);
    padding-top: env(safe-area-inset-top);
  }

  .app.mobile-menu-open .sidebar {
    transform: translateX(0);
  }

  .mobile-menu-backdrop {
    position: fixed;
    z-index: 80;
    inset: 0;
    background: rgba(12, 26, 18, .42);
    backdrop-filter: blur(3px);
  }

  .mobile-menu-backdrop:not([hidden]) {
    display: block;
  }

  .sidebar__edge-toggle,
  .sidebar__scroll-cue {
    display: none !important;
  }

  .sidebar__brand {
    padding-top: 14px;
  }

  .menu-search {
    padding: 8px 14px 10px;
  }

  .menu-search input {
    min-height: 42px;
    font-size: 16px;
  }

  .nav {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .nav__item {
    min-height: 44px;
    border-radius: 14px;
  }

  .nav__icon {
    width: 20px;
    height: 20px;
  }

  .settings-subnav {
    margin: 0 10px 10px;
  }

  .settings-subgroup summary {
    min-height: 40px;
  }

  .nav__bottom {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(12,26,18,0), var(--side-bg) 18%);
  }

  .card,
  .wizard-card,
  .modal__panel {
    border-radius: 18px;
  }

  .dash-row,
  .dash-row--2,
  .grid-2,
  .grid-3,
  .grid-4,
  .kpi-grid,
  .beta-start-grid,
  .status-grid,
  .price-tools-grid,
  .holiday-source-grid {
    grid-template-columns: 1fr !important;
  }

  .filter-bar,
  .card__header,
  .calendar-header-controls,
  .form-actions,
  .wizard-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .btn,
  .input,
  .select,
  .textarea {
    font-size: 16px;
  }

  .btn {
    min-height: 42px;
    justify-content: center;
  }

  .table-wrap,
  .calendar-scroll,
  #cal-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .calendar-header-controls {
    width: 100%;
  }

  .calendar-view-toggle {
    width: 100%;
  }

  .calendar-view-toggle__btn {
    flex: 1;
  }

  .modal__panel {
    width: calc(100vw - 22px);
    max-height: calc(100dvh - 22px);
  }

  .global-booking-fab {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .global-booking-fab__label {
    display: none;
  }
}

@media (max-width: 520px) {
  .login-screen {
    padding: 14px;
  }

  .login-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .login-hero {
    display: none;
  }

  .login-card__inner {
    padding: 24px;
  }

  .content {
    padding-left: 10px;
    padding-right: 10px;
  }

  .topbar {
    padding-left: 10px;
    padding-right: 10px;
  }

  .topbar__title {
    font-size: 18px;
  }

  .kpi__value {
    font-size: 26px;
  }

  .holiday-date-row {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ============================================================
   v1.2.12 – Login/PWA Fix
   ============================================================ */
.login-submit.is-loading,
.login-demo.is-loading {
  opacity: .7;
  pointer-events: none;
}


/* ============================================================
   v1.2.13 – Handy-Menü Fix: Text sichtbar, feste 100%-Ansicht
   ============================================================ */
@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: pan-y;
  }

  body:not(.is-login) {
    position: fixed;
    inset: 0;
  }

  .app {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    display: block !important;
    grid-template-columns: none !important;
  }

  .main {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .topbar {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .sidebar {
    position: fixed !important;
    z-index: 140 !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(88vw, 340px) !important;
    max-width: min(88vw, 340px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    transform: translate3d(-105%, 0, 0) !important;
    transition: transform .22s ease !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: calc(12px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)) !important;
    border-radius: 0 22px 22px 0 !important;
  }

  .app.mobile-menu-open .sidebar {
    transform: translate3d(0, 0, 0) !important;
  }

  .app.sidebar-collapsed {
    grid-template-columns: none !important;
  }

  .app.sidebar-collapsed .sidebar {
    width: min(88vw, 340px) !important;
    max-width: min(88vw, 340px) !important;
    padding: calc(12px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .app.sidebar-collapsed .sidebar__logo {
    height: 74px !important;
    padding: 8px 10px !important;
  }

  .app.sidebar-collapsed .nav__item {
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .app.sidebar-collapsed .nav__item span,
  .app.sidebar-collapsed .nav__item .nav__chevron,
  .app.sidebar-collapsed .settings-subnav,
  .app.sidebar-collapsed .sidebar__version {
    display: inline-flex !important;
  }

  .app.sidebar-collapsed .settings-subnav {
    display: block !important;
  }

  .app.sidebar-collapsed .nav__bottom .nav__item span {
    display: inline-flex !important;
  }

  .app.sidebar-collapsed .nav__icon {
    width: 20px !important;
    height: 20px !important;
  }

  .nav {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
    padding-bottom: 12px !important;
  }

  .nav__item,
  .settings-subnav a,
  .settings-subgroup summary {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .nav__item span,
  .settings-subnav a,
  .settings-subgroup summary span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-menu-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 120 !important;
  }

  .card,
  .modal,
  .modal__panel,
  .table-wrap,
  .calendar-scroll,
  #cal-scroll,
  .price-calendar,
  .calendar-new,
  .settings-panel,
  .settings-shell,
  .settings-panels {
    max-width: 100% !important;
  }

  .table-wrap,
  #cal-scroll,
  .calendar-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .calendar-new--single,
  .calendar-new {
    width: 100% !important;
  }
}

@media (max-width: 520px) {
  .sidebar {
    width: min(92vw, 340px) !important;
    max-width: min(92vw, 340px) !important;
  }

  .app.sidebar-collapsed .sidebar {
    width: min(92vw, 340px) !important;
    max-width: min(92vw, 340px) !important;
  }
}


/* ============================================================
   v1.2.14 – Mobile Popups, Menütext, Ferienliste kompakt
   ============================================================ */
.holiday-source-group--compact {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.holiday-source-group--compact h3 {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}
.holiday-source-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.holiday-source-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 9px 10px;
  cursor: pointer;
  font-weight: 850;
  line-height: 1.2;
}
.holiday-source-row input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  accent-color: var(--brand-700);
}
.holiday-source-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.holiday-source-row.is-selected {
  border-color: rgba(21,128,61,.42);
  background: var(--brand-50);
}
@media (max-width: 1100px) {
  .holiday-source-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .holiday-source-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .app.mobile-menu-open.sidebar-collapsed .sidebar,
  .app.mobile-menu-open .sidebar {
    width: min(92vw, 350px) !important;
    max-width: min(92vw, 350px) !important;
  }

  .app.mobile-menu-open.sidebar-collapsed .nav__item,
  .app.mobile-menu-open .nav__item {
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  .app.mobile-menu-open.sidebar-collapsed .nav__item span,
  .app.mobile-menu-open.sidebar-collapsed .nav__item .nav__chevron,
  .app.mobile-menu-open.sidebar-collapsed .settings-subnav,
  .app.mobile-menu-open.sidebar-collapsed .sidebar__version,
  .app.mobile-menu-open .nav__item span,
  .app.mobile-menu-open .nav__item .nav__chevron,
  .app.mobile-menu-open .settings-subnav,
  .app.mobile-menu-open .sidebar__version {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .app.mobile-menu-open.sidebar-collapsed .settings-subnav,
  .app.mobile-menu-open .settings-subnav {
    display: block !important;
  }

  .modal {
    align-items: stretch !important;
    justify-content: center !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .modal__panel {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: min(92dvh, calc(100dvh - 16px)) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border-radius: 18px !important;
  }

  .modal__header {
    min-width: 0 !important;
    gap: 8px !important;
    padding: 14px 16px !important;
  }

  .modal__header h2,
  .modal__title {
    min-width: 0 !important;
    font-size: 20px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .modal__body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px !important;
    -webkit-overflow-scrolling: touch;
  }

  .modal__body *,
  .modal__body .card,
  .modal__body .field,
  .modal__body .grid-2,
  .modal__body .grid-3,
  .modal__body .form-actions {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .modal__body .grid-2,
  .modal__body .grid-3,
  .modal__body .form-actions {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  .modal__body .input,
  .modal__body .select,
  .modal__body .textarea {
    width: 100% !important;
    max-width: 100% !important;
  }

  .modal__body input[type="date"],
  .modal__body input[type="text"],
  .modal__body input[type="number"],
  .modal__body select {
    font-size: 16px !important;
  }

  .holiday-source-list {
    grid-template-columns: 1fr !important;
  }

  .holiday-source-row {
    padding: 11px 12px !important;
  }
}


/* ============================================================
   v1.2.15 – Ferienliste Desktop, Buchungs-Popup mobil
   ============================================================ */

/* Ferienquellen: keine abgeschnittenen Ländertexte mehr */
.holiday-source-hint {
  grid-column: 1 / -1;
}
.holiday-source-group--compact {
  min-width: 0;
}
.holiday-source-list {
  grid-template-columns: repeat(2, minmax(170px, 1fr));
}
.holiday-source-row {
  min-height: 42px;
}
.holiday-source-row span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}
@media (min-width: 1180px) {
  .holiday-source-group--compact {
    max-width: 760px;
  }
  .holiday-source-list {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

/* Datumseingaben mit dezentem Kalender-Piktogramm */
.booking-date-input {
  padding-right: 46px !important;
  background-image:
    linear-gradient(transparent, transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}

.booking-availability-inline {
  margin-top: 10px;
}
.booking-property-grid {
  margin-top: 12px;
}

/* Preisdetails grundsätzlich in der Karte halten */
#price-detail {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#price-detail .table {
  min-width: 520px;
}
.payment-card,
.payment-card .grid-2,
.payment-card .field,
.payment-card .input {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 820px) {
  .modal__panel {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    height: calc(100dvh - 22px) !important;
    max-height: calc(100dvh - 22px) !important;
  }

  #bkg-form {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #bkg-form .booking-section,
  #bkg-form .card,
  #bkg-form .field,
  #bkg-form .input,
  #bkg-form .select,
  #bkg-form .textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #bkg-form .grid-2,
  #bkg-form .booking-property-grid,
  #bkg-form .payment-card .grid-2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .booking-section--dates .grid-2:first-of-type {
    gap: 12px !important;
  }

  .booking-availability-inline {
    margin-top: 6px !important;
    order: 2;
  }

  #bkg-availability-picker {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .availability-picker,
  .availability-calendar,
  .availability-calendar__month,
  .availability-calendar__grid {
    max-width: 100% !important;
  }

  .booking-section--price .flex-between {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #btn-calc {
    width: 100% !important;
    justify-content: center !important;
  }

  #price-detail {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    border-radius: 14px;
  }

  #price-detail .table {
    min-width: 460px !important;
    font-size: 12px !important;
  }

  #price-detail .table th,
  #price-detail .table td {
    padding: 8px 10px !important;
    white-space: normal !important;
  }

  #price-detail .table th:nth-child(3),
  #price-detail .table td:nth-child(3) {
    max-width: 150px;
  }

  .payment-card {
    overflow: hidden !important;
  }

  .payment-card .card__header {
    display: block !important;
  }

  .payment-card .grid-2 {
    grid-template-columns: 1fr !important;
  }

  .payment-card .field,
  .payment-card input {
    width: 100% !important;
  }

  #payment-summary {
    overflow-wrap: anywhere;
    line-height: 1.45;
  }

  .holiday-source-hint {
    display: none !important;
  }

  .holiday-source-list {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   v1.2.16 – Mobile Fokus, Buchungen, Ferienlayout finaler
   ============================================================ */

/* Ferienauswahl: klare Liste statt versetzter Kacheln */
#ferien-preisregeln .holiday-source-wrap {
  display: grid;
  grid-template-columns: 1.25fr .75fr .75fr .75fr;
  gap: 22px;
  align-items: start;
  width: 100%;
}
#ferien-preisregeln .holiday-source-hint {
  grid-column: 1 / -1;
}
#ferien-preisregeln .holiday-source-group--compact {
  width: 100%;
  max-width: none;
}
#ferien-preisregeln .holiday-source-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
#ferien-preisregeln .holiday-source-row {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
}
#ferien-preisregeln .holiday-source-row span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
  hyphens: auto;
}
@media (min-width: 1200px) {
  #ferien-preisregeln .holiday-source-group--compact:first-of-type .holiday-source-list {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
  }
}
@media (max-width: 1100px) {
  #ferien-preisregeln .holiday-source-wrap {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  #ferien-preisregeln .holiday-source-wrap {
    grid-template-columns: 1fr;
  }
}

/* Mobilmenü: Logout/Version scrollen mit, keine fixierte Fußleiste */
@media (max-width: 820px) {
  .sidebar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .nav {
    overflow: visible !important;
    padding-bottom: 14px !important;
  }
  .nav__bottom {
    position: static !important;
    bottom: auto !important;
    background: transparent !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    margin-top: 10px !important;
  }

  /* Buchungsmodal: Tastatur/Keyboard-freundlicher */
  .modal__panel {
    max-width: calc(100vw - 18px) !important;
  }
  .modal__body {
    overscroll-behavior: contain;
    scroll-padding-bottom: 260px;
  }
  #bkg-form .booking-section {
    overflow: hidden !important;
  }
  #bkg-form .input,
  #bkg-form .select,
  #bkg-form .textarea {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Zahlungsfelder sicher im Rahmen */
  .payment-card,
  .payment-card .grid-2,
  .payment-card .field,
  .payment-card input,
  .payment-card select {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Preisberechnung nicht als breite Tabelle, sondern mobile Karten */
  #price-detail {
    overflow-x: hidden !important;
  }
  #price-detail .table {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
    font-size: 13px !important;
  }
  #price-detail .table thead {
    display: none !important;
  }
  #price-detail .table tbody,
  #price-detail .table tr,
  #price-detail .table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #price-detail .table tr {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: #fff;
  }
  #price-detail .table td {
    border: 0 !important;
    padding: 4px 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  #price-detail .table td:nth-child(1)::before { content: "Datum: "; font-weight: 850; }
  #price-detail .table td:nth-child(2)::before { content: "Basis: "; font-weight: 850; }
  #price-detail .table td:nth-child(3)::before { content: "Aufschlag: "; font-weight: 850; }
  #price-detail .table td:nth-child(4)::before { content: "Nacht: "; font-weight: 850; }

  /* Buchungsliste mobil: keine horizontale Tabelle */
  #bkg-table {
    overflow-x: hidden !important;
  }
  #bkg-table .table {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
  }
  #bkg-table .table thead {
    display: none !important;
  }
  #bkg-table .table tbody,
  #bkg-table .table tr,
  #bkg-table .table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #bkg-table .table tr {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-soft);
  }
  #bkg-table .table td {
    border: 0 !important;
    padding: 5px 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  #bkg-table .table td:nth-child(1)::before { content: "Zeitraum: "; font-weight: 850; }
  #bkg-table .table td:nth-child(2)::before { content: "Gast: "; font-weight: 850; }
  #bkg-table .table td:nth-child(3)::before { content: "Unterkunft: "; font-weight: 850; }
  #bkg-table .table td:nth-child(4)::before { content: "Kanal: "; font-weight: 850; }
  #bkg-table .table td:nth-child(5)::before { content: "Status: "; font-weight: 850; }
  #bkg-table .table td:nth-child(6)::before { content: "Zahlung: "; font-weight: 850; }
  #bkg-table .table td:nth-child(7)::before { content: "Preis: "; font-weight: 850; }

  #ferien-preisregeln .holiday-source-wrap {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   v1.2.17 – Kalender Feriennamen & Channel-Legende
   ============================================================ */
.calendar-toolbar__legend--stacked {
  display: grid;
  gap: 8px;
  align-items: start;
}
.calendar-legend-row,
.calendar-channel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.calendar-channel-legend {
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
}
.calendar-channel-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 750;
  color: var(--text-2);
  white-space: nowrap;
}
.calendar-channel-legend__item i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 0 0 3px rgba(15,23,42,.08);
}
@media (max-width: 820px) {
  .calendar-channel-legend {
    gap: 7px 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .calendar-channel-legend__item {
    flex: 0 0 auto;
  }
}

/* ============================================================
   v1.2.18 – Wizard zweite Wohnung & Startpreise erweitert
   ============================================================ */
.wizard-second-property.is-muted {
  opacity: .58;
  filter: grayscale(.08);
}
.wizard-second-property.is-muted input,
.wizard-second-property.is-muted select,
.wizard-second-property.is-muted textarea {
  background: var(--surface-2);
  cursor: not-allowed;
}
.wizard-weekdays {
  grid-column: 1 / -1;
}
.wizard-weekday-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wizard-weekday-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}
.wizard-weekday-chip input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-700);
}
.wizard-price-card .settings-check-card {
  margin-top: 12px;
}
.wizard-pet-fields {
  margin-top: 10px;
}
@media (max-width: 820px) {
  .wizard-weekday-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .wizard-weekday-chip {
    justify-content: center;
    padding: 9px 8px;
  }
}


/* ============================================================
   v1.2.19 – Kinder-Dropdown & Touch-Kalenderauswahl
   ============================================================ */
.btn--outline-green {
  border: 1px solid var(--brand-700) !important;
  color: var(--brand-800) !important;
  background: rgba(21,128,61,.06) !important;
  box-shadow: none !important;
}
.btn--outline-green:hover {
  background: rgba(21,128,61,.12) !important;
  border-color: var(--brand-800) !important;
}
.child-age-row {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}
.child-age-row .field__label {
  align-self: center;
  margin-bottom: 0;
}
.cal-cell--touch-start {
  box-shadow: inset 0 0 0 2px var(--brand-700), 0 0 0 2px rgba(21,128,61,.12);
}
@media (max-width: 820px) {
  .child-age-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  #btn-add-child {
    width: 100%;
    justify-content: center;
  }
}




/* ============================================================
   v1.2.21 – Touch-Kalenderauswahl echter Tap-Fix
   ============================================================ */
@media (pointer: coarse) {
  .cal-cell[data-empty="1"] {
    -webkit-tap-highlight-color: rgba(21,128,61,.18);
    cursor: pointer;
  }
  .cal-cell--selected,
  .cal-cell--touch-start {
    background: rgba(21,128,61,.16) !important;
    box-shadow: inset 0 0 0 2px var(--brand-700);
  }
}


/* ============================================================
   v1.2.22 – Touch-Auswahl State-Fix
   ============================================================ */
.cal-cell--touch-start {
  box-shadow: inset 0 0 0 2px var(--brand-700), 0 0 0 2px rgba(21,128,61,.12) !important;
}


/* ============================================================
   v1.2.24 – Kalender Tap-Auswahl Popup-Fix
   ============================================================ */
.cal-cell--tap-start {
  box-shadow: inset 0 0 0 2px var(--brand-700), 0 0 0 2px rgba(21,128,61,.16) !important;
}


/* ============================================================
   v1.2.25 – Kalender mobil kompakter & Einzelansicht horizontal
   ============================================================ */
.cal-single-months--scroll {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px;
  width: max-content;
  min-width: 100%;
}
.cal-single-months--scroll .cal-month-card {
  flex: 0 0 min(92vw, 520px);
}

@media (max-width: 820px) {
  #cal-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .cal-grid {
    grid-template-columns: 118px repeat(var(--cal-days, 31), minmax(42px, 44px));
  }

  .cal-rowlabel {
    width: 118px !important;
    min-width: 118px !important;
    padding: 7px 8px !important;
  }

  .cal-headcell,
  .cal-cell {
    min-width: 42px !important;
    width: 42px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 4px !important;
  }

  .cal-cell__top {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .cal-cell__price {
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  .cal-cell__price small {
    font-size: 8px !important;
  }

  .cal-cell__guest,
  .cal-cell__guest-meta {
    display: none !important;
  }

  .cal-headcell__wd {
    font-size: 9px !important;
  }

  .cal-headcell__day {
    font-size: 13px !important;
  }

  .cal-single-months--scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: max-content !important;
    min-width: 100% !important;
  }

  .cal-single-months--scroll .cal-month-card {
    flex: 0 0 86vw !important;
    max-width: 86vw !important;
  }

  .cal-grid--single-month {
    grid-template-columns: repeat(7, minmax(34px, 1fr)) !important;
  }

  .cal-grid--single-month .cal-cell,
  .cal-grid--single-month .cal-cell--blank {
    min-width: 34px !important;
    width: auto !important;
    min-height: 38px !important;
    height: 38px !important;
  }

  .cal-month-weekday {
    font-size: 10px !important;
    padding: 4px 2px !important;
  }

  .cal-single-title {
    padding: 8px 10px !important;
  }
}

@media (max-width: 420px) {
  .cal-rowlabel {
    width: 104px !important;
    min-width: 104px !important;
  }
  .cal-headcell,
  .cal-cell {
    min-width: 38px !important;
    width: 38px !important;
    min-height: 40px !important;
    height: 40px !important;
  }
  .cal-single-months--scroll .cal-month-card {
    flex-basis: 88vw !important;
    max-width: 88vw !important;
  }
}


/* ============================================================
   v1.2.26 – Rechnungsfunktion
   ============================================================ */
.invoice-item-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) 90px 130px 90px auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 10px;
}
.invoice-items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 10px;
}
.price-summary-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(21,128,61,.24);
  background: var(--brand-50);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 12px;
}
.price-summary-card span {
  color: var(--text-2);
  font-size: 13px;
}
@media (max-width: 820px) {
  .invoice-item-row {
    grid-template-columns: 1fr;
  }
  .price-summary-card {
    display: grid;
  }
  #invoice-table .table {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
  }
  #invoice-table .table thead {
    display: none !important;
  }
  #invoice-table .table tbody,
  #invoice-table .table tr,
  #invoice-table .table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #invoice-table .table tr {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-soft);
  }
  #invoice-table .table td {
    border: 0 !important;
    padding: 5px 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  #invoice-table .table td:nth-child(1)::before { content: "Rechnung: "; font-weight: 850; }
  #invoice-table .table td:nth-child(2)::before { content: "Gast: "; font-weight: 850; }
  #invoice-table .table td:nth-child(3)::before { content: "Unterkunft: "; font-weight: 850; }
  #invoice-table .table td:nth-child(4)::before { content: "Status: "; font-weight: 850; }
  #invoice-table .table td:nth-child(5)::before { content: "Betrag: "; font-weight: 850; }
}


/* ============================================================
   v1.2.27 – Nutzermanagement, Login & Account-Anfragen
   ============================================================ */
.account-request-list {
  display: grid;
  gap: 10px;
}
.account-request-item {
  display: grid;
  grid-template-columns: 160px minmax(180px, 1fr) 180px;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.account-request-item p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
}
.account-request-item em {
  color: var(--text-2);
  font-style: normal;
  font-size: 12px;
}
.settings-success-box {
  border: 1px solid rgba(21,128,61,.25);
  background: rgba(21,128,61,.07);
  border-radius: 14px;
  padding: 14px;
}
.settings-danger-box {
  border: 1px solid rgba(185,28,28,.25);
  background: rgba(185,28,28,.06);
  border-radius: 14px;
  padding: 14px;
}
.users-table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
@media (max-width: 820px) {
  .account-request-item {
    grid-template-columns: 1fr;
  }
  .users-table__actions {
    justify-content: flex-start;
  }
}


/* ============================================================
   v1.2.28 – Rechnungen sperren, anzeigen und teilen
   ============================================================ */
.invoice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.invoice-lock-info {
  margin-bottom: 14px;
}
@media (max-width: 820px) {
  .invoice-actions {
    justify-content: flex-start;
  }
  .invoice-actions .btn {
    flex: 1 1 auto;
    min-width: 96px;
  }
}


/* ============================================================
   v1.2.29 – Rechtliches: Impressum, Datenschutz, AGB, Widerruf
   ============================================================ */
.nav__legal-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  padding: 10px 14px 8px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}
.nav__legal-links a {
  font-size: 11px;
  font-weight: 750;
  color: var(--text-2);
  text-decoration: none;
  line-height: 1.2;
}
.nav__legal-links a:hover {
  color: var(--brand-800);
  text-decoration: underline;
}
.sidebar.is-collapsed .nav__legal-links {
  display: none;
}
.legal-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.legal-overview-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}
.legal-overview-card strong {
  font-size: 18px;
}
.legal-overview-card span {
  color: var(--text-2);
  font-size: 13px;
}
.legal-document-page {
  display: grid;
  gap: 14px;
}
.legal-document-page__head {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.legal-document-card {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #fff;
  padding: clamp(20px, 4vw, 44px);
  box-shadow: var(--shadow-soft);
}
.legal-document-card h2 {
  margin-top: 0;
}
.legal-document-logo {
  max-height: 74px;
  max-width: 240px;
  object-fit: contain;
  margin-bottom: 18px;
}
.legal-document-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}
.legal-public .legal-shell {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 18px;
}
.legal-public .legal-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.legal-public .legal-head img {
  max-height: 70px;
  max-width: 220px;
}
.legal-public .legal-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: clamp(20px, 4vw, 42px);
  box-shadow: var(--shadow-soft);
  line-height: 1.65;
}
.legal-public-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.legal-public-actions a {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--brand-800);
  text-decoration: none;
  font-weight: 800;
}
@media (max-width: 820px) {
  .nav__legal-links {
    grid-template-columns: 1fr;
    padding: 12px 18px;
  }
}


/* ============================================================
   v1.2.30 – Betreiber-Admin & BookingPilot-Rechtstexte
   ============================================================ */
.operator-login {
  min-height: 70vh;
  display: grid;
  place-items: center;
}
.operator-login__card {
  width: min(520px, 100%);
}
.operator-hero {
  border-color: rgba(15,76,38,.25);
}
.operator-legal-grid {
  display: grid;
  gap: 12px;
}
.operator-legal-card textarea {
  min-height: 220px;
}
@media (max-width: 820px) {
  .operator-legal-card textarea {
    min-height: 260px;
  }
}


/* ============================================================
   v1.2.34 – Rechnungsdesign Deutschland
   ============================================================ */
.invoice-settings-note {
  border: 1px solid rgba(15,76,38,.18);
  background: rgba(15,76,38,.055);
  border-radius: 14px;
  padding: 12px;
  color: var(--text-2);
  font-size: 13px;
}


/* ============================================================
   v1.2.36 – A4-Rechnung mobil & Betreiber-Support
   ============================================================ */
.operator-support-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.operator-support-steps div {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 5px;
}
.operator-support-steps span {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.35;
}
@media (max-width: 920px) {
  .operator-support-steps {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v1.2.38 – Reset-Drosselung & System-Mailvorlagen
   ============================================================ */
.operator-mail-card textarea {
  min-height: 230px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}


/* ============================================================
   v1.2.39 – Betreiber-Mail, Wizard-Mail & Support-Tickets
   ============================================================ */
.operator-mail-form .settings-success-box,
#support-ticket-form .settings-success-box {
  margin-bottom: 12px;
}
.operator-mail-card textarea {
  min-height: 230px;
}
.support-ticket-status-open {
  color: #92400e;
}


/* ============================================================
   v1.2.40 – Kalender mobil: Desktop-Optik kompakter + Swipe
   ============================================================ */
@media (max-width: 820px) {
  #cal-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  /* Multiansicht: dichter wie Desktop, keine großen Zwischenräume */
  .calendar-new:not(.calendar-new--single) .cal-grid {
    display: grid !important;
    grid-template-columns: 132px repeat(var(--cal-days, 31), 48px) !important;
    width: max-content !important;
    min-width: 100% !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-rowlabel,
  .calendar-new:not(.calendar-new--single) .cal-headcell--left {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    padding: 7px 8px !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-rowlabel strong {
    font-size: 12px !important;
    line-height: 1.15 !important;
    display: block;
    overflow-wrap: anywhere;
  }

  .calendar-new:not(.calendar-new--single) .cal-rowlabel .txt-muted {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-headcell,
  .calendar-new:not(.calendar-new--single) .cal-cell {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 4px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-cell__top {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-cell__price {
    font-size: 10px !important;
    line-height: 1.05 !important;
    margin-top: 2px !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-cell__guest,
  .calendar-new:not(.calendar-new--single) .cal-cell__guest-meta {
    display: none !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-headcell__wd {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-headcell__day {
    font-size: 13px !important;
    line-height: 1 !important;
  }

  /* Einzelansicht: eine A4/Widget-artige Monatskarte pro Seite; Swipe in JS wechselt Monat */
  .calendar-new--single .cal-single-months--scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    scroll-snap-type: none !important;
  }

  .calendar-new--single .cal-single-months--scroll .cal-month-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    scroll-snap-align: none !important;
  }

  .calendar-new--single .cal-single-months--scroll .cal-month-card + .cal-month-card {
    display: none !important;
  }

  .calendar-new--single .cal-grid--single-month {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    width: 100% !important;
  }

  .calendar-new--single .cal-grid--single-month .cal-single-title {
    grid-column: 1 / -1 !important;
    padding: 8px 10px !important;
  }

  .calendar-new--single .cal-month-weekday {
    padding: 5px 2px !important;
    font-size: 10px !important;
    border-radius: 0 !important;
  }

  /* v1.3.44: feste 44px Höhe entfernt — aspect-ratio greift */
  .calendar-new--single .cal-grid--single-month .cal-cell,
  .calendar-new--single .cal-grid--single-month .cal-cell--blank {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 4px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  .calendar-new--single .cal-grid--single-month .cal-cell__price {
    font-size: 10px !important;
  }

  .calendar-new--single .cal-grid--single-month .cal-cell__guest,
  .calendar-new--single .cal-grid--single-month .cal-cell__guest-meta {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .calendar-new:not(.calendar-new--single) .cal-grid {
    grid-template-columns: 116px repeat(var(--cal-days, 31), 44px) !important;
  }
  .calendar-new:not(.calendar-new--single) .cal-rowlabel,
  .calendar-new:not(.calendar-new--single) .cal-headcell--left {
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
  }
  .calendar-new:not(.calendar-new--single) .cal-headcell,
  .calendar-new:not(.calendar-new--single) .cal-cell {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}


/* ============================================================
   v1.2.41 – Ferienanzeige als Akkordeon
   ============================================================ */
.holiday-date-accordion-list {
  display: grid;
  gap: 10px;
}

.holiday-date-source--accordion {
  overflow: hidden;
}

.holiday-date-source__summary {
  cursor: pointer;
  list-style: none;
}

.holiday-date-source__summary::-webkit-details-marker {
  display: none;
}

.holiday-date-source__summary::after {
  content: "aufklappen";
  font-size: 11px;
  font-weight: 800;
  color: var(--brand-800);
  border: 1px solid rgba(21,128,61,.24);
  background: rgba(21,128,61,.07);
  border-radius: 999px;
  padding: 5px 9px;
  white-space: nowrap;
}

.holiday-date-source--accordion[open] .holiday-date-source__summary::after {
  content: "zuklappen";
}

.holiday-date-source--accordion .holiday-date-list {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.72);
}

.holiday-date-empty-note {
  padding: 0 12px 12px;
  margin: 0;
}

@media (max-width: 820px) {
  .holiday-date-source__summary {
    align-items: flex-start;
    gap: 10px;
  }
  .holiday-date-source__summary::after {
    margin-left: auto;
  }
}


/* ============================================================
   v1.2.42 – Storno-Tarife & Apartment-Ausstattung
   ============================================================ */
.cancellation-rate-row {
  grid-template-columns: auto minmax(180px,1.2fr) 130px 90px 160px auto auto minmax(120px, auto);
}
.cancellation-rate-row .field {
  min-width: 0;
}
@media (max-width: 820px) {
  .cancellation-rate-row {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v1.2.43 – Hilfesystem & Bettenarten
   ============================================================ */
.help-dialog {
  display: grid;
  gap: 14px;
}
.help-dialog__hint {
  border: 1px solid rgba(21,128,61,.18);
  background: rgba(21,128,61,.06);
  border-radius: 14px;
  padding: 12px;
  color: var(--text-2);
  font-size: 13px;
}
.help-results {
  display: grid;
  gap: 10px;
  max-height: min(56vh, 560px);
  overflow: auto;
  padding-right: 4px;
}
.help-result-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 9px;
}
.help-result-card__head {
  display: grid;
  gap: 3px;
}
.help-result-card__head span {
  color: var(--brand-800);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.help-result-card__head strong {
  font-size: 16px;
}
.help-result-card p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.45;
}
@media (max-width: 820px) {
  .help-results {
    max-height: 62vh;
  }
}


/* ============================================================
   v1.2.44 – Einrichtungs-Wizard kurz/vollständig
   ============================================================ */
.wizard-requirements {
  border: 1px solid rgba(15,76,38,.18);
  background: rgba(15,76,38,.055);
  border-radius: 16px;
  padding: 14px;
  margin: 14px 0;
}
.wizard-requirements h3 {
  margin: 0 0 10px;
  font-size: 15px;
}
.wizard-requirements__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}
.wizard-requirements__grid span {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 750;
  color: var(--text-2);
}
@media (max-width: 820px) {
  .wizard-requirements__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v1.2.47 – Mobile Kalender-Kompaktansicht
   ============================================================ */
@media (max-width: 820px) {
  .calendar-new {
    border-width: 0.5px !important;
  }

  .calendar-new--single {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .calendar-new--single .cal-single-months--scroll {
    width: 100% !important;
    min-width: 100% !important;
    gap: 0 !important;
  }

  .calendar-new--single .cal-month-card {
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* v1.3.44: grid-template-rows auf auto — aspect-ratio bestimmt die Höhe */
  .calendar-new--single .cal-grid--single-month {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto repeat(6, auto) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .calendar-new--single .cal-single-title {
    padding: 6px 10px !important;
    border-bottom-width: 0.5px !important;
  }

  .calendar-new--single .cal-single-title strong {
    font-size: 12px !important;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .calendar-new--single .cal-single-title span {
    font-size: 12px !important;
  }

  .calendar-new--single .cal-month-weekday {
    padding: 4px 2px !important;
    font-size: 9px !important;
    border-right-width: 0.5px !important;
    border-bottom-width: 0.5px !important;
  }

  .calendar-new--single .cal-grid--single-month .cal-cell,
  .calendar-new--single .cal-grid--single-month .cal-cell--blank {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 2px !important;
    border-right-width: 0.5px !important;
    border-bottom-width: 0.5px !important;
  }

  .calendar-new--single .cal-grid--single-month .cal-cell__top {
    font-size: 9px !important;
    min-height: 12px !important;
    padding: 0 2px !important;
  }

  .calendar-new--single .cal-grid--single-month .cal-cell__price {
    font-size: 9px !important;
    padding: 0 2px !important;
    margin-top: auto !important;
    line-height: 1 !important;
  }

  .calendar-new--single .cal-grid--single-month .cal-cell__guest,
  .calendar-new--single .cal-grid--single-month .cal-cell__guest-meta {
    display: none !important;
  }

  .calendar-new .cal-cell,
  .calendar-new .cal-headcell,
  .calendar-new .cal-rowlabel,
  .calendar-new .cal-month-weekday,
  .calendar-new .cal-single-title {
    border-color: rgba(16, 24, 20, .12) !important;
  }

  .cal-label-toggle {
    cursor: pointer !important;
    border-left: 0 !important;
    border-top: 0 !important;
    border-bottom-width: 0.5px !important;
    border-right-width: 0.5px !important;
    appearance: none;
    font: inherit;
  }

  .calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed {
    grid-template-columns: 42px repeat(var(--cal-days, 31), 46px) !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed .cal-headcell--left,
  .calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed .cal-rowlabel {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 4px !important;
    align-items: center;
    justify-content: center;
  }

  .calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed .cal-rowlabel strong {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-height: 112px;
    overflow: hidden;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed .cal-rowlabel .txt-muted {
    display: none !important;
  }
}

/* v1.3.44: alte 36px-Höhe für <420px entfernt — aspect-ratio greift jetzt */
@media (max-width: 420px) {
  .calendar-new--single .cal-grid--single-month {
    grid-template-rows: auto auto repeat(6, auto) !important;
  }
}


/* ============================================================
   v1.2.48 – Mobile Header-/Topbar-Fix
   ============================================================ */
@media (max-width: 820px) {
  html, body {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .app-shell, .app-main, .main, #app, #content,
  .content, .main-content, .page-content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .topbar, .app-topbar, .main-topbar, .page-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 46px !important;
    grid-template-areas:
      "menu title user"
      "actions actions actions" !important;
    align-items: center !important;
    gap: 8px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 9px !important;
    background: rgba(248, 250, 247, .97) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(15, 76, 38, .10) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .sidebar-toggle, #sidebar-toggle, .topbar__menu, .mobile-menu-button {
    grid-area: menu !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    align-self: center !important;
  }

  #page-title, .page-title, .topbar__title, .app-title {
    grid-area: title !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 4px !important;
  }

  #dashboard-user-pill, .dashboard-user-pill, .user-pill, .avatar-menu-button {
    grid-area: user !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    align-self: center !important;
  }

  #topbar-actions, .topbar__actions, .page-actions, .header-actions {
    grid-area: actions !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0 1px !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  #topbar-actions::-webkit-scrollbar,
  .topbar__actions::-webkit-scrollbar,
  .page-actions::-webkit-scrollbar,
  .header-actions::-webkit-scrollbar {
    display: none;
  }

  #topbar-actions .btn, .topbar__actions .btn,
  .page-actions .btn, .header-actions .btn,
  #topbar-actions button, .topbar__actions button {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 13px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    max-width: none !important;
  }

  #content, .content, .main-content, .page-content {
    position: relative !important;
    z-index: 1 !important;
    padding-top: 14px !important;
    margin-top: 0 !important;
  }

  .page, .view, .module-page, .content-card, .card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  @media (max-width: 420px) {
    .topbar, .app-topbar, .main-topbar, .page-topbar {
      gap: 7px !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }
    #page-title, .page-title, .topbar__title, .app-title {
      font-size: clamp(17px, 4.7vw, 22px) !important;
    }
    #topbar-actions .btn, .topbar__actions .btn,
    .page-actions .btn, .header-actions .btn,
    #topbar-actions button, .topbar__actions button {
      min-height: 36px !important;
      height: 36px !important;
      max-height: 36px !important;
      padding: 0 11px !important;
      font-size: 14px !important;
      border-radius: 12px !important;
    }
  }
}


/* ============================================================
   v1.2.49 – Widget-Fix & Kalender mobil nachjustiert
   ============================================================ */
@media (max-width: 820px) {
  /* Multiansicht: ca. 5 Tage sichtbar, linke Apartmentspalte bleibt sauber vorne */
  .calendar-new:not(.calendar-new--single) #cal-scroll,
  .calendar-new:not(.calendar-new--single) .cal-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .calendar-new:not(.calendar-new--single) .cal-grid {
    grid-template-columns: 154px repeat(var(--cal-days, 31), 68px) !important;
    width: max-content !important;
    min-width: 100% !important;
    gap: 0 !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-headcell--left,
  .calendar-new:not(.calendar-new--single) .cal-rowlabel {
    position: sticky !important;
    left: 0 !important;
    z-index: 14 !important;
    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
    background: rgba(248, 250, 247, .98) !important;
    box-shadow: 1px 0 0 rgba(16,24,20,.10) !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-headcell--left {
    z-index: 18 !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-rowlabel strong {
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-headcell,
  .calendar-new:not(.calendar-new--single) .cal-cell {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    border-width: .5px !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-cell__guest {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
    max-height: 22px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
    padding: 0 2px !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-cell__guest-meta {
    display: none !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-cell--booked .cal-cell__top,
  .calendar-new:not(.calendar-new--single) .cal-cell--booked .cal-cell__top span {
    color: rgba(255,255,255,.88) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.32) !important;
  }

  /* Eingeklappte Spalte: noch schmaler, aber nicht mit Kalenderzellen überlappen */
  .calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed {
    grid-template-columns: 34px repeat(var(--cal-days, 31), 68px) !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed .cal-headcell--left,
  .calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed .cal-rowlabel {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 3px !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed .cal-rowlabel strong {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-height: 96px;
    overflow: hidden;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed .cal-rowlabel .txt-muted {
    display: none !important;
  }

  /* Einzelansicht: weiße Trennstreifen weiter reduzieren */
  .calendar-new--single .cal-grid--single-month {
    gap: 0 !important;
    background: rgba(16,24,20,.08) !important;
  }

  .calendar-new--single .cal-grid--single-month .cal-cell,
  .calendar-new--single .cal-grid--single-month .cal-cell--blank,
  .calendar-new--single .cal-month-weekday {
    border-width: .5px !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  .calendar-new--single .cal-grid--single-month .cal-cell + .cal-cell,
  .calendar-new--single .cal-grid--single-month .cal-cell--blank + .cal-cell--blank {
    margin-left: 0 !important;
  }
}

@media (max-width: 420px) {
  .calendar-new:not(.calendar-new--single) .cal-grid {
    grid-template-columns: 148px repeat(var(--cal-days, 31), 66px) !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-headcell--left,
  .calendar-new:not(.calendar-new--single) .cal-rowlabel {
    width: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-headcell,
  .calendar-new:not(.calendar-new--single) .cal-cell {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed {
    grid-template-columns: 34px repeat(var(--cal-days, 31), 66px) !important;
  }
}


/* ============================================================
   v1.2.50 – Kalender Einzelansicht Desktop stabilisieren
   Problem: Einzelansicht wurde je nach Monat/Apartment unterschiedlich groß.
   Ziel: Desktop immer zwei gleich breite Monate nebeneinander.
   ============================================================ */
@media (min-width: 821px) {
  .calendar-new--single {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
  }

  .calendar-new--single #cal-scroll,
  .calendar-new--single .cal-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .calendar-new--single .cal-single-months,
  .calendar-new--single .cal-single-months--scroll {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: start !important;
  }

  .calendar-new--single .cal-month-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .calendar-new--single .cal-month-card .cal-grid--single-month {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto repeat(6, auto) !important; /* v1.3.44: war minmax(54px, 1fr) */
  }

  /* v1.3.44: feste 64px Desktop-Höhe entfernt — aspect-ratio greift */
  .calendar-new--single .cal-grid--single-month .cal-cell,
  .calendar-new--single .cal-grid--single-month .cal-cell--blank {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .calendar-new--single .cal-single-title {
    padding: 8px 12px !important;
  }

  .calendar-new--single .cal-single-title strong {
    font-size: 14px !important;
  }

  .calendar-new--single .cal-single-title span {
    font-size: 13px !important;
  }

  .calendar-new--single .cal-month-weekday {
    padding: 6px 4px !important;
    font-size: 10px !important;
  }

  .calendar-new--single .cal-cell__top {
    min-height: 18px !important;
    padding: 2px 5px 0 !important;
    font-size: 10px !important;
  }

  .calendar-new--single .cal-cell__price {
    font-size: 10px !important;
    padding: 0 5px !important;
  }

  .calendar-new--single .cal-cell__guest {
    font-size: 9.5px !important;
    line-height: 1.12 !important;
    padding: 1px 5px 0 !important;
    -webkit-line-clamp: 2 !important;
  }

  .calendar-new--single .cal-cell__guest-meta {
    display: none !important;
  }
}

/* Auf sehr breiten Desktopflächen darf es weiterhin nur bei zwei Monaten bleiben. */
@media (min-width: 1280px) {
  .calendar-new--single .cal-grid--single-month .cal-cell,
  .calendar-new--single .cal-grid--single-month .cal-cell--blank {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
  }
}


/* ============================================================
   v1.2.51 – Kalender-Buchungsbalken & Layout-Korrekturen
   ============================================================ */
.cal-grid {
  position: relative;
}

.cal-booking-bar {
  align-self: stretch;
  justify-self: stretch;
  align-content: center;
  margin: 18px 0 8px;
  padding: 0 8px;
  background: var(--booking-color, var(--brand-700));
  color: #fff;
  font-weight: 850;
  font-size: 12px;
  line-height: 1.1;
  z-index: 9;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.cal-booking-bar span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-new:not(.calendar-new--single) .cal-cell--booked .cal-cell__guest,
.calendar-new:not(.calendar-new--single) .cal-cell--booked .cal-cell__guest-meta {
  display: none !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--booked {
  border-left-color: rgba(255,255,255,.28) !important;
  border-right-color: rgba(255,255,255,.28) !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--pos-start {
  /* Keine abgerundeten Ecken — User will klare Buchungsbalken (v1.2.82) */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.calendar-new:not(.calendar-new--single) .cal-rowlabel,
.calendar-new:not(.calendar-new--single) .cal-headcell--left {
  position: sticky !important;
  left: 0 !important;
  z-index: 20 !important;
  background: rgba(248,250,247,.99) !important;
  box-shadow: 2px 0 0 rgba(16,24,20,.12) !important;
}

.calendar-new:not(.calendar-new--single) .cal-headcell--left {
  z-index: 30 !important;
}

.calendar-new:not(.calendar-new--single) .cal-headcell:not(.cal-headcell--left) {
  z-index: 1 !important;
}

.calendar-new:not(.calendar-new--single) {
  max-height: none !important;
  overflow: visible !important;
}

.calendar-new:not(.calendar-new--single) #cal-scroll,
.calendar-new:not(.calendar-new--single) .cal-scroll {
  max-height: none !important;
  overflow-y: visible !important;
}

.calendar-new:not(.calendar-new--single) .cal-grid {
  grid-auto-rows: minmax(72px, auto) !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell,
.calendar-new:not(.calendar-new--single) .cal-rowlabel {
  min-height: 72px !important;
  height: 72px !important;
}

.calendar-new--single .cal-grid--single-month {
  gap: 0 !important;
  background: transparent !important;
}

.calendar-new--single .cal-grid--single-month .cal-cell,
.calendar-new--single .cal-grid--single-month .cal-cell--blank,
.calendar-new--single .cal-month-weekday {
  margin: 0 !important;
  border-width: .5px !important;
  box-shadow: none !important;
}

.calendar-new--single .cal-cell--booked {
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--booking-color, #0f4c26) 96%, transparent) !important;
}

@media (max-width: 820px) {
  .calendar-new:not(.calendar-new--single) .cal-grid {
    grid-template-columns: 150px repeat(var(--cal-days, 31), 66px) !important;
    grid-auto-rows: minmax(76px, auto) !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-headcell,
  .calendar-new:not(.calendar-new--single) .cal-cell {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-rowlabel,
  .calendar-new:not(.calendar-new--single) .cal-headcell--left {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-rowlabel {
    height: 76px !important;
    min-height: 76px !important;
  }

  .cal-booking-bar {
    margin: 24px 0 10px;
    padding: 0 6px;
    font-size: 11px;
  }

  .calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed {
    grid-template-columns: 36px repeat(var(--cal-days, 31), 66px) !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed .cal-headcell--left,
  .calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed .cal-rowlabel {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }
}


/* ============================================================
   v1.2.51 – iCal Import/Export UI
   ============================================================ */
.property-ical-list {
  display: grid;
  gap: 12px;
}

.property-ical-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.property-ical-card__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.property-ical-card__head strong {
  display: block;
  font-size: 16px;
}

.property-ical-card__head span {
  display: block;
  color: var(--text-2);
  font-size: 12px;
  margin-top: 2px;
}

.property-ical-export {
  display: grid;
  gap: 6px;
}

.property-ical-export label {
  font-weight: 850;
  font-size: 12px;
  color: var(--text-2);
}

.property-ical-export > div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.property-ical-export code {
  flex: 1;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #f4f7f4;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
}

.property-ical-feeds {
  display: grid;
  gap: 8px;
}

.property-ical-feed {
  border: 1px solid rgba(16,24,20,.10);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
  display: grid;
  gap: 3px;
}

.property-ical-feed strong {
  font-size: 13px;
}

.property-ical-feed span,
.property-ical-feed em {
  font-size: 12px;
  color: var(--text-2);
  font-style: normal;
}

.property-ical-feed em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ical-feed-edit-list {
  display: grid;
  gap: 10px;
}

.ical-feed-edit-row {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  display: grid;
  grid-template-columns: auto 150px 1fr;
  gap: 10px;
  align-items: end;
}

.ical-feed-edit-row .field--full {
  grid-column: 1 / -1;
}

@media (max-width: 820px) {
  .property-ical-card__head,
  .property-ical-export > div {
    display: grid;
  }

  .ical-feed-edit-row {
    grid-template-columns: 1fr;
  }

  .ical-feed-edit-row .field--full {
    grid-column: auto;
  }
}


/* ============================================================
   v1.2.53 – Reparatur Kalender/iCal nach v1.2.51
   ============================================================ */

/* Overlay-Balken deaktivieren: normale Kalenderzellen bleiben interaktiv/stabil. */
.cal-booking-bar {
  display: none !important;
}

/* Multi: keine künstlich zusätzlichen Scrollhöhen, 3–4 Apartments sichtbar. */
.calendar-new:not(.calendar-new--single) {
  max-height: none !important;
  overflow: visible !important;
}

.calendar-new:not(.calendar-new--single) #cal-scroll,
.calendar-new:not(.calendar-new--single) .cal-scroll {
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-height: none !important;
}

.calendar-new:not(.calendar-new--single) .cal-grid {
  grid-auto-rows: auto !important;
  align-items: stretch !important;
}

/* Linke Apartmentspalte sauber über dem horizontalen Scrollbereich halten. */
.calendar-new:not(.calendar-new--single) .cal-rowlabel,
.calendar-new:not(.calendar-new--single) .cal-headcell--left {
  position: sticky !important;
  left: 0 !important;
  z-index: 30 !important;
  background: rgba(248,250,247,.99) !important;
  box-shadow: 2px 0 0 rgba(16,24,20,.12) !important;
  overflow: hidden !important;
}

.calendar-new:not(.calendar-new--single) .cal-headcell--left {
  z-index: 40 !important;
}

/* Buchungen wieder über normale Zellen darstellen, zusammenhängender ohne weiße Balken. */
.calendar-new .cal-cell--booked {
color: #fff !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

.calendar-new .cal-cell--booked.cal-cell--pos-start {
  /* Keine abgerundeten Ecken — User will klare Buchungsbalken (v1.2.82) */
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.calendar-new .cal-cell--booked.cal-cell--pos-middle {
border-left-color: transparent !important;
  border-right-color: transparent !important;
}

.calendar-new .cal-cell--booked .cal-cell__top,
.calendar-new .cal-cell--booked .cal-cell__top span,
.calendar-new .cal-cell--booked .cal-cell__guest,
.calendar-new .cal-cell--booked .cal-cell__guest-meta {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--booked .cal-cell__guest {
  display: block !important;
  font-size: 11px !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  max-height: 24px !important;
  overflow: hidden !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--booked .cal-cell__guest-meta {
  display: block !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
  opacity: .92 !important;
}

/* Einzelansicht: breite weiße Zwischenräume durch echtes Grid ohne Gap ersetzen. */
.calendar-new--single .cal-single-months,
.calendar-new--single .cal-single-months--scroll {
  gap: 10px !important;
}

.calendar-new--single .cal-grid--single-month {
  gap: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;
}

.calendar-new--single .cal-grid--single-month .cal-cell,
.calendar-new--single .cal-grid--single-month .cal-cell--blank,
.calendar-new--single .cal-month-weekday {
  margin: 0 !important;
  border-width: .5px !important;
  border-color: rgba(16,24,20,.12) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.calendar-new--single .cal-grid--single-month .cal-cell--booked {
  border-color: rgba(255,255,255,.10) !important;
}

@media (max-width: 820px) {
  .calendar-new:not(.calendar-new--single) .cal-grid {
    grid-template-columns: 150px repeat(var(--cal-days, 31), 66px) !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-headcell,
  .calendar-new:not(.calendar-new--single) .cal-cell {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-rowlabel,
  .calendar-new:not(.calendar-new--single) .cal-headcell--left {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }

  .calendar-new--single .cal-grid--single-month .cal-cell,
  .calendar-new--single .cal-grid--single-month .cal-cell--blank {
    padding: 1px !important;
    border-width: .5px !important;
  }
}


/* ============================================================
   v1.2.54 – Kalender-Scroll und Einzelansicht final repariert
   ============================================================ */

/* Desktop/Mobil: horizontales Scrollen nur im Kalender, nie auf ganzer Seite. */
html,
body,
.app-shell,
.app-main,
.main,
#app,
#content,
.content,
.main-content,
.page-content {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.calendar-new {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.calendar-new:not(.calendar-new--single) {
  contain: layout paint;
}

/* Multi: Grid darf breiter sein, aber nur innerhalb des Kalenderframes scrollen. */
.calendar-new:not(.calendar-new--single) .cal-grid {
  width: max-content !important;
  min-width: 100% !important;
}

/* Apartmentspalte bleibt vor den Zellen, aber verschiebt nicht die ganze Seite. */
.calendar-new:not(.calendar-new--single) .cal-rowlabel,
.calendar-new:not(.calendar-new--single) .cal-headcell--left {
  position: sticky !important;
  left: 0 !important;
  z-index: 50 !important;
  background: rgba(248,250,247,.995) !important;
  box-shadow: 2px 0 0 rgba(16,24,20,.14) !important;
}

/* Anreisetag: nicht vollflächig färben. Nur unteres/rechtes Dreieck bleibt farbig. */
.calendar-new .cal-cell--booked.cal-cell--pos-start {
color: var(--text) !important;
  overflow: hidden !important;
}

.calendar-new .cal-cell--booked.cal-cell--pos-start::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--booking-color, var(--brand-700)) !important;
  clip-path: polygon(100% 0, 100% 100%, 0 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.calendar-new .cal-cell--booked.cal-cell--pos-start > * {
  position: relative !important;
  z-index: 2 !important;
}

.calendar-new .cal-cell--booked.cal-cell--pos-start .cal-cell__top,
.calendar-new .cal-cell--booked.cal-cell--pos-start .cal-cell__top span {
  color: var(--text-2) !important;
  text-shadow: none !important;
}

.calendar-new .cal-cell--booked.cal-cell--pos-start .cal-cell__guest,
.calendar-new .cal-cell--booked.cal-cell--pos-start .cal-cell__guest-meta {
  display: none !important;
}

/* Durchgehende Buchungstage: vollflächig, ohne breite weiße Lücken. */
.calendar-new .cal-cell--booked.cal-cell--pos-middle,
.calendar-new .cal-cell--booked.cal-cell--pos-single {
color: #fff !important;
  border-left-color: rgba(255,255,255,.14) !important;
  border-right-color: rgba(255,255,255,.14) !important;
}

/* Einzelansicht: weiße Zwischenräume radikal entfernen. */
.calendar-new--single {
  overflow-x: hidden !important;
}

.calendar-new--single .cal-single-months,
.calendar-new--single .cal-single-months--scroll {
  gap: 8px !important;
}

.calendar-new--single .cal-month-card {
  overflow: hidden !important;
  background: transparent !important;
}

.calendar-new--single .cal-grid--single-month {
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  background: rgba(16,24,20,.10) !important;
}

.calendar-new--single .cal-grid--single-month .cal-cell,
.calendar-new--single .cal-grid--single-month .cal-cell--blank,
.calendar-new--single .cal-month-weekday {
  margin: 0 !important;
  border: 0 !important;
  outline: .5px solid rgba(16,24,20,.12) !important;
  outline-offset: -.5px !important;
  box-shadow: none !important;
}

.calendar-new--single .cal-grid--single-month .cal-cell--booked {
  outline-color: rgba(255,255,255,.12) !important;
}

/* Preis/Texte in Einzelansicht nicht über weiße Balken verschieben. */
.calendar-new--single .cal-grid--single-month .cal-cell__top,
.calendar-new--single .cal-grid--single-month .cal-cell__price,
.calendar-new--single .cal-grid--single-month .cal-cell__guest,
.calendar-new--single .cal-grid--single-month .cal-cell__guest-meta {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 820px) {
  .calendar-new--single .cal-single-months,
  .calendar-new--single .cal-single-months--scroll {
    gap: 0 !important;
  }

  .calendar-new--single .cal-grid--single-month {
    background: rgba(16,24,20,.08) !important;
  }

  .calendar-new--single .cal-grid--single-month .cal-cell,
  .calendar-new--single .cal-grid--single-month .cal-cell--blank {
    padding: 0 !important;
  }
}


/* ============================================================
   v1.2.55 – Kalender Zellabstände/Text/Scroll finalisiert
   ============================================================ */

/* Grundschutz: keine horizontale Seitenverschiebung, nur Kalender darf horizontal scrollen. */
html,
body,
.app-shell,
.app-main,
.main,
#app,
#content,
.content,
.main-content,
.page-content {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.calendar-new {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch;
}

/* Desktop-Multi: feste Tagesbreite, damit Monate/Einträge nicht unterschiedlich breit werden. */
@media (min-width: 821px) {
  .calendar-new:not(.calendar-new--single) {
    --cal-day-width: 74px;
  }

  .calendar-new:not(.calendar-new--single) .cal-grid {
    width: max-content !important;
    min-width: 100% !important;
    grid-auto-columns: var(--cal-day-width) !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-headcell:not(.cal-headcell--left),
  .calendar-new:not(.calendar-new--single) .cal-cell {
    width: var(--cal-day-width) !important;
    min-width: var(--cal-day-width) !important;
    max-width: var(--cal-day-width) !important;
    box-sizing: border-box !important;
  }
}

/* Smartphone-Multi: ca. 5 Tage sichtbar, aber ohne Seite mitzuschieben. */
@media (max-width: 820px) {
  .calendar-new:not(.calendar-new--single) {
    --cal-day-width: 66px;
  }

  .calendar-new:not(.calendar-new--single) .cal-grid {
    width: max-content !important;
    min-width: 100% !important;
    grid-auto-columns: var(--cal-day-width) !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-headcell:not(.cal-headcell--left),
  .calendar-new:not(.calendar-new--single) .cal-cell {
    width: var(--cal-day-width) !important;
    min-width: var(--cal-day-width) !important;
    max-width: var(--cal-day-width) !important;
    box-sizing: border-box !important;
  }
}

/* Linke Apartmentspalte bleibt vorne, ohne dass Kalenderinhalt darunter verschwindet. */
.calendar-new:not(.calendar-new--single) .cal-rowlabel,
.calendar-new:not(.calendar-new--single) .cal-headcell--left {
  position: sticky !important;
  left: 0 !important;
  z-index: 80 !important;
  background: rgba(248,250,247,.995) !important;
  box-shadow: 2px 0 0 rgba(16,24,20,.16) !important;
}

/* Buchungstext: nur an einer Stelle anzeigen, darf über zwei Zellen laufen. */
.calendar-new:not(.calendar-new--single) .cal-cell--booked {
  overflow: visible !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--booked:not(.cal-cell--label-start) .cal-cell__guest,
.calendar-new:not(.calendar-new--single) .cal-cell--booked:not(.cal-cell--label-start) .cal-cell__guest-meta {
  display: none !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest,
.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest-meta {
  position: relative !important;
  z-index: 8 !important;
  width: calc((var(--cal-day-width, 74px) * 2) - 12px) !important;
  max-width: calc((var(--cal-day-width, 74px) * 2) - 12px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest {
  font-size: 11px !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest-meta {
  font-size: 9px !important;
  line-height: 1.05 !important;
  opacity: .95 !important;
}

/* Anreisetag bleibt diagonal und bekommt keinen Text. */
.calendar-new .cal-cell--booked.cal-cell--pos-start .cal-cell__guest,
.calendar-new .cal-cell--booked.cal-cell--pos-start .cal-cell__guest-meta {
  display: none !important;
}

/* Einzelansicht: graue/weiße Zwischenräume entfernen. Nur dünne Linien zwischen Zellen. */
.calendar-new--single {
  background: transparent !important;
  overflow-x: hidden !important;
}

.calendar-new--single .cal-single-months,
.calendar-new--single .cal-single-months--scroll {
  gap: 8px !important;
  background: transparent !important;
}

.calendar-new--single .cal-month-card {
  background: #fff !important;
  overflow: hidden !important;
}

.calendar-new--single .cal-grid--single-month {
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  background: transparent !important;
  border: 1px solid rgba(16,24,20,.11) !important;
  border-top: 0 !important;
}

.calendar-new--single .cal-grid--single-month .cal-cell,
.calendar-new--single .cal-grid--single-month .cal-cell--blank,
.calendar-new--single .cal-month-weekday {
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow:
    inset -0.5px 0 0 rgba(16,24,20,.12),
    inset 0 -0.5px 0 rgba(16,24,20,.12) !important;
  background-clip: padding-box !important;
}

.calendar-new--single .cal-grid--single-month .cal-cell--blank {
  background: #fff !important;
}

/* Buchung in Einzelansicht zusammenhängender ohne graue Balken. */
.calendar-new--single .cal-grid--single-month .cal-cell--booked {
  box-shadow:
    inset -0.5px 0 0 rgba(255,255,255,.13),
    inset 0 -0.5px 0 rgba(255,255,255,.13) !important;
}

/* Mobil: Monatskarte vollbreit, ohne graue Spalten. */
@media (max-width: 820px) {
  .calendar-new--single .cal-single-months,
  .calendar-new--single .cal-single-months--scroll {
    gap: 0 !important;
  }

  .calendar-new--single .cal-month-card {
    width: 100% !important;
    min-width: 100% !important;
  }

  .calendar-new--single .cal-grid--single-month {
    width: 100% !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .calendar-new--single .cal-grid--single-month .cal-cell,
  .calendar-new--single .cal-grid--single-month .cal-cell--blank {
    padding: 0 !important;
  }
}


/* ============================================================
   v1.2.56 – Einzelkalender: echte Zellbreite ohne weiße Spalten
   Ursache: ältere Regeln gaben .cal-cell feste Pixelbreiten, dadurch blieb
   in der Einzelansicht weißer Freiraum zwischen Grid-Spalten.
   ============================================================ */
.calendar-new--single .cal-grid--single-month {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  background: transparent !important;
  border-spacing: 0 !important;
}

.calendar-new--single .cal-grid--single-month .cal-cell,
.calendar-new--single .cal-grid--single-month .cal-cell--blank,
.calendar-new--single .cal-grid--single-month .cal-month-weekday {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-sizing: border-box !important;
  box-shadow:
    inset -1px 0 0 rgba(16,24,20,.10),
    inset 0 -1px 0 rgba(16,24,20,.10) !important;
}

.calendar-new--single .cal-grid--single-month .cal-cell--blank {
  background: #fff !important;
}

/* Buchungsflächen in der Einzelansicht: optisch zusammenhängend */
.calendar-new--single .cal-grid--single-month .cal-cell--booked.cal-cell--pos-middle,
.calendar-new--single .cal-grid--single-month .cal-cell--booked.cal-cell--pos-single {
box-shadow:
    inset -1px 0 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.12) !important;
}

.calendar-new--single .cal-grid--single-month .cal-cell--booked.cal-cell--pos-start {
box-shadow:
    inset -1px 0 0 rgba(16,24,20,.10),
    inset 0 -1px 0 rgba(16,24,20,.10) !important;
}

.calendar-new--single .cal-grid--single-month .cal-cell--booked.cal-cell--pos-start::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--booking-color, var(--brand-700)) !important;
  clip-path: polygon(100% 0, 100% 100%, 0 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Mobile Einzelansicht: alte Multi-Breiten-Regeln überschreiben */
@media (max-width: 820px) {
  .calendar-new--single .cal-grid--single-month .cal-cell,
  .calendar-new--single .cal-grid--single-month .cal-cell--blank,
  .calendar-new--single .cal-grid--single-month .cal-month-weekday {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* ============================================================
   v1.2.57 – Desktop Multi-Scroll & Heute-Button Fix
   ============================================================ */

/* Nur der Kalenderframe darf horizontal scrollen; Seite, Menü und Header bleiben stabil. */
html,
body,
.app-shell,
.app-main,
.main,
#app,
#content,
.content,
.main-content,
.page-content {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Multi-Kalender: echter horizontaler Scrollcontainer. */
.calendar-new:not(.calendar-new--single) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain !important;
  contain: none !important;
}

/* Grid bekommt seine Breite per JS; hier keine Schrumpfung zulassen. */
.calendar-new:not(.calendar-new--single) .cal-grid {
  display: grid !important;
  width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

/* Tageszellen bleiben fest gleich breit. */
@media (min-width: 821px) {
  .calendar-new:not(.calendar-new--single) {
    --cal-day-width: 74px;
  }

  .calendar-new:not(.calendar-new--single) .cal-headcell:not(.cal-headcell--left),
  .calendar-new:not(.calendar-new--single) .cal-cell {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
  }
}

@media (max-width: 820px) {
  .calendar-new:not(.calendar-new--single) {
    --cal-day-width: 66px;
  }

  .calendar-new:not(.calendar-new--single) .cal-headcell:not(.cal-headcell--left),
  .calendar-new:not(.calendar-new--single) .cal-cell {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
  }
}

/* Sticky Apartmentspalte bleibt sichtbar, aber scrollt nicht die ganze Seite. */
.calendar-new:not(.calendar-new--single) .cal-rowlabel,
.calendar-new:not(.calendar-new--single) .cal-headcell--left {
  position: sticky !important;
  left: 0 !important;
  z-index: 70 !important;
  background: rgba(248,250,247,.995) !important;
}


/* ============================================================
   v1.2.58 – Buchungsmarkierung: Text über 2 Zellen + Trennlinie reduziert
   ============================================================ */

/* Buchung optisch stärker als ein zusammenhängender Balken darstellen. */
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-middle {
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Trennlinie direkt nach Anreisetag reduzieren: Folgetag beginnt ohne harte weiße Linie. */
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--label-start {
  border-left-color: transparent !important;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Anreisetag-Diagonale behält dünne Außenlinie, aber keine dominante weiße vertikale Linie zur Folgezelle. */
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-start {
  border-right-color: transparent !important;
}

/* Textfläche über zwei Tageszellen legen. */
.calendar-new:not(.calendar-new--single) .cal-cell--label-start {
  overflow: visible !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest,
.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest-meta {
  position: relative !important;
  z-index: 12 !important;
  width: calc((var(--cal-day-width, 74px) * 2) - 10px) !important;
  max-width: calc((var(--cal-day-width, 74px) * 2) - 10px) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
  pointer-events: none !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 2px !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest-meta {
  display: block !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  opacity: .96 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* In der zweiten Text-Zelle keine zusätzliche Schrift anzeigen, damit es nicht doppelt wirkt. */
.calendar-new:not(.calendar-new--single) .cal-cell--booked:not(.cal-cell--label-start) .cal-cell__guest,
.calendar-new:not(.calendar-new--single) .cal-cell--booked:not(.cal-cell--label-start) .cal-cell__guest-meta {
  display: none !important;
}

/* Desktop etwas mehr Platz für Name + Personen. */
@media (min-width: 821px) {
  .calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest {
    font-size: 12px !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest-meta {
    font-size: 10px !important;
  }
}

/* Smartphone: Text weiterhin über 2 Zellen, aber kompakter. */
@media (max-width: 820px) {
  .calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest {
    font-size: 11px !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest-meta {
    font-size: 9px !important;
  }
}


/* ============================================================
   v1.2.59 – Echte Text-Overlays für Buchungen
   ============================================================ */

/* Grid bleibt Grundlage; Overlay sitzt nur als Text darüber und nimmt keine Klicks weg. */
.calendar-new:not(.calendar-new--single) .cal-grid {
  position: relative !important;
}

.cal-booking-text-overlay {
  align-self: center;
  justify-self: stretch;
  z-index: 90;
  pointer-events: none;
  display: grid;
  gap: 1px;
  padding: 0 8px;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  transform: translateY(4px);
}

.cal-booking-text-overlay strong,
.cal-booking-text-overlay span {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cal-booking-text-overlay strong {
  font-size: 12px;
  line-height: 1.05;
  font-weight: 900;
}

.cal-booking-text-overlay span {
  font-size: 10px;
  line-height: 1.05;
  font-weight: 800;
  opacity: .96;
}

/* In Multiansicht wird Text ausschließlich über Overlay ausgegeben. */
.calendar-new:not(.calendar-new--single) .cal-cell--booked .cal-cell__guest,
.calendar-new:not(.calendar-new--single) .cal-cell--booked .cal-cell__guest-meta {
  display: none !important;
}

/* Zusammenhängende Buchungsfläche: Innenlinien weitgehend entfernen. */
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-middle,
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-single {
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  outline: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.12) !important;
}

/* Linie direkt zwischen Anreise-Diagonale und erstem vollen Buchungstag reduzieren. */
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-start {
  border-right-color: transparent !important;
  outline: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(16,24,20,.10),
    inset 0 -1px 0 rgba(16,24,20,.10) !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-start + .cal-cell--booked.cal-cell--pos-middle {
  border-left-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.12) !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-start::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--booking-color, var(--brand-700)) !important;
  clip-path: polygon(100% 0, 100% 100%, 0 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-start > * {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 820px) {
  .cal-booking-text-overlay {
    padding: 0 6px;
    transform: translateY(4px);
  }

  .cal-booking-text-overlay strong {
    font-size: 11px;
  }

  .cal-booking-text-overlay span {
    font-size: 9px;
  }
}


/* ============================================================
   v1.2.60 – Multi-Kalender Textlage/Zeilen/Sticky repariert
   ============================================================ */

/* Separater Overlay-Versuch aus v1.2.59 vollständig deaktivieren. */
.cal-booking-text-overlay {
  display: none !important;
}

/* Kalender-Grid darf Zellinhalt über zwei Tageszellen zeigen, aber keine neuen Grid-Zeilen erzeugen. */
.calendar-new:not(.calendar-new--single) .cal-grid {
  position: relative !important;
  overflow: visible !important;
  align-items: stretch !important;
  grid-auto-flow: row !important;
}

/* Rowlabel stabil: eine Zeile pro Apartment, kein Verschieben beim horizontalen Scroll. */
.calendar-new:not(.calendar-new--single) .cal-rowlabel,
.calendar-new:not(.calendar-new--single) .cal-headcell--left {
  position: sticky !important;
  left: 0 !important;
  z-index: 120 !important;
  background: rgba(248,250,247,.995) !important;
  box-shadow: 2px 0 0 rgba(16,24,20,.14) !important;
  overflow: hidden !important;
  transform: translateZ(0);
}

/* Multi: Text ist wieder an die erste volle Buchungszelle gebunden, läuft aber über 2 Zellen. */
.calendar-new:not(.calendar-new--single) .cal-cell {
  position: relative !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--booked:not(.cal-cell--label-start) .cal-cell__guest,
.calendar-new:not(.calendar-new--single) .cal-cell--booked:not(.cal-cell--label-start) .cal-cell__guest-meta,
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-start .cal-cell__guest,
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-start .cal-cell__guest-meta {
  display: none !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--label-start {
  overflow: visible !important;
  z-index: 20 !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest,
.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest-meta {
  display: block !important;
  position: relative !important;
  z-index: 30 !important;
  width: calc((var(--cal-day-width, 74px) * 2) - 12px) !important;
  max-width: calc((var(--cal-day-width, 74px) * 2) - 12px) !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.40) !important;
  pointer-events: none !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest {
  font-size: 12px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  margin-top: 2px !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest-meta {
  font-size: 10px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  opacity: .96 !important;
}

/* Buchungsfläche ohne harte Innenlinie zwischen Anreise und Folgetag. */
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-start {
  border-right-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(16,24,20,.10),
    inset 0 -1px 0 rgba(16,24,20,.10) !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-middle,
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-single {
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.12) !important;
}

/* Mehrzeilen-/Popup-Feldbeschriftungen besser lesbar. */
.modal .field__label,
.booking-modal .field__label,
.cal-tooltip .field__label,
.cal-tooltip strong,
.price-breakdown label,
.booking-form label {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

/* Smartphone: Textbreite bleibt 2 Zellen, Schrift etwas kompakter. */
@media (max-width: 820px) {
  .calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest,
  .calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest-meta {
    width: calc((var(--cal-day-width, 66px) * 2) - 10px) !important;
    max-width: calc((var(--cal-day-width, 66px) * 2) - 10px) !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest {
    font-size: 11px !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest-meta {
    font-size: 9px !important;
  }
}


/* ============================================================
   v1.2.61 – Anreise-Trennlinie entfernen
   ============================================================ */

/* Die sichtbare weiße Linie zwischen Anreise-Diagonale und erster voller Buchungszelle
   kommt aus Border/Box-Shadow der angrenzenden Zellen. Genau diese Innenkante wird entfernt. */
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-start {
  border-right: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(16,24,20,.10),
    inset 0 -1px 0 rgba(16,24,20,.10) !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-start + .cal-cell--booked.cal-cell--pos-middle,
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--label-start {
  border-left: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.12) !important;
}

/* Falls der Browser trotzdem eine Zellkante zeichnet: erste volle Zelle minimal nach links ziehen. */
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-start + .cal-cell--booked.cal-cell--pos-middle {
  margin-left: -1px !important;
  width: calc(var(--cal-day-width, 74px) + 1px) !important;
  min-width: calc(var(--cal-day-width, 74px) + 1px) !important;
}


/* ============================================================
   v1.2.62 – Einheitliche Buchungsmarkierung in allen Kalendern
   ============================================================ */

/* Alten Overlay-Layer aus früheren Versionen überall ausblenden. */
.cal-booking-text-overlay {
  display: none !important;
}

/* Einheitliche Grunddarstellung: Anreise diagonal, belegte Nächte vollflächig. */
.calendar-new .cal-cell--booked {
color: #fff !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.12) !important;
}

.calendar-new .cal-cell--booked.cal-cell--pos-start {
color: var(--text) !important;
  border-right: 0 !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 1px 0 rgba(16,24,20,.10),
    inset 0 -1px 0 rgba(16,24,20,.10) !important;
}

.calendar-new .cal-cell--booked.cal-cell--pos-start::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--booking-color, var(--brand-700)) !important;
  clip-path: polygon(100% 0, 100% 100%, 0 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.calendar-new .cal-cell--booked.cal-cell--pos-start > * {
  position: relative !important;
  z-index: 2 !important;
}

.calendar-new .cal-cell--booked.cal-cell--pos-start .cal-cell__top,
.calendar-new .cal-cell--booked.cal-cell--pos-start .cal-cell__top span {
  color: var(--text-2) !important;
  text-shadow: none !important;
}

/* Keine Beschriftung im Anreisetag, nur in erster voller Buchungszelle oder single. */
.calendar-new .cal-cell--booked.cal-cell--pos-start .cal-cell__guest,
.calendar-new .cal-cell--booked.cal-cell--pos-start .cal-cell__guest-meta {
  display: none !important;
}

/* Alle anderen belegten Zellen: Tag lesbar auf farbigem Hintergrund. */
.calendar-new .cal-cell--booked.cal-cell--pos-middle .cal-cell__top,
.calendar-new .cal-cell--booked.cal-cell--pos-middle .cal-cell__top span,
.calendar-new .cal-cell--booked.cal-cell--pos-single .cal-cell__top,
.calendar-new .cal-cell--booked.cal-cell--pos-single .cal-cell__top span {
  color: rgba(255,255,255,.86) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.30) !important;
}

/* Einheitliche Beschriftung in Multi und Einzel: sichtbar, aber nur auf der Label-Zelle. */
.calendar-new .cal-cell--booked:not(.cal-cell--label-start):not(.cal-cell--pos-single) .cal-cell__guest,
.calendar-new .cal-cell--booked:not(.cal-cell--label-start):not(.cal-cell--pos-single) .cal-cell__guest-meta {
  display: none !important;
}

.calendar-new .cal-cell--label-start,
.calendar-new .cal-cell--pos-single {
  overflow: visible !important;
  z-index: 20 !important;
}

.calendar-new .cal-cell--label-start .cal-cell__guest,
.calendar-new .cal-cell--label-start .cal-cell__guest-meta,
.calendar-new .cal-cell--pos-single .cal-cell__guest,
.calendar-new .cal-cell--pos-single .cal-cell__guest-meta {
display: block !important;
  position: relative !important;
  z-index: 30 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
  pointer-events: none !important;
  min-width: 0 !important;
}

/* Multi: Text darf über zwei Tageszellen laufen. */
.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest,
.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest-meta,
.calendar-new:not(.calendar-new--single) .cal-cell--pos-single .cal-cell__guest,
.calendar-new:not(.calendar-new--single) .cal-cell--pos-single .cal-cell__guest-meta {
  width: calc((var(--cal-day-width, 74px) * 2) - 12px) !important;
  max-width: calc((var(--cal-day-width, 74px) * 2) - 12px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Einzelansicht: Text bleibt in der Zelle, damit die Monatsmatrix sauber bleibt. */
.calendar-new--single .cal-cell--label-start .cal-cell__guest,
.calendar-new--single .cal-cell--label-start .cal-cell__guest-meta,
.calendar-new--single .cal-cell--pos-single .cal-cell__guest,
.calendar-new--single .cal-cell--pos-single .cal-cell__guest-meta {
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Einheitliche Schriftgrößen. */
.calendar-new .cal-cell__guest {
  font-size: 12px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  margin-top: 2px !important;
}

.calendar-new .cal-cell__guest-meta {
  font-size: 10px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  opacity: .96 !important;
}

/* Mobile Multi: explizit wieder sichtbar machen, alte mobile Hide-Regeln überstimmen. */
@media (max-width: 820px) {
  .calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest,
  .calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest-meta,
  .calendar-new:not(.calendar-new--single) .cal-cell--pos-single .cal-cell__guest,
  .calendar-new:not(.calendar-new--single) .cal-cell--pos-single .cal-cell__guest-meta {
    display: block !important;
    width: calc((var(--cal-day-width, 66px) * 2) - 10px) !important;
    max-width: calc((var(--cal-day-width, 66px) * 2) - 10px) !important;
  }

  .calendar-new .cal-cell__guest {
    font-size: 11px !important;
  }

  .calendar-new .cal-cell__guest-meta {
    font-size: 9px !important;
  }
}

/* Innenlinien zwischen Buchungstagen reduzieren, aber Zellmatrix stabil lassen. */
.calendar-new .cal-cell--booked.cal-cell--pos-middle,
.calendar-new .cal-cell--booked.cal-cell--pos-single {
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-start + .cal-cell--booked.cal-cell--pos-middle {
  border-left: 0 !important;
  margin-left: -1px !important;
  width: calc(var(--cal-day-width, 74px) + 1px) !important;
  min-width: calc(var(--cal-day-width, 74px) + 1px) !important;
}


/* ============================================================
   v1.2.63 – iCal pro Apartment/Kanal
   ============================================================ */
.property-ical-card--matrix {
  gap: 14px;
}

.apartment-ical-matrix {
  display: grid;
  gap: 10px;
}

.apartment-ical-row {
  display: grid;
  grid-template-columns: 180px minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(16,24,20,.10);
  border-radius: 14px;
  background: #fff;
}

.apartment-ical-row--error {
  border-color: rgba(180, 50, 50, .35);
  background: rgba(180, 50, 50, .04);
}

.apartment-ical-row__portal {
  display: grid;
  gap: 2px;
}

.apartment-ical-row__portal strong {
  font-size: 14px;
}

.apartment-ical-row__portal span,
.apartment-ical-row__portal em {
  font-size: 12px;
  color: var(--text-2);
  font-style: normal;
}

.apartment-ical-row__check {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 800;
}

.property-ical-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 820px) {
  .apartment-ical-row {
    grid-template-columns: 1fr;
  }

  .property-ical-actions {
    display: grid;
  }
}


/* ============================================================
   v1.2.65 – iCal Importquellen pro Apartment ohne Portal-Doppelblock
   ============================================================ */
.property-ical-card--clean {
  display: grid;
  gap: 14px;
}

.property-feed-list {
  display: grid;
  gap: 8px;
}

.property-feed-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(16,24,20,.10);
  border-radius: 14px;
  background: #fff;
}

.property-feed-row--error {
  border-color: rgba(180, 50, 50, .35);
  background: rgba(180, 50, 50, .04);
}

.property-feed-row > div {
  display: grid;
  gap: 2px;
}

.property-feed-row strong {
  font-size: 14px;
}

.property-feed-row span,
.property-feed-row em {
  font-size: 12px;
  color: var(--text-2);
  font-style: normal;
}

.select--prominent {
  font-weight: 850;
  border-width: 2px !important;
  border-color: rgba(36, 92, 76, .35) !important;
  background: #fff !important;
}

@media (max-width: 820px) {
  .property-feed-row {
    grid-template-columns: 1fr;
  }

  .property-feed-row .btn {
    width: 100%;
  }
}

/* ============================================================
   v1.2.66 – Modal/Sticky/Diagonal/Sidebar Fixes
   ============================================================ */

/* --- Punkt 1: Wenn Modal offen, sticky Kalender-Spalten und Header NICHT über das Modal heben.
   Die Apartment-Liste links muss mit dem restlichen Hintergrund weichgezeichnet/abgedunkelt werden. --- */
body.modal-active .cal-rowlabel,
body.modal-active .cal-headcell,
body.modal-active .cal-headcell--left {
  z-index: 0 !important;
}
body.modal-active .calendar-new:not(.calendar-new--single) .cal-rowlabel,
body.modal-active .calendar-new:not(.calendar-new--single) .cal-headcell--left {
  z-index: 0 !important;
}
/* Auch andere sticky Elemente in Listen unter das Modal drücken */
body.modal-active .table thead th,
body.modal-active .property-feed-list,
body.modal-active .property-ical-list {
  z-index: 0 !important;
}
/* Modal selbst auf hohen z-index, damit es immer oben liegt */
body.modal-active .modal {
  z-index: 10000 !important;
}

/* --- Punkt 6: Diagonale Anreise-/Abreise-Kanten sauber an die vollflächigen Zellen anschließen.
   Die ::before Layer leicht über den Zellrand hinaus ziehen, damit keine 1px-Lücke entsteht. --- */
.cal-cell--pos-start::before,
.cal-cell--turnover::before,
.cal-cell--split-turnover::before,
.cal-cell--split-turnover::after {
  inset: -0.5px !important;
}
.calendar-new .cal-cell--booked.cal-cell--pos-start::before {
  inset: -0.5px !important;
}
.calendar-new--single .cal-grid--single-month .cal-cell--booked.cal-cell--pos-start::before {
  inset: -0.5px !important;
}
/* Border-rechts auf den diagonalen Zellen entfernen, damit die Diagonale nahtlos in die nächste Zelle übergeht */
.cal-cell--pos-start,
.cal-cell--turnover,
.cal-cell--split-turnover {
  border-right-color: transparent !important;
}

/* --- Punkt 7: Sidebar dauerhaft sichtbar halten, auch bei langem Inhalt im Hauptbereich.
   `position: sticky` hatte mit overflow:hidden auf body Probleme; mit fixed wird sie zuverlässig gehalten. --- */
.app {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  align-items: start !important;
}
.app.sidebar-collapsed {
  grid-template-columns: 84px minmax(0, 1fr) !important;
}
.sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  align-self: start !important;
}
/* Auf kleineren Screens (Mobile) bleibt das bestehende Verhalten erhalten */
@media (max-width: 900px) {
  .sidebar {
    position: fixed !important;
    height: 100vh !important;
  }
}

/* ============================================================
   Punkt 7 – Login auf Smartphones: rechtes Hero-Bild komplett ausblenden,
   nur die Anmelde-Karte zentriert darstellen.
   ============================================================ */
@media (max-width: 768px) {
  body.is-login .login-screen,
  .login-screen {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
  }
  body.is-login .login-hero,
  .login-hero {
    display: none !important;
  }
  body.is-login .login-card,
  .login-card {
    width: min(440px, calc(100vw - 24px)) !important;
    min-height: auto !important;
    margin: 16px auto !important;
    box-shadow: 0 8px 24px rgba(10, 30, 25, .10) !important;
  }
  body.is-login .login-card__inner,
  .login-card__inner {
    padding: 28px 24px 24px !important;
  }
  body.is-login {
    overflow: auto !important;
  }
}

/* ============================================================
   Verbessertes Einklappen der Sidebar (rev v1.2.72)
   - Menü einklappbar so dass nur noch Icons sichtbar bleiben
   - Toggle-Button immer sichtbar und gut klickbar
   - Sidebar bleibt beim Scrollen stehen (sticky)
   ============================================================ */
.app.sidebar-collapsed {
  grid-template-columns: 72px minmax(0, 1fr) !important;
}
.app.sidebar-collapsed .sidebar {
  padding: 12px 8px 12px !important;
}
.app.sidebar-collapsed .sidebar__brand {
  padding: 0 0 8px !important;
  justify-content: center;
}
.app.sidebar-collapsed .sidebar__logo {
  height: 40px !important;
  width: auto !important;
  padding: 4px !important;
}
.app.sidebar-collapsed .sidebar__brand-text,
.app.sidebar-collapsed .menu-search,
.app.sidebar-collapsed .nav__item span,
.app.sidebar-collapsed .nav__item-meta,
.app.sidebar-collapsed .nav__legal-links,
.app.sidebar-collapsed .nav__bottom span,
.app.sidebar-collapsed .sidebar__version,
.app.sidebar-collapsed .sidebar__toggle-text,
.app.sidebar-collapsed .nav__sub,
.app.sidebar-collapsed details > summary > span,
.app.sidebar-collapsed details ul,
.app.sidebar-collapsed details {
  display: none !important;
}
.app.sidebar-collapsed .nav__item {
  justify-content: center !important;
  padding: 12px 8px !important;
  gap: 0 !important;
  min-width: 0 !important;
}
.app.sidebar-collapsed .nav__icon {
  width: 22px !important;
  height: 22px !important;
}
.app.sidebar-collapsed .sidebar__toggle {
  width: 100% !important;
  height: 36px !important;
  padding: 0 !important;
}
.app.sidebar-collapsed .sidebar__toggle-arrow {
  font-size: 18px !important;
}

/* Sidebar IMMER sticky beim Scrollen */
@media (min-width: 901px) {
  .app .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    align-self: start !important;
    overflow-y: auto !important;
  }
}

/* ============================================================
   Mobile-Optimierungen für Buchungs-Modal (rev v1.2.72)
   - Titel (Buchender) und Preis untereinander
   - Modal-Footer-Buttons untereinander statt nebeneinander
   ============================================================ */
@media (max-width: 760px) {
  .modal__header {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  #modal-title {
    width: 100%;
    font-size: 16px !important;
    line-height: 1.25;
    padding-right: 36px;
  }
  .booking-modal-price {
    width: 100%;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    text-align: left !important;
  }

  /* Modal-Footer: alle Buttons in vertikalem Stack */
  .modal__footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .modal__footer > button,
  .modal__footer > a.btn {
    width: 100% !important;
    margin: 0 !important;
    flex: none !important;
  }
  /* Storno-Button (margin-right:auto) auf Mobile zurücksetzen */
  .modal__footer #btn-del {
    margin-right: 0 !important;
    order: 99; /* Stornieren ans Ende der Liste */
  }
}

/* ============================================================
   Sperrzeit (blocked) im Kalender — graue Schraffur statt
   farbiger Buchungsfläche.
   ============================================================ */
/* Sperrzeit-Basis: NICHTS — alles wird von den späteren v1.2.88+ Regeln
   gesetzt (mittelgrau auf Vollfläche, Diagonale auf Anreisetag).
   Hier nur Resets damit die Hintergrund-Vererbung von --booking-color (#6b7280)
   nicht stört und die Zelle nicht ihre Höhe verliert. */
.cal-cell.cal-cell--blocked {
border-color: rgba(75,85,99,0.35) !important;
}
.cal-cell.cal-cell--blocked::before {
  background: transparent !important;
}
.cal-cell.cal-cell--blocked .cal-cell__guest,
.cal-cell.cal-cell--blocked .cal-cell__guest-meta {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.cal-cell.cal-cell--blocked .cal-cell__top span {
  color: #ffffff !important;
}

/* ============================================================
   FINAL OVERRIDES v1.2.73
   - Sidebar Desktop: garantiert sticky + scrollbar + klarer Toggle
   - Toggle-Pfeil immer sichtbar
   - Mobile Tabellen scrollbar
   ============================================================ */

/* -- Desktop ab 901px: Sidebar bleibt fest, eigener Scroll -- */
@media (min-width: 901px) {
  .app {
    min-height: 100vh;
    align-items: start;
  }
  .app > .sidebar,
  .app .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-self: start !important;
  }
  .app > .main,
  .app .main {
    min-width: 0;
  }
}

/* -- Toggle-Button: immer gut sichtbar mit Pfeil -- */
.sidebar__toggle.sidebar__edge-toggle {
  position: relative !important;
  width: 100% !important;
  height: 36px !important;
  margin: 0 0 10px 0 !important;
  border: 1px solid rgba(12, 89, 73, .25) !important;
  background: rgba(255,255,255,.95) !important;
  color: var(--bp-login-green-1, #0c5949) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  z-index: 5 !important;
  box-shadow: 0 4px 12px rgba(7, 63, 53, .08) !important;
}
.sidebar__toggle.sidebar__edge-toggle::before {
  content: '‹';
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  display: inline-block;
  transition: transform .2s ease;
}
.sidebar__toggle.sidebar__edge-toggle::after {
  content: 'Menü einklappen';
  font-size: 12px;
  font-weight: 700;
}
.app.sidebar-collapsed .sidebar__toggle.sidebar__edge-toggle::before {
  content: '›';
}
.app.sidebar-collapsed .sidebar__toggle.sidebar__edge-toggle::after {
  content: '';
}
.sidebar__toggle.sidebar__edge-toggle .sidebar__toggle-arrow,
.sidebar__toggle.sidebar__edge-toggle .sidebar__toggle-text {
  display: none !important;
}
.sidebar__toggle.sidebar__edge-toggle:hover {
  background: #fff !important;
  border-color: rgba(12, 89, 73, .45) !important;
}

/* Mobile (<=900px): Toggle ausblenden, mobile menu nutzt eigenen Mechanismus */
@media (max-width: 900px) {
  .sidebar__toggle.sidebar__edge-toggle { display: none !important; }
}

/* -- Mobile: Tabellen horizontal scrollbar -- */
@media (max-width: 760px) {
  .table-wrap,
  .invoice-list,
  .pricing-card,
  .messages-table-wrap,
  .settings-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table,
  .invoice-list table {
    min-width: 600px;
  }

  /* Setup-Wizard Tabs horizontal scrollbar */
  .wizard-tabs,
  .wizard-nav,
  .nav-pills,
  .tabs,
  [role="tablist"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: thin;
  }

  /* Toolbar mit Schaltern wie Multi/Einzel + Hilfe */
  .calendar-toolbar,
  .toolbar-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Beim Login startet die Seite nicht halb verkleinert */
  html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* -- Sperrzeit ENTFERNT (v1.2.89): wurde durch mittelgrau Vollfläche
   am Ende der Datei ersetzt. */
.cal-cell.cal-cell--blocked .cal-cell__guest,
.cal-cell.cal-cell--blocked .cal-cell__guest-meta,
.cal-cell.cal-cell--blocked .cal-cell__top span {
color: #ffffff !important;
  padding: 0;
  display: block;
}

/* ============================================================
   Sperrzeit-Modus im Buchungs-Formular (rev v1.2.73)
   - In .blocked-mode werden alle Bereiche ausgeblendet, die für
     eine Apartment-Sperre nicht benötigt werden.
   - Sichtbar bleiben: Apartment-Auswahl, Datum, Kanal, Notizen
     (Grund), und die Footer-Buttons.
   ============================================================ */
#bkg-form.blocked-mode .card,
#bkg-form.blocked-mode #payment-card,
#bkg-form.blocked-mode [data-extras-card],
#bkg-form.blocked-mode .grid-2,
#bkg-form.blocked-mode .grid-3,
#bkg-form.blocked-mode .child-age-list,
#bkg-form.blocked-mode .longstay-row,
#bkg-form.blocked-mode .extra-service-row {
  display: none !important;
}

/* Aber: Grund-Eingabe (textarea name=notes) und der Form-Submit-Footer
   sollen sichtbar bleiben, ebenso wie die Datum-/Apartment-/Kanal-Auswahl.
   Felder, die wir behalten wollen, packen wir in eine Whitelist:
*/
#bkg-form.blocked-mode > .field,
#bkg-form.blocked-mode > #blocked-banner,
#bkg-form.blocked-mode > .modal__footer,
#bkg-form.blocked-mode > [data-keep-in-blocked] {
  display: block !important;
}
#bkg-form.blocked-mode > .modal__footer {
  display: flex !important;
}

/* Felder mit den Pflicht-Inputs für Sperrzeit explizit zeigen, falls sie
   in einem Wrapper liegen. Im Original-Form sind propertyId, source,
   dateRange direkt in einer card.card--tight verschachtelt – die wir
   weiter sichtbar lassen müssen. Die Lösung: Erste Karte sichtbar lassen
   (Apartment + Datum + Kanal), Rest verstecken. */
#bkg-form.blocked-mode > .card:first-of-type,
#bkg-form.blocked-mode > .card.card--tight:first-of-type {
  display: block !important;
}

/* Die Apartment-Auswahl-Karte enthält auch Gast-Felder (Name/Email/etc).
   Diese ausblenden, aber Datum & Kanal & Apartment sichtbar lassen. */
#bkg-form.blocked-mode [data-block-when-blocked] {
  display: none !important;
}
#bkg-form.blocked-mode input[name="email"],
#bkg-form.blocked-mode input[name="phone"],
#bkg-form.blocked-mode input[name="guests"],
#bkg-form.blocked-mode input[name="childrenFree"],
#bkg-form.blocked-mode input[name="childrenPaid"],
#bkg-form.blocked-mode input[name="pets"],
#bkg-form.blocked-mode input[name="totalPrice"] {
  /* Wir setzen die Eltern-Field auf hidden via :has, falls verfügbar, sonst
     graue die Inputs einfach aus. */
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.4);
  pointer-events: none;
}
#bkg-form.blocked-mode .field:has(input[name="email"]),
#bkg-form.blocked-mode .field:has(input[name="phone"]),
#bkg-form.blocked-mode .field:has(input[name="guests"]),
#bkg-form.blocked-mode .field:has(input[name="childrenFree"]),
#bkg-form.blocked-mode .field:has(input[name="childrenPaid"]),
#bkg-form.blocked-mode .field:has(input[name="pets"]),
#bkg-form.blocked-mode .field:has(input[name="totalPrice"]) {
  display: none !important;
}

/* Notizen-Field besonders prominent in Sperrzeit-Modus */
#bkg-form.blocked-mode .field:has(textarea[name="notes"]) {
  display: block !important;
  background: rgba(255,255,255,0.85);
  border: 2px solid var(--bp-login-green-1, #0c5949);
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px;
}
#bkg-form.blocked-mode textarea[name="notes"] {
  min-height: 80px;
  background: #fff;
}

/* ============================================================
   Setup-Wizard: Tabs/Pills sollen auf Mobile horizontal scrollen
   statt links abgeschnitten zu werden.
   ============================================================ */
@media (max-width: 760px) {
  .wizard-step-labels {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 4px 8px 8px;
    margin: 0 -8px;
    scroll-padding-left: 8px;
    scroll-snap-type: x proximity;
  }
  .wizard-step-labels span {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .wizard-step-labels span.is-active {
    scroll-snap-align: center;
  }
  /* Wizard-Card auf Mobile: weniger Innenpadding, mehr Platz für Inhalt */
  .wizard-card {
    padding: 16px !important;
  }
}

/* Sidebar Mobile soll nicht mit nach unten scrollen — die App-Shell scrollt */
@media (max-width: 900px) {
  .app {
    align-items: stretch;
  }
}

/* ============================================================
   Calendar-Toolbar Mobile (rev v1.2.73)
   - Multi/Einzel-Schalter und Apartment-Dropdown saubere Stapelung
   - Hilfe-Button bleibt erreichbar
   ============================================================ */
@media (max-width: 760px) {
  .calendar-header-controls {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .calendar-view-toggle {
    width: 100%;
    display: flex;
    gap: 4px;
  }
  .calendar-view-toggle__btn {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13px;
  }
  .calendar-toolbar__select--property {
    width: 100% !important;
    max-width: none !important;
  }
  /* Topbar-Actions bei Mobile: Hilfe-Button als Block, nicht abgeschnitten */
  .topbar__actions, .header-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ============================================================
   Rechnungs-Edit-Modal — breiter & Item-Row responsive
   (rev v1.2.74)
   - Modal mit Rechnungspositionen braucht mehr Breite
   - Auf Desktop: alle Spalten + Entfernen-Button auf einer Zeile
   - Auf Tablet/Mobile: 2-spaltig oder gestapelt
   - Entfernen-Button immer im Sichtbereich
   ============================================================ */

/* 1) Modal global etwas breiter (gilt für alle Modals, ist aber unkritisch) */
.modal__panel {
  max-width: min(1024px, calc(100vw - 24px)) !important;
}

/* 2) Item-Row neu strukturiert: auto-fit grid, Entfernen-Button ist Teil des Grids */
.invoice-item-row {
  grid-template-columns: minmax(220px, 2.4fr) 90px 130px 100px 110px !important;
  align-items: end;
}
.invoice-item-row [data-remove-item] {
  grid-column: auto;
  align-self: end;
  justify-self: stretch;
  white-space: nowrap;
}

/* 3) Mittelgroß (≤980px): zwei Zeilen — Leistung breit oben, Rest unten */
@media (max-width: 980px) {
  .invoice-item-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .invoice-item-row > .field:first-child {
    grid-column: 1 / -1; /* Leistung über volle Breite */
  }
  .invoice-item-row [data-remove-item] {
    grid-column: 4 / 5;
    justify-self: end;
  }
}

/* 4) Schmal (≤620px): alles untereinander */
@media (max-width: 620px) {
  .invoice-item-row {
    grid-template-columns: 1fr 1fr !important;
  }
  .invoice-item-row > .field:first-child {
    grid-column: 1 / -1;
  }
  .invoice-item-row [data-remove-item] {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

/* 5) Spalten-Header der Item-Liste auch responsive (falls vorhanden) */
.invoice-items-head {
  flex-wrap: wrap;
}

/* 6) Item-Liste insgesamt: kein horizontaler Overflow im Modal */
#invoice-items {
  overflow-x: hidden;
}

/* 7) Modal-Body: verticales Scrolling sauber */
.modal__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   FINAL FINAL Sidebar v1.2.75
   - position: fixed (100% verlässlich, unabhängig von Overflow-Parents)
   - Toggle-Pfeil als eigene Zeile UNTER dem Logo, NICHT über dem Menü
   - Main-Bereich bekommt margin-left, sonst überlappt es
   ============================================================ */

/* Desktop: Sidebar absolut links, fixed, Main-Bereich daneben */
@media (min-width: 901px) {
  .app > .sidebar,
  .app .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 260px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 50 !important;
    /* Wichtig: NICHT in Grid-Spalte — wir nutzen margin-left auf .main */
  }
  .app {
    display: block !important; /* Grid aus, einfacher Flow */
    min-height: 100vh;
  }
  .app > .main,
  .app .main {
    margin-left: 260px !important;
    min-height: 100vh;
    transition: margin-left .22s ease;
  }
  .app.sidebar-collapsed > .sidebar,
  .app.sidebar-collapsed .sidebar {
    width: 76px !important;
  }
  .app.sidebar-collapsed > .main,
  .app.sidebar-collapsed .main {
    margin-left: 76px !important;
  }
}

/* Toggle-Pfeil: KLAR sichtbar als eigene Zeile, nicht überlagernd */
.sidebar__toggle.sidebar__edge-toggle {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  display: flex !important;
  width: 100% !important;
  height: 38px !important;
  margin: 0 0 12px 0 !important;
  padding: 0 12px !important;
  border: 1px solid rgba(12, 89, 73, .25) !important;
  background: rgba(255,255,255,.95) !important;
  color: var(--bp-login-green-1, #0c5949) !important;
  border-radius: 12px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(7, 63, 53, .08) !important;
  z-index: 5 !important;
}
.sidebar__toggle.sidebar__edge-toggle::before {
  content: '‹  Menü einklappen';
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  display: inline-block;
}
.sidebar__toggle.sidebar__edge-toggle::after {
  content: '';
}
.app.sidebar-collapsed .sidebar__toggle.sidebar__edge-toggle::before {
  content: '›';
  font-size: 22px;
}

.sidebar__toggle.sidebar__edge-toggle .sidebar__toggle-arrow,
.sidebar__toggle.sidebar__edge-toggle .sidebar__toggle-text {
  display: none !important;
}

/* Mobile: Toggle versteckt, nutzt Burger-Menü */
@media (max-width: 900px) {
  .sidebar__toggle.sidebar__edge-toggle { display: none !important; }
}

/* Im eingeklappten Zustand: Suche und Brand-Text ausblenden */
.app.sidebar-collapsed .menu-search { display: none !important; }
.app.sidebar-collapsed .sidebar__logo {
  height: 38px !important;
  width: 38px !important;
  object-fit: contain;
  padding: 4px !important;
}
.app.sidebar-collapsed .sidebar__brand {
  padding: 4px 0 8px !important;
  justify-content: center;
}


/* ============================================================
   FINALE Sidebar-Toggle Variante v1.2.76:
   Kleiner Pfeil-Tab am RECHTEN RAND der Sidebar, mittig vertikal.
   Verwendet position: fixed (relativ zum Viewport, nicht zur Sidebar),
   damit overflow:auto auf der Sidebar funktioniert.
   ============================================================ */
@media (min-width: 901px) {
  .app .sidebar__toggle.sidebar__edge-toggle {
    /* Hartes Reset aller Vorgänger-Regeln */
    all: unset;
    box-sizing: border-box;
    position: fixed !important;
    top: 50% !important;
    left: 252px !important;  /* Sidebar=260px, Pfeil mittig auf der Kante */
    transform: translateY(-50%) !important;
    width: 18px !important;     /* halb so groß wie vorher */
    height: 36px !important;    /* halb so groß wie vorher */
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(255,255,255,0.92) !important;
    color: rgba(12, 89, 73, 0.55) !important;  /* dezenter */
    border: 1px solid rgba(12, 89, 73, .18) !important;
    border-radius: 9px !important;
    box-shadow: 1px 1px 4px rgba(7, 63, 53, .08) !important;
    cursor: pointer !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    opacity: 0.7 !important;
    transition: opacity .15s ease, left .22s ease, color .15s ease, border-color .15s ease !important;
  }
  .app .sidebar__toggle.sidebar__edge-toggle:hover {
    opacity: 1 !important;
    color: var(--bp-login-green-1, #0c5949) !important;
    border-color: rgba(12, 89, 73, .45) !important;
  }
  /* Eingeklappt: Sidebar 76px breit, Pfeil entsprechend näher links */
  .app.sidebar-collapsed .sidebar__toggle.sidebar__edge-toggle {
    left: 68px !important;
  }
  /* Pfeil-Inhalt: ‹ wenn ausgeklappt, › wenn eingeklappt */
  .app .sidebar__toggle.sidebar__edge-toggle::before {
    content: '‹' !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }
  .app.sidebar-collapsed .sidebar__toggle.sidebar__edge-toggle::before {
    content: '›' !important;
  }
  .app .sidebar__toggle.sidebar__edge-toggle::after { content: '' !important; }
  .app .sidebar__toggle.sidebar__edge-toggle .sidebar__toggle-arrow,
  .app .sidebar__toggle.sidebar__edge-toggle .sidebar__toggle-text {
    display: none !important;
  }
}

/* Mobile (<=900px): Toggle versteckt, Burger-Menü zuständig */
@media (max-width: 900px) {
  .app .sidebar__toggle.sidebar__edge-toggle {
    display: none !important;
  }
}

/* ============================================================
   Tooltip "Menü einklappen / ausklappen" beim Hover
   ============================================================ */
@media (min-width: 901px) {
  .app .sidebar__toggle.sidebar__edge-toggle {
    position: fixed;
  }
  /* Native HTML title= reicht; kein extra Tooltip nötig */
}

/* ============================================================
   Wechseltag (Split-Turnover): wenn am gleichen Tag eine Buchung
   endet UND eine neue beginnt, müssen BEIDE Markierungen sichtbar sein.
   Die neue Buchung wird wie üblich als --pos-start dargestellt
   (rechte Hälfte mit Pfeil von links). Zusätzlich rendern wir die
   Abreise-Diagonale der alten Buchung als ::after.
   ============================================================ */
/* (Entfernt v1.2.81: Diese alten v1.2.77-Regeln rendern ein zusätzliches
   ::after-Pseudo mit eigener clip-path und schaffen so ein zweites Dreieck.
   Wechseltage werden jetzt vollständig im JS via Inline-Styles gerendert
   (siehe calendar.js renderCell). CSS-seitige Pseudos sind hier nicht mehr
   nötig und stören die Inline-Override-Strategie.) */

/* ============================================================
   Anreise-Zelle bündig: margin-top/bottom war 4px (Lücke zur 
   nachfolgenden Zelle). Wir entfernen die Lücke an den
   verbindenden Kanten zwischen pos-start und pos-middle/end.
   ============================================================ */
.cal-cell.cal-cell--pos-start,
.cal-cell.cal-cell--pos-middle,
.cal-cell.cal-cell--pos-end,
.cal-cell.cal-cell--turnover,
.cal-cell.cal-cell--split-turnover {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Nur die "Single"-Zelle (1-Tages-Buchung) behält Abstand oben/unten */
.cal-cell.cal-cell--pos-single {
  margin-top: 4px;
  margin-bottom: 4px;
}

/* ============================================================
   FINAL FINAL Sidebar Toggle v1.2.76
   Kleiner Pfeil-Tab am rechten Rand der Sidebar, vertikal mittig.
   Kein Tooltip-Text mehr, nur ein dezenter ‹/›-Knopf.
   Überschreibt ALLE vorherigen Versuche (mit höchster Spezifität).
   ============================================================ */
@media (min-width: 901px) {
  body .app .sidebar__toggle.sidebar__edge-toggle {
    all: unset !important;
    box-sizing: border-box !important;
    position: fixed !important;
    top: 50% !important;
    left: 246px !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #0c5949 !important;
    border: 1px solid rgba(12, 89, 73, 0.30) !important;
    border-left: none !important;
    border-radius: 0 12px 12px 0 !important;
    box-shadow: 2px 2px 6px rgba(7, 63, 53, 0.10) !important;
    cursor: pointer !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    transition: left .22s ease, background .15s ease, border-color .15s ease !important;
  }
  body .app.sidebar-collapsed .sidebar__toggle.sidebar__edge-toggle {
    left: 62px !important;
  }
  body .app .sidebar__toggle.sidebar__edge-toggle:hover {
    background: #f3f8f5 !important;
    border-color: rgba(12, 89, 73, 0.55) !important;
  }
  /* Pfeil-Symbol: < ausgeklappt, > eingeklappt */
  body .app .sidebar__toggle.sidebar__edge-toggle::before {
    content: '‹' !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }
  body .app.sidebar-collapsed .sidebar__toggle.sidebar__edge-toggle::before {
    content: '›' !important;
  }
  body .app .sidebar__toggle.sidebar__edge-toggle::after {
    content: '' !important;
  }
  /* Alte interne Spans verstecken */
  body .app .sidebar__toggle.sidebar__edge-toggle .sidebar__toggle-arrow,
  body .app .sidebar__toggle.sidebar__edge-toggle .sidebar__toggle-text {
    display: none !important;
  }
}

/* ============================================================
   Wechseltag (Split-Turnover) — beide Diagonalen sichtbar
   v1.2.76 endgültiger Fix
   
   Bei einer Zelle, an der GLEICHZEITIG eine Buchung endet UND
   eine neue beginnt, müssen beide Markierungen sichtbar sein.
   
   Lösung: Wir nutzen einen Linear-Gradient als Hintergrund, der 
   zwei Farben durch eine Diagonale trennt. Das ::after- und das
   clip-path-Verfahren funktioniert nicht zuverlässig, weil
   pos-start bereits einen eigenen clip-path hat.
   ============================================================ */
.cal-cell--split-turnover.cal-cell--pos-start {
/* Wir überschreiben die background-Farbe und clip-path.
     Die Linear-Gradient-Diagonale verläuft von links unten (departure-color) 
     nach rechts oben (booking-color = arrival-color). */
    linear-gradient(
      to top right,
      var(--departure-color, #6b7280) 0%,
      var(--departure-color, #6b7280) 49%,
      var(--booking-color, #15803d) 51%,
      var(--booking-color, #15803d) 100%
    ) !important;
  /* Pfeil-Form bleibt erhalten (Spitze links zeigt auf den Vortag) */
}

/* Bei Sperrzeit-Wechsel: hellgrau-mit-Schraffur bleibt erhalten,
   aber die abreisende Buchung im Departure-Dreieck */
.cal-cell--split-turnover.cal-cell--pos-start.cal-cell--blocked {
linear-gradient(
      to top right,
      var(--departure-color, #6b7280) 0%,
      var(--departure-color, #6b7280) 49%,
      transparent 51%,
      transparent 100%
    ),
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,0.65) 0,
      rgba(0,0,0,0.65) 2px,
      transparent 2px,
      transparent 9px
    ),
    #e5e7eb !important; */
}

/* (Entfernt v1.2.81: Diese Regel war fehlerhaft und überschrieb die korrekte
   Flag-Form von .cal-cell--turnover::before mit einem linear-gradient, der
   nur ein halbes Dreieck unten-links renderte. Die ursprüngliche Definition
   in Zeile ~1126 erzeugt jetzt wieder die korrekte Flag-Form mit Pfeilspitze
   nach rechts. Wechseltage mit Anreise + Abreise nutzen weiterhin die
   inline-Style-Variante in calendar.js und sind hiervon nicht betroffen. */

/* ============================================================
   Anreise-/Abreise-Zelle bündig zur Folgezelle
   ============================================================ */
.cal-cell.cal-cell--pos-start,
.cal-cell.cal-cell--pos-middle,
.cal-cell.cal-cell--pos-end,
.cal-cell.cal-cell--turnover,
.cal-cell.cal-cell--split-turnover {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ============================================================
   iOS Safari Auto-Zoom verhindern (rev v1.2.77)
   - Inputs müssen min. 16px font-size haben, sonst zoomt Safari beim Fokus
   - Globale Vermeidung von horizontalem Overflow auf Mobile
   ============================================================ */
@media (max-width: 760px) {
  input, select, textarea, .input, .select, .textarea {
    font-size: 16px !important; /* verhindert iOS-Auto-Zoom beim Fokus */
  }

  /* Wizard absolut keine fixen Breiten */
  .wizard-card,
  .wizard-progress,
  .wizard-step-labels,
  .wizard-content,
  .wizard-actions,
  .wizard-tabs,
  .wizard-weekday-list,
  .wizard-requirements__grid,
  .wizard-choice-grid {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .wizard-card {
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }

  /* Nichts darf breiter sein als der Viewport */
  body, .app, .main, .content, #app, .wizard-card {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Setup-Wizard Tabs: horizontal scroll bleibt OK aber dürfen die Seite nicht
     verbreitern */
  .wizard-step-labels {
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

/* Beim Anzeigen des Setup-Wizards garantiert nach oben scrollen */
.wizard-card { scroll-margin-top: 0; }
.cal-cell.cal-cell--split-turnover {
  overflow: hidden;
  position: relative;
}

/* Linke Hälfte = Abreise (alte Buchung).
   Form: "<" — 5 Punkte: top-left, top-middle, left-middle (Spitze),
   bottom-middle, bottom-left. Color wird per inline-style gesetzt. */
.cal-cell__split-departure {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  clip-path: polygon(0 0, 50% 0, 0 50%, 50% 100%, 0 100%);
  z-index: 1;
  pointer-events: none;
}

/* Rechte Hälfte = Anreise (neue Buchung).
   Form: ">" — 5 Punkte: top-middle, top-right, bottom-right,
   bottom-middle, left-middle (Spitze). Spiegelbild zu pos-start. */
.cal-cell__split-arrival {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 0 50%);
  z-index: 1;
  pointer-events: none;
}

/* Sperrzeit-Schraffur auf den entsprechenden Hälften (v1.2.87 - kein grauer Hintergrund) */
.cal-cell__split-departure.is-blocked,
.cal-cell__split-arrival.is-blocked {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,1) 0,
    rgba(0,0,0,1) 2px,
    transparent 2px,
    transparent 9px
  ) !important;
  background-color: transparent !important;
}

/* Diagonale Linie und Texte über den Overlays */
.cal-cell.cal-cell--split-turnover .cal-cell__diagline,
.cal-cell.cal-cell--split-turnover .cal-cell__top,
.cal-cell.cal-cell--split-turnover .cal-cell__guest,
.cal-cell.cal-cell--split-turnover .cal-cell__guest-meta {
  position: relative;
  z-index: 3;
}

/* Datums-Zahl bei Split-Turnover ist klein und mittig oben */
.cal-cell.cal-cell--split-turnover .cal-cell__top {
  text-align: center;
}
/* v1.2.92: KEINE weiße Pille mehr um die Datumzahl bei Wechseltagen.
   Datum weiß auf farbigem Untergrund mit dezentem Schatten. */
.cal-cell.cal-cell--split-turnover .cal-cell__top span {
padding: 0 !important;
  font-weight: 700;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}

/* ============================================================
   FINAL DEFINITIVE Booking-Diagonalen v1.2.83 — höchste Spezifität.
   Schlichte Diagonalen (KEINE Flagge mit Pfeilspitze):
   - Anreise (--pos-start): unten-rechts Dreieck
   - Abreise (--turnover): oben-links Dreieck  
   - 1-Nacht (--pos-single): voll gefüllte Zelle (selten gebraucht)
   - Wechseltag (--split-turnover): zwei Dreiecke mit gemeinsamer Diagonale
   - Sperrzeit: KOMPLETT schraffiert (kein dunkelgrau drüber)
   ============================================================ */

/* ---- Reine Abreise (Turnover): oben-links Dreieck ---- */
.calendar-new .cal-cell--turnover {
overflow: hidden !important;
  border-right: none !important;
  border-bottom: none !important;
}
.calendar-new .cal-cell--turnover::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--turnover-color, var(--brand-700)) !important;
  clip-path: polygon(0 0, 100% 0, 0 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.calendar-new .cal-cell--turnover::after {
  content: none !important;
}
.calendar-new .cal-cell--turnover > * {
  position: relative !important;
  z-index: 2 !important;
}
/* Abreise einer Sperrzeit → mittelgrau Vollfläche (v1.2.89) */
.calendar-new .cal-cell--turnover[data-turnover-blocked="1"]::before {
  background: #6b7280 !important;
}

/* ---- Wechseltag (Split-Turnover): zwei Dreiecke mit gemeinsamer Diagonale ---- */
.calendar-new .cal-cell--booked.cal-cell--pos-start.cal-cell--split-turnover,
.calendar-new .cal-cell--booked.cal-cell--blocked.cal-cell--split-turnover {
overflow: hidden !important;
}
.calendar-new .cal-cell--booked.cal-cell--pos-start.cal-cell--split-turnover::before,
.calendar-new .cal-cell--booked.cal-cell--blocked.cal-cell--split-turnover::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--departure-color, #15803d) !important;
  clip-path: polygon(0 0, 100% 0, 0 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.calendar-new .cal-cell--booked.cal-cell--pos-start.cal-cell--split-turnover::after,
.calendar-new .cal-cell--booked.cal-cell--blocked.cal-cell--split-turnover::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--arrival-color, var(--brand-700)) !important;
  clip-path: polygon(100% 0, 100% 100%, 0 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
/* Sperrzeit als Departure → REINE Schraffur (kein grau drunter) */
.calendar-new .cal-cell--booked.cal-cell--pos-start.cal-cell--split-turnover[data-departure-blocked="1"]::before,
.calendar-new .cal-cell--booked.cal-cell--blocked.cal-cell--split-turnover[data-departure-blocked="1"]::before {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,1) 0,
      rgba(0,0,0,1) 2px,
      transparent 2px,
      transparent 9px
    ),
    transparent !important;
}
/* Sperrzeit als Arrival → REINE Schraffur (kein grau drunter) */
.calendar-new .cal-cell--booked.cal-cell--pos-start.cal-cell--split-turnover[data-arrival-blocked="1"]::after,
.calendar-new .cal-cell--booked.cal-cell--blocked.cal-cell--split-turnover[data-arrival-blocked="1"]::after {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,1) 0,
      rgba(0,0,0,1) 2px,
      transparent 2px,
      transparent 9px
    ),
    transparent !important;
}
.calendar-new .cal-cell--split-turnover > * {
  position: relative !important;
  z-index: 2 !important;
}

/* ============================================================
   FINAL OVERRIDE für --pos-start (Anreise) v1.2.83:
   Schlichtes unten-rechts Dreieck (KEINE Flagge mit Notch).
   ============================================================ */
.calendar-new .cal-cell.cal-cell--booked.cal-cell--pos-start:not(.cal-cell--split-turnover)::before {
  clip-path: polygon(100% 0, 100% 100%, 0 100%) !important;
}
/* 1-Nacht Buchungen: Voll gefüllte Zelle (kein Pfeil, da Anreise=Abreise) */
.calendar-new .cal-cell.cal-cell--booked.cal-cell--pos-single::before {
  clip-path: none !important;
}

/* ============================================================
   SPERRZEIT v1.2.83: Komplett schraffiert (kein dunkelgrau drüber)
   - Volle Sperrzeit-Tage (mittlerer Block, ein-Tag-Sperrzeit)
   - Anreisetag einer Sperrzeit
   ============================================================ */
/* Mittlere Sperrzeit-Tage UND erster Tag einer Sperrzeit:
   Hintergrund komplett aus, Schraffur stattdessen.
   --pos-single (1-Tag-Sperrzeit) bekommt volle Schraffur,
   --pos-start (erster Sperrzeit-Tag) bekommt unten-rechts Dreieck Schraffur. */
.calendar-new .cal-cell--booked.cal-cell--blocked.cal-cell--pos-middle,
.calendar-new .cal-cell--booked.cal-cell--blocked.cal-cell--pos-single {
repeating-linear-gradient(
      45deg,
      rgba(0,0,0,1) 0,
      rgba(0,0,0,1) 2px,
      transparent 2px,
      transparent 9px
    ),
    transparent !important;
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,1) 0,
      rgba(0,0,0,1) 2px,
      transparent 2px,
      transparent 9px
    ) !important;
  border-color: rgba(40,40,40,0.4) !important;
  color: #111 !important;
}
.calendar-new .cal-cell--booked.cal-cell--blocked.cal-cell--pos-start:not(.cal-cell--split-turnover)::before {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,1) 0,
      rgba(0,0,0,1) 2px,
      transparent 2px,
      transparent 9px
    ),
    transparent !important;
  clip-path: polygon(100% 0, 100% 100%, 0 100%) !important;
}

/* Texte auf Sperrzeit-Zellen lesbar halten (KEIN weißer Hintergrund-Kasten,
   nur dezenter text-shadow gegen die Schraffur) */
.calendar-new .cal-cell--booked.cal-cell--blocked .cal-cell__guest,
.calendar-new .cal-cell--booked.cal-cell--blocked .cal-cell__guest-meta,
.calendar-new .cal-cell--booked.cal-cell--blocked .cal-cell__top span {
color: #111 !important;
  padding: 0 !important;
  display: block !important;
  width: auto !important;
  text-shadow:
    0 0 3px rgba(255,255,255,0.95),
    0 0 6px rgba(255,255,255,0.8),
    1px 1px 0 rgba(255,255,255,0.7),
    -1px -1px 0 rgba(255,255,255,0.7) !important;
}

/* ============================================================
   v1.2.82 — Drag-Auswahl im Kalender:
   In der Einzelansicht waren die grünen Auswahl-Rahmen kaum sichtbar
   (kleine quadratische Zellen + overflow:hidden). Hier setzen wir
   eine deutliche Hervorhebung mit höchster Spezifität.
   ============================================================ */
.calendar-new .cal-cell.cal-cell--selected,
.calendar-new--single .cal-cell.cal-cell--selected {
  background: var(--brand-100, #d1fae5) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 2px var(--brand-700, #15803d) !important;
  position: relative !important;
  z-index: 5 !important;
}
.calendar-new .cal-cell.cal-cell--selected .cal-cell__price,
.calendar-new .cal-cell.cal-cell--selected .cal-cell__top,
.calendar-new--single .cal-cell.cal-cell--selected .cal-cell__price,
.calendar-new--single .cal-cell.cal-cell--selected .cal-cell__top {
  color: var(--brand-900, #064e3b) !important;
}

/* ============================================================
   v1.2.83 — Login-Screen Schutz: App-Shell garantiert versteckt
   ============================================================ */
body.is-login #app-shell,
body.is-login .sidebar,
body.is-login .topbar,
body.is-login .mobile-menu-backdrop,
body.is-login .account-pill,
body.is-login .account-menu {
  display: none !important;
  visibility: hidden !important;
}
body.is-login #login-screen {
  display: grid !important;
  visibility: visible !important;
}

/* ============================================================
   v1.2.88 — Sperrzeit als MITTELGRAU (Vollfläche statt Schraffur).
   Anforderungen aus User-Feedback:
   - Volle Sperrzeit-Tage: einheitliches Mittelgrau (#6b7280)
   - Anreisetag einer Sperrzeit (auch wenn nur 1 Nacht): Diagonale,
     untere-rechte Hälfte grau — damit die linke Hälfte für eine
     vorherige Abreise frei ist
   - Abreisetag einer Sperrzeit: oben-links Dreieck grau
   - Wechseltag: Hälfte grau (Departure oder Arrival)
   ============================================================ */


/* ============================================================================
   v1.3.0 — KALENDER ZELL-FORM — KOMPLETTER NEUBAU
   ============================================================================
   ALLE alten cal-cell--booked / --turnover / --split-turnover / --pos-* /
   --blocked Form-Regeln sind aus dem Source-Code chirurgisch entfernt.
   Diese Sektion ist die EINZIGE Quelle für Zell-Form. Geometrie kommt aus
   einem inline SVG (.cell-shape), das von calendar.js renderCellShape()
   pro Zelle erzeugt wird.

   Layer-Stack pro Zelle (z-index):
     0 (default)  Zell-Hintergrund (weiß, surface)
     1            SVG .cell-shape — färbiges Polygon (Buchung/Sperrzeit/Wechsel)
     2            Texte (Datum, Gastname, Preis)
     4 (selected) Outline für Drag-Selektion (über SVG)
============================================================================ */

/* --- Container --- */
.calendar-new .cal-cell {
  position: relative !important;
  overflow: hidden !important;
}

/* --- SVG-Schicht: füllt EXAKT die Border-Box --- */
/* Trick: padding entfernen wir bei Buchungs-Zellen (siehe unten), sodass
   inset:0 + width/height:100% sauber genau die Border-Box füllt. */
.calendar-new .cell-shape {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  display: block !important;
}

/* --- Padding entfernen bei Buchungs-/Sperrzeit-Zellen ---
   Damit das SVG die ganze Zelle füllt. Texte bekommen padding zurück. */
.calendar-new .cal-cell--booked,
.calendar-new .cal-cell--turnover,
.calendar-new .cal-cell--split-turnover {
  padding: 0 !important;
  margin: 0 !important;
  background: var(--surface, #fff) !important;
  background-color: var(--surface, #fff) !important;
  background-image: none !important;
  border-right: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* --- ALLE alten Cell-Form-Pseudos KILLEN ---
   Diese Pseudos haben in v1.2.x die Zell-Form gemalt (mit clip-path).
   Im Neubau übernimmt das SVG diese Aufgabe. */
.calendar-new .cal-cell--booked::before,
.calendar-new .cal-cell--booked::after,
.calendar-new .cal-cell--turnover::before,
.calendar-new .cal-cell--turnover::after,
.calendar-new .cal-cell--split-turnover::before,
.calendar-new .cal-cell--split-turnover::after,
.calendar-new .cal-cell--pos-start::before,
.calendar-new .cal-cell--pos-start::after,
.calendar-new .cal-cell--pos-middle::before,
.calendar-new .cal-cell--pos-middle::after,
.calendar-new .cal-cell--pos-end::before,
.calendar-new .cal-cell--pos-end::after,
.calendar-new .cal-cell--pos-single::before,
.calendar-new .cal-cell--pos-single::after,
.calendar-new .cal-cell--blocked::before,
.calendar-new .cal-cell--blocked::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  opacity: 0 !important;
}

/* --- Texte über dem SVG --- */
.calendar-new .cal-cell .cal-cell__top,
.calendar-new .cal-cell .cal-cell__guest,
.calendar-new .cal-cell .cal-cell__guest-meta,
.calendar-new .cal-cell .cal-cell__price,
.calendar-new .cal-cell .cal-cell__diagline,
.calendar-new .cal-cell .cal-cell__dot {
  position: relative !important;
  z-index: 2 !important;
}

/* Texte in Buchungs-Zellen: Padding zurückgeben (da Zelle selber padding:0 hat) */
.calendar-new .cal-cell--booked .cal-cell__top,
.calendar-new .cal-cell--turnover .cal-cell__top,
.calendar-new .cal-cell--split-turnover .cal-cell__top {
  padding: 6px 6px 0 6px !important;
  margin-top: 0 !important;
}
.calendar-new .cal-cell--booked .cal-cell__guest,
.calendar-new .cal-cell--booked .cal-cell__guest-meta {
  padding-left: 6px !important;
  padding-right: 6px !important;
  display: block !important;
}
.calendar-new .cal-cell--booked .cal-cell__price {
  padding: 0 6px 6px 6px !important;
}

/* Datum weiß mit Schatten auf farbigen Zellen (gut lesbar auf jeder Farbe) */
.calendar-new .cal-cell--booked .cal-cell__top span,
.calendar-new .cal-cell--booked .cal-cell__guest,
.calendar-new .cal-cell--booked .cal-cell__guest-meta {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55) !important;
  font-weight: 700 !important;
}

/* Bei Anreise/Abreise/Turnover ist die Hälfte der Zelle weiß. Dort steht
   das Datum auf weißem Grund. Wir geben dem Datum einen dunklen Outline-Glow
   damit es überall lesbar ist. */
.calendar-new .cal-cell--booked.cal-cell--pos-start .cal-cell__top span,
.calendar-new .cal-cell--booked.cal-cell--pos-end .cal-cell__top span,
.calendar-new .cal-cell--booked.cal-cell--pos-single .cal-cell__top span,
.calendar-new .cal-cell--turnover .cal-cell__top span,
.calendar-new .cal-cell--split-turnover .cal-cell__top span {
  text-shadow:
    0 0 3px rgba(0,0,0,0.7),
    0 0 6px rgba(255,255,255,0.4),
    0 1px 2px rgba(0,0,0,0.55) !important;
}

/* --- Drag-Selektion (grüner Rahmen) --- */
/* Auf leeren Zellen: einfacher Inset-Box-Shadow */
.calendar-new .cal-cell.cal-cell--selected {
  background: var(--brand-100) !important;
  box-shadow: inset 0 0 0 2px var(--brand-700) !important;
  z-index: 3;
}
/* Auf Anreise-Tag (pos-start): Outline ÜBER dem SVG, sodass der grüne
   Rahmen sichtbar bleibt obwohl SVG die Zelle färbt */
.calendar-new .cal-cell.cal-cell--selected.cal-cell--pos-start {
  outline: 3px solid var(--brand-700) !important;
  outline-offset: -3px !important;
  z-index: 4 !important;
  background: transparent !important;
}

/* --- Diag-Trennlinie für Wechseltag (Original CSS) bleibt erhalten,
   wird aber durch das SVG schon gut visualisiert. Trotzdem zusätzliche
   1px-Linie für klare optische Trennung. */
.calendar-new .cal-cell--split-turnover .cal-cell__diagline {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(to top right,
    transparent calc(50% - 0.5px),
    rgba(255,255,255,0.6) 50%,
    transparent calc(50% + 0.5px)) !important;
}

/* ===== ENDE v1.3.0 ===== */

/* ============================================================================
   v1.3.0 — KOMPLETTER NEUBAU: SVG CELL ENGINE als alleinige Quelle
   ============================================================================
   - Alle alten clip-path / background / margin Regeln auf Buchungs-Zellen
     wurden physisch aus der Datei entfernt (45 Regeln in der Form-Säuberung).
   - Pseudo-Elemente werden hier still gelegt.
   - Das SVG-Overlay (.cell-shape) liefert die komplette Form.
   - Zelle hat KEIN Padding bei Buchung, sodass SVG die volle border-box füllt.
   ============================================================================ */

/* ----- 1) Pseudo-Elemente komplett still legen ----- */
.calendar-new .cal-cell--booked::before,
.calendar-new .cal-cell--booked::after,
.calendar-new .cal-cell--turnover::before,
.calendar-new .cal-cell--turnover::after,
.calendar-new .cal-cell--split-turnover::before,
.calendar-new .cal-cell--split-turnover::after,
.calendar-new .cal-cell--pos-start::before,
.calendar-new .cal-cell--pos-start::after,
.calendar-new .cal-cell--pos-middle::before,
.calendar-new .cal-cell--pos-middle::after,
.calendar-new .cal-cell--pos-end::before,
.calendar-new .cal-cell--pos-end::after,
.calendar-new .cal-cell--pos-single::before,
.calendar-new .cal-cell--pos-single::after,
.calendar-new .cal-cell--blocked::before,
.calendar-new .cal-cell--blocked::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* ----- 2) Zelle = sauberer weißer Container ----- */
.calendar-new .cal-cell {
  position: relative !important;
  overflow: hidden !important;
}
.calendar-new .cal-cell--booked,
.calendar-new .cal-cell--turnover,
.calendar-new .cal-cell--split-turnover,
.calendar-new .cal-cell--blocked {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ----- 3) SVG füllt die Zelle EXAKT (border-box) ----- */
.calendar-new .cell-shape {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  display: block !important;
}

/* ----- 4) Texte über dem SVG, mit eigenem Padding ----- */
.calendar-new .cal-cell--booked .cal-cell__top,
.calendar-new .cal-cell--turnover .cal-cell__top,
.calendar-new .cal-cell--split-turnover .cal-cell__top {
  position: relative !important;
  z-index: 2 !important;
  padding: 4px 6px 0 6px !important;
  margin: 0 !important;
}
.calendar-new .cal-cell--booked .cal-cell__guest,
.calendar-new .cal-cell--booked .cal-cell__guest-meta {
  position: relative !important;
  z-index: 2 !important;
  padding: 0 6px !important;
}
.calendar-new .cal-cell--booked .cal-cell__price,
.calendar-new .cal-cell--turnover .cal-cell__price,
.calendar-new .cal-cell--split-turnover .cal-cell__price {
  position: relative !important;
  z-index: 2 !important;
  padding: 0 6px 4px 6px !important;
}

/* ----- 5) Datum auf farbigen Buchungs-Zellen weiß mit Schatten ----- */
.calendar-new .cal-cell--booked .cal-cell__top,
.calendar-new .cal-cell--booked .cal-cell__top span,
.calendar-new .cal-cell--booked .cal-cell__guest,
.calendar-new .cal-cell--booked .cal-cell__guest-meta {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Anreise-Tag: linke Hälfte ist weiß (kein SVG dort) → Datum dunkel mit
   weißem Glow für Lesbarkeit auf beiden Hälften */
.calendar-new .cal-cell--booked.cal-cell--pos-start:not(.cal-cell--split-turnover) .cal-cell__top,
.calendar-new .cal-cell--booked.cal-cell--pos-start:not(.cal-cell--split-turnover) .cal-cell__top span {
  color: #1f2937 !important;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.95), 0 0 2px rgba(255, 255, 255, 0.95) !important;
}
/* Abreise-Tag in turnover (ohne nachfolgende Buchung): rechte Hälfte weiß */
.calendar-new .cal-cell--turnover:not(.cal-cell--split-turnover) .cal-cell__top,
.calendar-new .cal-cell--turnover:not(.cal-cell--split-turnover) .cal-cell__top span {
  color: #1f2937 !important;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.95) !important;
}

/* ----- 6) Selektionsrahmen — funktioniert auch auf Anreise-Tag ----- */
.calendar-new .cal-cell--selected {
  outline: 3px solid #15803d !important;
  outline-offset: -3px !important;
  z-index: 3 !important;
}
.calendar-new .cal-cell--selected:not(.cal-cell--booked):not(.cal-cell--turnover) {
  background: #d1fae5 !important;
  background-color: #d1fae5 !important;
}

/* ============================================================================
   v1.3.1 — Datum (cal-cell__top) IMMER oben in der Zelle.
   Auch bei Anreise/Abreise/Sperrzeit-Tagen. Erzwingen mit flex order.
   ============================================================================ */
.calendar-new .cal-cell {
  justify-content: flex-start !important;
}
.calendar-new .cal-cell__top {
  order: 0 !important;
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  align-self: stretch !important;
}
.calendar-new .cal-cell__guest {
  order: 1 !important;
}
.calendar-new .cal-cell__guest-meta {
  order: 2 !important;
}
.calendar-new .cal-cell__price {
  order: 99 !important;
  margin-top: auto !important;
}
/* Buchungs-Zellen: Datum oben mit Padding für Lesbarkeit auf farbiger Fläche */
.calendar-new .cal-cell--booked .cal-cell__top,
.calendar-new .cal-cell--turnover .cal-cell__top,
.calendar-new .cal-cell--split-turnover .cal-cell__top,
.calendar-new .cal-cell--blocked .cal-cell__top {
  padding: 4px 6px 0 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
/* Datum auf farbigem Hintergrund: weiß mit Schatten */
.calendar-new .cal-cell--booked:not(.cal-cell--pos-start):not(.cal-cell--turnover):not(.cal-cell--split-turnover) .cal-cell__top,
.calendar-new .cal-cell--booked:not(.cal-cell--pos-start):not(.cal-cell--turnover):not(.cal-cell--split-turnover) .cal-cell__top span,
.calendar-new .cal-cell--blocked:not(.cal-cell--pos-start):not(.cal-cell--turnover):not(.cal-cell--split-turnover) .cal-cell__top,
.calendar-new .cal-cell--blocked:not(.cal-cell--pos-start):not(.cal-cell--turnover):not(.cal-cell--split-turnover) .cal-cell__top span {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55) !important;
}
/* v1.3.191: Anreisetag dunkel, keinen Glow (User-Wunsch).
   Abreise/Turnover werden weiter unten (v1.3.191 Block) auf weiß gesetzt. */
.calendar-new .cal-cell--booked.cal-cell--pos-start .cal-cell__top,
.calendar-new .cal-cell--booked.cal-cell--pos-start .cal-cell__top span {
  color: #1f2937 !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}

/* ============================================================================
   v1.3.181 — Datum-Zahl ist wieder sichtbar (als weiße Pill).
   v1.3.2 hatte sie ausgeblendet, weil sie als redundant galt — der User
   wünscht sie aber zurück für bessere Orientierung beim Scrollen.
   ============================================================================ */
.calendar-new .cal-cell--booked .cal-cell__top,
.calendar-new .cal-cell--turnover .cal-cell__top,
.calendar-new .cal-cell--split-turnover .cal-cell__top,
.calendar-new .cal-cell--blocked .cal-cell__top {
  display: flex !important;
  position: relative;
  z-index: 4;
  padding: 3px 5px 0;
  pointer-events: none;
}

/* Gast-Bereich braucht wieder Standard-Padding (war 8px wegen weggefallenem top). */
.calendar-new .cal-cell--booked .cal-cell__guest {
  padding-top: 0 !important;
}

/* ============================================================================
   v1.3.3 — Mobile Multi-View Zell-Padding fix + Smartphone Landscape Fix
   ============================================================================ */

/* --- Issue 1: Mobile Multi-View hatte padding:4px auf der Zelle, was die
   SVG-Form um 4px schrumpft (weil position:absolute mit inset:0 die padding-box
   nutzt). Wir nutzen Border-Box-Sizing und zwingen die SVG bis an die border-edge. --- */
@media (max-width: 820px) {
  .calendar-new:not(.calendar-new--single) .cal-cell--booked,
  .calendar-new:not(.calendar-new--single) .cal-cell--turnover,
  .calendar-new:not(.calendar-new--single) .cal-cell--split-turnover,
  .calendar-new:not(.calendar-new--single) .cal-cell--blocked {
    padding: 0 !important;
  }
  .calendar-new:not(.calendar-new--single) .cell-shape {
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}



/* ============================================================================
   v1.3.4 — Mobile Drawer FIX: scharfer Inhalt, klarer Hintergrund
   - Bisher: Drawer wirkte verschwommen (vermutlich durch backdrop-filter blur
     auf Backdrop, oder weil Sidebar in einem Stacking-Context unter dem Backdrop lag)
   - Fix: Sidebar bekommt opake Hintergrundfarbe, höchsten z-index, isolation
============================================================================ */
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .app .sidebar {
    background: var(--surface, #ffffff) !important;
    background-color: var(--surface, #ffffff) !important;
    z-index: 100 !important;
    isolation: isolate !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .mobile-menu-backdrop {
    z-index: 90 !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
  /* Sidebar-Inhalte auch klar, falls eine Eltern-Regel filter setzt */
  .app .sidebar * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Hamburger-Button immer klickbar */
  .mobile-menu-button {
    z-index: 110 !important;
    position: relative !important;
  }
}

/* ============================================================================
   v1.3.5 — Smartphone Landscape: korrekte Breite und Scrolling
   - Im Landscape war der Inhalt rechts abgeschnitten (zu breite Container).
   - Wir erzwingen für Smartphone Landscape die gleichen Layout-Regeln wie
     für Smartphone Portrait (max-width: 820px).
============================================================================ */
@media (pointer: coarse) and (max-height: 500px) {
  html, body {
    min-width: 0 !important;
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .app {
    display: block !important;
    min-height: 100dvh !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
  }
  .content {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    padding: 14px !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .topbar {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  /* Kalender + Tabellen: horizontal scrollbar im Container */
  .table-wrap,
  .calendar-scroll,
  #cal-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  /* Multi-View Kalender im Landscape: gleiche Zellengrößen wie Portrait */
  .calendar-new:not(.calendar-new--single) .cal-grid {
    grid-template-columns: 150px repeat(var(--cal-days, 31), 66px) !important;
    grid-auto-rows: minmax(76px, auto) !important;
  }
}

/* ============================================================================
   v1.3.6 — Smartphone Landscape: Header-Zellen und Body-Zellen synchron
   - Vorher waren die headcells (Wochentag/Datum oben) breiter als die
     body-cells, was die Sa/So-Streifen versetzt erscheinen ließ.
   - Wir kopieren die EXAKTEN Breiten-Regeln aus dem Portrait-Block.
============================================================================ */
@media (pointer: coarse) and (max-height: 500px) {
  .calendar-new:not(.calendar-new--single) .cal-grid {
    grid-template-columns: 150px repeat(var(--cal-days, 31), 66px) !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-headcell,
  .calendar-new:not(.calendar-new--single) .cal-cell {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }

  .calendar-new:not(.calendar-new--single) .cal-rowlabel,
  .calendar-new:not(.calendar-new--single) .cal-headcell--left {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }
}

/* ============================================================================
   v1.3.7 — Finetuning: Selektion auf Sperrzeit-Anreise + Reihen-Trennlinien
============================================================================ */

/* --- Issue 1: Selektions-Outline auf Sperrzeit-Anreise (--blocked + --pos-start)
   Erzwingen wir explizit, sodass auch ein Sperrzeit-Anreise-Tag den grünen Rahmen bekommt --- */
.calendar-new .cal-cell.cal-cell--selected.cal-cell--pos-start,
.calendar-new .cal-cell.cal-cell--selected.cal-cell--blocked,
.calendar-new .cal-cell.cal-cell--selected.cal-cell--pos-start.cal-cell--blocked {
  outline: 3px solid var(--brand-700, #15803d) !important;
  outline-offset: -3px !important;
  z-index: 4 !important;
  background: transparent !important;
}

/* --- Issue 2: Reihen-Trennlinien bei Buchungs-Zellen wiederherstellen.
   .cal-cell--booked hatte border-bottom:none; das hat Reihen "verschmolzen".
   Wir geben die border zurück. --- */
.calendar-new .cal-cell--booked,
.calendar-new .cal-cell--turnover,
.calendar-new .cal-cell--split-turnover,
.calendar-new .cal-cell--blocked {
  border-right: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ============================================================================
   v1.3.8 — Selektion: ÜBERALL grüner Rahmen, auch auf Sperrzeit-Anreise
   + horizontale Trennlinien einheitlich
============================================================================ */

/* --- Issue 1: Statt outline nutzen wir box-shadow inset für den Selektions-Rahmen.
   box-shadow:inset zeichnet IMMER über dem Inhalt, auch über das SVG.
   Plus z-index:5 macht die Zelle in einen neuen Stacking-Context, der den
   Schatten garantiert oben hält. --- */
.calendar-new .cal-cell.cal-cell--selected,
.calendar-new .cal-cell.cal-cell--selected.cal-cell--pos-start,
.calendar-new .cal-cell.cal-cell--selected.cal-cell--blocked,
.calendar-new .cal-cell.cal-cell--selected.cal-cell--pos-start.cal-cell--blocked,
.calendar-new .cal-cell.cal-cell--selected.cal-cell--booked,
.calendar-new .cal-cell.cal-cell--selected.cal-cell--turnover {
  outline: none !important;
  box-shadow: inset 0 0 0 3px var(--brand-700, #15803d) !important;
  position: relative !important;
  z-index: 5 !important;
  isolation: isolate !important;
}

/* Damit die box-shadow ÜBER dem SVG sichtbar bleibt, packen wir sie noch via
   ::after on top.  Diese Pseudo wird normal von uns ausgeschaltet, also greifen
   wir mit höchster Spezifität für genau diesen Fall.  Alternativ: SVG-z-index runter. */
.calendar-new .cal-cell.cal-cell--selected .cell-shape {
  z-index: 0 !important;
}

/* --- Issue 2: Horizontale Trennlinien zwischen ALLEN Zellen einheitlich.
   Ursache: Bei Buchungs-Zellen liegt das SVG (z-index:1) ÜBER dem Zell-Border.
   Lösung: Border NICHT mehr via border-bottom (von SVG verdeckt), sondern via
   box-shadow auf der Zelle. box-shadow ist außerhalb des Stacking-Context
   und wird IMMER unter Children gezeichnet — aber sichtbar über dem Background. */
.calendar-new .cal-cell--booked,
.calendar-new .cal-cell--turnover,
.calendar-new .cal-cell--split-turnover,
.calendar-new .cal-cell--blocked {
  border-right: none !important;
  border-bottom: none !important;
  box-shadow:
    inset -1px 0 0 0 var(--border, #e5e7eb),
    inset 0 -1px 0 0 var(--border, #e5e7eb) !important;
  position: relative !important;
}

/* Beim Selected-Zustand übersteuert der grüne Rahmen die Border-Linien */
.calendar-new .cal-cell.cal-cell--selected,
.calendar-new .cal-cell.cal-cell--selected.cal-cell--pos-start,
.calendar-new .cal-cell.cal-cell--selected.cal-cell--blocked,
.calendar-new .cal-cell.cal-cell--selected.cal-cell--booked {
  box-shadow: inset 0 0 0 3px var(--brand-700, #15803d) !important;
}

/* ============================================================================
   v1.3.9 — EINHEITLICHE Trennlinien via Grid-Gap-Trick
   - Bisheriges Problem: Jede Zelle hatte einen eigenen border-right/bottom.
     Beim Übergang zwischen leeren Zellen und Buchungs-Zellen wurden die
     Linien doppelt oder vom SVG verdeckt = ungleichmäßig.
   - Lösung: Grid bekommt 1px gap und einen Hintergrund in Border-Farbe.
     Zellen haben opaken Hintergrund. Damit sind ALLE Trennlinien exakt 1px
     und kommen einzig vom Grid-Background — kein border, kein box-shadow nötig.
============================================================================ */

/* Grid: alle Zellen durch 1px-Lücke getrennt, der Lückenraum zeigt den Grid-BG */
.calendar-new .cal-grid {
  background: var(--border, #e5e7eb) !important;
  gap: 1px !important;
}

/* Zellen: opaker Hintergrund (überdeckt das Grid-BG außer in den 1px-Gaps) */
.calendar-new .cal-cell,
.calendar-new .cal-headcell,
.calendar-new .cal-rowlabel {
  background: var(--surface, #ffffff);
  border-right: none !important;
  border-bottom: none !important;
  border-top: none !important;
  border-left: none !important;
  box-shadow: none !important;
}

/* Buchungs-Zellen: keine eigenen Border/Shadows, der Grid-Gap reicht */
.calendar-new .cal-cell--booked,
.calendar-new .cal-cell--turnover,
.calendar-new .cal-cell--split-turnover,
.calendar-new .cal-cell--blocked {
  border: none !important;
  box-shadow: none !important;
}

/* Headcell + Rowlabel haben hellen Hintergrund (nicht weiß) — bleiben so */
.calendar-new .cal-headcell {
  background: var(--surface-2, #f7f7f4);
}
.calendar-new .cal-rowlabel,
.calendar-new .cal-headcell--left {
  background: var(--surface, #ffffff);
}

/* Selektion: grüner Rahmen via box-shadow (nur im Selektions-Zustand) */
.calendar-new .cal-cell.cal-cell--selected,
.calendar-new .cal-cell.cal-cell--selected.cal-cell--pos-start,
.calendar-new .cal-cell.cal-cell--selected.cal-cell--blocked,
.calendar-new .cal-cell.cal-cell--selected.cal-cell--booked,
.calendar-new .cal-cell.cal-cell--selected.cal-cell--turnover {
  box-shadow: inset 0 0 0 3px var(--brand-700, #15803d) !important;
  z-index: 5 !important;
  isolation: isolate !important;
}
.calendar-new .cal-cell.cal-cell--selected .cell-shape {
  z-index: 0 !important;
}

/* ============================================================================
   v1.3.10 — Selektion: auch auf 1-Tag-Buchung/Sperrzeit (pos-single)
   + Trennlinien sub-pixel-stabil via crisp 1fr Spalten
============================================================================ */

/* Selektion auch auf 1-Tag-Sperrzeit (pos-single) */
.calendar-new .cal-cell.cal-cell--selected.cal-cell--pos-single,
.calendar-new .cal-cell.cal-cell--selected.cal-cell--pos-single.cal-cell--blocked {
  box-shadow: inset 0 0 0 3px var(--brand-700, #15803d) !important;
  z-index: 5 !important;
  isolation: isolate !important;
}

/* --- Sub-pixel-stabile Linien ---
   Browser Subpixel-Rendering kann Grid-Gaps von 1px mal als 0.5px, mal als 2px
   zeichnen. Wir wechseln zu einem dunkleren grau, das auch bei Subpixel-
   Rundung sichtbar bleibt. Plus background-clip:padding-box damit benachbarte
   Zellen sich nicht im Pixelbereich überlagern. */
.calendar-new .cal-grid {
  background-color: #d4d4d4 !important;
  gap: 1px !important;
}
.calendar-new .cal-cell,
.calendar-new .cal-headcell,
.calendar-new .cal-rowlabel {
  background-clip: padding-box !important;
}



/* ============================================================================
   v1.3.13 — SVG-Form über die Zellgrenze hinaus (überdeckt die 1px Grid-Gaps)
   - Die 1px Lücke zwischen den Zellen war als grauer Strich sichtbar weil
     das SVG genau die Zellbreite hatte. Wir verbreitern das SVG seitlich
     um 1px (rechts) und 1px (links), sodass es bei pos-middle und pos-end
     die Lücke zur vorherigen Zelle überdeckt.
   - Anreise-Tag (pos-start) bekommt KEINEN Überstand nach links, sonst würde
     die Diagonale in die leere Vorgänger-Zelle ragen.
   - Wechseltag (split-turnover) muss klare Trennung behalten.
============================================================================ */

/* Volle Buchungstage in der Mitte: SVG ragt 1px nach links und 1px nach rechts */
.calendar-new .cal-cell--booked.cal-cell--pos-middle .cell-shape {
  left: -1px !important;
  right: -1px !important;
  width: calc(100% + 2px) !important;
}

/* Abreise-Tag (pos-end): SVG ragt 2px nach links (überdeckt die Gap UND
   den seitlichen Überstand des vorherigen pos-middle SVGs).
   Nach rechts kein Überstand — das oben-links Dreieck endet sauber an der Zellgrenze. */
.calendar-new .cal-cell--booked.cal-cell--pos-end .cell-shape {
  left: -2px !important;
  right: 0 !important;
  width: calc(100% + 2px) !important;
}

/* Anreise-Tag (pos-start) ohne nachfolgenden Wechseltag: SVG ragt 1px nach
   rechts (überdeckt die Gap zum nächsten Vollbuchungstag) */
.calendar-new .cal-cell--booked.cal-cell--pos-start:not(.cal-cell--split-turnover) .cell-shape {
  right: -1px !important;
  width: calc(100% + 1px) !important;
}

/* Wechseltag (split-turnover): KEIN linker Überstand, damit die Trennung
   zwischen Departure und Arrival klar bleibt. Rechts auch nichts. */
.calendar-new .cal-cell--split-turnover .cell-shape {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* Z-Index Reihenfolge: pos-end SVG MUSS über dem rechten Überstand des
   pos-middle liegen, sonst sieht man die graue Gap zwischen den beiden. */
.calendar-new .cal-cell--booked.cal-cell--pos-end {
  z-index: 3 !important;
  position: relative !important;
}
.calendar-new .cal-cell--booked.cal-cell--pos-middle {
  z-index: 2 !important;
  position: relative !important;
}
.calendar-new .cal-cell--booked.cal-cell--pos-start {
  z-index: 3 !important;
  position: relative !important;
}

/* ============================================================================
   v1.3.15 — Text über mehrere Zellen + finale Eliminierung des Strichs
   vor dem Abreise-Tag.
============================================================================ */

/* --- Issue 1: Gastname über mehrere Zellen verteilen ---
   Die Zelle, in der der Name STARTET (cal-cell--label-start), darf den
   Gastnamen-Text bis in die nächsten Zellen ausschreiben. Dafür brauchen
   wir: kein Clipping, fixe Breite die mehrere Zellen umfasst, höheres z-index. */
.calendar-new .cal-cell--booked.cal-cell--label-start {
  overflow: visible !important;
  z-index: 4 !important;
}
.calendar-new .cal-cell--booked.cal-cell--label-start .cal-cell__guest,
.calendar-new .cal-cell--booked.cal-cell--label-start .cal-cell__guest-meta {
  overflow: visible !important;
  white-space: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  pointer-events: none !important;
}
/* Alle anderen booked-Zellen: Gastname wird gar nicht erst gerendert
   (passiert schon im JS), aber wir blenden ihn defensiv aus für den Fall */
.calendar-new .cal-cell--booked:not(.cal-cell--label-start) .cal-cell__guest,
.calendar-new .cal-cell--booked:not(.cal-cell--label-start) .cal-cell__guest-meta {
  display: none !important;
}

/* --- Issue 2: Strich vor Abreise-Tag final eliminieren ---
   pos-end SVG nach links 3px verbreitern + z-index hoch genug, dass es
   über das pos-middle SVG liegt (das ja auch 1px nach rechts ragt). */
.calendar-new .cal-cell--booked.cal-cell--pos-end {
  z-index: 5 !important;
  position: relative !important;
  overflow: visible !important;
}
.calendar-new .cal-cell--booked.cal-cell--pos-end .cell-shape {
  left: -3px !important;
  right: 0 !important;
  width: calc(100% + 3px) !important;
}

/* ============================================================================
   v1.3.16 — Strich vor Abreise-Tag DEFINITIV killen.
   ROOT CAUSE: Subpixel-Rendering. Grid-Spalten haben non-integer Breiten
   (z.B. 73.5px), und der Browser rundet die Pixelgrenzen unterschiedlich.
   Bei F12/Zoom verschwindet der Strich → klassisches Symptom.
   FIX: Massive Überlappungen (8px), die jedes Subpixel-Rounding überschreiben.
============================================================================ */
.calendar-new .cal-cell.cal-cell--booked.cal-cell--pos-end {
  z-index: 10 !important;
  position: relative !important;
  overflow: visible !important;
  margin-left: 0 !important;
}
.calendar-new .cal-cell.cal-cell--booked.cal-cell--pos-end .cell-shape {
  left: -8px !important;
  right: 0 !important;
  width: calc(100% + 8px) !important;
  z-index: 10 !important;
}
/* pos-middle und pos-start ebenfalls mit größerer Überlappung */
.calendar-new .cal-cell.cal-cell--booked.cal-cell--pos-middle .cell-shape {
  left: 0 !important;
  right: -2px !important;
  width: calc(100% + 2px) !important;
}
.calendar-new .cal-cell.cal-cell--booked.cal-cell--pos-start:not(.cal-cell--split-turnover) .cell-shape {
  right: -2px !important;
  width: calc(100% + 2px) !important;
}

/* ============================================================================
   v1.3.19 — Mobile Bottom Tab Bar
   Zeigt sich auf Smartphone (Portrait + Landscape) mit den 5 wichtigsten
   Anlaufpunkten: Start, Buchungen, Kalender, Nachrichten, Menü.
============================================================================ */

/* Standardmäßig ausgeblendet (Desktop, Tablet) */
.bottom-tabs {
  display: none;
}

/* Mobile sichtbar: Smartphone Portrait <820px ODER Smartphone Landscape (coarse pointer + niedrige Höhe) */
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .bottom-tabs {
    display: flex;
    position: fixed;
    z-index: 95;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--border, #e5e7eb);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
    justify-content: space-around;
    align-items: stretch;
    gap: 4px;
  }
  .bottom-tabs__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 12px;
    background: transparent;
    border: none;
    color: var(--text-2, #475569);
    text-decoration: none;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    min-height: 52px;
    transition: background .15s ease, color .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-tabs__item:active {
    transform: scale(0.96);
  }
  .bottom-tabs__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  .bottom-tabs__label {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .bottom-tabs__item--active {
    color: var(--brand-700, #15803d);
    background: var(--brand-50, #ecfdf5);
  }
  .bottom-tabs__menu {
    /* Menu-Button Reset (war ein <button>) */
    appearance: none;
    -webkit-appearance: none;
  }

  /* Content-Bereich braucht zusätzlichen Bottom-Padding, sodass die Tab-Bar
     keine Inhalte überdeckt. */
  .content {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  /* FAB-Button (Buchung hinzufügen) muss über die Tab-Bar */
  .global-booking-fab {
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }
}

/* Login-Seite zeigt keine Tab-Bar */
body.is-login .bottom-tabs {
  display: none !important;
}

/* ============================================================================
   v1.3.20 — Hamburger oben in Mobile ausblenden, Bottom-Tabs übernehmen.
============================================================================ */
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .mobile-menu-button {
    display: none !important;
  }
}

/* ============================================================================
   v1.3.20 — Auswahl-Popup "Buchung oder Sperrzeit" + Sperrzeit-Form
============================================================================ */
.entry-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 4px 0 8px;
}
@media (max-width: 540px) {
  .entry-type-grid {
    grid-template-columns: 1fr;
  }
}
.entry-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 22px 16px 18px;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 16px;
  background: var(--surface, #fff);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
  font-family: inherit;
  color: inherit;
  min-height: 130px;
}
.entry-type-card:hover {
  border-color: var(--brand-700, #15803d);
  background: var(--brand-50, #ecfdf5);
}
.entry-type-card:active {
  transform: scale(0.98);
}
.entry-type-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--brand-50, #ecfdf5);
  color: var(--brand-700, #15803d);
  margin-bottom: 4px;
}
.entry-type-card[data-choice="block"] .entry-type-card__icon {
  background: #f3f4f6;
  color: #6b7280;
}
.entry-type-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #111827);
}
.entry-type-card__sub {
  font-size: 12px;
  color: var(--text-2, #475569);
  line-height: 1.3;
}

/* Sperrzeit-Form Layout */
#blocked-form-el .form-grid {
  display: grid;
  gap: 12px;
}
#blocked-form-el .form-grid--2 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 540px) {
  #blocked-form-el .form-grid--2 {
    grid-template-columns: 1fr;
  }
}
#blocked-form-el .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
#blocked-form-el .field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2, #475569);
}
#blocked-form-el input[type="date"],
#blocked-form-el input[type="text"],
#blocked-form-el select {
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface, #fff);
  color: var(--text, #111827);
}
#blocked-form-el .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e5e7eb);
}

/* ============================================================================
   v1.3.21 — Kompakter Modal-Panel für Auswahl-Popup
============================================================================ */
.modal__panel--compact {
  max-width: 380px !important;
  width: auto !important;
}
@media (max-width: 540px) {
  .modal__panel--compact {
    max-width: calc(100vw - 32px) !important;
  }
}

/* Entry-Type-Karten kompakter */
.entry-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 4px 0;
}
.entry-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 12px;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 14px;
  background: var(--surface, #fff);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
  font-family: inherit;
  color: inherit;
  min-height: 100px;
}
.entry-type-card:hover {
  border-color: var(--brand-700, #15803d);
  background: var(--brand-50, #ecfdf5);
}
.entry-type-card:active {
  transform: scale(0.97);
}
.entry-type-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--brand-50, #ecfdf5);
  color: var(--brand-700, #15803d);
}
.entry-type-card[data-choice="block"] .entry-type-card__icon {
  background: #f3f4f6;
  color: #6b7280;
}
.entry-type-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #111827);
}

/* ============================================================================
   v1.3.26 — Mobile UX-Tuning
   1) Chooser-Modal: Karten flach, beide passen ohne Scrollen rein
   2) Buchungs-Modal: auf Mobile volle Bildschirmbreite
   3) Date-Picker: BookingPilot-Brandfarben (accent-color)
============================================================================ */

/* (1) Chooser-Karten kompakter (kleinere Höhe) */
.entry-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 4px 0 8px;
}
@media (max-width: 540px) {
  .entry-type-grid {
    /* Chooser bleibt 2-spaltig auf Mobile, damit beide Optionen sichtbar sind */
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
  .entry-type-card {
    padding: 12px 8px !important;
    min-height: 92px !important;
    gap: 6px !important;
  }
  .entry-type-card__icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    margin-bottom: 0 !important;
  }
  .entry-type-card__icon svg {
    width: 22px !important;
    height: 22px !important;
  }
  .entry-type-card__title {
    font-size: 14px !important;
  }
}

/* (2) Buchungs-Modal volle Bildschirmbreite auf Mobile (NICHT für den
   compact-Chooser - der bleibt schmal). */
@media (max-width: 540px) {
  #modal .modal__panel:not(.modal__panel--compact) {
    max-width: calc(100vw - 12px) !important;
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
}

/* (3) Date-Picker in Brand-Farben (Native Picker via accent-color) */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  accent-color: var(--brand-700, #16a34a);
}
/* Webkit Indicator-Icon ebenfalls in Brand-Color, falls möglich */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(38%) sepia(86%) saturate(498%) hue-rotate(95deg) brightness(95%) contrast(86%);
  cursor: pointer;
  opacity: 0.85;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ============================================================================
   v1.3.27 — Modal-Größen final justieren
   - Chooser-Karten universell kompakter (auch auf Tablet/Desktop)
   - Buchungs-Modal auf Desktop und Tablet deutlich breiter
============================================================================ */

/* (A) Chooser-Karten überall flach */
.entry-type-card {
  padding: 10px 8px !important;
  min-height: 78px !important;
  gap: 4px !important;
}
.entry-type-card__icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  margin-bottom: 0 !important;
}
.entry-type-card__icon svg {
  width: 22px !important;
  height: 22px !important;
}
.entry-type-card__title {
  font-size: 14px !important;
  margin: 0 !important;
}
.entry-type-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 0 !important;
}

/* Compact-Modal Header und Body kompakter */
.modal__panel--compact .modal__header {
  padding: 12px 16px !important;
}
.modal__panel--compact .modal__header h2 {
  font-size: 16px !important;
}
.modal__panel--compact .modal__body {
  padding: 12px 16px 16px !important;
}

/* (B) Booking-Modal breiter auf Tablet & Desktop.
   Standard-Modal max-width war 640px - zu schmal für Buchungsformular mit
   Datum, Personen, Preisen, Notizen. Auf Tablet und Desktop bekommt es jetzt
   bis zu 960px Breite. Compact-Chooser bleibt explizit ausgenommen. */
@media (min-width: 720px) {
  #modal .modal__panel:not(.modal__panel--compact) {
    max-width: 960px !important;
    width: calc(100vw - 64px) !important;
  }
}

/* ============================================================================
   v1.3.28 — Modal-Größen FINAL (mit eigenen Modifier-Klassen)
   - .modal__panel--booking: Buchungsformular - volle Bildschirmbreite
   - .modal__panel--blocked: Sperrzeit - mobile kompakt
   - .modal__panel--compact: Chooser - mobile noch flacher
   Höchste Spezifität durch ID + Klasse + !important
============================================================================ */

/* (1) BUCHUNGSFORMULAR - volle Breite überall */
#modal .modal__panel.modal__panel--booking {
  max-width: calc(100vw - 24px) !important;
  width: calc(100vw - 24px) !important;
}
@media (max-width: 540px) {
  #modal .modal__panel.modal__panel--booking {
    max-width: calc(100vw - 8px) !important;
    width: calc(100vw - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
    height: calc(100dvh - 8px) !important;
    margin: 4px auto !important;
    border-radius: 12px !important;
  }
}

/* (2) SPERRZEIT - mobile sehr kompakt (4 Felder, knapp) */
@media (max-width: 540px) {
  #modal .modal__panel.modal__panel--blocked {
    max-height: 460px !important;
    height: auto !important;
  }
  #modal .modal__panel.modal__panel--blocked .modal__body {
    padding: 12px 16px 16px !important;
  }
  #blocked-form-el .form-grid--2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #blocked-form-el .field {
    margin-bottom: 8px !important;
    gap: 4px !important;
  }
  #blocked-form-el .field__label {
    font-size: 12px !important;
  }
  #blocked-form-el input,
  #blocked-form-el select {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
  #blocked-form-el .form-actions {
    margin-top: 10px !important;
    padding-top: 10px !important;
  }
}

/* (3) CHOOSER - mobile noch flacher */
@media (max-width: 540px) {
  #modal .modal__panel.modal__panel--compact {
    max-height: 240px !important;
    height: auto !important;
  }
  #modal .modal__panel.modal__panel--compact .modal__header {
    padding: 10px 14px !important;
  }
  #modal .modal__panel.modal__panel--compact .modal__header h2 {
    font-size: 15px !important;
  }
  #modal .modal__panel.modal__panel--compact .modal__body {
    padding: 8px 12px 14px !important;
  }
  #modal .modal__panel.modal__panel--compact .entry-type-card {
    min-height: 70px !important;
    padding: 8px 6px !important;
  }
  #modal .modal__panel.modal__panel--compact .entry-type-card__icon {
    width: 30px !important;
    height: 30px !important;
  }
  #modal .modal__panel.modal__panel--compact .entry-type-card__icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  #modal .modal__panel.modal__panel--compact .entry-type-card__title {
    font-size: 13px !important;
  }
}

/* ============================================================================
   v1.3.29 — Mobile/Tablet Polish
   - Chooser: Buttons größer + vertikal mittig (alle Geräte)
   - Tablet: Chooser auch dort kompakt (vorher nur ≤540px)
   - Modal-Header: nicht abgeschnitten + größere Schrift mobile
   - Messages-Cards: Tabellen scrollbar mobile / vertikales Layout
============================================================================ */

/* (1) CHOOSER - Karten größer & schöner. Greift jetzt UNIVERSAL (alle Geräte),
   überschreibt die früheren mobile-only Regeln durch höhere Spezifität.   */
#modal .modal__panel.modal__panel--compact {
  max-width: 420px !important;
  width: calc(100vw - 32px) !important;
  max-height: none !important;
  height: auto !important;
}
#modal .modal__panel.modal__panel--compact .modal__header {
  padding: 16px 20px !important;
}
#modal .modal__panel.modal__panel--compact .modal__header h2 {
  font-size: 18px !important;
  line-height: 1.25 !important;
}
#modal .modal__panel.modal__panel--compact .modal__body {
  padding: 16px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
#modal .modal__panel.modal__panel--compact .entry-type-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding: 0 !important;
}
#modal .modal__panel.modal__panel--compact .entry-type-card {
  min-height: 130px !important;
  padding: 18px 12px !important;
  gap: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
#modal .modal__panel.modal__panel--compact .entry-type-card__icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  margin-bottom: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#modal .modal__panel.modal__panel--compact .entry-type-card__icon svg {
  width: 32px !important;
  height: 32px !important;
}
#modal .modal__panel.modal__panel--compact .entry-type-card__title {
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* Smartphone-spezifisch: Chooser noch zentriert */
@media (max-width: 540px) {
  #modal .modal__panel.modal__panel--compact {
    max-height: 320px !important;
    margin: auto !important;
    align-self: center !important;
  }
}

/* (2) MODAL-HEADER NICHT ABGESCHNITTEN auf Mobile.
   Defensive Regel - sicherstellen dass Header sichtbar ist und nicht hinter
   irgendwas wie der Status-Bar oder safe-area liegt. */
@media (max-width: 540px) {
  #modal .modal__panel .modal__header {
    padding-top: max(14px, env(safe-area-inset-top, 0px)) !important;
    min-height: 52px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }
  #modal .modal__panel .modal__header h2,
  #modal .modal__panel #modal-title {
    font-size: 17px !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-right: 40px !important; /* Platz für Close-Button */
  }
}

/* (3) MESSAGES auf Smartphone: Tabellen horizontal scrollbar (statt zu breit)
   und Card-Padding reduziert */
@media (max-width: 540px) {
  /* dash-row--2 stapelt sowieso schon vertikal in mobile - aber Cards selbst
     waren noch zu breit weil ihre Inhalte (Tabellen mit 5 Spalten) überliefen */
  .card .table-wrap,
  #tpl-list,
  #comm-list {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  .card .table {
    min-width: 480px !important;  /* Tabellen mit 5 Spalten brauchen min. das */
    font-size: 12px !important;
  }
  .card .table th,
  .card .table td {
    padding: 6px 8px !important;
    white-space: nowrap;
  }
  .card .table .btn--sm {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  /* Card content darf nicht raussickern */
  .card,
  .dash-row--2 > .card {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  .card__header h2 {
    font-size: 15px !important;
  }
}

/* ============================================================================
   v1.3.30 — Page-Title vollständig sichtbar + Tablet-Chooser endlich kompakt
============================================================================ */

/* (1) Page-Title (Topbar Überschrift) NICHT abschneiden + größer.
   Greift auf allen Geräten ≤1100px (Tablet + Smartphone). */
@media (max-width: 1100px) {
  .topbar__title {
    font-size: 24px !important;
    line-height: 1.2 !important;
    white-space: normal !important;       /* darf umbrechen */
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
    word-break: keep-all !important;
  }
  .topbar__subtitle {
    /* auf Tablet wieder anzeigen, auf Smartphone bleibt es ausgeblendet via mobile rule */
    display: block !important;
    font-size: 13px !important;
  }
  .topbar__left {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: none !important;
  }
}
@media (max-width: 540px) {
  .topbar__title {
    font-size: 22px !important;
  }
  .topbar__subtitle {
    /* Mobile: subtitle weiter ausblenden, der Title wird groß genug sein */
    display: none !important;
  }
}

/* (2) TABLET CHOOSER: jetzt wirklich kompakt - nicht mehr bildschirmhoch.
   Mein bisheriger compact-Selector setzte max-height: none auf Desktop,
   und das overschreibt sich auf Tablet-Größen. Ich limitiere die Höhe HART. */
#modal .modal__panel.modal__panel--compact {
  max-height: 360px !important;
  height: auto !important;
  align-self: center !important;
  margin: auto !important;
}
@media (min-width: 541px) and (max-width: 1100px) {
  /* Tablet-Bereich */
  #modal .modal__panel.modal__panel--compact {
    max-width: 480px !important;
    max-height: 340px !important;
  }
}

/* Modal-Container muss center alignment unterstützen, damit das compact-Modal
   nicht nach oben gepinnt wird. */
#modal:not([hidden]) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ============================================================================
   v1.3.31 — Topbar volle Breite + Sperrzeit-Popup kompakter
============================================================================ */

/* (1) Page-Title volle Breite, Topbar selbst ohne Constraint */
@media (max-width: 1100px) {
  .topbar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .topbar__left {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
  .topbar__title {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
}

/* (2) SPERRZEIT-POPUP - Höhe an Inhalt anpassen, kein riesiger Leerraum */
#modal .modal__panel.modal__panel--blocked {
  max-height: none !important;
  height: auto !important;
  align-self: center !important;
  margin: auto !important;
  max-width: 480px !important;
  width: calc(100vw - 24px) !important;
}
#modal .modal__panel.modal__panel--blocked .modal__body {
  padding: 16px 20px 20px !important;
}
#blocked-form-el {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#blocked-form-el .field {
  margin-bottom: 12px !important;
}
#blocked-form-el .form-actions {
  margin-top: 8px !important;
  padding-top: 12px !important;
}

@media (max-width: 540px) {
  #modal .modal__panel.modal__panel--blocked {
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
  }
  #modal .modal__panel.modal__panel--blocked .modal__body {
    padding: 12px 16px 16px !important;
  }
  #blocked-form-el .field {
    margin-bottom: 10px !important;
  }
}

/* ============================================================================
   v1.3.32 — Mobile/Tablet Fixes
   1) Topbar-Title NICHT mehr abschneiden + größer
   2) Calendar-Toolbar: Toggle/Heute auf Mobile/Tablet vertikal stapeln
   3) Buchungs-Modal-Header: Preis auf neue Zeile auf Mobile
============================================================================ */

/* (1) Topbar-Title: HARTER Override - never truncate */
.topbar__title,
#page-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  hyphens: none !important;
}
@media (max-width: 1100px) {
  .topbar__title,
  #page-title {
    font-size: 24px !important;
    line-height: 1.2 !important;
    width: auto !important;
    max-width: none !important;
  }
}
@media (max-width: 540px) {
  .topbar__title,
  #page-title {
    font-size: 22px !important;
  }
  /* Topbar darf umbrechen wenn nötig */
  .topbar {
    flex-wrap: wrap !important;
  }
  .topbar__left {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .topbar__right {
    flex: 0 0 auto !important;
  }
}

/* (2) Calendar-Toolbar (Monat-Selector + View-Toggle + Heute) auf Mobile/Tablet
   übersichtlich stapeln. Bisher war der View-Toggle (Multi/Einzeln) zu breit
   und der Heute-Button verschwand. */
@media (max-width: 900px) {
  .calendar-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  /* Monat-Auswahl + View-Toggle: nebeneinander, jeweils etwa halbe Breite */
  .calendar-toolbar > * {
    min-width: 0 !important;
  }
  .calendar-view-toggle {
    width: auto !important;
    max-width: none !important;
    align-self: center !important;
  }
  .calendar-view-toggle__btn {
    padding: 6px 14px !important;
    font-size: 13px !important;
    flex: 0 1 auto !important;
  }
}
@media (max-width: 540px) {
  /* Smartphone Hochformat: alle Toolbar-Items in eine 2-spaltige Grid-Anordnung */
  .calendar-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .calendar-toolbar__nav,
  .calendar-toolbar__month {
    grid-column: 1 / -1 !important;  /* volle Breite */
  }
  .calendar-view-toggle {
    grid-column: 1 / 2 !important;
    justify-self: start !important;
  }
  /* "Heute" Button etc. - alle restlichen Buttons in Spalte 2 */
  .calendar-toolbar > .btn,
  .calendar-toolbar > button {
    grid-column: 2 / 3 !important;
    justify-self: end !important;
    white-space: nowrap !important;
  }
  /* Toggle-Innenbreite reduzieren */
  .calendar-view-toggle__btn {
    padding: 5px 12px !important;
    font-size: 12px !important;
  }
}

/* (3) Buchungs-Modal-Header: Preis auf neue Zeile (Mobile),
   damit Title nicht mehr überlappt wird.
   Auf Mobile wird der Header zu einem Block mit Title oben, Price unten. */
.modal__panel--booking .modal__header {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  row-gap: 4px !important;
}
.modal__panel--booking #booking-modal-price {
  flex-basis: 100% !important;
  width: 100% !important;
  display: block !important;
  margin-top: 2px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--brand-700, #16a34a) !important;
  white-space: nowrap !important;
}
@media (min-width: 720px) {
  /* Auf Tablet/Desktop darf der Preis wieder neben den Titel */
  .modal__panel--booking #booking-modal-price {
    flex-basis: auto !important;
    width: auto !important;
    margin-left: auto !important;
    margin-top: 0 !important;
  }
}

/* (4) Sperrzeit-Picker Container Styling */
#blocked-availability-picker {
  margin-top: 4px;
  margin-bottom: 12px;
}
#blocked-availability-picker:empty {
  display: none;
}

/* ============================================================================
   v1.3.33 — Preis-Strip + Subtitle Volle Breite + Single-Calendar Quadrate
============================================================================ */

/* (1) Buchungs-Preis als eigene Zeile UNTER dem Modal-Header */
.booking-modal-price-strip {
  padding: 10px 24px;
  background: linear-gradient(0deg, var(--brand-50, #ecfdf5), #fff);
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-700, #16a34a);
  text-align: right;
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .booking-modal-price-strip {
    padding: 8px 16px;
    font-size: 14px;
  }
}

/* (2) Topbar-Subtitle volle Breite auf Tablet */
@media (max-width: 1100px) {
  .topbar__subtitle {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    line-height: 1.4 !important;
  }
  .topbar__left {
    flex: 1 1 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* (3) Single-Month Kalender: Zellen werden Quadrate (nutzt mehr Höhe).
   aspect-ratio:1 macht jede Zelle so hoch wie ihre Spaltenbreite ist. */
@media (min-width: 540px) {
  /* Auf Tablet+ sinnvoll - auf Smartphone wären die Zellen sonst gigantisch */
  .calendar-new--single .cal-grid--single-month .cal-cell {
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    height: auto !important;
  }
}
@media (max-width: 539px) {
  /* Smartphone: Zellen leicht höher als jetzt, aber nicht voll quadratisch
     (wäre zu groß). 1:0.85 ratio gibt mehr Platz für Inhalt. */
  .calendar-new--single .cal-grid--single-month .cal-cell {
    /* v1.3.44: aspect-ratio 1/0.85 entfernt (alte 1.3.33/34 Variante) */
    min-height: 0 !important;
    height: auto !important;
  }
}

/* ============================================================================
   v1.3.34 — Title sichtbar machen + Subtitle volle Breite + Single-Cal Höhe
============================================================================ */

/* (1) Header-Padding zurücksetzen (war 190px rechts für absoluten Preis,
   den wir jetzt als Strip unterhalb haben) und Title NICHT mehr abschneiden. */
.modal__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 56px 16px 24px !important;  /* 56px rechts für Close-X */
  min-height: 56px !important;
}
#modal-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
@media (max-width: 540px) {
  .modal__header {
    padding: 14px 50px 14px 16px !important;
  }
  #modal-title {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }
}

/* (2) Subtitle volle Breite ERZWINGEN über display:block + überschreibt
   alle vorher widersprüchlichen Regeln. */
.topbar {
  flex-wrap: wrap !important;
}
.topbar__left {
  display: block !important;        /* aus flex aussteigen, klarere Block-Breite */
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  min-width: 0 !important;
}
.topbar__title,
#page-title,
.topbar__subtitle,
#page-subtitle {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
@media (min-width: 1101px) {
  /* Desktop: zurück zum normalen Inline-Layout */
  .topbar__left { display: block !important; }
}

/* (3) Single-Calendar Zellen-Höhe: aspect-ratio greift nicht ohne explicit
   sized parent. Setzen wir grid-auto-rows zusammen mit der Zellbreite per
   container queries oder pragmatisch als min-height auf die Spaltenbreite. */
.calendar-new--single .cal-grid--single-month {
  grid-template-columns: repeat(7, 1fr) !important;
}
/* Der saubere Weg: aspect-ratio 1:1 auf jede Zelle - aber dafür darf die
   Zelle keine widersprüchliche min-height haben. */
/* v1.3.44: v1.3.34 Single-Cal-Zellen Block entfernt — siehe finalen Block am Ende. */
@media (max-width: 539px) {
  .calendar-new--single .cal-grid--single-month .cal-cell {
    /* v1.3.44: aspect-ratio 1/0.85 entfernt (alte 1.3.33/34 Variante) */
    min-height: 70px !important;
  }
}
/* iPad Hochformat (768-1024px): explizite Mindesthöhe, die ungefähr der
   Spaltenbreite entspricht (Gesamtbreite ~720px / 7 Spalten ≈ 100px). */
@media (min-width: 540px) and (max-width: 1024px) {
  .calendar-new--single .cal-grid--single-month .cal-cell {
    min-height: 100px !important;
  }
}

/* ============================================================================
   v1.3.35 — Subtitle endlich volle Breite auf Tablet + Hochformat
============================================================================ */

/* Auf allem unter 1100px (also Tablet+Smartphone): topbar wird zu zwei
   Zeilen — links unten (volle Breite), rechts oben.
   Erzwungen über `order` + `flex-basis`. */
@media (max-width: 1100px) {
  .topbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 8px !important;
  }
  .topbar__left {
    order: 2 !important;          /* Links wandert in zweite Zeile */
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }
  .topbar__right,
  .dashboard-user-pill,
  .mobile-menu-button {
    order: 1 !important;          /* Aktionen + Avatar bleiben in erster Zeile */
  }
  .topbar__title,
  .topbar__subtitle,
  #page-title,
  #page-subtitle {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .topbar__subtitle,
  #page-subtitle {
    display: block !important;
    margin-top: 2px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--text-3) !important;
  }
}

/* Smartphone Hochformat: Subtitle wieder sichtbar (NICHT mehr display:none) */
@media (max-width: 540px) {
  .topbar__subtitle,
  #page-subtitle {
    display: block !important;
    font-size: 13px !important;
  }
}

/* ============================================================================
   v1.3.36 — Roll-Back von v1.3.35 + minimale gezielte Fixes
   1) Title BLEIBT OBEN (war nach unten gerutscht durch order:2)
   2) Single-Calendar Höhe: kein aspect-ratio mehr, einfach höhere Pixel-Werte
   3) #modal-title nochmal harter Override (war noch nicht gewinning)
============================================================================ */

/* (1) ROLLBACK Topbar Order: Title bleibt OBEN, Aktionen rechts. */
@media (max-width: 1100px) {
  .topbar {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  .topbar__left {
    order: 0 !important;            /* nicht mehr 2 */
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  .topbar__right,
  .dashboard-user-pill {
    order: 0 !important;
  }
  .topbar__title,
  #page-title {
    text-align: left !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .topbar__subtitle,
  #page-subtitle {
    display: block !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    margin-top: 2px !important;
    line-height: 1.4 !important;
  }
}
@media (max-width: 540px) {
  .topbar__subtitle,
  #page-subtitle {
    display: block !important;
    font-size: 13px !important;
  }
}

/* v1.3.44: v1.3.36 Single-Cal Pixel-Höhen entfernt — siehe finalen Block am Ende. */

/* (3) Modal-Title HARTER Override - schlägt jede vorherige Regel.
   Höchste Spezifität: ID + ID + !important */
#modal #modal-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
#modal .modal__header {
  display: flex !important;
  align-items: center !important;
  padding: 16px 56px 16px 24px !important;
  min-height: 56px !important;
}
@media (max-width: 540px) {
  #modal .modal__header {
    padding: 14px 50px 14px 16px !important;
  }
  #modal #modal-title {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }
}

/* ============================================================================
   v1.3.37 — Booking-Modal Header sauber + Smartphone-Topbar aufräumen
              + Single-Calendar Höhe definitiv höher
============================================================================ */

/* (1) Preis-Strip: alte ID-basierte position:absolute Regel WIRD HIER NEUTRALISIERT.
   Doppel-ID Selektor (#modal #booking-modal-price) hat höhere Spezifität. */
#modal #booking-modal-price {
  position: static !important;
  right: auto !important;
  top: auto !important;
  display: block !important;
  width: 100% !important;
  background: #fff !important;        /* KEIN grüner Verlauf mehr */
  padding: 10px 24px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  text-align: right !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--brand-700, #16a34a) !important;
  line-height: 1.2 !important;
}
@media (max-width: 540px) {
  #modal #booking-modal-price {
    padding: 10px 16px !important;
    font-size: 14px !important;
    text-align: right !important;
  }
}

/* Modal-Header: konstantes Layout - Title links, Close-X rechts. */
#modal .modal__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  padding: 16px 24px !important;
  min-height: 56px !important;
  position: relative !important;
}
#modal #modal-title {
  flex: 1 1 auto !important;
  margin: 0 24px 0 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  position: static !important;
  color: var(--text, #111827) !important;
  line-height: 1.3 !important;
}
#modal .modal__close {
  position: static !important;
  flex: 0 0 auto !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 20px !important;
}
@media (max-width: 540px) {
  #modal .modal__header {
    padding: 12px 16px !important;
    min-height: 48px !important;
  }
  #modal #modal-title {
    font-size: 16px !important;
    margin-right: 12px !important;
  }
}

/* (2) SMARTPHONE HOCHFORMAT TOPBAR aufräumen.
   Die Action-Buttons (z.B. "+ Buchung") werden auf Icon-only reduziert,
   die Pill ist kleiner, und wir gewinnen Platz. */
@media (max-width: 540px) {
  .topbar {
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px !important;
    gap: 8px !important;
    min-height: auto !important;
  }
  .topbar__title,
  #page-title {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
  .topbar__subtitle,
  #page-subtitle {
    font-size: 12px !important;
    color: var(--text-3, #6b7280) !important;
  }
  /* Action-Buttons rechts: kleiner */
  .topbar__right .btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    height: 34px !important;
  }
  /* Avatar/Userpill kleiner */
  .dashboard-user-pill {
    max-width: 40px !important;
    padding: 4px !important;
  }
  .dashboard-user-pill__meta,
  .dashboard-user-pill__name {
    display: none !important;
  }
  /* Calendar-Toolbar: kompakter (Heute, Filter etc.) */
  .calendar-toolbar {
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  .calendar-toolbar .btn,
  .calendar-toolbar select {
    padding: 5px 10px !important;
    font-size: 12px !important;
    height: 32px !important;
  }
  .calendar-view-toggle__btn {
    padding: 5px 12px !important;
    font-size: 12px !important;
  }
}

/* v1.3.44: v1.3.37 130/100/140px Doppel-Class-Block entfernt */

/* ============================================================================
   v1.3.38 — Booking-Modal Body wieder sichtbar + Single-Cal RESET + Größe
============================================================================ */

/* (1) MODAL BODY MUSS PLATZ BEKOMMEN
   Wenn Modal-Panel auf 100dvh-8px gesetzt ist (Mobile Vollbild),
   braucht der Body flex:1 damit er die übrig gebliebene Höhe bekommt.
   Sonst kollabiert er auf 0 (wenn der Inhalt mehr als die Höhe braucht
   und kein Wachstum erlaubt ist). */
#modal .modal__panel {
  display: flex !important;
  flex-direction: column !important;
}
#modal .modal__panel > .modal__body,
#modal .modal__panel #modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
#modal .modal__panel > .modal__header,
#modal .modal__panel > #booking-modal-price {
  flex: 0 0 auto !important;
}


/* ============================================================================
   v1.3.44 — KALENDER EINZELANSICHT: SAUBERER, FINALER BLOCK
   ============================================================================
   Konsolidierung aller vorherigen Single-Cal Versuche (v1.3.33–v1.3.42).
   Ältere konkurrierende Regeln in v1.2.47, v1.2.49, v1.2.50, v1.3.34, v1.3.36
   wurden im selben Commit entfernt/neutralisiert.

   Architektur:
   - Container `.cal-single-months` ist GRID (statt Flex-Scroll wie v1.2.25):
     1 Spalte auf Mobile, 2 Spalten nebeneinander auf Desktop.
   - Monatskarte füllt die Spalte komplett.
   - Innen-Grid 7×N mit auto-Rows (keine festen Pixel-Höhen).
   - Zellen: aspect-ratio 1/1 → Höhe = Breite, immer.
   - align-self: start auf Zellen, damit Track-Stretch nicht aspect-ratio
     übersteuert.
   - Inhalte mit gestaffelter Schrift je nach Bildschirmbreite, damit auch
     in 48–60 px Zellen Datum/Preis/Gastname lesbar bleiben.

   Fallback: calendar.js setzt nach jedem Render und bei Resize zusätzlich
   inline `style.height` auf die aktuelle Spaltenbreite. Damit funktioniert
   das Quadrat selbst dann, wenn ein neuer Browser aspect-ratio anders
   interpretiert.
============================================================================ */

/* (A) Container: Grid-Layout, kein horizontaler Scroll */
.calendar-new--single {
  overflow-x: hidden !important;
  background: transparent !important;
}

.calendar-new--single .cal-single-months,
.calendar-new--single .cal-single-months--scroll {
  display: grid !important;
  grid-template-columns: 1fr !important;
  flex-wrap: unset !important;
  flex-direction: unset !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (min-width: 821px) {
  .calendar-new--single .cal-single-months,
  .calendar-new--single .cal-single-months--scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* (B) Monatskarte: volle Spaltenbreite, kein Flex-Basis-Rest */
.calendar-new--single .cal-month-card {
  flex: unset !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}

/* (C) Innen-Grid: 7 gleiche Spalten, Auto-Rows */
.calendar-new--single .cal-grid--single-month {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto repeat(6, auto) !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  align-content: start !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

/* (D) Zellen: QUADRATISCH via aspect-ratio (CSS-Weg).
   Belt-and-suspenders: JS setzt zusätzlich inline style.height (siehe
   calendar.js → enforceSquareCells), das übersteuert auch dann, wenn
   eine Browser-Quirk aspect-ratio in Grid nicht ehrt. */
.calendar-new--single .cal-grid--single-month > .cal-cell,
.calendar-new--single .cal-grid--single-month > .cal-cell--blank {
  aspect-ratio: 1 / 1 !important;
  align-self: start !important;
  justify-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 2px 3px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
}

/* (E) Inhalte — Smartphone Portrait (Standard ≤539 px) */
.calendar-new--single .cal-cell__top {
  min-height: 0 !important;
  padding: 2px 3px 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
.calendar-new--single .cal-cell__price {
  font-size: 9px !important;
  padding: 0 3px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.calendar-new--single .cal-cell__price small { font-size: 7px !important; }
.calendar-new--single .cal-cell__guest {
  font-size: 9px !important;
  line-height: 1.05 !important;
  padding: 1px 3px 0 !important;
  -webkit-line-clamp: 2 !important;
}
.calendar-new--single .cal-cell__guest-meta {
  font-size: 8px !important;
  padding: 0 3px !important;
}

/* (F) Inhalte — Tablet/Landscape (≥540 px) */
@media (min-width: 540px) {
  .calendar-new--single .cal-cell__top { font-size: 11px !important; }
  .calendar-new--single .cal-cell__price { font-size: 10px !important; padding: 0 4px !important; }
  .calendar-new--single .cal-cell__guest { font-size: 10px !important; padding: 1px 4px 0 !important; }
  .calendar-new--single .cal-cell__guest-meta { font-size: 9px !important; padding: 0 4px !important; }
}

/* (G) Inhalte — Desktop (≥821 px) */
@media (min-width: 821px) {
  .calendar-new--single .cal-cell__top { font-size: 12px !important; }
  .calendar-new--single .cal-cell__price { font-size: 11px !important; padding: 0 5px !important; }
  .calendar-new--single .cal-cell__guest { font-size: 11px !important; padding: 2px 5px 0 !important; }
  .calendar-new--single .cal-cell__guest-meta { font-size: 9px !important; padding: 0 5px !important; }
}

/* (H) #cal-scroll: kein horizontaler Scroll mehr (Grid statt Flex-Scroll) */
.calendar-new--single #cal-scroll,
.calendar-new--single .cal-scroll {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* (I) SVG cell-shape: absolut, damit es nicht die Zellgröße bestimmt */
.calendar-new--single .cal-grid--single-month .cell-shape {
  position: absolute !important;
  inset: 0 !important;
}


/* ============================================================================
   v1.3.45 — Hilfe-Button fest oben rechts in der Ecke
   ============================================================================
   Vorher: Hilfe wurde von setTopbarActions() in #topbar-actions angehängt
   und ist auf Mobile mit den anderen Aktionen unter den Titel gewandert.
   Jetzt: eigenes festes Element .topbar__help in der Topbar, immer oben
   rechts. Auf Mobile als kompakter runder Icon-Button.
============================================================================ */

/* Topbar muss relativ positioniert sein, damit der Help-Button sich an die
   Ecke ankern kann */
.topbar {
  position: relative;
}

/* Desktop / Tablet: Hilfe als normaler Pill-Button rechts neben den Aktionen */
.topbar__help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text, #111827);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .15s, border-color .15s, transform .1s;
  font-family: inherit;
}
.topbar__help:hover {
  background: var(--surface-2, #f9fafb);
  border-color: var(--brand-700, #15803d);
}
.topbar__help:active {
  transform: translateY(1px);
}
.topbar__help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-700, #15803d);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* Mobile/Tablet: Hilfe-Button absolut in die obere rechte Ecke pinnen,
   damit er nie unter den Titel wandert. Topbar wraps bei Bedarf. */
@media (max-width: 1100px) {
  .topbar__help {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 5;
    padding: 7px 12px;
    font-size: 13px;
  }
}

/* Smartphone Portrait: nur das "?" Icon, Label ausblenden, runder Button */
@media (max-width: 539px) {
  .topbar__help {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  .topbar__help-label {
    display: none;
  }
  .topbar__help-icon {
    width: 22px;
    height: 22px;
    font-size: 14px;
    background: transparent;
    color: var(--brand-700, #15803d);
    border: 1.5px solid var(--brand-700, #15803d);
  }
}

/* v1.3.89: Topbar-padding-Mobile-Regeln werden weiter unten neu definiert
   (Account-Block ist jetzt absolut rechts oben, braucht mehr Platz). */


/* ============================================================================
   v1.3.46 — Sofortzahlungs-Hinweis bei kurzfristigen Buchungen
============================================================================ */

.shortnotice-banner {
  background: #fff7ed;
  border: 1px solid #fb923c;
  color: #9a3412;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 12px 0;
  font-size: 13px;
  line-height: 1.4;
}
.shortnotice-banner strong {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 14px;
}
.shortnotice-banner div {
  color: #9a3412;
}


/* ============================================================================
   v1.3.47 — Fehler-Banner im Modal + Toast-z-index überall sichtbar
   ============================================================================
   Bei Validierungsfehlern (z. B. Mindestaufenthalt unterschritten) konnte
   der Toast hinter dem Modal verschwinden. Lösung: Banner direkt im Modal-
   Body ganz oben + Toast-z-index erhöhen.
============================================================================ */

/* Toast über jedem Modal */
.toast {
  z-index: 1000 !important;
}

/* Fehler-Banner im Modal */
.modal-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fef2f2;
  border: 1.5px solid #dc2626;
  color: #991b1b;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(220, 38, 38, .15);
}
.modal-error-banner__icon {
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
  color: #dc2626;
}
.modal-error-banner__text {
  flex: 1 1 auto;
  font-weight: 500;
}
.modal-error-banner__close {
  background: transparent;
  border: 0;
  color: #991b1b;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  flex: 0 0 auto;
  font-family: inherit;
}
.modal-error-banner__close:hover {
  color: #7f1d1d;
}

/* Subtile Aufmerksamkeit-Pulsation, wenn Banner neu erscheint */
.modal-error-banner.is-pulsing {
  animation: errorBannerPulse .5s ease-out 2;
}
@keyframes errorBannerPulse {
  0%   { box-shadow: 0 2px 8px rgba(220, 38, 38, .15); }
  50%  { box-shadow: 0 4px 18px rgba(220, 38, 38, .50); }
  100% { box-shadow: 0 2px 8px rgba(220, 38, 38, .15); }
}


/* ============================================================================
   v1.3.48 — Buchungs-Modal: Nummerierte Step-Karten
   ============================================================================
   Das Buchungs-Formular ist jetzt in 7 nummerierte Schritte gegliedert.
   Jeder Schritt ist eine eigene Karte mit Nummer + Titel + Beschreibung.
============================================================================ */

.booking-form-v2 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.booking-step {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 16px 18px 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  transition: box-shadow .15s, border-color .15s;
}
.booking-step:hover,
.booking-step:focus-within {
  border-color: var(--brand-700, #15803d);
  box-shadow: 0 4px 14px rgba(21, 128, 61, .08);
}

.booking-step__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.booking-step__num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-700, #15803d);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  font-family: inherit;
}
.booking-step__num--alert {
  background: #dc2626;
}
.booking-step__num--info {
  background: #6b7280;
  font-size: 16px;
}

.booking-step__header > div {
  flex: 1 1 auto;
  min-width: 0;
}

.booking-step__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--text, #111827);
  line-height: 1.3;
}

.booking-step__hint {
  font-size: 12.5px;
  color: var(--text-3, #6b7280);
  margin-top: 2px;
  line-height: 1.35;
}

.booking-step__subhead {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3, #6b7280);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 6px 0 8px;
}
.booking-step__subhead:not(:first-of-type) {
  margin-top: 18px;
}

/* Spezielle Akzentfarben je Block */
.booking-step--price {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}
.booking-step--payment {
  background: linear-gradient(180deg, #ffffff 0%, #fefce8 100%);
}
.booking-step--cancelled {
  background: #fef2f2;
  border-color: #fecaca;
}
.booking-step--cancelled .booking-step__title {
  color: #991b1b;
}
.booking-step--checkin,
.booking-step--messages {
  background: #f9fafb;
}

/* Notizen kleiner / kompakter */
.booking-step--notes {
  padding-bottom: 14px;
}
.booking-step--notes .textarea {
  min-height: 64px;
}

/* Inline Extra-Services im Optionen-Schritt */
.booking-extras-inline {
  margin-top: 8px;
}

/* Mobile: weniger Padding, kompakter */
@media (max-width: 539px) {
  .booking-step {
    padding: 12px 14px 14px;
    border-radius: 10px;
  }
  .booking-step__header {
    margin-bottom: 12px;
    padding-bottom: 10px;
    gap: 10px;
  }
  .booking-step__num {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
  .booking-step__title {
    font-size: 15px;
  }
  .booking-step__hint {
    font-size: 12px;
  }
  .booking-form-v2 {
    gap: 10px;
  }
}


/* ============================================================================
   v1.3.50 — E-Rechnung / ZUGFeRD Block im Rechnungs-Modal
============================================================================ */

.einvoice-block {
  margin: 16px 0;
}

.einvoice-block .settings-check-card {
  border: 2px solid var(--border, #e5e7eb);
  background: linear-gradient(180deg, #ffffff 0%, #fef3c7 100%);
}
.einvoice-block .settings-check-card:has(input:checked) {
  border-color: #f59e0b;
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
}

.einvoice-fields {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 10px;
}

.einvoice-fields__title {
  font-size: 13px;
  font-weight: 700;
  color: #92400e;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* ============================================================================
   v1.3.51 — E-Rechnungs-Button visuell akzentuieren
============================================================================ */

.einvoice-btn {
  border-color: #f59e0b !important;
  color: #92400e !important;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%) !important;
  font-weight: 600 !important;
}
.einvoice-btn:hover {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%) !important;
  border-color: #d97706 !important;
  color: #78350f !important;
}


/* ============================================================================
   v1.3.52 — E-Rechnung erst nach Abschluss verfügbar
============================================================================ */

.einvoice-disabled-hint {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px dashed #d1d5db;
  background: #f9fafb;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 500;
  cursor: not-allowed;
  user-select: none;
}


/* ============================================================================
   v1.3.53 — E-Rechnung: Achtung-Symbol via CSS (kein Emoji)
============================================================================ */

/* "⚠" Symbol als CSS-Pseudoelement vor dem Titel der Checkbox-Karte,
   wenn sie zum E-Rechnungs-Block gehört. */
.einvoice-block .settings-check-card span > strong::before {
  content: "⚠";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  vertical-align: -3px;
}

/* Der "(nach Abschluss)"-Hinweis bekommt auch ein dezentes ⓘ als Pseudo */
.einvoice-disabled-hint::before {
  content: "ⓘ";
  margin-right: 6px;
  font-size: 14px;
  color: #6b7280;
}

/* ============================================================================
   v1.3.84 — Avatar-Pill global oben rechts, ueber Hilfe-Button
============================================================================ */

/* Container fuer beide Pills (Avatar + Hilfe), oben rechts in der Topbar */
.topbar__account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
  align-self: flex-start;     /* Oben buendig statt mittig */
}

/* Pill etwas kompakter, damit beide Buttons gut nebeneinander passen */
.topbar .dashboard-user-pill {
  position: relative;
  padding: 6px 10px;
  gap: 8px;
  border-radius: 14px;
  box-shadow: none;             /* Hilfe-Button hat auch keinen Schatten */
}
.topbar .dashboard-user-pill__avatar {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 12px;
}
.topbar .dashboard-user-pill__text strong {
  font-size: 12px;
}
.topbar .dashboard-user-pill__text span {
  font-size: 10.5px;
}

/* Mobile (<= 1100px): Hilfe-Button nicht mehr absolut positionieren —
   stattdessen normal im Flow neben dem Avatar. Topbar-Right-Padding-Hack
   weg, weil wir Platz brauchen. */
@media (max-width: 1100px) {
  .topbar {
    padding-right: 16px !important;
  }
  .topbar__help {
    position: static !important;
    top: auto !important;
    right: auto !important;
  }
  .topbar__account {
    flex-wrap: nowrap;
  }
}

/* Smartphone Portrait: Account-Pill nur als runder Avatar-Kreis (Initialen),
   Name + E-Mail werden ausgeblendet. Hilfe-Button bleibt rund (ist schon so). */
@media (max-width: 539px) {
  .topbar {
    padding-right: 14px !important;
  }
  .topbar .dashboard-user-pill {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 50%;
  }
  .topbar .dashboard-user-pill__text,
  .topbar .account-toggle__chevron {
    display: none !important;
  }
  .topbar .dashboard-user-pill__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 13px;
  }
  .topbar .account-toggle {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  /* Account-Menue-Dropdown muss rechts statt links ausgerichtet sein,
     damit es nicht aus dem Bildschirm raussteht. */
  .topbar .account-menu {
    right: 0 !important;
    left: auto !important;
  }
}

/* Topbar selbst: Hilfe + Account-Block rutschen jetzt etwas hoeher,
   weniger top-padding damit die Topbar kompakter wirkt. */
.topbar {
  padding-top: 18px;
}


/* ============================================================================
   v1.3.86 — Preisvorschau im Buchungs-Modal: Liste + Detail-Akkordeon
   Loest die "Datum:"-Pseudo-Label-Probleme der alten Mobile-Tabellen ab.
============================================================================ */

.pricing-preview {
  display: block;
  font-size: 13.5px;
}

/* ---- Zusammenfassung (immer sichtbar) ---- */
.pricing-summary {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 8px 12px;
  background: var(--surface-2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
}

.pricing-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed transparent;
}

.pricing-summary__row + .pricing-summary__row {
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.pricing-summary__row--total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1.5px solid rgba(0, 0, 0, 0.18) !important;
  font-size: 15px;
}

.pricing-summary__label {
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}

.pricing-summary__value {
  text-align: right;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---- Akkordeon: Detail-Aufschluesselung pro Nacht ---- */
.pricing-accordion {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.pricing-accordion__summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 13px;
  color: var(--text, #111827);
  user-select: none;
}

.pricing-accordion__summary::-webkit-details-marker {
  display: none;
}

.pricing-accordion__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-2, #f3f4f6);
  font-size: 14px;
  font-weight: 700;
  transition: transform .18s;
}

.pricing-accordion[open] .pricing-accordion__chev {
  transform: rotate(90deg);
}

.pricing-accordion__summary:hover {
  background: var(--surface-2, #f9fafb);
}

.pricing-detail {
  list-style: none;
  margin: 0;
  padding: 0 14px 12px;
  border-top: 1px solid var(--border, #e5e7eb);
}

.pricing-detail__night {
  padding: 8px 0;
}

.pricing-detail__night + .pricing-detail__night {
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.pricing-detail__night-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.pricing-detail__date {
  font-weight: 600;
}

.pricing-detail__night-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--text-3, #6b7280);
  margin-top: 2px;
}

/* ============================================================================
   v1.3.86 — Smartphone Topbar: Toggle links, Avatar+Hilfe rechts auf einer Linie
============================================================================ */

@media (max-width: 539px) {
  .topbar {
    flex-wrap: wrap;
    gap: 8px !important;
    padding: 14px 14px 10px !important;
    align-items: flex-start !important;
  }
  /* v1.3.87: Titel-Block auf Mobile NICHT mehr volle Zeile — sonst rutscht
     Avatar+Hilfe darunter. Stattdessen: Titel links wachsend, Avatar+Hilfe
     rechts in derselben Zeile. */
  .topbar__left {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
  }
  .topbar__title { font-size: 18px !important; margin-bottom: 0 !important; }
  .topbar__subtitle { font-size: 12px !important; }

  /* topbar-actions ist auf der Kalender-Seite jetzt leer — wir lassen ihm
     also keine Spalte (sonst wuerde er die Linie aufbrechen). Falls er
     gefuellt ist, wandert er auf eine eigene Zeile (full width). */
  #topbar-actions:empty {
    display: none !important;
  }
  #topbar-actions:not(:empty) {
    flex: 1 1 100% !important;
    order: 99;
    min-width: 0;
    justify-content: flex-start;
  }
  .topbar__account {
    flex: 0 0 auto;
    align-self: flex-start !important;
    margin-left: 8px !important;
  }
}

/* ============================================================================
   v1.3.86 — Smartphone Kalender-Toolbar: Zurueck/Monat/Weiter in einer Zeile,
   Heute + Zoom in der zweiten Zeile. Channel-Legende und sonstiger Krimskrams
   in eine eigene Reihe oder ueber wrap.
============================================================================ */

@media (max-width: 539px) {
  .calendar-toolbar__nav {
    /* Eigenes Grid-Layout fuer Mobile, sodass spezifische Elemente in
       die richtige Zeile/Spalte rutschen. */
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "prev month next"
      "today today today"
      "legend legend legend";
    gap: 6px 8px !important;
    width: 100%;
  }

  #prev-month  { grid-area: prev; }
  #calendar-month-select { grid-area: month; min-width: 0 !important; width: 100% !important; }
  #next-month  { grid-area: next; }
  #nav-today-cal { grid-area: today; justify-self: stretch; }

  .calendar-toolbar__nav .calendar-channel-legend {
    grid-area: legend;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 12px;
    font-size: 11px;
  }

  /* Schmaler / mobiler Lay-out: Legende und Tipps koennen schrumpfen */
  .calendar-toolbar__legend {
    font-size: 11px;
  }
}

/* ============================================================================
   v1.3.87 — Multi/Einzel-Toggle ueber der Channel-Legende, mit
   responsivem Property-Select daneben. Plus: Mobile-kurze Beschriftung.
============================================================================ */

.calendar-view-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.calendar-view-bar .calendar-view-toggle {
  flex: 0 0 auto;
}

.calendar-view-bar .calendar-toolbar__select--property {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 380px;
}

.calendar-view-bar .calendar-toolbar__select--property.is-hidden-prop-select {
  display: none !important;
}

/* Lange/kurze Toggle-Beschriftung — Default zeigt long, mobile zeigt short. */
.calendar-view-toggle__short { display: none; }
.calendar-view-toggle__long  { display: inline; }

@media (max-width: 539px) {
  .calendar-view-toggle__short { display: inline; }
  .calendar-view-toggle__long  { display: none; }

  /* Toggle und Property-Select auf einer Zeile, Toggle links, Select fuellt Rest */
  .calendar-view-bar {
    gap: 8px;
    margin-top: 4px;
  }
  .calendar-view-bar .calendar-toolbar__select--property {
    flex: 1 1 0;
    min-width: 100px;
  }
  /* Toggle etwas kompakter */
  .calendar-view-toggle__btn {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* ============================================================================
   v1.3.89 — Topbar-Layout: Avatar+Hilfe IMMER ganz oben rechts.
   Subtitle wird mit Ellipsis gekuerzt wenn der Platz nicht reicht.
   #topbar-actions (Buttons wie "+ Rechnung erstellen") wandert bei Bedarf
   auf eine eigene Zeile darunter — nimmt aber NIE den Account-Block.
============================================================================ */

.topbar {
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  /* Rechts Platz fuer den absolut positionierten Account-Block reservieren */
  padding-right: 220px;       /* Desktop: Platz fuer Pill mit Name+Mail */
}

/* Account-Block immer absolut oben rechts — verlaesst den Flow,
   ist also nie von topbar-actions oder topbar__left verdraengbar. */
.topbar .topbar__account {
  position: absolute;
  top: 14px;
  right: 18px;
  margin: 0 !important;
  z-index: 5;
}

/* Titel-Block soll den Platz davor nehmen und Subtitle abschneiden */
.topbar__left {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.topbar__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* topbar-actions: wenn er Buttons enthaelt, geht er auf eine eigene
   Zeile unter dem Titel — nicht mehr neben den Account-Block. */
#topbar-actions:not(:empty) {
  flex: 1 1 100% !important;
  width: 100% !important;
  margin-top: 8px;
  order: 2;
  justify-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#topbar-actions:empty {
  display: none !important;
}

/* Tablet: weniger Padding rechts da Hilfe-Label evtl. weg, aber Pill noch da */
@media (max-width: 1100px) {
  .topbar {
    padding-right: 180px;
  }
  .topbar .topbar__account {
    top: 12px;
    right: 14px;
  }
}

/* Smartphone: Account-Block wird zu kompakten Kreisen — weniger Platz noetig */
@media (max-width: 539px) {
  .topbar {
    padding-right: 96px !important;        /* Avatar-Kreis 36 + Gap + Hilfe-Kreis 36 + Padding */
    padding-top: 14px !important;
    padding-bottom: 10px !important;
    padding-left: 14px !important;
  }
  .topbar .topbar__account {
    top: 12px !important;
    right: 12px !important;
    gap: 8px;
  }
  /* Vorherige Mobile-Regeln aus v1.3.86/v1.3.87 ueberschreiben — Account
     soll nicht mehr im Flex-Flow sein. */
  .topbar__left {
    flex: 1 1 0 !important;
    width: auto !important;
    margin-bottom: 0 !important;
  }
  .topbar__title { font-size: 18px !important; margin-bottom: 0 !important; }
  .topbar__subtitle { font-size: 12px !important; }
}

/* ============================================================================
   v1.3.90 — BookingPilot Branding-Refresh
   • Slogan: "Das Buchungscockpit für Ferienvermieter"
   • Schriftart: Poppins (Google Fonts) für Brand/Hero
   • Login-Hero subtitle in zweizeiliger Tagline-Optik
============================================================================ */

/* Brand-Schrift fuer Logo, Login-Hero, Headlines im Login.
   Body bleibt bei System-Sans (gut lesbar in Tabellen, Formularen). */
:root {
  --bp-brand-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Login-Hero Markenbereich: Poppins fuer Pilot-Look */
.login-hero,
.login-hero__title,
.login-hero__subtitle {
  font-family: var(--bp-brand-font);
}

/* Subtitle: zwei Varianten — Hauptzeile (gross) + zweite Zeile (kleiner, dezent) */
.login-hero__subtitle--main {
  margin-top: 28px;
  font-weight: 600;
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: .46em;
}
.login-hero__subtitle--secondary {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 24px;
  color: #4a6b62;
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 22px);
  letter-spacing: .42em;
  font-family: var(--bp-brand-font);
}

/* Login-Card oben links: Logo verwendet weiterhin logo.png — der Slogan
   ist jetzt im Bild eingebrannt, also keine Aenderung noetig. */

/* Optional: H1 und H2 im Login-Bereich auf Poppins */
.login-copy h1 {
  font-family: var(--bp-brand-font);
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* v1.3.90: Hero Title in Poppins, klare Volltonfarbe statt Verlaufs-Effekt */
body.is-login .login-hero__title {
  font-family: var(--bp-brand-font) !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #0c5949 !important;
  text-shadow: 0 4px 12px rgba(7, 63, 53, 0.10);
}
body.is-login .login-hero__subtitle--main {
  font-family: var(--bp-brand-font) !important;
}
body.is-login .login-hero__subtitle--secondary {
  font-family: var(--bp-brand-font) !important;
}

/* ============================================================================
   v1.3.93 — Bewertungs-System
============================================================================ */

/* ---- Stats-Kacheln oben in der Bewertungs-Liste ---- */
.reviews-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.reviews-stat {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
}
.reviews-stat__big {
  font-size: 28px;
  font-weight: 700;
  color: var(--text, #1f2937);
  line-height: 1;
}
.reviews-stat__label {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-3, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.reviews-stat__stars {
  margin-top: 6px;
  color: #f5b70a;
  letter-spacing: 1px;
}

.reviews-hint {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-2, #374151);
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.reviews-hint a {
  color: #0c5949;
  font-weight: 600;
}

/* ---- Karten in der Liste ---- */
.reviews-list {
  display: grid;
  gap: 12px;
}
.review-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 16px 18px;
}
.review-card--unpublished {
  opacity: 0.7;
  background: #f9fafb;
}
.review-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.review-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.review-card__stars {
  color: #f5b70a;
  font-size: 18px;
  letter-spacing: 1px;
}
.review-card__rating-num {
  font-size: 13px;
  color: var(--text-3, #6b7280);
  font-weight: 600;
}
.review-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-3, #6b7280);
  flex-wrap: wrap;
}
.review-card__source {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3px;
}
.review-card__source--google { background: #e0ecff; color: #1a56db; }
.review-card__source--holidaycheck { background: #fff7d6; color: #976300; }
.review-card__source--booking { background: #dceaff; color: #003b95; }
.review-card__source--airbnb { background: #ffe4ec; color: #c1185b; }
.review-card__source--own { background: #d1fae5; color: #065f46; }
.review-card__title {
  margin: 4px 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1f2937);
}
.review-card__text {
  margin: 6px 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2, #374151);
}
.review-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  padding-top: 10px;
  margin-top: 8px;
}
.review-card__guest {
  font-size: 13px;
  color: var(--text-2, #374151);
}
.review-card__actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ---- Sterne-Picker im Bewertungs-Formular ---- */
.rating-input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rating-input__star {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  color: #d1d5db;
  cursor: pointer;
  padding: 4px 6px;
  transition: color .15s, transform .1s;
  font-family: inherit;
}
.rating-input__star.is-active {
  color: #f5b70a;
}
.rating-input__star:hover {
  transform: scale(1.1);
}
.rating-input__num {
  margin-left: 12px;
  font-size: 14px;
  color: var(--text-3, #6b7280);
  font-weight: 600;
}

@media (max-width: 539px) {
  .review-card__foot {
    flex-direction: column;
    align-items: flex-start;
  }
  .review-card__actions {
    width: 100%;
  }
}

/* v1.3.94: Reviews Filter-Toolbar (Tabs + Property-Filter) */
.reviews-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.reviews-tabs {
  display: inline-flex;
  gap: 4px;
}
.reviews-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-3, #6b7280);
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.reviews-tab:hover { color: var(--text-2, #374151); }
.reviews-tab.is-active {
  color: #0c5949;
  border-bottom-color: #0c5949;
  font-weight: 600;
}
.reviews-tab__count {
  display: inline-block;
  min-width: 22px;
  padding: 1px 7px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.reviews-tab__count--alert {
  background: #fee2e2;
  color: #991b1b;
}
.reviews-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.select--sm {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;
  font-family: inherit;
}
@media (max-width: 600px) {
  .reviews-toolbar { flex-direction: column; align-items: stretch; }
  .reviews-tabs { overflow-x: auto; padding-bottom: 4px; }
  .reviews-filter { justify-content: flex-end; }
}

/* v1.3.102: Reviews — Pending-Status, Stat-Alert */
.badge--alert {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.review-card--pending {
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
}
.reviews-stat--alert .reviews-stat__big {
  color: #d97706;
}
.reviews-stat--alert {
  background: #fffbeb;
  border-color: #fde68a;
}

/* v1.3.104: Push-Settings Styles */
.alert {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid;
  font-size: 14px;
  line-height: 1.5;
}
.alert--warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.alert--info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
.alert--error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.txt-success { color: #15803d; }
.txt-error   { color: #b91c1c; }

.push-status__row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 14px;
}
.push-status__label {
  color: var(--text-3, #6b7280);
}


/* ============================================================================
   v1.3.108 — Dashboard Premium-Layout
   - 4 Kacheln pro Reihe (ausgewogen)
   - Top-KPIs prominent, dann Details
   - Parallax-Effekte: 3D-Tilt beim Hover + Scroll-Schweben
   - Großzügige Abstände, klare Hierarchie
============================================================================ */

:root {
  --bp-cream-bg:    #f5f0e8;
  --bp-cream-card:  #faf6ef;
  --bp-dark-1:      #0f3d2e;
  --bp-dark-2:      #14483a;
  --bp-dark-3:      #1a5546;
  --bp-cream-text:  #ede4d3;
  --bp-cream-mute:  rgba(237, 228, 211, 0.6);
  --bp-cream-soft:  rgba(237, 228, 211, 0.75);
  --bp-gold:        #c9a961;
  --bp-gold-light:  #e6c97a;
  --bp-gold-soft:   rgba(201, 169, 97, 0.4);
}

/* === Outer Wrap: cremig-beiger Hintergrund === */
.app-shell, body, .main-content {
  background: var(--bp-cream-bg, #f5f0e8) !important;
}

/* === Push-Benachrichtigungs-Karte (oben, dezent) === */
.dash-push-notif {
  background: #fff;
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow: 0 6px 20px rgba(15, 61, 46, 0.06);
  margin: 0 0 28px;
  position: relative;
  overflow: hidden;
  /* Parallax: schwebt langsam beim Scrollen */
  transform: translateZ(0);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dash-push-notif__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.dash-push-notif__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bp-brand-font, 'Poppins', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--bp-dark-2);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.dash-push-notif__brand-pin {
  width: 14px; height: 16px;
  color: var(--bp-dark-2);
}
.dash-push-notif__time {
  font-size: 12px;
  color: var(--text-3, #6b7168);
}
.dash-push-notif__title {
  font-family: var(--bp-brand-font);
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 6px 0 4px;
}
.dash-push-notif__body {
  font-size: 14px;
  color: var(--text-2, #3f4b44);
  line-height: 1.45;
}

/* === HERO-SEKTION === */
.dash-hero {
  margin: 0 0 32px;
  padding: 36px 36px 32px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--bp-dark-1) 0%, var(--bp-dark-2) 100%);
  box-shadow:
    0 12px 32px rgba(15, 61, 46, 0.18),
    0 2px 6px rgba(15, 61, 46, 0.08);
  position: relative;
  overflow: hidden;
  color: var(--bp-cream-text);
  /* Parallax */
  transform: translateZ(0);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dash-hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(230, 201, 122, 0.14) 0%, transparent 65%);
  pointer-events: none;
}
.dash-hero::after {
  content: '';
  position: absolute;
  left: 36px; right: 36px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bp-gold) 30%, var(--bp-gold-light) 50%, var(--bp-gold) 70%, transparent);
  opacity: 0.55;
}
.dash-hero__greeting {
  font-family: var(--bp-brand-font);
  font-size: clamp(28px, 3.6vw, 36px);
  font-weight: 600;
  color: var(--bp-cream-text);
  letter-spacing: -0.5px;
  position: relative;
  z-index: 1;
}
.dash-hero__name {
  background: linear-gradient(135deg, var(--bp-gold-light) 0%, var(--bp-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.dash-hero__subtitle {
  font-size: 14px;
  color: var(--bp-cream-mute);
  margin-top: 8px;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 1;
}

/* === SECTION-Überschriften (klare Hierarchie) === */
.dash-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 32px 0 16px;
  padding-bottom: 0;
}
.dash-section-head__title {
  font-family: var(--bp-brand-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--bp-dark-2);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  position: relative;
  padding-left: 12px;
}
/* Goldener Akzentstrich vor jeder Überschrift */
.dash-section-head__title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 14px;
  background: linear-gradient(180deg, var(--bp-gold), var(--bp-gold-light));
  border-radius: 2px;
}
.dash-section-head__sub {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.2px;
}

/* ============================================================================
   PARALLAX TILE: 3D-Tilt + Scroll-Schweben
   ============================================================================ */
.parallax-tile {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
  will-change: transform;
}
/* Kachel schwebt subtil nach oben/unten beim Scrollen */
.parallax-tile[data-parallax-speed="slow"] {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}
.parallax-tile[data-parallax-speed="fast"] {
  transform: translate3d(0, calc(var(--parallax-y, 0px) * 1.4), 0);
}
/* Hover-Tilt — die Kachel kippt leicht in Richtung Mauszeiger */
.parallax-tile:hover {
  transform: translate3d(0, calc(var(--parallax-y, 0px) - 4px), 0)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg))
             scale(1.02);
}

/* === HERO-KPIs (4 Kacheln, prominent) === */
.dash-hero-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 12px;
  perspective: 1200px;
}
.dash-hero-kpi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px 26px;
  border-radius: 18px;
  text-decoration: none;
  background: linear-gradient(160deg, var(--bp-dark-1) 0%, var(--bp-dark-2) 100%);
  color: var(--bp-cream-text);
  box-shadow:
    0 6px 20px rgba(15, 61, 46, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  cursor: pointer;
  min-height: 160px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201, 169, 97, 0);
}
.dash-hero-kpi:hover {
  border-color: rgba(201, 169, 97, 0.35);
  box-shadow:
    0 14px 32px rgba(15, 61, 46, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
/* Goldener Akzent-Punkt links oben */
.dash-hero-kpi::before {
  content: '';
  position: absolute;
  top: 22px; left: 22px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bp-gold);
  opacity: 0.8;
  box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.12);
  transition: box-shadow 0.3s, opacity 0.3s;
}
.dash-hero-kpi:hover::before {
  opacity: 1;
  box-shadow: 0 0 0 6px rgba(201, 169, 97, 0.2);
}
/* Subtile Lichtreflexion oben rechts (für 3D-Tilt-Effekt) */
.dash-hero-kpi::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(230, 201, 122, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.dash-hero-kpi__icon {
  align-self: flex-end;
  color: var(--bp-cream-mute);
  opacity: 0.55;
  transition: opacity 0.3s;
}
.dash-hero-kpi:hover .dash-hero-kpi__icon {
  opacity: 0.85;
  color: var(--bp-gold-light);
}
.dash-hero-kpi__big {
  font-family: var(--bp-brand-font);
  font-size: clamp(40px, 5vw, 52px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.6px;
  margin-top: auto;
  color: var(--bp-cream-text);
}
.dash-hero-kpi__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--bp-cream-mute);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* === STATS-KACHELN (kleinere zweite Reihe) === */
.dash-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 12px;
  perspective: 1200px;
}
.dash-stat {
  background: var(--bp-cream-card);
  border: 1px solid rgba(15, 61, 46, 0.08);
  border-radius: 16px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  cursor: default;
  box-shadow: 0 2px 8px rgba(15, 61, 46, 0.04);
}
.dash-stat:hover {
  border-color: var(--bp-gold-soft);
  box-shadow: 0 8px 20px rgba(15, 61, 46, 0.08);
}
.dash-stat__value {
  font-family: var(--bp-brand-font);
  font-size: 30px;
  font-weight: 600;
  color: var(--bp-dark-1);
  line-height: 1.05;
  letter-spacing: -0.6px;
}
.dash-stat__suffix {
  font-size: 16px;
  opacity: 0.6;
  margin-left: 2px;
  font-weight: 500;
  color: var(--bp-dark-2);
}
.dash-stat__label {
  font-size: 11px;
  color: var(--text-3, #6b7168);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}
/* Kleine Akzent-Linie unten */
.dash-stat::after {
  content: '';
  position: absolute;
  bottom: 0; left: 22px;
  width: 28px; height: 2px;
  background: linear-gradient(90deg, var(--bp-gold), transparent);
  opacity: 0.6;
}
.dash-stat--warn { background: linear-gradient(160deg, #fefdf7 0%, #fef3c7 100%); border-color: var(--bp-gold-soft); }
.dash-stat--warn .dash-stat__value { color: #92400e; }

/* === Buchungs-Übersicht (4 Kacheln, mittel) === */
.dash-bookings-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 12px;
  perspective: 1200px;
}
.dash-booking-tile {
  background: linear-gradient(160deg, var(--bp-dark-2) 0%, var(--bp-dark-3) 100%);
  border-radius: 16px;
  padding: 22px 24px;
  text-decoration: none;
  color: var(--bp-cream-text);
  display: block;
  border: 1px solid rgba(201, 169, 97, 0);
  box-shadow: 0 4px 14px rgba(15, 61, 46, 0.1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.dash-booking-tile:hover {
  border-color: var(--bp-gold-soft);
  box-shadow: 0 10px 24px rgba(15, 61, 46, 0.16);
}
.dash-booking-tile__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.dash-booking-tile__title {
  font-family: var(--bp-brand-font);
  font-size: 11px;
  font-weight: 500;
  color: var(--bp-cream-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dash-booking-tile__count {
  font-family: var(--bp-brand-font);
  font-size: 26px;
  font-weight: 600;
  color: var(--bp-cream-text);
  letter-spacing: -0.4px;
}
.dash-booking-tile__sub {
  font-size: 12px;
  color: var(--bp-cream-mute);
  margin-top: 4px;
}

/* === Filter-Karte === */
.dash-filters-card {
  background: var(--bp-cream-card);
  border: 1px solid rgba(15, 61, 46, 0.1);
  border-radius: 14px;
  margin: 0 0 12px;
  box-shadow: 0 2px 8px rgba(15, 61, 46, 0.03);
}
.dash-filters-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--bp-dark-2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-radius: 14px;
}
.dash-filters-card > summary::-webkit-details-marker { display: none; }
.dash-filters-card > summary::after {
  content: '⌄';
  font-size: 18px;
  margin-left: 12px;
  transition: transform 0.2s;
  color: var(--bp-gold);
}
.dash-filters-card[open] > summary::after { transform: rotate(180deg); }
.dash-filters-summary {
  font-weight: 400;
  color: var(--text-3);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.2px;
}
.dash-filters-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 22px 22px;
}

/* === Charts-Bereich === */
.dash-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-bottom: 12px;
}
/* v1.3.153: Untereinander-Anordnung für Anreisen/Abreisen */
.dash-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 12px;
}
.table--clickable tbody tr:hover {
  background: rgba(12, 90, 73, 0.05);
  transition: background 0.15s ease;
}

/* v1.3.153: Umsatz-Summenzeile unter dem Chart */
.revenue-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px 0 0;
  margin-top: 12px;
  border-top: 1px solid rgba(15, 61, 46, 0.08);
}
.revenue-summary__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
}
.revenue-summary__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3, #6b7168);
  font-weight: 500;
}
.revenue-summary__value {
  font-size: 17px;
  font-weight: 700;
  color: #0c5a49;
  font-family: 'JetBrains Mono', monospace;
}
.dash-card {
  background: var(--bp-cream-card);
  border: 1px solid rgba(15, 61, 46, 0.08);
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow: 0 2px 8px rgba(15, 61, 46, 0.03);
}
.dash-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15, 61, 46, 0.1);
  position: relative;
}
.dash-card__head::before {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 36px; height: 1px;
  background: linear-gradient(90deg, var(--bp-gold), var(--bp-gold-light));
}
.dash-card__head h2 {
  margin: 0;
  font-family: var(--bp-brand-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--bp-dark-2);
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.dash-card__more {
  font-size: 11px;
  color: var(--bp-gold);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.dash-card__more:hover { color: var(--bp-dark-2); }

/* === Beta/Schnellzugriff === */
.dash-beta-card {
  margin-top: 32px;
  background: var(--bp-cream-card);
  border: 1px solid rgba(15, 61, 46, 0.08);
  border-radius: 16px;
  padding: 22px 26px;
}
.dash-beta-card > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--bp-brand-font);
  font-weight: 600;
  font-size: 13px;
  color: var(--bp-dark-2);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 4px 0;
}
.dash-beta-card > summary::-webkit-details-marker { display: none; }
.dash-beta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.dash-beta-link {
  display: block;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(15, 61, 46, 0.1);
  border-radius: 12px;
  text-decoration: none;
  color: var(--bp-dark-2);
  font-weight: 500;
  font-size: 13px;
  text-align: center;
  transition: all 0.2s;
}
.dash-beta-link:hover {
  border-color: var(--bp-gold-soft);
  color: var(--bp-dark-1);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(15, 61, 46, 0.08);
}

/* === Sprach-Pill === */
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--bp-cream-bg);
  border: 1px solid rgba(15, 61, 46, 0.1);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--bp-dark-2);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ============================================================================
   MOBILE-OPTIMIERUNG (gleiche Optik, gestapelt)
============================================================================ */
@media (max-width: 1100px) {
  .dash-hero-kpis,
  .dash-stats-row,
  .dash-bookings-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .dash-hero {
    margin: 0 0 22px;
    padding: 26px 24px 22px;
    border-radius: 18px;
  }
  .dash-hero-kpis,
  .dash-stats-row,
  .dash-bookings-row { gap: 12px; }
  .dash-hero-kpi { padding: 22px 20px; min-height: 132px; }
  .dash-stat { padding: 18px 20px; }
  .dash-charts-grid { grid-template-columns: 1fr; gap: 14px; }
  .dash-filters-grid { grid-template-columns: 1fr; gap: 12px; }
  .dash-section-head { margin: 24px 0 12px; }
}

@media (max-width: 540px) {
  .dash-hero { padding: 22px 20px 20px; border-radius: 16px; }
  .dash-hero__greeting { font-size: 24px; }
  .dash-hero__subtitle { font-size: 12px; }

  .dash-hero-kpi {
    padding: 18px 18px;
    min-height: 116px;
    border-radius: 14px;
  }
  .dash-hero-kpi__big { font-size: 36px; }
  .dash-hero-kpi__label { font-size: 10px; }

  .dash-stat { padding: 16px 16px; border-radius: 14px; }
  .dash-stat__value { font-size: 24px; }

  .dash-booking-tile { padding: 18px 18px; border-radius: 14px; }
  .dash-booking-tile__count { font-size: 22px; }

  .dash-card { padding: 22px 22px; border-radius: 14px; }
  .dash-card__head h2 { font-size: 12px; }

  .dash-section-head { margin: 22px 0 10px; }
  .dash-section-head__title { font-size: 13px; }

  /* Auf Mobile Parallax-Hover deaktivieren (kein Mauszeiger) */
  .parallax-tile:hover {
    transform: translate3d(0, var(--parallax-y, 0px), 0);
  }
}

@media (max-width: 380px) {
  .dash-hero-kpis,
  .dash-stats-row,
  .dash-bookings-row { grid-template-columns: 1fr; }
}

/* === Reduzierte Bewegung für Accessibility === */
@media (prefers-reduced-motion: reduce) {
  .parallax-tile { transition: none; }
  .parallax-tile[data-parallax-speed] {
    transform: none;
  }
  .parallax-tile:hover {
    transform: scale(1.01);
  }
}

/* ============================================================================
   v1.3.112 — Mobile Layout-Fix (vorsichtig, scrollt wieder)
   Hinweis: Statt globale Selektoren mit !important überschreiben wir nur
   gezielt was nötig ist, und nichts was Scroll-Verhalten beeinflusst.
============================================================================ */

/* HTML/Body sauber, KEIN overscroll-behavior — das blockiert manchmal Scrollen */
html, body {
  background: var(--bp-cream-bg, #f5f0e8);
}

/* Status-Bar-Bereich oben cremig — pointer-events:none macht ihn touch-transparent */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--bp-cream-card, #faf6ef);
  z-index: 9999;
  pointer-events: none;
}

/* Mobile Topbar: nur padding-top mit safe-area, ohne andere Padding zu killen */
@media (max-width: 820px) {
  .topbar, .app-topbar {
    padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
    background: var(--bp-cream-card, #faf6ef);
  }
  @media all and (display-mode: standalone) {
    .topbar, .app-topbar {
      padding-top: calc(env(safe-area-inset-top, 47px) + 8px) !important;
    }
  }

  /* Topbar-Hintergrund nach oben strecken — kein z-index der höher ist als safe-area */
  .topbar::before, .app-topbar::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0; right: 0;
    height: 100px;
    background: var(--bp-cream-card, #faf6ef);
    pointer-events: none;
    z-index: 0;
  }
}

/* Bottom-Tabs: bis ganz nach unten (Home-Indicator-Zone gefüllt) */
@media (max-width: 820px) {
  .bottom-tabs {
    /* v1.3.199: Wie SanEasyOrder — status-bar-style:default + display:fullscreen
       sorgen dafür, dass env(safe-area-inset-bottom) = 0px ist.
       Tab-Bar braucht damit nur normales Padding, keine Tricks. */
    padding-top: 6px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
    background: var(--bp-cream-card, #faf6ef) !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 80;
  }
  .bottom-tabs__item {
    min-height: 48px;
  }
  /* v1.3.195: ::after-Stretch entfernt — Bar geht direkt bis Bildschirmkante */
  .bottom-tabs::after {
    display: none !important;
  }
  @media all and (display-mode: standalone) {
    .bottom-tabs {
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
    }
  }
}

/* Templates-Tabelle als Karten auf Mobile (für Übersicht) */
@media (max-width: 820px) {
  .table--cards thead { display: none; }
  .table--cards tbody,
  .table--cards tr,
  .table--cards td {
    display: block;
    width: 100%;
  }
  .table--cards tr {
    background: var(--bp-cream-card, #faf6ef);
    border: 1px solid rgba(15, 61, 46, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
  }
  .table--cards td {
    padding: 4px 0;
    border: 0;
  }
  /* Template-Karten Layout: Name+Lang oben, Aktionen darunter */
  .table--templates.table--cards tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name lang"
      "actions actions";
    gap: 8px 10px;
    padding: 14px 16px;
  }
  .table--templates.table--cards td:nth-child(1) { grid-area: name; }
  .table--templates.table--cards td:nth-child(2) { grid-area: lang; align-self: start; }
  .table--templates.table--cards td:nth-child(3),
  .table--templates.table--cards td:nth-child(4),
  .table--templates.table--cards td:nth-child(5) {
    display: none;
  }
  .table--templates.table--cards td:last-child {
    grid-area: actions;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 61, 46, 0.06);
  }
  .table--templates.table--cards td:last-child .btn {
    flex: 1;
    min-width: 80px;
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* ============================================================================
   v1.3.113 — iOS month-input Normalisierung + Bottom-Tabs Hintergrund
============================================================================ */

/* Auf iOS Safari: type="month" wird sonst zentriert mit eigenem Style gerendert.
   Hier zwingen wir es auf das gleiche Aussehen wie <select>. */
.input[type="month"],
.input[type="date"],
.input[type="datetime-local"],
.input[type="time"],
.input[type="week"] {
  width: 100% !important;
  text-align: left !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  /* Identisches Padding/Höhe wie select */
  padding: 9px 12px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  /* Pfeil-Symbol rechts (wie bei select), damit es als Picker erkennbar ist */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23176956' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px !important;
  min-height: 38px;
}

/* iOS-spezifisch: das interne Datepicker-Layout normalisieren */
@supports (-webkit-touch-callout: none) {
  .input[type="month"],
  .input[type="date"],
  .input[type="datetime-local"] {
    /* iOS rendert sonst mit center alignment */
    text-align: left !important;
    /* Verhindert iOS' eigenes "Datum hier" Placeholder */
    -webkit-text-fill-color: var(--text);
    min-height: 38px;
    line-height: 38px;  /* Vertikales Zentrieren auf iOS */
  }
}

/* ============================================================================
   v1.3.114 — Nachrichten-Vorschau und Verlauf
============================================================================ */

/* Vorschau-Modal */
.msg-preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.msg-preview__head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
.msg-preview__tpl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.msg-preview__tpl strong {
  color: var(--bp-dark-2, #14483a);
  font-size: 15px;
}
.msg-preview__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.msg-preview__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3, #6b7168);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.msg-preview__value {
  background: var(--bp-cream-card, #faf6ef);
  border: 1px solid rgba(15, 61, 46, 0.08);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
}
.msg-preview__value--strong {
  font-weight: 600;
  color: var(--bp-dark-2, #14483a);
}
.msg-preview__body {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 80px;
  max-height: 360px;
  overflow-y: auto;
}

/* Verlauf — aufklappbare Nachrichten */
.booking-msg-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.booking-msg {
  background: var(--bp-cream-card, #faf6ef);
  border: 1px solid rgba(15, 61, 46, 0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.booking-msg:hover {
  border-color: rgba(201, 169, 97, 0.3);
}
.booking-msg[open] {
  box-shadow: 0 2px 8px rgba(15, 61, 46, 0.06);
  border-color: rgba(201, 169, 97, 0.35);
}
.booking-msg__head {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.booking-msg__head::-webkit-details-marker { display: none; }
.booking-msg__head::after {
  content: '⌄';
  color: var(--bp-gold, #c9a961);
  font-size: 16px;
  margin-left: 6px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.booking-msg[open] .booking-msg__head::after {
  transform: rotate(180deg);
}
.booking-msg__head-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.booking-msg__title {
  font-size: 13px;
  color: var(--bp-dark-2, #14483a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.booking-msg__meta {
  font-size: 11px;
  color: var(--text-3, #6b7168);
}
.booking-msg__body {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(15, 61, 46, 0.08);
  background: #fff;
}
.booking-msg__field {
  display: flex;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 6px;
  align-items: baseline;
}
.booking-msg__field-label {
  font-weight: 600;
  color: var(--text-3);
  min-width: 60px;
  flex-shrink: 0;
  font-size: 12px;
}
.booking-msg__field-value {
  color: var(--text);
  word-break: break-word;
}
.booking-msg__content {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bp-cream-card, #faf6ef);
  border: 1px solid rgba(15, 61, 46, 0.05);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow-y: auto;
}
.booking-msg__error {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fbeae5;
  border-radius: 6px;
  font-size: 12px;
  color: #9a3412;
}

/* Mobile Anpassungen */
@media (max-width: 640px) {
  .msg-preview__body {
    max-height: 240px;
    padding: 12px 14px;
  }
  .booking-msg__content {
    max-height: 200px;
  }
  .booking-msg__field {
    flex-direction: column;
    gap: 2px;
  }
  .booking-msg__field-label {
    min-width: 0;
  }
}

/* ============================================================================
   v1.3.115 — Geplante automatische Nachrichten (unter dem Verlauf)
============================================================================ */
.booking-scheduled {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.booking-scheduled__head {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3, #6b7168);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
  position: relative;
  padding-left: 12px;
}
.booking-scheduled__head::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 12px;
  background: linear-gradient(180deg, var(--bp-gold, #c9a961), var(--bp-gold-light, #e6c97a));
  border-radius: 2px;
}
.booking-scheduled__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.booking-scheduled__item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bp-cream-card, #faf6ef);
  border: 1px solid rgba(15, 61, 46, 0.06);
  border-radius: 8px;
  font-size: 13px;
}
.booking-scheduled__item--past {
  opacity: 0.55;
}
.booking-scheduled__date {
  font-family: var(--bp-brand-font, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 12px;
  color: var(--bp-dark-2, #14483a);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.booking-scheduled__main {
  min-width: 0;
}
.booking-scheduled__title {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.booking-scheduled__meta {
  font-size: 11px;
  color: var(--text-3, #6b7168);
  margin-top: 2px;
}
.booking-scheduled__item .badge {
  flex-shrink: 0;
}

/* Mobile: kompaktere Darstellung */
@media (max-width: 640px) {
  .booking-scheduled__item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date badge"
      "main main";
    gap: 4px 10px;
    padding: 10px 12px;
  }
  .booking-scheduled__date { grid-area: date; }
  .booking-scheduled__item .badge { grid-area: badge; }
  .booking-scheduled__main { grid-area: main; }
}

/* ============================================================================
   v1.3.117 — Platzhalter-Picker im Vorlagen-Editor
============================================================================ */
.placeholder-picker {
  margin-top: 14px;
  padding: 16px;
  background: var(--bp-cream-card, #faf6ef);
  border: 1px solid rgba(15, 61, 46, 0.1);
  border-radius: 12px;
}
.placeholder-picker__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}
.placeholder-picker__title {
  font-family: var(--bp-brand-font, 'Poppins', sans-serif);
  font-size: 12px;
  font-weight: 700;
  color: var(--bp-dark-2, #14483a);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  position: relative;
  padding-left: 12px;
}
.placeholder-picker__title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 12px;
  background: linear-gradient(180deg, var(--bp-gold, #c9a961), var(--bp-gold-light, #e6c97a));
  border-radius: 2px;
}
.placeholder-picker__hint {
  font-size: 12px;
  color: var(--text-3, #6b7168);
  margin-top: 2px;
  padding-left: 12px;
  line-height: 1.4;
}

.placeholder-group {
  border-top: 1px solid rgba(15, 61, 46, 0.08);
  padding: 8px 0;
}
.placeholder-group:first-of-type {
  border-top: 0;
  padding-top: 4px;
}
.placeholder-group__head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  user-select: none;
}
.placeholder-group__head::-webkit-details-marker { display: none; }
.placeholder-group__head::after {
  content: '⌄';
  color: var(--bp-gold, #c9a961);
  font-size: 14px;
  margin-left: 6px;
  transition: transform 0.2s;
}
.placeholder-group[open] .placeholder-group__head::after {
  transform: rotate(180deg);
}
.placeholder-group__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--bp-dark-2, #14483a);
}
.placeholder-group__count {
  font-size: 11px;
  color: var(--text-3, #6b7168);
  background: rgba(15, 61, 46, 0.06);
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: auto;
  margin-right: 6px;
}
.placeholder-group__items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 4px;
}

.placeholder-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid rgba(15, 61, 46, 0.12);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.15s ease;
  max-width: 100%;
  min-height: 38px;
}
.placeholder-chip:hover {
  border-color: var(--bp-gold-soft, rgba(201, 169, 97, 0.4));
  background: var(--bp-cream-card, #faf6ef);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 61, 46, 0.06);
}
.placeholder-chip:active {
  transform: translateY(0);
}
.placeholder-chip--inserted {
  background: var(--bp-login-mint, #dff1e9) !important;
  border-color: var(--bp-dark-2, #14483a) !important;
}
.placeholder-chip__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--bp-dark-2, #14483a);
  line-height: 1.2;
  white-space: nowrap;
}
.placeholder-chip__var {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 10px;
  color: var(--text-3, #6b7168);
  line-height: 1.2;
  white-space: nowrap;
}

/* Mobile: Chips noch kompakter */
@media (max-width: 640px) {
  .placeholder-picker {
    padding: 14px 12px;
  }
  .placeholder-chip {
    padding: 8px 10px;
    min-height: 44px;  /* gute Tap-Größe */
  }
  .placeholder-chip__var {
    /* Variable-Name auf engem Bildschirm verstecken — der Label-Name reicht */
    display: none;
  }
  .placeholder-chip__label {
    font-size: 13px;
  }
}

/* ============================================================================
   v1.3.118 — HTML-E-Mail Vorschau mit Tabs (HTML vs. Text)
============================================================================ */
.msg-preview__label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.msg-preview__tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--bp-cream-card, #faf6ef);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid rgba(15, 61, 46, 0.1);
}
.msg-preview__tab {
  background: transparent;
  border: 0;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3, #6b7168);
  cursor: pointer;
  transition: all 0.15s;
}
.msg-preview__tab:hover {
  color: var(--bp-dark-2, #14483a);
}
.msg-preview__tab.is-active {
  background: #fff;
  color: var(--bp-dark-2, #14483a);
  box-shadow: 0 1px 4px rgba(15, 61, 46, 0.08);
}
.msg-preview__iframe {
  width: 100%;
  height: 460px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f5f0e8;
  display: block;
}
@media (max-width: 640px) {
  .msg-preview__iframe {
    height: 360px;
  }
  .msg-preview__tabs {
    width: 100%;
  }
  .msg-preview__tab {
    flex: 1;
  }
}

/* ============================================================================
   v1.3.121 — Nachricht-Sende-Reihe: Button auf Select-Höhe, Auge-Icon, sichtbar
============================================================================ */
.msg-send-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.msg-send-row__field {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}
.msg-send-row__btn {
  flex: 0 0 auto;
  /* Exakt die gleiche Höhe wie ein .select / .input */
  min-height: 40px;
  padding: 0 18px !important;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Stärker hervorgehoben: leichter Glow + goldene Linie unten */
  position: relative;
  box-shadow: 0 2px 8px rgba(15, 61, 46, 0.18), 0 1px 0 rgba(255,255,255,0.08) inset;
}
.msg-send-row__btn:not([disabled]) {
  background: linear-gradient(135deg, #0c5a49 0%, #176956 100%);
  border-color: #0c5a49;
}
.msg-send-row__btn:not([disabled]):hover {
  background: linear-gradient(135deg, #073f35 0%, #0c5a49 100%);
  box-shadow: 0 4px 14px rgba(15, 61, 46, 0.28), 0 1px 0 rgba(255,255,255,0.1) inset;
  transform: translateY(-1px);
}
.msg-send-row__btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 540px) {
  .msg-send-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .msg-send-row__btn {
    width: 100%;
  }
}

/* ===============================================================
   v1.3.125 — Gast antworten Modal
   --------------------------------------------------------------- */

/* „Gast antworten"-Button im Buchungs-Modal */
.msg-reply-btn {
  width: 100%;
  padding: 14px 18px;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.guest-reply {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.guest-reply__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guest-reply__label {
  font-size: 13px;
  font-weight: 600;
  color: #2a2f2b;
  margin: 0;
}

.guest-reply__input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid rgba(15, 61, 46, 0.18);
  border-radius: 10px;
  background: #ffffff;
  color: #1a1a1a;
  box-sizing: border-box;
}

.guest-reply__input:focus {
  outline: none;
  border-color: #0c5a49;
  box-shadow: 0 0 0 3px rgba(12, 90, 73, 0.12);
}

/* Empfaenger-Zeile: Eingabe + Plus-Button daneben */
.guest-reply__recipient-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.guest-reply__recipient-row .guest-reply__input {
  flex: 1;
  min-width: 0;
}

.guest-reply__plus {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #0c5a49;
  background: #ffffff;
  color: #0c5a49;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}

.guest-reply__plus:hover {
  background: #0c5a49;
  color: #ffffff;
}

/* CC/BCC Extra-Block */
.guest-reply__extra {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  margin-top: 4px;
  background: #f7faf9;
  border: 1px dashed rgba(15, 61, 46, 0.15);
  border-radius: 10px;
}

/* HTML-Editor-Toggle (blauer Link) */
.guest-reply__toggle {
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: #0c5a49;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.guest-reply__toggle:hover { text-decoration: underline; }
.guest-reply__toggle.is-active {
  color: #0c5a49;
}

/* Body-Container relative fuer FAB */
.guest-reply__body-wrap {
  position: relative;
}

.guest-reply__textarea {
  width: 100%;
  min-height: 220px;
  padding: 14px 16px 14px 16px;
  font-size: 15px;
  line-height: 1.55;
  border: 1px solid rgba(15, 61, 46, 0.18);
  border-radius: 12px;
  background: #ffffff;
  color: #1a1a1a;
  resize: vertical;
  box-sizing: border-box;
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
}

.guest-reply__textarea:focus {
  outline: none;
  border-color: #0c5a49;
  box-shadow: 0 0 0 3px rgba(12, 90, 73, 0.12);
}

.guest-reply__textarea--code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.5;
}

/* v1.3.126: Editor-Kopfzeile mit HTML-Toggle links und Platzhalter-Pill rechts.
   FAB sitzt nicht mehr ueber der Textarea – kein Verdecken von Eingaben. */
.guest-reply__editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

/* Platzhalter-Button (frueher floating FAB, jetzt Pill in der Kopfzeile) */
.guest-reply__fab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: #0c5a49;
  color: #ffffff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(12, 90, 73, 0.28);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

.guest-reply__fab-label {
  line-height: 1;
}

.guest-reply__fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(12, 90, 73, 0.38);
  background: #073f35;
}

.guest-reply__fab:active {
  transform: translateY(0);
}

/* Footer mit Senden/Abbrechen */
.guest-reply__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 61, 46, 0.08);
}

.guest-reply__footer .btn--primary {
  min-width: 120px;
  background: #1a1a1a;
  color: #ffffff;
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 600;
}

.guest-reply__footer .btn--primary:hover {
  background: #0c5a49;
}

.guest-reply__footer .btn--secondary {
  background: transparent;
  color: #6b7168;
  border: 0;
}

.guest-reply__footer .btn--secondary:hover {
  color: #1a1a1a;
}

/* Platzhalter-Popover */
.guest-reply__placeholder-popover {
  position: absolute;
  right: 20px;
  bottom: 90px;
  width: min(360px, calc(100vw - 40px));
  max-height: 60vh;
  background: #ffffff;
  border: 1px solid rgba(15, 61, 46, 0.18);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
}

.guest-reply__popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.guest-reply__popover-head strong {
  font-size: 15px;
  color: #0c5a49;
}

.guest-reply__popover-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: #6b7168;
  cursor: pointer;
  padding: 2px 8px;
}

.guest-reply__popover-close:hover {
  color: #1a1a1a;
}

.guest-reply__popover-hint {
  font-size: 12px;
  color: #6b7168;
  margin-bottom: 10px;
}

.guest-reply__popover-groups {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

.guest-reply__popover-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  background: #f5f0e8;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0c5a49;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.guest-reply__popover-group > summary::-webkit-details-marker { display: none; }
.guest-reply__popover-group[open] > summary { background: #e9f0ec; }

.guest-reply__popover-count {
  font-size: 11px;
  font-weight: 700;
  color: #c9a961;
  background: #ffffff;
  border-radius: 999px;
  padding: 2px 8px;
}

.guest-reply__popover-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 4px 4px;
}

.guest-reply__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid rgba(15, 61, 46, 0.15);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px;
  color: #1a1a1a;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}

.guest-reply__chip:hover {
  background: #faf6ef;
  border-color: #c9a961;
}

.guest-reply__chip--inserted {
  background: #c9a961;
  color: #ffffff;
  border-color: #c9a961;
  transform: scale(0.95);
}

.guest-reply__chip-label {
  font-weight: 600;
}

.guest-reply__chip-var {
  color: #6b7168;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11px;
}

.guest-reply__chip--inserted .guest-reply__chip-var {
  color: #faf6ef;
}

/* Mobile-Anpassungen */
@media (max-width: 540px) {
  .guest-reply {
    gap: 14px;
  }

  .guest-reply__textarea {
    min-height: 180px;
  }

  .guest-reply__fab {
    height: 34px;
    padding: 0 12px 0 10px;
    font-size: 13px;
  }

  /* Auf sehr schmalen Screens (≤380px) verschwindet der Text – nur Icon */
  @media (max-width: 380px) {
    .guest-reply__fab-label { display: none; }
    .guest-reply__fab { padding: 0 10px; }
  }

  .guest-reply__placeholder-popover {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 80px;
  }

  .guest-reply__footer {
    flex-direction: column-reverse;
  }

  .guest-reply__footer .btn {
    width: 100%;
  }
}

/* ===============================================================
   v1.3.126 — Kontaktbuch + Autocomplete + Marketing-Einwilligung
   --------------------------------------------------------------- */

/* Autocomplete im Buchungs-Modal (Gast-Namen-Feld) */
.contact-autocomplete {
  position: relative;
}

.contact-autocomplete__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background: #ffffff;
  border: 1px solid rgba(15, 61, 46, 0.18);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}

.contact-autocomplete__item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}

.contact-autocomplete__item:hover,
.contact-autocomplete__item.is-active {
  background: #f5f0e8;
}

.contact-autocomplete__name {
  font-weight: 600;
  color: #1a1a1a;
  font-size: 14px;
}

.contact-autocomplete__meta {
  grid-column: 1 / 2;
  font-size: 12px;
  color: #6b7168;
}

.contact-autocomplete__badge {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  align-self: center;
  font-size: 11px;
  font-weight: 600;
  color: #c9a961;
  background: #faf6ef;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Marketing-Einwilligung Checkbox im Buchungs-Modal */
.booking-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  background: #faf6ef;
  border: 1px solid rgba(201, 169, 97, 0.3);
  border-radius: 10px;
  cursor: pointer;
}

.booking-consent input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.booking-consent strong {
  color: #0c5a49;
  font-size: 14px;
}

.booking-consent > span {
  font-size: 14px;
  line-height: 1.5;
}

.booking-consent .txt-muted {
  display: block;
  margin-top: 4px;
}

/* Kontakte-Liste */
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 4px;
}

.contact-card {
  background: #ffffff;
  border: 1px solid rgba(15, 61, 46, 0.1);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.contact-card:hover {
  border-color: #0c5a49;
  box-shadow: 0 4px 12px rgba(12, 90, 73, 0.1);
  transform: translateY(-1px);
}

.contact-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

.contact-card__name {
  font-weight: 600;
  font-size: 15px;
  color: #1a1a1a;
  line-height: 1.3;
}

.contact-card__badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.contact-card__email {
  font-size: 13px;
  color: #6b7168;
  word-break: break-all;
  margin-bottom: 2px;
}

.contact-card__loc {
  font-size: 12px;
  color: #6b7168;
  margin-bottom: 12px;
}

.contact-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 61, 46, 0.08);
}

.contact-card__stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact-card__stat-num {
  font-size: 14px;
  font-weight: 700;
  color: #0c5a49;
}

.contact-card__stat-lbl {
  font-size: 10px;
  color: #6b7168;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.badge--gold {
  background: linear-gradient(135deg, #c9a961, #e6c97a);
  color: #ffffff;
  font-weight: 700;
}

/* Kontakt-Detail Modal */
.contact-detail__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 61, 46, 0.08);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.contact-detail__email {
  font-size: 15px;
  font-weight: 600;
  color: #0c5a49;
}

.contact-detail__phone {
  font-size: 13px;
  color: #6b7168;
  margin-top: 4px;
}

.contact-detail__section {
  margin-bottom: 18px;
}

.contact-detail__section-head {
  font-size: 13px;
  font-weight: 700;
  color: #0c5a49;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.contact-detail__consent {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #faf6ef;
  border-radius: 8px;
  cursor: pointer;
}

.contact-bookings {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-booking {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(15, 61, 46, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}

.contact-booking:hover {
  background: #faf6ef;
}

.contact-booking__date {
  font-size: 12px;
  font-weight: 600;
  color: #0c5a49;
  white-space: nowrap;
}

.contact-booking__title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}

.contact-booking__meta {
  font-size: 11px;
  color: #6b7168;
}

.contact-booking__price {
  font-weight: 600;
  color: #1a1a1a;
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 540px) {
  .contact-booking {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
  }
  .contact-booking__date  { grid-column: 1 / 2; }
  .contact-booking__main  { grid-column: 1 / 2; }
  .contact-booking__price { grid-column: 2 / 3; grid-row: 1 / 2; align-self: start; }
  .contact-booking__status { grid-column: 2 / 3; grid-row: 2 / 3; align-self: end; }
}

/* Kampagnen-Liste */
.campaigns-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.campaign-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid rgba(15, 61, 46, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}

.campaign-row:hover {
  border-color: #0c5a49;
  background: #faf6ef;
}

.campaign-row__name {
  font-weight: 600;
  font-size: 15px;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.campaign-row__subject {
  font-size: 13px;
  color: #6b7168;
  margin-bottom: 4px;
}

/* Kampagnen-Editor */
.campaign-editor {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.campaign-editor__section {
  padding: 14px;
  background: #faf6ef;
  border-radius: 10px;
  border: 1px solid rgba(15, 61, 46, 0.08);
}

.campaign-editor__section-head {
  font-size: 13px;
  font-weight: 700;
  color: #0c5a49;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.campaign-preview-list {
  margin: 8px 0 0;
  padding: 8px 0 0 18px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.7;
}

.link-btn {
  background: transparent;
  border: 0;
  color: #0c5a49;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
}

.link-btn:hover { text-decoration: underline; }

.info-card {
  padding: 12px 16px;
  background: #e9f0ec;
  border-left: 3px solid #0c5a49;
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 1.5;
}

.btn--danger-outline {
  background: transparent;
  border: 1px solid #d33;
  color: #d33;
}

.btn--danger-outline:hover {
  background: #d33;
  color: #ffffff;
}

@media (max-width: 540px) {
  .contacts-grid {
    grid-template-columns: 1fr;
  }
}

/* ===============================================================
   v1.3.129 — Aufgeräumtes Sidebar-Menü
   --------------------------------------------------------------- */

/* Visueller Trenner zwischen Bereichen */
.nav__group-header {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.55);
  padding: 14px 18px 6px;
  margin: 6px 0 0;
  user-select: none;
  pointer-events: none;
}

/* Im eingeklappten Sidebar-Modus werden die Header zu kleinen Strichen */
.app.sidebar-collapsed .nav__group-header {
  font-size: 0;
  padding: 8px 0 4px;
  height: 1px;
}
.app.sidebar-collapsed .nav__group-header::after {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 auto;
}

/* Kollabierbare „Einrichtung"-Sektion */
.nav__advanced {
  margin: 4px 0 0;
}

.nav__advanced > summary {
  cursor: pointer;
  list-style: none;
}

.nav__advanced > summary::-webkit-details-marker { display: none; }
.nav__advanced > summary::marker { content: ''; }

.nav__advanced .nav__chevron {
  margin-left: auto;
  transition: transform 0.18s ease;
  font-size: 16px;
  opacity: 0.7;
}

.nav__advanced[open] > summary .nav__chevron {
  transform: rotate(90deg);
}

.nav__advanced-list {
  display: flex;
  flex-direction: column;
  padding: 2px 0 4px 0;
}

/* Unterpunkte etwas eingerückt + kleinere Icons */
.nav__item--sub {
  padding-left: 32px;
  font-size: 14px;
  opacity: 0.92;
}

.nav__item--sub .nav__icon {
  width: 18px;
  height: 18px;
}

.nav__item--sub:hover {
  opacity: 1;
}

/* Im kollabierten Sidebar-Modus: Einrichtung-Toggle bleibt funktional,
   die Sub-Liste rutscht auf gleiche Ebene */
.app.sidebar-collapsed .nav__item--sub {
  padding-left: 10px;
  font-size: 0;
}

.app.sidebar-collapsed .nav__advanced > summary span:not(.nav__chevron),
.app.sidebar-collapsed .nav__advanced .nav__chevron {
  display: none;
}

@media (max-width: 900px) {
  .nav__group-header {
    padding: 12px 16px 4px;
  }
}

/* ===============================================================
   v1.3.130 — Template-Tabs (Standard vs Marketing)
   --------------------------------------------------------------- */
.card__header--tabs {
  border-bottom: 1px solid rgba(15, 61, 46, 0.08);
  padding-bottom: 0;
  margin-bottom: 12px;
}
.tpl-tabs {
  display: flex;
  gap: 4px;
}
.tpl-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 16px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #6b7168;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s, border-color 0.15s;
}
.tpl-tab:hover {
  color: #0c5a49;
}
.tpl-tab.is-active {
  color: #0c5a49;
  border-bottom-color: #0c5a49;
}
.tpl-tab__count {
  font-size: 11px;
  font-weight: 700;
  background: #faf6ef;
  color: #c9a961;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(201, 169, 97, 0.3);
}
.tpl-tab.is-active .tpl-tab__count {
  background: #0c5a49;
  color: #ffffff;
  border-color: #0c5a49;
}

/* ===============================================================
   v1.3.130 — Kampagnen-Editor Toolbar + Marketing-Vorschau
   --------------------------------------------------------------- */
.campaign-editor__body-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 6px 0;
}
.campaign-editor__body-toolbar .link-btn {
  margin-right: auto;
}
.campaign-editor__body-toolbar .btn--sm {
  padding: 6px 12px;
  font-size: 13px;
}

.marketing-preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.marketing-preview__meta {
  background: #faf6ef;
  border: 1px solid rgba(201, 169, 97, 0.3);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.marketing-preview__row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13.5px;
}
.marketing-preview__label {
  flex: 0 0 90px;
  color: #6b7168;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.marketing-preview__value {
  color: #1a1a1a;
  word-break: break-all;
}
.marketing-preview__hint {
  font-size: 12.5px;
  color: #6b7168;
  line-height: 1.5;
}
.marketing-preview__hint code {
  background: #f5f0e8;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11.5px;
  color: #0c5a49;
}
.marketing-preview__frame {
  width: 100%;
  min-height: 420px;
  border: 1px solid rgba(15, 61, 46, 0.18);
  border-radius: 10px;
  background: #ffffff;
}

/* v1.3.134 — Kontakte als Tabelle/Liste */
.table--contacts tbody tr.contact-row {
  cursor: pointer;
  transition: background 0.1s;
}
.table--contacts tbody tr.contact-row:hover {
  background: #faf6ef;
}
.table--contacts th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #6b7168;
}

/* v1.3.134 — Gast-Links im Buchungs-Modal */
.booking-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.booking-links__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.booking-links__label {
  flex: 0 0 130px;
  font-size: 13px;
  font-weight: 600;
  color: #0c5a49;
}

.booking-links__copy {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #faf6ef;
  border: 1px solid rgba(15, 61, 46, 0.15);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
  overflow: hidden;
}

.booking-links__copy:hover {
  background: #f5ecd9;
  border-color: #c9a961;
}

.booking-links__copy.is-copied {
  background: #d4f0e0;
  border-color: #0c5a49;
}

.booking-links__url {
  flex: 1;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  color: #1a1a1a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-links__copy-icon {
  flex: 0 0 auto;
  color: #0c5a49;
  font-size: 16px;
  font-weight: 700;
}

.booking-links__warn {
  margin-top: 10px;
  padding: 12px 14px;
  background: #fff5e6;
  border: 1px solid #f0c878;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #7a5410;
}

.booking-links__warn a {
  color: #0c5a49;
  font-weight: 600;
}

.booking-links__warn code {
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}

@media (max-width: 540px) {
  .booking-links__row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .booking-links__label {
    flex: 0 0 auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }
}

/* v1.3.137 — Security alert variant für Stats */
.dash-stat--alert {
  background: linear-gradient(160deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #f0a4a4;
}
.dash-stat--alert .dash-stat__num,
.dash-stat--alert .dash-stat__value { color: #b91c1c; }

/* v1.3.140 - Abo / Billing UI */
.billing-current {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: #faf6ef;
  border-radius: 10px;
  margin-top: 8px;
}
.billing-current__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.billing-current__label {
  color: #6b7168;
  font-size: 14px;
}
.billing-current__value {
  font-size: 15px;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.plan-card {
  position: relative;
  padding: 24px 20px;
  border: 2px solid #e6e0d2;
  border-radius: 14px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}
.plan-card--recommended {
  border-color: #c9a961;
  box-shadow: 0 4px 18px rgba(201, 169, 97, 0.18);
}
.plan-card--current {
  border-color: #0c5a49;
}
.plan-card__ribbon, .plan-card__current {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.plan-card__ribbon { background: #c9a961; color: #fff; }
.plan-card__current { background: #0c5a49; color: #fff; }
.plan-card__name {
  margin: 0 0 8px;
  font-size: 18px;
  color: #0c5a49;
}
.plan-card__price {
  margin: 12px 0 0;
}
.plan-card__price-num {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
}
.plan-card__price-unit { font-size: 14px; color: #6b7168; margin-left: 4px; }
.plan-card__price-year {
  font-size: 13px;
  color: #6b7168;
  margin-bottom: 12px;
}
.plan-card__features {
  list-style: none;
  padding: 0;
  margin: 12px 0 18px;
  flex: 1;
}
.plan-card__features li {
  padding: 4px 0;
  font-size: 14px;
  color: #1a1a1a;
}
.plan-card__features li::before { color: #0c5a49; font-weight: 700; }

/* v1.3.141 - Trial-Banner */
.trial-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  font-size: 14px;
  border-bottom: 1px solid;
  flex-wrap: wrap;
}
.trial-banner--warn {
  background: #fff5e6;
  border-bottom-color: #f0c878;
  color: #7a5410;
}
.trial-banner--expired {
  background: #fef2f2;
  border-bottom-color: #f0a4a4;
  color: #7f1d1d;
}
.trial-banner strong { font-weight: 700; }
.trial-banner__btn {
  margin-left: auto;
  padding: 6px 16px;
  border-radius: 999px;
  background: #0c5a49;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.trial-banner__btn:hover { background: #073f35; }

/* v1.3.141 - Avatar-Menü Plan-Status farbliche Akzente */
.account-menu__plan--warn {
  background: linear-gradient(160deg, #fff5e6 0%, #fef3c7 100%);
  border-left: 3px solid #c9a961;
}
.account-menu__plan--alert {
  background: linear-gradient(160deg, #fef2f2 0%, #fee2e2 100%);
  border-left: 3px solid #b91c1c;
}
.account-menu__item--cta {
  background: #0c5a49;
  color: #ffffff !important;
  font-weight: 600;
  margin: 4px 8px;
  border-radius: 8px;
}
.account-menu__item--cta:hover { background: #073f35; }
.account-menu__item--primary {
  color: #0c5a49;
  font-weight: 600;
}

@media (max-width: 720px) {
  .trial-banner { padding: 10px 16px; font-size: 13px; }
  .trial-banner__btn { width: 100%; text-align: center; margin-left: 0; }
}

/* v1.3.141 - MRR Trend Mini-Chart */
.mrr-trend {
  padding: 14px 16px;
  background: #faf6ef;
  border: 1px solid rgba(15, 61, 46, 0.1);
  border-radius: 10px;
  margin-bottom: 12px;
}
.mrr-trend__title {
  font-size: 12px;
  font-weight: 600;
  color: #6b7168;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}
.mrr-trend__bars {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 80px;
}
.mrr-trend__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.mrr-trend__bar {
  width: 100%;
  max-width: 36px;
  background: linear-gradient(180deg, #c9a961 0%, #0c5a49 100%);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}
.mrr-trend__label {
  font-size: 11px;
  color: #6b7168;
  font-family: Consolas, monospace;
}

/* v1.3.143 - Plan-Subtitle */
.plan-card__subtitle {
  font-size: 13px;
  color: #6b7168;
  margin: -4px 0 8px;
  font-style: italic;
}

/* v1.3.145 - Operator-Konsole Tab-Navigation */
.op-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 14px;
  padding: 6px;
  background: #faf6ef;
  border: 1px solid rgba(15, 61, 46, 0.12);
  border-radius: 12px;
}
.op-tab {
  appearance: none;
  background: transparent;
  border: none;
  padding: 10px 18px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #6b7168;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  flex: 1 1 auto;
  text-align: center;
}
.op-tab:hover {
  background: rgba(12, 90, 73, 0.08);
  color: #0c5a49;
}
.op-tab.is-active {
  background: #0c5a49;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(12, 90, 73, 0.25);
}
.op-tab.is-active:hover {
  background: #073f35;
  color: #ffffff;
}
.op-tab-panels {
  position: relative;
}
.op-panel {
  display: none;
}
.op-panel.is-active {
  display: block;
}
.op-panel .card.card--tight {
  margin-bottom: 14px;
}
@media (max-width: 720px) {
  .op-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .op-tab {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* v1.3.146 - Operator Quick-Links auf der Übersicht */
.op-quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.op-quick-link {
  appearance: none;
  text-align: left;
  background: #faf6ef;
  border: 1px solid rgba(15, 61, 46, 0.15);
  border-left: 3px solid #c9a961;
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.op-quick-link:hover {
  background: #ffffff;
  border-left-color: #0c5a49;
  transform: translateY(-1px);
}
.op-quick-link strong {
  color: #0c5a49;
  font-size: 15px;
  font-weight: 600;
}
.op-quick-link span {
  font-size: 13px;
  color: #6b7168;
}

/* v1.3.146 - Operator KPI-Grid robust auf 4 Spalten ab 720px */
.operator-kpi-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px;
  margin-bottom: 18px;
}
.operator-kpi-row .kpi {
  padding: 14px 16px;
  min-width: 0;
}
.operator-kpi-row .kpi__value {
  font-size: 22px;
  line-height: 1.2;
}
@media (max-width: 720px) {
  .operator-kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 380px) {
  .operator-kpi-row {
    grid-template-columns: 1fr !important;
  }
}

/* v1.3.146 - Tab-Sticky am oberen Rand */
.op-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  padding-top: 4px;
}

/* ============================================================
   v1.3.159: Setup-Wizard Welcome-Modal
   ============================================================ */
#wizard-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 20px;
}
#wizard-welcome-overlay.is-visible {
  opacity: 1;
}
.wizard-welcome-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 41, 33, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wizard-welcome-card {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(7, 41, 33, 0.35);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
#wizard-welcome-overlay.is-visible .wizard-welcome-card {
  transform: translateY(0) scale(1);
}
.wizard-welcome-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 0;
  color: #ffffff;
  font-size: 22px;
  cursor: pointer;
  z-index: 2;
  display: grid;
  place-items: center;
  transition: background 0.2s;
}
.wizard-welcome-close:hover {
  background: rgba(255, 255, 255, 0.4);
}
.wizard-welcome-hero {
  background: linear-gradient(135deg, #0c5a49 0%, #1a6657 100%);
  padding: 44px 28px 36px;
  text-align: center;
  border-radius: 24px 24px 0 0;
  position: relative;
  overflow: hidden;
}
.wizard-welcome-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wizard-welcome-sparkles span {
  position: absolute;
  font-size: 18px;
  opacity: 0;
  animation: sparkle-float 3s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.wizard-welcome-sparkles span:nth-child(1) { top: 18%; left: 12%; }
.wizard-welcome-sparkles span:nth-child(2) { top: 32%; right: 18%; }
.wizard-welcome-sparkles span:nth-child(3) { bottom: 22%; left: 22%; }
.wizard-welcome-sparkles span:nth-child(4) { bottom: 28%; right: 14%; font-size: 14px; }
@keyframes sparkle-float {
  0%, 100% { opacity: 0; transform: translateY(0); }
  50% { opacity: 0.8; transform: translateY(-10px); }
}
.wizard-welcome-logo {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.wizard-welcome-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: #c9a961;
  letter-spacing: 2.5px;
  margin-top: 8px;
  text-transform: uppercase;
}
.wizard-welcome-body {
  padding: 28px 34px 32px;
}
.wizard-welcome-body h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px;
  color: #0c5a49;
}
.wizard-welcome-lead {
  font-size: 15px;
  line-height: 1.6;
  color: #4a4a4a;
  margin: 0 0 24px;
}
.wizard-welcome-lead strong {
  color: #0c5a49;
}
.wizard-welcome-features {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
.wizard-welcome-feature {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px;
  background: #faf6ef;
  border: 1px solid rgba(15, 61, 46, 0.1);
  border-radius: 12px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.wizard-welcome-feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(12, 90, 73, 0.12);
}
.wizard-welcome-feature__icon {
  font-size: 28px;
  margin-bottom: 4px;
}
.wizard-welcome-feature strong {
  font-size: 13px;
  font-weight: 700;
  color: #0c5a49;
}
.wizard-welcome-feature span {
  font-size: 11px;
  color: #6b7168;
  line-height: 1.4;
}
.wizard-welcome-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.wizard-welcome-actions .btn--lg {
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(12, 90, 73, 0.3);
  animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 8px 24px rgba(12, 90, 73, 0.3); }
  50% { box-shadow: 0 8px 32px rgba(201, 169, 97, 0.5); }
}
.wizard-welcome-note {
  font-size: 12px;
  color: #6b7168;
  text-align: center;
  font-style: italic;
}
@media (max-width: 560px) {
  .wizard-welcome-features {
    grid-template-columns: 1fr;
  }
  .wizard-welcome-hero {
    padding: 36px 20px 28px;
  }
  .wizard-welcome-logo {
    font-size: 30px;
  }
  .wizard-welcome-body {
    padding: 22px 22px 24px;
  }
  .wizard-welcome-actions {
    flex-direction: column-reverse;
  }
  .wizard-welcome-actions .btn {
    width: 100%;
  }
}

/* v1.3.159: Confetti-Animation für Wizard-Erfolgs-Feier */
@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(var(--rot-end, 360deg));
    opacity: 0;
  }
}

/* v1.3.160: Inaktive Property-Karten visuell ausblenden */
.prop-card--inactive {
  opacity: 0.65;
  position: relative;
}
.prop-card--inactive::after {
  content: 'INAKTIV';
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.7);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}
.prop-card--inactive .prop-card__img {
  filter: grayscale(0.6);
}

/* v1.3.162: Login-Footer mit Rechts-Links */
/* v1.3.203: Farben für hellen Hintergrund umgestellt — vorher unsichtbar */
.login-card__legal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 14px 16px 10px;
  font-size: 12px;
  color: #6a7677;
  font-weight: 500;
}
.login-card__legal a {
  color: #0c5a49;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.login-card__legal a:hover {
  color: #c9a961;
  text-decoration: underline;
}
.login-card__legal span {
  color: #c0c8c8;
}

/* ============================================================
   v1.3.163: Einladungs-Editor mit Live-Vorschau
   ============================================================ */
#invitation-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: rgba(7, 41, 33, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 20px;
}
.invite-edit-shell {
  width: 100%;
  max-width: 1400px;
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(7, 41, 33, 0.45);
}
.invite-edit-bar {
  background: linear-gradient(135deg, #0c5a49 0%, #1a6657 100%);
  color: #ffffff;
  padding: 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.invite-edit-bar__title {
  font-size: 15px;
  font-weight: 700;
}
.invite-edit-bar__sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
}
.invite-edit-bar__actions {
  display: flex;
  gap: 8px;
}
.invite-edit-bar__actions .btn--ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
.invite-edit-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(340px, 480px) 1fr;
  overflow: hidden;
}
.invite-edit-form {
  overflow-y: auto;
  padding: 22px;
  background: #faf6ef;
  border-right: 1px solid rgba(15, 61, 46, 0.1);
}
.invite-edit-spinner {
  padding: 40px;
  text-align: center;
  color: #6b7168;
}
.invite-edit-preview {
  background: #e8eae6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.invite-preview-toolbar {
  padding: 10px 16px;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 61, 46, 0.1);
  display: flex;
  gap: 8px;
  align-items: center;
}
.invite-preview-toolbar .select--xs,
.invite-preview-toolbar .input--xs {
  font-size: 12px;
  padding: 4px 8px;
  height: 30px;
  border-radius: 6px;
}
#invite-preview-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #ffffff;
}
.invite-section {
  background: #ffffff;
  border: 1px solid rgba(15, 61, 46, 0.1);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.invite-section > summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 13px;
  list-style: none;
  background: rgba(12, 90, 73, 0.04);
  user-select: none;
}
.invite-section > summary::-webkit-details-marker { display: none; }
.invite-section > summary::after {
  content: '▾';
  float: right;
  color: #6b7168;
  transition: transform 0.2s;
}
.invite-section[open] > summary::after {
  transform: rotate(180deg);
}
.invite-section > summary + * {
  padding: 14px 16px;
}
.invite-section > summary + *:not(:last-child) {
  padding-bottom: 0;
}
.invite-section .field {
  margin-bottom: 12px;
}
.invite-section .field:last-child {
  margin-bottom: 14px;
}
.invite-feature-row {
  border: 1px solid rgba(15, 61, 46, 0.12);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: #faf6ef;
}
.invite-feature-row__top {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.invite-feature-icon {
  width: 50px !important;
  text-align: center;
  flex: 0 0 50px;
}
.invite-image-picker {
  background: #faf6ef;
  border: 1px solid rgba(15, 61, 46, 0.12);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}
.invite-image-picker__current {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid rgba(15, 61, 46, 0.08);
}
.invite-image-picker__current img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 180px;
  object-fit: cover;
}
.invite-image-picker__empty {
  padding: 36px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
  background: #f1f5f9;
}
.invite-image-picker__library {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.invite-image-picker__item {
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.15s;
}
.invite-image-picker__item.is-active {
  border-color: #c9a961;
  box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.2);
}
.invite-image-picker__item:hover {
  border-color: #0c5a49;
}
.invite-image-picker__item img {
  width: 100%;
  height: 60px;
  object-fit: cover;
  display: block;
}
.invite-image-picker__item span {
  display: block;
  padding: 4px;
  font-size: 10px;
  color: #6b7168;
  text-align: center;
  background: #fff;
}
.invite-image-picker__actions {
  display: flex;
  gap: 6px;
}
.invite-image-picker__actions .btn {
  flex: 1;
}

@media (max-width: 900px) {
  .invite-edit-body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .invite-edit-form {
    border-right: 0;
    border-bottom: 1px solid rgba(15, 61, 46, 0.1);
  }
}

/* ============================================================
   v1.3.168: Screenshot-Import (Tesseract.js OCR)
   ============================================================ */
#screenshot-import-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: rgba(7, 41, 33, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 20px;
}
.screenshot-import-shell {
  width: 100%;
  max-width: 900px;
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(7, 41, 33, 0.45);
}
.screenshot-import-bar {
  background: linear-gradient(135deg, #0c5a49 0%, #1a6657 100%);
  color: #ffffff;
  padding: 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.screenshot-import-bar__title {
  font-size: 15px;
  font-weight: 700;
}
.screenshot-import-bar__sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}
.screenshot-import-bar .btn--ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
.screenshot-import-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: #faf6ef;
}
.screenshot-dropzone {
  border: 2.5px dashed rgba(12, 90, 73, 0.3);
  border-radius: 14px;
  padding: 50px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #ffffff;
}
.screenshot-dropzone:hover,
.screenshot-dropzone.is-drag {
  border-color: #0c5a49;
  background: rgba(12, 90, 73, 0.04);
  transform: scale(1.01);
}
.screenshot-dropzone__icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.screenshot-dropzone__title {
  font-size: 17px;
  font-weight: 700;
  color: #0c5a49;
  margin-bottom: 6px;
}
.screenshot-dropzone__sub {
  font-size: 13px;
  color: #6b7168;
  line-height: 1.6;
}
.screenshot-tips {
  margin-top: 20px;
  background: #ffffff;
  border-radius: 10px;
  padding: 0;
  border: 1px solid rgba(12, 90, 73, 0.08);
}
.screenshot-tips summary {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  color: #0c5a49;
  font-size: 13px;
}
.screenshot-tips ul {
  padding: 0 30px 16px 30px;
  margin: 0;
  line-height: 1.7;
  color: #444;
}
.screenshot-tips ul li {
  margin-bottom: 4px;
}
.screenshot-progress {
  text-align: center;
  padding: 30px 20px;
}
.screenshot-progress__spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  border: 4px solid rgba(12, 90, 73, 0.15);
  border-top-color: #0c5a49;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.screenshot-progress__text {
  font-size: 15px;
  font-weight: 700;
  color: #0c5a49;
  margin-bottom: 6px;
}
.screenshot-progress__sub {
  font-size: 12px;
  color: #6b7168;
  margin-bottom: 18px;
}
.screenshot-progress__bar {
  max-width: 360px;
  height: 6px;
  background: rgba(12, 90, 73, 0.1);
  border-radius: 3px;
  margin: 0 auto 24px;
  overflow: hidden;
}
.screenshot-progress__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0c5a49 0%, #c9a961 100%);
  width: 0%;
  transition: width 0.3s;
}
.screenshot-preview-thumbs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 600px;
  margin: 0 auto;
}
.screenshot-preview-thumb {
  width: 90px;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(12, 90, 73, 0.1);
  display: flex;
  flex-direction: column;
}
.screenshot-preview-thumb img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}
.screenshot-preview-thumb__label {
  font-size: 10px;
  text-align: center;
  padding: 4px 0;
  color: #6b7168;
  font-weight: 600;
  background: rgba(12, 90, 73, 0.04);
}
.screenshot-preview {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
}
.screenshot-cancel-warn {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  color: #92400e;
  margin-bottom: 18px;
  line-height: 1.5;
}
.screenshot-source-hint {
  background: rgba(12, 90, 73, 0.05);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 18px;
  color: #1a1a1a;
}
.conf-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.conf-badge--high {
  background: #dcfce7;
  color: #166534;
}
.conf-badge--mid {
  background: #fef3c7;
  color: #92400e;
}
.screenshot-rawtext {
  margin-top: 20px;
  background: #faf6ef;
  border-radius: 8px;
  border: 1px solid rgba(12, 90, 73, 0.1);
}
.screenshot-rawtext summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 12px;
  color: #6b7168;
}
.screenshot-rawtext pre {
  background: #1a1a1a;
  color: #c9a961;
  padding: 16px;
  border-radius: 0 0 8px 8px;
  font-size: 10px;
  max-height: 300px;
  overflow: auto;
  white-space: pre-wrap;
  margin: 0;
}
.screenshot-preview-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(12, 90, 73, 0.08);
}

@media (max-width: 680px) {
  .screenshot-import-shell { max-width: 100%; }
  .screenshot-dropzone { padding: 30px 14px; }
  .screenshot-dropzone__icon { font-size: 36px; }
}

/* ============================================================
   v1.3.169: Screenshot-Anreichern (Vision-AI)
   ============================================================ */
.entry-type-card--ai {
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.05) 0%, rgba(12, 90, 73, 0.05) 100%) !important;
  border-color: rgba(201, 169, 97, 0.3) !important;
  position: relative;
}
.entry-type-card--ai::before {
  content: 'KI';
  position: absolute;
  top: 6px;
  right: 6px;
  background: #c9a961;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.entry-type-card--ai:hover {
  border-color: #c9a961 !important;
  transform: translateY(-2px);
}
.entry-type-card__sub {
  font-size: 11px;
  color: #6b7168;
  margin-top: 2px;
}

#screenshot-enrich-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: rgba(7, 41, 33, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 20px;
}
.se-shell {
  width: 100%;
  max-width: 800px;
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(7, 41, 33, 0.45);
}
.se-bar {
  background: linear-gradient(135deg, #0c5a49 0%, #1a6657 100%);
  color: #ffffff;
  padding: 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.se-bar__title { font-size: 15px; font-weight: 700; }
.se-bar__sub { font-size: 11px; color: rgba(255, 255, 255, 0.7); margin-top: 2px; }
.se-bar .btn--ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
.se-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  background: #faf6ef;
}
.se-dropzone {
  border: 2.5px dashed rgba(12, 90, 73, 0.3);
  border-radius: 14px;
  padding: 50px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #ffffff;
}
.se-dropzone:hover, .se-dropzone.is-drag {
  border-color: #0c5a49;
  background: rgba(12, 90, 73, 0.04);
}
.se-dropzone__icon { font-size: 48px; margin-bottom: 12px; }
.se-dropzone__title { font-size: 17px; font-weight: 700; color: #0c5a49; margin-bottom: 6px; }
.se-dropzone__sub { font-size: 13px; color: #6b7168; line-height: 1.6; }
.se-dropzone__sub a { color: #0c5a49; font-weight: 600; }
.se-tips {
  margin-top: 18px;
  padding: 12px 16px;
  background: rgba(12, 90, 73, 0.05);
  border-radius: 8px;
  font-size: 12px;
  color: #444;
  line-height: 1.5;
}
.se-progress { text-align: center; padding: 30px 20px; }
.se-spinner {
  width: 48px; height: 48px; margin: 0 auto 18px;
  border: 4px solid rgba(12, 90, 73, 0.15);
  border-top-color: #0c5a49;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.se-progress__text { font-size: 15px; font-weight: 700; color: #0c5a49; margin-bottom: 6px; }
.se-progress__sub { font-size: 12px; color: #6b7168; margin-bottom: 18px; }
.se-thumbs {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  max-width: 500px; margin: 12px auto 0;
}
.se-thumb {
  width: 80px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(12, 90, 73, 0.1);
}
.se-thumb img { width: 100%; height: 90px; object-fit: cover; display: block; }
.se-thumb span {
  display: block; font-size: 10px; text-align: center;
  padding: 4px 0; color: #6b7168; background: rgba(12, 90, 73, 0.04);
}

.se-cancel-banner {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  color: #92400e;
  margin-bottom: 16px;
  line-height: 1.5;
}
.se-fields-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
  border: 1px solid rgba(12, 90, 73, 0.08);
}
.se-fields-card__title {
  font-size: 13px;
  font-weight: 700;
  color: #0c5a49;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.se-channel-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(12, 90, 73, 0.08);
  color: #0c5a49;
}
.se-channel-tag--bcom { background: rgba(0, 53, 128, 0.12); color: #003580; }
.se-channel-tag--abnb { background: rgba(255, 90, 95, 0.12); color: #c0394d; }
.se-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.se-field {
  background: #faf6ef;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
}
.se-field__label {
  display: block;
  font-size: 10px;
  color: #6b7168;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  font-weight: 600;
}
.se-field code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.se-guestnote {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(201, 169, 97, 0.08);
  border-left: 3px solid #c9a961;
  border-radius: 4px;
  font-size: 13px;
}
.se-match-result h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #0c5a49;
}
.se-warn {
  background: #fef3c7;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: #92400e;
  margin-bottom: 12px;
}
.se-candidates {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.se-candidate {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid rgba(12, 90, 73, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.se-candidate:hover { border-color: rgba(12, 90, 73, 0.3); }
.se-candidate input[type="radio"] { margin-top: 3px; }
.se-candidate:has(input:checked) {
  border-color: #c9a961;
  background: rgba(201, 169, 97, 0.06);
}
.se-candidate__body { flex: 1; }
.se-candidate--none .se-candidate__body strong { color: #6b7168; }
.se-candidate-card.is-primary {
  background: rgba(12, 90, 73, 0.04);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(12, 90, 73, 0.1);
  margin-bottom: 16px;
}
.se-candidate-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.se-candidate-card__dates {
  font-size: 13px;
  color: #444;
  margin-bottom: 4px;
}
.se-candidate-card__meta {
  font-size: 12px;
  color: #555;
}
.se-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(12, 90, 73, 0.08);
}
.se-error {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}
.se-error h3 { color: #dc2626; margin: 0 0 10px; }
.se-error__hint {
  margin-top: 18px;
  padding: 16px;
  background: rgba(12, 90, 73, 0.04);
  border-radius: 10px;
  text-align: left;
  font-size: 13px;
  line-height: 1.6;
}
.se-error__hint ol {
  margin: 8px 0;
  padding-left: 22px;
}
.se-error__hint li { margin-bottom: 4px; }
.se-error__hint code {
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

@media (max-width: 680px) {
  .se-shell { max-width: 100%; }
  .se-dropzone { padding: 30px 14px; }
  .se-fields-grid { grid-template-columns: 1fr 1fr; }
}

/* v1.3.170: DSGVO-Hinweis im Screenshot-Upload */
.se-privacy-notice {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.se-privacy-notice__icon {
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
}
.se-privacy-notice__body {
  font-size: 12px;
  line-height: 1.55;
  color: #1e40af;
}
.se-privacy-notice__body a {
  display: inline-block;
  margin-top: 6px;
  color: #0c5a49;
  font-weight: 600;
  text-decoration: none;
}
.se-privacy-notice__body a:hover {
  text-decoration: underline;
}

/* ============================================================
   v1.3.173: Share-Setup-Seite
   ============================================================ */
.share-setup {
  max-width: 760px;
  margin: 0 auto;
}
.share-setup__header h2 {
  color: #0c5a49;
  margin: 0 0 6px;
}
.share-setup__token-card {
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.08) 0%, rgba(12, 90, 73, 0.05) 100%);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 20px 0;
}
.share-setup__token-label {
  font-size: 12px;
  font-weight: 700;
  color: #0c5a49;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.share-setup__token {
  display: block;
  background: #1a1a1a;
  color: #c9a961;
  padding: 12px 14px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 12px;
  word-break: break-all;
  margin-bottom: 12px;
}
.share-setup__token-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.share-step-block {
  background: #fff;
  border: 1px solid rgba(12, 90, 73, 0.08);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 18px;
}
.share-step-block h3 {
  margin: 0 0 8px;
  color: #0c5a49;
}
.share-step-list {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 16px 0;
}
.share-step-list > li {
  counter-increment: step;
  padding: 12px 0 12px 44px;
  position: relative;
  border-bottom: 1px solid rgba(12, 90, 73, 0.06);
  line-height: 1.6;
  font-size: 14px;
}
.share-step-list > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 14px;
  width: 30px;
  height: 30px;
  background: #0c5a49;
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-step-list > li:last-child {
  border-bottom: none;
}
.share-step-code {
  display: inline-block;
  background: #1a1a1a;
  color: #c9a961;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 11px;
  margin: 4px 4px 4px 0;
  word-break: break-all;
}
.share-step-fields {
  margin: 8px 0;
  padding: 10px 14px;
  background: rgba(12, 90, 73, 0.04);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.7;
}
.share-step-fields code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.share-setup__test {
  background: #dcfce7;
  border-left: 4px solid #166534;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  color: #166534;
  margin-top: 14px;
}
.share-setup__alt {
  margin-top: 18px;
  border-top: 1px dashed rgba(12, 90, 73, 0.15);
  padding-top: 14px;
}
.share-setup__alt summary {
  cursor: pointer;
  color: #0c5a49;
  font-weight: 600;
  font-size: 14px;
}
.share-setup__queue {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(12, 90, 73, 0.1);
}
.share-setup__queue h3 {
  color: #0c5a49;
  margin: 0 0 6px;
}
.share-queue-item {
  background: #fff;
  border: 1px solid rgba(12, 90, 73, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.share-queue-item__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.share-queue-item__body {
  font-size: 13px;
  color: #555;
  margin-bottom: 4px;
}
.share-queue-item__meta {
  font-size: 12px;
  color: #6b7168;
}
.btn--xs {
  font-size: 11px;
  padding: 4px 10px;
}

/* ============================================================
   v1.3.174: Vor-Ort-Zusatzposten + tatsächliche Belegung
   ============================================================ */
.booking-step--onsite {
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.04) 0%, rgba(12, 90, 73, 0.03) 100%);
  border-radius: 10px;
  padding: 14px;
}
.onsite-actual {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(12, 90, 73, 0.15);
}
.onsite-actual__fields.is-hidden {
  display: none;
}
.onsite-items-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.onsite-items-section__header h4 {
  margin: 0;
  font-size: 14px;
  color: #0c5a49;
}
.onsite-items-empty {
  background: rgba(12, 90, 73, 0.04);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  color: #6b7168;
  font-size: 13px;
}
.onsite-item {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(12, 90, 73, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
}
.onsite-item__icon {
  font-size: 22px;
  text-align: center;
}
.onsite-item__title {
  font-size: 14px;
  margin-bottom: 2px;
}
.onsite-item__meta {
  font-size: 11px;
  color: #6b7168;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.onsite-item__meta .badge {
  font-size: 9px;
  padding: 1px 5px;
  margin-left: 2px;
}
.onsite-item__notes {
  font-size: 12px;
  color: #555;
  font-style: italic;
  margin-top: 4px;
}
.onsite-item__amount {
  font-weight: 700;
  font-size: 15px;
  color: #0c5a49;
  white-space: nowrap;
}
.onsite-item__actions {
  display: flex;
  gap: 4px;
}
.onsite-items-summary {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(12, 90, 73, 0.06);
  border-radius: 6px;
}
.onsite-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.onsite-summary-row + .onsite-summary-row {
  margin-top: 4px;
}

/* Modal */
#onsite-item-overlay {
  position: fixed;
  inset: 0;
  z-index: 10600;
  background: rgba(7, 41, 33, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 20px;
}
.onsite-modal-shell {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(7, 41, 33, 0.45);
}
.onsite-modal-head {
  background: linear-gradient(135deg, #0c5a49 0%, #1a6657 100%);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.onsite-modal-head h3 {
  margin: 0;
  font-size: 15px;
}
.onsite-modal-head .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.onsite-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.onsite-quick-presets {
  padding: 12px;
  background: rgba(12, 90, 73, 0.04);
  border-radius: 8px;
}
.onsite-quick-presets .btn {
  margin-right: 4px;
  margin-bottom: 4px;
  font-size: 12px;
}
.onsite-modal-options {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(12, 90, 73, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.onsite-modal-foot {
  padding: 14px 20px;
  border-top: 1px solid rgba(12, 90, 73, 0.08);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
@media (max-width: 680px) {
  .onsite-item {
    grid-template-columns: 30px 1fr;
    grid-template-areas:
      "icon main"
      "amount amount"
      "actions actions";
  }
  .onsite-item__icon { grid-area: icon; }
  .onsite-item__main { grid-area: main; }
  .onsite-item__amount { grid-area: amount; text-align: right; }
  .onsite-item__actions { grid-area: actions; justify-content: flex-end; }
}

/* ============================================================
   v1.3.175: Share-Setup mit zwei Methoden
   ============================================================ */
.share-setup__intro {
  margin-bottom: 24px;
}
.share-setup__intro h2 {
  color: #0c5a49;
  margin: 0 0 8px;
}
.share-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.share-method-card {
  background: #fff;
  border: 2px solid rgba(12, 90, 73, 0.1);
  border-radius: 12px;
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  font-family: inherit;
}
.share-method-card:hover {
  border-color: rgba(12, 90, 73, 0.3);
  transform: translateY(-2px);
}
.share-method-card--active {
  border-color: #c9a961;
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.04) 0%, rgba(12, 90, 73, 0.03) 100%);
  box-shadow: 0 4px 14px rgba(201, 169, 97, 0.15);
}
.share-method-card__badge {
  position: absolute;
  top: 10px;
  right: 12px;
  background: #c9a961;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}
.share-method-card__icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.share-method-card h3 {
  margin: 0 0 6px;
  color: #0c5a49;
  font-size: 16px;
}
.share-method-card p {
  margin: 0;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}
.share-method-content {
  background: #fff;
  border: 1px solid rgba(12, 90, 73, 0.1);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 24px;
}
.share-info-banner {
  background: rgba(59, 130, 246, 0.06);
  border-left: 4px solid #3b82f6;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #1e40af;
  margin-bottom: 20px;
}
.share-warn-banner {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  color: #92400e;
  margin-bottom: 18px;
  line-height: 1.5;
}
.share-address-card {
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.08) 0%, rgba(12, 90, 73, 0.05) 100%);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}
.share-address-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.share-address-code {
  flex: 1;
  background: #1a1a1a;
  color: #c9a961;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 13px;
  word-break: break-all;
  min-width: 200px;
}
.share-address-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.share-walkthrough h3 {
  color: #0c5a49;
  margin: 0 0 14px;
}
.share-step-fancy {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 12px 0;
  align-items: start;
  border-bottom: 1px solid rgba(12, 90, 73, 0.06);
}
.share-step-fancy:last-child {
  border-bottom: none;
}
.share-step-fancy__num {
  width: 36px;
  height: 36px;
  background: #0c5a49;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
}
.share-step-fancy--final .share-step-fancy__num {
  background: #16a34a;
  font-size: 18px;
}
.share-step-fancy__body {
  font-size: 14px;
  line-height: 1.55;
  padding-top: 6px;
}
.share-step-fancy__body p {
  margin: 4px 0 0;
}
.share-icon-hint {
  display: inline-block;
  background: rgba(12, 90, 73, 0.08);
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 13px;
  margin-left: 4px;
}
.share-step-copy {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.share-step-code {
  display: inline-block;
  background: #1a1a1a;
  color: #c9a961;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 11px;
  word-break: break-all;
  flex: 1;
  min-width: 200px;
}
.share-step-code--inline {
  display: inline-block;
  flex: 0 1 auto;
  margin-right: 6px;
}
.share-json-field {
  background: rgba(12, 90, 73, 0.04);
  border-radius: 8px;
  padding: 12px;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.7;
}
.share-json-field > div {
  margin-bottom: 4px;
}
.share-json-field code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.share-filter-tips {
  margin: 18px 0;
  background: rgba(12, 90, 73, 0.04);
  border-radius: 10px;
  padding: 12px 16px;
}
.share-filter-tips summary {
  cursor: pointer;
  font-weight: 600;
  color: #0c5a49;
  font-size: 13px;
}
.share-filter-tab {
  background: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 10px;
}
.share-filter-tab h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #0c5a49;
}
.share-filter-tab ol {
  margin: 0;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.6;
}
.share-filter-tab ol li {
  margin-bottom: 4px;
}
.share-filter-tab code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.share-shortcut-help {
  margin: 14px 0;
  background: rgba(12, 90, 73, 0.04);
  border-radius: 8px;
  padding: 10px 14px;
}
.share-shortcut-help summary {
  cursor: pointer;
  font-weight: 600;
  color: #0c5a49;
  font-size: 13px;
}
.share-test-banner {
  background: #dcfce7;
  border-left: 4px solid #16a34a;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  color: #166534;
  margin-top: 20px;
  line-height: 1.5;
}
.empty-state--small {
  padding: 24px 16px;
}

/* ============================================================
   v1.3.177: Brand-SVG-Icons (statt Emojis)
   Alle Icons sind currentColor-basiert, brand-konsistent
   ============================================================ */
.bp-i {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  margin-right: 0.35em;
  flex-shrink: 0;
}
.bp-i:last-child { margin-right: 0; }

/* Größen-Varianten */
.bp-i--sm { width: 0.9em; height: 0.9em; }
.bp-i--lg { width: 1.4em; height: 1.4em; }
.bp-i--xl { width: 2em; height: 2em; }

/* Farb-Varianten */
.bp-i--success { color: #16a34a; }
.bp-i--warn { color: #f59e0b; }
.bp-i--danger { color: #dc2626; }
.bp-i--brand { color: #0c5a49; }
.bp-i--gold { color: #c9a961; }

/* Icons — als data-URI SVGs mit Brand-Stil (1.8 strokeWidth, lucide-inspiriert) */
.bp-i--camera {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7a2 2 0 0 1 2-2h2l1.5-2h7L17 5h2a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><circle cx='12' cy='13' r='4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7a2 2 0 0 1 2-2h2l1.5-2h7L17 5h2a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><circle cx='12' cy='13' r='4'/></svg>");
}
.bp-i--home {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9 12 2l9 7v11a2 2 0 0 1-2 2h-4v-7H10v7H5a2 2 0 0 1-2-2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9 12 2l9 7v11a2 2 0 0 1-2 2h-4v-7H10v7H5a2 2 0 0 1-2-2z'/></svg>");
}
.bp-i--robot {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='12' rx='2'/><circle cx='9' cy='14' r='1.5' fill='%23000'/><circle cx='15' cy='14' r='1.5' fill='%23000'/><path d='M12 4v4M9 4h6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='12' rx='2'/><circle cx='9' cy='14' r='1.5' fill='%23000'/><circle cx='15' cy='14' r='1.5' fill='%23000'/><path d='M12 4v4M9 4h6'/></svg>");
}
.bp-i--check {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5L20 7'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5L20 7'/></svg>");
}
.bp-i--warning {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
  color: #f59e0b;
}
.bp-i--info {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
}
.bp-i--mail {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>");
}
.bp-i--plus {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
}
.bp-i--calendar {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18'/><path d='M8 3v4M16 3v4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18'/><path d='M8 3v4M16 3v4'/></svg>");
}
.bp-i--share {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/><polyline points='16 6 12 2 8 6'/><line x1='12' y1='2' x2='12' y2='15'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/><polyline points='16 6 12 2 8 6'/><line x1='12' y1='2' x2='12' y2='15'/></svg>");
}
.bp-i--lightbulb {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.2 1 2v.3h6v-.3c0-.8.4-1.5 1-2A7 7 0 0 0 12 2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.2 1 2v.3h6v-.3c0-.8.4-1.5 1-2A7 7 0 0 0 12 2z'/></svg>");
  color: #c9a961;
}
.bp-i--download {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
}
.bp-i--apple {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 7C9 4 5 5 4 8c-1 4 0 9 4 11 2 1 4 0 5-1 1 1 3 2 5 1 4-2 5-7 4-11-1-3-5-4-8-1z'/><path d='M12 7c0-2 1-4 3-5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 7C9 4 5 5 4 8c-1 4 0 9 4 11 2 1 4 0 5-1 1 1 3 2 5 1 4-2 5-7 4-11-1-3-5-4-8-1z'/><path d='M12 7c0-2 1-4 3-5'/></svg>");
}
.bp-i--tablet {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='2' width='16' height='20' rx='2'/><line x1='12' y1='18' x2='12.01' y2='18'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='2' width='16' height='20' rx='2'/><line x1='12' y1='18' x2='12.01' y2='18'/></svg>");
}
.bp-i--star {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><path d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><path d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/></svg>");
  color: #c9a961;
}
.bp-i--receipt {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 2v20l3-2 3 2 3-2 3 2 3-2 1 2V2'/><path d='M8 7h8M8 11h8M8 15h6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 2v20l3-2 3 2 3-2 3 2 3-2 1 2V2'/><path d='M8 7h8M8 11h8M8 15h6'/></svg>");
}
.bp-i--money {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='6' width='20' height='12' rx='2'/><circle cx='12' cy='12' r='3'/><path d='M6 12h.01M18 12h.01'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='6' width='20' height='12' rx='2'/><circle cx='12' cy='12' r='3'/><path d='M6 12h.01M18 12h.01'/></svg>");
}
.bp-i--creditcard {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>");
}
.bp-i--bank {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18M5 21V10M19 21V10M3 10l9-6 9 6'/><path d='M9 21v-6h6v6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18M5 21V10M19 21V10M3 10l9-6 9 6'/><path d='M9 21v-6h6v6'/></svg>");
}
.bp-i--child {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='6' r='3'/><path d='M9 11h6l1 4-4 6-4-6z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='6' r='3'/><path d='M9 11h6l1 4-4 6-4-6z'/></svg>");
}
.bp-i--paw {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='4' r='2'/><circle cx='18' cy='8' r='2'/><circle cx='20' cy='16' r='2'/><circle cx='7' cy='9' r='2'/><path d='M5 20q3-4 7-4t7 4q0 2-3 2t-4-2q-1 2-4 2t-3-2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='4' r='2'/><circle cx='18' cy='8' r='2'/><circle cx='20' cy='16' r='2'/><circle cx='7' cy='9' r='2'/><path d='M5 20q3-4 7-4t7 4q0 2-3 2t-4-2q-1 2-4 2t-3-2z'/></svg>");
}
.bp-i--laundry {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='2'/><circle cx='12' cy='13' r='5'/><circle cx='12' cy='13' r='2'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='2'/><circle cx='12' cy='13' r='5'/><circle cx='12' cy='13' r='2'/></svg>");
}
.bp-i--bell {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M13.73 21a2 2 0 0 1-3.46 0'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M13.73 21a2 2 0 0 1-3.46 0'/></svg>");
}
.bp-i--cleaning {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11V6a3 3 0 0 1 6 0v5'/><rect x='6' y='11' width='12' height='11' rx='2'/><path d='M10 16h4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11V6a3 3 0 0 1 6 0v5'/><rect x='6' y='11' width='12' height='11' rx='2'/><path d='M10 16h4'/></svg>");
}
.bp-i--ban {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M5.6 5.6l12.8 12.8'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M5.6 5.6l12.8 12.8'/></svg>");
}
.bp-i--lock {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
}
.bp-i--edit {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z'/></svg>");
}
.bp-i--trash {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><line x1='10' y1='11' x2='10' y2='17'/><line x1='14' y1='11' x2='14' y2='17'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><line x1='10' y1='11' x2='10' y2='17'/><line x1='14' y1='11' x2='14' y2='17'/></svg>");
}
.bp-i--user {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
.bp-i--bed {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4v16M22 8v12M2 12h20M6 12V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4v16M22 8v12M2 12h20M6 12V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4'/></svg>");
}

/* ============================================================================
   v1.3.182 — Nur Einzel-Ansicht: Pill-Zahl schwarz,
   Wochenende und Feiertage dunkelrot.
   ============================================================================ */

/* Wochenende (Sa/So): Datumszahl dunkelrot */
.calendar-new--single .cal-cell--weekend:not(.cal-cell--booked):not(.cal-cell--turnover) .cal-cell__top,
.calendar-new--single .cal-cell--weekend:not(.cal-cell--booked):not(.cal-cell--turnover) .cal-cell__top span {
  color: #991b1b !important;
  font-weight: 700;
}

/* Feiertag: gleiches Rot wie Wochenende */
.calendar-new--single .cal-cell--holiday:not(.cal-cell--booked):not(.cal-cell--turnover) .cal-cell__top,
.calendar-new--single .cal-cell--holiday:not(.cal-cell--booked):not(.cal-cell--turnover) .cal-cell__top span {
  color: #991b1b !important;
  font-weight: 700;
}

/* Auch die Spaltenüberschriften Sa/So in der Einzel-Ansicht dunkelrot
   (Konsistenz mit den Tageszahlen darunter) */
.calendar-new--single .cal-headcell--weekend,
.calendar-new--single .cal-headcell--holiday {
  color: #991b1b !important;
}


/* ============================================================================
   v1.3.189 — Original-Tageszahl in Buchungs-Zellen wieder sichtbar machen.
   Die Tageszahl wird schon im HTML gerendert (in .cal-cell__top), sie wurde
   bisher nur von der Buchungs-Markierung (::before mit z-index:0) überdeckt
   oder via display:none ausgeblendet. Hier nur den z-index anheben — die
   Original-Schriftgröße, Schriftart, Farbe bleibt erhalten.
   ============================================================================ */
.calendar-new .cal-cell--booked .cal-cell__top,
.calendar-new .cal-cell--turnover .cal-cell__top,
.calendar-new .cal-cell--split-turnover .cal-cell__top {
  display: flex !important;
  position: relative;
  z-index: 4;
  pointer-events: none;
  background: transparent;
}

/* ============================================================================

/* ============================================================================
   v1.3.191 — Klare Regel pro Zell-Typ:
   - Anreisetag (pos-start): DUNKEL, kein Glow (linke Hälfte weiß, dort lesbar)
   - Abreisetag (turnover):  HELL/weiß, kein Glow (linke Hälfte blau, dort lesbar)
   - Split-Turnover:         HELL/weiß, kein Glow (mehr blau als weiß)
   Multi-Ansicht zusätzlich: Tageszahl absolut oben-links anheften.
   ============================================================================ */

/* Anreisetag: dunkel ohne Glow */
.calendar-new .cal-cell--booked.cal-cell--pos-start .cal-cell__top,
.calendar-new .cal-cell--booked.cal-cell--pos-start .cal-cell__top span {
  color: #1f2937 !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}

/* Abreisetag (turnover): weiß ohne Glow */
.calendar-new .cal-cell--turnover .cal-cell__top,
.calendar-new .cal-cell--turnover .cal-cell__top span {
  color: #ffffff !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}

/* Split-Turnover (Abreise + neue Anreise am selben Tag): weiß ohne Glow */
.calendar-new .cal-cell--split-turnover .cal-cell__top,
.calendar-new .cal-cell--split-turnover .cal-cell__top span {
  color: #ffffff !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}

/* Multi-Ansicht: Tageszahl absolut oben-links für alle Buchungs-Zell-Typen
   (sonst rutscht sie auf Anreisetagen durch das label-start-Overlay nach unten) */
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--pos-start .cal-cell__top,
.calendar-new:not(.calendar-new--single) .cal-cell--turnover .cal-cell__top,
.calendar-new:not(.calendar-new--single) .cal-cell--split-turnover .cal-cell__top {
  position: absolute !important;
  top: 2px !important;
  left: 4px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 35 !important;
  pointer-events: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* ============================================================================
   v1.3.192 — Multi-Ansicht: Buchungs-Text bricht innerhalb der Markierung um.
   Bisher war white-space:nowrap mit fester Breite — Text lief am Rand raus
   oder wurde mit ... abgeschnitten. Jetzt: normale Wrapping innerhalb der
   2-Tage-Breite, kleinere Schrift damit's reinpasst.
   ============================================================================ */
.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest,
.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest-meta {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-overflow: clip !important;
  width: calc((var(--cal-day-width, 74px) * 2) - 16px) !important;
  max-width: calc((var(--cal-day-width, 74px) * 2) - 16px) !important;
  padding-right: 4px !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest {
  font-size: 10px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

.calendar-new:not(.calendar-new--single) .cal-cell--label-start .cal-cell__guest-meta {
  font-size: 8px !important;
  line-height: 1.15 !important;
}

/* ============================================================================
   v1.3.193 — Bottom-Tabs in PWA: bis ganz zur Bildschirmkante.
   Auf iPhone war unter der Tab-Bar ein leerer cream-Bereich. Ursache:
   die Tab-Bar saß zwar bei bottom:0, aber das Padding ging nur bis zur
   safe-area-Höhe. Der Bereich darunter zeigte den Body-Hintergrund.
   Fix: Tab-Bar bekommt einen erweiterten Hintergrund der bis unter den
   Home-Indicator reicht.
   v1.3.194 — Safe-area-Padding zu groß: jetzt nur 60% statt 100%, damit
   die Tab-Bar nicht so hoch wirkt. Home-Indicator ist nur ~5px hoch.
   ============================================================================ */
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .bottom-tabs {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin-bottom: 0 !important;
    /* v1.3.199: normale Polsterung wie SanEasyOrder, safe-area ist 0 dank
       status-bar-style:default + display:fullscreen */
    padding-top: 6px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: saturate(160%) blur(12px) !important;
    backdrop-filter: saturate(160%) blur(12px) !important;
  }
  .bottom-tabs__item {
    padding-bottom: 0 !important;
    min-height: 48px !important;
  }
  .bottom-tabs::after {
    display: none !important;
  }
}

@media all and (display-mode: standalone) {
  .bottom-tabs {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
  }
}

/* ============================================================================
   v1.3.198 — Body-Background unten an Tab-Bar angleichen.
   Die Tab-Bar hat var(--bp-cream-card) #faf6ef, der Body unten hat
   var(--bp-cream-bg) #f5f0e8 — leichter Farbunterschied erzeugt sichtbare
   Trennlinie unter der Bar. Fix: body bekommt einen Gradient der unten
   in die Tab-Bar-Farbe übergeht.
   Außerdem: theme-color in iOS bestimmt was unter `bottom: 0` gerendert
   wird — auch das auf cream-card setzen.
   ============================================================================ */
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  html, body {
    background: var(--bp-cream-card, #faf6ef) !important;
  }
}
@media all and (display-mode: standalone) {
  html, body {
    background: var(--bp-cream-card, #faf6ef) !important;
  }
}

/* ============================================================
   v1.3.203 — Operator-Subdomain (operator.booking-pilot.cloud)
   Marketing-Elemente ausblenden, klares Admin-Erlebnis
   ============================================================ */
html.is-operator-host .login-divider,
html.is-operator-host .login-register-btn,
body.is-operator-host .login-divider,
body.is-operator-host .login-register-btn {
  display: none !important;
}

/* Marketing-Hero rechts neben Login ausblenden — nur Login-Card */
html.is-operator-host .login-hero,
body.is-operator-host .login-hero {
  display: none !important;
}

/* Login-Container zentriert ohne Hero */
html.is-operator-host .login-page,
body.is-operator-host .login-page {
  grid-template-columns: 1fr !important;
  justify-content: center;
}

html.is-operator-host .login-card,
body.is-operator-host .login-card {
  max-width: 480px;
  margin: 0 auto;
}

/* Subtle Operator-Akzent: gold-Streifen am Login-Card-Top */
html.is-operator-host .login-card__head,
body.is-operator-host .login-card__head {
  border-top: 3px solid #c9a961;
}

/* Footer-Texte für Operator anpassen via Pseudo-Content */
html.is-operator-host .login-card__foot,
body.is-operator-host .login-card__foot {
  color: #6a7677;
  font-size: 12px;
}