/* Material Design Theme */
body {
background-color: #e1ecca;
margin-top: 50px !important;
}

.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

h1 {
font-size: 2rem !important;
font-weight: 500;
margin-top: 0;
margin-bottom: 1rem;
}

form {
margin-top: 2rem;
}

.btn-primary {
background-color: #87a206;
border-color: #87a206;
}

.btn-primary:hover {
background-color: #7a8e04;
border-color: #7a8e04;
}

label {
font-size: 1.2rem;
font-weight: 500;
}

input[type="text"],
input[type="week"] {
border-radius: 10px;
border: none;
background-color: #e9e9e9;
padding: 10px 15px;
font-size: 1.2rem;
}

input[type="radio"] {
margin-right: 10px;
margin-top: 6px;
}

.form-check-label {
font-size: 1.2rem;
}

@media (min-width: 576px) {
.container {
max-width: 540px;
}
}

@media (min-width: 768px) {
.container {
max-width: 720px;
}
}

@media (min-width: 992px) {
.container {
max-width: 960px;
}
}

@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}

h1 {
font-size: 24px;
margin-top: 50px;
}

h2 {
font-size: 20px;
}

h4 {
font-size: 1.2rem !important;
}

.container {
margin-top: 50px;
padding-bottom: 90px;
}

#kundeninfos {
margin-top: -20px;
margin-right: -20px;
margin-left: -20px;
border-radius: 14px 14px 0 0;
box-shadow: none !important;
}

.responsive-img {
max-width: 100%;
height: auto;
border: 5px solid #ffffff;
transition: border-color 0.2s ease-in-out;
border-radius: 10px;
cursor: pointer;
}

input[type="radio"]:checked + img {
border: 5px solid #87a206;
border-radius: 10px;
}

.dekor-name {
font-size: 1.2rem;
font-weight: normal;
text-align: center;
}

input[type="radio"]:checked + .dekor-container .dekor-name {
font-weight: bold;
}

/* zusätzliche Regeln für die Dekorauswahl */
.dekor-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
}

.dekor-item {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}

.dekor-image {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin-bottom: 10px;
  border-radius: 10px;
  cursor: pointer !important;
}

input[type="radio"]:checked + .dekor-container img {
  border: 5px solid #87a206;
  border-radius: 10px;
}

input[type="radio"] {
  position: absolute;
  visibility: hidden;
}

input[type="radio"] + .dekor-container {
  position: relative;
  cursor: pointer;
  display: inline-block;
  margin: 20px;
  text-align: center;
}

input[type="radio"] + .dekor-container img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  cursor: pointer;
}

input[type="radio"]:checked + label > .dekor-name {
  font-weight: bold;
}

@media (max-width: 576px) {
  .responsive-img {
    max-width: 50%;
  }
}

@media (min-width: 576px) and (max-width: 992px) {
  .responsive-img {
    max-width: 33.33%;
  }
}

@media (min-width: 992px) {
  .responsive-img {
    max-width: 25%;
  }
}

.table th {background: #87a206 !important; color: #fff;}
.table td {vertical-align: middle;}
.t2 { background: #e1ecca !important;}
.formcell {padding: 0 !important; border-left: 1px  solid #ccc; background: #f2f2f2 !important; max-width: 100px;}
.formcell_big {padding: 0 !important; background: #fff;}
.formcell_big_2 {padding: 0 !important; padding-top: 5px !important; background: #fff;}
.formcell input {background: #dfecfb !important; border: 0 !important; text-align: center; margin:0 !important; }
.table label {font-size: 12px;}
.table input[type="radio"] {visibility: inherit; opacity: inherit;}
.text-red {color: red !important; font-weight: bold;}
.table select {border: 0 !important;}
.table tr.leer {background: #fff !important;}
.table .p0 {padding: 0 !important;}
.table td img {padding: 10px; max-height: 46px;}
.table th.normal {font-weight: normal;}
.table td.radio {padding-bottom: 0;}