/* ==========================================================
   Design tokens -- colors & sizes centralised as CSS variables
   --color-bg / --color-fg / --color-surface / --color-overlay
   are theme-aware and get redefined below under
   @media (prefers-color-scheme: light). All other --color-*
   tokens are fixed and do not change with the color scheme.
   ========================================================== */
:root {
	/* theme-aware colors (dark theme = default) */
	--color-bg: #313131;
	--color-fg: #fff;
	--color-surface: #777;
	--color-overlay: rgba(0,0,0,.3);

	/* fixed colors */
	--color-white: #fff;
	--color-black: #000;
	--color-charcoal: #313131;
	--color-brand: #3c9dff;
	--color-border: #ddd;
	--color-bullet: #aaa;
	--color-bullet-active: var(--color-black);
	--color-shadow: var(--color-black);
	--color-overlay-hover: rgba(0,0,0,0);

	/* sizes */
	--font-size-tile: 2.0em;
	--font-size-tile-heading: 45px;
	--font-size-quote: 6.0em;
	--gap-lg: 40px;
}

body {
font-family:"Roboto",sans-serif;
border:0;
margin:0;
padding:0;
font-size:12pt;
color:var(--color-fg);
background-color:var(--color-bg);
letter-spacing:.05em;
text-align:center;
overflow-x:hidden;
font-weight:300;
}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}

a {
color:var(--color-fg);
text-decoration: none;
}

.header {
width:100%;
height:auto;
position:relative;
padding:20px 0 0 0;
display: block;
height:100px;
}

.header .logo {
width:200px;
height:auto;
background-image:url(../../media/werbeagentur-logo-neu.svg);
background-size:100%;
background-repeat:no-repeat;
margin:5px auto 0 auto;

}
h1,h2{
font-weight:300;
hyphens:auto;
-webkit-hyphens:auto;
-ms-hyphens:auto;
overflow-wrap:break-word;
word-break:normal;

}
.header .logo a {
display:block;
}

.header .logo img {
visibility: hidden;
}

.content .grid {
width:calc(100%-80px);
height:70vh;
position: relative;
position: relative;
display: grid;
grid-template-columns: auto auto auto;
grid-gap: var(--gap-lg);
padding:0 40px 40px 40px;

}
.content .vframe {
width:95%;
height:auto;
position: relative;
display:inline-block;
}
.footer {
text-align:left;
}

.footer .grid {
width:calc(100%-120px);
height:15vh;
position: relative;
display:block;
display: grid;
grid-template-columns: 31.5% 31.5% 31.5%;
grid-gap: var(--gap-lg);
padding:50px 40px 40px 8%;
transition:all .5s;
transition-timing-function: ease;
}
.footer .grid .elem {

}
.content .grid .elem {
text-align: center;
vertical-align:middle;
display:inline-block;
position: relative;

overflow:hidden;
opacity: 0;
top:20px;
}
.content .grid .elem.vis {
opacity:1.0;
top:0px;
}
.content .grid .elem .background {
display:block;
width:100%;
height:100%;
background-size:cover;
background-position: center;
position: relative;
}
.content .grid .elem:nth-child(4) .background {
display:block;
width: 100%;
height: 100%;
/* top:-20%; */
/* left:-20%; */
background-size: 150%;
background-position: center;
background-repeat:repeat;
position: absolute;
/* transform-origin: 50% 50%; */
/* -webkit-animation: rotation 250s infinite linear; */

}
.content .grid .elem a {
text-transform: uppercase;
font-size:var(--font-size-tile);
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
background-color:var(--color-overlay);
transition:all .5s;
transition-timing-function: ease;
}

.content .grid .elem a:hover {
background-color:var(--color-overlay-hover);
}

.content .grid .elem a h1 {
text-shadow:1px 1px 10px var(--color-shadow);
letter-spacing:.05em;
}

.content .grid .elem a h2 {
text-shadow:1px 1px 6px var(--color-shadow);
letter-spacing:.05em;
font-size: var(--font-size-tile-heading);
font-weight: 600;
color: var(--color-fg);
}


.content {
text-align:center;
}

.content .commentslideshow {
width:calc(100%-80px);
height:auto;
min-height:400px;
position: relative;
display:block;
padding:0 40px 40px 40px;
background-color:var(--color-surface);
text-align:left;
}

.fancybox-slide p {
color:var(--color-black);

}

#popup {
display: none;
}


.fancybox-slide p a {
color:var(--color-black);
}

video {
display:inline-block;
width:100%;
height:auto;
position: relative;
margin-bottom:34px
}

#inhalt2405 {
padding: 0 40px 40px 40px;
}

#gifoverlay {
position:absolute;
top:6%;
left:0;
width:700px;


}
#full-width-slider {
margin-top:15px;

}
#full-width-slider img {
visibility:hidden;
max-width:100%;
}

.imagescroll {
background-size:cover;
background-position: center;
background-repeat:no-repeat;
max-width:100%;
}
.imagescroll a {
display:block;
max-width:100%;
}

.rsArrow.rsArrowLeft {
position: absolute;
border: 0;
height: 45px;
width: 45px;
top: 45%;
background-repeat: no-repeat;
z-index: 10;
color: transparent;
background-image: url("../../media/pfeil-links.png");
background-size: 45%;
background-position: center;
cursor: pointer;
background-color: var(--color-charcoal);
}

.rsArrow.rsArrowRight {
position: absolute;
border: 0;
height: 45px;
width: 45px;
top: 45%;
right:0;
background-repeat: no-repeat;
z-index: 10;
color: transparent;
background-image: url("../../media/pfeil-rechts.png");
background-size: 45%;
background-position: center;
cursor: pointer;
background-color: var(--color-charcoal);
}

@media screen and (max-width:1400px) and (min-width:860px) {
.content .commentslideshow {
width:calc(100%-80px);
height:auto;
min-height:500px;
position: relative;
display:block;
padding:0 40px 40px 40px;
background-color:var(--color-surface);

}


}
.rsOverflow {

}
.content .commentslideshow .commentslide .background {
width:100%;
height:400px;
background-size:500px;
background-repeat:no-repeat;
background-position: 80% 40px;
position:absolute;
left:0;
top:0;
}
.content .commentslideshow .anfuehrungszeichen {
font-size:var(--font-size-quote);
position:absolute;
left:48%;
top:50px;
}
.content .commentslideshow .commentslide a {
width:30%;
display:block;
margin:60px auto 40px 10%;
position: relative;
}
.content .commentslideshow .commentslide a p {
position: relative;

}
.content .commentslideshow .commentslide p:first-of-type:before {
content:"«";
font-size:var(--font-size-quote);
position:absolute;

width:20px;
height:50px;
display:inline-block;
left:-70px;
top:-80px;
}

.content .commentslideshow .commentslide p:last-of-type:after {
content:"»";
font-size:var(--font-size-quote);
position:absolute;
right:0px;
top:-80px;
width:20px;
height:50px;
display:inline-block;
}
.rsNav {
width:100%;
height:30px;
margin:0;
text-align:center;
position:relative;
}

.rsBullet {
width:15px;
height:15px;
display:inline-block;
position:relative;
background-color:var(--color-bullet);
margin:0 10px;
border-radius:40px;
cursor:pointer;
top:0px;
}
.rsBullet.rsNavSelected {
width:15px;
height:15px;
display:inline-block;
position:relative;
background-color:var(--color-bullet-active);
margin:0 10px;
}

#inhalt2232 h2 {
font-weight:200;

}


@media screen and (max-width:1200px){
:root {
	--font-size-tile: 1.5em;
}
.content .grid .elem a {
text-transform: uppercase;
font-size:var(--font-size-tile);
-webkit-appearance:none;
}

#gifoverlay {
position:absolute;
top:6%;
left:0;
width:100%;
height:auto;

}


}

@media screen and (min-width:1000px){
#inhalt2405 p {
margin-top:0;
}

.textRahmenVB {
display:inline-flex;
width:76%;
height:auto;
position:relative;
padding-top:60px;
padding-bottom:70px;
background-color:var(--color-charcoal);
color:var(--color-white);
padding-left:12%;
padding-right:12%;
}
.textRahmenVB > div {
width:50%;
height:auto;
display:inline-block;
text-align:left;
}

#inhalt2232 {
padding-top:50px;
}

}



a.abtn {
width: auto;
padding: 0 30px;
height: 50px;
background-color: var(--color-brand);
color: var(--color-white);
vertical-align: middle;
display: inline-block;
text-align: center;
line-height:48px;
}
@media screen and (max-width:1000px){
:root {
	--font-size-tile: 1.1em;
}

.header {
width:100%;
height:auto;
position:relative;
padding:20px 0 0 0;
display: block;
height:90px;
}

.header .logo {
padding-top:20px;
padding-bottom:0px;
}
.content {
width:94%;
padding:0 3%;
}

.content .vframe {
width:100%;
height:auto;
position: relative;
display:inline-block;
}

video {
display:inline-block;
width:100%;
height:auto;
position: relative;
margin-bottom:17px;
margin-top:0px;
border-top:1px solid var(--color-border);
border-bottom:1px solid var(--color-border);
}

.content .grid {
width:100%;
grid-template-columns: 48% 48%;
padding:0 0 0 0px;
grid-gap:4%;
margin-bottom: var(--gap-lg);
}

.content .grid .elem a {
text-transform: uppercase;
font-size:var(--font-size-tile);
}
.footer {
padding:50px 3% 0 3%;

}

.footer .grid {
width:calc(100%-120px);
height:auto;
position: relative;
display:block;
display: block;
grid-template-columns: 100%;
grid-gap: var(--gap-lg);
padding:0 0px 20px 0px;
transition:all .5s;
transition-timing-function: ease;
}

.footer .grid .elem {
height:auto;
}
.content .commentslideshow {
width:calc(100%-20px);
height:auto!important;
min-height:700px;
position: relative;
display:block;
padding:30px 20px 40px 20px;
background-color:var(--color-surface);
}

.content .commentslideshow .commentslide .background {
width:100%;
height:34vh;
background-size:120%;
background-repeat:no-repeat;
background-position:center;
position:relative;
left:0;
top:0;
}

.content .commentslideshow .commentslide a {
width:100%;
display:block;
margin:80px 0 40px 0%;
position: relative;
}
.content .commentslideshow .commentslide a p {
position: relative;

}
.content .commentslideshow .commentslide p:first-of-type:before {
content:"«";
font-size:var(--font-size-quote);
position:absolute;

width:20px;
height:50px;
display:inline-block;
left:0px;
top:-120px;
}

.content .commentslideshow .commentslide p:last-of-type:after {
content:"»";
font-size:var(--font-size-quote);
position:absolute;
right:40px;
top:-50px;
width:20px;
height:50px;
display:inline-block;
}


.rsNav {
width:100%;
height:30px;
margin:0;
text-align:center;
position:absolute;
top:0px;
left:0;
}

.rsBullet {
width:4px;
height:4px;
display:inline-block;
position:relative;
background-color:var(--color-bullet);
margin:0 10px;
padding:5px;
border-radius:40px;
cursor:pointer;
top:0px;
}
.rsBullet.rsNavSelected {
width:4px;
height:4px;
display:inline-block;
position:relative;

margin:0 10px;
}

#inhalt2232 h2 {
margin-top:40px;
margin-bottom:30px;
font-size: 1.6em;
}
#inhalt2405 {
padding: 0 0px 0px 0px;
}

.textRahmenVB {


height:auto;
position:relative;
padding-top:50px;
padding-bottom:20px;


}
.textRahmenVB > div {


display:block;
text-align:left;
}

#inhalt2232 {
padding-top:10px;
}

.mnicht {
display:none;
}
#textrahmenVB2607 br,
#textSpalteLinksVB2607 br {
display:none;
}

.rsArrow.rsArrowLeft,
.rsArrow.rsArrowRight {
height:15px;
width:15px;
}

#eapps-instagram-feed-1 {
margin-top: var(--gap-lg);
padding-top: var(--gap-lg);
border-top: 1px solid var(--color-bullet);
}
}

@media screen and (max-width:900px) and (orientation:landscape){
.content .grid {
width:calc(100%);
height:100vh;
position: relative;
position: relative;
display: grid;
grid-template-columns: auto auto auto;
grid-gap: var(--gap-lg);
padding:0 40px 40px 0px;
transition:all .5s;
transition-timing-function: ease;
}

.content .commentslideshow .commentslide .background {
width: 60%;
height: 280px;
background-size: 120%;
background-repeat: no-repeat;
background-position: center;
position: relative;
left: 0;
top: 0;
margin:0 auto;
}


}

.grid img {
visibility: hidden;
}
.grid .social a {
width:25px;
height:25px;
overflow: hidden;
display: inline-flex;
background-size:100%;
background-repeat:no-repeat;
}
.grid a#facebook {
background-image:url(../../media/fb-icon.png);
}

.grid a#instagram {
background-image:url(../../media/instagram-icon.png);
top: 0px;
position: relative;
margin-left: 14px;
}
.grid a#whatsapp {
background-image:url(../../media/whatsapp-icon.png);
top: 0px;
position: relative;
margin-left: 14px;
}


@media (prefers-color-scheme: light) {
:root {
	--color-bg: #eee;
	--color-fg: #000;
	--color-surface: #eee;
	--color-overlay: rgba(255,255,255,.6);
}

.header .logo {

background-image:url(../../media/werbeagentur-logo-neu-black.svg);

}

.content .grid .elem a h2 {
text-shadow:none;
}

.content .grid .elem a:hover h2 {
color:var(--color-white);
text-shadow:none;
text-shadow:1px 1px 10px var(--color-shadow);
}

.grid a#facebook {
background-image:url(../../media/fb-icon-schwarz.png);
}

.grid a#instagram {
background-image:url(../../media/instagram-icon-schwarz.png);
}


}
#eapps-instagram-feed-1 {
overflow:hidden;
}

@media screen and (min-width:1800px) {
	#full-width-slider {

		max-width:1800px;
		margin-left:auto;
		margin-right:auto;

	}
	article.content {
		max-width:1800px;
		margin-left:auto;
		margin-right:auto;

	}
	.footer .grid {

		max-width:1800px;
		margin-left:auto;
		margin-right:auto;
	}
}

@media screen and (max-width:1000px) {
:root {
	--font-size-tile-heading: 20px;
}
.content .grid .elem a h2 {
text-shadow:1px 1px 6px var(--color-shadow);
letter-spacing:.05em;
font-size: var(--font-size-tile-heading);
font-weight: 600;
color: var(--color-white);
}
}

@media screen and (max-width:350px) {
:root {
	--font-size-tile-heading: 17px;
}
.content .grid .elem a h2 {
text-shadow:1px 1px 6px var(--color-shadow);
letter-spacing:.05em;
font-size: var(--font-size-tile-heading);
font-weight: 600;
color: var(--color-white);
}
}


div.eui-widget-title {
display:none!important;
}