/* ---------------------------------------------------------------------------
   ThurWiki - Editor und Seitendarstellung
   Dieselben Klassen gelten fuer den Editor (ProseMirror) und die Leseansicht
   (DocRenderer.php). Was hier steht, muss in beiden gleich aussehen.
   --------------------------------------------------------------------------- */

.tw-editor {
    font-family: Roboto, system-ui, sans-serif;
}

.tw-editor-toolbar {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--widget-border-color, #c6cbd4);
    background: var(--widget-light-background, #f3f4f7);
}

.tw-editor-host {
    flex: 1 1 auto;
    /* Ohne min-height:0 schrumpft das scrollende Kind nicht unter seine
       Inhaltshoehe - der Fallstrick, der schon die Modal-Fusszeile erwischt hat. */
    min-height: 0;
    overflow: auto;
    background: #fff;
}

/* --------------------------------------------------------------- Inhalt */

.tw-content,
.tw-page-body {
    padding: 24px 32px;
    /*
     * KEINE Begrenzung am Container.
     *
     * Die Zeilenlaenge wird weiter unten je Textblock begrenzt - Sections,
     * Tabellen, Bilder und Zeichnungen bekommen dagegen die volle Breite.
     * Eine Begrenzung hier zwaenge auch ein dreispaltiges Layout in 980px,
     * obwohl daneben Platz frei bleibt.
     *
     * margin bleibt 0: mit 'margin: 0 auto' wuerde der Inhalt zentriert und
     * links entstuende ein breiter leerer Rand. Ein Wiki liest sich
     * linksbuendig besser.
     */
    max-width: none;
    margin: 0;
    /* Der Innenabstand gehoert in die Breite: ohne border-box waere der
       Textbereich 100% BREIT PLUS 52px Polster - ein Abschnitt ueber die
       volle Breite ragte dann rechts aus der Seite heraus. */
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.65;
    color: #1f2328;
    outline: none;
}

/*
 * Lesebreite fuer Fliesstext.
 *
 * Nur auf oberster Ebene: in einer Spalte oder einem Kasten gibt die
 * Umgebung die Breite bereits vor, dort waere eine zweite Grenze schaedlich.
 */
.tw-content > p,
.tw-content > h1, .tw-content > h2, .tw-content > h3,
.tw-content > h4, .tw-content > h5, .tw-content > h6,
.tw-content > ul, .tw-content > ol, .tw-content > blockquote,
.tw-page-body > p,
.tw-page-body > h1, .tw-page-body > h2, .tw-page-body > h3,
.tw-page-body > h4, .tw-page-body > h5, .tw-page-body > h6,
.tw-page-body > ul, .tw-page-body > ol, .tw-page-body > blockquote {
    max-width: 980px;
}

.tw-content:focus { outline: none; }

.tw-content > p:first-child:empty::before {
    content: attr(data-placeholder);
    color: #9aa0a6;
}

/* Groesse, Staerke, Schrift, Farbe und Abstaende von Absatz und Ueberschriften
   stehen NICHT hier, sondern im Schriftbild des Wikis (api/style.php). Sie
   sind einstellbar, und eine zweite Stelle mit denselben Angaben hiesse: mal
   gewinnt die eine, mal die andere. Hier bleibt nur, was niemand einstellt. */
.tw-content h1, .tw-content h2, .tw-content h3,
.tw-content h4, .tw-content h5, .tw-content h6,
.tw-page-body h1, .tw-page-body h2, .tw-page-body h3,
.tw-page-body h4, .tw-page-body h5, .tw-page-body h6 {
    /* Eine Ueberschrift soll nicht auf halber Hoehe umbrechen und dann am
       Seitenrand kleben. */
    overflow-wrap: break-word;
}

/* H6 kennt das Schriftbild nicht - es reicht bis zur fuenften Ebene. Damit
   eine sechste Ueberschrift nicht wie Fliesstext aussieht, erbt sie hier. */
.tw-content h6, .tw-page-body h6 { font-size: 0.95em; font-weight: 600; }

/*
 * Leere Absaetze sind Absicht.
 *
 * Ein leerer <p> ist im Browser null Punkte hoch - der Abstand, den jemand
 * bewusst gesetzt hat, verschwindet damit beim Lesen, obwohl er im Editor
 * noch da war und in der Datei gespeichert ist. Confluence hat dieselbe
 * Eigenart, und sie aergert dort seit Jahren.
 *
 * Der Nullbreiten-Kasten erzwingt eine Zeilenbox in der Hoehe einer normalen
 * Zeile. Kopiert wird dabei nichts mit: er hat keinen Inhalt.
 */
.tw-page-body p:empty::before,
.tw-content p:not(:first-child):empty::before,
.ProseMirror p:not(:first-child):empty::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 1em;
}
.tw-content ul, .tw-content ol,
.tw-page-body ul, .tw-page-body ol { margin: 0 0 12px; padding-left: 26px; }
.tw-content li > p, .tw-page-body li > p { margin: 0 0 4px; }

.tw-content blockquote, .tw-page-body blockquote {
    margin: 0 0 12px;
    padding: 4px 0 4px 16px;
    border-left: 3px solid var(--widget-accent, #0f6cbd);
    color: #4b5563;
}

.tw-content hr, .tw-page-body hr {
    border: 0;
    border-top: 1px solid var(--widget-border-color, #c6cbd4);
    margin: 20px 0;
}

.tw-inline-code {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 0.9em;
    background: #f1f2f4;
    border: 1px solid #e2e4e8;
    border-radius: 3px;
    padding: 1px 4px;
}

/* ------------------------------------------------------------ Code-Block */

.tw-codeblock {
    margin: 0 0 14px;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: var(--widget-border-radius, 4px);
    overflow: hidden;
    background: #fbfbfc;
}

.tw-codeblock-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    background: var(--widget-light-background, #f3f4f7);
    border-bottom: 1px solid var(--widget-border-color, #c6cbd4);
    padding: 4px 10px;
}

pre.tw-code {
    margin: 0;
    padding: 12px 14px;
    /* Wer „600px" einstellt, meint den Block, den er sieht - nicht den
       Inhalt ohne Polsterung und Rand. Ohne border-box wären es 628px. */
    box-sizing: border-box;
    overflow-x: auto;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre;
    tab-size: 4;
}

.tw-page-body pre.tw-code {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: var(--widget-border-radius, 4px);
    background: #fbfbfc;
    margin-bottom: 14px;
}

/* Die Farben für den eingefärbten Code.
 *
 * Ohne sie erzeugt der Tokenizer zwar brav seine <span class="tok-...">,
 * aber keine davon bekommt eine Farbe - und dann steht der Code einfarbig
 * da, obwohl im Markup alles richtig ist. Genau das war lange der Fall: die
 * einzigen Farbregeln standen in `code-highlight.js` und galten nur für
 * `.rich-text-editor-content pre.rte-codeblock`, also für den Code-Block der
 * Widget-Library - nicht für den des Wikis.
 *
 * Bewusst eine HELLE Palette: der Block der Widget-Library ist dunkel
 * (#1e1e1e), der des Wikis hell (#fbfbfc). Die dunklen Farben von dort wären
 * hier kaum lesbar.
 *
 * Gilt für beide Bauformen - den gewöhnlichen Code-Block und den aus dem
 * Datei-Makro - und in Editor wie Leseansicht, denn beide benutzen
 * dieselben Klassen. */
pre.tw-code .tok-keyword,    pre.tw-git-code .tok-keyword    { color: #cf222e; }
pre.tw-code .tok-string,     pre.tw-git-code .tok-string     { color: #0a3069; }
pre.tw-code .tok-comment,    pre.tw-git-code .tok-comment    { color: #6e7781;
                                                               font-style: italic; }
pre.tw-code .tok-number,     pre.tw-git-code .tok-number     { color: #0550ae; }
pre.tw-code .tok-function,   pre.tw-git-code .tok-function   { color: #8250df; }
pre.tw-code .tok-variable,   pre.tw-git-code .tok-variable   { color: #953800; }
pre.tw-code .tok-tag,        pre.tw-git-code .tok-tag        { color: #116329; }
pre.tw-code .tok-attr,       pre.tw-git-code .tok-attr       { color: #0550ae; }
pre.tw-code .tok-property,   pre.tw-git-code .tok-property   { color: #0550ae; }
pre.tw-code .tok-selector,   pre.tw-git-code .tok-selector   { color: #6f42c1; }
pre.tw-code .tok-atrule,     pre.tw-git-code .tok-atrule     { color: #cf222e; }
pre.tw-code .tok-key,        pre.tw-git-code .tok-key        { color: #0a3069; }
pre.tw-code .tok-annotation, pre.tw-git-code .tok-annotation { color: #8250df; }

/* Satzzeichen bleiben in der Textfarbe. Sie einzufärben macht den Block
   unruhig, ohne dass es beim Lesen hilft. */
pre.tw-code .tok-punct,      pre.tw-git-code .tok-punct      { color: inherit; }

/* --------------------------------------------------------------- Kaesten */

.tw-panel {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: var(--widget-border-radius, 4px);
    border-left: 4px solid;
}
.tw-panel > :last-child { margin-bottom: 0; }

.tw-panel-info    { background: #eef4fd; border-color: #0f6cbd; }
.tw-panel-note    { background: #f5f3ff; border-color: #7c3aed; }
.tw-panel-success { background: #edfaf1; border-color: #0a7c42; }
.tw-panel-warning { background: #fdf6e7; border-color: #b45309; }
.tw-panel-error   { background: #fdeded; border-color: #c1121f; }

.tw-expand {
    margin: 0 0 14px;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: var(--widget-border-radius, 4px);
    padding: 8px 12px;
}
.tw-expand > summary {
    cursor: pointer;
    font-weight: 600;
    user-select: none;
}
.tw-expand-body { padding-top: 10px; }
.tw-expand-body > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Layout */

.tw-section {
    display: flex;
    gap: 18px;
    margin: 0 0 14px;
    align-items: stretch;
    /* Eine Section nimmt immer die volle Breite ein - sonst richtet sich das
       Spaltenlayout nach dem laengsten Text und wirkt zufaellig. */
    width: 100%;
    box-sizing: border-box;
}
/* Rahmen um die Section - eine Einstellung des Makros. In der Leseansicht
   umschliesst er die Spalten, im Editor den Makro-Rahmen. */
.tw-section-border {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: var(--widget-border-radius, 4px);
    padding: 12px;
}
.tw-macro-frame.tw-section-border { padding: 0; }
.tw-macro-frame.tw-section-border > .tw-macro-content { padding: 12px; }

.tw-column {
    flex: 1 1 0;
    min-width: 0;
}
.tw-column > :last-child { margin-bottom: 0; }

@media (max-width: 700px) {
    .tw-section { flex-direction: column; }
}

/* ------------------------------------------------------------- Aufgaben */

ul.tw-tasks {
    list-style: none;
    padding-left: 2px;
    margin: 0 0 12px;
}
li.tw-task {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}
li.tw-task > input[type="checkbox"] {
    margin-top: 5px;
    accent-color: var(--widget-accent, #0f6cbd);
    flex: 0 0 auto;
}
.tw-task-body { flex: 1 1 auto; min-width: 0; }
.tw-task-body > :last-child { margin-bottom: 0; }
li.tw-task-done > .tw-task-body { color: #9aa0a6; text-decoration: line-through; }

/* -------------------------------------------------------------- Tabellen */

.tw-table-wrap { overflow-x: auto; margin: 0 0 14px; }

.tw-content table, table.tw-table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 14px;
    /* Ohne bekannte Spaltenbreiten entscheidet der Inhalt. `fixed` machte
       alle Spalten gleich breit - eine Tabelle aus „Begriff | lange
       Erklaerung" sah damit aus, als sei der Begriff die halbe Seite wert.
       Feste Breiten gelten nur, wo sie auch angegeben sind. */
    table-layout: auto;
}

.tw-content table.tw-table-fest, table.tw-table-fest { table-layout: fixed; }


.tw-content th, .tw-content td,
/* Knappe Innenabstaende: eine Tabelle soll Zahlen und kurze Angaben dicht
   nebeneinander zeigen. Grosszuegige Abstaende sehen im Formular gut aus, in
   einer Tabelle mit zwanzig Zeilen kosten sie den Ueberblick - man liest
   mehr Leerraum als Inhalt. */
table.tw-table th, table.tw-table td,
.tw-content th, .tw-content td {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    padding: 3px 7px;
    vertical-align: top;
    text-align: left;
    line-height: 1.4;
}
.tw-content th, table.tw-table th {
    background: var(--widget-light-background, #f3f4f7);
    font-weight: 600;
}
.tw-content td > :last-child, .tw-content th > :last-child,
table.tw-table td > :last-child, table.tw-table th > :last-child { margin-bottom: 0; }

/* Eine Tabelle ohne Gitter.

   Nicht jede Tabelle ist eine Datentabelle: viele stellen nur etwas
   nebeneinander. Die Quellen unterscheiden das (MediaWiki zeichnet ein
   Gitter nur bei `class="wikitable"`), und ohne diesen Unterschied sieht
   eine importierte Seite ganz anders aus als ihr Original.

   Diese Regeln stehen NACH denen mit dem Rahmen: bei gleicher Spezifitaet
   gewinnt die spaetere, und andersherum blieb der Zellrahmen stehen.

   Der aeussere Rahmen bleibt - er sagt, wo die Tabelle aufhoert. */
table.tw-table-blank,
.tw-content table[data-borders="none"] {
    border: 1px solid var(--widget-border-color, #c6cbd4);
}

table.tw-table-blank th,
table.tw-table-blank td,
.tw-content table[data-borders="none"] th,
.tw-content table[data-borders="none"] td {
    border: none;
}

/* Ohne Linien braucht es etwas mehr Luft, sonst kleben die Spalten
   aneinander - die Quelle setzt dafuer eigene Innenabstaende, die wir
   bewusst nicht uebernehmen. */
table.tw-table-blank th,
table.tw-table-blank td {
    padding: 4px 14px 4px 4px;
}

/* ------------------------------------------------------------- Diagramme */

figure.tw-diagram {
    margin: 0 0 14px;
    text-align: center;
}
figure.tw-diagram img { max-width: 100%; height: auto; }

/* Rahmen um die Zeichnung - eine Einstellung des Makros, im Editor wie in
   der Leseansicht dieselbe Klasse. */
figure.tw-diagram-border img {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: var(--widget-border-radius, 4px);
    background: #fff;
}
figure.tw-diagram figcaption {
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
}

.tw-content figure.tw-diagram {
    border: 1px dashed transparent;
    border-radius: var(--widget-border-radius, 4px);
    padding: 6px;
    cursor: pointer;
}
.tw-content figure.tw-diagram:hover { border-color: var(--widget-accent, #0f6cbd); }
.tw-content .tw-codeblock { cursor: pointer; }

/* -------------------------------------------------------------- Barcodes */

figure.tw-barcode {
    margin: 0 0 14px;
    text-align: center;
}
.tw-barcode-svg { display: inline-block; max-width: 100%; }
.tw-barcode-svg svg { max-width: 100%; height: auto; }
figure.tw-barcode figcaption {
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
}
.tw-content figure.tw-barcode {
    border: 1px dashed transparent;
    border-radius: var(--widget-border-radius, 4px);
    padding: 6px;
    cursor: pointer;
}
.tw-content figure.tw-barcode:hover { border-color: var(--widget-accent, #0f6cbd); }

.tw-macro {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px dashed #b45309;
    border-radius: var(--widget-border-radius, 4px);
    background: #fdf6e7;
    color: #7c4a05;
    font-size: 13px;
}

/* ============================================================== Makros ==
 *
 * Der graue Balken über jedem Makro - nur im Editor. In der Leseansicht
 * gibt es ihn nicht; dort steht der Inhalt allein.
 */

.tw-macro-frame {
    position: relative;
    margin: 0 0 14px;
    border: 1px solid #dfe3e9;
    border-radius: var(--widget-border-radius, 4px);
    background: #fff;
}

.tw-macro-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: #f1f2f4;
    border-bottom: 1px solid #dfe3e9;
    border-radius: var(--widget-border-radius, 4px) var(--widget-border-radius, 4px) 0 0;
    font-size: 12.5px;
    color: #44546f;
    cursor: pointer;
    user-select: none;
}
.tw-macro-bar:hover { background: #e7eaef; }
.tw-macro-bar > i { color: #6b7280; width: 14px; text-align: center; }

.tw-macro-name { font-weight: 600; }
.tw-macro-args { color: #8993a4; flex: 1 1 auto; min-width: 0;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Der Bleistift links: die Handlung, die man hier fast immer will. */
.tw-macro-pencil {
    flex: 0 0 auto;
    color: var(--widget-accent, #0f6cbd);
    padding: 3px 6px;
}
.tw-macro-pencil:hover { background: #dbe7f6; }

.tw-macro-actions { display: flex; gap: 2px; margin-left: auto; }
.tw-macro-action {
    border: 0;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 12px;
}
.tw-macro-action:hover { background: #d7dbe2; color: #172b4d; }

.tw-macro-content { padding: 10px 12px; }
.tw-macro-content > :last-child { margin-bottom: 0; }
.tw-macro-preview { padding: 10px 12px; }
.tw-macro-preview > :last-child { margin-bottom: 0; }

/* Der Kasten behaelt seine Farbe auch im Editor - man soll beim Schreiben
   sehen, welche Art Hinweis man gerade verfasst. */
.tw-macro-panel { border-left-width: 4px; border-left-style: solid; }
.tw-macro-panel.tw-panel-info    { border-left-color: #0f6cbd; background: #eef4fd; }
.tw-macro-panel.tw-panel-note    { border-left-color: #7c3aed; background: #f5f3ff; }
.tw-macro-panel.tw-panel-success { border-left-color: #0a7c42; background: #edfaf1; }
.tw-macro-panel.tw-panel-warning { border-left-color: #b45309; background: #fdf6e7; }
.tw-macro-panel.tw-panel-error   { border-left-color: #c1121f; background: #fdeded; }
.tw-macro-panel.tw-panel-plain   { border-left-color: #c6cbd4; background: #fff; }
.tw-macro-panel > .tw-macro-bar { background: rgba(255, 255, 255, 0.55); }

/* Section und Column: die Spalten stehen nebeneinander, jede mit Balken. */
.tw-macro-section { width: 100%; box-sizing: border-box; }
.tw-macro-section > .tw-macro-content {
    display: flex;
    gap: 18px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}
.tw-macro-column { min-width: 0; margin-bottom: 0; background: #fcfcfd; }

@media (max-width: 700px) {
    .tw-macro-section > .tw-macro-content { flex-direction: column; }
}

.tw-macro-placeholder {
    padding: 14px;
    border: 1px dashed #c6cbd4;
    border-radius: var(--widget-border-radius, 4px);
    background: #fafbfc;
    color: #44546f;
}
.tw-macro-hint { font-size: 12.5px; color: #8993a4; margin-top: 4px; }

/* --------------------------------------------------- Makro-Auswahl/Dialog */

/*
 * Die Makro-Auswahl - links die Gruppen, rechts die Karten.
 *
 * Bei achtzig Makros in zwanzig Gruppen war die frueher gestapelte Liste
 * eine, durch die man scrollte, bis man aufgab. Die Spalte links macht
 * aus dem Scrollen ein Zielen.
 */

/*
 * Zwei Scrollbereiche, nicht einer - und keiner davon zu hoch.
 *
 * `height: 100%` traegt hier, seit das Fenster selbst eine Hoehe hat
 * (`height: 78vh` beim Aufruf) und der Rumpf darin den uebrigen Platz
 * nimmt. Vorher standen hier feste `58vh`, und das war zu viel: zusammen
 * mit Titel, Suchzeile und Fusszeile ging es ueber das Fenster hinaus,
 * der Rumpf bekam einen zweiten Scrollbalken, und die Suchzeile rutschte
 * nach oben aus dem Bild.
 *
 * `min-height: 0` ist die Bedingung dafuer, dass eine Flex-Zelle kleiner
 * werden darf als ihr Inhalt - ohne sie waechst das Raster das Fenster
 * wieder auf, statt zu scrollen.
 */
.tw-macro-spalte,
.tw-macro-liste {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}

.tw-macro-spalte {
    flex: 0 0 auto;
    width: 176px;
    border-right: 1px solid #e5e9ef;
    padding-right: 4px;
}

.tw-macro-liste {
    flex: 1 1 auto;
    min-width: 0;
}

.tw-macro-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-right: 8px;
}

.tw-macro-nav-eintrag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 3px;
    background: none;
    text-align: left;
    font-family: inherit;
    font-size: 13px;
    color: var(--widget-accent, #0f6cbd);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tw-macro-nav-eintrag:hover {
    background: #f1f5f9;
}

/* Die gewaehlte Gruppe traegt kein Blau mehr: sie ist kein Ziel, sondern
   der Ort, an dem man steht. */
.tw-macro-nav-aktiv,
.tw-macro-nav-aktiv:hover {
    background: #e6eaf0;
    color: #172b4d;
    font-weight: 600;
}

.tw-macro-nav-zahl {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 400;
    color: #8993a4;
}

.tw-macro-group {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8993a4;
    margin: 14px 0 2px;
}

/* Die erste Ueberschrift braucht keinen Abstand nach oben. */
.tw-macro-grid > .tw-macro-group:first-child {
    margin-top: 0;
}

.tw-macro-grid {
    display: grid;
    /* Zwei Spalten wie im Vorbild - und eine, sobald es eng wird. */
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 10px;
    padding: 0 4px 4px 16px;
    align-content: start;
}

.tw-macro-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: var(--widget-border-radius, 4px);
    background: none;
    cursor: pointer;
    font-family: inherit;
}

.tw-macro-card:hover {
    border-color: #dfe3e9;
    background: #f7faff;
}

/*
 * Der Kasten links steht fuer das Vorschaubild des Vorbilds.
 *
 * Confluence zeigt dort eine gezeichnete Miniatur je Makro. Achtzig
 * davon zu zeichnen waere Wochen Arbeit fuer etwas, das die Symbole
 * genauso leisten - jedes Makro bringt ohnehin eines mit.
 */
.tw-macro-card-bild {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 60px;
    border: 1px solid #dfe3e9;
    border-radius: 3px;
    background: #fbfcfd;
    color: var(--widget-accent, #0f6cbd);
    font-size: 22px;
}

.tw-macro-card:hover .tw-macro-card-bild {
    border-color: var(--widget-accent, #0f6cbd);
    background: #fff;
}

.tw-macro-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tw-macro-card-name { font-weight: 600; font-size: 13px; color: #172b4d; }
.tw-macro-card-desc { font-size: 12px; color: #6b7280; line-height: 1.35; }

.tw-macro-leer {
    padding: 24px 16px;
    font-size: 13px;
    color: #8993a4;
}

.tw-macro-desc { font-size: 12.5px; color: #6b7280; line-height: 1.4; }

/* Farbfeld im Makro-Dialog: Beschriftung wie bei den uebrigen Feldern, darunter
   ein Knopf mit Farbfleck. Die Palette klappt darunter auf. */
.tw-color-param { display: flex; flex-direction: column; gap: 4px; }
.tw-color-param-label {
    font-size: 12px;
    color: var(--widget-label-color, #4b5563);
}
.tw-color-param-button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: var(--widget-border-radius, 4px);
    font: inherit;
    font-size: 13px;
    color: #1f2328;
    cursor: pointer;
    text-align: left;
}
.tw-color-param-button:hover { border-color: var(--widget-accent, #0f6cbd); }
.tw-color-param-swatch {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1px solid #c6cbd4;
    border-radius: 3px;
}
/* Ohne Farbe: der diagonale Strich zeigt "nichts gesetzt" an. */
.tw-color-param-swatch.tw-color-param-none {
    background: linear-gradient(to top right,
        #fff 46%, #d0343a 46%, #d0343a 54%, #fff 54%);
}
.tw-macro-preview-title {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.03em; color: #8993a4; padding-bottom: 4px;
    border-bottom: 1px solid #dfe3e9;
}
.tw-macro-preview-body {
    padding: 14px 4px;
    max-height: 380px;
    overflow: auto;
}
.tw-column-preview { border: 1px dashed #c6cbd4; padding: 8px; border-radius: 3px; }

/* ---------------------------------------------- Kastentitel und Symbole */

.tw-panel-title { font-weight: 600; margin-bottom: 6px; }
.tw-panel-body > :last-child { margin-bottom: 0; }

/* Der schlichte Kasten ("Panel") ist nach dem Vorbild von Confluence gebaut:
   ein Titelbalken mit eigenem Hintergrund, darunter durch einen Strich
   getrennt der Inhalt. Deshalb sitzt der Innenabstand hier nicht am Kasten,
   sondern an seinen beiden Teilen - der Balken muss bis an den Rand reichen. */
.tw-panel-plain {
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dfe3e9;
}
.tw-panel-plain > .tw-panel-title {
    margin: 0;
    padding: 8px 14px;
    background: #f4f5f7;
    border-bottom: 1px solid #dfe3e9;
}
.tw-panel-plain > .tw-panel-body {
    padding: 12px 14px;
}

/* Das Symbol sitzt im Titel. Ohne Titel gibt es keines - ein Symbol allein
   über dem Fliesstext wirkt verloren. */
.tw-panel[data-icon="true"] > .tw-panel-title::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 7px;
}
.tw-panel-info[data-icon="true"]    > .tw-panel-title::before { content: "\f05a"; color: #0f6cbd; }
.tw-panel-note[data-icon="true"]    > .tw-panel-title::before { content: "\f249"; color: #7c3aed; }
.tw-panel-success[data-icon="true"] > .tw-panel-title::before { content: "\f0eb"; color: #0a7c42; }
.tw-panel-warning[data-icon="true"] > .tw-panel-title::before { content: "\f071"; color: #b45309; }
.tw-panel-error[data-icon="true"]   > .tw-panel-title::before { content: "\f057"; color: #c1121f; }


/* ------------------------------------------------- Inhaltsverzeichnis */

.tw-toc {
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid #dfe3e9;
    border-radius: var(--widget-border-radius, 4px);
    background: #fafbfc;
}
.tw-toc-title { font-weight: 600; margin-bottom: 6px; }
.tw-toc-list { margin: 0; padding-left: 18px; }
.tw-toc-list.tw-toc-list { list-style-position: outside; }
.tw-toc-item { margin: 2px 0; line-height: 1.4; }
.tw-toc-item a { color: var(--widget-accent, #0f6cbd); text-decoration: none; }
.tw-toc-item a:hover { text-decoration: underline; }

/* ------------------------------------------------- Bilder und Videos */

figure.tw-media {
    margin: 0 0 14px;
}
figure.tw-media img,
figure.tw-media video {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--widget-border-radius, 4px);
}
figure.tw-media-border img,
figure.tw-media-border video {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    background: #fff;
}
/* Dokumentvorschau (PDF) */
figure.tw-media object {
    display: block;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: var(--widget-border-radius, 4px);
    background: #fbfbfc;
}

/* --------------------------------------------- Benutzerauswahl mit @ */

.tw-mention-menu {
    position: fixed;
    z-index: 12200;
    min-width: 240px;
    max-width: 320px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: var(--widget-border-radius, 4px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
.tw-mention-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 6px 8px;
    border: 0; border-radius: 3px;
    background: none; cursor: pointer;
    font: inherit; font-size: 13px; text-align: left;
}
.tw-mention-item:hover,
.tw-mention-item.selected { background: var(--widget-accent-soft, #e9f1fb); }
.tw-mention-avatar {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--widget-accent, #0f6cbd);
    color: #fff; font-size: 11px; font-weight: 600;
}
.tw-mention-name { flex: 1 1 auto; min-width: 0; color: #172b4d;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-mention-login { flex: 0 0 auto; font-size: 12px; color: #8993a4; }
.tw-mention-hint { padding: 8px 10px; font-size: 12.5px; color: #8993a4; }

/* ------------------------------------------------------------ Links */

/* Die kleine Leiste am Link im Editor */
.tw-link-tip {
    position: fixed;
    z-index: 12200;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: var(--widget-border-radius, 4px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
    font-size: 12.5px;
}
.tw-link-tip-url {
    color: #6b7280;
    max-width: 240px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 0 6px 0 2px;
    border-right: 1px solid #eceef1;
    margin-right: 4px;
}
.tw-link-tip-action {
    border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: 12.5px; color: #44546f;
    padding: 4px 8px; border-radius: 3px;
    white-space: nowrap;
}
.tw-link-tip-action:hover { background: #eef2f7; color: var(--widget-accent, #0f6cbd); }
.tw-link-tip-action i { font-size: 11px; margin-right: 3px; opacity: .8; }

/* Reiter im Link-Dialog */
.tw-link-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #dfe3e9;
    margin-bottom: 4px;
}
.tw-link-tab {
    border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 13px; color: #6b7280;
    padding: 7px 12px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.tw-link-tab:hover { color: #172b4d; }
.tw-link-tab.active {
    color: var(--widget-accent, #0f6cbd);
    border-bottom-color: var(--widget-accent, #0f6cbd);
    font-weight: 500;
}

.tw-link-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.tw-link-row {
    display: flex; align-items: baseline; gap: 9px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: var(--widget-border-radius, 4px);
    background: none; cursor: pointer; font: inherit; text-align: left;
}
.tw-link-row:hover { background: #f4f6f9; }
.tw-link-row.selected {
    background: var(--widget-accent-soft, #e9f1fb);
    border-color: var(--widget-accent, #0f6cbd);
}
.tw-link-row > i { color: #8993a4; font-size: 12px; }
.tw-link-row-title { flex: 1 1 auto; min-width: 0; font-size: 13.5px;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-link-row-meta { flex: 0 0 auto; font-size: 12px; color: #8993a4; }

/* Auswahl beim Einfuegen eines Anhangs */
.tw-insert-modes { display: flex; flex-direction: column; gap: 8px; }
.tw-insert-mode {
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    text-align: left;
    padding: 11px 12px;
    border: 1px solid #dfe3e9;
    border-radius: var(--widget-border-radius, 4px);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
}
.tw-insert-mode:hover { border-color: var(--widget-accent, #0f6cbd); background: #f7faff; }
.tw-insert-mode > i {
    grid-row: 1 / span 2;
    color: var(--widget-accent, #0f6cbd);
    font-size: 16px;
    margin-top: 2px;
}
.tw-insert-mode-title { font-weight: 600; font-size: 13.5px; color: #172b4d; }
.tw-insert-mode-desc { font-size: 12.5px; color: #6b7280; line-height: 1.4; }

.tw-hint-error { color: #c1121f; }

figure.tw-media figcaption {
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
}
figure.tw-media-center { text-align: center; }
figure.tw-media-center img,
figure.tw-media-center video { margin-left: auto; margin-right: auto; }
figure.tw-media-right { text-align: right; }
figure.tw-media-right img,
figure.tw-media-right video { margin-left: auto; }

/* ------------------------------------------------------------- Galerie */

.tw-gallery { margin: 0 0 14px; }
.tw-gallery-title { font-weight: 600; margin-bottom: 8px; }
.tw-gallery-grid { display: grid; gap: 10px; }
.tw-gallery-grid figure { margin: 0; }
.tw-gallery-grid img {
    width: 100%;
    height: auto;
    border: 1px solid #dfe3e9;
    border-radius: var(--widget-border-radius, 4px);
    display: block;
}
.tw-gallery-grid figcaption { font-size: 12px; color: #6b7280; margin-top: 4px; }
.tw-gallery-empty {
    min-height: 90px;
    border: 1px dashed #c6cbd4;
    border-radius: var(--widget-border-radius, 4px);
    background: #fafbfc;
}

/* ---------------------------------------------------------- Erwähnungen */

.tw-mention {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--tw-brand-soft, #e9f1fb);
    color: var(--widget-accent, #0f6cbd);
    font-size: 0.95em;
    cursor: pointer;
    white-space: nowrap;
}
.tw-mention:hover { background: #d7e6f9; }

/* -------------------------------------------------------- Seitenmenü */

/* Kurzes Aufleuchten, wenn das Menü irgendwohin springt (Anhänge, Baum). */
.tw-highlight {
    animation: tw-flash 1.4s ease-out;
    border-radius: var(--widget-border-radius, 4px);
}
@keyframes tw-flash {
    0%   { background-color: #fff3a3; }
    100% { background-color: transparent; }
}

.tw-info-grid {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 6px 14px;
    font-size: 13.5px;
}
.tw-info-key { color: #6b7280; }
.tw-info-value { color: #172b4d; word-break: break-word; }
.tw-info-date { color: #8993a4; margin-left: 8px; font-size: 12.5px; }
.tw-info-muted { color: #8993a4; }

/*
 * „überfällig" neben dem Prüfdatum.
 *
 * Dieselbe Farbe wie der Hinweisbalken auf der Seite selbst - wer den
 * Balken kennt, erkennt hier dasselbe wieder. Rot waere zu viel: die Seite
 * ist nicht falsch, sie ist nur laenger nicht geprueft worden.
 */
.tw-info-faellig {
    display: inline-flex; align-items: center; gap: 5px;
    margin-left: 8px; padding: 1px 7px;
    background: #fdf6e7; border: 1px solid #f3ddb4;
    border-radius: 10px;
    color: #b45309; font-size: 12px; white-space: nowrap;
}
.tw-info-faellig i { font-size: 11px; }

/* ------------------------------------------------- Seiteninformationen */

.tw-info-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
@media (max-width: 1100px) {
    .tw-info-columns { grid-template-columns: minmax(0, 1fr); }
}
.tw-info-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.tw-info-box {
    border: 1px solid #dfe3e9;
    border-radius: var(--widget-border-radius, 4px);
    background: #fff;
    overflow: hidden;
}
.tw-info-box-head {
    padding: 9px 14px;
    background: #f7f8fa;
    border-bottom: 1px solid #dfe3e9;
    font-weight: 600;
    font-size: 13.5px;
    color: #44546f;
}
.tw-info-box-body { padding: 12px 14px; font-size: 13.5px; }

.tw-info-sub {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8993a4;
    margin: 10px 0 5px;
}
.tw-info-box-body > .tw-info-sub:first-child { margin-top: 0; }

.tw-info-link {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    min-width: 0;
}
.tw-info-link i { color: #8993a4; font-size: 12px; flex: 0 0 auto; }
.tw-info-link a {
    color: var(--widget-accent, #0f6cbd);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tw-info-link a:hover { text-decoration: underline; }
.tw-info-space { margin-left: auto; font-size: 12px; color: #8993a4; flex: 0 0 auto; }

.tw-info-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid #f0f1f4;
}
/*
 * Die flachen Knoepfe unter den Kenndaten.
 *
 * `gap` ist hier PFLICHT und keine Feinheit. Der Knopf kommt aus der
 * Bibliothek und ist `display: inline-flex`; sein Abstand zwischen Sinnbild
 * und Text kommt sonst aus `.widget-button i { margin-right: 6px }`. Diese
 * Knoepfe bekommen aber absichtlich eine eigene Klasse STATT der des
 * Widgets - das ist ihr flaches Aussehen -, und damit faellt jene Regel weg.
 * Das Leerzeichen, das im HTML zwischen `</i>` und dem Text steht, hilft
 * nicht: in einem Flex-Kasten wird Leerraum zwischen den Elementen
 * verworfen. Ohne `gap` klebt der Text am Sinnbild.
 */
.tw-info-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #dfe3e9;
    background: #fff;
    color: #44546f;
    font: inherit; font-size: 12.5px;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}
.tw-info-action:hover { border-color: var(--widget-accent, #0f6cbd); color: var(--widget-accent, #0f6cbd); }
.tw-info-more { color: var(--widget-accent, #0f6cbd); text-decoration: none; font-size: 12.5px; }
.tw-info-more:hover { text-decoration: underline; }

/* Letzte Änderungen */
.tw-change-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid #f4f5f7;
    align-items: baseline;
}
.tw-change-head {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
    color: #8993a4; border-bottom-color: #dfe3e9;
}
.tw-change-time { color: #172b4d; }
.tw-change-who { color: #44546f; }
.tw-change-diff a { color: var(--widget-accent, #0f6cbd); text-decoration: none; font-size: 12.5px; }
.tw-change-diff a:hover { text-decoration: underline; }

.tw-source-view {
    max-height: 55vh;
    overflow: auto;
    background: #fbfbfc;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: var(--widget-border-radius, 4px);
    font-size: 12.5px;
}

.tw-user-login { font-size: 12px; color: #8993a4; }

/* ------------------------------------------------------ Versionsgeschichte */

/* Zwei Spalten: links die Versionen, rechts der Vergleich. */
.tw-version-columns {
    display: grid;
    grid-template-columns: minmax(320px, 2fr) minmax(0, 3fr);
    gap: 18px;
    align-items: start;
    width: 100%;
}
@media (max-width: 1100px) {
    .tw-version-columns { grid-template-columns: minmax(0, 1fr); }
}
.tw-version-col-list, .tw-version-col-diff { min-width: 0; }
.tw-version-col-diff { position: sticky; top: 0; }
.tw-diff-leer {
    border: 1px dashed #dfe3e9;
    border-radius: var(--widget-border-radius, 4px);
    padding: 24px 16px;
    text-align: center;
    background: #fafbfc;
}

.tw-version-list { display: flex; flex-direction: column; }
.tw-version-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    border-bottom: 1px solid #f0f1f4;
}
.tw-version-row:hover { background: #fafbfc; }
.tw-version-current { background: #f7faff; }
.tw-version-pick { flex: 0 0 auto; accent-color: var(--widget-accent, #0f6cbd); }
.tw-version-info { flex: 1 1 auto; min-width: 0; }
.tw-version-head { display: flex; align-items: center; gap: 8px; }
.tw-version-badge {
    font-size: 11px; padding: 1px 7px; border-radius: 9px;
    background: var(--widget-accent-soft, #e9f1fb); color: var(--widget-accent, #0f6cbd);
}
.tw-version-minor { font-size: 11px; color: #8993a4; }
.tw-version-when { font-size: 12.5px; color: #172b4d; margin-top: 3px; }
.tw-version-line { font-size: 12.5px; color: #6b7280; margin-top: 1px; }
.tw-version-label { color: #8993a4; }
.tw-version-actions { flex: 0 0 auto; display: flex; gap: 4px; }
.tw-version-action {
    border: 1px solid transparent; background: none; cursor: pointer;
    color: #44546f; font: inherit; font-size: 12.5px;
    padding: 4px 9px; border-radius: 3px;
}
.tw-version-action:hover {
    background: #eef2f7; border-color: #dfe3e9; color: var(--widget-accent, #0f6cbd);
}
.tw-version-preview { max-height: 60vh; overflow: auto; padding: 4px 2px; }

/* Vergleich */
.tw-diff {
    margin-top: 8px;
    border: 1px solid #dfe3e9;
    border-radius: var(--widget-border-radius, 4px);
    overflow: hidden;
}
.tw-diff-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 12px;
    background: #f7f8fa;
    border-bottom: 1px solid #dfe3e9;
    font-size: 13px;
}
.tw-diff-when { color: #8993a4; font-size: 12px; }
.tw-diff-arrow { color: #8993a4; }
.tw-diff-counts { margin-left: auto; display: flex; gap: 10px; font-size: 12.5px; }
.tw-diff-added   { color: #0a7c42; }
.tw-diff-removed { color: #c1121f; }
.tw-diff-same    { color: #8993a4; }

.tw-diff-lines {
    max-height: 55vh;
    overflow: auto;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
}
.tw-diff-line { display: flex; gap: 8px; padding: 1px 10px; white-space: pre-wrap; }
.tw-diff-line.tw-diff-added   { background: #eafaf0; }
.tw-diff-line.tw-diff-removed { background: #fdeced; }
.tw-diff-marker { flex: 0 0 12px; color: #8993a4; user-select: none; }
.tw-diff-text { flex: 1 1 auto; min-width: 0; word-break: break-word; }

/* ---------------------------------------------------------- Bildeditor */

.tw-imgedit-stage {
    display: flex;
    justify-content: center;
    padding: 10px;
    background: #f7f8fa;
    border: 1px solid #dfe3e9;
    border-radius: var(--widget-border-radius, 4px);
    min-height: 180px;
    align-items: center;
}
.tw-imgedit-canvas-wrap { position: relative; line-height: 0; cursor: crosshair; }
.tw-imgedit-canvas { max-width: 100%; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12); }
.tw-imgedit-selection {
    position: absolute;
    border: 1px dashed var(--widget-accent, #0f6cbd);
    background: rgba(15, 108, 189, 0.14);
    pointer-events: none;
}
.tw-imgedit-status { font-size: 12.5px; color: #44546f; margin-left: 6px; align-self: center; }
.tw-imgedit-hint { color: #8993a4; font-size: 13px; }

/* ------------------------------------------------------------- Anhänge

   Eine Leiste, die beim Blättern am unteren Rand des Inhaltsbereichs kleben
   bleibt (`position: sticky`). Zugeklappt ist sie eine Zeile hoch und nennt
   die Anzahl; aufgeklappt zeigt sie Kacheln mit Vorschau.
   ------------------------------------------------------------------------ */

.tw-attachments {
    /* Die Leiste sitzt ausserhalb des scrollenden Teils (siehe page.js) und
       bleibt damit unten am Fensterrand - auch bei kurzem Text. */
    flex: 0 0 auto;
    z-index: 20;
    width: 100%;
    background: #fff;
    border-top: 1px solid var(--widget-border-color, #c6cbd4);
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}

.tw-attachments-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 26px;
    background: #f6f7f9;
    border: 0;
    border-bottom: 1px solid transparent;
    font: inherit;
    font-size: 13.5px;
    color: #44546f;
    cursor: pointer;
    text-align: left;
}
.tw-attachments-bar:hover { background: #eef0f4; }
.tw-attachments[data-open="true"] .tw-attachments-bar { border-bottom-color: #e5e7eb; }

.tw-attachments-icon { color: #8993a4; }
.tw-attachments-label { font-weight: 600; }
.tw-attachments-count {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #e3e6ea;
    color: #44546f;
    font-size: 12px;
    text-align: center;
}
.tw-attachments-empty .tw-attachments-count { background: #eceef1; color: #8993a4; }
.tw-attachments-spacer { flex: 1 1 auto; }
.tw-attachments-hint { font-size: 12px; color: #8993a4; }
.tw-attachments-caret { color: #8993a4; font-size: 12px; }

.tw-attachments-body {
    display: none;
    padding: 14px 26px 16px;
    max-height: 46vh;
    overflow-y: auto;
}
.tw-attachments[data-open="true"] .tw-attachments-body { display: block; }

/* Kacheln */
.tw-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.tw-attachments-none { grid-column: 1 / -1; }

.tw-attachment-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: var(--widget-border-radius, 4px);
    background: #fff;
    min-width: 0;
}
.tw-attachment-card:hover { border-color: #c6cbd4; background: #fcfcfd; }

.tw-attachment-preview {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #eceef1;
    border-radius: 3px;
    background: #fafbfc;
    overflow: hidden;
}
.tw-attachment-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tw-attachment-preview-file i { color: #8993a4; font-size: 20px; }

.tw-attachment-info { flex: 1 1 auto; min-width: 0; }
.tw-attachment-name {
    display: block;
    color: var(--widget-accent, #0f6cbd);
    text-decoration: none;
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tw-attachment-name:hover { text-decoration: underline; }
.tw-attachment-meta {
    font-size: 12px; color: #8993a4; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Nur fuer den Druck - am Bildschirm sagen Vorschau und Metazeile mehr. */
.tw-attachment-print,
.tw-attachments-print-title { display: none; }

/* Aktionen erscheinen erst beim Überfahren - sonst wirkt die Liste unruhig.
   Auf Geräten ohne Zeigegerät bleiben sie sichtbar. */
.tw-attachment-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity .12s ease-in;
}
.tw-attachment-card:hover .tw-attachment-actions,
.tw-attachment-card:focus-within .tw-attachment-actions { opacity: 1; }
@media (hover: none) {
    .tw-attachment-actions { opacity: 1; }
}

.tw-attachment-action {
    border: 0; background: transparent; color: #6b7280;
    padding: 5px 6px; border-radius: 3px; cursor: pointer;
    font-size: 12px;
}
.tw-attachment-action:hover { background: #e7eaef; color: #172b4d; }

.tw-drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed #c6cbd4;
    border-radius: var(--widget-border-radius, 4px);
    background: #fafbfc;
    color: #8993a4;
    font-size: 13px;
}
.tw-drop-zone.tw-drop-active {
    border-color: var(--widget-accent, #0f6cbd);
    background: var(--tw-brand-soft, #eef4fd);
    color: var(--widget-accent, #0f6cbd);
}
.tw-drop-link {
    border: 0; background: none; padding: 0;
    color: var(--widget-accent, #0f6cbd);
    cursor: pointer; font: inherit; text-decoration: underline;
}

/* --------------------------------------------------- Aufgabenlisten */

.tw-task-query { margin: 0 0 14px; }
.tw-task-query-title { font-weight: 600; margin-bottom: 8px; }
.tw-task-query-list { display: flex; flex-direction: column; }
.tw-task-query-row {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f1f4;
    font-size: 13.5px;
}
.tw-task-query-row > i { color: #8993a4; font-size: 13px; }
.tw-task-query-done > i { color: #0a7c42; }
.tw-task-query-done .tw-task-query-text { color: #9aa0a6; text-decoration: line-through; }
.tw-task-query-text { flex: 1 1 auto; min-width: 0; }
.tw-task-query-page {
    flex: 0 0 auto; font-size: 12.5px;
    color: var(--widget-accent, #0f6cbd); text-decoration: none;
}
.tw-task-query-page:hover { text-decoration: underline; }
.tw-task-query-space { flex: 0 0 auto; font-size: 12px; color: #8993a4; }

/* ------------------------------------------------------ Benutzerlisten */

.tw-user-list { margin: 0 0 14px; }
.tw-user-list-title { font-weight: 600; margin-bottom: 8px; }
.tw-user-grid { display: grid; gap: 6px 16px; }
.tw-user-entry {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #f0f1f4;
}
.tw-user-entry .tw-user-name { font-weight: 500; }
.tw-user-entry .tw-user-role { font-size: 12px; color: #8993a4; margin-left: auto; }

.tw-content img { max-width: 100%; height: auto; }
.tw-content img[data-align="center"], .tw-page-body img[data-align="center"] {
    display: block; margin-left: auto; margin-right: auto;
}
.tw-content img[data-align="right"], .tw-page-body img[data-align="right"] { float: right; margin: 0 0 8px 12px; }
.tw-content img[data-align="left"],  .tw-page-body img[data-align="left"]  { float: left;  margin: 0 12px 8px 0; }

/* -------------------------------------------------------- draw.io-Fenster */

.tw-drawio-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(15, 23, 42, 0.75);
}
.tw-drawio-frame {
    position: absolute;
    inset: 2vh 2vw;
    width: 96vw;
    height: 96vh;
    border: 0;
    border-radius: 6px;
    background: #fff;
}

/* ------------------------------------------------------------ Farbauswahl */

.tw-colorpop {
    position: fixed;
    z-index: 12100;
    display: grid;
    grid-template-columns: repeat(4, 22px);
    gap: 6px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: var(--widget-border-radius, 4px);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
}
.tw-swatch {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
}
.tw-swatch:hover { outline: 2px solid var(--widget-accent, #0f6cbd); outline-offset: 1px; }

/* ------------------------------------------------ ProseMirror-Feinheiten */

.ProseMirror .selectedCell::after {
    background: rgba(15, 108, 189, 0.16);
}
.ProseMirror-gapcursor::after {
    border-top-color: var(--widget-accent, #0f6cbd);
}

/* ------------------------------------- Auswahl von Zeichen und Emoticons */

.tw-sym-group {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8b929e;
    margin: 10px 2px 4px;
}

.tw-sym-group:first-child {
    margin-top: 2px;
}

.tw-sym-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.tw-sym-cell {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #2f4f7f;
    cursor: pointer;
}

.tw-sym-row-big .tw-sym-cell {
    width: 34px;
    height: 34px;
    font-size: 20px;
}

.tw-sym-cell:hover,
.tw-sym-cell:focus {
    background: #eef2f8;
    border-color: #c6d3e6;
    outline: none;
}

.tw-sym-empty {
    padding: 18px 6px;
    color: #6b7280;
    font-size: 13px;
}

/* Vorschau rechts: das Zeichen gross, darunter sein amtlicher Name. Viele
   Zeichen sind in Fliesstextgrösse nicht auseinanderzuhalten. */
.tw-sym-preview-char {
    font-size: 54px;
    line-height: 1.1;
    color: #2f4f7f;
}

.tw-sym-preview-name {
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 0.03em;
    color: #6b7280;
    word-break: break-word;
}

.tw-sym-preview-hint {
    font-size: 12px;
    color: #9aa3b2;
}

/* Sammelzeile unter dem Raster: was der Benutzer angetippt hat, wartet dort
   auf „Einfügen". Ein Klick auf ein gesammeltes Zeichen nimmt es wieder weg. */
.tw-sym-basket-hint {
    font-size: 12px;
    color: #9aa3b2;
}

.tw-sym-picked {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    border: 1px solid #c6d3e6;
    border-radius: 3px;
    background: #fff;
    color: #2f4f7f;
    cursor: pointer;
}

.tw-sym-picked-big {
    font-size: 21px;
    height: 34px;
    min-width: 34px;
}

.tw-sym-picked:hover {
    border-color: #d98c8c;
    background: #fdf3f3;
}

.tw-sym-clear {
    margin-left: auto;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.tw-sym-clear:hover {
    color: #b91c1c;
}

/* ------------------------------------------------ Anker, Unterseiten, Einbindung */

/* In der Leseansicht ist der Anker nur ein Sprungziel - er darf im Text
   keinen Platz einnehmen und keine Zeile umbrechen. */
.tw-anchor {
    display: inline;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Im Editor dagegen muss er sichtbar sein, sonst steht ein unauffindbarer
   Knoten im Absatz. */
.tw-anchor-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    margin: 0 2px;
    border: 1px dashed #9aa3b2;
    border-radius: 10px;
    background: #f4f6f9;
    color: #5b6472;
    font-size: 11.5px;
    cursor: pointer;
    user-select: none;
    vertical-align: baseline;
}

.tw-anchor-chip:hover {
    border-color: #6b7280;
    background: #eceff4;
}

.tw-anchor-chip i {
    font-size: 10px;
}

.tw-children-title,
.tw-include-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.tw-include-title a {
    color: inherit;
    text-decoration: none;
}

.tw-children-row {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 2;
}

.tw-children-row i {
    color: #9aa3b2;
    font-size: 12px;
}

/* Eingebundener Inhalt wird als Zitat kenntlich gemacht: der Leser soll
   sehen, dass der Text von woanders stammt und dort gepflegt wird. */
.tw-include-page {
    border-left: 3px solid #d6dbe4;
    padding-left: 14px;
    margin: 12px 0;
}

.tw-include-source {
    margin-top: 8px;
    font-size: 12px;
    color: #6b7280;
}

/* Von wann der Stand eines Git-Makros ist.

   Ein alter Stand ist nur dann gefährlich, wenn er sich für einen neuen
   ausgibt. Deshalb steht unter jedem Makro, woher er kommt - unauffällig,
   solange er frisch ist, und deutlich, sobald der Server nicht antwortet. */
.tw-git-stand {
    margin-top: 6px;
    font-size: 11px;
    color: #9aa4b2;
}

.tw-git-stand-alt { color: #b45309; }

/* ---------------------------------------------------------------- E-Mail

   Auf der Seite steht ein AUSSCHNITT: Betreff und Ablagedatum in einer Zeile,
   darunter die Kopfzeilen, dann acht Zeilen Rumpf, dann der Knopf zum ganzen
   Mail - und zuunterst die Anhänge, so wie in jedem Mailprogramm.

   Die Karte nimmt die volle Spaltenbreite. Eine Mail ist meist breiter als
   ein Absatz, und der abgeschottete Rahmen kann seinen Inhalt nicht umbrechen
   lassen, wenn man ihm die Breite nimmt. */

.tw-mail {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 6px;
    padding: 14px 16px;
    margin: 12px 0;
    background: #fff;
}

.tw-mail-kopf {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef1f4;
}

.tw-mail-kopf i { color: #8993a4; font-size: 13px; flex: 0 0 auto; }

.tw-mail-betreff {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #111827;
    /* Nur so breit wie nötig: die Herkunft soll NEBEN dem Betreff stehen und
       nicht ans andere Ende der Zeile gedrückt werden. Ein langer Betreff
       wird abgeschnitten, statt die Zeile zu sprengen. */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Woher die Nachricht stammt - klein, neben dem Betreff.

   Es ist eine Auskunft für den Zweifelsfall, nicht der Inhalt der Karte:
   welches Postfach, welcher Ordner. `margin-right: auto` schiebt alles
   Weitere (das Ablagedatum) an den rechten Rand. */
.tw-mail-quelle {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: auto;
    font-size: 11px;
    font-weight: 400;
    color: #9aa4b2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tw-mail-quelle i { color: #b3bcc8; margin-right: 3px; font-size: 10px; }

/* Das Ablagedatum gehört an den Kopf: es sagt, welchen Stand man vor sich
   hat, und diese Frage stellt sich beim Ansehen, nicht nach dem Lesen. */
.tw-mail-kopf .tw-mail-stand {
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
    align-self: flex-start;
}

.tw-mail-adressen { margin-bottom: 2px; }

.tw-mail-zeile {
    font-size: 12.8px;
    color: #111827;
    margin-bottom: 3px;
}

.tw-mail-zeile span {
    color: #6b7280;
    font-weight: 600;
    margin-right: 4px;
}

/* Der gekürzte Rumpf.

   Sechs Zeilen Text - 6 x 1.55 Zeilenhöhe -, und der Übergang läuft aus
   statt abzuschneiden: eine halb abgeschnittene Zeile sieht nach einem
   Fehler aus, ein Verlaufen nach Absicht. */
.tw-mail-vorschau {
    position: relative;
    /* Schriftgrösse und Zeilenhöhe stehen HIER, nicht nur am Text darin:
       `em` löst gegen die eigene Schriftgrösse auf, und die war eine andere
       als die des Rumpfes - aus sechs Zeilen wurden so knapp sieben. */
    font-size: 13.3px;
    line-height: 1.55;
    max-height: 9.3em;                 /* 6 x 1.55 */
    overflow: hidden;
    margin-top: 10px;
}

.tw-mail-vorschau::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2.6em;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
    pointer-events: none;
}

/* Passt alles hinein, gibt es nichts zu verlaufen. */
.tw-mail-vorschau-ganz { max-height: none; }
.tw-mail-vorschau-ganz::after { display: none; }

.tw-mail-rumpf {
    font-size: 13.3px;
    line-height: 1.55;
    white-space: pre-wrap;
    color: #374151;
    overflow-wrap: anywhere;
}

/* Im Betrachter darf der Text so hoch werden, wie er will - bis zum
   Rollbalken des Fensters. */
.tw-mail-rumpf-gross { max-height: none; }

/* Der abgeschottete Rahmen - nur noch im Betrachter.

   Auf der Karte stand er auch einmal; mit dem Knopf zur ganzen Nachricht ist
   er dort überflüssig geworden. Ohne feste Breite und Höhe malt der Browser
   ihn 300 x 150 Pixel. Messen lässt sich der Inhalt nicht: ein Rahmen ohne
   `allow-same-origin` verrät seine Höhe nicht. Also wird sie gesetzt. */
.tw-mail-html { width: 100%; }

.tw-mail-html iframe {
    display: block;
    width: 100%;
    border: 0;
    background: #fff;
}

.tw-mail-html-gross {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 10px;
}

.tw-mail-html-gross iframe { height: 58vh; min-height: 320px; }

.tw-mail-html-hinweis {
    font-size: 11px;
    color: #6b7280;
    background: #f6f8fb;
    border-bottom: 1px solid #e5e7eb;
    padding: 5px 10px;
}

.tw-mail-html-hinweis i { color: #7c8798; margin-right: 4px; }

/* Der Knopf zum ganzen Mail. */
.tw-mail-aktionen {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.tw-mail-oeffnen {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--widget-primary-color, #2563eb);
    background: #fff;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
}

.tw-mail-oeffnen:hover {
    border-color: var(--widget-primary-color, #2563eb);
    background: #f5f8ff;
}

.tw-mail-oeffnen i { font-size: 11px; }

.tw-mail-schutz { font-size: 11px; color: #9aa4b2; }
.tw-mail-schutz i { margin-right: 4px; }

/* Die Anhänge - zuunterst, wie in jedem Mailprogramm. */
.tw-mail-anhaenge {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eef1f4;
}

.tw-mail-anhaenge-titel {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9ca3af;
    font-weight: 700;
    margin-bottom: 6px;
}

.tw-mail-anhaenge-titel i { margin-right: 4px; }

/* Nebeneinander, solange Platz ist: drei Anhänge sollen nicht drei Zeilen
   kosten. */
.tw-mail-anhang-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tw-mail-anhang {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 320px;
    font-size: 12.5px;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 10px;
    text-decoration: none;
    background: #fbfcfe;
}

.tw-mail-anhang:hover { border-color: var(--widget-primary-color, #2563eb); }
.tw-mail-anhang i { color: #8993a4; }
.tw-mail-anhang-name { flex: 1 1 auto; min-width: 0; overflow: hidden;
                       text-overflow: ellipsis; white-space: nowrap; }
.tw-mail-anhang-groesse { color: #9ca3af; flex: 0 0 auto; }

/* Ein Anhang, der nicht übernommen wurde, sieht auch nicht wie ein Verweis
   aus - ein Klick, der nichts tut, ist schlimmer als ein grauer Eintrag. */
.tw-mail-anhang-weg { opacity: .6; cursor: default; }

.tw-mail-note {
    margin-top: 8px;
    font-size: 11.5px;
    color: #b45309;
}

.tw-mail-stand {
    margin-top: 8px;
    font-size: 11px;
    color: #9aa4b2;
}

.tw-mail-stand-warn { color: #b45309; }

/* Der Betrachter: dasselbe, nur ungekürzt. */
.tw-mail-viewer-kopf {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef1f4;
}

.tw-mail-viewer-kopf .tw-mail-adressen { flex: 1 1 auto; min-width: 0; }

/* Im Betrachter stehen Herkunft und Ablagedatum untereinander: der Kopf hat
   dort mehrere Zeilen, und nebeneinander gedrängt läse sich beides schlecht. */
.tw-mail-vermerke {
    flex: 0 0 auto;
    text-align: right;
}

.tw-mail-vermerke .tw-mail-quelle {
    display: block;
    margin: 0 0 3px;
}

.tw-mail-viewer-kopf .tw-mail-stand {
    margin: 0; flex: 0 0 auto; white-space: nowrap;
}

/* Die rohen Kopfzeilen werden selten gebraucht - und wenn, dann ganz. */
.tw-mail-roh { margin-top: 12px; }
.tw-mail-roh summary {
    font-size: 11.5px;
    color: #6b7280;
    cursor: pointer;
}
.tw-mail-roh pre {
    margin-top: 6px;
    max-height: 240px;
    overflow: auto;
    font-size: 11.5px;
    line-height: 1.45;
    background: #f6f8fb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 10px;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Die Fusszeile der Trefferliste: wie viele stehen da, und kommt noch was. */
.tw-mail-mehr {
    padding: 7px 10px;
    font-size: 11px;
    color: #9aa4b2;
    text-align: center;
    background: #fbfcfe;
    border-top: 1px solid #eef0f3;
}

/* Die Trefferliste im Einfügedialog. */
.tw-mail-treffer {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid #eef0f3;
    background: #fff;
    cursor: pointer;
}

.tw-mail-treffer:hover { background: #f3f4f7; }

.tw-mail-treffer-aktiv {
    background: #eff6ff;
    box-shadow: inset 3px 0 0 var(--widget-primary-color, #2563eb);
}

.tw-mail-treffer-von {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #1f2328;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-mail-treffer-betreff {
    display: block;
    font-size: 12.5px;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-mail-treffer-datum {
    display: block;
    font-size: 11px;
    color: #9aa4b2;
}

/* Woher ein Datensatz stammt.

   Zwei Karten auf einer Seite koennen denselben Namen tragen - eine aus
   WHMCS, eine aus dem Adressbuch. Ohne diese Zeile weiss niemand, welches
   System er anfassen muss, wenn eine Nummer nicht mehr stimmt. Deshalb
   klein, aber immer da. */
.tw-quelle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 2px 0 6px;
    padding: 1px 8px 1px 6px;
    border-radius: 10px;
    background: #eef0f3;
    color: #6b7280;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.tw-quelle i { font-size: 10px; color: #8993a4; }

/* Im Kopf einer Karte steht die Marke rechts aussen.

   Darunter sah sie aus wie eine Schaltflaeche, auf die man klicken koennte -
   sie ist aber eine Beschriftung: sie sagt, aus welchem System die Karte
   stammt. Oben rechts, auf einer Linie mit dem Titel, liest sie sich als
   das, was sie ist. */
.tw-quelle-kopf {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    align-self: center;
}

/* In der Zeilenform bleibt nur das Zeichen - der Platz reicht nicht für
   mehr, und der Titel sagt den Rest. */
.tw-quelle-knapp {
    margin: 0 0 0 6px;
    padding: 0;
    background: none;
}

/* ----------------------------------------------------------------- WHMCS

   Karte und Tabellen sehen aus wie die Kontaktkarte aus der Groupware -
   dasselbe Format, damit nicht jeder fremde Dienst seine eigene Sprache
   spricht. */

.tw-whmcs-client,
.tw-whmcs-services,
.tw-whmcs-tickets,
.tw-whmcs-ticket,
.tw-crm-karte,
.tw-crm-notizen {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    padding: 12px 14px;
    margin: 12px 0;
    background: #fff;
    max-width: 760px;
}

/* Kompakt und Zeile: dieselbe Karte, weniger davon. */
.tw-whmcs-compact { padding: 8px 10px; max-width: 460px; }
.tw-whmcs-line {
    padding: 6px 10px;
    max-width: none;
    display: flex;
    align-items: center;
    gap: 12px;
}
.tw-whmcs-line .tw-whmcs-zeile,
.tw-whmcs-line .tw-whmcs-zahlen { margin: 0; }

.tw-whmcs-kopf,
.tw-crm-kopf {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
}

.tw-whmcs-kopf i,
.tw-crm-kopf i { color: #8993a4; width: 16px; text-align: center; }

.tw-whmcs-titel,
.tw-crm-titel {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 14px;
}

.tw-whmcs-nr,
.tw-crm-nr {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: #8993a4;
    font-variant-numeric: tabular-nums;
}

.tw-whmcs-zeile {
    font-size: 13px;
    color: #4b5563;
    margin: 2px 0;
}

.tw-whmcs-zeile i { color: #9aa4b2; width: 14px; margin-right: 4px; }

.tw-whmcs-zahlen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 12.5px;
    color: #6b7280;
}

.tw-whmcs-klein {
    display: block;
    font-size: 11.5px;
    color: #8993a4;
}

/* Status als Marke. Farbe nur dort, wo sie etwas heisst - alles bunt
   einzufaerben nimmt der Farbe die Bedeutung. */
.tw-whmcs-marke,
.tw-crm-marke {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    background: #eceef1;
    color: #4b5563;
    font-size: 11.5px;
    font-weight: 500;
}

.tw-whmcs-marke-gut,
.tw-crm-marke-gut { background: #e7f5ec; color: #1a7f37; }
.tw-whmcs-marke-schlecht,
.tw-crm-marke-schlecht { background: #fdeceb; color: #b3261e; }
.tw-whmcs-marke-zu,
.tw-crm-marke-zu { background: #eceef1; color: #8993a4; }

.tw-whmcs-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    margin-top: 6px;
}

.tw-whmcs-tabelle th {
    text-align: left;
    font-weight: 600;
    color: #6b7280;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 8px 4px 0;
    border-bottom: 1px solid var(--widget-border-color, #c6cbd4);
}

.tw-whmcs-tabelle td {
    padding: 5px 8px 5px 0;
    border-bottom: 1px solid #eef0f3;
    vertical-align: top;
}

.tw-whmcs-tabelle tr:last-child td { border-bottom: none; }

.tw-whmcs-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--widget-accent, #0f6cbd);
    text-decoration: none;
}

.tw-whmcs-link:hover { text-decoration: underline; }
.tw-whmcs-tabelle .tw-whmcs-link { margin-top: 0; }

.tw-whmcs-beitrag {
    margin-top: 10px;
    padding: 8px 10px;
    background: #f6f7f9;
    border-left: 3px solid #c6cbd4;
    border-radius: 3px;
}

.tw-whmcs-beitrag-kopf {
    font-size: 11.5px;
    color: #6b7280;
    margin-bottom: 4px;
}

.tw-whmcs-beitrag-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: #1f2328;
    max-height: 180px;
    overflow-y: auto;
}

/* Woher der Stand kommt. Unaufdringlich, solange er frisch ist - und
   deutlich, sobald er es nicht mehr ist. */
.tw-whmcs-fuss {
    margin-top: 8px;
    font-size: 11px;
    color: #9aa4b2;
}

.tw-whmcs-fuss-alt { color: #b45309; }

/* Die Trefferliste in den Einfuegedialogen. */
.tw-whmcs-treffer {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: none;
    border-bottom: 1px solid #eef0f3;
    background: #fff;
    cursor: pointer;
    position: relative;
}

.tw-whmcs-treffer:hover { background: #f3f4f7; }

.tw-whmcs-treffer-aktiv {
    background: #eff6ff;
    box-shadow: inset 3px 0 0 var(--widget-primary-color, #2563eb);
}

.tw-whmcs-treffer-titel {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #1f2328;
}

.tw-whmcs-treffer-zeile {
    display: block;
    font-size: 11.5px;
    color: #6b7280;
}

.tw-whmcs-treffer-nr {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 11px;
    color: #9aa4b2;
}

/* ------------------------------------------------------------ Multimedia */

.tw-multimedia {
    margin: 12px 0;
    max-width: 100%;
}

/* Das 16:9-Verhältnis muss der Kasten selbst halten: ein iframe hat keine
   eigene Höhe, und eine feste Pixelhöhe passt nie zur Spaltenbreite. */
.tw-multimedia-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}

.tw-multimedia-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Das Vorschaubild fuer den Druck. Am Bildschirm ist es unsichtbar, geladen
   wird es trotzdem - ein <img> mit display:none holt der Browser dennoch,
   und beim Druck ist es damit schon da. */
.tw-multimedia-print {
    display: none;
}

.tw-multimedia video {
    width: 100%;
    max-width: 100%;
    display: block;
    border-radius: 4px;
    background: #000;
}

.tw-multimedia audio {
    width: 100%;
    display: block;
}

.tw-multimedia-caption {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
}

/* ------------------------------------------- Inhalte von aussen einfügen */

.tw-import-hint {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.5;
}

/* Der Kasten für Excel und Word muss beschreibbar sein: nur beim Einfügen in
   ein contenteditable-Feld kommt das HTML der Zwischenablage an, und nur
   darin stehen Tabellen und Auszeichnungen. */
.tw-import-paste {
    min-height: 220px;
    max-height: 380px;
    overflow: auto;
    padding: 10px 12px;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    background: #fff;
    font-size: 13.5px;
    line-height: 1.5;
}

.tw-import-paste:focus {
    outline: none;
    border-color: #6b93c9;
    box-shadow: 0 0 0 2px rgba(107, 147, 201, 0.18);
}

.tw-import-paste:empty::before {
    content: attr(data-leer);
    color: #9aa3b2;
}

.tw-import-paste table {
    border-collapse: collapse;
    margin: 6px 0;
}

.tw-import-paste td,
.tw-import-paste th {
    border: 1px solid #dfe3ea;
    padding: 3px 6px;
}

.tw-import-error {
    padding: 8px 10px;
    border-radius: 4px;
    background: #fdf1f1;
    border: 1px solid #e6b8b8;
    color: #a12222;
    font-size: 12.5px;
}

/* ----------------------------------------------- Datei ablegen im Dialog */

.tw-import-drop {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 2px dashed #c6cbd4;
    border-radius: 6px;
    background: #fafbfc;
}

.tw-import-drop.tw-import-drop-over {
    border-color: #6b93c9;
    background: #eef4fc;
}

.tw-import-drop.tw-import-drop-busy {
    opacity: 0.6;
    pointer-events: none;
}

.tw-import-drop > i {
    font-size: 26px;
    color: #9aa3b2;
}

.tw-import-drop-text {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}

.tw-import-drop-note {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.tw-import-pick {
    border: none;
    background: none;
    padding: 0;
    color: #2563eb;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
}

/* Der Trenner sagt, worin sich die beiden Wege unterscheiden - ohne ihn
   sähe der Dialog aus, als führten sie zum selben Ergebnis. */
.tw-import-or {
    font-size: 12.5px;
    color: #4b5563;
    text-align: center;
    padding: 2px 0;
}

.tw-import-or span {
    color: #9aa3b2;
}

/* Die schmale Ablagezone im Makro-Dialog - dieselbe Sache wie im grossen
   Einfüge-Dialog, nur unter einem Auswahlfeld statt für sich allein. */
.tw-import-drop-schmal {
    padding: 8px 12px;
    gap: 10px;
    border-width: 1px;
}

.tw-import-drop-schmal > i {
    font-size: 18px;
}

.tw-import-drop-schmal .tw-import-drop-text {
    font-size: 12px;
}

.tw-import-drop-schmal .tw-import-drop-note {
    font-size: 11px;
}

/* ------------------------------------------------- Vorschau im Bild-Dialog */

.tw-bild-vorschau {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    padding: 8px;
    background: #fafbfc;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tw-bild-vorschau img {
    max-width: 100%;
    max-height: 220px;
    display: block;
}

.tw-bild-vorschau-leer,
.tw-bild-vorschau-name {
    font-size: 12px;
    color: #6b7280;
}

/* --------------------------------------------------- Bildauswahl der Galerie */

.tw-gal-raster {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 190px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    background: #fff;
}

/* Die Kachel zeigt das Bild und darunter den Dateinamen - beides braucht es:
   zwei Aufnahmen derselben Sache unterscheiden sich oft nur im Namen. */
.tw-gal-kachel {
    width: 92px;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 4px;
    background: #f6f7f9;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}

.tw-gal-kachel img {
    width: 100%;
    height: 58px;
    object-fit: cover;
    border-radius: 2px;
    background: #fff;
}

.tw-gal-name {
    font-size: 10px;
    color: #6b7280;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-gal-kachel:hover {
    border-color: #c6d3e6;
}

.tw-gal-kachel.tw-gal-an {
    border-color: #2f5496;
    background: #eaf0fa;
}

.tw-gal-liste {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tw-gal-zeile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border: 1px solid var(--widget-border-color, #dfe3ea);
    border-radius: 4px;
    background: #fafbfc;
}

.tw-gal-nr {
    width: 18px;
    text-align: center;
    font-size: 11px;
    color: #9aa3b2;
}

.tw-gal-zeile img {
    width: 42px;
    height: 30px;
    object-fit: cover;
    border-radius: 2px;
    background: #fff;
}

.tw-gal-caption {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12px;
}

.tw-gal-knopf {
    border: none;
    background: none;
    color: #6b7280;
    cursor: pointer;
    padding: 2px 5px;
    font-size: 12px;
}

.tw-gal-knopf:disabled {
    opacity: 0.3;
    cursor: default;
}

.tw-gal-weg:hover {
    color: #b91c1c;
}

.tw-gal-leer {
    font-size: 12px;
    color: #9aa3b2;
    padding: 6px 2px;
}

/* Rückmeldung beim Ziehen einer Datei über den Editor.
   Ohne sie sieht ein missglückter Abwurf genauso aus wie ein geglückter,
   bei dem nur nichts passiert ist - man sucht dann an der falschen Stelle. */
.tw-editor.tw-editor-abwurf {
    outline: 2px dashed var(--widget-primary-color, #2563eb);
    outline-offset: -2px;
    background: #f5f9ff;
}

/* Rückmeldung beim Ziehen einer DATEI über den Editor.
   Ohne sie sieht ein missglückter Abwurf genauso aus wie ein geglückter,
   bei dem nur nichts passiert ist - man sucht dann an der falschen Stelle. */
.tw-editor.tw-editor-abwurf {
    outline: 2px dashed var(--widget-primary-color, #2563eb);
    outline-offset: -2px;
    background: #f5f9ff;
}

/* Der Kopfbalken eines Makros ist sein Griff: daran zieht man den ganzen
   Block an eine andere Stelle - etwa in eine Spalte. Der Zeiger sagt das,
   bevor man es ausprobiert. Nur beim Bearbeiten, denn nur dort geht es. */
.tw-content [data-macro-node][draggable="true"] > .tw-macro-bar {
    cursor: move;
}

/* --------------------------------------------------------------- Abacus
   Die Karten des ERP-Connectors.

   Sie sehen den WHMCS-Karten aehnlich, sind aber bewusst nicht dieselben
   Klassen: eine Abacus-Karte traegt immer eine Fusszeile mit dem Stand, den
   sie zeigt. Eine Zahl ohne Datum ist in einem Archiv wertlos, und diese
   Zeile darf deshalb nie wegformatiert werden. */
.tw-abacus {
    border: 1px solid var(--widget-border-color, #d7dbe3);
    border-radius: 6px;
    background: #fff;
    margin: 12px 0;
    overflow: hidden;
}
.tw-abacus-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f6f7f9;
    border-bottom: 1px solid var(--widget-border-color, #d7dbe3);
    font-weight: 600;
}
.tw-abacus-kopf i { color: #6b7280; }
.tw-abacus-titel { flex: 1 1 auto; min-width: 0; }
.tw-abacus-inhalt { padding: 10px 12px; }
.tw-abacus-wartet,
.tw-abacus-leer   { color: #6b7280; font-style: italic; }
.tw-abacus-fehler { color: #b42318; }
.tw-abacus-zeile { padding: 2px 0; }
.tw-abacus-zeile > span { color: #6b7280; margin-right: 6px; }

/* Ein Datensatz, den es in Abacus nicht mehr gibt. Er bleibt sichtbar -
   das ist der Sinn eines Archivs -, aber man muss es ihm ansehen. */
.tw-abacus-weg,
.tw-abacus-zeile-weg > td {
    color: #b42318;
    text-decoration: line-through;
}
.tw-abacus-weg { text-decoration: none; margin-top: 6px; font-size: .92em; }

.tw-abacus-tabelle { width: 100%; border-collapse: collapse; }
.tw-abacus-tabelle th,
.tw-abacus-tabelle td {
    padding: 4px 6px;
    border-bottom: 1px solid #eceef2;
    text-align: left;
}
.tw-abacus-tabelle th { color: #6b7280; font-weight: 600; }
.tw-abacus-rechts { text-align: right; font-variant-numeric: tabular-nums; }

.tw-abacus-fassung {
    display: flex;
    gap: 10px;
    padding: 3px 0;
    border-bottom: 1px solid #f2f3f6;
}
.tw-abacus-fassung-zeit { color: #6b7280; white-space: nowrap; }
.tw-abacus-fassung-was  { flex: 1 1 auto; min-width: 0; }

.tw-abacus-fuss {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-top: 1px solid #eceef2;
    background: #fbfbfc;
    font-size: .88em;
    color: #6b7280;
}
.tw-abacus-jetzt {
    border: 0;
    background: none;
    padding: 0;
    color: var(--widget-primary-color, #2563eb);
    cursor: pointer;
    text-decoration: underline;
    font: inherit;
}

/* Trefferliste im Einfuegedialog. */
.tw-abacus-treffer {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #eceef2;
    background: none;
    padding: 6px 10px;
    cursor: pointer;
    font: inherit;
}
.tw-abacus-treffer:hover { background: #f3f4f7; }
.tw-abacus-treffer-aktiv { background: #eef4ff; }
.tw-abacus-treffer-titel { display: block; font-weight: 600; }
.tw-abacus-treffer-zeile,
.tw-abacus-treffer-nr    { display: block; color: #6b7280; font-size: .9em; }

/* Eine Gruppe von Kaestchen im Zugangsformular (Feldtyp `mehrfach`). */
.tw-feldgruppe-titel {
    font-weight: 600;
    margin: 4px 0 2px;
}
.tw-feldgruppe-hinweis {
    color: #6b7280;
    font-size: .88em;
    margin-top: 4px;
}

/* Der eine Weg, auf dem Daten aus Abacus kommen: ein Knopf, den ein Mensch
   drueckt. Er sieht deshalb aus wie eine Handlung, nicht wie ein Hinweis. */
.tw-abacus-holen {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    background: #fff;
    padding: 1px 8px;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.tw-abacus-holen:hover:not(:disabled) { background: #f3f4f7; }
.tw-abacus-holen:disabled { opacity: .6; cursor: default; }
.tw-abacus-holnotiz { color: #15803d; }

/* --------------------------------------------------------------------------
   CRM - SuiteCRM und vtiger
   --------------------------------------------------------------------------
   Kasten, Kopfzeile und Statusmarke teilen sich die Regeln mit den
   WHMCS-Karten (siehe die Selektorlisten weiter oben): es ist dieselbe
   Anmutung, und zwei Fassungen davon liefen auseinander. Hier steht nur,
   was der CRM-Karte eigen ist - vor allem die Feldzeile aus Symbol,
   Beschriftung und Wert. */

.tw-crm-unter {
    font-size: 12.5px;
    color: #6b7280;
    margin: -2px 0 8px 25px;
}

.tw-crm-marken { margin: 0 0 8px 25px; }

/* Eine Feldzeile: Symbol, Beschriftung, Wert. Die Beschriftung hat eine
   feste Breite, damit die Werte untereinander stehen - eine Karte, in der
   jede Zeile anders anfängt, liest sich schlechter als eine Tabelle. */
.tw-crm-feld {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    margin: 3px 0;
}

.tw-crm-feld i {
    flex: 0 0 auto;
    width: 16px;
    text-align: center;
    color: #9aa4b2;
    font-size: 12px;
}

.tw-crm-label {
    flex: 0 0 auto;
    width: 118px;
    color: #8993a4;
    font-size: 12px;
}

.tw-crm-wert {
    flex: 1 1 auto;
    min-width: 0;
    color: #333;
    overflow-wrap: anywhere;
}

.tw-crm-text {
    font-size: 12.5px;
    color: #4b5563;
    margin: 8px 0 0 25px;
    padding-left: 10px;
    border-left: 2px solid #e4e7eb;
}

/* Die jüngsten Notizen auf der Karte - abgesetzt, damit man sie nicht für
   ein weiteres Feld hält. */
.tw-crm-notizen-kurz {
    margin: 10px 0 0 25px;
    padding-top: 8px;
    border-top: 1px dashed #e4e7eb;
}

.tw-crm-notiz {
    font-size: 12.5px;
    margin: 0 0 8px;
}

.tw-crm-notiz:last-child { margin-bottom: 0; }

.tw-crm-notiz-titel { font-weight: 600; color: #333; }

.tw-crm-notiz-kopf {
    font-size: 11.5px;
    color: #8993a4;
    margin-bottom: 2px;
}

.tw-crm-notiz-text { color: #4b5563; }

.tw-crm-link {
    display: inline-block;
    margin-top: 10px;
    margin-left: 25px;
    font-size: 12.5px;
}

.tw-crm-link i { font-size: 11px; margin-right: 3px; }

/* Kompakt: dieselbe Karte, weniger davon. Beschreibung und Notizen fallen
   weg - wer „kompakt" wählt, will den Namen und die Erreichbarkeit. */
.tw-crm-compact { padding: 8px 10px; max-width: 460px; }
.tw-crm-compact .tw-crm-text,
.tw-crm-compact .tw-crm-notizen-kurz { display: none; }
.tw-crm-compact .tw-crm-unter,
.tw-crm-compact .tw-crm-marken,
.tw-crm-compact .tw-crm-link { margin-left: 0; }
.tw-crm-compact .tw-crm-label { width: 92px; }

/* Der Vermerk, von wann der Stand ist. Ein alter Stand ist nur dann
   gefährlich, wenn er sich für einen neuen ausgibt. */
.tw-crm-fuss {
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid #eef0f3;
    font-size: 11.5px;
    color: #8993a4;
}

.tw-crm-fuss i { margin-right: 4px; }
.tw-crm-fuss-alt { color: #a15c00; }

/* Im Editor: die Karte ist nur ein Umriss, angefasst wird sie über den
   Balken darüber. */
.tw-crm-node { margin: 0; }


/* ====================================================================
   Die Schreibmarken der anderen

   Beides sind Verzierungen ueber dem Text, keine Elemente darin: sie
   duerfen die Zeilenhoehe nicht veraendern, sonst huepft der ganze Absatz,
   sobald der Nachbar sich bewegt. Deshalb `position: absolute` fuer den
   Namen und `width: 0` fuer den Strich.
   ==================================================================== */

.tw-fremde-marke {
    position: relative;
    display: inline-block;
    width: 0;
    height: 1em;
    vertical-align: text-bottom;
    border-left: 2px solid var(--marke-farbe, #888);
    /* Die Marke selbst faengt keine Maus - sie liegt ueber dem Text, und
       ein Klick darauf soll den Text treffen. */
    pointer-events: none;
    z-index: 5;
}

/* Der Name. Sichtbar, solange sich die Marke bewegt, und danach
   zurueckhaltend - ein Schild, das dauerhaft im Text steht, verdeckt genau
   das, was man lesen will. */
.tw-fremde-marke::after {
    content: attr(data-name);
    position: absolute;
    top: -1.35em;
    left: -2px;
    padding: 1px 5px;
    border-radius: 3px 3px 3px 0;
    background: var(--marke-farbe, #888);
    color: #fff;
    font-size: 10.5px;
    line-height: 1.4;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}

/* Beim Ueberfahren des Absatzes und in den ersten Sekunden nach einer
   Bewegung. Letzteres macht das Plugin ueber die Klasse `tw-marke-neu`. */
.tw-content p:hover .tw-fremde-marke::after,
.tw-fremde-marke.tw-marke-neu::after {
    opacity: 1;
}

.tw-fremde-auswahl {
    border-radius: 2px;
}


/* Der Aktualisieren-Knopf an einem holenden Makro.

   Er sitzt in der Makro-Leiste des Editors, neben dem Bleistift. Waehrend
   er laeuft, dreht er sich; schlaegt der Abruf fehl, wird er kurz rot - der
   INHALT bleibt dabei unveraendert, und genau das soll man auch sehen. */
.tw-macro-refresh-laeuft i { animation: tw-dreh 1s linear infinite; }

.tw-macro-refresh-fehler {
    color: #98151d !important;
    border-color: #98151d !important;
}

@keyframes tw-dreh { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- bexio

   Die Kästen der bexio-Makros. Sie sehen aus wie die von WHMCS - das ist
   Absicht: beides sind Karten aus einem Fremdsystem, und wer gelernt hat,
   die eine zu lesen, soll die andere nicht neu lernen müssen. */

.tw-bexio {
    border: 1px solid var(--tw-rahmen, #dfe3ea);
    border-radius: 6px;
    background: var(--tw-flaeche, #fff);
    margin: 12px 0;
    overflow: hidden;
}

.tw-bexio-kopf {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: var(--tw-kopf, #f6f7f9);
    border-bottom: 1px solid var(--tw-rahmen, #dfe3ea);
}

.tw-bexio-titel { font-weight: 600; flex: 1; }
.tw-bexio-rumpf { padding: 10px 12px; }

.tw-bexio-name {
    font-size: 1.05em; font-weight: 600;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-bottom: 6px;
}

.tw-bexio-nr { font-weight: 400; color: #6b7280; font-size: .9em; }

.tw-bexio-marke {
    font-size: .78em; padding: 1px 7px; border-radius: 10px;
    background: #fef3c7; color: #92400e;
}

.tw-bexio-zeile {
    display: flex; align-items: center; gap: 7px;
    padding: 2px 0; color: #374151;
}
.tw-bexio-zeile i { width: 16px; color: #9ca3af; }

.tw-bexio-text { color: #4b5563; margin: 6px 0; }

/* Die Kennzahlen - der Grund, weshalb die Karte mehr ist als eine Adresse. */
.tw-bexio-zahlen {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.tw-bexio-kennzahl {
    font-size: .85em; padding: 2px 9px; border-radius: 10px;
    background: #f3f4f6; color: #374151;
}
.tw-bexio-warn { color: #98151d; font-weight: 600; }
.tw-bexio-kennzahl.tw-bexio-warn { background: #fee2e2; }

.tw-bexio-beleg-kopf {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.tw-bexio-belegtitel { font-weight: 600; flex: 1; }

.tw-bexio-summe { font-size: 1.15em; font-weight: 600; margin: 8px 0; }

/* Der Zustand eines Belegs. Die Farben folgen der Bedeutung und nicht der
   Nummer: offen und gemahnt sind zwei verschiedene Sorgen. */
.tw-bexio-status {
    font-size: .8em; padding: 2px 9px; border-radius: 10px;
    background: #e5e7eb; color: #374151; white-space: nowrap;
}
.tw-bexio-status-8, .tw-bexio-status-2  { background: #dbeafe; color: #1e40af; }
.tw-bexio-status-9, .tw-bexio-status-3  { background: #d1fae5; color: #065f46; }
.tw-bexio-status-16 { background: #fef3c7; color: #92400e; }
.tw-bexio-status-31 { background: #fee2e2; color: #98151d; }
.tw-bexio-status-19, .tw-bexio-status-5 { background: #f3f4f6; color: #6b7280;
                                          text-decoration: line-through; }

.tw-bexio-positionen, .tw-bexio-liste { margin-top: 10px; font-size: .92em; }
.tw-bexio-positionen .tw-bexio-text td { color: #6b7280; font-style: italic; }
.tw-bexio-liste tfoot td { font-weight: 600; }
.tw-rechts { text-align: right; }

.tw-bexio-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; font-size: .9em;
}

.tw-bexio-stand {
    padding: 5px 12px; font-size: .82em; color: #6b7280;
    border-top: 1px solid var(--tw-rahmen, #f0f1f4);
}
.tw-bexio-stand-warn { color: #92400e; background: #fffbeb; }

/* ------------------------------------------------------------------ Bild
 *
 * Der Balken am Bild - dieselbe Sprache wie am Makro (tw-macro-bar), nur
 * anders angebracht.
 *
 * Warum nicht wie beim Makro ueber dem Inhalt: `image` ist ein INLINE-Knoten.
 * Ein Balken, der eine eigene Zeile beansprucht, wuerde den Textfluss
 * umbrechen und das Bild an eine andere Stelle schieben, sobald man es
 * anfasst. Der Balken liegt deshalb ueber der oberen Kante des Bildes und
 * erscheint erst, wenn man darauf zeigt oder das Bild ausgewaehlt hat.
 */
.tw-image-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;                 /* sonst steht unter dem Bild eine Lücke */
    max-width: 100%;
}

.tw-image-bar {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(241, 242, 244, .96);
    border-bottom: 1px solid #dfe3e9;
    border-radius: var(--widget-border-radius, 4px) var(--widget-border-radius, 4px) 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #44546f;
    user-select: none;
    max-width: 100%;
    /* Unsichtbar, aber nicht ausgeblendet: so ist die Einblendung weich und
       die Knöpfe behalten ihre Grösse. */
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease-in-out;
}

.tw-image-wrap:hover > .tw-image-bar,
.tw-image-wrap.tw-image-gewaehlt > .tw-image-bar {
    opacity: 1;
    pointer-events: auto;
}

.tw-image-bar > i { color: #6b7280; width: 14px; text-align: center; }
.tw-image-name { font-weight: 600; }
.tw-image-mass { color: #8993a4; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }

/* Die beiden Bleistifte links - wie am Makro die Handlung, die man will. */
.tw-image-bar .tw-macro-action { flex: 0 0 auto; padding: 2px 5px; }
.tw-image-pencil { color: var(--widget-accent, #0f6cbd); }
.tw-image-pencil:hover { background: #dbe7f6; }

/* Das ausgewählte Bild bekommt denselben Rahmen wie ein ausgewähltes Makro. */
.tw-image-wrap.tw-image-gewaehlt > .tw-editor-image {
    outline: 2px solid var(--widget-accent, #0f6cbd);
    outline-offset: 1px;
}

/* Ein Bild, dessen Anhang fehlt.
 *
 * Ohne Mindestgrösse wäre es 0x0 und der Balken damit unerreichbar - das
 * Bild liesse sich nur noch mit der Tastatur entfernen. Der gestrichelte
 * Rahmen sagt zugleich, dass hier etwas fehlt. */
.tw-image-wrap.tw-image-kaputt {
    min-width: 220px;
    min-height: 54px;
    border: 1px dashed #c9ced6;
    border-radius: var(--widget-border-radius, 4px);
    background: #fafbfc;
}
.tw-image-wrap.tw-image-kaputt > .tw-image-bar { opacity: 1; pointer-events: auto; }


/* ------------------------------------------------------------------ Jira
   Die drei Jira-Makros. Aufbau wie bei bexio: Kopf vom Renderer, Rumpf aus
   dem eingefrorenen Inhalt, darunter der Stand.

   Der Zustand ist nach KATEGORIE eingefaerbt, nicht nach Statusnamen: der
   heisst in jedem Projekt anders, die Kategorie nicht. */
.tw-jira {
    border: 1px solid var(--widget-border-color, #d7dbe3);
    border-radius: 6px;
    background: #fff;
    margin: 12px 0;
    overflow: hidden;
}
.tw-jira-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f6f7f9;
    border-bottom: 1px solid var(--widget-border-color, #d7dbe3);
    font-weight: 600;
}
.tw-jira-kopf i { color: #6b7280; }
.tw-jira-titel { flex: 1 1 auto; min-width: 0; }
.tw-jira-rumpf { padding: 10px 12px; }

.tw-jira-kopfzeile {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.tw-jira-key { font-weight: 600; font-variant-numeric: tabular-nums; }
.tw-jira-key a { text-decoration: none; }
.tw-jira-key a:hover { text-decoration: underline; }
.tw-jira-summary { font-weight: 600; }

.tw-jira-typ {
    color: #6b7280;
    font-size: .9em;
}

.tw-jira-status {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: .85em;
    font-weight: 600;
    white-space: nowrap;
}
.tw-jira-status-neu     { background: #eef2ff; color: #3730a3; }
.tw-jira-status-laufend { background: #eff6ff; color: #1d4ed8; }
.tw-jira-status-fertig  { background: #ecfdf5; color: #047857; }

.tw-jira-felder {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 6px 0;
}
.tw-jira-feld > span { color: #6b7280; }

.tw-jira-labels { margin: 4px 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tw-jira-label {
    background: #f1f5f9;
    border-radius: 3px;
    padding: 0 6px;
    font-size: .85em;
    color: #334155;
}

.tw-jira-text {
    margin-top: 6px;
    white-space: normal;
    color: #1f2937;
}

.tw-jira-tabelle { width: 100%; border-collapse: collapse; margin-top: 6px; }
.tw-jira-tabelle th,
.tw-jira-tabelle td {
    padding: 4px 6px;
    border-bottom: 1px solid #eceef2;
    text-align: left;
    vertical-align: top;
}
.tw-jira-tabelle th { color: #6b7280; font-weight: 600; }

.tw-jira-leer,
.tw-jira-mehr { color: #6b7280; font-style: italic; margin-top: 6px; }
.tw-jira-fehler { color: #b42318; font-style: normal; }

.tw-jira-stand {
    padding: 6px 12px;
    border-top: 1px solid #eceef2;
    background: #fbfbfc;
    font-size: .88em;
    color: #6b7280;
}
.tw-jira-stand-warn { color: #92400e; background: #fffbeb; }

/* Trefferliste im Einfuegedialog. */
.tw-jira-treffer {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #eceef2;
    background: none;
    padding: 6px 10px;
    cursor: pointer;
    font: inherit;
}
.tw-jira-treffer:hover { background: #f3f4f7; }
.tw-jira-treffer-aktiv { background: #eef4ff; }
.tw-jira-treffer-titel { display: block; font-weight: 600; }
.tw-jira-treffer-zeile,
.tw-jira-treffer-nr    { display: block; color: #6b7280; font-size: .9em; }

/* Der Verlauf eines Bildanhangs - in den Bildeigenschaften. */
.tw-image-verlauf { margin-top: 4px; }
.tw-image-verlauf-titel {
    font-weight: 600; font-size: 12.5px; color: #44546f;
    padding: 6px 0 4px; border-top: 1px solid #e5e7eb; margin-top: 4px;
}
.tw-image-fassung {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid #f0f1f4;
}
.tw-image-fassung:last-child { border-bottom: 0; }
.tw-image-fassung-vorschau {
    width: 56px; height: 40px; object-fit: cover; flex: 0 0 auto;
    border: 1px solid #e5e7eb; border-radius: 3px; background: #fafbfc;
}
.tw-image-fassung-text { flex: 1 1 auto; min-width: 0; }
.tw-image-fassung-kopf { font-size: 12.5px; font-weight: 600; color: #172b4d; }
.tw-image-fassung-angaben {
    font-size: 11.5px; color: #8993a4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tw-image-fassung-marke,
.tw-image-fassung-entwurf {
    display: inline-block; margin-left: 6px; padding: 0 6px;
    font-size: 10.5px; font-weight: 600; border-radius: 8px; vertical-align: 1px;
}
.tw-image-fassung-marke  { background: #e6f2ea; color: #0a7c42; }
.tw-image-fassung-entwurf { background: #fff4e5; color: #b45309; }

/* Die Knöpfe je Fassung - rechts, damit die Angaben links ruhig bleiben. */
.tw-image-fassung-aktionen {
    flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
}
.tw-image-fassung-symbol {
    width: 56px; text-align: center; color: #8993a4; flex: 0 0 auto;
}

/* ------------------------------------------------- Verweis auf eine Seite
 *
 * Der Baum, der nach einer eckigen Klammer aufgeht. Bewusst schmal und
 * ohne Kacheln: hier wird nicht ausgewaehlt, was es alles gibt, sondern
 * eine Seite gefunden, die der Schreibende schon im Kopf hat.
 */
.tw-baumwahl {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}

.tw-baumwahl-reihe {
    display: flex;
    align-items: center;
    gap: 2px;
}

.tw-baumwahl-pfeil {
    flex: 0 0 auto;
    width: 20px;
    height: 26px;
    padding: 0;
    border: 0;
    background: none;
    color: #6b7684;
    font-size: 11px;
    cursor: pointer;
}

.tw-baumwahl-pfeil:hover {
    color: #172b4d;
}

/* Platzhalter fuer Seiten ohne Kinder - damit die Titel untereinander
 * stehen und die Einrueckung die Tiefe zeigt und nicht den Pfeil. */
.tw-baumwahl-leer {
    flex: 0 0 auto;
    width: 20px;
}

.tw-baumwahl-seite {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #172b4d;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.tw-baumwahl-seite:hover {
    background: #f0f4fa;
}

.tw-baumwahl-seite > i {
    flex: 0 0 auto;
    color: #6b7684;
}

.tw-baumwahl-seite > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Der Pfad steht rechts und klein: er soll unterscheiden helfen, nicht
 * mit dem Titel um die Aufmerksamkeit streiten. */
.tw-baumwahl-pfad {
    margin-left: auto;
    flex: 0 1 auto;
    color: #8993a4;
    font-size: 11px;
}

.tw-baumwahl-hinweis {
    padding: 16px 8px;
    color: #6b7684;
    font-size: 13px;
}

/* ------------------------------------------- Welcher Zugang gerade gilt
 *
 * Steht in jedem Einfuegedialog ganz oben - aber nur dann, wenn es genau
 * EINEN brauchbaren Zugang gibt. Bei mehreren steht dort das Auswahlfeld.
 *
 * Bewusst ruhig gehalten: die Zeile beantwortet eine Frage („womit
 * eigentlich"), sie ist keine Bedienung. Deshalb kein Rahmen wie bei einem
 * Feld, sondern eine getoente Flaeche.
 */
.tw-dialog-zugang {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 4px;
    background: #f1f4f9;
    color: #44506a;
    font-size: 12.5px;
}

.tw-dialog-zugang > i {
    color: #8a94a8;
}

.tw-dialog-zugang-wort {
    color: #6b7684;
}

.tw-dialog-zugang-art {
    color: #8a94a8;
}