/* 
 * stylesview.css
 * Author: Klaus Loege, 2025
 * 
 * This file provides styling for dynamically generated database table views. 
 * Features include table alignment, alternating row colors, pagination, and header customization. 
 */


@import url("UI_vars_stylesView.css");




/****
Äußeres Table für Listen usw.
****/
table {
    outline: 1px solid gray;
    margin: 3px auto;                /* horizontal zentrieren */
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    table-layout: auto;
    background: #e0e0e0;
    border-radius: 10px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2),
                -4px -4px 8px rgba(255, 255, 255, 0.8);
     zoom: 0.79; /* wirkt auch aufs Layout → kein leerer Bereich mehr */
}


/**
* Innerer Table für Eingabefelderfelder
*/

.standard_table {
    width: 400px;
    max-width: 800px;
    position: relative;
    margin-top: var(--menu-margin-top) !important;  /* Variable für Abstand nach oben */
    margin-bottom: var(--menu-margin-bottom) !important;  /* Variable für Abstand nach unten */
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    box-shadow: 0 0 20px rgba(0,0,0,0.9) !important;
    background-color: #ffffff;
    border: 3px solid grey !important;
}

/*
.standard_table:hover,
.standard_table tr:hover,
.standard_table td:hover,
.standard_table th:hover {
    background-color: inherit !important;
    color: inherit !important;
    box-shadow: none !important;
    border-color: inherit !important;
}
*/

.table.inner {
    outline: 1px solid gray;
    margin: 20px auto;
    table-layout: auto; /* Lässt Spaltenbreiten sich automatisch anpassen */
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    min-width: 50%; /* Verhindert zu kleine Tabellen */
    max-width: 100%; /* Begrenzung für große Inhalte */
    width: auto; /* Lässt die Tabelle sich an den Inhalt anpassen */
    background-color: var(--table-inner-background-color);
    border-radius: 10px;
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.1), 
                inset -4px -4px 8px rgba(255, 255, 255, 0.8);
}



.header-cell {
background-color: var(--table-list-top-background-color);
    color: var(--table-list-top-text-color); 
    padding: 5px 2px; /* Innenabstand: Oben/Unten 5px, Links/Rechts 10px */
    border: 1px solid #ddd;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    cursor: default;
}



/* liegt auf der gesamten Topleiste */
.toplininfolist {
	text-align: center;
    font-family: Verdana, sans-serif !important;
    font-size: 12px !important; /* Ändere die Schriftgröße */
    color: var(--table-list-top-text-color) !important; 
    background-color: var(--table-list-top-background-color) !important;
	padding:10px;
	cursor: default;
}

.toplininfolist.whiteText {
	  color: black;
}
.toplininfolist.grayText {
		padding: 5px;
		color: var(--table-list-top-text-color);
		font-size: 11px; 
}

.OverAllTopFormat {
    text-align: center;
    font-size: 20px; /* wirkt immer noch klar, aber nicht riesig */
    color: #555; /* ein helleres, dezenteres Grau statt #333 */
    background-color: #f9f9f9; /* noch heller und sanfter als #f5f5f5 */
    font-family: Arial, sans-serif;
    font-weight: 500; /* weniger stark als 600, wirkt feiner */
    padding: 4px 0; /* etwas weniger Höhe, noch eleganter */
    border-bottom: 1px solid #e0e0e0; /* feiner, noch dezenter */
    border-radius: 4px;
}




a {
    text-decoration: none;
}

tr {
    cursor: pointer;
}


th {

   /* background: linear-gradient(to bottom, #9A9A9A, #7A7A7A); /* Satteres Grau */
    font-weight: bold;
    text-shadow: none; /* Entfernt verschwommene Schatten */
    padding: 8px; /* Mehr Padding für bessere Lesbarkeit */
    border-bottom: 0px solid #555; /* Dunklere Linie für Abgrenzung */
    text-align: left;

}

th.title_list {
  	color: black !important;  /* Erzwinge schwarze Schrift */
    font-family: Verdana, sans-serif;
    font-size: 24px !important;
    text-align: center !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
	background-color: var(--table-list-top-background-color);
}



th, td {
    padding: 1px 2px;
    text-align: left;
    border: 1px solid #ddd;
    white-space: nowrap;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}


/* Grundfarben für die Tabelle */
.even-row {
    background-color: #E0E0E0; /* Sanftes Grau für gerade Zeilen */
    font-family: 'Inter', sans-serif;
    font-size: 16px;
	line-height: 1.3;
    color: var(--table-list-text-color);
}

.odd-row {
    background-color: #F8F8F8; /* Fast weiß für ungerade Zeilen */
    font-family: 'Inter', sans-serif;
    font-size: 16px;
	line-height: 1.3;
    color: var(--table-list-text-color);
}

/* Hover-Effekt - etwas dunkler als die Zeilen */
tr:hover {
    background: linear-gradient(to bottom, #D0D0D0, #BEBEBE); /* Deutlichere Abstufung */
    color: #000; /* Schwarze Schrift für Kontrast */
}

/* Kein Hover für bestimmte Zeilen */
tr.no-hover:hover {
    background: none !important;
    color: inherit !important;
	cursor: default !important;
}

td.no-hover {
    background-color: #f2f3f4;
}

td.no-hover:hover {
    background-color: #f2f3f4 !important; /* bleibt beim Hover weiß */
    color: inherit !important;
    cursor: default !important;
}

.selection {
	display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 8px 0; /* 10px oben und unten, 0px links und rechts */
}
.selection.center{
	align-items: center; ´
}

.selection.font{
	font-size: 14px;
	font-family: Verdana, sans-serif;
}

.selection_text{
	font-size: 14px;
	font-family: Verdana, sans-serif;
}
.selection_text.leftside{
	color:gray;
}

.selection_text.innerside{
	text-align: center; /* Text horizontal zentrieren */
	color:#000000;
	font-size: 14px; 
	padding: 5px; 
	width: auto;
	cursor: pointer;
}


/* ======================================================
Inputfield Basis (.inputfield)
====================================================== */
.inputfield {
    padding: var(--ui-inputfield-padding, 3px);
    padding-left: var(--ui-inputfield-padding-left, 5px);
    border: var(--ui-inputfield-border, 1px solid #000000);
    font-family: var(--ui-inputfield-font-family, Verdana, sans-serif);
    font-size: var(--ui-inputfield-font-size, 12px);
    background-color: var(--ui-inputfield-bg, #FFFFFF);
    color: var(--ui-inputfield-text-color, #000000);
    width: var(--ui-inputfield-width, 100%);
    max-width: var(--ui-inputfield-max-width, 100%);
    box-sizing: border-box;
    display: block;
}

/* ======================================================
Read-Write (.inputfield.read-write)
====================================================== */
.inputfield.read-write {
    font-size: var(--ui-inputfield-read-write-font-size);
    padding: var(--ui-inputfield-read-write-padding);
    background-color: var(--ui-inputfield-read-write-bg);
    border: var(--ui-inputfield-read-write-border);
    border-radius: var(--ui-inputfield-read-write-radius);
    cursor: var(--ui-inputfield-read-write-cursor);
    width: var(--ui-inputfield-read-write-width);
    max-width: var(--ui-inputfield-read-write-max-width);
    box-shadow: var(--ui-inputfield-read-write-shadow);
    transition: var(--ui-inputfield-read-write-transition);
}


/* ======================================================
Read-Write Decimal (.inputfield.read-write.decimal input)
====================================================== */
.inputfield.read-write.decimal input{
    box-sizing: border-box;
    flex: initial;
    min-width: 0;
    font-size: var(--ui-inputfield-read-write-decimal-font-size);
    font-weight: var(--ui-inputfield-read-write-decimal-font-weight);
    font-family: var(--ui-inputfield-read-write-decimal-font-family) !important;
    text-align: right;
    padding: var(--ui-inputfield-read-write-decimal-padding);
    background: var(--ui-inputfield-read-write-decimal-bg);
    border: var(--ui-inputfield-read-write-decimal-border);
    border-radius: var(--ui-inputfield-read-write-decimal-radius);
    line-height: normal;
}

/* feste Font-Modifikatoren – bewusst KEINE Variablen */
.inputfield.read-write.decimal.font16px input { font-size: 16px !important; }
.inputfield.read-write.decimal.font18px input { font-size: 18px !important; }
.inputfield.read-write.decimal.font20px input { font-size: 20px !important; }
.inputfield.read-write.decimal.font22px input { font-size: 22px !important; }
.inputfield.read-write.decimal.font24px input { font-size: 24px !important; }
.inputfield.read-write.decimal.font26px input { font-size: 26px !important; }
.inputfield.read-write.decimal.font28px input { font-size: 28px !important; }
.inputfield.read-write.decimal.font30px input { font-size: 30px !important; }
.inputfield.read-write.decimal.font32px input { font-size: 32px !important; }




/* ======================================================
.inputfield.read-write :focus
Fokus-Effekt für bearbeitbare Eingabefelder
====================================================== */
.inputfield.read-write:focus {
    background-color: var(--ui-inputfield-read-write-focus-bg);
    border: var(--ui-inputfield-read-write-focus-border);
    box-shadow: var(--ui-inputfield-read-write-focus-shadow);
    outline: none;
}

/* ======================================================
.inputfield.read-write.number
Numerisches Eingabefeld (rechtsbündig)
====================================================== */
.inputfield.read-write.number input{
    box-sizing: border-box;
    width: var(--ui-inputfield-read-write-number-width);
    min-width: var(--ui-inputfield-read-write-number-width);
    max-width: var(--ui-inputfield-read-write-number-width);
    flex: 1 1 auto;
    font-size: var(--ui-inputfield-read-write-number-font-size) !important;
    font-weight: var(--ui-inputfield-read-write-number-font-weight);
    font-family: var(--ui-inputfield-read-write-number-font-family) !important;
    text-align: right;
    padding: var(--ui-inputfield-read-write-number-padding);
    background: var(--ui-inputfield-read-write-number-bg);
    border: var(--ui-inputfield-read-write-number-border);
    border-radius: var(--ui-inputfield-read-write-number-radius);
    line-height: normal;
}

/* ======================================================
.inputfield.read-write.number.center
Numerisches Eingabefeld zentriert
====================================================== */
.inputfield.read-write.number.center input{
    text-align: center !important;
}



/* ======================================================
.inputfield.read-only
Nicht bearbeitbares Feld
====================================================== */
.inputfield.read-only {
    font-size: var(--ui-inputfield-read-only-font-size) !important;
    color: var(--ui-inputfield-read-only-text-color);
    padding: var(--ui-inputfield-read-only-padding);
    background: linear-gradient(
        to bottom,
        var(--ui-inputfield-read-only-bg-top),
        var(--ui-inputfield-read-only-bg-bottom)
    );
    border: var(--ui-inputfield-read-only-border);
    border-radius: var(--ui-inputfield-read-only-radius);
    cursor: var(--ui-inputfield-read-only-cursor) !important;
    box-shadow: var(--ui-inputfield-read-only-shadow);
    transition: var(--ui-inputfield-read-only-transition);
    user-select: none;
}

/* ======================================================
.inputfield.read-only:focus
Fokus per Tastatur
====================================================== */
.inputfield.read-only:focus {
    outline: none;
    background: linear-gradient(
        to bottom,
        var(--ui-inputfield-read-only-focus-bg-top),
        var(--ui-inputfield-read-only-focus-bg-bottom)
    );
    box-shadow: var(--ui-inputfield-read-only-focus-shadow);
}

/* ======================================================
.inputfield.read-only.warning
Warnzustand
====================================================== */
.inputfield.read-only.warning{
    background-color: var(--ui-inputfield-read-only-warning-bg);
    border: var(--ui-inputfield-read-only-warning-border);
}

/* ======================================================
.inputfield.description
Beschreibungs-/Infotextfeld
====================================================== */
.inputfield.description {
    color: var(--ui-inputfield-description-text-color);
    background-color: var(--ui-inputfield-description-bg);
    border: var(--ui-inputfield-description-border);
    border-radius: var(--ui-inputfield-description-radius);
    cursor: default;
    font-size: var(--ui-inputfield-description-font-size);
    font-family: var(--ui-inputfield-description-font-family);
    padding: var(--ui-inputfield-description-padding);
    width: auto;
    box-shadow: var(--ui-inputfield-description-shadow);
    transition: var(--ui-inputfield-description-transition);
}

/* ======================================================
.inputfield.description:hover
====================================================== */
.inputfield.description:hover {
    background-color: var(--ui-inputfield-description-hover-bg);
    border-color: var(--ui-inputfield-description-hover-border);
}

/* ======================================================
.inputfield.select
====================================================== */
.inputfield.select{
    background-color: var(--ui-inputfield-select-bg);
    width: 100%;
    font-family: var(--ui-inputfield-select-font-family);
    font-size: var(--ui-inputfield-select-font-size);
    cursor: pointer;
}


/* ======================================================
SELECT2 – RAHMEN + RUNDE ECKEN (FINAL, FUNKTIONIERT)
====================================================== */
.select2-container--default .select2-selection--single {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #b0b0b0 !important; /* <-- DAS war der Killer */
    border-radius: 10px !important;

    background-color: #ffffff !important;
    box-sizing: border-box;
}




/* ======================================================
ECHTES <select> ELEMENT – HIER entscheidet es sich
====================================================== */
.inputfield.select select,
select.inputfield {

    /* ⬅️ DAS FEHLT */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    border-radius: var(--ui-inputfield-select-radius);
    border: var(--ui-inputfield-select-border);
    background-color: var(--ui-inputfield-select-bg);
}

/* ======================================================
.inputfield.disabled
====================================================== */
.inputfield.disabled{
    background-color: var(--ui-inputfield-disabled-bg);
    width: auto;
    color: var(--ui-inputfield-disabled-text-color);
    border: var(--ui-inputfield-disabled-border);
    cursor: not-allowed;
    opacity: var(--ui-inputfield-disabled-opacity);
    font-family: var(--ui-inputfield-disabled-font-family);
    font-size: var(--ui-inputfield-disabled-font-size);
}

/* ======================================================
.inputfield.input input:focus
====================================================== */
.inputfield.input input:focus {
    outline: var(--ui-inputfield-input-focus-outline);
    background-color: var(--ui-inputfield-input-focus-bg);
    color: var(--ui-inputfield-input-focus-text-color);
    cursor: text;
    width: 100%;
}

/* ======================================================
.inputfield.invalid
====================================================== */
.inputfield.invalid { 
    color: var(--ui-inputfield-invalid-text-color);
    border: var(--ui-inputfield-invalid-border);
    font-size: var(--ui-inputfield-invalid-font-size);
    font-family: var(--ui-inputfield-invalid-font-family);
    width: var(--ui-inputfield-invalid-width);
}

/* ======================================================
.inputfield.telefon-fax
====================================================== */
.inputfield.telefon-fax { 
    flex-grow: 1;
    font-family: var(--ui-inputfield-contact-font-family);
    font-size: var(--ui-inputfield-contact-font-size) !important;
    color: var(--ui-inputfield-contact-text-color);
    padding: var(--ui-inputfield-contact-padding);
    width: auto;
    background-color: var(--ui-inputfield-contact-bg);
    border: var(--ui-inputfield-contact-border);
    border-radius: var(--ui-inputfield-contact-radius);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--ui-inputfield-contact-shadow);
    transition: var(--ui-inputfield-contact-transition);
}

/* Icons */
.inputfield.telefon-icon,
.inputfield.website-icon {
    width: var(--ui-inputfield-icon-size);
    height: var(--ui-inputfield-icon-size);
    margin-right: var(--ui-inputfield-icon-margin-right);
    border: none;
    outline: none;
    background: transparent;
}

/* ======================================================
.inputfield.website
====================================================== */
.inputfield.website { 
    flex-grow: 1;
    font-family: var(--ui-inputfield-contact-font-family);
    font-size: var(--ui-inputfield-contact-font-size) !important;
    color: var(--ui-inputfield-contact-text-color);
    padding: var(--ui-inputfield-contact-padding);
    width: auto;
    background-color: var(--ui-inputfield-contact-bg);
    border: var(--ui-inputfield-contact-border);
    border-radius: var(--ui-inputfield-contact-radius);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--ui-inputfield-contact-shadow);
    transition: var(--ui-inputfield-contact-transition);
}

.inputfield.website.invalid{
    color: var(--ui-inputfield-invalid-text-color);
    border: var(--ui-inputfield-invalid-border);
}

/* ======================================================
.inputfield.date
====================================================== */
.inputfield.date {
    font-family: var(--ui-inputfield-contact-font-family);
    font-size: var(--ui-inputfield-contact-font-size) !important;
    color: var(--ui-inputfield-contact-text-color);
    padding: var(--ui-inputfield-contact-padding);
    width: auto;
    background-color: var(--ui-inputfield-contact-bg);
    border: var(--ui-inputfield-contact-border);
    border-radius: var(--ui-inputfield-contact-radius);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--ui-inputfield-contact-shadow);
    transition: var(--ui-inputfield-contact-transition);
}

/* Fokus */
.inputfield.date:focus {
    border: var(--ui-inputfield-date-focus-border);
    background-color: var(--ui-inputfield-date-focus-bg);
    box-shadow: var(--ui-inputfield-date-focus-shadow);
    outline: none;
}

/* ======================================================
.inputfield.textarea
====================================================== */
.inputfield.textarea { 
    width: 100%;
    resize: vertical;
    font-family: var(--ui-inputfield-textarea-font-family);
    font-size: var(--ui-inputfield-textarea-font-size);
    line-height: var(--ui-inputfield-textarea-line-height);
    color: var(--ui-inputfield-textarea-text-color);
    background: linear-gradient(
        to bottom,
        var(--ui-inputfield-textarea-bg-top),
        var(--ui-inputfield-textarea-bg-bottom)
    );
    border: var(--ui-inputfield-textarea-border);
    border-radius: var(--ui-inputfield-textarea-radius);
    padding: var(--ui-inputfield-textarea-padding);
    box-shadow: var(--ui-inputfield-textarea-shadow);
    transition: var(--ui-inputfield-textarea-transition);
}

/* Fokus */
.inputfield.textarea:focus {
    border: var(--ui-inputfield-date-focus-border);
    background-color: var(--ui-inputfield-date-focus-bg);
    box-shadow: var(--ui-inputfield-date-focus-shadow);
    outline: none;
}

/* ======================================================
.inputfield.enum
====================================================== */
.inputfield.enum {
    font-size: var(--ui-inputfield-enum-font-size) !important;
    padding: var(--ui-inputfield-enum-padding);
    background-color: var(--ui-inputfield-enum-bg);
    border: var(--ui-inputfield-enum-border);
    border-radius: var(--ui-inputfield-enum-radius);
    cursor: pointer;
    box-shadow: var(--ui-inputfield-enum-shadow);
    transition: var(--ui-inputfield-enum-transition);
    width: auto !important;
}


/* ======================================================
.inputfield.selfenum
====================================================== */
.inputfield.selfenum {
    font-family: var(--ui-inputfield-selfenum-font-family);
    font-size: var(--ui-inputfield-selfenum-font-size) !important;
    color: var(--ui-inputfield-selfenum-text-color);
    padding: var(--ui-inputfield-selfenum-padding);
    width: var(--ui-inputfield-selfenum-width);
    background-color: var(--ui-inputfield-selfenum-bg);
    display: inline-block;
    text-align: left;
    border: var(--ui-inputfield-selfenum-border);
    cursor: pointer;
    border-radius: var(--ui-inputfield-selfenum-radius);
    box-shadow: var(--ui-inputfield-selfenum-shadow);
    transition: var(--ui-inputfield-selfenum-transition);
}

/* ======================================================
.inputfield.enum Status
====================================================== */
.inputfield.enum.warning{
    border: var(--ui-inputfield-enum-warning-border);
    text-align: center;
}

.inputfield.enum.alarm{
    border: var(--ui-inputfield-enum-alarm-border);
    text-align: center;
}

.inputfield.enum.ok{
    border: var(--ui-inputfield-enum-ok-border);
    text-align: center;
}

/* ======================================================
.inputfield.self_enum:focus
====================================================== */
.inputfield.self_enum:focus {
    background-color: var(--ui-inputfield-selfenum-focus-bg);
    border: var(--ui-inputfield-selfenum-focus-border);
    box-shadow: var(--ui-inputfield-selfenum-focus-shadow);
}

/* ======================================================
.inputfield.boolean
====================================================== */
.inputfield.boolean {
    font-family: var(--ui-inputfield-boolean-font-family);
    font-size: var(--ui-inputfield-boolean-font-size) !important;
    color: var(--ui-inputfield-boolean-text-color);
    padding: var(--ui-inputfield-boolean-padding);
    width: auto;
    background-color: var(--ui-inputfield-boolean-bg);
    display: inline-block;
    text-align: left;
    border: var(--ui-inputfield-boolean-border);
    cursor: pointer;
    border-radius: var(--ui-inputfield-boolean-radius);
    box-shadow: var(--ui-inputfield-boolean-shadow);
    transition: var(--ui-inputfield-boolean-transition);
}

.inputfield.boolean:focus {
    background-color: var(--ui-inputfield-selfenum-focus-bg);
    border: var(--ui-inputfield-selfenum-focus-border);
    box-shadow: var(--ui-inputfield-selfenum-focus-shadow);
}

/* ======================================================
.inputfield.read-write.block
====================================================== */
.inputfield.read-write.block {
    font-size: var(--ui-inputfield-block-font-size) !important;
    padding: var(--ui-inputfield-block-padding);
    border-radius: var(--ui-inputfield-block-radius);
    box-shadow: var(--ui-inputfield-block-shadow);
    transition: var(--ui-inputfield-block-transition);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;

    background-color: var(--block-bg, #ebebeb);
    color: var(--block-fg, #444);
    border: 1px solid var(--block-border, #cccccc);
    
    /* ÄNDERUNGEN HIER: */
    cursor: not-allowed;      /* Vorher: default */
    pointer-events: auto;     /* Vorher: none (Wichtig, damit Cursor sichtbar wird) */
    
    user-select: text;
    height: var(--block-height, 50px);
}





.centered-image {
    display: block;
    margin: auto;
	cursor: default; 
}

.centered-image.set200 {
    width: 200px;
    height: 200px;
	cursor: default; 
}

.centered-image.set100 {
    width: 100px;
    height: 100px;
	cursor: default; 
}
.centered-image.set50 {
    width: 50px;
    height: 50px;
	cursor: default; 
}

.centered-image.set20 {
    width: 20px;
    height: 20px;
	cursor: default; 
}



 .highlight{
    font-weight: bold;        /* Fettschrift */
    padding: 1px 1px;         /* Innenabstand */
	border-radius: 1px;       /* Abgerundete Ecken */
}
 .highlight.yellow{
    background-color: yellow;  /* Hintergrundfarbe */
}

.string-editor-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0,0,0,0.3);
            z-index: 9999;
            min-width: 400px;
            text-align: center;
        }

        .string-editor-result {
            margin-top: 12px;
            font-size: 0.9em;
            color: #444;
        }

/* ======================================================
Pagination
====================================================== */
.pagination{
    margin: var(--ui-pagination-margin);
    text-align: var(--ui-pagination-text-align);
    font-family: var(--ui-pagination-font-family);
    color: var(--ui-pagination-text-color);
}

.pagination a{
    padding: var(--ui-pagination-link-padding);
    margin: var(--ui-pagination-link-margin);
    text-decoration: var(--ui-pagination-link-decoration);
    border: var(--ui-pagination-link-border);
    color: var(--ui-pagination-link-text-color);
}

/* ======================================================
STANDARD Button
====================================================== */
.standardbutton{
    border: none;
    border-radius: var(--ui-button-radius);
    padding: var(--ui-button-padding);

    font-family: var(--ui-button-font-family);
    font-size: var(--ui-button-font-size);
    font-weight: var(--ui-button-font-weight);
    letter-spacing: var(--ui-button-letter-spacing);

    color: var(--ui-button-text-light);
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;

    margin-right: 8px;
    margin-bottom: 4px;

    background: linear-gradient(
        to bottom,
        var(--ui-btn-top),
        var(--ui-btn-bottom)
    );
    box-shadow: var(--ui-button-shadow-normal);

    transition: background 0.3s ease,
                transform 0.2s ease,
                box-shadow 0.3s ease;
}

.standardbutton:hover{
    background: linear-gradient(
        to bottom,
        var(--ui-btn-hover-top, var(--ui-btn-top)),
        var(--ui-btn-hover-bottom, var(--ui-btn-bottom))
    );
    box-shadow: var(--ui-button-shadow-hover);
    transform: translateY(-1px);
}

/* ------------------------------
Button Farben
------------------------------ */
.standardbutton.gray{
    --ui-btn-top:    var(--ui-btn-gray-top);
    --ui-btn-bottom: var(--ui-btn-gray-bottom);
}

.standardbutton.green{
    --ui-btn-top:          var(--ui-btn-green-top);
    --ui-btn-bottom:       var(--ui-btn-green-bottom);
    --ui-btn-hover-top:    var(--ui-btn-green-hover-top);
    --ui-btn-hover-bottom: var(--ui-btn-green-hover-bottom);
}

.standardbutton.red{
    --ui-btn-top:          var(--ui-btn-red-top);
    --ui-btn-bottom:       var(--ui-btn-red-bottom);
    --ui-btn-hover-top:    var(--ui-btn-red-hover-top);
    --ui-btn-hover-bottom: var(--ui-btn-red-hover-bottom);
}

.standardbutton.blue{
    --ui-btn-top:          var(--ui-btn-blue-top);
    --ui-btn-bottom:       var(--ui-btn-blue-bottom);
    --ui-btn-hover-top:    var(--ui-btn-blue-hover-top);
    --ui-btn-hover-bottom: var(--ui-btn-blue-hover-bottom);
}

.standardbutton.yellow{
    --ui-btn-top:          var(--ui-btn-yellow-top);
    --ui-btn-bottom:       var(--ui-btn-yellow-bottom);
    --ui-btn-hover-top:    var(--ui-btn-yellow-hover-top);
    --ui-btn-hover-bottom: var(--ui-btn-yellow-hover-bottom);
    color: var(--ui-button-text-dark);
}

/* ------------------------------
.button_inner
------------------------------ */
.button_inner{
    text-align: var(--ui-button-inner-text-align);
    padding: var(--ui-button-inner-padding);
    background-color: var(--ui-button-inner-bg);
    border: var(--ui-button-inner-border);
    width: var(--ui-button-inner-width);
    box-sizing: border-box;
}

/* ------------------------------
Button GRÖSSEN / MODIFIER
------------------------------ */
.standardbutton.widthAuto{ width:auto!important; }

.standardbutton.height26{
    height:30px!important;
    line-height:26px;
    padding:0 12px;
}

.standardbutton.heightmask{
    white-space:normal;
    line-height:1.5;
    padding:4px 8px;
    font-size:0.80em;
}

.standardbutton.width20{ width:20px!important; height:40px; }
.standardbutton.width40{ width:40px!important; height:40px; }
.standardbutton.width40.font30{ font-size:30px; }

.standardbutton.height20{ height:20px!important; }

.standardbutton.width140{ width:160px!important; }
.standardbutton.width160{ width:160px!important; }
.standardbutton.width180{ width:180px!important; }
.standardbutton.width200{ width:200px!important; height:40px; }
	
/* ------------------------------
Help Button
------------------------------ */	
	.help-button{
		position: absolute;
		right: var(--ui-help-btn-pos-right);
		top: var(--ui-help-btn-pos-top);
		transform: var(--ui-help-btn-transform);

		cursor: pointer;
		text-decoration: none;

		background-color: var(--ui-help-btn-bg);
		border-radius: var(--ui-help-btn-radius);
		width: var(--ui-help-btn-size);
		height: var(--ui-help-btn-size);

		box-shadow: var(--ui-help-btn-shadow);
	}

	.help-button:hover{
		background-color: var(--ui-help-btn-bg-hover);
	}

	.help-text{
		font-family: var(--ui-help-text-font-family);
		font-size: var(--ui-help-text-font-size);
		color: var(--ui-help-text-color);

		background-color: var(--ui-help-text-bg);
		padding: var(--ui-help-text-padding);

		border: var(--ui-help-text-border);
		border-radius: var(--ui-help-text-radius);

		line-height: var(--ui-help-text-line-height);
		max-width: var(--ui-help-text-max-width);
	}

/* ======================================================	
.header
========================================================= */
.header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;

    padding: var(--ui-header-padding);

    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: var(--ui-header-width);
    z-index: var(--ui-header-z-index);

    background-color: var(--ui-header-background-color);
    box-shadow: var(--ui-header-box-shadow);
}

.header h1 {
    margin: 0;
    font-size: var(--ui-header-h1-font-size);
}

.header p {
    margin: 0;
    font-size: var(--ui-header-p-font-size);
}

.header img {
    max-height: var(--ui-header-image-max-height);
    margin-right: var(--ui-header-image-margin-right);
}

/* ======================================================	
.body
========================================================= */
body {
    margin: var(--ui-body-margin);
    font-family: var(--ui-body-font-family);
    padding-top: var(--ui-body-padding-top);
}

.body.language_container {
    display: flex;
    align-items: center;
    gap: var(--ui-language-container-gap);
    margin: var(--ui-language-container-margin);
    text-align: center;
}


.body.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--ui-body-content-margin-top);
}


.body.flagsize {
    height: var(--ui-flag-height);
    width: var(--ui-flag-width);
}

/* ======================================================
.label
========================================================= */
.label {
    font-family: var(--ui-label-font-family);
    font-size: var(--ui-label-font-size);
    font-weight: var(--ui-label-font-weight);
    color: var(--ui-label-text-color);

    text-align: left;

    width: 150px;
    min-width: 150px;
    max-width: 150px;

    margin-left: var(--ui-label-margin-left);
    padding: var(--ui-label-padding);

    background-color: var(--ui-label-background-color);
    border: 1px solid var(--ui-label-border-color);
    border-radius: var(--ui-label-border-radius);

    box-shadow: var(--ui-label-box-shadow);
}

.label.bold {
    font-size: var(--ui-label-font-size-bold) !important;
    font-weight: var(--ui-label-font-weight-bold) !important;
}

.label.mark {
    background-color: var(--ui-label-background-mark-color);
}

.label.readonly {
    background-color: var(--ui-label-background-readonly-color);
    cursor: not-allowed;
}

.label.w80  { width: 80px  !important; min-width: 80px;  max-width: 80px; }
.label.w100 { width: 100px !important; min-width: 100px; max-width: 100px; }
.label.w110 { width: 110px !important; min-width: 110px; max-width: 110px; }
.label.w120 { width: 120px !important; min-width: 120px; max-width: 120px; }
.label.w130 { width: 130px !important; min-width: 130px; max-width: 130px; }
.label.w140 { width: 140px !important; min-width: 140px; max-width: 140px; }
.label.w180 { width: 180px !important; min-width: 180px; max-width: 180px; }
.label.w200 { width: 200px !important; min-width: 200px; max-width: 200px; }
.label.w220 { width: 220px !important; min-width: 220px; max-width: 220px; }


/* ======================================================
.standardbutton.color-mask 
========================================================= */
.standardbutton.color-mask {
    background: linear-gradient(
        to bottom,
        var(--ui-button-color-mask-background-gradient-top),
        var(--ui-button-color-mask-background-gradient-bottom)
    );

    color: var(--ui-button-color-mask-text-color);
    font-family: var(--ui-button-color-mask-font-family);
    font-size: var(--ui-button-color-mask-font-size);
    letter-spacing: var(--ui-button-color-mask-letter-spacing);

    height: var(--ui-button-color-mask-height);
    width: var(--ui-button-color-mask-width);

    box-shadow: var(--ui-button-color-mask-box-shadow-normal);
    transition: var(--ui-button-color-mask-transition);
}

.standardbutton.color-mask:hover {
    background: linear-gradient(
        to bottom,
        var(--ui-button-color-mask-background-hover-top),
        var(--ui-button-color-mask-background-hover-bottom)
    );

    box-shadow: var(--ui-button-color-mask-box-shadow-hover);
}

/* ======================================================	
.info-text-standard.right (informationszeile in der Maske)
========================================================= */
.info-text-standard.right {
    font-size: var(--ui-info-text-standard-font-size);
    font-family: var(--ui-info-text-standard-font-family);
    color: var(--ui-info-text-standard-text-color);
    text-align: var(--ui-info-text-standard-text-align-right);
}

/* ======================================================	
.info_mask_top_text:  (Zeil block - Erklärungen in der Maske)
========================================================= */
.info_mask_top_text {
    width: 100%;
    background-color: var(--ui-info-top-background-color);
    color: var(--ui-info-top-text-color);
    margin: 0;
    padding: var(--ui-info-top-padding);
    font-size: var(--ui-info-top-font-size);
    text-align: left;
    font-weight: bold;
    border-left: 10px solid var(--ui-info-top-border-left-color);
    border-radius: var(--ui-info-top-border-radius);
    cursor: default;
}


.last_update_write, .last_update_write_top {
    font-size: 10px;
    font-family: Verdana, sans-serif;
    text-align: center;
}

.last_update_write_top {
    background-color: #4682b4;
    /*color: white;*/
}





.gapupdatethelimit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.standardsearchfields {
    padding: 5px;
    font-size: 14px;
    width: 300px;
}

.standardinputfields {
    padding: 5px;
    font-size: 14px;
    border: 1px solid #000000;
    width: auto;
}



    .form-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 10px;
    }
	
	
.ui-readonly-hint {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0;
    padding-bottom: 6px;
}

.ui-readonly-hint span {
    display: inline-block;
    font-weight: bold;
    color: #d40000 !important;
    font-size: 24px;
}

.button_inner .ui-readonly-hint span {
    font-size: 16px;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
}