/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

/* Formatierung Top-Bar ganz oben mit Email und Telefonnummer */
.top-bar-contact {
  background-color: #00284f; /* Blauer Hintergrund */
  color: #ffffff;
  padding: 8px 50px 8px 0;
  font-size: 20px;
}

.top-bar-contact .container {
  display: flex;
  justify-content: flex-end; /* Rechtsbündig */
  gap: 40px; /* Abstand hintereinander */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.top-bar-contact a {
  color: #ffffff;
  text-decoration: none;
}

.top-bar-contact a:hover {
  text-decoration: underline;
}

/* Logogröße im normalen Zustand (beim Laden der Seite) */
#header {
  padding-top: 10px;    /* Innenabstand oben */
}

#header .logo img, 
#header .logo svg {
    display: inherit;
    height: 100px; /* Standard ist ca. 42px – hier gewünschte Höhe eintragen */
    width: auto;  /* Hält das Seitenverhältnis stabil */
    padding-bottom: 10px; /* Innenabstand unten */ 
}


/* Maximale Breite für den gesamten Inhalt (inkl. Header und Footer) */
.container {
    max-width: 1600px; /* Gewünschte Breite einsetzen */
}

#header, 
.header-navigation, 
header.navbar, 
#header #navbar, 
.navigation-bar {
  border-bottom: 8px solid #00284f  !important;
  padding-bottom: 8px !important;
  display: block !important;
}



/* Erzeugt ein breiteres Layout und überschreibt das CSS-Framework */
.container, 
.grid-xl, 
.grid-lg, 
#body .container.grid-lg, 
#page-wrapper .container {
  max-width: 1600px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Verhindert, dass innere Spalten (Spaltsystem) die Weitung blockieren */
.columns {
  width: 100% !important;
}

/* Zwingt den inneren Body-Textbereich auf die maximale Breite von 1400px */
.page-content, 
.blog-content, 
.content-item, 
article, 
#body .container p, 
.content-wrapper .content {
  max-width: 1600px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Fügt das Bild direkt unter dem Header-Bereich ein */
#header, 
.header-navigation, 
header.navbar {
  margin-bottom: 0 !important; /* Verhindert Lücken */
}

/* Erstellt den Bild-Bereich direkt nach dem Header */
#header::after {
  content: "";
  display: block;
  width: 100%;
  height: 200px; /* Hier die gewünschte Höhe des Bildes einstellen */
  background-image: url('/user/themes/quark2/images/bannerbild-final.png') !important; /* Pfad zum Bild */
  background-size: cover;
  background-position: center;
}

/* Ändert die Hintergrundfarbe der gesamten Seite und aller Hauptbereiche auf Weiß */
body, 
#page-wrapper, 
#body-wrapper, 
.section, 
main {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Styling für die blaue Tabelle in Quark 2 */
.q2-blue-table table {
    background-color: #00284f;
    color: #ffffff;
}

.q2-blue-table th, 
.q2-blue-table td {
    background-color: #00284f;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Verhindert unschöne Hover-Effekte auf Zeilen */
.q2-blue-table tr:hover td {
    background-color: #00284f;
    color: #ffffff;
}