@charset 'utf-8';

/* ¡Renormasaniset */
*, ::before, ::after {background-repeat: no-repeat; box-sizing: border-box;} html {-webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; -ms-hyphenate-limit-chars: 8 4 4; hyphenate-limit-chars: 8 4 4; -webkit-hyphenate-limit-lines: 3; -ms-hyphenate-limit-lines: 4; hyphenate-limit-lines: 4; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; overflow-y: scroll;} body {background-color: transparent;} a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,button,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,input,kbd,label,legend,li,main,mark,menu,nav,object,ol,option,output,p,pre,q,ruby,s,samp,section,select,small,span,strike,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,tt,u,ul,var,video {margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} input {overflow: visible;} button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;} [type="checkbox"], [type="radio"] {padding: 0;} [type="search"] {-webkit-appearance: textfield; outline-offset: -2px;} textarea {overflow: auto; resize: vertical;} ::placeholder {color: inherit; opacity: 0.5;} :-webkit-search-decoration {-webkit-appearance: none;} [hidden] {display: none;} audio, video {display: inline-block;} a {background-color: transparent; text-decoration:none } a, area, button, input, label, select, summary, textarea, [tabindex] {-ms-touch-action: manipulation; touch-action: manipulation;} ol,ul{list-style:none} blockquote,q{quotes:none} blockquote:after,blockquote:before,q:after,q:before{content:'';content:none} table{border-collapse:collapse;border-spacing:0} b,strong{font-weight:bold} em,i{font-style:italic} h1,h2,h3,h4,h5,h6{font-weight:400} button, input, select, textarea {font-family: inherit; font-size: inherit; line-height: inherit;} abbr[title]{text-decoration: underline; text-decoration: underline dotted; cursor:help;} img {border-style: none; -moz-user-select: text; -webkit-user-select: text; user-select: text; -moz-user-drag: none; -webkit-user-drag: none; user-drag: none;} svg {fill: currentColor;} svg:not(:root) {overflow: hidden;} 
/* Renormasaniset! */

:root {
--b: 30,130,180;     /* Blau */
--g: 140,200,60;     /* Grün */
--pad: 2em;          /* Global Padding */
scroll-behavior: smooth;
}

@font-face {
font-family: 'Roboto';
src: url("../fonts/roboto-regular.subset.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Roboto';
src: url("../fonts/roboto-700.subset.woff2") format("woff2");
font-weight: bold;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Roboto';
src: url("../fonts/roboto-italic.subset.woff2") format("woff2");
font-weight: normal;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Caveat';
src: url("../fonts/Caveat-SemiBold.woff2") format("woff");
font-weight: bold;
font-style: italic;
font-display: swap;
}


a,
h4.toggle {
-webkit-transition: all 250ms ease-in;
-moz-transition: all 250ms ease-in;
transition: all 250ms ease-in;
}

::selection {
background: rgb(var(--g));
color: white;
}

::-moz-selection {
background: rgb(var(--g));
color: white;
}

img {
-moz-user-select: text;
-webkit-user-select: text;
user-select: text;
-moz-user-drag: none;
-webkit-user-drag: none;
user-drag: none;
}

.klar {
clear: both;
}

body {
font-family: 'Roboto', 'Raleway', 'Helvetica', 'Arial';
font-size: 16px;
line-height: 24px;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: none;
background: rgba(var(--b),.05);
}

section {
max-width: 800px;
margin: 0 auto;
-webkit-box-shadow: 0 0 12px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 12px rgba(0,0,0,0.3);
box-shadow: 0 0 12px rgba(0,0,0,0.3);
}

header {
max-height: 480px;
position: relative;
}

header img {
width: 100%;
display: block;
}

header.oben div.binde {
position: absolute;
bottom: 0;
left: 0;
background: rgba(var(--b),0.85);
}

header div.binde {
width: 100%;
padding: 24px 0 24px 48px;
background: rgb(var(--b));
box-sizing: border-box;
}

h1 {
display: inline-block;
vertical-align: top;
width: 122px;
height: 108px;
}

h1 a {
display: block;
width: calc(100% + 1em);
height: calc(100% + 1em);
padding: .5em;
background-image: url('../img/rische.svg');
background-position: .5em;
background-size: calc(100% - 1em);
background-color: tranparent;
margin: -.5em 0 0 -.5em;
border-radius: .25em;
cursor: pointer;
}

h1 a:hover {
background-color: rgba(255,255,255,.1);
}

h1 a span {
display: none;
}

header div.tel {
display: inline-block;
vertical-align: bottom;
box-sizing: border-box;
margin: 0 0 -6px 0;
padding: 0 0 0 16px;
width: calc(100% - 122px - 48px);
text-align: right;
color: white;
}

header div.tel p a {
position: relative;
font-size: 30px;
color: white;
}

header div.tel p a:hover {
color: rgb(var(--g));
}

header div.tel p a span {
color: rgb(var(--g));
}

header div.tel p a:hover span {
color: white;
}

header div.tel p a:before {
position: absolute;
top: 5px;
left: -34px;
content: '';
display: inline-block;
width: 32px;
height: 32px;
background-image: url('../img/fon.svg');
background-size: 100%;
}

article {
background: white;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

article.text {
padding: 40px 48px 36px 48px;
box-sizing: border-box;
}

article.blau {
color: rgb(var(--b));
background-color: rgb(221,236,244);
}

article.gruen {
color: white;
background-color: rgb(var(--g));
}

article.slogan {
color: white;
background-color: rgb(var(--b));
}

article div.halb {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 49%;
padding: 0 .5em 0 0;
}

article div.halb + div.halb {
padding: 0 0 0 .5em;
}

article div.halb:first-child {
padding-right: 16px;
}

article div.pfeil {
position: relative;
}

article.team {
padding: 40px 48px 36px 48px;
text-align: center;
}

article.team > ul > li {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
padding: 0 8px;
width: 100%;
}

article.job {
border-top: 1px solid rgb(var(--b));
border-bottom: 1px solid rgb(var(--b));
text-align: center;
}

article.job + article.job {
border-top: none;
}

article.team > ul > li ul li {
padding: 0 0 8px 0;
}

article.team > ul > li ul li:before {
content: '» ';
}

article.team ul li img:first-child {
width: 128px;
height: 128px;
border-radius: 50%;
}

article.team ul li img.logo {
max-width: 128px;
}

article h2 {
font-size: 32px;
line-height: 40px;
font-weight: bold;
color: rgb(var(--b));
margin: 0 0 12px 0;
text-indent: -1px;
}

article h3 {
font-size: 20px;
line-height: 28px;
font-weight: bold;
color: rgb(var(--b));
margin: 0 0 12px 0;
text-indent: -1px;
}

article * + h3 {
border-top: 1px solid rgb(var(--b));
margin-top: 24px;
padding-top: 24px;
}

article.blau h3 {
color: rgb(var(--g));
}

article.team h3 {
margin: 0 0 24px 0;
}

article.job h3 {
display: inline-block;
font-size: .8em;
line-height: 1em;
color: white;
background-color: rgb(var(--g));
text-transform: uppercase;
letter-spacing: .05em;
font-weight: normal;
text-align: center;
margin: 0 0 1em 0;
padding: .35em .5em .25em .5em; 
}

article.slogan h3 {
font-family: 'Caveat';
font-size: 40px;
line-height: 40px;
font-weight: bold;
font-style: italic;
text-align: center;
color: white;
margin: 0 0 4px 0;
}

article h4 {
font-weight: bold;
color: rgb(var(--b));
margin: 8px 0 6px 0;
}

article.leistungen h4 {
padding: 0 0 8px 0;
border-bottom: 1px solid rgb(var(--g));
margin: 12px 0 12px 0;
}

article.leistungen h4 a {
border-bottom: none;
}

article.job h4 {
font-size: 1.5em;
line-height: 1.4em;
margin: .75em 0 .85em 0;
}

h4 a:after {
content: ' + Info';
font-weight: normal;
font-style: italic;
color: black;
float: right;
}

h4:target a:after {
content: '';
}

h4 a:hover {
color: rgb(var(--g));
cursor: pointer;
}

article.leistungen h3 {
margin-bottom: 2em;
}

article.leistungen h4 + div.versteckt {
max-height: 0;
overflow: hidden;
transition: all 999ms linear;
}

article.leistungen h4:target + div.versteckt {
max-height: 200vh;
}

article h3 + h4 {
margin-top: -8px;
}

article h5 {
font-size: 1.15em;
line-height: 1.4em;
font-weight: bold;
margin: 0 0 .5em 0;
}

article p,
article ul,
article ol {
margin: 0 0 12px 0;
}

article.text ul:not(.obj) > li {
margin: 0 0 6px 0;
padding-left: 12px;
text-indent: -12px;
}

article.text ul:not(.obj) > li:before {
content: '• ';
display: block;
float: left;
width: 12px;
color: rgb(var(--g));
}

article.text ul.jobs li,
article.text ol.jobs li {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

article.text ul.jobs li::before {
content: '• ';
display: inline-block;
color: rgb(var(--g));
}

article.text ul.jobs.spacing li {
margin: 0 0 .5em 0;
}

article a {
color: black;
border-bottom: 1px solid rgb(var(--g));
}

article a:hover {
color: rgb(var(--g));
border-bottom-color: transparent;
}

article.blau a {
color: rgb(var(--b));
border-bottom: 1px solid rgb(var(--g));
}

article.blau a:hover {
color: rgb(var(--g));
border-bottom-color: transparent;
}

article a.aktiv,
article.blau a.aktiv {
font-weight: bold;
border-bottom-color: transparent;
}

article a.aktiv:after,
article.blau a.aktiv:after {
content: ' ›';
}

article hr {
background: rgb(var(--b));
height: 1px;
border: none;
margin: 2em 0;
}

article.job hr {
background: rgba(var(--b),.5);
margin: 1em 0;
}

div.impressum {
font-size: 12px;
line-height: 18px;
}

.knopf {
display: inline-block;
color: rgb(var(--b));
background: white;
padding: .5em .65em .55em .65em;
}

.knopf:hover {
color: white;
background: rgb(var(--b));
}

.knopf.gross {
font-size: 1.5em;
font-weight: bold;
}

ul.videos.flickity-enabled {
margin-bottom: 3em;
}

ul.videos {
display: flex;
flex-flow: row wrap;
gap: 0 2em;
}

ul.videos li {
flex: 1 1 calc(50% - 1em);
min-width: 300px;
}

figure {
margin: .5em 0 2em 0;
}

video {
max-width: 100%;
margin: 0 0 .5em 0;
}

figcaption {
font-size: .8em;
line-height: 1.4em;
color: rgb(var(--b));
}


/*! Flickity v3.0.0
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%;touch-action:pan-y}.flickity-slider{position:absolute;width:100%;height:100%;left:0}.flickity-rtl .flickity-slider{left:unset;right:0}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-cell{position:absolute;left:0}.flickity-rtl .flickity-cell{left:unset;right:0}.flickity-button{position:absolute;background:hsl(0 0% 100% / 75%);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;text-align:center;display:flex;justify-content:center;flex-wrap:wrap}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dot{display:block;width:10px;height:10px;padding:0;margin:0 8px;background:hsl(0 0% 20% / 25%);border-radius:50%;cursor:pointer;appearance:none;border:none;text-indent:-9999px;overflow:hidden}.flickity-rtl .flickity-page-dot{text-indent:9999px}.flickity-page-dot:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-page-dot.is-selected{background:hsl(0 0% 20% / 100%)}

.flickity-page-dot {
margin: 0 4px;
}

/* ############# Screens unter 640px ############# */
@media only screen and (max-width: 639px) {
  
	article div.halb {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  }
  
  article div.halb + div.halb {
  margin: 16px 0 0 0;
  padding: 0;
  }

}


/* ############# Screens unter 480px ############# */
@media only screen and (max-width: 479px) {

  header {
  max-height: 4096px;
  }
  
  header div.binde {
  padding: 24px 24px 16px 24px;
  }
  
  article.text {
  padding: 24px 24px 16px 24px;
  }
  
  article.team {
  padding: 24px;
  }
  
  h1 {
  width: 92px;
  height: 81px;
  }
  
  header img {
  display: none;
  }

  header div.binde,
  header.oben div.binde {
  position: static;
  }
  
  header div.tel {
  width: calc(100% - 96px);
  }
  
  header div.tel p a {
  font-size: 24px;
  }
  
  header div.tel p a:before {
  width: 24px;
  height: 24px;
  left: -26px;
  }

  article.team ul li {
  width: 100%;
  }

}





/* ############# Screens unter 440px ############# */
@media only screen and (max-width: 439px) {

  body {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -ms-hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-lines: 3;
  -ms-hyphenate-limit-lines: 3;
  hyphenate-limit-lines: 3;
  }

  header div.tel {
  display: block;
  text-align: left;
  margin: 24px 0 0 0;
  padding: 0 0 0 20px;
  width: 100%;
  }

  header div.tel p br {
  display: none;
  }

  header div.tel p a {
  font-size: 16px;
  font-weight: bold;
  margin: 0 12px 0 0;
  }
  
  header div.tel p a:before {
  width: 20px;
  height: 20px;
  top: 1px;
  left: -22px;
  }
  
  article * + h3 {
  margin-top: 16px;
  padding-top: 16px;
  }
  
/* 
  article.text ul.auswaehler li {
  display: inline;
  margin: 0;
  padding-left: 0;
  text-indent: 0;
  }
  
  article.text ul.auswaehler li:after {
  content: ', ';
  }
  
  article.text ul.auswaehler li:before,
  article a.aktiv::after, 
  article.blau a.aktiv::after,
  article.text ul.auswaehler li:last-child:after {
  content: '';
 */
  }

}



/* ############# Screens unter 380px ############# */
@media only screen and (max-width: 379px) {

  header div.tel p br {
  display: inline;
  }

}