/* morse-code.info - eigenes Design auf UIkit 3.
   Nur was UIkit nicht abdeckt: Farbwelt, Werkzeugflaeche, Tabellen, Druck.

   DUNKEL IST DIE VORGABE (seit 2026-08-31). Vorher war es hell, und dunkel
   kam nur, wenn das Betriebssystem danach fragte. Eine Seite ueber Funk und
   Morsezeichen sieht dunkel nach dem aus, was sie ist - und die
   Signalanzeigen, Wasserfaelle und blinkenden Lampen sind fuer einen dunklen
   Grund gebaut, nicht fuer einen weissen.

   ⚠️ Damit ueberstimmt die Seite eine Systemeinstellung auf "hell". Das ist
   Absicht und nicht selbstverstaendlich: wer es anders will, waehlt es im
   Kopf, und die Wahl bleibt gespeichert. Soll die Systemvorgabe wieder
   gewinnen, genuegt die Media-Query weiter unten. */

:root {
  --mc-akzent:      #f2a417;
  /* Akzentfarbe fuer TEXT AUF DER SEITE - hell, damit sie auf dunklem
     Grund lesbar ist. */
  --mc-akzent-text: #f5b544;
  /* ⚠️ Und die Gegenrichtung: Text AUF einer orangefarbenen Flaeche.
     Bis zum 2026-08-31 gab es nur eine Variable fuer beides. Als die dunkle
     Ansicht Vorgabe wurde, wechselte sie auf Hellorange - und der Knopf
     "Heute mitmachen" stand mit Kontrast 1,15 da, hellorange auf orange,
     praktisch unsichtbar. Aufgefallen ist es auf einem Handy, nicht im
     Test. Zwei Aufgaben, zwei Variablen. */
  --mc-auf-akzent:  #101c26;
  --mc-kopf:        #101c26;
  --mc-kopf2:       #172936;

  --mc-seite:   #0e1820;
  --mc-flaeche: #16232d;
  --mc-gedimmt: #1b2a35;
  --mc-linie:   #2b3d4b;
  /* ⚠️ Bewusst kein reines Weiss. #ffffff braechte Kontrast 17,95 statt
     15,93 - gewonnen ist damit nichts, denn schon 7,0 gilt als hoechste
     Stufe. Dafuer blueht reines Weiss auf dunklem Grund aus (Halation): die
     Buchstaben wirken unscharf und die Zeile flimmert, besonders bei
     Hornhautverkruemmung. Ein gebrochenes Weiss liest sich auf Dauer
     ruhiger, und Dauer ist hier der Fall - die Ratgeberseiten sind lang. */
  --mc-text:    #edf2f7;
  --mc-grau:    #a6b7c4;
  --mc-schatten: rgba(0, 0, 0, .4);
}

/* Auszeichnung im Fliesstext: aufrecht und in der Textfarbe.
   UIkit faerbt <em> rot (#f0506e), und der Browser stellt es zusaetzlich
   kursiv - beides ist hier unerwuenscht. Betonung laeuft ueber die
   Schriftstaerke, damit sie ohne Schraeglage und ohne Signalfarbe auskommt. */
em, i, cite, q, dfn, address {
  font-style: normal;
  color: inherit;
}
em, i {
  font-weight: 600;
}

/* Es gibt nur noch EINE Ansicht.
   Bis zum 2026-08-31 standen hier zwei Farbwelten und ein Umschalter im
   Kopf; der dunkle Block sogar zweimal wortgleich, einmal fuer die
   Systemvorgabe und einmal fuer die ausdrueckliche Wahl. Zwei Kopien
   derselben acht Farben laufen frueher oder spaeter auseinander.

   Die hellen Farben leben weiter an genau zwei Stellen, und beide sind
   begruendet:
     - @media print, weil der Browser Hintergruende nicht mitdruckt und die
       Arbeitsblaetter zum Ausdrucken gemacht sind
     - assets/css/embed.css, weil das Widget auf fremden Seiten sitzt und
       sich per ?theme= nach dem Gastgeber richtet */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--mc-text);
  background: var(--mc-seite);
}

.mc-skip { position: absolute; left: -9999px; }
.mc-skip:focus {
  left: 1rem; top: 1rem; z-index: 1200;
  background: var(--mc-akzent); color: #101c26;
  padding: .5rem 1rem; border-radius: 4px;
}

/* ---------- Kopf ---------- */

/* ⚠️ Hier stand ein 3 px breiter Balken in Akzentfarbe unter dem ganzen
   Kopf. Er war statisch - nachgemessen, animation: none - wirkte aber wie
   ein Vorlagen-Element, wie es jede zweite fertige Seite traegt. Eine
   duenne Linie in der Trennfarbe reicht: sie setzt den Kopf ab, ohne eine
   Ansage zu machen. */
.mc-kopf { background: var(--mc-kopf); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mc-kopf .uk-navbar-nav > li > a,
.mc-kopf .uk-navbar-item,
.mc-kopf .uk-navbar-toggle {
  color: #dbe4ec;
  min-height: 62px;
  font-size: .95rem;
}
.mc-kopf .uk-navbar-nav > li > a:hover,
.mc-kopf .uk-navbar-nav > li.uk-active > a { color: var(--mc-akzent); }

/* Die Menuezeile.
   Etwas heller als die Leiste darueber, damit die beiden Zeilen als zwei
   Ebenen lesbar sind und nicht als ein hoher schwarzer Block. */
.mc-menueleiste {
  background: var(--mc-kopf2);
  border-top: 1px solid rgba(255, 255, 255, .07);
}
/* Gemischte Schreibung statt Grossbuchstaben.
   UIkit setzt Navigationspunkte in Versalien. Bei sechs kurzen Woertern ging
   das durch, bei sieben laengeren nicht mehr: Versalien nehmen jedem Wort
   seine Silhouette - "Nachschlagen" und "Simulieren" sind als NACHSCHLAGEN
   und SIMULIEREN zwei gleich hohe Balken, und das Auge muss buchstabieren
   statt zu erkennen. Mit Ober- und Unterlaengen, etwas groesser und etwas
   fetter liest sich dieselbe Zeile auf einen Blick. */
.mc-menueleiste .uk-navbar-nav > li > a {
  min-height: 46px;
  padding: 0 14px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: #e9f0f6;
}
.mc-menueleiste .uk-navbar-nav > li > a:hover,
.mc-menueleiste .uk-navbar-nav > li > a[aria-expanded="true"] { color: var(--mc-akzent); }
.mc-menueleiste .uk-navbar-nav > li:first-child > a { padding-left: 0; }
/* Zwischen 960 und 1200 wird es eng.
   Gemessen: die sieben Punkte brauchen bei 1280px Container rund 1025px. Bei
   960px Fensterbreite hat der Container nur 900px - ohne diese Stufe braeche
   die Zeile genau dort um, wo das Klappmenue gerade erst erscheint. Enger,
   nicht kleiner geschrieben: die Wortform bleibt erhalten. */
@media (min-width: 960px) and (max-width: 1199px) {
  .mc-menueleiste .uk-navbar-nav > li > a { padding: 0 7px; font-size: .85rem; }
}
/* Kein Umbruch in zwei Zeilen. Faellt trotzdem einmal ein Wort laenger aus
   als gerechnet, soll es enger stehen und nicht die Leiste verdoppeln. */
.mc-menueleiste .uk-navbar-nav { flex-wrap: nowrap; }
/* Der offene Punkt bekommt einen Strich, nicht nur eine andere Farbe: bei
   sieben Gruppen ist Farbe allein zu leise, und Farbe allein ist ohnehin
   kein Merkmal, auf das sich jeder verlassen kann. */
.mc-menueleiste .uk-navbar-nav > li.uk-active > a {
  color: var(--mc-akzent);
  box-shadow: inset 0 -3px 0 var(--mc-akzent);
}

/* Die Klappe.
   UIkit faerbt sie hell; hier steht sie unter einer dunklen Leiste, und ein
   weisser Kasten mit dunklem Rand darueber saehe aus wie ein Fremdkoerper.
   Sie uebernimmt deshalb die Flaechenfarbe der Seite. */
.mc-nav-klappe {
  background: var(--mc-flaeche);
  border: 1px solid var(--mc-linie);
  border-top: 3px solid var(--mc-akzent);
  box-shadow: 0 8px 24px var(--mc-schatten);
  padding: 1rem 1.4rem 1.2rem;
  /* UIkits Grundbreite von 200px laesst "Amerikanischer Morsecode" auf zwei
     Zeilen umbrechen - gemessen. Ein umgebrochener Menuepunkt sieht aus wie
     zwei. */
  min-width: 16rem;
}
.mc-nav-klappe .uk-nav-header {
  color: var(--mc-grau);
  font-size: .74rem; letter-spacing: .09em;
  padding-bottom: .4rem; margin-bottom: .35rem;
  border-bottom: 1px solid var(--mc-linie);
}
/* Eine verlinkte Spaltenueberschrift muss aussehen wie eine unverlinkte.
   Seit "Gestalten" auf seine Hubseite zeigt, greift sonst die Regel fuer
   Menuepunkte darunter (groesser, dunkler, ohne Sperrung) - im Screenshot
   stand "Gestalten" dann als einzige der vier Spalten in einer anderen
   Schrift da. Die Ueberschrift bleibt Ueberschrift, der Link zeigt sich
   erst beim Darauffahren.

   ⚠️ Der Selektor muss die Liste MITNEHMEN (.uk-navbar-dropdown-nav > li).
   Ohne sie hat er zwei Klassen und ein Element und verliert gegen die Regel
   fuer die Menuepunkte, die zwei Klassen und zwei Elemente hat - der erste
   Anlauf sah im Quelltext richtig aus und aenderte nichts. */
.mc-nav-klappe .uk-navbar-dropdown-nav > li.uk-nav-header > a {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
  padding: 0;
}
.mc-nav-klappe .uk-navbar-dropdown-nav > li.uk-nav-header > a:hover {
  color: var(--mc-akzent-text);
}

.mc-nav-klappe .uk-navbar-dropdown-nav > li > a {
  color: var(--mc-text);
  font-size: .94rem;
  /* Vorher .16rem: die Zeilen standen so dicht, dass sie als Block gelesen
     wurden statt als einzelne Ziele. */
  padding: .28rem 0;
  text-transform: none;
}
.mc-nav-klappe .uk-navbar-dropdown-nav > li > a:hover,
.mc-nav-klappe .uk-navbar-dropdown-nav > li.uk-active > a { color: var(--mc-akzent-text); }
.mc-nav-alle {
  margin: .9rem 0 0; padding-top: .7rem;
  border-top: 1px solid var(--mc-linie);
  font-size: .88rem;
}
.mc-nav-alle a { color: var(--mc-akzent-text); font-weight: 600; }

/* In der Schublade dienen die Bereichsnamen als Zwischenzeilen. Ohne eigene
   Farbe waeren sie von den Links darunter nicht zu unterscheiden. */
#mc-menue .uk-nav-sub .uk-nav-header {
  color: var(--mc-grau);
  font-size: .7rem; letter-spacing: .09em;
  padding: .7rem 0 .2rem;
}
#mc-menue .uk-nav-sub > li:first-child .uk-nav-header { padding-top: .2rem; }
#mc-menue .uk-nav > li.uk-parent > a { display: flex; justify-content: space-between; align-items: center; }
.mc-menue-pfeil { transition: transform .2s ease; }
#mc-menue .uk-nav > li.uk-open > a .mc-menue-pfeil { transform: rotate(180deg); }

.mc-logo {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  line-height: 1.15; text-transform: none;
  padding-top: .3rem; padding-bottom: .3rem;
}
.mc-logo-zeichen {
  color: var(--mc-akzent);
  font-size: .62rem; letter-spacing: .18em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.mc-logo-text { color: #fff; font-size: 1.18rem; font-weight: 700; }
.mc-logo-tld { color: #7d8f9d; font-weight: 400; }


.mc-sprachknopf { color: #dbe4ec; text-transform: none; }
.mc-sprachknopf:hover { color: var(--mc-akzent); }

/* ---------- Kopfbereich der Seite ---------- */

.mc-hero {
  background: linear-gradient(180deg, var(--mc-kopf) 0%, var(--mc-kopf2) 100%);
  color: #fff;
  padding: 2.2rem 0 2.6rem;
}
.mc-brotkrumen { font-size: .82rem; color: #93a5b3; margin-bottom: .6rem; }
.mc-brotkrumen a { color: #93a5b3; }
.mc-brotkrumen a:hover { color: var(--mc-akzent); }
.mc-brotkrumen span[aria-hidden] { margin: 0 .4rem; }
.mc-h1 {
  color: #fff; font-weight: 700; line-height: 1.18;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  margin: 0 0 .5rem;
}
/* ⚠️ Der Vorspann hatte als einziger eine fest eingetragene Farbe statt
   einer Variablen - beim Aufhellen der Seite waere er als einziger
   zurueckgeblieben. */
.mc-lead { color: #ccd8e2; font-size: 1.06rem; max-width: 62ch; margin: 0; }
.mc-lead a { color: var(--mc-akzent); }

/* ---------- Werkzeugflaeche ---------- */

.mc-werkzeug { margin-top: -1.8rem; }
.mc-tool-karte {
  background: var(--mc-flaeche);
  color: var(--mc-text);
  /* Akzentseite eckig: der Streifen laeuft gerade durch und biegt nicht in
     die Rundung ein. Gebogen sieht er nach Plastik aus, gerade nach Kante. */
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 26px var(--mc-schatten);
  border-top: 4px solid var(--mc-akzent);
}
.mc-feld-titel {
  display: block;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--mc-grau);
  margin-bottom: .35rem;
}
.mc-textfeld {
  background: var(--mc-flaeche);
  color: var(--mc-text);
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  padding: .7rem .8rem;
  font-size: 1.05rem;
  resize: vertical;
}
.mc-textfeld:focus {
  background: var(--mc-flaeche);
  color: var(--mc-text);
  border-color: var(--mc-akzent);
  box-shadow: 0 0 0 3px rgba(242, 164, 23, .18);
}
.mc-textfeld::placeholder { color: var(--mc-grau); opacity: .75; }
.mc-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .06em;
}
.mc-feld-fuss { display: flex; gap: 1rem; padding-top: .35rem; }
.mc-mini { font-size: .8rem; color: var(--mc-grau); text-transform: none; }
.mc-mini:hover { color: var(--mc-akzent-text); }

.mc-steuerung {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .7rem 1.1rem;
  margin-top: 1.2rem; padding-top: 1.1rem;
  border-top: 1px solid var(--mc-linie);
}
/* ⚠️ Der Selektor nennt den Link ausdruecklich mit.
   `.mc-knopf-haupt` allein hat eine Klasse; `.mc-text a` hat eine Klasse und
   ein Element und gewinnt damit. Ein Hauptknopf, der in einem Textblock
   steht - und das tun mehrere -, bekam deshalb die Linkfarbe statt seiner
   eigenen. Im Quelltext sah die Regel darueber richtig aus. */
.mc-knopf-haupt,
.mc-text a.mc-knopf-haupt,
a.mc-knopf-haupt {
  background: var(--mc-akzent); color: var(--mc-auf-akzent);
  font-weight: 700; border-radius: 6px; text-transform: none;
  /* Ein Knopf wird nicht unterstrichen. Als Link im Fliesstext bekam er die
     Auszeichnung der Textlinks mit - auf dem Handy sah "Heute mitmachen"
     dadurch aus wie ein Link auf einem orangefarbenen Kasten. */
  text-decoration: none;
}
.mc-knopf-haupt:hover,
.mc-text a.mc-knopf-haupt:hover,
a.mc-knopf-haupt:hover { background: #d98f06; color: var(--mc-auf-akzent); }
.mc-knopf-haupt.mc-laeuft { background: #d0454b; color: #fff; }
/* Auswahlfelder und Eingaben.
   ⚠️ UIkit gestaltet sie hell: weisse Flaeche, grauer Text. Auf einer
   dunklen Seite standen sie als grelle weisse Kaesten da - auf dem Handy
   war das der auffaelligste Fehler der ganzen Seite. Gemessen: vier
   Auswahlfelder allein auf der Challenge-Seite, alle rgb(255,255,255).

   `color-scheme: dark` sagt zusaetzlich dem BROWSER Bescheid: davon haengt
   ab, wie er die aufgeklappte Liste und den kleinen Pfeil zeichnet, und die
   erreicht keine eigene Regel. */
.uk-select, .uk-input, .uk-textarea {
  background-color: var(--mc-flaeche);
  color: var(--mc-text);
  border-color: var(--mc-linie);
  color-scheme: dark;
}
.uk-select:focus, .uk-input:focus, .uk-textarea:focus {
  background-color: var(--mc-flaeche);
  color: var(--mc-text);
  border-color: var(--mc-akzent);
}
.uk-select option { background-color: var(--mc-flaeche); color: var(--mc-text); }

/* UIkits Primaerknopf traegt Blau - eine Farbe, die auf dieser Seite sonst
   nirgends vorkommt. Der Notausgang der 404-Seite benutzte ihn, mit
   hellorangem Text darauf (Kontrast 2,0). Er benutzt jetzt mc-knopf-haupt
   wie alle anderen; diese Regel bleibt als Netz, falls die Klasse irgendwo
   wieder auftaucht - mit dem Link im Selektor, sonst schlaegt sie `.mc-text
   a` nicht. */
.uk-button-primary,
a.uk-button-primary,
.mc-text a.uk-button-primary,
.uk-button-primary:hover,
a.uk-button-primary:hover,
.mc-text a.uk-button-primary:hover {
  background-color: var(--mc-akzent);
  color: var(--mc-auf-akzent);
}

.mc-knopf {
  border-radius: 6px; text-transform: none;
  border: 1px solid var(--mc-linie);
  background: var(--mc-flaeche);
  color: var(--mc-text);
}
.mc-knopf:hover { background: var(--mc-gedimmt); color: var(--mc-text); }
.mc-knopf.mc-aktiv {
  border-color: var(--mc-akzent);
  color: var(--mc-akzent-text);
  background: rgba(242, 164, 23, .12);
}
.mc-regler { min-width: 190px; flex: 1 1 190px; }
.mc-regler label { display: block; font-size: .78rem; color: var(--mc-grau); margin-bottom: .2rem; }
.mc-reglerhinweis { margin: .3rem 0 0; font-size: .78rem; }
.mc-hinweis { margin: .9rem 0 0; }

/* Fortgeschrittenes bleibt eingeklappt, bis es jemand aufmacht (Briefing 53). */
.mc-erweitert {
  margin-top: 1rem;
  border-top: 1px solid var(--mc-linie);
  padding-top: .8rem;
}
.mc-erweitert > summary {
  cursor: pointer;
  font-size: .85rem; font-weight: 600;
  color: var(--mc-grau);
  list-style-position: inside;
}
.mc-erweitert > summary:hover { color: var(--mc-akzent-text); }
.mc-erweitert-inhalt {
  display: flex; flex-wrap: wrap; gap: 1rem 1.6rem;
  margin-top: .9rem;
}
.mc-timingfeld { min-width: 220px; flex: 1 1 220px; }
.mc-timingfeld output { display: block; font-size: .95rem; color: var(--mc-akzent-text); }

.mc-warnung {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: .9rem 0 0;
  padding: .7rem .9rem;
  background: rgba(208, 69, 75, .1);
  border-left: 4px solid #d0454b;
  border-radius: 0 6px 6px 0;
  font-size: .88rem;
}

/* ---------- Konto ---------- */

.mc-k-stand { font-weight: 600; margin-bottom: 1rem; }
.mc-k-name { margin-bottom: 1rem; }
.mc-k-spitzname {
  margin: .2rem 0 0;
  font-size: 1.8rem; font-weight: 700; letter-spacing: .06em;
  color: var(--mc-akzent-text);
}
.mc-k-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
  margin-bottom: .9rem;
}
.mc-k-zeile label { font-size: .85rem; color: var(--mc-grau); }
.mc-k-feld { max-width: 16rem; }
.mc-k-kurz { max-width: 5rem; text-transform: uppercase; }
.mc-k-haken { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 1rem; }
.mc-k-import { cursor: pointer; }
.mc-k-gefahr { border-color: #d0454b; color: #d0454b; }
.mc-k-gefahr:hover { background: rgba(208, 69, 75, .08); color: #d0454b; }
.mc-k-meldung { min-height: 1.5em; margin: 1rem 0 .3rem; font-weight: 600; }
.mc-k-gut { color: #3f9c5a; }
.mc-k-schlecht { color: #d0454b; }
.mc-k-mail { font-weight: 600; }
.mc-k-abo { margin: 1rem 0; }
.mc-k-planstand { margin: .2rem 0 .8rem; font-weight: 600; }

/* ---------- Klangbibliothek ---------- */

.mc-kl-regler {
  display: grid; gap: .8rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-bottom: 1.4rem;
}
.mc-kl-regler label { display: block; }
.mc-kl-regler output { font-weight: 700; font-variant-numeric: tabular-nums; }

.mc-kl-liste { list-style: none; margin: 0; padding: 0; }
.mc-kl-liste li {
  padding: .9rem 0;
  border-bottom: 1px solid var(--mc-linie);
}
.mc-kl-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .3rem 1rem;
}
.mc-kl-probe {
  margin: .35rem 0 .6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9rem; color: var(--mc-grau);
  overflow-wrap: anywhere;
}
.mc-kl-laeuft {
  background: var(--mc-akzent); border-color: var(--mc-akzent); color: #1b1b1b;
}
.mc-kl-meldung { min-height: 1.5em; margin: 1rem 0 .3rem; font-weight: 600; }
.mc-kl-gut { color: #3f9c5a; }

/* ---------- Experten-Analyse ---------- */

.mc-an-quelle {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  margin-bottom: 1.2rem;
}
.mc-an-waehlen { cursor: pointer; }
.mc-an-ueberschrift { font-size: 1rem; margin: 1.2rem 0 .5rem; }
.mc-an-leinwand {
  display: block; width: 100%;
  border-radius: 6px; background: var(--mc-gedimmt);
}
.mc-an-regler {
  display: grid; gap: .8rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: end;
  margin: 1rem 0 1.2rem;
}
.mc-an-regler label { display: block; }
.mc-an-regler output { font-weight: 700; font-variant-numeric: tabular-nums; }

.mc-an-zahlen {
  display: grid; gap: .8rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  padding: .9rem 1rem; margin-bottom: 1rem;
  border-radius: 8px; background: var(--mc-gedimmt);
}
.mc-an-kachel strong { display: block; margin-top: .15rem; font-size: 1.05rem; }

.mc-an-morse {
  min-height: 1.6em; margin: 0 0 .3rem;
  font-size: 1.05rem; letter-spacing: .1em; word-break: break-all;
}
.mc-an-text {
  margin: 0 0 1rem;
  font-size: 1.3rem; font-weight: 700; letter-spacing: .08em;
  color: var(--mc-akzent-text);
}

.mc-an-tabelle-huelle { max-height: 24rem; overflow: auto; }
.mc-tool-karte .mc-an-tabelle { font-variant-numeric: tabular-nums; margin: 0; }
.mc-an-tabelle .mc-an-krumm td {
  background: var(--mc-gedimmt);
  box-shadow: inset 3px 0 0 #d0454b;
}
.mc-an-meldung { min-height: 1.5em; margin: .6rem 0; font-weight: 600; }
.mc-an-fehler { color: #d0454b; }

/* ---------- Bild lesen und Tattoo pruefen ---------- */

.mc-bi-warnung {
  padding: .8rem 1rem; margin-bottom: 1.2rem;
  border-radius: 0 6px 6px 0;
  border-left: 3px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
  font-size: .92rem;
}
.mc-bi-quelle {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  margin-bottom: 1rem;
}
.mc-bi-waehlen { cursor: pointer; }

.mc-bi-buehne {
  margin-bottom: 1rem; padding: .5rem;
  border-radius: 8px; background: var(--mc-gedimmt);
  overflow-x: auto;
}
.mc-bi-leinwand { display: block; max-width: 100%; height: auto; }

.mc-bi-regler {
  display: grid; gap: .8rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-items: end;
  margin-bottom: 1.2rem;
}
.mc-bi-regler label { display: block; }
.mc-bi-regler output { font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-bi-haken { display: flex; align-items: center; gap: .5rem; }

.mc-bi-morse {
  min-height: 1.6em; margin: 0 0 .3rem;
  font-size: 1.1rem; letter-spacing: .1em; word-break: break-all;
}
.mc-bi-text {
  margin: 0 0 .3rem;
  font-size: 1.4rem; font-weight: 700; letter-spacing: .08em;
  color: var(--mc-akzent-text);
}

.mc-bi-zeile-eingabe {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-bottom: .8rem;
}
.mc-bi-zeile-eingabe label { font-size: .85rem; color: var(--mc-grau); }
.mc-tool-karte .mc-bi-feld {
  flex: 1 1 10rem; max-width: 18rem; text-transform: uppercase;
}

.mc-bi-urteil { min-height: 1.5em; margin: .6rem 0; font-weight: 600; }
.mc-bi-meldung { min-height: 1.5em; margin: .6rem 0; font-weight: 600; }
.mc-bi-gut { color: #3f9c5a; }
.mc-bi-fehler { color: #d0454b; }

.mc-bi-abweichungen { list-style: none; margin: 0; padding: 0; }
.mc-bi-abweichungen li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem;
  padding: .3rem .55rem; margin-bottom: .2rem;
  border-radius: 0 5px 5px 0; border-left: 3px solid #d0454b;
  background: var(--mc-gedimmt);
}
.mc-bi-nummer {
  min-width: 1.6rem; font-weight: 700; color: var(--mc-grau);
  font-variant-numeric: tabular-nums;
}
.mc-bi-gefunden { color: #d0454b; }

/* ---------- Explore: Zeitleiste, Titanic, Nachrichten ---------- */

.mc-ex-filter {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  margin-bottom: 1.2rem;
}
.mc-ex-filterknopf {
  padding: .3rem .7rem;
  border: 1px solid var(--mc-linie); border-radius: 999px;
  background: none; color: inherit; cursor: pointer;
  font-size: .85rem;
}
.mc-ex-filterknopf:hover { border-color: var(--mc-akzent); }
.mc-ex-filterknopf.mc-ex-gewaehlt {
  background: var(--mc-akzent); border-color: var(--mc-akzent); color: #1b1b1b;
  font-weight: 600;
}

.mc-ex-warnung {
  padding: .8rem 1rem; margin-bottom: 1.4rem;
  border-radius: 0 6px 6px 0;
  border-left: 3px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
  font-size: .92rem;
}

.mc-ex-liste { list-style: none; margin: 0; padding: 0; }
.mc-ex-eintrag {
  display: grid; gap: .2rem 1rem;
  grid-template-columns: 4.5rem 1fr;
  padding: .9rem 0;
  border-bottom: 1px solid var(--mc-linie);
}
.mc-ex-marke {
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--mc-akzent-text);
}
.mc-ex-titel { display: block; margin-bottom: .25rem; }
.mc-ex-text { margin: 0; }

.mc-ex-signal {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
  margin: .3rem 0 .5rem;
}
.mc-ex-klartext { font-weight: 700; letter-spacing: .06em; }
.mc-ex-hoeren {
  padding: .15rem .6rem;
  border: 1px solid var(--mc-linie); border-radius: 999px;
  background: none; color: inherit; cursor: pointer; font-size: .8rem;
}
.mc-ex-hoeren:hover { border-color: var(--mc-akzent); }
.mc-ex-hoeren.mc-ex-laeuft {
  background: var(--mc-akzent); border-color: var(--mc-akzent); color: #1b1b1b;
}

.mc-ex-fuss {
  display: flex; flex-wrap: wrap; gap: .3rem .8rem;
  margin: .45rem 0 0; font-size: .82rem;
}
.mc-ex-quelle { color: var(--mc-grau); }
.mc-ex-umstritten, .mc-ex-belegart {
  padding: .05rem .5rem;
  border-radius: 0 4px 4px 0; border-left: 3px solid var(--mc-akzent);
  background: var(--mc-gedimmt); color: var(--mc-grau);
}

.mc-ex-quellenliste {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  margin: 1rem 0 0; font-size: .82rem; color: var(--mc-grau);
}

@media (max-width: 480px) {
  .mc-ex-eintrag { grid-template-columns: 1fr; }
}

/* ---------- Pileup ---------- */

.mc-pu-felder, .mc-ct-felder {
  display: grid; gap: .8rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-bottom: .8rem;
}
.mc-pu-felder label, .mc-ct-felder label { display: block; }
.mc-pu-felder output { font-weight: 700; font-variant-numeric: tabular-nums; }

.mc-pu-eingabezeile, .mc-ct-eingabezeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin: 1rem 0 .6rem;
}
.mc-pu-eingabezeile label, .mc-ct-eingabezeile label {
  font-size: .85rem; color: var(--mc-grau);
}
.mc-tool-karte .mc-pu-eingabe, .mc-tool-karte .mc-ct-eingabe {
  flex: 1 1 10rem; max-width: 16rem;
  font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase;
}

.mc-pu-meldung, .mc-ct-meldung { min-height: 1.5em; margin: .6rem 0; font-weight: 600; }
.mc-pu-gut, .mc-ct-gut { color: #3f9c5a; }
.mc-pu-fehler, .mc-ct-fehler { color: #d0454b; }
.mc-pu-fast { color: #b8860b; }

.mc-pu-stationen {
  list-style: none; margin: .6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem .5rem;
}
.mc-pu-stationen li {
  padding: .2rem .5rem;
  border-radius: 0 5px 5px 0; border-left: 3px solid transparent;
  background: var(--mc-gedimmt);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9rem;
}
.mc-pu-stationen .mc-pu-treffer { border-left-color: #3f9c5a; font-weight: 700; }
.mc-pu-stationen .mc-pu-leicht { border-left-color: var(--mc-akzent); }

.mc-pu-bilanz, .mc-ct-zahlen {
  display: grid; gap: .8rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  padding: .9rem 1rem; margin-bottom: 1rem;
  border-radius: 8px; background: var(--mc-gedimmt);
}
.mc-pu-kachel strong, .mc-ct-kachel strong {
  display: block; margin-top: .15rem; font-size: 1.05rem;
}

/* ---------- Contest ---------- */

.mc-ct-kopf {
  display: grid; gap: .6rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  padding: .8rem 1rem; margin-bottom: 1rem;
  border-radius: 8px; background: var(--mc-gedimmt);
}
.mc-ct-kopf strong { display: block; margin-top: .15rem; font-size: 1.15rem; }
.mc-ct-uhr { font-variant-numeric: tabular-nums; color: var(--mc-akzent-text); }

.mc-ct-log { list-style: none; margin: 0; padding: 0; }
.mc-ct-log li {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .25rem .5rem; margin-bottom: .2rem;
  border-radius: 0 5px 5px 0; border-left: 3px solid transparent;
  background: var(--mc-gedimmt);
}
.mc-ct-log .mc-ct-richtig { border-left-color: #3f9c5a; }
.mc-ct-log .mc-ct-falsch { border-left-color: #d0454b; }
.mc-ct-getippt { font-size: .85rem; color: #d0454b; }

/* ---------- Bandbedingungen ---------- */

.mc-bd-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin-bottom: 1.2rem;
}
.mc-bd-zeile label { font-size: .85rem; color: var(--mc-grau); }
.mc-bd-feld { max-width: 20rem; }
.mc-bd-regler { max-width: 12rem; }
.mc-bd-zeile output { font-weight: 700; font-variant-numeric: tabular-nums; }

.mc-bd-liste { list-style: none; margin: 0 0 1rem; padding: 0; }
.mc-bd-liste li {
  display: grid; gap: .2rem .9rem; align-items: center;
  grid-template-columns: minmax(11rem, 16rem) 1fr;
  padding: .3rem 0;
  border-bottom: 1px solid var(--mc-linie);
}
.mc-bd-knopf {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; padding: .5rem .7rem;
  border: 1px solid var(--mc-linie); border-radius: 0 6px 6px 0;
  border-left: 3px solid transparent;
  background: none; color: inherit; text-align: left; cursor: pointer;
}
.mc-bd-knopf:hover { border-left-color: var(--mc-akzent); }
.mc-bd-knopf.mc-bd-aktiv {
  border-left-color: var(--mc-akzent);
  background: var(--mc-gedimmt);
}
.mc-bd-name { flex: 1 1 auto; font-weight: 600; }
.mc-bd-balken {
  flex: 0 0 4rem; height: 5px; border-radius: 3px;
  background: var(--mc-gedimmt); overflow: hidden;
}
.mc-bd-fuellung { display: block; height: 100%; background: var(--mc-akzent); }
.mc-bd-wozu { font-size: .9rem; color: var(--mc-grau); }
.mc-bd-meldung { min-height: 1.5em; margin: .6rem 0; font-weight: 600; }

/* ---------- Key Lab ---------- */

.mc-ky-felder {
  display: grid; gap: .8rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: .8rem;
}
.mc-ky-felder label { display: block; }
.mc-ky-felder output { font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-ky-erklaerung { min-height: 2.6em; margin: 0 0 1.2rem; }

.mc-ky-paddles {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr 1fr;
  max-width: 30rem; margin: 0 auto 1.2rem;
}
.mc-ky-paddle {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: 1.6rem .8rem;
  border: 2px solid var(--mc-linie); border-radius: 10px;
  background: var(--mc-gedimmt); color: inherit;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  transition: background .08s ease, border-color .08s ease;
}
.mc-ky-paddle:hover { border-color: var(--mc-akzent); }
.mc-ky-paddle.mc-ky-aktiv {
  background: var(--mc-akzent); border-color: var(--mc-akzent);
  color: #1b1b1b;
}
.mc-ky-zeichen { font-size: 2rem; line-height: 1; }
.mc-ky-taste { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }

.mc-ky-ausgabe {
  min-height: 1.8em; margin: 0 0 .3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.3rem; letter-spacing: .12em;
  word-break: break-all;
}
.mc-ky-klartext {
  min-height: 1.6em; margin: 0 0 1rem;
  font-weight: 700; letter-spacing: .1em;
  color: var(--mc-akzent-text);
}

.mc-ky-ueberschrift { font-size: 1.1rem; margin: 0 0 .9rem; }
.mc-ky-zahlen {
  display: grid; gap: .8rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  padding: .9rem 1rem; margin-bottom: 1rem;
  border-radius: 8px; background: var(--mc-gedimmt);
}
.mc-ky-kachel strong { display: block; margin-top: .15rem; font-size: 1.05rem; }

/* ---------- CW-Coach ---------- */

.mc-co-kopf {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}
.mc-co-stufe {
  display: block; margin-top: .15rem;
  font-size: 1.6rem; font-weight: 700; line-height: 1.2;
  color: var(--mc-akzent-text);
}
.mc-co-kopf p { margin: .3rem 0 0; }
.mc-co-rat {
  flex: 1 1 20rem; max-width: 34rem;
  padding: .8rem 1rem;
  border-radius: 0 6px 6px 0;
  border-left: 3px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
}

.mc-co-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  margin-bottom: 1rem;
}
.mc-co-zeile label { font-size: .85rem; color: var(--mc-grau); }
.mc-co-regler { flex: 1 1 12rem; max-width: 20rem; }
.mc-co-zeile output { font-weight: 700; font-variant-numeric: tabular-nums; }

.mc-co-bloecke { list-style: none; margin: 0; padding: 0; }
.mc-co-bloecke li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem;
  padding: .5rem .2rem;
  border-bottom: 1px solid var(--mc-linie);
}
.mc-co-dauer {
  min-width: 4rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mc-akzent-text);
}
.mc-co-inhalt { flex: 1 1 12rem; }
.mc-co-link { font-size: .85rem; }

.mc-co-ueberschrift { font-size: 1.1rem; margin: 0 0 .9rem; }

.mc-co-zahlen {
  display: grid; gap: .8rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  padding: .9rem 1rem; margin-bottom: 1.4rem;
  border-radius: 8px; background: var(--mc-gedimmt);
}
.mc-co-kachel strong { display: block; margin-top: .15rem; font-size: 1.05rem; }

.mc-co-spalten {
  display: grid; gap: 1.2rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.mc-co-liste { list-style: none; margin: .4rem 0 0; padding: 0; }
.mc-co-liste li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .8rem; padding: .3rem 0;
  border-bottom: 1px solid var(--mc-linie);
}
.mc-co-nichts { color: var(--mc-grau); font-size: .9rem; }

/* ---------- Taegliche Challenge ---------- */

.mc-ch-stand { font-weight: 600; margin-bottom: 1rem; }

.mc-ch-kopf {
  display: grid; gap: .8rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  padding: .9rem 1rem; margin-bottom: 1.2rem;
  border-radius: 8px; background: var(--mc-gedimmt);
}
.mc-ch-kachel strong { display: block; margin-top: .15rem; font-size: 1.05rem; }
.mc-ch-art { color: var(--mc-akzent-text); }

.mc-ch-fortschritt { margin-bottom: 1rem; }
.mc-ch-balken {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--mc-gedimmt);
}
.mc-ch-balkenfuellung {
  height: 100%; width: 0;
  background: var(--mc-akzent);
  transition: width .25s ease;
}
.mc-ch-fortschritt p { margin: .4rem 0 0; }

.mc-ch-eingabezeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-bottom: .8rem;
}
.mc-ch-eingabezeile label { font-size: .85rem; color: var(--mc-grau); }
.mc-tool-karte .mc-ch-eingabe {
  flex: 1 1 12rem; max-width: 22rem;
  font-size: 1.4rem; letter-spacing: .12em; text-transform: uppercase;
}

.mc-ch-punkte { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.mc-ch-punktzahl {
  font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: var(--mc-akzent-text);
}

.mc-ch-loesung {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: .35rem .8rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.mc-ch-loesung li {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .3rem .55rem;
  /* Akzentseite eckig: die Rundung darf den farbigen Rand nicht mitnehmen,
     sonst sieht die Kante nach Schattenwurf aus. */
  border-radius: 0 6px 6px 0;
  border-left: 3px solid transparent;
  background: var(--mc-gedimmt);
}
.mc-ch-loesung .mc-ch-richtig { border-left-color: #3f9c5a; }
.mc-ch-loesung .mc-ch-falsch { border-left-color: #d0454b; }
.mc-ch-getippt { font-size: .85rem; color: #d0454b; }

.mc-ch-meldung { min-height: 1.5em; margin: 1rem 0 .3rem; font-weight: 600; }
.mc-ch-fehler { color: #d0454b; }

/* Ein Raster statt einer umbrechenden Zeile.
   Die Zeile war ein Flex-Container mit sechs eigenstaendigen Kindern - drei
   Beschriftungen und drei Felder, die unabhaengig voneinander umbrachen. Auf
   einem schmalen Schirm stand "Land" dann neben dem Klassen-Feld und
   beschriftete die falsche Auswahl. Jetzt umschliesst jede Beschriftung ihr
   Feld, und das Raster bricht als Ganzes um. */
.mc-ch-zeile {
  display: grid; gap: .8rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-bottom: .9rem;
}
.mc-ch-zeile label { display: block; }
.mc-ch-feld { width: 100%; max-width: 11rem; }

.mc-ch-ueberschrift { font-size: 1.1rem; margin: 0 0 .8rem; }
.mc-ch-kopfzeile {
  display: grid; align-items: baseline;
  grid-template-columns: 2.5rem 1fr 2.5rem auto;
  gap: .5rem;
  padding: .2rem .2rem .35rem;
  border-bottom: 2px solid var(--mc-linie);
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mc-grau);
}
.mc-ch-kopfzeile span:last-child { text-align: right; }

.mc-ch-tabelle { list-style: none; margin: 0; padding: 0; }
.mc-ch-tabelle li {
  display: grid; align-items: baseline;
  grid-template-columns: 2.5rem 1fr 2.5rem auto;
  gap: .5rem;
  padding: .35rem .2rem;
  border-bottom: 1px solid var(--mc-linie);
}
/* Die eigene Zeile. Akzentseite eckig, damit der Rand nicht in die
   Rundung biegt. */
.mc-ch-tabelle .mc-ch-du {
  padding-left: .5rem;
  border-radius: 0 5px 5px 0;
  border-left: 3px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
  font-weight: 700;
}
.mc-ch-eigenerplatz {
  margin: .6rem 0 0; padding: .45rem .7rem;
  border-radius: 0 5px 5px 0;
  border-left: 3px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
  font-weight: 600;
}
.mc-ch-platznr { color: var(--mc-grau); font-variant-numeric: tabular-nums; }
.mc-ch-name { font-weight: 600; letter-spacing: .04em; }
.mc-ch-namenlos { font-weight: 400; font-style: normal; color: var(--mc-grau); }
.mc-ch-land { color: var(--mc-grau); font-size: .85rem; }
.mc-ch-punkte-zelle { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Simulator ---------- */

.mc-sim-felder {
  display: grid; gap: .8rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-bottom: 1.2rem;
}
.mc-sim-felder label { display: block; }
.mc-sim-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--mc-linie);
  padding-bottom: .5rem; margin-bottom: 1rem;
}
.mc-sim-schritt { font-size: .8rem; letter-spacing: .08em; color: var(--mc-grau); }
.mc-sim-station { font-weight: 700; letter-spacing: .06em; color: var(--mc-akzent-text); }
.mc-sim-empfang {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem; margin-bottom: 1.2rem;
  border-radius: 8px; background: var(--mc-gedimmt);
  min-height: 5rem;
}
.mc-sim-lampe {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--mc-linie);
  transition: background .05s linear;
}
.mc-sim-hell { background: var(--mc-akzent); }
.mc-sim-mitschrift {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem; letter-spacing: .04em; word-break: break-word; color: var(--mc-text);
}
.mc-sim-eingabe {
  font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase;
  max-width: 20rem; margin-top: .3rem;
}
.mc-sim-rueckmeldung { min-height: 1.6em; margin: .6rem 0; font-weight: 600; }
.mc-sim-richtig { color: #3f9c5a; }
.mc-sim-falsch { color: #d0454b; }
.mc-sim-gezeigt { color: var(--mc-akzent-text); }
.mc-sim-punkte { text-align: center; margin: 1rem 0 .3rem; }
.mc-sim-punkte span {
  font-size: 3.4rem; font-weight: 700; line-height: 1;
  color: var(--mc-akzent-text);
}
.mc-sim-bilanz { text-align: center; margin: 0 0 1.4rem; }

/* ---------- Zeichen-Explorer ---------- */

.mc-ex-wahl { display: grid; gap: .8rem; margin-bottom: 1.4rem; }
.mc-ex-gruppe { display: flex; flex-wrap: wrap; gap: .3rem; }
.mc-ex-taste {
  min-width: 2.2rem; height: 2.2rem;
  border: 1px solid var(--mc-linie);
  border-radius: 5px;
  background: var(--mc-flaeche);
  color: var(--mc-text);
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.mc-ex-taste:hover { border-color: var(--mc-akzent); }
.mc-ex-aktiv { background: var(--mc-akzent); border-color: var(--mc-akzent); color: #16232d; }
.mc-ex-tafel { border-top: 1px solid var(--mc-linie); padding-top: 1.2rem; }
.mc-ex-kopf { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1rem; }
.mc-ex-zeichen { font-size: 3.6rem; font-weight: 700; line-height: 1; }
.mc-ex-code { margin: 0; font-size: 1.3rem; letter-spacing: .18em; color: var(--mc-akzent-text); }
.mc-ex-laut { margin: .1rem 0 0; color: var(--mc-grau); }
.mc-ex-spalten { display: grid; gap: 1.4rem; grid-template-columns: 1fr; margin-top: 1rem; }
@media (min-width: 640px) { .mc-ex-spalten { grid-template-columns: 1fr 1fr; } }
.mc-ex-elemente, .mc-ex-nachbarn { list-style: none; padding: 0; margin: .4rem 0 0; }
.mc-ex-element {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .3rem .6rem;
  margin-bottom: .25rem;
  border-radius: 0 4px 4px 0;
  border-left: 4px solid var(--mc-linie);
  background: var(--mc-gedimmt);
  font-size: .9rem;
}
.mc-ex-punkt { border-left-color: var(--mc-akzent); }
.mc-ex-strich { border-left-color: var(--mc-akzent-text); }
.mc-ex-nachbarn li { margin-bottom: .3rem; }
.mc-ex-nachbar {
  display: flex; align-items: baseline; gap: .6rem; width: 100%;
  padding: .3rem .6rem;
  border: 1px solid var(--mc-linie);
  border-radius: 5px;
  background: var(--mc-flaeche);
  color: var(--mc-text);
  cursor: pointer;
  text-align: left;
}
.mc-ex-nachbar:hover { border-color: var(--mc-akzent); }
.mc-ex-nachbar-zeichen { font-weight: 700; min-width: 1.2em; }
.mc-ex-nachbar-code { color: var(--mc-akzent-text); letter-spacing: .1em; font-size: .85rem; }
.mc-ex-nachbar-art { margin-left: auto; font-size: .78rem; color: var(--mc-grau); }
.mc-ex-eigene { margin-top: .6rem; }

/* ---------- Morsebaum ---------- */

.mc-baum-lauf { text-align: center; margin-bottom: .8rem; }
.mc-baum-pfad { margin: 0; font-size: 1.6rem; letter-spacing: .22em; color: var(--mc-akzent-text); min-height: 1.4em; }
.mc-baum-treffer { margin: .1rem 0 0; font-size: 2.2rem; font-weight: 700; line-height: 1.1; min-height: 1.2em; }
.mc-baum-nichts { font-size: 1rem; font-weight: 400; color: var(--mc-grau); }
.mc-baum-tasten .mc-baum-punkt, .mc-baum-tasten .mc-baum-strich { min-width: 8rem; }
.mc-baum-huelle { overflow-x: auto; margin-top: 1.2rem; }
.mc-baum { min-width: 640px; display: grid; gap: .3rem; }
.mc-baum-reihe { display: grid; grid-template-columns: repeat(var(--mc-spalten), 1fr); gap: .2rem; }
.mc-baum-feld {
  height: 2rem;
  border: 1px solid var(--mc-linie);
  border-radius: 4px;
  background: var(--mc-flaeche);
  color: var(--mc-text);
  font-weight: 600; font-size: .9rem;
  cursor: pointer;
  padding: 0;
}
.mc-baum-feld:hover:not(:disabled) { border-color: var(--mc-akzent); }
.mc-baum-leer { background: transparent; border-color: transparent; cursor: default; }
.mc-baum-weg { border-color: var(--mc-akzent); color: var(--mc-akzent-text); }
.mc-baum-aktiv { background: var(--mc-akzent); border-color: var(--mc-akzent); color: #16232d; }

/* ---------- Prüfer ---------- */

.mc-val-ergebnis { display: grid; gap: 1rem; margin: 1rem 0; }
.mc-val-text {
  margin: .2rem 0 0; padding: .7rem .9rem; min-height: 3em;
  border-radius: 6px; background: var(--mc-gedimmt);
  font-size: 1.15rem; word-break: break-word;
}
.mc-val-befunde { list-style: none; padding: 0; margin: 0; }
.mc-val-befunde li {
  padding: .45rem .8rem; margin-bottom: .3rem;
  border-radius: 0 6px 6px 0; font-size: .92rem;
}
.mc-val-gut { background: rgba(63, 156, 90, .12); border-left: 4px solid #3f9c5a; }
.mc-val-schlecht { background: rgba(208, 69, 75, .1); border-left: 4px solid #d0454b; }
.mc-val-hinweis { background: var(--mc-gedimmt); border-left: 4px solid var(--mc-akzent); }
.mc-val-deutungen { list-style: none; padding: 0; margin: .4rem 0 1rem; }
.mc-val-deutungen li {
  display: flex; align-items: center; gap: .8rem;
  padding: .35rem .6rem; margin-bottom: .25rem;
  border-radius: 5px; background: var(--mc-gedimmt);
}
.mc-val-deutung-text { font-weight: 700; min-width: 4rem; }
.mc-val-deutung-teile { font-size: .82rem; color: var(--mc-grau); letter-spacing: .1em; }

/* ---------- Labor ---------- */

.mc-pg-morse { margin: .6rem 0; letter-spacing: .12em; color: var(--mc-akzent-text); word-break: break-all; }
.mc-pg-bild { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 1.4rem; }
.mc-pg-grafik { flex: 1 1 auto; overflow-x: auto; }
.mc-pg-grafik svg { max-width: none; }
.mc-pg-lampe {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--mc-gedimmt); border: 1px solid var(--mc-linie);
  transition: background .05s linear;
}
.mc-pg-hell { background: var(--mc-akzent); border-color: var(--mc-akzent); }
.mc-pg-regler { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1rem; }
@media (min-width: 720px) { .mc-pg-regler { grid-template-columns: repeat(3, 1fr); } }

/* ---------- QSO-Baukasten ---------- */

.mc-qso-felder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .8rem 1rem;
  margin-bottom: 1.4rem;
}
.mc-qso-felder label { display: block; }
.mc-qso-verlauf { list-style: none; padding: 0; margin: 0 0 1.2rem; counter-reset: qso; }
.mc-qso-zeile {
  padding: .7rem .9rem;
  margin-bottom: .6rem;
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-linie);
  background: var(--mc-gedimmt);
  transition: border-color .2s;
}
.mc-qso-laeuft { border-left-color: var(--mc-akzent); }
.mc-qso-kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.mc-qso-marke {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--mc-grau);
}
.mc-qso-text { margin: .3rem 0 .15rem; font-weight: 600; word-break: break-word; }
.mc-qso-morse {
  margin: 0;
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--mc-grau);
  word-break: break-all;
}

/* ---------- RST ---------- */

.mc-rst-wahl { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mc-rst-feld { display: block; }
.mc-rst-auswahl { max-width: 7rem; }
.mc-rst-rapport {
  margin: .4rem 0 0;
  font-size: 3rem; font-weight: 700; line-height: 1;
  letter-spacing: .1em;
  color: var(--mc-akzent-text);
}
.mc-rst-morse { margin: .2rem 0 1rem; letter-spacing: .14em; color: var(--mc-grau); }
.mc-rst-bedeutung { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.mc-rst-bedeutung li { margin-bottom: .35rem; }
.mc-rst-marke {
  display: inline-block; min-width: 2.4em;
  font-weight: 700;
  color: var(--mc-akzent-text);
}
.mc-rst-tabelle th { width: 3.5rem; color: var(--mc-akzent-text); }
.mc-rst-tabelle td { color: var(--mc-text); }

/* Beispiele und Verwandtes in den Referenzlisten */
.mc-liste-beispiel { margin: .35rem 0 0; }
.mc-liste-probe {
  display: inline-block;
  margin-right: .4rem;
  padding: .1rem .45rem;
  border-radius: 0 4px 4px 0;
  border-left: 3px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem;
  letter-spacing: .04em;
}
.mc-liste-verwandt {
  margin: .3rem 0 0;
  font-size: .82rem;
  color: var(--mc-grau);
  letter-spacing: .06em;
}

/* ---------- Amerikanischer Morsecode ---------- */

/* ⚠️ .mc-tabelle ist ein Raster fuer Kacheln und darf hier nicht mit
   hinein - auf ein <table> gelegt zerlegt display:grid die Zeilen. */
.mc-tabelle-huelle { overflow-x: auto; margin-bottom: 1.6rem; }
.mc-am-richtung { display: block; }
.mc-am-auswahl { max-width: 22rem; }
.mc-am-tabelle td, .mc-am-tabelle th { vertical-align: middle; }
.mc-am-code {
  border: 0; background: none; padding: .15rem .3rem;
  border-radius: 4px;
  font-family: inherit; font-size: .95rem;
  letter-spacing: .16em;
  white-space: pre;
  color: var(--mc-akzent-text);
  cursor: pointer;
}
.mc-am-code:hover, .mc-am-code:focus-visible { background: var(--mc-gedimmt); }
.mc-am-intl { color: var(--mc-grau); letter-spacing: .12em; }
.mc-am-anders th[scope="row"] { position: relative; }
.mc-am-anders th[scope="row"]::before {
  content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px;
  width: 4px; border-radius: 0 2px 2px 0;
  background: var(--mc-akzent);
}

/* ---------- Kamera-Lichtdekoder ---------- */

.mc-k-beta { margin: 0 0 1rem; font-size: .92rem; color: var(--mc-grau); }
.mc-marke {
  display: inline-block;
  padding: .1rem .5rem;
  margin-right: .4rem;
  border-radius: 0 4px 4px 0;
  border-left: 4px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--mc-text);
}
.mc-k-buehne {
  position: relative;
  width: 100%; max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: #0e1820;
}
.mc-k-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-k-rahmen {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--mc-akzent);
  border-radius: 4px;
  pointer-events: none;
}
.mc-k-pegel {
  height: 10px; margin: .6rem auto 0; max-width: 520px;
  border-radius: 5px;
  background: var(--mc-gedimmt);
  overflow: hidden;
}
.mc-k-pegel-wert {
  height: 100%; width: 0;
  background: var(--mc-akzent);
  transition: width .08s linear;
}

/* ---------- Dekoder ---------- */

.mc-d-quellen {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch;
  margin-bottom: 1rem;
}
.mc-d-ablage {
  flex: 1 1 260px;
  display: flex; flex-direction: column; justify-content: center; gap: .2rem;
  padding: 1.1rem 1.3rem;
  border: 2px dashed var(--mc-linie);
  border-radius: 8px;
  background: var(--mc-gedimmt);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.mc-d-ablage:hover, .mc-d-bereit {
  border-color: var(--mc-akzent);
  background: var(--mc-flaeche);
}
.mc-d-ablage-titel { font-weight: 600; }
.mc-d-datei { display: block; margin-top: .5rem; font-size: .85rem; max-width: 100%; }
.mc-d-mikro { flex: 0 1 auto; align-self: center; }
.mc-knopf-aktiv { background: var(--mc-akzent); color: #16232d; }

.mc-d-status { min-height: 1.4em; margin: 0 0 .6rem; color: var(--mc-grau); }

.mc-d-ausgabe {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
  margin-bottom: .8rem;
}
@media (min-width: 640px) { .mc-d-ausgabe { grid-template-columns: 1fr 1fr; } }
.mc-d-morse, .mc-d-text {
  margin: .2rem 0 0;
  padding: .7rem .9rem;
  min-height: 3.2em;
  border-radius: 6px;
  background: var(--mc-gedimmt);
  word-break: break-word;
}
.mc-d-morse { letter-spacing: .1em; }
.mc-d-text { font-size: 1.15rem; }

.mc-d-messwerte { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.mc-d-bild { margin: 1rem 0; }
.mc-d-leinwand {
  display: block; width: 100%; height: 120px;
  margin-top: .3rem;
  border-radius: 6px;
  background: var(--mc-gedimmt);
}
#mc-d-spektrum { height: 90px; }

.mc-d-experte { margin-top: 1rem; border-top: 1px solid var(--mc-linie); padding-top: .8rem; }
.mc-d-experte summary { cursor: pointer; font-weight: 600; }
.mc-d-experte-inhalt { padding-top: .8rem; display: grid; gap: 1rem; }
.mc-d-auto { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; font-size: .9rem; }
.mc-d-zahl { max-width: 9rem; }

/* ---------- Sendeuebung ---------- */

.mc-s-aufgabe { text-align: center; margin-bottom: 1.2rem; }
.mc-p-wort {
  display: block;
  font-size: 2rem; font-weight: 700;
  letter-spacing: .06em;
}
.mc-p-morse {
  display: block;
  color: var(--mc-akzent-text);
  letter-spacing: .12em;
  margin: .2rem 0 .4rem;
  word-break: break-all;
}
.mc-p-note { text-align: center; margin: 1.4rem 0 .8rem; }
.mc-p-punktzahl {
  display: block;
  font-size: 3rem; font-weight: 700;
  line-height: 1;
  color: var(--mc-akzent-text);
}
.mc-p-befunde { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.mc-p-befunde li {
  padding: .45rem .8rem;
  margin-bottom: .3rem;
  border-radius: 0 6px 6px 0;
  font-size: .92rem;
}
.mc-p-gut { background: rgba(63, 156, 90, .12); border-left: 4px solid #3f9c5a; }
.mc-p-schlecht { background: rgba(208, 69, 75, .1); border-left: 4px solid #d0454b; }
.mc-rechner-tabelle th, .mc-rechner-tabelle td { color: var(--mc-text); }

/* ---------- Rufzeichen-Trainer ---------- */

.mc-c-anzeige {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 2.2rem; font-weight: 700;
  letter-spacing: .12em;
  min-height: 1.3em; line-height: 1.3;
  color: var(--mc-grau);
}
.mc-c-treffer { color: #3f9c5a; }
.mc-c-fehler { color: #d0454b; text-decoration: underline; text-underline-offset: .2em; }
.mc-tool-karte .mc-c-eingabe {
  width: min(280px, 100%); height: 56px;
  margin: .6rem auto 0;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--mc-flaeche);
  color: var(--mc-text);
  border: 2px solid var(--mc-linie);
  border-radius: 8px;
}
.mc-tool-karte .mc-c-eingabe:focus {
  border-color: var(--mc-akzent);
  box-shadow: 0 0 0 3px rgba(242, 164, 23, .18);
}

/* ---------- Datenlisten ---------- */

.mc-liste { margin: 1.2rem 0 1.8rem; }
.mc-liste-zeile {
  display: grid; gap: .2rem 1.2rem;
  grid-template-columns: 1fr;
  padding: .8rem 0;
  border-bottom: 1px solid var(--mc-linie);
}
@media (min-width: 680px) {
  .mc-liste-zeile { grid-template-columns: 210px 1fr; align-items: start; }
}
.mc-liste-kopf { display: flex; align-items: center; gap: .6rem; }
.mc-liste-kuerzel {
  font-weight: 700; font-size: 1.05rem;
  min-width: 3.2em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.mc-liste-text p { margin: 0 0 .2rem; }
.mc-liste-frage { color: var(--mc-text); }
.mc-liste-aussage { color: var(--mc-grau); }
.mc-liste-marke {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; font-weight: 700;
  color: var(--mc-akzent-text);
  min-width: 3.4em;
}

/* ---------- Trainer ---------- */

.mc-t-start { text-align: center; padding: 1.5rem 0; }
.mc-t-hinweis { max-width: 54ch; margin: 0 auto 1.4rem; color: var(--mc-grau); }
.mc-t-gross { font-size: 1.05rem; padding: 0 2rem; height: 48px; }

.mc-t-kopf {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: flex-start;
  padding-bottom: 1rem; margin-bottom: .6rem;
  border-bottom: 1px solid var(--mc-linie);
}
/* Ohne eigene Grundbreite bricht die linke Spalte um, sobald rechts etwas
   waechst. Beide Seiten teilen sich die Zeile, bis es wirklich eng wird. */
.mc-t-kopf > * { flex: 1 1 200px; min-width: 0; }
.mc-t-zeichenliste {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.1rem; letter-spacing: .18em;
  color: var(--mc-akzent-text);
}
.mc-t-fortschritt { min-width: 220px; flex: 1 1 220px; }
.mc-t-balken {
  height: 10px; border-radius: 5px;
  /* Deutlich heller als die Karte, sonst ist der leere Balken unsichtbar. */
  background: var(--mc-gedimmt);
  border: 1px solid var(--mc-linie);
  overflow: hidden; margin: .3rem 0;
}
.mc-t-balken span {
  display: block; height: 100%; width: 0;
  background: var(--mc-akzent);
  transition: width .25s ease;
}
.mc-t-balken-bereit { background: #3f9c5a; }

.mc-t-buehne { text-align: center; padding: 1.4rem 0 .6rem; }
.mc-t-rueckmeldung {
  display: block;
  font-size: 2.6rem; font-weight: 700;
  min-height: 1.3em; line-height: 1.3;
  color: var(--mc-grau);
}
.mc-t-richtig { color: #3f9c5a; }
.mc-t-falsch { color: #d0454b; font-size: 1.8rem; }
.mc-t-neu { color: var(--mc-akzent-text); font-size: 1.2rem; font-weight: 600; }
/* Die Spezifitaet muss ueber der von UIkits .uk-input liegen, sonst zieht
   dessen width:100% das Feld ueber die ganze Karte. */
.mc-tool-karte .mc-t-eingabe {
  width: 92px; height: 62px;
  margin: .6rem auto 0;
  text-align: center;
  font-size: 1.8rem; font-weight: 700;
  text-transform: uppercase;
  background: var(--mc-flaeche);
  color: var(--mc-text);
  border: 2px solid var(--mc-linie);
  border-radius: 8px;
}
.mc-tool-karte .mc-t-eingabe:focus { border-color: var(--mc-akzent); box-shadow: 0 0 0 3px rgba(242, 164, 23, .18); }
.mc-t-anleitung { color: var(--mc-grau); font-size: .85rem; margin: .6rem 0 0; }

.mc-t-statistik { display: block; }
.mc-t-schwach { border-color: #d0454b; }
.mc-t-warnend { color: #d0454b !important; font-weight: 700; }

/* ---------- Arbeitsblatt ---------- */

.mc-blatt {
  background: var(--mc-flaeche);
  border: 1px solid var(--mc-linie);
  border-radius: 8px;
  padding: 1.4rem 1.6rem;
  margin-top: 1.4rem;
}
.mc-blatt-kopf { border-bottom: 2px solid var(--mc-linie); padding-bottom: .8rem; margin-bottom: 1rem; }
.mc-blatt-titel { font-size: 1.3rem; margin: 0 0 .4rem; }
.mc-blatt-zeile { color: var(--mc-grau); font-size: .9rem; margin: 0; }
.mc-blatt-aufgaben { padding-left: 1.6rem; margin: 0; }
.mc-blatt-aufgaben li { margin-bottom: 1.1rem; }
.mc-blatt-morse {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
  color: var(--mc-akzent-text);
  margin: 0 0 .4rem;
  word-break: break-all;
}
.mc-blatt-wort { font-weight: 700; font-size: 1.05rem; margin: 0 0 .4rem; }
.mc-blatt-linie {
  display: block;
  border-bottom: 1px solid var(--mc-linie);
  height: 1.4rem;
}
.mc-blatt-fuss { color: var(--mc-grau); font-size: .82rem; margin: 1.2rem 0 0; }
.mc-blatt-loesung { background: var(--mc-gedimmt); }
.mc-blatt-loesungszeile { margin-bottom: .5rem; }

/* ---------- Quelltextbloecke ---------- */

.mc-quelltext {
  background: var(--mc-gedimmt);
  border: 1px solid var(--mc-linie);
  border-left: 4px solid var(--mc-akzent);
  border-radius: 0 6px 6px 0;
  padding: .9rem 1.1rem;
  margin: 1rem 0 1.4rem;
  overflow-x: auto;
  font-size: .88rem;
  line-height: 1.55;
}
.mc-quelltext code {
  background: none; padding: 0;
  color: var(--mc-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}
.mc-text h3 + .mc-quelltext { margin-top: .5rem; }

/* ---------- Widget-Seite ---------- */

.mc-w-optionen .uk-select { border-color: var(--mc-linie); color: var(--mc-text); background-color: var(--mc-flaeche); }
.mc-w-vorschau {
  border: 1px solid var(--mc-linie);
  border-radius: 8px;
  overflow: hidden;
  background: var(--mc-gedimmt);
}
.mc-w-vorschau iframe { display: block; width: 100%; border: 0; }
.mc-w-code { font-size: .85rem; }

/* ---------- Geheime Nachricht ---------- */

.mc-s-code {
  font-size: 1.25rem; letter-spacing: .12em;
  color: var(--mc-akzent-text);
  text-align: center;
  margin: 1rem 0;
  padding: 1.2rem;
  background: var(--mc-gedimmt);
  border-radius: 8px;
  word-break: break-all;
}
.mc-s-loesung {
  font-size: 1.4rem; font-weight: 700;
  text-align: center;
  margin: 1rem 0 0;
  padding: .9rem;
  background: rgba(242, 164, 23, .12);
  border-radius: 8px;
}

/* ---------- Lichtsignal-Seite ---------- */

.mc-warnung-laut {
  background: rgba(208, 69, 75, .16);
  border-left-color: #d0454b;
}
.mc-rate-kritisch { color: #d0454b; font-weight: 600; }

/* ---------- Morsetaste ---------- */

.mc-taste {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .4rem;
  width: 100%; min-height: 180px;
  margin: .4rem 0 1.2rem;
  border: 2px solid var(--mc-linie);
  border-radius: 12px;
  background: var(--mc-gedimmt);
  color: var(--mc-text);
  cursor: pointer;
  /* Auf dem Smartphone darf ein langer Druck weder markieren noch das
     Kontextmenue oeffnen, sonst bricht jeder Strich ab. */
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
.mc-taste:hover { border-color: var(--mc-akzent); }
.mc-taste-an {
  background: var(--mc-akzent);
  border-color: var(--mc-akzent);
  color: #101c26;
}
.mc-taste-text { font-size: 1.25rem; font-weight: 700; }
.mc-taste-hinweis { font-size: .85rem; color: var(--mc-grau); }
.mc-taste-an .mc-taste-hinweis { color: #3d3115; }

.mc-taste-ausgabe {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
  margin-bottom: .4rem;
}
@media (min-width: 640px) { .mc-taste-ausgabe { grid-template-columns: 1fr 1fr; } }
.mc-taste-morse {
  font-size: 1.1rem; letter-spacing: .1em;
  color: var(--mc-akzent-text);
  margin: 0; min-height: 1.6em;
  word-break: break-all;
}
.mc-taste-klartext {
  font-size: 1.3rem; font-weight: 700;
  margin: 0; min-height: 1.4em;
  word-break: break-word;
}
.mc-taste-messung { min-width: 130px; }
.mc-taste-messung output { display: block; color: var(--mc-akzent-text); }

/* ---------- Morsebild ---------- */

.mc-g-vorschau {
  display: flex; align-items: center; justify-content: center;
  min-height: 96px;
  margin: 1.2rem 0 .4rem;
  padding: 1rem;
  background: var(--mc-gedimmt);
  border-radius: 8px;
  overflow-x: auto;
}
.mc-g-vorschau svg { max-width: 100%; height: auto; }
.mc-g-vorschau[data-leer="ja"]::before {
  content: ""; display: block; height: 1px;
}
.mc-g-code {
  text-align: center; color: var(--mc-akzent-text);
  letter-spacing: .1em; margin: 0 0 .4rem;
  word-break: break-all;
}
.mc-g-stile { display: flex; flex-wrap: wrap; gap: .35rem; }
.mc-g-stil { font-size: .85rem; padding: 0 .7rem; }
.mc-g-titel { font-size: 1rem; margin: 1.6rem 0 .4rem; color: var(--mc-grau); }

.mc-perlenreihe {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .3rem; padding: .9rem 0;
}
.mc-perle { display: block; height: 16px; border-radius: 8px; background: var(--mc-akzent); }
.mc-perle-kurz { width: 16px; }
.mc-perle-lang { width: 42px; }
.mc-perle-trenner { width: 6px; height: 6px; background: var(--mc-grau); }
.mc-perle-wortabstand { width: 22px; height: 2px; background: var(--mc-linie); border-radius: 0; }

/* ---------- SOS ---------- */

.mc-sos-karte { text-align: center; }
.mc-sos-zeichen {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 1.6rem;
  margin: .6rem 0 1rem;
}
.mc-sos-gruppe { display: flex; align-items: center; gap: .5rem; }
.mc-dit, .mc-dah {
  display: block; height: 14px;
  background: var(--mc-akzent);
  border-radius: 7px;
}
.mc-dit { width: 14px; }
.mc-dah { width: 42px; }
.mc-sos-code {
  font-size: 1.5rem; letter-spacing: .18em;
  color: var(--mc-akzent-text);
  margin: 0 0 .2rem;
}
.mc-sos-sprech { color: var(--mc-grau); font-size: .9rem; margin: 0 0 .4rem; }
.mc-sos-steuerung { justify-content: center; }
.mc-sos-schleife {
  display: flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: var(--mc-grau);
}
.mc-warnung-ernst {
  background: var(--mc-gedimmt);
  border-left-color: var(--mc-grau);
  text-align: left;
}

/* ---------- Lichtsignal ----------
   Voreinstellung ist eine begrenzte Flaeche in gedaempftem Ton, nicht der
   ganze Bildschirm in Reinweiss. Wer weniger Bewegung eingestellt hat,
   bekommt gar kein Blinken. */

.mc-licht {
  position: fixed;
  right: 1.2rem; bottom: 1.2rem;
  width: min(38vw, 260px); height: min(26vh, 180px);
  border-radius: 10px;
  background: #2b2b2b;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
  z-index: 1500;
  pointer-events: none;
}
.mc-licht-an { background: #ffe9b0; }
.mc-licht-vollbild {
  inset: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  border-radius: 0;
}
@media (prefers-reduced-motion: reduce) {
  .mc-licht, .mc-licht-an { background: #2b2b2b !important; }
}

/* ---------- Fliesstext ---------- */

/* UIkit faerbt h1 bis h6 fest dunkelgrau. Im dunklen Schema waeren die
   Ueberschriften damit fast unsichtbar, deshalb hier die eigene Textfarbe. */
h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4 { color: var(--mc-text); }
.mc-hero h1, .mc-hero h2 { color: #fff; }

.mc-text { font-size: 1.03rem; line-height: 1.68; }
.mc-text h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2.4rem; scroll-margin-top: 80px; }
.mc-text h3 { font-size: 1.16rem; font-weight: 700; margin-top: 1.6rem; scroll-margin-top: 80px; }
.mc-text p { margin: 0 0 1rem; }
.mc-text a { color: var(--mc-akzent-text); text-decoration: underline; }
.mc-text ul, .mc-text ol { padding-left: 1.2rem; }
.mc-text li { margin-bottom: .35rem; }
.mc-text code { background: var(--mc-gedimmt); color: var(--mc-akzent-text); }

.mc-hinweiskasten {
  background: var(--mc-gedimmt);
  border-left: 4px solid var(--mc-akzent);
  border-radius: 0 6px 6px 0;
  padding: .9rem 1.1rem;
  margin: 1.4rem 0;
}
.mc-hinweiskasten p:last-child { margin-bottom: 0; }

/* ---------- Zeichentabelle ---------- */

.mc-tabelle {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: .5rem;
  margin: 1.2rem 0 1.8rem;
  padding: 0;
  list-style: none;
}
.mc-tabelle li {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  padding: .45rem .6rem;
  background: var(--mc-flaeche);
  margin: 0;
}
.mc-zeichen { font-weight: 700; font-size: 1.05rem; min-width: 1.4em; }
/* Breit genug fuer SOS mit neun Signalen, das laengste Zeichen der Tabelle. */
.mc-tabelle-breit { grid-template-columns: repeat(auto-fill, minmax(182px, 1fr)); }
.mc-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--mc-akzent-text);
  letter-spacing: .12em;
  font-size: .95rem;
  /* Fuer EINZELNE Zeichen in Tabellen und Listen: `.-..` soll nie
     auseinandergerissen werden. */
  white-space: nowrap;
}

/**
 * Ganze Nachrichten brechen um.
 *
 * ⚠️ Gemessen am 2026-08-31 im Telegrafenamt: ein Telegramm von neun
 * Woertern ragte 388 Pixel aus seinem Kasten, und die GANZE SEITE liess
 * sich waagerecht schieben. Die Regel oben ist fuer einzelne Zeichen
 * richtig und fuer eine uebersetzte Nachricht falsch - ein Wert, zwei
 * Aufgaben, wie schon an vier anderen Stellen an diesem Tag.
 *
 * Getrennt wird an `data-mc-morse`, und das steht schon im Markup: es
 * zeichnet genau die sieben Anzeigen aus, die eine ganze Nachricht
 * zeigen (Telegrafenamt, Bild, Analyse, Listen, Mission, Fehlersuche,
 * Eisenbahn). Eine neue Klasse dafuer waere eine zweite Wahrheit gewesen.
 *
 * Umgebrochen wird nur an Leerzeichen - und die stehen im Morsecode
 * zwischen den Zeichen. Ein einzelnes `.-..` bleibt dadurch zusammen.
 * Deshalb hier ausdruecklich KEIN overflow-wrap: break-word: das duerfte
 * mitten in einem Zeichen umbrechen, und aus `-...` wuerden `-.` und `..`
 * in zwei Zeilen - lesbar als zwei voellig andere Buchstaben.
 */
[data-mc-morse] {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

/**
 * Etwas Luft zwischen den Zeilen - aber NUR in Absaetzen.
 *
 * ⚠️ Am 2026-09-01 von Thomas gemeldet: im Uebersetzer war das Morsefeld
 * 40 Pixel hoeher als das Textfeld daneben, obwohl beide `rows="6"` haben.
 * Ursache war genau diese Zeile, hier eingefuehrt am Vortag gegen den
 * Ueberlauf: bei einem `textarea` bestimmt die Zeilenhoehe mal `rows` die
 * Hoehe des Kastens, also wuchs er mit.
 *
 * Der Umbruch von oben gilt weiter fuer beide - er war das eigentliche
 * Anliegen. Die Luft dazwischen brauchen nur die Absaetze, in denen eine
 * lange Nachricht ueber mehrere Zeilen laeuft; in einem Eingabefeld steht
 * ohnehin ein Bildlauf zur Verfuegung.
 */
p[data-mc-morse],
span[data-mc-morse] {
  line-height: 1.9;
}
.mc-hoeren {
  border: 0; background: none; cursor: pointer;
  color: var(--mc-grau); padding: 0 .1rem; line-height: 1;
}
.mc-hoeren:hover { color: var(--mc-akzent-text); }

/* ---------- Spiele: Memory, Simon, Reaktion ---------- */

.mc-me-felder, .mc-si-felder, .mc-re-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.4rem;
  margin-bottom: 1rem;
}

/* Das Brett.
   Die Spaltenzahl setzt das Skript als data-spalten, weil sie von der Zahl
   der Paare abhaengt - vier Paare quadratisch, acht in vier Spalten. */
.mc-me-brett {
  display: grid;
  gap: .6rem;
  margin: 1.2rem 0;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .mc-me-brett[data-spalten="3"] { grid-template-columns: repeat(3, 1fr); }
  .mc-me-brett[data-spalten="4"] { grid-template-columns: repeat(4, 1fr); }
}
.mc-me-karte {
  min-height: 74px;
  padding: .6rem .5rem;
  border: 1px solid var(--mc-linie);
  /* Akzentseite eckig - siehe .mc-karte. */
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-linie);
  background: var(--mc-gedimmt);
  color: var(--mc-text);
  font-size: 1.15rem; font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.mc-me-karte.mc-me-zu { color: var(--mc-grau); letter-spacing: .2em; }
.mc-me-karte.mc-me-auf { background: var(--mc-flaeche); border-left-color: var(--mc-akzent); }
.mc-me-karte.mc-me-gefunden { border-left-color: #3f9c5a; opacity: .55; cursor: default; }
/* Bedeutungen von Q-Gruppen sind Saetze, keine Zeichen. */
.mc-me-karte.mc-me-lang { font-size: .84rem; font-weight: 400; line-height: 1.3; }
.mc-me-zahlen { color: var(--mc-grau); font-size: .9rem; }
.mc-me-ergebnis, .mc-si-ergebnis {
  margin-top: 1rem; padding: .7rem .9rem;
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
  font-weight: 600;
}

/* Simon: die Buehne. */
.mc-si-buehne {
  margin: 1.4rem 0;
  padding: 1.2rem;
  border-radius: 6px;
  background: var(--mc-gedimmt);
  text-align: center;
}
.mc-si-runde { margin: 0 0 .5rem; color: var(--mc-grau); font-size: .85rem;
  text-transform: uppercase; letter-spacing: .08em; }
.mc-si-eingabe {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.5rem; letter-spacing: .12em;
  min-height: 1.8em;
  word-break: break-all;
}
.mc-si-tasten { display: flex; gap: .8rem; margin: 1rem 0; }
.mc-si-taste {
  flex: 1;
  min-height: 64px;
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  background: var(--mc-flaeche);
  color: var(--mc-text);
  cursor: pointer;
}
.mc-si-taste:active { background: var(--mc-gedimmt); }
.mc-si-zeichen { font-size: 1.9rem; line-height: 1; }

/* Reaktion: ein grosses Zeichen und eine Zeile darunter. */
.mc-re-buehne {
  margin: 1.4rem 0;
  padding: 1.4rem;
  border-radius: 6px;
  background: var(--mc-gedimmt);
  text-align: center;
}
.mc-re-gross { margin: 0; font-size: 3.4rem; line-height: 1; font-weight: 700; }
.mc-re-gross.mc-re-treffer { color: #3f9c5a; }
.mc-re-gross.mc-re-daneben { color: #d0454b; }
.mc-re-status { margin: .6rem 0 0; color: var(--mc-grau); min-height: 1.4em; }
.mc-re-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .8rem;
  margin: 1rem 0;
}
.mc-re-kachel {
  padding: .6rem .8rem;
  border-radius: 0 5px 5px 0;
  border-left: 3px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
}
.mc-re-kachel strong { display: block; font-size: 1.2rem; margin-top: .2rem; }
.mc-re-liste { display: grid; gap: .35rem; margin-top: .8rem; }
.mc-re-zeile {
  display: flex; justify-content: space-between; align-items: center;
  gap: .8rem;
  padding: .35rem .6rem;
  border-radius: 0 5px 5px 0;
  border-left: 3px solid var(--mc-linie);
  background: var(--mc-gedimmt);
  font-size: .9rem;
}
.mc-re-zeile strong { font-size: 1.05rem; }

/* Hoeruebungen: Blind Copy, Head Copy, Diktat. */
.mc-ho-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem 1.4rem;
  margin-bottom: 1rem;
}
.mc-ho-eingabe { display: block; margin: 1.2rem 0 .8rem; }
.mc-ho-eingabe textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem; letter-spacing: .06em;
}
/* Waehrend gesendet wird, nimmt das Feld nichts an - und das soll man sehen,
   nicht nur merken, wenn nichts erscheint. */
.mc-ho-gesperrt {
  background: var(--mc-gedimmt);
  opacity: .6;
  cursor: not-allowed;
}
.mc-ho-ergebnis {
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--mc-linie);
}
.mc-ho-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .7rem;
  margin-bottom: 1.2rem;
}
.mc-ho-kachel {
  padding: .55rem .7rem;
  border-radius: 0 5px 5px 0;
  border-left: 3px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
}
.mc-ho-kachel strong { display: block; font-size: 1.15rem; margin-top: .15rem; }
/* Der Vergleich Zeichen fuer Zeichen.
   Feste Breite je Zeichen, damit Soll und Ist untereinander lesbar bleiben
   und ein fehlendes Zeichen nicht die ganze Zeile verschiebt. */
.mc-ho-vergleich {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.1rem; line-height: 1.9;
  word-break: break-all;
  margin: .3rem 0 1rem;
}
.mc-ho-z { padding: .1rem .06rem; border-radius: 3px; }
.mc-ho-gleich  { color: var(--mc-text); }
.mc-ho-ersetzt { background: rgba(208, 69, 75, .18); color: #d0454b; font-weight: 700; }
.mc-ho-fehlt   { background: rgba(242, 164, 23, .2); color: var(--mc-akzent-text); text-decoration: underline; }
.mc-ho-zuviel  { color: var(--mc-grau); text-decoration: line-through; }
.mc-ho-paarliste { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.mc-ho-paar {
  padding: .25rem .6rem;
  border-radius: 0 5px 5px 0;
  border-left: 3px solid #d0454b;
  background: var(--mc-gedimmt);
  font-size: .9rem;
}

/* Signal bauen: die Zeitleiste.
   Die Breite der Bloecke ist das Argument des Werkzeugs - sie steht im
   Verhaeltnis der Einheiten und wird deshalb im Skript gesetzt. Waeren alle
   gleich breit, waere die Uebung gegenstandslos. */
.mc-ba-felder, .mc-ry-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem 1.4rem;
  margin-bottom: 1rem;
}
.mc-ba-ziel { font-size: 1.15rem; font-weight: 600; margin: .8rem 0 .4rem; }
.mc-ba-leiste {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0;
  min-height: 54px;
  padding: .8rem;
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  background: var(--mc-gedimmt);
}
.mc-ba-block { height: 22px; border-radius: 2px; }
.mc-ba-an { background: var(--mc-akzent); }
.mc-ba-aus { background: transparent; border-top: 1px dashed var(--mc-linie); height: 22px; }
.mc-ba-leer { color: var(--mc-grau); font-size: .9rem; }
.mc-ba-summe { margin-left: auto; color: var(--mc-grau); font-size: .85rem; padding-left: 1rem; }
.mc-ba-morse {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.2rem; letter-spacing: .1em;
  min-height: 1.6em; margin: .6rem 0 1rem;
}
.mc-ba-tasten { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.mc-ba-taste {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  padding: .6rem .8rem;
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  background: var(--mc-flaeche);
  color: var(--mc-text);
  cursor: pointer;
  font-size: .82rem;
}
.mc-ba-taste:hover { border-color: var(--mc-akzent); }
.mc-ba-form { display: block; height: 10px; border-radius: 2px; }
.mc-ba-form-punkt  { width: 10px; background: var(--mc-akzent); }
.mc-ba-form-strich { width: 30px; background: var(--mc-akzent); }
.mc-ba-form-p1 { width: 10px; border-top: 2px dashed var(--mc-grau); height: 2px; margin-top: 4px; }
.mc-ba-form-p3 { width: 30px; border-top: 2px dashed var(--mc-grau); height: 2px; margin-top: 4px; }
.mc-ba-form-p7 { width: 70px; border-top: 2px dashed var(--mc-grau); height: 2px; margin-top: 4px; }
.mc-ba-ergebnis {
  margin-top: 1rem; padding: .7rem .9rem;
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-linie);
  background: var(--mc-gedimmt);
}
.mc-ba-gut { border-left-color: #3f9c5a; }
.mc-ba-fast { border-left-color: var(--mc-akzent); }
.mc-ba-schlecht { border-left-color: #d0454b; }

/* Rhythmuslabor. */
.mc-ry-buehne {
  margin: 1.2rem 0;
  padding: 1.2rem;
  border-radius: 6px;
  background: var(--mc-gedimmt);
  text-align: center;
}
.mc-ry-status { margin: 0 0 1rem; color: var(--mc-grau); min-height: 1.4em; }
.mc-ry-antworten { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.mc-ry-antwort {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  min-width: 110px;
  padding: .8rem 1rem;
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  background: var(--mc-flaeche);
  color: var(--mc-text);
  cursor: pointer;
}
.mc-ry-antwort strong { font-size: 1.6rem; line-height: 1; }
.mc-ry-antwort .mc-code { font-size: .85rem; color: var(--mc-grau); }
.mc-ry-antwort:hover:not(:disabled) { border-color: var(--mc-akzent); }
.mc-ry-richtig { border-color: #3f9c5a; background: rgba(63, 156, 90, .12); }
.mc-ry-schwachliste { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.mc-ry-schwachpaar {
  padding: .25rem .6rem;
  border-radius: 0 5px 5px 0;
  border-left: 3px solid #d0454b;
  background: var(--mc-gedimmt);
  font-size: .9rem;
}
.mc-ry-karte { display: grid; gap: .6rem; margin-top: .8rem; }
.mc-ry-ebene { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.mc-ry-ebenenkopf {
  min-width: 92px;
  color: var(--mc-grau);
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
}
.mc-ry-zelle {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  min-width: 56px;
  padding: .35rem .4rem;
  border: 1px solid var(--mc-linie);
  border-radius: 5px;
  background: var(--mc-flaeche);
  color: var(--mc-text);
  cursor: pointer;
}
.mc-ry-zelle:hover { border-color: var(--mc-akzent); }
.mc-ry-zelle strong { font-size: 1.05rem; line-height: 1; }
.mc-ry-zelle .mc-code { font-size: .72rem; color: var(--mc-grau); letter-spacing: .05em; }

/* Telegrafen-Klopfer: der Anker als schlichte Zeichnung. */
.mc-so-felder, .mc-la-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem 1.4rem;
  margin-bottom: 1rem;
}
.mc-so-eingabe, .mc-la-eingabe { display: block; margin-bottom: 1rem; }
.mc-so-geraet {
  position: relative;
  height: 92px;
  margin: 1.2rem 0;
  border-radius: 6px;
  background: var(--mc-gedimmt);
  overflow: hidden;
}
.mc-so-anker {
  position: absolute;
  left: 12%; right: 12%;
  top: 22px; height: 12px;
  border-radius: 3px;
  background: var(--mc-grau);
  transform-origin: left center;
  transition: transform .02s linear;
}
/* Der Anschlag: der Anker legt sich nach unten auf den Amboss. Nur zwei
   Lagen, keine Zwischenstufen - mechanisch gibt es auch nur zwei. */
.mc-so-anker.mc-so-unten { transform: rotate(4.5deg); background: var(--mc-akzent); }
.mc-so-amboss {
  position: absolute;
  left: 12%; right: 12%;
  bottom: 24px; height: 6px;
  border-radius: 3px;
  background: var(--mc-linie);
}
.mc-so-zahlen, .mc-la-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .7rem;
  margin: 1rem 0;
}
.mc-so-kachel, .mc-la-kachel {
  padding: .55rem .7rem;
  border-radius: 0 5px 5px 0;
  border-left: 3px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
}
.mc-so-kachel strong, .mc-la-kachel strong { display: block; font-size: 1.15rem; margin-top: .15rem; }
.mc-so-morse {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem; letter-spacing: .08em;
  word-break: break-all;
  color: var(--mc-grau);
}
.mc-so-mehrdeutig {
  padding: .7rem .9rem;
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
  font-size: .92rem;
}

/* Lichtmorsen. */
.mc-la-buehne {
  margin: 1.2rem 0;
  padding: 1.6rem;
  border-radius: 6px;
  background: #0e1820;
  text-align: center;
}
.mc-la-lampe {
  width: 88px; height: 88px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff7e0 0%, var(--mc-akzent) 55%, #b4740a 100%);
  box-shadow: 0 0 48px 12px rgba(242, 164, 23, .55);
  opacity: 0;
}
.mc-la-lage { margin: 1rem 0 0; color: #93a5b3; min-height: 1.4em; }
.mc-la-lage.mc-la-warnung { color: #f08b8f; font-weight: 600; }
/* Die Kurve. Sie traegt das Argument des Werkzeugs und bekommt deshalb
   Platz, statt als Randnotiz zu erscheinen. */
.mc-la-kurve {
  display: block;
  width: 100%; height: 150px;
  margin: .4rem 0 1rem;
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  background: var(--mc-gedimmt);
}
.mc-la-soll { fill: rgba(242, 164, 23, .14); }
.mc-la-schwelle { stroke: var(--mc-linie); stroke-width: 1; stroke-dasharray: 4 4; }
.mc-la-linie { fill: none; stroke: var(--mc-akzent); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.mc-la-kachel.mc-la-gut { border-left-color: #3f9c5a; }
.mc-la-kachel.mc-la-schlecht { border-left-color: #d0454b; }

/* Stoerungs-Training: die Frequenzskala. */
.mc-st-felder, .mc-mi-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.4rem;
  margin-bottom: 1rem;
}
.mc-st-buehne {
  margin: 1.2rem 0;
  padding: 1.2rem;
  border-radius: 6px;
  background: var(--mc-gedimmt);
}
.mc-st-lage { margin: 0 0 1rem; font-weight: 600; }
/* Die Skala steht fuer das Band von 400 bis 960 Hz. Die Marken sitzen dort,
   wo die Stationen liegen - fremde erst nach der Auswertung, sonst waere die
   Aufgabe geschenkt. */
.mc-st-skala {
  position: relative;
  height: 46px;
  border-bottom: 2px solid var(--mc-linie);
}
.mc-st-marke {
  position: absolute; bottom: -1px;
  transform: translateX(-50%);
  padding: .2rem .45rem;
  border-bottom: 3px solid var(--mc-grau);
  font-size: .78rem; color: var(--mc-grau);
  white-space: nowrap;
}
.mc-st-marke.mc-st-zielmarke {
  border-bottom-color: var(--mc-akzent);
  color: var(--mc-akzent-text);
  font-weight: 700;
}
.mc-st-eingabe { display: block; margin: 1rem 0 .8rem; }
.mc-st-ergebnis, .mc-mi-lage {
  margin-top: 1rem; padding: .7rem .9rem;
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-linie);
  background: var(--mc-gedimmt);
}
.mc-st-gut, .mc-mi-gut { border-left-color: #3f9c5a; }
.mc-st-schlecht, .mc-mi-schlecht { border-left-color: #d0454b; }

/* Missionen und Escape Room. */
.mc-mi-einleitung { margin: .6rem 0 1rem; color: var(--mc-grau); }
/* Die Kette der Schritte als Punktreihe: man sieht, wie weit es noch ist,
   ohne dass eine Zahl das Tempo vorgibt. */
.mc-mi-fortschritt { display: flex; gap: .5rem; margin-bottom: 1rem; }
.mc-mi-punkt {
  width: 26px; height: 6px;
  border-radius: 3px;
  background: var(--mc-linie);
}
.mc-mi-punkt.mc-mi-erledigt { background: #3f9c5a; }
.mc-mi-punkt.mc-mi-jetzt { background: var(--mc-akzent); }
.mc-mi-buehne {
  margin: 1rem 0;
  padding: 1.2rem;
  border-radius: 6px;
  background: var(--mc-gedimmt);
}
.mc-mi-aufgabe { margin: .3rem 0 0; font-size: 1.08rem; }
.mc-mi-morse {
  margin: 1rem 0 0;
  font-size: 1.3rem; letter-spacing: .12em;
  word-break: break-all;
}
.mc-mi-hinweis {
  margin: 1rem 0 0; padding: .6rem .8rem;
  border-radius: 0 5px 5px 0;
  border-left: 3px solid var(--mc-akzent);
  background: var(--mc-flaeche);
  font-size: .92rem;
}
/* Das Blinkfeld. Dieselbe Klasse wie beim Lichtsignal, damit es sich gleich
   verhaelt - mc-licht-an schaltet es hell. */
.mc-mi-licht {
  height: 120px;
  margin-top: 1rem;
  border-radius: 6px;
  background: #0e1820;
  transition: background .01s linear;
}
.mc-mi-licht.mc-licht-an { background: var(--mc-akzent); }
.mc-mi-eingabe { display: block; margin: 1rem 0 .8rem; }

/* Morsecode farbig - ein Schalter je Werkzeugkasten, eine Einstellung fuer
   die ganze Seite. Ohne den Schalter steht der Code in der Textfarbe; mit ihm
   in der Akzentfarbe, damit sich Punkte und Striche staerker vom uebrigen
   Text abheben. */
:root[data-morsefarbe="akzent"] [data-mc-morse] {
  color: var(--mc-akzent-text);
}
/* Eingabefelder brauchen zusaetzlich einen Rahmen in derselben Farbe, sonst
   wirkt der farbige Text darin wie ein Fehlerzustand. */
:root[data-morsefarbe="akzent"] textarea[data-mc-morse],
:root[data-morsefarbe="akzent"] input[data-mc-morse] {
  border-color: var(--mc-akzent);
}
.mc-farbknopf { display: inline-flex; align-items: center; gap: .35rem; }
/* Der Punkt am Knopf zeigt, was der Schalter tut - eine Beschriftung allein
   muesste es beschreiben, die Farbprobe zeigt es. */
.mc-farbprobe {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--mc-linie);
  background: var(--mc-text);
}
.mc-farbknopf[aria-pressed="true"] .mc-farbprobe {
  background: var(--mc-akzent);
  border-color: var(--mc-akzent);
}
.mc-farbknopf[aria-pressed="true"] { color: var(--mc-akzent-text); }
/* Steht der Knopf nicht in einer Knopfzeile, bekommt er selbst etwas Luft. */
.mc-farbknopf:not(.mc-feld-fuss .mc-farbknopf) { margin-top: .3rem; }

/* Das teilbare Gitter. Gross genug, um es als Bild zu erfassen, und in der
   Festbreitenschrift, damit die Kaestchen in Reihen stehen. */
.mc-ch-teilen {
  margin: 1rem 0 1.2rem;
  padding: .9rem 1rem;
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
}
.mc-ch-gitter {
  margin: 0 0 .7rem;
  font-size: 1.35rem;
  letter-spacing: .06em;
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
}

/* ---------- Karten und Fuss ---------- */

.mc-karte {
  background: var(--mc-flaeche);
  /* Links eckig, weil dort der Akzentstreifen sitzt. */
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-akzent);
  color: var(--mc-text);
  text-decoration: none;
  display: flex; align-items: center;
  transition: box-shadow .15s ease;
}
.mc-karte:hover { box-shadow: 0 4px 16px var(--mc-schatten); color: var(--mc-akzent-text); }
.mc-karte-titel { font-weight: 600; }

/* Karten der Hubseiten: Titel oben, Beschreibung darunter.
   .mc-karte allein ist ein Flexkasten mit einer Zeile - mit zwei Spaenen
   darin standen Titel und Text nebeneinander, beide unterstrichen, weil
   .mc-text jeden Link unterstreicht. Beides hier gerade geruckt. */
.mc-text a.mc-hub-karte,
a.mc-hub-karte { display: block; text-decoration: none; color: var(--mc-text); }
.mc-text a.mc-hub-karte:hover { color: var(--mc-akzent-text); }
.mc-hub-karte .mc-karte-titel { display: block; margin-bottom: .35rem; }
.mc-hub-karte .mc-hub-text {
  display: block;
  color: var(--mc-grau);
  font-size: .88rem;
  line-height: 1.45;
  text-decoration: none;
}
.mc-hub-gitter { margin-bottom: 2rem; }

.uk-section-muted { background: var(--mc-gedimmt); }
.mc-faq .uk-accordion-title { font-size: 1.05rem; font-weight: 600; color: var(--mc-text); }
.mc-faq .uk-accordion-content { color: var(--mc-text); }

.mc-fuss {
  background: var(--mc-kopf);
  color: #93a5b3;
  padding: 2.2rem 0 2.6rem;
  margin-top: 3rem;
}
/* Dieselbe Zeile wie im Kopf, damit die Marke unten wiedererkennbar ist. */
.mc-fuss-zeichen {
  color: var(--mc-akzent);
  font-size: .62rem; letter-spacing: .18em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin: 0 0 .15rem;
}
.mc-fuss-name { color: #fff; font-weight: 700; font-size: 1.1rem; margin: 0 0 .4rem; }
.mc-fuss-note { max-width: 46ch; }
.mc-fuss-liste a { color: #b9c6d1; text-decoration: none; font-size: .92rem; }
.mc-fuss-liste a:hover { color: var(--mc-akzent); }

/* Der Fuss traegt nur noch die Wegweiser - eine Zeile, keine Spaltenwand.
   Die Spalten je Bereich sind weg, seit das Kopfmenue den ganzen Bestand
   fuehrt; sie standen sonst ein zweites Mal auf jeder Seite. */
.mc-fuss-wege,
.mc-fuss-recht {
  display: flex; flex-wrap: wrap;
  gap: .5rem 1.4rem;
}
/* uk-list setzt `.uk-list>:nth-child(n+2){margin-top:10px}` - eine
   Pseudoklasse zaehlt wie eine Klasse, das schlaegt jede Regel auf blosses
   `li`. In einer Zeile stand deshalb der erste Eintrag zehn Pixel hoeher als
   die uebrigen. Statt die Spezifitaet hochzuschrauben ist uk-list hier
   abgelegt; die Liste braucht davon nur zwei Zeilen. */
.mc-fuss-wege,
.mc-fuss-recht { margin: 0; padding: 0; list-style: none; }
.mc-fuss-wege li,
.mc-fuss-recht li { margin: 0; }
.mc-fuss-wege a { font-weight: 600; color: #cdd9e3; }
.mc-fuss-recht {
  margin-top: 1.2rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ---------- Druck ---------- */

@media print {
  /* ⚠️ Auf Papier immer die helle Farbwelt.
     Seit dunkel die Vorgabe ist, steht --mc-text auf #e2eaf0 - hellgrau.
     Der Browser druckt Hintergruende nicht mit, also waere das Arbeitsblatt
     hellgrauer Text auf weissem Papier gewesen, praktisch unsichtbar. Und
     ausgerechnet die Arbeitsblaetter sind zum Ausdrucken gemacht.
     Aufgefallen beim Umstellen, nicht beim ersten Ausdruck. */
  :root {
    --mc-akzent-text: #a86c02;
    --mc-auf-akzent:  #000000;
    --mc-seite:   #ffffff;
    --mc-flaeche: #ffffff;
    --mc-gedimmt: #ffffff;
    --mc-linie:   #999999;
    --mc-text:    #000000;
    --mc-grau:    #444444;
    --mc-schatten: none;
  }

  .mc-kopf, .mc-fuss, .mc-steuerung,
  .mc-hoeren, .mc-brotkrumen, .mc-licht, .mc-erweitert { display: none !important; }

  /* Auf Seiten mit Arbeitsblatt bleibt das Blatt stehen, sonst verschwindet
     die Werkzeugflaeche wie ueberall. Bewusst ueber eine eigene Klasse und
     nicht ueber :has(): wo :has() fehlt, wuerde die Regel ignoriert und das
     Arbeitsblatt beim Drucken mit verschwinden. */
  .mc-werkzeug { display: none !important; }
  .mc-werkzeug-druckbar { display: block !important; }
  .mc-werkzeug-druckbar .uk-card,
  .mc-werkzeug-druckbar .uk-card-body { box-shadow: none; border: 0; padding: 0; }
  .mc-blatt { border: 0; padding: 0; background: none; }
  .mc-blatt-loesung { break-before: page; page-break-before: always; }
  .mc-blatt-morse { color: #000; }
  .mc-blatt-linie { border-bottom-color: #999; }
  .mc-hero { background: none; color: #000; padding: 0; }
  .mc-h1, .mc-lead { color: #000; }
  .mc-tabelle { grid-template-columns: repeat(6, 1fr); }
  .mc-tabelle-breit { grid-template-columns: repeat(4, 1fr); }
  .mc-tabelle li { border-color: #999; background: none; }
  .mc-code { color: #000; }
}

/* Der Weg zu den 26 Buchstabenseiten. Ein Raster aus quadratischen Feldern -
   26 Links in einer Zeile waeren eine Bleiwueste, 26 Listenpunkte eine
   Bildschirmlaenge. */
.mc-zeichenindex {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
  gap: .4rem;
  margin: 1rem 0 1.4rem;
}
.mc-zeichenindex-feld {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  background: var(--mc-gedimmt);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--mc-text);
}
/* Der Fliesstext unterstreicht seine Verweise - hier sind es Felder und
   keine Wortverweise, und unterstrichene Buchstaben in Kaesten lesen sich
   wie ein Fehler. */
.mc-text .mc-zeichenindex-feld,
.mc-zeichenindex-feld { text-decoration: none; }
.mc-zeichenindex-feld:hover,
.mc-zeichenindex-feld:focus-visible {
  border-color: var(--mc-akzent);
  color: var(--mc-akzent-text);
  text-decoration: none;
}

/* Der Code in gross auf den Buchstabenseiten - die Antwort auf die Frage,
   mit der jemand kommt, ohne dass er dafuer lesen muss. */
.mc-zeichen-antwort { text-align: center; }
.mc-zeichen-gross {
  margin: 0 0 .4rem;
  font-size: clamp(2rem, 8vw, 3.4rem);
  letter-spacing: .12em;
  line-height: 1.2;
}

/* Die zehn Ziffern einzeln - Sprungziele fuer "7 in morse code" und
   Nachbarn. Kein Raster: die Eintraege sind unterschiedlich lang, und in
   gleich hohen Kaesten stuende die Haelfte leer. */
.mc-ziffer {
  margin: 0 0 .8rem;
  padding: .7rem .9rem;
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
  scroll-margin-top: 6rem;
}
.mc-ziffer-kopf {
  margin: 0 0 .3rem;
  font-size: 1.15rem;
}
.mc-ziffer p:last-child { margin-bottom: 0; }

/* ---------- Timing-Simulatoren (§53, §54, §55) ---------- */

.mc-fe-felder,
.mc-mi-felder { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin-bottom: 1rem; }

.mc-fe-aufgabe { font-size: 1.2rem; min-height: 1.6em; margin: .6rem 0; }

/* Zwei Zeitleisten uebereinander, auf derselben Skala. Der Vergleich ist der
   ganze Zweck - nebeneinander waere er nicht ablesbar. */
.mc-fe-leisten { margin: 1.2rem 0; }
.mc-fe-leisten > div + div { margin-top: .7rem; }
.mc-fe-leiste {
  display: flex;
  height: 2.2rem;
  margin-top: .25rem;
  border-radius: 0 4px 4px 0;
  border-left: 4px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
  overflow: hidden;
}
.mc-fe-teil { display: block; height: 100%; }
.mc-fe-an { background: var(--mc-akzent); }

.mc-fe-wahl { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.mc-fe-zahlen { margin: 0 0 .8rem; color: var(--mc-grau); }
.mc-fe-ergebnis {
  padding: .7rem .9rem;
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-linie);
  background: var(--mc-gedimmt);
}
.mc-fe-gut { border-left-color: #2f7d32; }
.mc-fe-fast { border-left-color: var(--mc-akzent); }
.mc-fe-schlecht { border-left-color: #b3261e; }

/* Der Grenztest: drei Zahlen nebeneinander, weil sie zusammen gelesen
   werden muessen. Eine allein verleitet zum Ueben im falschen Bereich. */
.mc-gr-tempo { font-size: 1.6rem; font-weight: 600; margin: 0; }
.mc-gr-eingabe { display: block; margin: 1rem 0; max-width: 8rem; }
.mc-gr-feld { font-size: 2rem; text-align: center; }
.mc-gr-ergebnis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
  padding: .9rem 1rem;
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
}
.mc-gr-zahl { margin: .2rem 0 0; font-size: 1.35rem; font-weight: 600; }
.mc-gr-hinweis { color: var(--mc-grau); }
.mc-gr-stufe { margin: 0 0 .2rem; color: var(--mc-grau); font-variant-numeric: tabular-nums; }

/* ---------- Telegrafenamt (§49) ---------- */

.mc-tg-formular > label { display: block; margin-bottom: .9rem; }
.mc-tg-rechnung {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
  padding: .9rem 1rem;
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
}
.mc-tg-zahl { margin: .2rem 0 0; font-size: 1.35rem; font-weight: 600; }

/* Die Aufschluesselung zeigt, wo das Geld hingeht. Nur was mehr als ein Wort
   kostet, wird hervorgehoben - sonst geht das Auffaellige im Gleichen unter. */
.mc-tg-aufschluesselung { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.mc-tg-stueck {
  padding: .15rem .45rem;
  border-radius: 4px;
  background: var(--mc-gedimmt);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem;
}
.mc-tg-teuer { background: var(--mc-akzent); color: #16232d; font-weight: 600; }
.mc-tg-sparen { color: var(--mc-grau); margin-bottom: 1rem; }
.mc-tg-morse { min-height: 1.6em; margin-bottom: 1rem; }

/* ---------- Funkraum (§50) ---------- */

.mc-fr-einleitung { margin: .8rem 0 1.2rem; }
.mc-fr-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.mc-fr-liste {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .3rem;
  min-height: 4rem;
  padding: .5rem;
  border-radius: 6px;
  background: var(--mc-gedimmt);
}
/* Die Zielspalte bekommt den Akzentrand - sie ist die Antwort, nicht der
   Vorrat. Rand gerade durchgezogen, nicht in die Rundung gebogen. */
.mc-fr-ziel { border-radius: 0 6px 6px 0; border-left: 4px solid var(--mc-akzent); }

.mc-fr-kachel {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .5rem .7rem;
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  background: var(--mc-flaeche);
  text-align: left;
  cursor: pointer;
}
.mc-fr-kachel:hover { border-color: var(--mc-akzent); }
.mc-fr-nummer {
  flex: none;
  width: 1.6rem; height: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--mc-akzent);
  color: #16232d;
  font-weight: 600;
  font-size: .85rem;
}
/* min-width: 0 ist noetig, damit der Text ueberhaupt umbrechen DARF: ein
   Flex-Element schrumpft ohne das nicht unter seine Inhaltsbreite, und die
   lange Meldung laeuft rechts aus der Kachel heraus. */
.mc-fr-text { min-width: 0; font-size: .9rem; word-break: break-word; }
.mc-fr-ergebnis {
  padding: .7rem .9rem;
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-linie);
  background: var(--mc-gedimmt);
}
.mc-fr-gut { border-left-color: #2f7d32; }
.mc-fr-schlecht { border-left-color: #b3261e; }

/* ---------- DXpedition (§47) ---------- */

.mc-dx-felder { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin-bottom: 1rem; }
.mc-dx-zaehler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 1rem;
  margin: 1rem 0;
  padding: .9rem 1rem;
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
}
.mc-dx-zahl { margin: .2rem 0 0; font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-dx-eingabe { display: block; margin: 1rem 0; max-width: 14rem; }
.mc-dx-feld { font-size: 1.3rem; letter-spacing: .05em; }
.mc-dx-meldung { min-height: 1.6em; margin: .8rem 0; }
.mc-dx-gut { color: #2f7d32; }
.mc-dx-fast { color: var(--mc-akzent-text); }
.mc-dx-schlecht { color: #b3261e; }

/* Das Log: waehrend des Laufs Erinnerungshilfe, danach die Wertung. */
.mc-dx-log { display: flex; flex-wrap: wrap; gap: .3rem; }
.mc-dx-eintrag {
  padding: .15rem .45rem;
  border-radius: 4px;
  background: var(--mc-gedimmt);
  font-size: .9rem;
}

/* ---------- Eisenbahntelegraf (§51) ---------- */

/* Der Hinweis auf den anderen Code steht ganz oben und faellt auf: wer ihn
   uebersieht, uebt mit der falschen Tabelle. */
.mc-eb-warnung {
  margin: 0 0 1rem;
  padding: .6rem .9rem;
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-akzent);
  background: var(--mc-gedimmt);
  font-size: .95rem;
}
.mc-eb-felder { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin-bottom: 1rem; }
.mc-eb-eingabe { display: block; margin: 1rem 0; }
.mc-eb-ergebnis {
  padding: .7rem .9rem;
  border-radius: 0 6px 6px 0;
  border-left: 4px solid var(--mc-linie);
  background: var(--mc-gedimmt);
}
.mc-eb-gut { border-left-color: #2f7d32; }
.mc-eb-schlecht { border-left-color: #b3261e; }
.mc-eb-vermerk {
  margin: .6rem 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
}
.mc-eb-morse { margin-top: .8rem; }

/* ---------- Band abstimmen (§44 Signalsuche, §42 Funkstation) ---------- */

/* Festbreitenschrift und feste Breite: beim Drehen laeuft die Zahl schnell
   durch, und mit proportionalen Ziffern huepfte sie bei jedem Wert. */
.mc-sn-frequenz {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 2.4rem;
  line-height: 1.1;
  margin: 0;
}
.mc-sn-knopf { margin: 0.4rem 0 1rem; }

.mc-sn-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}
/* Ohne min-width laufen die Felder in der Flexzeile ueber ihren Kasten
   hinaus, sobald der Inhalt breiter ist als der Platz. */
.mc-sn-reihe > * { flex: 1 1 9rem; min-width: 0; }

.mc-sn-smeter {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.5rem;
  margin: 0;
}

.mc-sn-skala {
  position: relative;
  height: 3.2rem;
  margin: 0.6rem 0 1rem;
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  background: repeating-linear-gradient(
    to right, transparent 0 calc(10% - 1px), var(--mc-linie) calc(10% - 1px) 10%);
  overflow: hidden;
}
.mc-sn-zeiger {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--mc-akzent);
}
.mc-sn-marke {
  position: absolute;
  bottom: 0.2rem;
  transform: translateX(-50%);
  font-size: 0.72rem;
  white-space: nowrap;
  padding: 0 0.2rem;
  background: var(--mc-flaeche);
}

.mc-sn-auftrag { font-weight: 600; margin: 0 0 0.8rem; }
.mc-sn-eingabe { display: block; margin: 1rem 0 0.6rem; }
.mc-sn-meldung { margin: 0.8rem 0 0; min-height: 1.4em; }
.mc-sn-log { margin-top: 0.6rem; }
.mc-sn-logzeile {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.2rem;
}

/* ---------- Eigene Uebungslisten (§38) ---------- */

.mc-li-felder {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.mc-li-felder > * { flex: 1 1 12rem; min-width: 0; }

.mc-li-eingabe { display: block; margin-bottom: 1rem; }
.mc-li-datei { display: inline-flex; align-items: center; cursor: pointer; }
.mc-li-lage { margin: 0.8rem 0 0; min-height: 1.4em; }

/* Der Bericht. Akzentrand links, und der laeuft gerade aus - keine Rundung
   auf der Akzentseite, sonst entsteht der 3D-Eindruck. */
.mc-li-bericht {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  /* Akzentseite eckig: der farbige Rand darf nicht in die Rundung biegen,
     sonst entsteht der 3D-Eindruck. */
  border-left: 4px solid var(--mc-akzent);
  border-radius: 0 6px 6px 0;
  background: var(--mc-gedimmt);
}
.mc-li-kopf { font-weight: 600; margin: 0 0 0.4rem; }
.mc-li-warnung { font-weight: 600; margin: 0 0 0.4rem; }
.mc-li-verworfen, .mc-li-hinweis { margin: 0 0 0.2rem; font-size: 0.92rem; }

.mc-li-aufgabe {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.3rem;
  min-height: 1.6em;
  margin: 1rem 0;
  overflow-wrap: anywhere;
}
.mc-li-ergebnis { margin: 0.8rem 0 0; min-height: 1.4em; }
.mc-li-richtig { font-weight: 600; }
.mc-li-falsch { font-weight: 600; }

/* ---------- Trainingsnachweis (§35) ---------- */

.mc-ze-felder {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.mc-ze-felder > * { flex: 1 1 12rem; min-width: 0; }

.mc-ze-fehlt {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--mc-akzent);
  border-radius: 0 6px 6px 0;
  background: var(--mc-gedimmt);
}
.mc-ze-kopf { font-weight: 600; margin: 0 0 0.4rem; }
.mc-ze-zeile { margin: 0 0 0.2rem; font-variant-numeric: tabular-nums; }

/* Das Blatt ist ein Bild mit festem Seitenverhaeltnis - es soll auf jedem
   Bildschirm ganz zu sehen sein, nicht seitlich hinauslaufen. */
.mc-ze-blatt { margin: 1rem 0; }
.mc-ze-blatt canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
}

.mc-ze-text { margin: 1rem 0; }
.mc-ze-t-titel { font-weight: 600; font-size: 1.15rem; margin: 0 0 0.3rem; }
.mc-ze-t-wert { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.3rem; }
.mc-ze-t-klein { color: var(--mc-grau); margin: 0 0 0.2rem; }
/* Die Herkunft ist klein, aber nicht versteckt: sie muss lesbar bleiben. */
.mc-ze-t-herkunft {
  color: var(--mc-grau);
  font-size: 0.9rem;
  margin: 0.6rem 0 0;
}
.mc-ze-lage { margin: 0.8rem 0 0; min-height: 1.4em; }

/* ---------- Operator-Pruefung (§64) ---------- */

.mc-pf-felder {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.mc-pf-felder > * { flex: 1 1 12rem; min-width: 0; }
.mc-pf-lage { margin: 0.8rem 0; min-height: 1.4em; }

/* Gesperrt heisst sichtbar gesperrt: dass die Felder waehrend des Hoerens
   nicht zu benutzen sind, IST die Uebung und darf nicht wie ein Fehler
   aussehen. */
.mc-pf-fragen {
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  padding: 1rem;
  margin: 0 0 1rem;
}
.mc-pf-fragen[disabled] { opacity: 0.55; }
.mc-pf-fragen legend { padding: 0 0.4rem; }
.mc-pf-frage { display: block; margin-bottom: 0.7rem; }
.mc-pf-frage > span { display: block; margin-bottom: 0.2rem; }

.mc-pf-ergebnis {
  margin: 1rem 0 0;
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--mc-akzent);
  border-radius: 0 6px 6px 0;
  background: var(--mc-gedimmt);
}
.mc-pf-kopf {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.5rem;
}
.mc-pf-zeile { margin: 0 0 0.2rem; }
.mc-pf-richtig { font-weight: 600; }
.mc-pf-falsch { color: var(--mc-grau); }
.mc-pf-passage {
  margin: 0.8rem 0 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}
.mc-pf-hinweis { margin: 0.6rem 0 0; font-size: 0.92rem; }

/* ---------- Leistungsklassen (§63) ---------- */

.mc-ch-klassenwahl {
  display: block;
  margin: 0 0 0.8rem;
}
.mc-ch-klassenwahl > span { display: block; margin-bottom: 0.2rem; }
.mc-ch-klassenwahl .mc-ch-feld { max-width: 20rem; }
.mc-ch-klassenrat {
  margin: 0 0 0.8rem;
  color: var(--mc-grau);
  font-size: 0.92rem;
}

/* ---------- Seitensuche ---------- */

.mc-su-knopf {
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  padding: 0 0.7rem;
}
.mc-su-knopf:hover, .mc-su-knopf[aria-expanded="true"] { color: var(--mc-akzent); }

/* Die Schicht liegt ueber der Seite und faengt Klicks daneben ab. */
.mc-su-schicht {
  position: fixed;
  inset: 0;
  z-index: 1010;
  background: rgba(16, 28, 38, 0.55);
  display: flex;
  justify-content: center;
  /* Nicht mittig: eine Trefferliste, die beim Tippen waechst, wuerde die
     Eingabe sonst nach oben schieben. Oben festgemacht bleibt sie stehen. */
  align-items: flex-start;
  padding: 4rem 1rem 1rem;
  overflow-y: auto;
}
.mc-su-kasten {
  background: var(--mc-flaeche);
  color: var(--mc-text);
  border-radius: 8px;
  box-shadow: 0 12px 40px var(--mc-schatten);
  width: 100%;
  max-width: 40rem;
  padding: 1rem;
}
.mc-su-zeile { display: flex; gap: 0.6rem; }
.mc-su-zeile > .mc-su-feld { flex: 1 1 auto; min-width: 0; }
.mc-su-meldung { margin: 0.6rem 0 0; min-height: 1.4em; color: var(--mc-grau); }

.mc-su-liste { max-height: 55vh; overflow-y: auto; }
.mc-su-treffer {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}
.mc-su-treffer:hover, .mc-su-aktiv {
  background: var(--mc-gedimmt);
  text-decoration: none;
  color: inherit;
}
.mc-su-titel { display: block; font-weight: 600; }
.mc-su-unter {
  display: block;
  font-size: 0.88rem;
  color: var(--mc-grau);
  margin-top: 0.1rem;
}
.mc-su-hilfe {
  margin: 0.8rem 0 0;
  font-size: 0.82rem;
  color: var(--mc-grau);
}
/* Auf dem Handy hat niemand Pfeiltasten. */
@media (hover: none), (pointer: coarse) { .mc-su-hilfe { display: none; } }

/* Solange die Suche offen ist, scrollt die Seite dahinter nicht mit. */
body.mc-su-offen { overflow: hidden; }

/* ---------- Hinweis auf die taegliche Challenge ---------- */

.mc-chhinweis {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1.6rem;
  padding: 0.9rem 1.1rem;
  /* Akzentseite eckig: der farbige Rand darf nicht in die Rundung biegen. */
  border-left: 4px solid var(--mc-akzent);
  border-radius: 0 6px 6px 0;
  background: var(--mc-gedimmt);
}
.mc-chhinweis-text { flex: 1 1 18rem; min-width: 0; }
.mc-chhinweis-titel { font-weight: 600; margin: 0 0 0.15rem; }
.mc-chhinweis-satz { margin: 0; color: var(--mc-grau); font-size: 0.94rem; }

/* Der Knopf in der Menuezeile. */
.mc-challenge-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.2rem;
  font-size: 0.94rem;
  /* ⚠️ NICHT inherit. Die Menuezeile hat einen dunklen Grund (--mc-kopf2),
     und geerbt kam die dunkle Textfarbe heraus - der Knopf war unlesbar.
     Dieselbe Farbe wie die Menuepunkte daneben, damit er dazugehoert. */
  color: #e9f0f6;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.mc-challenge-knopf:hover, .mc-challenge-hier { color: var(--mc-akzent); text-decoration: none; }
/* Der Punkt blinkt die Beschriftung, vor der er steht - und er soll dabei
   aussehen wie eine Lampe und nicht wie ein umschaltendes Pixel.
   Drei Dinge machen den Unterschied:
     - ein Hof aus zwei box-shadow-Ringen statt einer harten Kante,
     - ein winziges Aufblaehen (scale), weil helle Lampen groesser wirken,
     - und vor allem eine ASYMMETRISCHE Blende: schnell an, langsamer aus.
   Der letzte Punkt ist der wichtigste. Eine echte Signallampe hat einen
   Gluehfaden, der sofort hell wird und danach ausglueht - genau dieses
   Nachleuchten unterscheidet eine Lampe von einem Schalter. In CSS geht das,
   indem der EIN-Zustand seine eigene, kuerzere Blende mitbringt. */
.mc-challenge-punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mc-akzent);
  /* Aus: dunkel, aber nicht weg. Ein verschwindender Punkt liesse die Zeile
     bei jedem Zeichen zucken. */
  opacity: 0.22;
  box-shadow: none;
  flex: none;
  /* Das Ausglühen. Laenger als das Einschalten, aber kuerzer als ein Punkt
     bei 18 WpM dauert (67 ms) - sonst verschleifen zwei Punkte zu einem
     Strich, und dann ist es nicht mehr lesbar. */
  transition: opacity 55ms ease-out, box-shadow 55ms ease-out, transform 55ms ease-out;
}
.mc-challenge-punkt.mc-blink-an {
  opacity: 1;
  /* Zwei Ringe: der innere ist der helle Kern, der aeussere der weiche Hof.
     Beide in der Akzentfarbe, damit es warm wirkt wie eine Gluehlampe und
     nicht kalt wie eine Leuchtdiode. */
  box-shadow:
    0 0 5px 1px rgba(242, 164, 23, 0.85),
    0 0 12px 3px rgba(242, 164, 23, 0.45);
  transform: scale(1.18);
  /* Einschalten geht schneller als Ausgehen - siehe oben. */
  transition: opacity 18ms ease-in, box-shadow 18ms ease-in, transform 18ms ease-in;
}
/* Wer weniger Bewegung eingestellt hat, sieht eine ruhig leuchtende Lampe -
   das Skript blinkt dann gar nicht, sondern setzt die Klasse einmal fest.
   Auch dann darf sie leuchten, nur eben ohne Uebergang. */
@media (prefers-reduced-motion: reduce) {
  .mc-challenge-punkt,
  .mc-challenge-punkt.mc-blink-an { transition: none; }
}

/* ---------- Die Dankesseite ---------- */

/* ⚠️ Dunkel, und zwar in BEIDEN Farbschemata. Auf der weissen Karte gingen
   die Funken fast unter - bernsteinfarbene Punkte auf Weiss haben zu wenig
   Kontrast, und ein Feuerwerk am Taghimmel ist keins. Das ist die einzige
   Karte auf der Seite, die sich nicht dem Schema fuegt, und sie tut es aus
   einem Grund, der sich ansehen laesst. */
.mc-un-karte {
  position: relative;
  overflow: hidden;
  background: var(--mc-kopf);
  color: #e9f0f6;
  border: 0;
}
.mc-un-karte .mc-un-gross { color: #ffffff; }
.mc-un-karte .mc-un-satz { color: #c6d3de; }
.mc-un-karte .mc-un-erklaerung { color: #93a6b5; }
/* UIkit gibt jedem <code> einen hellen Kasten. Auf dem Nachthimmel ist das
   eine weisse Pille mitten im Bild. */
.mc-un-karte .mc-code {
  color: var(--mc-akzent);
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 1.15rem;
}
/* Die Knoepfe muessen auf dunklem Grund lesbar bleiben - die Voreinstellung
   von UIkit ist auf Hell gerechnet. */
.mc-un-karte .mc-knopf {
  background: transparent;
  color: #e9f0f6;
  border-color: rgba(255, 255, 255, 0.35);
}
.mc-un-karte .mc-knopf:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.mc-un-karte .mc-un-trotzdem a { color: #93a6b5; }
/* Die Leinwand liegt HINTER dem Text und faengt keine Klicks ab. */
.mc-un-leinwand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mc-un-inhalt { position: relative; text-align: center; padding: 1.5rem 0 0.5rem; }
.mc-un-gross {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 0.8rem;
}
.mc-un-satz {
  max-width: 34rem;
  margin: 0 auto 1.6rem;
}
.mc-un-morse { margin: 0 0 1.4rem; }
.mc-un-morse .mc-code { font-size: 1.1rem; }
.mc-un-erklaerung {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--mc-grau);
}
.mc-un-inhalt .mc-steuerung { justify-content: center; }
/* Die leise Moeglichkeit: klein, unaufdringlich, weit unten. Sie soll da
   sein, nicht drängen. */
.mc-un-trotzdem {
  margin: 1.8rem 0 0;
  font-size: 0.9rem;
}
.mc-un-trotzdem a { color: var(--mc-grau); }


/* ---------- Die 404-Seite ---------- */

/* Ein Sendemast ruft CQ, und die Wellen laufen ins Leere. Das ist, was ein
   404 ist - auf einer Morseseite laesst es sich zeigen statt behaupten.

   ⚠️ Zwei Dinge sind hier keine Verzierung, sondern Pflicht:

   1. Die Wellen laufen langsam. Das Projekt haelt sich an die Regel, dass
      nichts oefter als dreimal je Sekunde aufblitzen darf (WCAG 2.3.1) -
      morse-visual.js hat dafuer eigens blitzrate() und istKritisch(). Eine
      Welle alle 1,1 Sekunden liegt weit darunter, und sie schwillt an,
      statt zu schalten.

   2. Wer weniger Bewegung eingestellt hat, bekommt dasselbe Bild ohne jede
      Bewegung - drei stehende Wellen, die nach aussen blasser werden. Nicht
      ein leerer Kasten: das Bild traegt die Aussage, nicht die Bewegung. */

.mc-nf { text-align: center; }

.mc-nf-bild {
  max-width: 30rem;
  margin: 0 auto 1.2rem;
}
.mc-nf-bild svg { width: 100%; height: auto; display: block; }

/* Der Mast selbst: ruhig, in der Textfarbe, nicht im Akzent. Er ist nicht
   die Nachricht - die Leere um ihn herum ist es. */
.mc-nf-mast line {
  stroke: var(--mc-grau);
  stroke-width: 2;
  stroke-linecap: round;
}
.mc-nf-spitze { fill: var(--mc-akzent); }

/* ⚠️ Gewachsen wird ueber transform: scale() und NICHT ueber `r`.
   Firefox kann die Geometrie-Eigenschaften eines SVG (r, cx, cy) nicht per
   CSS animieren - das koennen nur Chrome und Safari. Der erste Anlauf
   animierte `r`, lief in Chromium einwandfrei, und in Firefox stand das
   Bild still. Gemessen hatte ich es nur in einem Browser, und das war der
   Fehler.

   transform-box: view-box, damit sich transform-origin auf das
   Koordinatensystem des SVG bezieht und nicht auf den Kasten des Kreises -
   sonst waechst die Welle aus ihrer eigenen Mitte statt aus der
   Mastspitze. */
.mc-nf-wellen circle {
  fill: none;
  stroke: var(--mc-akzent);
  stroke-width: 2;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 80px 96px;
  animation: mc-nf-welle 4.4s linear infinite;
  animation-delay: var(--mc-nf-versatz, 0s);
}
@keyframes mc-nf-welle {
  0%   { transform: scale(1);  opacity: 0;   stroke-width: 2; }
  8%   { opacity: .75; }
  /* Nach aussen duenner: ein Signal wird schwaecher, nicht kleiner.
     non-scaling-stroke (als Attribut am Kreis) sorgt dafuer, dass die Linie
     beim Vergroessern nicht mitwaechst - sonst waere sie am Rand ein
     Balken. */
  100% { transform: scale(34); opacity: 0;   stroke-width: .6; }
}

.mc-nf-sterne circle {
  fill: var(--mc-text);
  opacity: .18;
  animation: mc-nf-stern 6s ease-in-out infinite;
  animation-delay: var(--mc-nf-versatz, 0s);
}
@keyframes mc-nf-stern {
  0%, 100% { opacity: .12; }
  50%      { opacity: .34; }
}

/* Der Ruf ueber der Ueberschrift. */
.mc-nf-ruf {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: center;
  gap: .35rem .9rem;
  margin: 0 0 .3rem;
  font-size: .9rem;
  color: var(--mc-grau);
}
.mc-nf-ruf .mc-code { color: var(--mc-akzent); letter-spacing: .12em; }
.mc-nf-titel { margin-top: 0; }
.mc-nf .mc-lead { margin: .4rem auto 0; }

.mc-nf-wege { margin-top: 2.2rem; }
.mc-nf-wege .mc-feld-titel { margin-bottom: .7rem; }
.mc-nf-kacheln {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.mc-nf-kachel {
  display: block;
  padding: .7rem .8rem;
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  background: var(--mc-flaeche);
  color: var(--mc-text);
  font-size: .95rem;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.mc-nf-kachel:hover,
.mc-nf-kachel:focus-visible {
  border-color: var(--mc-akzent);
  color: var(--mc-akzent-text);
  text-decoration: none;
}

/* Ohne Bewegung: drei stehende Wellen statt vier laufender. Sie bleiben
   sichtbar, nur eben still - das Bild soll auch dann etwas sagen. */
@media (prefers-reduced-motion: reduce) {
  /* Auch hier scale() statt r - aus demselben Grund. */
  .mc-nf-wellen circle { animation: none; }
  .mc-nf-wellen circle:nth-child(1) { transform: scale(4);  opacity: .55; stroke-width: 2; }
  .mc-nf-wellen circle:nth-child(2) { transform: scale(11); opacity: .38; stroke-width: 1.5; }
  .mc-nf-wellen circle:nth-child(3) { transform: scale(20); opacity: .22; stroke-width: 1; }
  .mc-nf-wellen circle:nth-child(4) { transform: scale(30); opacity: .1;  stroke-width: .7; }
  .mc-nf-sterne circle { animation: none; opacity: .2; }
}

/* Auf Papier hat eine Fehlerseite nichts verloren. */
@media print {
  .mc-nf-bild, .mc-nf-wege { display: none; }
}

/* ---------- CW World: die Weltkarte ---------- */

.mc-ka-zahl { font-size: 1.05rem; margin: 0 0 .9rem; }

.mc-ka-liste {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-bottom: 1.2rem;
}
.mc-ka-kontinent {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .6rem;
  padding: .55rem .7rem;
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  font-size: .92rem;
  color: var(--mc-grau);
}
/* Ein gearbeiteter Kontinent bekommt den Akzent - und zwar am Rand und in
   der Zahl, nicht als Flaeche: sechs farbige Kaesten waeren ein Balkendiagramm
   ohne Achse. */
.mc-ka-kontinent.mc-ka-hat { color: var(--mc-text); border-color: var(--mc-akzent); }
.mc-ka-anzahl { font-weight: 700; color: var(--mc-grau); }
.mc-ka-kontinent.mc-ka-hat .mc-ka-anzahl { color: var(--mc-akzent-text); }

.mc-ka-hinweis { margin: .5rem 0 0; }

.mc-ka-buehne { margin-top: 1rem; }
.mc-ka-karte {
  /* Leer und ohne Hoehe waere der Kasten unsichtbar; mit fester Hoehe
     springt die Seite beim Laden nicht. */
  height: 24rem;
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  background: var(--mc-gedimmt);
}
.mc-ka-lage { margin: .5rem 0 0; font-size: .9rem; color: var(--mc-grau); }

/* Die Punkte auf der Karte. Klein und kraeftig - eine Station ist ein Ort,
   keine Flaeche. */
.mc-ka-punkt {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--mc-akzent);
  box-shadow: 0 0 0 2px rgba(14, 24, 32, .75);
  cursor: default;
}

@media (max-width: 640px) {
  .mc-ka-karte { height: 18rem; }
}

/* ---------- Der Wasserfall ---------- */

.mc-wf-bild {
  display: block;
  width: 100%;
  /* Die Hoehe steht auch im Markup - ein Canvas ohne Masse ist 300x150 und
     das Bild waere unscharf. Hier nur die Anzeigegroesse. */
  height: 15rem;
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  background: var(--mc-seite);
  /* Die Spuren sind Kanten, keine Flaechen - Glaetten macht sie matschig. */
  image-rendering: pixelated;
}
.mc-wf-achse {
  display: flex; justify-content: space-between;
  margin: .3rem 0 1rem;
  font-size: .78rem;
  color: var(--mc-grau);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.mc-wf-felder {
  display: grid; gap: .8rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-bottom: .9rem;
}
.mc-wf-felder label { display: block; }
.mc-wf-eingabe { display: block; margin-bottom: .9rem; }
.mc-wf-lage { margin: .8rem 0 0; font-size: .92rem; color: var(--mc-grau); min-height: 1.4em; }

/* Der Wasserfall in der Funkstation - flacher als der auf der eigenen
   Seite: er ist dort eine Zutat zum Abstimmen und nicht die Hauptsache. */
.mc-sn-wasserfall {
  display: block;
  width: 100%;
  height: 6rem;
  margin-bottom: .8rem;
  border: 1px solid var(--mc-linie);
  border-radius: 6px;
  background: var(--mc-seite);
  image-rendering: pixelated;
}

/* ---------- Rueckmeldung (V3 §38) ---------- */

/**
 * Das Honigtoepfchen.
 *
 * ⚠️ NICHT display:none und nicht visibility:hidden. Einige Automaten
 * ueberspringen genau diese beiden, weil sie bekannt sind - und
 * hidden-Attribute obendrein. Aus dem Sichtfeld geschoben und ohne Groesse
 * ist das Feld fuer den Automaten ein Feld wie jedes andere.
 *
 * Fuer Menschen ist es unerreichbar: die Vorlage setzt aria-hidden und
 * tabindex="-1", ein Vorleseprogramm bietet es also gar nicht erst an. Wer
 * es doch ausfuellt, bekommt eine freundliche Antwort und nichts wird
 * gespeichert - das ist bewusst so, siehe app/api/rueckmeldung.php.
 */
.mc-honig {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mc-rm-feld { max-width: 22rem; }
.mc-rm-zaehler { margin: .3rem 0 0; min-height: 1.2em; }
.mc-rm-lage { min-height: 1.5em; margin: 1rem 0 .3rem; font-weight: 600; }
.mc-rm-gut { color: #3f9c5a; }
.mc-rm-fehler { color: #d0454b; }
/* Der Datenschutzsatz steht unter dem Formular und soll gelesen werden
   koennen - deshalb nicht kleiner als der Rest der Meta-Zeilen, nur
   ruhiger. */
.mc-rm-datenschutz { margin-top: 1.6rem; line-height: 1.6; max-width: 46rem; }

/* ---------- Readiness (V3 §17) ---------- */

.mc-ko-block { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--mc-linie); }
.mc-ko-kopf { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin: .4rem 0 1rem; }
.mc-ko-wert { font-size: 1.9rem; line-height: 1.1; }
.mc-ko-lage { margin: 0; }

.mc-ko-achsen { list-style: none; margin: 0; padding: 0; }
.mc-ko-achse {
  display: grid;
  /* Name, Balken, Zahl - der Balken nimmt, was uebrig ist. */
  grid-template-columns: minmax(7rem, 11rem) 1fr minmax(4.5rem, auto);
  align-items: center;
  gap: .7rem;
  padding: .32rem 0;
}
.mc-ko-name { font-size: .92rem; }
.mc-ko-zahl { font-size: .92rem; text-align: right; font-variant-numeric: tabular-nums; }

.mc-ko-balken { height: .5rem; background: var(--mc-linie); border-radius: 3px; overflow: hidden; }
.mc-ko-fuellung {
  display: block; height: 100%;
  background: var(--mc-akzent);
  /* Der Akzentrand laeuft gerade aus, er biegt nicht in die Rundung -
     sonst entsteht der 3D-Eindruck, der auf dieser Seite nicht vorkommt. */
  border-radius: 3px 0 0 3px;
}

/* ⚠️ Eine unbelegte Achse wird GEDAEMPFT und nicht rot. Sie ist kein
   schlechtes Ergebnis, sondern gar keines - und Rot liest sich als Fehler. */
.mc-ko-leer .mc-ko-name,
.mc-ko-leer .mc-ko-zahl { color: var(--mc-grau); }

@media (max-width: 480px) {
  /* Auf dem Handy passen drei Spalten nicht nebeneinander, ohne dass der
     Name umbricht. Balken und Zahl ruecken unter den Namen. */
  .mc-ko-achse { grid-template-columns: 1fr auto; }
  .mc-ko-balken { grid-column: 1 / -1; order: 3; }
}

/* ---------- Erfahrung und Abzeichen (V3 §26-§28) ---------- */

.mc-az-block { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--mc-linie); }
.mc-az-kopf { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .4rem 0 1rem; }
.mc-az-stufe { font-size: 1.4rem; }
.mc-az-xp { margin: 0; }
.mc-az-balken {
  flex: 1 1 8rem; min-width: 6rem; height: .5rem;
  background: var(--mc-linie); border-radius: 3px; overflow: hidden;
}
.mc-az-fuellung {
  display: block; height: 100%; background: var(--mc-akzent);
  /* Gerade auslaufender Akzent, keine Rundung an der Kante. */
  border-radius: 3px 0 0 3px;
}

.mc-az-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .3rem .9rem;
}
.mc-az-abzeichen {
  display: flex; justify-content: space-between; gap: .6rem;
  padding: .3rem 0; font-size: .92rem;
  /* ⚠️ Unerreichte werden GEDAEMPFT und nicht ausgeblendet. Eine Liste, die
     nur zeigt, was man hat, verschweigt, was es gibt - dann ist ein
     Abzeichen kein Ziel, sondern eine Ueberraschung. */
  color: var(--mc-grau);
}
.mc-az-hat { color: var(--mc-text); }
.mc-az-hat .mc-az-wie { color: var(--mc-akzent-text); }
.mc-az-wie { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Breite Tabellen (Bandplan und was noch kommt) ---------- */

/**
 * Eine Tabelle, die nicht schmaler kann, rollt IN SICH - nicht die Seite.
 *
 * ⚠️ Ohne diesen Kasten schiebt eine dreispaltige Frequenztabelle auf dem
 * Handy die ganze Seite waagerecht, und man wischt am Inhalt vorbei statt
 * durch ihn. Derselbe Fehler wie bei der Morsezeile im Telegrafenamt am
 * 2026-08-31, nur mit einer Tabelle statt einer Textzeile.
 */
.mc-tabelle-rollt {
  overflow-x: auto;
  /* Damit auf dem Handy sichtbar ist, DASS es weitergeht. */
  -webkit-overflow-scrolling: touch;
  margin: .6rem 0 1rem;
}
.mc-tabelle-rollt table { margin: 0; }
.mc-bp-tabelle td:first-child { white-space: nowrap; font-weight: 600; }
.mc-bp-tabelle td { font-variant-numeric: tabular-nums; }

/* ---------- Funkwetter (V3, Abschnitt H) ---------- */

.mc-fw-werte {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1rem; margin: .4rem 0 1.6rem;
}
.mc-fw-wert { display: flex; flex-direction: column; gap: .15rem; }
.mc-fw-wert strong { font-size: 1.7rem; line-height: 1.1; }
.mc-fw-lage { font-size: .85rem; }

/* Die Einordnung faerbt nur das WORT daneben, nicht die Zahl. Die Zahl ist
   die Messung, die Farbe ist unsere Deutung - und die soll sich davon
   unterscheiden lassen. */
.mc-fw-gut { color: #3f9c5a; }
.mc-fw-mittel { color: var(--mc-akzent-text); }
.mc-fw-schlecht { color: #d0454b; }
.mc-fw-unbekannt { color: var(--mc-grau); }

.mc-fw-tabelle td:first-child { white-space: nowrap; font-weight: 600; }
.mc-fw-lage-good { color: #3f9c5a; }
.mc-fw-lage-fair { color: var(--mc-akzent-text); }
.mc-fw-lage-poor,
.mc-fw-lage-closed { color: #d0454b; }

/* Ein alter oder fehlender Stand ist ein Hinweis und keine Fehlermeldung -
   gedaempft, nicht rot. Rot hiesse "kaputt", und das ist es nicht. */
.mc-fw-alt, .mc-fw-leer {
  border-left: 3px solid var(--mc-akzent);
  border-radius: 0 6px 6px 0;
  background: rgba(255, 255, 255, .03);
  padding: .7rem .9rem; margin: 0 0 1.2rem;
}
.mc-fw-stempel { margin-top: 1.4rem; }

/* ---------- Graulinie (V3, Abschnitt H) ---------- */

.mc-gl-uhr {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem; margin: .4rem 0 1.2rem;
}
.mc-gl-zeit { font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mc-gl-zenit { font-size: 1.1rem; line-height: 1.4; }

.mc-gl-karte {
  width: 100%; height: 22rem; border-radius: 6px; overflow: hidden;
  background: var(--mc-flaeche); border: 1px solid var(--mc-linie);
}
@media (max-width: 640px) { .mc-gl-karte { height: 15rem; } }

.mc-gl-tabelle td { font-variant-numeric: tabular-nums; }
.mc-gl-tabelle td:first-child { font-weight: 600; white-space: nowrap; }

/* Der Zustand faerbt die ganze Zeile ruhig ein. Die Graulinie bekommt den
   Akzent - sie ist das, wonach man auf dieser Seite sucht. */
.mc-gl-nacht td { color: var(--mc-grau); }
.mc-gl-graulinie td { color: var(--mc-akzent-text); }