/* CSS-Datei datenschutz.css */
/* Hintergrundbild */
/* ======================================
   BASIS (gilt für alle)
   ====================================== */

html,
body {
    height: 100%;
    margin: 0;
}

* {
    box-sizing: border-box;
}

/* Farben */
h1,
h2,
h3,
h4 {
    color: lightsalmon;
}

h5 {
    color: lightgray;
}

h6 {
    color: yellow;
}

p {
    color: yellow;
}

a {
    color: greenyellow;
}

/* ======================================
   MOBILE FIRST (Default)
   ====================================== */

.container {
    display: grid;
    grid-template-areas:
        "header"
        "content"
        "menu"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;

    width: 100%;
    padding: 5px;
    background-color: black;
}

/* Grundabstände */
.container div {
    padding: 10px;
}

/* Header */
.container .header {
    background-color: black;
    grid-area: header;
    position: sticky;
    top: 0;

    /* extrem wichtig */
    z-index: 10;
    /* damit er oben bleibt */

    text-align: center;
    border: 1px solid gray;
}

/* Content */
.container .content {
    grid-area: content;
    position: relative;

    overflow: visible;
    /* WICHTIG: Mobile darf wachsen */
    border: 1px solid gray;
    background-color: dimgray;
}

/* Schrift für Impressum Innentext */
.pcontent {
    p {
        color: antiquewhite
    }
}

/* dunkle Überlagerung */
.content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.35));
}

/* Textbereich */
.content-inner {
    position: relative;
    background: rgba(78, 75, 75, 0.65);
    padding: 16px;
    border-radius: 10px;

    max-height: none;
    /* Mobile: KEINE Begrenzung */
    overflow: visible;
}

.content p {
    line-height: 1.4;
    margin-bottom: 0.8em;
    font-size: 0.95rem;
}

/* Menü */
.container .menu {
    grid-area: menu;
    text-align: center;
    border: 1px solid gray;
}

.menu img {
    height: 90px;
}

/* Footer */
.container .footer {
    grid-area: footer;
    text-align: center;
    border: 1px solid gray;
}

/* ======================================
   OVERLAY / LIGHTBOX
   ====================================== */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay.hidden {
    display: none;
}

.overlay-content img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 0 30px black;
}

/* ======================================
   OBILD (alte Variante 
   der Bilddarstellung, optional)
   ====================================== */

.obild {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vh;
    max-width: 600px;
    max-height: 900px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.hidden {
    display: none;
}

.subline {
    color: white;
    margin: 0;
}

/* ======================================
   Ab hier Anpassungen 
   für Tablet und Desktop
   ====================================== */

/* ======================================
   TABLET (ab 768px)
   ====================================== */

@media (min-width: 768px) {

    .container {
        grid-template-areas:
            "header header"
            "content menu"
            "footer footer";
        grid-template-columns: 3fr 1.75fr;
        min-height: 0;
        /* WICHTIG */
    }

    .container .content {
        overflow: visible;
    }

    .content-inner {
        max-height: none;
        overflow-y: visible;
        padding: 24px;
        border-radius: 12px;
    }

    .menu img {
        height: 110px;
    }
}

/* ======================================
   DESKTOP (ab 1024px)
   ====================================== */

@media (min-width: 1024px) {

    .container {
        display: grid;
        min-height: 100dvh;
        grid-template-columns: 3fr 1fr;
        grid-template-rows: auto 1fr auto;

    }

    .container .content {
        overflow: hidden;
        display: flex;
    }

    .content-inner {
        overflow-y: scroll;
        max-height: calc(100dvh - 300px);
    }

    .pcontent {
        p {
            color: antiquewhite;
        }
    }

    .menu img {
        max-width: 100%;
        height: auto;
    }
}