/* ==========================================================================
   EXT:offers – job offers on "Layout 2026" pages
   --------------------------------------------------------------------------
   Templates: Resources/Private/Layout2026/ (TypoScript condition in
   Configuration/TypoScript/setup.txt). Uses the global CSS of EXT:awsitepackage:
   tokens (theme.css, Brands/*.css), .section / .container (layout.css),
   .btn / .link-arrow, .visually-hidden.
   Design of the detail page: PDF "LeibbrandWeb2026-Formulare" (1360 px artboard).

   01. Settings, page title (list + detail)
   02. Buttons of the PDF (grey, orange)
   03. List: cards
   04. Detail: grid
   05. Detail: description (RTE)
   06. Online application: form
   07. Online application: files
   08. Online application: messages, confirmation
   09. Video
   10. Forms in the lightboxes (Onlinebewerbung, Projektanfrage)
   ========================================================================== */


/* ==========================================================================
   01. SETTINGS, PAGE TITLE
   ========================================================================== */
.offers,
.offer,
.request {
  --offers-grey: #d9d9d7;                                       /* "Datei auswählen", "Zurück zur Übersicht" */
  --offers-error: #b3261e;                                      /* 6.6:1 on white */
  --offers-rule: 1px dotted var(--c-text);                      /* line above the columns */
}

/* Spacing below the header: 52px at 1360 (PDF), a bit less than between content elements */
.offers.section,
.offer.section { --space-top: clamp(2rem, 1rem + 3vw, 3.25rem); }

/* Title of the list (plugin heading) and of the offer: large, light, sans-serif (PDF) */
.offers-title {
  margin-bottom: clamp(1.75rem, 3.5vw, 3.25rem);
  font-family: var(--ff-base);
  font-size: var(--fs-xl);
  font-weight: 300;
  line-height: 1.15;
}


/* ==========================================================================
   02. BUTTONS (PDF): grey with dark border, orange (brand color "secondary")
   ========================================================================== */
.offer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 11rem);
  min-height: var(--tap);
  padding: 0.5em 1.25em;
  border: 1px solid color-mix(in srgb, var(--c-text) 60%, transparent);
  background: var(--offers-grey);
  color: var(--c-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.offer-btn:hover {
  border-color: var(--c-text);
  background: var(--c-text);
  color: var(--c-white);
}
.offer-btn--accent {
  border-color: color-mix(in srgb, var(--c-secondary) 70%, var(--c-text));
  background: var(--c-secondary);
}
.offer-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.offer-btn--accent:disabled:hover {
  border-color: color-mix(in srgb, var(--c-secondary) 70%, var(--c-text));
  background: var(--c-secondary);
  color: var(--c-text);
}


/* ==========================================================================
   03. LIST: CARDS
   Like the teaser boxes of EXT:awsitepackage: 1 column, 2 from 40rem,
   3 from 64rem (same steps as "sizes" in List.html). The title link is
   stretched over the card.
   ========================================================================== */
.offers__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 3.5vw, 3rem) clamp(1rem, 2.2vw, 1.875rem);
  margin: 0;
  padding: 0;
}
@media (min-width: 40rem) {
  .offers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .offers__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Same format for all cards (even rows), also without image */
.offer-card__media {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--c-tint);
}
.offer-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s ease;
}

.offer-card__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.875rem;
  padding-top: clamp(0.875rem, 1.5vw, 1.25rem);
}
/* Not :where(): wins over the global heading size */
.offer-card__title {
  font-size: var(--fs-m);
  line-height: var(--lh-heading);
}
.offer-card__more {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--fs-small);
}

.offer-card__link {
  color: inherit;
  text-decoration: none;
}
.offer-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.offer-card__link:focus-visible { outline: none; }
.offer-card:has(.offer-card__link:focus-visible) {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}
.offer-card:hover .offer-card__image { scale: 1.03; }
.offer-card:hover .offer-card__link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.offer-card:hover .link-arrow::after { translate: 0.25em 0; }

.offers__empty {
  max-width: var(--measure);
  font-size: var(--fs-lead);
  font-weight: 300;
}


/* ==========================================================================
   04. DETAIL: GRID
   Small screens: description → application (+ video) → back button.
   From 64rem: description | application, 615 : 510 px at 1360 (PDF), the
   back button below the description.
   ========================================================================== */
.offer__grid {
  display: grid;
  grid-template-areas: "text" "apply" "back";
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 3.5rem) clamp(2rem, 4.5vw, 5.75rem);
}
.offer__text { grid-area: text; }
.offer__apply { grid-area: apply; }
.offer__back { grid-area: back; }

@media (min-width: 64rem) {
  .offer__grid {
    grid-template-areas: "text apply" "back apply";
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    row-gap: clamp(1.75rem, 2.5vw, 2.25rem);
    align-items: start;
  }
}

/* Dotted line above both columns */
.offer__text,
.application {
  padding-top: clamp(0.75rem, 1.2vw, 1rem);
  border-top: var(--offers-rule);
}

/* "Jetzt online bewerben": only while the form is below the description */
.offer__jump { margin: calc(clamp(1.75rem, 3.5vw, 3.25rem) * -0.5) 0 clamp(1.75rem, 3.5vw, 3.25rem); }
@media (min-width: 64rem) {
  .offer__jump { display: none; }
}

.offer__back-link { min-width: min(100%, 15rem); }


/* ==========================================================================
   05. DETAIL: DESCRIPTION (RTE of the offer)
   Like the PDF: light text, bold lines as headings, no space between the
   paragraphs (the editors use empty paragraphs as spacers), lists with
   small square markers.
   ========================================================================== */
.offer__description {
  max-width: var(--measure);
  font-size: var(--fs-nav);
  font-weight: 300;
  line-height: 1.55;
  overflow-wrap: break-word;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}
.offer__description :is(strong, b) { font-weight: var(--fw-medium); }

/* Real headings (RTE "Überschrift"), look like the bold lines */
.offer__description :is(h2, h3, h4, h5, h6) {
  font-family: var(--ff-base);
  font-size: 1em;
  font-weight: var(--fw-medium);
  line-height: inherit;
}
.offer__description > :is(h2, h3, h4, h5, h6):not(:first-child) { margin-top: 1.5em; }

.offer__description ul {
  padding-inline-start: 0;
  list-style: none;
}
.offer__description ul > li {
  position: relative;
  padding-inline-start: 1.125em;
}
.offer__description ul > li::before {
  content: "";
  position: absolute;
  top: calc(0.5lh - 0.125em);
  left: 0.125em;
  width: 0.25em;
  height: 0.25em;
  background: currentColor;
}
.offer__description ol { padding-inline-start: 1.25em; }

.offer__description a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.offer__description a:hover { text-decoration-thickness: 2px; }


/* ==========================================================================
   06. ONLINE APPLICATION: FORM
   The column is a size container: buttons take the full width when it is
   narrow (smartphones).
   ========================================================================== */
.application { container: application / inline-size; }

.application__title {
  margin-bottom: clamp(0.875rem, 1.5vw, 1.25rem);
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

.application__intro {
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
  font-size: var(--fs-text-small);
  font-weight: 300;
}
.application__intro > * + * { margin-top: 0.75em; }
.application__intro strong { font-weight: var(--fw-medium); }

.application-form {
  display: grid;
  gap: clamp(0.875rem, 1.3vw, 1.125rem);
}

.application-form__field {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}
.application-form__label {
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.3;
}

/* PLZ / Ort: one label (legend) for two fields, PLZ narrow */
.application-form__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.application-form__group > legend {
  margin-bottom: 0.25rem;
  padding: 0;
}
.application-form__row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 1fr) minmax(0, 4fr);
  gap: 0.75rem;
}

/* 16px text in the fields: no zoom on iPhones */
.application-form__input {
  width: 100%;
  min-height: var(--tap);
  padding: 0.5em 0.75em;
  border: 1px solid var(--c-text);
  background: var(--c-white);
  font-size: 1rem;
  font-weight: var(--fw-regular);
}
.application-form__input:focus-visible { outline-offset: 0; }
/* Errors only after the user has left / sent the field */
.application-form__input:user-invalid {
  border-color: var(--offers-error);
  box-shadow: inset 0 0 0 1px var(--offers-error);
}

.application-form__required { font-weight: var(--fw-regular); }

/* Privacy consent and "Abschicken" side by side, the button wraps below when there is no room */
.application-form__submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: clamp(0.5rem, 1.5vw, 1.25rem);
}
.application-form__consent {
  display: flex;
  flex: 1 1 16rem;
  gap: 0.75rem;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.45;
}
.application-form__consent a {
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Checkbox: orange (PDF), white check mark */
.application-form__checkbox {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1em;
  border: 1px solid var(--c-text);
  background: color-mix(in srgb, var(--c-secondary) 22%, var(--c-white));
  appearance: none;
  cursor: pointer;
}
.application-form__checkbox:checked {
  background: var(--c-secondary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%231d1d1b' stroke-width='2.5'/></svg>") center / 85% no-repeat;
}
.application-form__checkbox:user-invalid { box-shadow: 0 0 0 2px var(--offers-error); }

.application-form__note {
  font-size: var(--fs-small);
  font-weight: 300;
}

@container application (max-width: 26rem) {
  .application-form__button { width: 100%; }
}


/* ==========================================================================
   07. ONLINE APPLICATION: FILES
   The file field is visually hidden (still focusable), its label is the
   button "Datei auswählen". List of the chosen files with upload progress.
   ========================================================================== */
.application-form__files {
  display: grid;
  gap: 0.75rem;
  margin-top: clamp(0.25rem, 1vw, 0.75rem);
}
.application-form__file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.application-form__file-text {
  flex: 1 1 16rem;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.45;
}
.application-form__file-text > * + * { margin-top: 0.4em; }
.application-form__file-input:focus-visible + label {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}
.application-form__file-input:disabled + label {
  opacity: 0.55;
  cursor: not-allowed;
}

.application-form__file-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.application-form__file-list:empty { display: none; }

.application-form__file {
  --progress: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  overflow: hidden;
  background: var(--c-tint);
  font-size: var(--fs-small);
  line-height: 1.35;
}
.application-form__file-name {
  overflow: hidden;
  font-weight: var(--fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.application-form__file-meta {
  grid-column: 1;
  color: var(--c-muted);
}
.application-form__file[data-state="error"] .application-form__file-meta { color: var(--offers-error); }
.application-form__file[data-state="done"] .application-form__file-meta::before {
  content: "✓ ";
  color: var(--c-text);
}

.application-form__file-remove {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition);
}
.application-form__file-remove:hover { background: var(--c-line); }

/* Progress bar at the bottom edge while uploading */
.application-form__file-progress {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--c-secondary);
  transform: scaleX(var(--progress));
  transform-origin: left;
  transition: transform 0.2s linear;
}
.application-form__file:not([data-state="uploading"]) .application-form__file-progress { display: none; }


/* ==========================================================================
   08. MESSAGES, CONFIRMATION
   ========================================================================== */
.application-form__error,
.application__messages {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--offers-error);
  background: color-mix(in srgb, var(--offers-error) 7%, var(--c-white));
  color: var(--offers-error);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.application__messages { margin-bottom: 1.25rem; }

.application__success {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-left: 3px solid var(--c-secondary);
  background: var(--c-tint);
  font-size: var(--fs-text-small);
  font-weight: 300;
  line-height: 1.55;
}
.application__success > * + * { margin-top: 0.875em; }
.application__success a {
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* ==========================================================================
   09. VIDEO (YouTube embed of the offer), below the form
   ========================================================================== */
.offer__video {
  margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
  aspect-ratio: 16 / 9;
  background: var(--c-text);
}
.offer__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ==========================================================================
   10. FORMS IN THE LIGHTBOXES (Templates/Lightbox/Form.html)
   Left the choices (groups with checkboxes, dotted lines between them),
   right the contact fields (same parts as the online application above).
   The lightbox is the size container: two columns when it is wide enough,
   on smartphones / narrow windows one below the other.
   ========================================================================== */
.request { container: request / inline-size; }

.request__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}
@container request (min-width: 56rem) {
  .request__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(3rem, 6cqi, 6rem);
    align-items: start;
  }
}

/* ---- Contact column: like the online application ---- */
.request__contact {
  display: grid;
  gap: clamp(0.875rem, 1.3vw, 1.125rem);
  min-width: 0;
  padding-top: clamp(0.875rem, 1.5vw, 1.25rem);
  border-top: var(--offers-rule);
  container: application / inline-size;               /* buttons full width when narrow (section 06) */
}
.request__contact > .application__title { margin-bottom: 0; }

.application-form__textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.45;
}
.application-form__textarea::placeholder { font-weight: 300; }

/* Fields marked by the server (sent in the background) */
.application-form__input[aria-invalid="true"],
.application-form__file-input[aria-invalid="true"] + label {
  border-color: var(--offers-error);
  box-shadow: inset 0 0 0 1px var(--offers-error);
}
.application-form__checkbox[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--offers-error); }

/* Spam protection: not visible, not reachable (LightboxController) */
.request__hp {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Choices: groups, title left of the checkboxes when there is room ---- */
.request__choices { min-width: 0; }
.request__choices-title {
  padding: clamp(0.875rem, 1.5vw, 1.25rem) 0;
  border-top: var(--offers-rule);
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

.request-group {
  display: grid;
  gap: 0.5rem 1.5rem;
  padding-block: clamp(0.75rem, 1.4vw, 1.125rem);
  border-top: var(--offers-rule);
}
@container request (min-width: 34rem) {
  .request-group:not(.request-group--single) { grid-template-columns: minmax(9rem, 2fr) minmax(0, 5fr); }
}
/* Long titles wrap: after "/" (<wbr> from LightboxController), else German hyphenation */
.request-group__title {
  min-width: 0;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  overflow-wrap: break-word;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}
.request-group__list {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
}

/* ---- One choice: checkbox, label, ⓘ (detail page, new window) ---- */
.request-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--fs-nav);
  font-weight: 300;
  line-height: 1.4;
}
.request-group--single .request-choice { font-weight: var(--fw-medium); }

/* Square outline (design), check mark when chosen; centered on the first line */
.request-choice__input {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: calc((1lh - 1rem) / 2);
  border: 1px solid var(--c-text);
  background: var(--c-white);
  appearance: none;
  cursor: pointer;
}
.request-choice__input:checked {
  background: var(--c-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%231d1d1b' stroke-width='3'/></svg>") center / 100% no-repeat;
}
.request-choice__label { cursor: pointer; }

/* Icon 1em next to the label; the link area is larger than the icon (touch) */
.request-choice__info {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  margin: calc((1lh - 1.75rem) / 2) 0 0 -0.375rem;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--c-text);
  font-size: 1.0625em;
  transition: color var(--transition);
}
.request-choice__info:hover { color: var(--c-primary); }

/* ---- Confirmation after sending ---- */
.request__success:focus { outline: none; }


@media (prefers-reduced-motion: reduce) {
  .offer-card__image,
  .application-form__file-progress { transition: none; }
}