@font-face {font-family: "Roboto-bold"; src: local("Roboto-bold"), url("fonts/RobotoCondensed-Bold.ttf"); }
@font-face {font-family: "Roboto-light"; src: local("Roboto-light"), url("fonts/RobotoCondensed-ExtraLight.ttf"); }

body {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#000;
background-color:#FFF;
}

h1, h2, h3 {
font-size: inherit; 
font-weight: normal; 
margin: 0; 
padding: 0;
}

a {
text-decoration:none;
}

a:hover {
text-decoration:none;
}

a:link { 
text-decoration:none
}



@media screen and (min-width: 1025px) {  

#switch  { display: block; }
#switch-mobile { display: none; }
#switch-tablet { display: none; }


.standard-font-h1 {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#000;
}

.standard-font-h2 {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#000;
}

.extra-font-h1-blue {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:48px;
color:#104E8B;
}

.extra-font-h1-black {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:48px;
color:#000;
}

.telefon-hinweis {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:10px;
color:#000;
}

navi {
height:100px;
width:100%;
z-index:99990;
background:none;
position: fixed;
top:0;
right:0;
left:0;
transition:transform .25s .1s ease-in-out;
}

.down navi {
z-index:99999;
background:#fff;
}

.header {
height:300px;
width:100%;
background:#000;
top:0;
right:0;
left:0;
margin-top:-14px;
z-index:9999;
}

.header-copy {
height:50px;
width:100%;
background:#696969;
opacity: .9;
top:0;
right:0;
left:0;
vertical-align:center;
text-align:center;
}

.header-copy-font {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#FFF;
}

.header-font-h1 {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:16px;
color:#FFF;
}

.header-font-h2 {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#FFF;
}

.container {
width:100%;
height: auto;
}

.container-inner {
width:88%;
height: auto;
}

.container-inner-menu {
width:60%;
height: auto;
}

.logo {
position:fixed;
padding-left:100px;
padding-top:20px;
width:12%;
height:auto;
z-index: 9990;
}

.menu-home {
position:fixed;
right:253px;
top:44px;
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#000;
z-index:9990;
}

.menu-link {
position:fixed;
right:160px;
top:44px;
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#000;
z-index:9990;
}

.menu-translate-de {
position:fixed;
right:130px;
top:44px;
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#000;
z-index:9990;
}

.menu-translate-en {
position:fixed;
right:100px;
top:44px;
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#000;
z-index:9990;
}

.font-h1 {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:24px;
color:#104E8B;
margin-top:3px;
padding:5px;
}

.font-h2 {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#000;
}

.font-h1-icons {
 font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
 color:#104E8B;
 font-size:42px !important;
}

.icon-container {
display: flex;
align-items: center;
text-align:center;
justify-content: center;
}

table.button-icons {
width:140px;
height:40px;
border: 2px solid #104E8B;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:14px;
color:#104E8B;
background-color:#fff;
}

.container-linebox {
width:100%;
height:200px;
background-color:#F0F0F0;
color:#000;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:18px;
}

.container-linebox-font {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:18px;
}

.navi-button {
width: 150px;
height: 150px;
background-color: #FF5200;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-align:center;
color: white;
cursor: pointer;
text-decoration: none;
border: none;
transition: background-color 0.3s ease;
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:16px;

}

.navi-button:hover {
background-color:#CD6600; 
transition: transform 0.8s ease-in-out;
transform: rotate(360deg);
}

a:link { 
text-decoration:none
background-color: #FF5200;
}

.mailbox-container {
width:88%;
}

.mailbox-image {
width:55%;
}

.mailbox-input {
width:45%;
}

.mailbox-image-object {
width:100%;
height:auto;
z-index:99;
margin-top:60px;
}

#clear {
height:45px;
}


/* SEGMENTS */

#clear-segments {
height:105px;
}

.image-corner {
width: 90%;
height: auto;
clip-path: polygon(0 0, 77% 0, 100% 14%, 100% 100%, 80% 100%, 64% 100%, 0% 80%, 0% 20%);
/* https://bennettfeely.com/clippy/ */
}

.seg-font-h0-black {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:21px;
color:#000;
}

.seg-font-h1-black {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:48px;
color:#000;
}

.seg-font-h1-black-smal {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:38px;
color:#000;
}

.seg-font-h2-black {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#000;
}

.font-h2-black {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#000;
}

.seg-font-h1-orange {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:48px;
color:#FF5200;
}

.seg-font-h2-orange {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:28px;
color:#FF5200;
}

table.started-button {
width:180px;
height:50px;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#FFF;
background-color:#FF5200;
}

.started-symbol {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#FFF;
background-color:#FF5200;
padding-top:-5px;
}

.started-button-info {
width:180px;
height:50px;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#FF5200;
background-color:#FFF;
border: 2px solid #FF5200;
}

.started-symbol-info {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#FF5200;
background-color:#FFF;
padding-top:-5px;
}

.framebox {
width:89%;
background:#FF5200;
color:#fff;
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:16px;
}

}




/* TABLET */

@media screen and (min-width: 481px) and (max-width: 1024px) {  

#switch { display: none; }
#switch-mobile { display: block; }
#switch-tablet { display: block; }

.logo {
position:fixed;
padding-left:50px;
padding-top:20px;
width:20%;
height:auto;
z-index: 9990;
}

navi {
height:80px;
width:100%;
z-index:99990;
background:none;
position: fixed;
top:0;
right:0;
left:0;
transition:transform .25s .1s ease-in-out;
}

.down navi {
 background:#fff;
}

.standard-font-h1 {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#000;
}

.standard-font-h2 {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#000;
}

.extra-font-h1-blue {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:21px;
color:#104E8B;
}

.extra-font-h1-black {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:21px;
color:#000;
}

.telefon-hinweis {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:10px;
color:#000;
}

.header {
position:fixed;
height:40px;
width:100%;
background:#000;
right:0;
left:0;
bottom:20px;
}

.header-copy {
position:fixed;
height:20px;
width:100%;
background:#696969;
opacity: .9;
right:0;
left:0;
bottom:0;
}

.header-copy-font {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:12px;
color:#FFF;
}

.header-font-h1 {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#FFF;
}

.header-font-h2 {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#FFF;
}

.container {
width:100%;
height: auto;
}

.container-inner {
width:92%;
height: auto;
}

.container-inner-menu {
width:100%;
height: auto;
}

.menu-home {
position:fixed;
right:166px;
top:32px;
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#000;
z-index:9990;
}

.menu-link {
position:fixed;
right:80px;
top:32px;
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#000;
z-index:9990;
}

.menu-translate-de {
position:fixed;
right:50px;
top:32px;
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#000;
z-index:9990;
}

.menu-translate-en {
position:fixed;
right:20px;
top:32px;
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#000;
z-index:9990;
}

.font-h1 {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#104E8B;
margin-top:3px;
padding:5px;
}

.font-h2 {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#000;
}

.font-h1-icons {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
color:#104E8B;
font-size:21px !important;
}

.icon-container {
width:100%
height:30px;
background-color:#F0F0F0;
display: flex;
align-items: center;
text-align:center;
justify-content: center;
}

table.button-icons {
width:100px;
height:30px;
border: 2px solid #104E8B;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:12px;
color:#104E8B;
background-color:#fff;
}

#clear {
height:45px;
}

.container-linebox {
width:100%;
height:200px;
background-color:#F0F0F0;
color:#000;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:13px;
}

.container-linebox-font {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:15px;
text-align: justify;
hyphens: auto; /* Silbentrennung aktivieren */
-webkit-hyphens: auto;
}

.navi-button {
width:125px;
height:125px;
background-color: #FF5200;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-align:center;
color: white;
cursor: pointer;
text-decoration: none;
border: none;
transition: background-color 0.3s ease;
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:13px;
}

.navi-button:hover {
background-color:#CD6600; 
transition: transform 0.8s ease-in-out;
transform: rotate(360deg);
}

a:link { 
text-decoration:none
background-color: #FF5200;
}

.mailbox-container {
width:96%;
}

.mailbox-image {
width:25%;
}

.mailbox-image-object {
width:150px;
height:150px;
border-radius: 50%;
border: 1px solid #F0F0F0;
object-fit: cover;
z-index:9998;
}

.mailbox-input {
width:65%;
}

#clear {
height:22px;
}

/* SEGMENTS */

#clear-segments {
height:75px;
}

.image-corner {
width: 100%;
height: auto;
clip-path: polygon(0 0, 77% 0, 100% 14%, 100% 100%, 80% 100%, 64% 100%, 0% 80%, 0% 20%);
/* https://bennettfeely.com/clippy/ */
}

.seg-font-h0-black {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:16px;
color:#000;
}

.seg-font-h1-black {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:24px;
color:#000;
}

.seg-font-h1-black-smal {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:10px;
color:#000;
}

.seg-font-h2-black {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:14px;
color:#000;
}

.font-h2-black {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#000;
}

.seg-font-h1-orange {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#FF5200;
}

.seg-font-h2-orange {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:12px;
color:#FF5200;
}

table.started-button {
width:140px;
height:40px;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:12px;
color:#FFF;
background-color:#FF5200;
padding-top:-5px;
}

.started-symbol {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#FFF;
background-color:#FF5200;
padding-top:-5px;
}

.started-button-info {
width:140px;
height:40px;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:12px;
color:#FF5200;
background-color:#FFF;
border: 2px solid #FF5200;
padding-top:-5px;
}

.started-symbol-info {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#FF5200;
background-color:#FFF;
padding-top:-5px;
}

.framebox {
width:89%;
background:#FF5200;
color:#fff;
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:16px;
}

}








/* HANDY */

@media screen and (min-width: 1px) and (max-width: 480px) {  

#switch { display: none; }
#switch-mobile { display: block; }
#switch-tablet { display: none; }

.logo {
position:fixed;
padding-left:12px;
padding-top:20px;
width:35%;
height:auto;
z-index: 9990;
}

.menu-home {
position:fixed;
right:160px;
top:32px;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#000;
z-index:9990;
}

.menu-link {
position:fixed;
right:80px;
top:32px;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#000;
z-index:9990;
}

.menu-translate-de {
position:fixed;
right:50px;
top:32px;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#000;
z-index:9990;
}

.menu-translate-en {
position:fixed;
right:20px;
top:32px;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#000;
z-index:9990;
}

navi {
height:70px;
width:100%;
z-index:99990;
background:none;
position: fixed;
top:0;
right:0;
left:0;
transition:transform .25s .1s ease-in-out;
}

.down navi {
 background:#fff;
}

.standard-font-h1 {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#000;
}

.standard-font-h2 {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#000;
}

.extra-font-h1-blue {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#104E8B;
}

.extra-font-h1-black {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#000;
}

.telefon-hinweis {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:8px;
color:#000;
}

.header {
position:fixed;
height:40px;
width:100%;
background:#000;
right:0;
left:0;
bottom:20px;
}

.header-copy {
position:fixed;
height:20px;
width:100%;
background:#696969;
opacity: .9;
right:0;
left:0;
bottom:0;
}

.header-copy-font {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:10px;
color:#FFF;
}

.header-font-h1 {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#FFF;
}

.header-font-h2 {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#FFF;
}

.container {
width:100%;
height: auto;
}

table {
table-layout: fixed; 
overflow-x: auto;
}

.container-inner {
width:90%;
height: auto;
}

.container-inner-menu {
width:100%;
height: auto;
}

a {
text-decoration:none;
}


.font-h1 {
position:relative;
top:-2px;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#104E8B;
padding:5px;
}

.font-h2 {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#000;
}

.font-h1-icons {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
color:#104E8B;
font-size:18px !important;
margin-top:5px;
}

.icon-container {
width:100%
height:30px;
background-color:#F0F0F0;
}

table.button-icons {
width:100px;
height:30px;
border: 2px solid #104E8B;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:12px;
color:#104E8B;
background-color:#fff;
}

#clear {
height:45px;
}

.container-linebox {
width:100%;
height:200px;
background-color:#F0F0F0;
color:#000;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:13px;
}

.container-linebox-font {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:13px;
text-align: justify;
hyphens: auto; /* Silbentrennung aktivieren */
-webkit-hyphens: auto;
}

.navi-button {
width:75px; 
height:75px;
background-color: #FF5200;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-align:center;
color: white;
cursor: pointer;
text-decoration: none;
border: none;
transition: background-color 0.3s ease;
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:8px;
}

.navi-button:hover {
background-color:#CD6600; 
transition: transform 0.8s ease-in-out;
transform: rotate(360deg);
}

a:link { 
text-decoration:none
background-color: #FF5200;
}

.mailbox-container {
width:96%;
}

.mailbox-image {
width:25%;
}

.mailbox-image-object {
width:100px;
height:100px;
border-radius: 50%;
border: 1px solid #F0F0F0;
object-fit: cover;
z-index:9998;
}

.mailbox-input {
width:65%;
}

#clear {
height:22px;
}

/* SEGMENTS */

#clear-segments {
height:75px;
}

.image-corner {
width: 100%;
height: auto;
clip-path: polygon(0 0, 77% 0, 100% 14%, 100% 100%, 80% 100%, 64% 100%, 0% 80%, 0% 20%);
/* https://bennettfeely.com/clippy/ */
}

.seg-font-h0-black {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:15px;
color:#000;
}

.seg-font-h1-black {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:24px;
color:#000;
}

.seg-font-h1-black-smal {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#000;
}

.seg-font-h2-black {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#000;
}

.font-h2-black {
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:11px;
color:#000;
}

.seg-font-h1-orange {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#FF5200;
}

.seg-font-h2-orange {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#FF5200;
}

table.started-button {
width:140px;
height:38px;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:13px;
color:#FFF;
background-color:#FF5200;
padding-top:-5px;
}

.started-symbol {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#FFF;
background-color:#FF5200;
padding-top:-5px;
}

.started-button-info {
width:140px;
height:40px;
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:12px;
color:#FF5200;
background-color:#FFF;
border: 2px solid #FF5200;
padding-top:-5px;
}

.started-symbol-info {
font-family:Roboto-bold, Sans-Serif, Arial, Verdana; 
font-size:18px;
color:#FF5200;
background-color:#FFF;
padding-top:-5px;
}

.framebox {
width:89%;
background:#FF5200;
color:#fff;
font-family:Roboto-light, Sans-Serif, Arial, Verdana; 
font-size:16px;
justify-content: center;
align-items: center;
text-align:center;

}

}