/* Ver-/Entschlüsselungswerkzeug und Schlüsselkarten des Kryptographie-Themas. */
.rsa-tool { --rsa-accent: #167c75; --rsa-border: #cbd5dd; min-width: 0; }
.rsa-mode { display: flex; gap: 1.2rem; flex-wrap: wrap; padding: .6rem .8rem; margin-bottom: 1rem;
  background: #eef2f5; border: 1px solid var(--rsa-border); border-radius: 6px; }
.rsa-mode label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-weight: 600; }

.rsa-texts { display: grid; gap: .8rem; margin-bottom: .8rem; }
.rsa-field { display: block; }
.rsa-label { display: block; font-weight: 600; margin-bottom: .25rem; font-size: .9rem; }
.rsa-field textarea { width: 100%; box-sizing: border-box; padding: .5rem .6rem; font-family: ui-monospace,
  SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; border: 1.5px solid var(--rsa-border);
  border-radius: 6px; resize: vertical; }
/* Das Feld, das gerade das Ergebnis zeigt, ist erkennbar keine Eingabe. */
.rsa-field.rsa-output textarea { background: #f4f7f8; color: #34474f; }
.rsa-field.rsa-output .rsa-label::after { content: " (Ergebnis)"; font-weight: 400; color: #667078; }

.rsa-keys { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.rsa-keys label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.rsa-keys input { width: 6rem; padding: .4rem .5rem; border: 1.5px solid var(--rsa-border); border-radius: 6px; }

.rsa-steps { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .6rem; }
.rsa-step { display: grid; grid-template-columns: minmax(11rem, auto) 1fr; gap: .8rem; align-items: start; }
.rsa-step button { white-space: nowrap; }
.rsa-numbers { display: block; min-height: 1.6rem; padding: .35rem .6rem; background: #f4f7f8;
  border: 1px solid var(--rsa-border); border-radius: 6px; font-family: ui-monospace, SFMono-Regular,
  Menlo, Consolas, monospace; font-size: .9rem; overflow-wrap: anywhere; }

.rsa-message { min-height: 1.4rem; font-size: .9rem; color: #54636c; margin: 0 0 .5rem; }
.rsa-message-error { color: #a12b2b; font-weight: 600; }

.rsa-alphabet summary { cursor: pointer; font-weight: 600; }
.rsa-alphabet-table { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rsa-alphabet-table th, .rsa-alphabet-table td { text-align: center; padding: .15rem .35rem; min-width: 1.6rem; }
.rsa-alphabet-table th { background: #f8f9fa; font-size: .75rem; color: #667078; font-weight: 600; }

@media (max-width: 640px) {
  .rsa-step { grid-template-columns: 1fr; }
}

/* --- Schlüsselkarten im Lehrerbereich --- */
.key-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.key-card { border: 2px dashed #94a3ad; border-radius: 8px; padding: .9rem 1rem; break-inside: avoid; }
.key-card h3 { margin: 0 0 .5rem; font-size: 1rem; }
.key-card .key-name { border-bottom: 1px solid #94a3ad; min-height: 1.4rem; margin-bottom: .6rem; font-size: .85rem; color: #667078; }
.key-card dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; margin: 0 0 .6rem; }
.key-card dt { font-weight: 600; }
.key-card dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.key-card .key-cipher { padding: .4rem .5rem; background: #f4f7f8; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; overflow-wrap: anywhere; }

@media print {
  /* Auf dem Ausdruck bleiben nur die Karten stehen: Die Loesungsuebersicht und die
     Navigation duerfen nicht mit an die Klasse gehen. */
  .no-print, .no-print *, nav, header, footer, .navbar, .flash-messages { display: none !important; }
  body, .main-content { margin: 0; padding: 0; background: #fff; }
  .print-area { display: block !important; margin: 0; padding: 0; }
  .key-cards { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .key-card { border-color: #333; page-break-inside: avoid; }
  a[href]::after { content: none !important; }
}

/* --- Farbcode des RSA-Arbeitsblattes --- */
.rsa-public  { color: #c00000; font-weight: 600; }
.rsa-private { color: #2f5597; font-weight: 600; }
.rsa-phi     { color: #4a7d2c; font-weight: 600; }
.rsa-secret  { color: #b35309; font-weight: 600; }
.rsa-legend { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 1rem; font-size: .85rem; }
.rsa-legend span { padding: .15rem .55rem; border: 1px solid currentColor; border-radius: 12px; }
.rsa-procedure { padding-left: 1.4rem; }
.rsa-procedure > li { margin-bottom: .8rem; }
.rsa-aside { color: #667078; font-size: .9rem; margin: .25rem 0 0; }
.rsa-links summary { cursor: pointer; font-weight: 600; color: #54636c; font-size: .9rem; }
.rsa-formulas td { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; }

/* --- Schrittweise Rechenaufgabe --- */
.rsa-task-intro { color: #54636c; margin-top: -.4rem; }
.rsa-given { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0 1rem; }
.rsa-given-item { display: inline-flex; align-items: baseline; gap: .4rem; padding: .3rem .7rem;
  background: #eef2f5; border: 1px solid #cbd5dd; border-radius: 6px; }
.rsa-given-label { font-size: .85rem; color: #54636c; }
.rsa-given-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; }
.rsa-given-item.rsa-secret .rsa-given-value { color: #b35309; }
.rsa-given-item.rsa-public .rsa-given-value { color: #c00000; }

.rsa-calc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.rsa-calc-step { padding: .7rem .9rem; border: 1px solid #dbe1ea; border-left: 4px solid #cbd5dd;
  border-radius: 6px; background: #fff; }
.rsa-calc-step.is-correct { border-left-color: #28a745; background: #f4fbf6; }
.rsa-calc-step.is-wrong { border-left-color: #dc3545; background: #fdf6f6; }
.rsa-calc-label { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rsa-calc-caption { font-weight: 600; }
.rsa-calc-input { width: 11rem; padding: .35rem .5rem; border: 1.5px solid #cbd5dd; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; }
.rsa-calc-input:read-only { background: #eaf6ee; border-color: #28a745; color: #1c6b33; font-weight: 600; }
.rsa-calc-buttons { display: inline-flex; gap: .35rem; }
.rsa-calc-check, .rsa-calc-rule-toggle { width: 2rem; height: 2rem; border-radius: 50%;
  border: 1.5px solid #cbd5dd; background: #fff; cursor: pointer; font-size: 1rem; line-height: 1;
  color: #34474f; }
.rsa-calc-check:hover { background: #eaf6ee; border-color: #28a745; color: #1c6b33; }
.rsa-calc-rule-toggle { font-weight: 700; }
.rsa-calc-rule-toggle:hover, .rsa-calc-rule-toggle.is-open { background: #fff6e0; border-color: #d9a441; }
.rsa-calc-rule { margin: .5rem 0 0; padding: .5rem .7rem; background: #fff9ec; border-left: 3px solid #d9a441;
  border-radius: 0 4px 4px 0; font-size: .9rem; color: #5a4a22; }
.rsa-calc-feedback { margin: .45rem 0 0; font-size: .9rem; color: #a12b2b; }
.rsa-calc-step.is-correct .rsa-calc-feedback { color: #1c6b33; }
.rsa-progress { margin-top: .7rem; font-size: .9rem; color: #54636c; }
.rsa-progress-done { color: #1c6b33; font-weight: 600; }
.rsa-progress-error { color: #a12b2b; font-weight: 600; }

.rsa-euclid { min-width: 24rem; }
.rsa-euclid th { text-align: center; width: 16.6%; }
.rsa-euclid td { padding: .2rem; text-align: center; }
.rsa-euclid-given { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700; background: #eef2f5; }
.rsa-euclid-input { width: 100%; min-width: 3.2rem; box-sizing: border-box; padding: .3rem .2rem;
  text-align: center; border: 1.5px solid #dbe1ea; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rsa-euclid-input.is-correct { background: #eaf6ee; border-color: #28a745; color: #1c6b33; font-weight: 600; }
.rsa-euclid-input.is-wrong { background: #fdeaea; border-color: #dc3545; }
/* Das oberste y wird fuer d nicht gebraucht. */
.rsa-euclid td.rsa-euclid-unused { background: repeating-linear-gradient(135deg, #f1f3f5 0 6px, #e6e9ec 6px 12px); }
/* Aus dem obersten x ergibt sich d: Farbe des privaten Schluessels. */
.rsa-euclid td.rsa-euclid-d { background: #e8eef9; box-shadow: inset 0 0 0 2px #2f5597; position: relative; }
.rsa-euclid-d-tag { display: block; font-size: .75rem; font-weight: 700; color: #2f5597; line-height: 1.2; }
.rsa-euclid th.rsa-euclid-help-col, .rsa-euclid td.rsa-euclid-help-col { width: 2.6rem; background: transparent;
  border-color: transparent; }

/* Hilfe fuer x und y: gleiche Farbe fuer Zelle und Variable. */
.rsa-euclid td.rsa-hl-xalt { background: #f1e8ff; }
.rsa-euclid td.rsa-hl-yalt { background: #e0f4f7; }
.rsa-euclid td.rsa-hl-qneu { background: #fde7f1; }
.rsa-euclid td.rsa-hl-target { background: #fff6e0; }
.rsa-euclid td.rsa-hl-xalt .rsa-euclid-input { border: 2px solid #7c3aed; color: #5b21b6; background: #f1e8ff; }
.rsa-euclid td.rsa-hl-yalt .rsa-euclid-input { border: 2px solid #0e7490; color: #155e75; background: #e0f4f7; }
.rsa-euclid td.rsa-hl-qneu .rsa-euclid-input { border: 2px solid #be185d; color: #9d174d; background: #fde7f1; }
.rsa-euclid td.rsa-hl-target .rsa-euclid-input { border: 2px dashed #b7791f; background: #fff6e0; }
.rsa-euclid td[class*="rsa-hl-"] .rsa-euclid-input { font-weight: 700; }

/* Hilfe fuer a, b, q, r: altes b -> neues a (tuerkis), alter Rest -> neues b (orange). */
.rsa-euclid td.rsa-hl-pass-b { background: #ccfbf1; }
.rsa-euclid td.rsa-hl-pass-r { background: #ffedd5; }
.rsa-euclid td.rsa-hl-pass-b .rsa-euclid-input { border: 2px solid #0d9488; color: #115e59; background: #ccfbf1; }
.rsa-euclid td.rsa-hl-pass-r .rsa-euclid-input { border: 2px solid #c2410c; color: #9a3412; background: #ffedd5; }
.rsa-euclid td.rsa-euclid-given.rsa-hl-pass-b { color: #115e59; box-shadow: inset 0 0 0 2px #0d9488; }
.rsa-euclid td.rsa-euclid-given.rsa-hl-pass-r { color: #9a3412; box-shadow: inset 0 0 0 2px #c2410c; }
.rsa-var-passb { background: #ccfbf1; color: #115e59; }
.rsa-var-passr { background: #ffedd5; color: #9a3412; }
.rsa-euclid-formula-note { font-family: system-ui, sans-serif; font-size: .85rem; color: #54636c; }

.rsa-euclid-help { margin-top: .6rem; padding: .6rem .8rem; background: #fcfcfd; border: 1px solid #dbe1ea;
  border-left: 3px solid #d9a441; border-radius: 0 6px 6px 0; }
.rsa-euclid-help-intro { margin: 0 0 .4rem; font-size: .88rem; color: #54636c; }
.rsa-euclid-formula { margin: .3rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.rsa-euclid-help-more { margin-top: .4rem; }
.rsa-euclid-help-filled { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed #dbe1ea; }
.rsa-var { padding: .05rem .35rem; border-radius: 4px; font-weight: 700; }
.rsa-var-xalt { background: #f1e8ff; color: #5b21b6; }
.rsa-var-yalt { background: #e0f4f7; color: #155e75; }
.rsa-var-qneu { background: #fde7f1; color: #9d174d; }
.rsa-var-target { background: #fff6e0; color: #8a5a11; outline: 2px dashed #b7791f; outline-offset: -2px; }
.rsa-slot { width: 4.5rem; padding: .3rem .3rem; text-align: center; border: 2px solid; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; }
.rsa-slot-xalt { border-color: #7c3aed; background: #f1e8ff; }
.rsa-slot-yalt { border-color: #0e7490; background: #e0f4f7; }
.rsa-slot-qneu { border-color: #be185d; background: #fde7f1; }
.rsa-slot.is-correct { box-shadow: 0 0 0 2px #28a745; }
.rsa-slot.is-wrong { box-shadow: 0 0 0 2px #dc3545; }
.rsa-solution td { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }

@media (max-width: 640px) {
  .rsa-calc-input { width: 100%; }
}
.rsa-calc-note { margin: 0 0 .5rem; padding: .4rem .7rem; background: #eef2f5;
  border-left: 3px solid #167c75; border-radius: 0 4px 4px 0; font-size: .9rem; color: #34474f; }

/* --- Freier RSA-Rechner (zahlenweise) --- */
.rsa-number-tool .rsa-keys input { width: 9rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rsa-number-tool .rsa-texts { margin-bottom: .8rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.rsa-number-tool .rsa-field input { width: 100%; max-width: 18rem; box-sizing: border-box; padding: .5rem .6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem;
  border: 1.5px solid #cbd5dd; border-radius: 6px; }
.rsa-number-tool .rsa-field.rsa-output input { background: #f4f7f8; color: #34474f; font-weight: 600; }
.rsa-num-table caption { caption-side: top; text-align: left; font-family: system-ui, sans-serif; font-size: .85rem;
  color: #54636c; padding-bottom: .25rem; }
.rsa-num-message { min-height: 1.4rem; font-size: .9rem; color: #54636c; margin: .2rem 0 .6rem; }
.rsa-num-message-error { color: #a12b2b; font-weight: 600; }
.rsa-num-message-warn { color: #8a5a11; font-weight: 600; }
.rsa-num-table { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }
.rsa-num-table th { text-align: left; }
.rsa-num-table td { padding: .25rem .5rem; overflow-wrap: anywhere; }
.rsa-num-table tbody tr:nth-child(even) { background: #f8f9fa; }
/* Zahlen ab N lassen sich nicht eindeutig zurueckrechnen. */
.rsa-num-oversized { background: #fff6e0 !important; }
.rsa-num-oversized td:first-child::after { content: " ≥ N"; color: #8a5a11; font-weight: 600; }

/* --- Einwegfunktion: Hinweg, Rueckweg, Falltuer --- */
.rsa-factor-tool { min-width: 0; }
.factor-presets, .hash-samples { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: .6rem 0 1rem; }
.factor-presets-label { font-size: .85rem; color: #54636c; font-weight: 600; }
.factor-preset-buttons, .hash-sample-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.factor-panels { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.factor-panel { border: 1px solid #dbe1ea; border-radius: 6px; padding: .8rem .9rem; background: #fff; }
.factor-panel h4 { margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.factor-step-number { display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #167c75; color: #fff;
  font-size: .85rem; font-weight: 700; flex: 0 0 1.6rem; }
.factor-hint { margin: 0 0 .7rem; font-size: .88rem; color: #54636c; }
.factor-inputs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.factor-inputs label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.factor-inputs input { width: 8rem; max-width: 100%; padding: .35rem .5rem; border: 1.5px solid #cbd5dd;
  border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* Lange Moduln muessen ganz sichtbar sein; deshalb liegt jedes Feld auf einer eigenen Zeile. */
.factor-inputs label { flex: 1 1 100%; }
.factor-inputs input { flex: 1 1 auto; width: auto; min-width: 0; }
.factor-output { display: block; margin-top: .7rem; font-size: .9rem; overflow-wrap: anywhere; }
.factor-output:empty { margin-top: 0; }
.factor-line { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .2rem .7rem;
  padding: .15rem 0; }
.factor-line-label { color: #54636c; }
.factor-line-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600; overflow-wrap: anywhere; }
.factor-good .factor-line-value { color: #1c6b33; }
.factor-error { color: #a12b2b; font-weight: 600; }
.factor-warn .factor-line-value { color: #8a5a11; }
.factor-scale { margin-top: 1rem; padding: .8rem .9rem; background: #eef2f5; border: 1px solid #cbd5dd;
  border-radius: 6px; }
.factor-scale h4 { margin: 0 0 .3rem; font-size: 1rem; }
.factor-scale label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600;
  flex-wrap: wrap; }
.factor-scale select { padding: .3rem .4rem; border: 1.5px solid #cbd5dd; border-radius: 6px; }

/* --- Hash-Werkzeug --- */
.hash-pair { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.hash-side { border: 1px solid #dbe1ea; border-radius: 6px; padding: .8rem .9rem; background: #fff; }
.hash-side textarea { width: 100%; box-sizing: border-box; padding: .5rem .6rem; border-radius: 6px;
  border: 1.5px solid #cbd5dd; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem; resize: vertical; }
.hash-results { display: grid; grid-template-columns: auto 1fr; gap: .3rem .7rem; margin: .8rem 0 .5rem; }
.hash-results dt { font-size: .85rem; color: #54636c; }
.hash-results dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem; overflow-wrap: anywhere; }
.hash-results .hash-sum { font-size: 1.1rem; font-weight: 700; color: #167c75; }
.hash-breakdown summary { cursor: pointer; font-weight: 600; font-size: .85rem; color: #54636c; }
.hash-table { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.hash-table th, .hash-table td { text-align: center; padding: .15rem .35rem; min-width: 1.8rem; }
.hash-table th { background: #f8f9fa; }
.hash-alphabet { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.hash-alphabet th, .hash-alphabet td { text-align: center; padding: .2rem .35rem; }
.hash-verdict { margin: .9rem 0 .3rem; font-size: .9rem; color: #54636c; }
.hash-verdict-warn { color: #8a5a11; font-weight: 600; }

/* --- Durchklickbare Beispiele --- */
.crypto-flow { min-width: 0; }
.flow-cast { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0 1rem; }
.flow-person { flex: 1 1 10rem; display: grid; gap: .1rem; padding: .6rem .8rem; border-radius: 6px;
  border: 1px solid #dbe1ea; background: #fff; }
.flow-person-mallory { border-color: #e0a8a8; background: #fdf6f6; }
.flow-person-icon { font-size: 1.4rem; }
.flow-person-name { font-weight: 700; }
.flow-person-role, .flow-person-keys { font-size: .8rem; color: #667078; }
.flow-person-keys { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin-top: .25rem; }
.flow-setup { display: grid; gap: .7rem; margin-bottom: .8rem; }
.flow-setup textarea, .flow-setup input[type="text"] { width: 100%; box-sizing: border-box;
  padding: .5rem .6rem; border: 1.5px solid #cbd5dd; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; }
.flow-controls { display: grid; gap: .5rem; }
.flow-toggle { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.flow-toggle[hidden], .flow-tamper-field[hidden], .flow-session[hidden] { display: none; }
.flow-session { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.flow-session .rsa-label { margin: 0; }
.flow-session-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700; letter-spacing: .08em; padding: .3rem .6rem; background: #eef5f4;
  border: 1px solid #b9d5d2; border-radius: 6px; }
.flow-message-error { min-height: 1.2rem; margin: .2rem 0; font-size: .9rem; }
.flow-message-error.is-error { color: #a12b2b; font-weight: 600; }
.flow-steps { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .7rem; }
.flow-step { border: 1px solid #dbe1ea; border-left: 4px solid #cbd5dd; border-radius: 6px;
  padding: .7rem .9rem; background: #fff; }
.flow-tone-attack, .flow-tone-bad { border-left-color: #dc3545; background: #fdf6f6; }
.flow-tone-good { border-left-color: #28a745; background: #f4fbf6; }
.flow-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.flow-step-number { display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #34474f; color: #fff;
  font-size: .85rem; font-weight: 700; flex: 0 0 1.6rem; }
.flow-step-actor { font-weight: 700; }
.flow-step-title { color: #34474f; }
.flow-step-text { margin: 0 0 .5rem; font-size: .92rem; color: #54636c; }
.flow-rows { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .25rem .8rem; margin: 0; }
.flow-rows dt { font-size: .85rem; color: #667078; }
.flow-rows dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem; overflow-wrap: anywhere; }
.flow-value-public { color: #c00000; font-weight: 600; }
.flow-value-private { color: #2f5597; font-weight: 600; }
.flow-value-attack { color: #a12b2b; font-weight: 600; }
.flow-value-hash { color: #6b3fa0; }
.flow-value-sign { color: #167c75; font-weight: 600; }
.flow-value-session { color: #8a5a11; font-weight: 600; }
.flow-value-good { color: #1c6b33; font-weight: 600; }
.flow-value-bad { color: #a12b2b; font-weight: 600; }
.flow-verdict { margin-top: 1rem; padding: .8rem 1rem; border-radius: 6px; border-left: 4px solid #167c75;
  background: #eef5f4; }
.flow-verdict.is-ok { border-left-color: #28a745; background: #f4fbf6; }
.flow-verdict.is-broken { border-left-color: #dc3545; background: #fdf6f6; }
.flow-verdict h4 { margin: 0 0 .4rem; }
.flow-verdict p { margin: 0; }
.flow-goals { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.flow-goals .is-ok { color: #1c6b33; }
.flow-goals .is-broken { color: #a12b2b; }

/* --- Ablaufbilder der Kapitel 4 bis 6 --- */
.crypto-diagram { display: block; width: 100%; max-width: 760px; height: auto; margin: 1rem 0; }
.crypto-diagram .cd-box { fill: #f8f9fa; stroke: #94a3ad; stroke-width: 1.5; }
.crypto-diagram .cd-party { fill: #eef5f4; stroke: #167c75; stroke-width: 1.5; }
.crypto-diagram .cd-attack { fill: #fdf6f6; stroke: #c00000; stroke-width: 1.5; }
.crypto-diagram .cd-arrow { stroke: #54636c; stroke-width: 1.6; fill: none; marker-end: url(#cd-head); }
.crypto-diagram .cd-dashed { stroke-dasharray: 5 4; }
/* Verbindung ohne Richtung, etwa der Vergleich zweier Fingerabdruecke. */
.crypto-diagram .cd-link { stroke: #54636c; stroke-width: 1.6; fill: none; stroke-dasharray: 4 3; }
.crypto-diagram .cd-label { font-size: 11px; fill: #34474f; }
.crypto-diagram .cd-small { font-size: 9.5px; fill: #667078; }
.crypto-diagram .cd-title { font-size: 12px; font-weight: 700; fill: #293a44; }
.crypto-diagram .cd-public { fill: #c00000; font-size: 10px; font-weight: 700; }
.crypto-diagram .cd-private { fill: #2f5597; font-size: 10px; font-weight: 700; }
.crypto-diagram .cd-session { fill: #8a5a11; font-size: 10px; font-weight: 700; }
.crypto-diagram .cd-hash { fill: #6b3fa0; font-size: 10px; font-weight: 700; }

@media (max-width: 640px) {
  .flow-rows { grid-template-columns: 1fr; }
  .factor-line { grid-template-columns: 1fr; }
}