@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, form {padding:0; margin: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
header, main, article, section, aside, footer {box-sizing:border-box; position:relative; width:100%; height:auto; padding:0; margin:0;}

 :root {
  --Vfs: 130%;                    /* font-size */    
  --Vhead-top-zind: 100;         /* header-top (z-index: 0) */
  --Vhead-top-pos: fixed;        /* header-top (position: relative oder fixed ) */ 
  --Vhead-top-w: 90%;            /* header-top / weit */  
  --Vhead-top-h: 180px;          /* header-top / hoch */  
  --Vhead-top-mg: 0 5%;          /* header-top / hoch */    
 
  --Vmain-w: 70%;               /* main / width */ 
  --Vmain-mg: 180px 0;          /* main / margin */
  --Vside-w:  30%;              /* sidebar / weit */         
  --Vside-mg: 180px 0;          /* sidebar / margin */ 
  --Vside-pad: 100px 30px 50px;  /* sidebar / padding */      
 }
html,body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    word-spacing:.08em;
    line-height:1.15;
    padding:0;
    margin:0;
    font-size:var(--Vfs);   
    background:#F7F6F6F6;       
    color:#505050;   
    hyphens:auto;            
    scroll-behavior:smooth;
}


.head-top{z-index:var(--Vhead-top-zind); position:var(--Vhead-top-pos); width:var(--Vhead-top-w); height:var(--Vhead-top-h); padding:20px 30px; margin:var(--Vhead-top-mg); background:#fff; border:1px solid silver;}
main{position:relative; width:var(--Vmain-w); height:auto; padding:var(--Vmain-pad); margin:var(--Vmain-mg); background:#F5F4F4; border-left:1px solid #E8E8E9; border-right:1px solid #E8E8E9;}
/*  Textgestaltung */


i{font-style: italic;}
b{font-weight:700;}
strong{font-weight:800;}
mark{background-color:rgba(255,255,0. 0.8);}

.txC{text-align:center;}
.txU{text-decoration:underline; text-underline-offset:0.35em;}
.txBa{text-wrap: balance;}

/* TextColor */
.tcBlack{color:#2a4a64;}
.tcWhite{color: #fff;}
.tcRed{color: #ff0000;}
.tcBlue{color:#0040ff;}
.tcGreen{color:#007000;}
.tcYellow{color:#ffff00;}
.tcAqua{color:#00ffff;}
.tcCoral{color:#FF7F50;}
.tcPeach{color:#9c4a0b;}
.tcGreen{color:#009E55; text-shadow: 2px 2px 1px #000;}
.tcGray{color:#999898;}
.txUGray{text-decoration:4px underline solid #999898; text-underline-offset:0.20em;}

.logo-color{color:#009E55; text-shadow: 1px 1px 0px #000;}


.fs12 {font-size:12px;}
.fs080 {font-size:80%;}
.fs090 {font-size:90%;}
.fs110 {font-size:110%;}
.fs120 {font-size:120%;}
.fs140 {font-size:140%;}
.fs160 {font-size:160%;}
.fs180 {font-size:180%;}
.fs200 {font-size:200%;}

.fw300 {font-weight:300;}
.fw400 {font-weight:400;}
.fw500 {font-weight:500;}
.fw600 {font-weight:600;}
.fw700 {font-weight:700;}
.fw800 {font-weight:800;}
.fw900 {font-weight:900;}

.mgb05 {margin:0 0 5px 0;}
.mgb08 {margin:0 0 8px 0;}
.mgb10 {margin:0 0 10px 0;}
.mgb15 {margin:0 0 15px 0;}
.mgb20 {margin:0 0 20px 0;}
.mgb30 {margin:0 0 30px 0;}
.mgb40 {margin:0 0 40px 0;}
.mgb50 {margin:0 0 50px 0;}

/* container Flexbox und Flexitems */
.flex-top-head{display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: flex-start; align-content: flex-start; column-gap: 10px; row-gap:30px;}

.flex-0{display:flex; flex-direction:var(--Vfd-0); flex-wrap:wrap; justify-content:center; align-items:flex-start; align-content: flex-start; column-gap: 30px; row-gap:30px;}
.flex-1{display:flex; flex-direction:var(--Vfd-0); flex-wrap:wrap; justify-content:center; align-items:flex-start; align-content: flex-start; column-gap: 30px; row-gap:30px;}

.box{width:100%; height:auto; padding:20px;}
.box-20{width:var(--Vbox-20w); height:auto; padding:10px;}
.box-25{width:var(--Vbox-25w); height:auto; padding:10px;}
.box-30{width:var(--Vbox-30w); height:auto; padding:20px;}
.box-40{width:var(--Vbox-40w); height:auto; padding:20px;}
.box-50{width:var(--Vbox-50w); height:auto; padding:20px;}
.box-60{width:var(--Vbox-50w); height:auto; padding:20px;}
.box-70{width:var(--Vbox-70w); height:auto; padding:20px;}
.box-75{width:var(--Vbox-75w); height:auto; padding:20px;}
.box-80{width:var(--Vbox-80w); height:auto; padding:20px;}
.box-90{width:var(--Vbox-90w); height:auto; padding:20px;}
.box-95{width:95%; height:auto; padding:30px; margin:0 auto;}
.box-98{width:98%; height:auto; padding:30px; margin:0 auto;}
.wCenter{margin:0 auto;}

/* weit */
.w680C{width:80%; height:auto; padding:0; margin:0 auto;}
.w600{max-width:600px;}
.w620{max-width:620px;}
.w640{max-width:640px;}
.w660{max-width:660px;}
.w680{max-width:680px;}
.w700{max-width:700px;}
.w720{max-width:720px;}
.w740{max-width:740px;}
.w760{max-width:760px;}
.w780{max-width:780px;}
.w800{max-width:800px;}
.w820{max-width:820px;}
.w840{max-width:840px;}
.w860{max-width:860px;}
.w880{max-width:880px;}
.w900{max-width:900px;}
.w920{max-width:920px;}
.w940{max-width:940px;}
.w960{max-width:960px;}
.w980{max-width:980px;}
.w1000{max-width:1000px;}
.w1020{max-width:1020px;}
.w1040{max-width:1040px;}
.w1060{max-width:1060px;}
.w1080{max-width:1080px;}
.w1100{max-width:1100px;}
.w1120{max-width:1120px;}
.w1140{max-width:1140px;}
.w1160{max-width:1160px;}
.w1180{max-width:1180px;}
.w1200{max-width:1200px;}


/* images */
.logo-200, .logo-400{width:200px; height:auto; object-fit: cover; object-position: 0%;}
.logo-400{width:400px;}

/* sep = Seperator / Trennstrich mit Ölpinsel */
hr{width: 100%; background-color: black; height: 1px; border: none; margin:15px auto;}
.sep-30W, .sep-30WC, .sep30BC, .sep-50W, .sep-50B, .sep-50WC, .sep-50BC, .sep-70W, .sep-70B, .sep-70WC, .sep-70BC, .sep-80W, .sep-80B, .sep-80WC, .sep-80BC, .sep-90W, .sep-90B, .sep-90WC, .sep-90BC,
.sep-50Peach, .sep-50CPeach, .sep-70Peach, .sep-70CPeach, .sep-90Peach, .sep-90CPeach, .sep-50Red, .sep-50CRed, .sep-70Red, .sep-70CRed, .sep-90Red, .sep-90CRed, .sep-30Blue, .sep-30CBlue, .sep-50Blue, .sep-50CBlue, .sep-70Blue, .sep-70CBlue, sep-90Blue, .sep-90CBlue {
    background-image:url(./sep/sep-black.png);
    background-position:left center;
    background-repeat:no-repeat;
    background-size:50% 7px;
    width:100%;
    height:7px;
    margin:5px 0 20px;
 }
.sep-30Blue, .sep-30CBlue, .sep-50Blue, .sep-50CBlue, .sep-70Blue, .sep-70CBlue, sep-90Blue, .sep-90CBlue {background-image:url(./sep/sep-blue.png);} 
.sep-50Peach, .sep-50CPeach, .sep-70Peach, .sep-70CPeach, .sep-90Peach, .sep-90CPeach {background-image:url(./sep/sep-peach.png);}  
.sep-50Red, .sep-50CRed, .sep-70Red, .sep-70CRed, .sep-90Red, .sep-90CRed {background-image:url(./sep/sep-red.png);}  
.sep-30W,.sep-30WC,.sep-50W,.sep-50WC,.sep-70W,.sep-70WC,.sep-80W,.sep-80WC,.sep-90W,.sep-90WC{background-image: url(./sep/sep-white.png);}
.sep-30W, sep-30WC, .sep-30B, .sep-30BC, .sep-30Blue, .sep-30CBlue {background-size:30% 7px;}
.sep-50W, .sep-50WC, .sep-50B, .sep-50BC, .sep-50Peach, .sep-50C, .sep-50Red, .sep-50CRed, .sep-50Blue, .sep-50CBlue {background-size:50% 7px;}
.sep-70W, .sep-70WC, .sep-70B, .sep-70BC, .sep-70Peach, .sep-70Cpeach, .sep-70Red, .sep-70CRed, .sep-70Blue, .sep-70CBlue {background-size:70% 7px;}
.sep-80W, .sep-80WC, .sep-80B, .sep-80BC {background-size:80% 7px;}
.sep-90W, .sep-90WC, .sep-90B, .sep-90BC, .sep-90Peach, .sep-90CPeach, .sep-90Red, .sep-90CRed, .sep-90Blue, .sep-90CBlue {background-size:90% 7px;}
.sep-30WC, .sep-30BC, .sep-50WC, .sep-50BC, .sep-70WC, .sep-70BC, sep-80WC, .sep-80BC,  .sep-90WC, .sep-90BC, .sep-30CBlue, .sep-50CBlue, .sep-70CBlue, .sep-90CBlue,
.sep-50CPeach, .sep-70CPeach, .sep-90CPeach, sep-50CRed, .sep-70CRed, sep-90CRed {background-position:center center;}
/*  => ENDE  sep = Seperator / Trennstrich mit Ölpinsel */

/* nav klick-box */ 
.klickDiv{max-width:780px; padding:20px 50px 40px 50px; margin:0 auto; border:1px solid #ff7f50; border-top:5px solid #ff7f50;}
.klick-div{max-width:760px; padding:20px; margin:20px auto; border-top:10px solid #ff7f50;}
.klick-div-left{max-width:760px; padding:20px; margin:20px auto 20px 0; border:1px solid #ff7f50; border-top:5px solid #ff7f50;}
.shadow-b{box-shadow: 8px 8px 8px -3px rgba(0,0,0,0.3);}
.shadow-w{box-shadow: 8px 8px 8px -3px rgba(255,255,255,0.3);}

.klick, .klick-left{
  max-width:700px;
  height:auto;  
  text-align:center;
  padding:20px;
  margin:1.5em auto 2em;
  border-radius:20px;
  color:#fff;
  background:#137400 url("./icon/cursor.png") 98% 90% no-repeat; background-size: 30px 37px;   
}
.klick-color-1{background:#41afac; color:#fff;}
.klick-color-2{background:#efdd93; color:#2a4a64;}

.klick-left{margin:1.5em 0px 2em 0px;}
.klick {box-shadow: 0px 15px 27px 2px rgba(0,0,0,0.40);}
.klick:hover {border-bottom: 3px inset rgba(0,0,0,0.40); box-shadow: 0px -8px 20px -6px rgba(0,0,0,0.70); transition: 0.4s;}
.klick-left {box-shadow: 0px 15px 27px 2px rgba(0,0,0,0.40);}
.klick-left:hover {border-bottom: 3px inset rgba(0,0,0,0.40); box-shadow: 0px -8px 20px -6px rgba(0,0,0,0.70); transition: 0.4s;}
.klick-icon{width:24px; height:auto; vertical-align: bottom; margin:0 0 -7px 0;}
/* images */
.img-flex{display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:center;}
.img-80{width:var(--Vimg-80); height:auto;}
.img-50{width:var(--Vimg-50); height:auto;}

/* Listen */
ul{list-style-type: "\25B8"; list-style-position:inside; padding-left: 5px; margin:0;}
.uls {list-style-type: "\2713"; list-style-position:inside; padding-left: 5px; margin:0;}
ul {margin:10px 0 10px 0;}
li{max-width:90%; padding:0 0 5px 0; margin:0;}

/* details langsam öffen */
@keyframes open {0% { opacity: 0; transform: translateY(-1vw);}
  100% {opacity: 1; margin-left: 0px}
}
details[open] summary~* {animation: open .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
blockquote[open] summary~* {animation: open .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
details, summary{cursor:pointer;} 
details blockquote{padding:15px 10px;}
/* ENDE => details langsam öffen */

.bg-webdesign{background: url(./bg/webdesign.png); background-size: 24% auto; background-position: left top; background-repeat: no-repeat;}
.bg-digitalisierung{background: url(./bg/digitalisierung.png); background-size: 24% auto; background-position: left top;  background-repeat: no-repeat;}

.nav-animate-left{
 position:relative;
 animation:animateleft 0.4s;
 }
@keyframes nav-animateleft{
 from{left:-300px; opacity:0} to{left:0; opacity:1;}
 }

/* Site Footer */
.site-footer{width:100%; height:auto; background:#2a3d4c; color:#fff; padding:20px 30px 40px;}
.site-footer-flex{display:flex; font-size:var(--Vsite-footer-fsize2); flex-direction:var(--Vsite-footer-flex-direction); flex-wrap:var(--Vsite-footer-flex-wrap); justify-content: center; align-items: center; align-content: center; column-gap:40px; row-gap:15px;}
.site-footer-fsize1{font-size:var(--Vsite-footer-fsize1);}
.site-footer-fsize2{font-size:var(--Vsite-footer-fsize2);}
.site-footer-info{font-size:var(--Vsite-footer-fsize1); font-weight:300; padding:20px; border-top:1px solid #fff; margin:40px 10px 20px 10px;}

/* Site Info */
#site-go-top{z-index:300; display:var(--VgoTop); position:fixed; right:10px; bottom:10px; width:60px; height:60px; padding:5px; opacity:0;}
.icon-top{width:60px; height:60px; border-radius:50%;}

/* Site Navigation mit Hamburger Menu */
#menu{z-index:200; position:fixed; display:none; right:5px; top:5px; box-sizing:border-box; width:var(--Vmenu-width); height:100vh; padding:var(--Vmenu-padding);}
#menu{background:#2a3d4c; color:#fff;}  
#menu{overflow-y: scroll; scrollbar-color:#ffff00 #00ff00; cursor:all-scroll;}

.menu-flex{display:flex; flex-direction:column; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start;}
.menu-item{box-sizing:border-box; position:relative; font-size:var(--Vmenu-item-font-size); width:var(--Vmenu-item-width); height:auto; padding:5px 0; margin:var(--Vmenu-item-margin);}
.menu-item a{font-size:var(--Vmenu-item-font-size); color:#fff; text-decoration:3px underline solid #fff; text-align:center; text-underline-offset:0.35em;}  

#menu-hamburg-row{
  z-index:250;
  position: fixed;
  display: block; 
  box-sizing: border-box;
  top: 15px;
  right: 30px;
  width: auto;
  height: auto;
  cursor: pointer;
  opacity: 1; 
 }

.menu-hamburg{
 display: block; 
 width: 56px;
 height: 52px;
 position: relative;
 margin-left: auto;
 margin-right: auto;
 background: #fff;
 border-radius: 3px;
 box-shadow: 3px 3px 5px rgba(0,0,0,1), -3px -3px 5px rgba(207,207,207,1), inset 1px 1px 1px rgba(192,192,192,1);
 transition: border-radius 0.5s;
 }

.menu-hamburg-line {
 display: block;
 position: absolute;
 left: 6px;
 height: 4px;
 width: 44px;
 background: #000;
 transition: 0.5s;
 transform-origin: center;
 }
.menu-hamburg-line:nth-child(1) {top: 12px;}
.menu-hamburg-line:nth-child(2) {top: 24px;}
.menu-hamburg-line:nth-child(3) {top: 36px;}
.menu-hamburg.checked .menu-hamburg-line:nth-child(1) {transform: translateY(12px) rotate(-45deg);}
.menu-hamburg.checked .menu-hamburg-line:nth-child(2) {opacity: 0;}
.menu-hamburg.checked .menu-hamburg-line:nth-child(3) {transform: translateY(-12px) rotate(45deg);}

@keyframes einblenden {from {opacity:0} to {opacity:1}}
@keyframes ausblenden {from {opacity:1} to {opacity:0}}

/*  großer hamburger-button */
@media only screen and (min-width:1020px) {
.menu-hamburg{
 width:4.5em;
 height:3.125em;
 }

.menu-hamburg-line {
 left: 0.5em;
 height: 0.375em;
 width: 3.5em;
 }
.menu-hamburg-line:nth-child(1) {top: 0.5em;}
.menu-hamburg-line:nth-child(2) {top: 1.375em;}
.menu-hamburg-line:nth-child(3) {top: 2.25em;}
.menu-hamburg.checked .menu-hamburg-line:nth-child(1) {transform: translateY(0.875em) rotate(-45deg);}
.menu-hamburg.checked .menu-hamburg-line:nth-child(2) {opacity: 0;}
.menu-hamburg.checked .menu-hamburg-line:nth-child(3) {transform: translateY(-0.875em) rotate(45deg);}
}
/* => ENDE -- Site Navigation mit Hamburger Menu */
details, summary, blockquote {width:100%;}

#info{
 z-index:600;
 display:block;
 position:fixed;
 top: 40%;
 left: 5%;
 width:90%;
 max-width:960px;
 padding:20px; 
 margin:0 auto;
 background-color:#fff;
 color:#000;
 border:2px solid black;
 border-radius:16px;
 }
 
/* Handschrift: yesteryear-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Yesteryear';
  font-style: normal;
  font-weight: 400;
  src: url('./hand/yesteryear/yesteryear-v21-latin-regular.woff2') format('woff2'); 
} 
@font-face {
  font-display: swap; 
  font-family: 'Yellowtail';
  font-style: normal;
  font-weight: 400;
  src: url('./hand/yellowtail/yellowtail-v25-latin-regular.woff2') format('woff2');
}
.hand-1{font-family: "Yesteryear", cursive;}
.hand-2{font-family: "Yellowtail", cursive;}

.box-editor{width:90vw; height:70vh; padding:10px; margin:30px auto; border:1px solid red;}

input[type="text"],
input[type="url"],
input[type="email"],
input[type="tel"]{
  appearance: none;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid black;
  width: 98%;
  height:24px; 
  padding:3px 5px;
  margin:0 auto; 
  background:#f0f0f0;
  color:#000;  
  font-size: 18px;
  font-weight:400;  
 }

textarea {
   appearance: none;
   width:90%;
   height:95%;
   padding:10px;
   margin:10px auto;  
   border:3px solid blue;
   border-radius:0px;  
   background:#fff;
   color:#000;
   font-size: 18px;
   font-weight:400;      
}


sup {
 position: relative;
 vertical-align: top;
 top: 10px;
 font-family: Roboto, sans-serif, cursive; 
 color:#0044ff;
 font-weight:600; 
}

button{
   font-size: 18px; padding: 5px 12px; 
   font-family: Roboto, sans-serif, cursive;
   color: teal;
   border: 1px solid silver;
   background-image: linear-gradient(to top, gainsboro 0%, white 90%);
   border-radius: 16px;
  cursor:pointer; 
}