:root{
    --max-width:900px;
    --gutter:16px;
    --accent:#e63946; /*#0b6efd;*/
    --muted:#6b7280;
    --bg:#ffffff;
    --text:#111827;
    --radius:8px;
    --shadow:0 6px 18px rgba(17,24,39,0.06);
    --font-sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:var(--font-sans);
    color:var(--text);
    background:#f7f7fb;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}

.container{
    max-width:var(--max-width);
    margin:32px auto;
    padding: var(--gutter);
    background: #fff;
    padding:16px;
    border-radius:16px;
    box-shadow:var(--shadow);
}

.site-region{ width:100%; background:transparent; }

.article-header h1{ margin:0 0 8px 0; font-size:clamp(1.6rem,2.4vw,2.2rem); }
.article-meta{ margin:0 0 18px 0; color:var(--muted); font-size:0.95rem; }

/* Normaler Dokumentfluss (kein flex) damit Floats funktionieren */
.article-content{ display:block; }

/* Volle Box für Standard-Blöcke; clear sorgt dafür, dass Boxen unter Floats beginnen */
.content-block{
    clear: both;
    font-size:1rem;
    color:var(--text);
    margin:0 0 12px 0;
    line-height:1.6;
    background: transparent;
    /*background:var(--bg);
    padding:16px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    width:100%;
    clear: both;
    margin-bottom:18px;*/
}

.content-text{ font-size:1rem; color:var(--text); margin:0 0 8px 0; }

/* Inline-Text, damit Umfluss funktioniert (kein clear) */
.inline-text{
    display:block;
    font-size:1rem;
    color:var(--text);
    margin:0 0 12px 0;
    line-height:1.6;
}

/* Links und Buttons */
.content-link a{ color:var(--accent); text-decoration:underline; }
.content-button .btn{
    display:inline-block;
    padding:10px 16px;
    border-radius:6px;
    background:var(--accent);
    color:#fff;
    text-decoration:none;
    border:none;
    cursor:pointer;
    font-weight:600;
}

/* Media */
img,
video,
audio,
.content-image img,
.content-video video,
.content-audio audio{ max-width:100%; height:auto; display:block; border-radius:6px;}

/* Floats: erhöhte Spezifität, damit Frameworks sie nicht so leicht überschreiben */
.article-content .float-left{ float:left !important; margin:0 16px 16px 0 !important; max-width:45% !important; display:block !important; }
.article-content .float-right{ float:right !important; margin:0 0 16px 16px !important; max-width:45% !important; display:block !important; }

/* Wenn Wrapper die Caption enthält, sorgt diese Klasse für korrekten Umfluss */
.content-image.float-left { float:left !important; margin:0 16px 16px 0 !important; max-width:45% !important; }
.content-image.float-right { float:right !important; margin:0 0 16px 16px !important; max-width:45% !important; }

.align-left{ text-align:left; }
.align-right{ text-align:right; }
.align-center{ text-align:center; }

@media (max-width:640px){
    .article-content .float-left, .article-content .float-right, .content-image.float-left, .content-image.float-right {
        float:none !important; max-width:100% !important; margin:0 0 12px 0 !important;
    }
    .container{
        margin:18px auto;
        padding: var(--gutter);
        background: #fff;
        padding:16px;
        border-radius:0px;
        box-shadow:none;
    }
    body{
        background:#fff;
    }

}

a:focus, button:focus { outline:3px solid rgba(11,110,253,0.18); outline-offset:2px; }

.highlight {
    padding: 2px 6px;
    border-radius: 4px;

}
.highlight.info {
    background: #e6f3ff;
    /*color: #0b6efd;*/

}
.highlight.warn {
    background: #fff4e6;
    /*color: #b45309;*/

}
.content-text a {
    color: #0b6efd;
    text-decoration: underline;

}
.content-text strong {
    font-weight: 700;

}
.content-text em {
    font-style: italic;

} .content-text u {
    text-decoration: underline;

}