/* Header-Anordnung auf Desktop: Menü unten, Landavia rechts. */
.site-header .site-width {
    position: relative;
    min-height: 154px;
    padding: 12px 16px;
    box-sizing: border-box;
}

/* Automatische Seitentitel des Themes ausblenden.
 * Gestaltete Überschriften innerhalb des Gutenberg-Inhalts bleiben sichtbar. */
html body.page h1.entry-title,
html body.page article.page > .entry-header .entry-title,
html body.page .site-main > article.page > .entry-header {
    display: none !important;
}

/* Übersicht der kommenden Auftritte. */
.skl-events-archive {
    padding-top: 42px;
    padding-bottom: 42px;
}

.skl-events-title {
    margin-top: 0;
    color: #0876b8;
}

.skl-event-card {
    margin: 0 0 18px;
    padding: 20px;
    border-left: 6px solid #6598cb;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.skl-event-card h2 {
    margin: 0 0 8px;
}

.skl-event-card h2 a {
    color: #0876b8;
    text-decoration: none;
}

.skl-event-meta {
    margin: 0 0 10px;
    color: #3b3b3b;
    font-weight: 700;
}

.skl-event-excerpt > :last-child {
    margin-bottom: 0;
}

.skl-event-admin-actions {
    margin: 0 0 24px;
}

/* 1.0.37: dieselbe Form wie die einheitlichen Buttons (uebernommen.css, EINHEITLICHE BUTTONS) - rund im
   Vereinsblau; bis dahin eckig in #0071b3, die Bigband-Historie in #6598cb. */
.skl-event-add-button,
.skl-event-submit,
.skl-event-period-button {
    display: inline-block;
    padding: .65rem 1.2rem;
    border: 2px solid #0876b8;
    border-radius: 999px;
    background: #0876b8;
    color: #fff !important;
    font: inherit;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: .96rem;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
    box-shadow: 0 7px 17px rgba(8, 118, 184, .2);
    cursor: pointer;
}

.skl-event-add-button:hover,
.skl-event-add-button:focus-visible,
.skl-event-submit:hover,
.skl-event-submit:focus-visible,
.skl-event-period-button:hover,
.skl-event-period-button:focus-visible {
    background: #075d91;
    border-color: #075d91;
}

.skl-events-table-wrap {
    overflow-x: auto;
    margin: 0 0 24px;
    border: 1px solid #d7e0e9;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(31, 75, 116, .08);
}

.skl-events-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.skl-events-table th,
.skl-events-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #dfe6eb;
    vertical-align: top;
}

.skl-events-table th {
    background: #6598cb;
    color: #fff;
    font-weight: 800;
}

.skl-events-table tbody tr:last-child td {
    border-bottom: 0;
}

.skl-events-table tbody tr:nth-child(even) {
    background: #f6f6f2;
}

.skl-events-table tbody tr:hover {
    background: #edf5fb;
}

.skl-events-table a {
    color: #0876b8;
    font-weight: 700;
}

.skl-event-description > :first-child {
    margin-top: 0;
}

.skl-event-description > :last-child {
    margin-bottom: 8px;
}

.skl-event-description img,
.skl-event-detail-text img {
    max-width: 100%;
    height: auto;
}

.skl-event-details-link {
    display: inline-block;
    margin-top: 4px;
    font-size: .9rem;
}

.skl-event-period-actions {
    margin: 30px 0 0;
    text-align: center;
}

/* 1.0.37: .skl-event-period-button ohne eigenes Hellblau - Form wie oben. */

.skl-event-notice {
    margin: 0 0 22px;
    padding: 14px 18px;
    border-left: 5px solid #6598cb;
    border-radius: 6px;
    background: #fff;
}

.skl-event-notice-success {
    border-left-color: #2d7d46;
    background: #f0f8f2;
}

.skl-event-notice-error {
    border-left-color: #b42318;
    background: #fff3f2;
}

.skl-event-notice ul {
    margin-bottom: 0;
}

.skl-event-form-page {
    max-width: 920px;
    padding-top: 42px;
    padding-bottom: 64px;
}

.skl-event-form-heading {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
    margin-bottom: 28px;
}

.skl-event-form-heading h1 {
    margin: 0;
    color: #0876b8;
}

.skl-event-form-kicker {
    margin: 0 0 5px;
    color: #6598cb;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.skl-event-form {
    padding: clamp(22px, 4vw, 38px);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(31, 75, 116, .12);
}

.skl-event-form label {
    display: block;
    margin: 0 0 7px;
    color: #3b3b3b;
    font-weight: 700;
}

.skl-event-form input,
.skl-event-form select,
.skl-event-form textarea {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 22px;
    padding: 11px 12px;
    border: 1px solid #9aa6af;
    border-radius: 6px;
    background: #fff;
    color: #3b3b3b;
    font: inherit;
}

.skl-event-form input:focus,
.skl-event-form select:focus,
.skl-event-form textarea:focus {
    outline: 3px solid rgba(101, 152, 203, .32);
    border-color: #0876b8;
}

.skl-event-form .wp-editor-wrap {
    margin-bottom: 22px;
}

.skl-event-form .wp-editor-container {
    overflow: hidden;
    border: 1px solid #9aa6af;
    border-radius: 6px;
}

.skl-event-form .wp-editor-area {
    min-height: 260px;
    margin: 0;
    border: 0;
    border-radius: 0;
}

.skl-event-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.skl-event-form-help {
    color: #66717c;
    font-size: .9rem;
}

.skl-optional {
    color: #66717c;
    font-weight: 400;
}

.skl-news-featured-image {
    margin: 0 0 24px;
    padding: 18px;
    border: 1px solid #c8d0d6;
    border-radius: 8px;
}

.skl-news-featured-image legend {
    padding: 0 7px;
    color: #3b3b3b;
    font-weight: 700;
}

.skl-news-thumbnail-preview {
    display: grid;
    min-height: 120px;
    margin-bottom: 14px;
    padding: 12px;
    place-items: center;
    border: 1px dashed #9aa6af;
    border-radius: 7px;
    background: #f6f8fa;
    color: #66717c;
}

.skl-news-thumbnail-preview img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 280px;
    border-radius: 5px;
}

.skl-news-image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.skl-news-upload-status {
    min-height: 1.5em;
    margin: 8px 0 4px;
    color: #176b3a;
    font-weight: 700;
}

.skl-news-upload-status.skl-news-upload-error {
    color: #b42318;
}

.skl-event-secondary-button {
    padding: 9px 14px;
    border: 1px solid #0876b8;
    border-radius: 6px;
    background: #f6f6f2;
    color: #0876b8;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.skl-event-secondary-button:hover,
.skl-event-secondary-button:focus-visible {
    background: #eef6fb;
}

.skl-event-detail {
    max-width: 980px;
    padding-top: 42px;
    padding-bottom: 64px;
}

.skl-event-detail-heading {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
    margin-bottom: 28px;
}

.skl-event-detail-heading h1 {
    margin: 0;
    color: #0876b8;
}

.skl-event-detail-fields {
    overflow: hidden;
    margin: 0;
    border: 1px solid #d7e0e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(31, 75, 116, .1);
}

.skl-event-detail-fields > div {
    display: grid;
    grid-template-columns: minmax(160px, .35fr) 1fr;
    border-bottom: 1px solid #dfe6eb;
}

.skl-event-detail-fields > div:last-child {
    border-bottom: 0;
}

.skl-event-detail-fields dt,
.skl-event-detail-fields dd {
    margin: 0;
    padding: 15px 18px;
}

.skl-event-detail-fields dt {
    background: #edf5fb;
    color: #245b8e;
    font-weight: 800;
}

.skl-event-detail-fields dd > :first-child {
    margin-top: 0;
}

.skl-event-detail-fields dd > :last-child {
    margin-bottom: 0;
}

.skl-event-detail-back {
    margin-top: 24px;
}

@media (max-width: 620px) {
    .skl-event-form-heading {
        display: block;
    }

    .skl-event-form-heading > a {
        display: inline-block;
        margin-top: 12px;
    }

    .skl-event-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .skl-event-detail-heading {
        display: block;
    }

    .skl-event-detail-heading .skl-event-add-button {
        margin-top: 14px;
    }

    .skl-event-detail-fields > div {
        display: block;
    }

    .skl-events-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .skl-events-table,
    .skl-events-table tbody,
    .skl-events-table tr,
    .skl-events-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .skl-events-table thead {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .skl-events-table tr {
        margin-bottom: 18px;
        overflow: hidden;
        border: 1px solid #d7e0e9;
        border-left: 5px solid #6598cb;
        border-radius: 9px;
        background: #fff !important;
        box-shadow: 0 3px 12px rgba(31, 75, 116, .08);
    }

    .skl-events-table td {
        display: grid;
        grid-template-columns: minmax(110px, .42fr) 1fr;
        gap: 12px;
        padding: 11px 13px;
    }

    .skl-events-table td::before {
        content: attr(data-label);
        color: #245b8e;
        font-weight: 800;
    }
}

.site-header .site-branding {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-header .site-title {
    display: none !important;
}

.site-header .custom-logo-link {
    display: block !important;
    margin-left: auto !important;
}

.site-header .custom-logo {
    display: block !important;
    width: 130px !important;
    height: 130px !important;
    object-fit: contain !important;
}

.site-header .site-width > nav {
    position: absolute;
    right: 170px;
    bottom: 12px;
    left: 16px;
    width: auto;
}



.skl-menu-toggle,
.skl-submenu-toggle {
    display: none;
}

/* Moderne Startseite. */
.skl-home-main {
    background: #f6f6f2;
}

.skl-home {
    padding-top: 42px;
    padding-bottom: 64px;
}

.skl-home-social-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    box-sizing: border-box;
    padding: 5px 9px;
    border-radius: 7px;
    background: #f6f6f2;
    color: #273746;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(31, 75, 116, .08);
}

.skl-home-social-link span:last-child {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}



.skl-home-social-link:hover,
.skl-home-social-link:focus-visible{
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(31, 75, 116, .14);
}

.skl-home-social-link svg {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
}

.skl-home-social-icon {
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 5px;
    color: #fff;
    font: 800 1rem/1 Arial, sans-serif;
}

.skl-home-social-facebook .skl-home-social-icon {
    background: #1877f2;
}

.skl-home-social-instagram svg {
    fill: none;
    stroke: #c13584;
    stroke-width: 2;
}



.skl-home-social-youtube svg rect {
    fill: #f00;
}

.skl-home-social-youtube svg path {
    fill: #fff;
}

.skl-home-social-paypal .skl-home-social-icon {
    background: #0070ba;
    font-style: italic;
}

/* Original-Markenbilder statt nachgebauter Icons fuer Instagram und PayPal
   (identisch zu den Test-Themes stadtkapelle-landau-alt/-alt2). */
.skl-home-social-img-instagram {
    display: block;
    width: 21px;
    height: 21px;
    border-radius: 5px;
    object-fit: cover;
}



.skl-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(220px, .65fr);
    gap: 26px;
    align-items: center;
    padding: clamp(22px, 3vw, 34px);
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(135deg, #3f78ae 0%, #6598cb 58%, #82add5 100%);
    color: #fff;
    box-shadow: 0 18px 45px rgba(31, 75, 116, .2);
}

.skl-home-eyebrow,
.skl-home-section-kicker {
    margin: 0 0 8px;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.skl-home-hero h1 {
    margin: 0;
    color: #fff;
    font: 700 clamp(2.35rem, 4.5vw, 3.7rem)/.98 Georgia, serif;
}

.skl-home-lead {
    max-width: 760px;
    margin: 14px 0 0;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.45;
}

.skl-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* 0.7.63: Die Symbolleiste bekommt eine eigene Zeile. Ohne den Behaelter
   hingen Knoepfe und Symbole als Geschwister im selben Flex-Fluss und
   brachen mitten in der Symbolreihe um. flex-basis:100% zwingt den
   Behaelter auf eine neue Zeile; darin fliessen die Symbole wieder
   nebeneinander. */
.skl-home-actions .skl-home-socials {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.skl-home-button {
    display: inline-block;
    padding: 9px 15px;
    border: 2px solid #fff;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
}

.skl-home-button-light {
    border-color: #f6f6f2;
    background: #f6f6f2;
    color: #0876b8;
}



.skl-home-button:hover,
.skl-home-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
}

.skl-home-hero-note {
    display: grid;
    place-content: center;
    min-height: 120px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    text-align: center;
    backdrop-filter: blur(5px);
}

.skl-home-hero-note strong {
    display: block;
    font: 700 1.65rem/1 Georgia, serif;
}

.skl-home-hero-note span {
    display: block;
    margin-top: 10px;
    line-height: 1.4;
}

.skl-home-quicklinks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: -14px 24px 0;
    position: relative;
    z-index: 2;
}

.skl-home-quicklinks a {
    padding: 20px 22px;
    border-radius: 12px;
    background: #fff;
    color: #3b3b3b;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(31, 75, 116, .12);
}

.skl-home-quicklinks a:hover,
.skl-home-quicklinks a:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(31, 75, 116, .18);
}

.skl-home-quicklinks span,
.skl-home-quicklinks strong {
    display: block;
}

.skl-home-quicklinks span {
    margin-bottom: 5px;
    color: #66717c;
    font-size: .88rem;
}

.skl-home-quicklinks strong {
    color: #0876b8;
    font-size: 1.15rem;
}

/* 2.1.5 (01.10.2026, abends): Klassische Startseite, Startseitenfeld "Buttons auf der klassischen Startseite" =
   "Darunter als drei Karten" (.skl-home--karten): Am RECHNER keine Buttons im blauen Feld und kein "Mitmachen" -
   die drei Karten stehen darunter. Am Smartphone (bis 760 px) bleibt alles wie bei "Im blauen Feld" (Block
   @media (max-width: 760px) weiter unten). Wunsch des Benutzers. */
@media (min-width: 761px) {
    .skl-home--karten .skl-home-actions .skl-home-button,
    .skl-home-mitmachen--nur-schmal {
        display: none;
    }
}

.skl-home-intro,
.skl-home-section {
    margin-top: 64px;
}

.skl-home-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
    margin-bottom: 24px;
}

.skl-home-section-kicker {
    color: #6598cb;
}

.skl-home-section h2 {
    margin: 0;
    color: #245b8e;
    font: 700 clamp(2rem, 4vw, 3.3rem)/1.05 Georgia, serif;
}

.skl-home-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.skl-home-news-card {
    overflow: hidden;
    border: 1px solid #e1e6e8;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(31, 75, 116, .08);
}

.skl-home-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(31, 75, 116, .15);
}

/* 01.09.2026: Rahmen von 16/9 auf 3/2 und der Ausschnitt sitzt hoeher.
   Grund: Die Haelfte der Beitragsbilder ist HOCHKANT (gemessen 0,56 bis
   1,10). Bei object-fit:cover in einem 16/9-Rahmen blieben davon nur
   32 bis 62 Prozent der Bildhoehe stehen, und weil mittig beschnitten
   wird, fiel oben der Kopf weg. 3/2 zeigt mehr, und object-position
   50% 28% legt das Fenster in die obere Bildhaelfte, wo Gesichter sind.
   Bei querformatigen Bildern aendert beides nichts - die werden gar
   nicht senkrecht beschnitten. Gilt auch fuer das News-Archiv, das
   dieselbe Kachel verwendet. */
.skl-home-news-image {
    display: block;
    aspect-ratio: 4 / 3; /* 0.7.5: 4/3 statt 3/2 - etwa 13 % hoeher */
    overflow: hidden;
    background: linear-gradient(135deg, #dceaf5, #6598cb);
    text-decoration: none;
}

.skl-home-news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 28%;
}

/* 0.7.5: Hochformate (Klasse aus front-page.php bzw. news-archiv.php) werden ganz gezeigt -
   mittig auf dem blauen Verlauf, mit Rand links und rechts statt beschnitten in voller Breite. */
.skl-home-news-image--hoch img {
    object-fit: contain;
    object-position: 50% 50%;
}

.skl-home-news-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: rgba(255, 255, 255, .9);
    font: 700 4rem/1 Georgia, serif;
}

.skl-home-news-body {
    padding: 22px;
}

/* Öffentliches News-Archiv mit Suche und zwölf Meldungen pro Seite. */
.skl-news-archive-main {
    background: #f6f6f2;
}

.skl-news-archive {
    padding-top: 42px;
    padding-bottom: 64px;
}

.skl-news-archive-heading {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
    margin-bottom: 26px;
}

/* 1.0.37: wie die Ueberschrift der Kopfbox statt Georgia. */
.skl-news-archive-heading h1 {
    margin: 0;
    color: #0876b8;
    font: 750 clamp(1.75rem, 4vw, 2.65rem)/1.15 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    letter-spacing: -.025em;
}

.skl-news-search {
    margin: 0 0 30px;
    padding: 20px;
    border: 1px solid #d7e0e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(31, 75, 116, .08);
}

.skl-news-search label {
    display: block;
    margin-bottom: 8px;
    color: #245b8e;
    font-weight: 800;
}

.skl-news-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.skl-news-search input {
    min-width: min(100%, 360px);
    min-height: 44px;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid #9aa6af;
    border-radius: 7px;
    background: #f6f6f2;
    color: #273746;
    font: inherit;
}

.skl-news-search button {
    min-height: 44px;
    padding: .65rem 1.2rem;
    border: 2px solid #0876b8;
    border-radius: 999px;
    background: #0876b8;
    color: #fff;
    font: inherit;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: .96rem;
    font-weight: 800;
    line-height: 1.25;
    box-shadow: 0 7px 17px rgba(8, 118, 184, .2);
    cursor: pointer;
}

.skl-news-search button:hover,
.skl-news-search button:focus-visible {
    background: #075d91;
    border-color: #075d91;
}

.skl-news-search-row > a {
    color: #0876b8;
    font-weight: 700;
}

.skl-news-search-result {
    margin: -12px 0 22px;
    color: #4d5862;
    font-weight: 700;
}

.skl-news-archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.skl-news-archive-grid .skl-home-news-card h2 {
    margin: 0 0 12px;
    color: #075d91;
    font: 750 clamp(1.1rem, 1.6vw, 1.2rem)/1.3 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.skl-news-archive-grid .skl-home-news-card h2 a {
    color: inherit;
    text-decoration: none;
}

/* BLAETTERLEISTE - alle Blaetterleisten der Website: die News (Plugin "News
   und Auftritte", paginate_links() als Liste) und Suche und Uebersichten des
   Kind-Themes (the_posts_pagination(), seit Kind 1.0.75 ebenfalls als Liste
   und mit der Klasse pagination). Angesetzt wird an .navigation.pagination -
   beide tragen sie. Bis 1.0.38 hatte die Suche eine eigene Form im
   Kind-Theme (.m-blaettern: rund mit Rand, 40 px) und die News diese hier
   eckig in #0071b3.

   DIE FALLE: paginate_links() vergibt die Klasse page-numbers ZWEIMAL - an
   das umgebende <ul> UND an jeden Eintrag darin. Eine Regel auf
   .page-numbers trifft also beides. Frueher stand hier display:flex fuer
   .page-numbers; das traf auch <span class="page-numbers dots"> - die
   Auslassung stand dadurch ohne Innenabstand und ausserhalb der Grundlinie.
   Deshalb: Rasterregel auf ul.page-numbers, Kaestchenregel auf
   .page-numbers:not(ul).

   ZUR GESTALTUNG (1.0.39, 29.09.2026, Wahl "C" des Benutzers von einer
   Vergleichsseite): die Form der einheitlichen Buttons (uebernommen.css) -
   rund, Vereinsblau, 44 px zum Tippen. Nur die AKTUELLE Seite ist gefuellt;
   die uebrigen Zahlen sind blosse Ziele und bleiben ruhig. Zurueck und Weiter
   sind keine Ziele, sondern Richtungen: weiss mit blauem Rand, aussen. Die
   Auslassung "..." in #5a7286 (Kontrast 5,0; vorher #97a3ad mit 2,6).

   AM SMARTPHONE (bis 560 px) steht die Leiste in EINER Zeile:
   "<- Zurueck   Seite 10 von 19   Weiter ->". Die Zahlen sind dort
   ausgeblendet. "Seite x von y" haengt skl_blaettern_stand() (functions.php)
   an jede Blaetterleiste an; breiter ist es ausgeblendet. Damit Zurueck,
   Stand und Weiter nebeneinander stehen, wird das <ul> mit display:contents
   aufgeloest - die Eintraege ruecken in den umgebenden Block (bei den News
   die <nav>, im Kind-Theme dessen <div class="nav-links">). */
.navigation.pagination {
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid #dfe6ec;
}

.navigation.pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigation.pagination ul.page-numbers > li {
    display: flex;
    margin: 0;
}

.navigation.pagination li:has(> .prev) {
    margin-right: auto;
}

.navigation.pagination li:has(> .next) {
    margin-left: auto;
}

.navigation.pagination .page-numbers:not(ul) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: none;
    box-shadow: none;
    color: #0876b8;
    font-weight: 700;
    text-decoration: none;
}

.navigation.pagination a.page-numbers:hover {
    background: #eaf4fb;
    color: #075d91;
}

.navigation.pagination a.page-numbers:focus-visible {
    outline: 3px solid #f2cf22;
    outline-offset: 2px;
}

/* Die Klasse steht mit, damit die Regel spezifischer ist als die
   :not(ul)-Regel darueber - sonst gewinnt deren background:none. */
.navigation.pagination .page-numbers.current {
    border-color: #0876b8;
    background: #0876b8;
    color: #fff;
    font-weight: 800;
}

/* Zurueck und Weiter wie der Button "weiss mit Rand". */
.navigation.pagination .page-numbers:is(.prev, .next) {
    padding: 0 1.1rem;
    border-color: #0876b8;
    background: #fff;
    font-size: .96rem;
    font-weight: 800;
}

.navigation.pagination a.page-numbers:is(.prev, .next):hover {
    border-color: #075d91;
    background: #eaf4fb;
    color: #075d91;
}

/* Die Auslassung fuehrt nirgendwohin, also bekommt sie auch kein Kaestchen. */
.navigation.pagination .page-numbers.dots {
    min-width: 26px;
    padding: 0;
    border: 0;
    color: #5a7286;
}

.navigation.pagination .skl-blaettern-stand {
    display: none;
}

@media (max-width: 560px) {
    .navigation.pagination:has(> ul.page-numbers),
    .navigation.pagination .nav-links:has(> ul.page-numbers) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .navigation.pagination ul.page-numbers {
        display: contents;
    }

    .navigation.pagination ul.page-numbers > li {
        display: none;
    }

    .navigation.pagination ul.page-numbers > li:has(> .prev) {
        display: flex;
        order: 1;
        margin: 0;
    }

    .navigation.pagination .skl-blaettern-stand {
        display: block;
        order: 2;
        flex: 1 1 auto;
        color: #203243;
        font-size: .96rem;
        font-weight: 700;
        text-align: center;
        white-space: nowrap;
    }

    .navigation.pagination ul.page-numbers > li:has(> .next) {
        display: flex;
        order: 3;
        margin: 0;
    }

    .navigation.pagination .page-numbers:is(.prev, .next) {
        padding: 0 .7rem;
        font-size: .9rem;
    }
}

.skl-home-news-date {
    margin: 0 0 8px;
    color: #66717c;
    font-size: .86rem;
    font-weight: 700;
}

.skl-home-news-card h3 {
    margin: 0 0 12px;
    color: #075d91;
    font: 750 clamp(1.1rem, 1.6vw, 1.2rem)/1.3 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* Traegt die Verweise rechts neben der Ueberschrift. Bei Gaesten steht
   nur einer darin, dann verhaelt sie sich wie der einzelne Verweis der
   Auftritte. */
.skl-home-section-links {
    display: flex;
    gap: 1.25rem;
    align-items: end;
    flex-wrap: wrap;
}

.skl-home-news-card h3 a,
.skl-home-read-more,
.skl-home-event h3 a,
.skl-home-all-link {
    color: #0876b8;
    text-decoration: none;
}

.skl-home-news-body > p:not(.skl-home-news-date) {
    color: #4d5862;
    line-height: 1.55;
}

.skl-home-read-more,
.skl-home-all-link {
    font-weight: 800;
}

.skl-home-events-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.skl-home-event {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 20px;
    align-items: center;
    padding: 20px;
    border-left: 5px solid #6598cb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(31, 75, 116, .08);
}

.skl-home-event-date {
    display: block;
    padding: 12px 8px;
    border-radius: 9px;
    background: #dceaf5;
    color: #245b8e;
    text-align: center;
}

.skl-home-event-date strong,
.skl-home-event-date span {
    display: block;
}

/* 0.7.52: FESTE PIXEL, nicht rem. Die Plakette ist 88 px breit, ihre Schrift
   stand aber in rem - wer im Browser eine groessere Grundschrift eingestellt
   hat, bekam "SEP. 2026" auf zwei oder drei Zeilen, und die Karte sah in
   jedem Browser anders aus. Am 16.09.2026 gemeldet (Edge gegen Opera) und
   nachgemessen: bei 16 px Grundschrift eine Zeile, ab 18 px Umbruch. Mit
   festen Pixeln bleibt sie von 16 bis 24 px unveraendert. Dieselbe Lehre wie
   beim Umbau der Kopfleiste (Kind-Theme 1.0.28): Wo eine Box in px steht,
   gehoert die Schrift darin auch in px. */
.skl-home-event-date strong {
    font: 800 32px/1 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.skl-home-event-date span {
    margin-top: 5px;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    /* Der Monat gehoert zum Jahr - nie zwischen ihnen umbrechen. */
    white-space: nowrap;
}

.skl-home-event h3 {
    margin: 0 0 7px;
    color: #075d91;
    font: 750 clamp(1.1rem, 1.6vw, 1.2rem)/1.3 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.skl-home-event p {
    margin: 0;
    color: #4d5862;
}

.skl-home-news-card,
.skl-home-quicklinks a,
.skl-home-button {
    transition: transform .2s ease, box-shadow .2s ease;
}

/* Vollständiger Fußbereich. */
.site-footer {
    display: none !important;
}



















/*
 * Bigband-Slideshow: immer genau ein Bild, volle verfuegbare Breite und
 * eigenstaendige Bedienung. Die Selektoren fuer Seite 3256 reparieren auch
 * die nachfolgenden Pressebilder, bei denen im importierten HTML "with"
 * statt "width" eingetragen war.
 */
.skl-bigband-slider {
    width: 100% !important;
    max-width: 1180px;
    margin: 10px auto 18px;
}

.skl-bigband-slider-stage {
    position: relative;
    width: 100% !important;
    overflow: hidden;
    border-radius: 10px;
    background: #132438;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .16);
}

.skl-bigband-slide {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain;
    opacity: 0;
    animation: skl-bigband-autoplay 40s infinite;
}

.skl-bigband-slide:first-of-type {
    position: relative;
}

.skl-bigband-slide:nth-of-type(1) { animation-delay: 0s; }
.skl-bigband-slide:nth-of-type(2) { animation-delay: 4s; }
.skl-bigband-slide:nth-of-type(3) { animation-delay: 8s; }
.skl-bigband-slide:nth-of-type(4) { animation-delay: 12s; }
.skl-bigband-slide:nth-of-type(5) { animation-delay: 16s; }
.skl-bigband-slide:nth-of-type(6) { animation-delay: 20s; }
.skl-bigband-slide:nth-of-type(7) { animation-delay: 24s; }
.skl-bigband-slide:nth-of-type(8) { animation-delay: 28s; }
.skl-bigband-slide:nth-of-type(9) { animation-delay: 32s; }
.skl-bigband-slide:nth-of-type(10) { animation-delay: 36s; }

@keyframes skl-bigband-autoplay {
    0%, 9.7% { opacity: 1; }
    10%, 100% { opacity: 0; }
}

.skl-bigband-slider.is-js-ready .skl-bigband-slide {
    position: absolute;
    opacity: 0;
    animation: none !important;
}

.skl-bigband-slider.is-js-ready .skl-bigband-slide.is-active {
    position: relative;
    opacity: 1;
}

.skl-bigband-slide[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .skl-bigband-slide {
        display: none;
        opacity: 1;
        animation: none !important;
    }

    .skl-bigband-slide:first-of-type,
    .skl-bigband-slider.is-js-ready .skl-bigband-slide.is-active {
        position: relative;
        display: block;
    }
}

.skl-bigband-slider-button {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    width: 46px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: rgba(0, 0, 0, .54);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    place-items: center;
    transform: translateY(-50%);
    cursor: pointer;
}

.skl-bigband-slider-button:hover,
.skl-bigband-slider-button:focus-visible {
    background: rgba(8, 118, 184, .94);
    outline: 3px solid #fff;
    outline-offset: -4px;
}

.skl-bigband-slider-previous {
    left: 12px;
}

.skl-bigband-slider-next {
    right: 12px;
}

.skl-bigband-slider-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    min-height: 34px;
    padding-top: 8px;
}

.skl-bigband-slider-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.skl-bigband-slider-dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 1px solid #6598cb;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.skl-bigband-slider-dot.is-active {
    background: #0876b8;
}

.skl-bigband-slider-status {
    margin: 0;
    color: #4d5964;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.page-id-3256 main img,
.page-id-3256 .entry-content img,
.page-id-3256 .content img,
.page-id-3256 main a img,
.page-id-3256 .entry-content a img,
.page-id-3256 .content a img {
    box-sizing: border-box;
    max-width: 100% !important;
    height: auto !important;
}

.page-id-3256 main > img,
.page-id-3256 .entry-content > img,
.page-id-3256 .entry-content > p > a > img,
.page-id-3256 .entry-content > div > a > img {
    width: 100% !important;
}

@media (max-width: 760px) {
    .site-header .site-width {
        display: grid !important;
        grid-template-columns: 1fr auto;
        align-items: center;
        min-height: 0 !important;
        padding: 12px 16px !important;
    }

    .site-header .site-branding {
        grid-column: 2;
        grid-row: 1;
    }

    

    .site-header .custom-logo {
        width: 72px !important;
        height: 72px !important;
    }

    .skl-menu-toggle {
        grid-column: 1;
        grid-row: 1;
        display: inline-flex !important;
        width: max-content;
        align-items: center;
        gap: 9px;
        padding: 10px 14px;
        border: 2px solid #fff;
        border-radius: 4px;
        background: transparent;
        color: #fff;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .skl-menu-toggle-icon {
        font-size: 1.35rem;
        line-height: 1;
    }

    .site-header .site-width > nav {
        position: static !important;
        grid-column: 1 / -1;
        grid-row: 3;
        display: none;
        width: 100%;
        margin-top: 12px;
    }

    .site-header .site-width > nav.skl-menu-open {
        display: block !important;
    }

    .site-header nav .primary-menu {
        display: block !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .site-header nav .primary-menu > li,
    .site-header nav .primary-menu .sub-menu > li {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.28);
    }

    .site-header nav .primary-menu a {
        display: block !important;
        padding: 12px 46px 12px 12px !important;
        border: 0 !important;
        white-space: normal !important;
        color: #fff !important;
    }

    .site-header nav .primary-menu .menu-item-has-children > .sub-menu {
        position: static !important;
        display: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 0 16px !important;
        background: rgba(0, 0, 0, 0.10) !important;
        box-shadow: none !important;
    }

    .site-header nav .primary-menu .menu-item-has-children.skl-submenu-open > .sub-menu {
        display: block !important;
    }

    .site-header nav .primary-menu .sub-menu a {
        color: #fff !important;
    }

    .skl-submenu-toggle {
        position: absolute;
        top: 3px;
        right: 0;
        z-index: 2;
        display: block !important;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 1.25rem;
        line-height: 42px;
        cursor: pointer;
    }

    .skl-submenu-open > .skl-submenu-toggle {
        transform: rotate(180deg);
    }

    .skl-home {
        padding-top: 20px;
        padding-bottom: 42px;
    }

    .skl-home-hero {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 20px;
        border-radius: 14px;
    }

    .skl-home-hero-note {
        min-height: 0;
        border-radius: 12px;
    }

    /* 2.0.4 (01.10.2026): Am Smartphone stehen Ueberschrift, Text, Buttons und Symbole
       im blauen Block mittig - wie das Siegel "Seit 1928" darunter. Am Rechner bleibt
       alles links (zwei Spalten, das Siegel rechts). Wunsch des Benutzers. */
    .skl-home-hero-copy {
        text-align: center;
    }

    .skl-home-actions,
    .skl-home-actions .skl-home-socials {
        justify-content: center;
    }

    .skl-home-quicklinks {
        grid-template-columns: 1fr;
        margin: 16px 0 0;
    }

    /* 2.1.5: Bei "Darunter als drei Karten" am Smartphone keine Karten - dort stehen die Buttons im
       blauen Feld und unten "Mitmachen", wie bei "Im blauen Feld" (Regel fuer den Rechner oben). */
    .skl-home--karten .skl-home-quicklinks {
        display: none;
    }

    .skl-home-intro,
    .skl-home-section {
        margin-top: 44px;
    }

    .skl-home-section-heading {
        display: block;
    }

    .skl-home-all-link {
        display: inline-block;
        margin-top: 14px;
    }

    .skl-home-news-grid,
    .skl-home-events-grid {
        grid-template-columns: 1fr;
    }

    .skl-news-archive-heading {
        display: block;
    }

    .skl-news-archive-heading .skl-event-add-button {
        margin-top: 14px;
    }

    .skl-news-search-row {
        display: grid;
    }

    .skl-news-search input,
    .skl-news-search button {
        width: 100%;
    }

    .skl-home-event {
        grid-template-columns: 72px 1fr;
        gap: 14px;
        padding: 16px;
    }

    

    

    

    

    .skl-bigband-slider {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0;
        margin-left: 0;
    }

    .skl-bigband-slider-stage {
        width: 100% !important;
        border-radius: 5px;
    }

    .skl-bigband-slider-button {
        width: 40px;
        height: 48px;
        font-size: 1.45rem;
    }

    .skl-bigband-slider-previous {
        left: 6px;
    }

    .skl-bigband-slider-next {
        right: 6px;
    }

    .page-id-3256 main img,
    .page-id-3256 .entry-content img,
    .page-id-3256 .content img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Touch-Menü 1.9.27: Auf Smartphone und Tablet bleibt ein angetipptes
 * Untermenü sichtbar, bis ein Unterpunkt, ein anderer Hauptpunkt oder ein
 * Bereich außerhalb des Menüs gewählt wird. Desktop-Hover bleibt unverändert. */
html.skl-touch-device .site-header nav .primary-menu .menu-item-has-children.skl-submenu-open > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    max-height: none !important;
}

/* Bigband-Auftritte 1.9.28: identische Kartenansicht wie /auftritte/.
 * Der Brass-Connection-Filter und die Auftrittsdaten bleiben unverändert. */
.skl-ar-seite,
.skl-ar-seite * {
    box-sizing: border-box;
}

.skl-ar-seite {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 3rem 1rem 4rem;
    overflow: hidden;
}

.skl-ar-inhalt {
    width: min(1180px, 100%);
    max-width: 100%;
    min-width: 0;
    margin: 0 auto !important;
}

.skl-ar-inhalt h1 {
    max-width: 100%;
    margin: 0 0 1.5rem;
    color: #0879b9;
    overflow-wrap: anywhere;
}

/* 1.0.37: rund im Vereinsblau wie die uebrigen Buttons (bis dahin eckig in #087fbd). Nur noch hier gestaltet -
   die zweite Regel im Plugin News und Auftritte ist mit 1.7.47 entfernt. */
.skl-ar-neu {
    display: inline-block;
    padding: .65rem 1.2rem;
    color: #fff !important;
    background: #0876b8;
    border: 2px solid #0876b8;
    border-radius: 999px;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: .96rem;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none !important;
    box-shadow: 0 7px 17px rgba(8, 118, 184, .2);
}

.skl-ar-neu:hover,
.skl-ar-neu:focus-visible {
    background: #075d91;
    border-color: #075d91;
}

.skl-ar-tabelle {
    max-width: 100%;
    margin-top: 2rem;
    overflow-x: auto;
    border: 1px solid #d5e1eb;
    border-radius: 14px;
    background: #fff;
}

.skl-ar-tabelle table {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
}

.skl-ar-tabelle th {
    padding: 1rem;
    color: #fff;
    background: #679bca;
    text-align: left;
}

.skl-ar-tabelle td {
    padding: 1rem;
    vertical-align: top;
    border-top: 1px solid #e1e7ec;
    overflow-wrap: anywhere;
    word-break: normal;
}

.skl-ar-tabelle td p {
    margin: 0 0 .45rem;
}

.skl-ar-tabelle a {
    color: #0073aa;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.skl-ar-details {
    display: inline-block;
    margin-top: .35rem;
}

@media (max-width: 760px) {
    .skl-ar-seite {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 2rem .8rem 3rem !important;
    }

    .skl-ar-inhalt {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .skl-ar-tabelle {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden;
        border: 0;
        background: transparent;
    }

    .skl-ar-tabelle thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .skl-ar-tabelle table,
    .skl-ar-tabelle tbody,
    .skl-ar-tabelle tr,
    .skl-ar-tabelle td {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .skl-ar-tabelle tr {
        margin: 0 0 1rem !important;
        padding: .45rem 1rem;
        overflow: hidden;
        border: 1px solid #d5e1eb;
        border-top: 6px solid #679bca;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 7px 18px rgba(34, 73, 106, .1);
    }

    .skl-ar-tabelle td {
        display: grid;
        grid-template-columns: minmax(7rem, 36%) minmax(0, 1fr);
        gap: .7rem;
        padding: .65rem 0;
        border-top: 1px solid #e1e7ec;
    }

    .skl-ar-tabelle td:first-child {
        border-top: 0;
    }

    .skl-ar-tabelle td::before {
        content: attr(data-label);
        min-width: 0;
        color: #0879b9;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

    .skl-ar-neu {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .skl-ar-tabelle td {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

    .skl-ar-tabelle td::before {
        display: block;
    }

    .skl-ar-inhalt h1 {
        font-size: clamp(2rem, 10vw, 2.7rem);
    }
}

html.skl-touch-device .site-header nav .primary-menu .menu-item-has-children.skl-submenu-open {
    z-index: 99999 !important;
}

html.skl-touch-device .site-header nav .primary-menu .menu-item-has-children.skl-submenu-open > a,
html.skl-touch-device .site-header nav .primary-menu .menu-item-has-children.skl-submenu-open > .skl-submenu-toggle {
    position: relative;
    z-index: 100000;
}


/* ===================================================================
   0.7.65: OFFENE NEWS-KARTEN AM SMARTPHONE

   Unter 620 Bildpunkten stehen die ersten beiden Karten der Startseite
   offen da - ganzer Text statt Anriss, Bild in seinen eigenen Massen.
   Am Rechner aendert sich nichts.

   Dieselbe Regel wie im modernen Kind-Theme seit 1.0.41; sie steht hier,
   weil alle drei klassischen Themes dieses Stilblatt laden.
   =================================================================== */

.skl-home-news-voll { display: none; }

@media (max-width: 620px) {
    .skl-home-news-card--offen .skl-home-news-body > p:not(.skl-home-news-date) { display: none; }
    /* "Weiterlesen" verschwindet nur, wenn wirklich alles dasteht. Wurde
       nach vier Absaetzen geschnitten, bleibt es - und die letzte Zeile
       bekommt drei Punkte, damit der Schnitt zu sehen ist. */
    .skl-home-news-card--offen:not(.skl-home-news-card--gekuerzt) .skl-home-read-more { display: none; }
    .skl-home-news-card--gekuerzt .skl-home-news-voll > p:last-of-type::after { content: " \2026"; }
    .skl-home-news-card--offen .skl-home-news-voll { display: block; font-size: .95rem; line-height: 1.6; }
    .skl-home-news-card--offen .skl-home-news-voll > :first-child { margin-top: 0; }
    .skl-home-news-card--offen .skl-home-news-voll > :last-child { margin-bottom: 0; }
    .skl-home-news-card--offen .skl-home-news-voll img { height: auto; max-width: 100%; border-radius: 8px; }
    .skl-home-news-card--offen .skl-home-news-image { aspect-ratio: auto; }
    .skl-home-news-card--offen .skl-home-news-image img { height: auto; object-fit: contain; }
}

/* 1.0.24 (28.09.2026): Startseite der klassischen Themes in der Form Ue-C wie alle anderen
   Seiten (seit 1.0.19) - NUR auf der Startseite. Dieselben Klassen stehen in den Terminkarten
   von /auftritte/ und den Terminseiten und in der News-Uebersicht; dort bleiben die
   Ueberschriften, wie sie sind. :where() gibt keine Gewichtung dazu - die Regeln wiegen so
   viel wie die allgemeinen oben und gewinnen nur, weil sie spaeter stehen (wie 1.0.19).
   1.0.37 (29.09.2026): Die Kartentitel (h3) haben diese Form jetzt UEBERALL - auch in den Terminkarten
   und der News-Uebersicht (Wunsch des Benutzers: 'an die uebrigen angleichen'). Ihre Regeln stehen oben bei
   .skl-home-news-card h3 und .skl-home-event h3; hier bleibt fuer sie nur die Farbe der Verweise darin.
   Die Abschnittsueberschriften (h2) bleiben auf die Startseite beschraenkt. */
:where(body.home) .skl-home-section-heading {
    padding-bottom: .8rem;
    border-bottom: 3px solid #d6e9f6;
}
:where(body.home) .skl-home-section h2 {
    color: #0876b8;
    font: 800 clamp(1.45rem, 2.6vw, 1.875rem)/1.25 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.skl-home-news-card h3 a,
.skl-home-event h3 a {
    color: inherit;
}