/* ==========================================================================
   Raumbuchung Admin — Basis-Styles (Gemeinde Husby Design)
   ========================================================================== */

@font-face {
    font-family: "Synonym";
    src:
        url("/assets/fonts/Synonym-Regular.woff2") format("woff2"),
        url("/assets/fonts/Synonym-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Synonym";
    src:
        url("/assets/fonts/Synonym-Medium.woff2") format("woff2"),
        url("/assets/fonts/Synonym-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Synonym";
    src:
        url("/assets/fonts/Synonym-Semibold.woff2") format("woff2"),
        url("/assets/fonts/Synonym-Semibold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
/* "Bold" (700) bewusst auf den Semibold-Schnitt gemappt (z. B. natives <strong>/<b>) */
@font-face {
    font-family: "Synonym";
    src:
        url("/assets/fonts/Synonym-Semibold.woff2") format("woff2"),
        url("/assets/fonts/Synonym-Semibold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --rb-font-sans: "Synonym", system-ui, -apple-system, sans-serif;
    --rb-sidebar-width: 14rem;
    --rb-color-primary: #f7d204;
    --rb-color-primary-hover: #d4b203;
    --rb-color-on-primary: #134158;
    --rb-color-link: #c50756;
    --rb-color-bg: #f4f4f6;
    --rb-color-sidebar: #045573;
    --rb-color-sidebar-text: #dff1f7;
    --rb-color-sidebar-active: #ffffff;
    --rb-color-text: #134158;
    --rb-color-text-muted: #5e5d6f;
    --rb-color-border: #dddde3;
    --rb-color-card-bg: #ffffff;
    --rb-radius: 0.5rem;
    --rb-spacing: 1.5rem;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Layout */
.rb-admin {
    margin: 0;
    font-family: var(--rb-font-sans);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--rb-color-text);
    background: var(--rb-color-bg);
}

.rb-admin__layout {
    display: grid;
    grid-template-columns: var(--rb-sidebar-width) 1fr;
    min-height: 100vh;
}

/* Sidebar */
.rb-admin__sidebar {
    background: var(--rb-color-sidebar);
    color: var(--rb-color-sidebar-text);
    padding: var(--rb-spacing) 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.rb-admin__logo {
    padding: 0 var(--rb-spacing) var(--rb-spacing);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--rb-spacing);
}

.rb-admin__logo a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.125rem;
}

.rb-admin__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.rb-admin__nav li a {
    display: block;
    padding: 0.5rem var(--rb-spacing);
    color: var(--rb-color-sidebar-text);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.rb-admin__nav li a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.rb-admin__nav li a.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--rb-color-sidebar-active);
    font-weight: 600;
}

.rb-admin__user {
    padding: var(--rb-spacing);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8125rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rb-admin__user a {
    color: var(--rb-color-sidebar-text);
    text-decoration: none;
    font-size: 0.75rem;
}

.rb-admin__user a:hover {
    color: #fff;
}

/* Main */
.rb-admin__main {
    padding: var(--rb-spacing) calc(var(--rb-spacing) * 2);
}

.rb-admin__header {
    margin-bottom: calc(var(--rb-spacing) * 1.5);
}

.rb-admin__header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Cards */
.rb-dashboard__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--rb-spacing);
}

.rb-card {
    background: var(--rb-color-card-bg);
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius);
    padding: var(--rb-spacing);
}

.rb-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.rb-card__desc {
    margin: 0 0 1rem;
    color: var(--rb-color-text-muted);
    font-size: 0.875rem;
}

/* Buttons */
.rb-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--rb-color-primary);
    color: var(--rb-color-on-primary);
    text-decoration: none;
    border-radius: var(--rb-radius);
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.rb-btn:hover {
    background: var(--rb-color-primary-hover);
}

.rb-btn--secondary {
    background: var(--rb-color-card-bg);
    color: var(--rb-color-text);
    border: 1px solid var(--rb-color-border);
}

.rb-btn--secondary:hover {
    background: var(--rb-color-bg);
}

.rb-btn--danger {
    background: #dc2626;
}

.rb-btn--danger:hover {
    background: #b91c1c;
}

/* Tables */
.rb-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--rb-color-card-bg);
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius);
}

.rb-table th,
.rb-table td {
    padding: 0.625rem 0.875rem;
    text-align: left;
    border-bottom: 1px solid var(--rb-color-border);
}

.rb-table th {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--rb-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    background: var(--rb-color-bg);
}

.rb-table tr:last-child td {
    border-bottom: none;
}

/* Forms */
.rb-form__group {
    margin-bottom: 1rem;
}

.rb-form__label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    font-size: 0.875rem;
}

.rb-form__input,
.rb-form__select,
.rb-form__textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius);
    font-family: inherit;
    font-size: 0.9375rem;
    background: var(--rb-color-card-bg);
    color: var(--rb-color-text);
}

.rb-form__input:focus,
.rb-form__select:focus,
.rb-form__textarea:focus {
    outline: none;
    border-color: var(--rb-color-primary);
    box-shadow: 0 0 0 3px rgba(247, 210, 4, 0.35);
}

.rb-form__textarea {
    min-height: 6rem;
    resize: vertical;
}

.rb-form__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

/* Status-Badges */
.rb-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.rb-badge--angefragt { background: #fef3c7; color: #92400e; }
.rb-badge--bestaetigt { background: #d1fae5; color: #065f46; }
.rb-badge--abgelehnt { background: #fee2e2; color: #991b1b; }
.rb-badge--storniert { background: var(--rb-color-border); color: #475569; }
.rb-badge--aktiv { background: #d1fae5; color: #065f46; }
.rb-badge--inaktiv { background: var(--rb-color-border); color: #475569; }

/* Color Swatch */
.rb-color-swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid var(--rb-color-border);
    vertical-align: middle;
}

/* Flash Messages */
.rb-flash {
    padding: 0.75rem 1rem;
    border-radius: var(--rb-radius);
    margin-bottom: var(--rb-spacing);
    font-size: 0.875rem;
}

.rb-flash--success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.rb-flash--error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Actions Bar */
.rb-actions {
    margin-bottom: var(--rb-spacing);
    display: flex;
    gap: 0.5rem;
}

/* Small Buttons */
.rb-btn--small {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Table Actions */
.rb-table__actions {
    white-space: nowrap;
    text-align: right;
}

.rb-table__actions .rb-btn {
    margin-left: 0.25rem;
}

/* Empty State */
.rb-empty {
    color: var(--rb-color-text-muted);
    padding: 2rem;
    text-align: center;
    background: var(--rb-color-card-bg);
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius);
}

/* Fieldsets */
.rb-fieldset {
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius);
    padding: var(--rb-spacing);
    margin-bottom: var(--rb-spacing);
    background: var(--rb-color-card-bg);
}

.rb-fieldset legend {
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0 0.5rem;
}

/* Form Rows */
.rb-form__row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rb-form__row .rb-form__group {
    flex: 1;
    margin-bottom: 0;
}

.rb-form__group--wide {
    flex: 2;
}

/* Checkbox */
.rb-form__checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.rb-form__checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.25rem;
}

/* Color Picker */
.rb-color-picker {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.rb-form__color {
    width: 3rem;
    height: 2.25rem;
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius);
    cursor: pointer;
    padding: 0.125rem;
}

.rb-form__input--inline {
    flex: 1;
}

/* Hint */
.rb-form__hint {
    font-size: 0.8125rem;
    color: var(--rb-color-text-muted);
    margin: 0 0 1rem;
}

/* Form Error */
.rb-form__error {
    color: #dc2626;
    font-size: 0.8125rem;
    margin: 0.25rem 0 0;
}

.rb-form__input--error {
    border-color: #dc2626;
}

/* Small Input (time fields) */
.rb-form__input--small {
    width: 7rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

/* File Input */
.rb-form__file {
    font-size: 0.875rem;
}

/* Buchbare Zeiten Grid */
.rb-zeiten {
    display: grid;
    gap: 0.75rem;
}

.rb-zeiten__tag {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.rb-zeiten__tag strong {
    min-width: 2rem;
    padding-top: 0.25rem;
}

.rb-zeiten__slots {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
}

.rb-zeiten__slot {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Upload List */
.rb-uploads-list {
    margin-bottom: 1rem;
}

.rb-upload-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--rb-color-border);
    font-size: 0.875rem;
}

.rb-upload-item:last-child {
    border-bottom: none;
}

/* Admin Calendar */
.rb-admin-calendar {
    min-height: 40rem;
}

.rb-room-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.rb-room-filter label {
    font-weight: 600;
}

.rb-calendar-page {
    margin: 0 -0.5rem;
}

/* Small Select */
.rb-form__select--small {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

/* Modal */
.rb-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Sichtbar nur über die Klasse — so kann ein inline gesetztes display:block die
   Zentrierung nicht mehr überschreiben (das war der Grund, warum das Modal
   vorher oben links in der Ecke klebte). */
.rb-modal.is-open {
    display: flex;
    animation: rb-modal-fade 0.15s ease;
}

.rb-modal.is-open .rb-modal__content {
    animation: rb-modal-pop 0.18s ease;
}

@keyframes rb-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes rb-modal-pop {
    from { opacity: 0; transform: translateY(0.5rem) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

body.rb-modal-open {
    overflow: hidden;
}

.rb-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(19, 65, 88, 0.55);
    backdrop-filter: blur(2px);
}

.rb-modal__content {
    position: relative;
    background: var(--rb-color-card-bg, #fff);
    border-radius: var(--rb-radius, 0.5rem);
    padding: 1.5rem;
    max-width: 32rem;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}

.rb-modal__content h2 {
    margin: 0 0 1rem;
    font-size: 1.25rem;
}

.rb-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--rb-color-text-muted);
    line-height: 1;
}

.rb-modal__close:hover {
    color: var(--rb-color-text);
}

.rb-modal__details {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 0.375rem 1rem;
    margin: 0;
    font-size: 0.875rem;
}

.rb-modal__details dt {
    font-weight: 600;
    color: var(--rb-color-text-muted);
}

.rb-modal__details dd {
    margin: 0;
}

.rb-modal__actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.5rem;
}

/* --- Öffentliches Event-Detail-Modal --- */
.rb-eventmodal__card {
    max-width: 27rem;
    padding: 1.75rem;
}

.rb-eventmodal__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.4rem;
    padding-right: 1.75rem;
}

.rb-eventmodal__header .rb-badge {
    font-size: 0.8rem;
    padding: 0.2rem 0.7rem;
}

.rb-eventmodal__title {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--rb-color-text);
}

.rb-eventmodal__details {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
}

.rb-eventmodal__row {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 0.15rem 1rem;
    align-items: baseline;
}

.rb-eventmodal__row dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rb-color-text-muted);
}

.rb-eventmodal__row dd {
    margin: 0;
    color: var(--rb-color-text);
    font-size: 0.95rem;
}

.rb-eventmodal__row--block {
    grid-template-columns: 1fr;
}

.rb-eventmodal__row--block dd {
    margin-top: 0.25rem;
    white-space: pre-line;
    line-height: 1.5;
}

.rb-eventmodal__dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 9999px;
    margin-right: 0.45rem;
    vertical-align: middle;
}

/* Klickbare Events in der Belegungs-Übersicht */
.rb-belegung__event,
.rb-belegung__dot {
    cursor: pointer;
}

.rb-belegung__event:hover {
    filter: brightness(0.94);
}

.rb-belegung__event:focus-visible,
.rb-belegung__dot:focus-visible,
.rb-belegung__list-item:focus-visible {
    outline: 2px solid var(--rb-color-sidebar);
    outline-offset: 2px;
}

.rb-belegung__list-item[data-rb-event] {
    cursor: pointer;
}

.rb-belegung__list-item[data-rb-event]:hover {
    background: var(--rb-color-bg);
}

/* ==========================================================================
   Belegungsplan (öffentlich)
   ========================================================================== */

.rb-belegung {
    padding: 1rem 0 3rem;
}

/* Header */
.rb-belegung__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    /* Ohne Umbruch und Abstand schiebt sich der Button auf schmalen
       Displays ueber die Ueberschrift. */
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rb-belegung__header h1 {
    margin: 0;
    font-size: 1.5rem;
}

.rb-belegung__add {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    background: var(--rb-color-primary);
    color: var(--rb-color-on-primary);
    text-decoration: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.rb-belegung__add:hover {
    background: var(--rb-color-primary-hover);
}

/* Toolbar */
.rb-belegung__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rb-color-border);
}

.rb-belegung__views {
    display: flex;
    gap: 0.25rem;
}

.rb-belegung__view-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    text-decoration: none;
    color: #475569;
    border: 1px solid var(--rb-color-border);
    border-radius: 0.375rem;
    background: #fff;
}

.rb-belegung__view-btn:hover {
    background: #f1f5f9;
}

.rb-belegung__view-btn.is-active {
    background: var(--rb-color-primary);
    color: var(--rb-color-on-primary);
    border-color: var(--rb-color-primary);
}

.rb-belegung__nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rb-belegung__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 600;
    color: #475569;
    border: 1px solid var(--rb-color-border);
    border-radius: 0.375rem;
    background: #fff;
}

.rb-belegung__nav-btn svg {
    display: block;
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
}

.rb-belegung__nav-btn:hover {
    background: #f1f5f9;
}

.rb-belegung__nav-range {
    font-weight: 600;
    font-size: 0.9375rem;
    min-width: 10rem;
    text-align: center;
}

/* Grid */
.rb-belegung__grid-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    /* Schattenkante am Rand, solange in diese Richtung noch etwas zu holen
       ist. Ohne sie sieht man der Tabelle auf dem Telefon nicht an, dass
       rechts weitere Tage stehen.

       Die Technik kommt ohne JavaScript aus: Die beiden weissen Flaechen
       scrollen mit (background-attachment: local) und decken die
       Schattenverlaeufe ab, die am Container haengen (scroll). Am Anfang
       liegt die linke Flaeche ueber ihrem Schatten, beim Scrollen wandert
       sie weg und der Schatten wird sichtbar. */
    background:
        linear-gradient(to right, var(--rb-color-surface, #fff) 30%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(to left, var(--rb-color-surface, #fff) 30%, rgba(255, 255, 255, 0)) right center,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) right center;
    background-repeat: no-repeat;
    background-size: 2.5rem 100%, 2.5rem 100%, 0.9rem 100%, 0.9rem 100%;
    background-attachment: local, local, scroll, scroll;
}

.rb-belegung__grid {
    width: 100%;
    /* Der Wrapper hat overflow-x, aber ohne Mindestbreite quetscht sich die
       Tabelle stattdessen zusammen: Auf dem Telefon liefen die Wochentage
       ineinander ("MODI MI DO"). Jetzt scrollt sie waagerecht. */
    min-width: 40rem;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8125rem;
}

.rb-belegung__grid th,
.rb-belegung__grid td {
    border: 1px solid var(--rb-color-border);
    padding: 0.375rem;
    vertical-align: top;
}

.rb-belegung__corner {
    background: var(--rb-color-bg);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--rb-color-text-muted);
    text-transform: uppercase;
    width: 12rem;
    min-width: 10rem;
}

.rb-belegung__day-header {
    background: var(--rb-color-bg);
    text-align: center;
    padding: 0.375rem 0.25rem;
    min-width: 5rem;
}

.rb-belegung__day-header.is-today {
    background: #eef5f8;
    border-bottom: 2px solid var(--rb-color-primary);
}

.rb-belegung__day-name {
    display: block;
    font-size: 0.6875rem;
    color: var(--rb-color-text-muted);
    text-transform: uppercase;
}

.rb-belegung__day-num {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
}

.rb-belegung__raum {
    background: var(--rb-color-bg);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rb-belegung__raum a {
    color: #045573;
    text-decoration: none;
}

.rb-belegung__raum a:hover {
    text-decoration: underline;
}

.rb-belegung__cell {
    min-height: 2.5rem;
    position: relative;
}

.rb-belegung__cell.is-today {
    background: #f4f8fa;
}

/* Events in Grid */
.rb-belegung__event {
    display: block;
    padding: 0.125rem 0.25rem;
    margin-bottom: 0.125rem;
    border-radius: 0.25rem;
    color: #fff;
    font-size: 0.6875rem;
    line-height: 1.3;
    overflow: hidden;
    cursor: default;
}

.rb-belegung__event-time {
    display: block;
    font-weight: 600;
    font-size: 0.625rem;
}

.rb-belegung__event-title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Angefragte Events: blasser + gestrichelter Rand */
.rb-belegung__event--angefragt {
    opacity: 0.55;
    border: 1.5px dashed #92400e;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.3) 3px,
        rgba(255, 255, 255, 0.3) 6px
    );
}

.rb-belegung__dot--angefragt {
    opacity: 0.45;
    border: 1px dashed #92400e;
}

/* FullCalendar: angefragte Events */
.rb-event--angefragt {
    opacity: 0.55 !important;
    border-style: dashed !important;
    border-width: 1.5px !important;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.25) 3px,
        rgba(255, 255, 255, 0.25) 6px
    ) !important;
}

/* Month compact: dots */
.rb-belegung__grid-wrap--month .rb-belegung__day-header {
    min-width: 2rem;
    padding: 0.25rem 0.125rem;
}

.rb-belegung__grid-wrap--month .rb-belegung__cell {
    min-height: 1.5rem;
    text-align: center;
}

.rb-belegung__dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.375rem;
    border-radius: 0.125rem;
    margin: 0.0625rem;
    cursor: default;
}

/* Empty state */
.rb-belegung__empty {
    color: var(--rb-color-text-muted);
    text-align: center;
    padding: 2rem;
}

/* Liste */
.rb-belegung__list {
    margin-top: 0.5rem;
}

.rb-belegung__list-day {
    margin-bottom: 1.5rem;
}

.rb-belegung__list-day h3 {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--rb-color-border);
}

.rb-belegung__list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
}

.rb-belegung__list-item:last-child {
    border-bottom: none;
}

.rb-belegung__list-time {
    font-weight: 600;
    white-space: nowrap;
    min-width: 7rem;
    color: #475569;
}

.rb-belegung__list-room {
    color: #045573;
    min-width: 10rem;
    white-space: nowrap;
}

.rb-belegung__list-title {
    flex: 1;
}

.rb-belegung__list-kat {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #fff;
    background: #94a3b8;
    white-space: nowrap;
}

.rb-belegung__list-kat--angefragt {
    background: #fbbf24;
    color: #78350f;
}

/* Buchungsseite */
.rb-buchen__form {
    max-width: 48rem;
}

.rb-buchen__step {
    border: 1px solid var(--rb-color-border);
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background: #fff;
}

.rb-buchen__step--hidden {
    display: none;
}

.rb-buchen__step-label {
    font-weight: 600;
    font-size: 1rem;
    padding: 0 0.5rem;
    color: var(--rb-color-text);
}

.rb-buchen__duration-btns {
    display: inline-flex;
    gap: 0.25rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.rb-buchen__dur-btn {
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border: 1px solid var(--rb-color-border);
    border-radius: 0.25rem;
    background: var(--rb-color-bg);
    color: #475569;
    cursor: pointer;
}

.rb-buchen__dur-btn:hover {
    background: var(--rb-color-border);
    color: var(--rb-color-text);
}

.rb-buchen__hint {
    color: var(--rb-color-text-muted);
    font-size: 0.875rem;
}

.rb-buchen__raeume {
    display: grid;
    gap: 0.5rem;
}

.rb-buchen__raum-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--rb-color-border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.rb-buchen__raum-card:hover {
    border-color: #045573;
    background: #eef5f8;
}

.rb-buchen__raum-card:has(input:checked) {
    border-color: var(--rb-color-primary);
    background: #eef5f8;
}

.rb-buchen__raum-card--belegt {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--rb-color-bg);
}

.rb-buchen__raum-card--belegt:hover {
    border-color: var(--rb-color-border);
    background: var(--rb-color-bg);
}

.rb-buchen__raum-card input[type="radio"] {
    accent-color: var(--rb-color-primary);
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.rb-buchen__raum-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.rb-buchen__raum-info strong {
    font-size: 0.9375rem;
}

.rb-buchen__raum-info small {
    color: var(--rb-color-text-muted);
    font-size: 0.8125rem;
}

.rb-buchen__raum-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.rb-buchen__raum-status--frei {
    background: #d1fae5;
    color: #065f46;
}

.rb-buchen__raum-status--belegt {
    background: #fee2e2;
    color: #991b1b;
}

.rb-buchen__raum-anfragen {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: #92400e;
    background: #fef3c7;
    border-radius: 0.25rem;
}

/* Raum-Karten: die generische `.rb-public__form label`-Regel (display:block,
   margin, font) würde das Karten-<label> zerschießen. Höhere Spezifität stellt
   das Zeilen-Layout (Radio | Infos | Status) und saubere Textgrößen wieder her. */
.rb-public__form .rb-buchen__raum-card {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-weight: 400;
}

.rb-public__form .rb-buchen__raum-info strong {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0;
}

.rb-public__form .rb-buchen__raum-info small {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0;
}

/* Public Styles */
.rb-public {
    padding: 1rem 0 3rem;
}

.rb-public h1 {
    margin: 0 0 0.5rem;
}

.rb-public h2 {
    margin: 2rem 0 1rem;
    font-size: 1.25rem;
}

.rb-public__room-address,
.rb-public__room-capacity {
    color: var(--rb-color-text-muted);
    margin: 0.25rem 0;
    font-size: 0.875rem;
}

.rb-public__rooms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}

.rb-public__room-card {
    display: block;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--rb-color-border);
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s;
}

.rb-public__room-card:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

.rb-public__room-card h2 {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
}

.rb-public__calendar-section {
    margin-top: 2rem;
}

.rb-public__booking-section {
    margin-top: 2rem;
    max-width: 40rem;
}

.rb-public__form label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    font-size: 0.875rem;
}

.rb-public__form input,
.rb-public__form textarea,
.rb-public__form select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rb-color-border);
    border-radius: 0.375rem;
    font-family: inherit;
    font-size: 0.9375rem;
}

.rb-public__form input:focus,
.rb-public__form textarea:focus,
.rb-public__form select:focus {
    outline: none;
    border-color: var(--rb-color-primary);
    box-shadow: 0 0 0 3px rgba(247, 210, 4, 0.35);
}

.rb-public__form-group {
    margin-bottom: 1rem;
}

.rb-datetime-picker {
    position: relative;
}

.rb-datetime-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rb-color-border);
    border-radius: 0.375rem;
    background: #fff;
    color: var(--rb-color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.rb-datetime-picker__trigger:hover {
    border-color: #a9c9d8;
}

.rb-datetime-picker__trigger:focus-visible,
.rb-datetime-picker.is-open .rb-datetime-picker__trigger {
    outline: none;
    border-color: var(--rb-color-primary);
    box-shadow: 0 0 0 3px rgba(247, 210, 4, 0.35);
}

.rb-datetime-picker__trigger-text {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
}

.rb-datetime-picker__value {
    overflow: hidden;
    color: #6b7280;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rb-datetime-picker__trigger.has-value .rb-datetime-picker__value {
    color: var(--rb-color-text);
}

.rb-datetime-picker__icon {
    display: inline-flex;
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    color: var(--rb-color-sidebar);
}

.rb-datetime-picker__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.rb-datetime-picker__popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 30;
    width: min(22rem, calc(100vw - 2rem));
}

.rb-datetime-picker__panel {
    padding: 1rem;
    border: 1px solid #d2e3eb;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1.25rem 2.5rem rgba(4, 85, 115, 0.18);
}

.rb-datetime-picker__header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.rb-datetime-picker__nav-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.rb-datetime-picker__nav-group--end {
    justify-content: flex-end;
}

.rb-datetime-picker__month {
    color: var(--rb-color-text);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
}

.rb-datetime-picker__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid #d2e3eb;
    border-radius: 999px;
    background: #fff;
    color: var(--rb-color-sidebar);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.rb-datetime-picker__nav svg {
    display: block;
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
}

.rb-datetime-picker__nav:hover {
    border-color: #a9c9d8;
    background: #f3f9fb;
    transform: translateY(-0.04rem);
}

.rb-datetime-picker__weekdays,
.rb-datetime-picker__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.rb-datetime-picker__weekdays {
    gap: 0.35rem;
    margin-bottom: 0.375rem;
}

.rb-datetime-picker__weekday {
    color: var(--rb-color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.rb-datetime-picker__days {
    gap: 0.35rem;
}

.rb-datetime-picker__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: #f8fbfc;
    color: var(--rb-color-text);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.rb-datetime-picker__day:hover {
    border-color: #a9c9d8;
    background: #eef6f9;
    transform: translateY(-0.04rem);
}

.rb-datetime-picker__day.is-outside {
    color: #9ca3af;
    background: #fbfcfd;
}

.rb-datetime-picker__day.is-today {
    border-color: #f7d204;
}

.rb-datetime-picker__day.is-selected {
    border-color: #045573;
    background: #045573;
    color: #fff;
}

.rb-datetime-picker__time {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.rb-datetime-picker__time-label {
    display: block;
    margin: 0;
    color: var(--rb-color-text);
    font-size: 0.8125rem;
    font-weight: 600;
}

.rb-datetime-picker__time-controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
}

.rb-datetime-picker__select {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 2.35rem 0.55rem 0.85rem;
    border: 1px solid var(--rb-color-border);
    border-radius: 0.75rem;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23045573' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 0.85rem center;
    background-repeat: no-repeat;
    background-size: 0.875rem 0.875rem;
    color: var(--rb-color-text);
    font: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.rb-datetime-picker__select:focus {
    outline: none;
    border-color: var(--rb-color-primary);
    box-shadow: 0 0 0 3px rgba(247, 210, 4, 0.35);
}

.rb-datetime-picker__time-separator {
    color: var(--rb-color-text-muted);
    font-weight: 600;
    text-align: center;
}

.rb-datetime-picker__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1rem;
}

.rb-datetime-picker__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rb-datetime-picker__action:hover {
    transform: translateY(-0.04rem);
}

.rb-datetime-picker__action--primary {
    background: #045573;
    color: #fff;
}

.rb-datetime-picker__action--primary:hover {
    background: #056887;
}

.rb-datetime-picker__action--secondary {
    background: #f7d204;
    color: #134158;
}

.rb-datetime-picker__action--secondary:hover {
    background: #f0cc07;
}

.rb-datetime-picker__action--ghost {
    border-color: #d2e3eb;
    background: #fff;
    color: var(--rb-color-sidebar);
}

.rb-datetime-picker__action--ghost:hover {
    background: #f3f9fb;
}

.rb-datetime-picker.is-invalid .rb-datetime-picker__trigger {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.rb-datetime-picker__error {
    margin-top: 0.35rem;
}

.rb-public__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.rb-public__form-fieldset {
    border: 1px solid var(--rb-color-border);
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1.5rem 0;
}

.rb-public__form-fieldset legend {
    font-weight: 600;
    padding: 0 0.5rem;
}

.rb-public__submit {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    background: var(--rb-color-primary);
    color: var(--rb-color-on-primary);
    border: none;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
}

.rb-public__submit:hover {
    background: var(--rb-color-primary-hover);
}

.rb-public__error {
    color: #dc2626;
    font-size: 0.8125rem;
    margin: 0.25rem 0 0;
}

.rb-public__description {
    margin: 1rem 0;
    line-height: 1.6;
}

.rb-public-flash {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

/* Drag & Drop */
.rb-table__drag-col {
    width: 2rem;
}

.rb-table__drag-handle {
    cursor: grab;
    user-select: none;
    text-align: center;
    color: var(--rb-color-text-muted);
    font-size: 1.125rem;
}

.rb-table__drag-handle:active {
    cursor: grabbing;
}

.rb-dragging {
    opacity: 0.5;
    background: var(--rb-color-bg);
}

/* Calendar Toolbar */
.rb-calendar-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

/* Responsive */
@media (max-width: 48rem) {
    .rb-datetime-picker__popover {
        width: min(100%, calc(100vw - 2rem));
    }

    .rb-datetime-picker__panel {
        padding: 0.875rem;
        border-radius: 0.875rem;
    }

    .rb-datetime-picker__actions {
        justify-content: stretch;
    }

    .rb-datetime-picker__action {
        flex: 1 1 100%;
    }

    .rb-admin__layout {
        grid-template-columns: 1fr;
    }

    .rb-admin__sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 0.75rem var(--rb-spacing);
    }

    .rb-admin__logo {
        border-bottom: none;
        margin-bottom: 0;
        padding: 0;
        margin-right: auto;
    }

    .rb-admin__nav {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        width: 100%;
        margin-top: 0.5rem;
    }

    .rb-admin__nav li a {
        padding: 0.375rem 0.75rem;
        border-radius: var(--rb-radius);
        font-size: 0.8125rem;
    }

    .rb-admin__user {
        display: none;
    }

    .rb-admin__main {
        padding: var(--rb-spacing);
    }

    /* Tabellen horizontal scrollbar */
    .rb-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Form Rows stacken */
    .rb-form__row {
        flex-direction: column;
    }

    .rb-form__row .rb-form__group {
        width: 100%;
    }

    /* Fieldset padding reduzieren */
    .rb-fieldset {
        padding: 0.75rem;
    }

    /* Dashboard Cards stacken */
    .rb-dashboard__cards {
        grid-template-columns: 1fr;
    }

    /* Buchbare Zeiten stacken */
    .rb-zeiten__tag {
        flex-direction: column;
        gap: 0.375rem;
    }

    /* Modal vollbreit */
    .rb-modal__content {
        width: 95%;
        max-width: none;
        margin: 0.5rem;
    }

    .rb-modal__details {
        grid-template-columns: 1fr;
    }

    .rb-modal__details dt {
        margin-top: 0.5rem;
    }

    /* Room Filter stacken */
    .rb-room-filter {
        flex-wrap: wrap;
    }

    /* Public Form Rows stacken */
    .rb-public__form-row {
        grid-template-columns: 1fr;
    }

    .rb-public__rooms {
        grid-template-columns: 1fr;
    }

    /* Kalender: Tag-Ansicht auf Mobile */
    .fc .fc-header-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* FullCalendar (Admin-Kalender) — Husby-Theme */
.rb-admin-calendar {
    --fc-button-bg-color: #045573;
    --fc-button-border-color: #045573;
    --fc-button-hover-bg-color: #134158;
    --fc-button-hover-border-color: #134158;
    --fc-button-active-bg-color: #134158;
    --fc-button-active-border-color: #134158;
    --fc-today-bg-color: #eef5f8;
    --fc-now-indicator-color: #c50756;
    --fc-border-color: var(--rb-color-border);
}

/* ==========================================================================
   Auth (Login / Passwort festlegen)
   ========================================================================== */
.rb-auth {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rb-color-bg);
    font-family: var(--rb-font-sans);
    color: var(--rb-color-text);
    padding: var(--rb-spacing);
}
.rb-auth__card {
    width: 100%;
    max-width: 24rem;
    background: var(--rb-color-card-bg);
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius);
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(19, 65, 88, 0.08);
}
.rb-auth__title {
    margin: 0;
    font-size: 1.5rem;
    color: var(--rb-color-text);
}
.rb-auth__subtitle {
    margin: 0.25rem 0 1.5rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--rb-color-text-muted);
}