/* Generated appearance overrides. Source: existing gliederung/index.html. */
:root {
    --bg: rgb(245, 248, 250);
    --surface: rgb(255, 255, 255);
    --surface-soft: rgb(245, 248, 250);
    --ink: rgb(21, 38, 57);
    --text: rgb(21, 38, 57);
    --muted: rgb(107, 119, 133);
    --line: rgb(224, 230, 235);
    --line-strong: rgb(161, 172, 183);
    --blue: rgb(21, 94, 239);
    --blue-dark: rgb(16, 73, 190);
    --blue-soft: rgb(237, 243, 255);
    --teal: rgb(8, 127, 120);
    --teal-soft: rgb(232, 247, 245);
    --amber: rgb(169, 99, 0);
    --amber-soft: rgb(255, 243, 221);
    --rose: rgb(179, 38, 77);
    --premium: rgb(21, 94, 239);
    --premium-soft: rgb(237, 243, 255);
    --shadow: var(--aw-shadow)
}
body {
    background: linear-gradient(180deg, rgba(21, 94, 239, 0.06), transparent 260px), var(--bg)
}
.brand-icon {
    color: rgb(255, 255, 255);
    box-shadow: var(--aw-shadow)
}
.builder, .result {
    box-shadow: var(--aw-shadow)
}
.progress span {
    background: rgb(224, 230, 235)
}
.mode-switch {
    background: rgb(245, 248, 250)
}
.mode-switch button.is-active,
.view-tabs button.is-active {
    background: rgb(255, 255, 255);
    box-shadow: var(--aw-shadow)
}
.example-strip button, .chip-suggestions button {
    background: rgb(255, 255, 255)
}
.field span, .chip-field > label, legend {
    color: rgb(21, 38, 57)
}
input, select, textarea {
    background: rgb(255, 255, 255)
}
input:focus, select:focus, textarea:focus {
    box-shadow: var(--aw-shadow)
}
select {
    background-image: linear-gradient(45deg, transparent 50%, rgb(107, 119, 133) 50%),
    linear-gradient(135deg, rgb(107, 119, 133) 50%, transparent 50%)
}
output {
    background: rgb(255, 255, 255)
}
.chip button {
    background: rgb(224, 230, 235);
    color: rgb(81, 97, 113)
}
.primary-btn {
    color: rgb(255, 255, 255)
}
.secondary-btn, .icon-btn {
    background: rgb(255, 255, 255);
    color: rgb(21, 38, 57)
}
.premium-btn {
    color: rgb(255, 255, 255)
}
.premium-btn:hover {
    background: rgb(21, 94, 239)
}
.pill {
    background: rgb(255, 255, 255)
}
.question-box {
    color: rgb(21, 61, 58)
}
.premium-banner {
    border: 1px solid rgb(224, 230, 235);
    color: rgb(49, 32, 86)
}
.premium-banner p {
    color: rgb(75, 58, 115)
}
.view-tabs {
    background: rgb(245, 248, 250)
}
.chapter-number {
    color: rgb(255, 255, 255)
}
.chapter.formal .chapter-number {
    background: rgb(224, 230, 235);
    color: rgb(81, 97, 113)
}
.chapter ul {
    color: rgb(81, 97, 113)
}
.page-chip {
    background: rgb(255, 255, 255)
}
.premium-card {
    background: rgb(255, 255, 255)
}
.premium-cta-card {
    border: 1px solid rgb(224, 230, 235)
}
.check-list li {
    background: rgb(255, 255, 255)
}
.plain-output {
    background: rgb(255, 255, 255)
}
.toast {
    background: rgb(21, 38, 57);
    color: rgb(255, 255, 255);
    box-shadow: var(--aw-shadow)
}
@media print {
    body {
        background: rgb(255, 255, 255)
    }
}