/* --- 1. SETUP --- */
@import url('https://fonts.bunny.net/css?family=caramel:400|permanent-marker:400|playfair-display:600,600i,900,900i');

:root {
    --bg-color: #f0f9e8; 
    --text-blue: #141f65; 
    --text-green: #2d5a27; 
    --kraut-fill: #e1f0d7; 
    --marker-red: #FF0000; 
    --standard-text: #2c3e50;
    --card-bg: #ffffff;
}

/* --- 2. GRUNDGERÜST --- */
body {
    margin: 0; padding: 0;
    background-color: var(--bg-color);
    font-family: sans-serif;
    color: var(--standard-text);
}

.main-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.content-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Desktop: 2/3 zu 1/3 */
    gap: 3rem;
    align-items: start;
}

/* --- 3. BILDER & BLOG --- */
.featured-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
}

.blog-card {/* ==========================================================================
   SCHUBLADE 1: FARBEN & SCHRIFTEN (Hier änderst du das Aussehen)
   ========================================================================== */
@import url('https://fonts.bunny.net/css?family=caramel:400|permanent-marker:400|playfair-display:600,600i,900,900i');

:root {
    --bg-color: #f0f9e8; 
    --text-blue: #141f65; 
    --text-green: #2d5a27; 
    --marker-red: #FF0000; 
    --standard-text: #2c3e50;
    --card-bg: #ffffff;
}

/* ==========================================================================
   SCHUBLADE 2: DAS GRÜST (Wie groß ist die Seite?)
   ========================================================================== */
body {
    margin: 0; padding: 0;
    background-color: var(--bg-color);
    font-family: sans-serif;
    color: var(--standard-text);
}

.main-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Das Herzstück: 2/3 zu 1/3 Aufteilung */
.content-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; 
    gap: 4rem;
    align-items: start;
}

/* ==========================================================================
   SCHUBLADE 3: KOMPONENTEN (Bilder, Zitate, Blog-Karten)
   ========================================================================== */

/* Das große Blumenbild */
.featured-image-figure { margin: 2rem 0; }
.featured-image { 
    width: 100%; height: 400px; 
    object-fit: cover; border-radius: 15px; 
}

/* Die Blog-Karten in der Sidebar */
.blog-sidebar { position: sticky; top: 20px; }
.blog-card {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    display: block;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

/* ==========================================================================
   SCHUBLADE 4: TEXTE & SCHRIFTEN (Zitat-Bereich)
   ========================================================================== */
.quote-section { text-align: center; margin-bottom: 4rem; }
.quote-top { font-family: 'Caramel', cursive; font-size: 2.6rem; color: var(--text-green); }
.quote-middle { font-family: 'Playfair Display', serif; font-style: italic; font-size: 3rem; display: block; }
.quote-bottom { font-family: 'Permanent Marker', cursive; font-size: 4rem; color: var(--marker-red); display: block; transform: rotate(-2deg); }

/* ==========================================================================
   SCHUBLADE 5: RESPONSIVE (Anpassung für Tablet & Handy)
   WICHTIG: Diese Schublade muss IMMER ganz unten stehen!
   ========================================================================== */

/* Kleines Tablet: 50:50 Aufteilung */
@media (max-width: 950px) {
    .content-layout {
        grid-template-columns: 1fr 1fr; 
        gap: 2rem;
    }
}

/* Handy: Alles untereinander */
@media (max-width: 700px) {
    .content-layout { grid-template-columns: 1fr; }
    .blog-sidebar { order: 2; position: static; }
    .content-left { order: 1; }
    .featured-image { height: 250px; }
}
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: block;
    text-decoration: none;
    color: inherit;
}

/* --- 4. RESPONSIVE (WICHTIG!) --- */
@media (max-width: 900px) {
    .content-layout { grid-template-columns: 1fr 1fr; } /* Tablet 50:50 */
}

@media (max-width: 700px) {
    .content-layout { grid-template-columns: 1fr; } /* Handy untereinander */
    .blog-sidebar { order: 2; }
    .content-left { order: 1; }
}