@CHARSET "UTF-8";
/**
* Styles für HTML Elemente und Standard-CSS-Klassen
*/
html{ font-size: var(--fontsizerootmobile); }
@media all and (min-width: var(--breakpoint-l)){
html{ font-size: var(--fontsizeroot); }
}
.df-lightbox-wrapper .loading-info{ color: #000 !important; }
/* Headlines */
h1, .h1, h2, .h2,
h3, .h3, h4, .h4,
h5, .h5, h6, .h6{ margin: 0 0 var(--defaultspacing); color: var(--headlinecolor); font-family: var(--headlinefontfamily); font-weight: var(--headlinefontweight); line-height: 1.25; display: block; }
h1, .h1{ font-size: 1.75rem; }
h2, .h2{ font-size: 1.5rem; }
h3, .h3{ font-size: 1.25rem; }
h4, .h4{ font-size: 1.125rem; }
h5, .h5{ font-size: 1rem; }
h6, .h6{ font-size: .875rem; }
@media all and (min-width: var(--breakpoint-m)){
h1, .h1{ font-size: 2.25rem; }
h2, .h2{ font-size: 1.75rem; }
h3, .h3{ font-size: 1.5rem; }
h4, .h4{ font-size: 1.25rem; }
h5, .h5{ font-size: 1.125rem; }
h6, .h6{ font-size: .925rem; }
}
/* Links */
a { color: var(--linkcolor); text-decoration: none; background-color: transparent; }
a:hover{ color: var(--linkhover); }
body:not(.is-phone) a[href^='tel:']{ cursor: default; color: inherit !important; }
/* copyright */
.dp-imagecopyright {
position: absolute; bottom: 0; right: 0; z-index: 9;
padding: 3px 6px; line-height: 1.1; font-size: 11px;
color: #fff; background: rgba(0,0,0,.5); opacity: .9;
}
blockquote <<* { position: relative; font-size: 1.25rem; color: var(--brandprimary); opacity: .75; font-style: italic; padding: 30px 75px; background: var(--lightgrey); line-height: 1.25; }
p{ margin: 0; }
&::before{ content: "„"; font-size: 8rem; color: var(--darkgrey); opacity: .25; position: absolute; top: -1rem; left: 15px; line-height: 1rem; }
>>
.text-primary{ color: var(--brandprimary); }
.text-brandprimarydark{ color: var(--brandprimarydark); }
.text-secondary{ color: var(--brandsecondary); }
.text-default{ color: var(--fontcolor); }
.text-lightgrey{ color: var(--lightgrey); }
.text-grey{ color: var(--grey); }
.text-darkgrey{ color: var(--darkgrey); }
.text-white{ color: #fff; }
.text-small{ font-size: .75rem; }
.text-root{ font-size: 1rem; }
.text-large{ font-size: 1.25rem; }
.text-uppercase{ text-transform: uppercase; }
.text-bold{ font-weight: var(--fontweightbold); }
.text-regular{ font-weight: var(--fontweightregular); }
/* Buttons */
.dp-btn a,
a.dp-btn,
input.dp-btn,
button.dp-btn,
.dp-btn-pseudo <<* {
font-size: 1rem; text-align: center; font-weight: var(--fontweightbold); text-decoration: none!important; color: #fff; transition: all .25s;
padding: .5rem 2rem; display: inline-flex; align-items: center;
background: var(--brandprimary) url(../images/contentbg-ally.png) center no-repeat; background-size: cover;
}
svg{ width: 1.125em; height: 1.125em; }
svg:first-child{ margin-right: .25em; }
svg:last-child{ margin-left: .25em; }
>>
.dp-btn a:hover,
a.dp-btn:hover,
input.dp-btn:hover,
button.dp-btn:hover,
.dp-btn-pseudo:hover{ color: #fff; filter: brightness(110%); }
.dp-btn.btn-large a, a.dp-btn.btn-large, .dp-btn-pseudo.btn-large{ font-size: 1.125rem; padding: .5rem 5rem; }
.dp-btn.btn-small a, a.dp-btn.btn-small, .dp-btn-pseudo.btn-small{ font-size: .75rem; padding: .125rem .75rem; }
.dp-pagination <<* { text-align: center }
a{ font-size: .875em; border-radius: 3px; padding: var(--minspacing) var(--smallspacing); line-height: 1em; border: 2px solid var(--linkcolor); color: var(--linkcolor); background: #fff; margin: 2px; display: inline-block; }
a:hover,a.current{ color: #fff; background: var(--linkcolor); }
>>
/* Accordion */
.dp-accordion <<* { }
.accordion-title <<* { color: var(--brandprimary); }
svg, .icon{ width: 1em; height: 1em; }
svg{ transition: transform .5s; }
>>
.accordion-parent{ padding: 1rem 0; }
.accordion-parent + .accordion-parent{ border-top: 2px solid var(--lightgrey); }
.accordion-parent:first-child{ padding-top: 0; }
.accordion-text <<* { font-size: 1rem; overflow: hidden; }
& > *:first-child{ margin-top: 1em; }
& > *:last-child{ margin-bottom: 0; }
& > *{ transition: margin .25s; }
>>
.accordion-parent:not(.current) <<* {}
.accordion-text{
height: 0; overflow: hidden; font-size: 0; margin: 0; opacity: 0; padding: 0;
transition: opacity 0s, font-size .25s 0s, margin .25s 0s, padding .25s 0s;
}
.accordion-text > *{ margin: 0; }
>>
.accordion-parent.current <<* {}
.accordion-title <<* { }
svg{ transform: rotate(225deg); }
>>
.accordion-text{ transition: font-size .25s, margin .25s, padding .25s, opacity .25s .25s; }
>>
>>
/* Parallax Effekt */
.dp-parallax <<* { position: relative; }
& > .parallax-target{ transition: opacity .5s; top: 0; left: 0; opacity: 0; width: 100%; height: 150%; max-width: none; position: absolute; }
& > .parallax-target.is-observed{ opacity: 1; }
.parallax-target > .dp-video{
position: absolute;
top: 0;
left: 50%;
translate: -50% 0;
width: auto;
height: auto;
aspect-ratio: 16/9;
min-height: 100%;
min-width: 100%;
}
>>
/* Element fade in */
.js-fade-in{ opacity: 0; translate: 0 2.5rem; transition: opacity 1s, translate 1s; }
body.is-keyboard .js-fade-in{ transition: none; }
.js-fade-in.is-visible, body.is-keyboard .js-fade-in{ opacity: 1; translate: 0 0; }
/* Map */
.dp-map <<* { height: 300px; position: relative; }
> div, > iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.map-marker-icon <<* { }
> svg{ width: 25px; height: 33px; color: var(--brandprimary); }
>>
>>
@media all and (min-width: var(--breakpoint-m)){
.dp-map{ height: 450px; }
}
@media all and (min-width: var(--breakpoint-l)){
.dp-map{ height: 600px; }
}
/* Videos */
.dp-video <<* { position: relative; height: 0; padding-bottom: 56.25%; }
& > iframe, & > video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
video{ object-fit: cover; }
>>
.dp-video-a11y, .dp-video-embed <<* { position: relative; height: 0; padding-bottom: 56.25%; }
& > iframe, & > video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
video{ object-fit: cover; }
&.-portrait{ padding-bottom: 177.777777778%; }
>>
.video-caption <<* { margin-top: 1rem; padding: 1.5rem; background: rgba(0,0,0,.1); }
> *:last-child{ margin-bottom: 0; }
>>
/* Audios */
.dp-audio <<* { }
audio{ width: 460px; max-width: 100%; }
>>
.audio-caption <<* { margin-top: 1rem; padding: 1.5rem; background: rgba(0,0,0,.1); }
> *:last-child{ margin-bottom: 0; }
>>
/* Ansprechpartner */
.contact-item <<* { text-align: center; }
.contact-image{ border-radius: 50%; margin: 0 auto .5rem; max-width: 180px; overflow: hidden; }
.contact-name{ font-size: 1.25rem; margin: 0; }
.contact-role{ opacity: .666; font-style: italic; font-size: .825rem; margin: 0; }
.contact-info{ margin-bottom: 0; margin-top: .5rem; font-size: .825rem; }
>>
/* Download */
.download-item <<* { height: 100%; background: var(--opacgrey); padding: 1.25rem; }
.download-preview{ margin-bottom: .5rem; padding: .5rem; background: rgba(255,255,255,.5); box-shadow: 0 0 3px 0 rgba(0,0,0,.1); }
.download-title a, .download-title{ font-size: 1rem; margin: 0; color: var(--headlinecolor); }
p{ margin: .5rem 0 0; }
.download-fileinfo{ font-size: .75rem; }
.fileinfo-spacer{ color: var(--grey); }
>>
/* Termine */
.termin-item <<* { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 2px solid rgba(0,0,0,.1); }
>>
@media all and (min-width: var(--breakpoint-m)){
.termin-item <<* {}
.termin-image{ width: 200px; }
>>
}
/* Slider */
.swiper-button-prev,
.swiper-button-next <<* { height: auto; width: auto; background: none!important; color: #fff; top: 50%; margin-top: auto; transform: translate(0,-50%); text-shadow: 0 0 15px rgba(0,0,0,.5); }
&::after{ display: none; }
svg{ width: 1.25rem; }
>>
.swiper-pagination{position: static;
margin-top: 1rem;}
.swiper-pagination-bullet{ background: transparent; width: 1rem; height: 1rem; margin-inline: 6px !important; border: 1px solid var(--brandprimary); opacity: 1; box-shadow: 0 0 15px 0 rgba(0,0,0,.5); }
.swiper-pagination-bullet-active{ background: var(--brandprimary); opacity: 1; }
/* Bereichslink Item */
.bereichslink-item <<* {}
a{ display: block; }
.bereichslink-image <<* { background-color: var(--opacgrey); }
>>
.bereichslink-title{ position: relative; overflow: hidden; transition: color .5s; font-size: 1.25rem; color: var(--brandprimary); margin: 0; padding: .5rem; text-align: center; text-transform: uppercase; }
.bereichslink-title span{ position: relative; z-index: 2; }
.bereichslink-title::after{ translate: 0 -100%; content: ""; transition: translate .25s; position: absolute; inset: 0; background: var(--brandprimary) url(../images/contentbg-ally.png) center no-repeat; background-size: cover; }
&:hover .bereichslink-title{ color: #fff; }
&:hover .bereichslink-title::after{ translate: 0 0; }
>>
/* Text in Spalten */
@media all and (min-width: var(--breakpoint-l)){
.text-columns-2{ column-count: 2; column-gap: 2rem; }
.text-columns-3{ column-count: 2; column-gap: 2rem; }
.text-columns-2 > *:last-child,
.text-columns-3 > *:last-child{ margin-bottom: 0; }
.text-columns-2 p,
.text-columns-3 p{ margin-bottom: 1.75em; }
}
@media all and (min-width: var(--breakpoint-xl)){
.text-columns-3{ column-count: 3; }
}
.shops-item <<* { height: 100%; padding: .5rem; background: var(--brandprimary) url(../images/contentbg-ally.png) center no-repeat; background-size: cover; }
.item-image{ background-color: #fff; padding: 0 5px; }
.title{ color: #fff; margin: .5rem 0 0; text-align: center; font-size: 1.25rem; }
&:has(a:focus-visible){ outline: 3px solid var(--focushighlightcolor) !important; box-shadow: 0 0 15px var(--fontcolor) !important; }
>>
.blog-item <<* { }
&:has(a:focus-visible){ outline: 3px solid var(--focushighlightcolor) !important; box-shadow: 0 0 15px var(--fontcolor) !important; }
>>