p {
    font-size: 0.9em;
}

h2 {
    margin-bottom: 2rem;
}
.container{
    width: 100%; /* Oder eine bestimmte Breite in % oder px */
    max-width: 1000px; /* Beispiel für eine maximale Breite */
    padding: 1rem; /* Fügt etwas Innenabstand hinzu */
}

.container img {
    padding: 20px; /* Fügt etwas Innenabstand hinzu */
    max-width: 1000px;
    height: auto;
}


@media (max-width: 768px) {
    .left-column, .right-column {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .right-column {
        padding: 1rem; /* Fügt etwas Innenabstand hinzu, aber weniger als auf größeren Bildschirmen */
    }

    .blogpost {
        padding: 0 1rem; /* Fügt horizontalen Innenabstand hinzu */
    }

    .footer {
        position: relative; /* oder 'static', je nachdem, wie der Footer positioniert werden soll */
        bottom: 0; /* Ignoriert für 'static' Positionierung */
    }
    h1 {
        font-size: 1.2em;
    }
    h1 h2 h3 {
        margin-bottom: 2rem;
    }
    p {
        font-size: 0.8em;
    }
    .container img {
        padding: 50px; /* Fügt etwas Innenabstand hinzu */
        max-width: 300px;
        height: auto;
    }
    
}

/* CSS für den Footer, um sicherzustellen, dass er am Ende des Inhalts bleibt */
.footer {
    width: 100%;
    text-align: center;
}
p, li { line-height: 1.75; }
.blogpost .content { max-width: 760px; margin: 0 auto; }
.blogpost img { border-radius: 12px; margin: 16px auto; }
.blogpost .content p { font-size: 18px; line-height: 1.75; }

/* Headings & links */
.blogpost .content h1 { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--border); font-weight: 800; }
.blogpost .content h2 { margin: 24px 0 12px; padding-left: 12px; border-left: 4px solid var(--accent); font-weight: 700; }
.blogpost .content h3 { margin: 20px 0 10px; color: #cfd5e5; }
.blogpost .content a { color: var(--accent); }
.blogpost .content a:hover { color: var(--accent-2); }

/* Hero image full width of content */
.blogpost .content .post-hero { width: 100%; height: auto; display: block; margin: 16px 0 24px; border: 1px solid var(--border); border-radius: var(--radius); }
.blogpost .card-img-top { margin-left: 0 !important; max-width: 100% !important; }

/* Code readability */
.blogpost pre { background: #0b0e13; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: 14px; color: var(--text); }
.blogpost pre code { background: transparent; border: 0; padding: 0; display: block; white-space: pre; }
.blogpost :not(pre) > code { background: #0b0e13; border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; font-size: .95em; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; color: var(--text); }

/* Blockquotes */
.blogpost blockquote { background: rgba(65, 209, 165, .06); border-left: 4px solid var(--accent); padding: 12px 16px; margin: 16px 0; border-radius: 8px; }