/* ============================================================
   Logo im Band

   Masse aus Prototyp.dc.html Zeile 2352.
   ============================================================ */

.ps-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
}

.ps-logo__bild {
  display: block;
  height: var(--ps-logo-hoehe, 38px);
  width: auto;
  max-width: none; /* sonst zieht die Grundregel fuer Bilder es schmal */
  object-fit: contain;
  opacity: var(--ps-logo-deckkraft, 0.72);
  transition: opacity var(--dur-base) var(--ease-out);
}

/* ---------- Einfarbig ----------

   Die gelieferten Dateien sind bereits weiss auf durchsichtig — auf dem
   dunklen Band stimmt das ohne Zutun. Wer spaeter ein farbiges Logo
   bekommt, kann es hier angleichen, statt eine zweite Datei zu pflegen.

   `brightness(0)` faerbt alles Sichtbare schwarz, `invert(1)` dreht es
   wieder auf weiss. Die Durchsichtigkeit bleibt dabei unangetastet.
*/

.ps-logoband--farbe-hell   .ps-logo__bild { filter: brightness(0) invert(1); }
.ps-logoband--farbe-dunkel .ps-logo__bild { filter: brightness(0); }

a.ps-logo:hover .ps-logo__bild,
a.ps-logo:focus-visible .ps-logo__bild {
  opacity: 1;
}

a.ps-logo:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}