body			{ height:100%; margin:0; padding:0; display:flex; justify-content:center; font-family:Verdana,Arial,Helvetica,Geneva; }

/* max-width: = Breite 1200px des Containers */
.container		{ max-width:1200px; width:100%; margin:0 auto; padding:0; box-shadow: 0 0 8px rgba(90,0,0,0.2); box-sizing:border-box }
.header-img		{ width:100%; height:auto; object-fit:cover; position:sticky; top:0; }
.content		{ padding:0px 20px 40px 20px; }

/* responsive */
h1				{ font-size: clamp(1.2rem, 3vw, 2rem); color:red; }

/* Button grau */
.gray-btn 			{ display:inline-block; min-width:160px; padding:8px 26px; font-size:1rem; color:white; background:linear-gradient(135deg, #9e9e9e, #616161); border:none; border-radius:8px; cursor:pointer; transition:all 0.3s ease; box-shadow:0 4px 12px rgba(0, 0, 0, 0.15); }
.gray-btn:not(:disabled):hover 	{ background: linear-gradient(135deg, #bdbdbd, #757575); transform:translateY(-2px); box-shadow:0 6px 14px rgba(0, 0, 0, 0.25); }
.gray-btn:not(:disabled):active { transform: translateY(0); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); }
.gray-btn:focus		{ outline: none; }
.gray-btn:disabled	{ background: linear-gradient(135deg,#d0d0d0, #a0a0a0); color: #ffffffaa; cursor: not-allowed; box-shadow: none; }

/* Button grau klein */
.gray-btn-klein 			{ display:inline-block; margin-top:15px; padding:4px 16px; font-size:0.9rem; font-weight:normal; color:white; background:linear-gradient(135deg, #9e9e9e, #616161); border:none; border-radius:8px; cursor:pointer; transition:all 0.3s ease; box-shadow:0 4px 12px rgba(0, 0, 0, 0.15); }
.gray-btn-klein:not(:disabled):hover 	{ background: linear-gradient(135deg, #bdbdbd, #757575); transform:translateY(-2px); box-shadow:0 6px 14px rgba(0, 0, 0, 0.25); }
.gray-btn-klein:not(:disabled):active { transform: translateY(0); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); }
.gray-btn-klein:focus		{ outline: none; }
.gray-btn-klein:disabled	{ background: linear-gradient(135deg,#d0d0d0, #a0a0a0); color: #ffffffaa; cursor: not-allowed; box-shadow: none; }

/* Button blau*/
.blue-btn			{ display:inline-block; width:350px; padding:8px 16px; font-size:1rem; font-weight:normal; color:white; background:linear-gradient(135deg, #4a90e2, #357ABD); border:none; border-radius:8px; cursor:pointer; transition:all 0.3s ease; box-shadow:0 4px 12px rgba(0, 0, 0, 0.15); }
.blue-btn:not(:disabled):hover	{ background:linear-gradient(135deg, #6ba6e6, #4a90e2); transform:translateY(-2px); box-shadow:0 6px 14px rgba(0, 0, 0, 0.25); }
.blue-btn:not(:disabled):active	{ transform:translateY(0); box-shadow:0 6px 14px rgba(0, 0, 0, 0.2); }
.blue-btn:focus		{ outline:none; }
.blue-btn:disabled	{ background:linear-gradient(135deg, #a0c4e8, #7fa6d9); color:#ffffffaa; cursor:not-allowed; box-shadow:none; }

/* Button grün*/
.green-btn			{ display:inline-block; width:350px; padding:8px 16px; margin-bottom:15px; font-size:1rem; font-weight:normal; color:white; background:linear-gradient(135deg, #4caf50, #388E3C); border:none; border-radius:8px; cursor:pointer; transition:all 0.3s ease; box-shadow:0 4px 12px rgba(0, 0, 0, 0.15); }
.green-btn:not(:disabled):hover	{ background:linear-gradient(135deg, #66bb6a, #4caf50); transform:translateY(-2px); box-shadow:0 6px 14px rgba(0, 0, 0, 0.25); }
.green-btn:not(:disabled):active	{ transform:translateY(0); box-shadow:0 6px 14px rgba(0, 0, 0, 0.2); }
.green-btn:focus		{ outline:none; }
.green-btn:disabled	{ background:linear-gradient(135deg, #a5d6a7, #81c784); color:#ffffffaa; cursor:not-allowed; box-shadow:none; }
.green-btn.fett     { font-weight: 600; }

/* Button orange*/
.orange-btn			{ display:inline-block; min-width:160px; padding:8px 16px; font-size:1rem; font-weight:normal; color:white; background:linear-gradient(135deg, #ff9800, #f57c00); border:none; border-radius:8px; cursor:pointer; transition:all 0.3s ease; box-shadow:0 4px 12px rgba(0, 0, 0, 0.15); }
.orange-btn:not(:disabled):hover	{ background:linear-gradient(135deg, #ffb74d, #ff9800); transform:translateY(-2px); box-shadow:0 6px 14px rgba(0, 0, 0, 0.25); }
.orange-btn:not(:disabled):active	{ transform:translateY(0); box-shadow:0 6px 14px rgba(0, 0, 0, 0.2); }
.orange-btn:focus		{ outline:none; }
.orange-btn:disabled	{ background:linear-gradient(135deg, #ffcc80, #ffb74d); color:#ffffffaa; cursor:not-allowed; box-shadow:none; }

/* Button rot*/
.red-btn			{ display:inline-block; min-width:160px; padding:8px 16px; font-size:1rem; font-weight:normal; color:white; background:linear-gradient(135deg, #f44336, #d32f2f); border:none; border-radius:8px; cursor:pointer; transition:all 0.3s ease; box-shadow:0 4px 12px rgba(0, 0, 0, 0.15); }
.red-btn:not(:disabled):hover	{ background:linear-gradient(135deg, #e57373, #f44336); transform:translateY(-2px); box-shadow:0 6px 14px rgba(0, 0, 0, 0.25); }
.red-btn:not(:disabled):active	{ transform:translateY(0); box-shadow:0 6px 14px rgba(0, 0, 0, 0.2); }
.red-btn:focus		{ outline:none; }
.red-btn:disabled	{ background:linear-gradient(135deg, #ef9a9a, #e57373); color:#ffffffaa; cursor:not-allowed; box-shadow:none; }

/* Input-Feld */
.gray-input			{ padding:8px 16px; font-size:1rem; border:1px solid #bdbdbd; border-radius:8px; background:#f5f5f5; color:#333333; box-sizing:border-box; transition:all 0.25s ease; margin-bottom:15px; }
.gray-input:hover	{ background:#eeeeee; }
.gray-input:focus	{ background:#ffffff; border-color:#757575; box-shadow:0 0 6px rgba(0, 0, 0, 0.15); outline: none; }

/* Nummer-Input-Feld */
.num                { }

/* Error-Meldung */
.error { color:red; margin:-5px 0px 5px 0px; }

/* Lösch-Button */
.delete-btn			{ display:inline-block; width:30px; height:30px; border:none; border-radius:8px; cursor:pointer; background-color:#c62828;
                        background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><line x1='6' y1='6' x2='18' y2='18' stroke='white' stroke-width='3' stroke-linecap='round'/><line x1='18' y1='6' x2='6' y2='18' stroke='white' stroke-width='3' stroke-linecap='round'/></svg>");
                        background-repeat:no-repeat; background-position:center; background-size:16px 16px; box-shadow:0 4px 12px rgba(0,0,0,0.15); transition:all 0.3s ease; }
.delete-btn:not(:disabled):hover	{ background-color:#e53935; transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,0.25); }
.delete-btn:not(:disabled):active	{ transform:translateY(0); }
.delete-btn:disabled				{ background-color:#ef9a9a; cursor:not-allowed; box-shadow:none; }

/* Play-Button */
.play-btn			{ display:inline-block; width:30px; height:30px; border:none; border-radius:8px; cursor:pointer; background-color:#282bc6;
                        background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='8,5 19,12 8,19' fill='white'/></svg>");
                        background-repeat:no-repeat; background-position:center; background-size:16px 16px; box-shadow:0 4px 12px rgba(0,0,0,0.15); transition:all 0.3s ease; }
.play-btn:not(:disabled):hover	{ background-color:#356ae5; transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,0.25); }
.play-btn:not(:disabled):active	{ transform:translateY(0); }
.play-btn:disabled				{ background-color:#9abcef; cursor:not-allowed; box-shadow:none; }

/* Stop-Button */
.stop-btn           { display:inline-block;	width:30px;	height:30px; border:none; border-radius:8px; cursor:pointer; background-color:#282bc6;
                        background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='7' y='7' width='10' height='10' fill='white'/></svg>");
	                    background-repeat:no-repeat; background-position:center; background-size:16px 16px; box-shadow:0 4px 12px rgba(0,0,0,0.15); transition:all 0.3s ease; }
.stop-btn:not(:disabled):hover  { background-color:#356ae5;	transform:translateY(-2px);	box-shadow:0 6px 14px rgba(0,0,0,0.25); }
.stop-btn:not(:disabled):active { transform:translateY(0); }
.stop-btn:disabled              { background-color:#9abcef;	cursor:not-allowed;	box-shadow:none; }

/* Eingabeformular */
* { box-sizing: border-box; }
.eingabeV               { padding:8px 10px; font-size:1.5rem; font-weight:bold; padding: 5px 20px 5px 20px; margin-top:50px; }
.form-block				{ max-width:850px; margin:20px auto; padding:20px; border-radius:10px; background:#f9fafb; box-shadow:0 2px 6px rgba(0,0,0,0.08); }
.fullwidth				{ max-width:100%; }
.form-title				{ font-size:1.1rem; font-weight:bold; margin-bottom:15px; padding-bottom:8px; border-bottom:2px solid #e3e6ea; }
.form-row				{ display:flex; flex-wrap:wrap; gap:15px; margin-bottom:5px; align-items:center; font-size:0.8rem; font-weight: normal;}
.form-row label			{ flex:0 0 160px; font-weight:600; color:#444; font-size:0.8rem; }
.line					{ border-bottom:2px solid #e3e6ea; }
.form-fields			{ flex:1; display:flex; gap:10px; flex-wrap:wrap; align-items: center; }
.eingabe				{ padding:8px 10px; border:1px solid #cfd6dd; border-radius:6px; font-size:1rem; flex:1; min-width:120px; }
.eingabe.small			{ max-width:90px; }
.eingabe.ysmall			{ max-width:60px; flex:0 0 auto; min-width:0; text-align:center;}
.eingabe.xsmall			{ max-width:40px; flex:0 0 auto; min-width:0; text-align:center;}
.eingabe.medium			{ width:280px; flex:0 0 auto; min-width:0; text-align:left;}
.eingabe.large			{ width:480px; flex:0 0 auto; min-width:0; text-align:left;}
.eingabe.disz           { width:400px; }
.eingabe.kate           { width:180px; }
.eingabe.felder         { width:180px; }
.eingabe.full			{ width:100%; }
.eingabe.phone          { max-width: 150px; }
.eingabe.email          { min-width: 200px; }
.eingabe.richtername	{ width:240px; flex:0 0 auto; min-width:0; text-align:left;}
.eingabe:focus			{ outline:none; border-color:#4a90e2; box-shadow:0 0 0 2px rgba(74,144,226,0.15); }
.eingabe:disabled		{ background:#eeeeee; color:#777; border-color:#dddddd; cursor:not-allowed; }
.eingabe::placeholder	{ color:#999; opacity:0.7; }
.form-hint				{ font-size:0.8rem; color:#666; margin-top:5px; margin-bottom:40px; }
.subline				{ margin-left:60px;	margin-bottom:8px; }
.subline .label			{ font-size:0.8rem; font-weight:600; font-style:italic; }
select.eingabe			{ appearance:none; background-color:white;
    background-image:url("data:image/svg+xml;utf8,<svg fill='%23666' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat:no-repeat; background-position:right 8px center; background-size:16px; padding-right:30px; }
input[readonly]			{ background-color:#EEEEEE; }
.checkbox-inline		{ display:flex; align-items:center; gap:6px; font-weight:normal; white-space:nowrap; }
textarea.eingabe.full	{ width:100%; min-height:100px; resize:vertical; font-size:1rem; font-family:Verdana,Arial,Helvetica,Geneva; }
@media (max-width:700px){
    .form-row			{ flex-direction:column; align-items:stretch; } /* hier nicht zentriert */
    .form-row label		{ flex:none; margin-bottom:4px; }
    .eingabe.large		{ width:280px; flex:0 0 auto; min-width:0; text-align:left;}
}
@media (min-width:700px){
	.half-desktop		{ flex:0 0 50%; max-width:50%; }
}

/* Kolonnen */
.header				{ font-size:0.8rem; font-weight:600; font-style:italic; }
.flex-row			{ display:flex; align-items:center; flex-wrap:wrap; font-size:0.8rem; }
.flex-row .col		{ padding: 6px 8px; }
.flex-row .colmat	{ padding: 1px 8px; }					/* bei Materialliste */
.col.nr        		{ width:40px; padding-left:10px; }
.col.disziplin 		{ width:400px}
.col.kategorie 		{ width:180px; }
.col.richtername    { width:250px; }
.col.feld      		{ width:150px; }
.col.tu        		{ flex:0 0 70px; }
.col.ti        		{ flex:0 0 70px; }
.col.action    		{ margin-left: auto; }
.colmat.gerät		{ flex:0 0 350px; }						/* bei Materialliste */
.colmat.zV			{ flex:0 0 120px; text-align:center; }	/* bei Materialliste */
.colmat.ben			{ flex:0 0 50px; text-align:center; }	/* bei Materialliste */
.personen-row           { display:flex; align-items:center; gap:6px; flex-wrap: nowrap; font-size:0.8rem; flex-direction: column; align-items: flex-start; }    /* Personen bei Disziplinen */
.personen-row .row      { display:flex; align-items:center; gap:6px; text-align: left; margin-left: 50px; }
.personen-row .col      { flex: 1; }
.personen-row .label    { width: auto; flex-shrink: 0; text-align: left; }
.personen-row .row .col:last-child { display: flex; gap: 6px;  flex-wrap: nowrap; justify-content: flex-start; }
@media (max-width:700px){
    .header					{ display:none; }
    .flex-row				{ flex-wrap:wrap; border-bottom:1px solid #ddd; padding:6px 0; }
    .flex-row .col			{ flex:1 1 100%; display:flex; }
    .flex-row .col::before	{ content:attr(data-label); flex:0 0 120px; font-size:0.9rem; font-weight:600; font-style:italic; }
    .col.action::before		{ content:""; }
}

/* Musikupload drag&drop */
.drag-area			{ border:2px solid #cbd5e1; padding-top:10px; text-align:center; margin-top:10px; background:#eef2f7; cursor:pointer; border-radius:8px; transition:0.2s;}
.drag-area.active	{ border-color:#3b82f6; background:#a9d1ff; }

.drag-area.dragover	{ border-color:#337ab7; background:#a9d1ff; }
.drag-text			{ font-size:1rem; font-weight:bold; margin-bottom:5px; }
.drag-info          { font-size:0.9rem; font-weight:normal; margin-bottom:10px; color:#337ab7; }
.drag-support       { font-size:0.9rem; font-weight:normal; margin-bottom:15px; font-style:italic; }
.upload-status		{ font-size:0.9rem; margin-top:10px; color:green; }
.progress			{ width:100%; height:8px; background:#e5e7eb; border-radius:6px; margin-top:8px; overflow:hidden; }
.progress-bar		{ width:0%; height:8px; background:#3b82f6; transition:0.2s; }
.controls button    { margin-right:5px; margin-top: 10px; }
.file-name .file-size  { font-size:0.9rem; font-weight:normal; margin-bottom:10px; }
.file-duration         { font-size:0.9rem; font-weight:normal; margin-bottom:10px; color: #666;}


/* Bildschirmausgabe bei Rechnung */
.rechnung-block                 { width:auto; min-width: 0; background:#ffffff; padding:15px 18px; border-radius:8px; border:1px solid #e3e6ea; box-shadow: 0 1px 3px rgba(0,0,0,0.05); box-sizing: border-box;}
.rechnung-row                   { display: flex; flex-wrap:wrap; gap: 15px; align-items: stretch; }
.rechnung-titel                 { text-decoration-line:underline ; font-size:0.95rem; color:#374151; }
.rechnung-text                  { font-size:0.9rem; color:#4b5563; }
.half                           { flex: 0 0 calc(50% - 7.5px); max-width: calc(50% - 7.5px); }
.full                           { flex: 0 0 100%; max-width: 100%; }   
.rechnung-discipline            { padding-bottom:5px; margin-bottom:10px; border-bottom: 1px solid #e5e5e5; }
.rechnung-discipline-row        { display:flex; align-items:center; gap:15px; font-size: 0.9rem; padding: 6px 0; }
.rechnung-discipline-col        { min-width: 0; flex:1; }
.rechnung-discipline-col.name   { flex:2; font-weight: 600; }
.rechnung-discipline-col.cate   { flex:2; color: #555; }
.rechnung-discipline-col.count  { flex:1; text-align:right; white-space:nowrap; font-size: 0.8rem;}
.rechnung-discipline-rowsub     { padding-left:10px; font-size: 0.9rem;}
@media (max-width: 600px)   {
    .half                           { flex: 1 1 100%; max-width: 100%; }
    .rechnung-discipline-row        { flex-direction:column; align-items:flex-start; gap:4px; }
    .rechnung-discipline-col.count  { text-align: left; }
    .rechnung-discipline-col.cate   { color: #777; font-size: 0.85rem; }
}
.linie                      {border-top:2px solid #e3e6ea;}

/* Links */
a 			                { display:inline-block; min-width:160px; padding:8px 25px 8px 15px; font-size:1rem; color:white; text-decoration: none; background:linear-gradient(135deg, #9e9e9e, #616161); border:none; border-radius:8px; cursor:pointer; transition:all 0.3s ease; box-shadow:0 4px 12px rgba(0, 0, 0, 0.15); }
a:not(:disabled):hover 	    { background: linear-gradient(135deg, #bdbdbd, #757575); transform:translateY(-2px); box-shadow:0 6px 14px rgba(0, 0, 0, 0.25); }
a:not(:disabled):active     { transform: translateY(0); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); }
a:focus		                { outline: none; }
a:disabled	                { background: linear-gradient(135deg,#d0d0d0, #a0a0a0); color: #ffffffaa; cursor: not-allowed; box-shadow: none; }

a2                           { display: inline-block; padding: 8px 22px; margin: 5px 0; border-radius: 6px; text-decoration: none; transition: 0.2s; background:linear-gradient(135deg, #9e9e9e, #616161); color:white; }
a2:hover                     { transform: translateY(-2px); opacity: 0.9; }
/* PDF */
a[href$=".pdf"]::after      { content: " (PDF)"; font-size: 0.8em; color:white; }
/* HTML */
a[href^="http"]            {  }
/* Mail */
a[href^="mailto:"]          {  }
/* Excel */
a[href$=".xlsx"]::after     { content: " (XLSX)"; font-size: 0.8em; color:white; }
a[href$=".xls"]::after      { content: " (XLS)"; font-size: 0.8em; color:white; }
/* Word */
a[href$=".docx"]::after     { content: " (DOCX)"; font-size: 0.8em; color:white; }
a[href$=".doc"]::after      { content: " (DOC)"; font-size: 0.8em; color:white; }