/* ==========================================================================
   USER.CSS
   Joomla 6 / Cassiopeia Child Template
   Basis-Styles
   ========================================================================== */


/* ==========================================================================
   1. Variablen
   ========================================================================== */

:root {

    /* Farben */

    --cassiopeia-color-primary:   #2b6cb0;
    --cassiopeia-color-secondary: #f5a800;
    --cassiopeia-color-hover:     #21568c;
    --cassiopeia-color-link:      #2b6cb0;

    --body-bg:        #ffffff;
    --body-text:      #333333;
    --heading-color:  #1f2937;
    --section-bg:     #f5f5f5;
    --border-color:   #e5e7eb;

    --footer-bg:      #2a69ab;
    --footer-text:    #ffffff;

    /* Bootstrap */

    --bs-primary:             var(--cassiopeia-color-primary);
    --bs-secondary:           var(--cassiopeia-color-secondary);
    --bs-link-color:          var(--cassiopeia-color-link);
    --bs-link-hover-color:    var(--cassiopeia-color-hover);
    --bs-body-bg:             var(--body-bg);
    --bs-body-color:          var(--body-text);

}


/* ==========================================================================
   2. Basis
   ========================================================================== */

body {
  /* Zuerst die Hintergrundfarbe setzen */
  background-color: var(--body-bg);
  color: var(--body-text);

  /* PFAD KORRIGIERT: ../ springt aus dem CSS-Ordner in den Haupt-Ordner zu /images */
  background-image: url('https://new.malerbetrieb-brinkmann.de/images/sloagan-maler.svg');
  
  /* Verhindert, dass die Grafik sich kachelt */
  background-repeat: no-repeat;
  
  /* REGLER 1: DIE GRÖSSE DER GRAFIK */
  background-size: 550px auto;
  
  /* REGLER 2: NEUE MITTIGE POSITIONIERUNG 
     - 'right': Klebt direkt am rechten Rand.
     - 'center': Richtet die Grafik vertikal exakt in der Mitte der Seite aus. */
  
  background-position: calc(100% - 30px) calc(30% - 50px);
  
  /* Lässt die Grafik beim Scrollen mitwandern */
  background-attachment: fixed; 
}

@media (max-width: 767.98px) {
  body {
    background-image: none; /* Deaktiviert das Hintergrundbild auf Handys */
  }
}














h1,h2,h3,h4,h5,h6{
    color:var(--heading-color);
    font-weight:600;
    text-wrap:balance;
}

a{
    color:var(--cassiopeia-color-link);
    text-decoration:none;
}

a:hover{
    color:var(--cassiopeia-color-hover);
}


/* ==========================================================================
   3. Header
   ========================================================================== */

.container-header{

    position:relative;
    z-index:1050;

    background:#ffffff;
    border-bottom:3px solid var(--border-color);

}

.container-header .navbar,
.container-header .mod-menu{

    position:relative;
    z-index:1051;
    color: #1f2937;

}

.dropdown-menu{

    z-index:1060;
    border-radius:0;

}




.container-header .container-nav {
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 0em;
}



.container-header .navbar-toggler {
  color: #286baf;
  cursor: pointer;
  border: 2px solid #286baf;
  border-radius:0;
  padding: 17px;
}



/* ==========================================================================
   4. Navigation
   ========================================================================== */

.nav.menu>li>a,
.navbar .nav-link{

    color:var(--body-text);
    font-weight:500;
    padding:.65rem 1rem;
    border-radius:0;

}

.nav.menu>li.current>a,
.nav.menu>li.active>a{

    color:var(--cassiopeia-color-primary);
    font-weight:600;

    box-shadow: inset 0 -2px 0 var(--cassiopeia-color-primary);

}


/* ==========================================================================
   5. Module
   ========================================================================== */

.card{

    overflow:hidden;
    border-radius:0;

}

.section-muted{

    background:var(--section-bg);

}


/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn{

    border-radius:0;
    font-weight:600;
    padding:.7rem 1.5rem;

}

.btn-primary{

    background:var(--cassiopeia-color-primary);
    border-color:var(--cassiopeia-color-primary);

}

.btn-primary:hover{

    background:var(--cassiopeia-color-hover);
    border-color:var(--cassiopeia-color-hover);

}

.btn-secondary{

    background:var(--cassiopeia-color-secondary);
    border-color:var(--cassiopeia-color-secondary);
    color:#2b2216;

}

.btn-secondary:hover{

    background:#d9930a;
    border-color:#d9930a;
    color:#2b2216;

}

.btn-outline-primary{

    border-radius:0;

}


/* ==========================================================================
   7. Footer
   ========================================================================== */

.container-footer,
.footer{

    background:var(--footer-bg);
    color:var(--footer-text);

}

.container-footer h1,
.container-footer h2,
.container-footer h3,
.container-footer h4{

    color:#fff;

}

.container-footer a,
.footer a{

    color:#fff;

}

.my-4 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 0rem !important;
  padding-bottom: 1rem !important;
}


/* ==========================================================================
   8. Accessibility
   ========================================================================== */

:focus-visible{

    outline:3px solid var(--cassiopeia-color-primary);
    outline-offset:2px;

}


/* ==========================================================================
   9. Bootstrap Icons
   ========================================================================== */

@font-face{

    font-family:"bootstrap-icons";

    src:
        url("../fonts/bootstrap-icons.woff2") format("woff2"),
        url("../fonts/bootstrap-icons.woff") format("woff");

    font-display:block;

}

/* ==========================================================================
   10. Referenzen Filter-Banner (Custom Erweiterung)
   ========================================================================== */

/* Dunkles Styling für Inaktive Filter-Buttons analog zum Screenshot */
.filter-nav .btn-dark {
    background-color: #1f2937; /* Ihr --heading-color */
    border-color: #1f2937;
    color: #ffffff;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 0.6rem 1.2rem;
}

.filter-nav .btn-dark:hover {
    background-color: var(--cassiopeia-color-hover);
    border-color: var(--cassiopeia-color-hover);
}

/* Erzeugt exakt 5 Spalten nebeneinander ab großen Bildschirmen */
@media (min-width: 992px) {
    .col-lg-2\.4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* Nahtlose Bilder-Anordnung ohne Lücken */
.referenzen-grid .filter-item {
    transition: all 0.3s ease-in-out;
}

.gallery-link {
    overflow: hidden;
}

/* Subtiler Zoom-Effekt beim Hover über die Referenzbilder */
.gallery-link img {
    transition: transform 0.4s ease;
}

.gallery-link:hover img {
    transform: scale(1.05);
}

/* ==========================================================================
   11. Slider & Dots Styling
   ========================================================================== */

/* Styling der Navigations-Dots (Symmetrisch an Ihr Design angepasst) */
.carousel-indicators [data-bs-slide-to] {
    width: 10px;
    height: 10px;
    border-radius: 50%; /* Runde Punkte wie im Beispiel-Screenshot */
    background-color: var(--body-text);
    border: none;
    opacity: 0.4;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    margin: 0 5px;
}

/* Aktiver Punkt nutzt Ihre vordefinierte Zweitfarbe oder Primärfarbe */
.carousel-indicators .active {
    opacity: 1;
    background-color: var(--cassiopeia-color-secondary) !important; 
}

/* Verhindert Layout-Sprünge beim Filtern im Slider */
.carousel-item.d-none {
    display: none !important;
}

/* Optimierung für den Finger-Swipe am Smartphone */
@media (max-width: 767.98px) {
    .referenzen-grid .carousel-item img {
        height: 250px !important; /* Etwas kompakter auf Mobilgeräten */
    }
}


/* Mobil-Optimierung für das Multi-Item-Karussell */
@media (max-width: 767.98px) {
    #referenzenCarousel .row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: hidden;
    }
    #referenzenCarousel .filter-item {
        flex: 0 0 100%;
        width: 100%;
    }
    /* Blendet gefilterte Elemente auf Mobilgeräten komplett aus */
    #referenzenCarousel .filter-item.d-none {
        display: none !important;
    }
}




/* ==========================================================================
   12. AutoBewegung
   ========================================================================== */

/* Zentrierung der Elemente auf der Seite */
.welcome-text, .car-container {
  text-align: center;
  overflow: hidden; /* Verhindert eine horizontale Scrollbar während der Animation */
}

/* Neuer angepasster Bereich für den Container mit Hintergrundbild */
.car-container {
  position: relative;
  width: 100%;
  min-height: 450px; /* WICHTIG: Verhindert, dass der Container kollabiert, damit das Hintergrundbild Platz hat */
  
  /* Hintergrundbild-Einstellungen */
  background-image: url('/images/pinselfarbe.svg'); /* HIER Pfad anpassen (relativ zum CSS-Ordner) */
  background-repeat: no-repeat;
  background-size: contain; /* 'contain' verhindert das Abschneiden, 'cover' füllt den Raum komplett */
  
  /* REGLER FÜR DIE VERSCHIEBUNG NACH RECHTS:
     Erster Wert (75%): Schiebt das Bild nach rechts (0% = links, 50% = Mitte, 100% = rechts außen).
     Zweiter Wert (center): Zentriert das Hintergrundbild vertikal. */
  background-position: 75% center; 
}

.welcome-text {
  font-size: 2rem;
  margin-bottom: 20px;
}

/* Die Auto-Animation */
.animated-car {
  max-width: 100%;
  height: auto;
  
  /* Startzustand: Weit links außerhalb des Bildschirms, leicht nach vorne geneigt */
  transform: translateX(-150%) skewX(-10deg);
  opacity: 0;
  
  /* Animations-Einstellungen */
  animation: driveInAndBounce 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation-delay: 0.3s; /* Wartet kurz, bis die Seite geladen ist */
}

/* Der Animations-Verlauf (Keyframes) */
@keyframes driveInAndBounce {
  0% {
    transform: translateX(-150%) skewX(-15deg);
    opacity: 0;
  }
  /* Zackiges Hereinfahren: Das Auto schießt über das Ziel hinaus */
  70% {
    transform: translateX(5%) skewX(-5deg);
    opacity: 1;
  }
  /* Erster kleiner Rückfeder-Effekt */
  85% {
    transform: translateX(-2%) skewX(2deg);
  }
  /* Edles Ausfedern und Stillstand in der Mitte */
  100% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
}





/* ==========================================================================
   13. 50 Jahre
   ========================================================================== */

/* Container-Modul in der Top-Bar oben rechts fixieren */
.container-topbar .mod-custom {
  position: relative;
}

/* Die 50-Jahre-Grafik präzise positionieren */
.container-topbar img[src*="50-jahre.svg"] {
  position: absolute;
  top: 0;         /* Klebt ganz oben am Bildschirmrand */
  right: 135px;    /* Abstand zum rechten Bildschirmrand */
  width: 130px;   /* Ihre gewünschte Breite */
  height: auto;
  
  /* Z-Index erhöht, damit die Grafik ÜBER das Menü ragt */
  z-index: 999;   
  
  /* Sanfter Schatten, damit sich das Logo optisch vom Menü abhebt */
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.0)); 
}

/* WICHTIG: Auf Smartphones (unter 992px) das Überhängen deaktivieren, 
   da das Menü dort einklappt (Burgermenü) und sonst überdeckt wird */
@media (max-width: 991.98px) {
  .container-topbar img[src*="50-jahre.svg"] {
    position: static;
    display: block;
    margin: 10px auto; /* Zentriert die Grafik im mobilen Layout */
    width: 120px;      /* Etwas kleiner für Mobilgeräte */
  }
}


/* ==========================================================================
   14. Zeitstrahl - Unternehmen
   ========================================================================== */

/* --- EDLE TIMELINE STYLE SCHNIPSEL --- */

:root {
  --tl-main-color: #286baf;
  --tl-accent-color: #db0d13;
  --tl-text-color: #333333;
  --tl-bg-panel: #f8f9fa;
}

.timeline-wrapper {
  padding: 40px 0;
  color: var(--tl-text-color);
}

.timeline-main-title {
  color: var(--tl-main-color);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.timeline-title-divider {
  width: 60px;
  height: 3px;
  background-color: var(--tl-accent-color);
  margin: 15px auto 0;
}

/* Die vertikale Linie */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background-color: #e9ecef;
  top: 0;
  bottom: 0;
  left: 30px; /* Position auf Mobilgeräten standardmäßig links */
  margin-left: -2px;
}

/* Einzelnes Element */
.timeline-item {
  padding: 10px 30px;
  position: relative;
  background-color: transparent;
  width: 100%;
  margin-bottom: 25px;
}

/* Der Zeitstrahl-Punkt (Badge) */
.timeline-badge {
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: #ffffff;
  border: 4px solid var(--tl-main-color);
  top: 22px;
  left: 30px;
  margin-left: -10px;
  border-radius: 50%;
  z-index: 2;
  transition: all 0.3s ease;
}

.timeline-badge.badge-accent {
  border-color: var(--tl-accent-color);
}

/* Inhalts-Box (Panel) */
.timeline-panel {
  padding: 20px 25px;
  background: var(--tl-bg-panel);
  position: relative;
  border-radius: 6px;
  margin-left: 35px; /* Platz für die Linie links */
  border-left: 4px solid var(--tl-main-color);
  box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

.highlight-item .timeline-panel {
  border-left-color: var(--tl-accent-color);
  background: #fff8f8; /* Leicht rötlich-warmer Wohlfühl-Hintergrund für das große Jubiläum */
}

/* Jahreszahlen */
.timeline-year {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tl-main-color);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.timeline-year.color-accent {
  color: var(--tl-accent-color);
}

/* Zitate / Highlights im Text */
.timeline-quote {
  font-style: italic;
  border-left: 3px solid var(--tl-main-color);
  padding-left: 15px;
  margin: 15px 0;
  color: #555555;
}

.timeline-quote.border-accent {
  border-left-color: var(--tl-accent-color);
}

/* --- GROSSE BILDSCHIRME (Desktop-Ansicht zentrieren) --- */
@media (min-width: 768px) {
  .timeline::after {
    left: 50%; /* Linie exakt in die Mitte */
  }
  
  .timeline-item {
    width: 50%;
    margin-bottom: 0;
  }
  
  /* Jedes zweite Element nach links spiegeln */
  .timeline-item:nth-child(even) {
    left: 0;
  }
  
  .timeline-item:nth-child(odd) {
    left: 50%;
  }
  
  .timeline-badge {
    left: 50%;
  }
  
  .timeline-item:nth-child(even) .timeline-panel {
    margin-left: 0;
    margin-right: 35px;
    text-align: right;
    border-left: none;
    border-right: 4px solid var(--tl-main-color);
  }
  
  .timeline-item:nth-child(even).highlight-item .timeline-panel {
    border-right-color: var(--tl-accent-color);
  }

  .timeline-item:nth-child(even) .timeline-quote {
    border-left: none;
    border-right: 3px solid var(--tl-main-color);
    padding-left: 0;
    padding-right: 15px;
  }
  
  .timeline-item:nth-child(even) .timeline-quote.border-accent {
    border-right-color: var(--tl-accent-color);
  }

  .timeline-item:nth-child(odd) .timeline-panel {
    margin-left: 35px;
  }
  
  /* Versetztes Padding für saubere Abstände im Zick-Zack */
  .timeline-item:nth-child(even) {
    padding: 20px 40px 20px 0;
  }
  
  .timeline-item:nth-child(odd) {
    padding: 20px 0 20px 40px;
  }
}



/* ==========================================================================
   15. Design CTA Aufruf
   ========================================================================== */

/* --- EDLER CONTACT CALL TO ACTION --- */

.cta-banner-box {
  background-color: #286baf; /* Ihre Hauptfarbe Blau */
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(40, 107, 175, 0.15);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Dezenter, gemütlicher Lichteffekt im Hintergrund */
.cta-banner-box::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  z-index: -1;
}

/* Texte im Banner */
.cta-title {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0;
}

.cta-lead {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.1rem;
  font-weight: 300;
}

/* Der edle Akzent-Button */
.btn-cta-action {
  background-color: #db0d13; /* Ihre Akzentfarbe Rot */
  color: #ffffff !important;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 5px;
  border: 2px solid #db0d13;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease-in-out;
  display: inline-block;
  box-shadow: 0 4px 15px rgba(219, 13, 19, 0.3);
}

/* Hover-Effekt für den Button */
.btn-cta-action:hover, 
.btn-cta-action:focus {
  background-color: #ffffff;
  color: #db0d13 !important;
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Optimierung für kleinere Bildschirme */
@media (max-width: 991.98px) {
  .cta-title {
    font-size: 1.4rem;
  }
  .btn-cta-action {
    width: 100%; /* Button wird mobil vollflächig für bessere Klickbarkeit */
    max-width: 320px;
  }
}