:root {
            --primary-color: #12045aff;
            --secondary-color: wheat;
            --accent-color: #2c3e50ff;
            --light-color: #ecf0f1ff;
            --dark-color: #2c3e50ff;
        }
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #12045aff;
        }

        /* Container für das Grid-Layout */
        .container {
            display: grid;
            grid-template-areas: 
                "header header"
                "sidebar content"
                "footer footer";
            grid-template-columns: 1fr 3fr;
            grid-template-rows: auto 1fr auto;
            min-height: 100vh;
            gap: 20px;
            padding: 20px;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* Gemeinsame Stile für alle Bereiche */
        header, aside, main, footer {
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            background-color: color-mix(in oklab, var(--primary-color) 90%, white);
            color: var(--light-color);
        }

        /* Header-Bereich */
        header {
            display: grid;
            grid-template-columns: 1fr 3fr;
            grid-area: header;
            background-color: color-mix(in oklab, var(--primary-color) 73%, white);
            background:color-mix(in oklab, var(--primary-color) 90%, white) url('../bilder/bildobjekte/Computer-Geek (Bildobjekt).jpg') no-repeat right;
            background-size: contain;
            color: white;            text-align: center;
            /* border-right: 50px solid #ddd;
             border-image:url('../bilder/rand.jpg') 50 stretch; */
            
        }
        header div.banner { padding-left:15px; }
        header h1 {
            font-size: 4em;
            margin-bottom: 10px;
            text-align: left;
        }
        header h2 {
            font-size: 1.8em;
            margin-bottom: 10px;
            text-align: left;
        }
        header img {
            max-width: 200px;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        /* Sidebar-Bereich */
        aside {
            grid-area: sidebar;
            /* background-color: color-mix(in oklab, var(--primary-color) 80%, white); #34495e */
            color: var(--light-color);
            font-size: 1.3em;
            border-right: 10px solid wheat;
            /* border-image:url('../bilder/rand.jpg') 50 stretch; */
        }

        /* Navigationsmenü in der Sidebar */
        .sidebar-nav ul {
            list-style: none;
        }

        .sidebar-nav li {
            margin-bottom: 10px;
        }

        .sidebar-nav a {
            color: white;
            text-decoration: none;
            display: block;
            padding: 8px 12px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .sidebar-nav a:hover {
            background-color: #2c3e50;
        }

        /* Hauptinhalt-Bereich */
        main {
            grid-area: content;
            /* background-color: color-mix(in oklab, var(--primary-color) 80%, white); */
            
        }

        /* Footer-Bereich */
        footer {
            grid-area: footer;
            /* background-color: color-mix(in oklab, var(--primary-color) 80%, white); */
            color: var(--light-color);
            text-align: center;
            border-left: 50px solid #ddd;
            border-image:url('../bilder/rand.jpg') 50 stretch;
        }

        /* Responsive Design für Tablets */
        @media (max-width: 768px) {
            .container {
                grid-template-areas: 
                    "header"
                    "sidebar"
                    "content"
                    "footer";
                grid-template-columns: 1fr;
                grid-template-rows: auto auto 1fr auto;
            }
            .sidebar-nav ul { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }

        }

        /* Responsive Design für Mobile */
        @media (max-width: 480px) {
            .container {
                padding: 10px;
                gap: 10px;
            }
            
            header, aside, main, footer {
                padding: 15px;
            }
            header  {
               display: flex;
               flexwrap:nowrap;
               flex-direction: column;
            }
        }
        /* Zusätzliche Stile für Beispielinhalte */
        h1, h2, h3 {
            margin-bottom: 15px;
        }
        main >h2:first-of-type {
            background-image: url('../bilder/fstart6_web.jpg');
            padding: 15px;
            border-radius: 5px;
        }

        p {font-size: 1.3em;
            margin-bottom: 15px;
        }

        .card {
            background-color: color-mix(in oklab, #12045a 73%, white); /* #ecf0f1 */
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 15px;
        }
        /* Galerie-Stile */
        .gallerien {
            display: grid;
            gap: 15px;
            grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
            background-color: color-mix(in oklab, var(--primary-color) 73%, white); /* #f9f9f9 */
        }
        .gallerien img{
            max-width:200px; height:auto; 
            border:1px solid #ccc; border-radius:8px; box-shadow:2px 2px 6px rgba(0,0,0,0.1); transition:transform 0.3s;}
        .gallerien img:hover{transform:scale(1.05); box-shadow:4px 4px 12px rgba(0,0,0,0.2);}
        .gal{text-align:center; font-size:0.9em; color:var(--light-color);border:1px solid #ddd; padding:10px; 
           background-color: color-mix(in oklab, var(--primary-color) 73%, white); border-radius:8px; box-shadow:2px 2px 6px rgba(0,0,0,0.1);}
        .gal p{margin:5px 0;}

        /* Buch-Stile */
        .buch {display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; margin-bottom:20px;}
        p a.web,a.email{color: wheat; text-decoration: none; }
        a.email:hover, footer a:hover, a.web:hover {text-decoration: underline;}