@charset "UTF-8";

/* Bibliothekskatalogsuche auf neuen Übersichtsseiten*/
.bibsuche + .warmgrauhell {
    margin-bottom:1rem;
}

.tpl-2023-uebersichtseite div.bibsuche #katalog_query_input {
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

.tpl-2023-uebersichtseite h2.ueberschrift {
    margin: auto;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

@media(max-width: 544px) {

   
    .tpl-2023-uebersichtseite div.bibsuche button.btn-primary, .tpl-2023-uebersichtseite div.bibsuche #katalog_query_input {
        border-radius: 1.4rem;
        display: block;
        border-top-left-radius: 1.4rem!important;
        border-bottom-left-radius: 1.4rem!important;
        max-width: 100%;
        margin: auto!important;
    }

    .tpl-2023-uebersichtseite div.bibsuche #katalog_query_input + button.btn-primary {
        margin-top: 0.75rem!important;
        margin-bottom: 1.5rem!important;
    }

    .bibsuche.warmgrauhell  {
        padding: 2rem 1.5rem 0.5rem 1.5rem;
        flex-direction: column;
    }

    .tpl-2023-uebersichtseite div.bibsuche #katalog_query_input {
        padding: 0.25rem 0.5rem 0.25rem 0.5rem;
        border: 1px solid lightgray;
    }

    .bibsuche.warmgrauhell + .warmgrauhell {
        padding-bottom: 0.75rem;
        padding-left: 1.5rem;  
    }

    .bibsuche.warmgrauhell + .warmgrauhell a {
        padding-top: 0.75rem;
    }

    

}
@media(min-width: 545px) {
    .tpl-2023-uebersichtseite div.bibsuche, .tpl-2023-uebersichtseite .bibsuche + div  {
        justify-content: center;
        flex-wrap: wrap;
        
    }

    .tpl-2023-uebersichtseite div.bibsuche button.btn {
        justify-content: center;
        border-radius: 1.4rem;
    }


.tpl-2023-uebersichtseite h2.ueberschrift {
    margin: auto;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

.tpl-2023-uebersichtseite div.bibsuche  {
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--margin-extra-sm);
}

.tpl-2023-uebersichtseite div.bibsuche button.btn
 {
    justify-content: center;
    border-radius: 1.4rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.tpl-2023-uebersichtseite div.bibsuche form {
    width: unset;
    margin-bottom: 2.5rem;
    margin-top: 0.5rem;
}

.tpl-2023-uebersichtseite div.bibsuche #katalog_query_input
{
border-radius: 1.4rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
font-size: 1.375rem;
border: 1px solid lightgray;
}

}

/* ENDE SUCHE FÜR BIB */

/* Typo zentrales Hinweispanel auf Adress-und Produktseiten  */
dd.allg-hinweispanel {
color: #2d2d2d;
}

.allg-hinweis-wrapper h2, .allg-hinweis-wrapper.alert.alert-warning .showattribute.allg-hinweistitel {
    margin-top: 0px; 
    }


/* Eintritt frei Hinweis bei Veranstaltungen laut Kommentar im HTML überflüssig */
.flag {
    display: none;
}

/*---------------------------------Abstand viele Heros --------------------------------*/

.tpl-2023-uebersichtseite .heroteaser, .bube + .bube {
    margin-bottom: var(--margin-extra-sm);
}

main div.audio {
 margin-bottom: var(--margin-extra-sm);
}

/*------------------------------- random hax------------------------------------------------- */

/* ---- falsches Beschwerdeformular auf /service/adressen/familienberatung-und-schulpsychologischer-dienst ausblenden ---*/

.vorlesen-wrapper a:has(span[cnw-original-text-0])   {
   display: none;
}

/*-------------Korrektur Abstand Export Select bei Diagramme-----*/
.exportlist {
    margin-bottom: var(--margin-extra-sm)
}

.exportlist li {
    padding: 0px!important;
}

/* 3er Bildreihe füllt den Platz aus, auch wenn es nur zwei Bilder sind*/
.tpl-2003_standard_flex .bildreihe figure.col-sm-4  {
    flex-grow: 1;
}

/* 3er Bildreihe füllt den Platz doch nicht aus, wenn mehrere Bildreihen hintereinander (für /73242/index.html#ziel_0_17 */
.tpl-2003_standard_flex .bildreihe + .bildreihe figure.col-sm-4 {
    flex-grow: 0;
}

.tpl-2003_standard_flex .bildreihe + h2 + .bildreihe figure.col-sm-4 {
    flex-grow: 0;
}
/*-----------------------------------------------------------------------------

/*--------------------Selectboxen unter Diagrammen ohne Bullet Point------------------------ */

main ul.exportlist {
    list-style: none;
}


/*-----------------großes Zitatzeichen-------------------------------------*/

/* .tinyblock blockquote p:first-child {

    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAARCAYAAADZsVyDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5QTRBQzQ5NjI5QTgxMUUzOTg3NUE1MkRBMzIwMzkyNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5QTRBQzQ5NzI5QTgxMUUzOTg3NUE1MkRBMzIwMzkyNCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjlBNEFDNDk0MjlBODExRTM5ODc1QTUyREEzMjAzOTI0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjlBNEFDNDk1MjlBODExRTM5ODc1QTUyREEzMjAzOTI0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+qDVPYgAAAUdJREFUeNq0VLuNwzAMtYNbwCtcRvCNYI9wqVM5VWp7BKe+Kq6uPo8QraAVsoJGcEjgyXgWZCnNESAs0E+PH5Esl2Up/kNKT3ztzpV8RtEO/5zoJHr7mX4dXxJsDWwD01Oxgrt5zIHwDyJVUUe92uHUk34C2xBWbaP8u2+IxaCE9U5WdeCwh9OYdMLVcMRVpmRdEF1KvsNSpITJ3DtYTzznLlCd5wxxtRLLa+qrtqJmD+07Q75KfEInxMRtSiEXrGgLBy4GJuwsepTjkCWmSwb9y2J2stC+tYHZph4vjHhK1NQF5ylFzD1tkEXxBnad0kPk9Rvfi4hgSHQKD4vlzEpeQtgBDwKf0AUxUh2aOwXwhe7a7gpE6kkV2CZIeyK1IekasQA19T8agEu40Yh0xL5QGXijsXzQ2pux+kxmsp60TveGpHgJMAAwv4f4mfVEoQAAAABJRU5ErkJggg==);
} */

.tinyblock blockquote p:first-of-type::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAARCAYAAADZsVyDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5QTRBQzQ5NjI5QTgxMUUzOTg3NUE1MkRBMzIwMzkyNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5QTRBQzQ5NzI5QTgxMUUzOTg3NUE1MkRBMzIwMzkyNCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjlBNEFDNDk0MjlBODExRTM5ODc1QTUyREEzMjAzOTI0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjlBNEFDNDk1MjlBODExRTM5ODc1QTUyREEzMjAzOTI0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+qDVPYgAAAUdJREFUeNq0VLuNwzAMtYNbwCtcRvCNYI9wqVM5VWp7BKe+Kq6uPo8QraAVsoJGcEjgyXgWZCnNESAs0E+PH5Esl2Up/kNKT3ztzpV8RtEO/5zoJHr7mX4dXxJsDWwD01Oxgrt5zIHwDyJVUUe92uHUk34C2xBWbaP8u2+IxaCE9U5WdeCwh9OYdMLVcMRVpmRdEF1KvsNSpITJ3DtYTzznLlCd5wxxtRLLa+qrtqJmD+07Q75KfEInxMRtSiEXrGgLBy4GJuwsepTjkCWmSwb9y2J2stC+tYHZph4vjHhK1NQF5ylFzD1tkEXxBnad0kPk9Rvfi4hgSHQKD4vlzEpeQtgBDwKf0AUxUh2aOwXwhe7a7gpE6kkV2CZIeyK1IekasQA19T8agEu40Yh0xL5QGXijsXzQ2pux+kxmsp60TveGpHgJMAAwv4f4mfVEoQAAAABJRU5ErkJggg==);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 0.5em;
    vertical-align: middle;
}

.tinyblock blockquote p {

    
    background-repeat: no-repeat;
    font-size: 1em;
    padding: 0 0 0 30px; 
}


#cboxClose {
    background: url(/images/x22/icons/x-red.svg);
    background-size:contain;
    background-repeat: no-repeat;
    background-color: #fff;
    background-position: center;
    border: 0;
    height: 2rem;
    position: absolute;
    right: 1rem;
    text-indent: -9999px;
    top: 1rem;
    width: 2rem;
}

/*----Bilder in Presseartikeln maximal 50% breit ---*/
main .bildrechts figure, figure.bildrechts  {
float: right;
width: 100%
}


/* br mit der Klasse nofloat soll keinen sichtbaren Zeilenumbruch erzeugen */
.nofloat {
    display:none;
}

time.pressedatum {
    padding: 0px;
}

time + br {
    display:none;
}

/* unwerwünschter Abstand vor dem E-Mail-Link in der Adressanzeige unwerwünschter Abstand vor dem E-Mail-Link in der Adressanzeige /artikel/71506/index.html */
p > span[itemprop="telephone"] + br {
    display: none;
}


.anschrift p:last-of-type {
    margin-bottom: 0px!important;
}

dl, ol, ul {
    margin-bottom: var(--margin-default-sm)
}

/* Navigationspfeile der Bilderglaerie solle keinen Abstand unterhalb der Leinwand erzeugen */
ul.flex-direction-nav li  {
    margin: 0px;
    padding-top: 0px!important;
}

/*---------------------------------Abstände----------------------------------------------------
In der Regel sollte jedes Element einen Abstand nach unten haben. Es gibt drei verschiedene Abstände:
var(--margin-default-sm): Standard Abstand zwischen semantisch zusammenhängenden Elementen. Z.B. zwei Abschnitte (p), ein Text und ein daraugfolgendes Bild ect.)
var(--margin-extra-sm): Abstand für semantisch nicht zusamemenhängende Elemente. Zum, Beispiel h2 nach einem Textblock. Das h2 markiert ein neues semantisches Element. Daher ist der Abstand nach oben etwas größer.
var(--margin-special-sm): geringerer Spezialabstand für Sonderfälle

Abstände nach oben sind nur in Ausnahmefällen definiert.
*/

/* Abstände und Schriftgrößen */

main .video-wrapper {
    margin-top: var(--margin-default-sm);
    margin-bottom: var(--margin-extra-sm);
}

main iframe {
    margin-bottom: var(--margin-default-sm)
}

main .vorher-nachher-wrapper {
    margin-bottom: var(--margin-default-sm);
}

main .text-mit-bild {
    margin-bottom: var(--margin-default-sm);
 display: block;
}

main .accordionopen .text-mit-bild-inner .tinyblock p {
    hyphens: auto;
}


main a + div.text-mit-bild {
    margin-top: var(--margin-default-sm);
}

main a + div.textbildls {
    margin-top: var(--margin-default-sm);
}

main .textbildteaser article div.inhalt a p {
    font-family: var(--font-family-regular);
}

main .iconteaser article div.inhalt a, .textbildteaser article div.inhalt a, article.flex-teaser div.inhalt a {
    padding: .5rem .5rem .5rem 1rem;
    display: block;
    font-size: calc(var(--font-size)*1.25);
    font-family: var(--font-family-semibold);
    border-bottom: none; 
    line-height: 1.2; 
}

.accordionpanel .iconteaser article div.inhalt a{
	font-size: calc(var(--font-size)*1.125);
}

main .section-break-light{
    margin-top: var(--margin-default-sm);
    margin-bottom: var(--margin-default-sm);
    padding-top: 0rem;
}

/* wenn ein Text-mit-Bild auf ein Text-mit-Bild folgt, soll es einen anderen Abstand geben. Aber nur wenn beide Elemente auch ein Bild haben, Bsp. https://cms-internet.verwaltung.stadtkoeln.de/artikel/72341/index.html*/
.text-mit-bild:has(figure) + .text-mit-bild:has(figure) {
    margin-top: var(--margin-special-sm); 
}

/* Buchstabennavigation Ehrenamtsbörse */
.flags_abc a {
    border-bottom: 1px solid var(--gray-link) ;
}

/*---------------------Breadcrumb-------------------------------------------*/
.breadcrumb-wrapper ul {
    line-height: 1.12;
}


/* ---------------Styling der Module---------------------------------------------*/

/* Bildbeschriftungen von anderen figcaptions entkoppeln */ /* export select bei Diagrammen */
.copyright + figcaption, .exportselect {
    font-size: calc(var(--font-size-sm) * .8);
    line-height: 1.12rem;
}

.trefferliste + .pagination {
    margin-bottom: var(--margin-special-sm);
    flex-flow: wrap;
}

/* -Akkordion-*/
/* neue Styles für Akkordion im alten Modul */
/*    neues Icon  */
    
main .accordionhead h2.flexheadline:before {
    content:'';
    background-image: url(/images/x22/icons/plus-red.svg);
    background-repeat: no-repeat;
    background-position-x: 0rem;
    background-position-y: 0.5rem;
    background-size: 2.25rem;
    position:relative;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-block;
    transform-origin: 16px 24px;
    transition: ease .5s all;
}

main .accordionhead.accordionheadopened h2.flexheadline:before {
    transform-origin: 16px 24px;
    transition: ease .5s all;
    transform: rotate(45deg);
        }

/* altes Icon ausblenden (ausklapper.css überschreiben) */
main .accordionhead img {
   display: none;
}

/* Linie Unten ausblenden, wenn akkordeon geöffnet wird  */
main .accordionhead.accordionheadopened h2.flexheadline, main .accordionhead.accordionheadopened {
    border-bottom: none;
    padding-bottom: 0px!important;
}

/* Linie unter Headline einblenden, wenn Akkoredeon geschlossen ist */
main .accordionhead h2.flexheadline {
    margin: 0px;
    font-size: 1.375rem;
    padding: 0.5rem 0 1rem 0rem!important;
    text-indent: calc(var(--font-size) * -1.9);
    margin-left: calc(var(--font-size) * 1.9);
}

/*Linie oben soll immer zu sehen sein */
main .accordionhead {
    border-top: 1px solid var(--gray-link); 
    border-bottom: 1px solid var(--gray-link); 

}

/* Abstand nach oben, wenn ein Accordion nach einem nicht Accordion folgt */
main :not(.accordionpanel) + .accordionhead {
    margin-top: var(--margin-default-sm);
}

/* Wenn ein Nicht Akkordion auf ein Akkordion folgt, wird ein Abstand eingefügt */ 

main .accordionpanel + :not(.accordionhead) {
    margin-top: var(--margin-default-sm);
}

/* bei offenen Akkordions ist die Linie unter dem Panel, nicht unter dem accordionhead */
main div.accordionpanel.accordionopen  {
    border-bottom: 1px solid var(--gray-link);
    padding-bottom: 2rem;

}

/* border oben ausblenden, wenn vorher ein geöffnetes Akkordeon da steht, damit die Linie unter dem geöffneten Akkordeon nicht die Linie überlagert. */
main .accordionpanel + .accordionhead {
    border-top: none;
}

aside ul {
     padding-left: 0;

} 

main .tinyblock li a:not(time) {
    padding: 0!important;
}

/* fix für Punktlisten neben Bildern, z.b. dsgvo-seiten */
.text-mit-bild .links {
    /* list-style-position: inside; */
   
    margin-right: 1rem;
	margin-bottom: .5rem;
}

/*  Tabellen
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.responsive-tables th:first-child {
    white-space: nowrap;
    }

 .tinyblock table {
    word-break: normal;
    border: 1px solid #E4E3DF;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 0 12px 0;
    padding: 0;
    width: 100%;
}

.responsive-tables table {
  margin-bottom: var(--margin-default-sm);
    }

/* Trefferlisten, Listenlemente / typ Presse und typ Übersichtsliste */
main li a:not(time):not(.tellink):not(.typ-ubersichtsliste):before, #body main .teaser ul li a {
    margin-bottom: 0!important;
    padding: 0!important;
    font-size: var(--font-size)!important;
}

main .downloadliste ul {
    padding: 0px 0 9px 40px;
}

/* kein Pfeil vor dem Datum bei Trefferlisten*/
.textteaserliste.typ-presse li:before {
    display: none;
}

main a:has(span.missinglink.existingPageNotConnected):before {
    background-image: url(/images/x22/icons/exclamation-triangle-red.svg)!important;
    
}

main a:has(span.missinglink.urlNotFound):before {
    background-image: url(/images/x22/icons/exclamation-triangle-fill-red.svg)!important;
}

main a[href$="artikel/73324/index.html"]:has(span.missinglink.existingPageNotConnected):before{
    background-image: url(/images/x22/icons/arrow-right-red.svg)!important;
}

main a[href$="artikel/73324/index.html"]:has(span.missinglink.urlNotFound):before{
    background-image: url(/images/x22/icons/arrow-right-red.svg)!important;
}

/* Link Styles / Main ------------------------------------*/
main a:nth-child(n+1):not(:last-of-type):not(.linkleichtesprache) {
    margin-bottom: 0px!important;
    z-index: 1;
}

main a.linkmap, main a.onlineform, main a.linkemail, main a.download, main a.standardlink:not(:only-child), main a.telLink, body#body main .tinyblock a.linkintern, main .tinyblock a.linkextern, main .pdfform, main a.standardlink.linkstadtplan  {
    border-bottom: 1px solid  var(--gray-link)!important; 
    text-indent: calc(var(--font-size) * -1.5);
    margin-left: calc(var(--font-size) * 1.5); 
    margin-top: 0px!important;
    padding: 0.5rem 0.5rem 0.25rem 0rem;
}

/* Links bei Text mit Bild brechen nicht auseinander wenn das Bild umfloßen wird */
.text-mit-bild .standardlink {
    display:inline-block!important;
}

.vorlesen-wrapper a {
    border-bottom: 1px solid  var(--gray-link)!important; 
    text-indent: calc(var(--font-size) * -1.9);
    margin-left: calc(var(--font-size) * 1.9); 
    margin-top: 0px!important;
    padding: 0.5rem 0.5rem 0.25rem 0rem;
    /* margin-bottom: 0rem; */
}

#vorlesen:hover {
    border-bottom: 1px solid var(--red)!important;
    background-color: var(--gray-background-light);

}

main a.linkrunter:before {
    background-image: url(/images/x22/icons/arrow-down-red.svg);
    height: 1.05rem;
}

main .card > .inhalt > a span.linkextern:before {
    display: none;
}

/* Wenn ein E-Mail Link im Adressmopdul ist und danach direkt ein weiterer Link folgt, kein Abstand zwischen den Links siehe /artikel/71506/index.html */
.adressen + a {
    margin-bottom: 0px;
}

.adressen + a:hover {
    margin-bottom: 0px;
}

.standardlink + .standardlink
.vorlesen-wrapper a:hover {
    border-bottom: 1px solid var(--red)!important;
    background-color: var(--gray-background-light);
}

.standardlink.readspeaker:before {
    background-image: url(/images/x22/icons/loudspearker-red.svg);
    background-size: 1.5rem 1.5rem;
    height: 1.5rem;
    width: 1.5rem;
    background-position: 0 4px;
    margin-right: 0;
}


/*-------- Überschreibe Bootstrap-Klasse .invisible (display none statt visibility hidden), um zu verhindern dass Readspeaker Link Leerstellen einfügt, nachdem man geklickt hat ---------------------*/
blockquote p span.invisible {
    display: none;
}

div.bildreihe {
  margin-bottom: var(--margin-default-sm)
}

main .tinyblock a:hover:not(.btn) {
    background-color: var(--gray-background-light); 
    border-bottom: 1px solid var(--red);
}

body#body main .tinyblock a:hover {
    background-color: var(--gray-background-light); 
    border-bottom: 1px solid var(--red);
}

body#body main .tinyblock a.btn {
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-family: ApproachKoelnSemiBold, Arial;
    font-size: 1.375rem;
    padding: 0.2em 1.1em 0.2em 1.1em;
    border-radius: 1.4rem;
    border-color: var(--red);
    background-color: #ee0000;
}

body#body main .tinyblock a.btn:before {
    content: none;
}

body#body main .tinyblock a.btn:hover {
    color: #fff;
    background-color: #d60909;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-family: ApproachKoelnSemiBold, Arial;
    font-size: 1.375rem;
    padding: 0.2em 1.1em 0.2em 1.1em;
    border-radius: 1.4rem;
    border-color: var(--red);
}

main a.linkmap:hover, main a.onlineform:hover, main a.linkemail:hover, main a.download:hover, main a.standardlink:hover, main a.telLink:hover, main a.linkintern:hover, main a.linkextern:hover {
     border-bottom: 1px solid var(--red)!important;
     background-color: var(--gray-background-light);
    /*margin-bottom: 0px;*/
}

main div.inhalt h3, main div.inhalt h4 {
    margin-bottom: 0px;
}

main h3, /*main .accordionpanel h3,*/ main strong a:not(.tellink):not(.tinyblock a), main .textteaserliste.typ-presse li a {
    margin-bottom: var(--margin-default-sm);   
    font-size: calc(var(--font-size) * 1.125); /* 30.10.2023 ww Font size geändert von 1.25 auf 1.125 (damit es zum neuen Produkt-Design passt) */
}



main h4, main h5, main h6 {
    margin-bottom: var(--margin-default-sm);   
    font-size: var(--font-size)* 1.2;
}

/* Link Styles Aside ----------------------------------*/
aside .listbox .inhalt ul li a:nth-of-type(n+1),
aside .listbox .inhalt ul li:nth-of-type(n+1)
 {
    margin-bottom: 0px!important;
    padding-bottom: 0px;
}

aside .listbox .inhalt ul {
margin-bottom: 1rem;
}

aside .teaser .inhalt {
    padding-top: 0.5rem;
    padding-bottom: 0rem;
    padding-left: 0px;
    padding-right: 0px;
}

/* interne Links in der Linkbox */
aside .listbox .linkintern:before {
    content: '';
    background-repeat: no-repeat;
    background-image: url(/images/x22/icons/arrow-right-red.svg);
    margin-right: 0.25rem;
    background-size: 1rem 1rem;
    height: 1rem;
    width: 1rem;
    display: inline-block;
}

/* Listbox */
aside article.listbox {
    background-color: var(--gray-background-light);
    padding: 0;
    margin-top: 16px;
}

/* externe Links in der Linkbox */
aside .linkextern:before 
{
    background-image: url(/images/x22/icons/box-arrow-up-right-red.svg)!important;
    background-position: 0 2px!important;
    content: '';
    margin-right: 0.25rem!important;
    margin-left: 0.1rem;
    background-size: 1.2rem!important;
    height: 1.2rem;
    width: 1.2rem;
    display: inline-block;
}

aside article.listbox h2 {
    margin-bottom: 0;
    text-align: center;
}

#body aside article.listbox li a, #body aside aside a:not(article.teaser.rahmen a) {
    border-bottom: 1px solid var(--gray-link);
    font-size: 1.25rem!important;
    padding: .1rem 0;
    text-indent: calc(var(--font-size) * -1.6);
    margin-left: calc(var(--font-size) * 1.5);
    padding-left: 0;
}

#body aside article.listbox li a.linkintern:before, #body aside a:not(article.teaser.rahmen a):before {
    background-position: 0 4px!important;
    content: '';
    margin-right: calc(var(--font-size)*0.25)!important;
    margin-left: 0.1rem;
    background-size: 1.2rem!important;
    height: 1.2rem;
    width: 1.2rem;
    display: inline-block;
    background-image: url(/images/x22/icons/arrow-right-red.svg);
}

#body aside article.listbox li a.linkextern:before {
    background-position: 0 5px!important;
    content: '';
    margin-right: 0.25rem!important;
    margin-left: 0.1rem;
    background-size: 1rem!important;
    height: 1.3rem;
    width: 1.2rem;
    display: inline-block;
}

/* Bibliothekskatalog Abstand nach oben für Aside Teaser */
#body aside #katalog_query_input {
    display: block;
    margin-left: 3.6rem;

}

/*Bild-Teaser*/
main + aside .teaser img {
    margin-top: 1rem;
}


/* "zur Übersicht"-Link */

.zurueck-zur-unterstartseite-link:before {
    background-image: url(/images/x22/icons/arrow-right-red.svg) ;
}

.zurueck-zur-unterstartseite-link:hover {
    border-bottom: 1px solid var(--red)!important;
    background-color: var(--gray-background-light);
}

.zurueck-zur-unterstartseite-link {
    text-indent: calc(var(--font-size) * -1.5);
    margin-left: calc(var(--font-size) * 1.5);
    border-bottom: 1px solid var(--gray-link);
    padding: 0.5rem 0.5rem 0.25rem 0rem;
}

a.zurueck-zur-unterstartseite-link[href*="basisdienste"] {
    display: none;
}

/*-----------------------Presseartikel------------------------------*/
main h3.untertitle {
    font-size:var(--font-size);
    line-height: 1.75rem;
}


/* ---------------------Presseartikel aside------------------------------- */
aside a br {
    display:none;
}

/* Aktuelles */

aside article.listbox li a.warnmeldung {
border: none;
}

#body aside .warnmeldung time {
    background-color: #ffd200!important;
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom:0.5rem;
    border: none;
    display:inline-block;
}


#body aside .warnmeldung {
    font-weight: bold;
    margin-top: -1.5rem;
}


#body aside .warnmeldung time:before {
    background-image: url(/images/x22/icons/eilmeldung-.svg)!important;
    background-position: 0 0.1rem!important;
    content: '';
    margin-right: 0.25rem!important;
    margin-left: 0.1rem;
    background-size: 1.5rem 1.5rem!important;
    height: 1.5rem;
    width: 1.5rem;
    display: inline-block;
   /* background-color: #ffd200!important; */
    background-repeat: no-repeat;
}

#body aside .inhalt h2[style] {
   background-color: #ffd200!important; 
    background-color: var(--gray-background-light)!important;
    color: #2d2d2d!important;
}

aside .listbox article[itemtype] a h3[itemprop="headline"] {
    font-size:calc(var(--font-size) * 1.25);
    margin-top: 0px;
    /*border-bottom: 1px solid var(--gray-link)
    text-indent: calc(var(--font-size) * -1.5);
    margin-left: calc(var(--font-size) * 1.5);*/

}     

#body aside  .listbox li article[itemtype] a
{
     text-indent: unset;
     margin-left: 0px;
     display: inline-block;
     width: 100%;
}

aside .listbox article[itemtype] time {
    font-size: calc(var(--font-size) * 0-8);
    font-style: italic;
}
/* leerer a.span soll nicht angezeigt werden*/
aside span.linkintern.linkintern.standardlink {
    display: none;
}

aside a:hover {
    border-bottom-color: var(--red)!important;
}

aside .listbox article[itemtype] a h3[itemprop="headline"]:before {
    background-image: url(/images/x22/icons/arrow-right-red.svg)!important;
    background-position: 0 0.35rem!important;
    content: '';
    margin-right: 0.25rem!important;
    margin-left: 0.1rem;
    background-size: 1.5rem 1.5rem!important;
    height: 1.5rem;
    width: 1.5rem;
    display: inline-block;
    background-position: 0;
}

/* content-teaser aside */
body#body aside .teaser .inhalt a h2 {
    font-size:calc(var(--font-size) * 1.375)!important;
    line-height: 1.5rem;
}

aside article.teaser.rahmen a:before {
    display:none;
}

aside article.teaser.rahmen span.linkextern:before {
    display: none;
}

body#body aside .teaser .inhalt a p {
    font-size:calc(var(--font-size) * 1.125)!important;
}


/* aufeinanderfolgende Elemente */
main figure.responsiveImage {
    margin-bottom: var(--margin-default-sm)!important;
    margin-top: 2.5rem;
}

main figure {
    margin-bottom: var(--margin-default-sm);
}

main figure.responsiveImage {
    margin-bottom: var(--margin-extra-sm)
}

main .bildreihe h2.flexheadline + figure:not(:first-of-type) {
    margin-top: 0px;
}

#inhalt > div.container-md.big-breakout.breakout > div > div > section > div > article {
    margin-bottom: var(--margin-default-sm);
}

main .row .bildreihe figure {
    margin-top: var(--margin-default-sm);
    margin-bottom: 0!important;
}

main .bildreihe figure:last-child {
    margin-bottom: 0px;
}

main a + .video-wrapper {
    margin-top: var(--margin-extra-sm);
}

main .teaser, .iconteaser article.teaser {
    margin-bottom:var(--margin-default-sm)!important;
    margin-top: 0px!important;
}


main li + li  {
    margin-bottom: 0px;
    padding-top: 0.5rem;
}

aside article.listbox li {
    padding-left: 1rem;
    padding-right: 1rem;
    background-image: none;
    padding-top: .1rem;
    padding-bottom: 1rem;
    
}

aside article.teaser.listbox.rahmen li a[target="_blank"]:before {
    background-image: url(/images/x22/icons/box-arrow-up-right-red.svg)!important;
    background-position: 0 2px!important;
    content: '';
    margin-right: 0.25rem!important;
    margin-left: 0.1rem;
    background-size: 1.2rem!important;
    height: 1.2rem;
    width: 1.2rem;
    display: inline-block
}

aside article.teaser.listbox.rahmen li a[target="_blank"] {
    border-bottom: 1px solid var(--gray-link);
    margin-bottom: 0px;
    color: var(--default-font-color);
    text-decoration: none;
    background-image: none;
    padding: 0.5rem 0;
    margin-top: 0.25rem;
    display: block;
    width: fit-content;
    font-family: var(--font-family-regular);
}

/* mehr Abstand zwischen dem letzten Link und der nächsten Überschrift bei Adressmodulen /artikel/71506/index.html */
main a + div.tinyblock,
main a + div.adressen {
    margin-top: var(--margin-extra-sm);
}

/* typo-neu.css Zeile 112 überschreiben, weil dort ein überflüssiger Abstand nach oben gesetzt wird */
.standardlink + .tinyblock h3:first-child {
    margin: 0;

}
.section-break-light {
    margin-bottom: var(--margin-extra-sm);
}


/* clearfix für Bildergalerie im neuen Template */
div.grid_1.lastchild.galerie_text::after {
    content: '';
    display: block;
    clear: both;
}



/*---------- Ausblenden der H2, die neben bzw. unter der Galerie generiert wird, da nicht verwendet -----*/
div.grid_1.lastchild.galerie_text h2 {
    display:none; 
}

figure a {
    border-bottom: 2px solid transparent!important;
    margin-bottom: 0px; 
    z-index: 1; /* damit Bullet List links vom Bild die Detailansicht nicht blockiert */
}

figure a:hover {
    border-bottom: 2px solid #ee0000!important;
    margin-bottom: 0px; 
}

/*---- Ausblenden der Lupe, da Bilder in der Galerie nicht klickbar seind -----*/
.bildergalerie figure {
    pointer-events: none;
}

/* Farbe der Schaltflächen zum Weiteschalten in Rot (links) */
.bildergalerie .flex-direction-nav li a.flex-prev, .mfp-content .thumbnails .flex-direction-nav li a.flex-prev {
    background-color: #ee0000;
}

/* Farbe der Schaltflächen zum Weiteschalten in Rot (rechts) */
.bildergalerie .flex-direction-nav li a, .mfp-content .thumbnails .flex-direction-nav li a {
    background-color: #ee0000;
}

/* hover und focus linker Button fehlt im Origiinal Skript */
.bildergalerie .flex-direction-nav li a.flex-prev:hover,
.bildergalerie .flex-direction-nav li a.flex-prev:focus {
    background-color: rgba(111, 105, 105, 0.9);
    background-position: center center;
    background-repeat: no-repeat;
    outline: rgba(0, 0, 0, .4);
}

.bildergalerie figure figcaption {
    padding-top: 0px;
    padding-bottom: 10px;
    padding-left: 7px;
}

main a + a:not(a:last-of-type), 
.standardlink + .standardlink,
main .standardlink + .standardlink:not(:last-of-type),
main .text-mit-bild .standardlink + .text-mit-bild .standardlink,
main div + a, main a:first-of-type:not(.cgalerie):not(a:only-of-type),
main a.standardlink:first-of-type:not(a:only-of-type), main a + h2 + a, main a.download
 {
        border-bottom: 1px solid var(--gray-link);
        margin-bottom: 0px; 
}

main a + a:not(a:last-of-type),
main .standardlink + .standardlink:not(:last-of-type) {
margin-bottom: 1rem;
}

main .download {
    text-indent: calc(var(--font-size) * -1.5);
    margin-left: calc(var(--font-size) * 1.5);
}

main a.linkextern.standardlink, main a.linkintern.standardlink 
{   text-indent: calc(var(--font-size) * -1.5);
    margin-left: calc(var(--font-size) * 1.5);
    display: block;
    border-bottom: 1px solid var(--gray-link);
}

/*über php-include eingefügte Links auf die Adresseite der Stadtbib sollen keinen Abstand links haben (BSP: 74010)  */
.tpl-2003_standard_flex main .lastchild.teaser a.linkintern.standardlink[href*="adressen"] {
    margin-left: 0px;
}

/* Links auf Adresslinks müssen Inline sein, damit der Hover keinen Text überlagert */
main .lastchild a.linkintern.standardlink {
    display: inline;
}

main a.linkemail.standardlink {
    margin-bottom: var(--margin-default-sm);
}
/*--- E-Mail Link auf Adressseiten soll keinen Abstand nach unten haben ---- z.B: /artikel/71506/index.html Aufklapper */
main .anschrift a.linkemail.standardlink {
    margin-bottom: 0px;
}

div.adressen {
    margin-bottom: 1.5rem;
}

main .text-mit-bild-inner a.linkextern.standardlink {
        border-bottom: 1px solid  var(--gray-link)!important;      
        margin-bottom: 0px; 
}

main h1, main h1.articlehead, #body h1.articlehead {
    font-size: calc(var(--font-size) * 2);
    margin-bottom: var(--margin-default-sm);
    margin-top: var(--margin-default-sm);
}

main h2, main h2.flexheadline, .allg-hinweis-wrapper .allg-hinweis .showattribute.allg-hinweistitel { 
    font-size: calc(var(--font-size) * 1.5);
    margin-bottom: var(--margin-default-sm);
    margin-top: var(--margin-extra-sm);
}
/* Wenn Teaser Elemente mit Breakout auf andere Elemente folgen, zusätzlicher Abstand */
.tpl-2003_standard_flex .big-breakout, .tpl-2003_standard_flex .textbildteaser   {
    padding-top: 1.5rem; 
}

/* kein zusätzlicher Abstand, wenn Breakout Container auf Break-out Container folgen */
.tpl-2003_standard_flex .big-breakout + .container-md + .big-breakout, .tpl-2003_standard_flex .textbildteaser + .tpl-2003_standard_flex .textbildteaser  {
    padding-top: 0rem;
}

/*-- Wenn eine Überschrift mit einem Überschriftenmodul erstellt wurde und davor ein anderes Textmodul ist, 
wird der Abstand nach oben (margin-extra-sm) um den Abstand reduziert, den das Element oben nach unten hat (2* margin-special-sm)*/

/* -- Links, die aufeinander folgen, aber jeweils in einem p-tag eingeklammert sind, sollen weniger Abstand haben, es sei denn es ist der letzte p im div */
p:has(a) + p:has(a):not(:last-of-type) {
       margin-bottom: 0.25rem;
}


/* -- wenn nach einer Linkfolge, die in Absätzen geklammert sind, ein Absatz ohne Link kommt, soll der wieder einen Abstand nach oben haben, um den fehlenden Abstand zum Link auszugleichen */
p:has(a) + p:has(a) + :not(p:has(a)) {
    margin-top: var(--margin-default-sm);
}

main div + h2.flexheadline, main div + div div:has(h2.flexheadline) > h2.flexheadline:not(.accordionhead .flexheadline), main div + div:has(h2) > h2,  .tpl-2008_standard_bol_produkt.moderncss div.accordionpanel + h2.flexheadline, main a.standardlink + div.accordionhead {
    margin-top: var(--margin-extra-sm)
}

main div.textbildls + div.textbildls {
    margin-top: var(--margin-special-sm)
}


main p, main .artikel p, dt.showattribute span {
    color: #2d2d2d;
    margin-bottom: var(--margin-default-sm);
}

main .text-mit-bild-inner a.linkextern.standardlink {
    border-bottom: 1px solid  var(--gray-link)!important;
    float: left;
    margin-bottom: var(--margin-default-sm)!important;
}

.text-mit-bild-inner:after {
        content: '';
        display: block;
        clear: both;
    }

/*Veranstaltungsmodul auf Artikelseite - Listenausgabe */
main ul.veranstaltungskalender {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
}

main ul.veranstaltungskalender li {
    padding: 1rem 0;
    border-top: var(--gray-border);
}

main ul.veranstaltungskalender li article div {
    margin-bottom: 0;
}

main ul.veranstaltungskalender li span.veranstaltungskalender_datum, main ul.veranstaltungskalender li article em {
    color: var(--muted);
}

main .satzung-sublayer {
   font-size:var(--font-size-sm);
}

main h3[itemprop="name"]:before {
    content: '';
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url(/images/x22/icons/arrow-right-red.svg);
    margin-right: 0.2rem;
	height: 0.95rem;
    width: 0.95rem;
    display: inline-block;
}

main h3[itemprop="name"] {
    border-bottom: 1px solid  var(--gray-link)!important;
    display: inline-block;
    margin-bottom: var(--margin-special-sm);
}

main h3[itemprop="name"]:hover {
    border-bottom: 1px solid var(--red)!important;
    background-color: var(--gray-background-light);
}

main ul.veranstaltungskalender a[itemprop="url"]:hover h3[itemprop="name"] {
    border-bottom: 1px solid var(--red)!important;
    background-color: var(--gray-background-light);
}

/* text mit Bild an Design anpassen */
main .text-mit-bild figure.grid_1 {
        width: 36%!important;
        margin-right: .75rem;
        box-shadow: unset;
        clear: both; /* fix für DSGVO-Template */
    }

main .text-mit-bild-inner figure.rechts {
    margin-left: 1rem;
}

main span.copyright {
        font-size: calc(var(--font-size) * .75);
        color: var(--muted);
    }

/* Schriftgröße Link beschriftungen aber nicht Bildunterschriften */
main figcaption:not(.copyright + figcaption) {
    color: #2d2d2d!important;
    font-size: 1rem;
}

main figcaption .downloadbeschreibung {
        color: #2d2d2d!important;
        font-size: var(--font-size);
    }

/* stadtplan link im Modul Adresse im Stadtplan */

main a.linkstadtplan:before {
    background-image: url(/images/x22/icons/pin-map-red.svg)!important;
    background-position-y: 0rem;
    content: '';
    display: inline-block;
    height: 1rem;
    width: 1rem;
    background-position-x: 0;
    background-repeat: no-repeat;
    margin-right: .25rem;
}

/* Telefon-Links */
main a.telLink:before {
    background-image: url(/images/x22/icons/telephone-red.svg)!important;
    content: '';
    display: inline-block;
    height: 0.95rem;
    width: 0.95rem;
    background-repeat: no-repeat;
    margin-right: .5rem;
    background-size: 0.95rem;
}   

/* Download-Links */
main .download:before,  main .tinyblock.accordionpanel a.download.standardlinkpdf.pdf:before {
    content: '';
    display: inline-block;
    background-image: url(/images/x22/icons/download-red.svg)!important;
    height: 1rem;
    width: 1rem;
    background-position: 0 1px;
    background-repeat: no-repeat;
    margin-right: .25rem;
}

/*-----------------Download Icon in Trefferliste zunächst ausblenden------*/
main .downloadliste_flex .download::before {
    display:none;
}

/*----------------oeffentliche Bekanntmachungen Trefferliste / Download Icon an der richtigen Stelle in der Trefferliste generieren-----------*/
main .downloadliste_flex .downloadliste .inhalt ul li a figure::before {
    content: '';
    display: inline-block;
    background-image: url(/images/x22/icons/download-red.svg);
    height: 1rem;
    width: 1rem;
    background-position: 0 1px;
    background-repeat: no-repeat;
    margin-right: .25rem;
}

/*---------------------oeffentliche Bekanntmachungen Trefferliste Time bündig setzen mit dem Rest des Elementes--------------- */
main .downloadliste_flex .downloadliste .inhalt ul li a time {
    text-indent: calc(var(--font-size) * -1.5);
    margin-left: calc(var(--font-size) * 1.5); 
} 


main .downloadliste_flex .downloadliste .inhalt ul li a figure time {
    text-indent: calc(var(--font-size) * -1.5);
    margin-left: 0; 
    display: inline;
} 



/*--------------------oeffentliche Bekanntmachungen Trefferliste / Abstand zwischen den List Elementen ---------------------*/
main .downloadliste_flex .downloadliste .inhalt ul li + li,
main .downloadliste_flex .downloadliste .inhalt ul li:first-of-type
 {
    margin-bottom: var(--margin-special-sm)
}

body#body main .tinyblock a  {
    padding-bottom: 0;
    border-bottom: 1px solid var(--gray-link);
    white-space: nowrap;
}

/* Links sollen umbrechen bei Bild-mit-Text Bsp: #67044 */
body#body main .text-mit-bild-inner .tinyblock a {
    white-space: unset;
}

/* Button links im Text-mit-Bild-Element Übersichtsseite ohnen Border, damit der Hover nicht springt */
body#body main .tinyblock a.btn.btn-primary {
    border-bottom: none;
}

body#body main .tinyblock td a {
    display: inline;
    white-space: break-spaces;
}

main .listbox li, main .servicesuche li {
        background-image: unset!important;
}

main .listbox li:before, main .servicesuche li::before {
    background-image: url('/icons/arrow-right-red.svg')!important;
}

main .tinyblock a::before, main .tinyblock p ul li a::before, main a.standardlink.news:before, body#body main .tinyblock a::before  {
    content: '';
    background-image: url("/images/x22/icons/arrow-right-red.svg");
    background-position: 0 4px;
    background-repeat: no-repeat;
    padding-right: 0.1rem!important;
    padding-left: 0.1rem;
    background-size: .95rem .95rem;
    display: inline-block;
    width: 1.25rem;
    height: 1rem;
}

body#body.tpl-2008_standard_bol_produkt .tinyblock a.download::before {
    height: 1.25rem;
    margin-right: 0.25rem;
    padding-right: 0px;
    background-position: 5px 5px;

}

main .tinyblock a[target="_blank"]::before {
    background-image: url("/images/x22/icons/box-arrow-up-right-red.svg")!important;
    background-position: 0!important;
    content: ' '; 
    margin-right: 0.1rem;
    margin-left: 0.1rem;
    background-size: .95rem .95rem!important;
    height: 1rem;
    width: 1rem;
    display: inline-block;
    background-repeat: no-repeat; 
}

main .tinyblock a::before {
    content: '';
    background-image: url("/images/x22/icons/arrow-right-red.svg")!important;
    background-position: 0 4px;
    background-repeat: no-repeat;
    padding-right: 0.1rem!important;
    padding-left: 0.1rem;
    background-size: .95rem .95rem;
    display: inline-block;
    width: 1.25rem;
    height: 1rem;
}

main .tinyblock a::before, main .tinyblock p ul li a::before {
    display: inline-block;
}

/* externe Links */

main a.linkextern::before {
    content: '';
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url("/images/x22/icons/box-arrow-up-right-red.svg");
    padding-right: 0.25rem;
    background-size: 1rem 1rem;
	height: 1rem;
    width: 1rem;
    display: inline-block;
 }


/*interne links*/
main .linkmap:before, main .onlineform:before, main .button-satzung:before, main .linkintern.standardlink:before, main.standardlink:before, .linkrauf.standardlink:before
{   content: '';
    background-repeat: no-repeat;
    background-image: url(/images/x22/icons/arrow-right-red.svg);
    background-size: 1rem 1rem;
	height: 1rem;
    width: 1rem;
    display: inline-block;
    background-position-y:0.2rem;
}

main .textteaserliste.typ-etbadressen li:before {
    display: none;
}
/* E-Mail-Links */

main a.linkemail.standardlink:before, main a[href^="mailto"]:before   {
    content: '';
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url(/images/x22/icons/envelope-red.svg)!important;
    padding-right: 0.25rem;
    background-size: 1rem 1rem;
    display: inline-block;
    height: 1rem;
    width: 1rem;
}

main .tinyblock a.linkemail.standardlink:before, main .tinyblock a[href^="mailto"]:before {
    width: 1.25rem!important;
    background-position: 0 .1rem!important;
}

main .satzung-sublayer h6 {
    padding: .5rem 0 .5rem 0;
    margin-bottom: 0;
}

/* ----------Trefferliste Pressemeldungen mit Teaser-------- */

main a[itemprop="url"], a[itemprop="url"]:hover {
    text-decoration: none;
    border-bottom: none;
    background-color: unset;
    padding: 0!important;
}

/*elements.css von Jens überschreiben*/
main .textteaserliste.typ-presse li a { margin-left: 0!important; }

/* datum in PMs nicht kursiv */
.text-muted .datum time {
    font-style: normal;
}

/*bootstrap überschreiben*/
main .textteaserliste li .text-muted {
    color: var(--muted) !important;
    font-style: normal!important;
    display: inline-block; /* --- Pressemitteilungen Abstand Datum Titel sonst zu groß */
}

/* ----------Trefferliste Dokumente-------*/

/* download Pseudoelemente */
main a.standardlink.zip:before {
    content: '';
    display: inline-block;
    background-image: url(/images/x22/icons/download-red.svg)!important;
    background-size: 1rem 1rem;
    height: 1rem;
    width: 1rem;
    padding-right: 0.25rem;
    background-position: 0 0px;
    background-repeat: no-repeat;
}

/* Suchbox der Trefferliste */
main .formbox {
    text-align: center;
    padding-top:1.5em;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background: #eee;
    margin-bottom: var(--margin-default-sm);
}

main .pfeilrechtsweissklein {
    color: #fff;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-family: ApproachKoelnSemiBold, Arial;
    font-size: 1.125rem;
    padding: 0.2em 1.1em 0.2em 1.1em;
    border-style: solid;
    border-radius: 1.4rem;
    border-color: rgba(238,0,0,1);
    background-color: rgba(238,0,0,1);
    margin-left: 27px;
   /* box-shadow: 10px 20px 15px silver; 3D-Effekt */
}

p.suchbox.clearfix {
    padding-top: 0;
}

main .suchbox input {
    width: 43%;
    float: none;
    border: 1px solid darkgrey;
    border-radius: 6px;
    height: 2.2em;
    padding-left: 10px;
    font-size: 16px;
}

main .abisz, main .abisz li {
    padding: 0px;
}

/* Trefferliste Paginator   */

.pagination ul li.aktiv, .pagination ul li a.aktiv {
    font-family: var(--font-family-semibold);
    border-color: transparent;
    border-bottom: 2px solid #ee0000;
}

/* wenn es keinen Paginator in der Trefferliste gibt, soll die Anzeige der Trefferanzahl den üblichen Abstand nach unten haben. */
main .pagination .innerer_block1 + :not(.pagination ul) {
    margin-bottom:var(--margin-default-sm);
}

.pagination ul {
    margin-bottom:var(--margin-default-sm);
}


.pagination ul li.inaktiv span:hover, .pagination ul li a:hover, main a:hover:not(.cgalerie) {
    border-bottom: 2px solid #ee0000;

}
main div.innerer_block1.grid_1.firstchild {
    width: 100%;
    text-align:center
}   

main div.innerer_block2.grid_2.lastchild {
    width: 100%;
    text-align:center
}

/* Trefferliste Standorte Links aus ETB Adressen */
main ul.textteaserliste li a {
    margin-top: 0px!important;
    padding: 0;
}

.textteaserliste li + li {
    margin: 0;
}

/* Download Formulare und PDF Formulare before */

main .onlineform:before, main .pdfform:before {
   background-image: url('/images/x22/icons/file-text-red.svg')!important;
   background-position-y: 0!important;
}

/*Jens elements.css überschreiben */
main .iconteaser figure, main .textbildteaser figure {
    margin-bottom: .0;
}

main .iconteaser figure a, main .iconteaser article figure a:hover,
main .textbildteaser figure a, main .textbildteaser article figure a:hover 
 {border-bottom: none!important;}

/*Bootstrap default überschreiben*/
main .iconteaser article div.card, main .textbildteaser article div.card, main .flex-teaser .inhalt {
    border:none;
    height: 100%;
    /*border bottom ja oder nein?*/
    border-bottom: 1px solid var(--red);
    border-radius: 0;
    background-color: var(--bs-gray-100);
}

/* leere iconteaser verstecken*/
.iconteaser:has(figure a:empty) {
  display: none
}

main li a strong:before {
    content: '';
    background-position: 0 0.1rem;
    background-repeat: no-repeat;
    background-image: url(/images/x22/icons/arrow-right-red.svg);
    margin-right: 0.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-block;
    background-size: 1rem;
}

main li:not(.tinyblock):first-of-type:not(.abisz ul li):not(.aehnliche_dienstleistungen h2 + ul li) {
    padding-top: 1rem;
}

@media (min-width:280px) and (max-width:768px)
{
aside article.listbox {
    width: 100%;
    margin:16px;
}

aside .servicesuche {
    width: 92%;
    margin: auto;
}

aside article .sectionhead {
    margin: 16px;
}
}

@media (min-width:480px) {

    body main {
    font-size: 1.125rem;
    }

    main h3, main strong a:not(.tellink):not(.tinyblock a), main .textteaserliste.typ-presse li a  {
        font-size: calc(var(--font-size-md) * 1);
    }

}

/* Schriftgrößenanpassungen und Linkanpassungen für Darstellung Aside auf mittelgroßen Bildschirmen mit 3er Grid */
@media screen and (min-width: 768px) and (max-width:991px) {
  /* copyright und Caption */

  .copyright + figcaption {
    margin-bottom: 1rem;
}

    /*h2 in aside */
    main + aside h2 {
    font-size: 1.2rem;
    }

    #body aside article.listbox li a, aside a:not(article.teaser.rahmen a) {
        font-size: 1rem;
    }

    #body aside article.listbox li a.linkextern:before {
        background-position: 0 6px;
    }

    #body aside article.listbox li a.linkextern:before {
        height: 1.4rem;
    }

    /* Suchschlitz Bibliothekskatalog (unsichtbarer Submitbutton wird ausgeblendet, Größe des Inputfeldes an Spaltenbreite angepasst*/
    #katalog_query_input {
        width: 100%;
        margin-left: 0;
    }

    .tpl-2023-uebersichtseite #katalog_query_input {
        width: unset;
    }

    #body aside #katalog_query_input {
        margin: 0px;
    }

    .fdesigner_submit {
        display: none;
    }

}

@media (min-width:768px) {

/*-----------wenn es nur einen Teaser im Aside gibt, wird dieser mit 50% statt mit 40% angezeigt (66% war zu groß) */
    main + aside > article:only-of-type {
    width: 40%;
  }  
  

/*Bildeinbindung u.a. in News */

    main .bildrechts figure, figure.bildrechts  {
        float: right;
        width: 33.33%
        }

    main .bildlinks figure, figure.bildlinks {
        float: left;
        width: 33.33%
    }


    /* aside zweispaltig mittig */
    .tpl-2008_standard_presse main + aside > article, main + aside > section {
		width: 46%;
    }

    body main {
    font-size: var(--font-size-md);
    line-height: var(--line-height-xxl);
    }
    
    main p, main h3 {
    font-size: var(--font-size-md);
    }

    main .text-mit-bild h3 {
        display: block
    }
    
    main h1, main h1.articlehead, #body h1.articlehead {
         font-size: calc(var(--font-size-md) * 2)!important;
    }   

    main h2, main h2.flexheadline  { 
        font-size: calc(var(--font-size-md) * 1.25);
    }

    main h3, main strong a:not(.tellink):not(.tinyblock a), main .textteaserliste.typ-presse li a  {
        font-size: calc(var(--font-size-md) * 1.25);
    }

    main b {
        font-size: var(--font-size-md);
    }

    main li {
    font-size: var(--font-size-md);
    }
    
    main figcaption.downloadbeschreibung {
        color: #2d2d2d!important;
        font-size: var(--font-size);
    }

    .satzung-first-layer > li > a figure {
        font-size: var(--font-size-md);
    }

    *, ::after, ::before {
        box-sizing: border-box;
    }

    main li a:not(time):not(.tellink):not(.typ-ubersichtsliste):not(.formulartreffer):before, #body main .teaser ul li a {
        font-size: calc(var(--font-size) * 1.125);
       /*display: inline;*/
        }

     .downloadliste .inhalt > ul > li > a figure, main .download figure {
            font-size: 1.125rem
    }

    main figcaption.downloadbeschreibung:before, main figcaption.downloadbeschreibung:after, main figcaption.downloadbeschreibung {
        font-size: calc(var(--font-size) * 1.125);
    }

   /* Links im Aside */
   #body aside article.listbox li a, aside a:not(article.teaser.rahmen a) {
    font-size: var(--font-size-md);
    }

    #body aside article.listbox li a.linkextern:before {
        height: 1.3rem;
        background-position: 0 5px;
    }

    #body aside article.listbox li a.linkextern:before {
        background-position: 0 5px;
    }
    aside .linkextern:before {
        background-position:0 0.625rem;
        }    
    }

@media (min-width:1200px) {
    
        body main {
        font-size: var(--font-size-xl);
        line-height: var(--line-height-xxl);
        }
        
        main p {
        font-size: var(--font-size-xl);
        }
    
        main h1, main h1.articlehead, #body h1.articlehead {
            font-size: calc(var(--font-size-xl) * 2)!important;
        }   
    
        main h2, main h2.flexheadline { 
            font-size: calc(var(--font-size-xl) * 1.25);
        }
    
        main h3, main strong a:not(.tellink):not(.tinyblock a), main .textteaserliste.typ-presse li a  {
            font-size: calc(1.375 * var(--font-size));
        }
    
        main b {
            font-size: var(--font-size-xl);
        }
    
        main li {
        font-size: var(--font-size-xl);
        }

        main li:not(.tinyblock):first-of-type:not(.abisz ul li) {
            padding-top: 1rem;
        }
            
        main figcaption .downloadbeschreibung {
            color: #2d2d2d!important;
            font-size: var(--font-size);
        }

       .downloadliste .inhalt > ul > li > a figure {
        font-size: var(--font-size-md); 
        }

        main figure {
            margin-bottom: var(--margin-default-sm);
        }

        figure {
            line-height: 1rem;
            margin: 0;
            margin: 0 0 1rem;
        }

        *, ::after, ::before {
            box-sizing: border-box;
        }


         main li a:not(time):not(.tellink):not(.typ-ubersichtsliste):before, #body main .teaser ul li a {
            font-size: var(--font-size-md)!important;
            }

         .downloadliste .inhalt > ul > li > a figure, main .download figure {
                font-size: 1.25rem;
        }

        main figcaption.downloadbeschreibung:before, main figcaption.downloadbeschreibung:after, main figcaption.downloadbeschreibung {
            font-size: calc(var(--font-size) * 1.25);
        }

        /* Links im Aside */
    #body aside article.listbox li a, #body aside a {
        font-size: calc(var(--font-size) * 1.25)!important;
        padding: .5rem 0;
         }

    aside .linkextern:before {
        background-position:0 0.625rem;
        }

    #body aside article.listbox li a:not(article[itemtype] a):before {
        content: '';
        background-position: 0 3px;
        background-repeat: no-repeat;
        background-image: url(/images/x22/icons/arrow-right-red.svg);
        margin-right: 0.25rem;
        background-size: 1.25rem;
        height: 1.3rem;
        width: 1.25rem;
        display: inline-block;
    }
}

/* Bildbeschriftung und Copyright */     

    .copyright + figcaption {
        padding-bottom: 10px;
    }

@media (min-width:1400px) {
/* Schriftgrößen wie im Design    */      
    
body main {
    font-size: var(--font-size-xxl);
    }
    
    main h1, main h1.articlehead, #body h1.articlehead {
        font-size: calc(var(--font-size-xxl) * 2)!important;
    }   
        
    main h2, main h2.flexheadline  { 
        font-size: calc(var(--font-size) * 1.5); 
    }

    main h2.unsichtbar {
            display: none;
    }

    main h3, main strong a:not(.tellink):not(.tinyblock a), main .textteaserliste.typ-presse li a, .accordionpanel h3, main .textteaserliste.typ-ubersichtsliste li a   {
          font-size: calc(1.375 * var(--font-size));  /* h3 sollte nicht größer als die Accordionhead sein geändert am 30.10.2023 (important) entfernt*/ 
          line-height: 1.75rem;    
          display: inline-block;
          margin-bottom: var(--margin-special-sm)!important;
          border-bottom: 1px solid transparent;
          /* padding: 0.25rem 0.25rem 0.25rem 0.25rem */
    }

    .tpl-2008_standard_bol_produkt main .accordionopen li h3 {
        display: block;
    }
       
    main p {
        font-size: var(--font-size-xxl);
    }
        
    main b {
            font-size: var(--font-size-xxl);
    }

    main li, #body .teaser ul li a, main .trefferliste_flex li {
        font-size: var(--font-size-xxl)!important;
        padding-top: 1rem;
    }

    .downloadliste .inhalt > ul > li > a figure, main .download figure {
        font-size: var(--font-size-xxl)
    }
  
/* Trefferliste Presse */
    main li a strong:before {
        content: '';
        background-position: 0 0;
        background-repeat: no-repeat;
        background-image: url(/images/x22/icons/arrow-right-red.svg);
        margin-right: 0.25rem;
        background-size: 1.5rem;
        height: 1.3rem;
        width: 1.5rem;
        display: inline-block;
    }

    main h3[itemprop="name"]:before {
        content: '';
        background-position: 0 0.2rem;
        background-repeat: no-repeat;
        background-image: url(/images/x22/icons/arrow-right-red.svg);
        margin-right: 0.5rem;
        height: 1.5rem;
        width: 1.5rem;
        display: inline-block;
        background-size: 1.5rem;
    }
 /* text mit Bild an Design anpassen */
        main .text-mit-bild figure.grid_1 {
            width: 36%!important;
            margin-right: 32px;
            box-shadow: unset;
            clear: both /* fix für DSGVO-Template */
     }


/* Bildbeschriftung und Copyright */     

    .copyright + figcaption {
        /* font-size:calc((var(--font-size))*0.8rem); */
        line-height: 1.25rem;
        font-weight: normal;
    }
        
        main li figcaption.downloadbeschreibung:before, main li figcaption.downloadbeschreibung:after  {
            color: #2d2d2d!important;
            font-size: calc(var(--font-size) * 1.35);
            
    }
    
    main figcaption.downloadbeschreibung {
        color: #2d2d2d!important;
        font-size: var(--font-size-md);
    }

    /* Korrektur Position der Icons bei Links */
    main .tinyblock a:before,
    main .linkintern.standardlink:before {
        background-position: 0 .1rem;
    }

    main .tinyblock a[target="_blank"]:before {
        width: .95rem;
        height: .95rem;
    }

    main a.linkemail.standardlink:before {
        background-position: 0 0.05rem;
    }

    /* Links im Aside */
    #body aside article.listbox li a:not(article[itemtype] a), #body
    aside a:not(article[itemtype] a):not(article.teaser.rahmen a) {
        font-size: var(--font-size-xxl)!important;
        padding: .5rem 0;
        text-indent: calc(var(--font-size) * -2.1);
        margin-left: calc(var(--font-size) * 1.5);
        padding-left: 0;
        display: inline-block;
    }

    aside section.trefferliste_flex.trefferliste li em   {
        line-height: 1rem;
        display: inline-block;
    }

    aside section.trefferliste_flex.trefferliste li + li {
        margin-top: var(--margin-default-sm);
    }

    #body aside article.listbox li a:not(article[itemtype] a):before {
        content: '';
        background-position: 0 2px;
        background-repeat: no-repeat;
        background-image: url(/images/x22/icons/arrow-right-red.svg);
        margin-right: 0.45rem!important;
        background-size: 1.5rem;
        height: 1.3rem;
        width: 1.5rem;
        display: inline-block;
    }

    #body aside article.listbox li a:not(article[itemtype] a) {
        border-bottom: 1px solid var(--gray-link);
        margin-bottom: 0px;
        color: var(--default-font-color);
        text-decoration: none;
        background-image: none;
        padding: 0.5rem 0;
        margin-top: 0.25rem;
        display: block;
        width: fit-content;
        font-family: var(--font-family-regular);
    }

    #body aside article.listbox li a.linkintern:before, aside a:not(article.teaser.rahmen a):before {
        margin-right: calc(var(--font-size)*0.7)!important;
    }
    
    aside .linkextern:before {
        background-position:0 0.625rem;
    }

    /* ausgeklappte Amtsblätter */

    main li a:not(time):not(.tellink):not(.typ-ubersichtsliste):before, #body main .teaser ul li a {
        font-size: var(--font-size-xl)!important;
    }


    main li figure time.pressedatum {
        color: var(--default-font-color)
    }

    /* (alter) Aufklapper Headline, kann leider nicht größer werden, da die Icon-Größe instyle festgelegt wird*/
    main .accordionhead h2.flexheadline, .accordionhead h2
    {
        margin: 0px;
        font-size: calc(var(--font-size) * 1.5);
        text-indent: calc(var(--font-size-xxl) * -1.5);
        margin-left: calc(var(--font-size-xxl) * 1.6);
    }   



}

/*-----------------------------Leichte Sprache Modul---------------------------------------------*/

.row.leichtesprache {
    margin-top: var(--margin-extra-sm);
}

body#body main div.ls > div.tinyblock  {
    font-family: Arial;
    font-weight: normal;
}

body#body main div.ls > div.tinyblock b,
body#body main div.ls > div.tinyblock strong {
    font-family: Arial;
    font-weight: bold;
}

@media (min-width: 1400px) {

/* Bilder werden auf eine Mindstgröße skaliert, wenn sie kleiner sind als die Content-Spalte Bsp: /artikel/67907/index.html Siehe auch viewports 768 bis 1400 */ 
.bildergalerie figure img {
    min-width: 856px;
    }

    /* Einrückung bullet points, wenn floating image left */
.text-mit-bild .fix .tinyblock li  {
    transform: translateX(32px);
    padding-right: 32px;
}

/* Schriftgröße Seite artikel/71642/index.html#ziel_0_199 */
body main .responsive-tables table thead th p{
    font-size: calc(var(--font-size-xxl)* 0.9);
}

}

@media (min-width: 1200px) and (max-width: 1400px) {
    body#body main .leichtesprache > .tinyblock p,
    body#body main .leichtesprache > .tinyblock li {
    line-height: 2.1!important;}
    .bildergalerie figure img {
        min-width: 736px;
    }

    /* Einrückung bullet points, wenn floating image left */
    .text-mit-bild .fix .tinyblock li  {
        transform: translateX(26px);
        padding-right: 26px;
}
    
}

@media (min-width: 768px) and (max-width: 1200px) {
    body#body main .leichtesprache > .tinyblock p,
    body#body main .leichtesprache > .tinyblock li  {
    line-height: 2.1!important; }
    .bildergalerie figure img {
        min-width: 576px;
    }

        /* Einrückung bullet points, wenn floating image left */
        .text-mit-bild .fix .tinyblock li  {
            transform: translateX(20px);
            padding-right: 20px;
    }
    }

@media (min-width: 575px) and (max-width: 768px) {
.text-mit-bild .links {
    padding-right: 1rem;
    margin-right: 1rem
}

}

@media(max-width: 575px) {
    main .text-mit-bild-inner figure.links, main .text-mit-bild-inner figure.rechts  {
      margin: auto;
    }
}


@media screen and (min-width: 100px) and (max-width: 768px) {
    body#body main .leichtesprache > .tinyblock p,
    body#body main .leichtesprache > .tinyblock li {
    line-height: 2.1rem!important;     
    }
    .bildergalerie figure img {
        min-width: 351px;
    }

    main h2, h2.flexheadline, main .accordionopen h2, main .accordionhead h2.flexheadline, main div + h2.flexheadline, main div + div div:has(h2.flexheadline) > h2.flexheadline:not(.accordionhead .flexheadline), main div + div:has(h2) > h2, .tpl-2008_standard_bol_produkt.moderncss div.accordionpanel + h2.flexheadline, main a.standardlink + div.accordionhead {
        font-size: 1.375rem;
    }

    main .accordionhead h2.flexheadline:before {
    content: '';
    background-image: url(/images/x22/icons/plus-red.svg);
    background-repeat: no-repeat;
    background-position-x: 0rem;
    background-position-y: 0.5rem;
    background-size: 2rem;
    position: relative;
    width: 2rem;
    height: 2rem;
    display: inline-block;
    transform-origin: 16px 24px;
    transition: ease .5s all;
    }
    
}

@media(max-width: 460px) {
    .videopreview.pratio {
        --bs-aspect-ratio: 177%!important;
    }

    .videopreview.pratio a.yt-preview-image {
        background-repeat: unset!important;
    }

}

/* 5.2.2025 Fix für Abstände links im Adressmodul (artikel/01183/index.html) */

.tpl-2003_standard_flex div.adressen dd[itemprop="address"] p a {
    margin-bottom: 0px;
} 

.tpl-2003_standard_flex div.adressen + a.standardlink {
    margin-top: -1.5rem!important;
}