/* ====================================================================================
   PLANER — Oberfläche (Runde 73)
   ------------------------------------------------------------------------------------
   Alle Klassen dieser Datei tragen das Präfix pl-. Sie wird NACH styles.css geladen,
   deshalb genügt bei einer Überschreibung dieselbe Spezifität wie beim Original; wo eine
   bestehende Regel mehr Klassen hat, steht das hier ausdrücklich dabei.

   Farben: keine einzige Farbe steht in einer Regel. Ganz oben stehen Variablenpaare,
   je eine für die Fläche (-f) und eine für den Text darauf (-t), damit der Nachtmodus
   an EINER Stelle kippt. Fünf der sechs Etiketten hängen an Tönen, die es im
   Design-System schon gibt — dadurch stimmen ihre Kontraste automatisch mit dem Rest
   der App überein, und der Nachtmodus muss sie gar nicht anfassen.
   ==================================================================================== */

:root {
  /* Die sechs Etikettenfarben des Vorbilds. Gespeichert wird immer nur der Schlüssel
     (blau, aquamarin, …); welche Farbe dazugehört, entscheidet allein diese Liste. */
  --pl-et-blau-f: var(--blau-soft);          --pl-et-blau-t: var(--blaut);
  --pl-et-aquamarin-f: var(--tuerkis-soft);  --pl-et-aquamarin-t: var(--tuerkist);
  --pl-et-gruen-f: var(--gruen-soft);        --pl-et-gruen-t: var(--gruent);
  --pl-et-gelb-f: var(--amber-soft);         --pl-et-gelb-t: var(--ambert);
  --pl-et-rot-f: var(--rot-soft);            --pl-et-rot-t: var(--rott);
  /* Einziger Ton, den es im System noch nicht gab. Gemessen gegen die eigene Fläche:
     6,10:1 am Tag, 8,04:1 in der Nacht, beides über den 4,5:1 der WCAG-Stufe AA. */
  --pl-et-hellblau-f: #dceefb;               --pl-et-hellblau-t: #0f5d80;

  /* Planfarbe Amber als FLÄCHE. Das Band trug var(--ambert), und das ist die Textvariable:
     sie kippt nachts auf ein helles Gold, während --lila, --blau, --gruen und --rot in
     beiden Modi derselbe Ton bleiben. Amber war damit die einzige Planfarbe, die zwischen
     Tag und Nacht wechselte. Gemessen gegen die Kartenfläche: 4,29:1 auf Weiss,
     3,87:1 auf der Nachtkarte (#211a36), beides über den 3:1 für Bedienelemente. */
  --pl-plan-amber: #a86e00;

  /* Ringabschnitt „Nicht begonnen". Vorher var(--lilat) mit opacity .38: gemessen 2,03:1
     gegen die weisse Karte und 1,69:1 gegen den Grundring — der Abschnitt war vom leeren
     Ring kaum zu unterscheiden. Jetzt ein eigener Ton statt Transparenz, gemessen
     4,26:1 gegen die Karte und 3,54:1 gegen den Grundring. */
  --pl-ring-offen: #8f68c2;

  --pl-spalte-w: 296px;   /* Breite einer Bucket-Spalte im Board */
}
html.nacht {
  --pl-et-hellblau-f: #102c3a;               --pl-et-hellblau-t: #7fcbe8;
  /* Nacht: 4,30:1 gegen die Karte, 3,85:1 gegen den Grundring (--soft #2b2244). */
  --pl-ring-offen: #8e74c4;
}

/* ---------- 1. Planübersicht ---------- */

.pl-plankacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px;
}
.pl-plankachel, .pl-plan-neu {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--weiss); border-radius: var(--r4); box-shadow: var(--shadow);
  padding: 20px 20px 18px; text-align: left;
  transition: transform .14s, box-shadow .14s;
}
.pl-plankachel:hover, .pl-plan-neu:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.pl-plankachel-band { position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--lila); }
.pl-plankachel[data-farbe="blau"] .pl-plankachel-band { background: var(--blau); }
.pl-plankachel[data-farbe="gruen"] .pl-plankachel-band { background: var(--gruen); }
.pl-plankachel[data-farbe="amber"] .pl-plankachel-band { background: var(--pl-plan-amber); }
.pl-plankachel[data-farbe="rot"] .pl-plankachel-band { background: var(--rot); }
.pl-plankachel-name { font-size: var(--fs-karte); font-weight: 800; margin-top: 6px; overflow-wrap: anywhere; }
.pl-plankachel-zahl { font-size: var(--fs-titel); font-weight: 800; color: var(--lilat); }
.pl-plankachel-zahl em { font-size: var(--fs-fein); font-weight: 600; font-style: normal; color: var(--tsoft); }
.pl-plankachel-fuss { font-size: var(--fs-fein); color: var(--tsoft); }

.pl-plan-neu {
  align-items: center; justify-content: center; text-align: center;
  border: 1.5px dashed var(--feldrand); box-shadow: none; min-height: 150px;
}
.pl-plan-neu b { font-size: var(--fs-stark); }
.pl-plan-neu span { font-size: var(--fs-fein); color: var(--tsoft); }
.pl-plan-neu-kreis {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--soft); color: var(--lilat);
  display: flex; align-items: center; justify-content: center;
}

.pl-balken { display: block; width: 100%; height: 7px; border-radius: var(--r-pille); background: var(--soft); overflow: hidden; }
.pl-balken i { display: block; height: 100%; background: var(--lilat); border-radius: var(--r-pille); }
.pl-balken i.rot { background: var(--rott); }
.pl-balken i.amber { background: var(--ambert); }
.pl-balken i.blau { background: var(--blaut); }
.pl-balken i.grau { background: var(--tsoft); }

.pl-archiv > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.pl-archiv > summary::-webkit-details-marker { display: none; }
.pl-archiv > summary svg { color: var(--lilat); }

/* ---------- 2. Leiste über den vier Ansichten ---------- */

.pl-leiste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
.pl-leiste-rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* KEIN `outline: none` hier. Diese Regel hat dieselbe Spezifität wie `select:focus-visible`
   in styles.css (beide 0,1,1) und wird später geladen — sie gewann den Gleichstand und nahm
   den beiden Filtern damit JEDE Fokusanzeige: gemessen outline-style none, Ringbreite 0,
   kein Schatten, in beiden Modi. Die 18 anderen erreichbaren Elemente derselben Ansicht
   tragen einen Ring von 4,3:1 bis 11,2:1. Der Ring der Grundregel genügt hier. */
.pl-leiste-rechts select {
  background: var(--weiss); border: 1.5px solid var(--line);
  border-radius: var(--r2); padding: 9px 12px; font-size: var(--fs-text);
}
/* Zwei Klassen, damit die Regel die .search-Basis (0,1,0) sicher schlägt und nicht nur
   dank der Ladereihenfolge gewinnt. */
.pl-leiste .pl-suche { max-width: 230px; min-width: 150px; flex: 0 1 230px; }
.pl-gruppierung { font-size: var(--fs-fein); color: var(--tsoft); font-weight: 600; white-space: nowrap; }

.pl-krume { color: var(--tsoft); font-weight: 600; font-size: var(--fs-titel); }
.pl-krume:hover { color: var(--lilat); }
/* Der Trenner steht im `#topbar h1`, also in 28 px bei Gewicht 400 — Grossschrift, für die
   3:1 gefordert sind. Mit var(--line) mass er 1,27:1 am Tag und 1,37:1 nachts und war damit
   keine Trennung mehr, sondern ein Fleck. --tsoft ist der Ton, den die Krume daneben ohnehin
   trägt, und misst rund 6:1 in beiden Modi. */
.pl-krume-teiler { color: var(--tsoft); margin: 0 8px; font-weight: 400; }

.pl-filterhinweis {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--soft); color: var(--lilat);
  border-radius: var(--r2); padding: 9px 14px; font-size: var(--fs-fein); font-weight: 600;
}

/* ---------- 3. Board ---------- */

/* Das Board rollt WAAGERECHT. Zwei Dinge daran waren am 31.08.2026 kaputt, beide gemessen
   (sechs Buckets, 1280 px Ueberlauf bei 900 px Sichtbreite):

   1. MAN SAH NICHT, DASS ES ROLLT. `overflow-x: auto` stand hier schon, aber diese App
      blendet Bildlaufleisten global aus (`* { scrollbar-width: none }` in styles.css). Die
      fuenfte Spalte war damit mitten in der Karte abgeschnitten, und nichts deutete darauf
      hin, dass rechts noch etwas kommt — es sah nach einem Fehler aus, nicht nach einer
      Rollflaeche. Hier bekommt die Leiste ihre Sichtbarkeit deshalb ausdruecklich zurueck.
      Die Klasse (0,1,0) schlaegt die globale Regel (0,0,0).

   2. DER SCHATTEN WURDE ABGESCHNITTEN. Ein Ueberlaufbehaelter beschneidet auch das, was
      ausserhalb des Inhalts liegt. Die Spalten tragen `box-shadow: 0 10px 30px`, also gut
      30 px Unschaerfe: ohne Polster endete der Schatten hart an der Kante, links, rechts und
      oben. Das Polster schafft Platz dafuer, der negative Aussenabstand nimmt ihn optisch
      wieder weg, damit die erste Spalte buendig unter der Leiste darueber sitzt.
      Die -30 px bleiben INNERHALB des 34-px-Polsters von #content: die Seite selbst bekommt
      dadurch keinen waagerechten Ueberlauf (gegengeprueft). */
/* Der seitliche Rand MUSS zum Polster von #content passen. Am Rechner sind das 34 px, dort
   sind -30 px unbedenklich. Am Handy sind es nur 14 px, und -30 px schoben die GANZE SEITE
   seitlich auf: gemessen 336 px Dokumentbreite bei 320 px Fenster, an jeder Handybreite.
   Das ist die schlimmste Sorte Fehler in dieser App, weil sich dann alles verschieben laesst.
   Der Wert steht deshalb in einer Variablen und wird im Handy-Block mitgezogen, statt an zwei
   Stellen unabhaengig voneinander zu leben. */
.pl-board {
  --pl-brett-rand: 30px;
  display: flex; align-items: flex-start; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: 20px var(--pl-brett-rand) 30px;
  margin: -20px calc(var(--pl-brett-rand) * -1) -24px;
  scrollbar-width: thin;
  scrollbar-color: var(--feldrand) transparent;
}
.pl-board::-webkit-scrollbar { display: block; height: 10px; }
.pl-board::-webkit-scrollbar-track { background: transparent; }
.pl-board::-webkit-scrollbar-thumb { background: var(--feldrand); border-radius: 999px; }
.pl-board::-webkit-scrollbar-thumb:hover { background: var(--lilat); }
.pl-spalte {
  flex: 0 0 var(--pl-spalte-w); width: var(--pl-spalte-w);
  background: var(--weiss); border-radius: var(--r4); box-shadow: var(--shadow);
  padding: 14px 12px 12px;
}
.pl-spalte-neu { background: none; box-shadow: none; padding-top: 0; }
.pl-spalte-kopf { display: flex; align-items: center; gap: 8px; padding: 0 4px 10px; }
.pl-spalte-name { font-size: var(--fs-stark); font-weight: 800; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pl-spalte-zahl {
  font-size: var(--fs-mikro); font-weight: 700; color: var(--tsoft);
  background: var(--soft); border-radius: var(--r-pille); padding: 2px 8px;
}
.pl-ic-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; color: var(--tsoft); flex: 0 0 auto;
}
.pl-ic-btn:hover { background: var(--soft); color: var(--lilat); }

.pl-add {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 9px 10px; border-radius: var(--r2);
  font-size: var(--fs-text); font-weight: 600; color: var(--lilat);
  margin-bottom: 8px;
}
.pl-add:hover { background: var(--soft); }
/* `width: var(--pl-spalte-w)` war die Breite der SPALTE, nicht die ihrer Inhaltsbox: die
   Spalte .pl-spalte-neu hat 12 px Polster je Seite, innen bleiben also 272 px. Gemessen lief
   der gestrichelte Kasten 24 px über die Inhaltsbox und 12 px über die Spaltenkante hinaus
   (Spalte 970..1266, Kasten 982..1278; clientWidth 296 gegen scrollWidth 308) und stand damit
   als einziger Kasten des Boards neben dem Spaltenraster. 100 % rechnet vom Polster aus. */
.pl-bucket-neu {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px;
  border: 1.5px dashed var(--feldrand); border-radius: var(--r3);
  font-size: var(--fs-text); font-weight: 600; color: var(--lilat);
}
.pl-bucket-neu:hover { background: var(--soft); }

.pl-karten { display: flex; flex-direction: column; gap: 9px; min-height: 14px; }
/* Nur WÄHREND eines Zugvorgangs: eine leere Spalte war sonst 14 px hoch und als Ablageziel
   am Rechner kaum zu treffen. Die Höhe entspricht der Ablagestelle darunter, das Board
   springt beim Aufnehmen der Karte also nicht. */
.pl-board.am-ziehen .pl-karten { min-height: 46px; }

/* Ablagestelle: ein echtes Element im Fluss, kein Rahmen an einer Karte. Nur so sieht man
   VOR dem Loslassen, an welche Stelle die Karte rutscht. */
.pl-ablage {
  height: 46px; border-radius: var(--r3);
  border: 2px dashed var(--lilat); background: var(--soft);
}

.pl-karte {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--weiss); border: 1.5px solid var(--line); border-radius: var(--r3);
  padding: 11px 12px; cursor: pointer; text-align: left;
  transition: border-color .12s, box-shadow .12s;
}
.pl-karte:hover { border-color: var(--lilat); box-shadow: var(--shadow); }
.pl-karte:focus-visible { outline: 2px solid var(--lilat); outline-offset: 2px; }
.pl-karte.zieht { opacity: .4; }
.pl-karte.erledigt .pl-karte-titel { text-decoration: line-through; color: var(--tsoft); }
.pl-board.am-ziehen .pl-karte { cursor: grabbing; }

.pl-karte-oben { display: flex; align-items: flex-start; gap: 8px; }
.pl-karte-titel { flex: 1; min-width: 0; font-size: var(--fs-text); font-weight: 600; overflow-wrap: anywhere; }
.pl-karte-menue { margin: -4px -4px 0 0; }
.pl-karte-fuss { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pl-karte-fuss:empty { display: none; }

.pl-karte-check { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.pl-karte-check li { display: flex; align-items: flex-start; gap: 5px; font-size: var(--fs-fein); color: var(--tsoft); }
.pl-karte-check li.ok { text-decoration: line-through; }
.pl-karte-check li.mehr { padding-left: 17px; font-style: italic; }

.pl-etiketten { display: flex; flex-wrap: wrap; gap: 5px; }

.pl-fertig { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.pl-fertig > summary {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: var(--fs-fein); font-weight: 700; color: var(--tsoft); padding: 2px 4px;
}
.pl-fertig > summary::-webkit-details-marker { display: none; }
.pl-fertig > summary:hover { color: var(--lilat); }
.pl-karten-fertig { margin-top: 9px; }
/* Erledigt wird über die FLÄCHE gezeigt, nicht über opacity — dieselbe Lehre wie bei
   .zt-projekt.still in zeit.css. Die Spalte UND die Karte tragen beide var(--weiss): eine
   Gruppendeckkraft von .72 liess die Fläche deshalb unverändert (weiss auf weiss, nachts
   #211a36 auf #211a36) und zog ausschliesslich den Text zum Untergrund. Reiner
   Kontrastverlust ohne optischen Gegenwert. Gemessen hell / nachts, vorher -> nachher:
   Titel und Checkliste 3,31 / 4,11 -> 5,83 / 6,17 · Fristdatum 3,89 / 4,87 -> 5,43 / 7,32 ·
   Etikett blau 3,19 / 4,88 -> 5,62 / 8,01 · Etikett gelb 3,34 / 5,41 -> 6,15 / 8,97 ·
   Avatarkürzel 4,49 / 6,01 -> 8,98 / 8,98 · Haken im grünen Kreis 3,08 / 4,07 -> 5,21 / 5,21.
   Gefordert sind 4,5:1, für den Haken als Grafik 3:1. Nebenbei war die Karte gegen ihre
   Spalte vorher auf 1,00 zu unterscheiden, jetzt auf 1,20 (hell) und 1,12 (nachts).
   Dass die Aufgabe erledigt ist, sagen weiterhin der durchgestrichene Titel und der
   gefüllte Kreis. */
.pl-karten-fertig .pl-karte { background: var(--soft); }

/* Neue Aufgabe direkt in der Spalte */
.pl-neu {
  display: flex; flex-direction: column; gap: 8px;
  border: 1.5px solid var(--lilat); border-radius: var(--r3); padding: 10px; background: var(--weiss);
}
/* Ohne `outline: none`, aus demselben Grund wie oben bei .pl-leiste-rechts select: auch
   `.pl-neu input` ist 0,1,1 und schlug `input:focus-visible` allein über die Ladereihenfolge.
   Gemessen war das Feld beim Durchtabben ohne jede Anzeige (outline-style none), und es hat
   auch keinen eigenen Rand, der einspringen könnte — der Rahmen sitzt am .pl-neu darum. */
.pl-neu input {
  width: 100%; border: 0; background: none;
  font-size: var(--fs-text); font-weight: 600;
}
.pl-neu-fuss { display: flex; gap: 7px; }

/* ---------- 4. Bausteine der Karte (auch im Raster und in den Listen) ---------- */

.pl-kreis {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 21px; height: 21px; border-radius: 50%;
  border: 1.8px solid var(--feldrand); color: transparent; background: none;
  transition: background .12s, color .12s, border-color .12s;
}
.pl-kreis:hover { border-color: var(--gruent); color: var(--gruent); }
.pl-kreis.an { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.pl-kreis.gross { width: 28px; height: 28px; }
.pl-kreis:disabled { opacity: .5; }

.pl-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--gr, 26px); height: var(--gr, 26px); border-radius: 50%;
  background: var(--lila); color: #fff;
  font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0;
}
.pl-avatar.leer { background: var(--soft); color: var(--tsoft); }

.pl-et {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--r-pille);
  font-size: var(--fs-mikro); font-weight: 700; line-height: 1.7; white-space: nowrap;
}
.pl-et.blau { background: var(--pl-et-blau-f); color: var(--pl-et-blau-t); }
.pl-et.aquamarin { background: var(--pl-et-aquamarin-f); color: var(--pl-et-aquamarin-t); }
.pl-et.hellblau { background: var(--pl-et-hellblau-f); color: var(--pl-et-hellblau-t); }
.pl-et.gruen { background: var(--pl-et-gruen-f); color: var(--pl-et-gruen-t); }
.pl-et.gelb { background: var(--pl-et-gelb-f); color: var(--pl-et-gelb-t); }
.pl-et.rot { background: var(--pl-et-rot-f); color: var(--pl-et-rot-t); }
.pl-et.weg { padding-right: 3px; }
.pl-et.weg button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; color: inherit; opacity: .7;
}
.pl-et.weg button:hover { opacity: 1; background: rgba(255, 255, 255, .45); }
html.nacht .pl-et.weg button:hover { background: rgba(0, 0, 0, .3); }

.pl-kalpunkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.pl-kalpunkt.blau { background: var(--pl-et-blau-t); }
.pl-kalpunkt.aquamarin { background: var(--pl-et-aquamarin-t); }
.pl-kalpunkt.hellblau { background: var(--pl-et-hellblau-t); }
.pl-kalpunkt.gruen { background: var(--pl-et-gruen-t); }
.pl-kalpunkt.gelb { background: var(--pl-et-gelb-t); }
.pl-kalpunkt.rot { background: var(--pl-et-rot-t); }

/* Fälligkeit: überfällig rot, heute amber. Bewusst die TEXT-Variablen (--rott/--ambert) und
   keine Fläche — auf der weissen Karte wie auf der dunklen bleibt so der Kontrast stehen. */
.pl-frist {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-mikro); font-weight: 700; color: var(--tsoft);
}
.pl-frist.ueber { color: var(--rott); }
.pl-frist.heute { color: var(--ambert); }
.pl-fristzeile { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; justify-content: center; }

.pl-prio { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-mikro); font-weight: 700; color: var(--tsoft); }
.pl-prio i { width: 7px; height: 7px; border-radius: 2px; background: var(--tsoft); transform: rotate(45deg); }
.pl-prio.rot { color: var(--rott); } .pl-prio.rot i { background: var(--rott); }
.pl-prio.amber { color: var(--ambert); } .pl-prio.amber i { background: var(--ambert); }
.pl-prio.blau { color: var(--blaut); } .pl-prio.blau i { background: var(--blaut); }

.pl-mini { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-mikro); font-weight: 700; color: var(--tsoft); }
.pl-durch { text-decoration: line-through; color: var(--tsoft); }
.pl-zeile-person { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- 5. Raster ---------- */

/* Zwei Klassen wie `table.liste td` (0,1,1) — sonst bliebe die Basisregel stärker. */
table.pl-raster td { vertical-align: middle; }
table.pl-raster td .sec { display: block; margin-top: 2px; }
table.pl-raster .pl-et + .pl-et { margin-left: 4px; }

/* ---------- 6. Kalender ---------- */

.pl-kalkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pl-kalkopf h2 { margin: 0; }
.pl-kalnav { display: flex; align-items: center; gap: 6px; }
/* Der Zurück-Pfeil ist derselbe Chevron, nur gespiegelt: ein zweites Symbol dafür wäre
   eine zweite Stelle, die man beim nächsten Icon-Umbau vergessen kann. */
.pl-kalnav .pl-zurueck svg { transform: scaleX(-1); }

.pl-kalrolle { overflow-x: auto; overscroll-behavior-x: contain; }
.pl-kalwoche {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px;
}
.pl-kalwoche span {
  text-align: center; font-size: var(--fs-mikro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--tsoft);
}
.pl-kalraster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.pl-kalzelle {
  min-height: 112px; border-radius: var(--r2); border: 1px solid var(--line);
  background: var(--bg); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
/* Tage aus dem Nachbarmonat: nur die FLÄCHE zurücknehmen, genau wie .zt-mtag.fremd in
   zeit.css. `opacity: .45` legte sich als Gruppe über die ganze Zelle und zog jeden Text
   darin mit: die Tagesziffer fiel von 6,02:1 auf 1,95:1 am Tag und von 7,15:1 auf 2,49:1
   nachts, der Aufgabentext von 19,95:1 auf 3,19:1 (hell) und von 13,68:1 auf 3,83:1
   (nachts). Gefordert sind 4,5:1. Jetzt nimmt die Zelle die Kartenfarbe an und verschwindet
   dadurch optisch; der gestrichelte Rand bleibt als Kennzeichen und wird von --line auf
   --feldrand gehoben, weil er nach dem Wegfall des Flächenunterschieds allein dasteht.
   Die Tagesziffer braucht hier KEINE eigene Dämpfung mehr (anders als .zt-mtag-d): sie steht
   ohnehin schon in --tsoft. Der Eintrag tauscht die Fläche mit der Zelle, sonst stünde er
   weiss auf weiss. */
.pl-kalzelle.fremd { background: var(--weiss); border-style: dashed; border-color: var(--feldrand); }
.pl-kalzelle.fremd .pl-kaleintrag { background: var(--bg); }
.pl-kalzelle.heute { border-color: var(--lilat); background: var(--soft); }
.pl-kalzelle-tag { font-size: var(--fs-fein); font-weight: 700; color: var(--tsoft); }
.pl-kalzelle.heute .pl-kalzelle-tag { color: var(--lilat); }
.pl-kalzelle-liste { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; max-height: 118px; }

.pl-kaleintrag {
  display: flex; align-items: center; gap: 5px; width: 100%;
  background: var(--weiss); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 6px; font-size: var(--fs-mikro); font-weight: 600; text-align: left;
}
.pl-kaleintrag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-kaleintrag:hover { border-color: var(--lilat); color: var(--lilat); }
.pl-kaleintrag.ueber { color: var(--rott); border-color: var(--rot-soft); }
.pl-kaleintrag.heute { color: var(--ambert); border-color: var(--amber-soft); }
.pl-kaleintrag.erledigt { text-decoration: line-through; color: var(--tsoft); }

/* „und N weitere" schließt eine volle Kalenderzelle sichtbar ab. Ohne diesen Knopf hing der
   Rest hinter einem Rollbalken, den in dieser App niemand sieht. */
.pl-kalmehr {
  width: 100%; flex: 0 0 auto; text-align: left; padding: 3px 6px; border-radius: 8px;
  font-size: var(--fs-mikro); font-weight: 700; color: var(--lilat);
}
.pl-kalmehr:hover { background: var(--soft); }

.pl-kalohne { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.pl-kalohne b { font-size: var(--fs-fein); color: var(--tsoft); }
.pl-kalohne-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pl-kalohne-liste .pl-kaleintrag { width: auto; }

/* ---------- 7. Diagramme ---------- */

.pl-ringblock { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; position: relative; }
/* Der Ring zeichnet mit stroke, nicht mit fill. Deshalb tragen seine Abschnitte die
   TEXT-Variablen: sie müssen sich gegen die Kartenfläche behaupten, genau wie Schrift. */
.pl-ring { flex: 0 0 auto; }
.pl-ring-grund { stroke: var(--soft); }
.pl-ring-seg.offen { stroke: var(--pl-ring-offen); }
.pl-ring-seg.laeuft { stroke: var(--blaut); }
.pl-ring-seg.fertig { stroke: var(--gruent); }
.pl-ringzahl {
  position: absolute; left: 70px; top: 70px; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
}
.pl-ringzahl b { display: block; font-size: var(--fs-titel); font-weight: 800; line-height: 1.1; }
.pl-ringzahl span { font-size: var(--fs-mikro); color: var(--tsoft); }
.pl-ringlegende { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 8px; }
.pl-legende-zeile { display: flex; align-items: center; gap: 9px; font-size: var(--fs-text); }
.pl-legende-zeile span { flex: 1; min-width: 0; color: var(--tsoft); }
.pl-legende-zeile em { font-style: normal; font-size: var(--fs-fein); color: var(--tsoft); min-width: 42px; text-align: right; }
.pl-punkt { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.pl-punkt.offen { background: var(--pl-ring-offen); }
.pl-punkt.laeuft { background: var(--blaut); }
.pl-punkt.fertig { background: var(--gruent); }

.pl-balkenliste { display: flex; flex-direction: column; gap: 11px; }
.pl-balkenzeile { display: flex; align-items: center; gap: 11px; }
.pl-balken-l { flex: 0 0 33%; min-width: 0; font-size: var(--fs-text); overflow-wrap: anywhere; }
.pl-balkenzeile .pl-balken { flex: 1; height: 12px; }
.pl-balken-n { flex: 0 0 34px; text-align: right; font-weight: 700; font-size: var(--fs-text); }

/* ---------- 8. Aufgabenfenster ---------- */

/* Der Erledigt-Kreis steht im Quelltext NACH dem Titelfeld und wird hier davor gerückt.
   Grund: openModal() fokussiert das erste Bedienelement, und ein fokussierter Knopf löst
   bei Enter oder Leertaste aus — die Aufgabe war abgehakt, bevor jemand etwas gedrückt
   hatte, was er als Bedienung meinte. Siehe Punkt 2 im Kopf von planer.js. */
.pl-af-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.pl-af-kopf .pl-kreis { order: -1; }
.pl-af-titel {
  flex: 1; min-width: 0;
  border: 1.5px solid transparent; border-radius: var(--r2); background: none;
  font-size: var(--fs-titel); font-weight: 800; letter-spacing: -.03em;
  padding: 6px 9px; outline: none;
}
.pl-af-titel:hover { border-color: var(--line); }
.pl-af-titel:focus { border-color: var(--lilat); background: var(--bg); }
.pl-af-herkunft { font-size: var(--fs-fein); color: var(--tsoft); margin: 0 0 16px 40px; }

.pl-af { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.pl-af-links { min-width: 0; }
.pl-af-rechts { min-width: 0; border-left: 1px solid var(--line); padding-left: 20px; }
.pl-af-etiketten { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; }
.pl-af-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.pl-af-fest {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg); border-radius: var(--r2); padding: 11px 13px; font-size: var(--fs-text); font-weight: 600;
}

.pl-et-add { position: relative; }
.pl-et-add-btn {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1.5px dashed var(--feldrand); border-radius: var(--r-pille);
  padding: 2px 10px; font-size: var(--fs-mikro); font-weight: 700; color: var(--tsoft);
}
.pl-et-add-btn:hover { border-color: var(--lilat); color: var(--lilat); }
.pl-et-menue {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; min-width: 170px;
  background: var(--weiss); border: 1px solid var(--line); border-radius: var(--r2);
  box-shadow: var(--shadow-lg); padding: 5px; display: flex; flex-direction: column;
}
.pl-et-wahl {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-radius: 9px; font-size: var(--fs-text); text-align: left;
}
.pl-et-wahl:hover { background: var(--soft); }

.pl-af-abschnitt { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.pl-af-abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pl-af-abschnitt-kopf b { display: flex; align-items: center; gap: 7px; font-size: var(--fs-text); }
.pl-af-abschnitt-kopf b svg { color: var(--lilat); }
.pl-af-abschnitt-kopf .pl-checkzahl { font-weight: 600; color: var(--tsoft); font-size: var(--fs-fein); }
.pl-schalter { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-fein); color: var(--tsoft); font-weight: 600; cursor: pointer; }

.pl-check-zeile { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.pl-check-zeile label { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; cursor: pointer; font-size: var(--fs-text); }
.pl-check-zeile.ok span { text-decoration: line-through; color: var(--tsoft); }
.pl-check-neu {
  width: 100%; margin-top: 8px;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r2);
  padding: 10px 12px; outline: none; font-size: var(--fs-text);
}
.pl-check-neu:focus { border-color: var(--lilat); background: var(--weiss); }
.pl-check-leer { font-size: var(--fs-fein); color: var(--tsoft); padding: 6px 0; }

.pl-chat { display: flex; flex-direction: column; gap: 14px; max-height: 300px; overflow-y: auto; padding-right: 2px; }
.pl-komm { display: flex; gap: 9px; align-items: flex-start; }
.pl-komm-text { min-width: 0; flex: 1; }
.pl-komm-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pl-komm-kopf b { font-size: var(--fs-text); }
.pl-komm-kopf span { font-size: var(--fs-mikro); color: var(--tsoft); }
.pl-komm p { font-size: var(--fs-text); line-height: 1.55; overflow-wrap: anywhere; margin-top: 2px; }
.pl-erwaehnt { color: var(--lilat); font-weight: 700; }

.pl-chat-eingabe { position: relative; margin-top: 14px; }
/* Ohne `outline: none`, dritte Stelle derselben Spezifitätsfalle (0,1,1 gegen
   `textarea:focus-visible`, ebenfalls 0,1,1, und planer.css lädt später). Gemessen blieb dem
   Kommentarfeld nur der Randwechsel über 1,5 px, während alle 18 anderen erreichbaren
   Elemente desselben Fensters einen 2-px-Ring trugen. Die Randfärbung darunter bleibt. */
.pl-chat-eingabe textarea {
  width: 100%; resize: vertical; min-height: 62px;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r2);
  padding: 10px 12px; font-size: var(--fs-text); line-height: 1.5;
}
.pl-chat-eingabe textarea:focus { border-color: var(--lilat); background: var(--weiss); }
.pl-chat-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.pl-chat-hinweis { font-size: var(--fs-mikro); color: var(--tsoft); }

.pl-erw {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(100% + 6px);
  background: var(--weiss); border: 1px solid var(--line); border-radius: var(--r2);
  box-shadow: var(--shadow-lg); padding: 5px; display: flex; flex-direction: column; max-height: 210px; overflow-y: auto;
}
.pl-erw-zeile { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; text-align: left; font-size: var(--fs-text); }
.pl-erw-zeile span { font-size: var(--fs-mikro); color: var(--tsoft); }
.pl-erw-zeile:hover, .pl-erw-zeile.aktiv { background: var(--soft); }

/* Löschen steht links, alles andere rechts. Die Basisregel `.modal .m-foot` (0,2,0) schiebt
   alles nach rechts; hier bekommt nur der eine Knopf den Platz dazwischen. */
.pl-foot .pl-weg { margin-right: auto; }

/* Menü an der Karte (am Handy der einzige Weg zum Verschieben) */
.pl-menue { display: flex; flex-direction: column; gap: 2px; }
.pl-menue-titel { font-size: var(--fs-fein); font-weight: 700; color: var(--tsoft); margin: 16px 0 6px; }
.pl-menue-zeile {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; border-radius: var(--r2); text-align: left; font-size: var(--fs-text); font-weight: 600;
}
.pl-menue-zeile svg { color: var(--tsoft); }
.pl-menue-zeile:hover { background: var(--soft); }
.pl-menue-zeile.aktiv { color: var(--lilat); }
.pl-menue-zeile.aktiv svg { color: var(--lilat); }
.pl-menue-zeile em { font-style: normal; font-weight: 400; color: var(--tsoft); font-size: var(--fs-fein); }

/* ---------- 9. Listen über alle Pläne (Meine Aufgaben, Mein Tag) ---------- */

.pl-gruppe.ueber { color: var(--rott); }
.pl-gruppe.ueber svg { color: var(--rott); }
.pl-gruppe.heute { color: var(--ambert); }

.pl-zeilen { display: flex; flex-direction: column; }
.pl-zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 6px; border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background .12s;
}
.pl-zeile:last-child { border-bottom: 0; }
.pl-zeile:hover { background: var(--bg); }
.pl-zeile:focus-visible { outline: 2px solid var(--lilat); outline-offset: -2px; }
.pl-zeile-mitte { flex: 1; min-width: 0; }
.pl-zeile-titel { display: block; font-size: var(--fs-text); font-weight: 600; overflow-wrap: anywhere; }
.pl-zeile-sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: var(--fs-fein); color: var(--tsoft); margin-top: 3px; }
.pl-zeile-rechts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- 9b. Startkarte auf „Heute" (NOVA) ---------- */

/* Abstand zu den Nachbarkarten. Der Platzhalter `#heute-planer` (app.js, viewHeute) ist ein
   blankes div ohne Klasse — `.card + .card` und `.section + .section` aus styles.css greifen
   deshalb WEDER darüber noch darunter hinweg, und die Auffangregel `#main > * + *` erreicht
   ihn nicht (er ist Enkel von #main, nicht Kind). Ohne diese beiden Zeilen stösst die Karte
   oben und unten mit 0 px an ihre Nachbarn. Genau diese Fehlerklasse steht schon als Warnung
   an `.card + .card` in styles.css.
   Zwei Zeilen statt einer Klasse am Platzhalter: ist er leer (kein PLANER-Zugang), soll der
   Abstand zwischen den beiden Nachbarkarten genau einmal entstehen und nicht doppelt. */
#heute-planer > .card { margin-top: 18px; }
#heute-planer + .card { margin-top: 18px; }

/* Kartentitel und Auswahlfeld in EINER Zeile — mit Umbruch. Das Feld steht bewusst nicht im
   <h2> selbst: `.card h2` bricht nicht um, und am Handy quetschte das Feld die Überschrift
   sonst auf zwei Wörter zusammen. Ein eigener Umschlag löst das ohne `:has()`.
   Der untere Abstand wandert vom h2 hierher, sonst steht er bei Umbruch zwischen den Zeilen. */
.pl-startkopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pl-startkopf > h2 { margin-bottom: 0; }

/* Eigene Schriftgröße, sonst erbte das Feld die 18 px der Überschrift: genau 16 px, denn
   darunter zoomt iOS-Safari beim Antippen hinein und nicht wieder heraus. Fläche und Rand wie
   bei `.filters select`, damit es dasselbe Feld ist wie in den übrigen Filterzeilen. */
.pl-startwahl {
  /* Ein Auswahlfeld ist von sich aus so breit wie sein laengster Eintrag, und ein Planname
     darf 60 Zeichen haben. Ohne Deckel schob ein einziger langer Name die Ueberschrift in die
     zweite Zeile; mit Deckel schneidet der Browser den Eintrag ab, was hier das kleinere Uebel
     ist — welcher Plan gemeint ist, steht auch in jeder Zeile darunter.
     `flex: 1 1 150px` statt einer festen Breite: die Startseite steht am Rechner in zwei
     Spalten, die linke misst innen rund 475 px, und die Ueberschrift nimmt davon 282. Mit
     Wunschbreite 150 px passt das Feld daneben und fuellt den Rest der Zeile (rund 180 px,
     genug fuer „Aufgaben Bastian"); am Handy reicht es nicht mehr, dort rutscht es als GANZE
     Zeile darunter statt als schmaler Rest rechts oben zu kleben.
     `min-width: 0` ist dabei die Zeile, ohne die das Ganze nicht funktioniert: ein Flex-Kind
     darf von sich aus nicht unter seine Inhaltsbreite schrumpfen, und die Inhaltsbreite eines
     Auswahlfeldes ist sein LAENGSTER Eintrag. Ohne diese Zeile bestimmt ein einziger langer
     Planname die Breite des Feldes, und der Umbruch haengt an ihm statt an der Wunschbreite. */
  flex: 1 1 150px;
  min-width: 0;
  max-width: 100%;
  font-size: 16px; font-weight: 600;
  background: var(--weiss); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 6px 10px; outline: none;
}
.pl-startwahl:focus-visible { border-color: var(--lilat); box-shadow: 0 0 0 4px rgba(96, 39, 166, .12); }

/* Gruppenüberschrift INNERHALB der Karte. Nicht .pl-gruppe: die ist ein <h2> und lebt von
   `.card h2` aus styles.css — hier gibt es aber schon ein h2 darüber, den Kartentitel. */
.pl-startgruppe {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-fein); font-weight: 700; color: var(--tsoft);
  text-transform: uppercase; letter-spacing: .04em;
  margin: 16px 0 2px;
}
/* NICHT `:first-of-type`. Das meint das erste Geschwister derselben ELEMENTART, und das erste
   div der Karte ist immer .pl-startkopf — die Regel traf damit nie ein Element, und die erste
   Gruppe behielt ihre 16 px nach oben. Der Nachbarschafts-Selektor trifft genau sie. */
.pl-startkopf + div > .pl-startgruppe:first-child { margin-top: 0; }
.pl-startgruppe.ueber { color: var(--rott); }
.pl-startgruppe.heute { color: var(--ambert); }
.pl-startgruppe .count { text-transform: none; letter-spacing: 0; color: var(--tsoft); font-weight: 600; }

.pl-startspaeter { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.pl-startspaeter > summary {
  cursor: pointer; font-size: var(--fs-fein); font-weight: 700; color: var(--tsoft);
  display: flex; align-items: center; gap: 8px;
}
.pl-startspaeter > summary::-webkit-details-marker { display: none; }
.pl-startspaeter > summary::before {
  content: ''; width: 7px; height: 7px; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.pl-startspaeter[open] > summary::before { transform: rotate(45deg); }
.pl-startspaeter > summary:hover { color: var(--text); }

/* Hinweis auf eine gekuerzte Liste. „0 Warnungen" ist nicht „geprueft" und eine stille
   Kuerzung liest sich wie „mehr gibt es nicht" — deshalb steht sie hier ausdruecklich da. */
.pl-startdeckel { margin-top: 12px; font-size: var(--fs-fein); color: var(--tsoft); }

/* ---------- 10. Handy und schmale Fenster ---------- */

@media (max-width: 900px) {
  /* Das Board bleibt eine Reihe zum Wischen: Spalten untereinander würden aus fünf Buckets
     eine endlose Rolle machen, in der man den Zusammenhang verliert. Nur schmaler. */
  :root { --pl-spalte-w: 264px; }
  /* Hier hat #content nur 14 px Polster (styles.css). Ein groesserer negativer Rand schiebt
     die Seite seitlich auf, siehe die Begruendung oben an .pl-board. */
  .pl-board { --pl-brett-rand: 14px; }
  .pl-leiste { gap: 10px; }
  .pl-leiste-rechts { width: 100%; }
  .pl-leiste .pl-suche { flex: 1 1 100%; max-width: none; }
  .pl-gruppierung { display: none; }

  .pl-af { grid-template-columns: 1fr; gap: 18px; }
  .pl-af-rechts { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 16px; }
  .pl-af-felder { grid-template-columns: 1fr; }
  .pl-af-herkunft { margin-left: 0; }
  .pl-af-titel { font-size: var(--fs-karte); }

  /* Die Fußzeile bricht am Handy um (`.modal .m-foot` setzt flex-wrap und volle Breite je
     Knopf). Ein „margin-right: auto" schöbe „Löschen" dann ins Leere. */
  .pl-foot .pl-weg { margin-right: 0; }

  .pl-kalzelle { min-height: 84px; padding: 4px; }
  .pl-kalzelle-liste { max-height: 78px; }
  .pl-kaleintrag { padding: 3px 4px; }
  .pl-balken-l { flex: 0 0 40%; }
  .pl-zeile-rechts { gap: 8px; }

  /* iOS-Safari zoomt beim Fokus in Felder unter 16 px hinein und NICHT wieder zurück.
     styles.css setzt dagegen `input, select, textarea { font-size: var(--fs-karte) }`, aber
     diese vier Regeln stehen mit gleicher oder höherer Spezifität in einer später geladenen
     Datei und gewannen mit ihren 14 px. Hier wieder eingefangen, wieder mit gleicher
     Spezifität und weiter unten in derselben Datei. */
  .pl-leiste-rechts select,
  .pl-neu input,
  .pl-check-neu,
  .pl-chat-eingabe textarea { font-size: var(--fs-karte); }

  /* Trefferflächen für den Finger. Die Norm nennt 44 x 44 px; der Erledigt-Kreis maß 21 px,
     das Kartenmenü 30 px und der Etikettenknopf 17 px. Die sichtbare Größe bleibt fast
     gleich, die Fläche wächst über ein ::after — so verschiebt sich das Layout nicht.
     Der Kreis wächst nach rechts nur bis an die 8-px-Lücke vor dem Titel: läge er darüber,
     würde ein Griff nach dem Titel die Aufgabe abhaken. */
  .pl-kreis { width: 28px; height: 28px; position: relative; }
  .pl-kreis::after { content: ''; position: absolute; inset: -8px; }
  .pl-ic-btn { position: relative; }
  .pl-ic-btn::after { content: ''; position: absolute; inset: -7px; }
  /* Das negative Aussenmass zog das Kartenmenü zusätzlich an den Rand der Karte. */
  .pl-karte-menue { margin: 0; }
  .pl-et.weg button { width: 26px; height: 26px; position: relative; }
  .pl-et.weg button::after { content: ''; position: absolute; inset: -9px; }
}

@media (max-width: 560px) {
  /* Unter 560 px wäre eine Monatsspalte nur noch rund 40 px breit, kein Aufgabentitel ist
     dort mehr lesbar. Statt den Text wegzunehmen (dann stünde bei Aufgaben ohne Etikett
     eine leere Kachel), bekommt das Raster eine Mindestbreite und wird seitlich gerollt:
     der Monat bleibt als Monat erkennbar. */
  .pl-kalraster, .pl-kalwoche { min-width: 620px; }
  .pl-plankacheln { grid-template-columns: 1fr; }
}

/* Bewegung beim Erledigen (Runde 79): der Haken springt kurz. Nur transform, keine Farbe.
   Klasse setzt planer.js und nimmt sie mit dem Neuzeichnen wieder weg — kein animationend
   (prefers-reduced-motion schaltet Animationen ab, dann feuert es nie). */
@keyframes pl-huepft {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.5); }
  60%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
.pl-kreis.pl-huepft { animation: pl-huepft .45s ease-out; }