/* ============================================
   SAMMLUNGEN - Stylesheet
   Light/Dark Mode ueber CSS Custom Properties
   ============================================ */

.sammlungen-liste,
.sammlungen-detail {
    /* Native Steuerelemente (select, Scrollbalken) mitziehen */
    color-scheme: light dark;

    /* Flaechen */
    --sml-surface: #ffffff;
    --sml-surface-muted: #f1f3f5;
    --sml-placeholder: #e9ecef;

    /* Text */
    --sml-text: #212529;
    --sml-text-muted: #495057;
    --sml-text-subtle: #595f66;
    --sml-text-strong: #343a40;

    /* Linien */
    --sml-border: #dee2e6;
    --sml-border-strong: #6c757d;

    /* Interaktion */
    --sml-accent: #0b5ed7;
    --sml-accent-hover: #0a53be;
    --sml-accent-text: #ffffff;
    --sml-link: #0a4fa8;
    --sml-link-hover: #062f66;
    --sml-focus: #0b5ed7;

    /* Sekundaerer Button */
    --sml-button-bg: #e9ecef;
    --sml-button-bg-hover: #dee2e6;
    --sml-button-border: #adb5bd;

    /* Schatten */
    --sml-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --sml-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* --- Dark Mode: Systemeinstellung --- */
@media (prefers-color-scheme: dark) {
    .sammlungen-liste,
    .sammlungen-detail {
        --sml-surface: #1e2126;
        --sml-surface-muted: #272b31;
        --sml-placeholder: #2f343a;

        --sml-text: #e9ecef;
        --sml-text-muted: #b6bdc4;
        --sml-text-subtle: #a8b0b8;
        --sml-text-strong: #dee2e6;

        --sml-border: #3a4046;
        --sml-border-strong: #7d858d;

        --sml-accent: #4d9fff;
        --sml-accent-hover: #77b6ff;
        --sml-accent-text: #0b1220;
        --sml-link: #7ab8ff;
        --sml-link-hover: #a9d2ff;
        --sml-focus: #8ab4f8;

        --sml-button-bg: #2f343a;
        --sml-button-bg-hover: #3a4046;
        --sml-button-border: #5c646c;

        --sml-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        --sml-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.65);
    }
}

/* --- Dark Mode: manueller Schalter der Website --- */
[data-theme='dark'] .sammlungen-liste,
[data-theme='dark'] .sammlungen-detail,
.theme-dark .sammlungen-liste,
.theme-dark .sammlungen-detail {
    color-scheme: dark;

    --sml-surface: #1e2126;
    --sml-surface-muted: #272b31;
    --sml-placeholder: #2f343a;

    --sml-text: #e9ecef;
    --sml-text-muted: #b6bdc4;
    --sml-text-subtle: #a8b0b8;
    --sml-text-strong: #dee2e6;

    --sml-border: #3a4046;
    --sml-border-strong: #7d858d;

    --sml-accent: #4d9fff;
    --sml-accent-hover: #77b6ff;
    --sml-accent-text: #0b1220;
    --sml-link: #7ab8ff;
    --sml-link-hover: #a9d2ff;
    --sml-focus: #8ab4f8;

    --sml-button-bg: #2f343a;
    --sml-button-bg-hover: #3a4046;
    --sml-button-border: #5c646c;

    --sml-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    --sml-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.65);
}

/* --- Light Mode erzwingen, falls die Website es vorgibt --- */
[data-theme='light'] .sammlungen-liste,
[data-theme='light'] .sammlungen-detail,
.theme-light .sammlungen-liste,
.theme-light .sammlungen-detail {
    color-scheme: light;

    --sml-surface: #ffffff;
    --sml-surface-muted: #f1f3f5;
    --sml-placeholder: #e9ecef;

    --sml-text: #212529;
    --sml-text-muted: #495057;
    --sml-text-subtle: #595f66;
    --sml-text-strong: #343a40;

    --sml-border: #dee2e6;
    --sml-border-strong: #6c757d;

    --sml-accent: #0b5ed7;
    --sml-accent-hover: #0a53be;
    --sml-accent-text: #ffffff;
    --sml-link: #0a4fa8;
    --sml-link-hover: #062f66;
    --sml-focus: #0b5ed7;

    --sml-button-bg: #e9ecef;
    --sml-button-bg-hover: #dee2e6;
    --sml-button-border: #adb5bd;

    --sml-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --sml-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.15);
}

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

/* --- Einheitlicher Fokus-Indikator (WCAG 2.4.7 / 2.4.11) --- */
.sammlungen-liste :focus-visible,
.sammlungen-detail :focus-visible {
    outline: 3px solid var(--sml-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Filter --- */
.sammlungen-filter {
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--sml-surface-muted);
    border-radius: 8px;
}

.sammlungen-filter-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sammlungen-filter label {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    color: var(--sml-text);
}

.sammlungen-filter select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--sml-border-strong);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--sml-surface);
    color: var(--sml-text);
    min-height: 44px;
}

.sammlungen-filter-button {
    padding: 0.55rem 1.4rem;
    min-height: 44px;
    border: 1px solid var(--sml-accent);
    border-radius: 6px;
    background: var(--sml-accent);
    color: var(--sml-accent-text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.sammlungen-filter-button:hover {
    background: var(--sml-accent-hover);
    border-color: var(--sml-accent-hover);
}

.sammlungen-result-count {
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    color: var(--sml-text-muted);
}

/* Ausgeblendete Trefferanzahl darf keinen Abstand hinterlassen.
   Diese Regel muss nach .sammlungen-result-count stehen, weil deren
   margin sonst das margin von .sammlungen-sr-only ueberschreibt. */
.sammlungen-result-count.sammlungen-sr-only {
    margin: -1px;
}

/* --- Listenansicht --- */
.sammlungen-liste {
    margin: 2rem 0;
    color: var(--sml-text);
}

.sammlungen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sammlungen-item {
    break-inside: avoid;
}

.sammlungen-item a {
    display: block;
    height: 100%;
    text-decoration: none;
    color: var(--sml-text);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 8px;
    overflow: hidden;
    background: var(--sml-surface);
    box-shadow: var(--sml-shadow);
}

.sammlungen-item a:hover {
    transform: translateY(-4px);
    box-shadow: var(--sml-shadow-hover);
}

.sammlungen-item a:hover .sammlungen-liste-titel {
    text-decoration: underline;
}

.sammlungen-liste-bild {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.sammlungen-liste-placeholder {
    width: 100%;
    height: 300px;
    background: var(--sml-placeholder);
}

.sammlungen-liste-info {
    padding: 1rem 1.2rem 1.2rem;
}

.sammlungen-liste-titel {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--sml-text);
}

.sammlungen-liste-datierung {
    margin: 0;
    font-size: 0.9rem;
    color: var(--sml-text-subtle);
}

/* --- Kachelansicht (Standard) --- */
.sammlungen-grid--grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* --- Listenansicht --- */
.sammlungen-grid--list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.sammlungen-grid--list .sammlungen-item a {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.sammlungen-grid--list .sammlungen-item a:hover {
    /* Seitliche Verschiebung statt Anheben, passt besser zur Zeile */
    transform: translateX(4px);
}

.sammlungen-grid--list .sammlungen-liste-bild,
.sammlungen-grid--list .sammlungen-liste-placeholder {
    flex: 0 0 220px;
    width: 220px;
    height: 165px;
    object-fit: cover;
}

.sammlungen-grid--list .sammlungen-liste-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 1.4rem;
}

.sammlungen-grid--list .sammlungen-liste-titel {
    font-size: 1.25rem;
    margin-bottom: 0.35rem;
}

@media (max-width: 600px) {
    .sammlungen-grid--list .sammlungen-item a {
        flex-direction: column;
    }

    .sammlungen-grid--list .sammlungen-liste-bild,
    .sammlungen-grid--list .sammlungen-liste-placeholder {
        flex: 0 0 auto;
        width: 100%;
        height: 220px;
    }
}

.sammlungen-no-items {
    padding: 2rem;
    text-align: center;
    color: var(--sml-text-muted);
}

/* --- Detailansicht --- */
.sammlungen-detail {
    max-width: 1200px;
    margin: 2rem auto;
    color: var(--sml-text);
}

.sammlungen-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    margin-bottom: 2rem;
}

.sammlungen-detail-layout--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 800px;
}

.sammlungen-detail-media {
    position: sticky;
    top: 1.5rem;
    min-width: 0;
}

.sammlungen-detail-content {
    min-width: 0;
}

.sammlungen-detail-titel {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--sml-text);
}

/* --- Galerie / Slider --- */
.sammlungen-gallery {
    min-width: 0;
}

.sammlungen-gallery-figure {
    margin: 0;
}

.sammlungen-gallery-zoom {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: 8px;
    overflow: hidden;
}

.sammlungen-gallery-bild {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.sammlungen-gallery-bildtext {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: var(--sml-text-muted);
}

/* Swiper-Grundlayout – das globale swiper.min.css ist eine reduzierte
   Custom-Version nur für den Mask-Slider (position:absolute, keine
   Wrapper-Flex-Regeln, keine Pfeil-Icons). Hier werden die fehlenden
   Swiper-5-Basisregeln für unseren Slider nachgeliefert. */
.sammlungen-slider.swiper-container {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 8px;
}

.sammlungen-slider .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    box-sizing: content-box;
}

.sammlungen-slider .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

.sammlungen-slider .swiper-button-prev,
.sammlungen-slider .swiper-button-next {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sml-surface);
    color: var(--sml-text);
    box-shadow: var(--sml-shadow);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.sammlungen-slider .swiper-button-prev::after,
.sammlungen-slider .swiper-button-next::after {
    font-family: swiper-icons;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
}

.sammlungen-slider .swiper-button-prev::after {
    content: 'prev';
}

.sammlungen-slider .swiper-button-next::after {
    content: 'next';
}

.sammlungen-slider .swiper-button-prev {
    left: 10px;
}

.sammlungen-slider .swiper-button-next {
    right: 10px;
}

.sammlungen-slider .swiper-pagination {
    position: static;
    margin-top: 0.75rem;
}

.sammlungen-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--sml-border-strong);
    opacity: 1;
}

.sammlungen-slider .swiper-pagination-bullet-active {
    background: var(--sml-accent);
}

/* --- Lightbox --- */
.sammlungen-lightbox {
    /* Das Dialog-Element haengt an <body>, erbt also keine Variablen
       aus dem Plugin-Container und definiert sie hier erneut. */
    --sml-surface: #ffffff;
    --sml-text: #212529;
    --sml-text-muted: #495057;
    --sml-button-bg-hover: #dee2e6;
    --sml-button-border: #adb5bd;
    --sml-focus: #0b5ed7;

    width: min(96vw, 1400px);
    max-width: none;
    max-height: 94vh;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--sml-surface);
    color: var(--sml-text);
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    .sammlungen-lightbox {
        --sml-surface: #1e2126;
        --sml-text: #e9ecef;
        --sml-text-muted: #b6bdc4;
        --sml-button-bg-hover: #3a4046;
        --sml-button-border: #5c646c;
        --sml-focus: #8ab4f8;
    }
}

[data-theme='dark'] .sammlungen-lightbox,
.theme-dark .sammlungen-lightbox {
    --sml-surface: #1e2126;
    --sml-text: #e9ecef;
    --sml-text-muted: #b6bdc4;
    --sml-button-bg-hover: #3a4046;
    --sml-button-border: #5c646c;
    --sml-focus: #8ab4f8;

    color-scheme: dark;
}

.sammlungen-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.85);
}

.sammlungen-lightbox-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.sammlungen-lightbox-figure {
    margin: 0;
    text-align: center;
}

.sammlungen-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    margin: 0 auto;
    border-radius: 6px;
}

.sammlungen-lightbox-caption {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    color: var(--sml-text-muted, #495057);
}

.sammlungen-lightbox-counter {
    margin: 0.75rem 0 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--sml-text-muted, #495057);
}

.sammlungen-lightbox button {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--sml-button-border, #adb5bd);
    border-radius: 50%;
    background: var(--sml-surface, #fff);
    color: var(--sml-text, #212529);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.sammlungen-lightbox button:hover {
    background: var(--sml-button-bg-hover, #dee2e6);
}

.sammlungen-lightbox button:focus-visible {
    outline: 3px solid var(--sml-focus, #0b5ed7);
    outline-offset: 2px;
}

.sammlungen-lightbox-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
}

.sammlungen-lightbox-close::before {
    content: '\00d7';
}

.sammlungen-lightbox-prev,
.sammlungen-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.sammlungen-lightbox-prev {
    left: 0.75rem;
}

.sammlungen-lightbox-next {
    right: 0.75rem;
}

.sammlungen-lightbox-prev::before {
    content: '\2039';
}

.sammlungen-lightbox-next::before {
    content: '\203a';
}

.sammlungen-lightbox [hidden] {
    display: none;
}

/* --- Metadaten --- */
.sammlungen-detail-meta {
    margin: 0 0 2rem;
    padding: 1.5rem;
    background: var(--sml-surface-muted);
    border-radius: 8px;
}

.sammlungen-detail-meta-row {
    display: flex;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--sml-border);
}

.sammlungen-detail-meta-row:last-child {
    border-bottom: none;
}

.sammlungen-detail-meta-label {
    flex: 0 0 180px;
    margin: 0;
    font-weight: 600;
    color: var(--sml-text-strong);
}

.sammlungen-detail-meta-value {
    flex: 1;
    margin: 0;
    color: var(--sml-text);
}

.sammlungen-detail-text {
    margin-bottom: 2rem;
    line-height: 1.7;
    font-size: 1rem;
    color: var(--sml-text);
}

.sammlungen-detail-text p {
    margin-bottom: 1rem;
}

.sammlungen-detail-text a {
    color: var(--sml-link);
}

.sammlungen-detail-links {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--sml-surface-muted);
    border-radius: 8px;
}

.sammlungen-detail-links h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--sml-text);
}

.sammlungen-detail-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sammlungen-detail-links li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--sml-border);
}

.sammlungen-detail-links li:last-child {
    border-bottom: none;
}

.sammlungen-detail-links a {
    color: var(--sml-link);
    text-decoration: underline;
    word-break: break-word;
}

.sammlungen-detail-links a:hover {
    color: var(--sml-link-hover);
}

.sammlungen-detail-back {
    display: inline-block;
    min-height: 44px;
    padding: 0.7rem 1.2rem;
    background: var(--sml-button-bg);
    border: 1px solid var(--sml-button-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--sml-text);
    font-weight: 600;
    transition: background 0.2s ease;
}

.sammlungen-detail-back:hover {
    background: var(--sml-button-bg-hover);
    text-decoration: underline;
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .sammlungen-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .sammlungen-liste-bild,
    .sammlungen-liste-placeholder {
        height: 220px;
    }

    .sammlungen-detail-titel {
        font-size: 1.5rem;
    }

    .sammlungen-detail-meta-label {
        flex: 0 0 130px;
    }

    .sammlungen-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .sammlungen-detail-meta-row {
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .sammlungen-detail-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }

    .sammlungen-detail-media {
        position: static;
    }
}

/* --- Bewegung reduzieren (WCAG 2.3.3) --- */
@media (prefers-reduced-motion: reduce) {
    .sammlungen-item a,
    .sammlungen-detail-back {
        transition: none;
    }

    .sammlungen-item a:hover,
    .sammlungen-grid--list .sammlungen-item a:hover {
        transform: none;
    }

    .sammlungen-slider .swiper-wrapper {
        transition-duration: 0ms !important;
    }
}

/* --- Hoher Kontrast / Windows-Kontrastmodus --- */
@media (forced-colors: active) {
    .sammlungen-item a {
        border: 1px solid CanvasText;
    }

    .sammlungen-liste :focus-visible,
    .sammlungen-detail :focus-visible {
        outline: 3px solid CanvasText;
    }
}