/* Herbert Fritsche – Hybrid Design (from ziel_2)
   Dark blue navigation + cream content areas + custom cursor */

@import url('../fonts/fonts.css');

:root {
    --primary: #000044;
    --accent: #8b0000;
    --bg: #faf8f3;
    --cream: #faf8f3;
    --white: #ffffff;
    --text: #1a1a1a;
    --text-light: #6b6b6b;
    --border: #d4cfc5;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.1);
    --radius: 4px;
    --max-width: 1000px;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

::selection { background: var(--accent); color: #fff; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    cursor: none;
}

img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: none;
}
a:hover { color: #5a5afa; }

/* ─── Custom Cursor (gold everywhere) ─── */
.cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 8px; height: 8px;
    background: rgb(255, 191, 0);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--transition), height 0.3s var(--transition), background 0.3s;
}
.cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border: 2.5px solid rgb(255, 191, 0);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width 0.4s var(--transition-smooth), height 0.4s var(--transition-smooth),
                border-color 0.3s, transform 0.4s var(--transition-smooth);
}
body.cursor-hover .cursor-dot {
    width: 0; height: 0;
}
body.cursor-hover .cursor-ring {
    width: 60px; height: 60px;
    border-color: rgb(255, 191, 0);
}

/* Keep gold on dark areas too */
body.cursor-on-nav .cursor-dot {
    background: rgb(255, 191, 0);
}
body.cursor-on-nav .cursor-ring {
    border: 2.5px solid rgb(255, 191, 0);
}
body.cursor-on-nav.cursor-hover .cursor-ring {
    border-color: rgb(255, 191, 0);
}

/* ─── Custom-Cursor abschaltbar (Barrierefreiheit) ───
   Aktiv wenn:
     - User-Toggle gesetzt (body.cursor-system, persistiert in localStorage), oder
     - prefers-reduced-motion: reduce, oder
     - kein Hover-fähiges Pointer-Device (Touch), oder
     - forced-colors: active (Windows Hochkontrast)
   In all diesen Fällen: System-Cursor verwenden, Custom-Cursor-Elemente weg. */
body.cursor-system .cursor-dot,
body.cursor-system .cursor-ring { display: none !important; }
body.cursor-system,
body.cursor-system *,
body.cursor-system a,
body.cursor-system button,
body.cursor-system input,
body.cursor-system textarea,
body.cursor-system select,
body.cursor-system [role="button"] { cursor: auto !important; }
body.cursor-system a,
body.cursor-system button,
body.cursor-system [role="button"],
body.cursor-system [onclick] { cursor: pointer !important; }

@media (prefers-reduced-motion: reduce), (hover: none), (forced-colors: active) {
    .cursor-dot, .cursor-ring { display: none !important; }
    html, body, a, button, input, textarea, select, [role="button"],
    .home-icon, .info-tooltip .info-btn { cursor: auto !important; }
    a, button, [role="button"], [onclick] { cursor: pointer !important; }
}

/* Custom-Cursor aktiv: alle interaktiven Elemente, die `cursor: pointer` setzen,
   müssen ihn auf `none` zurücksetzen, sonst zeigt der Browser den System-Pointer
   parallel zum gold-gerenderten Custom-Cursor. */
body:not(.cursor-system) .akt-header,
body:not(.cursor-system) .lt-header,
body:not(.cursor-system) .klett-header,
body:not(.cursor-system) .cp-konzept-head,
body:not(.cursor-system) .audio-play-btn,
body:not(.cursor-system) .audio-download-btn,
body:not(.cursor-system) .audio-upload-btn,
body:not(.cursor-system) .audio-delete-btn,
body:not(.cursor-system) .menu-toggle,
body:not(.cursor-system) .archiv-btn,
body:not(.cursor-system) .museum-back-btn,
body:not(.cursor-system) button,
body:not(.cursor-system) [role="button"] { cursor: none; }

/* Footer-Toggle für Custom-Cursor */
.cursor-toggle {
    background: none;
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.7);
    font: inherit;
    font-size: 0.75rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.cursor-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.5); }
.cursor-toggle:focus-visible { outline: 2px solid rgb(255,191,0); outline-offset: 2px; }

/* ─── Home Icon ─── */
.home-icon {
    position: fixed;
    top: 12px; left: 14px;
    z-index: 1001;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    text-decoration: none !important;
    font-size: 17px;
    line-height: 1;
    transition: all 0.3s var(--transition);
    cursor: none;
}
.home-icon:hover {
    background: var(--accent);
    color: #fff;
    transform: scale(1.1);
}

/* ─── Info Tooltip ─── */
.info-tooltip {
    position: fixed;
    top: 12px; right: 14px;
    z-index: 1001;
}
.info-tooltip .info-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: 14px;
    font-style: italic;
    font-family: var(--serif);
    cursor: none;
    transition: all 0.3s;
}
.info-tooltip .info-btn:hover { background: var(--accent); }
.info-tooltip .tooltip-text {
    display: none;
    position: absolute;
    top: 38px; right: 0;
    width: 320px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-light);
    box-shadow: var(--shadow-hover);
}
.info-tooltip:hover .tooltip-text { display: block; }

/* ─── Site Header (sticky nav bar) ─── */
.site-header {
    background: var(--primary);
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: 0 2px 12px rgba(0, 0, 68, 0.15);
}
.site-header .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}
.site-logo {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: rgba(255,255,255,0.95);
    letter-spacing: 0.08em;
    white-space: nowrap;
    cursor: none;
}
.site-logo:hover { color: #fff; }

/* ─── Horizontal Navigation ─── */
.site-nav {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    align-items: center;
}
/* Default (Desktop): Mobile-Extras ausblenden — sie erscheinen nur in der
   Mobile-Query oben drin (siehe @media (max-width: 768px)). */
.site-nav-mobile-extras { display: none; }
/* Archiv-Link am Ende der Hauptnav — nur auf der Startseite sichtbar
   (sonst übernimmt der Page-Header den Archiv-Button). Auf Mobile
   ausgeblendet, weil dort .site-nav-mobile-extras den Eintrag bereits
   im Hamburger-Block bietet. */
.nav-archiv-desktop {
    margin-left: 0.6rem;
}
/* Spezifischer Override: `.site-nav > a` (0,1,1) hat sonst Vorrang vor `.archiv-btn`
   (0,1,0) und drückt die Pille zu einem 3px-Rechteck zurück. Mit `> a.archiv-btn`
   (0,2,1) gewinnen wir und behalten Padding, Hintergrund, Border, Glow + 999px-Radius. */
.site-nav > a.archiv-btn {
    padding: 0.28em 0.85em;
    border-radius: 999px;
    background: #3a3a3a;
    color: #fff;
    border: 1px solid #5a5afa;
    box-shadow: 0 0 0 1px rgba(90, 90, 250, 0.25), 0 2px 8px rgba(90, 90, 250, 0.35);
}
.site-nav > a.archiv-btn:hover {
    background: #1f1f1f;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(90, 90, 250, 0.45), 0 3px 12px rgba(90, 90, 250, 0.55);
}
@media (max-width: 768px) {
    .nav-archiv-desktop { display: none; }
}
.site-nav > a,
.nav-item > a {
    font-family: var(--sans);
    font-size: 0.78rem;
    padding: 6px 10px;
    border-radius: 3px;
    color: rgba(255,255,255,0.7);
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-block;
    cursor: none;
    letter-spacing: 0.01em;
}
.site-nav > a:hover,
.site-nav > a.active,
.nav-item > a:hover,
.nav-item > a.active {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* ─── Dropdown Sub-Navigation ─── */
.nav-item { position: relative; }
.sub-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #edeff4;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.12);
    min-width: 280px;
    z-index: 950;
    padding: 6px 0;
    max-height: 70vh;
    overflow-y: auto;
}
.nav-item.sub-hover .sub-nav,
.nav-item.sub-open .sub-nav { display: block; }
.sub-nav a {
    display: block;
    padding: 7px 16px;
    font-size: 0.8rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    transition: all 0.15s ease;
    cursor: none;
}
.sub-nav a:hover {
    background: #ced2dd;
    color: #5a5afa;
}
.sub-nav a.active {
    background: rgb(135, 135, 255);
    color: #fff;
}

/* ─── Sub-Nav Collapsible Groups ─── */
.sub-nav-group {
    display: flex;
    flex-direction: column;
}
.sub-nav-parent {
    display: flex;
    align-items: center;
}
.sub-nav-parent a {
    flex: 1;
    min-width: 0;
}
.sub-nav-toggle {
    flex-shrink: 0;
    width: 30px;
    height: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-left: 1px solid var(--border);
    color: var(--text-light);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}
.sub-nav-toggle:hover {
    background: #ced2dd;
    color: #5a5afa;
}
.sub-group-open > .sub-nav-parent .sub-nav-toggle {
    transform: rotate(90deg);
    color: #5a5afa;
}
.sub-nav-children {
    display: none;
    background: #e2e5ee;
    border-top: 1px solid var(--border);
    padding: 4px 0 4px 12px;
}
.sub-group-open > .sub-nav-children {
    display: block;
}
.sub-nav-children a {
    font-size: 0.75rem;
    padding: 5px 14px;
    color: var(--text-light);
}
.sub-nav-children a:hover {
    color: #5a5afa;
    background: rgba(0,0,68,0.03);
}
.sub-nav-children a.active {
    background: var(--primary);
    color: #fff;
}

/* ─── Mobile Menu Toggle ─── */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 6px;
    cursor: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.menu-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: rgba(255,255,255,0.9);
    transition: all 0.3s var(--transition-smooth);
    transform-origin: center;
}

/* ─── Edit Toggle (login link) ─── */
.site-header .edit-toggle {
    padding: 4px 12px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 3px;
    background: transparent;
    cursor: none;
    font-size: 0.72rem;
    font-family: var(--sans);
    color: rgba(255,255,255,0.7);
    transition: all 0.2s;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    margin-left: 8px;
}
.site-header .edit-toggle:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}

/* ─── Editor Panel (right side of blue bar) ─── */
.editor-panel {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
}
.ep-btn {
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 3px;
    background: transparent;
    cursor: none;
    font-size: 0.68rem;
    font-family: var(--sans);
    color: rgba(255,255,255,0.7);
    transition: all 0.2s;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.ep-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}
.ep-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.ep-edit-only:not(.visible) {
    display: none;
}
.ep-btn.ep-cancel {
    border-color: rgba(255,100,100,0.3);
    color: rgba(255,180,180,0.8);
}
.ep-btn.ep-cancel:hover {
    background: rgba(255,80,80,0.2);
    color: #fff;
    border-color: rgba(255,100,100,0.5);
}
.ep-btn.ep-back-highlight {
    background: rgba(255,191,0,0.15);
    border-color: rgba(255,191,0,0.5);
    color: rgb(255,210,80);
}
.ep-btn.ep-back-highlight:hover {
    background: rgba(255,191,0,0.3);
    color: #fff;
}
.ep-gear {
    font-size: 14px;
    padding: 3px 7px;
    line-height: 1;
}
.ep-status {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    margin-left: 4px;
    white-space: nowrap;
}
.ep-status.ep-error {
    color: #ffb0b0;
    background: rgba(200,0,0,0.25);
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.75rem;
}
.ep-status.ep-ok {
    color: #b0ffb0;
    background: rgba(0,140,0,0.25);
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.75rem;
}

/* ─── Hero Section (Startseite) ─── */
.hero {
    background: var(--primary);
    color: #fff;
    padding: 4rem 0 3.5rem;
}
.hero .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 3rem;
}
.hero-portrait {
    flex: 0 0 200px;
    width: 200px;
}
.hero-portrait img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* ─── Hero Slideshow ─── */
.hero-portrait.slideshow {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}
.hero-portrait.slideshow .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    opacity: 0;
    transition: opacity 1.5s ease;
}
.hero-portrait.slideshow .slide.active {
    opacity: 1;
}

.hero-text { flex: 1; }
.hero-text .hero-title {
    font-family: var(--serif);
    font-size: 2.8rem;
    font-weight: 400;
    margin: 0 0 0.2rem;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: inherit;
}
.hero-text .subtitle {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 300;
    opacity: 0.8;
    margin-bottom: 1rem;
    font-style: italic;
}
.hero-text .hero-desc {
    font-size: 0.92rem;
    opacity: 0.7;
    line-height: 1.65;
    max-width: 460px;
}
/* ─── Hero Compact (Subpages) ─── */
.hero.hero-compact {
    padding: 1.5rem 0;
}
.hero.hero-compact .hero-portrait {
    flex: 0 0 80px;
    width: 80px;
}
.hero.hero-compact .hero-portrait.slideshow {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}
.hero.hero-compact .hero-portrait.slideshow .slide {
    border-radius: 50%;
}
.hero.hero-compact .container {
    gap: 1.5rem;
}
.hero.hero-compact .hero-text .hero-title {
    font-size: 1.6rem;
}
.hero.hero-compact .hero-text .subtitle {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* ─── Page Header (Subpages) ─── */
.page-header {
    background: var(--primary);
    color: #fff;
    padding: 2.5rem 0 2rem;
}
.page-header .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.page-header h1 {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 400;
}
.page-header h1 .sammelband-tag {
    font-size: 0.55em;
    font-weight: 300;
    opacity: 0.75;
    letter-spacing: 0.02em;
    margin-bottom: 0.2rem;
    line-height: 1.2;
}
.page-header .page-subtitle {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 300;
    opacity: 0.75;
    font-style: italic;
}
.page-header .page-meta {
    font-family: var(--sans);
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 0.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.breadcrumb {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}
.breadcrumb a { color: #fff; opacity: 0.85; }
.breadcrumb a:hover { opacity: 1; }
.breadcrumb .sep { margin: 0 0.4rem; }

/* ─── Main Content Area ─── */
.content-section {
    padding: 2.5rem 0 3rem;
}
.content-section .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.content-box {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 4.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.content-box:has([id$="Accordion"], .lt-section) { min-height: 75vh; }
/* Editor: Selektion wieder erlauben */
body.editor-active .content-box {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Lebenstafel: Hintergrundbild (Basis in Zentralblock) */
.content-box[data-page="lebenstafel"]::before {
    background: url('../images/HF_sw__05.jpg') center top / 102% auto no-repeat;
}

/* Zentrale bg-hide Regel: blendet Hintergrundbild aus wenn Akkordeon-Eintrag offen */
/* Wird von aktToggle() und Lebenstafel-Handler gesetzt. Spezifität [data-page].bg-hide */
/* überschreibt die Opacity aller seitenspezifischen ::before-Regeln. */
.content-box[data-page].bg-hide::before {
    opacity: 0;
}

/* Decorative line */
.deco-line {
    width: 40px; height: 1px;
    background: #5a5afa;
    margin: 1.5rem 0 2rem;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: all 0.8s var(--transition-smooth) 0.3s;
}
.deco-line.visible {
    opacity: 1;
    transform: scaleX(1);
}

/* ─── Content Typography ─── */
.content-box h2, main h2 {
    font-family: var(--serif);
    font-size: 1.65rem;
    font-weight: 400;
    color: var(--primary);
    margin: 1.8em 0 0.6em;
    line-height: 1.25;
}
.content-box h2:first-child, main h2:first-child { margin-top: 0; }
.content-box h3, main h3 {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--primary);
    margin: 1.4em 0 0.4em;
}
.content-box p, main p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1em;
    color: var(--text);
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.content-box p:last-child { margin-bottom: 0; }
.content-box hr, main hr {
    border: none;
    height: 1px;
    background: var(--border);
    margin: 2.5rem 0;
}
/* ─── Lebenstafel Accordion ─── */
.lt-section {
    border: 1px solid rgba(0, 0, 68, 0.15);
    border-radius: var(--radius);
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.lt-section:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}
.lt-section:last-of-type {
    margin-bottom: 0;
}
.lt-header {
    padding: 14px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    background: rgba(80, 90, 100, 0.08);
    transition: background 0.2s ease;
    /* Button-Reset, falls als <button> gerendert (Tastatur-Bedienung) */
    width: 100%;
    border: none;
    text-align: left;
    font: inherit;
    color: inherit;
}
.lt-header:focus-visible {
    outline: 2px solid rgb(255, 191, 0);
    outline-offset: -2px;
}
.lt-header:hover {
    background: rgba(0, 0, 68, 0.03);
}
.lt-header h3 {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    pointer-events: none;
}
.lt-header::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
    transition: transform 0.3s var(--transition);
    flex-shrink: 0;
    margin-left: 1rem;
    opacity: 0.5;
}
.lt-open .lt-header::after {
    transform: rotate(45deg);
}
.lt-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--transition-smooth);
    padding-left: 20px;
    padding-right: 20px;
}
.lt-open .lt-body {
    padding-bottom: 1rem;
}
.lt-body p:first-child {
    margin-top: 0.5rem;
}

.content-box blockquote, main blockquote {
    border-left: 2px solid #5a5afa;
    padding: 0.8em 1.5em;
    margin: 1.5em 0;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--text-light);
    line-height: 1.7;
    background: rgba(90, 90, 250, 0.03);
}
/* ─── ZKH Footnotes (In Memoriam Schmeer) ─── */
.zkh-footnotes {
    margin-top: 2em;
    padding: 1em 0 0;
    border-top: 1px solid var(--border);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-style: normal;
    color: var(--text);
    line-height: 1.5;
}
.zkh-footnotes > div {
    display: flex;
    align-items: baseline;
    margin-bottom: 0.6em;
}
.zkh-footnotes > div:last-child {
    margin-bottom: 0;
}
.zkh-footnotes > div > span:first-child {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 400;
    flex-shrink: 0;
    width: 1.2em;
    text-align: right;
    margin-right: 0.5em;
}
.content-box ul, main ul {
    margin: 0.8em 0 1.2em 1.2em;
    list-style: none;
}
.content-box ul li, main ul li {
    position: relative;
    padding-left: 1em;
    margin-bottom: 0.4em;
    line-height: 1.7;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.content-box ul li::before, main ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.7em;
    width: 4px; height: 4px;
    background: var(--accent);
    border-radius: 50%;
}
.content-box ol, main ol {
    margin: 0.8em 0 1.2em 1.5em;
}
.content-box ol li, main ol li {
    margin-bottom: 0.4em;
    line-height: 1.7;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
main a, .content-box a {
    color: #5a5afa;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}
main a:hover, .content-box a:hover { border-bottom-color: #5a5afa; color: #5a5afa; }
main img { max-width: 100%; height: auto; }

/* ─── Content with Image (Book pages) ─── */
.content-with-image {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}
.content-with-image .content-text { flex: 1; }
.content-with-image .content-img {
    flex-shrink: 0;
    width: 220px;
    height: auto;
    overflow: visible;
    position: sticky;
    top: 80px;
}
.content-with-image .content-img img {
    width: 100%; height: auto;
    border-radius: 3px;
    box-shadow: 4px 6px 20px rgba(0,0,0,0.3), 2px 3px 8px rgba(0,0,0,0.2);
    transition: transform 0.5s var(--transition-smooth), box-shadow 0.5s;
}
.content-with-image .content-img img:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 6px 10px 30px rgba(0,0,0,0.35), 3px 5px 12px rgba(0,0,0,0.25);
}
.content-image {
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    border-radius: 3px;
    transition: transform 0.5s var(--transition-smooth);
}
.content-image:hover { transform: scale(1.01); }
.erstausgabe-cover { margin-top: 2.5rem; }

/* ─── Gesamtausgabe Book Cover alignment ─── */
.content-with-image .content-img.content-img-book {
    padding-top: 8.5rem;
    height: auto;
    overflow: visible;
}

/* ─── CD Cover (Tondokumente) ─── */
.content-with-image .content-img.content-img-cd {
    width: 330px;
    height: auto;
}
.content-with-image .content-img.content-img-cd img {
    object-fit: contain;
    object-position: center;
}
.content-with-image .content-img p.cd-caption {
    text-align: left;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.4;
    margin: 0.5rem 0 0;
}
p.cd-info-block {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.4;
}
.content-with-image .content-img .cd-extra-img {
    margin-top: 1.5rem;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ─── Landscape Image ─── */
.content-with-image .content-img.content-img-landscape {
    width: 320px;
    height: auto;
}
.content-with-image .content-img.content-img-landscape img {
    height: auto;
    object-fit: contain;
    object-position: center;
}

/* ─── Section titles ─── */
.section-title {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* ─── Footer ─── */
.site-footer {
    background: var(--primary);
    color: rgba(255,255,255,0.6);
    padding: 1.25rem 0;
    margin-top: 3rem;
    font-size: 0.8rem;
}
.site-footer .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.site-footer .footer-text-row {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
}
.site-footer .footer-pills-row {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.7rem;
}
.site-footer a {
    color: rgba(255,255,255,0.75);
    cursor: none;
}
.site-footer a:hover { color: #fff; }
/* ─── Editor Bar (legacy, replaced by editor-panel in header) ─── */

/* ─── Signature Animation ─── */
.signature-animation {
    margin-top: 2rem;
    text-align: center;
    position: relative;
    line-height: 0;
}
.signature-animation #signatureImg {
    display: none;
}
.signature-animation #signatureBase,
.signature-animation #signatureMask {
    max-width: 100%;
    height: auto;
}
.signature-animation #signatureMask {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* ─── Signature Intro Overlay ─── */
.sig-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 2.5s ease;
}
.sig-intro-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}
.sig-intro-overlay #sigIntroImg {
    display: none;
}
.sig-intro-overlay #sigIntroBase,
.sig-intro-overlay #sigIntroMask {
    position: absolute;
    max-width: 55%;
    height: auto;
}
.sig-intro-overlay #sigIntroMask {
    z-index: 1;
}

/* ─── Signature Übertitel ─── */
.sig-uebertitel {
    text-align: center;
    margin: 0 auto 1.2rem;
    padding: 0;
    opacity: 0;
    transition: opacity 1.5s ease;
    pointer-events: none;
}
.sig-uebertitel.visible {
    opacity: 1;
}
.sig-uebertitel-img {
    max-width: 816px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: grayscale(100%) contrast(1.2);
    opacity: 0.7;
}
@media (max-width: 768px) {
    .sig-uebertitel-img {
        max-width: 90%;
    }
}

/* ─── Startseite: ganzseitiges Bild innerhalb der Content-Box ─── */
.content-box[data-page="herbert_fritsche"] {
    padding: 0;
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 22px;
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.40),
        0 18px 50px rgba(0, 0, 0, 0.25);
}
.content-box[data-page="herbert_fritsche"] .deco-line { display: none; }
body:has(.content-box[data-page="herbert_fritsche"]) .page-header h1 {
    text-align: center;
}
.page-header .hf-page-subtitle {
    text-align: center;
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 300;
    font-style: italic;
    opacity: 0.85;
    margin-top: 0.35rem;
    letter-spacing: 0.02em;
}
@media (max-width: 768px) {
    .page-header .hf-page-subtitle { font-size: 0.95rem; }
}
.hf-subtitle-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255,255,255,0.25);
    padding-bottom: 1px;
    display: inline-block;
    transform-origin: center center;
    transition: color .35s ease, border-color .35s ease, opacity .35s ease;
}
.hf-subtitle-link:hover,
.hf-subtitle-link:focus-visible {
    color: rgba(235, 245, 255, 1);
    border-bottom-color: rgba(180, 210, 255, 1);
    opacity: 1;
    animation: hf-subtitle-glow-pulse 1.6s ease-in-out infinite;
}
.hf-subtitle-link:hover {
    outline: none;
}
.page-header .hf-page-subtitle:has(.hf-subtitle-link:hover),
.page-header .hf-page-subtitle:has(.hf-subtitle-link:focus-visible) {
    opacity: 1;
}
@keyframes hf-subtitle-glow-pulse {
    0%, 100% {
        text-shadow:
            0 0 2px   rgba(255, 255, 255, 1),
            0 0 6px   rgba(255, 255, 255, 0.85),
            0 0 14px  rgba(180, 210, 255, 1),
            0 0 26px  rgba(120, 180, 255, 0.85),
            0 0 48px  rgba(120, 180, 255, 0.55),
            0 0 80px  rgba(120, 180, 255, 0.32);
    }
    50% {
        text-shadow:
            0 0 3px   rgba(255, 255, 255, 1),
            0 0 10px  rgba(255, 255, 255, 1),
            0 0 22px  rgba(180, 210, 255, 1),
            0 0 38px  rgba(120, 180, 255, 1),
            0 0 70px  rgba(120, 180, 255, 0.85),
            0 0 120px rgba(120, 180, 255, 0.55),
            0 0 180px rgba(120, 180, 255, 0.32);
    }
}
@media (prefers-reduced-motion: reduce) {
    .hf-subtitle-link { transition: none; }
    .hf-subtitle-link:hover,
    .hf-subtitle-link:focus-visible {
        animation: none;
        transform: none;
        text-shadow:
            0 0 4px  rgba(255, 255, 255, 0.95),
            0 0 14px rgba(180, 210, 255, 1),
            0 0 30px rgba(120, 180, 255, 0.9);
    }
}
/* ─── Forschungsarchiv-Einführungsseite ─── */
.forschungsarchiv-page blockquote {
    border-left: none;
    background: none;
    padding: 0.4em 0 0.2em;
    margin: 0.5em 0 1.8em;
    line-height: 1.15;
}
main .forschungsarchiv-page blockquote p,
.forschungsarchiv-page blockquote p { margin: 0 !important; padding: 0 !important; line-height: 1.15 !important; }
main .forschungsarchiv-page blockquote p:first-child,
.forschungsarchiv-page blockquote p:first-child { font-size: 1.25rem; }
main .forschungsarchiv-page blockquote p + p,
.forschungsarchiv-page blockquote p + p { margin-top: 0.45em !important; }
.forschungsarchiv-page h2 {
    margin-top: 1em;
    margin-bottom: 0.3em;
}
.forschungsarchiv-page h2:first-of-type {
    margin-top: 1.95em;
}
.forschungsarchiv-page p:last-child {
    margin-top: 2.2em;
}
/* Header-Nav auf Startseite/Aktuelles und Hauptseite (herbert_fritsche):
   Logo links, Nav-Items mittig, Editor-Buttons rechts in zwei Reihen
   gestapelt. Hauptseite behält 240px-Logo-Spalte (Hero-Bild-Alignment);
   Startseite hat keinen Hero und nutzt eine kompakte auto-Spalte, sodass
   "Aktuelles" direkt rechts neben dem Logo sitzt und der Archiv-Knopf
   am Zeilenende noch Platz findet. */
@media (min-width: 769px) {
    body:has(.content-box[data-page="herbert_fritsche"]) .site-header .container,
    body:has(.content-box[data-page="startseite"]) .site-header .container {
        display: grid;
        grid-template-rows: auto auto;
        align-items: center;
        height: auto;
        min-height: 56px;
    }
    /* Spalten-Breiten differenziert pro Seite */
    body:has(.content-box[data-page="herbert_fritsche"]) .site-header .container {
        grid-template-columns: 240px 1fr auto;
    }
    body:has(.content-box[data-page="startseite"]) .site-header .container {
        grid-template-columns: auto 1fr auto;
        column-gap: 1.4rem;
    }
    body:has(.content-box[data-page="herbert_fritsche"]) .site-logo,
    body:has(.content-box[data-page="startseite"]) .site-logo { grid-column: 1; grid-row: 1; }
    body:has(.content-box[data-page="herbert_fritsche"]) .site-nav,
    body:has(.content-box[data-page="startseite"]) .site-nav {
        grid-column: 2;
        grid-row: 1;
        flex-wrap: nowrap;
    }
    body:has(.content-box[data-page="herbert_fritsche"]) .site-nav > .edit-toggle,
    body:has(.content-box[data-page="startseite"]) .site-nav > .edit-toggle {
        margin-left: auto;
    }
    body:has(.content-box[data-page="herbert_fritsche"]) .editor-panel,
    body:has(.content-box[data-page="startseite"]) .editor-panel {
        grid-column: 3;
        grid-row: 1 / 3;
        flex-direction: column;
        align-items: flex-end;
        margin-left: 0;
        padding: 6px 0 6px 12px;
    }
}
/* "Gesperrte" Hervorhebung (typographisch: A b s t a n d zwischen Buchstaben).
   In den Brief-Transkriptionen die deutsche Konvention für Hervorhebungen. */
.gesperrt {
    letter-spacing: 0.22em;
    margin-right: -0.22em;
}

/* ─── Klett-Briefseite: Filter-Bar + 1-Ebenen-Akkordeon ─── */
.klett-filterbar {
    margin: 0 0 1.2rem;
    padding: 0.9rem 1.1rem;
    background: rgba(0, 0, 68, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.klett-stats {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--text-light);
    margin-bottom: 0.6rem;
}
.klett-stats strong {
    color: var(--primary);
    font-size: 1.05rem;
}
.klett-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: flex-end;
}
.klett-filter-row label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--text-light);
}
.klett-filter-label { font-weight: 500; }
.klett-filter-row input,
.klett-filter-row select {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 0.85rem;
    background: #fff;
    min-width: 130px;
}
.klett-filter-row button {
    padding: 5px 14px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--text-light);
}
.klett-filter-row button:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.klett-page-content { display: flex; flex-direction: column; gap: 0.4rem; }
.klett-entry {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
}
.klett-header {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    width: 100%;
    padding: 0.75rem 1.1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--serif);
    color: var(--text);
    transition: background 0.2s;
}
.klett-header:hover { background: rgba(0, 0, 68, 0.04); }
.klett-arrow {
    color: var(--primary);
    font-size: 1.1rem;
    transition: transform 0.25s;
    display: inline-block;
}
.klett-entry.klett-open .klett-arrow { transform: rotate(90deg); }
.klett-date {
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--text-light);
    min-width: 90px;
}
.klett-recipient {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    flex: 1;
}
.klett-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.klett-entry.klett-open .klett-body {
    max-height: none;
}
.klett-body-inner {
    padding: 0.4rem 1.4rem 1.4rem;
}
.klett-h3-hidden {
    /* Originaler <h3> bleibt im DOM als Anker für Deep-Links, optisch versteckt */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Quellenfuss unter jedem Brief: dezent, klein, kursiv, mit Trennlinie. */
.brief-source-footer {
    margin: 1.5rem 0 2rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-light);
    font-family: var(--sans);
    font-style: italic;
}
.brief-source-footer .brief-src-label {
    font-style: normal;
    font-weight: 500;
    color: var(--text);
    margin-right: 0.35em;
}
.brief-source-footer .brief-scan-link {
    margin-left: 0.4em;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.brief-source-footer .brief-scan-link:hover {
    color: var(--accent);
}
.brief-source-footer .brief-scan-private {
    margin-left: 0.3em;
    font-size: 0.72rem;
    color: var(--accent);
    font-style: normal;
}

/* Action-Wrapper innerhalb des Editor-Panels (gleicher Look wie vorher als
   Reihe; auf der Startseite landet er auf der zweiten Zeile rechtsbündig). */
.ep-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.hf-fullpage-image {
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.hf-fullpage-image > img {
    display: block;
    height: 92vh;
    width: auto;
    max-width: 100%;
    margin: 0;
}
@media (max-width: 768px) {
    .hf-fullpage-image > img {
        height: auto;
        width: 100%;
    }
}

/* ─── Trumbowyg ─── */
.trumbowyg-box { border-radius: var(--radius); }

/* ─── Contact Form ─── */
.contact-form-section {
    position: relative;
}
.contact-form-title {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--primary);
    margin-bottom: 0.4rem;
}
.contact-form-desc {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
}
.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.contact-form-row:has(> :only-child) {
    grid-template-columns: 1fr;
}
.contact-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.85rem;
    color: var(--text-light);
    font-family: var(--sans);
}
.contact-req {
    color: var(--accent);
}
.contact-label input,
.contact-label textarea {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: var(--sans);
    color: var(--text);
    background: var(--cream);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.contact-label input:focus,
.contact-label textarea:focus {
    border-color: var(--primary);
    background: var(--white);
}
.contact-label textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}
.contact-form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}
.contact-submit-btn {
    padding: 10px 28px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-family: var(--sans);
    cursor: pointer;
    transition: background 0.2s ease;
    letter-spacing: 0.02em;
}
.contact-submit-btn:hover {
    background: var(--accent);
}
.contact-submit-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.contact-status {
    font-size: 0.85rem;
    color: var(--text-light);
}
.contact-status-ok {
    color: #2e7d32;
}
.contact-status-err {
    color: var(--accent);
}
.contact-privacy {
    font-size: 0.78rem;
    color: var(--text-light);
    margin-top: 1.2rem;
    line-height: 1.5;
}

/* ─── Word Import Dialog ─── */
.import-dialog-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 5000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.import-dialog-overlay.visible {
    display: flex;
}
.import-dialog {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 32px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.import-dialog-title {
    display: block;
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 12px;
}
.import-dialog-file {
    font-size: 0.88rem;
    color: var(--text);
    margin-bottom: 4px;
    word-break: break-all;
}
.import-dialog-info {
    font-size: 0.78rem;
    color: var(--text-light);
    margin-bottom: 20px;
    min-height: 1em;
}
.import-dialog-actions {
    display: flex;
    gap: 10px;
}
.import-dialog-actions button {
    padding: 8px 20px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-family: var(--sans);
    cursor: pointer;
    transition: all 0.2s ease;
}
.import-btn-replace {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
}
.import-btn-replace:hover {
    background: var(--accent);
    border-color: var(--accent);
}
.import-btn-append {
    background: var(--white);
    color: var(--primary);
    border: 1px solid var(--primary);
}
.import-btn-append:hover {
    background: var(--primary);
    color: #fff;
}
.import-btn-cancel {
    background: var(--white);
    color: var(--text-light);
    border: 1px solid var(--border);
    margin-left: auto;
}
.import-btn-cancel:hover {
    border-color: var(--text-light);
    color: var(--text);
}

/* ─── Sibling Navigation ─── */
.sibling-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 68, 0.06);
    border: 1.5px solid var(--border);
    color: var(--text-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    text-decoration: none;
    z-index: 100;
    transition: all 0.3s var(--transition);
    cursor: none;
}
.sibling-nav:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}
.sibling-prev { left: 16px; }
.sibling-next { right: 16px; }

/* ─── Scroll Reveal ─── */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--transition), transform 0.7s var(--transition-smooth);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Page Transition ─── */
.page-transition {
    position: fixed; inset: 0;
    background: var(--primary);
    z-index: 9999;
    transform: scaleY(0);
    transform-origin: bottom;
    pointer-events: none;
}
.page-transition.entering {
    animation: transitionIn 0.5s var(--transition-smooth) forwards;
}
@keyframes transitionIn {
    0% { transform: scaleY(0); transform-origin: bottom; }
    50% { transform: scaleY(1); transform-origin: bottom; }
    50.01% { transform-origin: top; }
    100% { transform: scaleY(0); transform-origin: top; }
}

/* ─── Content fade in ─── */
.content-box {
    opacity: 0;
    transform: translateY(24px);
    animation: fadeInUp 0.7s var(--transition-smooth) 0.15s forwards;
}
@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Clearfix ─── */
.clearfix::after { content: ""; display: table; clear: both; }

/* ─── Product Info ─── */
.product-info {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
    display: inline-block;
}
.product-info p { margin-bottom: 0.3rem; font-size: 0.92rem; }
.product-info .price {
    font-size: 1.1rem;
    font-weight: 600;
    color: #5a5afa;
    margin-top: 0.5rem;
}
.product-info a {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.88rem;
    color: var(--primary);
    text-decoration: underline;
}
.product-info a:hover { color: #5a5afa; }

/* ─── Image float (content) ─── */
.content-image-right {
    float: right;
    margin: 0 0 1.5rem 2rem;
    width: 220px; height: 314px;
    overflow: hidden;
}
.content-image-right img {
    width: 100%; height: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    object-fit: cover;
    object-position: right center;
}

/* ─── Kontakt: Layout & Gästebuch-Stil ─── */
.content-box[data-page="kontakt"] #pageContent {
    display: flex;
    flex-direction: column;
}
.content-box[data-page="kontakt"] .hf-contact-form {
    order: -1;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    background: var(--cream, #faf8f3);
    border: 1px solid var(--border, #d4cfc5) !important;
    border-radius: 4px;
    padding: 1.5rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.content-box[data-page="kontakt"] .hf-cf-title {
    font-family: var(--serif) !important;
    font-size: 1.2rem !important;
    color: var(--primary, #000044) !important;
    font-weight: 500 !important;
    margin-bottom: 0.3rem !important;
}
.content-box[data-page="kontakt"] .hf-cf-field label {
    font-family: var(--sans) !important;
    font-size: 0.78rem !important;
    color: var(--text-light, #6b6b6b) !important;
    letter-spacing: 0.02em;
    font-weight: 600 !important;
}
.content-box[data-page="kontakt"] .hf-cf-field input,
.content-box[data-page="kontakt"] .hf-cf-field textarea {
    background: var(--white, #fff) !important;
    border: 1px solid var(--border, #d4cfc5) !important;
    border-radius: 4px !important;
    padding: 0.6rem 0.75rem !important;
    font-family: var(--sans) !important;
    font-size: 0.88rem !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.content-box[data-page="kontakt"] .hf-cf-field input:focus,
.content-box[data-page="kontakt"] .hf-cf-field textarea:focus {
    border-color: var(--primary, #000044) !important;
    box-shadow: 0 0 0 3px rgba(0,0,68,0.08) !important;
}
.content-box[data-page="kontakt"] .hf-cf-field textarea {
    min-height: 120px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}
.content-box[data-page="kontakt"] .hf-cf-charcount {
    font-size: 0.72rem !important;
    color: var(--text-light, #6b6b6b) !important;
}
.content-box[data-page="kontakt"] .hf-cf-captcha label {
    font-family: var(--sans) !important;
    font-size: 0.78rem !important;
    color: var(--text-light, #6b6b6b) !important;
    font-weight: 600 !important;
}
.content-box[data-page="kontakt"] .hf-cf-captcha input {
    border: 1px solid var(--border, #d4cfc5) !important;
    border-radius: 4px !important;
    font-family: var(--sans) !important;
    font-size: 0.88rem !important;
}
.content-box[data-page="kontakt"] .hf-cf-captcha input:focus {
    border-color: var(--primary, #000044) !important;
    box-shadow: 0 0 0 3px rgba(0,0,68,0.08) !important;
}
.content-box[data-page="kontakt"] .hf-cf-captcha-reload {
    border: 1px solid var(--border, #d4cfc5) !important;
    border-radius: 4px !important;
    color: var(--text-light, #6b6b6b) !important;
}
.content-box[data-page="kontakt"] .hf-cf-captcha-reload:hover {
    background: rgba(0,0,68,0.04) !important;
    color: var(--primary, #000044) !important;
}
.content-box[data-page="kontakt"] .hf-cf-submit {
    background: var(--primary, #000044) !important;
    color: var(--white, #fff) !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: var(--sans) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    padding: 0.55rem 1.2rem !important;
    cursor: pointer;
    transition: background 0.2s !important;
}
.content-box[data-page="kontakt"] .hf-cf-submit:hover {
    background: var(--accent, #8b0000) !important;
    opacity: 1 !important;
}
.content-box[data-page="kontakt"] .hf-cf-submit:active {
    transform: translateY(1px);
}
.content-box[data-page="kontakt"] .hf-cf-submit:disabled {
    opacity: 0.5 !important;
}
.content-box[data-page="kontakt"] .hf-cf-status.error {
    color: #c62828 !important;
    font-size: 0.82rem !important;
}
.content-box[data-page="kontakt"] .hf-cf-status.success {
    color: #2e7d32 !important;
    font-size: 0.82rem !important;
}
.content-box[data-page="kontakt"] .hf-cf-success-icon {
    color: #2e7d32 !important;
}
.content-box[data-page="kontakt"] .kontakt-text {
    order: 1;
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--border, #d4cfc5);
    border-radius: 4px;
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--text-light, #6b6b6b);
    line-height: 1.65;
}
.content-box[data-page="kontakt"] .kontakt-text p {
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--text-light, #6b6b6b);
    line-height: 1.65;
}

/* ─── Gesamtausgabe Info-Block unter Buchblock ─── */
h3.ga-info-block {
    text-align: left;
    margin: 2rem auto 2rem 0;
    max-width: 52ch;
    line-height: 1.6;
}

/* ─── Gesamtausgabe Cover-Slideshow ─── */
.ga-buchblock-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}
.ga-buchblock-wrap > img {
    border-radius: 4px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.50),
                0 4px 12px rgba(0,0,0,0.35),
                0 1px 4px rgba(0,0,0,0.25);
}
.ga-cover-slideshow {
    position: absolute;
    right: 1%;
    bottom: -33%;
    width: 31.3%;
    aspect-ratio: 2 / 2.85;
    transform: rotate(20.5deg);
    overflow: hidden;
    border-radius: 3px;
    filter: drop-shadow(-8px 10px 10px rgba(0,0,0,0.45)) drop-shadow(-3px 5px 4px rgba(0,0,0,0.25));
}
.ga-cover-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    opacity: 0;
    z-index: 0;
    transition: opacity 1.2s ease;
}
.ga-cover-slide.active {
    opacity: 1;
    z-index: 2;
}
.ga-cover-slide.outgoing {
    opacity: 1;
    z-index: 1;
}
.ga-mobile-buchfoto {
    display: none;
}
.ga-band-label {
    display: none;
}
.ga-band-label.fade .ga-band-nr {
    opacity: 0;
}
@media (max-width: 768px) {
    .ga-mobile-buchfoto {
        display: block;
        width: 100%;
        border-radius: 4px;
        margin: 1rem 0;
        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    }
    .ga-buchblock-wrap > img {
        display: none;
    }
    .ga-cover-slideshow {
        position: relative;
        right: auto;
        bottom: auto;
        width: 65%;
        max-width: 280px;
        margin: 0 auto;
        aspect-ratio: 2 / 2.85;
        transform: none;
        filter: none;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 10px 35px rgba(0,0,0,0.40),
                    0 4px 12px rgba(0,0,0,0.25);
    }
    .ga-band-label {
        display: block;
        text-align: center;
        font-family: var(--serif);
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text);
        letter-spacing: 0.04em;
        margin-top: 0.5rem;
    }
    .ga-band-label .ga-band-nr {
        transition: opacity 0.4s ease;
    }
    .ga-cover-slide {
        border-radius: 4px;
    }
}

/* ─── Diashow Gallery ─── */
.content-box p.dia-caption {
    text-align: center;
    font-family: var(--sans);
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.3;
    margin-top: 0.8rem;
    margin-bottom: 1.5rem;
    hyphens: manual;
}
.dia-gallery {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 3 / 4;
    margin: 0 auto 1.5rem;
    border-radius: 14px;
    overflow: hidden;
    background: #1a1a1a;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3), 0 12px 40px rgba(0,0,0,0.4), 0 20px 60px rgba(0,0,0,0.2);
}
.dia-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    opacity: 0;
    transition: opacity 1.5s ease;
    pointer-events: none;
}
.dia-slide.active {
    opacity: 1;
}
.dia-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
}
.dia-settings label {
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.dia-settings input[type="number"] {
    width: 70px;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: var(--sans);
    text-align: center;
    background: var(--white);
}
.dia-settings input[type="number"]:focus {
    border-color: var(--primary);
}
.dia-play {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 0.45rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: var(--sans);
    cursor: pointer;
    transition: background 0.2s;
}
.dia-play:hover {
    background: var(--accent);
}
.dia-play.playing {
    background: var(--accent);
}

/* Diashow Manager (Editor) */
.dia-manager {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.dia-manager h3 {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--text);
}
.dia-mgr-label {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.6rem;
}
.dia-mgr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    margin-bottom: 1.5rem;
    min-height: 40px;
}
.dia-mgr-thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid var(--border);
    transition: border-color 0.2s;
}
.dia-mgr-thumb:hover {
    border-color: var(--primary);
}
.dia-mgr-thumb.dia-mgr-active {
    border-color: var(--primary);
}
.dia-mgr-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dia-mgr-remove, .dia-mgr-add {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}
.dia-mgr-thumb:hover .dia-mgr-remove,
.dia-mgr-thumb:hover .dia-mgr-add {
    opacity: 1;
}
.dia-mgr-remove {
    background: var(--accent);
    color: #fff;
}
.dia-mgr-remove:hover {
    background: #a00;
}
.dia-mgr-add {
    background: var(--primary);
    color: #fff;
}
.dia-mgr-add:hover {
    background: #000066;
}
.dia-mgr-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 0.8rem;
}
.dia-tab {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.35rem 0.7rem;
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
}
.dia-tab:hover {
    border-color: var(--primary);
    color: var(--text);
}
.dia-tab.dia-tab-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.dia-tab-count {
    font-size: 0.7rem;
    opacity: 0.7;
}
.dia-tab.dia-tab-active .dia-tab-count {
    opacity: 0.85;
}
.dia-mgr-empty {
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--text-light);
    font-style: italic;
    grid-column: 1 / -1;
    padding: 0.5rem 0;
}
.dia-mgr-available {
    opacity: 0.7;
    transition: opacity 0.2s;
}
.dia-mgr-available:hover {
    opacity: 1;
}

/* ─── Slideshow Settings Dropdown (from header gear) ─── */
.slideshow-settings-dropdown {
    display: none;
    position: fixed;
    top: 56px;
    right: 1.5rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 18px 20px;
    min-width: 240px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 950;
}
.slideshow-settings-dropdown.open {
    display: block;
}
.slideshow-settings-dropdown strong {
    display: block;
    font-size: 0.85rem;
    color: var(--primary);
    margin-bottom: 12px;
}
.slideshow-settings-dropdown label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-light);
    margin-bottom: 10px;
}
.slideshow-settings-dropdown input[type="number"] {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.88rem;
    font-family: var(--sans);
}
.slideshow-settings-dropdown input[type="number"]:focus {
    border-color: var(--primary);
}
.slideshow-settings-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
.slideshow-settings-actions button {
    padding: 6px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.82rem;
    cursor: pointer;
    font-family: var(--sans);
}
.slideshow-settings-actions button:hover {
    background: var(--accent);
}
.slideshow-settings-actions span {
    font-size: 0.78rem;
    color: var(--text-light);
}

/* ─── Hero Image Manager (inside slideshow settings dropdown) ─── */
.hero-mgr {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.hero-mgr strong {
    display: block;
    font-size: 0.85rem;
    color: var(--primary);
    margin-bottom: 10px;
}
.hero-mgr-label {
    font-size: 0.78rem;
    color: var(--text-light);
    margin: 0 0 6px;
    font-weight: 600;
}
.hero-mgr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}
.hero-mgr-thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid var(--border);
    transition: border-color 0.2s;
    cursor: default;
}
.hero-mgr-thumb:hover {
    border-color: var(--primary);
}
.hero-mgr-thumb.hero-mgr-active {
    border-color: var(--primary);
}
.hero-mgr-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-mgr-remove,
.hero-mgr-add {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}
.hero-mgr-thumb:hover .hero-mgr-remove,
.hero-mgr-thumb:hover .hero-mgr-add {
    opacity: 1;
}
.hero-mgr-remove {
    background: var(--accent);
    color: #fff;
}
.hero-mgr-add {
    background: var(--primary);
    color: #fff;
}
.hero-mgr-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.hero-tab {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 0.72rem;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--sans);
}
.hero-tab.hero-tab-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.hero-tab-count {
    font-size: 0.65rem;
    opacity: 0.7;
}
.hero-mgr-empty {
    font-size: 0.75rem;
    color: var(--text-light);
    grid-column: 1 / -1;
    padding: 8px 0;
}
.hero-mgr-available {
    margin-top: 8px;
}
/* Widen the dropdown when hero manager is present */
.slideshow-settings-dropdown:has(.hero-mgr) {
    min-width: 340px;
    max-width: 400px;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}

/* ─── Museum Page ─── */
/* Museum now uses standard cream background like all other pages */

/* ─── Child Navigation (auto-generated for parent pages) ─── */
.child-nav {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}
.child-nav-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* child-nav Reiter im Akkordeon-Look (Schatten + Hover-Lift wie .lt-section) */
.child-nav-item {
    border-radius: var(--radius);
    border: 1px solid rgba(0, 0, 68, 0.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}
.child-nav-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}
.child-nav-item:hover .child-nav-link {
    background: transparent;
    border-color: transparent;
}
.child-nav-link::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
    transition: transform 0.3s var(--transition), opacity 0.3s ease;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.5;
}
.child-nav-item:hover .child-nav-link::after {
    opacity: 1;
    transform: rotate(-45deg) translate(2px, 2px);
}
.child-nav-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.2rem;
    border-radius: var(--radius);
    transition: all 0.2s ease;
    text-decoration: none;
    color: var(--text);
    border: 1px solid transparent;
}
.child-nav-link:hover {
    background: var(--cream);
    border-color: var(--border);
    color: var(--primary);
}
.child-nav-cover {
    width: 44px;
    height: 60px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.25), 1px 1px 3px rgba(0,0,0,0.15);
}
.child-nav-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.child-nav-title {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--primary);
    line-height: 1.3;
}
.child-nav-meta {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.child-nav-link:hover .child-nav-title {
    color: #5a5afa;
}
.child-nav-sub {
    padding: 0 0 0.5rem 2.2rem;
    display: flex;
    flex-direction: column;
}
.child-nav-sublink {
    font-size: 0.85rem;
    padding: 0.35rem 1rem;
    color: var(--text-light);
    text-decoration: none;
    border-radius: var(--radius);
    transition: all 0.15s ease;
}
.child-nav-sublink:hover {
    color: #5a5afa;
    background: rgba(0,0,68,0.03);
}
/* With cover images: grid layout for book lists */
.child-nav-grid:has(.child-nav-cover) {
    gap: 4px;
}

/* ─── Collapsible Child Navigation ─── */
.child-nav-item--collapsible {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 2px;
}
.child-nav-collapse-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1.2rem;
    cursor: pointer;
    transition: background 0.2s ease;
    user-select: none;
}
.child-nav-collapse-header:hover {
    background: var(--cream);
}
.child-nav-collapse-arrow {
    font-size: 1.3rem;
    color: var(--text-light);
    transition: transform 0.3s var(--transition-smooth);
    flex-shrink: 0;
    line-height: 1;
}
.child-nav-open > .child-nav-collapse-header .child-nav-collapse-arrow {
    transform: rotate(90deg);
    color: #5a5afa;
}
.child-nav-collapse-header .child-nav-title {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--primary);
    line-height: 1.3;
    text-decoration: none;
}
.child-nav-collapse-header .child-nav-title:hover {
    color: #5a5afa;
}
.child-nav-collapse-header .child-nav-meta {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.3;
}
.child-nav-collapse-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--transition-smooth);
    border-top: 0 solid var(--border);
}
.child-nav-open > .child-nav-collapse-body {
    max-height: 5000px;
    border-top-width: 1px;
}
.child-nav-collapse-content {
    padding: 1.2rem;
}

/* Museum menu container (legacy, unused) */
.museum-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.museum-menu-group {
    display: flex;
    flex-direction: column;
}

/* Main menu items */
.museum-menu-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, var(--serif);
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    border-left: 2px solid transparent;
    transition: all 0.25s ease;
    border-radius: 0 4px 4px 0;
    line-height: 1.4;
}
.museum-menu-link:hover {
    background: rgba(255,255,255,0.06);
    border-left-color: #c0a060;
    color: #c0a060;
    padding-left: 26px;
    border-bottom: none;
}
.museum-bullet {
    font-size: 0.7rem;
    opacity: 0.5;
    transition: opacity 0.25s;
    flex-shrink: 0;
}
.museum-menu-link:hover .museum-bullet {
    opacity: 1;
    color: #c0a060;
}

/* Submenu */
.museum-submenu {
    display: flex;
    flex-direction: column;
    margin-left: 34px;
    padding: 2px 0 8px;
    border-left: 1px solid rgba(255,255,255,0.1);
}
.museum-submenu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, var(--serif);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    transition: all 0.25s ease;
    border-radius: 0 3px 3px 0;
    line-height: 1.4;
}
.museum-submenu-link:hover {
    background: rgba(255,255,255,0.04);
    color: #c0a060;
    padding-left: 22px;
    border-bottom: none;
}
.museum-sub-bullet {
    font-size: 0.6rem;
    opacity: 0.4;
    transition: opacity 0.25s;
    flex-shrink: 0;
}
.museum-submenu-link:hover .museum-sub-bullet {
    opacity: 1;
    color: #c0a060;
}

/* ─── Audio Player (Tondokumente) ─── */
.audio-track-item {
    position: relative;
}
.audio-track-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-radius: var(--radius);
    transition: background 0.2s;
}
.audio-track-wrapper.audio-active {
    background: rgba(90, 90, 250, 0.05);
    padding: 4px 8px;
    margin: 0 -8px;
}
.audio-track-content {
    flex: 1;
    min-width: 0;
}
.audio-track-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    order: -1;
}
.audio-play-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--primary);
    background: transparent;
    color: var(--primary);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}
.audio-play-icon {
    display: inline-block;
    line-height: 1;
}
@media (max-width: 768px) {
    .audio-play-icon {
        transform: translateY(-1px);
    }
    .audio-play-icon-pause {
        transform: translateY(0);
        letter-spacing: -1px;
    }
}
.audio-play-btn:hover {
    background: var(--primary);
    color: #fff;
}
.audio-play-btn.playing {
    background: #5a5afa;
    border-color: #5a5afa;
    color: #fff;
    font-size: 9px;
    letter-spacing: 1px;
}
.audio-download-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--cream);
    color: #0056b3;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    text-decoration: none;
}
.audio-download-btn:hover {
    border-color: #0056b3;
    color: #003d80;
    background: #fff;
}

/* Merge / download-all button */
.audio-merge-download {
    margin: 1.5rem 0 0.5rem;
    text-align: center;
}
.audio-merge-download.audio-chapter-merge {
    margin: 1rem 0 0.5rem;
}
.audio-merge-download.audio-merge-all {
    margin: 2.5rem 0 0.5rem;
}
.audio-merge-btn {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border: 1.5px solid #c0bdb6;
    border-radius: 6px;
    background: linear-gradient(to bottom, #f5f3ee, #e8e4db);
    color: var(--primary);
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6);
}
/* Biographie two-book layout */
.bio-books {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin: 1.5rem 0 1.5rem 0;
}
.bio-book {
    margin: 0;
    text-align: center;
}
.bio-book img {
    height: 475px;
    width: auto;
    border-radius: 3px;
    box-shadow: 6px 10px 35px rgba(0,0,0,0.35), 3px 5px 12px rgba(0,0,0,0.25);
    display: block;
}
.bio-book figcaption {
    margin-top: 1.2rem;
    font-family: var(--sans);
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.3;
}
@media (max-width: 600px) {
    .bio-books {
        flex-direction: column;
        align-items: center;
    }
    .bio-book img { height: 264px; }
}

/* Hahnemann bust image */
.hahnemann-bust {
    margin: 1.5rem 0;
}
.hahnemann-bust img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 4px 6px 20px rgba(0,0,0,0.3), 2px 3px 8px rgba(0,0,0,0.2);
}
.hahnemann-bust figcaption {
    margin-top: 0.5rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.4;
    text-align: left;
}

/* Centered poem (Sommersonnenwende on in_memoriam) */
.poem-centered {
    text-align: center;
    margin: 2rem 0;
}
.poem-centered p {
    text-align: center;
}

/* Gedicht-Register: Volltext im Akkordeon */
.gedicht-text {
    font-family: var(--serif);
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--text);
    max-width: 36rem;
    margin: 0 auto;
    padding: 0.5rem 0.4rem;
}
.gedicht-stanza {
    margin: 0 0 1.2rem;
    text-align: left;
    text-indent: 0;
    hyphens: none;
}
.gedicht-stanza:last-child { margin-bottom: 0; }

/* Gedicht-Detail-Seite */
.gedicht-detail {
    max-width: 42rem;
    margin: 0 auto;
    padding: 1rem 0.5rem 2rem;
    font-family: var(--serif);
}
.gedicht-detail-head {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.gedicht-detail-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem 1.5rem;
    font-size: 0.88rem;
    color: var(--text-light);
    font-style: italic;
}
.gedicht-meta-label {
    font-variant: small-caps;
    letter-spacing: 0.05em;
    font-style: normal;
    margin-right: 0.2em;
}
.gedicht-detail-title {
    font-family: var(--serif);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--text);
    text-align: center;
    margin: 0 0 1.6rem;
    line-height: 1.25;
}
.gedicht-audio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: 0.7rem;
    padding: 0;
    border: 1px solid #5a5afa;
    border-radius: 50%;
    background: #fff;
    color: #5a5afa;
    cursor: pointer;
    vertical-align: middle;
    font-size: 0.82rem;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 68, 0.12);
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.gedicht-audio-btn:hover { background: #5a5afa; color: #fff; }
.gedicht-audio-btn:active { transform: translateY(1px); }
.gedicht-audio-btn.playing {
    background: #5a5afa;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(90, 90, 250, 0.25);
}
.gedicht-audio-btn .gedicht-audio-icon { letter-spacing: -0.1em; }
.gedicht-detail-body {
    font-size: 1.18rem;
    line-height: 1.75;
    color: var(--text);
    text-align: center;
}
.gedicht-detail-body p,
.gedicht-detail-body .gedicht-stanza {
    text-align: center;
    max-width: none;
    margin: 0 0 1.4rem;
}
.gedicht-detail-body .gedicht-text { max-width: none; text-align: center; }
.gedicht-detail-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-family: var(--sans);
    font-size: 0.88rem;
}
.gedicht-detail-nav a {
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px dotted var(--primary);
}
.gedicht-detail-nav a:hover { border-bottom-style: solid; }
.gedicht-nav-prev { justify-self: start; }
.gedicht-nav-center {
    justify-self: center;
    font-variant: small-caps;
    letter-spacing: 0.05em;
}
.gedicht-nav-next { justify-self: end; }
.gedicht-nav-label {
    font-style: italic;
    font-family: var(--serif);
    font-size: 0.95rem;
}
.gedicht-nav-spacer { display: block; }
@media (max-width: 600px) {
    .gedicht-detail-nav { grid-template-columns: 1fr; gap: 0.4rem; text-align: center; }
    .gedicht-detail-nav a { justify-content: center; }
    .gedicht-nav-prev, .gedicht-nav-next { justify-self: stretch; }
}

/* Gedichte-Einführungsseite */
.ged-einfuehrung { max-width: 780px; font-family: var(--serif); }
.ged-einfuehrung-body { font-size: 1.18rem; line-height: 1.72; color: var(--text); }
.ged-einfuehrung-body p { margin: 0 0 1rem; font-size: 1.18rem; line-height: 1.72; }
.ged-einfuehrung-legende {
    margin-top: 2.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.ged-einfuehrung-legende h2 {
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--primary);
    margin: 0 0 0.8rem;
}
.ged-einfuehrung-legende h2.inline-editable {
    outline: 2px dashed var(--accent);
    outline-offset: 4px;
    background: rgba(255, 255, 255, 0.5);
    cursor: text;
}
.ged-legende-list {
    margin: 0;
    padding: 0;
    font-family: var(--sans);
    font-size: 0.82rem;
    line-height: 1.55;
}
.ged-legende-row {
    display: grid;
    grid-template-columns: 3em 1fr;
    gap: 0.2rem 0.8rem;
    padding: 0.3rem 0;
    border-bottom: 1px dotted var(--border);
}
.ged-legende-row:last-child { border-bottom: none; }
.ged-legende-row dt {
    font-weight: 600;
    color: #5a5afa;
    font-variant-numeric: tabular-nums;
}
.ged-legende-row dd { margin: 0; color: var(--text); }
.ged-einfuehrung-nav {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    font-family: var(--sans);
    font-size: 0.9rem;
}
.ged-einfuehrung-nav a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--primary);
}
.ged-einfuehrung-nav a:hover { border-bottom-style: solid; }
@media (max-width: 600px) {
    .ged-legende-row { grid-template-columns: 2.5em 1fr; }
    .ged-einfuehrung-nav { flex-direction: column; gap: 0.5rem; }
}

/* Gedichte-Übersichtsseite */
.gedichte-overview { max-width: 780px; font-family: var(--sans); }
.gedichte-overview-intro,
.gedichte-overview-intro-box > p {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.18rem;
    line-height: 1.72;
    margin: 0 0 1rem;
}
.gedichte-overview-intro-box { margin: 0 0 1rem; }
.gedichte-overview-einfuehrung,
.gedichte-overview-vorwort,
.gedichte-overview-cross {
    margin: 0.3rem 0;
    font-size: 0.92rem;
}
.gedichte-overview-einfuehrung a,
.gedichte-overview-vorwort a,
.gedichte-overview-cross a {
    color: #5a5afa;
    text-decoration: none;
    border-bottom: 1px dotted #5a5afa;
}
.gedichte-overview-einfuehrung a:hover,
.gedichte-overview-vorwort a:hover,
.gedichte-overview-cross a:hover { border-bottom-style: solid; }
.gedichte-overview-einfuehrung span,
.gedichte-overview-vorwort span,
.gedichte-overview-cross span {
    color: var(--text-light);
    font-size: 0.88rem;
    margin-left: 0.4rem;
}

/* ─── Gedichte Hub-Seite: Karten (Zone 1), Zone-Trennstriche, Register-Banner (Zone 3) ─── */
.gedichte-hub-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 1.4rem 0 0;
}
.gedichte-hub-card {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    text-decoration: none;
    color: var(--text);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.2s ease;
}
.gedichte-hub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #5a5afa;
    background: rgba(255, 255, 255, 0.55);
}
.gedichte-hub-card .ghc-title {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.4rem;
    line-height: 1.3;
}
.gedichte-hub-card .ghc-sub {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-light);
    font-style: italic;
}

.gedichte-zone-title {
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--primary);
    margin: 2.2rem 0 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-weight: 600;
}

.gedichte-hub-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 0.5rem;
    padding: 1.1rem 1.3rem;
    background: linear-gradient(135deg, rgba(90,90,250,0.06), rgba(90,90,250,0.02));
    border: 1px solid rgba(90,90,250,0.3);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.gedichte-hub-banner:hover {
    background: linear-gradient(135deg, rgba(90,90,250,0.10), rgba(90,90,250,0.04));
    border-color: rgba(90,90,250,0.6);
}
.gedichte-hub-banner .ghb-icon {
    font-size: 1.6rem;
    line-height: 1;
    color: #5a5afa;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.gedichte-hub-banner .ghb-icon img {
    width: 56px;
    height: auto;
    max-height: 72px;
    object-fit: contain;
    background: transparent;
}
.gedichte-hub-banner .ghb-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.2rem;
}
.gedichte-hub-banner .ghb-title {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--primary);
}
.gedichte-hub-banner .ghb-sub {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.4;
}
.gedichte-hub-banner .ghb-arrow {
    font-size: 1.4rem;
    color: #5a5afa;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.gedichte-hub-banner:hover .ghb-arrow {
    transform: translateX(4px);
}

@media (max-width: 700px) {
    .gedichte-hub-cards { grid-template-columns: 1fr; }
    .gedichte-hub-banner { padding: 0.9rem 1rem; }
    .gedichte-hub-banner .ghb-icon { font-size: 1.3rem; }
    .gedichte-hub-banner .ghb-title { font-size: 1.05rem; }
}
.gedichte-overview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 1.6rem 0 0.8rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.gedichte-overview-count { font-size: 0.92rem; color: var(--text-light); }
.gedichte-overview-count strong { color: var(--text); }
.gedichte-overview-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.gedichte-overview-sort select {
    font-family: inherit;
    font-size: 0.92rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid #c8cbe8;
    background: linear-gradient(to bottom, #f0f2ff 0%, #ffffff 40%, #eef0ff 100%);
    color: var(--text);
    border-radius: 6px;
    text-transform: none;
    letter-spacing: normal;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 1px 2px rgba(0, 0, 68, 0.1);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.gedichte-overview-sort select:hover { border-color: #9aa0d8; }
.gedichte-overview-sort select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 0 0 3px rgba(0, 0, 68, 0.12);
}
.gedichte-overview-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-light);
    font-style: italic;
}
.gedichte-overview-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}
.ged-item {
    border-bottom: 1px solid var(--border);
}
.ged-item-link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title year"
        "kanals kanals"
        "incipit incipit";
    gap: 0.1rem 0.6rem;
    align-items: baseline;
    padding: 0.75rem 0.8rem;
    text-decoration: none;
    color: var(--text);
    transition: background 0.12s ease;
}
.ged-item-link:hover { background: transparent; }
.ged-item-title {
    grid-area: title;
    font-family: var(--serif);
    font-size: 1.12rem;
    color: var(--primary);
    border-bottom: 1px dotted transparent;
}
.ged-item-link:hover .ged-item-title { border-bottom-color: var(--primary); }
.ged-item-year {
    grid-area: year;
    font-size: 0.85rem;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ged-item-kanals { grid-area: kanals; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ged-item-kanal {
    font-size: 0.78rem;
    background: #f6f4ee;
    border: 1px solid var(--border);
    padding: 0.05rem 0.35rem;
    border-radius: 2px;
    color: #5a5afa;
    font-weight: 600;
}
.ged-item-kanal-date { color: var(--text-light); font-weight: 400; margin-left: 0.2em; }
.ged-item-incipit {
    grid-area: incipit;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--text-light);
    margin-top: 0.2rem;
}

/* Referenz-Sektion (gedruckte Bände, nicht im Volltext) */
.gedichte-overview-refs {
    margin-top: 1.8rem;
    padding: 0.8rem 1rem;
    background: transparent;
    border-left: 3px solid #5a5afa;
    border-radius: 2px;
}
.gedichte-overview-refs summary {
    cursor: pointer;
    font-size: 0.92rem;
    color: var(--text);
    padding: 0.2rem 0;
}
.gedichte-overview-refs summary:hover { color: var(--primary); }
.gedichte-overview-reflist {
    list-style: none;
    margin: 0.8rem 0 0;
    padding: 0;
    columns: 2;
    column-gap: 1.5rem;
    font-size: 0.88rem;
}
.gedichte-overview-reflist li {
    break-inside: avoid;
    padding: 0.2rem 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.2rem 0.5rem;
    align-items: baseline;
}
.ged-ref-title { font-family: var(--serif); color: var(--text); grid-column: 1; }
.ged-ref-year { font-family: var(--serif); color: var(--text-light); font-variant-numeric: tabular-nums; font-size: inherit; grid-column: 2; }
.ged-ref-band { color: var(--text-light); font-style: italic; font-size: 0.82rem; grid-column: 1 / -1; }

/* Alphabetisches Akkordeon (A, B, C, …) innerhalb der Referenz-Sektion */
.gedichte-letter-groups {
    margin: 0.8rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.gedichte-letter-group {
    border-bottom: 1px solid var(--border);
}
.gedichte-letter-group:last-child { border-bottom: none; }
.gedichte-letter-group > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.45rem 0.2rem;
    font-size: 0.92rem;
    color: var(--text);
    transition: color 0.15s ease;
}
.gedichte-letter-group > summary::-webkit-details-marker { display: none; }
.gedichte-letter-group > summary::before {
    content: '\203a';
    color: #5a5afa;
    font-size: 1.1rem;
    line-height: 1;
    width: 0.9rem;
    transition: transform 0.2s ease;
    display: inline-block;
}
.gedichte-letter-group[open] > summary::before { transform: rotate(90deg); }
.gedichte-letter-group > summary:hover { color: var(--primary); }
.gedichte-letter-label {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--primary);
    min-width: 1.2rem;
}
.gedichte-letter-count {
    color: var(--text-light);
    font-size: 0.85rem;
}
.gedichte-letter-group .gedichte-overview-reflist {
    margin: 0.4rem 0 0.7rem 1.6rem;
}
/* Querverweis-Einträge (»siehe …« / »anderer Titel für …«) — kursiv und gedämpft,
 * Anzeige in der Liste, aber nicht in den Zählungen mitgezählt. */
.gedichte-overview-reflist li.ged-ref-xref .ged-ref-title {
    font-style: italic;
    color: var(--text-light);
}
.content-box ul.gedichte-overview-reflist li::before,
main ul.gedichte-overview-reflist li::before,
.content-box ul.gedichte-overview-list li::before,
main ul.gedichte-overview-list li::before { background: #5a5afa; }
@media (max-width: 600px) {
    .gedichte-overview-reflist { columns: 1; }
    .gedichte-overview-toolbar { flex-direction: column; align-items: stretch; }
}

.audio-merge-btn:hover {
    background: linear-gradient(to bottom, var(--primary), #000033);
    color: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
}
.audio-merge-btn:active {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.1);
    transform: translateY(1px);
}
.audio-merge-btn.audio-merge-loading {
    opacity: 0.6;
    pointer-events: none;
}
.audio-upload-btn,
.audio-delete-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--cream);
    color: var(--text-light);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}
.audio-upload-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #fff;
}
.audio-delete-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: #fff;
}
.audio-upload-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}
.audio-progress {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0 2px 34px;
    cursor: pointer;
}
.audio-progress-track {
    flex: 1;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.audio-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}
.audio-time {
    font-size: 0.7rem;
    color: var(--text-light);
    font-family: var(--sans);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.audio-track-line {
    display: inline;
}

/* ─── Akkordeon-Basis (gilt für alle Akkordeons) ─── */
.akt-entry {
    border: 1px solid rgba(0,0,68,0.15);
    border-radius: var(--radius);
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.akt-entry:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}
.akt-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
    background: rgba(80, 90, 100, 0.08);
    transition: background 0.2s ease;
    /* Button reset */
    border: none;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    margin: 0;
}
.akt-header:hover {
    background: rgba(0, 0, 68, 0.03);
}
.akt-arrow {
    font-size: 1.3rem;
    color: var(--text-light);
    transition: transform 0.3s var(--transition-smooth);
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    line-height: 1;
}
.akt-open .akt-arrow {
    transform: rotate(90deg);
    color: #5a5afa;
}
.akt-title {
    flex: 1;
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--primary);
    line-height: 1.3;
}
.akt-subtitle {
    width: 100%;
    font-family: var(--serif);
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--text-light);
    line-height: 1.3;
    padding-left: 28px;
    margin-top: -2px;
}
.akt-meta {
    font-size: 0.78rem;
    color: var(--text-light);
    white-space: nowrap;
    flex-shrink: 0;
}
.akt-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--transition-smooth);
}
.akt-open .akt-body {
    max-height: 50000px;
}
.akt-body-inner {
    padding: 1em 20px 20px 48px;
}
.akt-body-inner p.akt-cover-caption {
    text-align: center;
    margin-top: 18px;
    font-family: var(--serif, 'Cormorant Garamond', serif);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-light);
}
.akt-body-inner p {
    font-size: 0.95rem;
    line-height: 1.75;
}
/* Siglen-Liste (KBAR, CMO, …): Erklärungstext kompakter,
   Abkürzung selbst behält die normale Größe. */
.akt-body-inner p.sigle {
    font-size: 0.82rem;
    line-height: 1.35;
    margin: 0.15em 0;
}
.akt-body-inner p.sigle strong {
    font-size: 0.95rem;
}

/* Briefdokumente Accordion: edition images side by side under text */
.bd-editions-row {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: flex-end;
    margin-top: 1.5rem;
}
.bd-editions-row .brief-edition {
    flex: 0 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bd-editions-row .brief-edition .content-image {
    width: 305px;
    height: 432px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 6px 10px 35px rgba(0,0,0,0.35), 3px 5px 12px rgba(0,0,0,0.25);
}
@media (max-width: 750px) {
    .bd-editions-row { flex-direction: column; align-items: center; }
    .bd-editions-row .brief-edition .content-image { width: 260px; height: auto; }
}

/* Tondokumente Accordion */
#tdAccordion .akt-body-inner {
    padding-top: 1rem;
}
.td-cd-image {
    float: right;
    margin: 0 0 1em 1.5em;
}
.td-cd-image img {
    width: 300px;
    height: auto;
    border-radius: 4px;
    box-shadow: 4px 6px 20px rgba(0,0,0,0.3), 2px 3px 8px rgba(0,0,0,0.2);
    display: block;
}
.td-cd-image img.td-cd-image-extra {
    margin-top: 1rem;
}
.td-cd-caption {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.4;
}
/* Gottfried Benn portrait – full width between intro and tracks */
.td-portrait-full {
    margin: 1.5rem 0;
}
.td-portrait-full img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 4px 6px 20px rgba(0,0,0,0.3), 2px 3px 8px rgba(0,0,0,0.2);
}
.td-portrait-full figcaption {
    margin-top: 0.5rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.4;
}
@media (max-width: 768px) {
    .td-cd-image { float: none; display: flex; flex-direction: column; align-items: center; margin: 1.5rem 0 1em 0; }
    .td-cd-image img { width: 200px; }
    .td-cd-image img.td-cd-image-extra,
    .td-cd-caption { display: none; }
    .td-portrait-full img { max-width: 100%; }
}

/* Briefdokumente Intro Image */
.bd-intro-img {
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.bd-intro-img img {
    max-width: 560px;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Aktuelles Editor */
.akt-add-btn {
    display: inline-block;
    padding: 8px 20px;
    margin-bottom: 20px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-family: var(--sans);
    cursor: pointer;
    transition: background 0.2s;
}
.akt-add-btn:hover {
    background: var(--accent);
}
.akt-editor-form {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 24px;
}
.akt-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.akt-form-row-full,
.akt-form-row:has(> :only-child) {
    grid-template-columns: 1fr;
}
.akt-editor-form textarea {
    width: 100%;
    min-height: 120px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-family: var(--sans);
    color: var(--text);
    background: var(--white);
    resize: vertical;
}
.akt-editor-form textarea:focus {
    border-color: var(--primary);
}
.akt-editor-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--text-light);
    font-family: var(--sans);
}
.akt-editor-form input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-family: var(--sans);
    color: var(--text);
    background: var(--white);
}
.akt-editor-form input[type="text"]:focus {
    border-color: var(--primary);
}
.akt-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}
.akt-btn-save {
    padding: 8px 20px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-family: var(--sans);
    cursor: pointer;
}
.akt-btn-save:hover { background: var(--accent); }
.akt-btn-cancel {
    padding: 8px 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-family: var(--sans);
    cursor: pointer;
    color: var(--text);
}
.akt-btn-cancel:hover { background: var(--cream); }
#aktFormStatus {
    font-size: 0.82rem;
    color: var(--text-light);
    margin-left: auto;
}
.akt-entry-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.akt-btn-edit, .akt-btn-delete, .akt-btn-publish, .akt-btn-unpublish {
    padding: 5px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    font-size: 0.78rem;
    font-family: var(--sans);
    cursor: pointer;
    color: var(--text-light);
    transition: all 0.2s;
}
.akt-btn-edit:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.akt-btn-delete:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.akt-btn-publish {
    background: #f0f7ed;
    border-color: #5a8a4a;
    color: #2f5d22;
    font-weight: 600;
}
.akt-btn-publish:hover {
    background: #5a8a4a;
    color: #fff;
}
.akt-btn-unpublish:hover {
    border-color: #b8860b;
    color: #b8860b;
}

/* Aktuelles: Entwurf-Markierung (nur für Editor sichtbar) */
.akt-entry--draft {
    background: rgba(255, 244, 214, 0.45);
    border-left: 3px solid #d4a017;
}
.akt-draft-badge {
    display: inline-block;
    margin-left: 0.6em;
    padding: 1px 8px;
    font-family: var(--sans);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5c4500;
    background: #ffe9a8;
    border: 1px solid #d4a017;
    border-radius: 12px;
    vertical-align: middle;
}
.akt-publish-toggle {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin: 1em 0 0.5em;
    padding: 10px 14px;
    background: #fffbf0;
    border: 1px solid #e8d89c;
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
}
.akt-publish-toggle input[type="checkbox"] {
    margin: 0;
}
.akt-publish-toggle em {
    color: var(--text-light);
    font-style: normal;
    font-size: 0.78rem;
}

/* Aufzählung mit Strich (–) — Variante zur Punkt-Aufzählung.
   Wird im Trumbowyg-Editor per Custom-Btn `dashList` gesetzt und auf der
   Public-Seite gleich gerendert. */
ul.hf-dash-list {
    list-style: none;
    padding-left: 1.6em;
}
ul.hf-dash-list > li {
    position: relative;
}
ul.hf-dash-list > li::before {
    content: '–';
    position: absolute;
    left: -1.2em;
    color: var(--text-light);
}

/* In Memoriam Akkordeon: etwas grösserer Titel */
#imAccordion .akt-title {
    font-size: 1.2rem;
    font-weight: 600;
}

/* In Memoriam footnote numbers */

/* In Memoriam per-entry editing */
.im-entry-actions {
    display: none;
    gap: 8px;
    padding: 12px 0 4px;
}
body.im-edit-mode .im-entry-actions { display: flex; }

/* In Memoriam: Gedichte/Zitate im "Riesenhafte Flügel"-Beitrag einrücken
   (alle Absätze, deren einziges Kind ein <em>-Block ist + ausgezeichnete Gedicht-Köpfe) */
.im-entry[data-file^="in_memoriam_die_riesenhaften_fl"] .akt-body-inner p:has(> em:only-child),
.im-entry[data-file^="in_memoriam_die_riesenhaften_fl"] .akt-body-inner p.im-poem-head {
    padding-left: 2.5em;
}
/* Verse als eigenständige Absätze: kompakter Zeilenabstand */
.im-entry[data-file^="in_memoriam_die_riesenhaften_fl"] .akt-body-inner p:has(> em:only-child) {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
/* Strophen-Trenner zwischen den beiden Strophen: dezent kleiner */
.im-entry[data-file^="in_memoriam_die_riesenhaften_fl"] .akt-body-inner p.im-stanza-break {
    margin: 0;
    line-height: 0.5;
    padding-left: 2.5em;
    font-size: 0.7em;
}
/* Größerer Abstand zwischen dem letzten Vers und dem nachfolgenden Fließtext */
.im-entry[data-file^="in_memoriam_die_riesenhaften_fl"] .akt-body-inner p:has(> em:only-child) + p:not(.im-stanza-break):not(.im-poem-head):not(:has(> em:only-child)) {
    margin-top: 1.6em;
}

/* In Memoriam Fußnote (z. B. Quellenverweis am Ende eines Beitrags) */
.akt-body-inner p.im-footnote {
    font-size: 0.72rem;
    line-height: 1.35;
    margin-top: 1.8em;
    padding-top: 0.7em;
    border-top: 1px solid var(--border);
    color: var(--text-light);
    font-style: italic;
}
.akt-body-inner p.im-footnote sup {
    font-style: normal;
    font-size: 0.85em;
}

/* Lebenstafel per-section editing (mirrors In Memoriam pattern) */
.lt-entry-actions {
    display: none;
    gap: 8px;
    padding: 12px 0 4px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
}
body.lt-edit-mode .lt-entry-actions { display: flex; }
.lt-edit-btn, .lt-save-btn, .lt-cancel-btn, .lt-delete-btn {
    padding: 5px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 4px);
    background: var(--white);
    font: 13px/1.4 var(--sans);
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
}
.lt-edit-btn:hover { border-color: var(--primary); color: var(--primary); }
.lt-save-btn { border-color: #2a7f2a; color: #2a7f2a; }
.lt-save-btn:hover { background: #2a7f2a; color: #fff; }
.lt-cancel-btn:hover { border-color: var(--accent); color: var(--accent); }
.lt-delete-btn { margin-left: auto; }
.lt-delete-btn:hover { border-color: var(--accent); color: #fff; background: var(--accent); }
.lt-section.lt-editing .lt-delete-btn { display: none; }
.lt-header h3.lt-h3-editing {
    outline: 1px dashed var(--accent);
    outline-offset: 4px;
    cursor: text;
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}
.lt-header h3.lt-h3-editing::after {
    content: ' ✎';
    font-size: 0.7em;
    opacity: 0.6;
}
/* "+ Neuer Abschnitt"-Button: nur im Edit-Modus sichtbar */
.lt-add-btn {
    display: none;
    margin: 24px auto 0;
    padding: 10px 22px;
    border: 1px dashed var(--border);
    border-radius: var(--radius, 4px);
    background: transparent;
    font: 14px/1.4 var(--sans);
    color: var(--text-light, #6b6b6b);
    cursor: pointer;
    transition: all 0.2s;
}
.lt-add-btn:hover { border-color: var(--primary); color: var(--primary); border-style: solid; }
body.lt-edit-mode .lt-add-btn { display: block; }

/* Kurator: Hintergrundbilder-Tab */
.entw-bg-list { display: flex; flex-direction: column; gap: 14px; margin-top: 1rem; }
.entw-bg-row {
    display: flex;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 4px);
    background: #fafafa;
    align-items: flex-start;
}
.entw-bg-preview {
    flex: 0 0 110px;
    width: 110px;
    min-height: 72px;
    background: #ebe8e0;
    border-radius: var(--radius, 4px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.entw-bg-thumb { max-width: 100%; max-height: 100px; display: block; object-fit: cover; }
.entw-bg-fields { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.entw-bg-label {
    flex-basis: 100%;
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--primary);
    margin-bottom: 4px;
}
.entw-bg-image {
    flex: 1 1 240px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 4px);
    font: 13px var(--sans);
}
.entw-bg-oplabel {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-light, #6b6b6b);
}
.entw-bg-opacity {
    width: 70px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 4px);
    font: 13px var(--sans);
}
.entw-bg-save { padding: 5px 16px; font-size: 13px; }
.entw-bg-preview-link {
    text-decoration: none;
    font-size: 18px;
    color: var(--text-light, #6b6b6b);
    padding: 0 4px;
}
.entw-bg-preview-link:hover { color: var(--primary); }
.entw-bg-status { margin-left: 6px; font-size: 12px; }

/* Statistik: Zähler-Reset-Button, dezent gehalten */
.entw-stat-reset {
    padding: 5px 14px;
    font-size: 13px;
    background: var(--white);
    color: var(--accent);
    border: 1px solid var(--border);
}
.entw-stat-reset:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.im-edit-btn, .im-save-btn, .im-cancel-btn, .im-delete-btn {
    padding: 5px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    font-size: 0.8rem;
    font-family: var(--sans);
    cursor: pointer;
    color: var(--text-light);
    transition: all 0.2s;
}
.im-edit-btn:hover { border-color: var(--primary); color: var(--primary); }
.im-save-btn { border-color: #2a7f2a; color: #2a7f2a; }
.im-save-btn:hover { background: #2a7f2a; color: #fff; }

/* Generic Accordion: per-entry edit buttons (Vellichor, Im Dampf der Retorte, Am Saum) */
.gen-entry-actions {
    display: none;
    margin: 0 0 1rem;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
body.gen-edit-mode .gen-entry-actions { display: flex; }
.gen-entry-actions button {
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text);
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--sans);
    transition: all 0.15s ease;
}
.gen-edit-btn { color: var(--primary); border-color: var(--primary); }
.gen-edit-btn:hover { background: var(--primary); color: #fff; }
.gen-save-btn { color: #1a6a1a; border-color: #1a6a1a; }
.gen-save-btn:hover { background: #2a7f2a; color: #fff; border-color: #2a7f2a; }
.gen-cancel-btn:hover { border-color: var(--accent); color: var(--accent); }
.gen-status { font-size: 0.82rem; color: var(--text-light); font-style: italic; }
.im-cancel-btn:hover { border-color: var(--accent); color: var(--accent); }
.im-delete-btn { margin-left: auto; }
.im-delete-btn:hover { border-color: var(--accent); color: #fff; background: var(--accent); }
.akt-title.im-editing,
.akt-meta.im-editing {
    background: rgba(255,255,255,0.9);
    border: 1px dashed var(--border);
    border-radius: 3px;
    padding: 2px 6px;
    outline: none;
    cursor: text;
}
.akt-title.im-editing:focus,
.akt-meta.im-editing:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0,0,68,0.1);
}
/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 768px) {
    .menu-toggle { display: flex; }

    .site-nav {
        display: none;
        flex-direction: column;
        width: 100%;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.1);
        margin-top: 10px;
    }
    .site-nav.open { display: flex; }

    .site-nav > a, .nav-item > a {
        width: 100%;
        text-align: left;
        padding: 8px 10px;
        white-space: normal;
    }
    .nav-item {
        width: 100%;
    }

    /* Mobile-Extras am Ende der Hamburger-Nav: Suche + Musik-Toggle */
    .site-nav-mobile-extras {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.18);
        gap: 2px;
    }
    .nav-extra {
        display: block;
        width: 100%;
        padding: 8px 10px;
        color: rgba(255,255,255,0.7);
        text-decoration: none;
        font-family: var(--sans);
        font-size: 0.78rem;
        letter-spacing: 0.01em;
        border-radius: 3px;
        transition: background 0.15s ease;
    }
    .nav-extra:hover,
    .nav-extra:active {
        background: rgba(255,255,255,0.08);
        color: #fff;
    }
    .nav-extra-suche {
        color: #fff;
    }
    /* Musik-Toggle: erbt die .contemplatio-icon-Klasse fürs Auto-Wiring,
       aber wir überschreiben die Kreis-Optik komplett für den Menü-Kontext. */
    .site-nav .contemplatio-icon.nav-extra {
        width: 100%;
        height: auto;
        border-radius: 4px;
        background: transparent;
        border: none;
        opacity: 1;
        padding: 10px;
        animation: none !important;
        box-shadow: none !important;
        transform: none !important;
        display: block;
    }
    .site-nav .contemplatio-icon.nav-extra:hover,
    .site-nav .contemplatio-icon.nav-extra:active {
        background: rgba(120,180,255,0.14);
    }
    .site-nav .contemplatio-icon.nav-extra.playing {
        background: rgba(120,180,255,0.18);
        color: #fff;
    }
    .nav-extra-label-on { display: none; }
    .contemplatio-menu-link.playing .nav-extra-label-off { display: none; }
    .contemplatio-menu-link.playing .nav-extra-label-on { display: inline; }

    .sub-nav {
        position: static;
        box-shadow: none;
        border: none;
        border-left: 3px solid rgba(255,255,255,0.2);
        margin-left: 10px;
        min-width: auto;
        max-height: none;
        padding: 4px 0;
        background: transparent;
    }
    .sub-nav a { color: rgba(255,255,255,0.6); white-space: normal; }
    .sub-nav a:hover { background: rgba(255,255,255,0.05); color: #fff; }
    .sub-nav a.active { background: rgba(255,255,255,0.1); color: #fff; }

    .sub-nav-toggle {
        border-left-color: rgba(255,255,255,0.15);
        color: rgba(255,255,255,0.5);
    }
    .sub-nav-toggle:hover {
        background: rgba(255,255,255,0.05);
        color: #fff;
    }
    .sub-nav-children {
        background: transparent;
        border-top-color: rgba(255,255,255,0.1);
        padding-left: 8px;
    }
    .sub-nav-children a { color: rgba(255,255,255,0.5); }
    .sub-nav-children a:hover { background: rgba(255,255,255,0.05); color: #fff; }
    .sub-nav-children a.active { background: rgba(255,255,255,0.1); color: #fff; }

    .nav-item.sub-hover .sub-nav { display: none; }
    .nav-item.sub-open .sub-nav { display: block; }

    .editor-panel {
        width: 100%;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 10px;
        margin-top: 10px;
        flex-wrap: wrap;
        gap: 6px;
    }
    .editor-panel { display: none; }
    .site-nav.open ~ .editor-panel { display: flex; }
    .edit-toggle,
    #epEditBtn { display: none !important; }

    .slideshow-settings-dropdown {
        right: 1rem;
    }

    .site-header {
        position: sticky;
        top: 0;
        max-height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .site-header .container {
        flex-wrap: wrap;
        height: auto;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .home-icon,
    .info-tooltip { display: none !important; }

    .hero .container {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .hero { padding: 2rem 0; }
    .hero-portrait { flex: 0 0 150px; width: 150px; }
    .hero.hero-compact { display: none; }
    .page-header { display: none; }
    /* Hauptseite (herbert_fritsche): Page-Header bleibt mobil sichtbar,
       sonst sähen Mobile-User nur den Hero-Title "Herbert Fritsche", aber
       weder "Dr. Herbert Fritsche-Gedenkseite" noch "und Forschungsarchiv". */
    body:has(.content-box[data-page="herbert_fritsche"]) .page-header {
        display: block;
        padding: 0.8rem 0;
        margin-top: 0;
    }
    body:has(.content-box[data-page="startseite"]) .hero { display: none; }
    .slideshow-settings { bottom: 12px; right: 12px; }
    .hero-text .hero-title { font-size: 2rem; }
    .hero-text .hero-desc { max-width: none; }

    .content-section { padding: 1.5rem 0 2rem; }
    .content-section .container { padding: 0 0.5rem; }
    .content-box { padding: 1.5rem 1rem; }
    /* Doppel-Tap-Zoom seitenweit deaktivieren (iOS zoomt sonst ungeschickt
       auf die ohnehin viewport-breite Content-Box). Pinch-Zoom bleibt
       intakt, weil `manipulation` nur die Doppel-Tap-Geste entfernt. */
    html, body { touch-action: manipulation; }
    .content-box:has([id$="Accordion"], .lt-section) {
        padding-bottom: 1rem !important;
        min-height: auto !important;
    }
    .content-section:has([id$="Accordion"], .lt-section) { padding-bottom: 0 !important; }
    [id$="Accordion"]:last-child,
    .lt-section:last-of-type { margin-bottom: 0 !important; }
    [id$="Accordion"] .akt-entry:last-child { margin-bottom: 0; }
    #pageContent:has([id$="Accordion"]) > *:last-child { margin-bottom: 0 !important; }
    #pageContent:has([id$="Accordion"]) { padding-bottom: 0; }

    /* Museum-Unterseiten mit wenigen Akkordeons: Content-Box bis ans Schirmende
       ziehen, damit die Seite auf Mobile/iOS nicht wie abgeschnitten wirkt.
       100dvh berücksichtigt die iOS-Safari-URL-Leiste; vh dient als Fallback. */
    .content-box[data-page="am_saum_des_grossen_vorhangs_animation"],
    .content-box[data-page="vellichor"],
    .content-box[data-page="im_dampf_der_retorte_tonbandaufzeichnungen"],
    .content-box[data-page="diskurs_mit_herbert_fritsche_llm_projekt"] {
        min-height: calc(100vh - 200px) !important;
        min-height: calc(100dvh - 200px) !important;
    }

    .content-with-image { flex-direction: column-reverse; }
    .content-with-image .content-img {
        width: 100%; max-width: 240px; position: static;
    }

    .content-image-right {
        float: none; margin: 0 0 1.5rem 0;
        max-width: 100%; text-align: center;
    }

    .sibling-nav { display: none; }

    /* Diashow gallery responsive */
    .dia-gallery { max-width: 100%; }
    .dia-settings { gap: 0.8rem; }
    .dia-settings label { font-size: 0.8rem; }

    /* Lebenstafel accordion responsive */
    .lt-header h3 { font-size: 1.1rem; }
    .lt-header { padding: 12px 14px; }

    /* Child navigation responsive */
    .child-nav-link { padding: 0.7rem 0.8rem; gap: 0.75rem; }
    .child-nav-cover { width: 36px; height: 50px; }
    .child-nav-title { font-size: 1rem; }
    .child-nav-sub { padding-left: 1rem; }

    .site-footer .footer-text-row {
        flex-direction: column;
        text-align: center;
        gap: 0.35rem;
    }

    /* Aktuelles accordion responsive */
    .akt-header { flex-wrap: wrap; gap: 6px; padding: 14px 14px; min-height: auto; }
    .akt-meta { width: 100%; padding-left: 28px; margin-top: 2px; white-space: normal; }
    .akt-title { font-size: 1.05rem; line-height: 1.4; }
    .akt-subtitle { padding-left: 28px; margin-top: 2px; line-height: 1.4; }
    .akt-body-inner { padding: 0 14px 16px 14px; text-align: center; }
    .akt-body-inner p { text-align: left; }
    .akt-body-inner img { display: block; margin-left: auto; margin-right: auto; }
    .akt-body-inner figure[style*="float"] {
        float: none !important;
        margin: 0 auto 1.5rem auto !important;
        width: auto !important;
        max-width: 220px;
        text-align: center;
    }
    .akt-body-inner figure[style*="float"] figcaption {
        text-align: center !important;
    }
    .akt-form-row { grid-template-columns: 1fr; }

    /* Contact form responsive */
    .contact-form-row { grid-template-columns: 1fr; }
    .contact-submit-btn { width: 100%; }

    /* Audio player responsive */
    .audio-play-btn { width: 26px; height: 26px; font-size: 9px; cursor: pointer; }
    .audio-download-btn { width: 22px; height: 22px; font-size: 12px; cursor: pointer; }
    .audio-upload-btn, .audio-delete-btn { width: 22px; height: 22px; font-size: 11px; cursor: pointer; }
    .audio-progress { padding-left: 30px; }

    /* Normal cursor on touch devices */
    body { cursor: auto; }
    a, button { cursor: pointer; }
    .cursor-dot, .cursor-ring { display: none; }
    .home-icon, .info-tooltip .info-btn, .menu-toggle,
    .site-header .edit-toggle, .sibling-nav, .site-footer a, .lt-header { cursor: pointer; }
}

@media (max-width: 480px) {
    .hero { padding: 1.5rem 0; }
    .hero-text .hero-title { font-size: 1.6rem; }
    .content-section .container { padding: 0 0.35rem; }
    .content-box { padding: 1.25rem 0.85rem; }
    .page-header { padding: 1rem 0; }
    .page-header h1 { font-size: 1.3rem; }
}

/* ─── Image Manager ─── */
.img-mgr-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.img-mgr-modal {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 960px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    overflow: hidden;
    position: relative;
}
.img-mgr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--primary);
    color: #fff;
}
.img-mgr-header h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 600;
}
.img-mgr-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    line-height: 1;
    padding: 0 0.2rem;
}
.img-mgr-close:hover { opacity: 1; }

.img-mgr-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    background: var(--cream);
    overflow-x: auto;
    flex-shrink: 0;
}
.img-mgr-tab {
    padding: 0.65rem 1.1rem;
    border: none;
    background: none;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.img-mgr-tab:hover {
    color: var(--primary);
    background: rgba(0,0,68,0.04);
}
.img-mgr-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: #fff;
}

.img-mgr-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.2rem;
}
.img-mgr-empty {
    text-align: center;
    color: var(--text-light);
    font-family: var(--sans);
    padding: 3rem 1rem;
    font-size: 0.95rem;
}
.img-mgr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
}
.img-mgr-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--cream);
    transition: box-shadow 0.2s;
}
.img-mgr-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.img-mgr-thumb {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}
.img-mgr-thumb {
    cursor: pointer;
    position: relative;
}
.img-mgr-thumb:hover::after {
    content: 'Pfad kopieren';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,68,0.65);
    color: #fff;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
}
.img-mgr-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.img-mgr-info {
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.img-mgr-name {
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.img-mgr-row {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}
.img-mgr-select {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--sans);
    font-size: 0.78rem;
    background: #fff;
    color: var(--text);
    cursor: pointer;
}
.img-mgr-select:focus {
    border-color: var(--primary);
}
.img-mgr-del {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}
.img-mgr-del:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.img-mgr-toast {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    background: var(--primary);
    color: #fff;
    font-family: var(--sans);
    font-size: 0.85rem;
    padding: 0.55rem 1.2rem;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}
.img-mgr-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
    .img-mgr-modal { max-height: 92vh; }
    .img-mgr-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.7rem; }
    .img-mgr-tabs { padding: 0 0.3rem; }
    .img-mgr-tab { padding: 0.5rem 0.7rem; font-size: 0.78rem; }
}

/* ─── Book Info Block (Gesamtausgabe) ─── */
.book-info-hr {
    margin: 1.5rem 0 1rem;
}
.book-info-block {
    text-align: left;
    margin-bottom: 1.5rem;
}
.book-info-block p {
    text-align: left;
    margin-bottom: 0.3em;
    line-height: 1.6;
}
.content-box .book-info-block.book-info-small p {
    font-family: var(--sans);
    font-size: 0.85rem;
    line-height: 1.45;
}
.book-info-block p:last-child {
    margin-bottom: 0;
}

/* ─── Book ISBN ─── */
.book-isbn {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--text-light);
    margin: 0.5rem 0 0;
    letter-spacing: 0.02em;
}

/* ─── Brief Editions (Neuausgabe / Erstausgabe) ─── */
.content-img.content-img-brief {
    height: auto;
    overflow: visible;
}
.brief-editions {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.brief-edition {
    text-align: center;
}
.brief-edition .content-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--radius);
    box-shadow: 6px 10px 35px rgba(0,0,0,0.35), 3px 5px 12px rgba(0,0,0,0.25);
}
.brief-edition-label {
    font-family: var(--serif);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-light);
    margin: 0.5rem 0 0;
    letter-spacing: 0.03em;
}

/* ─── Museum Back Button ─── */
/* Museum back button – mobile only, top of content-box */
.museum-back-mobile {
    display: none;
}
@media (max-width: 768px) {
    .museum-back-mobile {
        display: inline-block;
        margin-bottom: 1rem;
        padding: 0.4rem 1rem;
        font-family: var(--sans);
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--primary);
        background: rgba(0,0,68,0.06);
        border: 1px solid rgba(0,0,68,0.15);
        border-radius: 3px;
        text-decoration: none;
        transition: background 0.2s;
        -webkit-text-fill-color: var(--primary);
    }
    .museum-back-mobile:active {
        background: rgba(0,0,68,0.12);
    }
}

.museum-back-btn {
    display: inline-block;
    margin-left: 1.2rem;
    padding: 0.3rem 0.9rem;
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 3px;
    text-decoration: none;
    vertical-align: middle;
    transition: background 0.2s, color 0.2s;
}
.museum-back-btn:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.museum-home-btn {
    margin-top: 1.6rem;
}
.museum-contemplatio-row {
    display: flex;
    align-items: center;
    gap: 0;
    justify-content: flex-end;
    transition: gap 0.4s ease;
}
.museum-contemplatio-row.playing {
    gap: 0.6rem;
}
.museum-music-link {
    border: none;
    cursor: pointer;
    text-align: left;
    flex-shrink: 0;
    transition: transform 0.4s ease;
}

/* Museum LED Equalizer */
.museum-eq {
    display: none;
    margin-top: 0;
    background: linear-gradient(180deg, #001a2e 0%, #000d18 100%);
    border-radius: 4px;
    padding: 5px 6px;
    border: 1px solid rgba(0,140,200,0.2);
    border-top-color: rgba(0,180,255,0.15);
    border-bottom-color: rgba(0,0,0,0.6);
    box-shadow:
        0 0 12px rgba(0,68,136,0.3),
        inset 0 1px 0 rgba(0,180,255,0.08),
        inset 0 -1px 2px rgba(0,0,0,0.7),
        inset 1px 0 2px rgba(0,0,0,0.4),
        inset -1px 0 2px rgba(0,0,0,0.4);
    width: 172px;
}
.museum-eq canvas {
    display: block;
}
.museum-eq-header {
    display: none;
    margin-left: 1.2rem;
    margin-top: 0;
    vertical-align: middle;
}

/* ─── Museum Page ─── */
.museum-gif-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #47161c;
}
.museum-gif-overlay img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #47161c;
}

.museum-landing {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #47161c;
    overflow: hidden;
}
.museum-welcome {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(calc(-50% + 1.4rem));
    color: rgb(255, 191, 0);
    font-family: var(--serif);
    font-size: 2.2rem;
    letter-spacing: 0.08em;
    text-align: center;
    text-shadow:
        1px 1px 0 rgba(140, 90, 0, 0.95),
        2px 2px 0 rgba(120, 75, 0, 0.9),
        3px 3px 0 rgba(100, 60, 0, 0.85),
        4px 4px 0 rgba(80, 50, 0, 0.8),
        5px 5px 0 rgba(60, 38, 0, 0.75),
        6px 6px 0 rgba(40, 25, 0, 0.7),
        7px 7px 0 rgba(25, 15, 0, 0.65),
        10px 14px 22px rgba(0, 0, 0, 0.85),
        0 0 30px rgba(255, 191, 0, 0.25);
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}
.museum-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: auto;
    object-fit: contain;
}
.museum-nav-left,
.museum-nav-right {
    position: absolute;
    top: 28%;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    z-index: 2;
}
.museum-nav-left {
    left: 18%;
    align-items: flex-end;
    text-align: right;
}
.museum-nav-right {
    right: 18%;
    align-items: flex-start;
    text-align: left;
}
.museum-nav-btn {
    display: block;
    padding: 0.8rem 1.4rem;
    background: rgba(71, 22, 28, 0.85);
    color: #fff;
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 400;
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 2px 3px 10px rgba(0,0,0,0.5);
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    white-space: nowrap;
}
.museum-nav-btn:hover {
    background: rgba(92, 32, 40, 0.95);
    box-shadow: 3px 5px 14px rgba(0,0,0,0.6);
    transform: translateY(-1px);
    color: #fff;
}

.museum-blink-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: #47161c;
}
.museum-blink-overlay img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #47161c;
    transition: opacity 0.6s ease;
}

/* Fade-in for pages coming from museum */
.museum-fade-in {
    animation: museumPageFadeIn 0.8s ease both;
}
@keyframes museumPageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Museum: Mobile accordion page (hidden on desktop) */
.museum-mobile-page {
    display: none;
}
.content-box[data-page="museum_mobile"] {
    position: relative;
    min-height: 600px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.20), 0 2px 8px rgba(0,0,0,0.12);
}
.content-box[data-page="museum_mobile"]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('../images/herbert-fritsche.jpg') center top / cover no-repeat;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}
.content-box[data-page="museum_mobile"] > * {
    position: relative;
    z-index: 1;
}
.museum-mobile-title {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--primary);
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border);
}
.museum-mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.museum-mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border: 1px solid rgba(0,0,68,0.15);
    border-radius: var(--radius);
    background: rgba(80,90,100,0.08);
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: #000044 !important;
    -webkit-text-fill-color: #000044;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
.museum-mobile-home {
    margin-top: 0.5rem;
    justify-content: center;
    font-size: 1rem;
    opacity: 0.6;
}
.museum-mobile-home::after {
    display: none;
}
.museum-mobile-link:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);
    transform: translateY(-1px);
    background: rgba(0,0,68,0.03);
    color: var(--primary);
}
.museum-mobile-link:visited {
    color: var(--primary);
}
.museum-mobile-link::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
    flex-shrink: 0;
    margin-left: 1rem;
    opacity: 0.5;
}

@media (max-width: 900px) {
    .museum-nav-left,
    .museum-nav-right {
        gap: 0.5rem;
    }
    .museum-nav-btn {
        font-size: 0.78rem;
        padding: 0.45rem 0.7rem;
    }
}
@media (max-width: 768px) {
    .museum-mobile-page {
        display: block;
    }
    /* Leere Content-Section unter der Museum-Akkordeon-Box auf Mobile ausblenden */
    .content-section:has(> .container > .content-box[data-page="museum"]) {
        display: none;
    }
    .museum-gif-overlay,
    .museum-landing,
    .museum-blink-overlay {
        display: none !important;
    }
}

/* Vellichor: Grid mit einheitlich grossen Cover-Rahmen (unabhängig vom Bildseitenverhältnis) */
.vellichor-books {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.8rem 1.2rem;
    justify-items: center;
    align-items: start;
    margin: 2rem 0;
}
.vellichor-books figure {
    margin: 0;
    text-align: center;
    cursor: zoom-in;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
}
.vellichor-books img {
    display: block;
    width: auto;
    max-width: 200px;
    height: 280px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 4px 6px 20px rgba(0,0,0,0.45), 1px 2px 6px rgba(0,0,0,0.25);
    transition: box-shadow 0.18s ease;
}
.vellichor-books figure:hover img {
    box-shadow: 6px 10px 28px rgba(0,0,0,0.55), 1px 2px 6px rgba(0,0,0,0.3);
}
.vellichor-books figcaption {
    margin-top: 0.6rem;
    font-family: var(--serif);
    font-size: 0.85rem;
    color: var(--text-light);
    font-style: italic;
    line-height: 1.35;
    max-width: 200px;
}
@media (max-width: 500px) {
    .vellichor-books { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.2rem; }
    .vellichor-books figure { width: 150px; }
    .vellichor-books img { width: auto; max-width: 150px; height: 210px; }
    .vellichor-books figcaption { max-width: 150px; }
}

/* Vellichor: Lightbox — Einzelbild im Vordergrund, Seite dahinter unscharf (kein schwarzer Rahmen) */
.vellichor-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(30, 30, 40, 0.18);
    backdrop-filter: blur(14px) saturate(0.85);
    -webkit-backdrop-filter: blur(14px) saturate(0.85);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.vellichor-lightbox.visible { opacity: 1; }
.vellichor-lightbox img {
    max-height: 80vh;
    max-width: 80vw;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
    box-shadow:
        0 30px 80px rgba(0,0,0,0.55),
        0 10px 30px rgba(0,0,0,0.4),
        0 2px 8px rgba(0,0,0,0.25);
}
.vellichor-lightbox-caption {
    position: absolute;
    left: 50%;
    bottom: 1.4rem;
    transform: translateX(-50%);
    max-width: 85vw;
    padding: 0.45rem 1.1rem;
    background: rgba(0,0,0,0.45);
    color: #f2efe6;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    border-radius: 18px;
    text-align: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.vellichor-lightbox-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.vellichor-lightbox-btn:hover { background: rgba(0,0,0,0.6); }
.vellichor-lightbox-prev { left: 1.5rem; }
.vellichor-lightbox-next { right: 1.5rem; }
.vellichor-lightbox-close {
    top: 1.2rem;
    right: 1.2rem;
    transform: none;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.1rem;
}
.vellichor-lightbox-counter {
    position: absolute;
    top: 1.3rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.3rem 0.9rem;
    background: rgba(0,0,0,0.4);
    color: #f2efe6;
    font-family: var(--sans);
    font-size: 0.82rem;
    border-radius: 12px;
    letter-spacing: 0.05em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
@media (max-width: 600px) {
    .vellichor-lightbox-btn { width: 2.6rem; height: 2.6rem; font-size: 1.3rem; }
    .vellichor-lightbox-prev { left: 0.5rem; }
    .vellichor-lightbox-next { right: 0.5rem; }
    .vellichor-lightbox img { max-width: 95vw; max-height: 82vh; }
}

/* Werkverzeichnis Gesamtausgabe – Tabelle mit sticky Header */
.content-box[data-page="verzeichnis_der_herbert_fritsche_gesamtausgabe"] {
    overflow: visible;
}

/* ─── Seiten mit durchscheinendem Hintergrundbild ─────────────────────
 * Gemeinsame Basis: min-height, Shadow, ::before-Boilerplate (Position,
 * Opacity, z-index, Transition) und > * { z-index: 1 }.
 * Per-Seite-Blöcke darunter setzen nur noch URL und ggf. Abweichungen
 * (Größe, Opacity, Filter, etc.).
 */
.content-box[data-page="startseite"],
.content-box[data-page="lebenstafel"],
.content-box[data-page="in_memoriam"],
.content-box[data-page="vortraege"],
.content-box[data-page="gedichte"],
.content-box[data-page="am_saum_des_grossen_vorhangs_animation"],
.content-box[data-page="briefdokumente"],
.content-box[data-page="tondokumente"],
.content-box[data-page="im_dampf_der_retorte_tonbandaufzeichnungen"],
.content-box[data-page="werkverzeichnis"] {
    min-height: 1140px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.20), 0 2px 8px rgba(0,0,0,0.12);
}
.content-box[data-page="startseite"]::before,
.content-box[data-page="lebenstafel"]::before,
.content-box[data-page="in_memoriam"]::before,
.content-box[data-page="vortraege"]::before,
.content-box[data-page="gedichte"]::before,
.content-box[data-page="am_saum_des_grossen_vorhangs_animation"]::before,
.content-box[data-page="briefdokumente"]::before,
.content-box[data-page="tondokumente"]::before,
.content-box[data-page="im_dampf_der_retorte_tonbandaufzeichnungen"]::before,
.content-box[data-page="werkverzeichnis"]::before,
.content-box[data-page="herbert_fritsche_saemtliche_gedichte_teil_i"]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s ease;
}
.content-box[data-page="startseite"] > *,
.content-box[data-page="lebenstafel"] > *,
.content-box[data-page="in_memoriam"] > *,
.content-box[data-page="vortraege"] > *,
.content-box[data-page="gedichte"] > *,
.content-box[data-page="am_saum_des_grossen_vorhangs_animation"] > *,
.content-box[data-page="briefdokumente"] > *,
.content-box[data-page="tondokumente"] > *,
.content-box[data-page="im_dampf_der_retorte_tonbandaufzeichnungen"] > *,
.content-box[data-page="werkverzeichnis"] > *,
.content-box[data-page="herbert_fritsche_saemtliche_gedichte_teil_i"] > * {
    position: relative;
    z-index: 1;
}

/* In Memoriam: Hintergrundbild + cremiger Sepia-Ton, abweichende Opacity/Filter */
.content-box[data-page="in_memoriam"] {
    background-color: #faf4e4;
}
.content-box[data-page="in_memoriam"]::before {
    background: url('../images/HF_sw__04.jpg') center top / 75% auto no-repeat;
    opacity: 0.15;
    filter: sepia(100%) saturate(60%) brightness(1.1) contrast(160%);
}

/* Per-Seite Hintergrundbilder (Basis-Properties im Zentralblock weiter oben) */
.content-box[data-page="vortraege"]::before {
    background: url('../images/HF_sw__11b.jpg') center top / cover no-repeat;
}
.content-box[data-page="gedichte"]::before {
    background: url('../images/HF_sw__01.jpg') center top / 102% auto no-repeat;
}
.content-box[data-page="am_saum_des_grossen_vorhangs_animation"]::before {
    background: url('../images/HF_sw__10.jpg') center bottom / 102% auto no-repeat;
}
.content-box[data-page="herbert_fritsche_saemtliche_gedichte_teil_i"]::before {
    background-position: center top;
    background-size: 60% auto;
    background-repeat: no-repeat;
}
/* Nachwort des Verlegers: ANKH-Symbol als transparentes Hintergrundbild,
   verankert direkt über dem Fußnoten-Trennstrich (border-top der .uhl-footnotes).
   Bottom-Edge des Symbols sitzt knapp über der Linie, Symbol ragt nach oben in
   den Textkörper hinein (mit niedriger Opacity). */
.content-box[data-page="am_saum_des_grossen_vorhangs_nachwort_des_verlegers_john_uhl"] .uhl-footnotes {
    position: relative;
}
.content-box[data-page="am_saum_des_grossen_vorhangs_nachwort_des_verlegers_john_uhl"] .uhl-footnotes::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% - 7rem);
    transform: translateX(-50%);
    width: 50%;
    aspect-ratio: 573 / 764;
    background: url('../images/ANKH.PNG') center bottom / contain no-repeat;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}
.content-box[data-page="am_saum_des_grossen_vorhangs_nachwort_des_verlegers_john_uhl"] .uhl-footnote {
    position: relative;
    z-index: 1;
}
/* "Zu den Quellen und zur editorischen Praxis"-Eintrag: Inhalt kompakter setzen,
   damit Hinweis-Block und Siglen-Block nach oben rücken */
.akt-entry[data-page-id="am_saum_des_grossen_vorhangs_animation"] .akt-body-inner {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}
.akt-entry[data-page-id="am_saum_des_grossen_vorhangs_animation"] .akt-body-inner h3:first-child {
    margin-top: 0;
    margin-bottom: 1em;
}
.akt-entry[data-page-id="am_saum_des_grossen_vorhangs_animation"] .akt-body-inner h3 {
    margin-top: 0.5em;
    margin-bottom: 0.3em;
    line-height: 1.25;
}
.akt-entry[data-page-id="am_saum_des_grossen_vorhangs_animation"] .akt-body-inner p {
    margin-top: 0.35em;
    margin-bottom: 0.35em;
}
.content-box[data-page="briefdokumente"]::before {
    background: url('../images/HF_sw__03.jpg') center top / 102% auto no-repeat;
}
.content-box[data-page="tondokumente"]::before {
    background: url('../images/HF_1_MediumRes.jpg') center top / 102% auto no-repeat;
}
.content-box[data-page="im_dampf_der_retorte_tonbandaufzeichnungen"]::before {
    background: url('../images/HF_sw__13.jpg') center top / 102% auto no-repeat;
}
.content-box[data-page="werkverzeichnis"]::before {
    background: url('../images/HFPortrait.jpg') center top / 102% auto no-repeat;
}
.content-box[data-page="startseite"]::before {
    background: url('../images/herbert-fritsche.jpg') center top / 100% auto no-repeat;
}

/* Vellichor-Seite: durchscheinendes Hintergrundbild über der gesamten Content-Box */
.content-box[data-page="vellichor"] {
    background: var(--cream);
    box-shadow: 0 8px 32px rgba(0,0,0,0.20), 0 2px 8px rgba(0,0,0,0.12);
    min-height: 100vh;
}
/* Vellichor: content-section Umgebung gefüllt, damit auch bei offenem Akkordeon
 * der Rahmen um die Content-Box komplett cremefarben erscheint. */
body:has(.content-box[data-page="vellichor"]) .content-section {
    background: var(--cream);
}

/* Fontane-Zitat: Text eingemittet, Autorenname rechtsbündig zum Zitat, enger Zeilenabstand */
.fontane-quote {
    width: fit-content;
    max-width: 100%;
    margin: 1.8rem auto;
    padding: 0;
    font-family: var(--serif);
    font-style: italic;
    text-align: center;
    line-height: 1.55;
}
.fontane-quote p { white-space: nowrap; }
@media (max-width: 700px) {
    .fontane-quote p { white-space: normal; }
}
.fontane-quote p {
    margin: 0 0 0.15em;
    font-size: 1.22rem;
}
.fontane-quote figcaption {
    text-align: right;
    font-size: 1rem;
    font-style: normal;
    color: var(--text-light);
    margin-top: 0;
    line-height: 1.2;
}
.content-box[data-page="vellichor"]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('../images/Vellichor3.png') center center / cover no-repeat;
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
}
.content-box[data-page="vellichor"] > * {
    position: relative;
    z-index: 1;
}
/* Aktuelles: Titel + Untertitel (analog Lebenstafel) */
.akt-page-subtitle {
    margin-top: 0;
}
/* Aktuelles: Reiter analog Lebenstafel */
/* Diskurs-Seite: Child-Nav als Akkordeon-Button */
.content-box[data-page="diskurs_mit_herbert_fritsche_llm_projekt"] .child-nav-link {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--cream);
    padding: 14px 20px;
    transition: background 0.2s ease, box-shadow 0.3s ease;
}
.content-box[data-page="diskurs_mit_herbert_fritsche_llm_projekt"] .child-nav-link:hover {
    background: rgba(0, 0, 68, 0.03);
    box-shadow: var(--shadow);
}
.content-box[data-page="diskurs_mit_herbert_fritsche_llm_projekt"] .child-nav-link::before {
    content: '\203a';
    font-size: 1.3rem;
    color: var(--text-light);
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    line-height: 1;
}
.content-box[data-page="diskurs_mit_herbert_fritsche_llm_projekt"] .child-nav-title {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--primary);
}

/* KI/LLM-Projekt: Kachel-Hintergrund */
.content-box[data-page="ki_zugriff_auf_alle_texte"] {
    background: url('../images/gpmech05.jpg') repeat;
    background-size: auto;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.25);
}
.content-box[data-page="ki_zugriff_auf_alle_texte"] > * {
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    body:has(.content-box[data-page="ki_zugriff_auf_alle_texte"]) .content-section {
        padding-top: 0;
        padding-bottom: 0;
    }
    body:has(.content-box[data-page="ki_zugriff_auf_alle_texte"]) .content-section .container {
        padding-left: 0;
        padding-right: 0;
    }
    .content-box[data-page="ki_zugriff_auf_alle_texte"] {
        border: none;
        border-radius: 0;
        padding: 1.5rem;
        box-shadow: none;
    }
    body:has(.content-box[data-page="ki_zugriff_auf_alle_texte"]) .site-footer {
        margin-top: 0;
    }
    body:has(.content-box[data-page="ki_zugriff_auf_alle_texte"]) .hero-compact,
    body:has(.content-box[data-page="ki_zugriff_auf_alle_texte"]) .page-header {
        display: none;
    }
}
.wv-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--serif);
    font-size: 0.95rem;
    line-height: 1.5;
}
.wv-table thead th {
    position: sticky;
    top: var(--header-height, 42px);
    background: var(--primary, #000044);
    color: #fff;
    font-weight: 600;
    font-family: var(--sans);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.6rem 0.75rem;
    text-align: left;
    z-index: 2;
    border-bottom: 2px solid #5a5afa;
}
.wv-table thead th.wv-col-band,
.wv-table thead th.wv-col-jahr {
    text-align: right;
}
.wv-table tbody td {
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    vertical-align: top;
}
.wv-table tbody td.wv-col-band,
.wv-table tbody td.wv-col-jahr {
    text-align: right;
    white-space: nowrap;
}
.wv-table tbody td.wv-col-titel {
    text-align: left;
}
.wv-table tbody tr:hover {
    background: rgba(0,0,68,0.04);
}
.wv-table tbody tr.wv-section-row td {
    padding-top: 0.8rem;
    padding-bottom: 0.3rem;
    border-bottom: none;
    font-style: italic;
}
/* Auf-/zuklappbare Band-Gruppen */
.wv-table tbody tr.wv-toggle-row { cursor: pointer; }
.wv-table tbody tr.wv-toggle-row td.wv-col-titel { position: relative; padding-left: 1.8rem; }
.wv-table tbody tr.wv-toggle-row td.wv-col-titel::before {
    content: '▸';
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    color: #5a5afa;
    font-size: 0.85em;
    transition: transform 0.15s ease;
    line-height: 1;
}
.wv-table tbody tr.wv-toggle-row:not(.wv-collapsed) td.wv-col-titel::before {
    transform: translateY(-50%) rotate(90deg);
}
.wv-table tbody tr.wv-toggle-row:hover { background: #eef0ff; }
.wv-table tbody tr.wv-child-row.wv-hidden { display: none; }
.wv-count-badge {
    display: inline-block;
    margin-left: 0.6em;
    padding: 0.02rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: #5a5afa;
    background: #eef0ff;
    border: 1px solid #c8cbe8;
    border-radius: 10px;
    vertical-align: middle;
    font-style: normal;
}
.wv-table tbody tr.wv-toggle-row:not(.wv-collapsed) .wv-count-badge { opacity: 0.5; }
@media (max-width: 600px) {
    .wv-table {
        font-size: 0.82rem;
    }
    .wv-table thead th,
    .wv-table tbody td {
        padding: 0.3rem 0.4rem;
    }
}

/* Scroll-to-top button */
.scroll-top-btn {
    display: block;
    position: fixed;
    bottom: 2rem;
    right: calc(50% - var(--max-width)/2 - 3rem);
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: 0.85rem;
    line-height: 2.6rem;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: translateY(0.5rem);
    z-index: 900;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    cursor: pointer;
}
.scroll-top-btn.visible {
    opacity: 0.5;
    pointer-events: auto;
    transform: translateY(0);
}
.scroll-top-btn:hover {
    opacity: 0.8;
}
.scroll-top-btn:active {
    opacity: 1;
    transform: translateY(0) scale(0.95);
}
@media (max-width: 768px) {
    .scroll-top-btn {
        bottom: 1.2rem;
        right: 1.2rem;
        width: 2.4rem;
        height: 2.4rem;
        line-height: 2.4rem;
    }
}

/* ─── Entwickler Page ─── */
.entwickler-page { max-width: 100%; font-family: var(--sans); font-size: 0.9rem; }
.content-box[data-page="entwickler"] p {
    text-align: left;
    hyphens: manual;
    font-family: var(--sans);
    font-size: 0.9rem;
    line-height: 1.5;
}
.entw-title {
    font-family: var(--serif);
    font-size: 1.6rem;
    color: var(--primary);
    margin: 0 0 0.5rem;
    font-weight: 600;
}
/* Dashboard grid */
.entw-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 0.5rem;
}
.entw-dash-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.entw-dash-card:hover {
    border-color: var(--primary);
    box-shadow: 0 3px 12px rgba(0,0,68,0.1);
}
.entw-dash-icon { font-size: 1.6rem; margin-bottom: 6px; }
.entw-dash-card strong {
    font-size: 0.95rem;
    color: var(--primary);
    margin-bottom: 4px;
}
.entw-dash-count {
    font-size: 0.75rem;
    color: var(--text-light);
}
/* Page picker dropdown */
.entw-page-picker {
    position: relative;
    margin-bottom: 1rem;
    max-width: 460px;
}
.entw-picker-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: var(--sans);
    color: var(--text);
    user-select: none;
    transition: border-color 0.2s;
}
.entw-picker-btn:hover { border-color: var(--primary); }
.entw-picker-arrow { font-size: 0.8rem; color: var(--text-light); transition: transform 0.2s; }
.entw-picker-open .entw-picker-arrow { transform: rotate(180deg); }
.entw-picker-drop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-top: 4px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    padding: 4px 0;
}
.entw-picker-open .entw-picker-drop { display: block; }
.entw-pick-item {
    padding: 6px 14px;
    font-size: 0.85rem;
    font-family: var(--sans);
    cursor: pointer;
    color: var(--text);
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.entw-pick-item:hover { background: #f0eee8; color: var(--primary); }
.entw-pick-parent {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-family: var(--sans);
}
.entw-pick-parent .entw-pick-item { padding: 0; font-weight: 600; color: var(--primary); }
.entw-pick-toggle {
    display: inline-block;
    width: 16px;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    color: var(--text-light);
    transition: transform 0.2s;
    flex-shrink: 0;
    user-select: none;
}
.entw-pick-open > .entw-pick-parent .entw-pick-toggle { transform: rotate(90deg); }
.entw-pick-children { display: none; }
.entw-pick-open > .entw-pick-children { display: block; }
.entw-pick-group { border-bottom: 1px solid #f0ede8; }
.entw-pick-group:last-child { border-bottom: none; }

/* Sub-page header */
.entw-page-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}
.entw-page-head .entw-title { margin: 0; flex: 1; }
.entw-back {
    font-size: 0.85rem;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
}
.entw-back:hover { text-decoration: underline; }
.entw-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.entw-form-row .entw-input { margin-bottom: 6px; }
.entw-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0.5rem 0;
}
.entw-select {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: var(--sans);
    flex: 1;
    min-width: 180px;
}
.entw-btn {
    display: inline-block;
    padding: 7px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: var(--sans);
    text-decoration: none;
    white-space: nowrap;
}
.entw-btn:hover { opacity: 0.85; }
.entw-hint {
    font-size: 0.82rem;
    color: var(--text-light);
    margin-top: 0.5rem;
}
.entw-cbox-link {
    font-size: 1.1rem;
    color: var(--primary);
    text-decoration: none;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.entw-cbox-link:hover { opacity: 1; }
.entw-btn-add {
    width: 100%;
    margin-bottom: 8px;
    font-size: 0.8rem;
    padding: 5px 10px;
    background: transparent;
    color: var(--primary);
    border: 1px dashed var(--border);
}
.entw-btn-add:hover { background: #fafaff; border-color: var(--primary); }
.entw-cbox-form {
    background: #fafaff;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 8px;
}
.entw-input {
    display: block;
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.82rem;
    font-family: var(--sans);
    margin-bottom: 6px;
    box-sizing: border-box;
}
.entw-textarea {
    display: block;
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.82rem;
    font-family: monospace;
    margin-bottom: 6px;
    box-sizing: border-box;
    resize: vertical;
}
.entw-wysiwyg { margin-bottom: 8px; }
.entw-cbox-form .trumbowyg-box { min-height: 180px; border-color: var(--border); border-radius: 3px; }
.entw-cbox-form .trumbowyg-editor { font-family: var(--serif); font-size: 0.95rem; min-height: 140px; }
.entw-cbox-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.entw-btn-cancel {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text-light);
    font-family: var(--sans);
}
.entw-btn-cancel:hover { background: #f4f2ee; }
.entw-cbox-list {
    max-height: 280px;
    overflow-y: auto;
}
.entw-akk-block {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    background: #fff;
}
.entw-akk-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}
.entw-akk-title {
    font-size: 1rem;
    margin: 0;
    color: var(--primary);
    font-family: var(--serif);
}
.entw-akk-note { margin: 0 0 0.5rem 0; font-style: italic; }
.entw-akk-addrow {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border);
}
.entw-akk-addrow .entw-input { flex: 1; }
.entw-entry {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f0ede8;
    gap: 6px;
}
.entw-entry:last-child { border-bottom: none; }
.entw-entry-info { flex: 1; min-width: 0; }
.entw-entry-title {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.entw-entry-meta {
    display: block;
    font-size: 0.72rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.entw-entry-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.entw-btn-sm {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    text-decoration: none;
    transition: all 0.2s;
}
.entw-btn-sm:hover { border-color: var(--primary); color: var(--primary); }
.entw-btn-del:hover { border-color: var(--accent); color: var(--accent); background: #fff5f5; }

/* Kurator-Tool: Entwurf-/Veröffentlichen-Schalter pro Eintrag */
.entw-entry--draft { background: rgba(255, 244, 214, 0.45); }
.entw-entry--draft .entw-entry-title { color: #6b5a30; }
.entw-draft-badge {
    display: inline-block;
    margin-left: 0.5em;
    padding: 1px 6px;
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5c4500;
    background: #ffe9a8;
    border: 1px solid #d4a017;
    border-radius: 10px;
    vertical-align: middle;
}
.entw-btn-publish, .entw-btn-unpublish {
    width: auto !important;
    padding: 0 10px;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
}
.entw-btn-publish {
    background: #f0f7ed;
    border-color: #5a8a4a;
    color: #2f5d22;
}
.entw-btn-publish:hover { background: #5a8a4a; color: #fff; border-color: #5a8a4a; }
.entw-btn-unpublish:hover { border-color: #b8860b; color: #b8860b; background: #fffbf0; }
.entw-publish-toggle {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin: 0.6em 0;
    padding: 8px 12px;
    background: #fffbf0;
    border: 1px solid #e8d89c;
    border-radius: 4px;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--text);
    cursor: pointer;
}
.entw-publish-toggle input[type="checkbox"] { margin: 0; }
.entw-publish-toggle em {
    color: var(--text-light);
    font-style: normal;
    font-size: 0.74rem;
}

.entw-num {
    width: 70px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.82rem;
}
.entw-row label {
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 4px;
}
.entw-status-msg { font-size: 0.8rem; color: green; }
.entw-mgr-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-light);
    margin: 0.5rem 0 0.3rem;
    font-family: var(--sans);
}
.entw-mgr-hint {
    font-weight: 400;
    font-style: italic;
    opacity: 0.75;
    margin-left: 4px;
}
.entw-mgr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
}
.entw-mgr-thumb {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 1;
    cursor: default;
}
.entw-mgr-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.entw-mgr-remove, .entw-mgr-add {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.entw-mgr-thumb:hover .entw-mgr-remove,
.entw-mgr-thumb:hover .entw-mgr-add { opacity: 1; }
.entw-mgr-remove {
    background: var(--accent);
    color: #fff;
}
.entw-mgr-add {
    background: var(--primary);
    color: #fff;
}
.entw-mgr-grid-lg {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    max-height: 320px;
}
/* Group filter tabs */
.entw-group-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.entw-gtab {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    font-size: 0.75rem;
    font-family: var(--sans);
    cursor: pointer;
    color: var(--text-light);
    transition: all 0.2s;
}
.entw-gtab:hover { border-color: var(--primary); color: var(--primary); }
.entw-gtab-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.entw-gtab-count {
    font-size: 0.65rem;
    opacity: 0.7;
    margin-left: 2px;
}
.entw-gtab-active .entw-gtab-count { opacity: 0.9; }

/* ─── Archiv in Zahlen ─── */
.archiv-stats { font-family: var(--sans); }
.archiv-intro {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 1.5rem;
    font-family: var(--serif);
    font-style: italic;
}
.archiv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 2rem;
}
.archiv-wip {
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text-light);
    padding: 2.5rem 1rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: #fff;
    margin: 1.5rem 0 2rem;
}

/* ─── Archiv-Button im Page-Header ─── */
.archiv-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    vertical-align: middle;
    margin-left: 0.9em;
    padding: 0.28em 0.85em;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #fff;
    background: #3a3a3a;
    border: 1px solid #5a5afa;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(90, 90, 250, 0.25), 0 2px 8px rgba(90, 90, 250, 0.35);
}
.archiv-btn:hover {
    background: #1f1f1f;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(90, 90, 250, 0.45), 0 3px 12px rgba(90, 90, 250, 0.55);
}
.archiv-btn.archiv-btn-back {
    background: #6b6b6b;
    color: #fff;
    border-color: #5a5afa;
    box-shadow: 0 0 0 1px rgba(90, 90, 250, 0.2), 0 2px 8px rgba(90, 90, 250, 0.3);
}
.archiv-btn.archiv-btn-back:hover {
    background: #4a4a4a;
    color: #fff;
    border-color: #5a5afa;
    box-shadow: 0 0 0 1px rgba(90, 90, 250, 0.4), 0 3px 12px rgba(90, 90, 250, 0.5);
}
@media (max-width: 768px) {
    .archiv-btn { font-size: 0.7rem; padding: 0.22em 0.7em; margin-left: 0.5em; }
}

/* "Nachwort des Verlegers (=John Uhl)" auf der Saum-Seite:
   – aufeinanderfolgende h3 ohne Doppel-Abstand
   – Aufzählungen kompakt (a–f sowie Bibliografie)
   – Aufzählungs-Punkte schwarz statt akzent-rot */
.content-box[data-page="am_saum_des_grossen_vorhangs_nachwort_des_verlegers_john_uhl"] h3 + h3 {
    margin-top: 0;
}
.content-box[data-page="am_saum_des_grossen_vorhangs_nachwort_des_verlegers_john_uhl"] ul li {
    margin-bottom: 0;
    line-height: 1.45;
}
.content-box[data-page="am_saum_des_grossen_vorhangs_nachwort_des_verlegers_john_uhl"] ul li::before {
    background: #1a1a1a;
}
.content-box[data-page="am_saum_des_grossen_vorhangs_nachwort_des_verlegers_john_uhl"] .uhl-footnotes {
    margin-top: 2.2em;
    padding-top: 1em;
    border-top: 1px solid var(--border);
}
/* Fußnoten-Block: Hochzahl + zweispaltige Liste (Nr. | Titel) — der Titel wird
   so gleich tief eingerückt, egal ob "Nr. 1" oder "Nr. 24" links steht. */
.content-box[data-page="am_saum_des_grossen_vorhangs_nachwort_des_verlegers_john_uhl"] .uhl-footnote {
    display: grid;
    grid-template-columns: 1.7em 1fr;
    align-items: baseline;
    margin: 0 0 0.9em 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-light);
    text-align: left;
    hyphens: none;
}
.content-box[data-page="am_saum_des_grossen_vorhangs_nachwort_des_verlegers_john_uhl"] .uhl-footnote:last-child {
    margin-bottom: 0;
}
.content-box[data-page="am_saum_des_grossen_vorhangs_nachwort_des_verlegers_john_uhl"] .uhl-fn-mark {
    font-weight: bold;
    color: #5a5afa;
    grid-column: 1;
    align-self: start;
    font-size: 0.85em;
}
.content-box[data-page="am_saum_des_grossen_vorhangs_nachwort_des_verlegers_john_uhl"] .uhl-fn-list {
    grid-column: 2;
    margin: 0;
    padding: 0;
    display: grid;
    /* Feste Breite der Nr.-Spalte, damit die Titel über *alle* Fußnoten hinweg
       an der gleichen Linie beginnen — auch bei reinen 1-stelligen (Nr. 5/6/7)
       oder reinen 2-stelligen Nummern (Nr. 21/22/23). */
    grid-template-columns: 3.2em 1fr;
    column-gap: 0.7em;
    row-gap: 0.05em;
}
.content-box[data-page="am_saum_des_grossen_vorhangs_nachwort_des_verlegers_john_uhl"] .uhl-fn-list dt {
    font-weight: normal;
    color: var(--text);
    margin: 0;
}
.content-box[data-page="am_saum_des_grossen_vorhangs_nachwort_des_verlegers_john_uhl"] .uhl-fn-list dd {
    margin: 0;
    color: var(--text-light);
}
/* Hochzahl-Verweise direkt nach den a–f-Aufzählungen */
.content-box[data-page="am_saum_des_grossen_vorhangs_nachwort_des_verlegers_john_uhl"] ul li sup {
    font-size: 0.75em;
    margin-left: 1px;
    color: #5a5afa;
    font-weight: bold;
}

/* Markierung eines Suchbegriffs auf der Zielseite (ausgelöst durch ?hl=…) */
mark.search-hl {
    background: #fff2a0;
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(140, 110, 0, 0.25);
    animation: searchHlPulse 1.4s ease-out 1;
}
@keyframes searchHlPulse {
    0%   { background: #ffd54a; box-shadow: 0 0 0 6px rgba(255, 213, 74, 0.55); }
    100% { background: #fff2a0; box-shadow: 0 0 0 1px rgba(140, 110, 0, 0.25); }
}

/* ─── Volltextsuche-Seite ─── */
.suche-page { font-family: var(--sans); max-width: 780px; }
p.suche-intro {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.18rem;
    line-height: 1.72;
    color: var(--text);
    margin-bottom: 1.2rem;
}
.suche-status-hint {
    display: block;
    font-size: 0.82rem;
    color: var(--text-light);
    font-style: italic;
    margin-top: 0.3rem;
    line-height: 1.5;
}
.suche-status {
    font-size: 0.88rem;
    color: var(--text-light);
    padding: 0.6em 0.9em;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 1.5rem;
}
.suche-form {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0 0.4rem;
}
.suche-form input[type="search"] {
    flex: 1;
    padding: 0.7em 1em;
    font-size: 1.05rem;
    font-family: var(--sans);
    border: 1px solid var(--border);
    border-top-color: #b8b3a8;
    border-radius: 6px;
    background: linear-gradient(#f4f1ea, #fff 60%);
    color: var(--text);
    /* Vertieftes Feld: innerer Schatten oben + zarter Außenglanz unten */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(0, 0, 0, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.7);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.suche-form input[type="search"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        0 0 0 3px rgba(0, 0, 68, 0.18);
}
.suche-form button {
    padding: 0.6em 1.4em;
    font-size: 1rem;
    font-family: var(--sans);
    font-weight: 500;
    background: linear-gradient(#1a1a66, var(--primary) 55%, #00002e);
    color: #fff;
    border: 1px solid #00002e;
    border-radius: 6px;
    cursor: pointer;
    /* Erhabene Taste: Top-Highlight + Boden-Schatten */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 0 rgba(0, 0, 0, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.12);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.suche-form button:hover {
    background: linear-gradient(#222277, #000088 55%, #00003a);
}
.suche-form button:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.4),
        0 0 1px rgba(0, 0, 0, 0.2);
}
p.suche-hint {
    display: block;
    font-size: 0.82rem;
    color: var(--text-light);
    font-style: italic;
    line-height: 1.5;
    margin: 0.3rem 0 1.5rem;
    text-align: left;
}
.suche-results { margin-top: 1.5rem; }
.suche-loading {
    text-align: center;
    color: var(--text-light);
    padding: 2rem;
    font-style: italic;
}
.suche-err {
    padding: 0.8em 1em;
    background: #fde2e2;
    color: #8b0000;
    border-radius: 6px;
    margin: 0.8em 0;
}
.suche-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
    background: #fff;
    border: 1px dashed var(--border);
    border-radius: 8px;
}
.suche-summary {
    padding: 0.8em 1em;
    background: #fff;
    border-left: 3px solid var(--primary);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.suche-remaining {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-left: 0.4em;
}
.suche-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Suchergebnis-Listen: Bullet-Punkt blau (überschreibt globalen .content-box ul li::before mit --accent rot) */
.content-box .suche-list li::before,
main .suche-list li::before {
    background: #5a5afa;
}
.suche-item {
    padding: 0.9em 1em;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.6rem;
}
.suche-book-title {
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 0.35em;
}
.suche-band {
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-light);
    background: #faf8f3;
    padding: 0.12em 0.6em;
    border-radius: 999px;
    margin-left: 0.4em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.suche-pages {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text);
}
.suche-cross {
    margin: 0.2em 0 1em;
    font-size: 0.9rem;
}
.suche-cross-row { margin: 0 0 0.3rem; }
.suche-cross-row:last-child { margin-bottom: 0; }
.suche-cross a {
    color: #5a5afa;
    text-decoration: none;
    border-bottom: 1px dotted #5a5afa;
}
.suche-cross a:hover { border-bottom-style: solid; }
.suche-cross-desc { color: var(--text-light); }

/* Sektions-Überschriften + Open-Access-Dokumente */
.suche-section-title {
    font-family: var(--serif);
    font-size: 1.35rem;
    color: var(--primary);
    margin: 1.6rem 0 0.25rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
}
.suche-section-title:first-of-type { border-top: none; padding-top: 0; margin-top: 1rem; }
.suche-section-note {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0 0 0.8rem;
    font-style: italic;
}
.suche-item-open {
    padding: 0.85rem 0.9rem;
    border-left: 3px solid #5a5afa;
    background: rgba(90,90,250,0.04);
    margin-bottom: 0.7rem;
}
.suche-doc-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.15rem;
}
.suche-doc-type {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5a5afa;
    background: #fff;
    border: 1px solid #5a5afa;
    padding: 0.1rem 0.45rem;
    border-radius: 2px;
    white-space: nowrap;
}
.suche-doc-title {
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--primary);
}
.suche-doc-title:hover { border-bottom-style: solid; }
.suche-doc-sub {
    font-size: 0.88rem;
    color: var(--text-light);
    font-style: italic;
    margin: 0.1rem 0 0.25rem;
}
.suche-doc-author {
    font-size: 0.82rem;
    color: var(--text-light);
    margin-bottom: 0.2rem;
}
.suche-doc-snippet {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text);
    margin: 0.35rem 0;
    padding: 0.4rem 0.6rem;
    background: #fff;
    border-radius: 2px;
}
.suche-doc-snippet mark {
    background: #ffe066;
    color: var(--text);
    padding: 0 0.12em;
    border-radius: 2px;
}
.suche-doc-meta {
    font-size: 0.82rem;
    color: var(--text-light);
    margin-top: 0.3rem;
}
.suche-doc-meta a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--primary);
}
.suche-doc-meta a:hover { border-bottom-style: solid; }

/* Suchindex-Tab (Kurator) */
.entw-suchindex-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}
.entw-idx-status {
    font-size: 0.92rem;
    padding: 0.5rem 0.8rem;
    background: #f6f4ee;
    border-left: 3px solid var(--primary);
    border-radius: 2px;
    min-height: 1.2em;
}
.entw-idx-status:empty { display: none; }

/* Gedichte-CRUD: dynamische Publikationen-Zeilen */
.entw-ged-pubs-label {
    font-size: 0.82rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0.6rem 0 0.3rem;
}
.entw-ged-pubs { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }
.entw-ged-pub-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(120px, 1fr) 32px; gap: 0.4rem; align-items: center; }
.entw-ged-pub-row .entw-ged-pub-kanal { font-weight: 600; }
.entw-ged-pub-remove {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; font-size: 1.1rem; line-height: 1;
}
.entw-ged-pub-add { margin-bottom: 0.6rem; font-size: 0.85rem; background: #eee; border: 1px solid var(--border); color: var(--text); }
.entw-ged-ref-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    margin: 0.4rem 0;
    background: #f6f4ee;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-size: 0.88rem;
    line-height: 1.5;
    cursor: pointer;
}
.entw-ged-ref-toggle input { margin-top: 0.2rem; }
.entw-ged-bandref { margin-top: 0.4rem; }
.entw-ged-ref-hint {
    font-size: 0.82rem;
    color: var(--text-light);
    font-style: italic;
    margin: 0.3rem 0 0.6rem;
    padding: 0.4rem 0.6rem;
    background: #fdf8e8;
    border-left: 3px solid #d4a84a;
    border-radius: 2px;
}
.entw-ged-panel {
    margin: 0.6rem 0;
    padding: 0.6rem 0.9rem;
    background: #f6f4ee;
    border: 1px solid var(--border);
    border-radius: 3px;
}
.entw-ged-panel[open] { background: #fff; }
.entw-ged-panel summary {
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.3rem 0;
}
.entw-ged-panel summary:hover { color: var(--primary); }
.entw-ged-panel summary span { color: var(--text-light); font-size: 0.85rem; font-weight: 400; margin-left: 0.4rem; }
.entw-ged-panel summary code { background: #eee; padding: 0.05rem 0.3rem; border-radius: 2px; }
.entw-ged-panel-body { padding-top: 0.8rem; }
.entw-ged-legende-rows { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }
.entw-ged-legende-row {
    display: grid;
    grid-template-columns: 80px 1fr 32px;
    gap: 0.4rem;
    align-items: center;
}
.entw-ged-legende-row .entw-leg-kanal { font-weight: 600; color: #5a5afa; }
.entw-ged-legende-row .entw-leg-kanal.kanal-hf1 { color: var(--accent); }
.entw-ged-legende-row .entw-leg-kanal.kanal-ga { color: #2e7d32; }
.entw-ged-pub-kanal { color: #5a5afa; font-weight: 600; }
.entw-ged-pub-kanal.kanal-hf1 { color: var(--accent); }
.entw-ged-pub-kanal.kanal-ga { color: #2e7d32; }
.entw-entry-meta .entw-kanal { color: #5a5afa; font-weight: 600; }
.entw-entry-meta .entw-kanal.kanal-hf1 { color: var(--accent); }
.entw-entry-meta .entw-kanal.kanal-ga { color: #2e7d32; }
.entw-ged-subtitles { display: flex; flex-direction: column; gap: 0.6rem; }
.entw-ged-subtitle-row label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.88rem; color: var(--text-light); }
.entw-ged-subtitle-row label strong { color: var(--text); font-weight: 600; font-size: 0.95rem; }
.entw-ged-subtitle-row .entw-ged-subtitle-input { width: 100%; }
.entw-leg-remove {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; font-size: 1.1rem; line-height: 1;
}
.entw-ged-badge-ref {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    background: #eeeae0;
    border: 1px solid var(--border);
    padding: 0.05rem 0.4rem;
    border-radius: 2px;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* ─── Briefregister ─── */
.briefreg-page { font-family: var(--sans); max-width: 1000px; }
p.briefreg-intro {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.18rem;
    line-height: 1.72;
    margin-bottom: 1.2rem;
}
.briefreg-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1.2em;
    font-size: 0.88rem;
    color: var(--text-light);
    background: linear-gradient(to bottom, #ffffff 0%, #faf8f3 100%);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85em 1.1em;
    margin-bottom: 1.5rem;
    box-shadow:
        0 1px 2px rgba(0, 0, 68, 0.05),
        0 2px 8px rgba(0, 0, 68, 0.04);
}
.briefreg-band-stat strong { color: var(--text); }
.briefreg-filter {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr auto;
    gap: 0.6em;
    align-items: end;
    margin-bottom: 1rem;
}
.briefreg-filter label {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    color: var(--text-light);
    gap: 0.25em;
}
.briefreg-filter input,
.briefreg-filter select {
    padding: 0.5em 0.8em;
    font-size: 0.95rem;
    font-family: var(--sans);
    border: 1px solid #c9c3b6;
    border-radius: 6px;
    background: linear-gradient(to bottom, #faf8f3 0%, #ffffff 40%);
    color: var(--text);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 68, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.5);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.briefreg-filter input:hover,
.briefreg-filter select:hover { border-color: #a8a093; }
.briefreg-filter input:focus,
.briefreg-filter select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 68, 0.1),
        0 0 0 3px rgba(0, 0, 68, 0.12);
}
.briefreg-filter button {
    padding: 0.5em 1.1em;
    font-size: 0.9rem;
    background: linear-gradient(to bottom, #ffffff 0%, #ece7db 100%);
    color: var(--text);
    border: 1px solid #c9c3b6;
    border-radius: 6px;
    cursor: pointer;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 1px 2px rgba(0, 0, 68, 0.12);
    transition: all 0.15s ease;
}
.briefreg-filter button:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #e0d9c7 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 2px 4px rgba(0, 0, 68, 0.15);
}
.briefreg-filter button:active {
    background: linear-gradient(to bottom, #ece7db 0%, #ffffff 100%);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 68, 0.15);
    transform: translateY(1px);
}
.briefreg-count {
    font-size: 0.82rem;
    color: var(--text-light);
    margin: 0.2em 0 0.7em;
    min-height: 1.2em;
}
.briefreg-table-wrap {
    background: #fff;
    border: 1px solid #c9c3b6;
    border-radius: 8px;
    box-shadow:
        0 1px 2px rgba(0, 0, 68, 0.06),
        0 3px 12px rgba(0, 0, 68, 0.07);
}
/* Für sticky thead: alle overflow-clipping-Ancestors aufheben */
.content-box[data-page="briefregister"] { overflow: visible; }
.briefreg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
    table-layout: fixed;
}
.briefreg-table th:nth-child(1), .briefreg-table td:nth-child(1) { width: 110px; }  /* Datum */
.briefreg-table th:nth-child(2), .briefreg-table td:nth-child(2) { width: 260px; }  /* Empfänger */
.briefreg-table th:nth-child(3), .briefreg-table td:nth-child(3) { width: 230px; }  /* Quelle — passt "unveröffentlichte Briefe" */
.briefreg-table th:nth-child(4), .briefreg-table td:nth-child(4) { width: 160px; }  /* Seite/Link — packt sich an Quelle */
.briefreg-table th:nth-child(n+2), .briefreg-table td:nth-child(n+2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
    .briefreg-table { table-layout: auto; }
    .briefreg-table th, .briefreg-table td {
        width: auto !important;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}
.briefreg-table th,
.briefreg-table td {
    padding: 0.55em 0.8em;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.briefreg-table th {
    background: linear-gradient(to bottom, #f5f1e5 0%, #e6dfcd 100%);
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    position: sticky;
    top: var(--header-height, 42px);
    z-index: 5;
    border-bottom: 1px solid #b8b0a0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 2px 6px rgba(0, 0, 68, 0.1);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.briefreg-table th:hover {
    background: linear-gradient(to bottom, #faf6ea 0%, #ebe4d3 100%);
}
.briefreg-table th:active {
    background: linear-gradient(to bottom, #e6dfcd 0%, #f5f1e5 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 68, 0.1);
}
.briefreg-table th.sort-asc::after  { content: " ▲"; font-size: 0.7em; color: var(--text-light); }
.briefreg-table th.sort-desc::after { content: " ▼"; font-size: 0.7em; color: var(--text-light); }
.briefreg-table tbody tr:hover { background: #faf8f3; }
.briefreg-table td.c-date {
    font-family: var(--sans);
    white-space: nowrap;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.briefreg-table td.c-source { white-space: nowrap; color: var(--text); }
.briefreg-table td.c-page {
    text-align: left;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.brf-link {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--primary);
}
.brf-link:hover { border-bottom-style: solid; }
.brf-link-pending {
    color: var(--text-light);
    font-style: italic;
    font-size: 0.88em;
    cursor: help;
}
.brf-empty {
    text-align: center !important;
    color: var(--text-light);
    padding: 2rem !important;
    font-style: italic;
}
@media (max-width: 768px) {
    .briefreg-filter { grid-template-columns: 1fr 1fr; }
    .briefreg-filter label:nth-child(4) { grid-column: span 2; }
    .briefreg-filter button { grid-column: span 2; justify-self: start; }
}

/* ─── Gedichtregister (analog Briefregister) ─── */
.gedreg-page { font-family: var(--sans); max-width: 1000px; }
.gedreg-intro {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.18rem;
    line-height: 1.72;
    margin: 0 0 1.2rem;
    color: var(--text);
    font-weight: normal;
}
/* Editor-Artefakte (h1–h4, strong, em-Verschachtelung) auf einheitlichen Look normalisieren */
.gedreg-intro h1,
.gedreg-intro h2,
.gedreg-intro h3,
.gedreg-intro h4 {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
}
.gedreg-intro p {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    line-height: inherit;
    margin: 0 0 0.6em;
}
.gedreg-intro p:last-child { margin-bottom: 0; }
.gedreg-intro strong { font-weight: 700; }
.gedreg-intro em { font-style: inherit; }
.gedreg-intro a { color: #5a5afa; }
.gedreg-stats {
    display: flex; flex-wrap: wrap;
    gap: 0.4em 1.2em;
    font-size: 0.88rem;
    color: var(--text-light);
    background: linear-gradient(to bottom, #ffffff 0%, #f0f2ff 100%);
    border: 1px solid #c8cbe8;
    border-radius: 8px;
    padding: 0.85em 1.1em;
    margin-bottom: 1.5rem;
    box-shadow:
        0 1px 2px rgba(0, 0, 68, 0.05),
        0 2px 8px rgba(0, 0, 68, 0.04);
}
.gedreg-stats strong { color: var(--text); }
.gedreg-kanal-stat {
    background: #fff;
    border: 1px solid #c8cbe8;
    padding: 0.12rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #5a5afa;
    font-weight: 600;
}
.gedreg-kanal-stat strong { color: var(--text); }
.gedreg-filter {
    display: grid;
    grid-template-columns: 1.5fr 1fr auto;
    gap: 0.6em;
    align-items: end;
    margin-bottom: 1rem;
}
.gedreg-filter label {
    display: flex; flex-direction: column;
    font-size: 0.78rem; color: var(--text-light);
    gap: 0.25em;
}
.gedreg-filter input,
.gedreg-filter select {
    padding: 0.5em 0.8em;
    font-size: 0.95rem;
    font-family: var(--sans);
    border: 1px solid #c8cbe8;
    border-radius: 6px;
    background: linear-gradient(to bottom, #f0f2ff 0%, #ffffff 40%);
    color: var(--text);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 68, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.5);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.gedreg-filter input:hover,
.gedreg-filter select:hover { border-color: #9aa0d8; }
.gedreg-filter input:focus,
.gedreg-filter select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 68, 0.1),
        0 0 0 3px rgba(0, 0, 68, 0.12);
}
.gedreg-filter button {
    padding: 0.5em 1.1em;
    font-size: 0.9rem;
    background: linear-gradient(to bottom, #ffffff 0%, #e4e7fa 100%);
    color: var(--text);
    border: 1px solid #c8cbe8;
    border-radius: 6px;
    cursor: pointer;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 1px 2px rgba(0, 0, 68, 0.12);
    transition: all 0.15s ease;
}
.gedreg-filter button:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #d5daf4 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 2px 4px rgba(0, 0, 68, 0.15);
}
.gedreg-filter button:active {
    background: linear-gradient(to bottom, #e4e7fa 0%, #ffffff 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 68, 0.15);
    transform: translateY(1px);
}
.gedreg-count {
    font-size: 0.82rem;
    color: var(--text-light);
    margin: 0.2em 0 0.7em;
    min-height: 1.2em;
}
/* Für sticky thead: content-box-Clipping aufheben */
.content-box[data-page="gedichtregister"] { overflow: visible; }
.gedreg-table-wrap {
    background: #fff;
    border: 1px solid #c8cbe8;
    border-radius: 8px;
    box-shadow:
        0 1px 2px rgba(0, 0, 68, 0.06),
        0 3px 12px rgba(0, 0, 68, 0.07);
}
/* Für sticky thead: alle overflow-clipping-Ancestors aufheben (analog Briefregister) */
.content-box[data-page="gedichtregister"] { overflow: visible; }
.gedreg-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.93rem;
}
.gedreg-table th:nth-child(1), .gedreg-table td:nth-child(1) { width: 240px; }  /* Werk */
.gedreg-table th:nth-child(2), .gedreg-table td:nth-child(2) { width: 140px; }  /* Entstanden */
.gedreg-table th:nth-child(3), .gedreg-table td:nth-child(3) { width: auto; }   /* Erschienen */
.gedreg-table th:nth-child(4), .gedreg-table td:nth-child(4) { width: 170px; }  /* Erstpublikation */
.gedreg-table th:nth-child(5), .gedreg-table td:nth-child(5) { width: 95px; }   /* Volltext */
.gedreg-table th { white-space: nowrap; }
@media (max-width: 900px) {
    .gedreg-table { table-layout: auto; }
    .gedreg-table th, .gedreg-table td {
        width: auto !important;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}
.gedreg-table th,
.gedreg-table td {
    padding: 0.55em 0.8em;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.gedreg-table th {
    background: linear-gradient(to bottom, #eef0ff 0%, #d8dcf5 100%);
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: var(--header-height, 42px);
    z-index: 5;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
    border-bottom: 1px solid #a8b0d8;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 2px 6px rgba(0, 0, 68, 0.1);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.gedreg-table th:hover {
    background: linear-gradient(to bottom, #f4f6ff 0%, #e2e5f8 100%);
}
.gedreg-table th:active {
    background: linear-gradient(to bottom, #d8dcf5 0%, #eef0ff 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 68, 0.1);
}
.gedreg-table th.sort-asc::after  { content: " ▲"; font-size: 0.7em; color: var(--text-light); }
.gedreg-table th.sort-desc::after { content: " ▼"; font-size: 0.7em; color: var(--text-light); }
.gedreg-table tbody tr:hover { background: #eef0ff; }
.gedreg-table td.c-werk a {
    color: var(--primary);
    font-family: var(--serif);
    font-size: 1.02rem;
    text-decoration: none;
    border-bottom: 1px dotted var(--primary);
}
.gedreg-table td.c-werk a:hover { border-bottom-style: solid; }
.gedreg-table td.c-pubs { line-height: 1.4; }
.gedreg-pub {
    display: inline-block;
    background: #eef0ff;
    border: 1px solid #c8cbe8;
    padding: 0.1rem 0.45rem;
    border-radius: 2px;
    margin: 0 0.25rem 0.2rem 0;
    font-size: 0.88rem;
    white-space: nowrap;
}
.gedreg-pub strong { color: #5a5afa; font-weight: 600; }
.gedreg-pub-date { color: var(--text-light); margin-left: 0.2em; }
.gedreg-open {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--primary);
    white-space: nowrap;
}
.gedreg-open:hover { border-bottom-style: solid; }
.gedreg-row-ref td.c-werk { color: var(--text-light); font-style: italic; }
.gedreg-row-ref td.c-werk a { color: inherit; border-bottom: none; cursor: default; }
.gedreg-ref-badge {
    display: inline;
    font-size: 0.62rem;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0;
    color: var(--text-light);
    background: transparent;
    border: none;
    padding: 0;
    margin-left: 0.35rem;
    vertical-align: baseline;
    font-style: italic;
    opacity: 0.7;
    white-space: nowrap;
}
.gedreg-ref-note { color: var(--text-light); font-style: italic; font-size: 0.88rem; }
.gedreg-ref-missing { opacity: 0.55; }
.gedreg-empty {
    text-align: center !important;
    color: var(--text-light);
    padding: 2rem !important;
    font-style: italic;
}
.gedreg-legend {
    margin: 1rem 0 1.2rem;
    padding: 0.6rem 0.9rem;
    background: #eef0ff;
    border-left: 3px solid #5a5afa;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-light);
}
.gedreg-legend-title {
    cursor: pointer;
    color: var(--text);
    font-weight: 600;
    list-style: none;
    user-select: none;
}
.gedreg-legend-title::-webkit-details-marker { display: none; }
.gedreg-legend-title::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.4em;
    color: #5a5afa;
    transition: transform 0.15s ease;
}
.gedreg-legend[open] > .gedreg-legend-title::before { transform: rotate(90deg); }
.gedreg-legend-body { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dotted var(--border); }
.gedreg-legend-row {
    display: grid;
    grid-template-columns: 3em 1fr;
    gap: 0 0.4rem;
    align-items: baseline;
}
.gedreg-legend-abbr {
    font-weight: 600;
    color: #5a5afa;
    font-variant-numeric: tabular-nums;
}
.gedreg-legend-hint { display: block; font-style: italic; margin-top: 0.4rem; }

/* Kürzel "HF 1" (John Uhl, unveröffentlichter Privatdruck „HF sämtliche Gedichte Teil 1") — Rot */
.ged-legende-row.kanal-hf1 dt,
.gedreg-legend-row.kanal-hf1 .gedreg-legend-abbr,
.gedreg-kanal-stat.kanal-hf1,
.gedreg-pub.kanal-hf1 strong,
.ged-item-kanal.kanal-hf1 { color: var(--accent); }
.gedreg-kanal-stat.kanal-hf1 { border-color: #d9a5a5; }
.gedreg-pub.kanal-hf1 { background: #fbecec; border-color: #e3b9b9; }
.ged-item-kanal.kanal-hf1 { border-color: #e3b9b9; }

/* Kürzel "GGA" und "ZGA" (Gesamtausgabe-Bände mit Gedichten) — Grün */
.ged-legende-row.kanal-ga dt,
.gedreg-legend-row.kanal-ga .gedreg-legend-abbr,
.gedreg-kanal-stat.kanal-ga,
.gedreg-pub.kanal-ga strong,
.ged-item-kanal.kanal-ga { color: #2e7d32; }
.gedreg-kanal-stat.kanal-ga { border-color: #b7d7b7; }
.gedreg-pub.kanal-ga { background: #e8f5e9; border-color: #b7d7b7; }
.ged-item-kanal.kanal-ga { border-color: #b7d7b7; }
@media (max-width: 768px) {
    .gedreg-filter { grid-template-columns: 1fr 1fr; }
    .gedreg-filter button { grid-column: span 2; justify-self: start; }
    .gedreg-table { table-layout: auto; font-size: 0.9rem; }
}

.archiv-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}
.archiv-num {
    font-size: 2rem;
    font-weight: 700;
    color: #5a5afa;
    font-family: var(--serif);
    line-height: 1;
    margin-bottom: 6px;
}
.archiv-label {
    font-size: 0.8rem;
    color: var(--text-light);
}
.archiv-stats h3 {
    font-family: var(--serif);
    font-size: 1.2rem;
    color: var(--primary);
    margin: 1.5rem 0 0.5rem;
}
.archiv-stats p { font-size: 0.95rem; line-height: 1.6; }
.archiv-visits {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-light);
}

/* ─── Kurator Statistik ─── */
.entw-curator-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0.6rem 0 1rem;
    padding: 12px 16px;
    border: 1px solid #e8d89c;
    background: #fffbf0;
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text);
}
.entw-curator-banner.is-marked {
    border-color: #5a8a4a;
    background: #f0f7ed;
    color: #2f5d22;
}
.entw-curator-banner > div { flex: 1; min-width: 0; }
.entw-curator-banner button {
    flex-shrink: 0;
    white-space: nowrap;
}
.entw-stat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 1rem;
}
.entw-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}
.entw-stat-num {
    font-size: 1.8rem;
    font-weight: 700;
    color: #5a5afa;
    font-family: var(--serif);
    line-height: 1;
    margin-bottom: 4px;
}
.entw-stat-label {
    font-size: 0.78rem;
    color: var(--text-light);
    font-family: var(--sans);
}
.entw-stat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    font-family: var(--sans);
}
.entw-stat-table th {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 2px solid var(--border);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-light);
    font-weight: 500;
}
.entw-stat-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #f0ede8;
}
.entw-stat-table a {
    color: var(--primary);
    text-decoration: none;
}
.entw-stat-table a:hover { text-decoration: underline; }
.entw-stat-num-cell {
    text-align: right;
    font-weight: 600;
    color: var(--primary);
    font-family: var(--serif);
}
@media (max-width: 768px) {
    .entw-stat-cards { grid-template-columns: 1fr 1fr; }
}
/* Mobile */
@media (max-width: 768px) {
    .entw-dash-grid { grid-template-columns: 1fr 1fr; }
    .content-box p.entw-hint { text-align: left; }
}

/* ═══════════════════════════════════════════════
   ACCESSIBILITY (WCAG 2.1 AA)
   ═══════════════════════════════════════════════ */

/* ─── Screen-reader only ─── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Skip-Link ─── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100001;
    background: var(--primary);
    color: #fff;
    padding: 0.75rem 1.5rem;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 0 0 var(--radius) var(--radius);
    text-decoration: none;
    white-space: nowrap;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    color: #fff;
    outline: 3px solid rgb(255, 191, 0);
    outline-offset: 2px;
}

/* ─── Focus-visible: globaler Tastatur-Fokus-Indikator ───
   Goldener Outline-Ring auf jedem fokussierbaren Element bei Tastatur-Bedienung
   (`:focus-visible` greift NICHT bei reinen Mausklicks, also keine Maus-Störung).
   Spezifische Akkordeon-/Komponenten-Styles können diese Regel mit eigener
   `:focus-visible`-Variante überschreiben. */
:focus-visible {
    outline: 2px solid rgb(255, 191, 0);
    outline-offset: 2px;
    border-radius: 2px;
}
/* main als Skip-Link-Ziel: kein Outline (reines Programmtarget für Fokussprung) */
#main-content:focus {
    outline: none;
}

/* ─── Animation Pause Button ─── */
/* Pause-Button: nur auf Museum-Landing sichtbar */
.a11y-pause-wrap {
    display: none;
}
.museum-landing ~ .a11y-pause-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    transition: opacity 0.4s ease;
}
.a11y-pause-btn {
    display: flex;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    background: rgba(71, 22, 28, 0.7);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.a11y-pause-label {
    margin-top: 0.4rem;
    font-family: var(--sans);
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    letter-spacing: 0.03em;
}
@media (max-width: 768px) {
    .museum-landing ~ .a11y-pause-wrap { display: none; }
}
.a11y-pause-btn:hover {
    background: var(--accent);
}
.a11y-pause-btn:focus-visible {
    outline: 3px solid rgb(255, 191, 0);
    outline-offset: 3px;
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto; }
    .content-box {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .page-transition { display: none; }
    .hero-portrait.slideshow .slide {
        transition: none;
    }
    .sig-intro-overlay { display: none; }
    .sig-uebertitel { opacity: 1; }
    .museum-fade-in { animation: none; opacity: 1; }
    .scroll-reveal { opacity: 1 !important; transform: none !important; }
    .dia-slide { transition: none; }
}

/* Paused state (JS toggles body.animations-paused) */
body.animations-paused .hero-portrait.slideshow .slide {
    transition: none;
}
body.animations-paused .content-box {
    opacity: 1; transform: none; animation: none;
}
body.animations-paused .page-transition { display: none; }
body.animations-paused .dia-slide { transition: none; }

/* Museum GIF hint overlay */
.museum-gif-hint {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(255, 191, 0);
    font-family: var(--serif);
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.5s ease;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.museum-gif-overlay:focus { outline: none; }
.museum-gif-overlay:focus-visible {
    outline: 3px solid rgb(255, 191, 0);
    outline-offset: -6px;
}
.museum-gif-overlay:focus-visible .museum-gif-hint {
    opacity: 1;
    color: rgb(255, 220, 120);
}

/* ======= CONTEMPLATIO ======= */
/* Labyrinth-Icon im Page-Header / Hero (oben rechts, dezent aber erkennbar) */
.contemplatio-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(120, 180, 255, 0.45);
    opacity: 0.72;
    transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
    z-index: 5;
}
.contemplatio-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Weisser Symbolfilter auf dunklem Grund */
    filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(255,255,255,0.4));
    transition: filter 0.35s ease;
}
.contemplatio-icon:hover {
    opacity: 1;
    background: rgba(120, 180, 255, 0.22);
    border-color: rgba(120, 180, 255, 0.75);
    transform: scale(1.08);
}
.contemplatio-icon.playing {
    opacity: 1;
    background: rgba(120, 180, 255, 0.2);
    border-color: rgba(120, 180, 255, 0.95);
    animation: contemplatio-breathe 2.4s ease-in-out infinite;
}
.contemplatio-icon.playing img {
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(120,180,255,1));
    animation: contemplatio-breathe-img 2.4s ease-in-out infinite;
}
@keyframes contemplatio-breathe {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(120,180,255,0.6);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 26px 8px rgba(120,180,255,0.55);
        transform: scale(1.12);
    }
}
@keyframes contemplatio-breathe-img {
    0%, 100% { filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(120,180,255,0.7)); }
    50%      { filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(120,180,255,1)); }
}
/* Im Hero: auf der Zeile des h1 "Herbert Fritsche", rechtsbündig */
.hero-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.2rem;
}
.hero-title-row h1 { margin-bottom: 0 !important; }
.contemplatio-icon-hero {
    position: static;
    flex-shrink: 0;
}
/* Im Page-Header (Subpages): oben rechts */
.page-header { position: relative; }
.page-header .container { position: relative; }
.contemplatio-icon-header {
    position: absolute;
    top: 18px;
    right: 1.5rem;
}
/* Museum-Seiten: Icon inline im h1, auf der Titelzeile */
.contemplatio-icon-inline {
    position: static;
    display: inline-flex;
    vertical-align: middle;
    float: right;
    width: 44px;
    height: 44px;
    margin-left: 1rem;
}

/* ===== Contemplatio-Unterseite ===== */
.contemplatio-page {
    max-width: 840px;
    margin: 0 auto;
    /* WCAG 1.4.3 AA: cp-accent musste dunkler werden — vorher #6464ff (4.11:1
       auf cream / 4.37:1 auf white) lag unter dem 4.5:1-Schwellenwert für
       Body-Text. Aktuell #5a5afa (4.63 cream / 4.91 white) — knapp über AA mit
       Mini-Reserve, optisch nahe am Original. Falls künftig mehr Polster
       gewünscht, nächste Stufe wäre #4d4dcc (6.09/6.46). */
    --cp-accent: #5a5afa;
    --cp-accent-dark: #4646dc;
}
.contemplatio-hero {
    padding: 1.5rem 0 2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
    overflow: hidden;
}
.contemplatio-symbol-lg {
    width: 160px;
    height: 160px;
    object-fit: contain;
    float: left;
    margin: 0 2.2rem 0.8rem 0;
    filter: brightness(0) saturate(100%) invert(15%) sepia(40%) saturate(3000%) hue-rotate(225deg);
    opacity: 0.85;
}
.contemplatio-intro > p:nth-of-type(n+3) {
    clear: left;
}
.contemplatio-intro h2 {
    font-family: var(--serif);
    color: var(--primary);
    font-size: 2rem;
    margin-bottom: 0.4rem;
}
.contemplatio-intro .contemplatio-lead {
    font-family: var(--serif);
    font-style: italic;
    color: var(--cp-accent);
    font-size: 1.15rem;
    margin-bottom: 0.9rem;
    line-height: 1.5;
}
.contemplatio-intro p {
    font-family: var(--serif);
    font-style: italic;
    color: var(--text);
    font-size: 1.15rem;
    line-height: 1.5;
    margin-bottom: 0.9rem;
    text-align: justify;
    hyphens: auto;
}

/* Konzept-Sektion zwischen Hero und Player */
.cp-konzept {
    margin: 0 0 2rem;
}
.cp-axis {
    text-align: center !important;
    hyphens: none !important;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--cp-accent);
    background: rgba(90,90,250,0.05);
    border-left: 3px solid var(--cp-accent);
    border-right: 3px solid var(--cp-accent);
    padding: 0.8rem 0.9rem;
    margin: 0.4rem 0 1.6rem !important;
    line-height: 1.7;
    white-space: nowrap;
    overflow-x: auto;
}
.cp-axis-term {
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 600;
    color: var(--primary);
}
/* Vater-Akkordeon: "Einführung" und "Konzept der musikalischen Begleitung" — identisches Styling */
.cp-konzept-section {
    margin: 0 0 1.2rem;
}
.cp-konzept-section:last-of-type { margin-bottom: 0; }
.cp-konzept-section .cp-konzept-h {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
}
.cp-konzept-body > p:not(.cp-axis),
.cp-prog-item p {
    font-family: var(--sans);
    font-weight: 400;
    font-style: normal;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: justify;
    hyphens: auto;
}
.cp-konzept-body > p:not(.cp-axis) { margin-bottom: 0.7rem; }
.cp-konzept-body > p:not(.cp-axis):last-child { margin-bottom: 0; }
.cp-konzept-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0 0.4rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.cp-konzept-head:hover { border-bottom-color: var(--cp-accent); }
.cp-konzept-h-text {
    flex: 1;
    font-family: var(--serif);
    color: var(--primary);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.cp-konzept-chev {
    color: var(--cp-accent);
    font-size: 1.1rem;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.cp-konzept-section.expanded .cp-konzept-chev { transform: rotate(180deg); }
.cp-konzept-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.25s ease;
    padding: 0;
}
.cp-konzept-section.expanded .cp-konzept-body {
    max-height: 4000px;
    padding-top: 0.9rem;
}

.cp-program {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}
.cp-prog-item {
    background: transparent;
    border: none;
    padding: 0;
}
.cp-prog-title {
    font-family: var(--serif);
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 0.3rem;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
}
.cp-prog-num {
    color: var(--cp-accent);
    font-weight: 700;
    font-size: 1.05rem;
    min-width: 1.6rem;
    flex-shrink: 0;
}
.cp-prog-function {
    font-style: italic;
    color: var(--cp-accent);
    font-size: 0.9rem;
    margin: 0 0 0.45rem;
}
.cp-prog-item p { margin: 0; }
.contemplatio-page .cp-outro {
    text-align: center;
    font-style: italic;
    color: var(--text-light);
    font-size: 0.9rem;
    margin: 1.8rem 0 1.6rem;
    padding: 0;
    line-height: 1.5;
    hyphens: none;
}

/* Player mit Stationen-Pfad */
.contemplatio-player {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.6rem 1.8rem 1.4rem;
    box-shadow: 0 4px 16px rgba(0,0,68,0.08);
}
/* Erklärung zur Barrierefreiheit (?page=barrierefreiheit) */
.a11y-page .a11y-lead {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text);
    border-left: 3px solid var(--cp-accent);
    padding: 0.6rem 1rem;
    margin: 0 0 1.6rem;
    background: rgba(90,90,250,0.04);
    line-height: 1.55;
}
.a11y-page h2 {
    font-family: var(--serif);
    font-size: 1.35rem;
    color: var(--primary);
    margin: 1.8rem 0 0.6rem;
    font-weight: 500;
}
.a11y-page h2:first-of-type { margin-top: 1rem; }
.a11y-page ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
}
.a11y-page ul li {
    position: relative;
    padding: 0.45rem 0 0.45rem 1.4rem;
    border-bottom: 1px dashed var(--border);
    line-height: 1.6;
}
.a11y-page ul li:last-child { border-bottom: none; }
.a11y-page ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0.45rem;
    color: var(--cp-accent);
    font-weight: 700;
    font-size: 0.95rem;
}
.a11y-page ul.a11y-todo li::before {
    content: '◷';
    color: var(--text-light);
    font-weight: 400;
}
.a11y-page code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85em;
    background: rgba(0,0,68,0.06);
    padding: 0.05rem 0.32rem;
    border-radius: 3px;
    color: var(--primary);
}

.contemplatio-player .cp-player-header {
    margin: 0 0 0.9rem;
    padding: 0.5rem 0 0.4rem;
    border-bottom: 1px solid var(--border);
}
.contemplatio-player .cp-player-title {
    font-family: var(--serif);
    color: var(--primary);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0;
    line-height: 1.2;
    text-align: left;
}
.contemplatio-player .cp-player-subtitle {
    margin: 0.1rem 0 0;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-light);
    line-height: 1.4;
    text-align: left;
}
.cp-station-path {
    position: relative;
    padding: 0.4rem 0 1rem 1.4rem;
}
.cp-station-path::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: linear-gradient(to bottom, var(--cp-accent) 0%, rgba(90,90,250,0.2) 100%);
    border-radius: 2px;
}
.cp-station {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 10px 12px 10px 6px;
    border-radius: 6px;
    cursor: grab;
    transition: background 0.2s ease;
    user-select: none;
}
.cp-station:hover { background: rgba(0,0,68,0.04); }
.cp-station-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--cp-accent);
    box-shadow: 0 0 0 3px #fff;
    z-index: 1;
    justify-self: center;
}
.cp-station.active .cp-station-dot {
    background: var(--cp-accent);
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(90,90,250,0.25);
}
.cp-station-title {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--primary);
    font-weight: 600;
    line-height: 1.3;
}
.cp-station.active .cp-station-title { color: var(--cp-accent); }
.cp-station-composer {
    font-size: 0.82rem;
    color: var(--text-light);
    font-style: italic;
    margin-top: 2px;
}
.cp-station-play {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--primary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cp-station-play:hover {
    background: var(--cp-accent);
    color: #fff;
    border-color: var(--cp-accent);
}

.cp-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.8rem 0;
    border-top: 1px solid var(--border);
    margin-top: 0.6rem;
}
.cp-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}
.cp-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.cp-btn.cp-playpause {
    width: 52px;
    height: 52px;
    background: var(--cp-accent);
    color: #fff;
    border-color: var(--cp-accent);
    font-size: 1.05rem;
}
.cp-btn.cp-playpause:hover { background: var(--cp-accent-dark); border-color: var(--cp-accent-dark); }
.cp-now {
    flex: 1;
    padding-left: 12px;
    color: var(--text);
    font-family: var(--serif);
    font-size: 0.95rem;
}
.cp-now strong { color: var(--primary); }

.cp-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.2rem 0 0.6rem;
}
.cp-time {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--text-light);
    min-width: 36px;
    font-variant-numeric: tabular-nums;
}
.cp-time:last-child { text-align: right; }
.cp-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}
.cp-bar:hover { background: #d8d3c8; }
.cp-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, var(--cp-accent), var(--cp-accent-dark));
    border-radius: 3px;
    transition: width 0.1s linear;
}

/* Copyright-Hinweis Contemplatio — Größe analog .cp-station-composer (0.82rem),
   grau, kursiv. Höhere Spezifität nötig, weil .content-box p { font-size: 1rem }
   sonst überschreibt. */
.content-box p.music-credit,
main p.music-credit {
    margin: 1.4rem auto 0;
    max-width: 720px;
    padding: 0.7rem 0 0;
    border-top: 1px solid var(--border);
    background: transparent;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-light);
    font-style: italic;
    text-align: justify;
    hyphens: auto;
}
.music-credit strong {
    color: var(--text-light);
    font-weight: 700;
    font-style: normal;
}
.music-credit a {
    color: #5a5afa;
    font-style: normal;
}
.music-credit a:hover { text-decoration: underline; }


@media (max-width: 700px) {
    .contemplatio-hero {
        text-align: center;
    }
    .contemplatio-symbol-lg {
        float: none;
        display: block;
        margin: 0 auto 1rem;
        width: 130px;
        height: 130px;
    }
    .contemplatio-intro p { text-align: left; }
    .contemplatio-intro > p:nth-of-type(n+3) { clear: none; }
    .cp-konzept > p,
    .cp-prog-item p { text-align: left; }
    .cp-axis { font-size: 0.95rem; padding: 0.8rem 0.9rem; }
    .cp-axis-term { font-size: 1.1rem; }
    .cp-prog-num { font-size: 1rem; min-width: 1.4rem; }
    .cp-prog-title { font-size: 0.98rem; }
    .cp-prog-item p { font-size: 0.92rem; }
    .contemplatio-player { padding: 1.1rem; }
    .contemplatio-icon-hero { top: 12px; right: 12px; width: 36px; height: 36px; padding: 5px; }
    .contemplatio-icon-header { top: 12px; right: 1rem; width: 38px; height: 38px; padding: 5px; }
    .cp-now { font-size: 0.85rem; padding-left: 8px; }
}

/* hero container muss relativ sein damit das icon positioniert wird */
.hero .container { position: relative; }

/* Fotos-Seite: Content-Box wird unsichtbar (transparent, randlos) */
.content-box--bare {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: none !important;
}
.content-box--bare::before,
.content-box--bare::after { display: none !important; }
.fotos-diashow-wrap { display: flex; justify-content: center; }
.fotos-diashow {
    width: 100%;
    text-align: center;
    padding: 30px 0 20px;
}
.fotos-diashow .dia-gallery-fotos {
    margin: 0 auto;
}
.fotos-diashow .dia-caption {
    margin-top: 28px;
    font-family: var(--serif, 'Cormorant Garamond', serif);
    font-size: 1.3rem;
    font-style: italic;
    color: var(--text, #1a1a1a);
}
.fotos-diashow .dia-caption-sep {
    width: 120px;
    margin: 14px auto 12px;
    border: 0;
    border-top: 1px solid var(--border);
}
.fotos-diashow .dia-caption.dia-caption-credit {
    margin-top: 0;
    color: var(--text-light);
}

/* Diashow-Labyrinth im Page-Header (fotos) — sieht aus wie Contemplatio-Icon,
   ist aber ein Button mit eigener Klick-Logik */
button.dia-labyrinth-btn {
    background: transparent;
    padding: 0;
    cursor: pointer;
}
button.dia-labyrinth-btn:focus { outline: none; }
button.dia-labyrinth-btn:focus-visible {
    outline: 2px solid rgb(255, 191, 0);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Diashow-Audio Editor-Block (Entwickler-Tab) */
.entw-dia-music {
    margin-top: 2rem;
    padding: 1rem 1.25rem 1.25rem;
    background: rgba(0,0,68,0.04);
    border: 1px dashed rgba(0,0,68,0.25);
    border-radius: 6px;
}
.entw-dia-music h3 { margin: 0 0 0.5rem; color: #000044; }
.entw-dia-music-current {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0.5rem 0 0.75rem;
    font-size: 0.9rem;
}
.entw-dia-music-icon { color: #000044; font-size: 1.2rem; }
.entw-dia-music-file { font-family: monospace; font-size: 0.85rem; color: var(--text-light); }
.entw-dia-music-preview { height: 28px; }
.entw-dia-music-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Contemplatio Autoplay-Hinweis (Firefox) */
.contemplatio-hint {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 10000;
    max-width: 360px;
    background: #000044;
    color: #faf8f3;
    border: 1px solid rgba(255,191,0,0.4);
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    font-family: var(--sans);
    animation: cphFadeIn 0.4s ease-out;
}
.contemplatio-hint .cph-inner { padding: 18px 20px 16px; }
.contemplatio-hint strong { color: rgb(255,191,0); font-weight: 600; }
.contemplatio-hint p { margin: 8px 0; font-size: 0.88rem; line-height: 1.45; }
.contemplatio-hint .cph-note { opacity: 0.75; font-size: 0.8rem; font-style: italic; }
.contemplatio-hint .cph-actions { margin-top: 12px; text-align: right; }
.contemplatio-hint .cph-btn {
    background: rgb(255,191,0);
    color: #000044;
    border: 0;
    padding: 7px 18px;
    border-radius: 3px;
    font-family: var(--sans);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
}
.contemplatio-hint .cph-btn:hover { background: #fff; }
@keyframes cphFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
    .contemplatio-hint { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* ─── Trumbowyg: eigene Text-Buttons (Fn¹, Fn¶, ↵→¶) ───
 * Ohne SVG-Icon → Text-Label muss sichtbar sein. Ggf. etwas Luft + Mono-Font,
 * damit die Sonderzeichen sauber wirken.
 */
.trumbowyg-button-pane button[type="button"][class$="fnMark"],
.trumbowyg-button-pane button[type="button"][class$="fnPara"],
.trumbowyg-button-pane button[type="button"][class$="cleanBreaks"] {
    width: auto;
    min-width: 38px;
    padding: 0 8px;
    font-size: 0.78rem;
    font-family: var(--sans, system-ui, sans-serif);
    color: #333;
    letter-spacing: 0.02em;
}
.trumbowyg-button-pane button[type="button"][class$="cleanBreaks"] {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.trumbowyg-button-pane button[type="button"][class$="textBlue"] {
    width: auto;
    min-width: 32px;
    padding: 0 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #5a5afa !important;
    font-family: var(--serif, Georgia, serif);
}
/* Erläuterungs-Stil: Inter sans, justiert mit Silbentrennung — gleiche Optik
 * wie die Konzept-Erläuterungen auf der Contemplatio-Seite (.cp-prog-item p).
 * Zwei Größen-Varianten via Format-Dropdown („Erläuterung 0.95rem" / „1rem").
 */
p.serif-quote,
p.serif-quote-lg {
    font-family: var(--sans, 'Inter', system-ui, sans-serif);
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
    text-align: justify;
    hyphens: auto;
}
p.serif-quote { font-size: 0.95rem; }
p.serif-quote-lg { font-size: 1rem; }
@media (max-width: 700px) {
    p.serif-quote,
    p.serif-quote-lg { text-align: left; }
}
/* Dropdown-Einträge „Erläuterung" selbst nicht fett darstellen — Trumbowyg
 * vererbt sonst evtl. die Stile aus dem Editor-Kontext. */
.trumbowyg-dropdown button.trumbowyg-formatErlaeuterung-button,
.trumbowyg-dropdown button.trumbowyg-formatErlaeuterungLg-button {
    font-weight: 400 !important;
    font-style: normal !important;
}

/* ─── Briefdokumente: 7. Eintrag als reine Verlinkung zum Briefregister ─── */
.akt-entry.akt-link-entry {
    display: block;
    text-decoration: none;
    color: inherit;
}
.akt-entry.akt-link-entry .akt-link-header {
    /* gleiche Optik wie .akt-header, aber kein klappbares Verhalten */
    cursor: pointer;
}
.akt-entry.akt-link-entry:hover .akt-link-arrow {
    transform: none;
    color: #5a5afa;
}
.akt-entry.akt-link-entry .akt-link-arrow {
    /* Pfeil zeigt nach rechts-oben (externe Navigation) statt nach unten (Aufklappen) */
    transform: none;
}

/* ─── Briefdokumente Vorwort-Kacheln (drei nebeneinander, dreizeilige Beschriftung) ─── */
.bd-vorwort-cards {
    /* Symmetrische vertikale Abstände zum Text darüber/darunter. */
    margin: 1.6rem 0 1.6rem;
}
.bd-vorwort-cards .gedichte-hub-card {
    text-align: center;
    align-items: center;
    padding: 1rem 0.9rem;
}
.bd-vorwort-cards .ghc-band {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}
.bd-vorwort-cards .ghc-name {
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.35;
    margin-bottom: 0.5rem;
}
.bd-vorwort-cards .ghc-cta {
    font-size: 0.82rem;
    color: var(--text-light);
    font-style: italic;
    line-height: 1.3;
}

/* Editor-Vorschau: Fußnoten-Absatz-Markierung im Edit-Modus sichtbar machen */
.trumbowyg-editor p.im-footnote::before {
    content: '⤷ Fußnote';
    display: inline-block;
    font-size: 0.65rem;
    color: var(--accent, #8b0000);
    background: #f7e9e9;
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
    user-select: none;
}

/* ─── Audio-Inhaltsangabe (zur Laufzeit unter <audio> injiziert, WCAG 1.2.3) ───
   Default: visuell unsichtbar (sr-only), aber im DOM/Accessibility-Tree für
   Screenreader greifbar. Sehende User aktivieren die Anzeige im Footer-Toggle
   („Hinweise: an"), dann werden die <details>-Akkordeons sichtbar. */
.audio-desc {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    margin: -1px;
    padding: 0;
    border: 0;
}
body.show-a11y-aux .audio-desc {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    margin: 0.4rem 0 0.8rem;
    padding: 0.4rem 0.7rem;
    background: rgba(0, 0, 68, 0.04);
    border-left: 3px solid var(--primary);
    border-radius: 0 3px 3px 0;
    font-family: var(--sans);
    font-size: 0.88rem;
    line-height: 1.55;
}
.audio-desc > summary {
    cursor: pointer;
    color: var(--primary);
    font-weight: 500;
    font-size: 0.85rem;
    list-style: none;
    padding: 0.1rem 0;
}
.audio-desc > summary::-webkit-details-marker { display: none; }
body.show-a11y-aux .audio-desc > summary::before {
    content: '▸ ';
    display: inline-block;
    transition: transform 0.2s;
    width: 1em;
}
body.show-a11y-aux .audio-desc[open] > summary::before { content: '▾ '; }
.audio-desc-body {
    padding: 0.5rem 0 0.3rem 1.1em;
    color: var(--text);
    /* Newlines aus Plaintext-Eingaben des Curators als Zeilenumbrüche darstellen */
    white-space: pre-line;
}
.audio-desc-body p { margin: 0 0 0.5rem; white-space: normal; }
.audio-desc-body p:last-child { margin-bottom: 0; }

/* ─── Bildbeschreibungen + Audio-Inhalte Curator-Tabs ─── */
.entw-bildalts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 0.9rem;
    margin-top: 1rem;
}
.entw-bildalts-row {
    display: flex;
    gap: 0.8rem;
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
}
.entw-bildalts-row[data-empty="1"] {
    border-left: 3px solid var(--accent);
}
.entw-bildalts-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 3px;
    background: #f4f4f4;
}
.entw-bildalts-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.entw-bildalts-name {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--text-light);
    word-break: break-all;
}
.entw-bildalts-input {
    width: 100%;
    font-family: var(--sans);
    font-size: 0.88rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    resize: vertical;
}
.entw-bildalts-meta {
    font-size: 0.7rem;
    color: var(--text-light);
    text-align: right;
}

.entw-audioinhalt-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}
.entw-audioinhalt-row {
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
}
.entw-audioinhalt-row[data-empty="1"] {
    border-left: 3px solid var(--accent);
}
.entw-audioinhalt-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.entw-audioinhalt-name {
    font-family: var(--sans);
    font-size: 0.95rem;
}
.entw-audioinhalt-dir {
    font-family: var(--sans);
    font-size: 0.75rem;
    color: var(--text-light);
}
.entw-audioinhalt-input {
    width: 100%;
    font-family: var(--sans);
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    resize: vertical;
    line-height: 1.5;
}

/* ─── Globale Musik-Status-Pill (WCAG 1.4.2 Audio Control) ───
   Sichtbar nur wenn Hintergrundmusik läuft. Auf der Contemplatio-Seite
   versteckt, da dort der vollwertige Player vorhanden ist. */
.music-pill {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 4000;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.55rem 0.45rem 0.9rem;
    background: var(--primary, #000044);
    color: rgba(255,255,255,0.92);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0,0,68,0.25), 0 1px 3px rgba(0,0,0,0.1);
    font-family: var(--sans);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    animation: musicPillIn 0.35s var(--transition-smooth, ease-out);
}
.music-pill[hidden] { display: none; }
.music-pill-label {
    line-height: 1;
    white-space: nowrap;
}
.music-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(255,191,0,0.92);
    color: #000044;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.78rem;
    line-height: 1;
    transition: background 0.2s, transform 0.15s;
}
.music-pill-btn:hover { background: rgb(255,191,0); }
.music-pill-btn:active { transform: scale(0.94); }
.music-pill-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes musicPillIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .music-pill { animation: none; }
}
@media (max-width: 768px) {
    .music-pill {
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
        padding: 0.4rem 0.45rem 0.4rem 0.85rem;
        font-size: 0.78rem;
    }
    .music-pill-btn { width: 1.85rem; height: 1.85rem; }
}