/* ============================================================
   Schaller Engineering UG – Stylesheet
   Palette direkt aus dem Firmenlogo abgeleitet:
   Graphit (#6C6C6C), Signalorange (#FF9400), Petrol (#469BAA).
   Orange steht auf der ganzen Seite für Spezifikation,
   Petrol für Verifikation – die beiden Schenkel des V.
   ============================================================ */
:root{
  --ink:        #171C20;
  --ink-2:      #232B31;
  --steel:      #6C6C6C;
  --paper:      #ECEEEF;
  --paper-pure: #FFFFFF;
  --slate:      #56626A;
  --rule:       #C9CFD3;

  --orange:     #FF9400;   /* Grafik */
  --orange-ink: #B05F00;   /* Text auf hell */
  --teal:       #469BAA;   /* Grafik */
  --teal-ink:   #2C6D7B;   /* Text auf hell */

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1160px;
  --gut: clamp(20px, 5vw, 56px);
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  /* Kurze Seiten (Kontakt) haben keinen Scrollbalken, lange schon.
     Ohne reservierte Rinne verschiebt sich der zentrierte Inhalt
     beim Seitenwechsel um die Balkenbreite. */
  scrollbar-gutter:stable;
}
/* Ältere Safari-Versionen kennen scrollbar-gutter nicht;
   dort wird der Balken dauerhaft eingeblendet. */
@supports not (scrollbar-gutter: stable){ html{overflow-y:scroll} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:1.0625rem; line-height:1.65;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.eyebrow{
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate); margin:0 0 1.1rem;
}
.eyebrow--acc{color:var(--orange-ink)}
h1,h2,h3{font-family:var(--f-display); font-stretch:112%; line-height:1.06; margin:0; letter-spacing:-.015em}
h1{font-weight:700; font-size:clamp(2.2rem,5.3vw,4rem)}
h2{font-weight:700; font-size:clamp(1.7rem,3.3vw,2.55rem)}
h3{font-weight:600; font-size:1.2rem; letter-spacing:-.005em; line-height:1.28}
p{margin:0 0 1.05em}
.lede{font-size:clamp(1.08rem,1.65vw,1.29rem); line-height:1.56; color:#2B353C}
.muted{color:var(--slate)}

/* ---------- Kopfzeile ---------- */
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--gut); top:.5rem; z-index:99; background:#fff; padding:.6rem 1rem}
.top{
  position:sticky; top:0; z-index:60;
  background:rgba(23,28,32,.95); backdrop-filter:saturate(1.4) blur(9px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.top__in{display:flex; align-items:center; gap:1.4rem; height:70px}
.mark{display:flex; align-items:center; gap:.72rem; text-decoration:none; color:#fff; margin-right:auto}
.mark img{height:32px; width:auto; display:block}
.mark__txt{display:flex; flex-direction:column; line-height:1}
.mark__v{font-family:var(--f-display); font-weight:800; font-stretch:125%; font-size:.95rem; letter-spacing:.03em}
.mark__t{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.19em; color:#8E9AA2; text-transform:uppercase; margin-top:.28rem}
.nav{display:flex; gap:1.8rem}
.nav a{
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.09em; text-transform:uppercase;
  color:#B6C0C6; text-decoration:none; padding:.35rem 0; border-bottom:1px solid transparent;
}
.nav a:hover{color:#fff; border-bottom-color:var(--orange)}
.nav a[aria-current="page"]{color:#fff; border-bottom-color:var(--orange)}
.burger{display:none; background:none; border:1px solid rgba(255,255,255,.28); color:#fff;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; padding:.42rem .7rem; cursor:pointer}

/* ---------- Dunkle Bühnen ---------- */
.stage{background:var(--ink); color:#F1F4F6; position:relative; overflow:hidden}
.stage::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:34px 34px; mask-image:radial-gradient(115% 78% at 80% 10%,#000 0%,transparent 72%);
}
.stage > *{position:relative}
.stage h1,.stage h2{color:#fff}
.stage .lede{color:#AEBAC2}
.stage .eyebrow{color:#8895A0}
.hero{padding:clamp(3.4rem,8.5vw,6.4rem) 0 clamp(2.8rem,6vw,4.6rem)}
.hero h1{max-width:17ch}
.hero h1 em{font-style:normal; box-shadow:inset 0 -.11em 0 var(--orange)}
.hero .lede{max-width:56ch; margin-top:1.5rem}
.phero{padding:clamp(2.6rem,6vw,4.2rem) 0 clamp(2.4rem,5vw,3.6rem)}
.phero h1{font-size:clamp(1.9rem,4.2vw,3rem); max-width:20ch}
.phero .lede{max-width:60ch; margin-top:1.2rem}

.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem}
.btn{
  display:inline-block; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none; padding:.92rem 1.5rem; border:1px solid;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid{background:var(--orange); border-color:var(--orange); color:#1A1204; font-weight:500}
.btn--solid:hover{background:#E07F00; border-color:#E07F00}
.btn--ghost{border-color:rgba(255,255,255,.34); color:#E5EBEF}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
.btn--dark{border-color:var(--ink); color:var(--ink)}
.btn--dark:hover{background:var(--ink); color:#fff}

.facts{display:flex; flex-wrap:wrap; margin-top:clamp(2.4rem,5.5vw,3.8rem); border-top:1px solid rgba(255,255,255,.14)}
.fact{flex:1 1 190px; padding:1.3rem 1.4rem 0 0}
.fact b{display:block; font-family:var(--f-display); font-stretch:112%; font-weight:700; font-size:1.5rem; color:#fff; line-height:1.1}
.fact span{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#8895A0}

/* ---------- Abschnitte ---------- */
section{padding:clamp(3.4rem,7.5vw,6rem) 0}
section.stage{padding:clamp(3.4rem,7.5vw,5.4rem) 0}
.sec-head{margin-bottom:clamp(2.1rem,4.6vw,3.2rem)}
.sec-head p{color:var(--slate); margin-top:1rem; margin-bottom:0}
.stage .sec-head p{color:#AEBAC2}
.band{background:var(--paper-pure); border-block:1px solid var(--rule)}

/* ---------- V-Modell ---------- */
.vsvg{width:100%; height:auto; display:block}
.vsvg text{font-family:var(--f-mono)}
.v-branch{fill:none; stroke-width:2.4; stroke-dasharray:1200; stroke-dashoffset:1200}
.vsvg.drawn .v-branch{transition:stroke-dashoffset 1.5s cubic-bezier(.5,0,.2,1); stroke-dashoffset:0}
.v-branch--spec{stroke:var(--orange)}
.v-branch--veri{stroke:var(--teal)}
.v-trace{stroke:var(--rule); stroke-width:1; stroke-dasharray:3 5; opacity:0}
.vsvg.drawn .v-trace{opacity:1; transition:opacity .5s ease .9s}
.v-node{cursor:pointer}
.v-node circle{fill:var(--paper-pure); stroke-width:2; transition:r .16s ease, fill .16s ease}
.v-node--spec circle{stroke:var(--orange)}
.v-node--veri circle{stroke:var(--teal)}
.v-node text{font-size:14px; fill:#2B353C; transition:fill .16s ease}
.v-node .v-sub{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; fill:var(--slate)}
.v-node:hover circle,.v-node.on circle{r:9.5}
.v-node--spec:hover circle,.v-node--spec.on circle{fill:var(--orange)}
.v-node--veri:hover circle,.v-node--veri.on circle{fill:var(--teal)}
.v-node:hover text,.v-node.on text{fill:var(--ink)}
.v-axis{font-size:11px; letter-spacing:.16em; text-transform:uppercase}
.v-out{margin-top:1.6rem; border-top:2px solid var(--ink); padding-top:1.1rem;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  column-gap:var(--satz); align-items:start; min-height:5.4rem}
.v-out__k{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--orange-ink); padding-top:.34rem}
.v-out__b h3{margin-bottom:.35rem}
.v-out__b p{color:var(--slate); margin:0}
.vlist{display:none}
.vlist__row{border-top:1px solid var(--rule); padding:1.05rem 0}
.vlist__row:last-child{border-bottom:1px solid var(--rule)}
.vlist__pair{display:flex; gap:.6rem; align-items:center}
.vlist__link{flex:1 1 1.5rem; min-width:1.2rem; height:1px; background-image:linear-gradient(90deg,var(--rule) 0 3px,transparent 3px 8px); background-size:8px 1px; background-repeat:repeat-x}
.vlist__l,.vlist__r{font-family:var(--f-mono); font-size:.78rem; flex:0 1 auto}
.vlist__l{color:var(--orange-ink)} .vlist__r{color:var(--teal-ink)}
.vlist p{margin:.4rem 0 0; color:var(--slate); font-size:.97rem}

/* ---------- Raster ---------- */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.card{background:var(--paper); padding:1.9rem 1.55rem 2rem; display:flex; flex-direction:column}
.band .card{background:var(--paper-pure)}
.card__n{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.13em; color:var(--orange-ink); display:block; margin-bottom:1.5rem}
.card h3{margin-bottom:.65rem}
.card p{color:var(--slate); font-size:.98rem; margin:0}
.card__link{margin-top:auto; padding-top:1.2rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--orange); align-self:flex-start; padding-bottom:.15rem}
.card__link:hover{color:var(--orange-ink)}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2.4rem)}
.std{border-top:2px solid var(--ink); padding-top:1.2rem}
.std__id{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.11em; color:var(--slate); display:block; margin-bottom:.55rem}
.std h3{margin-bottom:.6rem}
.std p{color:var(--slate); font-size:.98rem; margin-bottom:.9rem}
.std ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.std li{font-family:var(--f-mono); font-size:.76rem; color:#3B474F; padding:.5rem 0; border-bottom:1px solid var(--rule)}

/* ---------- Leistungsblöcke (Unterseite) ---------- */
.svc{display:grid; grid-template-columns:auto 1fr .85fr; gap:clamp(1.4rem,4vw,3.2rem);
  border-top:2px solid var(--ink); padding:2rem 0 2.6rem; align-items:start}
.svc__k{font-family:var(--f-mono); font-size:1.4rem; color:var(--orange); line-height:1; padding-top:.2rem}
.svc h2{font-size:clamp(1.4rem,2.5vw,1.95rem); margin-bottom:.9rem}
.svc__body p{color:#33404A}
.svc__side{border-left:1px solid var(--rule); padding-left:clamp(1rem,2.5vw,1.8rem)}
.svc__side h3{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--slate); font-weight:500; margin-bottom:.9rem}
.svc__side ul{list-style:none; margin:0; padding:0}
.svc__side li{font-size:.95rem; padding:.45rem 0 .45rem 1.1rem; position:relative; color:#33404A; border-bottom:1px solid var(--rule)}
.svc__side li::before{content:"›"; position:absolute; left:0; color:var(--teal-ink)}

/* ---------- Werkzeuge ---------- */
.tools{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16)}
.tool{background:var(--ink); padding:1.7rem 1.4rem}
.tool b{display:block; font-family:var(--f-display); font-stretch:112%; font-weight:700; font-size:1.22rem; color:#fff; margin-bottom:.5rem}
.tool span{color:#AEBAC2; font-size:.95rem}

/* ---------- Referenzen ---------- */
.refs{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule)}
.ref{padding:1.4rem 1.4rem 1.4rem 0; border-bottom:1px solid var(--rule); min-width:0}
.ref b{display:block; font-family:var(--f-display); font-stretch:112%; font-weight:700;
  font-size:1.16rem; line-height:1.2; padding-left:1.2rem; border-left:3px solid var(--teal);
  text-wrap:balance; overflow-wrap:break-word}
.ref span{display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--slate); padding-left:1.2rem; margin-top:.3rem}

/* ---------- Split / Listen ---------- */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,6vw,5rem); align-items:start}
.quote{font-size:clamp(1.22rem,2.2vw,1.6rem); line-height:1.4; font-weight:600;
  border-left:3px solid var(--orange); padding-left:1.4rem; margin:0 0 1.6rem}
.deflist{border-top:1px solid var(--rule); margin:0}
.deflist__row{display:grid; grid-template-columns:9.5rem 1fr; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--rule)}
.deflist dt{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); padding-top:.22rem}
.deflist dd{margin:0}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,5rem); align-items:end}
.contact-lines{margin:0; border-top:1px solid rgba(255,255,255,.16)}
.cl{display:grid; grid-template-columns:7.5rem 1fr; gap:1rem; padding:.95rem 0; border-bottom:1px solid rgba(255,255,255,.16)}
.cl dt{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#8895A0; padding-top:.25rem}
.cl dd{margin:0; color:#F1F4F6}
.cl a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}
.cl a:hover{border-bottom-color:var(--orange)}

/* ---------- Recht ---------- */
.legal{max-width:78ch; font-size:.96rem; color:#323E48}
.legal h2{font-size:clamp(1.35rem,2.3vw,1.8rem); margin-top:2.6rem}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1rem; margin:1.8rem 0 .5rem}
.legal address{font-style:normal; font-family:var(--f-mono); font-size:.88rem; line-height:1.9; margin-bottom:1.4rem}
.todo{border:1px dashed var(--orange-ink); background:rgba(255,148,0,.08);
  padding:1rem 1.1rem; font-family:var(--f-mono); font-size:.78rem; line-height:1.62; color:#7B4200; margin:1.2rem 0 1.8rem}

/* ---------- Fußzeile ---------- */
.foot{background:var(--ink); color:#7E8A93; padding:2.6rem 0 2.2rem; border-top:1px solid rgba(255,255,255,.1)}
.foot__in{display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; align-items:flex-start}
.foot img{height:34px; width:auto; opacity:.9}
.foot__nav{display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em}
.foot a{color:#B6C0C6; text-decoration:none}
.foot a:hover{color:#fff}
.foot__r{margin-left:auto; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-align:right}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .grid-4,.tools{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr; gap:2rem}
  .split,.contact-grid{grid-template-columns:1fr}
  .svc{grid-template-columns:auto 1fr}
  .svc__side{grid-column:1/-1; border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:1rem}
}
@media (max-width:820px){
  .nav{display:none; position:absolute; top:70px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--ink); border-bottom:1px solid rgba(255,255,255,.14); padding:.5rem var(--gut) 1.1rem}
  .nav.open{display:flex}
  .nav a{padding:.8rem 0; border-bottom:1px solid rgba(255,255,255,.09)}
  .burger{display:block}
  .vsvg{display:none}
  .vlist{display:block}
  .v-out{display:none}
  .deflist__row,.cl{grid-template-columns:1fr; gap:.15rem}
  .foot__r{margin-left:0; text-align:left; width:100%}
}
@media (max-width:560px){
  .grid-4,.tools{grid-template-columns:1fr}
  .fact{flex:1 1 100%}
  .svc{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001ms !important; animation-duration:.001ms !important}
  .v-branch{stroke-dashoffset:0}
  .v-trace{opacity:1}
}

/* ============================================================
   Randnotiz – bewusst am Rand, nicht im Hauptstrang.
   Petrol statt Orange, damit sie sich als Nebenbemerkung
   von den Hauptaussagen absetzt.
   ============================================================ */
.aside{border-left:2px solid var(--teal); padding:.1rem 0 .1rem 1.35rem; margin-top:clamp(2.4rem,5vw,3.4rem)}
.aside__k{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-ink); margin:0}
.aside h3{font-size:1.05rem; margin:.55rem 0 0}
.aside p{font-size:.97rem; color:var(--slate); margin:.5rem 0 0}
.stage .aside p{color:#AEBAC2}
.stage .aside h3{color:#fff}

/* ============================================================
   Impact-Analyse – Traceability-Graph auf einer gekippten
   Ebene. Betroffene Arbeitsergebnisse heben sich beim Klick
   real aus der Fläche (CSS-3D, translateZ), statt nur die
   Farbe zu wechseln.
   ============================================================ */
.tg{margin-top:.5rem}

.tg__bar{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.6rem; margin-bottom:1.2rem}
.tg__hint{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin:0}
.tg__pulse{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--orange); margin-right:.55rem; animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.9); opacity:.35}}
.tg__legend{display:flex; flex-wrap:wrap; gap:.5rem}
.tg__lg{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; padding:.25rem .5rem; border:1px solid}
.tg__lg--d{color:var(--orange-ink); border-color:var(--orange)}
.tg__lg--qm{color:var(--slate); border-color:var(--rule)}
.tg__lg--cov{color:var(--teal-ink); border-color:var(--teal)}
.tg__reset{margin-left:auto; padding:.5rem 1rem}

/* ---------- Bühne ---------- */
.tg__scroll{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; margin-inline:calc(var(--gut)*-1); padding-inline:var(--gut)}
.tg__persp{perspective:1600px; perspective-origin:50% 38%; width:940px; padding:14px 0 30px}
.tg__board{position:relative; width:940px; height:530px; transform-style:preserve-3d; transform:rotateX(9deg)}

.tg__edges{position:absolute; inset:0; width:940px; height:530px; overflow:visible; pointer-events:none}
.tg__edge{fill:none; stroke:var(--rule); stroke-width:1.2}
.tg__flow{fill:none; stroke:var(--orange); stroke-width:2.2; opacity:0}
.tg__flow.lit{opacity:1; transition:stroke-dashoffset .42s cubic-bezier(.4,0,.3,1), opacity .12s}
.tg__flow.qm.lit{stroke:var(--slate)}

.tg__col{position:absolute; top:0; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--slate); line-height:1.5}
.tg__col b{display:block; color:var(--ink); font-weight:500; letter-spacing:.13em}

/* ---------- Knoten ---------- */
.tg__node{
  position:absolute; width:176px; height:68px; padding:9px 11px;
  display:flex; flex-direction:column; gap:5px;
  background:var(--paper-pure); border:1px solid var(--rule); border-radius:2px;
  box-shadow:0 1px 2px rgba(23,28,32,.07);
  transform:translateZ(0);
  transition:transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .45s ease,
             background .3s ease, border-color .3s ease;
}
.tg__node[tabindex]{cursor:pointer}
.tg__node[tabindex]:hover{transform:translateZ(12px); border-color:var(--ink)}
.tg__node--test{border-left:3px solid var(--teal)}

.tg__top{display:flex; align-items:center; justify-content:space-between; gap:.4rem}
.tg__id{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.06em; color:var(--slate)}
.tg__lbl{font-family:var(--f-display); font-stretch:108%; font-weight:600; font-size:.8rem;
  line-height:1.16; color:var(--ink); overflow-wrap:anywhere; hyphens:auto}
.tg__tag{font-family:var(--f-mono); font-size:.54rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.13rem .34rem; border:1px solid; white-space:nowrap; flex:0 0 auto}
.tg__tag--d{color:var(--orange-ink); border-color:var(--orange); background:rgba(255,148,0,.1)}
.tg__tag--inh{color:var(--orange-ink); border-color:rgba(255,148,0,.45)}
.tg__tag--qm{color:var(--slate); border-color:var(--rule)}
.tg__tag--cov{color:var(--teal-ink); border-color:var(--teal)}

.tg__node.hit{background:#FFF6E9; border-color:var(--orange); box-shadow:0 20px 30px -14px rgba(23,28,32,.5);
  transform:translateZ(40px)}
.tg__node.hit.qm{background:var(--paper); border-color:var(--slate); box-shadow:0 14px 22px -12px rgba(23,28,32,.4);
  transform:translateZ(24px)}
.tg__node.src{background:var(--ink); border-color:var(--ink); box-shadow:0 30px 44px -16px rgba(23,28,32,.6);
  transform:translateZ(72px)}
.tg__node.src .tg__lbl{color:#fff}
.tg__node.src .tg__id{color:#8895A0}
.tg__node.src .tg__tag{color:#fff; border-color:rgba(255,255,255,.5)}
.tg__node.gap{border-color:var(--orange); box-shadow:0 20px 30px -14px rgba(176,95,0,.55), 0 0 0 2px rgba(255,148,0,.35)}

/* ---------- Auswertung ---------- */
.tg__report{margin-top:.4rem; border-top:2px solid var(--ink); padding-top:1.2rem}
.tg__metrics{display:flex; flex-wrap:wrap}
.tg__m{flex:1 1 160px; padding-right:1.4rem}
.tg__m b{display:block; font-family:var(--f-display); font-stretch:112%; font-weight:700;
  font-size:1.9rem; line-height:1; color:var(--ink); transition:color .3s ease}
.tg__m.on b{color:var(--orange-ink)}
.tg__m.qm b{color:var(--slate)}
.tg__m span{display:block; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--slate); margin-top:.4rem}
.tg__verdict{margin:1.4rem 0 0; color:#33404A; min-height:10rem}
.tg__verdict strong{color:var(--orange-ink)}
.tg__verdict em{font-style:normal; font-family:var(--f-mono); font-size:.9em}

@media (max-width:900px){
  .tg__reset{margin-left:0}
  .tg__persp{perspective:2200px}
}
@media (prefers-reduced-motion:reduce){
  .tg__pulse{animation:none}
  .tg__board{transform:none}
  .tg__node,.tg__node[tabindex]:hover,.tg__node.hit,.tg__node.src{transform:none !important}
  .tg__node.hit{outline:2px solid var(--orange)}
  .tg__node.src{outline:3px solid var(--ink)}
}

/* ============================================================
   Textlauf in schmalen Spalten
   Überschriften werden auf gleich lange Zeilen ausbalanciert
   statt mit einem Einzelwort auf der letzten Zeile zu enden.
   Fließtext bekommt Silbentrennung – deutsche Komposita sind
   in 170 px breiten Spalten sonst nicht sauber umbrechbar.
   ============================================================ */
h1,h2,.quote{text-wrap:balance}
h3,.fact b,.tool b,.std h3,.svc h2{text-wrap:balance; overflow-wrap:break-word}
.lede,.sec-head p{text-wrap:pretty}

.card,.std,.tool,.svc__side,.ref,.itally__i,.tg__m{min-width:0}
.card h3,.std h3,.tool b{hyphens:auto}
.card p,.std p,.tool span,.svc__side li,.ref span{
  hyphens:auto; overflow-wrap:break-word; text-wrap:pretty;
}
.card p,.std p{-webkit-hyphens:auto}

/* Aufzählungen in den Normkacheln: lange Einträge sollen
   umbrechen, aber eingerückt bleiben. */
.std li{overflow-wrap:break-word; hyphens:auto; padding-left:0}

@media (max-width:1000px){ .refs{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){  .refs{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){  .refs{grid-template-columns:1fr} }

/* ============================================================
   Satzspiegel
   Textblöcke laufen jetzt über die volle Spaltenbreite, damit
   ihre rechte Kante mit Rastern und Tabellen abschließt. Damit
   die Zeilen dabei nicht auf 120 Zeichen anwachsen, werden sie
   zweispaltig gesetzt: Überschrift links, Text rechts.
   --satz ist der gemeinsame Spaltenabstand aller Textblöcke.
   ============================================================ */
:root{
  --satz: clamp(1.6rem, 4vw, 3.2rem);      /* Spaltenabstand      */
  --sp1:  calc((100% - var(--satz)) / 2.08);        /* Überschrift */
  --sp2:  calc((100% - var(--satz)) / 2.08 * 1.08); /* Fließtext   */
}

.sec-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  column-gap:var(--satz); align-items:start;
}
.sec-head > .eyebrow{grid-column:1; grid-row:1}
.sec-head > h2{grid-column:1; grid-row:2}
.sec-head > p{grid-column:2; grid-row:2; margin-top:.35rem}
/* Abschnitte ohne Einleitungstext: Überschrift über beide Spalten */
.sec-head:not(:has(p)) > h2{grid-column:1 / -1}

/* Abschnitte, deren Grafik die volle Breite einnimmt: dort läuft
   auch der Einleitungstext durch, statt in der rechten Spalte
   zu stehen. */
.sec-head--wide{grid-template-columns:1fr}
.sec-head--wide > .eyebrow,
.sec-head--wide > h2,
.sec-head--wide > p{grid-column:1; grid-row:auto}
.sec-head--wide > p{margin-top:1rem}

.aside{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  column-gap:var(--satz); align-items:start;
}
.aside__hd{grid-column:1}
.aside__bd{grid-column:2}
.aside__bd p:last-child{margin-bottom:0}

/* Auswertung der Impact-Analyse: einspaltig über die volle
   Breite, damit sie mit der Grafik und der Zahlenreihe darüber
   auf beiden Seiten abschließt. */
.tg__verdict{margin-left:0; width:100%}

/* Schlussnotizen laufen über die volle Breite: sie beziehen sich
   auf den ganzen Block darüber, nicht nur auf dessen rechte Hälfte. */
.note-half{margin-top:2rem; width:100%}
/* Notiz in schmaler Spalte: nur Abstand, keine Breitenvorgabe. */
.note-top{margin-top:1.6rem}

@media (max-width:900px){
  .sec-head,.aside{grid-template-columns:1fr}
  .sec-head > .eyebrow,.sec-head > h2,.sec-head > p{grid-column:1}
  .sec-head > .eyebrow{grid-row:auto}
  .sec-head > h2{grid-row:auto}
  .sec-head > p{grid-row:auto; margin-top:1rem; max-width:62ch}
  .aside__hd,.aside__bd{grid-column:1}
  .aside__bd{margin-top:.6rem}
  .tg__verdict{margin-left:0; width:100%; max-width:62ch; min-height:0}
  .v-out{grid-template-columns:1fr; row-gap:.5rem}
}

/* ============================================================
   Fokus in den beiden Grafiken
   Beim Anklicken zeichneten Browser den voreingestellten
   Fokusrahmen um die Knotengruppe – bei SVG umschließt der die
   gesamte Beschriftung und wirkt wie ein schwarzer Kasten.
   Für die Maus entfällt er; die Auswahl ist ohnehin an der
   gefüllten Markierung erkennbar. Für die Tastatur bleibt ein
   Rahmen erhalten, nur in der Akzentfarbe statt schwarz.
   ============================================================ */
.v-node:focus,
.tg__node:focus{outline:none}
.v-node:focus-visible{outline:2px solid var(--orange); outline-offset:4px}
.tg__node:focus-visible{outline:2px solid var(--orange); outline-offset:3px}

/* ============================================================
   Glossar
   Auslöser sind Schaltflächen, sehen im Fließtext aber wie Text
   mit gepunkteter Unterstreichung aus. Innerhalb der Grafik
   behalten sie die Form des Kennzeichens.
   ============================================================ */
.gl{
  font:inherit; color:inherit; background:none; border:0; padding:0;
  border-bottom:1px dotted var(--teal); cursor:help; line-height:inherit;
}
.gl:hover{border-bottom-color:var(--ink); color:var(--teal-ink)}
.gl[aria-expanded="true"]{border-bottom-style:solid; border-bottom-color:var(--teal)}

/* Kennzeichen in der Impact-Analyse: sehen exakt aus wie die
   übrigen Kennzeichen. :where() hat keine Spezifität, deshalb
   überschreibt der Reset nur die Vorgaben des Browsers für
   Schaltflächen und niemals die Regeln aus .tg__tag. */
:where(.gl--chip){
  background:none; font-weight:inherit; line-height:inherit;
  -webkit-appearance:none; appearance:none;
}
.gl--chip{cursor:help}
.gl--chip:hover{box-shadow:inset 0 0 0 1px currentColor}

/* Anzeigefeld */
.gl-feld{
  position:fixed; z-index:200; width:min(27rem, calc(100vw - 2rem));
  max-height:min(30rem, calc(100vh - 3rem)); overflow-y:auto;
  background:var(--paper-pure); color:var(--ink);
  border:1px solid var(--rule); border-top:3px solid var(--teal);
  box-shadow:0 26px 50px -18px rgba(23,28,32,.5);
  padding:1.15rem 1.3rem 1.25rem;
}
.gl-feld[hidden]{display:none}
.gl-feld__zu{
  position:absolute; top:.5rem; right:.6rem; background:none; border:0;
  font-family:var(--f-mono); font-size:1.15rem; line-height:1; color:var(--slate);
  cursor:pointer; padding:.25rem .35rem;
}
.gl-feld__zu:hover{color:var(--ink)}
.gl-feld__titel{
  font-family:var(--f-display); font-stretch:112%; font-weight:700;
  font-size:1.15rem; margin:0; padding-right:1.5rem;
}
.gl-feld__unter{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--teal-ink); margin:.3rem 0 .9rem;
}
.gl-feld__unter[hidden]{display:none}
.gl-feld__text{font-size:.9rem; line-height:1.6}
.gl-feld__text p{margin:0 0 .8rem}
.gl-feld__text p:last-child{margin-bottom:0}
.gl-feld__text h4{
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--slate); font-weight:500;
  margin:1.1rem 0 .35rem; padding-top:.6rem; border-top:1px solid var(--rule);
}
.gl-feld__text code{
  font-family:var(--f-mono); font-size:.86em; background:var(--paper);
  border:1px solid var(--rule); padding:.06rem .3rem; white-space:nowrap;
}
.gl-feld__text sup{font-size:.72em; vertical-align:super; line-height:0}

@media (prefers-reduced-motion:reduce){ .gl-feld{box-shadow:0 0 0 1px var(--ink)} }