/* =========================================================
   GRUNDEINSTELLUNGEN
   ========================================================= */

/*
    box-sizing sorgt dafür, dass Padding und Rahmen
    in der angegebenen Breite eines Elements enthalten sind.
*/
* {
    box-sizing: border-box;
}


/*
    Sanftes Scrollen bei internen Links wie #kontakt.
*/
html {
    scroll-behavior: smooth;
}


/*
    Grundgestaltung der gesamten Webseite.
*/
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #222222;
    background-color: #f5f5f5;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    color: #155fa0;
}

a:hover,
a:focus {
    color: #0b3c68;
}


/* =========================================================
   ALLGEMEINE INHALTSBREITE
   ========================================================= */

/*
    Der Inhalt erhält eine maximale Breite.
    Dadurch wird Text auf großen Monitoren nicht unnötig breit.
*/
.content-container,
.header-container,
.footer-container,
.three-column-container {
    width: min(1200px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.site-header {
    background-color: #ffffff;
    border-bottom: 1px solid #dddddd;
}


/*
    Logo und Navigation werden nebeneinander angeordnet.
*/
.header-container {
    min-height: 70px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


/* Name beziehungsweise Logo der Webseite */
.logo {
    color: #222222;
    font-size: 1.25rem;
    font-weight: bold;
    text-decoration: none;
}


/* =========================================================
   HAUPTNAVIGATION
   ========================================================= */

.main-navigation ul {
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;

    gap: 10px;

    list-style: none;
}


.main-navigation a {
    display: block;

    padding: 10px 14px;

    color: #222222;
    text-decoration: none;

    border-radius: 4px;
}


.main-navigation a:hover,
.main-navigation a:focus {
    background-color: #eeeeee;
}


/* =========================================================
   MOBILER MENÜBUTTON
   ========================================================= */

/*
    Der Menübutton ist auf großen Bildschirmen nicht sichtbar.
*/
.menu-button {
    display: none;

    padding: 10px 15px;

    font: inherit;
    font-weight: bold;

    color: #ffffff;
    background-color: #155fa0;

    border: 0;
    border-radius: 4px;

    cursor: pointer;
}


.menu-button:hover,
.menu-button:focus {
    background-color: #0b3c68;
}


/* =========================================================
   EINLEITUNGSBEREICH
   ========================================================= */

.intro {
    padding: 70px 0;

    text-align: center;

    background-color: #e9eef3;
}


.intro h1 {
    margin-top: 0;
    margin-bottom: 20px;

    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.2;
}


.intro p {
    max-width: 750px;

    margin-left: auto;
    margin-right: auto;

    font-size: 1.1rem;
}


/* =========================================================
   DREI SPALTEN
   ========================================================= */

.three-column-section {
    padding: 60px 0;
}


/*
    CSS Grid erstellt die drei gleich großen Spalten.
*/
.three-column-container {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 25px;
}


/*
    Gestaltung einer einzelnen Spalte.
*/
.content-column {
    padding: 30px;

    background-color: #ffffff;

    border: 1px solid #dddddd;
    border-radius: 6px;
}


.content-column h2 {
    margin-top: 0;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
    display: inline-block;

    margin-top: 10px;
    padding: 10px 18px;

    color: #ffffff;
    background-color: #155fa0;

    text-decoration: none;

    border-radius: 4px;
}


.button:hover,
.button:focus {
    color: #ffffff;
    background-color: #0b3c68;
}


/* =========================================================
   KONTAKTBEREICH
   ========================================================= */

.contact-section {
    padding: 60px 0;

    background-color: #ffffff;
}


.contact-section h2 {
    margin-top: 0;
}


/* =========================================================
   IMPRESSUM
   ========================================================= */

.legal-section {
    min-height: 60vh;

    padding: 60px 0;

    background-color: #ffffff;
}


.legal-section h1 {
    margin-top: 0;
}


.legal-section h2 {
    margin-top: 35px;
}


.back-link {
    margin-top: 40px;
}


/* =========================================================
   FUSSBEREICH / FOOTER
   ========================================================= */

.site-footer {
    padding: 25px 0;

    color: #ffffff;
    background-color: #222222;
}


.footer-container {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.site-footer p {
    margin: 0;
}


.site-footer a {
    color: #ffffff;
}


.site-footer a:hover,
.site-footer a:focus {
    text-decoration: none;
}


/* =========================================================
   TABLET
   ========================================================= */

/*
    Unterhalb von 900 Pixeln werden aus drei Spalten
    zunächst zwei Spalten.
*/
@media (max-width: 900px) {

    .three-column-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

/*
    Unterhalb von 650 Pixeln erfolgt die Darstellung
    für Smartphones.
*/
@media (max-width: 650px) {

    /*
        Etwas weniger Abstand zum Bildschirmrand.
    */
    .content-container,
    .header-container,
    .footer-container,
    .three-column-container {
        width: min(100% - 30px, 1200px);
    }


    /* Mobiler Menübutton wird eingeblendet */
    .menu-button {
        display: block;
    }


    /*
        Navigation wird auf dem Smartphone zunächst ausgeblendet.
        JavaScript fügt bei Bedarf die Klasse .is-open hinzu.
    */
    .main-navigation {
        display: none;

        width: 100%;
    }


    /*
        Sichtbare mobile Navigation.
    */
    .main-navigation.is-open {
        display: block;
    }


    /*
        Header darf auf dem Smartphone umbrechen.
    */
    .header-container {
        padding: 15px 0;

        flex-wrap: wrap;
    }


    /*
        Navigationspunkte werden untereinander dargestellt.
    */
    .main-navigation ul {
        flex-direction: column;
        align-items: stretch;

        gap: 5px;
    }


    .main-navigation a {
        padding: 12px;

        background-color: #f3f3f3;
    }


    /*
        Die drei Spalten werden zu einer Spalte.
    */
    .three-column-container {
        grid-template-columns: 1fr;
    }


    /* Etwas kompakterer Startbereich */
    .intro {
        padding: 50px 0;
    }


    /*
        Footer-Elemente werden auf kleinen Bildschirmen
        untereinander dargestellt.
    */
    .footer-container {
        flex-direction: column;
        align-items: flex-start;
    }

}


/* =========================================================
   BARRIEREARMUT / TASTATURBEDIENUNG
   ========================================================= */

/*
    Gut sichtbare Markierung, wenn Links oder Buttons
    mit der Tastatur ausgewählt werden.
*/
a:focus-visible,
button:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 3px;
}

/* =========================================================
   FIRMENSEITEN
   ========================================================= */


/* ---------------------------------------------------------
   Oberer Firmenbereich
   --------------------------------------------------------- */

.company-hero {
    padding: 60px 0;

    background-color: #e9eef3;
}


/*
    Auf dem PC stehen Text und Titelbild nebeneinander.
*/
.company-hero-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

    align-items: center;
}


/* Kleine Beschriftung oberhalb der Überschrift */
.company-label {
    margin-bottom: 5px;

    font-weight: bold;

    color: #155fa0;
}


.company-hero-content h1 {
    margin-top: 0;

    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.2;
}


/* Titelbild */
.company-hero-image img {
    display: block;

    width: 100%;
    height: 380px;

    object-fit: cover;

    border-radius: 6px;
}


/* =========================================================
   ALLGEMEINE FIRMENABSCHNITTE
   ========================================================= */

.company-section {
    padding: 60px 0;

    background-color: #ffffff;
}


/* Alternativer grauer Hintergrund */
.company-section-gray {
    background-color: #f1f1f1;
}


/*
    Zwei Spalten für Bild und Text.
*/
.company-two-column {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

    align-items: center;
}


/* Bilder innerhalb der Inhaltsbereiche */
.company-image img {
    display: block;

    width: 100%;
    height: 350px;

    object-fit: cover;

    border-radius: 6px;
}


.company-text h2 {
    margin-top: 0;
}


/* =========================================================
   LEISTUNGEN
   ========================================================= */

.section-title {
    margin-top: 0;
    margin-bottom: 35px;

    text-align: center;
}


.company-services {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 25px;
}


/* Einzelne Leistung */
.company-service {
    padding: 25px;

    background-color: #ffffff;

    border: 1px solid #dddddd;
    border-radius: 6px;
}


.company-service h3 {
    margin-top: 0;
}


/* =========================================================
   GROSSES BILD
   ========================================================= */

.company-large-image img {
    display: block;

    width: 100%;

    max-height: 550px;

    object-fit: cover;

    border-radius: 6px;
}


.company-image-description {
    margin-top: 15px;

    text-align: center;
}


/* =========================================================
   KONTAKTBEREICH
   ========================================================= */

.company-contact {
    padding: 60px 0;

    background-color: #ffffff;
}


.company-contact h2 {
    margin-top: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    /*
        Leistungen werden auf Tablets zweispaltig.
    */
    .company-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 650px) {

    /*
        Titelbild und Text werden untereinander dargestellt.
    */
    .company-hero-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    /*
        Auch normale Bild-/Textbereiche werden einspaltig.
    */
    .company-two-column {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    /*
        Leistungen werden untereinander dargestellt.
    */
    .company-services {
        grid-template-columns: 1fr;
    }


    /*
        Bilder erhalten auf kleinen Bildschirmen
        keine feste Höhe mehr.
    */
    .company-hero-image img,
    .company-image img {
        height: auto;
    }


    /*
        Abstände etwas verkleinern.
    */
    .company-hero,
    .company-section,
    .company-contact {
        padding: 40px 0;
    }

}