@charset "utf-8";

.container { max-width: 800px }

linie4 { display:block; top:0px; width:100%; height:6px; background:#EF4D39; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg);transform: skew(-20deg) }

label { font-size: 16px; font-weight:normal; font-family: 'Open Sans', sans-serif; color: #333 }
label[for="date"] { font-size: 18px; font-weight:bold; font-family: 'Open Sans', sans-serif; color: #AC4643; margin-bottom: 5px; display: block }

input[type="date"] { width: 100%; padding: 15px; margin: 10px 0; border-radius: 8px; border: 2px solid #AC4643; background-color: #fff3f2; color: #AC4643;
            font-size: 16px; font-weight:normal; font-family: 'Open Sans', sans-serif; transition: border-color 0.3s ease, background-color 0.3s ease }
input[type="date"]:focus { border-color:#D35A56; background-color:#F5C0BE }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea, select { width: 100%; padding: 10px; margin: 10px 0;
            border-radius: 4px; border: 1px solid #ccc; color: #AC4643; box-sizing: border-box; font-size: 16px; font-weight:normal; font-family: 'Open Sans', sans-serif }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="date"]:focus, textarea:focus, select:focus { border-color: #AC4643; outline: none }

select { width: 100%; padding: 10px; margin: 10px 0; border-radius: 4px; border: 1px solid #ccc; background-color: #eeeeee; color: #AC4643 }

input[type="submit"] { background-color: #D35A56; color: white; padding: 10px 15px; border: none; border-radius: 8px; cursor: pointer; font-size: 18px; font-weight:bold; font-family: 'Open Sans', sans-serif }
input[type="submit"]:hover { background-color: #EC403B }

.captcha { margin: 15px 0; width: 40% }
.datenschutz { margin: 25px 0 }

/* Neue CSS-Regeln für die rote Checkbox */
input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; top:6px; width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 4px; cursor: pointer; background-color: #fff;
            position: relative; transition: all 0.3s ease }
input[type="checkbox"]:checked { background-color: #D35A56; /* Rote Hintergrundfarbe für angekreuzte Checkbox */border-color: #D35A56 }
input[type="checkbox"]:checked::before { content: "✓"; /* Hakenzeichen */ position: absolute; top: -1px; left: 3px; font-size: 14px; color: white; /* Weißer Haken */}
input[type="checkbox"]:hover { border-color: #D35A56 }

.name-container { display:flex; gap:10px }
.name-container input { width: 100% }
.name-container .first_name { flex: 1 1 50% }
.name-container .last_name { flex: 1 1 50% }

.location-container { display: flex; gap: 10px }
.location-container input { width: 100% }
.location-container .plz { flex: 1 1 20% }
.location-container .ort { flex: 1 1 80% }

 #formMessage { font-size: 18px; font-weight:bold; font-family: 'Open Sans', sans-serif }

/* Container Cars eff mit 100% Breite und Höhe */
.container2 {  position: relative; width: 100%; height:60px; /* volle Höhe des Bildschirms */ overflow: hidden }
.car { position: absolute; width: 1vw; /* 2% der Viewport-Breite */ height: 0.3vw; background-color: #EF4D39; border-radius: 1vw;}

/* Tablet Hochformat (Portrait) */
@media only screen
  and (min-width: 761px)
  and (max-width: 990px) 
{  
.container { max-width: 750px }

linie4 { display:block; top:0px; width:95%; height:6px; background:#EF4D39; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg);transform: skew(-20deg) }

label { font-size: 16px; font-weight:normal; font-family: 'Open Sans', sans-serif; color: #333 }
label[for="date"] { font-size: 18px; font-weight:bold; font-family: 'Open Sans', sans-serif; color: #AC4643; margin-bottom: 5px; display: block }

input[type="date"] { width: 100%; padding: 15px; margin: 10px 0; border-radius: 8px; border: 2px solid #AC4643; background-color: #fff3f2; color: #AC4643;
            font-size: 16px; font-weight:normal; font-family: 'Open Sans', sans-serif; transition: border-color 0.3s ease, background-color 0.3s ease }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea, select { width: 100%; padding: 10px; margin: 10px 0;
            border-radius: 4px; border: 1px solid #ccc; color: #AC4643; box-sizing: border-box; font-size: 16px; font-weight:normal; font-family: 'Open Sans', sans-serif }

input[type="submit"] { background-color: #D35A56; color: white; padding: 10px 15px; border: none; border-radius: 8px; cursor: pointer; font-size: 18px; font-weight:bold; font-family: 'Open Sans', sans-serif }

#formMessage { font-size: 18px; font-weight:bold; font-family: 'Open Sans', sans-serif } 
.captcha { margin: 15px 0; width: 60% }
    
.car { position: absolute; width: 2vw; /* 2% der Viewport-Breite */ height: 0.6vw; background-color: #EF4D39; border-radius: 1vw;}  
  }

/* Responsive Anpassungen mit Media Queries */
@media only screen
  and (min-width: 280px)
  and (max-width: 760px) 
{ 
.container { max-width: 100% }

linie4 { display:block; top:0px; width:100%; height:6px; background:#EF4D39; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg);transform: skew(-20deg) }

label { font-size: 14px; font-weight:normal; font-family: 'Open Sans', sans-serif; color: #333 }
label[for="date"] { font-size: 16px; font-weight:bold; font-family: 'Open Sans', sans-serif; color: #AC4643; margin-bottom: 5px; display: block }

input[type="date"] { width: 100%; padding: 15px; margin: 10px 0; border-radius: 8px; border: 2px solid #AC4643; background-color: #fff3f2; color: #AC4643;
            font-size: 14px; font-weight:normal; font-family: 'Open Sans', sans-serif; transition: border-color 0.3s ease, background-color 0.3s ease }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea, select { width: 100%; padding: 10px; margin: 10px 0;
            border-radius: 4px; border: 1px solid #ccc; color: #AC4643; box-sizing: border-box; font-size: 14px; font-weight:normal; font-family: 'Open Sans', sans-serif }

input[type="submit"] { background-color: #D35A56; color: white; padding: 10px 15px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight:bold; font-family: 'Open Sans', sans-serif }

#formMessage { font-size: 16px; font-weight:bold; font-family: 'Open Sans', sans-serif } 
.captcha { margin: 15px 0; width: 60% }
    
.name-container { display:flex; gap:10px; flex-wrap: wrap; /* Falls notwendig, dass es bei kleinen Bildschirmen umbricht */ }
.name-container input { width: 100% }
.name-container .first_name { flex: 1 1 100% }
.name-container .last_name { flex: 1 1 100% }

.location-container { display: flex; gap: 10px }
.location-container input { width: 100% }
.location-container .plz { flex: 1 1 20% }
.location-container .ort { flex: 1 1 80% }
    
.car { position: absolute; width: 3vw; /* 2% der Viewport-Breite */ height: 1vw; background-color: #EF4D39; border-radius: 1vw;}  
       
}