/* ============================================================
   Quartiero – 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);
}

/* ============================================================
   Quartiero – 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 {
  min-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: 10px 18px;
  color: #0d5c4b;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  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; }
}

/* ============================================================
   Quartiero – 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?v=1400') 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;
}


/* ============================================================
   Quartiero 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 + Quartiero + 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;
  }
}


/* ============================================================
   Quartiero 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;
  }
}


/* Quartiero v0.2.5 – Login-Hintergrundfüllung, Logout sichtbar, Kalender-Popup klickbar */
body.is-login .login-hero {
  background: #f6f6f1 url('/assets/login-right-graphic.png?v=1400') 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; }
/* v1.3.355/357: Reiterleiste oben auf der Einstellungsseite — klebt randlos oben */
.settings-tabbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 0;
  z-index: 30;
  margin: -24px -32px 16px;
  padding: 14px 32px;
  background: var(--bg, #fafaf9);
  border-bottom: 1px solid var(--border, #e6e9e4);
  scrollbar-width: thin;
}
.settings-tabbar::-webkit-scrollbar { height: 6px; }
/* v1.3.357: Markierung fehlender Pflichtfelder (Sprung vom Einrichtungs-Status) */
.field-highlight-missing .input,
.field-highlight-missing input,
.field-highlight-missing textarea {
  border-color: #c9a961 !important;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .20);
  background: #fffdf6;
}
.field-highlight-missing .field__label { color: #b07d18; }
.settings-tabbar__chip.has-missing::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c9a961;
  margin-left: 7px;
  vertical-align: middle;
}
/* v1.3.361: Feld-Hilfe (Info-Zeichen mit Tooltip) — Hover am Desktop, Tap am Handy */
.field-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: rgba(12, 90, 73, .12);
  color: #0c5a49;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  cursor: help;
  position: relative;
  vertical-align: middle;
  user-select: none;
  -webkit-user-select: none;
}
.field-help__bubble {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(260px, 76vw);
  background: #15231b;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  padding: 9px 11px;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  z-index: 200;
  pointer-events: none;
  white-space: normal;
}
.field-help__bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #15231b;
}
.field-help:hover .field-help__bubble,
.field-help:focus .field-help__bubble,
.field-help.is-open .field-help__bubble {
  opacity: 1;
  visibility: visible;
}
/* v1.3.367 — Zahlungsart: Hinweis-Boxen + aufklappbare Anleitungen */
.pay-note {
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 12px;
}
.pay-note--easy {
  background: #f4faf7;
  border: 1px solid #cfe8dd;
  color: #155544;
}
.pay-note--auto {
  background: #fff8ec;
  border: 1px solid #f0d9a8;
  color: #6b4e16;
}
.pay-note strong { font-weight: 700; }
.pay-guide {
  margin-top: 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--surface, #fff);
  overflow: hidden;
}
.pay-guide > summary {
  cursor: pointer;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 600;
  color: #0c5a49;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}
.pay-guide > summary::-webkit-details-marker { display: none; }
.pay-guide > summary::before {
  content: '›';
  display: inline-block;
  font-size: 16px;
  transition: transform .15s ease;
}
.pay-guide[open] > summary::before { transform: rotate(90deg); }
.pay-guide__body {
  padding: 4px 15px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2, #475569);
}
.pay-guide__body ol { margin: 6px 0 0; padding-left: 20px; }
.pay-guide__body li { margin-bottom: 6px; }
.pay-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f0d9a8;
  color: #6b4e16;
  margin-left: 8px;
  vertical-align: middle;
}
.settings-tabbar__chip {
  flex: 0 0 auto;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(12, 90, 73, 0.18);
  background: #fff;
  color: #0c5a49;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.settings-tabbar__chip:hover { border-color: #c9a961; }
.settings-tabbar__chip.is-active {
  background: #0c5a49;
  color: #fff;
  border-color: #0c5a49;
}
.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; }
  .settings-tabbar { margin: -18px -18px 14px; padding: 12px 18px; }
  .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: 4px;
  padding: 0;
  margin: 4px 0 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
}
.settings-rule-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 0;
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.settings-rule-nav a:hover {
  color: var(--text);
  background: transparent;
  border-bottom-color: var(--border);
}
.settings-rule-nav a.is-active {
  color: var(--brand-700);
  background: transparent;
  box-shadow: none;
  border-bottom-color: var(--brand-700);
}
.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;
  /* v1.3.286: Auf kleinen Screens kann das Menü länger als der Bildschirm sein.
     Höhe auf den sichtbaren Bereich begrenzen und innen scrollbar machen,
     damit auch die unteren Einträge ("Hilfe durchsuchen" etc.) erreichbar sind. */
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.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;
  /* v1.3.404: Links (<a>) und Buttons (<button>) auf gleiche Schriftgröße —
     Buttons erbten font-size sonst nicht und wirkten kleiner. */
  font-size: 15px;
  font-family: inherit;
  line-height: 1.3;
  width: 100%;
  display: block;
  box-sizing: border-box;
  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
   v1.3.209 – Erweitert auf alle Touch-Geräte (pointer:coarse), damit auch
   Tablets im Querformat (> 820px Breite) sauber scrollen. Vorher griff die
   Touch-Scroll-Architektur (.content als Scroll-Container) nur bis 820px,
   wodurch breitere Tablets im PWA-Modus nicht scrollen konnten.
   ============================================================ */
/* v1.3.687: Breitengrenze für Tastgeräte ergänzt.
   Vorher stand hier nur `(pointer: coarse)` — ohne Breitenangabe. Damit galt
   die komplette Handy-Darstellung auf JEDEM Tastgerät, auch auf einem iPad im
   Querformat mit 1180 Pixeln: Seitenleiste nach links ausgeblendet, obwohl
   reichlich Platz war.
   Die Grenze von 900px trennt richtig: iPad hochkant (820–834 px) behält die
   Handy-Darstellung, iPad quer (1024–1366 px) bekommt die normale mit
   sichtbarer Seitenleiste.

   Dritte Bedingung für Handys im QUERFORMAT: Ein iPhone Pro Max ist quer
   932px breit — über der 900er-Grenze, aber nur 430px hoch. Die geringe Höhe
   ist das verlässliche Kennzeichen für ein Handy. */
@media (max-width: 820px),
       (pointer: coarse) and (max-width: 900px),
       (pointer: coarse) and (max-height: 500px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: pan-y;
  }

  /* v1.3.209: Hamburger-Button auf allen Touch-Geräten sichtbar (auch Tablets > 820px) */
  .mobile-menu-button {
    display: inline-flex !important;
    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);
  }

  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;
    /* v1.3.688: Abstand der Desktop-Darstellung zurücksetzen.
       Ein iPhone Pro Max ist quer 932px breit — damit greift zusätzlich der
       Desktop-Block ab 901px und setzt margin-left: 260px. Ohne diese Zeile
       blieb links ein leerer Streifen, obwohl die Seitenleiste eingeklappt
       war. */
    margin-left: 0 !important;
    margin-right: 0 !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 .sidebar__version,
  .app.mobile-menu-open .nav__item span,
  .app.mobile-menu-open .nav__item .nav__chevron,
  .app.mobile-menu-open .sidebar__version {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* v1.3.222: Das Settings-Untermenü darf auch im offenen Mobile-Menü NICHT
     zwangsweise sichtbar sein — sonst lässt es sich auf dem iPhone nicht über
     den Einstellungen-Button zuklappen. Sichtbarkeit nur, wenn settings-menu-open
     gesetzt ist (der Toggle entscheidet). */
  .app.mobile-menu-open.settings-menu-open .settings-subnav {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !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 & Quartiero-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;
}
/* v1.3.360: Bereichsüberschriften in der Hilfe-Übersicht */
.help-group { display: grid; gap: 10px; }
.help-group + .help-group { margin-top: 8px; }
.help-group__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #0c5a49;
  padding: 6px 2px 2px;
  border-bottom: 1px solid rgba(12, 90, 73, .14);
}
.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);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 150px;
    font-size: 9.5px !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.
   v1.3.878: Die Breite kommt jetzt aus derselben Variablen wie die Spalte.
   Vorher standen hier feste 74 Pixel, waehrend die Spalte breiter war — die
   Zelle fuellte sie nicht aus, und der Rest kam optisch zur Trennlinie dazu.
   So entstanden waagerecht 2 Pixel breite Striche, senkrecht aber nur 1. */
@media (min-width: 821px) {
  .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;
  }
}

@media (max-width: 820px) {
  .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;
  }
}

/* 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 {
  display: none !important;
}

/* v1.3.691: `details` NICHT mehr komplett ausblenden.
   Die Zeile `.app.sidebar-collapsed details { display: none }` hat die fünf
   Menügruppen (Buchungen, Gäste, Marketing, Unterkünfte, Kanäle) vollständig
   entfernt — im eingeklappten Menü blieben nur zwei Symbole übrig, und das
   Menü war damit unbrauchbar.
   Gemeint war offensichtlich nur die aufgeklappte Unterliste; die wird eine
   Zeile darüber über `details ul` und unten über `.nav__advanced-list`
   ausgeblendet. Die Gruppenköpfe selbst bleiben als Symbol sichtbar. */
.app.sidebar-collapsed .nav__advanced-list {
  display: none !important;
}
.app.sidebar-collapsed .nav__advanced > summary .nav__chevron {
  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 */
/* v1.3.688: Höhengrenze — ein Handy im Querformat (iPhone Pro Max: 932×430)
   ist breiter als 901px, aber flach. Ohne diese Bedingung bekam es die
   Desktop-Darstellung mit 260px Abstand links, obwohl die Seitenleiste
   eingeklappt war: der leere Streifen. */
@media (min-width: 901px) and (min-height: 501px) {
  .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;
    justify-content: center !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 -- */
/* v1.3.688: Höhengrenze — ein Handy im Querformat (iPhone Pro Max: 932×430)
   ist breiter als 901px, aber flach. Ohne diese Bedingung bekam es die
   Desktop-Darstellung mit 260px Abstand links, obwohl die Seitenleiste
   eingeklappt war: der leere Streifen. */
@media (min-width: 901px) and (min-height: 501px) {
  .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 (neu gefasst v1.3.893)

   ANLASS: „Ich kann eine Sperrzeit nicht wieder in eine Buchung
   aendern, da du alles ausgeblendet hast."

   URSACHE: Die alten Regeln (v1.2.73) blendeten .card, .grid-2 und
   .grid-3 aus. Damals lagen Unterkunft, Zeitraum und Kanal in einer
   eigenen Karte, die als Ausnahme sichtbar blieb. Nach dem Umbau des
   Formulars auf Schritte (.booking-step) liegen genau diese drei
   Felder in einem .grid-2 — und verschwanden mit. Uebrig blieben der
   Grund und die Schaltflaechen: Ein einmal gesetzter Kanal liess sich
   nicht mehr zuruecknehmen, und selbst das Datum war nicht mehr
   aenderbar.

   JETZT nach Schritten statt nach Bauteilen: Schritt 1 (Zeitraum,
   Unterkunft, Kanal) und Schritt 7 (Grund) bleiben, der Rest geht weg.
   Das haelt auch dann, wenn innen umgebaut wird.
   ============================================================ */
/* Alles ausser Schritt 1 (Zeitraum, Unterkunft, Kanal) und Schritt 7 (Grund)
   verschwindet. Bewusst als Ausschluss formuliert und nicht als Aufzaehlung:
   Jeder spaeter ergaenzte Abschnitt — Gaestekarten, Gast-Links, Nachrichten —
   ist damit von vornherein mit erfasst. Eine Aufzaehlung veraltet still. */
#bkg-form.blocked-mode .booking-step:not([data-step="1"]):not([data-step="7"]),
#bkg-form.blocked-mode #payment-card,
#bkg-form.blocked-mode [data-extras-card] {
  display: none !important;
}

/* Schritt 1 und 7 bleiben vollstaendig sichtbar — samt ihrer Raster. */
#bkg-form.blocked-mode .booking-step[data-step="1"],
#bkg-form.blocked-mode .booking-step[data-step="7"] {
  display: block !important;
}
#bkg-form.blocked-mode .booking-step[data-step="1"] .grid-2,
#bkg-form.blocked-mode .booking-step[data-step="1"] .field,
#bkg-form.blocked-mode .booking-step[data-step="7"] .field {
  display: block !important;
}
#bkg-form.blocked-mode .booking-step[data-step="1"] .grid-2 {
  display: grid !important;
}
#bkg-form.blocked-mode > .modal__footer {
  display: flex !important;
}

/* Der Grund ist in diesem Modus das Hauptfeld — entsprechend hervorgehoben. */
#bkg-form.blocked-mode .booking-step[data-step="7"] .field:has(textarea[name="notes"]) {
  background: rgba(255, 255, 255, .85);
  border: 2px solid var(--bp-login-green-1, #0c5949);
  border-radius: 12px;
  padding: 14px;
  margin-top: 4px;
}
#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 */
/* v1.3.688: Höhengrenze — ein Handy im Querformat (iPhone Pro Max: 932×430)
   ist breiter als 901px, aber flach. Ohne diese Bedingung bekam es die
   Desktop-Darstellung mit 260px Abstand links, obwohl die Seitenleiste
   eingeklappt war: der leere Streifen. */
@media (min-width: 901px) and (min-height: 501px) {
  .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.
   ============================================================ */
/* v1.3.688: Höhengrenze — ein Handy im Querformat (iPhone Pro Max: 932×430)
   ist breiter als 901px, aber flach. Ohne diese Bedingung bekam es die
   Desktop-Darstellung mit 260px Abstand links, obwohl die Seitenleiste
   eingeklappt war: der leere Streifen. */
@media (min-width: 901px) and (min-height: 501px) {
  .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
   ============================================================ */
/* v1.3.688: Höhengrenze — ein Handy im Querformat (iPhone Pro Max: 932×430)
   ist breiter als 901px, aber flach. Ohne diese Bedingung bekam es die
   Desktop-Darstellung mit 260px Abstand links, obwohl die Seitenleiste
   eingeklappt war: der leere Streifen. */
@media (min-width: 901px) and (min-height: 501px) {
  .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).
   ============================================================ */
/* v1.3.688: Höhengrenze — ein Handy im Querformat (iPhone Pro Max: 932×430)
   ist breiter als 901px, aber flach. Ohne diese Bedingung bekam es die
   Desktop-Darstellung mit 260px Abstand links, obwohl die Seitenleiste
   eingeklappt war: der leere Streifen. */
@media (min-width: 901px) and (min-height: 501px) {
  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: var(--ch-blocked, #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 */


/* 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. */


/* Anreise-Tag (pos-start) ohne nachfolgenden Wechseltag: SVG ragt 1px nach
   rechts (überdeckt die Gap zum nächsten Vollbuchungstag) */


/* Wechseltag (split-turnover): KEIN linker Überstand, damit die Trennung
   zwischen Departure und Arrival klar bleibt. Rechts auch nichts. */


/* 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;
}


/* ============================================================================
   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;
}

/* pos-middle und pos-start ebenfalls mit größerer Überlappung */



/* ============================================================================
   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: 400px !important;
  width: auto !important;
}
@media (max-width: 540px) {
  .modal__panel--compact {
    max-width: calc(100vw - 32px) !important;
  }
}

/* v1.3.363 — Chooser in zwei Gruppen (oben „Neu eintragen", unten „Anreichern")
   mit Trennlinie dazwischen. */
.entry-type-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.entry-type-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.entry-type-group + .entry-type-group {
  border-top: 1px solid var(--border, #e5e7eb);
  padding-top: 14px;
}
.entry-type-group__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2, #64748b);
  margin: 0;
}

/* 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: Quartiero-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 {
    /* v1.3.1104: so hoch wie nötig, damit alle Karten ohne Scrollen passen (vorher 240px) */
    max-height: calc(100dvh - 40px) !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: flex-start !important;
}
#modal .modal__panel.modal__panel--compact .entry-type-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  padding: 0 !important;
}
#modal .modal__panel.modal__panel--compact .entry-type-card {
  min-height: 68px !important;
  padding: 10px 10px !important;
  gap: 5px !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: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  margin-bottom: 0 !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: 22px !important;
  height: 22px !important;
}
#modal .modal__panel.modal__panel--compact .entry-type-card__title {
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Smartphone-spezifisch: Chooser zentriert, hoch genug für beide Gruppen */
@media (max-width: 540px) {
  #modal .modal__panel.modal__panel--compact {
    max-height: min(460px, calc(100dvh - 32px)) !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. */
  /* v1.3.287: Die mobile .topbar hat backdrop-filter -> das macht sie zum
     Containing-Block für position:fixed, wodurch ein fixes Menü IN der Topbar
     gefangen und abgeschnitten wird. Lösung: absolut am Pill verankert, Höhe an
     den sichtbaren Bereich gekoppelt (dvh, abzüglich Topbar-Offset und unterer
     Tab-Leiste) und INNEN scrollbar. */
  .topbar .dashboard-user-pill.is-open .account-menu,
  .topbar .account-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(320px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 150px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !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 — Quartiero 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);
}

/* v1.3.292: Info-Hinweis in Einstellungen (z.B. Verweis auf Objekte) */
.settings-info-hint {
  margin: 12px 0 4px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(12, 90, 73, 0.06);
  border: 1px solid rgba(12, 90, 73, 0.14);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2, #46554e);
}
.settings-info-hint strong { color: var(--text, #1a1a1a); font-weight: 600; }
.settings-info-hint a {
  display: inline-block;
  margin-top: 4px;
  color: var(--brand-700, #0c5a49);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.settings-info-hint a:hover { text-decoration: underline; }

/* v1.3.290: Wohnraumschutz — Vermietungstage-Limit pro Objekt */
.tasks-cleaning-hint {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 0 14px; padding: 12px 16px; border-radius: 12px;
  background: rgba(12, 90, 73, 0.06);
  border: 1px solid rgba(12, 90, 73, 0.14);
  text-decoration: none; color: var(--text-2, #46554e);
  font-size: 14px; transition: background .2s ease;
}
.tasks-cleaning-hint:hover { background: rgba(12, 90, 73, 0.10); }
.tasks-cleaning-hint strong { color: var(--bp-green, #0c5a49); }
.tasks-cleaning-hint__cta { color: var(--bp-green, #0c5a49); font-weight: 600; white-space: nowrap; }
@media (max-width: 600px) { .tasks-cleaning-hint { flex-direction: column; align-items: flex-start; gap: 6px; } }

.rental-limit-list { display: flex; flex-direction: column; gap: 18px; }
.rental-limit + .rental-limit { padding-top: 18px; border-top: 1px solid rgba(15, 61, 46, 0.08); }
.rental-limit__top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.rental-limit__count { color: var(--text-2); font-size: 14px; }
.rental-limit__count strong { color: var(--bp-green, #0c5a49); font-size: 16px; }
.rental-limit__bar {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(15, 61, 46, 0.10);
}
.rental-limit__bar span { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.rental-limit__foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-top: 10px;
}

.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; }
  /* v1.3.755: Kacheln auf dem Handy kompakter. Zwischen den Elementen lagen
     10 px Abstand und die Mindesthöhe war 132 px — zusammen mit dem Symbol
     ergaben sich rund 180 px je Kachel, also gut zwei Bildschirmdrittel für
     vier Zahlen. Mit engerem Abstand und 116 px Mindesthöhe passt die ganze
     Reihe wieder ins Bild, ohne dass etwas gedrängt wirkt. */
  .dash-hero-kpi { padding: 18px 18px 16px; min-height: 116px; gap: 6px; }
  .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) */
/* v1.3.719: Breakpoint von 820px auf 1100px angehoben.
 *
 * ANLASS: Auf einem iPad (1024px) blieb die Vorlagen-Tabelle eine Tabelle.
 * Abzüglich der Seitenleiste bleiben aber nur rund 770px für sechs Spalten
 * UND vier Schaltflächen je Zeile. Die Schaltflächen erzwingen ihre Breite,
 * die Namensspalte kollabiert — der Text brach buchstabenweise um
 * („Anrei se- Info (7 Tage vorh er)").
 *
 * Der Breakpoint misst das Fenster, nicht den tatsächlich verfügbaren Platz.
 * Genau dieselbe Ursache wie beim Querformat-Problem in v1.3.687–691.
 * 1100px deckt iPads in beiden Lagen ab; Desktop-Fenster sind in aller Regel
 * breiter und behalten die Tabelle.
 */
@media (max-width: 1100px) {
  .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"
      "trigger status"
      "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; }
  /* v1.3.719: Trigger, Kanal und Status bleiben sichtbar.
   * Vorher display:none — auf einem Handy ein vertretbarer Kompromiss, aber
   * seit der Breakpoint bei 1100px liegt, betrifft es auch Tablets. Ohne
   * Trigger sieht der Vermieter nicht mehr, WANN eine Vorlage verschickt wird
   * und ob sie überhaupt aktiv ist — die zwei wichtigsten Angaben der Zeile.
   * Sie stehen jetzt als eine ruhige Zeile unter dem Namen. */
  /* Trigger links, Status rechts. Eigene Bereiche — gemeinsame grid-area
   * würde die Zellen ÜBEREINANDER legen statt nebeneinander. */
  .table--templates.table--cards td:nth-child(3) {
    grid-area: trigger;
    padding: 0;
    font-size: 12.5px;
    color: var(--txt-muted, #5a6a66);
  }
  .table--templates.table--cards td:nth-child(5) {
    grid-area: status;
    padding: 0;
    justify-self: end;
  }
  /* Kanal bleibt ausgeblendet: steht bei nahezu allen Vorlagen auf „email"
   * und trägt in der Kartenansicht nichts bei. */
  .table--templates.table--cards td:nth-child(4) { 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.402 — iPad-Fix: Datums-/Monatswert war auf Tablets unsichtbar
   Ursache: -webkit-appearance:none ließ den Werttext im Pseudo-Element
   ::-webkit-date-and-time-value transparent/leer wirken (Box klickbar, aber
   ohne sichtbaren Wert + ohne Picker-Symbol). Wir erzwingen Farbe + Füllfarbe
   direkt auf den internen Pseudo-Elementen und korrigieren die Höhe, damit der
   Wert nicht aus dem sichtbaren Bereich geschoben wird.
============================================================================ */
.input[type="month"]::-webkit-date-and-time-value,
.input[type="date"]::-webkit-date-and-time-value,
.input[type="datetime-local"]::-webkit-date-and-time-value,
.input[type="time"]::-webkit-date-and-time-value,
.input[type="week"]::-webkit-date-and-time-value {
  text-align: left;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  line-height: normal;
  margin: 0;
  min-width: 1ch;
}
.input[type="month"]::-webkit-datetime-edit,
.input[type="date"]::-webkit-datetime-edit,
.input[type="datetime-local"]::-webkit-datetime-edit,
.input[type="time"]::-webkit-datetime-edit,
.input[type="week"]::-webkit-datetime-edit,
.input[type="month"]::-webkit-datetime-edit-fields-wrapper,
.input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  opacity: 1;
  padding: 0;
}
/* Picker-Symbol auf iOS/iPad wieder einblenden (war durch appearance:none weg) */
.input[type="month"]::-webkit-calendar-picker-indicator,
.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* ============================================================================
   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.quartiero.de)
   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;
}

/* v1.3.213: E-Mail-Header-Farbwahl + Vorschau */
.email-color-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.email-color-swatch { width: 48px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; flex: 0 0 auto; }
.email-color-hex { flex: 0 0 130px; font-family: monospace; text-transform: lowercase; }
.email-header-preview { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; max-width: 360px; }
.email-header-preview__bar { background: #073f35; padding: 18px 16px; text-align: center; transition: background .15s ease; }
.email-header-preview__bar span { font-weight: 700; font-size: 15px; color: #ffffff; }
.email-header-preview__stripe { height: 3px; background: #c9a961; }
.email-header-preview__body { padding: 14px 16px; font-size: 13px; color: var(--muted, #6b7168); background: #ffffff; }


/* v1.3.222: Eingeklappte Apartment-Spalte — Name in EINER vertikalen Zeile,
   bei Überlänge sauber mit … abgeschnitten (statt mehrzeiligem Umbruch).
   Finaler Override für alle Breakpoints. Schrift bleibt hochkant. */
.calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed .cal-rowlabel strong {
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: 150px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  word-break: normal !important;
  -webkit-line-clamp: unset !important;
}
.calendar-new:not(.calendar-new--single) .cal-grid--labels-collapsed .cal-rowlabel {
  overflow: hidden !important;
}

/* v1.3.297: Tagesplan- und Detail-Tabellen auf dem Handy als gestapelte Karten
   statt zerquetschter Tabelle. Betrifft nur .table--compact (An-/Abreisen,
   Detail-Popups), nicht den Kalender. */
@media (max-width: 640px) {
  .table--compact {
    border-collapse: separate;
    border-spacing: 0;
  }
  .table--compact thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .table--compact tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: var(--surface, #fff);
  }
  .table--compact tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border: none;
    padding: 5px 0;
    text-align: right !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .table--compact tbody td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #6b7168);
    text-align: left;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* Gast-Name als Kopfzeile der Karte hervorheben */
  .table--compact tbody td[data-label="Gast"] {
    font-weight: 700;
    font-size: 15px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 4px;
  }
  .table--compact tbody td[data-label="Gast"]::before {
    font-size: 12px;
    font-weight: 600;
    align-self: center;
  }
  /* Inhalt der Gast-Zelle (Name + „1 Gast") rechts sauber untereinander */
  .table--compact tbody td[data-label="Gast"] > * { text-align: right; }
  .table--compact tbody td[data-label="Gast"] br { display: block; }
  /* Fußzeile (Summe) als eigene Karte */
  .table--compact tfoot tr {
    display: block;
    padding: 10px 14px;
    border-top: 2px solid var(--border);
  }
  .table--compact tfoot td {
    display: flex;
    justify-content: space-between;
    border: none;
    padding: 2px 0;
    text-align: right !important;
  }
  .table--compact tfoot td[colspan] { font-weight: 600; }
}

/* v1.3.301: Auswahl-Leiste im Aufgaben-Bereich (Mehrfach-Löschen) */
.tasks-bulk-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 0 0 14px;
  background: var(--surface-2, #f3ecdf);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.tasks-bulk-bar__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tasks-bulk-bar__all input { width: 18px; height: 18px; cursor: pointer; }

/* v1.3.311: Marker für offene Anzahlungen */
.deposit-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b23b3b;
  vertical-align: middle;
  margin-right: 2px;
}
.cal-deposit-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b23b3b;
  margin-right: 4px;
  vertical-align: middle;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85);
}

/* v1.3.314: Vergleich regulärer Preis vs. Portal-Preis im Buchungs-Modal */
.price-portal-info {
  margin-top: 10px;
  padding: 12px 14px;
  background: #faf6ef;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
}
.price-portal-info__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}
.price-portal-info__struck {
  color: #999;
  text-decoration: line-through;
}
.price-portal-info__row--net {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 7px;
  color: var(--brand-green, #0c5a49);
}
.price-portal-info__note {
  margin-top: 8px;
  font-size: 12px;
  color: #888;
}

/* v1.3.315: "Wer kassiert?"-Darstellung bei Anzahlungsregeln */
.rule-collects-hint {
  font-weight: 600;
  font-size: 14px;
  color: var(--brand-green, #0c5a49);
  margin-bottom: 8px;
}
.settings-check-card--info {
  background: #faf6ef;
  cursor: default;
}
.settings-check-card--info > span > em {
  color: #777;
}

/* v1.3.316: Eingerückte Unterfrage im Setup-Wizard (Wer kassiert?) */
.wizard-subquestion {
  margin-left: 26px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}

/* v1.3.317: Feste Einträge (Direkt/Website) in der Portal-Auswahl */
.portal-toggle--fixed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  opacity: 0.92;
  cursor: default;
}

/* v1.3.381: Login – Register-Button auf Smartphone kompakter, damit der lange
   Text ("Neues Konto anlegen — 30 Tage kostenlos") nicht in den grünen
   Sicherheits-Balken darunter ragt. Button wächst dank min-height mit. */
@media (max-width: 539px) {
  .login-register-btn {
    font-size: 12.5px;
    padding: 11px 14px;
    grid-template-columns: 26px 1fr 14px;
    gap: 6px;
  }
  .login-register-btn svg { width: 18px; height: 18px; }
  .login-register-btn strong { font-size: 20px; }
}

/* ============================================================
   v1.3.384 — Drei Layout-Korrekturen (Smartphone-Login, Tablet-Menü, Modal)
   Bewusst ans Dateiende gesetzt, damit diese gezielten Regeln die
   älteren, verschachtelten Regeln zuverlässig überschreiben.
   ============================================================ */

/* (1) Smartphone-Login: Karte nicht auf feste Höhe zwingen, sondern an den
   Inhalt anpassen und die Seite scrollen lassen. Dadurch ragt der Button
   „Neues Konto anlegen" nicht mehr in den grünen DSGVO-Balken. */
@media (max-width: 768px) {
  body.is-login { overflow: auto !important; height: auto !important; }
  body.is-login .login-screen {
    display: block !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }
  body.is-login .login-hero { display: none !important; }
  body.is-login .login-card {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    width: min(440px, calc(100vw - 24px)) !important;
    margin: 12px auto !important;
  }
  body.is-login .login-card__inner { flex: 0 0 auto !important; min-height: 0 !important; }
  body.is-login .login-card__foot { margin-top: 14px !important; }
}

/* (2) Tablet/Mobile (Menü als Overlay): Hauptbereich nutzt die volle Breite.
   Die 260px-Menüspalte entfällt, sobald die Sidebar als Overlay läuft –
   beim Schließen bleibt links kein leerer Streifen mehr. */
@media (max-width: 820px) {
  .app,
  .app.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* (3) Kompaktes Auswahl-Modal („Was möchtest du eintragen?"): Höhe an den
   Inhalt anpassen statt auf volle Bildschirmhöhe zu zwingen – im Hochformat
   verschwindet dadurch der unnötige Scrollbalken. */
.modal__panel.modal__panel--compact {
  height: auto !important;
  max-height: calc(100dvh - 32px) !important;
}
.modal__panel--compact .modal__body {
  max-height: none !important;
  overflow-y: visible !important;
}

/* v1.3.387: Einstellungen – Unterseiten-Umschaltung (Zahlungen / Rechnung & Steuern) */
.settings-bbox[hidden]{display:none !important;}

/* ============================================================================
   v1.3.388 — Parallax auf Touch-Geräten neutralisieren (Tablet-Renderfehler)
   Symptom: Auf Tablets erschienen im Dashboard horizontale Glitch-Streifen
   und Dropdowns (Auswertungs-Filter) verschwanden sporadisch beim Scrollen.
   Ursache: .parallax-tile erzwingt GPU-Layer (will-change/preserve-3d) +
   Scroll-Handler aktualisiert transforms laufend. Schwache Tablet-GPUs
   verlieren dabei Layer-Inhalte. Auf Touch gibt es keinen Hover-Tilt,
   der Effekt hat dort keinen Nutzen → vollständig deaktivieren.
   ============================================================================ */
@media (pointer: coarse) {
  .parallax-tile,
  .parallax-tile[data-parallax-speed="slow"],
  .parallax-tile[data-parallax-speed="fast"] {
    transform: none !important;
    transform-style: flat !important;
    will-change: auto !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
  }
  .parallax-tile:hover {
    transform: none !important;
  }
}

/* ============================================================================
   v1.3.390 — Login: Formular darf den DSGVO-Balken nicht überlappen
   Symptom: Bei niedriger Fensterhöhe (Laptop, schmales Fenster) lief der
   "Neues Konto anlegen"-Button in den grünen Balken (login-card__foot).
   Ursache: .login-card__inner darf schrumpfen (min-height:0), hatte aber kein
   overflow — der Inhalt ragte ungebremst über den 64px-Footer.
   Fix: Bei Platzmangel scrollt der Formularbereich intern; der Balken behält
   immer seinen Platz. Bei normaler Fensterhöhe ändert sich nichts Sichtbares.
   ============================================================================ */
body.is-login .login-card__inner {
  overflow-y: auto !important;
}
body.is-login .login-card__foot {
  flex: 0 0 auto !important;
}

/* ============================================================================
   v1.3.393 — "Ungespeicherte Änderungen"-Leiste (Einstellungen)
   ============================================================================ */
#unsaved-bar {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%, 120%);
  z-index: 12000;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100vw - 24px);
  padding: 10px 12px 10px 18px;
  background: #0c5a49;
  color: #fff;
  border: 1px solid rgba(201, 169, 97, .55);
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(10, 30, 25, .30);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
#unsaved-bar.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
#unsaved-bar .unsaved-bar__text {
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
}
#unsaved-bar .unsaved-bar__text::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9a961;
  margin-right: 9px;
  vertical-align: 1px;
}
#unsaved-bar .unsaved-bar__actions { display: flex; gap: 8px; }
#unsaved-bar .btn--ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
}
#unsaved-bar .btn--ghost:hover { background: rgba(255,255,255,.12); }
#unsaved-bar .btn--primary {
  background: #c9a961;
  border: 1px solid #c9a961;
  color: #143c32;
  font-weight: 700;
}
#unsaved-bar .btn--primary:hover { background: #d6ba78; }
@media (max-width: 539px) {
  #unsaved-bar {
    left: 12px;
    right: 12px;
    transform: translate(0, 120%);
    justify-content: space-between;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  #unsaved-bar.is-visible { transform: translate(0, 0); }
}

/* ============================================================================
   v1.3.394 — Modal: Footer mit Speichern-Button klebt unten fest
   Wunsch: In Fenstern (Kontakt, Buchung, …) soll der Speichern-Button immer
   sichtbar sein, statt erst nach dem Scrollen ans Ende. Der Footer bleibt
   deshalb am unteren Rand des Fensters stehen, der Inhalt scrollt dahinter.
   ============================================================================ */
/* v1.3.874 (FEHLERBEHEBUNG): Die Leiste sass nicht ganz unten — zwischen ihr
   und der Fensterkante blieb ein Streifen, durch den der Inhalt sichtbar
   durchlief. Ursache war das negative margin-bottom: bei position:sticky wird
   der Haltepunkt anhand der MARGIN-Box berechnet, ein negativer Wert hebt die
   Leiste also von der Unterkante ab. Jetzt endet der scrollende Bereich buendig
   (padding-bottom: 0) und die Leiste hat kein negatives margin-bottom mehr. */
#modal-body:has(.modal__footer) {
  /* !important, weil mehrere spätere Regeln (u. a. der kompakte Dialog) das
     Padding des Bodys mit !important setzen. Ohne das bliebe unter der
     Leiste ein Streifen, durch den der Inhalt sichtbar durchläuft. */
  padding-bottom: 0 !important;
}
#modal-body .modal__footer {
  position: sticky;
  bottom: 0;
  z-index: 6;
  background: var(--surface, #fff);
  margin: 18px -24px 0;
  padding: 14px 24px;
  border-top: 1px solid #e7e2d6;
  box-shadow: 0 -8px 18px rgba(10, 30, 25, .06);
}
@media (max-height: 760px) {
  #modal-body:has(.modal__footer) {
    padding-bottom: 0 !important;
  }
  #modal-body .modal__footer {
    margin: 14px -18px 0;
    padding: 12px 18px;
  }
}

/* ============================================================================
   v1.3.396 — Smartphone: Unsaved-Leiste + Modal-Footer-Buttons aufgeräumt
   1) Die "Ungespeicherte Änderungen"-Leiste brach auf schmalen Screens nicht
      um — der Speichern-Button ragte aus dem Bildschirm. Jetzt: Text oben,
      darunter beide Buttons gleich groß über die volle Breite.
   2) Im Modal-Footer (Kontakt, Buchung, …) stehen die Buttons auf dem
      Smartphone jetzt ausgerichtet: gleich groß, volle Breite, mittig.
   ============================================================================ */
@media (max-width: 539px) {
  #unsaved-bar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
  }
  #unsaved-bar .unsaved-bar__text {
    width: 100%;
    text-align: center;
    white-space: normal;
  }
  #unsaved-bar .unsaved-bar__actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  #unsaved-bar .unsaved-bar__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
  }

  #modal-body .modal__footer {
    flex-wrap: wrap;
    gap: 8px;
  }
  #modal-body .modal__footer > div {
    display: flex;
    gap: 8px;
    flex: 1 1 100%;
    min-width: 0;
  }
  #modal-body .modal__footer > .btn {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: center;
  }
  #modal-body .modal__footer > div .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
  }
}

/* v1.3.431: iOS-Scroll-Performance im Belegungskalender (Multiansicht).
   Auf iPhone ruckelt das horizontale Scrollen bei vielen Apartments, weil die
   sticky linke Apartment-Spalte den gesamten Grid-Bereich neu zeichnet. Fix:
   - Momentum-Scrolling im Container,
   - sticky linke Spalte auf eigene GPU-Ebene (will-change), nur wenige Elemente,
   - Repaint je Tageszelle begrenzen (contain). */
.calendar-new {
  -webkit-overflow-scrolling: touch;
  /* v1.3.1071: nur waagerecht abfangen. „contain“ für beide Richtungen
   * hielt auch das senkrechte Blättern fest: Stand der Mauszeiger über dem
   * Belegungskalender, ließ sich die Seite mit Mausrad oder Touchpad nicht
   * nach unten bewegen. */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}
.calendar-new .cal-headcell--left,
.calendar-new .cal-rowlabel {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.calendar-new .cal-grid .cal-cell {
  contain: paint;
}

/* v1.3.432: Topbar-Aktionsbuttons auf schmalen Screens kürzen, damit der grüne
   "+ Neue Buchung"-Button nicht abgeschnitten wird (alle drei passen in eine
   Zeile). Auf großen Screens bleiben die vollen Bezeichnungen. */
.tb-short { display: none; }
@media (max-width: 560px) {
  #topbar-actions .tb-long, .topbar__actions .tb-long { display: none; }
  #topbar-actions .tb-short, .topbar__actions .tb-short { display: inline; }
}

/* ============================================================================
   v1.3.443 — Login-Seite auf dem Smartphone wieder scrollbar
   Symptom: Footer mit Impressum/Datenschutz/AGB unten nicht erreichbar, Seite
   ließ sich nicht nach unten scrollen.
   Ursache: .login-card__inner hatte (ohne Media-Query) overflow-y:auto und
   wurde so zum internen Scroll-Container, der auf Touch die Seiten-Scrollgeste
   abfing. Fix: Auf dem Handy ist die ganze Seite der Scroller, der Innenbereich
   scrollt NICHT mehr selbst; Höhen auf auto.
   Bewusst ganz am Dateiende, damit es die älteren Login-Regeln überschreibt.
   ============================================================================ */
@media (max-width: 768px) {
  body.is-login {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.is-login .login-screen {
    display: block !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }
  body.is-login .login-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.is-login .login-card__inner {
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  body.is-login .login-card__foot { flex: 0 0 auto !important; }
  body.is-login .login-card__legal {
    flex: 0 0 auto !important;
    padding-bottom: 22px !important;
  }
}

/* ============================================================
   v1.3.483 – Fehlermeldungen/Toasts immer ganz oben & sichtbar
   Toasts müssen über JEDEM Modal/Overlay liegen und dürfen nie
   hinter einem Blur-Backdrop verschwinden.
   ============================================================ */
.toast {
  top: 20px;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 100000 !important;
  max-width: min(560px, calc(100vw - 32px));
  text-align: center;
}

/* ============================================================
   v1.3.486 – Layout-Fix: toter Korridor 821–900px
   ------------------------------------------------------------
   Bisher hatten nur Mobile (<=820px) und Desktop (>=901px) ein
   vollständiges, per !important abgesichertes Layout-Modell.
   Der Bereich 821–900px fiel durch beide Raster: die App-Shell
   blieb in einem losen Grid-Zustand, kollidierte mit JS-gesetzten
   Klassen (sidebar-collapsed u.a.) und quetschte den Inhalt in die
   schmale Menü-Spalte (rechts leer/weiß).
   Hier wird derselbe geschlossene Aufbau wie auf dem Desktop
   erzwungen: Sidebar fixed als schmale Icon-Leiste (wie ab <=920px
   ohnehin vorgesehen), Main daneben mit margin-left.
   ============================================================ */
/* v1.3.688: Höhengrenze ergänzt.
   Der Bereich 821–900px Breite trifft nicht nur Tablets im Hochformat, für die
   diese schmale Symbolleiste gedacht war — ein iPhone im QUERFORMAT ist mit
   844px genauso breit, aber nur 390px hoch. Dort passte die senkrechte
   Symbolleiste nicht: Die Einträge waren abgeschnitten und nicht bedienbar.
   Mit `min-height: 600px` gilt der Block nur noch für hohe Bildschirme, also
   Tablets hochkant. Handys im Querformat fallen in die Handy-Darstellung mit
   unterer Navigationsleiste. */
@media (min-width: 821px) and (max-width: 900px) and (min-height: 600px) {
  .app {
    display: block !important;
    grid-template-columns: none !important;
    min-height: 100vh;
  }
  .app > .sidebar,
  .app .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 84px !important;
    max-width: 84px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    z-index: 50 !important;
  }
  .app > .main,
  .app .main {
    margin-left: 84px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  /* Bottom-Tabs gehören erst ab <=820px sichtbar zu sein */
  .bottom-tabs { display: none !important; }
}

/* ============================================================
   v1.3.491 – Passwort-Felder in Modals: Auge-Toggle + Stärke
   ============================================================ */
.pw-wrap { position: relative; display: block; }
.pw-wrap .input,
.pw-wrap input.input { padding-right: 44px; width: 100%; box-sizing: border-box; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: #6b7168;
  padding: 6px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.pw-eye:hover { color: #0c5a49; background: rgba(12,90,73,0.06); }
.pw-eye svg { width: 20px; height: 20px; }
.pw-meter { margin-top: 8px; }
.pw-bar {
  height: 6px; border-radius: 4px; background: rgba(15,61,46,0.12); overflow: hidden;
}
.pw-bar span {
  display: block; height: 100%; width: 0;
  transition: width .2s ease, background .2s ease; border-radius: 4px;
}
.pw-bar span.weak   { background: #c0392b; }
.pw-bar span.mid    { background: #e0a800; }
.pw-bar span.good   { background: #7cb342; }
.pw-bar span.strong { background: #0c5a49; }
.pw-reqs {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.pw-reqs li {
  font-size: 12px; color: #6b7168; display: flex; align-items: center; gap: 5px;
}
.pw-reqs li::before { content: '○'; font-size: 11px; line-height: 1; }
.pw-reqs li.ok { color: #0c5a49; }
.pw-reqs li.ok::before { content: '✓'; font-weight: 700; }

/* ============================================================
   v1.3.493 – Login: Hinweis "E-Mail bestätigen" + Resend-Button
   ============================================================ */
.login-notice {
  margin: 4px 0 0; padding: 12px 14px;
  background: #fdecea; border: 1.5px solid #c0392b; border-radius: 10px;
  text-align: center;
}
.login-notice__text { font-size: 13px; color: #a02820; line-height: 1.45; }
.login-notice__text strong { color: #7a1d14; }
.login-notice__btn {
  margin-top: 10px; width: 100%;
  background: #0c5a49; color: #fff; border: none; border-radius: 8px;
  padding: 10px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s ease;
}
.login-notice__btn:hover { background: #073f35; }
.login-notice__btn:disabled { opacity: .6; cursor: default; }

/* ============================================================================
   v1.3.515 — Auth-/2FA-Modal: auf kurzen Viewports (Laptop mit Browser-
   Leisten) wurde das mittig zentrierte Fenster unten abgeschnitten. Fix:
   Auf niedrigen Höhen das Modal oben ausrichten und die Panel-Höhe hart auf
   den sichtbaren Bereich kappen. Der Body scrollt, der sticky Footer mit den
   Buttons (Abbrechen/Bestätigen) bleibt dadurch immer sichtbar.
   ============================================================================ */
@media (max-height: 820px) {
  .modal { align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }
  .modal__panel { max-height: calc(100dvh - 28px); }
}

/* ============================================================================
   v1.3.516 — Avatar-Menü immer im Vordergrund.
   Problem: Das geöffnete Konto-/Avatar-Menü (z-index 40) lag hinter dem
   „Buchung hinzufügen"-FAB (z-index 80) und einzelnen Listen-Buttons.
   Fix: Menü hoch anheben. Auf dem Desktop ist die Topbar kein eigener
   Stacking-Context -> das angehobene Pill genügt. Auf Mobil ist die Topbar
   sticky (z-index 70) und damit ein Stacking-Context -> dort zusätzlich die
   Topbar anheben und den FAB beim offenen Menü zurücksetzen.
   ============================================================================ */
.account-menu { z-index: 1000 !important; }
.dashboard-user-pill.is-open { position: relative; z-index: 1000 !important; }
body:has(.dashboard-user-pill.is-open) .topbar { z-index: 1000 !important; }
body:has(.dashboard-user-pill.is-open) .calendar-fab { z-index: 1 !important; }

/* v1.3.532: Mehr Luft um die grünen Infoboxen im iCal-Import-Dialog,
   damit sie nicht direkt am Titel, an den Eingabefeldern oder am Footer
   kleben (settings-success-box hat global keinen Außenabstand). */
#feed-editor-form .settings-success-box {
  margin-top: 16px;
  margin-bottom: 16px;
}

/* v1.3.533: Modal-Footer auf dem Smartphone wieder symmetrisch.
   Ursache: Im schmalen Mobile-Breakpoint setzt ".modal__body * { max-width:
   100% !important }" auch den sticky-Footer auf max-width:100%. Dadurch konnte
   sein negatives margin-right (-24px) die Box NICHT nach rechts ausdehnen,
   waehrend margin-left (-24px) sie nach links zog -> Footer linksbuendig, rechts
   eine Luecke. Fix: Footer von der Breitenklammer ausnehmen (hoehere Spezifitaet
   durch #modal-body), dann zieht -24px wieder beidseitig bis zur Panel-Kante. */
#modal-body .modal__footer {
  max-width: none !important;
}

/* ============================================================================
   v1.3.547 — Belegungskalender (Multiansicht): Gastname endgültig NICHT
   abschneiden. ECHTE Ursache (per Browser-Render verifiziert): die Tageszellen
   tragen `contain: paint` (iOS-Scroll-Performance, v1.3.431). Das clippt den
   überlaufenden Text VISUELL an der Zellkante — unabhängig von overflow:visible.
   Daher wirkten frühere overflow/z-index-Versuche nicht. Fix: contain:none auf
   der Namens-Zelle (nur dort -> Scroll-Performance bleibt für alle anderen
   Zellen erhalten) + overflow:visible + z-index über der Abreise-Zelle (10).
   ============================================================================ */
.calendar-new:not(.calendar-new--single) .cal-cell--booked {
  overflow: visible !important;
}
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--label-start {
  contain: none !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 20 !important;
}
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--label-start .cal-cell__guest,
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--label-start .cal-cell__guest-meta {
  position: relative !important;
  z-index: 3 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  width: max-content !important;
  max-width: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  pointer-events: none !important;
}
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--label-start .cal-cell__guest {
  font-size: 11px !important;
  line-height: 1.2 !important;
}
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--label-start .cal-cell__guest-meta {
  font-size: 9px !important;
  line-height: 1.2 !important;
}

/* ============================================================================
   v1.3.549 — Belegungskalender: Badge "Online-Check-in eingegangen".
   Kleines weißes Häkchen-Badge vor dem Gastnamen im Buchungsbalken (gut
   sichtbar auf dem dunkelgrünen Balken). Pendant zum "Online Check-in da"-Pill
   in der Buchungsliste. Der Tooltip zeigt zusätzlich eine Hinweiszeile.
   ============================================================================ */
.cal-checkin-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  color: #0c5a49;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  margin-right: 4px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(12,90,73,0.25);
  flex: 0 0 auto;
}

/* ============================================================================
   v1.3.552 — Geplante Nachrichten: Bearbeiten/Entfernen-Aktionen pro Eintrag.
   ============================================================================ */
.booking-scheduled__item {
  grid-template-columns: 82px 1fr auto auto !important;
}
.booking-scheduled__actions {
  display: inline-flex;
  gap: 4px;
}
.sched-act {
  border: 1px solid rgba(15,61,46,.18);
  background: #fff;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: #0c5a49;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 auto;
}
.sched-act:hover { background: #faf6ef; }
.sched-act--danger { color: #b23b3b; }
.booking-scheduled__item--skipped .booking-scheduled__title {
  text-decoration: line-through;
  opacity: 0.55;
}

/* ============================================================================
   v1.3.553 — iOS-Safari Scroll-Fix für lange Modals (v. a. Buchungsformular).
   Symptom: Inhalt macht nur einen Rubber-Band-Bounce und springt beim Loslassen
   zurück, statt echt zu scrollen. In Chromium scrollt dieselbe Struktur korrekt.
   Ursache: iOS/WebKit berechnet die Höhe eines flex-child mit flex-basis:auto
   im column-Container falsch → das Kind wächst über den Container statt zu
   scrollen. flex-basis:0 erzwingt die echte, begrenzte Scroll-Höhe. Momentum
   und vertikales overscroll-contain bleiben erhalten. Der compact-Chooser ist
   ausgenommen (der soll bewusst nicht intern scrollen).
   ============================================================================ */
#modal .modal__panel:not(.modal__panel--compact) #modal-body {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

/* ============================================================================
   v1.3.554 — Nachrichten-Bereich übersichtlicher. Verlauf ("Bereits gesendet")
   und "Geplante automatische Nachrichten" sind jetzt zwei klar getrennte
   Untersektionen mit identischem Kopfzeilen-Stil (Gold-Strich). Der Verlauf
   trägt denselben __head-Stil; die Geplant-Sektion ist per border-top getrennt.
   ============================================================================ */
.booking-msgs { margin-top: 2px; }
.booking-msgs .booking-scheduled__head { margin-bottom: 8px; }
/* Etwas mehr Luft vor der Geplant-Sektion, klare optische Zäsur. */
.booking-scheduled { margin-top: 16px !important; padding-top: 16px !important; }

/* ============================================================================
   v1.3.555 — Klarere Unterscheidung gesendet/geplant (Variante A, dezent).
   Farbcode: Grün = gesendet/erledigt, Gold = geplant/steht aus. Farbiger
   Balken links an jeder Karte, Icon + Farbe im Sektionskopf, goldenes
   "geplant"-Label.
   ============================================================================ */
.booking-scheduled__head { display: flex; align-items: center; gap: 6px; }
.booking-scheduled__head svg { flex: 0 0 auto; }
/* Gesendet-Kopf: grün, grüner Strich */
.booking-scheduled__head--sent { color: #0c5a49; }
.booking-scheduled__head--sent::before { background: #1a8a63 !important; }
/* Geplant-Kopf: goldbraun (Strich bleibt Gold-Gradient aus Basisregel) */
.booking-scheduled__head--plan { color: #8a6d1f; }
/* Karten: farbiger Balken links */
.booking-msg { border-left: 3px solid #1a8a63; }
.booking-msg[open] { border-left-color: #1a8a63; }
.booking-scheduled__item { border-left: 3px solid #c9a961; }
.booking-scheduled__item--skipped { border-left-color: rgba(201,169,97,.4); }
/* Goldenes "geplant"-Label */
.badge.badge--plan { background: #eadfc2; color: #8a6d1f; }

/* v1.3.565: PWA-Installations-Hinweis (nur Smartphone, nicht installiert) */
.pwa-hint {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(12, 90, 73, .32);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: pwaHintFade .22s ease-out;
}
@keyframes pwaHintFade { from { opacity: 0; } to { opacity: 1; } }
.pwa-hint__panel {
  width: 100%;
  max-width: 520px;
  background: #faf6ef;
  border-radius: 18px 18px 0 0;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .18);
  animation: pwaHintUp .26s cubic-bezier(.2, .8, .3, 1);
}
@keyframes pwaHintUp { from { transform: translateY(24px); } to { transform: translateY(0); } }
.pwa-hint__title {
  margin: 0 0 6px;
  font-size: 1.12rem;
  font-weight: 600;
  color: #0c5a49;
}
.pwa-hint__lead {
  margin: 0 0 14px;
  font-size: .9rem;
  color: #55605c;
  line-height: 1.45;
}
.pwa-hint__steps {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: .9rem;
  line-height: 1.55;
  color: #223330;
}
.pwa-hint__steps li { margin-bottom: 6px; }
.pwa-hint__steps strong { color: #0c5a49; }
.pwa-hint__note {
  margin: 0 0 16px;
  font-size: .82rem;
  color: #7a8480;
  line-height: 1.45;
  border-left: 3px solid #c9a961;
  padding-left: 10px;
}
.pwa-hint__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.pwa-hint__actions .btn--primary { flex: 1 1 100%; }
.pwa-hint__actions .btn--ghost {
  flex: 1 1 0;
  font-size: .86rem;
  color: #55605c;
}

/* ============================================================
   v1.3.586 — Login-Layout endgültig sauber (ersetzt v582–585).
   Prinzip: login-card ist Flex-Spalte. Der scrollbare Formularbereich
   (inner) nimmt den Restplatz und scrollt bei Bedarf; das Sicherheits-
   Band und die Rechtslinks sitzen fix darunter und werden NIE
   überlagert. Gilt für Desktop; Mobile-Regel (v1.3.384) bleibt separat.
   ============================================================ */
@media (min-width: 769px) {
  body.is-login .login-card {
    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body.is-login .login-card__inner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: clamp(16px, 2.4vh, 28px) clamp(22px, 2.35vw, 38px) 14px !important;
    justify-content: flex-start !important;
  }
  body.is-login .login-brand { margin-bottom: clamp(10px, 1.6vh, 18px) !important; }
  body.is-login .login-copy { margin-bottom: clamp(8px, 1.4vh, 14px) !important; }
  body.is-login .login-field { margin-bottom: 10px !important; }
  body.is-login .login-remember { margin: 8px 0 !important; }
  body.is-login .login-submit { margin-top: 4px !important; }
  body.is-login .login-forgot,
  body.is-login .login-link { margin: 8px 0 !important; }
  body.is-login .login-divider { margin: 10px 0 !important; }
  .login-register-btn {
    min-height: 46px !important;
    padding: 8px 16px !important;
    font-size: 13.5px !important;
    margin: 4px 0 6px !important;
  }
  .login-register-btn svg { width: 19px !important; height: 19px !important; }
  .login-register-btn strong { font-size: 20px !important; }
}

/* v1.3.587: Sicherheits-Band + Rechtslinks liegen jetzt IM scrollbaren
   Formularbereich, hinter dem Registrier-Button. Kein fixes Layout mehr —
   wird es eng, scrollt die Karte einfach mit. Rechtslinks kleiner. */
body.is-login .login-card__foot {
  flex: 0 0 auto;
  height: auto;
  min-height: 42px;
  margin-top: 12px;
  border-radius: 8px;
  padding: 10px 14px;
}
body.is-login .login-card__legal--all {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 6px;
  padding: 8px 8px 4px;
  margin-top: 4px;
  line-height: 1.3;
  font-size: 10.5px;
}
body.is-login .login-card__legal--all a {
  white-space: nowrap;
  font-size: 10.5px;
}
body.is-login .login-card__legal--all span { font-size: 10.5px; opacity: .6; }

/* ============================================================
   v1.3.588 — FINALE Mobile-Absicherung (allerletzter Block).
   Muss nach ALLEN anderen Login-Regeln stehen, damit am Smartphone
   die Seite/Karte scrollbar bleibt und keine Desktop-Höhenregel
   (100dvh + overflow:hidden) das Scrollen blockiert.
   ============================================================ */
@media (max-width: 768px) {
  html { overflow-y: auto !important; height: auto !important; }
  body.is-login {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100dvh !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.is-login .login-screen {
    display: block !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }
  body.is-login .login-hero { display: none !important; }
  body.is-login .login-card {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    width: min(440px, calc(100vw - 24px)) !important;
    margin: 12px auto !important;
    display: block !important;
  }
  body.is-login .login-card__inner {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
  }
  body.is-login .login-card__foot { margin-top: 14px !important; }
}

/* v1.3.589: Nulltreffer-Hinweis der Menü-Suche */
.menu-search__empty {
  margin: 4px 12px 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #66716d;
  background: #faf6ef;
  border: 1px solid #eadfc2;
  border-radius: 8px;
}

/* v1.3.590: KI-Fallback in der Menü-Suche */
.menu-search__empty-text { margin-bottom: 8px; }
.menu-search__ai-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 12px; font-weight: 600;
  color: #fff; background: #0c5a49; border: 0; border-radius: 7px; cursor: pointer;
}
.menu-search__ai-btn::before { content: "✦"; color: #c9a961; }
.menu-search__ai-btn:hover { background: #0a4c3d; }
.menu-search__ai-btn:disabled { opacity: .6; cursor: wait; }
.menu-search__ai-result { margin-top: 10px; }
.menu-search__ai-loading { font-size: 12px; color: #66716d; font-style: italic; }
.menu-search__ai-answer { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: #243230; }
.menu-search__ai-link {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  color: #0c5a49; text-decoration: none; padding: 6px 10px;
  background: #fff; border: 1px solid #c9a961; border-radius: 7px;
}
.menu-search__ai-link:hover { background: #faf6ef; }

/* v1.3.591: KI-Fallback im Hilfe-Dialog */
.help-ai-fallback p { margin-bottom: 10px; }
.help-ai-result { margin-top: 12px; text-align: left; }
.help-ai-loading { font-size: 13px; color: #66716d; font-style: italic; }
.help-ai-answer {
  margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: #243230;
  background: #faf6ef; border-left: 3px solid #c9a961; padding: 10px 12px; border-radius: 6px;
}

/* v1.3.596: Universal-Import-Fläche */
.uimp { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.uimp-dropcard { padding: 18px; }
.uimp-drop {
  border: 2px dashed #c9a961; border-radius: 14px; background: #faf6ef;
  padding: 34px 20px; text-align: center; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.uimp-drop.is-drag { background: #f2ead8; border-color: #0c5a49; }
.uimp-drop__icon { font-size: 40px; margin-bottom: 8px; }
.uimp-drop__title { font-size: 20px; font-weight: 700; color: #0c5a49; margin-bottom: 8px; }
.uimp-drop__sub { font-size: 13.5px; line-height: 1.55; color: #243230; margin-bottom: 16px; }
.uimp-drop__hint { font-size: 12px; color: #66716d; margin-top: 10px; }
.uimp-how { margin-top: 14px; font-size: 13px; }
.uimp-how summary { cursor: pointer; font-weight: 600; color: #0c5a49; }
.uimp-how ol, .uimp-how ul { margin: 10px 0 0 18px; padding: 0; line-height: 1.55; }
.uimp-how li { margin-bottom: 8px; }
.uimp-auto__block strong { color: #0c5a49; }

/* v1.3.641: Adresse in Schritt 4 der Teilen-Anleitung.
   Vorher lag <code> mit flex:1 und min-width:200px in einem normalen div —
   auf dem iPhone lief die Adresse dadurch aus dem schwarzen Kasten heraus und
   der Kopieren-Knopf schob sich darüber. Jetzt eigene Zeile, Knopf darunter. */
.share-addr-inline {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.share-address-code--block {
  display: block;
  width: 100%;
  flex: none;
  min-width: 0;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* v1.3.641: Link zur bebilderten Kurzbefehl-Anleitung. Muss VOR dem
   Mobile-Block stehen — der bleibt der letzte Abschnitt der Datei. */
.share-guide-link {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px solid var(--border, #e2ddd2);
  border-left: 3px solid #c9a961;
  border-radius: 0 10px 10px 0;
  background: #faf6ef;
  text-decoration: none;
  color: inherit;
}
.share-guide-link strong { display: block; color: #0c5a49; }
.share-guide-link small { display: block; margin-top: 2px; color: #6b7671; }
.share-guide-link:hover { background: #f4f0e7; }

/* v1.3.646: Hilfe-Karte kann jetzt zwei Knöpfe tragen (Bereich + Anleitung). */
.help-result-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Mobile-Overrides MÜSSEN der letzte Block bleiben (CSS-Kaskade). */
@media (max-width: 768px) {
  .share-address-code,
  .share-address-code--block {
    font-size: 11.5px;
    padding: 10px 12px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-all;
  }
  .share-address-row { flex-direction: column; align-items: stretch; }
  .share-address-actions { width: 100%; }
  .share-address-actions .btn { flex: 1; }
  .share-filter-warn {
    background: #fdf3e3;
    border-left: 3px solid #9a5b1e;
    padding: 10px 12px;
    border-radius: 0 8px 8px 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v1.3.691 — Eingeklapptes Menü
   ═══════════════════════════════════════════════════════════════════ */

/* Bildmarke nur im eingeklappten Zustand, volles Logo nur im
   ausgeklappten. Vorher wurde das volle Logo samt Wortmarke auf 54px
   gestaucht — die Schrift war dann nicht mehr lesbar. */
.sidebar__logo-mark { display: none; }

.app.sidebar-collapsed .sidebar__logo { display: none !important; }
.app.sidebar-collapsed .sidebar__logo-mark {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 12px;
}
.app.sidebar-collapsed .sidebar__brand {
  padding: 4px 0 14px !important;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

/* Hinweis zum Ausklappen.
   Die reinen Symbole allein sind ohne Beschriftung schwer zuzuordnen —
   deshalb ein sichtbarer Hinweis, dass sich das Menü aufklappen lässt. */
.sidebar__expand-hint { display: none; }

.app.sidebar-collapsed .sidebar__expand-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 auto 12px;
  padding: 9px 4px;
  width: 100%;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--brand-700, #0c5a49);
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  line-height: 1.25;
  text-align: center;
  transition: background .15s ease, border-color .15s ease;
}
.app.sidebar-collapsed .sidebar__expand-hint:hover,
.app.sidebar-collapsed .sidebar__expand-hint:focus-visible {
  background: var(--brand-50, #eef5f2);
  border-color: var(--brand-700, #0c5a49);
  border-style: solid;
}
.sidebar__expand-hint svg { width: 17px; height: 17px; flex: none; }

/* =============================================================
   v1.3.700 — Website-Auslesen im Einrichtungs-Assistenten
   Anlass: Rückmeldung aus dem ersten Test, die Ersteinrichtung sei
   aufwendig. Der Block stand vorher als schlichte Karte zwischen den
   Anforderungen und der Auswahl und wurde übersehen. Jetzt trägt er die
   Markenfarbe und einen Hinweis, dass hier Tipparbeit entfällt.
   ============================================================= */
.wizard-import {
  margin: 18px 0 22px;
  padding: 20px 22px;
  border: 1.5px solid var(--brand-700, #0c5a49);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--brand-50, #eef5f2) 0%, #fff 100%);
  position: relative;
}
.wizard-import__badge {
  display: inline-block;
  margin-bottom: 9px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold, #c9a961);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.wizard-import__title {
  margin: 0 0 6px;
  font-size: 19px;
  color: var(--brand-700, #0c5a49);
}
.wizard-import__text {
  margin: 0 0 14px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--txt-muted, #5a6a66);
}
.wizard-import__row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}
.wizard-import__input {
  flex: 1 1 280px;
  min-width: 0;
  height: 46px;
  font-size: 15px;
}
.wizard-import__btn {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.wizard-import__hint { margin-top: 8px; }


/* =============================================================
   v1.3.715 — Auswahl am Wechseltag
   An einem Tag mit Abreise UND Anreise liegen zwei Buchungen auf
   einer Zelle. Statt die Dreieckshälfte treffen zu müssen (auf dem
   Handy unzumutbar), wird gefragt. Die Schaltflächen sind bewusst
   groß und linksbündig — sie tragen zwei Textzeilen.
   ============================================================= */
.btn--block {
  display: block;
  width: 100%;
  text-align: left;
  line-height: 1.35;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.btn--block:hover,
.btn--block:focus-visible {
  border-color: var(--brand-700, #0c5a49);
  background: var(--brand-50, #eef5f2);
}
.btn--block strong { display: block; font-weight: 600; }


/* =============================================================
   v1.3.724 — Beschriftung im Kalender bändigen

   Bei einer Buchung über EINE Nacht ist die Zelle nur eine Spalte
   breit. `.cal-cell__guest` hatte zwar overflow/ellipsis, die
   Meta-Zeile darunter aber NICHT — „Belegt (Booking.com) · 1 Nacht"
   lief deshalb links und rechts über den Zellrand hinaus.

   Beide Zeilen werden jetzt am Zellrand abgeschnitten. Der
   vollständige Text steht im title-Attribut und beim Öffnen der
   Buchung; abgeschnitten ist besser als über fremden Zellen liegend.
   ============================================================= */
.cal-cell__guest,
.cal-cell__guest-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Eine einzelne Nacht: nur der Name, ohne die zweite Zeile.
   Zwei Zeilen in einer einspaltigen Zelle sind nicht lesbar. */
.cal-cell--pos-single .cal-cell__guest-meta { display: none; }
.cal-cell--pos-single .cal-cell__guest {
  font-size: 11px;
  padding-left: 4px;
  padding-right: 4px;
}


/* =============================================================
   v1.3.728 — Schnellweg: fertigen Kurzbefehl laden
   Steht bewusst VOR der Anleitung von Hand: Wer den Weg nimmt,
   spart acht Schritte. Die Handanleitung bleibt als Rückfallebene
   darunter stehen.
   ============================================================= */
.share-schnellweg {
  margin: 0 0 20px;
  padding: 20px 22px;
  border: 1.5px solid var(--brand-700, #0c5a49);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--brand-50, #eef5f2) 0%, #fff 100%);
}
.share-schnellweg__badge {
  display: inline-block;
  margin-bottom: 9px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold, #c9a961);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.share-schnellweg h3 { margin: 0 0 4px; font-size: 18px; color: var(--brand-700, #0c5a49); }
.share-schnellweg__btn {
  display: inline-block;
  margin: 12px 0 6px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.share-schnellweg__schritte { margin-top: 8px; }


/* v1.3.730: Screenshot im Schnellweg. Bewusst schmaler als die volle Breite —
   es ist ein Handy-Bildschirm im Hochformat, über die ganze Spalte gezogen
   wirkt er unnatürlich groß. */
/* v1.3.735: Deutlich kleiner. Es sind Handy-Aufnahmen im Hochformat —
   mit 320px füllten sie fast den halben Bildschirm und drängten den Text
   weg. 190px reichen, um die markierte Stelle zu erkennen; wer mehr sehen
   will, tippt darauf (öffnet das Bild in voller Größe). */
.share-schnellweg__bild { max-width: 190px; margin: 14px auto 0; }
/* v1.3.737: Das img selbst braucht eine Breite. Ohne sie stellt der Browser
   es in Originalgröße dar (900 px) und sprengt das auf 190 px begrenzte
   figure — genau das war im Betrieb zu sehen. Die Regel steht zusätzlich
   direkt am Element, damit sie auch bei zwischengespeichertem CSS greift. */
.share-schnellweg__bild img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}
.share-schnellweg__bild img { border: 1px solid var(--border); border-radius: 12px; }


/* v1.3.732: Hinweis auf die Kurzbefehle-App. Bewusst NACH den Schritten:
   Bei fast allen ist sie vorhanden — als erste Zeile wäre es eine Hürde,
   die es meistens gar nicht gibt. */
.share-schnellweg__voraussetzung {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fdf6e8;
  border-left: 3px solid var(--gold, #c9a961);
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-muted, #5a6a66);
}
.share-schnellweg__voraussetzung strong { display: block; color: #8a6d2f; }
.share-schnellweg__voraussetzung a { color: var(--brand-700, #0c5a49); font-weight: 600; }


/* v1.3.735: Schlüssel direkt im Schritt kopierbar */
.share-schluessel-inline {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 4px;
}
.share-schluessel-inline code {
  flex: 1 1 180px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #1c2b27; color: #c9a961;
  padding: 7px 10px; border-radius: 8px; font-size: 12px;
}


/* v1.3.735: Bild in voller Größe, Tipp irgendwohin schließt wieder. */
.bild-lupe {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(12, 90, 73, .92);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; cursor: zoom-out;
}
.bild-lupe img {
  max-width: 100%; max-height: 100%;
  border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.4);
}


/* v1.3.746: Einrichtung von Hand — eingeklappt unter dem Schnellweg. */
.share-handarbeit {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.share-handarbeit > summary {
  cursor: pointer;
  padding: 14px 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brand-700, #0c5a49);
  list-style: none;
}
.share-handarbeit > summary::-webkit-details-marker { display: none; }
.share-handarbeit > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform .15s ease;
}
.share-handarbeit[open] > summary::before { transform: rotate(90deg); }
.share-handarbeit[open] > summary { border-bottom: 1px solid var(--border); }
.share-handarbeit > .share-walkthrough { padding: 4px 16px 16px; }


/* =============================================================
   v1.3.749 — Neueste Buchungen im Dashboard
   Eigene Darstellung statt Tabelle: fünf Spalten sind auf 390 px
   nicht unterzubringen. Name oben, Unterkunft und Zeitraum darunter,
   Preis rechts — drei Zeilen statt fünf.
   ============================================================= */
.dash-neu__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.dash-neu__row:last-child { border-bottom: 0; padding-bottom: 2px; }
.dash-neu__row:active { opacity: .6; }
.dash-neu__main { min-width: 0; flex: 1 1 auto; }
.dash-neu__name {
  font-size: 14.5px;
  font-weight: 600;
  color: #1c2b27;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-neu__meta {
  font-size: 12.5px;
  color: var(--txt-muted, #5a6a66);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-neu__preis {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-700, #0c5a49);
  white-space: nowrap;
  flex: 0 0 auto;
  padding-top: 1px;
}


/* =============================================================
   v1.3.753 — Aufklapper im Dashboard
   Statistik, Auswertungen und der Tagesplan liegen jetzt hinter
   einem Aufklapper. Sie sehen aus wie die übrigen Karten, damit
   sie nicht wie ein Fremdkörper wirken — nur eben zu.
   ============================================================= */
.dash-klapp {
  background: var(--surface, #fff);
  /* v1.3.794: Kräftigerer Rahmen und ein leichter Schatten — die Karte soll
     sich vom cremefarbenen Seitengrund abheben, sonst verschwimmt sie damit. */
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold, #c9a961);
  border-radius: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(22, 33, 29, .06);
}
.dash-klapp > summary {
  cursor: pointer;
  /* v1.3.753: Der Titel darf nicht umbrechen — sonst wird aus einer Zeile
     eine dreizeilige Schaltfläche. Die Zusatzangabe weicht zuerst. */
  white-space: nowrap;
  list-style: none;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brand-700, #0c5a49);
}
.dash-klapp > summary::-webkit-details-marker { display: none; }

/* v1.3.793: Deutlicher als Aufklapper erkennbar.
   Vorher stand hier ein „›" nach rechts — dasselbe Zeichen, das überall
   sonst einen Link ankündigt. Dass sich der Bereich öffnet statt eine neue
   Seite zu laden, war nicht zu sehen.
   Jetzt: ein Winkel nach UNTEN in einem eigenen Kreis, der sich beim Öffnen
   umdreht. Das ist die Form, die überall für „hier klappt etwas auf" steht. */
/* v1.3.794: Noch deutlicher. Der helle Kreis ging auf dem weißen Kartengrund
   fast unter. Jetzt gefüllt in Markengrün mit weißem Winkel — das liest man
   auch aus zwei Metern als Schaltfläche. */
.dash-klapp > summary::after {
  content: "";
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand-700, #0c5a49) center center no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  box-shadow: 0 2px 6px rgba(12, 90, 73, .25);
  transition: transform .2s ease, background-color .2s ease;
}
.dash-klapp[open] > summary::after {
  transform: rotate(180deg);
  background-color: var(--gold, #c9a961);
  box-shadow: 0 2px 6px rgba(201, 169, 97, .35);
}
/* Der ganze Kopf reagiert sichtbar auf Berührung — sonst wirkt nur der
   Kreis anfassbar, obwohl die ganze Zeile schaltet. */
.dash-klapp > summary:active { background: var(--cream, #faf6ef); }
.dash-klapp > summary { border-radius: 16px; transition: background .12s ease; }
.dash-klapp[open] > summary { border-radius: 16px 16px 0 0; }
.dash-klapp[open] > summary { border-bottom: 1px solid var(--border); }
/* v1.3.795: Symbol vor dem Titel. Es macht auf einen Blick klar, worum es
   geht — auf dem Handy liest man Überschriften oft nur halb. */
.dash-klapp__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--cream, #faf6ef);
  color: var(--brand-700, #0c5a49);
  margin-right: 2px;
}

/* v1.3.794: „Antippen zum Öffnen" unter dem Titel. Ein Symbol allein wird
   überlesen; der Satz lässt keinen Zweifel. Verschwindet, sobald offen. */
.dash-klapp__hinweis {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--txt-muted, #6b7671);
  margin-top: 2px;
  white-space: nowrap;
}
.dash-klapp[open] .dash-klapp__hinweis { display: none; }
.dash-klapp > summary { align-items: center; }

.dash-klapp__zahl {
  margin-left: auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--txt-muted, #5a6a66);
  white-space: nowrap;
}

/* v1.3.795: Auf schmalen Bildschirmen reicht die Zeile nicht für Symbol,
   Titel, Zusatzangabe und Knopf — „10 · 10" wurde zu „10 …" abgeschnitten.
   Dort rutscht die Zusatzangabe unter den Titel, wo Platz ist. */
@media (max-width: 460px) {
  .dash-klapp > summary { flex-wrap: wrap; row-gap: 2px; }
  .dash-klapp > summary > span:nth-of-type(2) { flex: 1 1 auto; min-width: 0; white-space: normal; }
  .dash-klapp__zahl {
    order: 3;
    flex-basis: 100%;
    margin-left: 40px;   /* auf Höhe des Titels, neben dem Symbol */
    text-align: left;
  }
  .dash-klapp__hinweis { display: none; }   /* die Zusatzangabe sagt hier mehr */
}
.dash-klapp > div { padding: 0 14px 14px; }

/* Jahreswert unter dem 30-Tage-Umsatz.
   v1.3.754: Farben der Kachel übernehmen. Zuvor stand hier das dunkle
   Markengrün — auf dem dunkelgrünen Grund der Kachel war der Wert dadurch
   praktisch unsichtbar. Der Betrag nutzt jetzt dieselbe Farbe wie der große
   Wert darüber, der Zusatz dieselbe wie die Beschriftung. */
.dash-hero-kpi__sub {
  /* v1.3.755: kompakt halten. Alle Kacheln im Raster werden so hoch wie die
     höchste — eine zusätzliche Zeile hier ließ die ganze Reihe wachsen.
     Deshalb einzeilig, knappe Abstände, und der Block darf nie umbrechen. */
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(250, 246, 239, .18);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.2px;
  line-height: 1.2;
  color: var(--bp-cream-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-hero-kpi__sub span {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--bp-cream-mute);
  margin-left: 5px;
}


/* v1.3.776: Beta-Kennzeichnung in der Seitenleiste. Dezent — sie soll
   informieren, nicht beunruhigen. */
.beta-tag {
  display: inline-block;
  background: var(--gold, #c9a961);
  color: #16302a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: 1px;
}
.app.sidebar-collapsed .beta-tag { display: none; }


/* v1.3.777: Beta-Kennzeichnung auf der Anmeldeseite.
   Die Markierung steht ÜBER der Überschrift, nicht daneben — daneben
   würde sie den Zeilenumbruch von „Willkommen bei / Quartiero" stören. */
.login-beta {
  display: block;
  width: fit-content;
  background: var(--gold, #c9a961);
  color: #16302a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.login-beta-note {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--txt-muted, #5a6a66);
  margin-top: 8px;
  max-width: 34ch;
}

/* v1.3.784: Belegungsübersicht im Dashboard. */
.dash-steuer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--cream, #faf6ef);
  border: 1px solid var(--border, #e2ddd2);
  border-left: 3px solid var(--gold, #c9a961);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 16px;
}
.dash-steuer__text strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.dash-steuer__text span { font-size: 13px; color: var(--txt-muted, #6b7671); line-height: 1.5; }
.dash-steuer__aktion { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dash-steuer__text { min-width: 0; }

/* v1.3.788: Auf dem Handy brachen die Bedienelemente rechts aus der Karte.
   Ursache war `flex-shrink: 0` an der Aktionsleiste — zwei Auswahlfelder und
   ein Knopf passen nicht in 390 Pixel, konnten aber nicht schrumpfen.
   Jetzt: Felder teilen sich eine Zeile, der Knopf steht darunter. */
@media (max-width: 640px) {
  .dash-steuer { flex-direction: column; align-items: stretch; gap: 12px; }
  .dash-steuer__aktion { width: 100%; }
  .dash-steuer__aktion select {
    flex: 1 1 0; min-width: 0; width: auto !important;
  }
  .dash-steuer__aktion button {
    flex: 1 1 100%; width: 100%;
  }
  /* v1.3.1019: Haken „mit Kurtaxe“ in eigener Zeile, damit die Auswahlfelder
     ihre volle Breite behalten. */
  .dash-steuer__haken { flex: 1 1 100%; }
}

/* ============================================================
   v1.3.814: Gästemappe — Karten ohne Bild
   ============================================================
   Fehlte bei einer Empfehlung das Foto, blieb die Bildfläche als
   großer grauer Kasten mit einem Emoji darin stehen. Das war der
   auffälligste optische Mangel und widersprach zudem der Vorgabe,
   im Bedienbild keine Emojis zu verwenden.

   Karten ohne Bild sind jetzt kompakt und textlich. Statt der
   Bildfläche trägt die Empfehlungskarte eine schlichte Ziffer.
   MUSS am Dateiende stehen — die Kaskade über ~24.000 Zeilen. */

.guestguide-top3-card--textonly {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 18px 18px 16px;
}
.guestguide-top3-card--textonly .guestguide-top3-card__body { padding: 0; }

.guestguide-top3-card__marker {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(12, 90, 73, .08);
  color: #0c5a49;
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -.02em;
  margin-top: 2px;
}

/* Kategoriekarten ohne Bild: kein leerer Platzhalter mehr, dafür
   eine Akzentkante links, damit die Karte nicht formlos wirkt. */
.guestguide-activity-card-clean--textonly {
  border-left: 3px solid rgba(201, 169, 97, .55);
}
.guestguide-activity-card-clean--textonly .guestguide-activity-card-clean__body {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* ============================================================
   v1.3.815: Gästemappe — WLAN mit Scan-Code
   ============================================================
   Die erste Frage jedes Gastes, deshalb ganz oben und als einzige
   Karte mit dunklem Grund: Sie soll auffallen, alles andere bleibt
   ruhig. Der Code ist groß genug, dass ihn ein zweites Handy aus
   einem halben Meter zuverlässig erfasst. */

.guestguide-wlan { margin: 0 0 18px; }

.guestguide-wlan-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, #0c5a49 0%, #0f6b57 100%);
  color: #fff;
  border-radius: 18px;
  padding: 20px 20px 20px 22px;
  box-shadow: 0 8px 28px rgba(12, 90, 73, .22);
}

.guestguide-wlan-card__text { flex: 1 1 auto; min-width: 0; }

.guestguide-wlan-card__label {
  font-size: 11px;
  letter-spacing: .14em;
  color: #c9a961;
  font-weight: 600;
  margin-bottom: 3px;
}

.guestguide-wlan-card h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #fff;
  word-break: break-word;
}

.guestguide-wlan-card p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  margin: 0;
}

.guestguide-wlan-card__toggle {
  margin-top: 12px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: 8px;
  cursor: pointer;
}
.guestguide-wlan-card__toggle:hover { background: rgba(255, 255, 255, .2); }
.guestguide-wlan-card__toggle:focus-visible { outline: 2px solid #c9a961; outline-offset: 2px; }

.guestguide-wlan-card__pw {
  margin-top: 10px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: .04em;
  background: rgba(0, 0, 0, .22);
  padding: 9px 12px;
  border-radius: 8px;
  word-break: break-all;
  user-select: all;
}

.guestguide-wlan-card__qr {
  flex: 0 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 9px;
  line-height: 0;
}
.guestguide-wlan-card__qr img { width: 104px; height: 104px; display: block; }

@media (max-width: 420px) {
  .guestguide-wlan-card { gap: 14px; padding: 17px; }
  .guestguide-wlan-card__qr img { width: 88px; height: 88px; }
  .guestguide-wlan-card h3 { font-size: 17px; }
}

/* ============================================================
   v1.3.816: Gästemappe — vollständig neu gestaltet
   ============================================================
   Die Vorfassung reihte alles als gleich aussehende weiße Karten
   untereinander. Hier gibt es stattdessen Hierarchie: ein Kopf wie
   eine Postkarte, eine hervorgehobene WLAN-Karte, Eckdaten als
   Ziffern, und die Abschnitte als Ablauf mit einer Linie.

   Eigener Namensraum "gm-", damit nichts mit den Regeln der App
   kollidiert. MUSS vor den Mobile-Overrides stehen. */

.gm-body{background:#faf6ef;margin:0}
.gm{--gm-gruen:#0c5a49;--gm-tief:#073f35;--gm-gold:#c9a961;--gm-tinte:#1a2420;
  --gm-grau:#5a6a66;--gm-creme:#faf6ef;--gm-linie:#e6e0d4;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  color:var(--gm-tinte);line-height:1.55;background:var(--gm-creme);
  -webkit-font-smoothing:antialiased;max-width:none;padding:0}
.gm *{box-sizing:border-box}
.gm h1,.gm h2,.gm h3,.gm p{margin:0}

/* ---------- Kopf ---------- */
.gm-kopf{position:relative;min-height:74vh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:26px 22px 34px;overflow:hidden}
.gm-kopf__bild{position:absolute;inset:0;
  background:linear-gradient(200deg,var(--gm-v1,#1d6b57) 0%,var(--gm-v2,#2f8468) 38%,var(--gm-v3,#7fae8f) 100%);
  background-size:cover;background-position:center}
.gm-kopf__bild--foto::before{content:'';position:absolute;inset:0;background:rgba(var(--gm-schatten,7,63,53),.35)}
.gm-kopf__bild::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--gm-schatten,7,63,53),.94) 0%,rgba(var(--gm-schatten,7,63,53),.55) 38%,rgba(var(--gm-schatten,7,63,53),.12) 78%)}
.gm-kopf__kontur{position:absolute;left:-14%;bottom:0;width:128%;height:66%;opacity:.2}
.gm-kopf__inhalt{position:relative;z-index:2;color:#fff}
.gm-kopf__logo{margin-bottom:16px}
.gm-kopf__logo img{display:block;max-height:58px;max-width:190px;width:auto;height:auto;
  background:rgba(255,255,255,.95);border-radius:10px;padding:9px 13px;
  box-shadow:0 3px 14px rgba(7,63,53,.18)}
.gm-kopf__logo--hell img{background:none;box-shadow:none;padding:0;max-height:52px}
.gm-kopf__ort{font-size:11.5px;letter-spacing:.2em;color:var(--gm-gold);
  font-weight:600;margin-bottom:14px}
.gm-kopf h1{font-size:clamp(30px,10vw,40px);line-height:1.04;font-weight:600;
  letter-spacing:-.025em;margin-bottom:16px;color:#fff}
.gm-kopf__z1{display:block}
.gm-kopf h1 em{font-style:normal;font-weight:300;display:block}
.gm-kopf__text{font-size:15px;color:rgba(255,255,255,.86);max-width:32ch}

/* ---------- WLAN ---------- */
.gm-wlan{margin:-22px 18px 0;position:relative;z-index:3}
.gm-wlan__karte{display:flex;gap:16px;align-items:center;background:#fff;
  border-radius:16px;padding:16px 18px;box-shadow:0 12px 34px rgba(7,63,53,.16)}
.gm-wlan__text{flex:1 1 auto;min-width:0}
.gm-wlan__label{font-size:10.5px;letter-spacing:.18em;color:var(--gm-gold);font-weight:600}
.gm-wlan__karte h2{font-size:19px;font-weight:600;color:var(--gm-gruen);
  margin:2px 0 3px;letter-spacing:-.01em;word-break:break-word}
.gm-wlan__karte p{font-size:12.5px;color:var(--gm-grau);line-height:1.45}
.gm-wlan__knopf{margin-top:10px;background:rgba(12,90,73,.08);
  border:1px solid rgba(12,90,73,.16);color:var(--gm-gruen);font:inherit;
  font-size:12.5px;padding:7px 13px;border-radius:8px;cursor:pointer}
.gm-wlan__knopf:hover{background:rgba(12,90,73,.14)}
.gm-wlan__pw{margin-top:9px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:15px;letter-spacing:.04em;background:rgba(12,90,73,.07);padding:8px 11px;
  border-radius:8px;word-break:break-all;user-select:all;color:var(--gm-tinte)}
.gm-wlan__qr{flex:0 0 auto;background:var(--gm-gruen);border-radius:11px;padding:7px;line-height:0}
.gm-wlan__qr img{width:76px;height:76px;display:block;border-radius:5px;background:#fff}

/* ---------- Eckdaten ---------- */
.gm-eck{display:flex;margin:30px 22px 0;border-top:1px solid var(--gm-linie);
  border-bottom:1px solid var(--gm-linie)}
.gm-eck__feld{flex:1;padding:16px 0;text-align:center;position:relative}
.gm-eck__feld+.gm-eck__feld::before{content:'';position:absolute;left:0;top:16px;
  bottom:16px;width:1px;background:var(--gm-linie)}
.gm-eck__feld strong{display:block;font-size:25px;font-weight:600;color:var(--gm-gruen);
  letter-spacing:-.02em;line-height:1.1}
.gm-eck__feld span{font-size:11px;color:var(--gm-grau);letter-spacing:.04em}

/* ---------- Abschnittsköpfe ---------- */
.gm-abschnitt__kopf{margin-bottom:16px}
.gm-abschnitt__kopf h2{font-size:12px;letter-spacing:.16em;color:var(--gm-gold);
  font-weight:600;margin-bottom:4px}
.gm-abschnitt__kopf p{font-size:22px;font-weight:500;color:var(--gm-gruen);
  letter-spacing:-.02em;line-height:1.25}

/* ---------- Wetter ---------- */
.gm-wetter{margin:34px 22px 0}
.gm-wetter__jetzt{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.gm-wetter__jetzt-icon{flex:0 0 auto;width:48px;height:48px}
.gm-wetter__jetzt-text strong{font-size:36px;font-weight:300;color:var(--gm-gruen);
  letter-spacing:-.04em;line-height:1;display:block}
.gm-wetter__jetzt-text span{display:block;font-size:15px;color:var(--gm-tinte);
  font-weight:500;margin-top:2px}
.gm-wetter__jetzt-text em{display:block;font-style:normal;font-size:12px;color:var(--gm-grau)}
.gm-verlauf{margin-top:14px;position:relative}
.gm-verlauf__kurve{width:100%;height:62px;display:block;margin-bottom:-8px}
.gm-verlauf__punkte{position:absolute;left:0;right:0;top:0;height:62px;pointer-events:none}
.gm-verlauf__punkte span{position:absolute;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--gm-gold);transform:translate(-50%,-50%)}
.gm-verlauf__tage{display:flex}
.gm-vtag{flex:1;text-align:center;padding:8px 2px 10px;border-radius:12px}
.gm-vtag em{display:block;font-style:normal;font-size:11px;color:var(--gm-grau);
  letter-spacing:.05em;margin-bottom:6px}
.gm-vtag svg{width:32px;height:32px;margin-bottom:6px}
.gm-vtag strong{display:block;font-size:15px;font-weight:600;color:var(--gm-tinte)}
.gm-vtag span{font-size:12px;color:var(--gm-grau)}
.gm-vtag--heute{background:rgba(12,90,73,.06)}
.gm-vtag--heute em{color:var(--gm-gruen);font-weight:600}
.gm-vtag--nass{background:rgba(91,147,171,.09)}
.gm-wetter__hinweis{margin-top:12px;font-size:13px;color:var(--gm-grau);line-height:1.5;
  padding-left:12px;border-left:2px solid var(--gm-gold)}
.gm-wetter__fern{display:flex;gap:14px;align-items:flex-start;padding:4px 0}
.gm-wetter__fern svg{flex:0 0 auto;color:var(--gm-gruen);opacity:.45}
.gm-wetter__fern strong{display:block;font-size:15px;font-weight:600;margin-bottom:3px}
.gm-wetter__fern p{font-size:13.5px;color:var(--gm-grau);line-height:1.55;max-width:36ch}

/* ---------- Ablauf ---------- */
.gm-strang{margin:38px 0 0;padding:0 22px}
.gm-schritte{position:relative;padding-left:26px}
.gm-schritte::before{content:'';position:absolute;left:6px;top:8px;bottom:14px;width:1px;
  background:linear-gradient(to bottom,var(--gm-gold),var(--gm-linie));
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.1s cubic-bezier(.4,.8,.4,1)}
.gm-schritte.gm-sichtbar::before{transform:scaleY(1)}
.gm-schritt{position:relative;padding-bottom:26px}
.gm-schritt::before{content:'';position:absolute;left:-24px;top:7px;width:9px;height:9px;
  border-radius:50%;background:var(--gm-creme);border:2px solid var(--gm-gold);
  transform:scale(0);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.gm-schritte.gm-sichtbar .gm-schritt:nth-child(1)::before{transform:scale(1);transition-delay:.2s}
.gm-schritte.gm-sichtbar .gm-schritt:nth-child(2)::before{transform:scale(1);transition-delay:.5s}
.gm-schritte.gm-sichtbar .gm-schritt:nth-child(3)::before{transform:scale(1);transition-delay:.8s}
.gm-schritte.gm-sichtbar .gm-schritt:nth-child(n+4)::before{transform:scale(1);transition-delay:1.05s}
.gm-schritt h3{font-size:16px;font-weight:600;margin-bottom:5px;letter-spacing:-.01em;
  color:var(--gm-tinte)}
.gm-schritt p{font-size:14px;color:var(--gm-grau);line-height:1.6;margin-bottom:6px}

/* ---------- Empfehlungen ---------- */
.gm-tipps{margin-top:44px}
.gm-tipps__kopf{padding:0 22px}
.gm-kachel{position:relative;margin:0 22px 14px;min-height:178px;border-radius:16px;
  overflow:hidden;display:flex;align-items:flex-end;padding:18px;
  transition:transform .25s ease}
.gm-kachel:active{transform:scale(.985)}
.gm-kachel__bg{position:absolute;top:-22%;left:0;right:0;height:144%;
  background-size:cover;background-position:center;will-change:transform}
.gm-kachel--1 .gm-kachel__bg{background-color:var(--gm-k1a,#2b6f58);
  background-image:linear-gradient(150deg,var(--gm-k1a,#2b6f58),var(--gm-k1b,#69996f))}
.gm-kachel--2 .gm-kachel__bg{background-color:var(--gm-k2a,#54663f);
  background-image:linear-gradient(150deg,var(--gm-k2a,#54663f),var(--gm-k2b,#93a86a))}
.gm-kachel--3 .gm-kachel__bg{background-color:var(--gm-k3a,#2d5f74);
  background-image:linear-gradient(150deg,var(--gm-k3a,#2d5f74),var(--gm-k3b,#6fa0ad))}
.gm-kachel__bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--gm-schatten,10,35,28),.88),rgba(var(--gm-schatten,10,35,28),.05) 72%)}

/* v1.3.936: Farbverläufe statt Fotos. Fünf feste Stimmungen; "eigene" setzt
   die Werte per Skript aus der Hauptfarbe. "wald" ist der bisherige Standard. */
.gm--verlauf-see{--gm-v1:#1d4e6b;--gm-v2:#2f6f8a;--gm-v3:#8fb5c4;--gm-schatten:10,40,58;
  --gm-k1a:#2d5f74;--gm-k1b:#6fa0ad;--gm-k2a:#1f4f66;--gm-k2b:#5f8fa8;--gm-k3a:#3a6b73;--gm-k3b:#86b0aa}
.gm--verlauf-abend{--gm-v1:#4a2a45;--gm-v2:#8a4a5c;--gm-v3:#d49a7a;--gm-schatten:48,24,40;
  --gm-k1a:#6b3a4f;--gm-k1b:#b07a86;--gm-k2a:#7a4a3a;--gm-k2b:#c79a7a;--gm-k3a:#4f3a6b;--gm-k3b:#8f7ab0}
.gm--verlauf-sand{--gm-v1:#5e4e30;--gm-v2:#9a8456;--gm-v3:#d6c49a;--gm-schatten:52,42,24;
  --gm-k1a:#7a6440;--gm-k1b:#b8a070;--gm-k2a:#6b5a48;--gm-k2b:#a89a80;--gm-k3a:#5f6b48;--gm-k3b:#9aa880}
.gm--verlauf-schiefer{--gm-v1:#252c36;--gm-v2:#46505e;--gm-v3:#8f9aa8;--gm-schatten:22,27,34;
  --gm-k1a:#343d4a;--gm-k1b:#6f7a8a;--gm-k2a:#3d4a4a;--gm-k2b:#7a8f8f;--gm-k3a:#4a4340;--gm-k3b:#8f857f}

/* v1.3.936: Bilder und PDFs in Abschnitten (z. B. Lageplan). */
.gm-medien{display:grid;gap:12px;margin-top:12px}
.gm-bild{margin:0}
.gm-bild__knopf{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in;
  border-radius:14px;overflow:hidden;box-shadow:0 4px 18px rgba(7,63,53,.10)}
.gm-bild__knopf img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;background:#fff}
.gm-bild figcaption{font-size:13px;color:#6b7a74;margin-top:6px}
.gm-pdf{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;
  background:#fff;box-shadow:0 4px 18px rgba(7,63,53,.10);text-decoration:none;color:inherit}
.gm-pdf__symbol{flex:0 0 auto;width:44px;height:52px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:600;letter-spacing:.06em;color:#fff;
  background:var(--gm-gruen,#0c5a49)}
.gm-pdf__text{display:flex;flex-direction:column}
.gm-pdf__text strong{font-weight:600;color:var(--gm-gruen,#0c5a49)}
.gm-pdf__text em{font-style:normal;font-size:13px;color:#6b7a74}
.gm-lupe{position:fixed;inset:0;z-index:100000;background:rgba(10,20,18,.94);display:flex;
  flex-direction:column;align-items:center;justify-content:center;padding:52px 10px 18px}
.gm-lupe__flaeche{flex:1;width:100%;overflow:auto;display:flex;align-items:center;justify-content:center;
  touch-action:pinch-zoom pan-x pan-y;-webkit-overflow-scrolling:touch}
.gm-lupe__flaeche img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in}
.gm-lupe--gross .gm-lupe__flaeche{align-items:flex-start;justify-content:flex-start}
.gm-lupe--gross .gm-lupe__flaeche img{max-width:none;max-height:none;width:220%;cursor:zoom-out}
.gm-lupe__zu{position:absolute;top:10px;right:12px;width:40px;height:40px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.gm-lupe__titel{color:#fff;font-size:14px;margin-top:10px;text-align:center}
.gm-lupe__original{color:#fff;opacity:.8;font-size:13px;margin-top:6px}
.gm-kachel__t{position:relative;z-index:2;color:#fff;will-change:transform}
.gm-kachel__kat{font-size:10.5px;letter-spacing:.16em;color:var(--gm-gold);
  font-weight:600;margin-bottom:5px}
.gm-kachel h3{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px;color:#fff}
.gm-kachel p{font-size:13px;color:rgba(255,255,255,.82);line-height:1.45}

/* ---------- Unterlagen ---------- */
.gm-dokumente{margin:40px 22px 0}
.gm-dok-liste{display:flex;flex-wrap:wrap;gap:10px}
.gm-dok{display:inline-flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--gm-linie);border-radius:10px;padding:11px 15px;
  text-decoration:none;color:var(--gm-gruen);font-size:14px;font-weight:500}
.gm-dok:hover{border-color:var(--gm-gold)}

/* ---------- Kontakt ---------- */
.gm-fuss{margin-top:44px;background:var(--gm-tief);color:#fff;padding:34px 22px 40px}
.gm-fuss h2{font-size:22px;font-weight:500;letter-spacing:-.02em;margin-bottom:6px;color:#fff}
.gm-fuss p{font-size:14px;color:rgba(255,255,255,.75);margin-bottom:22px;max-width:32ch}
.gm-fuss__zeile{display:flex;gap:10px;margin-bottom:9px;align-items:center}
.gm-fuss__zeile em{font-style:normal;font-size:11px;letter-spacing:.14em;
  color:var(--gm-gold);width:64px;flex:0 0 auto;font-weight:600}
.gm-fuss__zeile a,.gm-fuss__zeile span{font-size:14.5px;color:#fff;text-decoration:none}
.gm-fuss__zeile a:hover{text-decoration:underline}

.gm-ladefehler{padding:60px 24px;text-align:center;color:var(--gm-grau);font-size:15px}

/* ---------- Tablet und Rechner ----------
   Über etwa 70 Zeichen je Zeile verliert das Auge beim Zeilenwechsel
   den Anschluss. Deshalb eine feste Spalte statt voller Breite. */
@media (min-width:700px){
  .gm-kopf{min-height:62vh;padding:44px 0 54px;align-items:center}
  .gm-kopf__inhalt{width:100%;max-width:680px;padding:0 34px}
  .gm-kopf h1{font-size:clamp(40px,5.5vw,56px)}
  .gm-kopf__text{font-size:17px;max-width:40ch}
  .gm-wlan{max-width:680px;margin-left:auto;margin-right:auto}
  .gm-wlan__karte{padding:20px 26px}
  .gm-wlan__karte h2{font-size:22px}
  .gm-wlan__qr img{width:92px;height:92px}
  .gm-eck,.gm-wetter,.gm-strang,.gm-tipps__kopf,.gm-dokumente{
    max-width:680px;margin-left:auto;margin-right:auto}
  .gm-eck__feld strong{font-size:30px}
  .gm-wetter__jetzt-icon{width:56px;height:56px}
  .gm-wetter__jetzt-text strong{font-size:44px}
  .gm-vtag svg{width:38px;height:38px}
  .gm-abschnitt__kopf p{font-size:26px}
  .gm-schritt h3{font-size:17px}
  .gm-schritt p{font-size:15px;max-width:62ch}
  .gm-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:16px;
    max-width:680px;margin:0 auto;padding:0 22px}
  .gm-kachel{margin:0;min-height:210px}
  .gm-kachel:first-child{grid-column:1/-1;min-height:250px}
  .gm-kachel h3{font-size:22px}
  .gm-fuss{padding:48px 0 56px}
  .gm-fuss__inhalt{max-width:680px;margin:0 auto;padding:0 34px}
  .gm-fuss h2{font-size:28px}
}

@media (min-width:1040px){
  .gm-kopf{min-height:58vh}
  .gm-kopf__inhalt,.gm-wlan,.gm-eck,.gm-wetter,.gm-strang,.gm-tipps__kopf,
  .gm-kacheln,.gm-dokumente,.gm-fuss__inhalt{max-width:860px}
  .gm-kopf h1{font-size:clamp(48px,4.5vw,64px)}
  .gm-kacheln{grid-template-columns:repeat(3,1fr)}
  .gm-kachel:first-child{grid-column:1/-1;min-height:300px}
  .gm-kachel{min-height:230px}
  .gm-schritte{display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt alles sofort und still. */
@media (prefers-reduced-motion:reduce){
  .gm-kopf__kontur path,.gm-kachel__bg,.gm-kachel__t{transform:none !important}
  .gm-schritte::before,.gm-schritt::before{transition:none;transform:none !important}
  .gm-kachel{transition:none}
}

/* v1.3.817: Gastgeber-Tipp — ruhig gesetzt, damit er neben den
   Empfehlungskacheln nicht untergeht, aber auch nicht mit ihnen
   konkurriert. */
.gm-gastgebertipp{margin:38px 22px 0}
.gm-gastgebertipp__inhalt{background:#fff;border-left:3px solid var(--gm-gold);
  border-radius:0 12px 12px 0;padding:16px 18px}
.gm-gastgebertipp__label{font-size:11px;letter-spacing:.16em;color:var(--gm-gold);
  font-weight:600;margin-bottom:5px}
.gm-gastgebertipp p{font-size:14px;color:var(--gm-grau);line-height:1.6}
@media (min-width:700px){
  .gm-gastgebertipp{max-width:680px;margin-left:auto;margin-right:auto}
}
@media (min-width:1040px){ .gm-gastgebertipp{max-width:860px} }

/* v1.3.822: Detailansicht einer Empfehlung.
   Überlagerung statt eigener Seite — nach dem Schließen steht der Gast
   wieder an derselben Stelle. */
.gm-kachel--klickbar{cursor:pointer}
.gm-kachel--klickbar:focus-visible{outline:3px solid #c9a961;outline-offset:3px}
.gm-kachel__mehr{display:inline-block;margin-top:9px;font-size:12px;font-weight:600;
  color:#c9a961;letter-spacing:.02em}
.gm-kachel__mehr::after{content:' →'}

.gm-detail{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;
  justify-content:center;opacity:0;transition:opacity .22s ease}
.gm-detail--offen{opacity:1}
.gm-detail__hinter{position:absolute;inset:0;background:rgba(7,25,20,.62);
  backdrop-filter:blur(2px)}
.gm-detail__karte{position:relative;width:100%;max-width:560px;max-height:92vh;
  overflow-y:auto;background:#faf6ef;border-radius:20px 20px 0 0;
  transform:translateY(24px);transition:transform .26s cubic-bezier(.2,.9,.3,1);
  -webkit-overflow-scrolling:touch}
.gm-detail--offen .gm-detail__karte{transform:none}
.gm-detail__zu{position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;
  border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#1a2420;
  font-size:24px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(7,63,53,.2)}
.gm-detail__bild{height:210px;background-size:cover;background-position:center;
  border-radius:20px 20px 0 0}
.gm-detail__inhalt{padding:22px}
.gm-detail__kat{font-size:11px;letter-spacing:.16em;color:#c9a961;font-weight:600;
  margin-bottom:6px}
.gm-detail__karte h2{font-size:24px;font-weight:600;color:#0c5a49;letter-spacing:-.02em;
  margin-bottom:6px;line-height:1.2}
.gm-detail__lage{font-size:13px;color:#5a6a66;margin-bottom:14px}
.gm-detail__text p{font-size:15px;line-height:1.65;color:#3d4d48;margin-bottom:10px}
.gm-detail__knoepfe{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.gm-detail__knopf{display:inline-block;background:#0c5a49;color:#fff;text-decoration:none;
  padding:11px 20px;border-radius:9px;font-size:14px;font-weight:500}
.gm-detail__knopf--leise{background:none;color:#0c5a49;border:1px solid #d8d2c6}

@media (min-width:700px){
  .gm-detail{align-items:center;padding:24px}
  .gm-detail__karte{border-radius:20px}
  .gm-detail__bild{border-radius:20px 20px 0 0;height:260px}
}
@media (prefers-reduced-motion:reduce){
  .gm-detail,.gm-detail__karte{transition:none}
  .gm-detail__karte{transform:none}
}

/* v1.3.828: Kachelgröße der Empfehlungen.
   Die Einstellung "Kachel" war bis hierhin ohne jede Wirkung. Auf dem
   Handy steht ohnehin alles untereinander; ab zwei Spalten greifen die
   Größen. Ist mindestens eine Größe gesetzt, entfällt die Sonderregel,
   die sonst die erste Kachel über die volle Breite zieht. */
@media (min-width:700px){
  .gm-kacheln--gesteuert .gm-kachel:first-child{grid-column:auto;min-height:210px}
  .gm-kachel--voll,.gm-kachel--breit{grid-column:1/-1}
  .gm-kachel--voll{min-height:260px}
  .gm-kachel--schmal{min-height:170px}
}
@media (min-width:1040px){
  .gm-kacheln--gesteuert .gm-kachel:first-child{grid-column:auto;min-height:230px}
  .gm-kachel--breit{grid-column:span 2}
  .gm-kachel--voll{grid-column:1/-1;min-height:300px}
}

/* v1.3.828: Unterlage als aufklappbarer Text — für Hausordnung oder
   Mietvertrag, die im Editor geschrieben und nicht als Datei hinterlegt
   wurden. */
.gm-dok-text{width:100%}
.gm-dok-text summary{list-style:none;cursor:pointer}
.gm-dok-text summary::-webkit-details-marker{display:none}
.gm-dok-text[open] summary{border-color:var(--gm-gold)}
.gm-dok-text__inhalt{background:#fff;border-radius:12px;margin-top:10px;
  padding:16px 18px;font-size:14px;color:var(--gm-grau);line-height:1.6}
.gm-dok-text__inhalt p{margin-bottom:10px}
.gm-dok-text__inhalt p:last-child{margin-bottom:0}

/* v1.3.829/832: Gästekarte (Kurkarte) — sitzt zwischen Kopfbereich und
   WLAN-Karte. Bei mehreren Reisenden liegen die Karten nebeneinander und
   werden gewischt: Jede Person zeigt im Bus ihre eigene vor. */
/* v1.3.958: Nicht mehr ins Kopfbild hineinziehen — die grüne Überschrift
   stand sonst auf dem dunklen Foto und war nicht zu lesen. */
.gm-karte{margin:20px 0 0;position:relative;z-index:4}
.gm-karte:empty{display:none}
.gm-karte__kopf{display:flex;align-items:baseline;gap:10px;padding:0 18px 10px}
.gm-karte__kopf h2{font-size:19px;font-weight:600;color:var(--gm-gruen);
  letter-spacing:-.01em}
.gm-karte__zahl{font-size:12px;color:var(--gm-grau)}
.gm-karte__bahn{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:0 18px 4px;scrollbar-width:none}
.gm-karte__bahn::-webkit-scrollbar{display:none}
.gm-karte__blatt{flex:0 0 auto;width:min(84%,320px);scroll-snap-align:center;
  background:#fff;border-radius:16px;padding:16px 18px;
  box-shadow:0 12px 34px rgba(7,63,53,.16)}
.gm-karte__label{font-size:10.5px;letter-spacing:.18em;color:var(--gm-gold);font-weight:600}
.gm-karte__blatt h3{font-size:18px;font-weight:600;color:var(--gm-gruen);
  margin:2px 0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-karte__knopf{display:block;text-align:center;text-decoration:none;
  background:var(--gm-gruen);color:#faf6ef;border-radius:10px;padding:12px 14px;
  font-size:14px;font-weight:600}
.gm-karte__knopf:hover{filter:brightness(1.08)}
.gm-karte__punkte{display:flex;justify-content:center;gap:7px;padding:12px 0 0}
.gm-karte__punkt{width:7px;height:7px;border-radius:50%;border:0;padding:0;
  background:rgba(12,90,73,.22);cursor:pointer}
.gm-karte__punkt.is-aktiv{background:var(--gm-gold);width:18px;border-radius:4px}
.gm-karte__info{display:block;text-align:center;margin-top:10px;font-size:12.5px;
  color:var(--gm-grau);text-decoration:underline}
.gm-karte:not(:empty) + .gm-wlan{margin-top:16px}
@media (min-width:700px){
  .gm-karte__bahn,.gm-karte__kopf{max-width:680px;margin-left:auto;margin-right:auto}
  .gm-karte__blatt{width:300px}
}
@media (min-width:1040px){
  .gm-karte__bahn,.gm-karte__kopf{max-width:860px}
}
@media (prefers-reduced-motion:reduce){
  .gm-karte__bahn{scroll-behavior:auto}
}

/* v1.3.829/830: Zeilen der Gästekarten in der Buchungsbearbeitung.
   Name und Abholadresse oben, Link und Zustand darunter. */
.guestcard-list{display:flex;flex-direction:column;gap:12px}
.guestcard-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;
  gap:8px;align-items:center;padding:10px;border:1px solid rgba(0,0,0,.07);
  border-radius:10px}
.guestcard-row__addr{display:flex;gap:6px;align-items:center;min-width:0}
.guestcard-row__addr .input{min-width:0}
.guestcard-row__url{grid-column:1/-1}
.guestcard-row__state{grid-column:1/-1;font-size:12px;color:var(--text-muted,#6b7280)}
.guestcard-row__state.is-ok{color:#0c7a52}
@media (max-width:768px){
  .guestcard-row{grid-template-columns:minmax(0,1fr) auto}
  .guestcard-row__addr{grid-column:1/-1}
}

/* v1.3.833: Webcams in der Gästemappe — direkt unter dem Wetter. */
.gm-cams{margin:40px 22px 0}
.gm-cams__raster{display:grid;gap:12px}
.gm-cam{display:block;position:relative;border-radius:14px;overflow:hidden;
  background:rgba(12,90,73,.06);text-decoration:none;
  box-shadow:0 10px 28px rgba(7,63,53,.12)}
.gm-cam__bild{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;background:rgba(12,90,73,.08)}
.gm-cam__fuss{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;padding:10px 14px;background:#fff}
.gm-cam__fuss span{font-size:14px;font-weight:600;color:var(--gm-gruen)}
.gm-cam__fuss em{font-style:normal;font-size:11px;color:var(--gm-grau)}
@media (min-width:700px){
  .gm-cams{max-width:680px;margin-left:auto;margin-right:auto}
  .gm-cams__raster{grid-template-columns:1fr 1fr}
  .gm-cams__raster > .gm-cam:only-child{grid-column:1/-1}
}
@media (min-width:1040px){ .gm-cams{max-width:860px} }

/* v1.3.835: Buchung steht nicht mehr im Portal-Kalender.
   Solange niemand sie angesehen hat, warnend rot; nach dem Verwerfen des
   Freigabe-Hinweises bleibt sie sichtbar, aber ruhig. */
.cal-feed-dot{display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;border-radius:50%;background:#c0392b;color:#fff;
  font-size:10px;font-weight:700;line-height:1;margin-right:3px;flex:0 0 auto}
.cal-feed-dot--ok{background:rgba(255,255,255,.85);color:#7a5a20}

/* v1.3.839: Versionshinweise nach dem Update. */
.release-notes{display:flex;flex-direction:column;gap:18px}
.release-note h3{font-size:15px;font-weight:600;margin-bottom:6px}
.release-note ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.release-note li{font-size:13.5px;line-height:1.5;color:var(--text-secondary,#4b5563)}

/* v1.3.841: Hinweis im Buchungs-Detailfenster, wenn die Buchung nicht mehr
   im Portal-Kalender steht. */
.cal-feed-warn{border:1px solid rgba(192,57,43,.3);background:rgba(192,57,43,.06);
  border-radius:10px;padding:12px 14px;margin-bottom:16px}
.cal-feed-warn strong{display:block;font-size:13.5px;color:#a3291d;margin-bottom:4px}
.cal-feed-warn p{font-size:12.5px;line-height:1.5;color:var(--text-secondary,#4b5563);
  margin-bottom:10px}

/* v1.3.844: Vorschau einer geplanten Nachricht. */
.preview-body{white-space:pre-wrap;font-family:inherit;font-size:13px;line-height:1.55;
  background:var(--muted-bg,#f6f6f4);border-radius:8px;padding:12px 14px;margin:0;
  max-height:50vh;overflow:auto}

/* v1.3.851: Hinweis in der Gästemappe, die Seite wie eine App abzulegen. */
.gm-pwa{position:fixed;inset:0;z-index:60;background:rgba(7,63,53,.45);
  display:flex;align-items:flex-end;justify-content:center;padding:16px}
.gm-pwa__karte{position:relative;background:#fff;border-radius:18px;padding:20px 22px;
  width:100%;max-width:420px;box-shadow:0 20px 50px rgba(7,63,53,.28)}
.gm-pwa__karte h3{font-size:19px;font-weight:600;color:var(--gm-gruen);margin:2px 0 6px}
.gm-pwa__karte p{font-size:13.5px;color:var(--gm-grau);line-height:1.5;margin-bottom:12px}
.gm-pwa__karte ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.gm-pwa__karte li{font-size:13.5px;line-height:1.45;color:var(--gm-tinte)}
.gm-pwa__zu{position:absolute;top:10px;right:12px;border:0;background:transparent;
  font-size:26px;line-height:1;color:var(--gm-grau);cursor:pointer;padding:4px 8px}
.gm-pwa__knopf{width:100%;border:0;border-radius:10px;padding:13px 16px;
  background:var(--gm-gruen);color:#faf6ef;font-size:14.5px;font-weight:600;cursor:pointer}
.gm-pwa__knopf:hover{filter:brightness(1.08)}
@media (min-width:700px){ .gm-pwa{align-items:center} }

/* v1.3.855: Farbwahl der Gästemappe mit sichtbarem Muster und Vorschau. */
.farbwahl{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.farb-zeile{display:flex;align-items:center;gap:14px}
.farb-muster{position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:12px;
  overflow:hidden;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.farb-muster input[type=color]{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;border:0;padding:0;cursor:pointer}
.farb-muster__flaeche{display:block;width:100%;height:100%}
.farb-zeile__text{flex:1 1 auto;min-width:0}
.farb-zeile__text strong{display:block;font-size:14px}
.farb-zeile__text em{display:block;font-style:normal;font-size:12px;
  color:var(--text-muted,#6b7280);margin-bottom:6px}
.farb-tipps{display:flex;gap:6px;flex-wrap:wrap}
.farb-tipp{width:20px;height:20px;border-radius:50%;border:0;padding:0;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.farb-tipp:hover{transform:scale(1.15)}
.farb-wert{flex:0 0 96px;width:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;text-transform:lowercase}

.farb-vorschau{--v-primaer:#0c5a49;--v-tief:#073f35;--v-akzent:#c9a961;--v-flaeche:#faf6ef;
  border-radius:14px;overflow:hidden;box-shadow:0 2px 14px rgba(0,0,0,.1);margin-bottom:12px}
.farb-vorschau__kopf{background:linear-gradient(160deg,var(--v-primaer),var(--v-tief));
  padding:18px 18px 20px;color:#fff}
.farb-vorschau__label{display:block;font-size:9.5px;letter-spacing:.18em;
  color:var(--v-akzent);font-weight:600;margin-bottom:4px}
.farb-vorschau__kopf strong{font-size:17px;font-weight:600}
.farb-vorschau__leiste{height:3px;background:var(--v-akzent)}
.farb-vorschau__flaeche{background:var(--v-flaeche);padding:14px 16px;display:flex;
  gap:12px;align-items:center;flex-wrap:wrap}
.farb-vorschau__karte{background:#fff;border-radius:10px;padding:10px 14px;flex:1 1 auto;
  min-width:120px;box-shadow:0 4px 12px rgba(0,0,0,.07)}
.farb-vorschau__klein{display:block;font-size:9.5px;letter-spacing:.16em;
  color:var(--v-akzent);font-weight:600}
.farb-vorschau__karte b{font-size:14px;color:var(--v-primaer)}
.farb-vorschau__knopf{background:var(--v-primaer);color:#fff;border-radius:9px;
  padding:10px 16px;font-size:13px;font-weight:600}
@media (max-width:640px){
  .farb-zeile{flex-wrap:wrap}
  .farb-wert{flex:1 1 100%;width:100%}
}

/* v1.3.857: Schriftgröße der Gästemappe.
   Vergrößert wird die ganze Mappe, nicht nur die Buchstaben — sonst
   sprengen sie ihre Kacheln. */
.gm[data-schrift="gross"]{zoom:1.14}
.gm[data-schrift="sehr-gross"]{zoom:1.28}

/* Kennt ein Browser zoom nicht, greift der zweite Weg: die Grundschrift
   wächst, und die Stellen mit fester Größe werden nachgezogen. Nicht so
   gleichmäßig wie zoom, aber lesbar. */
@supports not (zoom: 1) {
  .gm[data-schrift="gross"]{font-size:17px}
  .gm[data-schrift="gross"] p,
  .gm[data-schrift="gross"] li,
  .gm[data-schrift="gross"] .gm-kopf__text{font-size:17px}
  .gm[data-schrift="sehr-gross"]{font-size:19px}
  .gm[data-schrift="sehr-gross"] p,
  .gm[data-schrift="sehr-gross"] li,
  .gm[data-schrift="sehr-gross"] .gm-kopf__text{font-size:19px}
}

.gm-schrift{position:fixed;right:12px;bottom:12px;z-index:40;display:flex;
  background:rgba(255,255,255,.94);border-radius:999px;padding:4px;
  box-shadow:0 6px 20px rgba(7,63,53,.22);backdrop-filter:blur(6px)}
.gm-schrift button{border:0;background:transparent;color:#5a6a66;cursor:pointer;
  width:36px;height:36px;border-radius:999px;font-weight:600;line-height:1;
  font-family:inherit}
.gm-schrift button[aria-pressed="true"]{background:#0c5a49;color:#faf6ef}
@media print{ .gm-schrift{display:none} }

/* v1.3.862: Öffentlicher Link der Gästemappe — Feld, Kopieren, Ansehen. */
.gg-link{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.gg-link .input{flex:1 1 240px;min-width:0;font-size:12.5px}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
details.card > summary::after{content:'›';font-size:20px;color:var(--text-muted,#6b7280);
  transform:rotate(90deg);transition:transform .15s ease}
details.card[open] > summary::after{transform:rotate(-90deg)}

/* v1.3.860: Namensvorschläge für den Startbildschirm. */
.app-name-tipps{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.app-name-tipp{border:1px solid var(--border,#e5e7eb);background:#fff;border-radius:999px;
  padding:5px 12px;font-size:12.5px;cursor:pointer;font-family:inherit}
.app-name-tipp:hover{border-color:#0c5a49;color:#0c5a49}

/* v1.3.859: Vorschau des Symbols für den Startbildschirm. */
.app-icon-vorschau{margin-top:8px;display:flex;align-items:center;gap:10px;min-height:64px}
.app-icon-vorschau img{width:64px;height:64px;border-radius:14px;object-fit:cover;
  box-shadow:0 2px 10px rgba(0,0,0,.15)}
.app-icon-vorschau span{font-size:12px;color:var(--text-muted,#6b7280);line-height:1.45}

/* v1.3.862: Mehr Luft zwischen den Menüpunkten.
   Die Einträge standen so dicht, dass sie als Block wirkten und man beim
   Überfliegen die Zeile verlor. Etwas Abstand macht jeden Punkt zu einer
   eigenen Einheit — das liest sich schneller, auch wenn die Liste dadurch
   länger wird. */
.nav{gap:7px}
.nav__item{padding:11px 12px}
.nav__item--sub{padding-top:10px;padding-bottom:10px}
.nav__advanced > .nav__item--summary{margin-bottom:4px}
.nav__advanced[open]{margin-bottom:10px}
.nav__advanced .nav__item--sub + .nav__item--sub{margin-top:5px}

/* Untermenü der Einstellungen: dieselbe Logik eine Ebene tiefer. */
.settings-subnav{gap:5px;padding-top:6px;padding-bottom:7px}
.settings-subnav a{padding:9px 10px}
.settings-subgroup + .settings-subgroup{margin-top:8px}
.settings-subgroup > summary{padding-top:7px;padding-bottom:7px}
.settings-subgroup[open] > summary{margin-bottom:4px}

/* Am Handy ist Treffsicherheit wichtiger als Kompaktheit. */
@media (max-width:900px){
  .nav{gap:9px}
  .nav__item{padding:13px 12px}
  .settings-subnav a{padding:11px 10px}
}

/* v1.3.864: Luft in den Gästemappen-Einstellungen.
   Die Karten und die Felder darin standen so dicht beieinander, dass man
   beim Überfliegen nicht erkennt, wo ein Bereich endet und der nächste
   beginnt. */
#guestguide-form{display:flex;flex-direction:column;gap:22px}
#guestguide-form > .card{padding:16px 18px 20px}
#guestguide-form > .card > .field + .field,
#guestguide-form > .card > .grid-2 + .field,
#guestguide-form > .card > .field + .grid-2,
#guestguide-form > .card > .grid-2 + .grid-2{margin-top:16px}
#guestguide-form .grid-2{gap:16px}
#guestguide-form .field__label{margin-bottom:5px}
#guestguide-form .settings-check-card{margin-bottom:4px}

/* Zeilen für Abschnitte, Empfehlungen und Webcams brauchen mehr Abstand als
   die Felder innerhalb einer Zeile — sonst verschwimmen sie zu einem Block. */
.guestguide-admin-list{gap:16px}
#guestguide-webcams{display:flex;flex-direction:column;gap:16px}
.guestguide-row .field + .field,
.guestguide-activity-row .field + .field{margin-top:12px}
.guestguide-row .grid-2 + .field,
.guestguide-row .field + .grid-2{margin-top:12px}
.guestguide-row__head{margin-bottom:12px}

@media (max-width:900px){
  #guestguide-form{gap:18px}
  #guestguide-form > .card > .field + .field{margin-top:14px}
}

/* v1.3.867: Produktsicherheit (CRA) in der Betreiber-Konsole. */
.cra-fristen{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.cra-fristen li{font-size:13.5px}
.cra-frist__zeit{margin-left:8px;font-size:12px;padding:2px 8px;border-radius:999px;
  background:var(--bg-accent,#e6f1fb);color:var(--text-accent,#0c447c)}
.cra-vorgang{display:flex;gap:14px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid var(--border,#e5e7eb)}
.cra-vorgang:last-child{border-bottom:0}
.cra-vorgang.is-fertig{opacity:.55}
.cra-stufen{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.cra-stufe{font-size:11.5px;padding:3px 9px;border-radius:999px;
  background:rgba(0,0,0,.05);color:var(--text-secondary,#4b5563)}
.cra-stufe.is-ok{background:rgba(21,128,61,.12);color:#15803d}
.cra-stufe.is-knapp{background:rgba(180,83,9,.14);color:#b45309}
.cra-stufe.is-spaet{background:rgba(185,28,28,.14);color:#b91c1c;font-weight:600}

/* v1.3.868: Betreiber-Konsole mit seitlicher Navigation. */
.op-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;align-items:start}
.op-nav{display:flex;flex-direction:column;gap:3px;position:sticky;top:16px;
  background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);
  border-radius:12px;padding:10px}
.op-nav__gruppe{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted,#9ca3af);font-weight:600;padding:12px 10px 5px}
.op-nav__gruppe:first-child{padding-top:4px}
.op-nav__item{display:block;width:100%;text-align:left;border:0;background:transparent;
  padding:9px 10px;border-radius:8px;font-size:13.5px;font-weight:500;cursor:pointer;
  color:var(--text-secondary,#4b5563);font-family:inherit}
.op-nav__item:hover{background:var(--bg-hover,#f3f4f6);color:var(--text,#111827)}
.op-nav__item.is-active{background:#0c5a49;color:#fff}

@media (max-width:900px){
  .op-layout{grid-template-columns:1fr;gap:14px}
  .op-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
  .op-nav__gruppe{width:100%;padding:6px 4px 2px}
  .op-nav__item{width:auto}
}

/* Mobile-Overrides — müssen der letzte Block der Datei bleiben. */
@media (max-width: 768px) {
  .wizard-import { padding: 16px 15px; margin: 14px 0 18px; }
  .wizard-import__title { font-size: 17px; }
  .wizard-import__text { font-size: 13.5px; }
  .wizard-import__row { flex-direction: column; }
  .wizard-import__input,
  .wizard-import__btn { width: 100%; flex: 1 1 auto; }
}


/* ============================================================================
   v1.3.876 — Fussleiste im Fenster: der Rest des Streifens
   Die Korrektur aus v1.3.874 wurde in KOMPAKTEN Fenstern (z. B. „Das ist neu")
   von einer spaeteren Regel mit hoeherer Spezifitaet ueberstimmt
   (#modal .modal__panel.modal__panel--compact .modal__body { padding: … 20px
   !important }). Dadurch blieb dort weiterhin ein 20-Pixel-Streifen unter der
   Leiste, durch den der Text sichtbar durchlief. Diese Regel steht am Ende der
   Datei und deckt alle Fenstergroessen ab.
   ============================================================================ */
#modal .modal__panel #modal-body:has(.modal__footer),
#modal .modal__panel.modal__panel--compact #modal-body:has(.modal__footer),
#modal .modal__panel.modal__panel--blocked #modal-body:has(.modal__footer),
#modal .modal__panel.modal__panel--booking #modal-body:has(.modal__footer) {
  padding-bottom: 0 !important;
}

/* ============================================================================
   v1.3.877 — Menue: Untereintraege klar als Untereintraege erkennbar

   Bisher unterschieden sich Unterpunkte nur durch etwas mehr Einzug und eine
   leicht kleinere Schrift von den Hauptpunkten. Klappte man eine Gruppe auf,
   standen zehn optisch gleichwertige Zeilen untereinander und man verlor,
   wozu was gehoert. Jetzt bekommt die aufgeklappte Gruppe:
     - eine senkrechte Fuehrungslinie links an der Unterliste,
     - einen leicht abgesetzten Hintergrund,
     - eine hervorgehobene Ueberschrift (die Gruppe, in der man sich befindet),
     - mehr Einzug.
   ============================================================================ */

/* Die Gruppenueberschrift zeigt im aufgeklappten Zustand, wo man ist. */
.nav__advanced[open] > .nav__item--summary {
  color: var(--brand-700, #0c5a49);
  font-weight: 650;
}
.nav__advanced[open] > .nav__item--summary .nav__chevron {
  transform: rotate(90deg);
}
.nav__item--summary .nav__chevron {
  transition: transform .15s ease;
}

/* Die Unterliste als zusammengehoeriger Block. */
.nav__advanced[open] > .nav__advanced-list {
  position: relative;
  margin: 2px 0 6px 20px;
  padding-left: 12px;
  border-left: 2px solid rgba(12, 90, 73, .18);
  background: rgba(12, 90, 73, .035);
  border-radius: 0 8px 8px 0;
}

/* Einzug kommt jetzt aus dem Block, nicht mehr aus dem einzelnen Eintrag. */
.nav__advanced[open] > .nav__advanced-list > .nav__item--sub {
  padding-left: 10px;
}

/* Der aktive Unterpunkt bekommt die Fuehrungslinie in Markenfarbe, damit man
   auf einen Blick sieht, in welcher Gruppe man steht. */
.nav__advanced[open] > .nav__advanced-list > .nav__item--sub.is-active::before,
.nav__advanced[open] > .nav__advanced-list > .nav__item--sub.active::before {
  content: "";
  position: absolute;
  left: -2px;
  width: 2px;
  height: 22px;
  margin-top: 4px;
  background: var(--brand-700, #0c5a49);
  border-radius: 2px;
}

/* Zusammengeklappt gibt es keine Linie und keinen Block. */
.app.sidebar-collapsed .nav__advanced[open] > .nav__advanced-list {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
  background: none;
}

/* ============================================================================
   v1.3.878 — Kalender: gleich dicke Linien und mehr Luft zwischen den Zeilen

   BEFUND (im Browser gemessen): Das Gitter begann bei y = 175,5 statt bei
   einer ganzen Pixelzahl, weil die Kopfzeile eine gebrochene Hoehe von 91,5
   Pixeln hatte. Alle waagerechten Linien lagen dadurch auf halben Pixeln und
   wurden vom Browser mal auf-, mal abgerundet — daraus entstanden die mal
   dicken, mal duennen Striche.

   ZWEI KORREKTUREN:
   1. Die Kopfzeile bekommt eine ganze Hoehe, damit der Inhalt darunter auf
      ganzen Pixeln beginnt.
   2. Das Raster nutzt Masse, die auch bei Windows-Skalierung (125, 150, 175
      und 200 Prozent) ganzzahlig bleiben: Zelle plus Trennlinie ergibt 80
      Pixel in der Hoehe und 76 Pixel in der Breite. Beide sind durch 4
      teilbar, deshalb geht die Umrechnung bei jeder gaengigen Skalierung
      ohne Rest auf.

   Die groessere Zeilenhoehe schafft zugleich die gewuenschte Luft.
   ============================================================================ */

/* 1) Kopfzeile auf ganze Pixel — Ursache der halben Position. */
.topbar {
  min-height: 92px;
  box-sizing: border-box;
}

/* 2) Raster in Massen, die bei jeder Skalierung aufgehen. */
@media (min-width: 821px) {
  .calendar-new:not(.calendar-new--single) {
    --cal-day-width: 75px;
  }
}
@media (max-width: 820px) {
  .calendar-new:not(.calendar-new--single) {
    --cal-day-width: 67px;
  }
}

/* Zeilenhoehe: 79 + 1 Trennlinie = 80. Vorher 72 + 1 = 73 (krumm und eng). */
.calendar-new:not(.calendar-new--single) .cal-cell,
.calendar-new:not(.calendar-new--single) .cal-cell--booked,
.calendar-new:not(.calendar-new--single) .cal-rowlabel {
  min-height: 79px !important;
}

/* Kopfzeile des Gitters ebenfalls auf ein glattes Mass. */
.calendar-new:not(.calendar-new--single) .cal-headcell {
  min-height: 63px;
  box-sizing: border-box;
}

/* ============================================================================
   v1.3.879 — Kalender: Linien auch auf dem Handy, und ueberall gleich sichtbar

   BEFUND 1 (im mobilen Browser gemessen): Auf schmalen Bildschirmen stand der
   Gitterabstand auf 0 und die Zellen ueberlappten sich sogar um einen Punkt.
   Es gab dort also gar keine Trennlinien. Zusaetzlich waren die Spaltenbreiten
   fest verdrahtet (68 bzw. 48 Punkte) und wichen von der Zellbreite ab.

   BEFUND 2: Vergangene Tage waren ueber `opacity` abgeblendet. Ein
   halbdurchsichtiges Element laesst den Gitterhintergrund durchscheinen — die
   Flaeche wurde grau und die Linien daneben verschwanden optisch. Genau daher
   kam "mal sichtbar, mal nicht". Jetzt bleibt die Zelle deckend, nur ihr
   Inhalt wird blasser.

   Die Masse sind so gewaehlt, dass Zelle plus Linie zusammen durch vier
   teilbar ist. Dadurch geht die Umrechnung auf jedem Bildschirm auf, auch bei
   dreifacher Punktdichte auf dem Handy.
   ============================================================================ */

/* --- 1) Trennlinien auch auf schmalen Bildschirmen --- */
@media (max-width: 820px) {
  .calendar-new:not(.calendar-new--single) {
    --cal-day-width: 67px;   /* 67 + 1 Linie = 68 */
  }
  .calendar-new:not(.calendar-new--single) .cal-grid {
    gap: 1px !important;
    column-gap: 1px !important;
    row-gap: 1px !important;
    background-color: #d4d4d4 !important;
    grid-template-columns: 153px repeat(var(--cal-days, 31), var(--cal-day-width)) !important;
  }
  .calendar-new:not(.calendar-new--single) .cal-headcell--left,
  .calendar-new:not(.calendar-new--single) .cal-rowlabel {
    width: 153px !important;
    min-width: 153px !important;
    max-width: 153px !important;
  }
}

/* Sehr schmale Geraete: gleiche Rechnung, nur kleiner (47 + 1 = 48). */
@media (max-width: 480px) {
  .calendar-new:not(.calendar-new--single) {
    --cal-day-width: 47px;
  }
  .calendar-new:not(.calendar-new--single) .cal-grid {
    grid-template-columns: 131px repeat(var(--cal-days, 31), var(--cal-day-width)) !important;
  }
  .calendar-new:not(.calendar-new--single) .cal-headcell--left,
  .calendar-new:not(.calendar-new--single) .cal-rowlabel {
    width: 131px !important;
    min-width: 131px !important;
    max-width: 131px !important;
  }
}

/* --- 2) Vergangene Tage: wieder flaechig ausgegraut wie frueher, aber DECKEND.
       Vorher lief das ueber `opacity`; ein durchsichtiges Element laesst den
       Gitterhintergrund durchscheinen, wodurch die Linien daneben verschwanden.
       Ein Graustufen-Filter nimmt die Farbe genauso zurueck, macht die Zelle
       aber nicht durchsichtig. --- */
.calendar-new .cal-cell--past {
  opacity: 1 !important;
  filter: grayscale(0.92) brightness(1.14) contrast(0.88);
}
.calendar-new .cal-cell--past:not(.cal-cell--booked):not(.cal-cell--turnover):not(.cal-cell--split-turnover):not(.cal-cell--blocked) {
  background-color: #f6f6f6 !important;
  color: var(--text-3, #8b938f);
}
.calendar-new .cal-cell--weekend.cal-cell--past:not(.cal-cell--booked) {
  background-color: #f1f2f1 !important;
}
.calendar-new .cal-cell--past:hover {
  opacity: 1 !important;
  filter: grayscale(0.5) brightness(1.02);
}

/* --- 3) Buchungen liegen ueber den senkrechten Tageslinien ---
   Innerhalb einer Buchung soll der Balken durchlaufen. Die Zellen, auf die
   noch ein weiterer Tag derselben Buchung folgt, ueberdecken deshalb die
   Trennlinie rechts von sich. Die letzte Zelle einer Buchung (pos-end,
   pos-single) laesst sie stehen — sonst verschwaende die Grenze zum naechsten
   freien Tag. Die waagerechten Linien zwischen den Unterkuenften bleiben
   unberuehrt. */
/* Die Farbfläche einer Buchung wird je Tag als eigenes SVG gezeichnet. Zwischen
   zwei Tagen liegt die 1 Punkt breite Trennlinie des Gitters. Damit der Balken
   durchläuft, zieht jede Fläche, auf deren linker Seite derselbe Aufenthalt
   weitergeht, ihren linken Rand um einen Punkt nach außen und schließt die
   Lücke zum Vortag. Der erste Tag einer Buchung tut das NICHT — sonst liefe
   Farbe in den freien Tag davor. Rechts steht ohnehin schon ein Überstand.
   Angesetzt wird am SVG, nicht an der Zelle: die Zellbreite bestimmt das
   Gitter, und ein Rand an der Zelle wirkt sich je nach Rundung mal aus und
   mal nicht. */
/* Spezifitaet: eine aeltere Regel weiter oben setzt fuer genau diese Zellen
   `left: 0 !important` mit fuenf Klassen im Selektor und macht die Ueberdeckung
   nach links damit wieder zunichte. Deshalb steht `.cal-cell` hier ebenfalls
   im Selektor — gleiche Spezifitaet, und da diese Regel spaeter kommt, gilt
   sie. (Im Browser nachgemessen: vorher blieb `left` auf 0.) */
/* Jede Farbflaeche einer Buchung greift einen Punkt nach LINKS ueber die
   Trennlinie — dort liegt der Vortag desselben Aufenthalts, die Linie gehoert
   also zugedeckt. Nur der ERSTE Tag einer Buchung tut das nicht, sonst liefe
   Farbe in den freien Tag davor.
   Nach rechts greift ausschliesslich die volle Flaeche (Mitteltag) ueber; an
   den schraegen Kanten wuerde ein Ueberstand die Spitze verschieben und am
   Abreisetag Farbe in den Folgetag ziehen. */
.calendar-new .cal-cell.cal-cell--booked > .cell-shape,
.calendar-new .cal-cell.cal-cell--blocked > .cell-shape,
.calendar-new .cal-cell.cal-cell--turnover > .cell-shape,
.calendar-new .cal-cell.cal-cell--split-turnover > .cell-shape {
  left: -2px !important;
  right: 0 !important;
  width: calc(100% + 2px) !important;
}

/* Mitteltage: zusaetzlich nach rechts, damit die Flaeche beidseitig schliesst. */
.calendar-new .cal-cell.cal-cell--booked.cal-cell--pos-middle > .cell-shape,
.calendar-new .cal-cell.cal-cell--blocked.cal-cell--pos-middle > .cell-shape {
  left: -2px !important;
  right: -2px !important;
  width: calc(100% + 4px) !important;
}

/* Erster Tag einer Buchung: links buendig an der Tagesgrenze. */
.calendar-new .cal-cell.cal-cell--booked.cal-cell--pos-start:not(.cal-cell--split-turnover) > .cell-shape,
.calendar-new .cal-cell.cal-cell--booked.cal-cell--pos-single:not(.cal-cell--split-turnover) > .cell-shape,
.calendar-new .cal-cell.cal-cell--blocked.cal-cell--pos-start:not(.cal-cell--split-turnover) > .cell-shape,
.calendar-new .cal-cell.cal-cell--blocked.cal-cell--pos-single:not(.cal-cell--split-turnover) > .cell-shape {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* Am Wechseltag endet links ein Aufenthalt — dort muss die Flaeche die
   Trennlinie ueberdecken, obwohl die Zelle zugleich der erste Tag des
   naechsten Aufenthalts ist. Diese Regel steht deshalb zuletzt. */
.calendar-new .cal-cell.cal-cell--split-turnover > .cell-shape {
  left: -2px !important;
  right: 0 !important;
  width: calc(100% + 2px) !important;
}

/* Der Ueberstand der Farbflaechen darf nicht an der Zellkante abgeschnitten
   werden — sonst bliebe die Trennlinie doch stehen. */
.calendar-new .cal-cell.cal-cell--booked,
.calendar-new .cal-cell.cal-cell--blocked,
.calendar-new .cal-cell.cal-cell--turnover,
.calendar-new .cal-cell.cal-cell--split-turnover {
  overflow: visible !important;
}
/* Der Text soll trotzdem nicht in den Nachbartag laufen. */
.calendar-new .cal-cell--booked > .cal-cell__top,
.calendar-new .cal-cell--booked > .cal-cell__price {
  overflow: hidden;
}

/* ============================================================================
   v1.3.885 — DIE eigentliche Ursache der Striche in den Buchungen

   Die Tageszellen tragen seit v1.3.431 `contain: paint` (Zeile 23749) — eine
   Massnahme fuer fluessiges Scrollen auf dem iPhone. `contain: paint` schneidet
   ALLES ab, was ueber die Zellgrenze hinausragt, und zwar unabhaengig von
   `overflow: visible`. Genau daran scheiterte jeder bisherige Versuch: Die
   Farbflaeche ragte rechnerisch ueber die Trennlinie (im Browser nachgemessen),
   wurde aber vor dem Zeichnen wieder abgeschnitten. Dass es nicht ueberall
   auffiel, lag an einer Ausnahme, die v1.3.547 fuer die beschriftete Zelle
   eingefuehrt hatte — dort war die Linie weg, daneben nicht.

   Fuer belegte Zellen wird die Abschneidung deshalb aufgehoben. Die grosse
   Mehrheit der Zellen ist leer und behaelt sie, das Scrollen bleibt fluessig.
   ============================================================================ */
.calendar-new .cal-grid .cal-cell.cal-cell--booked,
.calendar-new .cal-grid .cal-cell.cal-cell--blocked,
.calendar-new .cal-grid .cal-cell.cal-cell--turnover,
.calendar-new .cal-grid .cal-cell.cal-cell--split-turnover {
  contain: none !important;
  overflow: visible !important;
}

/* ============================================================================
   v1.3.886 — Beschriftung bleibt innerhalb ihrer Buchung

   Bisher war der Name bewusst unbegrenzt breit, damit er lesbar bleibt. Bei
   dicht aufeinanderfolgenden Buchungen lief er aber quer ueber die naechste
   hinweg. Jetzt darf er genau so breit werden, wie die Buchung ab dieser
   Zelle noch dauert — die Zahl der verbleibenden Naechte steht als
   `--label-tage` am Element. Danach wird mit Auslassungspunkten gekuerzt;
   der vollstaendige Name steht weiterhin im Tooltip und in der Buchung.
   ============================================================================ */
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--label-start .cal-cell__guest,
.calendar-new:not(.calendar-new--single) .cal-cell--booked.cal-cell--label-start .cal-cell__guest-meta {
  max-width: calc(var(--cal-day-width, 75px) * var(--label-tage, 1) - 10px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ============================================================================
   v1.3.888 — Preis steht unten rechts in der Tageszelle

   Vorher stand die Zahl mittig am unteren Rand. Rechtsbuendig hat sie eine
   feste Kante: Alle Preise einer Woche fluchten, und der Blick findet sie,
   ohne die Zelle zu lesen. Der rechte Abstand ist so gewaehlt, dass er dem
   linken Abstand des Tagesdatums entspricht (6 Punkte) — die Zahl steht
   dadurch spiegelbildlich zum Datum in der gegenueberliegenden Ecke.

   Die Regeln stehen am Dateiende und nennen mehrere Klassen, weil die
   aelteren Regeln fuer den Preis (u. a. Zeilen 1028, 2780, 3023, 10431,
   11021, 11304, 14968, 16858) teils mit `!important` arbeiten und sonst
   gewinnen wuerden. Die Innenmasse der Zelle sind je Ansicht verschieden,
   deshalb drei Abschnitte statt einem.
   ============================================================================ */
.calendar-new .cal-grid .cal-cell .cal-cell__price,
.calendar-new--single .cal-grid .cal-cell .cal-cell__price,
.calendar-new .cal-grid--single-month .cal-cell .cal-cell__price {
  text-align: right !important;
}

/* Mehrfach-Ansicht: die Zelle hat selbst 6 Punkte oben/unten und 4 seitlich.
   Der Preis braucht daher kaum eigenen Abstand. */
.calendar-new:not(.calendar-new--single) .cal-grid .cal-cell .cal-cell__price {
  padding-right: 2px !important;
  padding-bottom: 0 !important;
  line-height: 1.1 !important;
}


/* Belegte Tage (Wechsel- und Abreisetag) haben padding:0 an der Zelle —
   der Abstand muss hier vom Preis selbst kommen, sonst sitzt die Zahl auf
   der schraegen Kante der Farbflaeche. */
.calendar-new .cal-grid .cal-cell.cal-cell--booked .cal-cell__price,
.calendar-new .cal-grid .cal-cell.cal-cell--turnover .cal-cell__price,
.calendar-new .cal-grid .cal-cell.cal-cell--split-turnover .cal-cell__price,
.calendar-new .cal-grid .cal-cell.cal-cell--blocked .cal-cell__price {
  padding-right: 6px !important;
  padding-bottom: 6px !important;
}

/* Einzelansicht: Zelle mit 2/3 Punkten Innenmass — und zwar auf belegten
   Tagen genauso, damit die Zahlen einer Woche auf einer Linie stehen. */
.calendar-new--single .cal-grid .cal-cell .cal-cell__price,
.calendar-new--single .cal-grid .cal-cell.cal-cell--booked .cal-cell__price,
.calendar-new--single .cal-grid .cal-cell.cal-cell--turnover .cal-cell__price,
.calendar-new--single .cal-grid .cal-cell.cal-cell--split-turnover .cal-cell__price,
.calendar-new--single .cal-grid .cal-cell.cal-cell--blocked .cal-cell__price {
  padding-right: 3px !important;
  padding-bottom: 0 !important;
}

/* ============================================================================
   v1.3.890 — Meldung mit Knopf („Rückgängig")

   Der Knopf sitzt in derselben Zeile wie die Bestätigung. Er ist hell auf
   dunklem Grund, damit er als Knopf erkennbar ist, ohne die Meldung zu
   ueberstrahlen — sie ist die Hauptsache, die Umkehr die Ausnahme.
   ============================================================================ */
.toast--aktion {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 10px 10px 18px;
}
.toast__aktion {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .12);
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
  white-space: nowrap;
}
.toast__aktion:hover { background: rgba(255, 255, 255, .24); }
.toast__aktion:disabled { opacity: .6; cursor: default; }

/* ============================================================================
   v1.3.893 — zwei Kleinigkeiten am Sperrzeit-Formular

   Beide Regeln stehen am Dateiende und nennen mehr Klassen als noetig, weil
   sie sonst verlieren: Die Sichtbarkeits-Regel fuer `.field` in Schritt 7 ist
   spezifischer als eine Regel auf das Attribut allein, und die Kostenzeile
   wird weiter oben ueber `#modal #booking-modal-price` gesetzt — zwei
   Kennungen schlagen eine Klasse.
   ============================================================================ */

/* Ein Widerspruch gegen die KI-Verarbeitung setzt einen Gast voraus — bei
   einer Sperrzeit gibt es keinen. */
#bkg-form.blocked-mode .booking-step[data-step="7"] .field[data-nur-buchung],
#bkg-form.blocked-mode .modal__footer [data-nur-buchung],
#bkg-form.blocked-mode [data-nur-buchung] {
  display: none !important;
}

/* Eine Sperrzeit kostet nichts — die Kostenzeile ueber dem Formular gehoert
   nicht dazu. */
body.bp-sperrzeit-modus #modal #booking-modal-price,
body.bp-sperrzeit-modus #modal .modal__panel > #booking-modal-price {
  display: none !important;
}

/* ============================================================================
   v1.3.897 — Handy und Tablet im Hochformat

   Zwei Punkte aus dem Betrieb:

   1. PREIS STAND OBEN. Auf dem Rechner und im Querformat sitzt der Preis
      unten rechts (v1.3.888). Im Hochformat klebte er direkt unter dem Datum.
      Ursache: Eine Regel fuer schmale Fenster setzt `margin-top: 2px` am
      Preis und hebt damit das `margin-top: auto` auf, das ihn nach unten
      draengt — und sie ist mit drei Klassen spezifischer als das Original mit
      zweien. Im Querformat ist das Fenster breiter als 820 Punkte, deshalb
      fiel es dort nie auf.

   2. FELDER WAREN NICHT MEHR QUADRATISCH. Die Spaltenbreite richtet sich im
      Hochformat nach der Fensterbreite (47 Punkte auf dem Handy, 67 auf dem
      Tablet), die Zeilenhoehe stand aber fest auf 79. Die Hoehe folgt jetzt
      der Breite — dieselbe Groesse, die auch die Spalte bekommt.

   Beides gilt nur fuer die Mehrfach-Ansicht; die Einzelansicht hat ihre
   eigenen, bereits quadratischen Zellen.
   ============================================================================ */
@media (max-width: 820px) {
  .calendar-new:not(.calendar-new--single) .cal-grid .cal-cell .cal-cell__price {
    margin-top: auto !important;
    padding-right: 2px !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 820px) and (orientation: portrait) {
  .calendar-new:not(.calendar-new--single) .cal-grid {
    /* v1.3.911: Die Kopfzeile (Wochentag + Datum, 64 Punkte) bekommt ihre
     * eigene Höhe. Ohne diese Zeile galt die quadratische Zeilenhöhe (47
     * Punkte, bei 125 % 59) auch für den Kopf — er ragte dann 17 Punkte in
     * die erste Unterkunft hinein und schnitt dort eine graue Kante aus den
     * Buchungsbalken. */
    grid-template-rows: auto !important;
    grid-auto-rows: var(--cal-day-width, 47px) !important;
  }
  .calendar-new:not(.calendar-new--single) .cal-grid .cal-cell,
  .calendar-new:not(.calendar-new--single) .cal-grid .cal-rowlabel {
    height: var(--cal-day-width, 47px) !important;
    min-height: var(--cal-day-width, 47px) !important;
    max-height: var(--cal-day-width, 47px) !important;
  }
}

/* ============================================================================
   v1.3.899 — Kalender vergrößern (Handy und Tablet)

   Die Feldgröße haengt an einer einzigen Stellschraube: `--cal-day-width`.
   JavaScript setzt sie NUR, wenn wirklich vergroessert wurde; ist sie nicht
   gesetzt, ist `var(--cal-day-width)` ohne Ersatzwert ungueltig, die Regel
   faellt weg, und es gilt alles wie bisher. Die Vergroesserung kann also
   nichts kaputtmachen, solange sie nicht benutzt wird — deshalb steht hier
   auch keine Mediengrenze um die Groessenregeln: Sie greifen genau dann,
   wenn jemand die Schaltflaeche gedrueckt hat.
   ============================================================================ */
.calendar-new:not(.calendar-new--single) .cal-grid .cal-cell,
.calendar-new:not(.calendar-new--single) .cal-grid .cal-headcell:not(.cal-headcell--left) {
  width: var(--cal-day-width) !important;
  min-width: var(--cal-day-width) !important;
  max-width: var(--cal-day-width) !important;
}
/* Quadratisch bleibt quadratisch: im Hochformat waechst die Hoehe mit. */
@media (orientation: portrait) and (max-width: 1024px) {
  .calendar-new:not(.calendar-new--single) .cal-grid .cal-cell,
  .calendar-new:not(.calendar-new--single) .cal-grid .cal-rowlabel {
    height: var(--cal-day-width) !important;
    min-height: var(--cal-day-width) !important;
    max-height: var(--cal-day-width) !important;
  }
}

/* Schrift waechst mit — sonst ist das Feld zwar groesser, der Inhalt aber
   genauso klein wie vorher, und gewonnen waere nur Luft. */
.calendar-new:not(.calendar-new--single)[style*="--cal-zoom"] .cal-cell__top,
.calendar-new:not(.calendar-new--single)[style*="--cal-zoom"] .cal-cell__price,
.calendar-new:not(.calendar-new--single)[style*="--cal-zoom"] .cal-cell__guest {
  font-size: calc(10px * var(--cal-zoom, 1)) !important;
}
.calendar-new:not(.calendar-new--single)[style*="--cal-zoom"] .cal-cell__guest-meta {
  font-size: calc(9px * var(--cal-zoom, 1)) !important;
}

/* Die Bedienelemente: auf Fingergeraeten und in schmalen Fenstern sichtbar,
   am Rechner mit Maus nicht — dort gibt es den Zoom des Browsers. */
.cal-zoom {
  display: none;
  align-items: center;
  gap: 2px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d9e0dc);
  border-radius: 999px;
  padding: 2px;
}
.cal-zoom__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text, #17241f);
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  width: 34px;
  height: 30px;
  border-radius: 999px;
  cursor: pointer;
}
.cal-zoom__btn:active { background: rgba(0, 0, 0, .08); }
.cal-zoom__wert {
  min-width: 48px;
  text-align: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2, #40514a);
}
@media (max-width: 820px), (pointer: coarse) {
  .cal-zoom { display: inline-flex; }
}

/* ===========================================================================
   v1.3.902 — Leiste unter der Buchungsliste ("… von … angezeigt")
   ======================================================================== */
.bkg-mehr-leiste {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-top: 1px solid var(--border, #e6e6e0);
}
.bkg-mehr-leiste span { margin-right: auto; }

/* v1.3.903 — Ladeanzeige mit Details, wenn es länger dauert */
.loading__detail {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted, #6b6b66);
  text-align: left;
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
}

/* v1.3.908 — vorübergehende Diagnose bei langsamem Speichern */
.speicher-diagnose {
  position: fixed;
  right: 12px;
  bottom: 90px;
  z-index: 99999;
  max-width: min(460px, calc(100vw - 24px));
  background: #1f2a26;
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
  word-break: break-word;
}
.speicher-diagnose strong { font-size: 13px; display: block; margin-bottom: 4px; }
.speicher-diagnose__hinweis { margin-top: 6px; opacity: .7; }

/* v1.3.920: Stripe-Status in der Unterkunft */
.stripe-status__zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2, #f6f4ef); border: 1px solid var(--border, #e6e1d6);
  font-size: 13px; line-height: 1.45;
}
.stripe-status__zeile span { flex: 1 1 260px; }
.stripe-status__zeile--ok { background: #eef7f2; border-color: #cfe7da; }

/* v1.3.922: Designs der Buchungsstrecke und Jetzt-buchen-Knopf */
.design-bereich { border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 18px; background: var(--surface-2, #faf8f4); }
.design-bereich__kopf, .bereich-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bereich-kopf { margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.design-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.design-karte { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 8px; border: 2px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.design-karte:hover { border-color: var(--brand-400, #9cc7b4); }
.design-karte.is-aktiv { border-color: var(--brand-700, #176956); box-shadow: 0 0 0 3px rgba(23, 105, 86, .15); }
.design-karte strong { font-size: 13px; margin-top: 4px; }
.design-karte em { font-style: normal; font-size: 11.5px; color: var(--text-3, #6b7168); line-height: 1.35; }
.design-karte__bild { position: relative; display: block; height: 78px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,.06); }
.design-karte__kopf { position: absolute; left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(135deg, #f0fdf4, #f5f3ff); }
.design-karte__kopf--landhaus { background: #f6efe3; }
.design-karte__kopf--alpin { background: var(--p); }
.design-karte__kopf--minimal { background: #fff; border-bottom: 1px solid #e5e7eb; }
.design-karte__kopf--meer { background: linear-gradient(135deg, #e8f4fb, #fdf6e8); }
.design-karte__zeile { position: absolute; left: 10px; top: 36px; width: 60%; height: 6px; border-radius: 3px; opacity: .8; }
.design-karte__zeile--kurz { top: 48px; width: 35%; }
.design-karte__knopf { position: absolute; right: 10px; bottom: 8px; width: 42px; height: 14px; }

.knopf-bereich { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; align-items: start; }
@media (max-width: 760px) { .knopf-bereich { grid-template-columns: 1fr; } }
.knopf-vorschau { position: relative; height: 170px; border-radius: 12px; border: 1px solid var(--border); background: #f7f7f5; overflow: hidden; }
.knopf-vorschau__seite { padding: 14px; display: grid; gap: 8px; }
.knopf-vorschau__seite span { display: block; height: 8px; border-radius: 4px; background: #e2e2dc; }
.knopf-vorschau__seite span.kurz { width: 55%; }
.knopf-vorschau__knopf { position: absolute; bottom: 12px; right: 12px; padding: 9px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; box-shadow: 0 6px 16px rgba(0,0,0,.2); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.knopf-vorschau[data-position="bottom-left"] .knopf-vorschau__knopf { right: auto; left: 12px; }
.knopf-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* v1.3.924: Abschnitt kurz hervorheben, wenn Hilfe oder Menüsuche dorthin springt */
.abschnitt-hervorheben { box-shadow: 0 0 0 3px rgba(200, 169, 97, .55) !important; transition: box-shadow .4s ease; }

/* v1.3.925: Hinweis Anzahlung ohne passende Zahlungsart */
.hinweis-zahlart { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fff4e5; border: 1px solid #f3c98b; color: #7a4a0c; font-size: 13px; line-height: 1.45; }

/* v1.3.929: Vorschau der Kalender-Designs */
.kalender-muster { display: block; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,.06); }
.kalender-muster__kopf { display: block; height: 18px; background: linear-gradient(135deg, #f0fdf4, #f5f3ff); }
.kalender-muster__kopf--landhaus { background: #f6efe3; }
.kalender-muster__kopf--alpin { background: var(--p); }
.kalender-muster__kopf--minimal { background: #fff; border-bottom: 1px solid #e5e7eb; }
.kalender-muster__kopf--meer { background: linear-gradient(135deg, #e8f4fb, #fdf6e8); }
.kalender-muster__tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 7px 6px; }
.km { display: block; height: 16px; }

/* v1.3.933: Werkzeuge über der Vorlagenliste */
.vorlagen-werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.sich-liste { display: grid; gap: 6px; max-height: 50vh; overflow: auto; margin-top: 6px; }

/* v1.3.936: Gästemappe — Hintergrundwahl und Bilder/Dateien je Abschnitt */
.gg-bildmodus{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.gg-verlaeufe{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.gg-verlauf{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;font-size:12px}
.gg-verlauf input{position:absolute;opacity:0;pointer-events:none}
.gg-verlauf__muster{display:block;width:64px;height:44px;border-radius:10px;border:2px solid transparent;
  box-shadow:0 1px 4px rgba(0,0,0,.12)}
.gg-verlauf input:checked + .gg-verlauf__muster{border-color:var(--primary,#0c5a49);
  box-shadow:0 0 0 3px rgba(12,90,73,.18)}
.gg-verlauf input:focus-visible + .gg-verlauf__muster{outline:2px solid var(--primary,#0c5a49);outline-offset:2px}
.gg-medien__liste{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.gg-medium{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--border,#e3e6e1);
  border-radius:10px;background:var(--surface,#fff)}
.gg-medium .input{flex:1;min-width:0}
.gg-medium__vorschau{flex:0 0 auto;width:64px;height:48px;border-radius:6px;overflow:hidden;
  background:#f1f3ef;display:flex;align-items:center;justify-content:center}
.gg-medium__vorschau img{width:100%;height:100%;object-fit:cover}
.gg-medium__pdf{font-size:12px;font-weight:600;color:#fff;background:#b3261e;border-radius:4px;padding:4px 6px}
.gg-medien__knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gg-medien__url{flex:1;min-width:220px}
.gg-medien__hochladen{cursor:pointer}
@media (max-width:600px){.gg-medium{flex-wrap:wrap}.gg-medium .input{flex-basis:100%;order:3}}

/* v1.3.937: Bildnachweis — klein, unten rechts im Bild, gut lesbar auf jedem Foto */
.gm-nachweis{position:absolute;right:8px;bottom:6px;z-index:3;max-width:70%;
  font-size:9.5px;line-height:1.3;letter-spacing:.02em;color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.35);padding:2px 6px;border-radius:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.gm-nachweis--kopf{top:10px;bottom:auto;right:10px}
.gm-kachel .gm-nachweis{top:8px;bottom:auto}
.gm-detail__bild{position:relative}
.gm-bild__knopf{position:relative}
.gm-lupe__nachweis{color:rgba(255,255,255,.7);font-size:11px;margin-top:4px}
.gg-medium__felder{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
@media (max-width:600px){.gg-medium__felder{flex-basis:100%;order:3}}

/* v1.3.938: Einstellbarer Bildfilter über Fotos.
   --gm-ff  Stärke der Abtönung (0 = keine, 1 = bisheriger Standard, bis 1,67)
   --gm-fs  Farbe der Abtönung (Farbton des Verlaufs oder neutral Schwarz)
   --gm-fe  Bildeffekt (Schwarzweiß, warm, kühl, kräftig)
   Gilt nur für Fotos; Farbverläufe ohne Foto bleiben unverändert. */
.gm-kopf__bild--foto{filter:var(--gm-fe,none)}
.gm-kopf__bild--foto::before{background:rgba(var(--gm-fs,var(--gm-schatten,7,63,53)),calc(.35 * var(--gm-ff,1)))}
.gm-kopf__bild--foto::after{background:linear-gradient(to top,
  rgba(var(--gm-fs,var(--gm-schatten,7,63,53)),calc(.94 * var(--gm-ff,1))) 0%,
  rgba(var(--gm-fs,var(--gm-schatten,7,63,53)),calc(.55 * var(--gm-ff,1))) 38%,
  rgba(var(--gm-fs,var(--gm-schatten,7,63,53)),calc(.12 * var(--gm-ff,1))) 78%)}
.gm-kachel--foto .gm-kachel__bg{filter:var(--gm-fe,none)}
.gm-kachel--foto .gm-kachel__bg::after{background:linear-gradient(to top,
  rgba(var(--gm-fs,var(--gm-schatten,10,35,28)),calc(.88 * var(--gm-ff,1))),
  rgba(var(--gm-fs,var(--gm-schatten,10,35,28)),calc(.05 * var(--gm-ff,1))) 72%)}
.gm-detail__bild{filter:var(--gm-fe,none)}
/* Schrift bleibt auch bei schwacher Abtönung lesbar */
.gm-kachel--foto .gm-kachel__t,.gm-kopf__inhalt{text-shadow:0 1px 3px rgba(0,0,0,calc(.45 - .25 * var(--gm-ff,1)))}

/* Einstellungen: Vorschau des Bildfilters */
.gg-filter{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) 260px;align-items:start}
@media (max-width:760px){.gg-filter{grid-template-columns:1fr}}
.gg-filter__vorschau{position:relative;height:170px;border-radius:14px;overflow:hidden;
  background:#8aa39a center/cover no-repeat}
.gg-filter__bild{position:absolute;inset:0;background:inherit;filter:var(--gm-fe,none)}
.gg-filter__bild::before{content:'';position:absolute;inset:0;
  background:rgba(var(--gm-fs,7,63,53),calc(.35 * var(--gm-ff,1)))}
.gg-filter__bild::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,
  rgba(var(--gm-fs,7,63,53),calc(.94 * var(--gm-ff,1))) 0%,
  rgba(var(--gm-fs,7,63,53),calc(.55 * var(--gm-ff,1))) 38%,
  rgba(var(--gm-fs,7,63,53),calc(.12 * var(--gm-ff,1))) 78%)}
.gg-filter__text{position:absolute;left:14px;bottom:12px;right:14px;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,calc(.45 - .25 * var(--gm-ff,1)))}
.gg-filter__text small{display:block;font-size:10px;letter-spacing:.14em;opacity:.9}
.gg-filter__text strong{font-size:19px;font-weight:600}
.gg-filter__regler{display:flex;align-items:center;gap:10px}
.gg-filter__regler input[type=range]{flex:1}
.gg-filter__wert{min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.gm-fuss__gruss{margin-top:20px;font-size:15px;color:rgba(255,255,255,.9);font-style:italic}
.gg-fuss-zeile{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:10px;align-items:center;margin-bottom:8px}
@media (max-width:600px){.gg-fuss-zeile{grid-template-columns:1fr auto}.gg-fuss-zeile>span{grid-column:1/-1}}
.gm-fuss__zeile em{white-space:nowrap}
.gm-fuss{padding-bottom:84px}
.gm-ladefehler a{color:var(--gm-gruen);font-weight:600}

/* v1.3.941: Listen und Tabellen aus Beschreibungen */
.gm-liste{list-style:none;margin:10px 0 14px;padding:0;border-top:1px solid rgba(12,90,73,.1)}
.gm-liste__eintrag{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(12,90,73,.1)}
.gm-liste__entf{flex:0 0 86px;min-width:0;box-sizing:border-box;text-align:center;font-size:12px;font-weight:600;
  color:var(--gm-gruen,#0c5a49);background:rgba(12,90,73,.08);border-radius:999px;padding:4px 8px;white-space:nowrap}
.gm-liste__inhalt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.gm-liste__inhalt strong{font-size:14.5px;font-weight:600;color:#23332e}
.gm-liste__inhalt em{font-style:normal;font-size:12.5px;color:#6b7a74;margin-top:2px}
.gm-liste__karte{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--gm-gruen,#0c5a49);
  text-decoration:none;border:1px solid rgba(12,90,73,.25);border-radius:999px;padding:4px 10px}
.gm-liste__karte:hover{background:rgba(12,90,73,.06)}
.gm-punkte{margin:6px 0 12px;padding-left:20px}
.gm-punkte li{font-size:14.5px;line-height:1.55;color:#3d4d48;margin-bottom:4px}

/* v1.3.942: Fußzeile als Raster, optional mit Foto der Gastgeber */
.gm-fuss__inhalt--foto{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.gm-fuss__kontakt{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:18px;row-gap:11px;align-items:baseline}
.gm-fuss__kontakt em{font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--gm-gold);font-weight:600;white-space:nowrap}
.gm-fuss__kontakt a,.gm-fuss__kontakt span{font-size:14.5px;color:#fff;text-decoration:none;overflow-wrap:anywhere}
.gm-fuss__kontakt a:hover{text-decoration:underline}
.gm-fuss h2{overflow-wrap:break-word}
.gm-fuss__foto{margin:0;order:-1;display:flex;align-items:center;gap:14px}
.gm-fuss__foto img{width:84px;height:84px;border-radius:50%;object-fit:cover;
  border:3px solid rgba(255,255,255,.85);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.gm-fuss__foto figcaption{font-size:13px;color:rgba(255,255,255,.8);line-height:1.4}
@media (max-width:420px){.gm-fuss__kontakt{grid-template-columns:1fr;row-gap:2px}
  .gm-fuss__kontakt a,.gm-fuss__kontakt span{margin-bottom:10px}}
@media (min-width:720px){
  .gm-fuss__inhalt--foto{grid-template-columns:minmax(0,1fr) 220px;gap:40px;align-items:center}
  .gm-fuss__foto{order:0;flex-direction:column;text-align:center}
  .gm-fuss__foto img{width:200px;height:200px}
}
.gg-fuss-foto{display:flex;gap:14px;align-items:center}
.gg-fuss-foto__vorschau{flex:0 0 auto;width:72px;height:72px;border-radius:50%;overflow:hidden;background:#eef1ec;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#6b7a74;text-align:center}
.gg-fuss-foto__vorschau img{width:100%;height:100%;object-fit:cover}
.gm-fuss h2{line-height:1.25}

/* v1.3.943: Lesbarkeit auf Foto-Kacheln
   gm--text-schatten  bisherige Darstellung mit kräftigerem Schatten
   gm--text-band      Text auf dunklem, mattem Glasstreifen (Standard)
   gm--text-karte     Foto oben, Text darunter auf ruhigem Grund */
.gm-kachel--foto .gm-kachel__kat{display:inline-block;background:rgba(0,0,0,.42);color:#f3d99a;
  padding:3px 8px;border-radius:5px;text-shadow:none}
.gm-kachel p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gm--text-schatten .gm-kachel--foto .gm-kachel__t{text-shadow:0 1px 2px rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.55)}

.gm--text-band .gm-kachel--foto{padding:0}
.gm--text-band .gm-kachel--foto .gm-kachel__t{width:100%;padding:14px 18px 16px;
  background:rgba(12,22,20,.62);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  transform:none !important;text-shadow:none}
.gm--text-band .gm-kachel--foto .gm-kachel__bg::after{background:none}
.gm--text-band .gm-kachel--foto .gm-kachel__kat{background:none;padding:0;color:#f3d99a}
.gm--text-band .gm-kachel--foto p{color:rgba(255,255,255,.9)}

.gm--text-karte .gm-kachel--foto{display:block;padding:0;min-height:0;background:#fff;
  box-shadow:0 4px 18px rgba(7,63,53,.10)}
.gm--text-karte .gm-kachel--foto .gm-kachel__bg{position:relative;top:0;height:160px;transform:none !important}
.gm--text-karte .gm-kachel--foto .gm-kachel__bg::after{background:none}
.gm--text-karte .gm-kachel--foto .gm-kachel__t{padding:14px 16px 16px;color:#23332e;transform:none !important;text-shadow:none}
.gm--text-karte .gm-kachel--foto h3{color:#23332e}
.gm--text-karte .gm-kachel--foto p{color:#5b6b66}
.gm--text-karte .gm-kachel--foto .gm-kachel__kat{background:none;padding:0;color:var(--gm-gruen,#0c5a49)}
.gm--text-karte .gm-kachel--foto .gm-kachel__mehr{color:var(--gm-gruen,#0c5a49)}
@media (min-width:720px){.gm--text-karte .gm-kachel--foto .gm-kachel__bg{height:190px}}
/* Textband: Kachel höher, damit oberhalb des Bandes genug Foto bleibt */
.gm--text-band .gm-kachel--foto{min-height:250px}
@media (min-width:720px){.gm--text-band .gm-kachel--foto{min-height:280px}
  .gm--text-band .gm-kachel--foto.gm-kachel--voll,.gm--text-band .gm-kachel--foto:first-child{min-height:330px}}

/* =====================================================================
   v1.3.944: Gästemappe-Einstellungen in 6 Reitern
   ===================================================================== */
.gg-form{display:block}
.gg-reiter{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:4px 0 18px}
.gg-reiter__k{position:relative;display:flex;gap:10px;align-items:center;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--border,#e3e6e1);border-radius:14px;padding:12px;font:inherit;color:inherit;
  box-shadow:0 1px 3px rgba(0,0,0,.03);transition:border-color .15s,box-shadow .15s,transform .15s}
.gg-reiter__k:hover{border-color:#c9a961;transform:translateY(-1px)}
.gg-reiter__k:focus-visible{outline:3px solid rgba(201,169,97,.6);outline-offset:2px}
.gg-reiter__ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:#eef3f0;display:flex;align-items:center;justify-content:center}
.gg-reiter__ic svg{width:20px;height:20px;stroke:#0c5a49;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gg-reiter__t{display:flex;flex-direction:column;min-width:0}
.gg-reiter__t small{font-size:10.5px;letter-spacing:.1em;color:#9aa7a2;font-weight:600}
.gg-reiter__t b{font-size:13.5px;font-weight:600;line-height:1.2}
.gg-reiter__t em{font-style:normal;font-size:11px;color:#6b7a74;line-height:1.3;margin-top:2px}
.gg-reiter__kurz{display:none;font-style:normal}
.gg-reiter__k.is-active{background:#0c5a49;border-color:#0c5a49;box-shadow:0 6px 18px rgba(12,90,73,.25)}
.gg-reiter__k.is-active .gg-reiter__t b{color:#fff}
.gg-reiter__k.is-active .gg-reiter__t em{color:rgba(255,255,255,.78)}
.gg-reiter__k.is-active .gg-reiter__t small{color:#e7cf93}
.gg-reiter__k.is-active .gg-reiter__ic{background:rgba(255,255,255,.16)}
.gg-reiter__k.is-active .gg-reiter__ic svg{stroke:#fff}
.gg-reiter__k.is-active::after{content:'';position:absolute;left:50%;bottom:-8px;width:14px;height:14px;background:#0c5a49;
  transform:translateX(-50%) rotate(45deg);border-radius:2px}
.gg-reiter__zahl{position:absolute;top:-7px;right:-7px;background:#c9a961;color:#fff;border-radius:999px;font-size:11px;font-weight:600;
  min-width:22px;height:22px;padding:0 6px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg,#f4f1ea)}
.gg-reiter__zahl[hidden]{display:none}
.gg-schritt{display:none}
.gg-arbeit{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.gg-panel{display:flex;flex-direction:column;gap:16px}
.gg-panel[hidden]{display:none}
.gg-vorschau{display:none}
@media (min-width:1280px){
  .gg-arbeit{grid-template-columns:minmax(0,1fr) 340px}
  .gg-vorschau{display:block;position:sticky;top:16px;background:#fff;border:1px solid var(--border,#e3e6e1);border-radius:18px;padding:14px}
}
.gg-vorschau__kopf{display:flex;justify-content:space-between;font-size:12px;font-weight:600;letter-spacing:.08em;color:#6b7a74;margin-bottom:10px}
.gg-vorschau__kopf a{color:#0c5a49;text-decoration:none;letter-spacing:0}
.gg-vorschau__geraet{border:8px solid #1f2a27;border-radius:30px;overflow:hidden;background:#faf6ef;height:600px;margin-bottom:8px}
.gg-vorschau__geraet iframe{width:100%;height:100%;border:0;display:block}
.gg-vorschau-knopf{display:none}
/* Einklappbare Karten */
.gg-klapp > .card__header{cursor:pointer}
.gg-klapp__pfeil{width:10px;height:10px;border-right:2px solid #6b7a74;border-bottom:2px solid #6b7a74;transform:rotate(-135deg);margin:6px 6px 0;flex:0 0 auto;transition:transform .15s}
.gg-klapp.gg-zu .gg-klapp__pfeil{transform:rotate(45deg);margin-top:0}
.gg-klapp.gg-zu > :not(.card__header){display:none !important}
/* Speichern-Leiste */
.gg-speichern{position:sticky;bottom:0;z-index:40;margin:22px -4px 0;background:rgba(255,255,255,.97);border:1px solid var(--border,#e3e6e1);
  border-radius:14px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:0 -6px 20px rgba(0,0,0,.06)}
.gg-speichern__stand{font-size:13px;color:#0c5a49;display:flex;align-items:center;gap:8px}
.gg-speichern__stand::before{content:'';width:8px;height:8px;border-radius:50%;background:#2f8468}
.gg-speichern__stand.is-offen{color:#8a6d1f}.gg-speichern__stand.is-offen::before{background:#c9a961}
.gg-speichern__knoepfe{display:flex;gap:10px}
body:has(#guestguide-form) #unsaved-bar{display:none !important}
body:has(#guestguide-form) .global-booking-fab{display:none !important}
/* Infoblöcke nach Phasen */
.gg-phase{margin-top:10px}
.gg-phase__titel{font-size:11.5px;letter-spacing:.14em;color:#c9a961;font-weight:600;margin:6px 0 8px}
.gg-phase__liste{display:flex;flex-direction:column;gap:8px;min-height:10px}
.gg-phase__neu{width:100%;margin:8px 0 6px;border:1.5px dashed #b8c9c1;border-radius:11px;padding:9px;background:transparent;color:#0c5a49;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.gg-phase__neu:hover{background:#f2f7f5}
.gg-block{padding:0 !important;overflow:hidden}
.gg-block__kopf{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;background:#fff}
.gg-block__griff{color:#9aa7a2;font-size:16px;letter-spacing:-2px;cursor:grab;touch-action:none;padding:4px 2px;user-select:none}
.gg-block__text{flex:1;min-width:0;display:flex;flex-direction:column}
.gg-block__text b{font-size:13.5px;font-weight:600}
.gg-block__text small{color:#6b7a74;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gg-block__pfeil{width:9px;height:9px;border-right:2px solid #6b7a74;border-bottom:2px solid #6b7a74;transform:rotate(-135deg);margin:4px 4px 0;flex:0 0 auto}
.gg-block.gg-zu .gg-block__pfeil{transform:rotate(45deg);margin-top:0}
.gg-block__inhalt{padding:4px 14px 14px;border-top:1px solid var(--border,#eef0ec)}
.gg-block.gg-zu .gg-block__inhalt{display:none}
.gg-block:not(.gg-zu){border-color:#0c5a49;box-shadow:0 0 0 3px rgba(12,90,73,.08)}
.gg-block.gg-zieht{opacity:.75;box-shadow:0 10px 26px rgba(0,0,0,.18);position:relative;z-index:5}
.gg-chip{font-size:11px;border-radius:999px;padding:2px 8px;background:#eef3f0;color:#0c5a49;white-space:nowrap}
.gg-chip--aus{background:#f1efe9;color:#8a8a80}
.gg-chip[hidden]{display:none}
/* Tablet: 3 Reiter je Zeile */
@media (max-width:1180px){.gg-reiter{grid-template-columns:repeat(3,minmax(0,1fr))}.gg-reiter__k.is-active::after{display:none}}
/* Handy: Reiter als wischbare Knöpfe, Vorschau als schwebender Knopf */
@media (max-width:820px){
  .gg-reiter{display:flex;overflow-x:auto;gap:8px;margin:0 -16px 0;padding:10px 16px;position:sticky;top:0;z-index:30;
    background:var(--bg,#f4f1ea);border-bottom:1px solid #e6e2d8;scrollbar-width:none;scroll-snap-type:x proximity}
  .gg-reiter::-webkit-scrollbar{display:none}
  .gg-reiter__k{flex:0 0 auto;border-radius:999px;padding:8px 14px 8px 10px;gap:7px;scroll-snap-align:center;box-shadow:none}
  .gg-reiter__k:hover{transform:none}
  .gg-reiter__ic{width:auto;height:auto;background:none !important}
  .gg-reiter__ic svg{width:17px;height:17px}
  .gg-reiter__t small,.gg-reiter__t b,.gg-reiter__t em{display:none}
  .gg-reiter__kurz{display:block;font-size:13.5px;font-weight:500;white-space:nowrap}
  .gg-reiter__k.is-active .gg-reiter__kurz{color:#fff}
  .gg-reiter__zahl{position:static;border:0;min-width:18px;height:18px;font-size:10.5px}
  .gg-schritt{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#6b7a74;margin:10px 0 12px;gap:10px}
  .gg-schritt__punkte{display:flex;gap:4px;flex:0 0 auto}
  .gg-schritt__punkte i{width:16px;height:4px;border-radius:4px;background:#d8ddd8}
  .gg-schritt__punkte i.an{background:#0c5a49}
  .gg-speichern{bottom:calc(64px + env(safe-area-inset-bottom));margin:18px -8px 0;border-radius:14px}
  .gg-speichern__stand{display:none}
  .gg-speichern__knoepfe{width:100%}
  .gg-speichern__knoepfe [data-gg-speichern]{flex:1}
  .gg-vorschau-knopf{display:flex;position:fixed;right:16px;bottom:calc(140px + env(safe-area-inset-bottom));z-index:60;
    background:#1f2a27;color:#fff;border:0;border-radius:999px;padding:10px 18px;font:inherit;font-size:13.5px;font-weight:500;box-shadow:0 6px 18px rgba(0,0,0,.25)}
  .gg-vorschau.is-gross{display:block;position:fixed;inset:0;z-index:13000;background:#1f2a27;padding:52px 0 0;border-radius:0}
  .gg-vorschau.is-gross .gg-vorschau__kopf,.gg-vorschau.is-gross .txt-muted{display:none}
  .gg-vorschau.is-gross .gg-vorschau__geraet{border:0;border-radius:0;height:100%;margin:0}
  .gg-vorschau__zu{position:absolute;top:8px;right:12px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:24px}
  .gg-block__text small{white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
}
@media (min-width:821px) and (max-width:1279px){
  .gg-vorschau-knopf{display:flex;position:fixed;right:24px;bottom:96px;z-index:60;background:#1f2a27;color:#fff;border:0;border-radius:999px;padding:10px 18px;font:inherit;font-size:13.5px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
  .gg-vorschau.is-gross{display:block;position:fixed;right:24px;bottom:150px;top:auto;width:360px;z-index:13000;background:#fff;border-radius:18px;padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
  .gg-vorschau__zu{position:absolute;top:8px;right:10px;width:30px;height:30px;border-radius:50%;border:0;background:#eef3f0;color:#0c5a49;font-size:20px;z-index:2}
}
/* v1.3.944: Auswahl der Unterkunft als kompakte Leiste */
.gg-auswahl{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;background:#fff;border:1px solid var(--border,#e3e6e1);
  border-radius:14px;padding:12px 14px;margin:0 0 16px;max-width:none}
.gg-auswahl > .field__label{display:none}
.gg-auswahl > select{max-width:280px;flex:0 1 280px;height:auto;min-height:0}
.gg-auswahl .gg-link{flex:1 1 360px;display:flex;gap:8px;margin:0;align-items:center}
.gg-auswahl .gg-link input{flex:1;min-width:0}
.gg-auswahl > div[style]{margin-top:0 !important}
.gg-auswahl > .txt-muted{flex-basis:100%}
@media (max-width:820px){
  
  .gg-auswahl{padding:10px;gap:8px;margin-bottom:6px}
  .gg-auswahl > select{flex:1 1 100%;max-width:none}
  .gg-auswahl .gg-link{flex:1 1 100%}
  .gg-auswahl .gg-link input{display:none}
  .gg-auswahl .gg-link .btn{flex:1}
  .gg-auswahl > .txt-muted{display:none}
  .gg-form{padding-bottom:90px}
  .gg-speichern{position:fixed;left:8px;right:8px;bottom:calc(66px + env(safe-area-inset-bottom));margin:0;padding:8px}
  .gg-vorschau-knopf{bottom:calc(136px + env(safe-area-inset-bottom))}
}
@media (min-width:1280px){
  /* Die große Live-Vorschau ersetzt die kleinen Vorschauen in den Karten */
  .gg-panel .farb-vorschau,.gg-panel .gg-filter__vorschau{display:none}
  .gg-panel .gg-filter{grid-template-columns:1fr}
}
.gg-vorschau-ebene{position:fixed;inset:0;z-index:20000;background:#1f2a27;display:flex;flex-direction:column}
.gg-vorschau-ebene__kopf{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:13px;padding:10px 12px calc(10px + env(safe-area-inset-top,0px)) 16px}
.gg-vorschau-ebene__kopf button{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:24px;line-height:1}
.gg-vorschau-ebene iframe{flex:1;width:100%;border:0;background:#faf6ef}
@media (min-width:821px){.gg-vorschau-ebene{inset:auto 24px 24px auto;width:400px;height:min(760px,calc(100vh - 48px));border-radius:22px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}}
.gg-seitenkopf{display:none}

/* v1.3.946: Buchung in eine andere Unterkunft verschieben */
.umzug-knopf{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:10px;padding:11px 16px;
  font:inherit;font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:0;text-align:center;color:#0c5a49;
  background:#eef5f2;border:1.5px solid #0c5a49;border-radius:10px;cursor:pointer;transition:background .15s,color .15s}
.umzug-knopf svg{flex:none}
.umzug-knopf:hover,.umzug-knopf:focus-visible{background:#0c5a49;color:#fff;outline:none}
.umzug[hidden]{display:none}
.umzug__liste,.umzug__hinweis{border:1px solid var(--border,#e3e6e1);border-radius:12px;padding:12px 14px;background:#fff}
.umzug__hinweis{border-color:#c9a961;background:#fffaf0}
.umzug__kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.umzug__ziel{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;text-align:left;font:inherit;color:inherit;
  border:1px solid var(--border,#e3e6e1);border-radius:10px;background:#fff;padding:10px 12px;margin-top:8px;cursor:pointer}
.umzug__ziel:hover{border-color:#0c5a49;background:#f2f7f5}
.umzug__ziel.is-aus{cursor:not-allowed;opacity:.55;background:#f7f6f2}
.umzug__name{display:flex;flex-direction:column}
.umzug__name small{font-size:12px;color:#8a6d1f}
.umzug__name small.ok{color:#2f8468}
.umzug__betrag{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap}
.umzug__betrag small{font-size:12px;color:#6b7a74}
.umzug__weg{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;margin:4px 0}
.umzug__pfeil{color:#c9a961;font-weight:700}
.umzug__preis{margin-bottom:6px}

/* =====================================================================
   v1.3.947: Textdarstellung — Auswahl mit Beispiel rechts, 2 neue Stile
   ===================================================================== */
.gg-teil{padding-top:6px}
.gg-teil + .gg-teil{margin-top:18px;padding-top:16px;border-top:1px solid var(--border,#eef0ec)}
.gg-teil__titel{font-size:13.5px;font-weight:600;color:#23332e;margin-bottom:2px}
.gg-ts{display:flex;flex-direction:column;gap:8px}
.gg-ts__zeile{display:grid;grid-template-columns:auto minmax(0,1fr) 150px;gap:12px;align-items:center;cursor:pointer;
  border:1px solid var(--border,#e3e6e1);border-radius:12px;padding:10px 12px;background:#fff;transition:border-color .15s,background .15s}
.gg-ts__zeile:hover{border-color:#c9a961}
.gg-ts__zeile:has(input:checked){border-color:#0c5a49;background:#f2f7f5;box-shadow:0 0 0 3px rgba(12,90,73,.08)}
.gg-ts__zeile input{width:18px;height:18px;accent-color:#0c5a49;margin:0}
.gg-ts__text{display:flex;flex-direction:column;min-width:0}
.gg-ts__text strong{font-size:13.5px;font-weight:600}
.gg-ts__text strong small{font-size:10.5px;font-weight:600;color:#0c5a49;background:#e4efea;border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:1px}
.gg-ts__text em{font-style:normal;font-size:12px;color:#6b7a74;line-height:1.35;margin-top:2px}
/* Mini-Beispiel: kleines "Foto" mit Titel in der jeweiligen Darstellung */
.gg-ts__bsp{position:relative;width:150px;height:92px;border-radius:9px;overflow:hidden;display:flex;align-items:flex-end;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.12)}
.gg-ts__foto{position:absolute;inset:0;background:
  linear-gradient(180deg,#9cc3de 0%,#c8dcea 45%,transparent 46%),
  linear-gradient(170deg,transparent 40%,#6f9a70 41%,#5b875e 100%),
  #e9eef0}
.gg-ts__t{position:relative;z-index:1;display:flex;flex-direction:column;padding:6px 8px;width:100%;line-height:1.15}
.gg-ts__t i{font-style:normal;font-size:6.5px;letter-spacing:.12em;font-weight:700;color:#f3d99a}
.gg-ts__t b{font-size:10px;font-weight:700;color:#fff;white-space:nowrap}
.gg-ts__t u{display:block;height:3px;width:70%;border-radius:2px;background:rgba(255,255,255,.7);margin-top:4px;text-decoration:none}
.gg-ts__bsp--band .gg-ts__t{background:rgba(12,22,20,.66)}
.gg-ts__bsp--schatten .gg-ts__foto::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,35,28,.8),transparent 70%)}
.gg-ts__bsp--schatten .gg-ts__t b{text-shadow:0 1px 3px rgba(0,0,0,.6)}
.gg-ts__bsp--kasten{padding:7px}
.gg-ts__bsp--kasten .gg-ts__t{background:rgba(255,255,255,.95);border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.gg-ts__bsp--kasten .gg-ts__t i{color:#0c5a49}.gg-ts__bsp--kasten .gg-ts__t b{color:#23332e}.gg-ts__bsp--kasten .gg-ts__t u{background:#cfd6d2}
.gg-ts__bsp--karte{flex-direction:column;align-items:stretch}
.gg-ts__bsp--karte .gg-ts__foto{position:relative;inset:auto;height:52px;flex:0 0 52px}
.gg-ts__bsp--karte .gg-ts__t{background:#fff}
.gg-ts__bsp--karte .gg-ts__t i{color:#0c5a49}.gg-ts__bsp--karte .gg-ts__t b{color:#23332e}.gg-ts__bsp--karte .gg-ts__t u{background:#cfd6d2}
.gg-ts__bsp--seite{align-items:stretch}
.gg-ts__bsp--seite .gg-ts__foto{position:relative;inset:auto;width:36%;flex:0 0 36%}
.gg-ts__bsp--seite .gg-ts__t{flex:1;width:auto;min-width:0;justify-content:center;background:#fff;padding:6px 7px}
.gg-ts__bsp--seite .gg-ts__t b{font-size:9px}
.gg-ts__bsp--seite .gg-ts__t i{color:#0c5a49}.gg-ts__bsp--seite .gg-ts__t b{color:#23332e}.gg-ts__bsp--seite .gg-ts__t u{background:#cfd6d2}
@media (max-width:560px){.gg-ts__zeile{grid-template-columns:auto minmax(0,1fr) 104px}.gg-ts__bsp{width:104px;height:70px}
  /* v1.3.954: kleines Beispiel — Schrift passend verkleinern statt umbrechen */
  .gg-ts__t{padding:5px 6px}
  .gg-ts__t i{font-size:5px}
  .gg-ts__t b{font-size:8px}
  .gg-ts__t u{height:2px;margin-top:3px}
  .gg-ts__bsp--kasten{padding:5px}
  .gg-ts__bsp--karte .gg-ts__foto{height:36px;flex:0 0 36px}
  .gg-ts__bsp--seite .gg-ts__foto{width:30%;flex:0 0 30%}
  .gg-ts__bsp--seite .gg-ts__t{padding:5px}
  .gg-ts__bsp--seite .gg-ts__t b{font-size:6.8px}}

/* Gästemappe: Heller Kasten auf dem Foto */
.gm--text-kasten .gm-kachel--foto{padding:12px;min-height:300px}
.gm--text-kasten .gm-kachel--foto .gm-kachel__bg::after{background:none}
.gm--text-kasten .gm-kachel--foto .gm-kachel__t{width:100%;background:rgba(255,255,255,.95);color:#23332e;border-radius:12px;
  padding:12px 14px;box-shadow:0 6px 18px rgba(0,0,0,.18);transform:none !important;text-shadow:none}
.gm--text-kasten .gm-kachel--foto h3{color:#23332e}
.gm--text-kasten .gm-kachel--foto p{color:#5b6b66}
.gm--text-kasten .gm-kachel--foto .gm-kachel__kat{background:none;padding:0;color:var(--gm-gruen,#0c5a49)}
.gm--text-kasten .gm-kachel--foto .gm-kachel__mehr{color:var(--gm-gruen,#0c5a49)}
@media (min-width:720px){.gm--text-kasten .gm-kachel--foto{min-height:330px}}
/* Gästemappe: Bild links, Text rechts */
.gm--text-seite .gm-kachel--foto{display:flex;flex-direction:row;align-items:stretch;padding:0;min-height:140px;background:#fff;
  box-shadow:0 4px 18px rgba(7,63,53,.10)}
.gm--text-seite .gm-kachel--foto .gm-kachel__bg{position:relative;top:0;height:auto;flex:0 0 40%;width:40%;transform:none !important}
.gm--text-seite .gm-kachel--foto .gm-kachel__bg::after{background:none}
.gm--text-seite .gm-kachel--foto .gm-kachel__t{flex:1;min-width:0;padding:14px 16px;color:#23332e;align-self:center;transform:none !important;text-shadow:none}
.gm--text-seite .gm-kachel--foto h3{color:#23332e;font-size:17px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.gm--text-seite .gm-kachel--foto p{color:#5b6b66}
.gm--text-seite .gm-kachel--foto .gm-kachel__kat{background:none;padding:0;color:var(--gm-gruen,#0c5a49)}
.gm--text-seite .gm-kachel--foto .gm-kachel__mehr{color:var(--gm-gruen,#0c5a49)}
.gm--text-seite .gm-kachel .gm-nachweis{right:auto;left:6px;top:auto;bottom:6px;max-width:34%}

/* v1.3.948: Vorschau in den Einstellungen — ziehbar, schmale Bildlaufleiste */
html.gm-vorschau-modus{cursor:grab;scrollbar-width:thin}
html.gm-vorschau-modus:active{cursor:grabbing}
html.gm-vorschau-modus ::-webkit-scrollbar{width:6px}
html.gm-vorschau-modus ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.25);border-radius:6px}
html.gm-vorschau-modus .gm-kopf{min-height:520px}
/* v1.3.951: Wischen auf Tablets. Der Rahmen selbst scrollt nicht mehr,
   sondern der <body> der Mappe darin als eigenes Element (siehe
   guestguide-inline.js). Html und Body sind genau so hoch wie der Rahmen,
   damit Safari den Rahmen nicht auf die volle Inhaltshöhe aufbläht. Die
   Hüllen außen scrollen nicht mit — zwei Scrollebenen ineinander ließen
   das iPad raten, welche gemeint ist. */
html.gm-vorschau-modus,
html.gm-vorschau-modus body{height:100%!important;min-height:0!important;max-height:100%!important}
html.gm-vorschau-modus{overflow:hidden!important;overscroll-behavior:none;touch-action:auto}
html.gm-vorschau-modus body{overflow-x:hidden!important;overflow-y:scroll!important;-webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;touch-action:pan-x pan-y pinch-zoom;position:relative!important}
.gg-vorschau-ebene__rahmen{flex:1;min-height:0;position:relative;overflow:hidden;background:#faf6ef}
.gg-vorschau-ebene__rahmen iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.gg-vorschau__geraet{position:relative;overflow:hidden}
.gg-vorschau__geraet iframe{position:absolute;inset:0}

/* =====================================================================
   v1.3.949: KI-Zeichen — alle Funktionen, die KI nutzen, tragen es
   (Knöpfe mit data-ki, sonst <span class="ki-logo">).
   ===================================================================== */
.ki-logo,[data-ki]::before{content:'';display:inline-block;width:1.1em;height:1.1em;vertical-align:-.18em;margin-right:.4em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f1d98f'/%3E%3Cstop offset='1' stop-color='%23b8913f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M10 3c.7 4.6 3.4 7.3 8 8-4.6.7-7.3 3.4-8 8-.7-4.6-3.4-7.3-8-8 4.6-.7 7.3-3.4 8-8z'/%3E%3Cpath fill='url(%23g)' d='M19 1.5c.3 1.8 1.2 2.7 3 3-1.8.3-2.7 1.2-3 3-.3-1.8-1.2-2.7-3-3 1.8-.3 2.7-1.2 3-3z'/%3E%3C/svg%3E") center/contain no-repeat;flex:0 0 auto}
[data-ki]{display:inline-flex;align-items:center}
.menu-search__ai-btn::before{content:'' !important}
.badge--ki{display:inline-flex;align-items:center}
.badge--ki .ki-logo{width:1em;height:1em;margin-right:.2em}
.ki-hinweis{display:inline-flex;align-items:center;margin-top:6px;font-size:12.5px;color:#6b5412;background:rgba(201,169,97,.15);border-radius:999px;padding:3px 10px}

/* =====================================================================
   v1.3.949: Gästemappe-Einstellungen passen in jede Breite
   ===================================================================== */
.gg-panel,.gg-panel .card{min-width:0}
.gg-panel .card__header{flex-wrap:wrap;gap:10px;align-items:flex-start}
.gg-panel .card__header > div:first-child{flex:1 1 260px;min-width:0}
.gg-panel .input,.gg-panel .select,.gg-panel .textarea{max-width:100%;min-width:0}
.gg-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 14px;margin-bottom:10px}
.gg-felder .field{margin:0;min-width:0}
.gg-felder__breit{grid-column:1/-1}
@media (min-width:1100px){.gg-felder__breit{grid-column:span 2}}
.gg-schalter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 12px;margin:0 0 12px;
  background:#f7f8f5;border:1px solid var(--border,#eef0ec);border-radius:10px}
.gg-schalter__k{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;cursor:pointer}
.gg-schalter__k input{width:18px;height:18px;accent-color:#0c5a49;margin:0}
.gg-schalter__k small{font-weight:400;color:#6b7a74;font-size:11.5px;margin-left:4px}
.gg-schalter__wahl{display:inline-flex;align-items:center;gap:8px;font-size:13px;margin-left:auto}
.gg-schalter__wahl .select{width:auto;min-width:150px;padding-top:6px;padding-bottom:6px}
.gg-feldkopf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.gg-feldkopf .field__label{margin:0}
.gg-fussleiste{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border,#eef0ec)}
.gg-fussleiste__platz{flex:1}
/* Empfehlungen: Kopfzeile mit Griff, Mini-Bild, Titel */
.gg-empf{border:1px solid var(--border,#e3e6e1);border-radius:12px;background:#fff;margin-bottom:8px;overflow:hidden}
.gg-empf[open]{border-color:#0c5a49;box-shadow:0 0 0 3px rgba(12,90,73,.08)}
.gg-empf__kopf{display:flex !important;align-items:center;gap:10px;padding:9px 12px !important;cursor:pointer;list-style:none}
.gg-empf__kopf::-webkit-details-marker{display:none}
.gg-empf__bild{flex:0 0 auto;width:44px;height:34px;border-radius:7px;background:linear-gradient(150deg,#2b6f58,#69996f) center/cover no-repeat}
.gg-empf__text{flex:1;min-width:0;display:flex;flex-direction:column}
.gg-empf__text .guestguide-activity-summary__title{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gg-empf__text .guestguide-activity-summary__meta{font-size:12px;color:#6b7a74}
.gg-empf[open] .gg-block__pfeil{transform:rotate(-135deg);margin-top:4px}
.gg-empf:not([open]) .gg-block__pfeil{transform:rotate(45deg);margin-top:0}
.gg-empf__inhalt{padding:12px 14px 14px;border-top:1px solid var(--border,#eef0ec)}
.gg-empf.gg-zieht{opacity:.75;box-shadow:0 10px 26px rgba(0,0,0,.18);position:relative;z-index:5}
.gg-bildfeld__reihe{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.gg-bildfeld__vorschau{flex:0 0 auto;width:120px !important;height:84px !important;min-height:0 !important;border-radius:9px;overflow:hidden;
  background:#f1f3ef;display:flex !important;align-items:center;justify-content:center;font-size:11.5px;color:#8a948f;margin:0 !important}
.gg-bildfeld__vorschau img{width:100%;height:100%;object-fit:cover}
.gg-bildfeld__werkzeuge{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:8px}
.gg-bildfeld__hochladen{align-self:flex-start;cursor:pointer}
.gg-bildfeld__url{display:flex;gap:8px}
.gg-bildfeld__url .input{flex:1;min-width:0}
/* Infoblöcke: gleiche Ordnung */
.gg-block__inhalt .gg-felder{margin-top:8px}
.gg-empf__text .guestguide-activity-summary__meta{text-align:left;margin:0}
.gg-empf__text .guestguide-activity-summary__title{color:#23332e}
@media (max-width:1400px) and (min-width:1181px){
  .gg-reiter{gap:8px}
  .gg-reiter__k{padding:10px 9px;gap:8px}
  .gg-reiter__ic{width:32px;height:32px}
  .gg-reiter__ic svg{width:18px;height:18px}
  .gg-reiter__t b{font-size:12.5px;hyphens:auto;overflow-wrap:anywhere}
  .gg-reiter__t em{font-size:10.5px}
}

/* v1.3.953: Laufzeit — Portal und Richtung */
.lz-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.lz-weg{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.lz-weg--empfangen{background:#e3f1ec;color:#0c5a49}
.lz-weg--gesendet{background:#fbf1dc;color:#8a6d1f}
.lz-pfad{font-size:13px;font-weight:600;color:#2b3a35}
.lz-pfad b{color:#c9a961;margin:0 2px}
.lz-herkunft{font-size:12px;color:#6b7a74}

/* v1.3.955: Quellenangabe unter dem Wetter */
.gm-wetter__quelle{margin:8px 0 0;font-size:10.5px;line-height:1.4;color:#8a978f;text-align:right}

/* v1.3.956: Wetter testen — ausführliche Karte */
.wt-karte{display:block!important;text-align:left}
.wt-karte__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:baseline;margin-bottom:8px}
.wt-karte__kopf strong{font-size:16px}
.wt-karte__jetzt{font-weight:600;font-size:13.5px}
.wt-karte__warnung{background:#fff4e0;border:1px solid #e3b95c;color:#7a5410;border-radius:8px;padding:8px 10px;font-size:13px;margin-bottom:8px}
.wt-karte__liste{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0 0 10px;font-size:13px;line-height:1.4}
.wt-karte__liste dt{color:#6b7a74;white-space:nowrap}
.wt-karte__liste dd{margin:0;min-width:0;overflow-wrap:anywhere}
.wt-karte__liste small{color:#6b7a74}
.wt-karte__titel{font-size:12px;font-weight:700;letter-spacing:.04em;color:#6b7a74;margin:4px 0}
.wt-karte__tage{list-style:none;margin:0 0 10px;padding:0;font-size:13px;line-height:1.7}
.wt-karte__tage b{display:inline-block;min-width:78px}
.wt-karte__fuss{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid rgba(0,0,0,.08);padding-top:8px}
.wt-karte__fuss em{font-size:11.5px;color:#6b7a74;font-style:normal}
@media (max-width:560px){.wt-karte__liste{grid-template-columns:1fr}.wt-karte__liste dt{margin-top:4px}}

/* v1.3.957: „Ansehen“ als bildschirmfüllende Vorschau, Link auf die echte Seite */
.gg-vorschau-ebene__kopf{gap:10px}
.gg-vorschau-ebene__kopf span{flex:1;min-width:0}
.gg-vorschau-ebene__neu{color:#f3d99a;font-size:13px;text-decoration:none;white-space:nowrap;padding:6px 4px}
.gg-vorschau-ebene__neu:hover{text-decoration:underline}
@media (min-width:821px){
  .gg-vorschau-ebene.gg-vorschau-ebene--voll{inset:0;width:auto;height:auto;border-radius:0;box-shadow:none}
}

/* v1.3.959: Farbwerkzeug — Pipette, Farben von der Website, Bildschirmfoto */
.color-control:has(.fw-knopf){display:inline-flex!important;align-items:center;gap:6px;width:auto!important}
.fw-knopf{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border-radius:8px;
  border:1px solid var(--border,#d9dfdc);background:#fff;color:#0c5a49;cursor:pointer;padding:0}
.fw-knopf:hover,.fw-knopf:focus-visible{background:#eef5f2;border-color:#0c5a49;outline:none}
.fw-leiste{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;border-radius:12px;
  background:#f2f7f5;border:1px solid #d3e3dc;color:#0c5a49}
.fw-leiste > svg{flex:0 0 auto}
.fw-leiste > div{flex:1;min-width:180px;display:flex;flex-direction:column}
.fw-leiste strong{font-size:13.5px}
.fw-leiste span{font-size:12.5px;color:#5b6b66}
.fw-ebene{position:fixed;inset:0;z-index:21000;background:rgba(15,25,22,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.fw-fenster{background:#fff;border-radius:18px;width:100%;max-width:620px;max-height:calc(100vh - 32px);overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.3);display:flex;flex-direction:column}
.fw-kopf{display:flex;justify-content:space-between;gap:12px;padding:16px 18px 10px;border-bottom:1px solid #eef0ee;position:sticky;top:0;background:#fff;z-index:2}
.fw-kopf > div{display:flex;flex-direction:column}
.fw-kopf strong{font-size:16px}
.fw-kopf span{font-size:12.5px;color:#6b7a74}
.fw-zu{width:34px;height:34px;border-radius:50%;border:0;background:#f1f3f2;font-size:22px;line-height:1;cursor:pointer;flex:0 0 auto}
.fw-teil{padding:12px 18px;border-bottom:1px solid #f1f3f2}
.fw-teil p{font-size:13px;line-height:1.5;margin:0 0 8px;color:#3d4a46}
.fw-teil__titel{font-size:12px;font-weight:700;letter-spacing:.04em;color:#0c5a49;margin-bottom:6px;text-transform:uppercase}
.fw-bildschirm{display:inline-flex;align-items:center;gap:8px}
.fw-zeile{display:flex;gap:8px}
.fw-zeile .input{flex:1;min-width:0}
.fw-ergebnis{margin-top:10px}
.fw-gruppe{font-size:12px;color:#6b7a74;margin:8px 0 6px}
.fw-farben{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.fw-farbe{position:relative;height:52px;border-radius:10px;border:1px solid rgba(0,0,0,.12);cursor:pointer;padding:0;overflow:hidden}
.fw-farbe span{position:absolute;left:0;right:0;bottom:0;font-size:10px;background:rgba(255,255,255,.88);color:#23332e;padding:2px 0;font-family:ui-monospace,monospace}
.fw-farbe.is-aktiv{outline:3px solid #0c5a49;outline-offset:2px}
.fw-vorschlag{margin-top:10px;padding:10px 12px;border-radius:10px;background:#f7f6f2}
.fw-vorschlag__liste{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px;font-size:12.5px}
.fw-vorschlag__liste span{display:inline-flex;align-items:center;gap:6px}
.fw-vorschlag__liste i{width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.15);display:inline-block}
.fw-bild-knopf{cursor:pointer}
.fw-leinwand{position:relative;margin-top:10px;max-height:360px;overflow:auto;border-radius:10px;border:1px solid #e3e6e1}
.fw-leinwand canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:manipulation}
.fw-lupe{position:absolute;transform:translate(12px,-44px);min-width:74px;padding:14px 6px 2px;border-radius:8px;border:2px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,.35);font-size:10px;font-family:ui-monospace,monospace;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);pointer-events:none}
.fw-fuss{display:flex;align-items:center;gap:8px;padding:12px 18px;position:sticky;bottom:0;background:#fff;border-top:1px solid #eef0ee}
.fw-probe{width:38px;height:34px;border-radius:8px;border:1px solid rgba(0,0,0,.15);flex:0 0 auto}
.fw-hex{width:110px;font-family:ui-monospace,monospace}
.fw-fuss .fw-abbrechen{margin-left:auto}
@media (max-width:560px){.fw-ebene{align-items:flex-end;padding:0}.fw-fenster{border-radius:18px 18px 0 0;max-height:92vh}.fw-hex{width:90px}}

/* v1.3.962: Export mit Details */
.ical-details{margin-top:10px;border:1px solid #e6dcc3;border-radius:10px;background:#fffaf0}
.ical-details > summary{cursor:pointer;padding:8px 12px;font-size:13px;font-weight:600;color:#7a5a12}
.ical-details__inhalt{padding:0 12px 12px}
.ical-details__warnung{font-size:12.5px;line-height:1.5;color:#5b4a20;margin-bottom:8px}
.property-ical-export .ical-details__zeile{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ical-details__zeile code{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px;background:#fff;border:1px solid #eadfc4;border-radius:8px;padding:7px 9px}

/* v1.3.965: Nachweis Detail-Link */
.ical-details__stand{font-size:12.5px;line-height:1.5;margin:8px 0 6px;color:#3d4a46}
.ical-details__inhaltsliste{margin-top:8px;max-height:320px;overflow:auto;background:#fff;border:1px solid #eadfc4;border-radius:8px;padding:8px 10px;font-size:12.5px}
.ical-details__eintrag{padding:5px 0;border-bottom:1px solid #f1ece0;line-height:1.45}
.ical-details__eintrag:last-child{border-bottom:0}
.ical-details__eintrag span{color:#6b7a74}

/* v1.3.966: Rückweg-Link je Importquelle */
.feed-rueckweg{margin-top:8px;padding:8px 10px;border-radius:8px;background:#f2f7f5;border:1px solid #d3e3dc}
.feed-rueckweg__titel{font-size:12.5px;font-weight:700;color:#0c5a49}
.feed-rueckweg__text{font-size:12px;line-height:1.45;color:#3d4a46;margin:2px 0 6px;font-style:normal}
.feed-rueckweg__zeile{display:flex;gap:8px;align-items:center}
.feed-rueckweg__zeile code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;background:#fff;border:1px solid #d3e3dc;border-radius:6px;padding:5px 8px}
.export-quelle{color:#8a6d1f}
.property-feed-row > .feed-rueckweg{grid-column:1 / -1;flex-basis:100%;width:100%}
.property-feed-row:has(> .feed-rueckweg){flex-wrap:wrap}

/* v1.3.968: Kanal-Seite — je Portal ein Kasten mit beiden Richtungen */
.portal-liste{display:flex;flex-direction:column;gap:12px;margin:12px 0}
.portal-kasten{border:1px solid #d3e3dc;border-radius:14px;background:#fff;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.portal-kasten--fehler{border-color:rgba(180,50,50,.4);background:rgba(180,50,50,.03)}
.portal-kasten--aus{opacity:.7}
.portal-kasten__kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.portal-kasten__kopf strong{font-size:15.5px}
.portal-kasten__knoepfe{margin-left:auto;display:flex;gap:4px}
.portal-kasten__richtung{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:#3d4a46;padding:8px 10px;border-radius:10px;background:#f7f8f7}
.portal-kasten__richtung--zurueck{background:#f2f7f5;border:1px solid #d3e3dc}
.portal-kasten__pfeil{font-size:11.5px;font-weight:700;letter-spacing:.03em;color:#0c5a49;text-transform:uppercase}
.portal-kasten__auftrag{font-size:13.5px;font-weight:600;color:#1f2a27}
.portal-kasten__zeile{display:flex;gap:8px;align-items:center}
.portal-kasten__zeile code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;background:#fff;border:1px solid #d3e3dc;border-radius:8px;padding:7px 9px}
.portal-kasten__stand{font-size:12px;color:#5b6b66;line-height:1.45}
.ical-mehr{margin-top:12px;border-top:1px solid #eef0ee;padding-top:10px}
.ical-mehr > summary{cursor:pointer;font-size:13px;font-weight:600;color:#0c5a49}
.ical-mehr__inhalt{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.ical-mehr__block{display:flex;flex-direction:column;gap:6px}
.ical-mehr__block label{font-weight:700;font-size:12px;color:var(--text-2,#5b6b66)}
.ical-mehr__zeile{display:flex;gap:8px;align-items:center}
.ical-mehr__zeile code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#f4f7f4;border:1px solid var(--border,#e3e6e1);border-radius:10px;padding:8px 10px;font-size:12px}
.ical-mehr__klapp > summary{cursor:pointer;color:#0c5a49}
.ical-details__zeile{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media (max-width:560px){.portal-kasten__knoepfe{margin-left:0;width:100%}.portal-kasten__zeile{flex-wrap:wrap}}
.portal-liste,.portal-kasten,.portal-kasten__richtung,.portal-kasten__zeile,.ical-mehr,.ical-mehr__inhalt,.ical-mehr__block,.ical-mehr__zeile{min-width:0;max-width:100%}
.property-ical-card{min-width:0;max-width:100%;overflow:hidden}

/* v1.3.969: Gäste importieren */
.gi-kasten{border:1px solid #d3e3dc;background:#f2f7f5;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5}
.gi-spalten{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:#3d4a46}
.gi-spalten span{background:#fff;border:1px solid #d3e3dc;border-radius:6px;padding:1px 6px}
.gi-beispiele{margin-top:8px;font-size:12.5px;color:#3d4a46}

/* v1.3.969: Hinweis „Bekannter Gast“ im Buchungsfenster */
.gast-bekannt{display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#f2f7f5;border:1px solid #d3e3dc;position:relative}
.gast-bekannt > div{flex:1;display:flex;flex-direction:column;gap:2px;font-size:13px;min-width:0}
.gast-bekannt span{font-size:12.5px;color:#5b6b66}
.gast-bekannt em{font-size:12.5px;color:#8a6d1f;font-style:normal}
.gast-bekannt__zu{border:0;background:transparent;font-size:20px;line-height:1;color:#6b7a74;cursor:pointer;padding:2px 4px}
.gi-hinweis{margin-top:6px;font-size:12.5px;color:#7a5410;background:#fff8e8;border:1px solid #ecd7a6;border-radius:8px;padding:6px 8px}

/* v1.3.973 — Gästeliste: Sortieren, Filtern, Buchstabenleiste */
.gl-leiste { align-items: center; }
.gl-sort { display: flex; align-items: center; gap: 6px; margin: 0; }
.gl-sort .select { min-width: 150px; }
.gl-richtung { white-space: nowrap; }
.gl-zahl:not(:empty) {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 9px; background: var(--brand-600, #0f3d2e); color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}
.gl-filter {
  background: var(--bp-cream-card, #faf6ef); border: 1px solid rgba(15, 61, 46, 0.1);
  border-radius: 12px; padding: 14px 16px; margin: 4px 0 10px;
}
.gl-filter__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.gl-filter__feld { margin: 0; min-width: 0; }
.gl-filter__feld .select { width: 100%; }
.gl-aktiv { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.gl-aktiv:empty { display: none; }
.gl-schild {
  border: 1px solid rgba(15, 61, 46, 0.2); background: #eef5f1; color: #0f3d2e;
  border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; font: inherit; font-size: 12px;
}
.gl-schild:hover { background: #dcebe3; }
.gl-schild--alle { background: transparent; }
.gl-abc { display: flex; gap: 2px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; }
.gl-abc[hidden] { display: none; }
.gl-abc__b {
  flex: 0 0 auto; min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 6px;
  background: transparent; color: #0f3d2e; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.gl-abc__b:hover:not(:disabled) { background: #eef5f1; }
.gl-abc__b.ist-aktiv { background: var(--brand-600, #0f3d2e); color: #fff; }
.gl-abc__b:disabled { color: #c3c7c1; cursor: default; }
.table--contacts th.gl-th button {
  all: unset; cursor: pointer; font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit;
}
.table--contacts th.gl-th.ist-aktiv { color: #0f3d2e; }
.table--contacts th.gl-th button:focus-visible { outline: 2px solid #0f3d2e; outline-offset: 2px; border-radius: 3px; }
.gl-kommt { color: #0f7a4a; font-weight: 600; }
@media (max-width: 900px) {
  .filter-bar.gl-leiste { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; }
  .filter-bar.gl-leiste #contacts-search { flex: 1 1 100%; width: 100%; min-width: 0 !important; }
  .gl-sort { flex: 1 1 100%; min-width: 0; }
  .gl-sort > .txt-muted { display: none; }
  .filter-bar.gl-leiste .gl-sort .select { flex: 1 1 auto; width: auto; min-width: 0; }
  .gl-sort .gl-richtung { flex: 0 0 auto; }
  .filter-bar.gl-leiste > .btn { flex: 1 1 0; min-width: 0; }
  .gl-filter__raster { grid-template-columns: 1fr 1fr; }
  .gl-name { font-size: 15px; }
}
@media (max-width: 520px) {
  .gl-filter__raster { grid-template-columns: 1fr; }
}
/* v1.3.973 — Gästekarten am Handy und Tablet kompakt: Name und Status oben,
   darunter Kontakt, Ort und eine Zeile mit Buchungen, Umsatz, Aufenthalt */
@media (max-width: 1100px) {
  .table--contacts.table--cards tr.contact-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "name name name status"
      "kontakt kontakt kontakt kontakt"
      "ort ort ort ort"
      "buch umsatz letzt letzt";
    column-gap: 14px; row-gap: 2px; padding: 12px 14px;
  }
  .table--contacts.table--cards tr.contact-row td { width: auto; padding: 1px 0; text-align: left !important; }
  .table--contacts.table--cards td:nth-child(1) { grid-area: name; }
  .table--contacts.table--cards td:nth-child(2) { grid-area: kontakt; }
  .table--contacts.table--cards td:nth-child(3) { grid-area: ort; }
  .table--contacts.table--cards td:nth-child(4) { grid-area: buch; font-size: 13px; }
  .table--contacts.table--cards td:nth-child(5) { grid-area: umsatz; font-size: 13px; }
  .table--contacts.table--cards td:nth-child(6) { grid-area: letzt; font-size: 13px; }
  .table--contacts.table--cards td:nth-child(7) { grid-area: status; align-self: start; }
  .table--contacts.table--cards td:nth-child(4)::before { content: "Buchungen "; color: #6b7168; font-weight: 400; }
  .table--contacts.table--cards td:nth-child(5)::before { content: "Umsatz "; color: #6b7168; }
  .table--contacts.table--cards td:nth-child(6)::before { content: "Zuletzt "; color: #6b7168; }
  .table--contacts.table--cards tr.contact-row td:nth-child(3):empty { display: none; }
}

/* v1.3.974 — Kalenderlegende anklickbar, Farbwahl je Portal */
.calendar-channel-legend__item--knopf {
  border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 750;
  color: var(--text-2); padding: 3px 6px; margin: -3px -6px; border-radius: 8px; cursor: pointer;
}
.calendar-channel-legend__item--knopf:hover { background: #f1f5f2; }
.calendar-channel-legend__item--knopf:focus-visible { outline: 2px solid #0f3d2e; outline-offset: 1px; }
.kanal-farbwahl {
  position: fixed; z-index: 3000; background: #fff; border: 1px solid rgba(15, 61, 46, 0.15);
  border-radius: 14px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18); padding: 12px;
}
.kanal-farbwahl__kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.kanal-farbwahl__zu { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: #6b7168; padding: 0 4px; }
.kanal-farbwahl__raster { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.kanal-farbwahl__f {
  aspect-ratio: 1; width: 100%; border: 0; border-radius: 8px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.kanal-farbwahl__f.ist-aktiv { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0f3d2e; }
.kanal-farbwahl__frei { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 8px; font-size: 13px; }
.kanal-farbwahl__frei input { width: 52px; height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 2px; background: #fff; cursor: pointer; }
.kanal-farbwahl__std { width: 100%; }

/* v1.3.977 — Überschriften-Schalter in den Widget-Einstellungen */
.ws-schalter { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ws-schalter__zeile {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0;
  border: 1px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer;
}
.ws-schalter__zeile input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: #0f3d2e; }
.ws-schalter__zeile strong { display: block; font-size: 13px; }
.ws-schalter__zeile em { display: block; font-style: normal; font-size: 12px; color: #6b7168; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ws-schalter__zeile span { min-width: 0; }
.ws-vorschau-breite { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.ws-vorschau-breite .btn.is-aktiv { background: #0f3d2e; color: #fff; border-color: #0f3d2e; }
/* v1.3.978 — Feld mit Kopierknopf daneben */
.kopier-zeile { display: flex; gap: 8px; align-items: center; }
.kopier-zeile .input { flex: 1 1 auto; min-width: 0; }
.kopier-zeile .btn { flex: 0 0 auto; white-space: nowrap; }

/* v1.3.980 — Widget-Seite: Einstellungen links, Vorschau rechts mitlaufend */
.ws-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ws-links > form { display: grid; gap: 16px; }
@media (min-width: 1400px) {
  .ws-layout { grid-template-columns: minmax(0, 1fr) 420px; }
  .ws-rechts { position: sticky; top: 12px; }
  .ws-rechts > .card > div[style*="height:760px"] { height: calc(100vh - 170px) !important; }
}
.ws-teil { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
.ws-teil:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.ws-teil__titel { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; }
.ws-teil__titel span {
  width: 24px; height: 24px; border-radius: 999px; background: #0f3d2e; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto;
}
/* v1.3.985 — Hinweise neben den Zahlarten im Buchungswidget */
.zahlart-status { font-style: normal; display: block; }
.zahlart-status--ok { color: #15803d; }
.zahlart-status--warn { color: #92400e; }
.zahlart-status--fehlt { color: #b91c1c; font-weight: 600; }
.zahlart-status a { color: inherit; text-decoration: underline; }

/* v1.3.986: Knopf „Standardfarbe“ in der Farbwahl passt auch am Handy in
   seinen Rahmen (die Handy-Regel setzt Knöpfe sonst auf 16 px Schrift) */
.kanal-farbwahl .btn.kanal-farbwahl__std {
  font-size: 13px !important; min-height: 36px; padding: 6px 10px;
  white-space: normal; line-height: 1.2; text-align: center; overflow-wrap: anywhere;
}
.kanal-farbwahl { max-width: calc(100vw - 16px); box-sizing: border-box; }

/* v1.3.999: Buchungen nach Kanal — Ring und Legende, auch auf dem Handy */
.kanal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kanal-kopf select { width: auto; max-width: 100%; }
.kanal-diagramm { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.kanal-diagramm__ring { width: 170px; height: 170px; flex: 0 0 auto; margin: 0 auto; }
.kanal-legende { flex: 1 1 240px; min-width: 0; }
.kanal-legende__zeile {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 3.4em;
  align-items: center; column-gap: 10px; padding: 7px 0; font-size: 14px;
  border-bottom: 1px solid rgba(15, 61, 46, 0.06);
}
.kanal-legende__zeile:last-child { border-bottom: 0; }
.kanal-legende__name { overflow-wrap: anywhere; line-height: 1.3; }
.kanal-legende__zahl { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.kanal-legende__anteil { text-align: right; color: var(--text-3, #6b7168); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .kanal-diagramm { flex-direction: column; align-items: stretch; }
  .kanal-diagramm__ring { width: 160px; height: 160px; }
}
/* v1.3.999: Karten dürfen nicht breiter als der Bildschirm werden */
.dash-charts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-charts-grid > .dash-card { min-width: 0; }
@media (max-width: 900px) { .dash-charts-grid { grid-template-columns: minmax(0, 1fr); } }

/* v1.3.1003: Markierung nach Sprung aus einer Konfliktwarnung */
.cal-markierung { position: absolute; z-index: 60; pointer-events: none; border: 3px solid #c0392b; border-radius: 8px; box-shadow: 0 0 0 4px rgba(192,57,43,.2); animation: calMarkPuls 1.2s ease-in-out 5; }
@keyframes calMarkPuls { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* v1.3.1033: schräger Rahmen in Form des Buchungsbalkens */
.cal-markierung--schraeg { border: 0; border-radius: 0; box-shadow: none; }
.cal-markierung--schraeg svg { display: block; overflow: visible; }

/* v1.3.1003: Konfliktwarnung als Kalenderbild */
.konflikt-karte { border: 1px solid rgba(15,61,46,.12); border-radius: 14px; padding: 14px; margin-bottom: 12px; background: #fff; cursor: pointer; }
.konflikt-karte:hover { border-color: rgba(15,61,46,.3); }
.konflikt-karte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.konflikt-karte__satz { font-size: 14px; line-height: 1.45; margin-bottom: 10px; }
.konflikt-karte__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.konflikt-karte__mehr { margin-top: 10px; }
.konflikt-karte__mehr summary { cursor: pointer; font-size: 13px; color: var(--text-3, #6b7168); }
.konflikt-karte__mehr > div { margin-top: 4px; }
.konflikt-bild { display: grid; gap: 4px; }
.konflikt-bild__zeile, .konflikt-bild__achse { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; }
.konflikt-bild__name { font-size: 12px; color: var(--text-3, #6b7168); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konflikt-bild__spur { position: relative; height: 26px; background: repeating-linear-gradient(90deg, #f3f4f2 0 1px, transparent 1px 100%); border-radius: 6px; background-color: #fafaf8; }
.konflikt-bild__balken { position: absolute; top: 3px; bottom: 3px; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 600; line-height: 20px; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.konflikt-bild__balken--eigen { background: #0c5a49; }
.konflikt-bild__balken--portal { background: #0ea5e9; }
.konflikt-bild__ueber { position: absolute; top: 0; bottom: 0; background: rgba(192,57,43,.22); border-left: 2px solid #c0392b; border-right: 2px solid #c0392b; }
.konflikt-bild__tage { display: flex; }
.konflikt-bild__tage span { flex: 1 1 0; text-align: center; font-size: 10px; line-height: 1.2; color: var(--text-3, #6b7168); }

/* v1.3.1005: Fenster für echte Doppelbuchungen */
.konflikt-fenster { position: fixed; inset: 0; z-index: 9000; background: rgba(15,23,28,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.konflikt-fenster__karte { background: #fff; border-radius: 18px; max-width: 460px; width: 100%; max-height: calc(100dvh - 32px); overflow: auto; padding: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.3); border-top: 5px solid #c0392b; }
.konflikt-fenster__kopf { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.konflikt-fenster__zeichen { flex: 0 0 36px; height: 36px; border-radius: 50%; background: #c0392b; color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.konflikt-fenster__titel { font-weight: 700; font-size: 17px; }
.konflikt-fenster__ort { font-size: 13px; color: var(--text-3, #6b7168); }
.konflikt-fenster__satz { font-size: 15px; line-height: 1.45; margin: 0 0 12px; }
.konflikt-fenster__tipp { font-size: 13px; line-height: 1.45; color: var(--text-3, #6b7168); margin: 12px 0 0; }
.konflikt-fenster__knoepfe { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
@media (min-width: 440px) { .konflikt-fenster__knoepfe { grid-template-columns: 1fr 1fr 1fr; } }
.konflikt-fenster__weiter { margin-top: 10px; background: none; border: 0; color: #0c5a49; font-weight: 600; cursor: pointer; padding: 6px 0; }

/* v1.3.1007: Etwas Luft zwischen den Unterkunftszeilen im Mehrfach-Kalender.
   Die Trennlinien entstanden bisher aus 1-px-Lücken, durch die der graue
   Hintergrund des Rasters schien. Eine größere Lücke zwischen den Zeilen
   wäre damit ein grauer Balken geworden. Deshalb: Rasterhintergrund
   durchsichtig, senkrechte Linien als rechter Rand jeder Zelle, zwischen
   den Zeilen 6 px freier Raum. In belegten Zellen ist der Rand durchsichtig,
   der Balken läuft durch. */
.calendar-new:not(.calendar-new--single) .cal-grid {
  row-gap: 6px !important;
  column-gap: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}
.calendar-new:not(.calendar-new--single) .cal-grid > .cal-cell,
.calendar-new:not(.calendar-new--single) .cal-grid > .cal-headcell {
  border-right: 1px solid #d4d4d4 !important;
  box-sizing: border-box;
}
.calendar-new:not(.calendar-new--single) .cal-grid > .cal-cell.cal-cell--booked,
.calendar-new:not(.calendar-new--single) .cal-grid > .cal-cell.cal-cell--blocked {
  border-right-color: transparent !important;
}

/* v1.3.1009: Waagerechte Linien zurück. Seit 1.3.1007 entstanden die Linien
   nicht mehr aus Lücken im Raster; die senkrechten wurden als Zellrand
   nachgebaut, die waagerechten fehlten. Jetzt hat jede Zeile oben und unten
   eine feine Linie — mit dem Abstand dazwischen wirkt jede Unterkunft wie
   ein eigenes Band. */
.calendar-new:not(.calendar-new--single) .cal-grid > .cal-cell,
.calendar-new:not(.calendar-new--single) .cal-grid > .cal-rowlabel,
.calendar-new:not(.calendar-new--single) .cal-grid > .cal-headcell {
  border-top: 1px solid #d4d4d4 !important;
  border-bottom: 1px solid #d4d4d4 !important;
  box-sizing: border-box;
}


/* v1.3.1034: Buchungsformular kompakter — aufklappbare Abschnitte und Häkchen */
details.booking-step--klapp > summary { list-style: none; cursor: pointer; position: relative; padding-right: 28px; }
details.booking-step--klapp > summary::-webkit-details-marker { display: none; }
details.booking-step--klapp > summary::after { content: ''; position: absolute; right: 6px; top: 10px; width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .55; transition: transform .15s; }
details.booking-step--klapp[open] > summary::after { transform: rotate(-135deg); top: 14px; }
details.booking-step--klapp:not([open]) > summary { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.kompakt-haken { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 10px 0 0; cursor: pointer; font-size: 15px; }
.kompakt-haken input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--brand-700, #0c5a49); }
.kompakt-haken > span { flex: 1 1 auto; min-width: 0; }
.kompakt-info { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); background: #fff;
  font: italic 600 13px/1 Georgia, serif; color: var(--text-3, #6b7168); cursor: pointer; padding: 0; }
.kompakt-info__text { margin: 2px 0 6px 32px; line-height: 1.45; }
.kompakt-klapp { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.06); }
.kompakt-klapp > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; min-height: 36px; }
.kompakt-klapp > .textarea { margin-top: 8px; }
.kompakt-klapp--leise { margin: 0 0 10px; padding-top: 0; border-top: 0; }
.kompakt-klapp--leise > summary { font-weight: 500; font-size: 13px; color: var(--text-3, #6b7168); min-height: 28px; }
.kompakt-klapp > summary { list-style: none; }
.kompakt-klapp > summary::-webkit-details-marker { display: none; }
.kompakt-klapp > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .5; flex: 0 0 auto; margin-right: 6px; }
.kompakt-klapp[open] > summary::after { transform: rotate(-135deg); }
.onsite-items-summary:empty { display: none; }

/* v1.3.1036: Dokumente der Buchung als eigene Zeile statt in der Fußleiste */
.dokument-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.dokument-knoepfe .btn { flex: 1 1 140px; min-height: 40px; }

/* ===========================================================================
 * v1.3.1055 — Einrichtung in 5 Schritten (public/js/modules/setupwizard.js)
 * Handy zuerst: volle Breite, große Knöpfe (mind. 48 px). Am Rechner eine
 * schmale, mittige Karte, damit Zeilen nicht endlos lang werden.
 * ======================================================================== */
.ew-karte { max-width: 640px; margin: 0 auto 32px; background: #fff; border: 1px solid #e3e1d8; border-radius: 22px; box-shadow: 0 10px 30px rgba(20, 40, 30, .06); overflow: hidden; color: #17201d; }
.ew-kopf { padding: 20px 28px 14px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid #efede6; }
.ew-kopf__zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ew-kopf__marke { font-size: 13px; font-weight: 700; color: #0c5a49; letter-spacing: .02em; }
.ew-kopf__schritt { font-size: 13px; color: #4f5a55; }
.ew-balken { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ew-balken span { height: 5px; border-radius: 3px; background: #dcdcd4; }
.ew-balken span.is-an { background: #0c5a49; }
.ew-inhalt { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 16px; }
.ew-titel { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; color: #17201d; }
.ew-text { margin: 0; font-size: 16px; line-height: 1.5; color: #3d4844; }
.ew-text--klein { font-size: 14px; line-height: 1.45; }
.ew-leise { color: #4f5a55; font-weight: 500; }
.ew-ueber { font-size: 13px; font-weight: 700; color: #4f5a55; }
.ew-kasten { background: #faf9f5; border: 1px solid #e3e1d8; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ew-kasten--gruen { background: #eef5f2; border-color: #d4e6de; }
.ew-haken { position: relative; padding-left: 32px; font-size: 15px; line-height: 1.4; }
.ew-haken::before { content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #0c5a49; }
.ew-haken::after { content: ''; position: absolute; left: 7px; top: 4px; width: 5px; height: 10px; border: solid #0c5a49; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.ew-frage { display: flex; flex-direction: column; gap: 12px; }
.ew-frage__text { font-size: 17px; font-weight: 800; }
.ew-frage__knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ew-wahl { min-height: 52px; border: 1.5px solid #c9d3cd; background: #fff; color: #17201d; border-radius: 12px; font: 700 17px var(--font-ui); cursor: pointer; }
.ew-wahl:hover { border-color: #0c5a49; }
.ew-wahl.is-an { background: #0c5a49; border-color: #0c5a49; color: #fff; }
.ew-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ew-feld label { font-size: 14px; font-weight: 700; line-height: 1.4; }
.ew-feld__hinweis { font-size: 13px; color: #4f5a55; }
.ew-input { height: 50px; box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid #c9d3cd; border-radius: 12px; padding: 0 14px; font: 500 16px var(--font-ui); background: #fff; color: #17201d; }
.ew-input:focus { outline: none; border-color: #0c5a49; box-shadow: 0 0 0 3px rgba(12, 90, 73, .15); }
.ew-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ew-drei .ew-input { text-align: center; padding: 0 8px; }
.ew-drei .ew-feld label { font-size: 13px; }
.ew-info { background: #faf9f5; border: 1px solid #e3e1d8; border-radius: 14px; padding: 14px; font-size: 14px; line-height: 1.45; color: #3d4844; }
.ew-knopf { min-height: 52px; border-radius: 14px; font: 700 16px var(--font-ui); cursor: pointer; padding: 0 18px; border: 1.5px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.ew-knopf:disabled { opacity: .6; cursor: progress; }
.ew-knopf--haupt { background: #0c5a49; color: #fff; }
.ew-knopf--haupt:hover { background: #094a3c; }
.ew-knopf--rand { background: #fff; color: #0c5a49; border-color: #0c5a49; }
.ew-knopf--zurueck { background: #fff; color: #17201d; border-color: #c9d3cd; font-weight: 600; }
.ew-knopf--gefahr { background: #b3261e; color: #fff; }
.ew-knopf--klein { min-height: 48px; font-size: 14px; padding: 0 14px; background: #fff; color: #0c5a49; border-color: #c9d3cd; flex: none; }
.ew-knopf--haupt.ew-knopf--klein { background: #0c5a49; color: #fff; border-color: #0c5a49; }
.ew-fuss { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.ew-fuss .ew-knopf--haupt { width: 100%; min-height: 54px; font-size: 17px; }
.ew-fuss--zwei { flex-direction: row; }
.ew-fuss--zwei .ew-knopf--zurueck { flex: none; }
.ew-fuss--zwei .ew-knopf--haupt, .ew-fuss--zwei .ew-knopf--gefahr { flex: 1; width: auto; }
.ew-fuss .ew-knopf--zurueck { align-self: flex-start; }
.ew-fuss__links { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ew-fuss__hinweis { font-size: 13px; color: #4f5a55; text-align: center; }
.ew-link { background: none; border: none; padding: 8px 4px; font: 600 14px var(--font-ui); color: #0c5a49; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ew-link--leise { color: #4f5a55; }
.ew-wohnung { border: 1.5px solid #0c5a49; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ew-wohnung__kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ew-wohnung__kopf strong { font-size: 16px; font-weight: 800; margin-right: auto; }
.ew-wohnung--zu { border: 1px solid #e3e1d8; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; }
.ew-wohnung--zu > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ew-wohnung--zu strong { font-size: 15px; font-weight: 800; }
.ew-wohnung--zu span { font-size: 14px; color: #4f5a55; }
.ew-marke { font-size: 12px; font-weight: 700; color: #0c5a49; background: #d6ebe3; padding: 4px 10px; border-radius: 999px; }
.ew-gespeichert { align-self: flex-start; font-size: 13px; font-weight: 700; color: #0b4a3c; background: #e9f5ef; padding: 6px 12px; border-radius: 999px; }
.ew-portale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ew-portal { min-height: 64px; border: 1px solid #d6d4ca; background: #fff; border-radius: 14px; font: 600 15px var(--font-ui); color: #17201d; text-align: left; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.ew-portal:hover { border-color: #0c5a49; }
.ew-portal.is-an { border: 2px solid #0c5a49; background: #eef5f2; font-weight: 700; }
.ew-portal.is-an::after { content: ''; flex: none; width: 6px; height: 12px; margin-right: 4px; border: solid #0c5a49; border-width: 0 2.6px 2.6px 0; transform: rotate(45deg) translateY(-2px); }
.ew-portal--anderes:not(.is-an) { border-style: dashed; color: #0c5a49; }
.ew-warnung { background: #fff7e8; border: 1px solid #ecc983; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; color: #3b2a10; }
.ew-warnung p { margin: 0; font-size: 14px; line-height: 1.55; }
.ew-warnung__titel { font-size: 16px; font-weight: 800; color: #4a2d00; }
.ew-bestaetigen { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 12px; padding: 12px; cursor: pointer; }
.ew-bestaetigen input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: #0c5a49; }
.ew-bestaetigen span { font-size: 14px; font-weight: 600; line-height: 1.45; }
.ew-schritt { border: 1px solid #e3e1d8; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ew-schritt__kopf { display: flex; gap: 10px; align-items: center; }
.ew-schritt__kopf strong { font-size: 16px; font-weight: 800; }
.ew-nr { width: 28px; height: 28px; border-radius: 50%; background: #0c5a49; color: #fff; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ew-reihe { display: flex; gap: 8px; }
.ew-reihe .ew-input { flex: 1; }
.ew-status { border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.ew-status--ok { background: #e9f5ef; color: #0b4a3c; }
.ew-status--fehler { background: #fdecea; color: #8c1d18; }
.ew-status--warten { background: #f6f1e4; color: #5c3a00; }
.ew-kopierfeld { display: flex; align-items: center; gap: 8px; background: #f3f2ec; border-radius: 12px; padding-left: 12px; }
.ew-kopierfeld__text { flex: 1; min-width: 0; border: none; background: transparent; font: 500 14px var(--font-ui); color: #3d4844; text-overflow: ellipsis; height: 48px; }
.ew-anleitung { font-size: 14px; line-height: 1.55; color: #3d4844; }
.ew-anleitung summary { font-weight: 700; color: #0c5a49; padding: 6px 0; cursor: pointer; }
.ew-anleitung ol { margin: 4px 0 0; padding-left: 20px; }
.ew-fertig-zeichen { width: 56px; height: 56px; border-radius: 50%; background: #0c5a49; display: inline-flex; align-items: center; justify-content: center; }
.ew-liste { border: 1px solid #e3e1d8; border-radius: 16px; padding: 4px 16px; }
.ew-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eeece5; font-size: 15px; font-weight: 600; }
.ew-zeile:last-child { border-bottom: none; }
.ew-zeile .ew-leise { font-size: 14px; text-align: right; }
.ew-ok { font-size: 14px; font-weight: 700; color: #0b4a3c; }
.ew-zwischentitel { display: flex; flex-direction: column; gap: 4px; }
.ew-zwischentitel strong { font-size: 16px; font-weight: 800; }
.ew-zwischentitel span { font-size: 14px; }
.ew-spaeter { display: flex; flex-direction: column; gap: 8px; }
.ew-spaeter__punkt { text-decoration: none; color: #17201d; border: 1px solid #e3e1d8; border-radius: 14px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.ew-spaeter__punkt:hover { border-color: #0c5a49; }
.ew-spaeter__punkt .ew-leise { font-size: 13px; flex: none; }
@media (min-width: 900px) {
  .ew-karte { margin-top: 8px; }
  .ew-inhalt { padding: 28px 40px 36px; gap: 18px; }
  .ew-kopf { padding: 22px 40px 16px; }
  .ew-portale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ew-fuss .ew-knopf--haupt { width: auto; min-width: 260px; align-self: flex-end; }
  .ew-fuss--zwei { justify-content: space-between; }
  .ew-fuss--zwei .ew-knopf--haupt, .ew-fuss--zwei .ew-knopf--gefahr { flex: none; min-width: 260px; }
  .ew-fuss__links { flex-direction: row; justify-content: flex-end; gap: 18px; }
}
@media (max-width: 600px) {
  .ew-karte { border: none; border-radius: 0; box-shadow: none; background: transparent; margin: -8px -4px 0; padding-bottom: 110px; }
  .ew-kopf { padding: 8px 4px 12px; border-bottom: none; }
  .ew-inhalt { padding: 8px 4px 24px; }
  .ew-titel { font-size: 26px; }
  .ew-wohnung, .ew-schritt, .ew-liste, .ew-spaeter__punkt, .ew-portal { background: #fff; }
}

/* v1.3.1056: Betreiberbereich „Kalenderabgleich“ — große Auswahlknöpfe */
.op-kal-stand { font-size: 14px; margin: 6px 0 12px; }
.op-wahl-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.op-wahl { min-height: 64px; border: 1.5px solid #c9d3cd; background: #fff; border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; color: #17201d; padding: 8px; }
.op-wahl strong { font-size: 16px; }
.op-wahl span { font-size: 12px; color: #4f5a55; }
.op-wahl:hover { border-color: #0c5a49; }
.op-wahl.is-an { background: #0c5a49; border-color: #0c5a49; color: #fff; }
.op-wahl.is-an span { color: #d6ebe3; }

/* v1.3.1058: Betreiberbereich mit Kacheln (Entwurf B) */
.op-start-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.op-start-kopf h2 { margin: 0; font-size: 26px; font-weight: 800; }
.op-suche { position: relative; width: min(420px, 100%); display: flex; flex-direction: column; gap: 4px; }
.op-suche__label { font-size: 13px; font-weight: 700; }
.op-suche .input { height: 48px; font-size: 16px; border-radius: 12px; }
.op-suche__treffer { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; z-index: 30; background: #fff; border: 1px solid #d6d3c9; border-radius: 14px; box-shadow: 0 16px 40px rgba(20, 40, 30, 0.16); padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow: auto; }
.op-suche__zahl { font-size: 12px; font-weight: 700; color: #4f5a55; padding: 6px 10px 4px; }
.op-suche__eintrag { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 10px; cursor: pointer; font: inherit; color: #17201d; }
.op-suche__eintrag:hover, .op-suche__eintrag:focus-visible { background: #eef5f2; }
.op-suche__eintrag strong { font-size: 15px; }
.op-suche__eintrag span { font-size: 13px; color: #4f5a55; }
.op-ampel { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.op-ampel__eintrag { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 14px; font-weight: 700; background: #f0eee8; color: #4f5a55; cursor: pointer; }
.op-ampel__eintrag i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.op-ampel__eintrag--gruen { background: #e6f3ec; color: #0b4a3c; }
.op-ampel__eintrag--gruen i { background: #1f8a55; }
.op-ampel__eintrag--gelb { background: #fff4dd; color: #6b4300; }
.op-ampel__eintrag--gelb i { background: #d18b00; }
.op-ampel__eintrag--rot { background: #fdecea; color: #8c1d18; }
.op-ampel__eintrag--rot i { background: #c0392b; }
.op-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.op-kachel { text-align: left; background: #fff; border: 1px solid #e6e3da; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; font: inherit; color: #17201d; min-height: 130px; transition: border-color .15s, box-shadow .15s; }
.op-kachel:hover, .op-kachel:focus-visible { border-color: #0c5a49; box-shadow: 0 6px 20px rgba(12, 90, 73, 0.10); }
.op-kachel__kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.op-kachel__kopf strong { font-size: 20px; }
.op-kachel__text { font-size: 14px; color: #4f5a55; line-height: 1.5; }
.op-marke { font-size: 13px; font-weight: 800; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.op-marke[hidden] { display: none; }
.op-marke--rot { background: #b3261e; color: #fff; }
.op-marke--gelb { background: #fff4dd; color: #6b4300; }
.op-bereich-kopf { margin-bottom: 16px; }
.op-bereich-kopf h2 { margin: 6px 0 2px; font-size: 26px; font-weight: 800; }
.op-bereich-kopf p { margin: 0; color: #4f5a55; font-size: 15px; }
.op-zurueck { border: 0; background: transparent; color: #0c5a49; font: inherit; font-size: 15px; font-weight: 700; padding: 8px 0; min-height: 44px; cursor: pointer; }
.op-unterwahl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.op-unterwahl__knopf { border: 1.5px solid #c9d3cd; background: #fff; border-radius: 10px; padding: 10px 14px; font: inherit; font-size: 15px; font-weight: 600; color: #17201d; cursor: pointer; min-height: 44px; }
.op-unterwahl__knopf:hover { border-color: #0c5a49; }
.op-unterwahl__knopf.is-active { border-color: #0c5a49; background: #0c5a49; color: #fff; font-weight: 700; }
.op-abschnitt { display: none; }
.op-abschnitt.is-active { display: block; }
.op-aufleuchten { outline: 3px solid #c9a961; outline-offset: 3px; transition: outline-color .3s; }
@media (max-width: 900px) {
  .op-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .op-start-kopf h2, .op-bereich-kopf h2 { font-size: 22px; }
  .op-kacheln { grid-template-columns: 1fr; gap: 10px; }
  .op-kachel { min-height: 0; padding: 16px; }
  .op-kachel__kopf strong { font-size: 17px; }
  .op-unterwahl { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .op-unterwahl__knopf { white-space: nowrap; flex: none; }
}
.operator-hero[hidden] { display: none !important; }

/* v1.3.1065: Preiskalender auf dem Handy und Ferien/Feiertage */
.price-grid > * { min-width: 0; }
button.price-cell { width: 100%; min-width: 0; min-height: 0; margin: 0; overflow: hidden; font-size: 11px; line-height: 1.2; }
.price-cell--ferien { box-shadow: inset 0 -4px 0 #7fb3d5; }
.price-cell--feiertag .price-cell__day { color: #b3261e; }
.price-cell--feiertag::after { content: ''; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #b3261e; }
.price-termine { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.price-termine__legende { display: flex; gap: 16px; font-size: 12px; color: var(--text-3); margin-bottom: 2px; }
.price-termine__legende span { display: inline-flex; align-items: center; gap: 6px; }
.price-termine i { display: inline-block; flex: none; }
.price-termine__ferien { width: 14px; height: 4px; border-radius: 2px; background: #7fb3d5; }
.price-termine__feiertag { width: 8px; height: 8px; border-radius: 50%; background: #b3261e; }
.price-termine__zeile { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.price-termine__datum { white-space: nowrap; color: var(--text-2, #4f5a55); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .price-grid { gap: 3px; }
  button.price-cell { padding: 2px 1px; aspect-ratio: auto; min-height: 56px; border-radius: 8px; }
  .price-cell__day { font-size: 10px; margin-bottom: 1px; }
  .price-cell__price { font-size: 11px; white-space: nowrap; }
  .price-cell__min { font-size: 9px; white-space: nowrap; }
  .price-termine { padding-bottom: 72px; } /* Platz für den runden Knopf unten rechts */
}

/* v1.3.1066: Veranstaltungen */
.price-cell--event::before { content: ''; position: absolute; top: 5px; left: 5px; width: 6px; height: 6px; border-radius: 50%; background: #7b4fa8; }
.price-termine__event { width: 8px; height: 8px; border-radius: 50%; background: #7b4fa8; }
.ev-quellen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ev-quelle { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2, #faf9f5); }
.ev-quelle__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-quelle__knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-liste { display: flex; flex-direction: column; }
.ev-zeile { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.ev-zeile[hidden] { display: none; }
.ev-zeile__datum { font-variant-numeric: tabular-nums; color: var(--text-2, #4f5a55); white-space: nowrap; }
.ev-zeile__knoepfe { display: flex; gap: 4px; }
#ev-alle { margin-top: 8px; align-self: flex-start; }
@media (max-width: 600px) {
  .ev-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .ev-zeile__datum { grid-column: 1 / -1; font-size: 13px; }
}

/* v1.3.1067: Veranstaltungstage leicht eingefärbt, eigenes Hinweisfenster */
.price-cell.price-cell--event { background: #f1e9f9; border-color: #cdb5e6; }
.price-cell.price-cell--event.price-cell--override { background: #f1e9f9; border-color: var(--accent); }
.price-cell--event::before { width: 8px; height: 8px; }
.price-tipp { position: fixed; z-index: 1000; max-width: 280px; background: #1f2a26; color: #fff; border-radius: 10px; padding: 10px 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); font-size: 13px; line-height: 1.4; pointer-events: none; }
.price-tipp[hidden] { display: none; }
.price-tipp__datum { font-weight: 700; margin-bottom: 6px; color: #d9e6e0; }
.price-tipp__zeile { display: flex; flex-direction: column; padding: 3px 0 3px 8px; border-left: 3px solid #8fa39b; margin-top: 4px; }
.price-tipp__zeile span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #b8c7c0; }
.price-tipp__zeile--event { border-left-color: #b48ee0; }
.price-tipp__zeile--feiertag { border-left-color: #e0645c; }
.price-tipp__zeile--ferien { border-left-color: #7fb3d5; }

/* v1.3.1068: Veranstaltungen aus Bild — Kontrollliste */
.se-ev__liste { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; padding-right: 4px; }
.se-ev__zeile { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.se-ev__zeile.is-warn { border-color: #e8c27a; background: #fffaf0; }
.se-ev__haken { padding-top: 8px; }
.se-ev__haken input { width: 18px; height: 18px; }
.se-ev__felder { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 6px; }
.se-ev__daten { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.se-ev__daten input { max-width: 170px; }
.se-ev__hinweis { grid-column: 1 / -1; font-size: 12px; color: #8a5a00; font-weight: 600; }
.se-ev__fuss { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 600px) { .se-ev__felder { grid-template-columns: 1fr; } .se-ev__liste { max-height: 48vh; } }

/* v1.3.1069: Preiskalender — mehrere Wohnungen anheben oder senken */
.ovr-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.ovr-wahl__knopf { border: 1.5px solid #c9d3cd; background: #fff; border-radius: 10px; padding: 10px 8px; font: inherit; font-size: 14px; font-weight: 600; color: #17201d; cursor: pointer; min-height: 44px; }
.ovr-wahl__knopf.is-an { background: #0c5a49; border-color: #0c5a49; color: #fff; }
#anh-form[hidden], #ovr-form[hidden] { display: none; }
.anh-wohnungen { display: flex; flex-direction: column; gap: 6px; }
.anh-wohnung { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; cursor: pointer; }
.anh-vorschau { font-size: 13px; color: #0c5a49; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.anh-einheit { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; font-size: 14px; }
.anh-einheit label { display: flex; gap: 8px; align-items: center; }

/* v1.3.1071: Zwei-Finger-Bildlauf mit dem Touchpad am Rechner.
 *
 * ANLASS: Am Laptop ließ sich der Inhaltsbereich mit dem Touchpad nicht
 * blättern, die Seitenleiste schon. Die Regel „overflow-x: hidden“ auf den
 * Hüllen (.main, .content, body …) macht jede davon zu einem eigenen
 * Bildlaufbereich, obwohl darin nichts zu blättern ist. Bei Bildschirm-
 * skalierung (125 %) kann ein Rest von 1 Pixel bleiben; die Wischgeste des
 * Touchpads bleibt dann an diesem Bereich hängen statt die Seite zu bewegen.
 * „clip“ schneidet genauso ab, erzeugt aber keinen Bildlaufbereich. Nur auf
 * dem Rechner — auf dem Handy blättert bewusst ein innerer Bereich. */
@supports (overflow-x: clip) {
  @media (min-width: 901px) and (min-height: 501px) {
    body,
    .app-shell,
    .app-main,
    .main,
    #app,
    #content,
    .content,
    .main-content,
    .page-content {
      overflow-x: clip !important;
      overflow-y: visible !important;
    }
  }
}

/* v1.3.1071: Preiskalender am Rechner — ganzer Monat auf einen Blick */
@media (min-width: 601px) {
  button.price-cell, .price-cell--empty { aspect-ratio: auto; height: 62px; padding: 4px; }
  .price-grid { gap: 5px; }
  .price-cell__day { margin-bottom: 1px; }
}
[data-ferien-teil][hidden] { display: none !important; }

/* v1.3.1073: Hinweis „Gast hat andere Adresse angegeben“ */
.gast-mail-hinweis { margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: #fff7e6; border: 1px solid #ecd29a; font-size: 13px; line-height: 1.4; }
.gast-mail-hinweis span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }

/* v1.3.1075: iCal-Karten je Unterkunft einklappbar */
.property-ical-card__klapp {
  display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0;
  background: none; border: 0; padding: 0; margin: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.property-ical-card__titel { display: block; min-width: 0; }
.property-ical-card__head .property-ical-card__titel > strong { display: block; font-size: 16px; }
.property-ical-card__head .property-ical-card__pfeil {
  flex: none; width: 9px; height: 9px; margin-top: 6px;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.property-ical-card.is-offen .property-ical-card__head .property-ical-card__pfeil { transform: rotate(45deg); }
.property-ical-card.is-zu { gap: 0; }
.property-ical-card__inhalt { display: grid; gap: 14px; margin-top: 14px; }
.property-ical-card__inhalt[hidden] { display: none; }
.property-ical-card__head .ical-kurz-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.property-ical-card__head .ical-kurz {
  display: inline-block; margin: 0; font-size: 12px; line-height: 1.4;
  padding: 2px 9px; border-radius: 999px; border: 1px solid transparent;
}
.property-ical-card__head .ical-kurz--ok { background: rgba(22,101,52,.08); color: #166534; border-color: rgba(22,101,52,.18); }
.property-ical-card__head .ical-kurz--fehler { background: rgba(185,28,28,.08); color: #b91c1c; border-color: rgba(185,28,28,.22); font-weight: 600; }
.property-ical-card__head .ical-kurz--aus { background: rgba(16,24,20,.05); color: var(--text-2); border-color: rgba(16,24,20,.10); }
.property-ical-list { display: grid; gap: 10px; }
@media (max-width: 820px) {
  .property-ical-card__head { gap: 10px; }
  .property-ical-card__head [data-sync-property] { justify-self: start; width: auto; min-width: 0; margin-left: 19px; }
}

/* v1.3.1076: Abschnitte der Seite Kanäle einklappbar */
.kanal-abschnitt__titel { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; cursor: pointer; user-select: none; margin: 0; }
.kanal-abschnitt__pfeil {
  flex: none; width: 9px; height: 9px; margin-right: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease; opacity: .7;
}
.kanal-abschnitt.is-zu .kanal-abschnitt__pfeil { transform: rotate(-45deg); }
.kanal-abschnitt__zahl {
  font-size: 12px; font-weight: 500; line-height: 1.4; padding: 2px 9px; border-radius: 999px;
  background: rgba(16,24,20,.06); color: var(--text-2); border: 1px solid rgba(16,24,20,.10);
}
.kanal-abschnitt__zahl.is-wichtig { background: rgba(180,83,9,.10); color: #b45309; border-color: rgba(180,83,9,.25); font-weight: 600; }
.kanal-abschnitt.is-zu > .card__header,
.kanal-abschnitt.is-zu > .dash-card__head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.kanal-abschnitt.is-zu > .card__header > *:not(:first-child),
.kanal-abschnitt.is-zu > .card__header > div > *:not(h2):not(h3),
.kanal-abschnitt.is-zu > .dash-card__head > *:not(:first-child),
.kanal-abschnitt.is-zu > .kanal-abschnitt__inhalt { display: none !important; }
.kanal-abschnitt.is-zu { padding-top: 16px; padding-bottom: 16px; }
.kanal-abschnitt__zahl.is-rot { background: rgba(185,28,28,.08); color: #b91c1c; border-color: rgba(185,28,28,.22); font-weight: 600; }

/* v1.3.1079: Wechsel-Assistent */
.wechsel-wahl { display: grid; gap: 6px; max-width: 360px; margin-bottom: 14px; }
.wechsel-fortschritt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wechsel-fortschritt__balken { flex: 1 1 220px; height: 8px; border-radius: 999px; background: rgba(16,24,20,.08); overflow: hidden; }
.wechsel-fortschritt__balken span { display: block; height: 100%; background: var(--brand, #0c5a49); border-radius: 999px; transition: width .2s ease; }
.wechsel-regel { background: #faf6ef; border-left: 3px solid #c9a961; border-radius: 8px; padding: 10px 14px; font-size: 13.5px; line-height: 1.55; }
.wechsel-haken, .wechsel-auto { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid rgba(16,24,20,.07); font-size: 14px; line-height: 1.5; }
.wechsel-haken { cursor: pointer; }
.wechsel-haken input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; accent-color: #0c5a49; }
.wechsel-haken.is-erledigt > span { color: var(--text-2); }
.wechsel-haken__hinweis { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.wechsel-auto__zeichen { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border: 1.5px solid rgba(16,24,20,.25); color: var(--text-2); margin-top: 2px; }
.wechsel-auto.is-ok .wechsel-auto__zeichen { background: #166534; border-color: #166534; color: #fff; }
.wechsel-auto.is-rot .wechsel-auto__zeichen { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.wechsel-auto.is-rot > span:last-child { color: #8a1f1a; }
.wechsel-objekt { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.wechsel-objekt.is-fertig { border-color: rgba(22,101,52,.35); background: rgba(22,101,52,.04); }
.wechsel-objekt__kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.wechsel-fertig { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-weight: 500; }

/* v1.3.1104: Auswahlfenster ohne Scrollen — oben 3 Karten nebeneinander,
   unten 2 (Foto/Liste/E-Mail und Portale abgleichen), auf dem Handy flacher. */
#modal .modal__panel.modal__panel--compact { max-width: 480px !important; max-height: calc(100dvh - 40px) !important; }
#modal .modal__panel.modal__panel--compact .entry-type-grid--neu { grid-template-columns: 1fr 1fr 1fr !important; }
/* alle Karten gleich groß: gleiche Mindesthöhe, Untertitel einheitlich */
#modal .modal__panel.modal__panel--compact .entry-type-card { min-height: 112px !important; height: 100%; justify-content: center; }
@media (max-width: 540px) {
  #modal .entry-type-grid--neu { gap: 6px !important; }
  #modal .modal__panel.modal__panel--compact .entry-type-grid { gap: 6px !important; }
  #modal .modal__panel.modal__panel--compact .entry-type-card { padding: 8px 4px !important; min-height: 84px !important; }
  #modal .modal__panel.modal__panel--compact .entry-type-card__sub { display: none; }
  #modal .modal__panel.modal__panel--compact .entry-type-card__title { font-size: 13px !important; line-height: 1.2; }
  #modal .modal__panel.modal__panel--compact .entry-type-group__title { font-size: 11px; margin-bottom: 4px; }
  #modal .modal__panel.modal__panel--compact .entry-type-groups { gap: 8px; }
}

/* v1.3.1117: Kurtaxe in der Gästemappe — Karte im Stil der WLAN-Karte */
.gm-kurtaxe{margin:16px 18px 0;background:#fff;border-radius:16px;padding:16px 18px;
  box-shadow:0 12px 34px rgba(7,63,53,.16)}
.gm-kurtaxe__label{font-size:10.5px;letter-spacing:.18em;color:var(--gm-gold,#b8975a);font-weight:600}
.gm-kurtaxe h2{font-size:19px;font-weight:600;color:var(--gm-gruen,#0c5a49);margin:2px 0 3px;letter-spacing:-.01em}
.gm-kurtaxe__umfang{font-size:12.5px;color:var(--gm-grau,#5a6a66);line-height:1.45;margin:0}
.gm-kurtaxe__hinweis{font-size:13.5px;color:var(--gm-tinte,#1c2b27);line-height:1.5;margin:10px 0 0}
.gm-kurtaxe__knopf{display:block;text-align:center;margin:12px 0 0}
.gm-kurtaxe--bezahlt .gm-kurtaxe__hinweis{color:var(--gm-gruen,#0c5a49);font-weight:600}

/* v1.3.1114: Geheime Schlüssel beim Eintippen verdeckt anzeigen, ohne dass der
   Browser sie als Passwort speichert oder in einer Vorschlagsliste anbietet. */
.input--geheim { -webkit-text-security: disc; text-security: disc; font-family: inherit; }
.input--geheim::placeholder { -webkit-text-security: none; }

/* v1.3.1115: Stand der Stripe-Anbindung */
.stripe-stand { display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid var(--border,#e5e5e5); border-radius:10px; background:#fff; }
.stripe-stand:empty { display:none; }
.stripe-stand__zeile { display:flex; align-items:flex-start; gap:8px; }
.stripe-punkt { flex:0 0 auto; width:11px; height:11px; border-radius:50%; margin-top:4px; box-shadow:0 0 0 3px rgba(0,0,0,0.04); }
.stripe-punkt--gruen { background:#2e9d5b; box-shadow:0 0 0 3px rgba(46,157,91,0.18); }
.stripe-punkt--gelb  { background:#e0a526; box-shadow:0 0 0 3px rgba(224,165,38,0.18); }
.stripe-punkt--rot   { background:#d04437; box-shadow:0 0 0 3px rgba(208,68,55,0.18); }
.stripe-punkt--grau  { background:#b5b5b5; }