@font-face {
    font-display: swap; 
    font-family: 'GrueneType';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/GrueneType-Regular.woff') format('woff');
  }

@font-face {
    font-family: PT Sans;
    src: local("PT Sans Bold"),local("PTSans-Bold"),url(../fonts/PTSans-Bold.woff2) format("woff2"),url(../fonts/PTSans-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: fallback
}

@font-face {
    font-family: PT Sans;
    src: local("PT Sans Bold Italic"),local("PTSans-BoldItalic"),url(../fonts/PTSans-BoldItalic.woff2) format("woff2"),url(../fonts/PTSans-BoldItalic.woff) format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: fallback
}

@font-face {
    font-family: PT Sans;
    src: local("PT Sans Italic"),local("PTSans-Italic"),url(../fonts/PTSans-Italic.woff2) format("woff2"),url(../fonts/PTSans-Italic.woff) format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: fallback
}

@font-face {
    font-family: PT Sans;
    src: local("PT Sans"),local("PTSans-Regular"),url(../fonts/PTSans-Regular.woff2) format("woff2"),url(../fonts/PTSans-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: fallback
}  

  
:root {
	--headfont: 'GrueneType', system-ui, sans-serif;
	--headfont-style: normal;
	--headfont-weight: 600;
	--textfont: 'PT Sans', system-ui, sans-serif;
  --textfont-bold: 'PT Sans', system-ui, sans-serif;

  --textcolor: 13, 13, 13;
	--pagemargin: 4vw;
	--gruen: 0, 137, 57;  /* Klee */
	--dunkelgruen: 0, 85, 56;  /*tanne*/
	--hellgruen: 138, 189, 36; /* Grashalm */
	--magenta: 251, 27, 125;  /*himbeere*/
	--gelb: 255, 241, 122;  /*sonnenblume*/
	--dunkelgelb: 255, 213, 0;
	--dunkelblau: 91, 125, 169;
	--hellblau: 11, 161, 221; /* himmel */
	--sand: 245, 241, 233;
	--text-dunkel: 17, 24, 39;
	--text-hell: 255, 255, 255;
	--white: 255, 255, 255;
	--black: 0,0,0;

	--border-radius: 5px;

}

* {
	box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font: normal 20px/22px var(--textfont);
	background: rgb(var(--dunkelgruen));
}

div#login {
	width: 100%;
	height: 100%;
	align-content: center; 	
	display: grid;
}

form#loginForm {
	display: flex;
	flex-direction: column;
	width: 400px;
	margin: 0 auto;
}

form#formuli {
  width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: rgba(var(--dunkelgruen), 1);
}

p {
	padding: 0 0 0.5em 0;
	margin: 0;
}

h1 {
    padding: 50px 0 0 0;
    margin: 0 0 1em 0;
    font: 600 50px/100px GrueneType, sans-serif;
    
    color: rgba(var(--hellgruen), 1);
}

#header {
	display: flex;
	background: rgba(var(--hellgruen), 1);
	color: rgba(var(--dunkelgruen), 1);
	padding: 0.5em 1em;
	text-align: right;
	font-size: 0.8em;
	position: fixed;
	z-index: 100000;
	width: 100%;
	box-sizing: border-box;
	font-family: GrueneType, sans-serif;
	font-weight: 600;
	justify-content: space-between;
}

#header a {
  color: rgba(var(--dunkelgruen), 1);
	line-height: 2em;
	padding-top: 0.1em;
}

div.intro {
	margin-bottom: 2em;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

body .white {
	color: rgb(var(--white));
}

.swiper-slide {
  padding: 4em 4em 4em 4em;
  font-size: 18px;
  background: #fff;
  box-sizing: border-box;
}

.ctabar {
    width: 100%;
    background: rgba(var(--dunkelgruen), 1);
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 0 4em;
    box-sizing: border-box;
    display: none;
}

.ctabar.visible {
	display: block;
	}

.bottombar {
  width: 100%;
  height: auto;
  background: rgba(var(--dunkelgruen), 1);
  position: absolute;
  bottom: 0px;
  padding: 0 4em;
  box-sizing: border-box;  
  z-index: 100000;
}


a.fbutton,
button[type=submit] {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: inline-block;
    clear: both;
    padding: 1.2em 1em 1em 1em;
    margin: 1em 0 1em 0;
    font: 600 20px/22px GrueneType, sans-serif;
    
    border: 2px solid white;
    transition: all 0.4s;
    color: rgba(var(--dunkelgruen),1);
    cursor: pointer;
    background: rgba(var(--hellgruen),1);
	border: 0;
	border-radius: var(--border-radius);
}

a.fbutton:hover,
button[type=submit]:hover {
  background: rgba(var(--magenta),1);
  color: #fff;
}

a.vbutton {
    display: inline-block;
    clear: both;
    padding: 0.8em 1em 0.5em 1em;
    margin: 0 0 1em 0;
    font: 600 20px/22px GrueneType, sans-serif;
    
    letter-spacing: 0.03em;
    border: 2px solid rgba(var(--hellgruen), 1);
    color: rgba(var(--hellgruen), 1);
    transition: all 0.4s;
    cursor: pointer;
	border-radius: var(--border-radius);
}

a.vbutton:hover {
  background: rgba(var(--hellgruen),1);
  color: rgba(var(--dunkelgruen), 1);
  border-color: rgba(var(--hellgruen),1);
}

a.vbutton.active {
  background: rgba(var(--hellgruen),1);
  color: rgba(var(--dunkelgruen), 1);
  border-color: rgba(var(--hellgruen),1);
}

input[type=text],
input[type=password] {
  padding: 1em 1em;
  margin: 0 0 1em 0;
  width: 70%;
  font: normal 18px/22px  var(--textfont);
  transition: all 0.4s;    
  border: 2px solid rgba(var(--dunkelgruen), 0.2);
  background-color: rgba(var(--black), 0.15);
	border-radius: var(--border-radius);
	color: rgba(var(--white), 1);
}

form#loginForm input[type=text],
form#loginForm input[type=password] {
  width: 100%;
}

input::placeholder {
	color: rgba(var(--white), 0.5);
}


.dark input[type=text],
textarea {
  border: 2px solid rgba(var(--hellgruen), 0.3);
  background-color: rgba(var(--black), 0.2);
}

.dark input[type=text]:hover,
.dark input[type=text]:focus {
  border: 2px solid rgba(var(--hellgruen), 1);
  background-color: rgba(var(--black), 0.5);
}

input:hover,
input:focus {
  border: 2px solid rgba(var(--hellgruen), 1);
    background: rgba(var(--black), 0.3)
}

textarea {
	box-sizing: border-box;
	margin: 0 0 1em 0;
	padding: 1em;
	width: 100%;
	height: 45vh;
	font: normal 18px/22px  var(--textfont);
	transition: all 0.4s;
	border-radius: var(--border-radius);
	color: rgba(var(--white), 1);
	
}

body .ql-toolbar {
	background: rgba(var(--white), 0.8);
	border-radius: var(--border-radius) var(--border-radius) 0 0;	
	border: 2px solid rgba(var(--hellgruen), 1) !important;
	border-bottom: 0 !important;
}

body .ql-container {
	font: normal 18px/22px  var(--textfont);
	background: rgba(var(--white), 0.5);
	/*color: rgba(var(--white));*/
	border: 2px solid rgba(var(--hellgruen), 1) !important;
	border-top: 0 !important;
	border-radius: 0 0 var(--border-radius) var(--border-radius);
}

body .ql-container p {
	margin-block-end: 0.5em;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: 'Zwischenüberschrift' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: 'Fließtext' !important;
}

textarea:hover,
textarea:invalid:hover,
textarea:invalid:focus {
	border: 2px solid rgba(var(--hellgruen), 1);
	background-color: rgba(var(--black), 0.5);
}

textarea:invalid  {
	/* border: 2px solid rgba(var(--weiss), 0.6); */
	/* background-color: rgba(var(--weiss), 0.4); */
}

label {
    width: 70%;
    display: block;
    margin: 0;
    padding: 0;
    color: rgba(var(--hellgruen), 1);
    font: 600 20px/44px GrueneType, sans-serif;
    
    letter-spacing: 0.03em;
}

label span {
  font-size: 0.7em;
  font-family: sans-serif;
}


#legende {
    padding: 2em 2em 0 0;
    font-family: GrueneType, sans-serif;
}

#legende strong {
    font-size: 1em;
	color: rgb(var(--hellgruen));
	line-height: 2em;
}

#vorgabe,
#result__all {
    font-size: 3em;
    line-height: 1em;
    font-family: GrueneType, sans-serif;
    display: block;
	color: rgb(var(--white))
}

#result__all.ok {
    color: rgba(var(--hellgruen), 1);
    border-color: rgba(var(--dunkelgruen), 1);
}

#result__all.notok {
    color: red;
    border-color: red;
}


.disabled,
.disabled:hover {
	color: rgba(255,255,255,0.4) !important;
    border-color: rgba(255,255,255,0.4) !important;
	cursor: not-allowed;
	background: rgba(255,255,255,0.2) !important;
	pointer-events: none;	
}

#myDropzone {
  border: 4px dotted rgba(var(--hellgruen), 1) !important;
  background: rgba(var(--weiss), 0.4) !important;
  color: rgba(var(--white), 1);
  text-align: center;
  padding: 3em 1em !important;
  transition: background 0.4s;
}

#myDropzone:hover {
  background: rgba(var(--hellgruen), 1) !important;
}

.swiper-pagination {
  color: #fff;
  text-align: right;
  padding: 0 1em 0 0;
  box-sizing: border-box;
}




#first {
  background: rgba(var(--dunkelgruen), 1);
  color: #fff;
}

#first label {
    color: rgba(var(--hellgruen), 1);
}

#second {
  background-color: rgba(var(--white), 0.05);
  color: #fff;
}

#third {
  background-color: rgba(var(--white), 0.1);
}

#fourth {
  background-color: rgba(var(--white), 0.15);
}

#fifth {
  background-color: rgba(var(--white), 0.2);
}

#hofi {
  width: 120px;
  height: auto;
  float: left;
  margin-right: 20px;
}

input#sss {
  margin-top: 10px;
  width: 300px;
}

#sixth p {
  margin-top: 0;
}

a#credit {
	display: block;
	padding: 0.5em;
	font-size: 0.8em;
	text-align: center;
	color: rgb(var(--white))
}