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

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Inter:wght@300;400;500&display=swap');

: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: var(--accent); }

/* ─── 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);
}

/* ─── 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; }
.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: var(--white);
    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: var(--cream);
    color: rgb(100, 100, 255);
}
.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: var(--cream);
    color: var(--accent);
}
.sub-group-open > .sub-nav-parent .sub-nav-toggle {
    transform: rotate(90deg);
    color: var(--accent);
}
.sub-nav-children {
    display: none;
    background: var(--cream);
    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: var(--accent);
    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;
}

/* ─── 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 h1 {
    font-family: var(--serif);
    font-size: 2.8rem;
    font-weight: 400;
    margin-bottom: 0.2rem;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.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 h1 {
    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: rgb(100, 100, 255);
    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;
}
.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 rgb(100, 100, 255);
    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(100, 100, 255, 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;
}
.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;
}
main a, .content-box a {
    color: rgb(100, 100, 255);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}
main a:hover, .content-box a:hover { border-bottom-color: rgb(100, 100, 255); color: rgb(100, 100, 255); }
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;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.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%;
    }
}

/* ─── 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: var(--accent);
    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: var(--accent); }

/* ─── 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: var(--accent);
}
.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: var(--accent);
    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: var(--accent);
}
.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: var(--accent);
}
.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(139, 0, 0, 0.04);
    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: var(--accent);
    border-color: var(--accent);
    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 rgb(100, 100, 255);
    border-radius: 50%;
    background: #fff;
    color: rgb(100, 100, 255);
    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: rgb(100, 100, 255); color: #fff; }
.gedicht-audio-btn:active { transform: translateY(1px); }
.gedicht-audio-btn.playing {
    background: rgb(100, 100, 255);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(100, 100, 255, 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-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: rgb(100, 100, 255);
    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: rgb(100, 100, 255);
    text-decoration: none;
    border-bottom: 1px dotted rgb(100, 100, 255);
}
.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-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: rgb(100, 100, 255);
    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 rgb(100, 100, 255);
    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; }
.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: rgb(100, 100, 255); }
@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: rgb(100, 100, 255);
}
.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 {
    font-size: 0.95rem;
    line-height: 1.75;
}

/* 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 {
    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);
}

/* 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; }

/* 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;
}
.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; }
    body:has(.content-box[data-page="startseite"]) .hero { display: none; }
    .slideshow-settings { bottom: 12px; right: 12px; }
    .hero-text h1 { 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; }

    .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 .container {
        flex-direction: column;
        text-align: center;
    }

    /* 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 h1 { 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: '';
    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"] > * {
    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 top / 102% auto no-repeat;
}
.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 var(--accent, #8b0000);
}
.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: rgb(100, 100, 255);
    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: rgb(100, 100, 255);
    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; }

.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-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 rgb(100, 100, 255);
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(100, 100, 255, 0.25), 0 2px 8px rgba(100, 100, 255, 0.35);
}
.archiv-btn:hover {
    background: #1f1f1f;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(100, 100, 255, 0.45), 0 3px 12px rgba(100, 100, 255, 0.55);
}
.archiv-btn.archiv-btn-back {
    background: #6b6b6b;
    color: #fff;
    border-color: rgb(100, 100, 255);
    box-shadow: 0 0 0 1px rgba(100, 100, 255, 0.2), 0 2px 8px rgba(100, 100, 255, 0.3);
}
.archiv-btn.archiv-btn-back:hover {
    background: #4a4a4a;
    color: #fff;
    border-color: rgb(100, 100, 255);
    box-shadow: 0 0 0 1px rgba(100, 100, 255, 0.4), 0 3px 12px rgba(100, 100, 255, 0.5);
}
@media (max-width: 768px) {
    .archiv-btn { font-size: 0.7rem; padding: 0.22em 0.7em; margin-left: 0.5em; }
}

/* ─── 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-radius: 6px;
    background: #fff;
    color: var(--text);
}
.suche-form input[type="search"]:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}
.suche-form button {
    padding: 0.6em 1.4em;
    font-size: 1rem;
    font-family: var(--sans);
    font-weight: 500;
    background: var(--primary);
    color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.suche-form button:hover { background: #000088; }
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;
}
.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: rgb(100, 100, 255);
    text-decoration: none;
    border-bottom: 1px dotted rgb(100, 100, 255);
}
.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 var(--accent);
    background: rgba(139,0,0,0.03);
    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: var(--accent);
    background: #fff;
    border: 1px solid var(--accent);
    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: rgb(100, 100, 255); }
.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: rgb(100, 100, 255); 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: rgb(100, 100, 255); 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: rgb(100, 100, 255); }
.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: rgb(100, 100, 255);
    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);
}
@media (max-width: 900px) {
    .gedreg-table-wrap { overflow-x: auto; }
}
.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; }
.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: rgb(100, 100, 255); 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 rgb(100, 100, 255);
    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: rgb(100, 100, 255);
    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: rgb(100, 100, 255);
    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: rgb(100,100,255);
    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-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: rgb(100,100,255);
    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: TODO Barrierefreiheit später ─── */
*:focus-visible {
    outline: none;
}
#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-visible .museum-gif-hint {
    opacity: 0;
}

/* ======= 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;
}
.contemplatio-hero {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 2.2rem;
    align-items: start;
    padding: 1.5rem 0 2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
}
.contemplatio-symbol-lg {
    width: 160px;
    height: 160px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(15%) sepia(40%) saturate(3000%) hue-rotate(225deg);
    opacity: 0.85;
}
.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(--accent);
    font-size: 1.15rem;
    margin-bottom: 0.9rem;
    line-height: 1.5;
}
.contemplatio-intro p {
    color: var(--text);
    line-height: 1.65;
    margin-bottom: 0.8rem;
    text-align: justify;
    hyphens: auto;
}

/* 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);
}
.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(--accent) 0%, rgba(139,0,0,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.dragging { opacity: 0.4; }
.cp-station-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 3px #fff;
    z-index: 1;
    justify-self: center;
}
.cp-station.active .cp-station-dot {
    background: var(--accent);
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(139,0,0,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(--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(--accent);
    color: #fff;
    border-color: var(--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(--accent);
    color: #fff;
    border-color: var(--accent);
    font-size: 1.05rem;
}
.cp-btn.cp-playpause:hover { background: #a80000; }
.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-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 0.7rem 0 0.4rem;
    font-size: 0.88rem;
    color: var(--text);
}
.cp-mode-label { font-weight: 600; color: var(--primary); margin-right: 4px; }
.cp-mode label { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }

.cp-actions { padding-top: 0.4rem; }
.cp-link-btn {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
}
.cp-link-btn:hover { color: var(--accent); }
.cp-hint {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--border);
    font-size: 0.78rem;
    color: var(--text-light);
    font-style: italic;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .contemplatio-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .contemplatio-symbol-lg { margin: 0 auto; width: 130px; height: 130px; }
    .contemplatio-intro p { text-align: left; }
    .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);
}

/* 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; }

/* 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; }
}