@font-face {
    font-family: 'Nantes-Bold';
    src: url('../fonts/NantesWeb-Bold.woff2') format('woff2');
}

/* ── Professional reference / sources list ──────────────────────────── */
.cbdd-references {
    margin: 1.5rem 0 2rem;
    padding: 1.25rem 1.5rem 1.25rem 2.5rem;
    background: #f8f9fa;
    border-left: 4px solid #1a73a7;
    border-radius: 0 6px 6px 0;
    font-size: 0.88rem;
    line-height: 1.65;
    color: #333;
}
.cbdd-references ol {
    margin: 0;
    padding: 0;
    list-style-position: outside;
    counter-reset: ref-counter;
    list-style: none;
}
.cbdd-references ol li {
    counter-increment: ref-counter;
    position: relative;
    padding: 0.35rem 0 0.35rem 2.2rem;
    border-bottom: 1px solid #e9ecef;
    text-align: justify;
    hyphens: auto;
}
.cbdd-references ol li:last-child {
    border-bottom: none;
}
.cbdd-references ol li::before {
    content: "[" counter(ref-counter) "]";
    position: absolute;
    left: 0;
    font-weight: 600;
    color: #1a73a7;
    min-width: 2rem;
}
.cbdd-references ol li a {
    color: #1a73a7;
    text-decoration: none;
    border-bottom: 1px dotted #1a73a7;
}
.cbdd-references ol li a:hover {
    color: #0d4f73;
    border-bottom-style: solid;
}

#body hr {
    margin: 6rem 0;
}

.tile {
    position: relative;
    margin: 2rem 0 0 0;
    padding: 2rem 2rem 0.5rem 2rem;
    color: black;
    background: #d3efe6;
}

figure {
    margin: 0;
    padding: 0;
    width: 100%;
}

figure img {
    margin-bottom: 0 !important;
}

.n4c-border-black {
    outline: 1px solid #333;
}

.language-shmarql {
    margin-bottom: 3rem;
}

.language-shmarql p {
    display: none;
}

.language-shmarql table {
    font-size: smaller;
}

.paginate_button {
    border-bottom: none !important;
}

td.code {
    position: relative;
}

.execute {
    position: absolute;
    top: 0.8rem;
    right: 3rem;
    border: none !important;
}

.execute svg:hover path {
    fill: #82d8bc;
}

.code .copy-to-clipboard {
    right: 8px;
    top: 0.7rem;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #000;
    border-radius: 0;
}

.paginate_button {
    background: none !important;
    border: none !important;
    border-bottom: 1px solid #82d8bc !important;
    border-radius: 0 !important;
    color: #0c0c0c !important;
    margin-right: 5px;
    padding: 5px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #82d8bc !important;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border: none;
}

details.plain {
    background: none !important;
    padding: 0 !important;
    margin: 0 0 2rem 0 !important;
}

details.plain summary {
    padding: 1rem;
    border: 1px solid #333;
}

/* =============================================================================
   DuckDB WASM Interactive Components
   ============================================================================= */

/* Loading states */
.duckdb-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 1rem 0;
}

.duckdb-loading::before {
    content: '';
    width: 24px;
    height: 24px;
    border: 3px solid #3498db;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

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

/* Error and no-data states */
.duckdb-error,
.error {
    padding: 1rem;
    background: #fee;
    border: 1px solid #c00;
    border-radius: 4px;
    color: #900;
    margin: 1rem 0;
}

.no-data {
    padding: 1rem;
    background: #fff8e1;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    margin: 1rem 0;
}

/* Interactive query containers */
.duckdb-query {
    margin: 2rem 0;
    padding: 1rem;
    border: 1px solid #333;
    background: #fafafa;
}

.duckdb-query .query-editor {
    width: 100%;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
    padding: 10px;
    border: 1px solid #ccc;
    background: #1e1e1e;
    color: #d4d4d4;
    min-height: 100px;
    resize: vertical;
}

.duckdb-query .run-query {
    margin-top: 10px;
    padding: 8px 20px;
    background: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

.duckdb-query .run-query:hover {
    background: #2980b9;
}

.duckdb-query .run-query:disabled {
    background: #95a5a6;
    cursor: not-allowed;
}

.duckdb-query .query-result {
    margin-top: 1rem;
}

/* Chart containers */
.baroque-chart {
    width: 100%;
    min-height: 400px;
    margin: 2rem 0;
    border: 1px solid #ddd;
}

.baroque-chart.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
}

/* Map containers */
.baroque-map {
    width: 100%;
    height: 500px;
    margin: 2rem 0;
    border: 1px solid #333;
}

/* Painter biography cards */
.painter-card {
    border: 2px solid #333;
    border-radius: 10px;
    padding: 20px;
    margin: 2rem 0;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
}

.painter-card h2 {
    margin-top: 0;
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

.painter-card h3 {
    margin-top: 15px;
    margin-bottom: 10px;
}

.painter-card table {
    width: 100%;
    border-collapse: collapse;
}

.painter-card table td {
    padding: 5px 10px 5px 0;
    vertical-align: top;
}

.painter-card ul {
    margin: 0;
    padding-left: 20px;
}

/* Data source indicators */
.source-cbdd {
    color: #3498db;
}

.source-bildindex {
    color: #e67e22;
}

/* Progress bar for database loading */
.db-progress {
    width: 100%;
    height: 20px;
    background: #eee;
    border-radius: 10px;
    overflow: hidden;
    margin: 1rem 0;
}

.db-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2ecc71);
    transition: width 0.3s ease;
}

.db-progress-text {
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
}

/* Interactive controls */
.baroque-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.baroque-controls select,
.baroque-controls input {
    padding: 8px 12px;
    border: 1px solid #333;
    background: white;
    font-size: 14px;
}

.baroque-controls button {
    padding: 8px 16px;
    background: #82d8bc;
    border: 1px solid #333;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

.baroque-controls button:hover {
    background: #6bc4a8;
}

/* Timeline visualization */
.painter-timeline {
    position: relative;
    padding: 20px 0;
    margin: 2rem 0;
}

.timeline-axis {
    height: 2px;
    background: #333;
    position: relative;
}

.timeline-event {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #3498db;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    cursor: pointer;
    transition: transform 0.2s;
}

.timeline-event:hover {
    transform: translateX(-50%) translateY(-50%) scale(1.3);
}

.timeline-event.painting {
    background: #3498db;
}

.timeline-event.life {
    background: #e74c3c;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .painter-card > div {
        grid-template-columns: 1fr !important;
    }
    
    .baroque-controls {
        flex-direction: column;
    }
    
    .baroque-map {
        height: 350px;
    }
}

/* =============================================================================
   Painter Gallery — clickable cards with detail panel
   ============================================================================= */
.pg-gallery__grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;
}
.pg-gallery__card{
    border:1px solid #ddd;border-radius:10px;overflow:hidden;
    background:#fafafa;cursor:pointer;
    transition:transform .2s,box-shadow .2s;
}
.pg-gallery__card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    border-color:#aaa;
}
.pg-gallery__img-wrap{
    position:relative;overflow:hidden;height:180px;
}
.pg-gallery__img-wrap img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .3s;
}
.pg-gallery__card:hover .pg-gallery__img-wrap img{
    transform:scale(1.05);
}
.pg-gallery__overlay{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(44,62,80,.55);color:#fff;
    font-weight:700;font-size:.85rem;opacity:0;
    transition:opacity .25s;
}
.pg-gallery__card:hover .pg-gallery__overlay{opacity:1}
.pg-gallery__caption{
    padding:10px 12px;font-size:.85rem;line-height:1.4;
}
.pg-gallery__meta{color:#666;font-size:.82rem}

/* Detail panel */
.pg-gallery__detail{
    margin-top:1rem;animation:topicFadeIn .35s ease;
}
.pg-gallery__detail-card{
    position:relative;margin:0;border:2px solid #3498db;
    border-radius:12px;overflow:hidden;background:#f7fbff;
    box-shadow:0 6px 24px rgba(52,152,219,.12);
}
.pg-gallery__detail-close{
    position:absolute;top:10px;right:12px;z-index:2;
    width:30px;height:30px;border-radius:50%;
    border:none;background:rgba(0,0,0,.55);color:#fff;
    font-size:1rem;cursor:pointer;display:flex;
    align-items:center;justify-content:center;
    transition:background .2s;
}
.pg-gallery__detail-close:hover{background:rgba(0,0,0,.8)}
.pg-gallery__detail-body{
    display:grid;grid-template-columns:1fr 1fr;min-height:260px;
}
@media(max-width:700px){.pg-gallery__detail-body{grid-template-columns:1fr}}
.pg-gallery__detail-img img{
    width:100%;height:100%;object-fit:cover;
}
.pg-gallery__detail-info{
    padding:18px 20px;font-size:.9rem;line-height:1.6;color:#444;
}
.pg-gallery__detail-meta div{margin-bottom:4px}
.pg-gallery__detail-link{
    display:inline-block;margin-top:12px;padding:6px 16px;
    border-radius:20px;border:2px solid #3498db;
    color:#3498db;font-weight:700;font-size:.82rem;
    text-decoration:none;transition:background .2s,color .2s;
}
.pg-gallery__detail-link:hover{background:#3498db;color:#fff}

/* =============================================================================
   Topic Selector
   ============================================================================= */
.topic-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:2.5rem 0 1rem}
@media(max-width:840px){.topic-selector{grid-template-columns:1fr}}

.topic-card{
    position:relative;overflow:hidden;border-radius:14px;
    padding:2.2rem 1.8rem 1.8rem;cursor:pointer;
    transition:transform .25s,box-shadow .25s;
    display:flex;flex-direction:column;align-items:center;text-align:center;
    border:2px solid transparent;min-height:220px;
}
.topic-card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(0,0,0,.18)}

.topic-card .topic-icon{font-size:3rem;margin-bottom:.6rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.topic-card .topic-title{font-family:'Nantes-Bold',serif;font-size:1.35rem;margin-bottom:.55rem;letter-spacing:.02em}
.topic-card .topic-desc{font-size:.88rem;line-height:1.45;opacity:.92}
.topic-card .topic-enter{
    margin-top:auto;padding:.45rem 1.4rem;border-radius:20px;
    font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    border:2px solid currentColor;background:transparent;cursor:pointer;
    transition:background .2s,color .2s;margin-top:1rem;
}
.topic-card:hover .topic-enter{background:rgba(255,255,255,.25)}

/* Card colour themes */
.topic-card--church{
    background:linear-gradient(135deg,#b8860b 0%,#daa520 50%,#c9920e 100%);
    color:#fff;border-color:#a07610;
}
.topic-card--society{
    background:linear-gradient(135deg,#1a6b52 0%,#2e9e7a 50%,#1e8265 100%);
    color:#fff;border-color:#14503e;
}
.topic-card--mythology{
    background:linear-gradient(135deg,#4a2d7a 0%,#6c3fad 50%,#5a3595 100%);
    color:#fff;border-color:#3d2466;
}

/* Deep-dive wrapper (hidden by default) */
.micro-topic{display:none;animation:topicFadeIn .45s ease}
@keyframes topicFadeIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Back-to-topics banner */
.topic-back-bar{
    position:sticky;top:0;z-index:100;
    display:flex;align-items:center;gap:.7rem;
    padding:.65rem 1.2rem;border-radius:0 0 10px 10px;
    font-weight:700;font-size:.88rem;cursor:pointer;
    transition:opacity .2s;margin-bottom:1.5rem;
    border:none;width:100%;text-align:left;
}
.topic-back-bar:hover{opacity:.85}
.topic-back-bar .back-arrow{font-size:1.1rem}

.topic-back-bar--church{background:#daa520;color:#fff}
.topic-back-bar--society{background:#2e9e7a;color:#fff}
.topic-back-bar--mythology{background:#6c3fad;color:#fff}

/* Colour accent bar at top of each deep-dive */
.micro-topic--church{border-top:5px solid #daa520}
.micro-topic--society{border-top:5px solid #2e9e7a}
.micro-topic--mythology{border-top:5px solid #6c3fad}

/* =============================================================================
   Religion Micro Dashboard (ICONCLASS 10–14)
   ============================================================================= */
.rel-wrap{ margin: 10px 0 26px; }
.rel-header{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:14px; margin-bottom: 10px;
}
.rel-title{ font-weight:800; font-size:18px; line-height:1.2; }
.rel-sub{ font-weight:600; font-size:13px; opacity:.65; margin-left:8px; }

.rel-controls{ display:flex; align-items:center; gap:8px; }
.rel-label{ font-size:13px; opacity:.7; }
.rel-select{
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 14px;
    background: white;
}

.rel-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 14px; }
.rel-tab{
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 13px;
    background: rgba(255,255,255,.92);
    cursor:pointer;
    user-select:none;
    transition: transform .05s ease, box-shadow .12s ease, border-color .12s ease;
}
.rel-tab:hover{ box-shadow: 0 8px 18px rgba(0,0,0,.06); border-color: rgba(0,0,0,.22); }
.rel-tab:active{ transform: scale(.99); }
.rel-tab.is-active{
    border-color: rgba(20,110,200,.55);
    box-shadow: 0 10px 22px rgba(20,110,200,.12);
}

.rel-card{
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
    padding: 14px;
}
.rel-card-title{ font-weight:800; margin-bottom:10px; }
.rel-corewide{ width:100%; margin-bottom: 14px; }

.rel-grid-2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

.rel-table{ width:100%; border-collapse: collapse; font-size: 14px; }
.rel-table th{
    text-align:left;
    font-size: 12.5px;
    letter-spacing:.01em;
    opacity:.65;
    border-bottom: 1px solid rgba(0,0,0,.10);
    padding: 8px 4px;
}
.rel-table td{ padding: 10px 4px; border-bottom: 1px solid rgba(0,0,0,.06); }
.rel-note{ margin-top: 10px; font-size: 12.5px; opacity: .65; }
.rel-hint{ margin-top: 6px; font-size: 12.5px; opacity: .65; }

@media (max-width: 980px){
    .rel-grid-2{ grid-template-columns: 1fr; }
}

/* =============================================================================
   Rittersaal Interactive Viewer
   ============================================================================= */
/* Overview strip */
.rs-overview{
    max-width:1100px;
    margin: 10px auto 18px auto;
}
.rs-overview-title{
    font-size:16px;
    margin:0 0 10px 0;
    opacity:.85;
}
.rs-overview-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
}
.rs-tile{
    position:relative;
    border-radius:10px;
    overflow:hidden;
    cursor:pointer;
    border:1px solid rgba(0,0,0,0.15);
    box-shadow:0 6px 18px rgba(0,0,0,0.12);
    background:#111;
}
.rs-tile img{
    width:100%;
    height:180px;
    object-fit:cover;
    display:block;
    opacity:.95;
    transition:.2s;
}
.rs-tile:hover img{
    transform:scale(1.02);
    opacity:1;
}
.rs-tile-label{
    position:absolute;
    left:10px;
    bottom:10px;
    background:rgba(0,0,0,0.65);
    color:white;
    padding:7px 12px;
    border-radius:10px;
    font-size:14px;
    line-height:1.2;
    backdrop-filter: blur(4px);
}

/* Rittersaal interactive wrapper */
.rittersaal-wrapper{
    position:relative;
    max-width:1100px;
    margin:auto;
}

.rittersaal-img{
    width:100%;
    height:auto;
    display:block;
    border-radius:10px;
}

/* Hotspots (base) */
.hotspot{
    position:absolute;
    border:2px solid rgba(255,255,255,0.95);
    background:rgba(255,255,255,0.18);
    cursor:pointer;
    transition:.2s;
    display:none;
}
.hotspot:hover{
    transform:scale(1.05);
}

/* Hotspot colours by category */
/* Mammal hunting = Orange */
.hotspot.mammal{
    background:rgba(255,165,0,0.22);
    border-color:rgba(255,165,0,0.95);
}
.hotspot.mammal:hover{
    background:rgba(255,165,0,0.45);
}

/* Bird hunting = White */
.hotspot.bird{
    background:rgba(255,255,255,0.18);
    border-color:rgba(255,255,255,0.95);
}
.hotspot.bird:hover{
    background:rgba(255,255,255,0.38);
}

/* Fishing = Blue */
.hotspot.fish{
    background:rgba(0,170,255,0.20);
    border-color:rgba(0,170,255,0.95);
}
.hotspot.fish:hover{
    background:rgba(0,170,255,0.42);
}

/* Navigation buttons */
.navbtn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.5);
    color:white;
    border:none;
    font-size:28px;
    padding:10px 16px;
    cursor:pointer;
    z-index:10;
}
.prev{left:10px;}
.next{right:10px;}

/* Legend */
.legend{
    position:absolute;
    top:14px;
    right:14px;
    background:rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    border-radius:8px;
    padding:10px 14px;
    color:white;
    font-size:14px;
    line-height:1.6;
    box-shadow:0 0 20px rgba(0,0,0,0.4);
    z-index:11;
}
.legend-title{
    font-weight:bold;
    margin-bottom:6px;
    font-size:15px;
}
.legend-item{
    display:flex;
    align-items:center;
    gap:8px;
}
.legend-color{
    width:14px;
    height:14px;
    border-radius:3px;
    border:2px solid white;
}
.legend-mammal{ background:rgba(255,165,0,0.7); }
.legend-bird{   background:rgba(255,255,255,0.7); }
.legend-fish{   background:rgba(0,170,255,0.7); }

/* Popup overlay */
.popup{
    display:none;
    position:fixed;
    z-index:9999;
    left:0; top:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.9);
    align-items:center;
    justify-content:center;
}

.popup-box{
    display:flex;
    gap:40px;
    max-width:1200px;
    padding:30px;
    align-items:flex-start;
}

.popup img{
    max-width:600px;
    max-height:80vh;
    border-radius:8px;
    box-shadow:0 0 40px black;
}

.popup-text{
    color:white;
    max-width:450px;
    font-size:17px;
    line-height:1.5;
}

.popup-text h2{
    color:white;
    margin-top:0;
    font-size:26px;
}

/* Responsive: overview tiles stack on mobile */
@media (max-width: 900px){
    .rs-overview-grid{ grid-template-columns: 1fr; }
    .rs-tile img{ height:210px; }
}

/* =============================================================================
   Leutenberg Battle Hall Cards & Lightbox
   ============================================================================= */
.cbdd-grid-2x2{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:26px;
    margin:22px 0 34px;
}
@media (max-width: 900px){
    .cbdd-grid-2x2{ grid-template-columns: 1fr; }
}

.cbdd-card{
    background:#fffdf6;
    border:1px solid #e6d8a8;
    border-radius:14px;
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease;
}
.cbdd-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.cbdd-imgbtn{
    padding:0;
    border:0;
    background:transparent;
    width:100%;
    cursor:pointer;
    display:block;
}
.cbdd-imgbtn img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
}

.cbdd-body{ padding:14px 16px 18px; }
.cbdd-title{
    font-weight:650;
    font-size:16px;
    margin:0 0 8px;
}

.cbdd-metaLine{
    font-size:13px;
    line-height:1.35;
    opacity:.85;
    margin:0 0 10px;
}
.cbdd-metaLine strong{ font-weight:650; opacity:.95; }
.cbdd-metaLine + .cbdd-metaLine{ margin-top:-6px; }

.cbdd-desc{
    font-size:14px;
    line-height:1.45;
    opacity:.92;
    margin:0;
}

.cbdd-meta{
    margin-top:10px;
    font-size:13px;
    opacity:.85;
}
.cbdd-meta a{
    text-decoration:underline;
    color:inherit;
}

/* Lightbox */
.cbdd-lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.72);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:22px;
}
.cbdd-lightbox.is-open{ display:flex; }

.cbdd-lightbox__panel{
    position:relative;
    max-width:min(1100px, 96vw);
    max-height:92vh;
}
.cbdd-lightbox__img{
    display:block;
    max-width:100%;
    max-height:92vh;
    border-radius:12px;
    box-shadow:0 18px 50px rgba(0,0,0,.35);
    background:#111;
}
.cbdd-lightbox__cap{
    margin-top:10px;
    color:#fff;
    font-size:14px;
    line-height:1.35;
    opacity:.92;
}
.cbdd-lightbox__close{
    position:absolute;
    top:-10px;
    right:-10px;
    width:40px;
    height:40px;
    border-radius:999px;
    border:0;
    cursor:pointer;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    font-size:18px;
}

/* =============================================================================
   Religion Dashboard Gallery (clickable cards + shuffle + detail panel)
   ============================================================================= */
.rel-gallery__toolbar{
    display:flex;justify-content:flex-end;margin-bottom:.6rem;
}
.rel-gallery__shuffle{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 16px;border-radius:20px;
    border:2px solid #1a73a7;background:transparent;color:#1a73a7;
    font-weight:700;font-size:.82rem;cursor:pointer;
    transition:background .2s,color .2s;
}
.rel-gallery__shuffle:hover{background:#1a73a7;color:#fff}
@keyframes relSpin{to{transform:rotate(360deg)}}
.rel-gallery__shuffle-icon{font-size:1.1rem;display:inline-block}

.rel-gallery__grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;
}
@media(max-width:600px){.rel-gallery__grid{grid-template-columns:1fr}}

.rel-gallery__card{
    border-radius:12px;overflow:hidden;cursor:pointer;
    border:2px solid rgba(26,115,167,.2);
    transition:transform .2s,box-shadow .2s;
    background:#f7fbff;
}
.rel-gallery__card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(26,115,167,.18);
    border-color:rgba(26,115,167,.5);
}
.rel-gallery__img-wrap{
    position:relative;overflow:hidden;height:180px;
}
.rel-gallery__img-wrap img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .35s;
}
.rel-gallery__card:hover .rel-gallery__img-wrap img{
    transform:scale(1.05);
}
.rel-gallery__overlay{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(20,85,125,.55);color:#fff;
    font-weight:700;font-size:.85rem;opacity:0;
    transition:opacity .25s;
}
.rel-gallery__card:hover .rel-gallery__overlay{opacity:1}
.rel-gallery__caption{
    padding:10px 12px;font-size:.85rem;line-height:1.4;
}
.rel-gallery__meta{color:#666;font-size:.82rem}

/* Religion detail card */
.rel-gallery__detail{
    margin-top:1rem;animation:topicFadeIn .35s ease;
}
.rel-gallery__detail-card{
    position:relative;margin:0;border:2px solid #1a73a7;
    border-radius:12px;overflow:hidden;background:#f7fbff;
    box-shadow:0 6px 24px rgba(26,115,167,.12);
}
.rel-gallery__detail-close{
    position:absolute;top:10px;right:12px;z-index:2;
    width:30px;height:30px;border-radius:50%;
    border:none;background:rgba(0,0,0,.55);color:#fff;
    font-size:1rem;cursor:pointer;display:flex;
    align-items:center;justify-content:center;
    transition:background .2s;
}
.rel-gallery__detail-close:hover{background:rgba(0,0,0,.8)}
.rel-gallery__detail-body{
    display:grid;grid-template-columns:1fr 1fr;min-height:260px;
}
@media(max-width:700px){.rel-gallery__detail-body{grid-template-columns:1fr}}
.rel-gallery__detail-img img{
    width:100%;height:100%;object-fit:cover;
}
.rel-gallery__detail-info{
    padding:18px 20px;font-size:.9rem;line-height:1.6;color:#444;
}
.rel-gallery__detail-meta div{margin-bottom:4px}
.rel-gallery__detail-link{
    display:inline-block;margin-top:12px;padding:6px 16px;
    border-radius:20px;border:2px solid #1a73a7;
    color:#1a73a7;font-weight:700;font-size:.82rem;
    text-decoration:none;transition:background .2s,color .2s;
}
.rel-gallery__detail-link:hover{background:#1a73a7;color:#fff}

/* =============================================================================
   Mythology Intro Gallery
   ============================================================================= */
.myth-intro__toolbar{
    display:flex;justify-content:flex-end;margin-bottom:.6rem;
}
.myth-intro__refresh{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 16px;border-radius:20px;
    border:2px solid #6c3fad;background:transparent;color:#6c3fad;
    font-weight:700;font-size:.82rem;cursor:pointer;
    transition:background .2s,color .2s;
}
.myth-intro__refresh:hover{background:#6c3fad;color:#fff}
@keyframes mythSpin{to{transform:rotate(360deg)}}
.myth-intro__refresh-icon{font-size:1.1rem;display:inline-block}

.myth-intro__grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
}
@media(max-width:840px){.myth-intro__grid{grid-template-columns:1fr}}

.myth-intro__card{
    border-radius:12px;overflow:hidden;cursor:pointer;
    border:2px solid rgba(108,63,173,.25);
    transition:transform .2s,box-shadow .2s;
    background:#faf8ff;
}
.myth-intro__card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(108,63,173,.18);
    border-color:rgba(108,63,173,.5);
}
.myth-intro__img-wrap{
    position:relative;overflow:hidden;height:210px;
}
.myth-intro__img-wrap img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .35s;
}
.myth-intro__card:hover .myth-intro__img-wrap img{
    transform:scale(1.05);
}
.myth-intro__overlay{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(74,45,122,.55);color:#fff;
    font-weight:700;font-size:.85rem;opacity:0;
    transition:opacity .25s;
}
.myth-intro__card:hover .myth-intro__overlay{opacity:1}
.myth-intro__caption{
    padding:10px 12px;font-size:.85rem;line-height:1.4;
}
.myth-intro__meta{color:#666;font-size:.82rem}

/* Mythology detail card */
.myth-intro__detail{
    margin-top:1rem;animation:topicFadeIn .35s ease;
}
.myth-intro__detail-card{
    position:relative;margin:0;border:2px solid #6c3fad;
    border-radius:12px;overflow:hidden;background:#faf8ff;
    box-shadow:0 6px 24px rgba(108,63,173,.12);
}
.myth-intro__detail-close{
    position:absolute;top:10px;right:12px;z-index:2;
    width:30px;height:30px;border-radius:50%;
    border:none;background:rgba(0,0,0,.55);color:#fff;
    font-size:1rem;cursor:pointer;display:flex;
    align-items:center;justify-content:center;
    transition:background .2s;
}
.myth-intro__detail-close:hover{background:rgba(0,0,0,.8)}
.myth-intro__detail-body{
    display:grid;grid-template-columns:1fr 1fr;min-height:260px;
}
@media(max-width:700px){.myth-intro__detail-body{grid-template-columns:1fr}}
.myth-intro__detail-img img{
    width:100%;height:100%;object-fit:cover;
}
.myth-intro__detail-info{
    padding:18px 20px;font-size:.9rem;line-height:1.6;color:#444;
}
.myth-intro__detail-meta div{margin-bottom:4px}
.myth-intro__detail-link{
    display:inline-block;margin-top:12px;padding:6px 16px;
    border-radius:20px;border:2px solid #6c3fad;
    color:#6c3fad;font-weight:700;font-size:.82rem;
    text-decoration:none;transition:background .2s,color .2s;
}
.myth-intro__detail-link:hover{background:#6c3fad;color:#fff}

/* =============================================================================
   Painter Explorer & Painter Links
   ============================================================================= */
.painter-link {
    color: #3498db;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
}
.painter-link:hover {
    color: #2980b9;
    text-decoration-style: solid;
}

/* =============================================================================
   Image Figure — centred image with caption (reusable)
   ============================================================================= */
.cbdd-figure{
    text-align:center;
    margin:30px 0;
}
.cbdd-figure img{
    max-width:900px;
    width:100%;
    border-radius:10px;
}
.cbdd-figure__caption{
    font-size:14px;
    opacity:0.7;
    margin-top:8px;
}

/* =============================================================================
   Asamkirche — Turkish War Image Carousel
   ============================================================================= */
.turk-carousel{
    max-width:900px;
    margin:40px auto;
    text-align:center;
}
.turk-frame{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.turk-frame img{
    width:100%;
    display:block;
}
.turk-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,.55);
    color:white;
    border:none;
    width:46px;
    height:46px;
    border-radius:50%;
    cursor:pointer;
    font-size:20px;
    transition:.2s;
}
.turk-btn:hover{
    background:rgba(0,0,0,.8);
}
.turk-prev{ left:14px; }
.turk-next{ right:14px; }
.turk-meta{
    margin-top:14px;
    font-size:14px;
    opacity:.8;
    line-height:1.5;
}

/* =============================================================================
   Weikersheim — Siege Scenes Gallery
   ============================================================================= */
.wk-gallery{
    background:#fffdf6;
    border:1px solid #e6d8a8;
    border-radius:16px;
    padding:18px;
    margin:18px 0 30px;
}
.wk-top{
    display:flex;
    gap:14px;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:12px;
}
.wk-title{
    margin:0;
    font-size:18px;
    font-weight:700;
}
.wk-sub{
    margin:6px 0 0;
    font-size:13.5px;
    opacity:.85;
    line-height:1.35;
    max-width:80ch;
}
.wk-stage{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    background:#f5f1e3;
    border:1px solid rgba(0,0,0,.06);
}
.wk-stage a{
    display:block;
    line-height:0;
}
.wk-img{
    width:100%;
    height:min(520px, 62vh);
    object-fit:contain;
    display:block;
    background:#f5f1e3;
}
.wk-navBtn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    border:none;
    width:44px;
    height:44px;
    border-radius:999px;
    background:rgba(0,0,0,.55);
    color:#fff;
    cursor:pointer;
    display:grid;
    place-items:center;
    font-size:22px;
    transition:background .15s ease, transform .15s ease;
    z-index:2;
}
.wk-navBtn:hover{ background:rgba(0,0,0,.70); }
.wk-navBtn:active{ transform:translateY(-50%) scale(.98); }
.wk-prev{ left:12px; }
.wk-next{ right:12px; }
.wk-counter{
    position:absolute;
    bottom:10px;
    right:12px;
    font-size:12.5px;
    background:rgba(0,0,0,.55);
    color:#fff;
    padding:6px 10px;
    border-radius:999px;
    z-index:2;
}
.wk-caption{
    margin-top:12px;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
}
.wk-capTitle{
    margin:0;
    font-weight:700;
    font-size:15.5px;
}
.wk-capMeta{
    margin:0;
    font-size:13.5px;
    opacity:.85;
    line-height:1.35;
}
.wk-capText{
    margin:0;
    font-size:14px;
    line-height:1.5;
}
.wk-dots{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:14px;
}
.wk-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.25);
    background:rgba(0,0,0,.10);
    cursor:pointer;
    padding:0;
}
.wk-dot[aria-current="true"]{
    background:rgba(0,0,0,.55);
    border-color:rgba(0,0,0,.55);
}
.wk-thumbrow{
    display:grid;
    grid-template-columns:repeat(6, minmax(0,1fr));
    gap:10px;
    margin-top:16px;
}
@media (max-width: 900px){
    .wk-thumbrow{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width: 520px){
    .wk-thumbrow{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.wk-thumb{
    border:1px solid rgba(0,0,0,.12);
    border-radius:10px;
    overflow:hidden;
    background:#f5f1e3;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease;
}
.wk-thumb:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,.10);
}
.wk-thumb img{
    width:100%;
    height:82px;
    object-fit:cover;
    display:block;
}
.wk-thumb[aria-current="true"]{
    outline:2px solid rgba(0,0,0,.55);
}
.wk-hint{
    margin:10px 0 0;
    font-size:12.5px;
    opacity:.75;
}

/* =============================================================================
   Featured Painters Grid
   ============================================================================= */
.painter-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:10px;
    margin:20px 0;
}
.painter-grid__btn{
    padding:12px;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:.95em;
    background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.painter-grid__btn--rose{
    background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.painter-grid__btn--cyan{
    background:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.painter-grid__btn--pastel{
    background:linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color:#333;
}