/* ==========================================================================
   Kirchgemeinde Rabenstein – user.css (komplett, ersetzt die bisherige Datei)
   Inhalt: 0 Variablen · 1 Schriften · 2 Raster · 3 Header · 4 Desktop-Menü
           5 Mobilmenü · 6 Orange Streifen (Position top-a) · 7 Footer
           8 Buttons & Flipbook · 9 iCagenda
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Variablen – hier werden Farben und Maße zentral angepasst
   -------------------------------------------------------------------------- */
:root {
    --kg-red: #B32B2C;
    --kg-red-dark: #862008;
    --kg-yellow: #FFA800;
    --kg-purple: #993365;
    --kg-blue: #009FE3;

    /* Seitenrand: Abstand Logo links = Abstand letzter Menüpunkt rechts = Inhaltsrand */
    --kg-gutter: clamp(16px, 2vw, 40px);

    /* Header: Logohöhe und Innenabstand (groß / beim Scrollen) */
    --kg-logo-h: 90px;
    --kg-logo-h-s: 50px;
    --kg-pad: 15px;
    --kg-pad-s: 6px;
    --kg-header-h: calc(var(--kg-logo-h) + 2 * var(--kg-pad));

    /* Abstand zwischen den Menüpunkten */
    --kg-menu-gap: 50px;

    /* Abstand zwischen Streifen/Header und Seiteninhalt */
    --kg-content-top: 40px;
}

@media (max-width: 1680px) { :root { --kg-logo-h: 80px; --kg-menu-gap: 40px; } }
@media (max-width: 1540px) { :root { --kg-logo-h: 70px; --kg-menu-gap: 35px; } }
@media (max-width: 1430px) { :root { --kg-logo-h: 64px; --kg-logo-h-s: 44px; } }
@media (max-width: 740px)  { :root { --kg-logo-h: 52px; --kg-logo-h-s: 38px; --kg-pad: 12px; } }


/* --------------------------------------------------------------------------
   1. Schriften & Typografie
   (Pfade unverändert; Empfehlung: Ordner fonts langfristig nach
   media/templates/site/<template>/fonts/ verschieben)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'FreeSans';
    src: url('/templates/cassiopeia/fonts/FreeSans.woff2') format('woff2'),
         url('/templates/cassiopeia/fonts/FreeSans.woff') format('woff'),
         url('/templates/cassiopeia/fonts/FreeSans.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* MyriadPro gab es auf der alten Seite nur als Bold (Überschriften) */
@font-face {
    font-family: 'MyriadPro';
    src: url('/templates/cassiopeia/fonts/MyriadPro.woff2') format('woff2'),
         url('/templates/cassiopeia/fonts/MyriadPro.woff') format('woff'),
         url('/templates/cassiopeia/fonts/MyriadPro.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html {
    scroll-padding-top: var(--kg-header-h); /* Anker-Sprünge landen nicht unter dem Header */
}

body {
    background: #fff;
    color: #000;
    font-family: 'FreeSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16pt;
    font-weight: 400;
    padding-top: var(--kg-header-h); /* Platz für den fixierten Header */
}

h1, h2, h3 {
    font-family: 'MyriadPro', 'FreeSans', sans-serif;
    font-weight: 700;
    margin: 10px 0;
}
h1 { font-size: 35pt; color: var(--kg-red); }
h2 { font-size: 27pt; }
h3 { font-size: 23pt; }

/* Die alte Seite hatte keine Link-Unterstreichung */
a,
a:not([class]) {
    color: var(--kg-red-dark);
    text-decoration: none;
}
a:hover,
a:not([class]):hover {
    color: var(--kg-red);
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   2. Seitenraster
   Nur die beiden äußeren Spalten des Cassiopeia-Rasters bekommen den
   Seitenrand. Vollbreite Elemente (Slider, Streifen, Footer) laufen weiter
   bis zum Fensterrand. Annahme: keine linke/rechte Seitenleiste.
   -------------------------------------------------------------------------- */
.site-grid {
    grid-template-columns:
        [full-start] var(--kg-gutter)
        [main-start] minmax(0, 1fr)
        [main-end] var(--kg-gutter)
        [full-end];
    column-gap: 0;
    row-gap: 0;                     /* kein weißer Zwischenraum zwischen Slider und Streifen */
    max-width: none;
    width: 100%;
}

.container-banner,
.container-banner > *,
.container-banner .n2-section-smartslider { margin-bottom: 0; }

/* Der Abstand zum Inhalt kam vorher vom Rasterabstand, jetzt steuert ihn diese Variable */
.container-component { padding-top: var(--kg-content-top); }


/* --------------------------------------------------------------------------
   3. Header (fixiert, schrumpft beim Scrollen – Klasse .is-scrolled per JS)
   position/top mit !important: Cassiopeias "Sticky Header" setzt über
   Bootstrap (.position-sticky) selbst ein !important.
   -------------------------------------------------------------------------- */
body .container-header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;

    margin: 0;
    padding: var(--kg-pad) var(--kg-gutter);
    background: #fff;
    background-image: none;
    border: 0;
    box-shadow: none;
    transition: padding .3s ease, box-shadow .3s ease;
}

body .container-header.is-scrolled {
    padding-top: var(--kg-pad-s);
    padding-bottom: var(--kg-pad-s);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.container-header .grid-child {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
}

.container-header .navbar-brand { margin: 0; padding: 0; }

.container-header .brand-logo img {
    display: block;
    height: var(--kg-logo-h);
    width: auto;
    transition: height .3s ease;
}

.container-header.is-scrolled .brand-logo img {
    height: var(--kg-logo-h-s);
}

.container-header .container-nav {
    margin-left: auto;
    position: relative;
}


/* --------------------------------------------------------------------------
   4. Hauptmenü Desktop (ab 1431px) mit Flyouts
   -------------------------------------------------------------------------- */
@media (min-width: 1431px) {

    .container-header .container-nav .mod-menu {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--kg-menu-gap);
        margin: 0;
        padding: 0;
        list-style: none;
        background: transparent;
    }

    .container-header .container-nav .mod-menu > li {
        position: relative;
        margin: 0;
        padding: 10px 0;        /* "Brücke", damit das Flyout beim Hovern nicht verschwindet */
        white-space: nowrap;
    }

    .container-header .container-nav .mod-menu > li > a,
    .container-header .container-nav .mod-menu > li > .mod-menu__heading {
        display: inline-block;
        padding: 4px 0;
        color: #000;
        background: transparent;
        font-size: 1em;
        font-weight: 400;
    }

    /* Unterstreichungen/Pfeile des Cassiopeia-Menüs ausschalten */
    .container-header .container-nav .mod-menu > li > a::before,
    .container-header .container-nav .mod-menu > li > a::after,
    .container-header .container-nav .mod-menu .mm-toggler {
        display: none;
        content: none;
    }

    /* Hover und aktiver Menüpunkt */
    .container-header .container-nav .mod-menu > li:hover > a,
    .container-header .container-nav .mod-menu > li > a:hover,
    .container-header .container-nav .mod-menu > li.active > a,
    .container-header .container-nav .mod-menu > li.current > a,
    .container-header .container-nav .mod-menu > li > a[aria-current="page"] {
        color: var(--kg-red);
    }

    /* Flyout */
    .container-header .container-nav .mod-menu ul {
        display: none !important;
        position: absolute;
        top: 100%;
        left: -10px;
        min-width: 190px;
        width: max-content;
        margin: 0;
        padding: 5px 0 5px 10px;
        list-style: none;
        text-align: left;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
        z-index: 2000;
    }

    .container-header .container-nav .mod-menu li:hover > ul,
    .container-header .container-nav .mod-menu li:focus-within > ul {
        display: block !important;
    }

    /* letztes Flyout (Kontakt) wächst nach links, wird also nicht abgeschnitten */
    .container-header .container-nav .mod-menu > li:last-child > ul {
        left: auto;
        right: 0;
        padding-right: 10px;
    }

    .container-header .container-nav .mod-menu ul li {
        margin: 0;
        padding: 0 0 5px;
    }

    .container-header .container-nav .mod-menu ul li a {
        display: block;
        padding: 0;
        color: #000;
        white-space: nowrap;
        background: transparent;
    }

    .container-header .container-nav .mod-menu ul li a:hover,
    .container-header .container-nav .mod-menu ul li.active > a {
        color: var(--kg-red);
    }
}


/* --------------------------------------------------------------------------
   5. Mobilmenü (bis 1430px) – wird von user.js aufgebaut
   Ohne JavaScript bleibt das normale Menü sichtbar (Klasse html.kg-js).
   -------------------------------------------------------------------------- */
@media (max-width: 1430px) {
    html.kg-js .container-header .container-nav { display: none; }
    html.kg-js .kg-burger { display: flex; }
}

/* Menü-Symbol: drei Striche + senkrechtes "Menü" */
.kg-burger {
    display: none;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 6px 4px;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.kg-burger span {
    display: block;
    width: 3px;
    height: 44px;
    background: var(--kg-red);
    transition: height .3s ease;
}
.kg-burger:hover span:nth-child(2),
.kg-burger:focus-visible span:nth-child(2) { height: 26px; }
.kg-burger::after {
    content: "Menü";
    margin-left: 3px;
    color: var(--kg-red);
    font-size: 13px;
    line-height: 15px;
    writing-mode: vertical-lr;
    text-orientation: upright;
}

/* Abdunkelung und Panel */
.kg-overlay {
    position: fixed;
    inset: 0;
    z-index: 1900;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s .3s;
}

.kg-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    width: min(380px, 85vw);
    background: #fff;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s ease, visibility 0s .35s;
}

html.kg-menu-open { overflow: hidden; }
html.kg-menu-open .kg-overlay {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
html.kg-menu-open .kg-panel {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
}

.kg-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 0 0 auto;
    padding: 16px 20px;
}
.kg-close {
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
.kg-title {
    margin-left: auto;
    text-align: right;
    font-family: 'MyriadPro', 'FreeSans', sans-serif;
    font-weight: 700;
    font-size: 1.1em;
    line-height: 1.2;
}

/* Ebenen: Hauptmenü + je eine Ebene pro Untermenü, die von rechts hereinfährt */
.kg-viewport { position: relative; flex: 1 1 auto; overflow: hidden; }

.kg-level {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 10px 0;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s ease, visibility 0s .35s;
}
.kg-level.is-root,
.kg-level.is-open {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
}

.kg-level li { margin: 0; padding: 0; }

.kg-level a,
.kg-level button,
.kg-level .kg-head > span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    border: 0;
    background: none;
    color: #000;
    font: inherit;
    text-align: right;
    text-decoration: none;
    cursor: pointer;
}
.kg-level a:hover,
.kg-level button:hover,
.kg-level .is-active > a,
.kg-level .is-active > button { color: var(--kg-red); }

.kg-level .kg-head a,
.kg-level .kg-head > span {
    font-family: 'MyriadPro', 'FreeSans', sans-serif;
    font-weight: 700;
    border-bottom: 1px solid #eee;
}

.kg-level .kg-back button { justify-content: flex-start; }

/* Pfeile */
.kg-chev {
    display: inline-block;
    width: 9px;
    height: 9px;
    border: solid currentColor;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
}
.kg-back .kg-chev { transform: rotate(-135deg); }

@media (prefers-reduced-motion: reduce) {
    .container-header,
    .container-header .brand-logo img,
    .kg-overlay,
    .kg-panel,
    .kg-level,
    .kg-burger span { transition: none; }
}


/* --------------------------------------------------------------------------
   6. Orange Streifen unter dem Slider (Modulposition top-a)
   Im Backend: Termine-Modul und Button-Modul auf Position "top-a" legen,
   Menüzuweisung nur Startseite. Termine stehen links, Buttons rechts.
   -------------------------------------------------------------------------- */
.container-top-a {
    grid-column: 1 / -1;            /* vollbreit, auch über die Seitenränder */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 30px;
    margin: 0;
    padding: 40px var(--kg-gutter);
    background: var(--kg-yellow);
    color: #000;
}

/* Cassiopeia verpackt die Module als "Card" – Rahmen/Titel entfernen */
.container-top-a .card {
    flex: 0 1 auto;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.container-top-a .card-body { padding: 0; }
.container-top-a .card-header { display: none; }

/* Buttons direkt im orangen Streifen anordnen – unabhängig vom Modul-Markup:
   Alle Verpackungen (Card, Modul-Div, Absätze des Editors), die Buttons enthalten,
   werden "aufgelöst" (display: contents). Die Buttons werden so selbst zu
   Flex-Elementen des Streifens und stehen nebeneinander. */
.container-top-a *:has(.kg-btn):not(.kg-btn),
.container-top-a *:has(.video, .livestream):not(.video):not(.livestream) {
    display: contents;
}

/* Reihenfolge und Position: Video links, Livestream ganz rechts
   (Termine bleiben links, weil sie die Standard-Reihenfolge 0 haben) */
.kg-btn-video,
.container-top-a .video { order: 1; margin-left: auto; }
.kg-btn-live,
.container-top-a .livestream { order: 2; margin-left: 0; }

/* Buttons: im Quelltext des Moduls <a class="kg-btn kg-btn-video"> bzw. kg-btn-live */
.kg-btn,
.container-top-a .video a,
.container-top-a .livestream a {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: clamp(200px, 15vw, 300px);
    margin: 0;
    padding: 10px 15px;
    border: 0;                      /* kein Rand, beim Hover nur die Fläche wird weiß */
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
    line-height: 1.35;
    text-align: center;
    transition: background-color .2s ease, color .2s ease;
}

/* Video = lila, Livestream = cyan; beim Hover weiß mit farbiger Schrift */
.kg-btn-video,
.container-top-a .video a { background: var(--kg-purple); }
.kg-btn-live,
.container-top-a .livestream a { background: var(--kg-blue); }

.kg-btn-video:hover,
.container-top-a .video a:hover { background: #fff; color: var(--kg-purple); }
.kg-btn-live:hover,
.container-top-a .livestream a:hover { background: #fff; color: var(--kg-blue); }

/* Terminliste im Streifen (iC Event List Pro): 3 Termine nebeneinander,
   je Termin Datumskasten + Titel (max. 2 Zeilen) + Zeit.
   Selektoren nach dem tatsächlichen HTML des Moduls (.default_eventlist,
   .ic-event-div, .ic-date-div, .iceventlist-title, .ic-datetime-div). */
.container-top-a { hyphens: none; }

/* Leerer Platzhalter aus dem Button-Modul (<div class="moduletable termine-placeholder" style="flex: 1;">)
   würde sich sonst die Hälfte des freien Platzes nehmen – ausblenden. */
.container-top-a .termine-placeholder { display: none !important; }

/* Termin-Modul nimmt den freien Platz links ein. flex-basis 0 verhindert, dass die
   Buttons in eine zweite Zeile rutschen. Erst wenn der Streifen schmaler als
   ca. 1400px wird, bekommen die Termine eine eigene Zeile (wie auf der alten Seite). */
.container-top-a > :not(:has(.kg-btn, .video, .livestream)):not(.video):not(.livestream) {
    flex: 1 1 0;
    min-width: min(100%, 640px);
}

/* Alle Verpackungen des Moduls über die volle Breite, ohne Float/Zentrierung */
.container-top-a *:has(.default_eventlist) {
    float: none;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
}

/* Die drei Terminspalten; bei zu wenig Platz rutscht eine in die nächste Zeile */
.container-top-a :has(> .default_eventlist) {
    display: flex;
    flex-wrap: wrap;
    gap: 20px clamp(20px, 2.5vw, 50px);
}
.container-top-a .default_eventlist {
    float: none;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}
.container-top-a .default_eventlist hr { display: none; }

/* Ein Termin: Datumskasten | Titel | Zeit */
.container-top-a .default_eventlist .ic-event-div {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.container-top-a .default_eventlist .ic-event-div > .ic-block:nth-child(2) { flex: 0 1 auto; min-width: 0; }
.container-top-a .default_eventlist .ic-event-div > .ic-block:nth-child(3) { flex: 0 0 auto; margin-left: 8px; }
.container-top-a .default_eventlist .ic-date-img-box { flex: 0 0 auto; }

/* Datumskasten: rot (Farbe kommt aus dem Modul), Tag über Monat */
.container-top-a .default_eventlist .ic-date-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: clamp(76px, 6vw, 100px);
    height: clamp(76px, 6vw, 100px);
    margin: 0;
    padding: 0;
    border-radius: 0;
    text-shadow: none;
    text-align: center;
}
.container-top-a .default_eventlist .ic-day,
.container-top-a .default_eventlist .ic-month {
    font-size: clamp(22px, 1.7vw, 30px);
    line-height: 1.05 !important;
}

/* Titel: weiß, höchstens zwei Zeilen */
.container-top-a .default_eventlist .iceventlist-title { margin: 0; padding: 0; }
.container-top-a .default_eventlist .iceventlist-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: #fff !important;
    font-size: clamp(12pt, 1.1vw, 16pt) !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
}
.container-top-a .default_eventlist .iceventlist-title a:hover { color: var(--kg-red-dark) !important; }

/* Zeit: weiß, "Zeit:" über der Uhrzeit */
.container-top-a .default_eventlist .ic-datetime-div {
    color: #fff !important;
    font-size: clamp(11pt, 1vw, 14pt) !important;
    line-height: 1.25 !important;
    white-space: nowrap;
}
.container-top-a .default_eventlist .ic-datetime-label {
    display: block;
    font-weight: bold;
}

@media (max-width: 980px) {
    .container-top-a .default_eventlist { flex-basis: 100%; }
}

/* Bis 1500px (Mobilmenü-Bereich): Termine in einer eigenen Zeile über die volle Breite
   (3 Spalten), darunter die beiden Buttons mittig nebeneinander.
   Der Streifen wird dafür zum Raster mit zwei gleich breiten Spalten:
   Video-Button rechtsbündig in der linken, Livestream linksbündig in der rechten. */
@media (max-width: 1500px) {
    .container-top-a {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px 30px;
        align-items: center;
    }
    .container-top-a > :not(:has(.kg-btn, .video, .livestream)):not(.video):not(.livestream) {
        grid-column: 1 / -1;
        min-width: 0;
    }
    .container-top-a .video,
    .kg-btn-video { grid-column: 1; justify-self: end; margin: 0; }
    .container-top-a .livestream,
    .kg-btn-live { grid-column: 2; justify-self: start; margin: 0; }

    .kg-btn,
    .container-top-a .video a,
    .container-top-a .livestream a {
        display: block;
        width: clamp(220px, 30vw, 360px);
    }
}

/* Unter 880px: alles untereinander, Buttons über die volle Breite */
@media (max-width: 880px) {
    .container-top-a { grid-template-columns: 1fr; }
    .container-top-a .video,
    .container-top-a .livestream,
    .kg-btn-video,
    .kg-btn-live { grid-column: 1; justify-self: stretch; }
    .kg-btn,
    .container-top-a .video a,
    .container-top-a .livestream a { width: auto; }
}

/* --------------------------------------------------------------------------
   7. Footer (orange, bündig mit dem Inhalt)
   Cassiopeia gibt die Footer-Module direkt als Kinder von .grid-child aus,
   daher werden die Spalten über die Reihenfolge angesprochen:
   1. Adresse (45 %) · 2. Menü · 3. rechtsbündiges Modul
   -------------------------------------------------------------------------- */
footer.container-footer {
    grid-column: 1 / -1;
    margin: 50px 0 0;
    padding: 35px 0;
    background: var(--kg-yellow);
    background-image: none;
    border: 0;
    box-shadow: none;
    color: #000;
}

footer.container-footer .grid-child {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px 40px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--kg-gutter);    /* gleiche Kante wie Logo und Inhalt */
}

footer.container-footer .grid-child > * { margin: 0; }
footer.container-footer .grid-child > :first-child { flex: 0 0 45%; }
footer.container-footer .grid-child > :last-child:not(:first-child) {
    margin-left: auto;
    text-align: right;
}

footer.container-footer,
footer.container-footer p,
footer.container-footer li { color: #000; }

footer.container-footer p { margin: 0 0 .6em; }

footer.container-footer a { color: #000; text-decoration: none; }
footer.container-footer a:hover,
footer.container-footer li.active > a { color: var(--kg-red); }

footer.container-footer ul,
footer.container-footer .mod-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
}
footer.container-footer li { margin: 0; padding: 0; }

@media (max-width: 880px) {
    footer.container-footer .grid-child > * {
        flex: 1 1 100%;
        margin-left: 0;
        text-align: left;
    }
}


/* --------------------------------------------------------------------------
   8. Buttons & Flipbook (unverändert übernommen)
   -------------------------------------------------------------------------- */
main button.ui.button,
.btn-primary,
main p.readmore {
    background-color: #B32B2C !important;
    border-color: #B32B2C !important;
    color: #ffffff !important;
}

main button.ui.button:hover,
.btn-primary:hover,
main p.readmore:hover {
    background-color: #ffffff !important;
    color: #B32B2C !important;
}

.mod-flipbook,
div[id*="flipbook"],
.real3d-flipbook-container {
    min-height: 550px !important;
    width: 100% !important;
    background: transparent !important;
}

.flipbook-ui-btn.fa-2x {
    font-size: 1.1rem !important;
}

.flipbook-ui-btn {
    padding: 4px 8px !important;
    margin: 2px !important;
    height: auto !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flipbook-ui-btn.flipbook-ui-page input#flipbook_book_page_number {
    height: 26px !important;
    padding: 2px 4px !important;
    font-size: 0.9rem !important;
    width: 45px !important;
    display: inline-block !important;
    margin-right: 4px !important;
}

.flipbook-ui-btn span {
    font-size: 0.85rem !important;
}


/* --------------------------------------------------------------------------
   9. iCagenda: Hauptseiten (Termine / Gottesdienste / Kalender)
   (unverändert übernommen; im orangen Streifen gelten die Regeln aus Abschnitt 6)
   -------------------------------------------------------------------------- */
.ic-event-title a,
.ic-calendar-event-title a,
.ic_eventlist .iceventlist-title a {
    color: #000000 !important;
    font-weight: bold !important;
}

.ic-event-title a:hover,
.ic-calendar-event-title a:hover,
.ic_eventlist .iceventlist-title a:hover {
    color: #B32B2C !important;
}

/* Datums-Badges / Kalender-Markierungen im Rot der Kirchgemeinde */
.ic-date-div,
.ic-calendar .ic-event-date,
.ic-event-date-box,
.ic-button,
.ic-search-btn {
    background-color: #B32B2C !important;
    color: #ffffff !important;
    border-color: #B32B2C !important;
}

.ic-button:hover,
.ic-search-btn:hover {
    background-color: #ffffff !important;
    color: #B32B2C !important;
}

.ic-calendar-table .ic-today {
    background-color: #FFA800 !important;
    color: #000000 !important;
}

.ic-search-div,
.ic-filters-div {
    background-color: #f8f9fa !important;
    border: 1px solid #eeeeee !important;
    border-radius: 6px !important;
    padding: 15px !important;
    margin-bottom: 25px !important;
}