/* Variablendeklaration ***************************************************************************************/
:root {
    /* fonts ***********************************************************************/
    --titleFont: Lobster; /* the site title font */
    --textFont: Montserrat; /* the primary text font */
    --quoteFont: Typewriter; /* quotation font */
    --monoFont: Monotype; /* monotype */
    --icoFont: Symbols; /* symbol font for additional icons before or after links and lists */

    /* font sizes and familys ******************************************************/
    --head01: normal normal 400 clamp(2.35rem, 8vw, 6rem)/normal var(--titleFont); /* h1 scale */
    --headSub: normal normal 700 clamp(1rem, 1.9vw, 1.45rem)/normal var(--textFont); /* h1 subline scale */
    --fliessText: normal normal 500 1rem/normal var(--textFont); /* general text */
    --addIcon: normal normal 400 1.2em/normal var(--icoFont); /* additional icons before or after links and lists */
    --mapFont: normal normal 500 1rem/normal "Helvetica Neue", Arial, Helvetica, sans-serif; /* map font */
    --scaleFont: clamp(1rem, 1.5vw, 1.2rem); /* scalable font on full width sections */

    /* colors **********************************************************************/
    --neutralDark: rgba(33, 33, 33, 1); /* text (not completely black) */
    --neutralLight: rgba(255, 247, 236, 1); /* invert text (not completely white) */

    --linkColor: rgba(255, 69, 0, 1); /* hyperlinks */
    --linkHover: rgba(255, 0, 0, 1); /* hyperlinks hover */
    --invertHover: rgba(252, 198, 20, 1); /* invert text link hover */
    
    --ctaColor: rgba(191, 4, 4, 1); /* call to action */
    --ctaHover: rgba(241, 11, 11, 1); /* call to action hover */
    --accentGreen: rgba(72, 140, 3, 1); /* accent color for cookie-banner, form-checkbox and form-success-message */
    --darkBlue: rgba(1, 9, 23, 1); /* backgrounds headlines, breadcrumb etc. */
    
    --calendarButton: rgb(0, 68, 100); /* calendar buttons and headers */
    --clrRoss: rgb(2, 108, 156); /* calendar ross color */
    --clrRadio: rgb(255, 115, 0); /* calendar rad i.o. color */
    --clrGorbitz: rgb(43, 145, 43); /* calendar gorbitz color */
    --clrScrew: rgb(255, 0, 157); /* calendar Screw color */
    --clrESF: rgb(192, 53, 192); /* calendar ESF color */
    --clrEvent: rgb(231, 52, 7); /* calendar Event color */
    --clrHolidays: rgb(112, 0, 187); /* calendar Holidays color */
    
    /* background-images and colors ************************************************/
    --panelBg: rgba(58, 58, 58, .9); /* top-panel */
    --navBg: rgba(58, 58, 58, 0.7); /* top-navigation */
    --panelBg: rgba(1, 9, 23, .9); /* top-panel */
    --navBg: rgba(1, 9, 23, 0.7); /* top-navigation */
    --calendarBg:  rgba(255, 255, 255, 0.8); /* background calendar on sites */
    --navBgHover: rgba(204, 204, 204, 0.4); /* navigation-links hover */
    --bgGradient: linear-gradient( 30deg, rgba(2, 22, 92, 1), rgba(102, 1, 161, 1), rgba(121, 0, 8, 1)); /* background-gradient for slanted and footer sections */ 

    --bgColorParts: url(/assets/images/partsbgcolor.png); /* bicycle-parts above the body */
    --bgParts: url(/assets/images/partsbg.png); /* bicycle-parts above the bgGradient */
    --bgColorPartsSmall: url(/assets/images/partsbgcolorSmall.png); /* bicycle-parts above the body - Portrait-Modus */
    --bgPartsSmall: url(/assets/images/partsbgSmall.png); /* bicycle-parts above the bgGradient - Portrait-Modus */

    --bgColorPartsRetina: url(/assets/images/partsbgcolorRetina.png); /* bicycle-parts above the body */
    --bgPartsRetina: url(/assets/images/partsbgRetina.png); /* bicycle-parts above the bgGradient */
    --bgColorPartsSmallRetina: url(/assets/images/partsbgcolorRetinaSmall.png); /* bicycle-parts above the body - Portrait-Modus */
    --bgPartsSmallRetina: url(/assets/images/partsbgRetinaSmall.png); /* bicycle-parts above the bgGradient - Portrait-Modus */

    --entryImg: url(/media/pages/home/a3674e6c8a-1746391792/wand.jpg); /* headerbackground startpage */

    /* sizes and spacings **********************************************************/
    --dekoImg: 40vh; 
    --mapHeight: 50vh;
    --mobileImg: 40dvh; /* image height on mobile */
    --mobileMap: 50dvh; /* map height on mobile */
    --contentWidth: min(87rem, calc(100vw - 6rem)); /* scalable content width */
    --contentPadding: calc((100vw - var(--contentWidth))/2); /* content padding depending on content width */
    --slantedMargin: clamp(3.5rem, 4vw, 4.5rem); /* slanted sections - space to neighbor sections */

    /* forms and shapes ************************************************************/
    --slantedSection: polygon(0 clamp(1rem, 5vw, 3rem),100% 0,100% calc(100% - clamp(1rem, 5vw, 3rem)),0 100%); /* the shape for slanted sections */
    --footerShape:  polygon(0 clamp(1rem, 5vw, 3rem),100% 0,100% 100%,0 100%); /* the shape for the footer-section */
    --generalShape:  polygon(0 0,100% 0,100% calc(100% - clamp(1rem, 5vw, 3rem)),0 100%); /* the shape for the general-section */

    /* other variables *************************************************************/
    --transition: all .3s ease-in-out; /* transition definition */
}

/* Schriftarten ***********************************************************************************************/
@font-face {
    font-family: Montserrat;
    src: url(../font/Montserrat-VariableFont_wght.ttf);
}

@font-face {
    font-family: Lobster;
    src: url(../font/Lobster-Regular.ttf);
}

@font-face {
    font-family: Typewriter;
    src: url(../font/Kingthings_Trypewriter_2.ttf);
}

@font-face {
    font-family: Monotype;
    src: url(../font/Iceberg-Regular.ttf);
}

@font-face {
    font-family: Symbols;
    font-style: normal;
    src: url(../font/MaterialSymbolsRounded-VariableFont_FILL\,GRAD\,opsz\,wght.ttf);
    font-display: block;
}

/* Browser reset **********************************************************************************************/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
}

ol,
ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: rgb(255, 69, 0);
    transition: all .5s ease-in-out;
}

a:hover {
    color: rgb(255, 0, 0);
}

/* allgemeine Styles ******************************************************************************************/
html,
body {
    overflow-x: hidden;
    font: var(--fliessText);
    font-size: 1rem;
    line-height: 1.3;
}
html {
    background-color:  var(--neutralLight);
}
body {
    background-image: var(--bgColorParts);
    background-image: image-set(var(--bgColorParts) 1x, var(--bgColorPartsRetina) 2x); /* image-set */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

figcaption{
    font-size: .75rem;
    text-align: right;
    margin-top: -.3rem;
}

h5 {
    margin-bottom: 1rem;
}

.alt-logo,
.nav-panel .alt-logo a {
    color: var(--neutralLight);
    font-family: var(--fliessText);
}

main ul {
    list-style: square;
}
main ul.workspace,
main ul.culture,
main ul.how-to,
main ul.dealer,
main ul.recycling,
main ul.thumb,
main ul.help,
main ul.clock,
main ul.date,
main ul.map-pin {
    list-style: none;
}

/* Topmenü ****************************************************************************************************/
/* Panel mit Logo, Instalink und Menuetoggle-Button ****************************/
.nav-panel {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    padding: 0 2rem 0;
    justify-content: space-between;
    background: var(--panelBg);
    backdrop-filter: blur(.5rem);
    z-index: 9999;
} 

.nav-panel>div {
    display: flex;
    justify-content: space-between;
    width: 9rem;
}

.home .nav-panel>div {
    width: 6.5rem;
} 

.nav-panel>div>a>svg.social-icon {
    transform: translateY(-0.2rem);
}

.nav-panel a,
.language span {
    display: inline-block;
    font-family: var(--icoFont);
    color: rgb(255, 255, 255);
    font-size: 2rem;
    font-weight: 300;
}
.language{
    position: relative;
}
.language span{
    font-size: 1.7rem;
    transform: translateY(.2rem);
    cursor: default;
}
.language ul{
    position: absolute;
    right: -0.5rem;
    top: 2.65rem;
    transform: scaleY(0);
    transform-origin: top;
    transition: var(--transition);
}
.language li a{
    display: block;
    font-family: var(--fliessText);
    font-size: 1rem;
    font-weight: 500;
    padding: .2rem 1rem .3rem;
    margin-bottom: .0625rem;
    background: var(--panelBg);
    white-space: nowrap;
}
.language li a:hover{
    background: rgb(243, 122, 213);
    color: var(--darkBlue)
}
.language li.active a{
    pointer-events: none;
    color: rgb(243, 122, 213);
}
.language li.active a::after{
    display: inline-block;
    font-family: var(--icoFont);
    content: 'Task_Alt';
    margin-left: 1rem;
    transform: translateY(.1rem);
}
.language:hover ul{
    transform: scaleY(1);
}

.nav-panel .social-icon {
    fill: white;
    transform: translateY(-0.1rem);
    width: 1.6rem;
}

.logo-top {
    height: 1.8rem;
    width: auto;
    display: block;
    transform: translateY(.35rem);
    color: var(--neutralLight);
    font-family: var(--textFont);
}

.menu-toggle,
.calendar-toggle {
    display: block;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgb(255, 255, 255);
    padding: .05rem 0 .07rem;
    font-family: var(--icoFont);
    font-size: 2rem;
    line-height: 1;
    z-index: 9001;
}
.calendar-toggle{
    font-size: 1.7rem;
}

table.icon-overview {
    border-collapse: collapse;
    border: 1px solid var(--neutralDark);
    width: 50%;
    min-width:18.5rem;
    margin-bottom: 3rem;
}
.icon-overview th {
    text-align: left;
}
.icon-overview td, 
.icon-overview th {
    padding: .3rem .3rem .3rem .3rem;
}
.icon-overview td:first-child {
    padding-right: 5rem;
}
.icon-overview tr:nth-child(even) {
    background: var(--neutralDark);
    color: var(--neutralLight);
}
.icon-font {
    font-family: var(--icoFont);
    font-size: 1.4rem;
    line-height: 1;
}

/* Seitenheader ****************************************************************/
.site-header {
    width: 100vw;
    height: 70vh;
    display: table-cell;
    vertical-align: bottom;
    background-position: center;
    background-size: cover;
    background-color: #000000;
}

.site-header hgroup {
    color: var(--neutralLight);
    padding: 0 var(--contentPadding) 1rem;
    background-image: linear-gradient(to right, rgba(1, 9, 23, .5) 0%, rgba(1, 9, 23, .5) 50%, rgba(1, 9, 23, 0) 90%);
    margin-bottom: min(10dvh, 10vw);
    text-shadow: .1rem .1rem .3rem rgba(0, 0, 0, .3);
    width: fit-content;
}

.site-header hgroup h1 {
    font: var(--head01);
}

.site-header hgroup p {
    font: var(--headSub);
    padding-bottom: 0;
}

.full-header,
.site-header {
    background-attachment: fixed;
}

.site-header .sourceCover {
    background-image: linear-gradient(to left, rgba(1, 9, 23, .5) 0%, rgba(1, 9, 23, .5) 50%, rgba(1, 9, 23, 0) 90%);
    color: var(--neutralLight);
    font-size: .75rem;
    text-align: right;
    padding: .2rem 2rem .2rem 3rem;
    width:fit-content;
    float: right;
}

/* Karte ***********************************************************************/
#map {
    min-height: var(--mapHeight);
}

.nuetzliche-links #map,
.useful-links #map {
    min-height: 70vh;
}

.leaflet-popup-content-wrapper>.leaflet-popup-content {
    display: grid;
    grid-template-columns: 6.25rem 1fr;
    gap: .5rem;
    width: 18.8125rem !important; /* überschreibt die 300px max-width Inlinestyle um die Breite bei größerer Schrift anzupassen */
}

.leaflet-popup-content img {
    width: 100px;
}

.leaflet-popup-content h4 {
    margin-block: .5rem;
}

.leaflet-popup-content a.map-Link {
    display: inline-block;
    font-size: .9rem;
}

.leaflet-popup-content ul {
    padding-bottom: 0;
}

.leaflet-popup-content::after {
    content: "";
    display: block;
    clear: both;
}

#map img.popImg {
    width: 100%;
    height: auto;
    transform: translateX(0);
}

img.leaflet-marker-icon[src="/assets/images/reparad.png"] {
    cursor: default; /* map Mousepointer for Tooltip, not for Popup on Homepage */
}

.tt-only img.leaflet-marker-icon,
.nuetzliche-links img.leaflet-marker-icon {
    cursor: default; /* map Mousepointer for Tooltip on sites */
}

a[href="ross"]::after,
a[href="radio"]::after,
a[href="gorbitz"]::after {
    content: "Map";
    font: var(--addIcon);
    display: inline-block;
    transform: translateY(.3rem);
    margin-right: .5rem;
    margin-left: .3rem;
}

#map a.map-Link::after {
    content: "Public";
    font: var(--addIcon);
    font-size: 1.2rem;
    display: inline-block;
    transform: translate(.3rem, .27rem);
    margin-right: .5rem;
}

.leaflet-popup-content .wifi{
    color: rgb(0, 120, 168);
    font-family: var(--icoFont);
    font-size: 1.2rem;
    cursor: pointer;
    display: inline-block;
    transform: translate(.25rem, .16rem);
}

.leaflet-control-attribution a{
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* Contentzeug *****************************************************************/
.content,
.content-width {
    width: var(--contentWidth);
    margin: 0 auto;
    padding-block: 3rem;
}

.invert {
    /* background: var(--neutralDark); */
    color: var(--neutralLight);
}

.content ul {
    margin-bottom: 1rem;
}

.content ul li {
    position: relative;
    padding-left: 3rem;
    margin-bottom: .5rem;
    margin-left: -.8rem;
}

.content ul li:before {
    font-family: var(--icoFont);
    display: inline-block;
    position: absolute;
    left: 1rem;
    top: -0.1em;
    font-size: 1.2rem;
}

a.more::after {
    content: '..';
}


/* Artikelübersicht (Collections) **********************************************/
.columns.article-wrapper {
    gap: 0;
    padding-top: 4rem;
}
article {
    margin: -1.5rem -.5rem 0;
    padding-bottom: 1rem;
    position: relative;
    filter: drop-shadow(1px 1px 2px rgba(31, 30, 31, 0.3));
    transform-origin: calc(50% - .75rem) 1.55rem;
    transition: all .5s ease-in-out;
    --randColor: #ff00dd;
}
article:hover {
    transform: rotateZ(0deg) !important; /* Artikel gerade richten entgegen inline-anweisung (random javascript) */
    z-index: 1;
}
article:before {
    display: block;
    content: '';
	border-radius: 50%;
	width: .75rem;
	aspect-ratio: 1;
    background: var(--randColor);
    position: absolute;
    left: calc(50% - .5rem);
    top: .8rem;
    z-index: 1000;
	box-shadow: .125rem .25rem .5rem rgba(0,0,0,1), .125rem .25rem .3rem rgba(255, 255, 255, .55) inset, -.125rem -.25rem .3rem rgba(41, 41, 41, 0.55) inset;
	margin: 0 auto;
	margin-top: 2px;
}
article span {
    padding-top: 1.6rem;
    background: #f8f8f8;
    display: block;
    mask: radial-gradient(.5rem at 50% .8rem,#0000 calc(100% - 1px),#000) 50%/1.3rem 100%;
}

article img{
    display: block;
}

article h1 {
    font-size: 1.2rem;
    color: var(--neutralLight);
    background: var(--neutralDark);
    padding: .5rem 1rem;
}

article div {
    padding-top: 1rem;
}

article p {
    padding: 0 1rem 1rem;
}
/* .no-events-yet {
    font-size: 3rem;
} */
.hidden{
    display: none;
}
/* List-Styles */
ul.list-item li {
    list-style: none;
    margin-left: .5rem;
}

ul.list-item li:before,
span.time {
    font-family: var(--icoFont);
    display: inline-block;
    position: relative;
    font-size: 1.2rem;
    bottom: -0.2em;
    padding-right: .4rem;
    margin-left: -1.5rem;
}
span.time{
    margin: 0;
    padding: 0;
}


/* Die verschiedenen Icons... */
ul.workspace li:before {
    content: 'Handyman';
}
ul.culture li:before {
    content: 'Book_2';
}
ul.how-to li:before {
    content: 'Emoji_Objects';
}
ul.dealer li:before {
    content: 'Manufacturing';
}
ul.recycling li:before {
    content: 'Recycling';
}
ul.thumb li:before {
    content: 'Thumb_Up';
}
ul.help li:before {
    content: 'Help';
}
ul.clock li::before {
    content: 'Nest_Clock_Farsight_Analog';
}
ul.date li::before {
    content: 'Calendar_Month';
}
ul.map-pin li::before {
    content: 'Location_On';
}

.wifi{
    font-family: var(--icoFont);
    font-size: 1.6rem;
    font-weight: 300;
    cursor: default;
    display: inline-block;
    margin-left: 1rem;
}
.social {
    margin-top: 3.3rem;
}

.social ul li {
    display: inline-block;
}

.social-icon {
    display: inline-block;
    height: 1.5rem;
    aspect-ratio: 1;
}

.quote {
    margin: 2rem 1.5rem 3rem 1.5rem;
    position: relative;
    z-index: 1;
} 

blockquote {
    padding: 3rem 2rem 2rem;
    font-family: var(--quoteFont);
    font-size: 1.7rem;
    background: #fefabc linear-gradient(150deg, #efec88 0%, #fefabc 100%);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    transform:rotate(-4deg);
    position: relative;
}

blockquote footer {
    display: block;
    text-align: right;
    font-size: .8em;
    font-weight: 500;
    margin-top: .5rem;
    padding-bottom: 1.5rem;
}
blockquote::before {
    content: "";
    background-color: rgba(0, 0, 0, 0.055);
    position: absolute;
    width: 40%;
    left: 30%;
    top: -1.5rem;
    height: 2.5rem;
    transform: rotate(1.5deg);
    z-index: -1;
    mask: repeating-conic-gradient(from 45deg at 30px 50%,#0000,#000 1deg 89deg,#0000 90deg 180deg) -30px 50%/100% .5rem;
}
.quote > span {
    display: block;
    position: absolute;
    bottom: .2rem;
    right: 0;
    width: 90%;
    height: 50%;
    background-image: linear-gradient(173deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .4) 100%);
    transform: rotate(-5deg) skewY(3deg);
    z-index: -1;
    filter: blur(2px);
}
.invert.typewriter .content-width {
    font-family: var(--quoteFont);
    font-size: 4rem;
}

.ws-info {
    margin-block: clamp(.5rem, 4vw, 1.5rem);
    clip-path: var(--slantedSection);
    background-color: var(--darkBlue);
    background-image: var(--bgGradient);
    background-attachment: fixed;
    width: 100vw;
}
.ws-info .social-icon {
    fill: var(--neutralLight);
    transition: all .3s ease-in-out;
}
.ws-info .social-icon:hover {
    fill: rgb(252, 198, 20);
}
.ws-info .columns {
    width: 100vw;
}
.ws-info .columns-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 5rem var(--contentPadding);
    background-image: var(--bgParts);    
    background-image: image-set(var(--bgParts) 1x, var(--bgPartsRetina) 2x); /* image-set */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
.ws-info .columns-3 .column {
    color: var(--neutralLight);
    border-radius: .25rem;
}
.ws-info .columns-3 .column p:last-child {
    padding-bottom: 0;
}
.ws-info .columns-3 .column p a {
    color: var(--neutralLight);
    transition: all .3s ease-in-out;
}
.ws-info .columns-3 .column p a:hover {
    color: rgb(252, 198, 20);
}
/* Footerzeug */
footer.invert {
    margin-top: 4rem;
    clip-path: polygon(0 clamp(1rem, 5vw, 3rem),100% 0,100% 100%,0 100%);
    background-color: var(--darkBlue);
    background-image: var(--bgGradient);
    background-attachment: fixed;
}
.bg-wrapper {
    padding-top: 5rem;
    background-image: var(--bgParts);
    background-image: image-set(var(--bgParts) 1x, var(--bgPartsRetina) 2x); /* image-set */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
.foot-content {
    width: var(--contentWidth);
    margin: 0 auto;
}

footer .social-icon {
    fill: var(--neutralLight);
    transform: translateY(-5rem);
    transition: fill .5s ease-in-out;
}
footer .social-icon:hover{
    fill: rgb(252, 198, 20);
}

.add-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.add-info {
    border-top: 1px solid var(--neutralLight);
    padding: 0 0 8rem 0;
}

.add-info,
.add-info a {
    font-size: .8rem;
}

.add-info a {
    font-weight: 600;
    line-height: 1.5;
    color: var(--neutralLight);
}
.add-info a:hover{
    color: rgb(252, 198, 20);
}

.cms {
    text-align: right;
}

.copy {
    padding: .5rem 0 1rem;
}

#kirby {
    display: inline-block;
    fill: var(--neutralLight);
    transform: translateY(.33rem);
    width: 3.6rem;
    height: auto;
    margin: 0 .2rem;
    transition: all .5s ease-in-out;
}
#kirby:hover{
    fill: rgb(252, 198, 20);
}

/* footer-navigation */
.sitemap>ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    padding: 3rem 0 3rem;
}

.sitemap>ul>li:last-child {
    grid-column: 2;
}

.sitemap>ul a {
    display: block;
}

.sitemap>ul>li>a {
    margin: 1rem 0 .4rem;
    font-size: 1.1rem;
    color: var(--neutralLight);
    color: var(--neutralLight);
    font-weight: 600;
    font-variant: small-caps;
}

.sitemap ul>li>ul>li {
    padding-bottom: .2rem;
}

.sitemap ul>li>ul>li a {
    /* color: var(--neutralLight); */
    color: var(--neutralLight);
}
.sitemap>ul>li>a:hover,
.sitemap ul>li>ul>li a:hover,
.sitemap>ul>li>a:focus,
.sitemap ul>li>ul>li a:focus {
color: rgb(252, 198, 20);
}

.oezRoss .fc-list-event-dot {
    background: var(--clrRoss);
    border: calc(var(--fc-list-event-dot-width)/2) solid var(--clrRoss);
}

.oezRadio .fc-list-event-dot {
    background: var(--clrRadio);
    border: calc(var(--fc-list-event-dot-width)/2) solid var(--clrRadio);
}

.oezGorbitz .fc-list-event-dot {
    background: var(--clrGorbitz);
    border: calc(var(--fc-list-event-dot-width)/2) solid var(--clrGorbitz);
}

a.toplink {
    display: none;
    position: fixed;
    right: 3rem;
    bottom: 2rem;
    padding-block: .3rem;
    color: var(--neutralLight);
    font-family: var(--icoFont);
    line-height: .5;
    letter-spacing: 0;
    text-align: center;
    font-size: 1.7rem;
    font-weight: 400;
    background: var(--navBg);
    border: .0625rem solid var(--neutralLight);
    border-radius: .25rem;
    overflow: hidden;
    z-index: 9999;
}
a.toplink span{
    margin-inline: -0.13rem;
}

/* Darstellungshack fixed Background für iOS */
@supports (-webkit-touch-callout: none) { 
    .full-header,
    .site-header {
        background-attachment: scroll;
    }
}

/* Mediaqueries */
@media screen and (max-width: 51.25rem) { /* 820px */
    .add-info{
        display: block;
    }
    .cms{
        text-align: left;
        line-height: 1.5;
    }
}

@media screen and (max-width: 37.5rem) { /* 600px */
    :root {
        --contentWidth: calc(100vw - 4rem);
    }
    .sitemap>ul {
        grid-template-columns: 1fr;
        padding: 2rem 0 5rem;
    }
    .sitemap>ul>li:last-child {
        grid-column: auto;
    }
    footer .social-icon {
        transform: translateY(-3rem);
    }
    #calendar h2 {
        font-size: 1.2rem;
    }
    h1,
    h2,
    h3,
    h4,
    blockquote {
        hyphens: auto; /* Silbentrennung in Überschriften */
        hyphenate-character: auto;
    }
    a.toplink {
        right: 1.5rem;
        bottom: 1rem;
    }
    .quote {
        margin: 2rem auto;
    } 
    .home .quote {
        margin: 3rem 0 3rem 0;
    } 
    blockquote {
        font-size: 1.2rem;
    }
    blockquote {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 25.625rem) { /* 410px */
    :root{
        --contentWidth: min(87rem, calc(100vw - 2rem));
        --contentPadding: calc((100vw - var(--contentWidth))/2);
    }
    .nav-panel {
        padding: 0 1rem 0;
    } 

    .site-header .sourceCover {
        padding: .2rem 1rem .2rem 3rem;
    }
}

@media screen and (max-width: 21.875rem) { /* 350px */
    :root{
        font-size: .875rem;
    }
    .full-header>section>p,
    .full-header>section>span {
        display: none;
    }
    hgroup>h1~p[role] {
        margin-bottom: 0;
    }   
    .nav-panel>div>a>svg.social-icon {
        transform: translateY(-0.25rem)
    }
    #map {
        height: 80vh;
    }
    .site-header h1 {
        margin-bottom: .5rem;
    }
    .nav-panel > div{
        width: 7.5rem;
    }
}

@media screen and (min-width: 59.375rem) { /* 950px */
    .sitemap>ul {
        grid-template-columns: repeat(4, 1fr);
    }
    .sitemap>ul>li:last-child {
        grid-column: 4;
        margin-top: -1rem;
    }
    .e404-message {
        transform: translateY(0);
    }
    .home footer.invert {
        margin-top: clamp(.5rem, 4vw, 1.5rem);
    }
    .manual main{
        display: grid;
        grid-template-columns: 20rem 1fr;
        gap: 1rem;
        width: var(--contentWidth);
        margin: 0 auto;
    }
    .manual main .sidebar{
        position: relative;
        font-size: .85rem;
    }
    .manual main .sidebar .columns-1.sidebar-fixed{
        position:fixed;
        top: 2rem;
        width: 20rem;
    }
    .manual main .sidebar .columns-1.sidebar-absolute{
        position:absolute;
        bottom: 0;
    }
    .manual main .columns{
        display: block;
        width: auto;
    }
    .ws-info #map{
        min-height: 16rem;
    }
}

@media screen and (min-width: 75rem) { /* 1200px */
    .sitemap>ul {
        grid-template-columns: repeat(5, 1fr);
    }
    .sitemap>ul>li:last-child {
        grid-column: auto;
        margin-top: 0;
    }
    footer .social-icon {
        transform: translate(calc(0.8 * var(--contentWidth) + 0.7rem), -5rem);
    }
}

@media (orientation: portrait) {
    body {
        background-image: var(--bgColorPartsSmall);
        background-image: image-set(var(--bgColorPartsSmall) 1x, var(--bgColorPartsSmallRetina) 2x); /* image-set */
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
    }
    .ws-info .columns-3,
    .bg-wrapper {
        background-image: var(--bgPartsSmall);
        background-image: image-set(var(--bgPartsSmall) 1x, var(--bgPartsSmallRetina) 2x); /* image-set */
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
    }
}