/*
 * Nur für Vorlesewerkzeuge sichtbar.
 *
 * `display: none` würde den Inhalt auch dort entfernen, deshalb der Umweg über
 * eine Fläche von einem Pixel. Genutzt vom Meldebereich in assets/a11y.js.
 */
.autorentool-nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:root {
  --at-accent: #db1f3e;

  /*
   * Die weichen Akzenttöne werden aus der Akzentfarbe abgeleitet statt fest
   * hinterlegt. Dadurch stimmen sie automatisch für jede Kursart - eine neue
   * Marke braucht nur ihre Akzentfarbe, nicht drei aufeinander abgestimmte
   * Werte.
   */
  --at-accent-soft: color-mix(in srgb, var(--at-accent) 8%, var(--at-surface));
  --at-accent-soft-border: color-mix(in srgb, var(--at-accent) 22%, var(--at-surface));

  /*
   * Semantisches Grün für "richtig beantwortet". Bewusst NICHT die Markengrüns
   * aus den Guidelines: tomedo-Grün (#38AF4F) und erst recht zollsoft-Grün
   * (#ACCA39) erreichen als kleiner Text auf Weiß keinen ausreichenden
   * Kontrast. Die Markengrüns sind für Flächen gedacht, nicht für Fließtext.
   */
  --at-accent-2: #059669;
  /*
   * Rundungsstufen. Vorher standen im Projekt sieben verschiedene Werte
   * zwischen 2px und 14px, meist zufällig gewählt - nebeneinander wirkt das
   * unruhig, weil das Auge die Unterschiede bemerkt, ohne ein System zu
   * erkennen. Drei Stufen plus "ganz rund" reichen für alles.
   *
   *   sm  kleine Bedienelemente: Eingabefelder, Marken, Zähler
   *   md  Elemente innerhalb einer Karte: Antwortzeilen, Reiter, Bilder
   *   lg  Karten selbst
   */
  --at-radius-sm: 8px;
  --at-radius-md: 12px;
  --at-radius: 16px;
  --at-radius-pill: 999px;

  --at-shadow: 0 4px 14px rgba(0,0,0,0.05);
  --at-shadow-hover: 0 10px 26px rgba(0,0,0,0.09);
  --at-border: #e5e7eb;

  /*
   * Abgeschwächte Rahmenfarbe für alles, was zusätzlich einen Schatten trägt
   * oder ohnehin auf einer eigenen Fläche liegt. Rahmen und Schatten in voller
   * Stärke zusammen wirken schwer.
   */
  --at-border-soft: color-mix(in srgb, var(--at-border) 60%, transparent);

  /*
   * Die kräftigere Linie. `--at-border` und `--at-border-soft` gehen beide nach
   * leise; für einen Tabellenkopf oder eine Trennung, die etwas tragen soll,
   * fehlte die Gegenrichtung.
   */
  --at-border-strong: color-mix(in srgb, var(--at-border) 55%, var(--at-text));

  /*
   * Eine Bewegungskurve und eine Dauer für das ganze Projekt. Unterschiedliche
   * Geschwindigkeiten nebeneinander wirken unruhig, auch wenn man einzeln
   * keine davon bemängeln würde.
   */
  --at-ease: cubic-bezier(.4, 0, .2, 1);
  --at-dur: .18s;
  --at-text: #1e2330;
  --at-text-muted: #6b7280;

  /*
   * Drei Farben, die es geben musste - und die es bis eben nicht gab.
   *
   * Neun Bausteine hatten ihre Fließtextfarbe fest eingetragen, in zwei fast
   * gleichen Grautönen (#374151 und #384152). Im hellen Modus fiel das nicht
   * auf; im dunklen stand der Fließtext bei einem Kontrast von 1,7 auf der
   * Karte und war praktisch unsichtbar, während die Überschriften daneben bei
   * 14,5 lagen. Genau dieser Unterschied ließ es so wirken, als seien "viele
   * Schriften" schlecht lesbar.
   *
   * Die Lehre daraus steht über der Datei: Eine Farbe, die in einem Baustein
   * steht, kennt den Modus nicht. Nur ein Token kennt ihn.
   *
   *   --at-text-soft  Fließtext. Bewusst etwas ruhiger als --at-text, damit
   *                   Überschrift und Text sich unterscheiden - im Hellen wie
   *                   bisher 10,3 auf Weiß, im Dunklen 11,5 auf der Karte.
   *   --at-danger     Fehler und falsche Antworten.
   *   --at-success    Bestätigungen und richtige Antworten.
   */
  --at-text-soft: #374151;
  --at-danger: #b42318;
  --at-success: #007017;

  /*
   * Die Warnfarbe - die Stufe zwischen "richtig" und "falsch".
   *
   * **Warum sie nachgereicht wird.** Es gab sie längst: Der Hinweis-Block trug
   * `#f59e0b` fest in seinem Stilblatt, zweimal in einer Zeile. Dieselbe Klasse
   * Fehler wie die neun Bausteine mit fester Textfarbe - für Gelb übersehen.
   * Aufgefallen ist es, weil das Nachbarteam nach einer Warnfarbe fragte und
   * wir nachsehen mussten, ob wir eine haben.
   *
   * Dunkel aufgehellt, aus demselben Grund wie die Akzentfarben: Ein sattes
   * Orange auf dunklem Grund liegt beim Kontrast zu niedrig.
   */
  --at-warning: #b45309;

  /*
   * Zarte Flächen für die drei Signalfarben.
   *
   * Gebildet wie `--at-accent-soft`, also als Mischung mit der Fläche statt als
   * fester Wert: Damit stimmen sie in beiden Darstellungen von selbst, und im
   * dunklen Modus wird die Mischung dunkel, nicht die helle Fläche abgedunkelt.
   */
  --at-success-soft: color-mix(in srgb, var(--at-success) 10%, var(--at-surface));
  --at-danger-soft: color-mix(in srgb, var(--at-danger) 10%, var(--at-surface));
  --at-warning-soft: color-mix(in srgb, var(--at-warning) 12%, var(--at-surface));

  /*
   * Flächenfarben. Sie sind der Dreh- und Angelpunkt des dunklen Modus: Jede
   * Fläche im Kurs holt ihre Farbe von hier, statt Weiß fest einzutragen.
   *
   *   --at-surface    Karten, Blöcke, die Bühne - alles, worauf Text steht.
   *   --at-surface-2  Der Grund dahinter: Seitenleiste, Kursfläche.
   *   --at-surface-3  Leicht abgesetzte Flächen innerhalb einer Karte,
   *                   etwa Tabellenköpfe oder Eingabefelder.
   *
   * Im hellen Modus ist --at-surface schlicht Weiß. Der Umweg über eine
   * Variable kostet dort nichts und macht den dunklen Modus zu einer Frage von
   * drei Werten statt von 60 Fundstellen.
   */
  --at-surface: #ffffff;
  --at-surface-2: #f7f7fb;
  --at-surface-3: #f2f3f7;

  /* Farbe für Text, der auf der Akzentfarbe liegt. */
  --at-on-accent: #ffffff;
  --at-font-head: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --at-font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /*
   * Die Festbreitenschrift. Sie war da, aber im Code-Baustein eingemauert -
   * herausgeführt, damit ein Kit dieselbe benutzen kann statt einer eigenen.
   */
  --at-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --at-font-ui: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /*
   * Breitenraster eines Autorentool-Kurses. Die drei Werte steuern, wie breit
   * ein Inhaltsblock je nach eingestellter Breitenstufe erscheint - die Regeln
   * dazu stehen in blocks/lesson/style.css, die Bühne der Kurs-Shell nutzt den
   * Innenabstand.
   *
   * Bewusst hier und nicht in einer der beiden Dateien: CSS-Variablen vererben
   * nur nach unten, und Bühne und Lektion liegen auf verschiedenen Ebenen.
   */
  --at-course-column: 760px;
  --at-course-column-wide: 1080px;
  --at-course-gutter: 40px;
}

@media (max-width: 782px) {
  :root {
    --at-course-gutter: 18px;
  }
}

/*
 * Schriften je Kursart.
 *
 * zollsoft ist der interne Campus, tomedo der für Kunden - beide haben eine
 * eigene Hausschrift. Die Kursart steht als Klasse am Kurs-Container (Frontend
 * und SCORM-Paket) beziehungsweise an der Editorfläche, und überschreibt hier
 * nur die beiden Schriftvariablen. Alles andere - Farben, Abstände,
 * Blockgestaltung - bleibt identisch.
 *
 * Umgestellt werden alle drei Schriftvariablen, auch `--at-font-ui`. Das ist
 * die Schrift der Bedienelemente: Gliederung in der Seitenleiste, Weiter- und
 * Zurück-Knöpfe, Fortschrittsanzeige, Beschriftungen in den Blöcken. Zunächst
 * war sie markenübergreifend auf Lato festgelegt, weil Ronny nur Überschrift
 * und Text vorgegeben hatte - im fertigen Kurs fiel dann aber genau das auf:
 * Die halbe Oberfläche blieb in der alten Schrift stehen. Die Bedienschrift
 * folgt deshalb der Textschrift der jeweiligen Marke.
 *
 * Nicht umgestellt wird einzig der Code-Snippet-Block: Code braucht eine
 * Festbreitenschrift, sonst verrutscht die Einrückung.
 *
 * Eine dritte Marke braucht genau einen weiteren Regelblock hier plus einen
 * Eintrag in autorentool_blocks_get_course_types().
 */
/*
 * Farbwerte stammen aus den Frontify-Guidelines von zollsoft (Stand
 * 2026-08-10). Übernommen wird nur, was das Kursdesign braucht: Akzentfarbe,
 * Textton, gedämpfter Textton und Rahmenfarbe. Die übrigen Farben der
 * Guidelines stehen in der Farbauswahl der Blöcke zur Verfügung, siehe
 * autorentool_blocks_get_course_palettes().
 *
 * Die weichen Akzenttöne müssen hier nicht gesetzt werden - sie leiten sich
 * oben automatisch aus --at-accent ab.
 */
.is-kursart-zollsoft {
  --at-font-head: 'Palanquin Dark', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --at-font-body: 'Palanquin', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --at-font-ui: 'Palanquin', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --at-accent: #3366CC;      /* zollsoft Blue */
  --at-text: #333333;        /* zollsoft Black */
  --at-text-muted: #737373;  /* Mid Gray */
  --at-border: #E3E3E3;      /* Lighter Gray */
}

.is-kursart-tomedo {
  --at-font-head: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --at-font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --at-font-ui: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --at-accent: #DB1F3E;      /* tomedo Red */
  --at-text: #383838;        /* tomedo Black */
  --at-text-muted: #737373;  /* Mid Grey */
  --at-border: #CFCFCF;      /* Lighter Grey */
}

/* ---------------------------------------------------------------- */
/* Dunkler Modus                                                     */
/* ---------------------------------------------------------------- */

/*
 * Gesetzt wird das Attribut von assets/color-scheme.js am <html>-Element -
 * entweder aus der gespeicherten Wahl des Lernenden oder aus der Einstellung
 * seines Geräts.
 *
 * Bewusst kein `@media (prefers-color-scheme: dark)` direkt auf `:root`: Diese
 * Datei wird auch im Block-Editor geladen. Ein Autor mit dunkel eingestelltem
 * Betriebssystem hätte sonst dunkle Blöcke in einem hellen Editor - und würde
 * beim Schreiben ein Aussehen sehen, das seine Leser so nie bekommen.
 *
 * Die Akzentfarben der Marken sind hier aufgehellt. Die Originaltöne erreichen
 * auf dunklem Grund nur 3,25 (zollsoft) und 3,55 (tomedo) und wären als Text
 * damit zu schwach; die helleren Varianten liegen bei 7,2 und 6,4.
 */
[data-at-schema="dunkel"] {
  --at-surface: #171A1F;
  --at-surface-2: #101216;
  --at-surface-3: #1F232A;
  --at-text: #E8EAED;
  --at-text-muted: #A6ABB5;
  --at-border: #2E333B;
  --at-on-accent: #14161A;

  /* Schatten wirken auf dunklem Grund nur, wenn sie deutlich tiefer sind. */
  --at-shadow: 0 4px 14px rgba(0,0,0,0.45);
  --at-shadow-hover: 0 10px 26px rgba(0,0,0,0.6);

  /*
   * Die aufgehellten Markenfarben stammen aus dem Markenportal von zollsoft
   * (dort als "red lighter" beziehungsweise das entsprechende Blau) und nicht
   * aus eigener Rechnung. Beide bestehen den Kontrast auf dunklem Grund; der
   * Unterschied ist, dass diese hier abgestimmt sind.
   */
  --at-accent: #FF5967;
  --at-accent-2: #4FC98E;

  /*
   * Die drei Textfarben in ihrer dunklen Fassung. Gemessen auf --at-surface:
   * 11,5 / 7,6 / 9,0 - alle deutlich über der Grenze von 4,5, und der
   * Fließtext bleibt trotzdem eine Spur ruhiger als der Haupttext bei 14,5.
   */
  --at-text-soft: #CDD2DA;
  --at-danger: #FF8A80;
  --at-success: #5FD08A;
  --at-warning: #FFB74D;
}

[data-at-schema="dunkel"] .is-kursart-zollsoft {
  --at-accent: #7D9EE8;
}

[data-at-schema="dunkel"] .is-kursart-tomedo {
  --at-accent: #FF5967;
}

/*
 * Kursart-Klassen setzen im hellen Modus eigene Text-, Rahmen- und
 * Dämpfungswerte. Im dunklen Modus müssen die wieder weichen, sonst stünde
 * dunkelgrauer Markentext auf dunklem Grund.
 */
[data-at-schema="dunkel"] .is-kursart-zollsoft,
[data-at-schema="dunkel"] .is-kursart-tomedo {
  --at-text: #E8EAED;
  --at-text-muted: #A6ABB5;
  --at-text-soft: #CDD2DA;
  --at-border: #2E333B;
}

/*
 * Kurskopf und Titelfläche bleiben dunkel.
 *
 * Beide tragen entweder die Akzentfarbe oder ein Kursbild mit dunklem Verlauf
 * darüber - und darauf steht weißer Text. Im dunklen Modus ist die Akzentfarbe
 * hell, weißer Text darauf wäre unlesbar. Statt die Textfarbe umzudrehen (was
 * bei einem Kursbild darunter wieder falsch wäre) bleibt hier die Fläche
 * dunkel: ein Akzentton auf fast schwarzem Grund. Damit stimmt beides, mit und
 * ohne Bild.
 */
[data-at-schema="dunkel"] .autorentool-sidebar-head,
[data-at-schema="dunkel"] .autorentool-cover-hero {
  background: color-mix(in srgb, var(--at-accent) 24%, #0B0D11);
  color: #fff;
}
[data-at-schema="dunkel"] .autorentool-sidebar-home,
[data-at-schema="dunkel"] .autorentool-progress-label {
  color: #fff;
}
[data-at-schema="dunkel"] .autorentool-progress-bar {
  background: var(--at-accent);
}

/*
 * Bilder bleiben im dunklen Modus unangetastet - kein Abdunkeln, kein Filter.
 *
 * Der erste Entwurf hatte sie leicht abgedunkelt, weil helle Bildschirmfotos
 * auf dunklem Grund blenden. Das war falsch, und der Grund ist nicht
 * gestalterisch: Ein Kurs zeigt die echte Programmoberfläche. Ein eingefärbtes
 * Bildschirmfoto zeigt eine, die es nicht gibt - und dann sucht die
 * medizinische Fachangestellte im Programm nach etwas, das anders aussieht als
 * im Kurs.
 *
 * Gegen das Blenden hilft eine ruhige Einfassung, kein Eingriff ins Bild.
 * Hinweis aus der Übergabe des Campus-Kurs-Kits, Abschnitt 3.
 */
[data-at-schema="dunkel"] .autorentool-block img {
  background: var(--at-surface-3);
  box-shadow: 0 0 0 1px var(--at-border);
  border-radius: var(--at-radius-sm);
}

/*
 * :where() gives these shared base rules ZERO specificity, so every
 * block-specific stylesheet (callout, quiz, ...) always wins its own
 * background/border overrides, regardless of which <style> tag WordPress
 * happens to print first in <head>. Without this, load order was flipping
 * a coin on whether e.g. the Callout-Box kept its colored background.
 */
:where(.autorentool-block) {
  /*
   * Ohne border-box zählt eine gesetzte Breite nur den Inhalt, Polster und
   * Rahmen kommen obendrauf. Bei "Volle Breite" im Kurs ergäbe das einen Block,
   * der 58px breiter ist als der Bereich, den er füllen soll - also einen
   * waagerechten Rollbalken.
   */
  box-sizing: border-box;
  position: relative;
  background: var(--at-surface);
  /*
   * Rahmen und Schatten zusammen wirken schnell schwer. Der Rahmen ist deshalb
   * nur angedeutet - er hält die Karte zusammen, der Schatten macht die Tiefe.
   */
  border: 1px solid color-mix(in srgb, var(--at-border) 60%, transparent);
  border-radius: var(--at-radius);
  box-shadow: var(--at-shadow);
  padding: 30px 28px 26px;
  margin-bottom: 22px;
  font-family: var(--at-font-body);
  color: var(--at-text);
  overflow: hidden;
  transition: box-shadow var(--at-dur) var(--at-ease);
}
:where(.autorentool-block:not(.autorentool-callout))::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--at-block-accent, var(--at-accent)), var(--at-block-accent, var(--at-accent)) 55%, transparent);
}
:where(.autorentool-block:hover) {
  box-shadow: var(--at-shadow-hover);
}

/*
 * Ruhige Blöcke tragen keine Karte.
 *
 * Der Vergleich mit einem Rise-Kurs hat es deutlich gemacht: Dort steht
 * Fließtext einfach auf der Seite, bei uns bekam jeder Absatz eine weiße Karte
 * mit Rahmen, Schatten und Akzentbalken. Fünf Textblöcke hintereinander ergaben
 * eine Treppe aus fünf Kästen, wo Rise einen ruhigen Textfluss zeigt.
 *
 * Die Unterscheidung ist inhaltlich, nicht kosmetisch: **Eine Karte bekommt,
 * was ein Ding ist** - ein Hinweis, eine Frage, eine Interaktion, etwas zum
 * Anfassen. **Keine Karte bekommt, was gelesen wird** - Text, Bild, Zitat,
 * Liste, Trenner. Ein Rahmen um einen Absatz sagt nichts; ein Rahmen um einen
 * Wissens-Check sagt "hier ist etwas zu tun".
 *
 * Umgesetzt über die Blockklassen und nicht über eine neue Klasse im Markup:
 * Eine Änderung am Markup würde jeden gespeicherten Block ungültig machen und
 * für jeden Block eine Deprecation verlangen. Aussehen gehört ohnehin ins
 * Stylesheet, nicht in die Daten.
 */
:where(
  .autorentool-text,
  .autorentool-image,
  .autorentool-gallery,
  .autorentool-quote-block,
  .autorentool-statement-block,
  .autorentool-numbered-list,
  .autorentool-text-columns,
  .autorentool-image-text,
  .autorentool-divider-block,
  .autorentool-button-block
) {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 0 0;
  margin-bottom: 30px;
  overflow: visible;
}

/* Ohne Karte trägt auch der Akzentbalken nichts - er markierte den Kartenrand. */
:where(
  .autorentool-text,
  .autorentool-image,
  .autorentool-gallery,
  .autorentool-quote-block,
  .autorentool-statement-block,
  .autorentool-numbered-list,
  .autorentool-text-columns,
  .autorentool-image-text,
  .autorentool-divider-block,
  .autorentool-button-block
)::before {
  display: none;
}

/* Und kein Anheben beim Überfahren: Da ist nichts, was sich heben könnte. */
:where(
  .autorentool-text,
  .autorentool-image,
  .autorentool-gallery,
  .autorentool-quote-block,
  .autorentool-statement-block,
  .autorentool-numbered-list,
  .autorentool-text-columns,
  .autorentool-image-text,
  .autorentool-divider-block,
  .autorentool-button-block
):hover {
  box-shadow: none;
}
:where(.autorentool-block h3),
:where(.autorentool-block h4) {
  font-family: var(--at-font-head);
  margin: 0 0 12px;
  color: var(--at-text);
  letter-spacing: -0.01em;
}
:where(.autorentool-block p) {
  margin: 0;
  line-height: 1.7;
}

/* ---------------------------------------------------------------- */
/* Sanfte Übergänge und ein einheitlicher Fokusrahmen                */
/* ---------------------------------------------------------------- */

/*
 * Jedes Bedienelement in einem Block bekommt denselben Übergang. Vorher hatte
 * ein Teil der Blöcke eigene Angaben, ein anderer gar keine - beim Überfahren
 * sprang die Hälfte hart um, die andere blendete weich. Genau solche
 * Unterschiede nimmt man nicht bewusst wahr, sie hinterlassen aber den Eindruck
 * von Unfertigkeit.
 *
 * `:where()` gibt der Regel null Gewicht: Ein Block, der einen eigenen Übergang
 * braucht, überschreibt sie weiterhin ohne Verrenkungen.
 */
:where(.autorentool-block) :is(button, a, input, select, textarea, summary, label, [role="button"]) {
  transition:
    background-color var(--at-dur) var(--at-ease),
    border-color var(--at-dur) var(--at-ease),
    color var(--at-dur) var(--at-ease),
    box-shadow var(--at-dur) var(--at-ease),
    opacity var(--at-dur) var(--at-ease),
    transform var(--at-dur) var(--at-ease);
}

/*
 * Ein Fokusrahmen für alles. `:focus-visible` statt `:focus` zeigt ihn nur bei
 * Tastaturbedienung - bei einem Mausklick wäre er störend, für Tastaturnutzer
 * ist er das Einzige, woran sie erkennen, wo sie sind.
 *
 * Der Abstand nach außen ist wichtig: Direkt am Element klebend verschmilzt der
 * Rahmen mit dessen eigener Kante.
 */
:where(.autorentool-block) :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible,
:where(.autorentool-course-shell) :is(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--at-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :where(.autorentool-block) :is(button, a, input, select, textarea, summary, label, [role="button"]) {
    transition: none;
  }
}

/* Volle Breite: die Karte bleibt lesbar, statt bis an den Bildschirmrand zu klemmen. */
:where(.autorentool-block.alignfull) {
  padding-left: max(28px, 4vw);
  padding-right: max(28px, 4vw);
}

/*
 * Editor-only authoring controls (Breite / Akzentfarbe). These classes never
 * appear in save()'s markup, so this CSS has no effect on the front end —
 * it only styles the little control row shown while editing a lesson.
 */
.autorentool-block-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  background: #f7f7fb;
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-md);
  padding: 8px 10px;
  margin-bottom: 16px;
  font-family: var(--at-font-ui);
}
.autorentool-width-toggle {
  display: flex;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-pill);
  padding: 2px;
}
.autorentool-width-btn {
  border: none;
  background: none;
  padding: 5px 12px;
  border-radius: var(--at-radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--at-text-muted);
  cursor: pointer;
  font-family: var(--at-font-ui);
}
.autorentool-width-btn.is-active {
  background: var(--at-text);
  color: #fff;
}
.autorentool-accent-swatches {
  display: flex;
  align-items: center;
  gap: 6px;
}
.autorentool-accent-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--at-border);
  cursor: pointer;
  padding: 0;
}
.autorentool-accent-swatch.is-active {
  box-shadow: 0 0 0 2px var(--at-text);
}

/*
 * Das Feld "Kursfarbe" hat keinen eigenen Farbwert - es steht dafür, dass der
 * Block die Farbe der Kursart erbt. Es zeigt deshalb genau diese Farbe und wird
 * durch den kleinen weißen Kern von den festen Farben unterscheidbar.
 */
.autorentool-accent-swatch.is-inherit {
  background: var(--at-accent);
  position: relative;
}
.autorentool-accent-swatch.is-inherit::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
}

/*
 * Deckt eine Editor-Vorschau (iframe/video/audio) ab, solange der Block nicht
 * ausgewählt ist - siehe withClickGuard() in assets/block-ui.js. Hier statt in
 * einem einzelnen Block-style.css, weil inzwischen mehrere Blöcke (Video/
 * Audio, Embed) dieselben zwei Klassen nutzen.
 */
.autorentool-click-guard {
  position: relative;
}
.autorentool-click-catcher {
  position: absolute;
  inset: 0;
  cursor: pointer;
}