/* Die drei Marken in der Fusszeile - 2Rap, 2Cube, 2Minds.
 * ===========================================================================
 *
 * WO SIE STEHEN, und das war beim ersten Anlauf falsch: LINKS NEBEN dem
 * Slogan, in derselben Zeile, dort wo sonst ein einzelnes Markenzeichen
 * stuende. Nicht als eigene Reihe darunter.
 *
 * Sven, 6.8.2026: "im footer wo '2Cube und 2Rap - ein Kern, zwei Produkte.'
 * zb steht, sollte links neben den slogan (da wo eigl das brandlogo ist)
 * 3 brandlogos rein, du hast stattdessen die '2r 2c 2m' logos unten drunter
 * geklatscht."
 *
 * ES SIND SVENS DATEIEN, nicht nachgezeichnete. Seine Vorlagen liegen als
 * JPEG auf schwarzem Grund; freigestellt wurden sie mit colorkey, also durch
 * Entfernen des Grundes - die Form bleibt Pixel fuer Pixel seine. Beide
 * Fassungen liegen unter public/marke/fuss/: mit seiner Farbe und als weisse
 * Silhouette.
 *
 * IM FUSS STEHT DIE WEISSE. Grund, nachgemessen: Seine 2M ist dunkles Petrol
 * rgb(24,40,40) und ergibt auf dunklem Grund 1.37:1 - unsichtbar. 2R und 2C
 * sind ohnehin weiss. Eine Marke in Weiss auf dunklem Grund ist normale
 * Markenpraxis und keine Aenderung am Zeichen; drei Marken in drei
 * verschiedenen Helligkeiten nebeneinander waeren dagegen ein Bruch.
 * Wer eine helle Fassung der 2M bekommt, tauscht hier die Datei.
 * ========================================================================== */

.markenfuss {
  --mf-hoehe: 22px;      /* Hoehe der Zeichen. Breite ergibt sich aus dem Bild. */
  --mf-ruhe: .62;        /* Deckkraft im Ruhezustand */

  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* Rechts Luft zum Slogan, sonst kleben Zeichen und Satz aneinander.
     vertical-align: middle statt baseline: Bilder sitzen sonst auf der
     Schriftlinie und haengen optisch nach oben heraus. */
  margin-right: 14px;
  vertical-align: middle;
}

.markenfuss a,
.markenfuss .mf-hier {
  display: inline-flex;
  align-items: center;
  /* Die Trefferflaeche ist groesser als das Zeichen - 44px Mindesthoehe bei
     22px Bild. Erreicht ueber Innenabstand oben/unten, damit die Zeichen
     waagrecht NICHT auseinandergeschoben werden. */
  padding-block: 11px;
  border-radius: 6px;
  opacity: var(--mf-ruhe);
  transition: opacity .25s cubic-bezier(.2, .7, .3, 1);
}

.markenfuss a:hover,
.markenfuss a:focus-visible { opacity: 1; }

.markenfuss a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Die eigene Seite: sichtbar, aber ohne Verweis. Ein Link auf die Seite, auf
   der man schon steht, ist eine Sackgasse - und fuer die Sprachausgabe eine
   falsche Ansage. Sie steht voll da, damit klar ist, WO man ist. */
.markenfuss .mf-hier { opacity: 1; cursor: default; }

.markenfuss img {
  height: var(--mf-hoehe);
  width: auto;
  display: block;
}

/* Auf hellem Grund: Die Zeichen sind weiss und waeren unsichtbar. invert()
   dreht sie zu Schwarz, ohne dass eine zweite Datei noetig ist. Gesteuert
   ueber die Umgebung, nicht ueber eine Klasse - so muss keine der zwoelf
   Seiten wissen, ob ihr Fuss hell oder dunkel ist. */
@media (prefers-color-scheme: light) {
  .markenfuss img { filter: invert(1); }
}
:root[data-theme="dark"] .markenfuss img { filter: none; }
:root[data-theme="light"] .markenfuss img { filter: invert(1); }

/* Auf schmalen Geraeten enger, aber nicht kleiner: Die Zeichen sind bei 22px
   schon an der Grenze der Lesbarkeit. Was weicht, ist der Abstand. */
@media (max-width: 430px) {
  .markenfuss { gap: 9px; margin-right: 10px; }
}

/* Auf Papier: Deckkraft weg und immer dunkel - der Laser rastert eine
   halbdurchsichtige Flaeche zu Grau und frisst die Kanten. */
@media print {
  .markenfuss a, .markenfuss .mf-hier { opacity: 1; }
  .markenfuss img { filter: invert(1); }
}

@media (prefers-reduced-motion: reduce) {
  .markenfuss a { transition: none; }
}