@charset "UTF-8";
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
}
div {box-sizing: border-box;}
header, main, article, section, aside, footer, nav {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 15px 0;
	margin: 0;
}
a {text-decoration:none;}
.link {color:#0000ff; text-decoration: underline dotted #000080 2px; text-underline-offset: .3em; transition: 0.4s;}
.link:focus {outline: 3px solid #00ff00; outline-offset: 5px;}
.link:visited{color: purple; text-decoration: none;}
.link:active {background-color: #8FBC8F;}
.link:hover {text-decoration: underline dotted #ff0000 4px; text-underline-offset: .3em; transition: 0.3s}
.link:focus {text-decoration: underline dotted #ff0000 3px; text-underline-offset: .3em; transition: 0.3s}

.link-w {color:#ffff; text-decoration: underline dotted #fff 2px; text-underline-offset: .3em; transition: 0.4s;}
.link-w:focus {outline: 3px solid #ffff00; outline-offset: 5px;}
.link-w:visited{color: purple; text-decoration: none;}
.link-w:active {background-color: #7cfc00;}
.link-w:hover {color:#00ff00; text-decoration: underline dotted #ffd700 5px; text-underline-offset: .3em; transition: 0.3s}
.link-w:focus {text-decoration: underline dotted #ffff00 3px; text-underline-offset: .3em; transition: 0.3s}

.link-z {text-decoration: underline dotted #ffffff00 1px;}
.link-z:hover {text-decoration: underline dotted #ff0000 2px; text-underline-offset: .3em; transition: 0.3s}

i {font-style: italic}
strong, b {font-weight: 700}

.pad-L15{padding: 0 0 0 15px;}
.right{margin:0 auto 0 95%;}
.withBorder{padding:10px; border:1px solid gray;}
  
:root {
	--Vbody: 98%;    
    --Vfs: 100%;
    --Vfd: column;
    --Vlh: 1.15;
       
    --Vjc: center;
    --Vitem-20: 30%;
    --Vitem-25: 30%;
	--Vitem-30: 30%;
    --Vitem-30S: 50%;
    --Vitem-70: 98%;
    --Vitem-75: 98%;
    --Vitem-80: 98%;        
    --VKI-bg: 70% auto; 
    
    --V70ki: 2;
    --V30ki: 1;
   
    --VfsAnime: 120%;
    --VfwAnime: 700;  
    --Vanime-disp: none;
    --VbgPos: 120% top;
   
    --Vkd: 180px; 
   }
@media only screen and (min-width: 760px) {
:root {  
    --Vfd: row;
    --Vjc: flex-start;
    --Vitem-20: 20%;
	--Vitem-25: 25%;
    --Vitem-30: 30%;
    --Vitem-30S: 30%;
    --Vitem-70: 70%;
    --Vitem-75: 75%;
    --Vitem-80: 80%;
    --Vimage-w: 80%;
    
    --Vh1: 600px;
    --VKI-bg: 60% auto; 
   
    --V70ki: 1;
    --V30ki: 2; 
   
    --VfsAnime: 140%;
    --VfwAnime: 700;  
}}
@media only screen and (min-width:1020px) {
:root {
	--Vfs: 110%;    
    --Vh1: 960px;
    --VKI-bg: 60% auto; 
        
    --VfsAnime: 200%;
    --VfwAnime: 700;  
    --Vanime-disp: flex;     
 }}

@media only screen and (min-width:1200px) {
:root {
	--Vfs: 115%;
    --VKI-bg: 60% auto; 
    
    --VfsAnime: 200%;
    --VfwAnime: 900; 
    --Vkd: 200px;  
 }}

@media only screen and (min-width:1400px) {
:root {
	--Vfs: 120%;
    --VfsAnime: 260%;
}}
@media only screen and (min-width:1600px) {
:root {
	--Vfs: 125%;
    --Vlh: 1.2;
    --Vh1: 1160px;
    --VKI-bg: 50% auto;
 
    --VfsAnime: 260%;
    --VfwAnime: 900;
    --Vkd: 260px;
 }}
@media only screen and (min-width:1800px) {
:root {
	--Vfs: 130%;        
    --VfsAnime: 260%;
    --VfwAnime: 900;
 
 }}


@media only screen and (min-width:2100px) {
:root {
    --Vbody: 2000px;
    --Vfs: 135%;
	--Vtop-head-width: 90%;
	--Vmain-width: 90%;
	--Vbg-base: #4C6074;
	--Vbg-new: #4C6074;
    --Vimg-w: 70%;
	--Vimg-80: 100%;
	--Vimg-65: 100%;
	--Vimg-50: 50%;
    --VbgPos: right top;
    --Vkd: 280px; 
}}

html, body {
  width: var(--Vbody);
  height: auto;
  padding:0px;
  margin:0 auto;  
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: var(--Vfs);
  font-weight: 400;
  line-height: var(--Vlh);      
  word-spacing: 0.1em;
  background-color: #f0efeb;  
  color: #021C1E;
  hyphens: auto;
  scroll-behavior: smooth;  
}
body{ 
 background: #f0efeb url("./bg/werkstatt-und-ki.webp"); 
 background-position: var(--VbgPos);
 background-repeat: no-repeat;
 background-size: var(--VKI-bg);    
}

main {
  width: 100%;
  padding: 0;
  margin: 0 auto;  
  }
h1{width:90%; max-width: var(--Vh1);}

.flexBox {
 width: 100%;
 height: auto;  
 display: flex;
 flex-direction: var(--Vfd);
 flex-wrap: nowrap;
 justify-content: var(--Vjc);
 align-items: stretch;
 align-content: stretch;
 column-gap: 5px;
 row-gap:5px;       
}

.item, .item-20, .item-25, .item-30, .item-30S, .item-30KI, .item-30-anime{
    display: flex;
    justify-content: center;
    align-items: center;     
    
    height: auto;
	padding: 0px;      
  }
.item-20 {width: var(--Vitem-20);}
.item-25 {width: var(--Vitem-25);}
.item-30 {width: var(--Vitem-30);}
.item-30-anime {width: var(--Vitem-30);}
.item-30KI {width: var(--Vitem-30);}
.item-30S {width: var(--Vitem-30S);}
.item-70 {width: var(--Vitem-70);}
.item-70KI {width: var(--Vitem-70);}
.item-75 {width: var(--Vitem-75);}
.item-80 {width: var(--Vitem-80);}
.item-70, .item-75, .item-80, .item-70KI{
  height: auto;
  padding: 10px;   
 }
/* kleiner Monitor = andere Reihenfolge - Bild nach oben */
.item-70KI { order: var(--V70ki);}
.item-30KI { order: var(--V30ki);}

.item-30-anime{display: var(--Vanime-disp);}

.box-anime{
  width: 70%;
  height:auto;   
  font-size: var(--VfsAnime);
  font-weight: var(--VfwAnime);
 }
.txAnime {animation: turner 8s infinite linear}
@keyframes turner{
    from{  transform: rotateY(0deg)}
    to  {  transform: rotateY(360deg)}
}


/* Bilder -------------------------------- */

.flexImg {
  display: flex;
  justify-content: center;
  align-items: center;   
}

.logo-img{
  width: 95%;
  max-width: 200px;
  height: auto;
} 

.image {
  width: 90%;  
  max-width: 380px;
  height: auto;
  }
.wer {
  width: var(--Vkd);  
  height: auto;
  }


/* Bilder ENDE ---------------------------  */




/* Neue Farben 2026, Kontrastreich zu WEIß  ----------------------------------------  */
.tcRedClay{color:#C8000A;}
.tcCobalt{color:#3A5199;}

.tcVivid-orange{color:#FF5722;}
.tcDeep-teal{color:#00695C;}  
.tcWasabi-green{color:#8BC34A;}
.tcText-dark{color:#212121;} 
.tcNeuBlau{color:#003049;}
.tcGelbOrange{color:#f77f00;}
.tcPersimon{color:#FF3E26;} /* leuchtendes Rot */
.tcMagenta{color:#850050;}


.stretch {letter-spacing: .15em}
.stretchMin {letter-spacing: .09em}
.txBigLetter{text-transform: uppercase}
.txBalance{text-wrap: balance}

.txUBD {text-decoration: underline dotted #000 2px; text-underline-offset: .3em}
.txUBDblue {text-decoration: underline dotted #000 2px; text-underline-offset: .3em}
.txUBlue {text-decoration: underline solid #00f 2px; text-underline-offset: .3em}

.txCap {text-transform: uppercase}
.txSmalCap {font-variant: small-caps}
.txItal{font-style: italic}
.txC {text-align: center}
.txBr{padding-left: 40px; text-indent: -40px}
.txShadow{text-shadow: 3px 3px 4px #777}

.tcBlack {color: #000}
.tcWhite {color: #fff}
.tcRed {color: #ff0000}
.tcBlue {color: #0036ff;}
.tcGreen {color:#006020;}
.tcNavy{color:#000080;}


.fs090 {font-size: 90%}
.fs095 {font-size: 95%}
.fs110 {font-size: 110%}
.fs120 {font-size: 120%}
.fs130 {font-size: 130%}
.fs140 {font-size: 140%}
.fs160 {font-size: 160%}
.fs180 {font-size: 180%}
.fs200 {font-size: 200%}

.fs240{font-size:240%;}
.fs300{font-size:300%;}
.fs500{font-size:500%;}
.fs600{font-size:600%;}

.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}

.tw800, .tw800C {
	width: 100%;
	max-width: 800px
}
.tw820 {
	width: 100%;
	max-width: 820px
}
.tw860, .tw860C {
	width: 100%;
	max-width: 860px
}

.tw900 {
	width: 100%;
	max-width: 900px
}
.tw920 {
	width: 100%;
	max-width: 920px
}
.tw960 {
	width: 100%;
	max-width: 960px;
}
.tw980 {
	width: 100%;
	max-width: 980px
}
.cw900, .cw900C {
	box-sizing: border-box;
	width: 100%;
	max-width: 900px
}
.cw960, .cw960C {
	box-sizing: border-box;
	width: 100%;
	max-width: 960px
}
.cw980, .cw980C {
	box-sizing: border-box;
	width: 100%;
	max-width: 980px
}

.cw1060, .cw1060C {
	box-sizing: border-box;
	width: 100%;
	max-width: 1060px;   
}
.tw800C, .tw860C, .cw900C, .cw960C, .cw980C, .cw1060C {margin: 0 auto}
/*  --- Listen -------------------------------------- */
.uls {
	list-style-type: "\2713";
	list-style-position: inside;
	padding-left: 5px;
	margin: 0
}
.liNone{list-style-type:none}
ul {list-style-position: inside;}
li {max-width: 95%;}


/*  ENDE => Listen --- */
/*  Start => SITE FOOTER ---*/
.footer-info-box{
	width: 100%;
	height: auto;
    padding: 40px 30px 20px;    
	background: linear-gradient(1deg, rgba(101, 139, 171, 1) 91%, rgba(240, 239, 235, 1) 91.5%);
    color: #fff;
}
.footer-info-box-flex{
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;	     
  margin:0;
 }
.info-img{
  width: 90%;
  max-width: 500px;
  height:auto; 
}
.footer-nav-box{
	width: 100%;
	height: auto;
    padding:20px;
	background: #bd3533;
    color: #fff;
  }


.footer-nav-box-flex {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
    align-items: flex-start;
	align-content: flex-start;
    column-gap: 40px;    
}

#site-go-top {
	z-index: 40;
	display: var(--VgoTop);
	position: fixed;
	right: var(--Vtop-head-rl);
	bottom: 10px;
	width: 60px;
	height: 60px;
	padding: 5px;
	opacity: 0
}
.icon-top {
	width: 60px;
	height: 60px;
	border-radius: 50%
}


/* START => Seperatoren / Trennlinien mit <hr>, unterschiedliche Länge und Farben */
.sepB100, .sepB100C, .sepW100, .sepW100C, .sepR100, .sepR100C, .sepK100, .sepK100C, .sepB90, .sepB90C, .sepW90, .sepW90C, .sepR90, .sepR90C, .sepK90, .sepK90C, .sepB80, .sepB70, .sepB70C, .sepW70, .sepW70C, .sepR70, .sepR70C, .sepK70, .sepK70C, .sepB50, .sepB50C, .sepW50, .sepW50C, .sepR50, .sepR50C, .sepK50, .sepK50C {
	width: 100%;
	margin: 10px 0;
	border: 0;
	height: 4px;
	background: #404040
}
.sepB90, .sepB90C, .sepW90, .sepW90C, .sepR90, .sepR90C, .sepK90, .sepK90C {
	width: 90%;
}
.sepB80 {
	width: 80%;
}
.sepB70, .sepB70C, .sepW70, .sepW70C, .sepR70, .sepR70C, .sepK70, .sepK70C {
	width: 70%;
}
.sepB50, .sepB50C, .sepW50, .sepW50C, .sepR50, .sepR50C, .sepK50, .sepK50C {
	width: 50%;
}
.sepW100, .sepW90, .sepW90C, .sepW70, .sepW70C, .sepW50, .sepW50C {
	background: #fff
}
.sepR100, .sepR90, .sepR90C, .sepR70, .sepR70C, .sepR50, .sepR50C {
	background: #C8000A
}
.sepK100, .sepK90, .sepK90C, .sepK70, .sepK70C, .sepK50, .sepK50C {
	background: #fff668
}
.sepB90C, .sepB70C, .sepB50C, .sepW90C, .sepW70C, .sepW50C, .sepR90C, .sepR70C, .sepR50C, .sepK90C, .sepK70C, .sepK50C {
	margin: 15px auto
}

.sep-M {margin: 15px 0 15px -1.2em}
.sepH1{height:1px;}
.sepH2{height:2px;}
.sepH3{height:3px;}
.sepH6{height:6px;}
/* ENDE => Seperatoren */

.btn{   
    color: white;
    text-align: center;
    background-color: #598234;
    max-width:260px;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 7px 0 #486b00;
  }

.btn:active {
    box-shadow: none;
    transform: translateY(7px);
    transition: all.1s;
  }