/*
 * Grundgerüst für die Module von Flexportal v2 (Laufschrift, Slider, Suche). Farben und Schriften
 * kommen weiterhin aus den Stylesheets der Website; hier steht nur, was für die Funktion nötig ist.
 */

/* Laufschrift */
.ticker { position: relative; display: block; overflow: hidden; min-height: 1.6em; max-width: 100%; }
.ticker .css_marquee { position: absolute; inset: 0 auto 0 0; display: block; white-space: nowrap; animation: fp2-ticker 60s linear infinite; }
.ticker:hover .css_marquee { animation-play-state: paused; }
@keyframes fp2-ticker { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
    .ticker .css_marquee { position: static; animation: none; white-space: normal; }
}

/* Slider */
[data-slider].is-ready { position: relative; }
[data-slider] .sliderContainer { position: relative; overflow: hidden; }
[data-slider] .mask { overflow: hidden; }
[data-slider] .mover { display: flex; transition-property: transform; transition-timing-function: cubic-bezier(.65, 0, .35, 1); will-change: transform; }
[data-slider] .mover > .slide { flex: 0 0 100%; min-width: 0; }
[data-slider].slider--vertical .mover { flex-direction: column; }
[data-slider].slider--vertical .mask { height: var(--slider-height, auto); }
[data-slider].slider--fade .mover { display: grid; }
[data-slider].slider--fade .mover > .slide { grid-area: 1 / 1; transition: opacity .8s; }
.flex_slider .btn { position: absolute; top: 50%; z-index: 2; width: 36px; height: 36px; margin-top: -18px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; }
.flex_slider .btn.prev { left: 8px; }
.flex_slider .btn.next { right: 8px; }
.flex_slider .btn.prev::before { content: "‹"; font-size: 22px; line-height: 36px; }
.flex_slider .btn.next::before { content: "›"; font-size: 22px; line-height: 36px; }
.flex_slider .bullets { display: flex; justify-content: center; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.flex_slider .bullets button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .25); cursor: pointer; }
.flex_slider .bullets li.active button { background: rgba(0, 0, 0, .7); }

/* Suche */
.mod_search { position: relative; }
.mod_search #searchResult:not([hidden]) { position: absolute; z-index: 50; left: 0; right: 0; margin-top: 4px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); border-radius: 6px; overflow: hidden; }
.mod_search #searchResult .row { display: grid; grid-template-columns: 65px 1fr; grid-template-rows: auto 1fr; column-gap: 10px; padding: 8px; color: inherit; text-decoration: none; }
.mod_search #searchResult .row:hover, .mod_search #searchResult .row:focus { background: rgba(0, 0, 0, .05); }
.mod_search #searchResult .row img { grid-row: span 2; border-radius: 4px; }
.mod_search #searchResult .row h5 { margin: 0; }
.mod_search #searchResult .row p { margin: 2px 0 0; font-size: .9em; }
.mod_search .highlight { font-weight: 700; }

/* Mondkalender: Phasen m0 (Neumond) … m4 (Vollmond) … m7 aus der Mondphase */
.cte_moon_calendar .cal table { border-collapse: collapse; }
.cte_moon_calendar .cal td { text-align: center; vertical-align: top; }
.cte_moon_calendar .cal td.today { font-weight: 700; }
.cte_moon_calendar span.moon { --lit: #f3e7b3; --off: #3a3a52; display: inline-block; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--off); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.cte_moon_calendar span.moon.m1 { background: radial-gradient(circle at 25% 50%, var(--off) 62%, var(--lit) 63%); }
.cte_moon_calendar span.moon.m2 { background: linear-gradient(90deg, var(--off) 50%, var(--lit) 50%); }
.cte_moon_calendar span.moon.m3 { background: radial-gradient(circle at 0% 50%, var(--off) 45%, var(--lit) 46%); }
.cte_moon_calendar span.moon.m4 { background: var(--lit); }
.cte_moon_calendar span.moon.m5 { background: radial-gradient(circle at 100% 50%, var(--off) 45%, var(--lit) 46%); }
.cte_moon_calendar span.moon.m6 { background: linear-gradient(90deg, var(--lit) 50%, var(--off) 50%); }
.cte_moon_calendar span.moon.m7 { background: radial-gradient(circle at 75% 50%, var(--off) 62%, var(--lit) 63%); }
.cte_moon_calendar .cal .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; }
.cte_moon_calendar .cal .top .btn { padding: 2px 10px; font-size: 1.3em; line-height: 1; text-decoration: none; }
.cte_moon_calendar .cal .month { font-weight: 700; }
.cte_moon_calendar .cal table { width: 100%; }