/* ====================================================================== */
/*   © 2026 Michael Kappenberg Herten - www.probytes.de                   */
/* ====================================================================== */


/* === ONLINE-SCHRIFTEN ================================================= */
/* quicksand-regular - latin */
@font-face {
font-display: swap;
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
src: url('../fonts/quicksand-v37-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* monoton-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Monoton';
font-style: normal;
font-weight: 400;
src: url('../fonts/monoton-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* == Website formatieren =============================================== */
html, body, td, th {
font-family: Quicksand, "Trebuched MS", Arial, Tahoma, Verdana, Helvetica, sans-serif; 
font-size: 14.5px; color: #000000; font-weight: normal; text-decoration: none;
}
body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
border-top: 5px solid #ff0000;
margin-bottom: 50px;
background-color: #000000;
overflow-y: scroll;
}

/* == Header  =========================================================== */
#header {
width: 100%;
height: 146px;
background-color: #5b6a87;
background-image: url(../gfx/bgheader.jpg);
background-repeat: repeat-x;
position: fixed;
top: 0px;
left: 0;
width: 100%;
z-index: 1000;
}

/* == Umfassender Container ============================================= */
#wrapper {
width: 918px;
min-height: 542px; 
border-radius: 15px;
padding-top: 10px;
margin: 0 auto;
background-color: #ffffff;
margin-top: 158px;
margin-bottom: 35px;
}

/* === IMAGE-Schatten =================================================== */
img {
filter: drop-shadow(0px 10px 8px rgba(0, 0, 0, 0.5));
}

/* === IMAGE-Mouseover ================================================== */
div.imghover {
width: 85px;
height: 85px;
overflow: hidden;
-webkit-filter: sepia(0);
filter: sepia(0);
}
div.imghover img {
width: 100%;
height: auto;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
div.imghover img:hover {
-webkit-transform: scale(1.14);
-moz-transform: scale(1.14);
-ms-transform: scale(1.14);
-o-transform: scale(1.14);
transform: scale(1.14);
background: #1abc9c;
filter: hue-rotate(77deg);
-webkit-filter: hue-rotate(77deg);
-moz-filter: hue-rotate(77deg);
}

/* === Zeichensätze ===================================================== */
.headline {font-family: Monoton,   "Trebuched MS", Arial, Verdana, Tahoma, sans-serif; font-size: 28px; letter-spacing: 3px; color: #ffffff; font-weight: normal;}
.smalfont {font-family: Quicksand, "Trebuched MS", Arial, Verdana, Tahoma, sans-serif; font-size: 14px; color: #333333; font-weight: normal; text-decoration: none;}
.sitefont {font-family: Quicksand, "Trebuched MS", Arial, Verdana, Tahoma, sans-serif; font-size: 14.5px; color: #444444; font-weight: normal; text-decoration: none;}
.font01   {font-family: Quicksand, "Trebuched MS", Arial, Verdana, Tahoma, sans-serif; font-size: 15px; color: #eeeeee; font-weight: normal; text-decoration: none; letter-spacing: 1px;}
.font03   {font-family: Quicksand, "Trebuched MS", Arial, Verdana, Tahoma, sans-serif; font-size: 18px; color: #1184ff; font-weight: bold; text-decoration: none; letter-spacing: 2px;}
.fehler   {font-family: Quicksand, 'Trebuched MS', Arial, Verdana, Tahoma, sans-serif; font-size: 14.5px; color: #ff0000; font-weight: bold; text-decoration: none;}
.red      {font-size: 16px; color: #FF0000; font-weight: bold;}

/* === Main-Navigation Header im Header =================================================== */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
text-transform: uppercase; 
letter-spacing: 1px;
}
ul li {
float: left;
border-right:1px solid #bbbbbb;
}
ul li:last-child {
border-right: none;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 12px 20px;
text-decoration: none;
}
ul li a:hover:not(.active) {
background-color: #7a85a3;
}
.aktiverlink {
display: block;
color: white;
text-align: center;
padding: 12px 20px;
text-decoration: none;
background-color: #39a5f5;
}

/* === Main-Navigation Header ============================================================= */
a.kolink, a:visited.kolink, a:active.kolink {
font-family: Quicksand, "Trebuched MS", Arial, Verdana, Tahoma, Helvetica, sans-serif; 
font-size: 14.5px; color: #0000ff; font-weight: normal; text-decoration: underline;
}
a:hover.kolink {
font-family: Quicksand, "Trebuched MS", Arial, Verdana, Tahoma, Helvetica, sans-serif; 
text-decoration: underline;
font-size: 14.5px;
color:#ff0000;
font-weight: normal;
}
a.kolink02, a:visited.kolink02, a:active.kolink02 {
font-family: Quicksand, "Trebuched MS", Arial, Verdana, Tahoma, Helvetica, sans-serif; 
font-size: 12.5px; color: #cccccc; font-weight: bold; text-decoration: none;
}
a:hover.kolink02 {
font-family: Quicksand, "Trebuched MS", Arial, Verdana, Tahoma, Helvetica, sans-serif; 
text-decoration: none;
font-size: 12.5px;
color:#ffffff;
font-weight: bold;
}

/* Absende-Button formatieren ------------------------------------------------------------- */
.sendbutt {
background-color:#0099f7;
border-radius: 5px;
border: 0px solid #ffffff;
cursor:pointer;
color:#ffffff;
font-family: Quicksand, "Trebuched MS", Arial, Verdana, Tahoma, Helvetica, sans-serif;
font-size:14.5px;
padding: 14px 35px;
text-decoration:none;
transition: all 0.15s ease;
}
.sendbutt:hover {
background-color:#0852b1;
border-radius: 5px;
border: 0px solid #ffffff;
color:#ffffff;
font-family: Quicksand, "Trebuched MS", Arial, Verdana, Tahoma, Helvetica, sans-serif;
font-size:14.5px;
padding: 14px 35px;
text-decoration:none;
transition: all 0.15s ease;
}

/* === Input-Felder und Textarea formatieren ============================================== */
input, select, textarea, button {
font-family: Quicksand, 'Trebuchet MS' Arial, Verdana, Tahoma, sans-serif; font-size: 13.5px; color: #353535; padding: 5px;
background-color: #fafafa;
}
input:focus {
outline: none;
border-color: #0000ff;
background-color: #dcf3fb;
box-shadow: 0 0 6px #719ECE;
}
textarea:focus { 
outline: none;
border-color: #0000ff;
background-color: #dcf3fb;
box-shadow: 0 0 6px #719ECE;
}

/* === Schatten für Input-Felder ========================================================== */
.schatten {
font-family: Quicksand, "Trebuchet MS", Arial, Verdana, Tahoma, Helvetica, sans-serif;
font-size: 14.5px; color: #615e60;
padding: 10px;
margin-top: 2px;
margin-bottom: 2px;
text-align: left; WIDTH: 432px;
BORDER: #aaaaaa 1px solid;
border-radius: 4px;
cursor: pointer;
background-image: url(../gfx/shade.gif);
box-shadow: 3px 3px 5px hsla(300,15%,25%,0.3) inset;
}

/* === Anfasser am Textfeld entfernen ===================================================== */
textarea {
font-family: Quicksand, 'Trebuchet MS' Arial, Verdana, Tahoma, sans-serif; font-size: 13.5px; color: #444444; padding: 5px;
resize: none;
}

/* === Mail-Formular formatieren ========================================================== */
.koredstar {color: #FF0000; font-weight: bold;font-size: 18px;}
.kofont01  {color: #333333; font-size: 15px; font-weight: bold;}
.kofont02  {color: #333333; font-size: 14px; font-weight: normal;}
.kofont03  {color: #000000; font-size: 12px; font-weight: normal;}
.kofont04  {color: #333333; font-size: 13.5px; font-weight: normal;}

/* === HR.LINE ============================================================================ */
hr.line {
border: 0; height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}