:root { color-scheme: light dark; font-family: system-ui, -apple-system, Segoe UI, sans-serif; }
body { margin: 0; background: #111827; color: #f9fafb; }
header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; background:#030712; border-bottom:1px solid #374151; }
a { color:#93c5fd; text-decoration:none; } a:hover { text-decoration:underline; }
.brand { font-weight:800; color:#fff; font-size:1.2rem; }
nav { display:flex; gap:1rem; align-items:center; }
main { max-width:960px; margin:0 auto; padding:1.5rem; }
.card { background:#1f2937; border:1px solid #374151; border-radius:14px; padding:1rem; margin:.85rem 0; box-shadow:0 8px 24px rgb(0 0 0 / .15); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
input, button { font:inherit; padding:.75rem; border-radius:10px; border:1px solid #4b5563; }
input { background:#111827; color:#fff; width:100%; box-sizing:border-box; margin:.35rem 0 1rem; }
button, .button { background:#2563eb; color:#fff; border:0; padding:.75rem 1rem; border-radius:10px; display:inline-block; cursor:pointer; }
button:hover, .button:hover { background:#1d4ed8; text-decoration:none; }
.flash { background:#064e3b; border:1px solid #10b981; padding:.8rem 1rem; border-radius:10px; margin-bottom:1rem; }
a.danger { color:#fca5a5; }
a.title { color:#fff; font-weight:700; font-size:1.1rem; }
.progress { height:8px; background:#374151; border-radius:999px; overflow:hidden; margin:.75rem 0; }
.progress > div { height:100%; background:#60a5fa; width:0%; }
audio { width:100%; margin:1rem 0; }
.small { color:#9ca3af; font-size:.9rem; }
.hidden { display:none !important; }
.upload-progress { margin:.5rem 0 1rem; }
.upload-status { display:flex; justify-content:space-between; gap:1rem; color:#9ca3af; font-size:.9rem; }
button:disabled { opacity:.65; cursor:not-allowed; }
.upload-progress.processing .progress { position:relative; }
.upload-progress.processing .progress > div { width:100% !important; }
.upload-progress.processing .progress::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation:uploadProcessing 1.15s linear infinite; }
.upload-progress.processing .upload-status { color:#bfdbfe; }
@keyframes uploadProcessing { from { transform:translateX(-100%); } to { transform:translateX(100%); } }

code { background:#111827; border:1px solid #374151; border-radius:6px; padding:.1rem .3rem; }
.danger { color:#fecaca; background:#7f1d1d; border:1px solid #ef4444; padding:.75rem; border-radius:10px; }

.chapters{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}.chapter-button{width:100%;display:flex;justify-content:space-between;gap:1rem;align-items:center;text-align:left;background:#f7f7f8;border:1px solid #ddd;border-radius:10px;padding:.7rem .85rem;cursor:pointer}.chapter-button:hover,.chapter-button:focus{background:#eceef2}.chapter-button span{font-weight:600}.chapter-button small{white-space:nowrap;color:#555}

.inline-form{display:inline-block;margin:.5rem .5rem .5rem 0}.inline-form input[type=hidden]{display:none}.danger-button{background:#991b1b;color:#fff}.danger-button:hover{background:#7f1d1d}.card .inline-form{margin-top:.75rem}
textarea { background:#111827; color:#fff; width:100%; box-sizing:border-box; margin:.35rem 0 1rem; border:1px solid #4b5563; border-radius:10px; padding:.75rem; font:inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.chapter-example { background:#111827; border:1px solid #374151; border-radius:10px; padding:1rem; overflow:auto; }

/* Bessere Lesbarkeit für Kapitel und Hörpositionen auf dunklem Layout */
.chapters { list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.chapter-button {
    width:100%; display:flex; justify-content:space-between; gap:1rem; align-items:center; text-align:left;
    background:#111827; color:#f9fafb; border:1px solid #4b5563; border-radius:10px; padding:.8rem .9rem; cursor:pointer;
}
.chapter-button:hover,.chapter-button:focus { background:#0f172a; border-color:#60a5fa; }
.chapter-button span { font-weight:700; color:#fff; }
.chapter-button small { white-space:nowrap; color:#bfdbfe; }

.save-position-form { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.save-position-form input[type="hidden"] { display:none; }
.position-title-input { width:min(100%, 320px); margin:0; }
.positions-list { list-style:none; padding:0; margin:0; display:grid; gap:.75rem; }
.position-item { display:grid; grid-template-columns:minmax(220px, 1fr) minmax(260px, 1.2fr) auto; gap:.5rem; align-items:center; padding:.75rem; border:1px solid #374151; border-radius:12px; background:#111827; }
.position-jump { display:flex; gap:.75rem; align-items:center; justify-content:flex-start; text-align:left; background:#0f172a; border:1px solid #4b5563; color:#f9fafb; }
.position-jump:hover,.position-jump:focus { background:#1e3a8a; border-color:#93c5fd; }
.position-time { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:#bfdbfe; font-weight:700; white-space:nowrap; }
.position-title { color:#fff; font-weight:600; overflow-wrap:anywhere; }
.position-manage-form { display:flex; gap:.5rem; align-items:center; }
.position-manage-form input[type="hidden"] { display:none; }
.position-manage-form input[type="text"] { margin:0; min-width:0; }
@media (max-width: 820px) {
    .position-item { grid-template-columns:1fr; }
    .save-position-form, .position-manage-form { align-items:stretch; }
    .position-title-input { width:100%; }
}

.header-current-chapter {
    flex:1; min-width:180px; max-width:52vw; margin:0 1rem; padding:.45rem .75rem; border:1px solid #374151; border-radius:999px; background:#111827; color:#f9fafb; display:flex; gap:.5rem; align-items:center; justify-content:center; overflow:hidden; white-space:nowrap; }
.header-current-chapter-label { color:#93c5fd; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; flex:0 0 auto; }
.header-current-chapter strong { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.chapter-button.active-chapter { background:#1e3a8a; border-color:#93c5fd; box-shadow:0 0 0 2px rgb(147 197 253 / .25); }
@media (max-width: 720px) {
    header { flex-wrap:wrap; gap:.75rem; }
    .header-current-chapter { order:3; flex-basis:100%; max-width:none; margin:0; justify-content:flex-start; }
    nav { margin-left:auto; }
}

.section-heading-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.75rem; }
.section-heading-row h2 { margin:0; }
.secondary-button { background:#374151; color:#f9fafb; border:1px solid #4b5563; }
.secondary-button:hover,.secondary-button:focus { background:#4b5563; }
#chapter-panel.collapsed { display:none; }
.header-current-chapter { gap:.65rem; }
.header-chapter-remaining { flex:0 0 auto; color:#fde68a; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight:700; font-size:.86rem; border-left:1px solid #374151; padding-left:.65rem; }
@media (max-width: 720px) {
    .section-heading-row { align-items:stretch; flex-direction:column; }
    .header-current-chapter { white-space:normal; align-items:flex-start; flex-direction:column; gap:.25rem; }
    .header-chapter-remaining { border-left:0; padding-left:0; }
}

/* Persistenter Header-Player */
.global-player {
    flex:1;
    min-width:280px;
    max-width:680px;
    display:grid;
    grid-template-columns:minmax(180px, 1fr) minmax(240px, 1.25fr);
    gap:.75rem;
    align-items:center;
    margin:0 1rem;
    padding:.55rem .75rem;
    border:1px solid #374151;
    border-radius:14px;
    background:#111827;
}
.global-player audio { margin:0; width:100%; height:36px; }
.global-player-meta { min-width:0; display:grid; gap:.15rem; }
.global-player-book { color:#fff; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-player-chapter { color:#bfdbfe; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-player-remaining { color:#fde68a; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight:700; font-size:.86rem; }
.player-page { border:1px dashed #4b5563; border-radius:12px; padding:.85rem; background:#111827; margin:.75rem 0; }
@media (max-width: 960px) {
    header { flex-wrap:wrap; }
    .global-player { order:3; flex-basis:100%; max-width:none; margin:0; grid-template-columns:1fr; }
}
.import-list { display: grid; gap: .75rem; margin: 1rem 0; }
.import-item { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem; border: 1px solid #d6dce5; border-radius: .75rem; background: #f8fafc; color: #172033; }
.import-item input { margin-top: .25rem; }
.import-item small { color: #44546a; }

/* Hamburger-Menü im Header */
.header-menu { position:relative; display:flex; align-items:center; margin-left:auto; }
.hamburger-button {
    width:44px; height:40px; display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    background:#111827; border:1px solid #4b5563; border-radius:10px; padding:0 .65rem; cursor:pointer;
}
.hamburger-button:hover,.hamburger-button:focus { background:#1f2937; border-color:#93c5fd; }
.hamburger-button span { display:block; height:2px; width:100%; background:#f9fafb; border-radius:999px; transition:transform .15s ease, opacity .15s ease; }
.hamburger-button[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger-button[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.hamburger-button[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.main-menu {
    position:absolute; top:calc(100% + .6rem); right:0; z-index:50; min-width:230px;
    display:none; flex-direction:column; align-items:stretch; gap:.25rem;
    padding:.65rem; background:#030712; border:1px solid #374151; border-radius:14px;
    box-shadow:0 18px 45px rgb(0 0 0 / .35);
}
.main-menu.open { display:flex; }
.main-menu a,.main-menu .menu-user { padding:.7rem .85rem; border-radius:10px; }
.main-menu a { color:#dbeafe; }
.main-menu a:hover,.main-menu a:focus { background:#1f2937; text-decoration:none; color:#fff; }
.menu-user { color:#9ca3af; border-bottom:1px solid #374151; margin-bottom:.25rem; font-weight:700; }
@media (max-width: 960px) {
    .header-menu { order:2; }
    .global-player { order:3; }
}


/* Fix für iPad/Safari: Hamburger sichtbar machen und Menü wirklich verstecken */
.header-menu { position:relative; display:flex; align-items:center; margin-left:auto; z-index:100; }
.hamburger-button {
    -webkit-appearance:none; appearance:none;
    width:48px; height:42px; min-width:48px;
    display:inline-flex !important; align-items:center; justify-content:center;
    background:#111827 !important; color:#f9fafb !important;
    border:1px solid #4b5563 !important; border-radius:12px !important;
    padding:0 !important; line-height:1 !important; font-size:0 !important;
}
.hamburger-button::before {
    content:"☰";
    display:block;
    color:#f9fafb;
    font-size:28px;
    line-height:1;
    font-weight:700;
}
.hamburger-button[aria-expanded="true"]::before { content:"×"; font-size:34px; }
.hamburger-button span { display:none !important; }
.main-menu {
    position:absolute !important;
    top:calc(100% + .6rem) !important;
    right:0 !important;
    z-index:9999 !important;
    min-width:250px;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:.25rem !important;
    padding:.65rem !important;
    background:#030712 !important;
    border:1px solid #374151 !important;
    border-radius:14px !important;
    box-shadow:0 18px 45px rgb(0 0 0 / .45) !important;
}
.main-menu.open { display:flex !important; }
.main-menu a,.main-menu .menu-user { display:block; padding:.75rem .9rem; border-radius:10px; white-space:nowrap; }
@media (max-width: 1100px) {
    header { gap:.75rem; }
    .brand { flex:0 0 auto; }
    .global-player { flex:1 1 420px; min-width:320px; margin:0 .5rem; }
    .header-menu { flex:0 0 auto; }
}
@media (max-width: 760px) {
    header { align-items:stretch; }
    .brand { align-self:center; }
    .header-menu { align-self:center; }
    .global-player { order:3; flex-basis:100%; min-width:0; margin:0; }
}