@charset "utf-8";
/* CSS main style */
* {
	margin: 0;
	padding: 0;
}
body {
	border: 0 solid;
	color: #000000;
	background: #e4e4e7;
	background-position: top left;
	background-repeat: repeat-x;
	font: 99% Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
}

h1, h2, h3, h4 {
	font-weight: bold;
}
h1 {
	font-size: 1.2em;
	margin-bottom: 1em;
	text-transform: uppercase;
	padding-bottom: 0.2em;
	border-bottom: 1px solid #162B85;
}
h2 {
	color: #000000;
	font-size: 1em;
}
h3 {
	color: #000000;
	font-size: 1em;
	margin-right: 6px;
}
h4 {
	font-size: 0.8em;
}
.bold {
	font-weight: bold;
}
.fs_blau {
	color: #162B85;
}
#tophinweis {
	position: absolute;
	top: 6px;
	right: 26%;
	padding: 6px;
	color: #C6221A;
	background: #ffffff;
	border: 1px solid #ff0000;
	font-size: 1em;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;

	-moz-box-shadow: 1px 1px 4px #000000;
	-webkit-box-shadow: 1px 1px 4px #000000;
	box-shadow: 1px 1px 4px #000000;
}
.sternhinweis {
	color: #676767;
	font-style: italic;
	font-size: 0.9em;
}
#h1_kopf {
	display: none;
}
p {
	font-size: 0.8em;
	margin-bottom: 0.4em;
}

a:link, a:visited {
  color: #162B85;
  text-decoration: none;
}
a:hover, a:focus {
  color: #162B85;
  text-decoration: underline;
}
a:link.kaled, a:visited.kaled {
  color: #162B85;
  text-decoration: none;
}
a:hover.kaled, a:focus.kaled {
  color: #ffffff;
  background: #162B85;
  text-decoration: underline;
}
textarea {
	font-size: 1em;
}
input, select, textarea, .text_false {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
select {
	padding: 4px;
	background: #f8f8f8;
	padding-left: 6px;
	padding-right: 0;
}
input[type="text"], input[type="password"], input[type="number"], textarea, .text_false {
	padding: 4px;
	padding-left: 6px;
	padding-right: 0;

	-moz-box-shadow: inset 1px 1px 1px #bebebe;
	-webkit-box-shadow: inset 1px 1px 1px #bebebe;
	box-shadow: inset 1px 1px 1px #bebebe;
}
input[type="text"], input[type="password"], input[type="number"], textarea, select, .text_false {
	border: 1px solid #B7B6AE;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	border: 1px solid #ffffff;
	margin: 0px;
	padding: 3px;
	padding-left: 8px;
	padding-right: 8px;
	color: #ffffff;
	font-size: 0.86em;
	background-image: url("../pic/btn_action.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	-moz-box-shadow: 1px 1px 2px #908f8f;
	-webkit-box-shadow: 1px 1px 2px #908f8f;
	box-shadow: 1px 1px 2px #908f8f;
}
input.inp_edit {
	background: #f7f9fb;
	text-align: center;
}
input.datesave {
	background: #fdf9fe;
	text-align: center;
	padding: 4px;
	width: 100px;
}
input#such_ne {
	padding-top: 1px;
}
.db_main input.inp_place {
	width: 60px;
}
.db_mat input.inp_place {
	width: 150px;
}
.db_zaw input.inp_place {
	width: 65px;
	height: 12px;
	font-size: 0.95em;
}
.db_mat_m input.inp_place {
	width: 30px
}
.db_mat_p input.inp_place,
.db_zaw_p input.inp_place {
	width: 38px;
	height: 12px;
	font-size: 0.95em;
}
.chkl_vorlagen input.inp_place {
	width: 480px;
}
.chkl_eingaben input.inp_place {
	width: 35px;
	text-align: right;
	padding-right: 0.5em;
}
.manual_year input.inp_place {
	width: 38px;
	text-align: center;
	padding: 0;
}
.text_false {
	overflow: auto;
}
#kalender .shadow {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	-moz-box-shadow: 1px 1px 3px #888888;
	-webkit-box-shadow: 1px 1px 3px #888888;
	box-shadow: 1px 1px 3px #888888;
}

.details .lv2table .todo input {
	width: 110px;
	text-align: left;
}
.details .lv2table .todow input {
	width: 280px;
	text-align: left;
}
.details .lv2table a {
	margin: 0px;
}

.lv2table input[type="submit"] {
	font-size: 1em;
}
.table_padding td {
	padding: 0.6em;

	input[type="text"], input[type="password"] {
		padding: 4px;
		border: 1px solid #B7B6AE;

		-moz-box-shadow: inset 1px 1px 1px #444444;
		-webkit-box-shadow: inset 1px 1px 1px #444444;
		box-shadow: inset 1px 1px 1px #444444;
	}
}
.relativ, .rel {
	position: relative;
}

.loginput {
	margin-bottom: 1em;
	width: 170px;
}
.profilinput,
.profilupdate,
.poinput {
	width: 180px;
}
#logoutput {
	color: #e90000;
	width: 155px;
	margin-bottom: 1em;
	font-size: 0.9em;
}
#container {
	position: relative;
	display: inline-block;
	min-width: 98.4%;
	margin-left: 0.2%;
}
#startcont {
	position: relative;
	width: 270px;
	padding: 3em;
	padding-top: 4.5em;
	padding-bottom: 3.2em;
	margin-top: 5%;
	margin-right: auto;
	margin-left: auto;
	background: #ffffff;
	border: 1px solid #414c8a;
	background-image: url("../pic/startbg.jpg");
	background-repeat: repeat-x;
	background-position: left bottom;

	-moz-border-radius: 0.6em;
	-webkit-border-radius: 0.6em;
	border-radius: 0.6em;

	-moz-box-shadow: 1px 1px 9px #bcacb4, inset 0px 0px 20px #ffffff;
	-webkit-box-shadow: 1px 1px 9px #bcacb4, inset 0px 0px 20px #ffffff;
	box-shadow: 1px 1px 9px #bcacb4, inset 0px 0px 20px #ffffff;

	input[type="text"], input[type="password"], textarea, select {
		border: 1px solid #B7B6AE;
		padding: 5px;
	}
}
#kopf {
	position: relative;
	height: 67px;
	border-bottom: 1px solid #8A8A8A;
	color: #000000;
}
#kopf_menue {
	width: 950px;
	height: 27px;
	clear: both;
	position: absolute;
	top: 40px;
	left: 0px;
}
#main {
	padding: 12px;
	padding-top: 20px;
	min-height: 200px;
	width: 99%;
	position: relative;
	border-left: 1px solid #8A8A8A;
	border-right: 1px solid #8A8A8A;
	border-bottom: 1px solid #8A8A8A;
	background: #ffffff;

	-moz-border-radius-bottomleft: 4px;
	-webkit-border-bottom-left-radius: 4px;
	border-bottom-left-radius: 4px;

	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-bottom-right-radius: 4px;

	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	border-top-right-radius: 4px;

	-moz-box-shadow: 1px 2px 2px #818181;
	-webkit-box-shadow: 1px 2px 2px #818181;
	box-shadow: 1px 2px 2px #818181;
}
#fuss {
	width: 99%;
	height: 30px;
	clear: both;
	position: absolute;
}
#startcontainer {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	padding-bottom: 8px;
}
#logo {
	position: absolute;
	top: 20px;
	left: 10px;
}
#btn_logout {
	position: absolute;
	top: 18px;
	right: 10px;
	height: 44px;
	width: 380px;
	font-size: 0.8em;
	text-align: right;
}
#logout_btn {
	position: absolute;
	top: 26px;
	right: 0px;
}
#todotop {
	position: absolute;
	top: 22px;
	right: 60px;
	font-size: 1.1em;
}
#todotop a:link, #todotop a:visited {
  color: #ffffff;
  text-decoration: none;
}
#todotop a:hover, #todotop a:focus {
  color: #ffffff;
  text-decoration: underline;
}

.btn_hm_kopf {
	float: left;
	margin-right: 4px;
}

.detailboxen {
	padding: 8px;
	z-index: 10;
	position: relative;
	top: 0px;
	left: 0px;
}

#intnum {
	font-size: 0.7em;
	float: left;
	margin-top: -5px;
	margin-left: -18px;
	background: #ff0000;
	color: #ffffff;
	padding-left: 2px;
	padding-right: 2px;
	padding-bottom: 1px;
	border: 1px solid #ffffff;

	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;

	-moz-box-shadow: 1px 1px 2px #444444;
	-webkit-box-shadow: 1px 1px 2px #444444;
	box-shadow: 1px 1px 2px #444444;
}

#status_show {
	padding: 8px;
	border: 1px solid #cdcdcd;
	background: #ffffff;
	position: absolute;
	top: 0px;
	right: 0px;
	color: #000000;
	font-size: 0.9em;
	font-weight: normal;
}

.top_btn {
	margin-left: 5px;
}

.filllayer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #ffffff;
	filter:alpha(opacity=70); /* IE */
	opacity:0.7; /* allgemein */
	-moz-opacity:0.7; /* Mozilla */
	-khtml-opacity:0.7; /* KTHML */
	-opera-opacity:0.7; /* Opera */
}
.details .infoinbox {
	position: relative;
}
.details .infoinbox textarea {
	width: 380px;
	height: 30px;
	padding: 4px;
	margin-top: 2px;
	border: 0;

	-moz-box-shadow: inset 1px 1px 2px #444444;
	-webkit-box-shadow: inset 1px 1px 2px #444444;
	box-shadow: inset 1px 1px 2px #444444;
}
.details .infoinbox td {
	padding: 0px;
}
.btninfodel,
.btndel {
	margin-top: 2px;
}
.details .infoinbox .infosave {
	position: absolute;
	left: 368px;
	bottom: 48px;
}
.details .infoinbox {
	position: relative;
	top: 0px;
}
.lv2head a:link, .lv2head a:visited {
  color: #162B85;
  text-decoration: none;
}
.lv2head a:hover, .lv2head a:focus {
  color: #162B85;
  text-decoration: none;
}
.lv2table {
	font-size: 0.9em;
	background: #ffffff;
}
.lv2table .lv3table,
.lv2table .lv3table td {
	background: #ffffff;
}
.lv2table td,
.lv2table .lv3table td,
.details .lv2table td {
	padding: 3px;
	height: 20px;
	border-bottom: 1px solid #C5C9D1;
}
.mitborder {
	border-left: 1px dotted #A8AEBB;
}
.mitborder td {
	border-right: 1px dotted #A8AEBB;
}
.lv2table .infobox td {
	padding: 0px;
	border: 0px;
	background: transparent;
}
.lv2table .dt_save {
	font-size: 0.8em;
	margin-top: -1px;
}
.lv2head td,
.details .lv2head td {
	height: 18px;
	font-size: 1em;
	color: #181843;
	letter-spacing: 0.04em;
	border-top: 1px solid #D9E1DF;
	background-image: url(../pic/lv2head.jpg);
	background-repeat: repeat-x;
	background-position: top center;
}
.tr2col td,
.lv2table .lv3table .tr2col td {
	background: #F2F2F4;
}
.tr2open td {
	border: 0px;
}
.relcover {
	position: relative;
}
.lv3head img, .lv3head span {
	float: left;
}
.lv3head img {
	margin-left: 5px;
}
.lv2table .lv3table .lv3head td {
	height: 16px;
	color: #000000;
	background-image: url(../pic/lv2head.jpg);
	background-repeat: repeat-x;
	background-position: top center;
}
.lv2table .lv3table .tr3col td {
	background: #D5E3EE;
}
.lv2topimg {
	position: absolute;
	left: 2px;
	bottom: 0px;
}
.td_name {
	font-size: 0.94em;
	font-weight: 500;
}


#ulbtnbox {
	position: relative;
	height: 32px;
	width: 220px;
	padding-top: 6px;
}
#ulbtnnewdir {
	position: absolute;
	left: 94px;
}
#startinfos a:link, #startinfos a:visited {
  color: #162B85;
  text-decoration: none;
}
#startinfos a:hover, #startinfos a:focus {
  color: #162B85;
  text-decoration: underline;
}
#startinfos {
	position: relative;
	margin-left: 1em;
	margin-right: auto;
	top: 0.6em;
	width: 100%;
	padding-bottom: 1em;
	font-size: 0.8em;
}
#startinfo {
	position: absolute;
	bottom: -90px;
	left: 40px;
	font-size: 0.80em;
	color: #777075;
}
#powered {
	float: right;
}
.btn_plus {
	float: right;
}
.close {
	position: absolute;
	top: -5px;
	right: -5px;
	z-index: 999999999999;
	width: 18px;

	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;

	-moz-box-shadow: 1px 1px 3px #888888;
	-webkit-box-shadow: 1px 1px 3px #888888;
	box-shadow: 1px 1px 3px #888888;
}
.lv2table .wdin,
.lv2table .wdinwe  {
	border-left: 1px solid #cdcdcd;
}
.lv2table .wdinwe {
	background: #AEB7BD;
}

.top90txt {
	width: 10px;
	height: 16px;
	background: #ffffff;
	padding-left: 3px;
	padding-right: 10px;
	margin-bottom: -5px;
	margin-top: -6px;
	margin-left: -17px;
	margin-right: -17px;
	font-size: 11px;
	letter-spacing: -0.3px;
	border-top: 1px solid #B6B6B6;
	border-right: 1px solid #808CA8;
	border-bottom: 1px solid #B6B6B6;

	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	border-top-right-radius: 4px;

	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

#downloadbox {
	font-size: 0.94em;
	width: 90px;
	padding: 3px;
	padding-right: 10px;
	padding-left: 10px;
	margin-right: 0;
	border: 1px solid #ffffff;
	color: #ffffff;
	font-size: 0.8em;
	z-index: 60000;
	background: #BD130F;
	background-image: url("../pic/alertbtnbg.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;

	-moz-box-shadow: 2px 2px 3px #910000;
	-webkit-box-shadow: 2px 2px 3px #910000;
	box-shadow: 2px 2px 3px #910000;
}
#downloadbox a:link,
#downloadbox a:visited {
  color: #ffffff;
  text-decoration: none;
}
#downloadbox a:hover,
#downloadbox a:focus {
  color: #ffffff;
  text-decoration: underline;
}


/* Kalender */

div#kalender {
	background: #ffffff;
	background-image: url("../pic/lv2kal.jpg");
	background-position: top left;
	background-repeat: repeat-x;
	padding: 6px;
	z-index: 100000;
	color: #000000;
	border: 1px solid #cdcdcd;

	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;

	-moz-box-shadow: 3px 3px 6px #888888;
	-webkit-box-shadow: 3px 3px 6px #888888;
	box-shadow: 3px 3px 6px #888888;
}
div#kalender table {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
.kalender_top {
	text-align: center;
	padding-bottom: 12px;
}
.kalender_wt {
	padding: 2px;
	font-size: 0.9em;
	text-align: center;
}
.kalender_kw {
	padding: 3px;
	font-size: 0.9em;
	text-align: center;
	color: #999999;
}
.kalender_ds {
	padding: 3px;
	font-size: 0.9em;
	text-align: center;
}
.kalender_we {
	padding: 3px;
	font-size: 0.9em;
	text-align: center;
	color: #bb4106;
}
.kalender_we a:link,
.kalender_we a:visited {
  color: #bb4106;
  text-decoration: none;
}
.kalender_we a:hover,
.kalender_we a:focus {
  color: #bb4106;
  text-decoration: underline;
}
#actday {
	border: 2px solid #DC3005;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
a:link#weday, a:visited#weday {
	color: #bb4106;
}
.kalstarta {
	float: right;
}

.infobox, .hisbox, .cw_comment_box {
	position: absolute;
	top: 18px;
	left: 18px;
	width: 650px;
	min-height: 90px;
	padding: 10px;
	z-index: 90000;
	border: 1px solid #4E4E56;
	background: #fffce6;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	-moz-box-shadow: 3px 3px 6px #888888;
	-webkit-box-shadow: 3px 3px 6px #888888;
	box-shadow: 3px 3px 6px #888888;
}
.hisbox {
	background: #E9F0F8;
}
.infobox h3 {
	font-size: 0.9em;
}
.infosave {
	position: absolute;
	right: 26px;
	bottom: 107px;
}
.infoname {
	margin-top: 4px;
	margin-left: 4px;
}
.infobox textarea {
	width: 637px;
	height: 80px;
	padding: 4px;
	margin-top: 2px;
	border: 0;
	background: transparent;
	border: 1px solid #AFA698;

	-moz-box-shadow: inset 1px 1px 2px #444444;
	-webkit-box-shadow: inset 1px 1px 2px #444444;
	box-shadow: inset 1px 1px 2px #444444;
}
#showpagernum {
	height: 32px;
	width: 100%;
}
.pager, .shownum {
	position: relative;
	margin-top: 14px;
	height: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.pager {
	float: left;
	width: 75%;
}
.shownum {
	float: right;
	width: 15%;
	min-width: 100px;
}
.pager span, .shownum span {
	float: left;
	margin-left: 2px;
	margin-right: 2px;
}
.pager a, .shownum a {
	float: left;
	display: block;
	height: 16px;
	font-size: 0.8em;
	text-align: center;
	text-decoration: none;
	padding-top: 1px;
	padding-left: 5px;
	padding-right: 5px;
	margin-left: 2px;
	margin-right: 2px;

	 -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;

	-moz-box-shadow: 0px 0px 2px #cdcdcd;
	-webkit-box-shadow: 0px 0px 2px #cdcdcd;
	box-shadow: 0px 0px 2px #cdcdcd;
}
.shownum a:link,
.shownum a:visited,
.pager a:link,
.pager a:visited {
  color: #727272;
  background-image: url(../pic/pagerbg.jpg);
  background-repeat: repeat-x;
  background-position: top center;
  border: 1px solid #c9c9c9;
}
.shownum a:focus,
.shownum a:hover,
.shownum a:active,
.pager a:focus,
.pager a:hover,
.pager a:active {
  color: #162B85;
  border: 1px solid #162B85;
}

.shownum a:link.current,
.shownum a:visited.current,
.shownum a:focus.current,
.shownum a:hover.current,
.shownum a:active.current,
.pager a:link.current,
.pager a:visited.current,
.pager a:focus.current,
.pager a:hover.current,
.pager a:active.current {
  color: #efefef;
  background-image: url(../pic/pageractbg.png);
  background-repeat: repeat-x;
  background-position: top center;
  border: 1px solid #505050;

	-moz-box-shadow: 0px 0px 2px #505050 inset;
	-webkit-box-shadow: 0px 0px 2px #505050 inset;
	box-shadow: 0px 0px 2px #505050 inset;
}
.shownum span {
	float: right;
}
.shownum a {
	float: right;
}
.timershow {
	font-size: 0.8em;
	color: #848899;
	padding-right: 1.2em;
	padding-top: 0.3em;
}

table .details {
	margin-bottom: 1em;
}

table .details input[type="text"] {
	background: #D3DFF5;
	border: 1px solid #959DB5;
	width: 158px;
	padding: 1px;
	padding-left: 3px;
}
table .details textarea {
	background: #D3DFF5;
	border: 1px solid #959DB5;
	padding: 1px;
	padding-left: 3px;
}
table .details select {
	background: #FAFBFE;
	border: 1px solid #959DB5;
	width: 165px;
	padding: 1px;
	padding-left: 1px;
}
table .details a {
	margin: 2px;
	margin-left: 5px;
	display: block;
	float: left;
}
.lv2table .details td {
	border: 0;
}

.inlinefinder {
	position: absolute;
	top: 18px;
	left: 0px;
	background: #ffffff;
	border: 1px solid #959DB5;
	padding: 4px;
	z-index: 100;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;

	-moz-box-shadow: 2px 2px 4px #666666;
	-webkit-box-shadow: 2px 2px 4px #666666;
	box-shadow: 2px 2px 4px #666666;
}

.todoinbox {
	width: 100%;
}
#overlayall, #matvorlovl {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 10000;
	background: #fcfcfc;
	/* MSIE - PC */
	filter: alpha(opacity=65);
	/* Mozilla 1.6 und frueher */
	-moz-opacity: 0.65;
	opacity: 0.65;
}
#showboxall {
	position: fixed;
	width: 800px;
	max-height: 90%;
	top: 5%;
	left: 50%;
	margin-left: -350px; /* negative H�lfte von width:700px */
	background: #ffffff;
	border: 1px solid #D9E1DF;
	padding: 12px;
	font-size: 0.8em;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 10001;

	-moz-box-shadow: -3px 5px 8px -3px #cdcdcd;
	-webkit-box-shadow: -3px 5px 8px -3px #cdcdcd;
	box-shadow: -3px 5px 8px -3px #cdcdcd;

	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}


#stomap {
	position: fixed;
	width: 91%;
	height: 90%;
	top: 2%;
	left: 49%;
	margin-left: -46%; /* negative Hälfte von width:700px */
	background: #e6e6e6;
	padding: 12px;
	font-size: 0.8em;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 10001;
	border: 12px solid #fff;

	-moz-box-shadow: 1px 5px 8px -3px #6a6868;
	-webkit-box-shadow: 1px 5px 8px -3px #6a6868;
	box-shadow: 1px 5px 8px -3px #6a6868;

	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	border-radius: 1em;
}
#stomap_inhalt, #stomap_overley {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#stomap_overley, #analyse_overley {
  background-image: url(../pic/wait.gif);
  background-repeat: no-repeat;
  background-position: center center;

	filter: alpha(opacity=65);
	/* Mozilla 1.6 und frueher */
	-moz-opacity: 0.65;
	opacity: 0.65;
	z-index: 90000;
}
.stomap_close {
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 90001;
}


.repbox, #repgenbox {
	font-size: 0.8em;
	padding: 6px;
	border: 1px solid #cdcdcd;
	background: #ffffff;
	z-index: 100000;

	-moz-box-shadow: 2px 2px 4px #222222;
	-webkit-box-shadow: 2px 2px 4px #222222;
	box-shadow: 2px 2px 4px #222222;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
.repbox {
	position: absolute;
	right: 0px;
	top: 25px;
}
#repgenbox {
	position: fixed;
	top: 4%;
	left: 50%;
	margin-left: -350px;
	width: 700px;
	height: 90%;
	min-height: 600px;
}
.repbox td {
	padding: 6px;
}
.reppoint {
	padding-top: 2px;
	padding-bottom: 4px;
	border-bottom: 1px dotted #768BA3;
}
#rep_gencont {
	display: flex;
	margin-top: 10px;
	height: 96.4%;
}
#rep_usercont {
	position: absolute;
	top: 32px;
	left: -164px;
	width: 160px;
}
#rep_user {
	position: absolute;
	top: 0px;
	right: 0px;
}
#rep_vorlage, #rep_inhalt, #rep_user {
	border: 1px solid #768BA3;
	padding: 6px;
	background: #ffffff;

  overflow-y : scroll;
  overflow-x : hidden;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
#rep_vorlage, #rep_inhalt {
	-moz-box-shadow: inset 2px 2px 4px #cdcdcd;
	-webkit-box-shadow: inset 2px 2px 4px #cdcdcd;
	box-shadow: inset 2px 2px 4px #cdcdcd;
}
#rep_user {
	-moz-box-shadow: 2px 2px 4px #cdcdcd;
	-webkit-box-shadow: 2px 2px 4px #cdcdcd;
	box-shadow: 2px 2px 4px #cdcdcd;
}
#rep_vorlage {
	display: flex;
	flex-direction: column;
	flex-grow: 0;
	flex-basis: 40%;
}
#rep_inhalt {
	flex-grow: 1;
	margin-left: 10px;
	flex-basis: 60%;

  background-image: url(../pic/rep_inhalt.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}
#rep_vorlage div, #rep_inhalt div {
	border: 1px solid #768BA3;
	padding: 4px;
	margin-bottom: 4px;
	padding-left: 6px;
	height: 17px;
	background: #ffffff;

	-moz-box-shadow: 2px 2px 4px #cdcdcd;
	-webkit-box-shadow: 2px 2px 4px #cdcdcd;
	box-shadow: 2px 2px 4px #cdcdcd;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
#rep_vorlage input,
#rep_inhalt .sort_hand,
#rep_inhalt .rep_color,
#rep_inhalt .rep_rotate {
	float: right;
	margin-left: 11px;
}
#rep_inhalt .sort_hand {
	margin-left: 13px;
}
#rep_inhalt input[type="color"] {
	height: 17px;
	width: 17px;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
#rep_inhalt input[type="text"] {
	height: 10px;
	width: 190px;
}
#rep_inhalt .move_hand {
	float: left;
	margin-right: 8px;
}

.stodetbox, .knddetbox, #chartbox {
	position: absolute;
	left: 0px;
	top: 0px;
	background: #ffffff;
	padding: 15px;
	border: 1px solid #4E4E56;
	z-index: 9000000;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	-moz-box-shadow: 4px 4px 7px #222222;
	-webkit-box-shadow: 4px 4px 7px #222222;
	box-shadow: 4px 4px 7px #222222;
}

.sto_det:hover {
	background: #162B85;
	color: #ffffff;
}

.tddetail {
	position: relative;
	min-height: 200px;
	width: 100%;
}
.detailboxmain, .subdetailboxmain {
	margin-top: 28px;
	margin-bottom: 6px;
	padding: 1em;
	min-height: 200px;
	border: 1px solid #cdcdcd;
	background: #ffffff;

	-moz-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	border-bottom-left-radius: 5px;

	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border-bottom-right-radius: 5px;

	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	border-top-right-radius: 5px;

	-moz-box-shadow: 2px 2px 3px #222222;
	-webkit-box-shadow: 2px 2px 3px #222222;
	box-shadow: 2px 2px 3px #222222;
}
.detailboxkopf, .subdetailboxkopf {
	position: absolute;
	width: 800px;
	height: 28px;
	top: -27px;
	left: 0px;
}
.detailboxkopf input,
.subdetailboxkopf input,
.detailboxkopf div {
	float: left;
}
.detailboxkopf input,
.subdetailboxkopf input {
	margin-right: 6px;
}
.tabnum {
	position: absolute;
	right: 4px;
	top: -2px;
	font-size: 0.82em;
	padding-right: 2px;
	padding-left: 2px;
	border: 1px solid #162B85;
	color: #162B85;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

	-moz-box-shadow: 1px 1px 2px #222222;
	-webkit-box-shadow: 1px 1px 2px #222222;
	box-shadow: 1px 1px 2px #222222;
}

.dettble {
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	border: 1px solid #cdcdcd;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	-moz-box-shadow: 2px 2px 3px #222222;
	-webkit-box-shadow: 2px 2px 3px #222222;
	box-shadow: 2px 2px 3px #222222;
}

.cw_comment, .todo_box {
	max-height: 200px;
	min-height: 45px;
	margin-bottom: 4px;
	padding: 8px;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: auto;
}
.cw_comment {
	background: #fffce6;
	border: 1px solid #cdcdcd;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	-moz-box-shadow: inset 1px 1px 2px #666666;
	-webkit-box-shadow: inset 1px 1px 2px #666666;
	box-shadow: inset 1px 1px 2px #666666;
}
.cw_comment h3 {
	font-size: 0.8em;
}
.cw_comment td {
	border: 0;
	padding: 0;
	padding-bottom: 2px;
}
.cw_com_user {
	font-weight: bold;
	margin-bottom: 2px;
}
.cw_com_save {
	position: absolute;
	top: 8px;
	right: 25px;
}
.cw_com_text {
	width: 637px;
	height: 70px;
	background: #fffce6;
	border: 1px dotted #343433;
}

#susel_box {
	position: absolute;
	top: 25px;
	left: 0px;
	font-size: 0.86em;
	padding: 10px;
	padding-bottom: 16px;
	width: 434px;
	border: 1px solid #4E4E56;
	background: #ffffff;
	z-index: 90000;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	-moz-box-shadow: 4px 4px 7px #666666;
	-webkit-box-shadow: 4px 4px 7px #666666;
	box-shadow: 4px 4px 7px #666666;
}
.suchmatrixtable, #suchmatrixendtable{
	float: left;
	padding-right: 8px;
}
.suchmatrixtable td,
#suchmatrixendtable td {
	padding: 2px;
}
.suchmatrixtable {
	margin-right: 10px;
	background-image: url("../pic/tabletrenn.jpg");
	background-position: top right;
	background-repeat: no-repeat;
	background-size: 1px 100%;
}

.ui-datepicker {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	-moz-box-shadow: 3px 3px 6px #888888;
	-webkit-box-shadow: 3px 3px 6px #888888;
	box-shadow: 3px 3px 6px #888888;
}
.ui-datepicker-title select {
	height: 22px;
}

#sbclose {
	float: right;
}
.btn_close {
	position: absolute;
	right: -6px;
	top: -6px;
}
.inp_auto {
	position: absolute;
	right: 1px;
	top: 1px;
}
.autolernbox {
	position: absolute;
	top: 25px;
	left: 0px;
	font-size: 0.9em;
	width: 250px;
	min-height: 23px;
	max-height: 200px;
	border: 1px solid #4E4E56;
	background: #ffffff;
	z-index: 90000;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: auto;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	-moz-box-shadow: 4px 4px 7px #222222;
	-webkit-box-shadow: 4px 4px 7px #222222;
	box-shadow: 4px 4px 7px #222222;
}
.autolernbox div {
	position: relative;
	padding: 0.3em;
	padding-left: 0.4em;
	border-bottom: 1px solid #cdcdcd;
}
.autolernbox div a {
	display: block;
	width: 216px;
	height: 16px;

	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.autolernbox div input[type="image"] {
	position: absolute;
	right: 10px;
	top: 4px;
}

.truncate {
	display: block;
	width: 130px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.border_top {
	border-top: 1px solid #9F9F9F;
}
.border_right {
	border-right: 1px solid #9F9F9F;
}
.border_left {
	border-left: 1px solid #9F9F9F;
}
.border_non {
	border: 0;
}
.middle_color {
	background: #F9F9F9;
}
.side_color {
	background: #FFFCF0;
}

.inp_txt {
	width: 50px;
	text-align: center;
}


.dateicover {
	text-align: left;
	position: relative;
	z-index: 20000000;
}
.dateibox {
	text-align: left;
	color: #000000;
	font-size: 1em;
	position: absolute;
	left: 0px;
	top: 4px;
	min-width: 800px;
	padding: 6px;
	background: #ffffff;
	border: 1px solid #D9E1DF;
	z-index: 20000000;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	-moz-box-shadow: 2px 2px 6px #222222;
	-webkit-box-shadow: 2px 2px 6px #222222;
	box-shadow: 2px 2px 6px #222222;
}

.dateibox .lv2table td {
	background: #ffffff;
}

.tr2col td,
.lv2table .tr2col td,
.dateibox .tr2col td {
	background: #efecf0;
}
.tr1col td,
.dateibox .tr1col td {
	background: #ffffff;
}
.lv2head td,
.dateibox .lv2head td,
.details .lv2head td {
	height: 18px;
	font-size: 1em;
	color: #181843;
	letter-spacing: 0.04em;
	border-top: 1px solid #D9E1DF;
	background-image: url(../pic/lv2head.jpg);
	background-repeat: repeat-x;
	background-position: top center;
}
#import_box {
	margin-top: 1.2em;
}

#fotobox_viewe {
	position: absolute;
	top: -36px;
	left: -632px;

	width: 600px;
	height: 600px;
	background: #ffffff;
	padding: 1em;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	-moz-box-shadow: 2px 2px 6px #222222;
	-webkit-box-shadow: 2px 2px 6px #222222;
	box-shadow: 2px 2px 6px #222222;
}
#fotobox_inhalt {

	div {
		width: 100%;
		min-width: 600px;
		height: 100%;
		min-height: 600px;
		background: url("../pic/image.png") center center no-repeat;
		background-position: center center;
		background-repeat: no-repeat;
	}

	span {
		display: box;
		position: absolute;
		left: 12px;
		top: 12px;
		background: #ffffff;
		padding: 0.4em;
		padding-right: 0.3em;

		-moz-border-radius-bottomright: 5px;
		-webkit-border-bottom-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}
}

/* Das Hauptfenster: Mehr Luft nach innen */
#customConfirm { 
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #bfbfbf; 
  border-radius: 6px; 
  padding: 28px 28px 20px 28px; /* Mehr Platz zu allen Seiten */
  box-shadow: 0 4px 24px rgba(0,0,0,0.2); 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
  font-size: 15px; /* Text minimal größer */
  width: 460px; /* Fenster einen Hauch breiter für besseren Textfluss */
  max-width: 90%;
  background-color: #ffffff;
  color: #2b2b2b;
  margin: 0;
  text-align: left;
}

/* Der Hintergrund bleibt */
#customConfirm::backdrop { 
  background-color: rgba(0, 0, 0, 0.45) !important; 
}

/* Der Hinweistext: Bessere Lesbarkeit durch Zeilenabstand */
.confirm-body p {
  line-height: 1.6; /* Lockert den Text auf */
  margin: 0 0 28px 0; /* Mehr Abstand nach unten zu den Buttons */
}

/* Die Button-Leiste: Mehr Abstand zwischen den Buttons */
.confirm-buttons { 
  display: flex; 
  justify-content: flex-end; 
  gap: 12px; 
}





/* Die Buttons: Deutlich präsenter durch mehr Padding */
.confirm-buttons button {
  font-family: inherit;
  font-size: 14px; /* Schrift auf den Buttons leicht vergrößert */
  font-weight: 500;
  padding: 8px 22px; /* MEHR PADDING: Macht die Buttons höher und breiter */
  min-width: 95px; /* Mindestbreite erhöht, damit sie stabiler wirken */
  border-radius: 100px; /* Behält den runden Look */
  cursor: pointer;
  border: none;
  outline: none;
}

/* Rechter Button (Ja / OK) */
.chrome-btn-primary {
  background-color: #162B85; 
  color: #ffffff;
}
.chrome-btn-primary:hover {
  background-color: #213ca8;
}

/* Linker Button (Nein / Abbrechen) */
.chrome-btn-secondary {
  background-color: #f1f3f4; 
  color: #162B85; 
  border: 1px solid #dadce0;
}
.chrome-btn-secondary:hover {
  background-color: #e8eaed;
}

/* Der neue Abbrechen-Button (Linksseitig positioniert) */
.chrome-btn-cancel {
  background-color: #fcf0f0;
  color: #cc2121;
  border: 1px solid #cc2121;
  margin-right: auto; /* Schiebt diesen Button nach links und lässt Platz zu den anderen */
}
.chrome-btn-cancel:hover {
  background-color: #faebeb;
  color: #cc2121;
}


/* ===========================================================================
 * ===========================================================================
 * WOCHENSTUNDEN-UEBERSICHT (tab_zeiterf)
 *
 * Alle Regeln haengen an .zeiterf_app und koennen im uebrigen Projekt
 * nichts veraendern. Zwei Ausnahmen: .zeiterf_zeitbox (haengt an body und
 * traegt bewusst KEIN zeiterf_app, damit der nachgeladene
 * Zeiterfassungsteil allein von den Regeln der Anwendung gestaltet wird)
 * und die Stufe fuer .ui-datepicker ganz unten.
 *
 * Stand der Auslieferung: 18.08.2026, 11:40 Uhr
 * ===========================================================================
 * ======================================================================== */

.zeiterf_app
{
	--zeiterf_flaeche:     #FFFFFF;
	--zeiterf_zebra:       #F3F6FB;
	--zeiterf_grund:       #E8ECF3;
	--zeiterf_linie:       #C9D0DC;
	--zeiterf_linie_zart:  #DDE3EC;

	--zeiterf_ink:         #16203A;
	--zeiterf_ink_matt:    #4A5468;
	--zeiterf_ink_zart:    #8B95A7;

	--zeiterf_akzent:      #1E64C3;
	--zeiterf_akzent_hell: #E4EFFC;
	--zeiterf_hover:       #D8E8FD;

	--zeiterf_grau:        #E9EBEF;
	--zeiterf_grau_kopf:   #DCDFE6;

	/* Die Tabelle fuellt den Platz bis zur Fusszeile aus: Fensterhoehe
	   minus allem, was ueber und unter ihr steht (Reiter, Filterzeile,
	   Fusszeile). Passt der Abstand nicht genau, ist --zeiterf_abzug die
	   EINZIGE Zahl, an der gedreht werden muss. */
	--zeiterf_abzug:       280px;
	--zeiterf_hoehe:       calc(100vh - var(--zeiterf_abzug));

	--zeiterf_schatten:    0 1px 2px rgba(16,54,135,.10), 0 2px 6px rgba(16,54,135,.07);
	--zeiterf_schatten_md: 0 2px 4px rgba(16,54,135,.12), 0 10px 28px rgba(16,54,135,.14);

	color: var(--zeiterf_ink);
	font-size: 14px;
}

.zeiterf_app,
.zeiterf_app *,
.zeiterf_app *::before,
.zeiterf_app *::after
{
	box-sizing: border-box;
}

/* ===========================================================================
 * FILTERZEILE
 * ======================================================================== */

.zeiterf_app.zeiterf_kopf,
.zeiterf_app .zeiterf_kopf
{
	align-items: center;
	display: flex;
	gap: 8px;
	margin-bottom: 0.6em;
}

.zeiterf_app .zeiterf_navbtn,
.zeiterf_app .zeiterf_heute,
.zeiterf_app .zeiterf_sel
{
	background: var(--zeiterf_flaeche);
	border: 1px solid var(--zeiterf_linie);
	border-radius: 11px;
	box-shadow: var(--zeiterf_schatten);
	color: var(--zeiterf_ink);
	cursor: pointer;
	font: inherit;
	height: 34px;
}

.zeiterf_app .zeiterf_navbtn
{
	font-size: 17px;
	line-height: 1;
	width: 34px;
}

.zeiterf_app .zeiterf_navbtn[disabled]
{
	box-shadow: none;
	color: var(--zeiterf_ink_zart);
	cursor: default;
	opacity: .45;
}

.zeiterf_app .zeiterf_sel
{
	font-weight: 600;
	padding: 0 8px;
}

.zeiterf_app .zeiterf_sel_leicht
{
	font-weight: 400;
}

.zeiterf_app .zeiterf_heute
{
	padding: 0 14px;
}

.zeiterf_app .zeiterf_navbtn:hover:not([disabled]),
.zeiterf_app .zeiterf_heute:hover,
.zeiterf_app .zeiterf_sel:hover
{
	border-color: #A9B6CB;
	box-shadow: 0 2px 4px rgba(30,100,195,.16), 0 6px 16px rgba(30,100,195,.14);
}

.zeiterf_app .zeiterf_feldname
{
	color: var(--zeiterf_ink_matt);
	margin-left: 10px;
}

.zeiterf_app .zeiterf_legende
{
	color: var(--zeiterf_ink_zart);
	font-size: 12px;
	margin-left: auto;
}

/* ===========================================================================
 * TABELLE
 * ======================================================================== */

.zeiterf_app .zeiterf_karte
{
	background: var(--zeiterf_flaeche);
	border: 1px solid var(--zeiterf_linie);
	border-radius: 15px;
	box-shadow: var(--zeiterf_schatten);
}

/* Eigener Scrollbereich: nur der Tabellenkoerper laeuft, der Kopf bleibt
   per sticky stehen. Die Nachweis-Box wuerde hier abgeschnitten -- sie
   liegt deshalb position: fixed im Fenster und wird vom JS gesetzt. */
.zeiterf_app .zeiterf_scroll
{
	border-radius: 15px;
	max-height: var(--zeiterf_hoehe);
	/* damit bei kleinem Fenster nicht nur noch zwei Zeilen uebrig bleiben */
	min-height: 220px;
	overflow: auto;
}

.zeiterf_app .zeiterf_tab
{
	border-collapse: separate;
	border-spacing: 0;
	font-variant-numeric: tabular-nums;
}

/* Zeilenfarbe liegt auf dem tr -- so faerbt der Hover die GANZE Zeile,
   und die fixierte Namensspalte erbt sie per background: inherit. */
.zeiterf_app .zeiterf_tab tr
{
	background: var(--zeiterf_flaeche);
}

.zeiterf_app .zeiterf_tab tr.tr2col
{
	background: var(--zeiterf_zebra);
}

.zeiterf_app .zeiterf_tab tr:hover
{
	background: var(--zeiterf_hover);
}

.zeiterf_app .zeiterf_tab tr.zeiterf_kopfzeile,
.zeiterf_app .zeiterf_tab tr.zeiterf_kopfzeile:hover
{
	background: var(--zeiterf_grund);
}

.zeiterf_app .zeiterf_tab td
{
	border-bottom: 1px solid var(--zeiterf_linie_zart);
	border-right: 1px solid var(--zeiterf_linie_zart);
	height: 42px;
	padding: 0 6px;
	text-align: center;
}

.zeiterf_app .zeiterf_tab tr:last-child td
{
	border-bottom: 0;
}

/* Der Kopf bleibt stehen, gescrollt wird die Seite -- kein eigener
   Scroll-Kasten, sonst wuerde dessen Rahmen die Nachweis-Box abschneiden. */
.zeiterf_app .zeiterf_kopfzeile td
{
	background: var(--zeiterf_grund);
	border-bottom: 2px solid var(--zeiterf_linie);
	border-right: 1px solid var(--zeiterf_linie);
	color: var(--zeiterf_ink_matt);
	font-size: 12px;
	font-weight: 600;
	height: auto;
	padding: 9px 12px;
	position: sticky;
	top: 0;
	white-space: nowrap;
	z-index: 30;
}

/* Die Ecke oben links ist doppelt fixiert (oben UND links) und muss ueber
   allem anderen liegen. Der Selektor ist bewusst lang: die Regel fuer
   td.zeiterf_name weiter unten setzt z-index 1 und ist sonst gleich
   spezifisch -- als spaetere Regel wuerde sie gewinnen und die Ecke
   verschwaende beim Scrollen unter den Namenszellen. */
.zeiterf_app .zeiterf_tab tr.zeiterf_kopfzeile td.zeiterf_ecke
{
	background: var(--zeiterf_grund);
	z-index: 32;
}

/* --- Wochenspalten: feste Breite, Rest schluckt die Fuellspalte --------- */

.zeiterf_app .zeiterf_tab td.zeiterf_kw,
.zeiterf_app .zeiterf_tab td.zeiterf_zelle
{
	max-width: 120px;
	min-width: 120px;
	width: 120px;
}

.zeiterf_app .zeiterf_kw_nr
{
	display: block;
}

.zeiterf_app .zeiterf_kw_spanne
{
	display: block;
	font-size: 11px;
	font-weight: 500;
	margin-top: 1px;
	opacity: .75;
}

/* Die Koerperzellen der Randwochen sind bewusst HALBDURCHSICHTIG, damit
   Zebra und Hover der Zeile durchkommen. Die Kopfzellen duerfen das auf
   keinen Fall sein -- sonst scheinen beim Scrollen die Zeilen durch den
   fixierten Kopf. Deshalb tragen alle Kopfregeln hier den laengeren
   Selektor tr.zeiterf_kopfzeile: gleich spezifische Regeln entscheidet
   sonst die Reihenfolge in der Datei, und die Koerperregel steht spaeter. */

.zeiterf_app .zeiterf_tab td.zeiterf_rand
{
	background: rgba(125,138,160,.13);
}

/* Wochen des gewaehlten Monats: aktiv */
.zeiterf_app .zeiterf_tab tr.zeiterf_kopfzeile td.zeiterf_aktiv
{
	background: var(--zeiterf_akzent_hell);
	color: var(--zeiterf_akzent);
}

/* Randwochen im Kopf: deckendes Grau */
.zeiterf_app .zeiterf_tab tr.zeiterf_kopfzeile td.zeiterf_rand
{
	background: var(--zeiterf_grau_kopf);
	color: var(--zeiterf_ink_matt);
}

/* --- fixierte Namensspalte --------------------------------------------- */
/* td.zeiterf_name statt .zeiterf_name: die allgemeine td-Regel oben ist
   sonst spezifischer und zieht text-align wieder auf center. */

.zeiterf_app .zeiterf_tab td.zeiterf_name
{
	background: inherit;
	border-right: 2px solid var(--zeiterf_linie);
	left: 0;
	max-width: 300px;
	min-width: 220px;
	overflow: hidden;
	padding-left: 14px;
	position: sticky;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 240px;
	z-index: 1;
}

/* --- Summenspalte, direkt hinter der letzten Woche --------------------- */

.zeiterf_app .zeiterf_tab td.zeiterf_summe
{
	border-left: 2px solid var(--zeiterf_linie);
	font-weight: 700;
	max-width: 176px;
	min-width: 176px;
	width: 176px;
}

/* Der Titel steht mittig ueber der Gruppe aus Knopf, Wert und Knopf --
   der seitliche Innenabstand der Kopfzeile wuerde ihn sonst verschieben. */
.zeiterf_app .zeiterf_tab tr.zeiterf_kopfzeile td.zeiterf_summe_kopf
{
	background: var(--zeiterf_akzent_hell);
	color: var(--zeiterf_akzent);
	padding-left: 6px;
	padding-right: 6px;
	text-align: center;
}

/* Wert und PDF-Knopf teilen sich die Abrechnungsspalte: EIN Kopf
   darueber, darunter zwei feste Bereiche. Die Stunden stehen
   rechtsbuendig mit Abstand, der Knopf mittig in seinem Bereich. */
/* Die drei Teile stehen als Gruppe mittig, nicht auf die Zellbreite
   verteilt -- sonst klaffte zwischen Knopf und Zahl eine Luecke. Die
   feste Mindestbreite des Wertes haelt die Symbole trotzdem in Flucht. */
.zeiterf_app .zeiterf_summe_inhalt
{
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: center;
}

.zeiterf_app .zeiterf_summe_wert
{
	min-width: 58px;
	text-align: right;
}

.zeiterf_app .zeiterf_summe_btn
{
	line-height: 0;
	text-align: center;
	width: 18px;
}

.zeiterf_app .zeiterf_tab td.zeiterf_summe input
{
	cursor: pointer;
	vertical-align: middle;
}

.zeiterf_app .zeiterf_tab td.zeiterf_summe img
{
	vertical-align: middle;
}

/* leere Restspalte: nimmt die uebrige Breite auf */
.zeiterf_app .zeiterf_tab td.zeiterf_fuell
{
	background: inherit;
	border-right: 0;
	width: auto;
}

.zeiterf_app .zeiterf_leer
{
	color: var(--zeiterf_ink_zart);
}

/* --- der klickbare Stundenwert ----------------------------------------- */

/* BEWUSST OHNE z-index: ein positioniertes Element mit eigenem z-index
   bildet einen Stapelkontext, und die z-index 60 der Nachweis-Box wuerde
   dann nur INNERHALB dieser Zelle gelten -- die Werte der folgenden
   Zeilen laegen darueber. Ohne z-index bleibt die Box frei. */
.zeiterf_app .zeiterf_relcover
{
	display: inline-block;
	position: relative;
}

.zeiterf_app .zeiterf_wert
{
	border: 1px solid transparent;
	border-radius: 9px;
	cursor: pointer;
	display: inline-block;
	font-weight: 600;
	min-width: 84px;
	padding: 5px 9px;
	white-space: nowrap;
}

.zeiterf_app .zeiterf_wert:hover,
.zeiterf_app .zeiterf_wert.zeiterf_offen
{
	background: var(--zeiterf_flaeche);
	border-color: var(--zeiterf_akzent);
	color: var(--zeiterf_akzent);
}

.zeiterf_app .zeiterf_klammer
{
	color: var(--zeiterf_ink_zart);
	font-size: 12px;
	font-weight: 500;
}

/* ===========================================================================
 * NACHWEIS-BOX
 * ======================================================================== */

/* KEIN transform auf der Box und auf keinem ihrer Vorfahren -- sonst
   waere sie trotz position: fixed wieder an den Scroll-Kasten gebunden. */
.zeiterf_app .zeiterf_box
{
	background: var(--zeiterf_flaeche);
	border: 1px solid var(--zeiterf_linie);
	border-radius: 15px;
	box-shadow: var(--zeiterf_schatten_md);
	position: fixed;
	text-align: left;
	/* breit genug, dass Adresse und Auftraggeber in eine Zeile passen */
	max-width: 94vw;
	width: 680px;
	z-index: 60;
}

/* Kopf: links wer und wann, rechts die Summen. Er bleibt stehen,
   waehrend die Liste darunter scrollt. */
.zeiterf_app .zeiterf_box_kopf
{
	align-items: center;
	border-bottom: 2px solid var(--zeiterf_linie);
	display: flex;
	gap: 16px;
	padding: 12px 34px 11px 18px;
	position: relative;
}

.zeiterf_app .zeiterf_box_wer
{
	flex: 1;
	min-width: 0;
}

.zeiterf_app .zeiterf_box_summen
{
	display: flex;
	gap: 10px;
}

.zeiterf_app .zeiterf_box_sum
{
	background: var(--zeiterf_akzent_hell);
	border-radius: 11px;
	min-width: 104px;
	padding: 5px 12px 6px;
	text-align: right;
}

.zeiterf_app .zeiterf_box_sum_woche
{
	background: var(--zeiterf_grau);
}

.zeiterf_app .zeiterf_box_sum_txt
{
	color: var(--zeiterf_ink_matt);
	font-size: 11px;
	white-space: nowrap;
}

.zeiterf_app .zeiterf_box_sum_std
{
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.zeiterf_app .zeiterf_box_sum .zeiterf_box_sum_std
{
	color: var(--zeiterf_akzent);
}

.zeiterf_app .zeiterf_box_sum_woche .zeiterf_box_sum_std
{
	color: var(--zeiterf_ink);
}

.zeiterf_app .zeiterf_box_name
{
	font-weight: 600;
}

.zeiterf_app .zeiterf_box_zeit
{
	color: var(--zeiterf_ink_zart);
	font-size: 12px;
	margin-top: 2px;
}

/* Hausform: sitzt in der Ecke und ragt zu 30 % ueber beide Kanten */
.zeiterf_app .zeiterf_box_zu
{
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
	transform: translate(30%, -30%);
}

/* --- Zeilen als echtes Spaltenraster ----------------------------------- */

.zeiterf_app .zeiterf_box_rumpf
{
	/* Rueckfall, falls das JS nicht greift -- ZeiterfBoxSetz() rechnet
	   die tatsaechliche Hoehe aus dem freien Platz im Fenster. */
	max-height: 70vh;
	overflow: auto;
	padding: 4px 18px 14px;
}

/* --- Kopfzeile mit Sortierung ------------------------------------------ */

/* Bleibt beim Scrollen der Liste stehen; das Raster ist identisch mit dem
   der Eintragszeilen, damit die Spalten fluchten. */
.zeiterf_app .zeiterf_pos_kopf
{
	align-items: baseline;
	background: var(--zeiterf_flaeche);
	border-bottom: 1px solid var(--zeiterf_linie);
	color: var(--zeiterf_ink_zart);
	column-gap: 8px;
	display: grid;
	font-size: 11px;
	font-weight: 600;
	/* Feste Spaltenbreiten -- Kopfzeile und Eintragszeile sind getrennte
	   Raster, und auto-Spalten wuerden sich je nach eigenem Inhalt
	   unterschiedlich breit ausrichten. Beide Regeln muessen daher
	   dasselbe Muster tragen.
	   Datum | Baustelle | Auftraggeber | Lfd.Nr. | Art | Stunden */
	grid-template-columns: 78px 92px minmax(0, 1fr) 84px 92px 66px;
	padding: 6px 0 5px;
	position: sticky;
	top: 0;
	z-index: 2;
}

/* nur die Stundenspalte steht rechtsbuendig */
.zeiterf_app .zeiterf_pos_kopf .zeiterf_re
{
	text-align: right;
}

.zeiterf_app .zeiterf_pos_kopf .zeiterf_sort,
.zeiterf_app .zeiterf_pos_kopf > div
{
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Die Nummer darunter sitzt in einem Knopf mit 8px Innenabstand --
   die Beschriftung rueckt um denselben Betrag nach, damit Text auf Text
   steht statt Text auf Knopfkante. */
.zeiterf_app .zeiterf_pos_kopf [data-sort="nr"]
{
	padding-left: 8px;
}

.zeiterf_app .zeiterf_sort
{
	cursor: pointer;
	white-space: nowrap;
}

.zeiterf_app .zeiterf_sort:hover
{
	color: var(--zeiterf_akzent);
}

/* sortierbar, aber gerade nicht aktiv */
.zeiterf_app .zeiterf_sort::after
{
	content: "\2195";
	font-size: 10px;
	margin-left: 3px;
	opacity: .4;
}

.zeiterf_app .zeiterf_sort.zeiterf_auf,
.zeiterf_app .zeiterf_sort.zeiterf_ab
{
	color: var(--zeiterf_akzent);
}

.zeiterf_app .zeiterf_sort.zeiterf_auf::after
{
	content: "\2191";
	opacity: 1;
}

.zeiterf_app .zeiterf_sort.zeiterf_ab::after
{
	content: "\2193";
	opacity: 1;
}

/* --- ein Eintrag je Einsatz -------------------------------------------- */

.zeiterf_app .zeiterf_pos
{
	padding: 5px 0;
}

.zeiterf_app .zeiterf_pos + .zeiterf_pos
{
	border-top: 1px solid var(--zeiterf_linie_zart);
}

.zeiterf_app .zeiterf_pos_zeile
{
	align-items: baseline;
	column-gap: 8px;
	display: grid;
	/* Feste Spaltenbreiten -- Kopfzeile und Eintragszeile sind getrennte
	   Raster, und auto-Spalten wuerden sich je nach eigenem Inhalt
	   unterschiedlich breit ausrichten. Beide Regeln muessen daher
	   dasselbe Muster tragen.
	   Datum | Baustelle | Auftraggeber | Lfd.Nr. | Art | Stunden */
	grid-template-columns: 78px 92px minmax(0, 1fr) 84px 92px 66px;
}

.zeiterf_app .zeiterf_pos_tag
{
	color: var(--zeiterf_ink_matt);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.zeiterf_app .zeiterf_pos_bst
{
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Linksbuendig wie die Beschriftung darueber -- nur die Stundenspalte
   ganz rechts wird rechtsbuendig gesetzt. */
.zeiterf_app .zeiterf_pos_nr
{
	color: var(--zeiterf_ink_matt);
	font-variant-numeric: tabular-nums;
	text-align: left;
	white-space: nowrap;
}

.zeiterf_app .zeiterf_pos_ag
{
	color: var(--zeiterf_ink_matt);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zeiterf_app .zeiterf_pos_std
{
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

/* Adresse, Lage, Auftraggeber und Kunde: unter der Baustellenspalte
   eingerueckt, damit die Kopfzeilen der Eintraege die Liste tragen. */
.zeiterf_app .zeiterf_pos_info
{
	color: var(--zeiterf_ink_matt);
	font-size: 12px;
	line-height: 1.3;
	margin-left: 86px;
	margin-top: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zeiterf_app .zeiterf_pos_aussen .zeiterf_pos_bst,
.zeiterf_app .zeiterf_pos_aussen .zeiterf_pos_std,
.zeiterf_app .zeiterf_box_aussen .zeiterf_pos_bst,
.zeiterf_app .zeiterf_box_aussen .zeiterf_pos_std
{
	color: var(--zeiterf_ink_matt);
	font-weight: 500;
}

.zeiterf_app .zeiterf_box_trenner
{
	color: var(--zeiterf_ink_zart);
	font-size: 12px;
	margin-top: 16px;
	padding-bottom: 2px;
}

.zeiterf_app .zeiterf_box_leer
{
	color: var(--zeiterf_ink_zart);
	padding: 10px 0;
	text-align: center;
}

/* ===========================================================================
 * ART DES EINTRAGES
 * Bewusst ohne Farbe: die Woerter stehen als schlichter Zusatz neben der
 * Nummer, nicht als Auszeichnung.
 * ======================================================================== */

.zeiterf_app .zeiterf_art
{
	color: var(--zeiterf_ink_matt);
	font-size: 12px;
	white-space: nowrap;
}

.zeiterf_app .zeiterf_art0
{
	color: var(--zeiterf_ink_zart);
}

/* ===========================================================================
 * ANKLICKBARE LAUFENDE NUMMER UND DIE ZWEITE BOX
 * ======================================================================== */

/* gleiche Anmutung wie die Wochenzeiten in der Tabelle */
.zeiterf_app .zeiterf_nr_knopf
{
	border: 1px solid var(--zeiterf_linie_zart);
	border-radius: 9px;
	cursor: pointer;
	display: inline-block;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	padding: 2px 8px;
	white-space: nowrap;
}

.zeiterf_app .zeiterf_nr_knopf:hover,
.zeiterf_app .zeiterf_nr_knopf.zeiterf_offen
{
	background: var(--zeiterf_flaeche);
	border-color: var(--zeiterf_akzent);
	color: var(--zeiterf_akzent);
}

/* Der Kasten haengt an body und traegt BEWUSST NICHT die Klasse
   zeiterf_app -- der nachgeladene Bestandsteil soll ausschliesslich von
   den Regeln der Anwendung gestaltet werden. Deshalb hier feste Werte
   statt der Marken oben. Die Breite ist auto: der Kasten legt sich um
   die kleine Tabelle, statt sie zu dehnen. */
.zeiterf_zeitbox
{
	background: #FFFFFF;
	border: 1px solid #C9D0DC;
	border-radius: 15px;
	box-shadow: 0 2px 4px rgba(16,54,135,.12), 0 10px 28px rgba(16,54,135,.14);
	color: #16203A;
	max-width: 90vw;
	min-width: 340px;
	position: fixed;
	width: auto;
	z-index: 70;
}

.zeiterf_zeitbox_kopf
{
	border-bottom: 2px solid #C9D0DC;
	padding: 11px 34px 10px 18px;
	position: relative;
}

.zeiterf_zeitbox_titel
{
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.zeiterf_zeitbox_rumpf
{
	max-height: 62vh;
	overflow: auto;
	padding: 12px 18px 16px;
}

/* Das Schliessen-X sitzt auch hier an der Kante und ragt zu 30 % ueber. */
.zeiterf_zeitbox .zeiterf_box_zu
{
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
	transform: translate(30%, -30%);
}

/* ===========================================================================
 * KNOPF IM KOPF (Baustellen-Pflege)
 * ======================================================================== */

.zeiterf_app .zeiterf_btn
{
	align-items: center;
	background: var(--zeiterf_flaeche);
	border: 1px solid var(--zeiterf_linie);
	border-radius: 11px;
	box-shadow: var(--zeiterf_schatten);
	color: var(--zeiterf_ink);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: 7px;
	height: 34px;
	padding: 0 14px;
}

.zeiterf_app .zeiterf_btn:hover
{
	border-color: #A9B6CB;
	box-shadow: 0 2px 4px rgba(30,100,195,.16), 0 6px 16px rgba(30,100,195,.14);
}

.zeiterf_app .zeiterf_btn_bst
{
	margin-left: auto;
}

/* Fuer die SVG-Symbole gibt es keine Aus-Fassung als Datei -- die
   Farbe nimmt stattdessen das CSS heraus. */
.zeiterf_app .zeiterf_btn_aus
{
	filter: grayscale(1);
	opacity: .4;
}

/* Steht der Knopf davor, braucht die Legende ihren eigenen Abstand */
.zeiterf_app .zeiterf_btn_bst + .zeiterf_legende
{
	margin-left: 16px;
}

/* ===========================================================================
 * GROSSE DIALOGE (Baustellen-Pflege und Abrechnung)
 * ======================================================================== */

.zeiterf_dlg_dunkel
{
	background: rgba(16,32,58,.35);
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 80;
}

.zeiterf_app.zeiterf_dlg
{
	/* schmaler als frueher: die Bezeichnungsspalte braucht die Breite nicht */
	background: var(--zeiterf_flaeche);
	border: 1px solid var(--zeiterf_linie);
	border-radius: 15px;
	box-shadow: var(--zeiterf_schatten_md);
	display: flex;
	flex-direction: column;
	left: 50%;
	max-height: 86vh;
	max-width: 96vw;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 540px;
	z-index: 90;
}

.zeiterf_app.zeiterf_dlg_breit
{
	width: 1180px;
}

/* Die eigene Radius-Angabe ist noetig, sobald die Kopfzeile einen
   Hintergrund traegt (Urlaub gruen, Krank gelb) -- sonst legt sie sich
   rechteckig ueber die runden Ecken des Kastens. 14px = 15px Radius des
   Kastens minus seine 1px Rahmenbreite. Ein overflow: hidden am Kasten
   waere die Alternative, wuerde aber die Datumsauswahl abschneiden. */
.zeiterf_app .zeiterf_dlg_kopfzeile
{
	border-bottom: 2px solid var(--zeiterf_linie);
	border-radius: 14px 14px 0 0;
	flex: 0 0 auto;
	padding: 13px 34px 12px 18px;
	position: relative;
}

.zeiterf_app .zeiterf_dlg_titel
{
	align-items: center;
	display: flex;
	font-size: 15px;
	font-weight: 600;
	gap: 9px;
}

/* Lade-/Speicher-Anzeige, sitzt in .zeiterf_dlg_titel direkt hinter der
   Ueberschrift -- das vorhandene gap: 9px setzt den Abstand automatisch.
   Standardmaessig verborgen, JS blendet sie waehrend eines eigenen
   Ajax-Aufrufs ein (siehe ZEITERF_LADE_ANZ in clix23.js). */
.zeiterf_app .zeiterf_dlg_spinner
{
	height: 15px;
	width: 15px;
}

/* Oben KEIN Innenabstand: die Kopfzeile der Tabelle bleibt mit
   position: sticky am oberen Rand des Kastens stehen, und alles was
   darueber liegt, waere sichtbar durchgelaufener Inhalt. */
/* Weder oben noch unten Innenabstand: Kopfzeile und Hinweis kleben mit
   position: sticky an den Raendern des Kastens, und jeder Abstand
   dahinter waere sichtbar durchlaufender Inhalt. Den Abstand bringen
   die beiden Elemente selbst mit. */
.zeiterf_app .zeiterf_dlg_rumpf
{
	flex: 1 1 auto;
	overflow: auto;
	padding: 0 18px;
}

/* Der Platzhalter gibt dem Kasten seine Groesse, bevor der Inhalt da ist.
   Auf min-height des Kastens allein ist kein Verlass -- ein Flex-Element
   ohne Inhalt faellt darunter zurueck. Hier traegt der Inhalt selbst das
   Mass, das wirkt zuverlaessig. */
.zeiterf_app .zeiterf_dlg_laedt
{
	align-items: center;
	color: var(--zeiterf_ink_zart);
	display: flex;
	justify-content: center;
	min-height: 250px;
	min-width: 560px;
	padding: 14px 0;
}

/* Sammelansicht: dort ist die Tabelle deutlich breiter */
.zeiterf_app.zeiterf_dlg_auto .zeiterf_dlg_laedt
{
	min-width: 820px;
}

/* Abrechnungs-Dialog: fester Kasten, nur die Hoehe muss halten */
.zeiterf_app.zeiterf_dlg_breit .zeiterf_dlg_laedt
{
	min-height: 420px;
	min-width: 0;
}



/* Der Rumpf hat oben keinen Innenabstand -- die Meldung bringt ihn mit */
.zeiterf_app .zeiterf_dlg_hinweis
{
	background: #FDF0E7;
	border: 1px solid #F0C9AC;
	border-radius: 9px;
	margin: 14px 0 12px;
	padding: 8px 12px;
}

/* Der Hinweis bleibt beim Scrollen stehen. Der Innenabstand liegt am
   Text statt am Rumpf, damit die Flaeche darunter deckend bleibt. */
.zeiterf_app .zeiterf_dlg_fuss
{
	background: var(--zeiterf_flaeche);
	bottom: 0;
	border-top: 1px solid var(--zeiterf_linie_zart);
	color: var(--zeiterf_ink_zart);
	font-size: 12px;
	line-height: 1.45;
	margin-top: 14px;
	padding: 10px 0 16px;
	position: sticky;
}

/* Absaetze im Hinweis: eigener Abstand statt eines eng gesetzten Blocks.
   font-size zurueckholen -- das Projekt hat eine globale Regel
   p { font-size: 0.8em }, und ein Element-Selektor schlaegt die
   Vererbung vom umgebenden div. */
.zeiterf_app .zeiterf_dlg_fuss p
{
	font-size: inherit;
	margin: 0;
}

.zeiterf_app .zeiterf_dlg_fuss p + p
{
	margin-top: 7px;
}

/* --- Tabelle in den Dialogen ------------------------------------------- */

.zeiterf_app .zeiterf_dlg_tab
{
	border-collapse: separate;
	border-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.zeiterf_app .zeiterf_dlg_tab tr
{
	background: var(--zeiterf_flaeche);
}

.zeiterf_app .zeiterf_dlg_tab tr.tr2col
{
	background: var(--zeiterf_zebra);
}

.zeiterf_app .zeiterf_dlg_tab td
{
	border-bottom: 1px solid var(--zeiterf_linie_zart);
	height: 34px;
	padding: 2px 6px;
}

.zeiterf_app .zeiterf_dlg_kopf td
{
	background: var(--zeiterf_grund);
	border-bottom: 2px solid var(--zeiterf_linie);
	color: var(--zeiterf_ink_matt);
	font-size: 12px;
	font-weight: 600;
	height: auto;
	padding: 8px 6px;
	position: sticky;
	top: 0;
	white-space: nowrap;
	z-index: 2;
}

.zeiterf_app .zeiterf_dlg_summe td
{
	background: var(--zeiterf_akzent_hell);
	border-top: 2px solid var(--zeiterf_linie);
	font-weight: 700;
}

.zeiterf_app .zeiterf_dlg_leer
{
	color: var(--zeiterf_ink_zart);
	padding: 24px 0;
}

/* --- Eingabefelder ------------------------------------------------------ */

.zeiterf_app .zeiterf_inp
{
	background: var(--zeiterf_flaeche);
	border: 1px solid var(--zeiterf_linie_zart);
	border-radius: 8px;
	color: var(--zeiterf_ink);
	font: inherit;
	padding: 5px 8px;
	width: 100%;
}

.zeiterf_app .zeiterf_inp:focus
{
	border-color: var(--zeiterf_akzent);
	outline: none;
}

.zeiterf_app .zeiterf_inp_zahl
{
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Gelb heisst: hier laesst sich schreiben. Das gilt im gesamten
   Abrechnungs-Dialog -- die vier Zahlenspalten ebenso wie die Felder der
   beiden Boxen darunter. Die Sonderstellung der Spalte Std. steckt
   stattdessen im Tooltip des Feldes. */
.zeiterf_app .zeiterf_abr_tab .zeiterf_inp,
.zeiterf_app .zeiterf_abr_boxen .zeiterf_inp
{
	background: #FFFBF2;
	border-color: #EBD6AE;
}

.zeiterf_app .zeiterf_abr_tab .zeiterf_inp:focus,
.zeiterf_app .zeiterf_abr_boxen .zeiterf_inp:focus
{
	background: var(--zeiterf_flaeche);
	border-color: var(--zeiterf_akzent);
}

/* --- Baustellen-Pflege --------------------------------------------------- */

/* Die Schalterspalte braucht nur die Breite des Schalters plus Luft */
.zeiterf_app .zeiterf_dlg_tab td:last-child
{
	padding-left: 4px;
	padding-right: 4px;
}

/* Die Eingabezeile ist eine Tabellenzeile -- abgesetzt, aber im
   selben Spaltenraster wie die Liste darunter. */
.zeiterf_app .zeiterf_bst_neu td
{
	background: var(--zeiterf_akzent_hell);
	border-bottom: 2px solid var(--zeiterf_linie);
	padding: 6px;
}

.zeiterf_app .zeiterf_kopf_haken
{
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: 5px;
}

.zeiterf_app .zeiterf_kopf_haken input
{
	cursor: pointer;
	margin: 0;
}

/* --- Schalter an/aus ----------------------------------------------------- */
/* Zwei ineinander liegende Spans: aussen die Bahn, innen der Knopf.
   Der Zustand haengt allein an der Klasse zeiterf_schalter_an. */

.zeiterf_app .zeiterf_schalter
{
	background: #C3CAD6;
	border-radius: 11px;
	cursor: pointer;
	display: inline-block;
	height: 22px;
	position: relative;
	transition: background .16s ease;
	vertical-align: middle;
	width: 40px;
}

.zeiterf_app .zeiterf_schalter span
{
	background: #FFFFFF;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(16,54,135,.35);
	height: 16px;
	left: 3px;
	position: absolute;
	top: 3px;
	transition: left .16s ease;
	width: 16px;
}

.zeiterf_app .zeiterf_schalter_an
{
	background: #2E9E52;
}

.zeiterf_app .zeiterf_schalter_an span
{
	left: 21px;
}

.zeiterf_app .zeiterf_schalter:hover
{
	background: #AEB7C6;
}

.zeiterf_app .zeiterf_schalter_an:hover
{
	background: #268746;
}

.zeiterf_app .zeiterf_btn_klein
{
	border-radius: 9px;
	font-size: 13px;
	gap: 5px;
	height: 26px;
	padding: 0 10px;
	white-space: nowrap;
}

.zeiterf_app .zeiterf_bst_aus .zeiterf_inp
{
	color: var(--zeiterf_ink_zart);
}

/* --- Abrechnungs-Dialog -------------------------------------------------- */

/* Nur die Zeilen scrollen. Die Kopfzeile klebt oben (Regel bei
   zeiterf_dlg_kopf), die Summenzeile unten -- beide bleiben damit
   sichtbar, waehrend die Positionen darunter durchlaufen. */
.zeiterf_app .zeiterf_abr_scroll
{
	max-height: 46vh;
	overflow: auto;
}

.zeiterf_app .zeiterf_abr_tab .zeiterf_dlg_summe td
{
	bottom: 0;
	position: sticky;
	z-index: 2;
}

.zeiterf_app .zeiterf_abr_nr
{
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.zeiterf_app .zeiterf_abr_ort
{
	max-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zeiterf_app .zeiterf_abr_boxen
{
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr;
	margin-top: 18px;
}

/* Beide Boxen sind gleich hoch (Raster), das Textfeld fuellt seine Box
   bis nach unten aus -- damit endet es auf derselben Linie wie die
   dritte Eingabezeile rechts. */
.zeiterf_app .zeiterf_abr_box
{
	border: 1px solid var(--zeiterf_linie);
	border-radius: 11px;
	display: flex;
	flex-direction: column;
	padding: 12px 14px 14px;
}

.zeiterf_app .zeiterf_abr_box_titel
{
	font-weight: 600;
	margin-bottom: 10px;
}

.zeiterf_app .zeiterf_abr_bem
{
	flex: 1 1 auto;
	line-height: 1.4;
	min-height: 92px;
	resize: none;
}

.zeiterf_app .zeiterf_abr_gepr
{
	align-items: center;
	display: grid;
	gap: 8px;
	grid-template-columns: 26px 1fr 46px 1fr;
	margin-bottom: 8px;
}

/* Die letzte Zeile endet buendig mit der Unterkante der Box */
.zeiterf_app .zeiterf_abr_gepr:last-child
{
	margin-bottom: 0;
}

/* etwas Luft zwischen Datumsfeld und der Beschriftung */
.zeiterf_app .zeiterf_abr_name
{
	padding-left: 10px;
}

/* Die Datumsauswahl liegt ausserhalb des Dialogs an body -- ohne diese
   Stufe verschwaende sie dahinter. */
.ui-datepicker
{
	z-index: 200 !important;
}

.zeiterf_app .zeiterf_abr_gepr span
{
	color: var(--zeiterf_ink_matt);
	font-size: 12px;
}

/* ===========================================================================
 * URLAUB UND KRANK
 * ======================================================================== */

/* Kraeftiger Strich vor der ersten der beiden Spalten -- so setzen sie
   sich als Block von den Kalenderwochen ab, genau wie die Abrechnung
   dahinter. Die zweite bekommt ihn wieder abgenommen, damit Urlaub und
   Krank zusammengehoerig wirken. */
.zeiterf_app .zeiterf_tab td.zeiterf_abw
{
	background: inherit;
	border-left: 2px solid var(--zeiterf_linie);
	max-width: 42px;
	min-width: 42px;
	padding: 0 2px;
	width: 42px;
}

.zeiterf_app .zeiterf_tab td.zeiterf_abw + td.zeiterf_abw
{
	border-left: 0;
}

/* Die beiden Ueberschriften stehen um 90 Grad gedreht -- so kommt die
   Spalte mit 42px aus, statt sich nach der Wortbreite zu richten. */
.zeiterf_app .zeiterf_tab tr.zeiterf_kopfzeile td.zeiterf_abw_kopf
{
	padding: 6px 2px;
	text-align: center;
	vertical-align: bottom;
}

.zeiterf_app .zeiterf_abw_kopf span
{
	border-radius: 7px;
	display: inline-block;
	line-height: 1;
	padding: 8px 5px;
	transform: rotate(180deg);
	writing-mode: vertical-rl;
}

.zeiterf_app .zeiterf_tab tr.zeiterf_kopfzeile td.zeiterf_abw_kopf1
{
	background: var(--zeiterf_grund);
}

.zeiterf_app .zeiterf_abw_kopf1 span
{
	background: #DCEFE2;
	color: #1F6B3A;
}

.zeiterf_app .zeiterf_tab tr.zeiterf_kopfzeile td.zeiterf_abw_kopf2
{
	background: var(--zeiterf_grund);
}

.zeiterf_app .zeiterf_abw_kopf2 span
{
	background: #F7EEC8;
	color: #7A6314;
}

.zeiterf_app .zeiterf_abw_btn
{
	align-items: center;
	min-height: 30px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 9px;
	color: var(--zeiterf_ink_zart);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: 3px;
	justify-content: center;
	padding: 4px 3px;
}

.zeiterf_app .zeiterf_abw_btn:hover
{
	background: var(--zeiterf_flaeche);
	border-color: var(--zeiterf_akzent);
	color: var(--zeiterf_akzent);
}

/* Liegt im gezeigten Monat etwas vor, tritt der Knopf hervor */
.zeiterf_app .zeiterf_abw_ist
{
	color: var(--zeiterf_akzent);
}

.zeiterf_app .zeiterf_abw_tage
{
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* --- im Dialog ----------------------------------------------------------- */

/* Zeitraeume, die in den gezeigten Monat fallen */
.zeiterf_app .zeiterf_abw_monat td
{
	box-shadow: inset 3px 0 0 var(--zeiterf_akzent);
}

.zeiterf_app .zeiterf_abw_wer
{
	white-space: nowrap;
}

/* Name unter das Datum, nicht daneben. Nebeneinander zwang die Spalte
   zusammen mit white-space: nowrap breiter als der Dialog -- die letzte
   Spalte mit dem Papierkorb wurde dadurch abgeschnitten. */
.zeiterf_app .zeiterf_abw_von
{
	color: var(--zeiterf_ink_zart);
	display: block;
	font-size: 12px;
	margin: 2px 0 0;
}

/* Das Erste-Hilfe-Zeichen ist farbig -- hier soll es dunkelgrau wirken */
.zeiterf_app .zeiterf_abw_grau
{
	filter: grayscale(1) brightness(.45);
}

.zeiterf_app .zeiterf_abw_btn:hover .zeiterf_abw_grau,
.zeiterf_app .zeiterf_abw_ist .zeiterf_abw_grau
{
	filter: grayscale(1) brightness(.25);
}

/* Offener Antrag: das Symbol wird rot. Die Filterkette faerbt jede
   Vorlage zuverlaessig um -- erst auf Schwarz, dann in den Rotton. */
.zeiterf_app .zeiterf_abw_offen img,
.zeiterf_app .zeiterf_abw_offen:hover img
{
	filter: brightness(0) saturate(100%) invert(23%) sepia(94%)
			saturate(4000%) hue-rotate(357deg) brightness(95%) contrast(115%);
}

.zeiterf_app .zeiterf_abw_offen
{
	color: #B3261E;
}

/* ===========================================================================
 * HINWEIS AUF OFFENE ANTRAEGE (Kopf der Uebersicht)
 * ======================================================================== */

/* Gleiche Anmutung wie die uebrigen Knoepfe im Kopf (zeiterf_btn):
   Radius, Hoehe, Schatten und Verhalten beim Ueberfahren -- nur die
   Farben unterscheiden sich, weil sie hier eine Bedeutung tragen. */
.zeiterf_app .zeiterf_offen
{
	align-items: center;
	border: 1px solid var(--zeiterf_linie);
	border-radius: 11px;
	box-shadow: var(--zeiterf_schatten);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: 7px;
	height: 34px;
	margin-left: 8px;
	padding: 0 14px;
	position: relative;
	transition: box-shadow .16s ease, border-color .16s ease;
}

.zeiterf_app .zeiterf_offen_urlaub
{
	background: #E6F4EA;
	border-color: #A8D5B5;
	color: #1F6B3A;
}

.zeiterf_app .zeiterf_offen_urlaub:hover
{
	border-color: #6FBB8A;
	box-shadow: 0 2px 4px rgba(31,107,58,.18), 0 6px 16px rgba(31,107,58,.16);
}

.zeiterf_app .zeiterf_offen_krank
{
	background: #FCF5DC;
	border-color: #E4D08A;
	color: #7A6314;
}

.zeiterf_app .zeiterf_offen_krank:hover
{
	border-color: #CDB255;
	box-shadow: 0 2px 4px rgba(122,99,20,.18), 0 6px 16px rgba(122,99,20,.16);
}

/* Das Symbol steht links vor der Beschriftung */
.zeiterf_app .zeiterf_offen img
{
	display: block;
}

.zeiterf_app .zeiterf_offen_zahl
{
	background: rgba(255,255,255,.75);
	border-radius: 9px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	padding: 1px 7px;
}

/* Der Kasten geht beim Ueberfahren auf -- ohne JavaScript */
.zeiterf_app .zeiterf_offen_box
{
	background: var(--zeiterf_flaeche);
	border: 1px solid var(--zeiterf_linie);
	border-radius: 13px;
	box-shadow: var(--zeiterf_schatten_md);
	color: var(--zeiterf_ink);
	display: none;
	left: 0;
	min-width: 300px;
	padding: 11px 14px 12px;
	position: absolute;
	top: calc(100% + 6px);
	z-index: 50;
}

.zeiterf_app .zeiterf_offen:hover .zeiterf_offen_box
{
	display: block;
}

/* Zwischen Feld und Kasten liegen 6px Luft -- ohne diese unsichtbare
   Bruecke verliert der Zeiger dort den Hover und der Kasten klappt zu,
   bevor man eine Zeile anklicken kann. */
.zeiterf_app .zeiterf_offen_box::before
{
	content: "";
	height: 10px;
	left: 0;
	position: absolute;
	right: 0;
	top: -10px;
}

.zeiterf_app .zeiterf_offen_titel
{
	border-bottom: 1px solid var(--zeiterf_linie_zart);
	font-weight: 600;
	margin-bottom: 6px;
	padding-bottom: 5px;
	white-space: nowrap;
}

/* Jede Zeile oeffnet den Dialog dieser Person */
.zeiterf_app .zeiterf_offen_zeile
{
	border-radius: 7px;
	cursor: pointer;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin: 0 -6px;
	padding: 4px 6px;
	white-space: nowrap;
}

.zeiterf_app .zeiterf_offen_zeile:hover
{
	background: var(--zeiterf_akzent_hell);
	color: var(--zeiterf_akzent);
}

.zeiterf_app .zeiterf_offen_zeile:hover .zeiterf_offen_zeit
{
	color: var(--zeiterf_akzent);
}

.zeiterf_app .zeiterf_offen_zeit
{
	color: var(--zeiterf_ink_matt);
	font-variant-numeric: tabular-nums;
}

/* Kopf der beiden Abwesenheits-Dialoge: Urlaub gruen, Krank gelb */
.zeiterf_app.zeiterf_dlg_urlaub .zeiterf_dlg_kopfzeile
{
	background: #E6F4EA;
	border-bottom-color: #A8D5B5;
}

.zeiterf_app.zeiterf_dlg_krank .zeiterf_dlg_kopfzeile
{
	background: #FCF5DC;
	border-bottom-color: #E4D08A;
}

/* ===========================================================================
 * HAKEN IN DER KOPFZELLE "MONTEUR"
 * ======================================================================== */

/* Titel links, Haken rechts -- beide auf derselben Grundlinie */
.zeiterf_app .zeiterf_tab tr.zeiterf_kopfzeile td.zeiterf_ecke
{
	padding-right: 22px;
}

.zeiterf_app .zeiterf_ecke_titel
{
	display: inline-block;
}

.zeiterf_app .zeiterf_ecke_haken
{
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	float: right;
	gap: 5px;
}

.zeiterf_app .zeiterf_ecke_haken input
{
	cursor: pointer;
	margin: 0;
}

/* Schalter und Freigabe-Vermerk untereinander in derselben Zelle */
.zeiterf_app .zeiterf_abw_ok
{
	line-height: 1.3;
	white-space: nowrap;
}

/* Hinweis im Abwesenheits-Dialog, wenn nur offene Antraege gezeigt werden */
.zeiterf_app .zeiterf_abw_hin
{
	align-items: center;
	background: var(--zeiterf_akzent_hell);
	border-radius: 9px;
	color: var(--zeiterf_ink_matt);
	display: flex;
	font-size: 12px;
	gap: 10px;
	justify-content: space-between;
	margin: 14px 0 10px;
	padding: 7px 12px;
}

.zeiterf_app .zeiterf_abw_um
{
	color: var(--zeiterf_akzent);
	cursor: pointer;
	font-weight: 600;
	text-decoration: underline;
	white-space: nowrap;
}

/* Monteurspalte der Sammelansicht -- fuehrt zu allen Eintraegen der Person */
.zeiterf_app .zeiterf_abw_mo
{
	cursor: pointer;
	font-weight: 600;
	white-space: nowrap;
}

.zeiterf_app .zeiterf_abw_mo:hover
{
	color: var(--zeiterf_akzent);
	text-decoration: underline;
}

/* --- Sammelansicht: Spalten nach Inhalt, Abstand aus dem CSS ----------- */

/* Der Kasten legt sich um die Tabelle, statt eine feste Breite zu haben */
.zeiterf_app.zeiterf_dlg_auto
{
	min-width: 620px;
	width: auto;
}

/* Einzelansicht von Urlaub und Krank: sechs Spalten brauchen mehr als die
   540 px der Grundform. Das :not() nimmt die Sammelansicht aus -- die
   richtet sich weiterhin nach ihrem Inhalt (zeiterf_dlg_auto). */
.zeiterf_app.zeiterf_dlg_urlaub:not(.zeiterf_dlg_auto),
.zeiterf_app.zeiterf_dlg_krank:not(.zeiterf_dlg_auto)
{
	width: 650px;
}

.zeiterf_app .zeiterf_abw_sam td
{
	padding-left: 1em;
	padding-right: 1em;
	white-space: nowrap;
}

/* Namen sind unterschiedlich lang -- diese eine Spalte bleibt breiter */
.zeiterf_app .zeiterf_abw_namesp,
.zeiterf_app .zeiterf_abw_sam .zeiterf_abw_mo
{
	min-width: 200px;
}

/* die letzte Spalte traegt nur den Papierkorb */
.zeiterf_app .zeiterf_abw_sam td:last-child
{
	padding-left: 0;
	padding-right: 8px;
	width: 1%;
}