@font-face {
	font-family: 'Assistant';
	font-style: normal;
	font-weight: 200;
	src: url('/css/fonts/Assistant-Light.ttf');
}

@font-face {
	font-family: 'Assistant';
	font-style: normal;
	font-weight: 600;
	src: url('/css/fonts/Assistant-Bold.ttf');
}

:root {
	/* das dunkle grüne */
	--MainColor: #004040;
	--HColor: red; /* Farbe der Überschrift-Texte */
	--AHover: #1c94c4; /* normale Hover-Farbe bei Texten */

	--HGColorSehrHell: #f8f8f8; /*grau-Ton, z.B. für helle Hinterlegungen */
	--HColorSehrHell: #dfdfdf; /*grau-Ton, z.B. Link-Unterstriche */
	--HColorHell: #9f9f9f; /*grau-Ton, z.B. nicht-aktivierte smartLabels */
	--HColorDunkel: #9f9f9f; /*grau-Ton, z.B. Hinterlegung von mit-aktivierten smartLabels */
	--WirColor: #ff7800; /* zum Hervorheben z.B. der Tore von "uns" */
	--HWirColorSehrHell: #ffedde; /* sehr helle Farbe zum Markieren von zuletzt editierten Zeilen etc., angelehnt an WirColor*/
	

}
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

html, body, input, button, textarea, select { /* teilweise für IOS (select) */
	font-family:Assistant, sans-serif;
}
select { /* für IOS */
	font-size: 1em;
	color: var(--MainColor);
}

html, body {
	margin:0;
	padding:0;
	
}

/* Edit und Admin-Titelzeilen: */
h2 span.ETitelDetails {
	font-size: 0.7em;
	margin: 0.3em;;
}

/* Icons (FontAwesome = i) u.a. in der Materialliste bei Items, z.B. Download-Icon bei Links */
/*div.materialliste i.Icon {*/
i.Icon {
	color: #bbb3b3;
	margin-right: 0.4em;
}

/* Aktions-Icon: z.B. für Edit-Icons im Header */
.LinkIcon {
	margin: 0.3em;
	font-size: 0.8em;
}

a {
  text-underline-offset: 0.1em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--IconButtonAColor);
}

h2 .LinkIcon {
	font-size: 0.7em;
	margin: 0.4em;
}

/* allgemeiner Kasten */
div.Kasten {
	border: 1px solid #cacaca;
	background-color: #f7f7f7;
	padding: 0.3em 1em;
	display: inline-block;
	max-width: 100%; /* falls er mal rausragt, z.B. bei Crypt-Link */
	overflow: auto; /* damit man dann darin rollen kann */
	text-overflow: ellipsis;
	margin: 0.5em 0;
}
/* wenn der als ERSTES kommt, dann etwas Abstand: */
div.content div.Kasten:first-child {
	margin-top: 4em;
}

div.InfoKasten {
	border: 1px solid silver;
	padding: 2em;
	text-align: center;
	margin: 1em 0;
}

div.InfoKasten h2 {
	margin-top: 0;
}

/* Allgemeine Formatierung für Anleitungs-Bereiche */
div.Anleitung {
	margin: 0.5em 0;
	position: relative;
	padding: 0 0.8em;
	background-color: #f8f8f8;
	border: 1px solid #eee;
	font-size: 0.9em;
	color: dimgray;
}
div.Anleitung span.PreText {
	font-weight: bold;
}

div.Anleitung p b {
	background-color: #efefef;
	font-weight: normal;
	padding: 0 0.3em;
	margin: 0 0.1em;
}


/* Aktions-Link zum Lied-Anlegen*/ 
div.mitschneiden a.AktionsLink,
div.audioedit a.AktionsLink,
div.materialliste a.AktionsLink {
	border: 1px solid #bcbcbc;
	background-color: #d0d0d0;
	color: white;
	font-weight: bold;
	padding: 0.1em 0.5em;
	text-decoration: none;
	border-radius: 0.4em;
	float: left;
	margin: 0 0.5em 0.9em 0;
}

div.mitschneiden a.AktionsLink:hover,
div.audioedit a.AktionsLink:hover,
div.materialliste a.AktionsLink:hover {
	color: #ff7900 !important;
}

div.mitschneiden span.RechteIcon i,
div.audioedit span.RechteIcon i,
div.materialliste span.RechteIcon i {
	color: #ff7900;
	font-size: 1.1em;
	padding-right: 0.5em;
	position: relative;
}

/* RechteIcon für TN-Liste und TN-Edit */
div.user i.RechteIcon
,div.tnedit i.RechteIcon
{
	color: #bdbdbd;
	font-size: 0.9em;
	padding-left: 0.3em;
	padding-right: 0.3em;
	position: relative;
	top: 0.1em;
}

/* dasselbe für SVG-Icons */
div.user span.RechteIcon span.icon svg g#Spread path 
,div.tnedit span.RechteIcon span.icon svg g#Spread path 
{
	fill: #bdbdbd;
}

div.mitschneiden a.AktionsLink:hover i,
div.audioedit a.AktionsLink:hover i,
div.materialliste a.AktionsLink:hover i{
	color: #ff7900 !important;
}

/* in h1 kleiner (bei Noch-Nicht-Liedern) */
div.mitschneiden div.LiederListe p.KeinLied a.AktionsLink,
div.audioedit div.LiederListe p.KeinLied a.AktionsLink,
div.materialliste div.Lied.IstItemKeinLied h1 a.AktionsLink {
	border: 1px solid #ebebeb;
	background-color: #f4f4f4;
	color: #aeaeae;
	font-weight: normal;
	padding: 0em 0.3em;
	text-decoration: none;
	border-radius: 0.3em;
	margin-right: 0.4em;
	font-size: 0.7em;
}

div.mitschneiden  div.LiederListe p.KeinLied i.RechteIcon,
div.audioedit  div.LiederListe p.KeinLied i.RechteIcon,
div.materialliste div.Lied.IstItemKeinLied h1 i.RechteIcon {
	color: silver;
	font-size: 0.8em;
	padding-right: 0.5em;
	position: relative;
}
/* Ende Aktionslink */

div.mitschneiden p.KeinLied,
div.audioedit p.KeinLied {
	color: grey;
}

div.mitschneiden p.AktivesLied  span.Titel,
div.audioedit p.AktivesLied{
	font-weight: bold;
	padding: 1px;
	background-color: #f8f8f8;
}

div.dropzone {
	position: relative;
	display: inline-block;
	top: -0.2em;
	margin-left: 0;
}

/* allgemeine AJAX-Schaltfläche... toggled an/aus - verwendet z.B. bei "Ablauf-Sichtbar"*/
	div.SF {
		display: inline-block;
		background-color: #f4f4f4;
		border: 1px solid grey;
		border-radius: 0.3em;
		padding: 0.2em 0.4em;
		margin-right: 0.4em;
		font-size:0.8em;
		font-weight: bold;
	}

	div.SF.aktiv {
		background-color: var(--MainColor);
		color: white;
	}
	div.SF {
		background-color: silver;
		color: grey;
	}
	div.SF {
		cursor: pointer ;
	}
	div.SF.wartend  {
		cursor: wait;
	}

	div.SF.wartend {
		opacity: 0.4;
		filter: blur(2px);
		color: grey;
	}

	div.SF.Fehler {
		color: red;
	}

/* ENDE SF allgemein*/ 

/* der Ablauf Sichtbar-Button auf der Edit-Seite (indexseite)*/
div.indexseite div.SF.ASichtbar.aktiv {
	background-color: var(--MainColor);
	color: white;
}
/* nicht sichtbar:*/
div.indexseite div.SF.ASichtbar  {
	background-color: white;
	color:  var(--IconButtonAColorHighlight);
;}


div.MitschnittListe b.Fortschritt {
	background-color: orange;
	color: white;
	font-weight:bold;
	padding: 0 0.3em;
}

.MiniLink {
	font-size: 0.8em;
	background-color: #eee;
	padding: 0.1em 0.2em;
	margin: 0.2em;
}

.MiniLink.inaktiv {
	font-size: 0.8em;
	background-color: #eee;
	padding: 0.1em 0.2em;
	margin: 0.2em;
	color: silver;
}

.MiniLink.Admin {
	font-size: 0.8em;
	background-color: #eee;;
	border: 1px solid red;
	padding: 0.1em 0.2em;
	margin: 0.2em;
	color: silver;
}

div.content h1 {
	font-size:2em;
	/*line-height: 0.8em;*/
}

div.content > h1 {
	margin-top: 0.8em;
}

/* Links/Icons ganz oben */
div.content h1 > a {
	font-size: 1rem;
	padding: 0 0.2em;
	top: -0.2em;
	position: relative;
}

/* Aktionsbuttons in Headline bei Audios etwas kleiner: */
div.content.audios h2 a:nth-child(n+2) {
	font-size:0.8em;
	margin-right: 0.2em;
}


div.content.audios.Lied.LiedKopfBereich h1 > a {
	font-size: 1rem;
	padding: 0 0.7em;
}


/* Formular für Einzel-Datensätze (also keine Listen) */

div.FormEinzelDS p.EingabeFehler {
	border: 1px solid red;
	padding: 1em;
	margin-top: 1em;
}

div.FormEinzelDS form {
	border: 1px solid silver;
	background-color: #f8f8f8;
	padding: 1em;
	margin: 1em 0;
}

div.FormEinzelDS p.Fehler {
	color: red;
}

div.FormEinzelDS form input {
	margin: 0.4em auto;
}

div.FormEinzelDS form input[type="text"] {
	width: 15em;
}

div.FormEinzelDS form input[type="submit"] {
	margin-top: 1em;
}

div.FormEinzelDS  form input.Fehler {
	border: 1px red solid;	
	box-shadow: 0 0 0.9rem #ccc;
}

div.FormEinzelDS  form p {
	margin-top: 1.4em;
}
div.FormEinzelDS  form p:first-child{
	margin-top: 0;
}

div.FormEinzelDS  form label span.Label,
div.FormEinzelDS  form label
{
	/*color:red;*/
	font-size: 1.1em;
}

div.FormEinzelDS  form span.Info {
	/*color:blue;*/
	font-size: 0.8em;
}

div.FormEinzelDS  form span.Info span.Beispiel {
	background-color: #f0f0f0;
	padding: 0 0.2em;
}
div.FormEinzelDS form span.Fehler {
	color: red;
}
/* Info-Kasten */
div.Info {
	border: 1px solid #cacaca;
	background-color: #f7f7f7;
	padding: 0.3em 1em;
	color: #5e5e5e;
	overflow: hidden;
	clear: both;
	margin: 1em -1px;
}

/* erstes Element im Info-Div mit weniger Abstand: */
div.Info h1:first-child
,div.Info h2:first-child
,div.Info h3:first-child {
	margin-top: 0;
}

div.Info h1
, div.Info h2
, div.Info h3 
, div.Info h4 
, div.Info h5 
, div.Info h6 {
	border-bottom: 1px silver solid;
	padding-bottom: 0.2em;
	margin-bottom: 1.0em;
	margin-top: 1.3em;
	color: var(--HColor);
}

div.Info h1 { 	font-size:1.2em; }
div.Info h2 { 	font-size:1em; }
div.Info h3 { 	font-size:1em; }
div.Info h4 { 	font-size:1em; }
div.Info h5 { 	font-size:1em; }
div.Info h6 { 	font-size:1em; }

/* Hotlist */
div.user div.HotList {
	border: 1px solid orange;
	background-color: #fffaf3;
	padding: 0.1em 1em;
	display: inline-block;
}
div.user div.HotList h1 {
	color: red;
	color: #c4c3c3;
	margin-top: 0.2em;
	font-size: 1em;
}
div.user div.HotList h2 {
	color: red;
	color: #7d7d7d;
	margin-top: 2.2em;
	font-size: 1em;
	text-transform: uppercase;
	border-bottom: 1px solid silver;
	text-indent: 0;
	margin-left: 0;
}
div.user div.HotList h3 {
	margin-top: 1.5em;
	font-weight: normal;
	border: none;
	margin-bottom: 0;
	color: #535353;
}
/* erste h mit weniger Abstand */
div.user div.HotList > h2:first-child {
	margin-top: 0.5em;
}
/* erste h3 mit weniger Abstand */
div.user div.HotList h2 + h3
/* das h3 kann auch direkt nach der Hotlist kommen: */
,div.user div.HotList > h3:first-child {
	margin-top: 0.7em;
}
div.user div.HotList p {
  margin: 0.3em 0 0.8em 1em;
}
div.user div.HotList a.Recording {
	color: white;
	font-weight: bold;
	background: red;
	border-radius: 7px;
	/*! text-decoration: none; */
	padding: 0em 0.4em 0.1em;
	margin-left: 0.3em;
}
div.user div.HotList  a.Recording:hover {
  color: white !important;
  background-color: orange !important;
}
/* die Zeit-Diff-Angabe */
div.user div.HotList span.Diff {
	color: #797979;
	font-weight: bold;
}



/* padd: Versionsinfo-Seite more2come */

div.padd h4 + p {
  margin-top: 0;
  font-size: 0.8em;
}

div.padd h4 {
  margin-bottom: 0;
  margin-top: 3em;
  font-size: 1.1em;
}

/* interne Infos unter TN-Name */
p.InfoIntern {
  color: var(--HColorHell);
  margin-left: 1.3em;
  margin-top: 0;
}
/* Login-Warnungen und Status-Icon  - Status-Icon noch nicht verwendet */
span.LoginInfoWarnung, span.Status {
	font-size: 0.8em;
	top: 0.05em;
	position: relative;
	margin-left: 0.1em;
}
span.LoginInfoWarnung.StufeNie {
	color: #e6e6e6;
}
span.LoginInfoWarnung.Stufe1 {
	color: #ffcf9c;
}
span.LoginInfoWarnung.Stufe2 {
	color: #ff8920;
}
span.LoginInfoWarnung.Stufe3 {
	color: #b70000;
}


/* Icon in den Headers der User-Liste und anderen Stellen*/
/* allgemein */
div .HeaderIcon {
	color: silver;
}

/* in den Abschnitten: */
div h2 .HeaderIcon {
	width: 1.5em;
	text-indent: 0;
	font-size: 0.9em;
	margin-left: 0.3em;
	margin-right: 0.2em;	
}

/* beim Gruppennamen oben */
div h1 .HeaderIcon {
	font-size: 0.6em;
	/*! margin-left: 0.7em; */
	margin-right: 0.5em;
	position: relative;
	top: -0.1em;
}


/* Status TN in Gr - wenn TN aktiv, dann ist das DISABLED-Symbol ausgeblendet

Status-Icon noch nicht verwendet

*/
span.Status.aktiv {
	color: silver;
}
span.Status.inaktiv {
	color: red;
}
/* Status Trenner in Gruppen/TN-Liste */
div.AktivStatus h1 {
  font-size: 1em;
  background-color: var(--HColorSehrHell);
  padding: 0.3em 0.2em !important;
  color: var(--IconAColor ) !important;
  margin-top: 3em !important;
}
/* Text darunter */
div.AktivStatus p {
  padding: 0.1em 0.2em;
  color: var(--IconAColor ) !important;
  font-size: 0.9em;
  margin-top: 0.3em !important;
  margin-bottom: 0 !important;
}

/* Takes-Angabe bei Mitschneiden und Materialliste */
span.Takes {
	border: 1px solid #ebebeb;
	background-color: #f3f3f3;
	color: #767676;
	font-weight: bold;
	padding: 0em 0.3em;
	text-decoration: none;
	margin-right: 0.4em;
	font-size: 0.9em;
}

/* Ende EinzelDS-Form */
.wrapper {
	width:95%;
	max-width:1140px;
	margin:0 auto;
	/* padding:0 0 40px; */
	position:relative;
	background-color: white;
}

.clearfix {
	clear: both;
}

html, body, a:link{
	color: var(--MainColor);
}

a:visited  {
	color: #003030;
}

a:active, a:hover  {
	color:var(--AHover);
}

h1, h2, h3 {
	font-weight:normal;
}
h3 {
	border-bottom: 1px solid var(--MainColor);
}
h1, h2, h3 {
	margin-top: 2em;
}

::placeholder {
  opacity: 0.4;
}

input[type=text]:focus,
textarea:focus{
  outline-color: var(--HColorDunkel);
  outline-style: solid;
  /*outline-width: 2px;*/
}

/* auf dem Startformular mittig, kleiner, Abstand: */
form.NeuesEreignis h2 {
	text-align:center;
	font-size:1em;
	margin:30px 0 10px;
}

/* Inputs auf Startseite Ereignis mit etwas Abstand */
form.NeuesEreignis .input {
  padding: 7px;
}

h1.oversized {
	font-size:4em;
	text-transform:uppercase;
}

input, button, textarea {
	font-size:1.3em;
	padding:7px;
	border:1px solid #cacaca;
}
/* etwas Abstand oben innen, damit das auf der gleichen Linie läuft wie die normalen Inputs */
form.AblaufEdit textarea {
  padding-top: 0.5em;
}

/* Überschriften (Trenner) im Edit-Formular fett und grau*/
form.AblaufEdit div.Trenner input[name^='titel'] {
  font-weight: bold;
  color: var(--IconColor);
}

/* nur in Tabelle Ablauf und Einstiegs-Formular */

table.Ablauf input, table.Ablauf textarea
	, form.NeuesEreignis textarea, form.NeuesEreignis input
	, form.AblaufEdit textarea, form.AblaufEdit input {
	
	min-height:51px; /* Special IOS */
	-webkit-appearance:none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
	background:#f8f8f8;
	font-size:1.3em;
	/*color: var(--MainColor);*/
	width:100%;
}

table.Ablauf input
	,form.AblaufEdit input 
	{
	height:50px;
}

table.Ablauf textarea
	,form.AblaufEdit textarea
	{
	height:50px;
	padding-bottom:5px;
	resize:vertical;
	margin:0;
}



/* Lied im Ablauf besonders kennzeichnen: */
form.AblaufEdit .Zeile.IstLied div.ZLied input {
	border-color: #008080; /*   Grundfarbe viel heller  */
	color: #006060;  /* Grundfarbe etwas heller  */
}

/* Label dazu */
form.AblaufEdit div.LiedTitel  {
	position:relative;
}
/*form.AblaufEdit .Zeile.IstLied div.InfoLabel {
	display: block;
	color: white;
	position: absolute;
	top: 0;
	right: 0;
	background-color: var(--MainColor);  Grundfarbe 
	border: var(--MainColor);  Grundfarbe 
	font-weight: bold;
	opacity: 0.3;
	font-size: 0.7em;
	padding: 0 0.4em;
}*/

/* wenn Lied, dann Info-Link bringen, sonst den Lied-Add-Button bringen */
form.AblaufEdit .Zeile div.ZBtnLied span.IstLied,
form.AblaufEdit .Zeile.IstLied div.ZBtnLied span.KeinLied
{
	display: none;
}

/* umgekehrter Fall */
form.AblaufEdit .Zeile.IstLied div.ZBtnLied span.IstLied,
form.AblaufEdit .Zeile div.ZBtnLied span.KeinLied
{
	display: block;
}

/* Formatierung der Icons*/
form.AblaufEdit .Zeile span.icon.button.lied {
  background: var(--MainColor);
  opacity: 0.7;
}
form.AblaufEdit .Zeile span.icon.button.liedadd {
  background: var(--IconButtonAColor);
}

form.AblaufEdit div.LiedTitel div.InfoLabel {
	display: none;
}

.center {
	text-align:center;
}

input[type="submit"], button {
	width:auto !important;
	-webkit-appearance:none;
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
	border-radius: 11px !important;
	background:#ccc  !important;
	cursor: pointer  !important;
	/* damit die Schrift auch bei Kleinbuchstaben etwas mittiger kommt: */
	/*! line-height: 1.2em; */
	box-shadow: black 3px 2px 7px -5px;
	padding: 0.2em 0.4em 0.3em 0.4em;
	margin-inline-end: 0.3em;
	color: var(--MainColor);
	font-size: 1.2em;
	margin-left: 0.2em;
}

input[type="submit"]:disabled, button:disabled
	{
	cursor: default !important;
}

/*.input {
	padding:5px;
}*/

.fullwidth {
	width:100%;
}

.halfwidth {
	width:50%;
	float:left;
}

.flexbox {
	display:flex;
}

.columns {

}

.columns.a {
	flex-grow:1;
	flex-basis:3em;
}

.columns.b {
	flex-grow:3;
}

.columns.ab {
	flex-grow:1;
}

.columns.c {
	flex-grow:2;
	width: 8em
}

.columns.d {
	width: 2.8em;
	flex:none;
}

.input.submit {
	text-align:center;
	margin-top:30px;
}


.input.submit input::after {
	content:'x';
}

.input-optional {
	margin-bottom:20px;
	display:none;
}

.input-optional.show {
	display:block;
}

.input.floated {
	text-align:center;
}

.input.floated input {
	width:51px;
	text-align:center;
}

a:active, a:hover {
  color: var(--IconAHover);
  text-decoration-color: var(--IconAHover);
}

a.chobama-version-info {
	color:red;
	font-size:0.8em;
}


footer {
	border-top: 1px solid #dfdfdf;
	margin:30px 0 0;
	padding:10px;
	clear:both;
	text-align:center;
	font-size: 0.9em;
}

footer, footer a:link, footer a:visited {
	color: grey;
}

footer p {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.padd {
	max-width:500px;
	margin:0 auto;
}

.toggle:hover {
	cursor:pointer;
}

.error {
	color:red;
	text-align:center;
	margin-top:30px;
}

.info {
	text-align:center;
	margin-top:30px;
}

p.with-icon i{
	float:left;
	margin:0 20px 15px 0;
}

p.qr img {
	float:left;
	margin:0 20px 15px 0;
}

p.qr span {
	display:block;
	padding-top:11px;
}

.nowrap {
	white-space:nowrap;
}

.headline {
	margin:20px 0 20px;
	border-top:2px solid var(--MainColor);
}

.headline.fullwidth {
	margin-right:0;
}

.headline .left, .headline .right {
	float:left;
	padding:5px;
}

.headline .left {
	width:65%;
}

.headline .right {
	width:35%;
}

.headline h2 {
	font-size:30px;
	text-align:left;
	font-weight:200;
	margin:5px 0;
}

.headline p {
	margin:5px 0;
}

.headline .right h2,
.headline .right p {
	text-align:right;
}

.headline .stand {
	margin:0px 0px 10px;
	/* font-size:12px; */
}

.column {
	padding:10px 5px;
}

.column .col-2 {
	float:left;
	width:50%;
}

.align-right {
	text-align:right;
	padding-right:30px;
}

/* Header */
header {
	text-align:center;
/* position: sticky;
	top: 1.6em;
*/
}
header img {
	width:50%;
	max-width:365px;
}

/* Debug-Info für Development-Modus */
div.InfoDevelopment {
	border: 1px solid purple;
	background: #8600ac;
	padding: 0 1em;
	color: white;
	display: inline-block;
}

/* Fortschrittsbalken 1-2-3 auf Ereignis-Haupt-Erfassungs-Maske */
.fortschritt {
	width:100%;
	margin-top:30px;
}
.fortschritt ul {
	counter-reset:step;
}

.fortschritt ul {
	margin:0;
	padding:0;
}

.fortschritt li {
	list-style-type: none;
	width: 33.3333%;
	float: left;
	font-size:22px;
	position: relative;
	text-align: center;
	color:#aaa;
}
.fortschritt li::before {
	width: 30px;
	height: 30px;
	content: counter(step);
	counter-increment: step;
	line-height:30px;
	border: 2px solid #aaa;
	display: block;
	text-align: center;
	margin:0 auto 15px;
	border-radius: 50%;
	background-color: white;
	position: relative;
	z-index: 2;
}
.fortschritt li::after {
	width: 100%;
	height: 2px;
	content: '';
	position: absolute;
	background-color:#aaa;
	top: 15px;
	left: -50%;
	z-index: 1;
}
.fortschritt li:first-child::after {
	content: none;
}
.fortschritt li.active {
	color:#000;
}
.fortschritt li.active::before {
	border-color: var(--MainColor);
	width:40px;
	height:40px;
	margin:-7px auto 12px;
	font-size:30px;
	line-height:39px;
}

.fortschritt li.done::before {
	color:#fff;
	border-color: var(--MainColor);
	background:var(--MainColor);
}

.fortschritt li.done + li::after {
	background-color: var(--MainColor);
}

/* Sortierbare Items */
ul.items {
	margin:0;
	padding:0;
	list-style-type:none;
}

ul.items li > div {
	position:relative;
}

.ui-state-highlight {
	height:59px;
	border:2px dashed var(--MainColor);
	background:none;
}

.sortable .action {
	color:#ccc;
	/*width:20px;*/
	flex:none;
	text-align:center;
	padding-top:14px;
}

.sortable .action.trash {
	padding-top:17px;
}

/* das hier wirkt schon, wenn man IRGENDWIE über die Zeile fährt... verwirrend! */
.sortable li:hover .action.handle {
}

.sortable .action.handle:hover {
	color:#2b2b2b;
	cursor:grab;
}

.ui-sortable-helper {
	-webkit-box-shadow:0 0 15px #666;
	-moz-box-shadow:0 0 15px #666;
	box-shadow:0 0 15px #666;
	background:#fff;
}

.sortable .action.trash:hover, .sortable .action.links:hover {
	cursor:pointer;
	color:#2b2b2b;
}

/* Zeile der Sortierung: */
.sortable .Zeile {
  border-radius: 0.8em;
  padding: 0.4em 0.6em 0.4em 0.6em;
  margin: 0.1em;
  position: relative;
  transition: background-color 1s;
}
.sortable .Zeile.selektiert {
  background-color: var(--IconButtonAColorHighlight);
  transition: background-color 0.1s;
}

/* so war es, als es noch ein Awesome-Icon war */
/*
.sortable .Zeile .action.links.select {
  font-size: 1.9em;
  padding-right: 0.4em;
  top: -0.2em;
  position: relative;
}
*/

.sortable .Zeile .action.links  svg {
	margin:0 0.2em;
}

.sortable .Zeile .action.links .icon {
  font-size: 1.2em;
  margin-right: 0.6em;
  top: -0.1em;
  position: relative;
  margin-left: 0;
}

.sortable .Zeile .action.links .icon svg g#Spread path {
  fill: white;
}


.sortable .Zeile .action.links .icon:hover {
  background-color: #2b2b2b;
  cursor: pointer;
}


/* wenn getauscht, eingefügt oder bewegt: */
.sortable .Zeile.highlight {
  background-color: var(--HWirColorSehrHell);
}
/* EditMenue */
div#EditMenue button.inaktiv {
	color: silver;
}

form.AblaufEdit span.icon {
  background-color: var(--IconButtonAColor);
  font-size: 1em;
  padding: 0.0em 0;
  border-radius: 0.3em;
  margin: 0;
}

/* SubMenueEinfuegen */

div.content.indexseite #SubMenue {
  background-color: #f7f7f7;
  border: 1px solid #d6d6d6;
  padding: 0 0.4em;
  display: none;
  position: absolute;
  top: 2em;
  left: 2em;
  box-shadow: 2px 2px 15px -7px black;
  z-index: 100;
}

div.content.indexseite .Zeile.EinfuegenAktiv #SubMenue {
  display: inline-block;
}
  
div.content.indexseite #SubMenue p {
  padding: 0.2em;
  margin: 0.2em;
  color: var(--IconColor);
}

div.content.indexseite #SubMenue p a {
  margin-left: 1em;
}

/* Einfuege-Marke im AblaufEdit */
form.AblaufEdit .EinfuegeMarke {
  position: absolute;
  top: -2px;
  background-color: var(--WirColor);
  height:  2px;
  left: -1em;
  width: 103%;
  display: none;
}

form.AblaufEdit .Zeile.EinfuegenAktiv .EinfuegeMarke {
  display: block;
}

/* Button-Schiene - in Material-Liste und Item-Edit: */
div.ButtonSchiene {
	clear: both;
	position: sticky;
	top: 5px;
	z-index:4;
	float: left;
	background-color: #e3e0e0;
	padding: 0.4em 0.4em;
	border-radius: 10px;
	margin-bottom: 0.4em;
}

/* das EditMenu (auf der Index-Edit-Seite) verschieben wir mit Faustkeil, daher DIESES erst mal auf statig */
div.ButtonSchiene#EditMenue {
	position: static;
}

/* wenn die ButtonSchiene aus dem Bild schiebt, wird die Klasse MenueIstSticky auf den body gesetzt. Dann das Menue auf fixes: */
.MenueIstSticky div.ButtonSchiene#EditMenue {
	position: fixed;
}

/* wenn wir die Button-Schiene lösen, brauchen wir einen Margin, damit das Form nicht nach oben rutscht: */
.MenueIstSticky form.AblaufEdit {
	margin-top: 4em;
}

/* mobil: Abstand wegen Kopfleiste */
@media screen and (max-width:640px) {
	div.ButtonSchiene {
		top: 3.7em;
	}
	/* aber nicht auf den Index-Seiten! */
	div.content.indexseite div.ButtonSchiene {
		top: 5px;
	}
	
}
div.ButtonSchiene button {
	background-color: #eaeaea !important;
	/*! color: var(--IconAColor); */
	border: 1px solid var(--IconAColor);
	border-radius: 6px !important;
	cursor: pointer;
	font-size: 0.9em;
	padding: 0.4em 0.6em 0.4em 0.2em;
}

div.ButtonSchiene button i{
	color: grey;
	width: 1.4em;
	
}

div.ButtonSchiene button.AllesAus,
div.ButtonSchiene.AllesAus button.AllesEin {
	display: inline-block;
}
div.ButtonSchiene.AllesAus button.AllesAus,
div.ButtonSchiene button.AllesEin {
	display: none;
}

div.ButtonSchiene button.Aus, div.ButtonSchiene button.inaktiv {
	color: silver;
	border-color: silver;
}

div.ButtonSchiene button.Klappen {
	margin-right: 0.3em;
}
div.ButtonSchiene button.AlleAufgeklappt,
div.ButtonSchiene.AlleEingeklappt button.AlleEingeklappt {
	display: inline-block;
}
div.ButtonSchiene.AlleEingeklappt button.AlleAufgeklappt,
div.ButtonSchiene button.AlleEingeklappt {
	display: none;
}


/* Ablauftabelle */
table.Ablauf {
	border-collapse:collapse;
	width:100%;
}
table.Ablauf td {
	border:1px solid #DDD;
	padding:0.4em; /* 2024-08-15 10px*/
	font-size:1.1em; /* 2024-08-15 20px*/
	hyphens:auto;
	vertical-align:top;
}

table.Ablauf td:first-child {
	padding-left:2em;
	text-indent:-1.8em;
}

.referenzen {
	font-size: 0.8em;
}

table.Ablauf tr.highlight td {
	background:#EEE;
}

/* Ereignis-Zeilen in Ablauf/Historie und das Ereignis selbst */
.EreignisZeile.markiert, div.markiert p.Auftritt {
  /* background-color: var(--HWirColorSehrHell); */
}


.EreignisMarker, .Auftritt .ETitelZeitpunkt {
  cursor: pointer;
}

.EreignisZeile.markiert .EreignisMarker, .markiert .Auftritt .ETitelZeitpunkt {
  background-color: var(--HWirColorSehrHell);
  border-radius: 0.2em;
  padding: 0 0.2em;
  margin-left: -0.4em;
}

.EreignisZeile.Zukunft::before {
  content: "... ";
}
.EreignisZeile.Zukunft {
  font-style: italic;
}

li.LiedZeile.markiert span.LiedTitel {
  background-color: var(--HWirColorSehrHell);
  border-color: var(--IconButtonAColorHighlight);
}

td.center {
	text-align:center;
}

td.right {
	text-align:right;
}

table.Ablauf tr td.group {
	font-weight:bold;
	background:#c5c5c5;
}

table.Ablauf tr.sum td {
	border:0;
	text-align:right;
	color:#777;
}

/* Umschaltbare Checkbox "sichtbar/unsichtbar" */
/* Checkbox selbst ausblenden */
label.CheckBox input { 
    display: none;
}

label.CheckBox input ~ span {
	cursor: pointer;
	border: 1px solid #d4d4d4;
	border-radius: 0.6em;
	padding: 0.4em;
	background: #f5f2f2;
	cursor: pointer;
}

label.CheckBox input ~ span i {
	color:orange;
}

label.CheckBox input:checked ~ span i {
	color:green;
}

/* an-Box an bei checked, aus-Box bei nicht-checked: */ 
label.CheckBox input:checked ~ span.an,
	label.CheckBox input ~ span.aus {
	display:block;
}
/* an-Box aus bei nicht-checked, aus-Box bei checked: */ 
label.CheckBox input ~ span.an,
	label.CheckBox input:checked ~ span.aus{
	display:none;
}

/* Ende Checkbox spezial*/

tr.trenner {  /* 2024-08-15 */
  background-color: var(--HGColorSehrHell);
}

tr.trenner h2,
tr.trenner p {
	font-weight:bold;
	color:#777;
	text-align:left;
	margin:0;
	font-size: 1.1em; /* 2024-08-15 */
}

tr.trenner p {
	font-weight:normal;
	font-size: 1em; /* 2024-08-15 */
	text-indent:0; /* 2025-03 */
}

.columns.d input {
	text-align:center;
}

.counter {
	font-weight:bold;
	color:#777;
}

a.active:link,
a.active:visited {

}

/* Achtung Bugfix für iOS: auch fürs <td> machen, sonst akzeptiert der das Klick-Event nicht */
td[data-url]:hover,
td[data-url] td {
	cursor:pointer;
	background-color: orange !important;
	color: white;
}

/* Dropdowns */
.ui-autocomplete {
	font-size:23px;
	line-height:23px;
	max-height:400px;
	overflow-y:auto;
}

.ui-menu .ui-menu-item-wrapper {
	padding:5px 1em 5px 29px;
	text-indent:-20px;
}

.ui-menu-item div.ui-state-active,
.ui-menu-item:hover  {
	background:#ddd;
}

.ui-autocomplete span {
	font-size:0.7em;
}

p.highlight {
	line-height:2em;
}

a.group{
	padding:1px 5px 1px 0;
}

a.group.nospan {
	padding-left:5px;
}

a.group:link,
a.group:visited {
	text-decoration:none;
	margin:0 5px;
	color:#000;
	border:1px solid #EEE;
}

a.group.active {
	background:#EEE;
}

a xxxspan {
	background:#c5c5c5;
	padding:2px 5px;
	margin-right:1px;
	font-weight:bold;
}

.cta {
	text-align:right;
}

.cta a:link,
.cta a:visited {
	color:#000;
	background:#ccc;
	text-decoration:none;
	padding:5px 10px;
	border-radius:15px;
	border-color: #ffb300; 
	border-width: 10px;
}

.cta a.highlight:link,
.cta a.highlight:visited {
	color:white;
	background:#ffb300;
}

/* kleiner Hinweis auf die Besitzer-Gruppe bei Materialien */
span.GruppenHinweis {
	background-color: var(--HColorSehrHell);
	padding: 0 0.5em;
	color: var(--IconAColor);
	/*! font-weight: bold; */
	font-size: 0.9em;
	margin-right: 0.3em;
	border: 1px solid var(--IconButtonAColorInaktiv);
	border-radius: 1em;
}
/* Verliehen-Icon kommt ggf., ist ein i=fontawesome */
span.GruppenHinweis i {
	color: var(--HColorDunkel);
	font-size: 0.9em;
	margin-right: 0.1em;
}
span.GruppenHinweis a {
	color: var(--IconAColor);
}
/*
span.VerleihHinweis::after {
	content: "|";
	margin-left: 0.3em;
}
*/
/* 	2020-08-25
	Header-Zeile für Admin-Seiten */
	
.adminheader {
	position: relative;
	text-align: right;
	float: right;
	margin-left: 1em;
	margin-bottom: 1em;
	padding-bottom: 1em;
}

.adminheader img.logo {
	width: 8rem;
	/*max-width: 50%;*/
}

.adminheader a {
  padding: 0 0.7em;
}

.adminheader a:last-child {
  padding-right: 0;
}

.adminheader div.Icons {
	margin-top: 0.6em;
}


/* alle IDs einheitlich: */

span.ID {
	font-size: 0.7em;
	color: grey;
	white-space:nowrap;
}

span.ID::before {
	content: " [ ";
}
span.ID::after {
	content: " ]";
}

span.ID a:link {
	color: grey;
}
span.ID a:visited  {
	color: grey;
}
span.ID a:hover {
	color: black;
	background-color: orange
}

/* Such-Formular */


div.suche div.TrefferZeile {
  display: flex;
  margin: 0.2em 0 0.4em 0;
}
div.suche div.TrefferZeile div.IconBereich {
  line-height: 1.8em;
  min-width: 4.3em;
}
div.suche div.TrefferZeile div.Details {
  margin-left: 0.4em;
  min-width: 76%;
}

/*  Edit-Formulare */
/* unsichtbare Checkboxen - ersetzt durch smart-Checkboxen CBsmart smartCheckbox*/
.InputZeile .CBinvisible {
	display: none; 
}

.InputZeile .CBTrash {
	color: grey;
	cursor: pointer;
}

.InputZeile .CBTrash:hover {
	color: red;
}

.InputZeile.checked .CBTrash {
	color: red;
}


.InputZeile.checked input, .InputZeile.checked span {
	color:silver;
	text-decoration: line-through;
}

.InputZeile.checked span.Stimme {
	color: silver;
	background-color: white !important;
	border-color: grey;
}


.InputZeile.checked select {
	color:silver;
	text-decoration: line-through;
}

.InputZeile .CB {
	/* noch nicht:  cursor: pointer; */
	padding: 0 0.3em;
	margin: 0.1em;
	font-size: 0.9em;
	font-weight: bold;
	color: grey;
	background-color: white;
	border: 1px var(--MainColor) solid;
	border-radius: 3px;
	cursor: pointer;
}


.InputZeile .CB.checked {
	color: red;
}

.InputZeile .CB:hover {
	border-color: #ff8f00;
}

.InputZeile.checked .CB {
	color: silver;
	background-color: white !important;
	border-color: silver;
}

.InputZeile input[type="text"] {
    width: 4em;
    height: auto;
    font-size: 1.2em;
    padding: 0 0.3em;
}

/* ---- smart-Checkboxen ----- */

/* unsichtbare Checkboxen - ersetzt durch smart-Checkboxen CBsmart/smartcheckbox -  evtl. doppelt siehe .InputZeile .CBinvisible*/
.CBinvisible {
	display: none; 
}

/* wenn eine Input-Zeile zum Löschen markiert wird, erhält die die Klasse "checked"... */
.InputZeile .CBTrash {
	color: grey;
}
.InputZeile.checked .CBTrash {
	color: red;
}

/* inaktive Trash-Symbole sind hellgrau: */
.InputZeile .CBTrash.inaktiv {
	color: silver;
}

.InputZeile.checked {
	border-left: 4px solid red;
	margin-left: -4px;
}

.InputZeile.checked input {
	color:silver;
	text-decoration: line-through;
}

.InputZeile.checked select {
	color:silver;
	text-decoration: line-through;
}

.InputZeile.checked label.smartCheckbox input+span.BtnFlaeche  {
	color: silver !important;
	background-color: white !important; 
	border-color: grey;
}

/* ----- SmartCheckboxen siehe Form-Klasse - Input-Art CBsmart ------*/

div.SmartCheckBoxen ul {
  padding-left: 1em;
}

/* die "echte" Checkbox ist immer unsichtbar: */
label.smartCheckbox input,
div.SmartCheckBoxen li label input {
	display: none;
	-webkit-appearance:none;
}

/* das normale Aussehen einer smartCheckbox: */
label.smartCheckbox input+span,
div.SmartCheckBoxen li label input~span.BtnFlaeche  {
	cursor: pointer;
}

/* die Stimmen-Checkboxen sehen so aus:*/
label.smartCheckbox.Stimme input+span {
	padding: 0 0.2em;
	margin: 0.1em;
	font-size: 0.9em;
	font-weight: bold;
	color: grey;
	background-color: white;
	border: 1px grey solid;
	border-radius: 3px;
}

/* in der Auftritts-Histore, Lied-Suche etc.: */
div.SmartCheckBoxen li label input~span.BtnFlaeche  {
	padding: 0 0.2em;
	background-color: #f2f2f2;
	border: 1px #d9d9d9 solid;
	border-radius: 0.4em;
	line-height: 1.6em;
}

/* bei den Ereignissen rechts mehr Rand: */
div.SmartCheckBoxen li label input~span.BtnFlaeche.Ereignis  {
	margin-right: 0.3em;
}

div.SmartCheckBoxen li {
  list-style: none;
  margin: 0.51em auto;
}

/* Aussehen, wenn GECHECKT */
label.smartCheckbox.Stimme input:checked+span {
	color: white;
}	

div.SmartCheckBoxen li label input:checked~span.BtnFlaeche {
	color: white;
	border-color:var(--HColorDunkel);
	background-color: var(--HColorDunkel);
}
/* die Original markierte sieht noch mal anders aus: */
div.SmartCheckBoxen li label input.Aktiviert:checked~span.BtnFlaeche  {
	background-color: var(--MainColor);
}

/* Zusatz-Farben: */
label.smartCheckbox.Stimme.S input:checked+span {
	background-color: #00adbf;
}	
label.smartCheckbox.Stimme.A input:checked+span {
	background-color: #51b000;
}	
label.smartCheckbox.Stimme.F input:checked+span {
	background-color: #00a07d;
}	
label.smartCheckbox.Stimme.M input:checked+span {
	background-color: #5100af;
}	
label.smartCheckbox.Stimme.T input:checked+span {
	background-color: #0051ad;
}	
label.smartCheckbox.Stimme.B input:checked+span {
	background-color: #70004e;
}	
label.smartCheckbox.Stimme.Alle input:checked+span {
	background-color: #8a4803;
}	

label.smartCheckbox.Stimme.Dopplung input:checked+span {
	background-color: #959595;
}	
label.smartCheckbox.Stimme.ZeitenChecken input:checked+span {
	background-color: red;
}	

/* Stimmen-Checkboxen*/
.Stimme.Abstand {
	margin-right: 0.8em;
}

/* Ende smartCheckboxen */

/* Auftritts-Liste: Marker und Flex */

div.AuftrittsHistorie .FlexList label {
  display: flex;
  align-items: baseline;
}

div.AuftrittsHistorie .Auftritt.Vergangenheit {
  margin-top: 1.7em;
}

div.AuftrittsHistorie .LiedInfo {
  margin-left: 0.6em;
  font-style: italic;
}
div.AuftrittsHistorie div.AuftrittsListe {
  margin-left: 3em;
  margin-top: 0.3em;
}

div.AuftrittsHistorie div#Ziele p label {
  display: flex;
  align-items: center;
}
div.AuftrittsHistorie div#Ziele p span {
  margin: auto 0.4em;
}
/* Marker in Auftritts-Listen */
div.AuftrittsHistorie span.Marker {
	color: red;
	font-size: 0.8em;
	font-weight: bold;
	color: white;
	padding: 0 0.2em;
	margin-right: 0.5em;
	margin-top: 0.3em;
	border: 1px solid grey;
}

div.AuftrittsHistorie span.Marker.PL {
	background-color: #38b500;
}
div.AuftrittsHistorie span.Marker.PV {
	background-color: #a1dd4a;
}
div.AuftrittsHistorie span.Marker.PN {
	background-color: #c64aff;
}
div.AuftrittsHistorie span.Marker.AN {
	background-color: #ff5400;
}
div.AuftrittsHistorie span.Marker.AW {
	background-color: #ffae7e;
}
div.AuftrittsHistorie span.Marker.LA {
	background-color: #238400;
}

/* in Überschriften anders: */
div.AuftrittsHistorie h3 .Marker {
  font-size: 0.7em;
  margin-left: 0.4em;
  position: relative;
  top: -0.1em;
}

/* in den Zielen unten auch anders, da steht es rechts */
div.AuftrittsHistorie p .Marker {
  margin-left: 0.3em;
}

/* Hinterlegung von Info-Items */
div.AuftrittsHistorie li.KeinLied {
  background: var(--HGColorSehrHell);
  padding: 0.2em 0.5em;
}

/* wenn Tabellen in so ein DIV eingebettet werden, sind sie seitlich scrollable und sprengen nicht die Ansicht z.B. bei Mobil: */
div.TabStandard {
	overflow-y: hidden;
	overflow-x: auto;
}
div.TabStandard table {
	border-bottom: 1px solid #ddd;
	background-color: #f5f5f560;
	border-collapse: collapse;
	/* line-height: 1.4em; */
}

table.uebersicht {
	/* font-size: 9px; /* hier falsch */
	empty-cells: show;
	border-style: solid;
	border-color: rgb(192, 192, 192) rgb(152, 152, 152) rgb(152, 152, 152) rgb(192, 192, 192);
	background-color:rgb(255,255,255);
	border-width: 1px;
	font-weight: inherit;
	/* padding:100px;   bringt hier nix */
	border-spacing:0px;
	/* border-collapse:collapse;    zieht alle Zellen aufeinander, egal was als border-spacing angegeben ist!  */
	/* margin:10;   macht einen leeren Rahmen um die ganze Tabelle...  */

}
table.uebersicht  td, th {
	border-style: solid;
	border-color: rgb(222,222,222);
	border-width: 0px 1px  1px 0px;
	/* text-align: left; */
	vertical-align: top;
	padding:5px;  /* das hier bringt Abstand zum Rand */
}

table.uebersicht  th {
		text-align: left;
}

table.uebersicht  th {
	color: #666666;
	/* untere Linie etwas dunkler */
	border-color: rgb(222, 222, 222) rgb(222,222, 222) rgb(152, 152, 152) rgb(222, 222, 222);
}	
/* lange Links in Übersicht ggf. abbrechen: */
table.uebersicht td.LinkVorschau {
	max-width: 4em;
	overflow: auto;
	text-overflow: ellipsis;
}
div.ContainerWaveMitH3 {
	position: sticky; 
	position:-webkit-sticky;
	top: 0;
	background-color: white;
	z-index: 1000;
}
div.WaveContainer {
	position: relative;
	/*padding-bottom: 2px;*/
}

div.LiedKopfBereich {
	position: sticky;
	top: 0;
	background-color: white;
	z-index: 1000; 
}

/* ------------------------------------------------ Ablauf-Seite - Anzeige der aktuellen Zeit ----*/ 
table.Ablauf tr.tr-aktiv td {
  background-color: var(--HWirColorSehrHell);
	transition: background-color 1s;
}
table.Ablauf tr.tr-aktiv td:last-child {
  border-right: 6px solid var(--IconButtonAColorHighlight);
}

div#AblaufTabelle {
  position: relative;
}

div#AblaufTabelle div#PositionsZeiger.sichtbar {
	display: block;
}

div#AblaufTabelle div#PositionsZeiger {
	/*border: 1px grey solid;*/
	display: none;
  /*height: 50px;*/
  width: 100%;
  position: absolute;
  /*top: -23px;*/
  left: 0;
  /*! opacity: 0.1; */
  overflow-x: hidden;
  overflow-y: auto;
}
div#AblaufTabelle div#PositionsZeiger.move {
	transition: top 1s;
}
div#AblaufTabelle div#PositionsZeiger div {
  background-color: var(--IconButtonAColorHighlight);
  height: 4px;
  width: 100%;
  /*top: 19px;*/
  left: 0;
  opacity: 0.3;
  /*box-shadow: 0px 0px 3px 3px var(--IconButtonAColorHighlight);*/
  position: relative;
}

#CountDown {
  background-color: var(--IconButtonAColorHighlight);
  border-radius: 13px;
  padding: 0px 13px;
  width: min-content;
  display: none;
  color: white;
  position: relative;
  text-align: center;
  margin-top: 0.4em;
  float: right;
}
div#AblaufTabelle span.Korrektur {
  color: red;
  font-weight: normal;
  font-style: italic;
  font-size: 0.8em;
}

/* in den manuell korrigierten ist die Farbe rot:*/
div#AblaufTabelle tr.manuellkorrigiert span.Korrektur {
  color: red;
  font-weight: bold;
}

#CountDown.sichtbar {
  display: grid;
}
#CountDown span.RestZeit {
  font-weight: bold;
}
/* Dauer-Spalte klein halten */
td.Dauer {
  width: 0;
}
div#AblaufTabelle button {
	font-size: 1em;
	padding:0 0.4em;
}

/* ---------------------------------- Ablauf-Seite ENDE ----*/ 

/*  ------------------------------------------------- Verleihungen-Edit-Seite*/

div.content.verleihungenedit ul {
  list-style-type: none;
  margin: 0;
  padding-left: 0.5em;
}

/* zuletzt editierte Zeile hervorheben:*/
div.content.verleihungenedit tr.highlight {
  background-color: var(--HWirColorSehrHell);
}

/*  Ende Verleihungen-Edit ------ */

/* allgemeine Fehlermeldung-Box */
div.Fehler {
	border: solid 1px var(--HColor);
	background-color: var(--HColorSehrHell);
	padding: 1em 1em;
}

/* allgemeine Warnungs-Box */
div.Warnung {
	display: inline-block;
  border: 1px solid var(--HColor);
  background-color: var(--HWirColorSehrHell);
  margin: 1em 0;
  padding: 0.2em 0.5em;
}

/* ------ Dateilisten (siehe Wartung und Uploads-Seite) ------*/
table.DateiListe {
	border: 1px solid silver;
	vertical-align: top; 
	border-collapse: collapse;
	max-width: 100%;
}

table.DateiListe tr {
	border-top: 1px solid silver;
	/* border: 1px solid grey; */ 
}

table.DateiListe td
,table.DateiListe th{
	border-left: 1px solid #e9e9e9;;
	vertical-align: top;
	padding: 0.1em 0.5em;
}

table.DateiListe th {
	color: grey;
	font-weight:normal;
}

table.DateiListe td attr.Hinweis {
	font-size: 0.8em;
	font-weight: bold;
	background-color: silver;
	color: white;
	padding: 0 0.2em;
}

table.DateiListe tr.Verzeichnis {
  font-weight: bold;
  background-color: grey;
  color: white;
}

table.DateiListe tr {
	display: none;
}
table.DateiListe tr.Verzeichnis
,table.DateiListe tr.Kopf {
	display: inherit;
}

table.DateiListe tr.Fehler {
	display: inherit;
}

table.DateiListe.allesZeigen tr {
	display: inherit;
}

table.DateiListe td .Fehler {
	background-color: red;
	font-weight: bold;
	color: white;
	padding: 0 0.2em;
}

table.DateiListe td.Fehler {
	display: none;
}

div.content.wartung button.AllesZeigen {
  font-size: 1.0em;
  margin: 0.5em 0;
}

/*table.DateiListe td .Problem {*/
.Problem {
	background-color: orange;
	font-weight: bold;
	color: white;
	padding: 0 0.2em;
}

table.DateiListe td.rechts {
	text-align: right;
}
/* ------ ENDE Dateilisten (siehe Wartung und Uploads-Seite) ------*/

/* ------- Material-Liste(n) (sowohl auf der ML-Seite als auch auf der Lied-Seite!) */
div.materialliste div.Lied {
	clear: both;
}

div.materialliste div.Lied h1 {
	text-align: left;
	position: sticky;
	/* ist unschön wegen Button-Leiste... 
	top:80px;
	z-index:4;
	*/
}

div.materialliste div.IstTrenner h1 {
	padding: 0.1em 0.2em;
	background-color: #d5d5d5;
	font-size: 1.0em;
	font-weight: bold;
	color: white;
	margin-top: 2em;
}

div.materialliste div.IstLied h1 {
	border-bottom: 1px #eaeaea solid;
	font-size: 1.3em;
	background-color: whitesmoke;
	padding: 0.2em;
	margin-top: 1.8em;
	margin-bottom: 0.5em;
}

div.materialliste div.IstItemKeinLied h1 {
	font-size: 1.2em;
	padding-top: 0em;
	color: grey;
	margin-bottom: 0em;
}

div.materialliste div.Lied h2  {
	text-align: left;
	position: relative;
	clear: both;
	font-size: 0.8em;
	font-weight: bold;
}

div.materialliste div.Lied h2 span.LT_Name {
	background-color: #004040;
	color: white;
	padding: 0 0.2em 0 0.2em;
}

div.materialliste div.Referenzen {
	margin-left: 4rem;
	margin-top: 0.6em;
	font-size: 0.8em;
}

div.materialliste div.Info {
    margin-left: 1rem;
    font-size: 0.9em;
    margin-bottom: 1rem;
}	
div.materialliste div.IstItemKeinLied div.Info {
	margin-left:8em;
	color: grey;
}

div.materialliste div.L1 {
	position: relative;
	/*! margin-left: 1rem; */
	margin: 1.4rem 0 0 2em;
	/*! left: 0em; */
}
/* das Icon dazu */
/* nur das erste direkt auf div.L1 folgende i-Element */
div.materialliste div.L1 div:first-child > i:first-child,
/* SVG-Icons dito: */
div.materialliste div.L1 div:first-child > span:first-child svg
{
	color: grey;
	font-size: 1rem;
	margin-right: 0.8rem;
	margin-left: 0em;
}
/* Link-Arten-Icon  heller*/
div.materialliste i.LnAIcon {
	color: #c6c6c6;
	font-size: 1rem;
	margin-right: 0.8rem;
}
div.materialliste .L2 {
	position: relative;
	margin-left: 2rem;
	margin-top: 1rem;
	font-size: 0.9rem;
	font-weight: bold;
	color: #b0b0b0;
}
div.materialliste .L3.VonAnderen {
  background-color: #f7f7f7;
  padding: 0 0 0.6em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 3.4em;
}
div.materialliste .L3.VonAnderen > div:first-child {
  color: #575757;
  background-color: #eee;
  padding: 0.0em 0.8em 0 0.3em;
  margin-bottom: 0.5em;
  font-size: 0.9em;
  border-bottom: 1px solid #e6e6e6;
}

div.materialliste .L3 .L3 {
  margin: 0.2rem 0 0 0.5rem;
}



div.materialliste .L3 {
	position: relative;
	margin: 0.2rem 0 0 2rem;
	/*! left: 2rem; */
	/*! right: -112px; */
	/*! margin-left: 3rem; */
}
div.materialliste .L4 {
	position: relative;
	margin: 0.2rem 0;
	margin-left: 3rem;
}
/* Admin/Edit-Icons anders:*/
div.materialliste a.AdminEdit i {
	color: #a2a2a2;
	font-size: 0.9rem;
	margin-left: 0.3rem;
	margin-right: 0.3em;
}

/* nicht sichtbare/inaktive Items */
div.materialliste i.nichtsichtbar {
	color: #ff9b00;
	font-size: 0.9rem;
	margin-right: 0.3em;
}

div.materialliste i.ausgerueckt { 
	margin-right: 0;
	font-size: 0.8rem;
	margin-left: -1.7em;
	width: 1.4em;
}



div.materialliste .Label {
	color: #b0b0b0;
}

div.materialliste span.FileName {
	font-size: 0.8em;
	color: grey;
	margin-left: 0.2em;
}

div.materialliste span.FileSize
, div.materialliste span.AnzahlSeiten{
	font-size: 0.8em;
	color: grey;
	margin-left: 0.2em;
}

div.materialliste span.FileSize::before
, div.materialliste span.AnzahlSeiten::before {
	content: " | ";
}

div.materialliste span.FileDLInfo {
	font-size: 0.8em;
	color: grey;
	margin-left: 0.2em;
}

div.materialliste span.FileDLInfo::before {
	content: " | DLs: ";
}

/* Trennlinie zwischen Link-Arten etc. ohne Zwischenueberschrift */ 
div.materialliste .L3.Trenner {
	margin-top: 0.8em;
	border-bottom: 1px #e0e0e0 solid;
	margin-bottom: 0.4em;
	/*! width: 60%; */
	font-size: 0.7em;
	color: gray;
	max-width: 736px;
}

/* Trenner zwischen diese / meine weiteren Gruppen */
div.materialliste .L3.TrennerGruppen {
	color: var(--IconColor);
	margin-top: 2em;
	font-size: 0.9em;
	background-color: var(--IconButtonHG);
	padding: 0 0.4em;
}

i.AktionsHinweis {
	font-size: 0.8em;
	color: orange;
	margin-left: 0.5em;
}
/* ------- ENDE Material-Liste(n) (sowohl auf der ML-Seite als auch auf der Lied-Seite!) */

/* --------User-Seite - Funktionsblock (sowohl auf der User-Seite als auch auf der Lied-Seite!)  */

div.user div.FunktionsBlock div.Inhalt {
	display: none;
	margin-left: 2.9em;
	height:0;
}

div.user div.FunktionsBlock div.Inhalt.sichtbar {
	display: block;
	height:auto;
}
div.user div.FunktionsBlock div.Inhalt div i.eingerueckt {
	margin-left: -1.6em;
	width: 1.4em;
	/*display: none;*/
}

div.user div.FunktionsBlock i.nichtsichtbar {
	color:#ff9b00 ;
}
div.user div.FunktionsBlock span.nichtsichtbar {
	color:#ff9b00 ;
}
div.user div.FunktionsBlock span.nichtsichtbar {
	font-size: 0.8em;
	background-color: #f0f0f0;
	border: 1px solid #ff9b00;
	padding: 0.1em 0.2em;
	margin: 0.2em;
}

/* Flex in Ereigniszeile */
div.user div.FunktionsBlock div.Inhalt .EZeile {
  display: flex;
  margin: 0.4em 0 0.8em 0px;
 
}
div.user div.FunktionsBlock div.Inhalt .EZeile .EDetails {
  line-height: 1.4em;
  margin-left: 0.2em;
}
div.user div.FunktionsBlock div.Inhalt .EIconGruppe {
  line-height: 1.7em;
  min-width: 4.3em;
}
div.user h2 {
	font-size: 1.1em;
	font-weight: bold;
	cursor: pointer;
	text-indent: -4em;
	margin-left: 4em;
	margin-top: 1.2em;
	margin-bottom: 0.4em;
}

div.user h2 .Pfeil {
	width: 0.8em;
	text-indent: 0;
}

div.user h2 .Details {
	font-weight: normal;
	font-size: 0.8em;
}
div.user h3 {
	font-size: 0.9em;
	margin-bottom: 0;
	margin-top: 1.8em;
	font-weight: bold;
	/*! font-style: italic; */
	border-bottom: 1px solid silver;
	/*! padding: 0; */
	/*! line-height: 116%; */
	color: #aaa;
}
div.user p {
    margin-top: 0.7em;
    margin-bottom: 0.7em;
}


div.user .Admin {
	color: white;
    background-color: #cfc4c4;
    padding: 0.1rem 0.3rem;
    font-size: 0.7em;
    font-weight: bold;
    margin: auto 0.2em;
}
/* in Heading kleiner: */
div.user h1 .Admin {
    font-size: 0.4em;
    position: relative;
    top: -0.3em;
}

div.user .Fkt {
	color: yellow;
}

div.user .VollerName {
	color: yellow;
}

div.user .Aktion {
	color: yellow;
}

div.user .DatumGueltigBis::before {
  content: "(gültig bis: ";
} 
div.user .DatumGueltigBis::after {
  content: ")";
} 
/* --------ENDE User-Seite - Funktionsblock (sowohl auf der User-Seite als auch auf der Lied-Seite!)  */


/* ------ Liederliste - form.AblaufEdit  


	als Grids, mit unterschiedlicher Anordnung in schmalem Schirm (zweizeilig)

---- */	  

form.AblaufEdit .GridZeile {
		display: grid;
		column-gap: 0.3em;
		row-gap: 0.4em;
}

form.AblaufEdit .GridZeile.Trenner {
		grid-template-columns: 
			0fr 0fr auto 20vw 2.2em 0fr;
		grid-template-areas: "BtnFn BtnSel Trenner Info Dauer BtnMove";

}
form.AblaufEdit .GridZeile.Lied {
		/*grid-template-columns: 0fr  0fr    3em 1fr  2em     1fr    2em 2em;*/
		grid-template-columns: 
			0fr 0fr 3em 0fr auto 20vw 2.2em 0fr;
		grid-template-areas: "BtnFn BtnSel Art BtnLied	Lied	Info Dauer BtnMove";
	}
	
	form.AblaufEdit .GridZeile .ZBtnFn { grid-area: BtnFn; }
	form.AblaufEdit .GridZeile .ZBtnSel { grid-area: BtnSel; }
	form.AblaufEdit .GridZeile .ZBtnLied { grid-area: BtnLied; }
	form.AblaufEdit .GridZeile .ZTrenner { grid-area: Trenner; }
	form.AblaufEdit .GridZeile .ZArt { grid-area: Art; }
	form.AblaufEdit .GridZeile .ZLied { grid-area: Lied; }
	form.AblaufEdit .GridZeile .ZInfo { grid-area: Info;}
	form.AblaufEdit .GridZeile .ZDauer { grid-area: Dauer; } 
	form.AblaufEdit .GridZeile .ZBtnMove { grid-area: BtnMove; }
	
@media screen and (max-width: 640px) { 
	
	form.AblaufEdit .GridZeile .ZArt  input { 
		height: 30px; 
		/*color: re	d;*/
	}
	form.AblaufEdit .GridZeile .ZInfo textarea { 
		height: 30px; 
		/*color: blue;*/
	}

	form.AblaufEdit .GridZeile .ZArt, form.AblaufEdit .GridZeile .ZInfo { font-size: 0.9em;}
	
	form.AblaufEdit .GridZeile.Trenner {
		/*grid-template-columns: repeat(5, 1fr);*/
		/*grid-template-areas: "BtnFn BtnSel Art Trenner ZInfo Dauer BtnMove Empty";*/
/*		grid-template-areas: 
			"BtnFn Trenner X Dauer BtnMove" 
			"BtnSel ZInfo X2 X2 X2";*/
		grid-template-columns: 
			 0fr 0fr 1.3em auto 2em 0fr;
		grid-template-areas: 
			"BtnFn BtnSel Trenner Trenner Dauer BtnMove" "X2    X2     X2      Info    Info  X3     ";
		}
	
	form.AblaufEdit  .GridZeile.Lied {
		grid-template-columns: 
			0fr 0fr 0fr 3em auto 2em 0fr;
		grid-template-areas: 
			"BtnFn	BtnSel	BtnLied	Lied	Lied	Dauer	BtnMove"
			" X		X		X		Art		Info	Info	X2"
			;
	}
}

/* ------ ENDE Liederliste - Ablauf-Edit  ---- */	  

/* nur wenn der Counter LÄUFT, werden die Schaltflächen angezeigt: */

/* Taktell aus... nur die Fläche "runsnot" wird angezeigt */
div.Taktell {
	display: grid;
	grid-template-columns:
		max-content;
	grid-template-areas:
		"runsnot";
	z-index:1000;
	cursor: initial;
	
  font-size: 1em;
  /*border: 1px #8a8a8a solid;*/
  border-radius: 1.1em;
  padding: 0.4em 0.5em;
  background: #b1b1b1;
  font-weight: bold;
  color: white;
  min-width: 1.4em;
  /*! display: inline; */
  text-align:center;
  transition-duration: 0s;
  float: right;
  top: -0.3em;
  position: relative;
	right: 0.5em;
}
/* wenn das Taktell läuft, dann Grid aufmachen */
div.Taktell.runs {
	grid-template-columns:
		2em 2em 2.5em 5em min-content;
	grid-template-areas:
		"bpbplus1  plus1  plus10  cnt close" 
		"bpb       bpm    bpm     cnt .    " 
		"bpbminus1 minus1 minus10 cnt save ";
  /*position: absolute;*/
  /*right: 0.5em;*/
  /*z-index:1001;*/
}


div.Taktell div.save		{grid-area: save;}
div.Taktell div.close		{grid-area: close;}

div.Taktell div.cnt {
  grid-area: cnt;
  align-content: center;
}

div.Taktell div.plus1		{grid-area: plus1;}
div.Taktell div.plus10		{grid-area: plus10;}
div.Taktell div.bpm			{grid-area: bpm;}
div.Taktell div.minus1		{grid-area: minus1;}
div.Taktell div.minus10		{grid-area: minus10;}

div.Taktell div.bpbplus1	{grid-area: bpbplus1;}
div.Taktell div.bpb			{grid-area: bpb;}
div.Taktell div.bpbminus1	{grid-area: bpbminus1;}

div.Taktell div.btn {
  font-size: 0.9em;
  border: 1px #8a8a8a solid;
  border-radius: 0.8em;
  padding: 0.4em 0.5em;
  background: #c8c6c6;
  font-weight: bold;
  color: white;
  min-width: 1.4em;
  /*! display: inline; */
  text-align:center;
  margin: 0.4em 0.2em;
  cursor: pointer;
}

div.Taktell div.save, div.Taktell div.close {
  font-size: 1.3em;
  color: white;
  margin: 0.4em 0.2em;
  position:relative;
  top:0em;
  cursor: pointer;
}

div.Taktell div.save.disabled {
  color: #9d9d9d;
}
div.Taktell div.save.saves {
  	filter: blur(4px);
}
div.Taktell div.showrun		{ display: none;}
div.Taktell.runs div.showrun		{ display: initial;}


div.Taktell div.runsnot		{
	grid-area: runsnot;
	cursor: pointer;
}
div.Taktell.runs div.runsnot		{display: none;}

/* das span mit den bpm */
div.Taktell div.cnt span {
  font-size: 3em;
  color: white;
  border: 2px #8a8a8a solid;
  padding: 0.1em .4em;
  background:  #ccc;
  transition-property: background, color;
  transition-duration: 0.1s;
  top: 0.12em;
  position: relative;
  /*! height: 1.1em; */
  /*! align-content: center; */
  border-radius: 0.3em;
  cursor: pointer;
}

div.Taktell.runs.Schlag1 div.cnt span {
  color: white;
  transition-duration: 0s;
  background: red;
  /*border-color: red;*/
}
div.Taktell.runs.SchlagX div.cnt span {
  color: white;
  background: orange;
  transition-duration: 0s;
}

/*----- Versions-Info-Seite ------*/

div.versionsinfo h3 {
  font-size: 1.4em;
  color: inherit;
}
div.versionsinfo h4 {
  margin-bottom: 0;
  margin-top: 2em;
  font-size: 1.3em;
  background-color: var(--MainColor);
  display: inline-block;
  color: white;
  padding: 0.1em 0.2em;
}
div.versionsinfo h5 {
  font-size: 1em;
  font-style: italic;
  margin: 1.7em 0 1em 0;
}
div.versionsinfo p.datum {
  font-size: 0.8em;
  font-style: italic;
}




/*----- ENDE Versions-Info-Seite ------*/

/* #####################################################################################################

abweichende Angaben für KLEINE Bildschirme bis 640 px Breite */


@media screen and (max-width:640px) {

	/*	Inhalte nicht ganz nach oben wegen feststehendem Menü */
	div.content {
		margin-top: 4.5em;
	}
	
	/* aber nicht auf den Index-Seiten! */
	div.content.indexseite {
		margin-top: 0;
	}
	
	/* das kann dann raus - griff nur, wenn als erstes auch eine h1 kam! */
	/* div.content > h1 {
		 margin-top: 2.5em;
	} 	*/
	
	/* dito */
	/* 	div.content > form {
		margin-top: 1em;
	} */

	/* der Wave-Container ist sticky, wenn oben Kopfzeile festbleibt, darf der nicht ganz hochschieben: */
	div.content.audioedit div.ContainerWaveMitH3 {
		top: 3.2em;
	}
	
	/* dito */
	div.LiedKopfBereich {
		top: 3.2em;
	}
	

	/* Kopf */
	.adminheader {
		margin: -19px -39px 3px -21px;
		padding: 14px;
		float: none;
		text-align: left;
		box-shadow: 0 0 5px #aaa;
		position: fixed;
		top: 15px;
		background-color: #fff;
		/*! opacity: 0.5; */
		z-index: 2000;
		display: block;
		width: 104%;
	}
.adminheader img.logo {
		width: 6rem;
		max-width: 30%;
		margin-bottom: -0.51em;
	}	
	.adminheader .home {
		text-align: left;
	}
	
.adminheader .Icons {
  margin-top: 0.6em;
  position: absolute;
  right: 20px;
  top: 13px;
  cursor: pointer;
}
	.adminheader a {
	  padding: 0 0.7em;
	}

	.adminheader a:last-child {
	  padding-right: 0;
	}

	.adminheader div.Icons {
		margin-top: 0.6em;
	}
	
	
	input, textarea {
		font-size:17px;
		padding:5px;
	}
/* raus Uwe 2022-04-02
	input {
		height:34px;
	}
*/
	textarea {
		height:34px;
	}

	.sortable .action.handle,
	.sortable .action.trash {
		padding-top:10px;
	}

	.handle i {
		font-size:1.5em;
	}

	.ui-state-highlight {
		height:34px;
	}

	.headline {
		margin-right:0;
	}

	.headline .left,
	.headline .right {
		width:100%;
	}

	.headline .right h2,
	.headline .right p {
		text-align:left;
	}

	td {
		font-size:17px;
		padding:5px;
	}

	.ui-autocomplete {
		font-size:1em;
		line-height:20px;
	}

/*	.input {
		padding:5px 2px;
	}*/

	.columns.d {
		width: 2.4em;
	}
	
	/* die Icons in der Liederliste (Einfügen und Lied-Info/Add) */
	.sortable .Zeile .action.links .icon {
	  font-size: 1.04em;
	  margin-right: 0.4em;
	  top: -0.2em;

	}
	
	/* der Select-Button in der Liederliste */
	/* ist jetzt auch ein Icon... 
	.sortable .Zeile .action.links.select {
		font-size: 1.7em;
		padding-right: 0;
		top: -0.38em;
		border-radius: 2em;
	  }
	*/
	  
	


	table.Ablauf input, table.Ablauf textarea
	, form.NeuesEreignis textarea, form.NeuesEreignis input
	, form.AblaufEdit textarea, form.AblaufEdit input {
	
		font-size:1.2em;
		min-height: 40px;
	}
	
	table.Ablauf input
	,form.AblaufEdit input {
		height:40px;
	}
	
	form.AblaufEdit textarea {
		padding-top: 0.44em;
	}
}

@media print {
	footer, .nonprint {
		display:none !important;
	}
	header {
		text-align: right;
	}	
	header img {
		position: relative;
		left: 0;
		height: 3em;
		width: auto;
	}
	:root {
		/* beim Drucken: Schwarz! */
		--MainColor: black;
	}
	tr.trenner {  /* 2024-08-15 */
		background-color: var(--HGColorSehrHell);
		border-top: 0.15em solid var(--HColorDunkel) ;
	}

	tr.trenner h2,
	tr.trenner p {
		color:black;
	}

}