/*
 * Textmodul - Frontend
 * Farben aus den --bk-*-Variablen des Templates, Fallbacks fuer den OPC-Editor.
 * Die Typografie im Rumpf ist bewusst eigenstaendig, damit Editor-HTML
 * (h3/h4, Listen, Links) ueberall gleich aussieht - auch in OPC-Bereichen,
 * in denen das Template keine Stile fuer freie Absaetze mitbringt.
 */
.bk-text {
    margin: 32px 0;
    color: var(--bk-text, #3B3535);
}

.bk-text--center {
    text-align: center;
}

.bk-text--w-medium {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.bk-text--w-narrow {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.bk-text--bg-surface,
.bk-text--bg-white {
    padding: 28px 32px;
    border-radius: 14px;
}

.bk-text--bg-surface {
    background: var(--bk-surface, #F8F6F5);
    border: 1px solid var(--bk-border-soft, #EBEAE9);
}

.bk-text--bg-white {
    background: #ffffff;
    border: 1px solid var(--bk-border, #DFDDDC);
}

.bk-text-title {
    margin: 0 0 14px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bk-accent, #107C92);
}

/* Rumpf: Editor-HTML */
.bk-text-body {
    font-size: 16px;
    line-height: 1.65;
}

.bk-text-body > :first-child { margin-top: 0; }
.bk-text-body > :last-child  { margin-bottom: 0; }

.bk-text-body p {
    margin: 0 0 1em;
}

.bk-text-body h2,
.bk-text-body h3,
.bk-text-body h4 {
    margin: 1.4em 0 0.5em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bk-text, #3B3535);
}
.bk-text-body h2 { font-size: 22px; }
.bk-text-body h3 { font-size: 19px; }
.bk-text-body h4 { font-size: 17px; }

.bk-text-body ul,
.bk-text-body ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}
.bk-text-body li { margin-bottom: 0.35em; }
.bk-text-body ul > li::marker { color: var(--bk-primary, #CB5550); }

.bk-text-body a {
    color: var(--bk-accent, #107C92);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bk-text-body a:hover,
.bk-text-body a:focus {
    color: var(--bk-accent-hover, #0C6272);
}

.bk-text-body blockquote {
    margin: 1.2em 0;
    padding: 12px 20px;
    border-left: 3px solid var(--bk-primary, #CB5550);
    background: var(--bk-surface, #F8F6F5);
    border-radius: 0 10px 10px 0;
}
.bk-text-body blockquote > :last-child { margin-bottom: 0; }

.bk-text-body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.bk-text-body table {
    width: 100%;
    margin: 0 0 1em;
    border-collapse: collapse;
    font-size: 15px;
}
.bk-text-body th,
.bk-text-body td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--bk-border-soft, #EBEAE9);
    text-align: left;
    vertical-align: top;
}
.bk-text-body th {
    font-weight: 700;
    color: var(--bk-text, #3B3535);
}

.bk-text--empty {
    padding: 16px;
    border: 1px dashed var(--bk-border, #DFDDDC);
    border-radius: 10px;
    color: var(--bk-muted, #AEAAA8);
}

@media (max-width: 767.98px) {
    .bk-text { margin: 24px 0; }
    .bk-text--bg-surface,
    .bk-text--bg-white { padding: 20px 18px; }
    .bk-text-title { font-size: 20px; }
    .bk-text-body { font-size: 15px; }
    .bk-text-body h2 { font-size: 19px; }
    .bk-text-body h3 { font-size: 17px; }
    .bk-text-body h4 { font-size: 16px; }
}