:root {
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */
  --color-main: #000000;
  --color-Blau600: #005a8c;
  --color-Grau600: #2d3134;
  --color-Gruen300: #b7f9aa;
  --color-Blau700: #00446e;
  --color-Gruen700: #398357;
  --color-Blau400: #54b3e2;
  --color-Blau100: #e9f5fb;
  --color-Weiß: #ffffff;
  --color-Blau800: #00375b;
  --color-Gruen800: #266446;
  --color-Violett400: #a455c5;
  --color-Violett500: #643179;
  --color-Rot400: #c80538;
  --color-Grau500: #41484c;
  --color-Grau400: #6d767d;
  --color-Grau300: #a1adb5;
  --color-Grau200: #d8dfe3;
  --color-Grau100: #eef0f2;
  --color-Gruen100: #ecfded;
  --color-KfWHellgrau: #f0eee1;
  --color-KfWHellgrau80: #f3f1e7;
  --SPACING_BIG_SPACE_BIG: 6rem;
  --SPACING_BIG_SPACE_LARGE: 4rem;
  --SPACING_BIG_SPACE_MEDIUM: 3rem;
  --SPACING_BIG_SPACE_SMALL: 2rem;
  --SPACING_BIG_SPACE_X_SMALL: 1rem;
  --font-family-Medium: 'KfW-Centro-Sans-Medium', Arial, Helvetica, sans-serif;
  --font-family-Regular: 'KfW-Centro-Sans-Regular', Arial, Helvetica, sans-serif;
  --font-family-Bold: 'KfW-Centro-Sans-Bold', Arial, Helvetica, sans-serif;
}

@font-face {
  font-family: 'KfW-Centro-Sans-Regular';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/KFWCentroSans-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'KfW-Centro-Sans-Medium';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/KFWCentroSans-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'KfW-Centro-Sans-Bold';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/KFWCentroSans-Bold.woff2') format('woff2');
}

.tx-1 {
  font-family: var(--font-family-Regular) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

.tx-1-medium {
  font-family: var(--font-family-Medium) !important;
  font-size: 1.6rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0.5px !important;
}

.hl-1 {
  font-family: var(--font-family-Medium) !important;
}

.hl-3 {
  font-family: var(--font-family-Medium) !important;
}

.hl-4 {
  font-family: var(--font-family-Medium) !important;
}

* {
  box-sizing: border-box;
  height: auto;
  padding: 0;
  margin: 0;
  font-size: 10px;
}

@font-face {
  font-family: 'KfW-Icon-Font';
  font-style: normal;
  font-weight: normal;
  src: local('KfW-Icon-Font');
  src:
    url(../fonts/KFWIconFontCustom.woff2) format('woff2'),
    url(../fonts/KFWIconFontCustom.woff) format('woff');
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  font-size: 10px;
}

.logo img {
  width: auto;
  cursor: default;
}

.kc-logo-wrapper {
  margin-top: var(--SPACING_BIG_SPACE_MEDIUM);
  margin-bottom: var(--SPACING_BIG_SPACE_MEDIUM);
}

#logo-small {
  height: 2.8rem;
  display: none;
}

#logo-large {
  height: 6rem;
  display: block;
}

.kc-header.scrolled #logo-large {
  display: none;
}

.kc-header.scrolled #logo-small {
  display: block;
}

@media (max-width: 960px) {
  #logo-large {
    display: none;
  }

  #logo-small {
    display: block;
  }
  .kc-logo-wrapper {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

#kc-header {
  display: flex;
  align-items: center;
  transition:
    height 0.3s ease,
    background-color 0.3s ease;
  justify-content: center;
  background-color: white;
  border-bottom: var(--color-Gruen300) 1px solid;
  position: sticky;
  top: 0;
  z-index: 1000;
}

#kc-header.scrolled .kc-logo-wrapper {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 960px) {
}
.kc-body {
  display: table;
  height: 100vh;
}

.kc-login {
  width: 100vw;
}
.kc-input {
  font-family: var(--font-family-Regular);
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0.5px;
  margin-bottom: 0;
  margin-top: 0rem;
  color: var(--color-Blau600);
  width: 100% !important;
  padding: 0px !important;
  position: relative;
  display: inline-block;
  border: 1px solid var(--color-Grau600) !important;
}
.kc-input:hover {
  border-color: var(--color-Blau700);
  color: var(--color-Blau700);
  box-shadow: 0 0 0 1px var(--color-Blau700);
}

.kc-input:focus {
  outline: none;
  color: var(--color-Grau600);
  border-color: var(--color-Blau700);
}

body.keyboard-nav .kc-input:focus {
  outline: 2px dashed var(--color-Blau700);
  outline-offset: 2px;
  border-color: var(--color-Blau700);
  box-shadow: none;
}

.kc-input[aria-invalid='true'],
.kc-form-group:has(.kc-input-error-message.is-visible) .kc-input {
  border-color: var(--color-Rot400) !important;
  box-shadow: none !important;
}

.kc-input[aria-invalid='true']:hover,
.kc-form-group:has(.kc-input-error-message.is-visible) .kc-input:hover {
  outline: none !important;
  box-shadow: 0 0 0 1px var(--color-Rot400) !important;
  border-color: var(--color-Rot400) !important;
}

.kc-input[aria-invalid='true']:focus,
.kc-form-group:has(.kc-input-error-message.is-visible) .kc-input:focus {
  outline: none !important;
  border-color: var(--color-Rot400) !important;
}

body.keyboard-nav .kc-input[aria-invalid='true']:focus,
body.keyboard-nav .kc-form-group:has(.kc-input-error-message.is-visible) .kc-input:focus {
  outline: 2px dashed var(--color-Rot400) !important;
  outline-offset: 2px;
  border-color: var(--color-Rot400) !important;
  box-shadow: none !important;
}
.kc-form-group .kc-input[aria-invalid='true'] + .toggle-password:focus-visible,
.kc-form-group:has(.kc-input-error-message.is-visible) .toggle-password:focus-visible,
body.keyboard-nav .kc-form-group .kc-input[aria-invalid='true'] + .toggle-password:focus,
body.keyboard-nav .kc-form-group:has(.kc-input-error-message.is-visible) .toggle-password:focus {
  outline: 2px dashed var(--color-Rot400) !important;
  outline-offset: 2px !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Reset: wenn kein sichtbarer Fehler mehr vorhanden ist, das Feld komplett zurücksetzen */
.kc-form-group:not(:has(.kc-input-error-message.is-visible)) .kc-input,
.kc-form-group .kc-input:not([aria-invalid='true']) {
  border-color: var(--color-Grau600) !important;
  box-shadow: none !important;
  color: var(--color-Blau600) !important;
}

/* Hover / Focus-Verhalten wiederherstellen, wenn kein Fehler aktiv ist */
.kc-form-group:not(:has(.kc-input-error-message.is-visible)) .kc-input:hover,
.kc-form-group .kc-input:not([aria-invalid='true']):hover {
  border-color: var(--color-Blau700) !important;
  color: var(--color-Blau700) !important;
  box-shadow: 0 0 0 1px var(--color-Blau700) !important;
}

.kc-form-group:not(:has(.kc-input-error-message.is-visible)) .kc-input:focus,
.kc-form-group .kc-input:not([aria-invalid='true']):focus {
  border-color: var(--color-Blau700) !important;
  box-shadow: none !important;
  color: var(--color-Grau600) !important;
}

/* Toggle-password: Reset wenn das zugehörige Feld wieder gültig ist */
.kc-form-group:not(:has(.kc-input-error-message.is-visible)) .kc-input + .toggle-password,
.kc-form-group .kc-input:not([aria-invalid='true']) + .toggle-password {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Icon-Farbe zurück auf normal / hover */
.kc-form-group:not(:has(.kc-input-error-message.is-visible)) .kc-input + .toggle-password::before,
.kc-form-group .kc-input:not([aria-invalid='true']) + .toggle-password::before {
  background-color: var(--color-Blau600) !important;
}

.kc-form-group:not(:has(.kc-input-error-message.is-visible)) .kc-input + .toggle-password:hover::before,
.kc-form-group .kc-input:not([aria-invalid='true']) + .toggle-password:hover::before {
  background-color: var(--color-Blau700) !important;
}

/* Hover border for valid state */
.kc-form-group:not(:has(.kc-input-error-message.is-visible)) .kc-input + .toggle-password:hover,
.kc-form-group .kc-input:not([aria-invalid='true']) + .toggle-password:hover {
  border-color: var(--color-Blau700) !important;
}

/* Keep keyboard focus outline behavior (don't remove .toggle-password:focus-visible rule) */
/* Ende Toggle-reset */

/* Restore blue dashed outline for valid inputs when using keyboard navigation */
body.keyboard-nav .kc-form-group:not(:has(.kc-input-error-message.is-visible)) .kc-input:focus,
body.keyboard-nav .kc-form-group .kc-input:not([aria-invalid='true']):focus {
  outline: 2px dashed var(--color-Blau700) !important;
  outline-offset: 2px !important;
  border-color: var(--color-Blau700) !important;
  box-shadow: none !important;
}

/* Restore blue dashed outline for toggle-password when associated input is valid */
body.keyboard-nav .kc-form-group:not(:has(.kc-input-error-message.is-visible)) .kc-input + .toggle-password:focus,
body.keyboard-nav .kc-form-group .kc-input:not([aria-invalid='true']) + .toggle-password:focus,
body.keyboard-nav
  .kc-form-group:not(:has(.kc-input-error-message.is-visible))
  .kc-input
  + .toggle-password:focus-visible,
body.keyboard-nav .kc-form-group .kc-input:not([aria-invalid='true']) + .toggle-password:focus-visible {
  outline: 2px dashed var(--color-Blau700) !important;
  outline-offset: 2px !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Stärkeres Override: Icon bleibt rot bei Error (auch Hover) */
#kc-register-form .kc-form-group:has(.kc-input-error-message.is-visible) .kc-input + .toggle-password::before,
#kc-register-form .kc-form-group .kc-input[aria-invalid='true'] + .toggle-password::before {
  background-color: var(--color-Rot400) !important;
}
#kc-register-form .kc-form-group:has(.kc-input-error-message.is-visible) .kc-input + .toggle-password:hover::before,
#kc-register-form .kc-form-group .kc-input[aria-invalid='true'] + .toggle-password:hover::before {
  background-color: var(--color-Rot400) !important;
}

/* Fokus: rote gestrichelte Outline wenn zugehöriges Feld invalid ist / Error visible */
body.keyboard-nav #kc-register-form .kc-form-group .kc-input[aria-invalid='true'] + .toggle-password:focus,
body.keyboard-nav #kc-register-form .kc-form-group:has(.kc-input-error-message.is-visible) .toggle-password:focus,
#kc-register-form .kc-form-group .kc-input[aria-invalid='true'] + .toggle-password:focus-visible,
#kc-register-form .kc-form-group:has(.kc-input-error-message.is-visible) .toggle-password:focus-visible {
  outline: 2px dashed var(--color-Rot400) !important;
  outline-offset: 2px !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Falls weitere Overrides später noch blau setzen, erhöhe Auswahl durch :where */
:where(#kc-register-form)
  .kc-form-group:has(.kc-input-error-message.is-visible)
  .kc-input
  + .toggle-password:hover::before,
:where(#kc-register-form) .kc-form-group .kc-input[aria-invalid='true'] + .toggle-password:hover::before {
  background-color: var(--color-Rot400) !important;
}
#kc-register-form .kc-form-group:has(.kc-input-error-message.kc-input-error-message--large.is-visible),
form#kc-form-login .kc-form-group:has(.kc-input-error-message.kc-input-error-message--large.is-visible),
form#kc-passwd-update-form .kc-form-group:has(.kc-input-error-message.kc-input-error-message--large.is-visible) {
  margin-bottom: 2rem !important; /* anpassen (z.B. 3.2rem–5rem) */
}

.kc-footer {
  display: table-footer-group;
  width: 100%;
  color: var(--color-Weiß);
  background-color: var(--color-Blau800) !important;
}

.kc-footer-container {
  padding: 3rem 0 4rem 0 !important;
  border-top: var(--color-Gruen300) 1px solid;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 16px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.kc-footer-inner-container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 4rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.kc-footer-inner-container {
  max-width: calc(100% - 80px);
}

.kc-footer-copyright {
  font-family: var(--font-family-Regular);
  margin-right: 40px;
  font-size: 1.4rem;
  line-height: 1.4;
}

.kc-footer-link {
  font-family: var(--font-family-Regular);
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: underline;
  color: var(--color-Weiß);
}

.kc-footer-link-container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1.6rem;
}

.kc-footer-link-container > * {
  margin-right: 4rem;
}

.kc-footer-link-container > *:last-child {
  margin-right: 0;
}

.kc-footer-link:hover {
  text-decoration: none;
}

.kc-footer-link:focus-visible {
  outline: 2px dashed var(--color-Weiß);
  outline-offset: 2px;
  border-radius: 4px;
}

input[type='text'],
input[type='password'] {
  padding: 1rem 1.5rem 1rem 1.5rem !important;
  margin-top: 0.8rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
  border-width: 2px;
  border-color: var(--color-Grau500);

  height: 4.3rem;
}

input[type='password'] {
  padding-right: 3.7rem !important;
}

#kc-register-form input[type='text'],
#kc-register-form input[type='password'] {
  margin-bottom: 0 !important;
}

#kc-register-form input[type='text'],
#kc-register-form input[type='password'] {
  margin-bottom: 0 !important;
}

label.kc-label {
  display: inline-flex;
  margin: 0;
  font-family: var(--font-family-Medium);
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/*#endregion */

/*#region MediaSelectors*/

@media (min-width: 600px) {
  .kc-grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 36px;
  }
}

@media (max-width: 599px) {
  .kc-grid-container {
    grid-column: 1 / 4;
    column-gap: 12px;
  }

  .kc-form-wrapper {
    margin-right: 5.625vw;
    margin-left: 5.625vw;
  }

  .kc-grid-item {
    grid-column-start: 1 !important;
    grid-column-end: 4 !important;
  }

  .kc-grid-item-wide {
    grid-column-start: 1 !important;
    grid-column-end: 4 !important;
  }

  /* 20px side margins on small viewports */
  .kc-form-wrapper {
    margin-left: 20px;
    margin-right: 20px;
  }
  .kc-footer-inner-container {
    max-width: calc(100% - 40px);
  }
}

/* XL (>=1280): max content width 1080px, min side margins 40px, centered */
@media (min-width: 1280px) {
  .kc-form-wrapper {
    width: 100%;
    max-width: min(1080px, calc(100% - 80px));
    margin-right: auto;
    margin-left: auto;
  }
  .kc-footer-inner-container {
    width: 100%;
    max-width: min(1080px, calc(100% - 80px));
  }
}

@media (min-width: 960px) and (max-width: 1279px) {
  .kc-form-wrapper {
    column-gap: 26px;
    margin-right: 7.5vw;
    margin-left: 7.5vw;
  }
  .kc-footer-inner-container {
    max-width: none;
    width: calc(100% - 15vw);
    margin-left: 7.5vw;
    margin-right: 7.5vw;
  }

  .kc-grid-item {
    grid-column-start: 1 !important;
    grid-column-end: 8 !important;
  }

  .kc-grid-item-wide {
    grid-column-start: 1 !important;
    grid-column-end: 13 !important;
  }
}

@media (min-width: 840px) and (max-width: 959px) {
  .kc-form-wrapper {
    column-gap: 22px;
    margin-right: 7.619vw;
    margin-left: 7.619vw;
  }
  .kc-footer-inner-container {
    max-width: none;
    width: calc(100% - 15.238vw);
    margin-left: 7.619vw;
    margin-right: 7.619vw;
  }

  .kc-grid-item {
    grid-column-start: 1 !important;
    grid-column-end: 8 !important;
  }

  .kc-grid-item-wide {
    grid-column-start: 1 !important;
    grid-column-end: 13 !important;
  }
}

@media (min-width: 600px) and (max-width: 839px) {
  .kc-form-wrapper {
    column-gap: 18px;
    margin-right: 7.667vw;
    margin-left: 7.667vw;
  }
  .kc-footer-inner-container {
    max-width: none;
    width: calc(100% - 15.334vw);
    margin-left: 7.667vw;
    margin-right: 7.667vw;
  }

  .kc-grid-item {
    grid-column-start: 1 !important;
    grid-column-end: 8 !important;
  }

  .kc-grid-item-wide {
    grid-column-start: 1 !important;
    grid-column-end: 13 !important;
  }
}

@media (max-width: 1220px) {
  :root {
    --SPACING_BIG_SPACE_LARGE: 3.5rem;
    --SPACING_BIG_SPACE_BIG: 5rem;
  }

  .kc-footer-copyright {
    width: 100%;
  }
}

/*#endregion */

.kc-grid-item {
  grid-column-start: 1;
  grid-column-end: 8;
}

.kc-grid-item-wide {
  grid-column-start: 1;
  grid-column-end: 13 !important;
}

.kc-grid-span-all {
  grid-column: 1 / -1;
}

.kc-form-group {
  margin-bottom: var(--SPACING_BIG_SPACE_MEDIUM);
}

.kc-input-error-message {
  color: var(--color-Rot400);
  display: block;
  position: absolute;
  font-family: 'KfW-Centro-Sans';
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 2rem;
}

.kc-input-error-message::before {
  font-family: 'KfW-Icon-Font';
  font-style: normal;
  display: inline-block;
  margin-right: 5px;
}

/* for empty error messages (optional) we don't display the error icon, otherwise it is displayed as the only thing in the error message */
.kc-input-error-message:empty::before {
  display: none;
}

.link-labeling {
  white-space-collapse: collapse;
  font-family: var(--font-family-Regular) !important;
}

.hintbox {
  background-color: #e9f5fb;
}

.hintbox-icon img {
  width: 2.8rem !important;
}

.hintbox-icon {
  margin-right: 0;
}

.hintbox-text ul.list {
  margin-bottom: 0;
}

/* .BP */
.list li,
li.list-item {
  font-family: var(--font-family-Regular) !important;
  font-size: 1.6rem !important;
  letter-spacing: 0 !important;
}

.list {
  list-style: none;
  padding: 0;
}

.list li {
  margin-left: 2rem;
}

.list li.indent {
  margin-left: 40px;
}

/* TX_1 */
.hintbox-content > span,
.hintbox-text,
.imageRights-text {
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0;
  margin-bottom: 0;
  display: block;
}

.radio-button-container {
  padding-top: 0.8rem;
}

.radio-button-label {
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0;

  margin-left: 4.3rem;
  margin-top: 0.5rem;

  display: inline-flex;
  align-items: center;
}

.radio-button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-bottom: 2rem;
  display: inline-flex;
  align-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  border: 1px solid #000;
  position: absolute;
  border: 1px solid var(--color-Grau600) !important;
}

.radio-button:hover {
  border-color: var(--color-Blau700) !important;
  box-shadow: 0 0 0 1px var(--color-Blau700);
}

.radio-button:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background-color: var(--color-Blau600);
  forced-color-adjust: none;
}

/* Replace generic focus-visible rules for radio buttons with keyboard-only focus styling */
.radio-button:focus {
  outline: none;
  border-color: var(--color-Grau600);
  box-shadow: none;
}

/* show dashed outline only when keyboard navigation is active */
body.keyboard-nav .radio-button:focus,
body.keyboard-nav .radio-button:focus-visible {
  border: 1px solid var(--color-Blau700);
  outline: 2px dashed var(--color-Blau700);
  outline-offset: 2px;
}

/* hover while keyboard-focused */
body.keyboard-nav .radio-button:focus:hover,
body.keyboard-nav .radio-button:focus-visible:hover {
  box-shadow: 0 0 0 1px var(--color-Blau700);
}

/* HL_4 */
.hintbox-title {
  font-family: var(--font-family-Medium);
  font-size: 2rem;
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: var(--SPACING_BIG_SPACE_X_SMALL);
  display: block;
}

.kc-form-buttons {
  margin-bottom: var(--SPACING_BIG_SPACE_LARGE) !important;
}

a.link span {
  font-size: 1.6rem !important;
  line-height: 1.4 !important;
}
a.link:focus-visible {
  outline: 2px dashed var(--color-Blau700) !important;
  outline-offset: 2px !important;
}

.hintbox-wrapper {
  gap: 1.4rem !important;
  display: inline-flex;
}

.kc-input-wrapper {
  position: relative;
}

.kc-form-group:has(.toggle-password) .kc-input[type='password'],
.kc-form-group:has(.toggle-password) .kc-input[type='text'] {
  padding-right: 4.5rem !important; /* 2.4 + 0.6 + 1.5 */
}
input#password,
input#password-confirm,
input#password-new {
  padding-right: 4.5rem !important;
}

/* Eye toggle button */
.toggle-password {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  z-index: 3;
}

.toggle-password::before {
  content: '' !important;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-Blau600);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.toggle-password.icon--reveal::before {
  -webkit-mask: url('../img/Passwort_einblenden.svg') no-repeat center / contain;
  mask: url('../img/Passwort_einblenden.svg') no-repeat center / contain;
}
.toggle-password.icon--hide::before {
  -webkit-mask: url('../img/Passwort_ausblenden.svg') no-repeat center / contain;
  mask: url('../img/Passwort_ausblenden.svg') no-repeat center / contain;
}

.toggle-password:hover {
  border-color: var(--color-Blau700);
}
.toggle-password:hover::before {
  background-color: var(--color-Blau700);
}

/* Error state: eye icon red when the associated input is invalid */
.kc-form-group .kc-input[aria-invalid='true'] + .toggle-password::before {
  background-color: var(--color-Rot400) !important;
}
.kc-form-group .kc-input[aria-invalid='true'] + .toggle-password:hover {
  border-color: var(--color-Rot400) !important;
}
.kc-form-group .kc-input[aria-invalid='true'] + .toggle-password:hover::before {
  background-color: var(--color-Rot400) !important;
}
.kc-form-group:has(.kc-input-error-message.is-visible) .toggle-password::before {
  background-color: var(--color-Rot400) !important;
}
.kc-form-group:has(.kc-input-error-message.is-visible) .toggle-password:hover {
  border-color: var(--color-Rot400) !important;
}
.kc-form-group:has(.kc-input-error-message.is-visible) .toggle-password:hover::before {
  background-color: var(--color-Rot400) !important;
}

.toggle-password:focus-visible {
  outline: 2px dashed var(--color-Blau700);
  outline-offset: 2px;
  border-radius: 4px;
}
/*Keep search toggle styling unaffected */
.toggle-search {
  font-size: 1.6rem;
  line-height: 1.4;
  float: right;
  margin-right: 1.5rem;
  margin-top: -50px;
  position: relative;
  cursor: pointer;
}

.toggle-search:focus-visible {
  outline: 2px dashed var(--color-Blau700);
  outline-offset: 2px;
  border-radius: 4px;
}

.terms-text {
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0;
  margin-left: 1.5rem;
  display: block;
  padding-left: 3rem;
}

.terms-link {
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0;
  margin-bottom: 0;
  text-decoration: underline;
  color: var(--color-Blau600);
}

.terms-link:focus-visible,
.kc-overlay-link:focus-visible,
a.link:focus-visible,
.kc-footer-link:focus-visible {
  outline: 2px dashed var(--color-Weiß);
  outline-offset: 2px;
  border-radius: 4px;
}

::-ms-reveal {
  display: none;
}

#imageRights {
  display: none;
}

#backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9998;
}

#imageRightsModal {
  background-color: white;
  position: fixed;
  top: 144px;
  left: calc(10% + 40px);
  width: calc(80% - 80px);
  z-index: 9999;

  @media (max-width: 960px) {
    top: 8.4rem;
  }

  @media (max-width: 839px) {
    top: 8.4rem;
    left: calc(10% + 20px);
    width: calc(80% - 40px);
  }

  @media (max-width: 599px) {
    left: 0;
    width: 100vw;
  }
}

.imageRights-title {
  padding: 36px 40px 0px;
  font-family: var(--font-family-Medium);
  font-size: 2.8rem;
  line-height: 1.3;
  letter-spacing: -0.5px;
  display: block;
}

.imageRights-text {
  padding: 40px;
}

#imageRightsCloseButton {
  background-color: var(--color-Blau600);
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.text-instructions {
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0;
  display: block;
  margin-bottom: var(--SPACING_BIG_SPACE_SMALL) !important;
}

.kc-checkbox {
  height: 2.8rem;
  width: 2.8rem;
  margin-bottom: -3.5rem;
  vertical-align: middle;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  cursor: pointer;
  border-width: 1px !important;
  border-style: solid;
  border-color: var(--color-Grau600) !important;
  border-radius: 4px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 2.4rem 2.4rem;
}

.kc-checkbox:hover {
  border-color: var(--color-Blau700) !important;
  box-shadow: 0 0 0 1px var(--color-Blau700);
}

.kc-checkbox:focus-visible {
  outline: 2px dashed var(--color-Blau700);
  outline-offset: 2px;
}

.kc-checkbox:checked {
  border-color: var(--color-Blau600) !important;
  background-image: var(--kc-checkbox-checked-icon);
}

.kc-checkbox:checked:hover {
  border-color: var(--color-Blau700);
  box-shadow: 0 0 0 1px var(--color-Blau700);
}

.kc-checkbox.invalid-checkbox:hover,
.terms-checkbox-group-error .kc-checkbox:hover {
  border-color: var(--color-Rot400) !important;
  box-shadow: 0 0 0 1px var(--color-Rot400) !important;
}

.kc-checkbox.invalid-checkbox:checked:hover,
.terms-checkbox-group-error .kc-checkbox:checked:hover {
  border-color: var(--color-Rot400) !important;
  box-shadow: 0 0 0 1px var(--color-Rot400) !important;
}

:root {
  --kc-checkbox-checked-icon: url('../img/haken.svg');
}

.terms-checkbox-group-error {
  border: 2px solid var(--color-Rot400);
  border-radius: 0;
  padding: 1rem;
  margin-bottom: 2rem;
}

.terms-checkbox-group-error .terms-text {
  margin-bottom: 2rem;
}

.dropdown-container {
  font-family: var(--font-family-Regular);
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0.5px;
  margin-top: 0rem;
  color: var(--color-Blau600);
  width: 100% !important;
  padding: 0px !important;
  position: relative;
  display: inline-block;
}

/* Styles for the input field */
.dropdown-input {
  padding-left: 1rem !important;
  padding-right: 4.5rem !important;
  cursor: pointer;
  z-index: 2;
  margin-top: 0.8rem !important;
  margin-bottom: 0 !important;
  display: block;
  width: 100% !important;
}

/* Right-side dropdown arrow indicator */
.dropdown-container::after {
  content: '';
  position: absolute;
  top: calc(50% + 3px);
  right: 1.5rem;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  background-color: var(--color-Blau600);
  -webkit-mask: url('../img/pfeil-runter.svg') no-repeat center / contain;
  mask: url('../img/pfeil-runter.svg') no-repeat center / contain;
  z-index: 3;
  pointer-events: none;
  transition:
    transform 150ms ease,
    background-color 120ms ease;
  will-change: transform;
}

/* Hover color state for the arrow */
.dropdown-container:hover::after {
  background-color: var(--color-Blau700);
}

#kc-register-form .kc-form-group:has(.kc-input-error-message.is-visible) .dropdown-container::after,
#kc-register-form .kc-form-group .dropdown-container:has(.dropdown-input[aria-invalid='true'])::after {
  background-color: var(--color-Rot400) !important;
}

/* Rotate arrow up when dropdown is open (uses :has to detect input state) */
.dropdown-container:has(.dropdown-input[aria-expanded='true'])::after,
.dropdown-container:has(.dropdown-list[aria-expanded='true'])::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Styles for the search icon */
.search-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}

/* Styles for the dropdown list */
.dropdown-list {
  margin-top: 0;
  padding: 15px 1.5rem 0 10px;
  display: none;
  position: absolute;
  top: calc(100% - 10px);
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid var(--color-Grau600);
  border-top: none;
  z-index: 20;
  overflow: hidden;
  height: 300px;
  border-radius: 0 0 4px 4px;
}

.dropdown-list-content {
  height: calc(100% - 1.5rem);
  overflow-y: auto;
  padding-right: 1.5rem;
}

.dropdown-list-content::-webkit-scrollbar {
  width: 1.5rem;
}

.dropdown-list-content::-webkit-scrollbar-track {
  border-radius: 1px;
  border: var(--color-Blau600) solid 1px;
}

.dropdown-list-content::-webkit-scrollbar-thumb {
  border-radius: 1px;
  background: var(--color-Blau600);
  min-height: 40px;
}

/* Styles for the individual list items */
.dropdown-list-item {
  padding: 2px 6px;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 6px;
  border-radius: 4px;
}

.dropdown-list-item:focus-visible {
  outline: 2px dashed var(--color-Blau700);
  outline-offset: -2px;
  background: transparent;
}

/* underline text on hover */
.dropdown-list-item:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dropdown-container:hover .dropdown-list,
.dropdown-container:has(.dropdown-list:hover) .dropdown-list,
.dropdown-container:has(.dropdown-input:hover) .dropdown-list,
.dropdown-list:hover {
  border-color: var(--color-Blau700) !important;
  box-shadow: 0 0 0 1px var(--color-Blau700) !important;
  outline: 1px solid var(--color-Blau700);
  outline-offset: 0;
}

.dropdown-container:hover .kc-input,
.dropdown-container:has(.dropdown-list:hover) .kc-input,
.dropdown-container:has(.dropdown-input:hover) .kc-input {
  border-color: var(--color-Blau700) !important;
  box-shadow: 0 0 0 1px var(--color-Blau700);
  color: var(--color-Blau700);
}

.dropdown-container:has(.dropdown-input[aria-expanded='true']) .dropdown-list,
.dropdown-container:has(.dropdown-list[aria-expanded='true']) .dropdown-list {
  border-color: var(--color-Grau600) !important;
  box-shadow: none !important;
  outline: none !important;
}

.dropdown-container:has(.dropdown-input[aria-expanded='true']) .kc-input,
.dropdown-container:has(.dropdown-list[aria-expanded='true']) .kc-input {
  border-color: var(--color-Grau600) !important;
  box-shadow: none !important;
  color: var(--color-Blau600) !important;
}

.dropdown-container:has(.dropdown-input[aria-expanded='true']):hover .kc-input,
.dropdown-container:has(.dropdown-list[aria-expanded='true']):hover .kc-input,
.dropdown-container:has(.dropdown-input[aria-expanded='true']):hover .dropdown-list,
.dropdown-container:has(.dropdown-list[aria-expanded='true']):hover .dropdown-list {
  box-shadow: none !important;
  outline: none !important;
}

/* Disabled dropdown */
.dropdown-input:disabled {
  color: var(--color-Grau600);
  border-color: var(--color-Grau300) !important;
  background-color: var(--color-Grau100) !important;
  cursor: default !important;
}
.dropdown-container:has(.dropdown-input:disabled)::after {
  background-color: var(--color-Grau300) !important;
}
.dropdown-container:has(.dropdown-input:disabled):hover .kc-input,
.dropdown-container:has(.dropdown-input:disabled):hover .dropdown-list,
.dropdown-container:has(.dropdown-input:disabled) .dropdown-list {
  box-shadow: none !important;
  outline: none !important;
}
.dropdown-input:disabled:hover {
  box-shadow: none !important;
}

.invalid-checkbox {
  border: 1px solid var(--color-Rot400) !important;
}

.starting-letter {
  color: var(--color-Grau500);
  border-bottom: 1px solid;
  margin-left: 0.5rem;
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0;
  margin-bottom: 0;
}

.error {
  color: var(--color-Rot400);
}

/* Show/hide behavior for input errors without layout shift */
.error.kc-input-error-message {
  display: block;
  visibility: hidden;
}
.error.kc-input-error-message.is-visible {
  visibility: visible;
}

#kc-register-form .kc-form-group,
#kc-register-form .form-group {
  position: relative;
  padding-bottom: 3rem;
  margin-bottom: 0;
}

#kc-register-form #formCheckbox {
  padding-bottom: 2rem !important;
}

#kc-register-form .kc-form-group:has(> .kc-form-group),
#kc-register-form .form-group:has(> .form-group) {
  padding-bottom: 0;
}

/* Place error messages right below the field */
#kc-register-form .kc-form-group .kc-input-error-message,
#kc-register-form .form-group .kc-input-error-message {
  position: absolute;
  top: calc(100% - 3rem + 0.2rem);
  left: 0;
  right: 0;
}

.dropdown-container {
  position: relative;
}
#kc-register-form .kc-form-group .dropdown-container .kc-input-error-message {
  position: absolute;
  top: calc(100% + 0.2rem) !important;
  left: 0;
  right: 0;
  margin-top: 0;
  visibility: hidden;
  z-index: 1;
}
#kc-register-form .kc-form-group .dropdown-container .kc-input-error-message.is-visible {
  visibility: visible;
}

#kc-register-form .kc-form-group:has(.kc-input-error-message.is-visible) .dropdown-container .kc-input,
#kc-register-form .kc-form-group .dropdown-container .kc-input[aria-invalid='true'] {
  border-color: var(--color-Rot400) !important;
  box-shadow: none !important;
}

#kc-register-form .kc-form-group .dropdown-container:has(.dropdown-input[aria-expanded='true']) .kc-input,
#kc-register-form .kc-form-group .dropdown-container:has(.dropdown-list[aria-expanded='true']) .kc-input {
  box-shadow: none !important;
}

#kc-register-form
  .kc-form-group:has(.kc-input-error-message.is-visible)
  .dropdown-container:has(.dropdown-input[aria-expanded='true'])
  .kc-input:hover,
#kc-register-form
  .kc-form-group
  .dropdown-container:has(.dropdown-input[aria-expanded='true'])
  .kc-input[aria-invalid='true']:hover {
  box-shadow: none !important;
}

#kc-register-form
  .kc-form-group:has(.kc-input-error-message.is-visible)
  .dropdown-container
  .dropdown-input:hover:not([aria-expanded='true']),
#kc-register-form
  .kc-form-group
  .dropdown-container
  .dropdown-input[aria-invalid='true']:hover:not([aria-expanded='true']) {
  box-shadow: 0 0 0 1px var(--color-Rot400) !important;
}

#kc-register-form .kc-form-group:has(.kc-input-error-message.is-visible) .dropdown-container .dropdown-list,
#kc-register-form .kc-form-group .dropdown-container .kc-input[aria-invalid='true'] ~ .dropdown-list {
  border-color: var(--color-Rot400) !important;
  box-shadow: none !important;
  outline: none !important;
}

#kc-register-form
  .kc-form-group:has(.kc-input-error-message.is-visible)
  .dropdown-container:has(.dropdown-input[aria-expanded='true'])
  .kc-input,
#kc-register-form
  .kc-form-group
  .dropdown-container:has(.dropdown-input[aria-expanded='true'])
  .kc-input[aria-invalid='true'],
#kc-register-form
  .kc-form-group:has(.kc-input-error-message.is-visible)
  .dropdown-container:has(.dropdown-list[aria-expanded='true'])
  .kc-input,
#kc-register-form
  .kc-form-group
  .dropdown-container:has(.dropdown-list[aria-expanded='true'])
  .kc-input[aria-invalid='true'] {
  border-color: var(--color-Rot400) !important;
  border-width: 2px !important;
  box-shadow: none !important;
  outline: none !important;
}

#kc-register-form
  .kc-form-group:has(.kc-input-error-message.is-visible)
  .dropdown-container:has(.dropdown-input[aria-expanded='true'])
  .dropdown-list,
#kc-register-form
  .kc-form-group
  .dropdown-container:has(.dropdown-input[aria-expanded='true'])
  .kc-input[aria-invalid='true']
  ~ .dropdown-list,
#kc-register-form
  .kc-form-group:has(.kc-input-error-message.is-visible)
  .dropdown-container:has(.dropdown-list[aria-expanded='true'])
  .dropdown-list,
#kc-register-form
  .kc-form-group
  .dropdown-container:has(.dropdown-list[aria-expanded='true'])
  .kc-input[aria-invalid='true']
  ~ .dropdown-list {
  border-color: var(--color-Rot400) !important;
  border-width: 2px !important;
  box-shadow: none !important;
  outline: none !important;
}

#kc-register-form .kc-form-group:has(.kc-input-error-message.is-visible) .radio-button {
  border-color: var(--color-Rot400) !important;
  box-shadow: 0 0 0 1px var(--color-Rot400);
}
#kc-register-form .kc-form-group:has(.kc-input-error-message.is-visible) .radio-button:focus-visible {
  outline: 2px dashed var(--color-Rot400) !important;
  outline-offset: 2px;
  border-color: var(--color-Rot400) !important;
}

.kc-checkbox.invalid-checkbox:focus-visible {
  outline: 2px dashed var(--color-Rot400) !important;
  outline-offset: 2px;
}

input:invalid {
  border: 1px solid red;
}

input:valid {
  border: 2px solid var(--color-Grau500);
}

hr.LN_8 {
  margin-top: var(--SPACING_BIG_SPACE_LARGE);
  margin-bottom: var(--SPACING_BIG_SPACE_MEDIUM);
  border: 1px solid var(--color-Grau300);
}

ol#kc-totp-settings {
  list-style: none;
  counter-reset: item;
}

ol#kc-totp-settings > li {
  counter-increment: item;
  margin-bottom: 5px;
}

ol#kc-totp-settings > li:before {
  content: counter(item);
  font-size: 2.8rem;
  font-weight: 500;
  position: absolute;
  margin-top: -9px;
}

.kc-margin-left {
  margin-left: calc(1rem + 1rem);
}

.kc-text-hanging-indent {
  margin-left: calc(1rem + 1rem);
}

@media (max-width: 599px) {
  .kc-text-hanging-indent {
    margin-left: 0;
    text-indent: calc(1rem + 1.4rem);
  }
}

ol#kc-totp-supported-apps {
  list-style-type: decimal !important;
}

#kc-totp-secret-key {
  padding: var(--SPACING_BIG_SPACE_X_SMALL);
  background-color: var(--color-Gruen100);
  margin-top: var(--SPACING_BIG_SPACE_X_SMALL);
  display: flex;
}

.totp-hr {
  margin-bottom: var(--SPACING_BIG_SPACE_MEDIUM);
}

/* Styles for overlay in register form*/
#kc-overlay-furtherInformations,
#kc-overlay-grid {
  max-width: 100vw;
  max-height: 100vh;
  overflow: auto;
  padding: 1rem;
  box-sizing: border-box;
}

.kc-overlay {
  padding: 15px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  background: white;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.kc-no-overlay {
  display: none;
}

.kc-overlay-title {
  color: var(--color-Gruen700);
}

/* .kc-overlay-link {
  font-size: 14px;
} */

.kc-overlay-mt-30 {
  margin-top: 30px;
}

.kc-overlay-table tr td:first-child {
  width: 30%;
  text-align: left;
  vertical-align: top;
}

@media (max-width: 599px) {
  .kc-overlay {
    width: 100%;
  }
}

.hide {
  display: none;
}

.kc-margin-bottom {
  margin-bottom: 1.2rem !important;
}

.kc-margin-top-large {
  margin-top: 4rem;
}

.kc-margin-bottom-large {
  margin-bottom: 4rem !important;
}

.kc-margin-bottom-small {
  margin-bottom: 2rem !important;
}

.kc-margin-top-small {
  margin-top: 2rem !important;
}

.kc-margin-bottom-xs {
  margin-bottom: 1rem !important;
}

.kc-margin-bottom-big {
  margin-bottom: 6rem !important;
}

.kc-margin-bottom-zero {
  margin-bottom: 0rem !important;
}

.kc-margin-button {
  margin-right: 2rem !important;
}

@media (max-width: 920px) {
  .kc-margin-button {
    margin-bottom: 2rem !important;
  }
}

.display-flex {
  display: flex;
}

@media (max-width: 599px) {
  .display-flex {
    display: block;
  }
  .kc-footer-inner-container {
    max-width: calc(100% - 40px);
  }
}

.kc-margin-left-2rem {
  margin-left: 2rem;
}

@media (max-width: 599px) {
  .kc-margin-left-2rem {
    margin-left: 0;
  }
}

.btn-labeling {
  white-space: nowrap !important;
}

.bottom-space-big {
  margin-bottom: 5rem;
}

@media (min-width: 840px) {
  .bottom-space-big {
    margin-bottom: 6rem;
  }
}

.bottom-space-large {
  margin-bottom: 3.5rem;
}

@media (min-width: 840px) {
  .bottom-space-large {
    margin-bottom: 4rem;
  }
}

.bottom-space-medium {
  margin-bottom: 3rem;
}

.bottom-space-small {
  margin-bottom: 2rem;
}

.bottom-space-x-small {
  margin-bottom: 1rem;
}

.top-space-big {
  margin-top: 5rem;
}

@media (min-width: 840px) {
  .top-space-big {
    margin-top: 6rem;
  }
}

/* When a section follows a kc-form-group (which reserves 3rem for absolute error messages),
   reduce the top spacing by that reserved space to avoid double gaps. */
.top-space-big-after-field {
  margin-top: 2rem; /* (5rem - 3rem) */
}

@media (min-width: 840px) {
  .top-space-big-after-field {
    margin-top: 3rem; /* (6rem - 3rem) */
  }
}

.top-space-large {
  margin-top: 3.5rem;
}

@media (min-width: 840px) {
  .top-space-large {
    margin-top: 4rem;
  }
}

.top-space-medium {
  margin-top: 3rem;
}

.top-space-small {
  margin-top: 2rem;
}

.top-space-x-small {
  margin-top: 1rem;
}

.left-space-big {
  margin-left: 5rem;
}

@media (min-width: 840px) {
  .left-space-big {
    margin-left: 6rem;
  }
}

.left-space-large {
  margin-left: 3.5rem;
}

@media (min-width: 840px) {
  .left-space-large {
    margin-left: 4rem;
  }
}

.left-space-medium {
  margin-left: 3rem;
}

.left-space-small {
  margin-left: 2rem;
}

.left-space-x-small {
  margin-left: 1rem;
}

.right-space-big {
  margin-right: 5rem;
}

@media (min-width: 840px) {
  .right-space-big {
    margin-right: 6rem;
  }
}

.right-space-large {
  margin-right: 3.5rem;
}

@media (min-width: 840px) {
  .right-space-large {
    margin-right: 4rem;
  }
}

.right-space-medium {
  margin-right: 3rem;
}

.right-space-small {
  margin-right: 2rem;
}

.right-space-x-small {
  margin-right: 1rem;
}

@media (min-width: 320px) and (max-width: 599px) {
  #kc-register-form {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #kc-register-form.kc-grid-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .kc-footer-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

#kc-totp-settings li > p.hl-3,
#kc-totp-settings li > p.kc-text-hanging-indent {
  margin-top: -0.7rem;
  display: inline-block;
  vertical-align: middle;
}

/* Dein bisheriges Styling blei*/
body.login-update-password-page .hintbox.space-large:not(:has(ul)):has(.kc-error-icon) {
  background-color: white;
  color: var(--color-Rot400);
  display: block;
  font-family: 'KfW-Centro-Sans';
  font-weight: 500;
  margin-bottom: var(--SPACING_BIG_SPACE_SMALL);
}

body.login-update-password-page .hintbox-icon.kc-error-icon {
  width: 22.39px !important;
  height: 16px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.login-update-password-page .hintbox-icon.kc-error-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}


.login-page-error .kc-input-error-message {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 0 0 1rem 0 !important;
}

.login-error-wrapper {
  overflow: visible !important;
}