/* increate end of lists margin in faq widget */
#faq-popup .results ul {margin-bottom:1rem;}

/* "Legacy-Badges" - they don't show the correct color when on a new LNO page - need to fix this for VGO-Vogelsberg and VGO-Wetterau, as well as VLDW-VW */

body.lno-vgo-vogelsberg.home:not(.layout-inapp) #page[class*=partner--] .box.has-headline .badge, body.lno-vgo-wetterau.home:not(.layout-inapp) #page[class*=partner--] .box.has-headline .badge 
{background: linear-gradient(296deg, var(--partner-color-gradient-start) 26%, var(--partner-color-gradient-end) 72%);}

body.lno-frankfurt.home:not(.layout-inapp) #page[class*=partner--] .box.has-headline .badge, body.lno-marburg-biedenkopf.home:not(.layout-inapp) #page[class*=partner--] .box.has-headline .badge
{background: linear-gradient(296deg, var(--partner-color-gradient-start) 26%, var(--partner-color-gradient-end) 72%);}

body.lno-vldw.home:not(.layout-inapp) #page[class*=partner--] .box.has-headline .badge, body.lno-vldw-lw.home:not(.layout-inapp) #page[class*=partner--] .box.has-headline .badge
{background: linear-gradient(296deg, var(--partner-color-gradient-start) 26%, var(--partner-color-gradient-end) 72%);}

/* Ein Copyrightzeichen bei den Captions der News-CEs hinzufügen */
.news-element figcaption.figure-caption::before {
    content: "\00A9 "; /* Fügt das Copyright-Symbol und ein geschütztes Leerzeichen hinzu */
}


/* Footer Infos ausblenden */
.ServiceBar .pull-left {display:none;}


.accordion {    --bs-accordion-active-color:#162A6B;}

.teaser-card .card {margin-bottom:1rem;}

/* Nicht-Deutsche-Seiten: Alles ausblenden, was nicht in der Sprache funktioniert */
html:not([lang^="de"]) .partner-select,html:not([lang^="de"]) .accessibility-links  {display:none;}

/* Linksammlungs-CE: Größerer Text */
.LinkCollection a {font-size:1rem;color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));}
.LinkCollection {margin-top:1rem;}

/* Die Sektions-definierenden Headlines - hier nur für Desktop definiert. Greift nur beim "Headline"-CE. */
@media (min-width:768px) {
  .main-content .container .partner-header h1 {font-size:56px;margin-bottom:48px;}
 .main-content .col-main>.frame-type-header>header>h2 {font-size:48px;margin-bottom:48px;margin-top:72px;}
}

.accordion-body h2 {font-size:1.5rem;margin-top:0.25rem;margin-bottom:0.5rem;}

/* im FAQ Widget hat die Headline einen zu großen Margin Bottom */
#faq-popup .popup-header h2 {margin-bottom:0rem;} 
#faq-popup {border-radius: 1rem;} /* Runde Ecken für FAQ Widget */
#faq-popup .popup-header {border-top-left-radius: 1rem;border-top-right-radius: 1rem;} /* oben auch */


#footer .prefooter .col-md-6:nth-of-type(1) h3:before, #footer .prefooter .col-md-6:nth-of-type(1) .h3:before {
    content: "";
}
#footer .prefooter .col-md-6:nth-of-type(2) h3:before, #footer .prefooter .col-md-6:nth-of-type(2) .h3:before {
      content: "";
}


/* Im Scrolled State blitzt die Partner Navigation unter dem Flyout Menü hervor, durch nicht passenden Border radius */
body.scrolled #header .partner-navigation--desktop .navbar {border-radius: 1.25rem;}
body:not(:has(.tpl-startpage #hero)) #header .partner-navigation--desktop .navbar {border-radius: 1.25rem;}

/* Hero Banner leicht nach unten verschieben, damit die Grafik beim Fly-Out Menu nicht mehr durchblitzt */
#content #hero .banner {margin-top:2px;}

/* In FAQ Listen sind die Kategorie-Headlines kleiner als die Fragen */
.faq-list .category-headline h3 {font-size:1.75rem!important;margin-top: 1.5rem;}

/* Info-Headline für Regio-Filter */
main .tx-ikanos-rgfilter .above-panels-headline {font-size:1.25rem;}


/* Alle Elemente in der Hauptspalte sollten einen Standard-Abstand nach unten haben */
.col-main > * {
    margin-bottom: 3rem; /* Default Abstand aller Elemente */
}

/* Verkehrmeldungen Buttons auf Startseite */
.btn-outline-primary {border: 2px solid #E3E5ED!important;}
.verkehrsmeldungen-button {font-size:1.125rem;text-align:left;}
.vm-1, .vm-2 {margin-bottom:1rem;}
#c207127 .row > .col-md-6:last-child {text-align: right;} /* Ausnahme "Alle anzeigen" Button rechtsbündig */
i.fa-vm-1, i.fa-vm-2, i.fa-vm-3, i.fa-vm-4  {
    display: inline-block; 
    border:1 px solid grey;        
    width: 55px;          
    height: 24px;        
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 0.5rem;
    vertical-align: -5px; 
}
i.fa-vm-1{background-image: url('/c/fileadmin/images/icons/verkehrsmeldungen/vm-1.svg'); }
i.fa-vm-2{background-image: url('/c/fileadmin/images/icons/verkehrsmeldungen/vm-2.svg'); }
i.fa-vm-3{background-image: url('/c/fileadmin/images/icons/verkehrsmeldungen/vm-3.svg'); }
i.fa-vm-4{background-image: url('/c/fileadmin/images/icons/verkehrsmeldungen/vm-4.svg'); }
#c207125 .frame-type-rmvtemplate_twocolumns .col-md-6 {
padding-bottom: 1rem;
}


.footer-navigation h2 {font-size:1.25rem;margin-bottom:24px;} /* Headlines im Footer */
.footer-navigation ul.ce-menu {margin-bottom:48px;} /* Abstand der Untermenüliste nach unten -> Wichtig für Abstand Mobile */
#footer .footer-navigation {padding-bottom:0rem;} /* Der blaue Footer kommt direkt nach der Footernavigation, hier ist noch ein riesiges Padding drin */

.prefooter h2 {font-size:3rem;margin-bottom:3rem;} /* Die H2-Headline für den Prefooter mit Größe und Standard-Abstand nach unten */

@media only screen and (min-width: 992px) { .frame-type-rmvtemplate_boxwithheadlineandfullwidthimage img:not(#c204843 *) {height:340px;object-fit:cover;object-position: top; }} /* Wir geben den alten News Teasern etwas flachere Bildmaße per CSS */
.frame-type-rmvtemplate_boxwithheadlineandfullwidthimage h3 a {font-weight:700;} /* In einigen alten News-Teasern war der font-weight für die verlinkten Überschriften zu gering */



.partner-navigation--desktop .dropdown-menu {min-width:300px;}
/* .partner-navigation--desktop .dropdown-menu.show {margin-top: 8px!important;} */
#header .partner-navigation--desktop a.nav-link:hover {background-color: rgb(255, 255, 255, 0.3)!important;
    border-radius: 0.5rem;} /* Hover Effect für Haupt-Items des Partner-Menü */
#header .partner-navigation--desktop .navbar a.navbar-brand:hover  {background-color: rgb(255, 255, 255, 0.3)!important;}



.frame-type-rmvtemplate_threecolumns .teaser-card h3 {font-size:1.5rem;} /* Wenn 3 Teaser Cards in einem Dreispalter-Stecken sind die Headlines zu groß, sollten dann so groß sein wie bei den Cards im Pre-Footer. Nochh besser wäre eigentlich ein container-Query generell für diese Cards, Schriftgröße basiert immer auf große des Containers , aber das scheint mir ein guter Workaround */

/* Hover-State beim Partner-Submenu. So wie beim RMV-Hauptmenü */
.partner-navigation--desktop .dropdown-item:hover {box-shadow:0 1.25rem 3rem rgba(22, 42, 107, 0.2);background-color:white;font-weight:600;}


/* provisorisches Styling der Suchbox auf https://www.rmv-stage.de/c/de/start/vgo/mobilitaet-vor-ort/linienfahrplaene */
.box.rmv-lightgray2 {background-color:white;    box-shadow: 0px 15.74px 37.78px 0px rgba(22, 42, 107, .1)!important;}
.searchbar label {font-weight: 700; margin-bottom: 0.25rem;}
.tx-ikanos-rgfilter .searchbar .form-inner-addon i {    color: #162a6b;    margin-top: 0.3rem;}

.dropdown-menu {transition: opacity 0.3s ease-in-out,visibility 0s linear 0.3s;}



/* in Tabellen die Überschriften vertikal an Logos ausrichtgen */
.tx-ikanos-timetable h2 {margin-top:5px;}

.frame-type-rmvtemplate_box {margin-top:48px;}

.main-content .container header .box h2 {
    font-size: initial; /* Setzt auf den Browser-Standard oder den geerbten Wert zurück */
    margin-bottom: initial;
    margin-top: initial;
}

.news-element {margin-bottom:32px;}
.news-element.card {height: calc(100% - 1rem)!important;}
.frame-type-rmvtemplate_twocolumns .col-md-6 {padding-bottom:2rem;}


    /* fügt bei den Teaser-Cards im Footer einen störkeren Box-Shadow hinzu */
.teaser-card {  transition: box-shadow 0.3s ease-in-out;}
.teaser-card:hover {
    box-shadow: 0px 20px 48px 0px rgba(22, 42, 107, 0.10);
}


.tx-ikanos-downloads img[src="/c/typo3conf/ext/ikanos_downloads/Resources/Public/Images/download.png"] {
display:none;
}  /* remove  download icon */

.tx-ikanos-downloads h2 {font-size:1.3rem;} /* auf seiten mit download widget:
gigantisch große h2 verkleinern */
.tx-ikanos-downloads .h3 {display:none!important;}
/* .tx-ikanos-downloads .col-md-4 img {width:100%;}  die Thumbnails der Bilder bei den DOwnloads sind zu klein */
.tx-ikanos-downloads .col-md-8 strong {font-size:1.5rem;line-height:110%;    color: #162a6b;}

#header .mainbar .partner-select .dropdown-menu .partner-link .partner-logo img {
    max-width: 75px !important; /* Das KVG-Main-Kinzig Logo ist im Partner-Dropdown riesengroß, aus ungeklärten Gründen. Diese Zeile fixt das Problem temporär bis wir die Ursache gefunden haben */
}


.ce-media img {width:100%;} /* Wenn Bilder eingesetzt werden, ist es meist korrekt sie in 100% Breite zu zeigen - muss ggf. noch Ausnahmen anpassen */