/* Bubblemakers-Wortmarke als Inline-Bild
   -------------------------------------------------------------
   Der Kinder- und Familienkurs "Bubblemaker" laeuft unter einer
   eigenen Domain (bubblemakers-hurghada.com) und einer eigenen
   Wortmarke. Ueberall wo der Kursname in einer Ueberschrift oder
   einem Kurstitel steht, tritt das Logo an die Stelle des Wortes.
   Der Kursname bleibt als alt-Text erhalten, damit Vorlesesoftware
   und Suchmaschinen weiter "Bubblemaker" lesen.

   Bewusst eine eigene Datei statt einer Ergaenzung in home.css o.ae.:
   die Seite liefert alle Assets mit 10 Jahren Cache-Control aus, eine
   neue Datei braucht deshalb keinen ?v=-Bump ueber 80 Seiten hinweg. */

.bm-wort {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  /* Die Blasenkontur des Logos ragt oben und unten ueber die Schrift
     hinaus. Der negative Rand holt die optische Zeilenhoehe zurueck,
     damit die Zeile nicht auseinanderfaellt. */
  margin: -0.5em 0.06em -0.45em;
}

.bm-wort img {
  display: block;
  height: 2.25em;
  width: auto;
  max-width: 100%;
}

/* In der Brotkrumenleiste und in den Weiter-/Zurueck-Kacheln sitzt die
   Wortmarke in kleiner, halbfetter Schrift. Dort wirkt das volle Mass
   zu wuchtig. */
.reef-crumbs .bm-wort img,
.reef-pn .bm-wort img {
  height: 2em;
}

/* Auf sehr schmalen Displays wuerde die Wortmarke in einer H1 die
   Zeile sprengen. */
@media (max-width: 480px) {
  .bm-wort img { height: 2em; }
}

/* In der Hero-Ueberschrift der Kursseite ist die Wortmarke nicht
   Beiwerk im Satz, sondern die Ueberschrift selbst. Sie bekommt eine
   eigene Zeile unter dem Markenwort "PADI".

   Wichtig: hier bemisst sich die Groesse an der BREITE, nicht an der
   Schrifthoehe. .reef-hero h1 ist clamp(34px,6vw,74px) gross - bei
   height:2.25em waere die Wortmarke auf grossen Schirmen 476px breit
   und damit ueber ihre native Aufloesung hinaus skaliert. */
.reef-hero h1 .bm-wort {
  display: block;
  margin: .12em 0 0;
}

.reef-hero h1 .bm-wort img {
  height: auto;
  width: min(100%, 460px);
}