/*
Theme Name: MV Würmla Modern
Description: Zeitgemäßes Theme für den Musikverein Würmla: klar und hell, große unverfälschte Fotos, Tannengrün als sparsamer Akzent, Galerien mit Lightbox, Dark Mode. Schriften Bricolage Grotesque und Inter liegen im Theme (SIL Open Font License, siehe fonts/).
Version: 2.1
Author: Gernot & Sam 🦊
License: GNU General Public License v2 or later
*/

/* ---------------------------------------------------------------- Schriften */

/* Bricolage Grotesque für Überschriften (mit der Achse "opsz": große Größen werden von selbst enger und feiner),
   Inter für Text */
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("fonts/inter-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

/* ---------------------------------------------------------------- Farben, Maße */

/* Weiß, Schwarz und Grautöne, dazu die zwei Farben der Tracht:
   - Rot als Hauptfarbe, wie auf der alten Seite und den Plakaten: Knöpfe, Marken über Titeln, Links,
     der aktuelle Menüpunkt, Überfahren mit der Maus
   - Tannengrün sparsam: nur die Fläche des Fußbereichs */
:root {
    color-scheme: light dark;

    --bg: #ffffff;
    --bg-tint: #f1f4f2;        /* helle Flächen: Suchfeld, Bildhintergrund, Hover */
    --text: #101513;
    --muted: #5b6560;
    --line: #e2e7e4;

    --red: #c1121f;            /* rote Flächen mit weißer Schrift: Knöpfe, Marken über Titeln; in beiden Designs gleich */
    --red-hover: #9c0e19;
    --accent: #c1121f;         /* Rot als Textfarbe: Links, Rubriken, aktueller Menüpunkt */
    --accent-strong: #8f0d17;
    --green: #17382c;          /* Fläche des Fußbereichs */

    --font-head: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --radius: 16px;
    --radius-lg: 24px;
    --gutter: clamp(16px, 4vw, 32px);
    --header-h: 79px;
}

/* Dunkel: nach Systemeinstellung, außer jemand hat per Knopf "hell" gewählt (data-theme am <html>),
   oder ausdrücklich per Knopf. Die zwei Blöcke müssen gleich bleiben.
   Rot als Textfarbe wird im Dunklen heller; rote Flächen bleiben gleich und hellen sich beim Überfahren auf. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0e1211;
        --bg-tint: #1a201d;
        --text: #f1f4f2;
        --muted: #9aa5a0;
        --line: #272e2b;
        --accent: #ff7b81;
        --accent-strong: #ffa6aa;
        --red-hover: #dc2f3c;
        --green: #13271f;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0e1211;
    --bg-tint: #1a201d;
    --text: #f1f4f2;
    --muted: #9aa5a0;
    --line: #272e2b;
    --accent: #ff7b81;
    --accent-strong: #ffa6aa;
    --red-hover: #dc2f3c;
    --green: #13271f;
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------------------------------------------------------------- Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.site-main { flex: 1; }

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-strong); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--bg); }

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 .5em;
    text-wrap: balance;
}

/* Große Titel: kräftig und eng gesetzt, Größe aus --title-size.
   Lange deutsche Wörter ("Marschmusikbewertung") sollen nicht getrennt werden: die Schrift wird so weit
   verkleinert, dass das längste Wort in eine Zeile passt. --longest ist seine Länge in Zeichen
   (mvm_title_fit in functions.php), 100cqi die Breite des Kastens um den Titel, .56em die Breite
   eines Zeichens. */
.hero__title,
.archive-header__title,
.article__title {
    margin: 0;
    font-size: var(--title-size);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -.035em;
    overflow-wrap: break-word;
}
@supports (width: 1cqi) {
    .hero__head,
    .archive-header,
    .article__header { container-type: inline-size; }
    .hero__title,
    .archive-header__title,
    .article__title { font-size: min(var(--title-size), max(1.5rem, calc(100cqi / (var(--longest, 10) * .56)))); }
}

.container {
    width: 100%;
    max-width: calc(1216px + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(720px + 2 * var(--gutter)); }
.container--wide { max-width: calc(1040px + 2 * var(--gutter)); }

.section { padding-block: clamp(32px, 5vw, 64px); }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 16px; top: -64px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--red);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
}
.skip-link:focus { top: 12px; color: #fff; }

/* Rubrik über einem Titel: roter Text, über großen Titeln als rote Marke mit weißer Schrift */
.kicker {
    display: inline-block;
    margin-bottom: .45em;
    color: var(--accent);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}
.kicker--chip {
    margin-bottom: 1.2em;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    transition: background .2s;
}
a.kicker--chip:hover { background: var(--red-hover); color: #fff; }

.button {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .7em 1.1em .7em 1.25em;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: background .2s;
}
.button:hover { background: var(--red-hover); color: #fff; }
.button .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.button:hover .icon { transform: translateX(4px); }

.icon { flex: none; }

/* Platzhalter ohne Foto: Wappen auf Tannengrün.
   Feste Farbwerte statt --green: das dunkle Grün des Fußbereichs im dunklen Design wäre als Bildfläche zu finster. */
.placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background:
        url("images/wappen.png") center / auto 54% no-repeat,
        radial-gradient(circle at 50% 45%, #235842, #17382c 72%);
}

/* ---------------------------------------------------------------- Kopfleiste */

/* Der rote Strich ganz oben erinnert an den roten Balken unter dem Kopf der alten Seite */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-top: 3px solid var(--red);
    border-bottom: 1px solid var(--line);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (background: color-mix(in srgb, red 50%, blue)) {
    .site-header {
        background: color-mix(in srgb, var(--bg) 82%, transparent);
        -webkit-backdrop-filter: saturate(160%) blur(16px);
        backdrop-filter: saturate(160%) blur(16px);
    }
}
/* Die Admin-Leiste von WordPress ist 32px hoch, am Tablet 46px, am Handy scrollt sie mit */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 76px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
    color: var(--text);
    text-decoration: none;
}
.brand:hover { color: var(--text); }
.brand__crest { width: 42px; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
.brand__name { display: flex; flex-direction: column; line-height: 1; }
.brand__kicker { font-size: .7rem; font-weight: 500; color: var(--muted); }
.brand__title {
    margin-top: 3px;
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.03em;
}

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav__list { display: flex; gap: clamp(16px, 2.1vw, 30px); margin: 0 14px 0 0; padding: 0; list-style: none; }
.site-nav__list a {
    position: relative;
    display: block;
    padding: 10px 0;
    color: var(--text);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s;
}
/* Strich unter dem Menüpunkt: fährt beim Überfahren aus, steht beim aktuellen Punkt */
.site-nav__list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s var(--ease);
}
.site-nav__list a:hover::after,
.site-nav__list .current-menu-item > a::after,
.site-nav__list .current-menu-parent > a::after { transform: scaleX(1); }
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-parent > a { color: var(--accent); }

/* Runde Knöpfe in der Kopfleiste: Suche, Hell/Dunkel, Menü */
.site-nav__search,
.theme-toggle,
.nav-toggle {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.site-nav__search:hover,
.theme-toggle:hover,
.nav-toggle:hover { background: var(--bg-tint); color: var(--accent); }
.site-nav__search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* Hell/Dunkel-Knopf: Mond im hellen, Sonne im dunklen Design */
.theme-toggle .icon--sun { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon--sun { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .icon--moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon--sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon--moon { display: none; }

.nav-toggle { display: none; }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 22px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-open .nav-toggle__bars { background: transparent; }
.nav-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Handy und Tablet: das Menü klappt unter der Kopfleiste auf, die Punkte groß in der Überschriftenschrift */
@media (max-width: 980px) {
    .nav-toggle { display: grid; }
    .site-nav {
        position: absolute;
        top: 100%; left: 0; right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100vh - var(--header-h));
        padding: 4px var(--gutter) 24px;
        overflow-y: auto;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 28px 40px -28px rgba(0, 0, 0, .35);
    }
    .nav-open .site-nav { display: flex; }
    .site-nav__list { flex-direction: column; gap: 0; margin: 0; }
    .site-nav__list a {
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        font-family: var(--font-head);
        font-size: 1.45rem;
        font-weight: 650;
        letter-spacing: -.025em;
    }
    .site-nav__list a::after { display: none; }
    .site-nav__search {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        width: auto; height: auto;
        padding: 18px 0 4px;
        border-radius: 0;
        font-weight: 500;
    }
    .site-nav__search:hover { background: transparent; }
    .site-nav__search-label { position: static; width: auto; height: auto; clip: auto; }
}

/* ---------------------------------------------------------------- Aufmacher */

/* Das Foto steht unverfälscht neben oder unter dem Text: es liegt nie Text und nie ein Verlauf darauf,
   und es wird nicht größer gezeigt, als es ist (die meisten Fotos aus Joomla sind 700 bis 1200px breit).
   Drei Formen je nach Seitenverhältnis des Fotos (mvm_hero_shape in functions.php):
   - Standard: Text links, Foto rechts
   - .hero--wide: Panorama in voller Breite über dem Text
   - .hero--portrait: Hochformat (Plakat), ganz zu sehen */
.hero { padding-block: clamp(26px, 4.4vw, 60px) clamp(20px, 3.4vw, 44px); }

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(30px, 5vw, 72px);
}

.hero__title { --title-size: clamp(2.2rem, 4.1vw, 3.5rem); }
.hero__title a { color: inherit; text-decoration: none; transition: color .2s; }
.hero__title a:hover { color: var(--accent); }

.hero__aside { margin-top: clamp(16px, 2vw, 24px); }
.hero__text {
    max-width: 44ch;
    margin: 0 0 1.6em;
    color: var(--muted);
    font-size: clamp(1.02rem, 1.35vw, 1.14rem);
    line-height: 1.6;
}

.hero__media {
    position: relative;
    display: block;
    aspect-ratio: var(--ratio, 1.5);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--bg-tint);
}
.hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}
.hero__media:hover .hero__image { transform: scale(1.03); }

.hero--portrait .hero__media { justify-self: center; width: auto; max-width: 100%; height: min(68vh, 600px); }

/* Panorama: Foto oben, darunter links Marke und Titel, rechts Einleitung und Knopf.
   Die Höhe des Fotos ist an den Bildschirm gebunden, damit der Titel auch am Laptop noch ohne Scrollen
   zu sehen ist; dabei wird eher oben (Himmel, Bäume) als unten (Leute) beschnitten. */
.hero--wide { padding-top: clamp(16px, 2.2vw, 28px); }
.hero--wide .hero__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 2.6vw, 34px); }
.hero--wide .hero__body {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    column-gap: clamp(30px, 5vw, 72px);
}
.hero--wide .hero__title { --title-size: clamp(2.4rem, 5vw, 4.1rem); }
.hero--wide .hero__aside { margin-top: .35rem; }
.hero--wide .hero__media { order: -1; width: 100%; max-height: min(58vh, 600px); }
.hero--wide .hero__image { object-position: 50% 65%; }

@media (max-width: 860px) {
    .hero__inner,
    .hero--wide .hero__body { grid-template-columns: minmax(0, 1fr); }
    .hero__media { order: -1; aspect-ratio: var(--ratio-narrow, 1.5); border-radius: var(--radius); }
    .hero--portrait .hero__media { width: min(100%, calc(72vh * var(--ratio-narrow, .75))); height: auto; }
    .hero--wide .hero__media { max-height: none; }
    .hero--wide .hero__aside { margin-top: clamp(16px, 2vw, 24px); }
}

@media (prefers-reduced-motion: no-preference) {
    .hero__head,
    .hero__aside,
    .hero__media { animation: mvm-rise .8s var(--ease) both; }
    .hero__aside { animation-delay: .08s; }
    .hero__media { animation-delay: .16s; }
    .hero--wide .hero__media { animation-delay: 0s; }
    .hero--wide .hero__head { animation-delay: .08s; }
    .hero--wide .hero__aside { animation-delay: .16s; }
}
@keyframes mvm-rise {
    from { opacity: 0; transform: translateY(16px); }
}

/* ---------------------------------------------------------------- Überschriften von Bereichen */

.section-title {
    margin-bottom: clamp(22px, 3vw, 36px);
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.03em;
}

.archive-header { margin-bottom: clamp(28px, 4vw, 52px); }
.archive-header__title { --title-size: clamp(2.3rem, 5.4vw, 4rem); }
.archive-header .search-form,
.archive-header .filter { margin-top: clamp(20px, 2.6vw, 30px); }

.empty { color: var(--muted); }

/* ---------------------------------------------------------------- Karten */

/* Ohne Kasten: Foto, darunter Rubrik, Titel und Einleitung */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: clamp(32px, 4vw, 52px) clamp(20px, 2.6vw, 36px);
}
.card-grid--dense { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(28px, 3.4vw, 44px) clamp(16px, 2vw, 28px); }

.card__link { display: block; color: inherit; text-decoration: none; }
.card__link:hover { color: inherit; }

.card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bg-tint);
}
.card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
/* Hochformat (Plakate, Porträts): den oberen Teil zeigen, dort stehen Titel und Köpfe */
.card__media--portrait img { object-position: 50% 12%; }
.card:hover .card__media img { transform: scale(1.045); }

.card__badge {
    position: absolute;
    left: 10px; bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    background: #fff;
    color: #101513;
    font-size: .78rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.card__badge .icon { width: 15px; height: 15px; }

.card__body { padding-top: 16px; }
.card__title {
    margin-bottom: .35em;
    font-size: 1.32rem;
    font-weight: 650;
    line-height: 1.18;
    letter-spacing: -.02em;
    transition: color .2s;
}
.card-grid--dense .card__title { font-size: 1.15rem; }
.card:hover .card__title { color: var(--accent); }
.card__text {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.55;
}

/* ---------------------------------------------------------------- Beitrag */

.article { padding-bottom: clamp(24px, 4vw, 48px); }
.article__header { padding-top: clamp(36px, 6vw, 80px); margin-bottom: clamp(26px, 3.4vw, 40px); }
.article__title { --title-size: clamp(2.1rem, 4.6vw, 3.4rem); }

/* Foto über dem Text: breit, wenn es groß genug ist, sonst so breit wie der Text (mvm_single_image) */
.article__image { margin-block: 0 clamp(28px, 4vw, 48px); }
.article__image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: cover;
    border-radius: var(--radius-lg);
}
.article__image--portrait img { width: auto; max-width: 100%; max-height: 82vh; margin-inline: auto; object-fit: contain; }

.content { font-size: 1.1rem; line-height: 1.75; overflow-wrap: break-word; }
.content > * + * { margin-top: 1.15em; }
.content p { margin: 0; }
.content p + p { margin-top: 1.15em; }
.content h1, .content h2 { font-size: 1.8rem; }
.content h3 { font-size: 1.4rem; }
.content h4 { font-size: 1.15rem; }
.content h1, .content h2, .content h3, .content h4 { margin-top: 1.8em; }
.content [style*="justify"] { -webkit-hyphens: auto; hyphens: auto; }
.content ul, .content ol { padding-left: 1.3em; }
.content li + li { margin-top: .3em; }
.content li::marker { color: var(--muted); }
.content img { border-radius: 12px; }
.content img[style*="float: left"], .content .alignleft { float: left; margin: .3em 1.4em 1em 0; }
.content img[style*="float: right"], .content .alignright { float: right; margin: .3em 0 1em 1.4em; }
.content .aligncenter { display: block; margin-inline: auto; }
.content::after { content: ""; display: table; clear: both; }
.content hr { height: 1px; margin-block: 2.4em; border: 0; background: var(--line); }
.content blockquote {
    margin: 1.8em 0;
    padding: .1em 0 .1em 1.1em;
    border-left: 3px solid var(--accent);
    font-family: var(--font-head);
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.01em;
}
.content figure { margin-inline: 0; }
.content table {
    width: 100% !important;
    border-collapse: collapse;
    font-size: .95rem;
    border: 0;
}
.content th, .content td { padding: .7em .8em; border: 0; border-bottom: 1px solid var(--line); text-align: left; }
.content thead th { border-bottom: 2px solid var(--text); font-weight: 650; }
.content tbody tr:hover { background: var(--bg-tint); }

/* Galerie aus dem Plugin "Joomla Gallery Bridge": breiter als der Text, als Mosaik (jedes paar Fotos ein großes) */
.content .joomla-gallery {
    position: relative;
    left: 50%;
    width: min(1040px, 100vw - 2 * var(--gutter));
    margin: 2.2em 0 !important;
    transform: translateX(-50%);
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    grid-auto-flow: dense;
    gap: 8px !important;
}
.content .joomla-gallery a {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    background: var(--bg-tint);
}
.content .joomla-gallery a:nth-child(10n + 1),
.content .joomla-gallery a:nth-child(10n + 7) { grid-column: span 2; grid-row: span 2; }
.content .joomla-gallery img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0 !important;
    transition: transform .6s var(--ease);
}
.content .joomla-gallery a:hover img { transform: scale(1.06); }

.article__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: clamp(48px, 6vw, 80px);
    padding-top: 28px;
    border-top: 1px solid var(--line);
}
.article__nav-item span { display: block; margin-bottom: 4px; color: var(--muted); font-size: .85rem; font-weight: 500; }
.article__nav-item i { font-style: normal; }
.article__nav-item a {
    color: var(--text);
    font-family: var(--font-head);
    font-size: 1.2rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-decoration: none;
    transition: color .2s;
}
.article__nav-item a:hover { color: var(--accent); }
.article__nav-item--next { grid-column: 2; text-align: right; }

/* ---------------------------------------------------------------- Blättern */

.pagination { margin-top: clamp(44px, 6vw, 72px); }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--text);
    font-weight: 550;
    text-decoration: none;
    transition: background .2s;
}
.pagination a.page-numbers:hover { background: var(--bg-tint); }
.pagination .page-numbers.current { background: var(--red); color: #fff; }
.pagination .page-numbers.prev,
.pagination .page-numbers.next { padding: 0 20px; background: var(--bg-tint); }
.pagination a.page-numbers.prev:hover,
.pagination a.page-numbers.next:hover { background: var(--line); }
.pagination .page-numbers.prev { margin-right: 8px; }
.pagination .page-numbers.next { margin-left: 8px; }
.pagination .page-numbers.dots { min-width: 24px; padding: 0; color: var(--muted); }

/* ---------------------------------------------------------------- Suche, Filter */

.search-form,
.wp-block-search__inside-wrapper,
.filter {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 560px;
}
.search-form label { flex: 1; }
.search-field,
.wp-block-search__input,
.filter input[type="search"] {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--bg-tint);
    color: var(--text);
    font: inherit;
    transition: border-color .2s, background .2s;
}
.search-field::placeholder, .wp-block-search__input::placeholder, .filter input::placeholder { color: var(--muted); opacity: 1; }
.search-field:hover, .wp-block-search__input:hover, .filter input:hover { border-color: var(--line); }
.search-field:focus, .wp-block-search__input:focus, .filter input:focus { outline: 2px solid var(--accent); outline-offset: 0; background: var(--bg); }
.search-submit,
.wp-block-search__button {
    height: 50px;
    margin: 0;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.search-submit:hover, .wp-block-search__button:hover { background: var(--red-hover); }
.wp-block-search__label { display: block; margin-bottom: 8px; font-weight: 600; }

.filter { position: relative; }
.filter .icon { position: absolute; left: 18px; color: var(--muted); pointer-events: none; }
.filter input[type="search"] { padding-left: 48px; }

/* ---------------------------------------------------------------- Fußbereich */

/* Tannengrüne Fläche mit runden Ecken, etwas vom Seitenrand abgesetzt */
.site-footer {
    --on-green: #eef3f0;
    --on-green-muted: #9db4a8;
    --on-green-accent: #a5e3c3;
    margin: clamp(56px, 8vw, 112px) clamp(8px, 1.2vw, 16px) clamp(8px, 1.2vw, 16px);
    padding: clamp(40px, 5vw, 64px) 0 26px;
    border-radius: clamp(20px, 2.4vw, 32px);
    background: var(--green);
    color: var(--on-green);
    font-size: .95rem;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--on-green-accent); }

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px clamp(28px, 4vw, 56px);
}
.site-footer__brand img { display: block; width: 68px; height: auto; margin-bottom: 18px; }
.site-footer__name {
    margin: 0;
    font-family: var(--font-head);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: #fff;
}
.site-footer__tagline { margin: 8px 0 0; color: var(--on-green-muted); }

.footer-widget__title {
    margin-bottom: 14px;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: #fff;
}
/* Inhalte der Widgets aus der Migration (Joomla-Markup) */
.site-footer .contactinfo .info_name { display: block; font-weight: 600; }
.site-footer .contactinfo .info_name a { text-decoration: none; }
.site-footer .contactinfo .info_position { display: block; color: var(--on-green-muted); }
.site-footer .contact_sep { margin: 10px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.site-footer .mod_events_latest_table { border-collapse: collapse; }
.site-footer .mod_events_latest_noevents { padding: 0; color: var(--on-green-muted); }
.site-footer .banneritem img { display: block; width: 150px; margin-top: 14px; border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .4); }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: var(--on-green-muted);
    font-size: .9rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; list-style: none; }
.site-footer__links a { color: var(--on-green); text-decoration: none; }

/* ---------------------------------------------------------------- Lightbox */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 11, .96);
}
.lightbox[hidden] { display: none; }
.lightbox-open { overflow: hidden; }
.lightbox__img { max-width: min(92vw, 1600px); max-height: 86vh; object-fit: contain; border-radius: 8px; }
.lightbox button {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    padding: 0 0 4px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s;
}
.lightbox button:hover { background: rgba(255, 255, 255, .26); }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__count {
    position: absolute;
    bottom: 16px; left: 0; right: 0;
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, .7);
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Handy */

@media (max-width: 600px) {
    .article__nav { grid-template-columns: 1fr; }
    .article__nav-item--next { grid-column: 1; text-align: left; }
    .content { font-size: 1.04rem; }
    .content img[style*="float"] { float: none !important; display: block; margin: 1em auto; }
    .content .joomla-gallery { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; gap: 6px !important; }
    .pagination .page-numbers.prev, .pagination .page-numbers.next { padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}