/* ============================================================
   Argus24: Scroll-Fahrt am Gerät (argus24.html, en/argus24.html)
   Grundzustand = Standbild mit Liste (ohne JS, ohne WebGL, reduzierte Bewegung).
   html.ag-on schaltet die Fahrt ein: hoher Abschnitt, Bühne klebt unter der Navigation.
   ============================================================ */
.ag-tour {
  --ag-nav: 68px;
  position: relative;
  background:
    radial-gradient(ellipse 70% 55% at 50% 58%, rgba(47, 103, 198, 0.10), transparent 70%),
    var(--ink-0);
  border-bottom: 1px solid var(--line);
}

/* ── Grundzustand: Standbild und Liste ───────────────────── */
.ag-stage { position: relative; padding: clamp(56px, 8vw, 112px) 0; }
.ag-canvas, .ag-lines, .ag-brand { display: none; }
.ag-poster {
  display: block;
  width: min(760px, 92%);
  height: auto;
  margin: 28px auto 8px;
}
.ag-intro h2 { max-width: 18ch; }
.ag-intro p { margin-top: 20px; max-width: 46ch; color: var(--text-2); }
.ag-intro .ag-cue { display: none; }
.ag-stations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px 48px;
  margin-top: 40px;
}
.ag-station h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 14px;
}
.ag-station ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ag-co { display: grid; gap: 3px; }
.ag-co b { font-weight: 600; font-size: 16px; color: var(--text-1); line-height: 1.3; }
.ag-co span {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

/* ── Fahrt ───────────────────────────────────────────────── */
html.ag-on .ag-tour { height: calc(var(--ag-steps, 6) * 115svh); }
html.ag-on .ag-stage {
  position: sticky;
  top: var(--ag-nav);
  height: calc(100svh - var(--ag-nav));
  padding: 0;
  overflow: hidden;
}
html.ag-on .ag-canvas,
html.ag-on .ag-lines {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
html.ag-on .ag-lines { pointer-events: none; overflow: visible; }
html.ag-on .ag-lines path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.25;
  stroke-linejoin: round;
  opacity: 0;
}
html.ag-on .ag-lines circle {
  fill: var(--ink-0);
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0;
}

/* Fahrt: kein Standbild (es säße an anderer Stelle und spränge), Szene blendet an Ort und Stelle ein */
html.ag-on .ag-poster { display: none; }
html.ag-on .ag-canvas { z-index: 1; opacity: 0; transition: opacity .9s cubic-bezier(0.16, 0.84, 0.32, 1); }
html.ag-on .ag-tour.is-ready .ag-canvas { opacity: 1; }
html.ag-on .ag-lines, html.ag-on .ag-intro, html.ag-on .ag-stations { position: relative; z-index: 2; }
html.ag-on .ag-lines { position: absolute; }

/* Großes „Argus24“ oben rechts, hinter der Box */
html.ag-on .ag-brand {
  display: block;
  position: absolute;
  z-index: 0;
  top: clamp(8px, 4vh, 48px);
  right: var(--gutter);
  margin: 0;
  font-size: clamp(110px, 19vw, 330px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--text-1);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
}

/* Eine gemeinsame Spalte unten rechts: alle Zeilen beginnen links auf derselben Kante */
html.ag-on .ag-intro {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: min(440px, 100%);
  justify-content: end;
  align-content: end;
  padding-bottom: clamp(32px, 8vh, 88px);
  pointer-events: none;
}
html.ag-on .ag-intro > * { margin-left: 0; margin-right: 0; }
html.ag-on .ag-intro h2 { font-size: clamp(26px, 2.4vw, 34px); }
html.ag-on .ag-intro p.lede { font-size: 17px; margin-top: 12px; }
html.ag-on .ag-intro .ag-cue {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  font-size: 14px;
  color: var(--text-3);
}
.ag-cue i {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(var(--accent), transparent);
  transform-origin: top;
  animation: ag-cue 2.4s cubic-bezier(0.16, 0.84, 0.32, 1) infinite;
}
@keyframes ag-cue { 0% { transform: scaleY(0); } 60%, 100% { transform: scaleY(1); opacity: 0; } }

html.ag-on .ag-stations { display: contents; }
html.ag-on .ag-station {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
}
html.ag-on .ag-station h3 {
  position: absolute;
  left: var(--gutter);
  top: clamp(24px, 6vh, 56px);
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-1);
  opacity: var(--k, 0);
  transform: translateY(calc((1 - var(--k, 0)) * 14px));
}
html.ag-on .ag-station ul { display: block; }
html.ag-on .ag-co {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  max-width: 340px;
  opacity: 0;
  will-change: transform, opacity;
}
html.ag-on .ag-co[data-side="l"] { text-align: right; }
html.ag-on .ag-co b { font-size: 17px; }
@media (min-width: 760px) { html.ag-on .ag-co span { white-space: nowrap; } }
html.ag-on .ag-co b, html.ag-on .ag-co span {
  transform: translateY(calc((1 - var(--t, 0)) * 6px));
}

/* ── Abschluss: Box links, Text rechts (ohne Fahrt: Block unter der Liste) ── */
.ag-outro { margin-top: clamp(56px, 8vw, 96px); }
.ag-outro .h1 { line-height: 1.02; letter-spacing: -0.025em; }
.ag-outro .lede { margin-top: 28px; max-width: 48ch; }
.ag-outro__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

html.ag-on .ag-outro {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0 auto;                                   /* .wrap zentriert sich wie die Einleitung */
  display: grid;
  grid-template-columns: min(560px, 46%);
  justify-content: end;
  align-content: center;
  pointer-events: none;
}
html.ag-on .ag-outro > * {
  margin-left: 0;
  margin-right: 0;
  opacity: var(--k, 0);
  transform: translateX(calc((1 - var(--k, 0)) * 32px));
}
html.ag-on .ag-outro > .lede { opacity: clamp(0, calc(var(--k, 0) * 1.4 - .4), 1); }
html.ag-on .ag-outro > .ag-outro__actions { opacity: clamp(0, calc(var(--k, 0) * 1.8 - .8), 1); }
html.ag-on .ag-outro .h1 { font-size: clamp(40px, 4.6vw, 72px); }
html.ag-on .ag-outro.is-on .ag-outro__actions { pointer-events: auto; }

@media (max-width: 759px) {
  html.ag-on .ag-brand { font-size: 22vw; right: 16px; top: 12px; }
  html.ag-on .ag-intro { grid-template-columns: 1fr; justify-content: stretch; padding-bottom: 8vh; }
  html.ag-on .ag-intro h2 { font-size: 26px; }
  html.ag-on .ag-station h3 { font-size: 26px; top: 20px; }
  html.ag-on .ag-co { max-width: calc(100vw - 80px); }
  html.ag-on .ag-co b { font-size: 15px; }
  /* Hochformat: Box oben, Text unten */
  html.ag-on .ag-outro { grid-template-columns: 1fr; justify-content: stretch; align-content: end; padding-bottom: 6vh; }
  html.ag-on .ag-outro .h1 { font-size: 34px; }
  html.ag-on .ag-outro .lede { font-size: 16px; margin-top: 16px; }
  html.ag-on .ag-outro__actions { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-cue i { animation: none; }
}

/* ============================================================
   „Ein Pentest ist eine Momentaufnahme“ (#ausgangslage, js/argus-snapshot.js)
   Grundzustand: Text, 364 und Wochenraster. html.sn-on: Bühne in Fensterhöhe, links Text, rechts die Szene, die einmal
   von selbst abspielt (Ben 09.11.2026, vorher klebende Scroll-Szene).
   ============================================================ */
.sn-scene { display: none; }
.sn-events { display: none; }
html.js-reveal .section .wrap > div.sn-tour { opacity: 1; transform: none; }   /* kein seitliches Einfliegen (Szene spielt selbst) */
html.sn-on .sn-stage {
  position: relative;
  height: calc(100svh - 68px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
html.sn-on #ausgangslage .section__head { display: block; margin: 0 0 24px; }
html.sn-on #ausgangslage .al-grid { display: block; margin: 0; }
html.sn-on #ausgangslage .al-weeks { display: none; }
html.sn-on .sn-scene { display: block; position: relative; }
.sn-svg { display: block; width: 100%; height: auto; max-height: calc(100svh - 140px); overflow: visible; }

/* Geräte-Marker */
.sn-scene { --sn-fixed: #46C35C; }                      /* Grün wie die Link-LED der Box: erfasst und behoben */
.sn-box { fill: var(--ink-1); stroke: #5d6470; stroke-width: 1.5; }
.sn-glyph { fill: #9aa0aa; }   /* eigene Icons (higgsfield), als Maske auf der Fläche: Farbe über fill */
.sn-box, .sn-glyph { transition: stroke .35s, fill .35s; }
.sn-node.is-diff .sn-box { stroke: var(--rust); }
.sn-node.is-diff .sn-glyph { fill: var(--rust); }
.sn-node.is-ok .sn-box { stroke: var(--accent); }
.sn-node.is-ok .sn-glyph { fill: var(--accent); }
.sn-node.is-fixed .sn-box { stroke: var(--sn-fixed); }
.sn-node.is-fixed .sn-glyph { fill: var(--sn-fixed); }
/* Büro-Szene (Ben 09.11.2026): Hinweislinie vom Sechseck zum Gerät, Punkt am Gerät, gleiche Zustandsfarben */
.sn-lead { stroke: #5d6470; stroke-width: 1.2; transition: stroke .35s; }
.sn-dot { fill: #5d6470; transition: fill .35s; }
.sn-node.is-diff .sn-lead { stroke: var(--rust); }
.sn-node.is-diff .sn-dot { fill: var(--rust); }
.sn-node.is-ok .sn-lead { stroke: var(--accent); }
.sn-node.is-ok .sn-dot { fill: var(--accent); }
.sn-node.is-fixed .sn-lead { stroke: var(--sn-fixed); }
.sn-node.is-fixed .sn-dot { fill: var(--sn-fixed); }
.sn-badge circle { fill: var(--rust); transition: fill .35s; }
.sn-badge path { fill: none; stroke: var(--ink-0); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sn-badge.is-fixed circle { fill: var(--sn-fixed); }
.sn-tag text { font-family: var(--f-mono); font-size: 12px; fill: var(--rust); transition: fill .35s; }
.sn-tag.is-fixed text { fill: var(--sn-fixed); }

/* Zähler, Live, Abtastlinie */
.sn-counter { font-family: var(--f-mono); font-size: 15px; fill: var(--text-2); font-variant-numeric: tabular-nums; }
.sn-live text { font-family: var(--f-mono); font-size: 14px; fill: var(--accent); }
.sn-live__dot { fill: var(--accent); animation: sn-pulse 1.6s ease-in-out infinite; }
@keyframes sn-pulse { 50% { opacity: .25; } }
.sn-scan__line { stroke: var(--accent); stroke-width: 2; }

/* Foto */
.sn-photo__shadow { fill: rgba(0, 0, 0, 0.45); }
.sn-photo__frame { fill: #e9eae4; }
.sn-photo__img { fill: #151a21; }
.sn-photo__net { opacity: .8; }
.sn-photo__stamp { font-family: var(--f-mono); font-size: 22px; fill: #3a3f47; }
.sn-flash { fill: #fff; opacity: 0; }

/* Hochformat: Szene oben, Text darunter */
@media (max-width: 899px) {
  html.sn-on .sn-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 12px;
    padding-top: 16px;
  }
  html.sn-on .sn-scene { order: -1; }
  .sn-svg { max-height: 40svh; }
  html.sn-on #ausgangslage .section__head { margin-bottom: 12px; }
  html.sn-on #ausgangslage .section__head h2 { font-size: 28px; }
  html.sn-on #ausgangslage .al-grid .lede { font-size: 16px; }
  /* Szene ist hier rund halb so groß wie ihr Raster: Schrift im Raster größer, damit sie lesbar bleibt */
  .sn-tag text { font-size: 14px; }   /* Büro-Szene: 14 statt 16, sonst stoßen die Etiketten in den dunklen Ecken an */
  .sn-counter, .sn-live text { font-size: 19px; }
}

/* ============================================================
   Gelbe Schräge: unten in „Momentaufnahme“ (#ausgangslage) ein gelbes Dreieck von rechts oben nach links unten,
   darunter „Argus24 prüft jeden Tag“ (#funktionen) und „Bewährte Werkzeuge“ (#werkzeuge) ganz gelb (Ben).
   Das Dreieck liegt immer IM eigenen Abschnitt (Safari schneidet Pseudo-Elemente ab, die über den oberen Rand
   eines .section mit overflow-x: clip ragen). Nur Prozentwerte im clip-path.
   --sl-drop = Höhe der Schräge ohne Szene, --sl-fill = gedämpftes Gelb (Ben: nicht so knallig). Keine Trennlinien.
   ============================================================ */
#ausgangslage, #funktionen, #werkzeuge { --sl-drop: clamp(190px, 31vw, 500px); --sl-fill: #C5C62E; }
/* Ohne Szene: Dreieck unten im Abschnitt, unter dem Wochenraster */
html:not(.sn-on) #ausgangslage { padding-bottom: calc(var(--sl-drop) + 60px); }
html:not(.sn-on) #ausgangslage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;                               /* 1 px Überlappung, damit keine Haarlinie bleibt */
  height: var(--sl-drop);
  background: var(--sl-fill);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
/* Mit Szene: das Dreieck gehört zur klebenden Bühne und steht die ganze Szene über an seinem Platz (Ben),
   unten schließt der gelbe Abschnitt nahtlos an */
html.sn-on #ausgangslage { padding-bottom: 0; }
html.sn-on .sn-stage::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  width: 100vw;
  bottom: -1px;
  height: 27%;
  background: var(--sl-fill);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
html.sn-on .sn-copy, html.sn-on .sn-scene { position: relative; z-index: 1; }
/* Desktop: Text und Netz mittig in der Bühne (unter der Leiste), das Netz überdeckt unten rechts teils das Dreieck */
@media (min-width: 900px) {
  html.sn-on .sn-stage { padding-bottom: 0; }   /* Text und Netz mittig in der ganzen Bühne, Netz darf ins Gelb ragen (Ben 09.11.2026) */
  html.sn-on .sn-svg { max-height: calc((100svh - 68px) * 0.8); }   /* Büro-Szene deutlich größer (Ben 09.11.2026), vorher 0,66 */
  html.sn-on .sn-stage { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }   /* vorher 0,9 / 1,1 */
  /* Szene darf rechts über den Inhaltsrand bis an den Seitenrand (Abstand wie der Gutter), solange das Fenster breiter ist als der Container */
  html.sn-on .sn-scene { margin-right: min(0px, calc((var(--container) - 100vw) / 2)); }
}
@media (max-width: 899px) { html.sn-on .sn-stage::before { height: 11%; } }
/* Schräge steiler (Ben 08.11.2026, zweimal je 20 %): rechts 40 % höher, links 40 % tiefer, Einheit H = ursprüngliche
   Höhe (27 % der Bühne bzw. --sl-drop). Die Kante läuft von 1,4 H über der Abschnittsgrenze (rechts) bis 0,4 H darunter
   (links), Gefälle 1,8 H. Das Stück unter der Grenze ist ein dunkler Keil oben in #funktionen, Breite 0,4 / 1,8 = 22,2222 %.
   Nur ab 900 px. js/argus-schraege.js rechnet mit denselben Faktoren (1,4 / 1,8 / 0,4). */
@media (min-width: 900px) {
  html.sn-on .sn-stage::before { height: 37.8%; clip-path: polygon(100% 0, 100% 100%, 22.2222% 100%); }
  html:not(.sn-on) #ausgangslage { padding-bottom: calc(var(--sl-drop) * 1.4 + 60px); }
  html:not(.sn-on) #ausgangslage::after { height: calc(var(--sl-drop) * 1.4); clip-path: polygon(100% 0, 100% 100%, 22.2222% 100%); }
}

/* „Argus24 prüft jeden Tag“ und „Bewährte Werkzeuge“ gelb, Texte dunkel; Karten bleiben Schiefer */
/* Gelb als Verlauf, nicht als background-color: eine reine Farbfläche legt Safari als eigene Farbschicht ab
   und zeigt sie ohne Farbmanagement satter (#BEBF00 statt #C5C62E, Ben 09.11.2026) */
#funktionen, #werkzeuge { border-top: 0; background: linear-gradient(var(--sl-fill), var(--sl-fill)); color: var(--ink-0); }
#werkzeuge > .wrap { position: relative; z-index: 1; }
#werkzeuge h2, #werkzeuge h2 .serif, #werkzeuge > .wrap > .muted { color: var(--ink-0); }
#werkzeuge > .wrap > .muted { opacity: .78; }
/* Schiefer-Block hinter Überschrift und Einleitung (Ben 09.11.2026, Vorbild: farbiges Band über die volle Breite),
   darin hell; darunter wieder Gelb mit den Karten */
#werkzeuge .wz-band {
  margin: 0 calc(50% - 50vw) 56px;
  padding: clamp(56px, 6vw, 96px) calc(50vw - 50%);
  background: var(--ink-1);   /* wie der Seitengrund (Ben 09.11.2026, vorher --ink-2) */
}
#werkzeuge .wz-band h2, #werkzeuge .wz-band h2 .serif { color: var(--text-1); }
#werkzeuge .wz-band > .muted { color: var(--text-2); opacity: 1; }
#funktionen > .wrap { position: relative; z-index: 1; }
#funktionen h2, #funktionen .serif, #funktionen .muted { color: var(--ink-0); }
#funktionen .muted { opacity: .78; }
#funktionen .home-argus__title { color: var(--ink-0); }
#funktionen .home-argus__steps ul li { color: rgba(11, 15, 20, .82); }
#funktionen .home-argus__steps ul li::before { background: var(--ink-0); }
#funktionen .home-argus__steps > li::before { background: linear-gradient(160deg, var(--ink-2), rgba(26, 32, 41, .35) 80%); }   /* Schiefer (Ben) */

/* ── Spitzen im Gelb, zurzeit AUS (Ben 08.11.2026: weg, aber vielleicht gleich wieder gebraucht).
   Einschalten: Klasse „has-spitzen“ an <section id="funktionen">. Bilder spitze-switch/-rack bleiben liegen.
   Bisher: eine von links neben der Überschrift und eine von rechts
   neben dem Einleitungstext, gefüllt mit einem Foto im Duotone der Startseiten-Diagonale (Schiefer lighten,
   Gelb multiply, Weiß screen). Sie liegen im eigenen Abschnitt (Safari) und hinter dem Inhalt.
   Höhen an Überschrift, Text und Schritte gemessen (1100 bis 1890 px); unter 900 px kein Platz, dort aus. */
#funktionen, #werkzeuge { --sp-pt: clamp(80px, 10vw, 160px); }
/* Abstand zwischen den beiden gelben Abschnitten kleiner (Ben: Spitze 2 und 3 zu weit auseinander) */
#funktionen { padding-bottom: clamp(48px, 5vw, 80px); }
#funktionen { padding-top: var(--sp-pt); }   /* wieder mit dem ursprünglichen Abstand unter der Schräge (Ben 08.11.2026) */
/* Der Abschnitt beginnt wieder an der Abschnittsgrenze (Ben 08.11.2026: wieder nach unten, Kante bleibt). --fn-up
   ist ein möglicher Versatz nach oben (zurzeit 0): dann ist der obere Streifen durchsichtig und die Schräge des
   Abschnitts davor zeigt durch. Der dunkle Keil oben links setzt die steile Kante unter der Grenze fort.
   Ragt Text über die Kante, färbt js/argus-schraege.js ihn dort hell. */
@media (min-width: 900px) {
  html.sn-on #funktionen      { --fn-tri: calc((100svh - 68px) * 0.27); }   /* Schräge unten in der Bühne */
  html:not(.sn-on) #funktionen { --fn-tri: var(--sl-drop); }                /* Schräge ohne Szene */
  #funktionen {
    --fn-up: 0px;
    --fn-d: calc(var(--fn-tri) * 0.4);
    margin-top: calc(-1 * var(--fn-up));
    background:
      /* Keil 1 px höher angesetzt: deckt die Kante der gelben Fläche ab, sonst bleibt dort eine Haarlinie (Ben) */
      linear-gradient(to bottom right, var(--ink-1) 50%, transparent 50%) 0 calc(var(--fn-up) - 1px) / 22.2222% calc(var(--fn-d) + 1px) no-repeat,
      linear-gradient(transparent var(--fn-up), var(--sl-fill) var(--fn-up));
  }
  /* Überschrift und Einleitung ragen links über die Kante: dort hell, im Gelb dunkel. Winkel und Schnitt setzt js/argus-schraege.js */
  #funktionen .fn-cut {
    background: linear-gradient(var(--cut-a), var(--text-1) var(--cut), var(--ink-0) var(--cut));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  #funktionen h2.fn-cut .serif { color: transparent; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.js-reveal #funktionen .wrap > .section__head:not(.is-visible) { transform: translateX(110px); }
}
#werkzeuge { --sp-pt: clamp(64px, 7vw, 110px); padding-top: var(--sp-pt); }
/* Ende des Gelbs (Ben 09.11.2026): dieselbe Kante wie oben (von rechts oben nach links unten, gleiches Gefälle:
   ohne/mit Szene unter 900 px 1 H, ab 900 px 1,8 H), darunter dunkel wie die MacBook-Szene. Platz dafür unten. */
#werkzeuge { --wz-end: var(--sl-drop); padding-bottom: calc(var(--wz-end) * .5 + 40px); }   /* Kante höher (Ben): rechte Hälfte hinter der OT-Karte */
#werkzeuge::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;               /* 1 px tiefer: keine Haarlinie zur Szene */
  height: calc(var(--wz-end) + 1px);
  background: var(--ink-0);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
@media (min-width: 900px) { #werkzeuge { --wz-end: calc(var(--sl-drop) * 1.8); } }
/* Bild im Gelb (Ben 09.11.2026: passendes Motiv, füllt die ganze Fläche): Nachtbüro mit Serverraum (higgsfield) im
   Lime-Duotone über die gelbe Schräge der Szene davor, den ganzen Abschnitt und die gelben Flächen von #werkzeuge;
   es steht fest im Fenster, der Inhalt scrollt darüber (feste Ebenen, siehe unten).
   Gelb oben zu 40 % darübergelegt, damit es hell bleibt und die dunkle Schrift lesbar ist (dunkelste Stelle ≈ 6,8 : 1); auch die
   gelben Flächen von #werkzeuge (Hintergrund des Abschnitts, Schiefer-Block und Karten liegen darüber). Der dunkle Keil oben links in
   #funktionen bleibt frei (clip-path, nur ab 900 px). */
#ausgangslage, #funktionen, #werkzeuge {
  /* oben halbdurchsichtiges Gelb (wirkt wie Deckkraft des Bilds), darunter das Duotone wie Startseite und „Für wen“ */
  --gelb-bild:
    linear-gradient(rgba(197, 198, 46, .4), rgba(197, 198, 46, .4)),
    linear-gradient(var(--ink-2), var(--ink-2)),
    linear-gradient(var(--sl-fill), var(--sl-fill)),
    linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .3)),
    url("/assets/img/argus/gelb-nachtbuero.webp") center / cover no-repeat,
    var(--sl-fill);
}
/* Feste Bildebene je gelber Fläche (Ben 09.11.2026: das Bild soll stehen bleiben, darf aber nicht ruckeln). Statt
   background-attachment: fixed (Safari zeichnete das bei jedem Scrollschritt neu) liegt in jeder Fläche eine eigene
   Ebene mit position: fixed über dem ganzen Fenster; die Fläche schneidet sie per clip-path zu und ist so nur das
   Fenster darauf. Feste Ebenen verschiebt der Browser auf der Grafikkarte. Alle Ebenen zeigen dasselbe Bild in
   derselben Lage, deshalb ohne Naht. Darüber darf kein transform liegen (sonst wäre die Ebene nicht mehr fest).
   Schräge: Element .gelb-tri (js/argus-gelb.js) über der flachen gelben Schräge (bleibt als Rückfall). */
.gelb-fix, #funktionen:not(.has-spitzen)::before, #werkzeuge::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--gelb-bild);
  background-blend-mode: normal, lighten, multiply, screen, normal, normal;
}
#funktionen:not(.has-spitzen)::before, #werkzeuge::before { content: ""; }
#funktionen:not(.has-spitzen) { clip-path: inset(0); }
#werkzeuge { clip-path: polygon(0 0, 100% 0, 100% calc(100% + 2px), 0 calc(100% + 2px)); }   /* unten der dunkle Abschluss, 1 px überstehend */
@media (min-width: 900px) {
  /* der dunkle Keil oben links bleibt frei: dahinter liegt der Seitengrund in derselben Farbe */
  #funktionen:not(.has-spitzen) { clip-path: polygon(22.2222% 0, 100% 0, 100% 100%, 0 100%, 0 var(--fn-d, 0px)); }
}
.gelb-tri { position: absolute; pointer-events: none; }
html:not(.sn-on) #ausgangslage > .wrap { position: relative; z-index: 1; }   /* Inhalt über der Schräge */
html.sn-on .sn-stage > .gelb-tri { left: calc(50% - 50vw); width: 100vw; bottom: -1px; height: 27%; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
html:not(.sn-on) .sn-stage > .gelb-tri, html.sn-on #ausgangslage > .gelb-tri { display: none; }
html:not(.sn-on) #ausgangslage > .gelb-tri { left: 0; right: 0; bottom: -1px; height: var(--sl-drop); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
@media (max-width: 899px) { html.sn-on .sn-stage > .gelb-tri { height: 11%; } }
@media (min-width: 900px) {
  html.sn-on .sn-stage > .gelb-tri { height: 37.8%; clip-path: polygon(100% 0, 100% 100%, 22.2222% 100%); }
  html:not(.sn-on) #ausgangslage > .gelb-tri { height: calc(var(--sl-drop) * 1.4); clip-path: polygon(100% 0, 100% 100%, 22.2222% 100%); }
}
#funktionen.has-spitzen::before, #funktionen.has-spitzen::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)),
    linear-gradient(var(--sl-fill), var(--sl-fill)),
    linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)),   /* kaum aufgehellt: mehr Schiefer (Ben) */
    var(--sp-img) center / cover no-repeat,
    var(--sl-fill);
  background-blend-mode: lighten, multiply, screen, normal, normal;
}
/* links: Basis am linken Rand, Spitze zeigt nach rechts unten, endet vor der Überschrift */
#funktionen.has-spitzen::before {
  left: 0;
  top: calc(var(--sp-pt) - 40px);
  width: 33%;
  height: clamp(150px, 13vw, 230px);
  clip-path: polygon(0 0, 100% 60%, 0 100%);
}
/* rechts: Basis am rechten Rand, Spitze zeigt nach links, neben dem Einleitungstext, endet vor den Inhalten */
#funktionen.has-spitzen::after {
  right: 0;
  top: calc(var(--sp-pt) + 60px);
  width: 38%;
  height: clamp(150px, 14vw, 205px);
  clip-path: polygon(100% 0, 0 55%, 100% 100%);
}
#funktionen.has-spitzen::before { --sp-img: url("/assets/img/argus/spitze-switch.webp"); }
#funktionen.has-spitzen::after  { --sp-img: url("/assets/img/argus/spitze-rack.webp"); }
@media (max-width: 1099px) { #funktionen.has-spitzen::after { width: 30%; } }
@media (max-width: 899px) {
  #funktionen.has-spitzen::before, #funktionen.has-spitzen::after { display: none; }
}

/* ── Werkzeuge nach der Vorlage linear.eu (Ben 08.11.2026): Anordnung und Größen wie Linear (Bildfläche oben, Textzone
   darunter, drei Spalten; Auto-Pilot oben und OT unten gespiegelt als große Beiträge, Bild 2/3, Text 1/3). Kein helles
   Feld (Ben): das Foto füllt die ganze Kachel, die Schrift steht hell darauf, Schiefer zur Textzone hin dichter.
   Die Bild-Div bleibt als Platzhalter für die Bildfläche, ihr ::before legt das Foto über die ganze Kachel. */
.wk-img--bestand        { --wk-img: url("/assets/img/argus/werkzeug-bestand.webp"); }
.wk-img--schwachstellen { --wk-img: url("/assets/img/argus/werkzeug-schwachstellen.webp"); }
.wk-img--luecken        { --wk-img: url("/assets/img/argus/werkzeug-luecken.webp"); }
.wk-img--web            { --wk-img: url("/assets/img/argus/werkzeug-web.webp"); }
.wk-img--anlagen        { --wk-img: url("/assets/img/argus/werkzeug-anlagen.webp"); }
.wk-img--konten         { --wk-img: url("/assets/img/argus/werkzeug-konten.webp"); }
.wk-img--autopilot      { --wk-img: url("/assets/img/argus/werkzeug-autopilot.webp"); }
.wk-img--ot             { --wk-img: url("/assets/img/argus/werkzeug-ot.webp"); }
.wk-card, .wk-feat { position: relative; isolation: isolate; background: var(--ink-2); }
.wk-card__img::before, .wk-feat__img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wk-img) center / cover no-repeat, var(--ink-2);
  transition: filter .35s, transform .8s cubic-bezier(0.16, 0.84, 0.32, 1);
}
/* Schiefer-Verlauf als eigene Ebene darüber: beim Hover zoomt nur das Foto, die Schrift bleibt gleich gut lesbar */
.wk-card__img::after, .wk-feat__img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wk-shade); pointer-events: none; }
.wk-card, .wk-feat { overflow: hidden; }
/* Hover wie die Bildkacheln der übrigen Seiten (.feature-img): Foto zoomt sanft und wird heller */
@media (hover: hover) {
  .wk-card:hover .wk-card__img::before, .wk-feat:hover .wk-feat__img::before { transform: scale(1.05); filter: brightness(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .wk-card:hover .wk-card__img::before, .wk-feat:hover .wk-feat__img::before { transform: none; }
}
.wk-card__img { --wk-shade: linear-gradient(180deg, rgba(26, 32, 41, .22) 0%, rgba(26, 32, 41, .38) 52%, rgba(26, 32, 41, .86) 74%, rgba(26, 32, 41, .93) 100%); }
.wk-feat__img { --wk-shade: linear-gradient(90deg, rgba(26, 32, 41, .22) 0%, rgba(26, 32, 41, .4) 52%, rgba(26, 32, 41, .86) 67%, rgba(26, 32, 41, .93) 100%); }
.wk-feat--rev .wk-feat__img { --wk-shade: linear-gradient(270deg, rgba(26, 32, 41, .22) 0%, rgba(26, 32, 41, .4) 52%, rgba(26, 32, 41, .86) 67%, rgba(26, 32, 41, .93) 100%); }
.wk-grid { gap: 28px; }
.wk-card { display: flex; flex-direction: column; }
.wk-card__img { aspect-ratio: 1 / 1; }
.wk-card__txt { flex: 1; padding: 26px 28px 30px; }
.wk-card .card__title { margin-bottom: 12px; font-size: clamp(22px, 1.7vw, 27px); font-weight: 600; color: var(--text-1); }
.wk-card .card__body { font-size: 16px; color: var(--text-2); }
.wk-feat { display: grid; grid-template-columns: 2fr 1fr; margin-bottom: 28px; }
.wk-feat--rev { grid-template-columns: 1fr 2fr; margin: 28px 0 0; }
.wk-feat--rev .wk-feat__img { order: 2; }
.wk-feat__img { min-height: clamp(280px, 26vw, 440px); }
.wk-feat__txt { display: flex; align-items: center; padding: clamp(28px, 2.6vw, 44px); }
.wk-feat__txt p { margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--text-2); }
.wk-feat__txt b { font-weight: 500; color: var(--text-1); }
@media (max-width: 900px) {
  .wk-feat, .wk-feat--rev { grid-template-columns: 1fr; }
  .wk-feat--rev .wk-feat__img { order: 0; }
  .wk-feat__img { min-height: 0; aspect-ratio: 16 / 9; }
  .wk-feat__img, .wk-feat--rev .wk-feat__img { --wk-shade: linear-gradient(180deg, rgba(26, 32, 41, .22) 0%, rgba(26, 32, 41, .4) 45%, rgba(26, 32, 41, .86) 62%, rgba(26, 32, 41, .93) 100%); }
}
@media (max-width: 1000px) { .wk-card__img { aspect-ratio: 4 / 3; } }

/* Büro-Szene: Punkte auf den Bodenkabeln (js/argus-snapshot.js, CABLES), Orange mit leichtem Schein (Ben 09.11.2026,
   vorher Lime). Eigener Ton, nicht --rust: Rost steht in der Szene für Fehler */
.sn-flow circle { fill: #FF9A1F; filter: drop-shadow(0 0 2px rgba(255, 154, 31, .9)); }

/* Sticker auf der Kante Gelb/Schiefer in „Werkzeuge“ (Ben 09.11.2026), Lage setzt js/argus-gelb.js. Das Bild hat
   rundum durchsichtigen Rand (Sticker bei 417/427 bis 1663/1584 von 2048), deshalb als Hintergrund auf die sichtbare
   Fläche zugeschnitten: sonst ragte der leere Rand über den Fensterrand und erzeugte Überbreite (Handy). */
.wz-sticker {
  position: absolute;
  z-index: 5;
  width: clamp(116px, 10vw, 196px);
  aspect-ratio: 1246 / 1157;
  background: url("/assets/img/argus/sticker-schild.webp") 52% 47.9% / 164.4% auto no-repeat;
  transform: translate(-50%, -50%) rotate(8deg);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35));
  pointer-events: none;
}