/* ==========================================================================
   ELEMENTE — Karten, Spalten, Board-Cards, Linien, Sketch
   ========================================================================== */
.el{
  position:absolute;
  /* --el-radius ist die maßgebliche Quelle des Eckenradius: die gemalte
     Auswahl-Kontur (render/overlay.js) liest sie je Typ aus, damit ihr Radius
     zum Element passt. Wer border-radius überschreibt, setzt sie mit. */
  --el-radius:var(--r-card);
  border-radius:var(--el-radius);
  background:var(--el-bg, var(--el-white));
  border:1px solid var(--el-bd, var(--el-white-b));
  box-shadow:var(--shadow-card);
  content-visibility:auto;
}
/* Die Auswahl-Kontur zeichnet nicht das Element selbst, sondern die
   Overlay-Ebene (#selRings, siehe canvas.css und render/overlay.js).
   Zwei Gründe: `outline` klemmt Chrome auf ganze Pixel — die Kontur würde
   beim Hineinzoomen dicker statt zoomfest zu bleiben; und ein Pseudo-Element
   würde von `overflow:hidden` der Karten abgeschnitten.
   Ausnahme: Linie und Sketch zeichnen ihre Kontur selbst entlang ihres
   Pfades (weiter unten, .ar-outline / .sk-outline) — bei ihnen greift
   keiner der beiden Gründe, und ein Rechteck um die fast leere Bounding-Box
   sagte nichts über die Form aus. */
.el.dragging{
  box-shadow:var(--shadow-drag);
  transform:rotate(2deg) scale(1.04);
}
.el[data-color="white"] { --el-bg:var(--el-white);  --el-bd:var(--el-white-b);  }
.el[data-color="green"] { --el-bg:var(--el-green);  --el-bd:var(--el-green-b);  }
.el[data-color="blue"]  { --el-bg:var(--el-blue);   --el-bd:var(--el-blue-b);   }
.el[data-color="yellow"]{ --el-bg:var(--el-yellow); --el-bd:var(--el-yellow-b); }
.el[data-color="orange"]{ --el-bg:var(--el-orange); --el-bd:var(--el-orange-b); }
.el[data-color="red"]   { --el-bg:var(--el-red);    --el-bd:var(--el-red-b);    }
.el[data-color="purple"]{ --el-bg:var(--el-purple); --el-bd:var(--el-purple-b); }
.el[data-color="grey"]  { --el-bg:var(--el-grey);   --el-bd:var(--el-grey-b);   }

/* Notiz mit Rich-Text */
/* Höhe folgt dem Inhalt (Phase 3b): der Körper scrollt nicht mehr, das
   Element wächst stattdessen. height:100% bleibt stehen, damit die leere
   Notiz ihre Mindesthöhe von einer Zeile behält; bei height:auto am Knoten
   löst es sich zu auto auf, und der Inhalt bestimmt die Höhe. */
.el-note .note-body{
  width:100%; height:100%;
  padding:14px;
  overflow:hidden; overflow-wrap:break-word;
  outline:none;
}
.note-body > *{ margin:0 0 6px; }
.note-body > *:last-child{ margin-bottom:0; }
.note-body h1{ font-size:20px; font-weight:600; line-height:1.25; }
.note-body h2{ font-size:17px; font-weight:600; line-height:1.3; }
.note-body h3{ font-size:15px; font-weight:600; line-height:1.35; }
.note-body blockquote{
  padding-left:10px;
  border-left:2px solid var(--line-card);
  color:var(--text-secondary);
}
/* Trennlinie: volle Innenbreite der Notiz, ohne Attribute im Modell.
   Die Stärke kommt aus dem Kartenrand-Token, damit sie zum Element passt. */
.note-body hr{
  border:0; border-top:1px solid var(--line-card);
  margin:8px 0;
}
.note-body ul, .note-body ol{ padding-left:20px; }
.note-body li{ margin:0 0 2px; }
.note-body a{ color:var(--line-focus); text-decoration:underline; }
/* Außerhalb der Bearbeitung ist ein Link anklickbar (öffnet neuen Tab) */
.el:not(.editing) .note-body a{ cursor:pointer; }
.note-body:empty::before{ content:"Notiz"; color:var(--text-secondary); }
/* Leerer erster Absatz zeigt den Platzhalter */
.note-body > p:only-child:empty::before,
.note-body > p:only-child > br:only-child::before{
  content:"Notiz"; color:var(--text-secondary);
}

/* generischer Edit-Zustand */
.edit-target.editing{
  cursor:text; user-select:text; -webkit-user-select:text; overflow:auto;
}
/* Typen, deren Höhe dem Inhalt folgt, scrollen auch im Editor nicht — das
   Element wächst. Vorgabe: „Kein internes Scrollen, keine Mindesthöhe außer
   einer Zeile." */
.el-note .edit-target.editing,
.el-todo .edit-target.editing,
.el-comment .edit-target.editing,
.el-header .edit-target.editing{ overflow:visible; }

/* To-do */
.el-todo{ padding:12px 12px 10px; display:flex; flex-direction:column; overflow:visible; }
.todo-head{
  display:flex; align-items:baseline; gap:8px;
  padding-bottom:8px; margin-bottom:6px;
  border-bottom:1px solid var(--line-card);
  flex:none;
}
.todo-title{
  font-weight:600; outline:none; overflow-wrap:break-word;
  flex:1; min-width:0;
}
.todo-title:empty::before{ content:"To-do"; color:var(--text-secondary); }
.todo-progress{
  font-size:11px; color:var(--text-secondary);
  font-variant-numeric:tabular-nums; flex:none;
}
/* Kein eigener Scrollbereich mehr: die Liste wächst, das Element mit ihr. */
.todo-items{ flex:none; overflow:visible; }
.todo-item{
  display:flex; align-items:flex-start; gap:6px;
  padding:3px 0;
}
.todo-item.dragging{ opacity:.4; }
.todo-grip{
  flex:none; width:16px; height:18px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary);
  cursor:grab; touch-action:none;
  opacity:0;
}
.el-todo:hover .todo-grip{ opacity:1; }
.todo-grip svg.ic{ width:14px; height:14px; }
.todo-check{
  flex:none; width:16px; height:16px; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-card); border-radius:3px;
  background:var(--bg-card);
  padding:0;
}
.todo-check svg.ic{ width:12px; height:12px; opacity:0; stroke-width:2.5; }
.todo-item.done .todo-check{ background:var(--bg-active); border-color:var(--bg-active); }
.todo-item.done .todo-check svg.ic{ opacity:1; color:var(--text-inverse); }
.todo-text{
  flex:1; min-width:0;
  outline:none; overflow-wrap:break-word; white-space:pre-wrap;
}
.todo-item.done .todo-text{ color:var(--text-secondary); text-decoration:line-through; }
.todo-text:empty::before{ content:"Eintrag"; color:var(--text-secondary); }
.todo-drop{
  height:2px; margin:2px 0;
  background:var(--line-focus); border-radius:1px;
}
.todo-empty{ margin-top:4px; font-size:11px; color:var(--text-secondary); }

/* Link */
.el-link{ padding:14px; display:flex; gap:10px; align-items:flex-start; overflow:hidden; }
.el-link .link-icon{
  flex:none; width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary);
}
.el-link .link-icon img{ width:20px; height:20px; border-radius:2px; }
.el-link .link-meta{ min-width:0; flex:1; }
.el-link .link-title{
  font-weight:600; overflow-wrap:break-word; outline:none;
}
.el-link .link-title:empty::before{ content:"Link"; color:var(--text-secondary); }
/* Außerhalb der Bearbeitung öffnet ein Klick auf den Titel die Adresse */
.el-link:not(.editing) .link-title{ cursor:pointer; }
.el-link .link-desc{
  margin-top:2px; font-size:12px; color:var(--text-primary);
  overflow:hidden; overflow-wrap:break-word;
}
.el-link .link-url{
  margin-top:3px;
  font-size:11px; color:var(--text-secondary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Kommentar */
.el-comment{ padding:12px 14px 8px; display:flex; flex-direction:column; overflow:visible; }
.comment-main{ flex:none; display:flex; gap:10px; align-items:flex-start; overflow:visible; }
.comment-icon{ flex:none; color:var(--text-secondary); }
.comment-text{
  flex:1; min-width:0;
  outline:none; overflow-wrap:break-word; white-space:pre-wrap;
}
.comment-text:empty::before{ content:"Kommentar"; color:var(--text-secondary); }
.comment-foot{
  flex:none; padding-top:6px; margin-top:6px;
  border-top:1px solid var(--line-card);
  font-size:11px; color:var(--text-secondary);
}

/* Header */
.el-header{
  background:transparent; border-color:transparent; box-shadow:none;
  display:flex; align-items:center;
}
.header-text{
  width:100%; padding:4px 10px;
  font-family:var(--font-serif); font-weight:600;
  outline:none; overflow-wrap:break-word; white-space:pre-wrap;
}
.header-text[data-level="1"]{ font-size:26px; line-height:1.2; }
.header-text[data-level="2"]{ font-size:21px; line-height:1.25; }
.header-text[data-level="3"]{ font-size:17px; line-height:1.3; }
.header-text:empty::before{ content:"Überschrift"; color:var(--text-secondary); }

/* Spalte — Kopf 46 px, Innenrand 8 px, Kinder liegen als eigene Elemente
   darüber (siehe column.js); der Körper ist nur Fläche. */
.el-column{
  --el-radius:var(--r-column);
  border-radius:var(--el-radius);
  border-color:var(--line-card);
  background:var(--bg-card);
  padding:0;
}
.el-column.drop-hot{
  border-color:var(--line-focus);
  box-shadow:0 0 0 calc(1px * var(--inv,1)) var(--line-focus);
}
.column-head{ height:46px; padding:6px 8px 0; text-align:center; box-sizing:border-box; }
.column-title{
  font-family:var(--font-serif); font-size:14px; font-weight:600;
  outline:none; overflow-wrap:break-word;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.column-title.editing{ white-space:pre-wrap; }
.column-title:empty::before{ content:"Spalte"; color:var(--text-secondary); }
.column-sub{ margin-top:2px; font-size:11px; color:var(--text-secondary); }
.el-column.is-empty .column-body{
  margin:0 8px 8px;
  height:calc(100% - 54px);
  border:1px dashed var(--line-card);
  border-radius:var(--r-card);
}

/* Board-Card */
.el-boardcard{ padding:8px; display:flex; gap:10px; align-items:center; }
.bc-thumb{
  width:48px; height:48px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-hover); border-radius:var(--r-card);
  color:var(--text-secondary);
  overflow:hidden;
}
.bc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.bc-meta{ min-width:0; flex:1; }
.bc-title{
  font-weight:600; outline:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bc-title.editing{ white-space:pre-wrap; overflow-wrap:break-word; }
.bc-title:empty::before{ content:"Board"; color:var(--text-secondary); }
.bc-count{ font-size:11px; color:var(--text-secondary); }

/* Datei */
.el-file{
  padding:14px; display:flex; flex-direction:column; justify-content:center;
  gap:4px; overflow:hidden;
}
.file-hit{
  display:flex; gap:10px; align-items:center; min-width:0;
  /* Trefferfläche für Klick = Herunterladen; der Test läuft geometrisch */
  align-self:flex-start; max-width:100%;
}
.el-file:not(.editing) .file-hit{ cursor:pointer; }
.file-icon{ flex:none; width:24px; height:24px; color:var(--text-secondary); }
.file-icon svg.ic{ display:block; }
.file-name{
  min-width:0; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.el-file:not(.editing) .file-hit:hover .file-name{ text-decoration:underline; }
.file-size{ font-size:11px; color:var(--text-secondary); padding-left:34px; }

/* Bild */
/* Bild ohne Rahmen, Hintergrund und Schatten: transparente PNGs stehen so
   frei auf der Fläche. Der Rand bei Auswahl kommt aus der Overlay-Ebene
   (render/overlay.js), nicht vom Element selbst — der Eckenradius dafür steht
   in --el-radius. Gilt nur für image; file und link behalten ihre Karte. */
.el-image{
  padding:0; overflow:hidden;
  background:transparent; border-color:transparent; box-shadow:none;
  display:flex; flex-direction:column;
}
.el-image .img-wrap{ flex:1; min-height:0; }
.el-image img{
  display:block; width:100%; height:100%; object-fit:cover;
  pointer-events:none;
}
.el-image .img-caption{
  display:none;
  flex:none; height:26px; line-height:26px;
  padding:0 8px;
  font-size:11px; color:var(--text-secondary);
  background:var(--bg-card);
  border-radius:0 0 var(--r-card) var(--r-card);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  outline:none;
}
.el-image.has-caption .img-caption,
.el-image.editing .img-caption{ display:block; }
.el-image .img-caption:empty::before{ content:"Bildunterschrift"; }

/* Linie & Sketch: transparente Träger.
   pointer-events liegt auf den Pfaden, nicht auf dem Kasten — sonst finge
   die überwiegend leere Bounding-Box einer diagonalen Linie jeden Klick ab,
   der der Fläche darunter gilt. */
.el-arrow, .el-sketch{
  --el-radius:0px;
  background:transparent; border-color:transparent; box-shadow:none; border-radius:0;
  pointer-events:none;
}
.el-arrow svg, .el-sketch svg{ width:100%; height:100%; display:block; overflow:visible; }
.el-arrow path, .el-sketch path{ pointer-events:stroke; }
.el-arrow.selected, .el-sketch.selected{ outline:none; }

/* Linie: Farbe kommt aus dem Tinten-Token-Satz */
.el-arrow .ar-line, .el-arrow .ar-head{
  fill:none;
  stroke:var(--ink, var(--ink-white));
  stroke-width:var(--arrow-stroke); stroke-linecap:round; stroke-linejoin:round;
}
/* Unsichtbarer, breiterer Pfad darunter: bequem zu treffen */
.el-arrow .ar-hit{
  fill:none; stroke:transparent; stroke-width:14;
  stroke-linecap:round; stroke-linejoin:round;
}
.el-arrow.selected .ar-line, .el-arrow.selected .ar-head{
  stroke-width:var(--arrow-stroke-sel);
}

/* ---- Auswahlkontur von Linie und Sketch ----
   Kein Rechteck um die Bounding-Box, sondern derselbe Pfad, um
   --sel-path-extra breiter, unter dem Strich gezeichnet, mit runden Enden.
   Sie liegt am Element statt in der Overlay-Ebene: Anders als bei den Karten
   schneidet hier kein overflow:hidden, und ein SVG-Strich nimmt Bruchteile
   an — die beiden Gründe für #selRings greifen also nicht. Dafür zieht sie
   beim Verschieben ohne zweiten Rechenweg live mit.
   Ausgeblendet wird über opacity, nicht über display: nur so gibt es den
   100-ms-Übergang wie bei den übrigen Konturen. opacity und nicht
   stroke-opacity, weil nur Ersteres ohne Haupt-Thread-Takt animiert. */
.el-arrow .ar-outline, .el-arrow .ar-outline-head, .el-sketch .sk-outline{
  fill:none;
  stroke:var(--line-focus);
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0;
  transition:opacity var(--sel-fade) ease;
}
.el-arrow .ar-outline, .el-arrow .ar-outline-head{
  stroke-width:calc(var(--arrow-stroke-sel) + var(--sel-path-extra));
}
.el-sketch .sk-outline{
  stroke-width:calc(var(--sk-w) + var(--sel-path-extra));
}
.el-arrow.selected .ar-outline,
.el-arrow.selected .ar-outline-head,
.el-sketch.selected .sk-outline{ opacity:1; }
/* Die Kontur ist reine Anzeige — Treffer entscheidet ar-hit bzw. die
   Strichgeometrie. */
.el-arrow .ar-outline, .el-arrow .ar-outline-head,
.el-sketch .sk-outline{ pointer-events:none; }
.el-arrow[data-color="white"] { --ink:var(--ink-white);  }
.el-arrow[data-color="green"] { --ink:var(--ink-green);  }
.el-arrow[data-color="blue"]  { --ink:var(--ink-blue);   }
.el-arrow[data-color="yellow"]{ --ink:var(--ink-yellow); }
.el-arrow[data-color="orange"]{ --ink:var(--ink-orange); }
.el-arrow[data-color="red"]   { --ink:var(--ink-red);    }
.el-arrow[data-color="purple"]{ --ink:var(--ink-purple); }
.el-arrow[data-color="grey"]  { --ink:var(--ink-grey);   }

/* Element, an dem ein Endpunkt gerade andocken würde */
.el.anchor-hot{
  outline:calc(2px * var(--inv,1)) dashed var(--line-focus);
  outline-offset:calc(2px * var(--inv,1));
}

/* Suchtreffer: kurz hervorgehoben, damit das Auge das Element auf einem
   vollen Board findet. Reine Ansicht — keine Datenänderung, überlebt keinen
   Reload. Der Puls läuft auf box-shadow statt auf outline, weil er sonst mit
   der Auswahl-Kontur um dieselbe Fläche stritte. */
@keyframes suchTreffer {
  0%   { box-shadow: 0 0 0 0 var(--line-focus); }
  35%  { box-shadow: 0 0 0 10px transparent; }
  70%  { box-shadow: 0 0 0 0 var(--line-focus); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
.el.search-hit {
  animation: suchTreffer var(--hit-fade) ease-out;
}

/* Sketch: Strich, den der Radierer bereits erfasst hat */
.el-sketch path.erasing{ opacity:.25; }

/* ---------- Doppelte Board-Karte (Phase 3e) ----------
   Zwei Karten auf dasselbe Board brechen die Invariante. Die Reparatur beim
   Laden fasst sie bewusst nicht an — welche die richtige ist, weiss nur der
   Nutzer. Also wird der Zustand sichtbar statt still. */
.el-boardcard.bc-doppelt{
  border-style:dashed;
  border-color:var(--warn-line);
}
.el-boardcard .bc-dup{
  position:absolute; left:0; right:0; bottom:0;
  padding:2px 8px;
  font-size:10px; line-height:1.3;
  color:var(--warn-ink);
  background:var(--warn-bg);
  border-bottom-left-radius:var(--r-card);
  border-bottom-right-radius:var(--r-card);
  pointer-events:none;
}

/* ==========================================================================
   ASSET-ZUSTAENDE (Phase 6d-3)

   Vier Zustaende, die sich NIE aehnlich sehen duerfen. Die Regeln stehen
   ausfuehrlich in js/elements/assetZustandView.js; hier ist ihre optische
   Umsetzung, und sie haelt sich an dieselben zwei Saetze:

     BEWEGUNG NUR FUERS VORUEBERGEHENDE. Nur .ph-laedt pulst. Scheitert der
     Abruf am Netz, wird daraus .ph-wartet: gleiche Farbe, kein Puls, anderes
     Wort. Ein Puls, hinter dem nichts passiert, ist eine Luege ueber den
     Zustand — und offline darf nie wie ein Defekt aussehen.

     KNOPF NUR, WO MAN HANDELN KANN. Allein .ph-fehlt traegt Fehlerfarbe und
     Knopf. .ph-nurLokal und .ph-nichtHochgeladen sind Feststellungen ohne
     Aufforderung, wie „Offline seit …" gegen „Anmelden" aus Phase 6c.

   Die vier unterscheiden sich in Farbe, Rahmen, Schriftschnitt UND Bewegung
   — vier Merkmale, nicht eines. Wer nur die Farbe aendert, hat die Auflage
   nicht erfuellt: sie muessen auch nebeneinander auseinanderzuhalten sein.
   ========================================================================== */

.ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  padding:8px; box-sizing:border-box;
  border-radius:inherit;
  font-size:11px; line-height:1.35; text-align:center;
  background:var(--bg-hover);
  /* Der Platzhalter ist Anzeige, kein Ziel: Getroffen wird geometrisch ueber
     getClientRects() im hitAction-Hook des Typs, nie ueber ein Ereignis.
     Siehe Fehlerklasse 1 und 2 in PROJEKT-STATUS §5. */
  pointer-events:none;
  user-select:none;
}
.ph-text{ font-weight:600; }

/* 1 — wird geladen: neutral, und das Einzige, was sich bewegt. */
.ph-laedt{ color:var(--text-secondary); border:1px solid var(--el-white-b); }
.ph-laedt .ph-text{ font-weight:400; animation:ph-puls 1.4s ease-in-out infinite; }
@keyframes ph-puls{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

/* 1b — wartet auf Verbindung: dieselbe Farbe, KEIN Puls. */
.ph-wartet{ color:var(--text-secondary); border:1px solid var(--el-white-b); }
.ph-wartet .ph-text{ font-weight:400; }

/* 2 — nur auf diesem Geraet: blau wie „Anmelden" in der Titelzeile. Dieselbe
   Aussage eine Ebene tiefer — es fehlt nur der Weg nach oben, nichts ist
   kaputt. */
.ph-nurLokal{
  color:var(--line-focus);
  border:1px solid var(--line-focus);
  background:var(--bg-card);
}

/* 3 — noch nicht hochgeladen: grau und gestrichelt. Kein Alarm; die Datei
   liegt auf einem anderen Geraet. Der gestrichelte Rahmen trennt sie vom
   durchgezogenen der Zustaende 1 und 2, damit auch ohne Farbe unterscheidbar
   bleibt, was hier gilt. */
.ph-nichtHochgeladen{
  color:var(--text-secondary);
  border:1px dashed var(--text-secondary);
  background:var(--bg-card);
}

/* 4 — nicht auffindbar: der EINZIGE Defekt, der einzige mit Fehlerfarbe und
   der einzige mit Knopf. */
.ph-fehlt{
  color:var(--danger);
  border:1px solid var(--danger);
  background:var(--danger-bg);
}
.ph-knopf{
  /* Ueberschreibt pointer-events des Kastens NICHT: der Treffertest ist
     geometrisch. Der Cursor-Hinweis bleibt trotzdem richtig, weil der Knopf
     als Ziel gemeint ist. */
  flex:none; padding:2px 8px;
  font-size:11px; font-weight:600;
  color:var(--text-inverse); background:var(--danger);
  border:1px solid var(--danger); border-radius:var(--r-card);
  cursor:pointer;
}

/* Die Datei-Karte teilt sich Groessenzeile und Platzhalter denselben Platz. */
.ph-zeile{
  position:static; inset:auto;
  flex-direction:row; gap:8px;
  padding:0 10px 8px; background:none; border:none;
  align-items:center; justify-content:flex-start; text-align:left;
}
/* Ohne den Rahmen des grossen Platzhalters blieben in der Zeile nur Wort und
   Schriftschnitt — bei „Noch nicht geladen" gegen „Noch nicht hochgeladen"
   waere das zu wenig, beide sind grau. Ein 2-px-Streifen links traegt Farbe
   UND Strichart weiter, damit die Zeile dieselben vier Merkmale hat wie der
   Kasten. */
.ph-zeile.ph-nurLokal, .ph-zeile.ph-nichtHochgeladen,
.ph-zeile.ph-fehlt, .ph-zeile.ph-laedt, .ph-zeile.ph-wartet{
  border:none; background:none;
  border-left-width:2px; border-left-style:solid;
  border-left-color:currentColor;
  padding-left:8px; margin-left:10px;
}
.ph-zeile.ph-nichtHochgeladen{ border-left-style:dashed; }
.ph-zeile.ph-laedt, .ph-zeile.ph-wartet{ border-left-color:var(--el-white-b); }

/* Das Cover einer Board-Karte ist rund 40 px gross. Dort passt kein Wort und
   kein Knopf — die vier Zustaende bleiben aber ueber Farbe und Puls
   unterscheidbar, das Wort steht im Tooltip. Bewusste Verkleinerung,
   begruendet in elements/boardcard.js. */
.ph-klein{ gap:0; padding:0; background:none; border-width:2px; }
.ph-klein .ph-text{ display:none; }
.ph-klein.ph-laedt, .ph-klein.ph-wartet{ background:none; }
/* Ohne Wort haengt der Puls nicht mehr an .ph-text. Er wandert auf den
   Kasten, damit die Regel „Bewegung nur fuers Voruebergehende" auch hier
   gilt — sonst waeren „wird geladen" und „wartet auf Verbindung" im Cover
   ununterscheidbar, und der einzige Zustand, in dem gerade etwas passiert,
   saehe aus wie Stillstand. */
.ph-klein.ph-laedt{ animation:ph-puls 1.4s ease-in-out infinite; }