.form-select{
  color: #285496;
    padding: 0.5rem;
	height: 2.5em;
}

.textinput {
  width: 100%;
    color: #285496;
  padding: 0.5rem;
  box-sizing: border-box;
  	  height: 2.5em;
}


  .error {
  color: red;
  font-size: 0.9em;
  display: none;
}

input.error-border {
  border: 2px solid red;
}

  .breadcrumb-wrapper
  {
        display: none;
  }
  .hausCanvas
  {
    text-align: center;
  }
  .container {
  text-align: left;
}

#ki-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 420px;
  max-width: 95vw;
  z-index: 99999;
}

#ki-header {
  background: #205F94;
  color: #fff;
  padding: 12px 16px;
  font-weight: bold;
  border-radius: 12px;
  cursor: pointer;
}

#ki-body {
  background: #fff;
  padding: 16px;
  margin-top: 8px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

#openai-question {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  margin-bottom: 12px;
}

#openai-answer {
  max-height: 200px;
  overflow-y: auto;
}

@media (max-width: 768px) {

  #ki-widget {
    width: 95vw;
    right: 2.5vw;
    bottom: 10px;
  }

  #ki-body {
    max-height: 20vh;
    overflow-y: auto;
  }

  #openai-question {
    min-height: 80px;
  }

  #openai-answer {
    max-height: 150px;
    overflow-y: auto;
  }
}

.img-scaled2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fw-bold
{
	  font-family: arial!important;
  color: #285496 !important;
  font-size: 1.3em !important;
		font-weight: bold!important;
}

  .button-row {
  display: flex;
  justify-content: space-between;
}
.uploadForm {
  border: 2px solid #007bff; /* Blau */
  padding: 16px;
  border-radius: 6px;
  background-color: #f9fbff;
}

    .burghauser-form {
      font-family: Arial, sans-serif;
      margin: 1rem;
    }

label{
  color: #285496 !important;
}
    .step {
      margin-bottom: 2rem;
    }

    h3 {
      margin-top: 0;
	  	  font-family: arial!important;
  color: #285496!important;
  font-size: 1.6em !important;
		font-weight: bold!important;
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    @media (min-width: 600px) {
      .form-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

input, select, textarea {
  display: block;         /* sicherstellen, dass Input unter Label */
  width: 100%;
  margin-bottom: 1rem;    /* Abstand zum nächsten Feld */
}
	
.label-white {
  color: white !important; /* überschreibt das andere !important */
  cursor: pointer;
}

  /* Optional: hover-Effekt wie bei Bootstrap-Buttons */
  .label-white:hover {
    background-color: #0b5ed7; /* Bootstrap Primary Hover */
  }



    .button-row {
      display: flex;
      justify-content: space-between;
      margin-top: 2rem;
    }



    .visual-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }

    .visual-grid img {
      width: 100%;
      height: auto;
    }

    .radio-label {
      display: block;
      margin-top: 0.5rem;
    }
	
	
/* Visuell verstecken, aber weiterhin fokussier-/bedienbar für Screenreader */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Beispiel-Button-Stil (falls du kein Framework nutzt) */
.btn.btn-primary{
  display: inline-block;
padding: .6rem 1rem;   /* vorher .6rem 1rem */
  background: #205F94 !important;
  color: #fff;
  border-radius: .375rem; cursor: pointer;
  text-decoration: none;
}

.btn.btn-secondary {
  display: inline-block;
  padding: .6rem 1rem;
  background: #205F94 !important;
  color: #fff;
  border-radius: .375rem; cursor: pointer;
  text-decoration: none;
}


.btn:hover { background:#0b5ed7; }

.img-scaled {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 0.5rem; /* entspricht mb-2 */
  border: none;
  padding: 0;
  box-shadow: none;
  background: transparent;
}



.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 600px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* Overlay */
#popupOverlay {
  display: none; /* unsichtbar standardmäßig */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  z-index: 9998;
}

/* Pop-up Box */
#popupBox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 1rem;
  border-radius: 8px;
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  z-index: 9999;
  text-align: center;
}

/* Bild im Pop-up */
#popupBox img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 4px;
}

/* Schließen-Button */
#popupClose {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: #205F94;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#popupClose:hover {
  background: #0b5ed7;
}

#popupOverlay, #popupBox {
  display: none; /* unsichtbar standardmäßig */
}



/* Overlay 2 */
#popupOverlay_2 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  z-index: 9998;
}

/* Pop-up Box 2 */
#popupBox_2 {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 1rem;
  border-radius: 8px;
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  z-index: 9999;
  text-align: center;
}

/* Bild 2 */
#popupBox_2 img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 4px;
}

/* Close Button 2 */
#popupClose_2 {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: #205F94;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#popupClose_2:hover {
  background: #0b5ed7;
}


/* Overlay 3 */
#popupOverlay_3 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  z-index: 9998;
}

/* Pop-up Box 3 */
#popupBox_3 {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 1rem;
  border-radius: 8px;
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  z-index: 9999;
  text-align: center;
}

/* Bild 3 */
#popupBox_3 img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 4px;
}

/* Close Button 3 */
#popupClose_3 {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: #205F94;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#popupClose_3:hover {
  background: #0b5ed7;
}

/* Overlay 4 */
#popupOverlay_4 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  z-index: 9998;
}

/* Pop-up Box 4 */
#popupBox_4{
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 1rem;
  border-radius: 8px;
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  z-index: 9999;
  text-align: center;
}

/* Bild 4 */
#popupBox_4 img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 4px;
}

/* Close Button 4 */
#popupClose_4 {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: #205F94;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#popupClose_4:hover {
  background: #0b5ed7;
}


/* Overlay 5 */
#popupOverlay_5 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  z-index: 9998;
}

/* Pop-up Box 5 */
#popupBox_5{
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 1rem;
  border-radius: 8px;
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  z-index: 9999;
  text-align: center;
}

/* Bild 5 */
#popupBox_5 img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 4px;
}

/* Close Button 5 */
#popupClose_5 {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: #205F94;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#popupClose_5:hover {
  background: #0b5ed7;
}
  /* Verbrauchstabelle: breite, bedienbare Felder auch auf schmalen Bildschirmen. */
  .verbrauch-table input.form-control {
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
  }

  .verbrauch-table th:last-child,
  .verbrauch-table td.einheit {
    white-space: nowrap;
  }

  .verbrauch-mobile-break { display: none; }

  @media (max-width: 576px) {
    .verbrauch-table {
      width: 100%;
      min-width: 0;
      table-layout: fixed;
      font-size: 0.75rem;
    }

    .verbrauch-table th,
    .verbrauch-table td {
      padding: 0.25rem 0.125rem;
    }

    .verbrauch-table th:nth-child(1),
    .verbrauch-table th:nth-child(2) { width: 31%; }
    .verbrauch-table th:nth-child(3) { width: 24%; }
    .verbrauch-table th:nth-child(4) { width: 14%; }

    .verbrauch-mobile-break { display: initial; }

    #step5v .verbrauch-table input.form-control {
      box-sizing: border-box;
      height: 34px !important;
      min-height: 34px !important;
      max-height: 34px !important;
      margin: 0 !important;
      padding: 0.125rem 0.2rem !important;
      line-height: 1.2 !important;
      font-size: 0.75rem !important;
    }

    #step5v .verbrauch-table input.form-control:focus {
      box-shadow: 0 0 0 1px #86b7fe;
    }

    .verbrauch-table input[type="date"]::-webkit-calendar-picker-indicator {
      width: 14px;
      margin: 0;
      padding: 0;
    }

    .verbrauch-table input[type="number"] {
      appearance: textfield !important;
      -moz-appearance: textfield !important;
    }

    .verbrauch-table input[type="number"]::-webkit-inner-spin-button,
    .verbrauch-table input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }

  /* Schaltflächen und Auswahlkacheln: auf das Kombiformular begrenzt. */
  .step .button-row { gap: 12px; flex-wrap: wrap; }
  .step .btn.btn-primary, .step .btn.btn-secondary {
    min-height: 48px; padding: 12px 24px; border: 2px solid #098de0;
    border-radius: 12px; font-weight: 600; line-height: 1.35;
    transition: background-color .15s, border-color .15s;
  }
  .step .btn.btn-primary { background: #098de0 !important; color: #fff; }
  .step .btn.btn-primary:hover { background: #0878bf !important; border-color: #0878bf; }
  .step .btn.btn-secondary { background: #fff !important; color: #285496; border-color: #098de0 !important; }
  .step .btn.btn-secondary:hover { background: #eaf5fd !important; border-color: #098de0; }
  .step .btn:focus-visible, .step .choice-card:has(input:focus-visible) {
    outline: 3px solid #205f94; outline-offset: 4px;
  }
  .step .choice-card {
    position: relative; display: flex; flex-direction: column;
    justify-content: center; align-items: center; min-height: 76px;
    padding: 16px 12px; border: 2px solid #e0e6ea; border-radius: 12px;
    background: #fff; color: #285496; text-align: center;
    transition: background-color .15s, border-color .15s;
  }
  .step .choice-card:hover { border-color: #87bee2; background: #f7fbfe; }
  .step .choice-card:has(input:checked) {
    background: #eaf4fd; border-color: #098de0;
    box-shadow: inset 0 0 0 1px #098de0;
  }
  .step .choice-card .form-check { padding: 0; margin: 0; min-height: 0; }
  .step .choice-card label {
    margin: 0; color: #285496 !important; font-size: 1rem;
    line-height: 1.4; cursor: pointer; overflow-wrap: anywhere;
  }
  .step .choice-card label::after { content: ''; position: absolute; inset: 0; border-radius: 10px; }
  .step .choice-card input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .step .choice-card img { width: 100%; height: 108px; object-fit: contain; margin: 0 0 12px; }
  .step .choice-grid { row-gap: 14px; }
  .step .choice-column { display: flex; }
  .step .choice-column > .choice-card { width: 100%; }
  .step .form-check.choice-card { margin-bottom: 12px; padding: 16px 12px; }
  #kombiseite-progress {
    max-width: 1140px; margin: 0 auto 28px; padding: 20px 16px;
    border: 1px solid #e0e6ea; border-radius: 16px; background: #eaf5fb;
    color: #285496; font-family: Arial, sans-serif;
  }
  #kombiseite-progress ol { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; }
  #kombiseite-progress li { text-align: center; color: #285496; min-width: 0; font-size: 12px; line-height: 1.3; overflow-wrap: normal; }
  /* WordPress-Themes dürfen keine zusätzliche Listennummerierung erzeugen. */
  #kombiseite-progress > ol {
    list-style: none !important; padding: 0 !important; margin: 0 0 18px !important;
  }
  #kombiseite-progress > ol > li {
    display: flex !important; flex-direction: column; align-items: center;
    position: relative; padding: 0 !important; margin: 0 !important;
    border: 0 !important; background: none !important; box-shadow: none !important;
    list-style: none !important; text-indent: 0 !important;
  }
  #kombiseite-progress > ol > li::before,
  #kombiseite-progress > ol > li::after {
    content: none !important; display: none !important;
  }
  #kombiseite-progress > ol > li::marker { content: '' !important; }
  #kombiseite-progress .progress-name {
    display: block; width: 100%; color: inherit; font-size: 12px;
    line-height: 1.35; word-break: normal !important; overflow-wrap: normal !important;
    hyphens: none;
  }
  #kombiseite-progress .progress-number { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; margin: 0 auto 8px; border: 1px solid #dce3e8; border-radius: 50%; font-size: 15px; background: #fff; }
  #kombiseite-progress li[aria-current='step'] { color: #285496; font-weight: 700; }
  #kombiseite-progress li[aria-current='step'] .progress-number { color: #285496; border: 2px solid #098de0; background: #eaf4fd; }
  #kombiseite-progress li.is-complete .progress-number { color: #fff; border-color: #205f94; background: #205f94; }
  #kombiseite-progress .progress-track { height: 8px; border-radius: 8px; background: #dce7ef; overflow: hidden; }
  #kombiseite-progress .progress-fill { height: 100%; width: 12.5%; background: linear-gradient(90deg, #435cc5, #098de0); transition: width .2s; }
  #kombiseite-progress-status { margin: 12px 0 0; color: #285496 !important; font-size: 14px; font-weight: 700 !important; }
  @media (max-width: 680px) {
    #kombiseite-progress { padding: 16px 10px; }
    #kombiseite-progress .progress-name { display: none; }
    #kombiseite-progress .progress-number { width: 26px; height: 26px; font-size: 13px; margin-bottom: 0; }
    .step .choice-card { padding: 14px 8px; }
    .step .choice-card img { height: 96px; }
  }

  /* App-artige Feldrahmen im Blau des aktiven Fortschrittskreises. */
.step :is(input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select, textarea) {
    border: 2px solid #098de0 !important;
    border-radius: 12px !important;
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
.step :is(input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select, textarea):hover:not(:disabled) {
    border-color: #0878bf !important;
  }
.step :is(input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select, textarea):focus {
    border-color: #098de0 !important;
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgb(9 141 224 / 18%) !important;
  }
  .step :is(input, select, textarea):is(.error-border, .wpforms-error, [aria-invalid="true"]) {
    border-color: #c62828 !important;
  }
  .step :is(input, select, textarea):is(.error-border, .wpforms-error, [aria-invalid="true"]):focus {
    box-shadow: 0 0 0 3px rgb(198 40 40 / 18%) !important;
  }

  /* Dämmungen: kompakte klassische Checkboxen statt Auswahlkacheln. */
  #step6 .insulation-toggle {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 6px 0; margin: 0 0 12px;
    text-align: left;
  }
  #step6 .insulation-toggle input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    position: static; flex: 0 0 24px; float: none;
    width: 24px; height: 24px; margin: 0; padding: 0;
    border: 2px solid #098de0; border-radius: 6px;
    background: #fff; cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
  }
  #step6 .insulation-toggle input[type="checkbox"]:checked {
    background-color: #098de0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4 10-10' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center; background-size: 20px; background-repeat: no-repeat;
  }
  #step6 .insulation-toggle input[type="checkbox"]:hover {
    box-shadow: 0 0 0 3px rgb(9 141 224 / 12%);
  }
  #step6 .insulation-toggle input[type="checkbox"]:focus-visible {
    outline: 2px solid #205f94; outline-offset: 3px;
  }
  #step6 .insulation-toggle label {
    margin: 0; color: #285496 !important; cursor: pointer; line-height: 1.5;
  }
  #step6 .insulation-toggle + .row { margin-bottom: 24px; }

  /* Lange Begriffe nur an der vorgesehenen Wortgrenze umbrechen. */
  .step .choice-card .choice-label-lines {
    display: block; max-width: 100%; word-break: normal; overflow-wrap: normal;
  }
  .step .choice-card .choice-label-lines > span {
    display: block; white-space: nowrap;
  }
  @media (max-width: 380px) {
    .step .choice-card:has(.choice-label-lines) { padding-left: 6px; padding-right: 6px; }
    .step .choice-card .choice-label-lines { font-size: 14px; }
  }

  /* Unterlagenliste: Fachsymbol mit Kamera-Kennzeichnung bei Fotos. */
  #step1 ul.document-checklist {
    list-style: none !important; padding: 0 !important; margin: 16px 0 24px !important;
  }
  #step1 ul.document-checklist > li {
    display: flex; align-items: center; gap: 14px;
    list-style: none !important; padding: 0 !important; margin: 0 0 16px !important;
    min-height: 34px; text-indent: 0 !important;
  }
  #step1 ul.document-checklist > li::before,
  #step1 ul.document-checklist > li::after { content: none !important; display: none !important; }
  #step1 ul.document-checklist > li::marker { content: '' !important; }
  #step1 .document-icon {
    position: relative; display: inline-flex; align-items: center;
    flex: 0 0 34px; width: 34px; height: 34px; color: #285496;
  }
  #step1 .document-subject { display: block; width: 27px; height: 27px; }
  #step1 .document-camera {
    position: absolute; right: -1px; bottom: -1px;
    display: block; width: 18px; height: 18px; padding: 1px;
    border-radius: 4px; background: #eaf5fb; color: #285496;
  }
  #step1 .document-checklist > li > span:last-child { min-width: 0; line-height: 1.5; }

  /* Verbrauchstabelle ohne Linien und farbige Kopfzellen. */
  #step5v .table-responsive,
  #step5v .verbrauch-table,
  #step5v .verbrauch-table :is(thead, tbody, tfoot, tr, th, td) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #step5v .verbrauch-table {
    --bs-table-bg: transparent;
    --bs-table-border-color: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
  }
  #step5v .verbrauch-table th {
    color: #285496 !important;
    font-weight: 700 !important;
  }
  
  /* Einheitliche Textfarbe aus dem Referenz-Kreis; Schriftgewichte bleiben erhalten. */
  .step, #kombiseite-progress { color: #285496; }
  .step :is(p, li, a, input:not([type="submit"]):not([type="button"]), select, textarea) {
    color: #285496;
  }
  .step :is(input, textarea)::placeholder { color: #285496; opacity: .7; }

/* Abgestimmte Schritt-Icons und Icon-Auswahlkarten. */
.step .step-icon-heading{display:flex;align-items:center;justify-content:flex-start;gap:18px;margin:4px 0 28px}
.step .step-icon-heading h2{font:700 26px/1.25 Arial,sans-serif!important;color:#285496!important;margin:0!important;min-width:0;overflow-wrap:anywhere;hyphens:auto}
.step .step-icon-heading>svg{width:58px;height:60px;flex:0 0 58px;color:#285496}
.step .icon-choice-field{width:100%;margin-bottom:28px}
.step .icon-choice-field>label{font-weight:700;font-size:18px;line-height:1.4;margin-bottom:12px}
.step .icon-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.step .icon-choice-grid[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.step .icon-choice-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:550px}
.step .icon-option{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:136px;margin:0;padding:17px 12px;text-align:center;background:#fff;border:2px solid #dce4e9;border-radius:13px;cursor:pointer;font-weight:400;font-size:16px;line-height:1.35}
.step .icon-option:hover{border-color:#098de0}
.step .icon-option:has(input:checked){background:#e8f3ff;border-color:#098de0}
.step .icon-option:has(input:focus-visible){outline:3px solid #285496;outline-offset:3px}
.step .icon-option input{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0}
.step .icon-option svg{width:38px;height:38px;flex-shrink:0;color:#285496}
.step .icon-option svg.wrg-icon{width:91.8333px;height:38px}
.step .icon-option svg.fan-air-icon{width:57px;height:38px}
.step .icon-option .icon-option-title{overflow-wrap:normal;word-break:normal;hyphens:manual}
.step .icon-option .icon-option-subtitle{font-size:12px;line-height:1.4;color:#526b8d}
.step .icon-option .icon-option-tick{display:none;position:absolute;top:8px;right:9px;width:17px;height:17px;line-height:17px;background:#098de0;border-radius:50%;color:#fff!important;font-weight:bold;font-size:11px}
.step .icon-option:has(input:checked) .icon-option-tick{display:block}
.step select.icon-choice-source{display:none!important}
@media(max-width:600px){
 .step .step-icon-heading{gap:12px;margin-bottom:24px}
 .step .step-icon-heading h2{font-size:22px!important}
 .step .step-icon-heading>svg{width:48px;height:50px;flex-basis:48px}
 .step .icon-choice-grid,.step .icon-choice-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .step .icon-option{min-height:142px;padding:16px 9px;font-size:14px}
 .step .icon-choice-field>label{font-size:17px}
 #step6 .row.text-center>.col-6.col-md-6{width:100%}
 #step6 .row.text-center>.col-6.col-md-6>.form-check{padding-left:0}
}

@media(max-width:680px){
 #kombiseite-progress.is-nichtwohngebaeude ol{gap:4px}
 #kombiseite-progress.is-nichtwohngebaeude .progress-number{width:24px;height:24px}
}

/* Angaben für Nichtwohngebäude. */
#stepNichtwohngebaeude .nw-fieldset{border:0;padding:0;margin:0 0 30px;min-width:0}
#stepNichtwohngebaeude .nw-fieldset legend{float:none;width:auto;padding:0;margin:0 0 12px;font-size:19px;line-height:1.4;font-weight:700;color:#285496}
#stepNichtwohngebaeude .nw-help{font-size:13px;line-height:1.55;color:#526b8d;margin:0 0 13px}
#stepNichtwohngebaeude .nw-option{height:100%}
#stepNichtwohngebaeude .nw-option[hidden],#NW_Klima_Details[hidden]{display:none!important}
#stepNichtwohngebaeude .nw-option-description{display:block;font-size:13px;line-height:1.55;color:#526b8d;font-weight:400;max-width:390px}
#stepNichtwohngebaeude .nw-two-columns,#stepNichtwohngebaeude .nw-automation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#stepNichtwohngebaeude .nw-automation-grid .nw-option{min-height:205px;padding:20px 16px}
#stepNichtwohngebaeude .nw-power-field{max-width:500px;margin-bottom:25px}
#stepNichtwohngebaeude .nw-power-field>label{display:block;margin-bottom:8px}
#stepNichtwohngebaeude .nw-power-input{display:flex;align-items:center;gap:12px;margin-bottom:8px}
#stepNichtwohngebaeude .nw-power-input input{min-width:0;min-height:48px;padding:10px 12px;margin:0;flex:1}
#stepNichtwohngebaeude .nw-power-input>span{flex-shrink:0}
@media(max-width:600px){#stepNichtwohngebaeude .nw-fieldset legend{font-size:17px}#stepNichtwohngebaeude .nw-automation-grid{grid-template-columns:1fr}#stepNichtwohngebaeude .nw-automation-grid .nw-option{min-height:175px}#stepNichtwohngebaeude .nw-option-description{font-size:13px}}

#Gebaeudetyp_Wohngebaeude[hidden],#Gebaeudetyp_Nichtwohngebaeude[hidden],#NW_Mischnutzung_Hinweis[hidden]{display:none!important}
#step2 .nw-mixed-use-notice{margin:4px 0 16px;padding:16px;border:1px solid #c9e1f4;border-radius:12px;background:#fff;color:#285496;font-size:14px;line-height:1.55}
#step2 .nw-mixed-use-notice p{margin:0}
#step2 .nw-mixed-use-notice a{display:inline-block;margin-top:8px;color:#285496;text-decoration:underline;text-underline-offset:3px;font-weight:700}

/* Gleicher Abstand zwischen Beschriftung und Feld für Textfelder und Dropdowns. */
.step .form-grid>div>label{display:block;line-height:1.4;margin:0 0 8px}