/*
 * gresser.ch – Statisches Layout (nach Original)
 * Farben/Layout aus Original-CSS übernommen, ohne Bootstrap
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Lato:wght@400;900&family=Open+Sans:wght@400;700&display=swap');

/* --- Variablen (Original-Farben) --- */
:root {
    --farbe-gruen: #2fa382;
    --farbe-links: #006b96;
    --farbe-hover: #298e70;
    --farbe-text: #666;
    --container-bg: rgba(250, 250, 250, 0.8);
    --weiss: #fff;
}

/* --- Basis --- */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--farbe-text);
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* Fullscreen-Hintergrund (Frottage) – wird pro Seite per inline style gesetzt */
#background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Äusserer Container, zentriert, max. 992px wie Original */
.container-fluid {
    max-width: 992px;
    margin: 0 auto;
    width: 100%;
    overflow-x: hidden;
}

/* --- Header: grüner Balken links (~42%), weisser Bereich rechts --- */
.header {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.header .topcolor {
    background-color: var(--farbe-gruen);
    min-height: 75px;
    flex: 0 0 41.666667%; /* col-sm-5 ≈ 5/12 */
    display: flex;
    align-items: center;
    padding: 15px;
}

.header .topcolor a {
    display: block;
    min-height: 75px;
    text-decoration: none;
    color: var(--weiss);
    font-family: 'DM Serif Display', serif;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.2;
}

.header .topcolor a:hover {
    color: var(--weiss);
}

.header .topcolor img {
    max-height: 45px;
    width: auto;
    display: block;
}

.header .header-right {
    flex: 1;
    min-height: 75px;
    background: transparent;
}

/* --- Karteikarten-Container: Sidebar links, Content rechts --- */
.contentcontainer {
    width: 100%;
    background-color: var(--container-bg);
    padding: 30px 15px 20px;
}

.content-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Sidebar-Navigation (links) */
aside.sidebar {
    flex: 0 0 25%; /* 3/12 */
    min-width: 180px;
}

nav.leftmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav.leftmenu {
    margin-top: 50px;
}

nav.leftmenu > ul > li {
    margin-bottom: 0.4em;
}

nav.leftmenu li a {
    display: block;
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    color: var(--farbe-links);
    letter-spacing: 1px;
    text-decoration: none;
    font-size: 1.2em;
    padding: 2px 0;
}

nav.leftmenu li a:hover,
nav.leftmenu li a.on {
    color: var(--farbe-hover);
}

nav.leftmenu ul.sub {
    margin-top: 8px;
    padding-left: 1em;
}

nav.leftmenu ul.sub li {
    margin-bottom: 0.2em;
}

/* Content-Bereich (rechts) */
main.content-area {
    flex: 1;
    min-width: 0;
}

main.content-area h1,
main.content-area h2,
main.content-area h3,
main.content-area h4,
main.content-area h5,
main.content-area h6 {
    margin: 0 0 10px 0;
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    color: var(--farbe-links);
    letter-spacing: 1px;
}

main.content-area h1 {
    margin-bottom: 15px;
}

main.content-area h2 {
    margin-top: 1.2em;
    margin-bottom: 8px;
}

main.content-area a {
    color: var(--farbe-links);
    text-decoration: none;
}

main.content-area a:hover {
    color: var(--farbe-gruen);
}

main.content-area p,
main.content-area li {
    line-height: 1.5em;
    letter-spacing: 0.2px;
    margin: 0 0 10px 0;
}

main.content-area ul,
main.content-area ol {
    margin: 0 0 10px 0;
    padding-left: 20px;
}

main.content-area li {
    padding-bottom: 0.4em;
}

/* Portrait-Seite: Bild + Text nebeneinander */
.normalrow {
    overflow: hidden;
}

.normalrow .bild {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
}

.normalrow .bild img {
    max-width: 100%;
    height: auto;
    display: block;
}

.normalrow .adresse {
    overflow: hidden;
}

hr.clear {
    clear: both;
    border: none;
    margin: 15px 0;
}

/* Kleine Schrift (Portrait) */
.klein {
    font-size: 0.95em;
}

/* --- Footer: grüner Balken links, Copyright rechts --- */
.footer {
    width: 100%;
    background: var(--weiss);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
}

.footer .topcolor {
    background-color: var(--farbe-gruen);
    min-height: 75px;
    flex: 0 0 41.666667%;
    padding: 15px;
}

.footer .topcolor p {
    color: var(--weiss);
    margin: 0;
}

.footer .contentright {
    flex: 1;
    padding: 15px 15px 20px;
}

.footer .copy {
    font-size: 0.8em;
    margin-top: 20px;
    color: var(--farbe-text);
}

/* Formulare (Kontakt) */
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    max-width: 400px;
    margin: 0 0 12px 0;
    padding: 8px;
    font-family: inherit;
    font-size: 1em;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* --- Responsive: Tablet --- */
@media (max-width: 992px) {
    .header .topcolor {
        flex: 0 0 50%;
    }

    .footer .topcolor {
        flex: 0 0 50%;
    }
}

/* Hamburger-Button: nur auf Mobile sichtbar */
.nav-toggle {
    display: none;
    background: var(--weiss);
    color: #555;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.5em;
    padding: 6px 12px;
    cursor: pointer;
    float: right;
    margin: 5px 0 10px;
}

.nav-toggle.open {
    background: #f0f0f0;
}

/* --- Responsive: Mobile --- */
@media (max-width: 768px) {
    .header .topcolor {
        flex: 1 1 100%;
    }

    .header .header-right {
        display: none;
    }

    .content-inner {
        flex-direction: column;
    }

    aside.sidebar {
        flex: 1 1 100%;
        margin-top: 0;
        padding-bottom: 10px;
    }

    .nav-toggle {
        display: block;
    }

    nav.leftmenu {
        display: none;
        margin-top: 0;
        clear: both;
    }

    nav.leftmenu.open {
        display: block;
    }

    .footer .topcolor {
        flex: 0 0 40%;
    }

    .footer .contentright {
        flex: 1;
    }

    .normalrow .bild {
        float: none;
        margin-right: 0;
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .contentcontainer {
        padding: 20px 12px;
    }

    .footer-inner {
        flex-direction: column;
    }

    .footer .topcolor {
        min-height: 50px;
    }
}