/* reset */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--Black);
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

img,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
}

:root {
  --BorderInteraction: #666c7b;
  --BorderDecorative: #dbdee7;

  --aida-white: #fff;
  --aida-darkred-shape: #e93531;

  --spacing-s: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-m: 1rem;
  --spacing-l: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 4rem;
  --spacing-xxxl: 6rem;

  --ActionBlue: #196fc3;
  --HoverBlue: #14599c;
  --PressedBlue: #0f4375;

  --ActionRed: #c43734;
  --HoverRed: #9d2c2a;
  --PressedRed: #76211f;

  --ActionGreen: #018000;

  --Background: #e9f6ff;
  --Black: #171717;
  --LightGray: #f6f8fa;
  --LightRed: #fee8dd;
  --LightGreen: #ecf8ea;
  --LightBlue: #e9f6ff;
  --DarkBlue: #004969;
  --DarkRed: #c43734;
  --DarkGreen: #018000;

  --Radius-Rounded: 999px;

  --Spacing-Thin: 0.25rem;
  --Spacing-Smallest-Space: 0.5rem;
  --Spacing-Smaller-Space: 0.75rem;
  --Spacing-Small: 1rem;
  --Spacing-Medium: 1.5rem;
  --Spacing-Inside-Component: 2rem;
  --Spacing-Between-Sections: 6rem;

  --BodyBold: 700;

  --icon-24: 24px;
  --icon-48: 48px;

  --font-size-body-body-2: 1rem;
  --font-line-height-body-body-2: 1.625rem;
  --font-size-caption-caption-2: 0.75rem;
  --font-line-height-caption-caption-2: 1.25rem;
  --font-size-button-link-1: 1.125rem;
  --font-size-button-link-2: 1rem;
  --font-line-height-button-link-2: 1.5rem;

  --global-max-width: 1440px;
}

html {
  height: 100svh;
}

html * {
  font-family: "OpenSans", sans-serif;
  line-height: 1.5rem;
  transition: all 0.3s ease-in-out;
}

h1,
h2,
h3 {
  font-family: "SourceSerifPro", serif;
  margin: 0;
}

h1 {
  font-weight: 400;
  font-size: 3rem;
  line-height: 4rem;
  letter-spacing: -0.06rem;
}

h2 {
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 3.625rem;
  letter-spacing: -0.05rem;
}

h4,
.h4 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
  margin-bottom: var(--spacing-xl);
}

a {
  color: var(--ActionBlue);
  text-decoration: none;
  font-weight: var(--BodyBold);
  font-size: var(--font-size-button-link-2);
  line-height: var(--font-line-height-button-link-2);

  &:hover {
    color: var(--HoverBlue);
  }
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

ul > li {
  padding-left: var(--spacing-s);
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23171717%22%20d%3D%22M9.778%208.674a4%204%200%201%201%204.444%206.652%204%204%200%200%201-4.444-6.652Z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position-y: 1px;
  padding-left: calc(24px + var(--spacing-s));

  &.text--error {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23E93531%22%20d%3D%22M9.778%208.674a4%204%200%201%201%204.444%206.652%204%204%200%200%201-4.444-6.652Z%22%2F%3E%3C%2Fsvg%3E");
  }

  &.text--success {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%2302A200%22%20d%3D%22M16.732%208.296a.999.999%200%200%200-1.42%200l-5.45%205.46-2.13-2.14a1.023%201.023%200%200%200-1.42%201.47l2.84%202.84a1.001%201.001%200%200%200%201.42%200l6.16-6.16a1%201%200%200%200%200-1.47Z%22%2F%3E%3C%2Fsvg%3E");
  }
}

.shadow-l {
  box-shadow: 0 12px 42px -4px #18274b1f, 0 8px 14px -6px #18274b1f;
}

.main {
  padding: 0;
}

.header {
  padding: 0 calc(var(--Spacing-Small) + var(--Spacing-Between-Sections));
  max-width: var(--global-max-width);
  margin: 0 auto;
}

.header:not(:has(.headline)) [class^="alert-"] {
  margin-bottom: var(--spacing-xl);
}

.headline {
  padding: var(--spacing-xl) 0;
}

header.header {
  .header_title {
    padding: var(--spacing-xl) var(--spacing-xxl);
  }
}

.box-limited {
  margin: 0 auto;
  box-sizing: content-box;
  max-width: 592px;
}

#topline {
  color: var(--Black);
  font-weight: 700;

  & a {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.707 5.293a1 1 0 0 1 0 1.414L10.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0Z' fill='%23196fc3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    padding-left: 24px;
  }

  & a {
    color: var(--Black);
  }
}

.text {
  font-size: 0.875rem;
}

.text--success {
  color: var(--ActionGreen);
}

.text--error {
  color: var(--ActionRed);
}

.separator {
  width: 100%;
  border: none;
  border-top: 1px solid var(--BorderDecorative);
  margin: 0;
}

.main_content {
  background-color: var(--Background);
}

#kc-content {
  padding: var(--Spacing-Inside-Component) 0;

  &.email {
    padding-inline: calc(
      var(--Spacing-Small) + var(--Spacing-Between-Sections)
    );
  }
}

#kc-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Medium);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--spacing-xl);
  min-height: 300px;
}

.aida_boat {
  grid-area: 1/1 / auto/6;
  background-image: url("../img//aida_bg_boat.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  aspect-ratio: 3/4;
  margin: auto 0;
}

.aida_login {
  grid-area: 1/1 / auto/7;
  background-image: url("../img//aida_gb_login.jpeg");
  aspect-ratio: 4/3;
}

.aida_login + #kc-content-wrapper {
  grid-area: auto/8 / auto/13;
}

.info {
  .flex {
    gap: var(--spacing-s);
  }

  & .pf-c-alert__icon span {
    margin-bottom: var(--Spacing-Smallest-Space);
  }
}
.info a {
  font-weight: 700;
}

.mt-small {
  margin-top: var(--Spacing-Small);
}

/* Form */

form {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Medium);
}

.flex {
  gap: 1rem;
  flex-wrap: wrap;
  display: flex;

  &.row {
    flex-direction: row;
  }

  & .col {
    flex: 1 1 auto;
  }

  & .align-content-center {
    align-content: center;
  }

  &.align-items-center {
    align-items: center;
  }

  & .break {
    flex-basis: 100%;
  }

  &.gap-2 {
    gap: var(--Spacing-Smallest-Space);
  }

  &.justify-content-center {
    justify-content: center;
  }
}

.block {
  display: block;
}

.floatlabel {
  position: relative;

  & label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: var(--Spacing-Small);
  }

  &:has(.input.filled) label,
  &:has(.input:focus) label {
    top: 0.375rem;
    transform: translateY(0);
    font-size: var(--font-size-caption-caption-2);
    line-height: var(--font-line-height-caption-caption-2);
  }
}

.input {
  --bg-color: var(--aida-white);
  --border-color: var(--BorderInteraction);
  padding-inline: var(--Spacing-Small)
    calc(1.5 * var(--Spacing-Thin) + var(--icon-48));
  border: 2px solid var(--border-color);
  width: 100%;
  background-color: var(--bg-color);
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: calc(100% - 0.125rem);
  font-size: var(--font-size-body-body-2);
  line-height: var(--font-line-height-body-body-2);
  height: 56px;
  padding-block-start: 21px;
}

.input:focus,
.input:hover {
  --border-color: var(--HoverBlue);
  --bg-color: var(--LightGray);
  outline: transparent;
  box-shadow: none;
}

.focus-key:not([type="checkbox"]),
.checkbox:has(.input.focus-key[type="checkbox"]),
a:focus-visible,
.with_icon button:focus-visible {
  --border-color: var(--BorderInteraction);
  outline: 2px solid var(--Black);
  outline-offset: 2px;
}

.checkbox:has(.input.focus-key[type="checkbox"]) {
  --bg-color: var(--LightGray);
}

.input:active {
  --border-color: var(--PressedBlue);
  --bg-color: var(--LightGray);
}

.input[data-checked="true"] {
  --border-color: var(--ActionGreen);
}

.input[aria-invalid="true"] {
  --border-color: var(--ActionRed);
  --bg-color: var(--LightRed);
}

.input:disabled {
  --bg-color: var(--LightGray);
  --border-color: var(--BorderDecorative);
  color: var(--BorderInteraction);

  & ~ label {
    color: var(--BorderInteraction);
  }
}

.with_icon {
  position: relative;

  &:has(.input[data-checked="true"]) {
    &::after {
      content: "";
      background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20fill%3D%27none%27%3E%3Cpath%20fill%3D%27%2302A200%27%20d%3D%27M23%2012c0%206.075-4.925%2011-11%2011S1%2018.075%201%2012%205.925%201%2012%201s11%204.925%2011%2011Z%27%2F%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27m14.992%208.469-4.719%204.73-1.815-1.815a1.099%201.099%200%201%200-1.551%201.55l2.585%202.597a1.1%201.1%200%200%200%201.551%200l5.5-5.5a1.1%201.1%200%200%200-.775-1.882%201.1%201.1%200%200%200-.776.32Z%27%2F%3E%3C%2Fsvg%3E");
    }
  }

  &:has(.input[aria-invalid="true"]) {
    &::after {
      content: "";
      background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20fill%3D%27none%27%3E%3Cpath%20fill%3D%27%23E93531%27%20fill-rule%3D%27evenodd%27%20d%3D%27M23%2012c0%206.075-4.925%2011-11%2011S1%2018.075%201%2012%205.925%201%2012%201s11%204.925%2011%2011Zm-7.293-3.707a1%201%200%200%201%200%201.414L13.414%2012l2.293%202.293a1%201%200%200%201-1.414%201.414L12%2013.414l-2.293%202.293a1%201%200%200%201-1.414-1.414L10.586%2012%208.293%209.707a1%201%200%200%201%201.414-1.414L12%2010.586l2.293-2.293a1%201%200%200%201%201.414%200Z%27%20clip-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E");
    }
  }

  button {
    visibility: hidden;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    cursor: pointer;
    background: none;
    transition: none;

    .icon {
      transition: none;
      display: block;
      width: 24px;
      height: 24px;
      background-color: var(--BorderInteraction);
    }

    .icon-eye {
      -webkit-mask-image: url(../img/icons/24er-eye.svg);
      mask-image: url(../img/icons/24er-eye.svg);
    }

    .icon-eye-slashed {
      -webkit-mask-position: 24px;
      mask-position: 24px;
    }
    &:focus-visible {
      border: 2px solid var(--border-color);
    }
  }

  & .filled ~ button {
    visibility: visible;
  }

  &:has([data-checked]) button {
    right: calc(var(--icon-48) + 1.5 * var(--Spacing-Thin));
  }
}

.with_icon::after {
  position: absolute;
  right: calc(var(--Spacing-Thin) / 2);
  top: 0;
  height: 100%;
  padding-left: var(--icon-48);
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
}

.button_group {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Small);
}
.confirm_delete {
  #kc-content-wrapper {
    gap: var(--Spacing-Smallest-Space);
  }

  svg {
    align-self: center;
  }

  .instruction {
    margin-bottom: var(--Spacing-Medium);
  }
}

.button {
  font-size: 1rem;
  font-weight: 700;
  border: none;
  padding: var(--spacing-m) var(--spacing-l);
  cursor: pointer;
  text-align: center;
  background-color: var(--button-bg-color);

  display: flex;
  height: 52px;
  padding: var(--Spacing-Small) var(--Spacing-Medium);
  justify-content: center;
  align-items: center;
  gap: var(--Spacing-Smallest-Space);
  align-self: stretch;
  border-radius: var(--Radius-Rounded, 999px);
  line-height: calc(52px - 2 * var(--Spacing-Small));
}

.button-primary,
.button-danger {
  --button-bg-color: var(--ActionBlue);
  color: var(--aida-white) !important;

  &:hover {
    --button-bg-color: var(--HoverBlue);
  }

  &:active {
    --button-bg-color: var(--PressedBlue);
  }
}

.button-danger {
  --button-bg-color: var(--ActionRed);

  &:hover {
    --button-bg-color: var(--HoverRed);
  }

  &:active {
    --button-bg-color: var(--PressedRed);
  }
}

.button.outline {
  background: none;
  color: var(--button-bg-color) !important;
  border: 2px solid currentColor;
}

.button[disabled] {
  --button-bg-color: var(--BorderDecorative);
  cursor: inherit;
}

.button-block {
  display: inline-block;
  width: 100%;
}

.button-large {
  min-width: 220px;
}

#aida-password-policy {
  padding: 0 var(--spacing-sm);
}

.legal {
  ul li {
    background: none;
    padding: 0;
    margin-bottom: var(--Spacing-Smallest-Space);
    &:last-child {
      margin-bottom: var(--Spacing-Smaller-Space);
    }
    a {
      display: inline flex;
      gap: var(--Spacing-Smallest-Space);
    }
  }
}

/* Checkboxed */

.checkbox {
  display: grid;
  grid-template-columns: var(--icon-24) auto;
  gap: var(--spacing-s);
  align-items: center;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' fill='none'%3E%3Cpath fill='%23fff' d='M15.79 6.008a.832.832 0 0 0-1.182 0l-6.209 6.217-2.608-2.617a.852.852 0 0 0-1.183 1.225l3.2 3.2a.833.833 0 0 0 1.183 0l6.8-6.8a.834.834 0 0 0 0-1.225Z'/%3E%3C/svg%3E");
  height: 22px;
  width: 22px;
  background-position-x: -24px;
  background-repeat: no-repeat, no-repeat;
  cursor: pointer;
  transition: none;
  padding: 0;
  --bg-color: var(--aida-white);
  background-color: var(--bg-color);
  &:checked {
    background-position: center;
    --bg-color: var(--ActionBlue);
    border-color: var(--bg-color);
    &:hover {
      --bg-color: var(--HoverBlue);
    }
    &:active {
      --bg-color: var(--PressedBlue);
    }
  }
}

/* select */

select.input {
  appearance: none;
  margin: 0;
  width: 100%;
  font-family: inherit;
  cursor: inherit;
  display: grid;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath stroke='%23196FC3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m19 21.5 5 5 5-5'/%3E%3C/svg%3E");
  background-position-x: calc(100% - 0.125rem),
    calc(
      100% - 0.125rem -
        (calc(1.5 * var(--Spacing-Thin) + var(--icon-48) + 12px))
    );
}

select.input[data-checked="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath fill='%23ecf8ea' d='M0 0h48v48H0Z' style='stroke-width:1.20001'/%3E%3Cpath fill='%2302a200' fill-rule='evenodd' d='M18.41 20.91a.833.833 0 0 1 1.18 0L24 25.322l4.41-4.41a.834.834 0 0 1 1.18 1.178l-5 5a.833.833 0 0 1-1.18 0l-5-5a.833.833 0 0 1 0-1.178z' clip-rule='evenodd'/%3E%3C/svg%3E"),
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20fill%3D%27none%27%3E%3Cpath%20fill%3D%27%2302A200%27%20d%3D%27M23%2012c0%206.075-4.925%2011-11%2011S1%2018.075%201%2012%205.925%201%2012%201s11%204.925%2011%2011Z%27%2F%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27m14.992%208.469-4.719%204.73-1.815-1.815a1.099%201.099%200%201%200-1.551%201.55l2.585%202.597a1.1%201.1%200%200%200%201.551%200l5.5-5.5a1.1%201.1%200%200%200-.775-1.882%201.1%201.1%200%200%200-.776.32Z%27%2F%3E%3C%2Fsvg%3E");
  padding-inline-end: calc(
    1.5 * var(--Spacing-Thin) + 2 * var(--icon-48) + 12px
  );
}

select.input[aria-invalid="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath fill='%23FFEAE6' d='M0 0h48v48H0Z' style='stroke-width:1.20001'/%3E%3Cpath fill='%23E93531' fill-rule='evenodd' d='M18.41 20.91a.833.833 0 0 1 1.18 0L24 25.322l4.41-4.41a.834.834 0 0 1 1.18 1.178l-5 5a.833.833 0 0 1-1.18 0l-5-5a.833.833 0 0 1 0-1.178z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Verify email */
.with_subtitle {
  #kc-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
  }

  & [class^="alert-"] {
    padding: 0;
    flex-direction: column;
  }

  .alert__title {
    font-weight: 700;
    padding: 0;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.01em;
  }

  &.email .pf-c-alert__icon span {
    background-image: url("../img/icons/48er-Mail.svg");
    display: block;
    width: var(--icon-48);
    height: var(--icon-48);
  }
}

.email {
  max-width: var(--global-max-width);
  box-sizing: border-box;
}

.instruction span {
  font-weight: 700;
}

.bottom_spacing_xl {
  margin-bottom: var(--spacing-xl);
}

[class^="alert-"] {
  display: flex;
  background-repeat: no-repeat;
  background-position: var(--Spacing-Medium) var(--Spacing-Medium);
  padding: var(--Spacing-Medium);
  padding-inline-start: calc(
    var(--Spacing-Medium) + var(--Spacing-Smaller-Space) + var(--icon-24)
  );
  font-size: 0.875rem;
}

.alert-error {
  background-color: var(--LightRed);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 20.8a8.8 8.8 0 1 0 0-17.6 8.8 8.8 0 0 0 0 17.6ZM23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11Zm-12.1 4.4a1.1 1.1 0 0 1 1.1-1.1h.011a1.1 1.1 0 0 1 0 2.2H12a1.1 1.1 0 0 1-1.1-1.1Zm2.2-8.8a1.1 1.1 0 0 0-2.2 0V12a1.1 1.1 0 0 0 2.2 0V7.6Z' fill='%23E93531'/%3E%3C/svg%3E");

  & > span {
    color: var(--DarkRed);
  }
}

.alert-success {
  background-color: var(--LightGreen);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.992 8.469-4.719 4.73-1.815-1.815a1.099 1.099 0 1 0-1.551 1.551l2.585 2.596a1.1 1.1 0 0 0 1.551 0l5.5-5.5a1.1 1.1 0 1 0-1.551-1.562ZM12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm0 19.8a8.8 8.8 0 1 1 0-17.6 8.8 8.8 0 0 1 0 17.6Z' fill='%2302A200'/%3E%3C/svg%3E");

  & > span {
    color: var(--DarkGreen);
  }
}

.alert-info {
  background-color: var(--LightBlue);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12Zm11-1a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Zm0-4a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H12Z' fill='%23357BBA'/%3E%3C/svg%3E");

  & > span {
    color: var(--DarkBlue);
  }
}

.grid [class^="alert-"] {
  grid-area: 1/7 / auto/13;
}

.footer {
  padding: 3rem 0 0 0;
}

.footer_content {
  padding: var(--Spacing-Smaller-Space) var(--Spacing-Between-Sections);
}

.footer_content_legal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--Spacing-Smaller-Space);

  .legal_impressum {
    display: flex;
    gap: var(--spacing-l);
    justify-content: center;

    a {
      font-weight: 400;
    }
  }

  .copyright {
    text-align: center;
  }
}

.stepper {
  /* see .header */
  max-width: var(--global-max-width);
  margin: 0 auto;
  padding: 0 calc(var(--Spacing-Small) + var(--Spacing-Between-Sections));
  ol {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    counter-reset: step;

    li {
      counter-increment: step;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      --progress-color: var(--BorderDecorative);
      border-bottom: 1px solid var(--progress-color);
      font-size: var(--font-size-caption-caption-2);
      position: relative;
      padding: 0 8px;

      &::before {
        content: counter(step);
        background-image: url("../img/step.svg");
        background-repeat: no-repeat;
        background-position: center center;
        display: flex;
        width: 24px;
        height: 24px;
        line-height: 24px;
        justify-content: center;
        font-weight: 700;
      }
    }
    .done {
      color: var(--ActionGreen);
      --progress-color: currentColor;
      &::before {
        background-image: url("../img/step_done.svg");
        padding-right: 0.375rem;
      }
    }
    .active {
      color: var(--ActionBlue);
      --progress-color: currentColor;
      &::before {
        color: var(--aida-white);
        background-image: url("../img/step_active.svg");
      }
    }
  }
}

/* Responsiveness */

@media (max-width: 810px) {
  h1 {
    font-size: 2rem;
    line-height: 2.625rem;
  }

  .header {
    padding-inline: var(--Spacing-Smaller-Space);
  }

  .headline {
    padding: var(--Spacing-Medium) var(--Spacing-Smaller-Space);
  }

  .stepper {
    padding: 0 var(--Spacing-Smaller-Space);
  }

  #kc-content,
  #kc-content.registration {
    padding: var(--Spacing-Medium);
  }

  #kc-content.email {
    padding-inline: var(--Spacing-Medium) var(--Spacing-Smaller-Space);

    [class^="alert-"] {
      gap: var(--spacing-m);
    }
  }

  #kc-content-wrapper,
  .aida_login + #kc-content-wrapper {
    padding: 0;
    grid-column: 1 / 7;
  }

  .grid {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-m);
  }

  .footer_content {
    padding: var(--spacing-m) 0;
  }

  .footer_content_legal {
    justify-content: center;
    flex-wrap: wrap;
    & > * {
      flex: 1 0 auto;
      justify-content: center;
    }
  }

  .aida_boat:not(.aida_login) {
    display: none;
  }

  .grid [class^="alert-"] {
    grid-column: 1 / 7;
  }

  .info {
    padding: var(--spacing-sm) 0;
  }

  .button {
    width: 100%;
  }

  .settings.flex {
    flex-direction: column;
  }

  .options {
    text-align: center;
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }

  .order-3 {
    order: 3;
  }

  .order-4 {
    order: 4;
  }

  [class^="alert-"] {
    & > span {
      padding-left: var(--spacing-sm);
    }
  }

  .header:not(:has(.headline)) [class^="alert-"] {
    margin-bottom: var(--spacing-sm);
  }
}

/* should remove the eye icon under MS Edge for Windows */
::-ms-reveal {
  display: none;
}

#kc-registration span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Spacing-Smallest-Space);
  line-height: var(--font-line-height-body-body-2);
  & a {
    font-size: var(--font-size-body-body-2);
    line-height: var(--font-line-height-body-body-2);
  }
}

#reset-login svg {
  vertical-align: bottom;
}

.p-relative {
  position: relative;
}

p.instruction ~ #kc-form-buttons {
  margin-top: var(--Spacing-Medium);

  .button {
    max-width: 378px;
  }
}