/* ==========================================================================
   Daltrice — Ackerfuchsschwanzbekämpfung in Getreide im Frühjahr
   --------------------------------------------------------------------------
   Companion stylesheet for daltrice.html (`<main class="daltrice">`).

   Scoped to `.daltrice` so it cannot leak into the rest of the site.
   `style.css` should be loaded FIRST — this file uses its design tokens and
   its `.desktop-only` / `.mobile-only` and `.link-button` rules (the button is
   re-skinned below, because the live page's button is not the site button).

   Every value below was read off the live page in a browser with
   getBoundingClientRect / getComputedStyle at 1440px, 768px and 500px — not
   estimated. The live page is a Vev embed with three tiers:

       desktop  >= 1024   1280 shell, 768 body column
       tablet   501-1023  stacked, h1 still 48/72
       mobile   <= 500    stacked, h1 32/40

   Type          h1 48/72 w600 #1C3C54 · h2 36/44 (w600 plain, w700 accented)
                 marker 20/30 w400 #475467 · body 16/24 · table 14/19.6
   Colour        green #5DB64C · ink #101828 · muted #475467 · soft #667085
                 tint band #F2F4F7 · logo bar #F5F5F5 · rules rgba(80,80,80,.23)
   Rhythm        white / tint bands joined by a 73px wave graphic
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* --------------------------------------------------------------------------
   0. The CMS wrapper
   The snippet is dropped inside `.layout__region.container`, which the theme
   pads with `--v2-container--padding`: 1rem below 768, 1.5rem to 1023, and 0
   from 1024, where `.section-full-width > .container` zeroes it anyway. Live's
   Vev block sits in no such container. Measured on both sides at 768: live's
   hero band is 768 wide at x=0, the deployed fragment 720 at x=24 — so every
   full-bleed band loses 48px and gains a white gutter down each side. At 390
   the same rule insets the fragment to 358. The theme also sets `32px 0` on
   `.section-full-width.section`, a white strip live does not have at any width.

   Zeroed across the whole band the theme pads, so this fragment's own tiers can
   carry live's real insets instead of live's minus the theme's.

   Unscoped by necessity: both elements are ancestors of this fragment, so no
   `.daltrice` selector can reach them. No `!important` needed either —
   `.layout__region.container` is (0,2,0) against the theme's `.container`
   (0,1,0), and `.section-full-width.layout.section` is (0,3,0) against
   `.section:first-of-type` (0,2,0), which this sheet would otherwise lose to
   on source order once the CMS aggregates it into the theme's first file.
   -------------------------------------------------------------------------- */
.section-full-width.layout.section {
  padding-top: 0;
  padding-bottom: 0;
}

@media screen and (max-width: 1023px) {
  .layout__region.container {
    padding-left: 0;
    padding-right: 0;
  }
}


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
.daltrice.daltrice {
  /* The Vev block declares Noto Sans; the site token is Noto Sans Display,
     kept as the fallback so the fragment still renders in brand type if only
     the site webfont is loaded. */
  --dt-font: "Noto Sans", "Noto Sans Display", sans-serif;
  --dt-font-table: "Open Sans", "Noto Sans", sans-serif;

  --dt-green: #5db64c;
  --dt-ink: #101828;
  --dt-navy: #1c3c54;
  --dt-muted: #475467;
  --dt-soft: #667085;
  --dt-tint: #f2f4f7;
  --dt-bar: #f5f5f5;
  --dt-rule: rgba(80, 80, 80, 0.23);
  --dt-rule-head: #d7d7d7;

  --dt-shell: 1280px;   /* logo bar, hero copy, chart caption */
  --dt-col: 768px;      /* headings, product table, contact copy */
  --dt-col-intro: 765px;
  --dt-col-table: 733px;
  --dt-col-note: 1152px;

  /* The width the two charts refuse to go below. Wherever the column is
     narrower than this they pan inside `.daltrice-chart-scroll` instead of
     shrinking into it (section 11b). 768 is 2.4 screens of pan at 390 and
     holds the plan's type at ~80% of the size it was drawn at. Raise it for
     more detail and more panning, lower it for less of both — and move the
     hint's 935px breakpoint in 11b with it. */
  --dt-chart-scroll: 768px;

  --dt-wave: 73px;
  --dt-wave-fill: #ffffff;
}


/* --------------------------------------------------------------------------
   Accent rules
   Live finishes several headings with a short bar — 72x2 in the page accent,
   centred, 24px under the heading and 20 under the two `Das Produktprofil`
   ones. Explicit elements rather than a heading `::after`, matching pergado:
   Vev positions them absolutely and they do not all sit at one distance, so a
   pseudo-element on the heading cannot express where each one lands.
   -------------------------------------------------------------------------- */
/* .daltrice.daltrice .daltrice-rule {
  display: block;
  width: 72px;
  height: 2px;
  margin: 24px auto 0;
  background: var(--dt-green);
} */

.daltrice.daltrice .daltrice-rule-tight {
  margin-top: 20px;
}

/* One of the five is navy, not green — live's own inconsistency, kept. */
.daltrice.daltrice .daltrice-rule-navy {
  background: var(--dt-navy);
}

/* --------------------------------------------------------------------------
   2. Base
   style.css applies `box-sizing: border-box` per component rather than
   globally, so this scope needs its own reset — without it every padded
   container overflows its band and the page scrolls sideways.
   -------------------------------------------------------------------------- */
.daltrice.daltrice,
.daltrice.daltrice *,
.daltrice.daltrice *::before,
.daltrice.daltrice *::after {
  box-sizing: border-box;
}

.daltrice.daltrice {
  font-family: var(--dt-font);
  color: var(--dt-ink);
  background: #ffffff;
  /* `clip`, never `hidden`. `overflow-x: hidden` computes `overflow-y` to
     `auto`, which turns this element into a scroll container — and a sticky
     child sticks to its nearest scrolling ancestor, so the nav would stick to
     a box that never scrolls and simply ride away with the page. `clip` does
     not establish a scroll container, so the bleed is still cut off (nothing
     can be dragged sideways) while the sticky bar keeps referring to the
     viewport. If it is ever changed back to `hidden`, the menu stops sticking. */
  overflow-x: clip;
}

/* Plain selectors only — no :where(). A CMS CSS pipeline that cannot parse it
   would drop the rule, and anything load-bearing (the reset, the centring)
   must not be able to disappear that way. Every component rule below carries a
   `.daltrice ` prefix so it outranks this reset. */
.daltrice.daltrice h1,
.daltrice.daltrice h2,
.daltrice.daltrice h3,
.daltrice.daltrice p,
.daltrice.daltrice figure,
.daltrice.daltrice figcaption,
.daltrice.daltrice ul,
.daltrice.daltrice li {
  margin: 0;
  padding: 0;
}

.daltrice.daltrice ul {
  list-style: none;
}

.daltrice.daltrice img {
  max-width: 100%;
}

.daltrice.daltrice a {
  text-decoration: none;
}

 .daltrice.daltrice tbody,
 .daltrice.daltrice tbody tr {
  background: transparent !important;
 }

/* Every band is full bleed; its content sits in a centred 1280 shell. The
   container is a real element rather than a rule on `section > *` so the
   centring survives whatever wrapper the CMS puts around the fragment. */
.daltrice.daltrice > section {
  padding-left: 32px;
  padding-right: 32px;
}

.daltrice.daltrice .daltrice-container {
  width: 100%;
  max-width: var(--dt-shell);
  margin-left: auto;
  margin-right: auto;
}

/* Blocks centre inside the shell. Margins only — never max-width, or this
   would clobber the narrower column each block declares for itself (768 body,
   733 tables, 924/962 figures, 1152 notes). Both selectors are listed so the
   centring holds whether or not the container element is present. */
.daltrice.daltrice > section > *,
.daltrice.daltrice .daltrice-container > * {
  margin-left: auto;
  margin-right: auto;
}

.daltrice.daltrice .daltrice-band {
  background-color: var(--dt-tint);
}

/* --------------------------------------------------------------------------
   3. Shared type
   -------------------------------------------------------------------------- */
/* Eyebrow above a section heading. Muted, not heading ink, and not uppercased
   by CSS — the copy itself carries the capitals. */
.daltrice.daltrice .daltrice-marker {
  max-width: var(--dt-col);
  margin-left: auto;
  margin-right: auto;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: var(--dt-muted);
  text-align: center;
}

.daltrice.daltrice .daltrice-h2 {
  max-width: var(--dt-col);
  margin-left: auto;
  margin-right: auto;
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
  color: var(--dt-ink);
  text-align: center;
}

/* The three accented section headings run one weight heavier than the plain
   ones ("Die Stärken", "Schwerpunktempfehlung"). */
.daltrice.daltrice .daltrice-h2-bold {
  font-weight: 700;
}

/* Every section heading sits above a 72x2 rule, 20px below the last line.
   It is green everywhere except under the Wirkung headline, where the live
   page draws it in the hero navy. */
.daltrice.daltrice .daltrice-h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin: 20px auto 0;
  background: var(--dt-green);
}

/* --------------------------------------------------------------------------
   4. Wave dividers and the empty bands
   Both wave curves are inline SVG sitting on the tint colour: `-down` carries
   white into tint, `-up` carries tint back into white.
   -------------------------------------------------------------------------- */
.daltrice.daltrice .daltrice-wave,

.daltrice.daltrice .daltrice-gap {
  height: var(--dt-wave);
}

.daltrice.daltrice .daltrice-wave {
  background-color: var(--dt-tint);
}

/* The curve is traced off the two bitmaps this page used to load, so it is
   the same divider; `slice` is what `background-size: cover` was and the
   xMid/YMid vs YMax in the markup are the two background-positions, so the
   crop at narrow widths is unchanged. Explicit `overflow` because a theme
   sheet setting `svg { overflow: visible }` would let the sliced curve
   paint outside the strip. */
.daltrice.daltrice .daltrice-wave svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  fill: var(--dt-wave-fill);
}

/* --------------------------------------------------------------------------
   5b. Section menu — the one-pager anchor nav
   Same component as index.html's `#bk-nav`: `.sticky-nav` + a page skin, with
   the links and the logo sharing one `.nav-container`. The rules are written
   out here rather than inherited because style.css is NOT loaded alongside
   this fragment. The metrics are copied from it with its tokens resolved:

     --font-size-nav        14px    --container-desktop  1140px -> --dt-shell
     --line-height-nav      19px    --spacing-6 / -5 / -2   24 / 20 / 8
     --letter-spacing-nav   0.224px mobile nav type      12/17/0.192
     --shadow-3             0 1px 4px rgba(0,0,0,.4)     bar height  72px

   The colours are NOT copied: the reference paints its own palette
   (--color-neutral-0/-100/-200/-900, --bk-accent), and every one of those is
   mapped below to this page's equivalent token instead.
   -------------------------------------------------------------------------- */
/* Structure, metrics and behaviour are the reference's `.sticky-nav`; every
   colour is this page's own token, so the bar reads as part of Daltrice rather
   than as a transplant. --dt-bar is the grey the live page already used for its
   top bar, and it is also what the shared component's base skin
   (`.secondary-nav`, --color-neutral-50) paints — the two agree. */
.daltrice.daltrice {
  --dt-nav-bg: var(--dt-bar); /* #f5f5f5 */
  --dt-nav-line: var(--dt-rule-head); /* #d7d7d7 */
  --dt-nav-ink: var(--dt-ink); /* #101828 */
  --dt-nav-accent: var(--dt-green); /* #5db64c */
  --dt-nav-h: 72px;
  --dt-nav-top: 0px;
}

/* The room the site header needs above the bar, exactly as style.css tiers it
   (lines 397-411): 110 normally, 56 once the header collapses, 160 logged in,
   106 logged in and collapsed. style.css applies the 110 unconditionally via
   `body .sticky-nav`, which cannot be copied verbatim — this fragment also has
   to render where there is no site header at all (a preview, or a page that
   drops it), and an unconditional 110 would leave a dead band above the bar.
   Every tier is therefore gated on `.main-header` actually being present, so
   the offsets match style.css on the real site and collapse to 0 without it.
   The script reads the resolved `top` back off the bar, so the eased scroll and
   the scroll-spy follow whichever tier is in play with no second constant. */
body:has(.main-header) .daltrice {
  --dt-nav-top: 110px;
}

body:has(.main-header).user-logged-in .daltrice {
  --dt-nav-top: 160px;
}

body:has(.main-header.collapsed) .daltrice {
  --dt-nav-top: 56px;
}

body:has(.main-header.collapsed).user-logged-in .daltrice {
  --dt-nav-top: 106px;
}

/* Those four are desktop tiers. The site header only stays partly on screen
   when it collapses at 1280 and up — that behaviour comes from a pair of rules
   the theme gates behind `@media (min-width: 1280px)`:

     .main-header.collapsed { min-height: 108px; transform: translate3d(0,-50%,0) }

   Below 1280 neither applies and the base rule wins instead:

     .main-header.collapsed { transform: translate3d(0,-100%,0) }

   so the header slides fully out of view and there is nothing left for the bar
   to clear. Holding 56/106 there parks it that far down the viewport with dead
   space above it — visible the moment you scroll down far enough to stick it,
   and it never closes up on the way back. Measured on the deployed page: the
   collapsed header's bottom edge is at 0 at both 390 and 768.

   Expanded, the header is 64 tall below 1280 rather than 110, plus the admin
   toolbar when an editor is logged in (39 on mobile, 53 from 1024 up). */
@media (max-width: 1279px) {
  body:has(.main-header) .daltrice {
    --dt-nav-top: 64px;
  }

  body:has(.main-header).user-logged-in .daltrice {
    --dt-nav-top: 64px;
  }

  body:has(.main-header.collapsed) .daltrice,
  body:has(.main-header.collapsed).user-logged-in .daltrice {
    --dt-nav-top: 0px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  body:has(.main-header).user-logged-in .daltrice {
    --dt-nav-top: 117px;
  }

  /* Editors only: from 1024 the theme pins the collapsed header at `top: 53px`
     to clear the admin toolbar, so translating it up by its own 64 still
     leaves 53 of it on screen. The header outranks the bar on z-index, so
     without this the bar slides under that strip. */
  body:has(.main-header.collapsed).user-logged-in .daltrice {
    --dt-nav-top: 53px;
  }
}

.daltrice.daltrice .sticky-nav {
  position: sticky;
  top: var(--dt-nav-top);
  z-index: 20;
  transition:
    box-shadow 0.3s ease,
    top 0.3s ease-in-out;
}

.daltrice.daltrice .daltrice-nav {
  background-color: var(--dt-nav-bg);
  border-bottom: 1px solid var(--dt-nav-line);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4); /* --shadow-3 */
}

/* The reference carries the shadow at rest and `.scrolled` re-applies the same
   --shadow-3, so the bar looks identical scrolled or not. We had been hiding it
   until `.scrolled` landed, which made the bar change on scroll and made it
   depend on the script running. `.scrolled` is still toggled past 100px so the
   hook stays available, it just resolves to the same shadow. */
.daltrice.daltrice .sticky-nav.scrolled {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
}

/* border-box like the reference: as content-box the 16px padding made the bar
   32px wider than the viewport below 1024 and the whole page could be dragged
   sideways. */
/* The reference sets this to `--container-desktop`, i.e. its own page shell —
   1140 there. This page's shell is 1280, so that is the faithful translation:
   at a literal 1140 the first link sits 70px inside the content column below
   it and the bar reads as belonging to a different grid. */
.daltrice.daltrice .nav-container {
  box-sizing: border-box;
  max-width: var(--dt-shell);
  height: var(--dt-nav-h);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* `contents` so the links sit directly in the container's flex row; from 1140
   down it becomes a real box that clips the scrolling strip. */
.daltrice.daltrice .nav-scroll-container {
  display: contents;
}

.daltrice.daltrice .nav-links {
  display: flex;
  align-items: center;
  height: 27px;
  gap: 24px;
  overflow: visible;
}

/* The 4px underline sits on the 27px item, not on the full-height bar — at
   `height: 100%` it ends up stranded at the bottom of the navbar instead of
   under its own label. `box-sizing` keeps the border inside the 27px. */
.daltrice.daltrice .nav-link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  border-bottom: 4px solid transparent;
  font-family: var(--dt-font-table);
  font-size: 14px;
  line-height: 19px;
  font-weight: 600;
  letter-spacing: 0.224px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dt-nav-ink);
  transition: border-color 0.3s ease;
}

.daltrice.daltrice .nav-link:hover,
.daltrice.daltrice .nav-link:focus-visible,
.daltrice.daltrice .nav-link.active {
  border-bottom-color: var(--dt-nav-accent);
  opacity: 1;
}

/* The inline menu script moves `.active` as you scroll and calls
   preventDefault, so no hash is ever set and `:target` never matches while it
   is running. These rules are the no-script fallback: without them the
   underline would sit on Start for good. */
.daltrice.daltrice:has(> section[id]:target) .nav-link.active {
  border-bottom-color: transparent;
}

.daltrice.daltrice:has(#start:target) .nav-link[href="#start"],
.daltrice.daltrice:has(#produktprofil:target) .nav-link[href="#produktprofil"],
.daltrice.daltrice:has(#wirkung:target) .nav-link[href="#wirkung"],
.daltrice.daltrice:has(#anwendung:target) .nav-link[href="#anwendung"],
.daltrice.daltrice:has(#footer:target) .nav-link[href="#footer"] {
  border-bottom-color: var(--dt-nav-accent);
}

.daltrice.daltrice .daltrice-nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.daltrice.daltrice .daltrice-nav-logo img {
  display: block;
  max-height: 40px;
  width: auto;
}

.daltrice.daltrice .nav-arrow {
  display: none;
}

/* Pinned so the uploaded arrow SVG cannot render at its own intrinsic size. */
.daltrice.daltrice .nav-arrow .chevron-right {
  display: block;
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
  /* Same colour as the underline the active menu item carries. It only
     bites because the chevron is an inline <svg>: the uploaded
     `arrow 1.svg` was served as an <img>, and no CSS repaints the
     inside of an image. */
  fill: var(--dt-nav-accent);
}

.daltrice.daltrice .nav-arrow.left .chevron-right {
  transform: rotate(180deg);
}

/* Once the 1140 shell is the whole viewport the bar would touch both edges. */
@media (max-width: 1024px) {
  .daltrice.daltrice .nav-container {
    padding: 12px 16px;
  }
}

/* From 1140 down the row scrolls instead of wrapping — the reference lets its
   labels break mid-word otherwise. `min-width: 0` is what lets the flex item
   shrink below its content and scroll internally rather than overflow the bar.
   While the row still fits, the overflow is inert. */
@media (max-width: 1140px) {
  .daltrice.daltrice .nav-links {
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .daltrice.daltrice .nav-links::-webkit-scrollbar {
    display: none;
  }

  .daltrice.daltrice .nav-link {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* The scrolling row needs an affordance, so the chevrons come back as edge
   overlays. The white glow lets the links fade out underneath them. Held above
   768 so the mobile bar below, which positions them differently, is untouched. */
@media (min-width: 769px) and (max-width: 1140px) {
  .daltrice.daltrice .nav-scroll-container {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .daltrice.daltrice .nav-links {
    flex: 1;
  }

  .daltrice.daltrice .nav-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    transform: translateY(-50%);
    background-color: var(--dt-nav-bg);
    cursor: pointer;
    transition: opacity 0.3s ease;
  }

  .daltrice.daltrice .nav-arrow.left {
    left: 0;
    opacity: 0;
    visibility: hidden;
    box-shadow: 12px 0 12px 5px var(--dt-nav-bg);
  }

  .daltrice.daltrice .nav-arrow.left.visible {
    opacity: 1;
    visibility: visible;
  }

  .daltrice.daltrice .nav-arrow.right {
    right: 0;
    box-shadow: -12px 0 12px 5px var(--dt-nav-bg);
  }
}

/* Below 768 the bar stacks: logo on top, the scrolling strip beneath it, with
   an arrow pinned to each end of the strip. */
@media (max-width: 768px) {
  .daltrice.daltrice {
    --dt-nav-h: auto;
  }

  .daltrice.daltrice .nav-container {
    width: 100%;
    height: auto;
    min-height: auto;
    padding: 12px 16px;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 8px;
  }

  .daltrice.daltrice .nav-scroll-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 23px;
    gap: 0;
    overflow: hidden;
  }

  .daltrice.daltrice .nav-links {
    flex: 1;
    position: relative;
    height: 100%;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
  }

  .daltrice.daltrice .nav-links .nav-link {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 0.192px;
    white-space: nowrap;
  }

  .daltrice.daltrice .nav-arrow {
    position: absolute;
    top: 0;
    z-index: 10;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: var(--dt-nav-bg);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .daltrice.daltrice .nav-arrow.left {
    left: -5px;
    opacity: 0;
    visibility: hidden;
  }

  .daltrice.daltrice .nav-arrow.left.visible {
    opacity: 1;
    visibility: visible;
    box-shadow: #000000 -10px 0 30px 0;
  }

  .daltrice.daltrice .nav-arrow.right {
    right: -5px;
    opacity: 1;
    visibility: visible;
  }

  .daltrice.daltrice .nav-arrow.right.visible {
    opacity: 1;
    visibility: visible;
    box-shadow: #000000 10px 0 30px 0;
  }

  .daltrice.daltrice .nav-arrow:hover {
    background-color: var(--dt-navy);
  }
}
/* --------------------------------------------------------------------------
   5c. Anchor scrolling
   Pure CSS, so daltrice.js stays animation-only. Where app.js is loaded it
   intercepts these clicks and runs its own eased scroll instead; both land in
   the same place, and this is what keeps the menu working without it.

   The scroll happens on the document, so `scroll-behavior` has to be set on
   the root — scoped through `:has()` so a page without this fragment keeps
   whatever the site already does.
   -------------------------------------------------------------------------- */
:root:has(.daltrice) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  :root:has(.daltrice) {
    scroll-behavior: auto;
  }
}

/* Clears the sticky bar, so the section heading is never parked underneath it.
   On #start it resolves to scroll position 0, since the hero begins at exactly
   the bar's height. Only sections carrying an id are targets. The inline menu
   script derives the same offset from the bar when it takes over scrolling. */
/* Matches where app.js's `smoothScrollTo` puts a section: its own
   `getStickyNavOffset()` (bar height + the header tier above it) plus the 16px
   breathing gap that function subtracts on top. Same landing with or without
   the script, and it follows --dt-nav-top rather than repeating the constant. */
.daltrice.daltrice > section[id] {
  scroll-margin-top: calc(var(--dt-nav-top) + 73px + 16px); /* 72 bar + 1 hairline + 16 gap */
}

@media (max-width: 768px) {
  .daltrice.daltrice > section[id] {
    /* stacked bar: logo row + link strip + hairline */
    scroll-margin-top: calc(var(--dt-nav-top) + 96px + 16px);
  }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.daltrice.daltrice .daltrice-hero {
  position: relative;
  min-height: 574px;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

.daltrice.daltrice .daltrice-hero-media {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 704px;
  max-width: 55%;
  height: 100%;
}

/* Above 1440 the live page stops holding the photo at 704 and lets it take
   half the viewport, still flush to the right edge — measured 800 at 1600 and
   960 at 1920. */
@media (min-width: 1441px) {
  .daltrice.daltrice .daltrice-hero-media {
    width: 50%;
    max-width: none;
  }
}

/* The source is a 1440 square and the frame is 704x575, so cover crops 129px
   off the height. The live page anchors that crop to the TOP of the photo
   (`object-position: 100% 0%`) — centring it instead loses the sky and shifts
   the horizon down by 64px. */
.daltrice.daltrice .daltrice-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 0%;
}

/* The mobile crop is a 2.27:1 letterbox dropped into a 1.47:1 frame, so cover
   crops the width instead — anchored left, again matching the live page. */
.daltrice.daltrice .daltrice-hero-photo.mobile-only {
  object-position: 0% 0%;
}

/* The organic left edge of the photo is a white shape laid over it, exactly
   as the live page draws it. */
.daltrice.daltrice .daltrice-hero-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.daltrice.daltrice .daltrice-hero-body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--dt-shell);
  margin: 0 auto;
  padding: 0 32px;
}

.daltrice.daltrice .daltrice-hero-copy {
  max-width: 592px;
}

.daltrice.daltrice .daltrice-hero-title {
  font-size: 48px;
  line-height: 72px;
  font-weight: 600;
  color: var(--dt-navy);
}

.daltrice.daltrice .daltrice-hero-lead {
  max-width: 498px;
  margin-top: 24px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: var(--dt-muted);
}

/* --------------------------------------------------------------------------
   7. Intro copy — centred, no heading, band flush to its neighbours
   -------------------------------------------------------------------------- */
.daltrice.daltrice .daltrice-intro {
  padding-top: 0;
  padding-bottom: 0;
}

.daltrice.daltrice .daltrice-intro-copy {
  max-width: var(--dt-col-intro);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.daltrice.daltrice .daltrice-intro-copy p {
  font-size: 16px;
  line-height: 24px;
  color: var(--dt-ink);
}

.daltrice.daltrice .daltrice-intro-copy p + p {
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   8. Die Stärken — icon over centred copy, no card fill, no card headings
   -------------------------------------------------------------------------- */
.daltrice.daltrice .daltrice-strengths {
  padding-top: 92px;
  padding-bottom: 54px;
}

.daltrice.daltrice .daltrice-strengths .daltrice-h2::after {
  margin-top: 24px;
}

.daltrice.daltrice .daltrice-strengths-list {
  margin-top: 64px !important;
  display: grid;
  grid-template-columns: repeat(4, 251px);
  justify-content: center;
  /* Each card hugs its own copy on the live page rather than levelling with
     its neighbours — 152/128/176/176 at 1440. */
  align-items: start;
  gap: 32px;
}

/* No fill: the live card declares `background: rgba(249,250,251,0)` — the
   colour is there but the alpha is zero, so nothing paints. Verified by
   sampling the rendered pixels, which come back pure white. The 16px radius is
   real but has nothing to round. */
.daltrice.daltrice .daltrice-strengths-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 16px;
  text-align: center;
}

.daltrice.daltrice .daltrice-strengths-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* Full width, not shrink-to-fit: `align-items: center` on the card would size
   each paragraph to its longest line, so once the cards stack the four blocks
   would centre their copy on four different column widths. */
.daltrice.daltrice .daltrice-strengths-item p {
  width: 100%;
  margin-top: 24px;
  font-size: 16px;
  line-height: 24px;
  color: var(--dt-muted);
}

/* --------------------------------------------------------------------------
   9. Produktprofil
   -------------------------------------------------------------------------- */
.daltrice.daltrice .daltrice-profile {
  padding-top: 40px;
  padding-bottom: 40px;
}

.daltrice.daltrice .daltrice-profile .daltrice-h2 {
  margin-top: 20px;
}

.daltrice.daltrice .daltrice-profile-table {
  display: table;
}

.daltrice.daltrice .daltrice-profile-table-mobile {
  display: none;
}

.daltrice.daltrice .daltrice-profile-table,

.daltrice.daltrice .daltrice-profile-table-mobile {
  width: 100%;
  max-width: var(--dt-col);
  margin: 76px auto 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--dt-font-table);
}

/* 54px rows: the live cells wrap their text in a <p> carrying 8/9px margins on
   top of the cell's own 8px padding, which is folded into the padding here. */
.daltrice.daltrice .daltrice-profile-table td,

.daltrice.daltrice .daltrice-profile-table-mobile td {
  padding: 16px 8px 17px;
  border-top: 1px solid var(--dt-rule);
  border-bottom: 1px solid var(--dt-rule);
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: var(--dt-muted);
  text-align: left;
  vertical-align: middle;
}

.daltrice.daltrice .daltrice-profile-table td.daltrice-profile-key {
  width: 253px;
  font-weight: 700;
}

.daltrice.daltrice .daltrice-profile-table-mobile strong {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   10. Buttons
   The live button is not the site's `.link-button` — it is a soft green pill
   with sentence case and no arrow, so the site rule is re-skinned here.
   -------------------------------------------------------------------------- */
.daltrice.daltrice .daltrice-cta {
  margin-top: 75px;
  text-align: center;
}

.daltrice.daltrice .link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 11px 20px;
  border: 1px solid var(--dt-green);
  border-radius: 8px;
  background: var(--dt-green);
  font-family: var(--dt-font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #ffffff;
  text-transform: none;
  text-align: center;
}

.daltrice.daltrice .link-button::after,
.daltrice.daltrice .link-button span::after {
  content: none;
}

.daltrice.daltrice .link-button:hover {
  background: #ffffff;
  color: var(--dt-green);
}

/* --------------------------------------------------------------------------
   11. Wirkung — trial chart
   -------------------------------------------------------------------------- */
.daltrice.daltrice .daltrice-effect {
  padding-top: 40px;
  padding-bottom: 40px;
}

.daltrice.daltrice .daltrice-effect .daltrice-h2 {
  margin-top: 24px;
}

.daltrice.daltrice .daltrice-effect .daltrice-h2::after {
  margin-top: 24px;
  background: var(--dt-navy);
}

.daltrice.daltrice .daltrice-effect-figure {
  margin-top: 64px;
}

.daltrice.daltrice .daltrice-effect-figure img {
  display: block;
  width: 924px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* The chart source line is a full-shell 16px note, unlike the 14px table
   footnotes further down. */
.daltrice.daltrice .daltrice-source {
  margin-top: 64px;
  font-size: 16px;
  line-height: 24px;
  color: var(--dt-ink);
  text-align: center;
}

/* --------------------------------------------------------------------------
   11b. Chart side scroll
   The two charts on the page — the Wirkung spider web (924) and the
   Schwerpunktempfehlung plan (962) — are dense artwork that goes unreadable
   once it is squeezed into a narrow column. Inside `.daltrice-chart-scroll`
   they hold `--dt-chart-scroll` and pan sideways instead, built the same way
   as the Boxer HRAC table:

     - no breakpoint on the mechanics. The wrapper scrolls at every width and
       the chart carries a `min-width`, so panning starts by itself the moment
       the column is narrower than the chart — the way Boxer's 793px table
       does. A `@media` gate would have to guess that width, and the column
       here is set by `clamp(24px, 10.94vw, 84px)` section padding, not by the
       viewport.
     - `min-width` rather than `width` for the chart. Per CSS a used min-width
       beats max-width, so this survives a theme rule that clamps images with
       `max-width: 100% !important` — the failure mode a `width` override has
       no answer to once the fragment is inside the CMS.

   The <figure> is deliberately NOT the scroll container: the caption and the
   hint are siblings of this wrapper, so they stay put in the column instead
   of sliding out of view with the chart. The wrapper stays inside the
   section's own padding too, so the bands keep live's horizontal rhythm and
   only the image overflows. The page runs taller than live wherever a chart
   pans, by the difference between the panned height and the squeezed one.
   -------------------------------------------------------------------------- */
/* Boxer gives the scroller and every box above it `min-width: 0`: a flex or
   grid child refuses to shrink below its content without it, and then the
   figure — not the wrapper — is what overflows. These are plain blocks today,
   so it costs nothing and stops the pattern breaking if either chart is ever
   moved into a flex column. */
.daltrice.daltrice .daltrice-effect-figure,
.daltrice.daltrice .daltrice-recommendation-figure,
.daltrice.daltrice .daltrice-chart-scroll {
  min-width: 0;
}

/* `overflow-y: hidden` matters: `auto` on one axis computes the other one to
   `auto` as well, which would let the box scroll vertically by the height of
   its own scrollbar. It also stops the chart's top margin collapsing out of
   the wrapper — harmless here, since neither chart sits below a box with a
   bottom margin, so the gap above it is the same either way (measured). */
.daltrice.daltrice .daltrice-chart-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* The one rule that makes a chart pan. Both charts keep their own
   `width`/`max-width` further down, which still size them on a wide column;
   this only sets the floor they refuse to go below. */
.daltrice.daltrice .daltrice-chart-scroll img {
  min-width: var(--dt-chart-scroll);
}

/* Sits under a panning chart. The reset above zeroes every <p> margin, so
   this one is set explicitly. */
.daltrice.daltrice .daltrice-scroll-hint {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--dt-muted);
  text-align: right;
}

/* Shown only where there is actually something to pan. The mechanics need no
   breakpoint but the hint does, so this is the one place a width is spelled
   out: section padding caps at 84px a side, so the column is 768 — the chart's
   own floor — at a 936px viewport, making 935 the last width at which either
   chart overflows. Above it the column fits `--dt-chart-scroll` and both
   charts render inline. Keep this in step with that token.

   Measured, not derived: on a viewport with a classic 16px scrollbar the
   column reaches 768 at a 952px window instead, so between 936 and 951 on a
   desktop browser a chart can pan with the hint already hidden. Phones and
   tablets use overlay scrollbars and hit the boundary exactly; the 16px band
   is a mouse-only edge and is left rather than shown a hint 16px early on
   every touch device, where a hint that points at nothing is the worse
   failure. */
@media (max-width: 935px) {
  .daltrice.daltrice .daltrice-scroll-hint {
    display: flex;
  }
}

.daltrice.daltrice .daltrice-scroll-hint-arrow {
  flex: 0 0 24px;
  width: 24px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   12. Wirkungsspektrum — two stacked tables, centred
   -------------------------------------------------------------------------- */
.daltrice.daltrice .daltrice-spectrum {
  padding-top: 40px;
  padding-bottom: 40px;
}

.daltrice.daltrice .daltrice-spectrum .daltrice-h2 {
  margin-top: 20px;
}

.daltrice.daltrice .daltrice-tables {
  max-width: var(--dt-col-table);
  margin: 80px auto 0;
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.daltrice.daltrice .daltrice-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

/* 57px header rows, 46px body rows — same folded-in <p> margins as above. */
.daltrice.daltrice .daltrice-table th {
  padding: 8px 8px 9px;
  border-top: 1px solid var(--dt-rule-head);
  border-bottom: 1px solid var(--dt-rule-head);
  background: var(--dt-green);
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: #ffffff;
  text-align: left;
  vertical-align: middle;
}

.daltrice.daltrice .daltrice-table td {
  padding: 12px 8px 13px;
  border-top: 1px solid var(--dt-rule);
  border-bottom: 1px solid var(--dt-rule);
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: var(--dt-muted);
  text-align: left;
  vertical-align: middle;
}

.daltrice.daltrice .daltrice-table th strong,

.daltrice.daltrice .daltrice-table td strong {
  font-weight: 700;
}

/* The rating dots. Qualified with `td` because `.daltrice-table td` matches the
   very same element — a plain `.daltrice-dots` rule loses to it on specificity
   and the dots silently render at the 14px cell size. The live page dodges this
   by putting the dots in a <blockquote> inside the cell; same result, and the
   4px cell padding keeps the row at 46px around the taller 36.4px line. */
.daltrice.daltrice .daltrice-table td.daltrice-dots {
  padding: 4px 8px;
  font-size: 26px;
  line-height: 36.4px;
  color: var(--dt-green);
  white-space: nowrap;
}

/* `stretch`, not `center`: the third item is shorter than the other two (its
   single dot runs on a 12px leading) and the live page levels all three to
   45px rather than floating it. */
/* `!important`: delta3's `.block.block-snippet-manager ul:not(...)` zeroes
   every ul margin at (0,4,3), which no amount of scope doubling reaches. */
.daltrice.daltrice .daltrice-legend {
  margin-top: 80px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
}

/* Each entry is a padded pill — no fill, but the 16px inset is what puts the
   three of them 24px apart instead of butting the dots against the text.
   Measured 201 / 157 / 129 wide on the live page. */
.daltrice.daltrice .daltrice-legend li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 20px;
  color: var(--dt-ink);
}

.daltrice.daltrice .daltrice-legend-dots {
  font-size: 21px;
  line-height: 29.4px;
  color: var(--dt-green);
  white-space: nowrap;
}

/* A single dot is optically raised by the live page's tighter leading. */
.daltrice.daltrice .daltrice-legend-dots-one {
  line-height: 12px;
}

.daltrice.daltrice .daltrice-note {
  max-width: var(--dt-col-note);
  margin: 24px auto 0;
}

.daltrice.daltrice .daltrice-note p {
  font-size: 14px;
  line-height: 20px;
  color: var(--dt-soft);
  text-align: center;
}

/* --------------------------------------------------------------------------
   13. Schwerpunktempfehlung
   -------------------------------------------------------------------------- */
.daltrice.daltrice .daltrice-recommendation {
  padding-top: 0;
  padding-bottom: 0;
}

.daltrice.daltrice .daltrice-recommendation-image {
  display: block;
  width: 962px;
  max-width: 100%;
  height: auto;
  margin: 64px auto 0;
}

/* --------------------------------------------------------------------------
   14. Ansprechpartner
   -------------------------------------------------------------------------- */
.daltrice.daltrice .daltrice-contact {
  padding-top: 72px;
  padding-bottom: 80px;
  text-align: center;
}

.daltrice.daltrice .daltrice-contact-avatar {
  display: block;
  /* Live's disc is 96 and sits dead centre; the 149px figure the page reports
     is the zoomed image inside this well, not the well itself. */
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

/* Live does not fit the portrait into the circle: it renders the image at
   148.5px square (154.704% of the 96px well) and slides it up and left, so the
   visible disc is a tight crop on the two faces. Fitting it instead pulls the
   whole landscape frame in and shrinks the two people to nothing. Percentages
   keep the crop proportional if the well is ever resized; both resolve against
   the well's WIDTH. `max-width` has to be released or the site reset clamps the
   image back to 96. */
.daltrice.daltrice .daltrice-contact-avatar img {
  display: block;
  width: 154.704%;
  height: 154.704%;
  max-width: none;
  margin-top: -2.052%;
  margin-left: -32.993%;
  object-fit: cover;
  object-position: 61% 6%;
}

.daltrice.daltrice .daltrice-contact-title {
  margin: 29px auto 0;
  max-width: var(--dt-col);
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  color: var(--dt-ink);
}

.daltrice.daltrice .daltrice-contact-copy {
  margin: 8px auto 0;
  max-width: var(--dt-col);
  font-size: 16px;
  line-height: 24px;
  color: var(--dt-muted);
}

.daltrice.daltrice .daltrice-contact .daltrice-cta {
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   16b. Back to top — style.css's `#go-to-top` with its tokens resolved:

     --size-icon-large   80px      --shadow-icon  0 4px 8px rgba(0, 0, 0, .1)
     --color-neutral-0   #ffffff   bottom 25 · right 27 · z-index 1000

   Hidden until the page has scrolled 300px, when the script adds `.show`.
   `visibility` rides along with the opacity so the button cannot be tabbed to
   or clicked while it is invisible — that is style.css's own behaviour.

   Written against a class rather than that id: if a page ever carries both
   this fragment and the site's button, two `#go-to-top`s would collide and
   `getElementById` would leave one of them dead.
   -------------------------------------------------------------------------- */
.daltrice.daltrice .daltrice-totop {
  position: fixed;
  right: 27px;
  bottom: 25px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  font-size: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    background-color 0.3s,
    opacity 0.5s,
    visibility 0.5s;
}

.daltrice.daltrice .daltrice-totop.show {
  opacity: 1;
  visibility: visible;
}

.daltrice.daltrice .daltrice-totop:hover {
  cursor: pointer;
}

/* The site serves this arrow as top.svg. Inlined rather than linked so the
   fragment does not depend on a files path that differs per environment. */
.daltrice.daltrice .daltrice-totop svg {
  width: 29px;
  height: 29px;
  fill: #4c5cc5;
}

/* --------------------------------------------------------------------------
   15. Responsive asset switch — must stay after the img/table rules above
   `.desktop-only` / `.mobile-only` in style.css are single-class selectors, so
   the element rules above out-specify them and both variants would render.
   These re-assert the switch at matching specificity, and give tables
   `display: table` instead of `block` so the mobile table keeps table layout.
   -------------------------------------------------------------------------- */
.daltrice.daltrice img.desktop-only,
.daltrice.daltrice div.desktop-only,
.daltrice.daltrice span.desktop-only,
.daltrice.daltrice svg.desktop-only {
  display: block;
}

.daltrice.daltrice img.mobile-only,
.daltrice.daltrice div.mobile-only,
.daltrice.daltrice span.mobile-only,
.daltrice.daltrice svg.mobile-only {
  display: none;
}

.daltrice.daltrice table.desktop-only {
  display: table;
}

.daltrice.daltrice table.mobile-only {
  display: none;
}


/* --------------------------------------------------------------------------
   16. Tablet and below (<= 1024) — the live page's stacked tier
   The photo moves above the copy at full bleed and takes the wider crop, and
   the cards drop to one column. Type, logo bar and wave heights stay at the
   desktop values here — the live page only rescales them below 600.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .daltrice.daltrice img.desktop-only,
  .daltrice.daltrice div.desktop-only,
  .daltrice.daltrice span.desktop-only,
  .daltrice.daltrice svg.desktop-only,
  .daltrice.daltrice table.desktop-only {
    display: none;
  }

  .daltrice.daltrice img.mobile-only,
  .daltrice.daltrice div.mobile-only,
  .daltrice.daltrice span.mobile-only,
  .daltrice.daltrice svg.mobile-only {
    display: block;
  }

  .daltrice.daltrice table.mobile-only {
    display: table;
  }

  /* At 768 the live content column is 600 wide — an 84px inset each side.
     Expressed as vw so it scales instead of collapsing at narrower widths. */
  .daltrice.daltrice > section {
    padding-left: clamp(24px, 10.94vw, 84px);
    padding-right: clamp(24px, 10.94vw, 84px);
  }

  /* Hero stacks: the wide crop first, the copy under it. */
  .daltrice.daltrice .daltrice-hero {
    display: block;
    min-height: 0;
  }

  .daltrice.daltrice .daltrice-hero-media {
    position: relative;
    width: 100%;
    max-width: none;
    height: 420px;
  }

  /* `meet` with xMin/YMax is the `contain` + `0 100%` the bitmap was painted
   at, so the curve still spans the photo's full width whatever its height. */
.daltrice.daltrice .daltrice-hero-shape svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--dt-wave-fill);
}

.daltrice.daltrice .daltrice-hero-shape {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .daltrice.daltrice .daltrice-hero-body {
    max-width: none;
    padding: 0 clamp(24px, 10.94vw, 84px) 64px;
  }

  .daltrice.daltrice .daltrice-hero-copy,
  
  .daltrice.daltrice .daltrice-hero-lead {
    max-width: none;
  }

  /* The live page drops the navy/muted pair for plain black below 1024. */
  .daltrice.daltrice .daltrice-hero-title,
  
  .daltrice.daltrice .daltrice-hero-lead {
    color: #000000;
  }

  .daltrice.daltrice .daltrice-intro {
    padding-bottom: 40px;
  }

  .daltrice.daltrice .daltrice-strengths {
    padding-bottom: 0;
  }

  .daltrice.daltrice .daltrice-strengths-list {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .daltrice.daltrice .daltrice-contact {
    padding-top: 80px;
  }
}

/* --------------------------------------------------------------------------
   17. Mobile (<= 600) — the live page's small tier
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Live insets the body sections 35 and the hero 28, both on a 320 column.
     The theme variable is not defined on this page, so the 16px fallback was
     what actually applied: every block ran 38 wide, and with the copy wrapping
     a line short in place after place the page finished ~290 above live. */
  .daltrice.daltrice > section {
    padding-left: 35px;
    padding-right: 35px;
  }

  .daltrice.daltrice .daltrice-hero-media {
    height: 340px;
  }

  .daltrice.daltrice .daltrice-hero-body {
    padding: 32px 28px;
  }

  .daltrice.daltrice .daltrice-hero-title {
    font-size: 32px;
    line-height: 40px;
  }

  .daltrice.daltrice .daltrice-hero-lead {
    font-size: 18px;
    line-height: 28px;
  }

  .daltrice.daltrice .daltrice-strengths .daltrice-h2 {
    font-size: 30px;
    line-height: 38px;
  }

  /* The Wirkung and Anwendung sections open with near-identical headlines and
     live sets them differently: Wirkung keeps the full 36/44, Anwendung (the
     spectrum table) drops to 24/32. Matching them by text is how they get
     swapped — they are scoped by section here for that reason. */
  .daltrice.daltrice .daltrice-profile .daltrice-h2,
  .daltrice.daltrice .daltrice-spectrum .daltrice-h2,
  .daltrice.daltrice .daltrice-recommendation .daltrice-h2 {
    font-size: 24px;
    line-height: 32px;
  }

  /* Live holds the hero copy to the same 320 column as the body sections; the
     hero's own 28px padding alone would let it run to 334. */
  .daltrice.daltrice .daltrice-hero-title,
  .daltrice.daltrice .daltrice-hero-lead {
    max-width: 320px;
  }

  /* Vev positions these cards absolutely, so live's rhythm is not uniform: the
     gap under the first card is 72 and under the next two is 52. Same shape as
     the nth-child nudge the Karate and Pergado benefit rows already carry. */
  .daltrice.daltrice .daltrice-strengths-list {
    gap: 12px;
  }

  .daltrice.daltrice .daltrice-strengths-item:nth-child(2) {
    margin-top: 20px;
  }

  /* The cards pick up a 20px inset once they are the full column width. */
  .daltrice.daltrice .daltrice-strengths-item {
    padding: 20px;
  }

  .daltrice.daltrice .daltrice-strengths-item p {
    margin-top: 16px;
  }

  /* The product table only switches to its stacked variant on this tier —
     at 768 the live page still shows the two-column version. */
  .daltrice.daltrice .daltrice-profile-table {
    display: none;
  }

  .daltrice.daltrice .daltrice-profile-table-mobile {
    display: table;
    table-layout: auto;
  }

  .daltrice.daltrice .daltrice-profile-table-mobile td {
    padding: 12px 0 13px;
    border-top: none;
    border-bottom: 1px solid var(--dt-rule);
  }

  /* The dots column right-aligns on the small tier. Same specificity trap as
     above — `.daltrice-table td` sets text-align on this element. */
  .daltrice.daltrice .daltrice-table td.daltrice-dots {
    text-align: right;
  }

  /* Stacked and butted together — the 8px pill padding is the only spacing
     between rows on the live page, so the flex gap goes to zero. */
  .daltrice.daltrice .daltrice-legend {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .daltrice.daltrice .daltrice-legend li {
    width: 100%;
  }

  /* -- band rhythm, read off the live 390 render ---------------------------- */
  .daltrice.daltrice .daltrice-intro {
    padding-top: 48px;
  }

  .daltrice.daltrice .daltrice-strengths-list {
    margin-top: 40px !important;
  }

  .daltrice.daltrice .daltrice-profile {
    padding-top: 132px;
  }

  /* Live gives the label its own line and starts the value under it, so a row
     is two lines whatever the value's length. Left inline, a short value rode
     up beside its label (row 20 short) and a long one wrapped past it (row 20
     long) — the same rows differing in both directions. */
  .daltrice.daltrice .daltrice-profile-table-mobile td strong {
    display: block;
  }

  .daltrice.daltrice .daltrice-effect {
    padding-top: 111px;
  }

  .daltrice.daltrice .daltrice-contact {
    padding-top: 162px;
  }

  .daltrice.daltrice .daltrice-contact-copy {
    margin-top: 38px;
  }

  .daltrice.daltrice .daltrice-contact .daltrice-cta {
    margin-top: 49px;
  }

  /* -- Wirkung / Anwendung rhythm, read off the live 390 render ------------ */
  .daltrice.daltrice .daltrice-profile-table-mobile {
    margin-top: 50px;
  }

  .daltrice.daltrice .daltrice-profile .daltrice-cta {
    margin-top: 49px;
  }

  .daltrice.daltrice .daltrice-effect-figure {
    margin-top: 40px;
  }

  .daltrice.daltrice .daltrice-source {
    margin-top: 47px;
  }

  .daltrice.daltrice .daltrice-spectrum {
    padding-top: 56px;
  }

  .daltrice.daltrice .daltrice-tables {
    margin-top: 61px;
  }

  .daltrice.daltrice .daltrice-legend {
    margin-top: 68px !important;
  }

  .daltrice.daltrice .daltrice-note {
    margin-top: 44px;
  }
}

/* --------------------------------------------------------------------------
   18. Scroll reveal
   Ported from the site's own reveal (the theme's .animate → .in-view, mirrored
   for #wlg further up in style.css): every block starts 50px low and fully
   transparent, then eases up into place over 1s as it scrolls in. The live
   Daltrice page does the same thing through Vev's animation engine.

   `.daltrice-reveal` is added by daltrice.js, never by the markup — if the
   script does not run, nothing is hidden and the page renders as-is.
   -------------------------------------------------------------------------- */
.daltrice.daltrice .daltrice-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition:
    transform 1s ease,
    opacity 1s ease;
}

.daltrice.daltrice .daltrice-reveal.animate-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .daltrice.daltrice .daltrice-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}