/* ######################## */
/* FILE: init_fonts.css       */
/* ######################## */

@charset "UTF-8";
/* ü€Úτƒ-8 */

/* montserrat-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../font/montserrat-v31-latin-regular.woff2') format('woff2');
}

/* montserrat-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700; /*als 'Bold' nutzen */
  src: url('../font/montserrat-v31-latin-500.woff2') format('woff2');
}



/* https://gwfh.mranftl.com/fonts/inter?subsets=latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../font/inter-v20-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../font/inter-v20-latin-700.woff2') format('woff2');
}

/* https://vectio.com/wp-content/uploads/2024/01/D-DIN-PRO-Regular.woff2
																								 D-DIN-PRO-Medium.woff2
																								 D-DIN-PRO-Bold.woff2 */
/*
@font-face {
  font-display: swap;
  font-family: 'DINPro';
  font-style: normal;
  font-weight: 400;
  src: url('../font/D-DIN-PRO-Regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'DIN';
  font-style: normal;
  font-weight: 400;
  src: url('../font/din.woff2') format('woff2');
}


@font-face {
  font-display: swap;
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400;
  src: url('../font/Lexend-Regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300;
  src: url('../font/Lexend-Light.woff2') format('woff2');
}

*/

/* ######################## */
/* FILE: init.css       */
/* ######################## */

@charset "UTF-8";
/* ü€Úτƒ-8 */

/* 1rem = 10px */
html {
    font-size: 62.5%;
} 

/* ************************************************ */
/* STANDARD STYLE RESET                             */
/* ************************************************ */

body, div, span, p, pre, a, img, sup, ol, ul, li, form, label, 
input[type], select, textarea, button, table, tbody, tfoot, thead, tr, th, td {
    font-family: Inter, Arial, Verdana, Geneva, sans-serif;
    xfont-family: Lexend;
    xfont-weight: 300;
    xfont-family: Montserrat;
    xfont-weight: 400;
    font-size: 1.6rem;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

sup { 
    font-size: 1.1rem;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    font-weight: bold;
    top: -0.5em;
}



/* ************************************************ */
/* LINKS                                            */
/* ************************************************ */

a {
	text-decoration-line: underline;
	text-decoration-style: solid;
	color: #e55e00;
}

a:visited {
    color: #991A8B;
}

a:hover {
    text-decoration: none;
    color: #e55e00;
}






/* ************************************************ */
/*                                             */
/* ************************************************ */

#menubar *,
#sidemenu *,
#footer *,
h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", sans-serif;
    xfont-family: Lexend;
    xfont-weight: 300;
}



/* ************************************************ */
/* TEXTAREA */
/* ************************************************ */

textarea {
    border-radius: 3px;
    outline: none;
    border: 1px solid #a9a9a9;
    padding: 0.6rem 0.8rem 0.6rem 0.8rem;
}

select {
	max-width: 100%;
}



/* ************************************************ */
/* LIST                                             */
/* ************************************************ */
ul {
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
}

ul.NoTopMargin {
    margin-top: 0;
}

ul > li {
    padding-top: 0;
    margin-left: 1.7rem;
}

ul > li:not(:last-child) {
    padding-bottom: 0.48rem;
}

ol {
    margin-top: 0.8rem;
    margin-bottom: 1.12rem;
    list-style-type: decimal;
    margin-left: 0.5rem;
}

ol > li {
    padding-top: 0;
    margin-left: 1.5rem;
}

ol > li:not(:last-child) {
    padding-bottom: 0.8rem;
}

ul ul {
    list-style-type: square;
}

ol ul {
    list-style-type: disc;
}

/* ************************************************ */
/* IMAGES                                           */
/* ************************************************ */
img {
    border: 0;
}

/* ************************************************ */
/* HEADER                                           */
/* ************************************************ */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    outline: none;
    color: black;
    text-align: left;
}

h1 {
    font-size: 3.2rem;
    line-height: 5rem;
    letter-spacing: 2px;
    font-weight: bold;
    margin-bottom: 3rem;
    text-align: left;
}

h1:has(span) {

}

/* Untertitel */
h1 span {
    display: block; /* Umbruch */
    font-size: 1.6rem;
    color: #222;
    margin-top: 0.5rem;
    font-weight: 400;
}

h2 {
    font-size: 2.4rem;
    xline-height: 2.8rem;
    letter-spacing: 2px;
    font-weight: bold;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 0;
    margin-left: 0;
}

h3 {
    font-size: 1.9rem;
    line-height: 1.9rem;
    letter-spacing: 1px;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

h4 {
    font-size: 1.6rem;
    xline-height: 1.7rem;
    font-weight: bold;
    padding-bottom: 1rem;
}

h5 {
    font-size: 1.6rem;
    font-weight: normal;
    margin-bottom: 0.3rem;
}

h6 {
    font-size: 1.5rem;
    font-weight: bold;
}



/* ######################## */
/* FILE: init_table.css       */
/* ######################## */

@charset "UTF-8";
/* ü€Úτƒ-8 */

:root {

	--col-table-head-font: #fff;
	--col-table-head-bg: #017EBE;
	--col-table-head-border: #017EBE;
	--col-table-cell-border: #ccc;
	--col-table-cell-bg: #fdfdfd;
	
}

/* ************************************************ */
/* STANDARD - TABLE                                 */
/* ************************************************ */

table {
  width: auto;         /* Tabelle nur so breit wie nötig */
  max-width: 100%;     /* Niemals über den Rand hinaus */	
	border:0;
	border-spacing: 0;
	padding: 0;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

table thead th {
	font-size: 1.4rem;
	font-weight: normal;
	letter-spacing: 1px;
	color: var(--col-table-head-font);
	text-align: left;
	vertical-align: middle;
	background-color: var(--col-table-head-bg);
	border: 1px solid var(--col-table-head-border);
	padding: 0.3rem 1rem 0.3rem 1rem;
}

table thead th:first-child {
	border-top-left-radius: 0.5rem;
}
table thead th:last-child {
	border-top-right-radius: 0.5rem;
}

table tbody tr td {
	padding: 0.6rem 1rem 0.5rem 1rem;
	border-right: 1px solid var(--col-table-cell-border);
	border-bottom: 1px solid var(--col-table-cell-border);
	vertical-align: top;
	line-height: 2.6rem;
}

/* erste spalte von allen zeilen */
table tbody tr td:first-child {
	border-left: 1px solid var(--col-table-cell-border);
}

/* erste zeile */

table tbody tr:first-child td {
	border-top: 1px solid var(--col-table-cell-border);
}
table tbody tr:first-child td:first-child {
	border-top-left-radius: 0.5rem;
}
table tbody tr:first-child td:last-child {
	border-top-right-radius: 0.5rem;
}


/* erste zeile wenn HEADER vorhanden */
table thead + tbody tr:first-child td {
	border-top: none;
}
table thead + tbody tr:first-child td:first-child,
table thead + tbody tr:first-child td:last-child {
	border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* letzte zeile */
table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 0.5rem;
}
table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 0.5rem;
}

th {
    text-align: center;
    word-wrap: break-word;
}

td {
    text-align: left;
    word-wrap: break-word;
}

table tbody tr {
	background-color: var(--col-table-cell-bg);
}

/* Zebra-zeilen ab 11 Zeilen */
table tr:nth-last-child(n+11) ~ tr:nth-child(even),
table tr:nth-last-child(n+11):nth-child(even) {
	background-color: #fafafa;
}

/* zeilenfarbe ändern beim Drüberfahren */
/*
table tr:hover,
table tr:nth-child(even):hover,
table tr:nth-last-child(n+11) ~ tr:nth-child(even):hover {
    background-color: #f2f2f2;
}
*/
table tr:nth-last-child(n+11):hover,
table tr:nth-last-child(n+11) ~ tr:hover {
    background-color: #f2f2f2;
}

/* ************************************************ */
/* TABLE CONFIG PARAMETER                           */
/* ************************************************ */

table.autowidth {
    width: auto;
}

table.width100 {
    width: 100%;
}

table.min80 {
    min-width: 80%;
}

table.min60 {
    min-width: 60%;
}


thead.center th {
    text-align: center;
}

tbody.center td {
    text-align: center;
}

table.col1notextbreak td:nth-child(1) {
    white-space: nowrap;
}

table.col1notextbreak th:nth-child(1) {
    white-space: nowrap;
}

table.col4notextbreak td:nth-child(4) {
    white-space: nowrap;
}

table.col4notextbreak th:nth-child(4) {
    white-space: nowrap;
}

table.col1alignright td:nth-child(1) {
    text-align: right;
}

table.col1alignleft td:nth-child(1) {
    text-align: left;
}

table.col1center td:nth-child(1),
table.col1center th:nth-child(1) {
    text-align: center;
}

table.centerall td {
    text-align: center;
}

thead.padleftright th {
    padding-left: 1rem;
    padding-right: 1rem;
}

td.fitwidth {
    width: 0.1rem;
    white-space: nowrap;
}


table.tdaligntop td {
	vertical-align: top;	
}

th.alignright,
td.alignright,
input.alignright {
    text-align: right !important;
}

th.alignleft,
td.alignleft {
    text-align: left !important;
}

td.valigntop {
	vertical-align: top !important;
}

th.aligncenter,
td.aligncenter {
    text-align: center !important;
}

td.valignmiddle {
    vertical-align: middle !important;
}

td.textbold {
    font-weight: bold;
}

th.nowrap {
	white-space: nowrap;
}

table.nowrap td {
	white-space: nowrap;
}

table.onlyfirstcolleft th,
table.onlyfirstcolleft td {
    text-align: center;
}

table.onlyfirstcolleft td {
    vertical-align: middle;
}

table.onlyfirstcolleft th:first-child,
table.onlyfirstcolleft td:first-child {
    text-align: left;
}

/* ######################## */
/* FILE: init_button.css       */
/* ######################## */

@charset "UTF-8";
/* ü€Úτƒ-8 */

:root {

	--col-button-font: white;
	--col-button-bg: #017EBE;
	--col-button-border: #017EBE;	
	--col-button-hover-bg: #016ca3;
	--col-button-hover-font: white;
}

button {
	display: inline-flex;
  align-items: center;
  justify-content: center;	
	background-color: var(--col-button-bg);
	height: 4rem;
	padding: 0rem 1.4rem 0rem 1.4rem;
	margin: 0.2rem 0 0.2rem 0;
  border: 1px solid var(--col-button-border);
  border-radius: 5px;
	font-size: 1.4rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	color: var(--col-button-font);
	vertical-align: middle; 
}

a.button  {
	display: inline-flex;
  align-items: center;
  justify-content: center;	
  background-color: var(--col-button-bg);
	height: 4rem;
	padding: 0rem 1.4rem 0rem 1.4rem;
  margin: 0.2rem 0 0.2rem 0;
  border: 1px solid var(--col-button-border);
  border-radius: 5px;
  font-size: 1.4rem;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--col-button-font) !important;
  vertical-align: middle; 
}


button.large {
	xpadding: 1.5rem 3rem 1.4rem 3.0rem;
	padding-left: 2rem;
	padding-right: 2rem;
	height: 5rem;
	font-size: 1.7rem;
}

button span[class^="icon-"],
button span[class^="icon2-"] {
	margin-right: 0.8rem;
  xposition: relative;
  xtop: 0;
}


button.icononly {
	margin:0;
	padding: 0.3rem 0rem 0.2rem 0.7rem;
}

button.disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

button:hover {
	background-color: var(--col-button-hover-bg);
	cursor: pointer;
}

button.disabled:hover {
	background-color: var(--col-button-bg);
	cursor: not-allowed;
}


/* LINK-BUTTONS */


a.button span[class^="icon-"],
a.button span[class^="icon2-"] {
	margin-right: 0.7rem;
  position: relative;
  top: -1px;
}

a.margintopbot {
	margin-top: 1.8rem;
	margin-bottom: 1.8rem;
}

a.small  {
		margin:0;
    padding: 0.8rem 0.9rem 0.8rem 1.1rem;
}

a.mini  {
	margin:0;
	padding: 0.5rem 1rem 0.4rem 1.2rem;
}

a.icononly  {
	margin:0;
	padding: 0rem 0rem 0rem 0.7rem;
}

a.aktiv {
    background-color: #e9e9e9;
    color: black;
}

a.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

a.disabled:hover {
    background-color: #e9e9e9;
}

#content a.button:visited,
#content a.button:link,
#content a.button:hover,
#content a.button:active,
#content a.button:focus {
    text-decoration: none;
    color: var(--col-button-hover-font);
}

a.button:hover {
    background-color: var(--col-button-hover-bg);
    color: var(--col-button-hover-font);
}

a.button:active {
    background-color: #e9e9e9;
    color: var(--col-button-hover-font);
}

/* ######################## */
/* FILE: init_icons.css       */
/* ######################## */

@charset "UTF-8";
/* ü€Úτƒ-8 */

:root {

    --svg-mtsd: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 206.91 53.52'%3E%3Cpath stroke='%23444444' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round' d='M1 1h4.97l24.99 47.24L55.94 1h4.97v51.41H57.6V5.61h-.14l-24.84 46.8H28.3L4.46 5.61H4.31v46.8H1V1zM67.36 1h44.79v2.88H91.41v48.53H88.1V3.88H67.36V1zM114.9 35.13c.07 9.18 5.66 14.63 18.91 14.63 12.07 0 16.49-5.18 16.49-10.97 0-5.52-2.62-8-12.97-10.14l-9.18-1.93c-10.76-2.28-14.9-5.45-14.9-12.9 0-7.38 6.42-12.77 18.63-12.77 12.42 0 20.29 4.55 20.63 15.04h-3.17c-.41-5.66-3.59-12.28-16.56-12.28-12.01 0-15.94 4.42-15.94 10.07 0 5.24 2.28 7.87 11.66 9.73l10.14 2c9.87 1.93 15.25 5.11 15.25 12.97 0 6.69-4.42 13.94-19.8 13.94-16.15 0-22.36-6.97-22.36-17.39H114.9zM158.82 1h24.05c12.17 0 23.04 5.83 23.04 25.71 0 15.05-7.63 25.71-23.62 25.71h-23.47V1zm3.31 48.53h20.81c11.38 0 19.66-6.98 19.66-22.83 0-16.27-8.28-22.83-20.45-22.83h-20.02v45.66z'/%3E%3C/svg%3E");

		--svg-home: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" %3E%3Cpath d="M23.121,9.069,15.536,1.483a5.008,5.008,0,0,0-7.072,0L.879,9.069A2.978,2.978,0,0,0,0,11.19v9.817a3,3,0,0,0,3,3H21a3,3,0,0,0,3-3V11.19A2.978,2.978,0,0,0,23.121,9.069ZM15,22.007H9V18.073a3,3,0,0,1,6,0Zm7-1a1,1,0,0,1-1,1H17V18.073a5,5,0,0,0-10,0v3.934H3a1,1,0,0,1-1-1V11.19a1.008,1.008,0,0,1,.293-.707L9.878,2.9a3.008,3.008,0,0,1,4.244,0l7.585,7.586A1.008,1.008,0,0,1,22,11.19Z"/%3E%3C/svg%3E');
    --svg-search: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" %3E%3Cg %3E%3Cpath d="M24,22.586l-6.262-6.262a10.016,10.016,0,1,0-1.414,1.414L22.586,24ZM10,18a8,8,0,1,1,8-8A8.009,8.009,0,0,1,10,18Z"/%3E%3C/g%3E%3C/svg%3E');   
		
		--svg-customer-center: url('data:image/svg+xml,%3Csvg viewBox="3 3 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="12" cy="8" r="3.5" stroke-width="1.4" stroke="%23222222" stroke-linecap="round"/%3E%3Cpath d="M4.84913 16.9479C5.48883 14.6034 7.91473 13.5 10.345 13.5H13.655C16.0853 13.5 18.5112 14.6034 19.1509 16.9479C19.282 17.4287 19.3868 17.9489 19.4462 18.5015C19.5052 19.0507 19.0523 19.5 18.5 19.5H5.5C4.94772 19.5 4.49482 19.0507 4.55382 18.5015C4.6132 17.9489 4.71796 17.4287 4.84913 16.9479Z" stroke-width="1.4" stroke="%23222222" stroke-linecap="round"/%3E%3C/svg%3E');
		
		--svg-eye: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" %3E%3Cpath d="M23.271,9.419C21.72,6.893,18.192,2.655,12,2.655S2.28,6.893.729,9.419a4.908,4.908,0,0,0,0,5.162C2.28,17.107,5.808,21.345,12,21.345s9.72-4.238,11.271-6.764A4.908,4.908,0,0,0,23.271,9.419Zm-1.705,4.115C20.234,15.7,17.219,19.345,12,19.345S3.766,15.7,2.434,13.534a2.918,2.918,0,0,1,0-3.068C3.766,8.3,6.781,4.655,12,4.655s8.234,3.641,9.566,5.811A2.918,2.918,0,0,1,21.566,13.534Z"/%3E%3Cpath d="M12,7a5,5,0,1,0,5,5A5.006,5.006,0,0,0,12,7Zm0,8a3,3,0,1,1,3-3A3,3,0,0,1,12,15Z"/%3E%3C/svg%3E');
		--svg-eye-hide: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" %3E%3Cg %3E%3Cpath d="M23.821,11.181v0a15.736,15.736,0,0,0-4.145-5.44l3.032-3.032L21.293,1.293,18,4.583A11.783,11.783,0,0,0,12,3C4.5,3,1.057,9.261.179,11.181a1.969,1.969,0,0,0,0,1.64,15.736,15.736,0,0,0,4.145,5.44L1.293,21.293l1.414,1.414L6,19.417A11.783,11.783,0,0,0,12,21c7.5,0,10.943-6.261,11.821-8.181A1.968,1.968,0,0,0,23.821,11.181ZM2,12.011C2.75,10.366,5.693,5,12,5a9.847,9.847,0,0,1,4.518,1.068L14.753,7.833a4.992,4.992,0,0,0-6.92,6.92L5.754,16.832A13.647,13.647,0,0,1,2,12.011ZM15,12a3,3,0,0,1-3,3,2.951,2.951,0,0,1-1.285-.3L14.7,10.715A2.951,2.951,0,0,1,15,12ZM9,12a3,3,0,0,1,3-3,2.951,2.951,0,0,1,1.285.3L9.3,13.285A2.951,2.951,0,0,1,9,12Zm3,7a9.847,9.847,0,0,1-4.518-1.068l1.765-1.765a4.992,4.992,0,0,0,6.92-6.92l2.078-2.078A13.584,13.584,0,0,1,22,12C21.236,13.657,18.292,19,12,19Z"/%3E%3C/g%3E%3C/svg%3E');

    --svg-ext-gray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
    --svg-ext-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
		
		--svg-gotop: url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg %3E%3Cpath d="M15 11L12 8M12 8L9 11M12 8V16M21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12Z" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3C/svg%3E');
		
		--svg-trashcan: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="%23000000" %3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Etrash-can%3C/title%3E%3Crect x="12" y="12" width="2" height="12"/%3E%3Crect x="18" y="12" width="2" height="12"/%3E%3Cpath d="M4,6V8H6V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V8h2V6ZM8,28V8H24V28Z"/%3E%3Crect x="12" y="2" width="8" height="2"/%3E%3Crect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" class="cls-1" width="32" height="32"/%3E%3C/svg%3E');
		
		--svg-logout: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23000000" viewBox="0 0 32 32" %3E%3Cpath d="M 15 4 L 15 16 L 17 16 L 17 4 Z M 12 4.6875 C 7.347656 6.339844 4 10.785156 4 16 C 4 22.617188 9.382813 28 16 28 C 22.617188 28 28 22.617188 28 16 C 28 10.785156 24.652344 6.339844 20 4.6875 L 20 6.84375 C 23.527344 8.390625 26 11.910156 26 16 C 26 21.515625 21.515625 26 16 26 C 10.484375 26 6 21.515625 6 16 C 6 11.910156 8.472656 8.390625 12 6.84375 Z"/%3E%3C/svg%3E');
		--svg-login: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 379 511.54"%3E%3Cpath fill-rule="nonzero" d="M107.83 0h194.21c21.17 0 40.41 8.68 54.34 22.61C370.33 36.56 379 55.82 379 76.96v357.62c0 21.06-8.69 40.29-22.63 54.26l-.1.1c-13.97 13.93-33.19 22.6-54.23 22.6H107.83c-21.15 0-40.41-8.67-54.36-22.62-13.93-13.93-22.61-33.17-22.61-54.34V360.6h37.55v73.98c0 10.81 4.45 20.67 11.59 27.81 7.15 7.15 17.02 11.6 27.83 11.6h194.21c10.83 0 20.7-4.43 27.8-11.54 7.18-7.17 11.61-17.04 11.61-27.87V76.96c0-10.8-4.45-20.67-11.6-27.82-7.13-7.14-17-11.59-27.81-11.59H107.83c-10.84 0-20.7 4.44-27.84 11.58-7.14 7.13-11.58 17-11.58 27.83v73.96H30.86V76.96c0-21.17 8.66-40.42 22.6-54.36C67.4 8.66 86.65 0 107.83 0zm59.06 161.72 97.02 91.6-101.77 96.42-25.8-27.12 50.94-48.28L0 274.66v-37.39l192.03-.33-50.8-47.96 25.66-27.26z"/%3E%3C/svg%3E');
		
    
    --svg-dl-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 16l-5-5h3V3h4v8h3l-5 5zm9 0v3c0 .6-.4 1-1 1H4c-.6 0-1-.4-1-1v-3h2v2h14v-2h2z'/%3E%3C/svg%3E");
		
		--svg-header-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='4' y1='12' x2='20' y2='12' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='4' y1='12' x2='20' y2='12' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
		--svg-header-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke-linecap='round'%3E%3Cline x1='12' y1='4' x2='12' y2='20' stroke='black' stroke-width='4'/%3E%3Cline x1='4' y1='12' x2='20' y2='12' stroke='black' stroke-width='4'/%3E%3Cline x1='12' y1='4' x2='12' y2='20' stroke='white' stroke-width='2'/%3E%3Cline x1='4' y1='12' x2='20' y2='12' stroke='white' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");

		--svg-stripe-button: url('data:image/svg+xml,%3Csvg viewBox="0 0 256 246" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M208,32H48A16.01817,16.01817,0,0,0,32,48V208a16.01833,16.01833,0,0,0,16,16H208a16.01833,16.01833,0,0,0,16-16V48A16.01817,16.01817,0,0,0,208,32ZM128,184c-24.71045,0-44.06738-14.05615-44.06738-32a8,8,0,0,1,16,0c0,7.56787,11.52685,16,28.06738,16,13.27539,0,28.06738-6.5708,28.06738-16,0-9.60376-12.1958-13.44092-30.80224-18.19849-8.70606-2.22631-17.709-4.52856-24.75733-8.25024C90.83887,120.44558,85.936,113.1946,85.936,104c0-18.24292,18.08349-32,42.064-32,17.16748,0,31.917,7.16382,38.49219,18.69556a8.00006,8.00006,0,0,1-13.89942,7.92529C148.91406,92.169,139.26074,88,128,88c-14.61523,0-26.064,7.02808-26.064,16,0,6.81152,10.80664,10.08447,27.293,14.30005,19.08545,4.88037,42.83838,10.95435,42.83838,33.7C172.06738,169.94387,152.71045,184,128,184Z"/%3E%3C/svg%3E');
		--svg-paypal-button: url('data:image/svg+xml,%3Csvg viewBox="0 0 30 32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M 8.90625 5 L 8.71875 5.78125 L 5.03125 22.78125 L 4.75 24 L 9.625 24 L 9.03125 26.78125 L 8.75 28 L 15.71875 28 L 15.875 27.1875 L 16.90625 22.375 L 19.59375 22.375 C 23.355469 22.375 26.660156 19.929688 27.5 16 C 27.941406 13.933594 27.472656 12.183594 26.5 11 C 25.710938 10.039063 24.640625 9.460938 23.53125 9.1875 C 23.316406 8.199219 22.863281 7.359375 22.25 6.71875 C 21.113281 5.535156 19.535156 5 18.0625 5 Z M 10.53125 7 L 18.0625 7 C 19.042969 7 20.125 7.378906 20.8125 8.09375 C 21.5 8.808594 21.902344 9.828125 21.53125 11.5625 C 20.871094 14.65625 18.535156 16.375 15.59375 16.375 L 11.28125 16.375 L 11.125 17.15625 L 10.09375 22 L 7.25 22 Z M 13.0625 8.46875 L 12.875 9.25 L 11.84375 13.875 L 11.5625 15.09375 L 15.09375 15.09375 C 16.871094 15.09375 18.40625 13.800781 18.84375 12.0625 L 18.875 12.0625 C 18.878906 12.042969 18.871094 12.019531 18.875 12 C 19.09375 11.125 18.953125 10.226563 18.46875 9.5625 C 17.972656 8.882813 17.136719 8.46875 16.25 8.46875 Z M 14.65625 10.46875 L 16.25 10.46875 C 16.5625 10.46875 16.726563 10.558594 16.84375 10.71875 C 16.960938 10.878906 17.042969 11.136719 16.9375 11.53125 L 16.9375 11.5625 C 16.75 12.371094 15.792969 13.09375 15.09375 13.09375 L 14.0625 13.09375 Z M 23.59375 11.34375 C 24.121094 11.558594 24.617188 11.851563 24.96875 12.28125 C 25.550781 12.988281 25.871094 13.964844 25.53125 15.5625 C 24.871094 18.65625 22.535156 20.375 19.59375 20.375 L 15.28125 20.375 L 15.125 21.15625 L 14.09375 26 L 11.25 26 L 11.6875 24 L 11.71875 24 L 11.875 23.1875 L 12.90625 18.375 L 15.59375 18.375 C 19.355469 18.375 22.660156 15.929688 23.5 12 C 23.546875 11.773438 23.566406 11.5625 23.59375 11.34375 Z"/%3E%3C/svg%3E');
		
}

span.mtsd-logo {
  display: inline-block;
  vertical-align: middle;
  width: 9rem;
	height: 3rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
	-webkit-mask-image: var(--svg-mtsd);
	mask-image: var(--svg-mtsd);
	background-color: #444;
}



/* Gilt nur für span-Elemente, deren Klasse mit "icon-" beginnt 
   oder die " icon-" (nach einem Leerzeichen) enthalten */
span[class^="icon-"], 
span[class*=" icon-"] {
    display: inline-block;
    vertical-align: middle;
    width: 1.6rem;
    height: 1.6rem;
    transition: opacity 0.1s ease-in-out;
		
		background-color: black;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;        
}


a.button span[class^="icon-"],
a.button span[class*=" icon-"],
a.button span[class^="icon2-"],
a.button span[class*=" icon2-"],
button span[class^="icon-"],
button span[class*=" icon-"],
button span[class^="icon2-"],
button span[class*=" icon2-"] {
    background-color: white;
}


span[class^="icon2-"], 
span[class*=" icon2-"] {
    display: inline-block;
    vertical-align: middle;
    width: 1.6rem;
    height: 1.6rem;
    transition: opacity 0.1s ease-in-out;
		background-size: contain;
    background-repeat: no-repeat;   		
}


/* Gilt für alle Links, außer für die mit der Klasse .button */
a:not(.button):hover span[class^="icon-"], 
a:not(.button):hover span[class*=" icon-"] {
    opacity: 0.6;
}

a:not(.button):hover span[class^="icon2-"], 
a:not(.button):hover span[class*=" icon2-"] {
    opacity: 0.6;
}


span.icon-paypal-button {
  -webkit-mask-image: var(--svg-paypal-button);
  mask-image: var(--svg-paypal-button);
  width: 2.6rem;
  height: 2.6rem;  
}

span.icon-stripe-button {
  -webkit-mask-image: var(--svg-stripe-button);
  mask-image: var(--svg-stripe-button);
  width: 2.4rem;
  height: 2.4rem;  
}

/* TOP icons*/

span.icon-customer-center {
  -webkit-mask-image: var(--svg-customer-center);
  mask-image: var(--svg-customer-center);
}

span.icon-search {
  -webkit-mask-image: var(--svg-search);
  mask-image: var(--svg-search);
}


/* BUTTONS */

span.icon-logout {
  -webkit-mask-image: var(--svg-logout);
  mask-image: var(--svg-logout);
  width: 1.9rem;
  height: 1.9rem;
}

span.icon-login {
  -webkit-mask-image: var(--svg-login);
  mask-image: var(--svg-login);
}

span.icon-dl-button {
  -webkit-mask-image: var(--svg-dl-button);
  mask-image: var(--svg-dl-button);
  width: 1.8rem;
  height: 1.8rem;	
}

a.button span.icon-dl-button {
    position: relative;
    top: 0px;	
}




/* MISC */

span.icon-gotop {
  -webkit-mask-image: var(--svg-gotop);
  mask-image: var(--svg-gotop);
}

span.icon-info {
  -webkit-mask-image: var(--svg-kreis-info);
  mask-image: var(--svg-kreis-info);
}






/* Adminbereich */
span.icon-trashcan {
  -webkit-mask-image: var(--svg-trashcan);
  mask-image: var(--svg-trashcan);
}




/* ************************************************ */
/* SPAN ICON PARAMETER                              */
/* ************************************************ */

span.hoveron:hover {
	opacity: 0.5;
	cursor: pointer;
}

span.marginright2 {
	margin-right: 0.7rem;
}

span.icontopfix1 {
    position: relative;
    top: -1px; 
}

span.icontopfix2 {
    position: relative;
    top: -2px; 
}

span.icontopfix3 {
    position: relative;
    top: 1px;
}

span.valignmiddle {
    vertical-align: middle;
}

span.helpcur {
	cursor: help;
}

span.pointercur {
	cursor: pointer;
}




/* ######################## */
/* FILE: init_web.css       */
/* ######################## */

@charset "UTF-8";
/* ü€Úτƒ-8 */


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

select::-ms-expand {
    display: none;
}


/* ************************************************ */
/* LINKS                                            */
/* ************************************************ */

a.ext {
    background-image: var(--svg-ext-gray);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 1.6rem;
    display: inline-block;
}

a:hover.ext {
    background-image: var(--svg-ext-black);
}

a.gotop {
	font-size:1.2rem;
}

a.gotop span {
    position: relative;
    top: -1px;
    margin-right:0.5rem;
}


/* ************************************************ */
/* TEXT BOXES, SELECT BOXES, RADIO BUTTON           */
/* ************************************************ */

input[type="radio"] + label,
input[type="checkbox"] + label {
	cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"] {
    margin: 0;
    padding: 0.5rem 0.6rem 0.5rem 0.6rem;
    border: 1px solid #a9a9a9;
    border-radius: 3px;
}

/* 1. Wenn das Feld maskiert ist (Passwort-Modus) */
input[type="password"] {
    font-family: "Verdana", sans-serif !important;
    letter-spacing: 0.15em !important;
    font-size: 0.9rem !important;
}

/* 2. Wenn das Feld auf TEXT umgeschaltet wurde (Auge aktiv) */
/* Wir nutzen den Attribut-Selektor [type="text"], um die Priorität hoch zu halten */
.is-visible input[type="text"] {
    font-family: inherit !important;
    letter-spacing: inherit !important;
    font-size: inherit !important;
}

select {
    margin: 0;
    padding: 0.5rem 0.6rem 0.5rem 0.6rem;
    border: 1px solid #a9a9a9;
    border-radius: 3px;
    background-color: white;
}



/* ************************************************ */
/* CARDS           */
/* ************************************************ */

.cards-container {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 2.5rem;
    margin-top: 3rem;
    margin-bottom: 8rem;
}


.cards-section-title {
    display: flex;
    align-items: center;
    text-align: center;
    margin-bottom: 3rem;
}

.cards-section-title::before,
.cards-section-title::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e0e0e0; 
}

.cards-section-title h2 {
	font-size: 2.6rem;
    padding: 0 2rem; /* Abstand zwischen Text und Linien */
    margin: 0;
    white-space: nowrap;
}



.cards-container div.card,
.cards-container a.card {
    display: block;
    text-decoration: none !important;
    color: #333 !important;
    padding: 3rem;
    border: 1px solid #bbb;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-align: center;
    align-items: center;
}

.cards-container a.card:hover span {
    opacity: 1 !important;
}

.cards-container a.card:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    background-color: #f9f9f9;
}

span[class^="icon-cards-"], 
span[class*=" icon-cards-"] {
  width: 4rem;
  height: 4rem;	
}

.cards-container div.card-icon {
    margin-bottom: 1rem;
}

.cards-container div.card-title {
	display: block;
    margin: 0 0 10px 0;
    font-size: 1.7rem;
    font-weight: bold;
    color: #000;
}

.cards-container div.card-slogan {
	display: block;
    font-size: 1.4rem;
    line-height: 2rem;
    color: #666;
    margin: 0;
}

@media (max-width: 480px) {
	
	  .cards-container {
      /* Auf dem Handy wieder zurück auf 1 Spalte */
      grid-template-columns: 1fr;
      gap: 1rem;
  }   

	.cards-section-title h2 {
		font-size: 2rem;
	}
	
	.cards-container div.card-title {
		font-size: 1.6rem;
	}
	.cards-container a.card {
		padding: 2rem;
	}    

	span[class^="icon-cards-"], 
	span[class*=" icon-cards-"] {
	  width: 3rem;
	  height: 3rem;	
	}

}

/* ######################## */
/* FILE: layout.css       */
/* ######################## */

@charset "UTF-8";
/* ü€Úτƒ-8 */

html,
body {
    height: 100%;
}

body {
    background: white;
    text-align: left;
}

#wrapper {
}

#webmaxwidth {
    max-width: 100rem;
    overflow: visible;
    /* for sticky footer */
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;
}

/* SIDEMENU + CONTENT */
#menucon {
    position: relative;
    margin-top: 2.5rem;
}

#sidemenu {
    float: left;
    visibility: visible;
    xwidth: 21rem;
    min-width: 20rem;
    margin-right: 8px;
    margin-top: 3.5rem;
}

#content {
    float: left;
    width: calc(100% - 21rem); 
    margin: 0 auto;
    margin-bottom: 10rem;
    line-height: 2.8rem;
}


#wrapper:after,
#webmaxwidth:after,
#header:after,
#menubar:after,
#menucon:after,
#sidemenu:after,
#content:after,
#footer:after {
    content: '';
    display: block;
    clear: both;
}

/* ######################## */
/* FILE: top.css       */
/* ######################## */

/* ü€Úτƒ-8 */
@charset "UTF-8";

/* ================ */
/* TOP HEADER       */
/* ================ */
#header {
    display: flex; /* Aktiviert den Flex-Container */
    flex-wrap: wrap;
    align-items: center; /* Zentriert alle Elemente VERTICAL in der Reihe */
    padding-top: 1rem;
    max-width: 100rem;
    margin: 0 auto;
}

#sidemenu_open_button { order: 1; }
#toplogo                { order: 2; }
#menubar                { order: 3; flex: 1; text-align: center; } /* Nimmt den Platz in der Mitte ein */
#header_buttons         { order: 4; display: flex; gap: 1rem; }
#header_langselect      { order: 5; }

#toplogo,
#menubar {
	
}

#toplogo {
	padding:0;
	margin:0;
 	display: inline-flex;
  transform: translateY(3px);
}
#toplogo a span {
}

#header_langselect {
	height: 2.2rem;
	padding-right:5px;
}

select.langselector {
	font-size:1.1rem;
	margin:0;
}




/* BUTTONS: search,download,account,language   */

#header_buttons {
	padding-right: 25px;
}

#header_buttons a.topicon {
	height: 2rem;
}

#header_langselect a.buttonlang  {
		display: inline-block;
		width: 2.4rem;
		color: #000;
		background-color: white;
		border: 1px solid #000;
    border-radius: 4px;
		font-size: 1rem;
    text-decoration: none;
		text-transform: uppercase;
    text-align: center;
		padding: 0.3rem 0.3rem 0.3rem 0.3rem;
		margin:0;
}

#header_langselect a.buttonlang:visited,
#header_langselect a.buttonlang:link,
#header_langselect a.buttonlang:active,
#header_langselect a.buttonlang:focus {
    text-decoration: none;
    color: #000;
    background-color: white;
}

#header_langselect a.buttonlang:hover {
	text-decoration: none;
	color: white;
	background-color: #016ca3;
	border-color: #016ca3;	
}

#header_langselect a.activated,
#header_langselect a.activated:visited,
#header_langselect a.activated:link,
#header_langselect a.activated:active,
#header_langselect a.activated:focus {
	color: white;
	background-color: #017EBE;
	border-color: #017EBE;
	cursor: default;
}

#header_langselect a.disab,
#header_langselect a.disab:visited,
#header_langselect a.disab:link,
#header_langselect a.disab:active,
#header_langselect a.disab:focus {
	color: #bbb;
	background-color: white;
	border-color:  #bbb;
	cursor: default;
}



/* ================ */
/* TOP MENUBAR      */
/* ================ */

#menubar {
    z-index: 100;
    order: 3;
    flex: 1;              /* Nimmt den gesamten verfügbaren Platz in der Mitte ein */
    display: flex;        /* Macht den Menubar selbst zum Flex-Container */
    justify-content: center; /* Zentriert die UL horizontal */
    xborder: 1px solid black;
}

#menubar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;          /* Alle LIs nebeneinander */
    align-items: stretch;   /* Alle LIs werden automatisch gleich hoch */
    gap: 1.5rem;
    xborder: 1px solid black;
}

#menubar > ul > li {
    position: relative;
    display: block;          /* Auch das LI wird zum Flex-Container */
    margin: 0;
    padding: 0;
    xborder: 1px solid green;
}

#menubar ul, #menubar li {
    list-style: none !important;
    padding-left: 0 !important; /* Entfernt den 15-40px Standard-Einzug */
    margin-left: 0 !important;
}

#menubar a {
    display: flex;          /* Macht den Link selbst flexibel */
    align-items: center;    /* Zentriert Text oder Icon vertikal im Link */
    height: 3rem;           /* Definierte Höhe für alle */
    padding: 0;
    margin: 0;
    text-decoration: none;
    color: black;
    white-space: nowrap;
    xborder: 1px solid blue;
}

#menubar > ul > li > a span {
	display: inline-block;
  xfont-family: Lexend;
  xfont-weight: 300;
  xfont-size: 1.8rem;
 	
 	xletter-spacing: 1px;
	xtext-transform: uppercase;
}

/* Spezielle Anpassung für das Home-Icon */
#menubar a.icon-home {
    width: 1.4rem;            /* Feste Breite für das quadratische Icon */
    padding: 0;             /* Kein Text-Padding beim Icon */
    justify-content: center;/* Icon exakt in die Mitte setzen */
    background-image: var(--svg-home);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 1.4rem;
    xborder: 1px solid blue;
}

#menubar ul ul {
    z-index: 999;
}

#menubar ul ul a span {
    margin-top: 0;
  xfont-family: DINPro;
  xfont-size: 1.8rem;
  xletter-spacing: 1px;
}

#menubar > ul > li.active a,
#menubar > ul > li:hover > a {
    color: black;
}


/* sub menu */

#menubar .has-sub ul {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    min-width: 100%; /* Das Submenü ist mindestens so breit wie der Hauptpunkt */
    z-index: 999;
  
    /* Transition-Logik statt display:none */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;

    /* Wichtig: Kein display: none mehr! */
    display: block;
}

/* 2. Nur bei Geräten mit einer Maus (hover-fähig) das Menü bei Hover einblenden */
@media (pointer: fine) {
    #menubar .has-sub:hover > ul {
        opacity: 1;
        visibility: visible;
        display: block;
    }
}

/* 3. Für Touch-Geräte oder wenn das Menü explizit als 'open' markiert ist */
#menubar .has-sub.is-open > ul {
    opacity: 1;
    visibility: visible;
    display: block;
}


#menubar .has-sub ul li {
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    background: white;
    padding:0;
    margin:0;
    xborder: 1px solid blue;
}

#menubar .has-sub ul li:first-child {
    border-top: 1px solid #e1e1e1;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    xborder: 1px solid blue;
}

#menubar .has-sub ul li:last-child {
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

#menubar .has-sub ul li a {
		line-height: 3rem;
    padding:0;
    margin:0;
    padding-left: 1rem;
    padding-right: 1rem;
    background: white;
    color: black;
    xborder: 1px solid green;
}
#menubar .has-sub ul li:first-child a {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

#menubar .has-sub ul li:last-child a {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

#menubar .has-sub ul li:hover a {
    color: #6f6f6f;
}

#menubar .has-sub ul li:last-child:hover a {

}

#menubar .has-sub ul li:first-child:hover a {

}


/* ================ */
/* TOP IMAGE        */
/* ================ */

#header-image-container {
	position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 1rem auto 0 auto;
  
  max-height: 25rem;
	aspect-ratio: 4 / 1;   /* Hält das 1000x250 Verhältnis immer bei */

  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
    
  overflow: hidden;
  border-radius: 6px; 
  border-bottom-left-radius: 6px; 
  border-bottom-right-radius: 6px; 
  box-shadow: 0 0 3px #dcdcdc;  
  transition: max-height 0.4s ease-in-out;
}

#header-image-container.is-hidden {
  max-height: 3rem;
}

#header-image-toggle {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    display: block;
    text-decoration: none;
		width: 1.6rem;
    height: 1.6rem;
    background-image: var(--svg-header-minus);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.4rem;
    transition: transform 0.1s ease;
}

/* Hover-Effekt (optional): Das Icon wird beim Drüberfahren etwas größer */
#header-image-toggle:hover {
    transform: scale(0.9);
}

/* Wenn der Container versteckt ist, ändere das Icon des Buttons */
#header-image-container.is-hidden #header-image-toggle {
	background-image: var(--svg-header-plus);
}

#header-image-toggle:visited,
#header-image-toggle:link,
#header-image-toggle:hover,
#header-image-toggle:active,
#header-image-toggle:focus {
    text-decoration: none;
}

/* ######################## */
/* FILE: sidemenu.css       */
/* ######################## */

@charset "UTF-8";
/* ü€Úτƒ-8 */

#sidemenu {
    float: left;
    position: relative;
    width: 20%;
    visibility: visible;
}

#sidemenu ul {
    margin: 0;
    padding: 0;
}

#sidemenu ul li {
    list-style-type: none;
    margin: 0;
    margin-bottom: 0.7rem;
    padding: 0;
}

#sidemenu ul li:first-child {
    color: #4f4f4f;
    font-size: 1.44rem;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 0.8rem;
}

#sidemenu ul li:last-child {
    margin-bottom: 2.5rem;
}

#sidemenu a {
    color: black;
    font-size: 1.2rem;
    text-decoration: none;
    padding-left: 0.1rem;
}

#sidemenu a:hover {
    color: #777;
    xtext-decoration: underline;
}

/* ************************************************ */
/* BURGER MENU TO OPEN THE SIDEMENU                 */
/* ************************************************ */

#sidemenu_open_button {		
    padding: 0;
    margin: 0;
    margin-right: 1.6rem;
    padding-right: 1.6rem;
    font-size: 2rem;
    cursor: pointer;
    visibility: hidden;
    display:none;
}

/* ************************************************ */
/* SIDEMENU CLOSE BUTTON                                  */
/* ************************************************ */

#sidemenu_closebtn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.4rem;  /* 24px */
    height: 2.4rem; /* 24px */
    display: none;  /* Auf Desktop ausblenden */
    
    /* Das SVG Icon: Ein klares 'X' in Schwarz/Dunkelgrau */
    background-image: var(--svg-kreis-X);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}

#sidemenu_closebtn:hover {
	opacity: 0.6; /* Einfacher Hover-Effekt für SVGs */
}

/* ************************************************ */
/* SIDEMENU OVERLAY                                 */
/* ************************************************ */

#sidemenu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Schwarz mit 50% Transparenz */
    z-index: 1000; /* Genau unter dem Sidemenu (1001), aber über dem Rest */
    /* Sanfter Übergang */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;       
}

/* Nur wenn die Klasse am Body ist, zeigen wir das Overlay */
body.menu-open #sidemenu-overlay {
    opacity: 1;
    pointer-events: auto; /* Jetzt reagiert es auf Klicks zum Schließen */    
}



/* ######################## */
/* FILE: content.css       */
/* ######################## */

@charset "UTF-8";
/* ü€Úτƒ-8 */

span.hb {
    display: block;
    height: 0.8em;
}

span.smaller,
td.smaller {
    font-size: smaller !important;
}

img.auto-width {
    max-width: 100%;
    height: auto;
}

img.padR20 {
    padding-right: 2rem;
}

img.padB20 {
    padding-bottom: 2rem;
}

textarea.speedtest {
    width: 100%;
}

ul.PadBot > li:not(:last-child) {
    padding-bottom: 1.6rem;
}

ol.PadBot > li:not(:last-child) {
    padding-bottom: 1.6rem;
}

ul.PadBot2 > li:not(:last-child) {
    padding-bottom: 3.2rem;
}

ol.PadBot2 > li:not(:last-child) {
    padding-bottom: 3.2rem;
}

ul.PadBot3 > li:not(:last-child) {
    padding-bottom: 4.8rem;
}

ol.PadBot3 > li:not(:last-child) {
    padding-bottom: 4.8rem;
}


/* ************************************************ */
/* LINKS <a>                                        */
/* ************************************************ */
a.hl::before {
    content: "„";
    pointer-events: none;
    text-decoration: none;
}

a.hl::after {
    content: "“";
    pointer-events: none;
    text-decoration: none;
}

#content a {
    font-weight: normal;
    text-decoration: underline;
    color: Purple;
}

#content a:visited {
    color: Purple;
}

#content a:hover {
    color: #e55e00;
}

#content ul.nobold > li > a {
    font-weight: normal;
}

#content ol.nobold > li > a {
    font-weight: normal;
}

#content table.nobold a {
    font-weight: normal;
}



/* ************************************************ */
/* TABLE ohne Border                       */
/* ************************************************ */
table.noborder,
table.noborder tbody tr td {
    border: 0;
    padding: 0;
    background-color: white;
}

table.noborder2,
table.noborder2 tbody tr td {
    border: 0;
    padding-left: 0;
    background-color: white;
}

table.noborder3,
table.noborder3 tbody tr td {
    border: 0;
    padding-left: 0.2rem;
    background-color: white;
}

table.noborder4,
table.noborder4 tbody tr td {
    border: 0;
    padding-left: 0;
    background-color: white;
    vertical-align: middle;
}


table.noborder tbody tr td:first-child,
table.noborder2 tbody tr td:first-child,
table.noborder4 tbody tr td:first-child {
    width: 0.1rem;
    white-space: nowrap;
    padding-right: 1rem;
}

table.noborder img {
    margin-top: 0.4rem;
}

/* ************************************************ */
/* SPAN                                             */
/* ************************************************ */

span.title {
    display: block; /* Umbruch */
    font-size: 1.7rem;
    font-weight: bold;
}

span.hl {
    color: Crimson;
    font-weight: bold;
    font-size: 1.6rem;
}

span.hl::before {
    content: "\201E"; /* „ */
}

span.hl::after {
    content: "\201C"; /* “ */
}

span.hl2 {
    font-weight: bold;
}

span.hl2::before {
    content: "'";
}

span.hl2::after {
    content: "'";
}


/* ************************************************ */
/* CODE                                             */
/* ************************************************ */
code {
    background-color: #E9EEF6;
    border-radius: 6px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    color: black;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
}

span.c {
    font-family: Consolas, "Courier New", Courier, monospace;
    background-color: #E9EEF6;
    border-radius: 6px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    color: black;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ************************************************ */
/* error message table                         */
/* ************************************************ */
#errormessages th {
    font-size: 1.2rem;
}

#errormessages table td:first-child {
    width: 0.1rem;
    white-space: nowrap;
    padding-right: 1rem;
}













/* ************************************************ */
/* hilfe produkteditionen                           */
/* ************************************************ */









/* ************************************************ */
/* AllDup pic Erkennungsrate                        */
/* ************************************************ */
table.RecognitionRate th {
    text-align: center;
    text-transform: none;
}

table.RecognitionRate td {
    text-align: right;
}

table.RecognitionRate th:first-child,
table.RecognitionRate td:first-child {
    text-align: left;
}

table.RecognitionRate tr td:nth-child(even) {
    background: #f8f8f8;
}

/* ************************************************ */
/* AllDup pic checksum speed                        */
/* ************************************************ */
table.cspeed tr td:nth-child(2) {
    text-align: center;
}

table.cspeed tr td:nth-child(3) {
    text-align: right;
}

table.cspeed tr td:nth-child(4) {
    text-align: right;
}

/* ************************************************ */
/* similar Filename examples                        */
/* ************************************************ */
table.similarfilename {
    width: 60%;
}

table.similarfilename th,
table.similarfilename td {
    text-align: right;
}

table.similarfilename th:first-child,
table.similarfilename td:first-child {
    text-align: left;
}

td.reporticon,
img.reporticon {
    vertical-align: middle;
}

img.reporticon {
    margin-right: 0.6rem;
}

table span.reporticon {
    vertical-align: middle;
}

ul span.reporticon {
    vertical-align: middle;
    font-weight: bold;
}



/* ************************************************ */
/* UL MULTI COLUMNS                                 */
/* ************************************************ */
ul.multicolumn2,
ol.multicolumn2 {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

ul.multicolumn3,
ol.multicolumn3 { 	
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
   
}

ul.multicolumn4,
ol.multicolumn4 {
    columns: 4;
    -webkit-columns: 4;
    -moz-columns: 4;
}

/* ######################## */
/* FILE: footer.css       */
/* ######################## */

@charset "UTF-8";
/* ü€Úτƒ-8 */

:root {
	--col-footer-bg: #1A6891;	
	--col-footer-font-color: white; 
	--col-footer-button-hover-bg: #017EBE;
}

#footer:before {
    content: '';
    display: block;
    clear: both;
}

#footer {
	width: 100%;
  xborder-top: 1px solid #ddd;
	background-color: var(--col-footer-bg);
	padding: 2rem 2rem 2.4rem 2.4rem;
  display: flex;
  justify-content: center;
  color: var(--col-footer-font-color);
}

#footer span.mtsd-logo {
	background-color: var(--col-footer-font-color);
}

#footer a,
#footer h5 {
	color: var(--col-footer-font-color);
}

#footer-langselect {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#footer-langselect span {
	font-size: 1.9rem;	
}

#footer-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8rem;
}

div.footer-column {
	font-size: 1.2rem;
  text-align: left;
  flex: none;
  padding-top: 1rem;
}

div.footer-column a {
	font-size: 1.2rem;
}

div.footer-button {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 3rem;
	width: 10rem;
	border: 1px solid var(--col-footer-font-color);
	margin-bottom: 1.2rem;
	text-align: center;
	vertical-align: middle;
}

div.footer-button a {
	width: 100%;
	height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
	white-space: nowrap;
	text-decoration: none;
	vertical-align: middle;
}

div.footer-button a span {
  padding-right:0.5rem;
 	display: inline-flex;
  transform: translateY(-1px);
}

div.footer-button a:hover {
	background-color: var(--col-footer-button-hover-bg);
}

div.footer-copyright {
	margin-top: 3rem;
	text-align: center;
}

div.footer-copyright,
div.footer-copyright p,
div.footer-copyright a {
	font-size: 1.2rem;
}

div.footer-copyright p {
	padding-bottom: 0.3rem;
}
div.footer-copyright a:link,
div.footer-copyright a:visited,
div.footer-copyright a:active,
#footer-menu a:link,
#footer-menu a:visited,
#footer-menu a:active {
	color: var(--col-footer-font-color);
}


@media (max-width: 480px) {
		
		#footer-menu {	
        flex-direction: column; /* Spalten untereinander */
        gap: 3rem; /* Etwas weniger Abstand zwischen den Blöcken */
        align-items: center; /* Alles zentrieren für Handy-Look */
        text-align: center;
		}

		.footer-column:not(:first-child) {
		    padding-top: 0;
		}
		
		#footer-langselect {
			justify-content: center;
		}
		
    div.footer-column,
    div.footer-column h5 {
        text-align: center; /* Text in den Spalten zentrieren */
    }

    #footer-menu ul li {
        list-style: none;
        margin: 0;
    }

		div.footer-copyright {
			line-height: 2rem;			
		}

}

/* ######################## */
/* FILE: web.css       */
/* ######################## */

@charset "UTF-8";
/* ü€Úτƒ-8 */

:root {
		--svg-thumb-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
		--svg-warndreieck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
		--svg-kreis-ausrufezeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
		--svg-kreis-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}




/* ************************************************ */
/* PW login text box									 */
/* ************************************************ */

div.password-wrapper {
    position: relative;
    width: 80%;
    display: inline-flex;
    vertical-align: middle;
    line-height: 0;
}


#customer_loginname {
	width: 40%;
}
div.shoppw {
	width: 40%;
}

div.w50,
input.w50 {
	width: 50%;
}

div.password-wrapper input {
    margin: 0 !important;
    width: 100%;
    padding-right: 3rem; 
    box-sizing: border-box;
    height: 3rem;
    display: block;
}


.toggle-password {
    position: absolute;
    right: 0.7rem;
    top: 44%;
    transform: translateY(-50%); 
    
    background: transparent !important; 
    border: none;
    cursor: pointer;
    padding: 0rem;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    -webkit-tap-highlight-color: transparent; 
}

.toggle-password:hover .eye-icon {
    filter: brightness(70%);
}

.eye-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: var(--svg-eye);
}

.is-visible .eye-icon {
    background-image: var(--svg-eye-hide);
}




/* ************************************************ */
/* INFO BOXEN								 */
/* ************************************************ */


/* Gemeinsame Basis für die Infoboxen */
div.box-info,
div.box-ok,
div.box-error,
div.box-warning {
    background-color: #FDFDEF;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 1.4rem 1rem 1.2rem 4.5rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
    background-repeat: no-repeat;
    background-position: 1rem 1.3rem;
    background-size: 2.4rem 2.4rem; /* Festgelegt auf 24x24px bei 10px Basis */
    line-height: 1.6em;
    min-height: 2.0em;
    vertical-align: middle;
}
 
/* OK - Daumen nach oben */
div.box-ok {
    background-image: var(--svg-thumb-up);
}

/* ERROR / ALERT - Warndreieck mit runden Ecken */
div.box-error {
    background-image: var(--svg-warndreieck);
}

/* WARNING - Kreis mit Ausrufezeichen */
div.box-warning {
    background-image: var(--svg-kreis-ausrufezeichen);
}

/* INFO - Kreis mit 'i' */
div.box-info {
    background-image: var(--svg-kreis-info);
}

div.boxbasic {
    background: #f9f9f9;
    border: 1px solid #cdcdcd;
    padding: 1rem;
    padding-left: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
}

div.boxbasic,
div.boxbasic li,
div.boxbasic a {
    font-size: 1.4rem;
}












/* ************************************************ */
/* PROMO SEITEN 						 													*/
/* ************************************************ */
#downloadlink {
    text-align: center;
    padding-top: 3rem;
}

#downloadlink a {
    font-size: 1.6rem;
    ttext-transform: uppercase;
}











/* ************************************************ */
/* Seitenauswahl */
/* ************************************************ */

#pagination {
		list-style-type: none;
    text-align: center;
    list-style-position: inside;
}

#pagination.left {
    text-align: left;
}

#pagination li {
	display: inline-block;
	margin-left:0;
	margin-right: 1rem;
	margin-bottom:1rem;
}

#pagination a {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    width: 2em;
    height: 2em;
    color: #991A8B !important;
    text-decoration: none !important;
    border: 1px solid #2589d0;
    border-radius: 3px;    
}

#pagination a:hover {
	border-color: navy;
	color: navy !important;
}

#pagination li.current a {
		color: white !important;
		background-color: #2589d0;
		border-color: #2589d0;
    pointer-events: none;
}

#pagination a.notavail {
    pointer-events: none;
    border-color: #dddddd;
    color: #dddddd !important;
}

/* ######################## */
/* FILE: media.css       */
/* ######################## */

@charset "UTF-8";
/* ü€Úτƒ-8 */

/* --- (unter 1000px) --- */
@media (max-width: 1020px) {
	#sidemenu {
		padding-left:3px;
	}
}

/* --- TABLET-MODUS (unter 800px) --- */
@media (max-width: 800px) {
    
    #header {
      justify-content: flex-start;
    }

    /* 1. Der Hamburger-Button bleibt ganz links */
    #sidemenu_open_button {
        order: 1;
        margin-right: 1.5rem; /* Kleiner Abstand zum Logo */
    }

    /* 2. Das Logo kommt danach */
    #toplogo {
        order: 2;
        margin-right: auto; /* DER TRICK: Schiebt alles nachfolgende nach ganz rechts! */
    }

    /* 3. & 4. Die rechten Elemente */
    #header_buttons {
        order: 3;
        margin-right: 1rem; /* Abstand zwischen Buttons und Langselect */
    }

    #header_langselect {
        order: 4;
    }
    
    /* Das Menü soll in die zweite Zeile */
    #menubar {
        order: 10;
        flex: 0 0 100%;     /* 1. Wert: grow (0), 2. Wert: shrink (0), 3. Wert: basis (100%) */
        width: 100%;        /* Doppelt hält besser */
        margin-top: 1.5rem;
        display: flex;
        justify-content: center;
    }


    #sidemenu_open_button {
        visibility: visible;
        display:inline;
    }

    #sidemenu_closebtn {
        display: block;
        position: absolute;
        top: 1rem;
        /* Erhöhe den Abstand von 1rem auf 1.5rem oder 2rem */
        right: 1rem; 
        width: 1.6rem;
        height: 1.6rem;
        z-index: 1002;
        /* Das SVG Icon braucht eventuell ein wenig Platz im Container */
        background-size: 1.6rem; 
        background-repeat: no-repeat;
        background-position: center;
    }
        
    #sidemenu {
        position: fixed;
        top: 0;
        right: -100%; /* Startet außerhalb rechts */
        width: 15rem;
        height: 100%;
        z-index: 1001;
        background-color:white;
				transition: right 0.3s ease-in-out; /* Nur mobil animieren */
        padding: 0;
        padding-left: 0.8rem;
        margin-top: 0;
        padding-top: 3rem;
        /* WICHTIG für Firefox: Verhindert, dass Padding die Breite vergrößert */
        box-sizing: border-box; 
        /* Verhindert horizontales Scrollen auf dem Body durch das Menü */
        overflow-x: hidden;         
    }

    /* Wenn das Menü mobil geöffnet wird */
    body.menu-open #sidemenu {
        right: 0 !important; /* Schiebt es in den sichtbaren Bereich */
    }

    #content {
        width: 100%;
        padding: 0 3px 0 5px;
    }
            	
}



/* --- SMARTPHONE-MODUS (unter 480px) --- */
@media (max-width: 480px) {

		body::after {
		    content: "";
		    display: block;
		    height: 0;
		}

    #menubar ul {
        flex-wrap: wrap;          /* Erlaubt 2 Zeilen */
        justify-content: center;   /* Zentriert die Punkte */
        position: relative;        /* WICHTIG: Bezugspunkt für Submenüs */
    }

    #menubar > ul > li {
        position: static; 
    }
		#menubar > ul > li > a {
			height: 1.5rem;
		}    

    #menubar .has-sub ul {
        position: absolute;
        top: auto;
        left: 0;
        right: 0;
        margin-top:5px;
        width: 100%;
        min-width: 100%;
        z-index: 1000;
    }

    /* 3. Korrektur der Sub-Links */
    #menubar .has-sub ul li {
        border-bottom: 1px solid #eee;
    }

    #menubar .has-sub ul li a {
        justify-content: center;
    }




    H1 {
        font-size: 2.2rem;
    }
    h2 {
        font-size: 2rem;
    }
    h3 {
        font-size: 1.8rem;
    }
		


	.table-container {
	    width: 100%;
	    overflow-x: auto;
	    -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;   
	}

  	
  ul.multicolumn2, ol.multicolumn2,
  ul.multicolumn3, ol.multicolumn3,
  ul.multicolumn4, ol.multicolumn4 {
      columns: 1;
      -webkit-columns: 1;
      -moz-columns: 1;
  }

	ul li {
	    word-break: normal;
	    overflow-wrap: anywhere;
	}


}

/* ######################## */
/* FILE: print.css       */
/* ######################## */

@charset "UTF-8";
/* ü€Úτƒ-8 */

@media print {

  * {
      /* Dies zwingt den Browser, Farben und Bilder zu drucken */
      -webkit-print-color-adjust: exact !important; /* Für Chrome, Edge, Safari */
      print-color-adjust: exact !important;         /* Standard & Firefox */
  }
  
	#header, #menubar, #header-image-container, #sidemenu, #footer {
	  display: none;
	 	visibility:hidden;
	 	width:0;
	 	height:0;
	}

	#webmaxwidth {
    max-width: 100%;	
	}
	
	#content {
		width: 100%;
		margin: 0;
		padding: 0;
	}
}

/* ######################## */
/* FILE: prices.css       */
/* ######################## */

@charset "UTF-8";
/* ü€Úτƒ-8 */

table.preise {
	width: 100%;
}

table.preise th,
table.preise td {
    text-align: center;
    width: 25%;
}

table.preise2 {
   width: auto;           /* Tabelle ist nur so breit wie ihr Inhalt */
   max-width: 100%;      /* Verhindert das Ausbrechen aus dem Content */
}

table.preise2 th,
table.preise2 td {
    text-align: center;
    xwidth: 25%;
}