/* =========================
   Grundfarben
========================= */

:root {

    --blau:#003b63;
    --blau-hell:#005a8d;
    --weiss:#ffffff;
    --grau:#dddddd;
    --text:#222222;

}


/* =========================
   Allgemein
========================= */

* {

    box-sizing:border-box;

}


body {

  margin: 0;
     margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: Times, "Times New Roman", serif;

    background-image: url("../bilder/hintergrund.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;

}


/* =========================
   Header
========================= */

.header {

    background:var(--blau);

    color:white;

    padding:25px;

}


.site-title {

    max-width:1200px;

    margin:0 auto;

}


.site-title h1 {

    margin:0;

    font-size:2.2rem;

}


.site-title p {

    margin:5px 0 0;

    font-size:1.2rem;

}

.einleitung {

    font-size:1.2rem;
    font-weight:bold;
    color:var(--blau);

}



/* =========================
   Hauptnavigation
========================= */

.main-navigation {

    max-width:1200px;

    margin:15px auto 0;

}


.main-navigation ul {

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}


.main-navigation a {

    display:block;

    color:white;

    text-decoration:none;

    padding:10px 15px 10px 0;

}


.main-navigation a:hover,
.main-navigation .active {

    background:var(--blau-hell);

    padding-left:15px;

}


/* =========================
   Hauptbereich
========================= */

.page-container {

    max-width:1200px;

    margin:30px auto;

    display:grid;

    grid-template-columns:3fr 1fr;

    gap:25px;

    flex:1;

}


.content {

    background: rgba(250,248,250,0.94);

    padding:25px;

}




.content h2 {

    margin-top:0;

}


.content h3 {

     margin:20px 0 8px 0;


}


/* =========================
   Bilder im Inhalt
========================= */

.content img {

    max-width:100%;

    height:auto;

    border:1px solid #cccccc;

    padding:5px;

}


.bild-links {

    float:left;

    width:300px;

    margin:0 20px 10px 0;

}


.bild-rechts {

    float:right;

    width:300px;

    margin:0 0 10px 20px;

}

/* =========================
   Tabellen im Inhalt
========================= */

.content table {

    border-collapse:collapse;

 }


.content td {

    border:2px solid #000000;

    padding:7px;
    
    text-align:center;

    vertical-align:top;

}


/* =========================
   Sidebar
========================= */


.sidebar {

    display:flex;

    flex-direction:column;

}

.sidebar-box {

     background:rgba(250,248,250,0.94);

    border:1px solid #cccccc;

    border-radius:4px;

    padding:20px;

    margin-bottom:20px;

}


.sidebar-box h3 {

    margin-top:0;

    margin-bottom:15px;

    padding-bottom:8px;

    color:var(--blau);

    border-bottom:2px solid var(--blau);

}


.sidebar-box ul {

    list-style:none;

    padding:0;

    margin:0;

}


.sidebar-box li {

    margin-bottom:8px;

}


.sidebar-box a {

    display:block;

    color:var(--blau);

    text-decoration:none;

    padding:8px;

}


.sidebar-box a:hover {

    background:var(--blau-hell);

    color:white;

}



/* =========================
   Footer
========================= */

.footer {

    background:var(--blau);

    padding:20px;

    text-align:center;
    
    width:100%;

}


.footer a {

    color:white;

    text-decoration:none;

    margin:0 10px;

}


.footer a:hover {

    text-decoration:underline;

}

/* =========================
   Kontaktformular
========================= */

.kontakt-formular {

    display:flex;

    flex-direction:column;

    gap:10px;

}


.kontakt-formular label {

    font-weight:bold;

}


.kontakt-formular input,
.kontakt-formular textarea {

    width:100%;

    padding:10px;

    font-family:Times, "Times New Roman", serif;

    font-size:1rem;

    border:1px solid #cccccc;

}


.kontakt-formular textarea {

    resize:vertical;

}


.kontakt-formular .checkbox {

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:normal;

    text-align:left;

    width:100%;

}


.kontakt-formular .checkbox input {

    width:auto;

    margin:0;

}



.kontakt-formular button {

    width:fit-content;

    padding:10px 20px;

    background:var(--blau);

    color:white;

    border:none;

    cursor:pointer;

    font-family:Times, "Times New Roman", serif;

}


.kontakt-formular button:hover {

    background:var(--blau-hell);

}

/* =========================
   Handy Ansicht
========================= */

@media(max-width:800px) {

    body {

        background-attachment:scroll;

    }


    .page-container {

        display:flex;

        flex-direction:column;

    }


    .sidebar {

        display:contents;

    }


    .linkmenue {

        order:1;

    }


    .content {

        order:2;

    }


    .kontakt {

        order:3;

    }


    .footer a {

        display:block;

        margin:10px;

    }

}