/* ============================================
   OpernLog – Design System
   Inspired by Letterboxd with Opera Aesthetics
   ============================================ */

/* --- CSS Variables / Design Tokens --- */
:root {
    /* Colors */
    --bg-primary: #14181c;
    --bg-secondary: #1c2228;
    --bg-tertiary: #242c34;
    --bg-elevated: #2c343c;

    --text-primary: #e0e0e0;
    --text-secondary: #9ab;
    --text-muted: #678;

    --accent: #8b1a2b;
    --accent-light: #b22d40;
    --accent-dark: #5c111c;
    --gold: #c9a84c;
    --gold-light: #dfc06a;
    --gold-dark: #a08030;

    --green: #00c030;
    --red: #e74c3c;

    /* Aliasse für Namen, die im Stylesheet verwendet, aber nie definiert
       wurden. Eine ungültige var()-Referenz laesst die ganze Deklaration auf
       ihren Ausgangswert zurückfallen – bei background heisst das
       transparent, und das Element verschwindet lautlos. Genau daran ist der
       Kopieren-Knopf beim Hover unsichtbar geworden. */
    --text: #e0e0e0;
    --bg: #14181c;
    --card-bg: #1c2228;
    --accent-dim: #5c111c;
    /* Beim ersten Durchgang übersehen: die Schrittnummern auf der
       Einladungsseite standen dadurch auf transparentem Grund. */
    --primary: #b22d40;

    --border: rgba(255, 255, 255, 0.06);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);

    /* Typography */
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;

    /* Spacing */
    --nav-width: 240px;
    --content-max: 1000px;

    /* Transitions */
    --transition: 0.2s ease;
    --transition-slow: 0.4s ease;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

a {
    color: var(--gold);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--gold-light);
}

/* Kästen, die als Ganzes ein Link sind, sollen beim Überfahren nicht ihre
   Schriftfarbe wechseln – sie zeigen das über ihren Rand. Ohne diese Ausnahme
   gewinnt a:hover (0,1,1) gegen die Klasse des Kastens (0,1,0), und die Zahl
   auf der Besuche-Kachel oder der Hausname wurden mitten im Kasten golden. */
@media (hover: hover) {
    a.opera-card:hover,
    a.house-card:hover,
    a.stat-card--klickbar:hover,
    a.favorite-item--klickbar:hover {
        color: inherit;
    }
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
}

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

/* --- Layout --- */
#app {
    display: flex;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    margin-left: var(--nav-width);
    min-height: 100vh;
    padding: 0;
    width: calc(100% - var(--nav-width));
    max-width: 100%;
}

.page {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 32px 24px 64px;
    overflow-x: hidden;
}

/* --- Navigation --- */
.main-nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--nav-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow-y: auto;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}

.nav-brand__logo {
    /* holds the brand mark SVG – aspect ratio of its viewBox is 46:40 */
    width: 34px;
    height: 30px;
    color: var(--gold);
    flex-shrink: 0;
}

.nav-brand__logo svg {
    width: 100%;
    height: 100%;
    display: block;
}

.nav-brand__name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-light), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links {
    display: flex;
    flex-direction: column;
    padding: 12px 8px;
    gap: 2px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition);
    text-decoration: none;
    cursor: pointer;
}

.nav-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.nav-link:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-link--active {
    background: var(--bg-tertiary);
    color: var(--gold) !important;
}

.nav-link--accent {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff !important;
    margin: 8px 0;
}

.nav-link--accent:hover {
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    transform: translateY(-1px);
}

.nav-mobile-toggle {
    display: none;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 200;
    width: 44px;
    height: 44px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}

.nav-mobile-toggle svg {
    width: 24px;
    height: 24px;
    overflow: visible;
}

/* Der Menüknopf ist ein <button>: ohne eigene Polsterung, Schrift und
   Tipp-Aufhellung des Browsers. Beim Öffnen werden die drei Striche zum
   Kreuz (src/components/Navigation.js). */
.nav-mobile-toggle {
    padding: 0;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition), border-color var(--transition), transform 0.12s ease;
}

.nav-mobile-toggle:active {
    transform: scale(0.92);
}

.nav-mobile-toggle--offen {
    border-color: rgba(201, 168, 76, 0.45);
    color: var(--gold-light, #e0c47a);
}

.nav-mobile-toggle__strich {
    transform-box: view-box;
    transform-origin: 12px 12px;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s ease;
}

/* Erst auf die Mitte schieben, dann um die Mitte drehen. In CSS wirkt die
   rechte Angabe zuerst – umgekehrt kreuzten sich die Striche neben der
   Mitte, und das Kreuz stand schief (14.11.2026). */
.nav-mobile-toggle--offen .nav-mobile-toggle__strich--oben {
    transform: rotate(45deg) translateY(6px);
}

.nav-mobile-toggle--offen .nav-mobile-toggle__strich--mitte {
    opacity: 0;
    transform: scaleX(0.2);
}

.nav-mobile-toggle--offen .nav-mobile-toggle__strich--unten {
    transform: rotate(-45deg) translateY(-6px);
}

/* --- Page Header --- */
.page-header {
    margin-bottom: 32px;
}

.page-header__title {
    font-size: 32px;
    margin-bottom: 8px;
}

.page-header__subtitle {
    color: var(--text-secondary);
    font-size: 16px;
}

/* --- Hero Section --- */
.hero {
    background: linear-gradient(135deg, var(--accent-dark) 0%, var(--bg-primary) 60%, var(--bg-secondary) 100%);
    border-radius: 20px;
    padding: 48px 40px;
    margin-bottom: 40px;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.hero__title {
    font-size: 40px;
    margin-bottom: 12px;
}

.text-accent {
    background: linear-gradient(135deg, var(--accent-light), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero__subtitle {
    color: var(--text-secondary);
    font-size: 18px;
    max-width: 500px;
    margin-bottom: 24px;
}

.hero__actions {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.hero__stats {
    display: flex;
    gap: 32px;
}

.hero__stat {
    display: flex;
    flex-direction: column;
}

.hero__stat-number {
    font-size: 28px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--gold);
}

.hero__stat-label {
    font-size: 13px;
    color: var(--text-muted);
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}

.btn--primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
}

.btn--primary:hover {
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(139, 26, 43, 0.4);
    color: #fff;
}

.btn--accent {
    background: var(--gold);
    color: var(--bg-primary);
}

.btn--accent:hover {
    background: var(--gold-light);
    color: var(--bg-primary);
}

.btn--outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn--outline:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn--ghost:hover {
    color: var(--gold);
}

.btn--lg {
    padding: 14px 28px;
    font-size: 16px;
    border-radius: 12px;
}

.btn--sm {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 8px;
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all var(--transition);
    font-family: var(--font-body);
}

.btn-icon:hover {
    background: var(--bg-tertiary);
}

.btn-icon--active {
    color: var(--accent-light);
}

.btn-icon__count {
    font-size: 13px;
    color: var(--text-muted);
}

/* --- Cards --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.card-grid--houses {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.card-grid--operas {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* House Card */
.house-card {
    display: block;
    background: var(--bg-secondary);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition);
    border: 1px solid var(--border);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.house-card > * {
    pointer-events: none;
}

@media (hover: hover) {
    .house-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
        border-color: rgba(201, 168, 76, 0.2);
    }
}

.house-card__banner {
    height: 100px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 10px 14px;
}

.house-card__city-badge {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.house-card__content {
    padding: 16px;
}

.house-card__name {
    font-size: 17px;
    font-family: var(--font-display);
    margin-bottom: 8px;
}

.house-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.house-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.house-card__rating {
    color: var(--gold);
    font-weight: 700;
    font-size: 14px;
}

.house-card__rating--none {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 12px;
}

.house-card__visits {
    font-size: 12px;
    color: var(--text-muted);
}

/* Opera Card */
.opera-card {
    display: block;
    background: var(--bg-secondary);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition);
    border: 1px solid var(--border);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.opera-card > * {
    pointer-events: none;
}

@media (hover: hover) {
    .opera-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
        border-color: rgba(201, 168, 76, 0.2);
    }
}

.opera-card__color {
    height: 80px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 8px 12px;
}

.opera-card__year {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 8px;
    border-radius: 4px;
}

.opera-card__content {
    padding: 14px;
}

.opera-card__title {
    font-size: 15px;
    font-family: var(--font-display);
    margin-bottom: 4px;
    line-height: 1.3;
}

.opera-card__composer {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.opera-card__meta {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.opera-card__genre,
.opera-card__lang {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
}

.opera-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.opera-card__rating {
    color: var(--gold);
    font-weight: 700;
    font-size: 14px;
}

.opera-card__visits {
    font-size: 12px;
    color: var(--text-muted);
}

/* --- Detail Pages --- */
.detail-hero {
    padding: 48px 40px 40px;
    border-radius: 20px;
    margin-bottom: 32px;
    position: relative;
    border: 1px solid var(--border);
}

.back-link {
    display: inline-block;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all var(--transition);
}

@media (hover: hover) {
    .back-link:hover {
        color: var(--gold);
        background: rgba(0, 0, 0, 0.6);
        border-color: rgba(201, 168, 76, 0.3);
    }
}

/* Bildausschnitt wählen (nur Admins, src/components/BildAusschnitt.js):
   ein runder Knopf oben rechts im Kopf, wie der Zurück-Knopf gestaltet;
   beim Wählen ein Rahmen, die Leiste mit den Knöpfen und gedämpfter Text. */
.bild-ausschnitt__knopf {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition);
}

.bild-ausschnitt__knopf svg {
    width: 18px;
    height: 18px;
}

/* display oben würde hidden sonst überstimmen */
.bild-ausschnitt__knopf[hidden] {
    display: none;
}

@media (hover: hover) {
    .bild-ausschnitt__knopf:hover {
        color: var(--gold);
        background: rgba(0, 0, 0, 0.6);
        border-color: rgba(201, 168, 76, 0.3);
    }
}

.detail-hero--ausschnitt {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    outline: 2px dashed var(--gold);
    outline-offset: -2px;
}

.detail-hero--ziehen {
    cursor: grabbing;
}

.detail-hero--ausschnitt .detail-hero__content,
.detail-hero--ausschnitt .back-link {
    pointer-events: none;
    opacity: 0.35;
}

/* Eine dunkle Tafel: die Knöpfe müssen auch auf einem hellen Bild lesbar sein. */
.bild-ausschnitt__leiste {
    position: absolute;
    top: 12px;
    right: 12px;
    max-width: calc(100% - 24px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(20, 24, 28, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: default;
}

.bild-ausschnitt__hinweis {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 0 4px;
}

/* Auf dem Handy passen die drei Knöpfe sonst nicht in eine Zeile, und die
   Tafel deckte ein Drittel des Bildes zu. Der gestrichelte Rahmen sagt dort
   genug. */
@media (max-width: 480px) {
    .bild-ausschnitt__hinweis {
        display: none;
    }
}

/* Lesbarkeit im Kopf: Titel und Angaben lagen direkt auf unruhigen Plakaten
   und Fotos (Jonas, 1.10.2026). Ein dunkler Verlauf von unten und von links,
   wo der Text steht, dazu ein Schatten unter der Schrift; oben rechts bleibt
   das Bild hell. Der Verlauf liegt über dem Hintergrund, Zurück-Knopf und
   Text darüber. */
.detail-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(to top, rgba(12, 14, 17, 0.85) 0%, rgba(12, 14, 17, 0.55) 45%, rgba(12, 14, 17, 0) 80%),
        linear-gradient(to right, rgba(12, 14, 17, 0.45) 0%, rgba(12, 14, 17, 0) 60%);
    pointer-events: none;
}

.detail-hero > .back-link,
.detail-hero > .detail-hero__content {
    position: relative;
}

.detail-hero > .back-link {
    background: rgba(12, 14, 17, 0.62);
}

/* Bildnachweis unten rechts im Kopf: klein und blass, wird beim Zeigen
   deutlicher (src/components/Bildnachweis.js). */
.bildnachweis {
    position: absolute;
    right: 14px;
    bottom: 8px;
    display: flex;
    max-width: calc(100% - 28px);
    white-space: nowrap;
    font-size: 10.5px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    text-decoration: none;
    transition: color 0.15s;
}

.bildnachweis__wer {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bildnachweis__lizenz {
    flex: none;
}

.bildnachweis:hover,
.bildnachweis:focus-visible {
    color: rgba(255, 255, 255, 0.9);
}

.detail-hero__title,
.detail-hero__meta,
.detail-hero__rating-count {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 18px rgba(0, 0, 0, 0.5);
}

.detail-hero__title {
    font-size: 36px;
    margin-bottom: 16px;
}

.detail-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: 20px;
}

/* Feste Höhe, so hoch wie die Sterne: vorher stand hier zuerst ein Ladekreisel
   mit 40px Innenabstand (104px), dann die Sterne (48px) oder "Noch keine
   Bewertungen" (26px). Der Kopf schrumpfte um bis zu 80px, und das Bild, das
   ihn ausfüllt, sprang dabei auf eine neue Größe. */
.detail-hero__rating {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
}

.detail-hero__rating .loading-spinner {
    padding: 0;
}

.detail-hero__rating-count {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.detail-body {
    padding: 0;
}

.detail-section {
    margin-bottom: 32px;
}

.detail-description {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.detail-librettist {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* --- Star Rating --- */
.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.star-rating--sm .star {
    font-size: 16px;
}

.star-rating--md .star {
    font-size: 22px;
}

.star-rating--lg .star {
    font-size: 30px;
}

.star {
    transition: all var(--transition);
    user-select: none;
}

.star--full {
    color: var(--gold);
}

/* Halber Stern: Umriss wie ein leerer, darüber die linke Hälfte gold.
   Beide Zeichen in derselben Rasterzelle – absolut darübergelegt saß die
   gefüllte Hälfte ein paar Pixel tiefer als der Umriss. */
.star--half {
    display: inline-grid;
}

.star__leer,
.star__halb {
    grid-area: 1 / 1;
}

.star__leer {
    color: var(--text-muted);
    opacity: 0.3;
}

.star__halb {
    width: 50%;
    overflow: hidden;
    white-space: nowrap;
    color: var(--gold);
}

.star--empty {
    color: var(--text-muted);
    opacity: 0.3;
}

.star-rating__number {
    font-size: 14px;
    color: var(--text-secondary);
    margin-left: 6px;
    font-weight: 600;
}

.star-rating__hint {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 4px;
    font-style: italic;
}

/* --- Review Card --- */
.feed-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-card {
    background: var(--bg-secondary);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--border);
    transition: border-color var(--transition);
}

.review-card:hover {
    border-color: rgba(201, 168, 76, 0.15);
}

.review-card--compact {
    padding: 14px;
}

.review-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.review-card--clickable {
    cursor: pointer;
    transition: border-color var(--transition), transform var(--transition);
}

.review-card--clickable:hover {
    border-color: rgba(201, 168, 76, 0.3); /* Subtle gold border on hover */
}

.review-card__user {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.review-card__user-info {
    display: flex;
    flex-direction: column;
}

.review-card__username {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.review-card__username:hover {
    color: var(--gold);
}

.review-card__date {
    font-size: 12px;
    color: var(--text-muted);
}

.review-card--standalone {
    border: none;
    background: transparent;
    padding: 0;
}

.review-card--standalone .review-card__header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

/* --- Visit Detail Background --- */
.page--visit {
    position: relative;
    min-height: 100vh;
}

.page--visit > * {
    position: relative;
    z-index: 1;
}

.visit-detail__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.35; /* Increased opacity for dark theme visibility */
    z-index: 0 !important;
    pointer-events: none;
    filter: blur(15px) brightness(0.9) grayscale(20%); /* Lighter blur effect */
    transform: scale(1.1); /* Prevent blurred edges */
}

/* Andenken ("Momentaufnahmen"): Fotos in der Karte eines Abends
   (src/components/Andenken.js). Auf der Seite des Abends ein Mosaik – das
   erste Foto groß, die übrigen je nach Anzahl darum herum; im Log-Formular
   ein Raster aus Quadraten mit Knöpfen darauf. */
.andenken {
    position: relative;
    margin: 18px 0 16px;
}

.andenken[hidden] {
    display: none;
}

.andenken__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.andenken__titel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
}

.andenken__titel .icon {
    width: 16px;
    height: 16px;
    color: var(--gold);
}

.andenken__kopf .andenken__neu {
    gap: 6px;
    cursor: pointer;
}

.andenken__kopf .andenken__neu .icon {
    width: 14px;
    height: 14px;
}

.andenken__neu input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.andenken__neu--laedt {
    cursor: progress;
    opacity: 0.6;
}

.andenken__foto {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--bg-tertiary);
}

.andenken__oeffnen {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.andenken__oeffnen img,
.andenken__foto > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mosaik. Die Höhe folgt aus dem Seitenverhältnis des Ganzen; die Zeilen
   teilen sie auf. minmax(0, …) und overflow: hidden verhindern, dass ein
   großes Bild seine Zeile aufbläht. */
.andenken__mosaik {
    display: grid;
    gap: 3px;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.andenken__mosaik .andenken__oeffnen img {
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
    .andenken__mosaik .andenken__oeffnen:hover img {
        transform: scale(1.04);
    }
}

.andenken__mosaik--1 { aspect-ratio: 4 / 3; }

.andenken__mosaik--2 {
    aspect-ratio: 8 / 5;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.andenken__mosaik--3 {
    aspect-ratio: 4 / 3;
    grid-template: repeat(2, minmax(0, 1fr)) / minmax(0, 2fr) minmax(0, 1fr);
}

.andenken__mosaik--3 .andenken__foto:first-child { grid-row: span 2; }

.andenken__mosaik--4 {
    aspect-ratio: 1;
    grid-template: minmax(0, 2fr) minmax(0, 1fr) / repeat(3, minmax(0, 1fr));
}

.andenken__mosaik--4 .andenken__foto:first-child { grid-column: span 3; }

.andenken__mosaik--5 {
    aspect-ratio: 6 / 5;
    grid-template: minmax(0, 3fr) minmax(0, 2fr) / repeat(6, minmax(0, 1fr));
}

.andenken__mosaik--5 .andenken__foto { grid-column: span 2; }
.andenken__mosaik--5 .andenken__foto:nth-child(-n + 2) { grid-column: span 3; }

.andenken__mosaik--6 {
    aspect-ratio: 1;
    grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
}

.andenken__mosaik--6 .andenken__foto:first-child { grid-area: span 2 / span 2; }

/* Im Feed: höchstens drei Kacheln, flacher und ohne Schatten. Auf breiten
   Karten rechts neben Werk, Besetzung und Review – dort war sonst nur leere
   Fläche –, auf schmalen darunter. */
.feed-list {
    container: feed / inline-size;
}

.andenken--feed {
    margin: 4px 0 14px;
    max-width: 520px;
}

@container feed (min-width: 640px) {
    .review-card__koerper:has(> .andenken--feed) {
        display: flex;
        align-items: flex-start;
        gap: 24px;
    }

    .review-card__koerper > .review-card__inhalt {
        flex: 1;
        min-width: 0;
    }

    .review-card__koerper > .andenken--feed {
        flex: 0 0 300px;
        margin: 2px 0 12px;
    }
}

.andenken__mosaik--feed {
    border-radius: 12px;
    box-shadow: none;
}

.andenken__mosaik--feed.andenken__mosaik--1 { aspect-ratio: 3 / 2; }
.andenken__mosaik--feed.andenken__mosaik--2 { aspect-ratio: 2 / 1; }
.andenken__mosaik--feed.andenken__mosaik--3 { aspect-ratio: 3 / 2; }

/* "+2" auf der letzten Kachel im Feed: so viele Fotos mehr. */
.andenken__mehr {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 10, 14, 0.62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.5rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

/* Eigenes, für Freunde freigegebenes Foto: kleines Zeichen, sonst nichts
   auf dem Bild. */
.andenken__marke {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(10, 12, 16, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--gold);
    pointer-events: none;
}

.andenken__marke .icon {
    width: 13px;
    height: 13px;
}

/* Log-Formular: Quadrate, Knöpfe direkt darauf – vor dem Speichern wird
   schnell sortiert. */
.andenken--auswahl {
    margin: 0;
}

.andenken__raster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.andenken__raster .andenken__foto {
    aspect-ratio: 1;
    border-radius: 12px;
}

.andenken__sicht,
.andenken__weg {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(10, 12, 16, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.andenken__sicht {
    left: 6px;
    bottom: 6px;
}

.andenken__sicht--an {
    color: var(--gold);
}

.andenken__sicht .icon {
    width: 14px;
    height: 14px;
}

.andenken__weg {
    top: 6px;
    right: 6px;
}

.andenken__raster .andenken__neu {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1.5px dashed rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.andenken__raster .andenken__neu:hover {
    border-color: var(--gold-dark);
    background: rgba(201, 168, 76, 0.06);
    color: var(--text-primary);
}

.andenken__raster .andenken__neu span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.andenken__raster .andenken__neu .icon {
    width: 14px;
    height: 14px;
}

/* Vergrößert: das ganze Foto auf fast schwarzem, weichgezeichnetem Grund,
   darunter eine gläserne Leiste. Tippen daneben oder aufs Foto schließt,
   Wischen blättert. */
.andenken-gross .modal__overlay {
    background: rgba(5, 6, 8, 0.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.andenken-gross__rahmen {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 94vw;
    margin: auto;
    cursor: zoom-out;
    touch-action: pan-y pinch-zoom;
}

.andenken-gross__rahmen img {
    max-width: 94vw;
    max-height: calc(88vh - 60px);
    border-radius: 10px;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    user-select: none;
    -webkit-user-drag: none;
    animation: andenkenAuf 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes andenkenAuf {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: none; }
}

.andenken-gross__leiste {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    cursor: default;
}

.andenken-gross__zahl {
    padding: 0 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.andenken-gross__knopf {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.andenken-gross__knopf .icon {
    width: 14px;
    height: 14px;
}

.andenken-gross__knopf:hover {
    background: rgba(255, 255, 255, 0.1);
}

.andenken-gross__sicht--an {
    color: var(--gold);
}

.andenken-gross__weg:hover {
    color: #f08a8a;
}

@media (prefers-reduced-motion: reduce) {
    .andenken-gross__rahmen img,
    .andenken__mosaik .andenken__oeffnen img {
        animation: none;
        transition: none;
    }
}

/* Hinweis für Admins: Speicher bei Supabase fast voll
   (src/components/SpeicherHinweis.js). */
.speicher-hinweis {
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid rgba(240, 170, 60, 0.35);
    border-radius: 10px;
    background: rgba(240, 170, 60, 0.08);
    color: var(--text-primary);
    font-size: 14px;
}

.speicher-hinweis__zeile {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.speicher-hinweis__zeile + .speicher-hinweis__zeile {
    margin-top: 6px;
}

.speicher-hinweis .icon {
    flex: none;
    width: 16px;
    height: 16px;
    color: #f0aa3c;
}

/* #/bildnachweise: schlichte Liste, je Eintrag Name und eine graue Zeile. */
.nachweise {
    margin-bottom: 28px;
}

.nachweise__titel {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.nachweise__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nachweise__eintrag {
    display: grid;
    gap: 1px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}

.nachweise__name {
    font-size: 14px;
    color: var(--text-primary);
}

.nachweise__wer {
    font-size: 12px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.nachweise__wer a {
    color: var(--text-secondary);
}

/* #/sammlungen: der Hinweis auf die noch nicht begonnenen, ohne Zahlenbalken. */
.sammlung__weitere {
    margin: 12px 2px 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* Die unsichtbare Fläche für das haptische Klicken auf dem iPhone
   (src/haptik.js): ein <label> über der ganzen Stelle, der Schalter darin
   winzig und unsichtbar. Fast, aber nicht ganz durchsichtig – ganz
   unsichtbare Flächen nimmt WebKit womöglich nicht als berührt. */
.haptik-flaeche {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    opacity: 0.011;
    cursor: inherit;
    -webkit-tap-highlight-color: transparent;
}

.haptik-flaeche input {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* --- Comments --- */
.comment {
    background: rgba(255, 255, 255, 0.03);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin: 20px 0;
    transition: border-color var(--transition);
}

.review-card--standalone .review-card__opera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin: 20px 0;
    transition: border-color var(--transition);
}

.review-card--standalone .review-card__opera:hover {
    border-color: var(--accent);
}

.review-card--standalone .review-card__opera-info {
    display: flex;
    flex-direction: column;
}

.review-card--standalone .review-card__opera-title {
    font-size: 24px;
    margin-bottom: 4px;
}

.review-card--standalone .review-card__opera-composer {
    margin-left: 0;
    font-size: 14px;
}

.review-card--standalone .review-card__text {
    font-size: 16px;
    line-height: 1.6;
    margin: 24px 0;
    color: var(--text-primary);
}

.review-card__opera {
    margin-bottom: 8px;
    cursor: pointer;
}

.review-card__opera:hover .review-card__opera-title {
    color: var(--gold);
}

.review-card__opera-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    transition: color var(--transition);
}

.review-card__opera-composer {
    font-size: 13px;
    color: var(--text-muted);
    margin-left: 8px;
}

.review-card__house {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    cursor: pointer;
}

.review-card__house:hover {
    color: var(--gold);
}

.review-card__text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 12px;
}

.review-card__actions {
    display: flex;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.review-card__comments {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.comment {
    display: flex;
    gap: 8px;
    font-size: 13px;
    padding: 6px 0;
}

.comment__user {
    font-weight: 600;
    color: var(--text-primary);
}

.comment__text {
    color: var(--text-secondary);
}

.review-card__comment-input {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

/* --- Avatar --- */
.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    /* Bezugsrahmen für das absolut gesetzte .avatar-icon */
    position: relative;
    overflow: hidden;
}

.avatar--xs {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.avatar--sm {
    width: 36px;
    height: 36px;
    font-size: 13px;
}

.avatar--md {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

.avatar--lg {
    width: 80px;
    height: 80px;
    font-size: 28px;
}

/* --- Filters & Search --- */
.filters {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.search-box {
    position: relative;
}

.search-box__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.search-box__input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 15px;
    transition: border-color var(--transition);
}

.search-box__input:focus {
    outline: none;
    border-color: var(--gold);
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition);
}

.chip:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.chip--active {
    background: var(--gold);
    color: var(--bg-primary);
    border-color: var(--gold);
    font-weight: 600;
}

.filter-row {
    display: flex;
    gap: 12px;
}

.sort-controls {
    display: flex;
    gap: 12px;
}

.select {
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.select:focus {
    outline: none;
    border-color: var(--gold);
}

.select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Form Elements --- */
.input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 15px;
    transition: border-color var(--transition);
}

.input:focus {
    outline: none;
    border-color: var(--gold);
}

.input--sm {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 8px;
}

.textarea {
    resize: vertical;
    min-height: 80px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/* Autocomplete */
.autocomplete {
    position: relative;
}

.autocomplete__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-top: 4px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 50;
    display: none;
    box-shadow: var(--shadow);
}

.autocomplete__item {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    transition: background var(--transition);
}

.autocomplete__item:hover {
    background: var(--bg-tertiary);
}

.autocomplete__item strong {
    color: var(--text-primary);
}

/* --- Log Form --- */
.log-form {
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid var(--border);
    max-width: 600px;
}

/* --- Tags --- */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all var(--transition);
}

.tag:hover {
    background: var(--bg-elevated);
    color: var(--gold);
}

.tag--removable {
    background: var(--bg-elevated);
}

.tag__remove {
    cursor: pointer;
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1;
}

.tag__remove:hover {
    color: var(--red);
}

/* --- Diary --- */
.diary-month {
    margin-bottom: 32px;
}

.diary-month__title,
.diary-bewertung__title {
    font-size: 20px;
    color: var(--gold);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* Nach Bewertung sortiert tragen die Blöcke Noten als Überschrift statt
 * Monate. Der Aufbau ist derselbe, der Name darf es nicht sein: ein Block mit
 * der Überschrift "4,5 Sterne" ist kein Monat. */
.diary-bewertung {
    margin-bottom: 32px;
}

/* Grenze zwischen zwei Spielzeiten im Tagebuch.
 *
 * Die Spielzeit läuft von August bis Juli. Zwischen Juli und August liegt der
 * Einschnitt, den ein Opernjahr kennt, und die Monatsüberschriften allein
 * zeigen ihn nicht – Juli und August sehen dort aus wie jeder andere
 * Monatswechsel.
 *
 * Gestrichelt und in Gold, damit die Linie als Zäsur gelesen wird und nicht
 * als weitere Trennlinie zwischen Karten. */
.saison-trenner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 40px 0 32px;
    color: var(--gold);
}

.saison-trenner::before,
.saison-trenner::after {
    content: '';
    flex: 1;
    border-top: 1px dashed var(--gold-dark);
}

.saison-trenner__text {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gold);
}

.diary-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    overflow: hidden;
}

.diary-entry {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    transition: all var(--transition);
    max-width: 100%;
    overflow: hidden;
}

.diary-entry:hover {
    border-color: rgba(201, 168, 76, 0.2);
}

.diary-entry__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
}

.diary-entry__day {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-primary);
    line-height: 1;
}

.diary-entry__weekday {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Nach Bewertung sortiert stehen über den Blöcken die Noten, nicht die Monate.
 * Der Tag allein sagt dann nicht mehr, wann der Abend war – deshalb tritt an
 * die Stelle des Wochentags der Monat samt Jahr. Der breitere Block hält
 * "Sep 2025" auf einer Zeile; umgebrochen verschöbe er die ganze Karte. */
.diary-entry__date--lang {
    min-width: 58px;
}

.diary-entry__date--lang .diary-entry__weekday {
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.diary-entry__color {
    width: 4px;
    height: 40px;
    border-radius: 2px;
    flex-shrink: 0;
}

.diary-entry__info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.diary-entry__title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
}

.diary-entry__house {
    font-size: 13px;
    color: var(--text-muted);
}

.diary-entry__review-icon {
    font-size: 14px;
    flex-shrink: 0;
    cursor: pointer;
    border: 1px solid var(--gold);
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(201, 168, 76, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.diary-entry__rating {
    flex-shrink: 0;
}

.diary-entry__delete {
    opacity: 0;
    transition: opacity var(--transition);
}

.diary-entry:hover .diary-entry__delete {
    opacity: 1;
}

/* --- Profile --- */
.profile-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    padding: 32px;
    background: var(--bg-secondary);
    border-radius: 16px;
    border: 1px solid var(--border);
}

.profile-hero__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* Monogramm und Emblem teilen sich den Kreis, statt übereinander zu liegen:
   das Emblem sitzt unten rechts und wird vom Kreisrand beschnitten, das
   Monogramm rückt nach oben links. Beide bleiben dadurch lesbar. */
.avatar-icon {
    position: absolute;
    right: -12%;
    bottom: -14%;
    width: 76%;
    height: 76%;
    display: flex;
    opacity: 0.62;
    pointer-events: none;
}

.avatar-icon svg {
    width: 100%;
    height: 100%;
    color: #fff;
    /* CSS schlägt das stroke-width-Attribut im SVG. Die Icons sind für 64px
       gezeichnet; im Avatar wären ihre Linien sonst haarfein. */
    stroke-width: 2.4;
}

/* Ein Profilfoto füllt den Kreis und deckt das Monogramm zu; lädt es
   nicht, bleibt das Monogramm darunter stehen. */
.avatar-foto {
    position: absolute;
    inset: 0;
    /* über dem Monogramm, das selbst z-index 1 trägt */
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Nur wenn ein Emblem da ist, weicht das Monogramm aus */
.avatar-icon + .avatar-initials {
    transform: translate(-14%, -10%);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Je kleiner der Kreis, desto kräftiger die Linie */
.avatar--sm .avatar-icon svg,
.feed-card__avatar .avatar-icon svg {
    stroke-width: 3.2;
}

.profile-hero__avatar .avatar-icon {
    width: 80%;
    height: 80%;
}

.profile-hero__avatar .avatar-icon svg {
    stroke-width: 1.9;
}

/* 24px trägt kein Emblem – zwei Buchstaben und ein Instrument werden dort
   zu Matsch. Das Monogramm gewinnt. */
.avatar--xs .avatar-icon {
    display: none;
}

.avatar--xs .avatar-icon + .avatar-initials {
    transform: none;
}

.avatar-initials {
    position: relative;
    z-index: 1;
}

/* Icon Picker */
.icon-picker {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.icon-picker__option {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
    padding: 0;
}

.icon-picker__option svg {
    width: 28px;
    height: 28px;
    color: var(--text-secondary);
}

/* Ein Profilfoto (von Hand eingetragen) steht als eigene Wahl im Picker */
.icon-picker__option img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.icon-picker__option:hover {
    border-color: var(--gold);
    background: var(--bg-elevated);
    transform: translateY(-2px);
}

.icon-picker__option:hover svg {
    color: var(--gold);
}

.icon-picker__option--active {
    border-color: var(--gold);
    background: rgba(201, 168, 76, 0.15);
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.3);
}

.icon-picker__option--active svg {
    color: var(--gold);
}

.icon-picker__option:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.icon-picker__option--none {
    font-size: 18px;
    color: var(--text-muted);
}

.profile-hero__name {
    font-size: 28px;
    margin-bottom: 4px;
}

.profile-hero__bio {
    color: var(--text-secondary);
    font-size: 15px;
    margin-bottom: 6px;
}

.profile-hero__joined {
    font-size: 13px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 12px;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid var(--border);
}

.stat-card__number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--gold);
    margin-bottom: 4px;
}

.stat-card__label {
    font-size: 13px;
    color: var(--text-muted);
}

.profile-favorites {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}

/* Sammlungen im Profil: die drei vordersten Zeilen im Kasten von "Was dir
   noch fehlt" (.sammlung, weiter unten), als Verweise zu #/sammlungen. */
.profil-sammlungen {
    margin: -8px 0 28px;
}

.profil-sammlungen__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.profil-sammlungen__titel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
}

.profil-sammlungen__titel .icon {
    width: 16px;
    height: 16px;
    color: var(--gold);
}

.profil-sammlungen__alle {
    font-size: 0.85rem;
    color: var(--gold);
    text-decoration: none;
}

.favorite-item {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    flex: 1;
}

.favorite-item__label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.favorite-item__value {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
}

/* Die Kachel "Meistbesuchtes Haus" führt zum Haus. Gleiche Sprache wie die
   anklickbaren Zahlen darüber: Hinweis in der Ecke, Rand hebt sich beim
   Überfahren. position: relative, damit der Hinweis am Kasten hängt. */
.favorite-item--klickbar {
    font: inherit;
    color: inherit;
    text-decoration: none;
    display: block;
    position: relative;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.favorite-item__hint {
    position: absolute;
    top: 12px;
    right: 14px;
    line-height: 1;
    font-size: 13px;
    color: var(--text-muted);
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.favorite-item--klickbar:hover .favorite-item__hint {
    opacity: 0.9;
}

.favorite-item--klickbar:hover {
    border-color: var(--gold-dark);
    transform: translateY(-1px);
}

/* Hinweis auf den Seiten, die ohne Netz nicht gehen. */
.offline-hinweis {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.offline-hinweis__titel {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.offline-hinweis .btn {
    margin-top: 8px;
}

/* --- Tabs --- */
.profile-tabs,
.lists-tabs,
.community-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.tab {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

.tab:hover {
    color: var(--text-primary);
}

.tab--active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* --- Lists --- */
.lists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.list-card {
    background: var(--bg-secondary);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--border);
    transition: all var(--transition);
}

.list-card:hover {
    border-color: rgba(201, 168, 76, 0.2);
}

.list-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.list-card__name {
    font-size: 17px;
    font-family: var(--font-display);
    margin-bottom: 6px;
}

.list-card__desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.list-card__user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.list-card__items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.list-card__item {
    background: var(--bg-tertiary);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.list-card__more {
    font-size: 12px;
    color: var(--text-muted);
    padding: 3px 0;
}

.list-card__meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.list-card__delete {
    font-size: 16px;
}

.create-list-btn {
    margin-bottom: 20px;
}

/* --- Community --- */
.community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.user-card {
    background: var(--bg-secondary);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--border);
    display: flex;
    gap: 16px;
    transition: all var(--transition);
}

.user-card:hover {
    border-color: rgba(201, 168, 76, 0.15);
}

.user-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.user-card__info {
    flex: 1;
    min-width: 0;
}

.user-card__name {
    font-size: 16px;
    font-family: var(--font-display);
    margin-bottom: 4px;
}

.user-card__bio {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.user-card__stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.user-card__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

/* --- Modal --- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Wird der Inhalt höher als das Fenster, schiebt align-items: center ihn
       zur Hälfte über den oberen Rand hinaus – Titel und Anfang sind dann
       nicht mehr erreichbar. Mit scrollendem Behälter und margin: auto bleibt
       ein kleines Fenster mittig und ein großes vollständig erreichbar. */
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.modal__content {
    position: relative;
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 32px;
    max-width: 500px;
    width: 100%;
    margin: auto;
    /* Die Höhe bindet sich an den Behälter, nicht an das Sichtfeld: der
       Behälter ist bereits das Sichtfeld minus Innenabstände – auf dem Handy
       einschließlich des Platzes für die feste Kopfzeile. Damit passt das
       Fenster immer genau in den Bereich, der wirklich frei ist. Die beiden
       Zeilen darüber bleiben als Obergrenze und als Rückfall stehen; vh meint
       auf dem iPhone die Höhe OHNE Browserleisten und ist größer als das
       Sichtbare, dvh meint den sichtbaren Bereich. */
    max-height: 80vh;
    max-height: 85dvh;
    max-height: 100%;
    overflow-y: auto;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

/* Auf schmalen Geräten frisst der Innenabstand zu viel von der Breite. */
/* Unterhalb von 900px liegt die Navigation als feste Leiste am oberen Rand
   (68px hoch). Ohne diesen Abstand schiebt sich ein hohes Fenster darunter und
   seine Überschrift ist nicht mehr zu sehen – genau das ist auf dem iPhone
   passiert. env(safe-area-inset-top) kommt für die Statusleiste dazu, wenn die
   App vom Startbildschirm läuft. */
@media (max-width: 900px) {
    .modal {
        padding-top: calc(80px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 520px) {
    .modal {
        padding-left: 16px;
        padding-right: 16px;
    }

    .modal__content {
        padding: 20px;
    }
}

.modal__title {
    font-size: 22px;
    margin-bottom: 24px;
}

/* Fenster mit langer Liste: der Titel bleibt stehen, nur die Liste rollt.
   Sonst scrollt die Überschrift als Erstes aus dem Bild – und dann weiß
   niemand mehr, was er da vor sich hat. */
.modal__content--liste {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal__content--liste .modal__title {
    flex-shrink: 0;
    margin-bottom: 16px;
}

.modal__content--liste .modal__actions {
    flex-shrink: 0;
}

/* --- Selected Items --- */
.selected-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* --- Toast --- */
.toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    /* Eigene Ein-/Ausblendung statt .fade-in: dessen Keyframes setzen
       transform: translateY(0) und löschen mit animation-fill-mode: forwards
       die Zentrierung translateX(-50%). Der Toast stand dadurch um seine halbe
       Breite nach rechts versetzt. */
    animation: toastIn 0.3s ease both;
    background: var(--green);
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    z-index: 2000;
    box-shadow: var(--shadow);
}

/* Fehler heben sich vom Erfolgsgrün ab und dürfen umbrechen –
   eine Fehlermeldung ist selten so kurz wie "Gespeichert". */
.toast--error {
    background: var(--accent);
    max-width: min(560px, calc(100vw - 32px));
    text-align: center;
    line-height: 1.45;
    font-weight: 500;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Ausblenden ebenfalls als Animation – eine transition käme gegen die
   fill-mode-Endwerte der Einblendung nicht an. */
.toast--hide {
    animation: toastOut 0.3s ease forwards;
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

/* --- Icons --- */

/* Icons erben Farbe und Größe ihres Textes – ein Icon in einer Überschrift
   wächst mit, eines in einem Knopf bleibt klein. */
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.14em;
    /* Zweite Absicherung gegen die Mindestgrößenregel für Flex-Elemente in
       Safari und Edge – siehe Kommentar in Icon.js */
    flex-shrink: 0;
    min-width: 0;
    min-height: 0;
}

.page-header__title .icon,
.section__title .icon,
.section-title .icon,
.friend-requests-section__title .icon,
.modal__title .icon {
    width: 0.82em;
    height: 0.82em;
    margin-right: 0.34em;
    color: var(--gold);
    vertical-align: -0.04em;
}

/* Metadatenzeilen: kleiner und zurückgenommen */
.icon--meta {
    width: 0.95em;
    height: 0.95em;
    margin-right: 0.3em;
    opacity: 0.75;
}

/* In Knöpfen mit Zähler daneben */
.btn-icon .icon {
    width: 1.15em;
    height: 1.15em;
}

/* Gesetzter Like: gefüllt und in Akzentfarbe */
.btn-icon--active .icon {
    color: var(--accent-light);
}

/* Icon im Leer-Zustand: groß, aber zurückgenommen */
.empty-state__icon .icon {
    width: 1em;
    height: 1em;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Das Icon im Auth-Kopf tritt an die Stelle der Marke */
.auth-logo .icon {
    width: 100%;
    height: 100%;
}

/* --- Empty State --- */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.empty-state__icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state h3 {
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.empty-state p {
    margin-bottom: 20px;
}

/* Leere Seiten (src/components/Leer.js): Zeichen im goldenen Kreis, eine
   Zeile, ein Satz, ein Knopf. */
.empty-state.leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 380px;
    margin: 0 auto;
    padding: 56px 24px;
}

.leer__zeichen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 10px;
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, rgba(201, 168, 76, 0.16), rgba(201, 168, 76, 0.04));
    color: var(--gold);
}

.leer__zeichen .icon {
    width: 24px;
    height: 24px;
}

.empty-state.leer .leer__titel {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--text-primary);
}

.empty-state.leer .leer__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.leer__knopf {
    margin-top: 14px;
}

/* --- Section --- */
.section {
    margin-bottom: 40px;
}

.section__title {
    font-size: 22px;
    margin-bottom: 16px;
    color: var(--text-primary);
}

/* --- Text utilities --- */
.text-muted {
    color: var(--text-muted);
}

/* --- Animations --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
    opacity: 0;
}

/* Rückkehr zu einer Liste: sofort da, ohne Einblenden. Siehe route() in
   main.js. Gestaffelt eingeblendet wurde früher unbegrenzt – bei 106 Werken
   startete die letzte Karte nach 3,2 Sekunden, und wer weit unten zurückkam,
   sah dort gemessen fast zwei Sekunden lang nichts. */
.main-content--sofort .fade-in {
    animation: none;
    opacity: 1;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(8px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }
}

.shake {
    animation: shake 0.4s ease;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-elevated);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    :root {
        --nav-width: 0px;
    }

    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        z-index: 100;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .nav-brand {
        border-bottom: none;
        padding: 8px;
    }

    /* Das Menü gleitet von oben herein und blendet auf, die Punkte folgen
       einer nach dem anderen. Geschlossen ist es unsichtbar und nicht
       erreichbar (visibility), nicht bloß durchsichtig. */
    .nav-links {
        display: flex;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-secondary);
        padding: 16px;
        flex-direction: column;
        overflow-y: auto;
        z-index: 100;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-12px);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.26s;
    }

    .nav-links--open {
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
    }

    .nav-links .nav-link {
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 0.18s ease, transform 0.22s ease;
    }

    .nav-links--open .nav-link {
        opacity: 1;
        transform: none;
    }

    .nav-links--open .nav-link:nth-child(2) { transition-delay: 0.02s; }
    .nav-links--open .nav-link:nth-child(3) { transition-delay: 0.04s; }
    .nav-links--open .nav-link:nth-child(4) { transition-delay: 0.06s; }
    .nav-links--open .nav-link:nth-child(5) { transition-delay: 0.08s; }
    .nav-links--open .nav-link:nth-child(6) { transition-delay: 0.10s; }
    .nav-links--open .nav-link:nth-child(7) { transition-delay: 0.12s; }
    .nav-links--open .nav-link:nth-child(8) { transition-delay: 0.14s; }
    .nav-links--open .nav-link:nth-child(9) { transition-delay: 0.16s; }
    .nav-links--open .nav-link:nth-child(n+10) { transition-delay: 0.18s; }

    .nav-mobile-toggle {
        display: flex;
    }

    .main-content {
        margin-left: 0;
        padding-top: 64px;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .page {
        padding: 20px 16px 80px;
    }

    .hero {
        padding: 32px 24px;
    }

    .hero__title {
        font-size: 28px;
    }

    .hero__stats {
        gap: 20px;
    }

    .detail-hero {
        padding: 32px 20px 24px;
        border-radius: 14px;
    }

    .detail-hero__title {
        font-size: 26px;
    }

    .detail-hero__meta {
        font-size: 13px;
        gap: 10px;
    }

    .profile-hero {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }

    .profile-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .profile-favorites {
        flex-direction: column;
    }

    .card-grid,
    .card-grid--houses,
    .card-grid--operas {
        grid-template-columns: 1fr;
    }

    .community-grid,
    .lists-grid {
        grid-template-columns: 1fr;
    }

    .user-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .user-card__actions {
        flex-direction: row;
    }

    .filter-row {
        flex-direction: column;
    }

    .log-form {
        padding: 20px;
    }

    .diary-entry {
        flex-wrap: wrap;
        gap: 12px 10px;
        padding: 14px;
        width: 100%;
        box-sizing: border-box;
    }

    .diary-entry__date { order: 1; }
    .diary-entry__color { order: 2; }
    
    .diary-entry__info {
        order: 3;
        flex: 1 1 0;
        min-width: 0;
    }

    /* Force line break after info */
    .diary-entry::before {
        content: "";
        flex-basis: 100%;
        order: 4;
    }

    .diary-entry__rating {
        order: 5;
        flex-shrink: 0;
        margin-left: 64px; /* Align with info (40 + 10 + 4 + 10) */
    }

    .diary-entry__review-icon {
        order: 5;
        margin-left: 8px;
    }

    .diary-entry__actions {
        order: 6;
        display: flex;
        gap: 8px;
        flex-shrink: 0;
        margin-left: auto; /* Push to the right */
    }

    .diary-entry__delete {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .hero__title {
        font-size: 24px;
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__stats {
        flex-direction: column;
        gap: 12px;
    }

    .hero__stat {
        flex-direction: row;
        gap: 8px;
        align-items: baseline;
    }
}

/* ═══════════════════════════════════════════════════════════ */
/* AUTH PAGE                                                   */
/* ═══════════════════════════════════════════════════════════ */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 20px;
}

.auth-container {
    width: 100%;
    max-width: 420px;
    background: var(--card-bg);
    border-radius: 20px;
    padding: 40px 32px;
    border: 1px solid var(--border);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo {
    display: block;
    width: 78px;
    height: 68px;
    margin: 0 auto 12px;
    color: var(--gold);
}

.auth-logo svg {
    width: 100%;
    height: 100%;
    display: block;
}

.auth-header h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--text);
    margin: 0 0 4px;
}

.auth-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.auth-tabs {
    display: flex;
    margin-bottom: 24px;
    background: var(--bg);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}

.auth-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-tab--active {
    background: var(--accent);
    color: var(--bg);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Den Abstand gibt hier gap; der Außenabstand der Gruppe käme sonst dazu. */
.auth-form .form-group {
    margin-bottom: 0;
}

.auth-error {
    padding: 10px 14px;
    background: rgba(220, 53, 69, 0.15);
    border-radius: 10px;
    color: #ff6b6b;
    font-size: 0.85rem;
    text-align: center;
}

.auth-notice {
    padding: 16px;
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 12px;
    text-align: center;
    color: var(--accent);
    font-size: 0.9rem;
}

.auth-notice code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.auth-forgot-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.2s;
    text-align: center;
}

.auth-forgot-link:hover {
    color: var(--accent);
}

.auth-reset-info {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.5;
    margin: 0;
}

.auth-success {
    padding: 10px 14px;
    background: rgba(76, 175, 80, 0.15);
    border-radius: 10px;
    color: #66bb6a;
    font-size: 0.85rem;
    text-align: center;
}

/* Google Sign-In Button */
.btn--google {
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn--google:hover {
    background: #f7f8f8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
    color: #3c4043;
}

.btn--google svg {
    flex-shrink: 0;
}

/* Auth Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-divider span {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn--full {
    width: 100%;
}

.btn--lg {
    padding: 12px 24px;
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════ */
/* PROFILE SETUP (after Google Sign-Up)                        */
/* ═══════════════════════════════════════════════════════════ */

.profile-setup-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    margin-left: 0;
    max-width: 100%;
}

.profile-setup-container {
    animation: profileSetupFadeIn 0.6s ease-out;
}

@keyframes profileSetupFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-hint {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 6px;
    font-style: italic;
}

/* Das hidden-Attribut braucht eine eigene Regel: die Browsereinstellung
   [hidden] { display: none } verliert an Spezifität gegen .form-hint, das
   Feld bliebe sonst trotz hidden sichtbar. */
.form-hint[hidden] {
    display: none;
}

/* Vorschläge aus dem Spielplan im Log-Formular: ein Satz, dahinter Knöpfe
   zum Übernehmen. Gleicher Grund wie oben für die eigene hidden-Regel. */
.form-vorschlag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 8px;
}

.form-vorschlag[hidden] {
    display: none;
}

.form-vorschlag__text {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.setup-btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.setup-btn-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spinBtn 0.6s linear infinite;
}

@keyframes spinBtn {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════ */
/* INVITE SYSTEM                                               */
/* ═══════════════════════════════════════════════════════════ */

.invite-page {
    max-width: 600px;
    margin: 0 auto;
}

.invite-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid var(--border);
    text-align: center;
    margin-bottom: 24px;
}

.invite-card__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    color: var(--gold);
}

.invite-card__icon .icon {
    width: 100%;
    height: 100%;
}

/* Großes Statuszeichen auf der Einladungs-Annahmeseite */
.status-glyph {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 4px;
}

.status-glyph .icon {
    width: 100%;
    height: 100%;
}

.status-glyph--ok {
    color: #2ecc71;
}

.status-glyph--error {
    color: #ff6b6b;
}

.invite-card h2 {
    color: var(--text);
    margin: 0 0 8px;
    font-family: var(--font-display);
}

.invite-link-box {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    align-items: stretch;
}

.invite-link-box .btn {
    flex-shrink: 0;
}

.invite-link-input {
    flex: 1;
    /* ohne min-width: 0 weigert sich ein Eingabefeld, unter seine
       Inhaltsbreite zu schrumpfen, und verdrängt den Knopf */
    min-width: 0;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.85rem;
    font-family: monospace;
}

.invite-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 12px;
}

.invite-info {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border);
}

.invite-info h3 {
    color: var(--text);
    margin: 0 0 16px;
    font-family: var(--font-display);
}

.invite-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.invite-step {
    display: flex;
    align-items: center;
    gap: 16px;
}

.invite-step__number {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.invite-step p {
    color: var(--text);
    margin: 0;
    font-size: 0.95rem;
}

.invite-inline {
    max-width: 500px;
    margin: 0 auto;
}

.invite-success,
.invite-error {
    text-align: center;
    padding: 20px 0;
}

.invite-success h2,
.invite-error h2 {
    margin: 12px 0 8px;
    font-family: var(--font-display);
    color: var(--text);
}

/* ═══════════════════════════════════════════════════════════ */
/* FEED CARDS                                                  */
/* ═══════════════════════════════════════════════════════════ */

.feed-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--border);
    margin-bottom: 12px;
    transition: all 0.2s;
}

.feed-card:hover {
    border-color: var(--accent-dim);
    transform: translateY(-1px);
}

.feed-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.feed-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 0.8rem;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.feed-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feed-card__meta strong {
    color: var(--text);
    font-size: 0.95rem;
}

.feed-card__meta span {
    font-size: 0.8rem;
}

.feed-card__body h3 {
    color: var(--text);
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.feed-card__rating {
    color: var(--accent);
    font-size: 0.95rem;
    margin: 8px 0;
    letter-spacing: 2px;
}

.feed-card__review {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 8px 0 0;
    font-style: italic;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════ */
/* LOADING & COMMUNITY ACTIONS                                 */
/* ═══════════════════════════════════════════════════════════ */

.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.community-actions {
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.section-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--text);
    margin: 24px 0 16px;
}

/* ═══════════════════════════════════════════════════════════ */
/* BTN VARIANTS                                                */
/* ═══════════════════════════════════════════════════════════ */

.btn--accent {
    background: var(--accent);
    /* Helle Schrift: der Hintergrund ist dunkelrot. Vorher stand hier
       var(--bg) – die Variable war nicht definiert, dadurch erbte der Knopf
       zufaellig die richtige Farbe. */
    color: #fff;
    font-weight: 600;
}

.btn--accent:hover {
    /* Heller beim Hover, wie .btn--primary */
    background: var(--accent-light);
    color: #fff;
}

.btn--ghost {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 6px 12px;
}

.btn--ghost:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

/* ── Ratings Histogram (Letterboxd-style) ──────────────── */

.ratings-histogram {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 20px 0;
}

.ratings-histogram__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.ratings-histogram__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ratings-histogram__avg {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ratings-histogram__avg-stars {
    font-size: 0.95rem;
    letter-spacing: 1px;
}

.ratings-histogram__avg-number {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
}

.ratings-histogram__count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ratings-histogram__bars {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: var(--histogram-height, 80px);
    padding-bottom: 24px;
    position: relative;
}

.ratings-histogram__bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    position: relative;
    cursor: default;
}

.ratings-histogram__bar {
    width: 100%;
    min-height: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px 2px 0 0;
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease;
    position: relative;
}

.ratings-histogram__bar--filled {
    opacity: 0.85;
}

.ratings-histogram__bar--filled:hover {
    opacity: 1;
    filter: brightness(1.15);
}

.ratings-histogram__label {
    position: absolute;
    bottom: -22px;
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: -1px;
}

.ratings-histogram__empty {
    text-align: center;
    color: var(--text-muted);
    padding: 16px;
    font-style: italic;
}

/* Tooltip on hover */
.ratings-histogram__bar-wrapper:hover::after {
    content: attr(title);
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-tertiary);
    color: var(--text);
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    border: 1px solid var(--border);
}

/* Animate bars in */
@keyframes histogramGrow {
    from {
        height: 2px;
    }
}

.ratings-histogram__bar--filled {
    animation: histogramGrow 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Profile page integration */
.profile-histogram {
    margin: 0 0 24px;
}

/* Opera detail page integration */
.detail-histogram {
    margin: 8px 0 16px;
}

.detail-histogram .ratings-histogram {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 480px) {
    .ratings-histogram {
        padding: 14px 16px;
    }

    .ratings-histogram__bars {
        gap: 2px;
        height: 60px;
    }

    .ratings-histogram__label {
        font-size: 0.55rem;
    }

    .ratings-histogram__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ============================================
   iOS PWA – Safe Areas & Native Feel
   ============================================ */

/* Prevent overscroll bounce */
html,
body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* PWA Standalone mode adjustments */
@media all and (display-mode: standalone) {
    .sidebar {
        padding-top: calc(16px + env(safe-area-inset-top));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        padding-left: env(safe-area-inset-left);
    }

    .main-content {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

/* Mobile PWA: fixed nav bar needs safe area padding */
@media (max-width: 768px) and (display-mode: standalone) {
    .main-nav {
        padding-top: calc(8px + env(safe-area-inset-top));
    }

    .nav-mobile-toggle {
        top: calc(16px + env(safe-area-inset-top));
    }

    .nav-links {
        top: calc(60px + env(safe-area-inset-top));
    }

    .main-content {
        padding-top: calc(64px + env(safe-area-inset-top));
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

/* Disable text selection on UI elements for app-like feel */
@media (display-mode: standalone) {

    .btn,
    .tab,
    .chip,
    .nav-link,
    .sidebar,
    .auth-tab {
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* Smoother scrolling on iOS */
    .main-content,
    .page {
        -webkit-overflow-scrolling: touch;
    }
}

/* ═══════════════════════════════════════════════════════════ */
/* WISHLIST                                                    */
/* ═══════════════════════════════════════════════════════════ */

.wishlist-count {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 16px;
}

.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.wishlist-card {
    background: var(--card-bg);
    border-radius: 14px;
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all 0.3s ease;
}

.wishlist-card:hover {
    border-color: var(--accent-dim);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.wishlist-card__image {
    height: 140px;
    position: relative;
    background-color: var(--bg-elevated);
}

.wishlist-card__remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0;
}

.wishlist-card:hover .wishlist-card__remove {
    opacity: 1;
}

.wishlist-card__remove:hover {
    background: rgba(220, 53, 69, 0.7);
    color: white;
    border-color: rgba(220, 53, 69, 0.5);
}

.wishlist-card__body {
    padding: 16px;
}

.wishlist-card__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text);
    margin: 0 0 6px;
}

.wishlist-card__composer {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 8px;
}

.wishlist-card__meta {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.wishlist-card__actions {
    display: flex;
    gap: 8px;
}

.wishlist-card__actions .btn--sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* Detail page actions row */
.detail-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Wishlist active button */
/* Gold, wie der Stern. Vorher stand hier die Akzentfarbe – dunkelrote
   Schrift auf dunklem Grund, kaum zu lesen. */
.btn--wishlist-active {
    background: rgba(201, 168, 76, 0.12);
    color: var(--gold);
    border: 1px solid rgba(201, 168, 76, 0.45);
}

.btn--wishlist-active:hover {
    background: rgba(201, 168, 76, 0.2);
}

/* "Läuft demnächst" in der Karte der Wunschliste. */
.spielplan-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.spielplan-block__titel {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 6px;
}

.spielplan-block__leer {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

/* Eine Zeile: das Haus als Link, daneben der Kalender */
.spielplan-eintrag {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-bottom: 1px dashed var(--border);
}

.spielplan-eintrag:last-child {
    border-bottom: none;
}

.spielplan-zeile {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 0;
    text-decoration: none;
    color: var(--text);
}

.spielplan-zeile__kalender {
    flex: none;
    margin-top: 2px;
    padding: 8px;
    line-height: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
}

.spielplan-zeile__kalender:hover,
.spielplan-zeile__kalender:focus-visible {
    color: var(--gold);
    border-color: var(--border);
}

.spielplan-zeile__kalender svg {
    width: 18px;
    height: 18px;
}

/* Termine eines Werks an einem Haus: Zeile = Kalendereintrag, daneben
 * "Vormerken" (geplante Besuche). */
.kalender-wahl__zeile {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.kalender-wahl__zeile .kalender-wahl__tag {
    flex: 1;
    min-width: 0;
    /* Wird es eng, rutscht die Uhrzeit als Ganzes in die nächste Zeile. */
    flex-wrap: wrap;
    row-gap: 2px;
    column-gap: 8px;
    padding: 10px;
}

.kalender-wahl__zeile .kalender-wahl__tag span {
    white-space: nowrap;
}

.kalender-wahl__zeile .kalender-wahl__zeit {
    font-size: 0.88em;
    align-self: center;
}

/* Reicht die Breite nicht für Datum und Uhrzeit nebeneinander (schmale
 * Handys), steht die Uhrzeit in allen Zeilen darunter – nicht nur in denen
 * mit breiterem Datum. */
.kalender-wahl__liste {
    container-type: inline-size;
}

@container (max-width: 312px) {
    .kalender-wahl__zeile .kalender-wahl__tag {
        flex-direction: column;
    }
    .kalender-wahl__zeile .kalender-wahl__zeit {
        align-self: flex-start;
    }
}

.kalender-wahl__vormerken {
    flex-shrink: 0;
    /* Gleich breit, ob vorgemerkt oder nicht – sonst stehen die Zeilen versetzt. */
    min-width: 8.2em;
    padding: 0 8px;
    white-space: nowrap;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.kalender-wahl__vormerken:hover,
.kalender-wahl__vormerken:focus-visible {
    border-color: var(--gold);
    color: var(--text-primary);
}

.kalender-wahl__vormerken--an {
    color: var(--gold);
    border-color: rgba(201, 168, 76, 0.45);
    background: rgba(201, 168, 76, 0.08);
}

/* Startseite: die Frage nach einem vorgemerkten Abend, der vorbei ist, und
 * knapp die kommenden. */
.plan-frage {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 12px;
    background: rgba(201, 168, 76, 0.05);
}

.plan-frage__text {
    margin: 0;
    font-size: 1rem;
}

.plan-frage__text strong {
    font-family: var(--font-display);
    font-weight: 600;
}

.plan-frage__ort {
    margin: 2px 0 10px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.plan-frage__knoepfe {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.demnaechst {
    margin: 0 0 20px;
}

/* Kopfzeile: Titel links, "2 / 5" und die Pfeile rechts. */
.demnaechst__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6px;
}

.demnaechst__titel {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0;
}

.demnaechst__blaettern {
    display: flex;
    align-items: center;
    gap: 2px;
}

.demnaechst__blaettern[hidden] {
    display: none;
}

.demnaechst__zahl {
    margin-right: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.demnaechst__pfeil {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}

.demnaechst__pfeil .icon {
    width: 16px;
    height: 16px;
}

.demnaechst__pfeil:hover:not(:disabled) {
    border-color: var(--gold-dark);
    color: var(--gold);
}

.demnaechst__pfeil:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Ein Abend je Breite; das Band scrollt seitwärts und rastet ein. */
.demnaechst__liste {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.demnaechst__liste::-webkit-scrollbar {
    display: none;
}

.demnaechst__zeile {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    gap: 8px;
}

.demnaechst__link {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 1px;
    padding: 9px 2px;
    color: var(--text);
    text-decoration: none;
}

.demnaechst__link:hover {
    color: var(--text);
}

.demnaechst__wann {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.demnaechst__was {
    font-size: 0.92rem;
}

.demnaechst__was strong {
    font-weight: 600;
}

.demnaechst__weg {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 6px 8px;
    cursor: pointer;
}

.demnaechst__weg:hover {
    color: var(--text-primary);
}

/* "In den Kalender": die Abende zur Wahl */
.kalender-wahl__was {
    margin: 0 0 12px;
    color: var(--text-muted);
}

.kalender-wahl__liste {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 12px;
}

.kalender-wahl__tag {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.kalender-wahl__tag:hover,
.kalender-wahl__tag:focus-visible {
    border-color: var(--gold);
}

.kalender-wahl__zeit {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.spielplan-zeile__haus {
    font-size: 0.86rem;
    font-weight: 600;
}

.spielplan-zeile__ort {
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 6px;
    font-size: 0.78rem;
}

.spielplan-zeile__termine {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.spielplan-zeile__mehr {
    color: var(--gold);
}

@media (hover: hover) {
    .spielplan-zeile:hover .spielplan-zeile__haus {
        color: var(--gold);
    }
}

.spielplan-block__weitere summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--gold);
    padding: 6px 0 2px;
}

/* "Aktuelle Termine" auf der Werkseite: aufgeklappt unter den Knöpfen */
.werk-termine {
    max-width: 640px;
}

.werk-termine .spielplan-quelle {
    margin-top: 10px;
}

.btn--outline[aria-expanded="true"] {
    border-color: var(--gold);
    color: var(--gold);
}

.spielplan-quelle {
    margin: 20px 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

@media (max-width: 768px) {
    .wishlist-grid {
        grid-template-columns: 1fr;
    }

    .wishlist-card__remove {
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════ */
/* LIST DETAIL                                                 */
/* ═══════════════════════════════════════════════════════════ */

.list-detail-count {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 4px 0 0;
}

.list-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.list-detail-card {
    background: var(--card-bg);
    border-radius: 14px;
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all 0.3s ease;
}

.list-detail-card:hover {
    border-color: var(--accent-dim);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.list-detail-card__image {
    height: 140px;
    position: relative;
    background-color: var(--bg-elevated);
}

.list-detail-card__remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0;
}

.list-detail-card:hover .list-detail-card__remove {
    opacity: 1;
}

.list-detail-card__remove:hover {
    background: rgba(220, 53, 69, 0.7);
    color: white;
    border-color: rgba(220, 53, 69, 0.5);
}

.list-detail-card__body {
    padding: 16px;
}

.list-detail-card__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text);
    margin: 0 0 6px;
}

.list-detail-card__subtitle {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 8px;
}

.list-detail-card__meta {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.list-detail-card__actions {
    display: flex;
    gap: 8px;
}

.list-detail-card__actions .btn--sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.back-link {
    display: inline-block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 12px;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--accent);
}

/* List cards on the Lists page – hover hint */
.list-card {
    cursor: pointer;
}

.list-card:hover {
    border-color: var(--accent-dim);
}

@media (max-width: 768px) {
    .list-detail-grid {
        grid-template-columns: 1fr;
    }

    .list-detail-card__remove {
        opacity: 1;
    }
}

/* ── Friend Requests ─────────────────────────────────────── */

.friend-requests-section {
  margin-bottom: 2rem;
  animation: fadeIn 0.4s ease;
}

.friend-requests-section__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #c9a84c;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.friend-requests-section__badge {
  background: #c9a84c;
  color: #14181c;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  min-width: 1.2rem;
  text-align: center;
}

.friend-request-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
  transition: all 0.3s ease;
}

.friend-request-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(201, 168, 76, 0.3);
}

.friend-request-card--accepted {
  border-color: rgba(46, 204, 113, 0.4);
  background: rgba(46, 204, 113, 0.08);
}

.friend-request-card--declined {
  opacity: 0.5;
  transform: scale(0.98);
}

.friend-request-card--removing {
  animation: slideOutRight 0.4s ease forwards;
}

@keyframes slideOutRight {
  to {
    opacity: 0;
    transform: translateX(30px);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
}

.friend-request-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.friend-request-card__info {
  flex: 1;
  min-width: 0;
}

.friend-request-card__name {
  font-weight: 600;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
}

.friend-request-card__name:hover {
  color: #c9a84c;
}

.friend-request-card__time {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.15rem;
}

.friend-request-card__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn--accept {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: #fff;
  border: none;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn--accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

.btn--decline {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn--decline:hover {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  border-color: rgba(231, 76, 60, 0.3);
}

.btn--pending {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.4);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: default;
}

.btn--friend {
  background: rgba(46, 204, 113, 0.12);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, 0.25);
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn--friend:hover {
  background: rgba(231, 76, 60, 0.12);
  color: #e74c3c;
  border-color: rgba(231, 76, 60, 0.25);
}

.btn--send-request {
  background: linear-gradient(135deg, #c9a84c, #a8893d);
  color: #14181c;
  border: none;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn--send-request:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 168, 76, 0.3);
}

.btn--send-request:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.notification-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: #e74c3c;
  border-radius: 50%;
  border: 2px solid #14181c;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.nav-link {
  position: relative;
}

.privacy-select {
  width: 100%;
  padding: 0.65rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.privacy-select:focus {
  border-color: #c9a84c;
  outline: none;
}

.privacy-select option {
  background: #1a1a2e;
  color: #fff;
}

.friend-request-success {
  text-align: center;
  padding: 1rem;
  color: #2ecc71;
  font-weight: 600;
  animation: fadeIn 0.4s ease;
}

.privacy-hint {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 0.3rem;
  font-style: italic;
}

@media (max-width: 768px) {
  .friend-request-card {
    flex-wrap: wrap;
  }
  .friend-request-card__actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 0.5rem;
  }
}

/* ── Smooth Transitions ─────────────────────────────────── */

.page--leaving {
  animation: pageFadeOut 0.4s ease forwards;
}

@keyframes pageFadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.app--entering {
  animation: appFadeIn 0.5s ease forwards;
}

@keyframes appFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Button Loading & Success States ──────────────────── */

.btn__loading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.spinner--sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn--success {
  background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
  color: #fff !important;
  transform: scale(1.02);
  transition: all 0.3s ease;
}

.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ── Auth Error Slide-In ──────────────────────────────── */

.auth-error {
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 100px;
  }
}

/* ── Mitwirkende ────────────────────────────────────────────────────
   Der aufklappbare Block im Log-Formular und die Anzeige in der Karte.
   Alle drei Angaben sind optional; leere erzeugen gar keine Zeile. */

.form-collapse {
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
}

.form-collapse__summary {
    cursor: pointer;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text);
    list-style: none;
    display: flex;
    align-items: center;
}

/* Der Pfeil wird selbst gezeichnet, damit er in allen Browsern gleich
   aussieht – Safari malt sonst ein eigenes Dreieck an anderer Stelle. */
.form-collapse__summary::-webkit-details-marker { display: none; }

.form-collapse__summary::after {
    content: '';
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.18s ease;
}

.form-collapse[open] .form-collapse__summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.form-collapse__optional {
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 6px;
}

.form-collapse__body {
    padding: 4px 14px 2px;
}

.form-collapse__body .form-group:last-child {
    margin-bottom: 14px;
}

.review-card__credits {
    margin: 10px 0 4px;
    padding: 10px 12px;
    border-left: 2px solid var(--border);
    display: grid;
    gap: 6px;
}

.credit {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 8px;
    font-size: 0.88rem;
    align-items: baseline;
}

.credit__label {
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Die Besetzung wird zeilenweise eingegeben – die Umbrüche bleiben stehen. */
.credit__value {
    white-space: pre-line;
}

/* Eingeklappte Besetzung in der Karte. Zu sieht man eine Zeile mit den ersten
 * Namen, auf die Zahl der Mitwirkenden und darunter die ganze Liste. Der Pfeil
 * ist derselbe wie beim Formularabschnitt "Mitwirkende". */
.besetzung {
    min-width: 0;
}

.besetzung__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.besetzung__summary::-webkit-details-marker { display: none; }

.besetzung__summary::after {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.18s ease;
}

.besetzung[open] > .besetzung__summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

/* Umbrechen statt abschneiden: auf dem Handy fiele bei einer Auslassung
 * sonst genau die Zahl der übrigen Mitwirkenden weg – "und 4 w…". */
.besetzung__kurz {
    min-width: 0;
    overflow-wrap: anywhere;
}

.besetzung__offen {
    color: var(--text-muted);
}

.besetzung:not([open]) .besetzung__offen,
.besetzung[open] .besetzung__kurz {
    display: none;
}

.besetzung[open] > .credit__value {
    display: block;
    margin-top: 4px;
}

@media (hover: hover) {
    .besetzung__summary:hover .besetzung__kurz,
    .besetzung__summary:hover .besetzung__offen {
        color: var(--gold);
    }
}

@media (max-width: 420px) {
    .credit {
        grid-template-columns: 1fr;
        gap: 1px;
    }
}

/* ── Saisonrückblick ────────────────────────────────────────────────── */

.season-banner {
    display: block;
    margin: 0 0 28px;
    padding: 20px 22px;
    border-radius: 14px;
    border: 1px solid var(--gold-dark);
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.14), rgba(139, 26, 43, 0.22));
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.season-banner:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
}

.season-banner__kicker {
    display: block;
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}

.season-banner__title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--text);
    margin: 4px 0 6px;
}

.season-banner__note {
    display: block;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

/* Heute vor einem Jahr: eine Erinnerung, keine Aufgabe – ruhiger als der
   Saisonhinweis, mit goldener Linie links. Ein Foto steht rechts. */
.jahrestag {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold-dark);
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(201, 168, 76, 0.08), transparent 60%), var(--card-bg);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease;
}

.jahrestag:hover {
    border-color: var(--gold-dark);
    transform: translateY(-1px);
}

.jahrestag__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.jahrestag__kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}

.jahrestag__werk {
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1.2;
}

.jahrestag__ort {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.jahrestag .star-rating {
    margin-top: 2px;
}

.jahrestag__review {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    font-size: 0.88rem;
    color: var(--text-secondary);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.jahrestag__foto {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.season__hero {
    text-align: center;
    padding: 40px 0 28px;
}

.season__kicker {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
}

.season__title {
    font-family: var(--font-display);
    /* Wächst mit der Breite, bleibt aber auf dem Handy im Rahmen. */
    font-size: clamp(3rem, 18vw, 6rem);
    line-height: 1;
    margin: 10px 0 12px;
    background: linear-gradient(135deg, var(--gold-light), var(--accent-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.season__lead {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.season__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    /* Füllt die Lücken, die eine breite Kachel in der Reihe davor hinterlässt. */
    grid-auto-flow: dense;
}

.season-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Ohne das bricht ein langer Werktitel das Raster auf. */
    min-width: 0;
}

.season-card--gross {
    grid-column: 1 / -1;
}

.season-card__label {
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.season-card__value {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.15;
    color: var(--text);
    /* Silbentrennung statt Bruch an beliebiger Stelle: "Semperope / r" */
    hyphens: auto;
    overflow-wrap: break-word;
}

.season-card--gross .season-card__value {
    font-size: 2.4rem;
}

/* Die Kennzahl der Saison – die einzige Zahl, die groß sein darf. */
.season-card__value--zahl,
.season-card--gross .season-card__value--zahl {
    font-size: 4rem;
    line-height: 1;
}

/* Aufzählungen: mehrere Namen hintereinander, in Fließtextgröße. */
.season-card__value--liste,
.season-card--gross .season-card__value--liste {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.4;
}

.season-card__note {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.season-card--laedt .season-card__value {
    color: var(--text-muted);
}

/* Die Symbole sitzen in der kleinen Kopfzeile und sollen sie begleiten,
   nicht überstimmen. */
.season-card__label .icon {
    margin-right: 0.45em;
    opacity: 0.55;
    vertical-align: -0.1em;
}

.season-card__stars {
    margin-top: 6px;
}

.season__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 12px;
}

.season__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
}

.season__foot {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 24px;
}

@media (min-width: 720px) {
    .season__cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .season-card--gross {
        grid-column: span 2;
    }
}

/* Der Knopf im Kopf des Rückblicks. */
.season__story {
    margin-top: 18px;
}

/* ── Story (src/components/Story.js) ────────────────────────────────── */
/* Bildschirmfüllend am Handy; am Rechner ein Hochformat in der Mitte.
   --story-dauer: so lange steht eine Folie, bis die nächste kommt. */

html.story-offen,
html.story-offen body {
    overflow: hidden;
}

.story {
    --story-dauer: 6s;
    padding: 0;
    overflow: hidden;
    background: #08090b;
}

.story .modal__overlay {
    background: #08090b;
}

.story__buehne {
    position: relative;
    z-index: 1;
    width: min(100vw, 460px);
    height: 100vh;
    height: 100dvh;
    margin: 0;
    overflow: hidden;
    outline: none;
    touch-action: none;
    overscroll-behavior: contain;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

@media (min-width: 600px) and (min-height: 700px) {
    .story__buehne {
        height: min(92vh, 860px);
        border-radius: 18px;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    }
}

.story__balken {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 12px;
    right: 12px;
    z-index: 4;
    display: flex;
    gap: 4px;
    pointer-events: none;
}

.story__teil {
    flex: 1;
    height: 3px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
}

.story__teil i {
    display: block;
    height: 100%;
    background: #fff;
    /* Gefüllt wird über scaleX, nicht über die Breite: das rechnet die
       Grafikkarte, ohne je Bild das Layout neu zu machen. Sonst ruckelt am
       iPhone die hereinschwebende Schrift mit. */
    transform: scaleX(0);
    transform-origin: left;
}

.story__teil--voll i {
    transform: none;
}

.story__teil--jetzt i {
    animation: storyLauf var(--story-dauer) linear forwards;
}

.story--angehalten .story__teil--jetzt i {
    animation-play-state: paused;
}

@keyframes storyLauf {
    from { transform: scaleX(0); }
    to { transform: none; }
}

.story__zu {
    position: absolute;
    top: calc(24px + env(safe-area-inset-top, 0px));
    right: 10px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

/* Musik an/aus, links neben ✕. */
.story__ton {
    position: absolute;
    top: calc(24px + env(safe-area-inset-top, 0px));
    right: 54px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.story__ton .icon {
    width: 20px;
    height: 20px;
}

.story__ton[aria-pressed="false"] {
    opacity: 0.6;
}

.story__musik {
    display: none;
}

/* Tippflächen: links ein Drittel zurück, rechts der Rest weiter. */
.story__zone {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.story__zone--zurueck { left: 0; width: 33%; }
.story__zone--weiter { right: 0; width: 67%; }

.story__zone:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Die Folie liegt über den Tippflächen, lässt Berührungen aber durch –
   außer an ihren eigenen Knöpfen. */
.story__folie {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 90px 32px 70px;
    color: #f0e6d2;
    pointer-events: none;
}

.story__folie a,
.story__folie button {
    pointer-events: auto;
}

/* Bühnenlicht von oben, darunter je Folie ein anderer Samtton. */
.story__folie--0 { background: radial-gradient(ellipse at 50% -10%, rgba(255, 225, 170, 0.22), transparent 60%), linear-gradient(165deg, #5c111c, #14181c 75%); }
.story__folie--1 { background: radial-gradient(ellipse at 50% -10%, rgba(255, 225, 170, 0.2), transparent 60%), linear-gradient(165deg, #5e4a1c, #14181c 75%); }
.story__folie--2 { background: radial-gradient(ellipse at 50% -10%, rgba(255, 225, 170, 0.18), transparent 60%), linear-gradient(165deg, #1d3350, #14181c 75%); }
.story__folie--3 { background: radial-gradient(ellipse at 50% -10%, rgba(255, 225, 170, 0.18), transparent 60%), linear-gradient(165deg, #1b4038, #14181c 75%); }
.story__folie--4 { background: radial-gradient(ellipse at 50% -10%, rgba(255, 225, 170, 0.2), transparent 60%), linear-gradient(165deg, #3b2150, #14181c 75%); }

/* Die Zeilen schweben nacheinander herein, langsam und weich, ein Stück
   von unten (Jonas, 3.10.2026: "etwas langsamer reinflattern", dann
   "etwas smoother"). Die Bewegung beginnt sanft statt mit einem Satz und
   läuft lang aus; das Einblenden ist etwas kürzer, damit nichts
   durchsichtig nachschleicht. Alles steht nach knapp drei Sekunden, die
   Folie sechs. Keine Unschärfe (filter) und kein will-change: mit dem
   Verlaufstext des Titels (background-clip: text) zeichnet Safari beides
   nicht zuverlässig. */
.story__folie > * {
    animation:
        storyEinblenden 1.2s cubic-bezier(0.4, 0, 0.2, 1) backwards,
        storySchweben 1.6s cubic-bezier(0.33, 0, 0.15, 1) backwards;
    animation-delay: 0.15s;
}

.story__folie > :nth-child(2) { animation-delay: 0.5s; }
.story__folie > :nth-child(3) { animation-delay: 0.85s; }
.story__folie > :nth-child(n + 4) { animation-delay: 1.2s; }

@keyframes storyEinblenden {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes storySchweben {
    from { transform: translate3d(0, 18px, 0); }
    to { transform: none; }
}

.story__kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
}

.story__kicker .icon {
    width: 16px;
    height: 16px;
}

.story__titel {
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 19vw, 5.5rem);
    line-height: 1;
    background: linear-gradient(135deg, var(--gold-light), var(--accent-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.story__titel--schluss {
    font-size: clamp(2.4rem, 12vw, 3.6rem);
    line-height: 1.1;
}

.story__wert {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 10vw, 3.4rem);
    line-height: 1.12;
    hyphens: auto;
    overflow-wrap: break-word;
}

.story__wert--zahl {
    font-size: clamp(6rem, 36vw, 10rem);
    line-height: 1;
}

.story__wert--liste {
    font-family: var(--font-body);
    font-size: 1.35rem;
    line-height: 1.45;
}

.story__notiz {
    font-size: 1.02rem;
    line-height: 1.45;
    color: rgba(240, 230, 210, 0.72);
}

.story__folie .star-rating--sm .star {
    font-size: 30px;
}

.story__folie .star-rating__number {
    display: none;
}

.story__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

/* Bild im Hintergrund einer Folie (Stammhaus, Komponist): rund, nicht zu
   groß, blass, über dem Text. z-index -1 legt es hinter den Text, aber vor
   den Hintergrund der Folie – die Folie bildet einen eigenen Stapel. */
.story__folie > .story__bild {
    position: absolute;
    top: 13%;
    left: 0;
    right: 0;
    z-index: -1;
    width: clamp(150px, 44vw, 200px);
    height: clamp(150px, 44vw, 200px);
    margin: 0 auto;
    border: 1px solid rgba(201, 168, 76, 0.55);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(201, 168, 76, 0.08), 0 18px 50px rgba(0, 0, 0, 0.45);
    opacity: 0.42;
    filter: saturate(0.75);
    animation: storyBildAuf 2.4s cubic-bezier(0.33, 0, 0.15, 1) 0.1s backwards;
}

@keyframes storyBildAuf {
    from { opacity: 0; transform: scale(0.9); }
}

/* Der Weg zwischen den Häusern: Grenzen ganz zart, die Linie golden; sie
   zeichnet sich, dann erscheinen die Häuser. */
.story__folie > .story__grafik {
    position: absolute;
    top: 9%;
    left: 20px;
    right: 20px;
    z-index: -1;
    height: 36%;
    animation: storyEinblenden 1.2s ease backwards;
}

.reiseweg {
    display: block;
    width: 100%;
    height: 100%;
}

.reiseweg__land {
    fill: rgba(255, 255, 255, 0.035);
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 0.8;
    stroke-linejoin: round;
}

.reiseweg__linie {
    fill: none;
    stroke: var(--gold);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.55));
    animation: storyWeg 2.6s cubic-bezier(0.45, 0, 0.2, 1) 0.4s backwards;
}

@keyframes storyWeg {
    from { stroke-dashoffset: 1; }
}

.reiseweg__halt {
    fill: #f0e6d2;
    stroke: var(--gold);
    stroke-width: 1.5;
    animation: storyEinblenden 0.8s ease 2.6s backwards;
}

/* "Dein Schnitt": fünf Sterne füllen sich bis zum Schnitt, darunter die
   Verteilung der Bewertungen in halben Sternen. Erst die Sterne, einer
   nach dem anderen, dann wachsen die Balken von links nach rechts.
   --anteil, --hoehe und --nr setzt SeasonReview.js je Element im style. */
.story__unten {
    margin-top: 14px;
}

.story-sterne {
    display: flex;
    gap: 8px;
    font-size: clamp(34px, 11vw, 46px);
    line-height: 1;
    /* Der Schein liegt auf der ganzen Reihe: am einzelnen Stern schnitte
       clip-path ihn an dessen Rand ab. */
    filter: drop-shadow(0 0 10px rgba(201, 168, 76, 0.35));
}

.story-sterne__stern {
    position: relative;
    color: rgba(255, 255, 255, 0.16);
}

.story-sterne__stern::before {
    content: '★';
}

.story-sterne__gold {
    position: absolute;
    inset: 0;
    color: var(--gold);
    clip-path: inset(0 calc((1 - var(--anteil, 0)) * 100%) 0 0);
    animation: storySternFuellen 0.7s cubic-bezier(0.33, 0, 0.15, 1) calc(1.5s + var(--nr, 0) * 0.22s) backwards;
}

@keyframes storySternFuellen {
    from { clip-path: inset(0 100% 0 0); }
}

.story-verteilung {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 5px;
    align-items: end;
    margin-top: 34px;
}

/* Eine Spalte: Zahl über Säule. Die höchste Säule ist 90 px hoch. */
.story-verteilung__balken {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.story-verteilung__saeule {
    height: calc(var(--hoehe, 0) * 90px);
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, var(--gold-dark), var(--gold-light));
    /* Von unten aufgedeckt statt gestreckt. */
    animation: storyBalken 0.9s cubic-bezier(0.33, 0, 0.15, 1) calc(2.7s + var(--nr, 0) * 0.08s) backwards;
}

.story-verteilung__balken--leer .story-verteilung__saeule {
    height: 3px;
    background: rgba(255, 255, 255, 0.14);
}

.story-verteilung__balken i {
    padding-bottom: 4px;
    font-size: 0.75rem;
    font-style: normal;
    line-height: 1.2;
    text-align: center;
    color: rgba(240, 230, 210, 0.8);
    animation: storyEinblenden 0.5s ease calc(3.3s + var(--nr, 0) * 0.08s) backwards;
}

@keyframes storyBalken {
    from { clip-path: inset(100% 0 0 0); }
}

.story-verteilung__achse {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 5px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    color: rgba(240, 230, 210, 0.55);
    text-align: center;
}

/* "Dein dichtester Monat": der Monat als Raster, frei auf dem Grund wie
   die Säulen bei "Dein Schnitt" – Wochentage klein in Gold, darunter eine
   feine Linie, die Tage blass. Die Tage erscheinen als Welle von links
   oben, dann zieht sich um jeden Abend ein goldener Kreis mit Schein wie
   die Reiselinie, und seine Zahl leuchtet auf. --welle und --nr setzt
   SeasonReview.js je Tag. (Jonas, 4.10.2026: das Papierblatt "passt nicht
   ganz zum Rest".) */
.kalenderblatt {
    width: min(100%, 320px);
    margin-top: 10px;
}

.kalenderblatt__tage {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: 4px;
    font-size: 0.9rem;
    text-align: center;
}

.kalenderblatt__wt {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}

.kalenderblatt__tag {
    position: relative;
    line-height: 34px;
    color: rgba(240, 230, 210, 0.42);
    font-variant-numeric: tabular-nums;
    animation: storyEinblenden 0.5s ease calc(1.3s + var(--welle, 0) * 0.035s) backwards;
}

.kalenderblatt__tag--abend {
    font-weight: 600;
    color: #f0e6d2;
    animation:
        storyEinblenden 0.5s ease calc(1.3s + var(--welle, 0) * 0.035s) backwards,
        storyAufleuchten 0.5s ease calc(2.9s + var(--nr, 0) * 0.45s) backwards;
}

@keyframes storyAufleuchten {
    from { color: rgba(240, 230, 210, 0.42); font-weight: 400; }
}

.kalenderblatt__tag svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    overflow: visible;
    filter: drop-shadow(0 0 5px rgba(201, 168, 76, 0.6));
}

.kalenderblatt__tag path {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: storyKreis 0.8s cubic-bezier(0.45, 0, 0.2, 1) calc(2.7s + var(--nr, 0) * 0.45s) backwards;
}

@keyframes storyKreis {
    from { stroke-dashoffset: 1; }
}

/* "Dein Opernabend": je Wochentag eine Spalte, je Abend ein Punkt, der
   herabfällt und sich stapelt. Danach leuchtet die Spalte des Tages
   golden auf. --punkt, --puls und --fall setzt SeasonReview.js. */
.wochenpunkte {
    width: min(100%, 320px);
    margin-top: 12px;
}

.wochenpunkte__spalten {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    height: 112px;
}

.wochenpunkte__spalte {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 4px;
}

.wochenpunkte__spalte i {
    width: var(--punkt, 12px);
    height: var(--punkt, 12px);
    border-radius: 50%;
    background: rgba(240, 230, 210, 0.38);
    animation: storyPunktFall 0.7s cubic-bezier(0.3, 0, 0.4, 1.4) var(--fall, 0s) backwards;
}

@keyframes storyPunktFall {
    from { opacity: 0; transform: translateY(-90px); }
    60% { opacity: 1; }
}

.wochenpunkte__spalte--sieger i {
    background: var(--gold);
    box-shadow: 0 0 10px rgba(201, 168, 76, 0.55);
    animation:
        storyPunktFall 0.7s cubic-bezier(0.3, 0, 0.4, 1.4) var(--fall, 0s) backwards,
        storyPunktGold 0.6s ease var(--puls, 0s) backwards;
}

@keyframes storyPunktGold {
    from { background: rgba(240, 230, 210, 0.38); box-shadow: none; }
}

.wochenpunkte__achse {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    color: rgba(240, 230, 210, 0.45);
}

.wochenpunkte__sieger {
    font-weight: 600;
    color: var(--gold);
    animation: storyPunktGoldText 0.6s ease var(--puls, 0s) backwards;
}

@keyframes storyPunktGoldText {
    from { color: rgba(240, 230, 210, 0.45); font-weight: 400; }
}

/* Schlussfolie: Der Vorhang schließt sich wie beim Ladebildschirm, nur
   andersherum (Samt und Bogen wie .splash__curtain in index.html). Danach
   erscheinen Text und Knöpfe auf dem geschlossenen Vorhang. */
.story__vorhang {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.story__folie--schluss > :not(.story__vorhang) {
    position: relative;
    z-index: 1;
}

.story__folie--schluss > .story__vorhang {
    animation: none;
}

.story__vorhang-teil {
    position: absolute;
    top: -10%;
    width: 52%;
    height: 120%;
    background:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.055) 0px,
            rgba(0, 0, 0, 0.10) 9px,
            rgba(0, 0, 0, 0.26) 19px,
            rgba(0, 0, 0, 0.10) 29px,
            rgba(255, 255, 255, 0.055) 38px),
        repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.05) 2px,
            rgba(0, 0, 0, 0) 4px),
        linear-gradient(180deg,
            #3d0a15 0%, #6b1525 15%, #8b1a2b 30%,
            #7a1826 50%, #8b1a2b 65%, #6b1525 85%, #3d0a15 100%);
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.55);
}

.story__vorhang-teil--links {
    left: 0;
    border-right: 3px solid #4a0e1a;
    animation: storyVorhangLinks 1.8s cubic-bezier(0.45, 0, 0.15, 1) 0.2s backwards;
}

.story__vorhang-teil--rechts {
    right: 0;
    border-left: 3px solid #4a0e1a;
    animation: storyVorhangRechts 1.8s cubic-bezier(0.45, 0, 0.15, 1) 0.2s backwards;
}

@keyframes storyVorhangLinks {
    from { transform: translate3d(-105%, 0, 0); }
}

@keyframes storyVorhangRechts {
    from { transform: translate3d(105%, 0, 0); }
}

/* Der Bogen oben, mit goldener Kante. */
.story__vorhang-bogen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(0, 0, 0, 0.14) 11px,
            rgba(0, 0, 0, 0.24) 22px,
            rgba(255, 255, 255, 0.05) 34px),
        linear-gradient(180deg, #8b1a2b 0%, #6b1525 60%, #4a0e1a 100%);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
    border-bottom: 2px solid rgba(201, 168, 76, 0.4);
    animation: storyBogen 1.2s cubic-bezier(0.45, 0, 0.15, 1) backwards;
}

@keyframes storyBogen {
    from { transform: translate3d(0, -100%, 0); }
}

/* Licht von oben und von der Rampe, sobald der Vorhang zu ist; dazu eine
   leichte Abdunklung hinter dem Text. */
.story__vorhang-licht {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 45% at 50% 0%, rgba(255, 230, 170, 0.16), transparent 70%),
        radial-gradient(ellipse 80% 30% at 50% 100%, rgba(255, 210, 140, 0.14), transparent 75%),
        radial-gradient(ellipse 90% 40% at 30% 55%, rgba(0, 0, 0, 0.35), transparent 75%);
    animation: storyEinblenden 1.2s ease 1.6s backwards;
}

/* Text auf dem Samt: der Titel in reinem Gold statt Gold-Rot-Verlauf (das
   Rot ginge im Vorhang unter), alles mit Schatten. Der Teilen-Knopf wird
   golden – rot auf rotem Samt wäre er unsichtbar. */
.story__folie--schluss .story__titel {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #ecd28a;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

.story__folie--schluss .story__kicker,
.story__folie--schluss .story__notiz {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.story__folie--schluss .story__notiz {
    color: rgba(250, 238, 215, 0.88);
}

.story__folie--schluss .story__teilen {
    border-color: var(--gold);
    background: var(--gold);
    color: #2a1a05;
}

.story__folie--schluss .story__teilen:hover {
    background: var(--gold-light);
}

.story__folie--schluss .story__vorn {
    border-color: rgba(255, 240, 210, 0.5);
    background: rgba(20, 6, 10, 0.35);
    color: #fbefd9;
}

/* Nachweis der Musik, klein am unteren Rand des Vorhangs. */
.story__folie--schluss > .story__musiknachweis {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    font-size: 0.7rem;
    line-height: 1.4;
    color: rgba(250, 238, 215, 0.6);
    text-decoration: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
    animation-delay: 2.7s;
}

/* Der Text kommt erst, wenn der Vorhang zu ist. */
.story__folie--schluss > .story__kicker { animation-delay: 1.5s; }
.story__folie--schluss > .story__titel { animation-delay: 1.8s; }
.story__folie--schluss > .story__notiz { animation-delay: 2.1s; }
.story__folie--schluss > .story__knoepfe { animation-delay: 2.4s; }

@media (prefers-reduced-motion: reduce) {
    /* Nichts läuft von allein: der Balken zeigt nur, wo man ist. */
    .story__teil--jetzt i {
        transform: none;
        animation: none;
    }

    .story__folie > *,
    .story__vorhang > *,
    .reiseweg *,
    .story__unten * {
        animation: none;
    }
}

/* ── Karte der Opernhäuser ──────────────────────────────────────────── */

.housemap {
    /* Ein Hauch Licht in der Mitte, wie über einer Bühne. */
    background: radial-gradient(ellipse at 50% 45%, rgba(201, 168, 76, 0.06), transparent 70%), var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 14px 10px;
    margin-bottom: 24px;
}

.housemap__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.housemap__count {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--text);
}

.housemap__legend {
    font-size: 0.76rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.housemap__key {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.45;
    display: inline-block;
    margin-left: 8px;
}

.housemap__key--besucht {
    background: var(--gold);
    opacity: 1;
    margin-left: 0;
}

/* Deutschland ist höher als breit: über die volle Breite eines Handys wäre
   die Karte gut 600px hoch. Deshalb bestimmt die Höhe die Größe, nicht die
   Breite – die Karte steht dann schmal und mittig. */
.housemap__svg {
    display: block;
    margin: 0 auto;
    height: clamp(280px, 52vh, 460px);
    width: auto;
    max-width: 100%;
    /* Die Nachbarländer reichen über den Rand hinaus. Abgeschnitten und an
       den Kanten ausgeblendet, sonst stünde ein hartes Rechteck in der Karte. */
    overflow: hidden;
    -webkit-mask-image:
        linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
        linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
        linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
    mask-composite: intersect;
}

.housemap__land {
    fill: rgba(154, 170, 187, 0.035);
    stroke: rgba(154, 170, 187, 0.16);
    stroke-width: 0.8px;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    pointer-events: none;
}

.housemap__land--kern {
    fill: rgba(154, 170, 187, 0.09);
    stroke: rgba(154, 170, 187, 0.38);
}

.housemap__dot {
    fill: var(--text-muted);
    opacity: 0.4;
    transition: opacity 0.15s ease;
}

.housemap__dot--besucht {
    fill: var(--gold);
    opacity: 1;
    /* Ein dunkler Rand trennt Punkte, die sich überlappen. */
    stroke: rgba(20, 24, 28, 0.7);
    stroke-width: 0.8px;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    /* Der Schein hebt die besuchten Häuser vom Raster der übrigen ab. */
    filter: drop-shadow(0 0 3px rgba(201, 168, 76, 0.55));
}

.housemap__dot:hover {
    opacity: 1;
    cursor: pointer;
}

/* Nur ein Ausschnitt: was außerhalb liegt, bleibt draußen. Sonst ragen die
   Häuser jenseits des Umkreises über die Karte hinaus in die Seite. */
.housemap__umkreis {
    fill: rgba(201, 168, 76, 0.07);
    stroke: rgba(201, 168, 76, 0.55);
    stroke-width: 1.2px;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.housemap__umkreis-text {
    fill: rgba(201, 168, 76, 0.85);
    font-family: var(--font-body);
    font-weight: 600;
    text-anchor: middle;
    pointer-events: none;
}

.housemap__name {
    fill: var(--text-secondary);
    font-family: var(--font-body);
    /* Ein Rand in der Farbe des Grunds, damit Namen über Linien lesbar bleiben. */
    stroke: rgba(20, 24, 28, 0.9);
    paint-order: stroke;
    stroke-linejoin: round;
    pointer-events: none;
}

.housemap__standort-puls {
    transform-box: fill-box;
    transform-origin: center;
    animation: housemapPuls 2.4s ease-out infinite;
}

@keyframes housemapPuls {
    from { transform: scale(1); opacity: 0.7; }
    to { transform: scale(3.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .housemap__standort-puls {
        animation: none;
        opacity: 0;
    }
}

.housemap__standort circle {
    fill: rgba(120, 170, 255, 0.35);
    pointer-events: none;
}

.housemap__standort .housemap__standort-kern {
    fill: #7aaaff;
}

.housemap__caption {
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 8px;
    min-height: 1.2em;
}

/* Auf breiten Bildschirmen darf die Karte deutlich größer werden – seitlich
   bleibt wegen des hochkantigen Zuschnitts ohnehin Platz. */
@media (min-width: 900px) {
    .housemap__svg {
        height: clamp(420px, 64vh, 620px);
    }
}

/* "Weitere Abende anzeigen" unter dem Feed */
.feed-mehr {
    width: 100%;
    margin-top: 12px;
}

/* ── Blinde Flecken ─────────────────────────────────────────────────── */

/* Die Grundform kommt von .form-collapse (siehe Mitwirkende im Log-Formular),
   damit beide Aufklapper in der App gleich aussehen. */
.blindspots {
    margin-bottom: 20px;
}

/* Gesetzte Markierung "Schon gesehen" – dieselbe Rolle wie
   .btn--wishlist-active, nur in Grün statt Gold, damit die beiden Zustände
   nebeneinander unterscheidbar bleiben. */
.btn--seen-active {
    background: rgba(0, 192, 48, 0.12);
    border: 1px solid rgba(0, 192, 48, 0.45);
    color: var(--green);
}

.btn--seen-active:hover {
    background: rgba(0, 192, 48, 0.2);
    color: var(--green);
}

/* Feste Angabe statt Knopf, wenn sich das Gesehenhaben aus einem geloggten
   Besuch ergibt: hier gibt es nichts umzuschalten. */
.btn--seen-static {
    background: transparent;
    border: 1px dashed rgba(0, 192, 48, 0.4);
    color: var(--green);
    cursor: default;
    opacity: 0.85;
}

.blindspots__done {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* Zwei Teile: Karten "Läuft demnächst", darunter die Sammlung je Komponist. */
.luecken {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.luecken__kopf {
    margin: 6px 0 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.luecken__kopf:first-child {
    margin-top: 0;
}

.gelegenheiten {
    display: grid;
    gap: 10px;
}

@media (min-width: 720px) {
    .gelegenheiten {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

.gelegenheit {
    display: flex;
    min-height: 136px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.gelegenheit__bild {
    flex: 0 0 92px;
    background-color: var(--bg-tertiary);
}

.gelegenheit__inhalt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
}

.gelegenheit__titel {
    font-family: var(--font-display);
    font-size: 1.12rem;
    line-height: 1.2;
    color: var(--text);
    text-decoration: none;
}

.gelegenheit__titel:hover {
    color: var(--gold-light);
}

.gelegenheit__komponist {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.gelegenheit__termin {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.gelegenheit__termin .icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--gold);
}

.gelegenheit__termin strong {
    font-weight: 600;
    color: var(--gold);
}

.gelegenheit__ort {
    display: block;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.gelegenheit__weitere {
    margin: 0 0 0 22px;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.gelegenheit__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
}

.gelegenheit__aktionen .btn {
    gap: 5px;
    padding: 5px 10px;
    font-size: 12px;
}

.gelegenheit__aktionen .icon {
    width: 14px;
    height: 14px;
}

.sammlung {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.sammlung__zeile + .sammlung__zeile {
    border-top: 1px solid var(--border);
}

.sammlung__kopf {
    display: grid;
    grid-template-columns: 1fr auto 12px;
    grid-template-areas: "name zahl pfeil" "balken balken balken";
    align-items: center;
    gap: 7px 10px;
    padding: 12px 14px;
    list-style: none;
    cursor: pointer;
}

.sammlung__kopf::-webkit-details-marker { display: none; }

.sammlung__name {
    grid-area: name;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text);
}

.sammlung__zahl {
    grid-area: zahl;
    font-size: 0.86rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gold);
}

.sammlung__zahl span {
    font-weight: 400;
    color: var(--text-muted);
}

.sammlung__pfeil {
    grid-area: pfeil;
    justify-self: center;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    margin-top: -3px;
    transform: rotate(45deg);
    transition: transform 0.18s ease, margin-top 0.18s ease;
}

.sammlung__zeile[open] .sammlung__pfeil {
    margin-top: 3px;
    transform: rotate(-135deg);
}

.sammlung__balken {
    grid-area: balken;
    height: 5px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.sammlung__balken i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
}

.sammlung__werke {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px 14px;
}

.sammlung__hinweis {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.blindspot__punkt,
.blindspot__work--laeuft::before {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

.blindspot__work--laeuft::before {
    content: '';
    margin-right: 7px;
    vertical-align: middle;
}

.blindspot__work--laeuft {
    border-color: rgba(201, 168, 76, 0.35);
    color: var(--text);
}

.blindspot__work {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.86rem;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.blindspot__work:hover {
    border-color: var(--gold-dark);
    color: var(--text);
}

/* Sammlungen (src/pages/Sammlungen.js) nutzen den Kasten oben mit. Im
   Profil sind die Zeilen Verweise statt aufklappbar: Pfeil nach rechts. */
.sammlung__kopf--verweis {
    color: inherit;
    text-decoration: none;
}

.sammlung__kopf--verweis .sammlung__pfeil {
    margin-top: 0;
    transform: rotate(-45deg);
}

/* Gesehene Teile einer Sammlung: mit Haken, heller als die fehlenden. */
.sammlung__gesehen {
    border-color: rgba(201, 168, 76, 0.35);
    color: var(--text);
}

.sammlung__gesehen .icon {
    width: 12px;
    height: 12px;
    margin-right: 6px;
    color: var(--gold);
    vertical-align: -1px;
}

/* ── Listenfenster (gesehene Werke, besuchte Häuser) ──────────────────────────────────────── */

/* Die Kachel ist jetzt ein Knopf. Ohne diese Zurücksetzung brächte sie die
   Standardgestaltung des Browsers mit und stünde schief neben den drei
   übrigen. */
/* Die Kacheln sind jetzt teils Knopf, teils Verweis. Beide bringen eigene
   Vorgaben des Browsers mit – Schrift, Farbe, Unterstreichung –, die hier
   zurückgesetzt werden, damit sie neben der unveränderten Kachel nicht
   auffallen. */
.stat-card--klickbar {
    font: inherit;
    color: inherit;
    text-align: center;
    text-decoration: none;
    display: block;
    position: relative;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

/* Der Hinweis, dass hier etwas passiert, sitzt in der Ecke und nicht in der
   Beschriftung: dort brach er bei den längeren Wörtern in eine eigene Zeile
   um und stand allein unter dem Text. */
.stat-card__hint {
    position: absolute;
    top: 8px;
    right: 9px;
    line-height: 1;
    font-size: 13px;
    color: var(--text-muted);
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.stat-card--klickbar:hover .stat-card__hint {
    opacity: 0.9;
}

.stat-card--klickbar:hover {
    border-color: var(--gold-dark);
    transform: translateY(-1px);
}

.listmodal {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 -8px;
    /* Gerollt wird hier, nicht im ganzen Fenster – siehe
       .modal__content--liste. */
    overflow-y: auto;
    min-height: 0;
}

.listmodal__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}

.listmodal__row:hover {
    background: var(--bg-tertiary);
}

.listmodal__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.listmodal__title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text);
}

.listmodal__sub {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.listmodal__side {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Markierte Werke tragen dieselbe grüne Kennzeichnung wie auf der Werkseite,
   damit beide Zustände wiedererkennbar bleiben. */
.listmodal__side--betont {
    color: var(--green);
    opacity: 0.85;
}

.listmodal__foot {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 12px;
    flex-shrink: 0;
}

/* --- Werkverlauf: die eigenen Abende mit einem Werk ------------------ */
/* Ein Film bleibt derselbe, eine Oper wird jedes Mal neu gemacht. Die
   Zeilen stehen deshalb untereinander wie ein Fahrplan: Datum, Haus,
   Bewertung – damit sich die Abende spaltenweise vergleichen lassen. */

.section__count {
    margin-left: 8px;
    font-family: var(--font-body);
    font-size: 0.62em;
    font-weight: 600;
    color: var(--gold);
    vertical-align: 0.18em;
}

.werkverlauf {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}

.werkverlauf__abend {
    border-bottom: 1px solid var(--border);
}

.werkverlauf__zeile {
    display: grid;
    /* Datum und Bewertung so breit wie nötig, das Haus bekommt den Rest –
       so stehen die Bewertungen bündig untereinander. */
    grid-template-columns: 7.4em 1fr auto;
    align-items: baseline;
    gap: 10px;
    padding: 11px 4px;
    color: var(--text);
    text-decoration: none;
    transition: background var(--transition);
}

.werkverlauf__zeile:hover {
    background: var(--bg-tertiary);
}

.werkverlauf__datum {
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.werkverlauf__haus {
    font-weight: 500;
}

.werkverlauf__note {
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    color: var(--gold);
    white-space: nowrap;
}

/* a:hover färbt global golden und gewänne mit (0,1,1) gegen die Klasse
   des Kastens – mitten in der Zeile würde sonst ein Wort golden. */
.werkverlauf__zeile:hover .werkverlauf__haus {
    color: var(--text);
}

.werkverlauf__credits {
    margin: -4px 0 9px;
    padding-left: calc(7.4em + 14px);
    font-size: 0.78rem;
    color: var(--text-muted);
}

.werkverlauf__fazit {
    margin: 12px 0 0;
    font-size: 0.84rem;
    color: var(--text-secondary);
}

@media (max-width: 420px) {
    /* Auf schmalen Bildschirmen bricht das Haus unter das Datum, statt die
       Bewertung aus der Zeile zu drängen. */
    .werkverlauf__zeile {
        grid-template-columns: 1fr auto;
    }

    .werkverlauf__datum {
        grid-column: 1 / -1;
        margin-bottom: -6px;
    }

    .werkverlauf__credits {
        padding-left: 4px;
    }
}

/* --- Komponistenseite ------------------------------------------------ */

.composer-hero {
    padding: 24px 0 8px;
    margin-bottom: 8px;
}

.composer-hero__row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.composer-hero__portrait {
    flex: 0 0 auto;
    width: 116px;
    height: 116px;
    border-radius: 14px;
    border: 1px solid var(--border);
    /* Porträts sind hochkant und zeigen oben das Gesicht – nicht mittig
       beschneiden, sonst steht der Kopf halb außerhalb. */
    background-position: center 22% !important;
    box-shadow: var(--shadow-sm);
}

.composer-hero__name {
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1.15;
    margin: 0 0 4px;
}

.composer-hero__kurz {
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.composer-hero__zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.composer-quelle {
    margin: 12px 0 0;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.composer-link,
.person-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--text-muted);
}

.composer-link:hover,
.person-link:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* Personenseite (src/pages/PersonDetail.js): die eigenen Abende mit einer
 * Person, gebaut wie die Werkliste der Komponistenseite – Datum, Werk und
 * Haus, rechts was sie an dem Abend war. */
.person-abende {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}

.person-abende__eintrag {
    border-bottom: 1px solid var(--border);
}

.person-abende__zeile {
    display: grid;
    grid-template-columns: 6.6em 1fr auto;
    align-items: baseline;
    gap: 10px;
    padding: 11px 4px;
    color: var(--text);
    text-decoration: none;
    transition: background var(--transition);
}

.person-abende__zeile:hover {
    background: var(--bg-tertiary);
    color: var(--text);
}

.person-abende__datum {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.person-abende__text {
    display: grid;
    min-width: 0;
}

.person-abende__werk {
    font-weight: 500;
}

.person-abende__haus,
.person-abende__als {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.person-abende__als {
    text-align: right;
    color: var(--gold);
}

@media (max-width: 420px) {
    .person-abende__zeile {
        grid-template-columns: 5.6em 1fr;
    }

    .person-abende__als {
        grid-column: 2;
        text-align: left;
    }
}

.composer-werke {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}

.composer-werke__eintrag {
    border-bottom: 1px solid var(--border);
}

.composer-werke__zeile {
    display: grid;
    grid-template-columns: 3.6em 1fr 2.6em;
    align-items: baseline;
    gap: 10px;
    padding: 11px 4px;
    color: var(--text);
    text-decoration: none;
    transition: background var(--transition);
}

.composer-werke__zeile:hover {
    background: var(--bg-tertiary);
}

.composer-werke__jahr {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.composer-werke__titel {
    font-weight: 500;
}

/* a:hover färbt global golden und gewänne mit (0,1,1) gegen die Klasse des
   Kastens – mitten in der Zeile würde sonst ein Wort golden. */
.composer-werke__zeile:hover .composer-werke__titel {
    color: var(--text);
}

.composer-werke__abende {
    text-align: right;
    font-size: 0.84rem;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.composer-werke__fazit {
    margin: 12px 0 0;
    font-size: 0.84rem;
    color: var(--text-secondary);
}

@media (max-width: 420px) {
    .composer-hero__portrait {
        width: 88px;
        height: 88px;
    }

    .composer-hero__name {
        font-size: 24px;
    }
}

/* Als gesehen markiert, aber ohne geloggten Abend – das Häkchen steht für
   Werke von vor OpernLog, zu denen es kein Datum und kein Haus gibt. Grün
   wie die Angabe "Gesehen · geloggt" auf der Werkseite. */
.composer-werke__abende--markiert {
    color: var(--green);
}

.composer-werke__abende--markiert .icon {
    width: 0.95em;
    height: 0.95em;
    vertical-align: -0.14em;
}

/* Monogramm, wo es kein freies Porträt gibt. Der bloße Verlauf sah aus wie
   ein Ladefehler; die Initialen sagen, dass hier nichts fehlt. */
.composer-hero__portrait--monogramm {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6b1525 0%, #3d0a15 55%, #14181c 100%);
}

.composer-hero__portrait--monogramm span {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 2px;
    /* Die Initialen sitzen optisch zu weit rechts, weil der Buchstabenabstand
       auch hinter dem letzten Zeichen steht. */
    text-indent: 2px;
    color: var(--gold);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

@media (max-width: 420px) {
    .composer-hero__portrait--monogramm span {
        font-size: 26px;
        letter-spacing: 1px;
    }
}

/* --- Feed: Kopf als Theaterzettel ------------------------------------ */
/* Die App zieht ihre Bildsprache beim Start durch – Samtvorhang, Gold,
   Playfair. Der Feed nahm davon nichts auf und sah aus wie ein
   Verwaltungsformular. Jetzt: Samtgrund, goldene Haarlinie oben, die
   Spielzeit in Kapitälchen darüber. */

.feedkopf {
    margin-bottom: 28px;
}

.feedkopf__buehne {
    position: relative;
    padding: 26px 26px 22px;
    border-radius: 16px;
    border: 1px solid var(--border);
    overflow: hidden;
    background:
        radial-gradient(ellipse 120% 100% at 12% 0%, rgba(139, 26, 43, 0.32), transparent 62%),
        linear-gradient(160deg, #241017 0%, var(--card-bg) 58%);
}

/* Die Haarlinie am oberen Rand – wie die Goldkante der Blende über dem
   Vorhang. Als ::before, damit sie innerhalb der Rundung sitzt. */
.feedkopf__buehne::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent, var(--gold) 18%, var(--gold-light, #f0dc9a) 50%, var(--gold) 82%, transparent);
    opacity: 0.75;
}

.feedkopf--neu .feedkopf__buehne {
    padding-bottom: 26px;
}

.feedkopf__oben {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.feedkopf__kicker {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
}

.feedkopf__gruss {
    font-family: var(--font-display);
    font-size: 38px;
    line-height: 1.05;
    margin: 0;
    letter-spacing: 0.5px;
}

/* Die Einheit tritt zurück, die Zahl trägt. */
.feedkopf__einheit {
    font-size: 0.58em;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0;
}

.feedkopf__unterzeile {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
}

.feedkopf__unterzeile:hover {
    color: var(--gold);
}

.feedkopf__zeile {
    margin: 10px 0 20px;
    color: var(--text-secondary);
    max-width: 46ch;
}

.feedkopf__aktionen {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Drei Zahlen statt vier: die vierte wiederholte, was oben schon groß steht.
   Sie sitzen halb im Theaterzettel, halb darunter – das verzahnt Kopf und
   Seite, statt zwei Kästen übereinanderzustellen. */
.feedkopf__zahlen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: -14px 14px 0;
    position: relative;
}

.feedkopf__zahl {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-elevated, var(--card-bg));
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), transform var(--transition);
}

.feedkopf__zahl:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.feedkopf__wert {
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

/* a:hover setzt global Gold und gewänne mit (0,1,1) gegen die Klasse. */
.feedkopf__zahl:hover .feedkopf__label {
    color: var(--text-muted);
}

.feedkopf__label {
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}

/* Editorial: die Überschrift endet nicht im Nichts, sondern zieht eine
   Haarlinie bis zum Rand. Nur im Feed – die übrigen Seiten haben ihre
   eigene Ordnung, und ein globaler Eingriff wäre hier nicht gefragt. */
.page--home .section__title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page--home .section__title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

/* --- Feed: leerer Freundes-Feed und Rückfallebene -------------------- */

.feed-leer {
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background:
        radial-gradient(ellipse 90% 120% at 100% 0%, rgba(201, 168, 76, 0.06), transparent 60%),
        var(--card-bg);
}

.feed-leer__text {
    margin: 0 0 18px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 54ch;
}

/* Deutlich abgesetzt: das sind keine Freunde, und es soll nicht so aussehen.
   Die Beschriftung sitzt mittig auf der Linie – ein Absatzzeichen, kein
   zweiter Abschnitt, der mit dem Feed darüber konkurriert. */
.feed-sonst {
    margin-top: 38px;
}

.feed-sonst__titel {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    margin: 0 0 4px;
    color: var(--text-secondary);
}

.feed-sonst__titel::before,
.feed-sonst__titel::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.feed-sonst__zeile {
    margin: 0 0 20px;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 520px) {
    .feedkopf__buehne {
        padding: 22px 18px 20px;
    }

    .feedkopf__gruss {
        font-size: 30px;
    }

    /* Drei nebeneinander werden auf dem Handy zu schmal für "Schnitt". */
    .feedkopf__zahlen {
        margin: -12px 8px 0;
        gap: 8px;
    }

    .feedkopf__zahl {
        padding: 10px;
    }

    .feedkopf__wert {
        font-size: 21px;
    }

    .feedkopf__label {
        font-size: 0.68rem;
    }
}

/* Unter Speichern/Abbrechen im Fenster "Profil bearbeiten": Passkeys und
 * Konto löschen. Die Linie trennt sie von den Feldern, die "Speichern"
 * betrifft – beides hier wirkt sofort. */
.profil-konto:not(:empty) {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

/* Mitteilungen und Passkeys: schlichte Zeilen, keine Kästen – Titel
 * links, Knöpfe rechts, darunter klein der Stand oder die Liste. Getrennt
 * durch dieselbe feine Linie wie der ganze Bereich von den Feldern darüber. */
.konto-abschnitt {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.konto-abschnitt:first-child {
    padding-top: 0;
}

.konto-abschnitt__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    flex-wrap: wrap;
}

.konto-abschnitt__titel {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.konto-abschnitt__stand {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 2px 0 0;
}

.konto-abschnitt__stand:empty {
    display: none;
}

.mitteilungen__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mitteilungen__fehler,
.passkeys__fehler {
    margin: 6px 0 0;
}

.mitteilungen__fehler[hidden],
.passkeys__fehler[hidden] {
    display: none;
}

.passkeys__liste {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.passkeys__zeile {
    display: flex;
    align-items: center;
    gap: 8px;
}

.passkeys__text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    min-width: 0;
    flex: 1;
}

.passkeys__name {
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.passkeys__unterzeile,
.passkeys__leer {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.passkeys__loeschen {
    flex-shrink: 0;
    padding: 4px;
}

/* Datenschutz (src/pages/Datenschutz.js): Fließtext in Lesebreite, und der
 * Link dorthin so unauffällig wie möglich – klein, grau, ohne Kasten. */
.rechtstext {
    max-width: 680px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.rechtstext h1 {
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--text);
    margin: 16px 0 2px;
}

.rechtstext h2 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 26px 0 6px;
}

.rechtstext p,
.rechtstext ul {
    margin: 0 0 10px;
    font-size: 0.92rem;
}

.rechtstext ul {
    padding-left: 1.2em;
}

.rechtstext li {
    margin-bottom: 6px;
}

.rechtstext strong {
    color: var(--text);
    font-weight: 500;
}

.rechtstext__stand {
    font-size: 0.8rem !important;
    color: var(--text-muted);
}

.rechtstext-link {
    display: block;
    width: fit-content;
    margin: 18px auto 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-decoration: none;
}

.rechtstext-link:hover {
    color: var(--text-secondary);
}

.rechtstext-link + .rechtstext-link {
    margin-top: 6px;
}

/* Meine Daten herunterladen – ein schlichter Knopf direkt über "Konto
 * löschen", wie dieser mittig und ohne Kasten. */
.daten-export {
    margin-top: 20px;
    text-align: center;
}

.daten-export + .konto-loeschen {
    margin-top: 4px;
}

.daten-export__fehler {
    margin: 4px 0 0;
}

.daten-export__fehler[hidden] {
    display: none;
}

/* Der Schlüssel im Anmeldeknopf steht wie das Google-Logo vor dem Text. */
#passkeySignInBtn .icon {
    margin-right: 8px;
}

/* Konto löschen – zuunterst im Fenster "Profil bearbeiten".
 *
 * Wer sich abmeldet, will wiederkommen; wer löscht, nicht. Beide Schalter
 * nebeneinander wären eine Einladung zum Vergreifen. */
.konto-loeschen {
    margin-top: 20px;
    text-align: center;
}

.konto-loeschen__knopf {
    color: var(--accent);
}

.konto-loeschen__liste {
    margin: 0 0 0 1.2em;
    padding: 0;
    line-height: 1.7;
}

/* ── Hinweis aufs Installieren ─────────────────────────────────────────
 *
 * Nur auf dem Handy im Browser (siehe src/installHinweis.js). Er steht als
 * letzte Zeile in der festen Leiste oben; die wird dadurch höher. Ihre Höhe
 * misst Navigation.js und stellt sie als --kopfhoehe bereit – damit rücken
 * Inhalt, aufgeklapptes Menü und Fenster entsprechend nach unten. */
.installhinweis {
    display: none;
}

@media (max-width: 768px) {
    .mit-installhinweis .main-nav {
        flex-wrap: wrap;
    }

    .installhinweis {
        display: flex;
        align-items: center;
        gap: 10px;
        /* Über die volle Breite: die Leiste hat links und rechts 16px Innenabstand. */
        flex: 0 0 calc(100% + 32px);
        margin: 6px -16px -8px;
        padding: 8px 16px;
        background: linear-gradient(135deg, rgba(139, 26, 43, 0.9), rgba(160, 128, 48, 0.9));
        color: #fff;
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .installhinweis__text {
        flex: 1;
        min-width: 0;
    }

    .installhinweis__teilen {
        width: 15px;
        height: 15px;
        vertical-align: -2px;
    }

    .installhinweis__knopf {
        flex-shrink: 0;
        background: #fff;
        color: var(--accent);
    }

    .mit-installhinweis .main-content {
        padding-top: calc(var(--kopfhoehe, 110px) + 4px);
    }

    .mit-installhinweis .nav-links {
        top: var(--kopfhoehe, 110px);
    }

    /* Nicht für Fenster, die den ganzen Bildschirm füllen: Willkommen und
       Story sind genau so hoch wie das Bild, und mit dem Abstand oben rutschte
       ihr unterer Rand – beim Willkommen der Knopf – aus dem Bild. */
    .mit-installhinweis .modal:not(.willkommen):not(.story) {
        padding-top: calc(var(--kopfhoehe, 110px) + 16px);
    }
}

/* Die Frage nach Mitteilungen beim ersten Anmelden. */
/* "Neu in OpernLog" */
.neuigkeit__marke {
    margin: 0 0 6px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

.neuigkeit__liste {
    margin: 12px 0;
    padding-left: 1.2em;
    line-height: 1.5;
}

.neuigkeit__liste li + li {
    margin-top: 6px;
}

.mitteilungen-frage__liste {
    margin: 8px 0 12px 1.2em;
    padding: 0;
    line-height: 1.6;
}

/* --- Ohne Netz geloggt ---------------------------------------------------- */
/* Ein Besuch, der noch auf dem Gerät wartet (store.addVisit). */
.ausstehend-marke {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
}

.ausstehend-marke--fehler {
    border-color: rgba(220, 53, 69, 0.5);
    color: #ff6b6b;
}

.review-card > .ausstehend-marke {
    margin: 0 0 8px;
}

.log-offline {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid rgba(201, 168, 76, 0.3);
    color: var(--text-secondary);
    font-size: 14px;
}

/* --- In der Nähe ---------------------------------------------------------- */
.naehe-filter__wunsch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

.naehe-standort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.naehe-anzahl {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.naehe-tag {
    margin-bottom: 20px;
}

.naehe-tag__datum {
    margin: 0 0 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--gold);
}

.naehe-abend {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.naehe-abend__zeit {
    flex: 0 0 44px;
    padding-top: 1px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-size: 14px;
}

.naehe-abend__was {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.naehe-abend__werk {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
}

.naehe-abend__stern .icon {
    width: 13px;
    height: 13px;
    margin-right: 4px;
    color: var(--gold);
    vertical-align: -1px;
}

.naehe-abend__wo {
    font-size: 13px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.naehe-abend__haus {
    color: var(--text-secondary);
}

.naehe-abend__kalender,
.naehe-abend__vormerken {
    flex: 0 0 auto;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.naehe-abend__kalender .icon,
.naehe-abend__vormerken .icon {
    width: 16px;
    height: 16px;
}

/* Lesezeichen und Kalender stehen als Paar enger beisammen. */
.naehe-abend__vormerken + .naehe-abend__kalender {
    margin-left: -6px;
}

.naehe-abend__vormerken--an {
    color: var(--gold);
    border-color: rgba(201, 168, 76, 0.45);
    background: rgba(201, 168, 76, 0.08);
}

/* "Demnächst hier" auf der Seite eines Hauses – dieselben Zeilen wie in
   "In der Nähe", ohne den Namen des Hauses. */
.haus-spielplan__anzahl,
.haus-spielplan__leer {
    margin: -4px 0 12px;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.haus-spielplan .naehe-tag__datum {
    font-size: 1rem;
}

.naehe-mehr {
    display: block;
    margin: 8px auto 16px;
}

.naehe-karte {
    margin: 16px 0 8px;
}

.naehe-karte__schalter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

.naehe-karte .housemap {
    margin-bottom: 16px;
}

.naehe-hausfilter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-weight: 600;
}

/* Umkreis: ein Schieber statt fester Stufen im Auswahlfeld. */
.naehe-umkreis {
    margin-bottom: 12px;
}

.naehe-umkreis__kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}

.naehe-umkreis__wert {
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--gold);
}

.naehe-umkreis__zeile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.naehe-umkreis__schieber {
    flex: 1;
    min-width: 0;
    accent-color: var(--gold);
    height: 28px;
}

.naehe-umkreis--alle .naehe-umkreis__schieber {
    opacity: 0.4;
}

.naehe-umkreis__alle--an {
    border-color: var(--gold);
    color: var(--gold);
}

/* Auf der Karte in der Nähe: senkrecht wischen blättert die Seite, zwei
   Finger zoomen die Karte – nicht die Seite. */
.naehe-karte .housemap__svg {
    touch-action: pan-y;
}

/* Während einer Zoom-Geste: nur das Nötigste zeichnen. */
.housemap--zoomt .housemap__dot--besucht {
    filter: none;
}

.housemap--zoomt .housemap__svg {
    -webkit-mask-image: none;
    mask-image: none;
}

.housemap--zoomt .housemap__standort-puls {
    animation: none;
    opacity: 0;
}

/* ============================================================
   Willkommen: "Was hast du schon gesehen?" (components/Willkommen.js)
   Das Karussell beim ersten Anmelden. Samt, Gold, Playfair – dieselbe
   Sprache wie Vorhang und Theaterzettel, weil es der erste Eindruck ist.
   ============================================================ */
html.willkommen-offen,
html.willkommen-offen body {
    overflow: hidden;
}

.willkommen {
    padding: 0;
    overflow: hidden;
    background: #0b0709;
    animation: willkommenAuf 0.5s ease both;
}

.willkommen .modal__overlay {
    background:
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(139, 26, 43, 0.42), transparent 70%),
        radial-gradient(ellipse 70% 40% at 50% 100%, rgba(201, 168, 76, 0.08), transparent 70%),
        #0b0709;
    backdrop-filter: none;
}

.willkommen--geht {
    animation: willkommenZu 0.32s ease both;
}

@keyframes willkommenAuf {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes willkommenZu {
    to { opacity: 0; transform: scale(1.02); }
}

.willkommen__buehne {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: calc(28px + env(safe-area-inset-top, 0px)) 0 calc(18px + env(safe-area-inset-bottom, 0px));
    outline: none;
}

.willkommen__kopf {
    flex-shrink: 0;
    padding: 0 28px;
    text-align: center;
    animation: willkommenHoch 0.7s 0.1s ease both;
}

.willkommen__kicker {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.willkommen__titel {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 7vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    color: #f4ead8;
    margin: 0;
}

.willkommen__titel em {
    font-style: italic;
    color: var(--gold-light);
}

.willkommen__zeile {
    margin: 10px 0 0;
    font-size: 0.95rem;
    color: rgba(244, 234, 216, 0.62);
}

.willkommen__mitte {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
}

.willkommen__reihe {
    --karte-h: min(52vh, 440px);
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Erste und letzte Karte sollen mittig stehen können. */
    padding: 0 calc(50% - var(--karte-h) / 3);
}

@supports (height: 1dvh) {
    .willkommen__reihe {
        --karte-h: min(52dvh, 440px);
    }
}

/* Die Karte so hoch, wie zwischen Kopf und Fuß wirklich Platz ist – auf
   einem kleinen Handy ragte sie sonst unter den Zähler. */
@supports (height: 1cqh) {
    .willkommen__mitte {
        container-type: size;
    }

    .willkommen__reihe {
        --karte-h: min(94cqh, 440px);
    }
}

@media (max-height: 640px) {
    .willkommen__buehne {
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
    }

    .willkommen__kicker {
        margin-bottom: 6px;
    }

    .willkommen__zeile {
        margin-top: 6px;
        font-size: 0.85rem;
    }

    .willkommen__stand {
        margin: 8px 0 10px;
    }

    .willkommen__klein {
        margin-top: 8px;
    }
}

.willkommen__reihe::-webkit-scrollbar {
    display: none;
}

.willkommen__karte {
    position: relative;
    flex: 0 0 auto;
    height: var(--karte-h);
    aspect-ratio: 2 / 3;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    background: #14181c;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform: scale(0.9);
    opacity: 0.45;
    transition: transform 0.35s ease, opacity 0.35s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    animation: willkommenKarte 0.6s ease both;
}

.willkommen__karte:nth-child(2) { animation-delay: 0.08s; }
.willkommen__karte:nth-child(3) { animation-delay: 0.16s; }

.willkommen__karte--mitte {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}

.willkommen__karte:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
}

.willkommen__bild {
    position: absolute;
    inset: 0;
    transition: filter 0.3s ease;
}

.willkommen__text {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.willkommen__komponist {
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
}

.willkommen__werk {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 5vw, 1.5rem);
    font-weight: 600;
    line-height: 1.15;
    color: #f7f0e2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

/* Gesehen: goldener Rahmen und ein Siegel oben rechts. */
.willkommen__karte--gesehen {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 34px rgba(201, 168, 76, 0.22);
}

.willkommen__siegel {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--gold-light), var(--gold-dark));
    color: #1a1206;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.willkommen__siegel svg {
    width: 22px;
    height: 22px;
    stroke-width: 3;
}

.willkommen__karte--gesehen .willkommen__siegel {
    transform: scale(1);
    opacity: 1;
}

.willkommen__pfeil {
    display: none;
}

.willkommen__stand {
    flex-shrink: 0;
    margin: 0 0 14px;
    text-align: center;
    font-size: 0.82rem;
    letter-spacing: 0.6px;
    color: rgba(244, 234, 216, 0.5);
    font-variant-numeric: tabular-nums;
}

.willkommen__stand strong {
    color: var(--gold-light);
    font-weight: 600;
}

.willkommen__fuss {
    flex-shrink: 0;
    padding: 0 28px;
    text-align: center;
    animation: willkommenHoch 0.7s 0.3s ease both;
}

.willkommen__fertig {
    width: 100%;
    max-width: 360px;
}

.willkommen__klein {
    margin: 12px 0 0;
    font-size: 0.72rem;
    color: rgba(244, 234, 216, 0.38);
}

.willkommen__nachweis {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@keyframes willkommenHoch {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes willkommenKarte {
    from { opacity: 0; translate: 0 26px; }
    to { translate: 0 0; }
}

/* Mit Maus: Pfeile links und rechts, die Reihe in der Mitte begrenzt. */
@media (hover: hover) and (pointer: fine) {
    .willkommen__pfeil {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        z-index: 2;
        width: 46px;
        height: 46px;
        margin-top: -23px;
        border-radius: 50%;
        border: 1px solid rgba(201, 168, 76, 0.4);
        background: rgba(11, 7, 9, 0.7);
        color: var(--gold-light);
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease;
    }

    .willkommen__pfeil:hover {
        background: rgba(139, 26, 43, 0.6);
        border-color: var(--gold);
    }

    .willkommen__pfeil--zurueck { left: max(20px, calc(50% - 560px)); }
    .willkommen__pfeil--weiter { right: max(20px, calc(50% - 560px)); }

    .willkommen__karte:not(.willkommen__karte--mitte):hover {
        opacity: 0.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    .willkommen,
    .willkommen__kopf,
    .willkommen__fuss,
    .willkommen__karte {
        animation: none;
    }

    .willkommen__karte,
    .willkommen__siegel {
        transition: none;
    }
}

/* ============================================================
   Die Leiste unten am Handy (components/Navigation.js)
   Feed, Opern, Loggen, Tagebuch, Profil – das Loggen in der Mitte und
   angehoben, weil es der wichtigste Weg der App ist. Am Rechner gibt es die
   Seitenleiste; dort bleibt diese Leiste aus.
   ============================================================ */
.tab-leiste {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --tab-hoehe: 58px;
    }

    .tab-leiste {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: stretch;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 110;
        height: calc(var(--tab-hoehe) + env(safe-area-inset-bottom, 0px));
        padding: 0 6px env(safe-area-inset-bottom, 0px);
        background: rgba(24, 29, 35, 0.94);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--border);
    }

    /* display: grid überstimmt sonst das hidden-Attribut. */
    .tab-leiste[hidden] {
        display: none;
    }

    .tab-leiste__punkt {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        color: var(--text-muted);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
        transition: color 0.2s ease;
    }

    .tab-leiste__zeichen {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tab-leiste__zeichen svg {
        width: 22px;
        height: 22px;
    }

    .tab-leiste__text {
        font-size: 0.64rem;
        font-weight: 500;
        letter-spacing: 0.2px;
        line-height: 1;
    }

    .tab-leiste__punkt--aktiv {
        color: var(--gold-light);
    }

    /* Loggen: ein Knopf, kein Reiter – rund, bordeauxrot, mit Goldkante,
       halb über die Leiste gehoben. */
    .tab-leiste__punkt--loggen {
        color: var(--text-secondary);
    }

    .tab-leiste__punkt--loggen .tab-leiste__zeichen {
        width: 50px;
        height: 50px;
        margin-top: -22px;
        border-radius: 50%;
        background: linear-gradient(145deg, var(--accent-light), var(--accent-dark));
        color: #fff;
        box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.55), 0 0 0 5px var(--bg-primary), 0 8px 20px rgba(0, 0, 0, 0.5);
        transition: transform 0.15s ease;
    }

    .tab-leiste__punkt--loggen .tab-leiste__zeichen svg {
        width: 24px;
        height: 24px;
        stroke-width: 2.4;
    }

    .tab-leiste__punkt--loggen:active .tab-leiste__zeichen {
        transform: scale(0.94);
    }

    .tab-leiste__punkt--loggen.tab-leiste__punkt--aktiv {
        color: var(--gold-light);
    }

    .tab-leiste .notification-dot {
        top: 8px;
        right: calc(50% - 16px);
    }

    /* Platz für die Leiste: unter dem Inhalt, unter dem aufgeklappten Menü,
       unter den Meldungen. Die Seite selbst endet mit 80px Luft (.page), das
       reicht für die Leiste; dazu kommt nur der Rand des Geräts. */
    .main-content {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .nav-links {
        bottom: calc(var(--tab-hoehe) + env(safe-area-inset-bottom, 0px));
    }

    .toast {
        bottom: calc(var(--tab-hoehe) + 18px + env(safe-area-inset-bottom, 0px));
    }

    /* Mit der Tastatur im Bild nimmt die Leiste nur Platz weg – auf Android
       steht sie sonst direkt über den Tasten. */
    body:has(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus, textarea:focus, select:focus) .tab-leiste {
        display: none;
    }
}

@media (max-width: 768px) and (display-mode: standalone) {
    .main-content {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================================
   "In deiner Nähe" auf der leeren Startseite (pages/Home.js)
   ============================================================ */
.start-naehe__frage {
    padding: 22px 24px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background:
        radial-gradient(ellipse 90% 120% at 0% 0%, rgba(201, 168, 76, 0.07), transparent 60%),
        var(--card-bg);
}

.start-naehe__text {
    margin: 0 0 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 54ch;
}

.start-naehe__hinweis {
    margin: -6px 0 16px;
    font-size: 0.85rem;
    color: var(--gold);
    line-height: 1.5;
}

.start-naehe__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.start-naehe__aktionen .btn .icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

.start-naehe__liste {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card-bg);
    overflow: hidden;
}

.start-naehe__abend {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 14px 18px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s ease;
}

.start-naehe__abend:last-child {
    border-bottom: none;
}

.start-naehe__abend:hover {
    background: rgba(255, 255, 255, 0.03);
}

.start-naehe__wann {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.start-naehe__werk {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-primary);
}

.start-naehe__wo {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.start-naehe__mehr {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    font-size: 0.88rem;
    color: var(--gold);
    text-decoration: none;
}

.start-naehe__mehr .icon {
    width: 14px;
    height: 14px;
}

/* ============================================================
   Anmelden mit Einmalcode (pages/Auth.js)
   ============================================================ */
/* Der Code: groß, mittig, mit Abstand zwischen den Ziffern – man tippt ihn
   aus einer Mail ab. */
.auth-code {
    text-align: center;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    /* Der Abstand hängt auch hinter der letzten Ziffer; so steht der Code trotzdem mittig. */
    padding-left: calc(16px + 0.35em);
    font-variant-numeric: tabular-nums;
    color: var(--gold-light);
}

.auth-code::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

.auth-code-hinweis {
    margin: -6px 0 0;
}

.auth-forgot-link:disabled {
    opacity: 0.55;
    cursor: default;
    text-decoration: none;
}

/* Menü und Menüknopf ohne Bewegung, wer das so eingestellt hat. */
@media (prefers-reduced-motion: reduce) {
    .nav-links,
    .nav-links--open,
    .nav-links .nav-link,
    .nav-mobile-toggle,
    .nav-mobile-toggle__strich {
        transition: none !important;
    }

    .nav-links,
    .nav-links .nav-link {
        transform: none;
    }
}

/* Feed von Hand aktualisieren: oben ziehen (src/ziehenZumAktualisieren.js,
   nur in der installierten App). Die Anzeige wächst mit dem Finger und
   schiebt die Seite vor sich her; --ziehen läuft von 0 bis 1 (Schwelle). */
.ziehen {
    --ziehen: 0;
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -4px;
}

.ziehen--zurueck {
    transition: height 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ziehen__kreis {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 35%, rgba(201, 168, 76, 0.16), rgba(201, 168, 76, 0.04) 70%),
        var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border);
    color: rgba(223, 192, 106, 0.6);
    opacity: var(--ziehen, 0);
    transform: scale(calc(0.6 + 0.4 * var(--ziehen, 0)));
    transition: color 0.15s ease;
}

/* Der Ring: ein Kegelverlauf, auf einen 2px-Rand ausgestanzt. Beim Ziehen
   wächst er mit --ziehen, beim Laden dreht sich ein Viertelbogen. */
.ziehen__kreis::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(var(--gold) calc(var(--ziehen, 0) * 360deg), transparent 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.ziehen__kreis svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.ziehen--bereit .ziehen__kreis {
    color: var(--gold-light);
}

.ziehen--bereit .ziehen__kreis svg {
    transform: scale(1.12);
}

.ziehen--laeuft .ziehen__kreis {
    opacity: 1;
    transform: none;
    color: var(--gold-light);
}

.ziehen--laeuft .ziehen__kreis::before {
    background: conic-gradient(var(--gold) 0 100deg, rgba(201, 168, 76, 0.15) 100deg);
    animation: ziehen-dreht 0.9s linear infinite;
}

@keyframes ziehen-dreht {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ziehen--zurueck { transition: none; }
    .ziehen--laeuft .ziehen__kreis::before { animation-duration: 2.4s; }
}