/*Projektfarbe: 
#660726 von htmlcolorcodes.com/color-picker
Contrast #fb9902
gray individuell: 
120 120 120 = #787878
120 120 130 = #787882
120 120 125 = #78787d
120 116 125 = #78747d
120 140 157 = #788c9d


Light blue favorite: 136 174 185 = #88aeb9 con: 9 89 113 = #095971

Rot:
72141A
590F14
004D68 + 008FC1
004D68 + 00A2DB

Letzter Stand: #095971 + #88aeb9 

Maika rosa #d194b1 contrast fb9902 

Maika letztes Stand: #660726 + #ffbf00

Sunny and calm: 
Dunkelblau: 00303F  
Mittelblau: 7A9D96
Hellblau: CAE4DB
Gelb: DCAE1D

Paynes gray moonstone atomic tangerine

Dunkelblau: 326273
Hellblau: 5C9EAD
Kontrast orange: E39774

coolors favorite 1:

37505C
F6F7EB
EFA00B oder FF674D

coolors favorite 2:

548687
003554
EDF7F6



color hex com

025e6f Logo
007a8d balken
coral

rosa dunkelgrau, letztes Entwurf vor umfrage

contrast: #A8577E
titel #232323
body1 #A8577E
body2 #E8F0FF


cooolors favorite 3: Komplettfavorit aktuell!

Blue: 0B4F6C
White: white
contrast: coral
Logo und border: 042E40
White cambria: white
*/





/*Schriften*/
#whitecambria, h1, h4, .navbar-brand, .nav-link, #techtext, #produkte:hover, #service:hover, #kontakt:hover, #aktiv, .btn:hover, fieldset, legend, #prodinaktiv {
    color: white ;
    font-family: cambria, serif
}


#blackcambria, h2,h3, #produkte, #service, #kontakt, #kontaktheader, textarea, .btn {
    color: black ;
    font-family: cambria, serif
}


#contrastcambria, #prodaktiv {
    color: coral ;
    font-family:cambria, serif
}

#titelcambria {
    color: coral;
    font-family:cambria, serif
}


/*Hintergrund*/

#body1, #aktiv, fieldset, .btn:hover, #navbottom, #bgcol {
    background-color: #0B4F6C
          
}

body, #body2, #produktinfo,#bgwhite, .navbar, #produkte, #service,.btn, #kontakt {
    background: white;    
    font-family:cambria, serif  
    
}

#produkte:hover, #service:hover, #kontakt:hover{
    background-color: #0B4F6C
}


#borderall, #prodimg, #produkte, #service, #kontakt, #aktiv, fieldset, input, #sendebutton, .btn {
    border: 2px solid #042E40;
    border-radius:7px;     
} 

#prodimgl {
    border: 2px solid #042E40;
    border-radius:7px;
    transition: transform 0.5s;    
}
#prodimgl:hover {
    transform:scale(1.15) translateX(25px);
    justify-content: center;
    align-items: center;
}

#prodimgr {
    border: 2px solid #042E40;
    border-radius:7px;
    transition: transform 0.5s;    
}
#prodimgr:hover {
    transform:scale(1.15) translateX(-20px);
    justify-content: center;
    align-items: center;
}



#produkte:hover, #service:hover, #kontakt:hover, #kontaktbutton:hover, .btn:hover {
    border: 2px solid #042E40;
    border-radius:7px
}

#borderwhite {
    border-radius: 7px;
    background-color: #787878;
    border: 2px solid white;
    color: white;
    
}

#borderblack, #aktiv{
    
    border: 2px solid black
}

#prodaktiv {
    font-size:20px;
}
#prodinaktiv {
    font-size:20px
}

#body1 {
    margin-bottom:30px
}


#produkte, #service, #kontakt {   
    font-size:20px;
    margin-left: 10px;
    margin-top:40px;
    padding-left: 10px;
    padding-right: 10px;      
    
}



.header {
    display: table;
    
}
#aktiv { 
    font-size:20px;
    margin-left: 10px;
    margin-top:40px;
    padding-left: 10px;
    padding-right: 10px;
}
#kontaktheader {
    font-size: 48px;
    text-decoration: underline       
}

fieldset {
    
    margin: 2em 0;
    padding: 1em 2em;
}
    
legend {  
    padding: 0 .25emM
    
}

label {
    display: block;
    margin-top: 1em;
}


input {
    
    padding: .5em;
    width: 20em
    
}

textarea {
    min-height: 8em; 
    min-width: 60%;
    padding: .5em;
    margin-bottom: 1em;
    border: solid 2px white;
    border-radius: 10px;
    width: 20em
    
}



.navbar-toggler {
    margin:18px;
    vertical-align: center
}

.btn, #sendebutton {
    font-size:28px;  
}

#impressum, #datenschutz, #agb {
    padding:10px;
    margin: 10px
}

a:link { 
  text-decoration: none; 
} 
a:visited { 
  text-decoration: none; 
} 
a:hover { 
  text-decoration: none; 
} 
a:active { 
  text-decoration: none; 
}

 /* Customize the label (the container) */
#checkboxcontainer {
  display: block;    
  position:relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
#checkboxcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
    color: black;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}



/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 4px;
  width: 8px;
  height: 14px;    
  border: solid black;    
  border-width: 0 4px 4px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
} 
/*
#produktinfotitel {
    display: table;
    width: 100%;
    height: 1em;
    vertical-align: middle
    
    
}
#produktinfotext {
    display: table-cell;
    vertical-align: middle
    
    
}


#produktinfo {
    text-align:center
}

.lead { color: white

}
*/