/* =================================================================================================
   Einzelne Seitenregeln.

   Geladen NACH theme.css (siehe Pages/Shared/_Layout.cshtml). Hier steht KEIN Farbwert, sondern
   ausschliesslich ein Token aus theme.css - jede Regel gilt damit in beiden Designs, ohne zweimal
   geschrieben zu werden. Wer hier eine Farbe braucht, die es noch nicht gibt, legt sie dort an
   (siehe CLAUDE.md, Abschnitt "Design").
   ================================================================================================= */

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* -------------------------------------------------------------------------------------------------
   Der Aufklapp-Pfeil der eingefaerbten Akkordeon-Zeilen

   Bootstrap zeichnet ihn als Hintergrundbild mit fest eingebackener Farbe. Eine eingefaerbte Zeile
   braucht ihn deshalb in ihrer eigenen Schriftfarbe - frueher stand dafuer dieselbe SVG dreimal
   in dieser Datei, jedes Mal mit einem Hex-Wert darin.

   Jetzt als MASKE und nicht als Bild: Die Flaeche traegt currentColor, die SVG gibt nur die Form
   vor. Der Pfeil nimmt damit von selbst die Schriftfarbe der Zeile an, in beiden Designs und ohne
   einen einzigen Farbwert hier. Die Farbe IN der Datenadresse ist keine Gestaltungsentscheidung:
   Eine Maske wertet nur den Alphakanal aus, der Farbton darin ist beliebig.
   ------------------------------------------------------------------------------------------------- */
:root {
  --pfeil: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button.from-ecr::after,
.accordion-button.from-ecr:not(.collapsed)::after,
.accordion-button.from-pt::after,
.accordion-button.from-pt:not(.collapsed)::after,
.accordion-button.has-outcome::after,
.accordion-button.has-outcome:not(.collapsed)::after,
.accordion-button.has-error::after,
.accordion-button.has-error:not(.collapsed)::after {
  background-image: none;
  background-color: currentColor;
  -webkit-mask-image: var(--pfeil);
  mask-image: var(--pfeil);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Die Richtung eines Telegramms, ohne ein Wort dafuer zu brauchen (siehe /Simulator und
   /SnifferAnalysis): Was von der Kasse kommt, steht links, was vom Terminal kommt, rechts - jede
   Seite mit ihrem eigenen Ton, wie die zwei Seiten einer Chat-Oberflaeche. Die Ausrichtung
   allein traegt die Aussage schon; der Ton macht sie auch dann lesbar, wenn eine Zeile so lang
   ist, dass sie beide Seiten ausfuellt.

   Absichtlich keine der Bedeutungsfarben: --bad ist der Fehler, --warn der Hinweis, --teal der
   gemeldete Vorgangsausgang. --ecr und --pt sind zwei ruhige Toene, die sich voneinander
   unterscheiden und sonst nichts sagen.

   Beide Zustaende gesetzt, aus demselben Grund wie unten bei .has-error: Bootstrap faerbt eine
   aufgeklappte Kopfzeile selbst. Die Textfarbe wird mitgesetzt, weil Bootstrap sie im
   aufgeklappten Zustand mitzieht - auf dem eigenen Ton saehe das nach einer weiteren Aussage aus. */
.accordion-button.from-ecr,
.accordion-button.from-ecr:not(.collapsed) {
  color: var(--ink);
  background-color: var(--ecr);
}

.accordion-button.from-pt,
.accordion-button.from-pt:not(.collapsed) {
  color: var(--ink);
  background-color: var(--pt);
}

/* Ein gemeldeter Vorgangsausgang: eine Ablehnung oder ein Abbruch. Protokollarisch ist alles in
   Ordnung, und deshalb ausdruecklich NICHT rot - beim Durchsehen eines Mitschnitts ist es aber die
   gesuchte Stelle, und ohne Markierung muss man jede Zeile dafuer aufklappen.

   --teal und --teal-soft sind dieselben Toene, die .alert-info traegt (siehe die Abbildung in
   theme.css) - also der Ton, in dem die Statuszeile die gemeldeten Vorgangsausgaenge zaehlt. */
.accordion-button.has-outcome,
.accordion-button.has-outcome:not(.collapsed) {
  color: var(--teal);
  background-color: var(--teal-soft);
}

/* Die Reihenfolge dieser drei Bloecke ist die Rangfolge der Aussagen, und sie steht ABSICHTLICH so:
   Richtungston, darueber der Vorgangsausgang, darueber der Protokollfehler. Alle drei haben
   dieselbe Spezifitaet, und bei gleicher Spezifitaet gewinnt die spaetere Regel - wer hier
   umsortiert, aendert damit, welche Farbe eine Zeile traegt, die mehr als eines davon ist. */

/* Eine Telegramm- oder Vorgangs-Kopfzeile mit Protokollfehler (siehe /Simulator und
   /SnifferAnalysis). Vorher trug nur das umgebende .accordion-item einen roten Rahmen - der ist
   zwischen zwei Dutzend eingeklappten Zeilen praktisch unsichtbar, und beim Durchsehen eines
   Mitschnitts ist genau diese eine Zeile die gesuchte.

   Beide Zustaende muessen gesetzt werden: Bootstrap faerbt eine aufgeklappte Kopfzeile selbst
   (.accordion-button:not(.collapsed)). Die Regeln hier haben dieselbe Spezifitaet und stehen nach
   Bootstrap in der Ladereihenfolge des Layouts, deshalb gewinnen sie ohne !important. Die Farben
   sind die von .alert-danger, damit die Kopfzeile und der Befundkasten darunter nicht zwei
   verschiedene Rot zeigen.

   Der Fokusring kommt fuer alle Zeilen aus theme.css und traegt dort eine Farbe, die auf jeder
   Flaeche steht - frueher brachte jede eingefaerbte Zeile hier ihren eigenen mit. */
.accordion-button.has-error,
.accordion-button.has-error:not(.collapsed) {
  color: var(--bad);
  background-color: var(--bad-soft);
}

/* Eine Befundzeile im Kurzprotokoll auf /SnifferAnalysis, die in die Gliederung darueber
   zurueckfuehrt (siehe renderSummary dort).

   Eine Schaltflaeche und kein <span> mit Klickbehandlung: Die Zeile loest eine Aktion aus, sie ist
   kein Verweis auf eine Adresse - und sie soll mit der Tastatur erreichbar sein und wie alles
   andere im Portal einen Fokusring bekommen.

   Dafuer muessen ihr saemtliche Schaltflaechen-Eigenschaften abgenommen werden: Sie steht in einem
   <pre>, und das Kurzprotokoll auf dem Bildschirm soll Zeichen fuer Zeichen derselbe Block sein wie
   der, den der Kunde exportiert - gleiche Schrift, gleiche Spalten, gleiche Zeilenabstaende.

   display: inline und NICHT block, obwohl eine Zeile breit anzuklicken bequemer waere: Die Zeilen
   des Blocks sind durch Zeilenumbrueche getrennt, und ein Block-Element braechte seinen eigenen
   Umbruch mit - zwischen den Befunden stuende dann je eine Leerzeile, die im Export nicht steht.
   white-space: pre erhaelt die fuehrenden Leerzeichen, auf denen die Spalten beruhen. */
.summary-jump {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  line-height: inherit;
  text-align: left;
  white-space: pre;
  cursor: pointer;
}

.summary-jump:hover,
.summary-jump:focus-visible {
  background-color: var(--warn-soft);
}

/* Das Ziel eines Sprungs aus dem Kurzprotokoll, direkt nach dem Scrollen (siehe revealTarget in
   SnifferAnalysis.cshtml). Ein vergaengliches Aufblitzen: Nach gut anderthalb Sekunden ist nichts
   mehr davon zu sehen, denn es ist eine Antwort auf einen Klick und kein Zustand der Zeile.

   Violett, und das ist der einzige Ton auf dieser Seite, der nichts bedeutet: Rot gehoert dem
   Protokollfehler, Blaugruen dem gemeldeten Vorgangsausgang, Gelb dem Hinweis, und die zwei
   ruhigen Toene tragen die Richtung. Haette das Aufblitzen eine dieser Farben, stuende fuer
   anderthalb Sekunden eine falsche Aussage an der Zeile.

   Ein Ring und KEIN Hintergrund, obwohl ein Hintergrund naeher laege: Das Ziel ist entweder ein
   .accordion-item, dessen Flaeche vollstaendig von der eigenen Kopfzeile verdeckt wird (die traegt
   ihren Ton aus .has-error/.has-outcome), oder ein Befundkasten, dessen Hintergrund selbst die
   Aussage ist. In beiden Faellen uebermalte ein Hintergrund genau das, was die Zeile sagen soll -
   der Ring legt sich darum, statt sich daraufzulegen.

   position/z-index, damit der Ring nicht unter dem naechsten Geschwister-Element verschwindet:
   Accordion-Eintraege liegen dicht aneinander, und der folgende bringt seinen eigenen Hintergrund
   mit. */
.trace-hit {
  position: relative;
  z-index: 3;
  animation: trace-hit-flash 1.6s ease-out 1;
}

/* Erst ein Viertel der Zeit voll stehen lassen, dann ausblenden - ein Ring, der sofort zu
   verblassen beginnt, ist am Ende einer weichen Scroll-Fahrt schon halb fort.

   --vio-rgb und nicht --vio: Der Ring verblasst ueber die Deckkraft, und dafuer braucht es die
   drei Zahlen einzeln (siehe die Begruendung bei den RGB-Tripeln in theme.css). */
@keyframes trace-hit-flash {
  0%, 25% {
    box-shadow: 0 0 0 0.25rem rgba(var(--vio-rgb), 0.8);
  }

  100% {
    box-shadow: 0 0 0 0.25rem rgba(var(--vio-rgb), 0);
  }
}

/* ---------------------------------------------------------------------------------------------
   Das Kundenhandbuch (siehe Pages/Handbuch).

   Markdig erzeugt nacktes HTML: <table> ohne Klasse, <pre> ohne Rahmen. Bootstrap faerbt davon
   nichts ein, weil seine Tabellen- und Code-Stile an .table bzw. an einer Utility haengen. Die
   paar Regeln hier stehen deshalb in der Seite statt im Markdown - eine Klasse in jede
   Markdown-Tabelle zu schreiben waere Markup in einer Quelle, die ausdruecklich keines enthalten
   soll (die Umwandlung laeuft mit DisableHtml).
   --------------------------------------------------------------------------------------------- */
.handbuch-teil pre {
  background-color: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem;
  overflow-x: auto;
}

.handbuch-teil table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

.handbuch-teil th,
.handbuch-teil td {
  border: 1px solid var(--line);
  padding: 0.4rem 0.6rem;
  vertical-align: top;
}

.handbuch-teil thead th {
  background-color: var(--row);
  text-align: left;
}

.handbuch-teil blockquote {
  border-left: 0.25rem solid var(--line);
  padding-left: 0.75rem;
  color: var(--mute);
}

/* Auf schmalen Geraeten darf eine Tabelle fuer sich scrollen, statt die ganze Seite breiter zu
   machen - eine Schnellreferenz mit vier Spalten passt dort sonst nicht. */
@media (max-width: 767.98px) {
  .handbuch-teil table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Warnkästen im Handbuch (`> [!WARNING]`, `> [!IMPORTANT]`, siehe HandbookLibrary.Pipeline).

   Die Klassennamen setzt Markdig fest - `markdown-alert` plus `markdown-alert-<art>` -, sie lassen
   sich von dort aus nicht auf `alert alert-warning` umstellen. Hier stehen deshalb dieselben
   Tokens, die theme.css für .alert-warning und .alert-info verwendet: Ein Kasten im Handbuch soll
   aussehen wie ein Kasten auf einer Portalseite, sonst wirkt er wie ein Fremdkörper aus einer
   anderen Oberfläche.

   WARNING ist gelb und IMPORTANT blaugrün, und das ist Absicht: Gelb trägt im ganzen Portal den
   Hinweis, auf den man achten muss (Live-Anzeige, Analyse), Blaugrün die Einordnung. Rot bleibt
   dem Protokollfehler - ein Satz über Sorgfalt beim Maskieren ist kein Fehler.

   Der linke Balken ist das, was den Kasten beim Überfliegen findbar macht; Bootstrap-Alerts haben
   ihn nicht, aber sie stehen auch allein auf einer Seite und nicht zwischen zwanzig Absätzen. */
.markdown-alert {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-left-width: 0.25rem;
  border-radius: 12px;
}

/* Der letzte Absatz im Kasten bringt sonst einen Abstand mit, der unterhalb des Rahmens als
   leerer Streifen stehen bleibt. */
.markdown-alert > :last-child {
  margin-bottom: 0;
}

.markdown-alert-title {
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.markdown-alert-warning {
  color: var(--warn);
  background-color: var(--warn-soft);
  border-color: var(--warn-line);
}

.markdown-alert-important {
  color: var(--teal);
  background-color: var(--teal-soft);
  border-color: var(--teal-line);
}

/* Ein Kasten kann einen Link enthalten (etwa auf die Seite „API-Schlüssel"). Der trägt hier
   ausdrücklich NICHT den Akzent, sondern die kräftigste Textfarbe mit Unterstreichung: Die
   getönten Gründe sind je Kasten andere, und ein Akzentgelb darauf wäre im hellen Design nicht
   mehr sicher zu lesen. --ink erreicht auf jedem der weichen Gründe mehr als 4,5:1 (so sind sie
   in theme.css gewählt), und die Unterstreichung sagt auch ohne Farbe, dass es ein Link ist. */
.markdown-alert a {
  color: var(--ink);
  text-decoration: underline;
}

/* Testsystem-Banner (Site:Staging, siehe _Layout). Ganz oben in jeder Seite, über der Kopfzeile.
   Nur vorhandene Tokens: Hinweis = --warn auf --warn-soft, im dunklen wie im hellen Design durch
   ThemeContrastTests abgedeckt (Paar warn/warn-soft). Das Wort „Testsystem" steht im Text, die
   Bedeutung hängt also nicht am Farbton. */
.testsystem-banner {
  padding: 0.5rem 1rem;
  text-align: center;
  font-weight: 600;
  color: var(--warn);
  background-color: var(--warn-soft);
  border-bottom: 1px solid var(--warn-line);
}