@charset "utf-8";
/*
==================================================
Farben-Info
==================================================
- Txt - Rnd - Bg
- #ffffff (weiß) - Bg: body
- #000000 (schwarz) - Txt: Inhalt
- #c31924 (rot)


Klassen
=======

Struktur/Grid:
--------------
.row: 
- Füllt ganze Zeile oder steht allein und zentriert (.row-x)
- floatet nicht, aber hat clearfix eingebaut
- ist nicht relativ (absolute Elemente können daraus ausbrechen)
- hat standardmäßig kein padding oder vertikalen margin

.col 
- floatet
- ist 100% oder 1-12 Spalten breit (.col-n)
- ist relativ (absolute Elemente können nicht ausbrechen)
- hat standardmäßig Padding zu beiden Seiten, aber kein margin oder vertikales padding

.row.col-n
- bleibt row, übernimmt nur die Breite von col

.row-over
- bekommt Hintergrundfarbe o.ä. 
- hat über 1200px Screenbreite negatives margin und passendes padding zu den Seiten, damit Hintergrund ganz durchgeht
- hat auch vertikales margin und padding wegen des Hintergrunds
- hat deswegen besondere Interaktionen mit anderen .row-overs etc.

.col-headline
-

.reset-grid-padding 

.flex-grid

Gestaltung/Style:
-----------------
.box:
- 

.box-link

.img-link

.wrap-img
.wrap-imgs
.wrap-txt

.overlay


Helper:
-------
.no-list 

.menu

.btn
.btns

.cur
.act
.inact

.l
.r
.t
.b

*/

@font-face {
    font-family: 'iconfont_bh';
    src: url('../fonts/fontello/font/iconfont_bh.woff2?0a5fbfb8') format('woff2'),
    url('../fonts/fontello/font/iconfont_bh.woff?0a5fbfb8') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'thesans';
    src: url('../fonts/TheSans_B2_500_.woff2?2579689') format('woff2'),
    url('../fonts/TheSans_B2_500_.woff?2579689') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'thesans';
    src: url('../fonts/TheSans_B2_700_.woff2?2579689') format('woff2'),
    url('../fonts/TheSans_B2_700_.woff?2579689') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'thesans';
    src: url('../fonts/TheSans_B2_500i.woff2?2579689') format('woff2'),
    url('../fonts/TheSans_B2_500i.woff?2579689') format('woff');
    font-weight: normal;
    font-style: italic;
}

/* ----- Reset Style ----- */
* {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    font-style: inherit;
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    text-align: inherit;
    vertical-align: baseline;
    border: 0;
    background: transparent;
}
:not(:focus-visible) {
    outline: none;
}

/*
==================================================
Variablen
==================================================
*/
body, [class^="bg-"], [class*=" bg-"],
html body .bg-nonwhite .bg-switch,
[class*="if-hover__bg-"]:hover,
.act > [class*="if-parentact__bg-"] {
    /* Farb-Zuordnung */
    --color-txt: #000;
    --bgcolor-default: #fff;

    /* -adapt-: Farbe ist primär das was dransteht, passt sich aber an (wird weiß), wenn sie der Hintergrundfarbe (gesetzt durch .bg-*) entspricht */
    --color-adapt-main: var(--color-main);
    --color-adapt-main-2: var(--color-main-variant);

    --color-adapt-contrast-on-adapt-main: var(--color-contrast);

    /* -if-: Farbe ist primär das was dransteht, passt sich aber an, wenn die Bedingung erfüllt ist */
    --color-adapt-white--main-if-bg-main: #fff;
    --color-adapt-main--white-if-bg-main: var(--color-main);

    /* -equals-: Farbe entspricht immer der Hintergrundfarbe (gesetzt durch .bg-*) */
    --color-equals-bg: var(--bgcolor-default);

    /* Button-Farben*/
    --color-btn: var(--color-adapt-white--main-if-bg-main);
    --bgcolor-btn: var(--color-adapt-main--white-if-bg-main);
    --color-btn-hover: var(--color-btn);
    --bgcolor-btn-hover: var(--color-adapt-main-2);
    --color-btn-inact: var(--color-btn);
    --bgcolor-btn-inact: hsl(0, 0%, 71%); /* #b4b4b4 */
    --color-btn-act: var(--color-btn);
    --bgcolor-btn-act: var(--color-adapt-main-2);
    --border-btn-width: 0;
    --border-btn-width-hover: 0;
    --bordercolor-btn: transparent;

    --color-link-hover: #999;

    --color-input: #000;
    --bgcolor-input: #eee;

    --color-icon: currentcolor;

    --color-bgicon: #fff;

    --bgcolor-overlay: rgba(255, 255, 255, 0.85);
    --bordercolor-trans: var(--color-black-trans-03);
    --bordercolor-hr: var(--color-main);

    color: var(--color-txt);
}
body {
    --rgb-main: 195, 25, 36;
    --color-main: rgb(var(--rgb-main));
    --color-main-variant: #d61b27;
    --color-main-variant2: #a51d26;
    --color-main-trans-085: rgba(var(--rgb-main), 0.85);
    --color-main-trans-06: rgba(var(--rgb-main), 0.6);

    --color-secondcolor: #979797;
    --color-lightgray: #eee;
    --color-dark: #2e2e2e;

    --color-contrast: #fff; /* Besserer Kontrast zur hellen oder dunklen Hauptfarbe: #000 oder #fff */

    /* Für Dom-Template; allgemein gesetzt, da auch für Hotspots benötigt */
    --rgb-secondary: 151, 151, 151; /* entspricht hier "secondcolor", beim Dom aber nicht */
    --color-secondary: rgb(var(--rgb-secondary));
    --color-secondary-trans: rgba(var(--rgb-secondary), 0.6);

    --color-black-trans-03: rgba(0, 0, 0, 0.3);
    --color-white-trans-04: rgba(255, 255, 255, 0.4);

    /* Schriftgrößen etc. */
    --ffamily-thesans: 'thesans', Arial, Helvetica, sans-serif;
    --ffamily: var(--ffamily-thesans);

    --fsize: 1.6rem;
    --fsize-h1: 4rem;
    --fsize-h2: 3.2rem;
    --fsize-h3: 2rem;
    --fsize-h4: 1.8rem;
    --fsize-sm: 1.4rem;

    --fsize-h5: var(--fsize);
    --fsize-h6: var(--fsize-sm);

    --fsize-menu0: 1.6rem;

    --lh: 1.5;
    --lh-h1: 1.1;
    --lh-h2: 1.2;
    --lh-h3: 1.3;
    --lh-h4: 1.4;

    /* Größen / Abstände */
    --gap-sm: 0.8rem;
    --gap-sm-neg: calc(0px - var(--gap-sm));
    --gap-std: 1.5rem;
    --gap-std-neg: calc(0px - var(--gap-std));
    --gap-dbl: calc(var(--gap-std) * 2);
    --gap-dbl-neg: calc(0px - var(--gap-dbl));
    --gap-big: 4rem;
    --gap-big-neg: calc(0px - var(--gap-big));

    --hgap-grid: 15px;
    --hgap-grid-dbl: calc(var(--hgap-grid) * 2);
    --hgap-grid-dbl-adapt: var(--hgap-grid); /* Dbl width nur bei breiterem Template wie Dom */
    --hgap-grid-neg: calc(0px - var(--hgap-grid));

    --vgap-grid: 15px;
    --vgap-grid-dbl: calc(var(--vgap-grid) * 2);
    --vgap-grid-neg: calc(0px - var(--vgap-grid));


    --margin-t-rowover: 30px;
    --margin-b-rowover: 40px;
    --padding-t-rowover: 40px;
    --padding-b-rowover: 30px;
    --margin-t-rowover-neg: calc(0px - var(--margin-t-rowover));
    --margin-b-rowover-neg: calc(0px - var(--margin-b-rowover));
    --padding-t-rowover-neg: calc(0px - var(--padding-t-rowover));
    --padding-b-rowover-neg: calc(0px - var(--padding-b-rowover));

    --margin-b-paragraph: 14px;

    --padding-b-teaser-for-btn: 3.6em;

    --maxw-contentarea: 1200px;
    --width-contentarea: min(var(--maxw-contentarea), 100vw);
    --hgap-windowtocontent: calc(50vw - var(--width-contentarea) / 2);
    --hgap-windowtocontent-neg: calc(0px - var(--hgap-windowtocontent));

    --width-dt: 140px;
    --width-dt-sm: 110px;
    --hgap-dt: 10px;

    --height-icon: 1.2em;
    --height-bgicon: 40vw;
    --translate-bgicon: translate(-35%, 46%);
    --pos-t-bgicon: auto;
    --pos-l-bgicon: 0;

    --fweight-btn: inherit;
    --width-arrow-btn: 19px;
    --padding-btn: 7px 16px;
    --texttransform-btn: uppercase;

    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor.png);
}

.color-light {
    --color-contrast: #000;
}
/*
==================================================
Grundeinstellungen
==================================================
*/
html {
    font-size: 62.5%;
    overflow-y: scroll;
    box-sizing: border-box;
    min-width: 320px;
    height: 100%;
    background: #fff;
}
body {
    font: var(--fsize)/var(--lh) var(--ffamily);
    position: relative;
    overflow: hidden;
    min-height: 100%;
    margin: 0 auto;
    text-align: left;
}

/*
==================================================
Standardelemente
==================================================
*/
h1, h2, h3, p, table, ul, ol, blockquote, form, .h2, .h3, .h4, dd {
    margin-bottom: var(--margin-b-paragraph);
}
ul, ol {
    margin-bottom: 21px;
}
legend {
    max-width: 58.5em;
    margin-bottom: 10px;
}
b, strong, h5, h6, dt, th, caption, .intro-paragraph {
    font-weight: bold;
}
em, i, q, blockquote, #kesearch_results .hit {
    font-style: italic;
}

sup, sub {
    font-size: 0.8em;
    position: relative;
    bottom: 0.4em;
}
sub {
    top: 0.25em;
    bottom: auto;
}

ul {
    list-style: none;
}
ol {
    list-style: decimal outside;
}

li {
    position: relative;
    margin: 0 0 7px 1.8em;
}
ul > li:before {
    position: absolute;
    top: 0.2em;
    left: -1.8em;
    width: 1em;
    height: 1em;
    content: '';
}

.no-list {
    list-style: none;
}
.no-list > li {
    margin: 0;
}
.no-list > li:before {
    display: none;
}
ul.schlanke-liste {
    list-style: none;
}
.schlanke-liste > li {
    margin: 0 0 0 0.6em;
}
.schlanke-liste.schlanke-liste.schlanke-liste > li:before {
    top: 0;
    left: -0.6em;
    width: auto;
    content: '•';
    color: inherit;
    background: 0 !important; /* in Schul-Templates wird Hintergrundfarbe mit !important gesetzt */
}
ol.alpha-liste {
    list-style-type: lower-alpha;
}
.ce-menu-sitemap ul ul {
    padding-top: 0.7em;
}

h3, h4, h5, h6, p, ol, ul, .h3, .h4 {
    max-width: 65em;
}


h1, .h1 {
    font-size: var(--fsize-h1);
    line-height: var(--lh-h1);
}
h2, .h2 {
    font-size: var(--fsize-h2);
    line-height: var(--lh-h2);
}
h3, html .main-headline p, .main-headline + .col-headline p:first-child, .h3 {
    font-size: var(--fsize-h3);
    line-height: var(--lh-h3);
}
h4, .col-headline p, .h4 {
    font-size: var(--fsize-h4);
    line-height: var(--lh-h4);
    margin-bottom: 7px;
}
.col-headline p {
    margin-top: var(--margin-b-paragraph);
}
.col-headline > p:first-child {
    margin-top: 0;
}
h6 {
    font-size: var(--fsize-h6);
}
.big-calltoaction {
    font-size: 3.3rem;
    font-weight: normal;
    line-height: 1.1;
}

.csc-textpic h2, .csc-textpic .h2, .csc-textpic h3, .csc-textpic .h3, .csc-textpic h4, .csc-textpic .h4 {
    padding-top: 0.2em;
}

.col-headline * {
    max-width: 100%;
    margin-bottom: 0;
}
.volle-breite {
    max-width: none;
}
.abstand-oben-minus-5 {
    margin-top: -5px;
}
.abstand-oben-minus-10 {
    margin-top: -10px;
}
.abstand-oben-minus-15 {
    margin-top: -15px;
}
.indent {
    padding-left: 30px;
}
span.indent {
    display: block;
}

/*Für flexible Layouts*/
img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}
.map-canvas img {
    object-fit: initial;
}
object, embed, video, iframe {
    display: block;
    max-width: 100%;
    margin: 0 auto var(--margin-b-paragraph);
}
.embed-container {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    height: 0;
    margin: 0 var(--hgap-grid) var(--margin-b-paragraph);
    /* vom Kunden per HTML eingefügt, für Youtube-Videos */
    padding-bottom: 56.25%;
}
.embed-container iframe, .embed-container object, .embed-container embed, .embed-container .map-canvas, .embed-container > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ece-media-type-localvideo .embed-container {
    padding-bottom: 67% !important;
}
.ece-media-type-localvideo .embed-container video {
    width: 100%;
    height: auto;
}
.col > .embed-container {
    margin: 0 0 var(--margin-b-paragraph);
}
.video-responsive-wrapper {
    position: relative;
    margin: 0 auto var(--margin-b-paragraph);
    padding-top: 56%;
}
.video-responsive-wrapper iFrame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.wrap-img img {
    display: block;
}
.no-padding > iframe, #main > iframe {
    padding: 0 var(--hgap-grid) var(--vgap-grid);
}

a {
    border-bottom: 1px solid var(--bordercolor-trans);
}
a.img-link, .box-link > a, .fancybox-overlay a, .slider-controls a, .wrap-img a, a.no-border, .box-full-link a {
    border: 0;
}
a:link, a:visited {
    text-decoration: none;
    color: inherit;
}
a:hover {
    color: var(--color-link-hover);
}
.box-link > a {
    display: block;
}
.box-link > a, .box-full-link {
    --color-link-hover: var(--color-txt);
}

dl {
    overflow: hidden;
}
dt {
    float: left;
    clear: both;
    width: var(--width-dt);
    margin-right: var(--hgap-dt);
    margin-bottom: 20px;
    border-bottom: 1px dotted #bbb;
}
dd {
    float: left;
    width: 100%;
    margin-left: calc( (var(--width-dt) + var(--hgap-dt)) * -1 );
    padding-left: calc( var(--width-dt) + var(--hgap-dt) );
}
dd > *:last-child {
    margin-bottom: 0;
}

hr {
    clear: both;
    margin-bottom: var(--vgap-grid-dbl);
    padding-bottom: var(--vgap-grid-dbl);
    border-bottom: 2px solid var(--bordercolor-hr);
}
.divider {
    padding: 0 var(--hgap-grid);
}

/*Skip-Menü*/
.for-accessibility {
    position: absolute;
    top: -3000px;
    left: -3000px;
    width: 1px;
    height: 1px;
}
.for-accessibility:focus {
    z-index: 2000;
    top: 0;
    left: 5px;
    width: auto;
    height: auto;
    padding: 0;
}
del.schutz {
    text-decoration: none;
}
/*Für Standard E-Mail-Adressen-Spamschutz*/
/*
a[href^='javascript:linkTo_UnCryptMailto'] { display: inline-block;  max-width: 100%;  overflow: hidden; text-overflow: ellipsis; white-space:nowrap }*/


/* ----- Tabellen ----- */
/*per Default "unsichtbare" Tabelle ohne Borders*/
table {
    width: 100%;
    border-collapse: collapse;
}
td, th {
    padding: 3px 10px 3px 0;
    vertical-align: top;
    border: 0; /*width: auto !important;*/
}
table p {
    margin: 0 0 8px;
}
table p:last-child {
    margin: 0;
}

/*Für Tabellen mit Linien unter jeder Zeile*/
table.daten {
    margin-bottom: 20px;
}
.daten *:first-child + td {
    text-align: right;
    vertical-align: bottom;
}
.daten td, .daten th {
    border-bottom: 1px solid #686868;
}



/* ----- Formulare ----- */
form.cr_form button,
input, select, textarea {
    float: left;
    width: 66.6667%;
    height: 40px;
    padding: 4px 10px;
    color: var(--color-input);
    background-color: var(--bgcolor-input);
}
form button {
    min-height: 40px;
}
.powermail_field {
    float: left;
    clear: none;
    width: 66.6667%;
    padding-bottom: 0;
}
.powermail_fieldwrap_type_text .powermail_field {
    width: 100%;
    max-width: 58.5em;
}
.powermail_field input, .powermail_field select, .powermail_field textarea {
    width: 100%;
}
form.cr_form button,
input {
    line-height: 2rem;
}
select {
    position: relative;
    z-index: 10;
    padding: 9px 6px 9px 3px;
}
textarea {
    width: 66.6667%;
    height: 10em;
}
.wrap-label {
    float: left;
    width: 32.3333%;
    margin: 1px 1% -1px 0;
}
label {
    display: block;
    border-bottom: 1px dotted #bbb;
}
.additional-field-info {
    font-size: 0.9em;
    float: none;
    margin: 6px 0 0;
    opacity: 0.6;
}
label[for] {
    cursor: pointer;
}
/* Placeholder-Text heller */
:-ms-input-placeholder {
    opacity: 1;
    color: #999;
}
::-webkit-input-placeholder {
    opacity: 1;
    color: #999;
}
::-moz-placeholder {
    opacity: 1;
    color: #999;
}
:placeholder-shown {
    opacity: 1;
    color: #999;
}

input[type="file"] {
    width: min(350px, 100%);
    padding: 5px;
}

form {
    clear: both;
}
fieldset {
    float: left;
    clear: both;
    width: 100%;
    margin-bottom: 20px;
}
form div {
    position: relative;
    float: left;
    clear: both;
    width: 100%;
    padding-bottom: 10px;
}


form p {
    float: left;
    width: 100%;
    margin-top: 12px;
}
form h2 + p, form h2 + div p, form p + div p {
    margin-top: 0;
}
.no-title > legend, .no-title > h3 {
    display: none;
}
form > div:first-child {
    padding-bottom: 0;
}

/* radio und checkbox */
input[type="checkbox"] ~ label, input[type="radio"] ~ label {
    width: auto;
    margin-left: 38%;
    border: none;
}
input[type="checkbox"], input[type="radio"] {
    position: absolute;
    top: 3px;
    left: 33.3333%;
    width: 13px;
    height: 13px;
    padding: 0;
    border: 0;
    background: transparent;
}
input[type="radio"] {
    border-radius: 50%;
}
/* powermail-spezifisch
div + div > fieldset {margin-top:20px;}
fieldset > div:last-child > fieldset {margin-bottom:0;}
*/

/* iOS-Style entfernen (mit gesetztem border-radius oben) */
input[type=submit], input[type=search] {
    appearance: none;
}

.nolabel > legend, .nolabel > h3 {
    display: none;
}

.tx-powermail ul.powermail-errors-list {
    clear: both;
    margin-left: 33.33%;
    padding-top: 10px;
}
.powermail-errors-list li:before {
    background: red !important;
}
.powermail_field ul.powermail-errors-list {
    margin: 0;
}
.powermail_captcha_outer {
    clear: none;
    width: 66.6667%;
}
.powermail_captcha_outer > * {
    width: 100%;
    max-width: 229px;
}
.powermail_captcha_outer input, .powermail_captcha_outer div {
    margin-right: 10px;
}

.powermail_field_error_container, .powermail_fieldwrap > fieldset > div {
    padding: 0;
}
.powermail_fieldwrap > fieldset {
    margin: 0;
}

form[action*=tx_felogin] legend {
    display: none;
}
form[action*=tx_felogin] label {
    border: 0;
}
form[action*=tx_felogin] label input {
    display: block;
    float: none;
}


form .col {
    margin-bottom: var(--vgap-grid);
}
form .col input[type=submit] {
    width: auto;
    margin-left: 0;
}
.wrap-field-search:after {
    font-family: "iconfont_bh";
    font-size: 1.375em;
    position: absolute;
    top: 4px;
    right: 25px;
    content: "s";
    text-transform: none;
    pointer-events: none;
    color: #fff;
}
.venue-search-form > div:first-child {
    padding-bottom: 0;
}

.event-registration form > h3 {
    display: none;
}

.tx-mmc-guestbook input.h {
    display: none;
}
.tx-mmc-guestbook .error label {
    color: red;
}


/* ----- Hauptbereiche ----- */
#header {
    z-index: 100;
}
#main {
    position: relative;
    margin-bottom: 40px;
}
#footer {
    clear: both;
    padding-bottom: 45px;
}


/*
==================================================
Responsive Gridsystem
==================================================
Funktioniert ähnlich wie Twitter Bootstrap:
row = row
col-X = spanX
*/

.col, *[class^="col-"], *[class*=" col-"], .box {
    position: relative;
    float: left;
    width: 100%;
    min-height: 1px;
    margin: 0;
    padding: 0 var(--hgap-grid);
    list-style: none;
}
.col-1 {
    width: 8.3333%;
}
.col-2 {
    width: 16.6667%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.3333%;
}
.col-6 {
    width: 50%;
}
.col-8 {
    width: 66.6667%;
}
.col-9 {
    width: 75%;
}
.max-col-6 {
    max-width: 50%;
}

/* .row kann jetzt auch durch col-n eine entsprechende Breite bekommen. */

.row, .row-12 {
    position: static;
    display: block;
    float: none;
    clear: both;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
}
.row:after, .row-12:after, form:after, .layer-container:after, .slider-outer:after {
    line-height: 0;
    display: table;
    clear: both;
    content: '';
}
.row-12 {
    max-width: var(--width-contentarea);
}

html .col-2.w-static {
    width: 200px;
}
.m-l-2 {
    margin-left: 200px;
}
.m-r-2 {
    margin-right: 200px;
}
@media screen and (max-width: 900px) and (min-width: 751px) {
    .col-6 .col-2.w-static {
        width: 40%;
    }
    .col-6 .m-l-2 {
        margin-left: 40%;
    }
    .col-6 .m-r-2 {
        margin-right: 40%;
    }
}

@media screen and (max-width: 500px) {
    html .col-2.w-static {
        width: 40%;
    }
    .m-l-2 {
        margin-left: 40%;
    }
    .m-r-2 {
        margin-right: 40%;
    }
}

@media screen and (min-width: 501px) {
    .p-h-sm {
        padding-right: 8px;
        padding-left: 7px;
    }
    .p-h-sm .p-h-sm {
        padding-right: 7px;
        padding-left: 8px;
    }
}

/*Row-Schatten, Deco, etc.*/
.row-over {
    width: 100vw;
    margin: var(--margin-t-rowover) var(--hgap-windowtocontent-neg) var(--margin-b-rowover);
    padding: var(--padding-t-rowover) var(--hgap-windowtocontent) var(--padding-b-rowover);
}
body:not(.row-12) > .row-over {
    width: auto;
}
.row-over:first-child {
    margin-top: 0;
}
.row-over:before {
    line-height: 0;
    display: table;
    content: '';
}
.col-headline {
    padding-top: var(--padding-t-rowover);
    padding-bottom: var(--padding-b-rowover);
    text-align: center;
}
.row-over .col-headline:last-child {
    padding-bottom: 0;
}
.row-over-special {
    margin: 40px 0;
    padding: 0;
}
.row-fullscreen {
    padding-right: 0;
    padding-left: 0;
}

.row-over + .row:not(.row-over) > * > .col-headline:first-child {
    padding-top: 0;
}

.row-over + .row-over {
    margin-top: var(--margin-b-rowover-neg);
}
.row-over + .col-headline, .col-headline + .col-headline,
.col-headline + div > .col-headline:first-child,
.row-over > * > .col-headline,
.row-over > *:first-child, * + .main-headline, #main * .main-headline,
.row-over + .mainpage-subsite-addition .col-headline:first-child {
    padding-top: 0;
}

.main-headline + .col-headline {
    margin-top: -16px;
}
.main-headline + .col-headline h2 {
    padding-top: 16px;
}

.has-deco-b + .row-over {
    margin-top: -60px;
    padding-top: 100px;
}
.shadow-line + .row-over {
    margin-top: -50px;
}
#main > .col-headline:first-child {
    padding-top: 20px;
}

.shadow-line + .col-headline, .shadow-line + div > .col-headline:first-child, .shadow-line + .mainpage-subsite-addition .col-headline:first-child {
    padding-top: 15px;
}

/*50px Überlappung für Footer-Pfeil*/
#main > .row-over:last-child {
    margin-bottom: -90px;
    padding-bottom: 90px;
}
.row-over.bg-nonwhite, .area.bg-nonwhite {
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.15) inset;
}

.wrap-img {
    position: relative;
}
.tx-etagenttaddressaddon-pi1 .wrap-img {
    float: left;
    clear: both;
}
.box .wrap-img {
    float: left;
    margin: 0 var(--hgap-grid) var(--vgap-grid) 0;
}
.box > .line-bottom {
    margin-bottom: var(--vgap-grid);
    padding-bottom: 20px;
}
.box:last-child > .line-bottom:not(.line-bottom-all), .list-gottesdienste:last-child .line-bottom {
    padding-bottom: 0;
    border: 0;
}
.box:last-child > .line-bottom-all {
    margin-bottom: var(--vgap-grid);
}


a:hover h3 {
    color: #000;
}

html .csc-textpic-imagewrap .wrap-img, html .article .wrap-img, html .gallery .wrap-img {
    margin-bottom: var(--vgap-grid);
}


/*
Hintergründe
==================================================
- oft mit .row-over

ACHTUNG!
.bg-secondary nicht mit .bg-secondcolor verwechseln (das ist aus historischen Gründen ein Mittelgrau)
*/
[class^="bg-"], [class*=" bg-"],
#main .bg-lightgray {
    color: var(--color-txt);
}
.bg-maincolor, .bg-secondcolor, .bg-lightgray, .bg-dark,
.bg-secondary,
.bg-default,
.if-hover__bg-maincolor:hover,
.act > .if-parentact__bg-maincolor,
.bg-nonwhite .bg-switch {
    background-color: var(--color-equals-bg);
    --bgcolor-input: #fff;
}
.bg-dark,
.bg-secondary,
body:not(.color-light) .bg-maincolor,
body:not(.color-light) .if-hover__bg-maincolor:hover,
body:not(.color-light) .act > .if-parentact__bg-maincolor {
    --color-txt: #fff;
    --bordercolor-trans: var(--color-white-trans-04);
    --color-link-hover: #ddd;
}

.bg-maincolor,
.if-hover__bg-maincolor:hover,
.act > .if-parentact__bg-maincolor {
    --color-equals-bg: var(--color-main);
    --color-adapt-white--main-if-bg-main: var(--color-main);
    --color-adapt-main--white-if-bg-main: #fff;
    --color-adapt-main: var(--color-contrast);
    --color-adapt-contrast-on-adapt-main: var(--color-main);
    --color-adapt-main-2: #ccc;
    --color-txt: var(--color-contrast);
    --bordercolor-hr: var(--color-white-trans-04);
    --bgcolor-overlay: var(--color-main-trans-085);
}
.bg-secondcolor {
    --color-equals-bg: var(--color-secondcolor);
    --color-link-hover: #666;
}
.bg-lightgray {
    --color-equals-bg: var(--color-lightgray);
    --color-bgicon: var(--color-secondcolor);
}
.bg-dark {
    --color-equals-bg: var(--color-dark);
    --bordercolor-hr: var(--color-white-trans-04);
}
.bg-secondary {
    --color-equals-bg: var(--color-secondary);
    --color-adapt-main: #fff;
    --color-adapt-contrast-on-adapt-main: var(--color-main);
    --color-adapt-main-2: #ccc;
    --color-adapt-secondary: #fff;
}
.bg-default {
    --color-equals-bg: var(--bgcolor-default);
}

.bg-maincolor a.current {
    font-weight: bold;
    color: #fff;
}

/*
==================================================
Vorbereitete Klassen
==================================================
*/
/* Icons */
.icon-angle-left:before {
    content: '\3c';
}
/* '<' */
.icon-angle-right:before {
    content: '\3e';
}
/* '>' */
.icon-file-audio:before {
    content: '\61';
}
/* 'a' */
.icon-down-arrow81:before {
    content: '\64';
}
/* 'd' */
.icon-export:before {
    content: '\65';
}
/* 'e' */
.icon-facebook:before {
    content: '\66';
}
/* 'f' */
.icon-gplus:before {
    content: '\67';
}
/* 'g' */
.icon-file-image:before {
    content: '\69';
}
/* 'i' */
.icon-doc-text:before {
    content: '\70';
}
/* 'p' */
.icon-search:before {
    content: '\73';
}
/* 's' */
.icon-twitter:before {
    content: '\74';
}
/* 't' */
.icon-cross92:before {
    content: '\78';
}
/* 'x' */
.icon-youtube:before {
    content: '\79';
}
/* 'y' */
.icon-right-dir:before {
    content: '\bb';
}
/* '»' */
.icon-search-1:before {
    content: '\e80a';
}
/* '' */
.icon-calendar:before {
    content: '\e80b';
}
/* '' */
.icon-instagram:before {
    content: '\f16d';
}
/* '' */

.fa-twitter:before {
    font-family: "iconfont_bh";
    content: '\74';
}


/*
====================================================================================================
SVG-Icons
====================================================================================================
SVG-Code wird direkt ins HTML geschrieben. Siehe templates/private/_ts_setup/00_svg_icons.typoscript
*/
.svg-icon {
    display: inline-block;
    flex-shrink: 0;
    width: var(--height-icon);
    height: var(--height-icon);
    vertical-align: text-bottom;
    color: var(--color-icon);
}

:is(p, h1, h2, h3, h4, h5, h6) > .svg-icon {
    width: auto;
}
.wrap-img .icn-img {
    --height-icon: 100%;
}



/* ----- Buttons ----- */
/*
Allgemeine Klassen für Links, submits und spans, die wie Buttons aussehen sollen.
Einfach .btns an einen wrap vergeben, der mehrere Links enthält (z.B. pagebrowser),
oder .btn auf einen einzelnen Link, submit oder anderes Element.

.inact: Button ist inaktiv und kann nicht gedrückt werden (z.B. "Seite zurück" auf erster Seite im pagebrowser); alternativ einfach <span> statt <a>
.cur: Button ist momentan gedrückt (z.B. aktuelle Seite im pagebrowser)
*/
button {
    cursor: pointer;
}
.btns {
    clear: both;
}
.btns li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bg-secondcolor .btn,
.btns a, html .btn, .btns span, input[type="submit"], form.cr_form button, button.et-cookie__accept-current {
    font-weight: var(--fweight-btn);
    position: relative;
    float: left;
    margin: 0 10px 10px 0;
    padding: var(--padding-btn);
    cursor: pointer;
    transition: 0.2s ease-out;
    text-align: center;
    text-decoration: none;
    text-transform: var(--texttransform-btn);
    color: var(--color-btn);
    border: none;
    background: var(--bgcolor-btn);
    box-shadow: 0 0 0 var(--border-btn-width) var(--bordercolor-btn) inset;
}
body .btn-right {
    float: right;
    margin-right: 0;
    margin-left: 10px;
}
input.btn, input[type="submit"], form.cr_form button {
    clear: both;
    width: 33.3333%;
    min-width: 40px;
    margin: 10px 0 0 33.3333%;
    padding: 3px 5px;
}

.btns a.inact, .btns .inact a, .btns span,
.btns a.cur, .btns span.cur, .btns .cur a, .btns .cur span {
    cursor: default;
}

.arrow:not(.left):not(.top):not(.bottom) {
    margin-right: var(--width-arrow-btn);
}
.arrow.left {
    margin-left: var(--width-arrow-btn);
}
.arrow:after {
    position: absolute;
    top: 0;
    content: '';
    transition: inherit;
    color: var(--bgcolor-btn);
    border: var(--width-arrow-btn) solid;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
.arrow:not(.left):not(.top):not(.bottom):after {
    left: 100%;
    border-right-width: 0;
}
.arrow.left:after {
    right: 100%;
    border-left-width: 0;
}

a.klein {
    font-size: 13.5px;
    padding: 1px 4px;
}
.arrow.klein {
    float: right;
    --width-arrow-btn: 11px;
}

.layout-1 .area:not(.area-top), .layout-1 .bg-nonwhite {
    box-shadow: none;
}

.box-full-link {
    cursor: pointer;
}

p > .btn {
    margin-bottom: var(--margin-b-paragraph);
}
.csc-textpic p > .btn {
    display: inline-block;
    float: none;
}
.csc-textpic p > .btn:last-child {
    margin-bottom: 0;
}

.btn-danger {
    color: #fff !important;
    background: red !important;
}

/*
==================================================
Menüs
==================================================
li.act = ist in Rootline (= aktueller Bereich)
li.cur = ist genau aktuelle Seite
*/
.menu, .menu ul {
    float: left;
    max-width: none;
    margin: 0;
}
.menu li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu li:before {
    display: none;
}
html .menu a, html .menu li > * {
    display: block;
    text-decoration: none;
    border: 0;
}
li.cur > *, a.current {
    cursor: default;
}

.menu-top {
    margin: 0 -10px;
    color: var(--color-main);
}


/* Hauptmenü allgemein/Desktop */
.menu-0 {
    float: right;
}
.menu-0 li {
    position: relative;
}
.menu-0 > li > a, .menu-top a, .menu-sub a {
    padding: 8px 10px;
    text-transform: uppercase;
}
.menu-0 li li a {
    padding: 3px 20px;
    white-space: nowrap;
}
.menu-0 li ul {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    display: none;
    overflow: hidden;
    min-width: 160px;
    padding: 5px 0;
    border: 1px solid #ccc;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.menu-0 li:last-child ul, .menu-0 li:nth-last-child(2) ul {
    right: 0;
    left: auto;
}
.menu-0 > li:hover > ul, .menu-0 > li.touch-hover > ul {
    display: block;
}
.menu-0 li li {
    width: 100%;
}
.menu-0 .btn {
    font-size: inherit;
    line-height: inherit;
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    margin: 0;
    padding: 8px 15px;
    border-top: 1px solid #fff;
}
.menu-0 .btn:before {
    display: block;
    content: '>';
    transform: rotate(90deg);
}
.menu-0 li li .btn {
    padding: 3px 15px;
}

/* Hauptmenü Mobil */
.responsive-on .responsive-menu-btn {
    display: block;
}
.responsive-on .menu, .responsive-on .menu ul {
    overflow: hidden;
    width: 100%;
    min-height: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    transition: 0.4s;
}
.responsive-on .menu li {
    position: relative;
    display: block;
    float: none;
    width: auto;
    background: rgba(0, 0, 0, 0.05);
}
html .responsive-on .menu li a {
    padding-right: 40px;
    padding-left: 10px;
    white-space: normal;
    color: #000;
    border-top: 1px solid #fff;
    background: 0;
}
.responsive-on .menu ul {
    position: static;
    display: block;
    float: none;
    max-height: 0;
    padding: 0;
    border: 0;
    background: 0;
    box-shadow: none;
}
.responsive-on .menu li li {
    position: relative;
    margin: 0 var(--hgap-grid);
    padding: 0;
}
.responsive-on .menu li.opened > ul, .responsive-on .menu li.opened > div > ul, .responsive-on.opened .menu {
    max-height: 1600px;
}
.responsive-on .menu li.opened {
    padding-bottom: 10px;
    background: rgba(0, 0, 0, 0.07);
}
.responsive-on .menu a:hover {
    background: rgba(0, 0, 0, 0.06);
}
.responsive-on .menu .cur > a {
    color: var(--color-main);
}

.responsive-on + .area-menu-sub, .responsive-menu-0 .area-top .search-header {
    display: none;
}
.responsive-menu-0 .opened .search-header {
    display: block;
    margin: 10px 0 10px;
}
.responsive-on .menu-0 .btn {
    display: block;
}
.responsive-on .menu-0 .opened > .btn:before { /*transform:rotate(270deg);*/
}


/* Sub-Menü */
.menu-sub {
    font-size: 1.4rem;
}
.menu-sub a {
    text-transform: none;
}


/* Breadcrumbs */
.menu-breadcrumbs li {
    overflow: hidden;
    margin: 0 -13px 4px -1px;
    padding: 0 16px;
}
.menu-breadcrumbs li > * {
    position: relative;
    padding: 5px 1px 5px 9px;
    color: #fff;
    background: #999;
}
.menu-breadcrumbs li > *:before, .menu-breadcrumbs li > *:after {
    position: absolute;
    top: 0;
    content: '';
    color: #999;
    border: solid;
    border-width: 17px 0 17px 16px;
}
.menu-breadcrumbs li > *:before {
    right: 100%;
    border-left-color: transparent;
}
.menu-breadcrumbs li > *:after {
    left: 100%;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
.menu-breadcrumbs li:first-child {
    margin-left: 0;
    padding-left: 0;
}
.menu-breadcrumbs li:first-child a:before {
    display: none;
}
.menu-breadcrumbs a:hover {
    background: #bbb;
}
.menu-breadcrumbs a:hover:before, .menu-breadcrumbs a:hover:after {
    color: #bbb;
}
.menu-breadcrumbs li.cur > * {
    color: #000;
    background: #ddd;
}
.menu-breadcrumbs li.cur > *:before, .menu-breadcrumbs li.cur > *:after {
    color: #ddd;
}

.layout-subsite .area-breadcrumbs {
    padding: 0;
    background: #eee;
}
.layout-subsite .menu-breadcrumbs li {
    margin-bottom: 0;
}
.layout-subsite .menu-breadcrumbs li > *:before, .layout-subsite .menu-breadcrumbs li > *:after {
    display: none;
    border: 0;
}
.layout-subsite .menu-breadcrumbs li > * {
    padding: 8px;
    color: inherit;
    background: 0;
}
.layout-subsite .area-menu-sub {
    box-shadow: none;
}
.layout-subsite .menu-breadcrumbs li:after {
    line-height: 1.8em;
    position: absolute;
    top: 0;
    right: 0;
    content: '>';
}
.layout-subsite .menu-breadcrumbs li:hover {
    color: #777;
}
.layout-subsite .menu-breadcrumbs li.cur {
    color: #999;
}


.menu-archive, .menu-archive ul {
    line-height: 32px;
    width: 100%;
}
.menu-archive li {
    width: 100%;
}
.menu-archive > li {
    margin-bottom: 10px;
}
.menu-archive .year, .menu-archive a {
    margin: 0;
    padding-left: var(--hgap-grid-dbl);
}

.menu-pagination {
    line-height: 28px;
    position: relative;
    width: 100%;
}
.menu-pagination > .prev, .menu-pagination > .next {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
}
.menu-pagination > .next {
    right: 0;
    left: auto;
}
.menu-pagination > .pages {
    width: 100%;
    text-align: center;
}
.menu-pagination > .pages ul {
    position: relative;
    float: none;
    padding: 0 6.5em;
}
.menu-pagination > .pages li {
    display: inline-block;
    float: none;
}
.menu-add-padding > .pages li {
    margin: 0 2px;
}
.menu-pagination > .pages li > * {
    padding: 0 5px;
}
.menu-pagination li.cur.act:not(:has(a)) {
    padding: 0 5px;
}
.menu-pagination li.cur:only-child {
    display: none;
}
.menu-pagination > .first, .menu-pagination > .last {
    display: none;
}
.f3-widget-paginator > li {
    display: none;
}
.f3-widget-paginator > .prev, .f3-widget-paginator > .next, .f3-widget-paginator > .pages {
    display: block;
}

.list-gottesdienste + .page-navigation {
    margin-top: var(--vgap-grid);
}

.arrow {
    position: relative;
}
.neg-arrow:after {
    width: 20px;
    border: 14px solid;
}
.neg-arrow.right:after {
    border-left-color: transparent;
}
.neg-arrow.left:after {
    border-right-color: transparent;
}
.neg-arrow {
    padding: 0 10px;
}
#main .neg-arrow.left {
    margin-left: 34px;
}
#main .neg-arrow.right {
    margin-right: 34px;
}


/* Icons: iconfont_bh */
html .icon,
.slider-controls a,
h3.accordion-label:after,
.downloads li a:after,
.layout-subsite .menu-breadcrumbs li:after {
    font-family: 'iconfont_bh';
    font-size: 1.375em;
    text-transform: none;
}
h3.accordion-label:after {
    font-size: 1.1em;
    transform: rotate(90deg);
}

/* SVG-Icons in Linklisten (Dom) */
.csc-menu-default .svg-icon {
    margin-right: 1rem;
    --height-icon: 1.5em;
    --color-icon: var(--color-secondary);
}
body > :not(#footer) .csc-menu-default .svg-icon {
    display: none;
}

/* Footer: Social-Icons */
#footer .wrap-social-btn {
    float: left;
    padding: 0 var(--hgap-grid) var(--vgap-grid) 0;
}
#footer .wrap-social-btn:last-child {
    padding-right: 0;
}
#footer .wrap-social-btn a {
    position: relative;
    display: block;
    overflow: hidden;
    width: 40px;
    height: 40px;
    text-indent: -100em;
    color: white;
    border: 0;
    background: var(--color-main);
}
#footer .wrap-social-btn a:after {
    font-family: 'iconfont_bh';
    font-size: 30px;
    line-height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: 'f';
    text-align: center;
    text-indent: 0;
}
#footer a[href*='twitter.']:after {
    content: 't';
}
#footer a[href*='youtube']:after {
    content: 'y';
}
#footer a[href*='instagram']:after {
    content: '';
}
#footer a[href*='google.']:after {
    font-size: 25px;
    content: 'g';
}
#footer a:has(.svg-icon):after {
    display: none;
}

#footer .logo, #footer .footer-logo img {
    display: block;
}
#footer .footer-logo > * + * {
    margin-top: 2rem;
}



/*
==================================================
Header, Footer, Seiteninhalte
==================================================
*/
#logo {
    float: left;
    width: 184px;
    margin: -35px var(--hgap-grid-dbl) 18px 0;
    border: 0;
}
.layout-subsite #logo {
    width: auto;
    max-width: 300px;
}
#logo img, #logo a {
    display: block;
    border: 0;
}
#logo h1 {
    font-size: inherit;
    margin: 0;
}
#logo .logo-text {
    display: block;
    margin: 10px 0 -15px;
    text-transform: uppercase;
    color: #000;
}
#logo p:first-child {
    font-size: 2rem;
}
.responsive-menu-hide {
    float: right;
}
html .responsive-menu-btn {
    display: none;
    float: right;
    width: 35px;
    margin: 15px 0 0 5px;
    padding: 10px;
}
.responsive-menu-btn:before, .responsive-menu-btn:after {
    display: block;
    height: 3px;
    content: "";
    border: solid;
    border-width: 3px 0;
}
.responsive-menu-btn:after {
    border-top-width: 0;
}

.area-top .col-8 {
    margin: 0;
}

.area {
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
}

.search-header {
    position: relative;
    margin: 0;
}
.search-header input[placeholder] {
    width: 100%;
    padding-right: 40px;
}
.search-header input[type="submit"] {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    margin: 0;
}
.search-news input[type="submit"] {
    right: var(--hgap-grid);
}
.area-menu-0 .search-header {
    display: none;
}

.search-bar :-ms-input-placeholder,
.bg-maincolor:-ms-input-placeholder {
    color: #fff;
}
.search-bar ::-webkit-input-placeholder,
.bg-maincolor::-webkit-input-placeholder {
    color: #fff;
}
.search-bar ::-moz-placeholder,
.bg-maincolor::-moz-placeholder {
    color: #fff;
}
.search-bar :placeholder-shown,
.bg-maincolor:placeholder-shown {
    color: #fff;
}


/********************************************************
 Header-Suche
********************************************************/
.search-header.popup-search {
    position: relative;
    display: block;
    width: 35px;
    height: 35px;
    margin-bottom: 7px;

}
.responsive-on .search-header.popup-search {
    float: left;
    margin: 0;
}
.search-header.popup-search form {
    font-size: 1.8rem;
    position: absolute;
    z-index: 9999;
    right: 0;
    bottom: 0;
    clear: none;
    width: 100%;
    height: 100%;
    margin: 0;
    transition: 0.5s;
    opacity: 0;
}
.search-header.popup-search.is-open form {
    width: 30rem;
    opacity: 1;
}
.search-header.popup-search input[type="search"] {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0.08em 35px 0.08em 1rem;
}
.search-header.popup-search .btn {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    border: 0;
}
.search-header.popup-search button {
    font-size: 1.8rem;
    width: 35px;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.layout-jugend .wrap-field-search:after,
.layout-jugend form div.search-bar:after {
    font-family: 'iconfont_bh';
    right: 12px;
    content: '\e80a';
}
.layout-jugend .wrap-field-search:after {
    font-size: 19px;
    top: 8px;
    right: 27px;
}


.area-menu-0 {
    padding: 59px 0 10px;
}
.header-img {
    display: block;
}
.area-breadcrumbs {
    padding: 25px 0 15px;
}

/* Sprach-Menü (Dom) */
.menu-lang {
    margin-right: -0.5rem;
}
.menu-lang a {
    padding: 0.5rem;
}
.menu-lang .cur {
    font-weight: bold;
    pointer-events: none;
}

#footer {
    border-bottom: 20px solid var(--color-main);
}
#footer .row-12 {
    padding: 20px 0;
}


/*
==================================================
Inhalte .col-content
==================================================
*/

/* für et.slider */
.slider-outer {
    position: relative;
}
.slider-mask {
    position: relative;
    overflow: hidden;
}
.layer img {
    display: block;
}
.layer-counter {
    display: none;
}
.slider-controls {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1%;
}
.slider-controls a {
    font-size: 35px;
    position: absolute;
    top: -5000%;
    left: 0;
    overflow: hidden;
    width: 60px;
    height: 0;
    margin-top: -25px;
    transition: 0.2s;
    text-decoration: none;
    text-indent: -100em;
}
.slider-controls a.btn-forward {
    right: 0;
    left: auto;
}
.slider-controls .menu {
    float: none;
    margin: -30px auto;
}
.slider-controls li {
    width: 15px;
    height: 15px;
    cursor: pointer;
    background: #ddd;
}
.slider-controls li.act {
    cursor: default;
}
.slider-controls li + li {
    margin-left: 10px;
}
.dont-slide .slider-controls {
    display: none;
}
.slider-controls .inact {
    display: none;
}
/* Sorgt für übergangsfreien Wechsel zur Slider-Darstellung.
Anpassen, wenn mehrere layer gleichzeitig zu sehen sein sollen: */
.js .slider-outer > .layer + .layer {
    display: none;
}

.top-slider .slider-controls a {
    opacity: 0;
}
.top-slider:hover .slider-controls a {
    opacity: 1;
}
.top-slider img {
    width: 100%;
}
.top-slider-hildesheim .overlay {
    right: 0;
    left: auto;
    width: 600px;
    max-height: 55%;
    padding-top: 10px;
}
.top-slider .slider-controls .menu {
    margin-left: 30px;
}
.top-slider .slider-controls li + li, .textpic-slider .slider-controls li + li {
    margin-left: 15px;
}
.top-slider .caption, .textpic-slider .caption, .slider-6 .caption, .imgs-thumbnails .caption, .w-static .caption, .wrap-img.col-3 .caption {
    display: none;
}

@media screen and (max-width: 1190px) and (min-width: 1001px) {
    .top-slider-hildesheim .overlay {
        width: 800px;
    }
}

.top-slider-subsite .csc-textpic-text {
    overflow: hidden;
    padding: var(--vgap-grid-dbl) 0;
}
.top-slider-subsite .slider-controls .act {
    background: var(--color-main);
    box-shadow: 0 0 5px #fff;
}
.imgslider-txt .slider-controls .act {
    background: var(--color-main);
}

.wrap-teaser-slider {
    position: relative;
    overflow: hidden;
}
.teaser-slider .slider-mask {
    overflow: visible;
}
.teaser-slider .layer {
    display: flex !important;
    align-items: flex-start;
    grid-column-start: 1;
    grid-row-start: 1;
}

.teaser-slider .wrap-txt {
    margin-top: var(--vgap-grid);
}
.wrap-teaser-slider.layout-img-right .wrap-txt {
    padding-left: var(--hgap-windowtocontent);
    padding-right: var(--hgap-big-adapt);
}
.wrap-teaser-slider.layout-img-left .wrap-txt {
    padding-left: var(--gap-std);
    padding-right: max(var(--hgap-windowtocontent), var(--gap-dbl));
}
#aside + #main .teaser-slider .wrap-txt {
    padding-left: 0;
}
@media (min-width: 751px) {
    .teaser-slider .layer {
        align-items: stretch;
    }
    .teaser-slider .wrap-txt {
        margin: 0;
    }
    .wrap-teaser-slider.layout-img-right .wrap-txt {
        order: -1;
    }
}
@media (max-width: 750px) {
    .wrap-teaser-slider.layout-img-left .has-icon-left .icn-decoration {
        left: 0;
    }
    .teaser-slider .layer {
        align-content: start;
    }
    .teaser-slider .wrap-txt {
        padding-right: var(--gap-dbl);
        padding-top: var(--gap-dbl);
    }
}

.slider-with-thumbslider.slider-with-thumbslider .slider-controls a {
    line-height: 90px;
    width: 50px;
    height: 90px;
    margin: -45px var(--hgap-grid) 0;
    text-align: center;
    text-indent: 0;
    border: 0;
    background: rgba(225, 225, 225, 0.6);
}
.gallery-slider .slider-controls a {
    font-size: 50px;
}
.gallery-slider {
    padding: 0 var(--hgap-grid);
}
.gallery-slider .inner-wrap {
    position: relative;
    margin: 0 auto;
}

.textpic-slider .slider-controls a {
    overflow: visible;
    width: 45px;
}
.textpic-slider .slider-controls a:before, .top-slider-subsite .slider-controls a:before {
    position: absolute;
    bottom: 25px;
    content: '';
    color: #aaa;
    border: solid;
    border-width: 5px 7px;
    border-top-color: transparent;
}
.textpic-slider .slider-controls .btn-back:before, .top-slider-subsite .slider-controls .btn-back:before {
    right: 10px;
    border-left-color: transparent;
}
.textpic-slider .slider-controls .btn-forward:before, .top-slider-subsite .slider-controls .btn-forward:before {
    left: 10px;
    border-right-color: transparent;
}

.textpic-slider .wrap-img img, .top-slider-subsites .wrap-img img {
    width: 100%;
}

.source-news {
    font-size: 12px;
    text-align: right;
}
.external-news h3:before {
    font-family: "iconfont_bh";
    padding-right: 0.3em;
    content: "e";
    text-transform: none;
}

i.info {
    font-size: 1.6rem;
    color: #000;
}
p > i.info {
    font-size: 100%;
    color: inherit;
}
.has-info-r {
    position: relative;
    margin-right: 120px;
}
.has-info-r .info {
    position: absolute;
    right: -120px;
    bottom: -3px;
}

.has-info {
    overflow: hidden;
}
.has-info .weekday {
    float: left;
    width: calc( var(--width-dt) + var(--hgap-dt) );
}
.has-info .info-kalendarium {
    display: block;
    margin-left: calc( var(--width-dt) + var(--hgap-dt) );
}
.list-gottesdienste {
    width: 100%;
}
.list-gottesdienste, .tx-etagenttaddressaddon-pi1 .single {
    --width-dt: var(--width-dt-sm);
}
.list-gottesdienste + .list-gottesdienste {
    margin-top: 10px;
}
#main .list-gottesdienste dd * {
    margin: 0;
    color: inherit;
}

body .box-teaser .btn {
    margin-bottom: 1.1em;
}
.box-teaser h3 {
    min-height: 0;
}

.slider-with-thumbslider .menu {
    display: none;
}
.csc-textpic .slider-6 img {
    cursor: pointer;
}
.slider-with-thumbslider .wrap-img {
    margin: 0;
}
.slider-with-thumbslider > * {
    margin-bottom: var(--vgap-grid-dbl);
}

.slider-6.dont-slide .layer-container {
    margin: 0 auto !important;
}

.slider-with-thumbslider .layer .caption {
    padding-right: 50px;
}
.caption .info {
    position: absolute;
    right: 10px;
    bottom: 3px;
}
html .slider-controls.slider-controls a {
    color: #fff;
    border: 25px solid;
    background: 0;
}
html .slider-controls.slider-controls a.btn-forward {
    border-left-color: transparent;
}
html .slider-controls.slider-controls a.btn-back {
    border-right-color: transparent;
}

.slider-6.slider-6 .slider-controls a {
    line-height: 60px;
    width: 30px;
    height: 60px;
    margin-top: -30px;
}
.slider-6 .slider-mask {
    margin: var(--vgap-grid-neg) 0;
    padding: var(--vgap-grid) 0;
}
.js .slider-6 > .layer + .layer {
    display: block;
}
.js .slider-6 > .layer + .layer + .layer + .layer + .layer + .layer + .layer {
    display: none;
}
.slider-6 .layer {
    transition: transform 0.2s;
}

.caption {
    font-size: 1.4rem;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: none;
    margin: 0;
    padding: 3px 8px;
    color: #000;
    background: rgba(255, 255, 255, 0.6);
}
html .caption.caption.caption-below-img {
    position: static;
    margin: 0;
    background: rgba(200, 200, 200, 0.6);
}
a ~ .caption, a ~ .copyright {
    pointer-events: none;
}

.gallery .wrap-img a {
    position: relative;
    display: block;
}
html .gallery .overlay {
    font-size: 2rem;
    line-height: 0;
    height: 100%;
    padding: calc(50% - 8px) 0 0;
    text-align: center;
    color: #fff;
    --bgcolor-overlay: var(--color-black-trans-03);
}
.link-hidden {
    display: none;
}
.article .gallery {
    margin: 0 auto;
}

.gallery .col-3 img, .imgs-thumbnails img {
    width: 100%;
}

.accordion .accordion-label {
    float: none;
    margin-right: 0;
    text-align: left;
    text-transform: none;
}
h3.accordion-label {
    padding-right: 35px;
}
h3.accordion-label:after {
    position: absolute;
    top: 7px;
    right: 16px;
    content: '> ';
}
.act h3.accordion-label:after {
    transform: rotate(90deg);
}

/*
Flex-Unterstützung
==================================================
*/
/* veraltet */
.flex-grid {
    display: flex;
    clear: both;
    flex-wrap: wrap;
}
.flex-grid > * {
    display: flex;
}
.flex-grid > * > *:only-child {
    flex: 1 1 auto;
    width: 100%;
}
.flex-grid .wrap-img {
    float: none;
    margin-right: 0;
}
.events.flex-grid .list-teaser .wrap-img {
    float: left;
}

/* neu */
.flex-row {
    display: flex !important;
    flex-flow: row wrap;
}
.flex-row > * {
    flex: 0 1 auto;
}
.flex-col {
    display: flex;
    flex-direction: column;
}
.flex-center-children {
    display: flex;
    align-items: center;
    justify-content: center;
}


.reset-grid-padding > .wrap-img {
    margin-bottom: 0;
}
.reset-grid-padding > .wrap-img img, .box-teaser .wrap-img img {
    width: 100%;
}
.overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--hgap-grid);
    background: var(--bgcolor-overlay);
}
.box-bigcube .overlay {
    min-height: 50%;
}

.list-teaser .wrap-img + .wrap-txt {
    margin-left: 150px;
}
.events .list-teaser h3, .news-list-view .list-teaser h3 {
    text-decoration: none;
}
.list-teaser h3, .bg-nonwhite .list-teaser h3 {
    text-decoration: underline;
}
.events .list-teaser h3 {
    margin-bottom: 0;
}


/* Copyright+Caption (bei Bildern)*/
.copyright {
    font-size: 10px;
    line-height: 1.1;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    max-height: 2.5em;
    padding: 2px 8px;
    color: #000;
    background: rgba(255, 255, 255, 0.6);
}
.copyright + .copyright {
    display: none;
}
.wrap-img.col .copyright, .wrap-img[class^="col-"] .copyright, .wrap-img[class*=" col-"] .copyright,
.wrap-img.col .caption, .wrap-img[class^="col-"] .caption, .wrap-img[class*=" col-"] .caption {
    margin: 0 var(--hgap-grid);
}
.wrap-img.no-padding .copyright, .wrap-img.no-padding .caption, .wrap-img.full-size .copyright, .wrap-img.full-size .caption {
    margin: 0;
}
.wrap-img.p-h-sm .copyright, .wrap-img.p-h-sm .caption, .wrap-img.p-h-sm .overlay {
    margin: 0 8px;
}
.wrap-img.p-h-sm .overlay {
    pointer-events: none;
}
.list-teaser .copyright {
    top: 100%;
    width: 135px;
    padding-left: 0;
    color: #999;
    background: 0;
}
.bg-nonwhite .list-teaser .copyright {
    color: inherit;
}
.inline-copyright {
    font-size: 0.8em;
}


.box-teaser .wrap-txt, .box-cube a:hover .overlay, .box-cube a.touch-hover .overlay, .box-teaser .overlay:first-child {
    padding-bottom: var(--padding-b-teaser-for-btn);
}
.box-teaser .wrap-txt .btn:last-child {
    position: absolute;
    bottom: 0;
    left: var(--hgap-grid);
}
.box-teaser .wrap-txt p, .box-teaser .wrap-txt h3 {
    position: relative;
    overflow: hidden;
    max-height: calc(var(--maxlines-p) * var(--lh-p));
}
.box-teaser .wrap-txt h3 {
    max-height: calc(var(--maxlines-title) * var(--lh-title));
}
.box-teaser {
    --maxlines-title: 3;
    --lh-title: 1.3em;
    --maxlines-p: 6;
    --lh-p: 1.5em;
}
.box-cube {
    --lh-title: 1.4em;
}
.box-txtteaser {
    --maxlines-p: 14;
}
@media screen and (max-width: 1085px) and (min-width: 901px) {
    .box-cube {
        --maxlines-p: 4;
    }
}
@media screen and (max-width: 900px) and (min-width: 751px) {
    .box-cube {
        --maxlines-title: 2;
        --maxlines-p: 3;
    }
}
@media screen and (max-width: 1150px) and (min-width: 1001px) {
    .box-txtteaser {
        --maxlines-p: 13;
    }
}
@media screen and (max-width: 1000px) and (min-width: 751px) {
    .box-txtteaser {
        --maxlines-p: 12;
    }
}

.box-txtteaser {
    margin-bottom: var(--vgap-grid-dbl);
}
.box-imgteaser {
    margin-bottom: 20px;
}

/**
 * CSC Menu "Teaser-Boxen"
 * 2015-09-01
 * AS
 */
.box-cube .overlay {
    overflow: hidden;
    min-height: 4.5em;
    max-height: 100%;
    padding-top: 9px;
    padding-bottom: 0;
}
.box-cube .overlay p {
    font-size: 0.9em;
}
.box-teaser .overlay:first-child {
    position: relative;
}
.box-cube p, .box-cube .btn, .box-cube .overlay {
    transition: 0.3s;
}
.box-cube a:not(:hover):not(.touch-hover) .wrap-img + * p {
    margin: 0;
    opacity: 0;
    --lh-p: 0em;
}
.box-cube a:not(:hover):not(.touch-hover) .wrap-img + * .btn {
    margin-bottom: -30px;
    opacity: 0;
}


/* News-Teaser 1-3 (Dom-Template) */
.teaser-1-3 .wrap-txt {
    padding-bottom: 0;
}
.teaser-1-3 .col-8 .wrap-img {
    margin-bottom: var(--vgap-grid-dbl);
}
.teaser-1-3 .col-8 img {
    aspect-ratio: 1.95;
}
.teaser-1-3 .col-4 a {
    margin-bottom: var(--vgap-grid-dbl);
    column-gap: var(--hgap-grid);
}
.teaser-1-3 .col-4 .wrap-txt {
    flex: 1 1 50%;
}
.teaser-1-3 .col-4 .wrap-img {
    width: 9.7rem;
}
.teaser-1-3 .col-4 .copyright {
    display: none;
}
@media (max-width: 1200px) {
    .teaser-1-3 > div:is(.col-8, .col-4) {
        width: 100%;
    }
}

/* Downloads */
.downloads.downloads li a {
    display: block;
    float: none;
    margin-right: 0;
    padding-right: 50px;
    text-align: left;
    text-transform: none;
}
.downloads li a:after {
    position: absolute;
    top: 0;
    right: 10px;
    height: inherit;
    content: "d";
}
.info-size {
    white-space: nowrap;
}


html.fancybox-lock .fancybox-overlay {
    overflow: hidden;
}


.wrap-media {
    margin-bottom: var(--vgap-grid);
}
.wrap-audio .audiojs {
    width: 100%;
}
.wrap-audio .audiojs .play-pause {
    width: 37px;
}
.wrap-audio .audiojs .scrubber {
    width: calc(100% - 160px);
}
.wrap-audio .audiojs .time {
    width: 85px;
}
.mediaelement-video > a {
    max-width: 100%;
}

/*
==================================================
Deco-Elemente (Pfeile nach oben/unten über ganzen Screen)
==================================================
*/
.deco {
    float: left;
    width: 100%;
    background: url(../layout/deco-full-arrow-d-white.png) 50% bottom no-repeat;
    background-size: 100% 100%;
}
.deco-container, .deco {
    position: relative;
    height: 60px;
}
.row-12 .deco {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100vw;
    min-width: 320px;
    margin-left: -50vw;
}
#footer .deco {
    background-image: url(../layout/deco-full-arrow-t-white.png);
}

.bg-nonwhite + .deco-container {
    margin-top: var(--margin-b-rowover-neg);
}

#main .deco-container.shadow-line {
    height: 50px;
}
#main .deco-container.shadow-line .deco {
    bottom: 30px;
    height: 20px;
    background: #fff;
    box-shadow: 0 8px 8px -5px var(--color-black-trans-03);
}

/* Icon als BG-Dekoration (Dom) */
.row.has-icn-deco-bg {
    position: relative;
}
.icn-deco-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    --height-icon: var(--height-bgicon);
    --color-icon: var(--color-bgicon);
}
.icn-deco-bg svg {
    position: absolute;
    top: var(--pos-t-bgicon);
    right: 0;
    bottom: 0;
    left: var(--pos-l-bgicon);
    display: block;
    width: auto;
    transform: var(--translate-bgicon);
}
#footer {
    --translate-bgicon: translate(-10%, 10%);
    --height-bgicon: 28vw;
    --pos-t-bgicon: 0;
}
@media (min-width: 1800px) {
    #footer {
        --height-bgicon: 31vw;
    }
}
@media (max-width: 750px) {
    #footer {
        --height-bgicon: 45vw;
    }
}
@media (max-width: 550px) {
    #footer {
        --height-bgicon: 12rem;
        --pos-l-bgicon: auto;
        --translate-bgicon: translate(10%, -22%);
    }
}



/*
==================================================
Farben
==================================================
+ .btn-color
+ #footer-border
*/
.maincolor,
.maincolor__if-hover:hover,
*:hover > .maincolor__if-parenthover,
.act > .maincolor__if-parentact,
.cur > .maincolor__if-parentcur {
    color: var(--color-adapt-main) !important;
}
h1, h2, h3, h4, .h2, .h3, .h4, .menu-archive .act > a, .menu-pagination .act,
.menu-0 .act > a, a.current {
    color: var(--color-adapt-main);
}
ul > li:before,
.menu-0 li:hover > a, .color-subsite .menu-0 li:hover > a, .menu-0 li .act > a, .menu-0 li.touch-hover > a,
.slider-controls .act {
    color: #fff;
    background: var(--color-adapt-main--white-if-bg-main);
}

.btns a:hover, .btn:hover, a.btn:hover, input[type="submit"]:hover, a:hover .btn,
.btns a.cur, .btns span.cur, .btns .cur a, .btns .cur span,
.menu-sub a:hover,
form.cr_form button:hover,
#footer .wrap-social-btn a:hover {
    color: var(--color-btn-hover);
    background-color: var(--bgcolor-btn-hover);
    --border-btn-width: var(--border-btn-width-hover);
}

.bg-maincolor .menu .act > a {
    color: var(--color-main);
}
a:hover .arrow:after, a.arrow:hover:after {
    color: var(--bgcolor-btn-hover);
}
.if-hover__bg-maincolor.if-hover__bg-maincolor.if-hover__bg-maincolor:hover,
.act.act.act > .if-parentact__bg-maincolor {
    background-color: var(--color-main-variant);
}

.slider-with-thumbslider .csc-textpic-imagewrap .slider-controls a:hover {
    background: var(--color-main-trans-06);
}

.bg-maincolor + * > .deco {
    background-image: var(--bgimg-arrowdown);
}
.bg-secondcolor + * > .deco {
    background-image: url(../layout/deco-full-arrow-d-secondcolor.png);
}
.bg-dark + * > .deco {
    background-image: url(../layout/deco-full-arrow-d-dark.png);
}
.bg-lightgray + * > .deco {
    background-image: url(../layout/deco-full-arrow-d-lightgray.png);
}

html .line-bottom {
    border-bottom: 2px solid var(--bordercolor-hr);
}

.btns a.inact, .btns .inact a, .btns span {
    background-color: var(--color-main-variant2);
}


/*****************************
Subsite Farbzuordung
 *****************************/
.layout-jugend .top-slider h2,
.layout-jugend .top-slider h3,
.layout-jugend .menu-sub a:hover,
.layout-jugend .menu-sub .act a,
.layout-jugend .menu-breadcrumbs .cur a,
.layout-jugend .menu-breadcrumbs a:hover,
.layout-jugend .menu-0 li.touch-hover > a,
.layout-jugend .menu-0 li:hover > a,
.layout-jugend .menu-0 li.act > a {
    color: var(--color-main) !important;
}
.layout-jugend .slider-controls .menu li {
    color: var(--color-main);
}
.color-subsite.color-light .menu-0 > .act > a {
    color: #fff;
    background-color: var(--color-main);
}
.layout-jugend.layout-jugend .slider-controls a:not(:hover) {
    border-color: var(--color-main);
}

/*
1 = #d5e5b1 = rgb(213,229,177)
2 = #5a8dc9 = rgb(90,141,201)
3 = #ed724e = rgb(237,114,78)
4 = #b7d6db = rgb(183,214,219)
5 = #d0be7f = rgb(208,190,127)
6 = #f6a97e = rgb(246,169,126)
7 = #d1616c = rgb(209,97,108)
*/

.color-1 {
    --rgb-main: 213, 229, 177;
    --color-main-variant: #dfecc2;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-1.png);
}

.color-2 {
    --rgb-main: 90, 141, 201;
    --color-main-variant: #6198d8;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-2.png);
}

.color-3 {
    --rgb-main: 237, 114, 78;
    --color-main-variant: #f47b58;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-3.png);
}

.color-4 {
    --rgb-main: 183, 214, 219;
    --color-main-variant: #c3dee2;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-4.png);
}

.color-5 {
    --rgb-main: 208, 190, 127;
    --color-main-variant: #d7c68c;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-5.png);
}

.color-6 {
    --rgb-main: 246, 169, 126;
    --color-main-variant: #f4b28d;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-6.png);
}

.color-7 {
    --rgb-main: 209, 97, 108;
    --color-main-variant: #d56a75;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-7.png);
}

/*****************************
HKS 17 Jugend Hildesheim
 *****************************/
.color-21 {
    --rgb-main: 167, 31, 60;
    --color-main-variant: #bc2344;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-21.png);
}

/*****************************
HKS 4 Jugend Bremerhaven
 *****************************/
.color-22 {
    --rgb-main: 255, 201, 0;
    --color-main-variant: #ffdc00;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-22.png);
}

/*****************************
HKS 15 Jugend Hannover
 *****************************/
.color-23 {
    --rgb-main: 204, 31, 47;
    --color-main-variant: #df2335;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-23.png);
}

/*****************************
HKS 39 Jugend Braunschweig
 *****************************/
.color-24 {
    --rgb-main: 17, 122, 203;
    --color-main-variant: #138ade;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-24.png);
}

/*****************************
HKS 65 Jugend Untereichsfeld
 *****************************/
.color-25 {
    --rgb-main: 70, 187, 0;
    --color-main-variant: #4fd000;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-25.png);
}

/*****************************
HKS 6 Jugend Unterelbe
 *****************************/
.color-26 {
    --rgb-main: 255, 143, 0;
    --color-main-variant: #ffa200;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-26.png);
}

/*****************************
HKS 50 Jugend Hildesheim und Alfeld-Detfurth
 *****************************/
.color-27 {
    --rgb-main: 0, 210, 226;
    --color-main-variant: #00e4f0;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-27.png);
}

/*****************************
HKS 57 Jugend Göttingen und Nörten-Osterode
 *****************************/
.color-28 {
    --rgb-main: 0, 138, 78;
    --color-main-variant: #009c58;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-28.png);
}

/*****************************
HKS 29 Jugend Wolfsburg – Helmstedt
 *****************************/
.color-29 {
    --rgb-main: 155, 52, 142;
    --color-main-variant: #af3ba1;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-29.png);
}

/*****************************
HKS 32 Jugend Celle und Verden
 *****************************/
.color-30 {
    --rgb-main: 198, 7, 105;
    --color-main-variant: #da0877;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-30.png);
}

/*****************************
Primärfarbe 18 - Godehardjahr
 *****************************/
.color-40 {
    --rgb-main: 0, 173, 186;
    --color-main-variant: #009ba7;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-40.png);
}

/*****************************
HKS 41 Gymnasium Mariano-Josephinum
 *****************************/
.color-41 {
    --rgb-main: 3, 60, 112;
    --color-main-variant: #02305a;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-41.png);
}

.color-42 {
    --rgb-main: 220, 0, 90;
    --color-main-variant: #c3004d;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-42.png);
}
/*****************************
#642161
 *****************************/
.color-43 {
    --rgb-main: 100, 33, 97;
    --color-main-variant: #5d1a5a;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-43.png);
}

/*****************************
Dom
 *****************************/
.color-50 {
    --rgb-main: 232, 108, 32;
    --color-main-variant: #c3591b;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-50.png);
}

/*****************************
Dommuseum
 *****************************/
.color-51 {
    --rgb-main: 181, 31, 42;
    --color-main-variant: #991a23;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-51.png);
}

/*****************************
Dombibliothek
 *****************************/
.color-52 {
    --rgb-main: 110, 155, 201;
    --color-main-variant: #5b82ac;
    --bgimg-arrowdown: url(../layout/deco-full-arrow-d-maincolor-52.png);
}



/* Reset + Allgemein*/
.bg-secondcolor h1, .bg-secondcolor h2, .bg-secondcolor h3, .bg-secondcolor h4,
.bg-secondcolor .h1, .bg-secondcolor .h2, .bg-secondcolor .h3, .bg-secondcolor .h4 {
    color: #000;
}
.bg-secondcolor a:hover h3 {
    color: #000;
}
.bg-maincolor.bg-maincolor .menu .act > a, .bg-maincolor input {
    background-color: #fff;
}
.slider-controls li:not(.act):hover {
    background-color: #eee;
}
html .slider-controls a:hover {
    color: #ccc;
}
body:not(.color-light) .bg-maincolor a:hover h3, body:not(.color-light) .bg-maincolor a:hover .h3, .bg-maincolor .menu-pagination .act {
    color: #ccc;
}

.color-light .bg-maincolor .menu-pagination .act, .bg-secondcolor .menu-pagination .act {
    color: #666;
}

body:not(.color-light) .bg-maincolor .list-teaser h3 {
    text-decoration-color: rgba(255, 255, 255, 0.6);
}

.color-light.color-light h1, .color-light.color-light h2, .color-light.color-light h3, .color-light.color-light h4, .color-light.color-light .h2, .color-light.color-light .h3, .color-light.color-light .h4,
.if-hover__bg-maincolor:hover :is(h3,h4,.h3,.h4) {
    color: inherit;
}

.color-light .menu-top,
.color-light .bg-maincolor .btns a, .color-light .bg-maincolor .btn, .color-light .bg-maincolor .btns span, .color-light .bg-maincolor input[type="submit"], .color-light .bg-maincolor form.cr_form button,
.color-light .bg-maincolor .menu .act > a,
.color-light ul > li:before,
.color-light .menu-0 li:hover > a, .color-light .menu.menu-0 .act > a,
.color-light .btns a, .color-light .btn, .color-light .btns span, .color-light input[type="submit"], .color-light form.cr_form button,
.color-light .btns a:hover, .color-light .btn:hover, .color-light input[type="submit"]:hover, .color-light a:hover .btn, .color-light form.cr_form button:hover,
.wrap-img.layer .caption {
    color: #000;
}

/*
Spezialfarben: Organigramm
#dfa827 -> #f0b730
auf #page-117 (Generalvikariat)
*/
#c8120 {
    --color-equals-bg: #dfa827;
}
#c8120 .bg-switch {
    --bgcolor-btn: #dfa827;
    --bgcolor-btn-hover: #f0b730;
}
#c8120 h4 {
    color: #dfa827;
}

#c8122 {
    --color-equals-bg: #b7274b;
}
:is(#c8120, #c8122) .col-headline p {
    color: #000;
}
:is(#c8120, #c8122) .col-headline {
    --color-link-hover: #666;
    --bordercolor-trans: var(--color-black-trans-03);
}

/*
==================================================
Einfache Utility-Klassen
==================================================
- no-padding
- right
- left

*/
body .no-padding {
    padding: 0;
}

body .reset-grid-padding, #main .reset-grid-padding {
    width: auto;
    margin-right: var(--hgap-grid-neg);
    margin-left: var(--hgap-grid-neg);
}
body .right {
    float: right;
}
body .left {
    float: left;
}

body .l {
    right: auto;
    left: 0;
    float: left;
}
body .r {
    right: 0;
    left: auto;
    float: right;
}
img.links, html .wrap-img.links {
    float: left;
    margin: 8px var(--hgap-grid) 7px 0;
}
img.rechts, html .wrap-img.rechts, .btn.pull-right {
    float: right;
    margin: 8px 0 7px var(--hgap-grid);
}

/*
Abstände
==================================================
*/
.p-0, .p-h-0, .p-l-0 {
    padding-left: 0 !important;
}
.p-0, .p-h-0, .p-r-0 {
    padding-right: 0 !important;
}
.p-0, .p-v-0, .p-t-0 {
    padding-top: 0 !important;
}
.p-0, .p-v-0, .p-b-0 {
    padding-bottom: 0 !important;
}

.p-sm, /*.p-h-sm,*/ .p-l-sm {
    padding-left: var(--gap-sm) !important;
}
.p-sm, /*.p-h-sm,*/ .p-r-sm {
    padding-right: var(--gap-sm) !important;
}
.p-sm, .p-v-sm, .p-t-sm {
    padding-top: var(--gap-sm) !important;
}
.p-sm, .p-v-sm, .p-b-sm {
    padding-bottom: var(--gap-sm) !important;
}

.p-std, .p-h-std, .p-l-std {
    padding-left: var(--gap-std) !important;
}
.p-std, .p-h-std, .p-r-std {
    padding-right: var(--gap-std) !important;
}
.p-std, .p-v-std, .p-t-std {
    padding-top: var(--gap-std) !important;
}
.p-std, .p-v-std, .p-b-std {
    padding-bottom: var(--gap-std) !important;
}

.p-dbl, .p-h-dbl, .p-l-dbl {
    padding-left: var(--gap-dbl) !important;
}
.p-dbl, .p-h-dbl, .p-r-dbl {
    padding-right: var(--gap-dbl) !important;
}
.p-dbl, .p-v-dbl, .p-t-dbl {
    padding-top: var(--gap-dbl) !important;
}
.p-dbl, .p-v-dbl, .p-b-dbl {
    padding-bottom: var(--gap-dbl) !important;
}

.p-big, .p-h-big, .p-l-big {
    padding-left: var(--gap-big) !important;
}
.p-big, .p-h-big, .p-r-big {
    padding-right: var(--gap-big) !important;
}
.p-big, .p-v-big, .p-t-big {
    padding-top: var(--gap-big) !important;
}
.p-big, .p-v-big, .p-b-big {
    padding-bottom: var(--gap-big) !important;
}

.m-0, .m-h-0, .m-l-0 {
    margin-left: 0 !important;
}
.m-0, .m-h-0, .m-r-0 {
    margin-right: 0 !important;
}
.m-0, .m-v-0, .m-t-0 {
    margin-top: 0 !important;
}
.m-0, .m-v-0, .m-b-0 {
    margin-bottom: 0 !important;
}

.m-sm, .m-h-sm, .m-l-sm {
    margin-left: var(--gap-sm) !important;
}
.m-sm, .m-h-sm, .m-r-sm {
    margin-right: var(--gap-sm) !important;
}
.m-sm, .m-v-sm, .m-t-sm {
    margin-top: var(--gap-sm) !important;
}
.m-sm, .m-v-sm, .m-b-sm {
    margin-bottom: var(--gap-sm) !important;
}

.m-std, .m-h-std, .m-l-std {
    margin-left: var(--gap-std) !important;
}
.m-std, .m-h-std, .m-r-std {
    margin-right: var(--gap-std) !important;
}
.m-std, .m-v-std, .m-t-std {
    margin-top: var(--gap-std) !important;
}
.m-std, .m-v-std, .m-b-std {
    margin-bottom: var(--gap-std) !important;
}

.m-dbl, .m-h-dbl, .m-l-dbl {
    margin-left: var(--gap-dbl) !important;
}
.m-dbl, .m-h-dbl, .m-r-dbl {
    margin-right: var(--gap-dbl) !important;
}
.m-dbl, .m-v-dbl, .m-t-dbl {
    margin-top: var(--gap-dbl) !important;
}
.m-dbl, .m-v-dbl, .m-b-dbl {
    margin-bottom: var(--gap-dbl) !important;
}

.m-big, .m-h-big, .m-l-big {
    margin-left: var(--gap-big) !important;
}
.m-big, .m-h-big, .m-r-big {
    margin-right: var(--gap-big) !important;
}
.m-big, .m-v-big, .m-t-big {
    margin-top: var(--gap-big) !important;
}
.m-big, .m-v-big, .m-b-big {
    margin-bottom: var(--gap-big) !important;
}


/**
 * Fullsize images
 * 2015-09-02
 * AS + W approved ;)
 */
html .wrap-img.full-size {
    margin: 0;
    padding: 0;
}
.full-size img {
    width: 100%;
}
.full-height, .news-list-view {
    margin-bottom: 21px;
}
#main .full-height + .full-height {
    margin-top: -21px;
}
.row-over .full-height:first-child, .row-over .col-6.full-height, #main#main#main .teaser-slider .full-height {
    margin-top: var(--padding-t-rowover-neg);
}
.row-over .row:not(:first-child) .full-height {
    margin-top: 0;
}
.row-over .full-height:last-child, .row-over .col-6.full-height {
    overflow: hidden;
    margin-bottom: var(--padding-b-rowover-neg);
}
#main > .row:last-child .imgs-top.full-height:last-child, #main > .imgs-top.full-height:last-child {
    overflow: hidden;
    margin-bottom: -90px;
}
#main > .row:last-child .imgs-top.full-height:last-child .caption, #main > .imgs-top.full-height:last-child .caption {
    padding-bottom: 50px;
}
@media screen and (min-width: 751px) {
    .textpic-slider.full-height {
        margin-bottom: -30px;
    }
}
@media screen and (max-width: 750px) {
    #main > .row:last-child .imgs-top.full-height:last-child {
        overflow: hidden;
        margin-bottom: -105px;
    }
    #main > .row:last-child .imgs-top.full-height:last-child .caption {
        padding-bottom: 65px;
    }
    #main#main .row > *:not(:first-child) .full-height:first-child, .row-over .col-6.full-height:not(:first-child) {
        margin-top: 0;
    }
    #main#main .row > *:not(:last-child) .full-height:last-child, .row-over .col-6.full-height:not(:last-child) {
        margin-bottom: 0;
    }
    #main > .row-over:last-child > *:not(:last-child) .imgs-top.full-height:last-child .caption {
        padding-bottom: 3px;
    }
}

/**
 * Youtube-Listen
 * JS-API-Darstellung
 * 2016-04-28
 * AS
 */
.yt-iframe-player-wrap {
    display: none;
}
.yt-iframe-player-wrap .embed-container {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.youtube-list .box-teaser .wrap-img {
    margin-bottom: 10px;
}
.youtube-list .box-teaser .wrap-txt {
    padding-right: var(--hgap-grid);
}
.youtube-list .box-teaser .wrap-txt h3 {
    max-height: 4.1em;
}
.youtube-list .news-list-view.row.flex-grid {
    transition: 0.2s;
}
.youtube-list .news-list-view.row.flex-grid.loading {
    pointer-events: none;
    opacity: 0.2;
}
@media screen and (max-width: 900px) {
    .youtube-list .box-teaser {
        height: auto !important;
    }
}

/**
 * Großes Bild + Thumbnails
 * 2015-09-23
 * AS
 */
.wrap-img.centered img {
    width: 100%;
    margin: 0 auto;
}
.wrap-img.layer a {
    border: none;
}

/**
 * Materialbörse; TEMP
 * 2015-11-06
 * AS
 */
.tx-etagenmedialibrary-pi1 {
    clear: both;
}
.tx-etagenmedialibrary-pi1 .et-ml-ajax-wrapper.visible {
    position: absolute;
    z-index: 9;
    top: 40px;
    min-width: 100%;
    margin: 0 0 0 var(--hgap-grid);
    padding: 10px;
    background: #fff;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}
.tx-etagenmedialibrary-pi1 .et-ml-ajax-wrapper.visible ul.et-ml-ajax-keywords {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}
.tx-etagenmedialibrary-pi1 .et-ml-ajax-wrapper.visible li {
    margin-left: 0;
    padding-left: 20px;
}
.tx-etagenmedialibrary-pi1 .et-ml-ajax-wrapper.visible li:hover {
    cursor: pointer;
    color: var(--color-main);
}


.tx-etagenmedialibrary-pi1 .row img {
    display: block;
}

.tx-etagenmedialibrary-pi1 .et-ml-ajax-wrapper.visible li:before,
form div.search-bar:after,
.tx-etagenmedialibrary-pi1 .row span.file-icon:after {
    font: normal normal normal 18px/1 FontAwesome;
    display: block;
    width: 1em;
    height: 1em;
    content: "\f016";
    color: var(--color-main);
}

.tx-etagenmedialibrary-pi1 .row span.file-jpg:after,
.tx-etagenmedialibrary-pi1 .row span.file-jpeg:after,
.tx-etagenmedialibrary-pi1 .row span.file-png:after,
.tx-etagenmedialibrary-pi1 .row span.file-gif:after {
    content: "\f1c5";
}
.tx-etagenmedialibrary-pi1 .row span.file-pdf:after {
    content: "\f1c1";
}

.tx-etagenmedialibrary-pi1 .et-ml-ajax-wrapper.visible li:before {
    font-size: 13px;
    top: 4px;
    left: 0;
    color: #000;
    background: transparent;
}
.tx-etagenmedialibrary-pi1 .et-ml-ajax-wrapper.visible .et-ml-ajax-keywords li:before {
    content: "\f002";
}
.tx-etagenmedialibrary-pi1 .et-ml-ajax-wrapper.visible .et-ml-ajax-items li:before {
    content: "\f061";
}
.tx-etagenmedialibrary-pi1 .et-ml-ajax-wrapper.visible .et-ml-ajax-items {
    margin-bottom: 0;
}

.tx-etagenmedialibrary-pi1 span.filesize {
    white-space: nowrap;
}
.tx-etagenmedialibrary-pi1 .file-icon {
    display: block;
    margin-top: 14px;
}


form div.search-bar input[type="text"] {
    width: 100%;
    color: #fff;
}
form div.search-bar input[type="text"]:not(.bg-maincolor) {
    background: #ccc;
}
form div.search-bar {
    width: 100%;
    margin-bottom: 20px;
}
form div.search-bar:after {
    font-size: 19px;
    position: absolute;
    top: 10px;
    right: 8px;
    content: "\f002";
    pointer-events: none;
    color: #fff;
}
.tx-etagenmedialibrary-pi1 form .type-options label {
    margin-left: 30px;
}
.tx-etagenmedialibrary-pi1 form .type-options label i {
    padding-right: 8px;
}
.tx-etagenmedialibrary-pi1 form .type-options input {
    position: absolute;
    visibility: hidden;
    cursor: pointer;
}
.tx-etagenmedialibrary-pi1 form .type-options input + label:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 13px;
    height: 13px;
    margin-top: 2px;
    content: "";
    border: 3px solid #d9d9d9;
    background: #d9d9d9;
}
.tx-etagenmedialibrary-pi1 form .type-options input:checked + label:before {
    background: var(--color-main);
}
.tx-etagenmedialibrary-pi1 form .type-options input:checked + label {
    color: var(--color-main);
}

form div.submit input[type="submit"] {
    width: auto;
    min-width: 90px;
    margin-left: 0;
}
.tx-etagenmedialibrary-pi1 .col-headline:first-child {
    padding-top: 20px;
}

.tx-etagenttaddressaddon-pi1 form div.category-filter select {
    width: 100%;
    margin-bottom: 10px;
}
.news-search-form form div.search-bar input {
    background: var(--color-main);
}
.news-menu-view {
    margin-bottom: var(--vgap-grid);
}

/**
 * tt_address addon
 * 2016-01-07
 * AS
 */
.wrap-googlemap, .wrap-openstreetmap {
    margin-bottom: 40px;
}
.leaflet-popup {
    font-family: var(--ffamily);
    font-size: 1.4rem;
}
div .leaflet-popup a {
    color: inherit;
}

.addresses > .col:nth-child(2n+1) {
    clear: left;
}
.box-teaser-address .col-special {
    position: static;
    width: 195px;
    height: 40px;
    margin-bottom: 10px;
}
.box-teaser-address .btn {
    position: absolute;
    right: var(--hgap-grid-dbl);
    bottom: 10px;
}
.box-teaser-address h3.col {
    min-height: calc(2.6em + 10px);
    margin-bottom: var(--vgap-grid);
    padding-top: 5px;
    padding-bottom: 5px;
}
.box-teaser-address .box-link .row {
    padding-bottom: 10px;
}

.box-teaser-address {
    margin-bottom: var(--vgap-grid);
}
.box-teaser-address .btn, .box-teaser-address .arrow {
    font-size: 1.4rem;
}
.box-teaser-address {
    --width-arrow-btn: 17px;
}

.box-teaser-address .row dl.col-6:empty {
    display: none;
}

.tx-etagenttaddressaddon-pi1 .referenced-address {
    padding-top: 25px;
}
.addresses dt, .addresses dd {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
}
.addresses dd {
    margin-bottom: var(--margin-b-paragraph);
}

.tx-etagenttaddressaddon-pi1 .csc-textpic-imagewrap + * {
    clear: both;
}

@media screen and (max-width: 900px) and (min-width: 751px) {
    #main .col-9 .addresses .col-6 .col-6, #main .col-8 .addresses .col-6 .col-6 {
        width: 100%;
    }
}
@media screen and (max-width: 660px) and (min-width: 451px) {
    #main .addresses .col-6 .col-6 {
        width: 100%;
    }
}
@media screen and (max-width: 900px) and (min-width: 451px) {
    #main .addresses .col-6, .addresses .col-3 {
        width: 50%;
    }
}
@media screen and (max-width: 450px) {
    #main .addresses .col-6 .col-6 {
        width: 50%;
    }
}

/**
 * Pager
 * 2016-01-07
 * AS
 */



.pager {
    display: block;
    padding-top: 25px;
}
.pager .showResultsWrap {
    font-size: 12px;
    margin-bottom: var(--vgap-grid);
    color: #999;
}
.pager .showResultsWrap span {
    color: #000;
}
.bg-nonwhite .pager .showResultsWrap, .bg-nonwhite .pager .showResultsWrap span {
    color: inherit;
}

.browseBoxWrap .pages li:last-child:not(.cur),
.browseBoxWrap .pages li:first-child:not(.cur),
.menu-pagination ul > a.next,
.menu-pagination ul > a.prev {
    position: absolute;
}
.browseBoxWrap .pages li:first-child:not(.cur), .menu-pagination ul > a.prev {
    left: 0;
}
.browseBoxWrap .pages li:last-child:not(.cur), .menu-pagination ul > a.next {
    right: 0;
}

.browseBoxWrap .pages li:first-child:not(.cur) a, .menu-pagination ul > a.prev {
    margin-left: 34px;
}
.browseBoxWrap .pages li:last-child:not(.cur) a, .menu-pagination ul > a.next {
    margin-right: 34px;
}

.browseBoxWrap .pages a.prev:before,
.browseBoxWrap .pages a.next:after,
.browseBoxWrap .pages li:first-child:not(.cur) a:before,
.browseBoxWrap .pages li:last-child:not(.cur) a:after {
    position: absolute;
    content: '';
    color: var(--color-main);
    border: 14px solid;
}
.browseBoxWrap .pages a.prev:before,
.browseBoxWrap .pages li:first-child:not(.cur) a:before {
    left: 0;
    border-right-color: transparent;
    border-left-width: 19px;
}
.browseBoxWrap .pages a.next:after,
.browseBoxWrap .pages li:last-child:not(.cur) a:after {
    right: 0;
    border-right-width: 19px;
    border-left-color: transparent;
}

#main .menu-pagination ul > a.prev:before {
    left: -34px;
}
#main .menu-pagination ul > a.next:after {
    right: -34px;
}

.menu-pagination ul > a {
    display: inline-block;
    padding: 0 5px;
}

/**
 * Social Media Share
 * 2016-01-07
 * AS
 */
.social-media-share {
    overflow: hidden;
    padding-top: 25px;
}
.social-media-share .shariff ul {
    width: 100%;
}
.social-media-share .shariff ul li.shariff-button {
    margin: 0;
}
.social-media-share .shariff ul li.shariff-button + li.shariff-button {
    margin-left: var(--hgap-grid);
}

/**
 * RSS-Icon
 * 2016-01-13
 * AS
 */
.rss-feed-icon a {
    border: none;
}
.rss-feed-icon > a {
    display: block;
    padding: var(--vgap-grid) 0;
}
.rss-feed-icon i {
    padding-right: 7px;
}
.rss-feed-icon i,
.rss-feed-icon a:hover {
    color: var(--color-main);
}

/**
 * ke_search
 * 2016-01-12
 * AS
 */
#kesearch_results .hit {
    color: var(--color-main);
}
#kesearch_results .result-list-item a {
    border: none;
}
.kesearch_searchbox [type=submit] {
    margin-top: 0;
}
.form-inline {
    display: flex;
    flex-flow: row wrap;
}
.form-inline > * {
    flex: 1 1 0;
    width: auto;
}
.flex-static {
    flex: 0 0 auto;
}
.search-bar {
    min-width: 15rem;
}
.maxw-600-centered {
    max-width: 600px;
    margin: 0 auto;
}

/**
 * Kalendarium
 * 2016-01-12
 * AS
 */
.kalendarium-teaser .info {
    color: var(--color-main);
}
.bg-maincolor .kalendarium-teaser .info {
    color: #000;
}
.bg-secondcolor .kalendarium-teaser .info {
    color: #444;
}

/**
 * cleverreach forms: form.cr_form
 * 2016-01-12
 * AS
 */
form.cr_form {
    padding: 0 var(--hgap-grid);
}
form.cr_form .cr_ipe_item input[type="radio"] {
    position: relative;
    top: 18px;
    display: block;
    float: none;
    clear: both;
}
form.cr_form label:empty {
    display: none;
}

.et-protected .et_name {
    display: none;
}

/**
 * Lesungen zum Hören
 * 2018-07-18
 * MLB
 */
.audio-wrapper {
    margin-bottom: 1em;
}
.audio-wrapper h3 {
    margin-bottom: 5px;
}
.audio-wrapper audio {
    display: block;
    width: 100%;
}
.wrap-reading-txt {
    margin-bottom: var(--margin-b-paragraph);
}

/**
 * Prayer Wall
 */
.prayer.col-6 {
    margin-bottom: var(--vgap-grid-dbl);
}
.prayer .col {
    min-height: 100%;
}
.prayer .wrap-content {
    padding-top: 10px;
    padding-bottom: 1px;
}
.prayer-notification {
    margin-bottom: var(--vgap-grid-dbl);
    padding-top: 10px;
}
.prayer {
    clear: left;
}
.prayer:nth-child(even) {
    float: right;
    clear: right;
}
.btn.to-prayer-form {
    margin-bottom: 40px;
}
.prayer h3 {
    color: var(--color-main);
}

.grid-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(310px, 50%), 1fr));
    grid-auto-rows: var(--hgap-grid);
    grid-row-gap: 0;
}
.grid-masonry.teasers {
    grid-auto-rows: minmax(100px, auto);
}
.grid-masonry:after {
    display: none;
}
.grid-masonry > div {
    width: 100%;
}


/*1069*/
@media screen and (max-width: 1085px) {
    .tx-etagenmedialibrary-pi1 .single > .row > .col {
        width: 50%;
    }
    .pager .browseLinksWrap a:not(.prev):not(.next):not(.current),
    .pager .browseLinksWrap span.inactiveLinkWrap {
        display: none;
    }
}
@media screen and (max-width: 900px) {
    .tx-etagenmedialibrary-pi1 .single > .row > .col {
        width: 100%;
    }
    .tx-etagenmedialibrary-pi1 .single > .row > .col img {
        margin: 0 auto;
    }
}
@media screen and (max-width: 400px) {
    .pager .browseLinksWrap a:not(.prev):not(.next):not(.current),
    .pager .browseLinksWrap span.activeLinkWrap + .inactiveLinkWrap,
    .pager .browseLinksWrap span.activeLinkWrap + .inactiveLinkWrap + .inactiveLinkWrap {
        display: none !important;
    }
}

/********************************************************
 Top-Bar (Jugend-Template)
********************************************************/
.top-bar {
    position: relative;
    float: right;
    width: calc(50% + 285px);
    min-width: 34%;
    height: 2rem;
}
@media (max-width: 1200px) {
    .top-bar {
        width: calc(100% - 315px);
    }
}

/********************************************************
 Veranstaltungs-Teaser
********************************************************/
.box-bordered > .inner-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0.5em;
    transition: 0.3s background-color, 0.3s transform;
    border: 1px solid #c6c6c6;
}
.event-teaser > .inner-wrap:hover {
    transform: scale(1.05);
    border-color: transparent;
}
.textalign-center {
    text-align: center;
}
.box-bordered {
    margin-bottom: 30px;
}
.event-teaser h3 {
    min-height: 3.6em;
}
.event-teaser .wrap-img {
    max-width: none;
    margin: -0.5em -0.5em var(--vgap-grid);
}
.event-teaser img {
    width: 100%;
}
.event-teaser .wrap-icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
}
.event-teaser .icon-txt {
    font-size: 3.5em;
    margin: auto;
}

.event-teaser .inner-wrap:not(:hover) .icon-txt {
    opacity: 0.55;
}


/* Event Miniteaser */
.box.box-miniteaser {
    margin-bottom: var(--vgap-grid-dbl);
}
.box-miniteaser .inner-wrap {
    align-items: flex-start;
}
.box-miniteaser .wrap-img {
    width: 9.7rem;
    margin: 0;
    color: var(--color-adapt-white--main-if-bg-main);
    background: var(--color-adapt-main);
    aspect-ratio: 1;
}
.box-miniteaser .wrap-txt {
    flex: 1 1 50%;
    padding: var(--vgap-grid) var(--hgap-grid-dbl-adapt) 0;
}
.box-miniteaser .teaser-title {
    color: var(--color-adapt-secondary);
    margin-bottom: 0.8rem;
}
.box-miniteaser .icn-img {
    --height-icon: 80%;
}
@media (max-width: 1000px) {
    .box-miniteaser.col-4 {
        width: 100%;
    }
}

/********************************************************
 Logo-Slider
********************************************************/
.logo-slider .slider-controls {
    width: calc(100% + 40px);
    margin: -7px -20px 0;
}
@media (min-width: 1320px) {
    .logo-slider {
        margin: 0 calc(660px - 50vw);
    }
    .logo-slider .slider-controls {
        width: calc(100vw + 40px);
        margin-left: -80px;
    }
}
.logo-slider {
    position: relative;
}
.logo-slider .copyright, .logo-slider .menu {
    display: none;
}
.logo-slider .wrap-img, .logo-slider .wrap-img a {
    display: flex;
    justify-content: center;
}
.logo-slider img {
    width: auto;
    max-height: 15rem;
    margin: auto;
}

/* Wenn zu wenige Elemente für Slider */
.logo-slider .dont-slide .layer-container {
    display: flex;
    justify-content: center;
    width: 100% !important;
    margin: 0 !important;
}
.logo-slider .dont-slide .wrap-img {
    left: 0 !important;
}

/* Events Detailseite */
.event-img ~ :is( h4, h3, h2, ul, ol) {
    clear: left;
}
.event-details .col-4 dt {
    max-width: 38%;
}
@media (max-width: 900px) {
    :is(.event-details, .event-registration) > :is(.col-4, .col-8) {
        width: 100% !important;
    }
}
@media (min-width: 390px) and (max-width: 750px) {
    .event-img img {
        max-width: 360px;
    }
}


/*
==================================================
Fix für Piktochart auf Seite id=280
==================================================
*/
.piktowrapper-embed[style*="300px"] {
    height: auto !important;
    min-height: 300px;
}


/*
==================================================
Responsive Breakpoints
==================================================
*/

@media screen and (min-width: 751px), screen and (max-width: 600px) and (min-width: 551px) {
    .box-bigcube, .h-600 {
        min-height: 600px;
    }
    .box-bigcube .wrap-img, .box-bigimgteaser .wrap-img, .wrap-img.h-600 {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 600px;
    }
    .box-bigimgteaser .wrap-img {
        height: 300px;
    }
    .box-bigcube .wrap-img img, .box-bigimgteaser .wrap-img img, .h-600 img {
        position: absolute;
        top: 0;
        left: 50%;
        width: 600px;
        max-width: 600px;
        margin-left: -300px;
    }
    .box-bigimgteaser .wrap-img img {
        width: 300px;
        max-width: 300px;
        margin-left: -150px;
    }
    .h-600 img {
        width: auto;
        min-width: 100%;
        max-width: none;
        min-height: 600px;
    }
}
@media screen and (max-width: 600px) and (min-width: 551px) {
    .box-bigimgteaser {
        min-height: 0;
    }
}

@media screen and (min-width: 1300px) {
    .top-slider-fullimg .slider-controls a {
        opacity: 1;
    }
}
@media screen and (min-width: 1201px) {
    .top-slider-fullimg {
        width: calc(100vw + var(--hgap-grid-dbl));
        margin-left: var(--hgap-grid-neg);
    }
    .top-slider-hildesheim .overlay {
        margin-right: calc(50vw - var(--width-contentarea) / 2);
    }
    .top-slider-fullimg .slider-controls .menu {
        margin-left: calc(50vw - var(--width-contentarea) / 2 + var(--hgap-grid-dbl));
    }
    .top-slider-fullimg .copyright {
        padding-left: 14px;
    }
}
@media screen and (min-width: 1216px) {
    .top-slider-fullimg {
        margin-left: calc(var(--width-contentarea) / 2 - 50vw - var(--hgap-grid));
    }
}

@media screen and (max-width: 1200px) {
    .row-over {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 0;
    }

    .top-slider-fullimg {
        width: calc(100% + var(--hgap-grid-dbl));
        margin-left: var(--hgap-grid-neg);
    }
}

/*1069*/
@media screen and (max-width: 1085px) {
    .menu-0 li:last-child ul, .menu-0 li:nth-last-child(2) ul {
        right: 0;
        left: auto;
    }
}

@media screen and (max-width: 1000px) {
    html {
        font-size: 9.374px;
    }
    body {
        --width-arrow-btn: 18px;
    }

    .top-slider-fullimg .bg-maincolor {
        overflow: hidden;
    }
    .top-slider-fullimg .slider-mask .bg-maincolor:after {
        position: absolute;
        top: 99%;
        right: 0;
        left: 0;
        height: 500px;
        content: '';
        background: inherit;
    }
    .top-slider-fullimg .slider-controls .menu {
        margin: var(--vgap-grid) auto 0;
    }
    .top-slider-fullimg:not(.top-slider-dom) {
        margin-bottom: 45px;
    }
    .top-slider-fullimg.not-initialized {
        margin-bottom: 0;
    }
    .top-slider-fullimg .overlay {
        position: relative;
        right: 0;
        width: auto;
        padding-bottom: 5px;
    }
}

@media screen and (max-width: 900px) {

    .imgslider-txt > * {
        width: 100%;
    }
    .imgslider-txt .full-height {
        margin-bottom: var(--vgap-grid);
    }
}

@media screen and (max-width: 800px) {
    .top-slider .slider-controls a {
        top: -10000%;
        margin-top: 80px;
    }
}

@media screen and (max-width: 750px) {
    /* unterhalb vom iPad */
    .box-bigcube .overlay {
        min-height: 0;
    }
    .top-slider-subsite .csc-textpic-text, .top-slider-subsite .col-8 {
        padding: 0;
    }
    .top-slider-subsite .slider-controls {
        width: calc(100% + 30px);
        margin-left: -15px;
    }
    .top-slider-subsite .slider-controls .menu {
        margin: 0 auto 0;
    }
    #main .wrap-top-slider-subsite {
        padding-bottom: 45px;
    }

    .col-1 {
        width: 16.6667%;
    }
    .col-2 {
        width: 33.3333%;
    }
    .col-3 {
        width: 50%;
    }
    .col-4, .col-6, .col-8, .col-9, .col-9:first-child + .col-3:last-child {
        width: 100%;
    }
    .col-3, .col-4, .col-6, .col-8, .col-9 {
        margin-bottom: var(--vgap-grid);
    }

    .col-6 .col-2, .col-4 .col-2, .col-3 .col-2 {
        width: 16.6667%;
    }
    .col-6 .col-3, .col-4 .col-3, .col-3 .col-3, .col-8 .gallery .col-3 {
        width: 25%;
        margin-bottom: 0;
    }
    .col-6 .col-4, .col-4 .col-4, .col-3 .col-4 {
        width: 33.3333%;
        margin-bottom: 0;
    }
    .col-6 .col-6, .col-4 .col-6, .col-3 .col-6 {
        width: 50%;
        margin-bottom: 0;
    }
}


@media screen and (max-width: 750px) and (min-width: 601px) {
    .col-4 .col-6, .col-3 .col-6 {
        max-width: 25%;
    }
}
@media screen and (max-width: 600px) and (min-width: 373px) {
    .col-4 .col-6, .col-3 .col-6 {
        max-width: 33.3334%;
    }
}


@media screen and (max-width: 550px) {
    .col-1 {
        width: 25%;
    }
    .col-2 {
        width: 50%;
    }
    .col-3, .col-4, .col-6.col-6 {
        width: 100%;
    }
}

@media screen and (max-width: 500px) {
    body {
        --hgap-grid: 8px;
    }
    .textpic-slider .slider-controls a {
        margin-right: -7px;
        margin-left: -7px;
    }
}

@media screen and (max-width: 450px) {
    html {
        font-size: 8.75px;
    }
    body {
        --width-arrow-btn: 17px;
    }
    .box-teaser-address {
        --width-arrow-btn: 16px;
    }
    .menu-breadcrumbs li {
        margin-right: -8px;
        margin-left: 0;
        padding: 0 10px;
    }
    .menu-breadcrumbs li > *:before, .menu-breadcrumbs li > *:after {
        border-width: 15px 0 16px 10px;
    }
    .layout-subsite #logo {
        max-width: 75%;
    }
}

@media screen and (max-width: 350px) {
    .col-1 {
        width: 50%;
    }
    .col-2 {
        width: 100%;
    }
}


/* Cookie Banner */
button.et-cookie__accept-current {
    font-size: 1.3em;
    margin-top: 1rem;
    margin-bottom: 0;
    background-color: var(--color-main);
}
button.et-cookie__accept-current:hover {
    background-color: var(--color-main-variant);
}


/* Cookie-Overlays */
.et-cookie-blocker {
    background: rgba(0, 0, 0, 0.4);
}
button.et-cookie-blocker--show-settings {
    display: none;
}
.et-cookie-has-blocker {
    background: var(--color-main) no-repeat 50% 2rem;
}
iframe.soundcloud.et-cookie-has-blocker {
    background-image: url(../layout/logo-soundcloud.svg?v=3);
    background-size: 90% 20%;
}
iframe.youtube.et-cookie-has-blocker {
    background-image: url(../layout/youtube-logo-text.svg);
    background-position: 50% -10%;
    background-size: 90% 40%;
}
iframe.soundcloud:not(.et-cookie-has-blocker) {
    background: transparent;
}
.wrap-soundcloud {
    margin-bottom: 14px;
}
.wrap-soundcloud iframe, .kizfeed {
    margin-bottom: 0;
}
.map-canvas.et-cookie-has-blocker, .googlemap.et-cookie-has-blocker, .map.et-cookie-has-blocker {
    background: url(../layout/map-fallback.png) no-repeat 50% 50%;
    background-size: cover;
}
@media (min-width: 1200px) {
    .wrap-googlemap, .wrap-openstreetmap {
        width: 100vw;
        margin-left: calc(600px - 50vw);
    }
}
.wrap-kizfeed .et-cookie-has-blocker {
    height: 593px;
    background: url(../layout/logo-kiz-online.png) no-repeat 50% 0;
    background-size: contain;
}
.youtube-list.et-cookie-has-blocker {
    min-height: 50rem;
    background: var(--color-main) url(../layout/youtube-logo-text.svg) no-repeat 50% 0;
    background-size: 80% 40%;
}
/* Fix für Blocker bei eigentlich nicht unterstützem Text&Medien mit Youtube */
.csc-textmedia-gallery-media {
    position: relative;
}
.pikto-canvas-wrap.et-cookie-has-blocker:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background: var(--color-main);
}
.crArchive.et-cookie-has-blocker {
    min-height: 30rem;
    background: var(--color-main);
}


/*Admin-Panel*/
#TSFE_ADMIN_PANEL_FORM {
    margin-bottom: 0;
}