/* ==========================================================================
   Kartenpfeil - das Zeichen, dass eine Karte verlinkt ist

   Kundenwunsch vom 10.09.2026: "Bei allen Teasern die verlinken soll unten
   rechts ein Pfeil auftauchen! Das Design des Pfeils richtet sich natuerlich
   nach dem neuen Website Design!"

   GEMESSEN, WARUM ES NOETIG WAR: von den klickbaren Kartenflaechen trugen nur
   .stkarte und .wegkarte ein Zeichen. Die drei USP-Kacheln der Startseite, die
   fuenf Sortenkarten, alle Rezeptkarten und die sieben Blogkarten waren
   Links ohne jeden Hinweis darauf - weder Inline-SVG noch Pseudoelement.
   Zusammen 105 Stellen.

   NICHTS NEU ERFUNDEN: es ist derselbe Lucide arrow-right, den .stkarte,
   .wegkarte, .hero__more und die "Alle ansehen"-Links tragen, mit demselben
   data-icon. Das ist die Antwort auf "richtet sich nach dem Website Design" -
   das Design gibt es schon, es fehlte nur an diesen Karten.

   DER PFEIL STEHT IM BODY DER KARTE, nicht an der Karte selbst. Zwei Gruende:
   die Textfarbe (auf den dunklen USP-Kacheln weiss, sonst Markenblau) und der
   Innenabstand kommen vom Body. An der Karte haette der Pfeil auf der dunklen
   Kachel deren dunkle Farbe geerbt und waere unsichtbar gewesen.
   ========================================================================== */

/* IM FLUSS, NICHT ABSOLUT. Absolut positioniert waere er unabhaengig vom Text
   - und genau das ist das Problem: die letzte Zeile einer Karte ist manchmal
   lang ("Bio-Rapskernoel nussig-fein"), und ein absoluter Pfeil laege darauf.
   Im Fluss schiebt er sich selbst eine Zeile weiter, wenn es eng wird.
   margin-left: auto schiebt ihn nach rechts, margin-top: auto auf die
   Grundlinie der Karte - beides greift, weil die Bodys Flex- oder
   Rasterspalten sind. width: max-content, damit margin-left: auto ueberhaupt
   etwas zu verteilen hat. */
.kartenpfeil {
  display: block;
  width: max-content;
  margin-left: auto;
  margin-top: auto;
  padding-top: var(--sp-4);
  /* KEINE EIGENE FARBE IM RUHEZUSTAND - der Pfeil erbt die Textfarbe des Bodys.
     Auf hellen Karten ist das Markenblau, auf den dunklen USP-Kacheln Weiss.
     GEMESSEN UND KORRIGIERT: hier stand zuerst var(--accent), also Gold. Gold
     auf Weiss haelt 2,00:1, verlangt sind 3:1 fuer grafische Elemente
     (WCAG 1.4.11) - und der Pfeil ist kein Zierat, er ist das Zeichen, dass
     die Karte verlinkt. Er muss also zu sehen sein.
     Das ist keine neue Entscheidung: .stkarte macht es seit dem 28.08. genau
     so, dort ist Gold die HOVERFARBE und der Ruhezustand erbt. Damit bleibt es
     bei einem Goldton, wie der Kunde es verlangt - geloest wird es ueber die
     Rolle des Golds, nicht ueber einen zweiten Ton. */
  line-height: 0;
}
.kartenpfeil { transition: color var(--dur-hover) var(--ease-hover); }
.kartenpfeil svg {
  width: var(--zeichen-klein);
  height: var(--zeichen-klein);
  display: block;
  transition: transform var(--dur-hover) var(--ease-hover);
}
/* DIE PFEILE EINER REIHE MUESSEN AUF EINER LINIE STEHEN. Gemessen standen sie
   nicht: bei den USP-Kacheln 24, 50 und 50 px ueber der Unterkante, bei den
   Blogkarten 24 und 49 - je nachdem, ob der Text drei oder vier Zeilen fuellt.
   Drei Pfeile auf drei Hoehen wirken willkuerlich; dasselbe war am 28.08. schon
   bei .b2b__cta und .wegkarte aufgefallen und dort mit margin-top: auto
   geloest.
   margin-top: auto BRAUCHT EINEN FLEX-ODER-RASTER-ELTERN. Die Bodys standen auf
   display: block, dort ist auto einfach 0 - deshalb tat die Zeile am Pfeil
   nichts. Hier werden genau die zwei Bodys zur Spalte gemacht, deren Pfeile
   auseinanderliefen.
   NUR .usp__body: dort war der Fehler, und dort ist er behoben - gemessen
   jetzt 24 px auf allen drei Kacheln.
   .prod__body und .rez__body messen ueber alle Karten schon dieselben 33 bzw.
   0 px, weil ihre Texte gleich lang sind. Was stimmt, wird nicht angefasst.

   .blkarte__body STAND HIER KURZ MIT DRIN und ist wieder heraus, weil es
   nichts half: die Blogkarten sind gemessen UNTERSCHIEDLICH HOCH (487 und
   463 px), jede haengt an ihrem eigenen Textumfang. Der Pfeil kann dort keine
   gemeinsame Linie finden, solange die Karten keine gemeinsame Hoehe haben -
   und die zu erzwingen ist eine Designentscheidung, die der Kunde nicht
   verlangt hat. Gemeldet, nicht mitgefixt.

   Die Innenabstaende bleiben: gemessen 8 und 12 px vorher und nachher - es
   kollabiert nichts, weil die Abstaende von je einer Seite kommen. */
.usp__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* GOLD BEIM HOVER, dieselbe Rolle und derselbe Weg wie bei .stkarte: Farbe
   nach Gold, Pfeil 3 px nach rechts. Am Link, nicht am Pfeil - der Pfeil nimmt
   keine Maus an, er liegt in der Karte. */
a:hover .kartenpfeil,
a:focus-visible .kartenpfeil { color: var(--accent); }

a:hover .kartenpfeil svg,
a:focus-visible .kartenpfeil svg { transform: translateX(3px); }

/* Bewegung nur, wenn der Besucher sie zulaesst. */
@media (prefers-reduced-motion: reduce) {
  .kartenpfeil svg { transition: none; }
  a:hover .kartenpfeil svg,
  a:focus-visible .kartenpfeil svg { transform: none; }
}