/* global styles for all pages */

:root {
    /* Gemeindespezifische Farben */
    /* Standard-Farben der Gemeinde ... */
    --color-kirche-global: #76267F;
    /* Hauptseiten = ev. Farbe */
    --color-kirche-neuengroden: #3893d9;
    --color-kirche-altengroden: #f22c1e;
    --color-kirche-fedderwarden: #f2a52b;
    --color-kirche-fedderwardergroden: #80963e;
    --color-kirche-voslapp: #245ca4;
    --color-kirche-sengwarden: #b62772;

    /* themenspezifische Farben, Bsp: Bläserkreis etc => globale Farbe verwenden ! */
    --color-kirche-blaeserkreis: var(--color-kirche-global);
    --color-kirche-chor: var(--color-kirche-global);

    /* Pastell-Farben, = ca 80% z.B. für Menü und Buttonhintergründe */
    --color-kirche-pastell-global: #ffdbfb; /* #e2b0e8; */
    --color-kirche-pastell-neuengroden: #a9d1ef;
    --color-kirche-pastell-altengroden: #f8a6a0;
    --color-kirche-pastell-fedderwarden: #f9d69f;
    --color-kirche-pastell-fedderwardergroden: #d7e1b7;
    --color-kirche-pastell-voslapp: #abc8ed;
    --color-kirche-pastell-sengwarden: #edabcd;

    /* Input-Felder */

    --bgcolor-input: #f0c6f4;
    --color-input-border: var(--color-kirche-global);

    /* Menu-Entry Colors */
    --color-menu: black;
    --color-menu-hover: white;

    --bgcolor-menu:           var(--color-kirche-pastell-global);
    --bgcolor-menu-hover:    var(--color-kirche-global); /* var(--color-kirche-pastell-global); */
    --color-gemeinde:         var(--color-kirche-global); 
    --color-gemeinde-pastell: var(--color-kirche-pastell-global);   

    --color-pagetoc: var( --color-kirche-global); 

    --font-symbols: "Font Awesome 6 Free"; /* 'FontAwesome'; */
    --fonts-logos: "Caveat";
    --fonts-links: var(--bs-body-font-family);

    /* Anpassungen bootstrap-Werte */
    --bs-body-color: black;
}

/* für Gemeinde-Icons-Titel  => Gemeinde-Zeile Headerbereich Hauptseite unten */
@font-face {
    font-family:"Caveat";
    src: url(/fileadmin/fonts/Caveat/Caveat-VariableFont_wght.woff2) format('woff2');
}



/* Anpassungen bootstrap Klassen - defaults */

/* default Farben überschreiben */
.pagination {
  --bs-pagination-active-color: white;
  --bs-pagination-active-bg: var(--color-kirche-global);
  --bs-pagination-color: var(--color-menu);
  --bs-pagination-bg: var(--color-kirche-pastell-global);
}

.text-primary {
    color: var(--color-kirche-global) !important;
}

.btn-primary {
    color: var(--color-menu);
    background-color: var(--bgcolor-menu);
    border: 1px solid var(--color-menu);
}

.btn-primary:hover {
    color: var(--color-menu-hover);
    background-color: var(--bgcolor-menu-hover);
    border: 1px solid var(--color-menu);
}

/* Abstand Page-Content zum Page-Header */
#page-content .main-content.pt-5 {
    padding-top: 0px !important;  /* default = 5 rem */
}



.jumbotron {
    padding: 0px !important;
}


/* pageheader oben rechts - Optional Top Content = Kontakt, Standort, Suchbutton */
.optContentM {
    display: flex;
    justify-content: flex-end;
}

.optContentM .serviceHotline,
.optContentM .standort {
    display: flex;
}

button.serviceHotline,
button.standort {
    border: none;
    background-color: transparent;
}

.optContentM .serviceHotlineRight,
.optContentM .standortLeft {
    text-align: left;
    padding-top: 3px;
}

.optContentM .standortLeft {
    padding-left: 15px;
}

.optContentM .serviceHotlineLeft p {
    text-align: right;
    padding-right: 8px;
}

.optContentM .standortRight p {
    text-align: left;
    padding-left: 8px;
    padding-right: 15px;
}

.optContentM .serviceHotlineLeft p,
.optContentM .standortRight p {
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 0;
    color: #fff;
}

div#expanded-content-top {
    background-color: var(--color-kirche-global);
}

/* Suche-Icon im Seitenkopf oben rechts */
.fa-magnifying-glass:before {
    content: "\f002"; /* Lupe */
    font-family: var(--font-symbols);
    font-style: normal;
    font-size: 27px;
    color: var(--color-kirche-global);
}

.displaynone {
    display: none;
}

#expanded-content-top .serviceHotlineRight,
#expanded-content-top .standortLeft {
    padding-left: 15px;
    margin-top: auto;
    margin-bottom: auto;
}

.optContentM {
    margin-top: 1rem;
}


/* Suche-Icon oben rechts */
.optContentM .suche {
    background-color: #fff;
    border: 0px;
    margin-left: 15px;
    /* Abstand zum Text NORD GEMEINDEN */
    cursor: pointer;
    border-radius: 28px;
    width: 37px;
    height: 37px;
    margin-top: auto;
    margin-bottom: auto;
    padding: 0px;
}

/* TODO: cleanup ... */
@media (min-width: 992px) {
    .optContentM .suche {
        display: block;
    }
}


/* Searchbox */
form#searchbox {
    position: absolute;
    right: 1%;
}

form#searchbox::before {
    content: "";
    position: absolute;
    top: -17px;
    left: 90%;
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 9px;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent var(--bs-border-color) transparent;
}

#searchbox button.btn.btn-outline-dark {
    border-color: var(--bs-border-color);
    background-color: white;
}

form#searchbox::after {
    content: "";
    position: absolute;
    top: -16px;
    left: 90%;
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 9px;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent var(--bs-border-color) transparent;
}



/* Mega-Menu */

.dropdown-menu.mega-dropdown-menu.remove-lg.show {
    width: 100vw;
    margin: 1em calc(50% - 50vw);
    margin-top: var(--bs-dropdown-spacer);
}

.navbar-nav a.nav-link {
    color: #fff;
}

.navbar-nav .nav-link.parent-active {
    border-bottom: solid white 2px;
}




/* Kirchen-Logo-Balken unterer Header-Rand - nur für globale Startseite verwendet
   - aktuell keine Verlinkung merh zu kirchenspezifischen Seiten
*/

/* kein link aktiv
.gemeinden a:hover {
    
}
*/

.gemeinden {
    position: relative;
    z-index: 999;
    width: 100%;
    border: 1px solid transparent;
    margin-top: -1rem;
    border-radius: 40px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0.5em;
    /* padding-bottom: 15px; */
    background-color: var(--color-gemeinde);
}

/* Logo-Texte */
.gemeinden a,
.gemeinden p {
    color: #fff;
    margin-top: 5px; 
    font-family: var(--fonts-logos);
    font-size: 1.5rem;
    padding-top:0px;
    margin-bottom: 0px;
    text-decoration: none;
}

/* responsiv definitions */
/**
@media (max-width: 1320px) {
    .gemeinden {
        width: 1140px;
    }
}

@media (max-width: 1140px) {
    .gemeinden {
        width: 936px;
    }
}

@media (max-width: 936px) {
    .gemeinden {
        width: 696px;
    }
}

**/
@media (max-width: 696px) {
    .gemeinden a,
    .gemeinden p {
        font-size: 1.5rem; /* 27px; */
    }
}

/* auf mobiles werden die Kirchenlogos zweireihig dargestellt */
@media (max-width: 575px) {
    .gemeinden {
        width:100%;
    }
    .gemeinden a,
    .gemeinden p {  
        font-size: 0.85rem; 
        width:100%;
        margin-top:-30px;
        margin-bottom:5px;
    }
    .gemeinden a img {
        max-width: 30px; /* aber nie größer als 180px */
        height: auto;
        margin-top: 30px;
    }
}



/* Startseiten-slider Bilder */

/* Bildunterschrift  - wie badge rounded-pill secondary */
/* .startpage-slider .carousel-caption p */
.main-content .carousel-caption h5,
.startpage-slider .carousel-caption h5 {
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-pill) !important;
    color:black !important;
    background-color:var(--color-kirche-pastell-global);
    display:inline-block;
    padding: 0.75em;
    font-size: 0.75em;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}


/* .startpage-slider .carousel-caption p { */
.startpage-slider .carousel-caption h5 {
    font-weight:bold;    
    line-height:1;
    margin-bottom:0;
}
.startpage-slider .carousel-caption h5>p {
    margin:0;
}
/* keine BU's nur Titel anzeigen */
.startpage-slider .carousel-caption>p {
    display: none;
}

/* Titel in inlne bildergalerien - BESCHREIBUNG NICHT ANZEIGEN */
.bildergalerie .carousel-caption>p {
    display:none;
}

/* bootstrap gallery in Texte & Medien */

/* vor / zurück Buttons */
/* TODO: check: gilt das auch für News-Galery oben rechts in Details ?) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--bgcolor-menu-hover);
    color: var(--bgcolor-menu);
    border-radius: 4px;
}


/* Startseitenkopfbild */

.startpage-slider picture img,
.startpage-slider picture source {
    width:100%;
    max-width:3440px;
}
/* TODO: responsive Werte einstellen */

/* auf inline galleries beschränken = Anzahl Spalten = Bootstrap Gallery
   Bilder haben gleiche Höhen (landscape und portrait)
*/

/* Bilder in News-Detail-Bildergalerie */
/* Bild-Titel */
#carousel-news .carousel-caption>p {
    display:none;
}

/* Bildbeschreibung */
#carousel-news .carousel-caption>h5,
#carousel-news .carousel-caption>h5 p {
    color: black;
    font-size: 0.8rem;
    border:none;
    border-radius: 0px;
    background-color: white;
    display:inline-block;
    text-align: left;
    white-space: wrap;
    vertical-align: baseline;
    width: 100%;
}


/* Link-Buttons auf der Startseite, Bsp "KITA" 
Icon weiss mit transparentem Hintergrund 512x512 px
per direktem HTML 
*/

.tiles {
    width: 100%;
    margin-bottom: 20px;
}

.tiles img {
    margin-top: 1rem;
}

.tiles button {
    width: 100%;
    font-weight: bold;
    color: #fff;
    text-align: center;
    border: 0px;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
}

/* für Button Kulturkirche */
.tiles button.color1 {
    background-color:rgba(3, 213, 209, 0.768);
}

/* Hintergrund-Farben direkt über Farbklassen im HTML-Code setzen */


/* Abschnitts-Überschriften im page-Content: H2, H3, H4, H5 etc */

.main-content h3[id^="heading"],
.main-content h4[id^="heading"],
.main-content header > h3,
.main-content header > h4 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
/* alle UNTERTITEL in lila?, kann als alternativ auch in schwarz statt in grau  -*/
.subheader {
    color: black !important;
}

/* Unterüberschrift bei List-Seiten */
.lead {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--bs-heading-color);
    @media (max-width: 574px) {
        font-size: 0.75rem;
    }
}
/* innerhalb News-Artikel */
.news-single .lead {
    font-weight: normal;
}

/* um Texte und Header in Lila darstellen zu können */
.lila-h2 h2,
.lila h2,
.lila h3,
.lila h4,
.lila h5,
h2 .lila,
h3 .lila,
h4 .lila,
h5 .lila,
p .lila {
    color: var(--color-kirche-global); 
}

.lila-bg {
    background-color: var(--color-kirche-pastell-global); 
}
/* Bildergalerien in Seitenbereich  */
.main-content .gallery .carousel picture img {
  display: block !important;
  width: 100%;
  height: 600px !important;  /* Feste Höhe */
  object-fit: contain;       /* Komplettes Bild sichtbar, passt sich an */
  object-position: center;   /* Zentriert */
  background: #f8f8f8;       /* Grauer Hintergrund für leere Flächen */
}


/* interne Hilfetexte */

.hilfetext {
    color: green;
}
.hilfetext .border {
    border-color: var(--color-kirche-global) !important;
    border-width: 3px !important;
}
.hilfetext figcaption {
    color: var(--color-kirche-global) !important;
    font-size:0.9rem !important;
}


/* Picture/Source behält responsive srcset */
/* .bildergalerie  */
.main-content .gallery .carousel picture source {
  height: 600px;
}

/* Responsive Höhen TODO: ggf noch anzupassen */
@media (max-width: 768px) {
  .bildergalerie .gallery .carousel picture img {
    height: 400px !important;
  }
}

@media (max-width: 575px) {
  .bildergalerie .gallery .carousel picture img {
    height: 300px !important;
  }
}


/* Schlagzeilen-Box / Disc TODO! */
/* für alle Gemeinde-Startseiten anstelle der Gemeinde-Toolbar */
/* => Bootstrap extra Class eintragen: kopfschlagzeile */

/*
.kopfschlagzeile-container {
    width: 100%;
}

.kopfschlagzeile {
    display: flex;
    width: 1320px;
    position: relative;
    z-index: 999;
    margin-top: -4rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1em;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    border: 1px solid transparent;
    border-radius: 40px;
    background-color: var(--color-gemeinde-pastell);
    color: var(--color-kopfschlagzeile);
    justify-content: center;
    align-items: center;
}

.kopfschlagzeile a {
    color: var(--color-kopfschlagzeile);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 8px;
}

.kopfschlagzeile a:hover {
    background-color: var(--color-gemeinde);
    color: var(--color-menu-hover);
}

***/

/* News-Liste (z.b. Aktuelles) */
/* .news-list-* Klassen sind hart im FLUID-Partial Custom1 in Section NewsItem gesetzt
*/

.news-list-item {
    padding-bottom: 3rem !important;
    border-bottom: 1px solid var(--color-kirche-global);
    margin-bottom: 1.5rem !important;
}

.news-list-item-title {

}

.news-list-item-content {
    padding-left: 1.5em;
}

.news-list-item-link {
    float: left !important;
    padding-top:1em;
    padding-left: 1em;
}

.news-list-author,
.news-list-date {
    font-style: italic;
}

/* Author-Unterschrift Artikel-Detail */
.news-list-author::before {

}

a.card {
    text-decoration: none;
}


.bottomnews figure.image img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.bottomnews .card-body p.text-end {
    text-align: left !important;
}

.bottomnews .card-body p {
    position: relative;
    /*top: 14rem;*/
}

.bottomnews span.news-list-category,
.bottomnews span.news-list-date {
    /*display: none;*/
}

.topnews h3.card-title,
.bottomnews h3.card-title {
    font-size: 1.25rem;
}


/* Bootstrap Header anpassen */
h4.text-secondary {
    color: black !important;
    font-size: 1.5rem !important;
}

/* Seiteninhaltsverzeichnis = extra HTML-Element */
/* Einträge = H3 + H4 */
/* TODO: container right aligned */
/* TODO: Test handy-Format */

#pagetoc {
    border: 1px solid;
    border-radius: 5px;
    border-color: var(--color-pagetoc);
    color: var(--color-pagetoc);
}

#pagetoc h2 {
    font-size: 120%;
    font-weight: bold;
    padding-left: 5px;
    padding-top: 5px;
}

/** not yet used
#pagetoc-list {
}
.pagetoc-li-H3 {
}
*/
.pagetoc-li-H4 {
    margin-left: 15px;
}

/** TODO: ggf noch anzupassen, Icon wie für .toc ? **/
.pagetoc-link {
    text-decoration: none;
    color: var(--color-gemeinde);
}

/* TODO: prüfen, ob nach Fusion der Gemeinden noch einzelne Farben benötigt werden */
/* TODO: sonst: AUCH FÜR ALLE ANDREN GEMEINDEN DEFINIEREN */
/***
.color-kirche-voslapp #pagetoc,
.color-kirche-voslapp .pagetoc-link {
    border-color: var(--color-kirche-voslapp);
    color: var(--color-kirche-voslapp);
}
***/


/* Startseite untere news-zeile, rechte Subnavigationsbereich */
@media (min-width: 1400px) {
    .topnews figure.image {
        height: 15rem;
    }
}

@media (max-width: 1400px) and (min-width: 1200px) {
    .topnews figure.image {
        height: 13rem;
    }
}

@media (max-width: 1199px) and (min-width: 1023px) {
    .topnews figure.image {
        height: 11rem;
    }
}

@media (max-width: 1022px) and (min-width: 992px) {
    .topnews figure.image {
        height: 16rem;
    }
}

@media (max-width: 992px) and (min-width: 768px) {
    .topnews figure.image {
        height: 12rem;
    }
}

@media (max-width: 767px) and (min-width: 574px) {
    .topnews figure.image {
        height: 18rem;
    }
}

@media (max-width: 574px) and (min-width: 542px) {
    .topnews figure.image {
        height: 19rem
    }
}

@media (max-width: 541px) and (min-width: 465px) {
    .topnews figure.image {
        height: 17rem
    }

    .topnews .card-body {
        padding-top: 0px;
    }
}

@media (max-width: 465px) and (min-width: 396px) {
    .topnews figure.image {
        height: 15rem
    }

    .topnews .card-body {
        padding-top: 0px;
    }
}

@media (max-width: 395px) and (min-width: 3px) {
    .topnews figure.image {
        height: 13rem
    }

    .topnews .card-body {
        padding-top: 0px;
    }
}

/*
@media (max-width: 395px) {
*/
.dropdown-item.active, .dropdown-item:active {
    color: var(--color-menu);
    background-color: var(--bgcolor-menu);
}
/* 
} 
*/

.card {
    border-radius: 4px;
    overflow: hidden;
}

.topnews .card-body {
    padding-bottom: 3rem !important;
}

.topnews .card-body p {
    /* position: relative; */
    top: 9rem;
}

@media (min-width: 1400px) {
    .topnews .card-body p {
        top: 8rem;
    }
}

@media (max-width: 1200px) and (min-width: 1023px) {
    .topnews .card-body p {
        top: 11rem;
    }
}

.topnews .card-body p.text-end {
    text-align: left !important;
}



/* Page-Footer - alle Seiten */

/* socail media icons */
/* TODO: auf einigen Seiten falsch platziert => liegt am Typo3-Element, nicht an CSS ! */
.footersocials {
    height: 100%;
}

.footersocials .gallery {
    height: 100%;
}

.footersocials .gallery div {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.borderfooter {
    border-bottom: 10px solid var(--color-kirche-global);
    /* was  #70327a;*/
}

footer#page-footer {
    background-color: #fff !important;
}

.footer .gallery>div>div {
    margin-bottom: 5px !important;
}

/* goto top button in pagefooter */
.goto-top {
    position: fixed !important;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--color-kirche-global);
    color: black !important;
    border-radius: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-symbols) !important;
    font-size: 1rem !important;
    font-weight:900 !important;
    /* content: "\f3bf"; /* Symbol */ /* TODO: ggf IMG verwenden ! */
    text-decoration: none;
    opacity: 0.2;
    transition: all 1s ease;
    visibility: visible;
    z-index: 9999;
    @media (max-width: 576px) {
        right: 5px;
    }
}

.goto-top:hover {
    transform: scale(1.1);
    opacity: 1;
    color: white !important;
}
/* 
.goto-top.show {
    opacity: 0.8;
    visibility: visible;
} */

/* Smooth Scroll */
/* html {
    scroll-behavior: smooth;
} */




@media (max-width: 1199px) {
    .tiles {
        position: relative;
        height: 150px;
    }

    .tiles img {
        width: 60px;
        height: auto;
    }

    .tiles button {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
    }
}

#expanded-content-top .row.gx-0.mb-4 {
    margin-bottom: 0px !important;
}

footer#page-footer {
    margin-top: 3rem;
}

#page-footer p,
#page-footer a {
    color: var(--color-kirche-global);
    /* was  #773578; */
}

p.back-to-top.st-block {
    display: none;
}

@media (max-width: 768px) {
    .footersocials .gallery div {
        justify-content: center;
    }

    main.main-content.pt-5 {
        padding-top: 6rem !important;
    }
}

@media (max-width: 576px) {
    .footersocials .col-sm {
        flex: 1 0 0%;
    }
}

@media (max-width: 991px) {
    form#searchbox {
        top: -17px;
    }
}


.main-navbarnav .dropdown-menu header h2 {
    font-size: 1rem;
}


.nav-link:focus-visible {
    box-shadow: none;
}


/* Mega-Menü */
/* BG-Farbe ist gemeindespezifisch sein => d.h. in screen-GEMEINDE.css gesetzt (übercshreibt defualt=grau) */
/* Schriftfarbe ist für alle Gemeinden gleich */

/* Mega-Menü - linker / rechter Menübereich (muss als Bootstrap extra Klasse angegeben werden */
/* linker Bereich::after
- H5 = Überschrift ohne Verlinkung, Bsp: "Mitmachen" bei "Wir für Sie"
- H4 = Eintrag mit Verlinkung als Button - Text 110%, Bsp: erste Menüeintrag "Termine" bei "Termine"
- P = Absatz = Eintrag mit Verlinkung als Button
- TD = Eintrag im rechten Menü mit tabellenausrichtung
- wenn zusätzlich internal-link: dann nicht als Button (s.u. .rightnav p a.internal-link)
*/

.leftnav p,
.leftnav h4,
.rightnav p a {
    color: var(--color-menu);
    background-color: var(--bgcolor-menu);
    border: 1px solid black;
    border-radius: 4px;
    padding: 3px;
    padding-left: 7px;
    padding-right: 7px;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
}

.rightnav p a.internal-link {
    color: var(--color-kirche-global);
    background-color: white;
    border: none;
}

.rightnav h5,
.rightnav h4,
.leftnav h5,
.leftnav h4 {
    white-space: normal;
    font-size: 110%;
}

.leftnav p {
    white-space: normal;
}

.rightnav p {
    white-space: wrap !important;
}

.leftnav h4 a,
.leftnav p a {
    color: var(--color-menu);
    text-decoration: none;
}

.rightnav p a {
    color: var(--color-menu);
    background-color: var(--bgcolor-menu);
       /* default = grau - wird gemeindespezifisch überschrieben */
       /* TODO: ggf auf lila setzen für alle */
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
}


/* links p + a, rechts nur a hervorheben */
.rightnav p a:hover {
    color:  var(--color-menu-hover);
    background-color: var(--bgcolor-menu-hover);
}

.leftnav h4:hover,
.leftnav h4:hover a,
.leftnav h4 a:hover,
.leftnav p:hover,
.leftnav p:hover a,
.leftnav p a:hover {
    color:  var(--color-menu-hover);
    background-color: var(--bgcolor-menu-hover);
}

.seitenindex a::before {
    /* TODO: CHAIN-Symbol, hover*/
}

/***
.seitenindex a.internal-link {
  background-color: var(--bgcolor-menu-hover);
  color: var(--color-menu-hover);
}
***/


/* Links */
/* internal-links (in Mega-Menü) ohne Hintergrund und Border */


.person-information a,
a.phone-link,
a.person-phone,
a.person-vcard,
a.person-email,
.news-related a,
a.download-link,
.seitenindex a, /* z.B. für ? Hilfetexte ? */
a.external-link,
.feed-items .item-content a,
a.email-link,
.feed-item-links a,
.subpage-list a.nav-link, /* Unterseiten-Listen, z.B. f. Chroniken */
a.internal-link {
    border: none;
    background-color: transparent;
    padding-right: 0.1em;
    padding-left: 0.1em;
    color: var(--color-kirche-global);
    margin-left: 0px;
    margin-right: 0px;
    /* text-decoration: underline wavy var(--color-kirche-global); */
    text-decoration: underline var(--color-kirche-global);
    text-decoration-thickness: 1px; 
    font-weight:bold;
    font-family: var(--fonts-links);
    font-style: italic;
    font-weight: bold;
    font-size: 0.9em;
    padding-right: 7px; /* 1px mehr als ::hover wg Border 1px */
    padding-left: 3px;  /* 1px mehr als ::hover wg Border 1px */
    /*  white-space: nowrap; schlecht für Mobiles */
}

/* Seiteninhaltsverzeichnis - aktuell nur Mobil */
/* links in Table of Contents für Mobile only, s.a. Seitenindex */

.toc {
    @media (max-width: 574px) {
        text-align: center;
    }
}
.toc a {
    color: var(--color-kirche-global);
    white-space: nowrap;
}
/* Links eines Inhaltsverzeichnisses */
.toc a::before {
    font-family: var(--font-symbols);
    font-weight: bolder;
    font-size:70%;
    content: "\f149\20"; /* Nav-Pfeil rechts */ /* TODO: als var defineiren, andere Symbole auch */
    padding-left:0.5rem;
    white-space: nowrap;
}
.toc a:after {
    padding-right:0.5rem;
    content: "";
}

/* A bis Z-Seite - verlinkte Icons */
.a_bis_z figcaption {
    color: var(--color-kirche-global);
    font-weight: bold;
    font-size: 95%;
    text-align: center !important;
    padding-top:1rem;
    padding-bottom: 2rem;   /* besser für mobile ansicht */ 
}

/* TODO: email-link */
.person-information a:focus,
a.person-email:focus,
a.person-vcard:focus, 
a.person-phone:focus,
a.phone-link:focus,
.feed-items .item-content a:focus,
a.email-link:focus,
.toc a:focus,
a.internal-link:focus,
a.external-link:focus,
a.download-link:focus {
    outline: 2px solid var(--color-kirche-global);
}
/* überflüssig ?
.seitenindex a,
a.download-link,
.gemeinde-links .internal-link {
    font-family: var(--fonts-links);
    text-decoration: none;
    color: var(--color-kirche-global);
    font-size: 140%;
    font-weight:bold;
    padding-left:5px;
    padding-right:5px;
} 

.subpage-list a.nav-link {
    padding-left:10px;
    padding-right:10px;
}

a.download-link,
a.external-link,
a.internal-link,
.feed-item-links a {
    font-family: var(--fonts-links);
    font-weight: bold;
    font-size: 120%;
    color: var(--color-kirche-global);
    text-decoration: none;
    border: 0px;
    border-radius: 12px;
    border: 1px solid white;
    padding: 3px;
} 
*/

.person-information a:hover,
a.person-email:hover,
a.person-vcard:hover, 
a.person-phone:hover,
a.phone-link:hover,
.news-related a:hover,
.feed-items .item-content a:hover,
.seitenindex a:hover,
a.email-link:hover,
.toc a:hover,
a.internal-link:hover,
a.download-link:hover,
a.external-link:hover,
.subpage-list a.nav-link:hover, /* Unterseiten-Listen, z.B. f. Chroniken */
.feed-item-links a:hover {
    background-color: var(--color-kirche-pastell-global);
    color: var(--color-kirche-global);

    border-radius: 12px;
    border: 1px solid  var(--color-menu-hover);
    /* padding-right: 6px;  /* 1px mehr als not-hovered wg Border 1px */
    /* padding-left: 6px;  /* 1px mehr als not-hovered wg Border 1px */
}

/* .seitenindex a::before,
.external-link::before,
.internal-link::before {
    padding-left:0px;
    padding-right:.1em;
    margin-left: 0px;
    margin-right: 0px;
} */

/* .feed-item-links a::before, ??? */
.news-related a::before,
.subpage-list a.nav-link::before { /* Unterseiten-Listen, z.B. f. Chroniken */
    font-family: var(--font-symbols);
    font-weight: 900;
    content: "\f0c1"; /* chain */
}

/* .external-link => s. bootstrap */
/* innerhalb RSS-Feeds,  z.B. von der Kulturkirche */
.feed-items .item-content a::before {
    font-family: var(--font-symbols);
    font-weight: 900;
    content: "\f35d"; /* box mit Pfeil nach aussen oben rechts */ /* TODO: als var definieren, andere Symbole auch */
}
/*
.external-link::after {
    content: " (externer Link)";
    color: var(--color-kirche-global);
    font-size:80%;
    font-style: italic;
}
*/

/* TOOD: noch benötigt ? */
.kirchen-logo-text .image-caption {
    font-family: var(--fonts-logos);
    text-decoration: none;
    color: var(--color-kirche-global);
    font-size: 140%;
    font-weight:bold;
    text-align:center !important;
}


nav#main-navbar {
    color: var(--color-menu);
    background-color: var(--color-gemeinde);
}

/* Unterüberschrift in Menü */
.main-navbarnav .dropdown-menu header h2 {
    color: var(--color-menu);
}


.dropdown-menu.mega-dropdown-menu.remove-lg.show>div {
    max-width: 1320px;
    margin: 0 auto;
}


.main-navbarnav .dropdown-menu.show .submenu .nav .nav-item a {
    border: 1px solid var(--bgcolor-menu-hover); /* was: grey;*/
    border-radius: 4px;
    padding-top: 1px;
    padding-bottom: 1px;
    margin-bottom: 10px;
}

.main-navbarnav .dropdown-menu.show .submenu .nav .nav-item {
    max-width: 100%;
}

.navbar-dark .navbar-nav .mega-dropdown-menu .nav-link:hover {
    background-color: transparent;
    color: var(--bgcolor-menu-hover); /* was: grey;*/
}

.dropdown-menu.mega-dropdown-menu.remove-lg.show {
    border-radius: 0px;
}

.navbar-nav>div>a.nav-link {
    text-transform: uppercase;
    color:white;
}





/* eigene button: btn-kirche
s.a.u. pagination selektoren für calendarize
TODO: pagination für news etc
*/


/* Ausklappbare Abschnitte */

.accordion-button {
    font-weight: bold;
}

/* Ausgeklappt - aktiv */
.accordion-button:not(.collapsed) {
    background-color: var(--bgcolor-menu-hover) !important;
    color: white !important;
}

/* OLD
input[type="date"],
input[type="text"] {
    background-color: #fffcc8;
}

*/
input {
    background-color: var(--bgcolor-input) !important;
    border-color: var(--color-input-border) !important;
    border: 1px solid;
}

input:focus {
    background-color: yellow;
    border: 3px solid;
}

.f3-widget-paginator li,
.login a,
/* .login input[type="submit"], /* ggf kann login WECH, alle Submit-Buttons gleich ! */
.btn-kirche p,
.btn-kirche p a {
    color: var(--color-menu);
    text-decoration: none;
    background-color: var(--bgcolor-input);
    border: 1px solid var(--color-menu);
    border-radius: 4px;
    white-space: wrap;
}

.calendarize .f3-widget-paginator li,
.login a,
/* .login input[type="submit"], /* ggf kann login WECH, alle Submit-Buttons gleich ! */
.btn-kirche p,
.btn-kirche p a {
    padding: 3px;
    padding-left: 7px;
    padding-right: 7px;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
}

.login {
    margin-left:0%;
    margin-bottom:1em;  
}

.login a {
    max-width:11em;
}

/* Überschrift "Abmelden" ausblenden */
.login fieldset legend {
    display:none;
}

.login h3 {
    font-size: 1.25rem;
}

.f3-widget-paginator li.page-item {
    margin-left: 0.5rem;
}

.f3-widget-paginator li.current {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.f3-widget-paginator li.active,
.f3-widget-paginator li.current,
.f3-widget-paginator li:hover,
.f3-widget-paginator li a:hover,
.btn-kirche p a:hover {
    color: var(--color-menu-hover);
    background-color: var(--bgcolor-menu-hover);
}

/* =========== */

body {
    overflow-x: hidden;
}


/* buttontext */

.buttonicon {
    /* TODO: rounded border */
}

.buttontext figcaption {
    font-size: 1.1rem;
    font-weight: bold;
    color: white !important;
    text-align: center;
    /*
    position: relative; 
    margin-top:-100px;
    padding-bottom:40px;
    */
}


/* PDF-Liste Gemeindebrief */

.gemeindebrief {

}

.gemeindebrief-image {
    /* TODO: muss responsiv gesetzt werden , image real width = 200px*/
}

.gemeindebrief-image img {
    /* TODO: muss responsiv gesetzt werden , image real width = 200px*/
    width: 200px;
    height: auto;
}

.gemeindebrief-text {
    padding-top: 20px;
    /* TODO: muss responsiv angepasst werden ?*/
}

.gemeindebrief-title {

}

.gemeindebrief-link {
    font-size: 130%;
    /* TODO: muss responsiv angepasst werden */
    font-weight: bold;
    text-decoration: none;
    color: var(--color-kirche-global);
}

.gemeindebrief-info {
    /* TODO: muss responsiv angepasst werden */
}




/* Link-Kachel = Text & Bild, Bsp: Texte und Gedichte 

Bild links 150x150..300
Keine Bilduntertitel

H3 Überschrift: lila, oben 1 Zeile Abstand

*/

.linkkachel {
    padding: 1rem;
    margin-bottom: 1rem;
}

/*
.linkkachel a {
  text-decoration: none;
}
*/

.linkkachel h3 {
    color: var(--color-kirche-global);
    /* padding-top:1rem; */
}

.linkkachel h4 {
    padding-left:1rem;
}

/* KEINE BILDUNTERSCHRIFTEN IN DIE KACHELN ÜBERNEHMEN */
.linkkachel figcaption {
    display: none;
}

/* dit & dat - Linksammlung */
.linkcards { /* container */

}
.linkcards .card-img-top {
    padding:1rem;
}

/* ********************* */

/* Unterüberschrift in Text-Elementen */
h6.subheader {
    margin-top: 10px;
    margin-bottom: 10px;
}


/* z.B. Losungsboxen auf Startseite */
.trennbox-mit-inhalt {
    background-color: var(--color-kirche-pastell-global);
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding:1.5rem;
    border: 1px solid var(--color-kirche-global);
    border-radius: 12px;
}

/* RSS-Feeds 

TODO: responsive ? 

Es muss leider für kulturkirche-Feed das gleiche FLUID-Template verwendet werden wie für OL-kirchen-feed (da mit Bildern)
verwendbare Klassen

aus Seiten-Element unter Bootstrap Extra Class setzen:
- .feed-kulturkirche 
- .feed-olkirche 
alle weiteren in den Fluid-Templates:
- .feed-image
- .feed-text
*/

.feed-copyright {
    padding-top: 10px;
    text-align: center;
}

.feed-items .row {
    margin-bottom: 1.5rem;
}

.feed-item {
    padding-bottom: 3px;
}

.feed-item-picture {
    width: 100%;
    margin-top: 5px;
    border: 0px;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
}

.feed-item-content h3 {
    font-size: 100%;
}

.feed-item-content p {
    margin-bottom: 3px;
}



/* Kulturkirche-feed - linke Bildspalte muss ausgeblendet werden, da keine Bilder geliefert werden. */

.feed-kulturkirche .feed-item-image {
    display:none;
    width:0%;
}
.feed-kulturkirche .feed-item-text {
    width:100%;
}

/* Verwenden der mitgelieferten Wordpress-Klassen */

/* HR zwischen den Feed-Items */
.feed-kulturkirche .wp-block-separator {
    color: var(--color-kirche-global);
}

.feed-kulturkirche .has-luminous-vivid-amber-color {
    font-size:1.5rem;
}

.feed-kulturkirche .has-global-color-1-color {
    font-size:1.25rem;
}

/* Header "Programm für die Woche ..." */
.feed-kulturkirche has-medium-font-size {

}

.feed-kulturkirche .wp-block-image img {
    width: 250px;
    height: auto;
}

/* Standard: untereinander (Mobile < 600px) */
.feed-kulturkirche .wp-block-columns {
  display: block;
}

/* Ab 600px: nebeneinander */
@media screen and (min-width: 600px) {
  .feed-kulturkirche .wp-block-columns {
    display: flex;
    flex-direction: row;
  }

  .feed-kulturkirche .wp-block-columns .wp-block-column {
    flex: 1 1 0;
    /* optional Abstand zwischen den Spalten */
    /* padding: 0 10px; */
  }
}

/* collapsable-Buttons, z.B für Ablagestellen gemeindeboote */


.collapsed-kirche button {
    border: 1px solid;
    border-color: var(--color-gemeinde);
    background-color: var(--color-gemeinde-pastell);
}

.collapsed-kirche button:not(.collapsed) {
    border-color: darkgrey;
    background-color: lightgray;
}



/* Gemeindefarben als Klasse bereitstellen */


.color-kirche-global {
    color: var(--color-kirche-global);
}

.color-kirche-neuengroden {
    color: var(--color-kirche-neuengroden);
}

.color-kirche-altengroden {
    color: var(--color-kirche-altengroden);
}

.color-kirche-fedderwarden {
    color: var(--color-kirche-fedderwarden);
}

.color-kirche-fedderwardergroden {
    color: var(--color-kirche-fedderwardergroden);
}

.color-kirche-voslapp {
    color: var(--color-kirche-voslapp);
}

.color-kirche-sengwarden {
    color: var(--color-kirche-sengwarden);
}


.bgcolor-kirche-global {
    background-color: var(--color-kirche-global);
}

.bgcolor-kirche-neuengroden {
    background-color: var(--color-kirche-neuengroden);
}

.bgcolor-kirche-altengroden {
    background-color: var(--color-kirche-altengroden);
}

.bgcolor-kirche-fedderwarden {
    background-color: var(--color-kirche-fedderwarden);
}

.bgcolor-kirche-fedderwardergroden {
    background-color: var(--color-kirche-fedderwardergroden);
}

.bgcolor-kirche-voslapp {
    background-color: var(--color-kirche-voslapp);
}

.bgcolor-kirche-pastell-voslapp {
    background-color: var(--color-kirche-pastell-voslapp);
}

.bgcolor-kirche-sengwarden {
    background-color: var(--color-kirche-sengwarden);
}

.color-menu {
    color: var(--color-menu);
    background-color: var(--bgcolor-menucolor-menu);
}

.color-menu :hover {
    color: var(--color-menu-hover);
    background-color: var(--bgcolor-menucolor-menu-hover);
}

/* Borders */
/* z.B. für Checkliste Kontakte */
.border-kirche-global-2 {
    border: 2px solid var(--color-kirche-global);
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Text innerhalb Seitenindices (Menü Zusammenfassung), Extra-CSS seitenindex, Bsp: interne Seiten */

.seitenindex>.nav>.nav-item>p {
    margin-left: 3em;
}



/*Tunke 06.11.2024*/
.btn-outline-dark {
    --bs-btn-hover-color: black;
}

body div#page-wrapper div#expanded-content-top div.container div#c1 div.row div.col-12.col-lg-9.col-md-12 {
    padding-right: 0px;
    padding-left: 0px;
}

div#page-wrapper div#expanded-content-top {
    border-bottom: 3px solid var(--color-kirche-global);
    /* was #A353B2; */
}

/* TODO: was ist das ? */
div#page-wrapper div.bg-light.jumbotron.mb-4.p-5.rounded-0::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    pointer-events: none;
}

div#page-wrapper div#expanded-content-top,
div#page-wrapper nav#main-navbar.navbar.navbar-dark.navbar-expand-lg {
    z-index: 20;
}


/* Cards */
.card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-body .card-title {
    order: 1;
}

.card-body .card-text {
    order: 2;
}

.card-body .small.text-dark {
    order: 3;
    margin-top: auto;
}

.card-header {
    color: var(--color-kirche-global);
    font-size:1.25rem;
    font-weight:bold;
}

.card-header-3lines .card-header {
    min-height: 7rem;
}

@media (max-width: 574px) {
  .card-img-top {
    width: 100%;
    height: 60vw;      /* z.B. eher quadratisch / 2:1 */
    object-fit: cover;
  }
}


/* Container muss relativ positioniert sein */
div#page-wrapper div.bg-light.jumbotron.mb-4.p-5.rounded-0 {
    position: relative;
    /* Bezugsrahmen für das ::before-Pseudoelement */
}

div#page-wrapper div.bg-light.jumbotron.mb-4.p-5.rounded-0::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-image: url('/fileadmin/user_upload/-STATISCHE-INHALTE/Allgemein/welle_nordgemeinden.png');
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    pointer-events: none;
}

div.col a.card.h-100.mb-3 div.overlay {
    min-height: 40%;
}

div.overlay div.card-body {
    padding-bottom: 0px !important;
}

@media(max-width: 1022px) and (min-width: 768px) {
    .topnews figure.image {
        height: fit-content;
    }
}

@media (max-width:1399px) {
    div.col a.card.h-100.mb-3 div.overlay {
        min-height: 51%;
    }
}

/** TODO: kappt das Bild zu sehr
@media (max-width:1199px) {
    div.col a.card.h-100.mb-3 div.overlay {
        min-height: 60%;
    }
}

@media (max-width:991px) {
    div.col a.card.h-100.mb-3 div.overlay {
        min-height: 72%;
    }
}
**/
.container #navbarToggler.collapse.navbar-collapse #searchbox.d-flex.mb-0.ms-lg-3[method='post'][role='search'] {
    margin-top: -10%;
}


/* Tunke 23.12.2024 */
.footersocials {
    display: flex !important;
    justify-content: center;
    align-items: flex-end;
}

/* TODO: KAL: gefährlich: diese #-Tags sind automatsich generiert ! */
#c785 .col-sm.text-center {
    margin-left: 30px;
}

#c18 a {
    text-decoration: none;
}



/* KAL das überschreibt auch die Menü-Einstellungen !!!
a:hover {
    color: #A048B0 !important;
}
*/

.card {
    border-radius: 12px;
}

/* DAS VERZERRT DIE DEFAULT-NEWS-BILDeR IN DER ÜBERSICHT
[title='Dummy image'] {
    height: 40%;
} 
*/

.card.h-100 {
    max-height: 450px !important;
}


/* TESTING */

.testing {
    color:red;
}

/* ================================================
4 personnell - Kontakte
siehe auch httpdocs/fileadmin/extensions/personnel/Resources/Public/Css/personnel.css
TODO: ggf mergen
*/


.personnel > .listitem {
    float: none !important; /* patch Bootstrap-Definition, sonst rutscht Footer nach rechts*/
}

.person {

}

hr.person-separator {
    padding:0px;
    color: var(--color-kirche-global);
}

.person-col-photo {
    width:20%;
    flex: 0 1 15% !important;
    @media (max-width: 574px) {
        width: 30%;
    }
}
.person-col-dummy {
    width:20%;
    flex: 0 1 15% !important;
    @media (max-width: 574px) {
        display: none;
        /* width: 1%;
        padding: 0px !important; */
    }
}

.person-col-name {
    padding-top: 1rem !important;
    width:80%;
    @media (max-width: 574px) {
        width: 100%;
    }
}

.person-col-text {
    width:80%;
    @media (max-width: 574px) {
        width: 70%;
    }
}

/* Titel, Funktion */
.person-responsibility {
    font-size: 1rem;
    line-height: var(--bs-body-line-height);
}
.person-name {
    font-size: 1.25rem;
    line-height:1.2;
}

.person-email-section {
    padding-left: 1.75rem;  /* Einzug für den gesamten Block */
    text-indent: -1.75rem;  /* erste Zeile ausgerückt, weitere eingerückt */
}

/*** s.o 
.person-information a,
a.person-phone,
a.person-vcard,
a.person-email {
    font-size: 1rem;
    line-height: var(--bs-body-line-height);
    text-decoration: none;
    color: var(--color-kirche-global);
    text-decoration: none;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;

}

.person-information a:hover,
a.person-email:hover,
a.person-vcard:hover, 
a.person-phone:hover {
    background-color: var(--color-kirche-pastell-global);
    color: var(--color-kirche-global);
    border-radius: 12px;
    border: 1px solid var(--color-menu-hover);
}
**/

.person-vcard {
    font-size: 1rem;
    line-height: var(--bs-body-line-height);
}
.person-information {
    font-size: 1rem;
    line-height: var(--bs-body-line-height);
}
 
.person-email:before {
    font-family: var(--font-symbols);
    font-weight: 900;
    content: "\f0e0"; /* Briefumschlag */
    padding-right:0.6rem;
    white-space: nowrap;
    text-decoration: none;
}

a.phone-link:before {
    font-family: var(--font-symbols);
    font-weight: 900;
    content: "\f095"; /* Telefonhörer */
    white-space: nowrap;
    text-decoration: none;
}

.person-phone.festnetz:before {
    font-family: var(--font-symbols);
    font-weight: 900;
    content: "\f095"; /* Telefonhörer */
    padding-right:0.8rem;
    white-space: nowrap;
    text-decoration: none;
}
.person-phone.mobile:before {
    font-family: var(--font-symbols);
    font-weight: 900;
    content: "\f3cf"; /* Mobilfon */
    padding-right:0.8rem;
    white-space: nowrap;
    text-decoration: none;
}
.person-vcard:before {
    font-family: var(--font-symbols);
    font-weight: 900;
    content: "\f2bb"; /* ??? Symbol */
    padding-right:0.5rem;
    white-space: nowrap;
    text-decoration: none;
}
/* ================================================
4 calendarize - Termine
*/

/* search form */

.calendarize-searchstartdate label,
.calendarize-searchstartdate input,
.calendarize-searchenddate label,
.calendarize-searchenddate input,
.calendarize-searchtextfield label,
.calendarize-searchtextfield input {
    vertical-align: middle;
}

.calendarize-searchstartdate input,
.calendarize-searchenddate input {
    display:inline-block;
    width:10em;
}

.calendarize-searchstartdate label,
.calendarize-searchenddate label,
.calendarize-searchtextfield label {
  width: 7em;
  padding-left:1em;
  display: inline-block;
}

.calendarize-searchtextfield input {
    width:27em;
    display:inline-block;
}

.calendarize-searchstartdate,
.calendarize-searchtextfield {
    margin-top:0.5em;
    margin-bottom:0.5em;
}

.calendarize-searchstartdate,
.calendarize-searchenddate {
      display: inline-block;
}

/* TODO: used ? */
.calendarize-SearchGroup {
   margin-top:0.5em;
}



/* Event-Listen-Eintrag */
.calendarize-item {
    margin-top:3em;
    font-size: 100%;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
}

/* 
2 Spalten auf Terminseiten Desktop
1 Spalte auf Startseite bzw Mobile Ansicht
*/
/* Desktop */
.calendarize-col-datetime {
    display:inline-block;
    width:20%;
    vertical-align: top;
}

.calendarize-col-text {
    display:inline-block;
    width:80%;
    vertical-align: top;
}

/* mobil: 1 Spalten */
@media (max-width: 574px) {
    .calendarize-col-datetime,
    .calendarize-col-text {
        display:block;
        width:100%;
    }
}

/* z.B. Startseite */
.termine-narrow .calendarize-col-datetime,
.termine-narrow .calendarize-col-text {
        display:block;
        width:100%;

}

/* Event-Felder */

.calendarize-title {
    font-size: 120%;
    font-weight:bold;
    color: var(--color-kirche-global);
}

/* description */
.calendarize-description {
    
}

.calendarize-location {
    font-weight:bold;
}


/* Date + Time 
Desktop: 3 Zeilen untereinander für WoTag, Datum, Uhrzeit, neben dem Termin-Text
Mobil: 1 Zeile für Wotag, Datum, Uhrzeir, über dem Termintext
*/
.calendarize-datetime {
    
}

.calendarize-datetime-item {
    display: block;
}

/* Mobile: 1 Zeile */
@media (max-width: 574px) {
  .calendarize-datetime-item {
    display:inline;
  }
}
.termine-narrow .calendarize-datetime-item {
    display:inline;
/*  font-size:90%; */
}

.calendarize-date {

}

.calendarize-time {

}

/* für checklisten */

.calendarize-tags .badge {
    margin-left:1.2em;
    margin-top:1em;
}

.evTermineIframe {
    width: 100%; 
    height: 400px;
}


/* im Typo3 als einzelne Elemente angelegte Titel mit Bild */
.termine-titel h3 {

}


/* Seitenauswahl (pagination) - s.a. oben btn-kirche 
    - für calendarize - Termineliste TODO: eigene Klassen in FLUID-Template definieren und hier auch
    - für Artikelliste
*/

.f3-widget-paginator {
    margin-top: 2em;
    padding-left: 0px;
}

.f3-widget-paginator::before {
    content: "Seite: ";
}

/* .calendarize  */
.f3-widget-paginator li {
    display: inline-block;
    padding-left: 0px;
    padding-right: 0px;
}

.f3-widget-paginator li a
.f3-widget-paginator li a {
    color: var(--color-menu);
    text-decoration: none;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.f3-widget-paginator li a {
    color: var(--color-menu);
    text-decoration: none;
}

.f3-widget-paginator li.current {
    padding-left: 0.5em;
    padding-right: 0.5em;
}


/* suche-Icon mobil im header */
@media (max-width: 991px){
    div#navbarToggler.collapse:not(.show) {
        display: block;
    }
    div#navbarToggler.collapse:not(.show) .navbar-nav {
        display: none;
    }
}


/* TODO: doppelt ? => Lupe */
/* Suche-Icon für inline-Text (Klasse angeben) */
.searchicon::before {
    content: "\f002"; /* Lupe */
    font-family: 'FontAwesome';
    font-style: normal;
    display: inline-block;
    font-size: 100%;
    color: var(--color-kirche-global);
}


/* calendarize - export ev termine */

.evexport-form {
    margin-top:1em;
    margin-bottom:1em;
}

/* Abstand der Buttons nebeneinander */
.evexport-form button {
    margin-right:1em;
}

.evexport-textfield {
    width: 100%;
    height: 300px;           /* Feste Höhe für Scrollbar */
    white-space: pre;        /* Erhaltung von Zeilenumbrüchen und Leerzeichen */
    overflow-y: auto;        /* Vertikale Scrollbar bei Überlauf */
    overflow-x: auto;        /* Horizontale bei Bedarf */
    border: 1px solid #ccc;
    padding: 10px;
    font-family: monospace;  /* Feste Breite für Code-ähnliche Darstellung */
}

.evexport-table {
  border: 1px solid black;
}

.evexport-table th, 
.evexport-table td {
  border: 1px solid black;
  padding: 8px;
}

/* verschiedene Styles */

/* wird für verborgenes direktes HTML verwendet, Z.B. vorbesetzte Formularfelder für Terminsuchen */
.hidden {
    display:none;
}

.debug::before {
    content: " DEBUG: ";
    background-color: yellow;
    color: red;
}
.debug {
    background-color: yellow;
    color: red;
}

.warning {
    background-color: orange;
    color: black;
}

.info {
    color: var(--color-kirche-global);
    font-style: italic;
}

.error {
    background-color: red;
    color: yellow;
}

/* .small => bootstrap */

.smaller {
    font-size:80%;
}

.evensmaller {
    font-size:60%;
}

.verysmall {
    font-size:40%;
}

/* markiere unfertige Abschnitte, müssen ausserdem Zugroffsgruppe "preview" zugeordnet werden 
  class in Feld Erscheinungsbild => Bootstrap Utilities => Extraclass angeben
*/
.intern-only::before {
    content:"--- INTERNER ABSCHNITT FOLGT - NUR ANGEMELDET SICHTBAR ---";
    background-color:yellow;
    width:100%;
}

.todo-section::before {
    content:"--- TODO ABSCHNITT FOLGT - NUR ANGEMELDET SICHTBAR ---";
    background-color:orange;
    width:100%;
}

.todo-section {
    background-color:orange;
    width:100%;
}

/* Menü, das nur angezeigt wird, wenn man angemeldet ist un dder Benutzergruppe "interner Bereicjh" zugeteilt ist
*/
.intern-menu {
  color:orange;  
}

/* Losungen */

#tageslosung {

}
#wochenlosung {

}
.losung-container {

}

.losung-titel {
    font-size: 1.5rem;
    margin-bottom:-2rem;
}

.termine-losung {
/* eigentlich nur für FLUID-Template-Auswahl */
}

.losung-item {
    font-size:110%;
}
.losung-description {
    margin-top:0px;
}
.losung-copyright {
    font-size:80%;
}

.losung-copyright a {
    border:none;
}

/* keine BU's anzeigen, bsp für Startseiten-Kirchenlogos */
.no-image-caption figcaption {
    display:none;
}

.no-image-title .carousel-caption h5 {
    display:none;
}

/* Mobile: ausblenden */
@media (max-width: 574px) {
  .no-mobile {
    display:none;
  }
}

/* Mobile: ausblenden */
@media (min-width: 575px) {
  .mobile-only {
    display:none;
  }
}

/* TODO: für manche Menüs etc, abr wie kann man das innerhalb von Texten nutzen ? dort werden Klassenangaben gelöscht */
p.linebreak::before {
    content: "";
    display: inline;  /* Standard: kein Umbruch */
}

@media (max-width: 768px) {
    p.linebreak::before {
        content: "\A";  /* Zeilenumbruch auf Mobile */
        white-space: pre;
    }
}

.altkatholisch img {
    background-color: gray;
}