/*! NBC v6.588 · Mobile layout QA · global correction layer */

/*
 * This file is intentionally loaded after the consolidated system stylesheet.
 * It contains only mobile corrections that must be shared by every page, plus
 * a small homepage block for the dedicated M2 composition.
 */
@media (max-width:760px){
  :root{
    --nbc-mobile-qa-gutter:var(--m-gutter,var(--nbc-mobile-gutter,20px));
    --nbc-mobile-qa-header:var(--m-header-h,var(--nbc-mobile-header,66px));
  }

  /* One viewport contract for every template. Decorative overflow is clipped,
     while all real layout children are allowed to shrink inside their parent. */
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:clip;
  }
  body.page.design-system-executive main,
  body.page.design-system-executive main.nbc-page-shell{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:clip;
  }
  body.page.design-system-executive main :where(
    section,article,div,aside,header,nav,figure,figcaption,form,fieldset,
    ul,ol,li,details,summary
  ){
    min-width:0;
    min-inline-size:0;
  }
  body.page.design-system-executive main :where(img,video,iframe,svg){
    max-width:100%;
  }

  /* The fixed mobile header owns the top clearance. Hash targets receive the
     same offset on every template, so headings never land behind the header. */
  html{
    scroll-padding-top:calc(var(--nbc-mobile-qa-header) + env(safe-area-inset-top) + 18px)!important;
  }
  body.page.design-system-executive main :where(section,article,aside,div)[id]{
    scroll-margin-top:calc(var(--nbc-mobile-qa-header) + env(safe-area-inset-top) + 18px)!important;
  }

  /* Legacy bundles reserved 84px below every main element for a mobile FAB
     which is hidden at this breakpoint. The final section and footer now own
     their spacing exactly once. */
  body.page.design-system-executive main,
  body.page.design-system-executive main.nbc-page-shell{
    padding-bottom:0!important;
  }

  /* One footer gutter. Older profile bundles added 20px padding to an already
     inset .wrap and therefore doubled the left and right whitespace. */
  body.page.design-system-executive .site-footer{
    padding-top:clamp(46px,12vw,56px)!important;
    padding-bottom:calc(28px + env(safe-area-inset-bottom))!important;
  }
  body.page.design-system-executive .site-footer>.wrap{
    box-sizing:border-box;
    width:calc(100% - (2 * var(--nbc-mobile-qa-gutter)))!important;
    max-width:none!important;
    margin-inline:auto!important;
    padding-inline:0!important;
  }
  body.page.design-system-executive .site-footer :where(
    .footer-main,
    .footer-signature,
    .footer-navigation-row,
    .footer-meta
  ){
    min-width:0;
    max-width:100%;
  }

  /* Mobile display type uses the available measure before it introduces a
     line break. Long specialist compounds may still hyphenate where the full
     viewport is genuinely insufficient. */
  body.page.design-system-executive main :where(
    h1,
    .editorial-title,
    .nbc-unified-hero-title,
    .nbc-section-title,
    .case2-title,
    .case2-section-title,
    .ep-chapter-title,
    .dg-section-title,
    .m3-title,
    .m4-title,
    .m5-local__title
  ){
    width:auto;
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-wrap:pretty;
  }
  /* Hero titles already contain editorially chosen soft hyphens where needed;
     automatic separations are unnecessary once the full measure is available. */
  body.page.design-system-executive main :where(
    h1,
    .editorial-title,
    .nbc-unified-hero-title,
    .case2-title
  ){
    -webkit-hyphens:manual!important;
    hyphens:manual!important;
  }
  /* Non-hero headings may contain genuine 20–28 character German compounds.
     Hyphenation is allowed only for sufficiently long words; short terms such
     as "Technologie" therefore move as a whole instead of breaking awkwardly. */
  body.page.design-system-executive main :where(
    h2,
    h3,
    .nbc-section-title,
    .case2-section-title,
    .ep-chapter-title,
    .dg-section-title
  ){
    -webkit-hyphens:auto!important;
    hyphens:auto!important;
    hyphenate-limit-chars:14 5 5;
  }
  /* M3–M5 sections are injected by the shared mobile runtimes and therefore
     need the same measure contract as headings present in the source HTML. */
  body.page.design-system-executive :where(.m3-title,.m4-title,.m5-local__title){
    width:100%!important;
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    -webkit-hyphens:auto!important;
    hyphens:auto!important;
    hyphenate-limit-chars:14 5 5;
    text-wrap:pretty!important;
  }
  body.page-template-article main .ep-chapter-title,
  body.page-case-detail main .case2-section-title{
    -webkit-hyphens:auto!important;
    hyphens:auto!important;
  }
  /* This internal specimen deliberately contains an unusually long compound. */
  body.page-styleguide main .nbc-section-title{
    -webkit-hyphens:auto!important;
    hyphens:auto!important;
  }

  /* Calls to action may become two clean lines on narrow devices instead of
     forcing the button or its parent wider than the viewport. */
  body.page.design-system-executive main :where(a.btn,button.btn){
    max-width:100%;
    height:auto;
    white-space:normal;
    overflow-wrap:break-word;
    text-align:center;
  }

  /* The left journey spine duplicates the browser scroll indicator on phones
     and consumes visual space without carrying additional information. */
  body.page.design-system-executive .spine{
    display:none!important;
  }

  /* -----------------------------------------------------------------------
     Shared terminal-section rhythm
     ----------------------------------------------------------------------- */
  body.page-home[data-m2-home-active="true"] .m2-final,
  body.page-template-service-detail .m3-next,
  body.page-template-industry-hub .m4-final{
    min-height:0!important;
    display:block!important;
    padding-top:clamp(56px,15vw,68px)!important;
    padding-bottom:clamp(56px,15vw,68px)!important;
  }
  body.page-template-industry-hub .m4-final{
    align-items:initial!important;
  }

  /* -----------------------------------------------------------------------
     Article template
     ----------------------------------------------------------------------- */
  /* The article wrapper previously added a second 142px clearance above a
     hero that already clears the fixed header. This affected all 19 articles. */
  body.page-template-article main>article.article.article-premium{
    padding-top:0!important;
    padding-bottom:0!important;
  }
  body.page-template-article main>article.article.article-premium>.ep-hero{
    min-height:0!important;
    padding-top:calc(var(--nbc-mobile-qa-header) + env(safe-area-inset-top) + 28px)!important;
    padding-bottom:42px!important;
  }

  /* Articles retain their dedicated two-pixel reading progress. The generic
     bar and the left journey spine are redundant on phones. */
  body.page-template-article>#progress,
  body.page-template-article .m4-reading-nav,
  body.page-template-article .m4-quick-answer{
    display:none!important;
  }

  /* The knowledge runtime is the single owner of the chapter path. A vertical
     list keeps long German labels complete instead of clipping the next pill. */
  body.page-template-article .m6-reading-path{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
    overflow:visible!important;
    padding:0 var(--nbc-mobile-qa-gutter)!important;
    border-bottom:1px solid rgba(247,245,242,.09)!important;
  }
  body.page-template-article .m6-reading-path a{
    box-sizing:border-box;
    width:100%!important;
    min-height:46px!important;
    display:grid!important;
    grid-template-columns:24px minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    padding:12px 0!important;
    border:0!important;
    border-top:1px solid rgba(247,245,242,.075)!important;
    border-radius:0!important;
    background:transparent!important;
    color:rgba(247,245,242,.74)!important;
    font-size:13px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
  }
  body.page-template-article .m6-reading-path a span{
    font-size:9px!important;
  }

  /* -----------------------------------------------------------------------
     Homepage M2 composition
     ----------------------------------------------------------------------- */
  body.page-home[data-m2-home-active="true"] .m2-section__title{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(29px,7.75vw,33px)!important;
    line-height:1.04!important;
    letter-spacing:-.038em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    -webkit-hyphens:none!important;
    hyphens:none!important;
    text-wrap:pretty!important;
  }
  body.page-home[data-m2-home-active="true"] .m2-final .m2-section__title{
    font-size:clamp(31px,8.1vw,35px)!important;
    line-height:1.03!important;
  }

  /* The former 660px / 84svh floor produced an empty lower half after the
     proposition. Keep a calm hero, but let the first section arrive sooner. */
  body.page-home[data-m2-home-active="true"] .home-process-opening.nbc-section,
  body.page-home[data-m2-home-active="true"] .home-process-opening__stage,
  body.page-home[data-m2-home-active="true"] .home-process-opening[data-hero-flow="v6561"]{
    height:auto!important;
    min-height:max(610px,78svh)!important;
  }
  body.page-home[data-m2-home-active="true"] .home-process-opening__hero{
    padding-bottom:64px!important;
  }

  /* Portrait and caption share the row without leaving the caption stranded at
     its lower edge. Both columns remain shrinkable down to 320px. */
  body.page-home[data-m2-home-active="true"] .m2-attitude__portrait{
    grid-template-columns:minmax(116px,148px) minmax(0,1fr)!important;
    align-items:center!important;
    gap:16px!important;
    padding-bottom:14px!important;
  }
  body.page-home[data-m2-home-active="true"] .m2-attitude__portrait img{
    height:220px!important;
  }
  body.page-home[data-m2-home-active="true"] .m2-attitude__portrait figcaption{
    align-self:center!important;
    padding-bottom:0!important;
  }
  body.page-home[data-m2-home-active="true"] .m2-attitude__portrait figcaption :where(span,strong){
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    -webkit-hyphens:auto!important;
    hyphens:auto!important;
  }

  /* Supporting proof cards no longer reserve an unbounded auto column for the
     metric. The metric receives a full row, so values and "Standardfälle" can
     never be cut off at the right edge. */
  body.page-home[data-m2-home-active="true"] .m2-proof-card:nth-child(n+2){
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:
      "label"
      "metric"
      "copy"
      "go"!important;
    column-gap:0!important;
  }
  body.page-home[data-m2-home-active="true"] .m2-proof-card:nth-child(n+2) .m2-proof-card__metric{
    width:100%;
    max-width:100%!important;
    margin-top:16px!important;
    font-size:clamp(28px,7.5vw,32px)!important;
    line-height:1!important;
    text-align:left!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    -webkit-hyphens:none!important;
    hyphens:none!important;
  }
  body.page-home[data-m2-home-active="true"] .m2-proof-card:nth-child(n+2) p{
    max-width:31ch!important;
  }
  body.page-home[data-m2-home-active="true"] .m2-proof-card:first-child .m2-proof-card__metric{
    max-width:100%;
    font-size:clamp(35px,9.7vw,42px)!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    -webkit-hyphens:none!important;
    hyphens:none!important;
  }

  body.page-home[data-m2-home-active="true"] .m2-final__cta{
    min-height:54px;
    padding:13px 18px;
    line-height:1.2;
  }
}

/* The case system declares its title size as an important layered rule. In the
   important cascade, the first declared layer wins over unlayered overrides;
   keep this typography correction in that same foundation layer. */
@layer nbc.normal{
  @media (max-width:760px){
    body.page-template-case-index .case2-title{
      font-size:clamp(32px,9.7vw,38px)!important;
      line-height:.96!important;
    }
  }
  @media (max-width:360px){
    body.page-template-article .ep-chapter-title.ep-title-sequence{
      font-size:27px!important;
    }
    body.page-template-article .ep-chapter-title .ep-title-keep{
      white-space:nowrap;
    }
  }
}

/* Between 431px and 760px the legacy scene started at left:10%, which created
   the reported ~1.5cm black strip. Moving both edges by the same amount keeps
   the artwork's width and scale unchanged while aligning it to the viewport. */
@media (min-width:431px) and (max-width:760px){
  body.page-home .home-process-opening__scene{
    left:0!important;
    right:calc(-100px + 10vw)!important;
  }
}

@media (max-width:360px){
  /* A few otherwise short hero titles contain one exceptionally wide German
     word. A two-pixel optical adjustment keeps the word intact at 320px. */
  body.page-regional-intelligence main .authority-hero h1{
    font-size:40px!important;
  }
  body.page-knowledge-hub.hub-erp main .authority-hero h1{
    font-size:37px!important;
  }
  body.page-legal:not(.page-styleguide) main .legal-hero h1.title-fit-longword{
    font-size:27px!important;
  }

  body.page-home[data-m2-home-active="true"] .m2-attitude__portrait{
    grid-template-columns:minmax(100px,116px) minmax(0,1fr)!important;
    gap:12px!important;
  }
  body.page-home[data-m2-home-active="true"] .m2-attitude__portrait img{
    height:208px!important;
  }
  body.page-home[data-m2-home-active="true"] .m2-final .m2-section__title{
    font-size:clamp(30px,8.8vw,32px)!important;
  }
}

@media (min-width:361px) and (max-width:379px){
  body.page-legal:not(.page-styleguide) main .legal-hero h1.title-fit-longword{
    font-size:31px!important;
  }
}

/* v6.595 rendered QA corrections
   ------------------------------------------------------------------------- */
@media (max-width:760px){
  /* The desktop H1 paints its gradient on the parent. Once the two title rows
     become block children on mobile, the direct text of row two no longer
     participates in that clipping context and "Übersetzt in" turns invisible.
     Give the second row its own clipping surface while preserving the bright
     Business-Value emphasis. */
  body.page-home[data-home-phase2="v6590"] #auftakt .home-process-opening__title > span:nth-child(2){
    color:transparent!important;
    background:linear-gradient(104deg,#f2f1eb 0%,#e7eee7 44%,#b9dfc2 76%,#86c895 100%);
    -webkit-background-clip:text;
    background-clip:text;
  }
  body.page-home[data-home-phase2="v6590"] #auftakt .home-process-opening__title > span:nth-child(2) em{
    color:#eef6ef!important;
    -webkit-text-fill-color:#eef6ef;
  }

  /* Phase 3 accidentally made the nested personal-contact card the 74px
     portrait column of its parent grid. The copy column therefore resolved to
     zero and rendered the founder's name one character per line. Keep the
     premium card, but let its own portrait/copy grid own the full row. */
  body.page-contact[data-mobile-phase3="v6591"] .ac-person-stage{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.page-contact[data-mobile-phase3="v6591"] .ac-personal-contact{
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
    grid-template-columns:74px minmax(0,1fr)!important;
  }
  body.page-contact[data-mobile-phase3="v6591"] .ac-personal-contact > div{
    width:auto!important;
    min-width:0!important;
  }
  body.page-contact[data-mobile-phase3="v6591"] .ac-personal-contact strong{
    width:auto!important;
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    -webkit-hyphens:none!important;
    hyphens:none!important;
  }
  body.page-contact[data-mobile-phase3="v6591"] .ac-person-stage-meta{
    grid-column:1 / -1!important;
    width:100%!important;
  }

  /* At the former 11.4vw size, "Entscheidungen." left only the full stop on a
     sixth line at 390px. The slightly tighter display scale keeps every word
     and its punctuation together from 320px through 430px. */
  body.page-template-case-index .case2-title{
    font-size:clamp(32px,9.7vw,38px)!important;
    line-height:.96!important;
  }
}