@charset "utf-8";
/* Muster-CSS für alle neuen KontaktForms */
/* Style inputs, select elements and textareas */

form {
	padding: 10px;
	width:100%;
}

.PCI-Stacked {	/* PCI-Form */
	border-radius: 0 20px 20px 0;
	padding: 10px;
	border: solid 1px;
    background-image: linear-gradient(#bbbbbb, #eeeeee);	/* zu dunkles grau */
	background-image: linear-gradient(#dddddd, #fafafa);	/* wäre ok (helles grau) */
	background-image: linear-gradient(#FFFFd9, #FFFFfc);	/* gegen unten zu blass */
	background-image: linear-gradient(#FFFFe9, #FFFFf9);	/* eher zu blass? */
	background-image: linear-gradient(#FFFFd9, #FFFFf0);	/* oben etwas kräftiger, unten ok */
	background-image: linear-gradient(#FFFFe0, #FFFFf0);	/* sieht gut aus */
}


.X-Stacked fieldset {
	margin-top:5px;
	width:100%;
}
.PCI-Stacked fieldset {
/*	margin-top:5px; */
	width:100%;
	border: solid 1px;
	margin-bottom:15px; 

    /* border: none; */
    /* border-radius: 0 20px 20px 0; */
    /* border-top: none; */
    /* border-left: none; */
    /* padding-left: unset; */
    /* padding-right: 10px; */
}

legend {
	font-weight:bold;
	padding-left:5px;
	padding-right:5px;
	margin-bottom: -10px; 
	margin-left: -3px;
	border: solid 1px;
	border-radius:5px;
	background: white; 
	background-color: lightyellow;
	background-color: #FFFFca;

}

/* Style the label to display next to the inputs */
label {
  padding: 10px 5px 2px 0;
  display: inline-block; /* ... Standard bei 'stacked' ? */
}
/*
  display: block;
  width: 100%;
*/

fieldset.optionen label, fieldset.checkbox label {
	padding: 0px 5px 0px 0;
}
/*
	display: inline-block;
*/

fieldset.optionen legend, fieldset.checkbox legend {
	margin-bottom: unset;
}

fieldset.optionen, fieldset.checkbox {
	margin-top:20px;
}

input, select, textarea {
  width: 100%; /* Standard wären cols="20" = 20em (Zeichen), mit 100% kann man keine Felder nebeneinanden stellen */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  display: block;
}
/* ... bringt bei responsive nichts (evtl. nur bei kurzen Einzelfeldern)
  width: 18em;
  max-width:100%;
  font-size: 16px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
*/

input:focus-visible{
  outline: 1px solid #2798d1;
}

input:focus, select:focus, textarea:focus, fieldset.optionen:focus-within, fieldset.checkbox:focus-within {
  outline: 1px solid #2798d1; /* Ergänzung resp. Übersteuerung für focus-visible */
}

.X-Stacked fieldset:focus-within
{
  background-color: #ffffaa; 
}

.PCI-Stacked fieldset:focus-within
{
  background-color: lightyellow;
  background-color: #FFFFca;

}

input[type=date] {
  width: 10em;
}

#Sprache {
  width: 10em;
}

input[type=radio], input[type=checkbox] {
  width: unset;
  display: inline-block;
}
textarea{
  width:100%;
}
/* ... bringt nichts
  width: 20em;
  max-width:100%;
  height: 10em;
*/

/* Style the submit button */
input[type=submit], input[type=reset], .cancelbtn, .closebtn {
  width: 10em; 
  background-color: #04AA6D;
  color: white;
  padding: 12px 5px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 5px;
  font-weight: bold;
  max-width:100%;
  font-size:100%;
 }
/*
  float: right;
  font-size: 16px;
*/

/* Add a background color to the submit button on mouse-over */
input[type=submit]:hover {
  background-color: #0c6946;
}

/* für Bereiche mit float */
.FormRow {
	
}

/* Clear floats after the columns */
.FormRow:after {
  content: "";
  display: table;
  clear: both;
}

/* für kurze Felder nebeneinander */
.Kolprz-ShortFormFields
{
	margin-right:5%;
	margin-right:10%;
	margin-right:8%;
}
/*
	width:45%;
*/

.Kolprz-ShortForms:last-child, .Kolprz-ShortFormFields:last-child
  { 
	margin-right: 2%;
  }

/* Floating column for labels: 25% width */
.LabelCol-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.FeldCol-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

#HoneyPot {
    display: none;
}

/* als weiterer HoneyPot */
#Zusatztext2 {
    display: none;
}


/* für 'modales' Kontaktformular */
/* The Modal (background) */
.modalF, .modalT {
  position: fixed; /* Stay in place */
  z-index: 4000; /* Sit on top, auch über Navigation? */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 40px;
}

.modalF {
  display: none; /* Hidden by default */
}

.modalT {
  display: none; /* Hidden by default */
}

/* Modal Content/Box */
.modal-content {
  background-color: #d4e3d3;
  background: rgba(255, 255, 231, 0.97);
  background: var(--PCI-GelbH);
  background-image: linear-gradient(#FFFFe0, #FFFFf0);
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  border-radius: 20px;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width:650px;
}

form.modal-content {
	border-radius: 20px;
}

form.modal-content input[type=submit]{
	display:unset;
}

.ModalShad {
	box-shadow: 1px 1px 11px 7px #3a3a3a;
	border:2px solid #ffffff;
	box-shadow: 8px 8px 10px 0px #111;
}

/* Center the header and position the close button */
.HeaderContainer {
/*  text-align: center; */
/*  position: relative; */
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom .4s;
  animation: animatezoom .4s
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Extra styles for the cancel button */
.cancelbtn {
  background-color: #f44336;
  margin-left:20px;
}

.cancelbtn:hover {
  background-color: #a92f26;
}

/* Extra styles for the close button */
.closebtn {
  background-color: #26a983;
}

.closebtn:hover {
  background-color: #188263;
}

/* The Close Button (x) unnötig und auf Mobile störend */
/* ... aber evtl. bei WBS-Forms nützlich */
.close {
/*
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 35px;
*/
  color: green;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

.formkit-form[data-uid="41c9b9e51e"], .formkit-form[data-uid="a1e293521e"]
{
/*    max-width: none !important; */
	 margin:0 auto;
	 border: none !important;
	 box-shadow: none !important;
	 padding-top:0px !important;
	 padding-bottom:0px !important;
}

.formkit-powered-by-convertkit-container 
{
	display: none !important;
}


@media screen and (max-width: 600px) {
  .LabelCol-25, .FeldCol-75, input[type=submit], input[type=reset], .cancelbtn {
    width: 100%;
    margin-top: 0;
  }
.cancelbtn, input[type=reset] {
    margin-top: 10px;
	 margin-left:0px;
  }
}