/* Der animierte Verlauf liegt hinter dem Inhalt: Body transparent halten,
   damit er nicht überdeckt wird. html traegt die Rueckfallfarbe. */
html {
    background-color: #f8f9fa;
}
body {
    background-color: transparent;
}

/* Form State Styling */
.form-control-required-empty,
.form-control-required-filled,
.form-control-optional-empty,
.form-control-optional-filled {
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;
}

.form-control-required-empty {
    border-color: var(--bs-danger) !important;
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 0.125rem rgba(var(--bs-danger-rgb), 0.15);
}

.form-control-required-filled {
    border-color: var(--bs-success) !important;
    background-color: rgba(var(--bs-success-rgb), 0.12);
    box-shadow: 0 0 0 0.125rem rgba(var(--bs-success-rgb), 0.25);
}

.form-control-optional-empty {
    border-color: var(--bs-secondary) !important;
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 0.125rem rgba(var(--bs-secondary-rgb), 0.1);
}

.form-control-optional-filled {
    border-color: var(--bs-success) !important;
    background-color: rgba(var(--bs-success-rgb), 0.12);
    box-shadow: 0 0 0 0.125rem rgba(var(--bs-success-rgb), 0.2);
}

/* Avatar Cropper */
.user-avatar {
    background-color: #f8f9fa;
    color: #4f5d75;
    font-size: 0.75rem;
}

.user-avatar img {
    object-fit: cover;
}

.user-avatar__initials {
    line-height: 1;
}

.avatar-crop-stage {
    position: relative;
    background-color: #f8f9fa;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
    overflow: hidden;
    min-height: 240px;
}

.avatar-crop-stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-crop-stage .cropper-container,
.avatar-crop-stage .cropper-wrap-box,
.avatar-crop-stage .cropper-crop-box {
    width: 100% !important;
    height: 100% !important;
}

.avatar-crop-stage .cropper-view-box,
.avatar-crop-stage .cropper-face {
    border-radius: 50%;
}

.avatar-crop-placeholder {
    position: absolute;
    inset: 0;
}

/* Responsive Darstellung für Übersichten */
.tenants-table .badge,
.users-table .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

@media (max-width: 767.98px) {
    .tenants-table table,
    .users-table table {
        border: 0;
    }

    .tenants-table thead,
    .users-table thead {
        display: none;
    }

    .tenants-table tbody tr,
    .users-table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid rgba(0, 0, 0, 0.075);
        border-radius: 0.75rem;
        padding: 1rem;
        background-color: #fff;
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
    }

    .tenants-table tbody tr td,
    .users-table tbody tr td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.35rem 0;
        border-top: none;
        font-size: 0.95rem;
    }

    .tenants-table tbody tr td::before,
    .users-table tbody tr td::before {
        content: attr(data-label);
        flex: 0 0 45%;
        font-weight: 600;
        color: #6c757d;
        padding-right: 0.5rem;
    }

    .tenants-table tbody tr td.table-actions,
    .users-table tbody tr td.table-actions {
        flex-direction: column;
    }

    .tenants-table tbody tr td.table-actions::before,
    .users-table tbody tr td.table-actions::before {
        margin-bottom: 0.5rem;
    }

    .tenants-table tbody tr td.table-actions .btn-group,
    .users-table tbody tr td.table-actions .btn-group {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .tenants-table tbody tr td.table-actions .btn-group .btn,
    .users-table tbody tr td.table-actions .btn-group .btn {
        flex: 1 1 auto;
    }
}

/* Buchungskalender: Mobile Toolbar in 3 zentrierten Zeilen */
@media (max-width: 991.98px) {
    .roomSimple-fullcalendar.fc .fc-toolbar.fc-header-toolbar {
        margin-bottom: 0.6rem !important;
    }

    .roomSimple-fullcalendar.fc .fc-toolbar-title {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .roomSimple-fullcalendar.fc .fc-button-group {
        margin-right: 0.35rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .roomSimple-fullcalendar.fc .fc-toolbar-chunk .fc-button {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.8rem !important;
    }
}

/* Kalender-Events: Zeiger signalisiert Klickbarkeit */
.roomSimple-fullcalendar .fc-event {
    cursor: pointer;
}

/* Zeitraster kompakt halten, damit die Kernzeit (ca. 7:45-18:15 Uhr)
   komplett im sichtbaren Ausschnitt liegt; Randzeiten per Scrollen erreichbar */
.roomSimple-fullcalendar:not(.rs-fullday) .fc-timegrid-slot {
    height: 1.05em;
}

/* Genehmigungs-Workflow: offene Buchungsanfragen im Kalender kenntlich machen */
.roomSimple-fullcalendar .roomsimple-event-pending {
    opacity: 0.65;
    border-style: dashed !important;
    border-width: 2px !important;
}

/* Generisches Stacked-Table-Muster für Smartphones (Buchungen, Elemente):
   gleiche Darstellung wie users-/tenants-table, per Klasse wiederverwendbar */
.stacked-table .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

@media (max-width: 767.98px) {
    .stacked-table table {
        border: 0;
    }

    .stacked-table thead {
        display: none;
    }

    .stacked-table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid rgba(0, 0, 0, 0.075);
        border-radius: 0.75rem;
        padding: 1rem;
        background-color: #fff;
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
    }

    /* Eingeklappte Serien-Termine bleiben ausgeblendet */
    .stacked-table tbody tr.collapse:not(.show) {
        display: none;
    }

    .stacked-table tbody tr td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.35rem 0;
        border-top: none;
        font-size: 0.95rem;
    }

    .stacked-table tbody tr td::before {
        content: attr(data-label);
        flex: 0 0 45%;
        font-weight: 600;
        color: #6c757d;
        padding-right: 0.5rem;
    }

    .stacked-table tbody tr td.table-actions {
        flex-direction: column;
    }

    .stacked-table tbody tr td.table-actions::before {
        margin-bottom: 0.5rem;
    }

    .stacked-table tbody tr td.table-actions .btn-group {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .stacked-table tbody tr td.table-actions .btn-group .btn {
        flex: 1 1 auto;
    }

    /* Einrückung der Serien-Termine auf dem Smartphone zurücknehmen */
    .stacked-table tbody tr td .ps-4 {
        padding-left: 0 !important;
    }
}

/* Serientermine: Verbindungslinie vom Serienkopf zu den Terminen */
@media (min-width: 768px) {
    .stacked-table tbody tr.series-head > td:first-child,
    .stacked-table tbody tr.series-occurrence > td:first-child {
        border-left: 3px solid var(--bs-primary);
    }
}

@media (max-width: 767.98px) {
    .stacked-table tbody tr.series-head {
        border-left: 3px solid var(--bs-primary);
        margin-bottom: 0.5rem;
    }

    /* Ausgerollte Serientermine: eingerückt und über die Linie
       sichtbar mit dem Serienkopf verbunden */
    .stacked-table tbody tr.series-occurrence {
        margin-left: 1.25rem;
        margin-bottom: 0.5rem;
        border-left: 3px solid var(--bs-primary);
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    }
}

/* Honeypot-Feld: außerhalb des Viewports statt display:none,
   damit einfache Bots es weiterhin "sehen" und ausfüllen */
.rs-extra {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Raumansicht: Plan-Karten und Plan-Container */
.rs-plan-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.rs-plan-card:hover,
.rs-plan-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
}
/* Grundriss mit etwas Luft auf ruhigem Grund */
.rs-plan-card-image {
    background: #f4f6f8;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.rs-plan-card-image img {
    padding: 1rem;
}
.rs-plan-card .card-body {
    padding: 1rem 1.25rem;
}
/* Pfeil rechts unten: zeigt, dass die Karte zum Plan führt */
.rs-plan-card-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.rs-plan-card:hover .rs-plan-card-go,
.rs-plan-card:focus-visible .rs-plan-card-go {
    background: var(--bs-primary);
    color: #fff;
}

/* Seitenkopf: kleine Zeile mit dem Mandanten über der Überschrift */
.rs-eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-primary);
}
.rs-page-title {
    font-size: 1.9rem;
    font-weight: 600;
}
/* Seitenkopf als getöntes Band mit kleiner Grundriss-Zeichnung */
.rs-page-head {
    position: relative;
    padding: 1.5rem 1.75rem;
    border-radius: 1.25rem;
    background: rgba(var(--bs-primary-rgb), 0.09);
    overflow: hidden;
}
.rs-page-head > :not(.rs-page-head-art) {
    position: relative;
}
.rs-page-head-art {
    position: absolute;
    right: 14rem;
    top: 50%;
    width: 13rem;
    transform: translateY(-50%) rotate(-4deg);
    color: var(--bs-primary);
    opacity: 0.3;
    pointer-events: none;
}
/* Ohne Schaltflächen rechts rückt die Zeichnung an den Rand */
.rs-page-head--plain .rs-page-head-art {
    right: 2.5rem;
}
/* Umrandete Schaltflächen im Band behalten beim Überfahren ihre Füllfarbe */
.rs-page-head .btn-outline-secondary.bg-white:hover,
.rs-page-head .btn-outline-secondary.bg-white:focus-visible {
    background-color: var(--bs-secondary) !important;
}
@media (max-width: 991.98px) {
    .rs-page-head-art {
        display: none;
    }
}

/* Nächste eigene Buchungen unter den Plänen: Datumsblatt links,
   Objekt und Uhrzeit rechts */
.rs-upcoming {
    display: flex;
    gap: 1rem;
    height: 100%;
    padding: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.rs-upcoming:hover,
.rs-upcoming:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
}
.rs-upcoming-date {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4rem;
    padding: 0.4rem 0;
    border-radius: 0.75rem;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    line-height: 1.15;
}
.rs-upcoming-date.is-today {
    background: var(--bs-primary);
    color: #fff;
}
.rs-upcoming-weekday,
.rs-upcoming-month {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rs-upcoming-day {
    font-size: 1.6rem;
    font-weight: 700;
}
.rs-upcoming-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.rs-upcoming-title {
    font-weight: 600;
    overflow-wrap: anywhere;
    color: inherit;
    text-decoration: none;
}
.rs-upcoming-title:hover,
.rs-upcoming-title:focus-visible {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.rs-upcoming-time {
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}
.rs-upcoming-empty {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px dashed rgba(0, 0, 0, 0.18);
    border-radius: 1rem;
    color: var(--bs-secondary-color);
}
.rs-upcoming-empty i {
    font-size: 1.75rem;
    color: var(--bs-primary);
}

/* Kacheln der Willkommensseite: Symbol, Titel, kurzer Hinweis */
.rs-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.rs-tile:hover,
.rs-tile:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
}
.rs-tile-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-size: 1.35rem;
}
.rs-tile-title {
    font-weight: 600;
}
/* Begrüßung für Besucher ohne Anmeldung */
.rs-welcome {
    max-width: 36rem;
    margin: 0 auto;
    padding: 3rem 0;
    text-align: center;
}
.rs-welcome-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1.25rem;
    border-radius: 1.25rem;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-size: 2rem;
}
/* Namensschilder der Objekte (Glühlampe in der Raumansicht) */
.rs-plan-labels {
    pointer-events: none;
}
.rs-plan-label {
    position: absolute;
    transform: translate(-50%, -50%);
    max-width: 12rem;
    padding: 0.05rem 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: #212529;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #198754;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
}
.rs-plan-label--booked {
    border-color: #dc3545;
}
/* Eigene Buchung: blau, wie die Form auf dem Plan */
.rs-plan-label--mine {
    border-color: #0d6efd;
}
.rs-badge-mine {
    background-color: #0d6efd !important;
    color: #fff;
}
/* Personenzahl hinter dem Objektnamen */
.rs-plan-label-capacity {
    margin-left: 0.4rem;
    padding-left: 0.4rem;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    font-weight: 400;
    color: #495057;
}
.rs-plan-label-capacity i {
    margin-right: 0.2rem;
}
.rs-plan-labels-toggle.active {
    color: #000;
    background-color: #ffc107;
    border-color: #ffc107;
}

/* Vorschaubilder zum Wechseln des Plans (Raumansicht) */
.rs-plan-thumb .ratio {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.rs-plan-thumb:hover .ratio,
.rs-plan-thumb:focus-visible .ratio {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

/* Sortierbare Plan-Karten (Admins, Raumansicht) */
.rs-plan-card--sortable {
    cursor: grab;
}
.rs-plan-sort-ghost {
    opacity: 0.35;
}
.sortable-fallback .rs-plan-card {
    cursor: grabbing;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.25) !important;
}
.rs-plan-wrap {
    user-select: none;
}
.rs-plan-wrap img {
    pointer-events: none;
}
/* Bildmaße unbekannt und Datei fehlt: wenigstens eine brauchbare Fläche */
.rs-plan-wrap--unsized {
    aspect-ratio: 16 / 9;
}
/* Platzhalter für ein fehlendes Plan-Bild */
.rs-plan-missing {
    background: var(--bs-light);
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* Mini-Monatskalender der Raumansicht */
.rs-mini-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}
.rs-cal-head {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c757d;
    padding-bottom: 2px;
}
.rs-day {
    position: relative;
    aspect-ratio: 1;
    border: none;
    border-radius: 50%;
    background: transparent;
    font-size: 1.05rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.rs-day:hover {
    /* Hover als Ring wie beim ausgewählten Tag, nur transparent */
    box-shadow: inset 0 0 0 12px rgba(48, 175, 107, 0.2);
}
/* Heutiger und ausgewählter Tag als Ring: der inset-Schatten liegt über
   der Fläche, die Belegungs-Einfärbung bleibt dahinter sichtbar. */
.rs-day.today {
    box-shadow:
        inset 0 0 0 12px #30af9a,
        4px 4px 10px rgba(0, 0, 0, 0.2);
    font-weight: 600;
}
.rs-day.selected {
    box-shadow:
        inset 0 0 0 12px #30af6b,
        4px 4px 10px rgba(0, 0, 0, 0.2);
    font-weight: 600;
}
.rs-day-dot {
    display: none;
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bs-primary);
}
.rs-day.has-bookings .rs-day-dot {
    display: block;
}
.form-text .rs-day-dot {
    display: inline-block;
    transform: none;
    width: 6px;
    height: 6px;
}

/* Doppel-Schieberegler für die Uhrzeit in der Raumansicht */
.rs-range {
    position: relative;
    height: 2rem;
}
.rs-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 3px;
    background: #dee2e6;
}
.rs-range input[type="range"] {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    transform: translateY(-50%);
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    outline: none;
}
.rs-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bs-primary);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;
}
.rs-range input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bs-primary);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;
}
.rs-range input[type="range"]::-moz-range-track {
    background: transparent;
}

/* Skala unter dem Uhrzeit-Schieberegler */
.rs-range-ticks {
    position: relative;
    height: 10px;
    margin-top: -2px;
}
.rs-tick {
    position: absolute;
    top: 0;
    width: 1px;
    height: 9px;
    background: #adb5bd;
    transform: translateX(-50%);
}
.rs-tick-dot {
    position: absolute;
    top: 3px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ced4da;
    transform: translateX(-50%);
}
.rs-range-nums {
    font-size: 0.95rem;
    font-weight: 600;
}

/* Aktive Zeitspanne ist greifbar und komplett verschiebbar */
.rs-range-track {
    cursor: grab;
}
.rs-range {
    touch-action: none;
}

/* Mitwanderndes Zeit-Label über dem Schieberegler */
.rs-range-float-wrap {
    position: relative;
    padding-top: 1.7rem;
}
.rs-range-float {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(var(--bs-primary-rgb), 1);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0 0.45rem;
    border-radius: 0.5rem;
    pointer-events: none;
}

/* Zeitspalte: FullCalendar begrenzt die Beschriftung auf 60px und bricht
   "Ganztägig" deshalb mitten im Wort um. Ohne Grenze und ohne Umbruch
   richtet sich die Spaltenbreite nach dem Wort. (fc sitzt auf dem
   Container selbst, daher .roomSimple-fullcalendar.fc) */
.roomSimple-fullcalendar.fc .fc-timegrid-axis-cushion {
    max-width: none;
    white-space: nowrap;
}

/* Komplettansicht-Button: eigene Zeile unter der Kalender-Toolbar */
.rs-fullday-row {
    margin: -0.25rem 0 0.5rem;
}

/* Buchungs-Modal der Raumansicht: großzügiger Innenabstand */
.rs-modal-body {
    padding: 2rem;
}

/* Verschiebbares Anmelde-Modal: Plan dahinter bleibt sicht- und bedienbar */
.rs-login-modal {
    pointer-events: none;
}
.rs-login-modal .modal-dialog {
    pointer-events: auto;
}
.rs-login-modal .modal-header {
    cursor: move;
    touch-action: none;
    user-select: none;
}

/* Animierter Farbverlauf als Seitenhintergrund (Canvas-Mesh).
   Liegt hinter allen Inhalten; der Schleier hält Text lesbar. */
.rs-gradient-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: #0d2b28;
}
.rs-gradient-bg canvas {
    width: 100%;
    height: 100%;
    display: block;
    filter: blur(30px) saturate(1.1);
    transform: scale(1.1);
}
/* Kein aufhellender Schleier mehr: der Verlauf traegt in Kopf- und
   Fusszeile die volle Farbe (ein Farbton, nur etwas dunkler und heller). */
/* Landingpage: mehrfarbiger Verlauf, oben und unten leicht abgedunkelt */
.rs-gradient-bg--strong::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.3));
}

/* Loeschen der ausgewaehlten Form: sitzt an deren rechter oberer Ecke */
.rs-plan-trash {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    padding: 0;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
/* Stift zum Bearbeiten des Objekts: links neben der Mülltonne */
.rs-plan-edit {
    margin-left: -2.4rem;
}
/* Objektliste im Plan-Editor: Eintrag der ausgewählten Form hervorheben */
.rs-plan-list-item {
    cursor: pointer;
}
.rs-plan-list-item:hover {
    background: rgba(var(--bs-primary-rgb), 0.05);
}
.rs-plan-list-item.is-selected {
    background: rgba(var(--bs-primary-rgb), 0.14);
    box-shadow: inset 4px 0 0 var(--bs-primary);
    font-weight: 600;
}

/* Schritt-fuer-Schritt-Formular im Modal: Punktleiste als Fortschritt,
   der Schrittbereich haelt eine Mindesthoehe, damit die Schaltflaechen
   beim Wechsel nicht springen. */
.rs-wizard-dots {
    align-items: center;
}
.rs-wizard-dot {
    flex: 1 1 0;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.rs-wizard-dot.is-done {
    background: rgba(var(--bs-primary-rgb), 0.45);
}
.rs-wizard-dot.is-active {
    background: rgb(var(--bs-primary-rgb));
}
.rs-wizard-track {
    min-height: 18rem;
    touch-action: pan-y;
}

/* Hauptnavigation und Mandanten-Umschalter (rs-nav-stack): Icon steht
   mittig ueber der Beschriftung.
   Vorher haing das davon ab, ob die Leiste gerade umbrach - dadurch sah
   ein Punkt anders aus als die uebrigen. Nur in der ausgeklappten
   Leiste; im Burger-Menue bleiben Icon und Text nebeneinander. */
@media (min-width: 992px) {
    .rs-nav-main {
        gap: 0.25rem;
    }
    .rs-nav-main > .nav-item > .nav-link,
    .navbar-nav .nav-link.rs-nav-stack {
        text-align: center;
        font-size: 0.875rem;
        line-height: 1.2;
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }
    .rs-nav-main > .nav-item > .nav-link > i.bi:first-child,
    .navbar-nav .nav-link.rs-nav-stack > i.bi:first-child {
        display: block;
        margin-right: 0 !important;
        margin-bottom: 0.2rem;
        font-size: 1.15rem;
    }
}
/* Menuepunkte als weiche Flaechen: beim Ueberfahren leicht, die
   aktuelle Seite deutlicher hinterlegt */
.navbar.rs-translucent .navbar-nav .nav-link {
    border-radius: 0.6rem;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.navbar.rs-translucent .navbar-nav .nav-link:hover,
.navbar.rs-translucent .navbar-nav .nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.14);
}
.navbar.rs-translucent .navbar-nav .nav-link.active,
.navbar.rs-translucent .navbar-nav .nav-link.show {
    background: rgba(255, 255, 255, 0.24);
}
/* "Anmelden" als umrandete Schaltflaeche, damit es rechts nicht verloren wirkt */
.navbar.rs-translucent .navbar-nav .rs-nav-cta {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    padding: 0.4rem 1.1rem;
}
.navbar.rs-translucent .navbar-nav .rs-nav-cta:hover,
.navbar.rs-translucent .navbar-nav .rs-nav-cta:focus-visible {
    background: #fff;
    color: var(--bs-primary);
    text-shadow: none;
}
/* Logo des Mandanten und Produktname */
.rs-brand {
    margin-right: 1.5rem;
}
.rs-brand-logo {
    max-height: 36px;
    max-width: 160px;
}
.rs-brand-divider {
    width: 1px;
    height: 1.75rem;
    margin: 0 1rem;
    background: rgba(255, 255, 255, 0.45);
}
.rs-brand-name {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Arbeitsbereich deckend weiss: der Verlauf bleibt nur hinter
   Kopf- und Fusszeile sichtbar, der Inhalt steht ruhig darauf. */
.rs-main {
    background: #fff;
    padding-bottom: 3rem;
}

/* Header und Footer ohne eigene Flaeche: der animierte Verlauf dahinter
   ist ihre Farbe. Der leichte Weichzeichner haelt die Schrift ueber dem
   bewegten Hintergrund ruhig lesbar. */
.rs-translucent {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* Bei der geringen Deckkraft haelt ein feiner Schattenriss die Schrift
   ueber dem bewegten Verlauf lesbar */
.rs-translucent,
.rs-translucent .nav-link,
.rs-translucent .navbar-brand {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* backdrop-filter erzeugt einen eigenen Stapelkontext - ohne z-index
   liegen die Dropdowns der Navigation hinter dem Seiteninhalt. 1030
   haelt sie ueber dem Inhalt, aber unter Modalen (1055). */
.navbar.rs-translucent {
    position: relative;
    z-index: 1030;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
    /* Menuepunkte voll deckend weiss - Bootstrap setzt sie sonst auf 55 %
       und hebt sie erst beim Ueberfahren an */
    --bs-navbar-color: #fff;
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.65);
}
/* Die Fusszeile liegt eine Spur dunkler als die Kopfzeile */
footer.rs-translucent {
    background-color: rgba(0, 0, 0, 0.12);
}
/* Fusszeile: Name und Hinweis links, Seitenlinks rechts */
.rs-footer {
    padding: 1.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.rs-footer-brand {
    font-size: 1.1rem;
    font-weight: 600;
}
.rs-footer-note {
    font-size: 0.875rem;
    opacity: 0.9;
}
.rs-footer-nav {
    gap: 0.25rem 1.5rem;
}
.rs-footer-nav .nav-link {
    padding: 0;
    color: #fff;
    font-size: 0.9375rem;
}
.rs-footer-nav .nav-link:hover,
.rs-footer-nav .nav-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

/* CMS-Seiten (Impressum, Datenschutz, Anleitung): Inhalt als ruhige
   Flaeche ueber dem Farbverlauf, mit Innenabstand. Der Ton entspricht
   den inline gesetzten Hintergruenden der importierten Rechtstexte,
   damit die Flaeche einheitlich wirkt. */
.cms-content {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

/* ==========================================================
   Landingpage (Hauptdomain, Besucher ohne Anmeldung)
   Hero und Schlussbereich liegen direkt auf dem kräftigen
   Farbverlauf, die Abschnitte dazwischen sind hell.
   ========================================================== */
.rs-lp-page {
    --rs-lp-accent: #1f8f7e;
    --rs-lp-ink: #16302c;
    /* Akzent auch für Bausteine, die die Primärfarbe nutzen (Eyebrow, Kopfzeile) */
    --bs-primary: #1f8f7e;
    --bs-primary-rgb: 31, 143, 126;
}
/* Sprungmarken der Kopfzeile gleiten weich zum Abschnitt */
html:has(.rs-lp-page) {
    scroll-behavior: smooth;
}
/* Arbeitsbereich ohne weissen Grund und ohne Rand: Abschnitte reichen
   von Kante zu Kante */
.rs-main.rs-main--bleed {
    background: transparent;
    padding: 0;
}
/* roomSimple-Erscheinungsbild (Landingpage und alle Mandanten ohne eigene
   Markenfarbe): dunkler Schleier über dem mehrfarbigen Verlauf, damit die
   weiße Schrift überall lesbar bleibt */
.rs-default-brand .navbar.rs-translucent {
    background-color: rgba(8, 32, 29, 0.35);
}
.rs-default-brand footer.rs-translucent {
    background-color: rgba(8, 32, 29, 0.45);
}
/* Auf der Landingpage geht die Kopfzeile ohne Kante in den Hero über */
.rs-lp-page .navbar.rs-translucent {
    box-shadow: none;
}
.navbar.rs-translucent .navbar-nav .rs-nav-cta--solid {
    background: #fff;
    border-color: #fff;
    color: var(--rs-lp-ink, #16302c);
    font-weight: 600;
    text-shadow: none;
}
.navbar.rs-translucent .navbar-nav .rs-nav-cta--solid:hover,
.navbar.rs-translucent .navbar-nav .rs-nav-cta--solid:focus-visible {
    background: rgba(255, 255, 255, 0.88);
    color: var(--rs-lp-ink, #16302c);
}

/* Hero */
.rs-lp-hero {
    padding: 4.5rem 0 5.5rem;
    color: #fff;
}
.rs-lp-badge {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.875rem;
    font-weight: 600;
}
.rs-lp-h1 {
    margin: 1.25rem 0 1rem;
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}
.rs-lp-lead {
    max-width: 34rem;
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}
.rs-lp-signup {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 32rem;
    margin-top: 1.75rem;
    padding: 0.4rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.22);
}
.rs-lp-signup .form-control {
    flex: 1 1 12rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 1.05rem;
}
.rs-lp-btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--rs-lp-ink);
    --bs-btn-border-color: var(--rs-lp-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0c1f1c;
    --bs-btn-hover-border-color: #0c1f1c;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0c1f1c;
    --bs-btn-active-border-color: #0c1f1c;
    padding: 0.7rem 1.4rem;
    border-radius: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.rs-lp-btn--lg {
    padding: 0.9rem 2rem;
    font-size: 1.1rem;
}
.rs-lp-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.92);
}
.rs-lp-checks i {
    margin-right: 0.35rem;
}

/* Gezeichnetes Browserfenster mit der Raumansicht */
.rs-lp-window {
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);
}
.rs-lp-window-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.9rem;
    background: #eef1f2;
}
.rs-lp-window-bar > span {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: #c9d3d1;
}
.rs-lp-window-url {
    flex: 1;
    margin-left: 0.6rem;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    background: #fff;
    color: #5c6b68;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rs-lp-window-body {
    position: relative;
    padding: 1rem;
    color: #22332f;
}
.rs-lp-plan {
    display: block;
    width: 100%;
    height: auto;
}
/* Ausgewählter Raum pulsiert leicht; ein Platz wechselt zwischen frei und belegt */
.rs-lp-pulse {
    animation: rs-lp-pulse 2.8s ease-in-out infinite;
}
.rs-lp-flip {
    fill: #198754;
    fill-opacity: 0.25;
    stroke: #198754;
    animation: rs-lp-flip 7s steps(1, end) infinite;
}
@keyframes rs-lp-pulse {
    0%, 100% { fill-opacity: 0.18; }
    50% { fill-opacity: 0.38; }
}
@keyframes rs-lp-flip {
    0%, 55% { fill: #198754; stroke: #198754; }
    56%, 100% { fill: #dc3545; stroke: #dc3545; }
}
/* Sitzt im freien Flur unter dem Besprechungsraum, damit sie keine
   Arbeitsplätze verdeckt */
.rs-lp-tip {
    position: absolute;
    top: 33%;
    left: 9%;
    padding: 0.6rem 0.8rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    font-size: 0.8rem;
}
.rs-lp-tip-title {
    font-weight: 700;
}
.rs-lp-tip-meta {
    margin: 0.1rem 0 0.45rem;
    color: #5c6b68;
}
.rs-lp-tip-btn {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--rs-lp-accent);
    color: #fff;
    font-weight: 600;
}
.rs-lp-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.3rem;
    border-radius: 50%;
}
.rs-lp-dot--free {
    background: #198754;
}
.rs-lp-dot--booked {
    background: #dc3545;
}
.rs-lp-slider {
    margin-top: 0.9rem;
}
.rs-lp-slider-track {
    position: relative;
    height: 0.4rem;
    border-radius: 999px;
    background: #dee2e6;
}
.rs-lp-slider-track span {
    position: absolute;
    left: 42%;
    width: 8.4%;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: var(--rs-lp-accent);
    box-shadow: -0.35rem 0 0 -0.05rem #fff, 0.35rem 0 0 -0.05rem #fff;
}
.rs-lp-slider-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: #5c6b68;
}
.rs-lp-slider-pill {
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    background: rgba(31, 143, 126, 0.12);
    color: var(--rs-lp-accent);
    font-weight: 600;
}

/* Helle Abschnitte */
.rs-lp-section {
    padding: 5rem 0;
    background: #fff;
    color: #22332f;
}
.rs-lp-section--tint {
    background: #f3f7f6;
}
.rs-lp-section--slim {
    padding: 3.5rem 0;
}
.rs-lp-section--slim .rs-lp-head {
    margin-bottom: 2rem;
}
/* Einsatzbereiche: Symbol mit kurzer Bezeichnung */
.rs-lp-use {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 1.25rem 0.75rem;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.04);
    text-align: center;
    font-weight: 600;
    line-height: 1.3;
}
.rs-lp-use .rs-lp-feature-icon {
    margin-bottom: 0.75rem;
}
.rs-lp-head {
    max-width: 40rem;
    margin: 0 auto 3rem;
    text-align: center;
}
.rs-lp-h2 {
    margin: 0.4rem 0 0.75rem;
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* Drei Schritte - auch in der leeren Raumansicht genutzt, dort in der
   Markenfarbe des Mandanten */
:root {
    --rs-lp-accent: var(--bs-primary);
}
.rs-lp-step {
    position: relative;
    height: 100%;
    padding: 1.5rem 1.5rem 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.04);
}
.rs-lp-step-art {
    display: block;
    width: 100%;
    margin-bottom: 1.25rem;
    border-radius: 0.9rem;
    background: #f3f7f6;
}
.rs-lp-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.6rem;
    border-radius: 50%;
    background: var(--rs-lp-accent);
    color: #fff;
    font-weight: 700;
}
.rs-lp-step h3,
.rs-lp-feature h3 {
    font-size: 1.15rem;
    font-weight: 700;
}
.rs-lp-step p,
.rs-lp-feature p {
    margin: 0;
    color: #5c6b68;
}

/* Funktionen */
.rs-lp-feature {
    height: 100%;
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.04);
}
.rs-lp-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 0.85rem;
    background: rgba(31, 143, 126, 0.12);
    color: var(--rs-lp-accent);
    font-size: 1.35rem;
}

/* Eigener Auftritt */
.rs-lp-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.rs-lp-list li {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.rs-lp-list i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(31, 143, 126, 0.12);
    color: var(--rs-lp-accent);
}
.rs-lp-brands {
    display: grid;
    gap: 1.25rem;
    padding: 2rem;
    border-radius: 1.5rem;
    background: #f3f7f6;
}
.rs-lp-brand {
    border-radius: 0.9rem;
    background: #fff;
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.rs-lp-brand:nth-child(2) {
    margin-left: 2rem;
}
.rs-lp-brand:nth-child(3) {
    margin-left: 4rem;
}
.rs-lp-brand-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--rs-lp-brand);
    color: #fff;
    font-size: 1.2rem;
}
.rs-lp-brand-line {
    width: 4.5rem;
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
}
.rs-lp-brand-line--short {
    width: 2.5rem;
    background: rgba(255, 255, 255, 0.45);
}
.rs-lp-brand-pill {
    width: 3.5rem;
    height: 1.2rem;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
}
.rs-lp-brand-url {
    padding: 0.55rem 1rem;
    color: #5c6b68;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Ist roomSimple wirklich kostenlos?": ruhige Karte in der Seitenmitte */
.rs-lp-free {
    max-width: 44rem;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.04);
    text-align: center;
}
.rs-lp-free p {
    font-size: 1.1rem;
    line-height: 1.65;
    color: #40524e;
}
.rs-lp-checks--dark {
    justify-content: center;
    color: var(--rs-lp-ink);
    font-weight: 600;
}
.rs-lp-checks--dark i {
    color: var(--rs-lp-accent);
}
a.rs-lp-badge {
    color: #fff;
    text-decoration: none;
}
a.rs-lp-badge:hover,
a.rs-lp-badge:focus-visible {
    background: rgba(255, 255, 255, 0.26);
    color: #fff;
}

/* Schlussaufruf: wieder auf dem Farbverlauf */
.rs-lp-final {
    padding: 5.5rem 0;
    color: #fff;
    text-align: center;
}
.rs-lp-final .rs-lp-h2 {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}
.rs-lp-final .rs-lp-btn {
    --bs-btn-color: var(--rs-lp-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--rs-lp-ink);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.88);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--rs-lp-ink);
    --bs-btn-active-bg: rgba(255, 255, 255, 0.8);
    margin-top: 1rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.22);
}
.rs-lp-final-link {
    color: #fff;
    text-underline-offset: 0.25em;
}
.rs-lp-final-link:hover {
    color: #fff;
}
/* Die Fusszeile schliesst ohne Trennlinie an den Schlussaufruf an */
.rs-lp-page .rs-footer {
    border-top-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 991.98px) {
    .rs-lp-hero {
        padding: 3rem 0 4rem;
    }
    .rs-lp-window {
        transform: none;
    }
    .rs-lp-section {
        padding: 3.5rem 0;
    }
    .rs-lp-brand:nth-child(2),
    .rs-lp-brand:nth-child(3) {
        margin-left: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .rs-lp-pulse,
    .rs-lp-flip {
        animation: none;
    }
    html:has(.rs-lp-page) {
        scroll-behavior: auto;
    }
}

/* ==========================================================
   Belegung: Wochentabelle mit einer Zeile je Objekt
   ========================================================== */
.rs-occ-wrap {
    overflow-x: auto;
}
.rs-occ {
    width: 100%;
    min-width: 56rem;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.rs-occ th,
.rs-occ td {
    border-bottom: 1px solid var(--bs-border-color);
    border-left: 1px solid var(--bs-border-color);
    padding: 0.3rem 0;
    vertical-align: top;
}
.rs-occ thead th {
    padding: 0.5rem 0.4rem;
    border-top: 1px solid var(--bs-border-color);
    background: #f8f9fa;
    text-align: center;
    font-weight: 600;
}
.rs-occ tr > :last-child {
    border-right: 1px solid var(--bs-border-color);
}
.rs-occ-weekday {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}
/* Objektspalte bleibt beim seitlichen Scrollen stehen */
.rs-occ .rs-occ-object {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 13rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    text-align: left;
    font-weight: 600;
    vertical-align: middle;
}
.rs-occ thead .rs-occ-object {
    background: #f8f9fa;
}
.rs-occ tbody tr:hover .rs-occ-object,
.rs-occ tbody tr:hover td {
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}
.rs-occ .is-weekend {
    background-color: #f8f9fa;
}
.rs-occ thead .is-today {
    background: rgba(var(--bs-primary-rgb), 0.16);
    color: var(--bs-primary);
}
.rs-occ td.is-today {
    background-color: rgba(var(--bs-primary-rgb), 0.07);
}
.rs-occ td {
    position: relative;
    height: 2.6rem;
}
/* Eine Buchung: getönte Fläche in der Farbe des Objekts */
.rs-occ-chip {
    display: block;
    margin: 0 0.3rem 0.2rem;
    padding: 0.2rem 0.45rem;
    overflow: hidden;
    border-left: 3px solid var(--rs-occ-color);
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--rs-occ-color) 16%, #fff);
    color: #212529;
    font-size: 0.8125rem;
    line-height: 1.35;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.rs-occ-chip:hover,
a.rs-occ-chip:focus-visible {
    background: color-mix(in srgb, var(--rs-occ-color) 30%, #fff);
    color: #212529;
}
/* Ganzer Tag: kräftiger, damit volle Tage sofort auffallen */
.rs-occ-chip.is-whole {
    background: color-mix(in srgb, var(--rs-occ-color) 34%, #fff);
    font-weight: 600;
}
a.rs-occ-chip.is-whole:hover,
a.rs-occ-chip.is-whole:focus-visible {
    background: color-mix(in srgb, var(--rs-occ-color) 48%, #fff);
}
/* Angefragt: gestrichelt wie im Kalender */
.rs-occ-chip.is-pending {
    border: 1px dashed var(--rs-occ-color);
    border-left-width: 3px;
    background: color-mix(in srgb, var(--rs-occ-color) 8%, #fff);
}
/* Mehrtägig: Balken schliessen an der Tagesgrenze lückenlos an */
.rs-occ-chip.continues-left {
    margin-left: -1px;
    border-left-width: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* Der Titel steht am ersten Tag; die Fortsetzung bleibt ein ruhiger Balken */
.rs-occ-chip.is-whole.continues-left {
    color: transparent;
}
.rs-occ-chip.continues-right {
    margin-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.rs-occ-time {
    margin-right: 0.3rem;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
/* Freies Feld: das Plus erscheint erst beim Überfahren */
.rs-occ-add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.6rem;
    margin: 0 0.3rem;
    border-radius: 0.35rem;
    color: var(--bs-primary);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.12s ease-in-out, background-color 0.12s ease-in-out;
}
.rs-occ td:hover .rs-occ-add,
.rs-occ-add:focus-visible {
    opacity: 1;
    background: rgba(var(--bs-primary-rgb), 0.1);
}
/* Ohne Maus (Touch) ist Überfahren nicht möglich: Plus dezent dauerhaft zeigen */
@media (hover: none) {
    .rs-occ-add {
        opacity: 0.45;
    }
}

/* Legende zu den Feldfarben der Formulare (rot = Pflichtfeld, grün = ausgefüllt) */
.rs-required-hint-swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 0.35rem;
    border: 2px solid var(--bs-danger);
    border-radius: 0.25rem;
    vertical-align: -0.1rem;
}
.rs-required-hint-swatch--filled {
    border-color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), 0.12);
}

/* Fortschrittsanzeige der Registrierung: drei Punkte auf einer Linie */
.rs-steps {
    display: flex;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}
.rs-steps-item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    text-align: center;
}
/* Verbindungslinie zum vorherigen Schritt */
.rs-steps-item + .rs-steps-item::before {
    content: "";
    position: absolute;
    top: 1rem;
    right: calc(50% + 1.25rem);
    left: calc(-50% + 1.25rem);
    height: 2px;
    background: var(--bs-border-color);
}
.rs-steps-item.is-done + .rs-steps-item::before {
    background: var(--bs-primary);
}
.rs-steps-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--bs-border-color);
    border-radius: 50%;
    background: #fff;
    font-weight: 700;
}
.rs-steps-item.is-done .rs-steps-dot {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #fff;
}
.rs-steps-item.is-current {
    color: var(--bs-body-color);
    font-weight: 600;
}
.rs-steps-item.is-current .rs-steps-dot {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
}
/* Auf breiten Seiten (Plan-Editor) bleibt die Anzeige kompakt in der Mitte */
.rs-steps-wrap {
    max-width: 40rem;
    margin: 0 auto;
}
/* Vorschau der eigenen Adresse beim Anlegen des Bereichs */
.rs-subdomain-preview {
    overflow-wrap: anywhere;
}
.rs-subdomain-preview-name {
    font-weight: 700;
}
.rs-subdomain-preview-name.is-placeholder {
    font-weight: 400;
    font-style: italic;
    opacity: 0.7;
}

/* Auswahlfenster im Plan-Editor: "oder" zwischen Neuanlage und Auswahl */
.rs-picker-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 1rem;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}
.rs-picker-or::before,
.rs-picker-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bs-border-color);
}

/* Plan-Editor: Speichern-Kasten neben dem Plan */
.rs-plan-save {
    position: sticky;
    top: 1rem;
    z-index: 3;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
}
.rs-plan-save-hint {
    color: var(--bs-secondary-color);
    text-align: center;
}
/* Ungespeicherte Änderungen: warmer Rahmen und sanft pulsierender Button */
.rs-plan-save.is-dirty {
    border-color: #f0a03c;
    background: #fff8ec;
}
.rs-plan-save.is-dirty .rs-plan-save-hint {
    color: #8a5300;
    font-weight: 600;
}
.rs-plan-save.is-dirty .btn {
    animation: rs-plan-save-pulse 1.8s ease-in-out infinite;
}
@keyframes rs-plan-save-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.45); }
    50% { box-shadow: 0 0 0 0.6rem rgba(var(--bs-primary-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
    .rs-plan-save.is-dirty .btn {
        animation: none;
    }
}

/* Raumansicht, Hinweisfenster: freie Zeitfenster eines belegten Objekts */
.rs-free-chip {
    padding: 0.25rem 0.7rem;
    border: 1px solid rgba(25, 135, 84, 0.4);
    border-radius: 999px;
    background: rgba(25, 135, 84, 0.1);
    color: #146c43;
    font-size: 0.875rem;
    font-weight: 600;
}
button.rs-free-chip {
    cursor: pointer;
    transition: background-color 0.12s ease-in-out, color 0.12s ease-in-out;
}
button.rs-free-chip:hover,
button.rs-free-chip:focus-visible {
    background: #198754;
    color: #fff;
}

/* "Zum Kalender hinzufügen": gut tippbarer Knopf und Menüeinträge */
.rs-cal-btn {
    min-height: 2rem;
}
.dropdown-item.rs-cal-item {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* Hinweisfenster der Raumansicht: Kalender-Knöpfe kompakt in einer Zeile
   neben "Verstanden" (32 px hoch - so groß verlangt es die Prüfstrecke) */
.rs-info-footer {
    flex-wrap: nowrap;
    gap: 0.5rem;
}
.rs-info-footer > * {
    margin: 0;
}
.rs-cal-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}
.rs-cal-caption {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    white-space: nowrap;
}
.rs-cal-buttons {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
}
.rs-cal-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.15rem 0.45rem;
    font-size: 0.8rem;
    line-height: 1;
    white-space: nowrap;
}
.rs-cal-badge {
    display: none;
}
/* Mülleimer neben "Bearbeiten" */
.rs-trash-btn {
    min-width: 2rem;
}
/* Handy: Kalender-Knöpfe in eigener Zeile, nur Symbole; "365" als
   kleine Aufschrift, damit sich die beiden Microsoft-Knöpfe unterscheiden */
@media (max-width: 575.98px) {
    .rs-info-footer {
        flex-wrap: wrap;
    }
    .rs-cal-row {
        flex: 1 1 100%;
    }
    .rs-cal-icon {
        min-width: 2.5rem;
        min-height: 2.5rem;
        font-size: 0.95rem;
    }
    .rs-cal-text {
        display: none;
    }
    .rs-cal-badge {
        display: inline;
        font-size: 0.7rem;
        font-weight: 700;
    }
    .rs-info-footer .btn-primary {
        flex: 1 1 100%;
    }
}

/* Plan-Editor: vergrößerter Plan scrollt in seinem Bereich */
.rs-plan-zoom.is-zoomed {
    max-height: 75vh;
    overflow: auto;
}
.rs-plan-zoom .rs-plan-wrap {
    max-width: none;
}
.rs-zoom-label {
    min-width: 4.2rem;
    font-variant-numeric: tabular-nums;
}
/* Genaue Größe der ausgewählten Form */
.rs-size-panel {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.5rem;
}
.rs-size-panel input {
    width: 5rem;
}

/* "Mein Bereich" → Erscheinungsbild: Vorschau der Kopfzeile */
.rs-brand-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.6rem;
    background: #16302c;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: background-color 0.15s ease-in-out;
}
.rs-brand-preview-logo {
    max-height: 28px;
    max-width: 140px;
}
.rs-brand-preview-divider {
    width: 1px;
    height: 1.4rem;
    background: rgba(255, 255, 255, 0.45);
}
.rs-brand-preview-nav {
    margin-left: auto;
    font-size: 0.85rem;
    opacity: 0.9;
}