/* #### ../../../../system/css/font_anton.css #### */
@font-face {
    font-family: 'Anton';
    src: url('/system/fonts/Anton/Anton-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}



/* #### ../../../../system/css/font_saira.css #### */
/* ---- Normal: ---- */
@font-face {
	font-family: 'Saira';
	font-style: normal;
	font-weight: 100;
	src: local('Saira Thin'), local('Saira-Thin'), url(/system/fonts/Saira/Saira-Thin.woff2) format('woff2');
}
@font-face {
	font-family: 'Saira';
	font-style: italic;
	font-weight: 100;
	src: local('Saira Thin'), local('Saira-Thin'), url(/system/fonts/Saira/Saira-ThinItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 200;
  src: local('Saira ExtraLight'), local('Saira-ExtraLight'), url(/system/fonts/Saira/Saira-ExtraLight.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-style: italic;
  font-weight: 200;
  src: local('Saira ExtraLightItalic'), local('Saira-ExtraLightItalic'), url(/system/fonts/Saira/Saira-ExtraLightIalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 300;
  src: local('Saira Light'), local('Saira-Light'), url(/system/fonts/Saira/Saira-Light.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-style: italic;
  font-weight: 300;
  src: local('Saira LightItalic'), local('Saira-LightItalic'), url(/system/fonts/Saira/Saira-LightItalic.woff2) format('woff2');
}

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

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 500;
  src: local('Saira Medium'), local('Saira-Medium'), url(/system/fonts/Saira/Saira-Medium.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-style: italic;
  font-weight: 500;
  src: local('Saira MediumItalic'), local('Saira-MediumItalic'), url(/system/fonts/Saira/Saira-MediumItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 600;
  src: local('Saira SemiBold'), local('Saira-SemiBold'), url(/system/fonts/Saira/Saira-SemiBold.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-style: italic;
  font-weight: 600;
  src: local('Saira SemiBoldItalic'), local('Saira-SemiBoldItalic'), url(/system/fonts/Saira/Saira-SemiBoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 700;
  src: local('Saira Bold'), local('Saira-Bold'), url(/system/fonts/Saira/Saira-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-style: italic;
  font-weight: 700;
  src: local('Saira BoldItalic'), local('Saira-BoldItalic'), url(/system/fonts/Saira/Saira-BoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 800;
  src: local('Saira ExtraBold'), local('Saira-ExtraBold'), url(/system/fonts/Saira/Saira-ExtraBold.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-style: italic;
  font-weight: 800;
  src: local('Saira ExtraBoldItalic'), local('Saira-ExtraBoldItalic'), url(/system/fonts/Saira/Saira-ExtraBoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 900;
  src: local('Saira Black'), local('Saira-Black'), url(/system/fonts/Saira/Saira-Black.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 900;
  src: local('Saira BlackItalic'), local('Saira-BlackItalic'), url(/system/fonts/Saira/Saira-BlackItalic.woff2) format('woff2');
}
/* ENDE Normal: ---- */

/* ---- Semi Condensed: ---- */
@font-face {
	font-family: 'Saira Semi Condensed';
	font-style: normal;
	font-weight: 100;
	src: local('Saira SemiCondensed Thin'), local('SairaSemiCondensed-Thin'), url(/system/fonts/Saira/SairaSemiCondensed-Thin.woff2) format('woff2');
}
@font-face {
	font-family: 'Saira Semi Condensed';
	font-style: italic;
	font-weight: 100;
	src: local('Saira SemiCondensed Thin'), local('SairaSemiCondensed-Thin'), url(/system/fonts/Saira/SairaSemiCondensed-ThinItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 200;
  src: local('Saira SemiCondensed ExtraLight'), local('SairaSemiCondensed-ExtraLight'), url(/system/fonts/Saira/SairaSemiCondensed-ExtraLight.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: italic;
  font-weight: 200;
  src: local('Saira SemiCondensed ExtraLightItalic'), local('SairaSemiCondensed-ExtraLightItalic'), url(/system/fonts/Saira/SairaSemiCondensed-ExtraLightIalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Saira SemiCondensed Light'), local('SairaSemiCondensed-Light'), url(/system/fonts/Saira/SairaSemiCondensed-Light.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: italic;
  font-weight: 300;
  src: local('Saira SemiCondensed LightItalic'), local('SairaSemiCondensed-LightItalic'), url(/system/fonts/Saira/SairaSemiCondensed-LightItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Saira SemiCondensed Regular'), local('SairaSemiCondensed-Regular'), url(/system/fonts/Saira/SairaSemiCondensed-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: italic;
  font-weight: 400;
  src: local('Saira SemiCondensed Italic'), local('SairaSemiCondensed-Italic'), url(/system/fonts/Saira/SairaSemiCondensed-Italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 500;
  src: local('Saira SemiCondensed Medium'), local('SairaSemiCondensed-Medium'), url(/system/fonts/Saira/SairaSemiCondensed-Medium.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: italic;
  font-weight: 500;
  src: local('Saira SemiCondensed MediumItalic'), local('SairaSemiCondensed-MediumItalic'), url(/system/fonts/Saira/SairaSemiCondensed-MediumItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 600;
  src: local('Saira SemiCondensed SemiBold'), local('SairaSemiCondensed-SemiBold'), url(/system/fonts/Saira/SairaSemiCondensed-SemiBold.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: italic;
  font-weight: 600;
  src: local('Saira SemiCondensed SemiBoldItalic'), local('SairaSemiCondensed-SemiBoldItalic'), url(/system/fonts/Saira/SairaSemiCondensed-SemiBoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 700;
  src: local('Saira SemiCondensed Bold'), local('SairaSemiCondensed-Bold'), url(/system/fonts/Saira/SairaSemiCondensed-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: italic;
  font-weight: 700;
  src: local('Saira SemiCondensed BoldItalic'), local('SairaSemiCondensed-BoldItalic'), url(/system/fonts/Saira/SairaSemiCondensed-BoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 800;
  src: local('Saira SemiCondensed ExtraBold'), local('SairaSemiCondensed-ExtraBold'), url(/system/fonts/Saira/SairaSemiCondensed-ExtraBold.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: italic;
  font-weight: 800;
  src: local('Saira SemiCondensed ExtraBoldItalic'), local('SairaSemiCondensed-ExtraBoldItalic'), url(/system/fonts/Saira/SairaSemiCondensed-ExtraBoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 900;
  src: local('Saira SemiCondensed Black'), local('SairaSemiCondensed-Black'), url(/system/fonts/Saira/SairaSemiCondensed-Black.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 900;
  src: local('Saira SemiCondensed BlackItalic'), local('SairaSemiCondensed-BlackItalic'), url(/system/fonts/Saira/SairaSemiCondensed-BlackItalic.woff2) format('woff2');
}
/* ENDE Semi Condensed: ---- */

/* ---- Condensed: ---- */
@font-face {
	font-family: 'Saira Condensed';
	font-style: normal;
	font-weight: 100;
	src: local('Saira Condensed Thin'), local('SairaCondensed-Thin'), url(/system/fonts/Saira/SairaCondensed-Thin.woff2) format('woff2');
}
@font-face {
	font-family: 'Saira Condensed';
	font-style: italic;
	font-weight: 100;
	src: local('Saira Condensed Thin'), local('SairaCondensed-Thin'), url(/system/fonts/Saira/SairaCondensed-ThinItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 200;
  src: local('Saira Condensed ExtraLight'), local('SairaCondensed-ExtraLight'), url(/system/fonts/Saira/SairaCondensed-ExtraLight.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: italic;
  font-weight: 200;
  src: local('Saira Condensed ExtraLightItalic'), local('SairaCondensed-ExtraLightItalic'), url(/system/fonts/Saira/SairaCondensed-ExtraLightIalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Saira Condensed Light'), local('SairaCondensed-Light'), url(/system/fonts/Saira/SairaCondensed-Light.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: italic;
  font-weight: 300;
  src: local('Saira Condensed LightItalic'), local('SairaCondensed-LightItalic'), url(/system/fonts/Saira/SairaCondensed-LightItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Saira Condensed Regular'), local('SairaCondensed-Regular'), url(/system/fonts/Saira/SairaCondensed-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: italic;
  font-weight: 400;
  src: local('Saira Condensed Italic'), local('SairaCondensed-Italic'), url(/system/fonts/Saira/SairaCondensed-Italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 500;
  src: local('Saira Condensed Medium'), local('SairaCondensed-Medium'), url(/system/fonts/Saira/SairaCondensed-Medium.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: italic;
  font-weight: 500;
  src: local('Saira Condensed MediumItalic'), local('SairaCondensed-MediumItalic'), url(/system/fonts/Saira/SairaCondensed-MediumItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  src: local('Saira Condensed SemiBold'), local('SairaCondensed-SemiBold'), url(/system/fonts/Saira/SairaCondensed-SemiBold.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: italic;
  font-weight: 600;
  src: local('Saira Condensed SemiBoldItalic'), local('SairaCondensed-SemiBoldItalic'), url(/system/fonts/Saira/SairaCondensed-SemiBoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  src: local('Saira Condensed Bold'), local('SairaCondensed-Bold'), url(/system/fonts/Saira/SairaCondensed-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: italic;
  font-weight: 700;
  src: local('Saira Condensed BoldItalic'), local('SairaCondensed-BoldItalic'), url(/system/fonts/Saira/SairaCondensed-BoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 800;
  src: local('Saira Condensed ExtraBold'), local('SairaCondensed-ExtraBold'), url(/system/fonts/Saira/SairaCondensed-ExtraBold.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: italic;
  font-weight: 800;
  src: local('Saira Condensed ExtraBoldItalic'), local('SairaCondensed-ExtraBoldItalic'), url(/system/fonts/Saira/SairaCondensed-ExtraBoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 900;
  src: local('Saira Condensed Black'), local('SairaCondensed-Black'), url(/system/fonts/Saira/SairaCondensed-Black.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 900;
  src: local('Saira Condensed BlackItalic'), local('SairaCondensed-BlackItalic'), url(/system/fonts/Saira/SairaCondensed-BlackItalic.woff2) format('woff2');
}
/* ENDE Condensed: ---- */

/* ---- Extra Condensed: ---- */
@font-face {
	font-family: 'Saira Extra Condensed';
	font-style: normal;
	font-weight: 100;
	src: local('Saira ExtraCondensed Thin'), local('SairaExtraCondensed-Thin'), url(/system/fonts/Saira/SairaExtraCondensed-Thin.woff2) format('woff2');
}
@font-face {
	font-family: 'Saira Extra Condensed';
	font-style: italic;
	font-weight: 100;
	src: local('Saira ExtraCondensed Thin'), local('SairaExtraCondensed-Thin'), url(/system/fonts/Saira/SairaExtraCondensed-ThinItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 200;
  src: local('Saira ExtraCondensed ExtraLight'), local('SairaExtraCondensed-ExtraLight'), url(/system/fonts/Saira/SairaExtraCondensed-ExtraLight.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: italic;
  font-weight: 200;
  src: local('Saira ExtraCondensed ExtraLightItalic'), local('SairaExtraCondensed-ExtraLightItalic'), url(/system/fonts/Saira/SairaExtraCondensed-ExtraLightIalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Saira ExtraCondensed Light'), local('SairaExtraCondensed-Light'), url(/system/fonts/Saira/SairaExtraCondensed-Light.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: italic;
  font-weight: 300;
  src: local('Saira ExtraCondensed LightItalic'), local('SairaExtraCondensed-LightItalic'), url(/system/fonts/Saira/SairaExtraCondensed-LightItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Saira ExtraCondensed Regular'), local('SairaExtraCondensed-Regular'), url(/system/fonts/Saira/SairaExtraCondensed-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: italic;
  font-weight: 400;
  src: local('Saira ExtraCondensed Italic'), local('SairaExtraCondensed-Italic'), url(/system/fonts/Saira/SairaExtraCondensed-Italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 500;
  src: local('Saira ExtraCondensed Medium'), local('SairaExtraCondensed-Medium'), url(/system/fonts/Saira/SairaExtraCondensed-Medium.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: italic;
  font-weight: 500;
  src: local('Saira ExtraCondensed MediumItalic'), local('SairaExtraCondensed-MediumItalic'), url(/system/fonts/Saira/SairaExtraCondensed-MediumItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 600;
  src: local('Saira ExtraCondensed SemiBold'), local('SairaExtraCondensed-SemiBold'), url(/system/fonts/Saira/SairaExtraCondensed-SemiBold.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: italic;
  font-weight: 600;
  src: local('Saira ExtraCondensed SemiBoldItalic'), local('SairaExtraCondensed-SemiBoldItalic'), url(/system/fonts/Saira/SairaExtraCondensed-SemiBoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 700;
  src: local('Saira ExtraCondensed Bold'), local('SairaExtraCondensed-Bold'), url(/system/fonts/Saira/SairaExtraCondensed-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: italic;
  font-weight: 700;
  src: local('Saira ExtraCondensed BoldItalic'), local('SairaExtraCondensed-BoldItalic'), url(/system/fonts/Saira/SairaExtraCondensed-BoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 800;
  src: local('Saira ExtraCondensed ExtraBold'), local('SairaExtraCondensed-ExtraBold'), url(/system/fonts/Saira/SairaExtraCondensed-ExtraBold.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: italic;
  font-weight: 800;
  src: local('Saira ExtraCondensed ExtraBoldItalic'), local('SairaExtraCondensed-ExtraBoldItalic'), url(/system/fonts/Saira/SairaExtraCondensed-ExtraBoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 900;
  src: local('Saira ExtraCondensed Black'), local('SairaExtraCondensed-Black'), url(/system/fonts/Saira/SairaExtraCondensed-Black.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 900;
  src: local('Saira ExtraCondensed BlackItalic'), local('SairaExtraCondensed-BlackItalic'), url(/system/fonts/Saira/SairaExtraCondensed-BlackItalic.woff2) format('woff2');
}
/* ENDE Extra Condensed: ---- */



/* #### ../../../../system/includes/js/charts.js/2.9.2/Chart.min.css #### */
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}


/* #### ../../../../frontend/css/fo_messenger.css #### */
.fo_messenger {
	height:100%;
    display:grid;
    grid-template-rows:minmax(2em,max-content) 1fr minmax(4em,max-content);
    grid-template-columns:15em 1fr;
    grid-template-areas:
        "msg_nav msg_receiver"
        "msg_receiverlist msg_messages"
        "msg_receiverlist msg_message"
	;
	
	--col0:var(--col_main0);
	--col1:var(--col_main1);
	
	--col0:#ddd;
	--col2:hsl(120,100%,35%);
}

.fo_messenger > * {
    padding:0.5em;
}
.fo_messenger nav,
.fo_messenger #FO_Receiver {
    background-color:#eee;
    border-bottom:1px solid #ccc;
}
.fo_messenger .fo_receiver {
    background-color:#f3f3f3;
}
.fo_messenger .fo_message {
    border-top:1px solid #ccc;
}

.fo_messenger > #FO_Nav0 {
    grid-area:msg_nav;
}
.fo_messenger > #FO_Receiver {
    grid-area:msg_receiver;
}
.fo_messenger > #FO_Receiver_list {
    grid-area:msg_receiverlist;
	overflow:auto;
}
.fo_messenger > #FO_Messages {
    grid-area:msg_messages;
	overflow:auto;
}
.fo_messenger > .fo_message {
    grid-area:msg_message;
}
.fo_message textarea {
    min-height:3.5em;
}
.fo_messenger fieldset {
	margin-top:0px;
}

.fo_receiver,
.fo_receiver li {
    margin:0px;
	
    padding:0px;
	border-bottom:1px solid white;
}
.fo_receiver li {
	cursor:pointer;
}
.fo_receiver li,
#FO_Receiver {
    display:flex;
    flex-wrap:nowrap;
    justify-content: flex-start;
    align-content:stretch;
    align-items:center;
    padding:0.2em 0.5em;
	line-height:1.2em;
    font-size:0.8em;
}
.fo_receiver .icon {
	box-sizing:content-box;
    border-radius:50%;
    width:1.5em;
    height:1.5em;
    background-color:#ccc;
    text-align:center;
    align-self:center;
    font-size:0.8em;
    padding:0.25em;
    /*line-height:1em;*/
    
    margin-right:1em;
	
	background-size:cover;
	background-position:center;
	
	flex-shrink:0;
}

.fo_receiver .cnt {
	font-size:80%;
	
	border-radius:50%;
	margin-left:auto;
	height:1em;
	width:1em;
	line-height:1em;
	text-align:center;
	padding:0.2em;
	background-color:var(--col2);
	color:white;
}

.fo_receiver .mgl {
    font-size:0.8em;
    margin-left:0.5em;
    color:#999;
}

.fo_messenger nav a {
    border-radius:0.5em;
    padding:0.5em;
    background-color:rgba(255,255,255,0.2);
    border:1px solid #ccc;
    transition:background-color 0.5s, color 0.2s;
}
.fo_messenger nav a:hover {
    background-color:var(--common-a-color-inverted);
    color:var(--common-a-color-hover);
    border-color:var(--common-a-color-inverted);
}
.fo_messenger nav .material-icons {
    vertical-align:text-bottom;
    margin-right:0.5em;
}
.fo_messenger nav input,
.fo_messenger nav button {
    display:inline-block;
    width:auto;
    margin:0px 0.5em;
}

.ldr img {
	width:2em;
	height:2em;
}

.fo_messenger .fo_message > div > :last-of-type {
	margin-left:0.5em;
}

.fo_messenger .fo_search {
    display:flex;
}
.fo_messenger .fo_search > * {
    margin:0px;
    margin-right:0.2em;
}
.fo_messenger .fo_search :last-child {
     margin-right:0px;
}

.fo_messenger .chatWith {
    color:#666;
    font-size:80%;
    margin-right:0.5em;
}

/* ---- Nachrichten: ---- */
.fo_messages ul,
.fo_messages li {
	margin:0px;
	padding:0px;
	display:block;
}
.fo_messages li {
	position:relative;
	width:70%;
	padding:0.5em 1em;
	border-radius:0.5em;
	background-color:var(--col1);
	margin-bottom:0.2em;
	line-height:1.2em;
}
.fo_messages li.self {
	background-color:var(--col0);
	margin-left:auto;
}
.fo_messages .sender {
	line-height:1em;
	font-size:90%;
	font-weight:bold;
	margin-bottom:0.2em;
}
.fo_messages .self .sender {
	display:none;
}
.fo_messages .datetime {
	line-height:1em;
	font-size:70%;
	text-align:right;
	margin-top:0.2em;
	color:#666;
}

.fo_messages .reactions_nav {
	display:flex;
	align-content:center;
	align-items:center;
	width:auto;
	position:absolute;
	right:0.2em;
	top:-0.5em;
	height:2em;
	z-index:1;
	background:none;
	border:none;
}
.fo_messages .reactions_nav > button {
	border:none;
	margin:0px;
	margin-left:0.5em;
	padding:0px;
	font-size:1rem;
	background:none;
	color:#666;
	align-self:center;
	cursor:pointer;
}
.fo_messages .reactions_nav ul,
.fo_messages .reactions_nav li {
	display:block;
	margin:0px;
	padding:0px;
}
.fo_messages .reactions_nav ul.vis {
	display:flex;
}
.fo_messages .reactions_nav ul {
	display:none;
	justify-content:flex-end;
	align-content:center;
	align-items:center;
	background-color:#ccc;
	padding:0.2em;
	border-radius:0.2em;
	box-shadow:0.5em 0.5em 0.5em grey;
}
.fo_messages .reactions_nav li {
	flex-grow:0;
	flex-shrink:1;
	padding:0.2em;
	background:none;
}
.fo_messages .reactions_nav li button {
	font-size:1em;
	border:none;
	border-radius:0.2em;
	margin:0px;
	padding:0.2em;
	background-color:rgba(255,255,255,0);
	transition:background-color 0.8s;
	cursor:pointer;
}
.fo_messages .reactions_nav li button:hover {
	background-color:rgba(255,255,255,0.2);
	box-shadow:0px 0px 0.5em grey;
}
.fo_messages .reactions_nav .hidden {
}

.fo_messages .reactions,
.fo_messages .reactions li {
	background:none;
	margin:0px;
	padding:0px;
}

.fo_messages .reactions {
	margin-left:auto;
	text-align:right;
	position:relative;
	display:block;
}
.fo_messages .reactions li {
	display:inline-block;
	width:auto;
	padding:0px;
	margin:0px;
	margin-left:0.5em;
}
.fo_messages .reactions .icon {
	text-align:center;
	font-size:0.6em;
	box-sizing:content-box;
	position:absolute;
	right:-0.5em;
	bottom:-0.5em;
	width:1em;
	height:1em;
	padding:0.0em;
	line-height:1em;
	border-radius:50%;
	background-color:rgba(255,255,255,0.5);
}

.fo_messages .self .reactions {
	margin-top:1em;
}

.fo_messages .reactions_nav .del {
	font-size:80%;
	color:#900;
	margin-right:0.5em;
}
.fo_messages li.deleted {
	border-radius:0px;
	background:none;
	font-style:italic;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
	padding:0.5em;
	text-align:center;
	margin-top:2em;
	margin-bottom:2em;
}
.fo_messages li.deleted .message {
	font-size:0.8rem;
}

.fo_messenger .files {
	display:flex;
	flex-wrap:wrap;
	justify-content: flex-start;
	align-content:center;
	align-items: center;
}
.fo_messenger .files li {
	padding:0.5em;
	width:10em;
	height:10em;
	text-align:center;
	box-sizing:border-box;
}
.fo_messenger .files .img {
	padding:0.1em;
}
.fo_messenger .files .img img {
	padding:0px;
	border-radius:0.5em;
	display:block;
	object-fit:cover;
	object-position: center;
    height:100%;
    width:100%;
}

.fo_messenger .files .material-icons {
	display:block;
	margin:0.5em auto;
	font-size:2em;
}
.fo_messenger .fo_message > div {
	display:flex;
}

/* ENDE Nachrichten: ---- */


/* ---- Drag & Drop: ---- */
.fo_messenger .fo_message .droparea {
    border:2px dashed rgba(0,0,0,0);
    transition:border-color 0.5s;
}
.fo_messenger .fo_message .droparea.dragover {
    border-color:var(--col0);
}
/* ENDE Drag & Drop: ---- */


/* #### RESPONSIVE #### */
@media screen and (max-width:48em) {
	.fo_messenger {
		max-height:calc(100vh - 6em);
		grid-template-rows:minmax(2em,max-content) minmax(0px,10em) minmax(2em,max-content) 1fr minmax(2em,max-content);
		grid-template-columns:100%;
		grid-template-areas:
			"msg_nav"
			"msg_receiverlist"
			"msg_receiver"
			"msg_messages"
			"msg_message"
		;
	}
	
	.fo_messenger #FO_Receiver_list,
	.fo_messenger #FO_Messages {
		overflow:auto;
	}
	
	.fo_messenger .fo_search {
		display:flex;
	}
	
	
	.fo_messenger #FO_Receiver {
		border-top:2px solid #ccc;
	}
}
/* ENDE RESPONSIVE #### */


/* #### ../../../../frontend/kunden/phspiele.syne.at/css/common.css #### */
/* CSS Document */
/* ---- globale Variablen: ---- */
:root {
	--color-base:hsl(203,49%,29%);
	--color-fit1:hsl(203,19%,32%);
	--color-fit2:hsl(203,19%,44%);
	--color-fit3:hsl(203,49%,19%);
	--color-fit4:hsl(203,49%,44%);
	--color-contrast1:hsl(35,69%,14%);
	--color-contrast2:hsl(35,49%,29%);
	
	--common-font-color:hsl(203,10%,10%);
	--common-font-color-bright:black;
	--common-font-color-lower:#666;
	--common-font-color-hover:#666;
	--common-font-color-inverted:#ccc;
	--common-headline-color1:hsl(203,49%,29%);
	--common-headline-color2:hsl(203,49%,19%);
	--common-headline-color-engraved:white;
	--common-headline-color-bright:white;
	
	--hg_content:#f0f0f0;
	--hg_content-lighter:white;
	--hg_content-dark:#111;
	--hg-content-dark2:black;
	--hg-image:none;
	--hg-nav:white;
	
	--hg_box1:hsla(0,0%,0%,0.8);
	--hg_box2:hsla(0,0%,0%,0.7);
	--font_box1:white;
	--font_box2:white;
	
	--common-status-color:#333;
	--common-info-color:#666;
	
	--common-border-color:#666;
	--common-border-color-bright:var(--common-font-color);
	--common-border-color-dark:var(--hg_content);
	--common-border-color-dark2:white;
	--common-shadow-color:grey;
	--common-a-color:var(--common-headline-color1);
	--common-a-color-hover:white;
	--common-a-color-inverted:white;
	--common-a-color-inverted-hover:var(--common-headline-color1);
	--common-a-color-dark:#666;
	--common-a-background:hsla(203,49%,29%,0.1);
	--common-a-background-hover:hsla(203,49%,29%,0.9);
	
	--common-delete-color:#900;
	--common-delete-color-hover:white;
	
	--common-chart-color:grey;
	--common-chart-color-hover:white;

	--common-add-color:steelblue;
	--common-add-color-hover:white;
	
	--common-ok-color:yellowgreen;
	--common-ok-color-hover:white;
	
	--common-edit-color:goldenrod;
	--common-edit-color-hover:white;
	
	--common-error-color:var(--common-delete-color);
	
	--common-active-color:var(--common-ok-color);
	--common-inactive-color:var(--common-delete-color);
}
/* ENDE globale Variablen: ---- */

html {
	height:100%;
	box-sizing:border-box;
	scrollbar-color:rgba(0,0,0,0.5) transparent;
	scrollbar-width:thin;
}

body {
 	box-sizing:border-box;
	font-size:1em;
    padding:0px;
    margin:0px;
	min-height:100%;
	width:100%;
	height:100vh;
	
	font-weight:normal;
    font-size:1em;
    line-height:1.5em;
    text-rendering:optimizelegibility;
	color:var(--common-font-color);
	background:none;
	background-color:var(--hg_content);
}
body, form * {
	font-family:"Ubuntu", "PT Sans", Verdana, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family:"Ubuntu Condensed", "PT Sans Narrow", Verdana, Arial, sans-serif;
	font-weight:normal;
	line-height:1em;
	margin-top:1em;
	margin-bottom:0.5em;
}
div>h1:first-child {
	margin-top:0em;
}
.ptop div>h1:first-child {
	margin-top:0px;
}
div>h2:first-child {
	margin-top:0px;
}
main h1 {
	font-size:2em;
	line-height:1.2em;
	font-weight:normal;
	text-align:left;
	text-transform:uppercase;
}
main h2 {
	font-size:1.5em;
	margin-bottom:0.5em;
	padding-bottom:0.1em;
	border-bottom:none;
}

h3, main h3 {
	font-size:1.1em;
}
h4 {
	font-size:1em;
}

p {
	margin-bottom:0.8em;
}


.table {
	display:table;
	table-layout:auto;
	border-collapse:collapse;
	width:100%;
}
.tr {
	display:table-row;
}
.td {
	display:table-cell;
	vertical-align:top;
}

.td p {
	margin-bottom:0px;
}

a.linkonly {
	margin:0px !important;
	padding:0px !important;
	text-transform:none;
	display:inline;
	height:auto !important;
	overflow:hidden !important;
	background:none !important;
	border-radius:0px;
	border:none !important;
}
a.linkonly *, a.linkonly .row, a.linkonly .col {
	text-transform:none;
}

a.linkonly .tr {
	width:100% !important;
}

a[id].anchor, a[name].anchor {
	font-size:0px;
}

a {
	padding:0.1em;
	padding-left:0.2em;
	padding-right:0.2em;
	border-radius:5px;
	text-decoration:none;
	color:var(--common-a-color);
	line-height:1.2em;
}
main a {
	background-color:var(--common-a-background);
	color:var(--common-a-color);
}
a:hover {
	border-radius:5px;
	background-color:var(--common-a-background-hover);
	color:var(--common-a-color-hover);
}

a:has(>img) {
	background:none;
	padding:0px;
	border-radius:0px;
}

:active, :focus {
	-webkit-tap-highlight-color: transparent;
	outline:none;
}


dl dt {
	font-weight:bold;
}
dl dd, ul li {
	margin-left:2em;
}

dl, ul, ol {
	margin-bottom:0.8em;
}

main ul, main ul li {
	list-style-type:disc;
}

.bbottom {
	border:1px solid #eee;
	margin-bottom:1em;
	padding-bottom:1em;
}

.smaller {
	font-size:80%;
	line-height:1.2em;
}
.ptop {
	padding-top:2em !important;
}
.pbottom {
	padding-bottom:2em !important;
}

.row {
	margin:auto;
	box-sizing:border-box;
	width:auto;
}

main .row {
	padding-top:2em;
	padding-bottom:2em;
}
main .row.nopadding {
	padding-top:0px;
	padding-bottom:0px;
}
.row.mtop_1em, .mtop_1em {
	margin-top:1em;
}
.row.mbottom_1em, .mbottom_1em {
	margin-bottom:1em;
}
.row.mtop_2em, .mtop_2em {
	margin-top:2em;
}
.row.mbottom_2em, .mbottom_2em {
	margin-bottom:1em;
}

.btop {
	border-top:2px solid var(--common-border-color);
}



.fullwidth, .fullwidth .container, .fullwidth .container .row {
	width:auto;
}

iframe.fullwidth {
	width:100%;
	padding:0.5em;
	border:1px solid var(--common-border-color);
	height:20em;
}

.halfheight {
	position:relative;
	min-height:50vh;	
}

.fullheight {
	position:relative;
	min-height:100vh;
}
.doubleheight {
	position:relative;
	min-height:200vh;
}

small {
	font-size:80%;
}

.az1 {
	text-transform:uppercase;
	font-weight:bold;
}

ul.inline {
	display:inline;
	list-style-type:none;
	margin:0px;
	padding:0px;
}
ul.inline li {
	display:inline;
	margin:0px;
	padding:0px;
	margin-right:0.5em;
}


.vis0 {
	visibility:hidden;
}
.vis1 {
	visibility:visible;
}

.shadowed {
    -webkit-filter: drop-shadow(0.1em 0.1em 0.2em #000);
    filter: drop-shadow(0.1em 0.1em 0.2em #000);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#000')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

.centered {
	margin:auto;
	display:block;
}

.flexbox {
	display:flex;
	flex-wrap:nowrap;
	justify-content:space-around;
}
.flexelem {
	flex-grow:1;
	flex-shrink:1;
}

.flexcenter {
	justify-content:center;
	align-items:center;
}

.flexbox_all {
	display:flex;
	justify-content:flex-start;
	align-items:center;
	align-content:flex-start;
}
.flexbox_all>* {
	flex-grow:1;
	align-self:flex-start;
}
.flexbox_all>:last-of-type {
	flex-basis:auto;
	flex-shrink:1;
	width:auto;
}

.grid {
	margin:0px;
	padding:0px;
	display:grid;
}

.grid>* {
	padding:0px;
	margin:0px;
}
.grid>*:first-child {
	/*
	padding-top:2rem;
	*/
	align-self:center;
	box-sizing:border-box;
	oveflow:auto;
}

hr.hrspacer {
	border:none;
	border-top:2px solid var(--common-border-color);
	margin-top:1em;
	margin-bottom:1em;
	width:100%;
}

.alignR {
	text-align:right;
}

.td button, .td input[type=button], .td input[type=checkbox] {
	display:inline !important;
	width:auto;
}

video {
	display:block;
	margin:auto;
}
.videocontainer {
	padding:0.5em;
	margin-top:0.5em;
	background-color:var(--hg-content-dark);
	border-top:2px solid var(--common-border-color);
}

.teaser {
	font-size:1.1em;
	font-weight:bold;
}
.adminonly {
	outline:none !important;
}



.infomessage {
	position:fixed;
	width:90%;
	min-height:8rem;
	left:5%;
	top:50%;
	margin-top:-4rem;
	z-index:10;
	background-color:var(--hg-content-dark2);
	border-radius:0.5em;
	padding:1em !important;
	box-sizing:border-box;
	box-shadow:0px 0px 3em black;
	overflow:visible;
}

.material-symbols,
.material-icons,
.material-symbols-outlined {
	cursor:default;
}


/* #### ../../../../frontend/kunden/phspiele.syne.at/css/content.css #### */
@charset "UTF-8";
.heading2 {
	font-size:2em;
	font-family:"Anton";
}

.heading {
	margin-top:1em;
}

.overlay {
	position:fixed;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	z-index:1000;
	
	/*
	background-image:url(../images/hg_Titelbild.jpg);
	*/
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

ul.lightbox {
	margin:0px;
	padding:0px;
	list-style-type:none;
}

ul.lightbox li {
	display:inline;
	margin:1px;
}

ul.lightbox li img {
	padding:1px;
	margin:3px;
	box-shadow:0px 0px 3px #666;
}

.status {
	font-style:italic;
	color:var(--common-status-color);
}

.pos_fixed {
	position:fixed;
	left:100%;
	width:100%;
	
	/*
	min-height:100%;
	max-height:auto;
	*/
	
	height:100vh;
	overflow:auto;
	
	top:0px;
	z-index:10;
	box-sizing:border-box;
	padding:0.5em !important;
	padding-top:5rem !important;
	
	background-color:var(--hg_content);
	color:var(--common-font-color);
}


/* ---- Header: ---- */
#H1 h1 {
	margin-top:0px;
	margin-bottom:0px;
	line-height:1em;
}
#H1 h1 img {
	height:1em;
	margin-left:0.5em;
	display:inline-block;
	box-sizing:border-box;
	display:none;
}
#H1 .btnReload {
	position:absolute;
	left:0px;
	top:0px;
	width:3em;
	height:100%;
	z-Index:1;
	
	border:none !important;
	background:none !important;
	padding-left:0px;
	padding-right:0px;
	padding-top:0px;
	padding-bottom:0px;
	margin:0px;
	margin-right:0px;
	border-radius:none;
}
#H1 .subline {
	font-size:80%;
	margin-top:0px;
	margin-bottom:0px;
	line-height:1em;
	text-transform:uppercase;
    color:var(--common-info-color:white);
}
/* ENDE Header: ---- */


/* ---- Content: ---- */
.content p.info {
	margin-top:1em;
	margin-bottom:1em;
	border-top:1px dotted var(--common-info-color:white);
	border-bottom:1px dotted var(--common-info-color:white);
	padding-top:0.2em;
	padding-bottom:0.2em;
}
.content .btngroup {
	line-height:1.2em;
}
.content .btngroup button {
	display:block;
	margin:auto;
	font-size:120%;
	height:3em;
	vertical-align:top;
	vertical-align:middle;
	box-sizing:border-box;
	background-size:100% 100%;
}
/* ENDE Content: ---- */


/* ---- Impressum: ---- */
#Impressum {
	background-color:var(--common-font-color:white);
	border-top:1px solid var(--common-info-color:white);
	color:#000;
	text-shadow:1px 1px 0px var(--common-info-color:white);
}
#Impressum h1 {
	color:#332929;
}
.copyright {
	margin-top:1em;
	text-align:right;
}
/* ENDE Impressum: ---- */


/* ---- Startseite: ---- */
.infos {
	background-color:#ececec;
	padding:0.5em;
	border:1px solid #d9d9d9;
	margin-bottom:0.5em;
}
/* ENDE Startseite: ---- */



/* ---- Einstellungen: ---- */
/* ENDE Einstellungen: ---- */


/* ---- Login: ---- */
#btnLogin {
	margin:auto;
	margin-top:1em;
	margin-bottom:1em;
	font-size:120%;
}
/* ENDE Login: ---- */


/* ---- Buttons: ---- */
button.material-icons.stdButton {
	display:block;
	margin:auto;
	font-size:1.5rem;
	padding:0.25em;
	width:1em;
	height:1em;
	box-sizing:content-box;
	line-height:1em;
	transition:background-color 0.5s;
}
button.centered {
	display:block;
	margin:auto;
	margin-top:1em;
	margin-bottom:1em;
}

button.material-icons.btnAdd {
	background-color:var(--common-add-color);
	color:var(--common-add-color-hover);
	border:2px solid var(--common-add-color);
}
button.material-icons.btnAdd:hover {
	background-color:var(--common-add-color-hover);
	color:var(--common-add-color);
}
button.material-icons.btnOk {
	width:3em;
	height:3em;
}
button.material-icons.btnOk, button.big.btnOk {
	background-color:var(--common-ok-color);
	color:var(--common-ok-color-hover);
	border:2px solid var(--common-ok-color);
}
button.material-icons.btnOk:hover, button.big.btnOk:hover {
	background-color:var(--common-ok-color-hover);
	color:var(--common-ok-color);
}
button.material-icons.btnDelete, .TPUe button.material-icons.btnDelete, button.big.btnDelete {
	background-color:var(--common-delete-color);
	color:var(--common-delete-color-hover);
	border:2px solid var(--common-delete-color);
}
button.big.btnDelete {
	/*
	text-transform:uppercase;
	*/
}
button.material-icons.btnDelete:hover, .TPUe button.material-icons.btnDelete:hover, button.big.btnDelete:hover {
	background-color:var(--common-delete-color-hover);
	color:var(--common-delete-color);
}
button.material-icons.btnEdit, .TPUe button.material-icons.btnEdit, button.big.btnEdit {
	background-color:var(--common-edit-color-hover);
	color:var(--common-edit-color);
	border:2px solid var(--common-edit-color);
}
button.material-icons.btnEdit:hover, button.big.btnEdit:hover, .TPUe button.material-icons.btnEdit:hover {
	background-color:var(--common-edit-color);
	color:var(--common-edit-color-hover);
}
button.material-icons.btnEnd, .TPUe button.material-icons.btnEnd, button.big.btnEnd {
	background-color:var(--common-ok-color-hover);
	color:var(--common-ok-color);
	border:2px solid var(--common-ok-color);
}
button.material-icons.btnEnd:hover, button.big.btnEnd:hover, .TPUe button.material-icons.btnEnd:hover {
	background-color:var(--common-ok-color);
	color:var(--common-ok-color-hover);
}
button.material-icons.btnChart, button.big.btnChart {
	background-color:var(--common-chart-color-hover);
	color:var(--common-chart-color);
	border:2px solid var(--common-chart-color);
}
button.material-icons.btnChart:hover, button.big.btnChart:hover {
	background-color:var(--common-chart-color);
	color:var(--common-chart-color-hover);
}

button.material-icons.btnStartTraining, button.big.btnStartTraining {
	background-color:var(--common-a-color);
	color:var(--common-a-color-hover);
	border:2px solid var(--common-a-color);
}
button.material-icons.btnStartTraining:hover, button.big.btnStartTraining:hover {
	background-color:var(--common-a-color-hover);
	color:var(--common-a-color);
}

button.material-icons.big {
	font-size:1.5rem;
}



.buttons .material-icons {
	font-size:2rem;
}


button.material-icons.btnClose {
	display:block;
	margin-right:left;
	border-radius:1em;
	width:2em;
	height:2em;
	padding:0px;
	border:1px solid var(--common-delete-color);
	background-color:var(--common-delete-color-hover);
}
button.material-icons.btnClose:hover {
	color:var(--common-delete-color-hover);
	background-color:var(--common-delete-color);
}

.buttons {
	
}
.buttons button {
	border-color:var(--common-font-color-inverted);
	color:var(--common-font-color-inverted);
}

.buttons.flexbox {
	flex-wrap:wrap;
}


button.big {
	margin:auto;
	margin-bottom:0.5em;
	margin-top:0.5em;
	font-size:1.2rem;
	border-color:var(--common-a-color);
	background-color:var(--common-a-color-hover);
	color:var(--common-a-color);
	text-align:center;
	line-height:1em;
	width:auto;
	padding:0.5em;
}
button.big:hover {
	color:var(--common-a-color-hover);
	background-color:var(--common-a-color);
}

button.big {
	transition:width 0.5s;
}
button.big .rotate {
	margin-left:1em;
	animation:rotation 1s infinite linear;
}

button.big i.material-icons {
	border:none;
	margin:0px;
	vertical-align:middle;
	color:inherit;
	background:none;
}
button.big:hover i.material-icons {
	color:inherit;
}
/* ENDE Buttons: ---- */




/* ---- Ãœber: ---- */
.qrcode {
	display:block;
	margin:auto;
}

@media screen and (orientation:landscape) {
	.qrcode {
		max-width:80vh;
		height:auto;
	}
}
@media screen and (orientation:portrait) {
	.qrcode {
		max-height:80vw;
		width:auto;
	}
}
/* ENDE Ãœber: ---- */


/* ---- Spiele (Ãœbersicht): ---- */
.spiele,
.spiele > li {
    list-style-type:none;
}

.spiele {
    display:flex;
    justify-content:flex-start;
    align-content:stretch;
    align-items:stretch;
    flex-wrap:wrap;
    
    margin:0.5em;
    padding:0.5em;
}
.spiele > li {
    border-radius:0.2em;
    background-color:white;
    padding:0.5em;
}
.spiele > li > a {
    font-weight:bold;
}
.spiele ul {
    margin-left:1em;
}

.spiele .details,
.spiele .details li {
	margin-left:0px;
	list-style-type: none;
	font-size:0.9em;
}

/* ENDE Spiele (Ãœbersicht): ---- */


/* ---- Spielbeschreibung: ---- */
.produkte .beschreibung,
.produkte .info {
	font-size:80%;
	line-height:1.2rem;
	color:#bbb;
}

.produkte,
.produkte ul {
	margin-left:1em;
	line-height:1.2em;
}
.produkte .skala {
	width:20em;
	height:1.5em;
	border:1px solid #ccc;
	border-radius:0.2em;
	display:inline-block;
	margin-left:1em;
	position:relative;
	
	display:none; /* 20250606 */
}
.produkte .skalenwert {
	position:absolute;
	top:0px;
	bottom:0px;
	width:2px;
	z-index:1;
	background-color:#ddd;
}
.skala.idealfaktor_0_0 {
	background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(0,255,0,1) 100%);
}
.skala.idealfaktor_0_1 {
	background: linear-gradient(-90deg, rgba(255,0,0,1) 0%, rgba(0,255,0,1) 100%);
}
/* ENDE Spielbeschreibung: ---- */


/* ---- Spielfeld: ---- */
.feld {
	position:relative;
	background-size:contain;
	background-position:center;
	background-clip:padding-box;
    background-repeat:no-repeat;
	background-color:rgba(0,0,0,0.3);
	padding:0.5em;
	font-size:70%;
	text-align:center;
	line-height:1.1em;
	text-shadow:0px 0px 0.5em black;
	
	cursor:pointer;
	
	/*
	display:grid;
	grid-template-columns:100%;
	grid-template-columns:2rem 1fr;
	width:15rem;
	*/
	/* grid-template-rows:1fr max-content; */

	
	grid-row-gap: 0.5em;
	
	border-radius:0.5em;
	border:none !important;
	color:white;
}
.feld:hover {
	outline-style:solid;
	outline-color:var(--color-base);
}

.feld button.menu {
	position:absolute;
	right:0.2em;
	top:0.2em;
	width:auto;
	height:auto;
	z-index:1;
}
.feld nav {
	display:none;
	position:absolute;
	right:0.2em;
	top:1.2em;
	width:auto;
	height:auto;
	z-index:2;
	background-color:white;
	border:1px solid #ccc;
	padding:0.2em;
}
.feld nav ul,
.feld nav li {
	margin:0px;
	padding:0px;
	display:block;
	line-height:1.2em;
}
.feld nav ul ul {
	margin-left:1em;
	font-size:90%;
	line-height:1.2em;
}
.feld nav li {
	margin-bottom:0.5em;
}
.feld nav a {
	background:none;
	border-radius:0px;
	padding:0px;
	margin:0px;
	display:block;
	height:100%;
}
.feld nav a:hover {
	color:var(--common-a-color-dark);
}
.feld .kosten {
	font-size:80%;
	line-height:1em;
}

.feld .zustand {
	display:none;
}

.feld.inactive::before {
	content:"Hier wird gerade gegärtnert 😊";
	text-shadow:0 0 0.5em black;
	background-color:rgba(0,0,0,0.7);
	color:white;
	position:absolute;
	z-index:10;
	left:0;
	top:0;
	right:0;
	bottom:0;
	padding:1em;
	font-size:1.2rem;
	text-align:center;
	border-radius:0.5rem;
	line-height:1.2;
	
	display:flex;
	align-items:center;
	justify-content:center;
}

#frmDatum {
	padding:1em;
	/*
	border:1px solid #ccc;
	background-color:#ddd;
	*/
    background-color:var(--hg_box2);
	color:var(--font_box2);
	margin:0px;
	border-radius:0.5em;
	font-size:0.9rem;
	
	display:flex;
	gap:0.5em;
	
	flex-grow:1;
}
#frmDatum input {
	text-align:center;
	font-size:1.2em;
	margin:0.1em;
}
#frmDatum button {
	height:100%;
	align-self:stretch;
	margin:0;
	margin-left:auto;
}
#frmDatum p {
	margin-bottom:0px;
}

#frmDatum #spiel_uhrzeit {
	display:none; /* 20250606 */
}

.erklaerung {
	display:none; /* 20250606 */
}

.feld .status .material-icons,
.feld .status .material-icons-outlined {
	font-size:1rem;
    vertical-align: text-bottom;
    line-height:1em;
}
.feld .status {
	text-shadow:none;
	padding:0.2em;
	/* background-color:rgba(255,255,255,0.7); */
	height:auto;
	text-align:right;
	font-style:normal;
    line-height:1em;
    display:grid;
    grid-column-gap:0.5em;
    grid-row-gap:0.1em;
    
    grid-template-columns:minmax(auto,max-content) 1fr;
    grid-template-rows:1fr 1fr 1fr;
    grid-template-areas:
        "gedeih wasser"
        "gedeih schaedlinge"
        "gedeih unkraut";
	
	color:white;
    
    /*
    grid-template-columns:50% 1fr 1fr 1fr;
    grid-template-rows:100%;
    grid-template-areas:
        "gedeih wasser schaedlinge unkraut";
    */
}
/*
.feld .status > * {
    align-self:end;
    display:grid;
    grid-template-rows:1fr 1em 1em;
    grid-template-areas:
        "meter"
        "value"
        "icon";
}
*/
.feld .status > * > meter {
    grid-area:meter;
}
.feld .status meter {
	/* display:none; */
}
.feld .status > * > .material-icons-outlined {
    grid-area:icon;
}
.feld .status > * > .wert {
    grid-area:value;
}
.feld .status .gedeih {
    grid-area:gedeih;
    font-size:1rem;
    align-self:end;
}
.feld .status .wert,
.feld .status .gedeih .wert,
.feld .status .gedeih .material-icons-outlined {
    /*
	display:none;
	*/
}
.feld .status  .wert {
	margin-left:1rem;
	font-size:0.8rem;
}
.feld .status .gedeih .material-icons-outlined {
    font-size:1.2rem;
	margin-bottom:0.5em;
}

.feld .status .gedeih > * {
    display:block;
    text-align:center;
}

.feld .status .wasser {
    grid-area:wasser;
}
.feld .status .wasser .material-icons {
	color:aqua;
}
.feld .status .schaedlinge {
    grid-area:schaedlinge;
}
.feld .status .schaedlinge .material-icons {
	color:brown;
}
.feld .status .unkraut {
    grid-area:unkraut;
}
.feld .status .unkraut .material-icons {
	color:forestgreen;

}

.feld .status meter {
    --optimum:limegreen;
    --sub-optimum:orange;
    --sub-sub-optimum:red;
}
.feld .status meter.plusminus {
    /*
	--optimum:red;
    --sub-optimum:green;
    --sub-sub-optimum:green;
	*/
}

.feld .status .gedeih meter {
    transform-origin:top left;
    transform: rotate(-90deg);
    height:1em;
    width:3.5rem;
	bottom:-1rem;
	
	margin-right:1em;
}

.feld .status .bar2 {
	display:flex;
	gap:0.25rem;
	align-items:center;
}
meter {
  --background:rgba(0,0,0,0.5);
  --optimum: green;
  --sub-optimum: orange;
  --sub-sub-optimum: red;
	height:0.5rem;
	border-radius:0.25rem;
}
meter::-moz-meter-bar {
	background: var(--background);
}
meter::-webkit-meter-bar {
	background: var(--background);
}

meter:-moz-meter-optimum::-moz-meter-bar {
	background: var(--optimum);
}
meter::-webkit-meter-optimum-value {
	background: var(--optimum);
}

/* The yellow (sub-optimum) bar in Firefox */
meter:-moz-meter-sub-optimum::-moz-meter-bar {
	background: var(--sub-optimum);
}

/* The yellow (sub-optimum) bar in Chrome etc. */
meter::-webkit-meter-suboptimum-value {
	background: var(--sub-optimum);
}

/* The red (even less good) bar in Firefox */
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
	background: var(--sub-sub-optimum);
}

/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {
	background: var(--sub-sub-optimum);
}
/* ENDE Spielfeld: ---- */


/* ---- Produkte: ---- */
.erde0 {
	background-color:saddlebrown;
	color:white;
}
.erde1 {
	background-color:#40291D;
	color:white;
}
.tomate .icon {
	background-image:url("../svg/produkte/tomaten.svg");
}
.paprika .icon {
	background-image:url("../svg/produkte/paprika.svg");
}
.gurke .icon {
	background-image:url("../svg/produkte/gurken.svg");
}
.zucchini .icon {
	background-image:url("../svg/produkte/zucchini.svg");
}
.status .icon {
	display:block;
	left:1.2rem;
	width:2rem;
	height:2rem;
	border-radius:50%;
	background-color:white;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	padding:0.2em;
	background-origin:content-box;
	margin-bottom:0.5em;
}

.produktkategorie .details ul {
	font-size:0.8rem;
	line-height:1.2;
	color:#666;
	margin-bottom:0px;
}
.produktkategorie input {
	margin-bottom:0px;
}
#frmProdukt {
	overflow:auto;
	max-height:90%;
}
#frmProdukt .info {
	font-style:normal;
	line-height:1.2;
}
.produktkategorie details {
}
.produktkategorie details summary {
	font-size:0.9rem;
	margin-left:2rem;
}
.produktkategorie details .beschreibung {
	font-style:italic;
}
.produktkategorie .addcosts {
	font-size:0.8em;
	color:#666;
}
/* ENDE Produkte: ---- */


/* ---- Protokoll: ---- */
#CProtokoll {
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
}
#CProtokoll header {
	display:flex;
	column-gap:1em;
	justify-content:flex-start;
	align-items:center;
}
#CProtokoll h2 {
	margin-bottom:0px;
}
#CProtokoll h2 .material-icons {
    cursor:pointer;
	position:sticky;
}

#CProtokoll > *:not(button) {
    flex-grow:0;
    flex-shrink:1;
}
#CProtokoll_list {
    overflow:auto;
}

#CProtokoll #CProtokoll_list li {
	display:grid;
	grid-template-columns:minmax(4ch,auto) 3fr 1fr;
	grid-template-areas:
		"Zahl Datum Feld"
		"Zahl Handlung Wert";
	gap:0.2em;
	margin:0.1em;
}

#CProtokoll_list li > *:not(.pr_handlung) {
	color:#666;
}

#CProtokoll_list .number {
	grid-area:Zahl;
	background-color:#eee;
	padding:0.1em;
	text-align:right;
	display:none;
}
#CProtokoll_list .pr_datum {
	grid-area:Datum;
}
#CProtokoll_list .pr_feld {
	text-align:right;
	grid-area:Feld;
}
#CProtokoll_list .pr_handlung {
	grid-area:Handlung;
	font-size:0.9rem;
	line-height:1.1em;
}
#CProtokoll_list .pr_handlung .name {
	color:#999;
}
#CProtokoll_list .pr_wert {
	grid-area:Wert;
	text-align:right;
}

#CProtokoll ul,
#CProtokoll li {
    line-height:1.2em;
    margin:0px;
    padding:0px;
    display:block;
}
#CProtokoll .pr_datum,
#CProtokoll .pr_feld,
#CProtokoll .number,
#CProtokoll .pr_wert {
    font-size:0.8rem;
    color:#222;
}
#CProtokoll li {
    margin-bottom:0.2em;
    padding-bottom:0.2em;
    border-bottom:1px solid #eee;
}
#CProtokoll .pr_wert {
    text-align:right;
}
#CProtokoll .flex {
    display:flex;
    justify-content:flex-start;
}
#CProtokoll .flex > * {
    flex-grow:1;
    flex-shrink:0;
}
#CProtokoll .flex > :last-child {
    text-align:right;
}
#CProtokoll .flex > .number {
    flex-grow:0;
    width:2em;
    margin-right:0.2em;
    display:none;
}

#CProtokoll .btnMinMax {
	background-color:var(--hg_content);
	padding:0.2em;
	width:1.5ch;
	text-align:center;
	margin:0px;
}
#CProtokoll .btnMinMax:hover {
	background-color:var(--hg_content-dark);
}
/* ENDE Protokoll: ---- */


/* ---- Spielraster: ---- */
#CSpielraster h2 {
    margin-top:0px;
}
/* ENDE Spielraster: ---- */


/* ---- Kontostand und Wetter: ---- */
#CSpielraster #CKontostand,
#CSpielraster #CWetter {
    padding:0.2em;
    border-radius:0.2em;
    margin-bottom:0.5em;
    align-self:start;
    background-color:var(--hg_box1);
	color:var(--font_box1);
	border:none;
}

#CSpielraster #CKontostand label {
    text-align:center;
    
}
#CKontostand h2,
#CWetter h2 {
	font-size:1.1rem;
}
#CKontostand,
#CWetter {
	min-width:10rem;
	height:100%;
}
/* ENDE Kontostand und Wetter: ---- */


/* ---- Highscore: ---- */
.highscore {
    border-collapse:collapse;
    margin:auto;
    margin-bottom:1em;
    min-width:40em;
	background-color:white;
	padding:1em;
	border-radius:0.5em;
}
.highscore th,
.highscore td {
    padding:0.2em 0.5em;
    border-bottom:1px solid var(--common-border-color);
    border-right:1px solid var(--common-border-color);
}
.highscore tbody tr:last-of-type td {
    border-bottom:none;
}
.highscore tr td:last-of-type,
.highscore tr th:last-of-type {
    border-right:none;
}
.highscore thead th {
    border-bottom-width:2px;
}
.highscore tbody tr > :first-child {
    text-align:center;
    width:5em;
}
.highscore tbody tr > :nth-child(2) {
    width:10em;
}
.highscore tbody tr > :nth-child(4) {
    text-align:center;
    width:6em;
}
.highscore tbody tr > :last-child {
    text-align:right;
    font-size:0.8em;
    width:6em;
}
/* ENDE Highscore: ---- */


/* ---- UX: ---- */
#CFeldnav {
	cursor:move;
}
.btnClose {
	display:block;
	width:2.5rem;
	height:2.5rem;
	margin:0px;
	padding:0px;
	font-size:1.5rem;
	line-height:1;
	background-color:var(--common-delete-color);
	border-radius:50%;
	border:2px solid var(--common-delete-color);
	color:white;
	margin-left:auto;
}
.btnClose:hover {
	background-color:white;
	color:var(--common-delete-color);
}
#CFeldnav .mtop_1em {
	margin-top:1em !important;
}
#CFeldnav button:not(.btnClose) {
	width:100%;
	margin:0.2em;
	display:grid;
	grid-template-columns:2em 1fr;
	grid-template-areas:
		"icon handlung"
		"icon aufwand";
	gap:0.2em;
	align-items:center;
}
#CFeldnav button {
	cursor:pointer;
}
#CFeldnav button .handlung {
	display:block;
	grid-area:handlung;
	text-align:left;
}
#CFeldnav button .aufwand {
	display:block;
	font-size:80%;
	text-align:right;
	grid-area:aufwand;
}
#CFeldnav button .icon {
	grid-area:icon;
}
#CFeldnav button .pending {
	display:none;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:1;
	background-color:rgba(255,255,255,0.8);
	color:var(--common-ok-color);
	font-size:3rem;
	justify-content:center;
	align-content:center;
	align-items:center;
}
#CFeldnav button .pending img {
	height:70%;
	width:auto;
	display:block;
}
#CFeldnav button.inactive .pending {
	display:flex;
}
#CFeldnav button:active {
	border-color:var(--common-ok-color);
	background-color:var(--common-ok-color);
	color:var(--common-a-color-hover);
}

#CFeldnav .btnFinish {
	background-color:var(--common-ok-color);
	color:white;
	border:2px solid var(--common-ok-color);
}
#CFeldnav .btnFinish:hover {
	color:var(--common-ok-color);
	background-color:white;
	grid-template-areas:
		"icon handlung";
}
/* ENDE UX: ---- */
/* ENDE UX: ---- */



/* #### ../../../../frontend/kunden/phspiele.syne.at/css/design.css #### */
main {
	overflow:auto;
}
main > * {
	height:100%;
}
#CMaingrid {
	height:100vh;
	display:grid;
	grid-template-rows:auto 1fr 0px auto;
	grid-template-columns:100%;
	grid-template-areas:
		"header"
		"main"
		"nav2"
		"footer";
	
	/*
	*/
}
body:not(.page_103) #CMaingrid {
	background-image:url("../images/wachsendePflanze.png");
	background-size:cover;
	background-position:center;

}

#CMaingrid #H1 {
	grid-area: header;
}
#CMaingrid main {
	grid-area:main;
	overflow:auto;
}
#CMaingrid #F0 {
	grid-area:footer;
	height:8em;
}

#CMaingrid .CLogin fieldset {
	background-color:rgba(255,255,255,0.2);
	border:1px solid var(--common-font-color);
}
#CMaingrid .CLogin fieldset legend {
	background:none;
	border:1px solid var(--common-font-color);
	padding:0.2em;
	border-radius:0.2em;
	background-color:rgba(255,255,255,0.2);
	margin-top:-2em;
}
.CLogin .info {
	color:var(--common-font-color);
}


.push {
	left:50%;
	width:15rem;
	margin-left:-7.5rem;
	/* margin-left:-7.5rem; */
}

.push {
	border-radius:0.5em;
	border:1px solid #b4b4b4;
	background-color:#fff;
	padding:0px;
}
.push>* {
	margin:1em;
}
.push>nav {
	margin:0px;
}
.push .pushnav {
	box-sizing:border-box;
	border-top:1px solid #b4b4b4;
	padding:1em;
	padding-top:0.5em;
	padding-bottom:0.5em;
	background-color:#ececec;
	text-align:center;
}
	.pushnav a {
		box-sizing:border-box;
		display:inline-block;
		width:49%;
		text-align:center;
		border-right:1px solid #b4b4b4;
	}
	.pushnav a:last-of-type {
		border-right:none;
	}


#LStatus2 footer {
	/*
	display:none;
	*/
}

#CErrors {
	min-height:1em;
	max-height:20em;
	margin-top:3em !important;
	overflow:auto;
	border:2px solid var(--common-error-color);
	background-color:#FFC;
	padding:0.25em;
	
	display:block !important;
	display:none !important;
}


.Loader {
	display:table-row;
	width:100%;
}
.Loader img {
	display:table-cell;
	vertical-align:top;
	margin-right:1em;
}
.Loader p {
	display:table-cell;
	vertical-align:middle;
}


	
.content {
	padding:0.5em;
}

#CMessage {
	margin-top:3em !important;
	min-height:1em;
	max-height:20em;
	overflow:auto;
	display:none;
}

/* ---- Header: ---- */
#H1 {
}

@supports (position:sticky) {
	#C1 {
		margin-top:0px;
		padding-top:0px;
	}
}


#Offline {
	padding:0.5em;
	text-align:center;
	background-color:#900;
	background-color:rgba(200,0,0,0.9);
	color:white;
	display:block;
	position:fixed;
	top:4.5rem;
	height:auto;
	width:100%;
	left:0px;
	z-Index:10;
	font-size:1.2em;
	box-sizing:border-box;
}


#hbar .td:first-of-type {
	width:80%;
}
#hbar .td:last-of-type {
	width:20%;
	text-align:right;
}
/* ENDE Header: ---- */


/* ---- Footer: ---- */
#F0 {
	background-color:rgba(0,0,0,0.8);
	text-align:center;
	font-size:0.7rem;
	padding-top:0.5em;
	padding-bottom:0.5em;
	border-top:1px solid var(--common-border-color);

    color:var(--common-font-color-lower);
	/*
	display:none;
	*/
}
#F0 img {
	display:block;
	max-width:20em;
	height:auto;
	margin:auto;
	margin-top:1em;
}
#F0 a {
	color:var(--common-a-color-dark);
}

/* ENDE Footer: ---- */


/* ---- Startseite: ---- */
#Start {
}
#Start .content {
	background:none;
}
#Start h1 {
	font-size:3em;
	text-shadow:1px 1px 0px #999;
	line-height:1em;
	margin-bottom:0px;
}


#CMainpageIntro {
	display:block;
	text-align: left;
}

.CLogin {
	display:grid;
	grid-template-rows:minmax(3em,max-content) 1fr;
	grid-template-columns:2fr 1fr;
	grid-template-areas:
		"h h"
		"register login";
	justify-content: center;
	align-items: center;
	
}
.CLogin > :first-child {
	grid-area:h;
}
.CLogin > #frmRegister {
	/*
	justify-self: end;
	margin-right:2em;
	*/
}
.CLogin > #frmLogin {
	/*
	justify-self:start;
	margin-left:2em;
	*/
}
/* ENDE Startseite: ---- */


/* ---- Infoscreen: ---- */
.btnClose2 {
	font-weight:bold;
	line-height:1em;
	width:1.5em;
	height:1.5em;
	
	-webkit-border-radius:0.75em;
	-moz-border-radius:0.75em;
	border-radius:0.75em;
	
	background-color:#fff;
	color:rgb(11,114,181);
	display:block;
	float:right;
	text-align:center;
	
	margin:0.5em;
	padding-top:0.25em;
	
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
/* ENDE Infoscreen: ---- */

/* ---- Hauptansicht: ---- */
#CView {
	height:100%;
	display:grid;
	grid-template-rows:max-content 1fr;
	grid-template-columns:1fr minmax(auto,100%) 20rem 1fr;
	grid-template-areas:
		". Spiele Spiele ."
		". Spielfeld Messenger .";
}
#CView #CSpielfeld {
    grid-area:Spielfeld;
    background-color:rgba(0,0,0,0.1);
    padding:0.5em;
}
#CView #CSpiele {
	grid-area:Spiele;
}
/* ENDE Hauptansicht: ---- */


/* ---- Check-In: ---- */
#CView #CCheckIn {
	padding:1em;
	background-color:white;
	grid-column:span 3;
}
#CView #CCheckIn fieldset {
	border-radius:0.5em;
	padding:1em;
}
/* ENDE Check-In: ---- */


/* ---- Spielfeld: ---- */
#CFeldnav,
#CAnleitung {
	display:none;
	position:fixed;
	left:0px;
	top:0px;
	right:0px;
	height:100vh;
	z-index:10;
	
	justify-content:center;
	align-content:center;
	align-items:center;
}
#CFeldnav.visible {
	display:flex;
}
#CAnleitung {
	right:15vw;
	left:15vw;
	height:70vh;
	top:15vh;
	overflow:auto;
}
#CAnleitung.visible {
	display:block;
}
#CAnleitung #CBeschreibung {
	overflow:auto;
	background-color:white;
	color:var(--common-font-color);
}
#CFeldnav form {
	border-radius:1em;
	padding:1em;
	background-color:var(--hg_content-lighter);
	border:1px solid var(--common-border-color);
	box-shadow:0px 0px 1em var(--common-border-color);
}

#CSpielraster {
    display:grid;
    /*
	grid-template-columns:1fr minmax(auto,30em) minmax(auto,10em);
    grid-template-rows:minmax(auto,8em) minmax(auto,30em) auto;
    grid-template-areas:
        "info protokoll konto"
        "info protokoll wetter"
        "spielfeld spielfeld spielfeld";
	*/
	grid-template-columns:18em 1fr 1fr;
    grid-template-rows:minmax(auto,max-content) minmax(20em,calc(100vh - 15rem));
    grid-template-areas:
        "info info info"
        "protokoll spielfeld spielfeld";
    grid-gap:1px; /* erzeugt bei höheren Werten einen Scrollbar */
}
#CSpielraster.min {
	grid-template-columns:2.5em 1fr 1fr;
}
#CSpielraster.min #CProtokoll_list,
#CSpielraster.min #CProtokoll h2 {
	display:none;
}
#CSpielraster.min #CProtokoll {
	align-items:start;
}
#CSpielraster.min #CProtokoll header {
	align-items:start;
}
#CSpielraster #CInfo {
    grid-area:info;
	display:flex;
	gap:0.5em;
}
#CInfo > * {
	box-shadow:0 0 0.5em black;
	z-index:10;
}
#CInfo #Anleitung {
	display:flex;
	align-content:stretch;
}
#CInfo #Anleitung button {
	margin:0px;
	background-color:var(--common-ok-color);
	border-color:var(--common-ok-color);
}
#CInfo #Anleitung button .icon {
	display:block;
	font-size:3rem;
	margin:auto;
	margin-bottom:1rem;
	line-height:1;
}
#CInfo #Anleitung button:hover {
	margin:0px;
	color:var(--common-ok-color);
	background-color:white;
}
#CSpielraster #CKontostand {
    grid-area:konto;
}
#CSpielraster #CWetter {
    grid-area:wetter;
}
#CSpielraster #CProtokoll {
    grid-area:protokoll;
	overflow:auto;
	background-color:var(--hg_box2);
	color:var(--font_box2);
	padding:0.5em;
	border-radius:0.2em;
}
#CSpielraster #CSpielfeld_inner {
    grid-area:spielfeld;
	overflow:auto;
	display:grid;
	/*
	width:fit-content;
	*/
	margin:auto;
	gap:2px;
	min-height:auto;
	height:100%;
	
	min-width:30rem;
	max-width:100%;
}
#CSpielfeld_inner > * {
	/*
	border:1px dotted #ccc;
	aspect-ratio:1 / 1;
	display:flex;
	justify-content:center;
	align-content:center;
	align-items:center;
	*/
}

/* ENDE Spielfeld: ---- */


/* ---- Beschreibung: ---- */
#CBeschreibung {
	background-color:hsl(0,0%,0%,0.8);
	padding:0.5em;
	border-radius:0.5em;
	color:white;
}
/* ENDE Beschreibung: ---- */



/* #### ../../../../frontend/kunden/phspiele.syne.at/css/navigation.css #### */
nav ul,
nav li {
    list-style-type:none;
    margin:0px;
    padding:0px;
}

nav .atext i {
    vertical-align: middle;
}

#btnNav {
    padding:0.5em;
    border-radius:0.5em;
    background-color:white;
    display:block;
    margin-left:auto;
    
    width:1em;
    height:1em;
    box-sizing:content-box;
    
    cursor:pointer;
	box-shadow:0px 0px 1em black;
}

#H0 {
    position:fixed;
	width:fit-content;
	margin-left:auto;
    right:1em;
    top:0px;
    height:auto;
    z-index:1000;
    
    padding:0.5em;
    /*
    background-color:rgba(0,0,0,0.5);
    box-shadow:0px 0px 1em grey;
	border-bottom:1px solid white;
	*/
}

#nav0 {
    display:none;
    position:absolute;
    right:0.5em;
    top:3.7em;
    width:auto;
    height:auto;
    
    background-color:white;
    padding:0.5em;
    border-radius:0.5em;
    box-shadow:0.5em 0.5em 0.5em grey;
}

#nav0 li {
    margin-left:0px;
}
#nav0 a {
    display:block;
}


/* #### ../../../../frontend/kunden/phspiele.syne.at/css/messenger.css #### */
#CView #CMessenger {
	padding:0.2em;
	padding-top:4em;
	background-color:hsla(0,100%,100%,0.5);
	margin:0px 0.5em;
	margin-bottom:0px;
	border-radius:0.5em;
	grid-area:Messenger;
	overflow:auto;
	height:100%;
	
	scrollbar-color:rgba(0,0,0,0.5) transparent;
}
#CMessenger .fo_messenger {
	grid-template-columns:auto;
	grid-template-areas:
		"msg_nav"
		"msg_receiverlist"
		"msg_receiver"
		"msg_messages"
		"msg_message";
    grid-template-rows:minmax(0em,max-content) minmax(3em,max-content) minmax(2em,max-content) 1fr minmax(6em,max-content);
	height:100%;
	max-height:none;
}
#CMessenger #FO_Receiver_list {
	padding:0.5em;
	border:1px solid #ccc;
}
#CMessenger #FO_Receiver {
	font-size:80%;
	margin:0.5rem;
}
#CMessenger #FO_Receiver .icon {
	font-size:inherit;
	/*
    width:3em;
	height:3em;
    */
}

#CMessenger fieldset {
	border:none;
	padding:0px;
	margin:0px;
}
.fo_messages > li:not(.self) {
	border:2px solid var(--col0);
}
#CMessenger #FO_Nav0 {
	padding:0px;
}


/* #### ../../../../frontend/kunden/phspiele.syne.at/css/fonts.css #### */
@font-face {
    font-family: 'droid_sansbold';
    src: url('../fonts/droidsans-bold-webfont.eot');
    src: url('../fonts/droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/droidsans-bold-webfont.woff') format('woff'),
         url('../fonts/droidsans-bold-webfont.ttf') format('truetype'),
         url('../fonts/droidsans-bold-webfont.svg#droid_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'droid_sansregular';
    src: url('../fonts/droidsans-webfont.eot');
    src: url('../fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/droidsans-webfont.woff') format('woff'),
         url('../fonts/droidsans-webfont.ttf') format('truetype'),
         url('../fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'fauna_oneregular';
    src: url('../fonts/faunaone-regular-webfont.eot');
    src: url('../fonts/faunaone-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/faunaone-regular-webfont.woff') format('woff'),
         url('../fonts/faunaone-regular-webfont.ttf') format('truetype'),
         url('../fonts/faunaone-regular-webfont.svg#fauna_oneregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
	font-family: 'Conv_HelveticaNeue-LightCond';
	src:
		url('../fonts/HelveticaNeue-LightCond.eot?') format('eot'),
		url('../fonts/HelveticaNeue-LightCond.ttf') format('truetype'),
		url('../fonts/HelveticaNeue-LightCond.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Conv_HelveticaNeue-Roman';
	src:
		url('../fonts/HelveticaNeue-Roman.eot?') format('eot'),
		url('../fonts/HelveticaNeue-Roman.ttf') format('truetype'),
		url('../fonts/HelveticaNeue-Roman.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Conv_HelveticaNeue-Condensed';
	src:
		url('../fonts/HelveticaNeue-Condensed.eot?') format('eot'),
		url('../fonts/HelveticaNeue-Condensed.ttf') format('truetype'),
		url('../fonts/HelveticaNeue-Condensed.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GarageGothic-Regular';
	src: url('../fonts/gargr___-webfont.eot?') format('eot'), 
	     url('../fonts/gargr___-webfont.woff') format('woff'), 
	     url('../fonts/gargr___-webfont.ttf')  format('truetype'),
	     url('../fonts/gargr___-webfont.svg#GarageSVG') format('svg');
	}


@font-face {
    font-family: 'zurich_xcn_btregular';
    src: url('../fonts/zurchxc-webfont.eot');
    src: url('../fonts/zurchxc-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/zurchxc-webfont.woff') format('woff'),
         url('../fonts/zurchxc-webfont.ttf') format('truetype'),
         url('../fonts/zurchxc-webfont.svg#zurich_xcn_btregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'zurich_ltxcn_btlight';
    src: url('../fonts/zurchlxc-webfont.eot');
    src: url('../fonts/zurchlxc-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/zurchlxc-webfont.woff') format('woff'),
         url('../fonts/zurchlxc-webfont.ttf') format('truetype'),
         url('../fonts/zurchlxc-webfont.svg#zurich_ltxcn_btlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-Italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-Bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-BoldItalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-Light-webfont.woff') format('woff');
    font-weight: light;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-LightItalic-webfont.woff') format('woff');
    font-weight: light;
    font-style: italic;
}


/* ---- Ubuntu: ---- */
@font-face {
    font-family: 'Ubuntu Condensed';
    src: url('../fonts/Ubuntu/ubuntucondensed-regular-webfont.woff2') format('woff2'),
         url('../fonts/Ubuntu/ubuntucondensed-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu/ubuntu-regular-webfont.woff2') format('woff2'),
         url('../fonts/Ubuntu/ubuntu-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu/ubuntu-mediumitalic-webfont.woff2') format('woff2'),
         url('../fonts/Ubuntu/ubuntu-mediumitalic-webfont.woff') format('woff');
    font-weight: 500;
    font-style: italic;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu/ubuntu-medium-webfont.woff2') format('woff2'),
         url('../fonts/Ubuntu/ubuntu-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu/ubuntu-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/Ubuntu/ubuntu-lightitalic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu/ubuntu-light-webfont.woff2') format('woff2'),
         url('../fonts/Ubuntu/ubuntu-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu/ubuntu-italic-webfont.woff2') format('woff2'),
         url('../fonts/Ubuntu/ubuntu-italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu/ubuntu-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/Ubuntu/ubuntu-bolditalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu/ubuntu-bold-webfont.woff2') format('woff2'),
         url('../fonts/Ubuntu/ubuntu-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}
/* ENDE Ubuntu: ---- */


/* ---- PT Sans: ---- */
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on February 24, 2021 */
@font-face {
    font-family: 'PT Sans Narrow';
    src: url('../fonts/PTSans/ptsansnarrow-bold-webfont.woff2') format('woff2'),
         url('../fonts/PTSans/ptsansnarrow-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'PT Sans Narrow';
    src: url('../fonts/PTSans/ptsansnarrow-regular-webfont.woff2') format('woff2'),
         url('../fonts/PTSans/ptsansnarrow-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/PTSans/ptsans-bold-webfont.woff2') format('woff2'),
         url('../fonts/PTSans/ptsans-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/PTSans/ptsans-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/PTSans/ptsans-bolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;

}

@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/PTSans/ptsans-italic-webfont.woff2') format('woff2'),
         url('../fonts/PTSans/ptsans-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/PTSans/ptsans-regular-webfont.woff2') format('woff2'),
         url('../fonts/PTSans/ptsans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/* ENDE PT Sans: ---- */


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

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 1.5rem;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
/* ENDE Material Icons: ---- */

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





/* #### ../../../../frontend/kunden/phspiele.syne.at/css/form.css #### */
form {
}

form + form {
	border-left:2px solid var(--common-border-color);
}

form, form * {
}
input, select, textarea, label, button {
	display:block;
	margin-bottom:0.8em;
	width:100%;
	box-sizing:border-box;
	transition:background-color 0.5s;
}
input, select, textarea, button {
	border-radius:5px;
	padding:1em;
	padding-top:0.5em;
	padding-bottom:0.5em;
	border:1px solid #ccc;
	transition: box-shadow 0.25s;
}
input:focus {
	box-shadow:0px 0px 5px gray;
}
button, input[type=button], input[type=submit] {
	background-color:var(--common-a-color);
	color:var(--common-a-color-hover);
	padding:0.5em 1em;
	border:2px solid var(--common-a-color);
	transition:background-color 0.5s;
}
button:hover, input[type=button]:hover, input[type=submit]:hover {
	background-color:var(--common-a-color-hover);
	color:var(--common-a-color);
}
label {
	margin-top:0.8em;
	margin-bottom:0.2em;
	line-height:1.2em;
}
label input, label select, label textarea {
	display:inline-block;
}
form input[type=submit], form input[type=button], form button {
}
form input[type=submit]:hover, form input[type=button]:hover, form button:hover {
}

input[required], select[required], textarea[required] {
	font-size:1.1em;
}
form label[data-required] {
	font-weight:bold;
}
form label[data-required]:after {
	content:" *";
}

textarea {
	min-height:8em;
}

fieldset {
	margin-top:1em;
	margin-bottom:1em;
	padding:0.5em;
}
fielset {
	margin-top:2.2em;
}
fieldset+fieldset {
	margin-top:1.8em;
}
legend {
	font-size:1.1em;
	padding:0.5em 0px;
	background-color:inherit;
	color:var(--common-font-color);
}

fieldset .descr {
	float:none;
	clear:both;
	margin:0px;
	margin-bottom:0.5em;
	line-height:1.2em;
	padding:0px;
	max-width:none;
}

/*
#frmLogin fieldset {
	background-color:slategray;
	color:white;
}
#frmRegister fieldset {
	background-color:steelblue;
	color:white;
}
*/

button {
	cursor:pointer;
}

button.material-icons {
	display:inline-block;
	width:auto;
	background:none;
	font-size:1em;
	color:#999;
	margin:0px;
	padding:0px;
	border:none;
	margin-right:auto;
	transition:color 0.5s;
}
button.material-icons:hover {
	color:var(--common-a-color-hover);
}

.buttons .material-icons {
	font-size:1.5em;
	border:2px solid var(--common-a-color);
	background-color:var(--common-a-color-hover);
	color:var(--common-a-color);
	margin:0.25em 0.1em;
}
.buttons .material-icons:hover {
	background-color:var(--common-a-color);
	color:var(--common-a-color-hover);
}

.material-icons + .material-icons.color2 {
	margin-left:0.5em;
}

.buttons .material-icons.color2 {
	color:slategrey;
	border-color:slategrey;
}
.buttons .material-icons.color2:hover {
	background-color:slategrey;
	color:white;
}

select {
	padding:0.5em 1em !important;
	border-radius:0.2em;
	background-color:#fff;
}
select option {
	padding:0.5em 1em !important;
}

input[type=number] {
	width:7em;
}

input[type=color] {
	display:inline-block;
	width:3em;
	height:3em;
	padding:0.2em;
}
label input[type=color] {
	margin-right:1em;
}

button,
input[type=button],
input[type=submit] {
	touch-action:none !important;
	font-size:1em;
	width:auto;
	margin:auto;
	line-height:1em;
}
button .material-icons,
input[type=button] .material-icons,
input[type=submit] .material-icons {
	font-size:2em;
	vertical-align: middle;
	margin-right:0.5em;
}

.notDone .material-icons {
	visibility:hidden;
	margin-left:-1em;
	margin-right:0px;
}

/* ---- individuell: ---- */
.spielecode {
	margin:auto;
	max-width:30em;
	text-align:center;
}
.spielecode input {
	font-size:1.5em;
	width:8em;
	box-sizing:content-box;
	display:block;
	margin:1em auto;
	text-align:center;
	font-weight:bold;
	border-width:2px;
}

.CLogin form {
	max-width:40em;
	margin:auto;
}
#frmLogin {
	padding-left:2em;
}
#frmRegister {
	border-radius:0.5em;
	padding:1em;
	background-color:var(--hg_content-lighter);
	box-shadow:0px 0px 2em var(--common-shadow-color);
}

button[disabled],
input[disabled] {
	background-color:#eee;
	color:#ccc;
	border-color:#eee;
	text-decoration: line-through;
}
button[disabled]:hover,
input[disabled]:hover {
	background-color:white;
	color:#ccc;
	border-color:#eee;
}

#CFeldnav label button {
	display:inline-block;
}



/* #### ../../../../frontend/kunden/phspiele.syne.at/css/responsive.css #### */
@media only screen and (min-width:48em) {
}

/* ---- Tablet, etc.: ---- */
@media only screen and (max-width: 64em) {
	/* 64em = 1024Px */
}
/* ENDE Tablet, etc.: ---- */


/* ---- Smartphones, etc. ---- */
@media handheld, only screen and (max-width: 47.99999999em) {
	/* 48em = 768Px --> alles, was kleiner als 768Px ist*/
	body {
		font-size:0.8em;
	}
	
	.CLogin {
		grid-template-columns: 100%;
		grid-template-areas:
			"h"
			"register"
			"login";
	}
	
}
@media screen and (max-width:30em) {
}
/* ENDE Smartphones, etc. ---- */



/* #### not existing or no file: ../../../../ #### */


/* #### not existing or no file: ../../../../ #### */