html {margin:0px; padding:0px;} 
body {margin:0px; padding:0px; height:100%; font-family: verdana,arial,helvetica,ubuntu; background-color: #1E1E1E; font-size: 9pt; }
#main {
        box-sizing: border-box;
        margin: auto;
        position:relative; 
        width: 98vw; 
        padding:10px; 
        color: white;
        }
form {display: inline;}

input[type="text"],input[type="password"] ,textarea {background-color:white;}

img,th,td,table {border:0; border-spacing: 0px;}
table {border-bottom: 1px solid #aaaaaa; border-right: 1px solid #aaaaaa; margin: 0px; border-collapse: collapse;}
td,th {border-top: 1px solid #aaaaaa; border-left: 1px solid #aaaaaa; padding:1px 2px 1px 2px; margin: 0px; }
a {color: #FF4600; text-decoration:none; }
a:hover {color: lime;}
.space {margin-bottom: 10px;}
.mspace {margin-bottom: 5px;}
.nspace {margin-bottom: 3px;}
.event, .h {color:lime;}
.clear {clear: both;}
.unklar {color: red; font-size: 0.9em;}
.g {color: #FF4F00 !important;}
.h {color: lime !important;}
.b {color: #1E90FF; }
.blau {color:#6691FF;}
.small {font-size: 0.8em;}
.j {
    font-size: 1.1em;
    background-color: #008000;
    border-radius: 5px;
    padding: 5px 10px 5px 10px;
    color: white;
    border: 0px;
    display: inline-block;

}
.k {
    background-color: #FF3600 !important;
}
.msg {
    padding: 5px 10px 5px 10px;
    color: #1FFF1F;
    margin: 10px 0px 10px 0px;
    border-radius: 5px;
    display: block;
    clear: both;
    background-color: #4D4D4D;
}

.red {
    padding: 5px 10px 5px 10px;
    color: #FFFFFF;
    margin: 10px 0px 10px 0px;
    border-radius: 5px;
    display: block;
    clear: both;
    background-color: #CB0800;
}

.headmsg{
	background-color: #111111;
	padding: 5px;
	border-radius: 5px;
	font-size: 0.9em;
	margin-top: 10px;
}

.ticon {display: inline-block; margin-left: 3px; position:relative; top: 1px;}


.i {font-size: 1.5em; width: 13vw;}
.cb {position: relative; top: 2px; margin: 0px 5px 0px 0px}
ul {margin-block-start: 7px; margin-block-end: 7px;}
#header {margin-bottom: 10px; padding-bottom: 5px; padding-top: 3px; border-bottom: 1px solid white;  margin-top: 10px; background-color: #262626;}
#header a {display: inline-bloock; color: #00A916; font-size: 1.2em; margin-right: 15px; margin-left: 5px;}
#header .act {font-weight: bold; color: lime;}
#footer {float: right; font-size: 0.7em; color: white; text-align: right; opacity: 0.7; margin-top: 50px;}
.check {background-color: #FF7500; }
.final {background-color: #1B9400; }
h3 {margin-bottom: 5px; padding-top: 0px; margin-top:0px;}

.plain {}

.crew {background-color: #2F2F5D}

.paid {background-color: #293B2C}

.imid {width: 200px;}
.ishort {width: 50px;}

#ulogo {float: right; margin-top: 20px;}

.miniline {
    margin-top: 3px;
    border-bottom: dashed 1px #555555;
    margin-bottom: 3px;
    clear: both;
}

.miniline2 {
    margin-top: 5px;
    border-bottom: dotted 2px #2C4D2C;
    margin-bottom: 5px;
    clear: both;
}

.maxiline {
    margin-top: 8px;
    border-bottom: solid 1px #aaaaaa;
    margin-bottom: 8px;
}

.card {
	background-color: #272727;
	padding: 10px;
	border-radius: 5px;
	line-height: 1.4em;
	margin-top: 15px;
}
.card b {
	color: white; 
	display: block;
	margin-bottom: 10px;
}
.card i {color: #BFBFBF;}
.stock {max-width: 350px; min-height:190px;}

.float_left {float: left; margin-right: 20px;}
.float_right {float: right; margin-right: 20px; margin-left:20px;}

.submit {border: 1px solid black; background-color: #ff4400; color: white; border-radius: 5px; font-size: 1.2em; padding: 3px 5px 3px 5px; margin: 10px 10px 10px 0px;}

#of-savebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5000;
	display: none;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 10px;
	background: #151515;
	border-top: 2px solid #ff4400;
	color: white;
	box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
}

#of-savebar.visible {
	display: flex;
}

#of-savebar button {
	border: 0;
	border-radius: 5px;
	background: #ff4400;
	color: white;
	font-weight: bold;
	padding: 7px 12px;
	cursor: pointer;
}

@media (max-width: 560px) {
	#of-savebar {
		align-items: stretch;
		flex-direction: column;
		text-align: center;
	}
}

.livekey {
    color: #9FFF00;
    font-weight: bold;
}

#logoff { float: right;  }
#logoff span {font-size: 1.2em; color: #1E90FF; }

.extras {margin-top: 15px; padding: 5px; border-radius: 5px;}
.open {background-color: #234223; color: white;}
.locked {background-color: #3C3C3C; color: #BFBFBF;}
.owned {background-color: #344734; color: white;}
.admin {background-color: #662700; color: white;}

/* Codex UI Refresh: Teilnehmerbereich ruhiger und besser mobil nutzbar. */
html {
	background: #181B20;
}

body {
	background: #181B20;
	color: #F3F6FA;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.45;
}

#main {
	width: 100%;
	max-width: 1240px;
	padding: 14px;
}

#ulogo {
	margin-top: 0;
	opacity: 0.9;
}

h2 {
	margin: 8px 0 8px 0;
	font-size: 22px;
	line-height: 1.2;
}

h3 {
	margin: 0 0 12px 0;
	color: #FFFFFF;
	font-size: 17px;
	line-height: 1.25;
}

#header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 14px 0;
	padding: 8px;
	border: 1px solid #343B44;
	border-radius: 8px;
	background: #20252B;
	box-shadow: 0 8px 28px rgba(0,0,0,0.22);
}

#header a {
	display: inline-block;
	margin: 0;
	padding: 7px 9px;
	border-radius: 6px;
	color: #82DF88;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.15;
}

#header a:hover,
#header .act {
	background: #2E3741;
	color: #FFFFFF;
}

#logoff {
	float: none;
	margin-left: auto;
}

#logoff span {
	color: #8DB9FF;
	font-size: 13px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
select,
textarea {
	box-sizing: border-box;
	min-height: 34px;
	max-width: 100%;
	border: 1px solid #47515E;
	border-radius: 6px;
	background: #11161B !important;
	color: #FFFFFF;
	padding: 6px 8px;
	outline: none;
}

textarea {
	line-height: 1.35;
}

input:focus,
select:focus,
textarea:focus {
	border-color: #FF7A1A;
	box-shadow: 0 0 0 2px rgba(255,122,26,0.18);
}

input[readonly],
input[disabled],
select[disabled],
textarea[disabled] {
	opacity: 0.72;
	background: #232A32 !important;
}

input[type="submit"],
input[type="button"],
button,
.submit,
.j {
	min-height: 36px;
	border: 0;
	border-radius: 6px;
	background: #FF7500;
	color: #FFFFFF;
	font-weight: 700;
	padding: 8px 13px;
	cursor: pointer;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.submit:hover {
	filter: brightness(1.08);
}

table {
	border: 1px solid #3C444F;
	background: #15191E;
}

th {
	background: #303741;
	color: #FFFFFF;
	font-weight: 700;
}

td,
th {
	border-color: #3C444F;
	padding: 5px 7px;
}

.card {
	box-sizing: border-box;
	border: 1px solid #343B44;
	border-radius: 8px;
	background: #24282E;
	box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.card b {
	margin-bottom: 8px;
}

.msg,
.red,
.headmsg {
	box-sizing: border-box;
	max-width: min(900px, 100%);
	padding: 10px 12px;
	border-radius: 8px;
}

.msg {
	background: #1F3527;
	color: #BFFFC4;
}

.headmsg {
	border: 1px solid #2F5A36;
	background: #1F3527;
}

.red {
	background: #7E1713;
}

.extras {
	border: 1px solid rgba(255,255,255,0.1);
	padding: 10px;
	border-radius: 8px;
}

.open {background-color: #1F3D29;}
.locked {background-color: #30343A;}
.owned {background-color: #243D2F;}
.admin {background-color: #662700;}

#of-savebar {
	background: #20252B;
	border-top: 2px solid #FF7500;
}

#of-savebar button {
	background: #FF7500;
}

@media (max-width: 760px) {
	html,
	body {
		overflow-x: hidden;
	}
	#main {
		padding: 8px;
	}
	#ulogo {
		float: none;
		text-align: right;
	}
	#ulogo img {
		max-width: 120px;
		height: auto;
	}
	h2 {
		font-size: 19px;
	}
	#header {
		align-items: flex-start;
		margin: 10px 0;
	}
	#logoff {
		width: 100%;
		margin-left: 0;
		text-align: right;
	}
	#header a {
		padding: 6px 7px;
		font-size: 12px;
	}
	.card {
		float: none;
		width: auto !important;
		max-width: 100%;
		margin: 10px 0;
	}
	.float_left,
	.float_right {
		float: none;
		margin-right: 0;
		margin-left: 0;
	}
	input[style*="width"],
	select[style*="width"],
	textarea[style*="width"] {
		max-width: 100% !important;
	}
	table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		font-size: 12px;
	}
	input[type="submit"],
	input[type="button"],
	button,
	.submit {
		width: 100%;
		max-width: 100%;
		white-space: normal;
	}
}

/* Codex Feinschliff: My-Bereich als breite, ruhige Arbeitsfläche mit kompakten Aktionen. */
body.my-auth {
	background: #15191E;
}

body.my-login #main {
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body.my-auth #main {
	width: calc(100vw - 28px);
	max-width: 1540px;
	margin: 14px auto 28px auto;
	padding: 18px;
	border: 1px solid #303843;
	border-radius: 10px;
	background: #1D232B;
	box-shadow: 0 18px 50px rgba(0,0,0,0.26);
}

.my-welcome {
	position: relative;
	min-height: 86px;
	box-sizing: border-box;
	margin-bottom: 12px;
	padding: 16px 190px 16px 16px;
	border: 1px solid #303843;
	border-radius: 8px;
	background: #202731;
	color: #D9E1EC;
}

.my-welcome #ulogo {
	position: absolute;
	top: 16px;
	right: 16px;
	float: none;
	margin: 0;
}

.my-welcome #ulogo img {
	max-width: 164px;
	height: auto;
}

.my-welcome h2 {
	margin-top: 0;
}

.my-welcome-copy {
	
}

.my-welcome-copy p {

	margin: 0;
	color: #D9E1EC;
	line-height: 1.5;
}

.my-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	gap: 10px;
	align-items: start;
	margin-top: 14px;
	clear: both;
}

.my-info-card {
	box-sizing: border-box;
	min-width: 0;
	min-height: 112px;
	padding: 12px 13px;
	border: 1px solid #3A4350;
	border-left: 4px solid #6B7C91;
	border-radius: 8px;
	background: #1A2028;
	color: #DCE6F2;
	box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}

.my-info-card strong {
	display: block;
	margin: 4px 0 6px 0;
	color: #FFFFFF;
	font-size: 15px;
	line-height: 1.25;
}

.my-info-label {
	display: inline-flex;
	align-items: center;
	min-height: 20px;
	margin-bottom: 2px;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(255,255,255,0.08);
	color: #CAD6E4;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.my-info-body {
	color: #DCE6F2;
	line-height: 1.45;
}

.my-info-body p {
	margin: 0 0 8px 0;
}

.my-info-body p:last-child {
	margin-bottom: 0;
}

.my-info-body * {
	max-width: 100%;
	color: inherit !important;
	font-size: inherit !important;
	background: transparent !important;
}

.my-info-body b,
.my-info-body strong {
	display: inline;
	margin: 0;
	color: #FFFFFF !important;
	font-size: inherit !important;
}

.my-info-body a {
	color: #8DD3FF !important;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.my-info-card-lock {
	border-left-color: #FFB000;
	background: #222416;
}

.my-info-card-lock .my-info-label {
	background: rgba(255,176,0,0.16);
	color: #FFE49B;
}

.my-info-card-event {
	border-left-color: #3BA4FF;
	background: #192431;
}

.my-info-card-event .my-info-label {
	background: rgba(59,164,255,0.14);
	color: #B8E1FF;
}

.my-info-card-event .my-info-body {
	max-height: 235px;
	overflow: auto;
	padding-right: 4px;
}

.my-info-card-personal {
	border-left-color: #D777FF;
	background: #251C2E;
}

.my-info-card-personal .my-info-label {
	background: rgba(215,119,255,0.15);
	color: #F0C8FF;
}

.my-lock-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0;
	padding: 0;
	list-style: none;
}

.my-lock-list li {
	padding: 4px 7px;
	border-radius: 999px;
	background: rgba(255,176,0,0.14);
	color: #FFE49B;
	font-size: 12px;
	font-weight: 800;
}

body.my-auth #header {
	flex-wrap: nowrap;
	gap: 4px;
	margin: 12px 0 16px 0;
	padding: 6px;
	border-color: #303B47;
	background: #171D24;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
}

body.my-auth #header a {
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 8px 7px;
	border: 1px solid #374452;
	border-radius: 6px;
	background: #222B35;
	font-size: 14px;
	line-height: 1;
	box-shadow: inset 0 -2px 0 rgba(255,255,255,0.03);
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

body.my-auth #header a:hover {
	border-color: #506174;
	background: #2A3541;
	color: #FFFFFF;
}

body.my-auth #header a.act {
	border-color: #FF7500;
	background: #303741;
	color: #FFFFFF;
	box-shadow: inset 0 -1px 0 #FF7500;
}

body.my-auth #header .my-manage-link {
	color: #FFB000;
}

body.my-auth #header .my-manage-link.act {
	color: #FFFFFF;
}

#logoff {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding-left: 12px;
	border-left: 1px solid #3A4350;
}

#logoff span {
	display: inline-block;
	max-width: 132px;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #DDE7F5;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

body.my-auth #header a.my-logout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 1px solid #4B5563;
	border-radius: 6px;
	background: #2B333E;
	color: #DDE7F5;
	font-size: 0;
}

body.my-auth #header a.my-logout:hover {
	background: #3B4654;
	color: #FFFFFF;
}

.my-logout svg {
	width: 17px;
	height: 17px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

input[type="submit"],
input[type="button"],
button {
	min-height: 30px;
	border: 1px solid #47515E;
	border-radius: 5px;
	background: #303741;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.1;
	padding: 5px 9px;
	cursor: pointer;
}

input[type="submit"].submit,
input[type="button"].submit,
button.submit,
.submit,
.j,
#of-savebar button {
	min-height: 36px;
	border: 0;
	border-radius: 6px;
	background: #FF7500;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 800;
	padding: 8px 13px;
}

input[type="submit"].submit:hover,
input[type="button"].submit:hover,
button.submit:hover,
.submit:hover,
.j:hover,
#of-savebar button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
	filter: brightness(1.08);
}

.my-start-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
	gap: 14px;
	align-items: stretch;
	margin: 12px 0 14px 0;
}

.my-start-grid .card {
	float: none;
	width: auto !important;
	max-width: none;
	min-height: auto;
	margin: 0;
}

.my-start-phone-card {
	background: #1F3527 !important;
	border-color: #315E3B;
}

.my-start-note-card {
	margin-top: 0;
}

body.my-login #login input,
body.my-login #login select,
body.my-login #login textarea {
	background: #FFFFFF !important;
	color: #11151B !important;
	border-color: #B8C0CC !important;
}

body.my-login #login option {
	background: #FFFFFF;
	color: #11151B;
}

@media (max-width: 1100px) {
	body.my-auth #main {
		width: calc(100vw - 16px);
		padding: 12px;
	}
	.my-welcome {
		padding-right: 16px;
	}
	.my-welcome #ulogo {
		position: static;
		text-align: right;
		margin-bottom: 8px;
	}
	.my-info-grid {
		grid-template-columns: 1fr;
	}
	body.my-auth #header {
		flex-wrap: wrap;
	}
	#logoff {
		width: auto;
		margin-left: auto;
	}
}

@media (max-width: 760px) {
	body.my-auth #main {
		width: 100%;
		margin: 0;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}
	body.my-auth #header {
		flex-wrap: wrap;
	}
	body.my-auth #header a {
		font-size: 12px;
	}
	#logoff {
		width: 100%;
		justify-content: flex-end;
		border-left: 0;
		padding-left: 0;
	}
	input[type="submit"],
	input[type="button"],
	button {
		width: auto;
		max-width: 100%;
		white-space: normal;
	}
	.submit,
	#of-savebar button {
		width: 100%;
	}
}