@charset "utf-8";

/* ============================================================
   EDEKA Dörflinger — Baustellenseite
   Design-Tokens aus dem Corporate Design 2026 (Pantone 110 C /
   Pantone 418 C). Konsolidiert aus dem Design-System-Export.
   ============================================================ */

/* ── Schriften ─────────────────────────────────────────────── */

@font-face {
  font-family: "Fira Sans Condensed";
  src: url("../assets/fonts/fira-sans-condensed-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Geliefert wurde SemiBold (600), nicht Bold (700). Der Bereich
   600–700 sorgt dafür, dass die 700er-Angaben aus dem Design auf
   diese Datei fallen, statt vom Browser künstlich fett gerechnet
   zu werden. Kommt später ein echter 700er dazu, bekommt er eine
   eigene Regel und dieser Bereich wird auf 600 zurückgesetzt. */
@font-face {
  font-family: "Fira Sans Condensed";
  src: url("../assets/fonts/fira-sans-condensed-600.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Veneer";
  src: url("../assets/fonts/veneer-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marke */
  --brand-yellow: #dbbd00;
  --brand-green: #484f43;

  /* Gelb-Rampe */
  --yellow-100: #fbf6db;
  --yellow-600: #b79e00;
  --yellow-700: #8c7900;

  /* Grün-/Neutral-Rampe */
  --green-050: #f4f5f3;
  --green-100: #e7e9e5;
  --green-200: #cbd0c7;
  --green-300: #a6ada1;
  --green-500: #5d6559;
  --green-700: #373c33;
  --green-800: #262a23;
  --green-900: #171a15;
  --paper: #fff;

  /* Semantisch */
  --surface-subtle: var(--green-050);
  --text-heading: var(--brand-green);
  --text-body: var(--green-700);
  --text-muted: var(--green-500);
  --text-link: var(--brand-green);

  /* Typografie */
  --font-body: "Fira Sans Condensed", "Fira Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Veneer", "Fira Sans Condensed", Impact, sans-serif;

  /* Maße */
  --wrap: 1240px;
  --gutter: 40px;
  --pad-block: 56px;

  --focus-ring: 0 0 0 3px var(--brand-yellow);
  --focus-ring-inverse: 0 0 0 3px var(--paper);
}

/* ── Reset / Grundlagen ─────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

/* Abstände kommen aus den Layout-Regeln (gap, margin-bottom),
   nicht aus dem Browser-Default. Ohne diesen Reset kollabieren
   die 1em-Margins der <p> aus ihren Containern heraus — sichtbar
   z. B. als weißer Spalt über und unter dem grünen Hinweisband. */
p {
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--text-link);
}

a:hover {
  color: var(--yellow-700);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

/* Auf hellem und auf gelbem Grund: dunkler Auszug mit gelber
   Schrift. Auf den dunkelgrünen Bändern wäre das unsichtbar,
   dort wird die Markierung umgedreht. */
::selection {
  background: var(--green-800);
  color: var(--brand-yellow);
}

.band--green ::selection,
.band--deep ::selection {
  background: var(--brand-yellow);
  color: var(--brand-green);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brand-green);
  color: var(--paper);
  padding: 12px 20px;
  text-decoration: none;
  font-weight: 700;
}

.skip-link:focus {
  left: 0;
  color: var(--paper);
}

/* ── Icons (Mask-Technik, Farbe über background) ─────────────── */

.icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.icon--rocket {
  -webkit-mask-image: url("../assets/icons/rocket.svg");
  mask-image: url("../assets/icons/rocket.svg");
}
.icon--cap {
  -webkit-mask-image: url("../assets/icons/graduation-cap.svg");
  mask-image: url("../assets/icons/graduation-cap.svg");
}
.icon--cart {
  -webkit-mask-image: url("../assets/icons/shopping-cart.svg");
  mask-image: url("../assets/icons/shopping-cart.svg");
}
.icon--tag {
  -webkit-mask-image: url("../assets/icons/tag.svg");
  mask-image: url("../assets/icons/tag.svg");
}
.icon--arrow {
  -webkit-mask-image: url("../assets/icons/arrow-right.svg");
  mask-image: url("../assets/icons/arrow-right.svg");
}
.icon--heart-outline {
  -webkit-mask-image: url("../assets/icons/heart.svg");
  mask-image: url("../assets/icons/heart.svg");
}
.icon--pin {
  -webkit-mask-image: url("../assets/icons/map-pin.svg");
  mask-image: url("../assets/icons/map-pin.svg");
}
.icon--instagram {
  -webkit-mask-image: url("../assets/icons/instagram.svg");
  mask-image: url("../assets/icons/instagram.svg");
}
.icon--facebook {
  -webkit-mask-image: url("../assets/icons/facebook.svg");
  mask-image: url("../assets/icons/facebook.svg");
}
.icon--youtube {
  -webkit-mask-image: url("../assets/icons/youtube.svg");
  mask-image: url("../assets/icons/youtube.svg");
}

/* Das Herz ist im Original eine gelbe PNG. Als Maske eingebunden
   nimmt es die Farbe des Kontexts an — sonst wäre es in der gelben
   Sektion gelb auf gelb und damit unsichtbar. */
.icon--heart {
  -webkit-mask-image: url("../assets/img/herz-mask.png");
  mask-image: url("../assets/img/herz-mask.png");
  aspect-ratio: 80 / 62;
  height: auto;
}

/* ── Layout-Bausteine ───────────────────────────────────────── */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--pad-block) var(--gutter);
}

.band--yellow {
  background: var(--brand-yellow);
}
.band--green {
  background: var(--brand-green);
}

/* Die Hinweisleiste klebt oben und bekommt im Scrollverlauf das
   gleichfarbige Karriere-Band unter sich geschoben. Eine Stufe
   heller hält die Kante sichtbar, ohne aus der Palette zu fallen. */
.topbar .band--green {
  background: var(--green-500);
}
.band--deep {
  background: var(--green-700);
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.eyebrow--on-yellow {
  color: var(--green-700);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 48px;
  line-height: 1.02;
  color: var(--brand-green);
  margin: 0 0 20px;
}

.display--sm {
  font-size: 36px;
  line-height: 1.06;
  margin-bottom: 24px;
}

.display--tight {
  margin-bottom: 16px;
}

.display--on-green {
  color: var(--paper);
  margin: 0;
}

.prose {
  max-width: 880px;
}

.prose p {
  margin: 0 0 16px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-body);
}

.prose p:last-child {
  margin-bottom: 0;
}

/* ── Kopfbereich ────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
}

.header {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* nowrap: die Navigation bleibt immer neben dem Logo und rutscht
     nie darunter. Eng wird es stattdessen innerhalb von .header__meta
     aufgelöst — dort brechen die beiden Links untereinander um. */
  flex-wrap: nowrap;
  gap: 20px;
  height: 104px;
  padding-inline: var(--gutter);
}

.header__logo {
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
  gap: 24px;
}

.header__edeka {
  height: 76px;
  width: auto;
  margin-bottom: 12px;
}

.header__wordmark {
  display: block;
  width: 126px;
  height: 90px;
  background-color: var(--brand-green);
  -webkit-mask: url("../assets/img/doerflinger-wortmarke.svg") bottom left / contain no-repeat;
  mask: url("../assets/img/doerflinger-wortmarke.svg") bottom left / contain no-repeat;
}

.header__meta {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px 20px;
}

.header__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  color: var(--text-body);
  text-decoration: none;
  white-space: nowrap;
}

.header__link:hover {
  color: var(--brand-green);
}

.notice__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.notice__heart {
  width: 18px;
  color: var(--brand-yellow);
}

.notice__text {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper);
}

/* ── Hero ───────────────────────────────────────────────────── */

.hero {
  position: relative;
  height: 560px;
  overflow: hidden;
  background: var(--green-800);
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: linear-gradient(
    180deg,
    rgb(23 26 21 / 0) 0%,
    rgb(23 26 21 / 0.5) 45%,
    rgb(23 26 21 / 0.85) 100%
  );
}

.hero__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px;
}

.hero__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 76px;
  line-height: 1.02;
  color: #fff;
}

.hero__sub {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  color: #fff;
  max-width: 560px;
}

/* ── App & PAYBACK ──────────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  gap: 48px;
  align-items: center;
}

.app__text {
  font-size: 19px;
  line-height: 1.55;
  color: var(--green-700);
  margin: 0 0 24px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Die Store-Badges bringen Fläche, Rundung und Schutzzone selbst
   mit — sie stehen deshalb ohne Kachel direkt auf dem Untergrund.
   Einheitliche Höhe statt einheitlicher Breite, weil die drei
   Seitenverhältnisse unterschiedlich sind. */
.badge {
  display: inline-flex;
  height: 40px;
  text-decoration: none;
}

.badge img {
  height: 100%;
  width: auto;
  display: block;
}

/* PAYBACK ist reiner Programmhinweis, kein Link. */
.badge--static {
  cursor: default;
}

/* Feature-Liste: die 1px-Lücken der Flex-Spalte legen den
   Hintergrund frei und erzeugen so die Trennlinien. */
.features {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--yellow-600);
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature {
  background: var(--brand-yellow);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
}

.feature__icon {
  width: 28px;
  height: 28px;
  margin-top: 2px;
  color: var(--brand-green);
}

.feature__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feature__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-green);
}

.feature__text {
  font-size: 17px;
  line-height: 1.5;
  color: var(--green-700);
}

/* ── Telefon-Mockup (rein dekorativ) ────────────────────────── */

.phone {
  justify-self: center;
  width: 280px;
  height: 568px;
  border-radius: 36px;
  background: var(--green-800);
  padding: 10px;
  box-shadow: 0 24px 48px rgb(23 26 21 / 0.28);
}

.phone__screen {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: var(--green-900);
  overflow: hidden;
}

.phone__shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

/* ── Märkte ─────────────────────────────────────────────────── */

.markets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.market {
  border: 1px solid var(--green-200);
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

.market__media {
  width: 100%;
  height: 200px;
  background: var(--green-100);
}

.market__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.market__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

.market__name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.2;
  margin: 0;
}

.market__street {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.4;
  font-style: normal;
}

.market__hours {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--green-100);
  padding-top: 12px;
}

.hours-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hours-block__label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.hours-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  font-size: 15px;
  color: var(--text-body);
}

.hours-row__time {
  font-weight: 700;
  color: var(--text-heading);
  white-space: nowrap;
}

.route {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-green);
  text-decoration: none;
  padding-top: 4px;
  align-self: flex-start;
}

.route:hover {
  color: var(--yellow-700);
}

.route .icon {
  width: 18px;
  height: 18px;
}

.market--hq {
  border-color: var(--green-300);
  background: var(--surface-subtle);
  padding: 24px;
  gap: 12px;
}

.market--hq .market__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--green-200);
  padding-top: 12px;
  font-size: 17px;
  color: var(--text-body);
}

.market--hq a[href^="mailto"] {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Karriere ───────────────────────────────────────────────── */

.career {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: center;
}

.career__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.career__perks {
  font-size: 19px;
  line-height: 1.5;
  color: var(--green-200);
}

.career__text {
  font-size: 19px;
  line-height: 1.55;
  color: var(--paper);
  margin: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.btn--primary {
  background: var(--brand-yellow);
  color: var(--brand-green);
}

.btn--primary:hover {
  background: var(--yellow-600);
  color: var(--brand-green);
}

.btn--outline {
  border: 2px solid var(--paper);
  color: var(--paper);
}

.btn--outline:hover {
  background: var(--paper);
  color: var(--brand-green);
}

.band--green :focus-visible,
.band--deep :focus-visible {
  box-shadow: var(--focus-ring-inverse);
}

/* ── Regionalität ───────────────────────────────────────────── */

.regional {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 48px;
  align-items: center;
}

.regional__media {
  width: 100%;
  height: 520px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--green-100);
}

.regional__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Oben ausgerichtet: die Box ist flacher als der Ausschnitt,
     mittig zentriert schneidet sie sonst den Kopf ab. */
  object-position: 50% 0;
}

.regional__lead {
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0 0 20px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  color: var(--text-heading);
  border: 1px solid var(--green-300);
  border-radius: 999px;
  padding: 8px 16px;
}

/* ── Fußbereich ─────────────────────────────────────────────── */

.footer__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--pad-block) var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: start;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-yellow);
}

.footer__addr {
  font-size: 17px;
  line-height: 1.5;
  color: var(--paper);
  font-style: normal;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 17px;
  color: var(--green-200);
  margin-top: 8px;
}

.footer__contact a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer__social-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.footer__heart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  color: var(--paper);
  white-space: nowrap;
}

.footer__heart .icon--heart {
  width: 20px;
  color: var(--brand-yellow);
}

.socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--green-700);
}

.social:hover {
  background: var(--brand-yellow);
  color: var(--brand-green);
}

.footer__bottom {
  border-top: 1px solid var(--green-500);
  padding-top: 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
}

.footer__app {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Läuft über die volle Spaltenbreite und bricht erst, wenn der
   Viewport es erzwingt — keine feste Maximalbreite, keine
   Silbentrennung, kein ausgleichender Umbruch. */
.footer__app-text {
  font-size: 17px;
  color: var(--green-200);
  line-height: 1.5;
  margin: 0;
  hyphens: none;
  text-wrap: wrap;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 20px;
  font-size: 15px;
}

.footer__links a {
  color: var(--brand-yellow);
  text-decoration: none;
}

.footer__links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--brand-yellow);
}

/* ── Rechtsseiten ───────────────────────────────────────────── */

.legal {
  max-width: 760px;
  margin-inline: auto;
  padding: var(--pad-block) var(--gutter) 72px;
}

.legal h1 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 48px;
  line-height: 1.02;
  color: var(--brand-green);
  margin: 0 0 32px;
}

.legal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 29px;
  line-height: 1.1;
  color: var(--brand-green);
  margin: 40px 0 12px;
}

.legal h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 28px 0 8px;
}

.legal p,
.legal li {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-body);
}

.legal p {
  margin: 0 0 16px;
}

.legal a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal address {
  font-style: normal;
  margin: 0 0 16px;
}

.legal dl {
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 20px;
  font-size: 17px;
}

.legal dt {
  color: var(--text-muted);
}

.legal dd {
  margin: 0;
  color: var(--text-body);
}

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-green);
  text-decoration: none;
}

.legal__note {
  background: var(--surface-subtle);
  border: 1px dashed var(--green-300);
  border-radius: 4px;
  padding: 24px;
  margin: 0 0 32px;
}

.legal__note p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   Breakpoints
   ============================================================ */

@media (max-width: 960px) {
  :root {
    --gutter: 20px;
    --pad-block: 32px;
  }

  .header {
    height: auto;
    padding: 12px var(--gutter) 0;
    gap: 10px;
    align-items: center;
  }

  /* Kompakter, damit "Karriere" und "Ausbildung" auch auf schmalen
     iPhones nebeneinander neben dem Logo Platz finden. */
  .header__meta {
    gap: 6px 12px;
  }

  .header__link {
    font-size: 15px;
    gap: 6px;
  }

  .header__link .icon {
    width: 16px;
    height: 16px;
  }

  .header__logo {
    gap: 14px;
  }

  .header__edeka {
    height: 52px;
    margin-bottom: 6px;
  }

  .header__wordmark {
    width: 88px;
    height: 62px;
  }

  .notice__inner {
    padding: 10px var(--gutter);
    min-height: 0;
    align-items: flex-start;
  }

  .notice__text {
    font-size: 13px;
    letter-spacing: 0.04em;
  }

  /* Hochformat-Ausschnitt, damit die Gesichter über der Schrift
     liegen und das dunkle Kassenband unter den Text fällt. Der
     Verlauf muss trotzdem kräftiger sein als auf Desktop — der
     Text steht mobil über deutlich mehr Bildfläche. */
  .hero {
    height: 480px;
  }

  .hero__img {
    object-position: 50% 28%;
  }

  .hero__scrim {
    height: 88%;
    background: linear-gradient(
      180deg,
      rgb(23 26 21 / 0) 0%,
      rgb(23 26 21 / 0.45) 32%,
      rgb(23 26 21 / 0.8) 60%,
      rgb(23 26 21 / 0.94) 100%
    );
  }

  .hero__title {
    font-size: 44px;
  }

  .hero__sub {
    font-size: 17px;
  }

  .display {
    font-size: 34px;
  }

  .display--sm {
    font-size: 28px;
  }

  .app,
  .career,
  .regional,
  .footer__top,
  .footer__bottom {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .markets {
    grid-template-columns: 1fr 1fr;
  }

  .phone {
    justify-self: start;
  }

  .footer__links {
    justify-content: flex-start;
  }

  .footer__social-col {
    align-items: flex-start;
  }

  .badges {
    flex-wrap: wrap;
  }

  .regional__media {
    height: 380px;
  }

  .legal h1 {
    font-size: 34px;
  }

  .legal h2 {
    font-size: 24px;
  }
}

@media (max-width: 640px) {
  .markets {
    grid-template-columns: 1fr;
  }

  .hero {
    height: 460px;
  }

  .hero__title {
    font-size: 36px;
  }

  .display {
    font-size: 28px;
  }

  .prose p,
  .app__text,
  .career__text,
  .career__perks,
  .regional__lead {
    font-size: 17px;
  }

  .phone {
    width: 100%;
    max-width: 280px;
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}