/* ══════════════════════════════════════════════════════════════════════════
   POSTD · PLAKAT — Komponenten. Baut auf tokens.css.
   Zustandsreihenfolge überall: Ruhe, Hover, Gedrückt, Fokus, Gesperrt, Läuft.
   Regel: alles Anfassbare ist vollrund, alles Inhaltliche hat Radius 0.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Zeichen: drei Balken, aus dem Kachelfeld abgeleitet (§06) ──────────────
   Radius sitzt an je EINER Seite: Balken 1 rechts, Balken 2 nirgends,
   Balken 3 links. Das ist die Karussell-Lesart. Der Menü-Zustand richtet alle
   drei auf gleiche Breite aus — daher der Morph.                            */
.mark{
  display:inline-flex; flex-direction:column; gap:3px;
  flex:none; cursor:pointer; background:none; border:0; padding:0;
}
/* Als Knopf ist das Zeichen mobil die einzige Navigation — Trefferfläche
   mindestens 44×44, ohne die Balken optisch zu vergrößern. */
button.mark{
  min-width:var(--touch); min-height:var(--touch);
  align-items:flex-start; justify-content:center;
  margin-left:-8px;            /* optische Kante bleibt, wo sie war */
}
.mark i{
  display:block; height:5px; background:var(--ink);
  transition:width var(--t-morph), border-radius var(--t-morph);
}
.mark i:nth-child(1){ width:18px; border-radius:0 3px 3px 0; }
.mark i:nth-child(2){ width:29px; border-radius:0; }
.mark i:nth-child(3){ width:23px; border-radius:3px 0 0 3px; }
/* Menü offen: drei gleiche Balken = Hamburger, ohne Fremdsymbol */
.mark[aria-expanded="true"] i:nth-child(1),
.mark[aria-expanded="true"] i:nth-child(2),
.mark[aria-expanded="true"] i:nth-child(3){ width:29px; border-radius:0; }
.mark-sm i{ height:3.5px; }
.mark-sm i:nth-child(1){ width:13px; border-radius:0 2px 2px 0; }
.mark-sm i:nth-child(2){ width:21px; }
.mark-sm i:nth-child(3){ width:16px; border-radius:2px 0 0 2px; }

/* T18 · Als Verweis war die Wortmarke 55x23 und lag damit unter den 24 px
   Mindestgroesse. Sie steht nicht im Fliesstext, also greift die Ausnahme
   fuer Links in einem Satz hier nicht. Die Trefferflaeche waechst auf 44,
   das Schriftbild bleibt unveraendert — der Kopf ist 76 px hoch, es ist
   also nichts zu sehen. */
.wordmark{
  font-family:var(--font-display); font-weight:700;
  font-size:15px; letter-spacing:.02em; color:var(--ink);
}
a.wordmark{ display:inline-flex; align-items:center; min-height:var(--touch); }
.wordmark-caps{ text-transform:uppercase; letter-spacing:.28em; }

/* ── Pille: alles Anfassbare ist vollrund ────────────────────────────────── */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  min-height:var(--touch); padding:0 22px;
  font-family:var(--font-display); font-weight:600; font-size:15px;
  border-radius:var(--r-control); border:var(--b-hair) solid transparent;
  background:none; color:var(--ink); cursor:pointer; text-decoration:none;
  transition:background var(--t-state), color var(--t-state), border-color var(--t-state);
}
.pill:active{ transition:var(--t-tap); }
.pill[disabled],.pill[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }

/* Primär: Ink-Fläche mit lautem Kreis. Nur EINE pro Fläche. */
.pill-primary{ background:var(--ink); color:var(--paper); padding:0 5px 0 20px; }
.pill-primary:hover{ background:#000; }
.pill-primary .dot{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex:none; border-radius:var(--r-control);
  background:var(--loud); color:var(--ink);
  font-family:var(--font-mono); font-size:12px; line-height:1;
}
/* T04 · Stand vorher auf color:var(--paper) und erreichte damit 3,37:1 —
   und zwar auf genau den Tasten, an denen Geld entsteht: Abo starten,
   Kostenlos anfangen, Vertrag kündigen. Die barrierefreie Variante gab es
   im System schon, sie stand nur als Sonderregel bei .mission .cta.
   Jetzt ist sie der Normalfall. Zustände gehen nach oben heller, weil der
   Kontrast dunkler Schrift beim Abdunkeln sinken würde (auf --acc-600 nur
   noch 4,39, auf --acc-700 nur noch 3,56). */
.pill-loud{ background:var(--loud); color:var(--ink); }
.pill-loud:hover{ background:var(--acc-400); }
.pill-loud:active{ background:var(--acc-300); }

.pill-quiet{ background:var(--paper); color:var(--ink); }
.pill-quiet:hover{ background:var(--bone); }

.pill-outline{ border-color:var(--ink); }
.pill-outline:hover{ background:var(--bone); }

.pill-danger{ border-color:var(--danger); color:var(--danger); }
.pill-danger:hover{ background:var(--danger-bg); }

/* V27 · Endgültige Aktionen. Vorher trug „Vertrag jetzt kündigen" dieselbe
   Signalfarbe wie „Abo starten" — die lauteste Farbe der Marke stand damit
   gleichzeitig für Kaufen und für Abwandern, und innerhalb einer Sitzung
   lernt niemand, was Orange bedeutet. Eigene Rolle: Ink-Fläche, helle
   Schrift (18,9:1), laute Kante als Zugehörigkeit zur Marke. */
.pill-final{
  background:var(--ink); color:var(--paper);
  border-color:var(--loud); border-width:var(--b-inner);
}
.pill-final:hover{ background:#000; border-color:var(--acc-400); }

/* Läuft: Kachellauf, nie ein Fremdsymbol (§08) */
.pill .spin{
  width:14px; height:14px; flex:none; background:currentColor;
  animation:tileSpin 1.2s linear infinite;
}

/* ── Feld: Inhalt, also Radius 0 ─────────────────────────────────────────── */
.field{ display:block; }
.field > label{
  display:block; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:8px;
}
.input{
  width:100%; min-height:var(--touch); padding:0 14px;
  font-family:var(--font-display); font-size:16px; /* 16 = kein iOS-Zoom */
  color:var(--ink); background:var(--bone);
  border:var(--b-hair) solid transparent; border-radius:var(--r-content);
  caret-color:var(--loud);
}
.input::placeholder{ color:var(--ink-3); }
.input:hover{ border-color:var(--edge); }
.input:focus-visible{
  background:var(--paper); border:1.5px solid var(--loud); outline:none;
}
.input[readonly]{ background:transparent; border:var(--b-hair) dashed var(--edge); color:var(--ink-2); }
.input[aria-invalid="true"]{ background:var(--danger-bg); border:1.5px solid var(--danger); }
.field-error{ font-size:14px; color:var(--danger); margin-top:8px; }
textarea.input{ min-height:96px; padding:12px 14px; resize:vertical; }

/* ── Werkzeug-Knopf: aktiv = Tinte, nicht Orange ─────────────────────────── */
.tool{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--touch); height:var(--touch); flex:none;
  background:var(--bone); color:var(--ink); border:0;
  border-radius:var(--r-content); cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  transition:background var(--t-state), color var(--t-state);
}
.tool:hover{ background:var(--edge); }
.tool[aria-pressed="true"],.tool.on{ background:var(--ink); color:var(--paper); }
.tool[disabled]{ opacity:.35; cursor:not-allowed; }

/* ── Schalter ────────────────────────────────────────────────────────────── */
.switch{
  position:relative; display:inline-block; width:34px; height:20px; flex:none;
  border-radius:var(--r-control); background:var(--edge); border:0;
  cursor:pointer; transition:background var(--t-state);
}
.switch::after{
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:var(--r-control);
  background:var(--paper); transition:transform var(--t-state);
}
.switch[aria-checked="true"]{ background:var(--loud); }
.switch[aria-checked="true"]::after{ transform:translateX(14px); }

/* ── Panel: die einzige Zwischenstufe beim Radius ────────────────────────── */
.panel{
  border-radius:var(--r-panel); background:var(--bone);
  padding:var(--sp-6); overflow:hidden;
}
/* M15 · Am Handy blieben von 390 px Bildschirm nur 270 px Textbreite, weil
   links und rechts je 40 px Innenabstand standen. Der Befund sprach von einer
   gebrochenen Lesekante — nachgemessen sitzen die Panels bündig bei 20 px,
   der Versatz war der Innenabstand. Trotzdem richtig, ihn zu verkleinern:
   24 px bleiben im Achterraster und geben 30 Prozent mehr Zeilenlaenge. */
@media (max-width:767px){ .panel{ padding:var(--sp-4); } }
.panel-ink{ background:var(--ink); color:var(--paper); }
/* Hover: Inhalt hebt 4 px, das Panel selbst steht still (§01) */
.panel .lift{ transition:transform var(--t-state); }
.panel:hover .lift{ transform:translateY(-4px); }

/* ── Kachel & Auswahl ────────────────────────────────────────────────────── */
.tile{ border-radius:var(--r-content); background:var(--bone); }
.tile.sel{ outline:1.5px solid var(--loud); outline-offset:5px; }
.tile.empty{
  border:var(--b-hair) dashed var(--edge); background:none;
  display:flex; align-items:center; justify-content:center; color:var(--ink-3);
}

/* ── Rückmeldung: Zeile am Fuß, nie Sprechblase ──────────────────────────── */
.note{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; background:var(--paper);
  border:var(--b-inner) solid var(--ink); border-radius:var(--r-content);
  font-size:15px; color:var(--ink);
}
.note .act{ margin-left:auto; font-weight:600; color:var(--acc-800); cursor:pointer; }
.note-error{ background:var(--danger-bg); border-color:var(--danger); color:var(--danger); }

/* ── Blockkante: das Plakat-Gerüst ───────────────────────────────────────── */
.block{ border:var(--b-block) solid var(--ink); }
.block-split{ display:grid; gap:0; }
.block-split > * + *{ border-left:var(--b-hair) solid var(--hair); }

/* ══════════════════════════════════════════════════════════════════════════
   Kachelfeld — der Grund arbeitet (§03).
   Kein Muster, sondern ein Karussell in Zeitlupe: der Radius wandert um die
   Zelle. Reines CSS, versetzt über negative Delays, 12–20 s.
   ══════════════════════════════════════════════════════════════════════════ */
@property --tf-r{ syntax:'<length-percentage>'; inherits:false; initial-value:0%; }

/* D15: Zellen in VOLLER Orange-Deckung auf weissem Grund, Schrift schwarz.
   Lesbarkeit entsteht durch Platzierung — motion.js haelt das Missionsband
   frei — nicht durch Abdimmen. */
.tilefield{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:1fr;
}
.tilefield span{ display:block; }
.tilefield span.on{ background:var(--loud); }
/* Auf orangem Grund (Pre-Footer) laeuft dieselbe Textur in Schwarz. */
.tilefield-ink span.on{ background:var(--ink); }

/* Der Radius wandert um die Zelle: ein Karussell in Zeitlupe.
   Grosse Sprünge, damit die Bewegung praegnant ist (R1.1). */
@keyframes tfA{ 0%,100%{ border-radius:0 } 50%{ border-radius:100% 0 0 0 } }
@keyframes tfB{ 0%,100%{ border-radius:100% 0 0 0 } 50%{ border-radius:0 0 100% 0 } }
@keyframes tfC{ 0%,100%{ border-radius:0 100% 0 0 } 50%{ border-radius:100% 0 100% 0 } }
@keyframes tfD{ 0%,100%{ border-radius:0 0 100% 0 } 50%{ border-radius:0 100% 0 100% } }

.tilefield .a{ animation:tfA 11s var(--e-heavy) infinite; }
.tilefield .b{ animation:tfB 13s var(--e-heavy) infinite; }
.tilefield .c{ animation:tfC 15s var(--e-heavy) infinite; }
.tilefield .d{ animation:tfD 17s var(--e-heavy) infinite; }

/* Rechenarbeit: derselbe Kachellauf, überall, nie ein Spinner (§08) */
@keyframes tileSpin{
  0%{   border-radius:100% 0 0 0 }
  25%{  border-radius:0 100% 0 0 }
  50%{  border-radius:0 0 100% 0 }
  75%{  border-radius:0 0 0 100% }
  100%{ border-radius:100% 0 0 0 }
}
.loading{ width:16px; height:16px; background:var(--loud); animation:tileSpin 1.2s linear infinite; }

/* Skelett für unbekannte Dauer, in der Form des Ergebnisses */
@keyframes skel{ 0%,100%{ opacity:.3 } 50%{ opacity:.75 } }
.skel{ background:var(--bone); animation:skel 1.4s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════════════════
   META-POST (R2, TEIL B) — die stilisierte Post-Andeutung der Startseite.
   HELLER Modus: weisser Grund, Text als DURCHSCHEINENDE Bloecke, nie als
   Vollton-Kasten. So funktioniert IG-Design — Text sitzt auf dem Bild oder
   auf einer leichten Flaeche. Die Startseite bleibt eine Ebene ueber dem
   Produkt, damit jeder Post gemeint sein koennte.
   ══════════════════════════════════════════════════════════════════════════ */
.mpost{
  position:relative; background:var(--paper);
  border:var(--b-hair) solid var(--hair); border-radius:var(--r-content);
  aspect-ratio:4/5; overflow:hidden;
  display:flex; flex-direction:column; padding:9%;
  container-type:inline-size;
}
/* Bildflaeche = das Symbol aus der wandernden Ecke. Laut Stefan schon perfekt. */
.mpost .mp-img{
  position:relative; width:100%; flex:1 1 auto; min-height:0;
  background:var(--loud); border-radius:100% 0 0 0;
  transition:border-radius var(--t-web-morph), opacity var(--t-web-morph), transform var(--t-web-morph);
}
/* Textzeilen: leichte Bloecke, KEIN Vollton. */
.mpost .mp-lines{ display:flex; flex-direction:column; gap:6%; margin-top:8%; }
.mpost .mp-l{
  height:7px; border-radius:0;
  background:rgba(17,17,16,.16);
  transition:width var(--t-web-morph), background var(--t-web-morph), opacity var(--t-web-morph);
}
.mpost .mp-l.head{ height:11px; background:rgba(17,17,16,.30); }   /* Ueberschrift */
.mpost .mp-l.w80{ width:80% } .mpost .mp-l.w64{ width:64% }
.mpost .mp-l.w52{ width:52% } .mpost .mp-l.w40{ width:40% }
/* Signatur: Zeichen plus eine schmale Zeile */
.mpost .mp-sig{ display:flex; align-items:center; gap:7px; margin-top:9%; }
.mpost .mp-sig i{ display:block; height:3px; background:var(--ink); border-radius:0; }
.mpost .mp-sig i:nth-child(1){ width:9px;  border-radius:0 2px 2px 0 }
.mpost .mp-sig i:nth-child(2){ width:15px }
.mpost .mp-sig i:nth-child(3){ width:11px; border-radius:2px 0 0 2px }
.mpost .mp-sig em{ flex:1; height:4px; background:rgba(17,17,16,.12); border-radius:0; max-width:38% }

/* Varianten: Story hochkant, Quadrat */
.mpost[data-fmt="916"]{ aspect-ratio:9/16 }
.mpost[data-fmt="11"]{ aspect-ratio:1/1 }

/* ══════════════════════════════════════════════════════════════════════════
   R2.2 · WORKFLOW-LOOP — der komplette Arbeitsablauf, stilisiert.
   Fuenf Stationen, nahtlos: Zeichen → Layout → Post → gepostet → weggescrollt.
   Alles aus der wandernden Ecke. Dauer 13 s.
   ══════════════════════════════════════════════════════════════════════════ */
.wfloop{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:var(--bone); border-radius:var(--r-panel);
  display:grid; place-items:center;
}
/* f3 (AJ, Safari): .stagebox hatte nur eine Breite. Absolut positionierte
   Kinder (.wf-feed) und Kinder mit aspect-ratio brauchen einen Bezug mit
   definierter Hoehe — Safari loest aspect-ratio in dieser Verschachtelung
   anders auf als Chrome, dadurch sass die Animation nicht mittig. Ein
   eigenes Seitenverhaeltnis gibt dem Kasten eine echte Hoehe. */
/* f5 (AJ, vierte Nennung) · Zwei Ursachen, nacheinander.
   Erstens war der Kasten offen: .wf-feed ist absolut mit left/right, aber ohne
   top — die Lage kam aus der statischen Position, und die Feed-Karten ragten
   334 px unter das graue Quadrat. Behoben mit overflow und top:0.
   Zweitens, und das war der eigentliche Grund fuer die Safari-Meldung: die
   ganze Kette haengt an aspect-ratio. .stagebox leitete seine Hoehe aus der
   Breite ab, die Feed-Karten ihre Hoehe wieder aus ihrer Breite. Genau das
   ist die im HANDOVER notierte Safari-Falle — absolut positionierte Elemente
   ohne definierte Hoehe sitzen dort falsch, waehrend Chrome es auffaengt.
   VERSUCH VOM 01.08., DER FEHLSCHLUG — nicht wiederholen: ich hatte
   aspect-ratio durch height:72.5% ersetzt (58 % Breite mal 5/4 eines
   quadratischen Elternteils). In Chrome sah das korrekt aus, in Safari war
   das graue Quadrat danach LEER. Grund: eine Prozenthoehe loest gegen die
   CONTENT-Hoehe des Elternteils auf, und die kommt bei .wfloop selbst aus
   aspect-ratio — Safari setzt sie dann auf auto, also null. Die Falle wandert
   damit nur eine Ebene hoeher.
   Es bleibt bei aspect-ratio. Die Positionierung muss anders geloest werden,
   nicht ueber Prozenthoehen. */
/* f5, IN SAFARI GEMESSEN (01.08., erstmals mit safaridriver):
   Safari 18.1 setzte den Rahmen auf oben 0 / unten 172 — er klebte an der
   Oberkante, darunter 172 px leeres Grau. Chrome meldete 86/86. Grund:
   .wfloop zentriert per place-items:center, und Safari zentriert ein
   Rasterelement NICHT senkrecht, wenn dessen Hoehe aus aspect-ratio stammt.
   Es richtet am Anfang aus, weil die Hoehe zum Zeitpunkt der Ausrichtung
   noch nicht feststeht.
   Absolute Zentrierung umgeht das: top/left 50 % loesen gegen die Hoehe von
   .wfloop auf (624 px, in beiden Engines definit), und translate(-50%,-50%)
   rechnet mit der EIGENEN Groesse, die nach dem Layout in jeder Engine
   bekannt ist. Damit haengt nichts mehr an der Ausrichtungsreihenfolge. */
.wfloop .stagebox{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58%; aspect-ratio:4/5; overflow:hidden;
}
.wfloop .stagebox > .wf-post{ position:absolute; inset:0; }
.wfloop .stagebox > .wf-post > .mpost{ width:100%; height:100%; }

/* Das Zeichen, Station 1 — wandert dann in die Signaturzeile des Posts */
.wfloop .wf-mark{
  position:absolute; left:50%; top:50%; z-index:3;
  display:flex; flex-direction:column; gap:5px;
  transform:translate(-50%,-50%);
  animation:wfMark 13s var(--e-heavy) infinite;
}
.wfloop .wf-mark i{ display:block; height:8px; background:var(--ink); }
.wfloop .wf-mark i:nth-child(1){ width:28px; border-radius:0 4px 4px 0 }
.wfloop .wf-mark i:nth-child(2){ width:45px }
.wfloop .wf-mark i:nth-child(3){ width:36px; border-radius:4px 0 0 4px }

/* Der Post selbst */
.wfloop .wf-post{ position:relative; z-index:2; animation:wfPost 13s var(--e-heavy) infinite; }
.wfloop .wf-post .mp-img{ animation:wfImg 13s var(--e-heavy) infinite; }
.wfloop .wf-post .mp-l{ animation:wfLine 13s var(--e-heavy) infinite; }
.wfloop .wf-post .mp-l:nth-child(2){ animation-delay:.15s }
.wfloop .wf-post .mp-l:nth-child(3){ animation-delay:.30s }

/* Feed-Nachbarn — deuten den Strom an, in den der Post faehrt */
.wfloop .wf-feed{
  /* top gesetzt, damit die Lage nicht aus der statischen Position kommt.
     KEINE Prozenthoehe hier — siehe die Warnung oben. */
  position:absolute; left:0; right:0; top:0; z-index:1;
  display:flex; flex-direction:column; gap:8%;
  animation:wfFeed 13s var(--e-heavy) infinite;
}
.wfloop .wf-feed span{
  display:block; width:100%; aspect-ratio:4/5; flex:0 0 auto;
  background:var(--paper); border:var(--b-hair) solid var(--hair);
}

/* Zeichen: sichtbar in Station 1, verschwindet sobald das Layout entsteht,
   kehrt am Ende zurueck — dadurch schliesst der Loop nahtlos. */
/* Das Zeichen kehrt zurueck, WAEHREND der Post noch wegfaehrt — sonst gibt es
   ein totes Fenster, in dem die Flaeche leer ist. */
@keyframes wfMark{
  0%,12%    { opacity:1; transform:translate(-50%,-50%) scale(1) }
  20%,78%   { opacity:0; transform:translate(-50%,-50%) scale(.7) }
  90%,100%  { opacity:1; transform:translate(-50%,-50%) scale(1) }
}
/* Post: baut sich auf, faehrt dann mit dem Feed nach oben weg */
@keyframes wfPost{
  0%,12%   { opacity:0; transform:translateY(14px) scale(.94) }
  24%,62%  { opacity:1; transform:translateY(0) scale(1) }
  80%      { opacity:1; transform:translateY(-118%) scale(1) }
  84%,100% { opacity:0; transform:translateY(-118%) scale(1) }
}
/* Bildflaeche: die Ecke wandert — erst kein Bild, dann Bild, dann fertig */
@keyframes wfImg{
  0%,20%   { opacity:0; border-radius:0 }
  30%      { opacity:1; border-radius:100% 0 0 0 }
  46%      { opacity:1; border-radius:0 100% 0 0 }
  62%,100% { opacity:1; border-radius:0 0 100% 0 }
}
/* Textzeilen wachsen ein */
@keyframes wfLine{
  0%,22%   { opacity:0; transform:scaleX(.2) }
  34%,100% { opacity:1; transform:scaleX(1) }
}
/* Feed scrollt hoch — nur zwischen Station 4 und 5 sichtbar */
@keyframes wfFeed{
  0%,58%   { opacity:0; transform:translateY(0) }
  66%      { opacity:1; transform:translateY(0) }
  82%      { opacity:1; transform:translateY(-118%) }
  88%,100% { opacity:0; transform:translateY(-118%) }
}
.wfloop .mp-l{ transform-origin:left center }

/* ══════════════════════════════════════════════════════════════════════════
   R2.3 · INSTANT SHARE — Post wird Link, Link wird verschickt. Ruhig, 11 s.
   ══════════════════════════════════════════════════════════════════════════ */
.shloop{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--bone); border-radius:var(--r-panel);
  display:grid; place-items:center;
}
.shloop .sh-post{ width:34%; animation:shPost 11s var(--e-heavy) infinite; }
/* Die Pille: der teilbare Link */
.shloop .sh-pill{
  position:absolute; left:50%; top:50%;
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; background:var(--paper);
  border:var(--b-inner) solid var(--ink); border-radius:var(--r-control);
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  white-space:nowrap; transform:translate(-50%,-50%);
  animation:shPill 11s var(--e-heavy) infinite;
}
.shloop .sh-pill b{ display:block; width:8px; height:8px; background:var(--loud); border-radius:0 }
/* Ziel: wo der Link ankommt */
.shloop .sh-target{
  position:absolute; right:7%; top:50%; transform:translateY(-50%);
  width:19%; aspect-ratio:4/5;
  background:var(--paper); border:var(--b-hair) dashed var(--edge);
  display:grid; place-items:center;
  animation:shTarget 11s var(--e-heavy) infinite;
}
/* Haken aus zwei Balken, kein Fremd-Icon */
.shloop .sh-ok{ position:relative; width:26px; height:26px; animation:shOk 11s var(--e-heavy) infinite; }
.shloop .sh-ok i{ position:absolute; background:var(--loud); border-radius:0 }
.shloop .sh-ok i:nth-child(1){ left:2px; top:13px; width:10px; height:4px; transform:rotate(45deg) }
.shloop .sh-ok i:nth-child(2){ left:7px; top:10px; width:18px; height:4px; transform:rotate(-50deg) }

@keyframes shPost{
  0%,20%   { opacity:1; transform:scale(1) }
  32%,100% { opacity:0; transform:scale(.72) }
}
@keyframes shPill{
  0%,22%   { opacity:0; transform:translate(-50%,-50%) scale(.8) }
  34%,50%  { opacity:1; transform:translate(-50%,-50%) scale(1) }
  70%      { opacity:1; transform:translate(210%,-50%) scale(.8) }
  76%,100% { opacity:0; transform:translate(210%,-50%) scale(.8) }
}
@keyframes shTarget{
  0%,44%   { opacity:0 }
  56%,88%  { opacity:1 }
  96%,100% { opacity:0 }
}
@keyframes shOk{
  0%,72%   { opacity:0; transform:scale(.6) }
  80%,88%  { opacity:1; transform:scale(1) }
  96%,100% { opacity:0; transform:scale(.6) }
}

/* Beide Loops: bei reduzierter Bewegung ein aussagekraeftiges Standbild */
@media (prefers-reduced-motion: reduce){
  .wfloop *, .shloop *{ animation:none !important }
  .wfloop .wf-mark, .wfloop .wf-feed{ opacity:0 }
  .wfloop .wf-post{ opacity:1; transform:none }
  .wfloop .wf-post .mp-img{ opacity:1; border-radius:0 0 100% 0 }
  .shloop .sh-post{ opacity:1; transform:none }
  .shloop .sh-pill{ opacity:1; transform:translate(-50%,-50%) }
  .shloop .sh-target, .shloop .sh-ok{ opacity:1; transform:translateY(-50%) }
}