/* Hell und nüchtern, dichte Tabellen. Ein Betreiber sieht diese Seite
   mehrmals täglich — Weissraum, der beim ersten Besuch angenehm wirkt,
   kostet ihn ab dem zwanzigsten Mal Scrollarbeit. */
:root {
    --grund: #ffffff;
    --flaeche: #f6f7f8;
    --linie: #d8dce0;
    --text: #1b1f23;
    --gedaempft: #5b636b;
    --akzent: #16507d;
    --gruen: #1a7f37;
    --gelb: #9a6700;
    --rot: #b3261e;
    --zeile: 1.9rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font: 14px/1.45 system-ui, "Segoe UI", Roboto, sans-serif;
}

.kopf {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0 1rem;
    height: 2.75rem;
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
}
.kopf .marke { font-weight: 600; text-decoration: none; color: var(--akzent); }
.kopf nav { display: flex; gap: 1rem; }
.kopf nav a { color: var(--text); text-decoration: none; }
.kopf nav a:hover { text-decoration: underline; }
.kopf .abmelden { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.kopf .wer { color: var(--gedaempft); }

main { padding: 1rem; max-width: 76rem; }

h1 { font-size: 1.25rem; margin: 0 0 .75rem; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: .25rem .5rem; border-bottom: 1px solid var(--linie); text-align: left; line-height: var(--zeile); height: var(--zeile); }
th { background: var(--flaeche); font-weight: 600; white-space: nowrap; }
tbody tr:hover { background: var(--flaeche); }
td.zahl, th.zahl { text-align: right; }

form.dicht { display: grid; grid-template-columns: 11rem minmax(0, 26rem); gap: .4rem .75rem; align-items: center; }
form.dicht label { color: var(--gedaempft); }
input[type=text], input[type=password], input[type=number], select, textarea {
    width: 100%; padding: .25rem .4rem; border: 1px solid var(--linie);
    border-radius: 2px; font: inherit; background: var(--grund); color: var(--text);
}
button { padding: .25rem .75rem; border: 1px solid var(--linie); border-radius: 2px; background: var(--flaeche); font: inherit; cursor: pointer; }
button:hover { background: #eceef0; }
button.gefahr { border-color: var(--rot); color: var(--rot); }

.meldung { padding: .4rem .6rem; border-left: 3px solid var(--akzent); background: var(--flaeche); margin: 0 0 1rem; }
.meldung-fehler { border-left-color: var(--rot); }
.meldung-warnung { border-left-color: var(--gelb); }
.meldung-erfolg { border-left-color: var(--gruen); }

.gedaempft { color: var(--gedaempft); }
.zugangsdaten { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .04em; }

.anmeldung { max-width: 28rem; margin: 3rem auto; }
.anmeldung form.dicht { margin: 1rem 0; }

/* Dichte Tabelle: Zeilenhöhe so knapp, dass ein Bildschirm viele Anlagen
   zeigt, aber mit Trennlinien, damit die Zeile beim Querlesen hält. */
.dicht { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.dicht th, .dicht td { padding: 0.28rem 0.6rem; border-bottom: 1px solid #e3e6ea; text-align: left; }
.dicht th { font-weight: 600; color: #4a5158; border-bottom: 2px solid #c9ced4; white-space: nowrap; }
.dicht tbody tr:hover { background: #f4f7fa; }
.dicht .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* IP-Adressen, Konto- und Pfadangaben: dieselbe Zeichenbreite, damit
   Ziffernkolonnen untereinander stehen und Verwechsler auffallen. */
.einbreit { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

.kopfzeile { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.kopfzeile h1 { margin: 0; }
.brotkrumen { margin: 0 0 0.4rem; font-size: 0.85rem; color: #6b7280; }
.leer { color: #6b7280; font-style: italic; }
.notiz { white-space: pre-wrap; background: #f7f8fa; border-left: 3px solid #c9ced4; padding: 0.5rem 0.8rem; }

.daten { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 1.2rem; margin: 0.6rem 0 1.2rem; }
.daten dt { color: #6b7280; }
.daten dd { margin: 0; }

.satz { display: grid; gap: 0.9rem; max-width: 34rem; }
.satz label { display: grid; gap: 0.2rem; }
.satz label > span { font-weight: 600; }
.satz label em { color: #b42318; font-style: normal; }
.satz input, .satz select, .satz textarea {
    padding: 0.35rem 0.5rem; border: 1px solid #c9ced4; border-radius: 3px;
    font: inherit; background: #fff;
}
.satz small { color: #6b7280; font-size: 0.82rem; }
.satz .hinweise { margin: 0.2rem 0 0; padding-left: 1.1rem; color: #6b7280; font-size: 0.82rem; }
.feldfehler { color: #b42318; font-size: 0.85rem; font-weight: 600; }

.knopfreihe { display: flex; gap: 0.6rem; align-items: center; }
.knopf, button {
    display: inline-block; padding: 0.35rem 0.9rem; border: 1px solid #2f6feb;
    border-radius: 3px; background: #2f6feb; color: #fff; font: inherit;
    text-decoration: none; cursor: pointer;
}
.knopf.still { background: #fff; color: #2f3b46; border-color: #c9ced4; }
.gefahr { margin-top: 2rem; }
.gefahr button { background: #fff; color: #b42318; border-color: #e0b4b0; }

.meldung { padding: 0.5rem 0.8rem; border-radius: 3px; border: 1px solid; }
.meldung-info { background: #eef4ff; border-color: #c7d9f7; color: #22406e; }
.meldung-erfolg { background: #eefaf1; border-color: #bfe6cb; color: #1c5433; }
.meldung-warnung { background: #fff8e6; border-color: #f0dca8; color: #7a5a10; }
.meldung-fehler { background: #fdf0ef; border-color: #f0c2bd; color: #8a231b; }

/* Passwortkarte: gross, einbreit, mit Abstand — sie wird vom Bildschirm
   abgelesen und an einem Gerät eingetippt, oft im Freien. */
.passwortkarte { border: 1px solid #c9ced4; border-radius: 4px; padding: 1rem; max-width: 34rem; display: grid; gap: 0.6rem; }
.passwort {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1.6rem; letter-spacing: 0.06em; word-break: break-all;
    background: #f7f8fa; padding: 0.6rem 0.8rem; border-radius: 3px;
}
.passwortkarte button { justify-self: start; }
.warnhinweis { background: #fff8e6; border: 1px solid #f0dca8; color: #7a5a10; padding: 0.5rem 0.8rem; border-radius: 3px; max-width: 34rem; }
.knopfreihe form { margin: 0; }

/* Ampel */
.punkt {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    vertical-align: -.05rem;
    margin-right: .35rem;
    border: 1px solid rgba(0, 0, 0, .25);
}

.punkt-gruen { background: #2f8f46; }
.punkt-gelb  { background: #d9a300; }
.punkt-rot   { background: #c2331f; }

.zaehlerzeile {
    margin: 0 0 1rem;
    color: #444;
}

.zaehlerzeile .punkt {
    margin-left: 1.2rem;
}

.zaehlerzeile .punkt:first-child {
    margin-left: 0;
}

.stand {
    margin: 0;
    color: #666;
    font-size: .85rem;
}

.uebersicht tbody + tbody tr.gruppe th {
    padding-top: 1.1rem;
}

tr.gruppe th {
    text-align: left;
    font-size: .95rem;
    border-bottom: 1px solid #ccc;
    padding-bottom: .2rem;
}

.gruppenzaehler {
    font-weight: normal;
    font-size: .8rem;
    color: #555;
    margin-left: .8rem;
}

.gruppenzaehler .punkt {
    margin-left: .8rem;
}

th.schmal, td.schmal {
    width: 1.6rem;
    padding-right: 0;
}

/* Sichtbar für Vorleseprogramme, unsichtbar am Bildschirm. Nicht
   display:none — das nähme den Text auch dem Vorleser weg. */
.nurvorleser {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Benutzer und Protokoll */
.hinweis {
    max-width: 46rem;
    margin: 0 0 1rem;
    color: #444;
    font-size: .9rem;
}

.eigenes {
    color: #777;
    font-style: italic;
}

.filter {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-size: .9rem;
}

td.klein {
    font-size: .8rem;
    color: #444;
    word-break: break-word;
}

.protokoll td {
    vertical-align: top;
}

/* Elemente, die auf Papier keinen Platz haben: Navigation, Kopf, Abmelden-
   Knopf und alles, was mit .nurbildschirm markiert ist (z. B. der
   Kopieren-Knopf neben dem Passwort). Im Browser sichtbar, im Druck weg. */
.nurbildschirm { }

@media print {
    .kopf,
    nav,
    .abmelden,
    .nurbildschirm { display: none; }
}


/* ---------------------------------------------------------------------------
   Dashboard

   Dichter als eine Werbeseite und ruhiger als die Tabellen daneben. Die
   Leitidee: der Zustand soll sich aus der Entfernung ablesen lassen, ohne
   dass man eine Zahl liest. Deshalb traegt jede Kachel ihre Farbe an der
   Kante und nicht als Punkt — eine Kante sieht man im Augenwinkel, einen
   Punkt von 0.7rem nicht.

   Keine Schatten, keine Farbverlaeufe, keine Animation. Ein Betreiber
   oeffnet diese Seite, wenn ein Kunde anruft; was sich bewegt, kostet ihn
   dann Aufmerksamkeit, die er gerade nicht hat.
   --------------------------------------------------------------------------- */

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: .75rem;
    margin: .8rem 0 1.6rem;
    max-width: 62rem;
}

.kachel {
    border: 1px solid var(--linie);
    /* Die Kante traegt den Zustand. 4px, damit sie auch auf einem
       schlechten Bildschirm und aus zwei Metern Entfernung steht. */
    border-left: 4px solid var(--linie);
    border-radius: 3px;
    padding: .7rem .9rem .8rem;
    background: var(--grund);
}

.kachel-gruen { border-left-color: var(--gruen); }
.kachel-gelb  { border-left-color: var(--gelb); }
.kachel-rot   { border-left-color: var(--rot); }
.kachel-neutral { border-left-color: var(--linie); }

.kachelkopf {
    margin: 0 0 .35rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gedaempft);
}

/* Das Zustandswort neben dem Titel. Es sagt dasselbe wie die Kante — und
   das ist Absicht: wer Farben nicht unterscheiden kann, liest hier. */
.marke {
    flex: none;
    padding: .05rem .4rem;
    border-radius: 2px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    border: 1px solid;
}

.marke-gruen { color: var(--gruen); border-color: #bfe6cb; background: #eefaf1; }
.marke-gelb  { color: var(--gelb);  border-color: #f0dca8; background: #fff8e6; }
.marke-rot   { color: var(--rot);   border-color: #f0c2bd; background: #fdf0ef; }

.kachel .wert {
    margin: 0 0 .3rem;
    font-size: 1.45rem;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

/* Die Einheit kleiner als die Zahl: '65' ist der Messwert, '% belegt' ist
   die Beschriftung, und beide gleich gross zu setzen hiesse, die Zahl zu
   verstecken. */
.kachel .einheit {
    font-size: .85rem;
    color: var(--gedaempft);
}

.fussnote {
    margin: 0;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--gedaempft);
}

.fussnote.breit { max-width: 46rem; margin: .4rem 0 1.4rem; }

.kachelwarnung {
    margin: .55rem 0 0;
    padding: .3rem .5rem;
    border-left: 3px solid var(--gelb);
    background: #fff8e6;
    color: #7a5a10;
    font-size: .82rem;
}

/* Die Fuellung des Datentraegers. Innerhalb der Kachel, weil sie zur Zahl
   darueber gehoert und nicht zum Abschnitt. */
.fuellung {
    height: .35rem;
    margin: 0 0 .45rem;
    border-radius: 2px;
    background: var(--flaeche);
    overflow: hidden;
}

.fuellung-wert { display: block; height: 100%; }
.fuellung-gruen { background: #2f8f46; }
.fuellung-gelb  { background: #d9a300; }
.fuellung-rot   { background: #c2331f; }

/* Der Lieferbalken. Drei Abschnitte, deren Breiten sich auf 100 summieren —
   gerechnet wird das in der Steuerung, nicht hier. */
.balken {
    display: flex;
    height: .7rem;
    max-width: 46rem;
    margin: .2rem 0 .5rem;
    border-radius: 3px;
    overflow: hidden;
    background: var(--flaeche);
}

.balken span { display: block; }
.balken-gruen { background: #2f8f46; }
.balken-gelb  { background: #d9a300; }
.balken-rot   { background: #c2331f; }

/* Die Befundtabelle. Die Zahl steht vorn und gross: sie ist das, wonach
   jemand sucht, und eine Zahl am Zeilenende findet das Auge erst nach dem
   Text, den es gar nicht lesen wollte. */
.befunde { max-width: 62rem; }
.befunde th.schmalzahl, .befunde td.gross { width: 4.5rem; }

.befunde td.gross {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    vertical-align: top;
    padding-top: .3rem;
}

/* Die globale Regel fuer th/td setzt line-height auf --zeile (1.9rem), damit
   die dichten Tabellen daneben eine feste Zeilenhoehe haben. Hier bricht der
   Erklaertext um, und dann stehen die Zeilen eines Absatzes so weit
   auseinander, dass sie nicht mehr als Absatz zu lesen sind. */
.befunde td, .befunde th {
    vertical-align: top;
    line-height: 1.45;
    padding-top: .45rem;
    padding-bottom: .45rem;
}

.befunde tr.faellig td.gross { color: var(--rot); font-weight: 600; }

/* Null ist kein Befund. Eine Zeile, die nichts meldet, soll die Zeilen
   daneben nicht um Aufmerksamkeit bringen — aber auch nicht verschwinden:
   wer sie sucht, soll sie finden. */
.befunde tr.ruhig td { color: var(--gedaempft); }
.befunde tr.ruhig td.gross { color: #9aa1a8; }

/* Der Bestand. Vier Zahlen nebeneinander statt einer Definitionsliste —
   sie werden ueberflogen, nicht gelesen. */
.zahlenreihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .5rem;
    max-width: 62rem;
    margin: .5rem 0 1.4rem;
}

.zahlenfeld {
    border: 1px solid var(--linie);
    border-radius: 3px;
    padding: .55rem .7rem;
    background: var(--flaeche);
}

.zahlenwert {
    display: block;
    font-size: 1.35rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.zahlenname {
    display: block;
    font-size: .8rem;
    color: var(--gedaempft);
}

/* Die Aktionstabelle. Der Riegel macht die Verteilung sichtbar, ohne dass
   jemand drei Zahlen im Kopf ins Verhaeltnis setzen muss. Kopfzeile
   entfaellt: drei Spalten, deren Bedeutung sich aus einem Blick ergibt. */
.aktionen { max-width: 46rem; }
.aktionen td { border-bottom: 1px solid #eceef0; }
.aktionen td.riegelzelle { width: 55%; padding-right: 1rem; }
.aktionen td.zahl { width: 3.5rem; font-variant-numeric: tabular-nums; }

.riegel {
    display: block;
    height: .45rem;
    min-width: 2px;
    border-radius: 2px;
    background: #c3cdd6;
}

/* Einstellungen: der Prüfknopf steht unter seinem Formular, abgesetzt —
   er prüft das Gespeicherte, nicht das, was gerade im Formular steht. */
.pruefen { margin: 0.8rem 0 1.6rem; }
.pruefen small { color: #6b7280; font-size: 0.82rem; }
.warnhinweis pre { white-space: pre-wrap; background: #fff; padding: 0.5rem; border: 1px solid #f0dca8; }

/* Breiten der Balken als Klassen, nicht als style-Attribut.

   nginx schickt „Content-Security-Policy: default-src 'self'", und das gilt
   auch für Styles: ein style="width: 37%" wird verworfen, und jeder Balken
   bliebe leer — auf dem Server, nicht mit php -S, das den Kopf nicht setzt.
   So fiel es bis zum 30.10.2026 niemandem auf (Durchsicht). Die Richtlinie
   aufzuweichen ('unsafe-inline') hiesse, sie für jede künftige Einschleusung
   mit aufzuweichen. Die Prozentwerte sind ganze Zahlen von 0 bis 100;
   tests/InhaltsrichtlinieTest.php bindet, dass keine Ansicht ein
   style-Attribut trägt. */
.breite-0 { width: 0%; }
.breite-1 { width: 1%; }
.breite-2 { width: 2%; }
.breite-3 { width: 3%; }
.breite-4 { width: 4%; }
.breite-5 { width: 5%; }
.breite-6 { width: 6%; }
.breite-7 { width: 7%; }
.breite-8 { width: 8%; }
.breite-9 { width: 9%; }
.breite-10 { width: 10%; }
.breite-11 { width: 11%; }
.breite-12 { width: 12%; }
.breite-13 { width: 13%; }
.breite-14 { width: 14%; }
.breite-15 { width: 15%; }
.breite-16 { width: 16%; }
.breite-17 { width: 17%; }
.breite-18 { width: 18%; }
.breite-19 { width: 19%; }
.breite-20 { width: 20%; }
.breite-21 { width: 21%; }
.breite-22 { width: 22%; }
.breite-23 { width: 23%; }
.breite-24 { width: 24%; }
.breite-25 { width: 25%; }
.breite-26 { width: 26%; }
.breite-27 { width: 27%; }
.breite-28 { width: 28%; }
.breite-29 { width: 29%; }
.breite-30 { width: 30%; }
.breite-31 { width: 31%; }
.breite-32 { width: 32%; }
.breite-33 { width: 33%; }
.breite-34 { width: 34%; }
.breite-35 { width: 35%; }
.breite-36 { width: 36%; }
.breite-37 { width: 37%; }
.breite-38 { width: 38%; }
.breite-39 { width: 39%; }
.breite-40 { width: 40%; }
.breite-41 { width: 41%; }
.breite-42 { width: 42%; }
.breite-43 { width: 43%; }
.breite-44 { width: 44%; }
.breite-45 { width: 45%; }
.breite-46 { width: 46%; }
.breite-47 { width: 47%; }
.breite-48 { width: 48%; }
.breite-49 { width: 49%; }
.breite-50 { width: 50%; }
.breite-51 { width: 51%; }
.breite-52 { width: 52%; }
.breite-53 { width: 53%; }
.breite-54 { width: 54%; }
.breite-55 { width: 55%; }
.breite-56 { width: 56%; }
.breite-57 { width: 57%; }
.breite-58 { width: 58%; }
.breite-59 { width: 59%; }
.breite-60 { width: 60%; }
.breite-61 { width: 61%; }
.breite-62 { width: 62%; }
.breite-63 { width: 63%; }
.breite-64 { width: 64%; }
.breite-65 { width: 65%; }
.breite-66 { width: 66%; }
.breite-67 { width: 67%; }
.breite-68 { width: 68%; }
.breite-69 { width: 69%; }
.breite-70 { width: 70%; }
.breite-71 { width: 71%; }
.breite-72 { width: 72%; }
.breite-73 { width: 73%; }
.breite-74 { width: 74%; }
.breite-75 { width: 75%; }
.breite-76 { width: 76%; }
.breite-77 { width: 77%; }
.breite-78 { width: 78%; }
.breite-79 { width: 79%; }
.breite-80 { width: 80%; }
.breite-81 { width: 81%; }
.breite-82 { width: 82%; }
.breite-83 { width: 83%; }
.breite-84 { width: 84%; }
.breite-85 { width: 85%; }
.breite-86 { width: 86%; }
.breite-87 { width: 87%; }
.breite-88 { width: 88%; }
.breite-89 { width: 89%; }
.breite-90 { width: 90%; }
.breite-91 { width: 91%; }
.breite-92 { width: 92%; }
.breite-93 { width: 93%; }
.breite-94 { width: 94%; }
.breite-95 { width: 95%; }
.breite-96 { width: 96%; }
.breite-97 { width: 97%; }
.breite-98 { width: 98%; }
.breite-99 { width: 99%; }
.breite-100 { width: 100%; }

/* ---------------------------------------------------------------------------
   Messwerte im Dashboard

   Je Anlage eine Karte: drei Zahlen, die man neben die Anzeige am Logger
   hält, und die Leistungskurve des Tages. Die Kurve zeichnet der Server als
   SVG (Status\Tageskurve); hier stehen nur Farbe und Strich, denn die
   Inhaltsrichtlinie lässt keine style-Attribute zu.

   Eine Reihe, eine Farbe: die Akzentfarbe als 2px-Linie, darunter dieselbe
   Farbe als Hauch (10 %). Gitter haarfein und durchgezogen. Das
   Fadenkreuz erscheint beim Überfahren, ohne Skript: jeder Zeitpunkt hat
   ein unsichtbares Rechteck über die volle Höhe, und der Wert steht in
   seinem title.
   --------------------------------------------------------------------------- */

.messkarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: .75rem;
    margin: .6rem 0 1.6rem;
    max-width: 62rem;
}

.messkarte {
    min-width: 0;
    border: 1px solid var(--linie);
    border-radius: 3px;
    padding: .7rem .9rem .6rem;
    background: var(--grund);
}

.messkopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.messkopf h3 {
    margin: 0 0 .45rem;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.messzahlen {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.4rem;
    margin: 0 0 .35rem;
}

.messzahl {
    margin: 0;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: .25rem;
    align-items: baseline;
    justify-content: start;
}

/* Proportionale Ziffern: eine grosse Einzelzahl mit Tabellenziffern sieht
   gesperrt aus. Tabellenziffern nur in Spalten (siehe .zahl). */
.messwert {
    font-size: 1.45rem;
    line-height: 1.15;
}

.messzahl .einheit {
    font-size: .85rem;
    color: var(--gedaempft);
}

.messname {
    grid-column: 1 / -1;
    font-size: .75rem;
    color: var(--gedaempft);
}

.kurve {
    display: block;
    width: 100%;
    height: auto;
    margin: .5rem 0 .25rem;
}

.kurve .gitter {
    stroke: var(--linie);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    shape-rendering: crispEdges;
}

.kurve .achse {
    fill: var(--gedaempft);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.kurve .flaeche {
    fill: var(--akzent);
    fill-opacity: .1;
}

.kurve .linie {
    fill: none;
    stroke: var(--akzent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Punkte tragen einen Ring in der Grundfarbe, damit sie auf der Linie
   stehen bleiben. */
.kurve .einzeln,
.kurve .ende {
    fill: var(--akzent);
    stroke: var(--grund);
    stroke-width: 2;
}

.kurve .treffer rect {
    fill: transparent;
}

.kurve .treffer .faden {
    stroke: var(--gedaempft);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    visibility: hidden;
}

.kurve .treffer:hover .faden {
    visibility: visible;
}

.messgeraete {
    margin: .4rem 0 .2rem;
    font-size: .82rem;
}

details.werte {
    margin: .3rem 0 0;
    font-size: .82rem;
}

details.werte summary {
    cursor: pointer;
    color: var(--gedaempft);
}

details.werte table {
    margin-top: .3rem;
}