/* =========================================================================
   MenschKunst - Schrift durchsetzen
   =========================================================================
   Wird NUR auf der Hauptseite und im Katalog geladen, nicht auf den
   Kuenstlerseiten. Das Design-System liegt dort ebenfalls, aber es setzt
   nur Tokens und mk-Bausteine - die greifen auf fremden Themes nicht.
   Diese Datei greift dagegen jede Seite an, deshalb die Trennung.

   Zwei Probleme werden geloest:

   1. Ashe setzt die Schrift direkt auf body und h1-h6, Elementor eigene
      Familien auf seine Widgets. Wer ein Element unmittelbar anspricht,
      gewinnt gegen Vererbung - eine Regel auf body allein reicht nicht.

   2. Ashe schreibt  font-family: 'Tahoma';  ohne Ersatzangabe. Auf iPhone
      und Android gibt es Tahoma nicht. Der Browser hat dann nichts, worauf
      er ausweichen koennte, und nimmt seine eigene Grundschrift - in Safari
      ist das Times. Der Fliesstext auf menschkunst.de war auf jedem iPhone
      eine Serifenschrift, die niemand ausgesucht hat.

   'html body' (0,0,2) statt 'body' (0,0,1), weil Ashes Inline-CSS hinter
   unserem Stylesheet steht und bei gleicher Spezifitaet sonst gewinnt.
   Aus demselben Grund steht vor den Ashe-Selektoren jeweils ein 'html'.

   Ueberschriften der mk-Bausteine bleiben Newsreader: .mk-h2 (0,1,0)
   schlaegt 'html h2' (0,0,2) unabhaengig von der Reihenfolge.
   ========================================================================= */

html body,
body .elementor-widget-text-editor,
body .elementor-widget-shortcode,
body .elementor-widget-html {
  font-family: var(--mk-font-text);
}

/* Ashe hatte hier body und h1-h6 auf dieselbe Schrift gesetzt. Das
   Verhaeltnis bleibt erhalten - nur die Schrift ist getauscht und hat
   jetzt eine Ersatzkette. */
html .header-logo a,
html .site-description,
html #top-menu li a,
html #main-menu li a,
html .mobile-menu-btn a,
html #mobile-menu li,
html .post-meta,
html h1, html h2, html h3, html h4, html h5, html h6,
html blockquote p {
  font-family: var(--mk-font-text);
}

/* ---- Wortmarke im Elementor-Kopf ---------------------------------------
   Dieselbe Form wie im Katalog: kleines Zeichen, daneben der Name in
   gesperrten Versalien.

   Ein Unterschied bleibt: der Baustein gibt den Titel mit esc_html aus,
   deshalb laesst sich "Kunst" hier nicht wie im Katalog hervorheben. Die
   Marke steht in einem Gewicht. Wollte man beides gleich haben, muesste
   der Baustein durch ein HTML-Element ersetzt werden - dann waere die
   Kopfzeile aber nicht mehr in Elementor zu bearbeiten.
   --------------------------------------------------------------------- */
.wpr-logo {
  display: flex;
  align-items: center;
  gap: 11px;
}
.wpr-logo .wpr-logo-image { flex: none; width: auto; }
.wpr-logo .wpr-logo-text   { width: auto; min-width: 0; }

/*
 * Klickflaeche.
 *
 * Royal legt den Verweis INNERHALB des <picture> ab und gibt dem
 * .wpr-logo-image position:relative. Damit spannt sich der Verweis nur
 * ueber das Bild - der Name daneben ist tot. Zusaetzlich liegt er auf
 * z-index 5, also unter Bild und Text (beide 7), und faengt selbst dort
 * keinen Klick.
 *
 * Nimmt man dem Bild den Positionsbezug, wird .wpr-logo (position:
 * relative aus Royals eigenem CSS) zum Bezugsrahmen, und der Verweis
 * deckt Zeichen und Namen gemeinsam ab. Kein Eingriff ins Plugin noetig.
 */
.wpr-logo .wpr-logo-image { position: static; }
.wpr-logo .wpr-logo-url   { z-index: 8; }

.wpr-logo .wpr-logo-title {
  margin: 0;
  font-family: var(--mk-font-text);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--mk-ink);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .wpr-logo { gap: 9px; }
  .wpr-logo .wpr-logo-title { font-size: 12px; letter-spacing: 0.1em; }
}