@charset "UTF-8";

/*  Basic Settings & Resets ======================================================================== */

/*	GLS Green: #82BE32
	GLS Orange: #FA8214
*/

/* Accessibility ===== */

.element-invisible {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}

/**
* The .element-focusable class extends the .element-invisible class to allow
* the element to be focusable when navigated to via the keyboard.
*/
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
	position: static !important;
	clip: auto;
}

@media only braille, embossed, speech {
	.element-hidden-from-readers {
		display: none !important;
		visibility: hidden !important;
	}
}

/* hide elements that require JS to function (they are being shown again via JS) */
.js-hidden {
    display: none!important;
}

/* Basic website structure ===== */

html { 
	-webkit-overflow-scrolling: touch; 
	
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;

	position: relative;
	height: 100%;
	margin: 0;
    
    scroll-behavior: smooth;

	-webkit-tap-highlight-color: #82BE32;
}

	.gls-de {
		-webkit-tap-highlight-color: #82BE32;
	}

::-webkit-selection { 
	background: #82BE32;
	color: white;
	text-shadow: none;
}

::-moz-selection {
	background: #82BE32;
	color: white;
	text-shadow: none;
}

::selection {
	background: #82BE32;
	color: white;
	text-shadow: none;
}

:focus {
	outline-color: #82BE32;
	/*outline-style: solid;
	outline-width: 2px;*/
}

	.gls-de::-webkit-selection { 
		background: #FA8214;
		color: white;
		text-shadow: none;
	}
o
	.gls-de::-moz-selection {
		background: #FA8214;
		color: white;
		text-shadow: none;
	}

	.gls-de::selection {
		background: #FA8214;
		color: white;
		text-shadow: none;
	}

	.gls-de:focus {
		outline-color: #FA8214;
		/*outline-style: solid;
		outline-width: 2px;*/
	}

body {
	padding: 0;
	margin: 0;
	z-index: 10;
	
	position: relative;
	height: 100%;

	color: rgb(70,70,70);
	background-color: #fcfdfc;
	background: url(../images/swiff-background.svg);
	background-repeat: repeat-y;
	background-size: 110%;
	background-position: center -50px;
    
    scroll-behavior: smooth;
}


img {
	border: 0;
	max-width: 100%;
	height: auto;
	width: auto\9; /* IE8 */
}

img.img-manual {
	width: 100%;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	border-left: solid 4px #82BE32;
	box-sizing: border-box;
}

a,
a:visited {
	color: inherit;
}

a:hover,
a:active,
a:focus {
	color: inherit;
}

#body-container {
    display: flex;
    flex-direction: column;
	min-height: 100vh;
	overflow: hidden;
	position: relative;
}

.front #body-container {
	padding-bottom: 0;
}

#content-container {
    flex-grow: 1;
}

#content-container a {
	display: inline;
	background-color: transparent;
	text-decoration: none;
	line-height: 1;
	transition: all .2s ease-in-out;
}

#content-container a:not(.link-no-style) {
	background-size: 1px 1em;
	box-shadow:
		inset 0 -0.1em white,
		inset 0 -0.22em rgba(130,190,50,1);
	
	}

#content-container a:not(.link-no-style):hover,
#content-container a:not(.link-no-style):active,
#content-container a:not(.link-no-style):focus {
	border-bottom-width: 4px;
	background-size: 1px 1em;
	box-shadow:
		inset 0 0em white,
		inset 0 -0.22em rgba(130,190,50,1);
}

p a[target="_blank"]:before,
li a[target="_blank"]:before {
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-right: 0.2em;
	background-image: url("../images/external-link-duotone.svg");
	background-size: 0.8em;
	background-repeat: no-repeat;
}

p a[target="_blank"].musiclink:before,
li a[target="_blank"].musiclink:before {
    content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-right: 0.2em;
	background-image: url("../images/musiclink.svg");
	background-size: 0.8em;
	background-repeat: no-repeat;
}

p.musiclink {
    text-align: center;
}

div#header-container {
	text-align: center;
	position: relative;
}
 
a#logo-link img {
	max-width: 350px;
}

.not-front a#logo-link img {
	height: 11.5em;
}


div#content-container {
    flex-grow: 1;
    
    margin: 0 auto;
    position: relative;
	padding-bottom: 5em;

    max-width: 90%;
}

.front div#content-container {
	padding-bottom: 1em;
}

div#footer-container {
	position: relative;
    height: auto;
    padding-bottom: 2em;
    
	background: rgb(70,70,70);
	color: white;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	padding-top: 2rem;
}

div#footer-container ul#footer-menu {
	margin: 0 auto;
}

.hide-on-smaller-screens {
	display: none;
}

p.swoosh {
	content: url("../images/swoosh.svg");
	width: 7em;
    margin: 3em auto 2em auto;
    clear: both;
}

p.swoosh.vertical-center {
    margin-top: 2em;
    margin-bottom: 2em;
}

p.swoosh.vertical-topshort {
    margin-top: 1em;
}

p.center + p.swoosh.vertical-topshort {
    margin-top: -0.7em;
}


p.statement {
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: center;
   
}
/*
p.statement:before {
	content: url("../images/swoosh.svg");
    display: inline-block;
	width: 5em;
    vertical-align: middle;
    position: absolute;
    right: 0;
}
*/
/*
p.statement:after {
	content: url("../images/swoosh.svg");
    display: inline-block;
	width: 5em;
    vertical-align: middle;
}
*/


/* Groups for quotes in different languages */

p.quotee-header img.quotee {
    vertical-align: middle;
    border-bottom: solid 3px #82BE32;
    
    display: block;
    width: 90%;
    margin: 0 auto 1em auto;
}

/*
div.group-by-michele {
    padding-left: 30%;
    background-image: url("../images/people/michele_cooke_golikesilk.png");
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: center;
    background-size: 30%;
}

div.group-by-michael {
    padding-right: 30%;
    background-image: url("../images/people/michael_en_golikesilk.png");
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
    background-size: 30%;
}
*/

/*
p.by-michele {
    padding-left: 30%;
    background-image: url("../images/people/michele_cooke_golikesilk.png");
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: center;
    background-size: 30%;
} */

/* Other */

.print-only,
.print-only-block {
	display: none;
}



/* Language Selection */

.comingsoon .language-selection-container {
	display: none;
}

.language-selection-container {
	text-align: center;
	margin: 0 auto;
	padding-top: 1em;
}

.language-selection-container {
    display: block;
    width: 15em;
    box-sizing: content-box;
    font-weight: 400;
    transition: opacity 3s ease;
    background-color: #82BE32;
    color: white;
    border-bottom: solid 2px white;
    margin-right: auto;
    margin-left: auto;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    text-align: center;
    padding: 0;
}

.language-selection-container a {
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 0.15em;
    padding-bottom: 0.5em;
    display: block;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    text-decoration: none;
}

.language-selection-container a:hover,
.language-selection-container a:focus,
.language-selection-container a:active {
   background-color: rgb(70,70,70);
}

h2 + .language-container-destination .language-selection-container {
	padding-top: 0;
	margin-top: -1.5em;
	margin-bottom: 2em;
}

p.todo {
	font-size: 0.9em !important;
	font-style: italic;
	background-color: rgba(216,226,215,1.00);
}


#content-container ul.faq {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em;
}

#content-container ul.faq li {
    list-style: none;
    padding: 0;
    margin: 0;
}

#content-container ul.faq li:before {
    display: none;
}


img.couple {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

img.portrait {
    width: 80%;
    margin: 0 auto;
    display: block;
    padding-top: 1.5em;
}

p.address {
    padding-left: 0.5em;
    border-left: solid 3px;
    margin-left: 1em;
}

/* Images Container */

.image-container {
    display: flex;
    flex-wrap: wrap; 
    gap: 2em; 
    justify-content: center; 
}

.image-container img {
    max-width: 45%; 
    width: 100%; 
    height: auto; 
    flex: 1 1 auto; 
    border-radius: 5px;
}

/* Maps */

.gmaps-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    margin-top: 2em;
}

.gmaps-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}


.openstreetmap-responsive{
    overflow: hidden;
    padding-bottom: 60%;
    position: relative;
    height: 0;
    margin-top: 2em;
}

.openstreetmap-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border: none !important;
}

#content-container ul.map-options {
    font-size: 80%;
    text-align: right;
    list-style: none;
    padding-right: 0;
}


#content-container ul.map-options li {
    list-style: none;
    display: inline-block;
    margin-left: 0.5em;
    margin-top: 0;
}

#content-container ul.map-options li:before {
    display: none;
}


/* Öffis */

span.wl {
    color: white;
    border-radius: 0.2em;
    font-size: .7em;
    font-weight: 400;
    position: relative;
    text-transform: uppercase;
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    padding: 0.2em;
    margin-top: -0.5em;
    margin-right: 0.1em;
    line-height: 1.15;
    word-break: keep-all;
    word-wrap: normal;
    white-space: nowrap;
}

span.wl.tram {
    background-color: #d3312c;
}

span.wl.tram.letter {
    line-height: 1.3;
    padding-left: 0.15em;
    padding-right: 0.25em;
}

span.wl.bus {
    background-color: #1c60a7;
    letter-spacing: -0.05;
    padding-left: 0.05em;
    padding-right: 0.35em;
}

span.wl.bus > span {
    font-size: 90%;
    display: inline-block;
    text-align: center;
    padding-left: 0.05em;
}

span.vor {
    color: white;
    border-radius: 0.2em;
    font-size: .7em;
    font-weight: 400;
    position: relative;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    padding: 0.3em;
    margin-top: -0.5em;
    margin-right: 0.1em;
    line-height: 1.15;
    word-break: keep-all;
    word-wrap: normal;
    white-space: nowrap;
}

span.vor.r {
   background-color: #B0B0B0;
}

span.vor.rex {
    background-color: #7F7F7F;
}

span.vor.s {
    background-color: rgb(0,157,241);
}


/* Other */

.footer-linkback-container {
	text-align: right;
	margin-top: 3em;
}

img.cooperation-logo {
	display: block;
	width: 60%;
	margin: 2em auto;
}



@media only screen and (min-width: 770px),
only screen and (min-width: 760px) and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( min--moz-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( -moz-min-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and (min-width: 760px) and ( min-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( min-resolution: 200dpi),
only screen and (min-width: 760px) and ( min-resolution: 1.25dppx) {
    
    .gmaps-responsive {
        padding-bottom: 35%;
    }
    
    .openstreetmap-responsive{
        padding-bottom: 45%;
    }
    	
    a#logo-link img {
		max-width: 450px;
	}
	
	div#content-container {
        min-width: 40em;
	    max-width: 43.5em;
        padding-bottom: 3em;
	}
	
    div#footer-container {
        height: 6rem;
    }
    
    div#footer-container ul#footer-menu {
		max-width: 43.5em;
	}
	
	.hide-on-smaller-screens-inline {
		display: inline;
	}
    
    .hide-on-larger-screens {
        display: none;
    }
    
    img.portrait {
        width: 40%;
        float: left;
        padding: 1.5em 1em 0em 1em;
    }
    
    img.couple {
        width: 90%;
    }
    
    p.quotee-header img.quotee {
        display: inline-block;
        width: 30%;
        margin-left: -10%;
        margin-right: 1em;
        margin-bottom: 0;
    }

    p.musiclink {
        text-align: right;
    }
	
	img.cooperation-logo {
		float: left;
		margin-left: 2em;
		margin-right: 2em;
		margin-top: 2em;
		width: 29%;
	}
	
	img.cooperation-logo + p {
		float: right;
		width: 59%;
	}

}


@media only screen and (min-width: 1030px),
only screen and (min-width: 760px) and (-webkit-min-device-pixel-ratio: 1.25) and (orientation: landscape),
only screen and (min-width: 760px) and ( min--moz-device-pixel-ratio: 1.25) and (orientation: landscape),
only screen and (min-width: 760px) and ( -moz-min-device-pixel-ratio: 1.25) and (orientation: landscape),
only screen and (min-width: 760px) and ( -o-min-device-pixel-ratio: 1.25/1) and (orientation: landscape),
only screen and (min-width: 760px) and ( min-device-pixel-ratio: 1.25) and (orientation: landscape),
only screen and (min-width: 760px) and ( min-resolution: 200dpi) and (orientation: landscape),
only screen and (min-width: 760px) and ( min-resolution: 1.25dppx)  and (orientation: landscape) {

	.not-front .language-selection-container {
        text-align: left;
        display: block;
        width: 10em;
        box-sizing: content-box;
        font-weight: 400;
        transition: opacity 3s ease;
        background-color: #82BE32;
        color: white;
        border-bottom: solid 2px white;
		margin-left: 10em;
        padding-left: 5.4em;
        padding-top: 0.15em;
        padding-bottom: 0.15em;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
    
    .not-front .language-selection-container a {
        padding-top: 0.15em;
        padding-bottom: 0.15em;
        padding-left: 1em;
        padding-right: 1em;
        transition: background-color 0.2s linear;
        text-decoration: none;
        cursor: pointer;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
    
    .not-front .language-selection-container a:hover,
    .not-front .language-selection-container a:focus,
    .not-front .language-selection-container a:active {
        background-color: inherit;
        text-decoration: underline;
    }
    
    .front .language-selection-container {
        display: block;
        width: 15em;
        box-sizing: content-box;
        font-weight: 400;
        transition: opacity 3s ease;
        background-color: #82BE32;
        color: white;
        border-bottom: solid 2px white;
        margin-right: auto;
        margin-left: auto;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        text-align: center;
        padding: 0;
    }

    .front .language-selection-container a {
        padding-left: 2em;
        padding-right: 2em;
        padding-top: 0.15em;
        padding-bottom: 0.5em;
        display: block;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        text-decoration: none;
    }

    .front .language-selection-container a:hover,
    .front .language-selection-container a:focus,
    .front .language-selection-container a:active {
       background-color: rgb(70,70,70);
    }

    
    h2 + .language-container-destination .language-selection-container {
		text-align: right;
		padding-top: 0;
		margin-top: -2.5em;
		margin-bottom: 2em;
	}
	
	a#logo-link img {
		height: auto;
		padding-top: 0.5em;
	}

	.not-front a#logo-link img {
		height: 12.5em;
	}

	.not-front div#header-container {
		margin-top: 3em;
	}

	.not-front div#logo-container {
	    background: white;
	    border-radius: 50%;
	    padding: 15px;
	    z-index: 15;
	    position: absolute;
	    top: 50%;
	    transform: translateY(-50%);
	    left: 20px;
	}
	
	/* hover animation for logo */
	.not-front a#logo-link img {
		transition: all .2s ease-in-out;
	}
	.not-front a#logo-link:hover img {
		transform: scale(1.1);
	}
	
	.front #body-container {
		/*padding-bottom: 6rem;*/
	}

}


@media only screen and (min-width: 1400px),
only screen and (min-width: 1300px) and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-width: 1300px) and ( min--moz-device-pixel-ratio: 1.25),
only screen and (min-width: 1300px) and ( -moz-min-device-pixel-ratio: 1.25),
only screen and (min-width: 1300px) and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and (min-width: 1300px) and ( min-device-pixel-ratio: 1.25),
only screen and (min-width: 1300px) and ( min-resolution: 200dpi),
only screen and (min-width: 1300px) and ( min-resolution: 1.25dppx) {
	
	.not-front div#header-container {
		margin-top: 3.5em;
	}

	.not-front div#logo-container {
		left: 2.5em;
	}

	.not-front a#logo-link img {
		height: 13.6em;
	}
    
    .not-front .language-selection-container {
        padding-left: 7.9em;
    }
}

.log-entry {
    padding-left: 0.1em;
}

div#skip-link {
	text-align: center;
}

a.maintenance {
	cursor: default;
}