/* =====================================================================
   layout.css – Kopfzeile, Fortschritt, Seitenleiste, Lesebereich, Fußzeile
   Mobil zuerst; Breakpoints wie Bootstrap (md 768, lg 992, xl 1200).
   ===================================================================== */
:root { --hdr-h: 3.75rem; --drawer-w: 22rem; --read-w: 44rem; --bottombar-h: 3.75rem; }

body { background: var(--bs-body-bg); overflow-x: hidden; }

/* ---------- Kopfzeile ---------- */
.app-header {
    position: sticky; top: 0; z-index: 1030;
    height: var(--hdr-h);
    background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 3px solid var(--up-orange);
}
.app-header-inner { height: 100%; display: flex; align-items: center; gap: .5rem; padding: 0 .75rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--bs-body-color); text-decoration: none; flex-shrink: 0; }
.brand img { height: 2.25rem; width: auto; }
.brand-title { font-weight: 700; font-size: 1.05rem; line-height: 1.1; border-left: 1px solid var(--up-grey); padding-left: .6rem; }
.brand-title small { display: block; font-weight: 400; font-size: .8rem; color: var(--bs-secondary-color); }
.brand .logo-dark, [data-bs-theme=dark] .brand .logo-light { display: none; }
[data-bs-theme=dark] .brand .logo-dark { display: inline; }
.app-context { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .25rem; }
.app-context .page-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-actions { display: flex; align-items: center; gap: .125rem; margin-left: auto; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-width: 2.75rem; height: 2.75rem; padding: 0 .6rem;
    border: 0; border-radius: 999px; background: transparent; color: var(--bs-body-color); font-weight: 600; text-decoration: none;
}
.icon-btn:hover, .icon-btn[aria-expanded=true], .icon-btn.active { background: var(--up-soft); color: var(--bs-emphasis-color); }
.icon-btn .fa-fw { font-size: 1.15rem; }
.icon-btn.is-disabled { opacity: .4; cursor: default; }
.dropdown-header { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); }
.settings-menu { min-width: 16rem; }
.settings-menu .form-switch { padding: .4rem 1rem .4rem 3.5rem; margin: 0; }
.seg { display: flex; gap: .25rem; padding: .25rem 1rem .5rem; }
.seg button { flex: 1; min-height: 2.5rem; border: 1px solid var(--up-grey); border-radius: .5rem; background: none; color: var(--bs-body-color); }
.seg button.active, .seg button[aria-pressed=true] { background: var(--up-orange); border-color: var(--up-orange); color: var(--up-on-orange); font-weight: 700; }
body.editing .app-header { border-bottom-color: #b42318; }

/* Schmale Bildschirme: nur Bildmarke, kurze Titel */
@media (max-width: 575.98px) {
    .brand-title { display: none; }
    .brand img { height: 2rem; }
}

/* ---------- Fortschritt (Lesebereich) ---------- */
.reader-nav { display: flex; align-items: center; gap: .25rem; min-width: 0; flex: 1; }
.reader-where { min-width: 0; flex: 1; line-height: 1.2; text-align: center; }
.reader-where .chapter { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-where .count { font-size: .875rem; color: var(--bs-secondary-color); }
.reader-progress { position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; background: var(--up-track); }
.reader-progress-bar { height: 100%; width: 0; background: var(--up-orange); border-radius: 0 3px 3px 0; transition: width .4s ease; }
.app-header:has(.reader-progress) { border-bottom-color: transparent; }

/* ---------- Seitenleiste (Bootstrap-Offcanvas) ---------- */
#rightdrawer { --bs-offcanvas-width: min(var(--drawer-w), 100vw); background: var(--bs-body-bg); }
#rightdrawer .offcanvas-header { border-bottom: 1px solid var(--bs-border-color); padding: .75rem 1rem; }
#rightdrawer .offcanvas-title { font-size: 1.05rem; font-weight: 700; }
#rightdrawer .offcanvas-body { padding: 0; }
#rightdrawer .subwin { display: none; }
@media (min-width: 992px) {
    #rightdrawer.offcanvas { top: var(--hdr-h); box-shadow: var(--up-shadow); }
    body.sideBar #Stage, body.sideBar .app-footer { margin-left: var(--drawer-w); }
}

/* ---------- Lesebereich ---------- */
#Stage { padding: 1.5rem 1rem calc(var(--bottombar-h) + 1.5rem); transition: margin .3s ease; min-height: calc(100vh - var(--hdr-h)); }
#Stage > .container { max-width: var(--read-w); padding: 0; }
#scroll { font-size: 1.125rem; }
.reader-pager { display: flex; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 1rem; }
.reader-pager .btn { min-height: 3rem; padding-inline: 1.25rem; }
#scroll:focus { outline: none; }

/* Randspalten (Rechtsprechung, Literatur, Beispiele) ab xl neben dem Text */
.footnotes:empty { display: none; }
.footnotes > div { position: relative; padding: .75rem 0; border-top: 1px solid var(--bs-border-color); font-size: .9375rem; }
.footnotes .fn-title { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); margin: 0 0 .35rem; }
.footnotes .circle { float: left; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--up-soft); color: var(--up-orange-icon); }
.footnotes .indent { font-size: .9375rem; }
@media (min-width: 1200px) {
    .reader-body:has(.footnotes:not(:empty)) { display: grid; grid-template-columns: minmax(0, var(--read-w)) 17rem; column-gap: 2.5rem; }
    #Stage > .container:has(.footnotes:not(:empty)) { max-width: calc(var(--read-w) + 19.5rem); }
    .reader-body .bottompanel { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: calc(var(--hdr-h) + 1rem); max-height: calc(100vh - var(--hdr-h) - 2rem); overflow: auto; padding-top: 0; }
    .reader-body .footnotes { margin-top: 0; border-top: 0; }
    .reader-body .footnotes > div:first-child { border-top: 0; padding-top: 0; }
    .reader-body .footnotes .indent { padding-left: 2.75rem; }
}

/* ---------- Untere Leiste (Smartphone) ---------- */
.reader-bottombar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: grid; grid-template-columns: repeat(4, 1fr);
    height: calc(var(--bottombar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
}
.reader-bottombar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    min-height: 3rem; border: 0; background: none; color: var(--bs-body-color); font-size: .75rem; font-weight: 600;
}
.reader-bottombar button .fa-fw { font-size: 1.25rem; color: var(--up-orange-icon); }
.reader-bottombar button.primary { background: var(--up-orange); color: var(--up-on-orange); }
.reader-bottombar button.primary .fa-fw { color: var(--up-on-orange); }
.reader-bottombar button.is-disabled { opacity: .4; }
@media (min-width: 768px) {
    .reader-bottombar { display: none; }
    #Stage { padding-bottom: 2rem; }
}

/* ---------- Seiten außerhalb des Lesebereichs ---------- */
.app-main > #main, .app-main > .container > #main { margin-top: 0; }
.page-hero { background: linear-gradient(120deg, var(--up-soft), var(--bs-body-bg) 70%); border-bottom: 1px solid var(--bs-border-color); }
.page-hero h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); }
.page-hero .hero-art { width: 100%; max-width: 15rem; height: auto; }

/* ---------- Fußzeile ---------- */
.app-footer { border-top: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); font-size: .9rem; transition: margin .3s ease; }
.app-footer a { color: inherit; text-underline-offset: .2em; }
body:has(.reader-bottombar) .app-footer { padding-bottom: calc(var(--bottombar-h) + 1rem); }
@media (min-width: 768px) { body:has(.reader-bottombar) .app-footer { padding-bottom: 1rem; } }

.skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 2000; }
[data-notify="container"] { max-width: min(28rem, calc(100vw - 2rem)); }

@media print {
    .app-header, .app-footer, .reader-bottombar, .reader-pager, #rightdrawer, #toastArea { display: none; }
    #Stage { padding: 0; margin: 0; }
}