/* =============================================================================
   GKMB Angebote
   ========================================================================== */

.offer {
  --offer-primary: var(--c-primary, 31, 95, 63);
  --offer-dark: var(--c-neutral-darker, 41, 41, 41);
  --offer-text: var(--c-neutral-dark, 74, 74, 74);
  --offer-line: var(--c-neutral-light, 215, 215, 215);
  --offer-soft: var(--c-neutral-lighter, 240, 240, 240);
  --offer-white: var(--c-neutral-lightest, 255, 255, 255);
  --offer-error: 176, 0, 32;
  --offer-gap: var(--g-gap, 1.75rem);
  --offer-gap-s: var(--g-gap-s, 0.75rem);
  --offer-radius: var(--b-radius-s, 3px);
  display: flex;
  flex-direction: column;
  gap: var(--offer-gap);
}

.offer [hidden] {
  display: none !important;
}

.offer__headline {
  margin: 0;
}

.offer__subline {
  margin: 0.25rem 0 0;
  font-size: var(--f-size-l-2, 120%);
  font-weight: var(--f-weight-l, 300);
}

.offer__app {
  display: flex;
  flex-direction: column;
  gap: var(--offer-gap-s);
}

.offer__empty,
.offer__message {
  padding: 0.75rem 1rem;
  margin: 0;
  background: rgb(var(--offer-soft));
  border-left: 4px solid rgb(var(--offer-primary));
}

.offer__message.-error {
  color: rgb(var(--offer-error));
  border-left-color: rgb(var(--offer-error));
}

/* =============================================================================
   Steps
   ========================================================================== */

.offer__steps {
  display: flex;
  gap: 0.25rem;
  padding: 0;
  margin: 0 0 var(--offer-gap-s);
  overflow-x: auto;
  list-style: none;
}

.offer__step {
  flex: 1 0 auto;
  min-width: 2.75rem;
  margin: 0;
  border-top: 4px solid rgb(var(--offer-line));
}

.offer__step.-done,
.offer__step.-current {
  border-top-color: rgb(var(--offer-primary));
}

.offer__stepbutton {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  padding: 0.6rem 0.25rem 0;
  font: inherit;
  color: rgb(var(--offer-text));
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
}

.offer__stepbutton:hover {
  color: rgb(var(--offer-primary));
  background: none;
}

.offer__stepbutton:disabled,
.offer__stepbutton:disabled:hover {
  color: rgb(var(--offer-text));
  cursor: default;
  opacity: 0.55;
}

.offer__stepbutton:focus-visible,
.offer__option:focus-visible,
.offer__cta:focus-visible,
.offer__back:focus-visible,
.offer__restart:focus-visible {
  outline: 3px solid rgba(var(--offer-primary), 0.45);
  outline-offset: 2px;
}

.offer__stepmarker {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-weight: var(--f-weight-b, 700);
  color: rgb(var(--offer-text));
  background: rgb(var(--offer-white));
  border: 2px solid rgb(var(--offer-line));
  border-radius: 50%;
}

.offer__step.-done .offer__stepmarker {
  color: rgb(var(--offer-primary));
  border-color: rgb(var(--offer-primary));
}

.offer__step.-current .offer__stepmarker {
  color: rgb(var(--offer-white));
  background: rgb(var(--offer-primary));
  border-color: rgb(var(--offer-primary));
}

.offer__steptitle {
  display: none;
  font-size: var(--f-size-s-1, 88%);
  font-weight: var(--f-weight-sb, 600);
}

.offer__step.-current .offer__steptitle {
  display: inline;
}

.offer__kicker {
  margin: 0;
  font-size: var(--f-size-s-1, 88%);
  font-weight: var(--f-weight-b, 700);
  color: rgb(var(--offer-primary));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.offer__question {
  margin: 0 0 var(--offer-gap-s);
  outline: none;
}

/* =============================================================================
   Options
   ========================================================================== */

.offer__options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--offer-gap-s);
}

.offer__option {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
  min-height: 7.5rem;
  padding: 1.25rem;
  font: inherit;
  color: rgb(var(--offer-dark));
  text-align: left;
  cursor: pointer;
  background: rgb(var(--offer-white));
  border: 1px solid rgb(var(--offer-line));
  border-radius: var(--offer-radius);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.offer__option:hover,
.offer__option.-selected {
  color: rgb(var(--offer-white));
  background: rgb(var(--offer-primary));
  border-color: rgb(var(--offer-primary));
}

.offer__option:hover .offer__stock.-low {
  color: inherit;
}

.offer__option:disabled,
.offer__option:disabled:hover {
  color: rgb(var(--offer-dark));
  cursor: not-allowed;
  background: rgb(var(--offer-white));
  border-color: rgb(var(--offer-line));
  opacity: 0.55;
}

.offer__optiontitle {
  font-size: var(--f-size-l-2, 120%);
  font-weight: var(--f-weight-b, 700);
  line-height: 1.3;
}

.offer__optionprice {
  padding-top: 0.5rem;
  margin-top: auto;
  font-size: var(--f-size-l-1, 110%);
  font-weight: var(--f-weight-sb, 600);
}

.offer__stock {
  font-size: var(--f-size-s-1, 88%);
}

.offer__stock.-low {
  font-weight: var(--f-weight-sb, 600);
  color: rgb(var(--offer-error));
}

.offer__option.-selected .offer__stock.-low {
  color: inherit;
}

/* =============================================================================
   Result
   ========================================================================== */

.offer__result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--offer-gap-s);
}

.offer__summary,
.offer__price {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: var(--offer-radius);
}

.offer__summary {
  background: rgb(var(--offer-white));
  border: 1px solid rgb(var(--offer-line));
}

.offer__summary p,
.offer__price p {
  margin: 0;
}

.offer__title {
  font-size: var(--f-size-l-3, 140%);
  font-weight: var(--f-weight-b, 700);
  line-height: 1.25;
  color: rgb(var(--offer-primary));
}

.offer__description {
  white-space: pre-line;
}

.offer__notes {
  padding-left: 1.2rem;
  margin: 0;
}

.offer__price {
  color: rgb(var(--offer-white));
  background: rgb(var(--offer-dark));
}

.offer__lines {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem 1rem;
  margin: 0;
}

.offer__lines dt,
.offer__lines dd {
  padding-bottom: 0.6rem;
  margin: 0;
  border-bottom: 1px solid rgba(var(--offer-white), 0.25);
}

.offer__lines dd {
  font-weight: var(--f-weight-sb, 600);
  text-align: right;
  white-space: nowrap;
}

.offer__total {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.offer__totallabel {
  font-weight: var(--f-weight-sb, 600);
  text-transform: uppercase;
}

.offer__totalvalue {
  font-size: var(--f-size-l-4, 180%);
  font-weight: var(--f-weight-b, 700);
  line-height: 1.1;
}

.offer__hint {
  font-size: var(--f-size-s-1, 88%);
  opacity: 0.85;
}

.offer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 2rem;
  margin-top: auto;
  font: inherit;
  font-weight: var(--f-weight-sb, 600);
  color: rgb(var(--offer-dark));
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  background: rgb(var(--offer-white));
  border: 2px solid rgb(var(--offer-white));
  border-radius: var(--offer-radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.offer__cta:hover {
  color: rgb(var(--offer-white));
  background: transparent;
}

.offer__cta.-dark {
  margin-top: 0;
  color: rgb(var(--offer-white));
  background: rgb(var(--offer-primary));
  border-color: rgb(var(--offer-primary));
}

.offer__cta.-dark:hover {
  color: rgb(var(--offer-primary));
  background: rgb(var(--offer-white));
}

.offer__cta:disabled {
  cursor: progress;
  opacity: 0.6;
}

.offer__nav,
.offer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
}

.offer__back,
.offer__restart {
  padding: 0.6rem 0;
  font: inherit;
  color: rgb(var(--offer-dark));
  cursor: pointer;
  background: none;
  border: 0;
}

.offer__back:hover,
.offer__restart:hover {
  color: rgb(var(--offer-primary));
  background: none;
}

.offer__back {
  font-weight: var(--f-weight-sb, 600);
  text-transform: uppercase;
}

.offer__restart {
  text-decoration: underline;
}

/* =============================================================================
   Form
   ========================================================================== */

.offer__formlayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--offer-gap);
  align-items: start;
}

.offer__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.offer__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.offer__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.offer__sectiontitle {
  padding: 0;
  font-size: var(--f-size-l-2, 120%);
  font-weight: var(--f-weight-sb, 600);
  color: rgb(var(--offer-primary));
}

.offer__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
}

.offer__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.offer__label {
  font-weight: var(--f-weight-sb, 600);
}

.offer__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.85rem;
  margin: 0;
  font: inherit;
  color: rgb(var(--offer-dark));
  background: rgb(var(--offer-white));
  border: 1px solid rgb(var(--offer-line));
  border-radius: var(--offer-radius);
}

.offer__input:focus {
  border-color: rgb(var(--offer-primary));
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--offer-primary), 0.2);
}

.offer__field.-invalid .offer__input {
  border-color: rgb(var(--offer-error));
}

.offer__error {
  font-size: var(--f-size-s-1, 88%);
  color: rgb(var(--offer-error));
}

.offer__check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  cursor: pointer;
}

.offer__check input {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0.15rem 0 0;
  accent-color: rgb(var(--offer-primary));
}

.offer__check.-invalid {
  color: rgb(var(--offer-error));
}

.offer__required {
  margin: 0;
  font-size: var(--f-size-s-1, 88%);
}

.offer__review,
.offer__selectionlist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

.offer__review {
  padding: 1.25rem;
  background: rgb(var(--offer-soft));
  border-radius: var(--offer-radius);
}

.offer__review dt,
.offer__selectionlist dt {
  font-size: var(--f-size-s-1, 88%);
}

.offer__review dd,
.offer__selectionlist dd {
  padding-bottom: 0.5rem;
  margin: 0 0 0.5rem;
  font-weight: var(--f-weight-sb, 600);
  overflow-wrap: anywhere;
  border-bottom: 1px solid rgb(var(--offer-line));
}

.offer__selection {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: rgb(var(--offer-soft));
  border-radius: var(--offer-radius);
}

.offer__selectionlist {
  width: 100%;
}

.offer__done {
  padding: 2rem;
  background: rgb(var(--offer-soft));
  border-radius: var(--offer-radius);
}

.offer__done p {
  white-space: pre-line;
}

/* =============================================================================
   Further persons and upload
   ========================================================================== */

.offer__intro {
  margin: 0;
}

.offer__persons {
  display: flex;
  flex-direction: column;
  gap: var(--offer-gap-s);
  align-items: flex-start;
}

.offer__person {
  display: flex;
  flex-direction: column;
  gap: var(--offer-gap-s);
  align-self: stretch;
  padding: 1rem;
  border: 1px solid rgb(var(--offer-line));
  border-radius: var(--offer-radius);
}

.offer__personhead {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.offer__persontitle {
  margin: 0;
  font-weight: var(--f-weight-sb, 600);
}

.offer__personhead .offer__restart {
  padding: 0;
}

.offer__add {
  padding: 0.6rem 1.25rem;
  font: inherit;
  font-weight: var(--f-weight-sb, 600);
  color: rgb(var(--offer-primary));
  cursor: pointer;
  background: rgb(var(--offer-white));
  border: 1px dashed rgb(var(--offer-primary));
  border-radius: var(--offer-radius);
}

/* The template colours every hovered button, so the own colours are repeated */
.offer__add:hover {
  color: rgb(var(--offer-white));
  background: rgb(var(--offer-primary));
}

.offer__add:focus-visible {
  outline: 3px solid rgba(var(--offer-primary), 0.45);
  outline-offset: 2px;
}

.offer__input.-file {
  height: auto;
  padding: 0.5rem;
}

/* =============================================================================
   Payment
   ========================================================================== */

.offer__methods {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.offer__methods .offer__label {
  margin: 0;
}

.offer__pay {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--offer-gap);
  padding: var(--offer-gap);
  background: rgb(var(--offer-soft));
  border-radius: var(--offer-radius);
}

.offer__paybuttons {
  max-width: 26rem;
}

.offer__paybuttons.-busy {
  pointer-events: none;
  opacity: 0.5;
}

.offer__paystatus {
  margin: 0 0 0.75rem;
}

.offer__paystatus.-error {
  color: rgb(var(--offer-error));
}

/* =============================================================================
   Notices, captcha
   ========================================================================== */

.offer__notice {
  padding: 0.75rem 1rem;
  background: rgb(var(--offer-soft));
  border-radius: var(--offer-radius);
}

.offer__noticetitle {
  margin: 0 0 0.25rem;
  font-weight: var(--f-weight-sb, 600);
}

.offer__noticetext {
  margin: 0;
  font-size: var(--f-size-s-1, 88%);
  white-space: pre-line;
}

.offer__link {
  color: inherit;
  text-decoration: underline;
}

.offer__captcha {
  display: flex;
  flex-direction: column;
  gap: var(--offer-gap-s);
  max-width: 22rem;
}

.offer__captcharow {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.offer__captchaimage {
  display: block;
  height: auto;
  border: 1px solid rgb(var(--offer-line));
  border-radius: var(--offer-radius);
}

/* =============================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 640px) {
  .offer__options {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }

  .offer__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offer__field.-wide {
    grid-column: 1 / -1;
  }

  .offer__steptitle {
    display: inline;
  }

  .offer__steps.-sections .offer__step:not(.-current) {
    flex-grow: 0;
  }

  .offer__steps.-sections .offer__step:not(.-current) .offer__steptitle {
    display: none;
  }
}

@media (min-width: 1024px) {
  .offer__result {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offer__formlayout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}