/* Generische Material-Design-Stile für Info-Seiten — nutzt die App-Theme-Tokens aus style.css */

div.m3-page {
  --m3-surface: #ffffff;
  --m3-surface-muted: var(--mm-inactive-tab-bg-color, #eeeeee);
  --m3-on-surface: #000000;
  --m3-on-surface-muted: var(--mm-inactive-tab-text-color, #1b1b1b);
  --m3-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.14), 0 1px 3px 1px rgba(0, 0, 0, 0.08);
  --m3-radius: 12px;
  --m3-radius-sm: 8px;

  /* Trennlinien und Feldrahmen. Nicht aus `--active-color` gerechnet, obwohl
     das naheliegt: der Token steuert in den Alt-Stylesheets den gedrückten
     Zustand und ist deshalb von Projekt zu Projekt etwas ganz anderes — bei
     EXPO REAL `#EBEBEB` (taugt als Linie), bei electronica `#ffffff` (eine
     unsichtbare Linie). Ein Grauwert ist hier ohnehin markenneutral; wer ihn
     anders will, ändert diese eine Zeile. */
  --m3-divider: #e0e0e0;

  /* Zeichen am Ende einer Listenzeile.

     Für interne Ziele hängt `style.css` `pfeil.png` als Hintergrundbild an;
     die Datei ist aber nicht in jedem Projekt zur weißen Zeile des
     m3-Layouts gedacht — bei electronica ist sie weiß, weil die Menüzeile
     dort im Alt-Layout grün gefüllt ist. `pfeil_active.png` liegt überall
     daneben und trägt die Primärfarbe; bei EXPO REAL sind beide Dateien
     ohnehin farbgleich. Deshalb projektübergreifend die `_active`-Fassung.

     Echte externe Links bekommen statt eines Bildes das FontAwesome-Glyph
     `\f35d`, dem `style.css` keine Farbe gibt — es erbt sonst die
     Schriftfarbe der Zeile und steht schwarz da.

     Beide Werte sind Variablen, damit eine Liste auf farbiger Fläche die
     helle Fassung anfordern kann, ohne die langen Selektoren weiter unten
     nachbauen zu müssen: Variablen werden am Element aufgelöst, nicht über
     Spezifität. */
  --m3-list-arrow: url(../img/pfeil_active.png);
  --m3-list-arrow-color: var(--primary-color);

  /* Farbe der vorangestellten FontAwesome-Symbole in Listenzeilen. Ohne
     Angabe erben sie die Schriftfarbe und stehen schwarz neben einer
     schwarzen Beschriftung — zwei gleich schwere Elemente, zwischen denen
     das Auge nicht unterscheidet. */
  --m3-list-icon-color: var(--primary-color);

  margin: 0 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--m3-on-surface);
  background: var(--m3-surface-muted);
  min-height: 100vh;
}

div.m3-page .page-header {
  display: block;
  width: 100%;
  max-width: 100%;
  border: none;
}

div.m3-page main,
div.m3-page #egcfMMWelcome {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 10px 32px;
}

div.m3-page .logowrapper {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 10px 0px;
}

#egcfMMWelcome .logowrapper{
	padding: 0 !important;
}

div.m3-page .favnotcompleted {
  left: 40px !important;
}

/* Elevated Card */

div.m3-page .card {
  background: var(--m3-surface);
  border-radius: var(--m3-radius);
  box-shadow: var(--m3-shadow-1);
  padding: 20px;
  margin-bottom: 16px;
  /* Randzeilen bündiger Listen folgen damit der Card-Rundung */
  overflow: hidden;
}

div.m3-page .card:last-child {
  margin-bottom: 0;
}

/* Typografie */

div.m3-page .page-title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--primary-color);
}

div.m3-page .card__title {
  margin: 0 0 4px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--m3-on-surface);
}

/* Fließtext und Aufzählung teilen sich Schriftgrad, Zeilenhöhe und Abstand — die
   Liste hatte vorher keinen eigenen Schriftgrad und lief deshalb in der geerbten
   Browsergröße mit: 16 px gegen 15 px, dazu 24 px Zeilenhöhe gegen 22,5. Neben-
   einander im selben Card sah das unruhig aus. Wer die Größe ändert, ändert
   beide zugleich. */
div.m3-page .intro-text,
div.m3-page .intro-list {
  margin: 0 0 12px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--m3-on-surface);
}

/* Dieselben Werte für Absätze ohne Klasse — `.intro-text` muss man dann nicht
   mehr schreiben, und die rund 17 Absätze, die es bisher nicht trugen, laufen
   nicht länger in Browsergröße mit.

   Zwei Entscheidungen stecken im Selektor:

   `:where(.card)` grenzt auf Cardinhalte ein. Ohne Eingrenzung träfe die Regel
   auch Absätze daneben, etwa `p.egcfMMPendingMessage` auf der Matchmaking-Seite,
   das nur `matchmaking.css` mit einer einzelnen Klasse gestaltet — die Regel
   hier wäre stärker und würde es überschreiben. Dasselbe gilt für die Texte in
   den Dialogen der Buchungsseiten.

   `:where()` und nicht `.card`, weil `.card` die Spezifität auf 0-2-2 hübe.
   Damit stünde die Regel über `div.m3-page .intro-text` (0-2-1) und
   `div.m3-page .rp-error` (0-2-1) — sie würde also ausgerechnet die Klassen
   überfahren, die eine abweichende Gestaltung wollen. `:where()` zählt null, die
   Regel bleibt bei 0-1-2 und verliert gegen jede Klassenregel. Sie ist damit
   eine Grundlage, kein Diktat. Fehlt einer alten WebView `:where()`, entfällt
   die Regel ganz und die Absätze stehen wie bisher in Browsergröße — kein
   kaputtes Layout. */
div.m3-page :where(.card) p {
  margin: 0 0 12px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--m3-on-surface);
}

/* Links im Fließtext, ebenfalls für jeden Absatz in einer Card. Ohne diese Regel
   blieben Links in Absätzen ohne `.intro-text` in Browserblau mit Unterstreichung
   stehen. Spezifität 0-1-3 — unter `div.m3-page .intro-text a` (0-2-2), die
   Klasse behält also das letzte Wort. */
div.m3-page :where(.card) p a,
div.m3-page .intro-text a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

div.m3-page :where(.card) p a:active,
div.m3-page .intro-text a:active {
  text-decoration: underline;
}

div.m3-page .intro-list {
  padding-left: 1.25rem;
}

div.m3-page .intro-list li {
  margin-bottom: 6px;
}

div.m3-page .intro-list li:last-child {
  margin-bottom: 0;
}

div.m3-page :where(.card) .egcfCheckBox {
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Formularfelder */

div.m3-page .form-field {
  margin-bottom: 16px;
}

div.m3-page .form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--m3-on-surface);
}

div.m3-page .form-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--m3-divider);
  border-radius: var(--m3-radius-sm);
  background-color: var(--m3-surface);
  color: var(--m3-on-surface);
  font: inherit;
  font-size: 0.9375rem;
}

div.m3-page select.form-input {
  height: 48px;
  min-width: 0;
}

div.m3-page textarea.form-input {
  min-height: 140px;
  resize: vertical;
}

div.m3-page .form-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Hinweistext unterhalb eines Buttons */
div.m3-page .btn + .intro-text {
  margin-top: 16px;
}

/* Formulare, die zusätzlich die alte Klasse "feedback" tragen: style.css und
   app.css geben deren Feldern eine eigene Optik. Das rote Auswahlfeld kommt
   dort über .feedback select#topic — wegen der ID-Spezifität muss hier
   ebenfalls die ID adressiert werden, sonst gewinnt die Legacy-Regel. */
div.m3-page .feedback {
  padding: 0;
}

div.m3-page .feedback select#topic.form-input {
  padding: 10px 12px;
  border: 1px solid var(--m3-divider);
  background-color: var(--m3-surface);
  color: var(--m3-on-surface);
  font-size: 0.9375rem;
}

/* Auswahlfeld mit eigenem Pfeil — greift nur, wo das Markup den Wrapper mitbringt:
   <span class="select-field"><select class="form-input">…</select>
   <i class="fas fa-chevron-down select-field__chevron"></i></span>

   Wo das Betriebssystem den Pfeil eines Selects zeichnet, ist nicht beeinflussbar
   und fällt in Chrome, WKWebView und Android-WebView verschieden aus — deshalb
   appearance:none und ein eigenes Symbol. Es muss dieselbe FontAwesome-Schrift sein
   wie bei den übrigen Chevrons, nicht ein nachgebautes SVG: nur so stimmt die
   Strichstärke. Felder ohne diesen Wrapper (`feedback.html`,
   `bb_booth_booking.html`) behalten den Systempfeil. */

div.m3-page .select-field {
  position: relative;
  display: block;
}

div.m3-page .select-field select.form-input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
}

div.m3-page .select-field__chevron {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: var(--primary-color);
  /* chevron-down misst bei gleicher Schriftgröße 14 px in der langen Kante, wo
     chevron-right 13 px hoch ist — 13/14 der Größe gleicht das an, sonst wirkt der
     Dropdown-Pfeil größer als ein danebenstehender chevron-right. */
  font-size: 0.8125rem;
  /* Taps sollen weiter das Auswahlfeld darunter treffen */
  pointer-events: none;
}

/* Button (Eckenradius wie der FAB der Buchungsseite) */

div.m3-page .btn {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 48px;
  border: none;
  border-radius: 16px;
  padding: 12px 24px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}

div.m3-page .btn--filled {
  background: var(--primary-color);
  color: var(--text-color);
  box-shadow: var(--m3-shadow-1);
}

/* Zweitrangige Aktion neben einem btn--filled — gleiche Form, ruhige Fläche */
div.m3-page .btn--tonal {
  background: var(--m3-surface-muted);
  color: var(--m3-on-surface);
}

div.m3-page .btn-block {
  width: 100%;
}

/* Gestapelte Buttons brauchen eine Fuge — sonst kleben Haupt- und Nebenaktion */
div.m3-page .btn + .btn {
  margin-top: 8px;
}

/* Karten-Abbildung mit Bildunterschrift (z. B. Hallenplan) */

div.m3-page .map {
  margin: 0;
  text-align: center;
}

div.m3-page .map a {
  display: block;
  border: none;
}

div.m3-page .map img {
  display: block;
  width: 100%;
  border-radius: var(--m3-radius-sm);
}

div.m3-page .map figcaption {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--m3-on-surface-muted);
}

/* Favoriten-Aktionen (nur `favorites.html`): zwei gleich breite Spalten, je eine
   Symbolschaltfläche mit Beschriftung darunter. Beide Klassen kommen sonst
   nirgends vor; die Regeln standen bis eben als <style>-Block in der Seite. */

div.m3-page .fav-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 4px;
}

/* Symbol und Beschriftung sind ein Element: ein Ziel, eine Trefferfläche, ein
   Ripple. Vorher waren es zwei getrennte Links auf dieselbe Adresse.

   Die Klassen `sync` und `export` bleiben am `<a>`, weil `style.css` sie
   elementqualifiziert anspricht (`a.sync`) und von dort das Symbol als
   Hintergrundbild kommt — an einem `<span>` würde die Regel nicht greifen. Hier
   werden nur Lage und Größe neu gesetzt: das Symbol sitzt oben in der Kachel,
   die Beschriftung darunter. */
div.m3-page a.fav-action {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 68px 8px 14px;
  border: none;
  border-radius: var(--m3-radius);
  background-color: var(--m3-surface-muted);
  background-position: center 16px;
  background-size: 44px auto;
  color: var(--m3-on-surface);
  text-align: center;
  text-decoration: none;
}

/* Welches Symbol die Kachel trägt.

   `style.css` setzt es als Hintergrundbild an `a.sync` und `a.export` — dort
   steht die Fassung, die für den gefüllten Knopf des Alt-Layouts gezeichnet
   ist. Die ist nicht in jedem Projekt für die helle Kachel hier brauchbar:
   bei electronica sind `button-sync.png` und `button-export.png` weiß und
   damit unsichtbar. Die `_active`-Fassung trägt überall die Primärfarbe; wo
   beide Dateien farbgleich sind (EXPO REAL), ändert die Umstellung nichts.

   Als Variablen, damit ein gefülltes Layout die hellen Originale
   zurückholen kann — dort sind sie die richtigen. */
div.m3-page .fav-actions {
  --m3-fav-sync: url(../img/button-sync_active.png);
  --m3-fav-export: url(../img/button-export_active.png);
}

div.m3-page a.fav-action.sync {
  background-image: var(--m3-fav-sync);
}

div.m3-page a.fav-action.export {
  background-image: var(--m3-fav-export);
}

/* Die Beschriftung kam als ungestylter Browser-Link heraus — Standardblau und
   unterstrichen. Sie ist jetzt die Textzeile der Kachel: Primärfarbe, halbfett,
   ohne Unterstreichung. */
div.m3-page .favlink {
  display: block;
  color: var(--primary-color);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

/* Der Erklärtext darunter lief in Browser-Standardgröße mit */
div.m3-page p.menutext {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--m3-on-surface);
}

/* M3 List: antippbare Zeilen (echtes <ul><li>, damit Screenreader die Listenlänge ansagen) */

div.m3-page .m3-list {
  list-style: none;
  margin: 0 -20px -20px;
  padding: 0;
}

div.m3-page .m3-list li {
  margin: 0;
  padding: 0;
  /* neutralisiert die Rahmen aus style.css, falls eine Zeile zusätzlich
     die Klasse "menu" trägt (z. B. weil ticket.css darauf aufbaut) */
  border: none;
}

/* Steht kein Titel darüber, schließt die Liste auch oben mit der Card ab.
   Mit Titel übernimmt dessen Abstand die Trennung — keine Zusatzklasse nötig.
   Die abgerundeten Ecken der Randzeilen entstehen durch das overflow der Card. */
div.m3-page .m3-list:first-child {
  margin-top: -20px;
}

div.m3-page a.m3-list__item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  box-sizing: border-box;
  padding: 8px 20px;
  text-decoration: none;
  transition: background 0.15s;
  /* `style.css` füllt jede Menüzeile mit der Primärfarbe und setzt den Text
     weiß (`li.menu a`) — gedacht für das Alt-Layout, im m3-Layout wäre die
     Liste eine Folge farbiger Balken. Manche Projekte nehmen das in ihrer
     `app.css` zurück, andere nicht; hier steht es einmal für alle.
     Die Textfarbe zählt doppelt: die Ripple-Welle nimmt `currentColor`. */
  background-color: transparent;
  color: var(--m3-on-surface);
}

div.m3-page .m3-list li + li {
  border-top: 1px solid var(--m3-divider);
}

/* Gedrückter Zustand: zehn Prozent der Primärfarbe. `color-mix` rechnet sie
   aus `--primary-color` in `style.css` aus — vorher stand hier
   `rgba(226, 0, 26, .1)` fest eingetragen, also das Rot von EXPO REAL, und
   jedes andere Projekt blitzte beim Antippen in einer fremden Farbe auf.

   Die erste Zeile ist der Rückfall für WebViews, die `color-mix` nicht kennen
   (Chrome < 111, iOS < 16.2): dort ein neutraler Schleier statt der Marke.
   Als Eigenschaftswert und nicht als Variable geschrieben, weil nur so der
   Rückfall trägt — eine Variable nimmt auch eine Funktion an, die das Blatt
   gar nicht kennt, und fällt dann erst bei der Benutzung aus. */
div.m3-page a.m3-list__item:active {
  background: rgba(0, 0, 0, 0.06);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

/* Kein vorangestelltes Link-Symbol in Listenzeilen: `style.css` hängt an
   `a[href^='http']` ein `::before`-Glyph und an `li.menu a` einen
   Tabellenzellen-Platzhalter — beides stört in der Flex-Zeile. */
div.m3-page a.m3-list__item::before {
  content: none;
}

/* Ohne `li.menu` gibt es kein nachgestelltes Symbol; solche Zeilen setzen den
   Pfeil als `<i class="m3-list__trailing">` ins Markup. */
div.m3-page .m3-list li:not(.menu) > a.m3-list__item::after {
  content: none;
}

/* Zeilen mit `li.menu` behalten das Konzept aus style.css und app.css: interne
   Ziele — auch `exporeal.net`, `messe-muenchen.de` und das CMS — bekommen dort
   `pfeil.png` als Hintergrundbild, echte externe Links (`http`, `egcf-link://browser`)
   das FontAwesome-Glyph `\f35d` in der Primärfarbe. Inhalt, Bild und Farbe kommen
   also weiter von dort; hier wird nur die Lage ans m3-Raster gerückt.

   Der gemeinsame Kasten von 21 px trägt beide Varianten: das Bild über
   `background-size: contain`, das Glyph über die Flex-Zentrierung. */
div.m3-page .m3-list li.menu > a.m3-list__item::after {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  right: 20px;
  width: 21px;
  height: 21px;
  transform: translateY(-50%);
  background-position: center;
  background-size: contain;
  font-size: 0.875rem;
  line-height: 1;
}

/* Welches Bild, welche Farbe — siehe `--m3-list-arrow` oben.

   Die beiden `:not()` halten echte externe Links heraus: für sie ersetzt
   `style.css` das Bild durch das Glyph und setzt `background-image: none`.
   Diese Regel ist stärker und würde das Bild wieder einblenden — Glyph und
   Pfeil stünden dann übereinander.

   Nicht erfasst sind damit die Adressen, die ein Projekt in seiner `app.css`
   zu den internen zählt (bei EXPO REAL `exporeal.net`, bei electronica
   `electronica.de`). Sie beginnen mit `http`, fallen also durch die `:not()`,
   bekommen von dort aber ein Bild statt des Glyphs. Welche Adressen das sind,
   weiß nur das Projekt — die Regel dafür steht in dessen `app.css`, wo die
   Liste für das Alt-Layout ohnehin schon steht. */
div.m3-page .m3-list li.menu > a.m3-list__item:not([href^="http"]):not([href^="egcf-link://browser"])::after {
  background-image: var(--m3-list-arrow);
}

div.m3-page .m3-list li.menu > a.m3-list__item[href^="http"]::after,
div.m3-page .m3-list li.menu > a.m3-list__item[href^="egcf-link://browser"]::after {
  color: var(--m3-list-arrow-color);
}

/* Das Symbol liegt absolut und hält sich keinen Platz frei — der Text braucht
   rechts Luft, sonst läuft er darunter. */
div.m3-page .m3-list li.menu > a.m3-list__item {
  padding-right: 52px;
}

/* Ausnahme: die Ticket-Zeile bringt ihren Pfeil als `<i>` mit, weil `ticket.js`
   ihn beim Aufklappen dreht. Dort kein zusätzliches ::after. */
div.m3-page .m3-list li.menu > a.m3-list__item[href="egcf-link://ticket/show"]::after {
  content: none;
}

div.m3-page .m3-list li.menu > a.m3-list__item[href="egcf-link://ticket/show"] {
  padding-right: 20px;
}

/* Vorangestellte Menü-Icons (imgwrapper-Muster mit inactive/active-PNGs aus style.css) */
div.m3-page .m3-list .imgwrapper {
  flex-shrink: 0;
}

div.m3-page .m3-list .imgwrapper img {
  padding-right: 0;
  /* eigene Größenangabe, damit auch Icons ohne inactive/active-Paar
     (z. B. img.social_icon) im 30-px-Raster sitzen — den Abstand zum
     Text liefert der Flex-Gap, nicht ein margin am Bild */
  margin-right: 0;
  max-width: 30px;
  max-height: 30px;
}

div.m3-page .m3-list .imgwrapper i {
  padding-right: 0;
  min-width: 30px;
  font-size: 1.25rem;
  text-align: center;
  color: var(--m3-list-icon-color);
}

div.m3-page .m3-list__text {
  flex: 1;
  min-width: 0;
}

div.m3-page .m3-list__headline {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--m3-on-surface);
}

div.m3-page .m3-list__supporting {
  display: block;
  font-size: 0.8125rem;
  color: var(--m3-on-surface-muted);
}

div.m3-page .m3-list__trailing {
  flex-shrink: 0;
  color: var(--primary-color);
  font-size: 0.875rem;
  transition: transform 0.5s;
}

/* aufklappbare Zeile (z. B. Ticket): Pfeil dreht sich, wenn ticket.js
   der Zeile die Klasse "open" gibt */
div.m3-page .m3-list li.open .m3-list__trailing {
  transform: rotate(90deg);
}

/* M3 State Layer: Ripple (benötigt ../javascript/m3.js) */

div.m3-page .ripple {
  position: relative;
  overflow: hidden;
}

div.m3-page .ripple__wave {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.2;
  transform: scale(0);
  animation: m3-ripple 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes m3-ripple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

@media (min-width: 600px) {
  div.m3-page main {
    padding: 24px 24px 40px;
  }

  div.m3-page .card {
    padding: 24px;
  }

  div.m3-page .m3-list {
    margin: 0 -24px -24px;
  }

  div.m3-page .m3-list:first-child {
    margin-top: -24px;
  }

  div.m3-page a.m3-list__item {
    padding: 8px 24px;
  }
}

/* ===========================================================================
   Projektabhängig — beim Übernehmen in ein anderes Projekt anpassen

   Alles oberhalb rechnet sich aus den Tokens von `style.css` und läuft
   unverändert überall. Was hier steht, lässt sich nicht ableiten: es sind
   Tatsachen über *dieses* Projekt. Die Alt-Blätter (`style.css`, `app.css`,
   `rss.css`) bleiben dafür unangetastet — sie werden erzeugt und sollen
   nicht nachbearbeitet werden.
   =========================================================================== */

/* Adressen, die das Projekt zu den internen zählt.

   `app.css` gibt ihnen statt des Außenlink-Glyphs `pfeil.png` — bei
   electronica ein weißer Pfeil, gemacht für die grün gefüllte Menüzeile des
   Alt-Layouts, auf der weißen Listenzeile unsichtbar. Die Regel oben fängt
   das nicht ab: diese Adressen beginnen mit `http` und fallen durch deren
   `:not()`.

   Beim Übernehmen die Domains austauschen — bei EXPO REAL sind es
   `exporeal.net` und `messe-muenchen.de`; welche es sind, steht in der
   `app.css` des jeweiligen Projekts. */
div.m3-page .m3-list li.menu > a.m3-list__item[href^="https://electronica.de"]::after,
div.m3-page .m3-list li.menu > a.m3-list__item[href^="https://exhibitors.electronica.de"]::after,
div.m3-page .m3-list li.menu > a.m3-list__item[href^="https://messe-muenchen.de"]::after {
  background-image: var(--m3-list-arrow);
}

/* Maße des Kopfbilds.

   Die m3-Seiten laden `header_m3_de.png` / `header_m3_en.png` — dieselbe
   Grafik wie `header_de.jpg`, nur freigestellt, damit sie auf der grauen
   Seitenfläche steht statt in einem weißen Kasten. Die 420 px sind die
   Breite, bei der das Logo neben dem Datumszusatz noch lesbar bleibt, ohne
   die Seite zu beherrschen; sie hängen an den Proportionen genau dieser
   Datei. */
div.m3-page .logowrapper img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}