/* =========================================
   1. GRUNDLAGEN & VARIABLEN
   ========================================= */
:root {
    /* Farbpalette: Elegant & Modern */
    --primary: #c58f7c;       /* Altrosa / Terrakotta */
    --primary-hover: #b07d6b;
    --text-main: #333333;     /* Dunkles Grau statt hartes Schwarz */
    --text-light: #777777;
    --bg-body: #fdfdfd;       /* Gebrochenes Weiß */
    --bg-grey: #f4f4f4;
    --border-color: #e5e5e5;
    --white: #ffffff;

    /* Abstände */
    --gap: 20px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--text-main);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--bg-body);

    /* MOBILE FIRST: Standard ist eine Spalte */
    display: flex;
    flex-direction: column;
}

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

a {
    color: var(--text-main);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--primary);
}
a.liste{
    font-weight: bold;
}

/* =========================================
   2. HEADER BEREICH
   ========================================= */

header {
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

/* Der Shop Name */
#siteName {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    padding: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-main);
}

/* Das Header Bild */
#headerImage {
    width: 100%;
    overflow: hidden;
}

#headerImage img {
    width: 100%;
    object-fit: cover;
    max-height: 300px; /* Begrenzung der Höhe auf Mobile */
}

/* Top Navigation (falls vorhanden) */
#globalNav {
    background: var(--bg-grey);
    padding: 10px;
    text-align: center;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-color);
}

/* =========================================
   3. HAUPTINHALT (MAIN)
   ========================================= */

#wrapper {
    padding: 20px;
    background: var(--white);
}

#content h1, #content h2 {
    color: var(--primary);
    margin-top: 0;
}

/* CMS Content Styling: Wir gehen davon aus, dass das CMS p-Tags und Listen generiert */
#content p {
    margin-bottom: 1rem;
    text-align: justify;
}

/* Produkt-Karten Simulation (falls das CMS .story Klassen nutzt wie im alten CSS) */
.story {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

/* =========================================
   4. SIDEBARS (ASIDE)
   ========================================= */

/* Linke Spalte (Navigation & Suche) */
aside:nth-of-type(1) {
    background: var(--bg-grey);
    padding: 20px;
    order: -1; /* Auf Mobile unter dem Header, aber vor dem Content */
}

#search input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}

#sectionLinks h3, .relatedLinks h3 {
    font-size: 1rem;
    text-transform: uppercase;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-top: 20px;
}

#sectionLinks a, .relatedLinks a {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
}

#sectionLinks a:hover {
    padding-left: 5px; /* Kleiner Animationseffekt */
    color: var(--primary);
}

/* Rechte Spalte (Werbung & Headlines) */
aside:nth-of-type(2) {
    padding: 20px;
    background: #fff;
    border-top: 1px solid var(--border-color);
}

#headlines {
    background: #fafafa;
    padding: 15px;
    border-left: 3px solid var(--primary);
    margin-bottom: 20px;
}

#advertContainer img {
    margin: 0 auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* =========================================
   5. FOOTER
   ========================================= */

footer {
    background: #222;
    color: #fff;
    padding: 30px 20px;
    text-align: center;
    margin-top: auto;
}

footer a {
    color: #bbb;
}

/* =========================================
   6. DESKTOP VIEW (ab 1024px)
   ========================================= */
/* Hier passiert die Magie: Wir schalten um auf Grid Layout */

@media screen and (min-width: 1024px) {
    body {
        display: grid;
        /* Definition der Bereiche */
        grid-template-areas:
            "header header header"
            "nav    main   sidebar"
            "footer footer footer";
        /* Spaltenbreiten: Links 250px, Mitte Rest, Rechts 250px */
        grid-template-columns: 250px 1fr 250px;
        /* Zeilenhöhen */
        grid-template-rows: auto 1fr auto;
        min-height: 100vh;
    }

    /* Zuweisung der HTML Elemente zu den Grid-Bereichen */
    header {
        grid-area: header;
    }

    aside:nth-of-type(1) {
        grid-area: nav;
        background: var(--bg-body); /* Auf Desktop weißer Hintergrund */
        border-right: 1px solid var(--border-color);
    }

    #wrapper {
        grid-area: main;
        padding: 40px; /* Mehr Platz auf Desktop */
    }

    aside:nth-of-type(2) {
        grid-area: sidebar;
        border-top: none;
        border-left: 1px solid var(--border-color);
    }

    footer {
        grid-area: footer;
    }

    /* Sticky Navigation auf Desktop */
    #navBar {
        position: sticky;
        top: 20px;
    }

    /* Header Anpassungen für Desktop */
    header {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 0 40px;
    }

    #siteName {
        text-align: left;
        padding-left: 0;
        flex: 0 0 auto;
    }

    #headerImage {
        width: 100%;
        order: 3; /* Bild nach unten im Header */
        max-height: 400px;
    }

    #globalNav {
        background: transparent;
        border: none;
        flex: 0 0 auto;
    }

    /* Produkte nebeneinander auf Desktop */
    .story {
        grid-template-columns: repeat(2, 1fr);
    }
}