:root {
    --dr-rot: #C62026;
    --dr-schwarz: #151515;
    --dr-weiss: #F5F2EC;
    --dr-gruen: #355B3B;
    --dr-beige: #D9B08C;

    --bs-primary: var(--dr-rot);
    --bs-primary-rgb: 198, 32, 38;
    --bs-body-color: var(--dr-schwarz);
    --bs-body-bg: var(--dr-weiss);
    --bs-link-color: var(--dr-rot);
    --bs-link-hover-color: #9c191e;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.navbar-drinradeln {
    background-color: var(--dr-schwarz);
}

.navbar-drinradeln .navbar-brand img {
    height: 42px;
}

.navbar-drinradeln .nav-link {
    color: var(--dr-weiss) !important;
}

.navbar-drinradeln .nav-link.active {
    color: var(--dr-rot) !important;
    font-weight: bold;
}

.btn-primary {
    background-color: var(--dr-rot);
    border-color: var(--dr-rot);
}

.btn-primary:hover, .btn-primary:active {
    background-color: #9c191e;
    border-color: #9c191e;
}

.btn-outline-primary {
    color: var(--dr-rot);
    border-color: var(--dr-rot);
}

.btn-outline-primary:hover {
    background-color: var(--dr-rot);
    border-color: var(--dr-rot);
}

.text-dr-gruen { color: var(--dr-gruen); }
.text-dr-rot { color: var(--dr-rot) !important; }
.bg-dr-gruen { background-color: var(--dr-gruen); }
.bg-dr-beige { background-color: var(--dr-beige); }

/* "Zurück"-Navigation (CD: Tiefschwarz = Kontur/Text), statt reinem Text-Link */
.btn-zurueck {
    color: var(--dr-schwarz);
    border: 1px solid var(--dr-schwarz);
    background: transparent;
}

.btn-zurueck:hover, .btn-zurueck:focus {
    background-color: var(--dr-schwarz);
    border-color: var(--dr-schwarz);
    color: var(--dr-weiss);
}

.card-header-dr {
    background-color: var(--dr-schwarz);
    color: var(--dr-weiss);
}

.kursplan-tag {
    min-height: 100%;
}

.kurstermin-karte {
    border-left: 5px solid var(--dr-rot);
    border-radius: .375rem;
    background: #fff;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
    box-shadow: 0 1px 3px rgba(21,21,21,.15);
}

.kurstermin-karte.abgesagt {
    opacity: .55;
    border-left-color: #999;
}

.kurstermin-karte.angemeldet {
    background: #eaf2ec;
}

.kurstermin-karte.frei-buchbar {
    background: #fbf3ea;
}

.kurstermin-karte:hover {
    box-shadow: 0 2px 6px rgba(21,21,21,.25);
    transform: translateY(-1px);
    transition: box-shadow .15s, transform .15s;
}

.kurskachel {
    transition: box-shadow .15s, transform .15s;
}

.kurskachel:hover {
    box-shadow: 0 2px 8px rgba(21,21,21,.25);
    transform: translateY(-2px);
}

.kurskachel.abgesagt {
    opacity: .6;
}

.teilnehmer-kachel {
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(21,21,21,.15);
    padding: .75rem 1rem;
    height: 100%;
}

.anfrage-erledigt {
    opacity: .65;
}

.nav-pills .nav-link {
    color: var(--dr-schwarz);
}

.nav-pills .nav-link.active {
    background-color: var(--dr-rot);
    color: #fff;
}

/* Monatsansicht */
.monat-grid-wrapper {
    overflow-x: auto;
}

.monat-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(90px, 1fr));
    gap: 3px;
    min-width: 630px;
}

.monat-kopf {
    text-align: center;
    font-weight: bold;
    font-size: .75rem;
    padding: .25rem 0;
    color: var(--dr-schwarz);
}

.monat-tag {
    background: #fff;
    border-radius: .25rem;
    padding: .25rem;
    min-height: 90px;
}

.monat-tag.ausserhalb {
    background: #f2f0eb;
    opacity: .55;
}

.monat-tag.heute {
    outline: 2px solid var(--dr-rot);
    outline-offset: -2px;
}

.monat-tag-datum {
    font-size: .7rem;
    font-weight: bold;
    color: var(--dr-schwarz);
    margin-bottom: 2px;
}

.monat-eintrag {
    display: block;
    font-size: .6rem;
    line-height: 1.3;
    color: #fff;
    background: #6c757d;
    padding: 1px 4px;
    border-radius: 3px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

/* Farbe entsprechend der Legende: angemeldet=gruen, frei=beige, ausgebucht=grau, abgesagt=dunkelgrau */
.monat-eintrag.angemeldet {
    background: var(--dr-gruen);
    color: #fff;
}

.monat-eintrag.frei-buchbar {
    background: var(--dr-beige);
    color: var(--dr-schwarz);
}

.monat-eintrag.ausgebucht {
    background: #6c757d;
    color: #fff;
}

.monat-eintrag.abgesagt {
    background: #999;
    color: #fff;
    opacity: .6;
    text-decoration: line-through;
}

.grundriss-flaeche {
    position: relative;
    width: 100%;
    min-height: 220px;
    aspect-ratio: 3 / 2;
    background: repeating-linear-gradient(0deg, #fff, #fff 24px, #eee 25px),
                repeating-linear-gradient(90deg, #fff, #fff 24px, #eee 25px);
    border: 2px dashed var(--dr-beige);
    border-radius: .5rem;
    overflow: hidden;
}

/* Fahrrad-Symbol im Grundriss-Editor (admin/raum-edit.php): Bike-Illustration statt Punkt */
.fahrrad-icon {
    position: absolute;
    width: clamp(38px, 11vw, 60px);
    height: clamp(38px, 11vw, 60px);
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

.fahrrad-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(21,21,21,.5));
    pointer-events: none;
}

.fahrrad-icon .label {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .6rem;
    font-weight: bold;
    color: #fff;
    background: var(--dr-schwarz);
    padding: 0 4px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
}

/* Raumelemente (Fenster/Tür/Leinwand/Fernseher) im Grundriss-Editor */
.raum-element {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1px;
    border-radius: .25rem;
    border: 2px solid var(--dr-schwarz);
    background: #fff;
    font-size: clamp(.9rem, 4vw, 1.3rem);
    line-height: 1;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    box-shadow: 0 1px 3px rgba(21,21,21,.25);
}

.raum-element .txt { font-size: .55rem; font-weight: bold; color: var(--dr-schwarz); }

.raum-element.fenster { width: clamp(40px, 11vw, 62px); height: clamp(26px, 7vw, 38px); background: #dceaf5; }
.raum-element.tuer { width: clamp(26px, 7vw, 38px); height: clamp(44px, 12vw, 64px); background: var(--dr-beige); }
.raum-element.leinwand { width: clamp(54px, 15vw, 84px); height: clamp(32px, 9vw, 48px); background: #f0f0f0; }
.raum-element.fernseher { width: clamp(42px, 11vw, 62px); height: clamp(28px, 8vw, 42px); background: var(--dr-schwarz); color: #fff; }
.raum-element.fernseher .txt { color: #fff; }
.raum-element.trainer { width: clamp(42px, 11vw, 62px); height: clamp(42px, 11vw, 62px); border-radius: 50%; background: var(--dr-rot); color: #fff; }
.raum-element.trainer .txt { color: #fff; }

.raum-element.readonly { cursor: default; touch-action: auto; }

/* Fahrrad im Buchungs-Grundriss (termin.php): Bike-Icon mit farbigem Status-Ring statt Punkt */
.fahrrad-status {
    position: absolute;
    width: clamp(40px, 11vw, 60px);
    height: clamp(40px, 11vw, 60px);
    border-radius: 50%;
    padding: 3px;
    box-sizing: border-box;
    user-select: none;
}

.fahrrad-status img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
}

.fahrrad-status .label {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .6rem;
    font-weight: bold;
    color: #fff;
    background: var(--dr-schwarz);
    padding: 0 4px;
    border-radius: 3px;
    white-space: nowrap;
}

.fahrrad-status.frei { background-color: var(--dr-gruen); }
.fahrrad-status.freigegeben { background-color: var(--dr-beige); }
.fahrrad-status.belegt { background-color: var(--dr-rot); }
.fahrrad-status.angefragt { background-color: #e6a23c; }
.fahrrad-status.eigen { outline: 3px solid #000; outline-offset: 1px; }

/* Klickbare Variante (Buchen/Freigeben/Stornieren direkt per Klick aufs Bike-Icon) */
.fahrrad-status-form {
    position: absolute;
    width: clamp(40px, 11vw, 60px);
    height: clamp(40px, 11vw, 60px);
    margin: 0;
}

.fahrrad-status-form .fahrrad-status {
    position: static;
    width: 100%;
    height: 100%;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
}

.fahrrad-status-form .fahrrad-status:hover,
.fahrrad-status-form .fahrrad-status:focus-visible {
    box-shadow: 0 0 0 3px rgba(21,21,21,.35);
}

@media (max-width: 400px) {
    .navbar-drinradeln .navbar-brand img { height: 34px; }
}