/* ============================================================
   Theme: Lager Heroes
   Corporate Design: Dunkelblau #1c365e, Hellblau #0071ce,
   Pink/Rosa #d20272. Gepunkteter Hintergrund als Design-Element.
   INI-Wert: theme = "lagerheroes"
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;900&family=Barlow:wght@400;500;600&display=swap');

   :root {
     /* Lager Heroes Brand Colors */
     --lh-dark:           #1c365e;
     --lh-dark-rgb:       28, 54, 94;
     --lh-blue:           #0071ce;
     --lh-blue-rgb:       0, 113, 206;
     --lh-blue-light:     #1a8fe0;
     --lh-pink:           #d20272;
     --lh-pink-rgb:       210, 2, 114;
     --lh-pink-hover:     #a80059;
   
     /* Bootstrap overrides */
     --bs-primary:        #0071ce;
     --bs-primary-rgb:    0, 113, 206;
     --bs-secondary:      #d20272;
     --bs-secondary-rgb:  210, 2, 114;
     --bs-success:        #198754;
     --bs-success-rgb:    25, 135, 84;
     --bs-info:           #1a8fe0;
     --bs-info-rgb:       26, 143, 224;
     --bs-warning:        #ffc107;
     --bs-warning-rgb:    255, 193, 7;
     --bs-danger:         #dc3545;
     --bs-danger-rgb:     220, 53, 69;
     --bs-light:          #e8eef6;
     --bs-light-rgb:      232, 238, 246;
     --bs-dark:           #1c365e;
     --bs-dark-rgb:       28, 54, 94;
   
     --bs-link-color:       #0071ce;
     --bs-link-color-rgb:   0, 113, 206;
     --bs-link-hover-color: #d20272;
   
     --brand-primary:   var(--lh-blue);
     --brand-secondary: var(--lh-pink);
   
     --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
   
     /* Gepunktetes Hintergrund-Muster */
     --dot-color:         rgba(0, 113, 206, 0.35);
     --dot-size:          3px;
     --dot-spacing:       18px;
   }
   
   body {
     color: #1c365e;
     font-family: 'Barlow', Helvetica Neue, Helvetica, Arial, sans-serif;
     font-size: 16px;
     background-color: #f0f4fa;
   }
   
   /* ============================================================
      Header: Dunkelblau mit gepunkteter Textur
      ============================================================ */
   header {
     background-color: #1c365e !important;
      /*
     background-image:
       radial-gradient(circle, var(--dot-color) var(--dot-size), transparent var(--dot-size)) !important;
     background-size: var(--dot-spacing) var(--dot-spacing) !important; */

    background-image: url('https://cdn.selfstorage.team/10/media/2cac3b3a-e5f3-4c02-9516-549d5bca1f49.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

     border-bottom-color: rgba(0, 113, 206, 0.3) !important;
     color: #ffffff !important;
   }
   
   header a,
   header .nav-link {
     color: rgba(255, 255, 255, 0.85) !important;
     font-family: 'Barlow Condensed', Helvetica Neue, Helvetica, Arial, sans-serif;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     font-size: 0.85rem;
   }
   
   header a:hover,
   header .nav-link:hover,
   header .nav-link.active {
     color: #d20272 !important;
   }
   
   /* Logo / Brand */
   header .navbar-brand,
   header .brand {
     color: #ffffff !important;
   }
   
   /* ============================================================
      btn-primary: Hellblau (Lager Heroes Blau)
      ============================================================ */
   .btn-primary {
     --bs-btn-color:              #ffffff;
     --bs-btn-bg:                 #0071ce;
     --bs-btn-border-color:       #0071ce;
     --bs-btn-hover-color:        #ffffff;
     --bs-btn-hover-bg:           #005caa;
     --bs-btn-hover-border-color: #0056a0;
     --bs-btn-active-color:       #ffffff;
     --bs-btn-active-bg:          #0056a0;
     --bs-btn-active-border-color:#004f95;
     --bs-btn-disabled-bg:        #0071ce;
     --bs-btn-disabled-border-color: #0071ce;
     --bs-btn-focus-shadow-rgb:   0, 113, 206;
     font-family: 'Barlow Condensed', Helvetica Neue, Helvetica, Arial, sans-serif;
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
   }
   
   /* ============================================================
      btn-secondary: Pink (Lager Heroes CTA-Farbe)
      ============================================================ */
   .btn-secondary {
     --bs-btn-color:              #ffffff;
     --bs-btn-bg:                 #d20272;
     --bs-btn-border-color:       #d20272;
     --bs-btn-hover-color:        #ffffff;
     --bs-btn-hover-bg:           #a80059;
     --bs-btn-hover-border-color: #9c0054;
     --bs-btn-active-color:       #ffffff;
     --bs-btn-active-bg:          #9c0054;
     --bs-btn-active-border-color:#8f004d;
     --bs-btn-disabled-bg:        #d20272;
     --bs-btn-disabled-border-color: #d20272;
     --bs-btn-focus-shadow-rgb:   210, 2, 114;
     font-family: 'Barlow Condensed', Helvetica Neue, Helvetica, Arial, sans-serif;
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
   }
   
   .btn-outline-primary {
     --bs-btn-color:              #0071ce;
     --bs-btn-border-color:       #0071ce;
     --bs-btn-hover-color:        #ffffff;
     --bs-btn-hover-bg:           #0071ce;
     --bs-btn-hover-border-color: #0071ce;
     --bs-btn-active-color:       #ffffff;
     --bs-btn-active-bg:          #0071ce;
     --bs-btn-active-border-color:#0071ce;
     --bs-btn-disabled-color:     #0071ce;
     --bs-btn-disabled-border-color: #0071ce;
     --bs-btn-focus-shadow-rgb:   0, 113, 206;
   }
   
   .btn-outline-secondary {
     --bs-btn-color:              #d20272;
     --bs-btn-border-color:       #d20272;
     --bs-btn-hover-color:        #ffffff;
     --bs-btn-hover-bg:           #d20272;
     --bs-btn-hover-border-color: #d20272;
     --bs-btn-active-color:       #ffffff;
     --bs-btn-active-bg:          #d20272;
     --bs-btn-active-border-color:#d20272;
     --bs-btn-disabled-color:     #d20272;
     --bs-btn-disabled-border-color: #d20272;
     --bs-btn-focus-shadow-rgb:   210, 2, 114;
   }
   
   .btn-success {
     --bs-btn-color:              #ffffff;
     --bs-btn-bg:                 #198754;
     --bs-btn-border-color:       #198754;
     --bs-btn-hover-bg:           #157347;
     --bs-btn-hover-border-color: #146c43;
     --bs-btn-active-bg:          #146c43;
     --bs-btn-focus-shadow-rgb:   25, 135, 84;
   }
   
   /* ============================================================
      Hero / Banner: Dunkelblau mit Verlauf + Punkte
      ============================================================ */
   .hero,
   .hero-section,
   .jumbotron,
   [class*="hero"] {
     background-color: #1c365e;
     background-image:
       radial-gradient(circle, rgba(0, 113, 206, 0.30) var(--dot-size), transparent var(--dot-size)),
       linear-gradient(135deg, #0071ce 0%, #1c365e 55%, #111f3a 100%);
     background-size: var(--dot-spacing) var(--dot-spacing), 100% 100%;
     color: #ffffff;
   }
   
   /* ============================================================
      Cards: leichter Blauton, klare Border
      ============================================================ */
   .card {
     border-color: rgba(0, 113, 206, 0.2);
     border-radius: 0.5rem;
   }
   
   .card-header {
     background-color: #1c365e;
     color: #ffffff;
     font-family: 'Barlow Condensed', Helvetica Neue, Helvetica, Arial, sans-serif;
     font-weight: 700;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     border-bottom-color: rgba(0, 113, 206, 0.3);
   }
   
   /* ============================================================
      Forms
      ============================================================ */
   .form-control:focus,
   .form-select:focus {
     border-color: #0071ce;
     box-shadow: 0 0 0 0.25rem rgba(0, 113, 206, 0.2);
   }
   
   /* ============================================================
      Badges & Alerts
      ============================================================ */
   .badge.bg-primary   { background-color: #0071ce !important; }
   .badge.bg-secondary { background-color: #d20272 !important; }
   
   .alert-primary {
     background-color: rgba(0, 113, 206, 0.1);
     border-color: rgba(0, 113, 206, 0.3);
     color: #1c365e;
   }
   
   .alert-secondary {
     background-color: rgba(210, 2, 114, 0.1);
     border-color: rgba(210, 2, 114, 0.3);
     color: #7a0040;
   }
   
   /* ============================================================
      Navbar (falls Bootstrap-Navbar genutzt wird)
      ============================================================ */
   .navbar-dark,
   .navbar[data-bs-theme="dark"] {
     --bs-navbar-color:          rgba(255,255,255,0.85);
     --bs-navbar-hover-color:    #d20272;
     --bs-navbar-active-color:   #d20272;
     --bs-navbar-brand-color:    #ffffff;
     --bs-navbar-brand-hover-color: #d20272;
     --bs-navbar-toggler-border-color: rgba(255,255,255,0.3);
   }
   
   /* ============================================================
      Gepunkteter Hintergrund als Hilfsklasse
      Kann auf Sections, Hero-Bereiche etc. angewendet werden.
      Alternativ: background-image: url('https://cdn.selfstorage.team/10/media/2cac3b3a-e5f3-4c02-9516-549d5bca1f49.jpg');
      ============================================================ */
   .lh-dotted-bg {
     background-color: #1c365e;
     background-image:
       radial-gradient(circle, rgba(0, 113, 206, 0.35) var(--dot-size), transparent var(--dot-size)),
       linear-gradient(135deg, #0071ce 0%, #1c365e 60%, #0d1f3c 100%);
     background-size: var(--dot-spacing) var(--dot-spacing), 100% 100%;
   }
   
   /* Variante mit externem Bild (Fallback) */
   .lh-dotted-bg-img {
     background-image: url('https://cdn.selfstorage.team/10/media/2cac3b3a-e5f3-4c02-9516-549d5bca1f49.jpg');
     background-size: cover;
     background-position: center;
   }
   
   /* ============================================================
      Tenant-spezifische Hintergründe (aus Original übernommen)
      ============================================================ */
   .tenant-bg-soft   { background: rgba(0, 113, 206, 0.07); }
   .tenant-bg-strong { background: rgba(0, 113, 206, 0.16); }
   
   /* Pink-Variante für CTA-Bereiche */
   .tenant-bg-cta    { background: rgba(210, 2, 114, 0.08); }
   
   /* ============================================================
      Überschriften: Barlow Condensed wie auf der Lager Heroes Seite
      ============================================================ */
   h1, h2, h3, h4, h5, h6,
   .h1, .h2, .h3, .h4, .h5, .h6 {
     font-family: 'Barlow Condensed', Helvetica Neue, Helvetica, Arial, sans-serif;
     font-weight: 900;
     color: #1c365e;
     text-transform: uppercase;
     letter-spacing: 0.03em;
   }
   
   /* Weiße Überschriften auf dunklem Hintergrund */
   .lh-dotted-bg h1, .lh-dotted-bg h2, .lh-dotted-bg h3,
   .hero h1, .hero h2, .hero h3,
   .card-header h1, .card-header h2, .card-header h3 {
     color: #ffffff;
   }
   
   /* Pink-Akzent für Highlight-Texte */
   .text-accent,
   .text-pink {
     color: #d20272 !important;
   }
   
   .text-lh-dark  { color: #1c365e !important; }
   .text-lh-blue  { color: #0071ce !important; }
   
   /* ============================================================
      Layout-Utilities (aus Original übernommen)
      ============================================================ */
   .grid { display: grid; gap: var(--space-4); }
   .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
   @media (max-width: 768px) { .grid.cols-2 { grid-template-columns: 1fr; } }
   
   .container-sm { max-width: 540px;  margin-inline: auto; }
   .container-md { max-width: 720px;  margin-inline: auto; }
   .container-lg { max-width: 960px;  margin-inline: auto; }
   .container-xl { max-width: 1140px; margin-inline: auto; }
   
   .section { padding-block: calc(var(--space-4) * 2); }
   @media (min-width: 768px) { .section { padding-block: calc(var(--space-4) * 3); } }
   
   .form-narrow { max-width: 420px; margin-inline: auto; }
   .form-medium { max-width: 560px; margin-inline: auto; }
   .form-wide   { max-width: 720px; margin-inline: auto; }


   #reservation-progress .bg-success {
    background-color: var(--bs-primary) !important;
   }
   #reservation-progress .bg-primary {
    background-color: var(--bs-secondary) !important;
   }
   .category-card .card-body .card-title {
    color: var(--bs-secondary) !important;
    font-size: 1.5rem !important;
   }