/* horaios product pages on software.horaios.de – stage marking (Prod, Test, Dev, …).
   Rules: TechDocs „Product pages on software.horaios.de“.
   A page names its stage once: <body data-stage="Prod"> – and in its chips: <span class="stage-chip">Prod</span>.
   Every stage other than Prod is marked everywhere on the page: red chips, a red-and-white striped bar on top (like a German Baustelle barrier)
   and the stage name as a faint watermark. The chip after the product name is hidden on Prod. */

.stage-chip{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:var(--f-mono);font-size:.75rem;font-weight:600;letter-spacing:.06em;line-height:1.4;padding:3px 10px;border-radius:4px;color:var(--carbon);background:var(--carbon-soft)}
.stage-line{margin:0 0 14px}
.brand .stage-chip{margin-left:10px}
.btn + .stage-chip{margin-left:12px}

body[data-stage="Prod"] .brand .stage-chip{display:none}

body:not([data-stage="Prod"]) .stage-chip{color:#ffffff;background:#d6001c}
body:not([data-stage="Prod"])::before{content:"";position:fixed;top:0;left:0;right:0;height:8px;z-index:1000;pointer-events:none;
  background:repeating-linear-gradient(-45deg,#d6001c 0 14px,#ffffff 14px 28px);box-shadow:0 1px 0 #d6001c}
body:not([data-stage="Prod"])::after{content:attr(data-stage);position:fixed;top:50%;left:50%;z-index:999;pointer-events:none;
  transform:translate(-50%,-50%) rotate(-28deg);white-space:nowrap;
  font-family:var(--f-display);font-weight:800;font-size:min(30vw,22rem);letter-spacing:.04em;text-transform:uppercase;
  color:rgba(214,0,28,.07)}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body:not([data-stage="Prod"]) .stage-chip{color:#ffffff;background:#c4001a}
  :root:not([data-theme="light"]) body:not([data-stage="Prod"])::after{color:rgba(255,90,100,.09)}
}
@media print{ body:not([data-stage="Prod"])::after{color:rgba(0,0,0,.08)} }
@media (max-width:560px){ .brand .stage-chip{margin-left:6px;padding:2px 6px;font-size:.625rem;letter-spacing:.03em} }
@media (max-width:380px){ .brand .stage-chip{margin-left:4px;padding:2px 4px} }