/* VOH-Liederdatenbank – Grundgestaltung (ergänzt Bootstrap 5, keine externen Schriften) */

:root {
    --voh-ink: #1d2733;
    --voh-muted: #5b6673;
    --voh-accent: #2f5d8a;
    --voh-accent-dark: #244a70;
    --voh-surface: #f4f6f8;
    --voh-line: #d9dfe6;

    --bs-primary: var(--voh-accent);
    --bs-primary-rgb: 47, 93, 138;
    --bs-link-color: var(--voh-accent);
    --bs-link-hover-color: var(--voh-accent-dark);
    --bs-body-color: var(--voh-ink);
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.btn-primary {
    --bs-btn-bg: var(--voh-accent);
    --bs-btn-border-color: var(--voh-accent);
    --bs-btn-hover-bg: var(--voh-accent-dark);
    --bs-btn-hover-border-color: var(--voh-accent-dark);
    --bs-btn-active-bg: var(--voh-accent-dark);
    --bs-btn-active-border-color: var(--voh-accent-dark);
    --bs-btn-disabled-bg: var(--voh-accent);
    --bs-btn-disabled-border-color: var(--voh-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--voh-accent);
    --bs-btn-border-color: var(--voh-accent);
    --bs-btn-hover-bg: var(--voh-accent);
    --bs-btn-hover-border-color: var(--voh-accent);
    --bs-btn-active-bg: var(--voh-accent-dark);
    --bs-btn-active-border-color: var(--voh-accent-dark);
}

.voh-body {
    background: var(--voh-surface);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
}

.voh-header {
    background: #fff;
    border-bottom: 1px solid var(--voh-line);
}

.voh-header-inner {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
}

.voh-brand {
    color: var(--voh-ink);
    font-weight: 650;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.voh-main {
    flex: 1 0 auto;
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.voh-narrow { max-width: 38rem; }
.voh-narrow-wide { max-width: 50rem; }
.voh-form { max-width: 28rem; }

h1, h2, h3, .h1, .h2, .h3, .h4, .h5 { letter-spacing: -0.01em; }

.voh-table {
    background: #fff;
    border: 1px solid var(--voh-line);
}

.voh-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--voh-line);
    background: #fff;
    color: var(--voh-muted);
    font-size: 0.875rem;
    padding: 1rem 0;
}

.voh-footer .container > * + * { margin-left: 1.25rem; }

:focus-visible {
    outline: 3px solid rgba(47, 93, 138, 0.45);
    outline-offset: 2px;
}

/* Interner Bereich */
.voh-nav {
    background: #fff;
    border-bottom: 1px solid var(--voh-line);
}

.voh-nav .nav-link.active {
    font-weight: 600;
    color: var(--voh-accent);
}

.voh-stat {
    background: #fff;
    border: 1px solid var(--voh-line);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    height: 100%;
}

.voh-stat-value {
    font-size: 1.9rem;
    font-weight: 650;
    line-height: 1.1;
}

.voh-stat-label {
    color: var(--voh-muted);
    font-size: 0.9rem;
}

/* Lieder */
.voh-views .nav-link {
    padding: 0.3rem 0.75rem;
    font-size: 0.9rem;
    color: var(--voh-ink);
    background: #fff;
    border: 1px solid var(--voh-line);
    margin: 0 0.35rem 0.35rem 0;
    border-radius: 2rem;
}

.voh-views .nav-link.active {
    background: var(--voh-accent);
    border-color: var(--voh-accent);
    color: #fff;
}

.voh-tag {
    border: 1px solid var(--voh-line);
    font-weight: 400;
    text-decoration: none;
    margin: 0 0.2rem 0.2rem 0;
}

.voh-dl dt { color: var(--voh-muted); font-weight: 500; }
.voh-dl dd { margin-bottom: 0.5rem; }

.voh-stat-date {
    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1.9rem;
}

.voh-stat-link { color: inherit; text-decoration: none; }
.voh-stat-link:hover { text-decoration: underline; }

.voh-checks { max-height: 14rem; overflow-y: auto; }
.voh-notes { white-space: normal; background: #fff; border: 1px solid var(--voh-line); padding: 0.75rem 1rem; border-radius: 0.5rem; }
.voh-search { max-width: 56rem; }
.voh-songform { max-width: 60rem; }

/* Öffentlicher Bereich */
.voh-header-inner { flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.voh-pubnav { display: flex; gap: 1.25rem; margin-left: auto; }
.voh-pubnav a { color: var(--voh-ink); text-decoration: none; padding: 0.25rem 0; border-bottom: 2px solid transparent; }
.voh-pubnav a:hover, .voh-pubnav a.active { border-bottom-color: currentColor; }

/* Tabelle wird auf kleinen Bildschirmen zu übersichtlichen Karten (Spaltenbeschriftung über data-label) */
@media (max-width: 767.98px) {
    .voh-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .voh-stack, .voh-stack tbody, .voh-stack tr, .voh-stack td { display: block; width: 100%; }
    .voh-stack tr { background: #fff; border: 1px solid var(--voh-line); border-radius: 0.5rem; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; }
    .voh-stack td { border: 0; padding: 0.15rem 0; }
    .voh-stack td:empty { display: none; }
    .voh-stack td[data-label]::before { content: attr(data-label) ": "; color: #6c757d; font-size: 0.85em; }
    .voh-stack td[data-label="Titel"]::before { content: none; }
    .voh-stack td[data-label="Titel"] { font-weight: 600; font-size: 1.05rem; }
}

@media print {
    .voh-header, .voh-footer, .no-print { display: none !important; }
    .voh-body { background: #fff; }
}

/* Balken in der Statistik (Fortschrittsanzeige statt Inline-Styles wegen der Content-Security-Policy) */
.voh-barcell { width: 35%; min-width: 6rem; }
.voh-bar { width: 100%; height: 0.8rem; accent-color: var(--bs-primary, #0d6efd); }