/* Designvorlage Dental Fast Support, unveraendert uebernommen.
   Geaendert wurde genau eines: Der @import auf Google Fonts ist entfernt.
   Beide Schriftfamilien liegen lokal und kommen ueber /statisch/schrift.css -
   DFX docs/DESIGN.md verlangt ausdruecklich keine Google-CDN im Produkt.

   Alles darunter, ab "Ergaenzungen", ist neu: Die Vorlage ist eine React-App
   mit Knoepfen, hier sind dieselben Elemente Verweise und Formulare, damit die
   Seite ohne JavaScript funktioniert. Das Aussehen bleibt gleich. */

/* Ergaenzung, nicht aus der Vorlage - und die Ursache eines Fehlers, der
   wochenlang wie Absicht aussah: Die Vorlage lief als React-App, die ihren
   eigenen Reset mitbrachte. Hier fehlte er, und `body` hat im Browser von Haus
   aus 8px Rand. Zusammen mit `min-height:100vh` an `.dfs` ergab das
   100vh + 16px - also auf JEDER Seite ein Rollbalken, unabhaengig davon, wie
   gross das Fenster ist und wie wenig darauf steht. */
html, body { margin: 0; padding: 0; }

.dfs {
  --grund:#FFFFFF; --karte:#FFFFFF; --kante:#E1E6ED; --kante2:#ECEFF4;
  --text:#0F2340; --leise:#65788F;
  --prim:#FF6A1F; --prim-tief:#E2540C; --prim-tint:#FFEDE2;
  --sek:#12356B; --sek-tint:#E7EDF8;
  --gruen:#12A45E; --gruen-tint:#E2F6EC;
  --rot:#D93A1F; --rot-tint:#FDE8E3;
  --viol:#6B4BD6; --viol-tief:#5436B8; --viol-tint:#EDE8FC;
  --petrol:#0E7C86; --petrol-tint:#E0F4F6;
  --stahl:#42597A; --stahl-tint:#EBF0F7;
  /* Vorlage: 720px. Auf Wunsch verbreitert - die Trefferliste zeigt Code,
     Geraet, Titel und Bedeutung in einer Zeile, und bei Geraetenamen wie
     `Vacuklav(24B+)(24BL+)(30B+)` wurde das eng. Festgehalten in DESIGN.md. */
  --spalte:880px;

  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--text); background:var(--grund);
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.dfs *,.dfs *::before,.dfs *::after{box-sizing:border-box;}
.dfs button,.dfs input,.dfs textarea{font:inherit;color:inherit;}
.dfs :focus-visible{outline:2px solid var(--prim);outline-offset:2px;border-radius:8px;}
.dfs .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;}
.dfs .num{font-variant-numeric:tabular-nums;}

/* eine Spalte, eine Kante – Kopf, Feld und Inhalt fluchten */
.dfs-spalte{width:100%;max-width:var(--spalte);margin:0 auto;padding:0 20px;}

.dfs-kopf{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--kante);}
.dfs-kopf-in{display:flex;align-items:center;gap:8px;height:60px;}
/* **Die Wortmarke ist immer duenn.** In der Vorlage steht hier 700, und das
   war nie zu sehen: Dort ist die Marke ein <button>, und `.dfs button{font:
   inherit}` hat es ueberschrieben. Der Wert, den die Vorlage tatsaechlich
   zeigt, ist 400 (DESIGN.md A-2).

   Das 700 hat seitdem viermal zugeschlagen - im Kopf, im Fenster „Über", auf
   der Anmeldeseite der Redaktion und zuletzt an der wandernden Marke, jedes
   Mal, wenn sie in einem Element stand, das nicht `font: inherit` bekommt.
   Jetzt steht 400 an der Wurzel, und die Fehlerklasse ist weg. */
.dfs-marke{background:none;border:0;padding:6px 0;cursor:pointer;font-weight:400;font-size:16.5px;
  letter-spacing:-.015em;white-space:nowrap;}
.dfs-marke i{font-style:normal;color:var(--prim);}

/* ---------- Die wandernde Wortmarke ---------- */

/* Im Kopf liegen zwei Dinge uebereinander: das DFS-Zeichen und die
   Wortmarke. Im Ruhezustand ist das Zeichen zu sehen und die Wortmarke steht
   gross ueber dem Suchfeld; sobald jemand die Suche anfasst, zerfaellt das
   Zeichen und die Wortmarke faehrt an seine Stelle.

   `position: relative` und beide absolut darin: So braucht der Kopf keinen
   Platz fuer beide, und die Wortmarke kann ueber ihn hinauswandern, ohne
   etwas zu verschieben. */
.dfs-marke-platz-kopf{
  position:relative;display:inline-flex;align-items:center;min-width:120px;height:32px;
  text-decoration:none;color:inherit;
}
/* Klein im Kopf, gross ueber dem Suchfeld - im selben Schnitt. Ein Wechsel
   des Gewichts stand hier einmal; er sah nach zwei Marken aus statt nach
   einer, die sich bewegt. */
.dfs-marke-platz-kopf .dfs-marke{
  position:absolute;left:0;top:50%;transform-origin:left center;
  transform:translateY(-50%);
  transition:transform .62s cubic-bezier(.22,.75,.2,1);
}
.dfs-zeichen{
  display:block;height:20px;width:auto;
  transition:opacity .3s;
}

/* Ruhezustand: Zeichen sichtbar, Wortmarke gross ueber dem Suchfeld. Die drei
   Werte kommen aus `logo.js` - sie haengen an der Spaltenbreite und an der
   Hoehe der Hinweiszeile und lassen sich nicht festschreiben. */
/* `translateY(-50%)` bleibt - es ist die senkrechte Mitte aus der Grundregel
   und muss erhalten bleiben, sonst springt die Marke im Kopf. Waagerecht
   dagegen KEIN `-50%`: `logo.js` rechnet von Mitte zu Mitte, und ein
   zusaetzliches halbes Markenmass schob sie um genau diese Haelfte nach links
   - nachgemessen 61px bei 123px Breite. */
.dfs.dfs-ruhe .dfs-marke-platz-kopf .dfs-marke{
  transform:translate(var(--marke-x, 0px), calc(-50% + var(--marke-y, 0px)))
            scale(var(--marke-gross, 1));
  transform-origin:center center;
}
.dfs:not(.dfs-ruhe) .dfs-zeichen{opacity:0;pointer-events:none;}

/* Der leere Platz ueber dem Suchfeld. Er reserviert die Hoehe, damit nichts
   springt, wenn die Marke ihn verlaesst - und traegt eine unsichtbare Kopie
   der Wortmarke, an der `logo.js` misst. */
.dfs-marke-platz{
  display:flex;justify-content:center;margin:0 0 30px;
  visibility:hidden;pointer-events:none;
}
.dfs-marke-platz .dfs-marke{font-size:62px;letter-spacing:-.035em;padding:0;}
@media (max-width:720px){.dfs-marke-platz .dfs-marke{font-size:40px;}}

/* Das Wort unter der Marke. Kein Verweis und kein Zeichen: Die Wege ins
   Projekt stehen in der Fussleiste, hier steht nur, was das hier ist. */
.dfs-marke-unter{
  text-align:center;margin:-22px 0 34px;
  font-size:13px;font-weight:600;color:var(--leise);
  text-transform:uppercase;letter-spacing:.16em;
}
.dfs-buehne.kompakt .dfs-marke-unter{display:none;}
.dfs-marke-bereit:not(.dfs-ruhe) .dfs-marke-unter{display:none;}
/* Sobald gesucht wird, ist der Platz nicht mehr noetig.
   `.dfs-marke-bereit` setzt `logo.js`, wenn es gemessen hat - vorher bleibt
   der Platz stehen, sonst haette der Bruchteil einer Sekunde eine Seite ohne
   ihn gezeigt und danach eine mit. */
.dfs-buehne.kompakt .dfs-marke-platz{display:none;}
.dfs-marke-bereit:not(.dfs-ruhe) .dfs-marke-platz{display:none;}

/* Bis gemessen ist, bleibt die Wortmarke unsichtbar: Sonst sieht man sie
   einen Wimpernschlag lang im Kopf stehen und dann nach unten springen. */
.dfs:not(.dfs-marke-bereit) .dfs-marke-platz-kopf .dfs-marke{opacity:0;}
.dfs-marke-bereit .dfs-marke-platz-kopf .dfs-marke{
  opacity:1;
  transition:transform .62s cubic-bezier(.22,.75,.2,1), opacity .2s;
}

/* Waehrend `logo.js` misst, darf nichts unterwegs sein.
   `getBoundingClientRect` liefert die TRANSFORMIERTE Lage, und eine laufende
   Ueberblendung haelt den alten Wert noch .62s lang fest - gemessen wuerde
   dann ein Zwischenstand. Deshalb setzt das Skript diese Klasse, misst und
   nimmt sie nach einem erzwungenen Umbruch wieder weg. */
.dfs-marke-misst .dfs-marke-platz-kopf .dfs-marke{transition:none !important;}

/* Der Zerfall.
   Kein Ueberblenden: Das Zeichen soll aussehen, als loese es sich auf. Ein
   Weichzeichner allein sieht nach Unschaerfe aus; zusammen mit dem Aufhellen,
   dem leichten Wachsen und dem Wandern nach oben liest es sich als Staub, der
   davonzieht. */
@keyframes dfszerfall{
  0%{opacity:1;filter:blur(0);transform:translateY(0) scale(1);}
  35%{opacity:.85;filter:blur(.6px) brightness(1.4);transform:translateY(-1px) scale(1.02);}
  100%{opacity:0;filter:blur(6px) brightness(2.2);transform:translateY(-14px) scale(1.18);}
}
.dfs.dfs-zerfaellt .dfs-zeichen{animation:dfszerfall .52s ease-out forwards;}

/* Wer Bewegung abgestellt hat, bekommt keine: Die Marke steht dann einfach im
   Kopf, das Zeichen ist weg. Kein Ruckeln, kein halber Weg. */
@media (prefers-reduced-motion:reduce){
  .dfs-marke-platz-kopf .dfs-marke{transition:none;}
  .dfs.dfs-zerfaellt .dfs-zeichen{animation:none;opacity:0;}
}
.dfs-kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:4px;}

.dfs-flach{background:none;border:0;color:var(--leise);font-size:14px;font-weight:600;
  min-height:40px;padding:0 12px;border-radius:11px;cursor:pointer;}
.dfs-flach:hover{color:var(--text);background:var(--kante2);}

.dfs-icon{width:40px;height:40px;border-radius:11px;border:1px solid var(--kante);
  background:var(--karte);color:var(--leise);display:grid;place-items:center;cursor:pointer;
  position:relative;flex:none;}
.dfs-icon:hover{color:var(--text);border-color:#D6DEE9;}
.dfs-icon.an{background:var(--viol-tint);border-color:transparent;color:var(--viol);}
/* „Diese Ansicht ist offen" - und NICHT `.an`. Violett samt Statuspunkt heisst
   in dieser Oberflaeche „als Technik angemeldet"; ein zweiter Sinn an
   derselben Farbe waere eine Verwechslung, die niemand aufloest. Hier nur ein
   gefuellter Grund in der Akzentfarbe, ohne Punkt. */
.dfs-icon.offen{background:var(--prim-tint);border-color:transparent;color:var(--prim);}
.dfs-icon.an::after{content:"";position:absolute;top:-2px;right:-2px;width:9px;height:9px;
  border-radius:99px;background:var(--viol);border:2px solid var(--grund);}

/* ---------- Suche ---------- */
.dfs-buehne{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-top:40px;padding-bottom:88px;}
.dfs-buehne.kompakt{justify-content:flex-start;padding-top:32px;padding-bottom:56px;}

.dfs-feldbox{position:relative;}
.dfs-feld{display:flex;align-items:center;gap:14px;background:var(--karte);
  border:1.5px solid #DCE2EA;border-radius:99px;padding:0 10px 0 22px;height:58px;
  box-shadow:0 1px 3px rgba(15,35,64,.05);
  transition:border-color .15s,box-shadow .18s,transform .18s;}
.dfs-feld:hover{box-shadow:0 6px 18px rgba(15,35,64,.09);border-color:#CFD8E2;}
.dfs-feld:focus-within{border-color:var(--prim);
  box-shadow:0 0 0 4px var(--prim-tint),0 8px 22px rgba(226,84,12,.10);}
.dfs-feld input:focus-visible{outline:none;}

/* leerer Zustand: größer, weicher, deutlich als Einladung */
.dfs-buehne:not(.kompakt) .dfs-feld{height:66px;padding-left:26px;
  box-shadow:0 2px 6px rgba(15,35,64,.06);}
.dfs-buehne:not(.kompakt) .dfs-feld:hover{transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(15,35,64,.11);}
.dfs-buehne:not(.kompakt) .dfs-feld:focus-within{transform:translateY(-1px);}
.dfs-buehne:not(.kompakt) .dfs-feld input{font-size:20px;}
.dfs-buehne:not(.kompakt) .dfs-feld input::placeholder{font-size:17px;}
.dfs-buehne:not(.kompakt) .dfs-lupe{width:22px;height:22px;}
.dfs-feld input{flex:1;border:0;outline:0;background:none;height:100%;font-size:18px;
  font-family:'IBM Plex Mono',monospace;font-weight:500;letter-spacing:.02em;min-width:0;}
.dfs-feld input::placeholder{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;
  font-size:15.5px;letter-spacing:0;color:#9AAABE;}
.dfs-lupe{width:20px;height:20px;color:var(--leise);flex:none;}
.dfs-leeren{background:none;border:0;color:var(--leise);width:40px;height:40px;border-radius:11px;
  cursor:pointer;display:grid;place-items:center;flex:none;}
.dfs-leeren:hover{background:var(--kante2);color:var(--text);}

/* Verlauf beim Hineinklicken */
.dfs-verlauf{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:25;
  background:var(--karte);border:1px solid var(--kante);border-radius:22px;
  box-shadow:0 14px 32px rgba(15,35,64,.13);overflow:hidden;}
.dfs-verlauf-kopf{display:flex;align-items:center;gap:8px;padding:12px 22px 6px;
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--leise);}
.dfs-verlauf-liste{max-height:244px;overflow-y:auto;padding-bottom:6px;}
.dfs-verlauf-z{width:100%;display:flex;align-items:center;gap:12px;padding:0 22px;min-height:46px;
  background:none;border:0;cursor:pointer;text-align:left;}
.dfs-verlauf-z:hover,.dfs-verlauf-z.gewaehlt{background:#F7F9FB;}
.dfs-verlauf-c{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:14px;
  font-variant-numeric:tabular-nums;}
.dfs-verlauf-t{color:var(--leise);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dfs-verlauf-x{margin-left:auto;color:#A9B7C7;flex:none;display:grid;place-items:center;
  width:28px;height:28px;border-radius:8px;background:none;border:0;cursor:pointer;}
.dfs-verlauf-x:hover{background:var(--kante2);color:var(--text);}

/* ---------- Trefferliste ---------- */
.dfs-stufe{display:flex;align-items:center;gap:10px;margin:28px 0 12px;
  font-size:11.5px;font-weight:700;color:var(--leise);text-transform:uppercase;letter-spacing:.07em;}
.dfs-stufe span{text-transform:none;letter-spacing:0;font-weight:600;}
.dfs-stufe::after{content:"";flex:1;height:1px;background:var(--kante);order:9;}

.dfs-karte{background:var(--karte);border:1px solid var(--kante);border-radius:16px;
  box-shadow:0 1px 2px rgba(15,35,64,.03);}
.dfs-treffer{width:100%;text-align:left;display:block;padding:15px 16px;border:0;background:none;
  cursor:pointer;border-radius:15px;}
.dfs-treffer + .dfs-treffer{border-top:1px solid var(--kante2);border-radius:0;}
.dfs-treffer:hover{background:#F7F9FB;}
.dfs-kopfzeile{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px;}
.dfs-code-klein{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:12.5px;
  letter-spacing:.03em;background:var(--sek-tint);color:var(--sek);border-radius:7px;padding:3px 8px;
  font-variant-numeric:tabular-nums;flex:none;}
.dfs-geraet-klein{font-size:12.5px;font-weight:600;color:var(--leise);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.dfs-treffer-t{font-weight:700;font-size:15.5px;letter-spacing:-.01em;display:block;line-height:1.35;}
.dfs-treffer-m{color:var(--leise);font-size:13.5px;margin-top:3px;display:block;}
.dfs-treffer-m mark{background:var(--prim-tint);color:var(--prim-tief);border-radius:4px;
  padding:0 2px;font-weight:600;}
.dfs-quote{margin-left:auto;flex:none;font-size:11.5px;font-weight:700;color:var(--leise);
  font-variant-numeric:tabular-nums;}

/* ---------- Detail ---------- */
.dfs-zurueck{display:inline-flex;align-items:center;gap:7px;background:none;border:0;
  color:var(--leise);font-size:13.5px;font-weight:600;min-height:40px;padding:0 10px 0 4px;
  border-radius:11px;cursor:pointer;margin:24px 0 8px;}
.dfs-zurueck:hover{color:var(--text);background:var(--kante2);}

.dfs-detail-koerper{padding:22px 26px 26px;}
.dfs-band{display:flex;align-items:center;gap:12px;padding:11px 26px;background:#F7F9FB;
  border-bottom:1px solid var(--kante2);border-radius:16px 16px 0 0;flex-wrap:wrap;}
.dfs-band-code{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:17px;
  letter-spacing:.05em;color:var(--sek);font-variant-numeric:tabular-nums;}
.dfs-band-meta{font-size:13px;font-weight:600;color:var(--leise);}
.dfs-detail-t{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin:0 0 6px;}
.dfs-geraet{color:var(--leise);font-size:14px;font-weight:600;}
.dfs-marker{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:5px 11px;
  font-size:12px;font-weight:700;}
.dfs-marker.viol{background:var(--viol-tint);color:var(--viol);}
.dfs-marker.sek{background:var(--sek-tint);color:var(--sek);}
.dfs-marker.prim{background:var(--prim-tint);color:var(--prim-tief);}
.dfs-marker.gruen{background:var(--gruen-tint);color:var(--gruen);}
.dfs-marker.rot{background:var(--rot-tint);color:var(--rot);}
.dfs-marker.petrol{background:var(--petrol-tint);color:var(--petrol);}
.dfs-marker.stahl{background:var(--stahl-tint);color:var(--stahl);}

.dfs-block{margin-top:24px;}
.dfs-block h3{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--leise);margin:0 0 8px;}
.dfs-block p{margin:0;font-size:15.5px;}
.dfs-liste{margin:0;padding:0;list-style:none;counter-reset:s;}
.dfs-liste li{counter-increment:s;position:relative;padding:10px 0 10px 38px;font-size:15.5px;}
.dfs-liste li + li{border-top:1px solid var(--kante2);}
.dfs-liste li::before{content:counter(s);position:absolute;left:0;top:10px;width:24px;height:24px;
  border-radius:8px;background:var(--prim-tint);color:var(--prim-tief);font-size:12px;font-weight:700;
  display:grid;place-items:center;font-variant-numeric:tabular-nums;}
.dfs-ul{margin:0;padding-left:20px;}
.dfs-ul li{font-size:15.5px;padding:3px 0;}

.dfs-sperre{background:var(--viol-tint);border-radius:12px;padding:16px;display:flex;gap:12px;
  align-items:flex-start;}
.dfs-sperre-t{font-weight:700;font-size:14.5px;color:var(--viol);}
.dfs-sperre-m{font-size:13.5px;color:var(--sek);margin-top:2px;}

.dfs-fuss-meta{margin-top:26px;padding-top:16px;border-top:1px solid var(--kante2);
  display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--leise);}
.dfs-fuss-meta b{font-weight:600;color:var(--text);}

/* ---------- Anfrage ---------- */
.dfs-leerkarte{padding:26px;}
.dfs-leer-t{font-size:19px;font-weight:800;letter-spacing:-.015em;margin:0 0 6px;}
.dfs-leer-m{color:var(--leise);margin:0 0 18px;font-size:15px;}
.dfs-textarea{width:100%;min-height:96px;border:1.5px solid var(--kante);border-radius:12px;
  padding:12px 14px;resize:vertical;background:var(--karte);font-size:15px;}
.dfs-textarea:focus{outline:0;border-color:var(--prim);box-shadow:0 0 0 4px var(--prim-tint);}
.dfs-warn{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--leise);margin-top:8px;}
.dfs-knopf{min-height:44px;padding:0 18px;border-radius:12px;border:0;background:var(--prim);color:#fff;
  font-size:14.5px;font-weight:700;cursor:pointer;margin-top:14px;}
.dfs-knopf:hover{background:var(--prim-tief);}
.dfs-knopf.still{background:var(--karte);color:var(--text);border:1px solid var(--kante);}
.dfs-knopf.still:hover{background:var(--kante2);}
/* Dritte Stufe: ein Knopf, der einer ist, aber nichts verspricht. „Später"
   steht neben „Einverstanden" und „Einzelheiten" und darf nicht so aussehen,
   als sei es die dritte gleichwertige Wahl - es ist der Weg an der Frage
   vorbei. Ohne Rahmen, ohne Flaeche, in der leisen Farbe. */
.dfs-knopf.leise{background:none;color:var(--leise);border:0;font-weight:600;}
.dfs-knopf.leise:hover{background:var(--kante2);color:var(--text);}
.dfs-bestaetigt{display:flex;gap:12px;align-items:flex-start;background:var(--gruen-tint);
  border-radius:12px;padding:16px;}

/* ---------- Fuß ---------- */
.dfs-fuss{border-top:1px solid var(--kante);margin-top:auto;}
/* Drei Zonen: links das Paragraphenzeichen, in der Mitte Über und Projekt,
   rechts die Fassung. `1fr auto 1fr` haelt die Mitte wirklich mittig, auch
   wenn links und rechts verschieden breit sind - `space-between` wuerde sie
   verschieben. */
.dfs-fuss-in{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;
  padding-top:16px;padding-bottom:16px;font-size:12.5px;color:var(--leise);}
.dfs-fuss-mitte{display:flex;gap:24px;align-items:center;justify-content:center;}
.dfs-fassung{justify-self:end;font-size:11.5px;font-weight:400;color:var(--leise);
  white-space:nowrap;}

/* Auf einem Telefon untereinander: Drei Zonen nebeneinander lassen von
   „Rechtliches" zwei Zeilen uebrig. */
@media (max-width:560px){
  .dfs-fuss-in{grid-template-columns:1fr;justify-items:center;gap:10px;}
  .dfs-fassung{justify-self:center;}
}
.dfs-fuss a{color:var(--leise);text-decoration:none;font-weight:600;}
.dfs-fuss a:hover{color:var(--text);}

.dfs-auf{animation:dfsauf .18s ease-out both;}
@keyframes dfsauf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){.dfs *{animation:none!important;transition:none!important;}}

@media (max-width:640px){
  .dfs-spalte{padding:0 16px;}
  .dfs-buehne{padding-bottom:64px;}
  .dfs-buehne.kompakt{padding-top:20px;}
  .dfs-kopf-in{height:56px;}
  .dfs-marke{font-size:15.5px;}
  .dfs-flach{padding:0 8px;font-size:13.5px;}
  .dfs-feld{height:52px;padding-left:18px;gap:11px;}
  .dfs-buehne:not(.kompakt) .dfs-feld{height:58px;padding-left:20px;}
  .dfs-buehne:not(.kompakt) .dfs-feld input{font-size:17px;}
  .dfs-buehne:not(.kompakt) .dfs-feld input::placeholder{font-size:15px;}
  .dfs-verlauf-z,.dfs-verlauf-kopf{padding-left:18px;padding-right:18px;}
  .dfs-feld input{font-size:16.5px;}
  .dfs-feld input::placeholder{font-size:14.5px;}
  .dfs-detail-koerper,.dfs-leerkarte{padding:18px;}
  .dfs-band{padding:10px 18px;}
  .dfs-band-code{font-size:15.5px;}
  .dfs-treffer{padding:14px;}
  .dfs-detail-t{font-size:19px;}
  .dfs-quote{display:none;}
  .dfs-verlauf-t{display:none;}
}

/* ==================================================================
   Ergaenzungen fuer die serverseitige Fassung
   ================================================================== */

/* Die Vorlage ist eine Einzelseitenanwendung: Treffer sind <button>, der
   Verlauf haengt an React-Zustand. Hier sind es <a> und Formulare. Damit
   Verweise wie die Knoepfe der Vorlage aussehen, folgt hier nur, was sich
   zwischen <a> und <button> unterscheidet - Farbe, Unterstreichung, Anzeige. */
.dfs a { color: inherit; text-decoration: none; }

/* Zeile 27 der Vorlage setzt `.dfs button,.dfs input,.dfs textarea{font:inherit}`.
   Dieser Selektor hat hoehere Spezifitaet als jede Klassenregel darunter, also
   gewinnt er: In der Vorlage rendern .dfs-marke, .dfs-knopf, .dfs-flach und
   .dfs-zurueck mit 400/15px - die 700/16.5px aus .dfs-marke werden nie sichtbar.
   Als <a> greift der Selektor nicht mehr und die Klassenregeln kaemen durch.
   Damit die Verweise so aussehen wie die Knoepfe der Vorlage, gilt fuer sie
   dasselbe. Gemessen im Browser, nicht geschaetzt. */
.dfs a.dfs-marke, .dfs a.dfs-treffer, .dfs a.dfs-icon, .dfs a.dfs-flach,
.dfs a.dfs-zurueck, .dfs a.dfs-knopf, .dfs a.dfs-leeren { font: inherit; }

.dfs button.dfs-marke, .dfs a.dfs-marke { display: inline-block; }
.dfs a.dfs-treffer, .dfs a.dfs-icon, .dfs a.dfs-flach, .dfs a.dfs-zurueck,
.dfs a.dfs-knopf, .dfs a.dfs-leeren { text-decoration: none; }
.dfs a.dfs-icon { display: grid; }
.dfs a.dfs-leeren { display: grid; }
.dfs a.dfs-knopf { display: inline-flex; align-items: center; justify-content: center; }
.dfs form { margin: 0; }

/* Der Verlauf klappt in der Vorlage per Zustand auf. Ohne JavaScript
   uebernimmt das :has() - sichtbar, solange das Feld den Fokus hat und leer
   ist. Genau die Bedingung der Vorlage. */
.dfs-verlauf { display: none; }
.dfs-feldbox:not(.dfs-still):has(input:placeholder-shown:focus) .dfs-verlauf,
.dfs-feldbox:has(input:placeholder-shown) .dfs-verlauf:hover { display: block; }
/* `dfs-still` haelt den Verlauf zu, obwohl das Feld den Fokus hat.
   Gesetzt wird sie nach einem Klick auf das X: Dort soll das Feld bereit
   bleiben, damit man sofort weitertippen kann - aber die letzten Suchen
   aufzuklappen, nachdem jemand gerade alles weggeraeumt hat, ist das
   Gegenteil dessen, was er wollte. Der naechste Klick ins Feld nimmt sie
   wieder weg; dann ist es eine Absicht und keine Nachwirkung. */
/* Die zweite Zeile ist der Grund, warum ein Klick auf eine Verlaufszeile
   ueberhaupt ankommt: Beim Druck der Maustaste verliert das Feld den Fokus,
   damit greift die erste Regel nicht mehr, und der Verlauf verschwaende -
   zwischen mousedown und mouseup, also bevor der Klick sein Ziel findet.
   Solange der Zeiger darauf liegt, haelt ihn `:hover` offen. */

/* Zeilenumbrueche aus dem Altbestand sollen stehen bleiben. */
.dfs-block p { white-space: pre-line; }

/* Geraeteuebersicht. In der Vorlage nicht vorgesehen, weil sie mit
   Beispieldaten arbeitete. Sie ist noetig, weil `Melag` und `Sirona` die
   haeufigsten erfolglosen Suchen des Altsystems sind - wer das eingibt, sucht
   sein Geraet. Gebaut aus den Bausteinen der Vorlage, nichts Neues erfunden. */
.dfs-hersteller { font-size: 15px; font-weight: 800; letter-spacing: -.02em; margin: 26px 0 10px; }
.dfs-geraeteraster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 640px) { .dfs-geraeteraster { grid-template-columns: 1fr; } }
.dfs-geraetekachel {
  background: var(--karte); border: 1px solid var(--kante); border-radius: 14px;
  padding: 13px 15px; display: block;
  box-shadow: 0 1px 2px rgba(15, 35, 64, .03);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.dfs-geraetekachel:hover {
  transform: translateY(-2px); border-color: #D6DEE9;
  box-shadow: 0 8px 20px rgba(15, 35, 64, .09);
}
.dfs-geraetekachel .m { font-weight: 700; font-size: 14.5px; letter-spacing: -.012em; }
.dfs-geraetekachel .u { color: var(--leise); font-size: 12.5px; font-weight: 600; margin-top: 2px; }

/* Unterlagen des Geraets. Pillenform wie die Marker der Vorlage. */
.dfs-unterlagen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.dfs-block + .dfs-unterlagen { margin-top: 22px; }

.dfs-unterlage {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 14px; border-radius: 99px;
  border: 1px solid var(--kante); background: var(--karte);
  font-size: 13.5px; font-weight: 600;
}
.dfs-unterlage:hover { border-color: #D6DEE9; background: var(--kante2); }

/* Nicht anklickbar - weil die Datei fehlt oder gar nichts hinterlegt ist.
   Sichtbar bleibt sie trotzdem: „kommt noch" ist eine Auskunft, ein
   weggelassener Punkt ist keine. Der Grund steht im title. */
.dfs-unterlage.aus {
  color: #9AAABE; background: #F7F9FB; border-style: dashed;
  cursor: default;
}
.dfs-unterlage.aus:hover { border-color: var(--kante); background: #F7F9FB; }
.dfs-unterlage.aus svg { opacity: .55; }

/* Waehrend die Live-Suche laedt. Kein Ladebalken, der Arbeit vortaeuscht -
   nur ein leiser Hinweis, dass die Liste gerade nicht mehr die aktuelle ist.
   Bei Antwortzeiten um 10 ms sieht das ohnehin fast niemand. */
.dfs-buehne.dfs-laedt #dfs-ergebnis { opacity: .55; transition: opacity .12s; }

/* Das X gehoert zum leeren Feld nicht hin - aber die Entscheidung faellt hier
   im Stylesheet und nicht beim Erzeugen der Seite. Grund: Die Live-Suche
   tauscht nur die Trefferliste, nicht das Feld. Waere das X serverseitig an
   den Suchbegriff gebunden, fehlte es nach dem Tippen auf der Startseite und
   bliebe stehen, nachdem man alles wieder geloescht hat. So folgt es dem
   tatsaechlichen Inhalt des Feldes, mit und ohne JavaScript. */
.dfs-feld:has(input:placeholder-shown) .dfs-leeren { display: none; }

/* `type="search"` bringt in manchen Browsern ein eigenes Loeschkreuz mit. Wir
   haben eins, das zum Rest passt - das andere waere doppelt. */
/* Der Cookie-Hinweis. Liegt ueber der Seite und laesst sich nur ueber den
   Knopf schliessen - so gewuenscht. Er ist ein Formular, kein Skript: Ohne
   JavaScript funktioniert er genauso. */
.dfs:has(> .dfs-keks) { display: block; min-height: 0; }

/* Der Schalter hinter „Später". Ein Kontrollkaestchen und kein Skript: Ohne
   JavaScript schliesst der Hinweis genauso. Er sitzt ausserhalb des Blickfelds
   statt auf `display:none`, weil ein ausgeblendetes Kaestchen von manchen
   Browsern nicht mehr geschaltet wird. */
/* `top:0; left:0` gehoert dazu, und zwar aus einem messbaren Grund: Ohne die
   beiden Zeilen steht das absolut gesetzte Kaestchen an seiner statischen
   Stelle - und die liegt am Dokumentende, weil der Hook es dorthin haengt.
   Ein Pixel unterhalb der letzten Zeile genuegt fuer einen Rollbalken auf
   jeder Seite (gemessen: 1051px Inhalt bei 1050px Fenster). */
.dfs-keks-schalter {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; margin: 0;
}
.dfs-keks-schalter:checked + .dfs-keks { display: none; }
/* „Später" ist ein `<label>` und traegt deshalb `display:inline-flex` von
   Hand: Ein Label ist kein Knopf, und `.dfs-knopf` richtet seinen Text ueber
   `min-height` aus, was bei `display:inline` nicht greift. */
.dfs-keks-knoepfe label.dfs-knopf,
.dfs-leerkarte label.dfs-knopf { display: inline-flex; align-items: center; }

/* „Einzelheiten" steht rechts aussen und klein. Es ist kein Angebot auf
   derselben Stufe wie die beiden anderen, sondern der Weg zum Nachlesen -
   `margin-left:auto` schiebt es an die Kante, weg von der Entscheidung. */
.dfs-keks-mehr {
  margin-left: auto; align-self: center; margin-top: 14px;
  font-size: 13px; font-weight: 600; color: var(--leise);
  text-decoration: underline; text-underline-offset: 3px;
}
.dfs-keks-mehr:hover { color: var(--text); }

.dfs-keks {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: rgba(15, 35, 64, .38);
  padding: 16px;
}
/* Die Karte waechst mit dem Fenster, aber nur bis 420px. Vorher waren es
   feste 520px mit 28px Innenrand - auf einem grossen Schirm ein Klotz, auf
   einem Telefon randvoll. `min()` macht daraus eine Groesse, die sich aus dem
   Fenster ergibt: 88% der Breite, hoechstens 420px.

   `100dvh` statt `100vh` bei der Hoehe: Auf einem Telefon zaehlt `vh` die
   Adressleiste mit, auch wenn sie eingeblendet ist - die Karte waere dann
   hoeher als das, was man sieht, und die Knoepfe laegen darunter. */
.dfs-keks-karte {
  background: var(--karte); border-radius: 18px; border: 1px solid var(--kante);
  padding: 22px 22px 18px; width: min(88vw, 420px);
  box-shadow: 0 20px 50px rgba(15, 35, 64, .2);
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
.dfs-keks-karte .dfs-leer-t { font-size: 17px; }
.dfs-keks-karte .dfs-leer-m { font-size: 14px; margin-bottom: 0; }
.dfs-keks-nicht {
  margin: 14px 0 0; padding: 0; list-style: none;
  display: grid; gap: 6px;
}
.dfs-keks-nicht li {
  font-size: 13px; color: var(--text); line-height: 1.45;
  padding-left: 20px; position: relative;
}
.dfs-keks-nicht li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--gruen); font-weight: 700;
}
.dfs-keks-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
/* Auf einem Telefon wird aus der Reihe eine Spalte, und „Einverstanden" nimmt
   die ganze Breite. `margin-left:auto` an „Einzelheiten" wuerde dort nichts
   mehr schieben - es zentriert sich stattdessen unter den beiden Knoepfen. */
@media (max-width: 420px) {
  .dfs-keks-knoepfe { flex-direction: column; align-items: stretch; gap: 8px; }
  /* `margin-top:0` gehoert dazu: `.dfs-knopf` bringt 14px mit, die in einer
     Reihe den Abstand zur Zeile darueber machen. Gestapelt kaemen sie zum
     `gap` hinzu - 22px zwischen zwei Knoepfen, die zusammengehoeren. */
  .dfs-keks-knoepfe .dfs-knopf { width: 100%; justify-content: center; margin-top: 0; }
  .dfs-keks-mehr { margin: 4px 0 0; align-self: center; }
}

/* Die Aufstellung auf /cookies. Schmal genug fuer ein Telefon: Sie scrollt
   waagerecht in ihrem eigenen Kasten, statt die Seite zu sprengen. */
.dfs-kekstabelle {
  width: 100%; border-collapse: collapse; margin-top: 4px;
  display: block; overflow-x: auto;
}
.dfs-kekstabelle th, .dfs-kekstabelle td {
  padding: 9px 12px; text-align: left; font-size: 13px; vertical-align: top;
  border-bottom: 1px solid var(--kante2);
}
.dfs-kekstabelle th {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--leise); white-space: nowrap;
}
.dfs-kekstabelle code {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; white-space: nowrap;
}
.dfs-kekstabelle .leise { color: var(--leise); white-space: nowrap; }

/* Auf einem Telefon wird aus der Aufstellung eine Liste.
   Drei Spalten auf 375px heisst: „Wofuer" bekommt hundert Pixel und bricht
   nach jedem zweiten Wort um. Waagerecht rollen waere die Alternative - aber
   niemand rollt eine Tabelle zur Seite, um zu lesen, wie lange ein Cookie
   bleibt. Also steht der Zweck als Absatz da, und Dauer und Anlass als eine
   leise Zeile darunter. */
@media (max-width: 560px) {
  .dfs-kekstabelle, .dfs-kekstabelle tbody,
  .dfs-kekstabelle tr, .dfs-kekstabelle td { display: block; }
  .dfs-kekstabelle thead { display: none; }
  .dfs-kekstabelle { overflow-x: visible; }
  .dfs-kekstabelle tr { padding: 12px 0; border-bottom: 1px solid var(--kante2); }
  .dfs-kekstabelle tr:last-child { border-bottom: 0; }
  .dfs-kekstabelle td { border: 0; padding: 0; font-size: 13.5px; }
  .dfs-kekstabelle td:first-child { margin-bottom: 5px; }
  /* Die zweite und dritte Zelle als eine Zeile: `inline` laesst sie
     nebeneinander laufen, das Trennzeichen kommt vor die dritte. */
  .dfs-kekstabelle td + td { display: inline; font-size: 12.5px; color: var(--leise); }
  .dfs-kekstabelle td + td + td::before { content: " · "; }
  .dfs-kekstabelle .leise { white-space: normal; }
}
.dfs-keks-fuss { margin: 12px 0 0; font-size: 12px; color: var(--leise); line-height: 1.5; }

/* Der Umschalter der Geraeteansicht - Aufklapper oder ganze Liste. */
.dfs-ansicht {
  display: flex; align-items: center; gap: 4px; margin-left: auto;
}
.dfs-ansicht button {
  border: 0; background: none; cursor: pointer;
  padding: 3px 8px; border-radius: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--leise);
}
.dfs-ansicht button:hover { background: var(--kante2); color: var(--text); }
.dfs-ansicht button.an { background: var(--sek-tint); color: var(--sek); }

/* Die Geraeteauswahl ueber den Treffern - ein Aufklapper, kein Auswahlfeld:
   Jeder Eintrag bleibt ein echter Verweis, und die Anzahl je Geraet steht
   daneben. Ohne JavaScript bedienbar. */
.dfs-geraetewahl {
  margin: 22px 0 2px;
  border: 1px solid var(--kante); border-radius: 12px;
  background: var(--karte);
}
.dfs-geraetewahl > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; font-size: 13.5px;
}
.dfs-geraetewahl > summary::-webkit-details-marker { display: none; }
.dfs-geraetewahl > summary::after {
  content: "▾"; margin-left: auto; color: var(--leise); font-size: 11px;
}
.dfs-geraetewahl[open] > summary::after { content: "▴"; }
.dfs-geraetewahl > summary:hover { background: #F7F9FB; border-radius: 11px; }

.dfs-geraetewahl-was {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--leise); flex: none;
}
.dfs-geraetewahl-ist { font-weight: 600; }
.dfs-geraetewahl-ist .num { color: var(--leise); font-weight: 600; margin-left: 4px; }

.dfs-geraetewahl-liste {
  border-top: 1px solid var(--kante2);
  max-height: 320px; overflow-y: auto;
}
.dfs-geraetewahl-liste a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; font-size: 13.5px; color: var(--leise);
}
.dfs-geraetewahl-liste a + a { border-top: 1px solid var(--kante2); }
.dfs-geraetewahl-liste a:hover { background: #F7F9FB; color: var(--text); }
.dfs-geraetewahl-liste a.an { color: var(--sek); font-weight: 600; background: var(--sek-tint); }
.dfs-geraetewahl.offen { padding-bottom: 0; }
.dfs-geraetewahl-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--kante2);
}
.dfs-geraetewahl.offen .dfs-geraetewahl-liste { max-height: none; }

/* Der Umschalter sitzt beim Aufklapper darunter, bei der Liste im Kopf. */
details.dfs-geraetewahl + .dfs-ansicht { margin: 6px 0 0; justify-content: flex-end; }

.dfs-geraetewahl-liste .num {
  margin-left: auto; flex: none;
  font-variant-numeric: tabular-nums; font-weight: 600; opacity: .7;
}

/* Die Geraeteeinschraenkung, links im Suchfeld. Sie sitzt IM Feld und nicht
   darueber: Was die Suche einschraenkt, gehoert dorthin, wo gesucht wird -
   sonst tippt man und wundert sich ueber die Treffer. */
.dfs-filter {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  max-width: 42%; padding: 4px 4px 4px 11px; border-radius: 99px;
  background: var(--sek-tint); color: var(--sek);
  font-size: 12.5px; font-weight: 600;
}
.dfs-filter-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfs-filter-x {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 99px; color: var(--sek); opacity: .65;
}
.dfs-filter-x:hover { opacity: 1; background: rgba(18, 53, 107, .12); }
.dfs-filter-x svg { width: 13px; height: 13px; }

/* Auf dem Telefon darf die Marke breiter sein als die 34 %, die sie einmal
   hatte: Der Suchbegriff daneben ist bei gesetztem Filter ein Fehlercode und
   damit kurz - „Orthophos S 2D/3D" braucht den Platz mehr als „e6". */
@media (max-width: 640px) {
  .dfs-filter { max-width: 52%; font-size: 11.5px; }
}

/* ---------------- Auf dem Telefon: Tippziele ---------------- */

/* Gemessen bei 390px: Die Fussleiste hatte 19px hohe Verweise, das × am
   Filter 22px, der Umschalter 24px. Mit dem Finger trifft man das nicht -
   und der Filter ist der Weg zurueck aus einer Einschraenkung, den man
   treffen MUSS.

   Vergroessert wird die FLAECHE, nicht die Schrift: Das Aussehen bleibt, der
   Finger bekommt Platz. */
@media (pointer: coarse), (max-width: 640px) {
  .dfs-fuss-mit, .dfs-recht > summary, .dfs-fuss a {
    min-height: 40px; display: inline-flex; align-items: center;
  }
  .dfs-recht-menue a { min-height: 42px; display: flex; align-items: center; }
  .dfs-filter-x { width: 34px; height: 34px; }
  .dfs-ansicht button { min-height: 34px; padding: 0 12px; }
  .dfs-verlauf-x { width: 38px; height: 38px; }
  /* Die Marke im Kopf ist ein Verweis auf die Startseite - 32px sind mit dem
     Finger knapp. Die Kopfzeile ist 60px hoch, 40 passen hinein. */
  .dfs-marke-platz-kopf { min-height: 40px; }
}

/* Der Filter zeigt auf schmalen Schirmen das MODELL, nicht den Hersteller.
   „Dentsply …" sagt nichts - es gibt zehn Geraete dieses Herstellers. Das
   Modell ist das, was unterscheidet. */
.dfs-filter-h { opacity: .7; }
@media (max-width: 640px) {
  .dfs-filter-h { display: none; }
}

.dfs-feld input::-webkit-search-cancel-button,
.dfs-feld input::-webkit-search-decoration { display: none; }

/* Wann gesucht wurde. Rechtsbuendig, leise - es ist eine Einordnung, keine
   Auskunft, nach der jemand sucht. */
.dfs-verlauf-wann {
  margin-left: auto; padding-left: 12px; flex: none;
  color: #A9B7C7; font-size: 12px; white-space: nowrap;
}

/* Die Zeilen jenseits der ersten zehn. `<details>` und kein Knopf mit
   JavaScript: Der Weg zurueck zu einer Suche darf nicht davon abhaengen, ob
   eine Skriptdatei geladen wurde. */
.dfs-verlauf-mehr > summary {
  list-style: none; cursor: pointer;
  padding: 9px 22px; font-size: 12.5px; font-weight: 600; color: var(--leise);
}
.dfs-verlauf-mehr > summary::-webkit-details-marker { display: none; }
.dfs-verlauf-mehr > summary::before { content: "▾ "; }
.dfs-verlauf-mehr[open] > summary::before { content: "▴ "; }
.dfs-verlauf-mehr > summary:hover { color: var(--text); background: #F7F9FB; }

/* ---------- Ueberlagernde Fenster ---------- */
.dfs-dialog {
  border: 0; padding: 0; background: none;
  max-width: 560px; width: calc(100% - 32px);
  border-radius: 22px; box-shadow: 0 24px 60px rgba(15, 35, 64, .22);
}
.dfs-dialog::backdrop { background: rgba(15, 35, 64, .34); }
/* `.dfs` traegt `min-height: 100vh` - das ist richtig fuer die Seite und
   falsch in jedem Fenster: Dort blaeht es den Inhalt auf Fensterhoehe auf,
   egal wie wenig darin steht. Das Bearbeitungsfenster der Redaktion reichte
   deshalb bis ganz nach unten, obwohl seine Felder nur die halbe Hoehe
   brauchen. Gilt fuer JEDES `<dialog>`, nicht nur fuer `.dfs-dialog`. */
dialog .dfs { min-height: 0; }
.dfs-dialog .dfs { display: block; }
.dfs-dialog-in {
  position: relative; background: var(--karte); border-radius: 22px;
  border: 1px solid var(--kante); padding: 26px 26px 24px;
}
.dfs-dialog-in .dfs-leer-t { margin-right: 40px; }
.dfs-dialog-zu {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 10px;
  border: 0; background: none; color: var(--leise);
  display: grid; place-items: center; cursor: pointer;
}
.dfs-dialog-zu:hover { background: var(--kante2); color: var(--text); }

/* `.dfs-block p` steht auf `pre-line`, weil Zeilenumbrueche aus dem Altbestand
   stehen bleiben sollen. Im Dialog steht kein Altbestand, sondern Fliesstext -
   dort wuerden die Umbrueche des Quelltextes durchschlagen. */
.dfs-dialog .dfs-block p { white-space: normal; }

/* Ebenso fuer eigenen Fliesstext ausserhalb des Altbestands: `pre-line` ist
   dafuer da, Zeilenumbrueche aus den Geraetetexten zu erhalten - in einem
   selbst geschriebenen Absatz schlagen damit die Umbrueche des Quelltextes
   durch. */
/* `white-space: normal` hebt das `pre-line` auf, das die Texte aus dem
   Altbestand brauchen - selbst geschriebene Prosa hat ihre Umbrueche im
   Markup, nicht im Text. Der Abstand gehoert dazu: Ohne ihn stehen mehrere
   Absaetze als eine Wand aneinander. */
.dfs-fliesstext p { white-space: normal; margin: 0 0 10px; }
.dfs-fliesstext p:last-child { margin-bottom: 0; }

/* „Über" traegt dieselbe Wortmarke wie der Kopf, nur groesser. Die Farbe der
   Anfangsbuchstaben kommt aus `.dfs-marke i` und gilt damit von selbst.

   Gewicht 400 und `letter-spacing` wie im Kopf, NICHT das 700/800 aus der
   Klassenregel: In der Vorlage ist die Marke ein <button>, und
   `.dfs button{font:inherit}` setzt das Gewicht dort auf die geerbten 400
   zurueck. Sichtbar war die 700 nie (DESIGN.md, A-2). Hier steht ein <span>,
   also muss es ausgeschrieben werden - sonst faellt derselbe Fehler noch
   einmal an. */
.dfs-ueber-marke { margin: 0 40px 8px 0; }
.dfs-ueber-marke .dfs-marke {
  font-size: 26px; font-weight: 400; letter-spacing: -.015em;
  padding: 0; cursor: default;
}

/* ---------------- Projekt: die vier Anwendungen ---------------- */

/* Das Wort unter der Wortmarke. Es traegt die Ueberschrift, deshalb steht
   sonst kein Satz im Fenster - was eine Kachel tut, sagt ihr `title`. */
.dfs-projekt-unter {
  margin: 0 0 18px; font-size: 13px; font-weight: 600; color: var(--leise);
  text-transform: uppercase; letter-spacing: .08em;
}

.dfs-kachelwand {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.dfs-kachel {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border: 1px solid var(--kante); border-radius: 14px;
  background: var(--karte); color: var(--text); text-decoration: none;
}
.dfs-kachel:hover { border-color: var(--prim); background: var(--prim-tint); }
/* Was keine Adresse hat, sieht auch nicht danach aus. Kein Zeiger, keine
   Aufhellung - nur der `title` sagt, warum (`web/anwendungen.ts`). */
.dfs-kachel.aus { opacity: .5; cursor: default; }
.dfs-kachel.aus:hover { border-color: var(--kante); background: var(--karte); }
.dfs-kachel-bild { flex: none; width: 40px; height: 40px; }
.dfs-kachel-n { font-size: 13.5px; font-weight: 600; line-height: 1.3; }

/* Links der Stein, rechts OK. */
.dfs-projekt-schluss {
  display: flex; align-items: center; justify-content: space-between; margin-top: 6px;
}
/* Sehr leise: Er soll da sein, nicht auffallen. Kein Zeiger - was hier
   passiert, ist keine angekuendigte Handlung. `user-select:none`, damit ein
   Doppelklick nicht die halbe Zeile markiert. */
.dfs-stein { color: var(--kante); user-select: none; display: inline-flex; }
.dfs-stein:hover { color: var(--leise); }

/* Auf einem Telefon untereinander: Zwei Kacheln nebeneinander lassen vom
   Namen „Dental Fast Support Redaktion" drei Zeilen uebrig. */
@media (max-width: 480px) {
  .dfs-kachelwand { grid-template-columns: 1fr; }
}

/* Die Eintraege der Fussleiste mit Sinnbild. */
.dfs-fuss-mit { display: inline-flex; align-items: center; gap: 6px; }
/* 16px statt der 15 aus dem Markup: Der Stein hat vier Kaestchen auf der
   Flaeche, die das Fragezeichen fuer einen Kreis hat - ein Pixel mehr macht
   den Unterschied zwischen „vier Bloecke" und „ein Fleck". */
.dfs-fuss-mit svg { flex: none; width: 16px; height: 16px; }

/* Das Paragraphenzeichen und sein Aufklapper.
   Er oeffnet nach OBEN - die Fussleiste steht am unteren Rand, ein Menue nach
   unten waere ausserhalb der Seite. */
.dfs-para { font-size: 15px; font-weight: 700; line-height: 1; }
/* `flex`, nicht `block`.
   Das <summary> darin ist `inline-flex` und erzeugt in einem Block-Elternteil
   eine Zeilenbox mit Unterlänge: Das <details> wurde dadurch 22px hoch, die
   Nachbarn in der Fußzeile 19 und 18. Die Grid-Zeile zentriert alle drei —
   also stand „Rechtliches" zwei Pixel höher als „Über" und „Fassung".
   Als Flex-Container ist das <details> genau so hoch wie sein Inhalt. */
.dfs-recht { position: relative; justify-self: start; display: flex; align-items: center; }
.dfs-recht > summary {
  list-style: none; cursor: pointer; color: var(--leise); font-weight: 600;
}
.dfs-recht > summary::-webkit-details-marker { display: none; }
.dfs-recht > summary:hover { color: var(--text); }
.dfs-recht-menue {
  position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 40;
  min-width: 168px; padding: 6px;
  background: var(--karte); border: 1px solid var(--kante); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 35, 64, .14);
  display: grid; gap: 2px;
}
.dfs-recht-menue a {
  padding: 8px 12px; border-radius: 8px; font-size: 13px; white-space: nowrap;
}
.dfs-recht-menue a:hover { background: var(--kante2); color: var(--text); }
/* Auf dem Telefon steht die Fussleiste mittig gestapelt - dann auch das
   Menue, sonst haengt es am linken Rand des Aufklappers ins Nichts. */
@media (max-width: 560px) {
  .dfs-recht { justify-self: center; }
  .dfs-recht-menue { left: 50%; transform: translateX(-50%); }
}

/* Fehlerband fuer den falschen Technikercode. Rot ist laut DESIGN.md
   ausschliesslich Status - ein abgewiesener Code ist einer. */
.dfs-fehler {
  background: var(--rot-tint); color: #9E2A12; border: 1px solid #F5C4B8;
  border-radius: 12px; padding: 13px 16px; font-size: 13.5px; font-weight: 600;
  margin-bottom: 16px;
}

.dfs-feldzeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dfs-eingabe {
  flex: 1; min-width: 200px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--kante); border-radius: 12px; background: var(--karte);
  font-size: 15px;
}
.dfs-eingabe:focus { outline: 0; border-color: var(--prim); box-shadow: 0 0 0 4px var(--prim-tint); }

/* ---------- Der Technikerzugang ist violett ---------- */
/* Violett heißt in dieser Oberfläche „als Technik angemeldet" — am Männchen
   im Kopf. Der Weg dorthin trägt dieselbe Farbe: Orange ist die Farbe des
   Handelns überall sonst, und ein oranger Rahmen an diesem Feld verspräche
   etwas anderes, als hier passiert.

   Der Rahmen am Feld ist schmal und satt, die Fläche des Knopfes hell und
   zurückhaltend — wie die grüne Karte darunter. Ein voll durchgefärbter
   violetter Knopf schrie lauter als alles andere auf der Seite und zog den
   Blick auf einen Weg, den die meisten gar nicht gehen. */
.dfs-technik-feld:focus{
  border-color:var(--viol);box-shadow:0 0 0 3px var(--viol-tint);
}
/* `.dfs` davor, und das ist nötig: `.dfs button { color: inherit }` ist
   spezifischer als eine Klasse allein und gewinnt sonst — der Text stand
   dunkelblau statt violett da. Dieselbe Falle wie seinerzeit bei der
   Wortmarke, nur mit `color` statt `font-weight`. */
.dfs .dfs-technik-knopf{
  background:var(--viol-tint);color:var(--viol);
  border:1px solid #D3C7F5;
}
.dfs .dfs-technik-knopf:hover{
  background:#E4DCFA;border-color:var(--viol);color:var(--viol-tief);
}

/* Der Knopf stand tiefer als das Feld daneben.
   Schuld war `margin-top:14px` an `.dfs-knopf` — sinnvoll, wenn ein Knopf
   unter einem Absatz steht, falsch in einer Zeile mit `align-items:center`:
   Der Außenabstand verschiebt ihn gegenüber dem Feld nach unten. */
.dfs-technik-zeile{margin-top:6px;}
.dfs-technik-zeile .dfs-knopf{margin-top:0;}



/* ---------- Der zweite Anmeldeweg ---------- */
/* Der eingetippte Code ist der häufige Fall: geteilt, ohne Konto, für jeden
   Techniker. Der Weg über ID ist der seltenere und der genauere — er sagt,
   WER da ist. Deshalb keine zweite Zeile Kleingedrucktes, sondern eine Karte:
   Sie hat Gewicht, ohne zu schreien.

   Grün, weil der angemeldete Zustand grün ist. Der Weg hat dieselbe Farbe
   wie das Ziel — wer hier klickt, sieht gleich darauf ein grünes Männchen. */
.dfs-anmelde-oder{
  display:flex;align-items:center;gap:12px;
  margin:6px 26px 0;color:var(--leise);font-size:12px;
}
.dfs-anmelde-oder::before,.dfs-anmelde-oder::after{
  content:"";flex:1;height:1px;background:var(--kante);
}
.dfs-anmelde-id{padding:14px 26px 24px;}

.dfs-idkarte{
  display:flex;align-items:center;gap:14px;
  padding:13px 15px;border-radius:14px;text-decoration:none;
  color:var(--text);
  background:linear-gradient(135deg,var(--gruen-tint) 0%,#F4FBF7 100%);
  border:1px solid #C4E8D4;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.dfs-idkarte:hover{
  transform:translateY(-1px);
  border-color:var(--gruen);
  box-shadow:0 8px 20px rgba(18,164,94,.16);
}
.dfs-idkarte:active{transform:translateY(0);}

/* Das Ausweiszeichen in einem eigenen Feld — es trägt die Karte und ist nicht
   nur Verzierung davor. */
.dfs-idkarte-feld{
  width:40px;height:40px;border-radius:11px;flex:none;
  background:var(--gruen);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 3px 8px rgba(18,164,94,.3);
}
.dfs-idkarte-feld svg{width:20px;height:20px;}

.dfs-idkarte-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.dfs-idkarte-text b{font-size:14px;font-weight:600;letter-spacing:-.01em;}
.dfs-idkarte-text span{font-size:12.5px;color:var(--leise);line-height:1.4;}

.dfs-idkarte-pfeil{
  flex:none;color:var(--gruen);font-size:17px;
  transition:transform .14s ease;
}
.dfs-idkarte:hover .dfs-idkarte-pfeil{transform:translateX(3px);}

/* Wer Bewegung abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion:reduce){
  .dfs-idkarte,.dfs-idkarte-pfeil{transition:none;}
  .dfs-idkarte:hover{transform:none;}
  .dfs-idkarte:hover .dfs-idkarte-pfeil{transform:none;}
}



/* ---------- Der zweite Anmeldeweg ---------- */
/* Der eingetippte Code ist der häufige Fall: geteilt, ohne Konto, für jeden
   Techniker. Der Weg über ID ist der seltenere und der genauere — er sagt,
   WER da ist. Zwei gleich große Schaltflächen ließen beide gleich
   wahrscheinlich aussehen, und das sind sie nicht. */
.dfs-anmelde-oder{
  display:flex;align-items:center;gap:12px;
  margin:4px 26px 0;color:var(--leise);font-size:12px;
}
.dfs-anmelde-oder::before,.dfs-anmelde-oder::after{
  content:"";flex:1;height:1px;background:var(--kante);
}
.dfs-anmelde-id{padding:12px 26px 22px;}
.dfs-anmelde-id .dfs-flach{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--leise);text-decoration:none;
}
.dfs-anmelde-id .dfs-flach:hover{color:var(--prim);}

/* Eine Meldung zur Anmeldung, oben auf der Seite.
   Ein Fehlerschlüssel in der Adresse, den niemand sieht, ist keine Meldung. */
.dfs-anmelde-meldung{
  max-width:760px;margin:0 auto 18px;
  background:#FFFBF0;border:1px solid #F0DFA8;border-radius:12px;
  padding:13px 16px;font-size:14px;line-height:1.55;
}

/* ---------- Angemeldet: drei Zustände, eine Form ---------- */
/* Violett + Punkt heißt „als Technik angemeldet" — mit dem eingetippten Code.
   Grün + Punkt heißt „mit eigenem Konto angemeldet". Zwei Wege, die
   verschieden viel bedeuten, dürfen nicht gleich aussehen: Der Code ist
   geteilt und sagt nicht, wer ihn kennt; ein Konto schon. */
.dfs-icon.an.mit-id{background:var(--gruen-tint);color:var(--gruen);}
.dfs-icon.an.mit-id::after{background:var(--gruen);}

/* ---------- Der Aufklapper am Männchen ---------- */
/* Ein überlagerndes Fenster nimmt den Blick auf alles andere und will
   geschlossen werden. „Wer bin ich, und wie komme ich hier raus" ist eine
   Nebenfrage — sie gehört an den Rand, nicht in die Mitte. */
.dfs-konto-auf{position:relative;flex:none;}

/* Das <summary> IST das Symbol. Der Dreiecksmarker muss weg — in beiden
   Schreibweisen, die Browser dafür kennen. */
.dfs-konto-auf > summary{list-style:none;}
.dfs-konto-auf > summary::-webkit-details-marker{display:none;}
.dfs-konto-auf > summary::marker{content:"";}

.dfs-konto-tafel{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  min-width:260px;max-width:300px;
  background:var(--karte);border:1px solid var(--kante);border-radius:14px;
  box-shadow:0 12px 32px rgba(16,32,56,.14);
  padding:6px;
}
.dfs-konto-kopf{padding:10px 12px 9px;}
.dfs-konto-kopf b{font-size:14.5px;}
.dfs-konto-kopf .leise{font-size:12.5px;margin-top:2px;word-break:break-all;}
.dfs-konto-weg{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 12px;border:0;border-radius:9px;
  background:none;color:var(--text);font:inherit;font-size:13.5px;
  text-align:left;text-decoration:none;cursor:pointer;
}
.dfs-konto-weg:hover{background:var(--flaeche-2,rgba(127,127,127,.07));}

/* Der Weg zum Konto — grün, aber leiser als die Karte im Anmeldefenster.
   Dort ist es ein Angebot, hier nur eine Zeile unter anderen. */
.dfs-konto-id{color:var(--gruen);}
.dfs-konto-id svg{opacity:.9;}
.dfs-konto-id:hover{background:var(--gruen-tint);}
.dfs-konto-weg span:first-of-type{flex:1;}
.dfs-konto-raus-zeichen{color:var(--leise);font-size:12px;}
/* Abmelden ist rot — nicht als Warnung vor Gefahr, sondern als Halt: Es ist
   der einzige Weg hier, der etwas beendet. Wer ihn versehentlich trifft, muss
   den Code neu eintippen. */
.dfs-konto-ende{
  border-top:1px solid var(--kante);border-radius:0 0 9px 9px;
  margin-top:4px;padding-top:11px;color:var(--rot);
}
.dfs-konto-ende:hover{background:var(--rot-tint);color:var(--rot);}

/* Auf dem Telefon die volle Breite: 300px neben einem 40px-Symbol am rechten
   Rand liefen sonst über die Kante hinaus.

   **`min-width` und `width` müssen hier mit.** Ohne sie blieb das `min-width:
   260px` der Grundregel stehen — und weil ein Vorfahr mit `backdrop-filter`
   den Bezugsrahmen für `position:fixed` bildet, rechnete der Browser `left`
   und `right` nicht gegen das Sichtfeld, sondern gegen ein 40 Pixel breites
   Kästchen. Ergebnis: eine Tafel, die bei 390 Pixeln bis 591 reichte und die
   Seite seitwärts scrollen ließ — auf JEDER Seite, auch ohne dass das Menü
   offen war. Am 22.09.2026 in einem 390-Pixel-Rahmen nachgemessen.

   `max-width` gegen das Sichtfeld ist der Gürtel zum Hosenträger: Selbst
   wenn der Bezugsrahmen wieder ein anderer wird, passt sie hinein. */
@media (max-width:480px){
  .dfs-konto-tafel{
    /* **Nicht `fixed`.** Ein Vorfahr mit `backdrop-filter` bildet den
       Bezugsrahmen, und dann rechnen `left` und `right` nicht gegen das
       Sichtfeld, sondern gegen ein 40 Pixel breites Kästchen — mit
       `min-width:260px` lief die Tafel bis 591 hinaus, mit `min-width:0`
       schrumpfte sie auf 16 und ihr Inhalt lief hinaus. Beides am
       22.09.2026 in einem 390-Pixel-Rahmen gemessen.

       `absolute` mit `right:0` hängt sie an die rechte Kante des Auslösers,
       und der steht im Sichtfeld. Von dort wächst sie nach links, begrenzt
       durch `max-width` — das kommt ohne jede Annahme über den Bezugsrahmen
       aus. */
    position:absolute;left:auto;right:0;top:calc(100% + 8px);
    min-width:0;width:max-content;max-width:calc(100vw - 24px);
  }
}

/* Eine Meldung zur Anmeldung, oben auf der Seite.
   Ein Fehlerschlüssel in der Adresse, den niemand sieht, ist keine Meldung. */
.dfs-anmelde-meldung{
  max-width:760px;margin:0 auto 18px;
  background:#FFFBF0;border:1px solid #F0DFA8;border-radius:12px;
  padding:13px 16px;font-size:14px;line-height:1.55;
}

/* ---------- Angemeldet: drei Zustände, eine Form ---------- */
/* Violett + Punkt heißt „als Technik angemeldet" — mit dem eingetippten Code.
   Grün + Punkt heißt „mit eigenem Konto angemeldet". Zwei Wege, die
   verschieden viel bedeuten, dürfen nicht gleich aussehen: Der Code ist
   geteilt und sagt nicht, wer ihn kennt; ein Konto schon. */
.dfs-icon.an.mit-id{background:var(--gruen-tint);color:var(--gruen);}
.dfs-icon.an.mit-id::after{background:var(--gruen);}


/* „Angemeldet bleiben" — die Ausnahme, nicht die Regel.
   Deshalb klein und unter dem Feld, nicht daneben: Wer nichts anhakt, bekommt
   die kurze Sitzung, und das ist richtig so. */
.dfs-bleiben{
  display:flex;align-items:flex-start;gap:9px;
  margin:14px 0 0;font-size:13px;cursor:pointer;line-height:1.45;
}
.dfs-bleiben input{margin-top:2px;flex:none;accent-color:var(--viol);}
.dfs-bleiben .leise{display:block;font-size:12.5px;margin-top:1px;}

/* ---------- Rechtstexte ---------- */
/* `dfs-rechtstext`, nicht `dfs-recht`: Letzteres trägt schon der Aufklapper
   „Rechtliches" in der Fußleiste. Eine Regel mit `max-width:68ch` und
   `margin:26px auto` auf diesem Namen hat ihn dort aus der Zeile gehoben —
   zwei Bedeutungen an einem Klassennamen sind eine zu viel. */
/* Impressum, Datenschutzerklärung, Nutzungsbedingungen. Eine Textspalte, die
   sich lesen lässt: 68 Zeichen sind ungefähr das, was ein Auge ohne Springen
   schafft. Breiter wäre mehr Platz und weniger lesbar. */
.dfs-rechtstext{max-width:68ch;margin:26px auto 0;}
.dfs-rechtstext-t{font-size:30px;font-weight:600;letter-spacing:-.02em;margin:0 0 22px;}
.dfs-rechtstext-a{margin:0 0 30px;}
.dfs-rechtstext-a h2{
  font-size:16px;font-weight:700;margin:0 0 9px;
  letter-spacing:-.01em;
}
.dfs-rechtstext-a p{margin:0 0 11px;line-height:1.62;}
.dfs-rechtstext-l{margin:0 0 11px;padding-left:20px;line-height:1.62;}
.dfs-rechtstext-l li{margin-bottom:5px;}

/* Was noch fehlt, wird markiert — nicht erfunden.
   Ein Mustertext mit erfundener Anschrift sähe fertig aus und wäre falsch;
   eine sichtbare Lücke sieht unfertig aus und ist ehrlich. */
.dfs-luecke{
  background:#FFF3CD;color:#7A5B00;border-radius:4px;
  padding:1px 7px;font-weight:600;font-style:normal;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.dfs-rechtstext-warn{
  background:#FFFBF0;border:1px solid #F0DFA8;border-radius:12px;
  padding:13px 16px;margin:0 0 28px;font-size:14px;line-height:1.55;
}

.dfs-rechtstext-tabelle{overflow-x:auto;margin:0 0 13px;}
.dfs-rechtstext-tabelle table{border-collapse:collapse;width:100%;font-size:13.5px;}
.dfs-rechtstext-tabelle th{
  text-align:left;font-weight:700;padding:7px 10px 7px 0;
  border-bottom:1px solid var(--kante);white-space:nowrap;
}
.dfs-rechtstext-tabelle td{
  padding:8px 10px 8px 0;border-bottom:1px solid var(--kante);
  vertical-align:top;line-height:1.5;
}
.dfs-rechtstext-tabelle code{font-size:12.5px;white-space:nowrap;}

/* ---------- Knowledge Base ---------- */
.dfs-wb{max-width:900px;margin:24px auto 0;}
.dfs-wb-titel{font-size:28px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px;}
.dfs-wb-unter{color:var(--leise);line-height:1.6;margin:0 0 22px;max-width:62ch;}

.dfs-wb-sparten{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.dfs-wb-s{
  padding:7px 13px;border-radius:99px;border:1px solid var(--kante);
  font-size:13.5px;text-decoration:none;color:var(--leise);background:var(--karte);
}
.dfs-wb-s:hover{border-color:#D6DEE9;color:var(--text);}
.dfs-wb-s.an{background:var(--prim-tint);border-color:transparent;color:var(--prim-tief);font-weight:600;}
/* Die Zahl als eigene Blase: „Röntgen 1" las sich wie ein Gerätename. Sie
   sagt, wie viele Rubriken in dieser Sparte stehen - das gehoert abgesetzt. */
.dfs-wb-s .num{font-variant-numeric:tabular-nums;margin-left:7px;padding:1px 6px;
  border-radius:99px;background:#EDF1F6;color:var(--leise);font-size:11.5px;font-weight:700;}
.dfs-wb-s.an .num{background:#FFF;color:var(--prim-tief);}

/* Ein angesprungener Eintrag hebt sich KURZ hervor - sonst landet man
   irgendwo mitten im Text und sucht die Stelle, die man gerade angeklickt hat.

   **„Kurz" stand bis zum 22.09.2026 nur im Kommentar.** In Wirklichkeit galt
   `:target`, solange die Adresse den Anker trug — der Eintrag blieb also
   eingefärbt, bis man die Seite verließ. Wer aus der Redaktion hierher
   sprang, sah einen Eintrag, der aussah wie markiert, und fand keine
   Möglichkeit, das wegzubekommen.

   Jetzt läuft die Farbe in zwei Sekunden aus. Der Anker bleibt, die Farbe
   geht — gefunden hat man die Stelle bis dahin. */
@keyframes dfs-anspringen {
  from { background:var(--prim-tint); box-shadow:0 0 0 10px var(--prim-tint); }
  70%  { background:var(--prim-tint); box-shadow:0 0 0 10px var(--prim-tint); }
  to   { background:transparent; box-shadow:0 0 0 10px transparent; }
}
.dfs-wb-eintrag:target{border-radius:12px;
  animation:dfs-anspringen 2.2s ease-out both;}

/* Ohne Bewegung: kein Auslaufen, aber auch keine Fläche, die wie eine
   Markierung aussieht — ein schmaler Strich an der Seite zeigt die Stelle
   und drängt sich nicht auf. */
@media (prefers-reduced-motion:reduce){
  .dfs-wb-eintrag:target{animation:none;box-shadow:none;background:transparent;
    border-left:3px solid var(--prim);padding-left:13px;}
}

.dfs-wb-liste{display:grid;gap:10px;}
.dfs-wb-rubrik{
  display:block;padding:15px 17px;border-radius:14px;
  border:1px solid var(--kante);background:var(--karte);text-decoration:none;color:inherit;
  transition:border-color .12s,box-shadow .12s;
}
.dfs-wb-rubrik:hover{border-color:var(--prim);box-shadow:0 6px 18px rgba(16,32,56,.07);}
.dfs-wb-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.dfs-wb-kopf b{font-size:15.5px;}
.dfs-wb-hersteller{font-size:13px;color:var(--leise);margin-top:2px;}
.dfs-wb-beschreibung{font-size:13.5px;line-height:1.55;margin:7px 0 0;max-width:62ch;}

/* Die zugeordneten Geräte beantworten die Frage, die jemand wirklich hat:
   Ist das hier mein Gerät? Ein Rubrikname sagt das nicht, die Modelle schon. */
.dfs-wb-geraete{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.dfs-wb-geraete span{
  font-size:12px;padding:2px 8px;border-radius:99px;
  background:var(--kante2,rgba(127,127,127,.09));color:var(--leise);
}
.dfs-wb-fuss{font-size:12.5px;margin-top:9px;}

.dfs-wb-geraete a{
  font-size:12px;padding:3px 9px;border-radius:99px;
  background:var(--kante2,rgba(127,127,127,.09));color:var(--leise);text-decoration:none;
}
.dfs-wb-geraete a:hover{background:var(--prim-tint);color:var(--prim-tief);}
.dfs-wb-eintraege{display:grid;gap:14px;margin-top:22px;}
.dfs-wb-eintrag{
  padding:18px 20px;border-radius:14px;
  border:1px solid var(--kante);background:var(--karte);
}
.dfs-wb-eintrag h2{font-size:16px;font-weight:700;margin:0 0 10px;letter-spacing:-.01em;}
.dfs-wb-eintrag p{margin:0 0 10px;line-height:1.62;max-width:68ch;}
.dfs-wb-eintrag p:last-child{margin-bottom:0;}

/* Das Suchergebnis der Knowledge Base: die Rubrik als Klammer, darunter das,
   was in ihr steht. Eine flache Liste aus Einträgen verschiedener Rubriken
   ließ offen, wo man gelandet ist. */
.dfs-wb-gruppen{display:grid;gap:16px;margin-top:20px;}
.dfs-wb-gruppe{border:1px solid var(--kante2);border-radius:14px;background:var(--karte);
  padding:14px 16px;}
.dfs-wb-gkopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  text-decoration:none;color:inherit;}
.dfs-wb-gkopf b{font-size:16px;font-weight:800;letter-spacing:-.01em;}
.dfs-wb-gkopf:hover b{color:var(--prim-tief);}
.dfs-wb-gtreffer{display:grid;gap:2px;margin-top:10px;border-left:2px solid var(--kante2);
  padding-left:14px;}
.dfs-wb-gtreffer a{display:block;padding:7px 0;text-decoration:none;color:inherit;}
.dfs-wb-gtreffer a + a{border-top:1px solid var(--kante2);}
.dfs-wb-gtreffer b{display:block;font-size:14.5px;font-weight:700;}
.dfs-wb-gtreffer a:hover b{color:var(--prim-tief);}
.dfs-wb-gtreffer span{display:block;font-size:13px;color:var(--leise);line-height:1.5;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

/* Bilder und Dateien an einem Eintrag der Knowledge Base. Die Bilder stehen
   im Text, weil sie zu ihm gehören; die Dateien darunter als Zeile. */
/* Die Bilder im Polaroid-Schnitt: quadratischer Ausschnitt, weißer Rand,
   die Beschriftung im Rand darunter. Kleiner als vorher – drei Fotos nahmen
   den halben Bildschirm ein, und gebraucht wird hier die Übersicht; wer
   etwas erkennen will, klickt und bekommt das Vollbild. */
.dfs-wb-bilder{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0 0;}
.dfs-wb-bilder figure{
  margin:0;width:150px;background:#FFF;padding:8px 8px 0;border-radius:4px;
  border:1px solid var(--kante2);box-shadow:0 2px 10px rgba(15,35,64,.09);
  transition:transform .14s,box-shadow .14s;
}
.dfs-wb-bilder figure:hover{transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(15,35,64,.16);}
.dfs-wb-bilder a{display:block;line-height:0;}
.dfs-wb-bilder img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  background:#F1F4F8;border-radius:2px;}
/* Der Rand unten ist breiter als oben – daher kommt der Polaroid-Eindruck.
   Ohne Beschriftung bleibt er trotzdem, sonst steht das Bild schief im
   Rahmen. */
.dfs-wb-bilder figcaption{font-size:12px;color:var(--leise);line-height:1.4;
  padding:9px 2px 11px;min-height:15px;text-align:center;overflow-wrap:anywhere;}
.dfs-wb-bilder figure:not(:has(figcaption))::after{content:"";display:block;height:34px;}
@media (max-width:720px){.dfs-wb-bilder figure{width:calc(50% - 7px);}}

/* Die Geräte einer Rubrik: eingeklappt, bis jemand fragt. */
.dfs-wb-geraetebox{margin:14px 0 0;}
.dfs-wb-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);}
.dfs-wb-geraetebox>summary::-webkit-details-marker{display:none;}
.dfs-wb-geraetebox>summary::after{content:"▾";font-size:10px;}
.dfs-wb-geraetebox[open]>summary::after{content:"▴";}
.dfs-wb-geraetebox>summary:hover{color:var(--text);}
.dfs-wb-geraetebox .dfs-wb-geraete{margin-top:10px;}
.dfs-wb-dateien{display:grid;gap:6px;margin:14px 0 0;}
.dfs-wb-dateien a{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  border:1px solid var(--kante2);border-radius:10px;padding:9px 12px;background:var(--karte);}
.dfs-wb-dateien a:hover{border-color:var(--prim);}
.dfs-wb-endung{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--sek);
  background:var(--sek-tint);border-radius:6px;padding:3px 7px;min-width:44px;text-align:center;}
.dfs-wb-dname{flex:1;font-size:14px;font-weight:600;overflow-wrap:anywhere;}
.dfs-wb-dgroesse{font-size:12px;color:var(--leise);font-variant-numeric:tabular-nums;}

/* ---------- Ein Bild in groß ---------- */

/* Ohne das Skript bleibt jedes Bild erreichbar – die Vorschau ist ein
   Verweis auf die Datei. Das hier ist der bequeme Weg, nicht der einzige. */
.dfs-schau{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(8,18,34,.92);touch-action:none;}
.dfs-schau.offen{display:grid;}
.dfs-schau img{max-width:96vw;max-height:92vh;object-fit:contain;
  transform-origin:center center;will-change:transform;cursor:zoom-in;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;}
.dfs-schau.gezoomt img{cursor:grab;}
.dfs-schau.gezoomt img:active{cursor:grabbing;}
.dfs-schau-zu{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:16px;
  width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);
  color:#FFF;font-size:17px;cursor:pointer;z-index:2;}
.dfs-schau-zu:hover{background:rgba(255,255,255,.26);}
.dfs-schau-hilfe{position:fixed;left:0;right:0;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));text-align:center;color:#E6ECF5;
  font-size:13.5px;padding:0 20px;pointer-events:none;}
/* Solange die Schau offen ist, scrollt die Seite darunter nicht mit. */
html.dfs-schau-an,html.dfs-schau-an body{overflow:hidden;}

/* Die Vorschau: ein Knopf, damit sie auch mit der Tastatur erreichbar ist. */
.dfs-bildknopf{border:0;padding:0;background:none;cursor:zoom-in;display:block;
  border-radius:12px;line-height:0;}
.dfs-bildknopf:focus-visible{outline:2px solid var(--prim);outline-offset:3px;}

/* ---------- Beim Scrollen ---------- */

/* Die Suchleiste bleibt, der Rest zieht darunter durch. Sie klebt unter dem
   Kopf, sobald gescrollt wurde – vorher steht sie, wo sie hingehört: in der
   Bühne unter der großen Wortmarke. */
.dfs-gescrollt .dfs-feldbox{
  position:sticky;top:calc(60px + env(safe-area-inset-top,0px));z-index:25;
  padding-top:10px;padding-bottom:10px;margin-bottom:10px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
}
/* Der Verlauf nach unten: Ohne ihn schneidet die klebende Leiste den Text
   darunter hart ab, und es sieht aus, als fehlte eine Zeile. */
.dfs-gescrollt .dfs-feldbox::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:14px;
  background:linear-gradient(to bottom,rgba(255,255,255,.94),transparent);
  pointer-events:none;
}

/* Nach oben. Erscheint erst, wenn es etwas zu scrollen gab. */
.dfs-nachoben{
  position:fixed;right:18px;z-index:120;
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--kante);background:rgba(255,255,255,.96);
  color:var(--sek);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(15,35,64,.14);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .18s,transform .18s;
}
.dfs-nachoben.da{opacity:1;transform:none;pointer-events:auto;}
.dfs-nachoben:hover{color:var(--prim-tief);border-color:var(--prim);}
@media (prefers-reduced-motion:reduce){
  .dfs-nachoben{transition:none;}
}

/* Der Einmalcode im Anmeldefenster — unter der ID-Karte, wie beim Dental
   Technik Commander. */
.dfs-idcode{margin-top:16px;padding-top:14px;border-top:1px solid var(--kante2);}
.dfs-idcode label{display:block;font-size:12.5px;font-weight:600;color:var(--leise);
  margin-bottom:6px;}
.dfs-idcode-zeile{display:flex;gap:8px;align-items:stretch;}
.dfs-idcode-zeile input{flex:1;min-width:0;font-size:19px;font-weight:700;
  letter-spacing:.18em;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  border:1px solid var(--kante);border-radius:12px;padding:10px 8px;color:var(--text);
  background:#FFF;}
.dfs-idcode-zeile input:focus{outline:none;border-color:var(--prim);
  box-shadow:0 0 0 4px var(--prim-tint);}
.dfs-idcode-klein{font-size:11.5px;color:var(--leise);margin:8px 0 0;}

/* „Anderes Gerät anmelden" — dieselbe Gestalt im Fenster wie auf der Seite.
   Der Code steht groß und ruhig, gesperrt in Vierergruppen: So liest man ihn
   von einem Schirm ab und tippt ihn auf einem zweiten ein, ohne die Stelle zu
   verlieren. */
.dfs-aus{max-width:520px;margin:0 auto;}
.dfs-aus-titel{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;}
.dfs-aus-unter{color:var(--leise);font-size:14px;line-height:1.6;margin:0 0 20px;}

.dfs-aus-karte{background:var(--karte);border:1px solid var(--kante);border-radius:16px;
  padding:22px 20px;text-align:center;}
.dfs-aus-was{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--leise);margin-bottom:12px;}
.dfs-aus-code{font-size:38px;font-weight:700;letter-spacing:.16em;line-height:1.15;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);
  overflow-wrap:anywhere;}
.dfs-aus-frist{margin-top:10px;font-size:12.5px;font-weight:600;color:var(--prim-tief);
  font-variant-numeric:tabular-nums;}

.dfs-aus-oder{display:flex;align-items:center;gap:12px;margin:16px 0;
  color:var(--leise);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;}
.dfs-aus-oder::before,.dfs-aus-oder::after{content:"";flex:1;height:1px;background:var(--kante);}

.dfs-aus-qr{background:var(--karte);border:1px solid var(--kante);border-radius:16px;
  padding:18px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.dfs-aus-qr svg{display:block;border-radius:8px;}
.dfs-aus-wo{font-size:12px;color:var(--leise);text-align:center;overflow-wrap:anywhere;}

.dfs-aus-klein{font-size:12.5px;color:var(--leise);margin:16px 0 0;line-height:1.55;
  text-align:center;}
.dfs-aus-fuss{margin-top:14px;display:flex;justify-content:center;}

/* Im Fenster: dieselbe Gestalt, nur ohne den Seitentitel. */
.dfs-handy-fenster .dfs-bf-in{width:min(420px,94vw);}
.dfs-handy-koerper{display:block;}

@media (max-width:720px){
  .dfs-aus-code{font-size:30px;}
  .dfs-aus-karte,.dfs-aus-qr{padding:16px;}
}

/* Der Balken unter dem Code: Er zeigt den Rest als Fläche, und eine Fläche
   sieht man schneller als eine Zahl. Am Ende wird er rot — dann ist es nicht
   mehr knapp, sondern vorbei. */
.dfs-aus-balken{height:4px;border-radius:99px;background:var(--kante2);
  margin-top:12px;overflow:hidden;}
.dfs-aus-balken span{display:block;height:100%;width:100%;border-radius:99px;
  background:var(--prim);transition:width .25s linear,background-color .3s;}
.dfs-aus-balken span.knapp{background:var(--rot);}
@media (prefers-reduced-motion:reduce){
  .dfs-aus-balken span{transition:none;}
}

/* Ein Fenster, das per Skript entsteht, hängt an <body> — also außerhalb von
   `.dfs`, wo die Farbvariablen stehen. Es trägt die Klasse deshalb selbst
   und muss die Seitenregeln daraus wieder loswerden: `.dfs` ist eine Seite,
   kein Kasten. */
.dfs-bf-in.dfs{
  display:flex;flex-direction:column;min-height:0;
  font-size:15px;
}

/* ---------- Das Übergabefenster, auch ohne „canvas.css" ---------- */

/* **Warum das hier noch einmal steht.** Der Rahmen eines Fensters
   (`.dfs-bf`, `.dfs-bf-in`, `.dfs-bf-kopf`) stand nur in „canvas.css", und
   die lädt allein die Redaktion. In DFS entstand dasselbe Fenster aus
   demselben Skript — nur ohne Kasten, ohne Rand, ohne Polster: ein Haufen
   Text in der Mitte des Schirms. Am 21.09.2026 daran gemessen, dass es in
   der Redaktion gut aussah und in DFS nicht.

   Eng gefasst auf `.dfs-handy-fenster`: Die Redaktion hat ihre eigenen
   Fenster und soll von hier keine zweite Meinung bekommen. */
dialog.dfs-handy-fenster{
  border:0;padding:0;background:none;
  width:min(420px,94vw);max-height:88vh;max-height:88dvh;
  border-radius:18px;overflow:visible;
}
dialog.dfs-handy-fenster::backdrop{background:rgba(15,35,64,.34);backdrop-filter:blur(2px);}
.dfs-handy-fenster .dfs-bf-in{
  height:auto;background:rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,255,255,.7);border-radius:20px;
  box-shadow:0 30px 80px rgba(15,35,64,.28);
  display:flex;flex-direction:column;max-height:92vh;max-height:92dvh;
  font-family:inherit;overflow:hidden;
}
.dfs-handy-fenster .dfs-bf-kopf{
  display:flex;align-items:center;gap:14px;
  padding:16px 20px 12px;border-bottom:1px solid var(--kante);
}
.dfs-handy-fenster .dfs-bf-titel{
  font-size:17px;font-weight:800;letter-spacing:-.015em;margin:0;flex:1;
}
.dfs-handy-fenster .dfs-bf-koerper{padding:16px 20px;overflow-y:auto;}
.dfs-handy-fenster .dfs-cv-knopf{
  min-height:30px;padding:0 8px;border-radius:9px;
  border:1px solid var(--kante);background:var(--karte);color:var(--leise);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.dfs-handy-fenster .dfs-cv-knopf:hover{color:var(--sek);border-color:#D6DEE9;
  background:var(--kante2);}

/* Am Handy nimmt das Fenster die ganze Fläche — ein Kasten mit Rand mitten
   auf einem 390 Pixel breiten Schirm ist kein Gewinn, sondern ein Rahmen um
   nichts. */
@media (max-width:560px){
  dialog.dfs-handy-fenster{width:100vw;max-width:100vw;max-height:100dvh;border-radius:0;}
  .dfs-handy-fenster .dfs-bf-in{border-radius:0;max-height:100dvh;height:100dvh;
    background:#FFF;backdrop-filter:none;}
}

/* ---------- „Anmeldung erfolgreich" ---------- */

/* Der Code ist verbraucht, und das soll man sehen, ohne zu lesen: grüner
   Haken statt Zahl. Stehen bliebe die Zahl nur, um noch einmal etwas
   anzubieten, was es nicht mehr gibt. */
.dfs-aus-karte.dfs-aus-gut{border-color:var(--gruen,#1E9E62);
  background:var(--gruen-tint,rgba(30,158,98,.08));}
.dfs-aus-haken{width:52px;height:52px;margin:0 auto 12px;border-radius:99px;
  display:flex;align-items:center;justify-content:center;
  color:#FFF;background:var(--gruen,#1E9E62);}
.dfs-aus-gut-titel{font-size:19px;font-weight:800;letter-spacing:-.01em;
  color:var(--gruen-tief,#15754A);}
.dfs-aus-gut-text{margin:8px 0 0;font-size:13.5px;color:var(--sek);line-height:1.55;}

/* Der Copy-Knopf unter dem Code. Zurückhaltend: Der Code selbst ist die
   Hauptsache, der Knopf ist die Abkürzung. Nach dem Klick sagt er „Kopiert"
   und wird kurz grün — ohne Rückmeldung klickt man zweimal. */
.dfs-aus-kopie{margin:10px auto 0;display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--kante);border-radius:99px;background:var(--karte);
  color:var(--leise);font:inherit;font-size:12px;font-weight:600;
  padding:5px 12px;cursor:pointer;transition:color .15s,border-color .15s,background-color .15s;}
.dfs-aus-kopie:hover{color:var(--sek);border-color:#D6DEE9;background:var(--kante2);}
.dfs-aus-kopie:active{transform:translateY(1px);}
.dfs-aus-kopie.fertig{color:var(--gruen);border-color:var(--gruen);background:var(--gruen-tint);}
@media (prefers-reduced-motion:reduce){
  .dfs-aus-kopie{transition:none;}
}

/* Der Weg zurück von einer Rechtsseite. Sie ist sonst eine Sackgasse: Der
   Browser hat einen Zurück-Knopf, aber auf einem Telefon sucht man ihn, und
   wer aus einem Lesezeichen kommt, hat ihn gar nicht. */
.dfs-rechtstext-zu{display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--leise);text-decoration:none;
  border:1px solid var(--kante);border-radius:99px;padding:6px 14px;
  margin-bottom:18px;transition:color .15s,border-color .15s,background-color .15s;}
.dfs-rechtstext-zu:hover{color:var(--sek);border-color:#D6DEE9;background:var(--kante2);}
.dfs-rechtstext-zu span{font-size:15px;line-height:1;}
@media (prefers-reduced-motion:reduce){ .dfs-rechtstext-zu{transition:none;} }

/* Der Satz, der als einziger auffallen soll: „Leitfaden, keine Anweisung." */
.dfs-recht-wichtig{border-left:3px solid var(--prim);background:var(--prim-tint);
  padding:12px 14px;border-radius:0 10px 10px 0;margin:0 0 12px;}

/* ---------- Anhänge: Kacheln für PDF, Datei und Verweis ---------- */

/* Nebeneinander, umbrechend. Untereinander wäre bei drei Anhängen eine
   lange Spalte für nichts; nebeneinander sieht man auf einen Blick, was es
   gibt, und der Umbruch sorgt am Telefon für die Spalte von selbst. */
.dfs-anh-reihe{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.dfs-anh-k{display:inline-flex;align-items:stretch;position:relative;
  border:1px solid var(--kante);border-radius:12px;background:var(--karte);
  overflow:hidden;max-width:100%;
  transition:border-color .15s,box-shadow .15s;}
.dfs-anh-k:hover{border-color:#D6DEE9;box-shadow:0 2px 10px rgba(15,35,64,.07);}
.dfs-anh-kern{display:flex;align-items:center;gap:11px;padding:9px 13px 9px 10px;
  text-decoration:none;color:inherit;min-width:0;}

/* Das Sinnbild mit der Endung darunter. Die Farbe trennt die drei Arten
   schneller als jedes Wort: PDF rot, Datei grau, Verweis blau. */
.dfs-anh-sinn{display:flex;flex-direction:column;align-items:center;gap:2px;
  flex:0 0 auto;color:var(--leise);}
.dfs-anh-ext{font-size:9px;font-weight:800;letter-spacing:.06em;line-height:1;}
.dfs-anh-k.pdf .dfs-anh-sinn{color:#C4362F;}
.dfs-anh-k.link .dfs-anh-sinn{color:var(--prim);}

.dfs-anh-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.dfs-anh-name{font-size:13.5px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px;}
.dfs-anh-klein{font-size:11.5px;color:var(--leise);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px;}
@media (max-width:560px){
  .dfs-anh-k{width:100%;}
  .dfs-anh-kern{flex:1;}
  .dfs-anh-name,.dfs-anh-klein{max-width:none;}
}
@media (prefers-reduced-motion:reduce){ .dfs-anh-k{transition:none;} }

/* Der Papierkorb sitzt rechts an der Kachel — nur in der Redaktion. */
.dfs-anh-wegform{display:flex;align-items:stretch;}
.dfs-anh-k .dfs-anh-weg{border:0;border-left:1px solid var(--kante);background:none;
  color:var(--leise);cursor:pointer;padding:0 11px;display:flex;align-items:center;}
.dfs-anh-k .dfs-anh-weg:hover{color:var(--rot);background:var(--rot-tint);}

/* ---------- Das Fenster hinter einem Anhang ---------- */

dialog.dfs-anh-fenster{
  border:0;padding:0;background:none;
  width:min(720px,94vw);max-height:92vh;max-height:92dvh;
  border-radius:18px;overflow:visible;
}
dialog.dfs-anh-fenster::backdrop{background:rgba(15,35,64,.4);backdrop-filter:blur(2px);}
.dfs-anh-fenster .dfs-bf-in{
  height:auto;background:#FFF;border:1px solid var(--kante);border-radius:18px;
  box-shadow:0 30px 80px rgba(15,35,64,.28);
  display:flex;flex-direction:column;max-height:92dvh;font-family:inherit;overflow:hidden;
}
.dfs-anh-fenster .dfs-bf-kopf{display:flex;align-items:center;gap:14px;
  padding:14px 18px 11px;border-bottom:1px solid var(--kante);}
.dfs-anh-fenster .dfs-bf-titel{font-size:16px;font-weight:800;letter-spacing:-.015em;
  margin:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dfs-anh-fenster .dfs-bf-koerper{padding:16px 18px;overflow-y:auto;}
.dfs-anh-fenster .dfs-cv-knopf{min-height:30px;padding:0 8px;border-radius:9px;
  border:1px solid var(--kante);background:var(--karte);color:var(--leise);
  cursor:pointer;display:inline-flex;align-items:center;}
.dfs-anh-fenster .dfs-cv-knopf:hover{color:var(--sek);background:var(--kante2);}

/* Die Vorschau. Höhe in dvh, damit sie am Telefon nicht unter die Leiste
   des Browsers rutscht. */
.dfs-anh-rahmen{border:1px solid var(--kante);border-radius:12px;overflow:hidden;
  background:var(--kante2);}
.dfs-anh-rahmen iframe{display:block;width:100%;height:min(62vh,620px);border:0;}
.dfs-anh-hinweis{font-size:12.5px;margin:10px 0 0;text-align:center;}
.dfs-anh-fuss{margin-top:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.dfs-anh-fuss .dfs-knopf{margin-top:0;}

/* Eine Datei ohne Vorschau: Name und Größe, sonst nichts. Etwas
   vorzutäuschen, was nicht angezeigt werden kann, wäre schlimmer. */
.dfs-anh-steck{border:1px dashed var(--kante);border-radius:12px;padding:22px 16px;
  text-align:center;background:var(--kante2);}
.dfs-anh-steck-name{font-size:15px;font-weight:600;overflow-wrap:anywhere;}
.dfs-anh-steck-gr{font-size:13px;color:var(--leise);margin-top:4px;}

/* ---------- Der Eintrag als eigenes Feld ---------- */

/* Der Text stand lose unter der Überschrift und verschwamm mit dem, was
   darunter kam — man sah nicht, wo ein Eintrag aufhört. Jetzt ein eigenes
   Feld mit ruhigem Grund. */
.dfs-wb-e-kopf{display:flex;align-items:flex-start;gap:10px;}
.dfs-wb-e-kopf h2{flex:1;margin:0;}
.dfs-wb-e-text{background:var(--kante2);border-radius:12px;padding:13px 15px;margin-top:10px;}
.dfs-wb-e-text p{margin:0 0 9px;}
.dfs-wb-e-text p:last-child{margin-bottom:0;}

/* Das Zeichen der Redaktion daneben — klein, grau, erst beim Darüberfahren
   farbig. Es soll zu finden sein, nicht ins Auge springen. */
.dfs-wb-e-red{flex:0 0 auto;display:inline-flex;padding:4px;border-radius:8px;
  opacity:.34;filter:grayscale(1);transition:opacity .15s,filter .15s;}
.dfs-wb-e-red:hover{opacity:1;filter:none;background:var(--kante2);}
.dfs-wb-e-red img{display:block;}
@media (prefers-reduced-motion:reduce){ .dfs-wb-e-red{transition:none;} }

/* ---------- Das Anhangsfenster am Telefon ---------- */

/* **Zwei Messbefunde vom 22.09.2026, beide bei 390 Pixeln:**
   Das Blatt war 393 Pixel breit, sobald das Fenster offen stand — drei
   Pixel, aber sie genügen, damit sich die ganze Seite seitwärts schieben
   lässt. Und die Vorschau bekam 297 von 390 Pixeln; der Rest ging an
   Ränder und Polster, also an nichts.

   `100%` statt `vw`: Die Sichtfeldeinheiten zählen den senkrechten
   Rollbalken mit, und genau das waren die drei Pixel. */
@media (max-width: 560px) {
  dialog.dfs-anh-fenster {
    width: 100%; max-width: 100%;
    height: 100dvh; max-height: 100dvh;
    margin: 0; border-radius: 0;
  }
  .dfs-anh-fenster .dfs-bf-in {
    border-radius: 0; height: 100dvh; max-height: 100dvh;
  }
  .dfs-anh-fenster .dfs-bf-kopf { padding: 12px 14px 10px; }
  /* Die Vorschau bekommt die Fläche, die sonst der Rand nimmt. */
  .dfs-anh-fenster .dfs-bf-koerper { padding: 12px 10px; }
  .dfs-anh-rahmen { border-radius: 8px; }
  .dfs-anh-rahmen iframe { height: calc(100dvh - 230px); }
  .dfs-anh-fuss { position: sticky; bottom: 0; background: #FFF; padding-top: 10px; }
}

/* **Ein Gitterkind schrumpft nicht unter seinen Inhalt.** `min-width` steht
   dort auf `auto`, und dann ist der breiteste Inhalt die Untergrenze — der
   Eintrag war bei 390 Pixeln 377 breit in einer 343 breiten Spalte und schob
   die Seite um 18 Pixel seitwärts. Am 22.09.2026 im 390-Pixel-Rahmen
   gemessen; derselbe Fehler wie schon einmal an anderer Stelle.

   `min-width: 0` nimmt die Untergrenze weg. Was darin wirklich breit ist —
   Bilderreihe, Kacheln, Tabellen — rollt in seiner eigenen Hülle. */
.dfs-wb-eintraege > .dfs-wb-eintrag{min-width:0;}
.dfs-wb-eintrag .dfs-anh-reihe{min-width:0;}