@CHARSET "UTF-8";
/**
* Styles für HTML Elemente und Standard-CSS-Klassen
*/
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0) rotate(0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0) rotate(-2deg);
}
40%, 60% {
transform: translate3d(4px, 0, 0)rotate(2deg);
}
}
@media all {
.df-lightbox-close{ color: #fff !important; }
html{ font-size: var(--fontsizerootmobile); }
/* 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: 2.5rem; }
h2, .h2{ font-size: 1.75rem; }
h3, .h3{ font-size: 1.25rem; }
h4, .h4{ font-size: 1.125rem; }
h5, .h5{ font-size: 1rem; }
h6, .h6{ font-size: .875rem; }
/* Links */
a { color: var(--brandsecondary); text-decoration: none; background-color: transparent; }
a:hover{ color: var(--brandsecondarydark); }
/* 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-third{ color: var(--brandthird); }
.text-default{ color: var(--fontcolor); }
.text-defaultinverted{ color: var(--fontcolorinverted); }
.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-medium{ font-size: 1.125rem; }
.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; background: var(--brandprimary); color: #fff; text-transform: uppercase; transition: all .25s; padding: .375rem 1.5rem; border: 2px solid #fff; display: inline-block; }
>>
.dp-btn a:hover,
a.dp-btn:hover,
input.dp-btn:hover,
button.dp-btn:hover,
.dp-btn-pseudo:hover{ color: #fff; background: var(--linkhover); }
.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: .85rem; padding: .25rem .875rem; }
.dp-btn.btn-secondary a, a.dp-btn.btn-secondary, button.dp-btn.btn-secondary{ background: var(--brandsecondary); }
.dp-btn.btn-secondary a:hover, a.dp-btn.btn-secondary:hover, button.dp-btn.btn-secondary:hover{ background: var(--brandsecondarydark); }
.dp-btn.btn-third a, a.dp-btn.btn-third, button.dp-btn.btn-third{ background: var(--brandthird); }
.dp-btn.btn-third a:hover, a.dp-btn.btn-third:hover, button.dp-btn.btn-third:hover{ background: var(--brandthirddark); }
.dp-pagination <<* { text-align: center; margin: var(--mediumspacing) 0 0; }
a{ font-size: 1rem; text-align: center; font-weight: var(--fontweightbold); text-decoration: none!important; background: transparent; color: var(--brandprimary); text-transform: uppercase; transition: all .25s; padding: .375rem 1rem; border: 2px solid var(--brandprimary); display: inline-block; }
a:hover,a.current{ color: #fff; background: var(--brandprimary); border-color: var(--brandprimary); }
>>
/* Header */
.header-textimage <<* { padding: 1.5rem 0; }
.image{ max-width: 280px; margin: 0 auto; }
.image.bordered{ transform: rotate(-2deg); border: 5px solid var(--brandprimary); }
.title{ color: var(--brandthird); margin: 1.25rem 0 0; }
.textimage-text{ text-align: center; }
>>
/* Toolbar */
#dp-toolbar <<* { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 80; }
> ul{ display: flex; }
> ul > li{ width: 33.333%; flex-shrink: 0; }
> ul > li > a, > ul > li > button{ padding: .5em; text-align: center; font-family: var(--headlinefontfamily); color: #fff; line-height: 1; display: flex; align-items: center; justify-content: center; }
li.login{ background: var(--brandthird); }
li.register{ background: var(--brandsecondary); }
li.song{ background: var(--brandprimary); }
li.song <<* {}
button <<* {}
.icon-play{ display: inline-flex; }
.icon-pause{ display: none; }
>>
button.is-playing <<* {}
.icon-play{ display: none; }
.icon-pause{ display: inline-flex; }
>>
>>
>>
/* Accordion */
.dp-accordion <<* { }
.accordion-title <<* { font-size: 1.5rem; color: #fff; font-family: var(--fontfamilyprimary); font-weight: var(--fontweightbold); }
.icon{ display: flex; align-items: center; }
svg, .icon{ width: .5em; height: .5em; }
svg{ transition: transform .5s; }
>>
.accordion-parent{ padding: 1rem 0; }
.accordion-parent + .accordion-parent{ border-top: 3px solid var(--brandprimary); }
.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(90deg); }
>>
.accordion-text{ transition: font-size .25s, margin .25s, padding .25s, opacity .25s .25s; }
>>
>>
.dp-pageanchor{ transform: translate(0,-75px); }
/* Breadcrumbs */
#breadcrumbs <<* { margin-top: var(--mediumspacing); }
.breadcrumb-separator{ margin-inline: .5em; }
a{ color: var(--brandsecondary); text-transform: uppercase; font-size: .875rem; }
li:last-child a{ color: #fff; }
>>
#breadcrumbs +.dp-contentblock{ margin-top: var(--mediumspacing); }
/* 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; }
>>
/* Element fade in */
.js-fade-in{ opacity: 0; transform: translate(0,2.5rem); transition: opacity 1s, transform 1s; }
body.is-keyboard .js-fade-in{ transition: none; }
.js-fade-in.is-visible, body.is-keyboard .js-fade-in{ opacity: 1; transform: 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); }
>>
>>
/* 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; }
>>
/* Audios */
.dp-audio <<* { }
audio{ width: 460px; max-width: 100%; }
>>
/* Download */
.download-item <<* { }
&:nth-child(odd){ background: var(--opacgrey) !important; }
a{ display: flex; justify-content: space-between; padding: .5rem .75rem; color: #fff; }
svg{ width: 1em; height: 1em; margin-left: 1em; }
>>
.dp-article.layout-dark,
.dp-blockgroup.theme-black .dp-contentblock.block-downloads <<* {}
.download-item{ background: transparent !important; transition: all .25s; border: 2px solid #fff; }
.download-item a{ color: #fff !important; }
.download-item:hover{ background: #fff!important; }
.download-item:hover a{ color: #000!important; }
.download-item + .download-item{ margin-top: var(--smallspacing); }
>>
.dp-article.layout-light <<* {}
.download-item{ background: transparent !important; transition: all .25s; border: 2px solid #000; }
.download-item a{ color: #000 !important; }
.download-item:hover{ background: #000!important; }
.download-item:hover a{ color: #fff!important; }
.download-item + .download-item{ margin-top: var(--smallspacing); }
>>
/* Wallpapier */
.wallpaper-item <<* { }
.wallpaper-preview{ background: #fff; padding: 10px; }
.wallpaper-info{ display: flex; justify-content: space-between; color: #fff; padding: .375rem .75rem; background: var(--brandthird); }
.wallpaper-info svg{ width: 1em; height: 1em; margin-left: 1em; }
.title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
&:hover .wallpaper-info{ background: var(--brandthirddark); }
>>
.wallpaper-col:nth-child(odd) .wallpaper-item .wallpaper-info{ background: var(--brandsecondary); }
.wallpaper-col:nth-child(odd) .wallpaper-item:hover .wallpaper-info{ background: var(--brandsecondarydark); }
/* Termine */
.termin-item <<* { }
a{ display: block; }
a:focus-visible .item-title{ outline: 3px solid var(--focushighlightcolor) !important; box-shadow: 0 0 15px var(--fontcolor) !important; }
.item-header <<* { background: var(--brandprimary); padding: 5px; }
.header-date{ font-size: 4.5rem; width: 2em; padding: .125rem .5rem .25rem .5rem; line-height: 1.1; color: #fff; }
.header-image{ position: relative; height: auto; width: 100%; flex-grow: 1; flex-shrink: 1; }
>>
.termin-content <<* { background: var(--brandthird); transition: all .25s; color: #fff; padding: .5rem 1rem; font-size: 1.175rem; line-height: 1.25; }
.content-item{ margin-right: .375rem; white-space: nowrap; }
>>
&.even .item-header{ background: var(--brandprimarydark); }
&:hover .termin-content{ background: var(--brandthirddark); }
&:hover .termin-body{ animation: shake 1s; transform-origin: center; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; }
>>
.block-termine [data-page]{ display: none; }
.block-termine [data-page="1"]{ display: block; }
/* Slider */
.sldeshow-wrapper{ position: relative; padding: 0 2rem; }
.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.5rem; height: 1.5rem; }
>>
.swiper-pagination{ position: static; width: 100%; display: flex; justify-content: center; }
.swiper-pagination-bullet{ background: var(--brandprimary); opacity: 1; width: 1rem; height: 1rem; margin: 0 .5rem !important; box-shadow: 0 0 0 2px #fff; opacity: 1; }
.swiper-pagination-bullet-active{ background: var(--brandthird); opacity: 1; }
/* Bereichslink Item */
.bereichslink-item <<* {}
.bereichslink-image <<* { background-color: var(--opacgrey); }
>>
>>
.article-text <<* { border-color: var(--brandsecondary); }
ul{ padding: 0; }
li <<* { list-style: none; margin-bottom: .75em; line-height: 1.2; padding-left: 2.5em; padding-top: .25em; padding-bottom: .25em; position: relative; }
&::before{ background-image: url(../images/Farbklecks-Angebote_gruen.svg); position: absolute; left: 0; top: 0; content: ""; width: 1.75em; height: 1.75em; background-position: center; background-repeat: no-repeat; background-size: contain; }
>>
>>
/* Angebot */
.offer-item <<* {}
b, strong, h1, h2, h3,h4,h5,h6, a{ color: var(--brandprimary); }
.title-item{ color: #fff; }
b, strong{ font-weight: var(--fontweightregular); font-size: 1.25rem; }
.article-text{ background: #000; padding: 1.5rem; border: 5px solid var(--brandprimary); }
.offer-details <<* {}
.price-item{ display: flex; align-items: flex-end; justify-content: space-between; }
.price-item span+span{ margin-left: 2.5em; white-space: nowrap; }
p{ margin-bottom: 1em; }
.title-item:not(:first-child){ margin-top: 2rem; }
>>
ul{ padding: 0; }
li{ list-style: none; margin-bottom: .75em; }
li, .price-item, .text-item <<* { line-height: 1.2; padding-left: 2.5em; padding-top: .25em; padding-bottom: .25em; position: relative; }
&::before{ background-image: url(../images/Farbklecks-Angebote_blau.svg); position: absolute; left: 0; top: 0; content: ""; width: 1.75em; height: 1.75em; background-position: center; background-repeat: no-repeat; background-size: contain; }
>>
&.color-gruen <<* {}
b, strong, h1, h2, h3,h4,h5,h6, a,.title-item{ color: var(--brandsecondary); }
.article-text{ border-color: var(--brandsecondary); }
li, .price-item, .text-item <<* { }
&::before{ background-image: url(../images/Farbklecks-Angebote_gruen.svg); }
>>
>>
&.color-orange <<* {}
b, strong, h1, h2, h3,h4,h5,h6, a,.title-item{ color: var(--brandthird); }
.article-text{ border-color: var(--brandthird); }
li, .price-item, .text-item <<* { }
&::before{ background-image: url(../images/Farbklecks-Angebote_orange.svg); }
>>
>>
>>
/* Galerie */
.galleries-item <<* { position: relative; margin: 2.5rem 1.5rem 1.5rem; }
a{ display: block; }
.preview{ position: relative; }
.preview::before{ background: url(../images/Bildergalerie_Bildstapel_Kids_Club.png) center no-repeat; background-size: contain; position: absolute; content: ""; top: -2.5rem; left: -1.5rem; bottom: -1.5rem; right: -1.5rem; }
.preview,.preview::before{ transition: all .75s; transform-origin: left bottom; }
.preview .dp-fsimg{ border: 5px solid var(--brandprimary); position: relative; z-index: 2; }
.title{
background: var(--brandthird); padding: .375em 1em; color: #fff; margin: 0; max-width: 85%; z-index: 3;
line-height: 1.2; font-size: 1.25rem; font-family: var(--fontfamily); font-weight: var(--fontweightregular);
position: absolute; bottom: -1rem; left: -1rem; transform: rotate(-2deg); transform-origin: left bottom;
transition: all .25s;
}
a:hover, a:focus-visible <<* .title{ background: var(--brandthirddark); transform: rotate(-2deg) scale(1.05); }
.preview{ transform: rotate(-1.5deg); }
.preview::before{ transform: rotate(2.5deg); }
>>
a:focus-visible .title{ outline: 3px solid var(--focushighlightcolor) !important; box-shadow: 0 0 15px var(--fontcolor) !important; }
>>
.gallery-secondary .galleries-item .title{ background: var(--brandsecondary); }
.gallery-secondary .galleries-item a:hover .title{ background: var(--brandsecondarydark); }
.dp-gallery <<* {}
.gallery-item{ border: 5px solid var(--brandprimary); position: relative; }
.gallery-item a:focus-visible .scp-picture{ border: 3px solid var(--focushighlightcolor) !important; box-shadow: 0 0 15px var(--fontcolor) !important; }
>>
/* Shop */
.shop-item <<* { padding: 1rem; background: #fff; border: 5px solid var(--brandsecondary); text-align: center; }
.item-image{ }
.item-title{ font-size: 1.25rem; font-family: var(--fontfamily); font-weight: var(--fontweightregular); color: var(--brandsecondary); }
.item-price{ font-size: 1.25rem; }
.item-artnr{ font-size: .925rem; }
.item-price, .item-artnr{ color: var(--brandprimary); font-family: var(--headlinefontfamily); margin: 0; }
>>
.shop-item.odd <<* { border-color: var(--brandthird); }
.item-title{ color: var(--brandthird); }
>>
/* Kicker */
.kicker-item <<* {}
.item-facts{ display: none; }
.item-badge{ position: absolute; bottom: 15%; left: 15%; width: 70%; transition: all .25s; }
.item-name{ margin: 0; background: #fff; border: 3px solid var(--brandprimary); color: var(--brandprimary); padding: .375em 1em; font-family: var(--fontfamily); font-weight: var(--fontweightregular); font-size: 1.375rem; text-align: center; }
.item-nummer{ position: absolute; bottom: 100%; left: 0; font-size: 4rem; margin: 0 0 -13px -.5rem; font-family: var(--headlinefontfamily); color: #fff; line-height: 1em; }
.item-position{ position: absolute; top: 100%; margin-top: -.5em; right: -1.5rem; color: #fff; background: var(--brandthird); padding: .5rem .75rem; line-height: 1em; white-space: nowrap; transform: rotate(-1deg); }
button:hover, button:focus-visible <<*
.item-badge{ transform: rotate(-2deg) scale(1.05); }
>>
button:focus-visible .item-name{ outline: 3px solid var(--focushighlightcolor) !important; box-shadow: 0 0 15px var(--fontcolor) !important; }
.img-secondary{ display: none; }
.img-primary{ }
>>
.kicker-overlay-bg{ z-index: 240; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.75); }
.kicker-item-overlay, .dp-popup <<* {
display: flex;
z-index: 250; position: fixed; top: 50%; left: 50%; width: 1280px; height: auto; max-width: 73%; max-height: 90vh; transform: translate(-50%,-50%);
}
.overlay-inner{ flex-grow: 1; overflow-y: auto; overflow-x: hidden; background: #fff; padding: 1rem 1rem 0; border: 5px solid var(--brandprimary); }
.next-item,
.prev-item,
.close-item <<* { width: 30px; height: 30px; background: var(--brandprimary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; position: absolute; }
&:hover{ background: var(--brandprimarydark); }
>>
.close-item{ bottom: 100%; left: 100%; transform: translate(-50%,50%); }
.next-item{ top: 50%; left: 100%; transform: translate(.5rem,-50%); }
.prev-item{ top: 50%; right: 100%; transform: translate(-.5rem,-50%); }
dl{ margin: 0; padding: 0; }
h1{ margin: 1rem 0; }
h1 svg{ display: none; }
dl{ font-size: 1.25rem; }
dt,dd{ font-weight: var(--fontweightregular); margin: 1.25rem 0; line-height: 1.2; }
dt{ color: #000; }
dd{ color: var(--brandthird); }
.img-secondary{ display: block; }
.img-secondary + .img-primary{ display: none; }
>>
/* Bundesliga Tabelle */
.scp-bl-tabelle <<* { position: relative; }
.entries-page.hidden{ display: none; }
.table-row{ padding-right: .5rem; }
strong{ font-weight: var(--fontweightregular); }
.table-col{ color: #fff; padding: .5em .75em; }
.table-row.row-head <<* { background: #fff; line-height: 1; }
.table-col{ text-transform: uppercase; color: var(--fontcolorinverted); }
>>
.table-row.row-body <<* { }
&.row-even{ background-color: rgba(0,0,0,.25); }
.team-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
>>
.scp-tabelle-pager <<* { position: absolute; top: 50%; right: 0; transform: translate(0,-50%); }
span{ margin: .125rem 0; line-height: 1; display: block; cursor: pointer; transition: all .25s; color: #fff; }
span.active{ }
span:hover{ color: var(--brandprimary); }
>>
.pager <<* { position: absolute; width: 15px; top: 50%; right: 0; transform: translate(0,-50%); }
button{ transform: scale(.8); cursor: pointer; transition: all var(--defaulttransitionspeed); margin: .25rem 0; width: 15px; height: 15px; display: inline-block; border-radius: 50%; background: var(--defaultfontcolor); opacity: 1; box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
button.active{ background: var(--brandprimary); transform: scale(1); }
>>
.col-headline{ }
.col-logo{ width: 36px; padding-left: 0; padding-right: 0; }
.col-name{ width: 100%; }
.col-platz,
.col-spiele,
.col-siege,
.col-unentschieden,
.col-niederlagen,
.col-tordifferenz,
.col-punkte{ width: 2.5em; }
.entry-is-scp .col-logo img{ transform: scale(1.3); }
>>
.contact-item <<* {}
.contact-image{ max-width: 150px; margin: 0 auto; }
>>
/* Spiel im Spielplan */
.spielplan-item <<* { background: rgba(0,0,0,.25); }
strong{ font-weight: var(--fontweightregular); }
.spiel-header{ padding: .25rem .75rem; font-size: .875rem; background: #fff; color: var(--fontcolorinverted); }
.spiel-body <<* { font-size: 1rem; padding: .5rem .75rem; }
*{ color: #fff; }
.spiel-infos{ white-space: nowrap; }
.spiel-infos > .seperator:first-child{ display: none!important; }
.spiel-logo{ width: 40px; height: 40px; display: inline-flex; align-items: center; }
.spiel-vereinsname{ line-height: 1.333; }
>>
&.ist-profis <<* {}
.spiel-verein.ist-gegner .spiel-logo{ width: 33px; }
>>
>>
.article-sidebarcol{ max-width: 300px; }
.sidebar-item .download-item{ margin-bottom: var(--smallspacing); }
.textcolimages <<* {}
.image-col .dp-fsimg{ border: 5px solid var(--brandprimary); box-shadow: 1px 1px 3px 2px rgba(0,0,0,.25); }
.image-col:nth-child(1) .dp-fsimg{ transform: rotate(-1.5deg) translate(5px,0); }
.image-col:nth-child(2) .dp-fsimg{ transform: rotate(2deg) translate(-2px,-5px); border-color: var(--brandprimarydark); }
.image-col:nth-child(3) .dp-fsimg{ transform: rotate(-1.5deg) translate(0,-6px); }
>>
.viewer-item <<* { text-align: center; }
._df_custom.imagelink{ cursor: pointer; margin-bottom: .5rem; }
._df_custom.imagelink:hover{ cursor: pointer; animation: shake 1s; transform-origin: center; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; }
._df_custom.textlink{ cursor: pointer; }
.textlink{ }
.item-name { margin: 0; background: var(--brandthird); transition: all .25s; color: #fff; padding: .5rem 1rem; font-size: 1.175rem; line-height: 1.25; }
._df_custom.imagelink:hover .item-name{ background: var(--brandthirddark); }
>>
}
@media all and (min-width: var(--breakpoint-s)){
/* Toolbar */
#dp-toolbar <<* { }
> ul > li{ font-size: 1.25rem; }
>>
.kicker-item-overlay, .dp-popup <<* {}
.next-item{ transform: translate(1.5rem,-50%); }
.prev-item{ transform: translate(-1.5rem,-50%); }
>>
}
@media all and (min-width: var(--breakpoint-m)){
h1, .h1{ font-size: 3.5rem; }
h2, .h2{ font-size: 2.5rem; }
h3, .h3{ font-size: 2rem; }
h4, .h4{ font-size: 1.5rem; }
h5, .h5{ font-size: 1.25rem; }
h6, .h6{ font-size: .925rem; }
/* Header */
.header-textimage <<* { padding-top: 50px; padding-bottom: 50px; }
.image{ max-width: none; }
.image.bordered{ margin-right: 5px; }
.title{ margin: 0; }
.textimage-text{ text-align: left; }
>>
/* Map */
.dp-map <<* { height: 450px; }
>>
/* Slider */
.sldeshow-wrapper{ padding: 0 3rem; }
.contact-item <<* {}
.contact-image{ max-width: 250px; }
>>
.kicker-item-overlay, .dp-popup <<* { }
.next-item,
.prev-item,
.close-item <<* { width: 40px; height: 40px; }
>>
>>
}
@media all and (min-width: var(--breakpoint-l)){
html{ font-size: var(--fontsizeroot); }
.dp-pageanchor{ transform: translate(0,-125px); }
/* Map */
.dp-map <<* { height: 600px; }
>>
.text-columns-2{ column-count: 2; column-gap: 6rem; }
.text-columns-3{ column-count: 2; column-gap: 3rem; }
.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; }
#breadcrumbs <<* { margin-top: var(--largerspacing); }
>>
.article-sidebarcols{ display: flex; }
.article-contentcol{ flex-grow: 1; width: 100%; }
.article-sidebarcol{ flex-grow: 0; flex-shrink: 0; width: 235px; margin-left: 4rem; }
}
@media all and (min-width: var(--breakpoint-xl)){
.text-columns-3{ column-count: 3; }
/* Header */
.header-textimage <<* { padding-right: 25%; padding-top: 75px; padding-bottom: 75px; }
>>
/* Toolbar */
#dp-toolbar <<* { position: absolute; bottom: auto; left: auto; width: auto; top: 15px; right: 1rem; }
> ul{ display: block; }
> ul > li{ width: auto; position: absolute; transition: all .25s; }
> ul > li > a, > ul > li > button{ padding: 0; width: 100%; height: 100%; }
> ul > li:hover{ filter: brightness(110%); transform: scale(1.1) rotate(-2deg); }
li.login <<* { top: 0; right: 7em; width: 5em; height: 5em; background: transparent url(../images/Farbklecks-orange.svg) center no-repeat; }
> a > span{ transform: translate(7px,-1px); }
>>
li.register <<* { top: 0; right: 0; width: 7em; height: 7em; background: transparent url(../images/Farbklecks-gruen.svg) center no-repeat; }
> a{ padding: 0 2em; }
> a > span{ transform: translate(-4px,9px); }
>>
li.song <<* { top: 4em; right: 6em; font-size: 1.125rem; width: 7em; height: 7em; background: transparent url(../images/Farbklecks-blau.svg) center no-repeat; }
> button{ padding: 0 2em; }
> button > span{ transform: translate(0,2px); }
> button > span > .icon{ display: block; }
>>
>>
}
@media all and (min-width: var(--breakpoint-xxl)){
/* Slider */
.sldeshow-wrapper{ padding: 0; }
.swiper-button-prev{ right: 100%; left: auto; margin: 0 3rem; }
.swiper-button-next{ left: 100%; right: auto; margin: 0 3rem; }
}