/* ============================================================================
   SIGNALAKQUISE — Designsystem "Zweiklang"
   ----------------------------------------------------------------------------
   Ein System, zwei Grundflaechen:

     .sa-paper       heller Grund. Alles, was Text, Argument und Beweis ist.
     .sa-instrument  dunkles Panel. Alles, was System zeigt: Signal-Feed,
                     Kontenliste, Auswertung, Statuszeile.

   Der Kontrast IST die Kernaussage der Marke: aussen ruhige deutsche
   Seriositaet, innen ein laufendes System. Deshalb nie mischen und nie
   verwaschen - eine Flaeche ist entweder Papier oder Instrument.

   Abgeleitet aus der Marktrecherche vom 27.07.2026, nicht aus Geschmack.
   Die Begruendung jeder Entscheidung steht in DESIGN-SYSTEM.md.
   ============================================================================ */

@import url("./fonts/fonts.css");

/* ---------------------------------------------------------------------------
   DIE VERBOTE. Nicht verhandelbar, weil sie aus belegten Kippsignalen kommen.
   Reihenfolge = Schwere:
     1. Verlauf auf einem CTA          -> das staerkste Blender-Signal
     2. Pill-Radius (999px / 100px)    -> Performance-Marketing-Signatur
     3. frei schwebende Farbblobs      -> Startup-Deko ohne Funktion
     4. 3D-Renders                     -> Kostuem
     5. Animation als Selbstzweck      -> Unruhe ohne Aussage
   Glasmorphismus kommt bei mittelstandsnahen deutschen Anbietern null-mal vor.
   Es gibt in diesem System keine Glas-Klasse, und es wird keine geben.

   Erlaubt und erwuenscht: feines Raster und Filmkorn. Beide lesen als
   Material, nie als Effekt - sie kippen nachweislich nicht.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   RADIUS. Ueberall 0. Praezision entsteht ueber die Kante, nicht ueber die
   Rundung. TRUMPF faehrt das durchgehend und verkauft an den deutschen
   Maschinenbau. Ein einziger Wert, damit es keine Diskussion gibt.
   --------------------------------------------------------------------------- */

:root{
  --sa-radius: 0;

  /* Typografie. Drei Groessen, zwei Gewichte. Wer eine vierte Groesse braucht,
     hat ein Hierarchieproblem, kein Typografieproblem. */
  --sa-font:      'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sa-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --sa-fs-display: clamp(30px, 4.4vw, 46px);
  --sa-fs-lead:    17px;
  --sa-fs-body:    15.5px;
  --sa-fs-small:   13px;
  --sa-fs-label:   10px;   /* nur Mono, nur Versalien, nur kurze Strecken */

  --sa-lh-display: 1.14;
  --sa-lh-body:    1.62;
  --sa-track-display: -.026em;
  --sa-track-label:   .16em;

  /* Raster. 4px-Basis, benannte Stufen. */
  --sa-1: 4px;  --sa-2: 8px;  --sa-3: 12px; --sa-4: 16px;
  --sa-5: 24px; --sa-6: 32px; --sa-7: 48px; --sa-8: 64px;
  --sa-9: 96px; --sa-10: 128px;

  /* Ein Uebergang, ueberall derselbe. Konsistenz der Kurve ist der groesste
     Teil der wahrgenommenen Qualitaet. */
  --sa-ease: cubic-bezier(.22, 1, .36, 1);
  --sa-dur:  .22s;
}

/* ===========================================================================
   KONTEXT 1 — PAPIER (hell)
   Warmes Off-White, nie Reinweiss. Reinweiss ist kalt und laesst jede
   Nachbarflaeche schmutzig aussehen.
   =========================================================================== */
.sa-paper{
  --sa-bg:          #F7F7F5;
  --sa-bg-raised:   #FFFFFF;
  --sa-ink:         #14171A;
  --sa-body:        #575C60;
  --sa-dim:         #8A8F92;
  --sa-rule:        #E4E4E0;
  --sa-rule-strong: #CBCBC5;

  --sa-signal:      #0A7A4C;              /* abgedunkelt, haelt Kontrast auf hell */
  --sa-signal-weak: rgba(10,122,76,.07);
  --sa-signal-edge: rgba(10,122,76,.30);

  --sa-btn-bg:  #14171A;                  /* schwarzer CTA - die Konvention der
                                             besten deutschen B2B-Seiten */
  --sa-btn-ink: #FFFFFF;
  --sa-dot:     rgba(20,23,26,.07);

  /* Bedeutungsfarben, auf hell abgedunkelt. Siehe Block unten. */
  --sa-cyan:      #21708C;
  --sa-violett:   #5A5FC4;
  --sa-bernstein: #96601A;
  --sa-rose:      #B03149;
  --sa-stahl:     #4E6178;

  background: var(--sa-bg);
  color: var(--sa-body);
}

/* ===========================================================================
   KONTEXT 2 — INSTRUMENT (blau-schwarz)
   Nie #000000 und nie neutrales Grau: die Tiefe kommt aus dem Blaustich.
   Vier diskrete Helligkeitsstufen statt eines weichen Verlaufs - abgestufte
   Sprünge lesen als konstruiert, verwaschene als billig.

     L0 Grund #080C13  ->  L1 gehoben #0E141E  ->  L2 Panel #141C28
     ->  L3 Linie #1E2836

   Gilt für zwei Einsatzarten:
     .sa-instrument   das Datenpanel im hellen Dokument
     .sa-nacht        die volle dunkle Fläche für PDF, Angebot, Deck (siehe unten)
   =========================================================================== */
.sa-instrument, .sa-nacht{
  --sa-bg:          #080C13;
  --sa-bg-raised:   #0E141E;
  --sa-bg-panel:    #141C28;
  --sa-ink:         #E8EDF3;
  --sa-body:        #A3B0BF;
  --sa-dim:         #74838F;
  --sa-rule:        #1E2836;
  --sa-rule-strong: #2C3A4C;

  --sa-signal:      #00C97B;
  --sa-signal-weak: rgba(0,201,123,.08);
  --sa-signal-edge: rgba(0,201,123,.34);

  --sa-btn-bg:  #00C97B;
  --sa-btn-ink: #03231A;
  --sa-dot:     rgba(200,222,255,.06);

  /* Bedeutungsfarben auf blau-schwarz. Siehe Block unten. */
  --sa-cyan:      #46B6D8;
  --sa-violett:   #8E9AEA;
  --sa-bernstein: #E0A455;
  --sa-rose:      #E1687B;
  --sa-stahl:     #7E93AC;

  /* ---- Nachtglas. Das Weiss ist leicht blau eingefärbt (190,215,255), damit
     das Glas den Grund aufnimmt statt grau darauf zu liegen. ---- */
  --sa-glass-fill:   linear-gradient(165deg, rgba(190,215,255,.085), rgba(190,215,255,.022));
  --sa-glass-border: rgba(190,215,255,.13);
  --sa-glass-sheen:  linear-gradient(180deg, rgba(210,232,255,.13), transparent 42%);
  --sa-glass-edge:   linear-gradient(90deg, transparent, rgba(222,240,255,.34) 22%, rgba(222,240,255,.34) 78%, transparent);
  --sa-glass-fill-raised: linear-gradient(165deg, rgba(190,215,255,.13), rgba(190,215,255,.04));

  /* Die EINE beleuchtete Fläche pro Ansicht. */
  --sa-glass-signal-fill:   linear-gradient(165deg, rgba(0,201,123,.17), rgba(0,201,123,.04));
  --sa-glass-signal-border: rgba(90,240,183,.32);
  --sa-glass-signal-sheen:  linear-gradient(180deg, rgba(186,255,226,.15), transparent 44%);
  --sa-glass-signal-edge:   linear-gradient(90deg, transparent, rgba(140,255,205,.44) 22%, rgba(140,255,205,.44) 78%, transparent);

  background: var(--sa-bg);
  color: var(--sa-body);
}

/* ---------------------------------------------------------------------------
   .sa-nacht — die atmosphärische Fassung für PDF, Angebot, Deck, Einseiter.
   Zwei Lichtzonen, mehr nicht: ein kühler Schein oben (das Systemlicht) und
   EINE rationierte Signalzone. Nie zwei Signalzonen.
   Das ist Licht, keine Form: es darf nie auf einer Textzeile oder einer
   Datenzeile liegen.
   --------------------------------------------------------------------------- */
.sa-nacht{
  background:
    radial-gradient(118% 76% at 50% -10%, rgba(122,164,226,.15), transparent 58%),
    radial-gradient(56% 46% at 88% 96%, rgba(0,201,123,.075), transparent 64%),
    var(--sa-bg);
}

/* ===========================================================================
   BEDEUTUNGSFARBEN
   ---------------------------------------------------------------------------
   Signalgrün ist die Marke und bleibt der Marke vorbehalten. Für alles, was
   VERGLICHEN, UNTERSCHIEDEN oder EINGEORDNET wird - Diagramme, Schaubilder,
   Ablaufgrafiken, Zustände, Kategorien - gibt es diese fünf.

   Die Regel: eine Farbe steht für eine BEDEUTUNG, nie für Dekoration.
   Wer alles einfärbt, hat nichts gesagt. Färbe die verglichenen Dinge, den
   Brennpunkt, die Schrittnummer - und lasse den Rest neutral.

   Sie werden für hell abgedunkelt, nicht neu gewählt: Farbton bleibt,
   Helligkeit dreht sich um.

     cyan       Daten, Messung, das Beobachtete
     violett    Automatik, System, Maschinenanteil
     bernstein  Wartend, in Prüfung, Aufmerksamkeit
     rose       Verlust, Absage, Abbruch
     stahl      Inaktiv, ausser Betrieb, der ruhige Hintergrundpfad
     SIGNALGRÜN nur die Marke und der eine Brennpunkt - nie eine Kategorie
   =========================================================================== */
.sa-cyan{ color: var(--sa-cyan) } .sa-violett{ color: var(--sa-violett) }
.sa-bernstein{ color: var(--sa-bernstein) } .sa-rose{ color: var(--sa-rose) }
.sa-stahl{ color: var(--sa-stahl) }

.sa-paper, .sa-instrument, .sa-nacht{
  font-family: var(--sa-font);
  font-size: var(--sa-fs-body);
  line-height: var(--sa-lh-body);
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ===========================================================================
   TYPOGRAFIE
   =========================================================================== */
.sa-display{
  font-size: var(--sa-fs-display);
  line-height: var(--sa-lh-display);
  letter-spacing: var(--sa-track-display);
  font-weight: 600;
  color: var(--sa-ink);
  margin: 0;
  text-wrap: balance;
}
/* Genau EIN typografischer Zug pro Headline. Farbe ODER Gewicht, nie beides. */
.sa-display em{ font-style: normal; color: var(--sa-signal); }

.sa-lead{ font-size: var(--sa-fs-lead); color: var(--sa-body); margin: var(--sa-4) 0 0; max-width: 46ch; }
.sa-small{ font-size: var(--sa-fs-small); }

/* Das Instrumentierungs-Register. Nur Etiketten, Kennungen, Messwerte,
   Zeitstempel, Statuszeilen. NIE Fliesstext, nie ein ganzer Satz.
   Bezeichnend eingesetzt liest Mono als Instrument, dekorativ als Kostuem. */
.sa-label{
  font-family: var(--sa-font-mono);
  font-size: var(--sa-fs-label);
  font-weight: 500;
  letter-spacing: var(--sa-track-label);
  text-transform: uppercase;
  color: var(--sa-dim);
}
.sa-mono{ font-family: var(--sa-font-mono); font-variant-numeric: tabular-nums; }

/* Eyebrow: Label mit vorangestelltem Signalquadrat. Ein Quadrat, kein Punkt -
   das Raster der Bildmarke setzt sich hier fort. Einer pro Ansicht. */
.sa-eyebrow{
  display: inline-flex; align-items: center; gap: var(--sa-2);
  font-family: var(--sa-font-mono);
  font-size: var(--sa-fs-label); font-weight: 500;
  letter-spacing: var(--sa-track-label); text-transform: uppercase;
  color: var(--sa-signal);
}
.sa-eyebrow::before{ content: ""; width: 7px; height: 7px; background: currentColor; flex: none; }

/* ===========================================================================
   FLAECHEN
   Karten werden ausschliesslich durch die Haarlinie definiert. Kein Schatten,
   keine Fuellung, die sich vom Grund absetzt - das erzeugt auf Papier die
   grauen Baender zwischen den Karten.
   =========================================================================== */
.sa-panel{
  background: var(--sa-bg-raised);
  border: 1px solid var(--sa-rule);
  border-radius: var(--sa-radius);
}
.sa-panel-flat{ background: transparent; border: 1px solid var(--sa-rule); border-radius: var(--sa-radius); }

/* Der eine markierte Bereich pro Ansicht. Kein Standard-Kartenstil. */
.sa-marked{
  background: var(--sa-signal-weak);
  border: 1px solid var(--sa-signal-edge);
  border-radius: var(--sa-radius);
}

.sa-rule{ border: 0; border-top: 1px solid var(--sa-rule); margin: var(--sa-7) 0; }

/* ===========================================================================
   NACHTGLAS — die Glasflächen auf dunklem Grund
   ---------------------------------------------------------------------------
   Nur innerhalb von .sa-instrument oder .sa-nacht. Auf hellem Papier gibt es
   kein Glas: dort definiert die Haarlinie die Karte, und das bleibt so.

   DER KERN, und der Grund, warum das im PDF trägt: hier steckt KEIN
   backdrop-filter. Das Glas entsteht aus drei Lagen, die alle echte Malbefehle
   sind und deshalb durch die Druckausgabe kommen:

     1. ein diagonaler Verlauf als Füllung   (165 Grad, hell nach fast nichts)
     2. eine Haarlinie als Rahmen
     3. ::before  der obere Glanz - ein Verlauf, kein Schatten
     4. ::after   die Lichtkante oben - eine 1px-Verlaufslinie, KEIN inset-Schatten

   Punkt 4 ist die Abweichung vom Vorbild. Ein inset box-shadow wird beim
   Druck gestrippt (sonst bandiert er zu grauen Rechtecken), und damit
   verliert das Glas im PDF genau die Kante, die es zu Glas macht. Als
   Verlaufslinie überlebt sie.
   =========================================================================== */
.sa-glass{
  position: relative; isolation: isolate;
  background: var(--sa-glass-fill);
  border: 1px solid var(--sa-glass-border);
  border-radius: var(--sa-radius);
}
.sa-glass-raised{ background: var(--sa-glass-fill-raised); }

/* Der obere Glanz. Er ist das, was als Glas gelesen wird. */
.sa-glass::before{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; background: var(--sa-glass-sheen);
}
/* Die Lichtkante. Zur Mitte hin hell, zu den Ecken auslaufend - eine
   durchgehende Linie sähe gedruckt aus wie ein Rahmenfehler. */
.sa-glass::after{
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 1;
  pointer-events: none; background: var(--sa-glass-edge);
}
.sa-glass > *{ position: relative; z-index: 2; }

/* Die EINE beleuchtete Fläche pro Ansicht: das Ergebnis, der Preis, die
   Zusage. Kein Standard-Kartenstil. Wenn alles glast, glast nichts. */
.sa-glass-signal{
  background: var(--sa-glass-signal-fill);
  border-color: var(--sa-glass-signal-border);
  color: var(--sa-ink);
}
.sa-glass-signal::before{ background: var(--sa-glass-signal-sheen); }
.sa-glass-signal::after{  background: var(--sa-glass-signal-edge); }

/* Vignette als Verlauf statt als inset-Schatten - damit sie im PDF steht. */
.sa-vignette{
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(122% 100% at 50% 44%, transparent 44%, rgba(3,6,12,.58) 100%);
}

/* ===========================================================================
   SCHALTFLAECHEN
   Voll deckend, Radius 0, kein Verlauf. Der Hover verschiebt nichts und
   skaliert nichts - er wechselt nur die Deckkraft der Kante.
   =========================================================================== */
.sa-btn{
  display: inline-flex; align-items: center; gap: var(--sa-2);
  padding: 13px 24px;
  font-family: var(--sa-font); font-size: var(--sa-fs-body); font-weight: 600;
  background: var(--sa-btn-bg); color: var(--sa-btn-ink);
  border: 1px solid var(--sa-btn-bg); border-radius: var(--sa-radius);
  cursor: pointer; text-decoration: none;
  transition: filter var(--sa-dur) var(--sa-ease);
}
.sa-btn:hover{ filter: brightness(1.12); }

.sa-btn-ghost{
  display: inline-flex; align-items: center; gap: var(--sa-2);
  padding: 13px 24px;
  font-family: var(--sa-font); font-size: var(--sa-fs-body); font-weight: 600;
  background: transparent; color: var(--sa-ink);
  border: 1px solid var(--sa-rule-strong); border-radius: var(--sa-radius);
  cursor: pointer; text-decoration: none;
  transition: border-color var(--sa-dur) var(--sa-ease);
}
.sa-btn-ghost:hover{ border-color: var(--sa-ink); }

/* Mikrocopy unter dem CTA. Nimmt dem Klick das Risiko - der wichtigste
   Zentimeter der Seite. */
.sa-micro{
  font-family: var(--sa-font-mono); font-size: var(--sa-fs-label);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sa-dim); margin-top: var(--sa-3);
}

/* ===========================================================================
   DAS SIGNALGRÜN HAT ZWEI REGISTER
   ---------------------------------------------------------------------------
   Dieselbe Markenfarbe, zwei Auftragsarten. Man braucht beide.

   SOLID - deckend, volle Sättigung, scharfkantig. Für HANDLUNG und IDENTITÄT.
     die Bildmarke (immer solid, unantastbar)
     die eine Schaltfläche, die geklickt werden soll
     kleine scharfe Zeichen: Statuspunkt, 1px-Linie, Chip, hervorgehobenes Wort
     Alles Dünne oder Kleine. Solid hält seine Kante in jeder Grösse, Glas nicht.

   GLAS - durchscheinend, mit Glanz und Lichtkante. Für ZUSTAND und FLÄCHE.
     die EINE Fläche, die leuchten soll: das Ergebnis, die Zusage, der Preis
     grosse Bereiche, in denen deckendes Grün als Farbwaschung schreien würde

   Die Entscheidung in einem Satz: ist das Element klein, dünn oder ein
   Klickziel (oder die Marke)? SOLID. Ist es eine Fläche, die als einziges
   leuchten soll? GLAS.

   Und die Regel, die für beide gilt: EIN Signalmoment pro Ansicht, auf dem
   einen Ding, das zuerst gesehen werden soll. Blinzeltest: Augen zukneifen,
   das Grün muss zu genau einer Stelle zusammenlaufen. Trägt eine Ansicht
   beide Register, ist SOLID das Erste und Glas der stützende Zustand.
   Nie zwei Solids im Wettstreit, nie zwei gleichwertige Grüns.

   Nie Signalgrün auf: Rahmen, Navigation, Sektionsetiketten, eine ganze
   Kartenreihe, jeden Knoten eines Schaubilds, Fliesstext, grosse Vollflächen.
   Struktur bleibt neutral. Wenn alles grün ist, ist nichts grün.
   =========================================================================== */
.sa-chip{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sa-font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--sa-radius);
  background: var(--sa-signal-weak); border: 1px solid var(--sa-signal-edge);
  color: var(--sa-signal);
}
/* Solid: deckender Chip und Statuspunkt. Quadratisch, nicht rund - das Raster
   der Bildmarke setzt sich in jedem kleinen Zeichen fort. */
.sa-chip-solid{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sa-font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--sa-radius);
  background: var(--sa-signal); color: #03231A;
}
.sa-dot-solid{ display: inline-block; width: 7px; height: 7px; background: var(--sa-signal); flex: none; }
.sa-mark{ color: var(--sa-signal); font-weight: 600; }

/* ===========================================================================
   FORMULARE
   Radius 0, Haarlinie, kein Innenschatten. Das Etikett steht ueber dem Feld,
   nie darin - Platzhaltertext als Etikett ist bei ausgefuelltem Formular weg
   und kostet den Nutzer den Kontext.
   =========================================================================== */
.sa-field{ display: flex; flex-direction: column; gap: 7px; }
.sa-field > label{
  font-family: var(--sa-font-mono); font-size: var(--sa-fs-label); font-weight: 500;
  letter-spacing: var(--sa-track-label); text-transform: uppercase; color: var(--sa-dim);
}
.sa-input, .sa-select, .sa-textarea{
  font-family: var(--sa-font); font-size: var(--sa-fs-body); color: var(--sa-ink);
  background: var(--sa-bg-raised);
  border: 1px solid var(--sa-rule); border-radius: var(--sa-radius);
  padding: 11px 13px; width: 100%; box-sizing: border-box;
  transition: border-color var(--sa-dur) var(--sa-ease);
}
.sa-textarea{ min-height: 104px; resize: vertical; line-height: 1.55; }
.sa-input::placeholder, .sa-textarea::placeholder{ color: var(--sa-dim); opacity: .8; }
.sa-input:hover, .sa-select:hover, .sa-textarea:hover{ border-color: var(--sa-rule-strong); }
.sa-input:focus, .sa-select:focus, .sa-textarea:focus{ outline: none; border-color: var(--sa-signal); }
.sa-input[aria-invalid="true"]{ border-color: var(--sa-rose); }
.sa-hint{ font-size: 12px; color: var(--sa-dim); }
.sa-hint--fehler{ color: var(--sa-rose); }

/* Kaestchen quadratisch, nie rund - das Raster der Bildmarke gilt auch hier. */
.sa-check{ display: inline-flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: var(--sa-fs-small); }
.sa-check input{ appearance: none; -webkit-appearance: none; margin: 2px 0 0; flex: none;
  width: 16px; height: 16px; background: var(--sa-bg-raised);
  border: 1px solid var(--sa-rule-strong); border-radius: 0; cursor: pointer; }
.sa-check input:checked{ background: var(--sa-signal); border-color: var(--sa-signal); }
.sa-check input:focus-visible{ outline: 2px solid var(--sa-signal); outline-offset: 2px; }

/* ===========================================================================
   TABELLEN
   Zeilenrhythmus und Spaltenausrichtung machen dichte Daten ruhig - nicht
   weniger Daten. Zahlen immer mit tabular-nums, damit die Spalte steht.
   =========================================================================== */
.sa-table{ width: 100%; border-collapse: collapse; font-size: var(--sa-fs-small); }
.sa-table th{
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--sa-rule-strong);
  font-family: var(--sa-font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--sa-dim); white-space: nowrap;
}
.sa-table td{ padding: 12px 14px; border-bottom: 1px solid var(--sa-rule); color: var(--sa-body); }
.sa-table tr:last-child td{ border-bottom: 0; }
.sa-table td:first-child{ color: var(--sa-ink); font-weight: 500; }
.sa-table .num{ text-align: right; font-variant-numeric: tabular-nums; font-family: var(--sa-font-mono); font-size: 12px; }

/* ===========================================================================
   REITER — die Systembreite benennen, auch wenn nur einer gezeigt wird
   =========================================================================== */
.sa-tabs{ display: flex; gap: 0; border-bottom: 1px solid var(--sa-rule); }
.sa-tab{
  padding: 11px 18px; background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--sa-font-mono); font-size: var(--sa-fs-label); font-weight: 500;
  letter-spacing: var(--sa-track-label); text-transform: uppercase;
  color: var(--sa-dim); cursor: pointer; margin-bottom: -1px;
  transition: color var(--sa-dur) var(--sa-ease), border-color var(--sa-dur) var(--sa-ease);
}
.sa-tab:hover{ color: var(--sa-ink); }
.sa-tab[aria-selected="true"]{ color: var(--sa-signal); border-bottom-color: var(--sa-signal); }

/* ===========================================================================
   STATUSHINWEISE
   Die Bedeutungsfarbe traegt die Aussage, nicht ein Symbol. Linksbuendige
   2px-Kante statt Vollflaeche - eine eingefaerbte Flaeche schreit.
   =========================================================================== */
.sa-hinweis{
  border: 1px solid var(--sa-rule); border-left: 2px solid var(--sa-stahl);
  border-radius: var(--sa-radius); padding: 13px 16px; font-size: var(--sa-fs-small);
  background: var(--sa-bg-raised); color: var(--sa-body);
}
.sa-hinweis b{ display: block; color: var(--sa-ink); font-weight: 600; margin-bottom: 3px; }
.sa-hinweis--info{ border-left-color: var(--sa-cyan); }
.sa-hinweis--warten{ border-left-color: var(--sa-bernstein); }
.sa-hinweis--fehler{ border-left-color: var(--sa-rose); }
.sa-hinweis--erledigt{ border-left-color: var(--sa-signal); }

/* ===========================================================================
   NAVIGATION
   =========================================================================== */
.sa-nav{
  display: flex; align-items: center; gap: var(--sa-6);
  padding: var(--sa-4) 0; border-bottom: 1px solid var(--sa-rule);
}
.sa-nav__links{ display: flex; gap: var(--sa-5); margin-left: var(--sa-6); }
.sa-nav a{
  font-size: var(--sa-fs-small); color: var(--sa-body); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color var(--sa-dur) var(--sa-ease), border-color var(--sa-dur) var(--sa-ease);
}
.sa-nav a:hover{ color: var(--sa-ink); border-bottom-color: var(--sa-signal); }
.sa-nav a[aria-current="page"]{ color: var(--sa-ink); border-bottom-color: var(--sa-signal); }
.sa-nav__ende{ margin-left: auto; display: flex; align-items: center; gap: var(--sa-4); }

/* Icons aus assets/icons/ erben die Farbe. Groesse ueber font-size steuern. */
.sa-icon{ width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.16em; flex: none; }

/* ===========================================================================
   DER SIGNAL-FEED
   Das wichtigste Bauteil des Systems. Kein deutscher Wettbewerber zeigt, wie
   seine Arbeit aussieht - alle zeigen Prozessdiagramme und Stockfotos.
   Wer echte Zeilen mit echten Namen, echten Anlaessen und echten Zeitstempeln
   zeigt, verlaesst die Kategorie "Agentur".

   Regeln: echte Firmennamen (freigegeben) oder ehrlich anonymisiert, nie
   "Musterfirma GmbH". Zeitstempel immer. Genau EINE Zeile ist heiss.
   =========================================================================== */
.sa-feed{ border: 1px solid var(--sa-rule); border-radius: var(--sa-radius); background: var(--sa-bg-raised); }
.sa-feed__head{
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px var(--sa-4); border-bottom: 1px solid var(--sa-rule);
  font-family: var(--sa-font-mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sa-dim);
}
.sa-feed__live{ display: inline-flex; align-items: center; gap: 6px; color: var(--sa-signal); }
/* Quadrat, kein Kreis, und es pulst auf einer Zeitachse - es folgt nie dem Cursor. */
.sa-feed__live::before{
  content: ""; width: 6px; height: 6px; background: currentColor;
  animation: sa-pulse 2.4s var(--sa-ease) infinite;
}
@keyframes sa-pulse{ 0%,100%{ opacity: 1 } 50%{ opacity: .35 } }

.sa-feed table{ width: 100%; border-collapse: collapse; font-size: var(--sa-fs-small); }
.sa-feed td{ padding: 11px var(--sa-4); border-bottom: 1px solid var(--sa-rule); vertical-align: middle; }
.sa-feed tr:last-child td{ border-bottom: 0; }
.sa-feed__co{ color: var(--sa-ink); font-weight: 500; }
.sa-feed__sig{
  font-family: var(--sa-font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sa-dim); white-space: nowrap;
}
.sa-feed__ts{
  font-family: var(--sa-font-mono); font-size: 10px; font-variant-numeric: tabular-nums;
  color: var(--sa-dim); opacity: .75; text-align: right; white-space: nowrap;
}
.sa-feed tr.is-hot td{ background: var(--sa-signal-weak); }
.sa-feed tr.is-hot .sa-feed__sig{ color: var(--sa-signal); }

/* ===========================================================================
   BELEGE
   Zahl gross, Bezeichnung klein in Mono. Nie gerundet, wenn die echte Zahl
   bekannt ist - "247" traegt, "ueber 200" nicht.
   =========================================================================== */
.sa-proof{ display: flex; border-top: 1px solid var(--sa-rule); }
.sa-proof > div{ flex: 1; padding: var(--sa-4) var(--sa-5) 0 0; }
.sa-proof b{
  display: block; font-size: 24px; font-weight: 600;
  letter-spacing: -.02em; color: var(--sa-ink);
  font-variant-numeric: tabular-nums;
}
.sa-proof span{
  font-family: var(--sa-font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sa-dim);
}

/* Referenz: Logo UND Kennzahl als eine Einheit, nie als getrennte Waende.
   Eine Logowand ohne Zahlen ist Deko; eine Zahlenwand ohne Namen ist
   unglaubwuerdig. Zusammen sind sie der staerkste Beweis im deutschen B2B. */
/* ---------------------------------------------------------------------------
   FALLSTUDIE — Referenz mit Rueckverweis auf frontal.so
   Die Marke behauptet nichts ueber Frontals Arbeit, sie ZITIERT sie und
   verlinkt. Das ist zugleich die staerkste und die rechtssicherste Form:
   eine belegbare Aussage ueber die Muttergesellschaft plus Quellenangabe,
   in einem Klick nachpruefbar. Genau das fehlt im gesamten deutschen
   Wettbewerbsfeld.
   Zahlen und Zeitformen ausschliesslich aus ../belege/referenzen.json.
   --------------------------------------------------------------------------- */
.sa-fallstudie{
  display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto;
  gap: var(--sa-4); align-items: baseline;
  padding: var(--sa-4) 0; border-bottom: 1px solid var(--sa-rule);
}
.sa-fallstudie__kunde{ color: var(--sa-ink); font-weight: 600; font-size: 15px; }
.sa-fallstudie__zahl{ font-size: var(--sa-fs-small); color: var(--sa-body); }
.sa-fallstudie__zahl b{ color: var(--sa-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sa-fallstudie__quelle{
  font-family: var(--sa-font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sa-dim); text-decoration: none;
  white-space: nowrap; border-bottom: 1px solid transparent;
  transition: color var(--sa-dur) var(--sa-ease), border-color var(--sa-dur) var(--sa-ease);
}
.sa-fallstudie__quelle:hover{ color: var(--sa-signal); border-bottom-color: var(--sa-signal); }
/* Ehemalige Kunden werden markiert, damit die Zeitform nicht verrutscht.
   Vergangene Arbeit darf man zeigen - aber nicht als laufende Beziehung. */
.sa-fallstudie__zeit{
  font-family: var(--sa-font-mono); font-size: 8.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sa-dim); margin-left: 8px;
}
@media (max-width: 700px){
  .sa-fallstudie{ grid-template-columns: 1fr; gap: var(--sa-1); }
}

.sa-ref{ display: flex; align-items: center; gap: var(--sa-4); padding: var(--sa-4) 0; border-bottom: 1px solid var(--sa-rule); }
.sa-ref img{ height: 22px; width: auto; max-width: 120px; object-fit: contain; flex: none; }
.sa-ref__fig{ margin-left: auto; text-align: right; }
.sa-ref__fig b{ display: block; font-size: 17px; font-weight: 600; color: var(--sa-ink); font-variant-numeric: tabular-nums; }
.sa-ref__fig span{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-dim); }

/* ===========================================================================
   MATERIAL — Raster und Korn
   Die beiden Texturen, die laut Recherche nie ins Verspielte kippen.
   Immer als absolut positionierte Geschwisterebene unter dem Inhalt,
   immer mit pointer-events:none, das Raster immer radial ausmaskiert.
   =========================================================================== */
/* Die Maske laesst das Raster zu den Raendern hin verschwinden. Sie wirkt nur
   am Bildschirm - in der PDF-Ausgabe rendert sie nicht (siehe Wasserzeichen).
   Im PDF laeuft das Raster deshalb bis zur Kante. Das ist so gewollt und faellt
   nicht auf, weil .sa-vignette die Raender ohnehin absetzt - und die Vignette
   ist als Verlauf gebaut und kommt durch. Auf hellem Papier fliegt das Raster
   im Druck komplett raus, dort gaebe es keine Vignette, die es auffaengt. */
.sa-grid-dots{
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--sa-dot) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 30%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 100% at 50% 30%, #000 55%, transparent 100%);
}
.sa-grid-lines{
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--sa-dot) 1px, transparent 1px),
    linear-gradient(90deg, var(--sa-dot) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(130% 120% at 50% 42%, #000 52%, transparent 96%);
          mask-image: radial-gradient(130% 120% at 50% 42%, #000 52%, transparent 96%);
}
/* Deckkraft 0.04 bis 0.06. Nie hoeher - darueber wird aus Material ein Effekt. */
.sa-grain{
  position: absolute; inset: 0; pointer-events: none;
  opacity: .05; mix-blend-mode: soft-light; background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Traegerflaeche fuer die Materialebenen.
   ACHTUNG, teuer gelernt: hier stand urspruenglich
     .sa-surface > *:not(...){ position: relative }
   um den Inhalt ueber die Ebenen zu heben. Diese Regel hat eine hoehere
   Spezifitaet als jede Klasse in einer Vorlage und hat damit JEDES absolut
   gesetzte Element in den normalen Fluss zurueckgezwungen - Logos und
   Beweiszeilen sind aus Bannern verschwunden. Nachgewiesen am LinkedIn-Banner.
   Richtig ist der umgekehrte Weg: die Ebenen nach hinten legen, den Inhalt
   in Ruhe lassen. isolation begrenzt das z-index:-1 auf diese Flaeche, damit
   die Ebenen nicht hinter den eigenen Grund rutschen. */
.sa-surface{ position: relative; overflow: hidden; isolation: isolate; }
.sa-surface > .sa-grid-dots,
.sa-surface > .sa-grid-lines,
.sa-surface > .sa-grain,
.sa-surface > .sa-watermark,
.sa-surface > .sa-vignette{ z-index: -1; }

/* ---------------------------------------------------------------------------
   WASSERZEICHEN — die ins Blatt gesenkte Bildmarke.
   Die Marke ist hier als Maske eingebettet, nicht als Dateiverweis: tokens.css
   funktioniert dadurch in jedem Repo, auch ohne den logos-Ordner daneben.
   Die Farbe kommt aus background-color, laesst sich also frei setzen.

   Regeln: EIN Wasserzeichen pro Fläche. Es laeuft immer ueber genau eine Kante
   hinaus (nie freistehend zentriert - das wirkt wie ein vergessenes Logo).
   Deckkraft 0.03 bis 0.06; es darf nie unter Fliesstext oder unter einer
   Datenzeile liegen, nur unter Weissraum.
   --------------------------------------------------------------------------- */
/* ACHTUNG, teuer gelernt: hier stand urspruenglich mask-image mit einer
   Daten-URI. Das sieht am Bildschirm richtig aus, aber CSS-MASKEN RENDERN IN
   DER CHROME-PDF-AUSGABE NICHT - das Wasserzeichen wird dort zu einem nackten
   gefuellten Rechteck. Nachgewiesen an der ersten PDF-Ausgabe des Einseiters.
   Deshalb background-image statt Maske: Hintergrundbilder kommen durch.
   Preis dafuer: die Farbe steckt in der Grafik, es braucht also je Grund eine
   eigene Fassung. Das ist der richtige Tausch.
   DIESELBE FALLE gilt fuer alles andere - nie eine CSS-Maske in etwas
   einbauen, das als PDF rausgeht. */
.sa-watermark{
  position: absolute; pointer-events: none;
  --sa-wm-size: 62%;
  width: var(--sa-wm-size); aspect-ratio: 90 / 40;
  right: -6%; bottom: -8%;                   /* Standard: rechts unten anschneiden */
  opacity: .05;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 40' fill='%23E8EDF3'%3E%3Crect x='0' y='30' width='10' height='10'/%3E%3Crect x='20' y='30' width='10' height='10'/%3E%3Crect x='60' y='30' width='10' height='10'/%3E%3Crect x='80' y='30' width='10' height='10'/%3E%3Crect x='40' y='0' width='10' height='40'/%3E%3C/svg%3E");
}
.sa-paper .sa-watermark, .sa-paper.sa-watermark{
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 40' fill='%2314171A'%3E%3Crect x='0' y='30' width='10' height='10'/%3E%3Crect x='20' y='30' width='10' height='10'/%3E%3Crect x='60' y='30' width='10' height='10'/%3E%3Crect x='80' y='30' width='10' height='10'/%3E%3Crect x='40' y='0' width='10' height='40'/%3E%3C/svg%3E");
}
/* Quadratische Fassung, fuer hohe Formate und Deckblaetter. */
.sa-watermark--kompakt{
  aspect-ratio: 1 / 1; right: auto; left: -10%; bottom: -12%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='%23E8EDF3'%3E%3Crect x='0' y='40' width='10' height='10'/%3E%3Crect x='40' y='40' width='10' height='10'/%3E%3Crect x='20' y='0' width='10' height='50'/%3E%3C/svg%3E");
}
.sa-paper .sa-watermark--kompakt{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='%2314171A'%3E%3Crect x='0' y='40' width='10' height='10'/%3E%3Crect x='40' y='40' width='10' height='10'/%3E%3Crect x='20' y='0' width='10' height='50'/%3E%3C/svg%3E");
}
/* Im Signalton statt neutral. Sparsam - das Gruen hat pro Ansicht nur einen Auftritt,
   und ein Wasserzeichen ist selten der Ort, an dem man ihn ausgibt. */
.sa-watermark--signal{
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 40' fill='%2300C97B'%3E%3Crect x='0' y='30' width='10' height='10'/%3E%3Crect x='20' y='30' width='10' height='10'/%3E%3Crect x='60' y='30' width='10' height='10'/%3E%3Crect x='80' y='30' width='10' height='10'/%3E%3Crect x='40' y='0' width='10' height='40'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   STATUSSTEMPEL — fuer Angebote und Dokumente vor der Freigabe.
   Diagonal, Rahmen, Mono-Versalien. Bleibt im Druck stehen (im Gegensatz zu
   Raster und Korn), weil ein Entwurf auch ausgedruckt als Entwurf erkennbar
   sein muss.
   --------------------------------------------------------------------------- */
.sa-stamp{
  position: absolute; top: 50%; left: 50%; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-24deg);
  padding: var(--sa-3) var(--sa-6);
  border: 3px solid currentColor; border-radius: var(--sa-radius);
  font-family: var(--sa-font-mono); font-size: 28px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--sa-ink); opacity: .12; white-space: nowrap;
}

/* ===========================================================================
   LAYOUT
   Der asymmetrische Split ist das Arbeitspferd: Aussage schmal links,
   Beweis breit rechts.
   =========================================================================== */
.sa-split{ display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--sa-7); align-items: start; }
@media (max-width: 860px){ .sa-split{ grid-template-columns: 1fr; gap: var(--sa-6); } }

/* Kein Bodenspalt: Seite als Flex-Spalte mit space-between, jede Sektion
   samt ihrem Label EIN Flex-Kind. Sonst sammelt sich der Restplatz an einer
   Stelle und erzeugt das haessliche Band ueber dem Fuss. */
.sa-page{ min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; }

/* ===========================================================================
   ZUGAENGLICHKEIT UND DRUCK
   =========================================================================== */
/* Sichtbarer Fokus. Radius 0, damit er zum System passt. */
.sa-paper :focus-visible, .sa-instrument :focus-visible{
  outline: 2px solid var(--sa-signal); outline-offset: 2px; border-radius: 0;
}
/* Das BFSG gilt seit dem 28.06.2025. Reduzierte Bewegung ist keine Kuer. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                          transition-duration: .01ms !important; }
}
/* Weiche Schatten bandieren in macOS-PDF-Betrachtern zu harten grauen
   Rechtecken hinter jeder Karte. Dieses System nutzt ohnehin keine Schatten -
   die Regel bleibt als Sicherung fuer alles, was jemand spaeter dazubaut. */
/* ---------------------------------------------------------------------------
   DRUCK UND PDF
   Kurz, was in einer Chrome-PDF ankommt und was nicht:

     kommt an   Volltonflächen, Verläufe (linear und radial), Haarlinien,
                Bilder und Daten-URIs, Mischmodi, transparente Füllungen
     fällt weg  backdrop-filter, und weiche box-shadows bandieren zu harten
                grauen Rechtecken hinter jeder Karte

   Deshalb ist das Nachtglas ausschliesslich aus Verläufen und Linien gebaut.
   Es gibt in diesem System keinen Schatten, den der Druck vermissen könnte.
   --------------------------------------------------------------------------- */
@page{ margin: 0; }

@media print{
  *, *::before, *::after{ box-shadow: none !important; }

  /* Auf hellem Papier fliegen Raster und Korn raus - sie kosten dort nur
     Druckqualität. Auf dunklem Grund SIND sie das Material und bleiben:
     das Korn ist der grösste Unterschied zwischen "dunkles PDF" und
     "teures dunkles PDF". */
  .sa-paper .sa-grain,
  .sa-paper .sa-grid-dots,
  .sa-paper .sa-grid-lines{ display: none !important; }

  /* Wasserzeichen und Statusstempel bleiben: ein Entwurf muss auch auf Papier
     als Entwurf erkennbar sein, und das Wasserzeichen ist Teil des Bogens. */
  .sa-watermark, .sa-stamp{ display: block !important; }

  /* Nichts zerreissen, was zusammengehört. */
  .sa-glass, .sa-feed, .sa-panel, .sa-marked, .sa-ref{
    break-inside: avoid; page-break-inside: avoid;
  }
  .sa-display{ break-after: avoid; page-break-after: avoid; }
  .sa-seite-umbruch{ break-before: page; page-break-before: always; }
}

/* Ein Bogen. Für PDF-gebundene Dokumente: exakte Seitenhöhe, damit unten kein
   Rest zusammenläuft. Format über --sa-bogen-h setzen (A4 quer, A4 hoch, frei). */
.sa-bogen{
  --sa-bogen-w: 794px;   /* A4 hoch bei 96 dpi */
  --sa-bogen-h: 1123px;
  width: var(--sa-bogen-w); min-height: var(--sa-bogen-h);
  margin: 0 auto; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.sa-bogen--quer{ --sa-bogen-w: 1123px; --sa-bogen-h: 794px; }