/* Die Redaktion. Baut auf stil.css auf und aendert nur, was hier anders ist.

   Zwei Dinge unterscheiden sie von der oeffentlichen Seite:

     1. Die Flaeche ist breit. Wer Zahlen nebeneinander liest, braucht Platz -
        die 880px der Suchseite sind fuer eine Spalte Text gedacht.
     2. Unter allem liegt ein Arbeitsblatt mit einer technischen Zeichnung.

   Farben, Schrift und Wortmarke bleiben, wie sie sind. */

.dfs-red {
  --blatt: #FBFCFD;
  --blatt-linie: #E7ECF2;
  background: var(--blatt);
  min-height: 100vh; min-height: 100dvh;
}

/* 1720px, nicht 1240. Auf einem 1920er Schirm blieben links und rechts je
   340 Pixel leer, waehrend die Eintragsliste ihre Beschreibungen abschnitt.
   Die Redaktion ist ein Arbeitsplatz und keine Lesespalte - hier gilt nicht,
   was fuer die oeffentliche Seite gilt (dort begrenzt `--spalte` auf 880px,
   weil Fliesstext ab etwa 90 Zeichen schwer zu lesen ist; eine Tabelle hat
   dieses Problem nicht). */
.dfs-red-breit {
  width: 100%; max-width: 1720px; margin: 0 auto; padding: 0 28px;
}

/* ---------- Die Zeichnung im Hintergrund ---------- */

/* Sie liegt hinter allem, beruehrt nichts und faengt keine Klicks ab.
   `color` traegt die Linienfarbe: Das SVG zeichnet mit `currentColor`, also
   reicht ein Wert an dieser Stelle, um die ganze Zeichnung umzufaerben. */
.dfs-flux-grund {
  position: fixed; inset: 0; z-index: 0;
  display: grid; place-items: center;
  pointer-events: none;
  color: var(--sek);
  opacity: .07;
}
.dfs-flux {
  width: min(1100px, 92vw);
  height: auto;
}

/* Alles Sichtbare liegt darueber. */
.dfs-red-blatt { position: relative; z-index: 1; }
/* Der Kopf liegt ÜBER dem Blatt: Das aufgeklappte Kontomenü ragt hinein, und
   mit gleichem z-index gewann das Blatt, weil es später im Markup steht. */
.dfs-red-kopf { position: relative; z-index: 60; }

/* ---------- Kopf ---------- */

.dfs-red-kopf { background: rgba(251, 252, 253, .88); }

/* Zeichen und Name als EINE Marke.
   Vorher standen die Wortmarke von Dental Fast Support, ein Schild
   „Redaktion" und darunter der Reiter „Übersicht" nebeneinander - drei
   Beschriftungen auf zwei Zentimetern, von denen zwei dasselbe zu sagen
   schienen. Das violette DFR-Zeichen sagt, wo man ist; das Wort daneben, was
   es ist. Mehr braucht es oben links nicht. */
.dfs-red-marke {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text); text-decoration: none;
}
.dfs-red-marke img { display: block; border-radius: 6px; }
.dfs-red-marke span {
  font-size: 16.5px; font-weight: 400; letter-spacing: -.015em; white-space: nowrap;
}

.dfs-red-reiter { display: flex; gap: 2px; margin-left: 26px; }
.dfs-red-reiter a {
  padding: 8px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--leise);
}
.dfs-red-reiter a:hover { color: var(--text); background: var(--kante2); }
.dfs-red-reiter a.an { color: var(--sek); background: var(--sek-tint); }

.dfs-red-wer { font-size: 13.5px; font-weight: 600; color: var(--leise); }

/* ---------- Blatt ---------- */

.dfs-red-blatt { padding: 28px 0 64px; }

.dfs-red-titel {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px;
}
.dfs-red-unter { color: var(--leise); font-size: 14px; margin: 0 0 22px; }

.dfs-red-abschnitt {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--leise); margin: 30px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.dfs-red-abschnitt::after {
  content: ""; flex: 1; height: 1px; background: var(--kante);
}

/* ---------- Kacheln ---------- */

.dfs-red-kacheln {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.dfs-red-kachel {
  background: var(--karte); border: 1px solid var(--kante); border-radius: 14px;
  padding: 16px 18px;
}
.dfs-red-zahl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 27px; font-weight: 600; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.dfs-red-was { font-size: 13px; font-weight: 600; color: var(--leise); margin-top: 3px; }
.dfs-red-hinweis { font-size: 12px; color: #9AAABE; margin-top: 7px; line-height: 1.4; }

/* Kacheln, die eine Luecke zeigen. Orange ist in dieser Anwendung die
   Handlungsfarbe - eine Luecke ist etwas zu tun, kein Fehler. Rot bleibt
   Status und waere hier falsch (DESIGN.md). */
.dfs-red-kachel.offen { border-color: #F3D3BF; background: #FFFBF8; }
.dfs-red-kachel.offen .dfs-red-zahl { color: var(--prim-tief); }

/* ---------- Tabelle ---------- */

.dfs-red-tabelle {
  width: 100%; border-collapse: collapse;
  background: var(--karte); border: 1px solid var(--kante); border-radius: 14px;
  overflow: hidden;
}
.dfs-red-tabelle th, .dfs-red-tabelle td {
  padding: 11px 14px; text-align: left; font-size: 13.5px;
  border-bottom: 1px solid var(--kante2);
}
.dfs-red-tabelle th {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--leise); background: #F7F9FB;
}
.dfs-red-tabelle tr:last-child td { border-bottom: 0; }
.dfs-red-tabelle tbody tr:hover td { background: #F7F9FB; }
.dfs-red-tabelle .zahl {
  text-align: right; font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.dfs-red-tabelle .leise { color: var(--leise); font-weight: 500; }
.dfs-red-tabelle a { font-weight: 600; }

/* Ein Balken in der Zeile - macht Groessenverhaeltnisse sichtbar, ohne dass
   man Zahlen vergleichen muss. */
.dfs-red-balken {
  height: 6px; border-radius: 99px; background: var(--kante2); overflow: hidden;
  min-width: 60px;
}
.dfs-red-balken > span { display: block; height: 100%; background: var(--sek); opacity: .55; }

/* ---------- Zwei Spalten ---------- */

.dfs-red-zwei {
  display: grid; gap: 20px;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
@media (max-width: 900px) {
  .dfs-red-zwei { grid-template-columns: minmax(0, 1fr); }
  .dfs-red-reiter { margin-left: 12px; }
  .dfs-red-wer { display: none; }
}

/* ---------- Anmeldung ---------- */

.dfs-red-tor {
  min-height: 70vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; z-index: 1; padding: 20px;
}
.dfs-red-torkarte {
  background: var(--karte); border: 1px solid var(--kante); border-radius: 20px;
  padding: 34px 34px 30px; max-width: 440px; width: calc(100% - 32px);
  box-shadow: 0 12px 34px rgba(15, 35, 64, .08);
}

/* Die Filterzeile ueber der Eintragsliste. Ein gewoehnliches Formular:
   Auswahlfeld, Suchfeld, ein Knopf zum Anwenden - und daneben die beiden
   Wege, auf denen etwas Neues entsteht. */
.dfs-red-filter {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin: 0 0 20px;
}
.dfs-red-filter .dfs-cv-wahl { flex: 1 1 200px; max-width: 320px; }
.dfs-red-filter .dfs-knopf { margin-top: 0; }
/* Die beiden Verweise oeffnen in einem neuen Tab und sehen deshalb aus wie
   Knoepfe - `.dfs-knopf` an einem `<a>` braucht die Ausrichtung von Hand. */
.dfs-red-filter a.dfs-knopf { display: inline-flex; align-items: center; }

/* ---------- Geraetewahl mit eingebauter Suche ---------- */

/* Ein `<select>` stand hier und war an zwei Stellen falsch: Es sieht in jedem
   Betriebssystem anders aus, und bei 33 Geraeten sucht man darin, statt zu
   tippen. Jetzt ein Aufklapper mit einem Suchfeld darin - und jedes Geraet
   ist ein Verweis, also funktioniert die Wahl auch ohne Skript. */
.dfs-wahl { position: relative; min-width: 260px; }
.dfs-wahl-was {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--leise); margin-bottom: 6px;
}
.dfs-wahl-auf > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 12px;
  border: 1px solid var(--kante); border-radius: 10px; background: var(--karte);
  font-size: 14.5px; color: var(--text);
}
.dfs-wahl-auf > summary::-webkit-details-marker { display: none; }
.dfs-wahl-auf > summary:hover { border-color: #D6DEE9; }
.dfs-wahl-auf[open] > summary { border-color: var(--prim); box-shadow: 0 0 0 3px var(--prim-tint); }
.dfs-wahl-ist { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dfs-wahl-pfeil { color: var(--leise); font-size: 11px; }

.dfs-wahl-tafel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--karte); border: 1px solid var(--kante); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15, 35, 64, .16);
  padding: 8px; min-width: 300px;
}
.dfs-wahl-suche {
  width: 100%; min-height: 34px; padding: 0 10px; margin-bottom: 6px;
  border: 1px solid var(--kante); border-radius: 8px; background: var(--grund);
  font-size: 14px; color: var(--text); outline: 0;
}
.dfs-wahl-suche:focus { border-color: var(--prim); }
/* Hoehe begrenzt und rollbar: 33 Geraete sind laenger als jeder Schirm. */
.dfs-wahl-liste { max-height: 320px; overflow-y: auto; display: grid; gap: 1px; }
.dfs-wahl-z {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 14px; color: var(--text); text-decoration: none;
}
.dfs-wahl-z span:first-child { flex: 1; }
.dfs-wahl-z:hover { background: var(--kante2); }
.dfs-wahl-z.an { background: var(--prim-tint); color: var(--prim); font-weight: 600; }
.dfs-wahl-leer, .dfs-red-leer {
  padding: 10px 12px; color: var(--leise); font-size: 13.5px;
}
.dfs-red-leer { margin-bottom: 16px; }

/* ---------- Suchfelder, die im Browser filtern ---------- */

.dfs-red-suchfeld {
  flex: 1 1 220px; max-width: 340px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--kante); border-radius: 10px; background: var(--karte);
  font-size: 14.5px; color: var(--text); outline: 0;
}
.dfs-red-suchfeld:focus { border-color: var(--prim); box-shadow: 0 0 0 3px var(--prim-tint); }
.dfs-red-suchfeld.breit { max-width: 420px; }
.dfs-red-filter { align-items: flex-end; }

/* ================= Einträge bearbeiten ================= */

/* Die Risszeichnung liegt fest hinter dem Blatt und rollt nicht mit - das
   Blatt bewegt sich darueber. 10 % Deckkraft: erkennbar als Zeichnung,
   unlesbar als Beschriftung. Genau so ist sie gemeint. */
.dfs-red-zahngrund {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('/statisch/blaupause/zahn-46-molar.png');
  background-position: center center; background-repeat: no-repeat; background-size: cover;
  opacity: .1;
}

.dfs-bt-kopfzeile {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  margin: 0 0 22px;
}
.dfs-bt-kopfzeile .dfs-wahl { min-width: 320px; }
.dfs-bt-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.dfs-bt-kopf-rechts .dfs-knopf { margin-top: 0; display: inline-flex; align-items: center; }

/* Alle Flaechen leicht durchscheinend: Die Zeichnung darunter soll zu ahnen
   sein. `backdrop-filter` haelt den Text trotzdem lesbar - ohne ihn liest
   sich die Zeichnung durch die Felder hindurch. */
.dfs-bt-form, .dfs-bt-liste {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(15, 35, 64, .06);
}
.dfs-bt-form { padding: 18px 20px 16px; }

/* Der Fehlercode ueber die ganze Breite - er benennt den Eintrag -, darunter
   paarweise Technik links, Praxis rechts. */
.dfs-bt-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dfs-bt-raster .dfs-cv-zeile.breit { grid-column: 1 / -1; }
@media (max-width: 980px) { .dfs-bt-raster { grid-template-columns: 1fr; } }

/* Die Zeilen im Eingabeteil sind selbst wieder Karten - hier heller, weil sie
   schon auf einer durchscheinenden Flaeche liegen. */
.dfs-bt-form .dfs-cv-zeile {
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--kante); border-left: 3px solid var(--sek);
  border-radius: 12px; padding: 12px 14px 10px;
}
.dfs-bt-form .dfs-cv-zeile:focus-within {
  border-color: var(--prim); border-left-color: var(--prim);
  box-shadow: 0 0 0 3px var(--prim-tint); background: rgba(255, 255, 255, .92);
}
.dfs-bt-form .dfs-cv-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dfs-bt-form .dfs-cv-titel {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--sek); margin: 0;
}
.dfs-bt-form .dfs-cv-werkzeug { margin-left: auto; display: flex; gap: 4px; }
.dfs-bt-form .dfs-cv-eingabe {
  width: 100%; border: 0; outline: 0; background: none; padding: 0;
  font-size: 15px; color: var(--text); resize: vertical;
}
.dfs-bt-form input.dfs-cv-eingabe {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 17px; letter-spacing: .02em;
}
.dfs-bt-form .dfs-cv-flaeche { line-height: 1.5; min-height: 58px; }

/* Der Abstand zwischen Eingabeteil und Liste. Er war 34px und damit zu klein:
   Der Knopf „Speichern" beruehrte die Kante der Liste darunter, und beides
   sah aus wie ein Block. */
.dfs-bt-fuss {
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  margin-top: 18px;
}
.dfs-bt-fuss .dfs-knopf { margin-top: 0; }
.dfs-bt-form { margin-bottom: 64px; }

.dfs-bt-liste { padding: 6px 20px 20px; }
.dfs-bt-listenkopf {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 0 14px;
}
.dfs-bt-titel { font-size: 15px; font-weight: 700; margin: 0; }
.dfs-bt-listenkopf .dfs-red-suchfeld { margin-left: auto; }

/* Die Sortierung als kleine Reiterleiste, nicht als Auswahlfeld: drei Stufen
   sind drei Klicks wert und keine Klappliste. */
.dfs-bt-sortierung { display: flex; gap: 2px; }
.dfs-bt-sortierung a {
  padding: 6px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--leise); text-decoration: none; white-space: nowrap;
}
.dfs-bt-sortierung a:hover { background: var(--kante2); color: var(--text); }
.dfs-bt-sortierung a.an { background: var(--sek-tint); color: var(--sek); }

.dfs-bt-tabelle td { vertical-align: middle; }
.dfs-bt-tabelle code { font-family: 'IBM Plex Mono', monospace; font-size: 13px; white-space: nowrap; }
.dfs-bt-werkzeug { white-space: nowrap; text-align: right; }
.dfs-bt-werkzeug .dfs-cv-knopf { margin-left: 4px; }

.dfs-bt-legende {
  margin-top: 20px; color: var(--leise); font-size: 12.5px; line-height: 1.8;
}
.dfs-bt-zeichen {
  display: inline-flex; vertical-align: -4px; padding: 2px 5px;
  border: 1px solid var(--kante); border-radius: 6px; background: var(--karte);
}
.dfs-bt-legende code {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
  background: var(--kante2); padding: 1px 5px; border-radius: 5px;
}

/* Zeilen, die auf einen Doppelklick warten. */
tr[data-doppelklick] { cursor: pointer; }
tr[data-doppelklick]:hover { background: var(--kante2); }

/* Die Fassung oben rechts, neben dem Namen. Klein und leise: Sie ist Auskunft
   fuer den Fall, dass etwas nicht stimmt, und sonst nichts. */
.dfs-red-fassung {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px; color: var(--leise);
  padding: 3px 7px; border: 1px solid var(--kante); border-radius: 7px;
  margin-right: 4px;
}

/* Luft an den Seiten - nur im Bearbeiten-Reiter.
   Dort liegt die Risszeichnung im Hintergrund, und sie soll zu sehen sein.
   Ohne diesen Streifen stossen die Karten an den Rand des Fensters, und von
   der Zeichnung bleibt nur, was zwischen ihnen durchscheint. `clamp` laesst
   den Streifen auf schmalen Schirmen verschwinden - dort ist Platz das
   knappere Gut. */
.dfs-red-luft { padding-left: clamp(28px, 5vw, 96px); padding-right: clamp(28px, 5vw, 96px); }

/* ---------- Fussleiste ---------- */

.dfs-red-fuss {
  position: relative; z-index: 1;
  border-top: 1px solid var(--kante); margin-top: auto;
  background: rgba(251, 252, 253, .72);
}
.dfs-red-fuss-in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 14px; padding-bottom: 14px;
  font-size: 12.5px; color: var(--leise);
}
.dfs-red-fusslink {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--leise); text-decoration: none; font-weight: 600;
}
.dfs-red-fusslink:hover { color: var(--text); }
.dfs-red-fassung {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px; color: var(--leise); white-space: nowrap;
}

/* Das Blatt muss die Fussleiste nach unten druecken, sonst haengt sie unter
   kurzen Seiten in der Mitte. */
.dfs-red { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.dfs-red-blatt { flex: 1; }

/* Das Zeichen im Fenster „Über die Redaktion" - groesser als in der Leiste,
   weil es dort die Ueberschrift traegt. */
.dfs-red-ueber-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.dfs-red-ueber-kopf img { display: block; border-radius: 12px; flex: none; }
.dfs-red-ueber-kopf .dfs-leer-t { margin: 0; font-size: 22px; }
.dfs-red-ueber-unter { margin: 2px 0 0; font-size: 12.5px; color: var(--leise); }

.dfs-red-fusslinks { display: inline-flex; align-items: center; gap: 22px; }
.dfs-red-fusslink svg { width: 16px; height: 16px; }

/* Ein Streifen Luft zwischen dem Kopf der Liste und der Tabelle. Vorher lag
   die Linie des Kopfes unmittelbar auf der Kopfzeile der Tabelle - zwei
   Striche, die sich beruehren, lesen sich als einer. */
.dfs-bt-listenkopf { padding-bottom: 6px; }
.dfs-bt-tabelle { margin-top: 12px; }

/* ---------- Gefahrenbereich ---------- */

/* Ganz unten, deutlich abgesetzt, und in Rot - aber erst dann rot, wenn man
   dort ist: Eine rote Flaeche auf jedem Arbeitsblatt liest sich nach drei
   Tagen wie Tapete, und dann klickt jemand doch. */
.dfs-bt-gefahr {
  margin-top: 48px; padding: 18px 20px 20px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(10px);
  border: 1px solid var(--rot-tint); border-left: 3px solid var(--rot);
  border-radius: 16px;
}
.dfs-bt-gefahr-t {
  font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--rot); margin: 0 0 8px;
}
.dfs-bt-gefahr-m { margin: 0 0 14px; font-size: 14px; color: var(--text); line-height: 1.55; }
.dfs-bt-gefahr-was {
  display: block; font-size: 12.5px; color: var(--leise); margin-bottom: 6px;
}
.dfs-bt-gefahr-was code {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  background: var(--rot-tint); color: var(--rot); padding: 1px 6px; border-radius: 5px;
}
.dfs-bt-gefahr-zeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dfs-bt-gefahr-zeile .dfs-red-suchfeld { max-width: 220px; }
.dfs-knopf.gefahr {
  background: var(--rot); color: #fff; margin-top: 0;
}
.dfs-knopf.gefahr:hover { background: #B22E17; }

/* ---------- Gerätekarte ---------- */

/* Sie steht unter der Filterzeile und sagt, worauf man gerade schaut - Name,
   Zahlen, Unterlagen. Die beiden Zeichen rechts sind die einzigen Wege, ein
   Geraet zu aendern oder zu loeschen. */
.dfs-gk {
  background: var(--karte); border: 1px solid var(--kante); border-radius: 16px;
  padding: 16px 20px; margin: 0 0 22px;
}
.dfs-gk-kopf { display: flex; align-items: flex-start; gap: 16px; }
.dfs-gk-hersteller {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--leise);
}
.dfs-gk-modell { font-size: 19px; font-weight: 800; letter-spacing: -.015em; margin: 2px 0 0; }
.dfs-gk-werkzeug { margin-left: auto; display: flex; gap: 6px; }

.dfs-gk-daten {
  display: flex; flex-wrap: wrap; gap: 10px 40px; margin: 14px 0 0;
}
.dfs-gk-daten dt {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--leise); margin-bottom: 3px;
}
.dfs-gk-daten dd { margin: 0; font-size: 14px; }
.dfs-gk-daten code {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
  background: var(--kante2); padding: 2px 6px; border-radius: 5px;
}
/* „nicht hinterlegt" ist eine Auskunft und kein Fehler - deshalb leise und
   nicht rot. */
.dfs-gk-fehlt { color: var(--leise); font-style: italic; }

.dfs-gk-anleitungen {
  border-top: 1px solid var(--kante); padding-top: 14px; margin-top: 4px;
}
.dfs-gk-anleitungen-t {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--sek); margin-bottom: 8px;
}
/* Kein Versprechen, sondern eine Auskunft: Was hier steht, ist der Stand. */
.dfs-gk-spaeter { margin: 10px 0 0; font-size: 12.5px; color: var(--leise); line-height: 1.6; }

.dfs-gk-warnung { margin: 0 0 16px; font-size: 15px; line-height: 1.6; }
.dfs-bf-titel.gefahr { color: var(--rot); }
.dfs-bf.schmal { width: min(560px, 92vw); }
.dfs-bf-feld label code {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; text-transform: none;
  background: var(--rot-tint); color: var(--rot); padding: 1px 6px; border-radius: 5px;
}

/* ---------- Auswertung ---------- */

.dfs-aw-block { margin-bottom: 34px; }
.dfs-aw-hinweis { margin: 0 0 12px; font-size: 13px; color: var(--leise); line-height: 1.6; }
.dfs-aw-leer {
  background: var(--karte); border: 1px dashed var(--kante); border-radius: 12px;
  padding: 16px 18px; font-size: 14px; color: var(--leise);
}
.dfs-aw-tabelle td { vertical-align: middle; }
/* Der Suchbegriff ist das, worum es geht - er bekommt die Schrift, die auch
   das Suchfeld traegt. */
.dfs-aw-wort {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13.5px;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dfs-aw-balken { width: 40%; }

/* Das Stundenbild. Vierundzwanzig Saeulen, keine Bibliothek. */
.dfs-aw-stunden {
  display: flex; align-items: flex-end; gap: 3px; height: 130px;
  background: var(--karte); border: 1px solid var(--kante); border-radius: 12px;
  padding: 14px 14px 6px;
}
.dfs-aw-stunde {
  flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
}
.dfs-aw-saeule {
  background: var(--sek); border-radius: 3px 3px 0 0; min-height: 2px;
  transition: background .15s;
}
.dfs-aw-stunde:hover .dfs-aw-saeule { background: var(--prim); }
.dfs-aw-stundenzahl {
  text-align: center; font-size: 10.5px; color: var(--leise); height: 14px; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.dfs-aw-fuss {
  margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--kante);
  font-size: 12.5px; color: var(--leise); line-height: 1.7;
}

/* ---------- Auf schmalen Schirmen ---------- */

/* Gemessen bei 375px: 831px Inhalt. Die Reiterleiste allein war 573px breit
   und wich nicht aus - sechs Reiter passen dort nicht nebeneinander.
   Die Redaktion ist ein Arbeitsplatz und wird selten am Telefon geoeffnet;
   trotzdem soll sie dort nicht zerfallen, wenn jemand unterwegs schnell etwas
   nachsieht.
   Die Reiter ROLLEN waagerecht in ihrem eigenen Kasten, statt umzubrechen:
   Umgebrochen wuerde die Kopfzeile drei Zeilen hoch, und die Reihenfolge
   „Übersicht, Geräte, Einträge" wuerde zerrissen. */
@media (max-width: 900px) {
  /* `.dfs-red-kopf .dfs-kopf-in` und nicht `.dfs-red-kopf-in`: Die Klasse
     gibt es nicht - der Kopf der Redaktion traegt `dfs-red-breit dfs-kopf-in`.
     Eine Regel auf einen Namen, den niemand vergibt, tut nichts und faellt
     nicht auf. */
  .dfs-red-kopf .dfs-kopf-in {
    flex-wrap: wrap; height: auto; gap: 8px 12px;
    padding-top: 10px; padding-bottom: 10px;
  }
  /* `flex: 0 0 100%` und nicht nur `width: 100%`: Ein Flex-Element mit voller
     Breite darf trotzdem schrumpfen und bleibt dann in der Zeile stehen. Erst
     `flex-shrink: 0` zwingt es in die naechste. */
  .dfs-red-reiter {
    order: 3; flex: 0 0 100%; margin-left: 0;
    overflow-x: auto; scrollbar-width: none;
  }
  .dfs-red-reiter::-webkit-scrollbar { display: none; }
  .dfs-red-reiter a { white-space: nowrap; flex: none; }
  .dfs-red-kopf .dfs-kopf-rechts { margin-left: auto; }

  .dfs-red-breit { padding-left: 16px; padding-right: 16px; }
  .dfs-red-luft { padding-left: 16px; padding-right: 16px; }

  /* Die Kennzahlen untereinander statt in einer Reihe, die nicht passt. */
  .dfs-red-kacheln { grid-template-columns: 1fr 1fr; }

  /* Tabellen rollen in ihrem eigenen Kasten - eine Tabelle mit sechs Spalten
     laesst sich auf 375px nicht umbrechen, ohne sie unlesbar zu machen. */
  .dfs-red-tabelle { display: block; overflow-x: auto; }

  .dfs-red-fuss-in { flex-direction: column; gap: 10px; align-items: center; }
  .dfs-bt-kopfzeile .dfs-wahl { min-width: 100%; }
  .dfs-bt-kopf-rechts { margin-left: 0; width: 100%; }
}

/* „Heute" gegen die Bestandszahlen absetzen.
   Beides sind Zahlen in Kacheln, aber sie beantworten verschiedene Fragen:
   oben „läuft es", darunter „was steht drin". Ohne einen sichtbaren Schnitt
   liest man sie als eine Reihe und vergleicht, was nicht vergleichbar ist. */
.dfs-red-heute{
  background: var(--karte); border: 1px solid var(--kante);
  border-radius: 16px; padding: 14px 16px 12px; margin: 0 0 26px;
}

/* Die Kopfzeile: links das Wort, rechts der Zustand.
   Die letzte Suche ist keine Kennzahl — sie sagt nicht „wie viel", sondern
   „läuft es noch". Deshalb steht sie hier und nicht als sechste Kachel, die
   die anderen fünf aus der Zeile drückte. */
.dfs-heute-kopf{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin:0 2px 10px; flex-wrap:wrap;
}
.dfs-heute-titel{
  font-size:12px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--leise);
}
.dfs-heute-letzte{ font-size:12.5px; color:var(--leise); }
.dfs-heute-letzte b{ font-weight:600; color:var(--text); }
.dfs-heute-still{ font-style:italic; }

/* Fünf in einer Reihe — und sie bleiben es.
   `auto-fit` mit einer Mindestbreite bräche bei schmalen Fenstern in zwei
   Zeilen um; hier ist die Reihe die Aussage, weil die fünf Zahlen zusammen
   ein Bild ergeben. Sie werden schmaler, nicht weniger. */
.dfs-heute-kacheln{ display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; }
.dfs-heute-k{ padding:12px 13px; cursor:help; }
.dfs-heute-k .dfs-red-zahl{ font-size:23px; }
.dfs-heute-k .dfs-red-was{
  font-size:12px; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.dfs-heute-wege{ display:flex; gap:14px; margin:12px 2px 0; flex-wrap:wrap; }

/* Auf dem Telefon sind fünf Spalten unlesbar. Dann lieber zwei Reihen als
   fünf Spalten mit je vier Zeichen Platz. */
@media (max-width:640px){
  .dfs-heute-kacheln{ grid-template-columns:repeat(3, 1fr); }
  .dfs-heute-k .dfs-red-zahl{ font-size:20px; }
}

/* Blättern unter langen Listen. */
.dfs-red-blaettern{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin:18px 0 4px;
}

/* ---------- Unterlagen ---------- */

/* Geräteliste links, Inhalt rechts. Auf schmalen Schirmen untereinander —
   die Liste zuerst, weil man erst wählt und dann arbeitet. */
.dfs-unt-raster{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start;}
@media (max-width:900px){.dfs-unt-raster{grid-template-columns:1fr;}}

.dfs-unt-filter{width:100%;margin-bottom:10px;}
.dfs-unt-liste{
  max-height:min(62vh,700px);overflow-y:auto;
  border:1px solid var(--rand, rgba(127,127,127,.18));border-radius:12px;
}
.dfs-unt-g{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--rand, rgba(127,127,127,.12));
}
.dfs-unt-g:last-child{border-bottom:0;}
.dfs-unt-g:hover{background:var(--flaeche-2, rgba(127,127,127,.06));}
.dfs-unt-g.an{background:var(--prim-tint, rgba(0,120,140,.12));font-weight:600;}
.dfs-unt-g-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dfs-unt-g-z{
  flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:12px;
  padding:1px 8px;border-radius:99px;background:var(--prim-tint, rgba(0,120,140,.14));
}
.dfs-unt-g-z.leer{background:transparent;color:var(--leise);}

.dfs-unt-tabelle .dfs-unt-zeichen{color:var(--leise);vertical-align:middle;}
.dfs-unt-datei{font-size:12px;margin-top:2px;word-break:break-all;}

.dfs-unt-formulare{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px;}
@media (max-width:1100px){.dfs-unt-formulare{grid-template-columns:1fr;}}
.dfs-unt-form{
  border:1px solid var(--rand, rgba(127,127,127,.18));border-radius:14px;padding:16px;
  background:var(--flaeche-2, rgba(127,127,127,.04));
}
.dfs-unt-label{display:block;margin:12px 0;font-size:13px;color:var(--leise);}
.dfs-unt-label .dfs-eingabe, .dfs-unt-label select{
  display:block;width:100%;margin-top:5px;color:var(--text);font-size:14px;
}
.dfs-unt-warum{font-size:13px;margin:0 0 4px;}

/* Das Ablageziel. Gestrichelt, weil es eine Fläche ist und kein Knopf. */
.dfs-unt-ziel{
  border:2px dashed var(--rand, rgba(127,127,127,.35));border-radius:12px;
  padding:16px;text-align:center;transition:background .15s, border-color .15s;
}
.dfs-unt-ziel.drueber{
  border-color:var(--prim);background:var(--prim-tint, rgba(0,120,140,.1));
}
.dfs-unt-ziel p{margin:8px 0 0;font-size:13px;}
.dfs-unt-gewaehlt{margin-top:8px;font-size:12px;color:var(--prim);word-break:break-all;}

/* ---------- Das gewählte Gerät im Kopf ---------- */
/* Ein Zustand, der die Ansicht bestimmt und den man nicht sieht, ist einer,
   den man vergisst — und dann wundert man sich über eine halb leere Liste.
   Dasselbe Muster wie der gewählte Kunde in DFT. */
/* Grün, nicht Orange.
   Orange ist in dieser Oberfläche die Farbe des Handelns — Knöpfe, der aktive
   Reiter, Treffermarkierungen. Eine Pille, die nur sagt „hieran wird
   gearbeitet", drängt sich damit vor alles, was tatsächlich zu tun ist.
   Grün sagt dasselbe leiser. */
.dfs-red-pille{
  display:inline-flex;align-items:center;gap:2px;
  background:var(--gruen-tint);
  border:1px solid #C4E8D4;border-radius:99px;
  padding:2px 4px 2px 12px;font-size:13px;max-width:320px;
}
.dfs-red-pille > a:first-child{color:#0E7A47;}
.dfs-red-pille > a:first-child{
  color:inherit;text-decoration:none;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dfs-red-pille .los{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:99px;color:var(--leise);text-decoration:none;
}
.dfs-red-pille .los:hover{background:rgba(18,164,94,.16);color:#0E7A47;}

/* ---------- Der Knopf zum Auswählen ---------- */
/* Ein nacktes <input type="file"> sieht in jedem Browser anders aus, meist
   nach 1998, und lässt sich nicht gestalten — der Knopf gehört dem Browser.
   Also liegt es unsichtbar unter einem <label>, das wie ein Knopf aussieht.
   Kein JavaScript nötig, und mit der Tastatur bedienbar: `:focus-visible` am
   Feld färbt das Label. */
.dfs-unt-datei-feld{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.dfs-unt-datei-knopf{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--karte);border:1px solid var(--kante);border-radius:10px;
  padding:9px 15px;font-size:14px;font-weight:600;color:var(--text);
  transition:background .12s, border-color .12s;
}
.dfs-unt-datei-knopf:hover{background:var(--prim-tint, rgba(0,120,140,.1));border-color:var(--prim);}
.dfs-unt-datei-feld:focus-visible + .dfs-unt-datei-knopf{
  outline:2px solid var(--prim);outline-offset:2px;
}
.dfs-unt-ziel.aus .dfs-unt-datei-knopf{opacity:.5;cursor:not-allowed;}

.dfs-unt-eine{max-width:none;}
.dfs-unt-reihe{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;}
.dfs-unt-reihe > *{flex:1 1 200px;min-width:0;}
.dfs-unt-breit{flex:2 1 320px;}
.dfs-unt-halb{flex:1 1 300px;min-width:0;}
.dfs-unt-feldkopf{font-size:13px;font-weight:600;color:var(--leise);margin:0 0 6px;}
.dfs-unt-mini{font-size:12px;margin:6px 0 0;}
.dfs-unt-url{width:100%;}
.dfs-unt-label textarea.dfs-eingabe{width:100%;resize:vertical;font:inherit;}

/* Datei und Verweis nebeneinander in der Liste. */
.dfs-unt-wo{min-width:180px;}
.dfs-unt-stueck{
  display:inline-flex;align-items:center;gap:5px;margin-right:10px;
  font-size:13px;max-width:100%;
}
.dfs-unt-stueck span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dfs-unt-beschr{font-size:12.5px;margin-top:3px;max-width:52ch;}
.dfs-unt-zustand{
  display:inline-block;font-size:11.5px;padding:1px 7px;border-radius:99px;
  border:1px solid var(--kante);white-space:nowrap;
}
.dfs-unt-zustand.gut{color:#1E7A4B;border-color:#B8E0C9;background:#F1FAF4;}
.dfs-unt-zustand.schlecht{color:#B3261E;border-color:#F3C6C3;background:#FEF4F3;}
.dfs-unt-zustand.offen{color:#8A6D1F;border-color:#EEDCA8;background:#FDF9EE;}
.dfs-unt-pruefung{font-size:12px;margin:10px 2px 0;line-height:1.45;}

/* ---------- Verwaltung: die Arten ---------- */
.dfs-art-tabelle td{vertical-align:middle;}
.dfs-art-tabelle .dfs-eingabe{width:100%;}
.dfs-art-schluessel{font-size:12px;color:var(--leise);}
.dfs-art-still{opacity:.55;}
.dfs-art-schalter{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;}
.dfs-art-neu{max-width:none;margin-top:14px;}

/* ---------- Unterlagen in der Geräteliste ---------- */
.dfs-red-unt-spalte{display:flex;flex-direction:column;gap:3px;}
.dfs-red-unt-stueck{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dfs-punkt{
  flex:0 0 auto;width:8px;height:8px;border-radius:99px;display:inline-block;
  background:var(--sek);
}
.dfs-punkt.viol{background:var(--viol);}
.dfs-punkt.gruen{background:var(--gruen);}
.dfs-punkt.prim{background:var(--prim);}
.dfs-punkt.petrol{background:var(--petrol);}
.dfs-punkt.rot{background:var(--rot, #B3261E);}

/* „nichts hinterlegt" ist ein Verweis, kein Strich: Wer es sieht, will es
   meist gleich ändern. Bis zum 24.08.2026 stand hier der Dateiname aus dem
   Altbestand — ein Name ohne Datei. */
.dfs-red-nichts{font-size:12.5px;color:var(--leise);text-decoration:none;border-bottom:1px dotted;}
.dfs-red-nichts:hover{color:var(--prim);}

/* ---------- Die Vorschau ---------- */
.dfs-vorschau-in{width:min(1000px,94vw);height:min(88vh,900px);display:flex;flex-direction:column;padding:14px;}
.dfs-vorschau-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 34px 10px 4px;}
.dfs-vorschau-rahmen{flex:1;width:100%;border:1px solid var(--kante);border-radius:10px;background:#fff;}

/* ---------- Der Kopf in zwei Zeilen ---------- */
/* In einer Zeile mit Marke, Gerätepille, Name und Abmelden wird es bei acht
   Reitern eng, sobald ein Gerätename etwas länger ist — und ein Rollbalken in
   einer Hauptnavigation heißt: Etwas ist da, aber du siehst es nicht.
   Oben steht, WORAN gearbeitet wird; darunter, WO. */
.dfs-red-kopf{display:block;padding:0;}

/* Die 28px zur Seite kommen aus `.dfs-red-breit` und muessen bleiben.
   Hier stand einmal `padding:11px 0 9px` — das setzt links und rechts auf
   null und legte die ganze obere Zeile an den Fensterrand, waehrend die
   Reiter darunter bei 54px begannen. Zwei Zeilen, zwei Fluchten. */
.dfs-red-kopf-oben{
  display:flex;align-items:center;gap:16px;
  padding-top:12px;padding-bottom:10px;
}

/* Kein `margin-left` mehr. Das stammte aus der einzeiligen Fassung, wo die
   Reiter neben der Marke standen und Abstand brauchten. Jetzt stehen sie
   darunter und fluchten mit ihr — und mit dem Blatt. */
.dfs-red-kopf .dfs-red-reiter{
  display:flex;gap:2px;align-items:stretch;margin-left:0;
  border-top:1px solid var(--kante);
  overflow-x:auto;scrollbar-width:thin;
}
.dfs-red-kopf .dfs-red-reiter a{
  padding:10px 13px 9px;border-radius:0;white-space:nowrap;
  border-bottom:2px solid transparent;
}
.dfs-red-kopf .dfs-red-reiter a.an{border-bottom-color:var(--prim);background:transparent;}

/* ---------- Knowledge Base in der Redaktion ---------- */
.dfs-wv-tabelle td{vertical-align:top;}
.dfs-wv-gliste{font-size:12.5px;max-width:34ch;}

/* Die Geräte als Kästchenliste, nach Hersteller gruppiert — so sucht man:
   „die drei Orthophos" stehen beieinander, und genau die hakt man zusammen an. */
.dfs-wv-geraete{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px;margin:6px 0 16px;
  max-height:340px;overflow-y:auto;
  border:1px solid var(--kante);border-radius:12px;padding:14px;
}
.dfs-wv-hname{
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--leise);margin:0 0 5px;
}
.dfs-wv-g{display:flex;align-items:flex-start;gap:7px;font-size:13.5px;
  padding:2px 0;cursor:pointer;line-height:1.4;}
.dfs-wv-g input{margin-top:2px;flex:none;}

.dfs-wv-eintrag{
  border:1px solid var(--kante);border-radius:14px;padding:16px;
  margin:0 0 14px;background:var(--karte);
}
.dfs-wv-eintrag textarea{width:100%;resize:vertical;font:inherit;line-height:1.55;}
.dfs-wv-zeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;}
.dfs-wv-wann{font-size:12px;margin-left:auto;}

/* Die Meldung nach einer Aktion — „angelegt", „gelöscht", „nicht gespeichert".
   Bis zum 20.09.2026 hatte `.dfs-red-meldung` kein CSS: Der Satz stand als
   nackter Text unter der Überschrift und war von der Einleitung nicht zu
   unterscheiden. Wer gerade etwas gelöscht hat, muss die Antwort darauf
   sehen, nicht suchen. */
.dfs-red-meldung{
  margin:0 0 18px;padding:11px 14px;border-radius:9px;max-width:840px;
  font-size:13.5px;line-height:1.5;border:1px solid;
}
.dfs-red-meldung.gut{color:#1E7A4B;border-color:#B8E0C9;background:#F1FAF4;}
.dfs-red-meldung.schlecht{color:var(--rot);border-color:var(--rot-tint);background:#FEF6F4;}

/* Rubrik löschen — hinter einem Aufklapper und hinter dem Löschwort. Kein
   confirm(): Ohne JavaScript fiele es weg, und dann löschte der Knopf
   wortlos. */
.dfs-wv-gefahr{margin-top:22px;border:1px solid var(--kante2);border-radius:10px;
  background:#FFF;max-width:640px;}
.dfs-wv-gefahr>summary{padding:12px 16px;cursor:pointer;font-size:13.5px;
  color:var(--rot);list-style:none;display:flex;align-items:center;gap:8px;}
.dfs-wv-gefahr>summary::-webkit-details-marker{display:none;}
.dfs-wv-gefahr>summary::before{content:"▸";font-size:11px;}
.dfs-wv-gefahr[open]>summary::before{content:"▾";}
.dfs-wv-gefahr>form{padding:0 16px 16px;}
.dfs-wv-gefahr .dfs-wv-zeile{align-items:flex-end;}
.dfs-wv-gefahr input[name=wort]{max-width:220px;}
.dfs-wv-gefahr .dfs-gk-warnung{font-size:13.5px;margin-bottom:12px;}

/* ---------- Knowledge Base: Leiste, Karten, Pfeile ---------- */

/* Der Knopf steht OBEN. Das Formular stand bis zum 20.09.2026 ganz unten,
   hinter der Geräteliste — wer eine Rubrik anlegen wollte, scrollte erst an
   allem vorbei, was schon da war. */
.dfs-wv-leiste{display:flex;align-items:center;gap:12px;margin:0 0 18px;}
.dfs-wv-fuell{flex:1;}

.dfs-wv-titelzeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 2px;}
.dfs-wv-hersteller{color:var(--leise);font-size:13.5px;font-weight:600;}
.dfs-wv-beschreibung{margin:8px 0 0;font-size:14px;max-width:70ch;}
.dfs-wv-gtags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;}
.dfs-wv-gtags span{font-size:12px;font-weight:600;color:var(--sek);
  background:var(--sek-tint);border-radius:99px;padding:4px 10px;}

/* Der Eintrag steht da, wie er draußen steht — nicht als Formular. Ein
   Textfeld je Eintrag verdeckte genau das, worum es geht: den Text. */
.dfs-wv-eintraege{display:grid;gap:14px;margin-top:20px;}
.dfs-wv-karte{background:#FFF;border:1px solid var(--kante2);border-radius:14px;padding:16px 18px;}
.dfs-wv-karte-kopf{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.dfs-wv-karte-kopf h2{font-size:16px;font-weight:800;letter-spacing:-.01em;margin:0;}
.dfs-wv-karte p{margin:8px 0 0;font-size:14.5px;line-height:1.6;}
.dfs-wv-karte .dfs-wv-wann{margin-top:12px;font-size:11.5px;color:var(--leise);}

/* Zwei Pfeile statt einer Zahl. „Reihung: 100" beantwortete die Frage nicht,
   die jemand hat, wenn ein Eintrag zu weit unten steht. */
.dfs-wv-schieb{display:inline;}
.dfs-wv-pfeil{border:1px solid var(--kante);background:#FFF;border-radius:8px;
  width:28px;height:28px;font-size:14px;line-height:1;color:var(--leise);cursor:pointer;}
.dfs-wv-pfeil:hover:not(:disabled){border-color:var(--prim);color:var(--prim-tief);}
.dfs-wv-pfeil:disabled{opacity:.3;cursor:default;}

/* Ohne JavaScript stehen die Fenster als Blöcke untereinander — dann braucht
   es wenigstens einen Rahmen, damit sie nicht in die Seite auslaufen. */
.dfs-wv-fenster[open]:not(:modal){position:static;display:block;width:100%;
  max-width:860px;margin:22px 0 0;}
.dfs-wv-fenster[open]:not(:modal) .dfs-bf-in{background:#FFF;backdrop-filter:none;
  box-shadow:none;border:1px solid var(--kante2);}
.dfs-wv-fenster[open]:not(:modal) [data-dialog-zu]{display:none;}

/* Bilder und Dateien am Eintrag — klein unter dem Text, groß im Fenster. */
.dfs-wv-anh-vorschau{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center;}
.dfs-wv-anh-vorschau img{height:56px;width:auto;border-radius:8px;border:1px solid var(--kante2);
  object-fit:cover;}
.dfs-wv-anh-datei{font-size:11.5px;font-weight:600;color:var(--sek);background:var(--sek-tint);
  border-radius:99px;padding:4px 10px;}

.dfs-wv-anhliste{display:grid;gap:10px;margin-bottom:6px;}
.dfs-wv-anh{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--kante2);
  border-radius:12px;padding:10px 12px;background:#FFF;}
.dfs-wv-anh img{width:76px;height:76px;object-fit:cover;border-radius:8px;
  border:1px solid var(--kante2);flex:none;}
.dfs-wv-anh-endung{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--sek);
  background:var(--sek-tint);border-radius:6px;padding:4px 8px;flex:none;}
.dfs-wv-anh-mitte{flex:1;display:grid;gap:5px;min-width:0;}
/* Ein Flex-Kind schrumpft nicht unter seinen Inhalt: Der Dateiname und das
   Beschriftungsfeld schoben die Zeile auf dem Handy über den Rand. */
.dfs-wv-anh-form input{min-width:0;}
.dfs-wv-anh-name{font-size:13.5px;font-weight:700;overflow-wrap:anywhere;}
.dfs-wv-anh-form{display:flex;gap:8px;align-items:center;}
.dfs-wv-anh-form input{flex:1;font-size:13px;}

/* ---------- Am Handy weitermachen ---------- */

.dfs-ueb{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;margin:22px 0 0;}
.dfs-ueb-ziffern,.dfs-ueb-qr{background:#FFF;border:1px solid var(--kante2);border-radius:16px;
  padding:20px 22px;}
.dfs-ueb-was{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--leise);margin-bottom:10px;}

/* Die Ziffern in Vierergruppen und in Ziffern gleicher Breite: „4831 9207"
   tippt sich ab, ohne dass man die Stelle verliert. */
.dfs-ueb-zahl{font-size:42px;font-weight:800;letter-spacing:.08em;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--text);}
.dfs-ueb-wo{margin-top:10px;font-size:13px;color:var(--leise);font-family:ui-monospace,
  SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere;line-height:1.4;}
.dfs-ueb-frist{margin-top:8px;font-size:12.5px;color:var(--prim-tief);font-weight:600;}
.dfs-ueb-qr svg{display:block;border-radius:10px;}

/* Der Name in der Kopfzeile klappt auf: Was darunter steht, betrifft diese
   Person – der Weg ans Handy und der Weg hinaus. Der Weg ans Handy stand
   vorher nur in der Adresszeile, man musste ihn kennen. */
.dfs-red-konto{position:relative;}
.dfs-red-konto>summary{list-style:none;cursor:pointer;font-size:13.5px;font-weight:600;
  color:var(--leise);display:flex;align-items:center;gap:6px;padding:4px 2px;}
.dfs-red-konto>summary::-webkit-details-marker{display:none;}
.dfs-red-konto>summary::after{content:"▾";font-size:10px;opacity:.7;}
.dfs-red-konto>summary:hover{color:var(--text);}
/* z-index 90 und nicht 40: Die Knöpfe der Rubrikzeile liegen im selben
   Stapel, und das Menü verschwand dahinter. Es ist das oberste Element der
   Seite – nur die Fenster liegen darüber (200). */
.dfs-red-konto-auf{position:absolute;right:0;top:calc(100% + 8px);z-index:90;
  min-width:280px;background:#FFF;border:1px solid var(--kante);border-radius:14px;
  box-shadow:0 18px 46px rgba(15,35,64,.16);padding:8px;}
.dfs-red-konto-auf a{display:block;text-decoration:none;color:inherit;padding:10px 12px;
  border-radius:10px;}
.dfs-red-konto-auf a:hover{background:var(--prim-tint);}
.dfs-red-konto-auf a b{display:block;font-size:13.5px;font-weight:700;}
.dfs-red-konto-auf a span{display:block;font-size:12px;color:var(--leise);margin-top:2px;
  line-height:1.45;}
.dfs-red-konto-auf form{border-top:1px solid var(--kante2);margin-top:6px;padding:6px 6px 2px;}

/* Aufnehmen oder wählen — zwei Wege, zwei Knöpfe. `capture` öffnet am Handy
   direkt die Kamera; am Rechner führt derselbe Knopf zum Dateiwähler. */
.dfs-wv-aufnahme{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 4px;}
.dfs-wv-kamera,.dfs-wv-waehlen{cursor:pointer;display:inline-flex;align-items:center;gap:8px;}
.dfs-wv-gewaehlt{font-size:12.5px;}
.dfs-wv-handy{margin-top:14px;padding-top:12px;border-top:1px solid var(--kante2);}

/* Das Ablagefeld: anklicken oder hineinziehen. Ein gestrichelter Rahmen sagt
   „hier hinein" deutlicher als ein Knopf mit der Aufschrift „Durchsuchen". */
.dfs-ablage{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;text-align:center;cursor:pointer;padding:26px 18px;border-radius:14px;
  border:2px dashed var(--kante);background:#FBFCFE;transition:border-color .12s,
  background .12s;}
.dfs-ablage:hover{border-color:var(--prim);background:var(--prim-tint);}
.dfs-ablage.drueber{border-color:var(--prim);background:var(--prim-tint);
  border-style:solid;}
.dfs-ablage-zeichen{font-size:26px;line-height:1;color:var(--prim);font-weight:300;}
.dfs-ablage-was{font-size:14px;font-weight:700;margin-top:6px;}
.dfs-ablage-klein{font-size:12px;color:var(--leise);}
.dfs-ablage-gewaehlt{font-size:12.5px;font-weight:600;color:var(--prim-tief);margin-top:6px;}
.dfs-ablage-gewaehlt:empty{display:none;}
.dfs-wv-kamera{cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  margin-top:10px;align-self:flex-start;}

/* Ein Symbol statt zweier Wörter: „Bilder und Dateien" nahm in der Kopfzeile
   eines Eintrags mehr Platz ein als die Überschrift daneben. */
.dfs-wv-symbolknopf{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;}
.dfs-wv-symbolknopf span{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;}

/* Der Papierkorb sitzt am Bild, nicht als Wort am Zeilenende. */
.dfs-anh-weg{border:1px solid var(--kante);background:#FFF;border-radius:9px;
  width:32px;height:32px;display:inline-grid;place-items:center;cursor:pointer;
  color:var(--leise);}
.dfs-anh-weg:hover{border-color:var(--rot);color:var(--rot);background:var(--rot-tint);}
.dfs-wv-vorschau{position:relative;display:inline-block;line-height:0;}
.dfs-wv-vorschau .dfs-anh-weg.klein{position:absolute;top:4px;right:4px;width:26px;height:26px;
  border-radius:8px;background:rgba(255,255,255,.92);opacity:0;transition:opacity .12s;}
.dfs-wv-vorschau:hover .dfs-anh-weg.klein,
.dfs-wv-vorschau:focus-within .dfs-anh-weg.klein{opacity:1;}
/* Auf einem Schirm ohne Mauszeiger gibt es kein „darüber" – dort steht er immer. */
@media (hover:none){.dfs-wv-vorschau .dfs-anh-weg.klein{opacity:1;}}

/* Der Code fürs Handy, im Fenster auf der Seite, auf der man arbeitet. */
/* Die Gestalt des Codes steht jetzt EINMAL in stil.css - sie ist auf der
   Seite und im Fenster dieselbe, in DFS wie in der Redaktion. */

/* ---------- Auf dem Handy ---------- */
/*
   Gemessen am 20.09.2026 bei 390px: Die Seite scrollte waagerecht bis 549px.
   Schuld war nicht eine zu breite Tabelle, sondern die obere Kopfzeile —
   eine Flex-Zeile, die nicht umbricht: Gerätepille (315px) und Name schoben
   sich nach rechts hinaus. Wer dort arbeitet, hält ein Telefon in der Hand
   und hat keine zweite, um die Seite zurückzuschieben.
*/
@media (max-width: 720px) {
  .dfs-red-kopf-oben{
    flex-wrap:wrap;gap:8px 10px;padding-top:10px;padding-bottom:8px;
  }
  /* Die Marke bleibt links, das Konto rechts – beide in Zeile eins. */
  .dfs-red-kopf-oben .dfs-kopf-rechts{margin-left:auto;}
  /* Die Pille bekommt die zweite Zeile ganz für sich und kürzt den Namen,
     statt ihn hinauszuschieben. */
  .dfs-red-pille{
    order:3;flex:0 0 100%;min-width:0;max-width:100%;
  }
  .dfs-red-pille > a:first-child{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
  }

  /* Die Reiter scrollen für sich – mit einer weichen Kante rechts, damit man
     sieht, dass es weitergeht. */
  .dfs-red-kopf .dfs-red-reiter{
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
    mask-image:linear-gradient(to right,#000 88%,transparent);
  }
  .dfs-red-kopf .dfs-red-reiter::-webkit-scrollbar{display:none;}
  .dfs-red-kopf .dfs-red-reiter a{padding:10px 11px 9px;font-size:13.5px;}

  .dfs-red-breit{padding-left:14px;padding-right:14px;}
  .dfs-red-luft{padding-left:14px;padding-right:14px;}
  .dfs-red-titel{font-size:22px;}
  .dfs-red-unter{font-size:13.5px;}

  /* Tabellen scrollen in ihrem eigenen Rahmen, nicht mit der ganzen Seite.
     `display:block` am <table> ist der einzige Weg, der ohne Umbau des
     Markups auskommt. */
  .dfs-red-tabelle{display:block;overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch;}
  .dfs-red-tabelle td,.dfs-red-tabelle th{white-space:nowrap;}
  .dfs-wv-gliste{white-space:normal;max-width:30ch;}

  /* Kacheln und Formulare untereinander. */
  .dfs-red-kacheln{grid-template-columns:1fr;}
  .dfs-unt-reihe{flex-direction:column;align-items:stretch;gap:10px;}
  .dfs-unt-label{width:100%;}

  /* Die Knowledge Base. */
  .dfs-wv-titelzeile{gap:8px;}
  .dfs-wv-titelzeile .dfs-wv-fuell{display:none;}
  .dfs-wv-titelzeile > button{flex:1 1 auto;}
  .dfs-wv-karte{padding:14px;}
  .dfs-wv-karte-kopf{flex-wrap:wrap;row-gap:8px;}
  .dfs-wv-karte-kopf h2{flex:0 0 100%;font-size:15.5px;}
  .dfs-wv-karte-kopf .dfs-wv-fuell{display:none;}
  .dfs-wv-geraete{max-height:230px;}
  .dfs-ueb{gap:18px;}
  .dfs-ueb-zahl{font-size:34px;}

  /* Die Fenster füllen den Schirm, statt darin zu schweben. */
  .dfs-bf{width:100vw;max-width:100vw;max-height:100dvh;border-radius:0;}
  .dfs-bf-in{border-radius:0;max-height:100dvh;height:100dvh;background:#FFF;
    backdrop-filter:none;}
  .dfs-bf-kopf{padding:14px 16px 10px;
    padding-top:calc(14px + env(safe-area-inset-top,0px));}
  .dfs-bf-koerper{padding:14px 16px;}
  .dfs-bf-fuss{padding:12px 16px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));flex-wrap:wrap;gap:8px;}
  .dfs-handy-reihe{flex-direction:column;align-items:flex-start;}
  .dfs-wv-fenster[open]:not(:modal){max-width:100%;}
}

/* Knöpfe mit Zeichen: gleiche Höhe, gleicher Bau. Vorher stand ein flacher
   neben einem vollen, und sie saßen zwei Pixel versetzt. */
.dfs-wv-mitzeichen{display:inline-flex;align-items:center;gap:7px;line-height:1;}
.dfs-wv-plus{font-size:16px;font-weight:400;line-height:1;}
.dfs-knopf.still{background:#FFF;color:var(--text);border:1px solid var(--kante);}
.dfs-knopf.still:hover{border-color:var(--prim);color:var(--prim-tief);background:var(--prim-tint);}

/* Die hinterlegten Geräte: eingeklappt, bis jemand sie braucht. Auf der
   Rubrikseite standen sie als Kette von Marken über dem ersten Eintrag und
   nahmen auf dem Handy den halben Schirm. */
.dfs-wv-geraetebox{margin-top:10px;}
.dfs-wv-geraetebox>summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--leise);
  padding:5px 10px;border:1px solid var(--kante2);border-radius:99px;background:#FFF;}
.dfs-wv-geraetebox>summary::-webkit-details-marker{display:none;}
.dfs-wv-geraetebox>summary::after{content:"▾";font-size:10px;}
.dfs-wv-geraetebox[open]>summary::after{content:"▴";}
.dfs-wv-geraetebox>summary:hover{color:var(--text);border-color:var(--kante);}
.dfs-wv-geraetebox .dfs-wv-gtags{margin-top:10px;}
.dfs-wv-geraetebox.im-fenster>summary{font-size:11.5px;text-transform:uppercase;
  letter-spacing:.06em;border:0;padding:0;border-radius:0;background:none;}

/* Die Beschreibung in derselben Schrift wie die Felder daneben, mit Platz für
   zwei Zeilen statt eines Streifens. */
.dfs-wv-beschr{font-size:15px;line-height:1.5;min-height:74px;resize:vertical;}

/* Hochladen links, der Weg ans Handy rechts als Zeichen. */
.dfs-wv-abschluss{margin-top:14px;}
.dfs-wv-handyknopf svg{width:24px;height:24px;}
.dfs-wv-handyknopf{display:inline-grid;place-items:center;width:42px;height:42px;
  border-radius:12px;border:1px solid var(--kante);color:var(--sek);background:#FFF;
  text-decoration:none;}
.dfs-wv-handyknopf:hover{border-color:var(--prim);color:var(--prim-tief);
  background:var(--prim-tint);}

/* „Rubrik löschen" klebte unter dem Fenster statt darin zu stehen. Das
   `max-width` stammte aus der Zeit, als es auf der Seite stand - im Fenster
   ragte der Streifen dadurch schmaler unter der abgerundeten Ecke hervor. */
.dfs-wv-gefahr{margin:0;border:0;border-top:1px solid var(--kante);border-radius:0;
  background:#FDFBFA;max-width:none;width:100%;}
/* Damit die Ecken des Fensters auch für das greifen, was zuletzt darin steht. */
.dfs-bf-in{overflow:hidden;}
.dfs-wv-gefahr>summary{padding:14px 20px;}
.dfs-wv-gefahr>form{padding:0 20px 18px;}

/* Ein Grid-Kind hat `min-width: auto` und schrumpft NICHT unter seinen
   Inhalt – eine Spalte `1fr` hilft dann nichts, und die Seite wird so breit
   wie der längste Gerätename. Auf dem Handy gemessen: 406px statt 390. */
.dfs-unt-raster > *,
.dfs-red-zwei > *,
.dfs-unt-formulare > * { min-width: 0; }

@media (max-width: 720px) {
  /* Die Geräteliste der Unterlagen: Namen umbrechen statt hinausschieben. */
  .dfs-unt-liste{max-height:46vh;}
  .dfs-unt-g,.dfs-unt-liste a,.dfs-unt-liste button{overflow-wrap:anywhere;}
  .dfs-unt-pruefung{overflow-wrap:anywhere;}

  /* Die Knöpfe der Rubrik untereinander, jeder über die volle Breite: Zwei
     nebeneinander lassen von „Eintrag hinzufügen" zwei Wörter übrig. */
  .dfs-wv-titelzeile > button{flex:0 0 100%;justify-content:center;}
}

/* Die Liste der Anhänge steht UNTER dem Hinzufügen, mit eigener Überschrift. */
.dfs-wv-anhkopf{font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--leise);margin:22px 0 10px;
  padding-top:16px;border-top:1px solid var(--kante2);}
.dfs-wv-anh-bild{border:0;padding:0;background:none;cursor:zoom-in;flex:none;}
.dfs-wv-anh-bild img{width:76px;height:76px;object-fit:cover;border-radius:8px;
  border:1px solid var(--kante2);display:block;}

@media (max-width: 720px) {
  /* Auf dem Handy war der Papierkorb fast so groß wie das Bild daneben. */
  .dfs-wv-anh{flex-wrap:wrap;gap:10px;}
  .dfs-wv-anh-bild img{width:112px;height:112px;}
  .dfs-wv-anh-mitte{flex:1 1 140px;min-width:0;}
  /* Das Feld füllt die Zeile und bekommt den Knopf darunter. `width:100%`
     und nicht nur `flex`: Ein Eingabefeld bringt eine eigene Mindestbreite
     mit (rund 177px), und die gewinnt gegen jedes `flex-basis`. */
  .dfs-wv-anh-form{flex-wrap:wrap;}
  .dfs-wv-anh-form input{flex:1 1 100%;width:100%;min-width:0;box-sizing:border-box;}
  .dfs-wv-vorschau img,.dfs-wv-anh-vorschau img{height:86px;}
}

/* Die Anmeldeseite: ID oben, Einmalcode darunter — derselbe Aufbau wie beim
   Dental Technik Commander, damit beide Seiten sich gleich anfühlen. */
.dfs-tor-voll{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;}
.dfs-tor-oder{display:flex;align-items:center;gap:12px;margin:18px 0 14px;
  color:var(--leise);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;}
.dfs-tor-oder::before,.dfs-tor-oder::after{content:"";flex:1;height:1px;background:var(--kante);}
.dfs-tor-code label{display:block;font-size:12.5px;font-weight:600;color:var(--leise);
  margin-bottom:6px;}
.dfs-tor-code input{width:100%;box-sizing:border-box;font-size:24px;font-weight:700;
  letter-spacing:.22em;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  border:1px solid var(--kante);border-radius:12px;padding:12px 10px;color:var(--text);
  margin-bottom:10px;}
.dfs-tor-code input:focus{outline:none;border-color:var(--prim);
  box-shadow:0 0 0 4px var(--prim-tint);}
.dfs-tor-klein{font-size:11.5px;color:var(--leise);margin:10px 0 0;text-align:center;}

/* Der Kopf über der Anmeldekarte — Zeichen, Name der Anwendung, darunter
   klein das Haus. Dieselbe Form wie beim Dental Technik Commander: Wer beide
   benutzt, erkennt sie wieder. */
.dfs-tor-kopf{display:flex;align-items:center;gap:13px;margin:0 0 16px;
  width:100%;max-width:440px;}
.dfs-tor-zeichen{display:block;border-radius:11px;flex:none;}
/* Der Anfangsbuchstabe orange — so trägt die Wortmarke von Dental Fast
   Support ihre drei, und die Redaktion ist dasselbe Haus. */
.dfs-tor-name{font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--text);}
.dfs-tor-name i{font-style:normal;color:var(--prim);}
.dfs-tor-haus{font-size:12.5px;color:var(--leise);margin-top:1px;}

/* ---------- „Wer darf was" ---------- */

/* Die Zeilen, die auf die eigene Kennung zutreffen, heben sich ab — sonst
   liest man eine Tabelle und sucht sich selbst darin. */
.dfs-rechte-eigen { display: flex; flex-wrap: wrap; gap: 8px; }
.dfs-rechte-t td code { font-size: 13px; }
.dfs-rechte-ja td { background: var(--gruen-tint); }
.dfs-rechte-ja:hover td { background: var(--gruen-tint); }
.dfs-rechte-hat { color: var(--gruen); }

/* Am Handy passt keine vierspaltige Tabelle auf 390 Pixel. Sie bekommt eine
   eigene Hülle, in der sie waagerecht rollt — der Seitenkörper nicht. */
.dfs-red-tabelle-huelle { overflow-x: auto; max-width: 100%; }
.dfs-red-tabelle-huelle .dfs-red-tabelle { min-width: 560px; }

/* ---------- Diagramme ---------- */

/* Selbst gezeichnet: kein fremder Server, kein halbes Megabyte JavaScript
   für drei Ringe. Die Farben ordnen; jede Zahl steht trotzdem im Klartext
   daneben — ein Balken ohne Zahl ist eine Behauptung. */
.dfs-dia-wand {
  display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.dfs-dia-k {
  background: var(--karte); border: 1px solid var(--kante); border-radius: 16px;
  padding: 16px 18px;
}
.dfs-dia-t {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--leise); margin: 0 0 14px;
}
.dfs-dia-fuss { font-size: 11.5px; color: var(--leise); margin: 12px 0 0; line-height: 1.5; }
.dfs-dia-leer { font-size: 13px; color: var(--leise); margin: 0; }

/* Ring und Legende nebeneinander; am Telefon untereinander. */
.dfs-dia-paar { display: flex; align-items: center; gap: 18px; }
@media (max-width: 420px) { .dfs-dia-paar { flex-direction: column; align-items: flex-start; } }

.dfs-dia-ring { position: relative; flex: 0 0 auto; width: 104px; height: 104px; }
.dfs-dia-ring svg { width: 100%; height: 100%; display: block; }
.dfs-dia-rinne { stroke: var(--kante2); }
.dfs-dia-bogen { transition: stroke-dasharray .4s ease; }
@media (prefers-reduced-motion: reduce) { .dfs-dia-bogen { transition: none; } }
.dfs-dia-mitte {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; pointer-events: none;
}
.dfs-dia-zahl { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.dfs-dia-wort { font-size: 10px; color: var(--leise); letter-spacing: .04em; }

.dfs-dia-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; min-width: 0; }
.dfs-dia-legende li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.dfs-dia-fleck { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.dfs-dia-l-wort { color: var(--sek); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dfs-dia-l-zahl { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.dfs-dia-balken { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.dfs-dia-balken li { display: grid; grid-template-columns: 1fr; gap: 5px; font-size: 12.5px; }
.dfs-dia-b-wort { color: var(--sek); }
.dfs-dia-b-rinne {
  grid-column: 1; height: 9px; border-radius: 99px; background: var(--kante2); overflow: hidden;
}
.dfs-dia-b-stab { display: block; height: 100%; border-radius: 99px; transition: width .4s ease; }
@media (prefers-reduced-motion: reduce) { .dfs-dia-b-stab { transition: none; } }
.dfs-dia-b-zahl {
  grid-row: 1; grid-column: 1; justify-self: end;
  font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Die sechs Farben. Sie stehen hier und nicht im TypeScript: Eine Farbe ist
   eine Gestaltungsfrage, und sie gehört dorthin, wo die anderen auch stehen. */
.f-prim  { background: var(--prim);  stroke: var(--prim); }
.f-gruen { background: var(--gruen); stroke: var(--gruen); }
.f-viol  { background: var(--viol);  stroke: var(--viol); }
.f-blau  { background: #2C6BAA;      stroke: #2C6BAA; }
.f-grau  { background: #C3CCD8;      stroke: #C3CCD8; }
.f-rot   { background: var(--rot);   stroke: var(--rot); }

/* Der Eintragstext in einem eigenen Feld — wie in der öffentlichen Ansicht. */
.dfs-wv-e-text { background: var(--kante2); border-radius: 12px; padding: 12px 14px; margin-top: 8px; }
.dfs-wv-e-text p { margin: 0 0 8px; }
.dfs-wv-e-text p:last-child { margin-bottom: 0; }

/* Der Weg hinaus nach Dental Fast Support. Wie das Gegenstück drüben:
   klein und grau, erst beim Darüberfahren farbig. */
.dfs-wv-raus { display: inline-flex; align-items: center; padding: 5px;
  opacity: .34; filter: grayscale(1); transition: opacity .15s, filter .15s; }
.dfs-wv-raus:hover { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) { .dfs-wv-raus { transition: none; } }

/* Der Eintragstext in einem eigenen Feld — wie in der öffentlichen Ansicht. */
.dfs-wv-e-text { background: var(--kante2); border-radius: 12px; padding: 12px 14px; margin-top: 8px; }
.dfs-wv-e-text p { margin: 0 0 8px; }
.dfs-wv-e-text p:last-child { margin-bottom: 0; }

/* Der Weg hinaus nach Dental Fast Support. Wie das Gegenstück drüben:
   klein und grau, erst beim Darüberfahren farbig. */
.dfs-wv-raus { display: inline-flex; align-items: center; padding: 5px; border-radius: 8px;
  opacity: .34; filter: grayscale(1); transition: opacity .15s, filter .15s; }
.dfs-wv-raus:hover { opacity: 1; filter: none; background: var(--kante2); }
.dfs-wv-raus img { display: block; }
@media (prefers-reduced-motion: reduce) { .dfs-wv-raus { transition: none; } }

/* ---------- Die letzten Tage ---------- */

.dfs-dia-tage { display: grid; gap: 10px; }
.dfs-dia-t-feld {
  display: flex; align-items: flex-end; gap: 3px; height: 96px;
  border-bottom: 1px solid var(--kante); padding-bottom: 2px;
}
.dfs-dia-t-spalte {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 4px;
}
/* Ein Tag ohne Zugriff bekommt einen Strich, nicht nichts: Eine Lücke
   wegzulassen hieße, eine gleichmäßige Reihe vorzutäuschen, die es nicht gab. */
.dfs-dia-t-stab {
  background: var(--prim); border-radius: 4px 4px 0 0; min-height: 2px;
  position: relative; overflow: hidden;
  transition: height .4s ease;
}
.dfs-dia-t-grau { position: absolute; left: 0; right: 0; bottom: 0; background: #C3CCD8; }
.dfs-dia-t-tag {
  font-size: 9.5px; color: var(--leise); text-align: center;
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.dfs-dia-t-fuss {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: 11.5px; color: var(--leise);
}
.dfs-dia-t-legende { display: inline-flex; align-items: center; gap: 5px; }
.dfs-dia-t-legende .dfs-dia-fleck { margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .dfs-dia-t-stab { transition: none; } }

/* Die beiden Zeitkacheln dürfen breiter sein als die Ringe — vierzehn Balken
   auf 270 Pixeln sind Striche. `dfs-dia-breit` sagt das ausdrücklich; über
   `nth-last-child` zu zählen ging so lange gut, bis eine Kachel dazukam. */
.dfs-dia-wand > .dfs-dia-breit { grid-column: span 2; }
@media (max-width: 720px) { .dfs-dia-wand > .dfs-dia-breit { grid-column: span 1; } }

/* ---------- Die Redaktion am Telefon ---------- */

/* **Die Reiterleiste war der Grund, warum die ganze Seite seitwärts
   rutschte.** Zehn Einträge in einer Flex-Zeile ohne Umbruch und ohne
   Rollbalken: Bei 390 Pixeln steht die Hälfte draußen und schiebt den
   Seitenkörper mit hinaus — man scrollt dann überall waagerecht, auch dort,
   wo nichts zu sehen ist.

   Jetzt rollt die Leiste FÜR SICH. Umbrechen wäre die naheliegende
   Alternative und die schlechtere: Aus einer Zeile würden drei, und der
   Inhalt begänne erst unterhalb des halben Schirms. */
@media (max-width: 760px) {
  /* Schmalere Ränder — 28 Pixel je Seite sind auf 390 ein Siebtel der
     Fläche. Steht VOR der Reiterleiste: Beide tragen `dfs-red-breit`, und
     bei gleicher Gewichtung gewinnt die spätere Regel. */
  .dfs-red-breit { padding: 0 16px; }

  .dfs-red-reiter {
    margin-left: 0;
    overflow-x: auto;
    overflow-y: hidden;
    /* Die Leiste darf über den Rand des Blattes hinaus rollen, sonst sähe
       der erste Reiter aus, als klebte er an der Kante. */
    padding: 0 14px 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .dfs-red-reiter::-webkit-scrollbar { display: none; }
  .dfs-red-reiter a {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 13.5px;
    scroll-snap-align: start;
  }

  /* Der Kopf trägt den Namen rechts; am Telefon ist dafür kein Platz neben
     der Marke. */
  .dfs-red-blatt { padding: 18px 0 48px; }
  .dfs-red-titel { font-size: 19px; }

  /* Knopfreihen brechen um, statt zu quetschen. */
  .dfs-red-filter { gap: 8px; }
  .dfs-red-filter .dfs-cv-wahl { max-width: none; }
  .dfs-wahl { min-width: 0; }

  /* Und alles, was von Natur aus breit ist, rollt in seiner eigenen Hülle:
     Der Seitenkörper selbst bleibt schmal. */
  .dfs-red-tabelle-huelle { margin-inline: -2px; }
}

/* Vierzehn Tagesbalken auf 330 Pixeln sind Striche mit Zahlen darunter, die
   sich überlappen. Die Balken bleiben — sie sind das Bild; jede zweite
   Beschriftung geht. */
@media (max-width: 560px) {
  .dfs-dia-t-spalte:nth-child(even) .dfs-dia-t-tag { visibility: hidden; }
  .dfs-dia-t-feld { gap: 2px; height: 80px; }
  .dfs-dia-k { padding: 14px 15px; }
}