:root {
            --primary: #4a5d4d; /* Waldgrün */
            --accent: #d4a373;  /* Erdiges Braun/Sand */
            --bg: #fdfcf8;      /*  Warmes Cremeweiß */
            --text: #333;
  
  
        --primary: #3C3836;    /* Warmes Dunkelgrau für Text */
        --accent: #D4A373;     /* Sanftes Lehmbraun */
        --box-bg: #ffffff;     /* Reines Weiß für die Auswahl-Box */
    }
	* { box-sizing: border-box; }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: var(--bg);
        color: var(--primary);
        margin: 0;
        line-height: 1.6;
    }
    
	header {margin: 20px 10%;}
	.site-grid { 
		margin: 20px 10%;
	}
	.site-grid > div {
		border-radius: 12px; 
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		border: 1px solid #eee;
		background-color: white;
		padding: 20px;
		margin-bottom: 20px;
}

    @media (width >= 992px) { 
		.site-grid {
		display: grid; 
		grid-template-columns: 6fr 4fr;
        gap: 5%; 
		align-items: flex-start;
		}
	}
	
	.footer {
		margin: 20px 10%;
		text-align: center;
		padding: 20px;
	}

    h1 { font-size: 2.8rem; margin-top: 0; color: var(--primary); }
    h2 { font-size: 1.5rem; margin-top: 0; margin-bottom: 20px; }

    /* --- BUTTONS --- */
    .btn-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .btn-list li { margin-bottom: 12px; }

    .btn {
        display: block;
        padding: 18px;
        background: var(--bg);
        color: var(--primary);
        text-decoration: none;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.2s ease;
        border: 1px solid transparent;
    }

    .btn:hover {
        border-color: var(--accent);
        /* background: #fff;
         color: var(--accent); 
        transform: translateY(-2px); */
    }