/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  src: local(''),
       url('fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-weight: 600;
  src: local(''),
       url('fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v34-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


@font-face {
  font-family: 'Inter';
  font-style: light;
  font-weight: 300;
  src: local(''),
       url('fonts/Inter-Light.woff2') format('woff2'); 
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/Inter-Regular.woff2') format('woff2'); 
}

@font-face {
  font-family: 'Inter Medium';
  font-style: medium;
  font-weight: 600;
  src: local(''),
       url('fonts/Inter-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Bold';
  font-style: bold;
  font-weight: 700;
  src: local(''),
       url('fonts/Inter-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Black';
  font-weight: 900;
  src: local(''),
       url('fonts/Inter-Black.woff2') format('woff2');
}

@font-face {
	font-family: 'Oswald';
	font-weight: 200;
	src: local(''), url('fonts/Oswald-ExtraLight-200.woff2') format('woff2');
}

@font-face {
	font-family: 'Oswald';
	font-weight: 400;
	src: local(''), url('fonts/Oswald-Regular-400.woff2') format('woff2');
}





:root {
	--schwarz: rgb(20,20,25);
}
:root {
	--schwarzblau: rgb(70,75,100);
}
:root {
	--blau: rgb(60,100,200); 

}
:root {
	--hellblau: rgb(200,210,240); 
}
:root {
	--dunkelblau: rgb(35,80,150); 
	/*--dunkelblau: rgb(26,46,133); */
}
:root {
	--gelb: rgb(245,244,28);
}
:root {
	--hellgelb: rgb(250,248,246);
}
:root {
	--grau: rgb(240,240,242);
}
/* für Trennstreifen bei hellgrauer Liste (Stundenzettel fieldsets mobil)*/ 
:root {
	--grau2: rgb(236,236,238);
}
:root {
	--graublau: rgb(80,100,110);
}
:root {
	--hellgrau: rgb(247,247,249);
}
:root {
	--dunkelgrau: rgb(232,232,235);
}
:root {
	--dunkelgrau2: rgb(210,210,215);
}
:root {
	--dunkelgrau3: rgb(150,150,155);
}
:root {
	--gruen: seagreen; 
}
:root {
	--rot: crimson; 
}
:root {
	--orange: chocolate; 
}





@media only screen and (max-width: 768px) {
.desktop {
	display: none !important;
}
}
@media only screen and (min-width: 769px) {
.mobil {
	display: none !important;
}
}





html, head, body {
	/*height: 100%; Raus wegen nav position:sticky in home.css */
	padding: 0;
	margin: 0;
}

body {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	font-weight: 300;
	background: white;
	color: var(--schwarz);
	box-sizing: border-box;
}


.arial {
	font-family: Helvetica, Arial, sans-serif !important;
}

table {
	border-collapse: collapse;
}

ul, menu {
	margin: 0;
	padding: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	padding-inline-start: 0;	
	list-style-type: none;	
	font-size: inherit;
}

ul.liste.punkt {
	list-style-type: disc;	
}
ul.liste.pfeil{
	list-style-type: disclosure-closed;	
}

form li {
	padding: 0.25em 0;
}

form input + label {
	padding-left: 0.25em;
}


.liste li {
	font-size: 0.9em;
	line-height: 1.6em;
}
.liste.weit li {
	line-height: 2.5em;
}

.liste ul + ul {
	margin-top: 1em;
}

/* Auskommentiert wegen Fehler bei Suchfeld im Portal
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	padding-top: 0;
}
*/

a {
	color: var(--dunkelblau);
	text-decoration: none;	
	transition: color 0.1s ease;
}
a:hover {
	color: inherit;
}

footer a, 
a[href^="tel:"] {
	color: inherit;
}
footer a :hover,
a[href^="tel:"]:hover {
	color: var(--dunkelblau);
}



b {
	font-weight: 600;
}

button {
	border: none;
}


p {
	line-height: 1.4em;
}

.smallRel {
	font-size: 0.8em !important;
	line-height: 1.2em !important;
}

.bigRel {
	font-size: 1.05em !important;
}

fieldset, legend {
	margin: 0;
	padding: 0;
	border: none;
}

legend {
	/*font-size: 14px;* War auf Anmeldungsseite ("Passwort festlegen") zu klein */
	padding: 12px 0 0 8px;
}

input, select, option, textarea, form button, .anmeldung .button {
	border: 1px solid rgb(220,220,220);
	border-radius: 4px;
	background: white;
	padding: 1em 1.2em;
	margin: 0;
	/*
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	*/
	box-sizing: border-box;
	font-size: 0.98em;
	font-family: inherit;
}

select {
	font-family: 'Inter Bold', sans-serif;
}
option {
	font-family: 'Inter', sans-serif;
}

/*
@media only screen and (max-width: 768px) {
input[type=text],
input[type=number],
input[type=tel],
input[type=email] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
}
*/
::placeholder {
	font-weight: 100;
	font-size: inherit;
	font-style: italic;
	transition: opacity 0.2s;
}

:focus::placeholder {
	opacity: 0;
}

.relative {
	position: relative;
}

.hidden {
	visibility: hidden;
}
.unsichtbar {
	display: none !important;
}
/* Schrift verstecken (Stundenzettel Kopf)*/
.unsichtbar_span span { 
	visibility: hidden;
}

.inc {
	display: contents;
}
.inc_blass * {
	opacity: 50% !important;
}

.pointer {
	cursor: pointer;
}



a.link {
	cursor: pointer;
	text-decoration: underline;
	transition: text-decoration 0.2s;
}
a.link:hover {
	text-decoration: none;
}


.mainBg {
	background: var(--dunkelblau);
	color: white;
}
.mainBg * {
	color: white;
}


.mainBg2 {
	background: var(--gelb);
	color: inherit;
}
.mainBg2 * {
	color: inherit;
}



/*
.mainColorHov {
	cursor: pointer;
	color: inherit !important;
	transition: color 0.2s ease;
}

.mainColorHov:hover {
	color: rgb(48,117,211) !important;
}

.mainColorBgHov {
	background: inherit;
	transition: background 0.2s ease;
}

.mainColorBgHov:hover {
	background: var(--farbe1);
	color: rgb(230,230,230);
}

.mainColorBorderHov {
	border-color: rgb(200,200,200);
	transition: border-color 0.2s ease;
}

.mainColorBorderHov:hover {
	border-color: var(--farbe1);
}
*/



.farbe1 {
	color: var(--dunkelblau);
}

.weiss,
.weiss a {
	color: white !important;
}

.transp,
.transp a {
	color: transparent !important;
}

.normal {
	font-weight: 300 !important;
}
.medium {
	font-weight: 400 !important;
}
.fett {
	font-weight: 600 !important;
}

.kursiv {
	font-style: italic !important;
}

.mono {
	font-family: Courier, 'New Courier', monospace;
	color: var(--graublau);
}

.kleiner {
	font-size: 0.9em;
}

.groesser {
	font-size: 1.1em;
}
.groesser2 {
	font-size: 1.5em;
}

.halbblass {
	opacity: 0.8 !important;
}
.blass {
	opacity: 0.5 !important;
}
.doppelblass {
	opacity: 0.2 !important;
}

.hellgrauBg {
	background: var(--hellgrau);
}

.unterstrichen {
	text-decoration: underline;
}
.durchgestrichen {
	text-decoration: line-through;
}

.links {
	text-align: left !important;
} 

.rechts {
	text-align: right !important;
}

.mitte {
	text-align: center !important;
}

.td_middle {
	vertical-align: middle !important;
}

.no_border {
	border: none !important;
}

.nowrap {
	white-space: nowrap !important;
}


.checkPw {
	background: yellow; 
	transition: background 0.5s;
}

.checkPw_ok {
	background: var(--gruen); 
	color: rgb(220,220,220);
	transition: background 0.5s;
}

.meldung {
	color: brown; 
}
.meldung_ok {
	color: rgb(0,160,60); 
}
.warnmeldung {
	color: rgb(230,7,7); /*rot*/
}

.sperrschild  *:not(.notiz){
	cursor: not-allowed !important;
}


.vert_center {
  	display: flex;
  	flex-direction: column;
  	justify-content: center;	
}
@media only screen and (min-width: 768px) {
.vert_center {
	min-height: 90%; /*Platz lassen für footer */
}
}
@media only screen and (max-width: 768px) {
.vert_center {
	/*min-height: 50vh;*/
	/* Wofür die Angabe oben gut war, weiß ich nicht mehr
	Für Anmeldefenster + footer jetzt erstmal auf 85%; */
	min-height: 85%;
}
}
@media only screen and (min-width: 768px) {
.vert_center_55 {
	min-height: 55%; 
}
}



.li_re {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;	
	justify-content: space-between;
	flex-wrap: wrap;
}

/* Ausrichten eines dritten Elements (hier für Projektfilter neben Suchfeld */ 
.linksb {
	margin-right: auto;
}
.rechtsb {
	margin-left: auto;
}
/* Damit das dritte nicht direkt daneben klemmt, Abstand fürs linke und rechte */
.li_re > :first-child {
	margin-right: 1em;
}
.li_re > :last-child {
	margin-left: 1em;
}


/* angelegt für Merken ★ im Stundenzettel */
.flex {
	display: flex;
	gap: 1.5em;
	align-items: center;
}
/* für svgsymbole im Stundenzettel */
.flex.null {
	gap: 4px;
}












.infofeld, .meldungfeld {
	margin: 2em 0 2em 0;
	padding: 1.25em;
	background: var(--hellgrau);
	border: 1px solid var(--grau);
	border-radius: 6px;
}
.infofeld::before {
	display: inline-block;   
	background-image: url('../src/img/symb/info.png');
    background-size: 14px 14px;
    width: 14px; 
    height: 14px;	
    content:"";
	position: relative;
	top: 3px;
	margin-right: 5px;
}
.infofeld p {
	margin-bottom: 0;
}




form button, .anmeldung .button {
	cursor: pointer;
	background: var(--blau); 
	color: rgb(250,250,250);
	border: none;
	transition: background 0.2s;
	opacity: 1;
}
form button:hover, .anmeldung .button:hover, {
	background: rgb(100,100,100);
}
form button.disabled,
form button:disabled {
	opacity: 0.25;
}

form.benutzer_formular > fieldset > div > *,
form.benutzer_formular > div > *
 {
	width: 100%;
}

form.benutzer_formular > fieldset > div,
form.benutzer_formular > div {
	margin: 1.1em 0;
}
form.benutzer_formular > div:last-of-type { /* für anm_log.php (Button runter) */
	margin-top: 1.5em;
}

button.sesam {
	background: var(--gelb);
	color: black;
}




/*
.aufklapp .klapp {
	margin-bottom: 1.1em;
	background-image: url(img/symb/pfeil_rechts.png);
	background-repeat: no-repeat;
	background-size: 12px;
	background-position-y: 4px;
	padding-left: 20px;
	cursor: pointer;
	color: inherit;
	transition: all 0.1s ease;
}

.aufklapp .klapp  + div {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s;
}
*/












footer {
	padding: 3vw 0 1vw 0;
	background: var(--hellgelb);
	font-size: 0.9em;
	line-height: 1.4em;
	text-align: left;
}
@media only screen and (max-width: 768px) {
footer {
	padding: 15vw 4vw;
}
}
/*
@media only screen and (min-width: 769px) {
footer div.breite {
	width: 75%;
}
}
*/
footer div.breite > div {
	display: flex;	
	margin-bottom: 2vw;	
	/*justify-content: space-between;*/	
	justify-content: space-around;	
	align-items: center;	
}
@media only screen and (max-width: 768px) {
footer div.breite > div {
	display: block;	
	margin-bottom: 1vw;	
}
}

footer div.breite > div > div:first-of-type {
	margin-right: 20vw;
}
@media only screen and (max-width: 768px) {
footer div.breite > div > div:first-of-type {
	margin-right: 0;
	margin-bottom: 10vw;
}
}


footer img {
	display: block;
	width: 100px;
	margin-bottom: 2em;
	mix-blend-mode: darken;	
}
@media only screen and (max-width: 768px) {
footer img {
	width: 28vw;
}
}


footer a,
footer small {
	font-size: 0.9em;
	font-weight: 300;
}

footer small {
	display: block;
	margin-bottom: 0.5em;
}

@media only screen and (max-width: 768px) {
footer span {
	display: block;
}
}

/*footer a[href^="tel:"]*/
strong > a {
	display: block;
	margin-bottom: 1em;
	font-family: Inter;
	font-size: 1.5em;
	font-weight: 700;
}