/* ==========================================================================
   Meldo Audiotools – gemeinsame Grundlage

   Diese Datei wird in JEDES Werkzeug geladen und vereinheitlicht die
   Grundformen: Farben, Schriften, Knöpfe, Felder, Karten, Abstände.

   Sie ersetzt NICHT die Gestaltung der einzelnen Werkzeuge. Ein Metronom
   und ein Griffbrett dürfen verschieden aussehen – sie tun Verschiedenes.
   Vereinheitlicht wird nur, was überall gleich sein sollte: die Elemente,
   die man bedient.

   Deshalb arbeitet sie ohne !important. Wo ein Werkzeug bewusst abweicht,
   setzt es sich durch.

   ZUR DOPPELTEN KLASSE (seit 1.90.4)
   Jeder Selektor beginnt mit `.meldo-tool.meldo-tool`. Das ist kein
   Versehen. Die Datei wird VOR den tool-eigenen <style>-Bloecken geladen,
   und bei gleicher Spezifitaet gewinnt die spaetere Regel. Ein Werkzeug mit
   `.play-buttons .btn-primary` (0,2,0) schlug darum die gemeinsame Regel
   `.meldo-tool .btn-primary` (0,2,0). Die Wiederholung der Klasse hebt die
   Spezifitaet um eine Stufe (0,3,0) und entscheidet solche Gleichstaende zu
   Gunsten des Gemeinsamen - ohne !important, und ohne dass bewusste
   Abweichungen ab 0,3,0 verloren gehen.

   Warum nicht `body.meldo-tool`? Weil Chord & Leadsheet direkt auf der
   Seite laeuft und die Klasse dort an einem <div> haengt, nicht am <body>.
   Die doppelte Klasse wirkt in beiden Faellen.
   ========================================================================== */

:root {
  /* Farben */
  --meldo-teal:        #008F89;
  --meldo-teal-dunkel: #00726d;
  --meldo-teal-hell:   #e6f7f6;
  --meldo-lime:        #95C11F;
  --meldo-lime-dunkel: #6a9a10;
  --meldo-lime-hell:   #f0fae0;
  --meldo-papier:      #F8F9FA;
  --meldo-tinte:       #2B2B2B;
  --meldo-grau:        #8a8a8a;
  --meldo-linie:       #e4e6e6;
  --meldo-weiss:       #ffffff;
  --meldo-gedaempft:   #4a5658;
  --meldo-leiste:      #eef2f2;
  --meldo-rot:         #c0392b;
  --meldo-rot-hell:    #fdecec;
  --meldo-rot-linie:   #e8c4c0;
  --meldo-karte:       0 1px 4px rgba(0, 0, 0, 0.12);

  /* Rundungen – weiche Formen, wie im Rest von Meldo */
  --meldo-rund-klein:  10px;
  --meldo-rund:        14px;
  --meldo-rund-gross:  20px;

  /* Schatten – weich und flach, nicht dramatisch */
  --meldo-schatten:       0 2px 8px rgba(0, 0, 0, 0.05);
  --meldo-schatten-hoch:  0 6px 20px rgba(0, 0, 0, 0.09);

  /* Abstände */
  --meldo-luft-eng:    0.5rem;
  --meldo-luft:        0.85rem;
  --meldo-luft-weit:   1.4rem;

  /* Bewegung – sanft, nicht sprunghaft */
  --meldo-uebergang:   0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Schriften
   Quicksand trägt die Titel, Funnel Sans den Fliesstext.
   -------------------------------------------------------------------------- */
.meldo-tool.meldo-tool,
.meldo-tool.meldo-tool button,
.meldo-tool.meldo-tool input,
.meldo-tool.meldo-tool select,
.meldo-tool.meldo-tool textarea {
  font-family: 'Funnel Sans', system-ui, -apple-system, sans-serif;
}

.meldo-tool.meldo-tool h1,
.meldo-tool.meldo-tool h2,
.meldo-tool.meldo-tool h3,
.meldo-tool.meldo-tool h4,
.meldo-tool.meldo-tool .meldo-titel {
  font-family: 'Quicksand', 'Funnel Sans', system-ui, sans-serif;
  font-weight: 700;
  color: var(--meldo-tinte);
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Knöpfe

   Drei Formen genügen: die Hauptaktion gefüllt, alles Übrige umrandet,
   Nebensächliches flach. Mehr Varianten verwirren mehr, als sie helfen.
   -------------------------------------------------------------------------- */
.meldo-tool.meldo-tool .meldo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;              /* Untergrenze für Fingerbedienung */
  padding: 0 1.1rem;
  border-radius: var(--meldo-rund-klein);
  border: 1.5px solid transparent;
  background: var(--meldo-weiss);
  color: var(--meldo-tinte);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--meldo-uebergang);
  white-space: nowrap;
}

.meldo-tool.meldo-tool .meldo-btn:hover  { transform: translateY(-1px); }
.meldo-tool.meldo-tool .meldo-btn:active { transform: translateY(0); }
.meldo-tool.meldo-tool .meldo-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 143, 137, 0.25);
}
.meldo-tool.meldo-tool .meldo-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.meldo-tool.meldo-tool .meldo-btn--haupt {
  background: var(--meldo-teal);
  border-color: var(--meldo-teal);
  color: var(--meldo-weiss);
  box-shadow: var(--meldo-schatten);
}
.meldo-tool.meldo-tool .meldo-btn--haupt:hover { background: var(--meldo-teal-dunkel); }

.meldo-tool.meldo-tool .meldo-btn--rand {
  background: var(--meldo-weiss);
  border-color: var(--meldo-linie);
}
.meldo-tool.meldo-tool .meldo-btn--rand:hover {
  background: var(--meldo-weiss);
  border-color: var(--meldo-teal);
  color: var(--meldo-teal);
}

.meldo-tool.meldo-tool .meldo-btn--flach {
  background: transparent;
  border-color: transparent;
  color: var(--meldo-grau);
}
.meldo-tool.meldo-tool .meldo-btn--flach:hover { color: var(--meldo-teal); background: transparent; }

/* Ein aktiver Zustand, etwa bei Umschaltern */
.meldo-tool.meldo-tool .meldo-btn.ist-an {
  background: var(--meldo-teal);
  border-color: var(--meldo-teal);
  color: var(--meldo-weiss);
}

/* --------------------------------------------------------------------------
   Felder und Auswahl
   -------------------------------------------------------------------------- */
.meldo-tool.meldo-tool .meldo-feld {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.meldo-tool.meldo-tool .meldo-feld > label,
.meldo-tool.meldo-tool .meldo-feld > span {
  font-family: 'Funnel Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--meldo-grau);
}

.meldo-tool.meldo-tool .meldo-select,
.meldo-tool.meldo-tool .meldo-input {
  min-height: 42px;
  padding: 0 0.75rem;
  border: 1.5px solid var(--meldo-linie);
  border-radius: var(--meldo-rund-klein);
  background: var(--meldo-weiss);
  color: var(--meldo-tinte);
  font-size: 0.92rem;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .meldo-select:hover,
.meldo-tool.meldo-tool .meldo-input:hover { border-color: var(--meldo-teal); }
.meldo-tool.meldo-tool .meldo-select:focus,
.meldo-tool.meldo-tool .meldo-input:focus {
  outline: none;
  border-color: var(--meldo-teal);
  box-shadow: 0 0 0 3px rgba(0, 143, 137, 0.13);
}

/* Schieberegler in Meldo-Grün */
.meldo-tool.meldo-tool input[type="range"] { accent-color: var(--meldo-teal); }

/* --------------------------------------------------------------------------
   Karten und Flächen
   -------------------------------------------------------------------------- */
.meldo-tool.meldo-tool .meldo-karte {
  background: var(--meldo-weiss);
  border: 1px solid var(--meldo-linie);
  border-radius: var(--meldo-rund);
  padding: var(--meldo-luft-weit);
  box-shadow: var(--meldo-schatten);
}

.meldo-tool.meldo-tool .meldo-flaeche {
  background: var(--meldo-papier);
  border-radius: var(--meldo-rund);
  padding: var(--meldo-luft);
}

/* --------------------------------------------------------------------------
   Werteanzeige – die schmale Zeile

   Löst die hohen Kacheln ab, die bei manchen Werkzeugen eine ganze
   Bildschirmhöhe einnahmen, bevor das Werkzeug selbst begann. Punkte,
   Stufe und Serie sind Begleitangaben, nicht die Hauptsache.
   -------------------------------------------------------------------------- */
.meldo-tool.meldo-tool .meldo-werte {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin-bottom: var(--meldo-luft);
  background: none;
  border: none;
}

/* Jede Angabe steht in einer eigenen Pille.
   Eine durchgehende graue Leiste wirkte wie eine Statusanzeige aus einem
   Verwaltungsprogramm. Einzelne Pillen sind leichter, lassen sich
   unterschiedlich einfärben und brechen auf schmalen Geräten sauber um. */
.meldo-tool.meldo-tool .meldo-werte__eintrag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.75rem 0.32rem 0.6rem;
  background: var(--meldo-weiss);
  border: 1px solid var(--meldo-linie);
  border-radius: 999px;
  white-space: nowrap;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .meldo-werte__eintrag:hover {
  border-color: rgba(0, 143, 137, 0.35);
  box-shadow: 0 2px 8px rgba(0, 143, 137, 0.08);
}

.meldo-tool.meldo-tool .meldo-werte__name {
  font-family: 'Funnel Sans', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--meldo-grau);
}
.meldo-tool.meldo-tool .meldo-werte__zahl {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--meldo-teal);
  font-variant-numeric: tabular-nums;   /* Zahlen springen nicht beim Zählen */
}
.meldo-tool.meldo-tool .meldo-werte__zahl--lime { color: var(--meldo-lime-dunkel); }

/* Das Symbol sitzt in einem zarten Kreis - es bekommt damit Gewicht,
   ohne laut zu werden. */
.meldo-tool.meldo-tool .meldo-werte__symbol {
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 50%;
  background: var(--meldo-teal-hell);
  color: var(--meldo-teal);
  flex-shrink: 0;
}
.meldo-tool.meldo-tool .meldo-werte__eintrag--lime .meldo-werte__symbol {
  background: var(--meldo-lime-hell);
  color: var(--meldo-lime-dunkel);
}

/* --------------------------------------------------------------------------
   Reiter
   -------------------------------------------------------------------------- */
/* Umschalter nach dem Vorbild von Meldo Screen.

   Der aktive Knopf ist WEISS mit tuerkiser Schrift, nicht tuerkis gefuellt.
   Die weisse Karte hebt sich vom grauen Behaelter ab und wirkt wie ein
   Schieber, der an seinen Platz gerueckt ist - ruhiger als eine farbige
   Flaeche und leichter zu lesen. Tuerkis fuellt nur, was gerade geschieht
   oder die Hauptaktion ist; grossflaechig eingesetzt verliert es seine
   Bedeutung. */
.meldo-tool.meldo-tool .meldo-reiter {
  display: inline-flex;
  gap: 3px;
  background: #eef2f2;
  border-radius: 12px;
  padding: 3px;
  margin-bottom: var(--meldo-luft);
}
.meldo-tool.meldo-tool .meldo-reiter--voll { display: flex; }
.meldo-tool.meldo-tool .meldo-reiter--voll .meldo-reiter__knopf { flex: 1; }

.meldo-tool.meldo-tool .meldo-reiter__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: #4a5658;
  border-radius: 9px;
  padding: 7px 14px;
  min-height: 40px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .meldo-reiter__knopf:hover { color: var(--meldo-teal); background: transparent; }

.meldo-tool.meldo-tool .meldo-reiter__knopf.ist-an {
  background: #fff;
  color: var(--meldo-teal);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.meldo-tool.meldo-tool .meldo-reiter__knopf.ist-an:hover { background: #fff; }

/* --------------------------------------------------------------------------
   Symbole

   Als SVG, nicht als Emoji: Emoji sehen auf jedem Gerät anders aus, lassen
   sich nicht einfärben und wirken beliebig. Ein SVG nimmt die Textfarbe an
   und bleibt überall gleich.
   -------------------------------------------------------------------------- */
.meldo-tool.meldo-tool .meldo-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}
.meldo-tool.meldo-tool .meldo-icon--voll { fill: currentColor; stroke: none; }

/* --------------------------------------------------------------------------
   Weniger Platz auf schmalen Geräten

   Alles, was bedient wird, behält seine Grösse. Gespart wird an Abständen
   und an Text, der nichts beiträgt.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .meldo-tool.meldo-tool .meldo-karte { padding: var(--meldo-luft); border-radius: 12px; }
  .meldo-tool.meldo-tool .meldo-werte {
    gap: 0.25rem 0.9rem;
    padding: 0.4rem 0.7rem;
    border-radius: 14px;
  }
  .meldo-tool.meldo-tool .meldo-werte__zahl { font-size: 0.95rem; }
  .meldo-tool.meldo-tool .meldo-werte__name { font-size: 0.64rem; }
  .meldo-tool.meldo-tool .meldo-btn { padding: 0 0.8rem; font-size: 0.86rem; }
  .meldo-tool.meldo-tool .meldo-reiter { gap: 0.2rem; padding: 0.2rem; }
  .meldo-tool.meldo-tool .meldo-reiter__knopf { font-size: 0.8rem; min-height: 38px; }
}

/* Bewegung zurücknehmen, wenn das Gerät darum bittet. */
@media (prefers-reduced-motion: reduce) {
  .meldo-tool.meldo-tool .meldo-btn,
  .meldo-tool.meldo-tool .meldo-select,
  .meldo-tool.meldo-tool .meldo-input,
  .meldo-tool.meldo-tool .meldo-reiter__knopf { transition: none; }
  .meldo-tool.meldo-tool .meldo-btn:hover { transform: none; }
}

/* ==========================================================================
   Angleichung der bestehenden Werkzeuge

   Die Werkzeuge sind ueber Jahre gewachsen und verwenden verschiedene
   Klassennamen fuer dieselben Dinge. Statt einundzwanzig Dateien umzubauen,
   werden die gaengigen Namen hier aufgegriffen und auf die gemeinsame Form
   gebracht.

   Alles ohne !important: Wo ein Werkzeug bewusst abweicht, setzt es sich
   weiterhin durch. Diese Regeln sind eine Grundlage, keine Vorschrift.
   ========================================================================== */

/* --- Umschalter und Reiter ------------------------------------------------
   Vierzehn Werkzeuge haben Reiter, unter drei verschiedenen Namen. */
.meldo-tool.meldo-tool .tabs,
.meldo-tool.meldo-tool .tab-bar,
.meldo-tool.meldo-tool .sub-tabs,
.meldo-tool.meldo-tool .segment,
.meldo-tool.meldo-tool .main-nav,
.meldo-tool.meldo-tool .toggle-group {
  display: inline-flex;
  gap: 3px;
  background: #eef2f2;
  border-radius: 12px;
  padding: 3px;
  border: none;
}

.meldo-tool.meldo-tool .tab-button,
.meldo-tool.meldo-tool .tab-btn,
.meldo-tool.meldo-tool .sub-tab-button,
.meldo-tool.meldo-tool .main-nav-btn,
.meldo-tool.meldo-tool .seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: #4a5658;
  border-radius: 9px;
  padding: 7px 14px;
  min-height: 40px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .tab-button:hover,
.meldo-tool.meldo-tool .tab-btn:hover,
.meldo-tool.meldo-tool .sub-tab-button:hover,
.meldo-tool.meldo-tool .main-nav-btn:hover,
.meldo-tool.meldo-tool .seg-btn:hover { color: var(--meldo-teal); background: transparent; }

/* Der aktive Knopf ist WEISS mit tuerkiser Schrift - siehe MELDO-DESIGN.md.
   Tuerkis fuellt nur die Hauptaktion. */
.meldo-tool.meldo-tool .tab-button.active,
.meldo-tool.meldo-tool .tab-btn.active,
.meldo-tool.meldo-tool .sub-tab-button.active,
.meldo-tool.meldo-tool .seg-btn.active,
.meldo-tool.meldo-tool .main-nav-btn.active,
.meldo-tool.meldo-tool .tab-button.is-active,
.meldo-tool.meldo-tool .tab-btn.is-active,
.meldo-tool.meldo-tool [role="tab"][aria-selected="true"] {
  background: #fff;
  color: var(--meldo-teal);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* --- Knoepfe --------------------------------------------------------------
   Vierzehn Werkzeuge verwenden .btn, acht davon .btn-primary. */
.meldo-tool.meldo-tool .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 10px;
  border: 1.5px solid var(--meldo-linie);
  background: var(--meldo-weiss);
  color: var(--meldo-tinte);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .btn:hover {
  background: var(--meldo-weiss);
  border-color: var(--meldo-teal);
  color: var(--meldo-teal);
  transform: translateY(-1px);
}
.meldo-tool.meldo-tool .btn:active { transform: translateY(0); }

.meldo-tool.meldo-tool .btn-primary,
.meldo-tool.meldo-tool .btn.primary {
  background: var(--meldo-teal);
  border-color: var(--meldo-teal);
  color: var(--meldo-weiss);
  box-shadow: var(--meldo-schatten);
}
.meldo-tool.meldo-tool .btn-primary:hover,
.meldo-tool.meldo-tool .btn.primary:hover {
  background: var(--meldo-teal-dunkel);
  border-color: var(--meldo-teal-dunkel);
  color: var(--meldo-weiss);
}

.meldo-tool.meldo-tool .btn-secondary {
  background: var(--meldo-weiss);
  border-color: var(--meldo-linie);
  color: var(--meldo-tinte);
}
.meldo-tool.meldo-tool .btn-secondary:hover { border-color: var(--meldo-teal); color: var(--meldo-teal); background: var(--meldo-weiss); }

.meldo-tool.meldo-tool .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* --- Karten ---------------------------------------------------------------
   Zehn Werkzeuge verwenden .card - meist mit 2rem Innenabstand, was auf dem
   Handy ein Drittel der Breite kostet. */
.meldo-tool.meldo-tool .card {
  background: var(--meldo-weiss);
  border-radius: 16px;
  padding: 1.4rem;
}

/* --- Felder ------------------------------------------------------------- */
.meldo-tool.meldo-tool select,
.meldo-tool.meldo-tool input[type="text"],
.meldo-tool.meldo-tool input[type="number"],
.meldo-tool.meldo-tool input[type="search"] {
  min-height: 42px;
  border: 1.5px solid var(--meldo-linie);
  border-radius: 10px;
  background: var(--meldo-weiss);
  color: var(--meldo-tinte);
  font-family: 'Funnel Sans', sans-serif;
  font-size: 0.92rem;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool select:hover,
.meldo-tool.meldo-tool input[type="text"]:hover,
.meldo-tool.meldo-tool input[type="number"]:hover,
.meldo-tool.meldo-tool input[type="search"]:hover { border-color: var(--meldo-teal); }
.meldo-tool.meldo-tool select:focus,
.meldo-tool.meldo-tool input[type="text"]:focus,
.meldo-tool.meldo-tool input[type="number"]:focus,
.meldo-tool.meldo-tool input[type="search"]:focus {
  outline: none;
  border-color: var(--meldo-teal);
  box-shadow: 0 0 0 3px rgba(0, 143, 137, 0.13);
}

/* --- Schriften ----------------------------------------------------------- */
.meldo-tool.meldo-tool h1, .meldo-tool.meldo-tool h2, .meldo-tool.meldo-tool h3, .meldo-tool.meldo-tool h4 {
  font-family: 'Quicksand', 'Funnel Sans', system-ui, sans-serif;
  font-weight: 700;
  color: var(--meldo-tinte);
  letter-spacing: -0.01em;
}

/* --- Symbole in den Werkzeugen -------------------------------------------
   OHNE Praefix, damit die Regel auch dort greift, wo die Klasse meldo-tool
   nicht am body haengt. Ein SVG ohne Groessenangabe fuellt sonst den ganzen
   verfuegbaren Platz - im Musiklexikon erschien ein Buch ueber die halbe
   Karte. Zusaetzlich tragen die Symbole width und height als ATTRIBUT; das
   wirkt selbst dann, wenn gar kein Stylesheet geladen ist. */
.meldo-tool.meldo-tool .m-ico {
  width: 1.05em !important;
  height: 1.05em !important;
  max-width: 1.6em;
  max-height: 1.6em;
  flex-shrink: 0;
  vertical-align: -0.16em;
  display: inline-block;
}
/* Wo ein Symbol bewusst gross sein soll - etwa in leeren Zustaenden -
   traegt es zusaetzlich diese Klasse. */
.meldo-tool.meldo-tool .m-ico.m-ico--gross {
  width: 2.4rem !important;
  height: 2.4rem !important;
  max-width: none;
  max-height: none;
}

/* --- Weniger Platz auf schmalen Geraeten --------------------------------- */
@media (max-width: 600px) {
  .meldo-tool.meldo-tool .card { padding: 0.9rem; border-radius: 12px; }
  .meldo-tool.meldo-tool .tab-button,
  .meldo-tool.meldo-tool .tab-btn,
  .meldo-tool.meldo-tool .sub-tab-button { padding: 7px 9px; font-size: 13px; }
  .meldo-tool.meldo-tool .btn { padding: 0 0.8rem; font-size: 0.86rem; }
}

/* --- Ausrichtung ----------------------------------------------------------
   Werkzeuge mit begrenzter Breite wirken linksbuendig verrutscht. Reiter und
   Werteleisten stehen darum mittig; Inhalte bleiben linksbuendig, weil
   Fliesstext sich so besser liest. */
.meldo-tool.meldo-tool .tabs,
.meldo-tool.meldo-tool .sub-tabs,
.meldo-tool.meldo-tool .tab-bar,
.meldo-tool.meldo-tool .segment {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

/* Gleich breite Reiter: unterschiedlich breite wirken unruhig, und lange
   Namen brechen sonst mitten im Wort um. */
.meldo-tool.meldo-tool .tabs > .tab-button,
.meldo-tool.meldo-tool .tabs > .tab-btn,
.meldo-tool.meldo-tool .sub-tabs > .sub-tab-button { flex: 1 1 0; min-width: 0; }

/* --- Eigene Namen der Werkzeuge ------------------------------------------
   Manche Werkzeuge benennen ihre Knoepfe und Reiter anders. Statt sie
   umzubenennen - was Skripte brechen wuerde - werden die Namen hier
   aufgegriffen. */

/* Reiter unter anderem Namen */
.meldo-tool.meldo-tool .lb-tabs,
.meldo-tool.meldo-tool .quiz-tabs {
  display: inline-flex;
  gap: 3px;
  background: #eef2f2;
  border-radius: 12px;
  padding: 3px;
  border: none;
}
.meldo-tool.meldo-tool .lb-tab-btn,
.meldo-tool.meldo-tool .quiz-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: #4a5658;
  border-radius: 9px;
  padding: 7px 14px;
  min-height: 40px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .lb-tab-btn:hover,
.meldo-tool.meldo-tool .quiz-tab-btn:hover { color: var(--meldo-teal); background: transparent; }
.meldo-tool.meldo-tool .lb-tab-btn.active,
.meldo-tool.meldo-tool .quiz-tab-btn.active {
  background: #fff;
  color: var(--meldo-teal);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Knoepfe unter anderem Namen */
.meldo-tool.meldo-tool .an-btn,
.meldo-tool.meldo-tool .quiz-btn,
.meldo-tool.meldo-tool .back-btn,
.meldo-tool.meldo-tool .next-btn,
.meldo-tool.meldo-tool .play-button,
.meldo-tool.meldo-tool .icon-button {
  border-radius: 10px;
  border: 1.5px solid var(--meldo-linie);
  background: var(--meldo-weiss);
  color: var(--meldo-tinte);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .an-btn:hover,
.meldo-tool.meldo-tool .quiz-btn:hover,
.meldo-tool.meldo-tool .back-btn:hover,
.meldo-tool.meldo-tool .next-btn:hover,
.meldo-tool.meldo-tool .play-button:hover,
.meldo-tool.meldo-tool .icon-button:hover {
  background: var(--meldo-weiss);
  border-color: var(--meldo-teal);
  color: var(--meldo-teal);
}
/* Der eingeschaltete Zustand bleibt gefuellt - hier zeigt Tuerkis an, was
   gerade laeuft, und das ist der erlaubte Fall. */
.meldo-tool.meldo-tool .an-btn.on,
.meldo-tool.meldo-tool .an-btn.is-on,
.meldo-tool.meldo-tool .quiz-btn.active {
  background: var(--meldo-teal);
  border-color: var(--meldo-teal);
  color: var(--meldo-weiss);
}

/* Werkzeuge ohne Knoepfe - Glockenspiel, Xylophon, Stabspiele - bestehen aus
   Klangstaeben. Dort genuegen Schrift und Beschriftungen. */
.meldo-tool.meldo-tool .control-label,
.meldo-tool.meldo-tool .subtitle {
  font-family: 'Funnel Sans', sans-serif;
  color: var(--meldo-grau);
}
.meldo-tool.meldo-tool .controls,
.meldo-tool.meldo-tool .control-group { gap: 0.6rem; }

/* --- Weitere eigene Namen -------------------------------------------------
   Intervall-Trainer, Tonleiter-Finder und Chord-Leadsheet benennen ihre
   Knoepfe wieder anders. */
.meldo-tool.meldo-tool .btn-outline,
.meldo-tool.meldo-tool .display-btn,
.meldo-tool.meldo-tool .difficulty-button,
.meldo-tool.meldo-tool .btn-next,
.meldo-tool.meldo-tool .btn-skip,
.meldo-tool.meldo-tool .meldo-btn-back,
.meldo-tool.meldo-tool .meldo-btn-secondary,
.meldo-tool.meldo-tool .meldo-btn-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 10px;
  border: 1.5px solid var(--meldo-linie);
  background: var(--meldo-weiss);
  color: var(--meldo-tinte);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .btn-outline:hover,
.meldo-tool.meldo-tool .display-btn:hover,
.meldo-tool.meldo-tool .difficulty-button:hover,
.meldo-tool.meldo-tool .btn-next:hover,
.meldo-tool.meldo-tool .btn-skip:hover,
.meldo-tool.meldo-tool .meldo-btn-back:hover,
.meldo-tool.meldo-tool .meldo-btn-secondary:hover,
.meldo-tool.meldo-tool .meldo-btn-play:hover {
  background: var(--meldo-weiss);
  border-color: var(--meldo-teal);
  color: var(--meldo-teal);
  transform: translateY(-1px);
}

/* Gefuellt bleibt, was Hauptaktion oder laufender Zustand ist. */
.meldo-tool.meldo-tool .meldo-btn-primary,
.meldo-tool.meldo-tool .display-btn.active,
.meldo-tool.meldo-tool .difficulty-button.active,
.meldo-tool.meldo-tool .btn-outline.active {
  background: var(--meldo-teal);
  border-color: var(--meldo-teal);
  color: var(--meldo-weiss);
}
.meldo-tool.meldo-tool .meldo-btn-primary:hover {
  background: var(--meldo-teal-dunkel);
  border-color: var(--meldo-teal-dunkel);
  color: var(--meldo-weiss);
}

/* Der Abspielknopf im Tonleiter-Finder sitzt auf den Klaviertasten und
   bleibt darum rund und gefuellt - dort zeigt Tuerkis die Hauptaktion. */
.meldo-tool.meldo-tool .play-button {
  border-radius: 10px;
  border: 1.5px solid var(--meldo-teal);
  background: var(--meldo-teal);
  color: var(--meldo-weiss);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .play-button:hover {
  background: var(--meldo-teal-dunkel);
  border-color: var(--meldo-teal-dunkel);
}

/* Reiter des Chord-Leadsheets */
.meldo-tool.meldo-tool .meldo-tabs {
  display: inline-flex;
  gap: 3px;
  background: #eef2f2;
  border-radius: 12px;
  padding: 3px;
  border: none;
}
.meldo-tool.meldo-tool .meldo-tabs > button,
.meldo-tool.meldo-tool .meldo-tabs > [role="tab"] {
  border: none;
  background: transparent;
  color: #4a5658;
  border-radius: 9px;
  padding: 7px 14px;
  min-height: 40px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .meldo-tabs > [aria-selected="true"],
.meldo-tool.meldo-tool .meldo-tabs > button.active {
  background: #fff;
  color: var(--meldo-teal);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* --- Letzte eigene Namen --------------------------------------------------
   Aus einer systematischen Durchsicht aller Werkzeuge. Die Regeln tragen
   das Praefix .meldo-tool und wirken darum nur innerhalb der Werkzeuge -
   .button etwa ist auch eine WordPress-Klasse und bliebe sonst in der
   Verwaltung betroffen. */
.meldo-tool.meldo-tool .button,
.meldo-tool.meldo-tool .button-small,
.meldo-tool.meldo-tool .answer-btn,
.meldo-tool.meldo-tool .tn-btn,
.meldo-tool.meldo-tool .quiz-answer,
.meldo-tool.meldo-tool .note-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 10px;
  border: 1.5px solid var(--meldo-linie);
  background: var(--meldo-weiss);
  color: var(--meldo-tinte);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
  cursor: pointer;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .button:hover,
.meldo-tool.meldo-tool .button-small:hover,
.meldo-tool.meldo-tool .answer-btn:hover,
.meldo-tool.meldo-tool .tn-btn:hover,
.meldo-tool.meldo-tool .quiz-answer:hover,
.meldo-tool.meldo-tool .note-btn:hover {
  background: var(--meldo-weiss);
  border-color: var(--meldo-teal);
  color: var(--meldo-teal);
}

.meldo-tool.meldo-tool .button-primary,
.meldo-tool.meldo-tool .tn-btn.active,
.meldo-tool.meldo-tool .note-btn.active {
  background: var(--meldo-teal);
  border-color: var(--meldo-teal);
  color: var(--meldo-weiss);
}
.meldo-tool.meldo-tool .button-primary:hover {
  background: var(--meldo-teal-dunkel);
  border-color: var(--meldo-teal-dunkel);
  color: var(--meldo-weiss);
}

/* Loeschen und Abbrechen bleiben rot - hier traegt die Farbe eine Warnung,
   und die darf nicht im Einheitlichen untergehen. */
.meldo-tool.meldo-tool .btn-danger {
  border-radius: 10px;
  border: 1.5px solid #d9534f;
  background: var(--meldo-weiss);
  color: #d9534f;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  min-height: 44px;
  cursor: pointer;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .btn-danger:hover { background: #d9534f; color: var(--meldo-weiss); }

/* Reiterleisten unter anderem Namen */
.meldo-tool.meldo-tool .tab-navigation,
.meldo-tool.meldo-tool .tab-header {
  display: inline-flex;
  gap: 3px;
  background: #eef2f2;
  border-radius: 12px;
  padding: 3px;
  border: none;
}

/* Knopfgruppen: gleichmaessiger Abstand statt zufaelliger Raender */
.meldo-tool.meldo-tool .button-group,
.meldo-tool.meldo-tool .play-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* --- Restliche Knopfnamen -------------------------------------------------
   Aus der abschliessenden Durchsicht. Container wie .btn-row oder
   .play-buttons-grid sind keine Knoepfe und bleiben unberuehrt - sie
   ordnen nur an. */
.meldo-tool.meldo-tool .btn-letter,
.meldo-tool.meldo-tool .difficulty-btn,
.meldo-tool.meldo-tool .display-btn-new,
.meldo-tool.meldo-tool .meldo-help-btn,
.meldo-tool.meldo-tool .play-interval-btn,
.meldo-tool.meldo-tool .powerup-btn,
.meldo-tool.meldo-tool .qb-oct-btn,
.meldo-tool.meldo-tool .start-button,
.meldo-tool.meldo-tool .vg-save-btn,
.meldo-tool.meldo-tool .button-link {
  border-radius: 10px;
  border: 1.5px solid var(--meldo-linie);
  background: var(--meldo-weiss);
  color: var(--meldo-tinte);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .btn-letter:hover,
.meldo-tool.meldo-tool .difficulty-btn:hover,
.meldo-tool.meldo-tool .display-btn-new:hover,
.meldo-tool.meldo-tool .meldo-help-btn:hover,
.meldo-tool.meldo-tool .play-interval-btn:hover,
.meldo-tool.meldo-tool .powerup-btn:hover,
.meldo-tool.meldo-tool .qb-oct-btn:hover,
.meldo-tool.meldo-tool .start-button:hover,
.meldo-tool.meldo-tool .vg-save-btn:hover {
  background: var(--meldo-weiss);
  border-color: var(--meldo-teal);
  color: var(--meldo-teal);
}
.meldo-tool.meldo-tool .btn-letter.active,
.meldo-tool.meldo-tool .difficulty-btn.active,
.meldo-tool.meldo-tool .display-btn-new.active,
.meldo-tool.meldo-tool .qb-oct-btn.active,
.meldo-tool.meldo-tool .start-button {
  background: var(--meldo-teal);
  border-color: var(--meldo-teal);
  color: var(--meldo-weiss);
}
.meldo-tool.meldo-tool .start-button:hover {
  background: var(--meldo-teal-dunkel);
  border-color: var(--meldo-teal-dunkel);
  color: var(--meldo-weiss);
}

/* Loeschen bleibt rot - die Warnung darf nicht untergehen. */
.meldo-tool.meldo-tool .button-link-delete { color: #d9534f; }

/* Kleine Knoepfe duerfen flacher sein, aber nicht unter 36 Pixel - darunter
   trifft man sie mit dem Finger nicht mehr zuverlaessig. */
.meldo-tool.meldo-tool .btn-klein { min-height: 36px; padding: 0 .7rem; font-size: .84rem; }


/* ==========================================================================
   Nachtrag 1.90.4 - Namen, die bisher durchs Raster fielen

   Nicht Spezifitaet war hier das Hindernis, sondern Deckung: diese Klassen
   stehen im Markup, kamen in dieser Datei aber gar nicht vor. Umbenennen
   wuerde Skripte brechen, darum werden die Namen hier aufgegriffen.
   ========================================================================== */

/* --- Hauptaktion unter dem Kurznamen .pri ---------------------------------
   Fuenf Werkzeuge schreiben `class="btn pri"`, das Stimmgeraet `tn-btn pri`. */
.meldo-tool.meldo-tool .btn.pri,
.meldo-tool.meldo-tool .tn-btn.pri {
  background: var(--meldo-teal);
  border-color: var(--meldo-teal);
  color: var(--meldo-weiss);
  box-shadow: var(--meldo-schatten);
}
.meldo-tool.meldo-tool .btn.pri:hover,
.meldo-tool.meldo-tool .tn-btn.pri:hover {
  background: var(--meldo-teal-dunkel);
  border-color: var(--meldo-teal-dunkel);
  color: var(--meldo-weiss);
}

/* --- Reiter, die schlicht .tab heissen ------------------------------------
   Der Behaelter `.tabs` war bereits angeglichen, die Knoepfe darin nicht -
   ein Umschalter im Meldo-Gewand mit Reitern aus drei verschiedenen
   Werkzeugen darin. Betrifft Akkord-Atlas, Intervall-Trainer, Scale Finder. */
.meldo-tool.meldo-tool .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: #4a5658;
  border-radius: 9px;
  padding: 7px 14px;
  min-height: 40px;
  margin-bottom: 0;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .tab:hover {
  background: transparent;
  color: var(--meldo-teal);
  transform: none;
}
.meldo-tool.meldo-tool .tab.active,
.meldo-tool.meldo-tool .tab.on {
  background: var(--meldo-weiss);
  border-color: transparent;
  color: var(--meldo-teal);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.meldo-tool.meldo-tool .tabs > .tab { flex: 1 1 0; min-width: 0; }

/* --- Ein einziges Aussehen fuer Ansichtswechsler (1.90.6) -----------------
   Reiter tragen weder Rahmen noch eigenen Schatten - die weisse Karte des
   aktiven Reiters ist das einzige Signal. Ohne diese Zeilen bleiben Rahmen
   und Schatten aus den Werkzeugen stehen und jeder Umschalter sieht wieder
   anders aus. */
.meldo-tool.meldo-tool .tabs > *,
.meldo-tool.meldo-tool .tab-bar > *,
.meldo-tool.meldo-tool .sub-tabs > *,
.meldo-tool.meldo-tool .segment > *,
.meldo-tool.meldo-tool .main-nav > *,
.meldo-tool.meldo-tool .tab-navigation > *,
.meldo-tool.meldo-tool .toggle-group > *,
.meldo-tool.meldo-tool .lb-tabs > *,
.meldo-tool.meldo-tool .quiz-tabs > * {
  border: none;
  border-radius: 9px;
  box-shadow: none;
  margin: 0;
  min-height: 40px;
  font-size: 14px;
  animation: none;
}
.meldo-tool.meldo-tool .tabs > .active,
.meldo-tool.meldo-tool .tab-bar > .active,
.meldo-tool.meldo-tool .sub-tabs > .active,
.meldo-tool.meldo-tool .segment > .active,
.meldo-tool.meldo-tool .main-nav > .active,
.meldo-tool.meldo-tool .tab-navigation > .active,
.meldo-tool.meldo-tool .toggle-group > .active,
.meldo-tool.meldo-tool .lb-tabs > .active,
.meldo-tool.meldo-tool .quiz-tabs > .active,
.meldo-tool.meldo-tool .meldo-tabs > .is-active {
  background: var(--meldo-weiss);
  color: var(--meldo-teal);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* --- Zweite Wahl unter dem Namen .button.secondary ------------------------ */
.meldo-tool.meldo-tool .button.secondary {
  background: var(--meldo-weiss);
  border: 1.5px solid var(--meldo-linie);
  color: var(--meldo-tinte);
}
.meldo-tool.meldo-tool .button.secondary:hover {
  border-color: var(--meldo-teal);
  color: var(--meldo-teal);
  background: var(--meldo-weiss);
}

/* --- Bestenlisten-Reiter --------------------------------------------------
   Fuenf Werkzeuge, fuenf Namen fuer dasselbe. Seit 1.90.4 tragen die Knoepfe
   zusaetzlich `.lb-tab-btn` und holen ihr Aussehen von dort; die alten Namen
   bleiben als Haken fuer die Skripte. Diese Regeln fangen ab, was allein
   unter dem alten Namen steht. */
.meldo-tool.meldo-tool .nf-lb-tab,
.meldo-tool.meldo-tool .sf-lb-tab,
.meldo-tool.meldo-tool .it-lb-tab,
.meldo-tool.meldo-tool .ml-lb-tab,
.meldo-tool.meldo-tool .tuner-lb-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: #4a5658;
  border-radius: 9px;
  padding: 7px 14px;
  min-height: 40px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .nf-lb-tab:hover,
.meldo-tool.meldo-tool .sf-lb-tab:hover,
.meldo-tool.meldo-tool .it-lb-tab:hover,
.meldo-tool.meldo-tool .ml-lb-tab:hover,
.meldo-tool.meldo-tool .tuner-lb-tab:hover { color: var(--meldo-teal); background: transparent; }

.meldo-tool.meldo-tool .nf-lb-tab-active,
.meldo-tool.meldo-tool .sf-lb-tab-active,
.meldo-tool.meldo-tool .it-lb-tab-active,
.meldo-tool.meldo-tool .ml-lb-tab-active,
.meldo-tool.meldo-tool .tuner-lb-tab-active,
.meldo-tool.meldo-tool .lb-tab-active {
  background: var(--meldo-weiss);
  color: var(--meldo-teal);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   Kein Text in der Farbe seines Untergrunds (1.90.7)

   Zwei Fehlerquellen, beide gleich unangenehm:

   1. Ein Zeigen-Zustand, der nur `color` setzt. Das Werkzeug faerbt beim
      Darueberfahren den Grund tuerkis, die gemeinsame Regel faerbt die
      Schrift tuerkis - und die Beschriftung verschwindet. Darum nennt
      inzwischen JEDE :hover-Regel in dieser Datei auch ihren Hintergrund.

   2. Ein bereits gefuellter Knopf ohne eigene Zeigen-Regel. Er faellt auf
      die Regel seiner Gruppe zurueck, die tuerkise Schrift vorsieht - auf
      tuerkisem Grund. Die Regeln hier unten fangen das ab.

   Merksatz fuer kuenftige Ergaenzungen: Grund und Schrift gehoeren immer
   zusammen. Wer nur eines von beiden setzt, setzt auf gut Glueck.
   ========================================================================== */
.meldo-tool.meldo-tool .meldo-btn.ist-an:hover,
.meldo-tool.meldo-tool .an-btn.on:hover,
.meldo-tool.meldo-tool .an-btn.is-on:hover,
.meldo-tool.meldo-tool .quiz-btn.active:hover,
.meldo-tool.meldo-tool .display-btn.active:hover,
.meldo-tool.meldo-tool .difficulty-button.active:hover,
.meldo-tool.meldo-tool .btn-outline.active:hover,
.meldo-tool.meldo-tool .tn-btn.active:hover,
.meldo-tool.meldo-tool .note-btn.active:hover {
  background: var(--meldo-teal-dunkel);
  border-color: var(--meldo-teal-dunkel);
  color: var(--meldo-weiss);
}

/* Aktive Reiter bleiben weisse Karte mit tuerkiser Schrift - auch beim
   Darueberfahren. Sonst springt die Karte weg, sobald die Maus sie beruehrt. */
.meldo-tool.meldo-tool .tabs > .active:hover,
.meldo-tool.meldo-tool .tab-bar > .active:hover,
.meldo-tool.meldo-tool .sub-tabs > .active:hover,
.meldo-tool.meldo-tool .segment > .active:hover,
.meldo-tool.meldo-tool .main-nav > .active:hover,
.meldo-tool.meldo-tool .tab-navigation > .active:hover,
.meldo-tool.meldo-tool .toggle-group > .active:hover,
.meldo-tool.meldo-tool .lb-tabs > .active:hover,
.meldo-tool.meldo-tool .quiz-tabs > .active:hover,
.meldo-tool.meldo-tool .meldo-tabs > .is-active:hover {
  background: var(--meldo-weiss);
  color: var(--meldo-teal);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   Symbolhuellen sind keine Knoepfe (1.90.8)

   `<span class="btn-icon">` haelt das Symbol INNERHALB eines Knopfes. Der
   Name klingt nach Knopf, ist aber nur eine Huelle - und weil sie in der
   Knopfgruppe stand, bekam jedes Symbol seinen eigenen weissen Kasten mit
   Rand und 44 Pixel Hoehe, mitten im Knopf. Bei Emoji fiel das kaum auf,
   bei SVG sofort.

   Huellen tragen keine Farbe, keinen Rand und keine Hoehe. Sie nehmen die
   Schriftfarbe des Knopfes an, in dem sie sitzen.
   ========================================================================== */
.meldo-tool.meldo-tool .btn-icon,
.meldo-tool.meldo-tool .nav-icon,
.meldo-tool.meldo-tool .title-ico,
.meldo-tool.meldo-tool .tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  line-height: 0;
}
.meldo-tool.meldo-tool .btn-icon:hover,
.meldo-tool.meldo-tool .nav-icon:hover,
.meldo-tool.meldo-tool .title-ico:hover,
.meldo-tool.meldo-tool .tab-icon:hover {
  background: none;
  border: none;
  color: inherit;
  transform: none;
}

/* ==========================================================================
   Eingeschalteter Knopf und die Pille (1.90.10)

   `.btn.active` fehlte. Ein Werkzeug, das seinen Knopf so schaltet, verlor
   den Zustand komplett: die Grundregel `.btn` (0,3,0) faerbte ihn wieder
   weiss. Sichtbar beim Glockenspiel und beim Xylophon, sobald deren
   Farbschalter die Klasse `btn` bekam.

   `.pill` ist die schmale Form aus MELDO-DESIGN Abschnitt 7 - bisher nur im
   Stabspiel vorhanden und darum nirgends verbindlich.
   ========================================================================== */
.meldo-tool.meldo-tool .btn.active,
.meldo-tool.meldo-tool .btn.on,
.meldo-tool.meldo-tool .btn.ist-an {
  background: var(--meldo-teal);
  border-color: var(--meldo-teal);
  color: var(--meldo-weiss);
}
.meldo-tool.meldo-tool .btn.active:hover,
.meldo-tool.meldo-tool .btn.on:hover,
.meldo-tool.meldo-tool .btn.ist-an:hover {
  background: var(--meldo-teal-dunkel);
  border-color: var(--meldo-teal-dunkel);
  color: var(--meldo-weiss);
}

.meldo-tool.meldo-tool .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.74rem;
  border: 1.5px solid var(--meldo-linie);
  border-radius: 999px;
  background: var(--meldo-weiss);
  color: var(--meldo-tinte);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .pill:hover {
  background: var(--meldo-weiss);
  border-color: var(--meldo-teal);
  color: var(--meldo-teal);
}
.meldo-tool.meldo-tool .pill.on,
.meldo-tool.meldo-tool .pill.active {
  background: var(--meldo-teal);
  border-color: var(--meldo-teal);
  color: var(--meldo-weiss);
}
.meldo-tool.meldo-tool .pill.on:hover,
.meldo-tool.meldo-tool .pill.active:hover {
  background: var(--meldo-teal-dunkel);
  border-color: var(--meldo-teal-dunkel);
  color: var(--meldo-weiss);
}

/* ==========================================================================
   WORTSCHATZ - sieben Arten von Bedienelementen (ab 1.90.11)

   Hier endet das Hinterherlaufen. Bis 1.90.10 hat diese Datei versucht, die
   95 Klassennamen der Werkzeuge einzufangen; es kam immer ein neuer dazu.
   Ab jetzt gilt die Umkehrung: Die Werkzeuge benutzen diesen Wortschatz.

   ABMACHUNG
   Jede Klasse, die AUSSEHEN traegt, beginnt mit `m-`. Alles ohne `m-` ist
   ein Haken fuer ein Skript und gestaltet nichts. Deshalb darf `nf-lb-tab`
   im Markup stehen bleiben, ohne Schaden anzurichten.

   SIEBEN ARTEN, nach Funktion sortiert - was passiert beim Druecken?
     1 .m-aktion        fuehrt etwas aus
     2 .m-reiter        zeigt etwas anderes an
     3 .m-wahl          waehlt eines aus vielen
     4 .m-schalter      schaltet an oder aus
     5 .m-symbolknopf   Aktion ohne Wort
     6 .m-feld          nimmt eine Eingabe entgegen
     7 .m-aktion--klang startet und stoppt Klang

   DREI REGELN, wichtiger als jede Pixelangabe
     - Tuerkis gefuellt heisst genau zweierlei: Hauptaktion oder gewaehlter
       Zustand. Sonst nie.
     - Je Ansicht eine Hauptaktion, je Ebene eine Reiterleiste.
     - Grund und Schrift gehoeren zusammen. Jede Zustandsregel nennt beides.

   Diese Fassung ist ADDITIV. Kein Werkzeug ist umgehaengt, nichts bricht.
   Das Umhaengen geschieht Werkzeug fuer Werkzeug in den naechsten Fassungen;
   danach fallen die alten Namensregeln oben aus dieser Datei.
   ========================================================================== */

/* --- 1 Aktion -------------------------------------------------------------
   Drei Staerken. Die Staerke sagt, wie wichtig die Aktion IN DIESER ANSICHT
   ist - nicht, wie wichtig sie an sich ist. */
.meldo-tool.meldo-tool .m-aktion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1.5px solid var(--meldo-linie);
  border-radius: var(--meldo-rund-klein);
  background: var(--meldo-weiss);
  color: var(--meldo-tinte);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--meldo-schatten);
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .m-aktion:hover {
  background: var(--meldo-weiss);
  border-color: var(--meldo-teal);
  color: var(--meldo-teal);
  transform: translateY(-1px);
}
.meldo-tool.meldo-tool .m-aktion:active { transform: translateY(0); }
.meldo-tool.meldo-tool .m-aktion[disabled],
.meldo-tool.meldo-tool .m-aktion:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.meldo-tool.meldo-tool .m-aktion--haupt {
  background: var(--meldo-teal);
  border-color: var(--meldo-teal);
  color: var(--meldo-weiss);
}
.meldo-tool.meldo-tool .m-aktion--haupt:hover {
  background: var(--meldo-teal-dunkel);
  border-color: var(--meldo-teal-dunkel);
  color: var(--meldo-weiss);
}

.meldo-tool.meldo-tool .m-aktion--flach {
  background: transparent;
  border-color: transparent;
  color: var(--meldo-grau);
  box-shadow: none;
}
.meldo-tool.meldo-tool .m-aktion--flach:hover {
  background: transparent;
  border-color: transparent;
  color: var(--meldo-teal);
}

/* Gefahr ist NICHT gefuellt. Ein roter Block zieht mehr Blick als die
   Hauptaktion daneben und dreht damit die Rangfolge um. Gefuellt wird er
   erst in der Rueckfrage - dort ist er die Hauptaktion. */
.meldo-tool.meldo-tool .m-aktion--gefahr {
  background: var(--meldo-weiss);
  border-color: var(--meldo-rot-linie);
  color: var(--meldo-rot);
}
.meldo-tool.meldo-tool .m-aktion--gefahr:hover {
  background: var(--meldo-rot-hell);
  border-color: var(--meldo-rot);
  color: var(--meldo-rot);
}
.meldo-tool.meldo-tool .m-aktion--gefahr.m-aktion--haupt {
  background: var(--meldo-rot);
  border-color: var(--meldo-rot);
  color: var(--meldo-weiss);
}
.meldo-tool.meldo-tool .m-aktion--gefahr.m-aktion--haupt:hover {
  background: #a5301f;
  border-color: #a5301f;
  color: var(--meldo-weiss);
}

/* --- 2 Ansichtswechsel ---------------------------------------------------- */
.meldo-tool.meldo-tool .m-reiter {
  display: inline-flex;
  gap: 3px;
  background: var(--meldo-leiste);
  border-radius: 12px;
  padding: 3px;
  border: none;
}
.meldo-tool.meldo-tool .m-reiter__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--meldo-gedaempft);
  padding: 7px 14px;
  min-height: 40px;
  margin: 0;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .m-reiter__knopf:hover {
  background: transparent;
  color: var(--meldo-teal);
  transform: none;
}
.meldo-tool.meldo-tool .m-reiter__knopf.is-aktiv,
.meldo-tool.meldo-tool .m-reiter__knopf.is-aktiv:hover {
  background: var(--meldo-weiss);
  color: var(--meldo-teal);
  box-shadow: var(--meldo-karte);
}
/* Die einzige Hervorhebung im ganzen Werkzeug: ein gruener Punkt.
   Kein Farbverlauf, keine Animation, keine eigene Rundung. */
.meldo-tool.meldo-tool .m-punkt {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--meldo-lime);
  flex: 0 0 auto;
  margin-left: 2px;
}

/* --- 3 Auswahl aus vielen -------------------------------------------------
   Bis zwoelf Moeglichkeiten Pillen, darueber ein Auswahlfeld (Art 6).
   Zwoelf, weil das die chromatische Tonleiter ist. */
.meldo-tool.meldo-tool .m-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.meldo-tool.meldo-tool .m-wahl__pille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 36px;
  padding: 0.4rem 0.9rem;
  border: 1.5px solid var(--meldo-linie);
  border-radius: 999px;
  background: var(--meldo-weiss);
  color: var(--meldo-tinte);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .m-wahl__pille:hover {
  background: var(--meldo-weiss);
  border-color: var(--meldo-teal);
  color: var(--meldo-teal);
}
.meldo-tool.meldo-tool .m-wahl__pille.is-gewaehlt {
  background: var(--meldo-teal);
  border-color: var(--meldo-teal);
  color: var(--meldo-weiss);
}
.meldo-tool.meldo-tool .m-wahl__pille.is-gewaehlt:hover {
  background: var(--meldo-teal-dunkel);
  border-color: var(--meldo-teal-dunkel);
  color: var(--meldo-weiss);
}
@media (max-width: 640px) {
  .meldo-tool.meldo-tool .m-wahl__pille { min-height: 40px; }
}

/* --- 4 Schalter -----------------------------------------------------------
   Die Beschriftung benennt die Sache und aendert sich nicht. Der Schieber
   sagt den Zustand. Ein gefuellter Knopf beantwortet nicht, ob er gerade an
   ist oder ob Druecken ihn anschaltet. */
.meldo-tool.meldo-tool .m-schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  color: var(--meldo-tinte);
  font-family: 'Funnel Sans', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  user-select: none;
}
.meldo-tool.meldo-tool .m-schalter__bahn {
  position: relative;
  width: 36px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--meldo-linie);
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .m-schalter__bahn::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--meldo-weiss);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .m-schalter.is-an .m-schalter__bahn { background: var(--meldo-teal); }
.meldo-tool.meldo-tool .m-schalter.is-an .m-schalter__bahn::after { transform: translateX(16px); }
.meldo-tool.meldo-tool .m-schalter input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* Der Schalter darf ein <label> mit Kontrollkaestchen sein oder ein
   <button role="switch" aria-checked>. Beides kommt vor; als Knopf muessen
   Rahmen, Fuellung und Polster weg, sonst steckt der Schieber in einem
   Knopf. */
.meldo-tool.meldo-tool button.m-schalter {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
  text-align: left;
}
.meldo-tool.meldo-tool button.m-schalter:hover {
  background: transparent;
  color: var(--meldo-teal);
  transform: none;
}
.meldo-tool.meldo-tool button.m-schalter[aria-checked="true"] .m-schalter__bahn { background: var(--meldo-teal); }
.meldo-tool.meldo-tool button.m-schalter[aria-checked="true"] .m-schalter__bahn::after { transform: translateX(16px); }
.meldo-tool.meldo-tool button.m-schalter:focus-visible {
  outline: none;
  box-shadow: none;
}
.meldo-tool.meldo-tool button.m-schalter:focus-visible .m-schalter__bahn {
  box-shadow: 0 0 0 3px rgba(0, 143, 137, 0.25);
}
.meldo-tool.meldo-tool .m-schalter[disabled],
.meldo-tool.meldo-tool .m-schalter:disabled { opacity: 0.45; cursor: default; }
.meldo-tool.meldo-tool .m-schalter input:focus-visible + .m-schalter__bahn {
  box-shadow: 0 0 0 3px rgba(0, 143, 137, 0.25);
}

/* --- 5 Symbolknopf --------------------------------------------------------
   Immer mit title und aria-label. Die dichte Form ist eine BENANNTE Ausnahme
   von den 44 Pixeln aus Abschnitt 11 - fuer gedraengte Werkzeugleisten am
   Rechner. Auf dem Handy waechst sie zurueck auf 44. */
.meldo-tool.meldo-tool .m-symbolknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--meldo-linie);
  border-radius: var(--meldo-rund-klein);
  background: var(--meldo-weiss);
  color: var(--meldo-gedaempft);
  cursor: pointer;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .m-symbolknopf:hover {
  background: var(--meldo-weiss);
  border-color: var(--meldo-teal);
  color: var(--meldo-teal);
}
.meldo-tool.meldo-tool .m-symbolknopf[disabled],
.meldo-tool.meldo-tool .m-symbolknopf:disabled { opacity: 0.35; cursor: default; }
.meldo-tool.meldo-tool .m-symbolknopf--dicht {
  width: 36px;
  height: 36px;
  border-color: transparent;
  box-shadow: none;
}
.meldo-tool.meldo-tool .m-symbolknopf--dicht:hover {
  background: var(--meldo-teal-hell);
  border-color: transparent;
  color: var(--meldo-teal);
}
@media (max-width: 640px) {
  .meldo-tool.meldo-tool .m-symbolknopf--dicht { width: 44px; height: 44px; }
}

/* --- 6 Feld ---------------------------------------------------------------
   Beschriftung DARUEBER, alle Felder einer Zeile gleich hoch. Das
   Auswahlfeld traegt seinen eigenen Pfeil, nicht den des Betriebssystems -
   sonst sieht dasselbe Feld auf dem Mac anders aus als auf Windows. */
.meldo-tool.meldo-tool .m-felder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: flex-end;
}
.meldo-tool.meldo-tool .m-feld {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 150px;
}
.meldo-tool.meldo-tool .m-feld__beschriftung {
  font-family: 'Funnel Sans', sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--meldo-grau);
}
.meldo-tool.meldo-tool .m-feld__auswahl,
.meldo-tool.meldo-tool .m-feld__eingabe {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 42px;
  padding: 0 0.75rem;
  border: 1.5px solid var(--meldo-linie);
  border-radius: var(--meldo-rund-klein);
  background: var(--meldo-weiss);
  color: var(--meldo-tinte);
  font-family: 'Funnel Sans', sans-serif;
  font-size: 0.92rem;
  transition: var(--meldo-uebergang);
}
.meldo-tool.meldo-tool .m-feld__eingabe { cursor: text; }
.meldo-tool.meldo-tool .m-feld__auswahl {
  padding-right: 2.1rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5658' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 17px;
}
.meldo-tool.meldo-tool .m-feld__auswahl:hover,
.meldo-tool.meldo-tool .m-feld__eingabe:hover { border-color: var(--meldo-teal); }
.meldo-tool.meldo-tool .m-feld__auswahl:focus,
.meldo-tool.meldo-tool .m-feld__eingabe:focus {
  outline: none;
  border-color: var(--meldo-teal);
  box-shadow: 0 0 0 3px rgba(0, 143, 137, 0.13);
}
.meldo-tool.meldo-tool .m-regler { accent-color: var(--meldo-teal); width: 100%; height: 42px; }

/* --- 7 Wiedergabe ---------------------------------------------------------
   EIN Knopf mit wechselndem Symbol, nicht zwei nebeneinander. Dreieck zum
   Starten, Quadrat zum Stoppen; waehrend es klingt, wird er zur Hauptaktion.
   Das Umschalten des Symbols macht das Werkzeug per innerHTML - textContent
   traegt kein Markup. */
.meldo-tool.meldo-tool .m-aktion--klang.laeuft {
  background: var(--meldo-teal);
  border-color: var(--meldo-teal);
  color: var(--meldo-weiss);
}
.meldo-tool.meldo-tool .m-aktion--klang.laeuft:hover {
  background: var(--meldo-teal-dunkel);
  border-color: var(--meldo-teal-dunkel);
  color: var(--meldo-weiss);
}

/* --- Symbole im Wortschatz ------------------------------------------------
   Wie `.btn-icon`: eine Huelle, kein Knopf. */
.meldo-tool.meldo-tool .m-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  line-height: 0;
}

/* Sichtbarer Tastaturfokus fuer den ganzen Wortschatz. */
.meldo-tool.meldo-tool .m-aktion:focus-visible,
.meldo-tool.meldo-tool .m-reiter__knopf:focus-visible,
.meldo-tool.meldo-tool .m-wahl__pille:focus-visible,
.meldo-tool.meldo-tool .m-symbolknopf:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 143, 137, 0.25);
}

/* ==========================================================================
   Zustandsnamen: `is-aktiv` UND `active` (ab 1.90.18)

   Die Werkzeuge schalten ihre Zustaende seit jeher mit `active`, und zwar an
   hunderten Stellen im Skript. Beim Umhaengen von Reitern habe ich diese
   Aufrufe mitgezogen - und dabei dreimal einen Selektor uebersehen, worauf
   die Reiter tot waren (Akkord-Atlas, Ukulele, Gitarre in 1.90.13/14).

   Die Lehre: Ein Skript umzubauen ist riskanter, als einen zweiten Namen
   zuzulassen. `is-aktiv` bleibt der Name der Wahl fuer Neues; `active` und
   `on` gelten daneben, aber NUR an den Klassen des Wortschatzes. An allem
   anderen bedeutet `active` weiterhin, was das Werkzeug will.
   ========================================================================== */
.meldo-tool.meldo-tool .m-reiter__knopf.active,
.meldo-tool.meldo-tool .m-reiter__knopf.on,
.meldo-tool.meldo-tool .m-reiter__knopf.active:hover,
.meldo-tool.meldo-tool .m-reiter__knopf.on:hover {
  background: var(--meldo-weiss);
  color: var(--meldo-teal);
  box-shadow: var(--meldo-karte);
}
.meldo-tool.meldo-tool .m-wahl__pille.active,
.meldo-tool.meldo-tool .m-wahl__pille.on {
  background: var(--meldo-teal);
  border-color: var(--meldo-teal);
  color: var(--meldo-weiss);
}
.meldo-tool.meldo-tool .m-wahl__pille.active:hover,
.meldo-tool.meldo-tool .m-wahl__pille.on:hover {
  background: var(--meldo-teal-dunkel);
  border-color: var(--meldo-teal-dunkel);
  color: var(--meldo-weiss);
}
.meldo-tool.meldo-tool .m-schalter.active .m-schalter__bahn,
.meldo-tool.meldo-tool .m-schalter.on .m-schalter__bahn { background: var(--meldo-teal); }
.meldo-tool.meldo-tool .m-schalter.active .m-schalter__bahn::after,
.meldo-tool.meldo-tool .m-schalter.on .m-schalter__bahn::after { transform: translateX(16px); }
.meldo-tool.meldo-tool .m-aktion.active,
.meldo-tool.meldo-tool .m-aktion.on {
  background: var(--meldo-teal);
  border-color: var(--meldo-teal);
  color: var(--meldo-weiss);
}
.meldo-tool.meldo-tool .m-aktion.active:hover,
.meldo-tool.meldo-tool .m-aktion.on:hover {
  background: var(--meldo-teal-dunkel);
  border-color: var(--meldo-teal-dunkel);
  color: var(--meldo-weiss);
}

/* ==========================================================================
   Keine zweite Bildlaufleiste (1.90.26)

   Zwoelf Werkzeuge setzen `body { min-height: 100vh }`. In einem iframe ist
   100vh die Hoehe des iframes selbst - das Werkzeug ist also immer genau so
   hoch wie sein Rahmen, egal wie wenig darin steht. Zusammen mit der
   Mindesthoehe des Rahmens ergab das leere Flaechen und, sobald der Inhalt
   doch groesser wurde, eine zweite Bildlaufleiste im Inneren.

   Im iframe gilt: Das Werkzeug ist so hoch wie sein Inhalt. Die Hoehe des
   Rahmens richtet sich danach, nicht umgekehrt.
   ========================================================================== */
body.meldo-tool.meldo-tool { min-height: 0; }

/* Im iframe scrollt nichts seitlich. Der Rahmen ist genau so breit wie die
   Seite es zulaesst; was darueber hinausragt, gehoert umgebrochen oder in
   einen eigenen Rollbereich, nicht in eine zweite Leiste am Fensterrand. */
body.meldo-tool.meldo-tool { overflow-x: hidden; }

/* ==========================================================================
   Auf dem Handy die ganze Breite (1.90.36)

   Der erste Anlauf nannte die Behaelter beim Namen (.wrap, .container,
   .meldo-tuner-app). Das trifft nur, was ich kenne - und jedes Werkzeug
   nennt seine Huellen anders. Deshalb hier ueber die STELLUNG statt ueber
   den Namen: die ersten beiden Ebenen unter dem Werkzeug verlieren ihren
   seitlichen Rand, ihre Kontur und ihre Rundung. Was darunter liegt, behaelt
   seine Form - die innerste Karte soll ja eine Karte bleiben.

   Hier steht !important, und das ist Absicht: Es geht gegen Polster, die in
   zwanzig Werkzeugen unterschiedlich heissen und teils inline gesetzt sind.
   Ausserhalb dieser Medienabfrage gilt es nicht.
   ========================================================================== */
@media (max-width: 640px) {
  body.meldo-tool.meldo-tool {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.meldo-tool.meldo-tool > * {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body.meldo-tool.meldo-tool > * > * {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  /* Karten tiefer im Aufbau bleiben Karten, nur schmaler gepolstert. */
  .meldo-tool.meldo-tool .card,
  .meldo-tool.meldo-tool .meldo-karte,
  .meldo-tool.meldo-tool .quiz-game,
  .meldo-tool.meldo-tool .quiz-visualizer,
  .meldo-tool.meldo-tool .tq-buehne,
  .meldo-tool.meldo-tool .mq-buehne {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    border-radius: 12px;
  }
}