/**
 * Dive Deeper Page — 80/30 × Lux & Lux ("Darüber hinaus")
 *
 * Scoped entirely under the .koop wrapper class (present on every vc_row of
 * the /dive-deeper/ page, see Task 3). Loaded ONLY on that page (see
 * salient_child_enqueue_dive_deeper_assets() in functions.php) — never
 * site-wide, so these fairly generic class names (.koop-index, .koop-list,
 * .koop-btn...) can't collide with anything else on the site.
 *
 * No font-family is set anywhere in this file on purpose: the page must
 * inherit the site's existing typography (Poppins / gt-america-expanded).
 * The site's Google Fonts request only loads Poppins 400/500/700 — every
 * font-weight below is capped to one of those three values explicitly
 * (900→700, 800→700, 600→500) rather than left at the design handoff's
 * original 900/800/600 and relying on the browser to fall back: on these
 * very large clamp()'d headline sizes, browsers render an unavailable
 * weight via synthetic/faux bold instead of picking the loaded face
 * cleanly, which visibly does not match the theme's actual type elsewhere
 * on the site. Explicit weights avoid that.
 *
 * Font-SIZES are likewise pinned to the theme's own real values (read live
 * from this site's salient-dynamic-styles.css, not the design handoff's
 * custom clamp() scale, per explicit user decision to match the rest of
 * the site rather than introduce a new type scale):
 *   h1 65px/67px, h2 35px/45px, body 16px. Headline-weight elements below
 * use 65px (h1-equivalent) or 35px (h2-equivalent); no fluid vw-based
 * sizing remains.
 *
 * Adapted from an Impreza/WPBakery design handoff to this site's real theme
 * (Salient): section backgrounds/padding target ".vc_row"/".vc_column_container"
 * instead of bare "<section>" tags, since WPBakery wraps every row in those
 * classes rather than semantic HTML5 sections.
 *
 * Section background colors are NOT set here — each [vc_row] uses Salient's
 * own type="full_width_background" bg_color="..." (see deploy-kooperation-page.php),
 * the same mechanism the site's other pages use for a true edge-to-edge
 * section background (confirmed live against the Communication page,
 * post 1059) while keeping content inside the theme's normal container.
 * A CSS-only max-width/background on .koop only ever filled that same
 * ~1220-1280px container anyway, never true full-bleed.
 */

/* ---- Basis ---- */
.koop{
  /* --ink is used as a plain color token (text on the light
     Expertise/CTA sections below) — NOT as a background anymore; section
     backgrounds are set natively via bg_color on each [vc_row], see the
     comment above. */
  --ink:#0d0d0d;
  --paper:#ffffff;
  --grey:#cac6bb;
  --violet:#7d5cc6;
  --orange:#ff6b21;
  --line:rgba(255,255,255,.14);
  --line-dark:rgba(13,13,13,.16);
  color:#f4f2ec;
}
.koop *{ box-sizing:border-box; }
/* Section rhythm. Salient renders every full-width row with an inline
   `padding-top:0;padding-bottom:0` (its row-settings default), which beats a
   non-important stylesheet rule — so the vertical section padding MUST be
   !important, otherwise every section collapses to zero top/bottom padding
   and the whole page reads cramped. Horizontal padding is NOT inline'd by
   Salient (full-width sections stretch edge to edge), so it applies without
   !important and provides the side gutters. The old
   `.koop > .vc_column_container` selector never matched — Salient nests a
   `.row_col_wrap_12` between the row and the column — so it's removed. */
.koop.vc_row{
  padding-top:clamp(56px,8vw,120px) !important;
  padding-bottom:clamp(56px,8vw,120px) !important;
  padding-left:clamp(20px,4vw,56px);
  padding-right:clamp(20px,4vw,56px);
}
/* The marquee is a thin full-width band sitting between two sections; it must
   NOT inherit the big section padding, or it floats in a tall empty dark row.
   Its own `.koop-marquee` supplies the tight band padding. Targeted via :has()
   so no content/markup change is needed. */
.koop.vc_row:has(.koop-marquee){
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.koop ::selection{ background:var(--violet); color:#fff; }

.koop-index{ display:inline-block;font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px; }
.koop-index--violet{ color:var(--violet); }
.koop-index--muted{ color:rgba(13,13,13,.45); }
.koop-amp{ color:var(--violet); }

/* Long German compound words (Neuausrichtung, Führungserfahrung, …) in the
   large fixed-size headlines can exceed a ~390px mobile viewport and force
   horizontal scroll. break-word lets them wrap instead. */
.koop-hero__title,.koop-exp__title,.koop-chall__title,
.koop-cta__title,.koop-close__title,.koop-stats__num,.koop-list p{
  overflow-wrap:break-word; }

/* The four section titles render via Salient's native [split_line_heading]
   element (same as the Communication page): el_class lands on the
   `.nectar-split-heading` WRAPPER, while the real text sits in an inner
   <h1>/<h2> that inherits the theme's live heading size (font_style, no inline
   font-size) and its responsive down-scaling. Reset that inner heading's own
   theme margin so the wrapper-level margins below remain the single source of
   vertical spacing — exactly as when these were vc_custom_heading elements.
   Text color is inherited from the wrapper class (dark rows → #f4f2ec light,
   CTA → --ink) or set inline by the element (Expertise → violet via
   text_color="#7d5cc6"). */
.koop-hero__title h1,.koop-exp__title h2,
.koop-chall__title h2,.koop-cta__title h2{ margin:0; }

/* ---- 1. Hero ---- */
/* Same (0,2,0) specificity + !important as the generic `.koop.vc_row` rule
   above, declared later so it wins — gives the hero a slightly shorter,
   asymmetric vertical rhythm (more room above, a touch less below the lead). */
.koop.koop-hero{ padding-top:clamp(48px,7vw,104px) !important;
  padding-bottom:clamp(40px,5vw,72px) !important; }
.koop-eyebrow{ display:flex;align-items:center;gap:16px;margin-bottom:clamp(28px,4vw,52px); }
.koop-eyebrow__label{ font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#8f8f88; }
.koop-eyebrow__rule{ height:1px;flex:1;max-width:120px;background:rgba(255,255,255,.25); }
.koop-eyebrow__brand{ font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; }
.koop-hero__title{ font-weight:700;font-size:65px;line-height:67px;
  letter-spacing:-.02em;text-wrap:balance;margin:0;color:#f4f2ec; }
/* Every title of THIS page carries gt-america-expanded, so the page reads like
   the rest of the site instead of standing out.

   Measured in salient-dynamic-styles.css on 21.08.2026 -- the theme options,
   not this file, decide which level gets which family:
       body h1, h2, h4, h5, h6  -> Poppins
       body h3                  -> gt-america-expanded  (+ logo and main menu)
   The Cases page titles its references with h3, hence gt-america-expanded.
   This page uses one h1 (the hero) and h2 for its sections, so WITHOUT the
   rule below every one of them would fall back to Poppins and the page would
   be the only one on the site set in a different face.

   An earlier version of this comment claimed the site put its h2 in
   gt-america-expanded. It does not, and never did: that reading pinned the
   hero h1 alone and left the four section titles in Poppins, which is exactly
   the mismatch this rule closes.

   The elements are targeted, not their wrappers: an INHERITED family loses to
   any rule that matches the element itself, so `body h2` (0,0,2) would beat a
   family declared on the parent div. `.koop-exp__title h2` (0,1,1) wins.

   .koop-close__title is a raw-HTML <p>, not a heading, hence the flat
   selector. The "WIR LASSEN / VON UNS HÖREN" marquee at the foot is
   deliberately NOT listed: it is shared with the Cases page, where it renders
   in Poppins. Restyling it here would create the very divergence this rule
   exists to remove. */
.koop-hero__title h1,.koop-exp__title h2,.koop-chall__title h2,
.koop-cta__title h2,.koop-close__title{ font-family:'gt-america-expanded', sans-serif; }
.koop-hero__media img{ max-width:100%;height:auto;object-fit:contain; }
/* Explicit light color: the hero lead was the ONLY text element on a dark
   section without one, relying on inherited color — every sibling on a dark
   row (.koop-chall__title, .koop-list p, .koop-marquee__track span,
   .koop-close__title) pins #f4f2ec. Pinning it here makes the sub-headline
   reliably visible and clean on the #000000 background. */
.koop-hero__lead{ max-width:44ch;font-size:22px;font-weight:500;
  line-height:1.4;letter-spacing:-.01em;margin:0;color:#f4f2ec; }
/* The lead used to sit in its own full-width row below the image
   (.koop-hero__foot), which carried the vertical gap and the separating
   rule. It now lives in the SAME 2/3 column as the title, directly under
   it (user decision, 20.08.2026). The gap has to move with it, otherwise
   the text sticks to the title -- the spacing belonged to the container,
   never to the text. Adjacent-sibling selector rather than a plain
   margin-top so the rule only applies where the lead follows the title. */
.koop-hero__title + .koop-hero__lead{ margin-top:clamp(24px,3vw,40px); }

/* ---- 2. Expertise ---- */
.koop-exp{ color:var(--ink); }
/* The lockup's own column centers it vertically against the taller text
   column beside it -- per live user request, replacing the earlier
   "position:sticky" (floats near the top, leaving visible empty space
   below on tall viewports) with true centering: display:flex +
   align-items:center on the column wrapper. */
.koop-exp__lockup-col{ display:flex;align-items:center; }
.koop-lockup{ display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(22px,3vw,38px);
  aspect-ratio:4/5;width:100%;background:transparent;padding:clamp(28px,4vw,56px); }
.koop-lockup__label{ font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(13,13,13,.4); }
/* Both logos in the lockup are real images (not the styled-text "80/30"
   wordmark from the original handoff — replaced per explicit user decision
   with the site's own existing header logo asset). Sized independently:
   the 80/30 mark reads at roughly the same visual weight the text wordmark
   had, the Lux & Lux mark matches the handoff's own sizing intent.
   "!important" is required on width here: Salient's own theme stylesheet
   carries ".row .col img:not([srcset]){width:auto}" which, now that our
   rows correctly carry the theme's real .row/.col structure (see the
   class= vs el_class= fix), has higher selector specificity (0,3,0) than
   a single class selector (0,1,0) and was winning, rendering both logos
   at an uncontrolled ~240px regardless of these rules. */
.koop-lockup__logo-8030{ width:min(50%,140px) !important;height:auto;display:block;margin:0 auto; }
.koop-lockup__logo-luxlux{ width:min(80%,220px) !important;height:auto;display:block;margin:0 auto; }
.koop-exp__title{ font-weight:700;font-size:35px;line-height:45px;
  letter-spacing:-.02em;color:var(--violet);margin:0 0 24px; }
.koop-exp__lead{ font-size:16px;line-height:1.5;font-weight:500;
  color:rgba(13,13,13,.72);max-width:52ch;margin:0 0 26px;letter-spacing:-.005em; }
.koop-exp__body{ font-size:16px;line-height:1.5;
  color:rgba(13,13,13,.72);max-width:56ch;margin:0; }
.koop-stats{ margin-top:clamp(40px,5vw,64px);display:flex;gap:clamp(28px,4vw,56px);
  flex-wrap:wrap;border-top:1px solid var(--line-dark);padding-top:32px; }
.koop-stats__num{ display:block;font-weight:700;font-size:96px;
  line-height:1;letter-spacing:-.02em; }
.koop-stats__lbl{ display:block;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(13,13,13,.6);margin-top:8px; }

/* ---- 3. Herausforderungen ---- */
.koop-chall__title{ font-weight:700;font-size:35px;line-height:45px;
  letter-spacing:-.02em;text-wrap:balance;margin:0 0 40px;
  max-width:960px;color:#f4f2ec; }
.koop-list{ list-style:none;margin:0;padding:0;border-top:1px solid var(--line); }
.koop-list li{ display:grid;grid-template-columns:64px 1fr;gap:clamp(12px,2vw,28px);
  align-items:baseline;padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line); }
.koop-list span{ font-weight:700;font-size:15px;color:#8f8f88;letter-spacing:.05em; }
.koop-list p{ font-weight:700;font-size:20px;line-height:1.3;
  letter-spacing:-.01em;margin:0;color:#f4f2ec; }

/* ---- 4. CTA (standard variant only — no violet/pattern variant used on this page) ---- */
.koop-cta{ color:var(--ink);text-align:center; }
/* color:var(--ink) is set on the wrapper and inherited by the inner <h2> of
   the [split_line_heading] (which carries no inline color of its own on this
   light row) — a guaranteed-correct dark title on the warm-grey CTA background,
   independent of the element's own light/dark auto-detection. font-size etc.
   below now apply to the wrapper only; the inner <h2> takes the theme's real
   h2 size via font_style="h2". */
.koop-cta__title{ max-width:20ch;margin:0 auto;font-weight:700;color:var(--ink);
  font-size:35px;line-height:45px;letter-spacing:-.02em;text-wrap:balance; }
.koop-cta__sub{ margin:24px auto 0;max-width:40ch;
  font-size:16px;font-weight:500;color:rgba(13,13,13,.78); }
.koop-btn{ display:inline-flex;align-items:center;gap:12px;margin-top:clamp(32px,4vw,48px);
  background:var(--violet);color:#fff;font-weight:700;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;padding:18px 34px;border-radius:100px;text-decoration:none; }
.koop-btn span{ display:inline-block;transition:transform .2s ease; }
.koop-btn:hover{ opacity:.85; }
.koop-btn:hover span{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){
  .koop-btn span{ transition:none; }
}

/* ---- 5. Marquee ----
 * Styled after Lux & Lux's own marquee band on lux-seminare.de (their real
 * homepage, ".block-marquee-banner") per explicit user request -- exact
 * colors measured live via computed styles: background #FFF9F2 (cream),
 * text #002E4C (navy, their "--color-primary"), the accent glyph #D71B16
 * (red, matches the "&" in their own "Unsere Stärke sind Menschen & ...").
 * Their text is font-weight:800 -- this site's Google Fonts only loads
 * Poppins 400/500/700, so this stays at 700 (already the case) rather than
 * requesting an unavailable weight. */
/* The marquee sits on the DARK row (#000000 since 21.08.2026 — the four dark
   rows of this page used to be #0d0d0d, one shade off the #000000 of the
   site's global elements, and the seam was visible where the two met).
   Everything below is pinned to that background: the fade masks at both ends
   must match the row colour or they show up as two pale bands, and the text
   needs the same light ink every other element on a dark row uses (#f4f2ec).

   ⚠️ These two gradients are the reason the row colour cannot be changed from
   wp-admin alone: the bg_color lives in the page content, the mask endpoints
   live here, and they have to move together. */
.koop-marquee{ position:relative;overflow:hidden;border-block:1px solid rgba(255,255,255,.14);padding-block:clamp(18px,2.2vw,30px); }
.koop-marquee::before,.koop-marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,8vw,140px);
  z-index:1;pointer-events:none; }
.koop-marquee::before{ left:0;background:linear-gradient(to right, #000000, transparent); }
.koop-marquee::after{ right:0;background:linear-gradient(to left, #000000, transparent); }
.koop-marquee__track{ display:flex;width:max-content;animation:koop-marquee 28s linear infinite; }
.koop-marquee__track span{ font-weight:700;font-size:35px;
  letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;padding-right:48px;color:#f4f2ec; }
/* The red keeps enough contrast on #000000 to stay legible. */
.koop-marquee__track em{ color:#d71b16;font-style:normal; }
/* The endpoint MUST match the number of repetitions in the markup: the track
   is one flex row of identical spans, so looping back means travelling exactly
   one span's share of the total width. Two repetitions -> -50%. This went back
   to two on 20.08.2026 along with the dark background; leaving -33.3333% here
   would make the seam jump every 28 seconds, and nothing in the markup would
   show why. Change one, change the other. */
@keyframes koop-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---- 6. Closing ---- */
.koop.koop-close{ padding-top:clamp(64px,9vw,140px) !important;
  padding-bottom:clamp(64px,9vw,140px) !important; }
.koop-close__inner{ max-width:1100px; }
.koop-close__title{ font-weight:700;font-size:65px;line-height:67px;
  letter-spacing:-.02em;text-wrap:balance;margin:0;color:#f4f2ec; }

/* ---- Mobile ---- */
/* At the theme's own mobile breakpoint (≤690px) Salient auto-scales the
   vc_custom_heading titles (hero h1, expertise/challenge h2) down via its own
   !important rules — but NOT the two headline elements that are plain <p>:
   .koop-close__title (a raw-HTML <p>) and the big stat numbers. Left at the
   desktop 65px they overflow a phone. Match the theme's mobile h1 size. */
@media (max-width:690px){
  .koop-close__title{ font-size:42px;line-height:44px; }
  .koop-stats__num{ font-size:44px; }
}

/* ---- Reduced motion ----
 * Not in the original handoff CSS — added per this project's standing rule
 * (see the Swiper.js reduced-motion convention elsewhere in the child
 * theme): any infinite/looping animation must be neutralized for users who
 * asked the OS to reduce motion. koop-marquee (infinite scroll) is the
 * only animated rule remaining (the scroll hint was removed per live
 * user request). */
@media (prefers-reduced-motion: reduce){
  .koop-marquee__track{ animation: none; }
}