/*! NBC v7251 · Betriebszwilling typography + label alignment polish
   Purpose: unify microtype across all five everyday situations, remove icon/text collisions,
   strengthen readability on desktop/mobile, and preserve scene mechanics. */

@layer twin-typography-v7251 {
  /* Shared typography scale: one calm hierarchy across all five scenes. */
  body.page.page-home #situationen .rf-twin-model .rf-tool-head>.rf-tool-title{
    font-size:clamp(30px,3vw,45px)!important;
    line-height:1.025!important;
    letter-spacing:-.038em!important;
    font-weight:600!important;
  }

  body.page.page-home #situationen .ts-card-label,
  body.page.page-home #situationen .rs-island>span,
  body.page.page-home #situationen .rs-order header>span,
  body.page.page-home #situationen .tf-controls .rf-twin-metrics span,
  body.page.page-home #situationen .tf-controls .twin-intervention__label{
    font-family:'IBM Plex Mono',monospace!important;
    font-size:10.2px!important;
    line-height:1.34!important;
    letter-spacing:.055em!important;
    font-weight:600!important;
    color:rgba(190,216,198,.86)!important;
  }

  body.page.page-home #situationen .ts-card-value{
    font-family:Archivo,Arial,sans-serif!important;
    font-size:clamp(22px,1.62vw,27px)!important;
    line-height:1.12!important;
    letter-spacing:-.024em!important;
    font-weight:580!important;
    color:#f0f4ef!important;
  }
  body.page.page-home #situationen .ts-card-detail,
  body.page.page-home #situationen .rs-island p{
    font-family:Archivo,Arial,sans-serif!important;
    font-size:12.6px!important;
    line-height:1.46!important;
    color:rgba(220,231,223,.82)!important;
  }
  body.page.page-home #situationen .ts-route-labels{
    top:183px!important;
    font-family:Archivo,Arial,sans-serif!important;
    font-size:13px!important;
    line-height:1.35!important;
    letter-spacing:-.006em!important;
    font-weight:560!important;
    color:rgba(228,237,230,.84)!important;
  }
  body.page.page-home #situationen .ts-route-labels span{min-width:0!important}

  body.page.page-home #situationen .ts-before-ghost__label{
    fill:rgba(224,196,139,.70)!important;
    font-family:'IBM Plex Mono',monospace!important;
    font-size:9.2px!important;
    letter-spacing:.065em!important;
    font-weight:600!important;
  }
  body.page.page-home #situationen .ts-erp-lead text,
  body.page.page-home #situationen .ts-lane-tag text,
  body.page.page-home #situationen .ts-data-hub text:last-of-type,
  body.page.page-home #situationen .ts-data-decision text{
    font-family:'IBM Plex Mono',monospace!important;
    font-size:10.2px!important;
    letter-spacing:.055em!important;
    font-weight:650!important;
  }

  /* Data scene: large values stay prominent; supporting text remains readable after optimization. */
  body.page.page-home #situationen [data-scene=data-signature] .ts-card-value{
    font-size:clamp(29px,2.22vw,34px)!important;
    line-height:1!important;
  }
  body.page.page-home #situationen [data-scene=data-signature][data-state=unified] .ts-card:nth-child(-n+2){
    opacity:.78!important;
    filter:saturate(.94)!important;
  }
  body.page.page-home #situationen [data-scene=data-signature][data-state=unified] .ts-card:nth-child(-n+2) .ts-card-label,
  body.page.page-home #situationen [data-scene=data-signature][data-state=unified] .ts-card:nth-child(-n+2) .ts-card-detail{
    color:rgba(209,224,213,.84)!important;
  }

  /* ERP scene: reference path remains secondary, never illegible. */
  body.page.page-home #situationen [data-scene=erp-signature][data-state=unified] .ts-card:nth-child(2){
    opacity:.80!important;
    filter:saturate(.94)!important;
  }
  body.page.page-home #situationen [data-scene=erp-signature][data-state=unified] .ts-card:nth-child(2) .ts-card-label,
  body.page.page-home #situationen [data-scene=erp-signature][data-state=unified] .ts-card:nth-child(2) .ts-card-detail{
    color:rgba(204,223,210,.82)!important;
  }

  /* People scene: explicit icon zone, no icon sitting inside Geprüft/Abwesend/Nicht befugt. */
  body.page.page-home #situationen [data-scene=people-signature] .ts-card{
    min-height:96px!important;
    padding:15px 52px 14px 16px!important;
  }
  body.page.page-home #situationen [data-scene=people-signature] .ts-card::before{
    display:block!important;
    top:17px!important;
    right:18px!important;
    left:auto!important;
    width:11px!important;
    height:11px!important;
    border-width:1.7px!important;
    opacity:.82!important;
  }
  body.page.page-home #situationen [data-scene=people-signature] .ts-card-value{
    margin:5px 0 4px!important;
  }
  body.page.page-home #situationen [data-scene=people-signature][data-state=unified] .ts-card:nth-child(2){
    opacity:.72!important;
    filter:saturate(.90)!important;
  }
  body.page.page-home #situationen [data-scene=people-signature][data-state=unified] .ts-card:nth-child(2) .ts-card-label,
  body.page.page-home #situationen [data-scene=people-signature][data-state=unified] .ts-card:nth-child(2) .ts-card-detail{
    color:rgba(207,224,212,.82)!important;
  }

  /* Status / Excel scene: bring the separate renderer onto the same type scale. */
  body.page.page-home #situationen .rs-island{
    width:205px!important;
    padding:14px 16px!important;
  }
  body.page.page-home #situationen .rs-island>strong{
    margin:5px 0!important;
    font-family:Archivo,Arial,sans-serif!important;
    font-size:18px!important;
    line-height:1.18!important;
    font-weight:580!important;
    color:#edf3ea!important;
  }
  body.page.page-home #situationen .rs-order header>strong{
    font-size:28px!important;
    line-height:1.05!important;
  }
  body.page.page-home #situationen .rs-order-state{
    font-size:13px!important;
    line-height:1.4!important;
  }
  body.page.page-home #situationen .rs-order-facts>div,
  body.page.page-home #situationen .rs-order small{
    font-size:11.5px!important;
    line-height:1.42!important;
  }
  body.page.page-home #situationen .rs-endpoints{
    font-family:Archivo,Arial,sans-serif!important;
    font-size:12.5px!important;
    line-height:1.4!important;
    color:rgba(222,234,224,.82)!important;
  }

  /* Control rail microcopy: no debug-size labels. */
  body.page.page-home #situationen .tf-controls .rf-twin-metrics strong{
    font-size:14px!important;
    line-height:1.3!important;
  }
  body.page.page-home #situationen .tf-controls .twin-intervention__action{
    font-size:14px!important;
    line-height:1.35!important;
  }
  body.page.page-home #situationen .tf-controls .twin-intervention__feedback{
    font-size:11.5px!important;
    line-height:1.42!important;
  }
  body.page.page-home #situationen .rf-twin-model .rs-note{
    font-size:9.2px!important;
    line-height:1.35!important;
    letter-spacing:.05em!important;
    color:rgba(190,209,195,.55)!important;
  }

  /* Scenario selector remains secondary but no longer falls into microtype. */
  body.page.page-home #situationen [data-home-twin-engine] .operating-twin__scenario>span:first-of-type{
    font-size:9.5px!important;
    line-height:1.2!important;
  }
  body.page.page-home #situationen [data-home-twin-engine] .operating-twin__scenario>strong{
    font-size:13px!important;
    line-height:1.35!important;
    font-weight:600!important;
  }

  @media(max-width:700px){
    body.page.page-home #situationen .rf-twin-model{
      padding:16px 14px 15px!important;
    }
    body.page.page-home #situationen .rf-twin-model .rf-tool-head>.rf-tool-title{
      max-width:19ch!important;
      font-size:clamp(25px,7vw,31px)!important;
      line-height:1.035!important;
    }

    body.page.page-home #situationen .ts-tableau,
    body.page.page-home #situationen [data-scene=growth-signature] .ts-tableau,
    body.page.page-home #situationen [data-scene=people-signature] .ts-tableau{
      gap:7px!important;
    }
    body.page.page-home #situationen .ts-card,
    body.page.page-home #situationen [data-scene=growth-signature] .ts-card{
      min-height:86px!important;
      padding:10px!important;
    }
    body.page.page-home #situationen .ts-card-label{
      font-size:9.2px!important;
      line-height:1.28!important;
      letter-spacing:.035em!important;
    }
    body.page.page-home #situationen .ts-card-value{
      margin:4px 0 0!important;
      font-size:14.4px!important;
      line-height:1.16!important;
    }
    body.page.page-home #situationen .ts-card-detail{display:none!important}
    body.page.page-home #situationen [data-scene=data-signature] .ts-card-value{
      font-size:22.5px!important;
    }

    body.page.page-home #situationen [data-scene=people-signature] .ts-card{
      min-height:96px!important;
      padding:10px 28px 10px 10px!important;
    }
    body.page.page-home #situationen [data-scene=people-signature] .ts-card::before{
      display:block!important;
      top:12px!important;
      right:10px!important;
      left:auto!important;
      width:8px!important;
      height:8px!important;
      border-width:1.4px!important;
      opacity:.78!important;
    }
    body.page.page-home #situationen [data-scene=people-signature] .ts-card-value{
      font-size:14px!important;
      line-height:1.13!important;
    }

    body.page.page-home #situationen .ts-route-labels{
      top:189px!important;
      font-size:10.4px!important;
      line-height:1.28!important;
      gap:8px!important;
      color:rgba(226,236,228,.84)!important;
    }
    body.page.page-home #situationen .ts-before-ghost__label{
      font-size:8.4px!important;
      letter-spacing:.045em!important;
    }
    body.page.page-home #situationen .ts-erp-lead text,
    body.page.page-home #situationen .ts-data-hub text:last-of-type,
    body.page.page-home #situationen .ts-data-decision text{
      font-size:8.8px!important;
      letter-spacing:.04em!important;
    }

    body.page.page-home #situationen .rs-island{
      width:104px!important;
      padding:8px 9px!important;
    }
    body.page.page-home #situationen .rs-island>span,
    body.page.page-home #situationen .rs-order header>span{
      font-size:8.8px!important;
      line-height:1.25!important;
      letter-spacing:.035em!important;
    }
    body.page.page-home #situationen .rs-island>strong{
      font-size:13px!important;
      line-height:1.12!important;
      margin:3px 0 0!important;
    }
    body.page.page-home #situationen .rs-order{
      width:min(228px,80%)!important;
      padding:11px 12px!important;
    }
    body.page.page-home #situationen .rs-order header>strong{font-size:22px!important}
    body.page.page-home #situationen .rs-order-state{font-size:11px!important}
    body.page.page-home #situationen .rs-order-facts>div,
    body.page.page-home #situationen .rs-order small{font-size:9.8px!important}
    body.page.page-home #situationen .rs-endpoints{
      font-size:10.4px!important;
      line-height:1.3!important;
    }

    body.page.page-home #situationen .tf-controls .rf-twin-metrics span,
    body.page.page-home #situationen .tf-controls .twin-intervention__label{
      font-size:8.8px!important;
      line-height:1.25!important;
      letter-spacing:.04em!important;
    }
    body.page.page-home #situationen .tf-controls .rf-twin-metrics strong,
    body.page.page-home #situationen .tf-controls .twin-intervention__action{
      font-size:12px!important;
      line-height:1.28!important;
    }
    body.page.page-home #situationen .tf-controls .twin-intervention__feedback{
      font-size:10.2px!important;
      line-height:1.35!important;
    }
    body.page.page-home #situationen .rf-twin-model .rs-caption{
      font-size:11.2px!important;
      line-height:1.4!important;
    }

    body.page.page-home #situationen [data-home-twin-engine] .operating-twin__scenario>span:first-of-type,
    body.page.page-home #situationen [data-home-twin-engine] .m7h-twin__scenarios button>span:first-of-type{
      font-size:9px!important;
    }
    body.page.page-home #situationen [data-home-twin-engine] .operating-twin__scenario>strong,
    body.page.page-home #situationen [data-home-twin-engine] .m7h-twin__scenarios button>strong{
      font-size:12px!important;
      line-height:1.3!important;
    }
  }
}

/* v7251 final QA fix · prevent arbitrary word fragmentation and protect mobile readable width */
@layer twin-typography-v7251 {
  body.page.page-home #situationen :is(.ts-card-label,.ts-card-value,.ts-card-detail){
    overflow-wrap:normal!important;
    word-break:normal!important;
    -webkit-hyphens:none!important;
    hyphens:none!important;
  }

  @media(max-width:700px){
    body.page.page-home #situationen [data-scene="people-signature"] .ts-card{
      padding:10px!important;
    }
    body.page.page-home #situationen [data-scene="people-signature"] .ts-card::before{
      display:none!important;
      content:none!important;
    }
    body.page.page-home #situationen [data-scene="people-signature"] .ts-card-label{
      font-size:8.9px!important;
      line-height:1.28!important;
      letter-spacing:.035em!important;
    }
    body.page.page-home #situationen [data-scene="people-signature"] .ts-card-value{
      font-size:14px!important;
      line-height:1.12!important;
    }

    body.page.page-home #situationen .operating-twin__finding{
      display:grid!important;
      grid-template-columns:1fr!important;
      gap:0!important;
    }
    body.page.page-home #situationen .operating-twin__finding-item{
      min-height:0!important;
      padding:13px 12px!important;
      border-right:0!important;
      border-bottom:1px solid rgba(220,233,224,.07)!important;
    }
    body.page.page-home #situationen .operating-twin__finding-item:last-child{
      border-bottom:0!important;
    }
    body.page.page-home #situationen .operating-twin__finding-item .mono{
      font-size:8.8px!important;
      line-height:1.3!important;
      letter-spacing:.055em!important;
    }
    body.page.page-home #situationen .operating-twin__finding-item .finding{
      font-size:15px!important;
      line-height:1.26!important;
      overflow-wrap:normal!important;
      word-break:normal!important;
    }
    body.page.page-home #situationen .operating-twin__finding-item :is(.effect,.decision){
      font-size:11.5px!important;
      line-height:1.42!important;
      overflow-wrap:normal!important;
      word-break:normal!important;
    }
  }
}