/* ==========================================================================
   FLIESEN STELZER – FINALE MASTER-CSS: SMART-STICKY & MOBILE PERFECTION
   ========================================================================== */

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

/* --- 1. GLOBALE BASIS & ARCHITEKTUR --- */
body {
  font-family: 'Open Sans', sans-serif;
  background-color: #f4f6f9 !important;
  color: #333333;
  line-height: 1.65;
}

.site-grid, .main-content, .container-component, main {
  max-width: 1180px !important;
  margin: 0 auto;
}

/* Weiße Hauptbox für den Inhalt (Desktop-Ansicht) */
.com-content-article, article, main .view-article, .phoca-gallery-view {
  background: #ffffff !important;
  padding: 3rem 2.5rem !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(25, 28, 36, 0.04) !important;
  margin-top: 2rem !important;
  margin-bottom: 5rem !important;
}

/* --- 2. FIXED HEADER (Standardmäßig aktiv für PC/Laptop) --- */
header.header, .header, div.header-blended {
  position: relative !important;
  position: -webkit-sticky !important;
  top: 0 !important;
  z-index: 1040 !important; 
  
  /* 📸 HIER WIRD DAS BILD GELADEN + dunkler Farbverlauf für perfekte Lesbarkeit */
  background: linear-gradient(rgba(25, 30, 36, 0.75), rgba(25, 30, 36, 0.9)), 
              url('/images/header-bg.jpg') no-repeat center center !important;
  background-size: cover !important; /* Streckt das Bild über den gesamten Header */
  
  padding: 1.5rem 0 0 0 !important; /* Etwas mehr Platz nach oben */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  border-bottom: 3px solid #d4af37 !important; 
}

/* Kontaktleiste im Header */
.header::after {
  content: "📞 +43 3579 2195  |  ✉️ office@fliesen-stelzer.at";
  display: block;
  text-align: right;
  color: #d4af37 !important;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  letter-spacing: 0.5px;
  background: rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   TITEL- & MENÜ-BOOST: MAXIMALE GRÖSSE & FORCE-OVERRIDE
   ========================================================================== */

/* 1. Der Haupttitel "Fliesen Stelzer" - Jetzt massiv, dominant und ultra-fett */
.site-title, 
.brand-title, 
.site-name, 
.site-name a, 
.navbar-brand, 
a.navbar-brand, 
.navbar-brand .site-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 3.4rem !important;       /* Riesiges Upgrade auf ca. 54px – absolut unübersehbar! */
  font-weight: 900 !important;       /* Maximaler Härtegrad (Black / Ultra-Bold) */
  color: #ffffff !important;         /* Strahlendes Weiß */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5) !important; /* Dezenter Schatten für maximale Tiefe */
  letter-spacing: 1.5px !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 25px !important;       /* Mehr Freiraum zum Logo-Bild */
  margin-bottom: 25px !important;    /* Mehr Freiraum zum Menü */
  text-transform: none !important;
}

/* 2. Die Menüpunkte - Spürbar größer, dick gedruckt und kontraststark */
.metismenu .nav-link, 
.navbar-nav .nav-link, 
.navbar-nav a, 
.mod-menu .nav-link {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.35rem !important;     /* Deutlich angehoben (ca. 22px) – perfekt lesbar */
  font-weight: 800 !important;       /* Extra-Fett, steht stabil unter dem Haupttitel */
  color: #ffffff !important;         /* Auf reines Weiß gewechselt für harten Kontrast */
  padding: 1rem 2rem !important;     /* Großzügige Klickflächen */
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all 0.2s ease;
}

/* Edler Hover-Effekt für die neuen, großen Menüpunkte */
.navbar-nav .nav-link:hover, .navbar-nav .nav-item.active .nav-link {
  color: #d4af37 !important;
  background: rgba(212, 175, 55, 0.12) !important;
}

/* ==========================================================================
   3. MOBILE ABSICHERUNG (Damit auf dem Handy nichts bricht)
   ========================================================================== */
@media (max-width: 768px) {
  /* Verhindert, dass der riesige Titel auf Smartphones den Bildschirm sprengt */
  .site-title, .brand-title, .site-name, .site-name a, .navbar-brand, a.navbar-brand {
    font-size: 1.8rem !important;    /* Gesundes, angepasstes Maß für Touchscreens */
    font-weight: 800 !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  
  /* Kompaktes, sauberes Daumen-Menü für die mobile Ansicht */
  .metismenu .nav-link, .navbar-nav .nav-link, .navbar-nav a {
    font-size: 1.1rem !important;
    padding: 0.8rem 1rem !important;
    text-align: center !important;
  }
}

/* Navigationsleiste */
.navbar { 
  background: #222933 !important; 
  padding: 0 !important; 
}
.navbar-nav .nav-link {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  padding: 1rem 1.2rem !important;
  text-transform: uppercase !important;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-item.active .nav-link {
  color: #d4af37 !important;
  background: rgba(212, 175, 55, 0.08) !important;
}

/* --- 3. PHOCA GALLERY TEXT-KILLER --- */
.pg-cv-name, .pg-item-box .small, .pg-cv-name a, #pg-msnr-container-a1-p1 .small,
.pg-item-box figure ~ div, .pg-item-box a ~ div, .pg-item-box figure ~ span, .pg-item-box a ~ span {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
}

.pg-item-box figure, .pg-item-box a, .pg-item-box img,
.pg-cv-box figure, .pg-cv-box a, .pg-cv-box img, .pg-box-img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

.pg-item-box, .pg-cv-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 0.5rem !important;
}
.pg-item-box img, .pg-cv-box img {
  border-radius: 4px !important;
  width: 100% !important;
  height: auto !important;
}

/* --- 4. STRUKTUR- & DESIGN-ELEMENTE --- */
.custom-card {
  background: #f8f9fa;
  border-left: 4px solid #191e24;
  border-radius: 6px;
  padding: 1.5rem;
}
.custom-card.accent {
  border-left-color: #d4af37;
  background: #fdfcf7;
}

.premium-btn {
  display: inline-block;
  background: #191e24;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  padding: 0.75rem 1.7rem;
  border-radius: 4px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.premium-btn:hover { 
  background: #d4af37; 
  color: #191e24 !important; 
}

h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif !important; color: #191e24 !important; font-weight: 700 !important; }
.section-title::after { content: ""; display: block; width: 50px; height: 3px; background: #d4af37; margin-top: 0.5rem; }

.premium-list { list-style: none !important; padding-left: 0 !important; }
.premium-list li { position: relative; padding-left: 1.8rem !important; margin-bottom: 0.6rem !important; }
.premium-list li::before { content: "✓"; position: absolute; left: 0; color: #28a745; font-weight: 700; }

.cta-banner {
  background: linear-gradient(135deg, #191e24 0%, #222933 100%);
  color: #ffffff;
  padding: 2.5rem 2rem;
  border-radius: 8px;
  border-bottom: 4px solid #d4af37;
}
.cta-banner h3 { color: #d4af37 !important; }
hr { border-top: 1px solid #eaeaea; opacity: 1; margin: 2.5rem 0; }


/* ==========================================================================
   5. MOBILE PERFEKTION (Spezial-Anpassungen für Smartphones)
   ========================================================================== */
@media (max-width: 768px) {
  
  /* 🚨 HANDY-RETTER: Schaltet das Festkleben NUR auf Smartphones ab */
  header.header, .header, div.header-blended {
    position: relative !important; 
    top: auto !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }
  
  /* Maximaler Platz für Inhalte auf kleinen Screens */
  .com-content-article, article, main .view-article, .phoca-gallery-view {
    padding: 1.5rem 1.1rem !important;
    margin-top: 1rem !important;
    margin-bottom: 2rem !important;
    border-radius: 8px !important;
  }
  
  /* Zentriert Kontaktdaten harmonisch im oberen Bereich */
  .header::after {
    text-align: center !important;
    font-size: 0.8rem !important;
    padding: 0.6rem 0.5rem !important;
    line-height: 1.5;
  }
  
  .site-name, .site-name a, .navbar-brand, a.navbar-brand {
    font-size: 1.4rem !important;
    text-align: center !important;
    display: block !important;
    padding: 0.5rem 0 !important;
  }
  
  /* Macht das mobile Hamburger-Menü leicht zu treffen */
  .navbar-toggler {
    margin: 0.5rem auto !important;
    display: block !important;
    border-color: #d4af37 !important;
    background-color: rgba(212, 175, 55, 0.1) !important;
  }
  
  /* Textgrößen-Korrektur gegen unschöne Wortumbrüche */
  h1, .fs-3 { font-size: 1.45rem !important; }
  h2, .section-title { font-size: 1.3rem !important; }
  h3 { font-size: 1.1rem !important; }
  
  /* Bild-Kacheln: Exakt 2 Bilder nebeneinander ohne Quetschen */
  #pg-msnr-container-a1-p1, .phoca-gallery-view {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  
  .pg-item-box, .pg-cv-box {
    max-width: 47% !important; 
    flex: 1 1 45% !important;
    padding: 0.3rem !important;
  }
  
  /* Tasten-Optimierung: Buttons werden auf dem Handy zu großen Touch-Flächen */
  .premium-btn {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0.9rem 1rem !important;
    font-size: 0.95rem !important;
  }
  
  .custom-card {
    margin-bottom: 1rem;
    padding: 1.25rem;
  }
}
/* ==========================================================================
   1. LOGO-MAXIMIERUNG (Für große Bildschirme / PC)
   ========================================================================== */
.navbar-brand img, .brand-logo img {
  max-height: 185px !important; /* Von 130px auf 185px erhöht – für maximale Sichtbarkeit! */
  width: auto !important;
  height: auto !important;
  margin-top: 10px !important;
  margin-bottom: 15px !important;
  display: inline-block !important;
}

/* Symmetrischer Abstand für den gesamten Logo-Bereich */
.navbar-brand {
  padding-top: 1rem !important;
  padding-bottom: 0.5rem !important;
  width: 100% !important;
  text-align: center !important; /* Zentriert den Logo-Behälter */
}

/* ==========================================================================
   2. KONTAKTDATEN (TELEFON & E-MAIL) PERFEKT ZENTRIEREN
   ========================================================================== */
/* Hebt die standardmäßige Rechtsausrichtung im Cassiopeia-Header auf und zentriert den Inhalt */
.header .mod-custom,
.header [class*="custom"],
.header .header-right,
.container-topbar {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  margin: 12px auto 8px auto !important;
  clear: both !important;
}

/* Falls die Daten im Modul als Flex-Elemente angelegt sind, werden sie hiermit mittig ausgerichtet */
.header .mod-custom > div,
.header [class*="custom"] > div,
.header .mod-custom p,
.header [class*="custom"] p {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important; /* Angenehmer Abstand zwischen Telefonnummer und E-Mail-Adresse */
}

/* ==========================================================================
   3. ANPASSUNG FÜR SMARTPHONES (Damit nichts überlappt)
   ========================================================================== */
@media (max-width: 768px) {
  .navbar-brand img, .brand-logo img {
    max-height: 90px !important; /* Auf dem Handy kompakt und übersichtlich */
    margin: 0 auto !important;
    display: block !important;
  }
  
  .header .mod-custom > div,
  .header [class*="custom"] > div {
    gap: 10px !important; /* Etwas engerer Abstand auf Mobilgeräten */
  }
}
/* ==========================================================================
   MOBILE SKALIERUNG (Verhindert Textumbrüche auf dem Smartphone)
   ========================================================================== */
@media (max-width: 768px) {
  /* Skaliert den Haupttitel auf Handys auf ein gesundes Maß herunter */
  .site-name, .site-name a, .navbar-brand, a.navbar-brand {
    font-size: 1.6rem !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  
  /* Macht das mobile Aufklapp-Menü auf dem Handy kompakt aber tippfreundlich */
  .navbar-nav .nav-link {
    font-size: 1.0rem !important;
    padding: 0.7rem 1rem !important;
    text-align: center !important;
  }
/* Sticky Header - Desktop DEAKTIVIERT */
@media (min-width: 769px) {
  .header.position-sticky.sticky-top,
  .sticky-top {
    position: static !important;
    top: unset !important;
  }
}

/* Sticky Header - Mobil AKTIVIERT */
@media (max-width: 768px) {
  .header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
  }
}