/* Rote Arche — Branding für LibreBooking, maximale Angleichung an rote-arche.de
   (Bauhaus: Rot/Schwarz/Papier, Space Grotesk, harte Kanten). */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('space-grotesk.woff2') format('woff2');
}

:root {
  --ra-rot: #e2001a;
  --ra-rot-dunkel: #b30014;
  --ra-schwarz: #17171a;
  --ra-papier: #faf8f4;
  --ra-linie: #d9d4cc;
  --bs-primary: #e2001a;
  --bs-primary-rgb: 226, 0, 26;
  --bs-link-color: #e2001a;
  --bs-link-color-rgb: 226, 0, 26;
  --bs-link-hover-color: #b30014;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: #faf8f4;
}

body {
  background: var(--ra-papier) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Kopf: Logo-Leiste + Navbar zu einem roten Block verschmelzen ─────── */
/* Die Logo-Leiste (die d-flex, die die navbar-brand enthält) rot einfärben —
   :has() grenzt es exakt auf diese eine Leiste ein, nicht auf andere flex-Rows. */
.d-flex.align-items-center:has(> .navbar-brand) {
  background: var(--ra-rot);
  margin: 0 !important;
  padding: 0.9rem 1.5rem 0.6rem !important;
}
.navbar-brand .logo {
  height: 44px;
  width: auto;
}
/* Titel-Text neben dem Logo weiß + Space Grotesk, Versalien */
.d-flex.align-items-center:has(> .navbar-brand) .border-start,
.d-flex.align-items-center:has(> .navbar-brand) .border-start * {
  border-color: rgba(255,255,255,0.5) !important;
  color: #fff !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  text-decoration: none;
}

/* Navbar: rot, harte schwarze Unterkante, weiße Versal-Links */
.navbar, .navbar.bg-light, .navbar.bg-dark {
  background: var(--ra-rot) !important;
  border-bottom: 6px solid var(--ra-schwarz);
  box-shadow: none !important;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .dropdown-toggle {
  color: #fff !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.9rem;
}
.navbar .nav-link:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 5px; }
.navbar-toggler { border-color: rgba(255,255,255,0.6); }
.navbar-toggler-icon { filter: invert(1) brightness(2); }

/* ── Überschriften: Space Grotesk, kräftig, Versalien ────────────────── */
h1, h2, h3, .h1, .h2, .h3, legend, .page-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ra-schwarz);
}
h1, .h1 { text-transform: uppercase; }

/* ── Buttons & Formulare: harte Kanten, Marken-Rot ───────────────────── */
.btn {
  border-radius: 0 !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.btn-primary {
  background-color: var(--ra-rot);
  border-color: var(--ra-rot);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--ra-schwarz) !important;
  border-color: var(--ra-schwarz) !important;
}
.card, .form-control, .form-select, .alert, .modal-content,
.dropdown-menu, .list-group-item, .input-group-text, .badge {
  border-radius: 0 !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ra-rot);
  box-shadow: 0 0 0 0.2rem rgba(226,0,26,0.2);
}
a { color: var(--ra-rot); }
a:hover { color: var(--ra-rot-dunkel); }

/* ── Login-/Registrierungs-Logo: weißer Kreis braucht farbigen Grund ─── */
.mx-auto.d-block.w-50 {
  width: 120px !important;
  background: var(--ra-rot);
  padding: 16px;
  box-sizing: content-box;
}

/* ── Fuß: schwarzer Block, rote Oberkante (wie Hauptseite) ───────────── */
footer[role="contentinfo"] {
  background: var(--ra-schwarz) !important;
  border-top: 6px solid var(--ra-rot) !important;
  color: var(--ra-papier);
  padding: 1.4rem 1rem !important;
}
footer[role="contentinfo"] a,
footer[role="contentinfo"] .link-primary {
  color: var(--ra-papier) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
footer[role="contentinfo"] a:hover { color: var(--ra-rot) !important; }

/* Reservierungsslots in Markenfarbe */
.reservable:hover { outline: 2px solid var(--ra-rot); }