@charset "UTF-8";

/*
 * Responsive Breakpoints:
 * - Desktop:  ≥ 1024 px (unverändert)
 * - Tablet:   768–1023 px
 * - Smartphone Landscape / allgemein: max-width 767 px
 *
 * FEINSCHLIFF & NEUE ANPASSUNGEN (bis auf Widerruf):
 * spp = Smartphone Portrait → @media (max-width: 767px) and (orientation: portrait)
 *   Untermenü (Sidebar) fixiert unter Hauptmenü; Höhe dynamisch (spp-topnav.js)
 */

/* Desktop: Sidebar-Offset (ersetzt Inline-Styles) */
#mainwrapper #content #sidebar.sidebar-nav {
    margin-top: 113px;
}
#mainwrapper #content #sidebar.sidebar-nav--short {
    margin-top: 100px;
}

/* Karl Völker: Überschrift spaltenübergreifend, Abstand zu Banner/Galerie */
@media screen and (min-width: 768px) {
    body.page-voelker {
        --voelker-heading-gap: 37px;
    }

    body.page-voelker #content > h1 {
        clear: both;
        float: none;
        width: 100%;
        box-sizing: border-box;
        padding: 51px 2% 0;
        margin: 0 0 var(--voelker-heading-gap) 0;
    }

    body.page-voelker #mainContent {
        padding-top: 0;
    }

    body.page-voelker #mainwrapper #content #sidebar.sidebar-nav {
        margin-top: 0;
    }

    body.page-voelker #content #mainContent > #bannerImage,
    body.page-voelker #sidebar #adimage {
        margin-top: 0;
    }
}

/* ─── Tablet (768–1023 px): Zwei Spalten wie Desktop ─── */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    #mainwrapper {
        width: 94%;
    }
    #mainwrapper header #logo {
        width: 30%;
        max-width: 200px;
    }
    #filters2 {
        padding-top: 72px;
        padding-left: 8px;
    }
    #mainContent {
        width: 64%;
        padding-top: 28px;
    }
    #mainwrapper #content #sidebar.sidebar-nav,
    #mainwrapper #content #sidebar.sidebar-nav--short {
        width: 22%;
        float: left;
        margin-top: 96px;
    }
    #content footer article {
        width: 50%;
    }
    .element-item .bild {
        width: 120px;
        height: 120px;
    }
    .element-item .bilder {
        width: 120px;
        height: 120px;
        padding-left: 15px;
        padding-top: 15px;
    }
}

/* ─── Smartphone (< 768 px): Einspalte + Fixed Bottom Bar ─── */
@media screen and (max-width: 767px) {
    #mainwrapper {
        width: 100%;
        margin-left: 0;
        padding: 0 14px;
        box-sizing: border-box;
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }

    /* Header */
    #mainwrapper header {
        overflow: visible;
        padding-bottom: 8px;
    }
    #mainwrapper header #logo {
        float: none;
        width: 100%;
        max-width: 200px;
        margin: 8px auto 10px;
        padding-top: 4px;
        padding-bottom: 4px;
        text-align: center;
    }
    #mainwrapper header #logo img {
        float: none;
        margin: 0 auto;
    }
    #filters2 {
        float: none;
        width: 100%;
        padding-top: 0;
        padding-left: 0;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #filters2::-webkit-scrollbar {
        display: none;
    }
    #filters2 > a {
        display: inline-block;
        vertical-align: top;
    }
    #filters2 .button {
        min-height: 44px;
    }

    /* Content – einspaltig */
    #content {
        overflow: hidden;
    }
    #mainContent {
        width: 100%;
        float: none;
        padding-left: 0;
        padding-right: 0;
        padding-top: 16px;
    }

    body.page-voelker #content > h1 {
        padding: 16px 0 0;
        margin: 0 0 37px 0;
    }

    body.page-voelker #mainContent {
        padding-top: 0;
    }

    /* Fixed Bottom Bar – nur bei Sidebar mit Buttons */
    #mainwrapper #content #sidebar.sidebar-nav:has(.button) {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        padding: 10px 14px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.9);
        border-top: 2px solid #000;
        z-index: 9990;
        float: none;
        box-sizing: border-box;
        max-height: 42vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #mainwrapper #content #sidebar.sidebar-nav:not(:has(.button)) {
        display: none;
    }

    #sidebar #filters,
    #sidebar #sorts {
        width: 100% !important;
        padding-top: 0;
        margin-bottom: 6px;
    }
    #sidebar .button-group,
    #sidebar .button-group2 {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }
    #sidebar .button-group2 {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    #sidebar .button-group2::-webkit-scrollbar {
        display: none;
    }
    #sidebar .button-group > a,
    #sidebar .button-group2 > a {
        flex-shrink: 0;
    }
    #sidebar .button {
        min-height: 44px;
        min-width: 44px;
    }
    #sidebar .buttontext {
        font-size: 14px;
        white-space: nowrap;
    }

    /* Galerie in Sidebar auf Mobile ausblenden (Inhalt bleibt in Hauptspalte) */
    #sidebar #adimage,
    #sidebar > .bildunterschrift,
    #sidebar .pfeil_sidebar {
        display: none;
    }

    /* Veranstaltungskarten – Bild oben, Text darunter */
    .element-item .bild {
        float: none;
        width: 100%;
        height: auto;
        margin: 0 0 14px 0;
        text-align: center;
    }
    .element-item .bilder {
        float: none;
        width: 100%;
        max-width: 300px;
        height: auto;
        padding: 0;
        margin: 0 auto;
        display: block;
    }
    .element-item .bilder_pub {
        float: none;
        margin: 0 auto 14px;
        display: block;
        max-width: 140px;
        height: auto;
    }
    .element-item .symbol,
    .element-item h1.symbol,
    .element-item h2.symbol,
    .element-item h3.symbol {
        width: 100%;
        left: 0;
        top: 0;
    }
    .element-item .untertitel,
    .element-item .name,
    .element-item .weight,
    .element-item .hidden {
        width: 100%;
        left: 0;
    }
    .element-item .number {
        position: relative;
        right: auto;
        top: auto;
        display: block;
        text-align: right;
        margin-bottom: 6px;
    }

    /* Footer */
    footer {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        clear: both;
    }
    #content footer article {
        width: 100%;
        float: none;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 12px;
    }
    #footerbar {
        width: 100%;
        margin-left: 0;
    }

    /* Fließtext-Seiten */
    #content #mainContent #authorInfo .autorbild {
        float: none;
        margin: 0 auto 14px;
        display: block;
    }
    #content #mainContent #bannerImage,
    #mainContent #bannerImage {
        height: auto !important;
        min-height: 220px;
    }
    #content #mainContent .drop-caps {
        font-size: 50px;
        line-height: 36px;
    }

    /* Smartphone: Typografie ~120 % (Ausnahme: Hauptmenü, Fixed-Menü, h1) */
    #content {
        font-size: 120%;
    }

    #filters2 .buttontext,
    #filters2 .button {
        font-size: 15px;
    }

    #content #mainContent > h1,
    body.page-voelker #content > h1 {
        font-size: 2rem;
    }

    #content #mainContent .element-item h3.untertitel {
        font-size: 17px;
    }
    #content #mainContent .element-item h3.name {
        font-size: 17px;
    }
    #content #mainContent .element-item h1.symbol,
    #content #mainContent .element-item h2.symbol,
    #content #mainContent .element-item h3.symbol {
        font-size: 24px;
    }
    #content #mainContent h3:not(.untertitel):not(.name):not(.symbol) {
        font-size: 17px;
    }

    #content #mainContent .element-item .number,
    .element-item .number {
        font-size: 14px;
    }
    #content #mainContent .element-item p.weight,
    #content #mainContent .element-item p.hidden,
    .element-item .weight,
    .element-item .hidden {
        font-size: 18px;
    }
    .element-item .autor {
        font-size: 14px;
    }

    #content #mainContent #authorInfo h2,
    #content #mainContent > h2:not(.symbol):not(.section-title),
    #content #mainContent a h2 {
        font-size: 19px;
        line-height: 1.5;
    }
    #content #mainContent #authorInfo p {
        font-size: 18px;
    }

    #content footer article,
    footer article {
        font-size: 16px;
    }

    #cboxTitle {
        font-size: 17px;
    }

    /* Landing Page */
    body.index-landing #open img {
        position: absolute;
    }
    #logo2 {
        width: 50%;
        left: calc(8% - 12px);
        top: 14px;
    }

    /* Colorbox: Bild nie über Viewport, Außenrand zum Schließen per Tap */
    #colorbox {
        max-width: calc(100vw - 28px) !important;
        max-height: calc(100dvh - 80px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    }
    #cboxLoadedContent {
        overflow: visible !important;
    }
    #cboxLoadedContent .cboxPhoto {
        max-width: calc(100vw - 36px) !important;
        max-height: calc(100dvh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
    }
}

/* ─── spp: Smartphone Portrait (Feinschliff) ─── */
@media screen and (max-width: 767px) and (orientation: portrait) {
    :root {
        /* SPP-Floating-Buttons (Info „i“ / Schließen „ד): Position hier zentral anpassen */
        --spp-fab-size: 44px;
        --spp-fab-inset-right: calc(14px + env(safe-area-inset-right, 0px));
        --spp-fab-inset-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }

    /* 1. Logo aus, Hauptmenü immer oben fixiert */
    #mainwrapper header #logo {
        display: none !important;
    }

    #mainwrapper header {
        overflow: visible;
        height: 0;
        min-height: 0;
        padding: 0;
        margin: 0;
    }

    #filters2 {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9980;
        clear: both;
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: rgba(255, 255, 255, 0.9);
        width: 100%;
        margin: 0;
        padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
        box-sizing: border-box;
        border-bottom: 2px solid #000;
    }

    #filters2 a,
    #filters2 .button,
    #filters2 .buttontext {
        -webkit-tap-highlight-color: transparent;
    }

    #filters2 a:focus,
    #filters2 a:focus-visible,
    #filters2 a:active,
    #filters2 .button:focus,
    #filters2 .button:focus-visible,
    #filters2 .button:active {
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    #mainwrapper {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        font-size: 100% !important;
        padding-top: calc(var(--spp-nav-stack-height, 50px) + env(safe-area-inset-top, 0px));
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        transition: padding-top 0.28s ease;
    }

    body.spp-info-page #mainwrapper {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    #content footer,
    #footerbar,
    .trenner-bottom {
        display: none !important;
    }

    .spp-info-fab,
    .spp-info-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: var(--spp-fab-inset-right);
        bottom: var(--spp-fab-inset-bottom);
        width: var(--spp-fab-size);
        height: var(--spp-fab-size);
        border-radius: 50%;
        background: #fff;
        color: #000;
        border: none;
        font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
        text-decoration: none;
        line-height: 1;
        z-index: 9960;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
        box-sizing: border-box;
        padding: 0;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .spp-info-fab {
        font-size: 20px;
        font-weight: 700;
        font-style: normal !important;
        font-synthesis: none;
        font-variant: normal;
        transform: none;
    }

    .spp-info-close {
        font-size: 28px;
        font-weight: 400;
    }

    .spp-info-fab:hover,
    .spp-info-fab:focus,
    .spp-info-fab:active,
    .spp-info-close:hover,
    .spp-info-close:focus,
    .spp-info-close:active {
        color: #000;
        text-decoration: none;
        background: #fff;
    }

    body.spp-info-page .spp-info-fab {
        display: none !important;
    }

    html.kvi-spp-scroll-lock #mainwrapper,
    html.kvi-spp-scroll-lock #mainwrapper #content #sidebar.sidebar-nav:has(.button) {
        transition: none !important;
    }

    html {
        scroll-padding-top: calc(var(--spp-nav-stack-height, 50px) + env(safe-area-inset-top, 0px));
    }

    /* 3. Sortierung (Zeit/Ort) ausblenden */
    #sidebar #sorts {
        display: none !important;
    }

    /* Untermenü unter Hauptmenü (Höhe per spp-topnav.js → --spp-nav-stack-height) */
    #mainwrapper #content #sidebar.sidebar-nav:has(.button) {
        --spp-submenu-font: clamp(13.5px, 3.4vw, 14.5px);
        --spp-submenu-gap: clamp(10px, 2.8vw, 16px);
        position: fixed;
        top: var(--spp-mainnav-height, 50px);
        bottom: auto !important;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        padding: 12px 12px 10px;
        background: rgba(255, 255, 255, 0.9);
        border-top: none;
        border-bottom: 2px solid #000;
        z-index: 9975;
        max-height: none;
        overflow: visible;
        box-sizing: border-box;
        transition: top 0.28s ease, padding 0.28s ease;
    }

    #sidebar.sidebar-nav:has(a[href*="schmirma.html#a0"]),
    #sidebar.sidebar-nav:has(> .button-group a[href="#a0"] .buttontext[data-label-short="Bildprogramm"]) {
        padding-top: 12px;
        padding-bottom: 10px;
    }

    #sidebar #filters,
    #sidebar #filters3,
    #sidebar .button-group,
    #sidebar .button-group2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 2px 12px;
        width: 100%;
        margin-bottom: 0;
        overflow: visible;
    }

    #sidebar a,
    #sidebar a:hover,
    #sidebar a:visited,
    #sidebar a:active,
    #sidebar a:focus {
        text-decoration: none !important;
    }

    #sidebar .button {
        transform: none;
        background: transparent !important;
        border: none;
        padding: 0;
        margin: 0;
        min-height: 0;
        min-width: 0;
        cursor: pointer;
        display: inline;
    }

    #sidebar .buttontext {
        transform: none;
        font-size: var(--spp-submenu-font, 14px);
        line-height: 1.35;
        margin: 0;
        padding: 0;
        text-align: center;
        color: #000;
        font-style: normal;
        white-space: nowrap;
    }

    #sidebar .button:hover,
    #sidebar .button.is-checked,
    #sidebar .button:active {
        background: transparent !important;
        color: #000;
    }

    #sidebar .button.is-checked .buttontext,
    #sidebar .button.is-checked:hover .buttontext,
    #sidebar .button.is-checked:active .buttontext {
        font-weight: 700 !important;
        text-decoration: none !important;
        color: #000;
    }

    #sidebar .button:hover:not(.is-checked) .buttontext {
        text-decoration: underline;
        color: #000;
    }

    /* Schmirma-Kurzlabels: lesbar, ohne skew */
    #sidebar .buttontext[data-label-short] {
        font-size: 0;
        line-height: 0;
    }
    #sidebar .buttontext[data-label-short]::after {
        content: attr(data-label-short);
        font-size: var(--spp-submenu-font, 14px);
        line-height: 1.35;
        display: inline;
        transform: none;
        font-style: normal;
        color: #000;
    }

    /* Schmirma-Untermenü: beide Zeilen als kompakter Block zentriert, gap 18px */
    #sidebar.sidebar-nav:has(a[href*="schmirma.html#a0"]),
    #sidebar.sidebar-nav:has(> .button-group a[href="#a0"] .buttontext[data-label-short="Bildprogramm"]) {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: 100%;
    }

    #sidebar.sidebar-nav:has(a[href*="schmirma.html#a0"]) > #filters.button-group,
    #sidebar.sidebar-nav:has(> #filters.button-group a[href="#a0"] .buttontext[data-label-short="Bildprogramm"]) > #filters.button-group {
        display: grid !important;
        grid-template-columns: repeat(3, auto);
        justify-content: center;
        column-gap: var(--spp-submenu-gap, 16px);
        row-gap: 0;
        width: 100%;
        margin-bottom: 0;
        overflow: visible;
        flex-wrap: nowrap !important;
        align-items: center;
    }

    #sidebar.sidebar-nav:has(a[href*="schmirma.html#a0"]) > .button-group2:not(#filters3),
    #sidebar.sidebar-nav:has(> #filters.button-group a[href="#a0"] .buttontext[data-label-short="Bildprogramm"]) > .button-group2:not(#filters3) {
        display: grid !important;
        grid-template-columns: repeat(4, auto);
        justify-content: center;
        column-gap: var(--spp-submenu-gap, 16px);
        row-gap: 0;
        width: 100%;
        margin-bottom: 0;
        overflow: visible !important;
        overflow-x: visible !important;
        flex-wrap: nowrap !important;
        align-items: center;
    }

    /* Unterseiten: Bild-Untermenü (filters3) in spp ausblenden */
    #sidebar.sidebar-nav:has(a[href*="schmirma.html#a0"]) #filters3,
    #sidebar.sidebar-nav:has(> #filters.button-group a[href="#a0"] .buttontext[data-label-short="Bildprogramm"]) #filters3 {
        display: none !important;
    }

    /* Publikation-Untermenü: 2 Zeilen × 2 Einträge, Block zentriert */
    #sidebar.sidebar-nav:has(button[data-filter=".Ausstellungsbeteiligung"]) {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: 100%;
    }

    #sidebar.sidebar-nav:has(button[data-filter=".Ausstellungsbeteiligung"]) > #filters.button-group,
    #sidebar.sidebar-nav:has(button[data-filter=".Ausstellungsbeteiligung"]) > .button-group2 {
        display: grid !important;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        column-gap: var(--spp-submenu-gap, 16px);
        row-gap: 0;
        width: 100%;
        margin-bottom: 0;
        overflow: visible !important;
        overflow-x: visible !important;
        flex-wrap: nowrap !important;
        align-items: center;
    }

    #sidebar .button.is-checked .buttontext[data-label-short]::after,
    #sidebar .button.is-checked:hover .buttontext[data-label-short]::after,
    #sidebar .button.is-checked:active .buttontext[data-label-short]::after {
        font-weight: 700 !important;
        text-decoration: none !important;
        color: #000;
    }
    #sidebar .button:hover:not(.is-checked) .buttontext[data-label-short]::after {
        text-decoration: underline;
        color: #000;
    }

    /* Schmirma: Autorenbilder – an Zeilenhöhe des Fließtexts angepasst */
    #content #mainContent #authorInfo {
        min-height: 0 !important;
    }
    #content #mainContent #authorInfo .autorbild {
        float: right;
        width: 4.75em;
        height: 4.75em;
        margin: 0 0 0.2em 0.85em;
        display: block;
        position: relative;
        z-index: 2;
    }
    #content #mainContent #authorInfo .autorbild img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Schmirma: Autorentexte kleiner, mehr Abstand zur Namensüberschrift */
    body:has(#sidebar a[href*="schmirma.html#a0"]) #content #mainContent #authorInfo p,
    body:has(#sidebar > .button-group a[href="#a0"] .buttontext[data-label-short="Bildprogramm"]) #content #mainContent #authorInfo p {
        font-size: 0.85em;
        line-height: 1.35 !important;
    }
    body:has(#sidebar a[href*="schmirma.html#a0"]) #content #mainContent #authorInfo h2,
    body:has(#sidebar > .button-group a[href="#a0"] .buttontext[data-label-short="Bildprogramm"]) #content #mainContent #authorInfo h2 {
        margin-bottom: 10px !important;
    }

    /* Schmirma: Zwischenüberschriften wie Veranstaltungstitel */
    #content #mainContent h3.h3text:not(.untertitel):not(.name):not(.symbol) {
        font-size: 24px;
        line-height: normal;
        letter-spacing: 0.03em;
    }

    /* Aktuell/Publikation/Impressum: einheitliche Linksbündigkeit (Referenz: Fließtext) */
    #content #mainContent > h1,
    #content #mainContent > h2.section-title {
        font-size: 2rem;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0;
        box-sizing: border-box;
        max-width: 100%;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Karl Völker: h1 außerhalb #mainContent – gleicher Abstand/Typo wie Schmirma & Aktuell */
    body.page-voelker #content > h1 {
        font-size: 2rem;
        font-weight: 300;
        padding: 52px 10px 0;
        margin: 0 0 37px 0;
        margin-left: 0;
        box-sizing: border-box;
        max-width: 100%;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    body.page-voelker #content > h1 b {
        font-weight: bold;
    }

    body.spp-info-page #content #mainContent h1,
    body.spp-impressum-page #content #mainContent h1.impressum-section-title {
        padding-left: 0;
        padding-right: 0;
        text-align: left;
        hyphens: manual;
    }

    body.spp-info-page #content #mainContent h1.info-page-logo {
        padding-left: 10px;
        padding-right: 10px;
        text-align: right;
        box-sizing: border-box;
    }

    body.spp-info-page #content #mainContent h1.info-page-logo a.info-page-logo-link {
        display: contents;
    }

    body.spp-info-page #content #mainContent h1.info-page-logo img {
        margin-left: auto;
        margin-right: 0;
    }

    body.spp-info-page #content #mainContent a[href*="impressum"] {
        hyphens: manual;
    }

    body.spp-info-page #content #mainContent .info-intro-spp {
        display: block;
        margin-bottom: 1.25em;
    }

    body.spp-impressum-page #content #mainContent .impressum-intro {
        display: none;
    }

    #content #mainContent .isotope .element-item {
        margin: 0;
        /* em: skaliert mit Fließtext; +10 % oben, +20 % unten (bezogen auf Top) */
        padding-top: 0.825em;
        padding-bottom: 0.99em;
    }

    /* Foto-Kacheln: volle Breite der Textspalte */
    #content #mainContent .isotope .element-item .bild {
        width: 100%;
        margin: 0 0 0.85em 0;
        padding: 0 10px;
        box-sizing: border-box;
    }
    #content #mainContent .isotope .element-item > a:has(.bilder_pub) {
        display: block;
        margin: 0 0 0.85em 0;
        padding: 0 10px;
        box-sizing: border-box;
    }
    #content #mainContent .isotope .element-item .bilder {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: block;
    }

    /* Publikation: Katalogcover – feste Breite, natürliches Seitenverhältnis (kein Quadrat) */
    #content #mainContent .isotope .element-item .bilder_pub {
        width: auto;
        max-width: 140px;
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
        display: block;
    }

    #content #mainContent .isotope .element-item .number,
    #content #mainContent .isotope .element-item h1.symbol,
    #content #mainContent .isotope .element-item h2.symbol,
    #content #mainContent .isotope .element-item h3.symbol,
    #content #mainContent .isotope .element-item h3.untertitel,
    #content #mainContent .isotope .element-item h3.name,
    #content #mainContent .isotope .element-item p.weight,
    #content #mainContent .isotope .element-item p.hidden,
    #content #mainContent .isotope .element-item p.autor {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0;
        box-sizing: border-box;
        text-align: left;
    }

    #content #mainContent .isotope .element-item .number {
        right: auto;
        display: block;
        margin-bottom: 6px;
    }

    #content #mainContent .isotope .element-item h1.symbol,
    #content #mainContent .isotope .element-item h2.symbol,
    #content #mainContent .isotope .element-item h3.symbol {
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
        line-height: normal;
        font-weight: bold;
    }

    #content #mainContent .isotope .element-item h3.untertitel {
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 24px;
        font-weight: 300;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        line-height: normal;
    }

    /* Aktuell / Publikation: harte Zeilenumbrüche in Item-Überschriften ausblenden */
    #content #mainContent .isotope .element-item h1.symbol br,
    #content #mainContent .isotope .element-item h2.symbol br,
    #content #mainContent .isotope .element-item h3.symbol br,
    #content #mainContent .isotope .element-item h3.untertitel br {
        display: none;
    }

    #content #mainContent .isotope .element-item h3.name,
    #content #mainContent .isotope .element-item p.weight {
        font-size: 18px;
        line-height: 1.5;
        font-weight: 300;
        text-transform: none;
        letter-spacing: 0;
    }

    #content #mainContent .isotope .element-item h3.name {
        padding-top: 4px;
        margin: 0;
    }

    /* Schmirma: 3D-Panorama – quadratisch (Höhe = Breite) */
    #content #mainContent #bannerImage:has(iframe),
    #mainContent #bannerImage:has(iframe) {
        height: auto !important;
        min-height: 0;
        aspect-ratio: 1 / 1;
    }

    #content #mainContent #bannerImage:has(iframe) iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }

    /* Veranstaltungsbilder: Galerie-Pfeil (Farbe per JS aus Bildhelligkeit) */
    #content #mainContent .isotope .element-item .bild .pfeil {
        display: block !important;
        left: 0;
        top: 15px;
        width: 30px;
        height: 29px;
        z-index: 5;
    }

    #content #mainContent .isotope .element-item .bild .pfeil img {
        width: 30px !important;
        height: 29px !important;
        max-width: none !important;
    }

    /* Colorbox: nur Schließen-Kreuz; weiter/blättern per Tap aufs Motiv, schließen per Tap außerhalb */
    #cboxPrevious,
    #cboxNext,
    #cboxSlideshow,
    #cboxCurrent {
        display: none !important;
    }

    #cboxClose {
        display: block !important;
        width: 28px;
        height: 28px;
        top: -24px;
        right: 0;
        z-index: 2;
    }

    /* Colorbox spp: Beschriftung über dem Bild (max. 2 Zeilen), wie Desktop – erweitert */
    #colorbox,
    #cboxWrapper {
        overflow: visible !important;
        background: transparent !important;
    }

    #cboxTopLeft,
    #cboxTopCenter,
    #cboxTopRight,
    #cboxMiddleLeft,
    #cboxMiddleRight,
    #cboxBottomLeft,
    #cboxBottomCenter,
    #cboxBottomRight {
        background: transparent !important;
    }

    #cboxContent {
        margin-top: 0 !important;
        padding-top: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    #cboxLoadedContent {
        background: transparent !important;
    }

    /* Lade-Flash beim Slideshow-Wechsel: Overlay aus, weißer Seitenfond scheint durch */
    #cboxLoadingOverlay,
    #cboxLoadingGraphic {
        display: none !important;
        background: transparent !important;
    }

    #cboxLoadedContent .cboxPhoto {
        display: block !important;
        float: none !important;
        margin: 0 auto !important;
        border: 0;
    }

    #cboxTitle {
        position: absolute !important;
        top: -2.75em !important;
        left: 0;
        right: auto;
        width: auto;
        max-width: 100%;
        margin: 0;
        padding: 0 0 4px 0;
        box-sizing: border-box;
        font-size: clamp(11px, 3vw, 13px);
        line-height: 1.35;
        text-align: left;
        color: #000;
        white-space: normal;
        overflow: hidden;
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        text-overflow: ellipsis;
        visibility: visible !important;
    }

    /* Sidebar-Galerie in Hauptspalte (Völker / Schmirma) */
    .spp-inline-gallery {
        margin: 1.1em 0 1.4em;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .spp-inline-gallery #adimage,
    .spp-gallery-cell #adimage {
        position: relative;
        overflow: hidden;
    }

    .spp-inline-gallery .pfeil_sidebar,
    .spp-gallery-cell .pfeil_sidebar {
        display: block !important;
        left: 0;
        top: 15px;
        margin-top: 0;
        width: 30px;
        height: 29px;
        z-index: 5;
    }

    .spp-inline-gallery .pfeil_sidebar img,
    .spp-gallery-cell .pfeil_sidebar img {
        width: 30px !important;
        height: 29px !important;
        max-width: none !important;
    }

    /* Nur Sidebar-Pfeil oben links – kein zweiter .pfeil im Link */
    #adimage a .pfeil {
        display: none !important;
    }

    .spp-inline-gallery .bildunterschrift {
        display: block !important;
        margin: 0.35em 0 0;
        padding: 0;
        font-size: clamp(12px, 3.1vw, 14px);
        line-height: 1.35;
        text-align: left;
    }

    .spp-inline-gallery--voelker #adimage {
        width: 100%;
        padding: 0;
        overflow: visible;
    }

    .spp-inline-gallery--voelker #adimage a:has(img) {
        display: block;
    }

    .spp-inline-gallery--voelker #adimage a:has(img) img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
    }

    .spp-inline-gallery--voelker #adimage a:not(:has(img)) {
        display: none;
    }

    .spp-inline-gallery--schmirma {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        width: 100%;
        margin-top: 3.2em;
    }

    .spp-gallery-cell {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .spp-gallery-cell #adimage {
        width: 100%;
        aspect-ratio: 1;
        padding: 0 !important;
        margin: 0;
        overflow: hidden;
        position: relative;
        background: #000;
    }

    .spp-gallery-cell #adimage a:has(img) {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 0;
    }

    .spp-gallery-cell #adimage a:has(img) img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        display: block;
        float: none;
    }

    .spp-gallery-cell #adimage a:not(:has(img)) {
        display: none;
    }

    .spp-gallery-cell .bildunterschrift {
        flex: 0 0 auto;
    }
}

/* ─── Größere Darstellung (Desktop, Tablet, Mobile Landscape) — spp Portrait ausgenommen ─── */
@media screen and (min-width: 768px),
       screen and (max-width: 767px) and (orientation: landscape) {
    #mainwrapper {
        font-size: 110%;
    }

    #mainwrapper header #logo img {
        max-width: 246px;
    }

    #filters2 {
        padding-top: 109px;
    }

    #logo2 img {
        max-width: 466px;
    }

    .button,
    .buttontext {
        font-size: 17px;
    }

    #content #mainContent > h1,
    #content #mainContent > h2.section-title,
    body.page-voelker #content > h1 {
        font-size: 2.2em;
    }

    #content #mainContent .element-item h1.symbol,
    #content #mainContent .element-item h2.symbol,
    #content #mainContent .element-item h3.symbol,
    .element-item .symbol,
    #content #mainContent .element-item h3.untertitel,
    .element-item .untertitel {
        font-size: 22px;
    }

    #content #mainContent .element-item h3.name,
    .element-item .name,
    .element-item .weight,
    .element-item .hidden,
    #content #mainContent #authorInfo h2,
    #content #mainContent > h2:not(.symbol):not(.section-title),
    #content #mainContent a h2 {
        font-size: 17px;
    }

    #content #sidebar h2,
    #content footer h2 {
        font-size: 18px;
    }

    #content #mainContent #authorInfo p {
        font-size: 17px;
    }

    footer article {
        font-size: 14px;
    }

    footer article h3 {
        font-size: 1.1em;
    }

    .element-item .bild {
        width: 165px;
        height: 165px;
        margin-bottom: 17px;
    }

    .element-item .bilder {
        width: 165px;
        height: 165px;
        padding-left: 28px;
        padding-top: 28px;
        font-size: 13px;
    }

    .element-item .bilder_pub {
        margin-top: 28px;
        margin-left: 28px;
        font-size: 13px;
    }

    .element-item .number,
    .autor,
    .autor2 {
        font-size: 13px;
    }

    .pfeil {
        left: 28px;
        top: 39px;
    }

    #content #mainContent #bannerImage:has(iframe) {
        height: 462px;
    }

    footer article.footer-spenden .spenden-qr-footer {
        width: 110px;
    }

    .spendenkonto-block .spenden-qr {
        width: 154px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .element-item .bild,
    .element-item .bilder {
        width: 132px;
        height: 132px;
    }
}

/* Optische Zentrierung: Inhalt leicht nach rechts (spp Portrait ausgenommen).
   Geometrisch war #mainwrapper symmetrisch; die schmale Kontakt-Spalte rechts
   lässt den Block optisch links wirken. */
@media screen and (min-width: 1024px) {
    :root {
        --kvi-optical-shift: clamp(28px, 4vw, 64px);
    }

    #mainwrapper {
        margin-left: calc(6% + var(--kvi-optical-shift));
        margin-right: calc(6% - var(--kvi-optical-shift));
    }

    #logo2 {
        left: calc(5% + var(--kvi-optical-shift) - 14px);
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    :root {
        /* max. ~3 % Viewport – sonst negativer margin-right bei width 94 % */
        --kvi-optical-shift: clamp(16px, 2.5vw, 28px);
    }

    #mainwrapper {
        margin-left: calc(3% + var(--kvi-optical-shift));
        margin-right: calc(3% - var(--kvi-optical-shift));
    }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
    :root {
        --kvi-optical-shift: clamp(16px, 3vw, 32px);
    }

    #mainwrapper {
        box-sizing: border-box;
        width: calc(100% - var(--kvi-optical-shift));
        margin-left: var(--kvi-optical-shift);
        margin-right: 0;
        padding-left: 14px;
        padding-right: max(6px, calc(14px - var(--kvi-optical-shift) * 0.5));
    }
}