/**
 * COW-AI pages — scoped restyle.
 *
 * EVERY rule is prefixed with .cowai-page, a body class the mu-plugin adds to
 * the three COW-AI pages only. The theme's own blocks (.b_how_work_steps,
 * .b_template_banner, …) are shared with Pferdehalter, Milchviehhalter and
 * others; unscoped edits to them would change those pages too.
 *
 * Sections are addressed by the ACF `id` set in build/cow-ai/02-pages.php:
 *   #warum  #funktion  #milchleistung  #gangbild  #dashboard  #vorteile
 * Those ids currently exist on Lahmheitserkennung only; the id-scoped rules
 * start applying to the other two once their sections are given ids.
 */

/* ==========================================================================
   ITEM 1 — content container.
   ==========================================================================
   The theme does define .container, but at line ~1699 of main.css it resets it:

       @media (min-width: 1200px) { .container { width: 100%; padding: 0 80px } }

   which overrides the earlier `width: 1170px`. So on any desktop screen the
   container is fluid and content runs to within 80px of the viewport edge.
   ========================================================================== */
.cowai-page .container {
  max-width: 1320px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .cowai-page .container { padding-left: 20px; padding-right: 20px; }
}

/* --------------------------------------------------------------------------
   ITEM 1a — hand the theme's own chrome back to the theme.
   --------------------------------------------------------------------------
   The rule above is (0,2,0) and so beats the theme's plain `.container`
   EVERYWHERE on the page, including markup that is not ours: the header, the
   mobile menu and the footer all use `.container` too. The visible damage was
   in the header — 1320px minus 2x40px padding leaves 1240px of track for a nav
   that needs ~1430px, so the logo/menu and the DE / Log in / Zum Shop buttons
   wrapped onto two rows, and the footer sat narrower than on every other page.
   (Pre-existing since the container rule was written; it only became obvious
   once the sub-navigation bar below the header was removed.)

   Restores the theme's own values verbatim from main.css: base padding 15px,
   80px from 1200px up, 30px in the 1200-1400px band.
   -------------------------------------------------------------------------- */
.cowai-page .b_header .container,
.cowai-page .mobile_menu_section .container,
.cowai-page footer .container {
  max-width: none;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .cowai-page .b_header .container,
  .cowai-page .mobile_menu_section .container,
  .cowai-page footer .container { padding-left: 80px; padding-right: 80px; }
}
@media (min-width: 1200px) and (max-width: 1400px) {
  .cowai-page .b_header .container,
  .cowai-page .mobile_menu_section .container,
  .cowai-page footer .container { padding-left: 30px; padding-right: 30px; }
}

/* --------------------------------------------------------------------------
   ITEM 1b — the deliberate media bleed in scripts/main.js.
   --------------------------------------------------------------------------
   For every .jsCustomWidthWrapper the theme computes

       width = (viewportWidth - containerWidth) / 2 + blockWidth

   and writes it to .jsChangedBlock as an INLINE style, so the media block
   extends from its column out to the viewport edge. That is intentional and
   looks right for a full-bleed photograph, but it clips a chart, a video or a
   device mockup — which is exactly the "cut off left / right" in items 1, 7
   and 8. Inline styles are only beatable with !important.

   This is a presentation-only override: the JS still runs, its value is simply
   ignored. Nothing is unbound, so removing this stylesheet restores the theme's
   original behaviour exactly.
   -------------------------------------------------------------------------- */

/* `width: 100%`, NOT `width: auto`. auto looks like the obvious way to drop the
   JS value, but in b_single_content_image the only descendant is a
   position:absolute .image_block, which contributes nothing to intrinsic width —
   so auto collapsed the block to 0px wide while it still reserved its full
   height. That produced three 0x923 "invisible" images and ~930px of dead space.
   100% keeps the block filling its column, which is what the design wants. */
.cowai-page .jsChangedBlock {
  width: 100% !important;
  max-width: 100% !important;
}
.cowai-page .jsCustomWidthWrapper { max-width: 100%; }
/* the flex item above the media block has no in-flow content of its own either */
.cowai-page .hero_image_inner { width: 100%; }

/* ==========================================================================
   ITEM 1c — b_single_content_image media blocks (milk chart, dashboard
   screenshot, Frank Cordes photo).

   main.css:4976 gives every one of these a fixed viewport-sized box:

       .b_single_content_image .image_inner {
         padding-top: 120%;      <- forced 1:1.2 aspect box
         min-height: 90vh;       <- 922.5px at a 1025px viewport
       }

   and then absolutely positions the image inside it with object-fit: cover and
   a half-rounded `border-radius: 24px 0 0 24px`. That is a full-bleed editorial
   treatment; the design shows these three at their natural proportions inside
   their column. The 90vh is also what read as "a big white space between the
   sections" — the box reserved its height whether or not the image showed.

   Returning the image to normal flow removes ~930px of dead page height.
   ========================================================================== */
.cowai-page .b_single_content_image .image_inner {
  padding-top: 0;
  min-height: 0;
  height: auto;
}
.cowai-page .b_single_content_image .image_block {
  position: static;
  overflow: visible;
}
.cowai-page .b_single_content_image .image_inner > img,
.cowai-page .b_single_content_image .image_block img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: fill;
  border-radius: 14px;
}

/* The theme pads these columns for the bleed layout that no longer applies:
   150px of horizontal dead space beside the image, and 30px top/bottom which
   pushed the sections past the design's 104px rhythm. */
.cowai-page .b_single_content_image .section_inner .hero_image,
.cowai-page .b_single_content_image .section_inner.reverse .hero_image { padding: 0; }
.cowai-page .b_single_content_image .section_inner .section_content,
.cowai-page .b_single_content_image .section_inner.reverse .section_content { padding: 0; }
.cowai-page .b_single_content_image .section_inner { gap: 48px; }

/* Nothing escapes its column. */
.cowai-page img,
.cowai-page video,
.cowai-page .media_block,
.cowai-page .image_wrapper,
.cowai-page .hero_image_inner {
  max-width: 100%;
  height: auto;
  display: block;
}
/* the hero video is a deliberate full-bleed and must keep covering its box */
.cowai-page .b_template_banner video {
  max-width: none;
  height: 100%;
}

/* ==========================================================================
   A4 — vertical rhythm. The theme ships .section { padding: 195px 0 }, which is
   what reads as "half a screen of empty space", not a min-height.
   ========================================================================== */
.cowai-page .section { padding: 104px 0; }
.cowai-page .blue_section.section { padding: 96px 0; }
.cowai-page .b_single_content_image { padding: 104px 0; }
.cowai-page .b_single_content_image.section { padding: 104px 0; }

@media (max-width: 991px) {
  .cowai-page .section,
  .cowai-page .blue_section.section,
  .cowai-page .b_single_content_image { padding: 64px 0; }
}

/* ==========================================================================
   A5 — five items per row. Theme default is .step_column { width: 25% }, so a
   fifth item orphans onto its own line.
   ========================================================================== */
.cowai-page #warum .steps_wrapper,
.cowai-page #funktion .steps_wrapper,
.cowai-page #vorteile .steps_wrapper {
  margin: 0;
  gap: 22px;
  flex-wrap: wrap;
  align-items: stretch;
}
.cowai-page #warum .step_column    { width: auto; flex: 1 1 230px; padding: 0; }
.cowai-page #funktion .step_column { width: auto; flex: 1 1 190px; padding: 0; position: relative; z-index: 1; }
.cowai-page #vorteile .step_column { width: auto; flex: 1 1 260px; padding: 0; }

/* ==========================================================================
   A1 — auto-numbering. The theme prints counter(req) before every .step_title.
   Off for the card rows; restyled into the design's badge for the step rail.
   ========================================================================== */
.cowai-page #warum .step_title::before,
.cowai-page #vorteile .step_title::before { content: none; }

/* ==========================================================================
   A2 / A3 / D — "Lahmheiten systematisch im Blick behalten": left-aligned
   white cards with a green dot marker.
   ========================================================================== */
.cowai-page #warum .section_label,
.cowai-page #warum .section_title,
.cowai-page #vorteile .section_label,
.cowai-page #vorteile .section_title {
  text-align: left;
  max-width: 780px;
  margin-left: 0;
}
.cowai-page #warum .step_block,
.cowai-page #vorteile .step_block { text-align: left; }
.cowai-page #warum .step_title,
.cowai-page #vorteile .step_title { justify-content: flex-start; }

.cowai-page #warum .step_block {
  height: 100%;
  background: #ffffff;
  border-radius: 12px;
  padding: 32px 28px 34px;
  box-shadow: 0 2px 14px rgba(18, 27, 54, 0.05);
}
.cowai-page #warum .step_block::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16C98B;
  margin-bottom: 20px;
}
.cowai-page #warum .step_title h3 { font-size: 19px; font-weight: 600; color: #121B36; }
.cowai-page #warum .step_description,
.cowai-page #warum .step_description p { font-size: 16px; line-height: 1.6; color: #4A5872; }

/* ==========================================================================
   E — "So funktioniert die Lahmheitserkennung": centred rail, green circular
   badge per step, hairline connector behind the badges.
   ========================================================================== */
.cowai-page #funktion .how_work_steps { position: relative; }
.cowai-page #funktion .how_work_steps::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, rgba(18,164,124,0) 0%, #B9E4D5 12%, #B9E4D5 88%, rgba(18,164,124,0) 100%);
}
@media (max-width: 991px) {
  .cowai-page #funktion .how_work_steps::before { display: none; }
}

.cowai-page #funktion .step_block { text-align: center; }
.cowai-page #funktion .step_title {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cowai-page #funktion .step_title::before {
  content: counter(req, decimal-leading-zero);
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0F7050;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
.cowai-page #funktion .step_title h3 { font-size: 19px; font-weight: 600; color: #121B36; }
.cowai-page #funktion .step_description,
.cowai-page #funktion .step_description p { font-size: 16px; line-height: 1.6; color: #4A5872; }

/* ==========================================================================
   H — "Ihre Vorteile": top rule, no fill, icons left.
   ========================================================================== */
.cowai-page #vorteile .step_block {
  background: none;
  box-shadow: none;
  border-top: 2px solid #E4EBF2;
  padding: 24px 0 0;
  border-radius: 0;
}
/* main.css:6617 builds the icon box with `padding-top: 100%` (the aspect-ratio
   trick) and absolutely positions the glyph inside it, so `height` on .icon does
   nothing — the box stayed 100px tall and left a dead gap under the top rule.
   Undo the padding box and the absolute positioning, then size the glyph. */
.cowai-page #vorteile .step_icon {
  max-width: 44px;
  margin: 0 0 14px;
  text-align: left;
  justify-content: flex-start;
}
.cowai-page #vorteile .step_icon .icon {
  padding-top: 0;
  position: static;
  height: auto;
}
.cowai-page #vorteile .step_icon img,
.cowai-page #vorteile .step_icon svg {
  position: static;
  height: 44px;
  width: auto;
  display: block;
  margin: 0;
}
.cowai-page #vorteile .step_title h3 { font-size: 21px; font-weight: 600; color: #121B36; }
.cowai-page #vorteile .step_description,
.cowai-page #vorteile .step_description p { font-size: 16px; line-height: 1.6; color: #4A5872; }

/* ==========================================================================
   B — hero
   ========================================================================== */
.cowai-page .b_template_banner { min-height: 620px; }
.cowai-page .b_template_banner .bg_media,
.cowai-page .b_template_banner .video_wrapper { position: absolute; inset: 0; width: 100%; height: 100%; }
.cowai-page .b_template_banner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* B1 — one gradient scrim across the whole hero, replacing the half-width panel */
.cowai-page .b_template_banner .bg_media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18,27,54,0.44) 0%, rgba(18,27,54,0.2) 34%, rgba(18,27,54,0.74) 82%, rgba(18,27,54,0.92) 100%);
}
.cowai-page .b_template_banner .blur_decor,
.cowai-page .b_template_banner .blur_decor::before,
.cowai-page .b_template_banner .blur_decor::after {
  background: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  -webkit-filter: none;
          filter: none;
}
/* B1 / B6 — the real culprits, both on .banner_content:
       max-width: 45%                 -> the text sat in a 45% column, which is
                                         what read as "video only fills the right
                                         half" (the left was the blurred panel)
       min-height: calc(100vh - 90px) -> the hero was a full viewport tall
   Replaced with the design's 1320px container, 620px minimum, content anchored
   bottom-left. */
.cowai-page .b_template_banner .banner_content {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px 78px;
  min-height: 620px;
  align-items: flex-end;
  gap: 0;
}
@media (max-width: 767px) {
  .cowai-page .b_template_banner .banner_content { padding: 0 20px 48px; min-height: 480px; }
}
.cowai-page .b_template_banner .main_part {
  max-width: 760px;
  display: flex;
  flex-direction: column;
}
/* design order: eyebrow, h1, lead, buttons, proof points */
.cowai-page .b_template_banner .cowai-eyebrow    { order: 1; }
.cowai-page .b_template_banner .content_block    { order: 2; }
.cowai-page .b_template_banner .cowai-hero-lead  { order: 3; }
.cowai-page .b_template_banner .btn_wrapper      { order: 4; margin-top: 34px; }
.cowai-page .b_template_banner .text_animation_wrap { order: 5; }
.cowai-page .b_template_banner h1 {
  font-size: 62px;
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #ffffff;
}
@media (max-width: 991px) {
  .cowai-page .b_template_banner h1 { font-size: 40px; }
}

/* B2 / B3 — eyebrow and lead paragraph (injected by the mu-plugin; banner_section
   has no ACF field for either) */
.cowai-page .cowai-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #16C98B;
  margin: 0 0 18px;
}
.cowai-page .cowai-hero-lead {
  margin: 24px 0 0;
  font-size: 19px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.86);
  max-width: 620px;
}

/* B4 / §3b — the three proof points as one static row, not a rotating ticker.
   The theme ships .dropping-texts { height: 130px; overflow: hidden } with
   absolutely-positioned spans, which is what clipped the row and made it collide
   with the buttons. The duplicate track is gone at source (see proof_points() in
   02-pages.php), so there is nothing left to hide. */
.cowai-page .text_animation_wrap {
  margin-top: 38px;
  height: auto;
  overflow: visible;
  position: static;
}
.cowai-page .text_animation,
.cowai-page .text_animation.dropping-texts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  position: static;
  height: auto;
  min-height: 0;
  overflow: visible;
}
.cowai-page .text_animation.dropping-texts span {
  animation: none !important;
  position: static !important;
  opacity: 1 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
.cowai-page .text_animation.dropping-texts span::before {
  content: "✓";
  color: #16C98B;
  font-size: 16px;
}
/* (no nth-child hide needed any more — the duplicate track is gone from the data) */

/* B5 — filled primary, outlined secondary */
.cowai-page .b_template_banner .btn_wrapper { gap: 16px; }
.cowai-page .b_template_banner .btn_wrapper .btn:first-child {
  background: #16C98B;
  border-color: #16C98B;
  color: #ffffff;
}
.cowai-page .b_template_banner .btn_wrapper .btn:first-child:hover { background: #12A47C; border-color: #12A47C; }
.cowai-page .b_template_banner .btn_wrapper .btn:nth-child(2) {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #ffffff;
}
.cowai-page .b_template_banner .btn_wrapper .btn:nth-child(2):hover { background: rgba(255, 255, 255, 0.12); }

/* ==========================================================================
   C — REMOVED 2026-08-11. The COW PROTECTOR sub-navigation bar and its
   .cowai-sticky wrapper are gone: the main header nav now carries the same
   three links in the Milchviehhalter / Dairy Farming dropdown, so a second bar
   under the header only repeated it. The injection was removed from
   acaris-cow-ai.php at the same time — do not re-add rules here without
   re-adding that, or these selectors match nothing.
   ========================================================================== */

/* ==========================================================================
   D — milk-loss block as a white card below the five cards
   ========================================================================== */
.cowai-page #milchleistung .section_inner {
  background: #ffffff;
  border-radius: 14px;
  padding: 32px 36px;
  align-items: center;
}
.cowai-page #milchleistung .section_title h2 { font-size: 24px; font-weight: 600; color: #121B36; }
.cowai-page #milchleistung .content p { font-size: 14px; color: #8A94A6; }

/* ==========================================================================
   F — "Was die KI im Gangbild sieht": video left, ALL text right.
   The heading is a DOM sibling of the two columns, so grid placement moves it
   into the right column without touching the template.
   ========================================================================== */
@media (min-width: 992px) {
  .cowai-page #gangbild .detail_page {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 48px;
    align-items: center;
  }
  .cowai-page #gangbild .main_content_wrap,
  .cowai-page #gangbild .main_content { display: contents; }
  .cowai-page #gangbild .media_wrapper { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .cowai-page #gangbild .top_part      { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 14px; }
  .cowai-page #gangbild .content_column { grid-column: 2; grid-row: 2; align-self: start; }
  /* The theme sizes both columns with width: 50% for its flex layout. Once the
     parents above are display:contents these become grid items, and that 50%
     starts resolving against the GRID AREA instead of the row — halving both
     columns (759px -> 379px, 433px -> 217px). Reset it. */
  .cowai-page #gangbild .media_wrapper,
  .cowai-page #gangbild .content_column { width: 100%; max-width: none; }
}
.cowai-page #gangbild .media_block {
  background: #14161C;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 24px 60px rgba(18, 27, 54, 0.16);
}
.cowai-page #gangbild .media_inner,
.cowai-page #gangbild .media_image,
.cowai-page #gangbild .video { border-radius: 8px; overflow: hidden; }
.cowai-page #gangbild .media_block video { width: 100%; display: block; }
.cowai-page #gangbild .section_title h2 { font-size: 30px; font-weight: 500; line-height: 1.2; color: #121B36; }

/* ==========================================================================
   G1 — "Von der Bewegung zur konkreten Entscheidung": wider text column so the
   headline breaks over two lines, not five.
   Below 992px only — section L takes the row over on desktop and these flex
   values stop applying the moment .section_inner becomes a grid.
   ========================================================================== */
.cowai-page #dashboard .section_content { flex: 1 1 480px; min-width: 0; }
.cowai-page #dashboard .hero_image { flex: 1 1 560px; min-width: 0; }

/* ==========================================================================
   Shared type
   ========================================================================== */
.cowai-page .section_title h2 {
  font-size: 46px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: #121B36;
}
@media (max-width: 991px) {
  .cowai-page .section_title h2 { font-size: 32px; }
}
.cowai-page .section_label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #12A47C;
}
/* the two indigo/dark sections keep their light-on-dark treatment */
.cowai-page .dark_section .section_title h2 { color: #ffffff; }
.cowai-page .dark_section .section_label { color: #16C98B; }

/* ==========================================================================
   J / §10 — the closing CTA sits on the indigo ground so it reads as the
   page's conclusion. Not scoped to #kontakt: all three COW-AI pages end with
   the same contact_section row, so this whole block is shared.

   Note on the design file: the .dc.html mockup replaces the form with a
   contact card. The spec keeps the form ("The form is good") and only asks for
   the indigo treatment, so the working wpcf7 form stays and the card's content
   (Ansprechpartnerin, name, role, mail) is styled in place in the left column.
   ========================================================================== */
.cowai-page .b_contact_form .bg_section { background: #262262 !important; }
.cowai-page .b_contact_form.section { padding: 104px 0; }
.cowai-page .b_contact_form .columns_wrapper {
  gap: 64px;
  align-items: center;
  flex-wrap: wrap;
}
.cowai-page .b_contact_form .column_content { flex: 1 1 560px; min-width: 0; width: auto; }
.cowai-page .b_contact_form .column_form    { flex: 1 1 420px; min-width: 0; width: auto; }

.cowai-page .b_contact_form .section_title h2 {
  margin: 0;
  font-size: 46px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-wrap: pretty;
}
.cowai-page .b_contact_form .content p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.cowai-page .b_contact_form .content a { color: #16C98B; text-decoration: none; font-weight: 600; }
/* "Ihre Ansprechpartnerin" is a <strong> followed by <br>; the eyebrow treatment
   already provides the line break, so the <br> would double the gap. */
.cowai-page .b_contact_form .content strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #16C98B;
}
.cowai-page .b_contact_form .content strong + br { display: none; }

/* the form on indigo: white fill, no border, solid green submit */
.cowai-page .b_contact_form .form_title { color: #ffffff; }
.cowai-page .b_contact_form input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]),
.cowai-page .b_contact_form textarea.wpcf7-form-control {
  background: #ffffff;
  border: 0;
  border-radius: 10px;
  color: #121B36;
  box-shadow: none;
}
/* .wpcf7-acceptance also carries .wpcf7-form-control but is a wrapper, not a
   field — without this it takes the white fill and paints over its own label. */
.cowai-page .b_contact_form .wpcf7-acceptance,
.cowai-page .b_contact_form .wpcf7-list-item { background: transparent !important; border: 0 !important; }
.cowai-page .b_contact_form .wpcf7-form p,
.cowai-page .b_contact_form .wpcf7-list-item-label { color: rgba(255, 255, 255, 0.78); }
.cowai-page .b_contact_form .wpcf7-form a { color: #16C98B; }
.cowai-page .b_contact_form input[type="submit"] {
  background: #16C98B !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 16px 34px;
  font-weight: 600;
  opacity: 1 !important;
}

/* ==========================================================================
   K — ground sequence and vertical rhythm.

   The design alternates tint / white down the page and lands two sections on
   the indigo ground. The theme's own alternation is different (it tints the
   step sections and darkens the FAQ), and its tint is #EDF9FF rather than the
   spec token #E9F4FB.

   Sections carrying .blue_section paint through a .bg_section child; the
   b_single_content_image rows have no such child and are transparent, so they
   take the colour on the section itself.
   ========================================================================== */
.cowai-page .blue_section > .bg_section { background: #E9F4FB; }

/* white grounds */
.cowai-page #funktion > .bg_section,
.cowai-page #vorteile > .bg_section { background: #ffffff; }

/* tinted grounds. #milchleistung shares Warum's ground because the design
   treats them as one section — see the merge in section L. */
.cowai-page #milchleistung,
.cowai-page #dashboard { background: #E9F4FB; }

/* "Wo die Kamera sitzt" — indigo. The two-column layout and the schematic come
   later; this is the ground plus the light-on-dark type it needs to stay
   readable in the meantime. */
.cowai-page .b_single_content.blue_section > .bg_section { background: #262262; }
.cowai-page .b_single_content.blue_section .section_title h2 { color: #ffffff; }
.cowai-page .b_single_content.blue_section .section_label { color: #16C98B; }
.cowai-page .b_single_content.blue_section,
.cowai-page .b_single_content.blue_section p,
.cowai-page .b_single_content.blue_section li { color: rgba(255, 255, 255, 0.86); }

/* the design uses 104px on every section, including the tinted ones */
.cowai-page .blue_section.section { padding: 104px 0; }
@media (max-width: 991px) {
  .cowai-page .blue_section.section { padding: 64px 0; }
}

/* h2 is 44px on these three, 46px elsewhere */
.cowai-page #warum .section_title h2,
.cowai-page .b_single_content.blue_section .section_title h2,
.cowai-page .b_faq .section_title h2 { font-size: 44px; }

/* ==========================================================================
   K2 — FAQ. The theme ships it as a .dark_section on #141867 with white type;
   the design has it on the lightest ground, narrower and centred.
   The .dark_section rules above stay in place for map_section, which the design
   really does want dark — only the FAQ is pulled back to light.
   ========================================================================== */
.cowai-page .b_faq > .bg_section { background: #F7FBFE; }
/* b_faq carries neither .section nor .blue_section, so the rhythm rules above
   do not reach it — it ships at 80px. */
.cowai-page .b_faq { padding: 104px 0; }
@media (max-width: 991px) {
  .cowai-page .b_faq { padding: 64px 0; }
}
.cowai-page .b_faq .container { max-width: 900px; }
.cowai-page .b_faq .section_title { text-align: center; }
.cowai-page .b_faq,
.cowai-page .b_faq .bottom_part_wrap { color: #4A5872; }
.cowai-page .b_faq .section_title h2 { color: #121B36; }
.cowai-page .b_faq .section_label { color: #12A47C; }
.cowai-page .b_faq .faq_row { border-bottom: 1px solid #E4EBF2; }
.cowai-page .b_faq .faq_title { color: #121B36; font-size: 18px; font-weight: 500; }
.cowai-page .b_faq .faq_content,
.cowai-page .b_faq .faq_content p { color: #4A5872; font-size: 17px; line-height: 1.65; }

/* ==========================================================================
   L / §7 — "Von der Bewegung zur konkreten Entscheidung".
   The design lifts the heading block out of the left column and sets it across
   the full row at max 780px, then puts the dashboard left and the five product
   details right as separate white cards.
   The template nests label / title / list inside .section_content > .inner_wrap,
   so both wrappers go display:contents and the three grandchildren are placed
   on the grid directly — the same move as #gangbild in section F. Placing every
   item by explicit line number also neutralises the row's .reverse class, which
   is a flex-only property and stops meaning anything here.
   ========================================================================== */
@media (min-width: 992px) {
  .cowai-page #dashboard .section_inner {
    display: grid;
    /* 1.9fr : 1fr lands within ~4px of the design's `flex: 1 1 660px` against
       `flex: 1 1 280px` at the 1240px inner container. */
    grid-template-columns: minmax(520px, 1.9fr) minmax(260px, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 40px;
    align-items: start;
  }
  .cowai-page #dashboard .section_content,
  .cowai-page #dashboard .inner_wrap { display: contents; }
  .cowai-page #dashboard .section_label { grid-column: 1 / -1; grid-row: 1; max-width: 780px; }
  .cowai-page #dashboard .section_title { grid-column: 1 / -1; grid-row: 2; max-width: 780px; }
  .cowai-page #dashboard .hero_image    { grid-column: 1; grid-row: 3; margin-top: 52px; }
  .cowai-page #dashboard .custom_list   { grid-column: 2; grid-row: 3; margin-top: 52px; }
  /* same percentage-against-the-grid-area trap as #gangbild — see section F */
  .cowai-page #dashboard .hero_image,
  .cowai-page #dashboard .custom_list { width: 100%; max-width: none; min-width: 0; }
}

/* The design frames this panel in a dark #14161C bezel, but its <img> points at
   Screenshot-2025-09-10-103323.png, which is in fact the milk-loss chart — a
   placeholder standing in for a screenshot nobody had at design time. Our image
   is already a finished monitor-and-phone render on white, so a dark bezel would
   frame a frame. A white card with the design's shadow keeps the intent (the
   dashboard reads as one object lifted off the tinted ground) and matches the
   card language used by the five details beside it and the milk card in D. */
.cowai-page #dashboard .image_wrapper {
  background: #ffffff;
  border-radius: 16px;
  padding: 22px 26px;
  box-shadow: 0 24px 60px rgba(18, 27, 54, 0.10);
}
/* ITEM 1c returns these blocks to `overflow: visible` and rounds the <img>
   itself; here the card is what carries the rounding. */
.cowai-page #dashboard .image_block { border-radius: 6px; overflow: hidden; background: #ffffff; }
.cowai-page #dashboard .image_block img { border-radius: 0; }

/* the five product details as separate cards, not a bulleted list */
.cowai-page #dashboard .custom_list .list_wrapper { margin: 0; }
.cowai-page #dashboard .custom_list ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cowai-page #dashboard .custom_list li {
  margin: 0;
  padding: 20px 22px;
  background: #ffffff;
  border-radius: 10px;
  list-style: none;
}
/* .ul_decor draws its marker with a pseudo-element, not list-style */
.cowai-page #dashboard .custom_list li::before,
.cowai-page #dashboard .custom_list li::after { content: none; display: none; }
.cowai-page #dashboard .custom_list li strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #121B36;
}
.cowai-page #dashboard .custom_list li span {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.55;
  color: #4A5872;
}

/* ==========================================================================
   M / §9 — "COW-AI im Einsatz": portrait left, quote right.
   The template prints the text column first and shows the photo at the same
   620px as the text, which reads as two equal slabs. The design crops the
   portrait to a 360px 4:5 and gives the quote the rest of the row.
   ========================================================================== */
.cowai-page #referenz .section_inner { align-items: center; gap: 56px; }
.cowai-page #referenz .hero_image {
  order: -1;
  flex: 1 1 300px;
  min-width: 260px;
  max-width: 360px;
  width: auto;
}
.cowai-page #referenz .section_content {
  flex: 1 1 520px;
  min-width: 420px;
  width: auto;
  max-width: none;
}
.cowai-page #referenz .content_wrapper,
.cowai-page #referenz .content { max-width: none; width: 100%; }

/* ITEM 1c returned these images to normal flow with height:auto, so the 4:5 has
   to be re-established on the wrapper and the height handed back down the chain
   to the <img> — object-fit only crops when the box has a height to crop to. */
.cowai-page #referenz .hero_image_inner {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
}
.cowai-page #referenz .image_wrapper,
.cowai-page #referenz .image_inner,
.cowai-page #referenz .image_block,
.cowai-page #referenz .image_block picture { display: block; height: 100%; }
.cowai-page #referenz .image_block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* The design has no headline here, only the eyebrow and one 25px blockquote.
   The page carries an extra short pull-quote as its h2 — approved copy, so it
   stays and takes the design's blockquote size, and the full quote below it
   steps down to body size rather than competing with it. */
.cowai-page #referenz .section_title h2 {
  margin: 20px 0 0;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.48;
  color: #121B36;
}
.cowai-page #referenz .content p { font-size: 17px; line-height: 1.65; color: #4A5872; }
/* attribution: name at 17/600, role beneath at 15 — one <p> with a <br>, so the
   name is blocked out and the break it would otherwise force is dropped. */
.cowai-page #referenz .content p:last-child { margin: 26px 0 0; font-size: 15px; }
.cowai-page #referenz .content p strong {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: 600;
  color: #121B36;
}
.cowai-page #referenz .content p strong + br { display: none; }

@media (max-width: 991px) {
  .cowai-page #referenz .section_content { min-width: 0; }
  .cowai-page #referenz .section_inner { gap: 32px; }
}

/* ==========================================================================
   N / §4 — "Lahmheiten systematisch im Blick behalten" + the milk-loss card
   as one two-column section.

   The wrapper comes from the mu-plugin (see the N block in acaris-cow-ai.php);
   everything below turns the two rows it encloses into the design's columns.

   Scoped under .cowai-warum on purpose. #warum also exists on BCS-Messung,
   where it is a five-card row with no milk-loss sibling and keeps the white-card
   treatment from A2/A3/D above — the wrapper is spliced on Lahmheitserkennung
   only, so those pages never see any of this.
   ========================================================================== */
.cowai-page .cowai-warum { background: #E9F4FB; }
.cowai-page .cowai-warum__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 104px 40px;
  box-sizing: border-box;
}
@media (min-width: 992px) {
  .cowai-page .cowai-warum__inner {
    display: grid;
    grid-template-columns: minmax(420px, 480fr) minmax(380px, 420fr);
    column-gap: 64px;
    align-items: start;
  }
}
@media (max-width: 991px) {
  .cowai-page .cowai-warum__inner { padding: 64px 20px; }
}

/* The two rows are columns now: their own grounds, section padding and 1320px
   containers all belong to the wrapper instead. Every selector here carries an
   id so it outranks the ground and rhythm rules in K. */
.cowai-page .cowai-warum #warum,
.cowai-page .cowai-warum #milchleistung {
  padding: 0;
  background: transparent;
  min-width: 0;
}
.cowai-page .cowai-warum #warum > .bg_section { display: none; }
.cowai-page .cowai-warum #warum > .container,
.cowai-page .cowai-warum #milchleistung > .container {
  max-width: none;
  width: 100%;
  padding: 0;
}

/* --- left column: five icon rows, not five cards ------------------------- */
.cowai-page .cowai-warum #warum .section_title { margin: 16px 0 0; }
.cowai-page .cowai-warum #warum .how_work_steps { margin-top: 36px; }
.cowai-page .cowai-warum #warum .steps_wrapper {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
}
.cowai-page .cowai-warum #warum .step_column { width: auto; flex: none; padding: 0; }
.cowai-page .cowai-warum #warum .step_block {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  height: auto;
  padding: 20px 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid #D3E5F1;
}
.cowai-page .cowai-warum #warum .step_column:last-child .step_block { border-bottom: 0; }

/* The theme's step_block has no icon slot — #warum's ACF blocks carry no `icon`,
   which is why there is no .step_icon to style the way #vorteile's is. The five
   glyphs are the design's own SVGs, inlined here as data URIs: same paths, same
   #0F7050 stroke at 1.6, and no extra request or media-library upload to undo. */
.cowai-page .cowai-warum #warum .step_block::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}
.cowai-page .cowai-warum #warum .step_column:nth-child(1) .step_block::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230F7050' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c3.5 4.2 5.5 6.9 5.5 9.4A5.5 5.5 0 0 1 12 18a5.5 5.5 0 0 1-5.5-5.6C6.5 9.9 8.5 7.2 12 3z'/%3E%3C/svg%3E");
}
.cowai-page .cowai-warum #warum .step_column:nth-child(2) .step_block::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230F7050' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.5C7 16 4 13.2 4 10.1A3.9 3.9 0 0 1 12 8a3.9 3.9 0 0 1 8 2.1c0 3.1-3 5.9-8 9.4z'/%3E%3C/svg%3E");
}
.cowai-page .cowai-warum #warum .step_column:nth-child(3) .step_block::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230F7050' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18l5-6 4 3.5L20 6'/%3E%3Cpath d='M20 11V6h-5'/%3E%3C/svg%3E");
}
.cowai-page .cowai-warum #warum .step_column:nth-child(4) .step_block::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230F7050' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h5v5'/%3E%3Cpath d='M20 4l-8 8'/%3E%3Cpath d='M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E");
}
.cowai-page .cowai-warum #warum .step_column:nth-child(5) .step_block::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230F7050' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.2-2.9 7.6-7 8.5-4.1-.9-7-4.3-7-8.5V6l7-3z'/%3E%3Cpath d='M9.2 11.8l1.9 1.9 3.7-3.9'/%3E%3C/svg%3E");
}
.cowai-page .cowai-warum #warum .step_title {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  margin: 0;
}
.cowai-page .cowai-warum #warum .step_description {
  grid-column: 2;
  grid-row: 2;
  width: auto;
}
.cowai-page .cowai-warum #warum .step_title h3 { margin: 0; font-size: 19px; font-weight: 600; }
.cowai-page .cowai-warum #warum .step_description p { margin: 6px 0 0; line-height: 1.55; }

/* --- right column: the milk-loss card ------------------------------------ */
/* Supersedes section D, which styled this row as a full-width card below the
   five. Reordering is the interesting part: the template prints title, source,
   bullets, image, and the design wants title, image, bullets, source. Both
   wrappers go display:contents so all four become flex items of one column and
   `order` can sort them. */
.cowai-page .cowai-warum #milchleistung .section_inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: #ffffff;
  border-radius: 14px;
  padding: 30px 32px 32px;
  box-shadow: 0 2px 14px rgba(18, 27, 54, 0.05);
}
.cowai-page .cowai-warum #milchleistung .section_content,
.cowai-page .cowai-warum #milchleistung .inner_wrap { display: contents; }
.cowai-page .cowai-warum #milchleistung .section_title   { order: 1; }
.cowai-page .cowai-warum #milchleistung .hero_image      { order: 2; margin-top: 20px; width: 100%; }
.cowai-page .cowai-warum #milchleistung .custom_list     { order: 3; margin-top: 22px; }
.cowai-page .cowai-warum #milchleistung .content_wrapper { order: 4; margin-top: 20px; }
.cowai-page .cowai-warum #milchleistung .section_title h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

/* The chart PNG carries the Elite-Magazin credit inside the artwork as well as
   on the line below it, so it read twice. Cropping the bottom 13% off the 975x647
   original removes the baked-in copy and leaves the styled line as the single
   source note — which is what the design shows. Drop the aspect-ratio to get the
   uncropped chart back. */
.cowai-page .cowai-warum #milchleistung .hero_image_inner {
  aspect-ratio: 975 / 563;
  border-radius: 8px;
  overflow: hidden;
}
.cowai-page .cowai-warum #milchleistung .image_wrapper,
.cowai-page .cowai-warum #milchleistung .image_inner,
.cowai-page .cowai-warum #milchleistung .image_block,
.cowai-page .cowai-warum #milchleistung .image_block picture { display: block; height: 100%; }
.cowai-page .cowai-warum #milchleistung .image_block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 0;
}

/* three green + bullets, replacing the theme's absolutely positioned decor */
.cowai-page .cowai-warum #milchleistung .custom_list .list_wrapper { margin: 0; }
.cowai-page .cowai-warum #milchleistung .custom_list ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cowai-page .cowai-warum #milchleistung .custom_list li {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #4A5872;
  list-style: none;
}
.cowai-page .cowai-warum #milchleistung .custom_list li::before {
  content: "+";
  position: static;
  flex: none;
  width: auto;
  height: auto;
  background: none;
  color: #12A47C;
}
.cowai-page .cowai-warum #milchleistung .custom_list li::after { content: none; }
.cowai-page .cowai-warum #milchleistung .content,
.cowai-page .cowai-warum #milchleistung .content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #8A94A6;
}

/* Stacked below 992px: the two rows have no padding of their own any more, so
   without this they butt straight up against each other. */
@media (max-width: 991px) {
  .cowai-page .cowai-warum #milchleistung { margin-top: 32px; }
}

/* ==========================================================================
   O / §6 — "Wo die Kamera sitzt": copy left, schematic right, on indigo.
   The panel itself is injected by the mu-plugin (see acaris_cowai_schematic_html);
   K already gave this section its #262262 ground and light-on-dark type.
   ========================================================================== */
@media (min-width: 992px) {
  .cowai-page #integration > .container {
    display: grid;
    grid-template-columns: minmax(400px, 460fr) minmax(380px, 420fr);
    /* the fourth track absorbs any surplus when the panel outgrows the copy, so
       the three text rows never drift apart to fill it */
    grid-template-rows: auto auto auto 1fr;
    column-gap: 64px;
  }
  .cowai-page #integration .section_label   { grid-column: 1; grid-row: 1; }
  .cowai-page #integration .section_title   { grid-column: 1; grid-row: 2; }
  .cowai-page #integration .content_wrapper { grid-column: 1; grid-row: 3; }
  .cowai-page #integration .cowai-schematic { grid-column: 2; grid-row: 1 / -1; align-self: center; }
}
@media (max-width: 991px) {
  .cowai-page #integration .cowai-schematic { margin-top: 40px; }
}

/* the theme centres all three text children; the design left-aligns them */
.cowai-page #integration .section_label,
.cowai-page #integration .section_title,
.cowai-page #integration .content_wrapper,
.cowai-page #integration .content {
  text-align: left;
  max-width: none;
  width: 100%;
  margin-left: 0;
}
/* content_simple prints style="text-align: center" straight onto .content from
   the row's `style` field, so this one needs !important — same situation as the
   JS-written bleed width in ITEM 1b. */
.cowai-page #integration .content { text-align: left !important; }
.cowai-page #integration .section_title { margin: 16px 0 0; }
/* the theme separates the heading from the body by 80px; the design uses the
   paragraph's own 20px */
.cowai-page #integration .content_wrapper { margin-top: 0; }
.cowai-page #integration .content > p {
  margin: 20px 0 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

/* the four requirements as green + rows, not a bulleted list */
.cowai-page #integration .content ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.cowai-page #integration .content li {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: 17px;
  line-height: 1.55;
  list-style: none;
  color: rgba(255, 255, 255, 0.86);
}
.cowai-page #integration .content li::before {
  content: "+";
  flex: none;
  position: static;
  width: auto;
  height: auto;
  background: none;
  color: #16C98B;
}

/* --- the schematic ------------------------------------------------------- */
.cowai-page .cowai-schematic {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 34px;
  box-sizing: border-box;
}
.cowai-page .cowai-schematic__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #16C98B;
}
.cowai-page .cowai-schematic__stage { position: relative; height: 210px; margin-top: 26px; }
.cowai-page .cowai-schematic__ceiling {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}
.cowai-page .cowai-schematic__stem {
  position: absolute;
  top: 3px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 28px;
  background: #16C98B;
}
.cowai-page .cowai-schematic__camera {
  position: absolute;
  top: 28px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 26px;
  border-radius: 5px;
  background: #16C98B;
}
.cowai-page .cowai-schematic__camera-label {
  position: absolute;
  top: 62px; left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 600;
  color: #16C98B;
  white-space: nowrap;
}
/* the light cone: a CSS triangle, apex at the camera, opening downwards */
.cowai-page .cowai-schematic__cone {
  position: absolute;
  top: 88px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 92px solid transparent;
  border-right: 92px solid transparent;
  border-bottom: 72px solid rgba(22, 201, 139, 0.14);
}
.cowai-page .cowai-schematic__floor {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.22);
}
.cowai-page .cowai-schematic__floor--far  { bottom: 44px; }
.cowai-page .cowai-schematic__floor--near { bottom: 0; }
.cowai-page .cowai-schematic__arrow {
  position: absolute;
  left: 26px; bottom: 8px;
  font-size: 26px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
}
.cowai-page .cowai-schematic__caption {
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

/* ==========================================================================
   Q — ground sequence for the blocks Übersicht and BCS-Messung use.
   Both designs give these the same treatment, so the rules stay on the block
   class; only the FAQ differs and takes a per-page class.
   ========================================================================== */
.cowai-page .b_installation_step_row { background: #262262; }
.cowai-page .b_two_column_content    { background: #E9F4FB; }
.cowai-page .b_research_detail       { background: #F7FBFE; }
/* the theme ships the partner band on #141867 */
.cowai-page .b_partner > .bg_section { background: #262262; }
/* on Übersicht the FAQ follows the #F7FBFE "Voraussetzungen" block, so K2's
   tint would run the two together — that design puts it on white instead. */
.cowai-page.cowai-uebersicht .b_faq > .bg_section { background: #ffffff; }

/* These blocks put their h2 outside .section_title, so the shared type rule
   never reaches them and they ship at 79-80px. */
.cowai-page .b_installation_step_row .step_title h2,
.cowai-page .b_partner h2,
.cowai-page .b_research_detail .section_title h2,
.cowai-page .b_two_column_content .section_title h2 {
  font-size: 46px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
}
@media (max-width: 991px) {
  .cowai-page .b_installation_step_row .step_title h2,
  .cowai-page .b_partner h2,
  .cowai-page .b_research_detail .section_title h2,
  .cowai-page .b_two_column_content .section_title h2 { font-size: 32px; }
}

/* ==========================================================================
   R — "Ein System. Zwei wichtige Gesundheitsparameter." as two white cards.
   The theme ships .type_absolute: a 600x600 media block with the copy laid
   over it. The design stacks them — a 260px image band, then the copy on white.
   ========================================================================== */
.cowai-page .b_installation_step_row .section_label { color: #16C98B; }
.cowai-page .b_installation_step_row .step_title h2 { color: #ffffff; }
.cowai-page .b_installation_step_row .section_label,
.cowai-page .b_installation_step_row .step_title { max-width: 760px; text-align: left; margin-left: 0; }
.cowai-page .b_installation_step_row .step_title { margin-top: 16px; }
.cowai-page .b_installation_step_row .top_description,
.cowai-page .b_installation_step_row .top_description p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  line-height: 1.6;
}
.cowai-page .b_installation_step_row .top_description { max-width: 760px; margin: 20px 0 0; }
.cowai-page .b_installation_step_row .customers_wrap { margin-top: 56px; }
.cowai-page .b_installation_step_row .customers_list { gap: 32px; align-items: stretch; }
.cowai-page .b_installation_step_row .customer_block_design {
  width: auto;
  flex: 1 1 460px;
  min-width: 0;
  height: auto;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* out of the overlay and back into normal flow */
.cowai-page .b_installation_step_row .media_wrap {
  position: static;
  height: 260px;
  flex: none;
  background: #E9F4FB;
}
.cowai-page .b_installation_step_row .media_block { position: static; height: 100%; width: 100%; }
/* main.css:3155 builds this box with `padding-top: 100%` and absolutely
   positions the image inside it — the same aspect-ratio trick as the #vorteile
   icons. With the band fixed at 260px the padding box collapsed the <picture>
   to zero height and the photo vanished. Undo the box, then size the image. */
.cowai-page .b_installation_step_row .customer_block_design .media_block_inner {
  padding-top: 0;
  height: 100%;
  width: 100%;
}
.cowai-page .b_installation_step_row .customer_block_design .media_block_inner picture {
  display: block;
  height: 100%;
}
.cowai-page .b_installation_step_row .customer_block_design .media_block_inner img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cowai-page .b_installation_step_row .block_content {
  position: static;
  width: 100%;
  height: auto;
  flex: 1;
  background: transparent;
}
/* main.css:9513 sets `padding: 45px 80px 80px` at (0,5,0) — the copy has to be
   inset that far to clear the photograph it used to sit on. Matched selector
   length to beat it, and the corner rounding now lives on the card itself. */
.cowai-page .b_installation_step_row .customers_wrap .customer_block_design.type_absolute .block_content {
  padding: 36px 36px 38px;
  border-radius: 0;
}
/* main.css:9494 lays an indigo gradient over the lower half of the card so white
   copy stays legible on the photo. The copy is on white now — the scrim would
   just paint the card indigo. */
.cowai-page .b_installation_step_row .customers_wrap .customer_block_design .block_content::before { content: none; }
.cowai-page .b_installation_step_row .customers_wrap .customer_block_design { border-radius: 14px; }
.cowai-page .b_installation_step_row .content_inner { width: 100%; max-width: none; }
.cowai-page .b_installation_step_row .title {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  color: #121B36;
}
.cowai-page .b_installation_step_row .block_content .content p {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #4A5872;
}
/* main.css:9544-9552 colours this list and its markers white at (0,7,0), for the
   photo the copy used to sit on. Matched that chain rather than reaching for
   !important, so the rules stay overridable. */
.cowai-page .b_installation_step_row .customers_wrap .customer_block_design.type_absolute .block_content .ul_decor ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: #4A5872;
}
.cowai-page .b_installation_step_row .customers_wrap .customer_block_design.type_absolute .block_content .ul_decor ul li {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #4A5872;
  list-style: none;
}
.cowai-page .b_installation_step_row .customers_wrap .customer_block_design.type_absolute .block_content .ul_decor ul li::before {
  content: "+";
  position: static;
  flex: none;
  width: auto;
  height: auto;
  background: none;
  color: #12A47C;
}
.cowai-page .b_installation_step_row .more_wrap { margin-top: 28px; }
.cowai-page .b_installation_step_row .btn_link {
  font-size: 16px;
  font-weight: 600;
  color: #0F7050;
}

/* ==========================================================================
   T — "Deutschlandweit vernetzt": heading across the top, four figures below.
   The theme sets the copy and the figures side by side; the design stacks them
   and rules each figure off with a hairline.
   ========================================================================== */
.cowai-page .b_partner .section_content { flex-wrap: wrap; }
.cowai-page .b_partner .left_part,
.cowai-page .b_partner .right_part { width: 100%; flex: 1 1 100%; max-width: none; }
.cowai-page .b_partner .right_part { margin-top: 52px; }
.cowai-page .b_partner .section_label { color: #16C98B; }
.cowai-page .b_partner h2 { color: #ffffff; }
.cowai-page .b_partner .content,
.cowai-page .b_partner .content p {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 760px;
}
/* .numpers_wrap is only an outer box — the figures sit one level deeper in
   .numbers_list, which the theme pins to 260px and stacks as a column beside
   the copy. That is the element that has to become the four-across row. */
.cowai-page .b_partner .numpers_wrap { width: 100%; max-width: none; }
.cowai-page .b_partner .numbers_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
  min-width: 0;
  max-width: none;
}
/* The design has this section on plain indigo. The theme paints a world map
   behind it, which reads oddly under a headline that says "Deutschlandweit"
   and competes with the figures. One line to bring back. */
.cowai-page .b_partner .map_decor { display: none; }
.cowai-page .b_partner .number_row {
  display: block;
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  padding-top: 22px;
  border-top: 2px solid rgba(255, 255, 255, 0.18);
}
.cowai-page .b_partner .number {
  font-size: 52px;
  font-weight: 500;
  line-height: 1;
  color: #16C98B;
}
.cowai-page .b_partner .number_title {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   S — "Von der Beobachtung zur konkreten Information" (content_with_mobile).
   Same shape as #dashboard in section L: heading across the row, screenshot
   left, the details as separate white cards right. Übersicht and BCS-Messung
   both use this layout and both designs treat it the same way.
   ========================================================================== */
@media (min-width: 992px) {
  .cowai-page .b_two_column_content .columns {
    display: grid;
    grid-template-columns: minmax(520px, 1.9fr) minmax(260px, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 40px;
    align-items: start;
  }
  .cowai-page .b_two_column_content .content_column,
  .cowai-page .b_two_column_content .content_inner { display: contents; }
  .cowai-page .b_two_column_content .section_label { grid-column: 1 / -1; grid-row: 1; max-width: 760px; }
  .cowai-page .b_two_column_content .section_title { grid-column: 1 / -1; grid-row: 2; max-width: 760px; }
  .cowai-page .b_two_column_content .media_wrapper { grid-column: 1; grid-row: 3; margin-top: 52px; }
  .cowai-page .b_two_column_content .content_part  { grid-column: 2; grid-row: 3; margin-top: 52px; }
  /* percentages resolve against the grid area once the parents are contents */
  .cowai-page .b_two_column_content .media_wrapper,
  .cowai-page .b_two_column_content .content_part { width: 100%; max-width: none; min-width: 0; }
}
.cowai-page .b_two_column_content .section_title { margin: 16px 0 0; }
.cowai-page .b_two_column_content .media { width: 100%; max-width: none; }

/* the details as cards, matching L */
.cowai-page .b_two_column_content .content_part .content ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cowai-page .b_two_column_content .content_part .content li {
  margin: 0;
  padding: 20px 22px;
  background: #ffffff;
  border-radius: 10px;
  list-style: none;
}
.cowai-page .b_two_column_content .content_part .content li::before,
.cowai-page .b_two_column_content .content_part .content li::after { content: none; display: none; }
.cowai-page .b_two_column_content .content_part .content li strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #121B36;
}
.cowai-page .b_two_column_content .content_part .content li span {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.55;
  color: #4A5872;
}

/* ==========================================================================
   U — "Passt COW-AI in meinen Stall?" (project_details).
   Copy left at 340, the five requirements right at 560, each a numbered row
   with a hairline under it.
   ========================================================================== */
.cowai-page .b_research_detail .research_detail { gap: 64px; align-items: flex-start; }
.cowai-page .b_research_detail .left_column  { flex: 1 1 340px; min-width: 300px; width: auto; }
.cowai-page .b_research_detail .right_column { flex: 1 1 560px; min-width: 480px; width: auto; }
.cowai-page .b_research_detail .left_column_inner,
.cowai-page .b_research_detail .right_column_inner { width: 100%; max-width: none; }
.cowai-page .b_research_detail .section_title { margin: 16px 0 0; }
.cowai-page .b_research_detail .section_title h2 { font-size: 42px; }
.cowai-page .b_research_detail .custom_content p {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #4A5872;
}
/* the CTA is a bare link in the copy field; the design shows the pill button */
.cowai-page .b_research_detail .custom_content a {
  display: inline-block;
  margin-top: 8px;
  padding: 15px 32px;
  border-radius: 999px;
  background: #0F7050;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.cowai-page .b_research_detail .custom_content a:hover { background: #12A47C; }

.cowai-page .b_research_detail .custom_description_list { display: flex; flex-direction: column; }
.cowai-page .b_research_detail .list_row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 22px 0;
  border-bottom: 1px solid #DCE7F0;
}
.cowai-page .b_research_detail .list_row:last-child { border-bottom: 0; }
.cowai-page .b_research_detail .list_row .title { width: 100%; margin: 0; }
.cowai-page .b_research_detail .list_row .title h3 {
  display: flex;
  gap: 20px;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: #121B36;
}
/* the number is part of the approved title string; the builder only wraps it so
   it can take the design's green treatment instead of reading as prose */
.cowai-page .cowai-step-num {
  flex: none;
  width: 28px;
  font-size: 15px;
  font-weight: 600;
  color: #12A47C;
}
.cowai-page .b_research_detail .list_row .content { width: 100%; padding-left: 48px; }
.cowai-page .b_research_detail .list_row .content p {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: #4A5872;
}
@media (max-width: 991px) {
  .cowai-page .b_research_detail .left_column,
  .cowai-page .b_research_detail .right_column { min-width: 0; }
  .cowai-page .b_research_detail .research_detail { gap: 32px; }
}

/* Both of these blocks use the theme's -15px gutter pattern: a row pulled 15px
   wider than the container with 15px of padding on each column. Harmless in the
   theme's own layout, but here it starts their content 15px left of every other
   section on the page. Zero both halves so everything sits on the same grid. */
.cowai-page .b_two_column_content .columns,
.cowai-page .b_research_detail .research_detail {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
.cowai-page .b_two_column_content .media_wrapper,
.cowai-page .b_two_column_content .content_column,
.cowai-page .b_two_column_content .content_part,
.cowai-page .b_research_detail .left_column,
.cowai-page .b_research_detail .right_column {
  padding-left: 0;
  padding-right: 0;
}

/* content_with_mobile wraps its two images in the theme's own device chrome —
   imac_mockup.png and iphone_mockup_clear.png — and drops the supplied image
   into each screen. Both pages supply a render that is already a monitor and a
   phone, so the result was that render inside an iMac and again squeezed into a
   phone. The design shows one framed screenshot; drop the chrome and the second
   copy, and give the media the same white card as #dashboard in section L. */
.cowai-page .b_two_column_content .imac > picture { display: none; }
.cowai-page .b_two_column_content .imac_template,
.cowai-page .b_two_column_content .imac { height: auto; width: 100%; }
.cowai-page .b_two_column_content .anim_block,
.cowai-page .b_two_column_content .anim_block .image_wrapper {
  position: static;
  width: 100%;
  height: auto;
  transform: none;
}
.cowai-page .b_two_column_content .anim_block img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.cowai-page .b_two_column_content .media {
  border-radius: 16px;
  box-sizing: border-box;
}
/* Übersicht supplies the same monitor-and-phone render to both slots, so the
   small one is a duplicate and goes; the big one is already a device render and
   wants the light card, as on #dashboard. */
.cowai-page.cowai-uebersicht .b_two_column_content .additional_image { display: none; }
.cowai-page.cowai-uebersicht .b_two_column_content .media {
  background: #ffffff;
  padding: 22px 26px;
  box-shadow: 0 24px 60px rgba(18, 27, 54, 0.10);
}

/* BCS-Messung is the case the layout was built for: a flat dashboard screenshot
   in the design's dark bezel, with a real portrait clip in a phone frame over
   its bottom-right corner. Only the theme's iPhone chrome graphic is dropped —
   the frame is rebuilt to the design's geometry around the video itself. */
.cowai-page.cowai-bcs .b_two_column_content .media {
  background: #14161C;
  padding: 14px;
  box-shadow: 0 24px 60px rgba(18, 27, 54, 0.16);
}
.cowai-page.cowai-bcs .b_two_column_content .anim_block .image_wrapper {
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}
@media (min-width: 992px) {
  .cowai-page.cowai-bcs .b_two_column_content .media_wrapper {
    position: relative;
    padding-right: 48px;
    padding-bottom: 56px;
  }
  /* the theme makes .imac_template the positioning context and pins the phone to
     left: -71px inside it, hanging it off the left of the monitor. Making that
     wrapper static hands the job to .media_wrapper, and left/top are reset
     explicitly so only right/bottom place it. */
  .cowai-page.cowai-bcs .b_two_column_content .imac_template { position: static; }
  .cowai-page.cowai-bcs .b_two_column_content .additional_image {
    position: absolute;
    right: 0;
    bottom: 0;
    left: auto;
    top: auto;
    width: 178px;
    height: auto;
    padding: 8px;
    background: #14161C;
    border-radius: 26px;
    box-shadow: 0 20px 48px rgba(18, 27, 54, 0.3);
  }
}
.cowai-page.cowai-bcs .b_two_column_content .additional_image > .image { display: none; }
.cowai-page.cowai-bcs .b_two_column_content .additional_image .video_wrapper {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 17;
  border-radius: 20px;
  overflow: hidden;
  background: #121B36;
}
.cowai-page.cowai-bcs .b_two_column_content .additional_image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the theme separates the heading from the body by 80px here too; the design
   uses the paragraph's own 20px (same as #integration in section O) */
.cowai-page .b_research_detail .custom_content { margin-top: 0; }

/* ==========================================================================
   V — remaining detail work against the designs.
   ========================================================================== */

/* --- FAQ toggle ---------------------------------------------------------- */
/* The theme draws a 64px filled indigo disc via .faq_title::after, which at this
   size dominates the row and forces it to 146px tall. The design has a bare
   green + that rotates to a x when the row opens. */
.cowai-page .b_faq .faq_title {
  padding: 22px 40px 22px 0;
  font-size: 18px;
  font-weight: 500;
}
/* The + is left in flow as a flex item of .faq_title rather than absolutely
   positioned: the row is already `display: flex; align-items: center`, so
   vertical centring comes for free and cannot drift from the question text. */
.cowai-page .b_faq .faq_title::after {
  content: "+";
  position: static;
  flex: none;
  margin-left: auto;
  width: auto;
  height: auto;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 22px;
  line-height: 1;
  color: #12A47C;
  transform: none;
  transition: transform 0.2s ease;
}
.cowai-page .b_faq .faq_row.active .faq_title::after,
.cowai-page .b_faq .faq_row.open .faq_title::after,
.cowai-page .b_faq .faq_row.is-open .faq_title::after {
  transform: rotate(45deg);
}
/* the theme rules the first row off in green; the design has one hairline
   treatment for every row and none above the first */
.cowai-page .b_faq .faq_row { border-top: 0; }
.cowai-page .b_faq .faq_content .content_wrap,
.cowai-page .b_faq .faq_content p { padding-bottom: 0; }
.cowai-page .b_faq .faq_content { padding-bottom: 0; }
/* the theme separates heading from list by 80px; the design uses 48px */
.cowai-page .b_faq .faq_wrapper { margin-top: 48px; }

/* --- §8 media pill and bullets ------------------------------------------- */
.cowai-page #gangbild .video { position: relative; }
.cowai-page .cowai-media-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(18, 27, 54, 0.72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  pointer-events: none;
}
.cowai-page .cowai-media-pill__dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16C98B;
}
/* the theme leaves these as default discs; every other list on the page is a
   green + row */
.cowai-page #gangbild .content ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.cowai-page #gangbild .content li {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cowai-page #gangbild .content li::before {
  content: "+";
  flex: none;
  position: static;
  width: auto;
  height: auto;
  background: none;
  color: #12A47C;
}

/* --- Übersicht card eyebrow and NEU badge -------------------------------- */
.cowai-page .cowai-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #12A47C;
}
.cowai-page .cowai-card-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: #16C98B;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* --- hero eyebrow legibility --------------------------------------------- */
/* The scrim is the design's own gradient, and the copy block is tall enough that
   the eyebrow lands at ~15% down, where the gradient is at its lightest (0.2).
   Green on a sunlit stall photo is thin there, so the eyebrow — and only the
   eyebrow — gets a shadow. Colour and gradient stay exactly as designed. */
.cowai-page .cowai-eyebrow { text-shadow: 0 1px 12px rgba(18, 27, 54, 0.75); }

/* the theme reserves 144px for the disc that section V just removed */
.cowai-page .b_faq .faq_title { min-height: 0; }

/* ==========================================================================
   W — "COW-AI im Einsatz": the two references as a card pair.

   Both pages now carry Klaus Dieter Augustin and Frank Cordes side by side in
   an info_block, which is the theme's own two-card layout — the same one behind
   "Zwei Anwendungen". That means this block arrives wearing section R's indigo
   treatment, so everything below is an id-scoped correction of it.

   BCS-Messung keeps a single reference as a content_with_image row; section M
   styles that one.
   ========================================================================== */
.cowai-page #referenzen { background: #ffffff; }
.cowai-page #referenzen .section_label { color: #12A47C; }
/* no h2 here — the eyebrow is the whole heading, so the cards sit closer */
.cowai-page #referenzen .customers_wrap { margin-top: 40px; }
.cowai-page #referenzen .customers_list { gap: 32px; }

/* white cards on a white ground need an edge to read as cards */
.cowai-page #referenzen .customers_wrap .customer_block_design {
  flex: 1 1 460px;
  border: 1px solid #E4EBF2;
  border-radius: 14px;
}
/* section R fixes the image band at 260px for the product cards. A portrait
   photographed in a barn wants a wider crop and its subject nearer the top. */
/* The media block is taken out of flow so the aspect-ratio actually governs:
   left in flow, the <img> at height:100% resolves against an auto-height parent,
   renders at its natural size and pushes the box past the ratio — which is why
   the two photos came out 402px and 580px tall instead of matching. */
.cowai-page #referenzen .media_wrap {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #E9F4FB;
}
.cowai-page #referenzen .media_block {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cowai-page #referenzen .media_block_inner { width: 100%; height: 100%; }
.cowai-page #referenzen .media_block_inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* both subjects stand centre-frame with headroom above */
  object-position: center 28%;
}

/* the card heading is the short pull-quote, so it drops from the product cards'
   30px/500 to the design's quote scale */
.cowai-page #referenzen .title {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  color: #121B36;
}
.cowai-page #referenzen .block_content .content p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: #4A5872;
}
/* attribution: name blocked out at 17/600, role beneath at 15 — one <p> with a
   <br>, the same shape as the old single-reference row in section M */
.cowai-page #referenzen .block_content .content p:last-child {
  margin-top: 22px;
  font-size: 15px;
}
.cowai-page #referenzen .block_content .content p strong {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: 600;
  color: #121B36;
}
.cowai-page #referenzen .block_content .content p strong + br { display: none; }

/* --------------------------------------------------------------------------
   §8 media box — main.css:9057 gives .media_inner `padding-top: 56.25%` to
   reserve a 16:9 box, then expects .video to fill it with `position: absolute`.
   That second rule loses to a later `.video { position: relative }`, so the clip
   sits *below* the reserved space instead of inside it and the dark frame comes
   out exactly twice the video's height — 816px of frame around 394px of video.

   The design has no aspect box here at all: the clip fills the width and sets
   its own height. Dropping the padding does that and removes the dead space.
   -------------------------------------------------------------------------- */
.cowai-page #gangbild .media_inner { padding-top: 0; }
.cowai-page #gangbild .video { position: static; height: auto; }
.cowai-page #gangbild .video video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: fill;
}

/* The trailing "Aufnahme aus einem COW-AI Partnerbetrieb …" is a caption, but it
   has no top margin and shares the list's left edge, so it read as a fourth
   bullet running on from "Gehgeschwindigkeit und Rhythmus". Same treatment as
   the source note under the milk chart. */
.cowai-page #gangbild .content ul + p {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #8A94A6;
}