/* ==========================================================================
   Aktionsleiste - Drucken und Teilen
   Kundenwunsch vom 02.09.2026, Folie 15: die Leiste von Byodo, mit dem Pfeil
   "Kann das ergaenzt werden?".

   EIGENE KOMPONENTE, nicht in pages/rezept.css: dieselbe Leiste gehoert
   spaeter unter jeden Blogbeitrag und unter jede Stellenanzeige. Eine
   Komponente, drei Vorlagen.

   AUSGEBLENDET, BIS DAS SKRIPT SIE FREIGIBT - dieselbe Regel wie beim
   Portionsrechner. Drucken und Teilen brauchen beide Javascript; ohne
   Skript laege hier ein Knopf, der nichts tut. Freigabe ueber
   .aktionsleiste--an in js/rezept.js.

   Form wie die Filterpillen: weisse Flaeche, feine Kante, 44 px hoch nach
   WCAG 2.5.5. Kein Vollton - die Leiste ist ein Angebot am Rand des
   Rezepts, nicht der Hauptweg der Seite. Deshalb auch keine Trennlinie
   darueber: der Kunde hat die Linien im Angabenblock am 03.09.2026 gerade
   entfernen lassen, und was fuer den einen Block gilt, gilt fuer den
   anderen.
   ========================================================================== */
.aktionsleiste {
  display: none;
  margin-top: var(--sp-6);
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.aktionsleiste--an { display: flex; }

.aktionsleiste__knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: 0 var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--c-grau-300);
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--fs-200);
  font-weight: 600;
  line-height: 1;
  color: var(--toem-blau);
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-hover),
              color var(--dur-hover) var(--ease-hover);
}
.aktionsleiste__knopf:hover,
.aktionsleiste__knopf:focus-visible { border-color: var(--toem-gold); }
.aktionsleiste__knopf svg {
  width: 1.125rem; height: 1.125rem;
  flex: none;
  color: var(--accent);
}

/* Rueckmeldung fuer das Teilen. Steht als role="status" im Markup, damit
   Screenreader "Link kopiert" mitbekommen - ohne das ist der Knopf fuer
   blinde Nutzer wirkungslos, weil sich sichtbar nichts aendert.
   Die Zeile ist leer, bis das Skript sie fuellt, und belegt dann keinen
   Platz vorher - deshalb kein fester Raum. */
.aktionsleiste__hinweis {
  font-size: var(--fs-100);
  color: var(--text-muted);
}