/* ==========================================================================
   Woman & Health Karriere — App-Layer
   Seitenspezifisches Layout + Erweiterungen der Meridian-Komponenten.
   Nutzt ausschließlich --dm-* Tokens. Lade-Reihenfolge:
   Typekit -> tokens.css -> base.css -> Komponenten-CSS -> app.css
   ========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; }
a { text-decoration: none; }
img { display: block; max-width: 100%; }

.ds-container { width: min(1200px, calc(100% - 2 * var(--dm-space-lg))); margin-inline: auto; }
.ds-section { padding: var(--dm-space-4xl) 0; }
.ds-section--tight { padding: var(--dm-space-3xl) 0; }
.ds-section--tint { background: var(--dm-color-surface-variant); }
.ds-center { text-align: center; }
.ds-mt-lg { margin-top: var(--dm-space-xl); }

.ds-section-head { max-width: 720px; margin: 0 auto var(--dm-space-2xl); text-align: center; }
.ds-section-head h2 { font: var(--dm-type-h1); letter-spacing: var(--dm-tracking-heading); margin-bottom: var(--dm-space-sm); }
.ds-section-head p { font: var(--dm-type-body-lg); color: var(--dm-color-on-surface-variant); margin-inline: auto; }

/* Eyebrow (pill, wie dm-hero__eyebrow) */
.ds-eyebrow {
  display: inline-flex; align-items: center; gap: var(--dm-space-sm);
  padding: 6px 12px; margin-bottom: var(--dm-space-md);
  font: var(--dm-type-label-sm); letter-spacing: var(--dm-tracking-label-sm);
  text-transform: uppercase; color: var(--dm-color-on-primary-subtle);
  background: var(--dm-color-primary-subtle);
  border: 1px solid color-mix(in srgb, var(--dm-color-primary) 25%, transparent);
  border-radius: var(--dm-rounded-full);
}
.ds-eyebrow--light { color: #fff; background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4); }

.ds-lead { font: var(--dm-type-body-lg); color: var(--dm-color-on-surface-variant); max-width: 64ch; }

/* Fraunces' &-Glyphe (Et-Ligatur) wirkt wie ein @ – in Überschriften stattdessen
   die klassische Serif-Glyphe von Georgia nutzen. main.js wrappt & automatisch. */
.ds-amp { font-family: Georgia, "Times New Roman", serif; }

/* ==========================================================================
   Navbar — Erweiterung: quadratisches Logo, Dropdowns
   ========================================================================== */
.dm-navbar { position: sticky; top: 0; }
.dm-navbar__brand { display: inline-flex; align-items: center; }
.ds-brand-logo { height: 46px; width: auto; }

/* CTA-Button in der Navbar exakt auf Control-Höhe (44px) – passt zur Nav */
.dm-navbar__actions .dm-button { height: var(--dm-control-height); }

/* Button-Variante "soft": sanfter Gold-Wash, Text- und Borderfarbe identisch */
.dm-button--soft {
  background: var(--dm-color-primary-subtle);
  color: var(--dm-color-on-primary-subtle);
  border-color: var(--dm-color-on-primary-subtle);
}
.dm-button--soft:hover {
  background: color-mix(in srgb, var(--dm-color-primary) 22%, var(--dm-color-primary-subtle));
  color: var(--dm-color-on-primary-subtle);
  border-color: var(--dm-color-on-primary-subtle);
}

/* Ghost-Button auf Foto-Hintergrund: leichter transluzenter Wash */
.ds-cover .dm-button--outline {
  color: #fff; border-color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.12); backdrop-filter: blur(4px);
}
.ds-cover .dm-button--outline:hover { background: rgba(255,255,255,0.24); color: #fff; border-color: #fff; }

/* Dropdown */
.ds-navitem { position: relative; display: flex; align-items: center; }
.ds-navitem > .dm-navbar__link { display: inline-flex; align-items: center; gap: 6px; }
.ds-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }

.ds-dropdown {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  margin-top: var(--dm-space-sm);
  background: var(--dm-color-surface); border: 1px solid var(--dm-color-outline-variant);
  border-radius: var(--dm-rounded-md); box-shadow: var(--dm-shadow-lg);
  padding: var(--dm-space-sm);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dm-duration-base) var(--dm-ease-standard),
              transform var(--dm-duration-base) var(--dm-ease-emphasized),
              visibility 0s var(--dm-duration-base);
  z-index: 20;
}
.ds-navitem:hover .ds-dropdown,
.ds-navitem:focus-within .ds-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--dm-duration-base) var(--dm-ease-standard),
              transform var(--dm-duration-base) var(--dm-ease-emphasized);
}
.ds-dropdown a {
  display: block; padding: 10px 12px; border-radius: var(--dm-rounded-sm);
  font: var(--dm-type-body-sm); color: var(--dm-color-on-surface-variant);
}
.ds-dropdown a:hover { background: var(--dm-color-primary-subtle); color: var(--dm-color-on-primary-subtle); }

@media (max-width: 767px) {
  /* Nav-Item stapelt: Link oben, Dropdown-Links darunter */
  .ds-navitem { flex-direction: column; align-items: stretch; }
  /* Dropdowns auf Mobile dauerhaft inline ausklappen */
  .ds-dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; margin: 0 0 var(--dm-space-sm) var(--dm-space-md);
    padding: 0; min-width: 0;
  }
  .ds-caret { display: none; }
  .dm-navbar__brand .ds-brand-logo { height: 40px; }
}

/* ==========================================================================
   Cover-Slideshow (Startseite, full-bleed)
   5 Foto-Slides, Crossfade + sanfter Ken-Burns-Zoom, keine Pfeile/Bullets.
   Rotation via main.js (Klasse is-active); prefers-reduced-motion stoppt
   Zoom + Fade über die globale Regel in base.css.
   ========================================================================== */
.ds-cover { position: relative; min-height: 86vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--dm-color-inverse-surface); }
.ds-cover__slides { position: absolute; inset: 0; }
.ds-cover__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1400ms var(--dm-ease-standard);
}
.ds-cover__slide.is-active {
  opacity: 1;
  animation: ds-kenburns 8s var(--dm-ease-standard) forwards;
}
@keyframes ds-kenburns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.08); }
}
.ds-cover__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,24,17,0.55) 0%, rgba(31,24,17,0.42) 45%, rgba(31,24,17,0.68) 100%); }
.ds-cover__content { position: relative; text-align: center; color: #fff; padding: var(--dm-space-3xl) var(--dm-space-lg); max-width: 1000px; }
.ds-cover__logo { height: 52px; width: auto; margin: 0 auto var(--dm-space-xl); }
.ds-cover__content h1 { font: var(--dm-type-display-lg); letter-spacing: var(--dm-tracking-display); color: #fff; margin-bottom: var(--dm-space-md); text-wrap: balance; }
.ds-cover__content h1 em { font-style: italic; font-weight: 500; }
.ds-cover__content p { font: var(--dm-type-body-lg); color: rgba(255,255,255,0.92); max-width: 56ch; margin: 0 auto var(--dm-space-lg); }
.ds-cover__actions { display: flex; gap: var(--dm-space-md); justify-content: center; flex-wrap: wrap; }
.ds-scroll { position: absolute; bottom: var(--dm-space-lg); left: 50%; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255,255,255,0.7); border-radius: var(--dm-rounded-full); }
.ds-scroll::after { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background: #fff; border-radius: 2px; animation: ds-scroll 1.6s infinite; }
@keyframes ds-scroll { 0% { opacity: 0; top: 8px; } 50% { opacity: 1; } 100% { opacity: 0; top: 20px; } }
@media (min-width: 768px) { .ds-cover__content h1 { font: var(--dm-type-display-lg); font-size: 3.5rem; letter-spacing: var(--dm-tracking-display); } }
/* Mobil: langes Wort "Frauengesundheit" muss in 390px passen */
@media (max-width: 640px) {
  .ds-cover__content h1 { font-size: 2.2rem; }
  .ds-cover__logo { height: 42px; }
}

/* Page-Hero (Unterseiten) */
.ds-page-hero { padding: var(--dm-space-3xl) 0 var(--dm-space-2xl); background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--dm-color-primary) 12%, transparent), transparent 32%), linear-gradient(180deg, var(--dm-color-surface), var(--dm-color-background)); border-bottom: 1px solid var(--dm-color-outline-variant); }
.ds-page-hero h1 { font: var(--dm-type-display-lg); letter-spacing: var(--dm-tracking-display); margin-bottom: var(--dm-space-md); }
.ds-page-hero .ds-lead { margin: 0; }
.ds-back { display: inline-block; margin-bottom: var(--dm-space-md); font: var(--dm-type-label-md); color: var(--dm-color-primary); }

/* ==========================================================================
   Stats
   ========================================================================== */
.ds-stats { background: var(--dm-color-surface); border-bottom: 1px solid var(--dm-color-outline-variant); padding: var(--dm-space-2xl) 0; }
.ds-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dm-space-lg); text-align: center; }
.ds-stat__num { display: block; font: var(--dm-type-display-lg); color: var(--dm-color-primary); line-height: 1; }
.ds-stat__label { display: block; margin-top: var(--dm-space-sm); font: var(--dm-type-body-sm); color: var(--dm-color-on-surface-variant); }

/* ==========================================================================
   Split (Bild + Text)
   ========================================================================== */
.ds-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dm-space-3xl); align-items: center; }
.ds-split__copy h2 { font: var(--dm-type-h1); letter-spacing: var(--dm-tracking-heading); margin-bottom: var(--dm-space-md); }
.ds-split__copy p { color: var(--dm-color-on-surface-variant); margin-bottom: var(--dm-space-md); }
.ds-split__media img { border-radius: var(--dm-rounded-lg); box-shadow: var(--dm-shadow-md); width: 100%; object-fit: cover; }
.ds-split__media--duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dm-space-md); }
.ds-split__media--duo img { aspect-ratio: 3/4; background: #fafaf8; }

/* ==========================================================================
   Grids für Karten
   ========================================================================== */
.ds-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dm-space-lg); }
.ds-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--dm-space-lg); }
.ds-job-img { aspect-ratio: 3/2; }

/* Liste mit Häkchen (Aufgaben / Profil / Wir bieten / Modelle) */
.ds-check { list-style: none; display: grid; gap: var(--dm-space-sm); padding: 0; margin: 0; }
.ds-check li { position: relative; padding-left: 30px; color: var(--dm-color-on-surface-variant); font: var(--dm-type-body-md); }
.ds-check li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: var(--dm-rounded-full); background: var(--dm-color-primary-subtle); }
.ds-check li::after { content: ""; position: absolute; left: 6px; top: 5px; width: 5px; height: 9px; border: solid var(--dm-color-on-primary-subtle); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Benefit-Liste (nummeriert) */
.ds-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dm-space-lg); }
.ds-benefit { display: flex; gap: var(--dm-space-md); align-items: flex-start; padding: var(--dm-space-lg); background: var(--dm-color-surface); border: 1px solid var(--dm-color-outline-variant); border-radius: var(--dm-rounded-lg); box-shadow: var(--dm-shadow-sm); }
.ds-benefit__num { font: var(--dm-type-display-lg); font-size: 1.9rem; color: var(--dm-color-primary); line-height: 1; flex: none; }
.ds-benefit h3 { font: var(--dm-type-h4); margin-bottom: var(--dm-space-xs); }
.ds-benefit p { font: var(--dm-type-body-sm); color: var(--dm-color-on-surface-variant); }

/* Card-Inhalts-Helfer */
.dm-card__body .ds-card-meta { font: var(--dm-type-body-md); color: var(--dm-color-on-surface-variant); }
.ds-plain-card { padding: var(--dm-space-xl); }
.ds-plain-card h3 { font: var(--dm-type-h3); color: var(--dm-color-on-primary-subtle); margin-bottom: var(--dm-space-sm); }
.ds-plain-card .ds-model-sub { color: var(--dm-color-on-surface-variant); font: var(--dm-type-body-sm); margin: calc(-1 * var(--dm-space-xs)) 0 var(--dm-space-md); }

/* CTA-Band */
.ds-cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--dm-space-lg); flex-wrap: wrap; background: linear-gradient(135deg, var(--dm-color-primary-subtle), var(--dm-color-surface)); border: 1px solid var(--dm-color-outline-variant); border-radius: var(--dm-rounded-lg); padding: var(--dm-space-2xl); }
.ds-cta-band h2 { font: var(--dm-type-h2); margin-bottom: var(--dm-space-xs); }
.ds-cta-band p { color: var(--dm-color-on-surface-variant); }
.ds-cta-band__actions { display: flex; gap: var(--dm-space-sm); flex-wrap: wrap; }

/* Initiativ-Box */
.ds-initiativ { text-align: center; border: 1px dashed color-mix(in srgb, var(--dm-color-primary) 50%, transparent); border-radius: var(--dm-rounded-lg); padding: var(--dm-space-2xl) var(--dm-space-lg); }
.ds-initiativ h3 { font: var(--dm-type-h3); margin-bottom: var(--dm-space-sm); }
.ds-initiativ p { color: var(--dm-color-on-surface-variant); max-width: 52ch; margin: 0 auto var(--dm-space-md); }

/* ==========================================================================
   Stellen-Detail
   ========================================================================== */
.ds-job-detail { display: grid; grid-template-columns: 1fr 340px; gap: var(--dm-space-3xl); align-items: start; }
.ds-job-meta { list-style: none; display: flex; gap: var(--dm-space-lg); flex-wrap: wrap; padding: 0; margin: var(--dm-space-md) 0 var(--dm-space-lg); color: var(--dm-color-on-surface-variant); }
.ds-job-main h2 { font: var(--dm-type-h2); margin: var(--dm-space-xl) 0 var(--dm-space-md); }
.ds-job-photo { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--dm-rounded-lg); box-shadow: var(--dm-shadow-sm); margin: var(--dm-space-lg) 0 var(--dm-space-sm); }
.ds-job-main .ds-job-text { margin-bottom: var(--dm-space-md); max-width: 72ch; }
.ds-note { margin-top: var(--dm-space-lg); padding: var(--dm-space-md) var(--dm-space-lg); background: var(--dm-color-primary-subtle); border-radius: var(--dm-rounded-md); color: var(--dm-color-on-primary-subtle); }

/* Kennzahlen-Block (z.B. Auslastung einer zu übernehmenden Ordination) */
.ds-figures-block {
  margin-top: var(--dm-space-xl);
  padding: var(--dm-space-xl);
  background: var(--dm-color-surface-variant);
  border: 1px solid var(--dm-color-outline-variant);
  border-radius: var(--dm-rounded-lg);
}
.ds-job-main .ds-figures-block__title { margin: 0 0 var(--dm-space-lg); font: var(--dm-type-h3); }
.ds-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--dm-space-lg); }
.ds-figure__num { display: block; font: var(--dm-type-h2); color: var(--dm-color-primary); line-height: 1.1; white-space: nowrap; }
.ds-figure__label { display: block; margin-top: var(--dm-space-xs); font: var(--dm-type-body-sm); color: var(--dm-color-on-surface-variant); }
.ds-fine { margin-top: var(--dm-space-lg); font: var(--dm-type-body-sm); color: var(--dm-color-on-surface-variant); }
@media (max-width: 640px) {
  .ds-figures { grid-template-columns: 1fr 1fr; gap: var(--dm-space-md); }
  .ds-figures-block { padding: var(--dm-space-lg); }
}

/* Rote Hervorhebung (z.B. Verdienst-Hinweis auf Arztseiten) */
.ds-note--rot {
  margin: 0 0 var(--dm-space-lg);
  background: #fbecea;
  border-left: 3px solid #c0392b;
  color: #8e2f27;
}
.ds-note--rot strong { color: #c0392b; }
.ds-aside { position: sticky; top: 88px; }
.ds-aside__img { width: 100%; height: auto; border-radius: var(--dm-rounded-md); margin-bottom: var(--dm-space-md); }
.ds-contact-name { font: var(--dm-type-label-md); }

.ds-location { margin-bottom: var(--dm-space-lg); }
.ds-location h3 { font: var(--dm-type-h4); }
.ds-link { color: var(--dm-color-primary); font: var(--dm-type-label-md); }

/* ==========================================================================
   Kennenlern-Gespräch-Card (Stellenseiten + Kontakt)
   ========================================================================== */
.ds-meet-card {
  display: flex; align-items: center; gap: var(--dm-space-lg);
  background: var(--dm-color-surface); border: 1px solid var(--dm-color-outline-variant);
  border-radius: var(--dm-rounded-lg); box-shadow: var(--dm-shadow-sm);
  padding: var(--dm-space-xl);
}
.ds-meet-card__icon {
  flex: none; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  background: var(--dm-color-primary-subtle); color: var(--dm-color-on-primary-subtle);
  border-radius: var(--dm-rounded-full);
}
.ds-meet-card__icon svg { width: 30px; height: 30px; }
.ds-meet-card__body { flex: 1; }
.ds-meet-card__body h3 { font: var(--dm-type-h3); margin-bottom: var(--dm-space-xs); }
.ds-meet-card__body p { font: var(--dm-type-body-md); color: var(--dm-color-on-surface-variant); max-width: 68ch; }
.ds-meet-card__cta { flex: none; }
@media (max-width: 767px) {
  .ds-meet-card { flex-direction: column; align-items: flex-start; gap: var(--dm-space-md); }
}

/* ==========================================================================
   Deutschland-Block (Arzt-Stellen): Kurz-Info + ausklappbare 10-Fragen-FAQ
   ========================================================================== */
.ds-de-info { max-width: 880px; }
.ds-de-info h2 { font: var(--dm-type-h1); letter-spacing: var(--dm-tracking-heading); margin-bottom: var(--dm-space-md); }
.ds-de-info__intro { font: var(--dm-type-body-lg); color: var(--dm-color-on-surface-variant); margin-bottom: var(--dm-space-lg); }
.ds-de-info__toggle .ds-caret { transform: rotate(45deg); margin-left: 4px; transition: transform var(--dm-duration-base) var(--dm-ease-emphasized); }
.ds-de-info__toggle[aria-expanded="true"] .ds-caret { transform: rotate(225deg) translateY(-2px); }
.ds-de-info__row { margin-bottom: var(--dm-space-md); }
.ds-de-info__faq { margin: var(--dm-space-sm) 0 var(--dm-space-lg); }
/* Antworten nicht an der Frage kleben lassen */
.ds-de-info .dm-accordion__content { padding-top: var(--dm-space-sm); }

/* Kennenlern-Sektion: violetter Verlauf (W&H-Kategoriefarben, abgedunkelt),
   damit sich der Block klar abhebt – die Card selbst bleibt weiß. */
.ds-meet-section {
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.14), transparent 45%),
    linear-gradient(135deg, #6f5f9e 0%, #8a4a81 100%);
}

/* ==========================================================================
   Bewerbungsformular
   ========================================================================== */
.ds-apply { background: linear-gradient(160deg, var(--dm-color-surface-variant), var(--dm-color-surface)); border-top: 1px solid var(--dm-color-outline-variant); padding: var(--dm-space-4xl) 0; }
.ds-apply__inner { width: min(1200px, calc(100% - 2 * var(--dm-space-lg))); margin-inline: auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--dm-space-2xl); align-items: start; }
.ds-apply__intro h2 { font: var(--dm-type-h1); margin-bottom: var(--dm-space-md); }
.ds-apply__intro p { color: var(--dm-color-on-surface-variant); margin-bottom: var(--dm-space-md); }
.ds-apply__form { background: #fff; border: 1px solid var(--dm-color-outline-variant); border-radius: var(--dm-rounded-lg); box-shadow: var(--dm-shadow-md); padding: var(--dm-space-xl); }

.ds-field { display: flex; flex-direction: column; margin-bottom: var(--dm-space-md); }
.ds-field__label { font: var(--dm-type-label-md); letter-spacing: var(--dm-tracking-label); margin-bottom: 6px; color: var(--dm-color-on-surface); }
.ds-field .dm-field__control { max-width: none; }
.ds-field select.dm-field__input { height: var(--dm-input-height); -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dm-color-on-surface-variant) 50%), linear-gradient(135deg, var(--dm-color-on-surface-variant) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; cursor: pointer; }
.ds-grid-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--dm-space-md); }
.ds-field__hint { margin-top: 6px; font: var(--dm-type-body-sm); color: var(--dm-color-on-surface-variant); }
.ds-file { font: var(--dm-type-body-sm); color: var(--dm-color-on-surface-variant); padding: 10px 0; }
.ds-file::file-selector-button { font: var(--dm-type-label-md); margin-right: var(--dm-space-md); padding: 8px 16px; color: var(--dm-color-on-primary-subtle); background: var(--dm-color-primary-subtle); border: 1px solid color-mix(in srgb, var(--dm-color-primary) 30%, transparent); border-radius: var(--dm-rounded-full); cursor: pointer; }
.ds-field--error .dm-field__control { border-color: var(--dm-color-error); }
.ds-form-actions { display: flex; align-items: center; gap: var(--dm-space-md); margin-top: var(--dm-space-sm); }
.ds-form-status { font: var(--dm-type-body-sm); }
.ds-form-status.is-error { color: var(--dm-color-error); }
.ds-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ds-trust { list-style: none; display: grid; gap: var(--dm-space-sm); padding: 0; margin: 0; }
.ds-trust li { position: relative; padding-left: 26px; color: var(--dm-color-on-surface-variant); }
.ds-trust li::before { content: "✓"; position: absolute; left: 0; color: var(--dm-color-primary); font-weight: 700; }

/* Danke-Seite */
.ds-thanks-icon { width: 76px; height: 76px; margin: 0 auto var(--dm-space-md); border-radius: var(--dm-rounded-full); background: var(--dm-color-primary); color: #fff; font-size: 38px; display: flex; align-items: center; justify-content: center; }

/* Footer-Logo */
.ds-footer-logo { height: 38px; width: auto; margin-bottom: var(--dm-space-md); }
.dm-footer__tagline a, .dm-footer__col a.ds-link { color: var(--dm-color-primary); }

/* ==========================================================================
   Wide-Hero (Foto über volle Breite, erstes Element auf Unterseiten)
   ========================================================================== */
.ds-wide-hero { width: 100%; height: clamp(220px, 30vw, 420px); overflow: hidden; }
.ds-wide-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Foto-Strip (3 Hochformate nebeneinander, bricht den Contentfluss)
   ========================================================================== */
.ds-photo-strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dm-space-md); }
.ds-photo-strip__grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--dm-rounded-lg); box-shadow: var(--dm-shadow-sm); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .ds-split { grid-template-columns: 1fr; gap: var(--dm-space-xl); }
  .ds-job-detail { grid-template-columns: 1fr; }
  .ds-aside { position: static; }
  .ds-apply__inner { grid-template-columns: 1fr; gap: var(--dm-space-xl); }
  .ds-grid-3, .ds-benefits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ds-section { padding: var(--dm-space-3xl) 0; }
  .ds-stats__grid { grid-template-columns: 1fr 1fr; gap: var(--dm-space-xl) var(--dm-space-md); }
  .ds-grid-3, .ds-grid-2, .ds-benefits { grid-template-columns: 1fr; }
  .ds-grid-fields { grid-template-columns: 1fr; }
  .ds-split__media--duo { grid-template-columns: 1fr 1fr; }
  .ds-apply__form { padding: var(--dm-space-lg); }
  .ds-cta-band { padding: var(--dm-space-xl); }
}

/* ==========================================================================
   AC Flipbook (Karriere-Folder auf /wir-ueber-uns) – Retheme auf W&H
   ========================================================================== */
/* Doppelte Klasse = höhere Spezifität, da acflipbook.css nach app.css lädt */
.acfb.acfb,
.acfb__overlay.acfb__overlay {
  --acfb-band: #f6f2ea;                      /* Band im Site-Tint statt Hellgrau */
  --acfb-ink: var(--dm-color-on-surface, #1a1a1a);
  --acfb-accent: var(--dm-color-primary, #bfa26e);  /* W&H-Gold statt AC-Grün */
  --acfb-page-bg: #efece5;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ds-flipbook { padding-bottom: 0; }
.ds-flipbook .ds-section-head { margin-bottom: var(--dm-space-xl); }