body{ 
font-size:17.28px; 
} 

.pfeilstil{ 
fill:#DE060C; 
stroke:#2D2828; 
stroke-width:12; 
stroke-miterlimit:5; 
} 

body, div, h1, h2, h3, h4, a, p, li, ul, span, b, textarea, input , select, button{ 
font-family:"Musikschule"; 
} 

@font-face { 
font-family:'Musikschule'; 
src: url('../schrift/FrutigerLT-Light.eot'); 
src: url('../schrift/FrutigerLT-Light.eot?#iefix') format('embedded-opentype'), 
url('../schrift/FrutigerLT-Light.svg#schrift/FrutigerLT-Light') format('svg'), 
url('../schrift/FrutigerLT-Light.ttf') format('truetype'), 
url('../schrift/FrutigerLT-Light.woff') format('woff'), 
url('../schrift/FrutigerLT-Light.woff2') format('woff2'); 
font-weight: normal; 
font-style: normal; 
} 

:root{ 
} 

.nurprint{ 
display:none; 
} 

a{ 
text-decoration:none; 
color:initial; 
} 

select{ 
-webkit-appearance: none; 
-moz-appearance: none; 
appearance: none; 
border: none 0px; 
height: 1.2em; 
font-size: 1em; 
border-radius:0px; 
display:block; 
} 

option{ 
-webkit-appearance: none; 
-moz-appearance: none; 
appearance: none; 
} 

textarea, input{ 
-moz-appearance: none; !important; 
-webkit-appearance: none !important; 
appearance: none !important; 
outline:none; 
} 

button { 
font-size: 1.1em; 
font-weight: normal; 
padding: 0.2em 1em; 
-webkit-appearance: none; 
-moz-appearance: none; 
appearance: none; 
background: rgba(208, 238, 255, 0.6); 
border: 1px solid #312F2F; 
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 
border-radius: 0.8em; 
} 

.dick{ 
font-weight:600; 
} 

.duenn{ 
font-weight:normal; 
} 

.checkbox{ 
display:block; 
width:1.5em; 
height:1.5em; 
border:solid 0.01em black; 
border-radius:0.05em; 
position: relative; 
} 

.checked .innerhaken { 
background-image:url('../icons/gutkrummgut.svg'); 
background-repeat:no-repeat; 
} 

.innerhaken { 
width: 120%; 
height: 120%; 
z-index: 10; 
position: absolute; 
top: -0.3em; 
} 

#checkboxfenster{ 
display:flex; 
align-items: center; 
} 

*{ 
font-family: sans-serif; 
} 

.error{ 
color:red; 
} 

.ueberschrift{ 
font-size:1.1em; 
font-weight:normal; 
} 

.svg{ 
width:100%; 
} 

.blaettern{ 
width:28.8px; 
height:28.8px; 
} 

.einsmehr{ 
width:23.04px; 
height:23.04px; 
margin-top:4.32px; 
} 

.einsweniger { 
width:23.04px; 
height:23.04px; 
margin-bottom:4.32px; 
} 

.vorwaerts { 
transform:rotate(180deg); 
} 

.einsmehr{ 
transform:rotate(90deg); 
} 

.einsweniger{ 
transform:rotate(270deg); 
} 

.rueckwaerts { 
} 

.unsichtbar{ 
display:none !important; 
} 

.geheim{ 
visibility:hidden; 
} 

.kleiner{ 
font-size:0.8em; 
} 

.tabellenzeile { 
display: flex; 
width: 100%; 
justify-content: flex-start; 
} 

.tabellenzeile { 
display: flex; 
width: 100%; 
justify-content: flex-start; 
} 

.label { 
width: 24%; 
flex-shrink: 0; 
height: 2em; 
border-bottom: solid 1px; 
border-right: solid 1px; 
display: flex; 
align-items: center; 
padding-left: 1%; 
position: relative; 
} 

.letztes .label { 
border-bottom: 0px none; 
} 

.radiotrigger { 
display: flex; 
width: 25%; 
height: 2em; 
} 

.radiotrigger.anwesend { 
border-bottom: solid 1px; 
border-right: solid 1px; 
} 
.radiotrigger.entschuldigt { 
border-right: solid 1px; 
border-bottom: solid 1px; 
} 
.radiotrigger.unentschuldigt { 
border-right: initial; 
border-bottom: solid 1px; 
} 



.unteres.letztes .radiotrigger.unentschuldigt,.letztes .radiotrigger.weg { 
border-bottom: 0px none; 
} 

.letztes .radiotrigger.anwesend { 
border-bottom: 0px none; 
border-right: solid 1px; 
} 
.letztes .radiotrigger.entschuldigt { 
border-right: solid 1px; 
border-bottom: 0px none; 
} 
.letztes .radiotrigger.unentschuldigt { 
border-right: initial; 
border-bottom: 0px none; 
} 



.unteres .radiotrigger.unentschuldigt{ 
border-bottom: solid 1px; 
} 

.triggerfueller { 
width: 1em; 
height: 1em; 
} 

.radiotrigger.checked .triggerfueller { 
background-color: #E22006; 
} 



.weglassbutton{ 
display:flex; 
width:1em; 
height:1em; 
position:absolute; 
right:20em; 
top:0.2em; 
cursor:pointer; 
z-index:20; 
} 

.wegzeichen { 
border: initial !important; 
width: 2em; 
position: absolute; 
top: 0px; 
right: 0.2em; 
} 

.wegtriggerfueller { 
height: 100%; 
width: 100%; 
border-radius: initial !important; 
display:flex; 
} 

.pink{ 
background-color:#A63680; 
} 

.hellblau{ 
background-color:#A3C5E4; 
} 

.dunkelblau{ 
background-color:#6092C8; 
} 

.schmutzgelb{ 
background-color:#CEBD04; 
} 

.lachs{ 
background-color:#F5AF90; 
} 

#dokumentenanzeige { 
white-space: initial; 
} 

#dokumentenanzeige form { 
display: none; 
} 

#ueberschriftdokumente { 
margin: initial; 
margin-bottom: 1.2em; 
} 

.logonfenster #iphonebox { 
display: flex; 
flex-direction: column; 
height: 100vh; 
align-items: center; 
justify-content: space-between; 
} 

#logintitel { 
font-size: 1.5em; 
text-align: center; 
} 

#logintable { 
display: flex; 
flex-direction: column; 
justify-content: space-between; 
align-items: stretch; 
} 

.tablerow { 
margin: 0.5em 0px; 
text-align: center; 
position: relative; 
} 

#offiziellnavigation a{ 
text-decoration: none; 
color:black; 
} 

input[type="password"]::-ms-reveal, 
input[type="password"]::-ms-clear { 
display: none !important; 
} 

input::-ms-show, input::-ms-reveal, ::-ms-reveal{ 
display:none !important; 
} 

#wegkreuz{ 
display:none; 
} 

.placeholder, .hintergrund{ 
color:rgba(0,0,0,0.5); 
} 

#buttonfeld { 
display: flex; 
align-items: center; 
justify-content: space-between; 
max-width: 90%; 
flex-wrap: wrap; 
}

.nuriphone{ 
display:none !important; 
} 

body{ 
background: #D0EEFF; 
padding:0px; 
margin:0px; 
} 

#allesbox { 
position: relative; 
/* width: 1440px; */ 
height: 100vh; 
} 

#iphonebox { 
position: fixed; 
overflow-y: scroll; 
-webkit-overflow-scrolling:touch; 
overflow-x: hidden; 
width: 1310.4px; 
top: var(--headerhoehe); 
left: calc((100vw - 1310.4px) / 2); 
height: calc(100vh - var(--headerhoehe)); 
} 

.index #iphonebox { 
height: var(--ipadhoehe); 
display: flex; 
flex-direction: column; 
} 

/*header*/ 

#header { 
margin-top:0.5em; 
background: #FFFFFF; 
border: 2.88px solid #322C2B; 
box-shadow: 0px 5.76px 5.76px rgba(0, 0, 0, 0.25); 
border-radius: 33.12px 33.12px 0px 0px; 
display:flex; 
align-items: center; 
position:fixed; 
top:0px; 
left:calc((100vw - 1310.4px) / 2); 
width: calc(1296px - 5.76px); 
z-index: 100; 
} 

.veranstaltung #jahre{ 
margin:0.5em 0px 0.5em 0.5em; 
} 

/*logo*/ 

#logo { 
position: absolute; 
left: 864px; 
top: 28.8px; 
width: 331.2px; 
} 

/*Lehrpersonen*/ 

#personendaten { 
position: relative; 
min-height: 115.2px; 
margin: 14.4px 0px -14.4px 0px; 
} 

#lehrpersonen { 
display: inline-flex; 
align-items: center; 
margin: 14.4px 0px 0px 7.2px; 
} 

#rueckwaerts { 
margin: 0px 1% 0px 0px; 
display:block; 
} 

#vorwaerts { 
margin: 0px 0px 0px 1%; 
display:block; 
} 

#lpliste { 
background: #A3C5E4; 
border: 1px solid #050100; 
border-radius: 8.64px; 
display: flex; 
width: 360px; 
height: 43.2px; 
align-items: center; 
margin-left: 0px !important; 
} 

#lpliste option { 

} 

#esentialkasten { 
display: flex; 
flex-direction: column; 
width: 446.4px; 

} 

#datuemer { 
display: flex; 
justify-content: center; 
margin-top: 0.5em; 
} 

#datuemer h2 { 
font-size: 0.8em; 
} 
#geburtsdatum { 
margin-right: 1em; 
} 

/*Jahrzahlen*/ 

#jahre { 
display: flex; 
flex-direction: column; 
width: 57.6px; 
justify-content: center; 
align-items: center; 
height: 100.8px; 
border: 1px solid #050100; 
border-radius: 8.64px; 
} 

.lehrpersonenkarte #jahre { 
margin-left: 7.2px; 
} 

#jahrzahlen { 
padding: 0px 2.88px 0px 2.88px !important; 
/*border: 1px solid #050100; 
border-radius: 5.76px;*/ 
font-size: 0.9em; 
height: 1.4em; 
} 

/*Instrumente*/ 

#instrumentenblock { 
display: flex; 
margin: 14.4px 28.8px 0px 14.4px; 
width: 345.6px; 
justify-content: space-evenly; 
} 

.schriftundicon { 
display: flex; 
flex-direction: column; 
align-items: center; 
} 

.wechselicon { 
position: relative; 
width: 86.4px; 
height: 86.4px; 
border: 1.44px solid #CF0A0A; 
border-radius: 50%; 

} 

.instrumentbild { 
display: flex; 
justify-content: space-around; 
align-items: center; 
} 

.instrumentbild .svg { 
width: 85%; 
} 

.instrumentenh2{ 
font-size:0.7em; 
text-align:center; 
padding-top: 0.1em; 
} 

.seitentitel{ 
display:flex; 
justify-content:space-between; 
align-items:center; 
} 

#seitentitelicon { 
margin-right: 7.2px; 
} 
#seitentitelicon .svg{ 
margin-top: -8.64px; 
} 

#veranstaltung { 
width: 504px; 
background: #A3C5E4; 
border: 1px solid #050100; 
border-radius: 8.64px; 
position: relative; 
margin-left: 14.4px; 
padding-left: 1em; 
height: 43.2px; 
margin-right: 21.6px; 
padding-top: 0.2em; 
font-size: 1em; 
} 

.veranstaltung #logo { 
width: 288px; 
left: 907.2px; 
} 

/*content*/ 

#content { 
width: 99%; 
position: relative; 
padding-top:1em; 
min-height: calc(100vh - var(--headerhoehe) - var(--footerhoehe) - 3em); 
} 

#bearbeitungerlaubt { 
font-size: 1em; 
font-weight: 600; 
text-align: center; 
margin-top: 1em; 
line-height: 2em; 
} 

#personenfelder{ 
width: 99.8%; 
display:flex; 
flex-wrap:wrap; 
justify-content:space-between; 
position: relative; 
align-items: stretch; 
} 

.weissfeld{ 
background:#ffffff; 
padding:14.4px; 
margin:14.4px 0px 14.4px 0px; 
width:97.7%; 
flex-shrink: 0; 
border: 1.44px solid #050100; 
border-radius: 14.4px; 
position: relative; 
white-space: pre-wrap; 
} 

.innerfeld { 
display: flex; 
flex-direction: column; 
position: relative; 
} 

.kleinfeld{ 
width:13.5% !important; 
} 

.mittelfeld{ 
width:28% !important; 
} 

.halbfeld{ 
width:44% !important; 
} 

.zweidrittelfeld{ 
width:63% !important; 
} 

#bearbeitungswertfeld.kleinfeld{ 
width:25% !important; 
} 

#bearbeitungswertfeld.mittelfeld{ 
width:40% !important; 
} 

#bearbeitungswertfeld.zweidrittelfeld{ 
width:80% !important; 
} 

.grossfeld{ 
width:97.7%; 
} 

.weissfeld .ueberschrift{ 
margin:-1em 0px 0px 0px; 
padding:0px; 
font-size: 1.1em; 
font-weight: 600; 
} 

.checkboxumfeld .ueberschrift { 
margin: initial; 
font-weight: normal; 
} 

.innerfeld .ueberschrift{ 
margin:0px 0px 0px 0px; 
padding:0px; 
font-size: 1.1em; 
font-weight: 600; 
} 

.innerfeld .bearbeiten { 
left: 6em; 
width: 2em; 
} 

#name .bearbeiten{ 
left: 4em; 
} 

#eintritt .bearbeiten{ 
left: 4.7em; 
} 

#vorname .bearbeiten{ 
left: 5.9em; 
} 

#gebdatum .bearbeiten{ 
left: 6.5em; 
} 

#fachbereich .bearbeiten{ 
left: 11.2em; 
} 

.administration #fachbereich .bearbeiten { 
left: 9.8em; 
} 

#mail .bearbeiten{ 
left: 3em; 
} 

#instrument .bearbeiten{ 
left: 7em; 
} 

.neupersonenblock { 
justify-content: space-between; 
} 

.neupersonenblock.weissfeld .ueberschrift { 
margin: 0px 0px 0.5em 0px; 
padding: 0px; 
font-size: 1.1em; 
font-weight: normal; 
} 

.neupersonenblock .bearbeitungsarea { 
width: 460.8px !important; 
height: 3.2em; 
border-radius: 0.7em; 
} 

.neupersonenblock #checkboxfenster { 
display: flex; 
align-items: center; 
width: 80%; 
justify-content: space-evenly; 
} 

#neupersonenblockfachbereich { 
width: 51% !important; 
} 

.zusammenfassungsfenster { 
display: flex; 
position:relative; 
width:28% 
} 

.administration .bloecke0, .general .bloecke0{ 
width:72%; 
flex-wrap: wrap; 
} 

.personendaten{ 
font-style: italic; 
font-weight: 100; 
font-size: 1em; 
color: #000000; 
width:100%; 
margin-top: -1em; 
} 

.personendaten.veranstaltung { 
width: 70%; 
} 

.innerfeld .personendaten{ 
margin-top: initial; 
} 

.administration .bloecke0 .innerfeld .personendaten, .general .bloecke0 .innerfeld .personendaten{ 
margin-top: -1em; 
margin-bottom:0.5em; 
} 

.innerfeld.kleinfeld { 
width: 50% !important; 
} 

.administration .bloecke0 .innerfeld.kleinfeld, .general .bloecke0 .innerfeld.kleinfeld { 
flex-shrink: 0; 
width: 25% !important; 
} 

.administration .bloecke0 .innerfeld.mittelfeld, .general .bloecke0 .innerfeld.mittelfeld { 
width: 37.5% !important; 
top: 1em; 
} 

#fachbereich{ 
width: 25% !important; 
top: 1em; 
} 

#personenbild{ 
min-height: 139.68px; 
max-height: 139.68px; 
overflow: hidden; 
width:20% !important; 
border-radius:14.4px; 

} 

#datenpersonenbild { 
margin-top:-14.4px; 
margin-left:-10%; 
width:120%; 
} 


#datenpersonenbild img{ 
width:100%; 
} 

#bildwarntext { 
position: absolute; 
top: 0px; 
left: 1em; 
} 

.general #bloecke1 { 
width: 40% !important; 
justify-content: space-between; 
} 

.general #fachbereich { 
top: 0px; 
width: initial !important; 
} 

.general #bearbeitenfachbereich { 
left: 9.8em; 
top: -2.5em; 
} 

.general #pensum1, .general #pensum2 { 
width: initial !important; 
} 

.bearbeiten { 
position: absolute; 
right: -14.4px; 
top: -28.8px; 
width: 50.4px; 
} 

.lehrpersonenkarte .veranstaltung{ 
display:flex; 
justify-content: space-between; 
align-items: center; 
padding:0px 28.8px; 
margin:0px; 
} 

.lehrpersonenkarte .veranstaltung p { 
margin: 0px; 
} 

.lehrpersonenkarte .veranstaltung p:first-child { 
position:relative; 
width:576px; 
flex-shrink: 0; 
} 

.lehrpersonenkarte .veranstaltung p:last-child { 
position:relative; 
width: 8em; 
flex-shrink: 0; 
text-align:right; 
} 

#anlassbearbeiten { 
width: 1.5em; 
} 

.triggerfueller { 
border-radius: 70% 40% 70% 40%; 
margin: auto; 
} 

.titellabel { 
flex-shrink: initial; 
justify-content: center; 
} 

#unentschuldigttitel { 
border-right: none 0px; 
} 

#feldertitel { 
position: sticky; 
top: 0px; 
border-top: solid 1px; 
border-left: solid 1px; 
border-right: solid 1px; 
border-radius: 28.8px 28.8px 0px 0px; 
background-color: #ffffff; 
z-index:2; 
width: calc(100% - 2px); 
} 

.svg.teilnehmerfrei { 
width: 85%; 
} 

/*menu*/ 

#listenbildli{ 
-webkit-transform: scale(1,1); 
-ms-transform: scale(1,1); 
-moz-transform: scale(1,1); 
-o-transform: scale(1,1); 
transform: scale(1,1); 
position: relative; 
height: 100%; 
width: 100%; 
top: 0px; 
} 

#hamburger{ 
position: absolute; 
top: 28.8px; 
left: 1216.8px; 
width: 57.6px; 
height: 57.6px; 
} 

.listenstrichli{ 
position: absolute; 
border-radius:14.4px; 
width: 100%; 
height: 12%; 
background: #E22006; 
border: 1.44px solid #000000; 
border-radius: 30px; 
} 

#listenstrichli1{ 
top:0px; 
transition:transform 0.5s; 
} 
#listenstrichli2{ 
top:44%; 
transition:transform 1s; 
} 
#listenstrichli3{ 
top:88%; 
transition:transform 0.5s; 
} 

.obergerotiert { 
-webkit-transform: rotate(45deg) translate(19.44px,24.48px) scale(1,1); 
-moz-transform: rotate(45deg) translate(19.44px,24.48px) scale(1,1); 
-ms-transform: rotate(45deg) translate(19.44px,24.48px) scale(1,1); 
-o-transform: rotate(45deg) translate(19.44px,24.48px) scale(1,1); 
transform: rotate(45deg) translate(19.44px,24.48px) scale(1,1); 
border-color:#E22006; 
} 

.untergerotiert { 
-webkit-transform: rotate(-45deg) translate(12.96px,-15.84px) scale(1,1); 
-moz-transform: rotate(-45deg) translate(12.96px,-15.84px) scale(1,1); 
-ms-transform: rotate(-45deg) translate(12.96px,-15.84px) scale(1,1); 
-o-transform: rotate(-45deg) translate(12.96px,-15.84px) scale(1,1); 
transform: rotate(-45deg) translate(12.96px,-15.84px) scale(1,1); 
border-color:#E22006; 
} 

.geunrotiert{ 
-webkit-transform:rotate(0deg) translateY(0vh) scale(1,1); 
-moz-transform:rotate(0deg) translateY(0vh) scale(1,1); 
-ms-transform:rotate(0deg) translateY(0vh) scale(1,1); 
-O-transform:rotate(05deg) translateY(0vh) scale(1,1); 
transform:rotate(0deg) translateY(0vh) scale(1,1); 
} 



#menu { 
position: fixed; 
-webkit-transform: scale(1,0); 
-ms-transform: scale(1,0); 
-moz-transform: scale(1,0); 
-o-transform: scale(1,0); 
transform: scale(1,0); 
-webkit-user-select: none; 
top: var(--headerhoehe); 
transform-origin: top; 
width: 100%; 
padding: 0px; 
background-color: rgba(207,238,255,1); 
overflow-x: hidden; 
overflow-y: scroll; 
-webkit-overflow-scrolling: touch; 
transition: transform 1s; 
} 


#menukasten { 
margin: 0px 0px 0px 0px; 
width: calc(1238.4px - 5.76px); 
position: relative; 
display: flex; 
margin-top: 0px; 
left: calc((100vw - 1310.4px) / 2);
display: flex; 
align-items: center; 
justify-content: space-between; 
height: 57.6px; 
padding: 0px 28.8px; 
background-color: #ffffff; 
border: 2.88px solid #322C2B; 
} 

.geoeffnet { 
transform: rotate(90deg); 
left: 432px; 
top:2vh; 
} 

.popups { 
background-color: initial; 
position: absolute; 
left: 604.8px; 
transform-origin: top; 
clear: both; 
top: 0px; 
z-index: 1000; 
} 

.popups a { 
position: relative; 
float: right; 
width: 504px; 
margin-top: -16vh; 
left: 72px; 
} 

.popup { 
position: relative; 
display: block; 
left: 0px; 
top: 5.3vh; 
margin-bottom: 28.8px; 
font-size: 6.5vh; 
font-weight: normal; 
color: var(--blaumenuschrift); 
transform-origin: left; 
font-family: Roboto-Light; 
} 

.hauptitem { 
display: flex; 
align-items: center; 
justify-content: space-between; 
flex-direction: row-reverse; 
} 

.hauptitem a { 
text-decoration: none; 
color: #000000; 
} 

.hauptitem a:hover { 
text-decoration: none; 
background: #ffffff; 
} 

.hauptitem .icon { 
margin-left: 0.5em; 
width: 1em; 
transform: rotate(180deg); 
height: 1em; 
} 

.navicontainers.aktiv a { 
color: #A3C5E4; 
} 

.hauptitem a:hover { 
color: #DE060C; 
} 

.icon.aktiv .pfeilstil { 
fill: #ffffff; 
} 

/*bearbeitung*/ 

#bearbeitungslayer{ 
position: fixed; 
width: 1440px; 
height: 100vh; 
background: rgba(4,78,119,0.5); 
top: 0px; 
left: 0px; 
z-index: 130; 
} 

#bearbeitungsfenster { 
top: 5vh; 
left: 144px; 
height: 90vh; 
width: 1152px; 
background: #ffffff; 
position: absolute; 
display: flex; 
flex-direction: column; 
justify-content: flex-start; 
align-items: center; 
border: 2px solid #C1B9B9; 
border-radius: 28.8px; 
} 

#bearbeitungswertfeld { 
display: flex; 
flex-direction: column; 
justify-content: flex-start; 
align-items: center; 
} 

#bearbeitungueberschrift { 
margin-bottom: 28.8px; 
margin-top: 28.8px; 
} 

#bearbeitung, .eingabefeld{ 
appearance: none !important; 
-webkit-appearance:none !important; 
position: relative; 
width: 80%; 
height:4em; 
box-sizing:border-box; 
overflow:auto; 
border: 2px solid #CF0A0A; 
border-radius: 28.8px; 
font-size:17.28px; 
padding:14.4px; 
max-height: 720px !important; 
} 

.eingabefeld{ 
width:95% !important; 
} 

.neucheckboxen .ueberschrift{ 
width: 25%; 
position: relative; 
margin: initial !important; 
padding-right: 0.2em !important; 
text-align: right; 
} 

.neupersonenblock #ueberschriftinstrument { 
width: 20%; 
} 

.kleiner { 
font-size: 0.6em; 
} 

#fachbereichanzeigen { 
display: flex; 
align-items: center; 
} 

#ueberschriftanzeigecheckbox { 
font-size: 1em; 
margin: 0px; 
padding: 0.2em 0px 0px 0px; 
} 

.neucheckboxen .checkbox, #anzeigcheckbox { 
display: block; 
width: 1.5em; 
height: 1.5em; 
border: solid 0.13em #CF0A0A; 
border-radius: 0.3em; 
margin-right:1em; 
} 

#anzeigcheckbox { 
width: 1em; 
height: 1em; 
margin-right: 0.5em; 
background-color: #ffffff; 
position:relative; 
} 

#innercheckboxfachbereichanzeigen { 
width: 110%; 
height: 110%; 
top: -5%; 
} 

#bearbeitungsbuttons { 
width: 35%; 
display: flex; 
justify-content: space-between; 
margin-top: 43.2px; 
} 

#logo2 { 
position: absolute; 
bottom: 28.8px; 
left: 36%; 
} 

#teilnehmendentabelle { 
background-color: white; 
overflow: hidden; 
border-radius: 0px 0px 28.8px 28.8px; 
border: solid 1px; 
display: block; 
width: calc(100% - 2px); 
} 



#dokulink { 
display: flex; 
flex-direction: column; 
margin-top: initial; 
} 

.dokumentenzeile { 
display: flex; 
position: relative; 
margin-bottom: 7.2px; 
} 

#dokubutton { 
margin-top: 1em; 
} 

.dokumentenlink.dokument { 
text-decoration: none; 
color: initial; 
width:fit-content; 
} 

.docuicon{ 
display:flex; 
margin: 0px 1em; 
width:1em; 
} 

.docuicon img{ 
width:100%; 
} 

.darauf{ 
background-color:#dddddd !important; 
} 

#dokuinput{ 
display:none; 
} 

.downloadbutton { 
position: relative; 
margin-left: 1em; 
top: 0px; 
cursor: pointer; 
width: 1em; 
} 

.veranstaltung #veranstaltungen { 
display: flex; 
flex-direction: column; 
align-items: center; 
justify-content: center; 
position: relative; 
top:0.5em; 
} 

.neuveranstaltung #veranstaltungen { 
top: 0px; 
} 

#veranstaltungsdatum { 
margin-top: 0.5em; 
font-size: 0.8em; 
} 

#neuanlasscontainer { 
display: flex; 
flex-wrap: wrap; 
justify-content: space-between; 
} 

.neuanlassblock, .neupersonenblock { 
width: 46% !important; 
display: flex; 
align-items: center; 
padding: 1.1em; 
} 

#neupersonbutton { 
align-self: center; 
} 

.neuanlassblock h2 { 
margin: 0px !important; 
font-weight: normal !important; 
} 

.neuanlassblock textarea { 
width: 95% !important; 
border-radius: 0.7em; 
border: 0.18em solid #CF0A0A; 
margin-left: -1em; 
height: 3.5em; 
} 

#checkboxen { 
display: flex; 
flex-wrap: wrap; 
} 

.checkboxumfeld { 
display: flex; 
align-items: center; 
width: 30%; 
flex-shrink: 0; 
margin: 1em 1em; 
} 

.fakecheckbox { 
position: relative; 
width: 2.5em; 
height: 2.5em; 
border: solid 0.2em #E22006; 
margin-right: 1em; 
flex-shrink: 0; 
box-sizing: border-box; 
border-radius:0.5em; 
} 

.fakecheckbox .checkboxinhalt, .innerhaken { 
width: 120%; 
height: 120%; 
z-index: 10; 
position: absolute; 
top: -0.3em; 
} 

.fakecheckbox.gewaehlt .checkboxinhalt, .checked .innerhaken { 
background-image:url('../icons/gutkrummgut.svg'); 
background-repeat:no-repeat; 
} 

/*Lehrpersonenzugang*/ 

.lehrpersonenzugang #personendaten { 
position: relative; 
min-height: 115.2px; 
margin: -14.4px 0px -14.4px 1em; 
display: flex; 
align-items: center; 
} 

#personendaten .ueberschrift { 
margin: 0px 0px 0px 1em; 
} 

.lehrpersonenzugang #lpliste { 
background: #A3C5E4; 
border: 1px solid #050100; 
border-radius: 8.64px; 
display: flex; 
width: 360px; 
height: 43.2px; 
align-items: center; 
justify-content: center; 
margin-right: 2em !important; 
} 

.lehrpersonenzugang #jahre { 
display: flex; 
flex-direction: column; 
width: 57.6px; 
justify-content: center; 
align-items: center; 
height: 100.8px; 
border: 1px solid #050100; 
border-radius: 8.64px; 
margin: 0.5em; 
} 

.lehrpersonenzugang #instrumentenblock { 
display: flex; 
margin: -14.4px 28.8px 0px 2em; 
width: 345.6px; 
justify-content: space-evenly; 
flex-direction: column; 
} 

.lehrpersonenzugang .fachbereichsleitungen { 
margin-top: -14.4px; 
} 

.lehrpersonenzugang #logo { 
left: -2em; 
position: relative; 
top: 0px; 
} 

.lehrpersonenzugang .personendaten { 
font-style: italic; 
font-weight: 100; 
font-size: 1em; 
color: #000000; 
width: 100%; 
margin-top: -1.5em; 
white-space: normal; 
min-height:1em; 
position:relative; 
display:inline-block; 
} 

.lehrpersonenzugang #personendaten .ueberschrift { 
margin: 0px 1em 0px 1em; 
} 

.lehrpersonenzugang .leerfeld .personendaten{ 
margin-top: -2.5em; 
} 

.lehrpersonenzugang .zusammenfassungsfenster { 
display: flex; 
justify-content:space-between; 
position: relative; 
width: 98%; 
} 

.lehrpersonenzugang .innerfeld .personendaten{ 
margin-top: 0.7em; 
margin-bottom:1em; 
} 

.rechts .ueberschrift { 
text-align: right; 
} 

.rechts { 
margin-left: 1em; 
} 

.rechts .personendaten { 
text-align: right; 
} 

.rechts .personendaten:focus { 
text-align: initial; 
} 

.lehrpersonenzugang .leerfeld h2 { 
margin-bottom: -1.5em; 
} 

.lehrpersonenzugang .innerfeld.leerfeld h2{ 
margin-bottom:initial; 
} 

#footer{ 
position:relative; 
margin:2em 0px; 
display:flex; 
flex-wrap:wrap; 
width:99%; 
} 

.rahmenbalken{ 
position: relative; 
width:100%; 
height:0.8em; 
display:flex; 
flex-shrink:0; 
} 

.rahmenteil{ 
position: relative; 
width:20%; 
flex-shrink:0; 
height:100%; 
} 

#footerinhalt{ 
position:relative; 
display:flex; 
width:100%; 
background-color:#ffffff; 
min-height:144px; 
align-items: center; 
} 

#footeradressse { 
display: flex; 
align-items: flex-end; 
justify-content: space-evenly; 
width: 100%; 
margin-bottom: 1em; 
} 

.textblockpre { 
white-space: pre-wrap; 
} 

#servicenavi li:hover { 
font-size: 1.1em; 
} 

#quicklinks .ueberschrift { 
margin-left: 1em; 
} 

#quicklinks { 
display: flex; 
position: relative; 
left: 72px; 
} 

/*Pensentool*/ 

#toolueberschrift { 
width: 70%; 
position: relative; 
font-size: 2em; 
padding: 43.2px 0px; 
text-align: center; 
} 

/*Mailtool*/ 

.mailtool #personendaten { 
margin: initial; 
min-height: initial; 
position: relative; 
margin-left: 2em; 
margin-right: 0.5em; 
} 

.zusatzpersonen { 
margin-left: 1em !important; 
} 

.mailtool #instrumentenblock { 
margin: initial; 
align-items: center; 
position: relative; 
margin-left: 43.2px; 
width: initial; 
} 

.mailtool .fachbereichsleitungen { 
margin: initial; 
font-size: 1.1em; 
white-space: pre-wrap; 
} 

.mailtool #jahre { 
margin: 0.7em 0px; 
} 

.mailtool #logo { 
left: 792px; 
} 


.mailtool #hamburger { 
left: 1180.8px; 
top: 36px; 
} 

.editierbar { 
width: 100% !important; 
background-color: #ffffff; 
} 

#eingabe1{ 
margin-bottom:0.5em; 
} 

#eingabe2{ 
margin-top:0.5em; 
} 

.mailtext .eingabefeld { 
border: none; 
border-radius: initial; 
padding: 0px; 
outline:none; 
} 

.mce-edit-focus{ 
border: 0.1em solid #e3e3e3 !important; 
border-radius:0.5em; 
} 

#zwischenfeld p:first-of-type{ 
padding-top:0px; 
margin-top:0px; 
} 

#zwischenfeld p:last-of-type{ 
padding-bottom:0px; 
margin-bottom:0px; 
} 

.maileditor #personenfelder { 
width: 99.8%; 
display: flex; 
flex-wrap: wrap; 
justify-content: initial; 
position: relative; 
align-items: stretch; 
} 

#mailempfangende { 
margin: 28.8px 0px 0px 28.8px; 
} 

#diesemcetoolbar { 
position:relative; 
margin-bottom:1em; 
min-height:175px; 
border-bottom:solid 1px lightgray; 
} 

#diesemcetoolbar h2 { 
font-family: "Musikschule"; 
} 

#mailtextmailtext { 
position: absolute; 
top: 130px; 
} 

#mailempfaengerueberschrift { 
font-weight: normal; 
text-align: right; 
margin-top: 0px; 
} 

#zwischenfeld { 
padding: 0px; 
position: relative; 
width: 100% !important; 
} 

#mailbetreff { 
-webkit-appearance: none; 
-moz-apperance: none; 
appearance: none; 
font-size: 1em; 
font-family: "Musikschule"; 
width: 89%; 
position: relative; 
height: 1em; 
border: none 0px; 
margin-left: 1em; 
} 

label.mailbetreff { 
font-size: 1em; 
font-family: "Musikschule"; 
top: -0.2em; 
position: relative; 
} 

#mailtextblock div { 
font-family: 'Arial',sans-serif; 
font-size: 10pt; 
} 

#rundumfeld { 
padding: 0.5em; 
border: 0.2em solid #CF0A0A; 
border-radius: 0.5em; 
background-color: rgba(230,230,230,0.5); 
} 

#zwischenfeld:hover .dummmyfenster{ 
transform:scale(1,1); 
} 

.dummmyfenster { 
position: absolute; 
height: calc(100% - 0.4em - 2px); 
background-color: rgba(255,255,255,0.8); 
border: solid 1px #050100; 
width: calc(100% - 0.4em - 2px); 
top: calc(0.2em - 1px); 
left: calc(0.2em - 1px); 
font-size:2em !important; 
transform:scale(0,0); 
border-radius:0.2em; 
transition: transform 0.5s; 
display: flex; 
justify-content: center; 
align-items: center; 
} 

#erhaltendenamen { 
display: none; 
} 

@keyframes drehen{ 
from { 
transform: rotate(0deg); 
} 
to { 
transform: rotate(360deg); 
} 
} 

#spiderhintergrund{ 
position: fixed; 
width: 1440px; 
height: 100vh; 
background: rgba(4,78,119,0.5); 
top: 0px; 
left: 0px; 
z-index: 130; 
display:flex; 
} 

.drehung{ 
animation-duration: 3s; 
animation-name: drehen; 
animation-iteration-count: infinite; 
animation-timing-function: linear; 
} 

#zentrum{ 
position: relative; 
margin: auto; 
width: 288px; 
height: 288px; 
} 

#drehmaske{ 
position: absolute; 
top:0px; 
left:0px; 
margin: auto; 
width: 288px; 
height: 288px; 
background-color: white; 
border-radius: 144px; 
display: flex; 
overflow:hidden; 
} 

#drehmitte{ 
position: absolute; 
top:14.4px; 
left:14.4px; 
margin: auto; 
width: 259.2px; 
height: 259.2px; 
background-color: rgba(4,78,119,0.5);; 
border-radius: 129.6px; 
overflow:hidden; 
} 

#dreher{ 
position: relative; 
border-radius:50%; 
margin:auto; 
width:100%; 
height: 100%; 
background-image: conic-gradient(rgba(4,78,119,0.5),white); 
} 

#zusatzsendeboutton{ 
margin-top:1em; 
} 

/*loginfenster/index*/ 

#loginfenster { 
display: flex; 
flex-direction: column; 
height: 80vh; 
justify-content: space-around; 
position: relative; 
align-content: space-between; 
align-items: center; 
width: 864px; 
background-color: white; 
margin: auto; 
flex-shrink: 0; 
min-height:648px; 
border: solid 1.44px #C1B9B9; 
border-radius: 40.32px; 
} 

#logintitel .kleiner { 
font-weight:normal; 
} 

#offiziellnavigation { 
display: flex; 
align-items: center; 
justify-content: space-around; 
flex-direction: column; 
} 

#logolink { 
display: block; 
text-align: center; 
} 

#linklogo { 
width: 360px; 
} 

#offiziellink { 
margin-top:6%; 
display: flex; 
align-items:center; 
text-decoration: none; 
color: black; 
font-family: ; 
font-weight: normal; 
} 

#linktext { 
text-decoration: none; 
color: black; 
font-family: ; 
font-weight: normal; 
padding-right:1em; 
} 

#pfeilchen { 
height: 1.5em; 
width: 1.5em; 
} 

#logintable { 
/*margin-top: -6%;*/ 
} 

#passwortzurueck { 
position: relative; 
width: 60%; 
display: flex; 
align-items: center; 
flex-direction: column; 
} 

#oeigli { 
position: absolute; 
left: 77%; 
width: 3em; 
top: 0.25em; 
} 

#passwortlink{ 
text-align:center; 
} 

.index #offiziellnavigation a:first-of-type { 
margin-bottom: -2em; 
} 

#logoin { 
position: relative; 
height: 80%; 
} 

.formularfelder { 
display: flex; 
flex-direction: column; 
justify-items: center; 
width: 100%; 
margin: 1em auto; 
} 

.formularinputs { 
display: flex; 
flex-direction: column; 
align-items: center; 
margin: 1em auto; 
width: 100%; 
} 

#formularelemente { 
width: 288px; 
display: flex; 
flex-direction: column; 
align-items: center; 
justify-content: space-between; 
height: 80%; 
} 


#formularfeld1 #allesanzeigen { 
width: 3em; 
position: absolute; 
left: 82%; 
top: 3.5em; 
} 

.randbemerkung .ueberschrift { 
font-weight: 600; 
}