/*
 * Ergänzungen zur bestehenden website.css.
 * Die Hauptdatei website.css bleibt unverändert.
 */

:root{
    --public-hero-height:126px;
    --header-logo-size:54px;
    --hero-logo-size:96px;
    --homepage-card-width:250px;
    --viewport-gap:14px;
}

/* Gesamtes öffentliche Layout bleibt exakt innerhalb des Browserfensters. */
html,
body{
    width:100%;
    height:100%;
    min-height:100%;
}

body.public-page{
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.site-header,
.site-footer{
    flex:0 0 auto;
}

.site-header{
    position:relative;
    top:auto;
}

.header-inner{min-height:64px}
.flash-wrap:empty{display:none}

body.public-page > main{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
}

.site-footer{
    padding:12px 0;
}

.footer-grid{align-items:center}

/* Alle blauen Balken: gleich hoch, Logo und Texte gemeinsam zentriert. */
.page-hero{
    position:sticky;
    top:0;
    z-index:18;
    height:var(--public-hero-height);
    min-height:var(--public-hero-height);
    padding:0;
    display:flex;
    align-items:center;
    overflow:hidden;
    background-image:none !important;
    background:linear-gradient(135deg,var(--blue-dark),var(--blue)) !important;
    box-shadow:0 7px 20px rgba(20,29,63,.12);
}

.page-hero > .container{
    height:100%;
    display:grid;
    grid-template-columns:var(--hero-logo-size) minmax(0,760px);
    grid-template-rows:auto auto;
    column-gap:20px;
    align-content:center;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.page-hero > .container::before{
    content:"";
    grid-column:1;
    grid-row:1 / -1;
    width:var(--hero-logo-size);
    height:var(--hero-logo-size);
    align-self:center;
    justify-self:center;
    background-image:var(--page-hero-logo,none);
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
}

.page-hero > .container > *{
    grid-column:2;
    min-width:0;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.page-hero > .container > h1{
    grid-row:1;
    align-self:end;
    margin:0;
}

.page-hero > .container > p{
    grid-row:2;
    align-self:start;
    margin:.25rem 0 0;
}

/* Startseite: kein Seiten-Scrollen; Slider füllt den restlichen Platz. */
body.page-index > main{
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

body.page-index .home-hero,
body.page-index .homepage-cards-section,
body.page-index .flash-wrap{
    flex:0 0 auto;
}

.home-hero,
.home-hero-welcome{
    height:var(--public-hero-height);
    min-height:var(--public-hero-height);
}

.home-hero-welcome{
    gap:20px;
    justify-content:center;
    text-align:center;
}

body.page-index .homepage-cards-section .homepage-card-grid,
body.page-index .homepage-cards-section .homepage-card-grid-count-1,
body.page-index .homepage-cards-section .homepage-card-grid-count-2,
body.page-index .homepage-cards-section .homepage-card-grid-count-3,
body.page-index .homepage-cards-section .homepage-card-grid-count-4,
body.page-index .homepage-cards-section .homepage-card-grid-count-5{
    flex-wrap:nowrap;
    justify-content:center;
    gap:14px;
    padding:10px 0 12px;
    overflow-x:auto;
    scrollbar-width:thin;
}

body.page-index .homepage-cards-section .homepage-info-card{
    flex:0 0 var(--homepage-card-width);
    width:var(--homepage-card-width);
    min-width:var(--homepage-card-width);
    max-width:var(--homepage-card-width);
    min-height:104px;
    gap:4px;
    padding:8px 10px;
}

body.page-index .homepage-info-card.has-image{padding:0}
body.page-index .homepage-info-card-image{height:82px}
body.page-index .homepage-info-card.has-image .homepage-info-card-copy{padding:8px 10px 4px}
body.page-index .homepage-info-card.has-image .homepage-info-card-button{margin:0 10px 9px}
body.page-index .homepage-info-card-title{font-size:.67rem}
body.page-index .homepage-info-card-content{
    font-size:.78rem;
    line-height:1.22;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}
body.page-index .homepage-info-card-button{padding:4px 8px;font-size:.71rem}

body.page-index .homepage-slider-section{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    padding:8px 0 0;
}

body.page-index .homepage-slider-container{
    height:100%;
    min-height:0;
}

body.page-index .homepage-slider{
    height:100%;
    min-height:0;
    border-radius:14px;
}

body.page-index .homepage-slider[data-auto-height="1"] .homepage-slider-viewport{
    height:100% !important;
    min-height:0;
    max-height:none;
}

body.page-index .homepage-no-slider{
    flex:1 1 auto;
    min-height:0;
    display:grid;
    align-items:center;
    padding:16px 0;
}

/* Normale redaktionelle Seiten: Balken und Footer bleiben stehen. */
body.page-informationen > main,
body.page-kontakt > main,
body.page-impressum > main,
body.page-datenschutz > main,
body.page-shop > main,
body.page-ergebnisse > main{
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

body.page-informationen > main > .section,
body.page-kontakt > main > .section,
body.page-impressum > main > .section,
body.page-datenschutz > main > .section,
body.page-shop > main > .section,
body.page-ergebnisse > main > .section{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    padding-top:28px;
    padding-bottom:28px;
}

/* Veranstaltungsübersicht: zwei Bereiche, ohne Scrollen der gesamten Seite. */
body.page-veranstaltungen > main{
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.events-viewport-section{
    flex:1 1 auto;
    min-height:0;
    padding:18px 0;
    background:var(--soft);
}

.events-viewport-grid{
    height:100%;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
    gap:20px;
}

.events-viewport-panel{
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 8px 25px rgba(20,29,63,.06);
}

.events-panel-heading{
    flex:0 0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:17px 20px 14px;
    border-bottom:1px solid var(--line);
}

.events-panel-heading .eyebrow{margin:0}
.events-panel-heading h2{margin:0;font-size:1.35rem;color:var(--blue)}
.events-count{
    display:grid;
    place-items:center;
    min-width:34px;
    height:34px;
    padding:0 9px;
    border-radius:999px;
    background:var(--soft);
    color:var(--blue);
    font-weight:900;
}

.events-panel-scroll{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    padding:16px;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
}

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

.event-compact-card{
    min-width:0;
    overflow:hidden;
    display:grid;
    grid-template-columns:126px minmax(0,1fr);
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
}

.event-compact-card > img{
    width:100%;
    height:100%;
    min-height:172px;
    object-fit:cover;
}

.event-compact-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:13px;
}

.event-compact-copy .eyebrow{margin:0 0 2px;font-size:.68rem}
.event-compact-copy h3{margin:0;color:var(--blue);font-size:1rem;line-height:1.25}
.event-compact-location{margin:5px 0 0;font-weight:700;font-size:.84rem}
.event-compact-description{
    margin:7px 0 10px;
    color:var(--muted);
    font-size:.82rem;
    line-height:1.35;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}
.event-compact-copy .button{margin-top:auto}

.events-past-list{display:grid;gap:10px}
.events-past-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:13px 14px;
    border:1px solid var(--line);
    border-radius:12px;
}
.events-past-item span{font-size:.78rem;color:var(--muted)}
.events-past-item h3{margin:2px 0 0;font-size:.96rem;line-height:1.25;color:var(--blue)}
.events-past-item a{font-weight:800;white-space:nowrap}

/* Veranstaltungsdetail: Scrollcontainer ist main, daher Sticky-Abstände anpassen. */
body.page-veranstaltung .event-sticky-hero{
    top:0 !important;
}

@media(min-width:901px){
    body.page-veranstaltung .event-content-column{
        top:calc(var(--public-hero-height) + var(--event-sticky-gap,18px)) !important;
        max-height:calc(100dvh - 64px - var(--public-hero-height) - 52px) !important;
    }
}

/* Niedrige Desktop-Bildschirme. */
@media(min-width:901px) and (max-height:820px){
    :root{
        --public-hero-height:106px;
        --header-logo-size:48px;
        --hero-logo-size:80px;
        --homepage-card-width:232px;
    }
    .header-inner{min-height:56px}
    .site-footer{padding:8px 0}
    body.page-index .homepage-cards-section .homepage-card-grid,
    body.page-index .homepage-cards-section .homepage-card-grid-count-1,
    body.page-index .homepage-cards-section .homepage-card-grid-count-2,
    body.page-index .homepage-cards-section .homepage-card-grid-count-3,
    body.page-index .homepage-cards-section .homepage-card-grid-count-4,
    body.page-index .homepage-cards-section .homepage-card-grid-count-5{padding:7px 0 9px}
    body.page-index .homepage-cards-section .homepage-info-card{min-height:94px}
    body.page-index .homepage-info-card-image{height:70px}
    .events-viewport-section{padding:12px 0}
    .events-panel-heading{padding:12px 16px 10px}
    .events-panel-scroll{padding:12px}
}

@media(max-width:1100px){
    .events-compact-grid{grid-template-columns:1fr}
}

@media(max-width:900px){
    :root{
        --public-hero-height:116px;
        --hero-logo-size:76px;
    }

    body.public-page{
        height:auto;
        min-height:100dvh;
        overflow:auto;
    }

    body.public-page > main,
    body.page-index > main,
    body.page-veranstaltungen > main,
    body.page-informationen > main,
    body.page-kontakt > main,
    body.page-impressum > main,
    body.page-datenschutz > main,
    body.page-shop > main,
    body.page-ergebnisse > main{
        overflow:visible;
        display:block;
    }

    .page-hero{position:relative}

    .page-hero > .container{
        grid-template-columns:var(--hero-logo-size) minmax(0,1fr);
        column-gap:14px;
    }

    body.page-index .homepage-slider-section{display:block;padding-top:8px}
    body.page-index .homepage-slider-container,
    body.page-index .homepage-slider{height:auto}
    body.page-index .homepage-slider[data-auto-height="1"] .homepage-slider-viewport{
        height:min(var(--homepage-slider-height,300px),58vh) !important;
        min-height:180px;
    }

    .events-viewport-section{padding:18px 0}
    .events-viewport-grid{
        height:auto;
        grid-template-columns:1fr;
    }
    .events-viewport-panel{overflow:visible}
    .events-panel-scroll{overflow:visible}
}

@media(max-width:600px){
    :root{
        --public-hero-height:108px;
        --header-logo-size:44px;
        --hero-logo-size:58px;
        --homepage-card-width:min(250px,calc(100vw - 48px));
    }
    .header-inner{min-height:60px}
    .page-hero > .container{column-gap:10px}
    .page-hero > .container > h1{white-space:normal;font-size:1.15rem}
    .page-hero > .container > p{font-size:.8rem;line-height:1.25}
    body.page-index .homepage-cards-section .homepage-card-grid,
    body.page-index .homepage-cards-section .homepage-card-grid-count-1,
    body.page-index .homepage-cards-section .homepage-card-grid-count-2,
    body.page-index .homepage-cards-section .homepage-card-grid-count-3,
    body.page-index .homepage-cards-section .homepage-card-grid-count-4,
    body.page-index .homepage-cards-section .homepage-card-grid-count-5{
        justify-content:flex-start;
        padding:9px 16px 11px;
    }
    .event-compact-card{grid-template-columns:96px minmax(0,1fr)}
    .event-compact-card > img{min-height:150px}
    .site-footer{padding:18px 0}
}

/*
 * Einheitliche Position des Logos in allen blauen Balken.
 * Startseite, Veranstaltungsdetail und normale Unterseiten verwenden
 * exakt dieselben Spalten und damit dieselbe Logo-X-Position.
 */
:root{
    --hero-text-column-width:760px;
}

.home-hero > .container{
    height:100%;
}

.home-hero-welcome,
.page-hero > .container{
    height:100%;
    display:grid !important;
    grid-template-columns:var(--hero-logo-size) minmax(0,var(--hero-text-column-width));
    grid-template-rows:auto auto;
    column-gap:20px;
    align-content:center;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.home-hero-welcome .home-hero-logo{
    grid-column:1;
    grid-row:1 / -1;
    align-self:center;
    justify-self:center;
    width:var(--hero-logo-size);
    height:var(--hero-logo-size);
}

.home-hero-welcome .home-hero-copy{
    grid-column:2;
    grid-row:1 / -1;
    width:100%;
    min-width:0;
    align-items:center;
    text-align:center;
}

.page-hero > .container::before{
    grid-column:1;
    grid-row:1 / -1;
}

.page-hero > .container > *{
    grid-column:2;
    width:100%;
    min-width:0;
    text-align:center;
}

/* Bis zu zehn Kärtchen in einer horizontal scrollbaren Zeile. */
body.page-index .homepage-cards-container{
    width:min(1640px,100%);
    padding-inline:8px;
}

body.page-index .homepage-card-carousel{
    position:relative;
    width:100%;
    padding-inline:42px;
}

body.page-index .homepage-card-scroll{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(37,50,103,.38) transparent;
}

body.page-index .homepage-card-scroll::-webkit-scrollbar{
    height:7px;
}

body.page-index .homepage-card-scroll::-webkit-scrollbar-thumb{
    background:rgba(37,50,103,.38);
    border-radius:999px;
}

body.page-index .homepage-card-scroll::-webkit-scrollbar-track{
    background:transparent;
}

body.page-index .homepage-card-scroll .homepage-card-grid,
body.page-index .homepage-card-scroll .homepage-card-grid[class*="homepage-card-grid-count-"]{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    align-items:stretch;
    width:max-content !important;
    min-width:100%;
    gap:14px;
    padding:10px 2px 12px !important;
    overflow:visible !important;
}

body.page-index .homepage-card-scroll .homepage-info-card{
    scroll-snap-align:start;
}

.homepage-card-scroll-button{
    position:absolute;
    z-index:8;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(37,50,103,.18);
    border-radius:50%;
    background:rgba(255,255,255,.96);
    color:var(--blue);
    font:800 1.65rem/1 Arial,sans-serif;
    box-shadow:0 7px 20px rgba(20,29,63,.16);
    cursor:pointer;
}

.homepage-card-scroll-button[hidden]{display:none !important}
.homepage-card-scroll-button:disabled{opacity:.32;cursor:default}
.homepage-card-scroll-prev{left:3px}
.homepage-card-scroll-next{right:3px}

@media(max-width:900px){
    :root{--hero-text-column-width:calc(100vw - 32px - var(--hero-logo-size) - 14px)}
    .home-hero-welcome,
    .page-hero > .container{
        grid-template-columns:var(--hero-logo-size) minmax(0,var(--hero-text-column-width));
        column-gap:14px;
    }
}

@media(max-width:600px){
    body.page-index .homepage-card-carousel{padding-inline:34px}
    .homepage-card-scroll-button{width:30px;height:30px;font-size:1.45rem}
    .homepage-card-scroll-prev{left:1px}
    .homepage-card-scroll-next{right:1px}
}

/* Startseiten-Kärtchen: etwas größer und optisch einheitlich */
:root{
    --homepage-card-width:275px;
    --homepage-card-media-height:96px;
    --homepage-card-height:188px;
}

body.page-index .homepage-card-scroll .homepage-info-card{
    flex:0 0 var(--homepage-card-width);
    width:var(--homepage-card-width);
    min-width:var(--homepage-card-width);
    max-width:var(--homepage-card-width);
    height:var(--homepage-card-height);
    min-height:var(--homepage-card-height);
    max-height:var(--homepage-card-height);
    padding:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:0;
    border-radius:15px;
}

/* Einheitliche obere Bildfläche – auch wenn kein eigenes Foto vorhanden ist. */
body.page-index .homepage-card-scroll .homepage-info-card:not(.has-image)::before{
    content:"";
    flex:0 0 var(--homepage-card-media-height);
    width:100%;
    height:var(--homepage-card-media-height);
    background-image:
        var(--page-hero-logo,none),
        linear-gradient(135deg,var(--blue-dark),var(--blue));
    background-repeat:no-repeat,no-repeat;
    background-position:center,center;
    background-size:48px 48px,cover;
    border-bottom:1px solid rgba(255,255,255,.18);
}

body.page-index .homepage-card-scroll .homepage-info-card-image{
    flex:0 0 var(--homepage-card-media-height);
    width:100%;
    height:var(--homepage-card-media-height);
    object-fit:cover;
    object-position:center;
    border-bottom:1px solid var(--line);
}

body.page-index .homepage-card-scroll .homepage-info-card-copy,
body.page-index .homepage-card-scroll .homepage-info-card.has-image .homepage-info-card-copy{
    flex:1 1 auto;
    min-height:0;
    width:100%;
    padding:9px 12px 4px;
    display:block;
}

body.page-index .homepage-card-scroll .homepage-info-card-title{
    display:block;
    font-size:.73rem;
    line-height:1.2;
    margin:0 0 3px;
}

body.page-index .homepage-card-scroll .homepage-info-card-content{
    font-size:.8rem;
    line-height:1.25;
    -webkit-line-clamp:2;
}

body.page-index .homepage-card-scroll .homepage-info-card-button,
body.page-index .homepage-card-scroll .homepage-info-card.has-image .homepage-info-card-button{
    flex:0 0 auto;
    align-self:flex-start;
    margin:0 12px 10px;
    padding:5px 10px;
    font-size:.74rem;
}

/* Auf niedrigen Monitoren etwas kompakter, damit der Slider genug Platz behält. */
@media(min-width:901px) and (max-height:820px){
    :root{
        --homepage-card-width:258px;
        --homepage-card-media-height:78px;
        --homepage-card-height:164px;
    }
    body.page-index .homepage-card-scroll .homepage-info-card:not(.has-image)::before{
        background-size:40px 40px,cover;
    }
}

@media(max-width:600px){
    :root{
        --homepage-card-width:min(275px,calc(100vw - 64px));
        --homepage-card-media-height:92px;
        --homepage-card-height:184px;
    }
}

/* Feinabstimmung: Kärtchen etwas höher, Kurzinhalt immer nur eine Zeile */
:root{
    --homepage-card-height:202px;
}

body.page-index .homepage-card-scroll .homepage-info-card-content{
    display:block !important;
    max-height:1.25em;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    -webkit-box-orient:initial;
    -webkit-line-clamp:unset;
}

/* HTML aus dem Editor darf im Kurzinhalt keinen zusätzlichen Zeilenumbruch erzeugen. */
body.page-index .homepage-card-scroll .homepage-info-card-content p,
body.page-index .homepage-card-scroll .homepage-info-card-content div,
body.page-index .homepage-card-scroll .homepage-info-card-content span,
body.page-index .homepage-card-scroll .homepage-info-card-content strong,
body.page-index .homepage-card-scroll .homepage-info-card-content em,
body.page-index .homepage-card-scroll .homepage-info-card-content h1,
body.page-index .homepage-card-scroll .homepage-info-card-content h2,
body.page-index .homepage-card-scroll .homepage-info-card-content h3,
body.page-index .homepage-card-scroll .homepage-info-card-content h4,
body.page-index .homepage-card-scroll .homepage-info-card-content h5,
body.page-index .homepage-card-scroll .homepage-info-card-content h6{
    display:inline;
    margin:0;
    padding:0;
    font:inherit;
    line-height:inherit;
}

body.page-index .homepage-card-scroll .homepage-info-card-content br{
    display:none;
}

@media(min-width:901px) and (max-height:820px){
    :root{
        --homepage-card-height:176px;
    }
}

@media(max-width:600px){
    :root{
        --homepage-card-height:198px;
    }
}

/* Korrektur: WYSIWYG-Formatierungen im einzeiligen Karten-Kurzinhalt erhalten */
body.page-index .homepage-card-scroll .homepage-info-card-content{
    display:block !important;
    max-height:1.25em;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

/* Blockelemente bleiben einzeilig, dürfen aber ihre Ausrichtung behalten. */
body.page-index .homepage-card-scroll .homepage-info-card-content p,
body.page-index .homepage-card-scroll .homepage-info-card-content div,
body.page-index .homepage-card-scroll .homepage-info-card-content h1,
body.page-index .homepage-card-scroll .homepage-info-card-content h2,
body.page-index .homepage-card-scroll .homepage-info-card-content h3,
body.page-index .homepage-card-scroll .homepage-info-card-content h4,
body.page-index .homepage-card-scroll .homepage-info-card-content h5,
body.page-index .homepage-card-scroll .homepage-info-card-content h6,
body.page-index .homepage-card-scroll .homepage-info-card-content blockquote,
body.page-index .homepage-card-scroll .homepage-info-card-content ul,
body.page-index .homepage-card-scroll .homepage-info-card-content ol,
body.page-index .homepage-card-scroll .homepage-info-card-content li{
    display:block;
    margin:0;
    padding:0;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:inherit;
    line-height:inherit;
}

/* Semantische Inline-Formatierungen des Editors wieder sichtbar machen. */
body.page-index .homepage-card-scroll .homepage-info-card-content strong,
body.page-index .homepage-card-scroll .homepage-info-card-content b{
    display:inline;
    font-weight:700;
}

body.page-index .homepage-card-scroll .homepage-info-card-content em,
body.page-index .homepage-card-scroll .homepage-info-card-content i{
    display:inline;
    font-style:italic;
}

body.page-index .homepage-card-scroll .homepage-info-card-content u{
    display:inline;
    text-decoration:underline;
}

body.page-index .homepage-card-scroll .homepage-info-card-content s{
    display:inline;
    text-decoration:line-through;
}

body.page-index .homepage-card-scroll .homepage-info-card-content small{
    display:inline;
    font-size:.86em;
}

body.page-index .homepage-card-scroll .homepage-info-card-content span{
    display:inline;
    margin:0;
    padding:0;
    line-height:inherit;
}

body.page-index .homepage-card-scroll .homepage-info-card-content h1,
body.page-index .homepage-card-scroll .homepage-info-card-content h2,
body.page-index .homepage-card-scroll .homepage-info-card-content h3,
body.page-index .homepage-card-scroll .homepage-info-card-content h4,
body.page-index .homepage-card-scroll .homepage-info-card-content h5,
body.page-index .homepage-card-scroll .homepage-info-card-content h6{
    font-weight:700;
}

body.page-index .homepage-card-scroll .homepage-info-card-content ul,
body.page-index .homepage-card-scroll .homepage-info-card-content ol{
    list-style:none;
}

body.page-index .homepage-card-scroll .homepage-info-card-content br{
    display:none;
}

/*
 * Kommende Veranstaltungen: ruhige, vertikale Karten.
 * Datum und Uhrzeit bleiben als kompakte Plaketten nebeneinander.
 */
.events-upcoming-panel .events-compact-grid{
    grid-template-columns:repeat(2,minmax(280px,1fr));
    gap:18px;
}

.event-showcase-card{
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid rgba(37,50,103,.14);
    border-radius:18px;
    box-shadow:0 10px 28px rgba(20,29,63,.09);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.event-showcase-card:hover{
    transform:translateY(-2px);
    border-color:rgba(37,50,103,.28);
    box-shadow:0 16px 36px rgba(20,29,63,.14);
}

.event-showcase-media{
    position:relative;
    display:block;
    aspect-ratio:16/8.5;
    overflow:hidden;
    background:linear-gradient(135deg,var(--blue-dark),var(--blue));
}

.event-showcase-media:hover{text-decoration:none}

.event-showcase-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform .28s ease;
}

.event-showcase-card:hover .event-showcase-media img{
    transform:scale(1.025);
}

.event-showcase-media.is-placeholder{
    display:grid;
    place-items:center;
    color:rgba(255,255,255,.92);
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.event-showcase-media.is-placeholder::before{
    content:"";
    position:absolute;
    inset:18px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:12px;
}

.event-showcase-copy{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    padding:16px 17px 17px;
}

.event-showcase-meta{
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:8px;
    margin:-31px 0 13px;
    position:relative;
    z-index:2;
}

.event-meta-chip{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:7px 10px 8px;
    border:1px solid rgba(37,50,103,.12);
    border-radius:11px;
    background:rgba(255,255,255,.97);
    box-shadow:0 7px 20px rgba(20,29,63,.13);
    white-space:nowrap;
}

.event-meta-date{flex:1 1 auto}
.event-meta-time{flex:0 0 auto}

.event-meta-chip small{
    color:var(--muted);
    font-size:.62rem;
    font-weight:800;
    line-height:1.1;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.event-meta-chip strong{
    color:var(--blue);
    font-size:.84rem;
    line-height:1.2;
}

.event-showcase-copy h3{
    margin:0;
    color:var(--blue);
    font-size:1.08rem;
    line-height:1.28;
}

.event-showcase-copy h3 a{color:inherit}
.event-showcase-copy h3 a:hover{text-decoration:none;color:var(--blue-dark)}

.event-showcase-location{
    display:flex;
    align-items:center;
    gap:6px;
    margin:7px 0 0;
    color:var(--ink);
    font-size:.84rem;
    font-weight:750;
}

.event-showcase-location span{
    color:var(--gold);
    font-size:1rem;
}

.event-showcase-description{
    margin:9px 0 14px;
    color:var(--muted);
    font-size:.84rem;
    line-height:1.42;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

.event-showcase-button{
    align-self:flex-start;
    margin-top:auto;
    padding:7px 12px;
}

@media(max-width:1280px){
    .events-upcoming-panel .events-compact-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:900px){
    .events-upcoming-panel .events-compact-grid{
        grid-template-columns:repeat(2,minmax(260px,1fr));
    }
}

@media(max-width:680px){
    .events-upcoming-panel .events-compact-grid{
        grid-template-columns:1fr;
    }

    .event-showcase-meta{
        flex-wrap:wrap;
    }

    .event-meta-date,
    .event-meta-time{
        flex:1 1 auto;
    }
}

/*
 * Veranstaltungs-Kärtchen ohne Titelbild:
 * Nur der blaue Platzhalter mit der weißen Aufschrift „Veranstaltung“
 * wird kompakter. Der allgemeine blaue Seitenbalken bleibt unverändert.
 */
.event-showcase-media.is-placeholder{
    aspect-ratio:auto;
    height:108px;
    min-height:108px;
    color:#fff;
}

.event-showcase-media.is-placeholder::before{
    inset:12px;
}

@media(max-width:680px){
    .event-showcase-media.is-placeholder{
        height:92px;
        min-height:92px;
    }
}

/* Pop-up mit Bild: rechte Textspalte etwas breiter */
@media (min-width: 861px) {
    .event-popup-dialog {
        width: min(1040px, 96vw);
    }

    .event-popup-content {
        grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
    }
}

/* Startseiten-Kärtchen: großes A4-Detailfenster */
@media (min-width: 901px) {
    /*
     * Nur Modals mit hinterlegtem Bild werden vergrößert.
     * Das Bild steht vollständig links; der Textbereich rechts kann
     * unabhängig scrollen.
     */
    .homepage-card-modal-dialog:has(.homepage-card-modal-image) {
        width: min(1180px, 96vw);
        height: min(860px, 92vh);
        max-height: 92vh;
        display: grid;
        grid-template-columns:
            minmax(440px, 1.08fr)
            minmax(360px, .92fr);
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
    }

    .homepage-card-modal-dialog:has(.homepage-card-modal-image)
    .homepage-card-modal-header {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .homepage-card-modal-dialog:has(.homepage-card-modal-image)
    .homepage-card-modal-image {
        grid-column: 1;
        grid-row: 2;
        display: block;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        max-width: none;
        max-height: none;
        padding: 14px;
        object-fit: contain;
        object-position: center;
        background: #eef1f6;
        border-right: 1px solid var(--line);
        border-bottom: 0;
    }

    .homepage-card-modal-dialog:has(.homepage-card-modal-image)
    .homepage-card-modal-content {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        min-height: 0;
        overflow-y: auto;
        padding: 28px 32px 34px;
    }

    /*
     * Besteht das Detailfenster nur aus einem Bild, nutzt das
     * A4-Plakat die gesamte Breite des Modals.
     */
    .homepage-card-modal-dialog:has(.homepage-card-modal-image):not(:has(.homepage-card-modal-content)) {
        width: min(820px, 94vw);
        grid-template-columns: 1fr;
    }

    .homepage-card-modal-dialog:has(.homepage-card-modal-image):not(:has(.homepage-card-modal-content))
    .homepage-card-modal-image {
        grid-column: 1;
        border-right: 0;
    }
}

@media (max-width: 900px) {
    /*
     * Auf Tablet und Smartphone stehen Bild und Inhalt untereinander.
     * Das A4-Bild bleibt vollständig sichtbar.
     */
    .homepage-card-modal-dialog:has(.homepage-card-modal-image) {
        width: min(760px, 96vw);
        max-height: 96vh;
        overflow-y: auto;
    }

    .homepage-card-modal-dialog:has(.homepage-card-modal-image)
    .homepage-card-modal-image {
        width: 100%;
        height: auto;
        max-height: 64vh;
        padding: 8px;
        object-fit: contain;
        object-position: center top;
        background: #eef1f6;
    }
}

@media (max-width: 600px) {
    .homepage-card-modal-dialog:has(.homepage-card-modal-image)
    .homepage-card-modal-image {
        max-height: 58vh;
        padding: 6px;
    }
}

/* Footer: kompakt und am Desktop sicher einzeilig */
.site-footer{
    padding:9px 0;
}

.site-footer .footer-bar{
    width:calc(100% - 24px);
    max-width:1600px;
    margin-inline:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:nowrap;
}

.footer-copyright{
    flex:0 1 auto;
    min-width:0;
    margin:0;
    color:#fff;
    font-size:.82rem;
    line-height:1.25;
    text-align:left;
    white-space:nowrap;
}

.footer-links{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    margin:0;
    font-size:.82rem;
    line-height:1.25;
    white-space:nowrap;
    flex-wrap:nowrap;
}

.footer-links a,
.footer-extra,
.footer-separator{
    margin:0;
    white-space:nowrap;
}

.footer-links a,
.footer-extra{
    color:#fff;
}

.footer-separator{
    color:rgba(255,255,255,.5);
}

/* Erst bei schmäleren Fenstern kontrolliert auf zwei Zeilen wechseln. */
@media(max-width:1100px){
    .site-footer .footer-bar{
        display:grid;
        grid-template-columns:1fr;
        gap:5px;
    }

    .footer-copyright,
    .footer-links{
        justify-self:start;
    }

    .footer-copyright{
        white-space:normal;
    }

    .footer-links{
        justify-content:flex-start;
        flex-wrap:wrap;
    }
}

@media(max-width:600px){
    .site-footer{
        padding:12px 0;
    }

    .site-footer .footer-bar{
        width:calc(100% - 24px);
    }

    .footer-copyright,
    .footer-links{
        font-size:.78rem;
    }
}


/* Pop-up eindeutig als Fenster über der Website */
.event-popup{
    z-index:4000;
    padding:clamp(24px,4vw,56px);
    opacity:0;
    transition:opacity .22s ease;
}

.event-popup.is-visible{
    opacity:1;
}

.event-popup.is-closing{
    pointer-events:none;
}

.event-popup-backdrop{
    background:rgba(8,14,35,.62);
    backdrop-filter:blur(2px) saturate(.9);
}

.event-popup-dialog{
    width:min(1080px,92vw);
    max-height:min(88vh,900px);
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.55);
    border-radius:18px;
    background:#fff;
    box-shadow:
        0 32px 100px rgba(0,0,0,.42),
        0 0 0 7px rgba(255,255,255,.12);
    transform:translateY(18px) scale(.975);
    transition:transform .22s ease,opacity .22s ease;
}

.event-popup.is-visible .event-popup-dialog{
    transform:translateY(0) scale(1);
}

.event-popup-windowbar{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:9px 11px 9px 17px;
    background:var(--blue);
    color:#fff;
    border-bottom:4px solid var(--gold);
}

.event-popup-windowmark{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
}

.event-popup-windowdot{
    width:12px;
    height:12px;
    flex:0 0 auto;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 5px rgba(233,167,29,.16);
}

.event-popup-windowmark div{
    min-width:0;
    display:grid;
    gap:1px;
}

.event-popup-windowmark strong{
    font-size:.86rem;
    letter-spacing:.04em;
}

.event-popup-windowmark span:last-child{
    color:rgba(255,255,255,.76);
    font-size:.72rem;
    line-height:1.2;
}

.event-popup-close{
    position:static;
    width:auto;
    height:40px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 9px 6px 13px;
    border:1px solid rgba(255,255,255,.34);
    border-radius:999px;
    background:rgba(255,255,255,.11);
    color:#fff;
    font:inherit;
    cursor:pointer;
}

.event-popup-close span{
    font-size:.76rem;
    font-weight:800;
}

.event-popup-close b{
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    color:var(--blue);
    font:400 1.25rem/1 Arial,sans-serif;
}

.event-popup-close:hover,
.event-popup-close:focus-visible{
    background:rgba(255,255,255,.22);
    outline:2px solid rgba(255,255,255,.55);
    outline-offset:2px;
}

.event-popup-content{
    min-width:0;
    min-height:0;
    grid-template-columns:minmax(0,1.05fr) minmax(350px,.95fr);
    overflow:hidden;
}

.event-popup-content.has-no-image{
    display:block;
}

.event-popup-media{
    min-width:0;
    min-height:0;
    display:grid;
    place-items:center;
    overflow:auto;
    background:#e9edf4;
    border-right:1px solid var(--line);
}

.event-popup-image{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:contain;
    object-position:center;
    background:#e9edf4;
}

.event-popup-text{
    min-width:0;
    min-height:0;
    align-self:stretch;
    overflow-y:auto;
    padding:30px 32px 26px;
}

.event-popup-content.has-no-image .event-popup-text{
    width:min(760px,100%);
    margin-inline:auto;
}

.event-popup-label{
    display:inline-flex;
    margin:0 0 10px;
    padding:5px 9px;
    border-radius:999px;
    background:#fff3d1;
    color:#795200;
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.event-popup-text h2{
    margin:0 0 12px;
    font-size:clamp(1.55rem,2.5vw,2.25rem);
}

.event-popup-short{
    margin:0 0 16px;
    padding:11px 13px;
    border-left:4px solid var(--gold);
    background:#f7f8fb;
}

.event-popup-prose{
    max-width:none;
}

.event-popup-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:23px;
    padding-top:17px;
    border-top:1px solid var(--line);
}

.event-popup-continue{
    min-height:43px;
    padding:10px 15px;
    border:1px solid #c5ccda;
    border-radius:11px;
    background:#fff;
    color:var(--blue);
    font:inherit;
    font-weight:800;
    cursor:pointer;
}

.event-popup-continue:hover,
.event-popup-continue:focus-visible{
    border-color:var(--blue);
    background:#eef1f8;
    outline:none;
}

@media(max-width:860px){
    .event-popup{
        padding:12px;
    }

    .event-popup-dialog{
        width:calc(100vw - 24px);
        max-height:calc(100dvh - 24px);
    }

    .event-popup-content{
        display:block;
        overflow-y:auto;
    }

    .event-popup-media{
        max-height:48vh;
        border-right:0;
        border-bottom:1px solid var(--line);
    }

    .event-popup-image{
        width:100%;
        height:auto;
        max-height:48vh;
    }

    .event-popup-text{
        overflow:visible;
        padding:22px;
    }
}

@media(max-width:560px){
    .event-popup{
        padding:7px;
    }

    .event-popup-dialog{
        width:calc(100vw - 14px);
        max-height:calc(100dvh - 14px);
        border-radius:13px;
    }

    .event-popup-windowbar{
        min-height:54px;
        padding-left:12px;
    }

    .event-popup-windowmark span:last-child,
    .event-popup-close span{
        display:none;
    }

    .event-popup-close{
        width:36px;
        height:36px;
        padding:4px;
        justify-content:center;
    }

    .event-popup-close b{
        width:27px;
        height:27px;
    }

    .event-popup-text{
        padding:17px;
    }

    .event-popup-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .event-popup-actions .button,
    .event-popup-continue{
        width:100%;
        justify-content:center;
    }
}

@media(prefers-reduced-motion:reduce){
    .event-popup,
    .event-popup-dialog{
        transition:none;
    }
}

/* Social Media und Anfahrt im Footer */
.footer-social-links{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.footer-social-link{
    width:25px;
    height:25px;
    display:inline-grid;
    place-items:center;
    margin:0!important;
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.footer-social-link:hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.65);
    background:rgba(255,255,255,.17);
    text-decoration:none;
}

.footer-social-link svg{
    width:13px;
    height:13px;
    display:block;
    overflow:visible;
    fill:currentColor;
    stroke:currentColor;
    stroke-width:1.8;
}

.footer-social-link:first-child svg{
    fill:currentColor;
    stroke:none;
}

.footer-social-link .footer-social-dot{
    fill:currentColor;
    stroke:none;
}

.footer-directions-link{
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.footer-directions-link svg{
    width:14px;
    height:14px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Kontaktseite */
.contact-page-section{
    padding-top:42px;
}

.contact-page-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(310px,390px);
    align-items:start;
    gap:36px;
}

.contact-page-content{
    min-width:0;
}

.contact-page-details{
    display:grid;
    gap:14px;
}

.contact-info-card{
    overflow:hidden;
    padding:17px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#fff;
    box-shadow:0 7px 22px rgba(20,29,63,.055);
}

.contact-info-card header{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    align-items:center;
    gap:11px;
    margin-bottom:13px;
    padding-bottom:11px;
    border-bottom:1px solid #e8ebf1;
}

.contact-card-icon{
    width:41px;
    height:41px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#e9edf8;
    color:var(--blue);
}

.contact-card-icon svg{
    width:21px;
    height:21px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.contact-info-card header small{
    display:block;
    color:var(--gold);
    font-size:.66rem;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.contact-info-card header h2{
    margin:1px 0 0;
    color:var(--blue);
    font-size:1.03rem;
    line-height:1.25;
}

.contact-info-card address{
    display:grid;
    gap:2px;
    margin:0 0 13px;
    color:var(--ink);
    font-style:normal;
    font-size:.9rem;
    line-height:1.45;
}

.contact-directions-button{
    width:100%;
    gap:7px;
    padding:10px 13px;
    font-size:.84rem;
}

.contact-directions-button svg{
    width:16px;
    height:16px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.contact-link-list{
    display:grid;
    gap:8px;
}

.contact-link-list a{
    display:grid;
    gap:2px;
    padding:10px 11px;
    border:1px solid #e0e4ec;
    border-radius:10px;
    background:#f8f9fc;
}

.contact-link-list a:hover{
    border-color:#bdc6dd;
    background:#eef1f8;
    text-decoration:none;
}

.contact-link-list strong{
    color:var(--blue);
    font-size:.76rem;
}

.contact-link-list span{
    overflow-wrap:anywhere;
    color:var(--ink);
    font-size:.84rem;
}

.contact-social-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.contact-social-links > a{
    min-width:0;
    display:grid;
    grid-template-columns:35px minmax(0,1fr);
    align-items:center;
    gap:9px;
    padding:10px;
    border:1px solid #e0e4ec;
    border-radius:10px;
    background:#f8f9fc;
}

.contact-social-links > a:hover{
    border-color:#bdc6dd;
    background:#eef1f8;
    text-decoration:none;
}

.contact-social-icon{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:var(--blue);
    color:#fff;
}

.contact-social-icon svg{
    width:17px;
    height:17px;
    display:block;
    overflow:visible;
    fill:currentColor;
    stroke:currentColor;
    stroke-width:1.8;
}

.contact-social-links > a:first-child
.contact-social-icon svg{
    stroke:none;
}

.contact-social-dot{
    fill:currentColor;
    stroke:none;
}

.contact-social-links > a > span:last-child{
    min-width:0;
    display:grid;
    gap:1px;
}

.contact-social-links strong{
    color:var(--blue);
    font-size:.78rem;
}

.contact-social-links small{
    color:var(--muted);
    font-size:.67rem;
}

@media(max-width:900px){
    .contact-page-layout{
        grid-template-columns:1fr;
    }

    .contact-page-details{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .contact-page-details
    .contact-info-card:first-child{
        grid-column:1/-1;
    }
}

@media(max-width:650px){
    .footer-social-link{
        width:28px;
        height:28px;
    }

    .contact-page-section{
        padding-top:28px;
    }

    .contact-page-details{
        grid-template-columns:1fr;
    }

    .contact-page-details
    .contact-info-card:first-child{
        grid-column:auto;
    }
}

@media(max-width:420px){
    .contact-social-links{
        grid-template-columns:1fr;
    }
}

/* Startseiten-Kärtchen: zuverlässige Navigation auf Handy und Tablet */
body.page-index .homepage-card-scroll{
    -webkit-overflow-scrolling:touch;
    scroll-padding-inline:2px;
    touch-action:pan-x pan-y;
}

body.page-index .homepage-card-scroll .homepage-card-grid,
body.page-index .homepage-card-scroll .homepage-card-grid[class*="homepage-card-grid-count-"]{
    justify-content:flex-start!important;
}

body.page-index .homepage-card-scroll.has-no-overflow .homepage-card-grid,
body.page-index .homepage-card-scroll.has-no-overflow .homepage-card-grid[class*="homepage-card-grid-count-"]{
    justify-content:center!important;
}

body.page-index .homepage-card-scroll.has-overflow .homepage-info-card:first-child{
    scroll-margin-left:2px;
}

.homepage-card-scroll-button:not([hidden]){
    display:grid;
}

@media(max-width:900px){
    .homepage-card-scroll-button{
        width:34px;
        height:34px;
        border-color:rgba(37,50,103,.28);
        background:#fff;
        box-shadow:0 5px 16px rgba(20,29,63,.2);
    }

    .homepage-card-scroll-button:disabled{
        opacity:.42;
    }
}

/* Öffentliches Kontaktformular */
.contact-page-main{
    min-width:0;
    display:grid;
    align-content:start;
    gap:20px;
}

.contact-form-card{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 9px 28px rgba(20,29,63,.065);
}

.contact-form-header{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    align-items:start;
    gap:13px;
    padding:18px 20px;
    border-bottom:1px solid #e4e8ef;
    background:#f7f8fb;
}

.contact-form-header-icon{
    width:47px;
    height:47px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--blue);
    color:#fff;
}

.contact-form-header-icon svg{
    width:23px;
    height:23px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.contact-form-header small{
    display:block;
    margin-bottom:2px;
    color:var(--gold);
    font-size:.67rem;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.contact-form-header h2{
    margin:0;
    color:var(--blue);
    font-size:1.25rem;
    line-height:1.2;
}

.contact-form-header p{
    margin:5px 0 0;
    color:var(--muted);
    font-size:.83rem;
    line-height:1.4;
}

.contact-form{
    position:relative;
    padding:20px;
}

.contact-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.contact-form-grid label{
    min-width:0;
    display:grid;
    gap:6px;
    color:var(--ink);
    font-size:.82rem;
    font-weight:800;
}

.contact-form-grid label.full{
    grid-column:1/-1;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
    width:100%;
    min-width:0;
    border:1px solid #bcc5d3;
    border-radius:10px;
    background:#fff;
    color:var(--ink);
    font:inherit;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.contact-form input[type="text"],
.contact-form input[type="email"]{
    min-height:43px;
    padding:9px 11px;
}

.contact-form textarea{
    min-height:170px;
    padding:11px;
    line-height:1.5;
    resize:vertical;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:var(--blue);
    outline:none;
    box-shadow:0 0 0 3px rgba(37,50,103,.12);
}

.contact-form-field-meta{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    color:var(--muted);
    font-size:.72rem;
    font-weight:500;
    line-height:1.35;
}

.contact-form-field-meta strong{
    flex:0 0 auto;
    color:var(--blue);
    font-size:.71rem;
}

.contact-form-consent{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:9px;
    margin-top:15px;
    padding:12px;
    border:1px solid #dfe4ec;
    border-radius:10px;
    background:#f8f9fc;
    color:#4f5a70;
    font-size:.76rem;
    line-height:1.45;
    cursor:pointer;
}

.contact-form-consent input{
    margin-top:3px;
}

.contact-form-consent a{
    font-weight:800;
}

.contact-form-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:16px;
    padding-top:15px;
    border-top:1px solid #e7eaf0;
}

.contact-form-actions .button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:185px;
}

.contact-form-actions .button svg{
    width:17px;
    height:17px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.contact-form-actions > span{
    color:var(--muted);
    font-size:.72rem;
}

.contact-form-message{
    display:grid;
    gap:5px;
    margin:16px 20px 0;
    padding:12px 14px;
    border:1px solid;
    border-radius:10px;
    font-size:.8rem;
    line-height:1.4;
}

.contact-form-message strong{
    font-size:.83rem;
}

.contact-form-message span{
    color:inherit;
}

.contact-form-message ul{
    display:grid;
    gap:3px;
    margin:2px 0 0;
    padding-left:19px;
}

.contact-form-message--success{
    border-color:#b8dec2;
    background:#edf8f0;
    color:#236439;
}

.contact-form-message--error{
    border-color:#efc3bf;
    background:#fff1f0;
    color:#8e2f27;
}

.contact-form-honeypot{
    position:absolute!important;
    left:-10000px!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
}

@media(max-width:700px){
    .contact-form-grid{
        grid-template-columns:1fr;
    }

    .contact-form-grid label.full{
        grid-column:auto;
    }

    .contact-form-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .contact-form-actions .button{
        width:100%;
    }

    .contact-form-actions > span{
        text-align:center;
    }
}

@media(max-width:480px){
    .contact-form-header{
        grid-template-columns:41px minmax(0,1fr);
        padding:15px;
    }

    .contact-form-header-icon{
        width:40px;
        height:40px;
    }

    .contact-form{
        padding:15px;
    }

    .contact-form-message{
        margin:13px 15px 0;
    }

    .contact-form-field-meta{
        display:grid;
        gap:3px;
    }
}

/* Öffentliche Medienunterstützung: GIF und Video */
.homepage-info-card-video{
    pointer-events:none;
    object-fit:cover;
    background:#101522;
}

.homepage-card-modal-video{
    width:100%;
    max-height:min(72vh,760px);
    object-fit:contain;
    background:#101522;
}

.event-popup-media video,
.event-popup-video{
    width:100%;
    height:100%;
    max-height:78vh;
    display:block;
    object-fit:contain;
    background:#101522;
}

.report-title-media video{
    width:100%;
    max-height:76vh;
    display:block;
    object-fit:contain;
    border-radius:14px;
    background:#101522;
}

.report-gallery-item video{
    width:100%;
    aspect-ratio:16 / 9;
    display:block;
    object-fit:contain;
    border-radius:10px;
    background:#101522;
}

.event-showcase-media video{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    pointer-events:none;
    background:#101522;
}

.event-modal-video,
.event-poster-video{
    width:100%;
    min-height:240px;
    aspect-ratio:16 / 9;
    object-fit:contain;
    background:#101522;
}

.event-modal-poster-page.event-modal-video{
    aspect-ratio:16 / 9;
}

.event-poster-page.event-poster-video{
    aspect-ratio:16 / 9;
}

video::-webkit-media-controls-panel{
    background-image:linear-gradient(
        transparent,
        rgba(0,0,0,.4)
    );
}

@media(prefers-reduced-motion:reduce){
    .homepage-info-card-video,
    .event-showcase-media video{
        animation:none;
    }
}

.editable-page-title-video,
.contact-page-title-video{
    width:100%;
    max-height:76vh;
    display:block;
    margin:0 0 28px;
    object-fit:contain;
    border-radius:14px;
    background:#101522;
    box-shadow:0 8px 25px rgba(20,29,63,.09);
}

/* Kompakte blaue Hauptnavigation und teilbare Startkarten */
:root{
    --compact-header-height:58px;
    --compact-header-logo-size:40px;
}

.site-header.site-header--compact{
    position:relative;
    top:auto;
    z-index:40;
    border-bottom:1px solid rgba(255,255,255,.13);
    background:
        linear-gradient(
            135deg,
            var(--blue-dark),
            var(--blue)
        );
    box-shadow:0 7px 20px rgba(20,29,63,.16);
    backdrop-filter:none;
}

.site-header--compact .header-inner{
    min-height:var(--compact-header-height);
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
}

.site-header--compact .brand--compact{
    width:var(--compact-header-logo-size);
    height:var(--compact-header-logo-size);
    display:grid;
    place-items:center;
    flex:0 0 auto;
    padding:0;
    color:#fff;
}

.site-header--compact .brand--compact:hover{
    text-decoration:none;
    transform:translateY(-1px);
}

.site-header--compact .brand-logo{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    filter:
        drop-shadow(
            0 2px 5px rgba(0,0,0,.22)
        );
}

.site-header--compact .brand-fallback-mark{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.45);
    border-radius:50%;
    color:#fff;
    font-size:.7rem;
    font-weight:900;
}

.site-header--compact .main-nav{
    grid-column:2 / 4;
    justify-self:end;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:3px;
}

.site-header--compact .main-nav .nav-main-link,
.site-header--compact .main-nav > a{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:8px 10px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:rgba(255,255,255,.92)!important;
    font:inherit;
    font-size:.83rem;
    font-weight:760;
    line-height:1.15;
    text-decoration:none;
    cursor:pointer;
}

.site-header--compact .main-nav .nav-main-link:hover,
.site-header--compact .main-nav .nav-main-link.active,
.site-header--compact .main-nav > a:hover,
.site-header--compact .main-nav > a.active,
.site-header--compact .main-nav [aria-current="page"]{
    background:rgba(255,255,255,.10);
    color:var(--gold)!important;
    text-decoration:none;
}

.site-header--compact .nav-dropdown-arrow,
.site-header--compact .nav-external-icon{
    color:var(--gold);
}

.site-header--compact .nav-dropdown{
    position:relative;
}

.site-header--compact .nav-dropdown-menu{
    top:calc(100% + 8px);
    min-width:210px;
    padding:7px;
    border:1px solid #d8deea;
    border-radius:11px;
    background:#fff;
    box-shadow:0 16px 38px rgba(10,18,48,.22);
}

.site-header--compact .nav-dropdown-menu a{
    display:block;
    padding:9px 10px;
    border-radius:7px;
    color:var(--blue)!important;
    font-size:.8rem;
    font-weight:740;
}

.site-header--compact .nav-dropdown-menu a:hover,
.site-header--compact .nav-dropdown-menu a[aria-current="page"]{
    background:#edf0f8;
    color:var(--blue)!important;
    text-decoration:none;
}

.site-header--compact .nav-toggle{
    grid-column:3;
    display:none;
    align-items:center;
    gap:8px;
    min-height:39px;
    padding:8px 11px;
    border:1px solid rgba(255,255,255,.34);
    border-radius:9px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font:inherit;
    font-size:.78rem;
    font-weight:850;
}

.site-header--compact .nav-toggle-icon{
    width:18px;
    display:grid;
    gap:3px;
}

.site-header--compact .nav-toggle-icon span{
    height:2px;
    border-radius:999px;
    background:var(--gold);
}

/* Teilen im Startkarten-Modal */
.homepage-card-modal-topbar{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    padding:8px 56px 4px 18px;
    border-bottom:1px solid #e7eaf0;
    background:#f7f8fb;
}

.homepage-card-share-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:32px;
    padding:6px 10px;
    border:1px solid #cfd6e4;
    border-radius:8px;
    background:#fff;
    color:var(--blue);
    font:inherit;
    font-size:.72rem;
    font-weight:850;
    cursor:pointer;
}

.homepage-card-share-button:hover{
    border-color:#aeb9d8;
    background:#e9edf8;
}

.homepage-card-share-button svg{
    width:15px;
    height:15px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.homepage-card-share-status{
    min-width:78px;
    color:#267044;
    font-size:.69rem;
    font-weight:800;
    text-align:right;
}

.homepage-card-modal-topbar
.homepage-card-modal-close{
    top:7px;
    right:10px;
}

/*
 * Direkte Kärtchenlinks öffnen das Modal nach dem Laden.
 * Der Dialog bleibt dabei wie bisher vollständig bedienbar.
 */
.homepage-card-modal-dialog:focus{
    outline:none;
}

@media(max-width:980px){
    .site-header--compact .header-inner{
        grid-template-columns:auto 1fr auto;
    }

    .site-header--compact .nav-toggle{
        display:inline-flex;
    }

    .site-header--compact .main-nav{
        position:absolute;
        top:calc(100% + 8px);
        left:16px;
        right:16px;
        z-index:50;
        display:none;
        max-height:calc(100dvh - 90px);
        overflow-y:auto;
        align-items:stretch;
        padding:10px;
        border:1px solid rgba(255,255,255,.18);
        border-radius:13px;
        background:
            linear-gradient(
                155deg,
                var(--blue-dark),
                var(--blue)
            );
        box-shadow:0 20px 48px rgba(10,18,48,.32);
    }

    .site-header--compact .main-nav.open{
        display:flex;
        flex-direction:column;
    }

    .site-header--compact .main-nav .nav-main-link,
    .site-header--compact .main-nav > a{
        width:100%;
        min-height:42px;
        justify-content:flex-start;
        padding:10px 12px;
    }

    .site-header--compact .nav-dropdown{
        width:100%;
    }

    .site-header--compact .nav-dropdown-toggle{
        width:100%;
        justify-content:space-between!important;
    }

    .site-header--compact .nav-dropdown-menu{
        position:static;
        width:100%;
        min-width:0;
        margin:4px 0 2px;
        padding:5px;
        border-color:rgba(255,255,255,.16);
        background:rgba(255,255,255,.96);
        box-shadow:none;
    }
}

@media(max-width:600px){
    :root{
        --compact-header-height:54px;
        --compact-header-logo-size:36px;
    }

    .site-header--compact .header-inner{
        min-height:var(--compact-header-height);
        gap:10px;
    }

    .site-header--compact .nav-toggle{
        min-height:37px;
        padding:7px 10px;
    }

    .homepage-card-modal-topbar{
        padding-left:12px;
    }

    .homepage-card-share-button span{
        display:none;
    }

    .homepage-card-share-status{
        min-width:70px;
    }
}

/* Logo über Navigationsleiste und Hero; Seitenüberschriften exakt zentriert */
:root{
    --site-brand-logo-size:92px;
    --site-brand-width:250px;
    --site-brand-left:max(
        12px,
        calc((100vw - 1240px) / 2)
    );
}

/* Oben bleibt nur die ruhige, zentrierte Linkleiste. */
.site-header--compact .header-inner{
    position:relative;
    min-height:var(--compact-header-height);
    display:flex;
    align-items:center;
    justify-content:center;
}

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

.site-header--compact .main-nav{
    grid-column:auto;
    justify-self:auto;
    margin:0 auto;
}

.site-header--compact .nav-toggle{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    grid-column:auto;
}

/*
 * Die Vereinsmarke beginnt oben in der Navigation und reicht in den
 * blauen Hero hinein. Logo, Vereinsname und Untertitel bilden einen
 * gemeinsamen Link zur Startseite.
 */
.site-brand-emblem{
    position:absolute;
    top:4px;
    left:var(--site-brand-left);
    z-index:80;
    width:var(--site-brand-width);
    display:grid;
    justify-items:center;
    gap:3px;
    color:var(--gold);
    text-align:center;
    text-decoration:none;
    pointer-events:auto;
    transition:
        transform .16s ease,
        filter .16s ease;
}

.site-brand-emblem:hover{
    color:var(--gold);
    transform:translateY(-1px);
    filter:brightness(1.08);
    text-decoration:none;
}

.site-brand-emblem-logo,
.site-brand-emblem-fallback{
    width:var(--site-brand-logo-size);
    height:var(--site-brand-logo-size);
    display:block;
    object-fit:contain;
}

.site-brand-emblem-logo{
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.27));
}

.site-brand-emblem-fallback{
    display:grid;
    place-items:center;
    border:1px solid rgba(233,167,29,.72);
    border-radius:50%;
    color:var(--gold);
    font-size:.84rem;
    font-weight:900;
}

.site-brand-emblem-copy{
    width:100%;
    min-width:0;
    display:grid;
    justify-items:center;
    gap:1px;
    text-shadow:0 2px 5px rgba(0,0,0,.28);
}

.site-brand-emblem-copy strong{
    max-width:100%;
    overflow:hidden;
    color:var(--gold);
    font-size:.8rem;
    font-weight:900;
    line-height:1.16;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.site-brand-emblem-copy small{
    max-width:100%;
    overflow:hidden;
    color:var(--gold);
    font-size:.6rem;
    font-weight:700;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/*
 * Die bisherige Logo-Spalte in den Hero-Balken entfällt vollständig.
 * Dadurch stehen Seitentitel und Untertitel wirklich in der Mitte des
 * gesamten Bildschirms und nicht nur in der rechten Restfläche.
 */
.page-hero > .container::before{
    display:none!important;
    content:none!important;
}

.page-hero > .container{
    grid-template-columns:minmax(0,760px)!important;
    grid-template-rows:auto auto;
    align-content:center;
    align-items:center;
    justify-content:center;
    padding-left:18px!important;
    padding-right:18px!important;
    text-align:center;
}

.page-hero > .container > *{
    grid-column:1!important;
    width:100%;
    max-width:760px;
    min-width:0;
    margin-left:auto;
    margin-right:auto;
    text-align:center!important;
}

.page-hero > .container > h1{
    grid-row:1;
}

.page-hero > .container > p,
.page-hero > .container > .page-hero-intro{
    grid-row:2;
}

/*
 * Auf der Startseite bleiben Willkommen, Haupttitel und Untertitel
 * unverändert zentriert. Das zusätzliche Logo im Hero entfällt, weil
 * es nun links über Navigation und Hero liegt.
 */
.home-hero > .container{
    height:100%;
}

.home-hero-welcome{
    height:100%;
    display:flex!important;
    align-items:center;
    justify-content:center;
    padding-left:18px;
    padding-right:18px;
    text-align:center;
}

.home-hero-welcome .home-hero-copy{
    width:min(760px,100%);
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    text-align:center;
}

.home-hero-welcome .home-hero-copy > *{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.home-hero-welcome .home-hero-logo,
.home-hero-welcome .home-hero-logo-link{
    display:none!important;
}

@media(max-width:980px){
    :root{
        --site-brand-logo-size:80px;
        --site-brand-width:205px;
        --site-brand-left:10px;
    }

    .site-header--compact .header-inner{
        justify-content:flex-end;
    }

    .site-header--compact .nav-toggle{
        position:relative;
        right:auto;
        top:auto;
        transform:none;
        margin-left:auto;
    }

    .site-brand-emblem{
        top:3px;
    }

    .site-brand-emblem-copy strong{
        font-size:.71rem;
    }

    .site-brand-emblem-copy small{
        font-size:.54rem;
    }
}

@media(max-width:700px){
    :root{
        --site-brand-logo-size:68px;
        --site-brand-width:162px;
        --site-brand-left:6px;
        --public-hero-height:138px;
    }

    .site-brand-emblem{
        top:3px;
        gap:2px;
    }

    .site-brand-emblem-copy strong{
        font-size:.62rem;
        white-space:normal;
    }

    .site-brand-emblem-copy small{
        font-size:.49rem;
        white-space:normal;
    }

    .page-hero > .container,
    .home-hero-welcome{
        padding-top:30px!important;
    }

    .page-hero > .container > h1{
        font-size:1.08rem;
        line-height:1.14;
    }

    .page-hero > .container > p,
    .page-hero > .container > .page-hero-intro{
        font-size:.75rem;
        line-height:1.25;
    }
}

@media(max-width:430px){
    :root{
        --site-brand-logo-size:58px;
        --site-brand-width:138px;
        --site-brand-left:4px;
        --public-hero-height:146px;
    }

    .site-brand-emblem-copy strong{
        font-size:.56rem;
    }

    .site-brand-emblem-copy small{
        font-size:.44rem;
    }

    .page-hero > .container,
    .home-hero-welcome{
        padding-top:38px!important;
    }

    .page-hero > .container > h1{
        font-size:.96rem;
    }

    .page-hero > .container > p,
    .page-hero > .container > .page-hero-intro{
        font-size:.67rem;
    }
}

/* Vereinsmarke größer, tiefer und ohne Textkürzung */
:root{
    --site-brand-logo-size:118px;
    --site-brand-width:320px;
}

/*
 * Das Logo sitzt etwas tiefer. Titel und Untertitel dürfen vollständig
 * angezeigt werden und werden nicht mehr mit Auslassungspunkten gekürzt.
 */
.site-brand-emblem{
    top:11px;
    width:var(--site-brand-width);
    gap:5px;
}

.site-brand-emblem-logo,
.site-brand-emblem-fallback{
    width:var(--site-brand-logo-size);
    height:var(--site-brand-logo-size);
}

.site-brand-emblem-copy{
    width:100%;
    gap:3px;
}

.site-brand-emblem-copy strong,
.site-brand-emblem-copy small{
    width:100%;
    max-width:none;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    text-wrap:balance;
}

.site-brand-emblem-copy strong{
    font-size:1.05rem;
    line-height:1.18;
}

.site-brand-emblem-copy small{
    font-size:.78rem;
    line-height:1.25;
}

/*
 * Durch das größere Logo werden die Navigationslinks auf großen
 * Bildschirmen bewusst rechts neben der Vereinsmarke angeordnet.
 */
@media(min-width:981px){
    .site-header--compact .header-inner{
        justify-content:flex-end;
    }

    .site-header--compact .main-nav{
        margin-left:
            calc(
                var(--site-brand-width)
                + 18px
            );
        margin-right:0;
    }
}

@media(max-width:980px){
    :root{
        --site-brand-logo-size:100px;
        --site-brand-width:250px;
        --site-brand-left:10px;
    }

    .site-brand-emblem{
        top:9px;
        gap:4px;
    }

    .site-brand-emblem-copy strong{
        font-size:.86rem;
        line-height:1.18;
    }

    .site-brand-emblem-copy small{
        font-size:.65rem;
        line-height:1.24;
    }
}

@media(max-width:700px){
    :root{
        --site-brand-logo-size:82px;
        --site-brand-width:194px;
        --site-brand-left:6px;
        --public-hero-height:158px;
    }

    .site-brand-emblem{
        top:8px;
        gap:3px;
    }

    .site-brand-emblem-copy strong{
        font-size:.73rem;
        line-height:1.16;
    }

    .site-brand-emblem-copy small{
        display:block;
        font-size:.56rem;
        line-height:1.22;
    }

    .page-hero > .container,
    .home-hero-welcome{
        padding-top:42px!important;
    }
}

@media(max-width:430px){
    :root{
        --site-brand-logo-size:70px;
        --site-brand-width:158px;
        --site-brand-left:4px;
        --public-hero-height:170px;
    }

    .site-brand-emblem{
        top:8px;
    }

    .site-brand-emblem-copy strong{
        font-size:.65rem;
        line-height:1.16;
    }

    .site-brand-emblem-copy small{
        display:block;
        font-size:.5rem;
        line-height:1.2;
    }

    .page-hero > .container,
    .home-hero-welcome{
        padding-top:52px!important;
    }
}

/* Untertitel der Vereinsmarke einzeilig */
:root{
    --site-brand-width:430px;
}

.site-brand-emblem{
    top:12px;
    width:var(--site-brand-width);
}

.site-brand-emblem-copy{
    width:auto;
    min-width:max-content;
}

.site-brand-emblem-copy strong{
    white-space:nowrap;
}

.site-brand-emblem-copy small{
    display:block;
    width:auto;
    max-width:none;
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
    font-size:.74rem;
    line-height:1.15;
}

@media(min-width:981px){
    .site-header--compact .main-nav{
        margin-left:
            calc(
                var(--site-brand-width)
                + 12px
            );
    }
}

@media(max-width:980px){
    :root{
        --site-brand-width:360px;
    }

    .site-brand-emblem-copy small{
        font-size:.66rem;
    }
}

@media(max-width:700px){
    :root{
        --site-brand-width:300px;
    }

    .site-brand-emblem-copy small{
        font-size:.56rem;
    }
}

@media(max-width:430px){
    :root{
        --site-brand-width:270px;
    }

    .site-brand-emblem-copy small{
        display:block;
        font-size:.49rem;
        white-space:nowrap;
    }
}

/* Pop-ups wieder direkt teilbar */
.event-popup-window-actions{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}

.event-popup-share{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:6px 10px;
    border:1px solid rgba(255,255,255,.34);
    border-radius:999px;
    background:rgba(255,255,255,.11);
    color:#fff;
    font:inherit;
    font-size:.74rem;
    font-weight:850;
    cursor:pointer;
}

.event-popup-share:hover,
.event-popup-share:focus-visible{
    background:rgba(255,255,255,.22);
    outline:2px solid rgba(255,255,255,.55);
    outline-offset:2px;
}

.event-popup-share svg{
    width:16px;
    height:16px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.event-popup-share-status{
    min-width:74px;
    color:var(--gold);
    font-size:.69rem;
    font-weight:850;
    text-align:right;
}

@media(max-width:640px){
    .event-popup-windowbar{
        gap:8px;
    }

    .event-popup-window-actions{
        gap:5px;
    }

    .event-popup-share{
        width:36px;
        height:36px;
        min-height:36px;
        padding:4px;
        border-radius:50%;
    }

    .event-popup-share span,
    .event-popup-share-status{
        display:none;
    }
}