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

:root {
  --hb-navy:   #0f1e35;
  --hb-accent: #1c69d4;
  --hb-light:  #e8f0fb;
  --hb-gray:   #f4f6f9;
  --hb-white:  #ffffff;
  --hb-text:   #1a1a2e;
  --hb-muted:  #5a6478;
}

/* ── GLOBAL ── */
body { font-family: 'Barlow', sans-serif !important; color: var(--hb-text); }
h1,h2,h3,h4,h5,h6 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  color: var(--hb-navy);
}
a { color: var(--hb-accent); text-decoration: none; }
a:hover { color: var(--hb-navy); }

/* ── ARTIKEL-META AUSBLENDEN ── */
.article-info,
.com-content-article__info,
.com-content-article__details,
dl.article-info,
.item-page .article-info,
.com-content-article .article-info,
div[itemprop="articleBody"] + .article-info {
  display: none !important;
}

/* Artikel-Titel und "Details"-Überschrift ausblenden */
.item-page > h2,
.item-page > h1,
.page-header h1,
.com-content-article__title,
h2.com-content-article__title {
  display: none !important;
}

/* "Home" Seitentitel oben ausblenden */
#sp-main-body .page-header,
.com-content-category-blog .page-header,
.blog-featured .page-header {
  display: none !important;
}

/* ── LAYOUT: SIDEBAR VERSTECKEN, HAUPTINHALT VOLL ── */
/* Login-Modul und Main Menu Sidebar ausblenden für Besucher */
#sp-sidebar,
#sp-right,
.sidebar-right,
aside.sidebar,
.col-md-3.sidebar,
.com-content-article + aside {
  display: none !important;
}

/* Hauptinhalt auf volle Breite */
#sp-main-body,
.site-grid,
.row-fluid,
.com-content-article {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Cassiopeia Grid-Fix: Nur Content, kein Sidebar */
.site-grid {
  grid-template-columns: 1fr !important;
  grid-template-areas: "banner" "top-a" "top-b" "main" "bottom-a" "bottom-b" "footer" !important;
}

/* Artikel-Padding entfernen damit Hero-Bleed funktioniert */
.item-page,
.com-content-article__body {
  padding: 0 !important;
  overflow: visible !important;
}

/* Content-Container volle Breite */
.container-main,
#content,
.row.g-0 {
  max-width: 100% !important;
  padding: 0 !important;
}

/* ── HEADER ── */
#sp-header, header.header, .header {
  background: var(--hb-white) !important;
  border-bottom: 3px solid var(--hb-accent) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  padding: 0 !important;
}

/* Logo */
.navbar-brand img, #sp-logo img, .site-logo img {
  max-height: 56px !important;
  width: auto !important;
}
/* Falls kein Bild-Logo: Text-Fallback */
.navbar-brand, #sp-logo a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  color: var(--hb-navy) !important;
  text-transform: uppercase;
}

/* ── NAVIGATION ── */
.navbar, #sp-menu .navbar {
  background: transparent !important;
  border: none !important;
}
.navbar-nav > li > a,
.nav-item .nav-link {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--hb-text) !important;
  padding: 8px 14px !important;
  border-radius: 2px;
  transition: all 0.2s;
}
.navbar-nav > li > a:hover,
.nav-item .nav-link:hover,
.nav-item.active .nav-link {
  background: var(--hb-light) !important;
  color: var(--hb-accent) !important;
}
.navbar-nav > li:last-child > a,
.nav-item:last-child .nav-link {
  background: var(--hb-accent) !important;
  color: white !important;
  padding: 8px 18px !important;
  margin-left: 8px;
}
.navbar-nav > li:last-child > a:hover,
.nav-item:last-child .nav-link:hover {
  background: var(--hb-navy) !important;
  color: white !important;
}
.dropdown-menu {
  border: none !important;
  border-top: 3px solid var(--hb-accent) !important;
  border-radius: 0 0 4px 4px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
.dropdown-item:hover { background: var(--hb-light) !important; color: var(--hb-accent) !important; }

/* ── BREADCRUMB ── */
#sp-breadcrumbs, nav[aria-label="breadcrumb"] {
  background: var(--hb-gray) !important;
  border-bottom: 1px solid #dde4ef;
  padding: 10px 24px;
}
.breadcrumb { margin: 0; background: transparent; }
.breadcrumb-item, .breadcrumb-item a { font-size: 13px; color: var(--hb-muted); }
.breadcrumb-item.active { color: var(--hb-accent); }

/* ── MODUL-TITEL ── */
.moduletable h3, .mod-title, .module-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-transform: uppercase !important;
  color: var(--hb-navy) !important;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--hb-accent);
  margin-bottom: 16px !important;
}

/* ── BUTTONS & FORMS ── */
.btn-primary, button[type="submit"], input[type="submit"] {
  background: var(--hb-accent) !important;
  border-color: var(--hb-accent) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  padding: 10px 24px !important;
}
.btn-primary:hover, button[type="submit"]:hover {
  background: var(--hb-navy) !important;
  border-color: var(--hb-navy) !important;
  color: white !important;
}
.form-control, input[type="text"], input[type="email"],
input[type="password"], textarea, select {
  border: 1px solid #cdd5e0 !important;
  border-radius: 2px !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
}
.form-control:focus, input[type="text"]:focus,
input[type="email"]:focus, input[type="password"]:focus {
  border-color: var(--hb-accent) !important;
  box-shadow: 0 0 0 3px rgba(28,105,212,0.12) !important;
  outline: none;
}

/* ── FOOTER ── */
#sp-footer, footer.footer, .footer {
  background: #0a1526 !important;
  color: rgba(255,255,255,0.6) !important;
  border-top: 3px solid var(--hb-accent) !important;
  padding: 48px 0 20px !important;
}
#sp-footer a, footer a { color: rgba(255,255,255,0.6) !important; }
#sp-footer a:hover, footer a:hover { color: white !important; }
#sp-footer h3, footer h3,
#sp-footer .moduletable h3, footer .moduletable h3 {
  color: white !important;
  border-bottom-color: var(--hb-accent) !important;
}

/* ── TABELLEN ── */
.table th {
  background: var(--hb-navy) !important;
  color: white !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  border: none !important;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--hb-gray) !important; }

/* ── PAGINATION ── */
.pagination .page-link { color: var(--hb-accent); border-color: #dde4ef; }
.pagination .page-item.active .page-link {
  background: var(--hb-accent); border-color: var(--hb-accent);
}

/* ── INLINE-GRID FIX (Artikel-Inhalt) ── */
/* Damit die Leistungskarten-Grid und Hero voll über die Breite gehen */
.item-page [style*="grid-template-columns"],
.com-content-article__body [style*="grid-template-columns"] {
  width: calc(100% + 40px) !important;
  margin-left: -20px !important;
  margin-right: -20px !important;
}

/* ── MOBILE ── */
@media (max-width: 768px) {
  .navbar-collapse {
    background: var(--hb-white);
    border-top: 2px solid var(--hb-accent);
    padding: 12px 0;
  }
  .navbar-nav > li > a, .nav-item .nav-link {
    padding: 10px 20px !important;
    border-bottom: 1px solid #f0f3f8;
  }
  .navbar-nav > li:last-child > a,
  .nav-item:last-child .nav-link {
    margin: 8px 20px 4px !important;
  }
  [style*="grid-template-columns: repeat(3"] {
    display: block !important;
  }
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
  [style*="grid-template-columns: 1fr 1fr"] {
    display: block !important;
  }
}

/* ── BREADCRUMB KOMPLETT AUSBLENDEN ── */
#sp-breadcrumbs,
nav[aria-label="breadcrumb"],
.breadcrumb-wrapper,
.com-content-article nav.breadcrumb,
div.breadcrumb {
  display: none !important;
}

/* ── ARTIKEL-TITEL "STARTSEITE" AUSBLENDEN ── */
.item-page h2.com-content-article__title,
.item-page > h1,
.item-page > h2,
h2[itemprop="name"],
.page-header {
  display: none !important;
}

/* ── HERO: TEXT + BUTTONS ZENTRIEREN ── */
/* Der Hero-Div hat inline-style, wir überschreiben den inneren Bereich */
.item-page [style*="max-width:560px"],
.com-content-article__body [style*="max-width:560px"] {
  max-width: 720px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Buttons nebeneinander zentriert */
.item-page [style*="max-width:560px"] a,
.com-content-article__body [style*="max-width:560px"] a {
  display: inline-block !important;
}

/* Badge oben zentrieren */
.item-page [style*="max-width:560px"] span,
.com-content-article__body [style*="max-width:560px"] span {
  display: inline-block !important;
}

/* Hero-Hintergrund: Content zentrieren */
.item-page [style*="clip-path"] {
  display: none !important;
}

.item-page [style*="background:linear-gradient(100deg"],
.com-content-article__body [style*="background:linear-gradient(100deg"] {
  text-align: center !important;
}

.item-page [style*="background:linear-gradient(100deg"] > div[style*="position:relative"],
.com-content-article__body [style*="background:linear-gradient(100deg"] > div[style*="position:relative"] {
  max-width: 800px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* ── HB BUTTON FIX: Desktop nicht strecken ── */
.hb-btns {
  justify-content: center;
}
.hb-btn-primary,
.hb-btn-outline {
  flex: 0 0 auto !important;
  min-width: auto !important;
  width: auto !important;
}
@media (max-width: 768px) {
  .hb-btn-primary,
  .hb-btn-outline {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}