@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 {
--r: 180,0,0;     /* Rot */
--hg: 190,230,0; /* Grün */
--g: 190,230,0;    /* Grün */
--pad: 2em;       /* Global Padding */
--pad2: calc(var(--pad) / 2);      /* Half Global Padding */
--2pad: calc(var(--pad) * 2);      /* Double Global Padding */
--max: 1280px;    /* max-width */
scroll-behavior: smooth;
}

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

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

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


body {
position: relative;
font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
font-size: 20px;
line-height: 1.4em;
color: white;
min-height: 100vh;
background-color: rgb(var(--hg));
}

a {
transition: all 250ms ease-in;
}

::selection {
background: rgb(var(--hg));
color: rgb(var(--r));
}





img.erdbeere {
position: fixed;
top: calc(45% - 200px);
left: calc(50% - 200px);
width: 400px;
height: 400px;
z-index: 1;
}

header {
position: relative;
min-height: 100vh;
z-index: 50;
}

header h1 {
display: block;
position: absolute;
top: 50vh;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .11em;
font-size: 2.75em;
line-height: 1em;
text-align: center;
width: 100%;
min-height: 50vh;
padding: .25em;
background: rgb(var(--r));
border-top: .15em solid white;
transform: skew(1turn, -15.45deg);
border-bottom: 100vh solid rgb(var(--r));
}

header h1 > span {
display: block;
translate: .1em 0;
}

header h1 span span {
font-weight: normal;
letter-spacing: .1em;
}

main {
position: relative;
padding: 1em var(--pad) var(--pad) var(--pad);
background: rgb(var(--r));
border-bottom: 50vh solid rgb(var(--r));
z-index: 100;
}

article {
display: flex;
flex-flow: row nowrap;
gap: var(--pad);
max-width: var(--max);
margin: 0 auto;
}

article + article {
padding-top: var(--2pad);
border-top: .125em solid white;
margin-top: var(--2pad);
}

article > div {
flex: 0 1 calc(100% / 3 * 2 - var(--pad2));
}

article > aside {
flex: 0 1 calc(100% / 3 - var(--pad2));
}

img.kuerbis {
max-width: 128px;
}



article p,
article > ul:not(.obj), 
article > ol:not(.obj) {
margin: 0 0 .5em 0;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

article .tab p:last-child {
margin-bottom: 0;
}

article > *:not(.obj) > li {
position: relative;
margin: 0 0 .35em 1em;
}

article > *:not(.obj) > li:before {
position: absolute;
left: -1em;
display: block;
width: 1em;
color: rgb(var(--t));
}

article > ul:not(.obj) > li:before {
content: '» ';
}

article > ol:not(.obj) {
counter-reset: liste;
list-style-type: none;
}

article > ol:not(.obj) > li:before {
counter-increment: liste;
content: counter(liste) ".";
}

article h2 {
font-size: 2em;
line-height: 1.2em;
font-weight: bold;
margin: 0 0 .25em -.075em;
}

article h2:first-child {
margin-top: -.3em;
}

article h2:not(:first-child) {
margin-top: 1em;
}

article h3 {
font-weight: bold;
margin: 0 0 .5em 0;
}

article .tab h3 {
padding-bottom: .5em;
border-bottom: .125em solid white;
margin-bottom: .5em;
}

article.impressum > * {
transition: opacity 333ms ease-in;
opacity: .8;
}

article.impressum:hover > *,
article.impressum:target > * {
opacity: 1;
}

article.impressum h3 {
font-size: 1.25em;
line-height: 1.3em;
padding-bottom: 1em;
border-bottom: .125em solid rgba(255,255,255,.2);
margin-bottom: 1em;
}

article a {
color: white;
border-bottom: 1px solid rgba(255,255,255,.3);
}

article a:hover {
border-bottom-color: white;
}

article.impressum a {
border-bottom-color: transparent;
}

p.stoerer {
position: absolute;
top: var(--2pad);
left: var(--2pad);
display: flex;
align-items: center;
color: rgb(var(--g));
background: rgb(var(--r));
line-height: 1.2em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
width: 160px;
height: 160px;
transform: rotate(7.225deg);
z-index: 150;
clip-path: path("M126.8,15.7l-11.2,2.6-3.1-11.1-10.4,4.9-5.4-10.2-9.2,7-7.4-8.8-7.6,8.7-9-7.1-5.6,10.1-10.3-5.1-3.4,11-11.1-2.8-1,11.5-11.5-.4,1.4,11.5-11.3,2,3.7,10.9-10.7,4.3,5.9,9.9L.2,71l7.8,8.4L0,87.7l9.4,6.6-6.1,9.8,10.6,4.5-4,10.8,11.3,2.2-1.6,11.4,11.5-.2.8,11.5,11.2-2.6,3.1,11.1,10.4-4.9,5.4,10.2,9.2-7,7.4,8.8,7.6-8.7,9,7.1,5.6-10.1,10.3,5.1,3.4-11,11.1,2.8,1-11.5,11.5.4-1.4-11.5,11.3-2-3.7-10.9,10.7-4.3-5.9-9.9,9.6-6.4-7.8-8.4,8-8.3-9.4-6.6,6.1-9.8-10.6-4.5,4-10.8-11.3-2.2,1.6-11.4-11.5.2-.8-11.5h0Z");
}

a.weiter {
display: block;
position: absolute;
bottom: var(--2pad);
left: calc(50% - 2em);
width: 4em;
height: 1em;
outline: 1em solid transparent;
border-radius: .05em;
}

a.weiter:hover {
background: rgb(var(--hg));
outline-color: rgb(var(--hg));
}

a.weiter:after {
content: '';
display: block;
width: 100%;
height: 100%;
background: white;
clip-path: path("M 40.1 20 0 3 0 0 40 17 80 0 80 3 40.1 20z");
}

a.weiter:hover:after {
background: rgb(var(--r));
}

a.weiter span {
display: none;
}

#map {
margin: 0 0 var(--2pad) 0;
}

article#info {
scroll-margin: var(--pad);
}

article .tab {
display: flex;
flex-flow: row wrap;
gap: 0 1em;
align-content: flex-start;
}

article .tab div {
flex: 1;
padding-top: 2em;
margin-top: auto;
}

article .tab > p {
width: 100%;
}

article hr {
width: 100%;
height: .1em;
background: rgba(255,255,255);
border: none;
margin: var(--pad) 0;
}

article.adresse,
article.impressum {
font-size: .8em;
line-height: 1.5em;
}

article.adresse > div {
display: flex;
flex-flow: row wrap;
gap: 1em;
}

article.adresse > aside {
display: flex;
flex-flow: column wrap;
justify-content: center;
}

article.adresse > div > * {
flex: 1;
text-align: center;
align-content: center;
}

article.adresse > div > h3 {
margin: 0;
}

img.feldfrische {
display: block;
width: 256px;
height: 256px;
}

div.karte svg {
display: block;
border-radius: .5em;
}

/* SVG */
.cls-1{stroke-dasharray:0 0 4 4}.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-18,.cls-19,.cls-2,.cls-20,.cls-21,.cls-22,.cls-23,.cls-24,.cls-25,.cls-26,.cls-27,.cls-28,.cls-29,.cls-3,.cls-30,.cls-31,.cls-32,.cls-33,.cls-34,.cls-35,.cls-36,.cls-37,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{fill:none;stroke:#fff}.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-18,.cls-19,.cls-2,.cls-20,.cls-21,.cls-23,.cls-24,.cls-25,.cls-26,.cls-27,.cls-28,.cls-29,.cls-3,.cls-30,.cls-31,.cls-32,.cls-33,.cls-34,.cls-35,.cls-36,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{stroke-width:4px}.cls-2{stroke-dasharray:0 0 4.1 4.1}.cls-3{stroke-dasharray:0 0 4.4 4.4}.cls-4{stroke-dasharray:0 0 3.9 3.9}.cls-5{stroke-dasharray:0 0 4 4}.cls-6{stroke-dasharray:0 0 3.4 3.4}.cls-7{stroke-dasharray:0 0 3.9 3.9}.cls-8{stroke-dasharray:0 0 3.8 3.8}.cls-38{fill:#037d3b}.cls-38,.cls-39,.cls-40,.cls-41,.cls-42{stroke-width:0}.cls-16,.cls-22,.cls-9{stroke-linecap:round}.cls-10{stroke-dasharray:0 0 4.3 4.3}.cls-11{stroke-dasharray:0 0 4.1 4.1}.cls-39{fill:#c8e60f}.cls-12{stroke-dasharray:0 0 4.5 4.5}.cls-13{stroke-dasharray:0 0 4.1 4.1}.cls-15{stroke-dasharray:0 0 4.4 4.4}.cls-16{stroke-linejoin:round}.cls-17{stroke-dasharray:0 0 4.2 4.2}.cls-18{stroke-dasharray:0 0 4.4 4.4}.cls-19{stroke-dasharray:0 0 4.3 4.3}.cls-20{stroke-dasharray:0 0 4.3 4.3}.cls-40{opacity:0.2}.cls-40,.cls-42{fill:#fff}.cls-21{stroke-dasharray:0 0 3.8 3.8}.cls-41{fill:#b50000}.cls-22,.cls-37{stroke-width:6px}.cls-23{stroke-dasharray:0 0 4.1 4.1}.cls-24{stroke-dasharray:0 0 3.2 3.2}.cls-25{stroke-dasharray:0 0 3.8 3.8}.cls-26{stroke-dasharray:0 0 4.2 4.2}.cls-27{stroke-dasharray:0 0 4.6 4.6}.cls-28{stroke-dasharray:0 0 4.8 4.8}.cls-29{stroke-dasharray:0 0 4.2 4.2}.cls-30{stroke-dasharray:0 0 3.8 3.8}.cls-31{stroke-dasharray:0 0 4.1 4.1}.cls-32{stroke-dasharray:0 0 3.8 3.8}.cls-33{stroke-dasharray:0 0 4 4}.cls-34{stroke-dasharray:0 0 4.1 4.1}.cls-35{stroke-dasharray:0 0 4.1 4.1}.cls-36{stroke-dasharray:0 0 3.6 3.6}
/* /SVG */

g.erdbeeren g {
scroll-margin: var(--pad);
transition: all 250ms ease-in-out;
}

g.erdbeeren g#klinikum {
transform-origin: 155.5px 730px;
}

g.erdbeeren g#bodelschwingh {
transform-origin: 372.9px 575px;
}

g.erdbeeren g#kromsdorf {
transform-origin: 745.5px 189px;
}

g.erdbeeren g:hover {
transform: scale(1.5);
}

g.erdbeeren g:target {
animation: erdbeeralarm 1s infinite;
}

@keyframes erdbeeralarm {
0%    {transform: scale(1);}
50%   {transform: scale(1.75);}
100%  {transform: scale(1);}
}





/* ############# Screens bis 720px ############# */
@media only screen and (max-width: 720px) {

  article {
  flex-flow: row wrap;
  }
  
  article > div,
  article > aside {
  flex: 1 1 100%;
	}

}






/* ############# Screens bis 640px ############# */
@media only screen and (max-width: 640px) {

  p.stoerer {
  top: 1em;
  left: 1em;
  }
  
  @keyframes erdbeeralarm {
	0%    {transform: scale(1);}
	50%   {transform: scale(3);}
	100%  {transform: scale(1);}
	}

}

/* ############# Screens unter 560px Höhe ############# */
@media only screen and (max-height: 560px) {

	a.weiter {
  bottom: 1em;
  }

}



/* ############# Screens bis 480px ############# */
@media only screen and (max-width: 480px) {
  
  body {
  font-size: 16px;
  }
  
  :root {
  --pad: 1em;
  }
  
  a.weiter {
  bottom: 1em;
  width: 5em;
  height: 1.25em;
  left: calc(50% - 2.2em);
  }
  
  /* Safari mob */
	@supports (-webkit-touch-callout: none) {  
		a.weiter {
		bottom: auto;
		top: 80vh;
		}
  }
  
  p.stoerer {
  clip-path: none;
	transform: none;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: auto;
	padding: .25em .5em;
	justify-content: center;
  }
  
  img.erdbeere {
  width: 100%;
  height: auto;
  left: 0;
  top: calc(50vh - 65vw);
  }
  
  header h1 {
  font-size: 12vw;
  }
  
  img.feldfrische {
  width: 100%;
  height: auto;
	}

}