/* =========================
   CSS VARIABLES
   ========================= */

:root {
    /* Colors */
    --color-white: #fff;
    --color-black: #000;
    --color-text: #000;
    
    /* Font Sizes */
    --font-size-base: 22px;
    --font-size-large: clamp(2rem, 4.75vw, 4rem);
    --font-size-small: 1rem;
    --font-size-icon: 2em;
    --marker-dot-size: 64px;
    /* Outer dimension shared by .marker-dot and .view-toggle-btn */
    --marker-dot-box-size: calc(var(--marker-dot-size) + 10px);
    /* Shrunk dot size used in the list-mode fly-in so the icon behaves like a
       proper list-style bullet glued to one line of text-large. */
    --list-icon-size: calc(var(--font-size-large) * var(--line-height-tight));
    --info-button-size: 32px;
    --swiper-bullet-size: 0.7272727273rem;
    
    /* Font Family */
    --font-family-primary: "Fraunces", serif;
    
    /* Font Weights */
    --font-weight-small: 400;
    --font-weight-large: 600;
    
    /* Line Heights */
    --line-height-base: 1.5;
    --line-height-tight: 1.2;
    
    /* Spacing */
    --spacing-xxs: 0.5em;   
    --spacing-xs: 1em;
    --spacing-sm: 2em;
    --spacing-md: 4em;
    --spacing-lg: 10em;


    /* Border */
    --border-width: 2px;
    --border-radius-circle: 50%;
    
    /* Transitions */
    --transition-fast: 0.25s ease;
    --transition-medium: 0.5s ease;
    
    /* Text */
    --underline-thickness: 0.085em;
    --underline-offset: 0.05em;
    --underline-offset-large: 0.095em;
    --underline-thickness-large: 0.065em;
}
@media (max-width: 550px) {
    :root {
      --spacing-xs: 0.5em;
    }
  }

/* =========================
   BASE STYLES & LAYOUT
   ========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background: var(--color-white);
    font-family: var(--font-family-primary);
    font-optical-sizing: auto;
    font-weight: var(--font-weight-small);
    font-style: normal;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-variation-settings:
        "SOFT" 100,
        "WONK" 0;
}

::selection {
    background-color: var(--color-black);
    color: var(--color-white);
}

::-moz-selection {
    background-color: var(--color-black);
    color: var(--color-white);
}

/* =========================
   Typography System
   ========================= */
.text-large {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-large);
    letter-spacing: -0.035em;
    color: var(--color-text);
}
.text-large p {
    letter-spacing: -0.035em;
}

.text-small,
figcaption, .swiper-figcaption {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-small);
    letter-spacing: normal;
    color: var(--color-black);
}


/* =========================
   COMPONENTS
   ========================= */

/* Background Overlay */
.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity var(--transition-medium);
    pointer-events: none;
    z-index: -1;
}
.background-overlay.active {
    opacity: 1;
    transition: opacity var(--transition-medium);
}

/* Markers */
.marker {
    position: absolute;
    transform: translate(-50%, -50%);
    transition: all var(--transition-fast);
    z-index: 3;
    pointer-events: none;
}

/* Enable pointer events on the wandbilder main page markers */
.wandbilder .marker {
    pointer-events: auto;
}

.marker:hover {
    z-index: 100;
}

/* Re-enable pointer events for interactive elements */
/* .marker a, .marker .marker-dot {
    pointer-events: auto;
    cursor: url("data:image/svg+xml,%3Csvg width='9.697' height='10.8' viewBox='0 0 6.465 7.2' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='svgGroup' stroke-linecap='round' fill-rule='evenodd' font-size='9pt' stroke='%23000' stroke-width='0.25mm' fill='%23000' style='stroke:%23000;stroke-width:0.25mm;fill:%23000'%3E%3Cpath d='M 0.377 0.76 L 5.545 3.672 L 5.545 3.552 L 0.409 6.448 Q 0.201 6.552 0.109 6.668 Q 0.017 6.784 0.017 6.888 Q 0.017 7.024 0.101 7.112 Q 0.185 7.2 0.369 7.2 Q 0.521 7.2 0.673 7.14 Q 0.825 7.08 1.049 6.968 L 5.969 4.216 Q 6.209 4.104 6.337 3.952 Q 6.465 3.8 6.465 3.608 Q 6.465 3.416 6.337 3.264 Q 6.209 3.112 5.969 3 L 1.017 0.232 Q 0.801 0.128 0.649 0.064 Q 0.497 0 0.337 0 Q 0.161 0 0.077 0.088 Q -0.007 0.176 0.001 0.32 Q 0.001 0.424 0.089 0.544 Q 0.177 0.664 0.377 0.76 Z' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") 4.8 5.4, pointer;
} */

.marker-dot {
    position: relative;
    width: var(--marker-dot-box-size);
    height: var(--marker-dot-box-size);
    transition: all var(--transition-fast);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--border-radius-circle);
}

/* .marker:hover .marker-dot {
    border-radius: var(--border-radius-circle);
} */

/* Subwandbild: list-view icons only; no fly/scatter animations (wandbilder.php only). */
.subwandbild .wandbilder-list-markers .marker,
.subwandbild .prev-marker-container .marker,
.subwandbild .next-marker-container .marker {
    transition: none !important;
}

.subwandbild .wandbilder-list-markers .marker .marker-dot,
.subwandbild .prev-marker-container .marker .marker-dot,
.subwandbild .next-marker-container .marker .marker-dot {
    transition: none !important;
}

/* Map hover stacking + house decoration: main Wandbilder page only (not subwandbild footer markers) */
body.wandbilder.hover-active .marker:not(:hover) {
    z-index: 1;
}

/* House background for non-hovered markers */
body.wandbilder.hover-active .marker:hover .marker-dot::before {
    content: '';
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: calc(var(--marker-dot-size) * 0.85);
    height: calc(var(--marker-dot-size) * 0.85);
    background-color: var(--color-black);
    z-index: 1;
    opacity: 1;
    pointer-events: none;
}

/* Triangle roof for house background */
body.wandbilder.hover-active .marker:hover .marker-dot::after {
    content: '';
    position: absolute;
    bottom: calc(50% + var(--marker-dot-size) * 0.425); /* Position on top of square */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: calc(var(--marker-dot-size) * 0.425) solid transparent;
    border-right: calc(var(--marker-dot-size) * 0.425) solid transparent;
    border-bottom: calc(var(--marker-dot-size) * 0.425) solid var(--color-black);
    z-index: 1;
    opacity: 1;
    pointer-events: none;
}

/* House shape does not cover the full circular marker area; uploaded icons use
   background-size: contain and would peek past the silhouette. Strip the image
   while the house is shown (inline background-image needs !important). */
body.wandbilder.hover-active .marker:hover .marker-dot {
    background-image: none !important;
}

/* =========================
   WANDBILDER MAIN PAGE
   ========================= */

/* Suppress transitions during initial placement */
.wandbilder .marker.no-transition {
    transition: none !important;
}

/* Animated repositioning between map ↔ list positions */
.wandbilder .marker {
    transition: left 0.5s ease, top 0.5s ease, opacity var(--transition-fast);
}

/* Fade the main text on hover enter/leave (JS controls opacity directly) */
.wandbilder .main-text {
    transition: opacity var(--transition-medium);
}

/* Hide main-text in list mode (uses opacity so the transition animates the fade) */
body.list-mode.wandbilder .main-text {
    opacity: 0;
    pointer-events: none;
}

body.list-mode.subwandbild .content {
    opacity: 0;
    pointer-events: none;
}

/* ---------------------
   Markers Overlay (list view)
   --------------------- */
.markers-overlay {
    position: fixed;
    inset: 0;
    z-index: 9;
    background: var(--color-white);
    /* Internal scroll for long lists; body.list-mode keeps `overflow: hidden`
       so the page below stays locked and the overlay scrolls on its own.
       `overscroll-behavior: contain` prevents scroll-chaining in case the
       body lock is ever relaxed. */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-medium);
    display: flex;
    align-items: flex-start;
    padding: 0;
}

/* Same padding and line-height as .wandbilder .main-text; .text-large handles size/weight/letter-spacing */
.wandbilder .markers-list-panel,
.subwandbild .markers-list-panel {
    width: 100%;
    padding-top: clamp(10px, 1em, 30px) !important;
    padding-right: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    padding-left: var(--spacing-xs);
    line-height: var(--line-height-tight);
}

.wandbilder .markers-list-headline,
.subwandbild .markers-list-headline {
    margin: 0 0 0 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: var(--color-text);
}

.subwandbild .markers-list-headline--overview {
    margin-bottom: 0.35em;
}

.markers-list-overview-link {
    display: inline;
    color: var(--color-black);
    text-decoration: none;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

/* Kept in one run: [slot + Index] then the rest of the title — only the first segment uses the icon cluster. */
.markers-list-overview-link-start {
    display: inline-flex;
    align-items: baseline;
    gap: 0em;
    text-decoration: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    vertical-align: baseline;
}

.markers-list-overview-link:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-black);
    text-decoration-thickness: var(--underline-thickness-large);
    text-underline-offset: var(--underline-offset-large);
}

/* Permanent box: tune size via these vars without changing markup. Wand image replaced by this reserved area. */
.markers-list-overview-icon-slot {
    --overview-cluster-spread-x: 0.6em;
    --overview-cluster-spread-y: 0.6em;
    position: absolute;
    left: calc((var(--list-icon-size) + 0.3em) / 2);
    top: calc(var(--list-icon-size) / 2);
    display: block;
    width: 0;
    min-width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
}

.markers-list-overview-marker-dot {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: var(--list-icon-size);
    height: var(--list-icon-size);
    transition: none;
    pointer-events: none;
    transform:
        translate(-50%, -50%)
        translate(
            calc(var(--cluster-x, 0) * var(--overview-cluster-spread-x)),
            calc(var(--cluster-y, 0) * var(--overview-cluster-spread-y))
        );
}

.marker-list-item--overview .markers-list-overview-link {
    display: block;
}

.markers-list-overview-index,
.markers-list-overview-link-rest {
    text-decoration: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.wandbilder .markers-list-panel .markers-list,
.subwandbild .markers-list-panel .markers-list {
    margin: 0;
}

.markers-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Subwandbild: project color is set on :root; list view should use default black for copy + underlines */
body.list-mode.subwandbild .markers-overlay {
    --color-text: var(--color-black);
}

.markers-list {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.marker-list-item {
    margin: 0;
    margin-bottom: var(--font-size-large);
    display: flex;
    align-items: center;
    gap: 0;
    line-height: var(--line-height-tight);
    /* Reserve space for the shrunken marker-dot (sized to one text-large line)
       plus a small gap so it reads as a bullet rather than part of the text. */
    padding-left: calc(var(--list-icon-size) + 0.3em);
    position: relative;
}

.marker-list-item--overview,
.marker-list-item--headline {
    align-items: baseline;
}

.marker-list-item--headline {
    padding-left: 0;
}

.marker-list-item--headline .markers-list-headline {
    margin: 0;
}

/* Zero-size anchor that JS uses to read the target position for the floating dot.
   Positioned at the vertical midpoint of the first text line so the shrunken
   icon sits like a list-style bullet next to the opening of each entry. */
.marker-anchor {
    position: absolute;
    left: calc((var(--list-icon-size) + 0.3em) / 2);
    top: calc(var(--list-icon-size) / 2);
    width: 0;
    height: 0;
    display: block;
}

.marker-list-label {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-large);
    letter-spacing: -0.035em;
    color: var(--color-black);
    text-decoration: none;
    line-height: var(--line-height-tight);
}

.marker-list-label .text-large {
    color: var(--color-black);
}

.wandbilder .marker-list-name,
.subwandbild .marker-list-name {
    display: block;
}

.wandbilder .marker-list-credit,
.subwandbild .marker-list-credit {
    display: block;
}

/* Same scale as parent .marker-list-label (large text) */
.wandbilder .marker-list-addr,
.wandbilder .marker-list-artist,
.subwandbild .marker-list-addr,
.subwandbild .marker-list-artist {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-large);
    letter-spacing: -0.035em;
}

.marker-list-label:hover,
.marker-list-label.is-current {
    text-decoration: underline;
    text-decoration-thickness: var(--underline-thickness-large);
    text-underline-offset: var(--underline-offset-large);
}

/* Current row: black underline. Hover: underline uses that page’s project color. */
.marker-list-label.is-current {
    text-decoration-color: var(--color-black);
}

.marker-list-label:hover {
    text-decoration-color: var(--marker-project-color, var(--color-black));
}

/* ---------------------
   View Toggle Button
   --------------------- */
.view-toggle-btn {
    position: fixed;
    right: 1.5em;
    top: 5%;
    transform: translateY(-50%);
    width: calc(var(--marker-dot-size) - 14px);
    height: calc(var(--marker-dot-size) - 14px);
    border-radius: var(--border-radius-circle);
    border: var(--border-width) solid var(--color-black);
    background: var(--color-white);
    cursor: pointer;
    z-index: 20;
    padding: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

/* Match .wandbilder .main-text inset: padding-top uses 1em of --font-size-large; sides use --spacing-xs */
.wandbilder .view-toggle-btn {
    top: clamp(10px, var(--font-size-large), 30px);
    right: var(--spacing-xs);
    transform: none;
}

.view-toggle-btn.active {
    background: var(--color-black);
    border-color: var(--color-black);
}

/* Keep button visible above the overlay */
.markers-overlay.active ~ .view-toggle-btn,
body.list-mode .view-toggle-btn {
    z-index: 20;
}

/* ---------------------
   Toggle Icon SVG
   --------------------- */
.toggle-icon {
    display: block;
    width: 60%;
    height: 60%;
    margin: auto;
    overflow: visible;
}

/* Default fill: black dots and lines (on white button in map-mode) */
.view-toggle-btn .toggle-dot,
.view-toggle-btn .toggle-line {
    fill: var(--color-black);
}

/* Dot position: translate() works in Chrome, Firefox, Safari; CSS cx/cy does not. */
.view-toggle-btn .toggle-dot-g {
    transition: transform 0.5s ease, opacity 0.25s ease;
}

.view-toggle-btn .toggle-dot {
    transition: fill 0.25s ease;
}

/* List-icon layout (bullet column + line anchors match previous cx/cy) */
.view-toggle-btn .toggle-dot-g.dot-1 {
    transform: translate(3px, 4px);
}

.view-toggle-btn .toggle-dot-g.dot-2 {
    transform: translate(3px, 10px);
}

.view-toggle-btn .toggle-dot-g.dot-3 {
    transform: translate(3px, 16px);
}

.view-toggle-btn .toggle-dot-g.dot-4 {
    transform: translate(8px, 16px);
    opacity: 0;
}

/* Line transitions: animate opacity, fill, and SVG geometry (for subwandbild morph) */
.view-toggle-btn .toggle-line {
    transition:
        opacity 0.5s ease,
        fill 0.25s ease,
        x 0.5s ease,
        y 0.5s ease,
        width 0.5s ease,
        height 0.5s ease;
}

/* Extra lines are subwandbild-only; hidden everywhere else */
.view-toggle-btn .toggle-line.line-4,
.view-toggle-btn .toggle-line.line-5 {
    opacity: 0;
}

/* Active state (list-mode): scatter dots, hide lines, switch to white fill */
.view-toggle-btn.active .toggle-dot,
.view-toggle-btn.active .toggle-line {
    fill: var(--color-white);
}

.view-toggle-btn.active .toggle-line {
    opacity: 0;
}

/* Scattered “map” icon positions */
.view-toggle-btn.active .toggle-dot-g.dot-1 {
    transform: translate(14px, 4px);
}

.view-toggle-btn.active .toggle-dot-g.dot-2 {
    transform: translate(4px, 10px);
}

.view-toggle-btn.active .toggle-dot-g.dot-3 {
    transform: translate(15px, 15px);
}

.view-toggle-btn.active .toggle-dot-g.dot-4 {
    transform: translate(8px, 16px);
    opacity: 1;
}

/* ---------------------
   Subwandbild active state: preview of the single-page layout
   (big landscape "image" + paragraph lines, bottom line clipped like a scroll)
   --------------------- */
body.subwandbild .toggle-icon {
    overflow: hidden; /* clip the bottom of line-5 at the viewBox edge */
}

/* Hide scattered map dots on subwandbild; the preview has no markers */
body.subwandbild .view-toggle-btn.active .toggle-dot-g {
    opacity: 0;
}

/* line-1 morphs from the topmost list stripe into a large landscape image */
body.subwandbild .view-toggle-btn.active .toggle-line.line-1 {
    opacity: 1;
    x: 1px;
    y: 1px;
    width: 18px;
    height: 11px;
}

/* Two thick paragraph lines below; the second is clipped past the viewBox like a scroll */
body.subwandbild .view-toggle-btn.active .toggle-line.line-2 {
    opacity: 1;
    x: 1px;
    y: 13.5px;
    width: 18px;
    height: 3px;
}

body.subwandbild .view-toggle-btn.active .toggle-line.line-3 {
    opacity: 1;
    x: 1px;
    y: 18px;
    width: 14px;
    height: 3.5px;
}

/* In list mode, markers float above the overlay as decorative icons;
   pointer-events: none lets clicks/hovers reach the list items below */
body.list-mode.wandbilder .marker {
    z-index: 11;
    pointer-events: none;
}

/* Non-hovered markers in list hover state still stay above overlay */
body.list-mode.wandbilder.hover-active .marker:not(:hover) {
    z-index: 10;
}

/* Always keep dots fully visible in list mode, regardless of any JS opacity */
body.list-mode.wandbilder .marker .marker-dot,
body.list-mode.subwandbild .wandbilder-list-markers .marker .marker-dot {
    opacity: 1 !important;
}

/* List mode: shrink the dot to a single line-height of .text-large so it acts
   as a proper list-style bullet. Keyed on `markers-compact` (not `list-mode`)
   so JS can flip it off at the START of the map-bound transition and the
   expand animates in parallel with the left/top fly-out, instead of snapping
   after it completes. Animates via the `transition: all` already on
   .marker-dot; background-size: contain keeps aspect ratio while scaling with the box. */
body.markers-compact.wandbilder .marker .marker-dot,
body.markers-compact.subwandbild .wandbilder-list-markers .marker .marker-dot {
    width: var(--list-icon-size);
    height: var(--list-icon-size);
}

/* Match the dot's size transition to the 0.5s left/top fly-in so the shrink
   and the repositioning finish together in both directions. (Wandbilder page only;
   subwandbild list markers use transition: none above.) */
body.markers-compact.wandbilder .marker .marker-dot,
body.wandbilder .marker .marker-dot {
    transition: width 0.5s ease, height 0.5s ease, opacity var(--transition-fast), background-color var(--transition-fast);
}

/* Subwandbild: list markers only exist for list animation; keep them invisible in map mode */
body.map-mode.subwandbild .wandbilder-list-markers .marker {
    opacity: 0;
    visibility: hidden;
}

body.list-mode.subwandbild .wandbilder-list-markers .marker {
    visibility: visible;
    z-index: 11;
    pointer-events: none;
}

body.list-mode.subwandbild.hover-active .wandbilder-list-markers .marker:not(:hover) {
    z-index: 10;
}

/* Prevent body from scrolling in list mode so absolute-positioned markers
   stay in sync with the fixed overlay */
body.list-mode {
    overflow: hidden;
}

.wandbilder .main-text {
    position: relative;
    padding-top: clamp(10px, 1em, 30px) !important;
    font-weight: var(--font-weight-large);
    line-height: var(--line-height-tight);
    z-index: 2;
    font-size: var(--font-size-large);
}

/* ---------------------
   Hover overlay (map mode)
   Viewport-anchored grid shown on marker hover. Row 1 = meta text (auto
   height), row 2 = painting filling the remaining space. Fixed position so
   the overlay stays in the current viewport even when .main-text is tall
   enough to make the body scroll. Mirrors the subwandbild text/image column
   rhythm via a 30ch cap resolved against --font-size-large.
   --------------------- */
.wandbilder-hover-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--spacing-xs);
    /* Match .wandbilder .main-text inset exactly: side/bottom padding is
       var(--spacing-xs) = 1em, top uses the same clamp. Setting font-size here
       is what makes "1em" resolve to --font-size-large (same as .main-text)
       instead of the body's --font-size-base. */
    font-size: var(--font-size-large);
    padding: var(--spacing-xs);
    padding-top: clamp(10px, 1em, 30px);
    background: var(--color-white);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-medium);
    z-index: 4;
}

body.wandbilder.hover-active .wandbilder-hover-overlay {
    opacity: 1;
}

.wandbilder-hover-text {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-large);
    line-height: var(--line-height-tight);
    letter-spacing: -0.035em;
    color: var(--color-text);
}

.wandbilder-hover-overlay .wandbilder-hover-preview {
    margin: 0;
    min-height: 0;
    overflow: hidden;
    font-size: var(--font-size-large);
}

.wandbilder-hover-overlay .wandbilder-hover-preview img {
    display: block;
    width: auto;
    max-width: 30ch;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: left top;
}

/* Hover is a desktop affordance; skip the overlay on narrow viewports */
@media (max-width: 600px) {
    .wandbilder-hover-overlay {
        display: none;
    }
}

.wandbilder .imprint-link {
    position: absolute;
    left: calc((var(--font-size-large) - 1em) / 2);
    bottom: calc(var(--font-size-large) * 1.15);
    writing-mode: sideways-lr;
    white-space: nowrap;
    line-height: 1;
}

@media (max-width: 600px) {
    .wandbilder .imprint-link {
        position: static;
        writing-mode: horizontal-tb;
        display: inline;
        white-space: normal;
        line-height: inherit;
    }
}

/* =========================
   SUBWANDBILD PAGE
   ========================= */

 

/* Content */
.subwandbild .content {
    transition: opacity var(--transition-medium);
    margin: 0 auto;
    font-size: var(--font-size-large);  /* This determines the ch calculation */
    font-weight: var(--font-weight-large);
    max-width: 30ch;  /* Based on 80 chars of --font-size-large */
    line-height: var(--line-height-tight);
}

.main-text {
    padding: var(--spacing-xs);
}

.main-text p {
    text-indent: var(--spacing-xs);
    font-size: var(--font-size-large);
}

/* Links and Text Blocks */

/* Links Styling */
.subwandbild .meta-text a, 
.subwandbild .page-footer a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: var(--underline-thickness);
    text-underline-offset: var(--underline-offset);
    text-decoration-color: var(--color-black);
}

.subwandbild .main-text a {
    color: var(--color-text);
    text-decoration-color: var(--color-black);
}

.subwandbild .page-footer a span.text-large, 
.subwandbild .text-large a {
    text-decoration-thickness: var(--underline-thickness-large);    
    text-underline-offset: var(--underline-offset-large);
}

/* =========================
   FOOTER NAVIGATION
   ========================= */

.subwandbild .page-footer {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-xs) var(--spacing-xs);
}

.subwandbild .footer-navigation {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
}

/* Navigation Items */
.subwandbild .footer-nav-item {
    position: relative;
    flex: 0 1 auto;
}

.subwandbild .footer-nav-previous {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.subwandbild .footer-nav-next {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.subwandbild .footer-nav-all {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (max-width: 700px) {
    .subwandbild .footer-navigation {
        flex-wrap: wrap;
        row-gap: var(--spacing-xs);
    }
    .subwandbild .footer-nav-item {
        flex-basis: 100%;
    }
    .subwandbild .footer-nav-next {
        justify-content: flex-end;
    }
    .subwandbild .footer-nav-prev {
        justify-content: flex-end;
    }
}

/* Navigation Links */
.subwandbild .page-footer .nav-link {
    position: relative;
    z-index: 2;
    text-decoration: none;
    color: var(--color-black);
}

.subwandbild .page-footer .nav-link .text-large,
.subwandbild .page-footer .nav-link .text-small {
    color: var(--color-black);
}

.subwandbild .footer-nav-previous .nav-link:hover,
.subwandbild .footer-nav-next .nav-link:hover {
    text-decoration: underline;
    text-decoration-thickness: var(--underline-thickness-large);
    text-underline-offset: var(--underline-offset-large);
    text-decoration-color: var(--marker-project-color, var(--color-black));
}

/* Subwandbild page view: prev/next links are permanently underlined (list-view remains hover-only). */
body.map-mode.subwandbild .footer-nav-previous .nav-link,
body.map-mode.subwandbild .footer-nav-next .nav-link {
    text-decoration: underline;
    text-decoration-thickness: var(--underline-thickness-large);
    text-underline-offset: var(--underline-offset-large);
    text-decoration-color: var(--marker-project-color, var(--color-black));
}

.subwandbild .footer-nav-all .nav-link {
    display: inline;
}

/* Prev/next wand icons: no slide-on-hover (front-page style removed) */
.subwandbild .page-footer .nav-arrow {
    display: inline-block;
    transition: none;
}

.subwandbild .footer-nav-all .nav-link:hover .nav-arrow-down {
    transform: translateY(50%);
}

.subwandbild .page-footer .nav-arrow-down {
    display: inline-block;
    transition: transform var(--transition-fast);
}
/* =========================
   FOOTER MARKER CONTAINERS
   ========================= */

/* Navigation link wrapper - confines marker positioning space */
.subwandbild .nav-link-wrapper {
    position: relative;
    width: max-content;
    height: 1.5em;
}

/* Previous/Next marker containers */
.subwandbild .prev-marker-container,
.subwandbild .next-marker-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 3;
}

.subwandbild .prev-marker-container .marker,
.subwandbild .next-marker-container .marker {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* All markers container */
.subwandbild .all-markers-container {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 3;
}

.subwandbild .all-markers-container .marker {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Marker links - enable clicking on marker dots */
.subwandbild .marker-link {
    display: block;
    pointer-events: auto;
    cursor: pointer;
}

.subwandbild .marker-link .marker-dot {
    width: var(--marker-dot-box-size);
    height: var(--marker-dot-box-size);
    transition: all var(--transition-fast);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--border-radius-circle);
}
/* =========================
   SWIPER CUSTOMIZATION
   ========================= */
/* Swiper Controls Grid Layout */
.subwandbild .swiper-container-outer {
    width: 100%;
    margin-block: var(--spacing-xs);
}

@media (max-width: 600px) {
    .subwandbild .swiper-container-outer {
        margin-block: var(--spacing-sm);
    }
}
     /* Swiper */
.subwandbild .swiper {
    width: 100% !important;
    aspect-ratio: 3 / 2; /* Width-driven aspect ratio keeps pagination stable; 85vh caps desktop */
    max-height: 85vh;
    overflow: hidden !important;
}

.subwandbild .swiper-wrapper .swiper-slide {
    padding: var(--spacing-xs) var(--spacing-xs) 0 var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%; /* Fill the fixed swiper height */
}

.subwandbild .swiper-slide figure {
    width: 100%;
    height: 100%; /* Fill slide height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.subwandbild .swiper-slide figure img {
    width: 100%; /* Start at full width */
    height: 100%; /* Start at full height */
    object-fit: contain; /* Scale to fit without cropping - preserves all details */
    /* Both portrait and landscape images will scale to fit the fixed container */
}
.subwandbild .swiper-slide figure iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border: none;
}
.subwandbild .swiper-slide figure figcaption {
    display: none;
}

.swiper-controls-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xxs);
    padding: var(--spacing-xxs) var(--spacing-xs) 0 var(--spacing-xs);
    width: 100%;
}

@media (min-width: 700px) {
    .swiper-controls-grid {
        padding-top: var(--spacing-xs);
    }
}

.subwandbild .swiper-figcaption {
    width: 100%; /* Full width for figcaption */
    text-align: center;
}

.subwandbild .swiper-controls-center {
    display: grid;
    grid-template-columns: auto 1fr auto; /* prev | pagination | next */
    align-items: center;
    gap: 0.7272727273rem;
    width: max-content; /* Compact width for navigation row */
}

.subwandbild .swiper-controls-center .swiper-button-prev,
.subwandbild .swiper-controls-center .swiper-button-next {
    align-self: start;
}

.subwandbild .swiper-button-spacer {
    width: 0;
}

/* Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
    color: var(--color-black);
    transition: transform var(--transition-fast);
    /* Override Swiper's default absolute positioning */
    position: static;
    margin: 0;
    width: auto;
    height: auto;
    cursor: pointer;
}

/* Hide the default SVG icons */
.swiper-button-next svg,
.swiper-button-prev svg {
    display: none;
}

/* Wand icons via pseudo-elements (mask keeps hover / theme coloring) */
.swiper-button-prev::after,
.swiper-button-next::after,
.text-small a[target="_blank"]::after {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 1.15em;
    height: calc(1.15em * 24.37 / 35);
    vertical-align: -0.12em;
    background-color: var(--color-black);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.swiper-button-prev::after,
.text-small a[target="_blank"]::after {
    mask-image: url('/assets/icons/wand-left-icon.svg');
    -webkit-mask-image: url('/assets/icons/wand-left-icon.svg');
}

.swiper-button-next::after {
    mask-image: url('/assets/icons/wand-right-icon.svg');
    -webkit-mask-image: url('/assets/icons/wand-right-icon.svg');
}

.text-small a[target="_blank"]::after {
    margin-inline-start: 0.35em;
}

/* Navigation Button Hover Effects */
.swiper-button-next:hover {
    transform: translateX(25%);
}

.swiper-button-prev:hover {
    transform: translateX(-25%);
}

/* Pagination Container */
.swiper-pagination {
    position: static !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.7272727273rem;
    flex-wrap: wrap;
    row-gap: 0.5em;
}

@media (max-width: 960px) {
    .subwandbild .swiper-controls-center {
        width: 100%;
        max-width: 100%;
    }
}

/* Pagination bullets: square by default, circle when active */
.swiper-pagination-bullet {
    background-color: var(--color-black);
    opacity: 1;
    border-radius: 0;
    width: var(--swiper-bullet-size);
    height: var(--swiper-bullet-size);
    transition:
        opacity var(--transition-medium),
        border-radius var(--transition-medium),
        background-color var(--transition-medium);
    position: relative;
    margin: 0 !important;
}

.swiper-pagination-bullet-active {
    border-radius: var(--border-radius-circle);
}