/* Darstellung des Werkzeugkatalogs.
 *
 * Die Katalogseiten werden von scripts/katalog_bauen.py erzeugt. Hier stehen
 * nur die Formen, die Markdown nicht hergibt:
 *   - die Tafel mit festen Spaltenbreiten und schräg gestellten Spaltenköpfen
 *   - die Zeichen (Symbole) in den Zellen samt Erklärungsblock
 *   - das Umschalten der Tafel in eine Blockliste auf schmalen Geräten
 *   - die Icons erben die Textfarbe, damit sie in heller und dunkler
 *     Darstellung gleich gut lesbar sind (fill: currentColor).
 */

/* --- Zeichen in den Zellen ------------------------------------------------ */

.mt-zeichen {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  line-height: 0;
  color: inherit;
}

.mt-zeichen svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.mt-zeichen + .mt-zeichen {
  margin-left: 0.18em;
}

/* Ein Zeichen, das für "nicht vorgesehen / nicht nötig" steht, wird
 * zurückgenommen — es soll die Aufmerksamkeit nicht binden. */
.mt-zeichen.mt-aus svg {
  opacity: 0.32;
}

/* --- Die Tafel ------------------------------------------------------------ */

/* Die Tafel trägt die Klasse `mt-tafel`, und das ist tragend, nicht Kosmetik:
 * mkdocs-material hängt jede Tabelle ohne Klasse in einen eigenen Rahmen und
 * setzt sie auf `display: inline-block` — also „so breit wie der Inhalt".
 * Dadurch gilt `table-layout: fixed` nicht, und die nowrap-Kopftexte (60-115 px)
 * bestimmen die Spaltenbreiten selbst: die Tafel wurde 788 px breit in 688 px
 * Platz und lief rechts heraus. Mit eigener Klasse greift die Regel des Themes
 * nicht mehr, die Tafel füllt ihren Bereich, und die Spaltenbreiten aus dem
 * <colgroup> gelten. */
.mt-tafel {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.mt-tafel thead th {
  height: 4.6rem;
  position: relative;
  padding: 0;
  vertical-align: bottom;
  border-bottom: 2px solid var(--md-default-fg-color--lightest, #dcdcdc);
}

/* Der Kopftext hängt absolut im Kopf. Dadurch zählt er NICHT als Inhalt der
 * Spalte (siehe oben) und darf trotzdem um 45 Grad gedreht stehen.
 *
 * `left: 0.72rem` ist kein Geschmack: beim Drehen um den linken Fußpunkt
 * wandert die obere linke Ecke der Textzeile um 0,707 x Zeilenhöhe nach LINKS.
 * Ohne diesen Ausgleich ragt der Kopftext 9 px in die Nachbarspalte (gemessen:
 * Luft links -9 px). */
.mt-tafel thead th.mt-gedreht > span {
  position: absolute;
  left: 0.72rem;
  bottom: 0.35rem;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
  white-space: nowrap;
  font-size: 0.74rem;
  line-height: 1.1;
  color: var(--md-default-fg-color--light, #444);
}

/* Die erste Spalte bleibt waagerecht: sie trägt den Werkzeugnamen, und
 * schräg gestellte Namen sind schlechter zu lesen. */
.mt-tafel thead th.mt-waagerecht {
  font-size: 0.76rem;
  padding: 0.3rem 0.25rem;
  text-align: left;
}

.mt-tafel td {
  padding: 0.42rem 0.25rem;
  vertical-align: middle;
}

.mt-tafel td.mt-werkzeug {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-tafel td.mt-zellen-zeichen {
  text-align: center;
  white-space: nowrap;
}

/* Ein Werkzeug belegt zwei Zeilen: Zeichen oben, Beschreibung darunter über
 * die volle Breite. In einer Spalte wäre der Text auf ~160 px gequetscht und
 * die Zeile dadurch 150-330 px hoch geworden. */
.mt-tafel tr.mt-kopf td {
  border-top: 1px solid var(--md-default-fg-color--lightest, #f0f0f0);
}

.mt-tafel tr.mt-kopf.mt-erst td {
  border-top: none;
}

.mt-tafel tr.mt-text td {
  padding: 0.1rem 0.25rem 0.5rem;
  color: var(--md-default-fg-color--light, #555);
  font-size: 0.79rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest, #eee);
}

/* --- Erklärung der Zeichen ------------------------------------------------ */

.mt-legende {
  border: 1px solid var(--md-default-fg-color--lightest, #e3e3e3);
  border-radius: 0.2rem;
  background: var(--md-code-bg-color, #f7f7f8);
  padding: 0.35rem 0.7rem;
  margin: 0.2rem 0 1.1rem;
  font-size: 0.76rem;
}

.mt-legende summary {
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem 0.9rem;
  flex-wrap: wrap;
  min-height: 1.4rem;
}

.mt-legende summary .mt-mini {
  font-weight: 400;
  color: var(--md-default-fg-color--light, #555);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.mt-legende[open] summary {
  margin-bottom: 0.4rem;
}

.mt-legende ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.16rem 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.mt-legende li {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.mt-legende .mt-gruppe {
  font-weight: 700;
  min-width: 4.6rem;
}

/* --- Zeile mit Zeichen auf der Seite der laufenden Dienste ---------------- */

.mt-zeichenzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1.1rem;
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
}

.mt-zeichenzeile .mt-gruppe {
  font-weight: 700;
  margin-right: 0.15rem;
}

/* --- Schmale Geräte: die Tafel wird zur Blockliste ------------------------ */

/* Unter 46em (736 px) hat eine siebenspaltige Tafel keinen Platz mehr, ohne
 * dass etwas abgeschnitten wird. Dann steht jedes Werkzeug untereinander: Name,
 * darunter die Zeichen in einer Zeile, darunter die Beschreibung.
 *
 * Die Zeichen stehen hier OHNE Beschriftung: sechs beschriftete Blöcke
 * untereinander kosteten 145 px je Werkzeug (gemessen), als eine Zeile sind es
 * rund 25 px. Die Wörter trägt der Erklärungsblock direkt darüber — seine
 * Kopfzeile nennt Kamera, Mikrofon und Anmeldung im Klartext. */
@media screen and (max-width: 45.9em) {
  .mt-tafel,
  .mt-tafel tbody,
  .mt-tafel tr,
  .mt-tafel td {
    display: block;
    width: auto;
  }

  .mt-tafel thead {
    display: none;
  }

  /* Name und Zeichen in eine Zeile: getrennt untereinander kostete das je
   * Werkzeug 25-40 px zusätzliche Höhe, und auf dem Telefon ist Scrollstrecke
   * das knappste Gut. */
  .mt-tafel tr.mt-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.55rem;
  }

  .mt-tafel td.mt-werkzeug {
    flex: 1 1 auto;
    white-space: normal;
    overflow: visible;
    padding: 0.55rem 0 0.05rem 0.25rem;
  }

  .mt-tafel td.mt-zellen-zeichen {
    display: inline;
    text-align: left;
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }

  .mt-tafel td.mt-zellen-zeichen::before {
    content: none;
  }

  /* Leere Zellen („nichts nötig") belegten in der Blockliste trotzdem Platz:
   * bei sechs Zellen summierte sich allein der Abstand auf 66 px und warf die
   * Zeichen auf drei Zeilen. In der Blockliste gibt es keine Spalten, die
   * ausgerichtet werden müssten — deshalb verschwinden sie hier ganz. */
  .mt-tafel td.mt-zellen-zeichen:empty {
    display: none;
  }

  /* Zeichen kleiner, damit alle in eine Zeile passen (gemessen: 7 Zeichen
   * plus Werkzeugname bleiben unter 358 px). */
  .mt-tafel .mt-zeichen {
    width: 1.0em;
    height: 1.0em;
  }

  .mt-tafel tr.mt-kopf td {
    border-top: none;
  }

  .mt-tafel tr.mt-text td {
    padding: 0.2rem 0.25rem 0.75rem;
    font-size: 0.78rem;
    line-height: 1.45;
  }
  }

  /* ------------------------------------------------------------------
  * WebGPU: Hinweiskasten und Kennzeichnung.
  *
  * Der Kasten steht in der erzeugten Katalogseite und ist zunächst verborgen;
  * das Skript der Seite blendet ihn ein, wenn der Browser kein WebGPU kann.
  * Ohne Skript bleibt er weg — es gibt keinen Alarm ohne Anlass.
  * ------------------------------------------------------------------ */
  .mt-webgpu-hinweis {
  border-left: 0.25rem solid #b3261e;
  background: var(--md-code-bg-color);
  padding: 0.6rem 0.8rem;
  margin: 0.8rem 0 1.4rem;
  border-radius: 0.1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  }

  .mt-webgpu-hinweis[hidden] {
  display: none;
  }

  .mt-webgpu-hinweis strong {
  color: #b3261e;
  }

  html[data-md-color-scheme="slate"] .mt-webgpu-hinweis strong {
  color: #ff8a80;
  }

  /* Betroffene Zeilen hervorheben: sonst merkt die Lehrkraft erst im Werkzeug,
  * dass es auf diesem Gerät nicht läuft. */
  html[data-mt-webgpu="nein"] .mt-tafel tr.mt-braucht-webgpu td {
  background: rgba(179, 38, 30, 0.07);
  }

  html[data-md-color-scheme="slate"][data-mt-webgpu="nein"] .mt-tafel tr.mt-braucht-webgpu td {
  background: rgba(255, 138, 128, 0.12);
  }

  html[data-mt-webgpu="nein"] .mt-tafel tr.mt-braucht-webgpu td.mt-werkzeug::after {
  content: " (braucht WebGPU)";
  color: #b3261e;
  font-size: 0.78em;
  }

  html[data-md-color-scheme="slate"][data-mt-webgpu="nein"] .mt-tafel tr.mt-braucht-webgpu td.mt-werkzeug::after {
  color: #ff8a80;
  }

  /* Das Zeichen in der Spalte „Grafik" ist ein Verweis auf die Erklärseite. */
  .mt-webgpu-link {
  color: inherit;
  text-decoration: none;
  }

  .mt-webgpu-link .mt-zeichen {
  border-bottom: 1px dotted currentColor;
  }


/* --- Kopfzeile: Werkzeugkasten als Zeichen -------------------------------- */

/* Ohne Größenangabe übernimmt das Zeichen seine eigene Höhe aus der Datei und
 * wirkt neben dem Schriftzug zu klein. 1,7 rem entspricht in etwa der
 * Versalhöhe des Titels. */
.md-header__button.md-logo svg,
.md-header__button.md-logo img {
  height: 1.7rem;
  width: auto;
}

/* --- Erklärtext am Zeichen (eigener Kasten statt title=) ------------------ */

/* Der Browser zeigt `title` erst nach etwa einer Sekunde. Das war für die
 * Erklärungen an den Zeichen zu spät — man war mit der Maus schon weiter.
 * Deshalb bringt jedes Zeichen seinen Text in data-mt-tipp mit, und der Kasten
 * erscheint nach 0,15 s. `aria-label` tragen die Zeichen weiterhin, damit
 * Vorleseprogramme den Text bekommen. */
.mt-zeichen[data-mt-tipp] {
  position: relative;
  cursor: help;
}

.mt-zeichen[data-mt-tipp]::after {
  content: attr(data-mt-tipp);
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 15rem;
  padding: 0.28rem 0.5rem;
  border-radius: 0.15rem;
  background: var(--md-default-fg-color, #222);
  color: var(--md-default-bg-color, #fff);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 40;
  transition: opacity 0.08s ease 0.15s, visibility 0s linear 0.3s;
}

.mt-zeichen[data-mt-tipp]:hover::after,
.mt-zeichen[data-mt-tipp]:focus::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.15s, 0s;
}

/* Am rechten Rand der Tafel darf der Kasten nicht aus dem Bild laufen. */
.mt-tafel td:last-child .mt-zeichen[data-mt-tipp]::after,
.mt-zeichenzeile .mt-zeichen[data-mt-tipp]:last-child::after {
  left: auto;
  right: 0;
  transform: none;
}

/* --- Startknopf und Hinweis auf externe Werkzeuge ------------------------- */

/* Ein Klick im Katalog führt immer zuerst hierher; gestartet wird von dieser
 * Seite. Der Knopf ist deshalb kein Beiwerk, sondern das Ziel der Seite. */
.mt-kurz {
  font-size: 0.95rem;
}

.mt-start,
.mt-extern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0.7rem 0 1rem;
}

.mt-extern {
  display: block;
  border-left: 0.25rem solid var(--md-primary-fg-color);
  background: var(--md-code-bg-color);
  border-radius: 0.1rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  line-height: 1.5;
}

.mt-extern > a.mt-start-knopf {
  display: inline-block;
  margin-top: 0.6rem;
}

.mt-start-knopf {
  display: inline-block;
  padding: 0.5rem 1.15rem;
  border-radius: 0.2rem;
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color) !important;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}

.mt-start-knopf:hover {
  filter: brightness(1.12);
}

.mt-start-adresse {
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light, #666);
  word-break: break-all;
}

.mt-start-aus {
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light, #666);
}

/* --- Filter-Chips über der Tafel ----------------------------------------- */

.mt-filter {
  border: 1px solid var(--md-default-fg-color--lightest, #e3e3e3);
  border-radius: 0.2rem;
  background: var(--md-code-bg-color, #f7f7f8);
  padding: 0.5rem 0.7rem 0.45rem;
  margin: 0.2rem 0 1rem;
  font-size: 0.78rem;
}

.mt-filter-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.4rem;
  margin-bottom: 0.35rem;
}

.mt-filter-titel {
  font-weight: 700;
  min-width: 7.4rem;
}

.mt-chip {
  font-family: inherit;
  /* Am 08.10.2026 verkleinert: 15,2 px Schrift und 27 px Höhe waren auch am
   * Schreibtisch zu wuchtig. Jetzt rund 11,6 px Schrift und 20 px Höhe. */
  font-size: 0.58rem;
  padding: 0.1rem 0.45rem;
  border-radius: 0.8rem;
  /* Ohne das bricht ein langer Knopfname um und der Knopf wird doppelt so hoch
   * (gemessen: „Grafikkarte (WebGPU)" 79x34 statt 175x20). */
  white-space: nowrap;
  flex: 0 0 auto;
  border: 1px solid var(--md-default-fg-color--lightest, #d5d5d5);
  background: transparent;
  color: var(--md-default-fg-color--light, #555);
  cursor: pointer;
}

.mt-chip.mt-chip-an {
  background: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  opacity: 1;
  font-weight: 600;
}

/* Kein Werkzeug passt zur Auswahl: sichtbarer Hinweis statt leerer Fläche. */
.mt-filter-leer {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.7rem;
  border-left: 0.2rem solid var(--md-primary-fg-color);
  background: var(--md-code-bg-color, #f5f5f5);
  font-size: 0.74rem;
}

/* Erklärt das Verhalten der Knöpfe über der Liste — kurz, in einem Satzpaar. */
.mt-filter-erklaerung {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light, #555);
}

/* „Aus" heißt: alles bleibt sichtbar. Ein durchgestrichener Knopf würde
 * dagegen lesen wie „dieses Werkzeug ist weg" — deshalb nur ruhiger gesetzt. */
.mt-chip:not(.mt-chip-an) {
  background: transparent;
  opacity: 0.72;
}

.mt-chip:not(.mt-chip-an):hover {
  border-color: var(--md-primary-fg-color);
}

.mt-filter-stand {
  color: var(--md-default-fg-color--light, #666);
}

.mt-filter-aus {
  font-family: inherit;
  font-size: 0.76rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--md-primary-fg-color);
  text-decoration: underline;
  cursor: pointer;
}

.mt-filter-hinweis {
  color: #b3261e;
  margin-top: 0.2rem;
}

html[data-md-color-scheme="slate"] .mt-filter-hinweis {
  color: #ff8a80;
}


/* --- Erklärkasten, vom Skript im Fenster verankert ------------------------- */

/* Diese Fassung ersetzt die reine CSS-Lösung (siehe assets/tipps.js): der
 * Kasten hängt am Fenster, nicht am Zeichen, und kann die Seite deshalb nicht
 * breiter machen. */
.mt-tipp-kasten {
  position: fixed;
  z-index: 60;
  max-width: min(18rem, calc(100vw - 1.5rem));
  padding: 0.28rem 0.5rem;
  border-radius: 0.15rem;
  background: var(--md-default-fg-color, #222);
  color: var(--md-default-bg-color, #fff);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  pointer-events: none;
}

/* Läuft das Skript, wird die am Zeichen hängende Fassung abgeschaltet. Ohne
 * Skript bleibt sie als Rückfall stehen (dann ohne die 150 ms). */
html.mt-tipp-bereit .mt-zeichen[data-mt-tipp]::after {
  display: none;
}

/* Notnagel für schmale Fenster ohne Skript: Erklärkasten darf die Seite nicht
 * breiter machen. */

/* Gemessen auf 390 px Breite: 97 px waagerechter Überlauf, allein durch die
 * mittig gesetzten Erklärkästen — die Seite ließ sich seitlich wegschieben.
 * Deshalb werden sie dort an die passende Kante des Zeichens gesetzt statt
 * mittig: linke Spalten wachsen nach rechts, rechte Spalten nach links.
 * (px statt rem, weil mkdocs-material die Wurzelgröße auf 125 % setzt und
 * rem-Angaben in Medienabfragen dadurch unerwartet groß werden.) */
@media (max-width: 760px) {
  .mt-zeichen[data-mt-tipp]::after {
    transform: none;
    max-width: min(15rem, calc(100vw - 2.5rem));
  }

  .mt-tafel td:nth-child(-n+3) .mt-zeichen[data-mt-tipp]::after,
  .mt-zeichenzeile .mt-zeichen[data-mt-tipp]::after {
    left: 0;
    right: auto;
  }

  .mt-tafel td:nth-child(n+4) .mt-zeichen[data-mt-tipp]::after {
    left: auto;
    right: 0;
  }
}

/* Ohne Mauszeiger gibt es kein Zeigen: auf Telefon und Tablet wäre der Kasten
 * nie zu sehen und würde nur den Platz breiter machen. Die Bedeutung steht
 * dort in der Erklärungsliste unter der Tafel und im Text der Werkzeugseite. */
@media (hover: none) {
  .mt-zeichen[data-mt-tipp]::after {
    display: none;
  }
}

/* --- Ausblenden muss sich durchsetzen --------------------------------------
 * Das `hidden`-Merkmal des Browsers (`display: none`) verliert gegen jede eigene
 * display-Regel: die Kartenansicht auf schmalen Geräten setzt `display: flex` auf
 * die Zeilen der Tafel. Dann bleibt sichtbar, was der Filter ausblendet. Am
 * 08.10.2026 gemessen: der Knopf „Video" sollte genau OpenCut zeigen, es standen
 * aber elf Werkzeuge da (Klecks, TurboWarp, Vorlesen …) — die Zahl oben sagte
 * derweil richtig 1. Deshalb hier ausdrücklich, mit Nachdruck. */
.mt-tafel tr[hidden],
.mt-katalog[hidden],
.md-typeset h2[hidden],
.mt-filter-leer[hidden] {
  display: none !important;
}

/* --- Telefon: die Knöpfe auf die Hälfte ------------------------------------
 * Bei 390 px Breite gemessen: 15,2 px Schrift, 27 px Höhe, einzelne Knöpfe bis
 * 175 px breit — bei 16 Knöpfen füllte der Filter fast den Bildschirm. Die
 * kleineren Werte ergeben rund 9 px Schrift und etwa 16 px Höhe. */
@media screen and (max-width: 760px) {
  .mt-chip {
    font-size: 0.45rem;
    padding: 0.08rem 0.4rem;
    border-radius: 0.6rem;
  }
  .mt-filter-titel {
    min-width: 5.4rem;
  }
  .mt-filter-zeile {
    gap: 0.2rem 0.25rem;
    margin-bottom: 0.22rem;
  }
  .mt-filter-erklaerung {
    font-size: 0.62rem;
  }
  .mt-filter-leer {
    font-size: 0.64rem;
  }
  .mt-filter-stand,
  .mt-filter-aus {
    font-size: 0.66rem;
  }
}

/* --- Farben je Kategorie ----------------------------------------------------
 * Damit sich die Bereiche auf einen Blick unterscheiden. Töne aus Open Color
 * (MIT, https://yeun.github.io/open-color/), je Kategorie vier Werte: Akzent-
 * schrift, ruhige Fläche, Füllung im angewählten Zustand und die Schrift darauf.
 * Alle Paare mit der WCAG-Formel nachgerechnet — Schrift gegen Fläche überall
 * mindestens 4,5:1, die Kontrastwerte stehen als Kommentar dabei. */
:root {
  --mt-kat-ki-schrift: #9c36b5;            /* 5,23 auf #f8f0fc */
  --mt-kat-ki-flaeche: #f8f0fc;
  --mt-kat-ki-voll: #862e9c;
  --mt-kat-ki-vollschrift: #ffffff;        /* 7,28 */
  --mt-kat-creation-schrift: #e8590c;      /* 5,23 auf #fff4e6 */
  --mt-kat-creation-flaeche: #fff4e6;
  --mt-kat-creation-voll: #f76707;
  --mt-kat-creation-vollschrift: #212529;  /* 5,07 */
  --mt-kat-medienkritik-schrift: #0b7285;  /* 5,15 auf #e3fafc */
  --mt-kat-medienkritik-flaeche: #e3fafc;
  --mt-kat-medienkritik-voll: #0b7285;
  --mt-kat-medienkritik-vollschrift: #ffffff; /* 5,59 */
  --mt-kat-datenschutz-schrift: #2b8a3e;   /* 5,15 auf #ebfbee */
  --mt-kat-datenschutz-flaeche: #ebfbee;
  --mt-kat-datenschutz-voll: #37b24d;
  --mt-kat-datenschutz-vollschrift: #212529; /* 5,61 */
  --mt-kat-werkzeuge-schrift: #1971c2;     /* 4,52 auf #e7f5ff */
  --mt-kat-werkzeuge-flaeche: #e7f5ff;
  --mt-kat-werkzeuge-voll: #1864ab;
  --mt-kat-werkzeuge-vollschrift: #ffffff; /* 6,09 */
  --mt-kat-extern-schrift: #495057;        /* 7,76 auf #f8f9fa */
  --mt-kat-extern-flaeche: #f8f9fa;
  --mt-kat-extern-voll: #212529;
  --mt-kat-extern-vollschrift: #ffffff;    /* 15,43 */
}

/* Dunkles Schema: helle Schrift auf dunkler Fläche, angewählt helle Füllung mit
 * dunkler Schrift — sonst verschwindet ein Knopf auf der dunklen Seite. */
[data-md-color-scheme="slate"] {
  --mt-kat-ki-schrift: #eebefa;            /* 4,64 auf #862e9c */
  --mt-kat-ki-flaeche: #862e9c;
  --mt-kat-ki-voll: #eebefa;
  --mt-kat-ki-vollschrift: #212529;        /* 9,83 */
  --mt-kat-creation-schrift: #ffd8a8;      /* 4,64 auf #d9480f */
  --mt-kat-creation-flaeche: #d9480f;
  --mt-kat-creation-voll: #ffd8a8;
  --mt-kat-creation-vollschrift: #212529;  /* 11,49 */
  --mt-kat-medienkritik-schrift: #c5f6fa;  /* 4,77 auf #0b7285 */
  --mt-kat-medienkritik-flaeche: #0b7285;
  --mt-kat-medienkritik-voll: #99e9f2;
  --mt-kat-medienkritik-vollschrift: #212529; /* 11,23 */
  --mt-kat-datenschutz-schrift: #d3f9d8;   /* 4,77 auf #2b8a3e */
  --mt-kat-datenschutz-flaeche: #2b8a3e;
  --mt-kat-datenschutz-voll: #b2f2bb;
  --mt-kat-datenschutz-vollschrift: #212529; /* 11,98 */
  --mt-kat-werkzeuge-schrift: #d0ebff;     /* 4,93 auf #1864ab */
  --mt-kat-werkzeuge-flaeche: #1864ab;
  --mt-kat-werkzeuge-voll: #a5d8ff;
  --mt-kat-werkzeuge-vollschrift: #212529; /* 10,19 */
  --mt-kat-extern-schrift: #ced4da;        /* 10,32 auf #212529 */
  --mt-kat-extern-flaeche: #212529;
  --mt-kat-extern-voll: #e9ecef;
  --mt-kat-extern-vollschrift: #212529;    /* 13,01 */
}

/* Ein Element mit `data-mt-kat` bekommt seine vier Werte als eigene Variablen;
 * die Regeln darunter sind für alle Kategorien dieselben. */
[data-mt-kat="ki"] { --mt-akzent: var(--mt-kat-ki-schrift); --mt-flaeche: var(--mt-kat-ki-flaeche);
  --mt-voll: var(--mt-kat-ki-voll); --mt-vollschrift: var(--mt-kat-ki-vollschrift); }
[data-mt-kat="creation"] { --mt-akzent: var(--mt-kat-creation-schrift); --mt-flaeche: var(--mt-kat-creation-flaeche);
  --mt-voll: var(--mt-kat-creation-voll); --mt-vollschrift: var(--mt-kat-creation-vollschrift); }
[data-mt-kat="medienkritik"] { --mt-akzent: var(--mt-kat-medienkritik-schrift); --mt-flaeche: var(--mt-kat-medienkritik-flaeche);
  --mt-voll: var(--mt-kat-medienkritik-voll); --mt-vollschrift: var(--mt-kat-medienkritik-vollschrift); }
[data-mt-kat="datenschutz"] { --mt-akzent: var(--mt-kat-datenschutz-schrift); --mt-flaeche: var(--mt-kat-datenschutz-flaeche);
  --mt-voll: var(--mt-kat-datenschutz-voll); --mt-vollschrift: var(--mt-kat-datenschutz-vollschrift); }
[data-mt-kat="werkzeuge"] { --mt-akzent: var(--mt-kat-werkzeuge-schrift); --mt-flaeche: var(--mt-kat-werkzeuge-flaeche);
  --mt-voll: var(--mt-kat-werkzeuge-voll); --mt-vollschrift: var(--mt-kat-werkzeuge-vollschrift); }
[data-mt-kat="extern"] { --mt-akzent: var(--mt-kat-extern-schrift); --mt-flaeche: var(--mt-kat-extern-flaeche);
  --mt-voll: var(--mt-kat-extern-voll); --mt-vollschrift: var(--mt-kat-extern-vollschrift); }

/* Themen-Knöpfe tragen die Farbe ihrer Kategorie. */
.mt-chip[data-mt-kat] {
  background: var(--mt-flaeche);
  color: var(--mt-akzent);
  border-color: var(--mt-akzent);
  opacity: 1;
}
.mt-chip[data-mt-kat]:not(.mt-chip-an) {
  opacity: 0.85;
}
.mt-chip[data-mt-kat].mt-chip-an {
  background: var(--mt-voll);
  border-color: var(--mt-voll);
  color: var(--mt-vollschrift);
}

/* Die Bereichsüberschrift nimmt die Farbe ihres Bereichs an. Der Kasten der
 * Tafel trägt die Kategorie; die Überschrift liegt direkt davor. Die Farbe muss
 * hier ausgeschrieben stehen — eine Variable des Nachbarn kann die Überschrift
 * nicht lesen. */
.md-typeset h2:has(+ .mt-katalog[data-mt-kat]) {
  border-left: 0.25rem solid currentColor;
  padding-left: 0.55rem;
}
.md-typeset h2:has(+ .mt-katalog[data-mt-kat="ki"]) { color: var(--mt-kat-ki-schrift); }
.md-typeset h2:has(+ .mt-katalog[data-mt-kat="creation"]) { color: var(--mt-kat-creation-schrift); }
.md-typeset h2:has(+ .mt-katalog[data-mt-kat="medienkritik"]) { color: var(--mt-kat-medienkritik-schrift); }
.md-typeset h2:has(+ .mt-katalog[data-mt-kat="datenschutz"]) { color: var(--mt-kat-datenschutz-schrift); }
.md-typeset h2:has(+ .mt-katalog[data-mt-kat="werkzeuge"]) { color: var(--mt-kat-werkzeuge-schrift); }
.md-typeset h2:has(+ .mt-katalog[data-mt-kat="extern"]) { color: var(--mt-kat-extern-schrift); }

/* ---------------------------------------------------------------------------
   "Anmelden" im Kopfbereich — der Weg zur MekoTools-Anmeldung gehört ins
   Hauptmenü des Hauses, nicht in ein einzelnes Werkzeug. Die Kopfleiste trägt
   in hell und dunkel dieselbe Hausfarbe, deshalb genügt eine helle Schrift.
   Auf Schmalgeräten bleibt der Knopf sichtbar, nur knapper (gemessen bei
   390 px: die Leiste läuft nicht über).
   ------------------------------------------------------------------------ */
.md-header .mt-anmelden {
  display: inline-flex;
  align-items: center;
  margin: 0 0.2rem 0 0.7rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 0.3rem;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}

.md-header .mt-anmelden:hover,
.md-header .mt-anmelden:focus {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

@media screen and (max-width: 44em) {
  .md-header .mt-anmelden {
    margin: 0 0.1rem 0 0.4rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.74rem;
  }
}