@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Myriad Pro', Arial, sans-serif;
    font-size: 1.5rem;
    line-height: 1.7;
    color: rgba(87, 87, 86);
}

/* Überschriften */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Myriad Pro', Arial, sans-serif;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(188, 23, 46);
}

header.container-header.full-width {
  background: url("/images/bilder/HeaderbildBauPaulNEU1200.jpg") center center / cover no-repeat !important;
  min-height: 470px !important;
}

.site-grid h1:first-of-type {
  display: none !important;
}

/* =====================================================
   BAUPAUL - LEISTUNGSÜBERSICHT
   ===================================================== */

.bauleistungen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 60px;
    align-items: start;
    width: 100%;
}


/* Einzelne Spalten */
.bauleistungen-spalte {
    min-width: 0;
}


/* Überschriften */
.bauleistungen-spalte h3 {
    margin: 0 0 12px 0;
    padding: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
}


/* Einführungstext */
.bauleistungen-einleitung {
    margin: 0 0 32px 0;
    line-height: 1.5;
}


/* Liste */
.bauleistungen ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* Einzelner Listenpunkt */
.bauleistungen li {
    position: relative;
    list-style: none;
    margin: 0 0 11px 0;
    padding-left: 32px;
    line-height: 1.45;
}


/* Ziegel-Icon */
.bauleistungen li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;

    width: 18px;
    height: 12px;

    background-image: url("/images/bilder/ziegel_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Tablet */
@media (max-width: 1000px) {

    .bauleistungen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 45px 40px;
    }
}


/* Smartphone */
@media (max-width: 700px) {

    .bauleistungen {
        grid-template-columns: 1fr;
        row-gap: 45px;
    }

    .bauleistungen-einleitung {
        margin-bottom: 24px;
    }
}

/* ==================================================
   HEADER BAUPAUL
   ================================================== */

/* Cassiopeia-Schriftzug vollständig ausblenden */
header.container-header .navbar-brand {
    display: none !important;
}


/* Headerbild */
header.container-header {
    position: relative !important;
    overflow: visible !important;

    /* Platz für das Menü unterhalb des Bildes */
    margin-bottom: 58px !important;
}


/* Menü aus dem Headerbild nach unten setzen */
header.container-header .container-nav {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: -58px !important;

    width: 100% !important;
    min-height: 58px;

    background: #ffffff !important;

    display: flex !important;
    align-items: center !important;

    padding-left: 10% !important;
    padding-right: 10% !important;

    z-index: 100;
}


/* Menü horizontal */
header.container-header .mod-menu {
    display: flex !important;
    flex-direction: row !important;
    gap: 35px;
    margin: 0 !important;
    padding: 0 !important;
}


/* Menüschrift */
header.container-header .mod-menu > li > a,
header.container-header .mod-menu > li > span {
    color: #000000 !important;
    font-size: 1.15rem !important;
    line-height: 58px !important;
    padding: 0 !important;
    text-decoration: none !important;
}


/* Auch aktiver Menüpunkt schwarz */
header.container-header .mod-menu > li.active > a,
header.container-header .mod-menu > li.current > a {
    color: #000000 !important;
}


/* Hover */
header.container-header .mod-menu > li > a:hover {
    color: #555555 !important;
}