@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/Roboto-Regular.ttf")
}

*, *::before, *::after {
    user-select: none;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}
body, button {
    /* Alle Schriftgrößen hängen von diesem Eintrag ab */
    font-size: 12pt;
    font-family: inherit;
    font-size: inherit;
	margin: 0;
	padding: 0;
	color:black;
	font-family: inherit;
	text-align: center;
	vertical-align: middle;
    position: relative;
}
input {
    font-family: inherit;
    font-size: 12pt;
    border-width: 1px;
}
body {
    overflow-y: scroll;
}
textarea {
	font-family: inherit;
    font-size: 1.1em;
	resize:none;
	background-color:transparent;
	border:1px solid transparent;
	user-select: text;
}
iframe {
    background-color: #eee;
    position:absolute;
    left: 0;
    height: 20em;
    width: 100%;
    border: none;
    /* scrolling: auto; */
}
a {
    color: inherit;
    text-decoration: none;
}
.nicht-link { cursor: default }
.switch-container {
	flex-shrink: 0;
    width: 2em;
    height: 0.75em;
    border: 1px solid black;
    border-radius: 1em;
    position: relative;
    transition: background-color 0.25s;
}
.switch-content {
    width: 1em;
    height: 1em;
    border: 1px solid #888;
    border-radius: 1em;
    background-color: #aaa;
    position: absolute;
    top: -0.2em;
    left: -0.15em;
    transition: left 0.25s;
}
.switch-selected {
    left: 1.35em;
    background-color: #77C66E;
}
.notification {
    position: relative;
}
.info-button {
    font-size: 18px;
    font-family: serif;
    font-weight:900;
    background-color: #888;
    color: #eee;
    border: 1px solid transparent;
    border-radius: 50%;
    width: 1.25em;
    min-width: 1.25em;
    height: 1.25em;
    min-height: 1.25em;
}
.info-button:hover {
    background-color: #ccc;
    border-color: #111;
    color: #111;
}
input[type="file"] {
    display: none;
}
.file { /* "Neues" file input */
    color: black;
    border: 1px solid hsl(0, 0%, 20%);
    display: inline-block;
    cursor: pointer;
    background: linear-gradient(to bottom, lightgrey, white 30%, lightgrey);
}
.file:disabled {
    color: lightgrey;
    background-color: grey;
}
.file:hover {
    border-color: hsl(0, 0%, 50%);
    background: linear-gradient(to bottom, lightgrey, white 70%, lightgrey);
}
.badge {
    --light-red: hsl(0, 100%, 65%);
    --dark-red: hsl(0, 100%, 50%);
    /* width: 32px;
    height: 32px; */
    min-width: 32px;
    max-width: 32px;
    min-height: 32px;
    max-height: 32px;
    position: absolute;
    top: -12px;
    right: -12px;
    border: 1px solid black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25em;
    font-weight: bold
}
.badge-red {
    border-color: black;
    background-image: radial-gradient(var(--light-red), var(--dark-red));
    color: black;
}
.badge-red:hover, .badge-red:focus {
    background-image: radial-gradient(var(--dark-red), var(--light-red));
    color: white
}
.abstand-grau {height: 0.5em; min-height: 0.5em; max-height: 0.5em; background-color: #eee}
.abstand-unten {margin-bottom: 0.5em;}
.rahmen-grau { border: 1px solid #ddd;}
.rahmen-grau-d { border: 1px solid #ddd;}
.rahmen-grau-c { border: 1px solid #ccc;}
.rahmen-grau-b { border: 1px solid #bbb;}
.rahmen-grau-oben { border-top: 1px solid #ddd;}
.rahmen-grau-unten { border-bottom: 1px solid #ddd;}
.rahmen-grau-dick { border: 0.5em solid #eee;}
.rahmen-grau-a { border: 1px solid #aaa; }
.rahmen-schwarz {border: 1px solid black}
.rahmen-schwarz-dick {border: 3px solid black}
.rahmen-schwarz-oben {border-top: 1px solid black}
.rahmen-schwarz-links {border-left: 1px solid black}
.rahmen-schwarz-rechts {border-right: 1px solid black}
.rahmen-schwarz-unten {border-bottom: 1px solid black}
.kein-rahmen-oben { border-top: none; }
.rahmen-grau-oben { border-top: 1px solid #ddd; }
.rahmen-grau-unten { border-bottom: 1px solid #ddd; }
.rahmen-grau-links { border-left: 1px solid #ddd; }
.rahmen-grau-rechts { border-right: 1px solid #ddd; }
.kein-rahmen-unten { border-bottom: none; }
.link:hover {
	border: 1px solid black;
	cursor:pointer;
}
.d-none { display: none !important; }
.cursor-pointer {
    cursor: pointer;
}
.zurückKnopf {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}
button {
	background-color: #fff;
	color: #555;
	border: 0;
	/*margin: auto;*/
}
.hinzufügen {
	border: 1px solid black;
	/* width: 3em; */
	height: 3em;
    /* margin: 0.25em; */
    padding: 0 1.5em;
}
.löschen {
	border: 1px solid black;
    color: white;
    background-color: red;
    min-width: 3em;
	width: 3em;
    max-width: 3em;
    min-height: 3em;
	height: 3em;
    max-height: 3em;
    margin: 0.25em;
}
.loadsave {
	padding:0.1em;
	border: 1px solid black;
	width:12em;
	height:2em;
	font-size:0.8em;
}
.modal {
	display:none;
	position:fixed;
	z-index:20;
	padding-top:100px;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:black;
	background-color:rgba(0,0,0,0.4);
}
.modal-content {
	position: relative;
	background-color:#f8f8f8;
	margin:auto;
	padding:0;
	border:1px solid #888;
    max-width: fit-content;
	width:80%;
    overflow-y:auto;
}
.modal-header {
	padding: 2px 16px;
	background-color:#5a585f;
	color:white;
	font-size: 1.1em;
}
.modal-body {
    background-color:#f8f8f8;
	padding: 2px 16px;
    max-height: 80vh;
    overflow-y:auto;
}
.modal-close {
	color:#bbb;
	float:right;
	font-size:1.1em;
	font-weight:bold;
}
.modal-close:hover {
	color:red;
	text-decoration:none;
	cursor:pointer;
}