:root {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #172435;
    background: #f3f6fa;
    font-synthesis: none
}

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html {
    overscroll-behavior: none;
}

body {
    margin: 0;
    line-height: 1.55
}

a {
    color: #1260a8
}

button,
.knopf {
    border: 0;
    border-radius: .5rem;
    background: #145da0;
    color: #fff;
    padding: .65rem 1rem;
    font: inherit;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer
}

button:hover,
.knopf:hover {
    background: #0c477d
}

.seitenkopf {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: space-between;
    padding: 1.2rem max(1.5rem, calc((100% - 1100px)/2));
    background: #fff;
    box-shadow: 0 1px 8px #152a4012
}

.seitenmarke,
.marke {
    font-size: 1.2rem;
    font-weight: 750;
    text-decoration: none;
    color: #153754
}

.menue {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap
}

.menue a {
    text-decoration: none
}

.seiteninhalt {
    max-width: 920px;
    min-height: 65vh;
    margin: 3rem auto;
    padding: 0 1.5rem
}

.seitenfuss {
    padding: 2rem;
    text-align: center;
    background: #e5ebf1
}

.m-hl1 h1 {
    font-size: clamp(2rem, 5vw, 3.2rem)
}

.m-hl2 h2 {
    font-size: 2.2rem
}

.m-text {
    max-width: 75ch
}

.m-acc {
    margin: 1rem 0;
    border: 1px solid #ccd7e2;
    border-radius: .55rem;
    background: white;
    color: var(--cms-farbe-dunkel, #172435)
}

.m-acc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    width: 100%;
    padding: 1rem 1.1rem;
    border: 0;
    border-radius: .55rem;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer
}

.m-acc-btn:hover {
    background: #17243508
}

/* Der Titel bricht vor dem Symbol um und läuft nie darunter. */
.m-acc-titel {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere
}

.m-acc-icon {
    position: relative;
    flex: 0 0 1.6rem;
    width: 1.6rem;
    height: 1.6rem
}

.m-acc-icon::before,
.m-acc-icon::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s ease
}

/* Der senkrechte Strich dreht sich beim Öffnen in die Waagerechte: aus Plus wird Minus. */
.m-acc-icon::after {
    transform: rotate(90deg)
}

.m-acc-btn[aria-expanded="true"] .m-acc-icon::after {
    transform: rotate(180deg)
}

.m-acc .panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .3s ease
}

.m-acc-huelle {
    min-height: 0;
    overflow: hidden
}

.m-acc-inhalt {
    padding: 0 1.1rem 1rem
}

.cms-js .m-acc:not(.offen) > .panel {
    grid-template-rows: 0fr
}

.cms-js .m-acc:not(.offen) > .panel > .m-acc-huelle {
    visibility: hidden;
    transition: visibility 0s .3s
}

.m-btn {
    margin: 1.5rem 0
}

.button {
    display: inline-block;
    border: 0;
    border-radius: .5rem;
    background: #145da0;
    color: #fff;
    padding: .65rem 1rem;
    font: inherit;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer
}

.m-img img,
.m-gly img {
    height: auto;
    max-width: 100%;
    border-radius: .4rem
}

.m-img-size-S img {
    width: min(32%, 240px)
}

.m-img-size-M img {
    width: min(68%, 560px)
}

.m-img-size-L img {
    width: 100%
}

.m-gly {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem
}

.m-gly-img img {
    width: 100%;
    height: 220px;
    object-fit: cover
}

.m-html {
    white-space: pre-wrap;
    overflow: auto;
    padding: 1rem;
    background: #f2f4f7;
    border-radius: .5rem
}

.vorschau {
    max-width: 920px;
    margin: 2rem auto;
    padding: 1.5rem
}

.vorschau>h1 {
    font-size: 1rem;
    color: #68798a;
    border-bottom: 1px solid #d5dfe8;
    padding-bottom: .7rem
}

@media(max-width:700px) {
    .seitenkopf {
        align-items: flex-start;
        flex-direction: column
    }

    .seiteninhalt {
        margin-top: 1.5rem
    }
}

:root {
    --cms-farbe-primaer: #145da0;
    --cms-farbe-hintergrund: #f3f6fa;
    --cms-farbe-hell: #fff;
    --cms-farbe-dunkel: #172435
}

.button,
button {
    background: var(--cms-farbe-primaer)
}

.seiteninhalt .m-parallax,
.seiteninhalt .m-hintergrund,
.vorschau .m-parallax,
.vorschau .m-hintergrund {
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 3.5rem 1.5rem
}

.m-parallax {
    position: relative;
    isolation: isolate;
    background-color: #263747;
    background-image: linear-gradient(#0005, #0005), var(--parallax-bild, none);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    color: #fff
}

.m-parallax-inhalt,
.m-hintergrund-inhalt {
    max-width: 920px;
    margin: 0 auto
}

.m-hintergrund {
    background: var(--cms-farbe-hintergrund);
    color: var(--cms-farbe-dunkel)
}

.m-hintergrund-primaer {
    background: var(--cms-farbe-primaer);
    color: #fff
}

.m-hintergrund-hintergrund {
    background: var(--cms-farbe-hintergrund);
    color: var(--cms-farbe-dunkel)
}

.m-hintergrund-hell {
    background: var(--cms-farbe-hell);
    color: var(--cms-farbe-dunkel)
}

.m-hintergrund-dunkel {
    background: var(--cms-farbe-dunkel);
    color: #fff
}

@media(max-width:700px) {

    .seiteninhalt .m-parallax,
    .seiteninhalt .m-hintergrund,
    .vorschau .m-parallax,
    .vorschau .m-hintergrund {
        margin-left: calc(50% - 50vw);
        padding: 2.25rem 1.25rem
    }

    .m-parallax {
        background-attachment: scroll
    }
}

/* Öffentliches Design und Navigation */
body {
    background: var(--cms-farbe-hintergrund, #f3f6fa);
    color: var(--cms-farbe-dunkel, #172435);
    font-family: var(--cms-schrift-text, system-ui, -apple-system, "Segoe UI", sans-serif)
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--cms-schrift-ueberschriften, inherit)
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--cms-farbe-hell, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 12%, transparent);
    box-shadow: 0 4px 20px #132b3d12
}

.site-navigation {
    display: flex;
    align-items: center;
    gap: 1rem
}

.site-submenu {
    position: absolute;
    top: calc(100% + .2rem);
    left: 0
}

.site-header-inner {
    width: min(1160px, 100%);
    min-height: 82px;
    margin: 0 auto;
    padding: .8rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem
}

.site-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    color: var(--cms-farbe-dunkel, #172435);
    font-size: 1.25rem;
    font-weight: 750;
    text-decoration: none
}

.site-brand img {
    display: block;
    width: auto;
    max-width: min(240px, 42vw);
    height: auto;
    max-height: 64px;
    object-fit: contain
}

.site-menu {
    position: relative
}

.site-menu-list,
.site-submenu {
    list-style: none;
    margin: 0;
    padding: 0
}

.site-menu-list {
    display: flex;
    align-items: center;
    gap: .3rem
}

.site-menu-item {
    position: relative;
    margin: 0;
    padding: 0
}

.site-menu-zeile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-navigation a,
.site-footer-menu a {
    color: var(--cms-farbe-dunkel, #172435);
    font: inherit;
    text-decoration: none
}

.site-menu-zeile>a {
    display: block;
    padding: .7rem .8rem;
    border-radius: .45rem;
    font-weight: 620;
    white-space: nowrap;
    transition: background .18s, color .18s
}

.site-menu-zeile>a:hover,
.site-menu-item.submenu-open>.site-menu-zeile>a {
    background: color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 10%, transparent);
    color: var(--cms-farbe-primaer, #145da0)
}

.site-submenu-toggle {
    width: 48px;
    height: 48px;
    min-height: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: var(--cms-farbe-dunkel, #172435);
    cursor: pointer
}

.site-submenu-toggle:hover {
    background: color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 12%, transparent)
}

.site-submenu-toggle span {
    width: 18px;
    height: 18px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .22s ease
}

.has-children.submenu-open>.site-menu-zeile .site-submenu-toggle span {
    transform: rotate(225deg) translate(-2px, -2px)
}

.site-submenu {
    z-index: 5;
    min-width: 220px;
    padding: .5rem;
    background: var(--cms-farbe-hell, #fff);
    border-radius: .65rem;
    box-shadow: 0 14px 34px #10283a24;
    animation: site-submenu-in .2s ease both
}

.site-submenu .site-menu-item>a {
    display: block;
    padding: .65rem .75rem;
    border-radius: .4rem;
    white-space: normal
}

.site-submenu .site-menu-item>a:hover {
    background: color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 9%, transparent);
    color: var(--cms-farbe-primaer, #145da0)
}

.site-menu-toggle {
    display: none;
    width: 48px;
    height: 46px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--cms-farbe-dunkel, #172435);
    cursor: pointer
}

.site-menu-toggle:hover {
    background: color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 10%, transparent)
}

.site-menu-toggle span {
    display: block;
    width: 27px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s ease, opacity .2s ease
}

.site-menu-toggle.is-open span:first-child {
    transform: translateY(8px) rotate(45deg)
}

.site-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(.2)
}

.site-menu-toggle.is-open span:last-child {
    transform: translateY(-8px) rotate(-45deg)
}

.site-menu-overlay {
    display: none;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0
}

.site-menu-open {
    overflow: hidden !important;
    overscroll-behavior: none !important
}

.site-menu-open .site-header {
    position: sticky
}

.site-footer-menu ul {
    display: flex;
    justify-content: center;
    gap: .7rem;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0
}

.site-footer-menu .site-menu-zeile {
    display: inline-flex
}

.site-footer-menu .site-submenu-toggle {
    display: none !important
}

.site-footer-menu .site-submenu {
    position: static;
    display: flex !important;
    gap: .5rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    animation: none
}

.site-footer-menu .site-submenu .site-menu-item>a {
    padding: .2rem .35rem
}

@keyframes site-submenu-in {
    from {
        opacity: 0;
        transform: translateY(-6px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media(max-width:600px) {
    .site-header-inner {
        min-height: 68px;
        padding: .55rem .9rem
    }

    .site-brand img {
        max-height: 52px
    }

    .site-navigation .site-menu-zeile>a {
        font-size: 1.05rem;
        padding: .8rem .65rem
    }

    .site-navigation .site-submenu .site-menu-item>a {
        font-size: .98rem;
        padding: .65rem
    }

    .seiteninhalt {
        margin-top: 1.5rem
    }
}

@media(prefers-reduced-motion:reduce) {

    .site-menu-toggle span,
    .site-submenu-toggle span,
    .site-submenu,
    .site-navigation,
    .site-menu-overlay {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important
    }
}

.menue-unterpunkte {
    list-style: none;
    padding: .65rem 0 0 1.1rem;
    margin: .65rem 0 0;
    border-left: 2px solid #d6e1e9;
    display: grid;
    gap: .55rem
}

.menue-untereintrag {
    background: #f8fafc
}

a {
    color: var(--cms-farbe-primaer, #145da0)
}

/* Terminverwaltung: Listen, Flyerbahn und Dialog */
.cms-events {
    margin: 2rem 0;
}

.cms-event-list {
    display: grid;
    gap: 1rem
}

.cms-event-card {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    padding: 1rem;
    border-radius: 1rem;
    background: var(--cms-farbe-hell, #fff);
    box-shadow: 0 10px 32px #17243512;
    animation: cms-event-in .35s ease both
}

.cms-event-card[hidden],
.cms-flyer-item[hidden] {
    display: none !important
}

.cms-event-open {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: .7rem;
    overflow: hidden
}

.cms-event-date {
    display: grid;
    place-content: center;
    gap: .05rem;
    aspect-ratio: 1;
    background: var(--cms-farbe-primaer, #145da0);
    color: #fff;
    border-radius: .7rem;
    text-align: center
}

.cms-event-date b {
    font-size: 2.5rem;
    line-height: 1
}

.cms-event-date small {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .08em
}

.cms-event-poster {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: .6rem;
    transition: transform .3s
}

.cms-event-open:hover .cms-event-poster {
    transform: scale(1.04)
}

.cms-event-copy h3 {
    margin: .1rem 0 .4rem
}

.cms-event-copy p {
    margin: .25rem 0 1rem;
    color: color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 72%, transparent)
}

.cms-event-copy button,
.cms-event-filters button,
.cms-flyer-more,
.cms-flyer-controls button {
    border: 0;
    padding: .40rem 1rem;
    background: var(--cms-farbe-primaer, #145da0);
    color: #fff;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    transition: transform .2s, filter .2s
}

.cms-event-copy button:hover,
.cms-event-filters button:hover,
.cms-flyer-more:hover,
.cms-flyer-controls button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px)
}

.cms-event-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0 0 1rem
}

.cms-event-filters button {
    background: var(--cms-farbe-hell, #fff);
    color: var(--cms-farbe-dunkel, #172435);
    border: 1px solid #d7e0e9
}

.cms-event-filters button.aktiv {
    background: var(--cms-farbe-primaer, #145da0);
    color: #fff;
    border-color: transparent
}

.cms-event-dialog {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -46%) scale(.97);
    width: min(720px, calc(100vw - 2rem));
    max-width: none;
    max-height: min(86dvh, 900px);
    overflow: auto;
    border: 0;
    border-radius: 1.1rem;
    padding: 2rem;
    background: var(--cms-farbe-hell, #fff);
    color: var(--cms-farbe-dunkel, #172435);
    box-shadow: 0 24px 90px #07172955;
    opacity: 0;
    transition: opacity .24s, transform .24s
}

.cms-event-dialog[open] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1)
}

.cms-event-dialog::backdrop {
    background: #101a27a8;
    backdrop-filter: blur(4px)
}

.cms-event-close {
    position: sticky;
    float: right;
    top: 0;
    border: 0;
    border-radius: 50%;
    width: 4.5rem;
    height: 3.5rem;
    background: transparent;
    color: #172435;
    font-size: 50px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    font-weight: 100;
    transform: translate(0px,-20px);
    outline: none !important;
}
.cms-event-close:hover {background: none !important;}

.cms-event-dialog-content h2 {
    margin: .5rem 3rem .5rem 0
}

.cms-event-meta {
    color: #536477
}

.cms-event-description {
    line-height: 1.7;
    white-space: normal
}

.cms-event-expand {
    display: block;
    position: relative;
    margin: 1.2rem auto 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    max-width: 100%
}

.cms-event-expand img {
    display: block;
    max-height: 55vh;
    max-width: 100%;
    object-fit: contain;
    border-radius: .5rem;
    transition: max-height .28s, transform .28s
}

.cms-event-expand.vergroessert {
    position: fixed;
    z-index: 10;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    background: #101820f2;
    display: grid;
    place-items: center;
    cursor: zoom-out
}

.cms-event-expand.vergroessert img {
    max-width: 96vw;
    max-height: 94dvh;
    border-radius: 0
}

.cms-event-expand-close {
    display: none;
    position: fixed;
    right: 1.3rem;
    top: 1rem;
    color: white;
    font-size: 2.5rem;
    line-height: 1
}

.cms-event-expand.vergroessert .cms-event-expand-close {
    display: block
}

.cms-events-flyer {
    position: relative;
    min-height: 100vh
}

.cms-flyer-stage {
    position: sticky;
    top: 10vh;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden
}

.cms-flyer-rail {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    overflow: hidden;
    padding: 2rem max(5vw, calc((100vw - 1200px)/2));
    scrollbar-width: none;
    will-change: scroll-position
}

.cms-flyer-rail::-webkit-scrollbar {
    display: none
}

.cms-flyer-item {
    flex: 0 0 clamp(230px, 28vw, 390px);
    transition: transform .32s, opacity .32s;
    opacity: .90;
    transform: scale(.91);
    transform-origin: left center
}

.cms-flyer-item.aktiv {
    opacity: 1;
    transform: scale(1)
}

.cms-flyer-item .cms-event-card {
    display: block;
    padding: 0;
    background: transparent;
    box-shadow: none
}

.cms-flyer-item .cms-event-open {
    display: block;
    width: 100%;
    box-shadow: 0 16px 42px #10263c30
}

.cms-flyer-item .cms-event-poster {
    height: min(64vh, 650px);
    background: #f1f3f5
}

.cms-flyer-item .cms-event-copy {
    display: none
}

.cms-flyer-controls {
    display: none;
    position: absolute;
    inset: 50% 1rem auto;
    justify-content: space-between;
    z-index: 2;
    pointer-events: none
}

.cms-flyer-controls:not([hidden]) {
    display: flex
}

.cms-flyer-controls button {
    width: 3rem;
    height: 3rem;
    padding: 0;
    font-size: 2rem;
    line-height: 1;
    pointer-events: auto;
    box-shadow: 0 5px 20px #10263c30
}

.cms-flyer-more {
    display: block;
    margin: 1rem auto
}

.cms-events-flyer .cms-event-dialog {
    z-index: 10
}

@keyframes cms-event-in {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media(max-width:650px) {
    .cms-event-card {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: .8rem;
        padding: .75rem
    }

    .cms-event-date b {
        font-size: 2rem
    }

    .cms-event-poster {
        height: 110px
    }

    .cms-event-dialog {
        padding: 1.25rem
    }

    .cms-flyer-stage {
        height: 74vh;
        top: 12vh
    }

    .cms-flyer-item {
        flex-basis: min(75vw, 340px)
    }
}

@media(prefers-reduced-motion:reduce) {

    .cms-event-card,
    .cms-event-dialog,
    .cms-event-expand img,
    .cms-flyer-item {
        animation: none;
        transition: none !important
    }
}

.cms-events-flyer {
    width: 100vw;
    margin-left: calc(50% - 50vw)
}

.cms-event-dialog {
    margin: 0
}

.cms-events-flyer.no-overflow {
    height: auto !important;
    min-height: 0
}

.cms-events-flyer.no-overflow .cms-flyer-stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible
}

.cms-events-flyer.no-overflow .cms-flyer-rail {
    overflow: visible;
    flex: 0 0 auto;
}

/* Frontend-Bildergalerie */
.cms-galerie {
    display: block;
    width: min(100%, var(--cms-galerie-max-width, 1200px));
    max-width: var(--cms-galerie-max-width, 1200px);
    margin: 2rem auto;
    text-align: center
}

.cms-galerie-stage {
    position: relative;
    width: 100%;
    height: min(var(--cms-galerie-max-height, 700px), 70vh);
    min-height: 180px;
    overflow: hidden;
    background: transparent
}

.cms-galerie-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--cms-galerie-fade, 500ms) ease, visibility 0s linear var(--cms-galerie-fade, 500ms)
}

.cms-galerie-slide.aktiv,
.cms-galerie-slide.verlaesst {
    visibility: visible;
    transition: opacity var(--cms-galerie-fade, 500ms) ease, visibility 0s
}

.cms-galerie-slide.aktiv {
    opacity: 1;
    z-index: 1
}

.cms-galerie-slide.verlaesst {
    opacity: 0;
    z-index: 2
}

.cms-galerie-slide img {
    display: block;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    cursor: zoom-in
}

.cms-galerie-arrow,
.cms-galerie-zoom {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #172435aa;
    color: white;
    box-shadow: 0 3px 14px #0003;
    cursor: pointer;
    transition: background .2s, transform .2s
}

.cms-galerie-arrow:hover,
.cms-galerie-zoom:hover {
    background: #172435e8;
    transform: scale(1.07)
}

.cms-galerie-arrow {
    top: 50%;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    font-size: 2rem;
    line-height: 1;
    transform: translateY(-50%)
}

.cms-galerie-arrow:hover {
    transform: translateY(-50%) scale(1.07)
}

.cms-galerie-prev {
    left: .8rem
}

.cms-galerie-next {
    right: .8rem
}

.cms-galerie-zoom {
    right: .8rem;
    top: .8rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    font-size: 1.3rem
}

.cms-galerie-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .55rem;
    min-height: 2.4rem;
    padding: .7rem .5rem
}

.cms-galerie-dot {
    position: relative;
    display: block;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #aab7c4;
    cursor: pointer;
    transition: flex-basis .28s ease, width .28s ease, height .2s ease, background .2s ease
}

.cms-galerie-dot.aktiv {
    flex-basis: 42px;
    width: 42px;
    height: 12px;
    background: #d3dce5
}

.cms-galerie-dot span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    border-radius: inherit;
    background: var(--cms-farbe-primaer, #145da0);
    transform: scaleX(0);
    transform-origin: left center
}

.cms-galerie-dot.aktiv span {
    animation: cms-galerie-progress var(--cms-galerie-duration, 5000ms) linear forwards
}

@keyframes cms-galerie-progress {
    to {
        transform: scaleX(1)
    }
}

.cms-galerie-dialog {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 3.5rem 4rem 2.8rem;
    border: 0;
    background: #101820f5;
    color: white;
    opacity: 0;
    transition: opacity .25s ease
}

.cms-galerie-dialog[open] {
    display: grid;
    place-items: center;
    opacity: 1
}

.cms-galerie-dialog::backdrop {
    background: #101820e8;
    backdrop-filter: blur(5px)
}

.cms-galerie-dialog-image {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 6.5rem);
    width: auto;
    height: auto;
    object-fit: contain;
    margin: auto;
    cursor: zoom-out
}

.cms-galerie-close {
    position: absolute;
    z-index: 2;
    right: 1.2rem;
    top: 1rem;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ffffff20;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer
}

/* Vor/Zurück im Vollbild: feine, große Winkel wie das Schließen-Kreuz (ohne Kreis); das Zeichen im Knopf bleibt nur
   für Vorleseprogramme, sichtbar ist der Winkel aus ::before. Die Klickfläche ist größer als der Winkel. */
.cms-galerie-dialog-arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 7rem;
    padding: 0;
    border: 0;
    border-radius: 1rem;
    background: transparent;
    color: #fff;
    font-size: 0;
    line-height: 0;
    transform: translateY(-50%);
    cursor: pointer;
    box-shadow: none;
    transition: background-color .2s ease
}

.cms-galerie-dialog-arrow::before {
    content: '';
    width: 1.9rem;
    height: 1.9rem;
    border: solid currentColor;
    border-width: 0 0 2px 2px;
    filter: drop-shadow(0 1px 4px #000a);
    transition: transform .2s ease
}

.cms-galerie-dialog-prev::before {
    transform: translateX(.45rem) rotate(45deg)
}

.cms-galerie-dialog-next::before {
    transform: translateX(-.45rem) rotate(-135deg)
}

.cms-galerie-dialog-arrow:hover,
.cms-galerie-dialog-arrow:focus-visible {
    background: #ffffff14
}

.cms-galerie-dialog-prev:hover::before {
    transform: translateX(.1rem) rotate(45deg)
}

.cms-galerie-dialog-next:hover::before {
    transform: translateX(-.1rem) rotate(-135deg)
}

.cms-galerie-dialog-arrow:focus-visible {
    outline: 2px solid #ffffffb0;
    outline-offset: -4px
}

.cms-galerie-close:hover {
    background: #ffffff38
}

.cms-galerie-dialog-prev {
    left: .6rem
}

.cms-galerie-dialog-next {
    right: .6rem
}

@media (prefers-reduced-motion: reduce) {
    .cms-galerie-dialog-arrow,
    .cms-galerie-dialog-arrow::before {
        transition: none
    }
}

.cms-galerie-dialog-count {
    position: absolute;
    bottom: .7rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: .95rem;
    font-variant-numeric: tabular-nums
}

@media(max-width:600px) {
    .cms-galerie-stage {
        height: min(var(--cms-galerie-max-height, 700px), 58vh);
        min-height: 150px
    }

    .cms-galerie-dialog {
        padding: 3.5rem 2.8rem 2.8rem
    }

    .cms-galerie-dialog-prev {
        left: 0
    }

    .cms-galerie-dialog-next {
        right: 0
    }

    .cms-galerie-dialog-arrow {
        width: 2.8rem;
        height: 5rem
    }

    .cms-galerie-dialog-arrow::before {
        width: 1.3rem;
        height: 1.3rem
    }

    .cms-galerie-close {
        right: .55rem;
        top: .5rem
    }
}

@media(prefers-reduced-motion:reduce) {

    .cms-galerie-slide,
    .cms-galerie-dot {
        transition: none
    }

    .cms-galerie-dot.aktiv span {
        animation-duration: 1ms
    }
}

/* Inhalts-Tabs */
.m-tabs {
    margin: 1.5rem 0
}

.m-tabs-list {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    border-bottom: 2px solid #d6e0e9;
    scrollbar-width: thin
}

.m-tab {
    position: relative;
    flex: 0 0 auto;
    border: 0;
    border-radius: .45rem .45rem 0 0;
    padding: .75rem 1.1rem;
    background: transparent;
    color: var(--cms-farbe-dunkel, #172435);
    cursor: pointer;
    transition: color .2s, background .2s
}

.m-tab:hover {
    background: #e7edf3;
    color: var(--cms-farbe-primaer, #145da0)
}

.m-tab.aktiv {
    background: var(--cms-farbe-primaer, #145da0);
    color: #fff
}

.m-tabs-panels {
    padding: 1rem 0
}

.m-tab-panel[hidden] {
    display: none !important
}

.m-tab-panel.aktiv {
    animation: m-tab-ein .24s ease both
}

@keyframes m-tab-ein {
    from {
        opacity: 0;
        transform: translateY(5px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media(prefers-reduced-motion:reduce) {

    .m-tab,
    .m-tab-panel.aktiv {
        animation: none;
        transition: none
    }
}

.cms-galerie-slide[hidden] {
    display: none !important
}

.cms-galerie-dot span {
    display: block !important;
    transform: none !important;
    background: var(--cms-farbe-primaer, #145da0) !important
}

.cms-galerie-dot.aktiv {
    background: #d3dce5 !important
}

.cms-galerie-dot.aktiv span {
    animation: none !important
}

/* Menübaustein, Kontaktformular und Zugriffshilfen */
.m-sidebar-menu {
    float: left;
    width: min(250px, 32%);
    margin: .25rem 1.5rem 1rem 0;
    padding: 1rem;
    border: 1px solid #dbe3ea;
    border-radius: .65rem;
    background: var(--cms-farbe-hell, #fff)
}

.m-sidebar-menu ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.m-sidebar-menu li+li {
    margin-top: .25rem
}

.m-sidebar-menu a {
    display: block;
    padding: .55rem .7rem;
    border-radius: .4rem;
    color: inherit;
    text-decoration: none
}

.m-sidebar-menu a:hover,
.m-sidebar-menu a.aktiv {
    background: color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 12%, transparent);
    color: var(--cms-farbe-primaer, #145da0);
    font-weight: 700
}

.m-kontaktformular {
    clear: both
}

.kontaktformular {
    display: grid;
    gap: 1rem;
    max-width: 720px
}

.kontaktfeld {
    min-width: 0;
    margin: 0;
    padding: .8rem 1rem;
    border: 1px solid #d8e1e9;
    border-radius: .55rem
}

.kontaktfeld legend {
    padding: 0 .35rem;
    font-weight: 700
}

.kontakt-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .35rem 0
}

.kontakt-option input {
    width: auto
}

.kontakt-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important
}

.kontakt-captcha {
    display: flex;
    align-items: center;
    gap: .6rem
}

.kontakt-captcha input {
    width: 7rem
}

.m-kontakt-erfolg {
    padding: 1rem;
    border-radius: .6rem;
    background: #e6f6ed;
    color: #185c37
}

.kontaktformular-einleitung {
    margin: 0
}

.m-sidebar-menu+* {
    min-width: 0
}

@media(max-width:700px) {
    .m-sidebar-menu {
        float: none;
        width: 100%;
        margin: 0 0 1rem;
        padding: .4rem
    }

    .m-sidebar-menu>ul {
        display: flex;
        gap: .35rem;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin
    }

    .m-sidebar-menu li+li {
        margin: 0
    }

    .m-sidebar-menu li>ul {
        display: none
    }

    .m-sidebar-menu a {
        padding: .6rem .75rem
    }

    .m-kontaktformular {
        clear: both
    }
}

/* Ikonografie */
.baustein-hinzufuegen:before {
    content: '\2b';
    font-family: FA-Solid;
    margin-right: .6rem;
    font-weight: 900
}

.medien-ordner .ordnerlink .fa-folder {
    margin-right: .4rem;
    color: #bf8a24
}

.seitenleiste .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem
}

.seitenleiste .nav-link:before {
    font-family: FA-Solid;
    font-size: .95rem;
    width: 1.1rem;
    text-align: center;
    color: #52718a
}

.seitenleiste .nav-link[href="index.php"]:before {
    content: '\f015'
}

.seitenleiste .nav-link[href="inhalte.php"]:before {
    content: '\f15c'
}

.seitenleiste .nav-link[href="footer.php"]:before {
    content: '\f1dc'
}

.seitenleiste .nav-link[href="termine.php"]:before {
    content: '\f073'
}

.seitenleiste .nav-link[href="medien.php"]:before {
    content: '\f03e'
}

.seitenleiste .nav-link[href="menues.php"]:before {
    content: '\f0c9'
}

.seitenleiste .nav-link[href="pfade.php"]:before {
    content: '\f0c1'
}

.seitenleiste .nav-link[href="einstellungen.php"]:before {
    content: '\f013'
}

.seitenleiste .nav-link[href="statistik.php"]:before {
    content: '\f201'
}

.seitenleiste .nav-link[href="formulare.php"]:before {
    content: '\f0e0'
}

.seitenleiste .nav-link[href="benutzer.php"]:before {
    content: '\f0c0'
}

.seitenleiste .nav-link[href="sicherung.php"]:before {
    content: '\f0c7'
}

.seitenleiste .nav-link[href="hilfe.php"]:before {
    content: '\f059'
}

.kontaktfeld-radio input {
    accent-color: var(--cms-farbe-primaer, #145da0)
}

.kontaktfeld-checkbox input {
    accent-color: var(--cms-farbe-dunkel, #172435)
}

.kontaktfeld-select select {
    max-width: 100%
}
/* Termin-Popup: Angaben mit Beschriftung */
.cms-event-infos {
    display: grid;
    gap: .7rem;
    margin: 1rem 0 0;
    padding: 1.1rem 1.2rem;
    border-radius: .8rem;
    background: var(--cms-farbe-hintergrund, #f3f6fa)
}

.cms-event-infos > div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: .9rem;
    align-items: baseline
}

.cms-event-infos dt,
.cms-event-abschnitt h3 {
    margin: 0;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #536477
}

.cms-event-infos dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere
}

.cms-event-kategorie {
    display: inline-flex;
    align-items: center;
    gap: .45rem
}

.cms-event-kategorie::before {
    content: '';
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--cms-event-kategorie, var(--cms-farbe-primaer, #145da0))
}

.cms-event-abschnitt {
    margin-top: 1.6rem
}

.cms-event-abschnitt h3 {
    margin-bottom: .6rem
}

@media (max-width: 520px) {
    .cms-event-infos > div {
        grid-template-columns: 1fr;
        gap: .1rem
    }
}

/* Flyer: Platzhalter "Weitere anzeigen" in Flyergröße am Ende der Reihe */
.cms-flyer-mehr-item {
    flex: 0 0 clamp(230px, 28vw, 390px)
}

.cms-flyer-mehr-item[hidden] {
    display: none !important
}

.cms-flyer-rail .cms-flyer-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    width: 100%;
    height: min(64vh, 650px);
    margin: 0;
    padding: 1.5rem;
    border: 2px dashed color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 45%, transparent);
    border-radius: .7rem;
    background: transparent;
    color: var(--cms-farbe-dunkel, #172435);
    font-size: 1.05rem;
    text-align: center
}

.cms-flyer-rail .cms-flyer-more:hover {
    filter: none;
    transform: none;
    border-color: var(--cms-farbe-primaer, #145da0);
    color: var(--cms-farbe-primaer, #145da0);
    background: color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 7%, transparent)
}

.cms-flyer-more-plus {
    font-size: 3rem;
    font-weight: 400;
    line-height: 1
}

/* Flyer-Ansicht: Start- und Endposition sowie die Pfeile richten sich nach der Höchstbreite.
   Die Reihe selbst reicht über die volle Fensterbreite, damit Flyer beim Scrollen erst am
   Bildschirmrand verschwinden bzw. von dort hereinkommen. */
.cms-events-flyer {
    --cms-flyer-rand: max(1.5rem, calc((100vw - var(--cms-flyer-max-breite, 1200px)) / 2))
}

.cms-flyer-rail {
    padding: 2rem var(--cms-flyer-rand)
}

.cms-flyer-controls {
    left: var(--cms-flyer-rand);
    right: var(--cms-flyer-rand)
}

/* Hinweis im Inhalt, z. B. wenn sich Inhalte gegenseitig einbinden */
.m-hinweis {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border: 1px dashed #c9a23f;
    border-radius: .55rem;
    background: #fff8e1;
    color: #5c4500;
    font-size: .95rem
}

/* Wartungsmodus und Registrierung */
.cms-wartungshinweis {
    padding: .5rem 1rem;
    background: #fdf0cf;
    color: #5c4500;
    font-size: .9rem;
    font-weight: 600;
    text-align: center
}

.sonderseite {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    box-sizing: border-box
}

.sonderseite-karte {
    width: min(100%, 34rem);
    padding: clamp(1.4rem, 4vw, 2.6rem);
    border-radius: 1rem;
    background: var(--cms-farbe-hell, #fff);
    box-shadow: 0 18px 60px #17243518
}

.sonderseite-karte h1 {
    margin: 0 0 .8rem
}

.sonderseite-kicker {
    margin: 0 0 .4rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cms-farbe-primaer, #145da0)
}

.sonderseite-formular {
    display: grid;
    gap: .9rem;
    margin-top: 1.2rem
}

.sonderseite-formular label {
    display: grid;
    gap: .3rem;
    font-weight: 600
}

.sonderseite-formular input,
.sonderseite-formular textarea {
    box-sizing: border-box;
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid #c3cfda;
    border-radius: .5rem;
    font: inherit
}

.sonderseite-anmeldung {
    margin-top: 1.8rem;
    padding-top: 1.1rem;
    border-top: 1px solid #dfe6ec
}

.sonderseite-anmeldung summary {
    cursor: pointer;
    color: #536477;
    font-size: .92rem
}

.sonderseite-fehler {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border-radius: .55rem;
    background: #fff0ed;
    color: #8d2a20
}

.sonderseite .kontakt-honeypot {
    position: absolute;
    left: -9999px
}

/* Brotkrumen-Navigation: Website-Titel / Unterseite */
.cms-breadcrumb {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .9rem;
    max-width: 920px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    font-size: .92rem;
    color: color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 70%, transparent)
}

.cms-breadcrumb a {
    color: var(--cms-farbe-primaer, #145da0);
    text-decoration: none
}

.cms-breadcrumb a:hover {
    text-decoration: underline
}

.cms-breadcrumb-trenner {
    opacity: .55
}

.cms-breadcrumb [aria-current] {
    font-weight: 600
}

.cms-breadcrumb + .seiteninhalt {
    margin-top: 1.5rem
}

/* Erster Baustein über die volle Breite: kein Abstand zum Kopf bzw. zu den Brotkrumen */
.seiteninhalt.beginnt-randlos,
.cms-breadcrumb + .seiteninhalt.beginnt-randlos {
    margin-top: 0
}

/* Terminliste: kompakte Datenzeile neben Flyer bzw. Datumsbox */
.cms-event-copy h3 {
    margin-bottom: .1rem
}

.cms-event-daten {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin: .3rem 0 .65rem;
    padding: 0;
    list-style: none;
    font-size: .92rem;
    color: color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 75%, transparent)
}

.cms-event-daten li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: 0
}

.cms-event-daten i {
    font-size: .85em;
    color: var(--cms-farbe-primaer, #145da0)
}

.cms-nur-vorleser {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

/* Flyer in voller Größe: eigener Dialog über dem Detail-Popup */
.cms-flyer-lightbox {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
    cursor: zoom-out
}

.cms-flyer-lightbox[open] {
    display: grid;
    place-items: center
}

.cms-flyer-lightbox::backdrop {
    background: #0b131dd9;
    backdrop-filter: blur(3px)
}

.cms-flyer-lightbox img {
    display: block;
    max-width: 96vw;
    max-height: 94dvh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: .5rem;
    box-shadow: 0 24px 90px #000a
}

.cms-flyer-lightbox-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 3.5rem;
    height: 4.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cms-farbe-hell);
    font-size: 50px;
    line-height: 1;
    cursor: pointer;
    outline: none !important;
    font-weight: 100;
}
.cms-flyer-lightbox-close:hover {
    background: transparent !important;
}

.cms-event-expand {
    cursor: zoom-in
}

/* "Weitere Flyer": ein Stapel weiterer Blätter mit Pfeil statt eines leeren, gestrichelten Felds */
.cms-flyer-rail .cms-flyer-more {
    position: relative;
    gap: .9rem;
    border: 0;
    border-radius: .7rem;
    background: color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 12%, var(--cms-farbe-hell, #fff));
    color: var(--cms-farbe-dunkel, #172435);
    box-shadow:
        14px 12px 0 -6px color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 22%, var(--cms-farbe-hell, #fff)),
        28px 24px 0 -12px color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 34%, var(--cms-farbe-hell, #fff)),
        0 16px 42px #10263c1f;
    transition: transform .25s ease, box-shadow .25s ease
}

.cms-flyer-rail .cms-flyer-more:hover {
    transform: translateY(-3px);
    border: 0;
    background: color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 18%, var(--cms-farbe-hell, #fff));
    color: var(--cms-farbe-dunkel, #172435)
}

.cms-flyer-more-pfeil {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--cms-farbe-primaer, #145da0);
    color: #fff;
    font-size: 1.5rem;
    transition: transform .25s ease
}

.cms-flyer-more:hover .cms-flyer-more-pfeil {
    transform: translateX(5px)
}

.cms-flyer-more strong {
    font-size: 1.1rem
}

.cms-flyer-more small {
    opacity: .7
}

/* Mehrere Schaltflächen: die erste ist die Hauptaktion, weitere treten zurück */
.m-btn {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem
}

.button.button-sekundaer {
    background: transparent;
    color: var(--cms-farbe-primaer, #145da0);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 55%, transparent)
}

.button.button-sekundaer:hover {
    background: color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 10%, transparent)
}

.m-text p {
    margin: 0 0 1em
}

.m-text p:last-child {
    margin-bottom: 0
}

/* Formatierter Text: Ausrichtung, Einrückung, Listen und Tabellen */
.m-text .text-rechts{text-align:right}.m-text .text-zentriert{text-align:center}.m-text .text-block{text-align:justify}
.m-text blockquote.text-einzug{margin:0 0 0 2rem;padding:0;border:0;font:inherit;color:inherit}
.m-text ul,.m-text ol{margin:0 0 1em;padding-left:1.6rem}.m-text li{margin:.2em 0}.m-text li>ul,.m-text li>ol{margin:.2em 0}
.m-text table.text-tabelle{width:100%;margin:0 0 1em;border-collapse:collapse}
.m-text .text-tabelle th,.m-text .text-tabelle td{padding:.55rem .7rem;border:1px solid #c8d3dc;text-align:left;vertical-align:top}
.m-text .text-tabelle th{background:#eef2f6;font-weight:700}
.m-text .text-tabelle .text-rechts{text-align:right}.m-text .text-tabelle .text-zentriert{text-align:center}

@media (max-width: 700px) {
    .m-text table.text-tabelle {
        display: block;
        overflow-x: auto
    }
}

/* Seitenfuß: Farben, Breite, Abstand und Ausrichtung kommen aus den Footer-Einstellungen */
.seitenfuss {
    padding: var(--fuss-abstand, 2rem) 1.5rem;
    background: var(--fuss-hintergrund, #e5ebf1);
    color: var(--fuss-text, inherit);
    text-align: var(--fuss-ausrichtung, center)
}

.seitenfuss-rahmen {
    max-width: var(--fuss-breite, 1160px);
    margin: 0 auto
}

.seitenfuss-linie {
    border-top: 1px solid color-mix(in srgb, var(--fuss-text, #172435) 22%, transparent)
}

.seitenfuss a,
.seitenfuss .site-footer-menu a {
    color: inherit
}

.seitenfuss-links .site-footer-menu ul {
    justify-content: flex-start
}

.seitenfuss-rechts .site-footer-menu ul {
    justify-content: flex-end
}

.seitenfuss-schluss {
    display: block;
    margin-top: .8rem;
    opacity: .8
}

/* Tabmenü: am Rechner umbrechen statt seitlich scrollen */
.m-tabs {
    position: relative
}

.m-tabs-list {
    flex-wrap: wrap;
    overflow-x: visible
}

/* Auf dem Handy seitlich wischen; Verlauf und Pfeil zeigen, dass es weitergeht */
@media (max-width: 700px) {
    .m-tabs-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-right: 2.4rem
    }

    .m-tabs-list::-webkit-scrollbar {
        display: none
    }

    .m-tab {
        scroll-snap-align: start
    }

    .m-tabs-list.kann-rechts {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent)
    }

    .m-tabs-list.kann-links {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem);
        mask-image: linear-gradient(to right, transparent, #000 2.5rem)
    }

    .m-tabs-list.kann-links.kann-rechts {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 4rem), transparent);
        mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 4rem), transparent)
    }

    .m-tabs.kann-rechts::after {
        content: '\203A';
        position: absolute;
        top: .45rem;
        right: 0;
        width: 1.9rem;
        height: 1.9rem;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--cms-farbe-primaer, #145da0);
        color: #fff;
        font-size: 1.35rem;
        line-height: 1;
        pointer-events: none;
        box-shadow: 0 3px 10px #10263c33;
        animation: m-tabs-wink 1.3s ease-in-out 3
    }
}

@keyframes m-tabs-wink {
    0%, 100% { transform: translateX(0) }
    50% { transform: translateX(5px) }
}

@media (prefers-reduced-motion: reduce) {
    .m-tabs.kann-rechts::after {
        animation: none
    }
}

/* Flyer-Ansicht: jeder Flyer vollständig und in eigener Größe, begrenzt durch die Einstellungen */
.cms-events-flyer {
    --cms-flyer-b: min(var(--cms-flyer-max-b, 390px), 82vw);
    --cms-flyer-h: min(var(--cms-flyer-max-h, 650px), 70vh)
}

.cms-flyer-rail {
    width: max-content;
    overflow: visible;
    align-items: center;
    will-change: transform
}

.cms-flyer-item,
.cms-flyer-item.aktiv {
    flex: 0 0 auto;
    opacity: 1;
    transform: none;
    transition: none
}

.cms-flyer-item .cms-event-open {
    display: block;
    width: auto;
    box-shadow: none;
    border-radius: .4rem;
    overflow: hidden
}

.cms-flyer-item .cms-event-poster {
    display: block;
    width: auto;
    height: auto;
    max-width: var(--cms-flyer-b);
    max-height: var(--cms-flyer-h);
    object-fit: contain;
    background: none;
    border-radius: .4rem
}

.cms-flyer-item .cms-event-open:hover .cms-event-poster {
    transform: none
}

.cms-flyer-mehr-item {
    flex: 0 0 clamp(200px, calc(var(--cms-flyer-b) * .8), var(--cms-flyer-b))
}

.cms-flyer-rail .cms-flyer-more {
    height: min(var(--cms-flyer-h), 30vh)
}

/* Passen alle Flyer nebeneinander, steht die Reihe mittig und bewegt sich nicht. */
.cms-events-flyer.no-overflow .cms-flyer-rail {
    margin-inline: auto;
    transform: none !important
}

/* Flyer-Ansicht: die Reihe ist nur so hoch wie ihr Inhalt und bleibt beim Durchscrollen mittig stehen */
.cms-events-flyer {
    min-height: 0
}

.cms-flyer-stage {
    top: var(--cms-flyer-oben, 10vh);
    height: auto
}

.cms-flyer-rail {
    padding-top: 1rem;
    padding-bottom: 1rem
}

/* Tabmenü: immer eine Zeile, seitlich scrollbar; an jedem Rand mit weiteren Tabs steht ein Pfeil-Button */
.m-tabs-leiste {
    position: relative
}

.m-tabs-list,
.m-tabs-leiste .m-tabs-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: 0
}

.m-tabs-list::-webkit-scrollbar {
    display: none
}

.m-tabs-list.kann-rechts {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4.5rem), transparent calc(100% - 1.5rem));
    mask-image: linear-gradient(to right, #000 calc(100% - 4.5rem), transparent calc(100% - 1.5rem))
}

.m-tabs-list.kann-links {
    -webkit-mask-image: linear-gradient(to right, transparent 1.5rem, #000 4.5rem);
    mask-image: linear-gradient(to right, transparent 1.5rem, #000 4.5rem)
}

.m-tabs-list.kann-links.kann-rechts {
    -webkit-mask-image: linear-gradient(to right, transparent 1.5rem, #000 4.5rem, #000 calc(100% - 4.5rem), transparent calc(100% - 1.5rem));
    mask-image: linear-gradient(to right, transparent 1.5rem, #000 4.5rem, #000 calc(100% - 4.5rem), transparent calc(100% - 1.5rem))
}

.m-tabs-pfeil {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 2.2rem;
    height: 2.2rem;
    margin-top: -1.15rem;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--cms-farbe-primaer, #145da0);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 10px #10263c33
}

.m-tabs-pfeil[hidden] {
    display: none
}

.m-tabs-pfeil-links {
    left: 0
}

.m-tabs-pfeil-rechts {
    right: 0
}

.m-tabs-pfeil:hover {
    filter: brightness(1.1)
}

/* Der frühere Hinweis-Pfeil ohne Funktion entfällt zugunsten der Buttons. */
.m-tabs.kann-rechts::after {
    content: none
}

/* Tabmenü und Terminfilter: gleiche, frei stehende Buttons in einer seitlich scrollbaren Leiste */
.cms-scroll-leiste {
    position: relative
}

.m-tabs-list,
.cms-event-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: .55rem;
    margin: 0;
    padding: .4rem .15rem;
    border: 0;
    overflow-x: auto;
    scrollbar-width: none
}

.m-tabs-list::-webkit-scrollbar,
.cms-event-filters::-webkit-scrollbar {
    display: none
}

.cms-scroll-leiste + .cms-event-list,
.cms-event-filters + .cms-event-list {
    margin-top: .8rem
}

.m-tab,
.cms-event-filters button {
    flex: 0 0 auto;
    padding: .7rem 1.15rem;
    border: 0;
    border-radius: .6rem;
    background: color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 8%, transparent);
    color: var(--cms-farbe-dunkel, #172435);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    filter: none;
    transform: none;
    transition: background .2s, color .2s
}

.m-tab:hover,
.cms-event-filters button:hover {
    background: color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 16%, transparent);
    color: var(--cms-farbe-primaer, #145da0);
    filter: none;
    transform: none
}

.m-tab.aktiv,
.cms-event-filters button.aktiv {
    background: var(--cms-farbe-primaer, #145da0);
    color: #fff
}

/* Ränder mit weiteren Buttons blenden aus, davor steht ein freier Chevron zum Weiterscrollen */
.cms-scroll-liste.kann-rechts {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 5.5rem), transparent calc(100% - 2.4rem));
    mask-image: linear-gradient(to right, #000 calc(100% - 5.5rem), transparent calc(100% - 2.4rem))
}

.cms-scroll-liste.kann-links {
    -webkit-mask-image: linear-gradient(to right, transparent 2.4rem, #000 5.5rem);
    mask-image: linear-gradient(to right, transparent 2.4rem, #000 5.5rem)
}

.cms-scroll-liste.kann-links.kann-rechts {
    -webkit-mask-image: linear-gradient(to right, transparent 2.4rem, #000 5.5rem, #000 calc(100% - 5.5rem), transparent calc(100% - 2.4rem));
    mask-image: linear-gradient(to right, transparent 2.4rem, #000 5.5rem, #000 calc(100% - 5.5rem), transparent calc(100% - 2.4rem))
}

.cms-scroll-pfeil {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 2.6rem;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--cms-farbe-primaer, #145da0);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: transform .15s ease
}

.cms-scroll-pfeil[hidden] {
    display: none
}

.cms-scroll-pfeil-links {
    left: -.3rem
}

.cms-scroll-pfeil-rechts {
    right: -.3rem
}

.cms-scroll-pfeil:hover {
    background: none;
    filter: none
}

.cms-scroll-pfeil-rechts:hover {
    transform: translateX(3px)
}

.cms-scroll-pfeil-links:hover {
    transform: translateX(-3px)
}

/* ==========================================================================
   Ton-System: Inhalte passen sich dem Hintergrund an, auf dem sie stehen.
   Jeder Bereich (Seite, farbiger Abschnitt, Parallax, Footer) legt fest, ob er
   hell oder dunkel ist; Boxen, Tabs, Akkordeons, Terminkarten usw. beziehen
   ihre Farben nur aus diesen Variablen.
   ========================================================================== */

/* Heller Grund: dunkle Schrift, weiße Boxen */
body,
.ton-hell,
.m-hintergrund,
.m-zitat,
.cms-event-dialog,
.m-popup-dialog,
.sonderseite-karte {
    --ton-text: var(--cms-farbe-dunkel, #172435);
    --ton-akzent: var(--cms-farbe-primaer, #145da0);
    --ton-auf-akzent: #fff;
    --ton-link: var(--cms-farbe-primaer, #145da0);
    --ton-box: var(--cms-farbe-hell, #fff);
    --ton-rand: color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 16%, transparent);
    --ton-sanft: color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 8%, transparent);
    --ton-schatten: 0 10px 32px #17243512;
    --ton-glas: none;
    --ton-textschatten: none;
    color: var(--ton-text)
}

/* Dunkler Grund: helle Schrift, durchscheinende helle Boxen */
.ton-dunkel,
body.ist-dunkel-hintergrund,
body.ist-dunkel-hintergrund .m-hintergrund-hintergrund,
body.ist-dunkel-hell .m-hintergrund-hell,
body.ist-dunkel-primaer .m-hintergrund-primaer,
body.ist-dunkel-dunkel .m-hintergrund-dunkel,
body.ist-dunkel-primaer .m-zitat-primaer,
body.ist-dunkel-dunkel .m-zitat-dunkel,
body.ist-dunkel-hell .m-zitat-hell,
body.ist-dunkel-hintergrund .m-zitat-hintergrund {
    --ton-text: #fff;
    --ton-akzent: var(--cms-farbe-primaer, #145da0);
    --ton-auf-akzent: #fff;
    --ton-link: currentColor;
    --ton-box: color-mix(in srgb, #fff 9%, transparent);
    --ton-rand: color-mix(in srgb, #fff 26%, transparent);
    --ton-sanft: color-mix(in srgb, #fff 13%, transparent);
    --ton-schatten: none;
    --ton-glas: none;
    --ton-textschatten: none;
    color: var(--ton-text)
}

/* Parallax: Bild im Hintergrund, deshalb dunkles Glas für Boxen und Schatten unter frei stehender Schrift */
.m-parallax {
    --ton-text: #fff;
    --ton-akzent: var(--cms-farbe-primaer, #145da0);
    --ton-auf-akzent: #fff;
    --ton-link: currentColor;
    --ton-box: color-mix(in srgb, #0b1420 60%, transparent);
    --ton-rand: color-mix(in srgb, #fff 22%, transparent);
    --ton-sanft: color-mix(in srgb, #0b1420 48%, transparent);
    --ton-schatten: 0 14px 40px #00000040;
    --ton-glas: blur(10px) saturate(1.15);
    --ton-textschatten: 0 2px 16px #000000b3, 0 1px 3px #00000099;
    color: var(--ton-text)
}

/* Wo der Grund selbst die Primärfarbe ist oder die Primärfarbe auf dunklem Grund untergeht,
   dient die Schriftfarbe als Akzent. Die beiden Zeilen mit body.ist-dunkel-primaer sind nötig, weil die Regel
   „Dunkler Grund“ oben mit genau diesem Selektor den Akzent wieder auf die Primärfarbe setzt und sonst gewinnt
   (Slogan und andere Akzente wären auf einer dunklen Primärfarbe unsichtbar). */
.m-hintergrund-primaer,
.m-zitat-primaer,
body.ist-dunkel-primaer .m-hintergrund-primaer,
body.ist-dunkel-primaer .m-zitat-primaer,
body.primaer-sehr-dunkel .ton-dunkel,
body.primaer-sehr-dunkel.ist-dunkel-hintergrund,
body.primaer-sehr-dunkel .m-parallax,
body.primaer-sehr-dunkel.ist-dunkel-dunkel .m-hintergrund-dunkel,
body.primaer-sehr-dunkel.ist-dunkel-dunkel .m-zitat-dunkel {
    --ton-akzent: var(--ton-text);
    --ton-auf-akzent: var(--cms-farbe-primaer, #145da0)
}

.m-hintergrund-primaer,
.m-hintergrund-dunkel,
.m-hintergrund-hell,
.m-hintergrund-hintergrund {
    color: var(--ton-text)
}

/* Im Footer gilt die dort eingestellte Schriftfarbe (automatisch oder selbst gewählt) als Grundlage. */
.seitenfuss.ton-hell,
.seitenfuss.ton-dunkel {
    --ton-text: var(--fuss-text, var(--cms-farbe-dunkel, #172435));
    color: var(--ton-text)
}

/* ---------- Schrift und Links ---------- */
.m-con h1, .m-con h2, .m-con h3, .m-con h4, .m-con h5 {
    color: inherit;
    text-shadow: var(--ton-textschatten)
}

/* Links: auf hellem Grund in der Primärfarbe, auf dunklem Grund in der Schriftfarbe und unterstrichen */
.m-con a:not(.button),
.seitenfuss a:not(.button) {
    color: var(--ton-link, var(--cms-farbe-primaer, #145da0));
    text-underline-offset: .15em
}

.m-text a:not(.button) {
    text-decoration: underline
}

.ton-dunkel .site-footer-menu a,
.ton-dunkel .m-sidebar-menu a {
    text-decoration: none
}

/* ---------- Boxen: Akkordeon, Terminkarten, Seitenmenü, Formularfelder ---------- */
.m-acc,
.cms-event-card,
.m-sidebar-menu,
.kontaktfeld {
    background: var(--ton-box);
    border: 1px solid var(--ton-rand);
    color: var(--ton-text);
    box-shadow: var(--ton-schatten);
    -webkit-backdrop-filter: var(--ton-glas);
    backdrop-filter: var(--ton-glas)
}

.m-acc-btn:hover {
    background: var(--ton-sanft)
}

.cms-flyer-item .cms-event-card {
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

.cms-event-copy p,
.cms-event-daten {
    color: color-mix(in srgb, var(--ton-text) 78%, transparent)
}

.cms-event-daten i {
    color: var(--ton-akzent)
}

.cms-event-date {
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent)
}

.cms-event-copy button {
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent)
}

.m-sidebar-menu a:hover,
.m-sidebar-menu a.aktiv {
    background: color-mix(in srgb, var(--ton-akzent) 16%, transparent);
    color: var(--ton-akzent)
}

.kontaktformular input:not([type=radio]):not([type=checkbox]),
.kontaktformular textarea,
.kontaktformular select {
    color: #172435
}

/* ---------- Tabmenü und Filter ---------- */
.m-tab,
.cms-event-filters button {
    background: var(--ton-sanft);
    color: var(--ton-text);
    -webkit-backdrop-filter: var(--ton-glas);
    backdrop-filter: var(--ton-glas)
}

.m-tab:hover,
.cms-event-filters button:hover {
    background: color-mix(in srgb, var(--ton-akzent) 24%, var(--ton-sanft));
    color: var(--ton-text)
}

.m-tab.aktiv,
.cms-event-filters button.aktiv {
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent)
}

.cms-scroll-pfeil {
    color: var(--ton-akzent)
}

/* ---------- Schaltflächen ---------- */
.m-btn .button {
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent)
}

.m-btn .button.button-sekundaer {
    background: transparent;
    color: var(--ton-akzent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ton-akzent) 60%, transparent)
}

.m-btn .button.button-sekundaer:hover {
    background: color-mix(in srgb, var(--ton-akzent) 14%, transparent)
}

/* ---------- Tabellen im Text ---------- */
.m-text .text-tabelle th,
.m-text .text-tabelle td {
    border-color: var(--ton-rand)
}

.m-text .text-tabelle th {
    background: var(--ton-sanft)
}

/* ---------- Parallax: Text in passenden Boxen, Überschriften und Bilder stehen frei ---------- */
.m-parallax .m-text,
.m-parallax .m-kontaktformular,
.m-parallax .cms-event-empty {
    padding: 1.1rem 1.35rem;
    border: 1px solid var(--ton-rand);
    border-radius: .8rem;
    background: var(--ton-box);
    box-shadow: var(--ton-schatten);
    -webkit-backdrop-filter: var(--ton-glas);
    backdrop-filter: var(--ton-glas)
}

.m-parallax .m-text {
    margin-top: 1rem;
    margin-bottom: 1rem
}

/* Text in einer Box braucht keine zweite Box. */
.m-parallax .m-acc .m-text,
.m-parallax .cms-event-card .m-text,
.m-parallax .m-text .m-text {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

/* Popups setzen wieder auf hellem Grund auf, egal in welchem Abschnitt sie ausgelöst werden. */
.cms-event-dialog a:not(.button) {
    color: var(--cms-farbe-primaer, #145da0)
}

/* Das Fußmenü bleibt in der Schriftfarbe des Footers. */
.seitenfuss .site-footer-menu a:not(.button) {
    color: inherit
}

/* ---------- Slogan: kleine Zeile über Überschriften und in der Zitatbox ---------- */
.m-slogan {
    margin: 0 0 .55rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ton-akzent);
    text-shadow: var(--ton-textschatten)
}

.m-slogan + h1, .m-slogan + h2, .m-slogan + h3, .m-slogan + h4, .m-slogan + h5 {
    margin-top: 0
}

/* ---------- Spalten nebeneinander: 4 → 3 → 2 → 1, Breiten aus den Einstellungen ---------- */
.m-spalten {
    --spalten: 2;
    display: grid;
    grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
    gap: 1.6rem 2rem;
    align-items: start;
    margin: 1.5rem 0
}

.m-spalten-3 { --spalten: 3 }
.m-spalten-4 { --spalten: 4 }

.m-spalte {
    min-width: 0
}

.m-spalte > :first-child { margin-top: 0 }
.m-spalte > :last-child { margin-bottom: 0 }
.m-spalte .m-text { max-width: none }

/* ---------- Zitatbox ---------- */
.m-zitat {
    --zitat-farbe: var(--cms-farbe-primaer, #145da0);
    margin: 1.5rem 0;
    padding: clamp(1.4rem, 3vw, 2.2rem);
    border-radius: 1rem;
    background: linear-gradient(150deg, var(--zitat-farbe), color-mix(in srgb, var(--zitat-farbe) 82%, #000));
    color: var(--ton-text)
}

.m-zitat-dunkel { --zitat-farbe: var(--cms-farbe-dunkel, #172435) }
.m-zitat-hell { --zitat-farbe: var(--cms-farbe-hell, #fff); border: 1px solid var(--ton-rand) }
.m-zitat-hintergrund { --zitat-farbe: var(--cms-farbe-hintergrund, #f3f6fa); border: 1px solid var(--ton-rand) }

.m-zitat .m-slogan {
    opacity: .88
}

.m-zitat blockquote {
    margin: 0;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.38
}

.m-zitat figcaption {
    margin-top: 1rem;
    opacity: .9
}

/* ---------- Kontaktkarten ---------- */
.m-kontaktkarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    gap: 1.2rem;
    margin: 1.5rem 0
}

.m-kontaktkarte {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    padding: 1.3rem;
    border: 1px solid var(--ton-rand);
    border-radius: 1rem;
    background: var(--ton-box);
    color: var(--ton-text);
    box-shadow: var(--ton-schatten);
    -webkit-backdrop-filter: var(--ton-glas);
    backdrop-filter: var(--ton-glas)
}

.m-kontaktkarte-bild {
    flex: 0 0 5rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ton-sanft)
}

.m-kontaktkarte-initial {
    display: grid;
    place-items: center;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--ton-akzent)
}

.m-kontaktkarte-text {
    min-width: 0
}

.m-kontaktkarte h3 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25
}

.m-kontaktkarte-funktion {
    margin: .15rem 0 0;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ton-akzent)
}

.m-kontaktkarte-kommentar {
    margin: .6rem 0 0;
    font-size: .95rem;
    color: color-mix(in srgb, var(--ton-text) 80%, transparent)
}

.m-kontaktkarte-wege {
    display: grid;
    gap: .3rem;
    margin: .8rem 0 0;
    padding: 0;
    list-style: none
}

.m-kontaktkarte-wege:empty {
    display: none
}

.m-kontaktkarte-wege li {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    min-width: 0
}

.m-kontaktkarte-wege i {
    flex: 0 0 1rem;
    font-size: .85em;
    color: var(--ton-akzent)
}

.m-kontaktkarte-wege a {
    overflow-wrap: anywhere;
    text-decoration: none
}

.m-kontaktkarte-wege a:hover {
    text-decoration: underline
}

/* ---------- Überschriften: größer, mit Umbruch und Silbentrennung ---------- */
.m-hl1 h1, .m-hl2 h2, .m-hl3 h3, .m-hl4 h4, .m-hl5 h5 {
    margin: 0 0 .5em;
    font-weight: 800;
    letter-spacing: -.02em;
    /* Zeilen gleichmäßig verteilen statt eines einzelnen Wortes in der letzten Zeile */
    text-wrap: balance;
    /* Zu lange Wörter an Silben trennen (Sprache der Seite), notfalls mitten im Wort umbrechen */
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    /* Nur Wörter ab 10 Buchstaben trennen, mit mindestens 4 Buchstaben vor und nach dem Trennstrich */
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
    hyphenate-limit-chars: 10 4 4
}

.m-hl1 h1 { font-size: clamp(2.5rem, 6.4vw, 4.4rem); line-height: 1.08; letter-spacing: -.03em }
.m-hl2 h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.12 }
.m-hl3 h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.18 }
.m-hl4 h4 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.24; font-weight: 700 }
.m-hl5 h5 { font-size: 1.05rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em }

.m-hl1, .m-hl2, .m-hl3, .m-hl4, .m-hl5 {
    margin-top: 3.5rem
}

/* In Spalten und Karten richtet sich die Größe nach der Breite des Teils, nicht nach dem Bildschirm. */
.m-spalte {
    container-type: inline-size
}

@container (max-width: 520px) {
    .m-hl1 h1 { font-size: clamp(1.9rem, 11cqi, 3rem) }
    .m-hl2 h2 { font-size: clamp(1.65rem, 9cqi, 2.4rem) }
    .m-hl3 h3 { font-size: clamp(1.4rem, 7.5cqi, 1.9rem) }
    .m-hl4 h4 { font-size: clamp(1.2rem, 6cqi, 1.5rem) }
}

/* ---------- Popup-Baustein ---------- */
.m-popup {
    margin: 1.5rem 0
}

.m-popup-knopf {
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent)
}

.m-popup-dialog {
    width: min(760px, calc(100vw - 2rem));
    max-width: none;
    max-height: min(88dvh, 920px);
    margin: auto;
    padding: clamp(1.3rem, 3vw, 2.2rem);
    border: 0;
    border-radius: 1.1rem;
    background: var(--cms-farbe-hell, #fff);
    box-shadow: 0 24px 90px #07172955;
    overflow: auto;
    text-align: left
}


.m-popup-dialog::backdrop {
    background: #101a27b3;
    backdrop-filter: blur(4px)
}

@keyframes m-popup-ein {
    from { opacity: 0; transform: translateY(12px) scale(.98) }
    to { opacity: 1; transform: none }
}

.m-popup-schliessen {
    position: sticky;
    top: 0;
    float: right;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    margin: -.4rem -.4rem .4rem .8rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #eaf0f5;
    color: #172435;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer
}

.m-popup-inhalt > :first-child { margin-top: 0 }
.m-popup-inhalt > :last-child { margin-bottom: 0 }
.m-popup-inhalt .m-text { max-width: none }

/* ---------- Blog-Baustein ---------- */
.m-blog {
    margin: 1.5rem 0
}

.m-blog-karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1.4rem
}

.m-blog-karte {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ton-rand);
    border-radius: 1rem;
    background: var(--ton-box);
    color: var(--ton-text);
    box-shadow: var(--ton-schatten);
    overflow: hidden;
    -webkit-backdrop-filter: var(--ton-glas);
    backdrop-filter: var(--ton-glas);
    transition: transform .2s ease
}

.m-blog-karte:hover {
    transform: translateY(-3px)
}

.m-blog-bild {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--ton-sanft);
    overflow: hidden
}

.m-blog-bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.m-blog-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.2rem 1.3rem 1.4rem
}

.m-blog-text h3 {
    margin: 0 0 .5rem;
    font-size: 1.25rem;
    line-height: 1.25;
    overflow-wrap: break-word;
    hyphens: auto
}

.m-blog-text h3 a {
    color: inherit;
    text-decoration: none
}

.m-blog-text p:not(.m-slogan) {
    margin: 0 0 1rem;
    color: color-mix(in srgb, var(--ton-text) 80%, transparent)
}

.m-blog-mehr {
    margin-top: auto;
    font-weight: 700;
    color: var(--ton-akzent);
    text-decoration: none
}

.m-blog-mehr::after {
    content: ' \2192'
}

.m-blog-mehr:hover {
    text-decoration: underline
}

.m-blog-beitrag + .m-blog-beitrag {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--ton-rand)
}

.m-blog-beitrag > h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    text-wrap: balance
}

.m-blog-leer {
    padding: 1.2rem;
    border: 1px dashed var(--ton-rand);
    border-radius: .8rem;
    text-align: center;
    color: color-mix(in srgb, var(--ton-text) 70%, transparent)
}

@media (prefers-reduced-motion: reduce) {
    .m-blog-karte { transition: none }
}

/* Ohne JavaScript lässt sich kein Dialog öffnen: Der Inhalt steht dann offen unter dem Button. */
html:not(.cms-js) .m-popup-dialog {
    display: block;
    position: static;
    width: auto;
    max-height: none;
    margin-top: 1rem;
    box-shadow: none;
    border: 1px solid var(--ton-rand)
}

html:not(.cms-js) .m-popup-schliessen {
    display: none
}

.m-kontaktkarte-wege address {
    font-style: normal;
    overflow-wrap: anywhere
}

/* Kontaktkarte: Der Text nutzt die ganze restliche Breite; umbrochen wird erst am Kartenrand. */
.m-kontaktkarte-text {
    flex: 1 1 0;
    min-width: 0
}

.m-kontaktkarte-wege li > address,
.m-kontaktkarte-wege li > a {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word
}

.m-kontaktkarte-initial {
    font-size: 2rem
}

/* ==========================================================================
   Kontaktformular im Look der Website
   ========================================================================== */
.kontaktformular {
    display: grid;
    gap: 1.25rem;
    max-width: 720px;
    padding: clamp(1.3rem, 3.5vw, 2.2rem);
    border: 1px solid var(--ton-rand);
    border-radius: 1rem;
    background: var(--ton-box);
    color: var(--ton-text);
    box-shadow: var(--ton-schatten);
    -webkit-backdrop-filter: var(--ton-glas);
    backdrop-filter: var(--ton-glas)
}

/* Im Parallax liegt das Formular bereits in einer Glasbox. */
.m-parallax .kontaktformular {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

/* Felder: Beschriftung oben, kein Kasten um jedes Feld */
.kontaktformular .kontaktfeld {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

.kontaktformular .kontaktfeld legend {
    margin-bottom: .45rem;
    padding: 0;
    font-size: .95rem;
    font-weight: 650
}

.kontaktformular input:not([type=radio]):not([type=checkbox]),
.kontaktformular textarea,
.kontaktformular select {
    box-sizing: border-box;
    width: 100%;
    padding: .8rem .95rem;
    border: 1.5px solid var(--ton-rand);
    border-radius: .65rem;
    background: color-mix(in srgb, var(--ton-text) 4%, transparent);
    color: var(--ton-text);
    font: inherit;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s, background .15s
}

.kontaktformular textarea {
    min-height: 8.5rem;
    resize: vertical
}

.kontaktformular select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.6rem;
    cursor: pointer;
    /* eigener Pfeil in der Schriftfarbe */
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.25rem) 50%, calc(100% - .9rem) 50%;
    background-size: .36rem .36rem;
    background-repeat: no-repeat
}

/* Die aufgeklappte Liste zeichnet der Browser selbst, dort bleibt die Schrift dunkel. */
.kontaktformular select option {
    color: #172435;
    background: #fff
}

.kontaktformular input:not([type=radio]):not([type=checkbox]):hover,
.kontaktformular textarea:hover,
.kontaktformular select:hover {
    border-color: color-mix(in srgb, var(--ton-akzent) 55%, var(--ton-rand))
}

.kontaktformular input:not([type=radio]):not([type=checkbox]):focus,
.kontaktformular textarea:focus,
.kontaktformular select:focus {
    outline: 0;
    border-color: var(--ton-akzent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ton-akzent) 22%, transparent)
}

.kontaktformular ::placeholder {
    color: color-mix(in srgb, var(--ton-text) 50%, transparent)
}

/* Auswahlfelder: jede Option eine anklickbare Zeile mit eigenem Kästchen bzw. Punkt */
.kontaktformular .kontaktfeld-radio,
.kontaktformular .kontaktfeld-checkbox {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: .55rem
}

.kontaktformular .kontaktfeld-radio legend,
.kontaktformular .kontaktfeld-checkbox legend {
    grid-column: 1 / -1
}

.kontakt-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .7rem .9rem;
    border: 1.5px solid var(--ton-rand);
    border-radius: .65rem;
    cursor: pointer;
    transition: border-color .15s, background .15s
}

.kontakt-option:hover {
    border-color: color-mix(in srgb, var(--ton-akzent) 60%, var(--ton-rand))
}

.kontakt-option:has(input:checked) {
    border-color: var(--ton-akzent);
    background: color-mix(in srgb, var(--ton-akzent) 12%, transparent)
}

.kontakt-option input {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 1.35rem;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    display: grid;
    place-content: center;
    border: 2px solid color-mix(in srgb, var(--ton-text) 45%, transparent);
    border-radius: .38rem;
    background: transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s
}

.kontakt-option input[type=radio] {
    border-radius: 50%
}

.kontakt-option input::before {
    content: '';
    width: .78rem;
    height: .78rem;
    background: var(--ton-auf-akzent);
    transform: scale(0);
    transition: transform .15s ease
}

/* Haken für Kästchen, Punkt für die Einfachauswahl */
.kontakt-option input[type=checkbox]::before {
    clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 9%, 37% 70%)
}

.kontakt-option input[type=radio]::before {
    width: .56rem;
    height: .56rem;
    border-radius: 50%
}

.kontakt-option input:checked {
    border-color: var(--ton-akzent);
    background: var(--ton-akzent)
}

.kontakt-option input:checked::before {
    transform: scale(1)
}

.kontakt-option input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ton-akzent) 45%, transparent);
    outline-offset: 2px
}

.kontakt-option span {
    min-width: 0;
    overflow-wrap: break-word
}

/* Sicherheitsfrage */
.kontaktformular .kontakt-captcha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1rem;
    border-radius: .65rem;
    background: var(--ton-sanft);
    font-weight: 600
}

.kontaktformular .kontakt-captcha input:not([type=radio]):not([type=checkbox]) {
    width: 6.5rem
}

.kontaktformular-einleitung {
    margin: 0;
    font-size: .95rem;
    color: color-mix(in srgb, var(--ton-text) 78%, transparent)
}

/* Absenden */
.kontaktformular button[type=submit] {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.6rem;
    border: 0;
    border-radius: .7rem;
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, filter .15s
}

.kontaktformular button[type=submit]::after {
    content: '\2192';
    transition: transform .15s
}

.kontaktformular button[type=submit]:hover {
    filter: brightness(1.07);
    transform: translateY(-1px)
}

.kontaktformular button[type=submit]:hover::after {
    transform: translateX(4px)
}

/* Bestätigung nach dem Absenden */
.m-kontakt-erfolg {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid color-mix(in srgb, #1e8449 45%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, #1e8449 12%, var(--ton-box));
    color: var(--ton-text);
    font-weight: 600
}

.m-kontakt-erfolg::before {
    content: '\2713';
    flex: 0 0 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #1e8449;
    color: #fff
}

@media (prefers-reduced-motion: reduce) {
    .kontaktformular *,
    .kontaktformular *::before,
    .kontaktformular *::after {
        transition: none
    }
}

/* ==========================================================================
   Karussell: Boxen gleiten endlos weiter, Punkte mit Ladebalken, Chevrons zum Blättern
   ========================================================================== */
.m-karussell {
    --karussell-abstand: 1.2rem;
    --sichtbar: var(--karussell-sichtbar, 3);
    margin: 1.5rem 0
}

/* Auf schmaleren Bildschirmen weniger Boxen gleichzeitig */
@media (max-width: 900px) {
    .m-karussell { --sichtbar: min(var(--karussell-sichtbar, 3), 2) }
}

@media (max-width: 600px) {
    .m-karussell { --sichtbar: 1; --karussell-abstand: .9rem }
}

.m-spalte .m-karussell {
    --sichtbar: 1
}

.m-karussell-buehne {
    position: relative;
    padding: 0 2.7rem
}

.m-karussell-buehne > .cms-scroll-pfeil-links { left: 0 }
.m-karussell-buehne > .cms-scroll-pfeil-rechts { right: 0 }

.m-karussell-fest .cms-scroll-pfeil,
.m-karussell-fest .m-karussell-punkte {
    display: none
}

.m-karussell-fest .m-karussell-buehne {
    padding: 0
}

/* Ohne JavaScript bleibt das Fenster seitlich scrollbar; mit JavaScript bewegt sich das Band. */
.m-karussell-fenster {
    overflow-x: auto;
    scrollbar-width: none;
    padding: .5rem 0
}

.m-karussell-fenster::-webkit-scrollbar {
    display: none
}

.cms-js .m-karussell-fenster {
    overflow: hidden
}

.m-karussell-band {
    display: flex;
    gap: var(--karussell-abstand);
    transition: transform .6s cubic-bezier(.3, .7, .25, 1);
    will-change: transform
}

.m-karussell-fest .m-karussell-band {
    justify-content: center
}

.m-karussell-box {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 calc((100% - (var(--sichtbar) - 1) * var(--karussell-abstand)) / var(--sichtbar));
    min-width: 0;
    padding: 1.3rem;
    border: 1px solid var(--ton-rand);
    border-radius: 1rem;
    background: var(--ton-box);
    color: var(--ton-text);
    /* box-shadow: var(--ton-schatten); */
    -webkit-backdrop-filter: var(--ton-glas);
    backdrop-filter: var(--ton-glas);
    transition: transform .2s ease, border-color .2s ease
}

.m-karussell-box-link:hover {
    transform: translateY(-3px);
    border-color: var(--ton-akzent)
}

/* Der Link füllt die ganze Box; Links und Buttons im Inhalt liegen darüber. */
.m-karussell-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit
}

.m-karussell-link:focus-visible {
    outline: 3px solid var(--ton-akzent);
    outline-offset: 2px
}

.m-karussell-inhalt a,
.m-karussell-inhalt button {
    position: relative;
    z-index: 2
}

.m-karussell-inhalt > :first-child { margin-top: 0 }
.m-karussell-inhalt > :last-child { margin-bottom: 0 }
.m-karussell-inhalt .m-text { max-width: none }
.m-karussell-inhalt .m-img img { width: 100% }

/* In den Boxen richtet sich die Größe der Überschriften nach der Box. */
.m-karussell-box {
    container-type: inline-size
}

/* Punkte: einer je Box, der aktuelle wird breiter und füllt sich bis zum nächsten Wechsel */
.m-karussell-punkte {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .55rem;
    min-height: 2.4rem;
    padding: .7rem .5rem 0
}

.m-karussell-punkt {
    position: relative;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ton-text) 30%, transparent);
    overflow: hidden;
    cursor: pointer;
    transition: flex-basis .28s ease, width .28s ease, background .2s ease
}

.m-karussell-punkt:hover {
    background: color-mix(in srgb, var(--ton-text) 50%, transparent)
}

.m-karussell-punkt.aktiv {
    flex-basis: 42px;
    width: 42px;
    background: color-mix(in srgb, var(--ton-text) 18%, transparent)
}

.m-karussell-punkt span {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--ton-akzent);
    transform: scaleX(0);
    transform-origin: left center
}

/* Angehalten (Maus darüber) oder ohne Bewegung: der aktuelle Punkt ist einfach gefüllt. */
.m-karussell-punkt.aktiv span {
    transform: scaleX(1)
}

.m-karussell-punkt.aktiv.laeuft span {
    animation: m-karussell-laden var(--karussell-dauer, 5000ms) linear forwards
}

@keyframes m-karussell-laden {
    from { transform: scaleX(0) }
    to { transform: scaleX(1) }
}

@media (prefers-reduced-motion: reduce) {
    .m-karussell-band,
    .m-karussell-box { transition: none }
    .m-karussell-punkt.aktiv.laeuft span { animation: none }
}

/* Karussell: Auch Akkordeons, Popups und Menüs in einer Box bleiben über dem Box-Link bedienbar. */
.m-karussell-inhalt summary,
.m-karussell-inhalt .m-acc,
.m-karussell-inhalt .m-popup,
.m-karussell-inhalt .m-sidebar-menu {
    position: relative;
    z-index: 2
}

.m-karussell-inhalt .m-sidebar-menu {
    float: none;
    width: auto;
    margin: 0 0 1rem
}

/* Spalten in einer Box richten sich nach der Breite der Box: In schmalen Boxen stehen sie untereinander. */
@container (max-width: 520px) {
    .m-karussell-inhalt .m-spalten {
        --spalten: 1 !important
    }
}

@container (min-width: 521px) and (max-width: 820px) {
    .m-karussell-inhalt .m-spalten-3,
    .m-karussell-inhalt .m-spalten-4 {
        --spalten: 2
    }
}

/* ==========================================================================
   Menü-Baustein als Spalte: links neben dem Inhalt, über die ganze Höhe der Seite
   ========================================================================== */
.seite-mit-spalte {
    display: grid;
    grid-template-columns: clamp(220px, 20vw, 300px) minmax(0, 1fr)
}

.seiten-spalte {
    padding: 2rem 1rem 2rem 1.4rem;
    border-right: 1px solid var(--ton-rand);
    background: var(--cms-farbe-hell, #fff)
}

/* Das Menü bleibt beim Scrollen unter der Kopfleiste stehen. */
.seiten-spalte .m-sidebar-menu {
    position: sticky;
    top: calc(82px + 1.5rem);
    float: none;
    width: auto;
    max-height: calc(100vh - 82px - 3rem);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    overflow-y: auto
}

.seite-inhaltsspalte {
    min-width: 0;
    container-type: inline-size
}

/* Abschnitte über die volle Breite füllen neben der Spalte nur die Inhaltsspalte, nicht den ganzen Bildschirm. */
.seite-inhaltsspalte .seiteninhalt .m-parallax,
.seite-inhaltsspalte .seiteninhalt .m-hintergrund {
    width: 100cqw;
    margin-left: calc(50% - 50cqw)
}

.seite-inhaltsspalte .cms-events-flyer {
    width: 100cqw;
    margin-left: calc(50% - 50cqw);
    --cms-flyer-rand: max(1.5rem, calc((100cqw - var(--cms-flyer-max-breite, 1200px)) / 2))
}

@media (max-width: 900px) {
    .seite-mit-spalte {
        display: block
    }

    .seiten-spalte {
        padding: 1rem 1.5rem;
        border-right: 0;
        border-bottom: 1px solid var(--ton-rand)
    }

    .seiten-spalte .m-sidebar-menu {
        position: static;
        max-height: none
    }
}

/* Menü-Baustein auf schmalen Bildschirmen: eine Zeile wie das Tabmenü, seitlich scrollbar mit Chevrons (tabs.js) */
@media (max-width: 900px) {
    .m-sidebar-menu,
    .seiten-spalte .m-sidebar-menu {
        float: none;
        width: auto;
        margin: 0 0 1rem;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        overflow: visible
    }

    .seiten-spalte {
        padding: .5rem 1.5rem
    }

    .seiten-spalte .m-sidebar-menu {
        margin: 0
    }

    .m-sidebar-menu ul {
        display: flex;
        flex-wrap: nowrap;
        gap: .55rem;
        padding: .4rem .15rem;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none
    }

    .m-sidebar-menu ul::-webkit-scrollbar {
        display: none
    }

    .m-sidebar-menu li,
    .m-sidebar-menu li+li {
        flex: 0 0 auto;
        margin: 0
    }

    .m-sidebar-menu li>ul {
        display: none
    }

    .m-sidebar-menu a {
        padding: .7rem 1.15rem;
        border-radius: .6rem;
        color: var(--ton-text);
        font-weight: 600;
        transition: background .2s, color .2s
    }

    .m-sidebar-menu a:hover {
        background: color-mix(in srgb, var(--ton-akzent) 24%, var(--ton-sanft));
        color: var(--ton-text)
    }

    .m-sidebar-menu a.aktiv,
    .m-sidebar-menu a.aktiv:hover {
        background: var(--ton-akzent);
        color: var(--ton-auf-akzent)
    }
}

/* Terminkarte: Angaben stehen untereinander, Symbole in einer Flucht; mehrere Kategorien teilen sich eine Zeile */
.cms-event-daten i {
    width: 1.1em;
    text-align: center
}

.cms-event-daten .cms-event-kategorien {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1rem
}

.cms-event-daten .cms-event-kategorie::before {
    margin: 0 .2em
}

/* Eigene CSS-Änderungen */

.m-acc.offen .m-acc-btn {
    background: var(--ton-box);
    color: var(--cms-farbe-primaer);
}
.m-acc-icon {
    color: var(--cms-farbe-primaer);
}
.m-acc-inhalt {
    padding-top: 20px;
}

/* Abschnitte über die volle Breite (Hintergrund, Parallax): Ihr Inhalt steht in derselben Flucht wie der übrige
   Seiteninhalt, und davor wie danach bleibt zu normalen Bausteinen derselbe Abstand wie im Abschnitt selbst. */
.seiteninhalt .m-parallax,
.seiteninhalt .m-hintergrund,
.vorschau .m-parallax,
.vorschau .m-hintergrund {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.m-parallax-inhalt,
.m-hintergrund-inhalt {
    max-width: calc(920px - 3rem)
}

:is(.m-hintergrund, .m-parallax) + :not(.m-hintergrund, .m-parallax),
:not(.m-hintergrund, .m-parallax) + :is(.m-hintergrund, .m-parallax) {
    margin-top: 3.5rem
}

@media (max-width: 700px) {
    :is(.m-hintergrund, .m-parallax) + :not(.m-hintergrund, .m-parallax),
    :not(.m-hintergrund, .m-parallax) + :is(.m-hintergrund, .m-parallax) {
        margin-top: 2.25rem
    }
}

/* Seitlich scrollende Leisten auf dem Handy: schmalere Chevrons und kürzere Ausblendung, damit mehr vom Button sichtbar bleibt */
@media (max-width: 700px) {
    .cms-scroll-leiste > .cms-scroll-pfeil {
        width: 1.5rem;
        font-size: 1.15rem
    }

    .cms-scroll-leiste > .cms-scroll-pfeil-links {
        left: -.45rem
    }

    .cms-scroll-leiste > .cms-scroll-pfeil-rechts {
        right: -.45rem
    }

    .cms-scroll-leiste > .cms-scroll-liste.kann-rechts {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.6rem), transparent calc(100% - .9rem));
        mask-image: linear-gradient(to right, #000 calc(100% - 2.6rem), transparent calc(100% - .9rem))
    }

    .cms-scroll-leiste > .cms-scroll-liste.kann-links {
        -webkit-mask-image: linear-gradient(to right, transparent .9rem, #000 2.6rem);
        mask-image: linear-gradient(to right, transparent .9rem, #000 2.6rem)
    }

    .cms-scroll-leiste > .cms-scroll-liste.kann-links.kann-rechts {
        -webkit-mask-image: linear-gradient(to right, transparent .9rem, #000 2.6rem, #000 calc(100% - 2.6rem), transparent calc(100% - .9rem));
        mask-image: linear-gradient(to right, transparent .9rem, #000 2.6rem, #000 calc(100% - 2.6rem), transparent calc(100% - .9rem))
    }
}

/* Terminkarte: größerer Titel; die Schrift im Datumsfeld folgt der Farbe des Feldes (Kategoriefarbe) */
.cms-event-copy h3 {
    font-size: 1.45rem;
    line-height: 1.2
}

.cms-event-date b,
.cms-event-date small {
    color: inherit
}

/* Menü-Baustein: Schrift in der dunklen Farbe (auf dunklem Grund entsprechend hell) statt in der Akzentfarbe;
   der aktuelle Punkt bleibt über Hinterlegung und fette Schrift erkennbar. */
.m-con.m-sidebar-menu a:not(.button),
.m-con.m-sidebar-menu a:not(.button):hover,
.m-con.m-sidebar-menu a.aktiv:not(.button) {
    color: var(--ton-text)
}

@media (max-width: 900px) {
    .m-con.m-sidebar-menu a.aktiv:not(.button),
    .m-con.m-sidebar-menu a.aktiv:not(.button):hover {
        color: var(--ton-auf-akzent)
    }
}

/* ---------- Baustein „Downloads“ und Datei-Betrachter ---------- */
.m-download {
    padding: 55px 3px;
}

.m-download-liste {
    display: grid;
    gap: .8rem;
    margin: 0;
    padding: 0;
    list-style: none
}

.m-download-datei {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem 1.1rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--ton-rand);
    border-radius: .8rem;
    background: var(--ton-box);
    color: var(--ton-text);
    box-shadow: var(--ton-schatten);
    -webkit-backdrop-filter: var(--ton-glas);
    backdrop-filter: var(--ton-glas)
}

.m-download-symbol {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: .7rem;
    background: var(--ton-sanft);
    color: var(--ton-akzent);
    font-size: 1.45rem
}

.m-download-text strong {
    display: block;
    font-size: 1.1rem;
    line-height: 1.25;
    overflow-wrap: anywhere
}

.m-download-text small {
    display: block;
    margin-top: .15rem;
    color: color-mix(in srgb, var(--ton-text) 70%, transparent)
}

.m-download-text p {
    margin: .4rem 0 0;
    font-size: .95rem
}

.m-download-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end
}

.m-con.m-download .m-download-knoepfe a.button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .6rem 1rem;
    border-radius: .6rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent)
}

.m-con.m-download .m-download-knoepfe a.button-sekundaer {
    background: transparent;
    color: var(--ton-akzent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ton-akzent) 60%, transparent)
}

@media (max-width: 700px) {
    .m-download-datei {
        grid-template-columns: auto minmax(0, 1fr)
    }

    .m-download-knoepfe {
        grid-column: 1 / -1;
        justify-content: stretch
    }

    .m-con.m-download .m-download-knoepfe a.button {
        flex: 1 1 auto;
        justify-content: center
    }
}

.cms-datei-dialog {
    width: min(1100px, calc(100vw - 2rem));
    height: min(92vh, 1400px);
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: .9rem;
    overflow: hidden;
    background: #1d232b;
    color: #fff;
    box-shadow: 0 30px 80px #000a
}

.cms-datei-dialog[open] {
    display: flex;
    flex-direction: column
}

.cms-datei-dialog::backdrop {
    background: #0b1016cc
}

.cms-datei-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .6rem .55rem 1.1rem;
    background: #141a21
}

.cms-datei-titel {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.cms-datei-knoepfe {
    display: flex;
    gap: .25rem;
    flex: 0 0 auto
}

.cms-datei-knoepfe a,
.cms-datei-knoepfe button {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: none;
    filter: none;
    transform: none;
    text-decoration: none
}

.cms-datei-knoepfe a:hover,
.cms-datei-knoepfe button:hover {
    background: #ffffff22
}

.cms-datei-flaeche {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    place-items: center;
    background: #2a313a
}

.cms-datei-flaeche iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff
}

.cms-datei-flaeche img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.cms-datei-dialog:fullscreen {
    width: 100vw;
    height: 100vh;
    border-radius: 0
}

html.cms-datei-offen {
    overflow: hidden
}

.sonderseite-fehler {
    padding: .7rem 1rem;
    border-radius: .6rem;
    background: #fbe9e7;
    color: #8c1d18;
    font-weight: 600
}

/* Anmelden und Profil auf der Website */
.sonderseite-erfolg {
    padding: .7rem 1rem;
    border-radius: .6rem;
    background: #e6f4ea;
    color: #1d5a2e;
    font-weight: 600
}

.sonderseite-neben {
    margin: .9rem 0 0;
    font-size: .95rem
}

.sonderseite-formular h2 {
    margin: 1.4rem 0 0;
    font-size: 1.15rem
}

.sonderseite-marke {
    display: inline-block;
    margin: .2rem .2rem 0 0;
    padding: .15rem .65rem;
    border-radius: 2rem;
    background: color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 14%, transparent);
    font-size: .88rem;
    font-weight: 600
}

.sonderseite-fusszeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.4rem;
    margin-top: 1.8rem;
    padding-top: 1.1rem;
    border-top: 1px solid color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 14%, transparent)
}

.sonderseite-fusszeile form {
    margin: 0 0 0 auto
}

.sonderseite-fusszeile button.sonderseite-textknopf {
    padding: 0;
    border: 0;
    background: none;
    color: var(--cms-farbe-primaer, #145da0);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    box-shadow: none
}

/* Überschriften im Fließtext (Baustein Text): dieselben Größen wie die Überschrift-Bausteine */
.m-text h1 {
    font-size: clamp(2rem, 5vw, 3.2rem)
}
.m-text h2 {
    font-size: 2.2rem
}
.m-text h1 { font-size: clamp(2.5rem, 6.4vw, 4.4rem); line-height: 1.08; letter-spacing: -.03em }
.m-text h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.12 }
.m-text h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.18 }
.m-text h4 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.24; font-weight: 700 }
.m-text h5 { font-size: 1.05rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em }
.m-text h1, .m-text h2, .m-text h3, .m-text h4, .m-text h5 {
    margin: 1.4em 0 .5em;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto
}
.m-text > :first-child {
    margin-top: 0
}

/* Hinweis an der Stelle eines Inhalts, der bestimmten Gruppen vorbehalten ist */
.m-gesperrt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 1.1rem;
    padding: 1.3rem 1.5rem;
    border: 1px solid var(--ton-rand);
    border-radius: .9rem;
    background: var(--ton-box);
    color: var(--ton-text);
    box-shadow: var(--ton-schatten);
    -webkit-backdrop-filter: var(--ton-glas);
    backdrop-filter: var(--ton-glas)
}

.m-gesperrt-symbol {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent);
    font-size: 1.25rem
}

.m-gesperrt-text strong {
    display: block;
    font-size: 1.15rem;
    line-height: 1.3
}

.m-gesperrt-text p {
    margin: .35rem 0 0
}

.m-con.m-gesperrt .m-gesperrt-knopf a.button {
    display: inline-block;
    margin-top: .5rem;
    padding: .6rem 1.2rem;
    border-radius: .6rem;
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent);
    font-weight: 600;
    text-decoration: none
}

/* ---------- Profilseite im Rahmen der Website ---------- */
.m-profil h1 {
    margin: 0 0 .6rem;
    font-size: clamp(2.05rem, 4.6vw, 3.1rem);
    line-height: 1.12
}

.m-profil-konto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
    margin: 0 0 1.5rem
}

.m-profil-konto > i {
    color: var(--ton-akzent)
}

.m-profil-gruppen {
    flex-basis: 100%
}

.m-profil-marke {
    display: inline-block;
    justify-self: start;
    margin: .15rem .15rem 0 0;
    padding: .15rem .7rem;
    border-radius: 2rem;
    background: var(--ton-sanft);
    font-size: .9rem;
    font-weight: 600
}

.m-profil-meldung {
    margin: 0 0 1.2rem;
    padding: .8rem 1.1rem;
    border-radius: .7rem;
    background: #e6f4ea;
    color: #1d5a2e;
    font-weight: 600
}

.m-profil-meldung.fehler {
    background: #fbe9e7;
    color: #8c1d18
}

.m-profil-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 1.2rem;
    align-items: start
}

.m-profil-karte {
    display: grid;
    gap: .9rem;
    padding: 1.4rem 1.5rem 1.5rem;
    border: 1px solid var(--ton-rand);
    border-radius: .9rem;
    background: var(--ton-box);
    color: var(--ton-text);
    box-shadow: var(--ton-schatten)
}

.m-profil-karte h2 {
    margin: 0;
    font-size: 1.3rem
}

.m-profil-karte label {
    display: grid;
    gap: .3rem;
    font-weight: 600
}

.m-profil-karte input:not([type=checkbox]):not([type=radio]) {
    width: 100%;
    box-sizing: border-box;
    padding: .7rem .85rem;
    border: 1px solid var(--ton-rand);
    border-radius: .6rem;
    background: #fff;
    color: #172435;
    font: inherit
}

.m-profil-karte input:not([type=checkbox]):not([type=radio]):focus {
    outline: 3px solid color-mix(in srgb, var(--ton-akzent) 45%, transparent);
    outline-offset: 1px;
    border-color: var(--ton-akzent)
}

.m-profil-karte button {
    justify-self: start;
    margin-top: .2rem;
    padding: .7rem 1.3rem;
    border: 0;
    border-radius: .6rem;
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent);
    font: inherit;
    font-weight: 600;
    cursor: pointer
}

.m-profil-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem 1.2rem;
    margin-top: 1.6rem
}

.m-profil-fuss form {
    margin: 0 0 0 auto
}

.m-con.m-profil .m-profil-fuss a.button {
    display: inline-block;
    padding: .65rem 1.2rem;
    border-radius: .6rem;
    background: transparent;
    color: var(--ton-akzent);
    font-weight: 600;
    text-decoration: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ton-akzent) 60%, transparent)
}

.m-profil-fuss button.m-profil-abmelden {
    padding: .65rem 1.2rem;
    border: 0;
    border-radius: .6rem;
    background: var(--ton-sanft);
    color: var(--ton-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none
}

/* ---------- Anmelden und Registrieren im Rahmen der Website ---------- */
.m-konto {
    max-width: 520px;
    margin: 1rem auto 0;
    padding: 2rem clamp(1.3rem, 4vw, 2.2rem) 2.1rem;
    border: 1px solid var(--ton-rand);
    border-radius: 1rem;
    background: var(--ton-box);
    color: var(--ton-text);
    box-shadow: var(--ton-schatten)
}

.m-konto-registrieren {
    max-width: 640px
}

.m-konto .sonderseite-kicker {
    margin: 0 0 .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ton-akzent)
}

.m-konto h1 {
    margin: 0 0 .8rem;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.12
}

.m-konto .sonderseite-formular {
    display: grid;
    gap: .9rem;
    margin: 1.2rem 0 0
}

.m-konto .sonderseite-formular label {
    display: grid;
    gap: .3rem;
    font-weight: 600
}

.m-konto .sonderseite-formular input,
.m-konto .sonderseite-formular textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .7rem .85rem;
    border: 1px solid var(--ton-rand);
    border-radius: .6rem;
    background: #fff;
    color: #172435;
    font: inherit
}

.m-konto .sonderseite-formular input:focus,
.m-konto .sonderseite-formular textarea:focus {
    outline: 3px solid color-mix(in srgb, var(--ton-akzent) 45%, transparent);
    outline-offset: 1px;
    border-color: var(--ton-akzent)
}

.m-konto .sonderseite-formular button {
    margin-top: .3rem;
    padding: .8rem 1.3rem;
    border: 0;
    border-radius: .6rem;
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent);
    font: inherit;
    font-weight: 600;
    cursor: pointer
}

.m-konto .sonderseite-neben {
    margin: 1rem 0 0;
    text-align: center
}

/* ---------- Baustein „Suche“ und Kalender-Abo ---------- */
.m-suche-feld {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .2rem 1.1rem;
    border: 2px solid var(--ton-rand);
    border-radius: 2rem;
    background: var(--ton-box);
    color: var(--ton-text);
    transition: border-color .15s
}

.m-suche-feld:focus-within {
    border-color: var(--ton-akzent)
}

.m-suche-feld i {
    color: var(--ton-akzent)
}

.m-suche-feld input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .75rem 0;
    border: 0;
    outline: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1.1rem
}

.m-suche-stand {
    margin: .9rem 0 0;
    font-size: .9rem;
    color: color-mix(in srgb, var(--ton-text) 70%, transparent)
}

.m-suche-liste {
    display: grid;
    gap: .5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none
}

.m-suche-liste:empty {
    display: none
}

.m-con.m-suche .m-suche-liste a {
    display: block;
    padding: .75rem 1.1rem;
    border: 1px solid var(--ton-rand);
    border-radius: .7rem;
    background: var(--ton-box);
    color: var(--ton-text);
    text-decoration: none;
    transition: border-color .15s, transform .15s
}

.m-con.m-suche .m-suche-liste a:hover {
    border-color: var(--ton-akzent);
    transform: translateX(3px)
}

.m-suche-liste strong {
    display: block
}

.m-suche-auszug {
    display: block;
    margin-top: .15rem;
    font-size: .93rem
}

.m-suche-liste small {
    display: block;
    margin-top: .15rem;
    color: var(--ton-akzent);
    font-size: .8rem
}

.cms-event-abo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.2rem;
    margin: 1.2rem 0 0
}

.cms-event-abo a.button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border-radius: .6rem;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    color: var(--ton-akzent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ton-akzent) 60%, transparent)
}

/* Profil: Zwei-Faktor-Anmeldung */
.m-profil-karte h2 i {
    color: var(--ton-akzent)
}

.m-profil-karte p {
    margin: 0
}

.m-profil-marke.m-profil-an {
    background: #e6f4ea;
    color: #1d5a2e
}

.m-profil-unterformular {
    display: grid;
    gap: .9rem;
    margin-top: .9rem
}

.m-profil-2fa summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ton-akzent)
}

.m-profil-schritte {
    display: grid;
    gap: .6rem;
    margin: 0;
    padding-left: 1.3rem
}

.m-profil-schluessel {
    display: inline-block;
    margin: .3rem 0;
    padding: .35rem .7rem;
    border-radius: .5rem;
    background: var(--ton-sanft);
    font-size: 1.05rem;
    letter-spacing: .06em;
    overflow-wrap: anywhere
}

.m-profil-codes {
    padding: .9rem 1.1rem;
    border-radius: .7rem;
    background: var(--ton-sanft)
}

.m-profil-codes pre {
    margin: .6rem 0 0;
    font-size: 1.05rem;
    letter-spacing: .08em;
    columns: 2
}

.m-profil-karte button.m-profil-textknopf {
    padding: 0;
    background: none;
    color: var(--ton-akzent);
    text-decoration: underline;
    box-shadow: none
}

/* Profil: Bereiche als Reiter; der Inhalt eines Reiters nutzt die ganze Breite */
.m-profil-tabs {
    margin: 0
}

/* ---------- Kalender abonnieren: Knopf rechts oben im Kalender-Baustein und Auswahl-Dialog ---------- */
.cms-event-kopf {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 .7rem
}

.cms-events-flyer .cms-event-kopf {
    padding: 0 var(--cms-flyer-rand, 1.5rem)
}

.cms-events button.cms-abo-knopf {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .95rem;
    border: 0;
    border-radius: 2rem;
    background: var(--ton-sanft);
    color: var(--ton-text);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transition: background .2s
}

.cms-events button.cms-abo-knopf:hover {
    background: color-mix(in srgb, var(--ton-akzent) 24%, var(--ton-sanft));
    filter: none;
    transform: none
}

.cms-events button.cms-abo-knopf i {
    color: var(--ton-akzent)
}

.cms-abo-dialog {
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 1.8rem clamp(1.2rem, 4vw, 2rem);
    border: 0;
    border-radius: 1rem;
    background: var(--cms-farbe-hell, #fff);
    color: var(--cms-farbe-dunkel, #172435);
    box-shadow: 0 30px 80px #0006;
    --ton-text: var(--cms-farbe-dunkel, #172435);
    --ton-akzent: var(--cms-farbe-primaer, #145da0)
}

.cms-abo-dialog::backdrop {
    background: #0b1016b3
}

.cms-abo-dialog h2 {
    margin: 0 2.5rem .5rem 0;
    font-size: 1.5rem
}

.cms-abo-dialog p {
    margin: 0 0 1rem
}

.cms-abo-dialog button.cms-abo-zu {
    position: absolute;
    top: .8rem;
    right: .8rem;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 8%, transparent);
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: none
}

.cms-abo-wahl {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.2rem;
    padding: 0;
    border: 0
}

.cms-abo-wahl legend {
    padding: 0;
    font-weight: 700
}

.cms-abo-wahl .cms-abo-hinweis {
    flex-basis: 100%;
    margin: 0 0 .2rem
}

.cms-abo-kategorie {
    position: relative;
    cursor: pointer
}

.cms-abo-kategorie input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

.cms-abo-kategorie .cms-event-kategorie {
    padding: .45rem .9rem;
    border: 2px solid color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 18%, transparent);
    border-radius: 2rem;
    font-weight: 600;
    transition: background .15s, border-color .15s
}

.cms-abo-kategorie input:checked + .cms-event-kategorie {
    border-color: var(--cms-farbe-primaer, #145da0);
    background: color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 14%, transparent)
}

.cms-abo-kategorie input:focus-visible + .cms-event-kategorie {
    outline: 3px solid color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 50%, transparent);
    outline-offset: 2px
}

/* Kalender-Abo: alle Termine der gewählten Kategorien oder nur die gemeinsamen */
.cms-abo-art {
    display: grid;
    gap: .5rem;
    margin: 0 0 1.2rem;
    padding: 0;
    border: 0
}

.cms-abo-art[hidden] {
    display: none
}

.cms-abo-art legend {
    padding: 0;
    margin: 0 0 .4rem;
    font-weight: 700
}

.cms-abo-artwahl {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .65rem .8rem;
    border: 2px solid color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 18%, transparent);
    border-radius: .7rem;
    cursor: pointer;
    transition: background .15s, border-color .15s
}

.cms-abo-artwahl:has(input:checked) {
    border-color: var(--cms-farbe-primaer, #145da0);
    background: color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 10%, transparent)
}

.cms-abo-artwahl input {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin: .15rem 0 0;
    accent-color: var(--cms-farbe-primaer, #145da0)
}

.cms-abo-artwahl span {
    display: grid;
    gap: .1rem;
    min-width: 0
}

.cms-abo-artwahl small {
    font-size: .88rem;
    line-height: 1.35;
    opacity: .8
}

.cms-abo-wege {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0 0 1.2rem
}

.cms-abo-dialog .cms-abo-wege a.button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.1rem;
    border-radius: .6rem;
    background: var(--cms-farbe-primaer, #145da0);
    color: var(--ton-auf-akzent, #fff);
    font-weight: 600;
    text-decoration: none
}

.cms-abo-dialog .cms-abo-wege a.button-sekundaer {
    background: transparent;
    color: var(--cms-farbe-primaer, #145da0);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 60%, transparent)
}

.cms-abo-adresse {
    display: grid;
    gap: .35rem;
    font-weight: 600
}

.cms-abo-adresse span {
    display: flex;
    gap: .4rem
}

.cms-abo-adresse input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .6rem .7rem;
    border: 1px solid color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 25%, transparent);
    border-radius: .5rem;
    background: #fff;
    color: #172435;
    font: inherit;
    font-size: .9rem
}

.cms-abo-dialog button.cms-abo-kopieren {
    padding: .6rem 1rem;
    border: 0;
    border-radius: .5rem;
    background: var(--cms-farbe-dunkel, #172435);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none
}

.cms-abo-hinweis {
    font-size: .88rem;
    color: color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 72%, transparent)
}

.cms-abo-adresse + .cms-abo-hinweis {
    margin: .8rem 0 0
}

/* Abo-Knopf dezent: nur ein Symbol, erst beim Überfahren hinterlegt */
.cms-event-kopf {
    margin: 0 0 .2rem
}

.cms-events button.cms-abo-knopf {
    width: 2.3rem;
    height: 2.3rem;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: color-mix(in srgb, var(--ton-text) 55%, transparent);
    font-size: 1.05rem
}

.cms-events button.cms-abo-knopf i {
    color: inherit
}

.cms-events button.cms-abo-knopf:hover,
.cms-events button.cms-abo-knopf:focus-visible {
    background: var(--ton-sanft);
    color: var(--ton-akzent)
}

/* Terminliste: Filter und Abo-Knopf in einer Zeile; nach einer Überschrift rückt der Kalender dichter heran */
.cms-event-leiste {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    margin: 0 0 .8rem
}

.cms-event-leiste > .cms-scroll-leiste,
.cms-event-leiste > .cms-event-filters {
    flex: 1 1 auto;
    min-width: 0
}

.cms-event-leiste > .cms-abo-knopf {
    flex: 0 0 auto
}

.cms-event-leiste + .cms-event-list {
    margin-top: 0
}

.cms-abo-text {
    display: none
}

.m-hl1 + .cms-events,
.m-hl2 + .cms-events,
.m-hl3 + .cms-events,
.m-hl4 + .cms-events,
.m-hl5 + .cms-events {
    margin-top: .6rem
}

/* ---------- Schließen-Knopf: in allen Popups wie im Termin-Popup (großes, feines Kreuz ohne Hintergrund) ---------- */
.m-popup-dialog .m-popup-schliessen,
.cms-abo-dialog button.cms-abo-zu,
.cms-galerie-dialog .cms-galerie-close,
.cms-flyer-lightbox-close {
    display: block;
    width: 4.5rem;
    height: 3.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 50px;
    font-weight: 100;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    filter: none;
    outline: none
}

.m-popup-dialog .m-popup-schliessen:hover,
.cms-abo-dialog button.cms-abo-zu:hover,
.cms-galerie-dialog .cms-galerie-close:hover,
.cms-flyer-lightbox-close:hover {
    background: none;
    filter: none;
    transform: none
}

.m-popup-dialog .m-popup-schliessen:focus,
.m-popup-dialog .m-popup-schliessen:focus-visible,
.cms-abo-dialog button.cms-abo-zu:focus,
.cms-abo-dialog button.cms-abo-zu:focus-visible,
.cms-galerie-dialog .cms-galerie-close:focus,
.cms-galerie-dialog .cms-galerie-close:focus-visible,
.cms-flyer-lightbox-close:focus,
.cms-flyer-lightbox-close:focus-visible {
    outline: none !important;
    box-shadow: none
}

/* Helle Popups: dunkles Kreuz, oben rechts in der Ecke */
.m-popup-dialog .m-popup-schliessen {
    margin: -1.1rem -1.1rem 0 .5rem;
    color: inherit
}

.cms-abo-dialog button.cms-abo-zu {
    top: .2rem;
    right: .2rem;
    color: inherit
}

/* Dunkle Vollbild-Ansichten (Galerie, Flyer): dasselbe Kreuz in Weiß */
.cms-galerie-dialog .cms-galerie-close,
.cms-flyer-lightbox-close {
    color: #fff;
    text-shadow: 0 1px 6px #000a
}

/* ---------- Entspanntes Einblenden beim Scrollen (einblenden.js) ---------- */
.ein-vor {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform
}

.ein-vor.ein-da {
    opacity: 1;
    transform: none
}

/* ---------- Tabmenü: Einblenden beim Laden; der Wechsel steht am Ende der Datei (www/tabs.js) ---------- */
.m-tab-panel.aktiv {
    animation: m-tab-ein .5s cubic-bezier(.2, .7, .2, 1) both
}

@keyframes m-tab-ein {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media (prefers-reduced-motion: reduce) {
    .ein-vor {
        opacity: 1;
        transform: none;
        transition: none
    }

    .m-tab-panel.aktiv,
    .m-tab-panel.geht {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none
    }
}

/* ---------- „Nach oben“-Knopf: schwebt unten rechts, erscheint ab der eingestellten Scrollweite ---------- */
button.nach-oben {
    position: fixed;
    right: clamp(.9rem, 2.5vw, 1.8rem);
    bottom: clamp(.9rem, 2.5vw, 1.8rem);
    z-index: 900;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cms-farbe-primaer, #145da0);
    color: var(--ton-auf-akzent, #fff);
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 8px 24px #0000002e;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s
}

button.nach-oben.sichtbar {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .35s ease, transform .35s ease
}

button.nach-oben:hover {
    transform: translateY(-3px);
    filter: none
}

button.nach-oben[hidden] {
    display: none
}

@media print {
    button.nach-oben {
        display: none
    }
}

/* ---------- Baustein „iFrame“: Hinweis vor dem Laden, danach der fremde Inhalt ---------- */
.m-iframe-hinweis {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 1.1rem;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--ton-rand);
    border-radius: .9rem;
    background: var(--ton-box);
    color: var(--ton-text);
    box-shadow: var(--ton-schatten)
}

.m-iframe-symbol {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--ton-sanft);
    color: var(--ton-akzent);
    font-size: 1.15rem
}

.m-iframe-text strong {
    display: block;
    font-size: 1.15rem
}

.m-iframe-text p {
    margin: .4rem 0 0
}

.m-iframe-knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem
}

.m-iframe-knoepfe button.m-iframe-laden,
.m-con.m-iframe .m-iframe-knoepfe a.button {
    display: inline-flex;
    align-items: center;
    margin: .5rem 0 0;
    padding: .65rem 1.15rem;
    border: 0;
    border-radius: .6rem;
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer
}

.m-con.m-iframe .m-iframe-knoepfe a.button-sekundaer {
    background: transparent;
    color: var(--ton-akzent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ton-akzent) 60%, transparent)
}

.m-iframe-geladen iframe {
    display: block;
    width: 100%;
    border: 0;
    border-radius: .9rem;
    background: var(--ton-sanft)
}

/* ---------- Cookie-Banner: gleitet von unten herein und bleibt bis zur Entscheidung ---------- */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    padding: 0 clamp(.6rem, 2vw, 1.4rem) clamp(.6rem, 2vw, 1.2rem);
    transform: translateY(110%);
    transition: transform .65s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none
}

.cookie-banner[hidden] {
    display: none
}

.cookie-banner.offen {
    transform: none
}

.cookie-banner-innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.6rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.2rem 1.4rem;
    border-radius: 1rem;
    background: var(--cms-farbe-hell, #fff);
    color: var(--cms-farbe-dunkel, #172435);
    box-shadow: 0 12px 50px #0000004d, 0 0 0 1px #0000000f;
    pointer-events: auto
}

.cookie-text {
    flex: 1 1 22rem;
    min-width: 0
}

.cookie-text strong {
    display: block;
    font-size: 1.1rem
}

.cookie-text p {
    margin: .3rem 0 0;
    font-size: .95rem
}

.cookie-knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem
}

.cookie-knoepfe button,
.cookie-banner .cookie-knoepfe a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: .7rem 1.25rem;
    border: 0;
    border-radius: .6rem;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none
}

.cookie-knoepfe button.cookie-ja {
    background: var(--cms-farbe-primaer, #145da0);
    color: #fff
}

body.ist-dunkel-primaer .cookie-knoepfe button.cookie-ja {
    color: #fff
}

.cookie-knoepfe button.cookie-nein {
    background: var(--cms-farbe-dunkel, #172435);
    color: #fff
}

.cookie-banner .cookie-knoepfe a.button-sekundaer {
    background: transparent;
    color: var(--cms-farbe-dunkel, #172435);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 35%, transparent)
}

/* Solange der Banner offen ist, bekommt der Footer unten so viel Platz, dass der Banner nichts verdeckt. */
body.cookie-banner-offen .seitenfuss {
    padding-bottom: calc(2rem + var(--cookie-hoehe, 9rem));
    transition: padding-bottom .5s ease
}

body.cookie-banner-offen button.nach-oben {
    bottom: calc(var(--cookie-hoehe, 9rem) + .6rem)
}

@media (max-width: 700px) {
    .cookie-knoepfe {
        width: 100%
    }

    .cookie-knoepfe button,
    .cookie-banner .cookie-knoepfe a.button {
        flex: 1 1 auto
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner {
        transition: none
    }
}

/* ---------- Monatskalender: sieben gleich breite Spalten, Navigation darüber, Farben aus dem Ton-System ---------- */
.cms-events-monat {
    container: cms-monat / inline-size
}

.cms-monat-nav {
    display: grid;
    /* Die Seitenspalten sind mindestens so breit wie ihr Inhalt: „Heute“ schiebt den Monat, statt ihn zu überdecken. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .7rem
}

.cms-monat-nav-links {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-self: start
}

.cms-monat-nav > .cms-monat-weiter {
    justify-self: end
}

.cms-monat-nav .cms-monat-titel {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
    text-align: center;
    color: var(--ton-text)
}

.cms-events button.cms-monat-knopf,
.cms-events button.cms-monat-heute {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ton-sanft);
    color: var(--ton-text);
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: none;
    filter: none;
    transform: none;
    transition: background .2s, color .2s
}

.cms-events button.cms-monat-heute {
    width: auto;
    padding: 0 1.1rem;
    border-radius: 2rem;
    font-weight: 600
}

.cms-events button.cms-monat-knopf:hover,
.cms-events button.cms-monat-heute:hover {
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent);
    filter: none;
    transform: none
}

.cms-events button.cms-monat-knopf:disabled {
    opacity: .35;
    cursor: default;
    background: var(--ton-sanft);
    color: var(--ton-text)
}

.cms-monat[hidden],
.cms-monat-termin[hidden],
.cms-monat-mehr[hidden],
.cms-monat-heute[hidden],
.cms-monat-liste > li[hidden] {
    display: none !important
}

/* Das Raster darf breiter sein als der Inhalt: Steht der Kalender direkt im Seiteninhalt, ragt es mittig zu beiden
   Seiten hinaus (höchstens --cms-monat-breite). Die Zeile mit Filtern und Abo-Knopf ist genauso breit; die Navigation
   bleibt in der Inhaltsbreite. In Spalten, Tabs, Popups und neben der Menü-Spalte bleibt es bei der Breite des Bausteins. */
.seiteninhalt > .cms-events-monat .cms-monat,
.seiteninhalt > .cms-events-monat > .cms-event-leiste {
    width: min(var(--cms-monat-breite, 1400px), 100vw - 3rem);
    margin-left: calc(50% - min(var(--cms-monat-breite, 1400px), 100vw - 3rem) / 2)
}

.seite-inhaltsspalte .seiteninhalt > .cms-events-monat .cms-monat,
.seite-inhaltsspalte .seiteninhalt > .cms-events-monat > .cms-event-leiste {
    width: auto;
    margin-left: 0
}

.cms-monat-raster {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: .3rem;
    margin: 0 -.3rem;
    width: calc(100% + .6rem);
    animation: cms-event-in .3s ease both
}

.cms-monat-raster th {
    padding: .2rem 0 .35rem;
    border: 0;
    background: none;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    color: color-mix(in srgb, var(--ton-text) 60%, transparent)
}

.cms-monat-raster th abbr {
    text-decoration: none;
    cursor: default
}

.cms-monat-raster td {
    height: 7.4rem;
    padding: .4rem;
    vertical-align: top;
    overflow: hidden;
    border: 1px solid var(--ton-rand);
    border-radius: .7rem;
    background: var(--ton-box);
    color: var(--ton-text);
    -webkit-backdrop-filter: var(--ton-glas);
    backdrop-filter: var(--ton-glas)
}

.cms-monat-raster td.wochenende {
    background: color-mix(in srgb, var(--ton-akzent) 6%, var(--ton-box))
}

.cms-monat-raster td.cms-monat-leer-feld {
    border-color: transparent;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

.cms-monat-raster td.vorbei .cms-monat-nr {
    opacity: .4
}

.cms-monat-nr {
    display: inline-grid;
    place-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    margin: 0 0 .25rem;
    border-radius: 50%;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1
}

.cms-monat-raster td.heute {
    border-color: var(--ton-akzent)
}

.cms-monat-raster td.heute .cms-monat-nr {
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent)
}

.cms-monat-termine {
    display: grid;
    gap: .2rem
}

.cms-events button.cms-monat-termin {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: .22rem .4rem .22rem .5rem;
    border: 0;
    border-left: .22rem solid var(--cms-event-kategorie, var(--ton-akzent));
    border-radius: .3rem;
    background: var(--ton-sanft);
    color: var(--ton-text);
    font: inherit;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    filter: none;
    transform: none;
    transition: background .2s
}

.cms-events button.cms-monat-termin:hover,
.cms-events button.cms-monat-termin:focus-visible {
    background: color-mix(in srgb, var(--cms-event-kategorie, var(--ton-akzent)) 22%, var(--ton-sanft));
    color: var(--ton-text);
    filter: none;
    transform: none
}

.cms-monat-zeit {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums
}

.cms-monat-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.cms-monat-raster td:not(.offen) .cms-monat-termin.cms-monat-ueber {
    display: none
}

.cms-events button.cms-monat-mehr {
    margin: .2rem 0 0;
    padding: .1rem .3rem;
    border: 0;
    background: none;
    color: var(--ton-akzent);
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    filter: none;
    transform: none
}

.cms-events button.cms-monat-mehr:hover {
    background: none;
    color: var(--ton-text);
    text-decoration: underline;
    filter: none;
    transform: none
}

/* Liste unter dem Raster: nur in der schmalen Ansicht */
.cms-monat-liste {
    display: none;
    margin: .9rem 0 0;
    padding: 0;
    list-style: none
}

.cms-monat-liste > li {
    display: grid;
    grid-template-columns: 2.9rem minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    padding: .6rem 0;
    border-top: 1px solid var(--ton-rand)
}

.cms-monat-liste-datum {
    display: grid;
    justify-items: center;
    gap: .1rem;
    padding: .35rem 0;
    border-radius: .6rem;
    background: var(--ton-sanft);
    color: var(--ton-text);
    line-height: 1
}

.cms-monat-liste > li.heute .cms-monat-liste-datum {
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent)
}

.cms-monat-liste-datum b {
    font-size: 1.15rem
}

.cms-monat-liste-datum small {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase
}

.cms-monat-liste button.cms-monat-termin {
    padding: .5rem .6rem .5rem .7rem;
    font-size: .95rem
}

.cms-monat-liste .cms-monat-name {
    white-space: normal
}

.cms-monat .cms-monat-leer {
    margin: .9rem 0 0
}

/* Schmal (Handy, Spalten): Im Raster stehen nur noch Punkte, die Termine selbst in der Liste darunter. */
@container cms-monat (max-width: 700px) {
    .cms-monat-nav,
    .cms-monat-nav-links {
        gap: .35rem
    }

    .cms-monat-nav .cms-monat-titel {
        min-width: 0;
        font-size: 1.1rem;
        line-height: 1.15
    }

    .cms-events button.cms-monat-knopf,
    .cms-events button.cms-monat-heute {
        width: 2.2rem;
        height: 2.2rem
    }

    .cms-events button.cms-monat-heute {
        width: auto;
        padding: 0 .65rem;
        font-size: .85rem
    }

    .cms-monat-raster {
        border-spacing: .2rem;
        margin: 0 -.2rem;
        width: calc(100% + .4rem)
    }

    .cms-monat-raster th {
        font-size: .7rem;
        letter-spacing: .03em
    }

    .cms-monat-raster td {
        height: 3.3rem;
        padding: .25rem .1rem;
        border-radius: .5rem;
        text-align: center
    }

    .cms-monat-raster td.hat-termine {
        cursor: pointer
    }

    .cms-monat-raster td.gewaehlt {
        border-color: var(--ton-akzent);
        background: color-mix(in srgb, var(--ton-akzent) 18%, var(--ton-box))
    }

    .cms-monat-nr {
        min-width: 1.5rem;
        height: 1.5rem;
        margin: 0;
        font-size: .85rem
    }

    .cms-monat-raster .cms-monat-termine {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .16rem;
        /* Jeder Termin bekommt einen Punkt; zu viele für eine Zeile brechen um. */
        max-width: 2.6rem;
        margin: .2rem auto 0
    }

    .cms-monat-raster button.cms-monat-termin {
        flex: 0 0 .42rem;
        width: .42rem;
        height: .42rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--cms-event-kategorie, var(--ton-akzent));
        font-size: 0;
        pointer-events: none
    }

    .cms-monat-raster td:not(.offen) .cms-monat-termin.cms-monat-ueber {
        display: flex
    }

    .cms-monat-raster .cms-monat-termin > span,
    .cms-monat-raster button.cms-monat-mehr {
        display: none !important
    }

    .cms-monat-liste {
        display: block
    }
}

@media (prefers-reduced-motion: reduce) {
    .cms-monat-raster {
        animation: none
    }
}

/* ---------- Alle Popups (dialog): beim Öffnen einblenden und wachsen, beim Schließen ausblenden und schrumpfen ----------
   `scale` statt `transform`, damit Popups, die sich per transform mittig setzen, an ihrem Platz bleiben.
   Die Klasse `cms-schliesst` setzt www/akkordeon.js, bevor der Dialog wirklich geschlossen wird. */
dialog[open] {
    animation: cms-popup-ein .3s cubic-bezier(.2, .8, .2, 1) both
}

dialog[open]::backdrop {
    animation: cms-popup-grund-ein .3s ease both
}

dialog.cms-schliesst[open] {
    animation: cms-popup-aus .2s ease-in both;
    pointer-events: none
}

dialog.cms-schliesst[open]::backdrop {
    animation: cms-popup-grund-aus .2s ease-in both
}

/* Das Termin-Popup setzte sich früher per transform in die Mitte; dann wächst es scheinbar aus der Ecke.
   Hier steht es wie die anderen über inset und margin mittig, sodass es aus seiner eigenen Mitte wächst. */
.cms-event-dialog,
.cms-event-dialog[open] {
    inset: 0;
    margin: auto;
    height: fit-content;
    transform: none;
    transform-origin: center;
    transition: none
}

@keyframes cms-popup-ein {
    from { opacity: 0; scale: .88 }
    to { opacity: 1; scale: 1 }
}

@keyframes cms-popup-aus {
    from { opacity: 1; scale: 1 }
    to { opacity: 0; scale: .88 }
}

@keyframes cms-popup-grund-ein {
    from { opacity: 0 }
    to { opacity: 1 }
}

@keyframes cms-popup-grund-aus {
    from { opacity: 1 }
    to { opacity: 0 }
}

@media (prefers-reduced-motion: reduce) {
    dialog[open],
    dialog[open]::backdrop,
    dialog.cms-schliesst[open],
    dialog.cms-schliesst[open]::backdrop {
        animation: none
    }
}

/* Terminliste: „Mehr anzeigen“ unter der Liste */
.cms-event-mehr {
    margin: 1.2rem 0 0;
    text-align: center
}

.cms-event-mehr[hidden] {
    display: none
}

/* „Mehr anzeigen“ der Terminliste: gemeinsame Gestaltung .cms-mehr am Ende der Datei */

/* ---------- Blog-Karten: je Beitrag eine Karte über die ganze Breite, das Bild ungeschnitten links ---------- */
.m-blog-karten {
    grid-template-columns: minmax(0, 1fr)
}

.m-blog-karte {
    flex-direction: row;
    align-items: stretch
}

.m-blog-karte:hover {
    transform: none
}

.m-blog-bild {
    flex: 0 0 min(38%, 380px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    aspect-ratio: auto;
    overflow: visible;
    background: var(--ton-sanft)
}

.m-blog-bild img {
    width: 100%;
    height: auto;
    max-height: 26rem;
    object-fit: contain;
    transition: opacity .2s
}

.m-blog-bild:hover img {
    opacity: .85
}

.m-blog-text {
    min-width: 0;
    padding: 1.4rem 1.6rem 1.5rem
}

/* Der Inhalt des Beitrags bis zu einer festen Höhe; was darüber hinausgeht, blendet nach unten aus.
   Die Maske macht den Inhalt selbst durchsichtig, deshalb passt der Übergang zu jeder Kartenfarbe. */
.m-blog-anriss {
    max-height: var(--cms-blog-hoehe, 15rem);
    margin: 0;
    overflow: hidden
}

.m-blog-gekuerzt .m-blog-anriss {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 6rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 6rem), transparent)
}

.m-blog-anriss > :first-child {
    margin-top: 0
}

.m-blog-anriss > :last-child {
    margin-bottom: 0
}

.m-blog-anriss .m-text {
    max-width: none
}

/* Bereiche über die volle Bildschirmbreite bleiben in der Karte in ihrem Rahmen. */
.seiteninhalt .m-blog-anriss .m-hintergrund,
.m-blog-anriss .m-hintergrund {
    width: auto;
    margin-left: 0;
    padding: 1.2rem;
    border-radius: .8rem
}

.m-blog a.button.m-blog-mehr-knopf {
    display: none;
    width: 100%;
    box-sizing: border-box;
    margin: .6rem 0 0;
    justify-content: center;
    text-align: center
}

.m-blog .m-blog-gekuerzt a.button.m-blog-mehr-knopf {
    display: flex
}

/* Beitragsseite /blog/…: Kategorien, Datum und Titel über dem Inhalt */
.m-blog-seitenkopf .m-slogan {
    margin-bottom: .4rem
}

.m-blog-seitenkopf h1 {
    margin-top: 0
}

@media (max-width: 700px) {
    .m-blog-karte {
        flex-direction: column
    }

    .m-blog-bild {
        flex: 0 0 auto;
        width: 100%
    }

    .m-blog-bild img {
        max-height: 60vh
    }

    .m-blog-text {
        padding: 1.2rem 1.2rem 1.3rem
    }
}

/* Karussell angehalten (Maus darüber, Fokus, Tab im Hintergrund): Der Ladebalken bleibt stehen und läuft danach weiter. */
.m-karussell-pause .m-karussell-punkt.aktiv.laeuft span {
    animation-play-state: paused
}

/* ---------- Wartungsseite: Hinweis für Angemeldete ohne Zugriff, mit Abmelden ---------- */
.sonderseite-angemeldet {
    margin-top: 1.5rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 15%, transparent);
    border-radius: .8rem;
    background: color-mix(in srgb, var(--cms-farbe-primaer, #145da0) 7%, transparent)
}

.sonderseite-angemeldet p {
    margin: 0 0 .9rem
}

.sonderseite-angemeldet .sonderseite-formular {
    margin: 0
}

/* ---------- Baustein „Video“: abgerundet, in der Breite begrenzt, auf Wunsch auch in der Höhe ---------- */
.m-video {
    max-width: var(--video-breite, 900px);
    margin: 1.8rem auto
}

.m-video-links {
    margin-left: 0
}

.m-video-rechts {
    margin-right: 0
}

.m-video video {
    display: block;
    width: 100%;
    height: auto;
    max-height: var(--video-hoehe, none);
    border-radius: 1rem;
    background: #000;
    box-shadow: 0 14px 40px #10203026
}

.m-video figcaption {
    margin-top: .6rem;
    font-size: .9rem;
    line-height: 1.45;
    text-align: center;
    color: color-mix(in srgb, var(--ton-text) 72%, transparent)
}

.m-video-links figcaption {
    text-align: left
}

.m-video-rechts figcaption {
    text-align: right
}

/* ---------- Kontaktkarte: Messenger und Netzwerke als kleine Schaltflächen unter den Kontaktwegen ---------- */
.m-kontaktkarte-netze {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .9rem 0 0;
    padding: 0;
    list-style: none
}

.m-kontaktkarte-netze a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 2rem;
    background: var(--ton-sanft);
    color: var(--ton-text);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background .2s, color .2s
}

.m-kontaktkarte-netze a i {
    font-size: 1.05em;
    color: var(--ton-akzent);
    transition: color .2s
}

.m-kontaktkarte-netze a:hover,
.m-kontaktkarte-netze a:focus-visible {
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent);
    text-decoration: none
}

.m-kontaktkarte-netze a:hover i,
.m-kontaktkarte-netze a:focus-visible i {
    color: inherit
}

/* ---------- Aktueller Menüpunkt: im Hauptmenü und im Menü-Baustein dezent hervorgehoben ----------
   .aktiv = die aufgerufene Seite, .aktiv-pfad = der Punkt, unter dem sie liegt (Haupteintrag eines Unterpunkts).
   Im Hauptmenü nur die Akzentfarbe, ohne Hinterlegung und ohne fettere Schrift. */
.site-navigation .site-menu-zeile > a.aktiv,
.site-navigation .site-menu-zeile > a.aktiv-pfad,
.site-navigation .site-submenu .site-menu-item > a.aktiv {
    color: var(--cms-farbe-primaer, #145da0)
}

/* Als Button-Leiste (schmale Breite) entfallen die Unterpunkte: Dort ist ihr Hauptpunkt leicht getönt. */
@media (max-width: 900px) {
    .m-con.m-sidebar-menu a.aktiv-pfad:not(.button) {
        background: color-mix(in srgb, var(--ton-akzent) 24%, var(--ton-sanft))
    }
}

/* ---------- Barrierefreiheits-Werkzeug: Knopf am Rand, Tafel mit Lesehilfen ----------
   Die Tafel hat bewusst feste, kontrastreiche Farben und hängt nicht am Ton-System: Sie muss in jeder Einstellung
   und auf jedem Hintergrund lesbar bleiben. Die Hilfen selbst sind Klassen bf-… am <html> (www/barrierefrei.js). */
.bf-sprung {
    position: fixed;
    left: 1rem;
    top: -6rem;
    z-index: 10000;
    padding: .8rem 1.2rem;
    border-radius: .6rem;
    background: #111;
    color: #fff;
    font-weight: 700;
    text-decoration: none
}

.bf-sprung:focus {
    top: 1rem;
    outline: 3px solid #ffbf00;
    outline-offset: 2px
}

.bf-werkzeug {
    position: fixed;
    bottom: 1.2rem;
    z-index: 9000;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: normal;
    word-spacing: normal
}

.bf-seite-links {
    left: 1.2rem
}

.bf-seite-rechts {
    right: 1.2rem;
    bottom: 5.2rem
}

.bf-werkzeug button {
    font: inherit;
    letter-spacing: inherit;
    filter: none;
    transform: none
}

.bf-werkzeug button.bf-knopf {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #0b4f8a;
    color: #fff;
    font-size: 1.7rem;
    cursor: pointer;
    box-shadow: 0 6px 20px #0006
}

.bf-werkzeug button.bf-knopf:hover,
.bf-werkzeug button.bf-knopf:focus-visible {
    background: #083b68;
    outline: 3px solid #ffbf00;
    outline-offset: 2px
}

.bf-werkzeug button.bf-knopf.bf-aktiv {
    box-shadow: 0 0 0 4px #ffbf00, 0 6px 20px #0006
}

.bf-tafel {
    position: absolute;
    bottom: 3.9rem;
    width: min(22rem, calc(100vw - 2.4rem));
    max-height: min(34rem, calc(100vh - 7rem));
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    background: #fff;
    color: #14202b;
    box-shadow: 0 18px 60px #00000059;
    overflow: hidden
}

.bf-tafel[hidden] {
    display: none
}

.bf-seite-links .bf-tafel {
    left: 0
}

.bf-seite-rechts .bf-tafel {
    right: 0
}

.bf-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1rem;
    background: #0b4f8a;
    color: #fff;
    font-size: 1.05rem
}

.bf-werkzeug button.bf-zu {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ffffff26;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer
}

.bf-liste {
    display: grid;
    gap: .4rem;
    padding: .7rem;
    overflow-y: auto
}

.bf-zeile,
.bf-werkzeug button.bf-schalter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    width: 100%;
    margin: 0;
    padding: .6rem .75rem;
    border: 2px solid #d5dde5;
    border-radius: .7rem;
    background: #f5f8fa;
    color: #14202b;
    text-align: left;
    box-shadow: none
}

.bf-werkzeug button.bf-schalter {
    cursor: pointer
}

.bf-zeile > span:first-child,
.bf-schalter > span:first-child {
    display: grid;
    min-width: 0
}

.bf-zeile b,
.bf-schalter b {
    font-weight: 700
}

.bf-zeile small,
.bf-schalter small {
    font-size: .8rem;
    color: #46586a
}

.bf-werkzeug button.bf-schalter:hover,
.bf-werkzeug button.bf-schalter:focus-visible {
    border-color: #0b4f8a;
    background: #eaf2f9;
    color: #14202b;
    outline: 0
}

.bf-werkzeug button.bf-schalter[aria-pressed="true"] {
    border-color: #0b4f8a;
    background: #dcecf9
}

.bf-werkzeug button.bf-schalter[hidden] {
    display: none
}

.bf-haken {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #8094a6;
    border-radius: 50%;
    background: #fff
}

.bf-schalter[aria-pressed="true"] .bf-haken {
    border-color: #0b4f8a;
    background: #0b4f8a radial-gradient(circle, #fff 0 32%, transparent 36%)
}

.bf-stufen {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto
}

.bf-stufen output {
    min-width: 3.4rem;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums
}

.bf-werkzeug .bf-stufen button {
    width: 2.6rem;
    height: 2.4rem;
    padding: 0;
    border: 2px solid #0b4f8a;
    border-radius: .5rem;
    background: #fff;
    color: #0b4f8a;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none
}

.bf-werkzeug .bf-stufen button:hover,
.bf-werkzeug .bf-stufen button:focus-visible {
    background: #0b4f8a;
    color: #fff
}

.bf-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .7rem 1rem;
    border-top: 1px solid #d5dde5;
    font-size: .9rem
}

.bf-werkzeug .bf-fuss button {
    padding: .45rem .9rem;
    border: 2px solid #0b4f8a;
    border-radius: 2rem;
    background: #fff;
    color: #0b4f8a;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none
}

.bf-werkzeug .bf-fuss a {
    color: #0b4f8a;
    font-weight: 600;
    text-decoration: underline
}

/* --- Die Hilfen --- */
/* Kontrast und Graustufen als Filter auf der ganzen Seite; am <html> gesetzt bleiben feste Elemente an ihrem Platz. */
html.bf-kontrast {
    filter: contrast(1.45)
}

html.bf-graustufen {
    filter: grayscale(1)
}

html.bf-kontrast.bf-graustufen {
    filter: grayscale(1) contrast(1.45)
}

html.bf-kontrast a:not(.button):not(.bf-sprung),
html.bf-links a:not(.button):not(.bf-sprung) {
    text-decoration: underline !important;
    text-decoration-thickness: .12em !important;
    text-underline-offset: .18em
}

html.bf-links a.button {
    outline: 2px solid currentColor;
    outline-offset: 2px
}

html.bf-lesbar body :not(i):not(.fa-solid):not(.fa-brands):not(.fa-regular) {
    font-family: Arial, Helvetica, Verdana, sans-serif !important
}

html.bf-abstand main :not(i),
html.bf-abstand footer :not(i),
html.bf-abstand .site-header :not(i),
html.bf-abstand dialog :not(i) {
    line-height: 1.9 !important;
    letter-spacing: .06em !important;
    word-spacing: .16em !important
}

html.bf-bewegung *,
html.bf-bewegung *::before,
html.bf-bewegung *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
    scroll-behavior: auto !important
}

html.bf-zeiger,
html.bf-zeiger * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-7 1.2 4 7.4-2.7 1.4-4-7.4L4 20z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important
}

html.bf-fokus :focus-visible {
    outline: 4px solid #ffbf00 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 8px #000 !important
}

.bf-lesehilfe {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 8999;
    width: 100%;
    height: .45rem;
    background: #ffbf00;
    box-shadow: 0 0 0 2px #000;
    pointer-events: none;
    will-change: transform
}

@media print {
    .bf-werkzeug,
    .bf-sprung,
    .bf-lesehilfe {
        display: none
    }
}

/* Kein Fokusrahmen um ganze Bereiche: Der Hauptbereich (Ziel des Sprunglinks) und die Tab-Inhalte sind nur per Skript
   bzw. als Lesebereich fokussierbar. Nach dem Schließen eines Popups legt der Browser den Fokus dorthin zurück, wenn der
   auslösende Knopf ihn nicht hält (Safari), und zeichnete dann einen Rahmen um den ganzen Inhalt. Knöpfe und Links
   behalten ihren Fokusrahmen; mit der Lesehilfe „Fokus hervorheben“ bleibt er auch bei Tab-Inhalten sichtbar. */
main#inhalt:focus,
main#inhalt:focus-visible {
    outline: 0 !important;
    box-shadow: none !important
}

html:not(.bf-fokus) .m-tab-panel:focus,
html:not(.bf-fokus) .m-tab-panel:focus-visible {
    outline: 0
}

/* Wellen an Übergängen (www/wellen.js setzt sie ein, Einstellungen → Farben & Layout). Die Welle liegt am Rand einer
   Fläche hinter deren Inhalt; .cms-welle-platz hält den Inhalt um die Wellenhöhe weiter weg. Die Grafiken stehen links
   und rechts über, damit sie sich beim Scrollen verschieben lassen, ohne dass ein Rand sichtbar wird. */
:root {
    --cms-welle-hoehe: 60px
}

.hat-welle {
    position: relative
}

.hat-welle > :not(.cms-welle) {
    position: relative;
    z-index: 1
}

.cms-welle {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: -1px;
    height: calc(var(--cms-welle-hoehe) + 1px);
    overflow: hidden;
    pointer-events: none
}

.cms-welle-unten {
    top: auto;
    bottom: -1px;
    transform: scaleY(-1)
}

.cms-welle svg {
    transform-origin: 50% 0;
    position: absolute;
    left: -25%;
    top: 0;
    display: block;
    width: 150%;
    height: 100%;
    will-change: transform
}

.cms-welle-platz {
    height: var(--cms-welle-hoehe)
}

/* Vordere Schicht in zweiter Farbe über der Breite der Menü-Spalte (Footer): gleiche Grafik, links beschnitten */
.cms-welle-teil {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    overflow: hidden
}

.cms-welle-teil svg {
    left: calc(var(--cms-welle-breite, 100vw) * -0.25 - var(--cms-welle-links, 0px));
    width: calc(var(--cms-welle-breite, 100vw) * 1.5)
}

@media print {
    .cms-welle,
    .cms-welle-platz {
        display: none
    }
}

/* Kontaktformular über die ganze Inhaltsbreite, mit optionaler Überschrift */
.kontaktformular {
    max-width: none
}

.kontaktformular .kontaktformular-titel {
    margin: 0 0 .25rem;
    color: var(--ton-text)
}

/* Felder nebeneinander: Das Formular ist ein Raster aus sechs Spalten. Ein Feld nimmt die ganze Breite, die Hälfte,
   ein oder zwei Drittel (Einstellung je Feld im Editor). Alles andere (Überschrift, Sicherheitsfrage, Text, Knopf)
   steht über die ganze Breite. Ist das Formular schmaler als 560px, steht wieder jedes Feld allein in seiner Zeile. */
.m-kontaktformular {
    container: kontaktformular / inline-size
}

.kontaktformular {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start
}

.kontaktformular > * {
    grid-column: 1 / -1
}

.kontaktformular > .kontaktfeld-halb {
    grid-column: span 3
}

.kontaktformular > .kontaktfeld-drittel {
    grid-column: span 2
}

.kontaktformular > .kontaktfeld-zweidrittel {
    grid-column: span 4
}

@container kontaktformular (max-width: 560px) {
    .kontaktformular > .kontaktfeld-halb,
    .kontaktformular > .kontaktfeld-drittel,
    .kontaktformular > .kontaktfeld-zweidrittel {
        grid-column: 1 / -1
    }
}

/* Sicherheitsprüfung des Kontaktformulars: Wissensfrage mit Textfeld, unsichtbare Prüfung als dezente Zeile */
.kontaktformular .kontakt-captcha-frage input[type=text] {
    flex: 1 1 12rem;
    width: auto;
    max-width: 22rem
}

.kontaktformular .kontakt-pruefung-unsichtbar {
    margin: 0;
    font-size: .9rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--ton-text) 75%, transparent)
}

.kontaktformular.pruefung-fertig .kontakt-pruefung-unsichtbar i {
    color: var(--ton-akzent)
}

.kontaktformular button[type=submit]:disabled {
    opacity: .55;
    cursor: wait;
    filter: none;
    transform: none
}

/* Fehlerseite „Seite nicht gefunden“ (cms_fehlerseite_html()): große, blasse 404 hinter der Überschrift, Vorschläge
   als Karten, Suchfeld und zwei Wege zurück. Farben aus dem Ton-System. */
.m-fehlerseite {
    display: grid;
    gap: 2rem;
    max-width: 760px;
    margin: clamp(1rem, 4vw, 3rem) auto 0
}

.m-fehlerseite-kopf {
    position: relative;
    isolation: isolate;
    padding-top: clamp(2.5rem, 8vw, 4.5rem)
}

.m-fehlerseite-zahl {
    position: absolute;
    z-index: -1;
    top: 0;
    left: -.05em;
    font-family: var(--cms-schrift-ueberschriften, inherit);
    font-size: clamp(6rem, 22vw, 11rem);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.04em;
    color: color-mix(in srgb, var(--ton-akzent) 13%, transparent);
    user-select: none
}

.m-fehlerseite h1 {
    margin: 0 0 .7rem
}

.m-fehlerseite h2 {
    margin: 0 0 .7rem;
    font-size: 1.15rem
}

.m-fehlerseite-text {
    margin: 0;
    font-size: 1.08rem
}

.m-fehlerseite-text code {
    padding: .1rem .4rem;
    border-radius: .35rem;
    background: var(--ton-sanft);
    font-size: .92em;
    overflow-wrap: anywhere
}

.m-fehlerseite-vorschlaege ul {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none
}

.m-fehlerseite-vorschlaege a {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1.05rem;
    border: 1px solid var(--ton-rand);
    border-radius: .8rem;
    background: var(--ton-box);
    color: var(--ton-text);
    text-decoration: none;
    box-shadow: var(--ton-schatten);
    transition: border-color .15s, transform .15s
}

.m-fehlerseite-vorschlaege a:hover {
    border-color: var(--ton-akzent);
    transform: translateX(3px)
}

.m-fehlerseite-vorschlaege a i {
    color: var(--ton-akzent)
}

.m-fehlerseite-vorschlaege span {
    display: grid;
    min-width: 0
}

.m-fehlerseite-vorschlaege small {
    overflow: hidden;
    color: color-mix(in srgb, var(--ton-text) 60%, transparent);
    text-overflow: ellipsis;
    white-space: nowrap
}

.m-fehlerseite-suche .m-suche {
    margin: 0
}

.m-fehlerseite-vers {
    margin: .7rem 0 0;
    font-style: italic;
    color: color-mix(in srgb, var(--ton-text) 70%, transparent)
}

.m-fehlerseite-vers small {
    font-style: normal;
    margin-left: .3rem
}

.m-fehlerseite-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem
}

.m-fehlerseite-knoepfe .button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer
}

@media (prefers-reduced-motion: reduce) {
    .m-fehlerseite-vorschlaege a {
        transition: none
    }
}

/* Sicherheitsprüfung „Schieberegler“: Bahn mit gestricheltem Zielfeld, runder Knopf zum Ziehen. */
.kontaktformular .kontakt-schieber {
    display: grid;
    gap: .6rem;
    --knopf: 2.9rem
}

.kontakt-schieber-text {
    margin: 0;
    font-weight: 600
}

.kontakt-schieber-bahn {
    position: relative;
    height: calc(var(--knopf) + .5rem);
    border-radius: 99px;
    background: color-mix(in srgb, var(--ton-text) 7%, transparent);
    box-shadow: inset 0 1px 3px #0000001a;
    touch-action: none;
    user-select: none
}

.kontakt-schieber-ziel {
    position: absolute;
    top: .25rem;
    left: calc(.25rem + (100% - .5rem - var(--knopf)) * var(--ziel) / 100 - .3rem);
    width: calc(var(--knopf) + .6rem);
    height: var(--knopf);
    margin-top: 0;
    box-sizing: border-box;
    border: 2px dashed color-mix(in srgb, var(--ton-akzent) 70%, transparent);
    border-radius: 99px;
    background: color-mix(in srgb, var(--ton-akzent) 10%, transparent);
    transform: translateX(0);
    top: .25rem
}

.kontakt-schieber-knopf {
    --p: 0;
    position: absolute;
    top: .25rem;
    left: calc(.25rem + (100% - .5rem - var(--knopf)) * var(--p) / 100);
    display: grid;
    place-items: center;
    width: var(--knopf);
    height: var(--knopf);
    border-radius: 50%;
    background: var(--ton-akzent);
    color: var(--ton-auf-akzent);
    box-shadow: 0 3px 10px #00000033;
    cursor: grab;
    touch-action: none;
    transition: transform .15s, box-shadow .15s
}

.kontakt-schieber.zieht .kontakt-schieber-knopf {
    cursor: grabbing;
    transform: scale(1.06);
    box-shadow: 0 6px 18px #00000040
}

.kontakt-schieber-knopf:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ton-akzent) 45%, transparent);
    outline-offset: 3px
}

.kontakt-schieber.im-ziel .kontakt-schieber-ziel {
    border-style: solid;
    border-color: var(--ton-akzent);
    background: color-mix(in srgb, var(--ton-akzent) 22%, transparent)
}

.kontakt-schieber.im-ziel .kontakt-schieber-knopf i::before {
    content: '\f00c'
}

@media (prefers-reduced-motion: reduce) {
    .kontakt-schieber-knopf {
        transition: none
    }
}

/* ========== Anmeldung zu Veranstaltungen (Baustein „anmeldung“ und Profil) ========== */
.m-anmeldung { display: grid; gap: 1.2rem }
.m-anmeldung-kopf h2 { margin: 0 0 .4rem }
.m-anmeldung-wann { display: flex; gap: .5rem; align-items: center; margin: 0 0 .5rem; font-weight: 600 }
.m-anmeldung-wann i { color: var(--ton-akzent) }
.m-anmeldung-text { margin: 0 0 .6rem }
.m-anmeldung-marken { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 }
.m-anmeldung-marken span { padding: .2rem .7rem; border-radius: 99px; background: var(--ton-sanft); font-size: .88rem; font-weight: 600 }
.m-anmeldung-meldung { margin: 0; padding: .8rem 1rem; border-radius: .7rem; background: color-mix(in srgb, var(--ton-akzent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ton-akzent) 40%, transparent) }
.m-anmeldung-fehler { background: color-mix(in srgb, #b3261e 10%, transparent); border-color: color-mix(in srgb, #b3261e 45%, transparent) }
.m-anmeldung-geschlossen, .m-anmeldung-eigene { margin: 0; padding: 1rem 1.2rem; border: 1px solid var(--ton-rand); border-radius: .8rem; background: var(--ton-box) }
.m-anmeldung-eigene { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between }
.m-anmeldung-eigene p { margin: 0 }
.m-anmeldung-liste { margin: .35rem 0 0; padding-left: 1.2rem }
.m-anmeldung-liste li + li { margin-top: .15rem }
/* „Weitere Anmeldung“: kurzer Hinweis über dem Formular, Abbrechen rechts */
.m-anmeldung-weitere { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: baseline; justify-content: space-between; padding: .7rem 1rem; border-left: 4px solid var(--ton-akzent); border-radius: .5rem; background: var(--ton-sanft) }
.m-anmeldung-weitere p { margin: 0; flex: 1 1 22rem }
.m-anmeldung-weitere a { color: var(--ton-link); font-weight: 600 }
.m-anm-ticket-gruppe h3 small { font-size: .7em; font-weight: 600; opacity: .7 }
.m-anmeldung-formular .m-anm-teil { display: grid; gap: .7rem; margin: 0; padding: 0; border: 0 }
.m-anmeldung-formular .m-anm-teil > legend { margin-bottom: .5rem; padding: 0; font-size: 1.05rem; font-weight: 700 }
.m-anm-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: .8rem 1rem }
.m-anm-breit { grid-column: 1 / -1 }
.m-anm-konto { grid-column: 1 / -1; margin: 0; color: color-mix(in srgb, var(--ton-text) 75%, transparent) }
.m-anm-tickets { display: grid; gap: .5rem }
.m-anm-ticket { display: grid; grid-template-columns: minmax(0, 1fr) auto 5rem; gap: .8rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--ton-rand); border-radius: .7rem; background: color-mix(in srgb, var(--ton-text) 3%, transparent) }
.m-anm-ticket-text { display: grid; gap: .1rem }
.m-anm-ticket-text small { color: color-mix(in srgb, var(--ton-text) 70%, transparent); font-weight: 400 }
.m-anm-preis { font-weight: 700; white-space: nowrap }
.kontaktformular .m-anm-ticket input[type=number] { width: 5rem; text-align: center }
.m-anm-vip { border-color: color-mix(in srgb, #b8860b 60%, var(--ton-rand)) }
.m-anm-vip-marke { display: inline-block; padding: .05rem .45rem; border-radius: 99px; background: #b8860b; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .06em; vertical-align: middle }
.m-anm-namen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .6rem 1rem }
.m-anm-namen > p { grid-column: 1 / -1; margin: .3rem 0 0; font-weight: 600 }
.m-anm-namen label[hidden] { display: none }
.m-anm-naechte { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center }
.m-anm-naechte > span { width: 100%; font-weight: 600; font-size: .95rem }
.m-anm-janein { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; padding: 0; border: 0 }
.m-anm-janein legend { width: 100%; margin-bottom: .3rem; font-weight: 650 }
.m-anm-summe { display: flex; justify-content: space-between; align-items: baseline; padding: .8rem 1rem; border-radius: .7rem; background: var(--ton-sanft); font-size: 1.05rem }
.m-anm-summe[hidden] { display: none }
.m-anm-summe strong { font-size: 1.35rem }
.m-anm-hinweis-klein { margin: 0; font-size: .88rem; color: color-mix(in srgb, var(--ton-text) 70%, transparent) }
.m-anm-hinweis { margin: 0; padding: .7rem .9rem; border-left: 3px solid var(--ton-akzent); background: var(--ton-sanft) }
.m-anm-einwilligung { align-items: flex-start }
.m-anm-profil { display: grid; gap: 1rem }
.m-anm-profil-kopf { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; align-items: center }
.m-anm-profil-kopf h2 { margin: 0 }
.m-anm-karte { display: grid; gap: .9rem; padding: 1.1rem 1.2rem; border: 1px solid var(--ton-rand); border-radius: 1rem; background: var(--ton-box) }
.m-anm-karte-kopf { display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: space-between; align-items: flex-start }
.m-anm-karte-kopf h3 { margin: 0 }
.m-anm-karte-kopf p { margin: .2rem 0 0; color: color-mix(in srgb, var(--ton-text) 75%, transparent) }
.m-anm-status { padding: .2rem .7rem; border-radius: 99px; background: color-mix(in srgb, var(--ton-akzent) 16%, transparent); font-weight: 700; font-size: .85rem }
.m-anm-status-warteliste .m-anm-status { background: color-mix(in srgb, #b97a00 18%, transparent) }
.m-anm-status-storniert { opacity: .7 }
.m-anm-status-storniert .m-anm-status { background: color-mix(in srgb, #b3261e 14%, transparent) }
.m-anm-daten { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem 1rem; margin: 0 }
.m-anm-daten dt { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--ton-text) 65%, transparent) }
.m-anm-daten dd { margin: 0 }
.m-anm-zahlung { padding: .8rem 1rem; border-radius: .7rem; border: 1px dashed color-mix(in srgb, var(--ton-akzent) 55%, transparent); background: color-mix(in srgb, var(--ton-akzent) 6%, transparent) }
.m-anm-zahlung p { margin: .2rem 0 }
.m-anm-bezahlt { border-style: solid; display: flex; gap: .5rem; align-items: center; margin: 0 }
.m-anm-zweck { padding: .1rem .5rem; border-radius: .35rem; background: var(--ton-sanft); font-size: 1.05em; font-weight: 700; user-select: all }
.m-anm-personen { display: grid; gap: .5rem }
.m-anm-person { display: flex; flex-wrap: wrap; gap: .2rem 1rem; padding: .5rem .7rem; border-radius: .6rem; background: var(--ton-sanft) }
.m-anm-mit-tickets { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: .8rem }
.m-anm-ticket-karte { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .8rem; align-items: center; padding: .8rem; border: 2px solid var(--ton-text); border-radius: .9rem; background: #fff; color: #111; break-inside: avoid }
.m-anm-qr svg { display: block; width: 100%; height: auto }
.m-anm-ticket-info { display: grid; gap: .15rem; min-width: 0 }
.m-anm-ticket-info strong { font-size: 1.1rem }
.m-anm-ticket-info small, .m-anm-ticket-titel { color: #555 }
.m-anm-ticket-info code { margin-top: .3rem; font-size: .9rem; letter-spacing: .05em }
.m-anm-eingecheckt { color: #1f7a3a; font-weight: 700 }
.m-anm-storno { margin: 0 }


/* ---------- Tickets im Profil und Anmeldung über den Link (anwendung/anmeldungen.php) ---------- */
.m-anm-ticket-gruppe { display: grid; gap: .6rem }
.m-anm-ticket-gruppe h3 { margin: .4rem 0 0 }
.m-anm-zu-tickets { margin: 0 }
.m-anm-link { display: grid; gap: 1rem }
.m-anm-link h1 { margin: 0 }
.m-anmeldung-login p { margin: 0 }
.m-anmeldung-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem }

.m-profil-marke.m-profil-offen { background: #fff4e0; color: #7a4a00 }
.m-profil-klein { display: block; margin-top: .3rem; font-size: .85rem; font-weight: 400; color: color-mix(in srgb, var(--ton-text) 70%, transparent) }
.m-profil-karte.m-profil-hinweis { margin-top: 1rem; border-left: 4px solid #d89b2b }

/* ---------- Baustein „Newsletter-Anmeldung“ und Seite /newsletter (anwendung/newsletter.php) ---------- */
.m-newsletter { display: grid; gap: 1rem; padding: 1.4rem; border: 1px solid var(--ton-rand); border-radius: 1.1rem; background: var(--ton-box) }
.m-newsletter-kopf { display: flex; gap: 1rem; align-items: flex-start }
.m-newsletter-symbol { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--ton-akzent); color: var(--ton-auf-akzent); font-size: 1.2rem }
.m-newsletter-kopf h2 { margin: 0 0 .3rem }
.m-newsletter-kopf p { margin: 0 }
.m-newsletter-formular { display: grid; gap: .8rem }
.m-newsletter-felder { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end }
.m-newsletter-felder label { flex: 1 1 14rem; display: grid; gap: .3rem; font-size: .92rem; font-weight: 600 }
.m-newsletter-felder input { width: 100%; box-sizing: border-box; padding: .72rem .85rem; border: 1px solid var(--ton-rand); border-radius: .6rem; background: var(--ton-box); color: var(--ton-text); font: inherit; font-weight: 400 }
.m-newsletter-felder input:focus-visible { outline: 2px solid var(--ton-akzent); outline-offset: 1px }
.m-newsletter-felder .button { flex: none; margin: 0 }
.m-newsletter-listen { display: grid; gap: .45rem; margin: 0; padding: 0; border: 0 }
.m-newsletter-listen legend { margin-bottom: .3rem; padding: 0; font-weight: 700 }
.m-newsletter-listen label, .m-newsletter-verwalten label.checkbox { display: flex; gap: .6rem; align-items: flex-start }
.m-newsletter-listen label span, .m-newsletter-verwalten label span { display: grid; gap: .1rem }
.m-newsletter-listen small, .m-newsletter-verwalten small { font-weight: 400; color: color-mix(in srgb, var(--ton-text) 70%, transparent) }
.m-newsletter-hinweis { margin: 0; font-size: .85rem; color: color-mix(in srgb, var(--ton-text) 70%, transparent) }
.m-newsletter-meldung { margin: 0; padding: .7rem 1rem; border-radius: .7rem; background: color-mix(in srgb, var(--ton-akzent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ton-akzent) 40%, transparent) }
.m-newsletter-meldung.fehler { background: color-mix(in srgb, #b3261e 10%, transparent); border-color: color-mix(in srgb, #b3261e 45%, transparent) }
.m-newsletter-verwalten { display: grid; gap: .7rem }
/* Newsletter im Profil: jede Liste als anklickbare Zeile mit gestaltetem Haken */
.m-newsletter-verwalten label.checkbox { align-items: center; gap: .9rem; padding: .8rem 1rem; border: 1px solid var(--ton-rand); border-radius: .75rem; background: color-mix(in srgb, var(--ton-text) 3%, transparent); font-weight: 400; cursor: pointer; transition: border-color .15s, background-color .15s }
.m-newsletter-verwalten label.checkbox:hover { border-color: color-mix(in srgb, var(--ton-akzent) 55%, var(--ton-rand)) }
.m-newsletter-verwalten label.checkbox:has(input:checked) { border-color: var(--ton-akzent); background: color-mix(in srgb, var(--ton-akzent) 9%, transparent) }
.m-profil-karte input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 1.45rem; height: 1.45rem; margin: 0; border: 2px solid color-mix(in srgb, var(--ton-text) 35%, transparent); border-radius: .45rem; background: var(--ton-box); cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s }
.m-profil-karte input[type=checkbox]::after { content: ''; position: absolute; left: 50%; top: 44%; width: .36rem; height: .72rem; border: solid var(--ton-auf-akzent); border-width: 0 .17rem .17rem 0; transform: translate(-50%, -50%) rotate(45deg) scale(0); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1) }
.m-profil-karte input[type=checkbox]:hover { border-color: var(--ton-akzent) }
.m-profil-karte input[type=checkbox]:checked { border-color: var(--ton-akzent); background: var(--ton-akzent); box-shadow: 0 2px 8px color-mix(in srgb, var(--ton-akzent) 35%, transparent) }
.m-profil-karte input[type=checkbox]:checked::after { transform: translate(-50%, -50%) rotate(45deg) scale(1) }
.m-profil-karte input[type=checkbox]:focus-visible { outline: 3px solid color-mix(in srgb, var(--ton-akzent) 45%, transparent); outline-offset: 2px }
@media (prefers-reduced-motion: reduce) { .m-profil-karte input[type=checkbox], .m-profil-karte input[type=checkbox]::after, .m-newsletter-verwalten label.checkbox { transition: none } }
.m-newsletter-verwalten > p { margin: 0 }

/* ---------- Ticket-Prüfung /scan (anwendung/scan.php, www/scan.js): eigenes dunkles Dokument fürs Handy, feste Farben ---------- */
body.scan-seite { margin: 0; min-height: 100vh; min-height: 100dvh; background: #0f1720; color: #eef3f8; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent }
.scan-seite h1 { color: inherit }
.scan-kopf { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: max(.8rem, env(safe-area-inset-top)) 1rem .8rem; background: #16212d; border-bottom: 1px solid #253445 }
.scan-titel { display: flex; gap: .5rem; align-items: center; font-weight: 700 }
.scan-titel i { color: color-mix(in srgb, var(--scan-akzent) 55%, #fff) }
.scan-konto { max-width: 45vw; overflow: hidden; color: #c9d5e2; font-size: .9rem; text-decoration: none; text-overflow: ellipsis; white-space: nowrap }
.scan-haupt { display: grid; gap: 1rem; max-width: 34rem; margin: 0 auto; padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom)) }
.scan-wahl { display: grid; gap: .35rem; color: #9fb0c2; font-size: .85rem }
.scan-wahl[hidden] { display: none }
.scan-wahl select, .scan-code input { width: 100%; box-sizing: border-box; padding: .8rem .9rem; border: 1px solid #2c3d50; border-radius: .7rem; background: #1b2836; color: #eef3f8; font: inherit; font-size: 1rem }
.scan-zahl { margin: 0; color: #9fb0c2; font-size: .95rem; text-align: center }
.scan-zahl:empty { display: none }
.scan-ergebnis { display: grid; gap: .8rem; transition: opacity .2s }
.scan-ergebnis.scan-laedt { opacity: .5 }
.scan-bereit { display: grid; justify-items: center; gap: .5rem; padding: 1.6rem 1rem; border: 2px dashed #2c3d50; border-radius: 1rem; color: #9fb0c2; text-align: center }
.scan-bereit i { color: #5d7186; font-size: 2rem }
.scan-bereit p, .scan-hinweis { margin: 0 }
.scan-hinweis { padding: .6rem .8rem; border-radius: .6rem; background: #1b2836; color: #c9d5e2; font-size: .9rem }
.scan-karte { display: grid; gap: .7rem; padding: 1.1rem 1.2rem; border-radius: 1.1rem; color: #fff; animation: scan-auf .25s ease-out }
.scan-gruen { background: #17803d }
.scan-gelb { background: #a86b00 }
.scan-rot { background: #b42318 }
.scan-stand { display: flex; align-items: center; gap: .6rem; font-size: 1.6rem; font-weight: 800; line-height: 1.15 }
.scan-stand i { font-size: 2rem }
.scan-vip { margin-left: auto; padding: .2rem .75rem; border-radius: 99px; background: #fff; color: #7a5800; font-size: 1rem; font-weight: 900; letter-spacing: .08em }
.scan-platz { display: grid; margin: 0; font-size: 2.6rem; font-weight: 900; line-height: 1.05 }
.scan-platz small { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85 }
.scan-felder { display: grid; gap: .35rem; margin: 0 }
.scan-felder div { display: flex; justify-content: space-between; gap: .6rem; padding-top: .35rem; border-top: 1px solid rgba(255, 255, 255, .22) }
.scan-felder dt { opacity: .85 }
.scan-felder dd { margin: 0; font-weight: 700; text-align: right }
.scan-text { margin: 0; font-weight: 600 }
.scan-video { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 1rem; background: #000 }
.scan-video[hidden] { display: none }
.scan-video video { display: block; width: 100%; height: 100%; object-fit: cover }
.scan-rahmen { position: absolute; inset: 15% 22%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 1rem; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35) }
.scan-laeuft { position: absolute; right: 0; bottom: .6rem; left: 0; color: #fff; font-size: .85rem; text-align: center; text-shadow: 0 1px 2px #000 }
.scan-knopf { display: flex; justify-content: center; align-items: center; gap: .5rem; width: 100%; padding: 1rem; border: 0; border-radius: .9rem; background: var(--scan-akzent); color: var(--scan-auf-akzent); font: inherit; font-size: 1.1rem; font-weight: 700; text-decoration: none; cursor: pointer }
.scan-knopf:disabled { opacity: .6 }
.scan-knopf-zweit { background: #24364a; color: #eef3f8 }
.scan-karte .scan-knopf { background: #fff; color: #111 }
.scan-karte .scan-knopf-zweit { background: rgba(0, 0, 0, .25); color: #fff }
.scan-code summary { padding: .4rem 0; color: #9fb0c2; cursor: pointer }
.scan-code form { display: grid; gap: .6rem; margin-top: .4rem }
.scan-code input { letter-spacing: .08em; text-transform: uppercase }
.scan-ton { display: flex; justify-content: center; align-items: center; gap: .5rem; color: #9fb0c2; font-size: .9rem }
.scan-leer { display: grid; justify-items: center; gap: .6rem; padding: 3rem 1rem; text-align: center }
.scan-leer i { color: #5d7186; font-size: 2.4rem }
.scan-leer h1 { margin: 0; font-size: 1.4rem }
@keyframes scan-auf { from { transform: scale(.97); opacity: .4 } }
@media (prefers-reduced-motion: reduce) { .scan-karte { animation: none } }
.m-profil-qr { width: 200px; max-width: 100%; margin: .6rem 0; padding: 10px; border-radius: 12px; background: #fff }
.m-profil-qr svg { display: block; width: 100%; height: auto }

/* ---------- Monatskalender: Tooltip beim Überfahren mit der Maus (www/veranstaltungen.js) ---------- */
.cms-monat-tipp { position: fixed; z-index: 1000; display: grid; gap: .25rem; max-width: min(300px, calc(100vw - 16px)); padding: .65rem .8rem .7rem; border-radius: .7rem; border-top: 3px solid var(--cms-event-kategorie, var(--ton-akzent)); background: var(--ton-box); color: var(--ton-text); box-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08); font-size: .88rem; line-height: 1.35; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease }
.cms-monat-tipp.unten { transform: translateY(-4px) }
.cms-monat-tipp.sichtbar { opacity: 1; transform: none }
.cms-monat-tipp strong { font-size: .95rem }
.cms-monat-tipp span { display: flex; gap: .45rem; align-items: baseline; color: color-mix(in srgb, var(--ton-text) 80%, transparent) }
.cms-monat-tipp i { width: .9rem; flex: none; text-align: center; color: var(--cms-event-kategorie, var(--ton-akzent)); font-size: .8rem }
@media (hover: none) { .cms-monat-tipp { display: none } }
@media (prefers-reduced-motion: reduce) { .cms-monat-tipp { transition: none; transform: none } }

/* ---------- Schaltflächen: Größe, Position, Abstand nach oben verringern (cms_bloecke_rendern(), Typ button) ---------- */
.m-btn.m-btn-mitte { justify-content: center }
.m-btn.m-btn-rechts { justify-content: flex-end }
.m-btn.m-btn-breit .button { flex: 1 1 14rem; justify-content: center; text-align: center; padding-top: .95rem; padding-bottom: .95rem; font-size: 1.05rem }
.m-btn.m-btn-nah { margin-top: .6rem }
/* Der Baustein davor gibt seinen Abstand nach unten ab, damit die Schaltfläche zu ihm gehört.
   Nicht bei Parallax und Hintergrundfarbe: Deren Fläche soll ihren Rand behalten. */
:not(.m-parallax):not(.m-hintergrund):has(+ .m-btn-nah) { margin-bottom: 0 !important; padding-bottom: 0 !important }
:not(.m-parallax):not(.m-hintergrund):has(+ .m-btn-nah) > :last-child { margin-bottom: 0 !important }
.m-parallax + .m-btn-nah, .m-hintergrund + .m-btn-nah, .m-btn-nah:first-child { margin-top: 1.5rem }

/* ---------- Veranstaltungsflyer: Umschalter und Rasteransicht (www/veranstaltungen.js) ---------- */
.cms-flyer-kopf { display: flex; justify-content: flex-end; padding: 0 var(--cms-flyer-rand, 1.5rem); margin: 0 0 .4rem }
/* Schiebeschalter: zwei Symbole in einer flachen Kapsel, der Regler gleitet unter das gewählte */
.cms-flyer-ansicht { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 99px; background: color-mix(in srgb, var(--ton-text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton-text) 8%, transparent); touch-action: pan-y; user-select: none; -webkit-user-select: none }
.cms-flyer-ansicht-regler { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 99px; background: var(--ton-box); box-shadow: 0 1px 2px rgba(16, 38, 60, .14), 0 3px 10px rgba(16, 38, 60, .1); transition: transform .32s cubic-bezier(.3, 1.4, .5, 1) }
/* Beliebig viele Ansichten: --anzahl und --index setzt veranstaltungen.js; Knöpfe der anderen Bildschirmgröße sind hidden */
.cms-flyer-kopf[hidden], .cms-flyer-ansicht button[hidden] { display: none }
.cms-flyer-ansicht { grid-template-columns: repeat(var(--anzahl, 2), 1fr) }
.cms-flyer-ansicht-regler { width: calc((100% - 6px) / var(--anzahl, 2)); transform: translateX(calc(var(--index, 0) * 100%)) }
.cms-flyer-ansicht button { position: relative; z-index: 1; display: grid; place-items: center; width: 2.4rem; height: 1.9rem; margin: 0; padding: 0; border: 0; border-radius: 99px; background: none; box-shadow: none; color: color-mix(in srgb, var(--ton-text) 45%, transparent); font-size: .85rem; cursor: pointer; transition: color .25s }
.cms-flyer-ansicht button:hover { background: none; color: color-mix(in srgb, var(--ton-text) 75%, transparent); transform: none; filter: none }
.cms-flyer-ansicht button[aria-checked="true"] { color: var(--ton-akzent) }
.cms-flyer-ansicht button:focus-visible { outline: 2px solid var(--ton-akzent); outline-offset: 1px }
@media (prefers-reduced-motion: reduce) { .cms-flyer-ansicht-regler { transition: none } }
.cms-events-flyer.cms-flyer-ist-raster { height: auto !important; min-height: 0 }
.cms-flyer-ist-raster .cms-flyer-stage { display: none }
.cms-flyer-raster { display: grid; grid-template-columns: repeat(var(--spalten, 5), minmax(0, 1fr)); gap: var(--luecke, 16px); align-items: start; width: min(var(--cms-flyer-max-breite, 1200px), 100% - 2 * var(--cms-flyer-rand, 1.5rem)); margin: 0 auto }
.cms-flyer-raster[hidden], .cms-flyer-raster-mehr[hidden] { display: none }
.cms-flyer-spalte { display: grid; gap: var(--luecke, 16px); align-content: start; min-width: 0 }
.cms-flyer-raster .cms-flyer-item { flex: none; opacity: 1; transform: none; animation: cms-flyer-rein .45s cubic-bezier(.2, .8, .2, 1) both }
.cms-flyer-raster .cms-flyer-item .cms-event-open { display: block; width: 100%; border-radius: .5rem; overflow: hidden; box-shadow: 0 6px 18px rgba(16, 38, 60, .14); transition: transform .25s ease, box-shadow .25s ease }
.cms-flyer-raster .cms-flyer-item .cms-event-open:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16, 38, 60, .2) }
.cms-flyer-raster .cms-flyer-item .cms-event-poster { display: block; width: 100%; max-width: none; height: auto; max-height: none; border-radius: 0 }
/* So breit wie das Raster darüber (der Flyer-Abschnitt selbst reicht über die ganze Fensterbreite). */
.cms-flyer-raster-mehr { width: min(var(--cms-flyer-max-breite, 1200px), 100% - 2 * var(--cms-flyer-rand, 1.5rem)); margin: 1.6rem auto 0; padding-bottom: 16px }
@keyframes cms-flyer-rein { from { opacity: 0; transform: translateY(10px) } }
@media (prefers-reduced-motion: reduce) { .cms-flyer-raster .cms-flyer-item { animation: none } .cms-flyer-raster .cms-flyer-item .cms-event-open { transition: none } }
@media (max-width: 699px) { .cms-flyer-raster .cms-flyer-item .cms-event-open { border-radius: .35rem; box-shadow: 0 3px 10px rgba(16, 38, 60, .14) } }

/* ---------- „Mehr anzeigen“ (Terminliste, Flyer-Raster): flache Karte, darunter angedeutet weitere Karten ----------
   Vorbild ist der Platzhalter „Weitere Flyer anzeigen“ der Flyer-Reihe: leicht eingefärbte Fläche, gestapelte Kanten,
   runder Akzentkreis. Ecken wie die Terminkarten, Farben aus dem Ton-System. */
.cms-event-mehr { margin: 1.4rem 0 0; padding-bottom: 18px }
.cms-events button.cms-mehr, button.cms-mehr { position: relative; display: flex; align-items: center; gap: .9rem; width: 100%; margin: 0; padding: .8rem 1.1rem; border: 0; border-radius: .9rem; background: color-mix(in srgb, var(--ton-akzent) 9%, var(--ton-box)); color: var(--ton-text); font: inherit; text-align: left; cursor: pointer; filter: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton-akzent) 14%, transparent), 0 8px 0 -3px color-mix(in srgb, var(--ton-akzent) 24%, var(--ton-box)), 0 16px 0 -7px color-mix(in srgb, var(--ton-akzent) 40%, var(--ton-box)), 0 12px 28px rgba(16, 38, 60, .1);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease }
.cms-events button.cms-mehr:hover, button.cms-mehr:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--ton-akzent) 14%, var(--ton-box)); color: var(--ton-text); filter: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton-akzent) 22%, transparent), 0 10px 0 -3px color-mix(in srgb, var(--ton-akzent) 28%, var(--ton-box)), 0 20px 0 -7px color-mix(in srgb, var(--ton-akzent) 46%, var(--ton-box)), 0 16px 34px rgba(16, 38, 60, .14) }
.cms-events button.cms-mehr:active, button.cms-mehr:active { transform: translateY(1px) }
button.cms-mehr:focus-visible { outline: 2px solid var(--ton-akzent); outline-offset: 3px }
.cms-mehr-symbol { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--ton-akzent); color: var(--ton-auf-akzent); font-size: .95rem; transition: transform .3s cubic-bezier(.3, 1.5, .5, 1) }
button.cms-mehr:hover .cms-mehr-symbol { transform: translateY(3px) }
.cms-mehr-text { display: grid; gap: .05rem; min-width: 0 }
.cms-mehr-text strong { font-size: 1.02rem; line-height: 1.25 }
.cms-mehr-rest { color: color-mix(in srgb, var(--ton-text) 65%, transparent); font-size: .85rem }
.cms-mehr-rest:empty { display: none }
@media (prefers-reduced-motion: reduce) { button.cms-mehr, .cms-mehr-symbol { transition: none } }
.cms-flyer-stage > .cms-flyer-kopf { margin: 0 0 .2rem }

/* ---------- Filterknöpfe der Kalender-Bausteine in der Kategoriefarbe (cms_veranstaltungs_block()) ---------- */
.cms-event-filters button.cms-filter-kat { position: relative; background: color-mix(in srgb, var(--kat) 13%, var(--ton-sanft)); color: var(--ton-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kat) 28%, transparent); transition: background .2s, color .2s, box-shadow .2s }
/* Farbiger Strich unter dem Namen statt eines Punktes davor: spart Breite, wenn viele Filter nebeneinander stehen. */
.cms-event-filters button.cms-filter-kat::after { content: ""; position: absolute; left: 50%; bottom: .32rem; width: min(1.6rem, calc(100% - 1.6rem)); height: 3px; border-radius: 3px; background: var(--kat); transform: translateX(-50%); transition: width .2s ease, background .2s }
.cms-event-filters button.cms-filter-kat:hover { background: color-mix(in srgb, var(--kat) 26%, var(--ton-sanft)); color: var(--ton-text) }
.cms-event-filters button.cms-filter-kat:hover::after { width: calc(100% - 1.6rem) }
.cms-event-filters button.cms-filter-kat.aktiv { background: var(--kat); color: var(--kat-text); box-shadow: 0 2px 6px color-mix(in srgb, var(--kat) 30%, transparent) }
.cms-event-filters button.cms-filter-kat.aktiv::after { width: calc(100% - 1.6rem); background: color-mix(in srgb, var(--kat-text) 70%, transparent) }

/* ---------- Veranstaltungsflyer: 3D-Karussell und Kartenstapel (www/veranstaltungen.js, blaetterBauen()) ----------
   Ein Flyer vorn, die übrigen dahinter. Die Lage kommt aus Variablen je Flyer: --d (Abstand zum vorderen, höchstens ±4),
   --a (Betrag), --r (Richtung), im Stapel --neig (leichte Drehung der hinteren Karten). */
.cms-events-flyer { --cms-flyer-bh: min(var(--cms-flyer-max-h, 650px), 62vh) }
.cms-flyer-ohne-reihe .cms-flyer-stage { display: none }
.cms-events-flyer.cms-flyer-ohne-reihe { height: auto !important; min-height: 0 }
.cms-flyer-blaettern { width: 100%; overflow: hidden; padding: .4rem 0 1rem }
.cms-flyer-blaettern[hidden] { display: none }
.cms-flyer-buehne { position: relative; height: calc(var(--cms-flyer-bh) + 2.5rem); touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none }
.cms-flyer-buehne:focus-visible { outline: 2px solid var(--ton-akzent); outline-offset: -4px; border-radius: .6rem }
.cms-flyer-blaettern .cms-flyer-item, .cms-flyer-blaettern .cms-flyer-item.aktiv { position: absolute; left: 50%; top: 50%; margin: 0; flex: none; transform-origin: center; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .45s ease, filter .45s ease }
.cms-flyer-blaettern .cms-flyer-item .cms-event-open { display: block; width: auto; border-radius: .5rem; overflow: hidden; box-shadow: 0 18px 40px rgba(16, 38, 60, .26); -webkit-user-drag: none }
.cms-flyer-blaettern .cms-flyer-item .cms-event-poster { display: block; width: auto; height: auto; max-width: min(var(--cms-flyer-max-b, 390px), 72vw); max-height: var(--cms-flyer-bh); object-fit: contain; border-radius: 0; pointer-events: none }
.cms-flyer-blaettern .cms-flyer-item:not(.vorn) .cms-event-open { cursor: pointer }
/* Karussell: Nachbarn seitlich versetzt, kleiner und zur Mitte gedreht. Jeder Flyer hat seine eigene Perspektive
   (perspective() in der Transformation), so bleibt die Reihenfolge über z-index verlässlich. */
.cms-flyer-karussell { --k-abstand: clamp(70px, 17vw, 240px) }
.cms-flyer-karussell .cms-flyer-item, .cms-flyer-karussell .cms-flyer-item.aktiv { z-index: calc(10 - var(--a, 0)); opacity: calc(1 - var(--a, 0) * .2); filter: brightness(calc(1 - var(--a, 0) * .1));
    transform: translate(-50%, -50%) translateX(calc(var(--d, 0) * var(--k-abstand))) scale(calc(1 - var(--a, 0) * .13)) perspective(900px) rotateY(calc(var(--r, 0) * -34deg)) }
.cms-flyer-karussell .cms-flyer-item.vorn .cms-event-open { box-shadow: 0 24px 50px rgba(16, 38, 60, .32) }
/* Kartenstapel: hintere Karten etwas tiefer, kleiner und leicht verdreht. Beim Blättern gleitet eine Karte zur Seite
   hinaus (.seite) und wird hinten angestellt (.unten) bzw. kommt hinten hervor und legt sich obenauf (.oben). */
.cms-flyer-stapel .cms-flyer-item, .cms-flyer-stapel .cms-flyer-item.aktiv { z-index: calc(10 - var(--d, 0)); opacity: calc(1 - var(--d, 0) * .12);
    transform: translate(-50%, -50%) translate(calc(var(--neig, 0) * 6px), calc(var(--d, 0) * 18px - 1.6rem)) scale(calc(1 - var(--d, 0) * .04)) rotate(calc(var(--neig, 0) * 1deg)) }
.cms-flyer-stapel .cms-flyer-item.vorn { cursor: grab }
.cms-flyer-stapel .cms-flyer-item.zieht { transition: none; cursor: grabbing }
.cms-flyer-stapel .cms-flyer-item.oben, .cms-flyer-stapel .cms-flyer-item.unten { visibility: visible !important; transition: transform .42s cubic-bezier(.4, 0, .2, 1), opacity .42s ease }
.cms-flyer-stapel .cms-flyer-item.oben { z-index: 30 }
.cms-flyer-stapel .cms-flyer-item.unten { z-index: 1 }
.cms-flyer-stapel .cms-flyer-item.seite { transform: translate(-50%, -50%) translateX(calc(var(--wurf, 1) * 78%)) translateY(-1.6rem) rotate(calc(var(--wurf, 1) * 9deg)) !important; opacity: 1; transition: transform .3s cubic-bezier(.3, .6, .4, 1) }
.cms-flyer-stapel .cms-flyer-item.sofort { transition: none }
.cms-flyer-stapel .cms-flyer-item.ausblenden { opacity: 0 }
/* Steuerung unter beiden Ansichten */
.cms-flyer-steuerung { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: .4rem }
.cms-flyer-steuerung button { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--ton-akzent); color: var(--ton-auf-akzent); font-size: .95rem; box-shadow: 0 4px 12px rgba(16, 38, 60, .18); cursor: pointer; transition: transform .2s ease, opacity .2s ease }
.cms-flyer-steuerung button:hover { background: var(--ton-akzent); color: var(--ton-auf-akzent); transform: scale(1.08); filter: none }
.cms-flyer-steuerung button:disabled { opacity: .3; box-shadow: none; cursor: default; transform: none }
.cms-flyer-steuerung button:focus-visible { outline: 2px solid var(--ton-akzent); outline-offset: 3px }
.cms-flyer-zaehler { min-width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; color: color-mix(in srgb, var(--ton-text) 70%, transparent) }
@media (max-width: 699px) { .cms-events-flyer { --cms-flyer-bh: min(var(--cms-flyer-max-h, 650px), 56vh) } .cms-flyer-karussell { --k-abstand: 24vw } }
@media (prefers-reduced-motion: reduce) { .cms-flyer-blaettern .cms-flyer-item, .cms-flyer-steuerung button { transition: none } }

/* ---------- Tabmenü: Wechsel zwischen den Tabs (www/tabs.js) ----------
   Alle Bereiche liegen im selben Rasterfeld; beim Wechsel sind alter (.geht) und neuer (.kommt) kurz gleichzeitig da.
   data-wechsel am Tabmenü: gleiten (ein Stück seitlich in Richtung --richtung, dazu überblenden), blenden, aus.
   Die Höhe gleitet währenddessen vom alten zum neuen Inhalt (.wechselt, Höhe setzt das Skript). */
.m-tabs-panels { display: grid; grid-template-columns: minmax(0, 1fr) }
.m-tabs-panels > .m-tab-panel { grid-area: 1 / 1; min-width: 0 }
.m-tabs-panels.wechselt { overflow-x: visible; overflow-y: clip; transition: height .4s cubic-bezier(.3, .7, .3, 1) }
.m-tabs[data-wechsel] .m-tab-panel.aktiv { animation: none }
.m-tab-panel.geht { pointer-events: none }
.m-tabs[data-wechsel="gleiten"] .m-tab-panel.geht { animation: m-tab-gleiten-aus .28s ease-in both }
.m-tabs[data-wechsel="gleiten"] .m-tab-panel.kommt { animation: m-tab-gleiten-ein .4s cubic-bezier(.2, .7, .2, 1) .06s both }
.m-tabs[data-wechsel="blenden"] .m-tab-panel.geht { animation: m-tab-blenden-aus .28s ease both }
.m-tabs[data-wechsel="blenden"] .m-tab-panel.kommt { animation: m-tab-blenden-ein .36s ease .04s both }
@keyframes m-tab-gleiten-aus { from { opacity: 1; transform: none } to { opacity: 0; transform: translateX(calc(var(--richtung, 1) * -32px)) } }
@keyframes m-tab-gleiten-ein { from { opacity: 0; transform: translateX(calc(var(--richtung, 1) * 32px)) } to { opacity: 1; transform: none } }
@keyframes m-tab-blenden-aus { from { opacity: 1 } to { opacity: 0 } }
@keyframes m-tab-blenden-ein { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .m-tabs-panels.wechselt { transition: none } .m-tab-panel.geht, .m-tab-panel.kommt { animation: none !important } }

/* Seitlich scrollende Leisten: Knöpfe rasten nicht unter dem Pfeil bzw. der Ausblendung am Rand ein */
.cms-scroll-liste { scroll-padding-inline: 5.5rem }
@media (max-width: 700px) { .cms-scroll-liste { scroll-padding-inline: 2.6rem } }

/* ---------- Tabmenü: wandernde Markierung (www/tabs.js, .m-tabs-marke) ----------
   Drei Ebenen in der Leiste: die Flächen der Knöpfe (::before), darüber die Markierung in Akzentfarbe, darüber die Schrift.
   So bleibt die Markierung sichtbar, während sie an den Nachbarn vorbeigleitet. Farben wie im Ton-System oben. */
/* Der scrollbare Bereich schneidet alles an seinem Rand ab: oben und unten mehr Innenabstand für den Schatten der
   Markierung, ausgeglichen durch negativen Außenabstand, damit sich Lage und Abstände der Leiste nicht ändern (vorher .4rem).
   Seitlich bleibt es bei .15rem, sonst passten Ausblendung und Pfeile am Rand nicht mehr zusammen. */
.m-tabs-list.mit-marke { position: relative; isolation: isolate; padding-top: 1.2rem; padding-bottom: 1.2rem; margin-top: -.8rem; margin-bottom: -.8rem }
.m-tabs-list.mit-marke > .m-tab, .m-tabs-list.mit-marke > .m-tab:hover, .m-tabs-list.mit-marke > .m-tab.aktiv { position: relative; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: color .3s ease }
.m-tabs-list.mit-marke > .m-tab::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: var(--ton-sanft); -webkit-backdrop-filter: var(--ton-glas); backdrop-filter: var(--ton-glas); transition: background-color .2s }
.m-tabs-list.mit-marke > .m-tab:hover::before { background: color-mix(in srgb, var(--ton-akzent) 24%, var(--ton-sanft)) }
/* Unter der Markierung: Fläche ohne Übergang ausblenden (die Markierung verdeckt sie ohnehin). Übergänge von Deckkraft oder
   transform legen die Leiste in Safari auf eine eigene Grafikebene; mit der Randmaske werden die Flächen dann doppelt
   (dunkler) gezeichnet. */
.m-tabs-list.mit-marke > .m-tab.aktiv::before { opacity: 0 }
.m-tabs-marke { position: absolute; left: 0; top: 0; z-index: -1; border-radius: .6rem; background: var(--ton-akzent); box-shadow: 0 7px 12px -6px color-mix(in srgb, var(--ton-akzent) 55%, transparent); pointer-events: none;
    transition: left .42s cubic-bezier(.3, 1.2, .5, 1), width .42s cubic-bezier(.3, 1.2, .5, 1), top .42s ease, height .42s ease }
.m-tabs-marke.sofort { transition: none }
@media (prefers-reduced-motion: reduce) { .m-tabs-marke { transition: none } }
html.bf-bewegung .m-tabs-marke { transition: none }

/* ---------- Menübalken: schwebend (html.kopf-schwebt) ----------
   Am PC zuerst der Balken über die volle Breite wie bisher; nach ein paar Pixeln Scrollen setzt menue.js die Klasse
   und der Balken löst sich als freistehende Leiste mit runden Ecken. Am Handy (ab dem Umbruch zum Burger-Menü) setzt sie
   ein Skript im <head> schon vor dem ersten Anzeigen. Die Gesamthöhe des Kopfs bleibt dabei gleich: Der Abstand rund um die
   Leiste (--kopf-luft) wird genau so viel größer, wie ihr Innenabstand kleiner wird; so springt beim Umschalten nichts.
   Keine transform-, filter- oder backdrop-filter-Angaben am Kopf: Das Handy-Menü ist darin fest positioniert und hinge
   sich sonst an den Kopf statt an den Bildschirm. */
.site-header { --kopf-luft: 8px; transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, padding .3s ease }
.site-header-inner { --kopf-innen-y: .8rem; --kopf-min: 82px; transition: background-color .3s ease, border-radius .3s ease, box-shadow .3s ease, padding .3s ease, min-height .3s ease }
html.kopf-schwebt .site-header { padding: var(--kopf-luft) calc(var(--kopf-luft) + 4px); background: transparent; border-bottom-color: transparent; box-shadow: none }
html.kopf-schwebt .site-header-inner { min-height: calc(var(--kopf-min) - 2 * var(--kopf-luft)); padding-top: calc(var(--kopf-innen-y) - var(--kopf-luft)); padding-bottom: calc(var(--kopf-innen-y) - var(--kopf-luft)); border-radius: 16px; background: var(--cms-farbe-hell, #fff);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cms-farbe-dunkel, #172435) 9%, transparent), 0 10px 30px -8px rgba(16, 38, 60, .28) }
@media (max-width: 600px) {
    .site-header { --kopf-luft: 6px }
    .site-header-inner { --kopf-innen-y: .55rem; --kopf-min: 68px }
    html.kopf-schwebt .site-header-inner { border-radius: 14px }
}
@media (prefers-reduced-motion: reduce) { .site-header, .site-header-inner { transition: none } }

/* Beginnt die Seite mit Parallax oder Hintergrundfarbe (index.php: kopf-ueber-flaeche), reicht die Fläche hinter den Kopf
   hoch: Der schwebende Balken liegt dann auf dem Bild bzw. der Farbe. Ein durchsichtiger Rand in Kopfhöhe verlängert die
   Fläche nach oben, ohne ihre Innenabstände zu ändern; die Höhe misst ein Skript direkt nach dem Kopf (--kopf-hoehe). */
.kopf-ueber-flaeche .seiteninhalt > .m-parallax:first-child,
.kopf-ueber-flaeche .seiteninhalt > .m-hintergrund:first-child { margin-top: calc(-1 * var(--kopf-hoehe, 83px)); border-top: var(--kopf-hoehe, 83px) solid transparent; background-origin: border-box }

/* Menü-Spalte reicht hinter den Kopf hoch: Schwebt der Menübalken (Kopf durchsichtig), steht er auf der Fläche der Spalte
   statt über einem Streifen Seitenhintergrund. Der Innenabstand wächst um dieselbe Höhe, das Menü bleibt an seinem Platz;
   am PC oben verdeckt der volle Balken den hochgezogenen Teil. */
.seiten-spalte { margin-top: calc(-1 * var(--kopf-hoehe, 83px)); padding-top: calc(2rem + var(--kopf-hoehe, 83px)) }
@media (max-width: 900px) { .seiten-spalte { padding-top: calc(.5rem + var(--kopf-hoehe, 83px)) } }

/* ---------- Countdown (cms_countdown_html(), www/countdown.js) ----------
   Eine feste Zeile Kacheln; die Ziffern richten sich nach der Breite des Bausteins (Container-Einheiten cqw), so werden
   sie am Handy kleiner statt umzubrechen und bleiben so groß wie möglich. Farben aus dem Ton-System. */
.m-countdown { container-type: inline-size; text-align: center; --luecke: clamp(.35rem, 2.2cqw, 1.1rem) }
.m-countdown-titel { margin: 0 0 clamp(.7rem, 3cqw, 1.3rem) }
.m-countdown-uhr { display: grid; grid-template-columns: repeat(var(--felder, 4), minmax(0, 1fr)); gap: var(--luecke); margin: 0 auto; max-width: 820px }
.m-countdown-uhr[hidden], .m-countdown-ende[hidden], .m-countdown-datum[hidden] { display: none }
.m-countdown-feld { position: relative; display: grid; justify-items: center; align-content: center; min-width: 0; padding: clamp(.6rem, 3.2cqw, 1.6rem) .15rem clamp(.5rem, 2.6cqw, 1.2rem); border-radius: clamp(.55rem, 2.2cqw, 1.1rem);
    background: var(--ton-box); box-shadow: inset 0 0 0 1px var(--ton-rand), 0 10px 26px -14px rgba(16, 38, 60, .35); overflow: hidden }
/* Feiner Akzentstreifen oben auf jeder Kachel */
.m-countdown-feld::before { content: ""; position: absolute; inset: 0 0 auto; height: clamp(3px, .8cqw, 5px); background: var(--ton-akzent); opacity: .85 }
.m-countdown-zahl { display: block; font-size: 2.6rem; font-size: min(5.6rem, calc((min(100cqw, 820px) - (var(--felder, 4) - 1) * var(--luecke)) / var(--felder, 4) / 2.05));
    font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ton-akzent); white-space: nowrap }
.m-countdown-name { display: block; max-width: 100%; margin-top: .45em; font-size: clamp(.6rem, 2.5cqw, .95rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--ton-text) 68%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.m-countdown-datum { margin: clamp(.6rem, 2.6cqw, 1rem) 0 0; font-size: .9rem; color: color-mix(in srgb, var(--ton-text) 70%, transparent) }
.m-countdown-datum i { color: var(--ton-akzent); margin-right: .25rem }
.m-countdown-ende { display: block; max-width: 820px; margin: 0 auto; padding: clamp(1rem, 4cqw, 1.8rem) clamp(1rem, 4cqw, 2rem); border-radius: clamp(.6rem, 2.2cqw, 1.1rem);
    background: color-mix(in srgb, var(--ton-akzent) 12%, var(--ton-box)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton-akzent) 30%, transparent);
    color: var(--ton-text); font-size: clamp(1.15rem, 4.6cqw, 1.9rem); font-weight: 700; line-height: 1.3; animation: m-countdown-da .6s cubic-bezier(.2, .8, .2, 1) both }
@keyframes m-countdown-da { from { opacity: 0; transform: scale(.96) } }
@media (prefers-reduced-motion: reduce) { .m-countdown-ende { animation: none } }
.m-countdown { margin-block: 1.6rem 2.2rem }
/* Sehr schmal (kleine Handys, Spalten): Beschriftung enger und kleiner, damit „Sekunden“ ganz hineinpasst. */
@container (max-width: 380px) { .m-countdown-name { font-size: .56rem; letter-spacing: .02em } }

/* ==========================================================================
   Weitere Bausteine (anwendung/zusatzbausteine.php, anwendung/kommentare.php, www/bausteine.js)
   Farben aus dem Ton-System; Breiten über Container-Abfragen, damit sie auch in Spalten und Popups passen.
   ========================================================================== */

/* ---------- Hinweisbox ---------- */
.m-hinweisbox { --art: var(--ton-akzent); display: flex; gap: .9rem; align-items: flex-start; margin-block: 1.4rem; padding: 1rem 1.2rem; border-radius: .9rem;
    background: color-mix(in srgb, var(--art) 10%, var(--ton-box)); box-shadow: inset 4px 0 0 var(--art), inset 0 0 0 1px color-mix(in srgb, var(--art) 22%, transparent); color: var(--ton-text) }
.m-hinweisbox-achtung { --art: #d98a00 }
.m-hinweisbox-wichtig { --art: #c0392b }
.m-hinweisbox-erfolg { --art: #1f8a4c }
.m-hinweisbox-symbol { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--art); color: #fff; font-size: 1.05rem }
.m-hinweisbox-text { min-width: 0; padding-top: .2rem }
.m-hinweisbox-titel { display: block; margin-bottom: .2rem; font-size: 1.08rem }
.m-hinweisbox-text p { margin: 0 }
.m-hinweisbox-bis { display: block; margin-top: .35rem; color: color-mix(in srgb, var(--ton-text) 60%, transparent); font-size: .8rem }
.m-hinweisbox.ist-ausserhalb { opacity: .7; outline: 2px dashed color-mix(in srgb, var(--art) 50%, transparent); outline-offset: 3px }
.m-hinweisbox-vermerk { margin: 0 0 .4rem !important; font-size: .82rem; font-weight: 600; color: color-mix(in srgb, var(--ton-text) 70%, transparent) }

/* ---------- Nächster Termin ---------- */
.m-naechste-termine { container-type: inline-size; display: grid; gap: .7rem; margin-block: 1.4rem }
.m-naechste-termine > h2 { margin: 0 0 .3rem }
.m-naechster { --kat: var(--ton-akzent); --kat-text: var(--ton-auf-akzent); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: .8rem; border-radius: 1rem; background: var(--ton-box);
    box-shadow: inset 0 0 0 1px var(--ton-rand), 0 10px 26px -16px rgba(16, 38, 60, .35) }
.m-naechster-datum { display: grid; justify-items: center; align-content: center; width: 4.4rem; padding: .5rem .2rem; border-radius: .75rem; background: var(--kat); color: var(--kat-text); line-height: 1.05; text-align: center }
.m-naechster-datum strong { font-size: 1.7rem; font-weight: 800 }
.m-naechster-tag, .m-naechster-monat { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .92 }
.m-naechster-text { min-width: 0 }
.m-naechster-text h3 { margin: .15rem 0 .25rem; font-size: 1.12rem; line-height: 1.25 }
.m-naechster-wann { display: inline-block; padding: .08rem .55rem; border-radius: 99px; background: color-mix(in srgb, var(--kat) 16%, var(--ton-box)); color: var(--ton-text); font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase }
.m-naechster-zeile { margin: .1rem 0 0; font-size: .93rem; color: color-mix(in srgb, var(--ton-text) 82%, transparent) }
.m-naechster-zeile i { width: 1.1rem; color: var(--kat); text-align: center }
.m-naechster-kats { display: flex; flex-wrap: wrap; gap: .3rem; margin: .45rem 0 0 }
.m-termin-kat { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; color: color-mix(in srgb, var(--ton-text) 78%, transparent) }
.m-termin-kat::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--kat) }
.m-naechster.ist-gross { padding: 1.1rem; gap: 1.3rem }
.m-naechster.ist-gross .m-naechster-datum { width: 6.2rem; padding: .8rem .3rem; border-radius: 1rem }
.m-naechster.ist-gross .m-naechster-datum strong { font-size: 2.7rem }
.m-naechster.ist-gross h3 { font-size: clamp(1.2rem, 3.4cqw, 1.6rem) }
.m-naechste-link { margin: .3rem 0 0 }
@container (max-width: 420px) { .m-naechster.ist-gross { gap: .9rem; padding: .9rem } .m-naechster.ist-gross .m-naechster-datum { width: 4.8rem } .m-naechster.ist-gross .m-naechster-datum strong { font-size: 2rem } }

/* ---------- Spendenaufruf ---------- */
.m-spende-raster { display: grid; gap: 1.4rem }
.m-spende { container-type: inline-size; margin-block: 1.6rem; padding: clamp(1.1rem, 3cqw, 2rem); border-radius: 1.2rem; background: var(--ton-box);
    box-shadow: inset 0 0 0 1px var(--ton-rand), 0 16px 40px -22px rgba(16, 38, 60, .4) }
@container (min-width: 620px) { .m-spende-raster:has(.m-spende-qr) { grid-template-columns: minmax(0, 1fr) 210px; align-items: start } }
.m-spende h2 { margin: 0 0 .5rem }
.m-spende-text { margin: 0 0 1rem }
.m-spende-stand { margin: 0 0 1.1rem }
.m-spende-zahlen { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; margin-bottom: .45rem }
.m-spende-zahlen strong { font-size: clamp(1.4rem, 4.5cqw, 2rem); font-weight: 800; color: var(--ton-akzent); font-variant-numeric: tabular-nums }
.m-spende-zahlen span { color: color-mix(in srgb, var(--ton-text) 70%, transparent) }
.m-spende-zahlen b { margin-left: auto; font-size: 1.05rem }
.m-spende-balken { height: .85rem; border-radius: 99px; background: var(--ton-sanft); overflow: hidden; box-shadow: inset 0 0 0 1px var(--ton-rand) }
.m-spende-balken span { display: block; height: 100%; width: var(--anteil); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--ton-akzent) 70%, #fff), var(--ton-akzent)); transition: width 1.4s cubic-bezier(.2, .8, .2, 1) }
.m-spende.mit-einblenden .m-spende-stand:not(.ist-da) .m-spende-balken span { width: 0 }
.m-spende-stand small { display: block; margin-top: .35rem; color: color-mix(in srgb, var(--ton-text) 60%, transparent); font-size: .82rem }
.m-spende-konto { display: grid; gap: .1rem; margin: 0 0 1rem; padding: .35rem 0; border-radius: .7rem }
.m-spende-konto > div { display: grid; grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr); gap: .6rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--ton-rand) }
.m-spende-konto > div:last-child { border-bottom: 0 }
.m-spende-konto dt { font-size: .82rem; font-weight: 700; color: color-mix(in srgb, var(--ton-text) 62%, transparent) }
.m-spende-konto dd { display: flex; align-items: center; gap: .4rem; margin: 0; min-width: 0; font-weight: 600; overflow-wrap: anywhere }
.m-spende-konto dd span { min-width: 0 }
button.m-kopieren { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin: 0; padding: 0; border: 0; border-radius: .45rem; background: var(--ton-sanft); color: var(--ton-text); font-size: .8rem; box-shadow: none; cursor: pointer }
button.m-kopieren:hover { background: color-mix(in srgb, var(--ton-akzent) 18%, var(--ton-sanft)); color: var(--ton-text); transform: none; filter: none }
button.m-kopieren.ist-kopiert { background: #1f8a4c; color: #fff }
.m-spende-link { margin: 0 }
.m-spende-qr { justify-self: center; display: grid; gap: .5rem; width: min(210px, 100%); margin: 0; padding: .8rem; border-radius: 1rem; background: #fff; box-shadow: 0 8px 22px -12px rgba(16, 38, 60, .45); text-align: center; color: #172435 }
.m-spende-qr svg { display: block; width: 100%; height: auto }
.m-spende-qr figcaption { font-size: .78rem; line-height: 1.35 }
.m-spende-qr figcaption strong { display: block; font-size: .9rem }
@container (max-width: 420px) { .m-spende-konto > div { grid-template-columns: 1fr; gap: .1rem } }

/* ---------- Audio ---------- */
.m-audio { container-type: inline-size; margin-block: 1.6rem }
.m-audio > h2 { margin: 0 0 .7rem }
.m-audio-player { padding: 1rem 1.1rem; border-radius: 1.1rem; background: var(--ton-box); box-shadow: inset 0 0 0 1px var(--ton-rand), 0 14px 34px -22px rgba(16, 38, 60, .45) }
.m-audio-kopf { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem }
.m-audio-symbol { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; background: color-mix(in srgb, var(--ton-akzent) 14%, var(--ton-box)); color: var(--ton-akzent); font-size: 1.15rem }
.m-audio-jetzt { display: grid; min-width: 0 }
.m-audio-titel { font-size: 1.08rem; line-height: 1.25; overflow-wrap: anywhere }
.m-audio-unter { color: color-mix(in srgb, var(--ton-text) 62%, transparent) }
.m-audio-unter:empty { display: none }
.m-audio audio { width: 100% }
.m-audio-steuerung { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem }
.m-audio button { margin: 0; box-shadow: none; filter: none }
button.m-audio-start { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; padding: 0; border: 0; border-radius: 50%; background: var(--ton-akzent); color: var(--ton-auf-akzent); font-size: 1.15rem; cursor: pointer; transition: transform .15s ease }
button.m-audio-start:hover { background: var(--ton-akzent); color: var(--ton-auf-akzent); transform: scale(1.06) }
button.m-audio-start .fa-play { margin-left: .18rem }
.m-audio-mitte { min-width: 0 }
.m-audio-lage { --fortschritt: 0%; width: 100%; height: 1.4rem; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer }
.m-audio-lage::-webkit-slider-runnable-track { height: .4rem; border-radius: 99px; background: linear-gradient(90deg, var(--ton-akzent) var(--fortschritt), var(--ton-sanft) var(--fortschritt)) }
.m-audio-lage::-moz-range-track { height: .4rem; border-radius: 99px; background: linear-gradient(90deg, var(--ton-akzent) var(--fortschritt), var(--ton-sanft) var(--fortschritt)) }
.m-audio-lage::-webkit-slider-thumb { -webkit-appearance: none; width: 1rem; height: 1rem; margin-top: -.3rem; border: 3px solid var(--ton-box); border-radius: 50%; background: var(--ton-akzent); box-shadow: 0 1px 4px rgba(0, 0, 0, .3) }
.m-audio-lage::-moz-range-thumb { width: .8rem; height: .8rem; border: 3px solid var(--ton-box); border-radius: 50%; background: var(--ton-akzent) }
.m-audio-lage:focus-visible { outline: 2px solid var(--ton-akzent); outline-offset: 2px; border-radius: 4px }
.m-audio-zeiten { display: flex; justify-content: space-between; font-size: .78rem; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ton-text) 62%, transparent) }
.m-audio-extra { display: flex; gap: .3rem }
button.m-audio-sprung, button.m-audio-tempo { position: relative; display: grid; place-items: center; min-width: 2.3rem; height: 2.3rem; padding: 0 .4rem; border: 0; border-radius: .6rem; background: var(--ton-sanft); color: var(--ton-text); font-size: .9rem; font-weight: 700; cursor: pointer }
button.m-audio-sprung:hover, button.m-audio-tempo:hover { background: color-mix(in srgb, var(--ton-akzent) 18%, var(--ton-sanft)); color: var(--ton-text); transform: none }
button.m-audio-sprung { font-size: .8rem; font-variant-numeric: tabular-nums }
/* Allgemeine Linkfarben gelten in der Liste nicht: Titel in Textfarbe, die aktive Aufnahme in Akzentfarbe nur an der Nummer. */
.m-audio .m-audio-eintrag, .m-audio .m-audio-eintrag strong, .m-audio .m-audio-eintrag:hover { color: var(--ton-text); text-decoration: none }
@container (max-width: 440px) { .m-audio-steuerung { grid-template-columns: auto minmax(0, 1fr) } .m-audio-extra { grid-column: 1 / -1; justify-content: center } }
.m-audio-liste { list-style: none; display: grid; gap: .35rem; margin: .7rem 0 0; padding: 0 }
.m-audio-eintrag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .6rem .8rem; border-radius: .8rem; background: var(--ton-box); color: var(--ton-text); text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--ton-rand); transition: background .2s, box-shadow .2s }
.m-audio-eintrag:hover { background: color-mix(in srgb, var(--ton-akzent) 7%, var(--ton-box)); color: var(--ton-text) }
.m-audio-eintrag.ist-aktiv { background: color-mix(in srgb, var(--ton-akzent) 12%, var(--ton-box)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ton-akzent) 55%, transparent) }
.m-audio-nr { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ton-sanft); color: var(--ton-text); font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums }
.m-audio-eintrag.ist-aktiv .m-audio-nr { background: var(--ton-akzent); color: var(--ton-auf-akzent) }
.m-audio-eintrag-text { display: grid; min-width: 0 }
.m-audio-eintrag-text small { color: color-mix(in srgb, var(--ton-text) 62%, transparent) }
.m-audio-play { color: color-mix(in srgb, var(--ton-text) 45%, transparent) }
.m-audio.spielt .m-audio-eintrag.ist-aktiv .m-audio-play { color: var(--ton-akzent) }

/* ---------- Chronik ---------- */
.m-chronik { container-type: inline-size; margin-block: 1.8rem }
.m-chronik > h2 { margin: 0 0 1.2rem }
.m-chronik-liste { position: relative; list-style: none; margin: 0; padding: .4rem 0 }
.m-chronik-liste::before { content: ""; position: absolute; top: 0; bottom: 0; left: 1.05rem; width: 3px; border-radius: 3px; transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, var(--ton-akzent) 2.5rem, var(--ton-akzent) calc(100% - 2.5rem), transparent) }
.m-chronik-eintrag { position: relative; padding-left: 2.9rem; margin-bottom: 1.4rem }
.m-chronik-eintrag:last-child { margin-bottom: 0 }
.m-chronik-punkt { position: absolute; left: 1.05rem; top: 1.25rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; transform: translateX(-50%); background: var(--ton-box);
    box-shadow: inset 0 0 0 4px var(--ton-akzent), 0 0 0 5px color-mix(in srgb, var(--ton-akzent) 18%, transparent) }
.m-chronik-karte { position: relative; padding: 1.1rem 1.3rem 1.2rem; border-radius: 1rem; background: var(--ton-box); box-shadow: inset 0 0 0 1px var(--ton-rand), 0 14px 32px -20px rgba(16, 38, 60, .4) }
/* Kleine Spitze zur Linie hin */
.m-chronik-karte::before { content: ""; position: absolute; top: 1.3rem; left: -.45rem; width: .9rem; height: .9rem; background: var(--ton-box); box-shadow: -1px 1px 0 var(--ton-rand); transform: rotate(45deg) }
.m-chronik-jahr { display: inline-block; margin-bottom: .55rem; padding: .18rem .75rem; border-radius: 99px; background: var(--ton-akzent); color: var(--ton-auf-akzent); font-weight: 800; font-size: .95rem; letter-spacing: .02em; font-variant-numeric: tabular-nums }
.m-chronik-karte h3 { margin: 0 0 .4rem; font-size: 1.15rem; line-height: 1.3 }
.m-chronik-karte p { margin: 0 }
.m-chronik-bild { display: block; width: 100%; max-height: 320px; margin: .3rem 0 .75rem; border-radius: .65rem; object-fit: cover }
@container (min-width: 760px) {
    .m-chronik-liste::before { left: 50% }
    .m-chronik-eintrag { width: 50%; padding-left: 0 }
    .m-chronik-eintrag.ist-links { padding-right: 2.6rem }
    .m-chronik-eintrag.ist-rechts { margin-left: 50%; padding-left: 2.6rem }
    /* Leicht versetzt ineinander greifen, damit keine großen Lücken entstehen */
    .m-chronik-eintrag + .m-chronik-eintrag { margin-top: -2.6rem }
    .m-chronik-eintrag.ist-links .m-chronik-punkt { left: 100% }
    .m-chronik-eintrag.ist-rechts .m-chronik-punkt { left: 0 }
    .m-chronik-eintrag.ist-links .m-chronik-karte::before { left: auto; right: -.45rem; box-shadow: 1px -1px 0 var(--ton-rand) }
    .m-chronik-eintrag.ist-links .m-chronik-karte { text-align: right }
    .m-chronik-eintrag.ist-links .m-chronik-bild { margin-left: auto }
}
.m-chronik.mit-einblenden .m-chronik-eintrag { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1) }
@container (min-width: 760px) {
    .m-chronik.mit-einblenden .m-chronik-eintrag.ist-links { transform: translateX(-34px) }
    .m-chronik.mit-einblenden .m-chronik-eintrag.ist-rechts { transform: translateX(34px) }
}
.m-chronik.mit-einblenden .m-chronik-eintrag.ist-da { opacity: 1; transform: none }

/* ---------- Trennlinie (zwei Wellen wie an den Übergängen) ---------- */
/* Baustein „Abstand“ (cms_zb_abstand_html()): leerer Raum in der eingestellten Höhe, am Handy wahlweise eine eigene */
.m-abstand { display: block; height: var(--abstand, 48px); margin: 0; padding: 0 }
@media (max-width: 699px) { .m-abstand { height: var(--abstand-handy, var(--abstand, 48px)) } }
.m-trenner { color: var(--ton-akzent); margin-block: 2.2rem }
.m-trenner-klein { margin-block: 1rem }
.m-trenner-gross { margin-block: 3.6rem }
.m-trenner-dunkel { color: var(--ton-text) }
.m-trenner-sanft { color: color-mix(in srgb, var(--ton-text) 32%, transparent) }
.m-trenner-schmal { width: min(280px, 55%); margin-inline: auto }
.m-trenner svg { display: block; width: 100%; height: 24px; overflow: visible }
.m-trenner path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke }
.m-trenner .m-trenner-hinten { stroke-width: 2; opacity: .3 }

/* ---------- Kommentare ---------- */
.m-kommentare { margin-block: 2rem }
.m-kommentare h2 { display: flex; align-items: center; gap: .5rem }
.m-kommentare-zahl { display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.8rem; padding: 0 .45rem; border-radius: 99px; background: var(--ton-akzent); color: var(--ton-auf-akzent); font-size: .85rem }
.m-kommentare-meldung { padding: .8rem 1rem; border-radius: .8rem; background: color-mix(in srgb, #1f8a4c 12%, var(--ton-box)); box-shadow: inset 4px 0 0 #1f8a4c }
.m-kommentare-meldung.fehler { background: color-mix(in srgb, #c0392b 10%, var(--ton-box)); box-shadow: inset 4px 0 0 #c0392b }
.m-kommentare-liste { list-style: none; display: grid; gap: 1rem; margin: 0 0 1.4rem; padding: 0 }
.m-kommentar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem }
.m-kommentar-bild { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: hsl(var(--farbton, 210) 45% 45%); color: #fff; font-weight: 800; font-size: 1.05rem }
.m-kommentar-inhalt { min-width: 0; padding: .75rem 1rem .85rem; border-radius: 0 1rem 1rem 1rem; background: var(--ton-box); box-shadow: inset 0 0 0 1px var(--ton-rand) }
.m-kommentar-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin: 0 0 .25rem }
.m-kommentar-kopf time { font-size: .8rem; color: color-mix(in srgb, var(--ton-text) 58%, transparent) }
.m-kommentar-text { margin: 0; overflow-wrap: anywhere }
.m-kommentar-antwort { margin-top: .7rem; padding: .6rem .85rem; border-radius: .7rem; background: color-mix(in srgb, var(--ton-akzent) 8%, var(--ton-box)); box-shadow: inset 3px 0 0 var(--ton-akzent) }
.m-kommentar-antwort .m-kommentar-kopf i { color: var(--ton-akzent) }
.m-kommentare-leer { color: color-mix(in srgb, var(--ton-text) 65%, transparent) }
.m-kommentare-zu { color: color-mix(in srgb, var(--ton-text) 65%, transparent); font-size: .9rem }
.m-kommentare-formular { display: grid; gap: .7rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: 1rem; background: var(--ton-box); box-shadow: inset 0 0 0 1px var(--ton-rand) }
.m-kommentare-formular h3 { margin: 0 }
.m-kommentare-formular label:not(.checkbox) { display: grid; gap: .3rem; font-weight: 600 }
.m-kommentare-formular input:not([type="checkbox"]), .m-kommentare-formular textarea { width: 100% }
.m-kommentare-zustimmung { font-size: .9rem }
.m-kommentare-hinweis { margin: 0; font-size: .82rem; color: color-mix(in srgb, var(--ton-text) 62%, transparent) }
.m-kommentare-formular button { justify-self: start }
@media (prefers-reduced-motion: reduce) { .m-spende-balken span, .m-chronik.mit-einblenden .m-chronik-eintrag { transition: none } }

/* ---------- Tickets drucken (www/bausteine.js: #cms-druck, html.druckt-tickets) ----------
   Nur die Tickets kommen aufs Papier, zwei nebeneinander; alles andere ist beim Drucken wirklich weg (display: none),
   damit keine leeren Zusatzseiten entstehen. */
#cms-druck { display: none }
@media print {
    @page { margin: 12mm }
    html.druckt-tickets body { margin: 0; padding: 0; background: #fff }
    html.druckt-tickets body > *:not(#cms-druck) { display: none !important }
    html.druckt-tickets #cms-druck { display: block !important; color: #111; font-size: 10pt }
    .cms-druck-gruppe + .cms-druck-gruppe { margin-top: 6mm }
    .cms-druck-gruppe h2 { margin: 0 0 3mm; font-size: 13pt; break-after: avoid }
    .cms-druck-tickets { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm }
    #cms-druck .m-anm-ticket-karte { display: grid; grid-template-columns: 27mm minmax(0, 1fr); gap: 3.5mm; align-items: center; margin: 0; padding: 3.5mm; border: 1.5px solid #000; border-radius: 3mm;
        background: #fff; color: #111; box-shadow: none; font-size: 8.5pt; line-height: 1.3; break-inside: avoid; page-break-inside: avoid }
    #cms-druck .m-anm-ticket-info { gap: .6mm }
    #cms-druck .m-anm-ticket-info strong { font-size: 11pt }
}

/* ---------- Losung des Tages (anwendung/losungen.php, Verhalten in bausteine.js) ---------- */
.m-losung { position: relative; margin-block: 1.8rem; color: var(--ton-text); }
.m-losung-mitte { text-align: center; }
.m-losung-kopf { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.15rem; }
.m-losung-mitte .m-losung-kopf { justify-content: center; text-align: left; }
.m-losung-symbol { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--ton-akzent); color: var(--ton-auf-akzent); font-size: 1.05rem; box-shadow: 0 8px 20px -10px var(--ton-akzent); }
.m-losung-titel { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.m-losung-datum { margin: .1rem 0 0; font-size: .88rem; color: color-mix(in srgb, var(--ton-text) 62%, transparent); }
.m-losung-buehne { overflow: hidden; touch-action: pan-y; }
.m-losung-inhalt { display: grid; gap: 1.15rem; }
.m-losung-text { margin: 0; }
.m-losung-text blockquote { margin: 0; font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-size: 1.2rem; line-height: 1.6; }
.m-losung-text figcaption { margin-top: .45rem; font-size: .9rem; font-weight: 700; letter-spacing: .02em; color: var(--ton-akzent); }
.m-losung-text figcaption::before { content: '— '; opacity: .6; }
.m-losung-text.ist-lehrtext { padding-top: 1.15rem; border-top: 1px solid var(--ton-rand); }
.m-losung-mitte .m-losung-text.ist-lehrtext { border-image: linear-gradient(90deg, transparent, var(--ton-rand) 25%, var(--ton-rand) 75%, transparent) 1; }
.m-losung-einleitung { font-style: italic; opacity: .78; }
.m-losung-betont { font-style: normal; letter-spacing: .14em; }
.m-losung-nav { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1.3rem; }
.m-losung-links .m-losung-nav { justify-content: flex-start; }
.m-losung-pfeil, .m-losung-heute { appearance: none; border: 1.5px solid var(--ton-rand); background: transparent; color: var(--ton-text); cursor: pointer; font: inherit; transition: background .2s, color .2s, border-color .2s, transform .15s, opacity .2s; }
.m-losung-pfeil { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-size: .9rem; }
.m-losung-heute { height: 2.6rem; padding: 0 1rem; border-radius: 99px; font-size: .88rem; font-weight: 600; display: inline-flex; align-items: center; gap: .45rem; }
.m-losung-pfeil:hover:not(:disabled), .m-losung-heute:hover { background: var(--ton-akzent); border-color: var(--ton-akzent); color: var(--ton-auf-akzent); }
.m-losung-pfeil:active:not(:disabled) { transform: scale(.93); }
.m-losung-pfeil:disabled { opacity: .3; cursor: default; }
.m-losung-pfeil:focus-visible, .m-losung-heute:focus-visible { outline: 2px solid var(--ton-akzent); outline-offset: 2px; }
.m-losung[aria-busy="true"] .m-losung-nav { opacity: .7; }
.m-losung-quelle { margin: 1.2rem 0 0; font-size: .82rem; line-height: 1.5; color: color-mix(in srgb, var(--ton-text) 72%, transparent); }
.m-losung-quelle a { text-decoration: underline; text-underline-offset: .15em; }
.m-losung [hidden] { display: none !important; }
.m-losung-quelle a { color: inherit; }
.m-losung.ist-anderer-tag .m-losung-datum { color: var(--ton-akzent); font-weight: 600; }

/* Karte: Fläche mit Akzentstreifen und großem Anführungszeichen im Hintergrund */
.m-losung-karte { padding: clamp(1.3rem, 3.5vw, 2.2rem); border-radius: 1.2rem; background: var(--ton-box); border: 1px solid var(--ton-rand); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .35); overflow: hidden; isolation: isolate; }
.m-losung-karte::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--ton-akzent), color-mix(in srgb, var(--ton-akzent) 35%, transparent)); }
.m-losung-karte::after { content: '\201C'; position: absolute; z-index: -1; right: .15em; top: -.12em; font: 700 9rem/1 Georgia, serif; color: var(--ton-akzent); opacity: .08; pointer-events: none; }
/* Großes Zitat: ohne Fläche, größere Schrift */
.m-losung-zitat { padding-block: .6rem; }
.m-losung-zitat .m-losung-text blockquote { font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.5; }
.m-losung-zitat .m-losung-text:not(.ist-lehrtext) blockquote::before { content: '\201E'; color: var(--ton-akzent); margin-right: .05em; }
.m-losung-zitat .m-losung-text:not(.ist-lehrtext) blockquote::after { content: '\201C'; color: var(--ton-akzent); margin-left: .05em; }
.m-losung-zitat .ist-lehrtext blockquote { font-size: clamp(1.1rem, 2vw, 1.3rem); }
/* Schlicht: wie ein Textabschnitt */
.m-losung-schlicht .m-losung-symbol { width: 2.1rem; height: 2.1rem; font-size: .85rem; }
.m-losung-schlicht .m-losung-text blockquote { font-size: 1.08rem; }
@container (max-width: 520px) { .m-losung-text blockquote { font-size: 1.08rem; } }
@media (max-width: 520px) { .m-losung-karte::after { font-size: 6rem; } }

/* ---------- Fahrgemeinschaften (anwendung/fahrgemeinschaften.php, Verhalten in bausteine.js) ---------- */
.m-fg { margin-block: 1.8rem; color: var(--ton-text); }
.m-fg [hidden] { display: none !important; }
.m-fg-kopf { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.m-fg-symbol { flex: none; width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; background: var(--ton-akzent); color: var(--ton-auf-akzent); font-size: 1.25rem; box-shadow: 0 10px 22px -12px var(--ton-akzent); }
.m-fg-titel { margin: 0; line-height: 1.2; }
.m-fg-ziel { margin: .15rem 0 0; display: flex; flex-wrap: wrap; gap: .1rem .6rem; color: color-mix(in srgb, var(--ton-text) 75%, transparent); }
.m-fg-ziel strong { color: var(--ton-text); }
.m-fg-tage { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .3rem; margin-bottom: 1rem; scrollbar-width: thin; }
.m-fg-tage a { flex: none; padding: .45rem .85rem; border-radius: 99px; border: 1.5px solid var(--ton-rand); color: var(--ton-text); text-decoration: none; font-size: .9rem; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.m-fg-tage a:hover, .m-fg-tage a.ist-aktiv { background: var(--ton-akzent); border-color: var(--ton-akzent); color: var(--ton-auf-akzent); }
.m-fg-meldung { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: .8rem; background: color-mix(in srgb, #1d9a57 14%, transparent); border-left: 4px solid #1d9a57; font-weight: 600; }
.m-fg-meldung.ist-fehler { background: color-mix(in srgb, #d2412f 13%, transparent); border-left-color: #d2412f; }
/* Nicht angemeldet */
.m-fg-gast { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.3rem; border-radius: 1rem; background: var(--ton-box); box-shadow: inset 0 0 0 1px var(--ton-rand); }
.m-fg-gast > i { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ton-akzent) 18%, transparent); color: var(--ton-akzent); font-size: 1.05rem; }
.m-fg-gast strong { font-size: 1.1rem; }
.m-fg-gast p { margin: .3rem 0 .8rem; }
.m-fg-zahlen { display: flex; flex-wrap: wrap; gap: .5rem; }
.m-fg-zahlen span { padding: .25rem .75rem; border-radius: 99px; font-size: .88rem; box-shadow: inset 0 0 0 1px var(--ton-rand); }
/* Liste */
.m-fg-filter { display: inline-flex; gap: .25rem; padding: .25rem; margin-bottom: .4rem; border-radius: 99px; background: var(--ton-box); box-shadow: inset 0 0 0 1px var(--ton-rand); }
.m-fg-filter button { appearance: none; border: 0; background: transparent; color: var(--ton-text); font: inherit; font-size: .88rem; font-weight: 600; padding: .4rem .9rem; border-radius: 99px; cursor: pointer; }
.m-fg-filter button[aria-pressed="true"] { background: var(--ton-akzent); color: var(--ton-auf-akzent); }
.m-fg-abschnitt { display: flex; align-items: center; gap: .5rem; margin: 1.2rem 0 .6rem; font-size: 1.05rem; }
.m-fg-abschnitt span { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 99px; background: var(--ton-akzent); color: var(--ton-auf-akzent); font-size: .8rem; }
.m-fg-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.m-fg-karte { display: grid; grid-template-columns: 2.8rem 1fr; gap: .9rem; padding: 1rem 1.1rem; border-radius: 1rem; background: var(--ton-box); box-shadow: inset 0 0 0 1px var(--ton-rand), 0 12px 28px -24px rgba(0, 0, 0, .35); }
.m-fg-karte.ist-gesuch { box-shadow: inset 0 0 0 1px var(--ton-rand), inset 4px 0 0 color-mix(in srgb, var(--ton-akzent) 55%, transparent); }
.m-fg-karte.ist-eigen { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ton-akzent) 70%, transparent); }
.m-fg-karte.ist-voll { opacity: .62; }
.m-fg-bild { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: hsl(var(--farbton, 210) 45% 45%); color: #fff; font-weight: 800; font-size: 1.1rem; }
.m-fg-inhalt { min-width: 0; }
.m-fg-inhalt > p { margin: 0 0 .3rem; }
.m-fg-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.m-fg-richtung { padding: .15rem .6rem; border-radius: 99px; font-size: .78rem; font-weight: 700; background: color-mix(in srgb, var(--ton-akzent) 16%, transparent); }
.m-fg-wo, .m-fg-plaetze { font-size: .95rem; }
.m-fg-wo span { margin-left: .6rem; white-space: nowrap; }
.m-fg-wo i, .m-fg-plaetze > i { color: var(--ton-akzent); width: 1.1em; }
.m-fg-plaetze { display: flex; align-items: center; gap: .55rem; font-weight: 600; }
.m-fg-punkte { display: inline-flex; gap: .25rem; }
.m-fg-punkte i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--ton-akzent); }
.m-fg-punkte i.ist-belegt { background: color-mix(in srgb, var(--ton-text) 22%, transparent); }
.m-fg-extras { list-style: none; margin: .2rem 0 .4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.m-fg-extras li { padding: .15rem .55rem; border-radius: 99px; font-size: .8rem; box-shadow: inset 0 0 0 1px var(--ton-rand); }
.m-fg-hinweis { font-size: .92rem; color: color-mix(in srgb, var(--ton-text) 80%, transparent); }
.m-fg-leer, .m-fg-klein { color: color-mix(in srgb, var(--ton-text) 68%, transparent); }
.m-fg-leer { font-style: italic; }
.m-fg-klein { font-size: .85rem; }
/* Anfrage: eine Zeile mit Personen, Nachricht, Knopf */
.m-fg-anfrage { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.m-fg-anfrage select { flex: 0 0 auto; }
.m-fg-anfrage input { flex: 1 1 12rem; min-width: 0; }
.m-fg-anfrage button { flex: none; }
.m-fg-stand { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-top: .6rem; padding: .55rem .8rem; border-radius: .7rem; background: color-mix(in srgb, var(--ton-akzent) 10%, transparent); font-size: .92rem; }
.m-fg-stand.ist-zugesagt { background: color-mix(in srgb, #1d9a57 14%, transparent); }
.m-fg-stand.ist-zugesagt i { color: #1d9a57; }
.m-fg-stand.ist-abgesagt { opacity: .75; }
.m-fg-knopf { display: inline; margin: 0; }
.m-fg-link { appearance: none; border: 0; background: none; padding: 0; color: inherit; font: inherit; font-size: .88rem; font-weight: 600; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.m-fg-kontakt { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; }
.m-fg .m-fg-kontakt a { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 99px; background: color-mix(in srgb, var(--ton-akzent) 14%, transparent); color: var(--ton-text); text-decoration: none; font-size: .85rem; font-weight: 600; }
.m-fg .m-fg-kontakt a:hover { background: var(--ton-akzent); color: var(--ton-auf-akzent); }
/* Eigene Einträge */
.m-fg-anfragen { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .45rem; }
.m-fg-anfragen > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; padding: .6rem .8rem; border-radius: .7rem; box-shadow: inset 0 0 0 1px var(--ton-rand); }
.m-fg-anfragen > li.ist-offen { background: color-mix(in srgb, var(--ton-akzent) 9%, transparent); }
.m-fg-anfragen em { display: block; font-size: .88rem; color: color-mix(in srgb, var(--ton-text) 75%, transparent); }
.m-fg-anfragen .m-fg-kontakt { flex-basis: 100%; margin: 0; }
.m-fg-antwort { display: flex; gap: .4rem; }
.m-fg-antwort .button { padding: .4rem .85rem; font-size: .88rem; }
.m-fg-zugesagt { color: #1d9a57; font-weight: 700; font-size: .88rem; }
.m-fg-eigen-fuss { margin-top: .7rem; }
.m-fg .button-zweit { background: transparent; color: var(--ton-text); box-shadow: inset 0 0 0 1.5px var(--ton-rand); }
/* Neuer Eintrag: ein Formular mit Umschalter */
.m-fg details > summary { list-style: none; cursor: pointer; }
.m-fg details > summary::-webkit-details-marker { display: none; }
.m-fg-neu { margin-top: 1.4rem; }
.m-fg-neu > summary { display: inline-flex; align-items: center; gap: .5rem; }
.m-fg-neu[open] > summary { opacity: .7; }
.m-fg-formular { display: grid; gap: .85rem; margin-top: .8rem; padding: 1.2rem; border-radius: 1rem; background: var(--ton-box); box-shadow: inset 0 0 0 1px var(--ton-rand); animation: m-fg-auf .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes m-fg-auf { from { opacity: 0; transform: translateY(-6px); } }
.m-fg-art { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: .3rem; border-radius: .9rem; background: color-mix(in srgb, var(--ton-text) 6%, transparent); }
.m-fg-art label { position: relative; cursor: pointer; }
.m-fg-art input { position: absolute; opacity: 0; pointer-events: none; }
.m-fg-art span { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .65rem .8rem; border-radius: .7rem; font-weight: 700; text-align: center; transition: background .2s, color .2s, box-shadow .2s; }
.m-fg-art input:checked + span { background: var(--ton-akzent); color: var(--ton-auf-akzent); box-shadow: 0 8px 18px -12px var(--ton-akzent); }
.m-fg-art input:focus-visible + span { outline: 2px solid var(--ton-akzent); outline-offset: 2px; }
.m-fg-formular .nur-gesuch { display: none; }
.m-fg-formular:has(input[name="art"][value="gesuch"]:checked) .nur-gesuch { display: inline; }
.m-fg-formular:has(input[name="art"][value="gesuch"]:checked) .nur-angebot { display: none; }
.m-fg-formular label:not(.checkbox):not(.m-fg-chip) { display: grid; gap: .3rem; font-weight: 600; font-size: .92rem; }
.m-fg-formular small { font-weight: 400; color: color-mix(in srgb, var(--ton-text) 65%, transparent); }
.m-fg input:not([type="checkbox"]):not([type="radio"]), .m-fg select { width: 100%; padding: .6rem .75rem; border: 1.5px solid var(--ton-rand); border-radius: .65rem; background: color-mix(in srgb, var(--ton-box) 60%, #fff); color: var(--ton-text); font: inherit; font-weight: 400; }
.m-fg-anfrage select { width: auto; }
.m-fg input:focus, .m-fg select:focus { outline: 2px solid var(--ton-akzent); outline-offset: 1px; border-color: var(--ton-akzent); }
.m-fg-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .7rem; }
.m-fg-extrawahl { display: flex; flex-wrap: wrap; gap: .4rem; }
.m-fg-chip { position: relative; cursor: pointer; }
.m-fg-chip input { position: absolute; opacity: 0; pointer-events: none; }
.m-fg-chip span { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 99px; font-size: .88rem; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--ton-rand); transition: background .2s, color .2s, box-shadow .2s; }
.m-fg-chip input:checked + span { background: var(--ton-akzent); color: var(--ton-auf-akzent); box-shadow: none; }
.m-fg-chip input:focus-visible + span { outline: 2px solid var(--ton-akzent); outline-offset: 2px; }
.m-fg-mehr > summary { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .92rem; }
.m-fg-mehr > summary::after { content: '▸'; opacity: .6; }
.m-fg-mehr[open] > summary::after { content: '▾'; }
.m-fg-kontaktwahl { display: grid; gap: .5rem; margin-top: .6rem; }
.m-fg-kontaktzeile { display: grid; grid-template-columns: 9rem 1fr; gap: .5rem; }
.m-fg-zustimmung { font-size: .85rem; }
@media (max-width: 560px) { .m-fg-karte { grid-template-columns: 1fr; } .m-fg-bild { display: none; } .m-fg-kontaktzeile, .m-fg-art { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .m-fg-formular { animation: none; } }

/* ---------- Bild und Text nebeneinander (cms_bild_text_paare() in kern.php) ----------
   Bild in Größe S oder M direkt vor/nach einem Text: ab 600px Bausteinbreite nebeneinander, darunter untereinander.
   S: Bild ein Drittel, Text zwei Drittel; M: halbe-halbe. Die Reihenfolge im Editor bestimmt links und rechts. */
.m-bildtext { container-type: inline-size; }
.m-bildtext-raster { display: grid; gap: clamp(1rem, 3cqw, 2.4rem); align-items: center; }
.m-bildtext-raster > .m-con { margin: 0; max-width: none; min-width: 0; }
.m-bildtext .m-img { margin: 0; }
@container (min-width: 600px) {
  /* Nur nebeneinander füllt das Bild seine Spalte; untereinander behält es seine übliche Größe. */
  .m-bildtext .m-img [class^="m-img-size-"] img { width: 100%; max-width: 100%; }
  .m-bildtext-s.bild-links .m-bildtext-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .m-bildtext-s.bild-rechts .m-bildtext-raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .m-bildtext-m .m-bildtext-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Anmelden auf der Website: Nebenknöpfe „Passwort vergessen“ und „Registrieren“ (cms_anmeldeseite()) */
.sonderseite-knoepfe { display: grid; gap: .55rem; margin-top: 1rem; }
.sonderseite-knopf-zweit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.1rem; border-radius: .6rem; box-shadow: inset 0 0 0 1.5px var(--ton-rand, #d6dee6); color: inherit; font-weight: 600; text-decoration: none; transition: box-shadow .2s, color .2s; }
.sonderseite-knopf-zweit:hover { box-shadow: inset 0 0 0 1.5px var(--ton-akzent, #176b9d); color: var(--ton-akzent, #176b9d); }
.sonderseite-formular button i { margin-right: .35rem; }

/* ---------- Finanzen (anwendung/finanzen.php, Verhalten in bausteine.js) ---------- */
.m-fin { margin-block: 1.8rem; padding: clamp(1.3rem, 3.5vw, 2.2rem); border-radius: 1.3rem; background: var(--ton-box); box-shadow: inset 0 0 0 1px var(--ton-rand), 0 20px 44px -30px rgba(0, 0, 0, .35); color: var(--ton-text); container-type: inline-size; }
.m-fin-kopf { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.m-fin-symbol { flex: none; width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; background: var(--ton-akzent); color: var(--ton-auf-akzent); font-size: 1.3rem; box-shadow: 0 10px 22px -12px var(--ton-akzent); }
.m-fin-titel { margin: 0; line-height: 1.2; }
.m-fin-zeitraum { margin: .15rem 0 0; color: color-mix(in srgb, var(--ton-text) 65%, transparent); font-size: .92rem; }
.m-fin-text { margin: 0 0 1.2rem; }
.m-fin-oben { display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; gap: clamp(1rem, 4cqw, 2.5rem); align-items: center; }
@container (max-width: 560px) { .m-fin-oben { grid-template-columns: 1fr; justify-items: center; } .m-fin-oben .m-fin-zahlen { width: 100%; } }
/* Ring */
.m-fin-ring { position: relative; width: 100%; max-width: 15rem; aspect-ratio: 1; }
.m-fin-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.m-fin-ring circle { fill: none; stroke-width: 13; }
.m-fin-spur { stroke: color-mix(in srgb, var(--ton-text) 9%, transparent); }
.m-fin-bogen { stroke: var(--farbe); stroke-linecap: butt; stroke-dasharray: 0 400; stroke-dashoffset: var(--start); transition: stroke-dasharray 1.3s cubic-bezier(.2, .8, .2, 1); }
.m-fin.ist-sichtbar .m-fin-bogen, .m-fin:not([data-fin-js]) .m-fin-bogen { stroke-dasharray: var(--laenge) 400; }
.m-fin-mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.m-fin-mitte strong { font-size: clamp(1.9rem, 6cqw, 2.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.m-fin-mitte > span { color: color-mix(in srgb, var(--ton-text) 65%, transparent); font-size: .9rem; }
/* Kennzahlen */
.m-fin-zahlen { display: grid; gap: .6rem; }
.m-fin-balken-huelle + .m-fin-legende, .m-fin-zahlen + .m-fin-balken-huelle { margin-top: 1.2rem; }
.m-fin-als-balken .m-fin-zahlen { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.m-fin-zahl { display: grid; gap: .15rem; padding: .8rem 1rem; border-radius: .9rem; background: color-mix(in srgb, var(--ton-text) 4%, transparent); }
.m-fin-zahl-titel { font-size: .85rem; color: color-mix(in srgb, var(--ton-text) 70%, transparent); }
.m-fin-zahl-titel i { color: var(--ton-akzent); width: 1.1em; }
.m-fin-zahl strong { font-size: clamp(1.2rem, 3.6cqw, 1.55rem); font-variant-numeric: tabular-nums; }
.m-fin-zahl.ist-fehlt { background: color-mix(in srgb, #e6a100 16%, transparent); }
.m-fin-zahl.ist-fehlt i { color: #c98a00; }
.m-fin.ist-gedeckt .m-fin-zahl.ist-fehlt, .m-fin-zahl.ist-mehr { background: color-mix(in srgb, #1d9a57 15%, transparent); }
.m-fin.ist-gedeckt .m-fin-zahl.ist-fehlt i, .m-fin-zahl.ist-mehr i { color: #1d9a57; }
.m-fin-balken + .m-fin-balken-skala { margin-top: .45rem; }
.m-fin .m-fin-zahlen:has(+ .m-fin-balken-huelle) { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
/* Balken */
.m-fin-balken { display: flex; height: 1.4rem; border-radius: 99px; overflow: hidden; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ton-text) 7%, transparent) 0 8px, color-mix(in srgb, var(--ton-text) 12%, transparent) 8px 16px); }
.m-fin-teil { width: 0; background: var(--farbe); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.m-fin-teil + .m-fin-teil { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ton-box) 70%, transparent); }
.m-fin.ist-sichtbar .m-fin-teil, .m-fin:not([data-fin-js]) .m-fin-teil { width: var(--breite); }
.m-fin-balken-skala { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; color: color-mix(in srgb, var(--ton-text) 65%, transparent); }
.m-fin-balken-skala b { color: var(--ton-text); font-variant-numeric: tabular-nums; }
/* Legende */
.m-fin-legende { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.m-fin-legende li { display: grid; grid-template-columns: .75rem minmax(0, 1fr) auto; grid-template-areas: "punkt name betrag" "mini mini anteil"; gap: .2rem .6rem; align-items: center; padding: .6rem .8rem; border-radius: .8rem; box-shadow: inset 0 0 0 1px var(--ton-rand); }
.m-fin-punkt { grid-area: punkt; width: .75rem; height: .75rem; border-radius: 50%; background: var(--farbe); }
.m-fin-name { grid-area: name; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-fin-betrag { grid-area: betrag; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.m-fin-anteil { grid-area: anteil; white-space: nowrap; font-size: .82rem; color: color-mix(in srgb, var(--ton-text) 60%, transparent); min-width: 2.6rem; line-height: 1; text-align: right; }
.m-fin-mini { grid-area: mini; height: .3rem; border-radius: 99px; background: color-mix(in srgb, var(--ton-text) 8%, transparent); overflow: hidden; }
.m-fin-mini i { display: block; height: 100%; width: 0; background: var(--farbe); border-radius: inherit; transition: width 1.1s .3s cubic-bezier(.2, .8, .2, 1); }
.m-fin.ist-sichtbar .m-fin-mini i, .m-fin:not([data-fin-js]) .m-fin-mini i { width: var(--anteil); }
.m-fin-notiz { margin: 1.1rem 0 0; font-size: .9rem; color: color-mix(in srgb, var(--ton-text) 75%, transparent); }
.m-fin-aktion { margin: 1.2rem 0 0; }
.m-fin-aktion .button { display: inline-flex; align-items: center; gap: .5rem; }
@media (prefers-reduced-motion: reduce) { .m-fin-bogen, .m-fin-teil, .m-fin-mini i { transition: none; } }

/* Warnbalken ohne HTTPS (anwendung/verbindung.php): auf mittig aufgebauten Sonderseiten fest am oberen Rand. */
body.sonderseite > .cms-https-hinweis, body.scan-seite > .cms-https-hinweis { position: fixed !important; top: 0; left: 0; right: 0; }

/* Finanzen: Ausgaben (anwendung/finanzen.php) liegen schraffiert über dem Ende der Einnahmen. */
.m-fin-balken { position: relative; }
.m-fin-abzug { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, #c0392b 0 4px, var(--ton-box) 4px 7px); opacity: 0; transition: opacity .5s 1s; }
.m-fin.ist-sichtbar .m-fin-abzug, .m-fin:not([data-fin-js]) .m-fin-abzug { opacity: 1; }
.m-fin-ring .m-fin-abzug-grund, .m-fin-ring .m-fin-abzug { transition-delay: .9s; }
.m-fin-zahl-detail { color: color-mix(in srgb, var(--ton-text) 65%, transparent); font-size: .8rem; font-variant-numeric: tabular-nums; }
.m-fin-legende li.ist-ausgabe .m-fin-punkt { border-radius: 2px; height: .22rem; }
.m-fin-legende li.ist-ausgabe .m-fin-mini i { background: repeating-linear-gradient(-45deg, #c0392b 0 3px, transparent 3px 5px); }
.m-fin-legende li.ist-ausgabe .m-fin-betrag { color: color-mix(in srgb, #c0392b 70%, var(--ton-text)); }

/* Blog-Karten (Ansicht mit „Mehr anzeigen“): Bild füllt die ganze linke Spalte (cover), Überschriften im Anriss
   einheitlich in H3-Größe. Die Beitragsseite /blog/… bleibt davon unberührt. */
.m-blog-karte .m-blog-bild { position: relative; display: block; align-self: stretch; overflow: hidden }
.m-blog-karte .m-blog-bild img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover }
.m-blog-anriss :is(.m-hl1 h1, .m-hl2 h2, .m-hl3 h3, h1, h2, h3) { font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.18; letter-spacing: -.01em }
.m-blog-anriss :is(.m-hl1, .m-hl2, .m-hl3) { margin-top: 1.4rem }
@media (max-width: 700px) {
    .m-blog-karte .m-blog-bild { aspect-ratio: 16 / 10 }
    .m-blog-karte .m-blog-bild img { max-height: none }
}