/*
 * site3.css — Website 3.0 CI re-skin bridge (Q-2331).
 *
 * Lives under /wf-assets/ so BOTH the Astro pages AND the injected mirror header
 * enhancement can reference it with one stable path.
 *
 * Purpose: the new Astro use-case/vergleich/integration/ratgeber pages keep their
 * semantic markup (.hero / .section / .btn / .card / .steps / .faq / .cta-band
 * from the skeleton), but must render in the REAL Flowers brand design. This file
 * remaps the skeleton's global.css design tokens onto the real Webflow CI tokens
 * (sampled from fs-flowers-software.webflow.shared...min.css) and restyles the
 * shared components to the Flowers look (mint pill buttons, Merriweather headings,
 * Inter body, dark-blue brand, offwhite surfaces). It is loaded AFTER global.css
 * and AFTER the Webflow shared CSS, so it wins the cascade for the page body.
 *
 * It ALSO carries the small mega-menu panel styles (the only NEW chrome this wave)
 * — see the bottom section — styled to match the CI (same radii/shadows/colors).
 *
 * CI source tokens used (from the Webflow shared CSS :root):
 *   brand mint      #12cea1   (--_color---brand--mint)
 *   dark blue       #002c3a   (--_color---brand--dark-blue)
 *   dark blue 2     #1f414d   (--_color---brand--dark-blue-2, hover)
 *   brand light     #faf4ee   (--_color---brand--light, warm surface)
 *   offwhite        #ffffff
 *   gray-700        #384250   (muted text)
 *   gray-300        #d2d6db   (borders)
 *   body font       "Inter Variablefont", Arial, sans-serif
 *   heading font    Merriweather, "Times New Roman", serif
 */

/* ---- Token remap: skeleton global.css vars -> real Flowers CI ---- */
:root:not([data-wf-domain]), html[data-real-layout] {
  --color-bg: #ffffff;
  --color-fg: #002c3a;            /* brand dark-blue for body text/headings */
  --color-muted: #384250;        /* gray-700 */
  --color-accent: #12cea1;       /* brand mint */
  --color-accent-fg: #002c3a;    /* dark text on mint (CI button text) */
  --color-surface: #faf4ee;      /* brand warm light */
  --color-border: #d2d6db;       /* gray-300 */
  --color-band: #002c3a;         /* dark-blue band */
  --color-band-fg: #ffffff;
  --radius: 1rem;                /* CI cards/radius */
  --font: "Inter Variablefont", Arial, sans-serif;
  --font-heading: Merriweather, "Times New Roman", serif;
  --mint-hover: #002c3a;
}

/* Body + base type in the real fonts */
:is(html:not([data-wf-domain]), html[data-real-layout]) { font-family: var(--font); color: var(--color-fg); }

/*
 * Q-3806 launch closure — global.css supplies the semantic skeleton's generic
 * `a { color: var(--color-accent) }` rule. RealLayout intentionally loads that
 * file between the Webflow stylesheet and this bridge, so the generic rule used
 * to leak into the imported Webflow topbar and turn phone/e-mail mint. Keep the
 * skeleton link token out of the shared chrome: the Webflow baseline inherits
 * white from .nav_top in every render family.
 */
html[data-real-layout] .nav_top .topbarlink,
html[data-real-layout] .nav_top .topbarlink:visited {
  color: inherit;
}

/* Headings -> Merriweather serif, like flowers-software.de */
:is(html:not([data-wf-domain]), html[data-real-layout]) .hero h1,
:is(html:not([data-wf-domain]), html[data-real-layout]) .section h2,
:is(html:not([data-wf-domain]), html[data-real-layout]) .section h3,
:is(html:not([data-wf-domain]), html[data-real-layout]) .cta-band h2,
:is(html:not([data-wf-domain]), html[data-real-layout]) .card h3,
:is(html:not([data-wf-domain]), html[data-real-layout]) .article h1,
:is(html:not([data-wf-domain]), html[data-real-layout]) .article h2,
:is(html:not([data-wf-domain]), html[data-real-layout]) .faq h2 {
  font-family: var(--font-heading);
  letter-spacing: 0;
}
:is(html:not([data-wf-domain]), html[data-real-layout]) .hero h1 { font-size: 3.0625rem; line-height: 1.15; }
:is(html:not([data-wf-domain]), html[data-real-layout]) .section h2 { font-size: 2.40625rem; line-height: 1.2; }

/* Eyebrow / inline trust in mint + uppercase rooftop style */
:is(html:not([data-wf-domain]), html[data-real-layout]) .hero .eyebrow { color: var(--color-accent); }

/* ---- Buttons: real CI mint pill (.btn matches .btn_main_wrap look) ---- */
:is(html:not([data-wf-domain]), html[data-real-layout]) .btn {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border-radius: 100vw;               /* CI pill */
  padding: 0.875rem 1.875rem;         /* --_button-size vertical/horizontal */
  font-weight: 500;
  border: 0.094rem solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease;
  line-height: 1.2;
}
:is(html:not([data-wf-domain]), html[data-real-layout]) .btn:hover {
  filter: none;
  background: var(--mint-hover);      /* dark-blue on hover, CI behavior */
  color: #ffffff;
}
:is(html:not([data-wf-domain]), html[data-real-layout]) .btn--secondary {
  background: #ffffff;
  color: #384250;
  border: 0.094rem solid var(--color-border);
}
:is(html:not([data-wf-domain]), html[data-real-layout]) .btn--secondary:hover {
  background: #fafafa;
  color: #1f2a37;
}

/* ---- Surfaces / cards in CI ---- */
:is(html:not([data-wf-domain]), html[data-real-layout]) .section--surface { background: var(--color-surface); }
:is(html:not([data-wf-domain]), html[data-real-layout]) .card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #ffffff;
}
:is(html:not([data-wf-domain]), html[data-real-layout]) .card h3 { font-family: var(--font-heading); }

/* Steps: mint numerals, rounded CI tiles */
:is(html:not([data-wf-domain]), html[data-real-layout]) .steps li { border-radius: 0.75rem; }
:is(html:not([data-wf-domain]), html[data-real-layout]) .steps li::before { background: var(--color-accent); color: var(--color-accent-fg); }

/* Criteria table header in warm surface */
html table.criteria th { background: var(--color-surface, var(--_color---brand--light, #faf4ee)); }

/* CTA band: dark-blue with mint button (already inherits --color-band) */
:is(html:not([data-wf-domain]), html[data-real-layout]) .cta-band h2 { font-family: var(--font-heading); }
:is(html:not([data-wf-domain]), html[data-real-layout]) .cta-band p { color: #cbd9dd; }

/* FAQ summary in brand */
:is(html:not([data-wf-domain]), html[data-real-layout]) .faq summary { color: var(--color-fg); }

/* Trust inline chips */
:is(html:not([data-wf-domain]), html[data-real-layout]) .trust-inline li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100vw;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
}

/* Keep the labs draft-note readable but on-brand border */
:is(html:not([data-wf-domain]), html[data-real-layout]) .draft-note { border-radius: 0.75rem; }

@media (max-width: 47.9375rem) {
  html[data-wf-domain] .c-benefis-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Q-3026 final launch gate — 320px comparison-table containment.
 * Webflow's table blocks are flex items with the default min-width:auto.
 * A long German heading can therefore establish a min-content width wider
 * than the remaining 320px viewport after the icon and mobile padding. Keep
 * the existing visual composition, but allow the block and text column to
 * shrink and wrap inside their container.
 */
@media (max-width: 22.5rem) {
  html[data-wf-domain] .c-table-wrap,
  html[data-wf-domain] .c-table-block,
  html[data-wf-domain] .c-table-list-item,
  html[data-wf-domain] .c-table-list-text {
    min-width: 0;
    max-width: 100%;
  }

  html[data-wf-domain] .c-table-block {
    width: 100%;
    box-sizing: border-box;
  }

  html[data-wf-domain] .c-table-list-text,
  html[data-wf-domain] .c-table-list-text * {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 47.9375rem) {
  html table.criteria {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
  }

  html table.criteria thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  html table.criteria tbody,
  html table.criteria tr,
  html table.criteria td {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  html table.criteria tr {
    margin-bottom: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--color-border, var(--_color---neutral--gray-300, #d2d6db));
    border-radius: 0.75rem;
    background: #ffffff;
  }

  html table.criteria td {
    display: grid;
    grid-template-columns: minmax(6.75rem, 38%) minmax(0, 1fr);
    gap: 0.75rem;
    border: 0;
    padding: 0.75rem 1rem;
    overflow-wrap: anywhere;
  }

  html table.criteria td + td {
    border-top: 1px solid var(--color-border, var(--_color---neutral--gray-300, #d2d6db));
  }

  html table.criteria td::before {
    content: attr(data-label);
    color: var(--color-muted, var(--_color---neutral--gray-700, #384250));
    font-weight: 600;
  }
}

@media (max-width: 64rem) {
  html[data-wf-domain] .card,
  html[data-wf-domain] .c-content-block,
  html[data-wf-domain] .u-vflex-left-top,
  html[data-wf-domain] .u-hflex-left-top,
  html[data-wf-domain] .u-grid-column-2 > *,
  html[data-wf-domain] .u-grid-column-3 > *,
  html[data-wf-domain] .u-grid-column-4 > * {
    min-width: 0;
    max-width: 100%;
  }

  html[data-wf-domain] h1,
  html[data-wf-domain] h2,
  html[data-wf-domain] h4,
  html[data-wf-domain] h5,
  html[data-wf-domain] h6,
  html[data-wf-domain] .u-text-style-h1,
  html[data-wf-domain] .u-text-style-h2,
  html[data-wf-domain] .u-text-style-h4,
  html[data-wf-domain] .u-text-style-h5,
  html[data-wf-domain] .u-text-style-h6,
  html[data-wf-domain] h3.u-text-style-h6,
  html[data-wf-domain] .blog-rich h3,
  html[data-wf-domain] .rich_teaser h3 {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: inherit;
    hyphens: manual;
  }

  html[data-wf-domain] p,
  html[data-wf-domain] li {
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: manual;
  }

  html[data-wf-domain] .tab-slide-text,
  html[data-wf-domain] .tab-slide-text * {
    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  html[data-wf-domain][data-site-route="/de/hausverwaltung-software"] .u-grid-column-4 h3.u-text-style-h6,
  html[data-wf-domain][data-site-route="/de/hausverwaltung-software"] .u-grid-column-4 .u-text-style-h6,
  html[data-wf-domain][data-site-route="/de/hausverwaltung-software"] .u-grid-column-4 .u-text-style-h6 strong {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }

  html[data-wf-domain] .blog-body_content,
  html[data-wf-domain] .blog-body_layout,
  html[data-wf-domain] .blog-body_main-part,
  html[data-wf-domain] .blog-rich,
  html[data-wf-domain] .blog-body_teaser_wrap,
  html[data-wf-domain] .rich_teaser,
  html[data-wf-domain] .blog-body_img_wrap,
  html[data-wf-domain] .blog-body_img {
    max-width: 100%;
  }

  html[data-wf-domain] .tab-slide-link.w--current .tab-slide-text {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html[data-wf-domain] .tab-slide-link.w--current .tab-slide-text > div {
    display: block !important;
    -webkit-box-orient: unset !important;
    -webkit-line-clamp: unset !important;
  }
}

html[data-wf-domain] .tabs-content.w-tab-content,
html[data-wf-domain] .tabs-content.w-tab-content .w-tab-pane,
html[data-wf-domain] .tabs-content.w-tab-content .w-layout-grid,
html[data-wf-domain] .tabs-content.w-tab-content .c-content-block,
html[data-wf-domain] .tabs-content.w-tab-content .u-vflex-left-top {
  min-width: 0;
  max-width: 100%;
}

html[data-wf-domain] .tabs-content.w-tab-content h3.u-text-style-h6,
html[data-wf-domain] .tabs-content.w-tab-content .u-text-style-h6,
html[data-wf-domain] .tabs-content.w-tab-content .u-text-style-small,
html[data-wf-domain] .tabs-content.w-tab-content p {
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: manual;
}

@media (min-width: 48rem) and (max-width: 68.75rem) {
  html[data-wf-domain] .tabs-menu.w-tab-menu:has(> .w-tab-link:nth-child(2):last-child) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    justify-content: stretch;
    width: 100%;
    max-width: 100%;
  }

  html[data-wf-domain] .tabs-menu.w-tab-menu:has(> .w-tab-link:nth-child(3):last-child) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    justify-content: stretch;
    width: 100%;
    max-width: 100%;
  }

  html[data-wf-domain] .tabs-menu.w-tab-menu:has(> .w-tab-link:nth-child(2):last-child) > .w-tab-link,
  html[data-wf-domain] .tabs-menu.w-tab-menu:has(> .w-tab-link:nth-child(3):last-child) > .w-tab-link {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* =====================================================================
 * Q-2731 — Webflow LAYOUT CONTRACTS the fixed chrome depends on.
 * The token bridge above remaps colors/fonts; this block carries the
 * geometry contracts of the real design system (sources cited per rule).
 * Depends on /wf-assets/wf-fluid-tokens.css (the mirror page_code_base
 * fluid-token layer) being loaded; every var has a static fallback.
 * ===================================================================== */

/*
 * D2 — fixed-chrome anchor compensation. Total fixed chrome (measured on the
 * mirror AND the promoted pages) = .nav_top 2.75rem (44px) + desktop
 * .nav_contain 6.25rem (100px) = 9rem/144px; 10rem adds breathing room.
 * NOTE: --nav--height-total (RealHeader embed) is only 6rem and EXCLUDES the
 * topbar — do not use it bare. Native #hash loads use this directly; click
 * jumps are routed through scrollIntoView by RealLayout so BOTH paths honor
 * this single value. (site3.css is also linked by the enhanced mirror pages,
 * which share the same fixed chrome — pure improvement there.)
 */
html { scroll-padding-top: 10rem; }

/*
 * D1 — first-section nav-clearance contract. The real pages clear the fixed
 * 144px chrome via `.u-theme-hero { margin-top: var(--size--9rem); }`
 * (fs-flowers-software.webflow.shared.4ef2c819a.min.css). Skeleton-built
 * pages start with .hero/.article instead, which never adopted that
 * contract -> H1 under the nav (audit Q-2731 D1). Give the first in-flow
 * section the exact same offset; real `.u-theme-hero` sections are excluded
 * (they already carry it from the shared CSS).
 * --size--9rem: 9rem desktop, clamp(5rem, 3.572rem + 7.14vw, 9rem) fluid.
 */
:is(html:not([data-wf-domain]), html[data-real-layout]) .page_main > :first-child:not(.u-theme-hero) {
  margin-top: var(--size--9rem, 9rem);
}

/*
 * Spacing rhythm: the real sections breathe with the fluid MAIN scale —
 * mirror contract `.u-theme-1 { padding-top/bottom: var(--_spacing---section-
 * space--main) }` with --_spacing---section-space--main = var(--size--6rem)
 * (shared min.css; audit Q-2731 D5 "static 4rem" finding). clamp(3.5rem…6rem)
 * via the fluid layer, static 6rem fallback.
 */
:is(html:not([data-wf-domain]), html[data-real-layout]) .hero { padding: var(--size--6rem, 6rem) 0; }
:is(html:not([data-wf-domain]), html[data-real-layout]) .section { padding: var(--size--6rem, 6rem) 0; }

/*
 * D3 — container geometry. Real contract (shared min.css):
 *   .u-container { width:100%; max-width: var(--container--main); margin-inline:auto; }
 * with --container--main = calc(min(82rem,100vw) - --site--margin*2) and
 * --site--margin = clamp(1rem, 0.286rem + 3.57vw, 3rem) from the fluid layer
 * (= 1216px content @1440, 18.5px gutters @390 — audit D3 mirror numbers).
 * The side margins are baked into the width calc, so the skeleton's own
 * 1rem padding (global.css) is zeroed to avoid double gutters.
 */
:is(html:not([data-wf-domain]), html[data-real-layout]) .container {
  max-width: var(--container--main, 75rem);
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 22.5rem) {
  :is(html:not([data-wf-domain]), html[data-real-layout]) .format-erp .container {
    max-width: calc(100vw - 2rem);
  }

  :is(html:not([data-wf-domain]), html[data-real-layout]) .format-erp__grid,
  :is(html:not([data-wf-domain]), html[data-real-layout]) .format-erp__grid > * {
    min-width: 0;
    max-width: 100%;
  }
}

/*
 * Q-3026 — tablet launch-gate hardening.
 * The 8-viewport mobile matrix caught Webflow product sections where 768/1024px
 * tablet widths clipped tab text or let right-column cards bleed a few pixels
 * beyond the viewport. Keep the original two-column composition, but force the
 * grid math and text boxes to stay inside the available inline size.
 */
@media (min-width: 48rem) and (max-width: 68.75rem) {
  :is(html:not([data-wf-domain]), html[data-real-layout]) .u-container,
  :is(html:not([data-wf-domain]), html[data-real-layout]) .u-container-small,
  :is(html:not([data-wf-domain]), html[data-real-layout]) .u-container-full {
    max-width: min(var(--container--main, 75rem), calc(100vw - 3rem));
  }

  :is(html:not([data-wf-domain]), html[data-real-layout]) .u-grid-column-2,
  :is(html:not([data-wf-domain]), html[data-real-layout]) .u-grid-column-2.u-gap-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(html:not([data-wf-domain]), html[data-real-layout]) .u-grid-column-2.u-gap-6 {
    grid-column-gap: min(var(--_spacing---space--6, 6rem), 3rem);
    grid-row-gap: min(var(--_spacing---space--6, 6rem), 3rem);
  }

  :is(html:not([data-wf-domain]), html[data-real-layout]) .card,
  :is(html:not([data-wf-domain]), html[data-real-layout]) .card.u-vflex-left-top.u-gap-1,
  :is(html:not([data-wf-domain]), html[data-real-layout]) .u-vflex-left-top.u-gap-1 {
    min-width: 0;
    max-width: 100%;
  }

  :is(html:not([data-wf-domain]), html[data-real-layout]) .tab-slide-text {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  :is(html:not([data-wf-domain]), html[data-real-layout]) .u-text-style-h6,
  :is(html:not([data-wf-domain]), html[data-real-layout]) .u-text-style-h5,
  :is(html:not([data-wf-domain]), html[data-real-layout]) .u-text-style-small,
  :is(html:not([data-wf-domain]), html[data-real-layout]) .tab-slide-text {
    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* =====================================================================
 * Q-2731 D5 — promoted-page body polish in the real design language.
 * Shadow value from the real `.u-theme-light` sections (shared min.css:
 * box-shadow: 0 0 40px #0000001a). Radii already resolve to the CI 1rem
 * via the --radius token remap above.
 * ===================================================================== */
:is(html:not([data-wf-domain]), html[data-real-layout]) .screenshot-gallery__item img,
:is(html:not([data-wf-domain]), html[data-real-layout]) .screenshot-gallery__placeholder,
:is(html:not([data-wf-domain]), html[data-real-layout]) .video-embed video {
  box-shadow: 0 0 40px #0000001a;
}
:is(html:not([data-wf-domain]), html[data-real-layout]) .card { box-shadow: 0 0 40px #0000000d; }

/* =====================================================================
 * site3-mm — STATE-OF-THE-ART Lösungen mega-menu (Q-2331 wave 3).
 *
 * The redesigned panel injected into the real mirror header
 * (mirror/pages_enhanced) AND mirrored 1:1 in LoesungenMegaMenu.astro for the
 * /labs build. It renders inside the Webflow .nav_dropdown_mega_layout, so we
 * first NEUTRALIZE Webflow's 2-col grid on the injected wrapper, then take over
 * fully with our own architecture:
 *   content grid (category blocks: eyebrow + icon hover-cards)  +  featured card
 *   ───────────────────────────── utility row ───────────────────────────────
 *
 * DESIGN SYSTEM (reproducible — also in the component contract):
 *   tokens   mint #12cea1 · dark-blue #002c3a · offwhite #faf4ee · gray #d2d6db
 *            muted #5b6b72 · cyan #02AFC7 · pink #FF5986
 *   spacing  scale .25/.5/.75/1/1.5/2rem; card pad .75rem; col gap 1.5/2.25rem
 *   radius   panel inherits Webflow nav radius; cards .75rem; featured 1rem
 *   icons    inline SVG line, 20px stroke 1.6 currentColor (mint inside tile)
 *   type     eyebrow .72rem upper +.08em muted bold · title .9rem 600 dark-blue
 *            desc .8rem muted · Inter throughout (NO serif inside the menu)
 *   motion   panel fade+rise 180ms ease-out; item bg + icon-tile 150ms ease
 * ===================================================================== */

:root {
  --s3mm-mint: #12cea1;
  --s3mm-dark: #002c3a;
  --s3mm-offwhite: #faf4ee;
  --s3mm-border: #e3e1dc;
  --s3mm-muted: #5b6b72;
  --s3mm-cyan: #02AFC7;
  --s3mm-pink: #FF5986;
  --s3mm-mint-soft: rgba(18, 206, 161, 0.12);
  --s3mm-mint-soft-2: rgba(18, 206, 161, 0.18);
}

/* ---- Neutralize Webflow grid on the injected wrapper's parent ---- */
.nav_dropdown_mega_layout:has(> .site3-mm) {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
/* Tighten the Webflow panel container so our design controls the rhythm. */
.nav_component .site3-mm .nav_dropdown_list { padding: 0; list-style: none; margin: 0; }
.nav_component .site3-mm .nav_dropdown_item { margin: 0; }

/* ---- Wrapper ---- */
.site3-mm {
  font-family: "Inter Variablefont", Arial, sans-serif;
  color: var(--s3mm-dark);
  padding: 0.25rem 0.25rem 0;
  animation: s3mm-rise 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes s3mm-rise {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- DESKTOP: content grid + featured card + utility row ---- */
.site3-mm--desktop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  grid-template-areas: "cats featured" "utility utility";
  column-gap: 2rem;
  row-gap: 1.25rem;
  align-items: stretch;
}
.site3-mm--desktop .site3-mm__cats {
  grid-area: cats;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2.25rem;
  row-gap: 1.5rem;
}
/* Q-3806 solution parity: six categories use the space formerly reserved
   for the featured card. Three columns produce a balanced two-row scan
   pattern on wide desktop. */
.site3-mm--loesungen .site3-mm__cats,
.site3-mm--solutions_en .site3-mm__cats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1.5rem;
}

.site3-mm__cat { min-width: 0; }
.site3-mm__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s3mm-muted);
  font-family: "Inter Variablefont", Arial, sans-serif;
}

/* ---- Item hover-card: icon tile + title + description ---- */
.site3-mm__list { display: grid; gap: 0.15rem; }
.site3-mm__item {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.5rem 0.55rem;
  border-radius: 0.75rem;
  text-decoration: none;
  color: var(--s3mm-dark);
  transition: background-color 150ms ease, transform 150ms ease;
}
.site3-mm__item:hover,
.site3-mm__item:focus-visible {
  background: var(--s3mm-offwhite);
  outline: none;
}
.site3-mm__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.6rem;
  background: var(--s3mm-mint-soft);
  color: var(--s3mm-dark);
  flex: none;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.site3-mm__item:hover .site3-mm__icon {
  background: var(--s3mm-mint);
  color: var(--s3mm-dark);
  transform: translateY(-1px);
}
.site3-mm__icon svg { display: block; }
.site3-mm__text { display: block; min-width: 0; }
.site3-mm__title {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--s3mm-dark);
  transition: color 150ms ease;
}
.site3-mm__item:hover .site3-mm__title { color: var(--s3mm-mint); }
.site3-mm__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 0.12rem;
  font-size: 0.79rem;
  line-height: 1.4;
  color: var(--s3mm-muted);
}

/* ---- Featured card (own column) ---- */
.site3-mm__featured {
  grid-area: featured;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.6rem 1.5rem 1.6rem;
  border-radius: 1rem;
  background: linear-gradient(155deg, #013844 0%, var(--s3mm-dark) 60%);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.site3-mm__featured:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -18px rgba(0, 44, 58, 0.55);
}
.site3-mm__featured-glow {
  display: none;
}
.site3-mm__featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  padding: 0.25rem 0.6rem 0.25rem 0.45rem;
  border-radius: 100vw;
  background: rgba(18, 206, 161, 0.18);
  color: var(--s3mm-mint);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site3-mm__featured-badge svg { width: 14px; height: 14px; }
.site3-mm__featured-title {
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}
.site3-mm__featured-desc {
  font-size: 0.86rem;
  line-height: 1.5;
  color: #cfe3e4;
}
.site3-mm__featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;     /* pin CTA to bottom so the card fills its column */
  padding-top: 0.75rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--s3mm-mint);
}
.site3-mm__featured-cta svg { width: 18px; height: 18px; transition: transform 150ms ease; }
.site3-mm__featured:hover .site3-mm__featured-cta svg { transform: translateX(3px); }

/* ---- Utility row ---- */
.site3-mm__utility {
  grid-area: utility;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--s3mm-border);
}
.site3-mm__alllink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--s3mm-dark);
  text-decoration: none;
}
.site3-mm__alllink svg { width: 18px; height: 18px; transition: transform 150ms ease; }
.site3-mm__alllink:hover { color: var(--s3mm-mint); }
.site3-mm__alllink:hover svg { transform: translateX(3px); }
.site3-mm__demo {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.4rem;
  border-radius: 100vw;
  background: var(--s3mm-mint);
  color: var(--s3mm-dark);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.site3-mm__demo:hover { background: var(--s3mm-dark); color: #fff; }

/* ---- Q-2717: plain mega menus (no featured card — Branchen, Produkt) ----
   Same site3-mm card system; the cats grid spans the full panel width. */
.site3-mm--desktop.site3-mm--plain {
  grid-template-columns: 1fr;
  grid-template-areas: "cats" "utility";
}

/* ---- Q-2717: compact dropdowns (Ressourcen, Unternehmen) ----
   Same card design inside the small .nav_dropdown_main_wrap chrome. */
.nav_dropdown_main_scroll .site3-mm { padding: 0.25rem; }
.site3-mm--compact.site3-mm--desktop { display: block; min-width: 21rem; }
.site3-mm--compact .site3-mm__cats { display: block; }
.site3-mm--compact .site3-mm__cat + .site3-mm__cat { margin-top: 1rem; }

/* ---- MOBILE: full-screen sheet quality (accordion body) ---- */
.site3-mm--mobile { display: block; padding: 0.25rem 0 0.5rem; }
.site3-mm--mobile .site3-mm__cats { display: block; }
.site3-mm--mobile .site3-mm__cat { margin-bottom: 1.1rem; }
.site3-mm--mobile .site3-mm__eyebrow { margin-bottom: 0.35rem; }
.site3-mm--mobile .site3-mm__item {
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  padding: 0.6rem 0.5rem;
  min-height: 48px;
  align-items: center;
}
.site3-mm--mobile .site3-mm__icon { width: 2.3rem; height: 2.3rem; }
.site3-mm--mobile .site3-mm__title { font-size: 0.95rem; }
.site3-mm--mobile .site3-mm__desc { font-size: 0.82rem; }
.site3-mm--mobile .site3-mm__featured { margin: 0.5rem 0 1rem; }
.site3-mm--mobile .site3-mm__utility {
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}
.site3-mm--mobile .site3-mm__demo { justify-content: center; padding: 0.85rem 1.4rem; }
.site3-mm--mobile .site3-mm__alllink { justify-content: center; padding: 0.6rem 0; }

/* Q-3806 / Andreas 2026-07-20: Product is a required top-level Preview and
   launch surface in both locales. It follows the same shared navigation
   visibility contract as the other generated dropdowns. */

/* ---- Tablet / narrow desktop: 2-col category grid, featured below ---- */
@media (max-width: 64rem) {
  .hero h1 { font-size: 2.25rem; }
  .section h2 { font-size: 1.75rem; }
  .site3-mm--desktop {
    grid-template-columns: 1fr;
    grid-template-areas: "cats" "featured" "utility";
  }
  .site3-mm--desktop .site3-mm__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site3-mm__featured { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .site3-mm,
  .site3-mm__item,
  .site3-mm__icon,
  .site3-mm__featured,
  .site3-mm__featured-cta svg,
  .site3-mm__alllink svg { animation: none !important; transition: none !important; }
}

/* Legacy fallbacks (only if some page still has the flat injection). */
.nav_component .nav_dropdown_text:hover { color: #12cea1; }
.nav_component .p_wrap.u-text-style-h5 p { color: #002c3a; }