/* 1. DIE BLITZEBLANKE LOGO- UND MENÜZEILE (Ganz nach oben schieben) */
#sp-header, 
#sp-header .container, 
#sp-header .row, 
#sp-header .sp-column,
.logo, 
.logo a, 
.logo img,
.sp-megamenu-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    line-height: normal !important; /* Verhindert künstliche Zeilenhöhen */
}

/* 2. DAS HAUPTMENÜ (Alle 9 Punkte in einer Reihe halten) */
.sp-megamenu-parent > li > a {
    padding: 0 7px !important;  /* Schiebt die Wörter perfekt zusammen */
    font-size: 14px !important; /* Behält die kompakte Schriftgröße bei */
    line-height: 30px !important; /* Richtet die Schrift mittig zur Logo-Höhe aus */
    font-weight: bold;
    color: #094b6d;
}

/* Das Menü bündig an den rechten Rand zwingen */
.sp-megamenu-parent {
    float: left !important;
}

/* 3. DER BLADE TITELBALKEN (Komplett bereinigt und zusammengefasst) */
.page-header {
    background-color: #1e3b5c !important; /* Ihr Firmen-Dunkelblau */
    padding: 15px 0 !important;
    text-align: center !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    box-sizing: border-box !important;
    display: block !important;
    clear: both !important;
    
    /* ABSTÄNDE: Oben bündig ans Menü docken, unten 45px Platz zum Bild schaffen */
    margin-top: 0 !important; 
}

/* Die Schrift im blauen Balken zentriert und weiß darstellen */
.page-header h1 {
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: bold !important;
    margin: 0 !important;
    text-align: center !important;
}

/* 4. DAS BAUSTELLEN-BILD (Zwingen, den Abstand nach oben einzuhalten) */
#sp-main-body, 
.com-sppagebuilder {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px !important;
    }
}

/* Das exakte Eisblau aus dem Logo für den Button erzwingen */
.eisblau-btn .sppb-btn {
    background-color: #00a2e8 !important; /* Wasser-Eisblau aus dem Logo */
    border-color: #00a2e8 !important;     /* Passender Rahmen */
    color: #ffffff !important;            /* Textfarbe Reinweiß */
    font-weight: bold !important;         /* Fette Schrift für gute Lesbarkeit */
}

/* Hover-Effekt: Wird beim Überfliegen mit der Maus harmonisch dunkler */
.eisblau-btn .sppb-btn:hover {
    background-color: #008cd4 !important; /* Dunkleres Blau beim Drüberfahren */
    border-color: #008cd4 !important;
}

/* Dem fixierten Menüband beim Scrollen mehr Höhe und Luft geben */
.sticky-header #sp-header {
    height: 100px !important; /* Vergrößert die Gesamthöhe des weißen Balkens */
    padding: 10px 0 !important; /* Schafft Innenabstand oben und unten */
}

/* Die Menüpunkte im fixierten Zustand perfekt vertikal zentrieren */
.sticky-header .sp-megamenu-parent > li > a {
    line-height: 30px !important; /* Richtet die Schrift mittig zur neuen Höhe aus */
}

/* Verhindert, dass das Logo im klebrigen Header in 3 Zeilen gequetscht wird */
.sticky-header .logo img {
    max-height: 80px !important; /* Hält das Logo auf einer gesunden Größe */
    width: auto !important;
}


/* 1. Die langen Textblöcke UNTEN linksbündig ausrichten (Maximale Erfassung) */
.com-sppagebuilder .sppb-addon-text, 
.com-sppagebuilder .sppb-addon-text *,
.com-sppagebuilder p,
.com-sppagebuilder span {
    text-align: left !important;
    font-size: 15px !important;    /* Schriftgröße leicht angehoben */
    line-height: 1.6 !important;   /* Mehr Zeilenabstand */
    max-width: 820px !important;   /* Begrenzt die Breite auf PCs */
    margin-left: auto !important;  /* Zentriert die Textbox als Ganzes auf der Seite */
    margin-right: auto !important;
    }

/* 2. Den oberen Einleitungstext (Call to Action) ZENTRIERT RETTEN */
.sppb-addon-cta, 
.sppb-addon-cta .sppb-cta-title, 
.sppb-addon-cta .sppb-cta-subtitle, 
.sppb-addon-cta p,
.sppb-addon-cta span {
    text-align: center !important; /* Zwingt den Text auf dem Bild zurück in die Mitte */
    color: #ffffff !important;     /* Macht die Schrift wieder sauber weiß */
    max-width: 100% !important;   /* Erlaubt dem Banner die volle Breite */
}

/* 3. Die großen Hauptüberschriften (H2) perfekt dazu ausrichten */
.com-sppagebuilder h2 {
    text-align: center !important; /* Die Hauptbereiche bleiben zentriert */
    color: #1e3b5c !important;     /* Firmen-Dunkelblau */
    font-weight: bold !important;
    margin-top: 50px !important;   
    margin-bottom: 30px !important;
}

/* 4. Die FAQ-Fragen (H3 / H4) massiv aufwerten */
.com-sppagebuilder .sppb-addon-title {
    text-align: left !important;   /* Fragen werden linksbündig passend zum Text darunter */
    color: #1e3b5c !important;     /* Nutzen Ihr starkes Firmen-Dunkelblau */
    font-weight: bold !important;  /* Schön fett gedruckt */
    max-width: 820px !important;   /* Gleiche Breite wie der Text darunter */
    margin-left: auto !important;  /* Als Box zentriert */
    margin-right: auto !important;
    margin-top: 30px;
    margin-bottom:20px;
}


.kontakt-overlay {
	padding:30px !important;
	color:#ffffff !important;
}

.com-sppagebuilder .sppb-addon-text {
	padding:20px !important;
}

.kontakt-overlay .sppb-addon-content * {
	color: white !important;
	max-width:100% !important;
}

.kontakt-overlay .sppb-addon-text * {
	text-align:center !important;
	font-size: 30px !important;
}


.com-sppagebuilder .sppb-addon-text h3 {
	font-weight: bold !important;
}

#sp-top-bar {
	width:100% !important;
	padding:0px !important;
}


/* 1. Infoleiste über die komplette Bildschirmbreite strecken */
#sp-top-bar {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

#sp-top-bar .container, 
#sp-top-bar .row {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Alle inneren Container und Module auf volle Breite setzen */
#sp-top1,
#sp-top1 .sp-column,
#sp-top1 .sp-module,
#sp-top1 .sp-module-content,
#sp-top1 .mod-custom {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. Styling des inneren Inhalt-Blocks (Hintergrund, Abstände, Textausrichtung) */
#sp-top1 .mod-custom > div {
  background-color: #1e3b5c !important;
  color: #ffffff !important;
  padding: 10px !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 4. Optimierung für Mobilgeräte (Zentrierung & Zeilenabstand beim Umbrechen) */
@media (max-width: 767px) {
  #sp-top1 .mod-custom > div {
    font-size: 13px !important;
    line-height: 1.8 !important;
  }
}


#sp-menu .sp-column {
	margin-top:20px !important;
}

#offcanvas-toggler {
	line-height:47px !important;
}