/*
  Der Pruefstand sieht bewusst nach Satzprogramm aus, nicht nach Formularmaske:
  ruhiges Papierweiss, feine Haarlinien, eine einzige Akzentfarbe, Typografie statt Rahmen.
  Kein Fremd-JavaScript, keine CSS-Bibliothek aus dem Netz — alles steht hier.
*/

:root {
    --papier: #f7f6f3;
    --flaeche: #ffffff;
    --tinte: #1b1d21;
    --tinte-leise: #6a6f78;
    --tinte-stumm: #9aa0a8;
    --haarlinie: #dcd9d3;
    --haarlinie-stark: #c3bfb7;
    --akzent: #1d4e79;
    --akzent-hell: #eaf0f6;
    --fehler: #a32020;
    --fehler-hell: #fbeeee;
    --warnung: #9a6510;
    --warnung-hell: #fdf4e6;
    --hinweis: #3f5d70;
    --hinweis-hell: #eef3f6;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sans: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
    --mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

* {
    box-sizing: border-box;
}

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

body {
    background: var(--papier);
    color: var(--tinte);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.shell {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

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

.masthead {
    position: relative; /* M362: Anker fuer das absolute Reiter-Dropdown */
    display: flex;
    align-items: baseline;
    gap: 2.5rem;
    padding: 1.1rem 2rem 0;
    background: var(--flaeche);
    border-bottom: 1px solid var(--haarlinie);
}

/* M301: der Demo-Modus-Banner benennt offen, dass dies eine oeffentliche Instanz ist. */
.demo-banner {
    padding: 0.7rem 2rem;
    background: #fff4d6;
    color: #5a4300;
    border-bottom: 1px solid #e6c65a;
    font-size: 0.9rem;
    line-height: 1.4;
}

.demo-banner code {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
}

.wordmark {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
}

.wordmark-name {
    font-family: var(--serif);
    font-size: 1.4rem;
    letter-spacing: 0.01em;
}

.wordmark-dim {
    color: var(--tinte-stumm);
}

.wordmark-role {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--akzent);
    border: 1px solid var(--haarlinie-stark);
    border-radius: 2px;
    padding: 0.1rem 0.45rem;
}

/* M202: der Stand, auf dem der Pruefstand laeuft — abgelesen an der Bibliothek selbst. */
.wordmark-version {
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--tinte-stumm);
    white-space: nowrap;
}

/* Die aktuelle Bibliotheks-DLL herunterladen — dezenter Knopf neben der Version. */
.wordmark-download {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--tinte-leise);
    text-decoration: none;
    border: 1px solid var(--linie, rgba(0, 0, 0, 0.18));
    border-radius: 0.3rem;
    padding: 0.12rem 0.42rem;
    white-space: nowrap;
}

.wordmark-download:hover {
    color: var(--tinte);
    border-color: var(--tinte-stumm);
}

/* M1411: Der Roadmap-Knopf ist ein Menue - die Roadmap fuehrt nur noch das Offene, das Erledigte
   liegt nach Version in eigenen Dateien. Bewusst ueber das native <details>-Element: kein
   JavaScript, tastaturbedienbar, und es klappt auch dann zu, wenn Blazor gerade neu verbindet. */
.roadmap-menu { position: relative; display: inline-block; }
.roadmap-menu > summary { cursor: pointer; display: inline-block; list-style: none; }
.roadmap-menu > summary::-webkit-details-marker { display: none; }
.roadmap-menu[open] > summary { color: var(--tinte); border-color: var(--tinte-stumm); }

.roadmap-menu-items {
    position: absolute;
    right: 0;
    top: calc(100% + 0.28rem);
    z-index: 40;
    min-width: 12.5rem;
    padding: 0.24rem;
    border: 1px solid var(--linie, rgba(0, 0, 0, 0.18));
    border-radius: 0.36rem;
    background: var(--papier, #fff);
    box-shadow: 0 0.35rem 1.1rem rgba(0, 0, 0, 0.14);
}

/* M1416: das zweistufige Download-Menue. Die zweite Stufe klappt IM Menue auf (Ziehharmonika)
   statt daneben zu schweben - ein schwebendes Untermenue braeuchte Kollisionsbehandlung am
   Bildschirmrand und laesst sich mit der Tastatur schlechter bedienen. */
.download-menu .download-untermenu > summary {
    display: block;
    cursor: pointer;
    list-style: none;
    padding: 0.26rem 0.5rem;
    font-size: 0.7rem;
    color: var(--tinte-leise);
    border-radius: 0.24rem;
    white-space: nowrap;
}

.download-menu .download-untermenu > summary::-webkit-details-marker { display: none; }

.download-menu .download-untermenu > summary:hover,
.download-menu .download-untermenu[open] > summary {
    color: var(--tinte);
    background: var(--papier-stumm, rgba(0, 0, 0, 0.05));
}

/* Die Eintraege der zweiten Stufe stehen IM Fluss - deshalb die absolute Lage der ersten Stufe
   hier ausdruecklich aufheben. */
.download-menu .download-untermenu > .roadmap-menu-items {
    position: static;
    min-width: 0;
    padding: 0.1rem 0 0.2rem 0.6rem;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.roadmap-menu-items a {
    display: block;
    padding: 0.26rem 0.5rem;
    font-size: 0.7rem;
    color: var(--tinte-leise);
    text-decoration: none;
    border-radius: 0.24rem;
    white-space: nowrap;
}

.roadmap-menu-items a:hover { color: var(--tinte); background: var(--flaeche-leise, rgba(0, 0, 0, 0.05)); }

/* Der erste Eintrag ist die Restliste - der Normalfall, deshalb abgesetzt. */
.roadmap-menu-items a:first-child {
    font-weight: 600;
    color: var(--tinte);
    border-bottom: 1px solid var(--linie, rgba(0, 0, 0, 0.12));
    margin-bottom: 0.18rem;
    padding-bottom: 0.3rem;
}

/* M362: Die Reiter sind IMMER ein Klapp-Menue unter dem Hamburger (Nutzerwunsch — sieht
   schoener aus). Auf allen Groessen ein Dropdown-Panel am rechten Kopfrand, geoeffnet ueber
   die `.open`-Klasse (Blazor). */
.tabs {
    position: absolute;
    top: 100%;
    right: 2rem;
    margin-top: -1px;
    /* M1106: das obere Nav-Popup MUSS ueber der Editor-Chrome liegen (Menueleiste/Werkzeuge/Paletten,
       bis ~z-index 901, und den Editor-Popups) — sonst stanzt der dunkle Editor-Balken hindurch. */
    z-index: 5000;
    display: none;
    flex-direction: column;
    min-width: 13rem;
    padding: 0.3rem 0;
    background: var(--flaeche);
    border: 1px solid var(--haarlinie-stark);
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

.tabs.open {
    display: flex;
}

.tabs a {
    display: block;
    padding: 0.55rem 1.1rem;
    color: var(--tinte-leise);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
}

.tabs a:hover {
    color: var(--tinte);
    background: var(--papier);
}

.tabs a.active {
    color: var(--akzent);
    font-weight: 600;
}

/* ---------------------------------------------------------------- Rumpf */

.canvas {
    flex: 1;
    padding: 1.75rem 2rem 3rem;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

.colophon {
    padding: 1rem 2rem 1.6rem;
    color: var(--tinte-stumm);
    font-size: 0.75rem;
    border-top: 1px solid var(--haarlinie);
}

h1 {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 400;
    margin: 0 0 0.3rem;
    letter-spacing: 0.005em;
}

.lede {
    color: var(--tinte-leise);
    max-width: 62ch;
    margin: 0 0 1.5rem;
}

.split {
    display: grid;
    grid-template-columns: minmax(280px, 22rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.split-wide {
    grid-template-columns: minmax(320px, 26rem) minmax(0, 1fr);
}

/* ---------------------------------------------------------------- Tafeln */

.panel {
    background: var(--flaeche);
    border: 1px solid var(--haarlinie);
    border-radius: 3px;
    margin-bottom: 1.25rem;
}

.panel-head {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--haarlinie);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--tinte-leise);
    background: linear-gradient(var(--flaeche), var(--papier));
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.panel-body {
    padding: 1rem;
}

.panel-body > :first-child {
    margin-top: 0;
}

.panel-body > :last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------- Formulare */

label {
    display: block;
    font-size: 0.78rem;
    color: var(--tinte-leise);
    margin-bottom: 0.25rem;
}

.field {
    margin-bottom: 0.9rem;
}

.field-row {
    display: flex;
    gap: 0.6rem;
}

.field-row .field {
    flex: 1;
}

input[type="text"],
input[type="number"],
select,
textarea {
    width: 100%;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--tinte);
    background: var(--flaeche);
    border: 1px solid var(--haarlinie-stark);
    border-radius: 2px;
    padding: 0.4rem 0.5rem;
}

textarea {
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.5;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--akzent);
    box-shadow: 0 0 0 2px var(--akzent-hell);
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
    font-size: 0.82rem;
    color: var(--tinte);
}

.check input {
    margin-top: 0.25rem;
    accent-color: var(--akzent);
}

.check span small {
    display: block;
    color: var(--tinte-stumm);
    font-size: 0.72rem;
    line-height: 1.4;
}

button {
    font-family: inherit;
    font-size: 0.83rem;
    padding: 0.45rem 1rem;
    border-radius: 2px;
    border: 1px solid var(--haarlinie-stark);
    background: var(--flaeche);
    color: var(--tinte);
    cursor: pointer;
}

button:hover {
    border-color: var(--akzent);
    color: var(--akzent);
}

button.primary {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #fff;
    font-weight: 600;
}

button.primary:hover {
    background: #16405f;
    color: #fff;
}

.button-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------- Beispielliste */

.topic {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--tinte-stumm);
    padding: 0.9rem 1rem 0.3rem;
}

/* Aufklappbare Themengruppe: nur EINE ist offen, damit die Liste ohne Scrollen
   auf eine Seite passt (13 Themen + die Eintraege des geoeffneten). */
.gruppe {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 0;
    background: none;
    border-top: 1px solid var(--haarlinie);
    padding: 0.32rem 1rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--tinte-leise);
}

.panel > .gruppe:first-of-type {
    border-top: none;
}

.gruppe:hover {
    background: var(--papier);
    color: var(--tinte);
}

.gruppe.offen {
    color: var(--tinte);
    background: var(--papier);
}

.gruppe .pfeil {
    font-family: var(--mono);
    font-size: 0.8rem;
    line-height: 1;
    width: 0.7rem;
    color: var(--tinte-stumm);
}

.gruppe .gruppe-name {
    flex: 1;
}

.gruppe .anzahl {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0;
    color: var(--tinte-stumm);
}

.example {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0;
    background: none;
    padding: 0.45rem 1rem;
    font-size: 0.83rem;
    line-height: 1.4;
}

.example:hover {
    background: var(--papier);
    color: var(--tinte);
    border-color: var(--haarlinie-stark);
}

.example.chosen {
    background: var(--akzent-hell);
    border-left-color: var(--akzent);
    color: var(--akzent);
    font-weight: 600;
}

.example .way {
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--tinte-stumm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Meilenstein-Chip: mit welchem Meilenstein das Beispiel hinzukam. Inline VOR dem Beschriftungstext
   (und nach dem optionalen "nur direkt"/"nur Fassade"-Hinweis), nicht rechts schwebend. */
.example .milestone {
    display: inline;
    font-size: 0.62rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tinte-leise);
    border: 1px solid var(--haarlinie-stark, rgba(0, 0, 0, 0.15));
    border-radius: 0.3rem;
    padding: 0 0.3rem;
    margin-left: 0.4rem;
}

/* ---------------------------------------------------------------- Vorschau */

.viewer {
    width: 100%;
    height: 76vh;
    min-height: 480px;
    border: 1px solid var(--haarlinie-stark);
    border-radius: 2px;
    background: #52565c;
}

/* M453: die PDF.js-Canvas-Vorschau — scrollt, die Seiten stehen untereinander (auch auf schmalen
   Handy-Bildschirmen inline dargestellt). */
.pdfjs-view {
    overflow: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

.pdfjs-page {
    max-width: 100%;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
    background: #fff;
    display: block;
}

/* M463: Wrapper haelt Canvas + interaktive Formularschicht deckungsgleich uebereinander. */
.pdfjs-page-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
    background: #fff;
    line-height: 0;
}

/* M463: die PDF.js-Annotationsschicht (Formularfelder/Verweise) ueber der Seite. Nur die fuer
   AcroForm-Felder noetigen Regeln — der Pruefstand buendelt kein vollstaendiges viewer.css. */
.annotationLayer {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transform-origin: 0 0;
    z-index: 2;
    line-height: 1.1;
}

.annotationLayer section {
    position: absolute;
    text-align: initial;
    pointer-events: auto;
    box-sizing: border-box;
    margin: 0;
    transform-origin: 0 0;
}

.annotationLayer :is(.textWidgetAnnotation input,
                     .textWidgetAnnotation textarea,
                     .choiceWidgetAnnotation select,
                     .buttonWidgetAnnotation input) {
    background-image: none;
    border: 1px solid #6b7cff;
    background: rgba(120, 150, 255, .12);
    box-sizing: border-box;
    font: message-box;
    font-size: calc(9px * var(--scale-factor));
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0 3px;
    vertical-align: top;
    color: #111;
}

.annotationLayer textarea {
    resize: none;
}

.annotationLayer :is(.buttonWidgetAnnotation.checkBox input,
                     .buttonWidgetAnnotation.radioButton input) {
    appearance: auto;
    accent-color: #3355cc;
}

.annotationLayer .buttonWidgetAnnotation.pushButton {
    cursor: pointer;
}

.annotationLayer a {
    position: absolute;
    inset: 0;
}

.pdfjs-more {
    color: #d0d0d0;
    font-size: .78rem;
    padding: 4px 0;
}

.notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
}

.notes li {
    font-size: 0.72rem;
    color: var(--tinte-leise);
    background: var(--papier);
    border: 1px solid var(--haarlinie);
    border-radius: 2px;
    padding: 0.15rem 0.5rem;
}

pre.code {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    background: #fbfaf8;
    border-top: 1px solid var(--haarlinie);
    font-family: var(--mono);
    font-size: 0.76rem;
    line-height: 1.6;
    color: #2b2f36;
}

/* ---------------------------------------------------------------- Berichte */

.report {
    border-bottom: 1px solid var(--haarlinie);
}

.report:last-child {
    border-bottom: none;
}

.report-head {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.report-title {
    font-family: var(--serif);
    font-size: 1rem;
}

.report-type {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--tinte-stumm);
}

.report-purpose {
    padding: 0 1rem 0.7rem;
    font-size: 0.78rem;
    color: var(--tinte-leise);
    max-width: 78ch;
}

.tally {
    display: inline-flex;
    gap: 0.3rem;
    margin-left: auto;
}

.chip {
    font-size: 0.68rem;
    border-radius: 9px;
    padding: 0.05rem 0.5rem;
    border: 1px solid transparent;
}

.chip.error {
    background: var(--fehler-hell);
    color: var(--fehler);
    border-color: #eccfcf;
}

.chip.warning {
    background: var(--warnung-hell);
    color: var(--warnung);
    border-color: #ecdcc0;
}

.chip.info {
    background: var(--hinweis-hell);
    color: var(--hinweis);
    border-color: #d5e0e7;
}

.chip.clean {
    background: #eef4ed;
    color: #3d6b45;
    border-color: #d2e2d4;
}

.findings {
    list-style: none;
    margin: 0;
    padding: 0 1rem 1rem;
}

.finding {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.1rem 0.8rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--haarlinie);
    align-items: baseline;
}

.finding-severity {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.finding-severity.error {
    color: var(--fehler);
}

.finding-severity.warning {
    color: var(--warnung);
}

.finding-severity.info {
    color: var(--hinweis);
}

.finding-code {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--akzent);
}

.finding-message {
    grid-column: 2;
    font-size: 0.83rem;
}

.finding-where {
    grid-column: 2;
    font-size: 0.72rem;
    color: var(--tinte-stumm);
}

.empty-note {
    padding: 0 1rem 1rem;
    font-size: 0.8rem;
    color: var(--tinte-leise);
    font-style: italic;
}

.alert {
    margin: 0 0 1.25rem;
    padding: 0.8rem 1rem;
    border-radius: 3px;
    border: 1px solid #eccfcf;
    background: var(--fehler-hell);
    color: var(--fehler);
    font-size: 0.85rem;
}

.alert code {
    font-family: var(--mono);
}

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

table.grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

table.grid th {
    text-align: left;
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tinte-leise);
    border-bottom: 1px solid var(--haarlinie-stark);
    padding: 0.35rem 0.5rem;
}

table.grid td {
    border-bottom: 1px solid var(--haarlinie);
    padding: 0.3rem 0.5rem;
    vertical-align: top;
}

table.grid tr:hover td {
    background: var(--papier);
}

table.grid td.num {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--tinte-leise);
    white-space: nowrap;
}

.kind {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.05rem 0.4rem;
    border-radius: 2px;
    background: var(--papier);
    border: 1px solid var(--haarlinie-stark);
    color: var(--tinte-leise);
}

.parts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.parts button {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 0;
    background: none;
    padding: 0.3rem 1rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    border-left: 2px solid transparent;
}

.parts button:hover {
    background: var(--papier);
}

.parts button.chosen {
    background: var(--akzent-hell);
    border-left-color: var(--akzent);
    color: var(--akzent);
}

/* ================================================================ M360/M361/M362: Responsiv

   Grosse Aufloesungen (FullHD und groesser) sind ueber `.canvas` (max-width 1600, zentriert)
   abgedeckt. M361 brachte auf dem Handy ein Hamburger-Menue; M362 macht den Hamburger auf ALLEN
   Groessen zur Navigation (Nutzerwunsch — sieht schoener aus). Die Seiten-Einleitung bleibt ein
   aufklappbarer Punkt (nur auf dem Handy). Eigenes CSS (kein Framework aus dem Netz); die
   offen/zu-Zustaende steuert Blazor ueber eine `.open`-Klasse. */

/* --- Kopfzeile: Wortzeichen links, Hamburger rechts (auf allen Groessen) --- */
.brandbar {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.nav-toggle {
    display: inline-flex; /* M362: immer sichtbar — der Hamburger IST die Navigation */
    align-items: center;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--haarlinie-stark);
    border-radius: 4px;
    color: var(--tinte);
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
}

.nav-toggle:hover {
    border-color: var(--tinte-stumm);
}

/* M362: ein Klick ausserhalb des offenen Menues schliesst es. */
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

/* --- Seiten-Einleitung: auf ALLEN Groessen ein aufklappbarer Punkt, direkt NEBEN der
   Ueberschrift (M363, Nutzerwunsch) — zugeklappt (Vorgabe) braucht sie keine eigene Zeile. */
h1:has(+ .lede-collapse) {
    display: inline;      /* die Ueberschrift und der Umschalter teilen sich eine Zeile */
    margin-right: 0.6rem;
}

.lede-collapse {
    display: inline;
}

.lede-collapse > .lede-toggle {
    display: inline;      /* immer sichtbar */
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--akzent);
    font-family: inherit;
    font-size: 0.85rem;
    vertical-align: 0.2em;  /* an der Versalhoehe der Ueberschrift ausrichten */
}

.lede-collapse > .lede-toggle::before {
    content: "\25B8\00A0"; /* ▸ zugeklappt */
}

.lede-collapse.open > .lede-toggle::before {
    content: "\25BE\00A0"; /* ▾ aufgeklappt */
}

/* Der Beschreibungstext bricht als Block unter die Ueberschriften-Zeile — und nur, wenn offen. */
.lede-collapse .lede {
    display: block;
    margin: 0.7rem 0 1.5rem;
}

.lede-collapse:not(.open) .lede {
    display: none;
}

/* ---------------------------------------------------------------- Handy/Tablet */

@media (max-width: 900px) {
    .masthead {
        padding: 0.9rem 1rem 0;
    }

    /* Das Reiter-Dropdown sitzt am rechten Rand — bei schmalem Rand naeher an die Kante. */
    .tabs {
        right: 1rem;
    }

    .canvas {
        padding: 1.1rem 1rem 2rem;
    }

    .colophon,
    .demo-banner {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Die zweispaltigen Ansichten stapeln. */
    .split,
    .split-wide {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    /* Die PDF-Vorschau nicht ueber den halben Bildschirm hinaus. */
    .viewer {
        height: 62vh;
        min-height: 340px;
    }
}

@media (max-width: 560px) {
    .wordmark-name {
        font-size: 1.2rem;
    }

    .canvas {
        padding: 0.9rem 0.75rem 2rem;
    }

    h1 {
        font-size: 1.4rem;
    }
}

/* M399: InDesign-artiger Editor — dunkles Chrome, Werkzeugpalette, Montageflaeche, Bedienfelder.
   Alles unter .ind gekapselt, damit der uebrige (helle) Pruefstand unberuehrt bleibt. */
.ind {
    --ind-bg: #1e1e1e;
    --ind-panel: #333;
    --ind-head: #262626;
    --ind-line: #4a4a4a;
    --ind-tinte: #d0d0d0;
    --ind-stumm: #8a8a8a;
    --ind-akzent: #2b7fd4;
    --ind-akzent-hell: #1473e6;
    --ind-feld: #464646;
    --ind-feld-tinte: #ececec;

    display: flex;
    flex-direction: column;
    height: 82vh;
    min-height: 560px;
    background: var(--ind-bg);
    border: 1px solid #111;
    border-radius: 6px;
    overflow: hidden;
    color: var(--ind-tinte);
    font-family: var(--sans);
    font-size: .82rem;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}

/* Kontrollleiste. */
.ind-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    padding: .45rem .7rem;
    background: var(--ind-head);
    border-bottom: 1px solid #111;
}

/* Ansicht → „Bedienleiste ausblenden": die Kontrollleiste einklappen (mehr Platz fuer den Canvas). */
.ind-top.collapsed {
    display: none;
}

.ind-doc,
.ind-props {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

/* M419: die Eigenschaftsleiste liegt IMMER auf ihrer eigenen (zweiten) Zeile mit fester Mindesthoehe.
   Frueher wanderte sie je nach Breite von Zeile 1 auf Zeile 2, sobald ein Objekt ausgewaehlt wurde —
   dadurch wuchs der Kopf, das Blatt sprang, und ein blosser Klick verschob die Box. Jetzt bleibt die
   Kopfhoehe konstant, ob etwas ausgewaehlt ist oder nicht. */
.ind-props {
    flex-basis: 100%;
    margin-left: 0;
    min-height: 1.9rem;
}

.ind-props label {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--ind-stumm);
    font-size: .75rem;
}

/* M464: das Dokument-Eigenschaften-Feld (Metadaten) — ein Feld ueber der Montageflaeche, kein Umlayouten. */
.ind-docprops {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    margin-top: .3rem;
    background: var(--ind-head, #262626);
    border: 1px solid var(--ind-line, #3a3a3a);
    border-radius: 5px;
}

.ind-docprops-head {
    flex-basis: 100%;
    font-weight: 600;
    color: #fff;
    font-size: .8rem;
}

.ind-docprops label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--ind-stumm);
    font-size: .75rem;
}

.ind-docprops .ind-name {
    width: 11rem;
}

.ind-docprops-actions {
    display: flex;
    gap: .4rem;
    margin-left: auto;
}

/* M465: das mehrzeilige Lesezeichen-Feld. */
.ind-area {
    flex-basis: 100%;
    width: 100%;
    background: var(--ind-feld, #1c1c1c);
    color: var(--ind-feld-tinte, #eee);
    border: 1px solid var(--ind-line, #3a3a3a);
    border-radius: 3px;
    padding: .35rem .45rem;
    font-size: .78rem;
    font-family: var(--mono, monospace);
    resize: vertical;
}

.ind-props input,
.ind-name,
.ind-select {
    background: var(--ind-feld);
    color: var(--ind-feld-tinte);
    border: 1px solid var(--ind-line);
    border-radius: 3px;
    padding: .18rem .35rem;
    font-size: .78rem;
    font-family: var(--sans);
}

.ind-props input {
    width: 3.6rem;
}

.ind-name {
    width: 8rem;
}

.ind-kind {
    font-weight: 600;
    color: #fff;
    letter-spacing: .01em;
}

.ind-sep {
    display: inline-block;
    width: 1px;
    height: 1.2rem;
    background: var(--ind-line);
    margin: 0 .25rem;
}

.ind-hint {
    color: var(--ind-stumm);
    font-style: italic;
}

/* M409: der Bild-Upload sieht aus wie ein Knopf (das echte Datei-Feld ist ausgeblendet). */
.ind-upload {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

/* M414: Text-Inhalt bearbeiten als SCHWEBENDES Feld ueber der Montageflaeche (drueckt das Blatt nicht mehr
   nach unten). Absolut positioniert im .ind-stage, oben mittig, mit leichtem Schatten. */
.ind-textedit-float {
    position: absolute;
    top: .6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: min(90%, 520px);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .5rem;
    background: var(--ind-head);
    border: 1px solid var(--ind-line);
    border-radius: 5px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}

.ind-textedit-actions {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
}

/* M421: Tabulatoren-Bereich im schwebenden Text-Feld. */
.ind-tabs {
    border-top: 1px solid var(--ind-line);
    padding-top: .4rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.ind-tabs-head {
    color: var(--ind-stumm);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* M440: Hinweis unter der Seitenzahl-Vorlage. */
.ind-pn-hint {
    color: var(--ind-stumm);
    font-size: .72rem;
    margin: .3rem 0 0;
}

.ind-pn-hint code {
    background: rgba(255, 255, 255, .08);
    border-radius: 3px;
    padding: 0 .2rem;
}

.ind-tabs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.ind-tabs-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .78rem;
    color: var(--ind-tinte);
}

.ind-tabs-add {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.ind-select-s {
    background: var(--ind-feld);
    color: var(--ind-feld-tinte);
    border: 1px solid var(--ind-line);
    border-radius: 3px;
    padding: .18rem .3rem;
    font-size: .78rem;
}

/* M424: QR-Zahlteil-Formular im schwebenden Feld. */
.ind-qb {
    width: 22rem;
    max-height: 70vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.ind-qb-row {
    display: flex;
    gap: .35rem;
    align-items: center;
}

/* M501: Textlauf-Bearbeitungszeile (Rich-Text). */
.ind-run-row {
    display: flex;
    gap: .3rem;
    align-items: center;
    margin-bottom: .25rem;
}

.ind-run-text {
    flex: 1 1 auto;
    min-width: 4rem;
}

/* M503: Verbund-Chips einer Tabelle. */
.ind-tbl-merges {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .25rem;
}

.ind-merge-chip {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .1rem .3rem;
    border-radius: .25rem;
    background: rgba(255,255,255,.08);
    font-size: .8em;
}

.ind-qb-full {
    width: 100%;
}

.ind-qb-wide {
    flex: 1 1 auto;
    min-width: 0;
}

.ind-qb-narrow {
    width: 3.6rem;
    flex: 0 0 auto;
}

/* M427: Tabellen-Editor im schwebenden Feld. */
.ind-tbl {
    max-width: 32rem;
}

.ind-tbl-scroll {
    max-height: 40vh;
    max-width: 30rem;
    overflow: auto;
}

.ind-tbl-grid {
    border-collapse: collapse;
}

.ind-tbl-cell {
    width: 5.5rem;
    background: var(--ind-feld);
    color: var(--ind-feld-tinte);
    border: 1px solid var(--ind-line);
    border-radius: 2px;
    padding: .15rem .25rem;
    font-size: .76rem;
}

.ind-tbl-actions {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-top: .3rem;
}

/* M1349: Bedienung wie in einer Tabellenkalkulation — die aktive Zelle und der ausgewaehlte Bereich
   muessen sichtbar sein, sonst weiss man nicht, worauf die Knoepfe wirken. */
.ind-tbl-cell.sel {
    background: var(--ind-akzent, #2b6cb0);
    color: #fff;
}

.ind-tbl-cell:focus {
    outline: 2px solid var(--ind-akzent, #2b6cb0);
    outline-offset: -1px;
}

.ind-tbl-hint {
    margin-top: .3rem;
    font-size: .7rem;
    opacity: .75;
}

.ind-tbl-clip {
    width: 100%;
    max-width: 30rem;
    margin-top: .35rem;
    font-size: .7rem;
    background: var(--ind-feld);
    color: var(--ind-feld-tinte);
    border: 1px solid var(--ind-line);
    border-radius: 2px;
    padding: .2rem .3rem;
}

.ind-textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--ind-feld);
    color: var(--ind-feld-tinte);
    border: 1px solid var(--ind-line);
    border-radius: 3px;
    padding: .3rem .4rem;
    font-size: .82rem;
    font-family: var(--sans);
    resize: vertical;
}

.ind-btn {
    background: #4a4a4a;
    color: var(--ind-tinte);
    border: 1px solid var(--ind-line);
    border-radius: 3px;
    padding: .22rem .55rem;
    font-size: .76rem;
    cursor: pointer;
    line-height: 1.1;
}

.ind-btn:hover {
    background: #565656;
}

.ind-btn-primary {
    background: var(--ind-akzent);
    border-color: var(--ind-akzent-hell);
    color: #fff;
}

/* M416: aktiver Umschaltknopf (Raster/Magnet an). */
.ind-btn.active {
    background: var(--ind-akzent);
    border-color: var(--ind-akzent-hell);
    color: #fff;
}

.ind-inline-lbl {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--ind-stumm);
    font-size: .75rem;
}

.ind-num-s {
    width: 3rem;
    background: var(--ind-feld);
    color: var(--ind-feld-tinte);
    border: 1px solid var(--ind-line);
    border-radius: 3px;
    padding: .18rem .3rem;
    font-size: .78rem;
}

.ind-btn-primary:hover {
    background: var(--ind-akzent-hell);
}

.ind-btn-danger:hover {
    background: #8a2a2a;
    border-color: #a33;
    color: #fff;
}

/* Koerper: Werkzeuge | Montageflaeche | Bedienfelder. */
.ind-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.ind-tools {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .45rem .35rem;
    background: #2d2d2d;
    border-right: 1px solid #111;
}

.ind-tool {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #3c3c3c;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}

.ind-tool:hover {
    background: #4a4a4a;
}

.ind-tool.active {
    background: var(--ind-akzent-hell);
    border-color: #7fb4ec;
}

.ind-tool svg {
    width: 20px;
    height: 20px;
    stroke: #e6e6e6;
    fill: #e6e6e6;
}

.ind-tool.active svg {
    stroke: #fff;
    fill: #fff;
}

/* Montageflaeche mit Blatt. */
.ind-stage {
    position: relative;   /* M414: Anker fuer das schwebende Text-Feld. */
    flex: 1;
    min-width: 0;
    display: flex;
    /* M497: „safe center" — beim Hineinzoomen waechst die Flaeche ueber die Buehne; ohne „safe" wuerde
       Flexbox die obere linke Ecke abschneiden und nicht scrollbar machen. */
    align-items: safe center;
    justify-content: safe center;
    background: #2a2a2a;
    background-image: linear-gradient(45deg, #262626 25%, transparent 25%),
        linear-gradient(-45deg, #262626 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #262626 75%),
        linear-gradient(-45deg, transparent 75%, #262626 75%);
    background-size: 22px 22px;
    background-position: 0 0, 0 11px, 11px -11px, -11px 0;
    padding: 1rem;
    overflow: auto;
}

.ind-canvas {
    /* M497: die Groesse steuert der Zoom ueber die width/height-Attribute; kein 100%-Deckel mehr,
       sonst koennte man nicht hineinzoomen (die Buehne scrollt beim Ueberlauf). */
    touch-action: none;
    display: block;
    flex: 0 0 auto;
    /* M1251: den Canvas auf eine eigene GPU-Kompositionsebene heben — das Panning/Zoomen und das
       Neuzeichnen waehrend eines Zugs laeuft dann ueber die GPU statt ueber wiederholtes CPU-Rastern. */
    will-change: transform;
    transform: translateZ(0);
}

.ind-canvas.cursor-move {
    cursor: default;
}

.ind-canvas.cursor-cross {
    cursor: crosshair;
}

.ind-canvas.cursor-link {
    cursor: alias;
}

.ind-sheet {
    fill: #ffffff;
}

.ind-sheet-shadow {
    fill: rgba(0, 0, 0, .35);
}

/* M1229: die schwarze Seiten-Aussenkante (Trimlinie) — grenzt die Seite gegen die Montageflaeche ab. */
.ind-page-edge {
    fill: none;
    stroke: #000000;
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
}

.ind-obj {
    fill: rgba(43, 127, 212, .06);
    stroke: #7a7a7a;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.ind-obj.k-text {
    stroke: #3aa0a0;
    fill: rgba(58, 160, 160, .07);
}

/* ED11+ED12 Layout-Container-Werkzeuge (Spalten/Kasten/Raster/Flex/Initiale):
   eigene Platzhalter-Farbe fuer die zusammengesetzten Container, deren echter Inhalt
   nur in der PDF-Vorschau (ED26) erscheint. */
.ind-obj.k-container {
    stroke: #8a63d2;
    stroke-dasharray: 3 2;
    fill: rgba(138, 99, 210, .07);
}

.ind-obj.sel {
    stroke: var(--ind-akzent-hell);
    stroke-width: 2;
    fill: rgba(20, 115, 230, .12);
}

/* M411: mehrfach ausgewaehlt (fuers Gruppieren) — dezenter als die Primaerauswahl. */
.ind-obj.multi {
    stroke: var(--ind-akzent-hell);
    stroke-width: 1.5;
    stroke-dasharray: 4 2;
    fill: rgba(20, 115, 230, .08);
}

.ind-marquee {
    fill: rgba(20, 115, 230, .12);
    stroke: var(--ind-akzent-hell);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
}

/* M1246: Auswahl-Marquee (Gummiband) — feiner gestrichelt, ohne Fuellung, damit man die beruehrten
   Objekte darunter sieht. */
.ind-select-marquee {
    fill: rgba(20, 115, 230, .06);
    stroke: var(--ind-akzent-hell);
    stroke-width: 1;
    stroke-dasharray: 3 2;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* M402: Verkettung (Textfluss) — Fluss-Faden, Ports, Ueberlauf-Marker, Quellrahmen-Markierung. */
.ind-obj.linksrc {
    stroke: #d08b1f;
    stroke-width: 2;
    stroke-dasharray: 5 3;
    fill: rgba(208, 139, 31, .10);
}

.ind-thread {
    stroke: #2b7fd4;
    stroke-width: 1.5;
    stroke-dasharray: 5 3;
    vector-effect: non-scaling-stroke;
}

/* M417: eigenes Kontextmenue (Rechtsklick). */
/* M445: das Kontextmenue steht IMMER deckend ueber allem. Es wird ausserhalb von `.ind` gerendert
   (die --ind-*-Variablen sind dort nicht definiert), deshalb explizite Fallback-Farben — sonst wird der
   Hintergrund durchsichtig (initial `transparent`) und platzierte Rahmen scheinen durch. Hohe z-index,
   damit es ueber Canvas, schwebenden Feldern und Kopfleiste liegt. */
.ind-ctx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3000;
}

.ind-ctx {
    position: fixed;
    z-index: 3001;
    min-width: 190px;
    padding: .25rem;
    background: var(--ind-head, #262626);
    border: 1px solid var(--ind-line, #4a4a4a);
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    font-size: .82rem;
}

.ind-ctx-head {
    padding: .3rem .5rem;
    color: var(--ind-stumm, #8a8a8a);
    font-weight: 600;
    border-bottom: 1px solid var(--ind-line, #4a4a4a);
    margin-bottom: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.ind-ctx-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--ind-tinte, #d0d0d0);
    border: 0;
    border-radius: 3px;
    padding: .32rem .5rem;
    cursor: pointer;
    font-size: .82rem;
}

.ind-ctx-item:hover {
    background: var(--ind-akzent, #2b7fd4);
    color: #fff;
}

.ind-ctx-danger {
    color: #ff8a8a;
}

.ind-ctx-danger:hover {
    background: #8a2a2a;
    color: #fff;
}

.ind-ctx-sep {
    height: 1px;
    background: var(--ind-line, #4a4a4a);
    margin: .2rem .1rem;
}

/* M1103: typ-spezifische Rechtsklick-Abschnitte (Schrift/Farbe/Bild). */
.ind-ctx-sub {
    padding: .3rem .6rem .1rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .55;
}

.ind-ctx-row {
    display: flex;
    gap: .2rem;
    padding: .1rem .4rem .2rem;
}

.ind-ctx-row .ind-ctx-item {
    flex: 1;
    text-align: center;
    padding: .3rem .2rem;
    border-radius: 3px;
}

.ind-ctx-item.chosen {
    background: var(--ind-akzent, #2b7fd4);
    color: #fff;
}

.ind-ctx-swatch {
    width: 20px;
    height: 20px;
    border: 1px solid #666;
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
}

.ind-ctx-swatch:hover {
    outline: 2px solid var(--ind-akzent-hell, #3b82f6);
}

/* M420: Lineal (Koordinaten-Skala am Blattrand). */
.ind-ruler-tick {
    stroke: #8aa0bd;
    stroke-width: .5;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.ind-ruler-lbl {
    fill: #b7c6da;
    font-size: 6px;
    font-family: var(--sans);
    pointer-events: none;
}

.ind-ruler-lbl-v {
    text-anchor: end;
}

/* M418: Ausrichtungs-Hilfslinien (Smart Guides) — waehrend des Verschiebens. */
.ind-smartguide {
    stroke: #e0439b;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* M416: Rasterlinien ueber dem Blatt. */
.ind-grid {
    stroke: #9db8d6;
    stroke-width: .5;
    stroke-opacity: .5;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.ind-port {
    fill: #2b7fd4;
    stroke: #fff;
    stroke-width: .6;
    vector-effect: non-scaling-stroke;
}

/* M415: der Verkettungs-Port oben rechts an jedem Objekt. Farbe zeigt den Zustand. */
.ind-port2 {
    fill: #555;                /* Vorgabe: unverkettet, dezent */
    stroke: #ddd;
    stroke-width: .7;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
}

.ind-port2.parent {           /* hat eine ausgehende Verkettung (ist Parent) */
    fill: #2b7fd4;
}

.ind-port2.child {            /* ist Ziel einer Verkettung (ist Kind) */
    fill: #17a589;
}

.ind-port2.armed {            /* scharf gestellt: Quelle einer neuen Verkettung */
    fill: #e67e22;
    stroke: #fff;
    stroke-width: 1.2;
}

.ind-overset {
    fill: #d23;
    stroke: #fff;
    stroke-width: .6;
    vector-effect: non-scaling-stroke;
}

.ind-overset-plus {
    stroke: #fff;
    stroke-width: 1.3;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* M400: Skalier-Anfasser am ausgewaehlten Objekt. */
.ind-handle {
    fill: #fff;
    stroke: var(--ind-akzent-hell);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.ind-handle.h-nwse {
    cursor: nwse-resize;
}

.ind-handle.h-nesw {
    cursor: nesw-resize;
}

.ind-handle.h-ns {
    cursor: ns-resize;
}

.ind-handle.h-ew {
    cursor: ew-resize;
}

/* M439: Dreh-Anfasser (Knauf ueber der Oberkante) + Verbindungsarm. */
.ind-rot-handle {
    fill: var(--ind-akzent-hell);
    stroke: #fff;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    cursor: grab;
}

.ind-rot-arm {
    stroke: var(--ind-akzent-hell);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.ind-empty {
    color: var(--ind-stumm);
    text-align: center;
    max-width: 22rem;
    line-height: 1.5;
}

.ind-empty strong {
    color: var(--ind-tinte);
}

/* Rechte Bedienfelder. */
.ind-side {
    width: 240px;
    display: flex;
    flex-direction: column;
    background: var(--ind-panel);
    border-left: 1px solid #111;
    overflow-y: auto;
}

/* M497: die Zoom-Bedienung in der Kopfleiste. */
.ind-zoom {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

.ind-zoom-val {
    min-width: 3.4rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* M497: das rechte Panel als Tabs (Visual-Studio-artig): Eigenschaften | Seiten. */
.ind-side-tabs {
    display: flex;
    background: var(--ind-head, #262626);
    border-bottom: 1px solid #111;
    position: sticky;
    top: 0;
    z-index: 1;
}

.ind-side-tabs button {
    flex: 1;
    padding: .45rem .3rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ind-stumm, #9a9a9a);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .03em;
    cursor: pointer;
}

.ind-side-tabs button.active {
    color: #fff;
    border-bottom-color: var(--ind-accent, #3b82f6);
    background: var(--ind-panel, #1e1e1e);
}

/* M497: der Objekt-Eigenschaftsbalken, jetzt senkrecht in der schmalen rechten Spalte. */
.ind-prop-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .55rem .6rem;
}

.ind-prop-panel label {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    color: var(--ind-stumm);
    font-size: .75rem;
}

.ind-prop-panel input,
.ind-prop-panel select {
    background: var(--ind-feld);
    color: var(--ind-feld-tinte);
    border: 1px solid var(--ind-line);
    border-radius: 3px;
    padding: .18rem .35rem;
    font-size: .78rem;
    font-family: var(--sans);
}

.ind-prop-panel input[type=number] {
    width: 5rem;
}

.ind-prop-panel input[type=text],
.ind-prop-panel .ind-name {
    width: 9.5rem;
}

.ind-prop-panel select {
    max-width: 9.5rem;
}

.ind-prop-panel input[type=checkbox] {
    width: auto;
    flex: 0 0 auto;
}

.ind-prop-panel input[type=color] {
    width: 2rem;
    height: 1.3rem;
    padding: 0;
    flex: 0 0 auto;
}

/* Ein Trenner wird zur waagerechten Linie ueber die volle Breite. */
.ind-prop-panel .ind-sep {
    flex-basis: 100%;
    height: 1px;
    background: var(--ind-line, #3a3a3a);
    margin: .15rem 0;
}

.ind-prop-panel .ind-kind,
.ind-prop-panel .ind-hint {
    flex-basis: 100%;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
}

.ind-prop-panel .ind-hint {
    color: var(--ind-stumm);
    font-weight: 400;
}

/* Die Nudge-/Z-Order-/Loeschen-Knoepfe fliessen in Reihen. */
.ind-prop-panel .ind-btn {
    flex: 0 0 auto;
}

.ind-prop-panel .ind-btn-danger {
    flex-basis: 100%;
    margin-top: .2rem;
}

.ind-panel + .ind-panel {
    border-top: 1px solid #111;
}

.ind-panel-head {
    padding: .4rem .65rem;
    background: var(--ind-head);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ind-stumm);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* M429: Seiten-Werkzeuge (hinzufuegen/entfernen) im Panel-Kopf. */
.ind-page-tools {
    display: flex;
    gap: .25rem;
}

.ind-page-tools .ind-btn {
    padding: 0 .4rem;
    line-height: 1.3;
}

.ind-panel-body {
    padding: .5rem .65rem;
}

.ind-muted {
    color: var(--ind-stumm);
    margin: 0;
    font-size: .78rem;
}

/* Seiten-Bedienfeld: kleine Blatt-Miniaturen. */
.ind-pages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ind-pages button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--ind-stumm);
}

.ind-page-thumb {
    display: block;
    width: 42px;
    background: #fff;
    border: 1px solid #6a6a6a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.ind-pages button.chosen .ind-page-thumb {
    border-color: var(--ind-akzent-hell);
    box-shadow: 0 0 0 2px var(--ind-akzent-hell);
}

.ind-pages button.chosen {
    color: #fff;
}

.ind-page-nr {
    font-size: .7rem;
}

/* Ebenen-Bedienfeld: die Objektliste. */
.ind-layers {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ind-layers li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .28rem .35rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: .78rem;
}

.ind-layers li:hover {
    background: #3f3f3f;
}

.ind-layers li.chosen {
    background: var(--ind-akzent-hell);
    color: #fff;
}

/* M411: in der Mehrfachauswahl (Umschalt-Klick), aber nicht das Primaerobjekt. */
.ind-layers li.multi {
    background: rgba(20, 115, 230, .28);
}

.ind-layer-glyph {
    width: 1.1rem;
    text-align: center;
    color: var(--ind-stumm);
}

.ind-layers li.chosen .ind-layer-glyph {
    color: #fff;
}

.ind-layer-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ind-output {
    margin-top: 1rem;
}

/* M1180: freigestellter App-Modus — nur der Editor, keine Pruefstand-Chrome; der Editor fuellt das Fenster
   und reagiert wie eine installierte App. */
.shell.app-mode {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    height: 100vh;
}
.shell.app-mode .canvas {
    max-width: none;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    /* Fuellhoehe: die Reiterleiste nimmt ihre Hoehe, der Editor den ganzen Rest (kein leerer Streifen unten). */
    display: flex;
    flex-direction: column;
}
/* Im App-Modus fuellt der Editor die volle Resthoehe unter der Reiterleiste (statt fixer 82vh). */
.shell.app-mode .ind {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    border: 0;
    border-radius: 0;
}
.shell.app-mode .ind-output {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
.ind-apptabs {
    display: flex;
    gap: 2px;
    background: #1e1e1e;
    border-bottom: 1px solid #3a3a3a;
}
.ind-apptab {
    padding: .5rem 1.1rem;
    border: 0;
    background: #2b2b2b;
    color: #cdcdcd;
    cursor: pointer;
    font-size: .9rem;
    border-top: 2px solid transparent;
}
.ind-apptab.active {
    background: #363636;
    color: #fff;
    border-top-color: #3b82f6;
}
/* Im App-Modus fuellt die „Darstellung" (RunView) das Fenster unter der Tab-Leiste. */
.ind-output-app {
    margin-top: 0;
    height: calc(100vh - 40px);
    overflow: auto;
    background: #333;
    padding: 1rem;
    box-sizing: border-box;
}

/* Auf schmalen Screens die Bedienfelder unter die Flaeche stapeln. */
@media (max-width: 900px) {
    .ind {
        height: auto;
    }

    .ind-body {
        flex-direction: column;
    }

    .ind-stage {
        min-height: 46vh;
    }

    .ind-tools {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid #111;
    }

    .ind-side {
        width: auto;
        border-left: none;
        border-top: 1px solid #111;
    }
}

/* M553: MCP-Server-Seite — Code-Einzeiler und Aufzaehlungen. */
.code-block {
    background: var(--ind-head, #262626);
    color: #e6e6e6;
    padding: .7rem .9rem;
    border-radius: 6px;
    overflow-x: auto;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .95rem;
    user-select: all;
}
.bullets { margin: .2rem 0 0 1.1rem; padding: 0; }
.bullets li { margin: .35rem 0; }

/* M863: interaktiver ROI-Rahmen-Editor (Barcode lesen) */
.roi-editor { position: relative; display: inline-block; max-width: 100%; outline: none; margin-top: .5rem; }
.roi-editor img { display: block; max-width: 100%; height: auto; }
.roi-layer { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.roi-box { position: absolute; border: 2px solid #d33; background: rgba(221,51,51,.12); box-sizing: border-box; cursor: move; }
.roi-box.roi-selected { border-color: #06c; background: rgba(0,102,204,.14); }
.roi-label { position: absolute; top: -1.35em; left: 0; font-size: .7rem; line-height: 1.3; background: #d33; color: #fff; padding: 0 .3em; white-space: nowrap; }
.roi-selected .roi-label { background: #06c; }
.roi-handle { position: absolute; width: 12px; height: 12px; background: #06c; border: 1px solid #fff; box-sizing: border-box; }
.roi-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.roi-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.roi-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.roi-se { right: -6px; bottom: -6px; cursor: nwse-resize; }

/* LF1 InDesign-Menübar */
.ind-menubar {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #2b2b2b;
    border-bottom: 1px solid #1a1a1a;
    font-size: 13px;
    user-select: none;
    position: relative;
    z-index: 200;
}
.ind-menu { position: relative; }
.ind-menutitle {
    appearance: none;
    background: transparent;
    border: none;
    color: #dcdcdc;
    padding: 6px 12px;
    cursor: pointer;
    font: inherit;
    line-height: 1.4;
}
.ind-menutitle:hover { background: #3a3a3a; color: #fff; }
.ind-menutitle.open { background: #0a6cff; color: #fff; }
.ind-menudrop {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #333;
    border: 1px solid #1a1a1a;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    padding: 4px 0;
    z-index: 201;
}
.ind-menuitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    background: transparent;
    border: none;
    color: #e6e6e6;
    text-align: left;
    padding: 6px 14px;
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
}
.ind-menuitem:hover { background: #0a6cff; color: #fff; }
.ind-menuitem.disabled,
.ind-menuitem:disabled {
    color: #777;
    cursor: default;
    background: transparent;
}
.ind-menuitem.checked::before { content: "\2713\00a0"; margin-left: -12px; }
.ind-menukey { color: #9a9a9a; font-size: 12px; }
.ind-menuitem:hover .ind-menukey { color: #e0e0e0; }
.ind-menusep { height: 1px; margin: 4px 0; background: #1e1e1e; }
.ind-menuhead {
    padding: 4px 14px 2px;
    color: #8a8a8a;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ind-menuinfo { padding: 4px 14px; color: #9a9a9a; font-size: 12px; }

/* ED1 (WYSIWYG-Canvas): der ECHTE Objekt-Inhalt (Text/Form/Bild) liegt UNTER dem Auswahl-/Anfasser-
   Overlay und faengt keine Zeigerereignisse ab (die Auswahl laeuft weiter ueber den Platzhalter-Rahmen). */
.ind-content { pointer-events: none; user-select: none; }
.ind-content text { dominant-baseline: alphabetic; }

/* ED26 (WYSIWYG<->PDF-Umschalter): die pixelgenaue PDF-Vorschau der aktuellen Seite als Bild,
   mit Blatt-Schatten wie der Canvas; ersetzt den editierbaren SVG-Canvas, solange sie aktiv ist. */
.ind-pdfpreview {
    display: block;
    margin: 0 auto;
    height: auto;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

/* ED5: ziehbare Lineal-Hilfslinien (persistente Guides wie InDesign). Duenne tuerkise Linie; die gerade
   gezogene Vorschau gestrichelt. Von den transienten Ausrichtungs-Hilfslinien (.ind-smartguide, magenta)
   bewusst farblich getrennt. */
.ind-userguide {
    stroke: #22c1c3;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.ind-userguide-drag {
    stroke: #22c1c3;
    stroke-width: 1;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* ED4 (Mehrseiten-/Doppelseiten-Ansicht + Thumbnails): jede Seite als pixelgenaue Miniatur (aus dem
   erzeugten PDF via PdfRenderer, M973) im Seiten-Panel; der Doppelseiten-Umschalter ordnet sie paarweise. */
.ind-thumb {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
    border: 1px solid #6a6a6a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* Auswahl-Hervorhebung der aktuellen Seite (wie beim Platzhalter-Rahmen). */
.ind-pages button.chosen .ind-thumb {
    border-color: var(--ind-akzent-hell);
    box-shadow: 0 0 0 2px var(--ind-akzent-hell);
}

/* Miniatur-Knopf traegt eine feste Breite (im Doppelseiten-Grid dehnt er sich auf die Spalte). */
.ind-pages button { width: 60px; }
.ind-pages button .ind-thumb,
.ind-pages button .ind-page-thumb { width: 100%; }

/* Feature B — Doppelseiten nach InDesign-Art: jede Doppelseite eine Zeile, ihre 1-2 Seiten beruehren
   sich (gemeinsamer Bund); die Titelseite steht solo rechts (recto) mit einem leeren Platz links. */
.ind-spreads {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
}
.ind-spread {
    display: flex;
    justify-content: center;
    gap: 0;            /* die beiden Seiten einer Doppelseite beruehren sich am Bund */
}
.ind-spread button { width: 60px; }
.ind-spread-gap { width: 60px; }   /* leerer linker Platz fuer die solo Titelseite */

/* ED7 Farbfelder — eine feste Palette (Swatches) im Eigenschaften-Panel, wie in InDesign. */
.ind-swatch-block {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.ind-swatch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ind-stumm);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
/* Umschalter Flaeche | Kontur — zwei kleine Segmentknoepfe. */
.ind-swatch-target {
    display: inline-flex;
    border: 1px solid var(--ind-line);
    border-radius: 4px;
    overflow: hidden;
}
.ind-swatch-target button {
    background: var(--ind-feld);
    color: var(--ind-feld-tinte);
    border: 0;
    padding: .12rem .5rem;
    font-size: .72rem;
    font-family: var(--sans);
    cursor: pointer;
}
.ind-swatch-target button + button { border-left: 1px solid var(--ind-line); }
.ind-swatch-target button.chosen {
    background: var(--ind-accent, #3b82f6);
    color: #fff;
}
/* Die zwei "aktuelle Farbe"-Kacheln (Flaeche/Kontur bzw. Absatzfarbe). */
.ind-swatch-current { display: flex; gap: .3rem; }
.ind-swatch-cur {
    width: 1.7rem;
    height: 1.15rem;
    border: 1px solid var(--ind-line);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    color: #0009;
    text-shadow: 0 0 2px #fff8;
}
/* "Ohne"-Optik: weiss mit diagonalem rotem Strich. */
.ind-swatch-cur-none,
.ind-swatch-none {
    background:
        linear-gradient(to top right,
            transparent 0, transparent calc(50% - 1px),
            #e0202a 50%,
            transparent calc(50% + 1px), transparent 100%) #ffffff !important;
}
/* Das Raster der Farbfelder. */
.ind-swatches {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: .2rem;
}
.ind-swatch {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--ind-line);
    border-radius: 3px;
    padding: 0;
    cursor: pointer;
}
.ind-swatch:hover { outline: 1px solid var(--ind-accent, #3b82f6); }
.ind-swatch.active {
    outline: 2px solid var(--ind-accent, #3b82f6);
    outline-offset: 0;
}

/* ===================================================================
   LF3 · InDesign-Dunkle-Chrome + Statusleiste
   Rein ADDITIV ans Dateiende gehaengt: gleiche Spezifitaet wie die
   bestehenden ind-*-Regeln, aber SPAETER im File → gewinnt die Kaskade.
   Ziel: die typische dunkle InDesign-Optik konsistent durchziehen und
   die Statuszeile unten stylen.
   Das BLATT bleibt bewusst weiss: .ind-sheet (fill:#fff), .ind-pdfpreview
   und .ind-thumb (background:#fff) nutzen feste Farben und werden hier
   NICHT abgedunkelt. Kein hell/dunkel-Umschalter — der Editor ist dunkel.
   =================================================================== */

/* Die gemeinsamen Farbtokens der Editor-Wurzel auf die gestufte
   InDesign-Graustufung setzen (tief → hell: #1e1e1e / #2b2b2b / #363636),
   helle Schrift, einheitlicher blauer Akzent. Da die ganze Chrome
   (Kontrollleiste, Werkzeuge, rechtes Panel, Koepfe, Felder) diese Tokens
   nutzt, faerbt diese eine Stelle sie konsistent um. Das weisse Blatt
   haengt NICHT an diesen Tokens und bleibt darum hell. */
.ind {
    --ind-bg: #1e1e1e;          /* tiefster Grund (Wurzel) */
    --ind-panel: #2b2b2b;       /* Flaechen: rechtes Panel, Werkzeuge */
    --ind-head: #363636;        /* Koepfe/Kontrollleiste (eine Stufe heller) */
    --ind-line: #4a4a4a;        /* dezente Trenner */
    --ind-tinte: #dcdcdc;       /* helle Schrift */
    --ind-stumm: #9a9a9a;       /* gedaempfte Beschriftungen */
    --ind-akzent: #3b82f6;      /* blauer Akzent (aktive Zustaende) */
    --ind-akzent-hell: #3b82f6;
    --ind-accent: #3b82f6;      /* die .ind-side-tabs nutzen diesen (engl.) Namen */
    --ind-feld: #464646;        /* Eingabefelder */
    --ind-feld-tinte: #ececec;
}

/* Kontrollleiste + Werkzeugpalette + rechtes Panel klar als dunkle Chrome. */
.ind-top { background: var(--ind-head); }
.ind-tools { background: var(--ind-panel); }
.ind-side { background: var(--ind-panel); }
.ind-side-tabs { background: var(--ind-head); }
.ind-side-tabs button.active { border-bottom-color: var(--ind-accent); }
.ind-panel-head { background: var(--ind-head); }

/* Montageflaeche etwas tiefer, aber das Karo-Muster (Transparenzgrund) und
   damit der Kontrast zum weissen Blatt bleiben erhalten — nur die Grundfarbe
   wird nachgezogen (background-color statt background-Kurzform). */
.ind-stage { background-color: #232323; }

/* LF3-Statusleiste: schmale dunkle Zeile unten, kleine helle Schrift,
   per Flexbox verteilt (Seite X/N · Zoom · Dokumentname · Auswahl). */
.ind-statusbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 3px 10px;
    background: #2b2b2b;
    border-top: 1px solid #1a1a1a;
    color: #cfcfcf;
    font-size: 11px;
    line-height: 1.6;
    user-select: none;
}
.ind-status-item { white-space: nowrap; }
.ind-status-name { color: #ececec; font-weight: 600; }
.ind-status-sep { color: #6a6a6a; }

/* ED2 Inline-Text: das <textarea> im <foreignObject> fuellt den Rahmen genau aus, ohne
   stoerenden Eigenrahmen (der Objekt-Rahmen ist schon da), mit hellem Grund fuers Tippen
   und blauem Fokusrahmen wie ein InDesign-Textcursor. */
.ind-inline-edit {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1px 2px;
    border: 1px solid #3b82f6;
    background: rgba(255, 255, 255, 0.92);
    color: #000;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.15;
    resize: none;
    overflow: hidden;
    outline: none;
}
.ind-inline-edit:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35); }

/* ED9 Verknuepfungen: dokumentweite Palette aller Objekte mit URL/Sprungziel.
   Eine Zeile je Verknuepfung — Seite links, Objektart + gekuerztes Ziel rechts. */
.ind-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ind-link-item {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    padding: .32rem .35rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: .78rem;
}

.ind-link-item:hover {
    background: #3f3f3f;
}

.ind-link-item.active {
    background: var(--ind-akzent-hell);
    color: #fff;
}

.ind-link-page {
    flex: 0 0 auto;
    color: var(--ind-stumm);
    font-variant-numeric: tabular-nums;
    padding-top: 1px;
}

.ind-link-item.active .ind-link-page {
    color: #fff;
}

.ind-link-main {
    display: flex;
    flex-direction: column;
    min-width: 0;   /* erlaubt das Kuerzen der Kindzeilen */
}

.ind-link-obj {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Das Ziel (URL bzw. „→ Anker") als kleinere Sekundaerschrift. */
.ind-link-target {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .72rem;
    color: var(--ind-stumm);
}

.ind-link-item.active .ind-link-target {
    color: rgba(255, 255, 255, .82);
}

/* ED34/ED35: Bild-Verknuepfungen + Preflight-Palette teilen sich die ED9-Zeilendarstellung oben —
   nur zwei Ergaenzungen: das Verknuepfen-Eingabefeld und ein nicht-anklickbarer Preflight-Eintrag
   (dokumentweiter Befund ohne Seite). */
.ind-link-add {
    display: flex;
    gap: .35rem;
    padding: .3rem .35rem .5rem;
}

.ind-link-add input {
    flex: 1;
    min-width: 0;
}

.ind-link-item.disabled {
    cursor: default;
    opacity: .72;
}

.ind-link-item.disabled:hover {
    background: none;
}

/* ===================================================================
   ED6 · Absatzformat-Palette (Named-Style-Bindung)
   Eine InDesign-artige Liste benannter Absatzformate im Eigenschaften-
   Panel. Ein Klick weist das Format dem gewaehlten Textrahmen zu; das
   zugewiesene Format (.active) wird hervorgehoben.
   =================================================================== */
.ind-pstyle-block {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.ind-pstyle-head {
    color: var(--ind-stumm);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ind-pstyles {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ind-line);
    border-radius: 4px;
    overflow: hidden;
}
.ind-pstyle {
    text-align: left;
    background: var(--ind-feld);
    color: var(--ind-feld-tinte);
    border: 0;
    padding: .22rem .5rem;
    font-size: .78rem;
    font-family: var(--sans);
    cursor: pointer;
}
.ind-pstyle + .ind-pstyle { border-top: 1px solid var(--ind-line); }
.ind-pstyle:hover { background: var(--ind-accent, #3b82f6); color: #fff; }
.ind-pstyle.active {
    background: var(--ind-accent, #3b82f6);
    color: #fff;
    font-weight: 600;
}

/* ===================================================================
   ED30 · eigene Formate (StylePalette.razor) — dieselbe Optik wie ED6
   oben, plus die Verwaltung (Loeschen-Kreuz, Anlegen-Zeile).
   =================================================================== */
.ind-custom-styles {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.ind-custom-style-group {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.ind-custom-style-label {
    color: var(--ind-stumm);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ind-pstyle-row {
    display: flex;
    align-items: stretch;
}
.ind-pstyle-row .ind-pstyle { flex: 1 1 auto; }
.ind-pstyle-row + .ind-pstyle-row .ind-pstyle { border-top: 1px solid var(--ind-line); }
.ind-custom-style-new {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
}
.ind-hint-error { color: #dc2626; }

/* ===================================================================
   ED32 · Objekt-Effekte-Palette (EffectsPalette.razor).
   =================================================================== */
.ind-effects-block { flex-basis: 100%; }
.ind-effects-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .1rem 0;
}

/* LF2 Kontext-Kontrollleiste — schmale Zeile unter der Kontrollleiste (.ind-top), die je nach aktivem
   Werkzeug/Auswahl einen Hinweis zeigt (InDesigns Steuerung). Passt zur dunklen Chrome (LF3, --ind-*). */
.ind-ctxbar {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 3px 10px;
    background: var(--ind-panel, #333);
    border-bottom: 1px solid #111;
    color: var(--ind-stumm, #8a8a8a);
    font-size: 11px;
    line-height: 1.6;
    user-select: none;
}

/* Der Werkzeug-Name links, hervorgehoben — der klare Kontext. */
.ind-ctx-tool {
    color: var(--ind-feld-tinte, #ececec);
    font-weight: 600;
    white-space: nowrap;
}

/* Trenner zwischen Werkzeug und Hinweis. */
.ind-ctx-sep {
    width: 1px;
    align-self: stretch;
    margin: 2px 0;
    background: var(--ind-line, #4a4a4a);
}

/* Der kontextabhaengige Hinweis / die Auswahl-Info. */
.ind-ctx-hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* LF4 Einklappbare Paletten: jeder Palettenkopf im rechten Panel (.ind-side)
   traegt einen Klapp-Schalter (Dreieck ▾ offen / ▸ zu). Ein Klick auf Schalter
   oder Titel blendet den zugehoerigen .ind-panel-body aus. Passt zur dunklen
   InDesign-Chrome (--ind-*-Tokens, LF3). */
.ind-collapse-toggle {
    flex: 0 0 auto;
    margin-right: .35rem;
    padding: 0;
    width: 1.1em;
    line-height: 1;
    border: none;
    background: transparent;
    color: var(--ind-stumm);
    font-size: .7rem;
    cursor: pointer;
    user-select: none;
}

.ind-collapse-toggle:hover {
    color: var(--ind-feld-tinte, #ececec);
}

/* Der Titeltext klappt ebenfalls auf Klick und schiebt uebrige Kopf-Elemente
   (z. B. die Seiten-Werkzeuge) an den rechten Rand. */
.ind-panel-title {
    margin-right: auto;
    cursor: pointer;
    user-select: none;
}

/* Zusammengefalteter Palettenkoerper — vollstaendig ausgeblendet. */
.ind-panel-body.collapsed {
    display: none;
}

/* ED8 OCG-Ebenen: die Dokument-Ebenen-Palette (Optional Content Groups) im Seiten-Reiter. */
.ind-ocg {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ind-ocg-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .2rem;
}

.ind-ocg-name {
    flex: 1 1 auto;
    min-width: 0;
}

.ind-ocg-assign {
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px solid var(--ind-linie, #454545);
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.ind-ocg-sel {
    font-size: .78rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.ind-ocg-badge {
    font-size: .68rem;
    padding: .05rem .35rem;
    border-radius: 3px;
    background: var(--ind-akzent-hell, #3b82f6);
    color: #fff;
}

.ind-ocg-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.ind-ocg-row .ind-name {
    flex: 1 1 6rem;
    min-width: 0;
}

.ind-ocg-hint {
    margin: .5rem 0 0;
    font-size: .68rem;
    line-height: 1.35;
}

/* ED10 Suchen/Ersetzen + Rechtschreibung — mittiges kleines Panel ueber dem Editor, dunkle
   InDesign-Chrome. Das Overlay liegt ausserhalb von .ind, daher explizite Farben statt --ind-*. */
.ind-find-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 900;
}

.ind-find {
    position: fixed;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, 92vw);
    background: #2b2b2b;
    color: #dcdcdc;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    z-index: 901;
    font-size: 13px;
}

.ind-find-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #363636;
    border-bottom: 1px solid #4a4a4a;
    border-radius: 6px 6px 0 0;
    font-weight: 600;
}

.ind-find-close {
    background: none;
    border: none;
    color: #dcdcdc;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.ind-find-close:hover {
    color: #fff;
}

.ind-find-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ind-find-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ind-find-row > span {
    color: #b0b0b0;
    font-size: 11px;
}

.ind-find-row input {
    background: #464646;
    color: #ececec;
    border: 1px solid #4a4a4a;
    border-radius: 3px;
    padding: 5px 7px;
    font-size: 13px;
}

.ind-find-row input:focus {
    outline: none;
    border-color: #3b82f6;
}

.ind-find-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ind-find-actions button {
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
}

.ind-find-actions button:hover {
    background: #2f6fda;
}

.ind-find-status {
    color: #b0b0b0;
    font-size: 12px;
}

.ind-find-spellhead {
    color: #b0b0b0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-top: 1px solid #4a4a4a;
    padding-top: 8px;
}

.ind-find-spell {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ind-find-spellitem {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background: #363636;
    color: #dcdcdc;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 5px 8px;
    text-align: left;
    cursor: pointer;
    font-size: 12px;
}

.ind-find-spellitem:hover {
    border-color: #3b82f6;
    background: #3d3d3d;
}

.ind-find-spellword {
    font-weight: 600;
    color: #f0a0a0;
}

.ind-find-spellwhere {
    color: #8a8a8a;
    font-size: 11px;
    white-space: nowrap;
}

/* TXT1: der Klartext-Editor — Zeilennummern-Spalte neben dem Textfeld. */
.txt-editor { display: flex; border: 1px solid #d0d0d0; border-radius: 4px; overflow: hidden; background: #fff; }
.txt-gutter {
    margin: 0; padding: 8px 6px; text-align: right; user-select: none;
    background: #f3f3f3; color: #888; border-right: 1px solid #d0d0d0;
    font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.45;
    min-width: 3em; max-height: 30em; overflow: hidden;
}
.txt-area {
    flex: 1; border: 0; padding: 8px; resize: vertical; outline: none;
    font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.45;
    min-height: 20em; max-height: 30em; white-space: pre; overflow: auto;
}

/* TXT5: die eingefaerbte Vorschau — SyntaxHighlighter liefert die Abschnitte, hier nur die Farben. */
.txt-preview {
    margin: 0; padding: 8px; border: 1px solid #d0d0d0; border-radius: 4px; background: #fafafa;
    font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.45;
    white-space: pre-wrap; word-break: break-word; max-height: 26em; overflow: auto;
}
.syn-keyword { color: #0000ff; font-weight: 600; }
.syn-string { color: #a31515; }
.syn-number { color: #098658; }
.syn-comment { color: #808080; font-style: italic; }
.syn-identifier { color: #001080; }
.syn-punctuation { color: #333333; font-weight: 600; }
.syn-heading { color: #0000ff; font-weight: 700; }
.syn-emphasis { color: #000000; font-weight: 700; }
.syn-inlinecode { color: #a31515; background: #f0f0f0; }

/* Dreamweaver HTML-Editor App Mode */
.htmleditor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}
.btn-app-open {
    padding: .35rem .85rem;
    font-size: .85rem;
    background: #1d4e79;
    color: #fff;
    border: 1px solid #163e61;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}
.btn-app-open:hover {
    background: #256196;
}

.dreamweaver-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: #1e1e1e;
    color: #e0e0e0;
}
.dreamweaver-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #252526;
    padding: .4rem .8rem;
    border-bottom: 1px solid #3c3c3c;
    flex: 0 0 auto;
}
.dw-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
}
.dw-icon {
    font-size: 1.1rem;
    color: #3794ff;
}
.dw-sub {
    font-size: .75rem;
    color: #888;
    background: #333;
    padding: 1px 6px;
    border-radius: 3px;
}
.dw-modes {
    display: flex;
    gap: 2px;
    background: #1e1e1e;
    padding: 2px;
    border-radius: 4px;
    border: 1px solid #3c3c3c;
}
.dw-btn {
    padding: .25rem .75rem;
    border: 0;
    background: transparent;
    color: #aaa;
    font-size: .82rem;
    cursor: pointer;
    border-radius: 3px;
}
.dw-btn.active {
    background: #0e639c;
    color: #fff;
    font-weight: bold;
}
.dw-actions {
    display: flex;
    gap: .4rem;
}
.dw-btn-action {
    padding: .25rem .65rem;
    font-size: .8rem;
    background: #333;
    color: #ddd;
    border: 1px solid #444;
    border-radius: 3px;
    cursor: pointer;
}
.dw-btn-action:hover {
    background: #444;
}

.dreamweaver-body {
    flex: 1 1 auto;
    display: flex;
    overflow: hidden;
    height: calc(100vh - 42px);
}
.dreamweaver-pane {
    flex: 1 1 50%;
    overflow-y: auto;
    padding: .75rem;
    box-sizing: border-box;
}
.dreamweaver-code-pane {
    border-right: 1px solid #3c3c3c;
    background: #1e1e1e;
}
.dreamweaver-preview-pane {
    background: #252526;
}
.dreamweaver-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: .6rem;
}
.dw-tab-btn {
    padding: .3rem .7rem;
    font-size: .8rem;
    background: #2d2d2d;
    color: #bbb;
    border: 1px solid #3c3c3c;
    border-radius: 3px;
    cursor: pointer;
}
.dw-tab-btn.active {
    background: #0e639c;
    color: #fff;
    border-color: #0e639c;
}

/* M1434: in einer Gruppe - die Kinder der bearbeiteten Ebene gestrichelt, das bearbeitete Kind betont. */
.ind-group-child {
    fill: none;
    stroke: #8a8a8a;
    stroke-width: 1;
    stroke-dasharray: 2 2;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.ind-group-child-active {
    fill: rgba(230, 120, 20, .08);
    stroke: #e67814;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.ind-group-text {
    width: 100%;
    min-width: 12em;
}