/* ---------------------------------------------------------------------------
   ThurWiki - Anwendungsrahmen

   Bewusst klein gehalten: Layout und Aussehen kommen aus der Widget-Library.
   Hier steht nur, was kein Widget ist - Grundzustand der Seite, Ladeanzeige,
   Notfallmeldung und ein paar Textbausteine für Karteninhalte.
   --------------------------------------------------------------------------- */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: Roboto, system-ui, sans-serif;
    font-size: 14px;
    color: #1f2328;
    background: #eef0f4;
    -webkit-font-smoothing: antialiased;
}

#app-root {
    height: 100%;
}

a {
    color: var(--widget-accent, #0f6cbd);
}

/* ------------------------------------------------------------- Ladezustand */

.tw-boot,
.tw-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 24px;
    color: #6b7280;
    font-size: 14px;
}

.tw-boot {
    height: 100vh;
}

/* ------------------------------------------------------------- Notfallseite */

.tw-fatal {
    max-width: 460px;
    margin: 14vh auto;
    padding: 28px 26px;
    background: #fff;
    border: 1px solid #c6cbd4;
    border-radius: 4px;
    text-align: center;
}

.tw-fatal i {
    font-size: 28px;
    color: #b45309;
}

.tw-fatal h1 {
    font-size: 17px;
    font-weight: 600;
    margin: 14px 0 8px;
}

.tw-fatal p {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 18px;
    word-break: break-word;
}

.tw-fatal button {
    font: inherit;
    font-size: 13px;
    padding: 7px 16px;
    border: 1px solid #c6cbd4;
    border-radius: 4px;
    background: #f6f7f9;
    cursor: pointer;
}

.tw-fatal button:hover {
    border-color: var(--widget-accent, #0f6cbd);
}

/* Konzentriertes Arbeiten: beim Bearbeiten faellt die Navigation weg und der
   Editor bekommt die volle Breite. Das Grid der Shell hat dann nur noch eine
   Spalte - ohne diese Regel bliebe die Luecke stehen. */
#tw-shell.tw-shell-focus {
    grid-template-columns: 1fr !important;
    grid-template-areas: "north" "center" !important;
}
#tw-shell.tw-shell-focus > .tw-sidebar { display: none !important; }

/* --------------------------------------------------------- Navigationsleiste */

/* Kopf der Navigation: der geöffnete Bereich, wie in Confluence */
.tw-space-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin: 0 0 4px;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
}
.tw-space-header:hover { background: #eef0f4; }

.tw-space-header-icon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--widget-border-radius, 4px);
    background: var(--widget-accent-soft, #e9f1fb);
    color: var(--widget-accent, #0f6cbd);
    font-size: 15px;
}
.tw-space-header-text { min-width: 0; }
.tw-space-header-name {
    font-weight: 600;
    font-size: 14px;
    color: #172b4d;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tw-space-header-key {
    font-size: 11px;
    color: #8993a4;
    letter-spacing: .03em;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Eng gesetzt: eine Liste von Bereichen liest sich als Block, nicht als
       Aufzaehlung mit Luft dazwischen. */
    padding: 5px 12px;
    margin: 0 8px;
    border-radius: 4px;
    color: #3f4650;
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.35;
}

.sidebar-nav-item:hover {
    background: #e7eaef;
    color: #1f2328;
}

.sidebar-nav-item.active {
    background: var(--widget-accent-soft, #e9f1fb);
    color: var(--widget-accent, #0f6cbd);
    font-weight: 500;
}

.sidebar-nav-item i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    opacity: .85;
}

/* Symbol und Text eines Eintrags. Die Library setzt dieselben Masse inline;
   diese Regeln gelten den Eintraegen, die das Wiki selbst baut (die
   Bereichsliste), damit beide gleich aussehen. */
.sidebar-nav-item .nav-icon {
    flex: 0 0 auto;
    width: 1.25rem;
    text-align: center;
}
.sidebar-nav-item .nav-text {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------- Breite, Klappen und Rollbalken

   Die Leiste selbst rollt nicht: sie traegt den Ziehgriff an ihrer rechten
   Kante, und der muss stehen bleiben. Gerollt wird im Navigationsteil
   darin - waagrecht, wenn der Seitenbaum tief wird, und senkrecht, wenn
   Bereichsliste und Baum zusammen laenger sind als der Bildschirm. */
.tw-sidebar {
    position: relative;
}

.tw-sidebar-scroll {
    min-height: 0;
    overflow: auto;
    /* Beim Rollen am Ende nicht die Seite dahinter mitnehmen. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c3c8d0 transparent;
}
.tw-sidebar-scroll::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
.tw-sidebar-scroll::-webkit-scrollbar-thumb {
    background: #c3c8d0;
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.tw-sidebar-scroll::-webkit-scrollbar-thumb:hover { background-color: #a7aeb9; background-clip: content-box; }
.tw-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }

/* Der Ziehgriff an der Kante: unsichtbar, bis der Zeiger ihn trifft. Eine
   dauerhaft sichtbare Linie waere ein zweiter Rahmen neben dem, der schon
   da ist. */
.tw-sidebar-resizer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 7px;
    z-index: 5;
    cursor: col-resize;
    background: transparent;
    touch-action: none;
}
.tw-sidebar-resizer::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2px;
    background: transparent;
}
.tw-sidebar-resizer:hover::after,
.tw-sidebar-resizer:focus-visible::after,
body.tw-resizing .tw-sidebar-resizer::after {
    background: var(--widget-accent, #0f6cbd);
}
.tw-sidebar-resizer:focus-visible {
    outline: none;
}

/* Waehrend des Ziehens: der Zeiger bleibt der Pfeil zum Ziehen, und nichts
   wird versehentlich markiert. */
body.tw-resizing {
    cursor: col-resize;
    user-select: none;
}

/* Eingeklappt: die Leiste wird SCHMAL, sie verschwindet nicht.

   Was bleibt, ist eine Spalte von 48 Punkten: oben das Zeichen des Bereichs,
   in dem man gerade ist, und auf halber Hoehe der Pfeil, der die Leiste
   zurueckholt. Vorher schwebte dieser Pfeil ueber dem Text - ein Knopf ohne
   Untergrund, der je nach Seite auf einem Absatz oder mitten in einem Bild
   lag. Eine schmale Spalte sagt ausserdem, dass da noch etwas ist.

   Das Gitter der Shell nimmt die Breite der Leiste (gemessen: "260px 1180px
   0px"), deshalb genuegt es, diese Breite zu aendern; die Spalte folgt. */
#tw-shell { position: relative; }
#tw-shell > .tw-sidebar { transition: width .22s ease; }
#tw-shell.tw-sidebar-zu > .tw-sidebar {
    /* Alles mit Vorrang: die Bibliothek schreibt Breite, Rahmen und Ueberlauf
       direkt in das style-Attribut der Leiste. */
    width: 48px !important;
    min-width: 48px !important;
    overflow: hidden !important;
}

/* In der schmalen Spalte bleibt nur das Zeichen des Bereichs stehen. Der
   Innenabstand des Navigationsteils steht inline an der Bibliothek und
   braucht deshalb Vorrang. */
#tw-shell.tw-sidebar-zu .tw-sidebar-scroll {
    padding: 8px 0 0 !important;
    overflow: hidden !important;
}
#tw-shell.tw-sidebar-zu .tw-sidebar-scroll > * { display: none !important; }
#tw-shell.tw-sidebar-zu .tw-sidebar-scroll > .tw-space-header {
    display: flex !important;
    justify-content: center;
    padding: 0;
    margin: 0;
    border-bottom: none;
}
#tw-shell.tw-sidebar-zu .tw-space-header-text { display: none; }

/* Die feststehenden Bloecke unten ("Als PDF exportieren", "Papierkorb")
   verschwinden mit ein - in der schmalen Spalte ist fuer ihre Beschriftung
   ohnehin kein Platz, wie beim Rest der Navigation. */
#tw-shell.tw-sidebar-zu .tw-sidebar-footer { display: none !important; }

/* Kein Ziehen und kein zweiter Griff an einer Spalte mit fester Breite. */
#tw-shell.tw-sidebar-zu .tw-sidebar-resizer,
#tw-shell.tw-sidebar-zu .tw-sidebar-griff { display: none; }

@media (prefers-reduced-motion: reduce) {
    #tw-shell > .tw-sidebar { transition: none; }
}

/* Der runde Griff an der Kante. Er zeigt sich, wenn der Zeiger in die Naehe
   kommt - eine dauerhaft sichtbare Scheibe waere ein Fremdkoerper neben dem
   Seitenbaum. Mit der Tastatur erreichbar bleibt er trotzdem. */
.tw-sidebar-griff,
.tw-sidebar-auf {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #d7dae0;
    border-radius: 50%;
    background: #fff;
    color: #5e6c84;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    z-index: 6;
    box-shadow: 0 1px 3px rgba(15, 26, 36, .14);
}
.tw-sidebar-griff { right: -11px; opacity: 0; transition: opacity .15s ease; }
.tw-sidebar:hover .tw-sidebar-griff,
.tw-sidebar-griff:focus-visible { opacity: 1; }
/* Der Pfeil zurueck sitzt MITTIG in der schmalen Spalte - nicht daneben und
   nicht auf dem Text. */
.tw-sidebar-auf {
    left: 50%;
    transform: translate(-50%, -50%);
}
.tw-sidebar-auf[hidden] { display: none; }
.tw-sidebar-griff:hover,
.tw-sidebar-auf:hover {
    color: var(--widget-accent, #0f6cbd);
    border-color: var(--widget-accent, #0f6cbd);
}

/* Der Knopf dafuer, ganz links in der Kopfzeile. Er bleibt stehen, wenn die
   Leiste weg ist - sonst gaebe es keinen Weg zurueck. */
.tw-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #5e6c84;
    font-size: 14px;
    cursor: pointer;
}
.tw-sidebar-toggle:hover {
    background: #eef0f4;
    color: #1f2328;
}
.tw-sidebar-toggle.tw-sidebar-toggle-zu {
    background: var(--widget-accent-soft, #e9f1fb);
    color: var(--widget-accent, #0f6cbd);
}

/* ----------------------------------------- Bereichsliste zum Aufklappen

   Erst ab elf Bereichen (siehe views/wiki/tree.js). Darunter steht die
   Liste offen da; darueber naehme sie die ganze Hoehe der Leiste ein und
   der Seitenbaum rutschte aus dem Bild. */
.tw-space-list {
    margin: 0 0 4px;
    /* Aus demselben Grund wie beim Seitenbaum: die Liste darin rollt selbst
       und darf deshalb in der Flex-Spalte nicht zusammengedrueckt werden. */
    flex: 0 0 auto;
}

.tw-space-list-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: #6b7280;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
}
.tw-space-list-toggle:hover {
    background: #e7eaef;
    color: #1f2328;
}

.tw-space-list-chevron {
    flex: 0 0 auto;
    width: 10px;
    font-size: 10px;
    transition: transform .15s ease;
}
.tw-space-list-offen .tw-space-list-chevron {
    transform: rotate(90deg);
}

.tw-space-list-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-space-list-count {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 9px;
    background: #e3e6ec;
    color: #5e6c84;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}

/* Die Liste bekommt hoechstens die Haelfte der Leiste und rollt darin. So
   bleibt der Seitenbaum darunter sichtbar, auch bei vierzig Bereichen. */
.tw-space-list-body {
    max-height: 42vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #c3c8d0 transparent;
}
.tw-space-list-body::-webkit-scrollbar { width: 9px; }
.tw-space-list-body::-webkit-scrollbar-thumb {
    background: #c3c8d0;
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.tw-space-list-body::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    .tw-space-list-chevron { transition: none; }
}

/* --------------------------------------------------------- Benutzerbereich */

/* Der ganze Block ist eine Schaltfläche und öffnet das Konto-Menü. */
.tw-user-button.widget-button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 2px 8px 2px 4px;
    height: 30px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}

.tw-user-button.widget-button:hover {
    background: #f3f4f7;
    border-color: var(--widget-border-color, #c6cbd4);
}

.tw-user-avatar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--widget-accent, #0f6cbd);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Das Feld mit dem Namen daneben - alles auf einer Mittellinie. */
.tw-user-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 8px;
}

/* Das Feld sitzt in einem Knopf MIT Text, und dort gibt die Library jedem
   <i> einen Abstand nach rechts. Der schiebt das Symbol im Kreis nach
   links - im Profil, wo kein Knopf drumherum ist, sitzt es mittig, und
   genau dieser Unterschied faellt auf. */
.tw-user-avatar i {
    margin: 0;
}

.tw-user-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
}

.tw-user-name {
    font-size: 13px;
    font-weight: 500;
    color: #1f2328;
}

.tw-user-role {
    font-size: 11px;
    color: #6b7280;
}

.tw-user-caret {
    font-size: 10px;
    color: #6b7280;
    margin-left: 2px;
}

/* Auf schmalen Fenstern nur noch Initialen und Pfeil */
@media (max-width: 900px) {
    .tw-user-text {
        display: none;
    }
}

/* ----------------------------------------------------------- Wiki-Bereich */

/* Symbol eines Bereichs - Kachel und Baumkopf */
.tw-space-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--widget-border-radius, 4px);
    background: var(--widget-accent-soft, #e9f1fb);
    color: var(--widget-accent, #0f6cbd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.tw-space-icon-small {
    width: 26px;
    height: 26px;
    font-size: 12px;
}

.tw-space-tile {
    transition: border-color .12s ease, box-shadow .12s ease;
}

.tw-space-tile:hover {
    border-color: var(--widget-accent, #0f6cbd);
    box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
}

.tw-space-tile:focus-visible {
    outline: 2px solid var(--widget-accent, #0f6cbd);
    outline-offset: 1px;
}

/* Zeilen in Listen (zuletzt geändert, Unterseiten, Treffer) */
.tw-recent-row:hover,
.tw-child-row:hover,
.tw-hit-row:hover {
    background: #f7f8fa;
}

.tw-recent-row:last-child,
.tw-child-row:last-child,
.tw-hit-row:last-child {
    border-bottom: none;
}

.tw-hit-row mark {
    background: #fff3a3;
    padding: 0 1px;
    border-radius: 2px;
}

/* Pfadleiste - sitzt in der Kopfzeile der Anwendung */
.tw-header-crumbs {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12.5px;
}
.tw-header-crumbs a,
.tw-header-crumbs [aria-current="page"] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
/* Auf schmalen Fenstern weicht der Pfad der Suche. */
@media (max-width: 900px) {
    .tw-header-crumbs { display: none; }
}

.tw-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
    color: #6b7280;
}

.tw-crumbs a {
    color: #6b7280;
    text-decoration: none;
    border-radius: 3px;
    padding: 1px 2px;
}

.tw-crumbs a:hover {
    color: var(--widget-accent, #0f6cbd);
    text-decoration: underline;
}

.tw-crumbs [aria-current="page"] {
    color: #1f2328;
    font-weight: 500;
}

.tw-crumb-sep {
    font-size: 9px;
    opacity: .55;
}

.tw-page-title {
    font-size: 25px;
    font-weight: 600;
    color: #1f2328;
    margin: 0;
    line-height: 1.25;
    word-break: break-word;
}

/* Herkunft der Seite - rechts neben dem Titel, tabellarisch.
   Drei Spalten: Beschriftung, Person, Zeitpunkt. Das Raster hält die
   Zeitangaben untereinander, auch wenn die Namen verschieden lang sind. */
.tw-page-meta {
    font-size: 12px;
    color: #6b7280;
}

.tw-page-meta-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: baseline;
    white-space: nowrap;
    line-height: 1.35;
}

.tw-page-meta-grid .tw-meta-label {
    color: #8b929e;
}

.tw-page-meta-grid .tw-meta-who {
    font-weight: 500;
    color: #4b5563;
}

.tw-page-meta-grid .tw-meta-when {
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

/* Seiteninhalt - die Regeln für die Blöcke stehen in editor.css */
.tw-page-body {
    padding: 20px 26px 0;
    /* Der Bleistift am Makro haengt hier drin und wird gegen diesen Kasten
       gerechnet - ohne `relative` sitzt er am Fensterrand. */
    position: relative;
}

/* ------------------------------------ Makro bearbeiten in der Leseansicht

   Eine schwebende Leiste ueber dem Makro, nicht darin: ein eingefuegtes
   Element wuerde in einem Kasten, einer Spalte oder einer Tabelle das Layout
   verschieben - und ausgerechnet bei den verschachtelten Makros kaeme es
   darauf an. */

.tw-macro-edit-bar {
    position: absolute;
    z-index: 30;
    display: flex;
    gap: 2px;
    /* Halb ueber der oberen Kante, wie in Confluence: so verdeckt der Knopf
       den Inhalt nicht, gehoert aber sichtbar zu diesem Makro. */
    transform: translate(-2px, -50%);
    padding: 2px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .12);
}

.tw-macro-edit-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #5b6472;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}

.tw-macro-edit-knopf:hover {
    background: #eef2ff;
    color: var(--widget-primary-color, #2563eb);
}

/* Das Makro unter dem Zeiger bekommt einen leisen Rahmen - sonst raet man,
   worauf sich der Bleistift bezieht, wenn Makros ineinanderstecken. */
.tw-macro-hover {
    outline: 1px dashed rgba(37, 99, 235, .45);
    outline-offset: 2px;
}

/* ------------------------------------------- Suchfeld in der Kopfzeile */

.tw-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.tw-search-icon {
    position: absolute;
    left: 10px;
    font-size: 12px;
    color: #9aa0a6;
    pointer-events: none;
}

.tw-search-input {
    font: inherit;
    font-size: 13px;
    width: 220px;
    height: 28px;
    padding: 0 10px 0 30px;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 999px;
    background: #f7f8fa;
    color: #1f2328;
    outline: none;
}

.tw-search-input::placeholder {
    color: #9aa0a6;
}

.tw-search-input:focus {
    background: #fff;
    border-color: var(--widget-accent, #0f6cbd);
    box-shadow: 0 0 0 2px var(--widget-accent-soft, #e9f1fb);
    width: 270px;
}

/* Die Suche braucht Platz - auf schmalen Fenstern schrumpft sie */
@media (max-width: 1100px) {
    .tw-search-input { width: 150px; }
    .tw-search-input:focus { width: 200px; }
}

@media (max-width: 800px) {
    .tw-search-box { display: none; }
}

/* --------------------------------------- Seitenbaum in der Navigation */

/*
 * Der Seitenbaum steht direkt unter seinem Bereich in der Liste - deshalb
 * eingerueckt und mit einer Fuehrungslinie, damit die Zugehoerigkeit auch
 * bei mehreren Bereichen erkennbar bleibt.
 */
.tw-tree-block {
    margin: 2px 8px 6px 14px;
    padding-left: 8px;
    border-left: 1px solid #dfe3e9;
    /* Der Baum rollt selbst, wenn er breiter wird als die Spalte. Dadurch
       steht sein Rollbalken unmittelbar unter ihm und nicht am unteren Ende
       der ganzen Leiste, wo ihn niemand mit dem Baum in Verbindung bringt.
       Die Fuehrungslinie links gehoert zum Rahmen und bleibt beim Rollen
       stehen. */
    overflow-x: auto;
    /*
     * NICHT schrumpfen.
     *
     * Mit `overflow-x: auto` wird der Block zum Rollbereich, und dessen
     * kleinstes Mass ist null statt der Inhaltshoehe. In der Flex-Spalte der
     * Navigation wurde er dadurch zusammengedrueckt: der Baum bekam einen
     * eigenen senkrechten Balken, und die Leiste rollte gar nicht mehr.
     * Richtig ist das Gegenteil - der Baum behaelt seine Hoehe, und die
     * Navigation darum rollt.
     */
    flex: 0 0 auto;
    scrollbar-width: thin;
    scrollbar-color: #c3c8d0 transparent;
}
.tw-tree-block::-webkit-scrollbar { height: 9px; }
.tw-tree-block::-webkit-scrollbar-thumb {
    background: #c3c8d0;
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.tw-tree-block::-webkit-scrollbar-track { background: transparent; }

.tw-tree-empty {
    font-size: 12.5px;
    color: #9aa0a6;
}

/* Baumknoten */
.widget-tree-node {
    cursor: pointer;
    font-size: 13px;
    color: #3f4650;
    border-radius: 4px;
    padding: 4px 6px;
}

/*
 * Die Einrueckung kommt vom Widget als padding-left und ueberschreibt damit
 * die 6px von oben. Der Innenabstand wird deshalb hier ueber einen Rahmen
 * ohne Farbe nachgereicht, damit auch Knoten der obersten Ebene nicht am
 * Rand kleben.
 *
 * Die Zeile ist so breit wie ihr Inhalt, mindestens aber so breit wie die
 * Spalte: sonst endete die Hervorhebung der gewaehlten Seite an der Kante,
 * waehrend ihr Titel weiterlaeuft.
 */
.tw-tree-block .widget-tree-node {
    border-left: 6px solid transparent;
    box-sizing: border-box;
    width: max-content;
    min-width: 100%;
}

/*
 * NICHTS in der Zeile darf schrumpfen.
 *
 * Die Zeile ist ein Flex-Kasten. Passt ein langer Titel nicht mehr hinein,
 * druecken die Flex-Regeln zuerst den 12px breiten Platzhalter zusammen, der
 * beim fehlenden Aufklapppfeil fuer die Buendigkeit sorgt - und genau die
 * Seiten mit langen Titeln ruecken dann um 12px nach links, waehrend ihre
 * Geschwister stehen bleiben. Der Titel soll stattdessen ueberstehen; dafuer
 * rollt der Baum waagrecht.
 */
.tw-tree-block .widget-tree-node > * {
    flex: 0 0 auto;
}

/* Lange Titel bleiben auf einer Zeile und werden NICHT abgeschnitten: ragt
   der Baum über die Spalte hinaus, rollt die Navigation waagrecht (siehe
   .tw-sidebar-scroll). Ein abgeschnittener Seitentitel sieht aus wie ein
   anderer - „Betrieb der Anl…" gibt es dreimal. */
.tw-tree-block .widget-tree-label {
    white-space: nowrap;
    vertical-align: middle;
    display: inline-block;
}

.widget-tree-node:hover {
    background: #e7eaef;
}

.widget-tree-node.selected {
    background: var(--widget-accent-soft, #e9f1fb);
    color: var(--widget-accent, #0f6cbd);
    font-weight: 500;
}

/* Der Knopf unter dem Baum bleibt zurueckhaltend */
.tw-tree-block .widget-button {
    font-weight: 500;
    color: #6b7280;
    border-style: dashed;
}

.tw-tree-block .widget-button:hover {
    color: var(--widget-accent, #0f6cbd);
    border-style: solid;
}

/* ---------------------------------------------------------- Kommentare */

/* Der Bereich steht unter dem Text, im selben Fluss. Er ist deutlich vom
   Inhalt abgesetzt: was hier steht, ist Gespräch über die Seite, nicht
   Seite. */
.tw-comments {
    padding: 22px 32px 8px;
    border-top: 1px solid var(--widget-border-color, #c6cbd4);
    margin-top: 26px;
}

.tw-comments-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    font-size: 14px;
}

.tw-comments-icon { color: #8993a4; }
.tw-comments-title { font-weight: 600; }

.tw-comments-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--widget-accent, #0f6cbd);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.tw-comments-list:empty + * { margin-top: 0; }
.tw-comments-done { font-size: 12px; color: #8993a4; }

.tw-comments-sep {
    margin: 18px 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: #8993a4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tw-comment-thread {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #fff;
    max-width: 900px;
}

/* Erledigt heisst zurueckgetreten, nicht weg: der Faden bleibt lesbar, aber
   er draengt sich nicht mehr auf. */
.tw-comment-resolved {
    opacity: 0.62;
    background: #fafbfc;
}

/* Das Zitat der Stelle, auf die sich der Faden bezieht. */
.tw-comment-quote {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0 0 8px;
    padding: 6px 9px;
    border: none;
    border-left: 3px solid #f0d68a;
    border-radius: 3px;
    background: #fffbe8;
    font-size: 12.5px;
    font-style: italic;
    color: #4b5563;
    cursor: pointer;
}

.tw-comment-quote:hover { background: #fdf3d4; }

/* Eine Stelle, die es nicht mehr gibt: der Kommentar bleibt lesbar, aber
   der Knopf fuehrt nirgendwohin und darf deshalb auch nicht so aussehen. */
.tw-comment-quote-weg {
    cursor: default;
    opacity: 0.65;
    text-decoration: line-through;
}

.tw-comment + .tw-comment { margin-top: 10px; }

.tw-comment-reply {
    margin-left: 22px;
    padding-left: 10px;
    border-left: 2px solid #e5e7eb;
}

.tw-comment-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.tw-comment-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--widget-accent, #0f6cbd);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.tw-comment-avatar i { margin: 0; font-size: 12px; }

.tw-comment-name { font-weight: 500; font-size: 13px; }
.tw-comment-zeit { font-size: 11.5px; color: #8993a4; }

.tw-comment-text {
    font-size: 13.5px;
    line-height: 1.55;
    color: #1f2328;
}

.tw-comment-text p { margin: 0 0 6px; }
.tw-comment-text p:last-child { margin-bottom: 0; }

.tw-comment-aktionen {
    display: flex;
    gap: 12px;
    margin-top: 5px;
}

.tw-comment-aktion {
    border: none;
    background: none;
    padding: 0;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
}

.tw-comment-aktion:hover { color: var(--widget-accent, #0f6cbd); }

.tw-comment-eingabe {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    font: inherit;
    font-size: 13.5px;
    resize: vertical;
}

.tw-comment-eingabe:focus {
    outline: none;
    border-color: var(--widget-primary-color, #2563eb);
}

.tw-comment-antwort {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 10px;
    margin-left: 22px;
}

.tw-comment-antwort .tw-comment-eingabe { flex: 1 1 auto; min-height: 34px; }

.tw-comment-neu {
    max-width: 900px;
    margin: 4px 32px 24px;
}

.tw-comment-neu-fuss {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 6px;
}

/* Die Stelle im Text.
   Gestrichelt und nicht farbig hinterlegt: eine Flaeche wuerde mit dem
   Textmarker (mark) verwechselt, und der bedeutet etwas anderes. */
.tw-comment-anchor { border-bottom: 2px dotted transparent; }

.tw-comment-anchor-aktiv {
    border-bottom-color: #e2a03f;
    background: rgba(240, 214, 138, 0.22);
    cursor: pointer;
}

.tw-comment-anchor-aktiv:hover { background: rgba(240, 214, 138, 0.45); }

/* Die gerade geöffnete Stelle hebt sich von den übrigen ab - sonst weiss
   man bei mehreren Anmerkungen im selben Absatz nicht, welche im Fenster
   steht. */
.tw-comment-anchor-offen {
    background: rgba(240, 214, 138, 0.65);
    box-shadow: inset 0 -2px 0 #e2a03f;
}

/* Das Fenster an der Stelle.

   `position: fixed`: die Stelle sitzt in einem scrollenden Bereich, und
   absolute Koordinaten wären beim ersten Scrollen falsch. Die Lage rechnet
   `comments.js` aus und zieht sie beim Scrollen nach. */
.tw-comment-popover {
    position: fixed;
    z-index: 60;
    width: 380px;
    max-width: calc(100vw - 24px);
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 5px;
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.tw-comment-popover[hidden] { display: none; }

.tw-comment-popover-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f6f7f9;
    border-bottom: 1px solid var(--widget-border-color, #c6cbd4);
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
}

.tw-comment-popover-kopf i { color: #e2a03f; }
.tw-comment-popover-kopf span { flex: 1 1 auto; }

.tw-comment-popover-zu {
    flex: 0 0 auto;
    border: none;
    background: none;
    padding: 0 2px;
    color: #8993a4;
    cursor: pointer;
    font-size: 13px;
}

.tw-comment-popover-zu:hover { color: #1f2328; }

.tw-comment-popover-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px;
}

/* Im Fenster ist der Faden schon eingerahmt - ein zweiter Rahmen darin wäre
   eine Schachtel in der Schachtel. */
.tw-comment-thread-klein {
    border: none;
    padding: 0;
    margin: 0 0 10px;
    max-width: none;
}

.tw-comment-thread-klein:last-child { margin-bottom: 0; }

.tw-comment-popover-fuss {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-top: 1px solid var(--widget-border-color, #c6cbd4);
    background: #fafbfc;
}

/* Beim blossen Überfahren ist das Fenster zum Lesen da. Festgeheftet wird
   es zum Arbeiten - das darf man sehen. */
.tw-comment-popover-fest {
    border-color: #e2a03f;
}

/* Kurzes Aufblitzen beim Springen - sonst weiss man nach dem Scrollen
   nicht, welches der Fäden gemeint war. */
@keyframes tw-comment-blitz {
    from { background: #fff2c7; }
    to   { background: transparent; }
}

.tw-comment-blitz { animation: tw-comment-blitz 1.6s ease-out; }

/* Im Editor bleibt die Markierung sichtbar, auch ohne geladene Kommentare -
   sonst weiss beim Bearbeiten niemand, dass an der Stelle etwas hängt. */
.rich-text-editor-content .tw-comment-anchor,
.ProseMirror .tw-comment-anchor {
    border-bottom-color: #e2a03f;
    background: rgba(240, 214, 138, 0.22);
}

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

/*
 * Beim Drucken bleibt nur der Seiteninhalt.
 *
 * REIHENFOLGE IST ENTSCHEIDEND: erst das Layout aufheben, dann ausblenden.
 * Umgekehrt macht die spaetere Regel `#tw-shell > * { display: block }` die
 * vorher versteckten Bereiche wieder sichtbar - beide sind !important, und
 * bei gleicher Spezifitaet gewinnt die spaetere.
 */
@media print {

    /* --- 1. Layout aufheben ------------------------------------------- */
    /* Die Shell arbeitet mit CSS-Grid und height:100vh. Beides muss weg,
       sonst endet der Ausdruck nach einer Bildschirmhoehe. */
    html, body, #app-root {
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }

    #tw-shell {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .tw-content-host {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* --- 2. Bedienelemente ausblenden ---------------------------------- */
    .tw-header,
    .tw-sidebar,
    .widget-site-sidebar,
    .widget-tree-view,
    .tw-tree-block,
    .tw-crumbs,
    .tw-search-box,
    .widget-button,
    .widget-popup-menu,
    .widget-toast-host,
    .modal-overlay,
    /* Ablageflaeche, Leiste und Aktionen der Anhaenge gehoeren zur
       Bedienung, nicht zum Dokument. Die Liste selbst bleibt - sie sagt,
       was zur Seite gehoert. */
    .tw-drop-zone,
    .tw-attachments-bar,
    .tw-attachment-actions {
        display: none !important;
    }

    /* --- 3. Inhalt aufbereiten ----------------------------------------- */
    /* Flaechen und Rahmen der Bildschirmansicht entfernen - auf Papier ist
       weiss die richtige Farbe, und Trennlinien der Bedienoberflaeche
       gehoeren nicht zum Dokument. */
    .tw-content-host > *,
    .tw-content-host > * > * {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /*
     * Alle Bloecke an derselben Kante beginnen.
     *
     * Auf dem Bildschirm haben Kopfbereich (26px), Inhalt (32px) und
     * Anhaenge (26px) unterschiedliche Innenabstaende - das faellt dort nicht
     * auf, weil sie farblich getrennt sind. Auf Papier steht alles auf
     * weissem Grund, und dann sieht man jede Abweichung sofort. Der Rand
     * kommt beim Druck allein von @page.
     */
    .tw-page-head,
    .tw-page-body,
    .tw-page-view > *,
    .tw-attachments,
    .tw-attachments-body,
    .tw-children-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .tw-page-body {
        max-width: none;
        padding: 0;
    }

    /* Auf dem Bildschirm scrollt der Text in einem eigenen Bereich, damit
       die Anhangleiste unten kleben bleibt. Auf Papier muss beides in einem
       Fluss laufen - sonst wird nur die erste Bildschirmhoehe gedruckt. */
    .tw-page-view,
    .tw-page-scroll {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /*
     * Die Anhangliste steht am ENDE des Dokuments - im normalen Fluss.
     *
     * Vorher stand hier `position: fixed; bottom: 0` mit der Annahme, der
     * Browser setze den Kasten damit auf die letzte Seite. Das tut er
     * nicht: beim Drucken wiederholt Chrome ein `fixed` Element auf JEDER
     * Seite. Der Kasten lag deshalb quer ueber dem Text - genau das, was
     * im Ausdruck als "die Spalten rendern uebereinander" auffiel. Und
     * weil er in eine feste Hoehe gezwaengt war (`max-height` mit
     * `overflow: hidden`), war die Liste zugleich unten abgeschnitten.
     *
     * Im Fluss steht sie garantiert genau einmal, hinter dem letzten
     * Absatz, und wird nie beschnitten. `break-inside: avoid` haelt sie
     * zusammen: passt sie nicht mehr auf die angefangene Seite, rutscht
     * sie ganz auf die naechste.
     */
    .tw-attachments {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
        background: transparent !important;
        break-inside: avoid;
        page-break-inside: avoid;
        margin-top: 14mm !important;
    }
    .tw-attachments-body {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .tw-attachment-grid {
        display: block !important;
    }
    /*
     * Anhaenge auf Papier: kein Vorschaubild, keine Knoepfe, sondern eine
     * schlichte Liste mit Dateiname, Datum und Urheber. Sie steht am Ende
     * des Dokuments und wird nicht ueber einen Seitenwechsel zerrissen.
     */
    /* Die Anhangliste ist ein Verzeichnis, kein Inhalt - sie darf deutlich
       kleiner sein als der Text darueber. */
    .tw-attachments-print-title {
        display: block !important;
        font-size: 11px;
        font-weight: 600;
        margin: 0 0 4px;
        padding-top: 6px;
        border-top: 1px solid #d0d3d8;
    }

    .tw-attachment-preview,
    .tw-attachment-name,
    .tw-attachment-meta {
        display: none !important;
    }

    .tw-attachment-print {
        display: block !important;
        font-size: 8.5px;
        line-height: 1.35;
        color: #444;
    }

    .tw-attachment-card {
        display: block !important;
        border: none !important;
        padding: 1px 0 !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Ohne Anhaenge faellt der ganze Block weg - eine leere Ueberschrift
       waere auf Papier nur Ballast. */
    .tw-attachments-empty {
        display: none !important;
    }

    /* Titel und Herkunftsangaben bleiben - sie gehoeren zum Dokument */
    .tw-page-title {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .tw-page-meta {
        font-size: 11px;
    }

    /* Bloecke nicht ueber Seitenwechsel zerreissen */
    .tw-panel, .tw-codeblock, figure.tw-diagram, table {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /*
     * Mehrspaltige Abschnitte bleiben mehrspaltig.
     *
     * Zwei Dinge muessen dafuer geradegerueckt werden:
     *
     *   1. Die Umbruchregel fuer schmale Fenster (`max-width: 700px` in
     *      editor.css) greift beim Drucken MIT. Eine A4-Seite ist abzueglich
     *      der Raender rund 178mm breit, das sind etwa 673 CSS-Pixel - also
     *      weniger als 700. Ohne diese Zeile stapelt der Ausdruck die
     *      Spalten untereinander, obwohl auf dem Bildschirm zwei
     *      nebeneinander stehen.
     *   2. Ein Flex-Kasten, der ueber einen Seitenwechsel laeuft, zeichnet
     *      seine Kinder in Chrome uebereinander. Deshalb bleibt ein
     *      Abschnitt zusammen; passt er nicht mehr aufs Blatt, faengt er
     *      ein neues an.
     */
    .tw-section {
        display: flex !important;
        flex-direction: row !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .tw-column {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /*
     * Video: das Vorschaubild statt des iframes.
     *
     * Ein iframe druckt der Browser als weisse Flaeche. Das Bild steht schon
     * im Dokument (siehe DocRenderer::renderMultimedia) und wird hier
     * sichtbar gemacht.
     */
    .tw-multimedia-frame {
        display: none !important;
    }

    .tw-multimedia-print {
        display: block !important;
        width: 100%;
        max-width: 120mm;
        border: 1px solid #d0d3d8;
        border-radius: 3px;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .tw-multimedia-print-text {
        padding: 6px 8px;
        font-size: 10px;
        color: #444;
        word-break: break-all;
    }

    /* Ohne das druckt Chrome Bilder und Flaechen ohne ihre Farben - eine
       Vorschau in Graustufen ist schlechter als keine Vorschau. */
    .tw-multimedia-print,
    .tw-page-body img {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    h1, h2, h3 {
        break-after: avoid;
        page-break-after: avoid;
    }

    a {
        color: #1f2328 !important;
        text-decoration: none;
    }

    /* --- E-Mail: auf Papier ganz -------------------------------------

       Auf dem Bildschirm stehen sechs Zeilen mit einem Knopf daneben. Ein
       Knopf laesst sich nicht anklicken, wenn das Blatt gedruckt ist - also
       kommt hier der ganze Text aufs Papier, und der Knopf faellt weg. */
    .tw-mail-vorschau {
        max-height: none !important;
        overflow: visible !important;
    }

    .tw-mail-vorschau::after { display: none !important; }

    .tw-mail-aktionen { display: none !important; }

    .tw-mail-anhaenge { break-inside: avoid; }

    /* Der Bleistift am Makro ist Bedienung, kein Inhalt. */
    .tw-macro-edit-bar { display: none !important; }
    .tw-macro-hover { outline: none !important; }

    @page {
        margin: 18mm 16mm;
    }
}

/* ------------------------------------------------------- Textbausteine */

/* Beschriftung/Wert-Paare in Detailkarten */
.tw-deflist {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: 13.5px;
}

.tw-deflist dt {
    color: #6b7280;
}

.tw-deflist dd {
    margin: 0;
    color: #1f2328;
    min-height: 20px;
}

@media (max-width: 620px) {
    .tw-deflist {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }
    .tw-deflist dd {
        margin-bottom: 10px;
    }
}

/* Einmalig angezeigte Zugangsdaten */
.tw-credentials {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    background: #f6f7f9;
    border: 1px solid #c6cbd4;
    border-radius: 4px;
}

.tw-credentials > div {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.tw-credentials span {
    flex: 0 0 110px;
    font-size: 12px;
    color: #6b7280;
}

.tw-credentials code {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 14px;
    font-weight: 600;
    color: #1f2328;
    user-select: all;
    word-break: break-all;
}

/* ==================================================== Sicherheits-Ansicht */

.tw-sec-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: #f0fbf4;
    border: 1px solid #b7e4c7;
    border-radius: 8px;
}
.tw-sec-banner-alarm {
    background: #fdf3e7;
    border-color: #f3c78b;
}
.tw-sec-pills { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
.tw-sec-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 500;
    background: #fff;
    border: 1px solid #dfe3e9;
}
.tw-sec-pill i { font-size: 11px; }
.tw-sec-ok    { color: #0a7c42; border-color: #b7e4c7; }
.tw-sec-warn  { color: #b45309; border-color: #f3c78b; }
.tw-sec-alarm { color: #c1121f; border-color: #f3a3a3; background: #fdeded; }
.tw-sec-muted { color: #6b7280; }
.tw-sec-banner-reason { flex-basis: 100%; font-size: 12.5px; color: #7c4a05; }
.tw-sec-banner-actions { flex: 0 0 auto; }

/* Verlaufsbalken - schlicht, ohne Diagrammbibliothek */
.tw-sec-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 120px;
    padding: 8px 0 0;
}
.tw-sec-bar {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}
.tw-sec-bar-fill {
    width: 70%;
    min-height: 2px;
    background: var(--widget-accent, #0f6cbd);
    border-radius: 2px 2px 0 0;
    transition: height .2s;
}
.tw-sec-bar:hover .tw-sec-bar-fill { background: #0a4f8a; }
.tw-sec-bar-label { font-size: 9px; color: #9aa0a6; margin-top: 3px; }

.tw-sec-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.tw-sec-kind {
    display: flex;
    gap: 6px;
    align-items: baseline;
    padding: 3px 9px;
    background: #f3f4f7;
    border-radius: 14px;
    font-size: 12px;
    color: #4b5563;
}
.tw-sec-kind strong { color: #1f2328; }

.tw-sec-sub {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 6px 0 2px;
}

.tw-sec-allowlist { margin-top: 12px; }
.tw-sec-allow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 12px;
    margin: 0 6px 6px 0;
    background: var(--tw-brand-soft, #eef4fd);
    border: 1px solid #c9daf8;
    border-radius: 16px;
    font-size: 12.5px;
    color: var(--widget-accent, #0f6cbd);
}
.tw-sec-allow i { cursor: pointer; opacity: .6; }
.tw-sec-allow i:hover { opacity: 1; color: #c1121f; }

.tw-sec-detail { display: flex; flex-direction: column; gap: 2px; }
.tw-sec-detail-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid #f1f2f4;
    font-size: 13px;
}
.tw-sec-detail-row span { color: #6b7280; }
.tw-sec-detail-row strong { font-weight: 500; color: #1f2328; word-break: break-word; }

@media (max-width: 900px) {
    .tw-sec-detail-row { grid-template-columns: 1fr; gap: 0; }
}

/* --------------------------------------------------------- Zwei-Faktor */
.tw-2fa-info { font-size: 13px; color: #4b5563; line-height: 1.55; }
.tw-2fa-state { font-size: 13.5px; color: #1f2328; }
.tw-2fa-resend { color: var(--widget-accent, #0f6cbd); text-decoration: none; }
.tw-2fa-resend:hover { text-decoration: underline; }

/* Wird im 2FA-Schritt genutzt, um Benutzer- und Passwortfeld auszublenden.
   Als Klasse mit !important, weil die Library inline gesetzte Stile beim
   Anwenden ihrer Layout-Styles sonst wieder ueberschreibt. */
.tw-hidden { display: none !important; }

/* ======================================================= Papierkorb */

.tw-trash-item {
    background: #fff;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
}

.tw-trash-item:hover {
    border-color: #9aa3b2;
}

.tw-trash-title {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-trash-title i {
    color: #9aa3b2;
    margin-right: 6px;
}

.tw-trash-meta {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* Die mitgeloeschten Unterseiten - nur Anzeige, nicht anklickbar: einzeln
   wiederherstellen laesst sich davon nichts, sie haengen am Vater. */
.tw-trash-children {
    border-top: 1px dashed #dfe3ea;
    padding: 6px 14px 10px;
    background: #fafbfc;
}

.tw-trash-child {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.9;
}

.tw-trash-child i {
    color: #b6bdc9;
    margin-right: 6px;
    font-size: 11px;
}

/* Bereichsüberschrift im Papierkorb - nur nötig, wenn mehr als ein Bereich
   verwaltet wird; sonst wüsste man bei gleichen Titeln nicht, welche Seite
   aus welchem Bereich stammt. */
.tw-trash-group {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.tw-trash-group-key {
    margin-left: 8px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #9aa3b2;
}

/* ------------------------------------------ Bereich im Seitenpfad

   Der erste Eintrag des Pfads ist der Bereich - kein Zwischenschritt,
   sondern der Ort, in dem alles Weitere liegt. Symbol und graues Kästchen
   heben ihn deshalb von den Seitentiteln dahinter ab. */
.tw-header-crumbs .tw-crumb-space,
.tw-crumbs .tw-crumb-space,
.tw-crumb-space {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    /* Ein Kästchen, keine Pille - der Bereich ist ein Ort, keine Marke.
       Die Angabe steht bewusst spezifisch: eine allgemeine Regel für
       Verweise in der Kopfzeile zieht die Ecken sonst auf 3px zurück. */
    border-radius: 4px;
    background: #eef0f4;
    border: 1px solid #dfe3ea;
    color: #4b5563 !important;
    font-weight: 500;
    text-decoration: none;
    /* Der Pfad kürzt lange Einträge; das Kästchen soll dabei nicht
       zusammenfallen - der Bereichsname trägt die Orientierung. */
    max-width: 220px;
}

.tw-crumb-space:hover {
    background: #e4e7ee;
    border-color: #cdd3dd;
}

.tw-crumb-space i {
    font-size: 11px;
    color: #7b8394;
}

.tw-crumb-space span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------- Sortierbare Tabelle */

.tw-sortable-head {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px !important;
}

.tw-sortable-head:hover {
    background: #eef2f8;
}

/* Der Pfeil steht immer da, aber nur blass - sonst springt die Spaltenbreite
   beim ersten Sortieren. */
.tw-sortable-head::after {
    content: "\f0dc";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #b6bdc9;
}

.tw-sortable-head.tw-sorted-auf::after {
    content: "\f0de";
    color: #4b5563;
}

.tw-sortable-head.tw-sorted-ab::after {
    content: "\f0dd";
    color: #4b5563;
}

/* ------------------------------------------- Angehängte Datei auf der Seite */

.tw-document-embed {
    margin: 14px 0;
    border: 1px solid var(--widget-border-color, #dfe3ea);
    border-radius: 5px;
    padding: 14px 16px;
    background: #fff;
}

.tw-document-title {
    font-weight: 600;
    margin-bottom: 8px;
}

.tw-document-body > *:first-child {
    margin-top: 0;
}

.tw-document-body > *:last-child {
    margin-bottom: 0;
}

.tw-document-note {
    margin-top: 10px;
    font-size: 12px;
    color: #92400e;
    background: #fdf6e7;
    border: 1px solid #f3ddb4;
    border-radius: 4px;
    padding: 6px 9px;
}

/* Der Verweis auf die Datei gehört dazu: der Leser soll sehen, woher der
   Inhalt stammt, und die Datei selbst holen können. */
.tw-document-source {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #eef0f4;
    font-size: 12px;
    color: #6b7280;
}

.tw-document-source i {
    color: #9aa3b2;
    margin-right: 4px;
}

/* Aufgabenlisten aus einer Markdown-Datei */
.tw-document-body ul.tw-tasks {
    list-style: none;
    padding-left: 4px;
}

.tw-document-body li.tw-task-done {
    color: #6b7280;
    text-decoration: line-through;
}

/* ------------------------------------------------------------- Diagramm */

.tw-chart {
    margin: 14px 0;
}

/*
 * Der Titel braucht oben Luft.
 *
 * Der Bearbeiten-Bleistift der Leseansicht sitzt halb ueber der oberen Kante
 * des Makros. Stand der Titel buendig darunter, verdeckte ihn seine untere
 * Haelfte - gemessen an der Demo-Seite „Gewerbepark Nord", wo von „Geplante
 * Stunden" nur die Unterlaengen zu sehen waren.
 */
.tw-chart-title {
    font-weight: 600;
    margin-top: 4px;
    margin-bottom: 6px;
}

/* Das SVG bringt sein Seitenverhältnis mit und passt sich der Spalte an. */
.tw-chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

.tw-chart-grid {
    stroke: #e7eaef;
    stroke-width: 1;
}

.tw-chart-zero {
    stroke: #b6bdc9;
    stroke-width: 1;
}

.tw-chart-axis-line {
    stroke: #c6cbd4;
    stroke-width: 1;
}

.tw-chart-axis {
    fill: #6b7280;
    font-size: 11px;
    font-family: inherit;
}

/* Die Einheit ueber der Werteachse - einmal, statt hinter jeder Zahl.
   Etwas dunkler als die Achsenbeschriftung: sie ist eine Aussage, keine
   Hilfslinie. */
.tw-chart-unit {
    fill: #44506a;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
}

.tw-chart-value {
    fill: #4b5563;
    font-size: 10px;
    font-family: inherit;
}

.tw-chart-slice {
    fill: #fff;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
}

.tw-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
    font-size: 12px;
    color: #4b5563;
}

.tw-chart-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tw-chart-key i {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    display: inline-block;
}

/* Tabellen aus einer Tabellenkalkulation: die Spalten richten sich nach dem
   Inhalt, aber keine wird breiter als 200px. Ohne die Grenze zieht eine
   lange Bemerkungsspalte die ganze Tabelle in die Breite und drückt alle
   anderen auf ein paar Zeichen zusammen. */
/* `table.tw-table` in editor.css setzt `table-layout: fixed` und `width: 100%`
   und ist mit Element + Klasse spezifischer als eine Klasse allein - deshalb
   steht hier dieselbe Form, sonst greift die Regel nicht. */
table.tw-table.tw-table-auto {
    table-layout: auto;
    width: auto;
    max-width: 100%;
}

table.tw-table.tw-table-auto td,
table.tw-table.tw-table-auto th {
    /* Schmale Spalten bleiben schmal, breite werden bei 200px umbrochen. */
    max-width: 200px;
    overflow-wrap: break-word;
    white-space: normal;
}

/* Ohne Rahmen: der Inhalt steht wie gewöhnlicher Text auf der Seite. */
.tw-document-embed.tw-document-plain {
    border: none;
    padding: 0;
    background: none;
}

.tw-document-embed.tw-document-plain .tw-document-source {
    border-top: none;
    padding-top: 0;
}

/* Eine Tabelle aus einer Excel-Mappe bringt ihre eigenen Breiten und Farben
   mit - die stehen inline an den Zellen. Sie darf deshalb nicht auf volle
   Breite gezogen und nicht gleichmässig verteilt werden. */
table.tw-table.tw-table-xlsx {
    table-layout: auto;
    width: auto;
    /* Kein max-width: die Tabelle bringt ihre Spaltenbreiten aus der Datei
       mit. Passt sie nicht in die Breite, die das Makro vorgibt, rollt der
       Rahmen darum waagrecht - abschneiden waere schlimmer, denn dann fehlten
       Spalten, ohne dass jemand es merkt. */
}

/* Der Rahmen um eine Tabelle rollt waagrecht, wenn es nötig ist. Das gilt
   auch innerhalb eines Dokument-Makros mit fester Breite. */
.tw-document-body .tw-table-wrap,
.tw-page-body .tw-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}

table.tw-table.tw-table-xlsx td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Grundgroesse einer Arbeitsmappe: Excel setzt sie ueblicherweise auf 11 Punkt.
   Zellen mit eigener Angabe uebersteuern das inline. Ohne diese Regel erbt die
   Tabelle die Schriftgroesse der Wiki-Seite und wirkt neben dem Original
   deutlich zu gross. */
table.tw-table.tw-table-xlsx {
    font-size: 11pt;
}

table.tw-table.tw-table-xlsx td,
table.tw-table.tw-table-xlsx th {
    padding: 2px 6px;
}

/* Tabellen aus Word bringen Rahmen, Hintergruende und Ausrichtung inline
   mit. Die Zellen sind in Word knapp - ein Absatz ohne Abstand, links
   buendig, auch in der Kopfzeile; fett ist dort, was das Format fett macht. */
.tw-document-body table.tw-table-docx td,
.tw-document-body table.tw-table-docx th {
    padding: 1px 7px;
    vertical-align: top;
    text-align: left;
    font-weight: normal;
}
.tw-document-body table.tw-table-docx p {
    margin: 0;
}
/* Listenpunkte aus Word und LibreOffice tragen ihren Text als Absatz. */
.tw-document-body li > p {
    margin: 0;
}
.tw-document-body .tw-docx-toc p {
    margin: 0 0 2px;
}
.tw-document-body ol.tw-footnotes {
    font-size: 0.9em;
}
.tw-document-body sup.tw-fn-ref a,
.tw-document-body a.tw-fn-back {
    text-decoration: none;
}

/* Initiale - der erste Buchstabe eines Absatzes gross und umflossen, wie in
   Word und LibreOffice. Am Absatz steht nur data-dropcap. */
p[data-dropcap]::first-letter {
    float: left;
    font-size: 3.2em;
    line-height: 0.85;
    margin: 0.05em 0.08em 0 0;
}

/* Eine Tabelle, deren Zellen ihre Linien selbst mitbringen (aus Word oder
   LibreOffice): kein Gitter, kein Aussenrahmen, keine Kopfzeilenfarbe -
   nur, was an den Zellen steht. Die Angaben der Zellen stehen inline und
   gewinnen damit gegen diese Regel. */
table.tw-table-cells,
table.tw-table-cells th,
table.tw-table-cells td {
    border: none;
}
table.tw-table-cells th {
    background: transparent;
    font-weight: normal;
}

/* Eine Zelle mit Formel: ein kleines Dreieck in der Ecke, wie Excel es fuer
   Kommentare zeigt - man sieht, dass hier gerechnet wird. Die Formel steht
   im Tooltip (Leseansicht) und in der Formelleiste (Editor). */
td.tw-formula-cell,
th.tw-formula-cell {
    background-image: linear-gradient(225deg, #6b8fd6 0 5px, transparent 5px);
    background-repeat: no-repeat;
    font-variant-numeric: tabular-nums;
}

/* Die Formelleiste ueber einer Formelzelle im Editor (formula-plugin.js). */
.tw-formula-bar {
    position: fixed;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid #c6cbd4;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
    font-size: 13px;
}
.tw-formula-bar-fx {
    font-style: italic;
    font-weight: 600;
    color: #4b5d7a;
    padding: 0 2px;
}
.tw-formula-bar-input {
    width: 280px;
    max-width: 60vw;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    padding: 3px 6px;
    border: 1px solid #c6cbd4;
    border-radius: 4px;
}
.tw-formula-bar-input:disabled {
    background: #f5f6f8;
    color: #6b7280;
}
.tw-formula-bar-hint {
    color: #6b7280;
    font-size: 12px;
    white-space: nowrap;
}

/* Zellen, die in Excel den Umbruch gesetzt haben, brechen auch hier um -
   die Regel dafür steht inline an der Zelle (white-space: normal). */

/* Bild mit Rahmen - die Angabe steht am Knoten, nicht im Text. */
.tw-page-body img[data-border="1"],
.tw-content img[data-border="1"] {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 3px;
    padding: 3px;
    background: #fff;
}

/* ================================================= Schriftbild einstellen */

.tw-stil-karte {
    background: #fff;
    border: 1px solid var(--widget-border-color, #dfe3ea);
    border-radius: 5px;
    padding: 12px 14px;
}

.tw-stil-titel {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.tw-stil-farbe-zeile {
    display: flex;
    gap: 6px;
    align-items: center;
}

.tw-stil-farbwahl {
    width: 34px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 3px;
    background: none;
    cursor: pointer;
}

.tw-stil-farbtext {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 3px;
    padding: 0 7px;
    font-size: 12.5px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Die Vorschau bleibt beim Blättern stehen - sonst müsste man für jede
   Änderung wieder nach oben rollen, um sie zu sehen. */
.tw-stil-vorschau {
    position: sticky;
    top: 16px;
}

.tw-stil-vorschau-kopf {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8b929e;
    margin-bottom: 6px;
}

.tw-stil-vorschau-blatt {
    background: #fff;
    border: 1px solid var(--widget-border-color, #dfe3ea);
    border-radius: 5px;
    padding: 18px 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.tw-stil-vorschau-blatt > *:first-child {
    margin-top: 0;
}

/* Auswahlfelder im Schriftbild-Formular: das Feld des Browsers, damit
   Tastatur, Tippsuche und Bedienhilfen ohne Zutun funktionieren. */
.tw-stil-feld {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tw-stil-select {
    height: 32px;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 3px;
    padding: 0 6px;
    font-size: 13px;
    background: #fff;
    color: #1f2328;
}

.tw-stil-select:focus {
    outline: none;
    border-color: #6b93c9;
    box-shadow: 0 0 0 2px rgba(107, 147, 201, 0.18);
}
.tw-stil-zahl {
    height: 32px;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 3px;
    padding: 0 8px;
    font-size: 13px;
    background: #fff;
    color: #1f2328;
    width: 100%;
    box-sizing: border-box;
}

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

/* ------------------------------------------------------------------ */
/* Wiki-Verwaltung: eigener Rahmen, eigene Menüführung                  */
/*                                                                      */
/* Bewusst anders eingefärbt als das Wiki. Wer hier etwas ändert, ändert */
/* es für alle - das soll man sehen, bevor man klickt, nicht danach.     */
/* ------------------------------------------------------------------ */

.tw-admin-shell {
    background: #eef0f4;
}

.tw-admin-header {
    display: flex;
    background: #1f2937;
    color: #e5e7eb;
    border-bottom: 1px solid #111827;
}

.tw-admin-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.tw-admin-brand i {
    color: #93c5fd;
}

.tw-admin-brand-wiki {
    font-weight: 400;
    color: #9ca3af;
    padding-left: 9px;
    border-left: 1px solid #374151;
}

.tw-admin-crumbs {
    font-size: 12px;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-admin-crumbs a {
    color: #cbd5e1;
}

.tw-admin-back button,
button.tw-admin-back {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}

.tw-admin-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #d1d5db;
    white-space: nowrap;
}

.tw-admin-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #374151;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* Die Reiter der Verwaltung. */
.tw-admin-menu {
    display: flex;
    background: #111827;
    border-bottom: 1px solid var(--widget-border-color, #c6cbd4);
    overflow-x: auto;
}

.tw-admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 13px;
    color: #9ca3af;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.tw-admin-tab i {
    font-size: 12px;
    width: 14px;
    text-align: center;
}

.tw-admin-tab:hover {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.05);
}

.tw-admin-tab.active {
    color: #fff;
    border-bottom-color: #60a5fa;
    background: rgba(96, 165, 250, 0.10);
}

/* ------------------------------------------------------------------ */
/* Eigenes Profil                                                       */
/* ------------------------------------------------------------------ */

.tw-profil-bild {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #e5e7eb;
    border: 2px dashed transparent;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
}

.tw-profil-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tw-profil-bild-ziel {
    border-color: var(--widget-accent, #0f6cbd);
    background: #dbeafe;
}

.tw-profil-initialen {
    font-size: 34px;
    font-weight: 600;
    color: #6b7280;
    line-height: 1;
}

.tw-profil-bild-hinweis {
    font-size: 10.5px;
    color: #9ca3af;
    padding: 0 10px;
}

.tw-profil-fest {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    padding-top: 2px;
}

.tw-profil-fest strong {
    color: #1f2328;
}

.tw-profil-fest-note {
    font-size: 11.5px;
    color: #9ca3af;
}

.tw-profil-meta {
    font-size: 12px;
    color: #6b7280;
    padding: 8px 2px 0;
}

/* ------------------------------------------------------------------ */
/* Zugangsdaten                                                         */
/* ------------------------------------------------------------------ */

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

.tw-acc-row {
    display: flex;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    box-sizing: border-box;
}

.tw-acc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    background: #eef2f7;
    color: #475569;
    font-size: 15px;
}

.tw-acc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #1f2328;
}

.tw-acc-kind {
    font-size: 11px;
    font-weight: 500;
    color: #475569;
    background: #eef2f7;
    border-radius: 3px;
    padding: 1px 6px;
}

.tw-acc-off {
    font-size: 11px;
    font-weight: 500;
    color: #92400e;
    background: #fef3c7;
    border-radius: 3px;
    padding: 1px 6px;
}

.tw-acc-sub {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-acc-state-ok    { color: #15803d; }
.tw-acc-state-bad   { color: #b91c1c; }
.tw-acc-state-unknown { color: #9ca3af; }

.tw-acc-hint {
    display: flex;
    gap: 8px;
    font-size: 12.5px;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: 8px 10px;
    line-height: 1.5;
}

/* Die Auswahl der Art: je Zeile ein Knopf mit Namen und Erklärung. */
button.tw-acc-choice,
.tw-acc-choice {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 10px 12px !important;
    height: auto !important;
}

.tw-acc-choice > i {
    font-size: 16px;
    color: #475569;
    padding-top: 2px;
    width: 20px;
    text-align: center;
    flex: 0 0 auto;
}

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

.tw-acc-choice-text strong {
    font-size: 13.5px;
    color: #1f2328;
}

.tw-acc-choice-text span {
    font-size: 12px;
    color: #6b7280;
    white-space: normal;
    line-height: 1.45;
}

/* Beide Rahmen füllen ihren Platz ganz aus. */
.tw-shell-host {
    width: 100%;
    height: 100vh;
}

.tw-shell-host[hidden] {
    display: none !important;
}

/* Die Auswahl der Zugangsart: linksbündig.
   Die Library zentriert den Inhalt einer Schaltfläche - bei Zeilen
   unterschiedlicher Länge sieht das aus, als wären einzelne eingerückt. */
button.tw-acc-choice,
.tw-acc-choice {
    justify-content: flex-start !important;
}

.tw-acc-choice-text {
    flex: 1 1 auto;
}

/* ------------------------------------------------------------------ */
/* Seite verschieben                                                    */
/* ------------------------------------------------------------------ */

.tw-move-target {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #6b7280;
    background: #f6f7f9;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    padding: 7px 10px;
    box-sizing: border-box;
}

.tw-move-target-set {
    color: #1f2328;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.tw-move-target i {
    color: #6b7280;
}

.tw-move-target-set i {
    color: #1d4ed8;
}

/* Die ganze Zeile ist das Ziel - das soll man auch sehen. */
.tw-move-tree .widget-tree-node {
    cursor: pointer;
    border-radius: 3px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.tw-move-tree .widget-tree-node:hover {
    background: #f1f5f9;
}

.tw-move-tree .widget-tree-node.selected {
    background: #dbeafe;
    box-shadow: inset 2px 0 0 #1d4ed8;
}

.tw-move-tree .widget-tree-label {
    flex: 1 1 auto;
}

/* ------------------------------------------------------------------ */
/* Groupware: Kontakte und Termine                                      */
/* ------------------------------------------------------------------ */

/* Wenn kein Zugang eingerichtet ist. */
.tw-dav-missing {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.55;
    color: #1f2328;
}

.tw-dav-missing > i {
    font-size: 26px;
    color: #b45309;
    flex: 0 0 auto;
    padding-top: 2px;
}

.tw-dav-missing p {
    margin: 0 0 8px;
}

.tw-dav-missing p:last-child {
    margin-bottom: 0;
}

/* Trefferliste in den Dialogen. */
.tw-dav-results {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    background: #fff;
}

button.tw-dav-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: none;
    border-bottom: 1px solid #eef0f4;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

button.tw-dav-result:last-child {
    border-bottom: none;
}

button.tw-dav-result:hover {
    background: #f1f5f9;
}

button.tw-dav-result.active {
    background: #dbeafe;
    box-shadow: inset 2px 0 0 #1d4ed8;
}

.tw-dav-result-name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2328;
}

.tw-dav-result-sub {
    font-size: 11.5px;
    color: #6b7280;
}

.tw-dav-chosen {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #6b7280;
    background: #f6f7f9;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    padding: 7px 10px;
    box-sizing: border-box;
}

.tw-dav-chosen-set {
    color: #1f2328;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.tw-dav-color {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 7px;
    vertical-align: baseline;
}

/* --- Ein Kontakt auf der Seite --- */

.tw-contact-card {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 5px;
    background: #fff;
    padding: 12px 14px;
    margin: 0 0 12px;
    max-width: 460px;
    box-sizing: border-box;
}

.tw-contact-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

/* Die Herkunftsmarke sitzt oben rechts, auf der Höhe des Namens - nicht
   unter ihm, wo sie wie eine Schaltfläche aussah. `margin-left: auto`
   schiebt sie an den Rand, `align-self` hält sie oben, auch wenn der
   Namensblock drei Zeilen hat. */
.tw-contact-head .tw-quelle-kopf {
    align-self: flex-start;
    margin: 2px 0 0 auto;
}

.tw-contact-photo,
.tw-contact-initials {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
}

.tw-contact-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 17px;
    font-weight: 600;
}

.tw-contact-name {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tw-contact-name strong {
    font-size: 14.5px;
    color: #1f2328;
}

.tw-contact-name span {
    font-size: 12.5px;
    color: #6b7280;
}

.tw-contact-line {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: 13px;
    color: #1f2328;
    padding: 2px 0;
}

.tw-contact-line i {
    color: #6b7280;
    font-size: 11.5px;
    width: 14px;
    text-align: center;
    flex: 0 0 auto;
}

.tw-contact-note {
    font-size: 12.5px;
    color: #6b7280;
    border-top: 1px solid #eef0f4;
    margin-top: 8px;
    padding-top: 8px;
    white-space: pre-wrap;
}

.tw-contact-compact .tw-contact-photo,
.tw-contact-compact .tw-contact-initials {
    width: 38px;
    height: 38px;
    font-size: 13px;
}

.tw-contact-inline {
    font-size: 13px;
}

.tw-contact-inline i {
    color: #6b7280;
}

/* --- Termine --- */

.tw-calendar {
    margin: 0 0 12px;
}

.tw-calendar-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2328;
    margin-bottom: 8px;
}

.tw-event-single {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-left: 3px solid var(--widget-accent, #0f6cbd);
    border-radius: 4px;
    background: #fff;
    padding: 10px 14px;
    max-width: 520px;
    box-sizing: border-box;
}

.tw-event-when {
    font-size: 12.5px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 7px;
}

.tw-event-summary {
    font-size: 14.5px;
    font-weight: 600;
    color: #1f2328;
    margin: 3px 0;
}

.tw-event-where,
.tw-event-who {
    font-size: 12.5px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
}

.tw-event-text {
    font-size: 12.5px;
    color: #4b5563;
    margin-top: 6px;
    white-space: pre-wrap;
}

ul.tw-event-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    background: #fff;
}

ul.tw-event-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 7px 12px;
    border-bottom: 1px solid #eef0f4;
    margin: 0;
}

ul.tw-event-list li:last-child {
    border-bottom: none;
}

.tw-event-date {
    font-size: 12px;
    color: #6b7280;
    flex: 0 0 auto;
    min-width: 190px;
}

.tw-event-title {
    font-size: 13px;
    color: #1f2328;
    font-weight: 500;
    flex: 1 1 auto;
}

.tw-event-loc {
    font-size: 12px;
    color: #6b7280;
}

.tw-event-desc {
    flex: 1 1 100%;
    font-size: 12px;
    color: #6b7280;
    white-space: pre-wrap;
}

.tw-event-agenda .tw-event-day {
    margin-bottom: 12px;
}

.tw-event-day-head {
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    background: #eef2f7;
    border-radius: 3px;
    padding: 4px 10px;
    margin-bottom: 4px;
}

.tw-event-agenda ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tw-event-agenda li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 4px 10px;
    margin: 0;
}

.tw-event-time {
    font-size: 12px;
    color: #6b7280;
    flex: 0 0 auto;
    min-width: 74px;
}

/* ------------------------------------------------------------------ */
/* Medienbetrachter                                                     */
/*                                                                      */
/* Deckt das Fenster ganz ab. Der dunkle Grund ist keine Zierde: neben  */
/* einem Bild soll nichts stehen, was um Aufmerksamkeit wirbt.          */
/* ------------------------------------------------------------------ */

.tw-viewer {
    position: fixed;
    inset: 0;
    z-index: 14000;
    display: flex;
    flex-direction: column;
    background: rgba(17, 24, 39, 0.94);
}

/* Solange der Betrachter offen ist, scrollt die Seite dahinter nicht mit. */
body.tw-viewer-open {
    overflow: hidden;
}

.tw-viewer-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    height: 44px;
    padding: 0 12px;
    background: rgba(0, 0, 0, 0.35);
    color: #e5e7eb;
    font-size: 13px;
}

.tw-viewer-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50vw;
}

.tw-viewer-count {
    color: #9ca3af;
    font-size: 12px;
    flex: 0 0 auto;
}

.tw-viewer-spacer {
    flex: 1 1 auto;
}

.tw-viewer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #e5e7eb;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
}

.tw-viewer-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.tw-viewer-btn:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 1px;
}

/* Die Fläche, auf der die Datei steht. Bei einem Bild in voller Grösse
   bekommt sie die Bildläufe - genau das war die Anforderung. */
.tw-viewer-stage {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

/* Ein Bild in voller Grösse darf über die Fläche hinausragen; dann sind
   `align-items: center` und der Bildlauf im Streit, und der Anfang des
   Bildes wäre nicht erreichbar. Deshalb hier oben ausrichten. */
.tw-viewer-stage.tw-viewer-bild {
    align-items: flex-start;
    justify-content: flex-start;
}

.tw-viewer-img {
    display: block;
    margin: auto;
    cursor: zoom-in;
    max-width: none;
}

.tw-viewer-img.tw-viewer-fit {
    max-width: 100%;
    max-height: calc(100vh - 76px);
    width: auto;
    height: auto;
    cursor: zoom-out;
}

.tw-viewer-video {
    max-width: 100%;
    max-height: calc(100vh - 76px);
    display: block;
    background: #000;
}

.tw-viewer-pdf {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
    border-radius: 3px;
}

.tw-viewer-stage.tw-viewer-pdf {
    padding: 8px;
}

.tw-viewer-audio,
.tw-viewer-other {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #e5e7eb;
    text-align: center;
    padding: 24px;
}

.tw-viewer-audio i,
.tw-viewer-other i {
    font-size: 42px;
    color: #6b7280;
}

.tw-viewer-audio-name,
.tw-viewer-other-name {
    font-size: 15px;
    font-weight: 600;
}

.tw-viewer-other-size,
.tw-viewer-other-hint {
    font-size: 12.5px;
    color: #9ca3af;
}

/* Blättern innerhalb einer Galerie. */
.tw-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 64px;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    color: #e5e7eb;
    font-size: 20px;
    cursor: pointer;
    z-index: 1;
}

.tw-viewer-nav:hover {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

.tw-viewer-prev { left: 8px; }
.tw-viewer-next { right: 8px; }

/* Bilder in der Seite sind anklickbar - das soll man sehen. */
.tw-page-body img {
    cursor: zoom-in;
}

.tw-page-body a img,
.tw-page-body .tw-contact-card img {
    cursor: inherit;
}

/* Ein Kontakt oder Termin, den es in der Groupware nicht mehr gibt.
   Er bleibt stehen - ein Wiki ist auch ein Archiv -, sagt aber, dass er
   nicht mehr nachgeführt wird. */
.tw-contact-stale {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 3px;
    padding: 5px 9px;
    margin-bottom: 10px;
}

.tw-contact-stale i {
    flex: 0 0 auto;
}

.tw-contact-stale-box {
    border-color: #fde68a;
}

.tw-contact-inline-stale {
    color: #92400e;
}

/* Die Meldung des Servers im Klartext - sie ist die eigentliche Auskunft. */
.tw-dav-error {
    font-size: 12.5px;
    color: #b91c1c;
    background: #fef2f2;
    border-left: 3px solid #fca5a5;
    padding: 6px 10px;
    margin: 8px 0 !important;
}

.tw-dav-missing code {
    font-size: 11.5px;
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 3px;
}

/* ------------------------------------------------------------------ */
/* Kontakt aussuchen: Ordner oben, Karten links, Angaben rechts         */
/* ------------------------------------------------------------------ */

.tw-kontakt-liste {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    background: #fff;
    min-height: 320px;
    max-height: 420px;
}

button.tw-kontakt-karte {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: none;
    border-bottom: 1px solid #eef0f4;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

button.tw-kontakt-karte:last-child {
    border-bottom: none;
}

button.tw-kontakt-karte:hover {
    background: #f1f5f9;
}

button.tw-kontakt-karte.active {
    background: #dbeafe;
    box-shadow: inset 2px 0 0 #1d4ed8;
}

.tw-kontakt-karte-bild,
.tw-kontakt-karte-initialen {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
}

.tw-kontakt-karte-initialen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
}

.tw-kontakt-karte-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tw-kontakt-karte-name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2328;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-kontakt-karte-sub {
    font-size: 11.5px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-kontakt-zaehler {
    font-size: 12px;
    color: #6b7280;
    text-align: center;
}

.tw-kontakt-vorschau {
    border-top: 1px solid #eef0f4;
    padding-top: 10px;
    margin-top: 4px;
}

.tw-kontakt-vorschau-titel {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    margin-bottom: 6px;
}

/* In der Vorschau ist der Platz knapp - die Karte gibt sich kleiner. */
.tw-kontakt-vorschau .tw-contact-card {
    margin: 0;
    max-width: 100%;
    padding: 10px;
}

.tw-kontakt-vorschau .tw-contact-photo,
.tw-kontakt-vorschau .tw-contact-initials {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Kalenderansicht: Tag, Arbeitswoche, Woche, Monat                     */
/* ------------------------------------------------------------------ */

.tw-kal-rahmen {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    background: #fff;
    /* hidden nur waagrecht: senkrecht scrollt die Flaeche darin, und ein
       overflow:hidden hier schnitte ihren Bildlauf ab. */
    overflow: hidden;
    margin: 0 0 12px;
    /* Ohne max-width: 100% laeuft eine feste Breite ueber den Textrand
       hinaus, sobald die Seite schmaler wird als die Angabe. */
    max-width: 100%;
    box-sizing: border-box;
}

.tw-kal-leiste {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #f6f7f9;
    border-bottom: 1px solid var(--widget-border-color, #c6cbd4);
}

.tw-kal-leiste:empty {
    display: none;
}

button.tw-kal-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 3px;
    background: #fff;
    color: #1f2328;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}

button.tw-kal-knopf:hover {
    background: #eef2f7;
}

.tw-kal-titel {
    font-size: 13px;
    font-weight: 600;
    color: #1f2328;
    flex: 1 1 auto;
    min-width: 0;
}

/* Das Blättern steht rechts - der Titel links, wie in jedem Kalender. */
.tw-kal-blaettern {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

button.tw-kal-knopf:disabled {
    opacity: 0.4;
    cursor: default;
}

button.tw-kal-knopf:disabled:hover {
    background: #fff;
}

.tw-kal-flaeche {
    overflow-x: auto;
}

/* --- Monatsgitter --- */

.tw-kal-monat {
    min-width: 560px;
}

.tw-kal-kopfzeile,
.tw-kal-woche {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.tw-kal-kopf {
    padding: 5px 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    background: #f6f7f9;
    border-bottom: 1px solid var(--widget-border-color, #c6cbd4);
}

.tw-kal-kopf-heute {
    color: #1d4ed8;
    background: #eff6ff;
}

.tw-kal-tag {
    min-height: 86px;
    padding: 3px 4px;
    border-right: 1px solid #eef0f4;
    border-bottom: 1px solid #eef0f4;
    box-sizing: border-box;
    overflow: hidden;
}

.tw-kal-tag-fremd {
    background: #fafbfc;
}

.tw-kal-tag-fremd .tw-kal-tagzahl {
    color: #c6cbd4;
}

.tw-kal-tag-heute {
    background: #eff6ff;
}

.tw-kal-tagzahl {
    font-size: 11.5px;
    font-weight: 600;
    color: #6b7280;
    text-align: right;
    padding: 1px 3px;
}

.tw-kal-tag-heute .tw-kal-tagzahl {
    color: #1d4ed8;
}

.tw-kal-tagliste {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* --- Ein Termin --- */

.tw-kal-eintrag {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 11px;
    line-height: 1.35;
    padding: 1px 5px;
    border-radius: 2px;
    border-left: 3px solid var(--tw-kal-farbe, var(--widget-accent, #0f6cbd));
    background: #eef2f7;
    color: #1f2328;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: default;
}

.tw-kal-eintrag-ganz {
    background: var(--tw-kal-farbe, var(--widget-accent, #0f6cbd));
    color: #fff;
    border-left: none;
}

.tw-kal-zeit {
    font-variant-numeric: tabular-nums;
    color: #6b7280;
    flex: 0 0 auto;
}

.tw-kal-eintrag-ganz .tw-kal-zeit {
    color: rgba(255, 255, 255, 0.85);
}

.tw-kal-betreff {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Stundengitter (Tag, Woche, Arbeitswoche) --- */

.tw-kal-stunden {
    min-width: 460px;
}

/* Die Wochenansicht ist auf einer Wiki-Seite ein Ausschnitt neben dem Text
   und nicht die Hauptsache - deshalb überall etwas knapper als das
   Monatsgitter. */
.tw-kal-stunden .tw-kal-kopf {
    padding: 3px 5px;
    font-size: 11px;
}

.tw-kal-stunden .tw-kal-kopf span {
    font-weight: 400;
    color: #9ca3af;
}

.tw-kal-stunden-kopf,
.tw-kal-ganztags,
.tw-kal-raster {
    display: grid;
    grid-template-columns: 42px repeat(var(--tw-kal-spalten, 7), 1fr);
}

/*
 * Die Zeitspalte bleibt stehen.
 *
 * Wird der Kalender schmaler gemacht als die Woche breit ist, scrollen die
 * Tage nach links weg - und mit ihnen die Uhrzeiten, wenn man sie mitlaufen
 * laesst. Dann sieht man zwar einen Termin, aber nicht mehr, wann er ist.
 * `position: sticky` haelt die Spalte am linken Rand fest; der eigene
 * Hintergrund ist noetig, damit die Termine nicht darunter durchscheinen.
 */
.tw-kal-zeitspalte {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fff;
    border-right: 1px solid #eef0f4;
    font-size: 10px;
    color: #9ca3af;
    text-align: right;
    padding-right: 5px;
    box-sizing: border-box;
}

/* Kopfzeile und Ganztags-Band haben eigene Hintergruende - die Zeitspalte
   darin auch, sonst blitzt beim Scrollen Weiss durch. */
.tw-kal-stunden-kopf .tw-kal-zeitspalte {
    background: #f6f7f9;
}

.tw-kal-ganztags .tw-kal-zeitspalte {
    background: #fafbfc;
}

/*
 * Und die Kopfzeile bleibt oben.
 *
 * Bei begrenzter Hoehe scrollt das Raster senkrecht. Ohne festen Kopf weiss
 * man nach zwei Umdrehungen nicht mehr, welche Spalte welcher Tag ist.
 */
/*
 * Die Stapelung, von unten nach oben:
 *
 *   1  Zellen und Termine
 *   3  die Zeitspalte links (bleibt beim waagrechten Scrollen stehen)
 *   5  das Ganztags-Band
 *   6  die Kopfzeile mit den Tagen
 *
 * Die Reihenfolge ist nicht beliebig: Kopf und Band muessen ueber der
 * Zeitspalte liegen, sonst scrollt diese beim senkrechten Scrollen darueber
 * hinweg und man sieht eine angeschnittene Uhrzeit ueber den Wochentagen.
 */
.tw-kal-stunden-kopf,
.tw-kal-ganztags {
    position: sticky;
    /* Ohne eigenen Hintergrund scheinen die Termine beim Scrollen durch. */
    background: #fff;
}

.tw-kal-stunden-kopf {
    z-index: 6;
}

.tw-kal-ganztags {
    z-index: 5;
}

.tw-kal-stunden-kopf {
    top: 0;
}

/* Das `top` des Ganztags-Bands setzt calendar-view.js - es ist die gemessene
   Höhe der Kopfzeile darüber. */
.tw-kal-ganztags {
    top: 0;
}

/*
 * Ein sichtbarer Bildlauf.
 *
 * Die Vorgabe des Browsers ist ein Overlay, das erst beim Scrollen erscheint -
 * wer nicht weiss, dass rechts noch etwas steht, sucht es nicht. In einem
 * Kasten mitten im Text muss der Balken zu sehen sein.
 */
.tw-kal-flaeche {
    scrollbar-width: thin;
    scrollbar-color: #c6cbd4 #f1f3f6;
}

.tw-kal-flaeche::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

.tw-kal-flaeche::-webkit-scrollbar-track {
    background: #f1f3f6;
}

.tw-kal-flaeche::-webkit-scrollbar-thumb {
    background: #c6cbd4;
    border-radius: 5px;
    border: 2px solid #f1f3f6;
}

.tw-kal-flaeche::-webkit-scrollbar-thumb:hover {
    background: #9aa3af;
}

.tw-kal-ganztags .tw-kal-zeitspalte {
    padding-top: 4px;
    font-size: 10px;
}

.tw-kal-ganztags {
    border-bottom: 1px solid var(--widget-border-color, #c6cbd4);
    background: #fafbfc;
}

.tw-kal-ganztags-tag {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px;
    border-right: 1px solid #eef0f4;
    min-height: 16px;
}

/* Die Höhe einer Stunde. Sie steht auch in calendar-view.js
   (STUNDEN_HOEHE) - beide müssen dasselbe sagen, sonst sitzen die Termine
   neben ihren Linien. */
.tw-kal-stunden {
    --tw-kal-stunde: 34px;
}

.tw-kal-stunde {
    height: var(--tw-kal-stunde);
    box-sizing: border-box;
    /* Die Beschriftung sitzt an der Linie, nicht in der Mitte des Kastens. */
    transform: translateY(-5px);
}

.tw-kal-spalte {
    position: relative;
    border-right: 1px solid #eef0f4;
}

.tw-kal-spalte-heute {
    background: #f8fbff;
}

.tw-kal-zelle {
    height: var(--tw-kal-stunde);
    border-bottom: 1px solid #f1f3f6;
    box-sizing: border-box;
}

.tw-kal-termin {
    position: absolute;
    /* In einer Zeile: bei 34 Punkten je Stunde ist für zwei kein Platz. */
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 4px;
    padding: 1px 4px;
    border-radius: 2px;
    border-left: 2px solid var(--tw-kal-farbe, var(--widget-accent, #0f6cbd));
    background: #e6eefb;
    color: #1f2328;
    font-size: 10.5px;
    line-height: 1.25;
    overflow: hidden;
    box-sizing: border-box;
    cursor: default;
    z-index: 1;
}

.tw-kal-termin .tw-kal-zeit {
    font-size: 10px;
}

.tw-kal-ort {
    font-size: 10px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ein Kalender mit fester Höhe scrollt in sich - sonst schöbe ein
   Monatsgitter alles Weitere auf der Seite weit nach unten. */
.tw-kal-rahmen-hoch {
    display: flex;
    flex-direction: column;
}

.tw-kal-rahmen-hoch .tw-kal-flaeche {
    overflow-y: auto;
    min-height: 0;
}

/* ------------------------------------------------------------------ */
/* Der Seitenkopf bleibt oben                                           */
/*                                                                      */
/* Vorher scrollte er mit: wer weit unten etwas ändern wollte, musste    */
/* erst hochscrollen, auf „Bearbeiten" klicken und wieder herunter. Das  */
/* ist kein grosser Aufwand und trotzdem jedes Mal ärgerlich - genau die */
/* Sorte Reibung, die man nach dem zehnten Mal nicht mehr bemerkt und    */
/* die einen trotzdem bremst.                                           */
/*                                                                      */
/* Beim Scrollen schrumpft er auf eine schmale Leiste: Pfad und Angaben  */
/* verschwinden, Titel und Aktionen bleiben. So kostet er unterwegs      */
/* wenig Platz und ist doch immer da.                                    */
/* ------------------------------------------------------------------ */

.tw-page-head {
    position: sticky;
    top: 0;
    z-index: 20;
    transition: padding 0.12s ease-out;
}

/* Ein Schatten erst beim Scrollen - im Ruhezustand soll die Kopfzeile
   nicht schweben, sondern zur Seite gehören. */
.tw-page-head-klein {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
}

/* Was unterwegs nicht gebraucht wird. */
.tw-page-head-klein .tw-crumbs,
.tw-page-head-klein .tw-page-meta,
.tw-page-head-klein .tw-page-labels {
    display: none;
}

.tw-page-head-klein .tw-page-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Gogs und GitHub                                                      */
/* ------------------------------------------------------------------ */

.tw-git-issues,
.tw-git-file,
.tw-git-commits {
    margin: 0 0 12px;
}

.tw-git-titel {
    font-size: 14px;
    font-weight: 600;
    color: #1f2328;
    margin-bottom: 8px;
}

/* --- Listen (Aufgaben und Commits) --- */

ul.tw-git-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    background: #fff;
}

li.tw-git-zeile {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid #eef0f4;
    margin: 0;
}

li.tw-git-zeile:last-child {
    border-bottom: none;
}

.tw-git-mitte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.tw-git-rechts {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 0 0 auto;
    font-size: 11.5px;
    color: #6b7280;
}

.tw-git-titel-link {
    font-size: 13px;
    color: #1f2328;
    text-decoration: none;
}

.tw-git-titel-link:hover {
    color: var(--widget-accent, #0f6cbd);
    text-decoration: underline;
}

/* Offen und erledigt auf einen Blick - Farbe UND Symbol, damit es auch
   ohne Farbunterscheidung lesbar bleibt. */
.tw-git-status {
    flex: 0 0 auto;
    font-size: 12px;
}

.tw-git-status-open {
    color: #15803d;
}

.tw-git-status-closed {
    color: #7c3aed;
}

.tw-git-kommentare,
.tw-git-wer,
.tw-git-wann {
    white-space: nowrap;
}

/* --- Stichworte --- */

.tw-git-marken {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tw-git-marke {
    font-size: 10.5px;
    line-height: 1.5;
    padding: 0 6px;
    border-radius: 9px;
    /* Die Farbe kommt aus dem Repository. Der Text bleibt dunkel: die
       Farben dort sind oft hell, und weisse Schrift darauf wäre unlesbar. */
    background: var(--tw-git-marke, #e5e7eb);
    color: #1f2328;
    border: 1px solid rgba(0, 0, 0, 0.10);
}

/* --- Pull-/Merge-Requests --- */

/* Zusammengeführt: dasselbe Violett, das GitHub, Bitbucket und GitLab
   dafür benutzen. Wer es kennt, liest die Liste ohne Legende. */
.tw-git-status-merged {
    color: #7c3aed;
}

/* Abgelehnt ist NICHT dasselbe wie eine erledigte Aufgabe, und deshalb
   steht diese Regel eng: nur innerhalb einer Pull-Request-Liste wird aus
   „closed" rot. Eine geschlossene Aufgabe bleibt violett wie bisher. */
.tw-git-pulls .tw-git-status-closed {
    color: #b91c1c;
}

.tw-git-zweige {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #57606a;
    white-space: nowrap;
}

.tw-git-zweige code {
    background: #eef1f4;
    border-radius: 4px;
    padding: 0 4px;
    font-size: 10.5px;
}

.tw-git-zweige i {
    font-size: 9px;
    opacity: 0.7;
}

/* Ein Entwurf ist noch nicht zur Übernahme gedacht. Grau statt bunt: die
   Marke soll dämpfen, nicht hervorheben. */
.tw-git-marke.tw-git-entwurf {
    background: #e5e7eb;
    color: #57606a;
}

/* --- Eine einzelne Aufgabe --- */

.tw-git-aufgabe {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    background: #fff;
    padding: 12px 14px;
}

.tw-git-aufgabe-kopf {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.tw-git-aufgabe-kopf .tw-git-titel-link {
    font-size: 14.5px;
    font-weight: 600;
}

.tw-git-aufgabe-meta {
    font-size: 11.5px;
    color: #6b7280;
    margin: 4px 0 8px;
}

.tw-git-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: #1f2328;
    white-space: pre-wrap;
    margin-top: 8px;
}

.tw-git-kommentarliste {
    margin-top: 12px;
    border-top: 1px solid #eef0f4;
    padding-top: 8px;
}

.tw-git-kommentar {
    border-left: 3px solid #eef0f4;
    padding-left: 10px;
    margin-bottom: 10px;
}

.tw-git-kommentar-kopf {
    font-size: 11.5px;
    font-weight: 600;
    color: #6b7280;
}

.tw-git-commit-text {
    font-size: 11.5px;
    color: #6b7280;
    white-space: pre-wrap;
}

.tw-git-sha {
    flex: 0 0 auto;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 11px;
    color: #6b7280;
    background: #f1f3f6;
    border-radius: 3px;
    padding: 1px 5px;
}

/* --- Dateiinhalt --- */

.tw-git-quelle {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 11.5px;
    color: #6b7280;
    background: #f6f7f9;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 5px 10px;
}

.tw-git-quelle a {
    color: #6b7280;
}

.tw-git-zweig {
    background: #e5e7eb;
    border-radius: 3px;
    padding: 0 5px;
    font-size: 10.5px;
}

pre.tw-git-code {
    margin: 0 0 12px;
    padding: 8px 0;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 0 0 4px 4px;
    background: #fbfcfd;
    overflow-x: auto;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    tab-size: 4;
}

/* Ohne Quellzeile darüber ist der Block oben nicht abgeschnitten. */
.tw-git-quelle + pre.tw-git-code {
    border-radius: 0 0 4px 4px;
}

pre.tw-git-code-hoch {
    overflow-y: auto;
}

/* Die Zeilennummer steht links und wird beim Kopieren nicht mitgenommen -
   `user-select: none` ist hier kein Schmuck, sondern der Unterschied
   zwischen brauchbarem und unbrauchbarem Kopieren. */
.tw-git-zeilennr {
    display: inline-block;
    width: 3.5em;
    padding-right: 1em;
    text-align: right;
    color: #c6cbd4;
    user-select: none;
    -webkit-user-select: none;
}

/* --- Fehler --- */

.tw-git-fehler {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 8px 10px;
}

.tw-git-fehler a {
    color: #92400e;
    text-decoration: underline;
}

/* Der Dateibrowser im Git-Dialog. */
.tw-git-browser .tw-dav-result {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.tw-git-browser .tw-dav-result-name i {
    width: 14px;
    text-align: center;
    color: #6b7280;
    margin-right: 4px;
}

.tw-git-browser .fa-folder {
    color: #d1a54a;
}

/* Der Weg zurück hebt sich ab - er ist kein Eintrag wie die anderen. */
.tw-git-browser .tw-git-hoch {
    background: #f6f7f9;
    font-style: italic;
}

/* ------------------------------------------------------ Formatiert / Quelltext
   Der Umschalter über Markdown-Inhalten (Datei-Makro und Markdown-Makro).
   Bewusst klein und unauffällig: er ist eine Lesehilfe, nicht der Inhalt.
   Deshalb steht er rechts, wo das Auge beim Lesen nicht anstösst. */
.tw-ansicht-schalter {
    display: flex;
    justify-content: flex-end;
    gap: 0;
    margin-bottom: 8px;
}

.tw-ansicht-knopf {
    font: inherit;
    font-size: 11.5px;
    line-height: 1.6;
    color: #6b7280;
    background: #f6f7f9;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    padding: 3px 11px;
    cursor: pointer;
}

.tw-ansicht-knopf:first-child { border-radius: 4px 0 0 4px; }
.tw-ansicht-knopf:last-child  { border-radius: 0 4px 4px 0; border-left: none; }

.tw-ansicht-knopf:hover { background: #eceef2; color: #374151; }

.tw-ansicht-knopf.tw-ansicht-aktiv {
    background: #fff;
    color: #1f2937;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--widget-primary-color, #2563eb);
}

/* Steht der Umschalter über einem Datei-Makro, sitzt darüber schon die
   Herkunftszeile mit ihrem angesetzten Rand - dann darf kein Spalt
   dazwischen klaffen. */
.tw-git-quelle + .tw-ansicht-schalter { margin-top: 6px; }

/* Der Wiki-Wechsler in der Kopfzeile. Er steht links vom Suchfeld und darf
   dort nicht dominieren: ein Knopf in Textbreite, kein Farbklecks. */
.tw-wiki-wechsel {
    /* Nur noch das Kürzel und der Pfeil - der Name steht links neben der
       Marke. Schmal genug, dass er dem Suchfeld keinen Platz nimmt. */
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.tw-wiki-pfeil {
    margin-left: 2px;
    color: #6b7280;
    font-size: 11px;
}

/* --------------------------------------------------------- Gruppenkalender */

/* Der Farbpunkt vor einem Kalendernamen. Er sagt, in welcher Farbe dessen
   Termine im Gitter erscheinen - ohne ihn ist die Zuordnung Ratearbeit. */
.tw-kal-punkt {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: -1px;
    flex: 0 0 auto;
}

/* Das Zeichen für „wird abgeglichen" hinter dem Namen. */
.tw-kal-sync {
    margin-left: 6px;
    font-size: 10.5px;
    color: #6b7280;
}

/* Die Symbole rechts in der Kopfzeile: Kalender, Freigaben, Verwaltung.

   Sie standen als kleine Knöpfe mit unterschiedlicher Grundlinie
   nebeneinander und wirkten wie Fussnoten neben dem Benutzernamen. Jetzt
   haben alle dieselbe quadratische Fläche, dieselbe Symbolgrösse und
   dieselbe Mitte - damit stehen sie in einer Reihe, statt zu tanzen. */
.tw-kalender-button,
.tw-admin-button,
.tw-freigabe-button {
    flex: 0 0 auto;
    margin: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.tw-kalender-button i,
.tw-admin-button i,
.tw-freigabe-button i {
    font-size: 16px;
    line-height: 1;
    margin: 0;
}

/* Die Zahl der offenen Freigaben. Sie sitzt auf der Ecke des Symbols und
   ist rot - ein grauer Zaehler neben einem grauen Symbol wird gelesen wie
   Dekoration, und genau das soll er nicht sein. */
.tw-freigabe-button {
    position: relative;
    overflow: visible;
}

.tw-freigabe-zahl {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #dc2626;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
}

/* Ein Termin auf einer Seite. Bewusst schlicht und mit dem Farbstreifen
   seines Kalenders links - dieselbe Sprache wie im Kalendergitter. */
.tw-termin-karte {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-left: 4px solid var(--tw-kal-farbe, var(--widget-primary-color, #2563eb));
    border-radius: 4px;
    background: #fff;
    padding: 10px 12px;
    max-width: 460px;
}

.tw-termin-zeit {
    font-size: 11.5px;
    color: #6b7280;
    letter-spacing: 0.01em;
}

.tw-termin-titel {
    font-weight: 600;
    font-size: 14px;
    color: #1f2328;
    margin: 2px 0 4px;
}

.tw-termin-ort,
.tw-termin-kalender {
    font-size: 12px;
    color: #6b7280;
}

.tw-termin-ort i,
.tw-termin-kalender i {
    width: 13px;
    margin-right: 4px;
    color: #9aa3b2;
}

/* Der Termin steht nicht mehr im Kalender - die Angaben bleiben, der
   Hinweis sagt, dass sie nicht mehr nachgeführt werden. */
.tw-termin-vermerk {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--widget-border-color, #c6cbd4);
    font-size: 11.5px;
    color: #92400e;
}

/* -------------------------------------- Kalenderauswahl als Baum
   Der Zugang als Überschrift, seine Sammlungen eingerückt darunter. Ohne
   diese Gliederung sagt „Calendar" bei zwei Konten nichts aus - so heisst
   der Standardkalender in jedem. */
.widget-dropdown-option .tw-dav-konto {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.widget-dropdown-option .tw-dav-konto i {
    color: #9aa3b2;
    font-size: 11px;
}

.tw-dav-eigen {
    margin-left: auto;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 10.5px;
    color: #9aa3b2;
}

/* Die Zeile des Zugangs ist eine Überschrift - sie soll nicht wie etwas
   Anklickbares aussehen. */
.widget-dropdown-option.disabled .tw-dav-konto {
    opacity: 1;
}

.widget-dropdown-option .tw-dav-sammlung {
    display: block;
    padding-left: 20px;
}

/* ------------------------------------------------------- Symbolauswahl */

.tw-icon-gruppe {
    font-size: 11.5px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 12px 0 6px;
}

.tw-icon-gruppe:first-child { margin-top: 0; }

.tw-icon-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 6px;
}

.tw-icon-kachel {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #374151;
    background: #fff;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    cursor: pointer;
}

.tw-icon-kachel:hover {
    background: #f3f4f7;
    border-color: var(--widget-primary-color, #2563eb);
}

/* Das gewählte Symbol muss sich abheben, ohne dass man suchen muss. */
.tw-icon-kachel.tw-icon-aktiv {
    background: #eff6ff;
    border-color: var(--widget-primary-color, #2563eb);
    box-shadow: inset 0 0 0 1px var(--widget-primary-color, #2563eb);
    color: var(--widget-primary-color, #2563eb);
}

/* Ein Symbol als Profilbild - dieselbe Fläche wie das Foto, damit die
   Seite nicht springt, wenn jemand wechselt. */
.tw-profil-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 46px;
    color: var(--widget-primary-color, #2563eb);
}

/* Das Wiki-Kürzel vor dem Benutzernamen.

   Es steht IM Feld, damit niemand auf die Idee kommt, es mitzutippen - als
   Hinweis darunter wurde es genau das. Und es ist deutlich abgesetzt: grauer
   Grund, eigene Trennlinie. Vorher schwebte es nur davor, und im Feld stand
   scheinbar „mus. roka" - als hätte jemand das Kürzel selbst eingetippt.

   Absolut positioniert, weil die Library Rahmen und Innenabstand des Feldes
   als Inline-Stil setzt: dagegen kommt kein Stylesheet an, und ein
   Flex-Umbau zerlegt das Feld in zwei Kästen untereinander. Den Platz links
   schafft `users.js`, indem es den gemessenen Innenabstand am Feld setzt. */
.tw-name-praefix {
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    display: flex;
    align-items: center;
    padding: 0 9px;
    border-right: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 3px 0 0 3px;
    background: #f3f4f7;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

/* Die Vorschau im Symbol-Auswähler: genau das runde Feld, das nachher in
   der Kopfzeile steht - man wählt sonst Farben ins Blaue hinein. */
.tw-avatar-probe {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 21px;
    background: #eef2ff;
    color: var(--widget-primary-color, #2563eb);
}

/* Ein Farbwähler ist kein Textfeld: ohne diese Höhe fällt er in der Reihe
   neben den anderen Feldern zu einem Strich zusammen. */
.tw-icon-farben input[type="color"] {
    height: 34px;
    padding: 2px;
    cursor: pointer;
}

/* ------------------------------------------------------------- Vergleich
   Was sich geändert hat, muss ins Auge springen - sonst sucht der Redaktor
   genauso lange wie ohne Vergleich. */
.tw-diff-block {
    padding: 6px 10px;
    border-left: 3px solid transparent;
    margin-bottom: 2px;
}

.tw-diff-block > *:last-child { margin-bottom: 0; }

.tw-diff-gleich {
    color: #6b7280;
}

.tw-diff-hinzu {
    background: #f0fdf4;
    border-left-color: #16a34a;
}

.tw-diff-weg {
    background: #fef2f2;
    border-left-color: #dc2626;
    text-decoration: line-through;
    text-decoration-color: #dc262699;
}

.tw-diff-geaendert {
    background: #fffbeb;
    border-left-color: #d97706;
}

/* Wort für Wort innerhalb eines geänderten Absatzes. */
.tw-diff ins {
    background: #dcfce7;
    text-decoration: none;
    padding: 0 2px;
    border-radius: 2px;
}

.tw-diff del {
    background: #fee2e2;
    padding: 0 2px;
    border-radius: 2px;
}

/* Zusammengefasste unveränderte Abschnitte - sonst versteckt sich die
   Änderung in Seiten von Unverändertem. */
.tw-diff-luecke {
    font-size: 11.5px;
    color: #9aa3b2;
    text-align: center;
    padding: 4px 0;
    border-top: 1px dashed var(--widget-border-color, #c6cbd4);
    border-bottom: 1px dashed var(--widget-border-color, #c6cbd4);
    margin: 6px 0;
}

.tw-diff-zahl {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11.5px;
    margin-right: 5px;
}

.tw-diff-z-geaendert { background: #fef3c7; color: #92400e; }
.tw-diff-z-hinzu     { background: #dcfce7; color: #166534; }
.tw-diff-z-weg       { background: #fee2e2; color: #991b1b; }

.tw-diff-ganz {
    margin-top: 10px;
    font-size: 12.5px;
}

.tw-diff-ganz > summary {
    cursor: pointer;
    color: #6b7280;
    padding: 4px 0;
}

/* ------------------------------------------------------------ Import

   Vier Schritte untereinander, und der vierte teilt sich: links der
   Seitenbaum der Quelle, rechts die Seite so, wie sie nach dem Import
   aussaehe. Nebeneinander, weil man beim Auswaehlen vergleicht - untereinander
   muesste man scrollen und haette den Baum nicht mehr im Blick. */

.tw-import {
    padding: 20px 26px;
    max-width: 1500px;
}

.tw-import-schritt {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    color: #1f2328;
}

.tw-import-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--widget-primary-color, #2563eb);
    color: #fff;
    font-size: 12px;
}

.tw-import-stand {
    font-size: 12.5px;
    color: #6b7280;
    min-height: 18px;
}

.tw-import-gut { color: #16a34a; }
.tw-import-schlecht { color: #b91c1c; }
.tw-import-klein { font-size: 11px; color: #9aa4b2; }

/* Eine Reihe aus Feldern und einer Schaltflaeche.

   `align-items: flex-end` ist der Kern: die Felder tragen ein Etikett ueber
   sich, die Schaltflaeche nicht. Ohne Ausrichtung an der UNTERKANTE stuende
   sie auf Hoehe der Etiketten - also einen Kopf zu hoch, genau wie es
   gemeldet wurde. */
.tw-import-reihe {
    display: flex !important;
    align-items: flex-end !important;
    gap: 10px;
}

/* Und dann noch dies: `align-items: flex-end` legt die MARGIN-Kanten
   aufeinander, nicht die Rahmen. Die Feldgruppen der Library tragen unten
   einen eigenen Abstand von rund 14px - deshalb sass die Schaltflaeche
   danach genau um diese 14px zu tief, obwohl die Ausrichtung stimmte.
   In dieser Reihe regelt den Abstand nach unten die Reihe selbst.

   Die Library setzt diesen Abstand als INLINE-Stil (`margin-bottom: 1rem`),
   und dagegen verliert eine gewoehnliche Klassenregel. Deshalb
   `!important` - hier kein Holzhammer, sondern die einzige Stufe, die
   einen Inline-Stil schlaegt. */
.tw-import-reihe > .widget-input-group,
.tw-import-reihe > .widget-dropdown,
.tw-import-reihe > .widget-input-field,
.tw-import-reihe > .widget-button {
    margin-bottom: 0 !important;
}

/* Wer ausser mir gerade an dieser Seite ist.

   Steht in der Kopfzeile des Editors und bleibt leer, solange man allein
   ist - eine Leiste, die immer da ist und meistens nichts sagt, kostet nur
   Hoehe. */
.tw-collab-wer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-secondary, #555);
    padding-top: 2px;
}

.tw-collab-titel { font-weight: 600; }

.tw-collab-name {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 6px;
    border-radius: 10px;
    background: var(--surface-2, #f1f3f6);
}

.tw-collab-name .fa-circle { font-size: 7px; }

/* Das Dateifeld fuer ein Ausfuhrpaket.

   Es steht an der Stelle von Adresse, Benutzername und Passwort und soll
   deshalb auch aussehen wie sie: Etikett darueber, Feld darunter, gleiche
   Hoehe. Ein `input[type=file]` bringt von sich aus keines davon mit. */
.tw-import-paket {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Ohne Adresse, Benutzer und Passwort daneben ist Platz - die Flaeche
       nimmt ihn, statt als schmaler Streifen dazustehen. */
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}

/*
 * DIE Fehlerursache: `display: flex` schlaegt das `[hidden]` des Browsers.
 *
 * Der Assistent setzte `paket.hidden = true`, solange keine Paketquelle
 * gewaehlt war - wirkungslos, weil die Regel darueber jedem Zustand ein
 * `display` gibt. Das Dateifeld stand deshalb IMMER da, auch neben Adresse
 * und Passwort von Confluence, und war dort nicht zu erklaeren.
 */
.tw-import-paket[hidden] {
    display: none !important;
}

/*
 * „Quelle" steht immer zuerst.
 *
 * Das Dateifeld wird nachtraeglich in die Reihe gehaengt und landete dabei
 * an erster Stelle - noch vor der Auswahl, die ueberhaupt erst bestimmt, ob
 * es gebraucht wird. Die Reihenfolge im Dokument haengt daran, wann die
 * Bauteile ihre Elemente bekommen; verlaesslicher ist es, sie hier zu
 * setzen.
 */
.tw-import-reihe > .widget-dropdown {
    order: -1;
}

/* Aus demselben Grund fuer die Felder daneben: sie werden bei einer
   Paketquelle versteckt und duerfen dann nicht doch Platz nehmen. */
.tw-import-reihe > [hidden] {
    display: none !important;
}

.tw-import-paket-titel {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #555);
}

/*
 * Die Ablageflaeche.
 *
 * Grundform und Verhalten kommen aus `.tw-drop-zone` (editor.css), damit
 * eine Datei im Wiki ueberall gleich abgegeben wird. Hier nur, was in einer
 * Formularzeile anders sein muss: kein Abstand nach oben, und die Hoehe der
 * Eingabefelder daneben.
 */
.tw-import-drop {
    margin-top: 0;
    /*
     * Genau so hoch wie die Eingabefelder daneben (gemessen: 28 Punkte plus
     * Rahmen). Vorher war die Flaeche 58 Punkte hoch; die Zeile richtet sich
     * an der Unterkante aus, und dadurch stand das Etikett „Ausfuhrpaket"
     * eine halbe Zeile hoeher als „Quelle" - genau der von Hand gezeichnete
     * Eindruck, um den es geht.
     */
    height: 30px;
    padding: 0 12px;
    box-sizing: border-box;
    justify-content: flex-start;
    font-size: 13px;
}

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

/* Liegt eine Datei vor, ist die Flaeche keine Aufforderung mehr, sondern
   eine Auskunft - der gestrichelte Rahmen weicht einem festen. */
.tw-import-drop.tw-import-drop-voll {
    border-style: solid;
    border-color: #b7d3b9;
    background: #f3faf4;
    color: #2f6b39;
}

.tw-import-drop-voll > i {
    color: #2f6b39;
}

.tw-import-drop-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die Zielauswahl bekommt Luft nach unten: sie klebte am Baum darunter, und
   zwei Dinge, die verschiedene Fragen stellen, sollen nicht aussehen wie
   eines. */
.tw-import-ziele {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef1f4;
}

/* Ein Auswahlfeld soll nicht ueber die halbe Seite laufen - drei
   nebeneinander, aber jedes hoert irgendwo auf. */
.tw-import-ziele > * { max-width: 380px; }

/* Der Seitenbaum der Quelle. */
.tw-import-baum {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 6px;
    background: #fff;
    overflow: auto;
    padding: 6px;
}

.tw-import-liste { list-style: none; margin: 0; padding: 0; }
.tw-import-kinder { margin-left: 16px; }

.tw-import-zeile { display: flex; align-items: center; gap: 2px; }

.tw-import-pfeil {
    border: none;
    background: none;
    color: #9aa4b2;
    cursor: pointer;
    padding: 2px 3px;
    font-size: 11px;
}
.tw-import-pfeil:disabled { cursor: default; opacity: .35; }

.tw-import-titel {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #1f2328;
    padding: 4px 6px;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tw-import-titel:hover { background: #f3f4f7; }
.tw-import-titel i { color: #8993a4; margin-right: 6px; font-size: 11px; }

.tw-import-titel-aktiv {
    background: #eff6ff;
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--widget-primary-color, #2563eb);
}

/* Die Vorschau. */
.tw-import-vorschau {
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 6px;
    background: #fff;
    /* Dieselbe Hoehe wie der Baum daneben, auch wenn noch nichts drinsteht:
       ein Kasten, der beim Auswaehlen einer Seite ploetzlich auf das
       Zehnfache waechst, laesst die halbe Maske springen. */
    height: 62vh;
    overflow: auto;
}

.tw-import-baum { height: 62vh; }

.tw-import-leer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 28px 20px;
    color: #9aa4b2;
    font-size: 13px;
    text-align: center;
}

/* Im Baum steht der Hinweis oben, nicht mittig: dort folgt gleich eine
   Liste, und ein mittiger Text sprang beim Fuellen nach oben. */
.tw-import-baum .tw-import-leer { height: auto; display: block; padding: 18px 12px; }

.tw-import-kopf {
    padding: 12px 16px;
    border-bottom: 1px solid #eef1f4;
    background: #fbfcfe;
    position: sticky;
    top: 0;
    z-index: 2;
}

.tw-import-weg { font-size: 14.5px; font-weight: 700; color: #111827; }
.tw-import-meta { font-size: 11.5px; color: #6b7280; margin-top: 2px; }

/* Was der Import nicht sicher entscheiden konnte. Diese Zeilen sind der
   Grund, warum es die Vorschau ueberhaupt gibt. */
.tw-import-notiz,
.tw-import-warnung {
    font-size: 12px;
    padding: 7px 16px;
    border-bottom: 1px solid #eef1f4;
    color: #6b7280;
    background: #fbfcfe;
}
.tw-import-notiz i { margin-right: 6px; color: #9aa4b2; }
.tw-import-glatt { color: #16a34a; }
.tw-import-glatt i { color: #16a34a; }

.tw-import-warnung { background: #fffbeb; color: #92400e; }
.tw-import-warnung i { margin-right: 6px; color: #b45309; }

.tw-import-blatt { padding: 6px 20px 20px; }

.tw-import-leiste {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid #eef1f4;
    background: #fbfcfe;
    position: sticky;
    bottom: 0;
}

/* Der Bericht nach dem Lauf - Seite fuer Seite, nicht nur eine Zahl. */
.tw-import-bericht {
    list-style: none;
    margin: 0;
    padding: 10px 16px 16px;
    font-size: 13px;
}
.tw-import-bericht li { padding: 4px 0; }
.tw-import-bericht i { margin-right: 7px; }
.tw-import-bericht-angelegt i { color: #16a34a; }
.tw-import-bericht-erneuert i { color: #2563eb; }
.tw-import-bericht-fehler   { color: #b91c1c; }
.tw-import-bericht-fehler i { color: #b91c1c; }

/* Der Fortschritt beim Import.

   „Der Ast wird uebernommen…" sagt weder, wie lange es dauert, noch wann man
   die Seite schliessen darf. Der Balken sagt beides: wie viele Seiten es
   sind, wie viele fertig sind und welche gerade an der Reihe ist. */
.tw-import-fortschritt {
    padding: 12px 16px;
    border-top: 1px solid #eef1f4;
    background: #fbfcfe;
}

.tw-import-balken {
    height: 6px;
    border-radius: 3px;
    background: #e5e7eb;
    overflow: hidden;
}

.tw-import-balken > div {
    height: 100%;
    width: 0;
    background: var(--widget-primary-color, #2563eb);
    transition: width .2s ease-out;
}

.tw-import-fortschritt-text {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
}

/* „Fertig" muss man sehen koennen - der Balken bleibt danach stehen. */
.tw-import-fertig { color: #16a34a; font-weight: 600; }

/* Die untere Haelfte des Assistenten fuellt die Breite.

   Die senkrechte Box richtet ihre Kinder linksbuendig aus - ohne eigene
   Breite bekommt ein Kind nur so viel, wie sein Inhalt braucht. Waehrend
   des Imports steht in der Vorschau nur ein Balken, und der Kasten
   schrumpfte auf ein Fuenftel der Seite. Beide Ebenen brauchen die Angabe:
   der Kasten und die Reihe darin. */
.tw-import-auswahl,
.tw-import-unten { width: 100%; box-sizing: border-box; }

/* ------------------------------------------------------------ KI-Fenster

   Ein Gespräch neben der Seite. Es schiebt den Inhalt nicht weg, sondern
   legt sich an den Rand - wer etwas über die Seite fragt, will sie dabei
   noch sehen. */

.tw-ki-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 420px; max-width: 100vw;
    display: flex; flex-direction: column;
    background: var(--tw-flaeche, #fff);
    border-left: 1px solid var(--tw-rahmen, #dfe3ea);
    box-shadow: -4px 0 16px rgba(0, 0, 0, .08);
    z-index: 900;
}

/* Der Inhalt rückt nach - sonst liegt das Fenster auf dem Text, den man
   gerade bespricht. Auf schmalen Fenstern nicht: dort wäre für beides kein
   Platz, und die Frage ist dann das Wichtigere. */
@media (min-width: 1100px) {
    body.tw-ki-offen .tw-shell-main { margin-right: 420px; }
}

.tw-ki-kopf {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tw-rahmen, #dfe3ea);
    background: var(--tw-kopf, #f6f7f9);
}
/*
 * Der Titel gibt nach, das Auswahlfeld nicht.
 *
 * `min-width: 0` gehoert dazu: ein Flex-Kind gibt seine Grundbreite sonst
 * nicht her, und der Name des Zugangs waere abgeschnitten worden, obwohl
 * daneben Platz ist.
 */
.tw-ki-titel {
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tw-ki-kopf button {
    background: none; border: 0; cursor: pointer; color: #6b7280;
    padding: 4px 6px; border-radius: 4px;
}
.tw-ki-kopf button:hover { background: #e5e7eb; color: #111827; }

/*
 * Das Auswahlfeld fuer den Zugang.
 *
 * Es stand auf 130 Pixel und ohne Innenabstand - „KI-ChatGPT · gpt-4o"
 * stiess damit an den Pfeil, und wer zwei aehnlich benannte Zugaenge hat,
 * sah den Unterschied nicht. Jetzt so breit, wie im Kopf Platz ist, und
 * hoch genug, dass die Schrift nicht am Rand klebt.
 */
.tw-ki-zugang {
    flex: 0 1 220px;
    min-width: 140px;
    max-width: 240px;
    padding: 5px 26px 5px 9px;
    border: 1px solid var(--tw-rahmen, #dfe3ea);
    border-radius: 5px;
    background: var(--tw-flaeche, #fff);
    color: #1f2328;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.35;
    cursor: pointer;

    /*
     * Der Pfeil kommt von uns.
     *
     * Der eingebaute steht bei jedem System woanders und faellt bei
     * knappem Platz als Erstes dem Abschneiden zum Opfer. Mit
     * `appearance: none` und einem gezeichneten Pfeil sitzt er immer an
     * derselben Stelle - und der Innenabstand rechts ist genau fuer ihn da.
     */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    text-overflow: ellipsis;
}

.tw-ki-zugang:hover {
    border-color: #c6cbd4;
}

.tw-ki-zugang:focus {
    outline: none;
    border-color: var(--widget-accent, #0f6cbd);
    box-shadow: 0 0 0 2px rgba(15, 108, 189, .15);
}

.tw-ki-verlauf {
    flex: 1; overflow-y: auto; padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
}

.tw-ki-frage {
    align-self: flex-end; max-width: 85%;
    background: #e0e7ff; color: #1e293b;
    padding: 8px 12px; border-radius: 12px 12px 2px 12px;
    white-space: pre-wrap;
}

.tw-ki-antwort {
    background: #f6f7f9; padding: 10px 12px;
    border-radius: 12px 12px 12px 2px;
}
.tw-ki-antwort p:first-child { margin-top: 0; }
.tw-ki-antwort p:last-child { margin-bottom: 0; }
.tw-ki-antwort h3, .tw-ki-antwort h4 { margin: 10px 0 4px; font-size: 1em; }
.tw-ki-antwort ul { margin: 4px 0; padding-left: 20px; }
.tw-ki-code {
    background: #1f2937; color: #e5e7eb; padding: 8px 10px;
    border-radius: 4px; overflow-x: auto; font-size: .85em;
}

/* Die Schritte: was das Modell WIRKLICH getan hat. Sie stehen kleiner als
   die Antwort, aber sie stehen da - eine Antwort, die aus dem Nichts kommt,
   ist in einem Wiki nichts wert. */
.tw-ki-schritt {
    font-size: .82em; color: #6b7280;
    display: flex; gap: 6px; align-items: baseline;
    padding-left: 4px;
}
.tw-ki-schritt i { color: #10b981; }
.tw-ki-schritt-fehler { color: #92400e; }
.tw-ki-schritt-fehler i { color: #d97706; }

/* Ein Diagramm in der Importvorschau: das Bild gibt es noch nicht, die
   Stelle soll man trotzdem sehen. Sonst haelt man die Zeichnungen fuer
   verloren. */
.tw-diagram-platzhalter {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    border: 1px dashed #a5b4fc; border-radius: 6px; background: #f8faff;
    padding: 22px 18px; text-align: center; color: #4b5563;
}
.tw-diagram-platzhalter i { font-size: 1.7em; color: #6366f1; }
.tw-diagram-platzhalter-name { font-weight: 600; color: #111827; }
.tw-diagram-platzhalter-text { font-size: .85em; }

/* Die Vorlagenauswahl: Kacheln, weil eine Vorlage ein Aussehen hat und
   keinen Namen in einer Liste. Zwei Spalten - mehr wird auf einem
   Notebook-Bildschirm zu eng, weniger verschenkt Platz. */
.tw-vorlage-lead { font-size: .9em; color: #4b5563; margin-top: 4px; }

/* Der Fall ohne Vorlage - er erklaert, wie eine entsteht, statt den
   Benutzer wortlos in den leeren Editor zu schicken. */
.tw-vorlage-leer {
    font-size: .88em; color: #4b5563; line-height: 1.5;
    margin-top: 6px; padding: 9px 11px;
    background: #f4f6f8; border-left: 3px solid #c3cbd4; border-radius: 3px;
}
.tw-vorlage-leer b { color: #1f2937; }
.tw-vorlage-liste {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    max-height: 46vh; overflow-y: auto; padding: 2px;
}
.tw-vorlage-kachel {
    display: flex; flex-direction: column; gap: 3px; text-align: left;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
    padding: 12px 14px; cursor: pointer; font: inherit;
}
.tw-vorlage-kachel:hover { border-color: #a5b4fc; background: #f8faff; }
.tw-vorlage-kachel i { color: #6366f1; font-size: 1.1em; }
.tw-vorlage-gewaehlt {
    border-color: #6366f1; background: #eef2ff;
    box-shadow: 0 0 0 1px #6366f1 inset;
}
.tw-vorlage-name { font-weight: 600; color: #111827; }
.tw-vorlage-text { font-size: .82em; color: #6b7280; }

/*
 * Das Dateifeld unter den Kacheln.
 *
 * Grundform und Verhalten kommen aus `.tw-drop-zone` (editor.css) - eine
 * Datei wird im Wiki ueberall gleich abgegeben. Hier nur, was in diesem
 * Fenster anders ist: es steht unter der Auswahl, nicht in einer Zeile,
 * und darf deshalb hoeher sein als die schmale Fassung im Assistenten.
 */
.tw-vorlage-datei { display: block; margin-top: 4px; }
.tw-vorlage-drop {
    margin-top: 0;
    padding: 14px 16px;
    justify-content: flex-start;
    font-size: 13px;
}
.tw-vorlage-drop > i { font-size: 15px; }
/* Liegt eine Datei vor, ist die Flaeche keine Aufforderung mehr, sondern
   eine Auskunft - derselbe Wechsel wie im Import-Assistenten. */
.tw-vorlage-drop.tw-import-drop-voll {
    border-style: solid; border-color: #b7d3b9;
    background: #f3faf4; color: #2f6b39;
}
.tw-vorlage-drop.tw-import-drop-voll > i { color: #2f6b39; }
.tw-vorlage-drop-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-vorlage-klein { color: #6b7280; font-size: .9em; }

/* Der Stand: die eine Zeile, die sagt, was das Modell GERADE tut. Sie
   ersetzt das frühere „Ich sehe nach…", das bis zum Schluss stehenblieb -
   auch dann, wenn längst nichts mehr geschah. */
.tw-ki-stand {
    font-size: .85em; color: #4b5563;
    display: flex; gap: 7px; align-items: baseline;
    padding: 6px 4px;
}
.tw-ki-stand i { color: #6366f1; }
.tw-ki-stand-dauer,
.tw-ki-stand-zahlen { color: #9ca3af; font-variant-numeric: tabular-nums; }

/* Die Bilanz unter der Antwort: Modell, Schritte, Token. Klein - wer sie
   nicht sucht, soll sie nicht lesen müssen; wer wissen will, was ein
   Gespräch gekostet hat, findet es ohne Umweg. */
.tw-ki-bilanz {
    font-size: .78em; color: #9ca3af;
    display: flex; gap: 6px; align-items: baseline;
    padding: 2px 4px 8px;
    font-variant-numeric: tabular-nums;
}

/* Abbrechen steht neben Fragen und nie gleichzeitig mit ihm. */
.tw-ki-stopp {
    background: #fff; color: #98151d; border: 1px solid #fecaca;
    border-radius: 4px; padding: 7px 12px; cursor: pointer; font-size: .9em;
}
.tw-ki-stopp:hover { background: #fef2f2; }

.tw-ki-hinweis {
    font-size: .85em; color: #6b7280;
    background: #fffbeb; border-left: 3px solid #fbbf24;
    padding: 8px 10px; border-radius: 0 4px 4px 0;
}
.tw-ki-fehler {
    font-size: .88em; color: #98151d;
    background: #fee2e2; padding: 8px 10px; border-radius: 4px;
}
.tw-ki-warte { font-size: .85em; color: #6b7280; font-style: italic; }

.tw-ki-fuss {
    border-top: 1px solid var(--tw-rahmen, #dfe3ea);
    padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.tw-ki-schreiben { font-size: .82em; color: #6b7280; }
.tw-ki-eingabe, .tw-ki-frage-feld, .tw-ki-fuss textarea {
    width: 100%; resize: vertical; font: inherit;
    border: 1px solid var(--tw-rahmen, #c6cbd4); border-radius: 4px;
    padding: 8px;
}
.tw-ki-senden {
    align-self: flex-end; padding: 7px 14px; border-radius: 4px;
    border: 0; background: #2563eb; color: #fff; cursor: pointer;
}
.tw-ki-senden:disabled { background: #9ca3af; cursor: default; }

/*
 * Die Spracheingabe im Fuss des KI-Fensters.
 *
 * Der Knopf ist rund und rot, solange das Mikrofon offen ist - und er
 * pulsiert. Ein offenes Mikrofon, das man nicht sieht, ist das Letzte, was
 * jemand in einer Besprechung will.
 *
 * Die Auswahl des Weges steht DIREKT neben dem Knopf. Sie stand zuerst
 * oben rechts über dem Feld, und dort las sie sich als etwas anderes -
 * eine Einstellung, die mit dem Mikrofon unten links nichts zu tun hat.
 */
.tw-ki-sprachweg {
    font: inherit; font-size: .82em; color: #374151; background: #fff;
    border: 1px solid var(--tw-rahmen, #c6cbd4); border-radius: 4px;
    padding: 4px 6px; max-width: 46%; height: 30px;
}
.tw-ki-knoepfe { display: flex; align-items: center; gap: 8px; }
.tw-ki-mikro-stand {
    flex: 1; min-width: 0; font-size: .8em; color: #6b7280;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tw-ki-mikro {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--tw-rahmen, #c6cbd4); background: #fff;
    color: #374151; cursor: pointer;
}
.tw-ki-mikro:hover { background: #f3f4f6; }
.tw-ki-mikro:disabled { color: #9ca3af; cursor: default; background: #fff; }
.tw-ki-mikro--an {
    background: #dc2626; border-color: #dc2626; color: #fff;
    animation: tw-ki-puls 1.2s ease-in-out infinite;
}
.tw-ki-mikro--an:hover { background: #b91c1c; }
.tw-ki-mikro--wartet, .tw-ki-mikro--wartet:disabled { color: #2563eb; }
@keyframes tw-ki-puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); }
    50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

/* Die Anmeldung bei Claude - im Zugangsformular und im Anmeldedialog. */

.tw-ki-anmeldezeile {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; margin-top: 4px;
    background: #f6f7f9; border-radius: 6px;
    border: 1px solid var(--tw-rahmen, #dfe3ea);
}
.tw-ki-zustand { font-size: .9em; flex: 1; }
.tw-ki-zustand-gut { color: #065f46; }
.tw-ki-zustand-offen { color: #92400e; }

.tw-ki-anmelden {
    padding: 6px 12px; border-radius: 4px; cursor: pointer;
    border: 1px solid var(--tw-rahmen, #c6cbd4);
    background: #fff; font: inherit;
}
.tw-ki-anmelden:hover { background: #eef2ff; border-color: #6366f1; }

.tw-ki-schritte { margin: 0 0 10px; padding-left: 20px; line-height: 1.7; }

.tw-ki-warnung {
    font-size: .88em; color: #92400e;
    background: #fffbeb; border-left: 3px solid #fbbf24;
    padding: 8px 10px; border-radius: 0 4px 4px 0; margin: 0;
}

.tw-ki-adresse {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; background: #eef2ff; border-radius: 6px;
}
.tw-ki-adresse a { flex: 1; font-weight: 600; word-break: break-all; }
.tw-ki-kopieren {
    background: none; border: 0; cursor: pointer; color: #4f46e5;
    padding: 4px 8px; border-radius: 4px;
}
.tw-ki-kopieren:hover { background: #e0e7ff; }

/* ---------------------------------------------------------------------
   Der draw.io-Einfüge-Dialog.

   Nachgebaut nach dem Confluence-Plugin: links die Rubriken in einer
   schmalen Spalte, rechts ein Gitter aus Kacheln mit Vorschau. Die Masse
   sind so gewählt, dass eine Vorschau erkennbar bleibt, ohne dass man
   scrollen muss, um vier Kacheln zu sehen.
   --------------------------------------------------------------------- */
.tw-drawio-dialog {
    display: flex; gap: 0; height: 100%; min-height: 460px;
    font-size: 13px;
}

.tw-drawio-seite {
    flex: 0 0 190px; overflow-y: auto; padding: 6px 0 12px;
    border-right: 1px solid #dfe3e9; background: #fafbfc;
}
.tw-drawio-gruppe {
    padding: 12px 14px 5px; font-size: 11px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: #6b7280;
}
.tw-drawio-rubrik {
    display: block; width: 100%; text-align: left; border: 0;
    background: none; padding: 6px 14px; cursor: pointer;
    font: inherit; color: #1f2937;
}
.tw-drawio-rubrik:hover { background: #eef1f5; }
.tw-drawio-aktiv { background: #e4e9f0; font-weight: 600; }

.tw-drawio-haupt {
    flex: 1 1 auto; display: flex; flex-direction: column;
    min-width: 0; overflow: hidden;
}
.tw-drawio-suchzeile { padding: 12px 16px 0; }
.tw-drawio-suchzeile input {
    width: 100%; box-sizing: border-box; padding: 7px 10px;
    border: 1px solid #c7cdd6; border-radius: 3px; font: inherit;
}

.tw-drawio-kacheln { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 18px; }
.tw-drawio-titel {
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #6b7280; margin: 14px 0 8px;
}
.tw-drawio-titel:first-child { margin-top: 0; }
.tw-drawio-leer { color: #6b7280; padding: 20px 2px; }

.tw-drawio-gitter {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.tw-drawio-kachel {
    border: 1px solid transparent; background: none; padding: 0;
    cursor: pointer; font: inherit; text-align: center;
    display: flex; flex-direction: column; gap: 6px;
}
.tw-drawio-bild {
    display: flex; align-items: center; justify-content: center;
    height: 118px; background: #f1f3f5; border: 1px solid #e3e6ea;
    border-radius: 3px; overflow: hidden; position: relative;
}
.tw-drawio-bild img { max-width: 96%; max-height: 96%; object-fit: contain; }
.tw-drawio-bild .fas { font-size: 30px; color: #4b5563; }
.tw-drawio-name {
    font-size: 12px; color: #1f2937; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tw-drawio-kachel:hover .tw-drawio-bild { border-color: #9aa5b1; }

/* Die Auswahl trägt einen Haken - im Vorbild ebenso. Eine blosse
   Rahmenfarbe ist auf einem hellen Vorschaubild kaum zu sehen. */
.tw-drawio-kachel-aktiv .tw-drawio-bild {
    border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb inset;
    background: #eef4ff;
}
.tw-drawio-kachel-aktiv .tw-drawio-bild::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; top: 6px; right: 6px;
    width: 18px; height: 18px; line-height: 18px; font-size: 11px;
    color: #fff; background: #2563eb; border-radius: 3px;
}
.tw-drawio-kachel-aktiv .tw-drawio-name { font-weight: 600; }

/* Der Dialog „Seite beobachten". */
.tw-watch-titel {
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #6b7280; margin: 4px 0 6px;
}
.tw-watch-kanal {
    display: flex; align-items: baseline; gap: 8px;
    padding: 4px 0; font-size: 13px;
}
.tw-watch-kanal em {
    font-style: normal; font-size: 12px; color: #6b7280;
}
/* Ein Kanal, der nicht bereitsteht, wird nicht versteckt - dann suchte
   jemand vergeblich danach. Er steht da und sagt, was fehlt. */
.tw-watch-aus span { color: #9aa5b1; }
.tw-watch-adresse { margin-top: 6px; }

/* Verwaltung ▸ Benachrichtigung: je Kanal eine Karte. */
.tw-melde-karte {
    border: 1px solid #dfe3e9; border-left: 3px solid #c7cdd6;
    border-radius: 4px; padding: 12px 14px; background: #fff;
}
/* Ein eingerichteter Kanal ist auf einen Blick zu erkennen - das ist die
   Frage, mit der jemand auf diese Seite kommt. */
.tw-melde-an { border-left-color: #2f855a; }
.tw-melde-kopf {
    display: flex; align-items: center; gap: 9px; margin-bottom: 5px;
}
.tw-melde-kopf .fas { color: #4b5563; width: 18px; text-align: center; }
.tw-melde-name { font-weight: 600; font-size: 14px; }
.tw-melde-stand {
    margin-left: auto; font-size: 12px; color: #6b7280;
}
.tw-melde-an .tw-melde-stand { color: #2f855a; }
.tw-melde-text { margin: 0 0 9px; font-size: 13px; color: #4b5563; line-height: 1.5; }
.tw-melde-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.tw-melde-eintrag {
    font-size: 12px; background: #f1f3f5; border: 1px solid #e3e6ea;
    border-radius: 3px; padding: 2px 7px;
}
.tw-melde-eintrag em { font-style: normal; color: #6b7280; }

.tw-melde-protokoll {
    border: 1px solid #dfe3e9; border-radius: 4px; padding: 12px 14px;
    background: #fff;
}
.tw-melde-tabelle { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tw-melde-tabelle th {
    text-align: left; font-weight: 600; color: #6b7280;
    border-bottom: 1px solid #e3e6ea; padding: 5px 8px 5px 0;
}
.tw-melde-tabelle td {
    padding: 5px 8px 5px 0; border-bottom: 1px solid #f1f3f5;
    vertical-align: top;
}
/* Ein Fehlversuch faellt auf - er ist der Grund, warum jemand hier nachsieht. */
.tw-melde-fehl td { color: #9b2c2c; }

/* ---------------------------------------------------------------------
   Die Makros aus der rzwiki-Analyse.
   --------------------------------------------------------------------- */

/* Der Seitenumbruch: am Bildschirm eine Marke, im Druck ein Umbruch. */
.tw-page-break {
    position: relative;
    height: 0; margin: 22px 0;
    border-top: 2px dashed #c7cdd6;
}
.tw-page-break::after {
    content: 'Seitenumbruch';
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    background: #fff; padding: 0 8px;
    font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    color: #9aa5b1;
}
@media print {
    /* Im Druck ist er das, was er sein soll - und nicht zu sehen. */
    .tw-page-break {
        break-after: page; page-break-after: always;
        border: 0; height: 0; margin: 0;
    }
    .tw-page-break::after { content: none; }
}

/* Listen aus Seiten und Personen. */
.tw-liste-titel {
    font-weight: 600; font-size: 13px; margin-bottom: 5px;
}
.tw-liste { margin: 0 0 4px; padding-left: 18px; }
.tw-liste li { margin: 2px 0; line-height: 1.5; }
.tw-liste-neben { color: #6b7280; font-size: 12px; }
.tw-mitwirkende { list-style: none; padding-left: 0; }
.tw-mitwirkende .tw-liste-name { font-weight: 500; }

/* Der Ausschnitt - auf seiner eigenen Seite unauffällig markiert, damit
   man beim Bearbeiten sieht, dass er anderswo gezeigt wird. */
.tw-excerpt {
    border-left: 3px solid #dfe3e9; padding-left: 11px; margin: 8px 0;
}
.tw-excerpt-still { border-left-style: dotted; }
.tw-excerpt-include {
    border-left: 3px solid #c3d4e8; padding-left: 11px; margin: 8px 0;
    background: #fafbfd;
}
.tw-excerpt-inhalt > :first-child { margin-top: 4px; }

/* ---------------------------------------------------------------------
   Die Auswahl der Zugangsart.

   Vorher eine endlose Liste, in der jeder Eintrag seinen ganzen
   Hinweistext ausbreitete - bei 22 Arten scrollte man an dem vorbei, was
   man suchte. Jetzt: Gruppen, Kacheln mit einer Zeile, ein Suchfeld. Die
   lange Erklärung steht im Formular danach, dort wo sie gebraucht wird.
   --------------------------------------------------------------------- */
.tw-acc-wahl { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.tw-acc-suche { flex: 0 0 auto; padding: 0 0 12px; }
.tw-acc-suche input {
    width: 100%; box-sizing: border-box; padding: 8px 11px;
    border: 1px solid #c7cdd6; border-radius: 4px; font: inherit;
}

/* Zwei Spalten: links das Thema, rechts die Kacheln - wie beim Einfügen
   eines Makros. Jede Seite rollt fuer sich; `min-height: 0` ist die
   Bedingung dafuer, dass eine Flex-Zelle kleiner werden darf als ihr
   Inhalt. Ohne sie waechst das Raster den Dialog auf, statt zu rollen. */
.tw-acc-rumpf {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}
.tw-acc-spalte,
.tw-acc-liste { height: 100%; min-height: 0; overflow-y: auto; }
.tw-acc-spalte {
    flex: 0 0 auto;
    width: 186px;
    border-right: 1px solid #e5e9ef;
    padding-right: 4px;
}
.tw-acc-liste { flex: 1 1 auto; min-width: 0; padding-left: 16px; }

.tw-acc-nav { display: flex; flex-direction: column; gap: 1px; padding-right: 8px; }
.tw-acc-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-acc-nav-eintrag:hover { background: #f1f5f9; }
/* Die gewaehlte Gruppe traegt kein Blau: sie ist kein Ziel, sondern der
   Ort, an dem man steht. */
.tw-acc-nav-aktiv,
.tw-acc-nav-aktiv:hover { background: #e6eaf0; color: #172b4d; font-weight: 600; }
.tw-acc-nav-zahl { flex: 0 0 auto; font-size: 11px; font-weight: 400; color: #8993a4; }

.tw-acc-gruppe + .tw-acc-gruppe { margin-top: 16px; }
.tw-acc-gruppe-titel {
    font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: #6b7280; margin-bottom: 7px;
}
.tw-acc-gitter {
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.tw-acc-kachel {
    display: flex; gap: 10px; align-items: flex-start; text-align: left;
    padding: 9px 11px; border: 1px solid #dfe3e9; border-radius: 4px;
    background: #fff; cursor: pointer; font: inherit; color: inherit;
}
.tw-acc-kachel:hover { border-color: #2563eb; background: #f6f9ff; }
.tw-acc-kachel > i {
    flex: 0 0 auto; width: 18px; text-align: center;
    margin-top: 2px; color: #4b5563;
}
.tw-acc-kachel:hover > i { color: #2563eb; }
.tw-acc-kachel-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tw-acc-kachel-text strong { font-size: 13px; font-weight: 600; }
.tw-acc-kachel-text span {
    font-size: 11.5px; color: #6b7280; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.tw-acc-leer { padding: 24px 2px; color: #6b7280; }

/* ---------------------------------------------------------------------
   Bilder in den Archiven suchen.

   Jede Kachel trägt drei Angaben, nicht nur das Bild: Quelle, Urheber und
   ob es frei verwendbar ist. Wer ein fremdes Bild auf eine Firmenseite
   legt, muss das VORHER wissen und nicht hinterher.
   --------------------------------------------------------------------- */
.tw-bs { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.tw-bs-kopf { display: flex; gap: 8px; padding-bottom: 10px; }
.tw-bs-frage {
    flex: 1 1 auto; padding: 8px 11px; font: inherit;
    border: 1px solid #c7cdd6; border-radius: 4px;
}
.tw-bs-los {
    padding: 8px 16px; font: inherit; cursor: pointer;
    border: 1px solid #2563eb; border-radius: 4px;
    background: #2563eb; color: #fff;
}
.tw-bs-los:disabled { opacity: .6; cursor: default; }

.tw-bs-filter {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    padding-bottom: 10px; border-bottom: 1px solid #e3e6ea;
    font-size: 12.5px;
}
.tw-bs-quellen { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.tw-bs-frei, .tw-bs-quelle {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
.tw-bs-frei { font-weight: 600; }
/* Eine nicht eingerichtete Quelle steht da, statt zu fehlen - wer Getty
   erwartet und nichts davon sieht, sucht den Fehler bei sich. */
.tw-bs-quelle-aus { color: #9aa5b1; cursor: help; }
.tw-bs-mehr { font-size: 12px; margin-left: auto; }

.tw-bs-treffer { flex: 1 1 auto; overflow-y: auto; padding: 12px 2px 4px; }
.tw-bs-leer { color: #6b7280; padding: 26px 4px; }
.tw-bs-warnung {
    font-size: 12.5px; color: #92400e; background: #fdf6e7;
    border: 1px solid #f3ddb4; border-radius: 3px;
    padding: 7px 10px; margin-bottom: 10px;
}

.tw-bs-gitter {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.tw-bs-kachel {
    display: flex; flex-direction: column; gap: 5px; padding: 0;
    border: 1px solid transparent; background: none; cursor: pointer;
    font: inherit; text-align: left;
}
.tw-bs-bild {
    display: flex; align-items: center; justify-content: center;
    height: 130px; overflow: hidden; position: relative;
    background: #f1f3f5; border: 1px solid #e3e6ea; border-radius: 3px;
}
.tw-bs-bild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tw-bs-kachel:hover .tw-bs-bild { border-color: #9aa5b1; }

.tw-bs-zeile {
    display: flex; align-items: baseline; gap: 6px; font-size: 11.5px;
}
.tw-bs-quelle-name { font-weight: 600; color: #1f2937; }
.tw-bs-lizenz {
    margin-left: auto; color: #2f855a;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 60%;
}
/* Kostenpflichtig fällt auf. Es ist die Angabe, die einen Rechtsverstoss
   verhindert - sie darf nicht aussehen wie eine Fussnote. */
.tw-bs-lizenz-kauf { color: #9b2c2c; font-weight: 600; }
.tw-bs-urheber {
    font-size: 11px; color: #6b7280;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tw-bs-kachel-gesperrt .tw-bs-bild { opacity: .55; }
.tw-bs-kachel-gesperrt .tw-bs-bild::after {
    content: '\f023'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; top: 6px; right: 6px;
    width: 20px; height: 20px; line-height: 20px; text-align: center;
    font-size: 11px; color: #fff; background: #9b2c2c; border-radius: 3px;
}

.tw-bs-kachel-aktiv .tw-bs-bild {
    border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb inset;
    background: #eef4ff;
}
.tw-bs-kachel-aktiv .tw-bs-bild::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; top: 6px; right: 6px;
    width: 20px; height: 20px; line-height: 20px; text-align: center;
    font-size: 11px; color: #fff; background: #2563eb; border-radius: 3px;
}

/* Bildtreffer im KI-Gespräch. */
.tw-ki-bilder {
    display: grid; gap: 6px; margin: 2px 0 6px;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.tw-ki-bilder-laedt, .tw-ki-bilder-hinweis {
    grid-column: 1 / -1; font-size: 11.5px; color: #6b7280;
}
.tw-ki-bild {
    display: flex; flex-direction: column; gap: 3px; padding: 0;
    border: 1px solid #e3e6ea; border-radius: 3px; overflow: hidden;
    background: #f1f3f5; cursor: pointer; font: inherit;
}
.tw-ki-bild:hover { border-color: #2563eb; }
.tw-ki-bild:disabled { opacity: .5; cursor: default; }
.tw-ki-bild img { width: 100%; height: 72px; object-fit: cover; display: block; }
/* Die Lizenz steht an jeder Kachel - wer ein fremdes Bild einsetzt, muss
   sie kennen, bevor er klickt. */
.tw-ki-bild-zeile {
    font-size: 10px; color: #4b5563; padding: 0 4px 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Tabellen in einer KI-Antwort - eine Marktübersicht kommt so zurück. */
.tw-ki-tabelle {
    width: 100%; border-collapse: collapse; margin: 8px 0;
    font-size: 11.5px; display: block; overflow-x: auto;
}
.tw-ki-tabelle th, .tw-ki-tabelle td {
    border: 1px solid #e3e6ea; padding: 4px 7px;
    text-align: left; vertical-align: top;
}
.tw-ki-tabelle th { background: #f6f7f9; font-weight: 600; }
/* Ein Verweis im Gespräch darf die Spalte nicht sprengen. */
.tw-ki-antwort a { word-break: break-word; }

/* ---------------------------------------------------- Herkunftssperre ---
 *
 * Die Karte hatte alles in einer Reihe: Zustand, Regeln, Schlüssel,
 * Grundeinstellung, Probe. Was zusammengehört, stand nebeneinander, und was
 * nichts miteinander zu tun hat, auch. Jetzt sind es vier Blöcke mit
 * Überschrift - Zustand, Regeln, Einstellungen, Probe.
 */
.tw-geo-block + .tw-geo-block {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eef0f3;
}
.tw-geo-titel {
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #6b7280; margin-bottom: 2px;
}
.tw-geo-unter { font-size: 12px; color: #6b7280; margin-bottom: 10px; }

/* Die Zustandsleiste: links, was ist - rechts, was man tun kann. */
.tw-geo-lage {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 12px 14px; background: #f4f6f8; border-radius: 6px;
}
.tw-geo-lage-links {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    flex: 1 1 auto; min-width: 0; font-size: 12.5px;
}
.tw-geo-lage-rechts {
    display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
}
.tw-geo-wert { font-size: 15px; font-weight: 700; color: #1f2328; }
.tw-geo-marke { font-size: 11px; color: #6b7280; }
.tw-geo-an, .tw-geo-aus {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 12px; font-weight: 600; font-size: 12px;
}
.tw-geo-an  { background: #dcfce7; color: #15803d; }
.tw-geo-aus { background: #eceff3; color: #4b5563; }

/* Die Regeltabelle. */
.tw-geo-tabelle { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tw-geo-tabelle thead th {
    font-size: 11px; color: #6b7280; text-transform: uppercase;
    text-align: left; font-weight: 600; padding: 0 6px 6px;
}
.tw-geo-tabelle tbody tr { border-top: 1px solid #eef0f3; }
.tw-geo-tabelle td { padding: 6px; vertical-align: middle; }
.tw-geo-tabelle .tw-geo-rechts { text-align: right; color: #6b7280; }
.tw-geo-tabelle .tw-geo-mitte { text-align: center; }
.tw-geo-tabelle .tw-geo-schmal { width: 52px; white-space: nowrap; }
.tw-geo-aus-zeile { opacity: .55; }
.tw-geo-wirkung {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    font-size: 11.5px; font-weight: 600;
}
.tw-geo-erlauben  { background: #dcfce7; color: #15803d; }
.tw-geo-verbieten { background: #fee2e2; color: #b91c1c; }
.tw-geo-notiz { font-size: 11px; color: #6b7280; }
.tw-geo-pfeil { padding: 2px; color: #6b7280; cursor: pointer; }
.tw-geo-pfeil-tot { padding: 2px; color: #e5e7eb; cursor: default; }
.tw-geo-weg { cursor: pointer; color: #6b7280; }
.tw-geo-weg:hover { color: #b91c1c; }

/* Die Zeile, in der eine Regel entsteht. */
.tw-geo-neu {
    display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap;
    padding: 12px; background: #f9fafb; border: 1px solid #eef0f3;
    border-radius: 6px;
}
.tw-geo-hinweis {
    font-size: 12px; color: #6b7280; display: flex; gap: 8px;
    align-items: flex-start; padding: 8px 10px; background: #f4f6f8;
    border-radius: 4px;
}
.tw-geo-hinweis i { margin-top: 2px; }

/* Das Fenster beim Laden - der Balken und was darunter steht. */
.tw-geo-fortschritt { min-width: 420px; }
.tw-geo-fortschritt .widget-progressbar-group { margin: 6px 0 10px; }
.tw-geo-schritt { font-size: 13px; color: #1f2328; min-height: 20px; }
.tw-geo-zahl { font-size: 12px; color: #6b7280; margin-top: 4px; }

/* Die Beschriftungen in der Regelzeile auf eine Höhe.
 *
 * `InputField` und `Dropdown` setzen ihr Label mit verschiedenem Abstand -
 * nebeneinander stand „Notiz" deutlich höher als „Regel". Das fällt erst
 * auf, wenn beide in derselben Zeile stehen, und dann sofort. */
.tw-geo-neu .widget-label {
    margin-bottom: 6px !important;
    line-height: 1.3;
    font-size: 12.5px;
}
.tw-geo-neu > * { margin: 0 !important; }

/* --------------------------------------------------- Listen der Verwaltung
 *
 * Beim Umbau auf die Widget-Bibliothek sind die Inline-Stile aus den
 * Spaltenzeichnern hierher gewandert. Die Werte sind unveraendert - es
 * sind dieselben Zahlen, die vorher im Javascript standen.
 */
.tw-verw-name   { font-weight: 500; }
.tw-verw-neben  { font-size: 11.5px; color: #6b7280; }
.tw-verw-grau   { font-size: 12.5px; color: #6b7280; }
.tw-verw-symbol { opacity: .6; margin-right: 6px; }
.tw-verw-rechts { text-align: right; }
.tw-verw-keins  { color: #6b7280; }
.tw-verw-zahl   { font-variant-numeric: tabular-nums; }
.tw-verw-voll   { color: #98151d; font-weight: 600; }
.tw-gruppe-zelle { display: flex; align-items: center; gap: 9px; }

/* Eine Luecke, die den Rest der Zeile fuellt - damit ein Knopf neben
 * seinem Feld steht und nicht am anderen Ende der Karte. */
.tw-geo-luecke { flex: 1 1 auto; }

/* Die fettgedruckte Regel und ihre Erlaeuterung auf zwei Zeilen. */
.tw-geo-hinweis strong { display: inline-block; margin-bottom: 2px; }

/* ===================================================== Bild erzeugen ===== */

/*
 * Die Buehne fuer das erzeugte Bild.
 *
 * Feste Hoehe, damit der Dialog beim Wechsel zwischen „noch nichts",
 * „wird gerechnet" und dem fertigen Bild nicht dreimal die Groesse
 * wechselt - das Fenster spraenge sonst unter dem Mauszeiger weg.
 */
.tw-be-buehne {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 340px;
    margin-top: 12px;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    background: #f7f8fa;
    text-align: center;
}

.tw-be-bild {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.tw-be-warten {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
}

.tw-be-fuss {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 18px;
    margin-top: 6px;
}

/* ============================================ Tabellen: Breite und Nummern */

/*
 * Volle Breite.
 *
 * `table-layout: fixed` gehoert dazu: ohne die Angabe verteilt der Browser
 * die Breite nach dem Inhalt, und eine Tabelle mit einer langen Spalte waere
 * dann doch wieder schief.
 */
.tw-table-voll {
    width: 100%;
    table-layout: fixed;
}

/*
 * Die mitlaufende Nummer.
 *
 * Sie steht NEBEN der Zeile, nicht in ihr: absolut gesetzt, links ausserhalb
 * der ersten Zelle, und die Tabelle bekommt links Platz dafuer.
 *
 * Der erste Anlauf war ein `display: table-cell` im `::before` der Zeile -
 * also eine zusaetzliche Spalte. Das `<colgroup>` kennt die nicht, und
 * `table-layout: fixed` verteilte daraufhin alles neu: die Spaltenbreiten
 * sprangen beim Einschalten von [109, 650, 629] auf [469, 444, 430]. Eine
 * Anzeige darf den Inhalt nicht umbauen.
 *
 * Gezeichnet wird sie im `::before` der ersten Zelle, in deren linkem
 * Polster. Der erste Anlauf haengte sie ausserhalb der Zelle daneben - im
 * Editor brach dort ihre Breite auf einen Pixel zusammen. Innerhalb der
 * Zelle gibt es nichts, was sie abschneiden koennte.
 */
/*
 * Platz fuer die Nummer - und zwar mit genug Nachdruck.
 *
 * `table.tw-table { margin: 0 0 14px }` in editor.css ist spezifischer als
 * eine einzelne Klasse; mein `margin-left` kam ohne diese Aufzaehlung gar
 * nicht an, und die Nummern standen ausserhalb des sichtbaren Bereichs.
 * Die Breite muss mit: die Tabelle steht auf `width: 100%`, und mit einem
 * linken Abstand daneben liefe sie ueber den Rand.
 */
.tw-table-nummern tr > *:first-child {
    padding-left: 3em;
}

/*
 * Gezaehlt wird vom Stilblatt, nicht von JavaScript.
 *
 * Vorher stand die Nummer in einem `data-nr`, das zwei Stellen nachfuehren
 * mussten. Im Editor kam sie nie an - die Knotenansicht laeuft, bevor die
 * Zeilen im Tisch haengen, und bei einer Aenderung in einer Zelle laeuft sie
 * gar nicht. Der Zaehler kennt dieses Problem nicht: er zaehlt beim
 * Zeichnen, was dasteht.
 */
.tw-table-nummern {
    counter-reset: tw-zeile;
}

.tw-table-nummern tr {
    counter-increment: tw-zeile;
}

/*
 * Die Kopfzeile traegt das Zeichen und keine Nummer - und sie zaehlt nicht
 * mit, sonst begaenne der Inhalt bei zwei. Eine Kopfzeile ist eine Zeile
 * ganz ohne `td`.
 */
.tw-table-nummern tr:has(th):not(:has(td)) {
    counter-increment: none;
}

.tw-table-nummern tr:has(th):not(:has(td)) > *:first-child::before {
    content: "#";
}

/*
 * Ausgeblendete Zeilen zaehlt der Zaehler von sich aus nicht mit: `[hidden]`
 * ist `display: none`, und daran laeuft kein Zaehler weiter. Nach dem
 * Filtern steht also 1, 2, 3 da und nicht 1, 4, 7.
 */

.tw-table-nummern tr > *:first-child {
    position: relative;
}

.tw-table-nummern tr > *:first-child::before {
    content: counter(tw-zeile);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2.4em;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: .5em;
    box-sizing: border-box;
    background: #f7f8fa;
    border-right: 1px solid var(--widget-border-color, #c6cbd4);
    color: #6b7280;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    text-align: right;
    user-select: none;
    pointer-events: none;
}

.tw-table-blank.tw-table-nummern tr > *:first-child::before {
    border-right: none;
    background: transparent;
}

/* ================================================ Tabellen: das Suchfeld */

/*
 * Die Suchzeile ueber der Tabelle.
 *
 * Sie hing vorher mit einem negativen Abstand an der Tabelle und stand
 * buendig auf ihrer Oberkante - das sah aus, als gehoere sie in die erste
 * Zeile. Jetzt ein ordentlicher Abstand nach unten, und das Feld traegt ein
 * Lupensymbol, damit es als Suchfeld zu erkennen ist und nicht als
 * Eingabefeld der Tabelle.
 */
.tw-table-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 8px;
}

.tw-table-filter-feld {
    flex: 0 0 280px;
    max-width: 100%;
    padding: 6px 10px 6px 30px;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.4'/%3E%3Cpath d='M10.3 10.3L14 14' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 14px 14px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
}

.tw-table-filter-feld:focus {
    outline: none;
    border-color: var(--widget-accent, #0f6cbd);
    box-shadow: 0 0 0 2px rgba(15, 108, 189, .15);
}

.tw-table-filter-zahl {
    font-size: 12px;
    color: #6b7280;
}

/* ================================================ Zeichen der Tabellenleiste */

/*
 * Eigene Glyphen fuer die Tabellenwerkzeuge.
 *
 * Font Awesome kennt keine „Zeile mit Plus" und keine „Spalte
 * durchgestrichen"; mit Pfeilen saehe die Leiste ganz anders aus als die
 * Vorlage. Also gezeichnet - und nicht bei einem Zeichensatzdienst geholt:
 * die verlangen bei den meisten Saetzen Namensnennung oder eine Lizenz, und
 * das waere eine Verpflichtung, die im Wiki dauerhaft mitliefe.
 *
 * Hoechstens vier Striche je Zeichen. Gemessen erscheinen sie mit 15 Pixeln -
 * zu klein waren sie nie, zu detailliert schon: bei dieser Groesse laufen
 * zwei Linien, die drei Punkte auseinanderliegen, ineinander.
 *
 * Eingebunden als MASKE und nicht als Hintergrundbild: so nehmen sie
 * `currentColor` an und werden mit dem Knopf zusammen blass, wenn das
 * Werkzeug gerade nicht anwendbar ist.
 */
.tw-ico {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -.17em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.tw-ico-aufklappen {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3.4%206L8%2010.6%2012.6%206'%20stroke-width='2'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3.4%206L8%2010.6%2012.6%206'%20stroke-width='2'/></svg>");
}

.tw-ico-diagramm {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='12'%20height='10'%20rx='1'/><path%20d='M2%206.6h12'/><path%20d='M3.8%2011.4l2.6-2.6%202.4%201.8%203.4-3.4'%20stroke-width='1.7'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='12'%20height='10'%20rx='1'/><path%20d='M2%206.6h12'/><path%20d='M3.8%2011.4l2.6-2.6%202.4%201.8%203.4-3.4'%20stroke-width='1.7'/></svg>");
}

.tw-ico-farbeimer {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M6.2%201.8l5.6%205.6a1%201%200%20010%201.4l-3.5%203.5a1%201%200%2001-1.4%200L1.3%206.7a1%201%200%20010-1.4l3.5-3.5a1%201%200%20011.4%200z'/><path%20d='M1.6%206.2h9.4'%20stroke-width='1.4'/><path%20d='M13.4%209.4s1.6%201.9%201.6%202.8a1.6%201.6%200%2011-3.2%200c0-.9%201.6-2.8%201.6-2.8z'%20stroke-width='1.4'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M6.2%201.8l5.6%205.6a1%201%200%20010%201.4l-3.5%203.5a1%201%200%2001-1.4%200L1.3%206.7a1%201%200%20010-1.4l3.5-3.5a1%201%200%20011.4%200z'/><path%20d='M1.6%206.2h9.4'%20stroke-width='1.4'/><path%20d='M13.4%209.4s1.6%201.9%201.6%202.8a1.6%201.6%200%2011-3.2%200c0-.9%201.6-2.8%201.6-2.8z'%20stroke-width='1.4'/></svg>");
}

.tw-ico-filter {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M2.2%203.6h11.6l-4.5%205v4.6l-2.6-1.6V8.6z'%20stroke-width='1.6'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M2.2%203.6h11.6l-4.5%205v4.6l-2.6-1.6V8.6z'%20stroke-width='1.6'/></svg>");
}

.tw-ico-kopfspalte {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='12'%20height='10'%20rx='1'/><path%20d='M4.2%203.9v8.2'%20stroke-width='4.4'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='12'%20height='10'%20rx='1'/><path%20d='M4.2%203.9v8.2'%20stroke-width='4.4'/></svg>");
}

.tw-ico-kopfzeile {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='12'%20height='10'%20rx='1'/><path%20d='M2.9%205.2h10.2'%20stroke-width='4.4'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='12'%20height='10'%20rx='1'/><path%20d='M2.9%205.2h10.2'%20stroke-width='4.4'/></svg>");
}

.tw-ico-nummernspalte {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='12'%20height='10'%20rx='1'/><path%20d='M6.4%203v10'/><path%20d='M4.2%205v1.4M4.2%207.3v1.4M4.2%209.6v1.4'%20stroke-width='1.9'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='12'%20height='10'%20rx='1'/><path%20d='M6.4%203v10'/><path%20d='M4.2%205v1.4M4.2%207.3v1.4M4.2%209.6v1.4'%20stroke-width='1.9'/></svg>");
}

.tw-ico-sortieren {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='7.6'%20height='10'%20rx='1'/><path%20d='M2%207h7.6'/><path%20d='M12.4%203.4v9.2'%20stroke-width='1.7'/><path%20d='M10.9%205.2l1.5-1.8%201.5%201.8M10.9%2010.8l1.5%201.8%201.5-1.8'%20stroke-width='1.7'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='7.6'%20height='10'%20rx='1'/><path%20d='M2%207h7.6'/><path%20d='M12.4%203.4v9.2'%20stroke-width='1.7'/><path%20d='M10.9%205.2l1.5-1.8%201.5%201.8M10.9%2010.8l1.5%201.8%201.5-1.8'%20stroke-width='1.7'/></svg>");
}

.tw-ico-spalte-danach {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2.2'%20y='3.4'%20width='5'%20height='10.2'%20rx='1'/><path%20d='M11.6%200.9v5.8M8.7%203.8h5.8'%20stroke-width='1.9'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2.2'%20y='3.4'%20width='5'%20height='10.2'%20rx='1'/><path%20d='M11.6%200.9v5.8M8.7%203.8h5.8'%20stroke-width='1.9'/></svg>");
}

.tw-ico-spalte-davor {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='8.8'%20y='3.4'%20width='5'%20height='10.2'%20rx='1'/><path%20d='M4.4%200.9v5.8M1.5%203.8h5.8'%20stroke-width='1.9'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='8.8'%20y='3.4'%20width='5'%20height='10.2'%20rx='1'/><path%20d='M4.4%200.9v5.8M1.5%203.8h5.8'%20stroke-width='1.9'/></svg>");
}

.tw-ico-spalte-links {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='8.6'%20y='2.6'%20width='5.2'%20height='11'%20rx='1'/><path%20d='M6.6%208H2M4.4%205.4L1.8%208l2.6%202.6'%20stroke-width='1.8'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='8.6'%20y='2.6'%20width='5.2'%20height='11'%20rx='1'/><path%20d='M6.6%208H2M4.4%205.4L1.8%208l2.6%202.6'%20stroke-width='1.8'/></svg>");
}

.tw-ico-spalte-rechts {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2.2'%20y='2.6'%20width='5.2'%20height='11'%20rx='1'/><path%20d='M9.4%208H14M11.6%205.4L14.2%208l-2.6%202.6'%20stroke-width='1.8'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2.2'%20y='2.6'%20width='5.2'%20height='11'%20rx='1'/><path%20d='M9.4%208H14M11.6%205.4L14.2%208l-2.6%202.6'%20stroke-width='1.8'/></svg>");
}

.tw-ico-spalte-weg {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='5.3'%20y='2.4'%20width='5.4'%20height='11.2'%20rx='1'/><path%20d='M2.2%2013.8L13.8%202.2'%20stroke-width='1.9'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='5.3'%20y='2.4'%20width='5.4'%20height='11.2'%20rx='1'/><path%20d='M2.2%2013.8L13.8%202.2'%20stroke-width='1.9'/></svg>");
}

.tw-ico-tabelle-weg {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='12'%20height='10'%20rx='1'/><path%20d='M2%207.4h12'/><path%20d='M2.2%2013.8L13.8%202.2'%20stroke-width='2'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='12'%20height='10'%20rx='1'/><path%20d='M2%207.4h12'/><path%20d='M2.2%2013.8L13.8%202.2'%20stroke-width='2'/></svg>");
}

.tw-ico-teilen {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='12'%20height='10'%20rx='1'/><path%20d='M2%208h12M8%203v10'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='12'%20height='10'%20rx='1'/><path%20d='M2%208h12M8%203v10'/></svg>");
}

.tw-ico-verbinden {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='12'%20height='10'%20rx='1'/><path%20d='M2%208h12M8%208v5'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='3'%20width='12'%20height='10'%20rx='1'/><path%20d='M2%208h12M8%208v5'/></svg>");
}

.tw-ico-zeile-danach {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='3.4'%20y='2.2'%20width='10.2'%20height='5'%20rx='1'/><path%20d='M3.8%208.7v5.8M0.9%2011.6h5.8'%20stroke-width='1.9'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='3.4'%20y='2.2'%20width='10.2'%20height='5'%20rx='1'/><path%20d='M3.8%208.7v5.8M0.9%2011.6h5.8'%20stroke-width='1.9'/></svg>");
}

.tw-ico-zeile-davor {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='3.4'%20y='8.8'%20width='10.2'%20height='5'%20rx='1'/><path%20d='M3.8%201.5v5.8M0.9%204.4h5.8'%20stroke-width='1.9'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='3.4'%20y='8.8'%20width='10.2'%20height='5'%20rx='1'/><path%20d='M3.8%201.5v5.8M0.9%204.4h5.8'%20stroke-width='1.9'/></svg>");
}

.tw-ico-zeile-hoch {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2.6'%20y='8.6'%20width='11'%20height='5.2'%20rx='1'/><path%20d='M8%206.6V2M5.4%204.4L8%201.8l2.6%202.6'%20stroke-width='1.8'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2.6'%20y='8.6'%20width='11'%20height='5.2'%20rx='1'/><path%20d='M8%206.6V2M5.4%204.4L8%201.8l2.6%202.6'%20stroke-width='1.8'/></svg>");
}

.tw-ico-zeile-runter {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2.6'%20y='2.2'%20width='11'%20height='5.2'%20rx='1'/><path%20d='M8%209.4V14M5.4%2011.6L8%2014.2l2.6-2.6'%20stroke-width='1.8'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2.6'%20y='2.2'%20width='11'%20height='5.2'%20rx='1'/><path%20d='M8%209.4V14M5.4%2011.6L8%2014.2l2.6-2.6'%20stroke-width='1.8'/></svg>");
}

.tw-ico-zeile-weg {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2.4'%20y='5.3'%20width='11.2'%20height='5.4'%20rx='1'/><path%20d='M2.2%2013.8L13.8%202.2'%20stroke-width='1.9'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2.4'%20y='5.3'%20width='11.2'%20height='5.4'%20rx='1'/><path%20d='M2.2%2013.8L13.8%202.2'%20stroke-width='1.9'/></svg>");
}



/* ------------------------------------------------- Meine Listen (meins.js)
   Aufgaben, zuletzt angesehen, zuletzt bearbeitet - drei Listen mit
   demselben Aufbau: oben der Titel, darunter Bereich, Ort und Zeit. */
.tw-meins-zeile {
    border: 1px solid var(--widget-border-color, #e3e6eb);
    border-radius: 6px;
    background: #fff;
    padding: 8px 12px;
}
.tw-meins-klickbar { cursor: pointer; }
.tw-meins-klickbar:hover {
    background: #f6f8fc;
    border-color: var(--widget-primary-color, #2563eb);
}
.tw-meins-haupt {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.tw-meins-titel { font-weight: 600; }
.tw-meins-kasten { color: #9aa2b1; }

.tw-meins-neben {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 3px;
    font-size: .88em;
    color: #6b7280;
}
.tw-meins-bereich {
    background: #f1f5f9;
    border-radius: 3px;
    padding: 0 6px;
}
/* Der eigene Bereich hebt sich ab - auf einer Liste aus zwanzig Zeilen sieht
   man sonst nicht, was davon nur einen selbst betrifft. */
.tw-meins-eigen {
    background: #eef4ff;
    color: #1d4ed8;
}
.tw-meins-eigen i { margin-right: 4px; }
.tw-meins-zahl { font-variant-numeric: tabular-nums; }

/* ==================================================== Hilfe hinter dem „?" */

/*
 * Der Hilfetext im Fenster.
 *
 * Er kommt als fertiges HTML vom Server und traegt deshalb die ueblichen
 * Auszeichnungen - Ueberschriften, Absaetze, Listen, Tabellen, Code. Die
 * Regeln hier sind bewusst eng gehalten: sie gelten nur innerhalb des
 * Hilfefensters und sollen die Wiki-Anzeige nicht beeinflussen.
 */
.tw-hilfe-text {
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
}

.tw-hilfe-text h1 { font-size: 19px; margin: 0 0 10px; }
.tw-hilfe-text h2 { font-size: 16px; margin: 20px 0 8px; }
.tw-hilfe-text h3 { font-size: 14px; margin: 16px 0 6px; }
.tw-hilfe-text p  { margin: 0 0 10px; }
.tw-hilfe-text ul,
.tw-hilfe-text ol { margin: 0 0 10px; padding-left: 22px; }
.tw-hilfe-text li { margin: 0 0 4px; }

.tw-hilfe-text code {
    padding: 1px 5px;
    border-radius: 3px;
    background: #f3f4f6;
    font-size: 12.5px;
}

.tw-hilfe-text pre {
    margin: 0 0 12px;
    padding: 10px 12px;
    overflow-x: auto;
    border-radius: 4px;
    background: #f7f8fa;
    border: 1px solid var(--widget-border-color, #c6cbd4);
}

.tw-hilfe-text pre code { padding: 0; background: none; }

.tw-hilfe-text table {
    width: 100%;
    margin: 0 0 12px;
    border-collapse: collapse;
}

.tw-hilfe-text th,
.tw-hilfe-text td {
    padding: 5px 8px;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    text-align: left;
    vertical-align: top;
}

.tw-hilfe-text th { background: #f7f8fa; font-weight: 600; }

.tw-hilfe-text blockquote {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-left: 3px solid #93c5fd;
    background: #f0f7ff;
    color: #374151;
}

/* Der Hinweis, dass ein Text in der eigenen Sprache noch fehlt. */
.tw-hilfe-ersatz {
    padding: 8px 12px;
    border-radius: 4px;
    background: #fff8e6;
    border: 1px solid #f0d9a0;
    font-size: 13px;
    color: #7a5c14;
}

/*
 * Das blosse Fragezeichen fuer enge Stellen.
 *
 * Grau und klein: es soll auffindbar sein, wenn jemand es sucht, und
 * uebersehbar, wenn niemand es braucht. Ein Hilfezeichen, das um
 * Aufmerksamkeit kaempft, steht dem im Weg, wobei es helfen soll.
 */
.tw-hilfe-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 5px;
    border: none;
    border-radius: 50%;
    background: none;
    color: #9ca3af;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    vertical-align: -2px;
}

.tw-hilfe-zeichen:hover,
.tw-hilfe-zeichen:focus-visible {
    color: #2563eb;
    background: #eff6ff;
    outline: none;
}

/*
 * Das Fragezeichen auf einer Makrokarte.
 *
 * Die Karte ist ein Knopf; das Zeichen sitzt in ihrer Ecke und muss den
 * Klick abfangen, sonst waere das Makro eingefuegt, bevor jemand die Hilfe
 * gelesen hat. Das erledigt `hilfeZeichen` selbst - hier steht nur, wo es
 * liegt.
 */
.tw-macro-card {
    position: relative;
}

/*
 * Immer sichtbar, nur leise.
 *
 * Hier stand `opacity: 0` mit Sichtbarkeit erst beim Zeigen. Der Gedanke war
 * „uebersehbar, wenn niemand es braucht" - herausgekommen ist „unsichtbar".
 * Roland hat die Fragezeichen gesucht und keines gefunden, und das ist die
 * richtige Antwort auf ein Bedienelement, das man erst entdecken muss, indem
 * man mit der Maus darueberfaehrt: es gibt es nicht.
 *
 * Ein Hilfezeichen darf leise sein. Verborgen darf es nicht sein.
 */
.tw-macro-card .tw-hilfe-zeichen {
    position: absolute;
    top: 4px;
    right: 4px;
    margin: 0;
    opacity: 1;
    color: var(--widget-primary-color, #2563eb);
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    transition: background-color .12s, color .12s;
}

.tw-macro-card:hover .tw-hilfe-zeichen,
.tw-macro-card .tw-hilfe-zeichen:hover,
.tw-macro-card .tw-hilfe-zeichen:focus-visible {
    opacity: 1;
}

/* Das Verzeichnis aller Hilfethemen. */
.tw-hilfe-verzeichnis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 6px;
    max-height: 58vh;
    overflow-y: auto;
    padding-right: 4px;
}

.tw-hilfe-eintrag {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--widget-border-color, #c6cbd4);
    border-radius: 4px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.tw-hilfe-eintrag:hover,
.tw-hilfe-eintrag:focus-visible {
    border-color: var(--widget-primary-color, #2563eb);
    background: #f5f8ff;
    outline: none;
}

.tw-hilfe-eintrag-titel { font-size: 13px; font-weight: 600; color: #1f2937; }

/* Welche Sprachen es gibt - klein, damit die Luecken auffallen. */
.tw-hilfe-eintrag-sprachen { font-size: 11px; color: #9ca3af; }

/* ============================================ Der Hilfeknopf muss man sehen */

/*
 * `btn-secondary` ist in der Bibliothek durchsichtig und rahmenlos - ein
 * Zeichen in Blassgrau, sonst nichts. Für einen Knopf, der zwischen anderen
 * steht, reicht das; für einen, den jemand SUCHEN soll, nicht. Gesucht und
 * nicht gefunden ist genau das, was passiert ist.
 *
 * Also: ein sichtbarer Kreis mit Rahmen, in der Farbe, die im Wiki „das
 * kannst du anklicken" bedeutet.
 */
.widget-button.tw-hilfe-button {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    color: var(--widget-primary-color, #2563eb);
}

.widget-button.tw-hilfe-button i {
    margin: 0;
    font-size: 15px;
}

.widget-button.tw-hilfe-button:hover,
.widget-button.tw-hilfe-button:focus-visible {
    background-color: var(--widget-primary-color, #2563eb);
    border-color: var(--widget-primary-color, #2563eb);
    color: #fff;
    outline: none;
}

/*
 * In der dunklen Verwaltungsleiste umgekehrt.
 *
 * Dort stand das Zeichen dunkelgrau auf dunkelblau - vorhanden, messbar,
 * unsichtbar. Ein heller Kreis auf dunklem Grund ist das Gegenstück zur
 * Regel oben, nicht eine Ausnahme davon.
 */
.tw-admin-header .widget-button.tw-hilfe-button,
.widget-button.tw-hilfe-button.tw-admin-hilfe {
    background-color: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.tw-admin-header .widget-button.tw-hilfe-button:hover,
.widget-button.tw-hilfe-button.tw-admin-hilfe:hover {
    background-color: #fff;
    border-color: #fff;
    color: #1f2937;
}

/*
 * Der Kasten ueber einem Editor, dessen Inhalt nicht gelesen werden konnte.
 *
 * Rot und ueber dem Textfeld, nicht daneben: wer hier nicht hinsieht, tippt
 * in eine leere Seite und speichert sie.
 */
.tw-editor-kaputt {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #f0a0a0;
    border-left: 4px solid #dc2626;
    border-radius: 4px;
    background: #fef2f2;
    color: #7f1d1d;
    font-size: 13px;
    line-height: 1.5;
}

/* ===== Aktionsleiste im Seitenkopf =====================================
 *
 * Rechts oben stehen der Bearbeiten-Knopf und daneben die Symbolknoepfe.
 * Zwei Dinge sind hier von Hand geregelt, weil der Baukasten sie nicht
 * wissen kann:
 *
 * 1. Der Kopf ist grau (#f6f7f9) - und der Knopf des Baukastens ebenfalls,
 *    denn `--widget-btn-bg` traegt genau denselben Wert. Der Bearbeiten-
 *    Knopf verschwand darin bis auf seinen Rahmen. Weisser Grund loest das,
 *    ohne eine Farbe einzufuehren, die es im Haus sonst nicht gibt.
 *
 * 2. Knoepfe ohne Wort werden quadratisch. Sonst bestimmt die Breite des
 *    Zeichens die Breite des Knopfs (gemessen: 41, 37, 30, 37 Punkte), und
 *    gleiche Abstaende sehen dadurch ungleich aus.
 */
.tw-page-actions .widget-button,
.tw-editor-actions .widget-button {
    height: 32px;
    margin: 0;
}

.tw-page-actions .widget-button.tw-nur-symbol,
.tw-editor-actions .widget-button.tw-nur-symbol {
    width: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Die Zeichen sind unterschiedlich breit; mittig gesetzt sitzen sie
       trotzdem alle auf derselben Achse. */
    font-size: 14px;
}

.tw-page-actions .widget-button.tw-nur-symbol i,
.tw-editor-actions .widget-button.tw-nur-symbol i {
    margin: 0;
    width: auto;
}

/*
 * Bearbeiten: Wort und Bleistift, ohne Flaeche und Rahmen.
 *
 * Der Knopf trug urspruenglich das Grau des Baukastens - und das ist
 * #f6f7f9, genau die Farbe dieses Seitenkopfs; er verschwand darin bis auf
 * seinen Rahmen. Weisser Grund waere nur neun Helligkeitsstufen entfernt
 * gewesen: messbar, aber nicht zu sehen.
 *
 * Jetzt traegt er die Betonungsfarbe des Hauses als Schrift statt als
 * Flaeche. Er steht damit ruhig neben den Symbolknoepfen, ist aber der
 * einzige farbige Punkt der Reihe - und dadurch der erste, den man liest.
 * Dass er anklickbar ist, sagt die Flaeche beim Darueberfahren.
 */
.tw-page-actions .widget-button.tw-aktion-haupt,
.tw-editor-actions .widget-button.tw-aktion-haupt {
    padding: 0 8px;
    gap: 8px;
    background-color: transparent;
    border-color: transparent;
    color: var(--widget-accent, #0f6cbd);
    font-weight: 600;
    box-shadow: none;
}

.tw-page-actions .widget-button.tw-aktion-haupt:hover,
.tw-editor-actions .widget-button.tw-aktion-haupt:hover {
    background-color: var(--widget-accent-soft, #e9f1fb);
    border-color: transparent;
    color: var(--widget-accent, #0f6cbd);
}

/*
 * Ohne Rahmen braucht die Tastaturbedienung eine eigene Markierung - sonst
 * waere nicht zu sehen, wo man steht.
 */
.tw-page-actions .widget-button.tw-aktion-haupt:focus-visible,
.tw-editor-actions .widget-button.tw-aktion-haupt:focus-visible {
    outline: 2px solid var(--widget-accent, #0f6cbd);
    outline-offset: 2px;
}

.tw-page-actions .widget-button.tw-aktion-haupt i,
.tw-editor-actions .widget-button.tw-aktion-haupt i {
    /* Der Abstand kommt aus `gap`; der Baukasten gibt dem Zeichen sonst
       zusaetzlich einen eigenen, und beides zusammen ist zu viel. */
    margin-right: 0;
    font-size: 13px;
}

/*
 * Abbrechen - der ruhige Nachbar.
 *
 * Er trug schon vorher keine Flaeche, war aber zwei Punkte flacher als
 * „Speichern" und bekam beim Darueberfahren nichts. Neben einem Knopf ohne
 * Rahmen faellt so etwas auf: die beiden stuenden verschieden hoch und
 * reagierten verschieden.
 *
 * Er bleibt bewusst grau. Wenn zwei Woerter ohne Rahmen nebeneinander
 * stehen, ist die Farbe der einzige Hinweis darauf, welches die Arbeit
 * abschliesst - und der Haken vor „Speichern" der zweite.
 */
.tw-editor-actions .widget-button.tw-aktion-neben {
    padding: 0 8px;
    gap: 8px;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.tw-editor-actions .widget-button.tw-aktion-neben:hover {
    background-color: var(--widget-btn-hover, #eef0f4);
    border-color: transparent;
}

.tw-editor-actions .widget-button.tw-aktion-neben i {
    margin-right: 0;
    font-size: 13px;
}

.tw-editor-actions .widget-button.tw-aktion-neben:focus-visible {
    outline: 2px solid var(--widget-secondary, #5b6270);
    outline-offset: 2px;
}

/* ---------------------------------------------------- Sicherheitseinstellungen
 * Eine Zeile je Einstellung: links das Feld mit seinem Hilfesatz, rechts die
 * Herkunft des Wertes und der Pfeil zum Zuruecksetzen. Kompakte Zeilen
 * (Schwellen einer Regel, Ratengrenzen) stehen nebeneinander. */
.tw-sec-setting {
    /* Die Karte legt ihre Kinder mit flex-start an - ohne volle Breite
     * schrumpft die Zeile auf ihren Inhalt, und der linke Teil bricht
     * Wort fuer Wort um. */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #eef0f2;
}
.tw-sec-setting:last-child { border-bottom: 0; }
.tw-sec-setting > :first-child { flex: 1 1 0; min-width: 0; }
/* Der HorizontalBoxContainer bringt `width: 100%` aus der Bibliothek mit
 * und draengte den linken Teil auf null Breite - gemessen. Hier die
 * Breite zuruecknehmen, mit der Klasse, damit die Regel schwerer wiegt. */
/* Der Hilfesatz unter das Feld - bei Schaltern klebte er sonst an der
 * Beschriftung, weil der Schalter als Inline-Element gebaut ist. */
.tw-sec-setting > :first-child > * + * { display: block; margin-top: 4px; }
.tw-sec-setting-rechts {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
}
.tw-sec-setting-kompakt {
    border-bottom: 0;
    padding: 4px 0;
    flex: 0 1 220px;
    min-width: 180px;
}
.tw-sec-regel {
    width: 100%;
    padding: 8px 0 12px;
    border-bottom: 1px solid #e3e6ea;
}
.tw-sec-regel:last-child { border-bottom: 0; }
.tw-sec-regel .tw-sec-setting-kompakt .widget-input-field label,
.tw-sec-setting-kompakt .widget-input-field label { font-size: 12px; color: #57606a; }

/* ===== Anmeldeseite: die beiden Logos ==================================
 *
 * Beide Zeichnungen tragen ein `viewBox` und bestehen nur aus Pfaden - kein
 * Text, keine Schrift, kein eingebettetes Bild. Sie lassen sich deshalb frei
 * skalieren; festgelegt wird nur die Hoehe, die Breite folgt.
 */
.tw-login-logo {
    height: 60px;
    width: auto;
    display: block;
    /* Die Karte ist innen rund 328 Punkte breit; bei 60 Punkten Hoehe ist das
       Logo 188 breit und nimmt gut die Haelfte davon - genug, um der Kopf der
       Seite zu sein, ohne dem Formular den Platz zu nehmen. */
    max-width: 100%;
}

/*
 * Das Herkunftszeichen sitzt an der Seite, nicht in der Karte.
 *
 * Etwas zurueckgenommen: es beantwortet die Frage „von wem ist das", und die
 * stellt sich erst, nachdem man sich angemeldet hat. Vor der Anmeldung soll
 * es niemanden vom Formular wegziehen.
 */
.tw-login-herkunft {
    position: absolute;
    right: 22px;
    bottom: 18px;
    opacity: .75;
    transition: opacity .15s ease;
}

.tw-login-herkunft:hover {
    opacity: 1;
}

.tw-login-herkunft img {
    height: 48px;
    width: auto;
    display: block;
}

/* Auf einem schmalen Schirm nimmt es keinen Platz weg, den das Formular
   braucht - dort steht es unter der Karte statt neben ihr. */
@media (max-width: 560px) {
    .tw-login-herkunft {
        position: static;
        margin-top: 18px;
        align-self: center;
    }
}

/*
 * Der Weg zur Verkaufsseite - unten links, spiegelbildlich zum
 * Herkunftszeichen rechts. Dieselbe Zurueckhaltung: klein, gedaempft, ein
 * einzelner Satz fuer die, die neugierig sind, nicht fuer die, die sich nur
 * anmelden wollen.
 */
.tw-login-mehr {
    position: absolute;
    left: 22px;
    bottom: 18px;
    font-size: 14.5px;
    color: #6b7280;
    opacity: .85;
    transition: opacity .15s ease;
}

.tw-login-mehr:hover {
    opacity: 1;
}

.tw-login-mehr a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 560px) {
    .tw-login-mehr {
        position: static;
        margin-top: 10px;
        text-align: center;
    }
}

/*
 * „Noch kein Wiki?" - ganz unten IN der Karte, mit eigener Trennlinie.
 *
 * Anders als `.tw-login-mehr` (die Angabe ausserhalb der Karte, fuer die
 * Neugierigen im Vorbeigehen): diese Zeile steht in der Karte selbst, weil
 * sie an dieselbe Stelle gehoert wie „Passwort vergessen" oder „Konto
 * anlegen" bei anderen Diensten - der naheliegende Ort fuer jemanden, der
 * bis hierher gekommen ist und merkt, dass er noch gar keinen Zugang hat.
 */
.tw-login-kennenlernen {
    width: 100%;
    padding-top: 14px;
    margin-top: 2px;
    border-top: 1px solid var(--widget-border-color, #e5e7eb);
    text-align: center;
    font-size: 13px;
}

.tw-login-kennenlernen a {
    color: var(--widget-accent, #0f6cbd);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/*
 * Das Logo in der Kopfzeile.
 *
 * Die Zeile ist 40 Punkte hoch (siehe `shell.js`); 26 davon bekommt das
 * Logo. Mehr sähe gedrängt aus, weniger wäre bei „enterprise" unter dem
 * Schriftzug nicht mehr zu entziffern.
 */
.tw-header-logo {
    height: 26px;
    width: auto;
    display: block;
}

/* --------------------------------------------------- Anmeldung: „oder"
 *
 * Ein Trenner mit Wort in der Mitte. Die beiden Linien entstehen aus den
 * Pseudo-Elementen und teilen sich den Platz - so bleibt das Wort mittig,
 * egal wie breit die Karte ist und wie lang das Wort in der jeweiligen
 * Sprache ausfaellt („oder", „or", „ou", „oppure").
 */
.tw-login-trenner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 2px 0;
    font-size: 12px;
    color: #9aa1ac;
    text-transform: lowercase;
}
.tw-login-trenner::before,
.tw-login-trenner::after {
    content: '';
    flex: 1 1 0;
    height: 1px;
    background: var(--widget-border-color, #dfe3e9);
}

/* ==================================================== Anmeldung (SSO)
 *
 * WICHTIG BEIM AENDERN: Abstaende, `display`, `gap` und `align-items` der
 * SSO-Ansicht stehen NICHT hier, sondern in `setLayoutStyles` in
 * views/tenant/sso.js. Die Box-Behaelter der Widget-Bibliothek schreiben
 * diese vier Angaben INLINE (siehe BoxLayoutContainer, Konstruktor), und
 * eine Regel im Stylesheet verliert dagegen immer.
 *
 * Genau daran ist die erste Fassung dieser Ansicht gescheitert: hier stand
 * `gap: 14px`, der Behaelter stand auf `gap: 0`, und Zeichen und Text
 * klebten aneinander. Was hier bleibt, ist das, was der Behaelter nicht
 * anfasst - Farbe, Rahmen, Rundung, Schrift.
 */

/* Der Fliesstext dieser Ansicht.
 *
 * 13.5px und nicht 12.5: der Merksatz oben ist keine Fussnote, sondern das
 * Erste, was jemand hier liest - und er erklaert, wovon die ganze Seite
 * handelt. In der Groesse einer Randbemerkung ueberliest man ihn.
 *
 * `text-wrap: pretty` verteilt die Zeilen so, dass die letzte nicht zu kurz
 * geraet, und `ohneHurenkind()` in sso.js bindet zusaetzlich die letzten
 * zwei Woerter aneinander - siehe den Kommentar dort. Silbentrennung ist
 * bewusst NICHT eingeschaltet; warum, steht eine Regel weiter unten. */
.tw-sso-satz,
.tw-sso-vorspann,
.tw-sso-wozu {
    font-size: 13.5px;
    line-height: 1.6;
    color: #5a6472;
    /*
     * `text-wrap: pretty` bleibt, `hyphens: auto` ist wieder raus.
     *
     * Gemessen an der fertigen Seite: die deutsche Silbentrennung greift
     * auch nach Produktnamen und macht aus „OpenID Connect“ ein
     * „Ope-nID Connect“. Einen Namen, den der Leser beim Anbieter genau so
     * wiederfinden muss, darf man nicht trennen — und welche Wörter Namen
     * sind, weiss der Browser nicht.
     *
     * Der Preis ist ein etwas unruhigerer rechter Rand. Der ist billiger.
     */
    text-wrap: pretty;
}

.tw-sso-satz {
    max-width: 72ch;
}

/* Der senkrechte Strich haelt die vier Teile einer Adresse optisch
   zusammen - sonst zerfaellt der Kasten in acht lose Zeilen. */
.tw-sso-adresse {
    padding-left: 12px;
    border-left: 3px solid #dfe3e9;
}

.tw-sso-adresse .tw-sso-name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2328;
}

.tw-sso-adresse .tw-sso-wozu {
    max-width: 72ch;
}

/* Wie die Adresse beim Anbieter HEISST. Der wichtigste Teil des Kastens -
   siehe den Kommentar bei `adressZeile` in views/tenant/sso.js. */
.tw-sso-fundstelle {
    position: relative;
    font-size: 12.5px;
    line-height: 1.5;
    color: #4b5563;
}
.tw-sso-fundstelle::before {
    content: '›';
    position: absolute;
    left: -12px;
    color: #9aa1ac;
}

/* Die Zwischenueberschriften im Anbieter-Formular. */
.tw-sso-abschnitt {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-top: 4px;
}

.tw-sso-wert {
    display: block;
    padding: 8px 11px;
    background: #f6f7f9;
    border: 1px solid var(--widget-border-color, #dfe3e9);
    border-radius: var(--widget-border-radius, 4px);
    font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
    font-size: 13px;
    color: #1f2328;
    /* Ein Klick markiert die ganze Adresse - fuer alle, bei denen die
       Zwischenablage des Browsers gesperrt ist. */
    user-select: all;
    overflow-x: auto;
    white-space: nowrap;
}

/* ------------------------------------------------ Die Karte je Anbieter */

.tw-sso-karte {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--widget-border-color, #dfe3e9);
    border-radius: var(--widget-border-radius, 4px);
}

/* Ein ausgeschalteter Anbieter steht blasser da - er ist vorhanden, aber
   er tut nichts, und das soll man auf einen Blick sehen. */
.tw-sso-karte.tw-sso-aus {
    background: #fbfbfc;
}
.tw-sso-karte.tw-sso-aus .tw-sso-symbol,
.tw-sso-karte.tw-sso-aus .tw-sso-titel {
    opacity: .55;
}

.tw-sso-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    font-size: 16px;
    color: #fff;
}
/* Die Farbe trennt die beiden Verfahren, ohne dass man das Wort lesen
   muss - und sie ist dieselbe wie auf der Anmeldeseite. */
.tw-sso-symbol.tw-sso-oidc { background: #0f6cbd; }
.tw-sso-symbol.tw-sso-saml { background: #5b6472; }

.tw-sso-titel {
    font-size: 14px;
    font-weight: 600;
    color: #1f2328;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-sso-verfahren {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    background: #eef0f4;
    border-radius: 3px;
    padding: 2px 7px;
    white-space: nowrap;
}

.tw-sso-quelle {
    font-size: 12px;
    color: #6b7280;
    font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-sso-konten {
    font-size: 12px;
    color: #6b7280;
}

/* Die letzte Probe ist der einzige Hinweis darauf, ob eine Anbindung noch
   traegt. Ein abgelaufenes Zertifikat faellt sonst erst auf, wenn sich
   jemand nicht mehr anmelden kann - deshalb steht sie hier und nicht
   hinter einem Klick. */
.tw-sso-probe    { font-size: 12px; }
.tw-sso-probe-ok  { color: #1a7f37; }
.tw-sso-probe-weg { color: #b3261e; }
.tw-sso-probe-nie { color: #9aa1ac; }

/* Plattform > Demo-Wiki: das Zeichen vor den drei Spalten der Rücksetz-Karte. */
.tw-demo-spalte-symbol { color: #6b7280; margin-right: 4px; }

/* --------------------------------------------------- Ratengrenzen als Tabelle
 * Fuenf Spalten: Name | Anfragen | Minuten | Herkunft | Pfeil. Die
 * Zahlenfelder sind schmal - eine Grenze hat drei bis vier Stellen. */
.tw-rate-tabelle {
    width: 100%;
    margin: 12px 0 4px;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    overflow: hidden;
}
.tw-rate-zeile {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 110px 110px 120px 44px 28px;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-top: 1px solid #eef0f2;
}
.tw-rate-zeile:first-child { border-top: 0; }
.tw-rate-zeile:nth-child(even):not(.tw-rate-kopf) { background: #fafbfc; }
.tw-rate-gesetzt { background: #f0f7ff !important; }
.tw-rate-kopf {
    background: #f3f4f7;
    font-size: 12px;
    font-weight: 600;
    color: #57606a;
    padding: 8px 12px;
}
.tw-rate-kopf .tw-rate-titel { font-size: 13px; color: #1f2328; }
.tw-rate-kopf .tw-rate-titel span { font-weight: 400; }
.tw-rate-name {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: #1f2328;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tw-rate-input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    text-align: right;
    background: #fff;
}
.tw-rate-input:focus { outline: 2px solid #b6d4fe; border-color: #0969da; }
.tw-rate-pfeil { display: flex; justify-content: flex-end; }

/* ----------------------------------------------------- Das Fragezeichen
 * Die Erklaerung zu einem Wert, aufgeklappt unter dem Feld - in der
 * Ratentabelle ueber alle Spalten. */
.tw-sec-blase {
    margin-top: 6px;
    padding: 8px 12px;
    border-left: 3px solid #b6d4fe;
    background: #f6f9fe;
    border-radius: 0 6px 6px 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #374151;
}
.tw-rate-zeile .tw-sec-blase { grid-column: 1 / -1; margin: 2px 0 4px; }
.tw-rate-zeile .widget-badge { justify-self: start; }
.tw-hilfe-zeichen.tw-hilfe-offen { color: #0969da; }
.tw-sec-setting-rechts .tw-hilfe-zeichen { margin: 0; }

/* ===================================================== Ticketsystem-Makros

   Mantis und Redmine teilen sich diese Regeln - welches System
   dahintersteht, sieht man dem Kasten nicht an und soll man auch nicht:
   fuer den Leser ist es ein Vorgang, egal woher.

   Nahe an den Git-Makros gehalten, aber mit eigenen Klassennamen: die
   beiden teilen sich kein Markup, und geteilte Klassen haetten bedeutet,
   dass eine Aenderung an der Aufgabenliste die Vorgangsliste mitnimmt. */

.tw-tracker {
    border: 1px solid var(--tw-border, #d8dee4);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 12px 0;
    background: #fff;
}

.tw-tracker-titel {
    font-weight: 600;
    margin-bottom: 8px;
}

ul.tw-tracker-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

li.tw-tracker-zeile {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid #eef1f4;
}

li.tw-tracker-zeile:last-child {
    border-bottom: 0;
}

.tw-tracker-mitte {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.tw-tracker-rechts {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: #57606a;
}

.tw-tracker-titel-link {
    color: inherit;
    text-decoration: none;
}

.tw-tracker-titel-link:hover {
    text-decoration: underline;
}

/* Zeichen UND Wort: das Wort kommt aus dem Ticketsystem und wird nicht
   uebersetzt, das Zeichen fasst auf offen/erledigt zusammen. */
.tw-tracker-status {
    flex: 0 0 auto;
    font-size: 11px;
    white-space: nowrap;
}

.tw-tracker-status-open {
    color: #15803d;
}

.tw-tracker-status-closed {
    color: #6b7280;
}

.tw-tracker-prio,
.tw-tracker-wer,
.tw-tracker-dienst {
    white-space: nowrap;
}

.tw-tracker-marken {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tw-tracker-marke {
    font-size: 10.5px;
    line-height: 1.5;
    padding: 0 6px;
    border-radius: 9px;
    /* Wie bei den Git-Marken: die Farbe kommt aus dem fremden System, der
       Text bleibt dunkel - die Farben dort sind oft hell. */
    background: var(--tw-tracker-marke, #e5e7eb);
    color: #1f2328;
    border: 1px solid rgba(0, 0, 0, 0.10);
}

.tw-tracker-meta,
.tw-tracker-notiz-kopf {
    font-size: 11px;
    color: #57606a;
    margin: 4px 0;
}

.tw-tracker-text {
    white-space: pre-wrap;
    font-size: 13px;
    margin: 6px 0;
}

.tw-tracker-notizen {
    border-top: 1px solid #eef1f4;
    margin-top: 8px;
    padding-top: 6px;
}

.tw-tracker-notiz {
    border-left: 2px solid #e5e7eb;
    padding-left: 8px;
    margin: 6px 0;
}

.tw-tracker-zahlen {
    display: flex;
    gap: 18px;
    font-size: 12px;
    color: #57606a;
    margin: 8px 0;
}

.tw-tracker-zahlen strong {
    font-size: 15px;
    color: #1f2328;
}

.tw-tracker-projekt-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-weight: 600;
}

.tw-tracker-dienst {
    font-size: 11px;
    font-weight: 400;
    color: #8993a4;
}

.tw-tracker-stand {
    font-size: 10.5px;
    color: #8993a4;
    margin-top: 8px;
}

/* Die Auswahlliste im Einfuegedialog. */
.tw-dialog-auswahl {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #d8dee4;
    border-radius: 6px;
}

.tw-dialog-zeile {
    display: flex;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid #eef1f4;
    padding: 6px 8px;
    cursor: pointer;
    font: inherit;
}

.tw-dialog-zeile:last-child {
    border-bottom: 0;
}

.tw-dialog-zeile:hover {
    background: #f3f6f8;
}

.tw-dialog-zeile-key {
    flex: 0 0 auto;
    color: #57606a;
    font-variant-numeric: tabular-nums;
}

.tw-dialog-zeile-titel {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die Darstellungsfelder im Bilddialog: zwei Spalten, unten buendig. */
.tw-bild-zeile {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px 16px;
    align-items: start;
    width: 100%;
}
.tw-bild-zeile .widget-checkbox,
.tw-bild-zeile .widget-checkbox-container { padding-bottom: 7px; }

/* --------------------------------------- Bild einfuegen: die Ablageflaeche
 * Die Regel fuer .tw-import-drop weiter oben (30 Punkte hoch) gilt dem
 * Import-Assistenten, wo die Flaeche neben einem Eingabefeld steht. Im
 * Bilddialog traegt sie zwei Zeilen Text und braucht Hoehe und Luft. */
.tw-import-drop.tw-bild-drop {
    height: auto;
    min-height: 76px;
    padding: 14px 18px;
    justify-content: center;
    gap: 16px;
    margin: 4px 0 8px;
}
.tw-import-drop.tw-bild-drop > i { font-size: 26px; }
.tw-bild-drop .tw-import-drop-text { white-space: normal; line-height: 1.4; overflow: visible; }
.tw-bild-drop .tw-import-drop-note { font-size: 12px; color: #6b7280; margin-top: 2px; }

/* Die beiden Wege zu einem neuen Bild - nebeneinander, mit Abstand. */
.tw-bild-quellen { margin: 2px 0 8px; flex-wrap: wrap; }
.tw-bild-quellen .widget-button { width: auto; }
/* Der Vorschaukasten lief mit width:100% plus Innenabstand ueber den
 * rechten Rand des Fensters hinaus. */
.tw-bild-vorschau { box-sizing: border-box; }

/* ============================ Bauwesen, Betrieb und Seafile

   Acht Makros aus fuenf Systemen, eine Bauweise: eine Karte mit Kopfzeile,
   Kennzahlen und wahlweise einer Liste darunter. Eigene Klassennamen
   (`tw-sys-`), weil sie sich mit den Git- und Ticketsystem-Makros kein
   Markup teilen - geteilte Klassen haetten bedeutet, dass eine Aenderung
   an der Aufgabenliste die Cluster-Uebersicht mitnimmt. */

.tw-jenkins,
.tw-sonar,
.tw-zabbix,
.tw-proxmox,
.tw-seafile {
    margin: 12px 0;
}

.tw-sys-titel {
    font-weight: 600;
    margin-bottom: 6px;
}

.tw-sys-karte {
    border: 1px solid var(--tw-border, #d8dee4);
    border-radius: 6px;
    padding: 10px 12px;
    background: #fff;
}

/*
 * Der graue Kopf ueber einem Ordnerbaum (Nextcloud, Seafile) - derselbe
 * Grauton wie die Makro-Leiste im Editor (siehe editor.css,
 * `.tw-macro-bar`), damit „das ist ein Makro" auch in der Leseansicht
 * wiedererkennbar bleibt. Titel und Konto in einer Zeile, der Pfad
 * darunter - ein alleinstehendes „/" sagt niemandem etwas.
 */
.tw-sys-kopfrahmen {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 12px;
    background: #f1f2f4;
    border: 1px solid var(--tw-border, #d8dee4);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    font-size: 12.5px;
    color: #44546f;
}
.tw-sys-kopfrahmen-oben {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
}
.tw-sys-kopfrahmen-titel { font-weight: 600; }
.tw-sys-kopfrahmen-titel > i { color: #6b7280; width: 14px; text-align: center; }
.tw-sys-kopfrahmen-konto { color: #8993a4; white-space: nowrap; }
.tw-sys-kopfrahmen-pfad { color: #8993a4; }

/* Sitzt direkt unter `.tw-sys-kopfrahmen` - oben eckig, damit beide als
   eine Karte wirken statt als zwei uebereinandergestapelte. */
.tw-sys-karte-ohne-oben { border-radius: 0 0 6px 6px; }

.tw-sys-kopf {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.tw-sys-link {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.tw-sys-link:hover {
    text-decoration: underline;
}

/* --- Zustaende ---

   Fuenf Abstufungen statt zwei. Bei einem Build ist „abgebrochen" etwas
   anderes als „fehlgeschlagen", und bei einem Problem ist „Warnung" etwas
   anderes als „Katastrophe". Wer das zusammenwirft, macht aus der Liste
   eine, die man nicht mehr lesen kann, ohne jede Zeile anzuklicken. */

.tw-sys-zustand {
    flex: 0 0 auto;
    font-size: 11px;
    white-space: nowrap;
}

.tw-sys-ok     { color: #15803d; }
.tw-sys-warn   { color: #b45309; }
.tw-sys-gelb   { color: #a16207; }
.tw-sys-fehler { color: #b91c1c; }
.tw-sys-grau   { color: #6b7280; }
.tw-sys-lauf   { color: #1d4ed8; }

/* Ein laufender Build dreht sich - das ist die einzige Stelle, an der
   eine Bewegung etwas aussagt statt nur zu stoeren. */
.tw-sys-lauf .fa-spinner {
    animation: tw-sys-dreh 1.4s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .tw-sys-lauf .fa-spinner { animation: none; }
}

.tw-sys-meta {
    font-size: 11px;
    color: #57606a;
    margin: 3px 0;
}

.tw-sys-warnung {
    color: #b45309;
}

.tw-sys-text {
    font-size: 13px;
    white-space: pre-wrap;
    margin: 6px 0;
}

/* --- Kennzahlen --- */

.tw-sys-zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 8px 0;
}

.tw-sys-zahl {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.tw-sys-zahl strong {
    font-size: 15px;
    color: #1f2328;
    font-variant-numeric: tabular-nums;
}

.tw-sys-zahl span {
    font-size: 10.5px;
    color: #57606a;
}

/* --- Balken --- */

.tw-sys-balken {
    height: 5px;
    border-radius: 3px;
    background: #eef1f4;
    overflow: hidden;
    margin: 3px 0;
}

.tw-sys-balken-fuell {
    height: 100%;
    background: #2f81f7;
}

/* Ab 90 Prozent wird der Balken rot. Eine Auslastung, die gleich an die
   Decke stoesst, soll man sehen, ohne die Zahl zu lesen. */
.tw-sys-balken-fuell.tw-sys-voll {
    background: #b91c1c;
}

/* --- Listen --- */

ul.tw-sys-liste {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

li.tw-sys-zeile {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    border-top: 1px solid #eef1f4;
}

li.tw-sys-zeile-breit {
    align-items: flex-start;
}

.tw-sys-mitte {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

li.tw-sys-zeile-breit .tw-sys-mitte {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

.tw-sys-rechts {
    flex: 0 0 auto;
    font-size: 11px;
    color: #57606a;
    white-space: nowrap;
}

/* --- Ordnerbaum (Nextcloud, Seafile) ---

   Eigene Klassen statt `tw-sys-liste`/`tw-sys-zeile`: die gehoeren einer
   flachen Zeile, deren ganzer Inhalt eine einzige Flex-Reihe ist. Ein
   Baumknoten braucht darunter Platz fuer einen eingerueckten Unterbaum -
   dafuer steht die Flex-Reihe in einem eigenen Kopf-Element, und das `li`
   selbst bleibt ein schlichter Block. */

ul.tw-sys-baum {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

ul.tw-sys-baum ul.tw-sys-baum {
    margin: 0;
}

li.tw-sys-baum-knoten {
    border-top: 1px solid #eef1f4;
}

.tw-sys-baum-kopf {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
}

.tw-sys-toggle {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background: none;
    color: #57606a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tw-sys-toggle i {
    transition: transform 0.12s ease;
}

/* Der Pfeil zeigt zu, statt sich zu verstecken - "aufgeklappt" bedeutet
   hier eine Drehung, nicht ein anderes Symbol. */
.tw-sys-offen > .tw-sys-baum-kopf .tw-sys-toggle i {
    transform: rotate(90deg);
}

.tw-sys-toggle-platz {
    flex: 0 0 auto;
    width: 16px;
}

.tw-sys-unterbaum {
    display: none;
    margin-left: 24px;
    border-left: 1px solid #eef1f4;
    padding-left: 8px;
}

.tw-sys-offen > .tw-sys-unterbaum {
    display: block;
}

.tw-sys-unterbaum-hinweis {
    margin-left: 24px;
    padding: 2px 0 6px;
    font-size: 11px;
    font-style: italic;
    color: #57606a;
}

.tw-sys-marke {
    font-size: 10.5px;
    line-height: 1.5;
    padding: 0 6px;
    border-radius: 9px;
    background: #e5e7eb;
    color: #1f2328;
}

.tw-sys-quelle {
    font-size: 11px;
    color: #57606a;
    margin-bottom: 4px;
}

.tw-sys-stand {
    font-size: 10.5px;
    color: #8993a4;
    margin-top: 6px;
}

/* Der Pfad ueber dem Dateibrowser im Seafile-Dialog. */
.tw-dialog-pfad {
    font-size: 11px;
    color: #57606a;
    padding: 2px 0 4px;
    font-family: ui-monospace, monospace;
}

/* Bildersuche: „Mehr laden" unter dem Raster. */
.tw-bs-mehr-zeile { text-align: center; padding: 12px 0 4px; }
.tw-bs-mehr-knopf {
    font: inherit; font-size: 13px;
    padding: 7px 18px;
    border: 1px solid #d0d7de; border-radius: 6px;
    background: #f6f8fa; color: #1f2328; cursor: pointer;
}
.tw-bs-mehr-knopf:hover { background: #eef1f4; }
.tw-bs-mehr-knopf:disabled { opacity: .6; cursor: default; }

/* Die Ankreuzliste im Graphen-Dialog - dieselbe Zeile wie der
   Dateibrowser, nur mit einem Kaestchen davor. */
label.tw-dialog-zeile {
    align-items: center;
}

label.tw-dialog-zeile input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}

/* Ein Graph soll die Spalte fuellen, aber nie ueberlaufen. */
.tw-zabbix-graph .tw-chart svg {
    max-width: 100%;
    height: auto;
}

/* ================================================== Sprachnotiz

   Abspieler, Eckdaten und eine zusammenklappbare Abschrift. Der Abspieler
   ist der des Browsers - eine eigene Bedienleiste waere huebscher und
   koennte weniger: Tastatursteuerung, Geschwindigkeit und die Ausgabe auf
   ein anderes Geraet bringt der Browser mit. */

.tw-voice {
    margin: 12px 0;
    /*
     * EINE LESBARE BREITE, nicht die ganze Seite.
     *
     * Eine Abschrift ist Fliesstext, und Fliesstext ueber 1240 Punkte
     * Spaltenbreite liest niemand gern - das Auge findet den Anfang der
     * naechsten Zeile nicht mehr. 680 Punkte sind bei 13 Punkten Schrift
     * rund siebzig Zeichen je Zeile, das uebliche Mass fuer Lesetext.
     *
     * Das ist die VORGABE. Wer es anders braucht, stellt Breite und Hoehe
     * am Makro ein; die Anzeige schreibt sie dann als `style` an dieses
     * Element und an den Textkasten.
     *
     * Die HOEHE gilt der Abschrift, nicht der Karte: gescrollt wird nur
     * der Text - Titel und Abspieler bleiben stehen.
     */
    max-width: 680px;
}

.tw-voice-titel {
    font-weight: 600;
    font-size: 14px;
    color: #1f2328;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Ein kleines Mikrofon vor dem Titel - damit man auf einer langen Seite
   auf einen Blick sieht, dass hier etwas zu HOEREN ist. */
.tw-voice-titel::before {
    content: '130';                       /* fa-microphone */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 12px;
    color: #6366f1;
}

.tw-voice-karte {
    border: 1px solid var(--tw-border, #d8dee4);
    border-radius: 8px;
    padding: 12px 14px;
    background: #fff;
}

/*
 * Der Abspieler steht UNTEN und soll das auch aussehen: eine schmale
 * Leiste, abgesetzt durch eine Linie darueber, nicht ein zweiter Kasten.
 */
.tw-voice-player {
    width: 100%;
    display: block;
    height: 36px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eef1f4;
    box-sizing: content-box;
}

.tw-voice-meta {
    font-size: 11px;
    color: #57606a;
    margin-top: 6px;
}

/*
 * Die Abschrift: eine Kopfzeile, die zugleich der Schalter ist, und
 * darunter der Kasten mit dem Text.
 */
.tw-voice-abschrift {
    margin-top: 2px;
}

.tw-voice-abschrift-kopf {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 0 6px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #57606a;
    cursor: pointer;
    text-align: left;
}

.tw-voice-abschrift-kopf:hover { color: #1f2328; }

/* Der Pfeil dreht sich, statt zu springen - die Bewegung sagt, dass es
   dasselbe Ding ist, das sich oeffnet. */
.tw-voice-pfeil {
    font-size: 10px;
    transition: transform .15s ease;
    transform: rotate(90deg);
}

.tw-voice-zu .tw-voice-pfeil { transform: rotate(0deg); }

/* Zugeklappt verschwindet nur der TEXT. Titel, Kopfzeile und Abspieler
   bleiben stehen - die Karte behaelt ihre Gestalt. */
.tw-voice-zu .tw-voice-text,
.tw-voice-zu .tw-voice-abschrift .tw-voice-meta { display: none; }

.tw-voice-zahl {
    color: #8993a4;
}

/* Die Abschrift ist Fliesstext, kein Code - aber die Absaetze der
   Spracherkennung sollen erhalten bleiben. */
.tw-voice-text {
    white-space: pre-wrap;
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 8px;
    /*
     * DIE VORGABE, wenn am Makro keine Hoehe eingestellt ist. Ein Rand
     * und ein eigener Grund sagen, dass hier ein Kasten ist, in dem
     * gescrollt wird - ohne ihn sieht abgeschnittener Text nach einem
     * Fehler aus.
     */
    max-height: 260px;
    overflow-y: auto;
    padding: 8px 10px;
    /*
     * Damit die eingestellte Hoehe DEN KASTEN meint und nicht den Inhalt
     * darin. Ohne das ergaeben 180px gemessene 198 - Polsterung und Rand
     * kaemen obendrauf, und die Zahl im Dialog waere ungefaehr.
     */
    box-sizing: border-box;
    border: 1px solid var(--tw-border, #d8dee4);
    border-radius: 4px;
    background: #fbfcfd;
}

.tw-voice-stand {
    font-size: 10.5px;
    color: #8993a4;
    margin-top: 6px;
}

/* --- Der Dialog --- */

.tw-voice-stand,
.tw-voice-vorschau .tw-dialog-note {
    margin: 4px 0;
}

.tw-voice-vorschau audio {
    width: 100%;
}

/* Waehrend die Aufnahme laeuft, soll man das sehen, ohne hinzuschauen. */
.tw-voice-laeuft {
    color: #b91c1c;
    font-weight: 600;
}

.tw-voice-laeuft::before {
    content: "\25CF";
    margin-right: 6px;
    animation: tw-voice-blink 1.2s steps(2, start) infinite;
}

@keyframes tw-voice-blink {
    to { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .tw-voice-laeuft::before { animation: none; }
}

.tw-voice-warnung {
    color: #b45309;
}

.tw-dialog-trenner {
    border: 0;
    border-top: 1px solid #eef1f4;
    margin: 4px 0;
}

.tw-dialog-h4 {
    font-size: 13px;
    margin: 0;
}


/* ---------------------------------------------------------------------
 * Die Arbeitsanzeige im Sprachnotiz-Dialog.
 *
 * Sie steht unter dem Knopf und sagt, dass etwas laeuft und wie lange
 * schon. Bewusst schlicht: sie soll auffallen, solange sie da ist, und
 * nicht mit dem Inhalt des Dialogs um Aufmerksamkeit streiten.
 */
.tw-voice-arbeit-block { display: flex; flex-direction: column; gap: 4px; }
.tw-voice-arbeit {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary, #555);
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.tw-voice-arbeit > i { color: #6366f1; }
/* Die Uhr in Ziffern gleicher Breite - sonst zappelt die Zeile im
   Sekundentakt, weil die 1 schmaler ist als die 8. */
.tw-voice-arbeit-uhr {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: #6b7280;
}


/* =====================================================================
 * Die ERP-Makros (Odoo und Flectra).
 *
 * Eine ruhige Karte, in der die Zahlen rechts stehen und die Begriffe
 * links - so liest man eine Rechnung, und so soll sie auch im Wiki
 * aussehen. Die Breite ist begrenzt: eine Kundenkarte ueber 1240 Punkte
 * ist ein Formular, kein Datensatz.
 */
.tw-erp { margin: 12px 0; max-width: 760px; }

.tw-erp-titel { font-weight: 600; font-size: 14px; margin-bottom: 6px; }

.tw-erp-karte {
    border: 1px solid var(--tw-border, #d8dee4);
    border-radius: 8px;
    background: #fff;
    padding: 12px 14px;
}

.tw-erp-kopf {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 8px; margin-bottom: 10px;
    border-bottom: 1px solid #eef1f4;
}
.tw-erp-kopf > i { color: #6366f1; }
.tw-erp-name { font-weight: 600; font-size: 14px; }
.tw-erp-name a { color: inherit; text-decoration: none; }
.tw-erp-name a:hover { text-decoration: underline; }
.tw-erp-rolle { font-size: 11px; color: #57606a; margin-left: auto; }

/* Zwei Spalten, solange Platz ist - eine Kundenkarte hat kurze Werte und
   viele davon. */
.tw-erp-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2px 18px;
}
.tw-erp-zeile { display: flex; gap: 8px; padding: 3px 0; font-size: 13px; }
.tw-erp-feld { color: #57606a; min-width: 110px; flex: 0 0 110px; }
.tw-erp-wert { color: #1f2328; }

.tw-erp-untertitel {
    margin: 12px 0 4px; font-size: 12px; font-weight: 600; color: #57606a;
}

.tw-erp-tabelle { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tw-erp-tabelle th {
    text-align: left; font-weight: 600; color: #57606a;
    border-bottom: 1px solid #eef1f4; padding: 4px 6px;
}
.tw-erp-tabelle td { padding: 4px 6px; border-bottom: 1px solid #f4f6f8; }
.tw-erp-tabelle tr:last-child td { border-bottom: 0; }
/* Zahlen gehoeren rechts und in Ziffern gleicher Breite - sonst tanzen
   die Betraege in der Spalte. */
.tw-erp-rechts { text-align: right; font-variant-numeric: tabular-nums; }
.tw-erp-positionen { margin-top: 10px; }

.tw-erp-marke {
    font-size: 11px; padding: 1px 7px; border-radius: 10px;
    background: #eef1f4; color: #57606a; white-space: nowrap;
}
.tw-erp-marke-posted, .tw-erp-marke-sale, .tw-erp-marke-done,
.tw-erp-marke-paid { background: #e6f4ea; color: #1e7b34; }
.tw-erp-marke-draft, .tw-erp-marke-sent { background: #fff4e5; color: #92400e; }
.tw-erp-marke-cancel, .tw-erp-marke-reversed { background: #fdecea; color: #b3261e; }

.tw-erp-offen { color: #b3261e; font-weight: 600; }
.tw-erp-stand { color: #6b7280; font-weight: 400; font-size: 11px; }
.tw-erp-text {
    margin-top: 10px; font-size: 13px; color: #1f2328; white-space: pre-wrap;
}

.tw-erp-geholt {
    font-size: 10.5px; color: #6b7280; margin-top: 6px;
}

/* --- Der Einfuegedialog --- */
.tw-erp-treffer {
    max-height: 260px; overflow-y: auto;
    border: 1px solid var(--tw-border, #d8dee4); border-radius: 6px;
    background: #fbfcfd;
}
.tw-erp-treffer-zeile {
    display: flex; flex-direction: column; gap: 2px; width: 100%;
    padding: 7px 10px; background: none; border: 0; border-bottom: 1px solid #eef1f4;
    font: inherit; text-align: left; cursor: pointer;
}
.tw-erp-treffer-zeile:last-child { border-bottom: 0; }
.tw-erp-treffer-zeile:hover { background: #f2f5ff; }
.tw-erp-treffer-aktiv { background: #eef2ff; box-shadow: inset 3px 0 0 #6366f1; }
.tw-erp-treffer-name { font-size: 13px; color: #1f2328; }
.tw-erp-treffer-zusatz { font-size: 11px; color: #6b7280; }
.tw-erp-gewaehlt { font-size: 13px; color: #1e7b34; }
.tw-erp-gewaehlt > i { margin-right: 5px; }
.tw-erp-fehler { color: #b3261e; }

/* ------------------------------------------- Breite und Hoehe eines Makros
 *
 * Gesetzt wird beides als Stil am aeusseren Element (siehe
 * DocRenderer::mitGroesse und die NodeView im Editor). Hier steht nur, was
 * sonst noch dazugehoert: ein Kasten mit fester Hoehe braucht einen eigenen
 * Rollbalken, und sein Inhalt darf nicht darueber hinauslaufen.
 */
[data-frame-h] {
    overflow: auto;
}

[data-frame-w] > img,
[data-frame-w] > .tw-chart,
[data-frame-w] svg {
    max-width: 100%;
}

/* ------------------------------------------------------ PDF-Export
 * Links Bereiche und Baum mit zwei Kaestchen je Seite, rechts die Auswahl. */
.tw-export-spalten {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
    gap: 16px;
    width: 100%;
    align-items: start;
}
.tw-export-baum { margin-top: 10px; max-height: 70vh; overflow: auto; }
.tw-export-ast { list-style: none; margin: 0; padding: 0; }
.tw-export-ast .tw-export-ast { padding-left: 22px; }
.tw-export-zeile {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13.5px;
}
.tw-export-zeile:hover { background: #f3f4f7; }
.tw-export-gewaehlt > .tw-export-zeile { background: #eef4fc; }
.tw-export-zeile input[type="checkbox"] { margin: 0; cursor: pointer; }
.tw-export-zeile input.tw-export-alle { margin-right: 4px; accent-color: #0969da; }
.tw-export-zeile input:disabled { visibility: hidden; }
.tw-export-icon { color: #8b949e; font-size: 12px; width: 14px; text-align: center; }
.tw-export-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-export-anzahl {
    margin-left: auto; font-size: 11px; color: #57606a;
    background: #eef0f2; border-radius: 10px; padding: 0 7px;
}
.tw-export-leer { color: #6b7280; font-size: 13px; padding: 10px 4px; }
.tw-export-warnung { color: #a12222; font-size: 13px; }
.tw-export-summe { font-weight: 600; margin: 4px 0 8px; }
.tw-export-gruppe { margin-bottom: 10px; }
.tw-export-gruppe-titel { font-size: 12px; color: #57606a; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.tw-export-gruppe ol { margin: 0; padding-left: 22px; }
.tw-export-gruppe li { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 13.5px; }
.tw-export-gruppe li span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-export-weg {
    border: 0; background: none; color: #9ca3af; cursor: pointer; padding: 2px 4px; border-radius: 4px;
}
.tw-export-weg:hover { color: #a12222; background: #fbeaea; }

/* ---------------------------------------------------- Druckansicht
 * Eine Wiki-Seite je Abschnitt; nach jedem Abschnitt eine neue PDF-Seite. */
.tw-druck { width: 100%; background: #fff; }
/* Umbruch VOR jeder weiteren Seite, nicht NACH jeder: ein `break-after`
 * hinter einem Abschnitt, der die Seite bis zum Rand fuellt, brachte in
 * Chromium eine leere Seite obendrauf. */
.tw-druck-seite { padding: 0; }
.tw-druck-seite + .tw-druck-seite { page-break-before: always; break-before: page; }
.tw-druck-kopf { border-bottom: 2px solid #1f2328; margin: 0 0 18px; padding: 0 0 8px; }
.tw-druck-bereich { font-size: 12px; color: #57606a; text-transform: uppercase; letter-spacing: .04em; }
.tw-druck-titel { font-size: 26px; margin: 2px 0 4px; }
.tw-druck-stand { font-size: 12px; color: #57606a; }
.tw-druck-leer { color: #6b7280; font-style: italic; }
/* Auf dem Bildschirm (wer die Adresse direkt aufruft) etwas Rand. */
body:not(.tw-druck-modus) .tw-druck { padding: 0; }
.tw-druck-modus .tw-druck { padding: 24px 32px; max-width: 900px; }
@media print {
    .tw-druck-modus .tw-druck { padding: 0; max-width: none; }
    .tw-druck-seite + .tw-druck-seite { page-break-before: always; break-before: page; }
}

/* ---------------------------------------------- Druck ohne Tonerfresser
 * Chromium druckt Hintergruende mit (print_background, noetig fuer die
 * farbigen Marken). Was am Bildschirm Flaechen ordnet - der graue Grund
 * der Shell, die Karte, Code-Kaesten, Tabellenkoepfe, Inhaltsverzeichnis,
 * Hinweis-Panels, die Koepfe der Connector-Makros - wird im Druck weiss
 * und bekommt statt der Flaeche einen duennen Rahmen. Kleine Marken
 * (Status, Fortschrittsbalken, Hervorhebung) behalten ihre Farbe: sie
 * tragen Bedeutung und kosten kaum Toner. */
body.tw-druck-modus,
.tw-druck-modus .tw-content-host,
.tw-druck-modus .widget-app-shell,
.tw-druck-modus .widget-app-shell-content { background: #fff !important; }

.tw-druck-inhalt pre,
.tw-druck-inhalt code,
.tw-druck-inhalt th,
.tw-druck-inhalt .tw-toc,
.tw-druck-inhalt .tw-panel,
.tw-druck-inhalt .tw-excerpt-include,
.tw-druck-inhalt .tw-git-quelle,
.tw-druck-inhalt .tw-git-sha,
.tw-druck-inhalt .tw-git-zweig,
.tw-druck-inhalt .tw-jira-kopf,
.tw-druck-inhalt .tw-jira-stand,
.tw-druck-inhalt .tw-bexio-kopf,
.tw-druck-inhalt .tw-bexio-kennzahl:not(.tw-bexio-warn),
.tw-druck-inhalt .tw-abacus-kopf,
.tw-druck-inhalt .tw-abacus-fuss,
.tw-druck-inhalt .tw-event-day-head,
.tw-druck-inhalt .tw-quelle-kopf,
.tw-druck-inhalt .tw-sys-balken,
.tw-druck-inhalt .tw-sys-marke,
.tw-druck-inhalt .tw-contact-initials,
.tw-druck-inhalt .tw-ansicht-knopf { background: transparent !important; }

.tw-druck-inhalt pre,
.tw-druck-inhalt .tw-toc { border: 1px solid #d0d7de; }
/* Panels behalten ihren farbigen linken Balken; der Rahmen kommt als
 * innerer Schatten dazu, damit er den Balken nicht ueberschreibt. */
.tw-druck-inhalt .tw-panel,
.tw-druck-inhalt .tw-excerpt-include { box-shadow: inset 0 0 0 1px #d0d7de; }
.tw-druck-inhalt th { border-bottom: 1.5px solid #8b949e; }
.tw-druck-inhalt .tw-sys-balken,
.tw-druck-inhalt .tw-sys-marke,
.tw-druck-inhalt .tw-contact-initials { box-shadow: inset 0 0 0 1px #c0c6cd; }
/* Kaesten, die am Bildschirm scrollen (Code aus Git, hohe Code-Bloecke),
 * muessen im Druck ganz zu sehen sein: kein Scrollen auf Papier. */
.tw-druck-inhalt pre {
    overflow: visible !important;
    max-height: none !important;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* =====================================================================
 * Rundgang (core/tour.js, views/common/rundgaenge.js)
 *
 * Drei Ebenen unter den Modalfenstern (die ab 9999 liegen): so geht die
 * Hilfe, die eine Karte über „Mehr dazu" öffnet, über den Rundgang.
 *
 * Das Licht ist ein Kasten mit riesigem Schatten - der Schatten ist die
 * Abdunkelung, das Loch darin ist das Ziel. Der Schleier darunter ist
 * durchsichtig und nimmt nur die Klicks; ohne Ziel wird er selbst dunkel.
 * ===================================================================== */
.tw-tour-schleier {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: transparent;
    transition: background-color 0.2s;
}

.tw-tour-schleier.tw-tour-schleier-dunkel {
    background: rgba(15, 23, 42, 0.55);
}

.tw-tour-licht {
    position: fixed;
    z-index: 9001;
    border-radius: 8px;
    box-shadow: 0 0 0 3px var(--widget-primary-color, #2563eb),
                0 0 0 9999px rgba(15, 23, 42, 0.55);
    pointer-events: none;
    transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}

.tw-tour-licht.tw-tour-licht-aus {
    display: none;
}

/* Die Karte: links die Figur, rechts der Inhalt. */
.tw-tour-karte {
    position: fixed;
    z-index: 9002;
    display: flex;
    width: 600px;
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    color: #1f2328;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35), 0 2px 8px rgba(15, 23, 42, 0.12);
    font-size: 14.5px;
    line-height: 1.6;
    transition: opacity 0.15s, left 0.25s ease, top 0.25s ease;
}

.tw-tour-karte.tw-tour-karte-breit {
    width: 700px;
}

.tw-tour-karte.tw-tour-wechsel {
    opacity: 0.35;
}

/* Linke Spalte - derselbe Blauton wie der Grund des Bildes, damit die
 * Figur nicht in einem Kasten steht, sondern in der Spalte. */
.tw-tour-seite {
    flex: 0 0 170px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(180deg, #f3f8ff 0%, #e8f4ff 55%);
    border-right: 1px solid #dbe7f7;
}

.tw-tour-bild {
    display: block;
    width: 170px;
    height: auto;
}

.tw-tour-haupt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 20px 26px 18px;
    overflow: auto;
}

.tw-tour-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tw-tour-zaehler {
    font-size: 12px;
    font-weight: 600;
    color: var(--widget-primary-color, #2563eb);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tw-tour-kopf .widget-button.tw-tour-zu {
    margin: 0 -8px 0 0;
    padding: 4px 8px;
    border: none;
    background: transparent;
    color: #6b7280;
}

.tw-tour-kopf .widget-button.tw-tour-zu:hover {
    color: #1f2328;
    background: #f3f4f6;
}

.tw-tour-fortschritt {
    height: 4px;
    margin: 8px 0 14px;
    border-radius: 2px;
    background: #e5e7eb;
    overflow: hidden;
}

.tw-tour-fortschritt span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--widget-primary-color, #2563eb);
    transition: width 0.3s ease;
}

.tw-tour-titel {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #111827;
}

.tw-tour-text { color: #374151; }
.tw-tour-text p { margin: 10px 0 0; }
.tw-tour-text ul,
.tw-tour-text ol { margin: 8px 0 0; padding-left: 22px; }
.tw-tour-text li { margin: 5px 0; }
.tw-tour-text li::marker { color: var(--widget-primary-color, #2563eb); }
.tw-tour-text b { color: #111827; }

.tw-tour-text kbd {
    display: inline-block;
    padding: 0 6px;
    font: 12px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-bottom-width: 2px;
    border-radius: 4px;
}

.tw-tour-fuss {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid #eef0f3;
}

.tw-tour-fuss .widget-button { margin: 0; }
.tw-tour-luecke { flex: 1 1 auto; }

/* Weiter ist die Hauptsache - die Bibliothek malt alle Knoepfe grau
 * (widgets.css), hier bekommt er die Betonungsfarbe. Zurueck und
 * „Mehr dazu" bleiben leise. */
.tw-tour-fuss .widget-button.tw-tour-weiter {
    padding: 7px 18px;
    border: 1px solid var(--widget-primary-color, #2563eb);
    border-radius: 8px;
    background: var(--widget-primary-color, #2563eb);
    color: #fff;
    font-weight: 600;
}

.tw-tour-fuss .widget-button.tw-tour-weiter:hover,
.tw-tour-fuss .widget-button.tw-tour-weiter:focus-visible {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.tw-tour-fuss .widget-button.tw-tour-weiter i { color: #fff; }

.tw-tour-fuss .widget-button:not(.tw-tour-weiter) {
    border-color: transparent;
    background: transparent;
    color: #4b5563;
}

.tw-tour-fuss .widget-button:not(.tw-tour-weiter):hover {
    background: #f3f4f6;
    color: #111827;
}

/* Schmale Bildschirme: ohne Figur, dafür die ganze Breite für den Text. */
@media (max-width: 700px) {
    .tw-tour-seite { display: none; }
    .tw-tour-haupt { padding: 16px 18px 14px; }
}

/* Der Stand des Postausgangs - die eine Stelle, an der der Rundgang
 * nicht nur erklärt, sondern nachsieht. */
.tw-tour-stand {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13.5px;
}

.tw-tour-stand i { margin-top: 3px; }

.tw-tour-stand-gut {
    background: #ecfdf3;
    border: 1px solid #a7e3bf;
    color: #0a5c32;
}

.tw-tour-stand-schlecht {
    background: #fff4e5;
    border: 1px solid #f5c27a;
    color: #8a4b00;
}

/* ============================================ Erscheinungsbild einstellen */

.tw-brand-sperre {
    padding: 8px 12px;
    background: #fff4e5;
    border: 1px solid #f5c27a;
    border-radius: 5px;
    color: #8a4b00;
    font-size: 13px;
}

/* Das aktuelle Bild - auf kariertem Grund, damit man sieht, was
   durchsichtig ist. */
.tw-brand-bild {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 56px;
    padding: 6px 10px;
    box-sizing: border-box;
    border: 1px solid var(--widget-border-color, #dfe3ea);
    border-radius: 4px;
    background-color: #fff;
    background-image: linear-gradient(45deg, #f1f3f6 25%, transparent 25%),
                      linear-gradient(-45deg, #f1f3f6 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #f1f3f6 75%),
                      linear-gradient(-45deg, transparent 75%, #f1f3f6 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    color: #8b929e;
    font-size: 12px;
}
.tw-brand-bild img { max-height: 26px; max-width: 260px; display: block; }
.tw-brand-bild-favicon { min-width: 56px; }
.tw-brand-bild-favicon img { width: 32px; height: 32px; max-height: none; }
.tw-brand-bild-standard img { opacity: .55; }

.tw-brand-schalter {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.tw-brand-hex { flex: 0 0 90px; width: 90px; }

.tw-brand-kontrast { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tw-brand-kontrast-ok { color: #0a7a3d; }
.tw-brand-kontrast-schlecht { color: #b42318; }

/* Vorschau: eine Kopfzeile im Kleinen und was die Farbe traegt. */
.tw-brand-vorschau { padding: 0; overflow: hidden; }
.tw-brand-vk-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px;
    border-bottom: 1px solid var(--widget-border-color, #c6cbd4);
    background: #fff;
}
.tw-brand-vk-kopf img { height: 26px; width: auto; display: block; }
.tw-brand-vk-wiki { font-size: 13px; font-weight: 600; color: #374151; }
.tw-brand-vk-inhalt { padding: 14px 16px 18px; font-size: 14px; color: #1f2328; }
.tw-brand-vk-nav {
    padding: 6px 10px;
    border-left: 3px solid;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
}
.tw-brand-vk-knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.tw-brand-vk-primaer {
    padding: 6px 14px;
    border: 1px solid;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.tw-brand-vk-feld {
    padding: 6px 10px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 13px;
    color: #5b6270;
    background: #fff;
}

/* Logo des Wikis im PDF-Kopf (nur wenn es eines hat). */
.tw-druck-logo { display: block; max-height: 32px; max-width: 220px; margin: 0 0 8px; }

/* ---------------------------------------------- PDF-Vorlage (Druckansicht)
 * Siehe classes/WikiPdfVorlage.php und views/wiki/druck.js. */
.tw-druck-kopf-rechts { display: flex; flex-direction: row-reverse; justify-content: space-between;
                        align-items: flex-start; gap: 24px; }
.tw-druck-kopf-rechts .tw-druck-logo { margin: 0; flex: 0 0 auto; }
.tw-druck-kopftext { min-width: 0; }
/* Ein Kopf ohne Titel braucht keinen Abstand nach unten zum Strich. */
.tw-druck-kopftext:empty { display: none; }

.tw-druck-deckblatt { position: relative; padding: 40px 0 0; }
.tw-druck-deckblatt + .tw-druck-seite { page-break-before: always; break-before: page; }
.tw-druck-deckblatt-logo { display: block; max-height: 90px; max-width: 420px; }
.tw-druck-deckblatt-mitte { margin: 220px 0 0; padding: 0 0 22px; border-bottom: 3px solid var(--tw-akzent, #1f2328); }
.tw-druck-deckblatt-titel { font-size: 60px; line-height: 1.15; margin: 0 0 14px; }
.tw-druck-deckblatt-untertitel { font-size: 30px; color: #374151; margin: 0 0 20px; }
.tw-druck-deckblatt-angaben { font-size: 20px; color: #57606a; }
.tw-druck-deckblatt-inhalt { margin: 70px 0 0; font-size: 21px; }
.tw-druck-deckblatt-inhalt-titel { font-size: 16px; text-transform: uppercase; letter-spacing: .06em;
                                   color: #57606a; margin: 0 0 8px; }
.tw-druck-deckblatt-inhalt ol { margin: 0; padding: 0 0 0 22px; }
.tw-druck-deckblatt-inhalt li { margin: 0 0 4px; }

/* Das Wasserzeichen: fest positioniert, damit es auf jeder gedruckten Seite
 * steht; schwach genug, dass der Text darunter lesbar bleibt. */
.tw-druck-wasserzeichen {
    position: fixed; top: 50%; left: 50%; z-index: 0;
    transform: translate(-50%, -50%) rotate(-32deg);
    font-size: 130px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
    color: rgba(31, 35, 40, .08); pointer-events: none; user-select: none;
}
.tw-druck-seite, .tw-druck-deckblatt { position: relative; z-index: 1; }

/* ---------------------------------------------- PDF-Vorlage (Verwaltung)
 * Die Vorschau: Blaetter im Kleinen. */
.tw-pdf-blatt {
    position: relative; overflow: hidden; margin: 12px auto 4px; background: #fff;
    border: 1px solid #d0d7de; box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    font-size: 9px; color: #1f2328; box-sizing: border-box;
}
.tw-pdf-blatt-a4.tw-pdf-hoch { width: 260px; height: 368px; }
.tw-pdf-blatt-a4.tw-pdf-quer { width: 368px; height: 260px; }
.tw-pdf-blatt-letter.tw-pdf-hoch { width: 268px; height: 347px; }
.tw-pdf-blatt-letter.tw-pdf-quer { width: 347px; height: 268px; }
.tw-pdf-satz { position: absolute; display: flex; flex-direction: column; }
.tw-pdf-kopf { border-bottom: 1.5px solid #1f2328; padding: 0 0 4px; margin: 0 0 8px; }
.tw-pdf-kopf-rechts { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 8px; }
.tw-pdf-kopf img { display: block; max-height: 14px; max-width: 90px; margin: 0 0 3px; }
.tw-pdf-kopf-rechts img { margin: 0; }
.tw-pdf-bereich { font-size: 6px; color: #57606a; text-transform: uppercase; letter-spacing: .04em; }
.tw-pdf-titel { font-size: 12px; font-weight: 700; margin: 1px 0; }
.tw-pdf-stand { font-size: 6px; color: #57606a; }
.tw-pdf-text { height: 5px; border-radius: 2px; background: #e5e7eb; margin: 0 0 5px; }
.tw-pdf-fuss { position: absolute; display: flex; gap: 6px; font-size: 6px; color: #777; }
.tw-pdf-fuss > span { flex: 1 1 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tw-pdf-fuss > span:nth-child(2) { text-align: center; }
.tw-pdf-fuss > span:nth-child(3) { text-align: right; }
.tw-pdf-wz {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-32deg);
    font-size: 34px; font-weight: 700; white-space: nowrap; color: rgba(31, 35, 40, .1);
}
.tw-pdf-deckblatt-titel { font-size: 15px; font-weight: 700; margin: 70px 0 4px; }
.tw-pdf-deckblatt-unter { font-size: 9px; color: #374151; margin: 0 0 6px; }
.tw-pdf-deckblatt-linie { border-bottom: 2px solid var(--tw-akzent, #1f2328); margin: 0 0 6px; }
.tw-pdf-blaetter { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.tw-pdf-blaetter-titel { font-size: 12px; color: #6b7280; text-align: center; }