/* sprache.31d.de - Thema auf Bootstrap/kern (oberflaeche()), wenig Eigenes. */
:root, [data-bs-theme=light] {
    --kern-akzent: #0f766e;
    --bs-primary: #0f766e;
    --bs-primary-rgb: 15, 118, 110;
    --bs-link-color: #0f766e;
    --bs-link-color-rgb: 15, 118, 110;
}
[data-bs-theme=dark] {
    --kern-akzent: #2dd4bf;
    --bs-primary: #2dd4bf;
    --bs-primary-rgb: 45, 212, 191;
    --bs-link-color: #5eead4;
    --bs-link-color-rgb: 94, 234, 212;
}
.marke { font-weight: 800; text-decoration: none; color: var(--bs-body-color); font-size: 1.1rem; }
.marke span { color: var(--bs-secondary-color); font-weight: 500; }
.thema-knopf { background: none; border: 0; color: var(--bs-body-color); padding: .25rem .4rem; }
.laute { font-family: "DejaVu Sans", "Noto Sans", system-ui, sans-serif; letter-spacing: .02em; }
.hoeren { height: 2rem; width: 100%; min-width: 9rem; max-width: 16rem; }
.schritt { white-space: pre-wrap; word-break: break-word; }
.schritt mark { padding: 0 .15em; }
/* Im Dunkeln ist der Akzent hell - darauf dunkle Schrift */
[data-bs-theme=dark] .btn-primary { --bs-btn-color: #042f2e; --bs-btn-hover-color: #042f2e; --bs-btn-active-color: #042f2e; --bs-btn-bg: #2dd4bf; --bs-btn-border-color: #2dd4bf; --bs-btn-hover-bg: #5eead4; --bs-btn-hover-border-color: #5eead4; --bs-btn-active-bg: #14b8a6; }
[data-bs-theme=dark] .badge.text-bg-primary { color: #042f2e !important; }