/* Grundfarben (anpassbar) */
:root {
  --primary: #009fe3;
  --accent: #e0f0fc;
  --text: #333;
  --bg: #fff;
  --cta: #0071b9;
  --cta-hover: #005f9e;
}

/* Reset & Layout */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  height: 100%;
  background: #182445;


}

#acceptCookies{

    background-color: #182445;
    color: white;

}

.step {
  width: 100vw;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 100px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

.step p{
line-height: 1.5em;
}

/* Container für Logo plus Textebene */
.logo-container {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;   /* zentriert jede Zeile */
  gap: 0.25rem;            /* kleiner Abstand zwischen Bild und Text */
  margin: 0 auto;

  margin-bottom: 0;  
        /* zentriert den ganzen Container */
}

/* Logo-Bild behält sein Seitenverhältnis */
.logo-img {
  width: 100%;
  max-width: 105px;        /* selbe Breite wie das src-Attribut */
  height: auto;
}

/* Text darunter */
.logo-text {
  text-align: center;
  width: 100%;             /* sorgt dafür, dass Text-Container genauso breit ist */
  max-width: 105px; 
  color: #182445;       /* gleich breit wie das Bild */
}

/* Dr. Hampe fett */
.logo-main {
  display: block;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.0;
}

/* & Kollegen normal */
.logo-sub {
  display: block;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: .8;


}

/* Header zentriert seinen Inhalt */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  background: #fff;      /* Header-Hintergrund */
  color: #182445;        /* Schrift dunkel */
  z-index: 998;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10); /* optional leichter Schatten */
    padding: 0.6rem 0 0.5rem 0;
}

.progress {
  position: fixed;
  top: 110px;             /* Passe diesen Wert an die Höhe deines Headers an! */
  left: 0;
  width: 100vw;
  height: 4px;
  background: #eee;
  z-index: 999;
  border-radius: 2px;
}

.progress-bar {
  height: 100%;
  background: #007bff;
  width: 0%;
  transition: width 0.3s ease;
}

.impressumLink{
  text-align: center;
  color: white;
  display: block;
  padding-bottom: 20px;
}






/*Section*/

.step {
  max-width: 600px;        /* oder deine Wunsch-Breite, z.B. 640px */
  margin: 0 auto;          /* zentriert auf großen Displays */
  padding: 0 1rem;         /* immer 1rem Abstand links/rechts */
  box-sizing: border-box;  /* Padding zählt in die Breite mit rein */
  color: white;
  padding-top: 130px;}



/* Optional: Auf sehr großen Screens noch mehr Rand */
@media (min-width: 1200px) {
  .step {
    max-width: 800px;
  }
}

/* Buttons */
button {
  padding: 0.9rem 2rem;
  margin: 1rem 0.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
}

button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

button.cta {
  background: var(--cta);
  color: white;
  font-weight: bold;
}

button.cta:hover {
  background: var(--cta-hover);
}


.step[data-progress="0%"]::before {
  content: "";
  position: absolute;
  inset: 0;
 
  z-index: 0;
}




/*polaroids*/

.polaroid-stack {
  position: relative;
  width: 350px;  /* je nach Größe anpassen */
  height: 330px;
}

.polaroid {
  position: absolute;
  width: 180px;
  /* Rahmen-Padding beibehalten */
  padding: 12px 12px 2px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  border-radius: 8px;
  transition: transform 0.2s;
  
  /* Bild-Container auf 4:3 festsetzen */
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
}

.polaroid img {
  /* Füllt den Container exakt aus */
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* Versetzte Anordnung und Drehung */
.polaroid-1 {
  left: 20px;
  top: 30px;
  transform: rotate(-10deg);
  z-index: 1;
}
.polaroid-2 {
  left: 120px;
  top: 80px;
  transform: rotate(-20deg);
  z-index: 2;
}
.polaroid-3 {
  left: 30px;
  top: 160px;
  transform: rotate(12deg);
  z-index: 3;
}
/*Grid*/

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Immer 3 pro Zeile */
  gap: 16px; /* Abstand zwischen den Bildern */
  max-width: 900px;
  margin: 40px auto;
  padding: 0 1rem;
}

.team-grid img {
  width: 100%;
  height: auto;           /* <— neu: zwingt den Browser, CSS-Ratio zu nutzen */
  aspect-ratio: 1 / 1;           /* quadratisch */
  object-fit: cover;              /* schneidet passend */
  object-position: top;           /* zeigt oberen Bildbereich */
  border-radius: 24px;            /* abgerundete Ecken */
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  display: block;
}

/*Vorteile*/
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 2rem;
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.benefit-item {
  background: #f9f9fb;
  border-radius: 1.5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  padding: 2rem 1.2rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: box-shadow 0.2s;
}
.benefit-item:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.11);
}
.benefit-emoji {
  font-size: 2.6rem;
  margin-bottom: 1rem;
}
.benefit-title {
  font-size: 1.15rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  letter-spacing: 0.03em;
     color: #182445;

}
.benefit-text {
  font-size: 1rem;
  color: #444;
}


@media (max-width: 650px) {
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}
/*SKILLS*/
.skills-heading {
  text-align: center;
  font-size: 1.5rem;
  margin: 2rem 0 1.2rem 0;
  font-weight: 700;
  color: #fff;
}

.skills-grid-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
  max-width: 500px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
}

.skills-grid-item {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  justify-content: flex-start;
  background: transparent;
  border-radius: 1.3rem;
  padding: 1.1rem 0.8rem;
  font-size: 1.09rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  border: 2px solid #fff;
  transition: border-color 0.14s;
  text-align: left;
  min-height: 2.0rem;
  user-select: none;
}

.skills-grid-item input[type="checkbox"] {
  display: none;
}

.custom-checkbox {
  height: 1.3rem;
  width: 1.3rem;
  border-radius: 0.4rem;
  border: 2px solid #fff;
  display: inline-block;
  position: relative;
  margin-right: 0.4rem;
  box-sizing: border-box;
  background: transparent;
}

.skills-grid-item input[type="checkbox"]:checked + .custom-checkbox:after {
  content: "";
  display: block;
  width: 0.62rem;
  height: 0.62rem;
  background: white;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.skills-grid-item span:last-child {
  flex: 1;
  font-size: 1.14rem;
  pointer-events: none;
}

.skills-grid-buttons {
  grid-column: span 2;
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.6rem;
}
.skills-grid-buttons button {
  /* Button-Styling bleibt wie in deinem System */
}

@media (max-width: 600px) {
  .skills-grid-form {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  .skills-grid-buttons {
    grid-column: span 1;
    flex-direction: column;
    gap: 0.8rem;
  }
  .skills-grid-buttons button {
    width: 100%;
  }
}


/*Ausbildung abgeschlosse*/
.jahr-grid-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.3rem;  /* vertikal 1.1rem, horizontal 1.3rem */
  max-width: 500px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  justify-items: center;
}

.jahr-grid-item {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  justify-content: center;   /* NEU: Inhalt mittig */
  background: transparent;
  border-radius: 1.3rem;
  padding: 1.1rem 0.8rem;
  font-size: 1.09rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  border: 2px solid #fff;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
  text-align: center;      /* NEU: Text zentriert */
  min-width: 140px;        /* NEU: Breite festlegen, sorgt für schöne Felder */
  max-width: 200px;
  user-select: none;
  position: relative;
   width: 90%;          /* <--- neu: jede Zelle wird gleich breit */
           

}

.jahr-grid-item input[type="radio"] {
  display: none;
}

.custom-radio {
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid #fff;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  background: transparent;
  margin-right: 0.4rem;
  box-sizing: border-box;
  transition: border 0.18s, background 0.18s;
}

.jahr-grid-item input[type="radio"]:checked + .custom-radio {
  border-color: #182445;
  background: #fff;
}
.jahr-grid-item input[type="radio"]:checked + .custom-radio:after {
  content: "";
  display: block;
  width: 0.62rem;
  height: 0.62rem;
  background: #182445;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.jahr-grid-item input[type="radio"]:checked ~ span:last-child {
  color: #182445;
}

.jahr-grid-item:has(input[type="radio"]:checked) {
  background: #fff;
  border-color: #182445;
  color: #182445;
}

.jahr-grid-item:has(input[type="radio"]:checked) span,
.jahr-grid-item:has(input[type="radio"]:checked) {
  color: #182445;
}

.jahr-grid-item span:last-child {
  flex: 1;
  font-size: 1.14rem;
  pointer-events: none;
}

.jahr-grid-item:hover {
  background: rgba(255,255,255,0.13);
  border-color: #c5d0ee;
}

/* Mobil */
@media (max-width: 600px) {
  .jahr-grid-form {
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem 0.5rem;  
    max-width: 99vw;
  }
  .jahr-grid-item {
    min-width: 100px;
    max-width: 160px;
    padding: 0.7rem 0.4rem;
    font-size: 1.01rem;
  }
}
/*Absenden*/
.form-heading {
  text-align: center;
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.nice-form {
  max-width: 430px;
  margin: 0 auto 2rem auto;
  padding: 0.8rem 0.5rem 1rem 0.5rem;
  border-radius: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.nice-form label, .nice-form fieldset {
  color: #fff;
  font-size: 1.06rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-bottom: 0.18rem;
}

.nice-form input[type="text"],
.nice-form input[type="email"],
.nice-form input[type="tel"] {
  background: #fff;
  border: none;
  border-radius: 0.9rem;
  padding: 0.78rem 1rem;
  font-size: 1.08rem;
  margin-top: 0.13rem;
  color: #182445;
  font-weight: 500;
  outline: none;
  box-shadow: 0 2px 8px rgba(24,36,69,0.04);
  transition: box-shadow 0.15s, border 0.15s;
}

.nice-form input[type="text"]:focus,
.nice-form input[type="email"]:focus,
.nice-form input[type="tel"]:focus {
  border: 2px solid #5bc3c6;
  box-shadow: 0 2px 20px rgba(91,195,198,0.11);
}

.nice-form fieldset {
  border: none;
  border-radius: 0.8rem;
  padding: 0.5rem 0 0.6rem 0;
  background: none;
  margin-bottom: 0.1rem;
}

.nice-form legend {
  font-weight: 600;
  font-size: 1.07rem;
  margin-bottom: 0.45rem;
  color: #fff;
  letter-spacing: 0.01em;
}

/* Zentrierte und weiße Abschnittsüberschriften */
.fieldset-section-label {
  text-align: center;
  color: #fff;
  font-size: 1.04rem;
  font-weight: 700;
  margin: 1.0rem 0 0.18rem 0;
  letter-spacing: 0.03em;
  width: 100%;
}

/* Checkbox-Grid: 2 Spalten, gleichmäßiger Abstand */
.grid-checkbox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  gap: 0.7rem 0.7rem;
  margin-bottom: 0.28rem;
  width: 100%;
}

/* Checkbox-Felder kompakt und zentriert */
.grid-checkbox label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: #fff;
  color: #182445;
  border-radius: 0.7rem;
  padding: 0.45rem 0.3rem;
  font-weight: 600;
  font-size: 1rem;
  min-width: 85px;
  max-width: 130px;
  width: 100%;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(24,36,69,0.03);
  cursor: pointer;
  user-select: none;
  transition: background 0.13s, color 0.13s;
}

.grid-checkbox input[type="checkbox"] {
  accent-color: #182445;
  width: 1.08rem;
  height: 1.08rem;
  margin: 0;
}

.grid-checkbox label:hover {
  background: #e7f1fd;
}

.grid-checkbox label input[type="checkbox"]:checked + span {
  font-weight: 700;
}

/* Datenschutz-Checkbox */
.datenschutz-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.97rem;
  margin-top: 0.18rem;
}
.datenschutz-label input[type="checkbox"] {
  accent-color: #182445;
  width: 1.07rem;
  height: 1.07rem;
}
.datenschutz-label a {
  color: white;
}

/* Button */
.form-button {
  margin-top: 1.1rem;
  padding: 1rem 2rem;
  background: #5bc3c6;
  color: #fff;
  border: none;
  border-radius: 1.1rem;
  font-size: 1.09rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(24,36,69,0.07);
  transition: background 0.13s, transform 0.08s;
}
.form-button:hover {
  background: #319e8a;
  transform: translateY(-2px) scale(1.03);
}

/* Responsiv: auch auf kleinen Handys zwei nebeneinander */
@media (max-width: 600px) {
  .nice-form {
    max-width: 99vw;
    padding: 0.8rem 2vw 1rem 2vw;
  }
  .grid-checkbox {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem 0.6rem;
  }
  .grid-checkbox label {
    font-size: 0.98rem;
    min-width: 75px;
    max-width: 110px;
    padding: 0.41rem 0.15rem;
  }
}



.step[data-progress="0%"] > * {
  position: relative;
  z-index: 1;
}

button.cta:disabled {
  background-color: #ccc; /* grau */
  cursor: not-allowed;
}
button.cta:not(:disabled) {
  background-color: #007bff; /* blau */
  cursor: pointer;
}

/*Cookie Banner*/
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  z-index: 1000;
}

/* Buttons im Banner */
#cookie-banner button {
  margin-left: 1rem;
}

/* Utility-Klasse zum Verstecken */
.hidden {
  display: none !important;
}