html,body {
	font-family: "Open Sans","Helvetica Neue",Verdana,Arial,sans-serif;
}

:root {
--orange: #d68800;
--grau: #3d3e44;
}

/* ---------------------- Header ---------------------- */
.logo {
    width: clamp(10rem, 6.4789rem + 15.0235vw, 20rem);
    padding-block: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);
}

.header-box {
background-image: url(../images/header.webp);   
background-repeat: no-repeat;
background-size: cover;
height: clamp(30rem, 23.8125rem + 17.1875vw, 41rem);
}

@media (max-width: 575.98px) {
.header-box {
background-image: url(../images/header-mobil.webp);   
height: 32rem;
}    
}

.header-box h1{
color: #fff;    
font-size: clamp(1.2rem, 0.649rem + 2.351vw, 3rem);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.1em;
padding-top: clamp(0.8rem, 0.5535rem + 1.0516vw, 1.5rem);
padding-bottom: 3rem;
}

#pakete-grid {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
column-gap: clamp(1rem, 0.2958rem + 3.0047vw, 3rem);
width: auto;
height: auto;
justify-items: center;
padding-inline: clamp(1rem, -1.1429rem + 9.1429vw, 8rem);
}

.bg-weiss {
background-color: #fff;
padding-block: 2rem;

}

#pakete-box1 {
grid-area: 1/1/2/2;
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
width: 100%;
/*min-width: clamp(7rem, -0.3125rem + 20.3125vw, 20rem);*/
justify-content: center;
}
#pakete-box2 {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
width: 100%;
/*min-width: clamp(7rem, -0.3125rem + 20.3125vw, 20rem);*/
justify-content: center;
}
#pakete-box3 {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
width: 100%;
/*min-width: clamp(7rem, -0.3125rem + 20.3125vw, 20rem);*/
justify-content: center;
}

.box-text h5{    
 color: var(--orange);   
font-size: clamp(0.7rem, 0.4551rem + 1.0449vw, 1.5rem); 
text-align: center;    
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
width: clamp(5rem, -1.1875rem + 17.1875vw, 16rem);
}

.box-text span{
color: var(--grau);
}

.box-preis h5{   
 color: var(--grau);   
font-size: clamp(0.7rem, 0.4551rem + 1.0449vw, 1.5rem); 
font-weight: 700;
text-align: center;
margin-top: 1rem;
margin-bottom: 0.1rem; 
padding-top: 1rem;
border-top: 1px solid var(--grau);
}

.box-preis p{
 color: var(--grau);   
 font-size: 0.7rem;   
 font-weight: 300;
 text-align: center;
 margin-bottom: 2rem;
}

.box-button {
 text-align: center;
}

.box-button a{
font-size: clamp(0.7rem, 0.6388rem + 0.2612vw, 0.9rem);  
color: #fff;    
background-color: var(--orange);   
padding-block: clamp(0.2rem, 0.0313rem + 0.4688vw, 0.5rem); 
padding-inline: clamp(0.5rem, 0.2188rem + 0.7813vw, 1rem);
text-transform: uppercase;
text-decoration: none;
transition: all .3s ease-in-out;
}

.box-button a:hover{    
background-color: var(--grau);   
}

/* ---------------------- Formular ---------------------- */

#kontakt p,ul,li {
    font-size: 16px;  
    color: var(--grau);
    hyphens: auto;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-lines: 4;
    -ms-hyphens: auto;
    -ms-hyphenate-limit-lines: 4;   
    }
    
    #kontakt .headline1b {
    font-weight: 700;
    text-transform:none;
    color: var(--grau);    
    }
    
 /*--------------- Kontaktformular --------------*/
 #kontakt h5 {
 color: #ffffff;   
 font-weight: 600;
 }

.form-control {
border: 1px solid #717273;
}

.form-control,.form-select {
font-size: 0.9rem;
border: 1px solid #717273;
border-radius: 0px;
background-color: #fafafa;
}

.form-floating > label {
font-size: 0.9rem;
}
.form-check-input[type="checkbox"] {
border-radius: 0px;
} 
.form-check-input {
border: 1px solid #717273;
background-color: #fafafa;
}
.form-check-input:checked {
background-color: #d68800;
border-color: #d68800;
}
#paket1:checked + .form-check-label,
#paket2:checked + .form-check-label,
#paket3:checked + .form-check-label {
color: #d68800;
font-weight: bold;
}

@keyframes paket-flash {
  0%   { background-color: transparent; }
  20%  { background-color: rgba(214, 136, 0, 0.18); }
  80%  { background-color: rgba(214, 136, 0, 0.18); }
  100% { background-color: transparent; }
}
.paket-highlight {
  animation: paket-flash 1.8s ease;
  border-radius: 4px;
  padding: 0.5rem;
} 
.form-check-label a, form p a{
    color: var(--orange);
}
.form-check-label a:hover, form p a:hover {
    color: var(--grau);
}
.submit-button {
color: #ffffff;
background-color: var(--orange);
font-size: 1.01rem;
text-transform: uppercase;
font-weight: 500;
padding: 8px 26px;
border: 0px;
transition: all .3s ease-in-out;
}
.submit-button:hover {
color: #ffffff;
background-color: var(--grau);
}
/*------------------ Footer ------------------*/
	
	#footer-bottom {
		background-color: #2b2e31;
		color: #585c62;
	}
	
#footer-bottom a {
		color: var(--orange)
	}
	
	#footer-bottom a:hover {
		color: #bca480;
	}
	
	#footer-bottom .widget:first-child {
		padding-top: 30px;
	}
	
	#footer-bottom .widget:last-child {
		margin-bottom: 0;
		padding-bottom: 30px;
	}
	
.form-check-label,
.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:invalid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label {
    color: var(--grau);
}

.betreff{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}